santree 0.4.0 → 0.5.1

package/dist/commands/dashboard.js

@@ -9,9 +9,10 @@ import * as fs from "fs";
 import * as path from "path";
 const require = createRequire(import.meta.url);
 const { version } = require("../../package.json");
-import { findMainRepoRoot, createWorktree, getDefaultBranch, getBaseBranch, hasInitScript, getInitScriptPath, removeWorktree, } from "../lib/git.js";
+import { findMainRepoRoot, createWorktree, getDefaultBranch, getBaseBranch, hasInitScript, getInitScriptPath, removeWorktree, getDiffTool, } from "../lib/git.js";
 import { run, spawnAsync } from "../lib/exec.js";
 import { resolveAgentBinary } from "../lib/ai.js";
+import { getInstalledClaudeVersion } from "../lib/version.js";
 import { extractTicketId } from "../lib/git.js";
 import { getMultiplexer } from "../lib/multiplexer/index.js";
 import { getPRTemplate } from "../lib/github.js";
@@ -20,26 +21,83 @@ import { getTicketContent } from "../lib/linear.js";
 import * as os from "os";
 import { initialState, reducer } from "../lib/dashboard/types.js";
 import { loadDashboardData, loadReviewsData } from "../lib/dashboard/data.js";
-import IssueList from "../lib/dashboard/IssueList.js";
-import DetailPanel from "../lib/dashboard/DetailPanel.js";
+import IssueList, { buildIssueListRows } from "../lib/dashboard/IssueList.js";
+import { detectTerminalTheme, getThemeForMode, } from "../lib/dashboard/theme.js";
+import DetailPanel, { buildIssueActions } from "../lib/dashboard/DetailPanel.js";
 import ReviewList from "../lib/dashboard/ReviewList.js";
-import ReviewDetailPanel from "../lib/dashboard/ReviewDetailPanel.js";
+import ReviewDetailPanel, { buildReviewActions } from "../lib/dashboard/ReviewDetailPanel.js";
 import { CommitOverlay, PrCreateOverlay } from "../lib/dashboard/Overlays.js";
 import { MultilineTextArea } from "../lib/dashboard/MultilineTextArea.js";
+import DiffOverlay, { flattenTreeFiles, computeDiffLayout, clampDiffLeftWidth, DIFF_DIVIDER_WIDTH, } from "../lib/dashboard/DiffOverlay.js";
+import { CURRENT_VERSION, CLAUDE_CODE_PACKAGE, getLatestVersion, getCachedLatestVersion, getLatestVersionFor, getCachedLatestVersionFor, isUpdateAvailable, } from "../lib/version.js";
 export const description = "Interactive dashboard of your Linear issues";
 const execAsync = promisify(exec);
-const CLAUDE_VERSION = (() => {
-    const bin = path.join(os.homedir(), ".claude", "local", "claude");
-    try {
-        return (execSync(`${bin} --version`, { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] })
-            .trim()
-            .split(" ")[0] ?? "");
-    }
-    catch {
-        return "";
-    }
-})();
+// Resolved at module load — cheap. Honors cmux's bundled binary when running
+// inside cmux so the header reflects the binary santree will actually use.
+const CLAUDE_VERSION = getInstalledClaudeVersion() ?? "";
 // ── Helpers ───────────────────────────────────────────────────────────
+/**
+ * Parse `git diff --name-status` output. Each line is a tab-separated record:
+ *   M\tpath/to/file.ts
+ *   R100\told/path\tnew/path
+ * For renames/copies, the status code has a similarity suffix we strip.
+ */
+/**
+ * Pipe `git diff` output through an external tool (e.g. delta) and return the
+ * combined ANSI output. Uses spawn pipes — no shell — so the tool name is safe
+ * even though we already validate it in getDiffTool().
+ */
+function runPipedDiff(cwd, mergeBase, filePath, tool) {
+    return new Promise((resolve, reject) => {
+        const git = spawn("git", ["-C", cwd, "diff", "--color=always", mergeBase, "--", filePath], {
+            stdio: ["ignore", "pipe", "pipe"],
+        });
+        const pager = spawn(tool, [], { stdio: ["pipe", "pipe", "pipe"] });
+        let out = "";
+        let err = "";
+        git.stdout.pipe(pager.stdin);
+        git.stderr.on("data", (d) => {
+            err += d.toString();
+        });
+        pager.stdout.on("data", (d) => {
+            out += d.toString();
+        });
+        pager.stderr.on("data", (d) => {
+            err += d.toString();
+        });
+        pager.on("error", reject);
+        git.on("error", reject);
+        pager.on("close", (code) => {
+            if (code !== 0 && !out) {
+                reject(new Error(err || `${tool} exited with code ${code}`));
+            }
+            else {
+                resolve(out);
+            }
+        });
+    });
+}
+function parseNameStatus(raw) {
+    const files = [];
+    for (const line of raw.split("\n")) {
+        if (!line.trim())
+            continue;
+        const parts = line.split("\t");
+        if (parts.length < 2)
+            continue;
+        const code = parts[0].charAt(0).toUpperCase();
+        const status = code === "M" || code === "A" || code === "D" || code === "R" || code === "C" || code === "U"
+            ? code
+            : "?";
+        if ((status === "R" || status === "C") && parts.length >= 3) {
+            files.push({ status, path: parts[2], oldPath: parts[1] });
+        }
+        else {
+            files.push({ status, path: parts[1] });
+        }
+    }
+    return files;
+}
 function slugify(title) {
     return title
         .toLowerCase()
@@ -48,58 +106,30 @@ function slugify(title) {
         .slice(0, 40);
 }
 // ── Scroll helpers ────────────────────────────────────────────────────
-function countWithChildren(di) {
-    let count = 1;
-    if (di.children) {
-        for (const child of di.children) {
-            count += countWithChildren(child);
-        }
-    }
-    return count;
-}
-function getRowIndexForFlatIndex(groups, flatIndex) {
-    let row = 1; // skip column header row
-    let issuesSeen = 0;
-    for (const g of groups) {
-        row++; // project header
-        for (const sg of g.statusGroups) {
-            row++; // status header
-            for (const di of sg.issues) {
-                const total = countWithChildren(di);
-                if (flatIndex >= issuesSeen && flatIndex < issuesSeen + total) {
-                    // The target is within this issue or its children
-                    return row + (flatIndex - issuesSeen);
-                }
-                row += total;
-                issuesSeen += total;
-            }
-        }
+/**
+ * Walk the rendered list rows and return the absolute row index of the
+ * issue's main row (not its detail sub-rows). Used to keep the selected
+ * issue scrolled into view as `j`/`k` moves selection.
+ */
+function getRowIndexForFlatIndex(groups, flatIssues, flatIndex) {
+    const rows = buildIssueListRows(groups, flatIssues);
+    for (let i = 0; i < rows.length; i++) {
+        const r = rows[i];
+        if (r.kind === "issue" && r.flatIndex === flatIndex)
+            return i;
     }
     return 0;
 }
-function getFlatIndexForListRow(groups, listRow) {
-    if (listRow === 0)
-        return null; // column header row
-    let row = 1; // skip column header row
-    let issuesSeen = 0;
-    for (const g of groups) {
-        if (row === listRow)
-            return null; // project header row
-        row++;
-        for (const sg of g.statusGroups) {
-            if (row === listRow)
-                return null; // status header row
-            row++;
-            for (const di of sg.issues) {
-                const total = countWithChildren(di);
-                if (listRow >= row && listRow < row + total) {
-                    return issuesSeen + (listRow - row);
-                }
-                row += total;
-                issuesSeen += total;
-            }
-        }
-    }
+/**
+ * Map a clicked list row back to its parent issue's flat index, if any.
+ */
+function getFlatIndexForListRow(groups, flatIssues, listRow) {
+    const rows = buildIssueListRows(groups, flatIssues);
+    const row = rows[listRow];
+    if (!row)
+        return null;
+    if (row.kind === "issue")
+        return row.flatIndex;
     return null;
 }
 // ── Terminal escape sequences ─────────────────────────────────────────
@@ -144,21 +174,81 @@ function leaveAltScreen() {
     process.stdout.write("\x1b[?1049l"); // Leave alternate screen buffer
     process.stdout.write("\x1b[?25h"); // Show cursor
 }
+/**
+ * Tab pill — active tab uses an explicit hex bg + fg so contrast doesn't
+ * depend on the user's ANSI palette interpretation (terminal "cyan" can be a
+ * pale teal in light themes that doesn't read against ANSI "black"). Light
+ * mode gets a darker teal pill with white text; dark mode keeps a bright
+ * cyan pill with black text. Inactive tabs use default foreground.
+ */
+function Tab({ active, label, mode }) {
+    if (active) {
+        const bg = mode === "light" ? "#0e7490" : "#22d3ee";
+        const fg = mode === "light" ? "white" : "black";
+        return (_jsx(Text, { backgroundColor: bg, color: fg, bold: true, children: ` ${label} ` }));
+    }
+    return _jsx(Text, { children: ` ${label} ` });
+}
+/**
+ * Single-line global keymap shown at the bottom-left of the dashboard. The
+ * `E workspace` hint only appears when the action is meaningful
+ * (`SANTREE_EDITOR` is `code`/`cursor` and a `.code-workspace` file exists in
+ * the repo root). When the diff overlay is active, the keymap switches to
+ * diff-specific bindings since the global ones don't apply.
+ */
+function CommandBar({ showWorkspace, mode = "default", }) {
+    const dot = _jsx(Text, { dimColor: true, children: "  ·  " });
+    const Key = ({ k }) => (_jsx(Text, { color: "cyan", bold: true, children: k }));
+    if (mode === "diff") {
+        return (_jsxs(Text, { children: [_jsx(Key, { k: "j/k" }), _jsx(Text, { dimColor: true, children: " file" }), dot, _jsx(Key, { k: "\u21E7\u2191\u2193" }), _jsx(Text, { dimColor: true, children: " scroll" }), dot, _jsx(Key, { k: "g/G" }), _jsx(Text, { dimColor: true, children: " top/bot" }), dot, _jsx(Key, { k: "q" }), _jsx(Text, { dimColor: true, children: " close" })] }));
+    }
+    return (_jsxs(Text, { children: [_jsx(Key, { k: "j/k" }), _jsx(Text, { dimColor: true, children: " nav" }), dot, _jsx(Key, { k: "\u21E7\u2191\u2193" }), _jsx(Text, { dimColor: true, children: " scroll" }), dot, _jsx(Key, { k: "1/2" }), _jsx(Text, { dimColor: true, children: " tabs" }), showWorkspace ? (_jsxs(_Fragment, { children: [dot, _jsx(Key, { k: "E" }), _jsx(Text, { dimColor: true, children: " workspace" })] })) : null, dot, _jsx(Key, { k: "R" }), _jsx(Text, { dimColor: true, children: " refresh" }), dot, _jsx(Key, { k: "q" }), _jsx(Text, { dimColor: true, children: " quit" })] }));
+}
 // ── Component ─────────────────────────────────────────────────────────
 export default function Dashboard() {
     ensureAltScreen();
     const { exit } = useApp();
     const { stdout } = useStdout();
     const [state, dispatch] = useReducer(reducer, initialState);
+    // Theme is a visual concern only — kept outside the reducer so re-detection
+    // on refresh doesn't churn data flow. Defaults to dark; replaced by OSC 11
+    // detection on mount and on every refresh.
+    const [theme, setTheme] = useState(getThemeForMode("dark"));
+    // `E workspace` is only meaningful when the user's editor accepts a
+    // `.code-workspace` file (VSCode/Cursor) AND such a file exists in the
+    // repo root. Recomputed alongside the data refresh.
+    const [hasWorkspaceFile, setHasWorkspaceFile] = useState(false);
     const refreshTimerRef = useRef(null);
     const repoRootRef = useRef(null);
     const stateRef = useRef(state);
     stateRef.current = state;
-    const draggingRef = useRef(false);
+    const draggingRef = useRef(null);
     const [termSize, setTermSize] = useState({
         columns: stdout?.columns ?? 80,
         rows: stdout?.rows ?? 24,
     });
+    // Show cached values immediately so the banner appears on first paint when
+    // known-stale; refresh in the background without blocking dashboard load.
+    const [latestVersion, setLatestVersion] = useState(getCachedLatestVersion);
+    const [latestClaudeVersion, setLatestClaudeVersion] = useState(() => getCachedLatestVersionFor(CLAUDE_CODE_PACKAGE));
+    useEffect(() => {
+        let cancelled = false;
+        getLatestVersion().then((v) => {
+            if (!cancelled && v)
+                setLatestVersion(v);
+        });
+        getLatestVersionFor(CLAUDE_CODE_PACKAGE).then((v) => {
+            if (!cancelled && v)
+                setLatestClaudeVersion(v);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const updateAvailable = latestVersion ? isUpdateAvailable(CURRENT_VERSION, latestVersion) : false;
+    const claudeUpdateAvailable = !!CLAUDE_VERSION &&
+        !!latestClaudeVersion &&
+        isUpdateAvailable(CLAUDE_VERSION, latestClaudeVersion);
     useEffect(() => {
         const onResize = () => {
             setTermSize({
@@ -173,12 +263,21 @@ export default function Dashboard() {
     }, [stdout]);
     const { columns, rows } = termSize;
     const separatorWidth = 3;
-    const [leftWidth, setLeftWidth] = useState(Math.floor(columns * 0.42));
+    const innerWidth = Math.max(40, columns - 2); // outer border consumes 1 col on each side
+    const [leftWidth, setLeftWidth] = useState(Math.floor(innerWidth * 0.42));
     const leftWidthRef = useRef(leftWidth);
     leftWidthRef.current = leftWidth;
-    const rightWidth = columns - leftWidth - separatorWidth;
-    const contentHeight = rows - 2; // 2 header rows (tabs + version)
-    const LIST_FOOTER_HEIGHT = 2;
+    const rightWidth = innerWidth - leftWidth - separatorWidth;
+    // Diff overlay's left pane width — null means "use the default formula"
+    // (computed inside computeDiffLayout). Becomes a number once the user drags
+    // the divider, and persists across overlay open/close while the dashboard
+    // session is alive.
+    const [diffLeftWidth, setDiffLeftWidth] = useState(null);
+    const diffLeftWidthRef = useRef(diffLeftWidth);
+    diffLeftWidthRef.current = diffLeftWidth;
+    // Header (1) + tab strip (1) + 2 borders + command bar (1, inside box) = 5 rows
+    const contentHeight = Math.max(3, rows - 5);
+    const LIST_FOOTER_HEIGHT = 0;
     // ── Data loading ──────────────────────────────────────────────────
     const refresh = useCallback(async (isInitial = false) => {
         if (!isInitial)
@@ -190,10 +289,29 @@ export default function Dashboard() {
         }
         repoRootRef.current = repoRoot;
         try {
-            const [data, reviewData] = await Promise.all([
+            // Re-detect terminal theme alongside data fetch so light↔dark switches
+            // propagate within one refresh cycle (≤30s).
+            const [data, reviewData, themeMode] = await Promise.all([
                 loadDashboardData(repoRoot),
                 loadReviewsData(repoRoot),
+                detectTerminalTheme(),
             ]);
+            setTheme(getThemeForMode(themeMode));
+            // Workspace file presence — only meaningful when the editor consumes
+            // `.code-workspace` files. Cheap directory read; recomputed each cycle
+            // in case the user adds/removes one.
+            const editor = (process.env.SANTREE_EDITOR ?? "code").toLowerCase();
+            const editorAcceptsWorkspace = editor === "code" || editor === "cursor";
+            let hasWs = false;
+            if (editorAcceptsWorkspace) {
+                try {
+                    hasWs = fs.readdirSync(repoRoot).some((f) => f.endsWith(".code-workspace"));
+                }
+                catch {
+                    hasWs = false;
+                }
+            }
+            setHasWorkspaceFile(hasWs);
             dispatch({ type: "SET_DATA", ...data });
             dispatch({ type: "SET_REVIEWS_DATA", flatReviews: reviewData.flatReviews });
         }
@@ -226,13 +344,23 @@ export default function Dashboard() {
             const sepW = 3;
             // Release — stop dragging
             if (isRelease && draggingRef.current) {
-                draggingRef.current = false;
+                draggingRef.current = null;
                 return;
             }
             // Drag — resize if actively dragging
             if (isDrag && draggingRef.current) {
-                // col is 1-based; place divider center at mouse position
-                const newLeft = Math.max(minW, Math.min(col - 1, cols - sepW - minW));
+                if (draggingRef.current === "diff") {
+                    // DiffOverlay starts at abs col 2 with width=innerWidth; its
+                    // 1-col divider sits at relative col (leftWidth+1) → abs col
+                    // (leftWidth+2). Setting newLeft = col - 2 keeps it under the
+                    // cursor; clampDiffLeftWidth enforces pane minimums.
+                    const innerW = Math.max(40, cols - 2);
+                    setDiffLeftWidth(clampDiffLeftWidth(col - 2, innerW));
+                    return;
+                }
+                // col is 1-based; outer border consumes col 1, so left pane spans cols 2..(lw+1).
+                // Setting newLeft = col - 1 keeps the divider at the user's cursor.
+                const newLeft = Math.max(minW, Math.min(col - 1, cols - 2 - sepW - minW));
                 setLeftWidth(newLeft);
                 return;
             }
@@ -241,8 +369,45 @@ export default function Dashboard() {
                 const s = stateRef.current;
                 const lw = leftWidthRef.current;
                 const delta = button === 65 ? 3 : -3;
+                // Diff overlay: file navigation (left pane) or content scroll (right pane)
+                if (s.overlay === "diff") {
+                    const cols = stdout?.columns ?? 80;
+                    const rowsRem = stdout?.rows ?? 24;
+                    // contentHeight = total - dashboard header (1) - tab bar (1) - bottom margin (0)
+                    const contentHeight = Math.max(3, rowsRem - 5);
+                    const layout = computeDiffLayout({
+                        width: Math.max(40, cols - 2), // outer box border eats 1 col on each side
+                        height: contentHeight,
+                        files: s.diffFiles,
+                        fileIndex: s.diffFileIndex,
+                        fileScrollOffset: s.diffFileScrollOffset,
+                        leftWidthOverride: diffLeftWidthRef.current ?? undefined,
+                    });
+                    // Body's first line is at absolute row 6 (title + tab + top border + overlay title + rule)
+                    const bodyRow = row - 6;
+                    if (bodyRow < 0 || bodyRow >= layout.bodyHeight)
+                        return;
+                    // DiffOverlay starts at abs col 2; left pane occupies abs cols
+                    // 2..(leftWidth+1).
+                    if (col <= layout.leftWidth + 1) {
+                        const maxIdx = s.diffFiles.length - 1;
+                        if (maxIdx < 0)
+                            return;
+                        const next = Math.max(0, Math.min(s.diffFileIndex + delta, maxIdx));
+                        dispatch({ type: "DIFF_FILE_SELECT", index: next });
+                    }
+                    else {
+                        const totalLines = s.diffContent ? s.diffContent.split("\n").length : 0;
+                        const maxScroll = Math.max(0, totalLines - layout.bodyHeight);
+                        const next = Math.max(0, Math.min(maxScroll, s.diffContentScrollOffset + delta));
+                        dispatch({ type: "DIFF_CONTENT_SCROLL", offset: next });
+                    }
+                    return;
+                }
+                // Outer border at col 1; left pane spans cols 2..(lw+1).
+                const inLeftPane = col >= 2 && col <= lw + 1;
                 if (s.activeTab === "reviews") {
-                    if (col <= lw) {
+                    if (inLeftPane) {
                         const maxIdx = s.flatReviews.length - 1;
                         if (maxIdx < 0)
                             return;
@@ -255,7 +420,7 @@ export default function Dashboard() {
                     }
                     return;
                 }
-                if (col <= lw) {
+                if (inLeftPane) {
                     // Scroll left pane (issue list)
                     const maxIdx = s.flatIssues.length - 1;
                     if (maxIdx < 0)
@@ -272,22 +437,59 @@ export default function Dashboard() {
             }
             if (!isPress)
                 return;
+            // Diff overlay click: drag divider, or select file row in left pane
+            {
+                const s = stateRef.current;
+                if (s.overlay === "diff") {
+                    const cols = stdout?.columns ?? 80;
+                    const rowsRem = stdout?.rows ?? 24;
+                    const contentHeight = Math.max(3, rowsRem - 5);
+                    const layout = computeDiffLayout({
+                        width: Math.max(40, cols - 2), // outer box border eats 1 col on each side
+                        height: contentHeight,
+                        files: s.diffFiles,
+                        fileIndex: s.diffFileIndex,
+                        fileScrollOffset: s.diffFileScrollOffset,
+                        leftWidthOverride: diffLeftWidthRef.current ?? undefined,
+                    });
+                    // Divider sits at abs col leftWidth+2 (DiffOverlay starts at
+                    // abs col 2; divider at relative col leftWidth+1). Allow ±1
+                    // tolerance — a 1-col target is hard to hit precisely.
+                    const diffDivAbsCol = layout.leftWidth + 2;
+                    if (col >= diffDivAbsCol - 1 && col <= diffDivAbsCol - 1 + DIFF_DIVIDER_WIDTH + 1) {
+                        draggingRef.current = "diff";
+                        return;
+                    }
+                    if (col > layout.leftWidth + 1)
+                        return;
+                    const bodyRow = row - 6;
+                    if (bodyRow < 0 || bodyRow >= layout.bodyHeight)
+                        return;
+                    const absRowIdx = layout.effectiveScroll + bodyRow;
+                    const clickedRow = layout.rows[absRowIdx];
+                    if (clickedRow && clickedRow.fileIndex !== null) {
+                        dispatch({ type: "DIFF_FILE_SELECT", index: clickedRow.fileIndex });
+                    }
+                    return;
+                }
+            }
             // Left-click press: check if on divider to start drag
+            // Outer border is at col 1; left pane spans cols 2..(lw+1); divider spans (lw+2)..(lw+1+sepW).
             const lw = leftWidthRef.current;
-            const divStart = lw + 1; // 1-based start of separator
-            const divEnd = lw + sepW; // 1-based end of separator
+            const divStart = lw + 2;
+            const divEnd = lw + 1 + sepW;
             if (col >= divStart && col <= divEnd) {
-                draggingRef.current = true;
+                draggingRef.current = "main";
                 return;
             }
-            // Left-click press: select item in left pane
+            // Left-click press: select item in left pane (cols 2..lw+1)
             const s = stateRef.current;
             if (s.loading || s.error)
                 return;
-            if (col > lw)
+            if (col < 2 || col > lw + 1)
                 return;
-            // Row 1 is the header line, content starts at row 2 (1-based)
-            const contentRow = row - 2; // 0-based row within content area
+            // Row 1 = title, row 2 = tab strip, row 3 = top border, content starts at row 4 (1-based)
+            const contentRow = row - 4; // 0-based row within content area
             if (contentRow < 0)
                 return;
             if (s.activeTab === "reviews") {
@@ -304,7 +506,7 @@ export default function Dashboard() {
             if (s.flatIssues.length === 0)
                 return;
             const listRow = s.listScrollOffset + contentRow;
-            const flatIdx = getFlatIndexForListRow(s.groups, listRow);
+            const flatIdx = getFlatIndexForListRow(s.groups, s.flatIssues, listRow);
             if (flatIdx !== null && flatIdx >= 0 && flatIdx < s.flatIssues.length) {
                 dispatch({ type: "SELECT", index: flatIdx });
             }
@@ -332,7 +534,7 @@ export default function Dashboard() {
     }, [refresh]);
     // ── List scroll tracking ──────────────────────────────────────────
     useEffect(() => {
-        const rowIdx = getRowIndexForFlatIndex(state.groups, state.selectedIndex);
+        const rowIdx = getRowIndexForFlatIndex(state.groups, state.flatIssues, state.selectedIndex);
         const maxVisible = contentHeight - LIST_FOOTER_HEIGHT;
         let offset = state.listScrollOffset;
         if (rowIdx < offset) {
@@ -377,6 +579,73 @@ export default function Dashboard() {
             process.stdout.write("\x1b[?1002h\x1b[?1006h");
         };
     }, [state.overlay, state.contextInputPhase, state.prCreatePhase]);
+    // ── Diff overlay: load file list when opened ──────────────────────
+    // Resolves merge-base against the configured base branch so upstream-only
+    // changes (commits on master we haven't pulled) are excluded — same semantics
+    // as a GitHub PR diff.
+    useEffect(() => {
+        if (state.overlay !== "diff" || !state.diffWorktreePath || !state.diffBaseBranch)
+            return;
+        if (!state.diffLoadingFiles)
+            return;
+        const cwd = state.diffWorktreePath;
+        const base = state.diffBaseBranch;
+        void (async () => {
+            try {
+                const { stdout: mergeBaseOut } = await execAsync(`git -C "${cwd}" merge-base "${base}" HEAD`);
+                const mergeBase = mergeBaseOut.trim() || base;
+                const { stdout } = await execAsync(`git -C "${cwd}" diff --name-status "${mergeBase}"`);
+                const files = parseNameStatus(stdout);
+                const ordered = flattenTreeFiles(files);
+                dispatch({ type: "DIFF_FILES_LOADED", files: ordered, mergeBase });
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                dispatch({ type: "DIFF_FILES_ERROR", error: msg });
+            }
+        })();
+    }, [state.overlay, state.diffWorktreePath, state.diffBaseBranch, state.diffLoadingFiles]);
+    // ── Diff overlay: load content for selected file ──────────────────
+    // If SANTREE_DIFF_TOOL is set, pipe `git diff` output through the tool so
+    // the user's preferred renderer (delta, diff-so-fancy, etc.) handles
+    // colorization. The tool's ANSI output is then rendered as-is by Ink.
+    useEffect(() => {
+        if (state.overlay !== "diff" || !state.diffWorktreePath || !state.diffMergeBase)
+            return;
+        const file = state.diffFiles[state.diffFileIndex];
+        if (!file)
+            return;
+        const cwd = state.diffWorktreePath;
+        const mergeBase = state.diffMergeBase;
+        const tool = getDiffTool();
+        dispatch({ type: "DIFF_CONTENT_LOADING" });
+        void (async () => {
+            try {
+                if (tool) {
+                    // Pipe git diff (with colors enabled so the tool can pass them
+                    // through if desired) into the configured tool. Use spawn pipes
+                    // rather than shell to avoid quoting concerns.
+                    const content = await runPipedDiff(cwd, mergeBase, file.path, tool);
+                    dispatch({ type: "DIFF_CONTENT_LOADED", content });
+                }
+                else {
+                    // No external tool — get raw unified diff and render colors ourselves.
+                    const { stdout } = await execAsync(`git -C "${cwd}" diff --no-color "${mergeBase}" -- "${file.path}"`, { maxBuffer: 32 * 1024 * 1024 });
+                    dispatch({ type: "DIFF_CONTENT_LOADED", content: stdout });
+                }
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                dispatch({ type: "DIFF_CONTENT_LOADED", content: `Error loading diff: ${msg}` });
+            }
+        })();
+    }, [
+        state.overlay,
+        state.diffWorktreePath,
+        state.diffMergeBase,
+        state.diffFileIndex,
+        state.diffFiles,
+    ]);
     // ── Actions ───────────────────────────────────────────────────────
     const launchWorkInTmux = useCallback(async (di, mode, worktreePath, contextFile) => {
         const windowName = di.issue.identifier;
@@ -1036,6 +1305,65 @@ export default function Dashboard() {
             }
             return;
         }
+        // Diff overlay
+        if (state.overlay === "diff") {
+            if (key.escape || input === "q") {
+                dispatch({ type: "DIFF_CLOSE" });
+                return;
+            }
+            const fileCount = state.diffFiles.length;
+            if (fileCount === 0)
+                return;
+            // Compute max scroll so we never scroll past the end of the diff.
+            const cols = stdout?.columns ?? 80;
+            const rowsRem = stdout?.rows ?? 24;
+            const contentHeight = Math.max(3, rowsRem - 2);
+            const layout = computeDiffLayout({
+                width: Math.max(40, cols - 2), // outer box border eats 1 col on each side
+                height: contentHeight,
+                files: state.diffFiles,
+                fileIndex: state.diffFileIndex,
+                fileScrollOffset: state.diffFileScrollOffset,
+                leftWidthOverride: diffLeftWidth ?? undefined,
+            });
+            const totalLines = state.diffContent ? state.diffContent.split("\n").length : 0;
+            const maxScroll = Math.max(0, totalLines - layout.bodyHeight);
+            // Scroll diff content (J/K or shift+arrows)
+            if ((key.shift && key.downArrow) || input === "J") {
+                dispatch({
+                    type: "DIFF_CONTENT_SCROLL",
+                    offset: Math.min(maxScroll, state.diffContentScrollOffset + 5),
+                });
+                return;
+            }
+            if ((key.shift && key.upArrow) || input === "K") {
+                dispatch({
+                    type: "DIFF_CONTENT_SCROLL",
+                    offset: Math.max(0, state.diffContentScrollOffset - 5),
+                });
+                return;
+            }
+            if (input === "g") {
+                dispatch({ type: "DIFF_CONTENT_SCROLL", offset: 0 });
+                return;
+            }
+            if (input === "G") {
+                dispatch({ type: "DIFF_CONTENT_SCROLL", offset: maxScroll });
+                return;
+            }
+            // Navigate file list (j/k or arrows)
+            if (input === "j" || (key.downArrow && !key.shift)) {
+                const next = Math.min(state.diffFileIndex + 1, fileCount - 1);
+                dispatch({ type: "DIFF_FILE_SELECT", index: next });
+                return;
+            }
+            if (input === "k" || (key.upArrow && !key.shift)) {
+                const prev = Math.max(state.diffFileIndex - 1, 0);
+                dispatch({ type: "DIFF_FILE_SELECT", index: prev });
+                return;
+            }
+            return;
+        }
         // Confirm delete overlay
         if (state.overlay === "confirm-delete") {
             if (input === "y") {
@@ -1452,9 +1780,12 @@ export default function Dashboard() {
             openInEditor(di.worktree.path);
             return;
         }
-        // Open workspace
+        // Open workspace — no-op unless the editor accepts a .code-workspace
+        // file and one exists. Keeps the keybinding from firing surprises on
+        // editors like zed/nvim that don't have the concept.
         if (input === "E") {
-            openWorkspace();
+            if (hasWorkspaceFile)
+                openWorkspace();
             return;
         }
         // Commit & push
@@ -1507,6 +1838,21 @@ export default function Dashboard() {
             }
             return;
         }
+        // View diff (inline overlay)
+        if (input === "v") {
+            if (!di.worktree) {
+                dispatch({ type: "SET_ACTION_MESSAGE", message: "No worktree to diff" });
+                return;
+            }
+            const baseBranch = getBaseBranch(di.worktree.branch);
+            dispatch({
+                type: "DIFF_OPEN",
+                ticketId: di.issue.identifier,
+                worktreePath: di.worktree.path,
+                baseBranch,
+            });
+            return;
+        }
         // Delete worktree
         if (input === "d") {
             if (!di.worktree) {
@@ -1530,16 +1876,38 @@ export default function Dashboard() {
     }
     const selectedIssue = state.flatIssues[state.selectedIndex] ?? null;
     const selectedReview = state.flatReviews[state.reviewSelectedIndex] ?? null;
-    return (_jsxs(Box, { width: columns, height: rows, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "Santree Dashboard" }), _jsxs(Text, { dimColor: true, children: ["  ", "v", version] }), CLAUDE_VERSION ? (_jsxs(Text, { dimColor: true, children: ["  ", "claude ", CLAUDE_VERSION] })) : null, _jsx(Text, { dimColor: true, children: state.refreshing ? "  refreshing..." : "" }), state.actionMessage && (_jsxs(Text, { color: "yellow", children: ["  ", state.actionMessage] }))] }), _jsxs(Box, { children: [_jsxs(Text, { bold: state.activeTab === "issues", color: state.activeTab === "issues" ? "cyan" : undefined, dimColor: state.activeTab !== "issues", children: [state.activeTab === "issues" ? "\u25b8 " : "  ", "1 Issues (", state.flatIssues.length, ")"] }), _jsx(Text, { children: "   " }), _jsxs(Text, { bold: state.activeTab === "reviews", color: state.activeTab === "reviews" ? "cyan" : undefined, dimColor: state.activeTab !== "reviews", children: [state.activeTab === "reviews" ? "\u25b8 " : "  ", "2 Reviews (", state.flatReviews.length, ")"] })] }), state.overlay === "mode-select" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Select mode:" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "p" }), "  Plan"] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "i" }), "  Implement"] }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "ESC to cancel" })] }) })) : state.overlay === "context-input" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", paddingX: 2, width: Math.min(columns - 8, 100), children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Extra context for ", state.contextInputMode] }), _jsx(Text, { dimColor: true, children: "Optional \u2014 appended to the prompt before launching Claude" }), _jsx(Text, { children: " " }), state.contextInputPhase === "editing" ? (_jsxs(_Fragment, { children: [_jsx(MultilineTextArea, { value: state.contextInputValue, onChange: (v) => dispatch({ type: "CONTEXT_INPUT_CHANGE", value: v }), onSubmit: () => dispatch({ type: "CONTEXT_INPUT_REVIEW" }), onCancel: () => dispatch({ type: "CONTEXT_INPUT_DONE" }), width: Math.min(columns - 8, 100), height: 10, placeholder: "Type or paste extra context\u2026" }), _jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "cyan", bold: true, children: "Ctrl+D" }), " send  ·  ", _jsx(Text, { color: "cyan", bold: true, children: "Ctrl+O" }), " editor  ·  ", _jsx(Text, { color: "cyan", bold: true, children: "Ctrl+C" }), " cancel"] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, minHeight: 6, children: [(state.contextInputValue || "(no extra context)")
+    return (_jsxs(Box, { width: columns, height: rows, flexDirection: "column", children: [_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "santree" }), _jsxs(Text, { dimColor: true, children: ["  ", "v", version] }), updateAvailable && latestVersion ? (_jsxs(Text, { color: "yellow", children: ["  ⬆ v", latestVersion, " available — `santree update`"] })) : null, CLAUDE_VERSION ? (_jsxs(Text, { dimColor: true, children: ["  ·  claude ", CLAUDE_VERSION] })) : null, claudeUpdateAvailable && latestClaudeVersion ? (_jsxs(Text, { color: "yellow", children: ["  ⬆ ", latestClaudeVersion] })) : null, state.refreshing ? _jsx(Text, { dimColor: true, children: "  ·  refreshing…" }) : null, state.actionMessage ? (_jsxs(Text, { color: "yellow", children: ["  ·  ", state.actionMessage] })) : null] }), _jsxs(Box, { paddingX: 1, children: [_jsx(Tab, { active: state.activeTab === "issues", label: `1 Issues (${state.flatIssues.length})`, mode: theme.mode }), _jsx(Text, { children: " " }), _jsx(Tab, { active: state.activeTab === "reviews", label: `2 Reviews (${state.flatReviews.length})`, mode: theme.mode })] }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: "cyan", flexDirection: "column", children: [state.overlay === "mode-select" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Select mode:" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "p" }), "  Plan"] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "i" }), "  Implement"] }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "ESC to cancel" })] }) })) : state.overlay === "context-input" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", paddingX: 2, width: Math.min(columns - 8, 100), children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Extra context for ", state.contextInputMode] }), _jsx(Text, { dimColor: true, children: "Optional \u2014 appended to the prompt before launching Claude" }), _jsx(Text, { children: " " }), state.contextInputPhase === "editing" ? (_jsxs(_Fragment, { children: [_jsx(MultilineTextArea, { value: state.contextInputValue, onChange: (v) => dispatch({ type: "CONTEXT_INPUT_CHANGE", value: v }), onSubmit: () => dispatch({ type: "CONTEXT_INPUT_REVIEW" }), onCancel: () => dispatch({ type: "CONTEXT_INPUT_DONE" }), width: Math.min(columns - 8, 100), height: 10, placeholder: "Type or paste extra context\u2026" }), _jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "cyan", bold: true, children: "Ctrl+D" }), " send  ·  ", _jsx(Text, { color: "cyan", bold: true, children: "Ctrl+O" }), " editor  ·  ", _jsx(Text, { color: "cyan", bold: true, children: "Ctrl+C" }), " cancel"] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, minHeight: 6, children: [(state.contextInputValue || "(no extra context)")
+                                                    .split("\n")
+                                                    .slice(0, 12)
+                                                    .map((line, i) => (_jsx(Text, { children: line || " " }, i))), state.contextInputValue.split("\n").length > 12 && (_jsxs(Text, { dimColor: true, children: ["\u2026+", state.contextInputValue.split("\n").length - 12, " more lines"] }))] }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Anything else to add?" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "y" }), " / ", _jsx(Text, { color: "green", bold: true, children: "Enter" }), "  launch   ", _jsx(Text, { color: "yellow", bold: true, children: "n" }), " / ", _jsx(Text, { color: "yellow", bold: true, children: "e" }), "  keep editing   ", _jsx(Text, { color: "red", bold: true, children: "ESC" }), "  cancel"] })] }))] }) })) : state.overlay === "base-select" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Select base branch:" }), _jsx(Text, { children: " " }), state.baseSelectOptions.map((branch, idx) => {
+                                    const selected = idx === state.baseSelectIndex;
+                                    const defaultBranch = getDefaultBranch();
+                                    const label = branch === defaultBranch ? `${branch} (default)` : branch;
+                                    return (_jsx(Text, { children: _jsxs(Text, { color: selected ? "cyan" : undefined, bold: selected, children: [selected ? "> " : "  ", label] }) }, branch));
+                                }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "j/k to navigate, Enter to select, ESC to cancel" })] }) })) : state.overlay === "confirm-delete" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, color: "red", children: "Remove worktree?" }), _jsx(Text, { children: " " }), _jsx(Text, { children: selectedIssue?.worktree?.branch ?? "" }), selectedIssue?.worktree?.dirty && (_jsx(Text, { color: "yellow", children: "Warning: worktree has uncommitted changes" })), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "red", bold: true, children: "y" }), "  Confirm"] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "n" }), "  Cancel"] })] }) })) : state.overlay === "diff" ? (_jsx(DiffOverlay, { width: innerWidth, height: contentHeight, ticketId: state.diffTicketId ?? "", baseBranch: state.diffBaseBranch ?? "", files: state.diffFiles, fileIndex: state.diffFileIndex, fileScrollOffset: state.diffFileScrollOffset, content: state.diffContent, contentScrollOffset: state.diffContentScrollOffset, loadingFiles: state.diffLoadingFiles, loadingContent: state.diffLoadingContent, error: state.diffError, selectionBg: theme.selectionBg, leftWidthOverride: diffLeftWidth ?? undefined })) : state.overlay === "confirm-setup" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Run setup script?" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: ".santree/init.sh" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "y" }), "  Run setup"] }), _jsxs(Text, { children: [_jsx(Text, { color: "yellow", bold: true, children: "n" }), "  Skip"] })] }) })) : (_jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: leftWidth, children: state.activeTab === "reviews" ? (_jsx(ReviewList, { flatReviews: state.flatReviews, selectedIndex: state.reviewSelectedIndex, scrollOffset: state.reviewListScrollOffset, height: contentHeight, width: leftWidth, selectionBg: theme.selectionBg })) : state.flatIssues.length === 0 ? (_jsx(Box, { width: leftWidth, height: contentHeight, justifyContent: "center", alignItems: "center", children: _jsx(Text, { color: "yellow", children: "No active issues" }) })) : (_jsx(IssueList, { groups: state.groups, flatIssues: state.flatIssues, selectedIndex: state.selectedIndex, scrollOffset: state.listScrollOffset, height: contentHeight, width: leftWidth, selectionBg: theme.selectionBg })) }), _jsx(Box, { flexDirection: "column", width: 3, children: Array.from({ length: contentHeight }).map((_, i) => (_jsx(Text, { dimColor: true, children: " │ " }, i))) }), _jsx(Box, { width: rightWidth, children: state.activeTab === "reviews" && state.creatingForTicket ? (_jsxs(Box, { flexDirection: "column", width: rightWidth, height: contentHeight, children: [_jsxs(Text, { color: "yellow", bold: true, children: ["Setting up worktree for ", state.creatingForTicket, "..."] }), state.creationLogs
                                             .split("\n")
-                                            .slice(0, 12)
-                                            .map((line, i) => (_jsx(Text, { children: line || " " }, i))), state.contextInputValue.split("\n").length > 12 && (_jsxs(Text, { dimColor: true, children: ["\u2026+", state.contextInputValue.split("\n").length - 12, " more lines"] }))] }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Anything else to add?" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "y" }), " / ", _jsx(Text, { color: "green", bold: true, children: "Enter" }), "  launch   ", _jsx(Text, { color: "yellow", bold: true, children: "n" }), " / ", _jsx(Text, { color: "yellow", bold: true, children: "e" }), "  keep editing   ", _jsx(Text, { color: "red", bold: true, children: "ESC" }), "  cancel"] })] }))] }) })) : state.overlay === "base-select" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Select base branch:" }), _jsx(Text, { children: " " }), state.baseSelectOptions.map((branch, idx) => {
-                            const selected = idx === state.baseSelectIndex;
-                            const defaultBranch = getDefaultBranch();
-                            const label = branch === defaultBranch ? `${branch} (default)` : branch;
-                            return (_jsx(Text, { children: _jsxs(Text, { color: selected ? "cyan" : undefined, bold: selected, children: [selected ? "> " : "  ", label] }) }, branch));
-                        }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "j/k to navigate, Enter to select, ESC to cancel" })] }) })) : state.overlay === "confirm-delete" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, color: "red", children: "Remove worktree?" }), _jsx(Text, { children: " " }), _jsx(Text, { children: selectedIssue?.worktree?.branch ?? "" }), selectedIssue?.worktree?.dirty && (_jsx(Text, { color: "yellow", children: "Warning: worktree has uncommitted changes" })), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "red", bold: true, children: "y" }), "  Confirm"] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "n" }), "  Cancel"] })] }) })) : state.overlay === "confirm-setup" ? (_jsx(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 3, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Run setup script?" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: ".santree/init.sh" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "y" }), "  Run setup"] }), _jsxs(Text, { children: [_jsx(Text, { color: "yellow", bold: true, children: "n" }), "  Skip"] })] }) })) : (_jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { width: leftWidth, children: state.activeTab === "reviews" ? (_jsx(ReviewList, { flatReviews: state.flatReviews, selectedIndex: state.reviewSelectedIndex, scrollOffset: state.reviewListScrollOffset, height: contentHeight, width: leftWidth })) : state.flatIssues.length === 0 ? (_jsx(Box, { width: leftWidth, height: contentHeight, justifyContent: "center", alignItems: "center", children: _jsx(Text, { color: "yellow", children: "No active issues" }) })) : (_jsx(IssueList, { groups: state.groups, flatIssues: state.flatIssues, selectedIndex: state.selectedIndex, scrollOffset: state.listScrollOffset, height: contentHeight, width: leftWidth, creatingForTicket: state.creatingForTicket, deletingForTicket: state.deletingForTicket })) }), _jsx(Box, { flexDirection: "column", width: 3, children: Array.from({ length: contentHeight }).map((_, i) => (_jsx(Text, { dimColor: true, children: " │ " }, i))) }), _jsx(Box, { width: rightWidth, children: state.activeTab === "reviews" && state.creatingForTicket ? (_jsxs(Box, { flexDirection: "column", width: rightWidth, height: contentHeight, children: [_jsxs(Text, { color: "yellow", bold: true, children: ["Setting up worktree for ", state.creatingForTicket, "..."] }), state.creationLogs
-                                    .split("\n")
-                                    .slice(-(contentHeight - 1))
-                                    .map((line, i) => (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: line }) }, i)))] })) : state.activeTab === "reviews" ? (_jsx(ReviewDetailPanel, { item: selectedReview, scrollOffset: state.reviewDetailScrollOffset, height: contentHeight, width: rightWidth })) : state.overlay === "commit" ? (_jsx(CommitOverlay, { width: rightWidth, height: contentHeight, branch: state.commitBranch, ticketId: state.commitTicketId, gitStatus: state.commitGitStatus, phase: state.commitPhase, message: state.commitMessage, error: state.commitError, dispatch: dispatch, onSubmit: handleCommitSubmit })) : state.overlay === "pr-create" ? (_jsx(PrCreateOverlay, { width: rightWidth, height: contentHeight, branch: state.prCreateBranch, ticketId: state.prCreateTicketId, phase: state.prCreatePhase, error: state.prCreateError, url: state.prCreateUrl, body: state.prCreateBody, title: state.prCreateTitle, dispatch: dispatch })) : (_jsx(DetailPanel, { issue: selectedIssue, scrollOffset: state.detailScrollOffset, height: contentHeight, width: rightWidth, creatingForTicket: state.creatingForTicket, creationLogs: state.creationLogs })) })] }))] }));
+                                            .slice(-(contentHeight - 1))
+                                            .map((line, i) => (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: line }) }, i)))] })) : state.activeTab === "reviews" ? (_jsx(ReviewDetailPanel, { item: selectedReview, scrollOffset: state.reviewDetailScrollOffset, height: contentHeight, width: rightWidth })) : state.overlay === "commit" ? (_jsx(CommitOverlay, { width: rightWidth, height: contentHeight, branch: state.commitBranch, ticketId: state.commitTicketId, gitStatus: state.commitGitStatus, phase: state.commitPhase, message: state.commitMessage, error: state.commitError, dispatch: dispatch, onSubmit: handleCommitSubmit })) : state.overlay === "pr-create" ? (_jsx(PrCreateOverlay, { width: rightWidth, height: contentHeight, branch: state.prCreateBranch, ticketId: state.prCreateTicketId, phase: state.prCreatePhase, error: state.prCreateError, url: state.prCreateUrl, body: state.prCreateBody, title: state.prCreateTitle, dispatch: dispatch })) : (_jsx(DetailPanel, { issue: selectedIssue, scrollOffset: state.detailScrollOffset, height: contentHeight, width: rightWidth, creatingForTicket: state.creatingForTicket, creationLogs: state.creationLogs })) })] })), _jsxs(Box, { children: [_jsx(Box, { width: leftWidth + separatorWidth, paddingX: 1, children: _jsx(CommandBar, { showWorkspace: hasWorkspaceFile, mode: state.overlay === "diff" ? "diff" : "default" }) }), _jsx(Box, { width: rightWidth, children: _jsx(ActionRow, { activeTab: state.activeTab, selectedIssue: selectedIssue, selectedReview: selectedReview, overlay: state.overlay }) })] })] })] }));
+}
+/**
+ * Renders the per-issue action key hints (Resume / Editor / View diff / …)
+ * lifted out of the detail panels so they sit on the same row as the global
+ * command bar. Empty when nothing is selected.
+ */
+function ActionRow({ activeTab, selectedIssue, selectedReview, overlay, }) {
+    // During the diff overlay, none of the per-issue actions apply (View diff
+    // is what got us here, Commit/PR/etc. need the detail panel context). Keep
+    // the row blank so the diff-specific CommandBar reads cleanly.
+    if (overlay === "diff")
+        return _jsx(Text, { children: " " });
+    const items = activeTab === "reviews"
+        ? selectedReview
+            ? buildReviewActions(selectedReview)
+            : []
+        : selectedIssue
+            ? buildIssueActions(selectedIssue)
+            : [];
+    if (items.length === 0)
+        return _jsx(Text, { children: " " });
+    return (_jsx(Text, { children: items.map((item, j) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: item.color, bold: true, children: item.key }), _jsxs(Text, { color: item.color === "gray" ? "gray" : undefined, children: [" ", item.label] })] }, j))) }));
 }