feat(changes): clickable diff panel with syntax highlighting

The Changes tab listed touched files but a click only opened the file in
the OS handler — useful, but no way to audit *what* changed without
leaving the app. This adds a diff view below the file list:

- Click row     → unified diff (baseline vs. current) renders below
- Right-click   → context menu (open / copy paths / show in folder),
                  reusing Explorer's ContextMenu in compact mode (read-
                  only, no rename / delete / cut / copy / paste)
- Mouse-down    → drag the file path to the terminal / Gambit, same lib
                  as Explorer's tree rows
- X button      → dismiss the diff panel back to list-only

Backend: FileSnapshot gains an optional content blob, captured only on
the baseline pass and only for text files under 1 MB (separate cap from
the 5 MB stats limit so memory stays bounded). New get_baseline_content
and read_text_file Tauri commands feed the panel; both lossy-UTF8 so
GBK / latin-1 source files still render.

Frontend: jsdiff for line-level diffing, Shiki (lazy-loaded WASM +
on-demand grammars) for syntax highlighting. Theme tracks the
data-theme attribute via a tiny MutationObserver hook so Coffee CLI's
9 color themes / 5 shape themes all retint cleanly without a remount.
Single-render flow (await tokens before setState) avoids the
plain-text → highlighted color flip on every file open.

Glass shape required adding .diff-line to the panel-* :is(div, ...)
:not(...) exception list in global.css so its row backgrounds aren't
forced transparent (same pattern as .ctx-menu, .task-card).

i18n: 3 new keys (diff.loading / diff.error / diff.no_changes) across
all 11 locales.

Remote SSH and other CWD-agnostic tools stay safe — file-stats already
returns empty for them, so ChangesBoard's empty-state path triggers
before the diff panel can mount.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: claude

src-ui/package-lock.json

@@ -18,9 +18,11 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
+    "diff": "^9.0.0",
     "js-dos": "^8.3.20",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "shiki": "^4.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

src-ui/package.json

@@ -20,13 +20,17 @@ const normPath = (p: string) => p.replace(/\\/g, '/');
 
 // ─── Context Menu ────────────────────────────────────────────────────────────
 
-interface CtxMenuState {
+export interface CtxMenuState {
   x: number;
   y: number;
   absolutePath: string;
   relativePath: string;
   isDir?: boolean;
   onRename?: () => void;
+  // ChangesBoard reuses this menu read-only — the audit view shouldn't
+  // mutate the agent's just-edited files. Hides cut/copy/paste/rename/delete
+  // + the relative-path entry.
+  compact?: boolean;
 }
 
 // Module-level clipboard: survives menu close/open cycles
@@ -44,7 +48,7 @@ function dispatchFsRefresh(dirPath: string) {
   window.dispatchEvent(new CustomEvent('fs-refresh', { detail: { dirPath } }));
 }
 
-function ContextMenu({ menu, onClose }: { menu: CtxMenuState; onClose: () => void }) {
+export function ContextMenu({ menu, onClose }: { menu: CtxMenuState; onClose: () => void }) {
   const t = useT();
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -191,7 +195,8 @@ function ContextMenu({ menu, onClose }: { menu: CtxMenuState; onClose: () => voi
         {t('menu.copy_ref' as any)}
       </button>
 
-      {/* File operation group */}
+      {/* File operation group — hidden in compact mode (read-only audit view) */}
+      {!menu.compact && <>
       <div className="ctx-menu-divider" />
       <button className="ctx-menu-item" onClick={handleCut}>
         <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -232,6 +237,7 @@ function ContextMenu({ menu, onClose }: { menu: CtxMenuState; onClose: () => voi
         </svg>
         {t('menu.delete' as any)}
       </button>
+      </>}
       <div className="ctx-menu-divider" />
       <button className="ctx-menu-item" onClick={handleShowInFolder}>
         <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

src-ui/src/components/left/Explorer.tsx

@@ -1,8 +1,43 @@
+.changes-split {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.changes-split-top {
+  flex: 0 0 40%;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.changes-split-bottom {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  /* Escape .task-board's 16px outer padding so the diff body (and its
+   * row backgrounds) reaches panel-edge to panel-edge, no left/right
+   * gaps. Combined with the panel-theme border-top below, this also
+   * makes the divider above the filename a clean full-width hairline. */
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+/* Panel shape: single full-width separator between the file list and the
+ * diff body. Other shapes (soft / slab / sharp / glass) leave it flush so
+ * the audit view feels continuous, not cardified. */
+[data-shape="panel"] .changes-split-bottom {
+  border-top: 1px solid var(--border, rgba(127, 127, 127, 0.18));
+}
+
 .changes-list {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding: 6px 0 80px 0;
+  padding: 6px 0 12px 0;
 }
 
 .changes-row {
@@ -18,10 +53,20 @@
   color: var(--text-1);
   font-size: 12px;
   line-height: 1.4;
+  /* Match Explorer's tree row chrome (Explorer.css L182-198): rounded
+   * corners + theme-driven hover/active backgrounds. The previous
+   * --surface-hover / --surface-active variables don't exist in
+   * global.css so they fell through to hardcoded grey, breaking
+   * theme parity. */
+  border-radius: var(--radius-sm);
 }
 
 .changes-row:hover {
-  background: var(--surface-hover, rgba(127, 127, 127, 0.08));
+  background: var(--bg-hover);
+}
+
+.changes-row.selected {
+  background: var(--bg-active);
 }
 
 .changes-name {

src-ui/src/components/right/ChangesBoard.css

@@ -1,13 +1,21 @@
 // ChangesBoard.tsx — flat list of files modified since the active tab's
 // session began. Reads the same FileStats map Explorer's tree badges read,
 // so the user can see "what's been touched" without expanding directories.
+//
+// Layout (Step 3+): top = list of changed files (40% by default), bottom =
+// DiffPanel for the row the user clicked (60%). Click = view diff.
+// Right-click = file actions menu (read-only: open / copy paths / show in folder).
+// Mirrors VS Code / GitHub Desktop / JetBrains: both interactions coexist.
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useAppState } from '../../store/app-state';
 import { useT } from '../../i18n/useT';
 import { useFileStats } from '../../lib/file-stats';
-import { commands } from '../../tauri';
 import { ScrollPanel } from '../common/ScrollPanel';
+import { ContextMenu } from '../left/Explorer';
+import type { CtxMenuState } from '../left/Explorer';
+import { beginExplorerDrag } from '../../lib/explorer-drag';
+import { DiffPanel } from './DiffPanel';
 import './ChangesBoard.css';
 
 export function ChangesBoard() {
@@ -16,6 +24,9 @@ export function ChangesBoard() {
   const fileStats = useFileStats();
   const activeSession = state.terminals.find(s => s.id === state.activeTerminalId);
   const folderPath = activeSession?.folderPath || null;
+  const sessionId = activeSession?.id || null;
+  const [ctxMenu, setCtxMenu] = useState<CtxMenuState | null>(null);
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
 
   const rows = useMemo(() => {
     if (!fileStats || fileStats.size === 0 || !folderPath) return [];
@@ -32,9 +43,10 @@ export function ChangesBoard() {
     return list;
   }, [fileStats, folderPath]);
 
-  const handleOpen = (path: string) => {
-    commands.openUrl(path).catch(e => console.error('[ChangesBoard] open failed:', e));
-  };
+  // If the selected file disappears from the list (reverted, deleted, or tab
+  // switch), drop the diff panel rather than showing stale content.
+  const selectedStillExists = selectedPath && rows.some(r => r.path === selectedPath);
+  const effectiveSelected = selectedStillExists ? selectedPath : null;
 
   if (!folderPath) {
     return (
@@ -57,24 +69,45 @@ export function ChangesBoard() {
   }
 
   return (
-    <ScrollPanel>
-      <div className="changes-list">
-        {rows.map(row => (
-          <button
-            key={row.path}
-            type="button"
-            className="changes-row"
-            onClick={() => handleOpen(row.path)}
-          >
-            <span className="changes-name">{row.basename}</span>
-            <span className="changes-path">{row.rel === row.basename ? '' : row.rel.slice(0, -row.basename.length - 1)}</span>
-            <span className="changes-stats">
-              <span className="diff-add">+{row.added}</span>
-              <span className="diff-del">-{row.deleted}</span>
-            </span>
-          </button>
-        ))}
+    <div className="changes-split">
+      <div className="changes-split-top">
+        <ScrollPanel>
+          <div className="changes-list">
+            {rows.map(row => (
+              <div
+                key={row.path}
+                className={`changes-row ${effectiveSelected === row.path ? 'selected' : ''}`}
+                onClick={() => setSelectedPath(row.path)}
+                onMouseDown={(e) => beginExplorerDrag(row.path, e)}
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  setCtxMenu({
+                    x: e.clientX,
+                    y: e.clientY,
+                    absolutePath: row.path,
+                    relativePath: row.rel,
+                    isDir: false,
+                    compact: true,
+                  });
+                }}
+              >
+                <span className="changes-name">{row.basename}</span>
+                <span className="changes-path">{row.rel === row.basename ? '' : row.rel.slice(0, -row.basename.length - 1)}</span>
+                <span className="changes-stats">
+                  <span className="diff-add">+{row.added}</span>
+                  <span className="diff-del">-{row.deleted}</span>
+                </span>
+              </div>
+            ))}
+          </div>
+        </ScrollPanel>
       </div>
-    </ScrollPanel>
+      {effectiveSelected && sessionId && (
+        <div className="changes-split-bottom">
+          <DiffPanel sessionId={sessionId} path={effectiveSelected} onClose={() => setSelectedPath(null)} />
+        </div>
+      )}
+      {ctxMenu && <ContextMenu menu={ctxMenu} onClose={() => setCtxMenu(null)} />}
+    </div>
   );
 }