diff --git a/webui/src/web-components/demo/diff-header-demo.html b/webui/src/web-components/demo/diff-header-demo.html
new file mode 100644
index 0000000..b50b23a
--- /dev/null
+++ b/webui/src/web-components/demo/diff-header-demo.html
@@ -0,0 +1,251 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Diff Header Demo</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 20px;
+        background: #f5f5f5;
+      }
+      .demo-container {
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 20px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .demo-title {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 15px;
+        color: #333;
+      }
+      .demo-description {
+        margin-bottom: 15px;
+        color: #666;
+      }
+      .demo-layout {
+        border: 2px dashed #ccc;
+        padding: 15px;
+        background: #fafafa;
+      }
+      .header-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 16px;
+        border: 1px solid #e0e0e0;
+        background: #f8f8f8;
+        margin-bottom: 10px;
+      }
+      .commits-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex: 1;
+      }
+      .commits-label {
+        font-weight: 500;
+        color: #333;
+      }
+      .commit-selector {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .file-selector-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .file-selector {
+        min-width: 200px;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .expand-button {
+        background: transparent;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        padding: 6px 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        min-height: 32px;
+      }
+      .expand-button:hover {
+        background: #e8e8e8;
+      }
+      .spacer {
+        flex: 1;
+      }
+      .old-layout {
+        opacity: 0.6;
+      }
+      .new-layout {
+        border-color: #4caf50;
+        background: #f8fff8;
+      }
+      .change-highlight {
+        background: #ffffcc;
+        padding: 2px 4px;
+        border-radius: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Diff Header Layout Changes</h1>
+
+    <div class="demo-container">
+      <div class="demo-title">Before: Original Layout</div>
+      <div class="demo-description">
+        File selector on left, Commits with expand button, range picker on right
+      </div>
+      <div class="demo-layout old-layout">
+        <div class="header-section">
+          <select class="file-selector">
+            <option>All files (3)</option>
+            <option>Modified: src/file1.ts</option>
+            <option>Added: src/file2.ts</option>
+          </select>
+          <div class="spacer"></div>
+          <div class="commits-section">
+            <button class="expand-button">▶ Commits</button>
+            <!-- Hidden by default -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-container">
+      <div class="demo-title">After: New Layout</div>
+      <div class="demo-description">
+        <span class="change-highlight">From/To selectors directly visible</span>
+        on left,
+        <span class="change-highlight">file selector moved to right</span>,
+        <span class="change-highlight"
+          >expand button in header when single file selected</span
+        >
+      </div>
+      <div class="demo-layout new-layout">
+        <div class="header-section">
+          <div class="commits-section">
+            <div class="commit-selector">
+              <label>From:</label>
+              <select>
+                <option>abc1234 Initial commit</option>
+                <option selected>def5678 Add feature</option>
+              </select>
+            </div>
+            <div class="commit-selector">
+              <label>To:</label>
+              <select>
+                <option selected>Uncommitted Changes</option>
+                <option>ghi9012 Fix bug</option>
+              </select>
+            </div>
+          </div>
+          <div class="spacer"></div>
+          <div class="file-selector-container">
+            <select class="file-selector">
+              <option>All files (3)</option>
+              <option>Modified: src/file1.ts</option>
+              <option>Added: src/file2.ts</option>
+            </select>
+            <!-- No expand button when "All files" selected -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-container">
+      <div class="demo-title">After: Single File Selected</div>
+      <div class="demo-description">
+        When a single file is selected,
+        <span class="change-highlight"
+          >expand/collapse button appears in header</span
+        >
+      </div>
+      <div class="demo-layout new-layout">
+        <div class="header-section">
+          <div class="commits-section">
+            <div class="commit-selector">
+              <label>From:</label>
+              <select>
+                <option>abc1234 Initial commit</option>
+                <option selected>def5678 Add feature</option>
+              </select>
+            </div>
+            <div class="commit-selector">
+              <label>To:</label>
+              <select>
+                <option selected>Uncommitted Changes</option>
+                <option>ghi9012 Fix bug</option>
+              </select>
+            </div>
+          </div>
+          <div class="spacer"></div>
+          <div class="file-selector-container">
+            <select class="file-selector">
+              <option>All files (3)</option>
+              <option selected>Modified: src/file1.ts</option>
+              <option>Added: src/file2.ts</option>
+            </select>
+            <button
+              class="expand-button"
+              title="Expand: Show all lines including unchanged regions"
+            >
+              <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>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h2>Summary of Changes</h2>
+    <ul>
+      <li>
+        ✅ Removed the "Commits" expand/collapse button and label - From/To now
+        directly visible
+      </li>
+      <li>✅ Moved file selector from left to right side of header</li>
+      <li>
+        ✅ Added expand/collapse button in header when single file is selected
+      </li>
+      <li>
+        ✅ All controls (From, To, File Selector) now on same horizontal line
+      </li>
+      <li>
+        ✅ Expand/collapse button controls showing/hiding unchanged regions in
+        diff
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 02dafd9..90b417b 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -25,8 +25,7 @@
   @state()
   private toCommit: string = "";
 
-  @state()
-  private commitsExpanded: boolean = false;
+  // Removed commitsExpanded state - always expanded now
 
   @state()
   private loading: boolean = true;
@@ -58,30 +57,7 @@
       box-sizing: border-box;
     }
 
-    .commits-header {
-      display: flex;
-      align-items: center;
-      width: 100%;
-    }
-
-    .commits-toggle {
-      background-color: transparent;
-      border: 1px solid var(--border-color, #e0e0e0);
-      border-radius: 4px;
-      padding: 8px 12px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-      transition: background-color 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: var(--text-color, #333);
-    }
-
-    .commits-toggle:hover {
-      background-color: var(--background-hover, #e8e8e8);
-    }
+    /* Removed commits-header and commits-label styles - no longer needed */
 
     .commit-selectors {
       display: flex;
@@ -184,23 +160,7 @@
 
   renderRangePicker() {
     return html`
-      <div class="commits-header">
-        <button
-          class="commits-toggle"
-          @click="${this.toggleCommitsExpansion}"
-          title="${this.commitsExpanded
-            ? "Hide"
-            : "Show"} commit range selection"
-        >
-          ${this.commitsExpanded ? "▼" : "▶"} Commits
-        </button>
-      </div>
-
-      ${this.commitsExpanded
-        ? html`
-            <div class="commit-selectors">${this.renderRangeSelectors()}</div>
-          `
-        : ""}
+      <div class="commit-selectors">${this.renderRangeSelectors()}</div>
     `;
   }
 
@@ -358,12 +318,7 @@
     this.dispatchRangeEvent();
   }
 
-  /**
-   * Toggle the expansion of commit selectors
-   */
-  toggleCommitsExpansion() {
-    this.commitsExpanded = !this.commitsExpanded;
-  }
+  // Removed toggleCommitsExpansion method - always expanded now
 
   /**
    * Get a summary of the current commit range for display
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index f23472d..2f66824 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -195,6 +195,12 @@
       gap: 12px;
     }
 
+    .file-selector-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     .file-selector {
       min-width: 200px;
       padding: 8px 12px;
@@ -231,24 +237,26 @@
       flex: 1;
     }
 
-    .view-toggle-button {
-      background-color: #f0f0f0;
-      border: 1px solid #ccc;
+    .view-toggle-button,
+    .header-expand-button {
+      background-color: transparent;
+      border: 1px solid var(--border-color, #e0e0e0);
       border-radius: 4px;
-      padding: 8px;
-      font-size: 16px;
+      padding: 6px 8px;
+      font-size: 14px;
       cursor: pointer;
       white-space: nowrap;
       transition: background-color 0.2s;
       display: flex;
       align-items: center;
       justify-content: center;
-      min-width: 36px;
-      min-height: 36px;
+      min-width: 32px;
+      min-height: 32px;
     }
 
-    .view-toggle-button:hover {
-      background-color: #e0e0e0;
+    .view-toggle-button:hover,
+    .header-expand-button:hover {
+      background-color: var(--background-hover, #e8e8e8);
     }
 
     .diff-container {
@@ -558,12 +566,12 @@
       <div class="controls">
         <div class="controls-container">
           <div class="range-row">
-            ${this.renderFileSelector()}
-            <div class="spacer"></div>
             <sketch-diff-range-picker
               .gitService="${this.gitService}"
               @range-change="${this.handleRangeChange}"
             ></sketch-diff-range-picker>
+            <div class="spacer"></div>
+            ${this.renderFileSelector()}
           </div>
         </div>
       </div>
@@ -578,21 +586,24 @@
     const fileCount = this.files.length;
 
     return html`
-      <select
-        class="file-selector"
-        .value="${this.selectedFile}"
-        @change="${this.handleFileSelection}"
-        ?disabled="${fileCount === 0}"
-      >
-        <option value="">All files (${fileCount})</option>
-        ${this.files.map(
-          (file) => html`
-            <option value="${file.path}">
-              ${this.getFileDisplayName(file)}
-            </option>
-          `,
-        )}
-      </select>
+      <div class="file-selector-container">
+        <select
+          class="file-selector"
+          .value="${this.selectedFile}"
+          @change="${this.handleFileSelection}"
+          ?disabled="${fileCount === 0}"
+        >
+          <option value="">All files (${fileCount})</option>
+          ${this.files.map(
+            (file) => html`
+              <option value="${file.path}">
+                ${this.getFileDisplayName(file)}
+              </option>
+            `,
+          )}
+        </select>
+        ${this.selectedFile ? this.renderSingleFileExpandButton() : ""}
+      </div>
     `;
   }
 
@@ -1006,6 +1017,27 @@
   }
 
   /**
+   * Render expand/collapse button for single file view in header
+   */
+  renderSingleFileExpandButton() {
+    if (!this.selectedFile) return "";
+
+    const isExpanded = this.fileExpandStates.get(this.selectedFile) ?? false;
+
+    return html`
+      <button
+        class="header-expand-button"
+        @click="${() => this.toggleFileExpansion(this.selectedFile)}"
+        title="${isExpanded
+          ? "Collapse: Hide unchanged regions to focus on changes"
+          : "Expand: Show all lines including unchanged regions"}"
+      >
+        ${isExpanded ? this.renderCollapseIcon() : this.renderExpandAllIcon()}
+      </button>
+    `;
+  }
+
+  /**
    * Render single file view with full-screen Monaco editor
    */
   renderSingleFileView() {