commit 64f60461b00c474b0b4747a06177d5c7a357bba9
author Philip Zeyliger <philip@bold.dev> Mon Jun 16 13:57:10 2025 -0700
committer Autoformatter <bot@sketch.dev> Mon Jun 16 20:58:24 2025 +0000
tree cfeceff998a165af451099c0ec23b5d2b0fd42f2
parent db8caa0eb8576b8c0d65cc0b7b6aa4e241a7cdb1

loop: add diff stats from sketch-base to HEAD in /state endpoint

Add lines added/removed statistics computed from sketch-base to current HEAD,
displayed in webui Diff mode button for quick change overview.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s3f10ecf39df6b581k

webui/src/web-components/sketch-view-mode-select.ts

diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
index c83b964..c6385d3 100644
--- a/webui/src/web-components/sketch-view-mode-select.ts
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -7,6 +7,14 @@
   // Current active mode
   @property()
   activeMode: "chat" | "diff2" | "terminal" = "chat";
+
+  // Diff stats
+  @property({ type: Number })
+  diffLinesAdded: number = 0;
+
+  @property({ type: Number })
+  diffLinesRemoved: number = 0;
+
   // Header bar: view mode buttons
 
   static styles = css`
@@ -36,13 +44,32 @@
     }
 
     @media (max-width: 1400px) {
-      .tab-btn span:not(.tab-icon) {
+      .tab-btn span:not(.tab-icon):not(.diff-stats) {
         display: none;
       }
 
       .tab-btn {
         padding: 8px 10px;
       }
+
+      /* Always show diff stats */
+      .diff-stats {
+        display: inline !important;
+        font-size: 11px;
+        margin-left: 2px;
+      }
+    }
+
+    /* Style for diff stats */
+    .diff-stats {
+      font-size: 11px;
+      margin-left: 4px;
+      color: inherit;
+      opacity: 0.8;
+    }
+
+    .tab-btn.active .diff-stats {
+      opacity: 1;
     }
 
     .tab-btn:not(:last-child) {
@@ -133,11 +160,19 @@
         <button
           id="showDiff2Button"
           class="tab-btn ${this.activeMode === "diff2" ? "active" : ""}"
-          title="Diff View"
+          title="Diff View - ${this.diffLinesAdded > 0 ||
+          this.diffLinesRemoved > 0
+            ? `+${this.diffLinesAdded} -${this.diffLinesRemoved}`
+            : "No changes"}"
           @click=${() => this._handleViewModeClick("diff2")}
         >
           <span class="tab-icon">±</span>
-          <span>Diff</span>
+          <span class="diff-text">Diff</span>
+          ${this.diffLinesAdded > 0 || this.diffLinesRemoved > 0
+            ? html`<span class="diff-stats"
+                >+${this.diffLinesAdded} -${this.diffLinesRemoved}</span
+              >`
+            : ""}
         </button>
 
         <button