diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
index 3ca5098..648ca65 100644
--- a/webui/src/web-components/demo/mock-git-data-service.ts
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -45,6 +45,8 @@
       old_mode: "000000",
       old_hash: "0000000000000000000000000000000000000000",
       new_hash: "def0123456789abcdef0123456789abcdef0123",
+      additions: 54,
+      deletions: 0,
     },
     {
       path: "src/components/RangePicker.js",
@@ -53,6 +55,8 @@
       old_mode: "000000",
       old_hash: "0000000000000000000000000000000000000000",
       new_hash: "cde0123456789abcdef0123456789abcdef0123",
+      additions: 32,
+      deletions: 0,
     },
     {
       path: "src/components/App.js",
@@ -61,6 +65,8 @@
       old_mode: "100644",
       old_hash: "abc0123456789abcdef0123456789abcdef0123",
       new_hash: "bcd0123456789abcdef0123456789abcdef0123",
+      additions: 15,
+      deletions: 3,
     },
     {
       path: "src/styles/main.css",
@@ -69,6 +75,8 @@
       old_mode: "100644",
       old_hash: "fgh0123456789abcdef0123456789abcdef0123",
       new_hash: "ghi0123456789abcdef0123456789abcdef0123",
+      additions: 25,
+      deletions: 8,
     },
   ];
 
@@ -395,7 +403,7 @@
     // to simulate unstaged changes
     return this.mockDiffFiles.map((file) => ({
       ...file,
-      newHash: "0000000000000000000000000000000000000000",
+      new_hash: "0000000000000000000000000000000000000000",
     }));
   }
 
diff --git a/webui/src/web-components/demo/mocks/browser.ts b/webui/src/web-components/demo/mocks/browser.ts
index bcd82e4..0e05730 100644
--- a/webui/src/web-components/demo/mocks/browser.ts
+++ b/webui/src/web-components/demo/mocks/browser.ts
@@ -1,4 +1,4 @@
 import { setupWorker } from "msw/browser";
 import { handlers } from "./handlers";
 
-export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...(handlers as any));
diff --git a/webui/src/web-components/sketch-diff-file-picker.ts b/webui/src/web-components/sketch-diff-file-picker.ts
index c834f12..eb94a5f 100644
--- a/webui/src/web-components/sketch-diff-file-picker.ts
+++ b/webui/src/web-components/sketch-diff-file-picker.ts
@@ -85,10 +85,13 @@
       cursor: not-allowed;
     }
 
-    .file-info {
+    .file-position {
       font-size: 14px;
       color: var(--text-muted, #666);
-      margin-left: 8px;
+      font-weight: 500;
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
       white-space: nowrap;
     }
 
@@ -176,6 +179,7 @@
           >
             Previous
           </button>
+          ${this.selectedIndex >= 0 ? this.renderFilePosition() : ""}
           <button
             @click=${this.handleNext}
             ?disabled=${this.selectedIndex >= this.files.length - 1}
@@ -183,18 +187,14 @@
             Next
           </button>
         </div>
-
-        ${this.selectedIndex >= 0 ? this.renderFileInfo() : ""}
       </div>
     `;
   }
 
-  renderFileInfo() {
-    const file = this.files[this.selectedIndex];
+  renderFilePosition() {
     return html`
-      <div class="file-info">
-        ${this.getFileStatusName(file.status)} | ${this.selectedIndex + 1} of
-        ${this.files.length}
+      <div class="file-position">
+        ${this.selectedIndex + 1} of ${this.files.length}
       </div>
     `;
   }
@@ -204,7 +204,30 @@
    */
   formatFileOption(file: GitDiffFile): string {
     const statusSymbol = this.getFileStatusSymbol(file.status);
-    return `${statusSymbol} ${file.path}`;
+    const changesInfo = this.getChangesInfo(file);
+    return `${statusSymbol} ${file.path}${changesInfo}`;
+  }
+
+  /**
+   * Get changes information (+/-) for display
+   */
+  getChangesInfo(file: GitDiffFile): string {
+    const additions = file.additions || 0;
+    const deletions = file.deletions || 0;
+
+    if (additions === 0 && deletions === 0) {
+      return "";
+    }
+
+    const parts = [];
+    if (additions > 0) {
+      parts.push(`+${additions}`);
+    }
+    if (deletions > 0) {
+      parts.push(`-${deletions}`);
+    }
+
+    return ` (${parts.join(", ")})`;
   }
 
   /**
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 70b09f7..ca839df 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -128,6 +128,31 @@
       font-size: 14px;
     }
 
+    .refresh-button {
+      padding: 6px 12px;
+      background-color: #f0f0f0;
+      color: var(--text-color, #333);
+      border: 1px solid var(--border-color, #e0e0e0);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: background-color 0.2s;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .refresh-button:hover {
+      background-color: #e0e0e0;
+    }
+
+    .refresh-button:disabled {
+      background-color: #f8f8f8;
+      color: #999;
+      cursor: not-allowed;
+    }
+
     @media (max-width: 768px) {
       .commit-selector {
         max-width: 100%;
@@ -189,6 +214,15 @@
           ? this.renderRangeSelectors()
           : this.renderSingleSelector()}
       </div>
+
+      <button
+        class="refresh-button"
+        @click="${this.handleRefresh}"
+        ?disabled="${this.loading}"
+        title="Refresh commit list"
+      >
+        🔄 Refresh
+      </button>
     `;
   }
 
@@ -360,6 +394,13 @@
   }
 
   /**
+   * Handle refresh button click
+   */
+  handleRefresh() {
+    this.loadCommits();
+  }
+
+  /**
    * Dispatch range change event
    */
   dispatchRangeEvent() {
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 1b673cd..7ca33b3 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -159,11 +159,16 @@
       background-color: #f0f0f0;
       border: 1px solid #ccc;
       border-radius: 4px;
-      padding: 6px 12px;
-      font-size: 12px;
+      padding: 8px;
+      font-size: 16px;
       cursor: pointer;
       white-space: nowrap;
       transition: background-color 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 36px;
+      min-height: 36px;
     }
 
     .view-toggle-button:hover {
@@ -316,30 +321,16 @@
             ></sketch-diff-file-picker>
 
             <div style="display: flex; gap: 8px;">
-              ${this.isRightEditable
-                ? html`
-                    <div
-                      class="editable-indicator"
-                      title="This file is editable"
-                    >
-                      <span
-                        style="padding: 6px 12px; background-color: #e9ecef; border-radius: 4px; font-size: 12px; color: #495057;"
-                      >
-                        Editable
-                      </span>
-                    </div>
-                  `
-                : ""}
               <button
                 class="view-toggle-button"
                 @click="${this.toggleHideUnchangedRegions}"
                 title="${this.hideUnchangedRegionsEnabled
-                  ? "Expand All"
-                  : "Hide Unchanged"}"
+                  ? "Expand All: Show all lines including unchanged regions"
+                  : "Collapse Expanded Lines: Hide unchanged regions to focus on changes"}"
               >
                 ${this.hideUnchangedRegionsEnabled
-                  ? "Expand All"
-                  : "Hide Unchanged"}
+                  ? this.renderExpandAllIcon()
+                  : this.renderCollapseIcon()}
               </button>
             </div>
           </div>
@@ -550,6 +541,54 @@
   }
 
   /**
+   * Render expand all icon (dotted line with arrows pointing away)
+   */
+  renderExpandAllIcon() {
+    return html`
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <!-- Dotted line in the middle -->
+        <line
+          x1="2"
+          y1="8"
+          x2="14"
+          y2="8"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-dasharray="2,1"
+        />
+        <!-- Large arrow pointing up -->
+        <path d="M8 2 L5 6 L11 6 Z" fill="currentColor" />
+        <!-- Large arrow pointing down -->
+        <path d="M8 14 L5 10 L11 10 Z" fill="currentColor" />
+      </svg>
+    `;
+  }
+
+  /**
+   * Render collapse icon (arrows pointing towards dotted line)
+   */
+  renderCollapseIcon() {
+    return html`
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <!-- Dotted line in the middle -->
+        <line
+          x1="2"
+          y1="8"
+          x2="14"
+          y2="8"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-dasharray="2,1"
+        />
+        <!-- Large arrow pointing down towards line -->
+        <path d="M8 6 L5 2 L11 2 Z" fill="currentColor" />
+        <!-- Large arrow pointing up towards line -->
+        <path d="M8 10 L5 14 L11 14 Z" fill="currentColor" />
+      </svg>
+    `;
+  }
+
+  /**
    * Refresh the diff view by reloading commits and diff data
    *
    * This is called when the Monaco diff tab is activated to ensure:
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index 48fd66e..40b1200 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -196,6 +196,10 @@
       transition: opacity 0.3s ease;
     }
 
+    .save-indicator.idle {
+      background-color: #6c757d;
+    }
+
     .save-indicator.modified {
       background-color: #f0ad4e;
     }
@@ -374,16 +378,18 @@
       <main ${ref(this.container)}></main>
 
       <!-- Save indicator - shown when editing -->
-      ${this.editableRight && this.saveState !== "idle"
+      ${this.editableRight
         ? html`
             <div class="save-indicator ${this.saveState}">
-              ${this.saveState === "modified"
-                ? "Modified..."
-                : this.saveState === "saving"
-                  ? "Saving..."
-                  : this.saveState === "saved"
-                    ? "Saved"
-                    : ""}
+              ${this.saveState === "idle"
+                ? "Editable"
+                : this.saveState === "modified"
+                  ? "Modified..."
+                  : this.saveState === "saving"
+                    ? "Saving..."
+                    : this.saveState === "saved"
+                      ? "Saved"
+                      : ""}
             </div>
           `
         : ""}