diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 4209062..07e60a0 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -19,7 +19,8 @@
       "Bash(grep -qE \"\\(Running \\\\`target|error\\\\[|panicked|terminated\\)\" /tmp/claude-1000/-mnt-data-Development-GitLite/71a8b49f-ac61-4ad9-aaba-dc0219044038/tasks/bt54rikhh.output)",
       "Bash(grep -qE \"\\(Running \\\\`target|error\\\\[|panicked|terminated\\)\" /tmp/claude-1000/-mnt-data-Development-GitLite/71a8b49f-ac61-4ad9-aaba-dc0219044038/tasks/b7nyub68s.output)",
       "Bash(npm install *)",
-      "Bash(cargo check *)"
+      "Bash(cargo check *)",
+      "Bash(npx vite *)"
     ]
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 842d103..86236d1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -636,7 +636,7 @@
         />
       </aside>
 
-      <!-- Center: summary + status + commit + file history + compare -->
+      <!-- Center: summary + status + commit + compare -->
       <section class="main-panel" aria-label="Repository status">
         <div class="repo-summary">
           <div class="repo-meta">
@@ -679,18 +679,6 @@
           />
         </div>
 
-        <div class="file-history-section">
-          <FileHistoryPanel
-            {fileHistory}
-            {selectedExplorerPath}
-            selectedExplorerLabel={selectedExplorerPath ? `${selectedExplorerKind === "folder" ? "Folder" : "File"} history` : "File history"}
-            {hasRepository}
-            {isBusy}
-            onDiff={diffSelectedFileFromCommit}
-            onRestore={restoreSelectedFileFromCommit}
-          />
-        </div>
-
         <ComparePanel
           {commits}
           {hasRepository}
@@ -707,7 +695,7 @@
         />
       </section>
 
-      <!-- Right sidebar: commit history -->
+      <!-- Right sidebar: commit graph + file history -->
       <aside class="history-aside" aria-label="Commit history">
         <HistoryPanel
           {commits}
@@ -722,6 +710,15 @@
             expandedCommitHashes = next;
           }}
         />
+        <FileHistoryPanel
+          {fileHistory}
+          {selectedExplorerPath}
+          selectedExplorerLabel={selectedExplorerPath ? `${selectedExplorerKind === "folder" ? "Folder" : "File"} history` : "File history"}
+          {hasRepository}
+          {isBusy}
+          onDiff={diffSelectedFileFromCommit}
+          onRestore={restoreSelectedFileFromCommit}
+        />
       </aside>
     </section>
   </div>
diff --git a/src/app.css b/src/app.css
index 05c41b7..93fd32f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,28 +1,29 @@
 @import "tailwindcss";
 
 @theme {
-  --color-ink: #202326;
-  --color-ink-muted: #697681;
-  --color-ink-faint: #6c7882;
-  --color-ink-dim: #5f6b75;
-  --color-ink-quiet: #596670;
+  --color-ink: #dde1f0;
+  --color-ink-muted: #8090be;
+  --color-ink-faint: #3c4668;
+  --color-ink-dim: #5e6e9c;
+  --color-ink-quiet: #7880ac;
 
-  --color-surface: #fbfcfd;
-  --color-surface-alt: #eef1f3;
-  --color-surface-dim: #f7f9fa;
-  --color-surface-hover: #f6f8f9;
+  --color-surface: #161a24;
+  --color-surface-alt: #0e1118;
+  --color-surface-dim: #191d2a;
+  --color-surface-hover: #202438;
+  --color-surface-raised: #1c2033;
 
-  --color-border: #d2d8de;
-  --color-border-subtle: #dce1e5;
-  --color-border-input: #c7ced4;
+  --color-border: #2a2f45;
+  --color-border-subtle: #1e2236;
+  --color-border-input: #323658;
 
-  --color-primary: #256f8f;
-  --color-primary-dark: #1f5f7b;
-  --color-accent: #4f7d96;
+  --color-primary: #5a8cf8;
+  --color-primary-dark: #4878f0;
+  --color-accent: #6a9aff;
 
-  --color-bar: #1a1f23;
-  --color-bar-text: #c8d0d6;
-  --color-bar-muted: #8fa8b8;
+  --color-bar: #090c14;
+  --color-bar-text: #c0cce0;
+  --color-bar-muted: #4a5a78;
 
   --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
 }
@@ -31,6 +32,14 @@
   *, *::before, *::after { box-sizing: border-box; }
 
   html, body, #app { width: 100%; height: 100%; margin: 0; }
+
+  * { scrollbar-width: thin; scrollbar-color: #2a2f45 transparent; }
+  ::-webkit-scrollbar { width: 5px; height: 5px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: #2a2f45; border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: #3a3f58; }
+
+  html { color-scheme: dark; }
   body {
     overflow: hidden;
     color: var(--color-ink);
@@ -48,54 +57,84 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 7px;
-    min-height: 32px;
-    padding: 0 12px;
-    border: 1px solid var(--color-border-input);
+    gap: 6px;
+    min-height: 30px;
+    padding: 0 11px;
+    border: 1px solid var(--color-border);
     border-radius: 6px;
-    color: var(--color-ink);
-    background: #ffffff;
+    color: var(--color-ink-muted);
+    background: var(--color-surface-raised);
     cursor: pointer;
-    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+    font-size: 13px;
   }
-  button:hover:not(:disabled) { border-color: #8fa0ad; background: var(--color-surface-hover); }
-  button:disabled { cursor: not-allowed; opacity: 0.55; }
+  button:hover:not(:disabled) {
+    border-color: var(--color-border-input);
+    background: var(--color-surface-hover);
+    color: var(--color-ink);
+  }
+  button:disabled { cursor: not-allowed; opacity: 0.4; }
 
   input, textarea {
     width: 100%;
     border: 1px solid var(--color-border-input);
     border-radius: 6px;
     color: var(--color-ink);
-    background: #ffffff;
+    background: var(--color-surface-raised);
     outline: none;
   }
   input:focus, textarea:focus {
-    border-color: #2f7da1;
-    box-shadow: 0 0 0 3px rgba(47, 125, 161, 0.14);
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(90, 140, 248, 0.18);
   }
   input { height: 34px; padding: 0 11px; }
   textarea { resize: vertical; min-height: 132px; padding: 10px 11px; line-height: 1.45; }
+
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    height: 34px;
+    padding: 0 32px 0 11px;
+    border: 1px solid var(--color-border-input);
+    border-radius: 6px;
+    color: var(--color-ink);
+    background-color: var(--color-surface-raised);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e6e9c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 9px center;
+    outline: none;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  select:focus {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(90, 140, 248, 0.18);
+  }
+  select option { background: #1c2033; color: var(--color-ink); }
 }
 
 @layer components {
   /* --- Shared utilities --- */
 
-  .btn-sm { min-height: 28px; padding: 0 8px; font-size: 12px; }
+  .btn-sm { min-height: 26px; padding: 0 8px; font-size: 12px; }
 
   .btn-primary {
     border-color: var(--color-primary);
     color: #ffffff;
     background: var(--color-primary);
+    font-weight: 600;
   }
   .btn-primary:hover:not(:disabled) {
     border-color: var(--color-primary-dark);
     background: var(--color-primary-dark);
+    color: #ffffff;
   }
 
   .panel {
     min-height: 0;
     border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border-radius: 10px;
     background: var(--color-surface);
   }
 
@@ -108,28 +147,29 @@
     padding: 8px 12px;
     border-bottom: 1px solid var(--color-border-subtle);
   }
-  .section-head h2 { margin: 1px 0 0; color: var(--color-ink); font-size: 14px; line-height: 1.2; }
+  .section-head h2 { margin: 1px 0 0; color: var(--color-ink); font-size: 14px; line-height: 1.2; font-weight: 600; }
 
   .eyebrow {
     display: block;
-    color: var(--color-ink-muted);
-    font-size: 11px;
+    color: var(--color-ink-faint);
+    font-size: 10.5px;
     font-weight: 800;
     text-transform: uppercase;
+    letter-spacing: 0.06em;
   }
 
   .pill {
     display: inline-flex;
     align-items: center;
-    min-height: 24px;
-    padding: 0 8px;
+    min-height: 20px;
+    padding: 0 7px;
     border-radius: 999px;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
     white-space: nowrap;
   }
-  .pill-count { color: #4f5d66; background: #edf0f2; }
-  .pill-active { color: #176239; background: #e4f4ea; }
+  .pill-count  { color: var(--color-ink-dim); background: rgba(94, 110, 156, 0.15); }
+  .pill-active { color: #4eca76; background: rgba(78, 202, 118, 0.13); }
 
   .blank-state {
     display: grid;
@@ -143,25 +183,27 @@
 
   .status-badge {
     display: inline-block;
-    min-width: 74px;
-    padding: 3px 7px;
+    min-width: 72px;
+    padding: 2px 7px;
+    border: 1px solid transparent;
     border-radius: 999px;
-    font-size: 11px;
-    font-weight: 800;
+    font-size: 10.5px;
+    font-weight: 700;
     text-align: center;
     text-transform: uppercase;
     white-space: nowrap;
+    letter-spacing: 0.02em;
   }
-  .status-badge.modified   { color: #7b4a05; background: #ffe8bb; }
+  .status-badge.modified   { color: #e0a040; background: rgba(224,160,64,0.13); border-color: rgba(224,160,64,0.22); }
   .status-badge.added,
-  .status-badge.untracked  { color: #176239; background: #dff3e7; }
-  .status-badge.deleted    { color: #9b2e29; background: #ffe1df; }
-  .status-badge.renamed    { color: #255b8b; background: #e0effd; }
-  .status-badge.conflicted { color: #8f2d61; background: #fde2f0; }
+  .status-badge.untracked  { color: #4eca76; background: rgba(78,202,118,0.11); border-color: rgba(78,202,118,0.22); }
+  .status-badge.deleted    { color: #e86060; background: rgba(232,96,96,0.11); border-color: rgba(232,96,96,0.22); }
+  .status-badge.renamed    { color: #7aacff; background: rgba(122,172,255,0.11); border-color: rgba(122,172,255,0.22); }
+  .status-badge.conflicted { color: #d060c0; background: rgba(208,96,192,0.11); border-color: rgba(208,96,192,0.22); }
   .status-badge.unknown,
-  .status-badge.none       { color: #596670; background: #e9edef; }
+  .status-badge.none       { color: var(--color-ink-dim); background: rgba(94,110,156,0.12); border-color: rgba(94,110,156,0.2); }
 
-  .quiet { overflow: hidden; color: #7d8891; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+  .quiet { overflow: hidden; color: var(--color-ink-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
 
   .spin { animation: spin 900ms linear infinite; }
 
@@ -202,9 +244,9 @@
     font-weight: 700;
     letter-spacing: 0.01em;
     color: var(--color-bar-text);
-    border-right: 1px solid rgba(255,255,255,0.07);
+    border-right: 1px solid rgba(255,255,255,0.06);
   }
-  .titlebar-brand svg { color: #5da8d4; flex-shrink: 0; }
+  .titlebar-brand svg { color: #5a8cf8; flex-shrink: 0; }
 
   .titlebar-info {
     display: flex;
@@ -215,19 +257,19 @@
     height: 100%;
     overflow: hidden;
   }
-  .titlebar-info svg { color: #5da8d4; flex-shrink: 0; }
+  .titlebar-info svg { color: #5a8cf8; flex-shrink: 0; }
 
-  .tb-repo { color: #7e9aaa; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
-  .tb-sep  { color: #3d4f5c; font-size: 13px; }
-  .tb-branch { color: #dce6eb; font-size: 12px; font-weight: 700; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
+  .tb-repo   { color: #506070; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
+  .tb-sep    { color: #2a3440; font-size: 13px; }
+  .tb-branch { color: #c0cce0; font-size: 12px; font-weight: 700; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
 
   .tb-sync { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
-  .tb-sync.ahead  { color: #f0b861; background: rgba(240,184,97,0.12); }
-  .tb-sync.behind { color: #79b8e8; background: rgba(121,184,232,0.12); }
+  .tb-sync.ahead  { color: #e0a040; background: rgba(224,160,64,0.13); }
+  .tb-sync.behind { color: #7aacff; background: rgba(122,172,255,0.13); }
 
-  .tb-no-repo { color: #4a5a66; font-size: 12px; font-style: italic; }
+  .tb-no-repo { color: #3a4a5a; font-size: 12px; font-style: italic; }
 
-  .titlebar-right { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.07); }
+  .titlebar-right  { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.06); }
   .titlebar-actions { display: flex; align-items: stretch; }
 
   .tb-action {
@@ -246,13 +288,13 @@
     transition: background 120ms ease, color 120ms ease;
     -webkit-app-region: no-drag;
   }
-  .tb-action:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: transparent; color: #dce6eb; }
-  .tb-action:disabled { opacity: 0.35; cursor: not-allowed; }
-  .tb-action.auto-toggle.active { color: #5cba87; }
-  .tb-action.auto-toggle.active:hover:not(:disabled) { color: #7ad4a2; background: rgba(92,186,135,0.1); }
+  .tb-action:hover:not(:disabled) { background: rgba(255,255,255,0.07); border-color: transparent; color: #c0cce0; }
+  .tb-action:disabled { opacity: 0.3; cursor: not-allowed; }
+  .tb-action.auto-toggle.active { color: #4eca76; }
+  .tb-action.auto-toggle.active:hover:not(:disabled) { color: #6ee090; background: rgba(78,202,118,0.1); }
   .tb-action-label { font-size: 12px; font-weight: 600; }
 
-  .titlebar-divider { width: 1px; margin: 8px 0; background: rgba(255,255,255,0.1); flex-shrink: 0; }
+  .titlebar-divider { width: 1px; margin: 8px 0; background: rgba(255,255,255,0.08); flex-shrink: 0; }
 
   .titlebar-controls { display: flex; align-items: stretch; height: 100%; }
 
@@ -267,12 +309,12 @@
     border: none;
     border-radius: 0;
     background: transparent;
-    color: #7a8e9a;
+    color: #3a4a5c;
     cursor: pointer;
     transition: background 120ms ease, color 120ms ease;
     -webkit-app-region: no-drag;
   }
-  .tb-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: transparent; color: #ffffff; }
+  .tb-btn:hover:not(:disabled) { background: rgba(255,255,255,0.09); border-color: transparent; color: #c0cce0; }
   .tb-btn.close:hover:not(:disabled) { background: #c0392b; color: #ffffff; }
 
   /* --- Top bar (repo form) --- */
@@ -285,7 +327,7 @@
     align-items: center;
     gap: 9px;
   }
-  .repo-form label { color: #54606a; font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
+  .repo-form label { color: var(--color-ink-faint); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
 
   /* --- Notices --- */
 
@@ -300,31 +342,41 @@
     font-size: 13px;
     flex-shrink: 0;
   }
-  .notice.error    { border-color: #e8aaa4; color: #8e2d27; background: #fff4f2; }
-  .notice.busy     { border-color: #a7cfe2; color: #245d78; background: #edf8fd; }
-  .notice.conflict { border-color: #e3b778; color: #8a4c0e; background: #fff6e7; }
+  .notice.error    { border-color: rgba(232,96,90,0.3); color: #f09090; background: rgba(232,96,90,0.08); }
+  .notice.busy     { border-color: rgba(90,140,248,0.28); color: #8ab0f8; background: rgba(90,140,248,0.07); }
+  .notice.conflict { border-color: rgba(224,160,64,0.3); color: #e8b060; background: rgba(224,160,64,0.07); }
   .notice.conflict button {
     margin-left: auto;
-    min-height: 30px;
-    padding: 0 12px;
-    border-color: #e3b778;
-    color: #8a4c0e;
-    background: #ffffff;
-    font-size: 13px;
+    min-height: 26px;
+    padding: 0 10px;
+    border-color: rgba(224,160,64,0.3);
+    color: #e8b060;
+    background: rgba(224,160,64,0.1);
+    font-size: 12px;
     font-weight: 700;
   }
+  .notice.conflict button:hover:not(:disabled) {
+    background: rgba(224,160,64,0.18);
+    border-color: rgba(224,160,64,0.45);
+    color: #f0c070;
+  }
 
   /* --- Workspace layout --- */
 
   .workspace {
     display: grid;
-    grid-template-columns: clamp(220px, 20vw, 300px) minmax(0, 1fr) clamp(280px, 28vw, 420px);
+    grid-template-columns: clamp(220px, 18vw, 280px) minmax(0, 1fr) clamp(400px, 40vw, 620px);
     flex: 1 1 0;
     min-height: 0;
     gap: 8px;
   }
 
-  .history-aside { display: grid; min-height: 0; }
+  .history-aside {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    min-height: 0;
+    gap: 8px;
+  }
 
   .left-sidebar {
     display: grid;
@@ -337,10 +389,10 @@
 
   .main-panel {
     display: grid;
-    grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
+    grid-template-rows: auto minmax(0, 1fr) auto;
     min-height: 0;
     border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border-radius: 10px;
     background: var(--color-surface);
     overflow: hidden;
   }
@@ -355,6 +407,7 @@
     border-bottom: 1px solid var(--color-border-subtle);
     overflow: hidden;
     flex-shrink: 0;
+    background: var(--color-surface-dim);
   }
 
   .repo-meta {
@@ -364,7 +417,7 @@
     min-width: 0;
     overflow: hidden;
   }
-  .repo-meta svg { color: var(--color-accent); flex-shrink: 0; }
+  .repo-meta svg { color: var(--color-primary); flex-shrink: 0; }
   .repo-branch {
     font-size: 13px;
     font-weight: 700;
@@ -373,9 +426,10 @@
     text-overflow: ellipsis;
     flex-shrink: 0;
     max-width: 220px;
+    color: var(--color-ink);
   }
   .repo-path {
-    color: var(--color-ink-dim);
+    color: var(--color-ink-faint);
     font-size: 11.5px;
     font-family: var(--font-mono);
     white-space: nowrap;
@@ -391,32 +445,25 @@
     font-weight: 700;
     white-space: nowrap;
   }
-  .sync-stats strong:first-of-type { color: #8a4c0e; background: #fff2d7; }
-  .sync-stats strong:last-of-type  { color: #255b8b; background: #e7f1fb; }
-  .sync-stats span { color: #4f5d66; background: #edf0f2; }
+  .sync-stats strong:first-of-type { color: #e0a040; background: rgba(224,160,64,0.13); }
+  .sync-stats strong:last-of-type  { color: #7aacff; background: rgba(122,172,255,0.13); }
+  .sync-stats span { color: var(--color-ink-dim); background: rgba(94,110,156,0.13); }
 
   .top-section {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 340px;
+    grid-template-columns: minmax(0, 1fr) 320px;
     min-height: 0;
     gap: 8px;
     padding: 8px;
     overflow: hidden;
   }
 
-  .file-history-section {
-    min-height: 0;
-    padding: 0 8px 8px;
-    overflow: hidden;
-    display: grid;
-  }
-
   /* --- File list / change lanes --- */
 
-  .file-list { padding: 8px; overflow: auto; }
+  .file-list { padding: 6px; overflow: auto; }
 
-  .file-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: #ffffff; }
-  .file-row + .file-row { margin-top: 8px; }
+  .file-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: var(--color-surface-raised); }
+  .file-row + .file-row { margin-top: 6px; }
 
   .file-title strong {
     display: block;
@@ -424,10 +471,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: var(--font-mono);
-    font-size: 13px;
+    font-size: 12.5px;
+    color: var(--color-ink);
   }
 
-  .change-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .change-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
 
   .change-lane {
     display: grid;
@@ -435,19 +483,19 @@
     gap: 6px;
     padding: 8px;
     border: 1px solid var(--color-border-subtle);
-    border-radius: 6px;
-    background: var(--color-surface-dim);
+    border-radius: 8px;
+    background: rgba(255,255,255,0.02);
   }
-  .change-lane.inactive { color: #8a949c; background: #fafafa; }
+  .change-lane.inactive { opacity: 0.5; }
   .lane-header { display: flex; align-items: center; gap: 8px; }
-  .lane-name { color: var(--color-ink-quiet); font-size: 12px; font-weight: 800; flex-shrink: 0; }
-  .lane-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+  .lane-name { color: var(--color-ink-faint); font-size: 11px; font-weight: 800; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.05em; }
+  .lane-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
 
   .status-toolbar {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 6px 8px;
+    padding: 5px 8px;
     border-bottom: 1px solid var(--color-border-subtle);
     background: var(--color-surface-dim);
   }
@@ -459,22 +507,22 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    margin: 2px 2px 6px;
-    color: var(--color-ink-muted);
-    font-size: 11px;
+    margin: 2px 2px 5px;
+    color: var(--color-ink-faint);
+    font-size: 10px;
     font-weight: 800;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.07em;
     text-transform: uppercase;
   }
   .branch-group-count {
     display: inline-flex;
     align-items: center;
-    min-height: 18px;
-    padding: 0 7px;
+    min-height: 16px;
+    padding: 0 6px;
     border-radius: 999px;
-    color: #4f5d66;
-    background: #edf0f2;
-    font-size: 11px;
+    color: var(--color-ink-dim);
+    background: rgba(94,110,156,0.14);
+    font-size: 10px;
   }
 
   .branch-row {
@@ -482,20 +530,26 @@
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     gap: 8px;
-    min-height: 48px;
-    padding: 8px;
+    min-height: 46px;
+    padding: 7px 8px;
     border: 1px solid transparent;
     border-radius: 8px;
+    transition: background 120ms, border-color 120ms;
+  }
+  .branch-row + .branch-row { margin-top: 3px; }
+  .branch-row:hover { background: var(--color-surface-hover); border-color: var(--color-border-subtle); }
+  .branch-row.current {
+    border-color: var(--color-border);
+    border-left: 2px solid var(--color-primary);
+    background: rgba(90,140,248,0.07);
   }
-  .branch-row + .branch-row { margin-top: 4px; }
-  .branch-row.current { border-color: #b9ddc6; background: #f0f8f3; }
 
   .branch-info { display: flex; align-items: center; min-width: 0; gap: 8px; }
   .branch-info div { min-width: 0; }
-  .branch-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
-  .branch-info span { display: block; margin-top: 2px; color: var(--color-ink-muted); font-size: 12px; }
+  .branch-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-ink); }
+  .branch-info span { display: block; margin-top: 2px; color: var(--color-ink-dim); font-size: 11px; }
 
-  .branch-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
+  .branch-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
 
   /* --- Explorer --- */
 
@@ -503,62 +557,63 @@
     display: grid;
     grid-template-columns: auto auto minmax(0, 1fr) auto;
     align-items: center;
-    gap: 7px;
+    gap: 6px;
     width: 100%;
-    min-height: 34px;
-    padding: 5px 8px 5px calc(8px + var(--depth, 0) * 14px);
-    border: 1px solid var(--color-border-input);
+    min-height: 32px;
+    padding: 4px 8px 4px calc(8px + var(--depth, 0) * 14px);
+    border: 1px solid transparent;
     border-radius: 6px;
-    background: #ffffff;
+    background: transparent;
     text-align: left;
-    transition: background 140ms ease, border-color 140ms ease;
+    transition: background 120ms ease, border-color 120ms ease;
   }
-  .explorer-row + .explorer-row { margin-top: 4px; }
-  .explorer-row:hover { border-color: #8fa0ad; background: var(--color-surface-hover); }
-  .explorer-row.active { border-color: #9fc8dc; background: #edf8fd; }
-  .explorer-row.folder { font-weight: 800; }
+  .explorer-row + .explorer-row { margin-top: 2px; }
+  .explorer-row:hover { background: var(--color-surface-hover); border-color: var(--color-border-subtle); }
+  .explorer-row.active { background: rgba(90,140,248,0.1); border-color: rgba(90,140,248,0.28); }
+  .explorer-row.folder { font-weight: 700; }
   .explorer-row svg { color: var(--color-accent); }
 
-  .tree-toggle, .explorer-select { min-height: 22px; padding: 0; border: 0; background: transparent; }
+  .tree-toggle, .explorer-select { min-height: 20px; padding: 0; border: 0; background: transparent; color: var(--color-ink-muted); }
   .tree-toggle { width: 14px; }
-  .tree-toggle:hover:not(:disabled), .explorer-select:hover:not(:disabled) { background: transparent; }
-  .explorer-select { justify-content: flex-start; min-width: 0; }
+  .tree-toggle:hover:not(:disabled), .explorer-select:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--color-ink); }
   .tree-spacer { width: 14px; }
-  .explorer-select span { overflow: hidden; font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
+  .explorer-select { justify-content: flex-start; min-width: 0; }
+  .explorer-select span { overflow: hidden; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
 
   /* --- Commit form --- */
 
-  .commit-form { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 10px; padding: 12px; }
+  .commit-form { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 8px; padding: 10px; }
   .commit-form textarea { flex: 1 1 0; min-height: 80px; resize: none; }
 
   /* --- Commit history --- */
 
-  .history-list { padding: 8px; overflow: auto; }
+  .history-list { padding: 6px; overflow: auto; }
 
-  .commit-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: #ffffff; }
-  .commit-row + .commit-row { margin-top: 8px; }
-  .commit-row.compact { padding: 9px; }
+  .commit-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: var(--color-surface-raised); transition: border-color 120ms; }
+  .commit-row + .commit-row { margin-top: 5px; }
+  .commit-row:hover { border-color: var(--color-border); }
+  .commit-row.compact { padding: 8px; }
 
   .commit-line { display: flex; align-items: flex-start; min-width: 0; gap: 8px; }
   .commit-line svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-accent); }
   .commit-line div { min-width: 0; }
   .commit-line strong { display: block; overflow: hidden; color: var(--color-ink); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
-  .commit-line span { display: block; overflow: hidden; margin-top: 3px; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+  .commit-line span { display: block; overflow: hidden; margin-top: 3px; color: var(--color-ink-dim); font-family: var(--font-mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
 
-  .ref-list { display: flex; flex-wrap: wrap; gap: 5px; }
-  .ref-list span { max-width: 100%; overflow: hidden; padding: 3px 7px; border-radius: 999px; color: #255b8b; background: #e7f1fb; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
+  .ref-list { display: flex; flex-wrap: wrap; gap: 4px; }
+  .ref-list span { max-width: 100%; overflow: hidden; padding: 2px 7px; border-radius: 999px; color: var(--color-accent); background: rgba(106,154,255,0.13); border: 1px solid rgba(106,154,255,0.22); font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
 
-  .commit-files { display: grid; gap: 6px; }
-  .commit-files-toggle { justify-content: flex-start; gap: 5px; min-height: 26px; padding: 0 8px; border-color: transparent; background: transparent; color: #4f5d66; font-size: 12px; font-weight: 700; }
-  .commit-files-toggle:hover:not(:disabled) { border-color: var(--color-border-input); background: var(--color-surface-hover); }
+  .commit-files { display: grid; gap: 5px; }
+  .commit-files-toggle { justify-content: flex-start; gap: 5px; min-height: 24px; padding: 0 7px; border-color: transparent; background: transparent; color: var(--color-ink-dim); font-size: 11.5px; font-weight: 700; }
+  .commit-files-toggle:hover:not(:disabled) { border-color: var(--color-border-subtle); background: var(--color-surface-hover); color: var(--color-ink); }
 
-  .commit-file-list { display: grid; gap: 5px; }
-  .commit-file-button { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; width: 100%; min-height: 30px; padding: 5px 7px; text-align: left; }
-  .commit-file-button strong { overflow: hidden; color: var(--color-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
+  .commit-file-list { display: grid; gap: 4px; }
+  .commit-file-button { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; width: 100%; min-height: 28px; padding: 4px 7px; text-align: left; border-color: var(--color-border-subtle); background: rgba(255,255,255,0.025); }
+  .commit-file-button strong { overflow: hidden; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
 
   .commit-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  .commit-actions time { overflow: hidden; color: var(--color-ink-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
-  .commit-action-buttons { display: flex; align-items: center; gap: 6px; }
+  .commit-actions time { overflow: hidden; color: var(--color-ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+  .commit-action-buttons { display: flex; align-items: center; gap: 5px; }
 
   /* --- Git graph --- */
 
@@ -567,50 +622,62 @@
   .graph-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: none; }
   .graph-row + .graph-row { margin-top: 0; }
 
-  .graph-gutter { position: relative; align-self: stretch; background: #fdfdfe; }
+  .graph-gutter { position: relative; align-self: stretch; background: var(--color-surface); }
   .graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
   .graph-dot {
     position: absolute;
     top: 50%;
-    width: 11px;
-    height: 11px;
+    width: 10px;
+    height: 10px;
     border-radius: 999px;
-    background: var(--dot-color, #2f6fb0);
-    border: 2px solid #ffffff;
-    box-shadow: 0 0 0 1px var(--dot-color, #2f6fb0);
+    background: var(--dot-color, #5a8cf8);
+    border: 2px solid var(--color-surface);
+    box-shadow: 0 0 0 1px var(--dot-color, #5a8cf8);
     transform: translate(-50%, -50%);
   }
-  .graph-dot.merge { width: 13px; height: 13px; background: #ffffff; border-color: var(--dot-color, #2f6fb0); }
+  .graph-dot.merge { width: 12px; height: 12px; background: var(--color-surface); border-color: var(--dot-color, #5a8cf8); }
 
-  .commit-body { display: grid; gap: 8px; min-width: 0; padding: 11px 12px; }
-  .graph-row + .graph-row .commit-body { border-top: 1px solid #e7ebee; }
-  .graph-row:hover .commit-body { background: #f6f9fb; }
+  .commit-body { display: grid; gap: 7px; min-width: 0; padding: 10px 12px; }
+  .graph-row + .graph-row .commit-body { border-top: 1px solid var(--color-border-subtle); }
+  .graph-row:hover .commit-body { background: var(--color-surface-hover); }
 
   /* --- Compare panel --- */
 
   .compare-panel {
     display: grid;
     grid-template-rows: auto auto;
-    margin: 0 10px 10px;
+    margin: 0 8px 8px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 8px;
+    background: var(--color-surface-dim);
+    overflow: hidden;
   }
 
   .compare-form {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
     align-items: end;
-    gap: 10px;
-    padding: 12px;
+    gap: 8px;
+    padding: 10px 12px;
     border-bottom: 1px solid var(--color-border-subtle);
   }
-  .compare-field { display: grid; gap: 5px; min-width: 0; }
-  .compare-field span { color: var(--color-ink-quiet); font-size: 12px; font-weight: 800; }
-  .compare-field select { width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid #c4ccd3; border-radius: 6px; background: #ffffff; color: var(--color-ink); font-size: 13px; }
-  .compare-arrow { margin-bottom: 8px; color: var(--color-accent); }
+  .compare-field { display: grid; gap: 4px; min-width: 0; }
+  .compare-field span { color: var(--color-ink-faint); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
+  .compare-arrow { margin-bottom: 6px; color: var(--color-ink-faint); }
 
-  .compare-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px; }
-  .compare-range { display: flex; align-items: center; gap: 8px; color: var(--color-accent); }
-  .compare-range .hash, .dialog-range .hash { padding: 3px 8px; border-radius: 999px; background: #e7f1fb; color: #255b8b; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
-  .compare-count { color: var(--color-ink-quiet); font-size: 13px; font-weight: 700; }
+  .compare-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
+  .compare-range { display: flex; align-items: center; gap: 7px; color: var(--color-ink-muted); }
+  .compare-range .hash, .dialog-range .hash {
+    padding: 2px 7px;
+    border-radius: 6px;
+    background: rgba(90,140,248,0.13);
+    color: var(--color-accent);
+    border: 1px solid rgba(90,140,248,0.22);
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    font-weight: 700;
+  }
+  .compare-count { color: var(--color-ink-dim); font-size: 12px; font-weight: 700; }
 
   /* --- Dialogs --- */
 
@@ -621,7 +688,8 @@
     display: grid;
     place-items: center;
     padding: 24px;
-    background: rgba(20, 26, 31, 0.45);
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(2px);
   }
 
   .dialog {
@@ -629,48 +697,145 @@
     grid-template-rows: auto minmax(0, 1fr);
     width: min(1100px, 100%);
     height: min(760px, 100%);
-    border: 1px solid #c4ccd3;
+    border: 1px solid var(--color-border);
     border-radius: 12px;
     background: var(--color-surface);
-    box-shadow: 0 18px 48px rgba(20, 26, 31, 0.32);
+    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0,0,0,0.4);
     overflow: hidden;
   }
 
-  .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border-subtle); }
+  .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-dim); }
 
-  .dialog-range { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--color-accent); font-size: 16px; }
-  .dialog-title { margin: 2px 0 0; color: var(--color-ink); font-size: 16px; }
+  .dialog-range { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--color-accent); font-size: 15px; }
+  .dialog-title { margin: 2px 0 0; color: var(--color-ink); font-size: 15px; font-weight: 600; }
 
-  .dialog-close { min-height: 34px; min-width: 34px; padding: 0; justify-content: center; }
+  .dialog-close { min-height: 32px; min-width: 32px; padding: 0; justify-content: center; }
 
-  .dialog-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; }
+  .dialog-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
 
-  .dialog-files { display: grid; align-content: start; gap: 5px; padding: 10px; overflow: auto; border-right: 1px solid var(--color-border-subtle); background: #f4f6f8; }
+  .dialog-files { display: grid; align-content: start; gap: 4px; padding: 8px; overflow: auto; border-right: 1px solid var(--color-border-subtle); background: var(--color-surface-dim); }
 
   .dialog-file-row {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    gap: 8px;
-    padding: 7px 8px;
-    border: 1px solid var(--color-border-subtle);
+    gap: 7px;
+    min-height: 30px;
+    padding: 5px 8px;
+    border: 1px solid transparent;
     border-radius: 6px;
-    background: #ffffff;
+    background: transparent;
     text-align: left;
+    transition: background 120ms, border-color 120ms;
   }
-  .dialog-file-row.active   { border-color: #9cc2e6; background: #e7f1fb; }
-  .dialog-file-row.prepared { border-color: #b9ddc6; background: #f0f8f3; }
-  .dialog-file-row.prepared.active { border-color: #4aa777; background: #e4f4ea; }
-  .dialog-file-row strong { overflow: hidden; color: var(--color-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
-  .dialog-file-row svg { color: #1f7a4d; }
+  .dialog-file-row:hover { background: var(--color-surface-hover); border-color: var(--color-border-subtle); }
+  .dialog-file-row.active   { background: rgba(90,140,248,0.1); border-color: rgba(90,140,248,0.28); }
+  .dialog-file-row.prepared { background: rgba(78,202,118,0.08); border-color: rgba(78,202,118,0.22); }
+  .dialog-file-row.prepared.active { background: rgba(78,202,118,0.13); border-color: rgba(78,202,118,0.32); }
+  .dialog-file-row strong { overflow: hidden; color: var(--color-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+  .dialog-file-row svg { color: #4eca76; }
 
-  .dialog-diff { display: grid; min-height: 0; padding: 10px; }
-  .dialog-diff .diff-view { max-height: none; }
+  .dialog-diff { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
 
-  .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-border-subtle); background: #f4f6f8; }
-  .dialog-footer-info { color: #4f5d66; font-size: 13px; font-weight: 700; }
+  .diff-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: var(--color-surface-dim);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--color-ink-muted);
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  .diff-header svg { flex-shrink: 0; color: var(--color-ink-faint); }
+  .diff-header span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-  .prepared-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: #1f7a4d; font-size: 12px; font-weight: 700; }
+  .split-diff {
+    display: grid;
+    grid-template-columns: 3.2rem minmax(0, 1fr) 1px 3.2rem minmax(0, 1fr);
+    align-content: start;
+    flex: 1 1 0;
+    overflow: auto;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.5;
+    tab-size: 2;
+    background: var(--color-surface-raised);
+  }
+
+  .split-span {
+    grid-column: 1 / -1;
+    padding: 2px 10px;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+  .split-span.split-meta { color: var(--color-ink-faint); background: rgba(0,0,0,0.18); font-size: 11px; }
+  .split-span.split-hunk { color: #7aacff; background: rgba(122,172,255,0.08); padding: 3px 10px; }
+
+  .split-num {
+    padding: 0 6px 0 4px;
+    text-align: right;
+    color: var(--color-ink-faint);
+    font-size: 11px;
+    user-select: none;
+    border-right: 1px solid var(--color-border-subtle);
+    background: rgba(0,0,0,0.14);
+  }
+  .split-num.del   { background: rgba(232,96,96,0.12); color: rgba(232,96,96,0.6); border-right-color: rgba(232,96,96,0.2); }
+  .split-num.add   { background: rgba(78,202,118,0.1); color: rgba(78,202,118,0.6); border-right-color: rgba(78,202,118,0.2); }
+  .split-num.empty { background: rgba(0,0,0,0.08); }
+
+  .split-cell {
+    padding: 0 8px;
+    white-space: pre;
+    color: var(--color-ink-muted);
+    overflow: hidden;
+  }
+  .split-cell.del   { background: rgba(232,96,96,0.1); color: #ef8080; }
+  .split-cell.add   { background: rgba(78,202,118,0.09); color: #5dd88a; }
+  .split-cell.empty { background: rgba(0,0,0,0.06); }
+
+  .split-divider { background: var(--color-border-subtle); }
+
+  .split-col-headers {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--color-border-subtle);
+  }
+  .split-col-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 10px 5px calc(3.2rem + 10px);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-ink-faint);
+    background: rgba(0,0,0,0.1);
+  }
+  .split-col-label + .split-col-label { border-left: 1px solid var(--color-border-subtle); }
+  .split-col-hash {
+    padding: 1px 6px;
+    border-radius: 5px;
+    background: rgba(90,140,248,0.12);
+    color: var(--color-accent);
+    border: 1px solid rgba(90,140,248,0.2);
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: none;
+    letter-spacing: 0;
+  }
+
+  .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--color-border-subtle); background: var(--color-surface-dim); }
+  .dialog-footer-info { color: var(--color-ink-dim); font-size: 13px; font-weight: 700; }
+
+  .prepared-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: #4eca76; font-size: 12px; font-weight: 700; }
 
   /* --- Credential dialog --- */
 
@@ -679,19 +844,20 @@
     flex-direction: column;
     width: min(420px, 100%);
     max-height: calc(100vh - 48px);
+    border: 1px solid var(--color-border);
     border-radius: 14px;
     background: var(--color-surface);
-    box-shadow: 0 24px 64px rgba(20, 26, 31, 0.38), 0 2px 8px rgba(20, 26, 31, 0.12);
+    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.65), 0 2px 12px rgba(0,0,0,0.35);
     overflow: hidden;
   }
 
-  /* Dark hero header */
   .cred-hero {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 20px 20px 20px 22px;
     background: var(--color-bar);
+    border-bottom: 1px solid rgba(255,255,255,0.05);
   }
 
   .cred-hero-icon {
@@ -702,9 +868,9 @@
     height: 48px;
     flex-shrink: 0;
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.1);
-    color: #ffffff;
-    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
+    background: rgba(90,140,248,0.2);
+    color: var(--color-primary);
+    border: 1px solid rgba(90,140,248,0.3);
   }
 
   .cred-hero-text { flex: 1; min-width: 0; }
@@ -732,7 +898,7 @@
     height: 30px;
     flex-shrink: 0;
     padding: 0;
-    border: 1px solid rgba(255,255,255,0.12);
+    border: 1px solid rgba(255,255,255,0.1);
     border-radius: 7px;
     background: transparent;
     color: var(--color-bar-muted);
@@ -745,7 +911,6 @@
     color: #ffffff;
   }
 
-  /* Form body */
   .cred-body {
     display: flex;
     flex-direction: column;
@@ -754,12 +919,11 @@
     overflow: auto;
   }
 
-  /* Segmented mode toggle */
   .cred-segment {
     display: flex;
     gap: 0;
     padding: 3px;
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid var(--color-border);
     border-radius: 9px;
     background: var(--color-surface-dim);
   }
@@ -770,26 +934,25 @@
     align-items: center;
     justify-content: center;
     gap: 6px;
-    min-height: 34px;
+    min-height: 32px;
     padding: 0 12px;
     border: 1px solid transparent;
     border-radius: 7px;
     background: transparent;
-    color: var(--color-ink-muted);
+    color: var(--color-ink-dim);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
-    transition: background 0.14s, color 0.14s, box-shadow 0.14s, border-color 0.14s;
+    transition: background 0.14s, color 0.14s, border-color 0.14s;
   }
-  .cred-seg-btn:hover:not(.active) { color: var(--color-ink-quiet); }
+  .cred-seg-btn:hover:not(.active) { color: var(--color-ink-muted); }
   .cred-seg-btn.active {
-    background: #ffffff;
-    border-color: var(--color-border);
+    background: var(--color-surface-raised);
+    border-color: var(--color-border-input);
     color: var(--color-ink);
-    box-shadow: 0 1px 4px rgba(20, 26, 31, 0.12);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   }
 
-  /* Fields */
   .cred-fields { display: flex; flex-direction: column; gap: 12px; }
 
   .cred-field { display: flex; flex-direction: column; gap: 5px; }
@@ -797,7 +960,7 @@
   .cred-field-label {
     font-size: 12px;
     font-weight: 700;
-    color: var(--color-ink-quiet);
+    color: var(--color-ink-muted);
     letter-spacing: 0.03em;
   }
 
@@ -809,7 +972,7 @@
   .cred-input :global(.cred-field-icon) {
     position: absolute;
     left: 11px;
-    color: var(--color-ink-muted);
+    color: var(--color-ink-faint);
     pointer-events: none;
   }
   .cred-input input {
@@ -819,10 +982,6 @@
     border-radius: 8px;
     font-size: 14px;
   }
-  .cred-input input:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(37, 111, 143, 0.14);
-  }
 
   .cred-reveal {
     position: absolute;
@@ -836,22 +995,21 @@
     border: none;
     border-radius: 5px;
     background: transparent;
-    color: var(--color-ink-muted);
+    color: var(--color-ink-faint);
     cursor: pointer;
     transition: background 0.12s, color 0.12s;
   }
   .cred-reveal:hover { background: var(--color-surface-hover); color: var(--color-ink); }
 
-  /* Token hint */
   .cred-token-hint {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 8px;
-    border: 1px solid #c9e0ea;
-    background: #edf5f9;
-    color: #1d5570;
+    border: 1px solid rgba(90,140,248,0.25);
+    background: rgba(90,140,248,0.08);
+    color: var(--color-ink-muted);
     font-size: 12px;
     line-height: 1.55;
   }
@@ -859,29 +1017,27 @@
   .cred-token-hint code {
     padding: 1px 5px;
     border-radius: 4px;
-    background: rgba(37,111,143,0.12);
+    background: rgba(90,140,248,0.15);
     font-family: var(--font-mono);
     font-size: 11px;
     font-weight: 700;
-    color: var(--color-primary-dark);
+    color: var(--color-accent);
   }
 
-  /* Error */
   .cred-error {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     padding: 10px 12px;
-    border: 1px solid #fca5a5;
+    border: 1px solid rgba(232,96,90,0.3);
     border-radius: 8px;
-    background: #fff5f5;
-    color: #991b1b;
+    background: rgba(232,96,90,0.08);
+    color: #f09090;
     font-size: 13px;
     line-height: 1.5;
   }
   .cred-error svg { flex-shrink: 0; margin-top: 1px; }
 
-  /* Footer row */
   .cred-footer {
     display: flex;
     align-items: center;
@@ -899,7 +1055,7 @@
     user-select: none;
   }
   .cred-save input[type="checkbox"] { width: auto; height: auto; cursor: pointer; }
-  .cred-save span { font-size: 12.5px; color: var(--color-ink-quiet); }
+  .cred-save span { font-size: 12.5px; color: var(--color-ink-dim); }
 
   .cred-btns { display: flex; gap: 8px; }
 
@@ -908,8 +1064,8 @@
     padding: 0 14px;
     border: 1px solid var(--color-border);
     border-radius: 7px;
-    background: var(--color-surface);
-    color: var(--color-ink-quiet);
+    background: var(--color-surface-raised);
+    color: var(--color-ink-muted);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
@@ -938,9 +1094,9 @@
   }
   .cred-submit:hover:not(:disabled) {
     background: var(--color-primary-dark);
-    border-color: #194d63;
+    border-color: #3a68e0;
   }
-  .cred-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+  .cred-submit:disabled { opacity: 0.45; cursor: not-allowed; }
 
   /* --- Diff viewer --- */
 
@@ -952,7 +1108,7 @@
     overflow: auto;
     border: 1px solid var(--color-border-subtle);
     border-radius: 6px;
-    background: #ffffff;
+    background: var(--color-surface-raised);
     font-family: var(--font-mono);
     font-size: 12px;
     line-height: 1.5;
@@ -960,33 +1116,33 @@
   }
   .diff-line { display: block; white-space: pre-wrap; word-break: break-word; }
   .diff-line.meta    { color: var(--color-ink-faint); }
-  .diff-line.hunk    { color: #255b8b; background: #eef4fb; }
-  .diff-line.add     { color: #176239; background: #e6f5ec; }
-  .diff-line.del     { color: #9b2e29; background: #fdeceb; }
-  .diff-line.context { color: #3a444c; }
+  .diff-line.hunk    { color: #7aacff; background: rgba(122,172,255,0.07); }
+  .diff-line.add     { color: #4eca76; background: rgba(78,202,118,0.09); }
+  .diff-line.del     { color: #e86060; background: rgba(232,96,96,0.09); }
+  .diff-line.context { color: var(--color-ink-muted); }
 
   .diff-counts { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
-  .diff-counts .adds { color: #176239; }
-  .diff-counts .dels { color: #9b2e29; }
+  .diff-counts .adds { color: #4eca76; }
+  .diff-counts .dels { color: #e86060; }
 
   /* --- Conflict resolver --- */
 
   .resolve-editor { display: flex; flex-direction: column; min-height: 0; padding: 10px; gap: 8px; }
 
   .resolve-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
-  .resolve-toolbar button { min-height: 32px; padding: 0 10px; font-size: 13px; }
-  .resolve-toolbar-label { color: var(--color-ink-quiet); font-size: 12px; font-weight: 800; }
+  .resolve-toolbar button { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
+  .resolve-toolbar-label { color: var(--color-ink-dim); font-size: 12px; font-weight: 800; }
 
-  .resolve-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-weight: 700; color: #8a4c0e; }
+  .resolve-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-weight: 700; color: #e0a040; }
 
   .resolve-textarea {
     width: 100%;
     flex: 1 1 auto;
     min-height: 120px;
     padding: 10px;
-    border: 1px solid #c4ccd3;
+    border: 1px solid var(--color-border-input);
     border-radius: 6px;
-    background: #ffffff;
+    background: var(--color-surface-raised);
     color: var(--color-ink);
     font-family: var(--font-mono);
     font-size: 12px;
@@ -1006,43 +1162,43 @@
     overflow: auto;
     border: 1px solid var(--color-border-subtle);
     border-radius: 6px;
-    background: #ffffff;
+    background: var(--color-surface-raised);
   }
 
-  .resolve-context { margin: 0; padding: 2px 8px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; color: #3a444c; }
+  .resolve-context { margin: 0; padding: 2px 8px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; color: var(--color-ink-muted); }
 
-  .resolve-conflict { display: grid; gap: 6px; padding: 8px; border: 1px solid #e3b778; border-radius: 6px; background: #fffaf1; }
-  .resolve-conflict.unresolved { border-color: #d98b8b; background: #fff5f3; }
+  .resolve-conflict { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(224,160,64,0.25); border-radius: 6px; background: rgba(224,160,64,0.06); }
+  .resolve-conflict.unresolved { border-color: rgba(232,96,96,0.3); background: rgba(232,96,96,0.06); }
   .resolve-conflict-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
-  .resolve-conflict-label { color: #8a4c0e; font-size: 12px; font-weight: 800; }
+  .resolve-conflict-label { color: #e0a040; font-size: 12px; font-weight: 800; }
 
   .resolve-choice-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
-  .resolve-choice-buttons button { min-height: 26px; padding: 0 8px; font-size: 12px; }
-  .resolve-choice-buttons button.active { border-color: #2f6fb0; color: #ffffff; background: #2f6fb0; }
+  .resolve-choice-buttons button { min-height: 24px; padding: 0 8px; font-size: 11.5px; }
+  .resolve-choice-buttons button.active { border-color: var(--color-primary); color: #ffffff; background: var(--color-primary); }
 
   .resolve-side { display: grid; gap: 3px; padding: 6px; border: 1px solid var(--color-border-subtle); border-radius: 6px; border-left-width: 3px; }
-  .resolve-side.ours   { border-left-color: #4aa777; background: #f1faf4; }
-  .resolve-side.theirs { border-left-color: #5a8bd0; background: #f1f5fc; }
-  .resolve-side.dimmed { opacity: 0.45; filter: grayscale(0.4); }
+  .resolve-side.ours   { border-left-color: #4eca76; background: rgba(78,202,118,0.06); }
+  .resolve-side.theirs { border-left-color: #5a8cf8; background: rgba(90,140,248,0.06); }
+  .resolve-side.dimmed { opacity: 0.4; filter: grayscale(0.5); }
 
   .resolve-side-label { font-size: 11px; font-weight: 800; text-transform: uppercase; }
-  .resolve-side.ours .resolve-side-label   { color: #1f7a4d; }
-  .resolve-side.theirs .resolve-side-label { color: #2f6fb0; }
+  .resolve-side.ours .resolve-side-label   { color: #4eca76; }
+  .resolve-side.theirs .resolve-side-label { color: #6a9aff; }
 
   .resolve-lines { margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; }
   .resolve-line { display: block; white-space: pre-wrap; word-break: break-word; }
-  .resolve-line.ours    { color: #176239; }
-  .resolve-line.theirs  { color: #255b8b; }
-  .resolve-line.context { color: #3a444c; }
+  .resolve-line.ours    { color: #4eca76; }
+  .resolve-line.theirs  { color: #7aacff; }
+  .resolve-line.context { color: var(--color-ink-muted); }
 
   .resolve-binary { display: grid; align-content: start; gap: 12px; padding: 4px; }
-  .resolve-binary-note { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e3b778; border-radius: 6px; color: #8a4c0e; background: #fff6e7; font-size: 13px; }
+  .resolve-binary-note { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(224,160,64,0.28); border-radius: 6px; color: #e0a040; background: rgba(224,160,64,0.07); font-size: 13px; }
   .resolve-binary-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 
-  .resolve-binary-card { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--color-border-subtle); border-left-width: 3px; border-radius: 8px; text-align: left; }
-  .resolve-binary-card.ours   { border-left-color: #4aa777; background: #f1faf4; }
-  .resolve-binary-card.theirs { border-left-color: #5a8bd0; background: #f1f5fc; }
-  .resolve-binary-card.active { box-shadow: 0 0 0 2px #2f6fb0 inset; border-color: #2f6fb0; }
+  .resolve-binary-card { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--color-border-subtle); border-left-width: 3px; border-radius: 8px; text-align: left; background: var(--color-surface-raised); }
+  .resolve-binary-card.ours   { border-left-color: #4eca76; }
+  .resolve-binary-card.theirs { border-left-color: #5a8cf8; }
+  .resolve-binary-card.active { box-shadow: 0 0 0 2px var(--color-primary) inset; border-color: var(--color-primary); }
   .resolve-binary-card strong { color: var(--color-ink); font-size: 18px; }
   .resolve-binary-hint { color: var(--color-ink-faint); font-size: 12px; }
 
@@ -1054,26 +1210,25 @@
 
 /* --- Responsive breakpoints --- */
 
-/* Large desktop */
 @media (min-width: 1800px) {
-  .workspace    { grid-template-columns: 340px minmax(0, 1fr) 480px; }
-  .top-section  { grid-template-columns: minmax(0, 1fr) 400px; }
+  .workspace    { grid-template-columns: 320px minmax(0, 1fr) 680px; }
+  .top-section  { grid-template-columns: minmax(0, 1fr) 380px; }
 }
 
-/* Medium-large: compress sidebars a bit */
 @media (max-width: 1400px) {
-  .workspace { grid-template-columns: clamp(200px, 18vw, 280px) minmax(0, 1fr) clamp(260px, 26vw, 380px); }
+  .workspace { grid-template-columns: clamp(200px, 17vw, 265px) minmax(0, 1fr) clamp(400px, 40vw, 580px); }
 }
 
-/* Medium: stack CommitPanel below StatusPanel */
+/* Stack CommitPanel below StatusPanel; history panels stay side by side */
 @media (max-width: 1100px) {
-  .workspace    { grid-template-columns: clamp(190px, 17vw, 240px) minmax(0, 1fr) clamp(230px, 22vw, 300px); }
-  .top-section  { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
+  .workspace    { grid-template-columns: clamp(185px, 16vw, 220px) minmax(0, 1fr) clamp(380px, 38vw, 500px); }
+  .top-section  { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 190px; }
 }
 
-/* Compact: very narrow sidebars, reduce chrome */
+/* Compact: stack history panels vertically, narrow sidebars */
 @media (max-width: 960px) {
-  .workspace      { grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 6px; }
+  .workspace      { grid-template-columns: 180px minmax(0, 1fr) 300px; gap: 6px; }
+  .history-aside  { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.3fr) minmax(0, 0.7fr); }
   .shell-body     { gap: 6px; }
   .left-sidebar   { gap: 6px; grid-template-rows: minmax(180px, 0.8fr) minmax(200px, 1.2fr); }
   .section-head   { min-height: 40px; padding: 6px 10px; }
@@ -1086,14 +1241,14 @@
   .tb-action-label { display: none; }
 }
 
-/* Narrow: single column, vertical scroll */
+/* Narrow: single column */
 @media (max-width: 740px) {
   body            { overflow: auto; }
   .shell-body     { min-height: 100%; gap: 6px; }
   .workspace      { grid-template-columns: 1fr; gap: 6px; }
+  .history-aside  { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 1fr) minmax(150px, 0.5fr); min-height: 380px; }
   .left-sidebar   { grid-template-rows: minmax(200px, 1fr) minmax(240px, 1.2fr); min-height: 440px; }
-  .history-aside  { min-height: 320px; }
-  .top-section    { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
+  .top-section    { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 190px; }
   .repo-form      { grid-template-columns: 1fr; }
   .repo-path      { display: none; }
   .repo-summary   { height: 40px; }
diff --git a/src/lib/components/CompareDialog.svelte b/src/lib/components/CompareDialog.svelte
index 421ef60..a4a1f83 100644
--- a/src/lib/components/CompareDialog.svelte
+++ b/src/lib/components/CompareDialog.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-  import { ArrowRight, X } from "@lucide/svelte";
+  import { ArrowRight, FileCode, X } from "@lucide/svelte";
   import type { GitCommitComparison, GitDiffFile, FileStatusKind } from "../types";
 
-  type DiffLineKind = "meta" | "hunk" | "add" | "del" | "context";
+  type SplitRow =
+    | { type: "span"; kind: "meta" | "hunk"; text: string }
+    | {
+        type: "pair";
+        leftNum?: number;  leftText?: string;  leftKind:  "del" | "context" | "empty";
+        rightNum?: number; rightText?: string; rightKind: "add" | "context" | "empty";
+      };
 
   interface Props {
     comparison: GitCommitComparison;
@@ -20,69 +26,115 @@
     onSelectFile = () => {},
   }: Props = $props();
 
-  function statusLabel(kind: FileStatusKind): string {
-    return kind;
-  }
-
   function displayDiffFile(file: GitDiffFile): string {
-    return file.old_path ? `${file.old_path} -> ${file.path}` : file.path;
-  }
-
-  function diffLineKind(line: string): DiffLineKind {
-    if (line.startsWith("diff ") || line.startsWith("index ") || line.startsWith("--- ") ||
-        line.startsWith("+++ ") || line.startsWith("new file") || line.startsWith("deleted file") ||
-        line.startsWith("rename ") || line.startsWith("similarity ")) return "meta";
-    if (line.startsWith("@@")) return "hunk";
-    if (line.startsWith("+")) return "add";
-    if (line.startsWith("-")) return "del";
-    return "context";
-  }
-
-  function diffLines(patch: string): { kind: DiffLineKind; text: string }[] {
-    return patch.replace(/\n$/, "").split("\n").map((text) => ({ kind: diffLineKind(text), text }));
-  }
-
-  function stripDiffPathPrefix(value: string): string {
-    const trimmed = value.trim();
-    if (trimmed === "/dev/null") return trimmed;
-    if (trimmed.startsWith("a/") || trimmed.startsWith("b/")) return trimmed.slice(2);
-    return trimmed;
-  }
-
-  function patchFilePath(segment: string): string {
-    let plusPath = "";
-    let minusPath = "";
-    for (const line of segment.split("\n")) {
-      if (line.startsWith("+++ ")) plusPath = stripDiffPathPrefix(line.slice(4));
-      else if (line.startsWith("--- ")) minusPath = stripDiffPathPrefix(line.slice(4));
-      else if (line.startsWith("@@")) break;
-    }
-    return (plusPath && plusPath !== "/dev/null") ? plusPath : minusPath;
+    return file.old_path ? `${file.old_path} → ${file.path}` : file.path;
   }
 
   function buildDiffByPath(patch: string): Map<string, string> {
     const map = new Map<string, string>();
     if (!patch.trim()) return map;
-    const segments: string[] = [];
     let current: string[] = [];
     for (const line of patch.split("\n")) {
       if (line.startsWith("diff --git ") && current.length > 0) {
-        segments.push(current.join("\n"));
+        const seg = current.join("\n");
+        const p = segmentPath(seg);
+        if (p) map.set(p, seg);
         current = [];
       }
       current.push(line);
     }
-    if (current.length > 0) segments.push(current.join("\n"));
-    for (const segment of segments) {
-      const path = patchFilePath(segment);
-      if (path) map.set(path, segment);
+    if (current.length > 0) {
+      const seg = current.join("\n");
+      const p = segmentPath(seg);
+      if (p) map.set(p, seg);
     }
     return map;
   }
 
-  let diffByPath = $derived(buildDiffByPath(comparison.patch));
-  let selectedDiffFile = $derived(comparison.files.find((f) => f.path === selectedDiffPath) ?? null);
-  let selectedDiffPatch = $derived(selectedDiffFile ? (diffByPath.get(selectedDiffFile.path) ?? "") : "");
+  function segmentPath(seg: string): string {
+    let plus = "";
+    let minus = "";
+    for (const line of seg.split("\n")) {
+      if (line.startsWith("+++ ")) {
+        const r = line.slice(4).trim();
+        plus = r.startsWith("b/") ? r.slice(2) : r;
+      } else if (line.startsWith("--- ")) {
+        const r = line.slice(4).trim();
+        minus = r.startsWith("a/") ? r.slice(2) : r;
+      } else if (line.startsWith("@@")) break;
+    }
+    return (plus && plus !== "/dev/null") ? plus : minus;
+  }
+
+  function buildSplitRows(patch: string): SplitRow[] {
+    if (!patch.trim()) return [];
+    const lines = patch.replace(/\n$/, "").split("\n");
+    const rows: SplitRow[] = [];
+    let leftNum = 0;
+    let rightNum = 0;
+    const dels: string[] = [];
+    const adds: string[] = [];
+
+    function flush() {
+      if (dels.length === 0 && adds.length === 0) return;
+      const count = Math.max(dels.length, adds.length);
+      for (let i = 0; i < count; i++) {
+        const hasDel = i < dels.length;
+        const hasAdd = i < adds.length;
+        if (hasDel) leftNum++;
+        if (hasAdd) rightNum++;
+        rows.push({
+          type: "pair",
+          leftNum:  hasDel ? leftNum  : undefined,
+          leftText: hasDel ? dels[i].slice(1) : undefined,
+          leftKind: hasDel ? "del" : "empty",
+          rightNum:  hasAdd ? rightNum  : undefined,
+          rightText: hasAdd ? adds[i].slice(1) : undefined,
+          rightKind: hasAdd ? "add" : "empty",
+        });
+      }
+      dels.length = 0;
+      adds.length = 0;
+    }
+
+    for (const line of lines) {
+      const isMeta =
+        line.startsWith("diff ") || line.startsWith("index ") ||
+        line.startsWith("--- ")  || line.startsWith("+++ ")   ||
+        line.startsWith("new file") || line.startsWith("deleted file") ||
+        line.startsWith("rename ")  || line.startsWith("similarity ");
+
+      if (isMeta) {
+        flush();
+        rows.push({ type: "span", kind: "meta", text: line });
+      } else if (line.startsWith("@@")) {
+        flush();
+        const m = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+        if (m) { leftNum = parseInt(m[1]) - 1; rightNum = parseInt(m[2]) - 1; }
+        rows.push({ type: "span", kind: "hunk", text: line });
+      } else if (line.startsWith("-")) {
+        dels.push(line);
+      } else if (line.startsWith("+")) {
+        adds.push(line);
+      } else {
+        flush();
+        leftNum++;
+        rightNum++;
+        rows.push({
+          type: "pair",
+          leftNum,  leftText:  line.slice(1), leftKind:  "context",
+          rightNum, rightText: line.slice(1), rightKind: "context",
+        });
+      }
+    }
+    flush();
+    return rows;
+  }
+
+  let diffByPath      = $derived(buildDiffByPath(comparison.patch));
+  let selectedFile    = $derived(comparison.files.find((f) => f.path === selectedDiffPath) ?? null);
+  let selectedPatch   = $derived(selectedFile ? (diffByPath.get(selectedFile.path) ?? "") : "");
+  let splitRows       = $derived(buildSplitRows(selectedPatch));
 </script>
 
 <div
@@ -91,12 +143,13 @@
   onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog" role="dialog" aria-modal="true" aria-label="Commit comparison" tabindex="-1">
+
     <header class="dialog-header">
       <div>
         <span class="eyebrow">Compare</span>
         <h2 class="dialog-range">
           <span class="hash">{comparison.from_short}</span>
-          <ArrowRight size={16} aria-hidden="true" />
+          <ArrowRight size={14} aria-hidden="true" />
           <span class="hash">{comparison.to_short}</span>
         </h2>
       </div>
@@ -106,9 +159,11 @@
     </header>
 
     {#if comparison.files.length === 0}
-      <div class="blank-state">No differences to show — these versions are identical.</div>
+      <div class="blank-state">No differences — these versions are identical.</div>
     {:else}
       <div class="dialog-body">
+
+        <!-- File list -->
         <aside class="dialog-files" aria-label="Changed files">
           {#each comparison.files as file (`${file.old_path ?? ""}:${file.path}`)}
             <button
@@ -118,7 +173,7 @@
               onclick={() => onSelectFile(file)}
               title={displayDiffFile(file)}
             >
-              <span class={`status-badge ${file.status}`}>{statusLabel(file.status)}</span>
+              <span class={`status-badge ${file.status}`}>{file.status}</span>
               <strong>{displayDiffFile(file)}</strong>
               <span class="diff-counts">
                 <span class="adds">+{file.additions}</span>
@@ -128,15 +183,52 @@
           {/each}
         </aside>
 
-        <div class="dialog-diff" aria-label="File diff">
-          {#if !selectedDiffFile}
+        <!-- Diff pane -->
+        <div class="dialog-diff">
+          {#if !selectedFile}
             <div class="blank-state">Select a file to see its changes.</div>
-          {:else if selectedDiffPatch.trim().length === 0}
+          {:else if splitRows.length === 0}
             <div class="blank-state">No textual changes for this file.</div>
           {:else}
-            <pre class="diff-view" aria-label="Unified diff">{#each diffLines(selectedDiffPatch) as line}<span class={`diff-line ${line.kind}`}>{line.text || " "}</span>{/each}</pre>
+            <!-- Path bar -->
+            <div class="diff-header">
+              <FileCode size={13} aria-hidden="true" />
+              <span>{displayDiffFile(selectedFile)}</span>
+              <span class="diff-counts" style="margin-left: auto; flex-shrink: 0;">
+                <span class="adds">+{selectedFile.additions}</span>
+                <span class="dels">-{selectedFile.deletions}</span>
+              </span>
+            </div>
+
+            <!-- Column headers -->
+            <div class="split-col-headers">
+              <div class="split-col-label">
+                <span>Before</span>
+                <span class="split-col-hash">{comparison.from_short}</span>
+              </div>
+              <div class="split-col-label">
+                <span>After</span>
+                <span class="split-col-hash">{comparison.to_short}</span>
+              </div>
+            </div>
+
+            <!-- Split diff grid -->
+            <div class="split-diff" role="table" aria-label="Side-by-side diff">
+              {#each splitRows as row, i (i)}
+                {#if row.type === "span"}
+                  <div class="split-span split-{row.kind}">{row.text}</div>
+                {:else}
+                  <div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
+                  <div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
+                  <div class="split-divider"></div>
+                  <div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
+                  <div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
+                {/if}
+              {/each}
+            </div>
           {/if}
         </div>
+
       </div>
     {/if}
   </div>