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>