nugit-cli 0.0.1 → 0.1.0

package/src/stack-view/ink-app.js

@@ -1,56 +1,293 @@
-import React, { useMemo, useState } from "react";
-import { Box, Text, useApp, useInput } from "ink";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useApp, useInput, useStdin, useStdout } from "ink";
 import chalk from "chalk";
 import { openUrl } from "./open-url.js";
+import { githubGetGitTree, githubGetBlobText } from "../github-rest.js";
+import { buildAsciiTreeRows } from "./tree-ascii.js";
+import { buildMergedPreviewFromPatch } from "./patch-preview-merge.js";
+import { buildStackBranchGraphLines } from "./stack-branch-graph.js";
+import { markdownToPlainLines } from "./view-md-plain.js";
+import {
+  parseSgrMouse,
+  enableSgrMouse,
+  disableSgrMouse,
+  isWheelUp,
+  isWheelDown
+} from "./sgr-mouse.js";
 
 /** @returns {{ next: null | Record<string, unknown> }} */
 export function createExitPayload() {
   return { next: null };
 }
 
+const TAB_COUNT = 5;
+const MAX_PREVIEW_CHARS = 800_000;
+const MAX_PREVIEW_LINES = 12_000;
+const SPIN_FRAMES = ["|", "/", "-", "\\"];
+
+/** Shell: single full-screen workspace tabs (lazyql-style) */
+const SHELL_TAB_LABELS = ["Tree", "Description", "Conversation", "Review"];
+const SHELL_TAB_COUNT = 4;
+
+/**
+ * Line change totals for a stack row (GitHub pull or sum of file stats).
+ * @param {{ pull?: unknown, files?: unknown[] }} r
+ */
+function prAddDelTotals(r) {
+  const pull =
+    r?.pull && typeof r.pull === "object"
+      ? /** @type {Record<string, unknown>} */ (r.pull)
+      : null;
+  let add = pull != null ? Number(pull.additions) : NaN;
+  let del = pull != null ? Number(pull.deletions) : NaN;
+  if (!Number.isFinite(add)) add = 0;
+  if (!Number.isFinite(del)) del = 0;
+  if (add === 0 && del === 0 && Array.isArray(r?.files) && r.files.length > 0) {
+    for (const f of r.files) {
+      if (!f || typeof f !== "object") continue;
+      const o = /** @type {Record<string, unknown>} */ (f);
+      add += Number(o.additions) || 0;
+      del += Number(o.deletions) || 0;
+    }
+  }
+  return { add, del };
+}
+
+/**
+ * Tree tab layout: never show patch + file preview at once — preview carries diff styling.
+ * @param {number} bodyMax
+ * @param {boolean} previewOpen
+ * @param {boolean} showPatchPane unified diff below tree (only when preview closed)
+ */
+function computeShellTreePaneHeights(bodyMax, previewOpen, showPatchPane) {
+  if (previewOpen) {
+    const treeBlockH = Math.max(3, Math.floor(bodyMax * 0.34));
+    const previewH = Math.max(4, bodyMax - treeBlockH - 3);
+    return { treeBlockH, patchH: 0, previewH };
+  }
+  if (showPatchPane) {
+    const treeBlockH = Math.max(3, Math.floor(bodyMax * 0.36));
+    const patchH = Math.max(4, bodyMax - treeBlockH - 3);
+    return { treeBlockH, patchH, previewH: 0 };
+  }
+  return { treeBlockH: Math.max(2, bodyMax - 1), patchH: 0, previewH: 0 };
+}
+
+/**
+ * @param {string} s
+ * @param {number} w
+ */
+function truncVis(s, w) {
+  if (w < 4) return "";
+  if (s.length <= w) return s;
+  return s.slice(0, w - 1) + "\u2026";
+}
+
+/**
+ * @template T
+ * @param {T[]} items
+ * @param {number} cursor
+ * @param {number} maxVisible
+ */
+function sliceViewport(items, cursor, maxVisible) {
+  const n = items.length;
+  if (n === 0) return { slice: [], start: 0 };
+  if (n <= maxVisible) return { slice: items, start: 0 };
+  const half = Math.floor(maxVisible / 2);
+  const start = Math.max(0, Math.min(cursor - half, n - maxVisible));
+  return { slice: items.slice(start, start + maxVisible), start };
+}
+
 /**
  * @param {object} props
  * @param {Awaited<ReturnType<import('./fetch-pr-data.js').fetchStackPrDetails>>} props.rows
  * @param {{ next: null | Record<string, unknown> }} props.exitPayload
+ * @param {string} [props.viewTitle]
+ * @param {string} [props.browseOwner]
+ * @param {string} [props.browseRepo]
+ * @param {string} [props.repoFullName]
+ * @param {boolean} [props.shellMode] multi-page layout with sidebar (nugit view)
+ * @param {unknown[] | null} [props.alternateStacks] when >1, Backspace from PR-pick opens stack picker
  */
-export function StackInkApp({ rows, exitPayload }) {
+export function StackInkApp({
+  rows: stackRows,
+  exitPayload,
+  viewTitle = "nugit view",
+  browseOwner = "",
+  browseRepo = "",
+  repoFullName = "",
+  shellMode = false,
+  alternateStacks = null
+}) {
+  const canPickAlternateStack = Array.isArray(alternateStacks) && alternateStacks.length > 1;
   const { exit } = useApp();
-  const [prIndex, setPrIndex] = useState(0);
+  const { stdout } = useStdout();
+  const { stdin } = useStdin();
+  const [termCols, setTermCols] = useState(() => stdout?.columns || 80);
+  const [termRows, setTermRows] = useState(() => stdout?.rows || 24);
+  const [pulse, setPulse] = useState(0);
+
+  const cols = Math.max(40, termCols || 80);
+  const ttyRows = Math.max(16, termRows || 24);
+
+  useEffect(() => {
+    const upd = () => {
+      setTermCols(stdout?.columns || 80);
+      setTermRows(stdout?.rows || 24);
+    };
+    upd();
+    stdout?.on?.("resize", upd);
+    return () => stdout?.off?.("resize", upd);
+  }, [stdout]);
+
+  useEffect(() => {
+    const t = setInterval(() => setPulse((p) => (p + 1) % 256), 350);
+    return () => clearInterval(t);
+  }, []);
+
+  useEffect(() => {
+    if (!shellMode) {
+      enableSgrMouse(stdout);
+      return () => disableSgrMouse(stdout);
+    }
+    return undefined;
+  }, [stdout, shellMode]);
+
+  /** @type {React.MutableRefObject<{ bodyStartR: number, nLad: number, ladderStart: number } | null>} */
+  const layoutRef = useRef(null);
+  /** @type {React.MutableRefObject<Array<{ r1: number, r2: number, kind: string, [k: string]: unknown }>>} */
+  const regionsRef = useRef([]);
+  /** @type {React.MutableRefObject<{ t: number, idx: number } | null>} */
+  const lastTreeClickRef = useRef(null);
+
+  const [showFullHelp, setShowFullHelp] = useState(false);
+  /** Shell: main panel tab (tree first — diffs inline when cursor is on a changed file) */
+  const [shellMainTab, setShellMainTab] = useState(0);
+  /** Shell: keyboard focus on sidebar PR ladder; true on entry so j/k adjust PRs before the file tree */
+  const [shellStackFocus, setShellStackFocus] = useState(() => shellMode);
+
+  /** Shell: -1 = no PR loaded yet (tree waits); non-shell starts at 0 */
+  const [prIndex, setPrIndex] = useState(() => (shellMode ? -1 : 0));
   const [tab, setTab] = useState(0);
   const [lineIndex, setLineIndex] = useState(0);
   const [fileIndex, setFileIndex] = useState(0);
   const [filePatchOffset, setFilePatchOffset] = useState(0);
+  const [patchCursorLine, setPatchCursorLine] = useState(0);
   const [fileCommentIndex, setFileCommentIndex] = useState(0);
 
-  const len = rows?.length ?? 0;
-  const safePr = len === 0 ? 0 : Math.min(prIndex, len - 1);
-  const row = len ? rows[safePr] : null;
+  const [treeLines, setTreeLines] = useState(/** @type {{ path: string, type: string }[]} */ ([]));
+  const [treeLoading, setTreeLoading] = useState(false);
+  const [treeError, setTreeError] = useState(/** @type {string | null} */ (null));
+  const [treeLineIndex, setTreeLineIndex] = useState(0);
+  const [treePreview, setTreePreview] = useState("");
+  const [treePreviewPath, setTreePreviewPath] = useState("");
+  const [treePreviewScroll, setTreePreviewScroll] = useState(0);
+
+  const asciiTreeRows = useMemo(() => buildAsciiTreeRows(treeLines), [treeLines]);
+  const treePreviewLines = useMemo(() => (treePreview ? treePreview.split("\n") : []), [treePreview]);
+
+  useEffect(() => {
+    setTreeLineIndex((i) => Math.min(i, Math.max(0, asciiTreeRows.length - 1)));
+  }, [asciiTreeRows.length]);
+
+  const len = stackRows?.length ?? 0;
+  const hasPrPick = !shellMode || prIndex >= 0;
+  const safePr = len === 0 || !hasPrPick ? 0 : Math.min(prIndex, len - 1);
+  const row = len && hasPrPick ? stackRows[safePr] : null;
   const issueList = row?.issueComments || [];
   const reviewList = row?.reviewComments || [];
   const fileList = row?.files || [];
+  const headSha =
+    row?.pull?.head && typeof row.pull.head === "object"
+      ? String(/** @type {Record<string, unknown>} */ (row.pull.head).sha || "")
+      : "";
 
   const listLen = useMemo(() => {
-    if (tab === 1) {
-      return issueList.length;
-    }
-    if (tab === 2) {
-      return reviewList.length;
-    }
-    if (tab === 3) {
-      return fileList.length;
+    if (shellMode) {
+      if (shellMainTab === 0) {
+        return Math.max(1, asciiTreeRows.length);
+      }
+      if (shellMainTab === 1) {
+        const bodyRaw = row?.pull && typeof row.pull.body === "string" ? row.pull.body : "";
+        const plain = markdownToPlainLines(bodyRaw);
+        const lines = plain ? plain.split("\n").filter((ln) => ln.length > 0) : ["(no description)"];
+        return Math.max(1, lines.length);
+      }
+      if (shellMainTab === 2) {
+        return issueList.length;
+      }
+      if (shellMainTab === 3) {
+        return reviewList.length;
+      }
     }
+    if (tab === 1) return issueList.length;
+    if (tab === 2) return reviewList.length;
+    if (tab === 3) return fileList.length;
+    if (tab === 4) return asciiTreeRows.length;
     return 0;
-  }, [tab, issueList.length, reviewList.length, fileList.length]);
+  }, [
+    shellMode,
+    shellMainTab,
+    tab,
+    issueList.length,
+    reviewList.length,
+    fileList.length,
+    asciiTreeRows.length,
+    row
+  ]);
 
-  const safeLine = Math.min(lineIndex, Math.max(0, listLen - 1));
+  const treeSafeLine = Math.min(treeLineIndex, Math.max(0, asciiTreeRows.length - 1));
+  const safeLine = shellMode
+    ? shellMainTab === 0
+      ? treeSafeLine
+      : Math.min(lineIndex, Math.max(0, listLen - 1))
+    : tab === 4
+      ? treeSafeLine
+      : Math.min(lineIndex, Math.max(0, listLen - 1));
   const safeFile = fileList.length === 0 ? 0 : Math.min(fileIndex, fileList.length - 1);
   const selectedFile = fileList[safeFile] || null;
   const patchLines =
     selectedFile && typeof selectedFile.patch === "string"
       ? String(selectedFile.patch).split("\n")
       : [];
-  const patchPageSize = 12;
-  const maxPatchOffset = Math.max(0, patchLines.length - patchPageSize);
+
+  const browsePreviewOpen = !!(
+    treePreviewPath &&
+    (shellMode ? shellMainTab === 0 : tab === 4)
+  );
+
+  const pathToChangedFile = useMemo(() => {
+    /** @type {Map<string, Record<string, unknown>>} */
+    const m = new Map();
+    for (const f of fileList) {
+      const n = String(f?.filename || "");
+      if (n) m.set(n, f);
+    }
+    return m;
+  }, [fileList]);
+
+  const mergedPreviewRows = useMemo(() => {
+    if (!browsePreviewOpen || !treePreviewPath || !treePreview) {
+      return null;
+    }
+    const fe = fileList.find((f) => String(f?.filename || "") === treePreviewPath);
+    if (!fe || typeof fe.patch !== "string" || !String(fe.patch).trim()) {
+      return null;
+    }
+    const m = buildMergedPreviewFromPatch(treePreview, String(fe.patch), treePreviewPath);
+    return m && m.length > 0 ? m : null;
+  }, [browsePreviewOpen, treePreviewPath, treePreview, fileList]);
+
+  const previewLineCount = mergedPreviewRows?.length ?? treePreviewLines.length;
+
+  useEffect(() => {
+    if (!browsePreviewOpen) {
+      return;
+    }
+    const maxScroll = Math.max(0, previewLineCount - 1);
+    setTreePreviewScroll((s) => Math.min(s, maxScroll));
+  }, [browsePreviewOpen, treePreviewPath, previewLineCount]);
+
   const fileComments = useMemo(() => {
     if (!selectedFile) return [];
     const fileName = String(selectedFile.filename || "");
@@ -60,11 +297,208 @@ export function StackInkApp({ rows, exitPayload }) {
     ? Math.min(fileCommentIndex, fileComments.length - 1)
     : 0;
 
-  /**
-   * Best-effort patch scroll target for a code line.
-   * @param {string[]} lines
-   * @param {number} lineNo
-   */
+  /** Layout: keep total output within terminal height */
+  const sidebarW = shellMode ? 28 : 0;
+  const innerW = shellMode
+    ? Math.max(24, cols - 2 - sidebarW - 1 - 1)
+    : Math.max(20, cols - 2);
+
+  useEffect(() => {
+    if (!shellMode) {
+      return;
+    }
+    if (shellMainTab === 0) {
+      setTab(4);
+    } else if (shellMainTab === 2) {
+      setTab(1);
+    } else if (shellMainTab === 3) {
+      setTab(2);
+    } else {
+      setTab(0);
+    }
+  }, [shellMode, shellMainTab]);
+
+  useEffect(() => {
+    if (!shellMode || shellMainTab !== 0) {
+      setShellStackFocus(false);
+    }
+  }, [shellMode, shellMainTab]);
+
+  useEffect(() => {
+    if (shellMode && prIndex < 0 && shellMainTab !== 0) {
+      setShellMainTab(0);
+    }
+  }, [shellMode, prIndex, shellMainTab]);
+
+  useEffect(() => {
+    if (!shellMode || shellMainTab !== 0) {
+      return;
+    }
+    const ent = asciiTreeRows[treeSafeLine];
+    const p = ent?.path;
+    if (!p) {
+      return;
+    }
+    const idx = fileList.findIndex((f) => String(f?.filename || "") === p);
+    if (idx >= 0) {
+      setFileIndex(idx);
+    }
+  }, [shellMode, shellMainTab, treeSafeLine, asciiTreeRows, fileList]);
+
+  const exitRef = useRef(exit);
+  exitRef.current = exit;
+  const exitPayloadRef = useRef(exitPayload);
+  exitPayloadRef.current = exitPayload;
+  /** @type {React.MutableRefObject<{ canScrollPatch: boolean, maxPatchOffset: number, step: number, canScrollMergedPreview: boolean, mergedMaxScroll: number, mergedStep: number }>} */
+  const patchScrollRef = useRef({
+    canScrollPatch: false,
+    maxPatchOffset: 0,
+    step: 3,
+    canScrollMergedPreview: false,
+    mergedMaxScroll: 0,
+    mergedStep: 3
+  });
+
+  const SIDEBAR_GRAPH_MAX = 7;
+
+  /** Shell: title + tab row + rule + gap; footer: rule + up to 2 hint rows */
+  const reservedTop = shellMode ? 5 : 3;
+  const reservedHelp = shellMode ? 5 : 2;
+  const ladderMaxForDisplay = shellMode
+    ? Math.min(len, Math.max(2, ttyRows - (18 + SIDEBAR_GRAPH_MAX)))
+    : Math.min(len, Math.max(2, Math.min(7, Math.floor((ttyRows - 10) / 3))));
+  const ladderMaxReserved = shellMode ? 0 : ladderMaxForDisplay;
+  const bodyMax = Math.max(
+    6,
+    ttyRows - reservedTop - reservedHelp - ladderMaxReserved - 2
+  );
+
+  const selPathForPatch = asciiTreeRows[treeSafeLine]?.path;
+  const hasPatchForShellTree =
+    !!selPathForPatch &&
+    selPathForPatch === String(selectedFile?.filename || "") &&
+    patchLines.length > 0;
+  const shellTreePanes =
+    shellMode && shellMainTab === 0
+      ? computeShellTreePaneHeights(
+          bodyMax,
+          browsePreviewOpen,
+          hasPatchForShellTree && !browsePreviewOpen
+        )
+      : null;
+
+  let patchPageSize = 12;
+  if (tab === 3) {
+    patchPageSize = Math.max(4, Math.min(20, bodyMax - 8));
+  } else if (shellTreePanes && shellTreePanes.patchH > 0) {
+    patchPageSize = Math.max(4, shellTreePanes.patchH);
+  } else if (shellMode && shellMainTab === 0) {
+    patchPageSize = Math.max(4, Math.min(20, bodyMax - 8));
+  }
+  const maxPatchOffset = Math.max(0, patchLines.length - patchPageSize);
+
+  const canScrollPatchShell =
+    shellMode &&
+    shellMainTab === 0 &&
+    hasPatchForShellTree &&
+    !browsePreviewOpen;
+  const previewHForMergedScroll = shellTreePanes?.previewH ?? 4;
+  const mergedLen = mergedPreviewRows?.length ?? 0;
+  const mergedMaxScroll = Math.max(0, mergedLen - previewHForMergedScroll);
+  const canScrollMergedPreview =
+    shellMode && shellMainTab === 0 && browsePreviewOpen && mergedLen > 0;
+  patchScrollRef.current = {
+    canScrollPatch: canScrollPatchShell,
+    maxPatchOffset,
+    step: Math.max(3, Math.min(10, patchPageSize)),
+    canScrollMergedPreview,
+    mergedMaxScroll,
+    mergedStep: Math.max(2, Math.min(8, previewHForMergedScroll))
+  };
+
+  useEffect(() => {
+    if (!shellMode || !stdin) {
+      return undefined;
+    }
+    const onData = (buf) => {
+      const s = buf.toString();
+      if (/\x1b\[15~/.test(s)) {
+        exitPayloadRef.current.next = { type: "refresh" };
+        exitRef.current();
+        return;
+      }
+      const r = patchScrollRef.current;
+      if (/\x1b\[5~/.test(s)) {
+        if (r.canScrollMergedPreview) {
+          setTreePreviewScroll((o) => Math.max(0, o - r.mergedStep));
+        } else if (r.canScrollPatch) {
+          setFilePatchOffset((o) => Math.max(0, o - r.step));
+        }
+        return;
+      }
+      if (/\x1b\[6~/.test(s)) {
+        if (r.canScrollMergedPreview) {
+          setTreePreviewScroll((o) => Math.min(r.mergedMaxScroll, o + r.mergedStep));
+        } else if (r.canScrollPatch) {
+          setFilePatchOffset((o) => Math.min(r.maxPatchOffset, o + r.step));
+        }
+      }
+    };
+    stdin.on("data", onData);
+    return () => {
+      stdin.off("data", onData);
+    };
+  }, [shellMode, stdin]);
+
+  const treeViewActive = shellMode ? shellMainTab === 0 : tab === 4;
+
+  useEffect(() => {
+    if (!treeViewActive || !browseOwner || !browseRepo || !headSha) {
+      return;
+    }
+    let cancelled = false;
+    setTreeLoading(true);
+    setTreeError(null);
+    setTreeLines([]);
+    setTreePreview("");
+    setTreePreviewPath("");
+    setTreePreviewScroll(0);
+    githubGetGitTree(browseOwner, browseRepo, headSha, true)
+      .then((data) => {
+        if (cancelled) return;
+        const tree = Array.isArray(data.tree) ? data.tree : [];
+        if (tree.length > 2500) {
+          setTreeError(`Large tree (${tree.length} entries); showing first 2500`);
+        }
+        const cap = tree.slice(0, 2500);
+        const lines = cap
+          .filter((t) => t && typeof t === "object" && typeof t.path === "string")
+          .map((t) => {
+            const o = /** @type {Record<string, unknown>} */ (t);
+            return { path: String(o.path), type: String(o.type || "blob") };
+          })
+          .sort((a, b) => a.path.localeCompare(b.path));
+        setTreeLines(lines);
+        setTreeLoading(false);
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setTreeError(String(/** @type {Error} */ (e)?.message || e));
+          setTreeLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [treeViewActive, browseOwner, browseRepo, headSha, safePr]);
+
+  useEffect(() => {
+    setTreeLineIndex(0);
+    setTreePreview("");
+    setTreePreviewPath("");
+    setTreePreviewScroll(0);
+  }, [tab, treeViewActive, headSha]);
+
   const patchOffsetForLine = (lines, lineNo) => {
     if (!lineNo || !Number.isInteger(lineNo) || lineNo < 1) return 0;
     let newLine = 0;
@@ -85,8 +519,319 @@ export function StackInkApp({ rows, exitPayload }) {
     return 0;
   };
 
+  const closeBrowsePreview = () => {
+    setTreePreview("");
+    setTreePreviewPath("");
+    setTreePreviewScroll(0);
+  };
+
+  const loadBrowseBlob = (blobPath) => {
+    if (!browseOwner || !browseRepo || !headSha || !blobPath) {
+      return;
+    }
+    githubGetBlobText(browseOwner, browseRepo, blobPath, headSha).then((text) => {
+      let t = text || "(empty or unreadable)";
+      if (t.length > MAX_PREVIEW_CHARS) {
+        t = t.slice(0, MAX_PREVIEW_CHARS) + "\n\u2026 [truncated at char limit]";
+      }
+      const linesArr = t.split("\n");
+      if (linesArr.length > MAX_PREVIEW_LINES) {
+        t = linesArr.slice(0, MAX_PREVIEW_LINES).join("\n") + "\n\u2026 [truncated at line limit]";
+      }
+      setTreePreviewPath(blobPath);
+      setTreePreview(t);
+      setTreePreviewScroll(0);
+    });
+  };
+
   useInput((input, key) => {
+    if (shellMode && parseSgrMouse(input)) {
+      return;
+    }
+    const mouse = parseSgrMouse(input);
+    if (mouse) {
+      const L = layoutRef.current;
+      if (!L) {
+        return;
+      }
+      const { row, col, button, release } = mouse;
+      if (col < 2) {
+        return;
+      }
+
+      if (isWheelUp(button) || isWheelDown(button)) {
+        const down = isWheelDown(button);
+        const step = down ? 3 : -3;
+        const hit = regionsRef.current.find((z) => row >= z.r1 && row <= z.r2);
+        if (hit?.kind === "preview" && L.browsePreviewOpen && L.treePreviewLinesLen) {
+          const pv = Math.max(2, L.browsePreviewH || 2);
+          const maxS = Math.max(0, L.treePreviewLinesLen - pv);
+          setTreePreviewScroll((s) => Math.max(0, Math.min(s + step, maxS)));
+          return;
+        }
+        if (hit?.kind === "patch") {
+          setFilePatchOffset((i) =>
+            Math.max(0, Math.min(i + (down ? 3 : -3), L.maxPatchOffset || 0))
+          );
+          return;
+        }
+        if (hit?.kind === "issueLine" || hit?.kind === "reviewLine") {
+          if (down) {
+            setLineIndex((i) => Math.min(i + 1, Math.max(0, L.listLen - 1)));
+          } else {
+            setLineIndex((i) => Math.max(i - 1, 0));
+          }
+          return;
+        }
+        if (hit?.kind === "fileLine") {
+          if (down) {
+            setFileIndex((i) => Math.min(i + 1, Math.max(0, L.fileListLen - 1)));
+            setFilePatchOffset(0); setPatchCursorLine(0);
+            setFileCommentIndex(0);
+          } else {
+            setFileIndex((i) => Math.max(i - 1, 0));
+            setFilePatchOffset(0); setPatchCursorLine(0);
+            setFileCommentIndex(0);
+          }
+          return;
+        }
+        if (
+          hit?.kind === "treeLine" &&
+          L.treeLen > 0 &&
+          ((L.tab === 4 && !L.browsePreviewOpen) ||
+            (L.shellMainTab === 0 && L.shellMode))
+        ) {
+          if (L.shellMode && L.shellMainTab === 0 && L.shellStackFocus && L.len > 0) {
+            if (down) {
+              setPrIndex((i) => (i < 0 ? 0 : Math.min(i + 1, L.len - 1)));
+            } else {
+              setPrIndex((i) => (i <= 0 ? -1 : i - 1));
+            }
+            setTreeLineIndex(0);
+            setFilePatchOffset(0); setPatchCursorLine(0);
+            return;
+          }
+          if (L.shellMode && L.shellMainTab === 0 && L.shellStackFocus) {
+            return;
+          }
+          if (down) {
+            setTreeLineIndex((i) => Math.min(i + 1, Math.max(0, L.treeLen - 1)));
+          } else {
+            setTreeLineIndex((i) => Math.max(i - 1, 0));
+          }
+          return;
+        }
+        if (L.tab === 0 && L.len > 0) {
+          if (down) {
+            setPrIndex((i) => Math.min(i + 1, L.len - 1));
+          } else {
+            setPrIndex((i) => Math.max(i - 1, 0));
+          }
+          return;
+        }
+        if ((L.tab === 1 || L.tab === 2) && L.listLen > 0) {
+          if (down) {
+            setLineIndex((i) => Math.min(i + 1, Math.max(0, L.listLen - 1)));
+          } else {
+            setLineIndex((i) => Math.max(i - 1, 0));
+          }
+          return;
+        }
+        if (L.tab === 3) {
+          setFilePatchOffset((i) =>
+            Math.max(0, Math.min(i + (down ? 3 : -3), L.maxPatchOffset || 0))
+          );
+          return;
+        }
+        if (L.tab === 4 && L.browsePreviewOpen && L.treePreviewLinesLen) {
+          const pv = Math.max(2, L.browsePreviewH || 2);
+          const maxS = Math.max(0, L.treePreviewLinesLen - pv);
+          setTreePreviewScroll((s) => Math.max(0, Math.min(s + step, maxS)));
+          return;
+        }
+        if (L.tab === 4 && L.treeLen > 0) {
+          if (down) {
+            setTreeLineIndex((i) => Math.min(i + 1, L.treeLen - 1));
+          } else {
+            setTreeLineIndex((i) => Math.max(i - 1, 0));
+          }
+        }
+        return;
+      }
+
+      if (release) {
+        return;
+      }
+      const rightish = (button & 3) === 2 || button === 34;
+      if (rightish && L.browsePreviewOpen) {
+        closeBrowsePreview();
+        return;
+      }
+
+      const nLad = L.nLad;
+      if (row >= 3 && row <= 2 + nLad) {
+        setPrIndex(L.ladderStart + (row - 3));
+        return;
+      }
+
+      for (const z of regionsRef.current) {
+        if (row < z.r1 || row > z.r2) {
+          continue;
+        }
+        if (z.kind === "issueLine") {
+          setLineIndex(/** @type {number} */ (z.index));
+          return;
+        }
+        if (z.kind === "reviewLine") {
+          setLineIndex(/** @type {number} */ (z.index));
+          return;
+        }
+        if (z.kind === "fileLine") {
+          setFileIndex(/** @type {number} */ (z.index));
+          setFilePatchOffset(0); setPatchCursorLine(0);
+          setFileCommentIndex(0);
+          return;
+        }
+        if (z.kind === "treeLine") {
+          const idx = /** @type {number} */ (z.index);
+          const p = /** @type {string | null | undefined} */ (z.path);
+          setTreeLineIndex(idx);
+          const now = Date.now();
+          const prev = lastTreeClickRef.current;
+          const dbl = prev && prev.idx === idx && now - prev.t < 500;
+          lastTreeClickRef.current = { t: now, idx };
+          if (dbl && p) {
+            loadBrowseBlob(p);
+          }
+          return;
+        }
+        if (z.kind === "preview" || z.kind === "patch") {
+          return;
+        }
+      }
+      return;
+    }
+
+    const rScroll = patchScrollRef.current;
+    if (shellMode && shellMainTab === 0 && rScroll.canScrollMergedPreview) {
+      if (key.pageDown) {
+        setTreePreviewScroll((i) => Math.min(i + rScroll.mergedStep, rScroll.mergedMaxScroll));
+        return;
+      }
+      if (key.pageUp) {
+        setTreePreviewScroll((i) => Math.max(i - rScroll.mergedStep, 0));
+        return;
+      }
+    }
+    const shellPatchScroll =
+      shellMode &&
+      shellMainTab === 0 &&
+      asciiTreeRows[treeSafeLine]?.path === String(selectedFile?.filename || "") &&
+      patchLines.length > 0 &&
+      !browsePreviewOpen;
+    if (shellPatchScroll) {
+      if (key.pageDown) {
+        const { step, maxPatchOffset: maxO } = patchScrollRef.current;
+        setFilePatchOffset((i) => Math.min(i + step, maxO));
+        setPatchCursorLine((c) => Math.min(c + step, patchLines.length - 1));
+        return;
+      }
+      if (key.pageUp) {
+        const { step } = patchScrollRef.current;
+        setFilePatchOffset((i) => Math.max(i - step, 0));
+        setPatchCursorLine((c) => Math.max(c - step, 0));
+        return;
+      }
+    }
+
+    if (input === "?") {
+      setShowFullHelp((v) => !v);
+      return;
+    }
+
+    if (input === "C" && shellPatchScroll && row && selectedFile && !row.error) {
+      exitPayload.next = {
+        type: "pull_review_line_comment",
+        prNumber: row.entry.pr_number,
+        path: String(selectedFile.filename || ""),
+        patchLineIndex: patchCursorLine,
+        commitId: headSha
+      };
+      exit();
+      return;
+    }
+
+    const backKey = key.backspace || key.delete || input === "\x7f" || input === "\b";
+    if (backKey) {
+      if (browsePreviewOpen) {
+        closeBrowsePreview();
+        return;
+      }
+      if (shellMode && shellStackFocus && canPickAlternateStack) {
+        exitPayload.next = { type: "pick_stack" };
+        exit();
+        return;
+      }
+      if (shellMode && shellStackFocus) {
+        setShellStackFocus(false);
+        return;
+      }
+      if (shellMode && shellMainTab === 0) {
+        setShellStackFocus(true);
+        return;
+      }
+    }
+
+    if ((key.return || input === " ") && shellMode && shellStackFocus) {
+      if (prIndex < 0 && len > 0) {
+        setPrIndex(0);
+        return;
+      }
+      setShellStackFocus(false);
+      return;
+    }
+
+    if (shellMode && /^[1-9]$/.test(input) && len > 0) {
+      const n = Number.parseInt(input, 10) - 1;
+      if (n < len) {
+        setShellStackFocus(false);
+        setPrIndex(n);
+        setShellMainTab(0);
+        setLineIndex(0);
+        setTreeLineIndex(0);
+        setFilePatchOffset(0); setPatchCursorLine(0);
+        return;
+      }
+    }
+
+    if (shellMode && input === "[" && len > 0) {
+      setShellStackFocus(false);
+      setPrIndex((i) => (i <= 0 ? -1 : i - 1));
+      setTreeLineIndex(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
+      return;
+    }
+    if (shellMode && input === "]" && len > 0) {
+      setShellStackFocus(false);
+      setPrIndex((i) => (i < 0 ? 0 : Math.min(len - 1, i + 1)));
+      setTreeLineIndex(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
+      return;
+    }
+    if (input === "O" && row?.pull?.html_url) {
+      openUrl(String(row.pull.html_url));
+      return;
+    }
+
     if (input === "q" || key.escape) {
+      if (browsePreviewOpen) {
+        closeBrowsePreview();
+        return;
+      }
+      if (shellMode && shellStackFocus) {
+        setShellStackFocus(false);
+        return;
+      }
       exitPayload.next = { type: "quit" };
       exit();
       return;
@@ -97,42 +842,215 @@ export function StackInkApp({ rows, exitPayload }) {
       return;
     }
     if (key.tab) {
-      setTab((t) => (t + 1) % 4);
+      if (shellMode && shellStackFocus) {
+        setShellStackFocus(false);
+        return;
+      }
+      if (shellMode && (!row || len === 0)) {
+        return;
+      }
+      if (shellMode) {
+        setShellMainTab((t) => (t + 1) % SHELL_TAB_COUNT);
+        setLineIndex(0);
+        return;
+      }
+      setTab((t) => (t + 1) % TAB_COUNT);
       setLineIndex(0);
-      setFilePatchOffset(0);
+      setTreeLineIndex(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
       setFileCommentIndex(0);
       return;
     }
-    if (input === "[") {
-      setTab((t) => (t + 3) % 4);
+    if (!shellMode && input === "[") {
+      setTab((t) => (t + TAB_COUNT - 1) % TAB_COUNT);
       setLineIndex(0);
-      setFilePatchOffset(0);
+      setTreeLineIndex(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
       setFileCommentIndex(0);
       return;
     }
-    if (input === "]") {
-      setTab((t) => (t + 1) % 4);
+    if (!shellMode && input === "]") {
+      setTab((t) => (t + 1) % TAB_COUNT);
       setLineIndex(0);
-      setFilePatchOffset(0);
+      setTreeLineIndex(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
+      setFileCommentIndex(0);
+      return;
+    }
+
+    if (input === "b" && browsePreviewOpen && (tab === 4 || (shellMode && shellMainTab === 0))) {
+      closeBrowsePreview();
+      return;
+    }
+
+    if (
+      browsePreviewOpen &&
+      previewLineCount > 0 &&
+      input === " " &&
+      (tab === 4 || (shellMode && shellMainTab === 0))
+    ) {
+      const prevH = Math.max(3, Math.floor(bodyMax * 0.35));
+      const pv = Math.max(2, bodyMax - prevH - 2);
+      const maxS = Math.max(0, previewLineCount - pv);
+      setTreePreviewScroll((s) =>
+        Math.min(s + Math.max(1, Math.floor(pv / 2)), maxS)
+      );
+      return;
+    }
+
+    if (!shellMode && (key.return || input === " ") && tab === 0 && row?.pull?.html_url) {
+      openUrl(String(row.pull.html_url));
+      return;
+    }
+    if ((key.return || input === " ") && tab === 1) {
+      const ic = issueList[safeLine];
+      if (ic?.html_url) {
+        openUrl(String(ic.html_url));
+        return;
+      }
+    }
+    if ((key.return || input === " ") && tab === 2) {
+      const c = reviewList[safeLine];
+      if (c?.html_url) {
+        openUrl(String(c.html_url));
+        return;
+      }
+    }
+    if ((key.return || input === " ") && tab === 3 && fileList.length) {
+      setFileIndex((i) => Math.min(i + 1, fileList.length - 1));
+      setFilePatchOffset(0); setPatchCursorLine(0);
       setFileCommentIndex(0);
       return;
     }
 
+    if (
+      (key.return || input === " ") &&
+      tab === 4 &&
+      !browsePreviewOpen &&
+      !shellMode &&
+      browseOwner &&
+      browseRepo &&
+      headSha &&
+      asciiTreeRows[safeLine]
+    ) {
+      const ent = asciiTreeRows[safeLine];
+      if (ent.path) {
+        loadBrowseBlob(ent.path);
+      }
+      return;
+    }
+
+    if (
+      shellMode &&
+      shellMainTab === 0 &&
+      (key.return || input === " ") &&
+      !shellStackFocus &&
+      !browsePreviewOpen &&
+      browseOwner &&
+      browseRepo &&
+      headSha &&
+      asciiTreeRows[treeSafeLine]
+    ) {
+      const ent = asciiTreeRows[treeSafeLine];
+      if (ent.path) {
+        loadBrowseBlob(ent.path);
+      }
+      return;
+    }
+
     if (input === "j" || key.downArrow) {
-      if (tab === 0 && len > 0) {
+      if (shellMode && shellStackFocus && len > 0) {
+        setPrIndex((i) => (i < 0 ? 0 : Math.min(i + 1, len - 1)));
+        setTreeLineIndex(0);
+        setFilePatchOffset(0); setPatchCursorLine(0);
+        return;
+      }
+      if (shellMode && !shellStackFocus && shellMainTab === 0 && len > 0 && prIndex < 0) {
+        setShellStackFocus(true);
+        setPrIndex(0);
+        setTreeLineIndex(0);
+        setFilePatchOffset(0); setPatchCursorLine(0);
+        return;
+      }
+      if (
+        (shellMode && shellMainTab === 0 && browsePreviewOpen && previewLineCount > 0) ||
+        (!shellMode && tab === 4 && browsePreviewOpen && previewLineCount > 0)
+      ) {
+        const prevH = Math.max(3, Math.floor(bodyMax * 0.35));
+        const pv = Math.max(2, bodyMax - prevH - 2);
+        const maxS = Math.max(0, previewLineCount - pv);
+        setTreePreviewScroll((s) => Math.min(s + 1, maxS));
+        return;
+      }
+      if (
+        shellMode &&
+        shellMainTab === 0 &&
+        !shellStackFocus &&
+        !browsePreviewOpen &&
+        asciiTreeRows.length
+      ) {
+        setTreeLineIndex((i) => Math.min(i + 1, asciiTreeRows.length - 1));
+        return;
+      }
+      if (shellMode && shellMainTab > 0 && listLen > 0) {
+        setLineIndex((i) => Math.min(i + 1, Math.max(0, listLen - 1)));
+        return;
+      }
+      if (tab === 0 && len > 0 && !shellMode) {
         setPrIndex((i) => Math.min(i + 1, len - 1));
       } else if (tab === 3) {
         setFilePatchOffset((i) => Math.min(i + 1, maxPatchOffset));
+      } else if (tab === 4 && asciiTreeRows.length && !shellMode) {
+        setTreeLineIndex((i) => Math.min(i + 1, asciiTreeRows.length - 1));
       } else {
         setLineIndex((i) => Math.min(i + 1, Math.max(0, listLen - 1)));
       }
       return;
     }
     if (input === "k" || key.upArrow) {
-      if (tab === 0 && len > 0) {
+      if (shellMode && shellStackFocus && len > 0) {
+        setPrIndex((i) => (i <= 0 ? -1 : i - 1));
+        setTreeLineIndex(0);
+        setFilePatchOffset(0); setPatchCursorLine(0);
+        return;
+      }
+      if (shellMode && !shellStackFocus && shellMainTab === 0 && len > 0 && prIndex < 0) {
+        setShellStackFocus(true);
+        setPrIndex(Math.max(0, len - 1));
+        setTreeLineIndex(0);
+        setFilePatchOffset(0); setPatchCursorLine(0);
+        return;
+      }
+      if (
+        (shellMode && shellMainTab === 0 && browsePreviewOpen && previewLineCount > 0) ||
+        (!shellMode && tab === 4 && browsePreviewOpen && previewLineCount > 0)
+      ) {
+        const prevH = Math.max(3, Math.floor(bodyMax * 0.35));
+        const pv = Math.max(2, bodyMax - prevH - 2);
+        const maxS = Math.max(0, previewLineCount - pv);
+        setTreePreviewScroll((s) => Math.max(s - 1, 0));
+        return;
+      }
+      if (
+        shellMode &&
+        shellMainTab === 0 &&
+        !shellStackFocus &&
+        !browsePreviewOpen &&
+        asciiTreeRows.length
+      ) {
+        setTreeLineIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (shellMode && shellMainTab > 0 && listLen > 0) {
+        setLineIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (tab === 0 && len > 0 && !shellMode) {
         setPrIndex((i) => Math.max(i - 1, 0));
       } else if (tab === 3) {
         setFilePatchOffset((i) => Math.max(i - 1, 0));
+      } else if (tab === 4 && asciiTreeRows.length && !shellMode) {
+        setTreeLineIndex((i) => Math.max(i - 1, 0));
       } else {
         setLineIndex((i) => Math.max(i - 1, 0));
       }
@@ -140,22 +1058,27 @@ export function StackInkApp({ rows, exitPayload }) {
     }
 
     if (input === "o" && row && !row.error) {
+      if (shellMode) {
+        setShellStackFocus(false);
+        setShellMainTab(0);
+        return;
+      }
       setTab(3);
       setFileIndex(0);
-      setFilePatchOffset(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
       setFileCommentIndex(0);
       return;
     }
 
     if (tab === 3 && input === "n") {
       setFileIndex((i) => Math.min(i + 1, Math.max(0, fileList.length - 1)));
-      setFilePatchOffset(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
       setFileCommentIndex(0);
       return;
     }
     if (tab === 3 && input === "p") {
       setFileIndex((i) => Math.max(i - 1, 0));
-      setFilePatchOffset(0);
+      setFilePatchOffset(0); setPatchCursorLine(0);
       setFileCommentIndex(0);
       return;
     }
@@ -175,25 +1098,45 @@ export function StackInkApp({ rows, exitPayload }) {
       return;
     }
 
-    if (input === "l" && tab === 2) {
+    if (input === "K" && row && !row.error && (!shellMode ? tab === 4 : shellMainTab === 0)) {
+      exitPayload.next = {
+        type: "materialize_clone",
+        prNumber: row.entry.pr_number
+      };
+      exit();
+      return;
+    }
+
+    const reviewNav =
+      tab === 2 || (shellMode && shellMainTab === 3);
+    if (input === "l" && reviewNav) {
       const c = reviewList[safeLine];
       if (c?.html_url) {
         openUrl(c.html_url);
       }
       return;
     }
-    if (input === "g" && tab === 2 && row && !row.error) {
+    if (input === "g" && reviewNav && row && !row.error) {
       const c = reviewList[safeLine];
       const targetPath = String(c?.path || "");
       if (targetPath) {
         const idx = fileList.findIndex((f) => String(f?.filename || "") === targetPath);
         if (idx >= 0) {
-          setTab(3);
+          if (shellMode) {
+            setShellMainTab(0);
+            setTab(4);
+            const tidx = asciiTreeRows.findIndex((r) => r.path === targetPath);
+            if (tidx >= 0) {
+              setTreeLineIndex(tidx);
+            }
+          } else {
+            setTab(3);
+          }
           setFileIndex(idx);
           const selected = fileList[idx];
-          const lines = typeof selected?.patch === "string" ? String(selected.patch).split("\n") : [];
+          const pls = typeof selected?.patch === "string" ? String(selected.patch).split("\n") : [];
           const lineNo = c?.line ?? c?.original_line ?? 0;
-          const off = patchOffsetForLine(lines, Number(lineNo) || 0);
+          const off = patchOffsetForLine(pls, Number(lineNo) || 0);
           setFilePatchOffset(off);
           const fcIdx = reviewList
             .filter((rc) => String(rc?.path || "") === targetPath)
@@ -204,7 +1147,7 @@ export function StackInkApp({ rows, exitPayload }) {
       return;
     }
 
-    if (input === "S" && tab === 0 && row && !row.error) {
+    if (input === "S" && row && !row.error) {
       exitPayload.next = {
         type: "split",
         prNumber: row.entry.pr_number
@@ -213,6 +1156,26 @@ export function StackInkApp({ rows, exitPayload }) {
       return;
     }
 
+    if (input === "a" && row && !row.error) {
+      exitPayload.next = {
+        type: "submit_review",
+        prNumber: row.entry.pr_number,
+        event: "APPROVE",
+        body: ""
+      };
+      exit();
+      return;
+    }
+
+    if (input === "e" && row && !row.error) {
+      exitPayload.next = {
+        type: "submit_review_changes",
+        prNumber: row.entry.pr_number
+      };
+      exit();
+      return;
+    }
+
     if (input === "r" && row && !row.error) {
       exitPayload.next = {
         type: "issue_comment",
@@ -231,7 +1194,7 @@ export function StackInkApp({ rows, exitPayload }) {
       return;
     }
 
-    if (input === "t" && tab === 2 && row && !row.error) {
+    if (input === "t" && reviewNav && row && !row.error) {
       const c = reviewList[safeLine];
       if (c?.id != null) {
         exitPayload.next = {
@@ -244,178 +1207,912 @@ export function StackInkApp({ rows, exitPayload }) {
   });
 
   if (len === 0) {
+    layoutRef.current = null;
+    regionsRef.current = [];
     return React.createElement(
       Box,
-      { flexDirection: "column", padding: 1 },
+      { flexDirection: "column", width: cols, padding: 1 },
       React.createElement(Text, { color: "red" }, "No PRs in stack."),
       React.createElement(Text, { dimColor: true }, "Press q to quit.")
     );
   }
 
-  const ladder = rows.map((r, i) => {
-    const mark = i === safePr ? "▶" : " ";
+  const ladderTruncW = shellMode ? Math.max(8, sidebarW - 2) : innerW;
+  const ladderBlinkOn = shellStackFocus && Math.floor(pulse / 2) % 2 === 0;
+  const ladderScrollAnchor = hasPrPick ? safePr : 0;
+  const ladderRows = stackRows.map((r, i) => {
+    const mark = hasPrPick && i === safePr ? ">" : " ";
     const err = r.error ? ` ${r.error}` : "";
     const title = r.pull?.title || err || "(loading)";
     const num = r.entry.pr_number;
     const st = r.pull?.draft ? "draft" : r.pull?.state || "?";
     const reviewState = String(r.reviewSummary || "none");
+    const vm = r.viewerReviewMeta;
+    const stale = vm?.staleApproval ? "!" : "";
+    const risky = vm?.riskyChangeAfterApproval === true ? "*" : "";
     const badge =
       reviewState === "approved"
-        ? chalk.green("A")
+        ? "A"
         : reviewState === "changes_requested"
-          ? chalk.red("CR")
+          ? "CR"
           : reviewState === "commented" || (r.reviewComments?.length || 0) > 0
-            ? chalk.yellow("C")
-            : chalk.dim("-");
-    return `${mark} #${num} [${st}] ${badge} ${title.slice(0, 56)}`;
+            ? "C"
+            : "-";
+    const { add, del } = prAddDelTotals(r);
+    const head = `${mark} #${num} `;
+    const statPlain = `+${add} -${del} `;
+    const meta = `[${st}] ${badge}${stale}${risky} `;
+    const titleBudget = Math.max(4, ladderTruncW - head.length - statPlain.length - meta.length);
+    const titleT = truncVis(title, titleBudget);
+    const lineColored =
+      chalk.white(head) +
+      chalk.green(`+${add}`) +
+      chalk.white(" ") +
+      chalk.red(`-${del}`) +
+      chalk.white(` ${meta}${titleT}`);
+    if (hasPrPick && i === safePr) {
+      if (shellMode && shellStackFocus) {
+        return ladderBlinkOn ? chalk.inverse(lineColored) : lineColored;
+      }
+      return chalk.inverse(lineColored);
+    }
+    return lineColored;
   });
+  const { slice: ladderVis, start: ladderStart } = sliceViewport(
+    ladderRows,
+    ladderScrollAnchor,
+    ladderMaxForDisplay
+  );
 
-  const tabName = ["overview", "conversation", "review", "files"][tab];
+  const tabName = ["overview", "conversation", "review", "files", "browse"][tab];
+  const pageLabel = tabName;
+  const nLad = ladderVis.length;
+  const bodyStartR = shellMode ? 6 : 4 + nLad;
+  let rowPtr = bodyStartR;
+  /** @type {string[]} */
   let bodyLines = [];
+  /** @type {Array<{ r1: number, r2: number, kind: string, [k: string]: unknown }>} */
+  let regions = [];
+  let layoutBrowsePreviewH = 0;
+  let layoutTreeBlockH = 0;
+
+  const pushBody = (line) => {
+    const r = rowPtr;
+    bodyLines.push(line);
+    rowPtr++;
+    return r;
+  };
+
   if (row?.error) {
-    bodyLines = [row.error];
-  } else if (tab === 0 && row?.pull) {
+    pushBody(truncVis(row.error, innerW));
+  } else if (shellMode && !row) {
+    if (shellMainTab === 0) {
+      pushBody(
+        chalk.dim(
+          "Pick a PR from the ladder: j/k or [ ]  \u00b7  Enter selects and moves focus to the file tree"
+        )
+      );
+    } else {
+      pushBody(chalk.dim("Select a PR in the sidebar to use this tab."));
+    }
+  } else if (shellMode && row?.pull) {
+    if (shellMainTab === 0) {
+      const selPath = asciiTreeRows[treeSafeLine]?.path;
+      const showPatch =
+        !!selPath &&
+        selPath === String(selectedFile?.filename || "") &&
+        patchLines.length > 0 &&
+        !browsePreviewOpen;
+
+      const panes =
+        shellTreePanes ||
+        computeShellTreePaneHeights(bodyMax, browsePreviewOpen, showPatch);
+      const treeBlockH = panes.treeBlockH;
+      const patchH = showPatch ? panes.patchH : 0;
+      const previewH = browsePreviewOpen ? panes.previewH : 0;
+      layoutTreeBlockH = treeBlockH;
+      layoutBrowsePreviewH = previewH;
+
+      if (treeLoading) {
+        pushBody("Loading tree\u2026");
+      } else if (treeError) {
+        pushBody(truncVis(treeError, innerW));
+      }
+      const previewPathOpen = browsePreviewOpen && treePreviewPath ? treePreviewPath : "";
+      const treeDisplay = asciiTreeRows.map((r, i) => {
+        const mark = i === treeSafeLine ? ">" : " ";
+        const f = r.path ? pathToChangedFile.get(r.path) : undefined;
+        const add = f ? Number(f.additions) || 0 : 0;
+        const del = f ? Number(f.deletions) || 0 : 0;
+        const flag = f
+          ? add > 0 && del > 0
+            ? chalk.yellow("*")
+            : add > 0
+              ? chalk.green("+")
+              : del > 0
+                ? chalk.red("-")
+                : chalk.cyan("*")
+          : " ";
+        const tw = Math.max(8, innerW - 4);
+        const plainT = truncVis(r.text, tw);
+        let lineText = plainT;
+        if (f) {
+          if (add > 0 && del > 0) {
+            lineText = chalk.yellow(plainT);
+          } else if (add > 0) {
+            lineText = chalk.green(plainT);
+          } else if (del > 0) {
+            lineText = chalk.red(plainT);
+          } else {
+            lineText = chalk.cyan(plainT);
+          }
+        }
+        if (r.path && previewPathOpen && r.path === previewPathOpen) {
+          lineText = chalk.inverse(lineText);
+        }
+        return `${mark}${flag} ${lineText}`;
+      });
+      const { slice: treeSlice, start: treeStart } = sliceViewport(treeDisplay, treeSafeLine, treeBlockH);
+      if (treeStart > 0) {
+        pushBody(chalk.dim(`\u2191 tree ${treeStart} more`));
+      }
+      const treeSliceStartR = rowPtr;
+      for (const ln of treeSlice) {
+        pushBody(ln);
+      }
+      for (let li = 0; li < treeSlice.length; li++) {
+        const idx = treeStart + li;
+        const tr = asciiTreeRows[idx];
+        regions.push({
+          kind: "treeLine",
+          r1: treeSliceStartR + li,
+          r2: treeSliceStartR + li,
+          index: idx,
+          path: tr?.path ?? null
+        });
+      }
+      if (treeStart + treeSlice.length < treeDisplay.length) {
+        pushBody(chalk.dim(`\u2193 tree ${treeDisplay.length - treeStart - treeSlice.length} more`));
+      }
+      if (!treeLoading && asciiTreeRows.length === 0 && !treeError) {
+        pushBody("(empty tree)");
+      }
+
+      if (showPatch) {
+        pushBody("");
+        const safePatchCursor = Math.min(patchCursorLine, patchLines.length - 1);
+        pushBody(
+          chalk.bold(
+            truncVis(
+              `PR diff: ${String(selectedFile?.filename || "?")}  (${filePatchOffset + 1}\u2013${Math.min(filePatchOffset + patchPageSize, patchLines.length)}/${patchLines.length})  C: comment on line`,
+              innerW
+            )
+          )
+        );
+        const page = patchLines.slice(filePatchOffset, filePatchOffset + patchPageSize);
+        let used = bodyLines.length;
+        const patchStartR = rowPtr;
+        for (let pi = 0; pi < page.length; pi++) {
+          if (bodyLines.length - used >= patchH) {
+            break;
+          }
+          const absIdx = filePatchOffset + pi;
+          const isCursor = absIdx === safePatchCursor;
+          const pl = page[pi];
+          let line = pl;
+          if (line.startsWith("+++ ") || line.startsWith("--- ")) {
+            line = chalk.bold(line);
+          } else if (line.startsWith("@@")) {
+            line = chalk.cyan(line);
+          } else if (line.startsWith("+")) {
+            line = chalk.green(line);
+          } else if (line.startsWith("-")) {
+            line = chalk.red(line);
+          } else {
+            line = chalk.gray(line);
+          }
+          if (isCursor) {
+            line = chalk.inverse(line);
+          }
+          pushBody(truncVis(line, innerW));
+        }
+        const patchEndR = rowPtr - 1;
+        if (patchEndR >= patchStartR) {
+          regions.push({ kind: "patch", r1: patchStartR, r2: patchEndR });
+        }
+        if (filePatchOffset + patchPageSize < patchLines.length) {
+          pushBody(chalk.dim("PgUp/Dn scroll · C: comment on highlighted line"));
+        }
+      } else if (!browsePreviewOpen && !showPatch && asciiTreeRows.length && !treeLoading) {
+        pushBody(
+          chalk.dim(
+            "Highlight a path marked +/−/* for this PR\u2019s diff. Enter opens file text."
+          )
+        );
+      }
+
+      if (browsePreviewOpen && treePreviewPath) {
+        pushBody("");
+        const merged = mergedPreviewRows;
+        const sub =
+          merged && merged.length > 0
+            ? "diff in file  "
+            : "";
+        pushBody(
+          chalk.bold(truncVis(`File: ${treePreviewPath}`, innerW)) +
+            chalk.whiteBright(
+              `  ${sub}[${treePreviewScroll + 1}-${Math.min(treePreviewScroll + previewH, previewLineCount)}/${previewLineCount}]  wheel/Space scroll  Backspace closes`
+            )
+        );
+        const prevSlice = merged
+          ? merged.slice(treePreviewScroll, treePreviewScroll + previewH)
+          : treePreviewLines.slice(treePreviewScroll, treePreviewScroll + previewH).map((t) => ({
+              text: t,
+              kind: /** @type {"ctx"} */ ("ctx")
+            }));
+        const prevStartR = rowPtr;
+        for (const row of prevSlice) {
+          const tv = truncVis(row.text, innerW);
+          const styled =
+            row.kind === "add"
+              ? chalk.green(tv)
+              : row.kind === "del"
+                ? chalk.red(tv)
+                : chalk.whiteBright(tv);
+          pushBody(styled);
+        }
+        const prevEndR = rowPtr - 1;
+        if (prevEndR >= prevStartR) {
+          regions.push({ kind: "preview", r1: prevStartR, r2: prevEndR });
+        }
+      }
+    } else if (shellMainTab === 1) {
+      const bodyRaw = typeof row.pull.body === "string" ? row.pull.body : "";
+      const plain = markdownToPlainLines(bodyRaw);
+      const bl = plain ? plain.split("\n") : [];
+      const lines = bl.length ? bl : ["(no description)"];
+      const { slice, start } = sliceViewport(lines, safeLine, bodyMax);
+      if (start > 0) {
+        pushBody(chalk.dim(`\u2191 ${start} lines above`));
+      }
+      for (let si = 0; si < slice.length; si++) {
+        const ln = slice[si];
+        const gi = start + si;
+        const out = truncVis(ln, innerW);
+        pushBody(gi === safeLine ? chalk.inverse(out) : out);
+      }
+      if (start + slice.length < lines.length) {
+        pushBody(chalk.dim(`\u2193 ${lines.length - start - slice.length} more`));
+      }
+    } else if (shellMainTab === 2) {
+      const lines = issueList.map((c, i) => {
+        const mark = i === safeLine ? ">" : " ";
+        const who = c.user?.login || "?";
+        const one = (c.body || "").split("\n")[0];
+        const t = truncVis(`${mark} @${who}: ${one}`, innerW);
+        return i === safeLine ? chalk.inverse(t) : t;
+      });
+      const { slice, start } = sliceViewport(lines, safeLine, bodyMax);
+      if (start > 0) {
+        pushBody(chalk.dim(`\u2191 ${start} more`));
+      }
+      const sliceStartR = rowPtr;
+      for (const ln of slice) {
+        pushBody(ln);
+      }
+      for (let li = 0; li < slice.length; li++) {
+        regions.push({
+          kind: "issueLine",
+          r1: sliceStartR + li,
+          r2: sliceStartR + li,
+          index: start + li
+        });
+      }
+      if (start + slice.length < lines.length) {
+        pushBody(chalk.dim(`\u2193 ${lines.length - start - slice.length} more`));
+      }
+      if (lines.length === 0) {
+        pushBody("(no conversation comments)");
+      }
+    } else if (shellMainTab === 3) {
+      const lines = reviewList.map((c, i) => {
+        const mark = i === safeLine ? ">" : " ";
+        const path = c.path || "?";
+        const ln = c.line ?? c.original_line ?? "?";
+        const one = (c.body || "").split("\n")[0];
+        const t = truncVis(`${mark} ${path}:${ln} ${one}`, innerW);
+        return i === safeLine ? chalk.inverse(t) : t;
+      });
+      const { slice, start } = sliceViewport(lines, safeLine, bodyMax);
+      if (start > 0) {
+        pushBody(chalk.dim(`\u2191 ${start} more`));
+      }
+      const sliceStartR = rowPtr;
+      for (const ln of slice) {
+        pushBody(ln);
+      }
+      for (let li = 0; li < slice.length; li++) {
+        regions.push({
+          kind: "reviewLine",
+          r1: sliceStartR + li,
+          r2: sliceStartR + li,
+          index: start + li
+        });
+      }
+      if (start + slice.length < lines.length) {
+        pushBody(chalk.dim(`\u2193 ${lines.length - start - slice.length} more`));
+      }
+      if (lines.length === 0) {
+        pushBody("(no review thread comments)");
+      }
+    }
+  } else if (tab === 0 && row?.pull && !shellMode) {
     const p = row.pull;
-    bodyLines = [
-      `Title: ${p.title || ""}`,
-      `Head: ${p.head?.ref || ""}  Base: ${p.base?.ref || ""}`,
-      `Comments: ${issueList.length} conv / ${reviewList.length} review (line)`
-    ];
+    pushBody(truncVis(`Title: ${p.title || ""}`, innerW));
+    pushBody(truncVis(`Head: ${p.head?.ref || ""}  Base: ${p.base?.ref || ""}`, innerW));
+    pushBody(
+      truncVis(`Comments: ${issueList.length} conv / ${reviewList.length} review (line)`, innerW)
+    );
     const rs = String(row.reviewSummary || "none");
-    bodyLines.push(
-      `Review: ${
-        rs === "approved"
-          ? chalk.green("approved")
-          : rs === "changes_requested"
-            ? chalk.red("changes requested")
-            : rs === "commented"
-              ? chalk.yellow("commented")
-              : chalk.dim("no review state")
-      }`
+    pushBody(
+      truncVis(
+        `Review: ${
+          rs === "approved"
+            ? "approved"
+            : rs === "changes_requested"
+              ? "changes requested"
+              : rs === "commented"
+                ? "commented"
+                : "no review state"
+        }`,
+        innerW
+      )
     );
-  } else if (tab === 1) {
-    issueList.forEach((c, i) => {
+    const vm = row.viewerReviewMeta;
+    if (vm) {
+      if (vm.dismissedReview) {
+        pushBody(truncVis("Note: a prior review may have been dismissed/superseded.", innerW));
+      }
+      if (vm.staleApproval) {
+        pushBody(
+          truncVis(
+            `Your approval is on an older commit (+${vm.commitsSinceApproval} commits). Press a to re-approve.`,
+            innerW
+          )
+        );
+      }
+      if (vm.riskyChangeAfterApproval === true) {
+        pushBody(truncVis("Commits since your approval look non-merge — please re-read.", innerW));
+      } else if (vm.riskyChangeAfterApproval === false && vm.staleApproval) {
+        pushBody(truncVis("Delta since your approval looks merge-only.", innerW));
+      }
+    }
+  } else if (tab === 1 && !shellMode) {
+    const lines = issueList.map((c, i) => {
       const mark = i === safeLine ? ">" : " ";
       const who = c.user?.login || "?";
-      const one = (c.body || "").split("\n")[0].slice(0, 70);
-      bodyLines.push(`${mark} @${who}: ${one}`);
+      const one = (c.body || "").split("\n")[0];
+      return truncVis(`${mark} @${who}: ${one}`, innerW);
     });
-    if (bodyLines.length === 0) {
-      bodyLines.push("(no issue comments)");
+    const { slice, start } = sliceViewport(lines, safeLine, bodyMax);
+    if (start > 0) {
+      pushBody(chalk.dim(`\u2191 ${start} more`));
     }
-  } else if (tab === 2) {
-    reviewList.forEach((c, i) => {
+    const sliceStartR = rowPtr;
+    for (const ln of slice) {
+      pushBody(ln);
+    }
+    for (let li = 0; li < slice.length; li++) {
+      regions.push({
+        kind: "issueLine",
+        r1: sliceStartR + li,
+        r2: sliceStartR + li,
+        index: start + li
+      });
+    }
+    if (start + slice.length < lines.length) {
+      pushBody(chalk.dim(`\u2193 ${lines.length - start - slice.length} more`));
+    }
+    if (lines.length === 0) {
+      pushBody("(no issue comments)");
+    }
+  } else if (tab === 2 && !shellMode) {
+    const lines = reviewList.map((c, i) => {
       const mark = i === safeLine ? ">" : " ";
       const path = c.path || "?";
       const ln = c.line ?? c.original_line ?? "?";
-      const one = (c.body || "").split("\n")[0].slice(0, 50);
-      bodyLines.push(`${mark} ${path}:${ln} ${one}`);
+      const one = (c.body || "").split("\n")[0];
+      return truncVis(`${mark} ${path}:${ln} ${one}`, innerW);
     });
-    if (bodyLines.length === 0) {
-      bodyLines.push("(no review comments)");
-      bodyLines.push(chalk.dim("Tip: press g on a review comment to jump to file diff"));
+    const { slice, start } = sliceViewport(lines, safeLine, bodyMax);
+    if (start > 0) {
+      pushBody(chalk.dim(`\u2191 ${start} more`));
+    }
+    const sliceStartR = rowPtr;
+    for (const ln of slice) {
+      pushBody(ln);
+    }
+    for (let li = 0; li < slice.length; li++) {
+      regions.push({
+        kind: "reviewLine",
+        r1: sliceStartR + li,
+        r2: sliceStartR + li,
+        index: start + li
+      });
+    }
+    if (start + slice.length < lines.length) {
+      pushBody(chalk.dim(`\u2193 ${lines.length - start - slice.length} more`));
+    }
+    if (lines.length === 0) {
+      pushBody("(no review comments)");
+      pushBody(chalk.dim("Tip: press g on a review comment to jump to file diff"));
     }
   } else if (tab === 3) {
-    const start = Math.max(0, safeFile - 2);
-    const end = Math.min(fileList.length, start + 5);
-    for (let i = start; i < end; i++) {
-      const f = fileList[i];
+    const fileListH = Math.min(6, Math.max(3, Math.floor(bodyMax * 0.28)));
+    const patchH = Math.max(3, bodyMax - fileListH - 3);
+    const flLines = fileList.map((f, i) => {
       const mark = i === safeFile ? ">" : " ";
       const name = String(f.filename || "?");
       const st = String(f.status || "?");
-      const statusColor =
-        st === "added"
-          ? chalk.green
-          : st === "removed"
-            ? chalk.red
-            : st === "renamed"
-              ? chalk.yellow
-              : chalk.cyan;
-      const ch = `${chalk.green("+" + String(f.additions ?? 0))} ${chalk.red("-" + String(f.deletions ?? 0))}`;
-      bodyLines.push(`${mark} ${statusColor(name)} ${chalk.dim("[" + st + "]")} ${ch}`);
-    }
+      const add = Number(f.additions) || 0;
+      const del = Number(f.deletions) || 0;
+      const ch = `+${add} -${del}`;
+      const meta = chalk.gray(`[${st}] ${ch}`);
+      const nameTrunc = truncVis(name, Math.max(12, innerW - 18));
+      let nameStyled = chalk.whiteBright(nameTrunc);
+      if (add > 0 && del > 0) {
+        nameStyled = chalk.yellow(nameTrunc);
+      } else if (add > 0) {
+        nameStyled = chalk.green(nameTrunc);
+      } else if (del > 0) {
+        nameStyled = chalk.red(nameTrunc);
+      }
+      return `${mark} ${meta} ${nameStyled}`;
+    });
+    const { slice: flSlice, start: flStart } = sliceViewport(flLines, safeFile, fileListH);
     if (fileList.length === 0) {
-      bodyLines.push("(no changed files)");
-    } else if (selectedFile) {
-      bodyLines.push("");
-      bodyLines.push(
-        `${chalk.bold("Patch:")} ${String(selectedFile.filename || "?")} ` +
-          chalk.dim(`(${filePatchOffset + 1}-${Math.min(filePatchOffset + patchPageSize, patchLines.length)} / ${patchLines.length || 0})`)
-      );
-      const patch = typeof selectedFile.patch === "string" ? selectedFile.patch : "";
-      if (!patch) {
-        bodyLines.push("(patch not available from GitHub API for this file)");
-      } else {
-        const page = patchLines.slice(filePatchOffset, filePatchOffset + patchPageSize);
-        for (const p of page) {
-          let line = p;
-          if (line.startsWith("+++ ") || line.startsWith("--- ")) {
-            line = chalk.bold(line);
-          } else if (line.startsWith("@@")) {
-            line = chalk.cyan(line);
-          } else if (line.startsWith("+")) {
-            line = chalk.green(line);
-          } else if (line.startsWith("-")) {
-            line = chalk.red(line);
-          } else {
-            line = chalk.dim(line);
+      pushBody("(no changed files)");
+    } else {
+      if (flStart > 0) {
+        pushBody(chalk.dim(`\u2191 files ${flStart} more`));
+      }
+      const flStartR = rowPtr;
+      for (const ln of flSlice) {
+        pushBody(ln);
+      }
+      for (let li = 0; li < flSlice.length; li++) {
+        regions.push({
+          kind: "fileLine",
+          r1: flStartR + li,
+          r2: flStartR + li,
+          index: flStart + li
+        });
+      }
+      if (flStart + flSlice.length < flLines.length) {
+        pushBody(chalk.dim(`\u2193 files ${flLines.length - flStart - flSlice.length} more`));
+      }
+      if (selectedFile) {
+        pushBody("");
+        pushBody(
+          truncVis(
+            `Patch: ${String(selectedFile.filename || "?")}  (${filePatchOffset + 1}-${Math.min(filePatchOffset + patchPageSize, patchLines.length)}/${patchLines.length || 0})`,
+            innerW
+          )
+        );
+        const patch = typeof selectedFile.patch === "string" ? selectedFile.patch : "";
+        if (!patch) {
+          pushBody("(patch not available from GitHub API for this file)");
+        } else {
+          const page = patchLines.slice(filePatchOffset, filePatchOffset + patchPageSize);
+          let used = bodyLines.length;
+          const patchStartR = rowPtr;
+          for (const pl of page) {
+            if (bodyLines.length - used >= patchH) {
+              break;
+            }
+            let line = pl;
+            if (line.startsWith("+++ ") || line.startsWith("--- ")) {
+              line = chalk.bold(line);
+            } else if (line.startsWith("@@")) {
+              line = chalk.cyan(line);
+            } else if (line.startsWith("+")) {
+              line = chalk.green(line);
+            } else if (line.startsWith("-")) {
+              line = chalk.red(line);
+            } else {
+              line = chalk.gray(line);
+            }
+            pushBody(truncVis(line, innerW));
+          }
+          const patchEndR = rowPtr - 1;
+          if (patchEndR >= patchStartR) {
+            regions.push({ kind: "patch", r1: patchStartR, r2: patchEndR });
+          }
+          if (filePatchOffset + patchPageSize < patchLines.length) {
+            pushBody(chalk.dim("j/k = more patch"));
           }
-          bodyLines.push(line.slice(0, 130));
         }
-        if (filePatchOffset + patchPageSize < patchLines.length) {
-          bodyLines.push(chalk.dim("... more below (j/k scroll)"));
+        if (fileComments.length) {
+          const c = fileComments[safeFileComment];
+          pushBody(
+            truncVis(
+              `Comment ${safeFileComment + 1}/${fileComments.length}  @${c?.user?.login || "?"}`,
+              innerW
+            )
+          );
+          pushBody(truncVis(String(c?.body || "").split("\n")[0], innerW));
         }
       }
-      if (fileComments.length) {
-        bodyLines.push("");
-        const c = fileComments[safeFileComment];
-        bodyLines.push(
-          `${chalk.bold("Comment")} ${safeFileComment + 1}/${fileComments.length} ` +
-            chalk.dim(
-              `line ${c?.line ?? c?.original_line ?? "?"} by @${c?.user?.login || "?"}`
-            )
-        );
-        bodyLines.push(String(c?.body || "").split("\n")[0].slice(0, 100));
+    }
+  } else if (tab === 4 && !shellMode) {
+    const treeBlockH = browsePreviewOpen
+      ? Math.max(4, Math.floor(bodyMax * 0.38))
+      : bodyMax - 1;
+    const previewH = browsePreviewOpen ? Math.max(3, bodyMax - treeBlockH - 1) : 0;
+    layoutTreeBlockH = treeBlockH;
+    layoutBrowsePreviewH = previewH;
+
+    if (treeLoading) {
+      pushBody("Loading tree\u2026");
+    } else if (treeError) {
+      pushBody(truncVis(treeError, innerW));
+    }
+    const previewPathOpenNs = browsePreviewOpen && treePreviewPath ? treePreviewPath : "";
+    const treeDisplay = asciiTreeRows.map((r, i) => {
+      const mark = i === safeLine ? ">" : " ";
+      const f = r.path ? pathToChangedFile.get(r.path) : undefined;
+      const add = f ? Number(f.additions) || 0 : 0;
+      const del = f ? Number(f.deletions) || 0 : 0;
+      const flag = f
+        ? add > 0 && del > 0
+          ? chalk.yellow("*")
+          : add > 0
+            ? chalk.green("+")
+            : del > 0
+              ? chalk.red("-")
+              : chalk.cyan("*")
+        : " ";
+      const tw = Math.max(8, innerW - 4);
+      const plainT = truncVis(r.text, tw);
+      let lineText = plainT;
+      if (f) {
+        if (add > 0 && del > 0) {
+          lineText = chalk.yellow(plainT);
+        } else if (add > 0) {
+          lineText = chalk.green(plainT);
+        } else if (del > 0) {
+          lineText = chalk.red(plainT);
+        } else {
+          lineText = chalk.cyan(plainT);
+        }
       }
+      if (r.path && previewPathOpenNs && r.path === previewPathOpenNs) {
+        lineText = chalk.inverse(lineText);
+      }
+      return `${mark}${flag} ${lineText}`;
+    });
+    const { slice: treeSlice, start: treeStart } = sliceViewport(treeDisplay, safeLine, treeBlockH);
+    if (treeStart > 0) {
+      pushBody(chalk.dim(`\u2191 tree ${treeStart} more`));
+    }
+    const treeSliceStartR = rowPtr;
+    for (const ln of treeSlice) {
+      pushBody(ln);
+    }
+    for (let li = 0; li < treeSlice.length; li++) {
+      const idx = treeStart + li;
+      const tr = asciiTreeRows[idx];
+      regions.push({
+        kind: "treeLine",
+        r1: treeSliceStartR + li,
+        r2: treeSliceStartR + li,
+        index: idx,
+        path: tr?.path ?? null
+      });
     }
+    if (treeStart + treeSlice.length < treeDisplay.length) {
+      pushBody(chalk.dim(`\u2193 tree ${treeDisplay.length - treeStart - treeSlice.length} more`));
+    }
+    if (!treeLoading && asciiTreeRows.length === 0 && !treeError) {
+      pushBody("(empty tree)");
+    }
+
+    if (browsePreviewOpen && treePreviewPath) {
+      pushBody("");
+      const mergedNs = mergedPreviewRows;
+      const subNs = mergedNs && mergedNs.length > 0 ? "diff in file  " : "";
+      pushBody(
+        chalk.bold(truncVis(`File: ${treePreviewPath}`, innerW)) +
+          chalk.whiteBright(
+            `  ${subNs}[${treePreviewScroll + 1}-${Math.min(treePreviewScroll + previewH, previewLineCount)}/${previewLineCount}] wheel/Space scroll  BS/Esc back`
+          )
+      );
+      const prevSliceNs = mergedNs
+        ? mergedNs.slice(treePreviewScroll, treePreviewScroll + previewH)
+        : treePreviewLines.slice(treePreviewScroll, treePreviewScroll + previewH).map((t) => ({
+            text: t,
+            kind: /** @type {"ctx"} */ ("ctx")
+          }));
+      const prevStartRNs = rowPtr;
+      for (const row of prevSliceNs) {
+        const tv = truncVis(row.text, innerW);
+        const styled =
+          row.kind === "add"
+            ? chalk.green(tv)
+            : row.kind === "del"
+              ? chalk.red(tv)
+              : chalk.whiteBright(tv);
+        pushBody(styled);
+      }
+      const prevEndRNs = rowPtr - 1;
+      if (prevEndRNs >= prevStartRNs) {
+        regions.push({ kind: "preview", r1: prevStartRNs, r2: prevEndRNs });
+      }
+    }
+  }
+
+  if (bodyLines.length > bodyMax) {
+    const lastR = bodyStartR + bodyMax - 1;
+    bodyLines = bodyLines.slice(0, bodyMax);
+    regions = regions
+      .filter((reg) => reg.r1 <= lastR)
+      .map((reg) => ({ ...reg, r2: Math.min(reg.r2, lastR) }))
+      .filter((reg) => reg.r1 <= reg.r2);
   }
 
-  const selectedReview = tab === 2 ? reviewList[safeLine] : null;
-  const helpParts = ["Tab/[] tabs", "o files view"];
-  if (tab === 0 || tab === 1 || tab === 2) {
-    helpParts.unshift("j/k PR or line");
+  const browsePreviewHForLayout = treeViewActive ? layoutBrowsePreviewH : 0;
+  layoutRef.current = {
+    bodyStartR,
+    nLad: shellMode ? 0 : nLad,
+    ladderStart,
+    browsePreviewH: browsePreviewHForLayout,
+    bodyMax,
+    tab,
+    shellMode,
+    shellMainTab: shellMode ? shellMainTab : undefined,
+    shellStackFocus: shellMode ? shellStackFocus : false,
+    browsePreviewOpen,
+    treePreviewLinesLen: previewLineCount,
+    maxPatchOffset,
+    patchPageSize,
+    listLen,
+    len,
+    fileListLen: fileList.length,
+    treeLen: asciiTreeRows.length
+  };
+  regionsRef.current = regions;
+
+  const selectedReview =
+    tab === 2 || (shellMode && shellMainTab === 3) ? reviewList[safeLine] : null;
+  const helpParts = ["Tab/[]", "o files", "j/k", "Enter/Space", "BS back", "wheel", "u", "q"];
+  if (tab === 0) {
+    helpParts.push("PR ladder+mouse");
   }
   if (tab === 3) {
-    helpParts.unshift("j/k scroll patch", "n/p file", "m/M comment");
+    helpParts.push("n/p m/M");
+  }
+  if (tab === 4) {
+    if (browsePreviewOpen) {
+      helpParts.push("Space page", "b");
+    } else {
+      helpParts.push("tree click", "dbl-open", "K");
+    }
   }
   if (row && !row.error) {
     if (tab === 0) {
-      helpParts.push("S split PR");
+      helpParts.push("S a e");
     }
-    helpParts.push("r comment", "R Assign Reviewers");
+    helpParts.push("r R");
   }
   if (tab === 2 && selectedReview?.html_url) {
-    helpParts.push("l open line");
+    helpParts.push("l g t");
   }
-  if (tab === 2 && selectedReview?.id != null && row && !row.error) {
-    helpParts.push("t reply thread", "g jump to file");
+  if (shellMode) {
+    helpParts.push("[ ] PR", "1-9", "PgUp/Dn diff", "O", "K", "Enter Space", "BS stack", "b preview", "Esc q", "?");
+  }
+  const helpRaw = helpParts.join(" · ");
+  const fullFooterW = Math.max(40, cols - 2);
+  /** @type {string} */
+  let helpLine1;
+  /** @type {string} */
+  let helpLine2;
+  /** @type {string} */
+  let helpLine3 = "";
+  if (shellMode) {
+    if (showFullHelp) {
+      helpLine1 = truncVis(helpRaw, fullFooterW);
+      helpLine2 =
+        helpRaw.length > fullFooterW ? truncVis(helpRaw.slice(fullFooterW, fullFooterW * 2), fullFooterW) : "";
+      helpLine3 =
+        helpRaw.length > fullFooterW * 2 ? truncVis(helpRaw.slice(fullFooterW * 2), fullFooterW) : "";
+    } else if (shellStackFocus) {
+      helpLine1 = "Tab to cycle functions.";
+      helpLine2 = truncVis(
+        canPickAlternateStack
+          ? "j/k or [ ] pick PR  ·  Enter/Space tree  ·  Backspace pick another stack  ·  Tab Esc cancel"
+          : "j/k or [ ] pick PR  ·  Enter or Space back to tree  ·  Backspace Tab Esc cancel pick",
+        fullFooterW
+      );
+    } else if (browsePreviewOpen) {
+      helpLine1 = "Tab to cycle functions.";
+      helpLine2 = truncVis(
+        "Enter or Space open file  ·  Backspace or b close file  ·  [ ] 1-9 PR  ·  PgUp/Dn wheel diff/preview  ·  O  ·  K  ·  ?  ·  Esc q",
+        fullFooterW
+      );
+    } else {
+      helpLine1 = "Tab to cycle functions.";
+      helpLine2 = truncVis(
+        canPickAlternateStack
+          ? "Enter/Space file  ·  Backspace PR pick  ·  Backspace again other stack  ·  [ ] 1-9  ·  PgUp/Dn wheel  ·  C comment  ·  O  ·  K  ·  ?  ·  Esc q"
+          : "Enter or Space open file  ·  Backspace pick PR  ·  [ ] 1-9 PR  ·  PgUp/Dn wheel diff  ·  C comment  ·  O  ·  K  ·  ?  ·  Esc q",
+        fullFooterW
+      );
+    }
+  } else if (showFullHelp) {
+    helpLine1 = truncVis(helpRaw, innerW);
+    helpLine2 =
+      helpRaw.length > innerW ? truncVis(helpRaw.slice(innerW), innerW) : "";
+  } else {
+    helpLine1 = truncVis("Tab/[] · j/k · Enter/Space · BS · mouse · ? details · u · q", innerW);
+    helpLine2 = "";
   }
-  helpParts.push("u refresh", "q quit");
-  const help = helpParts.join(" | ");
 
-  return React.createElement(
+  const spin = SPIN_FRAMES[pulse % SPIN_FRAMES.length];
+  const clock = new Date().toLocaleTimeString(undefined, { hour12: false });
+
+  const footerRule = "\u2500".repeat(Math.max(0, innerW));
+
+  const displayRepo =
+    repoFullName || (browseOwner && browseRepo ? `${browseOwner}/${browseRepo}` : viewTitle);
+
+  const mainColumn = React.createElement(
     Box,
-    { flexDirection: "column", padding: 1 },
-    React.createElement(Text, { color: "cyan", bold: true }, "nugit stack view"),
-    React.createElement(Text, { dimColor: true }, ladder.join("\n")),
-    React.createElement(Text, { color: "magenta" }, `Tab: ${tabName}`),
+    { flexDirection: "column", width: innerW },
     React.createElement(
       Box,
-      { marginTop: 1, flexDirection: "column" },
-      ...bodyLines.slice(0, 14).map((line, idx) =>
-        React.createElement(Text, { key: String(idx) }, line)
+      { flexDirection: "row", width: innerW, justifyContent: "space-between" },
+      React.createElement(Text, { color: "cyan", bold: true }, truncVis(viewTitle, Math.floor(innerW * 0.5))),
+      React.createElement(
+        Text,
+        { dimColor: false, color: "green" },
+        `${spin} ${clock}`
       )
     ),
-    React.createElement(Text, { dimColor: true, marginTop: 1 }, help)
+    ...(shellMode
+      ? []
+      : [
+          ...(ladderVis.length > 0
+            ? [
+                React.createElement(
+                  Text,
+                  { key: "ladsum", dimColor: true },
+                  ladderStart > 0 || ladderStart + ladderVis.length < ladderRows.length
+                    ? `PRs ${ladderStart + 1}-${ladderStart + ladderVis.length}/${len}`
+                    : ""
+                )
+              ]
+            : []),
+          ...ladderVis.map((line, i) =>
+            React.createElement(Text, { key: `l-${ladderStart + i}` }, line)
+          )
+        ]),
+    shellMode
+      ? React.createElement(
+          Box,
+          { key: "shell-tabs", flexDirection: "column", width: innerW, marginBottom: 1 },
+          React.createElement(
+            Box,
+            { flexDirection: "row", width: innerW, flexWrap: "wrap" },
+            ...SHELL_TAB_LABELS.map((lab, i) =>
+              React.createElement(
+                Text,
+                {
+                  key: `st-${i}`,
+                  color: i === shellMainTab ? "yellow" : "gray",
+                  bold: i === shellMainTab
+                },
+                i === shellMainTab ? `${lab}  ` : `${lab}    `
+              )
+            )
+          ),
+          React.createElement(Text, { dimColor: true, color: "gray" }, footerRule)
+        )
+      : React.createElement(Text, { color: "magenta" }, `Tab: ${tabName}`),
+    React.createElement(
+      Box,
+      { flexDirection: "column", width: innerW },
+      ...bodyLines.map((line, idx) => React.createElement(Text, { key: `b-${idx}` }, line))
+    ),
+    ...(!shellMode
+      ? [
+          React.createElement(Text, { key: "h1", dimColor: true }, helpLine1),
+          helpLine2 ? React.createElement(Text, { key: "h2", dimColor: true }, helpLine2) : null
+        ]
+      : [])
+  );
+
+  const footerRuleFull = "\u2500".repeat(fullFooterW);
+  const shellFooterBlock = shellMode
+    ? React.createElement(
+        Box,
+        { key: "shell-foot", flexDirection: "column", width: fullFooterW, marginTop: 1 },
+        React.createElement(Text, { color: "cyan" }, footerRuleFull),
+        React.createElement(Text, { color: "cyan" }, helpLine1),
+        helpLine2 ? React.createElement(Text, { color: "cyan" }, helpLine2) : null,
+        helpLine3 ? React.createElement(Text, { color: "cyan" }, helpLine3) : null
+      )
+    : null;
+
+  if (!shellMode) {
+    return React.createElement(Box, { flexDirection: "column", width: cols, paddingX: 1 }, mainColumn);
+  }
+
+  const sepW = Math.max(2, sidebarW - 2);
+  const sepBar = "\u2500".repeat(sepW);
+  const branchGraphW = Math.max(10, sidebarW - 2);
+  const shellBranchGraphLines = buildStackBranchGraphLines(
+    stackRows,
+    hasPrPick ? safePr : -1,
+    SIDEBAR_GRAPH_MAX,
+    branchGraphW
+  );
+  const sidebarInner = [
+    React.createElement(
+      Text,
+      { key: "sr", bold: true, color: "cyan" },
+      truncVis(displayRepo, sidebarW - 2)
+    ),
+    React.createElement(Text, { key: "ssep0", color: "gray" }, sepBar),
+    React.createElement(Text, { key: "ss1", color: "white" }, `PRs: ${len}`),
+    React.createElement(Text, { key: "ss2", color: "white" }, `Changed files: ${fileList.length}`),
+    React.createElement(
+      Text,
+      { key: "ss4", color: hasPrPick ? "whiteBright" : "gray", dimColor: !hasPrPick },
+      `Focus: ${hasPrPick ? `#${row.entry.pr_number}` : "\u2014"}`
+    ),
+    React.createElement(Text, { key: "ssep1", color: "gray" }, sepBar),
+    ladderVis.length > 0
+      ? React.createElement(
+          Text,
+          { key: "slab", color: "white", dimColor: true },
+          ladderStart > 0 || ladderStart + ladderVis.length < ladderRows.length
+            ? `Ladder ${ladderStart + 1}\u2013${ladderStart + ladderVis.length}/${len}`
+            : "Stack"
+        )
+      : null,
+    ...ladderVis.map((line, i) =>
+      React.createElement(Text, { key: `ls-${ladderStart + i}` }, line)
+    ),
+    React.createElement(Text, { key: "ssep2", color: "gray" }, sepBar),
+    React.createElement(Text, { key: "sbranch", color: "white", dimColor: true }, "Branch"),
+    ...shellBranchGraphLines.map((ln, gi) =>
+      React.createElement(Text, { key: `sg-${gi}` }, ln)
+    )
+  ];
+
+  const divRows = Math.min(Math.max(14, ttyRows - 8), 64);
+  const dividerCol = React.createElement(
+    Box,
+    { key: "sdiv", flexDirection: "column", width: 1, marginRight: 0 },
+    ...Array.from({ length: divRows }, (_, i) =>
+      React.createElement(Text, { key: `dv${i}`, color: "gray" }, "\u2502")
+    )
+  );
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", width: cols, paddingX: 1 },
+    React.createElement(
+      Box,
+      { flexDirection: "row", width: cols - 2 },
+      React.createElement(
+        Box,
+        { flexDirection: "column", width: sidebarW, marginRight: 0 },
+        ...sidebarInner.filter(Boolean)
+      ),
+      dividerCol,
+      mainColumn
+    ),
+    shellFooterBlock
   );
 }