Update window title to show 'sk: <title>' and add disconnection indicator
The window title now displays 'sk: <title>' to make it easier to identify
which tab is which when multiple sketch tabs are open. Additionally, a red
circle indicator (🔴) is added to the title when the connection to the server
is lost.
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index c22f9d9..1012f49 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -188,7 +188,19 @@
messages: AgentMessage[] = [];
@property()
- title: string = "";
+ set title(value: string) {
+ const oldValue = this._title;
+ this._title = value;
+ this.requestUpdate("title", oldValue);
+ // Update document title when title property changes
+ this.updateDocumentTitle();
+ }
+
+ get title(): string {
+ return this._title;
+ }
+
+ private _title: string = "";
private dataManager = new DataManager();
@@ -241,6 +253,9 @@
this.handleConnectionStatusChanged.bind(this),
);
+ // Set initial document title
+ this.updateDocumentTitle();
+
// Initialize the data manager
this.dataManager.initialize();
}
@@ -425,6 +440,20 @@
});
}
+ /**
+ * Updates the document title based on current title and connection status
+ */
+ private updateDocumentTitle(): void {
+ let docTitle = `sk: ${this.title || "untitled"}`;
+
+ // Add red circle emoji if disconnected
+ if (this.connectionStatus === "disconnected") {
+ docTitle += " 🔴";
+ }
+
+ document.title = docTitle;
+ }
+
private handleDataChanged(eventData: {
state: State;
newMessages: AgentMessage[];
@@ -445,6 +474,9 @@
if (state) {
this.containerState = state;
this.title = state.title;
+
+ // Update document title when sketch title changes
+ this.updateDocumentTitle();
}
// Update messages
@@ -457,6 +489,9 @@
): void {
this.connectionStatus = status;
this.connectionErrorMessage = errorMessage || "";
+
+ // Update document title when connection status changes
+ this.updateDocumentTitle();
}
async _sendChat(e: CustomEvent) {