commit 9b999b08b8af6a69e24d910a3f3da542b4104c26
author Philip Zeyliger <philip.zeyliger@gmail.com> Fri Apr 25 16:31:50 2025 +0000
committer Philip Zeyliger <philip.zeyliger@gmail.com> Fri Apr 25 11:43:58 2025 -0700
tree 1cd853a40a95c47c9e9b028b9125015ba41cb051
parent 176a5105d3f5e515ea782b054f1ab853a8afc399

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>

webui/src/web-components/sketch-app-shell.ts

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) {