replicas-cli 0.2.51 → 0.2.53

package/dist/{interactive-RO6PZ2XP.mjs → interactive-4AVPCL2D.mjs}

@@ -11,15 +11,15 @@ import {
   isAgentBackendEvent,
   parseAgentEvents,
   parseUserMessage
-} from "./chunk-QIZFFIVG.mjs";
+} from "./chunk-SDULF4LX.mjs";
 
 // src/interactive/index.tsx
 import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 
 // src/interactive/App.tsx
-import { useState as useState7, useEffect as useEffect3, useMemo as useMemo5, useCallback as useCallback6, useRef as useRef3 } from "react";
-import { useKeyboard as useKeyboard4, useRenderer, useTerminalDimensions as useTerminalDimensions3 } from "@opentui/react";
+import { useState as useState8, useEffect as useEffect3, useMemo as useMemo6, useCallback as useCallback7, useRef as useRef5 } from "react";
+import { useKeyboard as useKeyboard5, useRenderer, useTerminalDimensions as useTerminalDimensions3 } from "@opentui/react";
 import { QueryClient } from "@tanstack/react-query";
 
 // ../shared/src/hooks/auth-context.ts
@@ -493,7 +493,18 @@ var KEYBINDS = {
   "chat-input": "\u21B5 send  \u21E5 plan/build",
   info: "j/k nav  \u21B5 open  o dashboard  w wake"
 };
-function StatusBar({ focusPanel }) {
+var DIFF_KEYBINDS = "j/k nav  \u21E5 switch pane";
+var MODE_HINT = "1 chat  2 diff";
+var MODE_HINT_PANELS = /* @__PURE__ */ new Set([
+  "chat-tabs",
+  "chat-history",
+  "info"
+]);
+function StatusBar({ focusPanel, viewingDiff, hasDiffAvailable }) {
+  const showingDiffHints = viewingDiff && focusPanel !== "sidebar" && focusPanel !== "info";
+  const baseHints = showingDiffHints ? DIFF_KEYBINDS : KEYBINDS[focusPanel];
+  const showModeHint = hasDiffAvailable && (showingDiffHints || MODE_HINT_PANELS.has(focusPanel));
+  const hints = showModeHint ? `${baseHints}  ${MODE_HINT}` : baseHints;
   return /* @__PURE__ */ jsxs(
     "box",
     {
@@ -507,7 +518,7 @@ function StatusBar({ focusPanel }) {
         /* @__PURE__ */ jsx("text", { children: /* @__PURE__ */ jsx("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx("strong", { children: "Replicas" }) }) }),
         /* @__PURE__ */ jsxs("text", { children: [
           /* @__PURE__ */ jsxs("span", { fg: "#555555", children: [
-            KEYBINDS[focusPanel],
+            hints,
             "  "
           ] }),
           /* @__PURE__ */ jsxs("span", { fg: "#888888", children: [
@@ -527,11 +538,11 @@ function StatusBar({ focusPanel }) {
 import { useState as useState2, useMemo as useMemo2, useCallback as useCallback3 } from "react";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { jsx as jsx2, jsxs as jsxs2 } from "@opentui/react/jsx-runtime";
-function flattenGroups(groups, expandedGroups) {
+function flattenGroups(groups, collapsedGroups) {
   const items = [];
   for (const group of groups) {
     if (group.id === "__ungrouped__" && group.workspaces.length === 0) continue;
-    const expanded = expandedGroups.has(group.id);
+    const expanded = !collapsedGroups.has(group.id);
     items.push({ type: "group", id: group.id, name: group.name, groupType: group.type, expanded });
     if (expanded) {
       for (const ws of group.workspaces) {
@@ -566,20 +577,11 @@ function WorkspaceSidebar({
   loading
 }) {
   const { height: termHeight } = useTerminalDimensions();
-  const [expandedGroups, setExpandedGroups] = useState2(
-    () => new Set(groups.map((g) => g.id))
-  );
+  const [collapsedGroups, setCollapsedGroups] = useState2(/* @__PURE__ */ new Set());
   const [cursorIndex, setCursorIndex] = useState2(0);
   const [scrollOffset, setScrollOffset] = useState2(0);
   const [confirmDelete, setConfirmDelete] = useState2(null);
-  const expandedWithNew = useMemo2(() => {
-    const next = new Set(expandedGroups);
-    for (const g of groups) {
-      if (!next.has(g.id)) next.add(g.id);
-    }
-    return next;
-  }, [expandedGroups, groups]);
-  const items = useMemo2(() => flattenGroups(groups, expandedWithNew), [groups, expandedWithNew]);
+  const items = useMemo2(() => flattenGroups(groups, collapsedGroups), [groups, collapsedGroups]);
   const clampedCursor = Math.min(cursorIndex, Math.max(0, items.length - 1));
   if (clampedCursor !== cursorIndex) {
     setCursorIndex(clampedCursor);
@@ -610,7 +612,7 @@ function WorkspaceSidebar({
   const handleAction = useCallback3(
     (item) => {
       if (item.type === "group") {
-        setExpandedGroups((prev) => {
+        setCollapsedGroups((prev) => {
           const next = new Set(prev);
           if (next.has(item.id)) {
             next.delete(item.id);
@@ -853,12 +855,11 @@ function WorkspaceSidebar({
 }
 
 // src/interactive/components/ChatArea.tsx
-import { useRef, useEffect as useEffect2 } from "react";
-import { useKeyboard as useKeyboard2 } from "@opentui/react";
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useKeyboard as useKeyboard3 } from "@opentui/react";
 
 // src/interactive/components/ChatMessage.tsx
-import { useState as useState4, useMemo as useMemo3 } from "react";
-import { SyntaxStyle } from "@opentui/core";
+import { useState as useState5, useMemo as useMemo4 } from "react";
 
 // src/interactive/components/Spinner.tsx
 import "opentui-spinner/react";
@@ -873,168 +874,678 @@ function SpinnerLabel({ color, label }) {
 }
 
 // src/interactive/components/StructuredUserMessage.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
+
+// src/interactive/components/diff-utils.tsx
+import React2, { useState as useState3, useMemo as useMemo3, useCallback as useCallback4, useRef } from "react";
+import { SyntaxStyle } from "@opentui/core";
+import { useKeyboard as useKeyboard2 } from "@opentui/react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "@opentui/react/jsx-runtime";
+var sharedSyntaxStyle = null;
+function getSyntaxStyle() {
+  if (!sharedSyntaxStyle) {
+    sharedSyntaxStyle = SyntaxStyle.fromTheme([
+      { scope: ["markup.heading", "markup.heading.1", "markup.heading.2", "markup.heading.3"], style: { foreground: "#66bb6a", bold: true } },
+      { scope: ["markup.bold", "markup.strong"], style: { foreground: "#ffffff", bold: true } },
+      { scope: ["markup.italic", "markup.emphasis"], style: { foreground: "#e0e0e0", italic: true } },
+      { scope: ["markup.link"], style: { foreground: "#7dcfff", underline: true } },
+      { scope: ["markup.link.url"], style: { foreground: "#7dcfff", underline: true } },
+      { scope: ["markup.link.text"], style: { foreground: "#66bb6a", underline: true } },
+      { scope: ["markup.link.label"], style: { foreground: "#66bb6a", underline: true } },
+      { scope: ["markup.list"], style: { foreground: "#66bb6a" } },
+      { scope: ["markup.quote"], style: { foreground: "#888888", italic: true } },
+      { scope: ["markup.raw", "markup.raw.block"], style: { foreground: "#bb9af7" } },
+      { scope: ["markup.raw.inline"], style: { foreground: "#bb9af7", background: "#1a1a2e" } },
+      { scope: ["keyword", "keyword.control", "keyword.operator"], style: { foreground: "#bb9af7" } },
+      { scope: ["string", "string.quoted"], style: { foreground: "#9ece6a" } },
+      { scope: ["comment", "comment.line", "comment.block"], style: { foreground: "#555555", italic: true } },
+      { scope: ["constant", "constant.numeric", "constant.language"], style: { foreground: "#ff9e64" } },
+      { scope: ["entity.name.function", "support.function"], style: { foreground: "#7aa2f7" } },
+      { scope: ["entity.name.type", "support.type"], style: { foreground: "#2ac3de" } },
+      { scope: ["variable", "variable.other"], style: { foreground: "#c0caf5" } },
+      { scope: ["punctuation"], style: { foreground: "#888888" } }
+    ]);
+  }
+  return sharedSyntaxStyle;
+}
+function truncateName(text, maxLen) {
+  if (maxLen <= 0) return "";
+  if (text.length <= maxLen) return text;
+  if (maxLen === 1) return "\u2026";
+  return text.slice(0, maxLen - 1) + "\u2026";
+}
+function countDiffStats(diff) {
+  let added = 0;
+  let removed = 0;
+  for (const line of diff.split("\n")) {
+    if (line.startsWith("+") && !line.startsWith("+++")) added++;
+    else if (line.startsWith("-") && !line.startsWith("---")) removed++;
+  }
+  return { added, removed };
+}
+var EXT_TO_FILETYPE = {
+  ts: "typescript",
+  tsx: "typescriptreact",
+  js: "javascript",
+  jsx: "javascriptreact",
+  cts: "typescript",
+  mts: "typescript",
+  cjs: "javascript",
+  mjs: "javascript",
+  py: "python",
+  rs: "rust",
+  go: "go",
+  rb: "ruby",
+  java: "java",
+  kt: "kotlin",
+  swift: "swift",
+  c: "c",
+  cpp: "cpp",
+  h: "c",
+  hpp: "cpp",
+  cs: "csharp",
+  css: "css",
+  scss: "scss",
+  html: "html",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  md: "markdown",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  sql: "sql"
+};
+function extFromPath(path) {
+  const ext = path.split(".").pop()?.toLowerCase();
+  return ext ? EXT_TO_FILETYPE[ext] : void 0;
+}
+function ensureUnifiedHeaders(diff, filePath) {
+  if (/^--- /m.test(diff) && /^@@ /m.test(diff)) return diff;
+  const file = filePath ?? "a";
+  const fileHeaders = `--- a/${file}
++++ b/${file}
+`;
+  if (/^@@ -\d+/m.test(diff)) {
+    return fileHeaders + diff;
+  }
+  const lines = diff.split("\n");
+  const diffLines = lines.filter((l) => !l.startsWith("@@"));
+  let oldCount = 0;
+  let newCount = 0;
+  for (const line of diffLines) {
+    if (line.startsWith("+") && !line.startsWith("+++")) newCount++;
+    else if (line.startsWith("-") && !line.startsWith("---")) oldCount++;
+    else if (line.startsWith(" ") || !line.startsWith("+") && !line.startsWith("-") && line.length > 0) {
+      oldCount++;
+      newCount++;
+    }
+  }
+  const hunk = `@@ -1,${oldCount} +1,${newCount} @@`;
+  return `${fileHeaders}${hunk}
+${diffLines.join("\n")}`;
+}
+function diffProps(filePath) {
+  return {
+    view: "split",
+    filetype: filePath ? extFromPath(filePath) : void 0,
+    syntaxStyle: getSyntaxStyle(),
+    showLineNumbers: true,
+    width: "100%",
+    wrapMode: "word",
+    fg: "#cccccc",
+    addedBg: "#0d2b0d",
+    removedBg: "#2b0d0d",
+    contextBg: "#0a0a0a",
+    addedSignColor: "#66bb6a",
+    removedSignColor: "#ff4444",
+    lineNumberFg: "#555555",
+    lineNumberBg: "#0a0a0a",
+    addedLineNumberBg: "#0d2b0d",
+    removedLineNumberBg: "#2b0d0d"
+  };
+}
+function DiffView({ diff, filePath }) {
+  const hunks = useMemo3(() => splitDiffByHunks(diff), [diff]);
+  const props = diffProps(filePath);
+  if (hunks.length <= 1) {
+    return /* @__PURE__ */ jsx4("diff", { diff: ensureUnifiedHeaders(diff, filePath), ...props });
+  }
+  return /* @__PURE__ */ jsx4("box", { flexDirection: "column", children: hunks.map((hunk, i) => {
+    const prev = i > 0 ? hunks[i - 1] : null;
+    const gap = prev ? hunk.newStart - (prev.newStart + prev.newCount) : 0;
+    return /* @__PURE__ */ jsxs4(React2.Fragment, { children: [
+      prev && gap > 0 && /* @__PURE__ */ jsx4("box", { backgroundColor: "#151515", paddingX: 1, height: 1, children: /* @__PURE__ */ jsx4("text", { children: /* @__PURE__ */ jsxs4("span", { fg: "#666666", children: [
+        gap,
+        " unmodified ",
+        gap === 1 ? "line" : "lines"
+      ] }) }) }),
+      /* @__PURE__ */ jsx4("diff", { diff: ensureUnifiedHeaders(hunk.body, filePath), ...props })
+    ] }, i);
+  }) });
+}
+function splitDiffByFile(fullDiff) {
+  const chunks = [];
+  const lines = fullDiff.split("\n");
+  let currentLines = [];
+  let currentPath = "";
+  for (const line of lines) {
+    if (line.startsWith("diff --git ")) {
+      if (currentPath && currentLines.length > 0) {
+        const diff = currentLines.join("\n");
+        chunks.push({ path: currentPath, diff, ...countDiffStats(diff) });
+      }
+      const match = line.match(/^diff --git a\/(.+) b\/(.+)$/);
+      currentPath = match ? match[2] : "";
+      currentLines = [line];
+    } else {
+      currentLines.push(line);
+    }
+  }
+  if (currentPath && currentLines.length > 0) {
+    const diff = currentLines.join("\n");
+    chunks.push({ path: currentPath, diff, ...countDiffStats(diff) });
+  }
+  return chunks;
+}
+function splitDiffByHunks(fileDiff) {
+  const hunks = [];
+  const lines = fileDiff.split("\n");
+  let current = null;
+  for (const line of lines) {
+    const match = line.match(/^@@ -\d+(?:,\d+)? \+(\d+)(?:,(\d+))? @@/);
+    if (match) {
+      if (current) hunks.push({ body: current.lines.join("\n"), newStart: current.newStart, newCount: current.newCount });
+      current = {
+        lines: [line],
+        newStart: parseInt(match[1], 10),
+        newCount: match[2] ? parseInt(match[2], 10) : 1
+      };
+    } else if (current) {
+      current.lines.push(line);
+    }
+  }
+  if (current) hunks.push({ body: current.lines.join("\n"), newStart: current.newStart, newCount: current.newCount });
+  return hunks;
+}
+function buildFileTree(files) {
+  const root = { name: "", children: /* @__PURE__ */ new Map() };
+  files.forEach((file, idx) => {
+    const segments = file.path.split("/");
+    let node = root;
+    for (const seg of segments) {
+      if (!node.children.has(seg)) {
+        node.children.set(seg, { name: seg, children: /* @__PURE__ */ new Map() });
+      }
+      node = node.children.get(seg);
+    }
+    node.fileIndex = idx;
+    node.added = file.added;
+    node.removed = file.removed;
+  });
+  const result = [];
+  function walk(node, depth, accumulatedPath, parentPath) {
+    if (node.fileIndex !== void 0) {
+      const fullPath = parentPath ? `${parentPath}/${node.name}` : node.name;
+      result.push({
+        type: "file",
+        name: node.name,
+        path: fullPath,
+        depth,
+        fileIndex: node.fileIndex,
+        added: node.added,
+        removed: node.removed
+      });
+      return;
+    }
+    const children = Array.from(node.children.values());
+    if (children.length === 1 && children[0].fileIndex === void 0) {
+      walk(children[0], depth, [...accumulatedPath, node.name], parentPath);
+      return;
+    }
+    let folderFullPath = parentPath;
+    if (node.name !== "") {
+      const displayName = [...accumulatedPath, node.name].filter(Boolean).join("/");
+      folderFullPath = parentPath ? `${parentPath}/${displayName}` : displayName;
+      result.push({ type: "folder", name: displayName, path: folderFullPath, depth });
+    }
+    const childDepth = node.name === "" ? depth : depth + 1;
+    for (const child of children) {
+      walk(child, childDepth, [], folderFullPath);
+    }
+  }
+  walk(root, 0, [], "");
+  return result;
+}
+var FILE_PANEL_WIDTH = 32;
+function DiffViewer({ diff, repoName, focused }) {
+  const files = useMemo3(() => splitDiffByFile(diff), [diff]);
+  const tree = useMemo3(() => buildFileTree(files), [files]);
+  const [selectedFileIndex, setSelectedFileIndex] = useState3(0);
+  const [collapsedFolders, setCollapsedFolders] = useState3(/* @__PURE__ */ new Set());
+  const [cursorIndex, setCursorIndex] = useState3(0);
+  const [innerFocus, setInnerFocus] = useState3("files");
+  const safeFileIndex = Math.min(selectedFileIndex, Math.max(0, files.length - 1));
+  const diffScrollRef = useRef(null);
+  const fileTreeScrollRef = useRef(null);
+  const visibleTree = useMemo3(() => {
+    const result = [];
+    let hideUntilDepth = null;
+    for (const node of tree) {
+      if (hideUntilDepth !== null && node.depth <= hideUntilDepth) {
+        hideUntilDepth = null;
+      }
+      if (hideUntilDepth !== null) continue;
+      result.push(node);
+      if (node.type === "folder" && collapsedFolders.has(node.path)) {
+        hideUntilDepth = node.depth;
+      }
+    }
+    return result;
+  }, [tree, collapsedFolders]);
+  const safeCursorIndex = Math.min(cursorIndex, Math.max(0, visibleTree.length - 1));
+  const scrollCursorIntoView = useCallback4((treeIdx) => {
+    const node = visibleTree[treeIdx];
+    if (!node) return;
+    fileTreeScrollRef.current?.scrollChildIntoView(`tree-${node.path}`);
+  }, [visibleTree]);
+  const moveCursor = useCallback4((next) => {
+    const len = visibleTree.length;
+    if (len === 0) return;
+    const wrapped = (next % len + len) % len;
+    setCursorIndex(wrapped);
+    scrollCursorIntoView(wrapped);
+    const node = visibleTree[wrapped];
+    if (node?.type === "file" && node.fileIndex !== void 0) {
+      setSelectedFileIndex(node.fileIndex);
+    }
+  }, [visibleTree, scrollCursorIntoView]);
+  const toggleFolder = useCallback4((folderPath) => {
+    setCollapsedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(folderPath)) next.delete(folderPath);
+      else next.add(folderPath);
+      return next;
+    });
+  }, []);
+  const selectFile = useCallback4((fileIndex, treeIndex) => {
+    setSelectedFileIndex(fileIndex);
+    setCursorIndex(treeIndex);
+    scrollCursorIntoView(treeIndex);
+  }, [scrollCursorIntoView]);
+  useKeyboard2((key) => {
+    if (!focused) return;
+    if (key.name === "tab" && !key.shift) {
+      setInnerFocus((f) => f === "files" ? "diff" : "files");
+      return;
+    }
+    if (innerFocus === "files") {
+      if (visibleTree.length > 1 && (key.name === "up" || key.name === "k" && !key.ctrl)) {
+        moveCursor(safeCursorIndex - 1);
+        return;
+      }
+      if (visibleTree.length > 1 && (key.name === "down" || key.name === "j" && !key.ctrl)) {
+        moveCursor(safeCursorIndex + 1);
+        return;
+      }
+      if (key.name === "return" || key.name === "enter") {
+        const node = visibleTree[safeCursorIndex];
+        if (node?.type === "folder") toggleFolder(node.path);
+        return;
+      }
+      return;
+    }
+    if (innerFocus === "diff") {
+      const sb = diffScrollRef.current;
+      if (!sb) return;
+      if (key.ctrl && key.name === "d") {
+        sb.scrollBy((sb.viewport?.height ?? 20) / 2);
+      } else if (key.ctrl && key.name === "u") {
+        sb.scrollBy(-((sb.viewport?.height ?? 20) / 2));
+      }
+    }
+  });
+  const statsColumnWidth = useMemo3(() => {
+    let max = 0;
+    for (const f of files) {
+      const a = f.added > 0 ? `+${f.added}`.length : 0;
+      const r = f.removed > 0 ? `-${f.removed}`.length : 0;
+      const len = a + r + (a > 0 && r > 0 ? 1 : 0);
+      if (len > max) max = len;
+    }
+    return max;
+  }, [files]);
+  if (files.length === 0) {
+    return /* @__PURE__ */ jsxs4("box", { flexGrow: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4("box", { paddingX: 1, marginBottom: 1, flexDirection: "row", justifyContent: "space-between", flexShrink: 0, height: 1, children: [
+        /* @__PURE__ */ jsxs4("text", { children: [
+          /* @__PURE__ */ jsx4("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx4("strong", { children: "Diff" }) }),
+          /* @__PURE__ */ jsxs4("span", { fg: "#555555", children: [
+            " ",
+            "\u2502",
+            " "
+          ] }),
+          /* @__PURE__ */ jsx4("span", { fg: "#cccccc", children: repoName })
+        ] }),
+        /* @__PURE__ */ jsx4("text", { fg: "#555555", children: "1 file" })
+      ] }),
+      /* @__PURE__ */ jsx4("scrollbox", { flexGrow: 1, focused, children: /* @__PURE__ */ jsx4("box", { paddingX: 1, children: /* @__PURE__ */ jsx4(DiffView, { diff }) }) })
+    ] });
+  }
+  const selected = files[safeFileIndex];
+  const totalAdded = files.reduce((s, f) => s + f.added, 0);
+  const totalRemoved = files.reduce((s, f) => s + f.removed, 0);
+  const filesPaneActive = focused === true && innerFocus === "files";
+  const diffPaneActive = focused === true && innerFocus === "diff";
+  return /* @__PURE__ */ jsxs4("box", { flexGrow: 1, flexDirection: "row", children: [
+    /* @__PURE__ */ jsxs4(
+      "box",
+      {
+        width: FILE_PANEL_WIDTH,
+        flexDirection: "column",
+        backgroundColor: "#0a0a0a",
+        flexShrink: 0,
+        children: [
+          /* @__PURE__ */ jsx4("box", { paddingX: 1, flexShrink: 0, height: 1, children: /* @__PURE__ */ jsxs4("text", { children: [
+            /* @__PURE__ */ jsx4("span", { fg: filesPaneActive ? "#66bb6a" : "#333333", children: filesPaneActive ? "\u25B8 " : "  " }),
+            /* @__PURE__ */ jsx4("span", { fg: filesPaneActive ? "#66bb6a" : "#888888", children: filesPaneActive ? /* @__PURE__ */ jsxs4("strong", { children: [
+              files.length,
+              " ",
+              files.length === 1 ? "file" : "files",
+              " changed"
+            ] }) : `${files.length} ${files.length === 1 ? "file" : "files"} changed` })
+          ] }) }),
+          /* @__PURE__ */ jsx4("scrollbox", { ref: fileTreeScrollRef, flexGrow: 1, focused: false, children: visibleTree.map((node, i) => {
+            const indent = "  ".repeat(node.depth);
+            const usable = FILE_PANEL_WIDTH - 2;
+            const isCursor = filesPaneActive && i === safeCursorIndex;
+            if (node.type === "folder") {
+              const isCollapsed = collapsedFolders.has(node.path);
+              const chevron = isCollapsed ? "\u25B8" : "\u25BE";
+              const overhead2 = indent.length + 2;
+              const nameMax2 = Math.max(1, usable - overhead2);
+              const displayName2 = truncateName(node.name, nameMax2);
+              return /* @__PURE__ */ jsx4(
+                "box",
+                {
+                  id: `tree-${node.path}`,
+                  paddingX: 1,
+                  height: 1,
+                  backgroundColor: isCursor ? "#1a1a1a" : void 0,
+                  onMouseDown: () => {
+                    setCursorIndex(i);
+                    toggleFolder(node.path);
+                  },
+                  children: /* @__PURE__ */ jsxs4("text", { children: [
+                    /* @__PURE__ */ jsx4("span", { fg: "#555555", children: indent }),
+                    /* @__PURE__ */ jsxs4("span", { fg: isCursor ? "#cccccc" : "#888888", children: [
+                      chevron,
+                      " ",
+                      displayName2
+                    ] })
+                  ] })
+                },
+                `folder-${node.path}`
+              );
+            }
+            const isSelectedFile = node.fileIndex === safeFileIndex;
+            const added = node.added ?? 0;
+            const removed = node.removed ?? 0;
+            const addedPart = added > 0 ? `+${added}` : "";
+            const removedPart = removed > 0 ? `-${removed}` : "";
+            const bubbleColor = added > 0 && removed > 0 ? "#ffaa00" : removed > 0 ? "#ff4444" : "#66bb6a";
+            const overhead = indent.length + 2 + statsColumnWidth + 1;
+            const nameMax = Math.max(1, usable - overhead);
+            const displayName = truncateName(node.name, nameMax);
+            const bg = isCursor ? "#0d2b0d" : isSelectedFile ? "#0a1a0a" : void 0;
+            return /* @__PURE__ */ jsxs4(
+              "box",
+              {
+                id: `tree-${node.path}`,
+                paddingX: 1,
+                height: 1,
+                backgroundColor: bg,
+                onMouseDown: () => selectFile(node.fileIndex, i),
+                flexDirection: "row",
+                justifyContent: "space-between",
+                children: [
+                  /* @__PURE__ */ jsxs4("text", { children: [
+                    /* @__PURE__ */ jsx4("span", { fg: "#555555", children: indent }),
+                    /* @__PURE__ */ jsxs4("span", { fg: bubbleColor, children: [
+                      "\u25CF",
+                      " "
+                    ] }),
+                    /* @__PURE__ */ jsx4("span", { fg: isSelectedFile || isCursor ? "#66bb6a" : "#cccccc", children: displayName })
+                  ] }),
+                  /* @__PURE__ */ jsx4("box", { width: statsColumnWidth, flexShrink: 0, justifyContent: "flex-end", flexDirection: "row", children: /* @__PURE__ */ jsxs4("text", { children: [
+                    addedPart && /* @__PURE__ */ jsx4("span", { fg: "#66bb6a", children: addedPart }),
+                    addedPart && removedPart && /* @__PURE__ */ jsx4("span", { fg: "#444444", children: " " }),
+                    removedPart && /* @__PURE__ */ jsx4("span", { fg: "#ff4444", children: removedPart })
+                  ] }) })
+                ]
+              },
+              `file-${node.path}`
+            );
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("box", { flexGrow: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4("box", { paddingX: 1, flexDirection: "column", flexShrink: 0, children: [
+        /* @__PURE__ */ jsxs4("box", { flexDirection: "row", justifyContent: "space-between", height: 1, children: [
+          /* @__PURE__ */ jsxs4("text", { children: [
+            /* @__PURE__ */ jsx4("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx4("strong", { children: repoName }) }),
+            totalAdded > 0 && /* @__PURE__ */ jsxs4("span", { fg: "#66bb6a", children: [
+              "  +",
+              totalAdded
+            ] }),
+            totalAdded > 0 && totalRemoved > 0 && /* @__PURE__ */ jsx4("span", { fg: "#444444", children: " " }),
+            totalRemoved > 0 && /* @__PURE__ */ jsxs4("span", { fg: "#ff4444", children: [
+              "-",
+              totalRemoved
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4("text", { fg: "#555555", children: [
+            safeFileIndex + 1,
+            "/",
+            files.length
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4("box", { flexDirection: "row", height: 1, backgroundColor: "#0d0d0d", paddingX: 1, children: /* @__PURE__ */ jsxs4("text", { children: [
+          /* @__PURE__ */ jsx4("span", { fg: diffPaneActive ? "#66bb6a" : "#444444", children: diffPaneActive ? "\u25B8 " : "  " }),
+          (() => {
+            const lastSlash = selected.path.lastIndexOf("/");
+            const dir = lastSlash >= 0 ? selected.path.slice(0, lastSlash + 1) : "";
+            const base = lastSlash >= 0 ? selected.path.slice(lastSlash + 1) : selected.path;
+            return /* @__PURE__ */ jsxs4(Fragment, { children: [
+              dir && /* @__PURE__ */ jsx4("span", { fg: "#666666", children: dir }),
+              /* @__PURE__ */ jsx4("span", { fg: diffPaneActive ? "#66bb6a" : "#ffffff", children: /* @__PURE__ */ jsx4("strong", { children: base }) })
+            ] });
+          })()
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx4("scrollbox", { ref: diffScrollRef, flexGrow: 1, focused: focused && innerFocus === "diff", children: /* @__PURE__ */ jsx4("box", { paddingX: 1, children: /* @__PURE__ */ jsx4(DiffView, { diff: selected.diff, filePath: selected.path }) }) })
+    ] })
+  ] });
+}
+
+// src/interactive/components/StructuredUserMessage.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "@opentui/react/jsx-runtime";
 function SourceBadge({ source }) {
   const config = SOURCE_CONFIG[source];
-  return /* @__PURE__ */ jsx4("text", { children: /* @__PURE__ */ jsx4("span", { fg: "#000000", bg: config.color, children: ` ${config.label} ` }) });
+  return /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: "#000000", bg: config.color, children: ` ${config.label} ` }) });
 }
 function MetadataPill({ label, value }) {
-  return /* @__PURE__ */ jsx4("text", { children: label ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsxs4("span", { fg: "#888888", children: [
+  return /* @__PURE__ */ jsx5("text", { children: label ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5("span", { fg: "#888888", children: [
       label,
       ": "
     ] }),
-    /* @__PURE__ */ jsx4("span", { fg: "#cccccc", children: value })
-  ] }) : /* @__PURE__ */ jsx4("span", { fg: "#cccccc", children: value }) });
+    /* @__PURE__ */ jsx5("span", { fg: "#cccccc", children: value })
+  ] }) : /* @__PURE__ */ jsx5("span", { fg: "#cccccc", children: value }) });
 }
 function MessageBody({ children }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsx4("text", { fg: "#ffffff", selectable: true, children });
+  return /* @__PURE__ */ jsx5("text", { fg: "#ffffff", selectable: true, children });
 }
 function ExpandableSection({ label, children }) {
-  const [expanded, setExpanded] = useState3(false);
+  const [expanded, setExpanded] = useState4(false);
   if (!children) return null;
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx4("box", { onMouseDown: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsxs4("text", { children: [
-      /* @__PURE__ */ jsxs4("span", { fg: "#555555", children: [
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5("box", { onMouseDown: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsxs5("text", { children: [
+      /* @__PURE__ */ jsxs5("span", { fg: "#555555", children: [
         expanded ? "\u25BE" : "\u25B8",
         " "
       ] }),
-      /* @__PURE__ */ jsx4("span", { fg: "#888888", children: label })
+      /* @__PURE__ */ jsx5("span", { fg: "#888888", children: label })
     ] }) }),
-    expanded && /* @__PURE__ */ jsx4("box", { paddingLeft: 2, children: /* @__PURE__ */ jsx4("text", { fg: "#888888", selectable: true, children }) })
+    expanded && /* @__PURE__ */ jsx5("box", { paddingLeft: 2, children: /* @__PURE__ */ jsx5("text", { fg: "#888888", selectable: true, children }) })
+  ] });
+}
+function ExpandableDiffSection({ label, diffContent, filePath }) {
+  const [expanded, setExpanded] = useState4(false);
+  if (!diffContent) return null;
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5("box", { onMouseDown: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsxs5("text", { children: [
+      /* @__PURE__ */ jsxs5("span", { fg: "#555555", children: [
+        expanded ? "\u25BE" : "\u25B8",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx5("span", { fg: "#888888", children: label })
+    ] }) }),
+    expanded && /* @__PURE__ */ jsx5("box", { paddingLeft: 1, children: /* @__PURE__ */ jsx5(DiffView, { diff: diffContent, filePath }) })
   ] });
 }
 function CIFailureMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "ci_failure" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "Workflow", value: data.workflowName }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "Status", value: data.conclusion })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "ci_failure" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "Workflow", value: data.workflowName }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "Status", value: data.conclusion })
     ] }),
-    /* @__PURE__ */ jsxs4("text", { fg: "#ffffff", children: [
+    /* @__PURE__ */ jsxs5("text", { fg: "#ffffff", children: [
       "Workflow ",
-      /* @__PURE__ */ jsx4("span", { fg: "#ff4444", children: data.conclusionText }),
+      /* @__PURE__ */ jsx5("span", { fg: "#ff4444", children: data.conclusionText }),
       " on PR #" + data.prNumber
     ] }),
-    data.workflowFile && /* @__PURE__ */ jsx4(MetadataPill, { label: "File", value: data.workflowFile }),
-    data.runUrl && /* @__PURE__ */ jsx4(MetadataPill, { label: "Run", value: data.runUrl })
+    data.workflowFile && /* @__PURE__ */ jsx5(MetadataPill, { label: "File", value: data.workflowFile }),
+    data.runUrl && /* @__PURE__ */ jsx5(MetadataPill, { label: "Run", value: data.runUrl })
   ] });
 }
 function LinearIssueMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "linear_issue" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "", value: data.identifier })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "linear_issue" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "", value: data.identifier })
     ] }),
-    /* @__PURE__ */ jsx4("text", { fg: "#ffffff", children: /* @__PURE__ */ jsx4("strong", { children: data.title }) }),
-    data.description && data.description !== "No description provided." && /* @__PURE__ */ jsx4(MessageBody, { children: data.description }),
-    /* @__PURE__ */ jsx4(ExpandableSection, { label: "Additional context", children: data.additionalContext }),
-    data.parentIssue && /* @__PURE__ */ jsx4(ExpandableSection, { label: `Parent: ${data.parentIssue.identifier} - ${data.parentIssue.title}`, children: data.parentIssue.description })
+    /* @__PURE__ */ jsx5("text", { fg: "#ffffff", children: /* @__PURE__ */ jsx5("strong", { children: data.title }) }),
+    data.description && data.description !== "No description provided." && /* @__PURE__ */ jsx5(MessageBody, { children: data.description }),
+    /* @__PURE__ */ jsx5(ExpandableSection, { label: "Additional context", children: data.additionalContext }),
+    data.parentIssue && /* @__PURE__ */ jsx5(ExpandableSection, { label: `Parent: ${data.parentIssue.identifier} - ${data.parentIssue.title}`, children: data.parentIssue.description })
   ] });
 }
 function GitHubIssueNewMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "github_issue_new" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "Issue", value: `#${data.issueNumber}` }),
-      data.triggeringUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.triggeringUser}` })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "github_issue_new" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "Issue", value: `#${data.issueNumber}` }),
+      data.triggeringUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.triggeringUser}` })
     ] }),
-    /* @__PURE__ */ jsx4("text", { fg: "#ffffff", children: /* @__PURE__ */ jsx4("strong", { children: data.issueTitle }) }),
-    data.triggeringComment && /* @__PURE__ */ jsx4(MessageBody, { children: data.triggeringComment }),
-    /* @__PURE__ */ jsx4(ExpandableSection, { label: "Issue description", children: data.issueDescription })
+    /* @__PURE__ */ jsx5("text", { fg: "#ffffff", children: /* @__PURE__ */ jsx5("strong", { children: data.issueTitle }) }),
+    data.triggeringComment && /* @__PURE__ */ jsx5(MessageBody, { children: data.triggeringComment }),
+    /* @__PURE__ */ jsx5(ExpandableSection, { label: "Issue description", children: data.issueDescription })
   ] });
 }
 function GitHubIssueExistingMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "github_issue_existing" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "Issue", value: `#${data.issueNumber}` }),
-      data.commentUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.commentUser}` })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "github_issue_existing" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "Issue", value: `#${data.issueNumber}` }),
+      data.commentUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.commentUser}` })
     ] }),
-    /* @__PURE__ */ jsx4(MessageBody, { children: data.commentBody })
+    /* @__PURE__ */ jsx5(MessageBody, { children: data.commentBody })
   ] });
 }
 function GitHubPRNewMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "github_pr_new" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
-      data.mentioningUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.mentioningUser}` })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "github_pr_new" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
+      data.mentioningUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.mentioningUser}` })
     ] }),
-    /* @__PURE__ */ jsx4(MessageBody, { children: data.contextMessage })
+    /* @__PURE__ */ jsx5(MessageBody, { children: data.contextMessage })
   ] });
 }
 function GitHubPRCodeReviewMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "github_pr_existing_review" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
-      data.commentUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.commentUser}` }),
-      data.filePath && /* @__PURE__ */ jsx4(MetadataPill, { label: "File", value: data.filePath })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "github_pr_existing_review" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
+      data.commentUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.commentUser}` }),
+      data.filePath && /* @__PURE__ */ jsx5(MetadataPill, { label: "File", value: data.filePath })
     ] }),
-    /* @__PURE__ */ jsx4(MessageBody, { children: data.commentBody }),
-    /* @__PURE__ */ jsx4(ExpandableSection, { label: "Diff context", children: data.diffHunk })
+    /* @__PURE__ */ jsx5(MessageBody, { children: data.commentBody }),
+    /* @__PURE__ */ jsx5(ExpandableDiffSection, { label: "Diff context", diffContent: data.diffHunk, filePath: data.filePath })
   ] });
 }
 function GitHubPRReviewMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "github_pr_existing_pr_review" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
-      data.reviewUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.reviewUser}` })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "github_pr_existing_pr_review" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
+      data.reviewUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.reviewUser}` })
     ] }),
-    /* @__PURE__ */ jsxs4("text", { fg: "#888888", children: [
+    /* @__PURE__ */ jsxs5("text", { fg: "#888888", children: [
       "@" + data.reviewUser + " ",
-      /* @__PURE__ */ jsx4("span", { fg: "#ffffff", children: data.reviewAction })
+      /* @__PURE__ */ jsx5("span", { fg: "#ffffff", children: data.reviewAction })
     ] }),
-    data.commentBody && /* @__PURE__ */ jsx4(MessageBody, { children: data.commentBody })
+    data.commentBody && /* @__PURE__ */ jsx5(MessageBody, { children: data.commentBody })
   ] });
 }
 function GitHubPRGeneralMessage({ data }) {
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "github_pr_existing_general" }),
-      /* @__PURE__ */ jsx4(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
-      data.commentUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.commentUser}` })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "github_pr_existing_general" }),
+      /* @__PURE__ */ jsx5(MetadataPill, { label: "PR", value: `#${data.prNumber}` }),
+      data.commentUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.commentUser}` })
     ] }),
-    /* @__PURE__ */ jsx4(MessageBody, { children: data.commentBody })
+    /* @__PURE__ */ jsx5(MessageBody, { children: data.commentBody })
   ] });
 }
 function SlackTaskMessage({ data }) {
   const hasDistinctContext = data.threadContext && data.threadContext !== `@${data.latestMessageUser}: ${data.latestMessageText}`;
-  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx4(SourceBadge, { source: "slack_task" }),
-      data.workspaceTarget && /* @__PURE__ */ jsx4(MetadataPill, { label: "Target", value: data.workspaceTarget }),
-      data.latestMessageUser && /* @__PURE__ */ jsx4(MetadataPill, { label: "From", value: `@${data.latestMessageUser}` })
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs5("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx5(SourceBadge, { source: "slack_task" }),
+      data.workspaceTarget && /* @__PURE__ */ jsx5(MetadataPill, { label: "Target", value: data.workspaceTarget }),
+      data.latestMessageUser && /* @__PURE__ */ jsx5(MetadataPill, { label: "From", value: `@${data.latestMessageUser}` })
     ] }),
-    /* @__PURE__ */ jsx4(MessageBody, { children: data.latestMessageText }),
-    hasDistinctContext && /* @__PURE__ */ jsx4(ExpandableSection, { label: "Thread context", children: data.threadContext })
+    /* @__PURE__ */ jsx5(MessageBody, { children: data.latestMessageText }),
+    hasDistinctContext && /* @__PURE__ */ jsx5(ExpandableSection, { label: "Thread context", children: data.threadContext })
   ] });
 }
 function StructuredUserMessage({ parsed }) {
   switch (parsed.source) {
     case "ci_failure":
-      return /* @__PURE__ */ jsx4(CIFailureMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(CIFailureMessage, { data: parsed });
     case "linear_issue":
-      return /* @__PURE__ */ jsx4(LinearIssueMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(LinearIssueMessage, { data: parsed });
     case "github_issue_new":
-      return /* @__PURE__ */ jsx4(GitHubIssueNewMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(GitHubIssueNewMessage, { data: parsed });
     case "github_issue_existing":
-      return /* @__PURE__ */ jsx4(GitHubIssueExistingMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(GitHubIssueExistingMessage, { data: parsed });
     case "github_pr_new":
-      return /* @__PURE__ */ jsx4(GitHubPRNewMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(GitHubPRNewMessage, { data: parsed });
     case "github_pr_existing_review":
-      return /* @__PURE__ */ jsx4(GitHubPRCodeReviewMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(GitHubPRCodeReviewMessage, { data: parsed });
     case "github_pr_existing_pr_review":
-      return /* @__PURE__ */ jsx4(GitHubPRReviewMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(GitHubPRReviewMessage, { data: parsed });
     case "github_pr_existing_general":
-      return /* @__PURE__ */ jsx4(GitHubPRGeneralMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(GitHubPRGeneralMessage, { data: parsed });
     case "slack_task":
-      return /* @__PURE__ */ jsx4(SlackTaskMessage, { data: parsed });
+      return /* @__PURE__ */ jsx5(SlackTaskMessage, { data: parsed });
     default: {
       const _exhaustive = parsed;
       throw new Error(`Unhandled prompt source: ${_exhaustive.source}`);
@@ -1043,36 +1554,7 @@ function StructuredUserMessage({ parsed }) {
 }
 
 // src/interactive/components/ChatMessage.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "@opentui/react/jsx-runtime";
-var sharedSyntaxStyle = null;
-function getSyntaxStyle() {
-  if (!sharedSyntaxStyle) {
-    sharedSyntaxStyle = SyntaxStyle.fromTheme([
-      // Markdown text styling
-      { scope: ["markup.heading", "markup.heading.1", "markup.heading.2", "markup.heading.3"], style: { foreground: "#66bb6a", bold: true } },
-      { scope: ["markup.bold", "markup.strong"], style: { foreground: "#ffffff", bold: true } },
-      { scope: ["markup.italic", "markup.emphasis"], style: { foreground: "#e0e0e0", italic: true } },
-      { scope: ["markup.link"], style: { foreground: "#7dcfff", underline: true } },
-      { scope: ["markup.link.url"], style: { foreground: "#7dcfff", underline: true } },
-      { scope: ["markup.link.text"], style: { foreground: "#66bb6a", underline: true } },
-      { scope: ["markup.link.label"], style: { foreground: "#66bb6a", underline: true } },
-      { scope: ["markup.list"], style: { foreground: "#66bb6a" } },
-      { scope: ["markup.quote"], style: { foreground: "#888888", italic: true } },
-      { scope: ["markup.raw", "markup.raw.block"], style: { foreground: "#bb9af7" } },
-      { scope: ["markup.raw.inline"], style: { foreground: "#bb9af7", background: "#1a1a2e" } },
-      // Code syntax highlighting
-      { scope: ["keyword", "keyword.control", "keyword.operator"], style: { foreground: "#bb9af7" } },
-      { scope: ["string", "string.quoted"], style: { foreground: "#9ece6a" } },
-      { scope: ["comment", "comment.line", "comment.block"], style: { foreground: "#555555", italic: true } },
-      { scope: ["constant", "constant.numeric", "constant.language"], style: { foreground: "#ff9e64" } },
-      { scope: ["entity.name.function", "support.function"], style: { foreground: "#7aa2f7" } },
-      { scope: ["entity.name.type", "support.type"], style: { foreground: "#2ac3de" } },
-      { scope: ["variable", "variable.other"], style: { foreground: "#c0caf5" } },
-      { scope: ["punctuation"], style: { foreground: "#888888" } }
-    ]);
-  }
-  return sharedSyntaxStyle;
-}
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "@opentui/react/jsx-runtime";
 var AGENT_LABELS = {
   claude: "Claude",
   codex: "Codex"
@@ -1081,15 +1563,15 @@ function truncate2(text, maxLen) {
   return text.length > maxLen ? text.slice(0, maxLen - 1) + "\u2026" : text;
 }
 function StatusIcon({ status }) {
-  if (status === "completed") return /* @__PURE__ */ jsxs5("span", { fg: "#66bb6a", children: [
+  if (status === "completed") return /* @__PURE__ */ jsxs6("span", { fg: "#66bb6a", children: [
     " ",
     "\u2713"
   ] });
-  if (status === "failed") return /* @__PURE__ */ jsxs5("span", { fg: "#ff4444", children: [
+  if (status === "failed") return /* @__PURE__ */ jsxs6("span", { fg: "#ff4444", children: [
     " ",
     "\u2717"
   ] });
-  if (status === "in_progress") return /* @__PURE__ */ jsxs5("span", { fg: "#ffaa00", children: [
+  if (status === "in_progress") return /* @__PURE__ */ jsxs6("span", { fg: "#ffaa00", children: [
     " ",
     "\u2026"
   ] });
@@ -1103,7 +1585,7 @@ function ActionLine({
   onToggle,
   expanded
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "box",
     {
       paddingX: 1,
@@ -1111,15 +1593,15 @@ function ActionLine({
       justifyContent: "space-between",
       onMouseDown: onToggle,
       children: [
-        /* @__PURE__ */ jsxs5("text", { children: [
-          /* @__PURE__ */ jsx5("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx5("strong", { children: label }) }),
-          /* @__PURE__ */ jsxs5("span", { fg: "#cccccc", children: [
+        /* @__PURE__ */ jsxs6("text", { children: [
+          /* @__PURE__ */ jsx6("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx6("strong", { children: label }) }),
+          /* @__PURE__ */ jsxs6("span", { fg: "#cccccc", children: [
             " ",
             arg.replace(/\n/g, " ").replace(/\s+/g, " ")
           ] }),
-          /* @__PURE__ */ jsx5(StatusIcon, { status })
+          /* @__PURE__ */ jsx6(StatusIcon, { status })
         ] }),
-        expandable && /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: "#555555", children: expanded ? "\u25BE" : "\u25B8" }) })
+        expandable && /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#555555", children: expanded ? "\u25BE" : "\u25B8" }) })
       ]
     }
   );
@@ -1130,9 +1612,9 @@ function ExpandableAction({
   status,
   children
 }) {
-  const [expanded, setExpanded] = useState4(false);
-  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx5(
+  const [expanded, setExpanded] = useState5(false);
+  return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx6(
       ActionLine,
       {
         label,
@@ -1146,12 +1628,59 @@ function ExpandableAction({
     expanded && children
   ] });
 }
+var CHANGE_STYLE = {
+  add: { color: "#66bb6a", sign: "+" },
+  delete: { color: "#ff4444", sign: "-" }
+};
+var DEFAULT_CHANGE_STYLE = { color: "#ffaa00", sign: "~" };
+function getChangeStyle(action) {
+  return CHANGE_STYLE[action] ?? DEFAULT_CHANGE_STYLE;
+}
+function PatchOperation({ op, defaultExpanded = false }) {
+  const [expanded, setExpanded] = useState5(defaultExpanded);
+  const { color, sign } = getChangeStyle(op.action);
+  const stats = useMemo4(() => op.diff ? countDiffStats(op.diff) : null, [op.diff]);
+  if (!op.diff) {
+    return /* @__PURE__ */ jsxs6("text", { children: [
+      /* @__PURE__ */ jsx6("span", { fg: color, children: sign }),
+      /* @__PURE__ */ jsxs6("span", { fg: "#cccccc", children: [
+        " ",
+        op.path
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs6("box", { onMouseDown: () => setExpanded((e) => !e), flexDirection: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs6("text", { children: [
+        /* @__PURE__ */ jsx6("span", { fg: color, children: sign }),
+        /* @__PURE__ */ jsxs6("span", { fg: "#cccccc", children: [
+          " ",
+          op.path
+        ] }),
+        stats && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx6("span", { fg: "#444444", children: " " }),
+          stats.removed > 0 && /* @__PURE__ */ jsxs6("span", { fg: "#ff4444", children: [
+            "-",
+            stats.removed
+          ] }),
+          stats.removed > 0 && stats.added > 0 && /* @__PURE__ */ jsx6("span", { fg: "#444444", children: " " }),
+          stats.added > 0 && /* @__PURE__ */ jsxs6("span", { fg: "#66bb6a", children: [
+            "+",
+            stats.added
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#555555", children: expanded ? "\u25BE" : "\u25B8" }) })
+    ] }),
+    expanded && /* @__PURE__ */ jsx6("box", { paddingLeft: 1, children: /* @__PURE__ */ jsx6(DiffView, { diff: op.diff, filePath: op.path }) })
+  ] });
+}
 function isStructuredPrompt(p) {
   return p.source !== "raw";
 }
 function UserMessageContent({ content }) {
-  const parsed = useMemo3(() => parseUserMessage(content), [content]);
-  return /* @__PURE__ */ jsx5(
+  const parsed = useMemo4(() => parseUserMessage(content), [content]);
+  return /* @__PURE__ */ jsx6(
     "box",
     {
       flexDirection: "column",
@@ -1159,9 +1688,9 @@ function UserMessageContent({ content }) {
       paddingX: 2,
       paddingY: 1,
       marginX: 1,
-      children: isStructuredPrompt(parsed) ? /* @__PURE__ */ jsx5(StructuredUserMessage, { parsed }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-        /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx5("strong", { children: "You" }) }) }),
-        /* @__PURE__ */ jsx5("text", { fg: "#ffffff", selectable: true, children: content })
+      children: isStructuredPrompt(parsed) ? /* @__PURE__ */ jsx6(StructuredUserMessage, { parsed }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx6("strong", { children: "You" }) }) }),
+        /* @__PURE__ */ jsx6("text", { fg: "#ffffff", selectable: true, children: content })
       ] })
     }
   );
@@ -1170,14 +1699,14 @@ function ChatMessage({ message, provider }) {
   switch (message.type) {
     case "user": {
       if (message.content === "Request interrupted") {
-        return /* @__PURE__ */ jsx5("box", { paddingX: 1, justifyContent: "center", children: /* @__PURE__ */ jsx5("text", { fg: "#555555", children: "--- Request interrupted ---" }) });
+        return /* @__PURE__ */ jsx6("box", { paddingX: 1, justifyContent: "center", children: /* @__PURE__ */ jsx6("text", { fg: "#555555", children: "--- Request interrupted ---" }) });
       }
-      return /* @__PURE__ */ jsx5(UserMessageContent, { content: message.content });
+      return /* @__PURE__ */ jsx6(UserMessageContent, { content: message.content });
     }
     case "agent":
-      return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", paddingX: 1, children: [
-        /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx5("strong", { children: AGENT_LABELS[provider] }) }) }),
-        /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", paddingX: 1, children: [
+        /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx6("strong", { children: AGENT_LABELS[provider] }) }) }),
+        /* @__PURE__ */ jsx6(
           "markdown",
           {
             content: message.content,
@@ -1190,57 +1719,54 @@ function ChatMessage({ message, provider }) {
         )
       ] });
     case "reasoning":
-      return /* @__PURE__ */ jsx5("box", { paddingX: 1, children: /* @__PURE__ */ jsx5(SpinnerLabel, { color: "#555555", label: "thinking" }) });
+      return /* @__PURE__ */ jsx6("box", { paddingX: 1, children: /* @__PURE__ */ jsx6(SpinnerLabel, { color: "#555555", label: "thinking" }) });
     case "command": {
       const cmdArg = truncate2(message.command, 60);
       const exitSuffix = message.exitCode !== void 0 && message.exitCode !== 0 ? ` (exit ${message.exitCode})` : "";
       if (!message.output) {
-        return /* @__PURE__ */ jsx5(ActionLine, { label: "Command", arg: cmdArg + exitSuffix, status: message.status });
+        return /* @__PURE__ */ jsx6(ActionLine, { label: "Command", arg: cmdArg + exitSuffix, status: message.status });
       }
-      return /* @__PURE__ */ jsx5(ExpandableAction, { label: "Command", arg: cmdArg + exitSuffix, status: message.status, children: /* @__PURE__ */ jsx5("box", { paddingLeft: 2, paddingX: 1, children: /* @__PURE__ */ jsx5("text", { fg: "#888888", selectable: true, children: message.output.length > 500 ? message.output.slice(0, 500) + "\n\u2026" : message.output }) }) });
+      return /* @__PURE__ */ jsx6(ExpandableAction, { label: "Command", arg: cmdArg + exitSuffix, status: message.status, children: /* @__PURE__ */ jsx6("box", { paddingLeft: 2, paddingX: 1, children: /* @__PURE__ */ jsx6("text", { fg: "#888888", selectable: true, children: message.output.length > 500 ? message.output.slice(0, 500) + "\n\u2026" : message.output }) }) });
     }
     case "file_change": {
       const count = message.changes.length;
-      return /* @__PURE__ */ jsx5(ExpandableAction, { label: "Files", arg: `${count}`, status: message.status, children: /* @__PURE__ */ jsx5("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: message.changes.map((change, i) => /* @__PURE__ */ jsxs5("text", { children: [
-        /* @__PURE__ */ jsx5(
-          "span",
-          {
-            fg: change.kind === "add" ? "#66bb6a" : change.kind === "delete" ? "#ff4444" : "#ffaa00",
-            children: change.kind === "add" ? "+" : change.kind === "delete" ? "-" : "~"
-          }
-        ),
-        /* @__PURE__ */ jsxs5("span", { fg: "#cccccc", children: [
-          " ",
-          change.path
-        ] })
-      ] }, i)) }) });
+      return /* @__PURE__ */ jsx6(ExpandableAction, { label: "Files", arg: `${count}`, status: message.status, children: /* @__PURE__ */ jsx6("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: message.changes.map((change, i) => {
+        const { color, sign } = getChangeStyle(change.kind);
+        return /* @__PURE__ */ jsxs6("text", { children: [
+          /* @__PURE__ */ jsx6("span", { fg: color, children: sign }),
+          /* @__PURE__ */ jsxs6("span", { fg: "#cccccc", children: [
+            " ",
+            change.path
+          ] })
+        ] }, i);
+      }) }) });
     }
     case "tool_call": {
       const toolArg = truncate2(message.tool, 50);
       if (message.output || message.input) {
-        return /* @__PURE__ */ jsx5(ExpandableAction, { label: "Tool", arg: toolArg, status: message.status, children: /* @__PURE__ */ jsxs5("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: [
-          message.input && /* @__PURE__ */ jsx5("text", { fg: "#888888", selectable: true, children: typeof message.input === "string" ? truncate2(message.input, 300) : truncate2(JSON.stringify(message.input, null, 2), 300) }),
-          message.output && /* @__PURE__ */ jsx5("text", { fg: "#888888", selectable: true, children: truncate2(message.output, 300) })
+        return /* @__PURE__ */ jsx6(ExpandableAction, { label: "Tool", arg: toolArg, status: message.status, children: /* @__PURE__ */ jsxs6("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: [
+          message.input && /* @__PURE__ */ jsx6("text", { fg: "#888888", selectable: true, children: typeof message.input === "string" ? truncate2(message.input, 300) : truncate2(JSON.stringify(message.input, null, 2), 300) }),
+          message.output && /* @__PURE__ */ jsx6("text", { fg: "#888888", selectable: true, children: truncate2(message.output, 300) })
         ] }) });
       }
-      return /* @__PURE__ */ jsx5(ActionLine, { label: "Tool", arg: toolArg, status: message.status });
+      return /* @__PURE__ */ jsx6(ActionLine, { label: "Tool", arg: toolArg, status: message.status });
     }
     case "web_search":
-      return /* @__PURE__ */ jsx5(ActionLine, { label: "Search", arg: truncate2(message.query, 50), status: message.status });
+      return /* @__PURE__ */ jsx6(ActionLine, { label: "Search", arg: truncate2(message.query, 50), status: message.status });
     case "todo_list": {
       const completed = message.items.filter((i) => i.completed).length;
       const total = message.items.length;
-      return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", paddingX: 1, children: [
-        /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: "#888888", children: /* @__PURE__ */ jsxs5("strong", { children: [
+      return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", paddingX: 1, children: [
+        /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#888888", children: /* @__PURE__ */ jsxs6("strong", { children: [
           "Plan (",
           completed,
           "/",
           total,
           ")"
         ] }) }) }),
-        message.items.map((item, i) => /* @__PURE__ */ jsxs5("text", { children: [
-          /* @__PURE__ */ jsx5("span", { fg: item.completed ? "#66bb6a" : "#555555", children: item.completed ? "  \u2611" : "  \u2610" }),
-          /* @__PURE__ */ jsxs5("span", { fg: "#ffffff", children: [
+        message.items.map((item, i) => /* @__PURE__ */ jsxs6("text", { children: [
+          /* @__PURE__ */ jsx6("span", { fg: item.completed ? "#66bb6a" : "#555555", children: item.completed ? "  \u2611" : "  \u2610" }),
+          /* @__PURE__ */ jsxs6("span", { fg: "#ffffff", children: [
             " ",
             item.text
           ] })
@@ -1248,26 +1774,15 @@ function ChatMessage({ message, provider }) {
       ] });
     }
     case "subagent":
-      return /* @__PURE__ */ jsx5(ActionLine, { label: "Agent", arg: truncate2(message.description, 50), status: message.status });
+      return /* @__PURE__ */ jsx6(ActionLine, { label: "Agent", arg: truncate2(message.description, 50), status: message.status });
     case "error":
-      return /* @__PURE__ */ jsx5("box", { paddingX: 1, children: /* @__PURE__ */ jsx5("text", { fg: "#ff4444", selectable: true, children: message.message }) });
+      return /* @__PURE__ */ jsx6("box", { paddingX: 1, children: /* @__PURE__ */ jsx6("text", { fg: "#ff4444", selectable: true, children: message.message }) });
     case "skill":
-      return /* @__PURE__ */ jsx5(ActionLine, { label: "Skill", arg: message.skillName + (message.args ? ` ${message.args}` : ""), status: message.status });
+      return /* @__PURE__ */ jsx6(ActionLine, { label: "Skill", arg: message.skillName + (message.args ? ` ${message.args}` : ""), status: message.status });
     case "patch": {
       const opCount = message.operations.length;
-      return /* @__PURE__ */ jsx5(ExpandableAction, { label: "Patch", arg: `${opCount}`, children: /* @__PURE__ */ jsx5("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: message.operations.map((op, i) => /* @__PURE__ */ jsxs5("text", { children: [
-        /* @__PURE__ */ jsx5(
-          "span",
-          {
-            fg: op.action === "add" ? "#66bb6a" : op.action === "delete" ? "#ff4444" : "#ffaa00",
-            children: op.action === "add" ? "+" : op.action === "delete" ? "-" : "~"
-          }
-        ),
-        /* @__PURE__ */ jsxs5("span", { fg: "#cccccc", children: [
-          " ",
-          op.path
-        ] })
-      ] }, i)) }) });
+      const autoExpand = opCount === 1 && !!message.operations[0].diff;
+      return /* @__PURE__ */ jsx6(ExpandableAction, { label: "Patch", arg: `${opCount}`, children: /* @__PURE__ */ jsx6("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: message.operations.map((op, i) => /* @__PURE__ */ jsx6(PatchOperation, { op, defaultExpanded: autoExpand }, i)) }) });
     }
     default:
       return null;
@@ -1275,7 +1790,7 @@ function ChatMessage({ message, provider }) {
 }
 
 // src/interactive/components/ChatArea.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "@opentui/react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "@opentui/react/jsx-runtime";
 var textareaKeyBindings = [
   { name: "return", action: "submit" },
   { name: "return", shift: true, action: "newline" },
@@ -1298,10 +1813,10 @@ function ChatArea({
   isProcessing,
   loading
 }) {
-  const textareaRef = useRef(null);
-  const scrollboxRef = useRef(null);
-  const isAtBottomRef = useRef(true);
-  const onSendMessageRef = useRef(onSendMessage);
+  const textareaRef = useRef2(null);
+  const scrollboxRef = useRef2(null);
+  const isAtBottomRef = useRef2(true);
+  const onSendMessageRef = useRef2(onSendMessage);
   onSendMessageRef.current = onSendMessage;
   const inputFocused = focusPanel === "chat-input";
   const tabsFocused = focusPanel === "chat-tabs";
@@ -1343,20 +1858,7 @@ function ChatArea({
       textarea.onSubmit = void 0;
     };
   }, []);
-  useKeyboard2((key) => {
-    if (!historyFocused) return;
-    const scrollbox = scrollboxRef.current;
-    if (!scrollbox) return;
-    if (key.name === "j" || key.name === "down") {
-      scrollbox.scrollBy(3);
-      return;
-    }
-    if (key.name === "k" || key.name === "up") {
-      scrollbox.scrollBy(-3);
-      return;
-    }
-  });
-  useKeyboard2((key) => {
+  useKeyboard3((key) => {
     if (!tabsFocused || chats.length <= 1 || !selectedChatId) return;
     if (key.name === "left" || key.name === "right" || key.name === "tab" && !key.shift) {
       const currentIdx = chats.findIndex((c) => c.id === selectedChatId);
@@ -1366,7 +1868,7 @@ function ChatArea({
       }
     }
   });
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "box",
     {
       flexGrow: 1,
@@ -1378,7 +1880,7 @@ function ChatArea({
       flexDirection: "column",
       backgroundColor: "#000000",
       children: [
-        chats.length > 1 && /* @__PURE__ */ jsx6(
+        chats.length > 1 && /* @__PURE__ */ jsx7(
           "box",
           {
             height: 3,
@@ -1394,7 +1896,7 @@ function ChatArea({
             children: chats.map((chat) => {
               const isSelected = chat.id === selectedChatId;
               const label = `${chat.title}${chat.processing ? " ..." : ""}`;
-              return /* @__PURE__ */ jsx6(
+              return /* @__PURE__ */ jsx7(
                 "box",
                 {
                   backgroundColor: isSelected ? "#1a1a1a" : void 0,
@@ -1403,14 +1905,14 @@ function ChatArea({
                     onSelectChat(chat.id);
                     onFocus("chat-tabs");
                   },
-                  children: /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: isSelected ? modeColors.text : "#666666", children: label }) })
+                  children: /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: isSelected ? modeColors.text : "#666666", children: label }) })
                 },
                 chat.id
               );
             })
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "scrollbox",
           {
             ref: scrollboxRef,
@@ -1419,22 +1921,22 @@ function ChatArea({
             paddingX: 1,
             paddingY: 1,
             onMouseDown: () => onFocus("chat-history"),
-            children: loading ? /* @__PURE__ */ jsx6("box", { paddingX: 1, children: /* @__PURE__ */ jsx6("text", { fg: "#666666", children: "Loading messages..." }) }) : displayMessages.length === 0 ? /* @__PURE__ */ jsx6("box", { paddingX: 1, children: /* @__PURE__ */ jsx6("text", { fg: "#666666", children: "No messages yet. Send a message to start chatting." }) }) : (() => {
+            children: loading ? /* @__PURE__ */ jsx7("box", { paddingX: 1, children: /* @__PURE__ */ jsx7("text", { fg: "#666666", children: "Loading messages..." }) }) : displayMessages.length === 0 ? /* @__PURE__ */ jsx7("box", { paddingX: 1, children: /* @__PURE__ */ jsx7("text", { fg: "#666666", children: "No messages yet. Send a message to start chatting." }) }) : (() => {
               const activeChat = chats.find((c) => c.id === selectedChatId);
               const provider = activeChat?.provider ?? "claude";
               const primaryTypes = /* @__PURE__ */ new Set(["user", "agent", "todo_list"]);
               return displayMessages.map((msg, i) => {
                 const prev = i > 0 ? displayMessages[i - 1] : null;
                 const needsSpacing = prev && (primaryTypes.has(msg.type) || primaryTypes.has(prev.type));
-                return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
-                  needsSpacing && /* @__PURE__ */ jsx6("box", { height: 1 }),
-                  /* @__PURE__ */ jsx6(ChatMessage, { message: msg, provider })
+                return /* @__PURE__ */ jsxs7("box", { flexDirection: "column", children: [
+                  needsSpacing && /* @__PURE__ */ jsx7("box", { height: 1 }),
+                  /* @__PURE__ */ jsx7(ChatMessage, { message: msg, provider })
                 ] }, msg.id || `msg-${i}`);
               });
             })()
           }
         ),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "box",
           {
             flexDirection: "column",
@@ -1444,7 +1946,7 @@ function ChatArea({
             backgroundColor: "#111111",
             onMouseDown: () => onFocus("chat-input"),
             children: [
-              /* @__PURE__ */ jsx6("box", { height: 6, paddingX: 1, children: /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("box", { height: 6, paddingX: 1, children: /* @__PURE__ */ jsx7(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -1459,7 +1961,7 @@ function ChatArea({
                   height: 5
                 }
               ) }),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 "box",
                 {
                   height: 1,
@@ -1467,8 +1969,8 @@ function ChatArea({
                   flexDirection: "row",
                   justifyContent: "space-between",
                   children: [
-                    /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: modeColors.text, children: taskMode === "build" ? "Build" : "Plan" }) }),
-                    isProcessing && /* @__PURE__ */ jsx6(SpinnerLabel, { color: "#ffaa00", label: "thinking" })
+                    /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: modeColors.text, children: taskMode === "build" ? "Build" : "Plan" }) }),
+                    isProcessing && /* @__PURE__ */ jsx7(SpinnerLabel, { color: "#ffaa00", label: "thinking" })
                   ]
                 }
               )
@@ -1481,19 +1983,37 @@ function ChatArea({
 }
 
 // src/interactive/components/WorkspaceInfo.tsx
-import React5, { useState as useState5, useMemo as useMemo4, useCallback as useCallback4 } from "react";
+import React6, { useState as useState6, useMemo as useMemo5, useCallback as useCallback5, useRef as useRef3 } from "react";
 import open from "open";
-import { useKeyboard as useKeyboard3 } from "@opentui/react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "@opentui/react/jsx-runtime";
+import { useKeyboard as useKeyboard4 } from "@opentui/react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "@opentui/react/jsx-runtime";
 var WEB_APP_URL = process.env.REPLICAS_WEB_URL || "https://replicas.dev";
 function buildInteractiveItems(workspaceId, status, previews, wakingWorkspaceId) {
   const items = [];
+  const hasAnyPr = status.repoStatuses?.some((repo) => repo.prUrl);
+  const githubConfigured = status.environmentDetails?.githubAccessConfigured;
+  if (workspaceId && status.status === "active" && !hasAnyPr && githubConfigured) {
+    items.push({ type: "createPr" });
+  }
   if (workspaceId) {
     items.push({ type: "dashboard", workspaceId });
   }
   if (workspaceId && status.status === "sleeping" && wakingWorkspaceId !== workspaceId) {
     items.push({ type: "wake", workspaceId });
   }
+  const repoDiffs = [];
+  if (status.repoStatuses) {
+    for (const repo of status.repoStatuses) {
+      if (repo.gitDiff?.fullDiff && (repo.gitDiff.added > 0 || repo.gitDiff.removed > 0)) {
+        repoDiffs.push({ type: "diff", repoName: repo.name, diff: repo.gitDiff.fullDiff, added: repo.gitDiff.added, removed: repo.gitDiff.removed });
+      }
+    }
+  }
+  items.push({ type: "view-chat" });
+  if (repoDiffs.length > 0) {
+    items.push({ type: "view-diff" });
+    items.push(...repoDiffs);
+  }
   for (const preview of previews) {
     if (preview.publicUrl) {
       items.push({ type: "preview", url: preview.publicUrl, port: preview.port });
@@ -1506,11 +2026,6 @@ function buildInteractiveItems(workspaceId, status, previews, wakingWorkspaceId)
       }
     }
   }
-  const hasAnyPr = status.repoStatuses?.some((repo) => repo.prUrl);
-  const githubConfigured = status.environmentDetails?.githubAccessConfigured;
-  if (workspaceId && status.status === "active" && !hasAnyPr && githubConfigured) {
-    items.push({ type: "createPr" });
-  }
   return items;
 }
 function getItemLabel(item) {
@@ -1523,10 +2038,36 @@ function getItemLabel(item) {
       return `\u2197 Preview :${item.port}`;
     case "pr":
       return `\u2197 View PR (${item.repoName})`;
+    case "diff":
+      return `\u25B8 Diff +${item.added} -${item.removed}`;
+    case "view-chat":
+      return "1 Chat";
+    case "view-diff":
+      return "2 Diff";
     case "createPr":
       return "+ Create PR";
   }
 }
+function getItemId(item) {
+  switch (item.type) {
+    case "dashboard":
+      return "info-dashboard";
+    case "wake":
+      return "info-wake";
+    case "preview":
+      return `info-preview-${item.port}`;
+    case "pr":
+      return `info-pr-${item.repoName}`;
+    case "diff":
+      return `info-diff-${item.repoName}`;
+    case "view-chat":
+      return "info-view-chat";
+    case "view-diff":
+      return "info-view-diff";
+    case "createPr":
+      return "info-create-pr";
+  }
+}
 var AUTH_METHOD_LABELS = {
   oauth: "OAuth",
   api_key: "API Key",
@@ -1535,24 +2076,24 @@ var AUTH_METHOD_LABELS = {
 };
 function StatusDot({ status }) {
   if (status === true || status === "yes") {
-    return /* @__PURE__ */ jsx7("span", { fg: "#66bb6a", children: "\u2713" });
+    return /* @__PURE__ */ jsx8("span", { fg: "#66bb6a", children: "\u2713" });
   }
   if (status === false || status === "no") {
-    return /* @__PURE__ */ jsx7("span", { fg: "#ff4444", children: "\u2717" });
+    return /* @__PURE__ */ jsx8("span", { fg: "#ff4444", children: "\u2717" });
   }
-  return /* @__PURE__ */ jsx7("span", { fg: "#555555", children: "-" });
+  return /* @__PURE__ */ jsx8("span", { fg: "#555555", children: "-" });
 }
 function SectionLabel({ title }) {
-  return /* @__PURE__ */ jsx7("box", { backgroundColor: "#151515", paddingX: 1, children: /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#666666", children: /* @__PURE__ */ jsx7("strong", { children: title.toUpperCase() }) }) }) });
+  return /* @__PURE__ */ jsx8("box", { backgroundColor: "#151515", paddingX: 1, children: /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#666666", children: /* @__PURE__ */ jsx8("strong", { children: title.toUpperCase() }) }) }) });
 }
 function Section({ title, children }) {
-  return /* @__PURE__ */ jsxs7("box", { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsx7(SectionLabel, { title }),
-    /* @__PURE__ */ jsx7("box", { flexDirection: "column", backgroundColor: "#0a0a0a", children })
+  return /* @__PURE__ */ jsxs8("box", { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsx8(SectionLabel, { title }),
+    /* @__PURE__ */ jsx8("box", { flexDirection: "column", backgroundColor: "#0a0a0a", children })
   ] });
 }
 function CardItem({ label, status }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "box",
     {
       flexDirection: "row",
@@ -1561,8 +2102,8 @@ function CardItem({ label, status }) {
       backgroundColor: "#111111",
       marginBottom: 0,
       children: [
-        /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#cccccc", children: label }) }),
-        /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7(StatusDot, { status }) })
+        /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#cccccc", children: label }) }),
+        /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8(StatusDot, { status }) })
       ]
     }
   );
@@ -1575,40 +2116,77 @@ function DetailList({
   const actualSet = new Set(actual);
   const rows = uniqueExpected.length > 0 ? uniqueExpected : Array.from(actualSet).sort((a, b) => a.localeCompare(b));
   if (rows.length === 0) return null;
-  return /* @__PURE__ */ jsx7(Fragment3, { children: rows.map((item, i) => /* @__PURE__ */ jsx7(CardItem, { label: item, status: actualSet.has(item) }, i)) });
+  return /* @__PURE__ */ jsx8(Fragment4, { children: rows.map((item, i) => /* @__PURE__ */ jsx8(CardItem, { label: item, status: actualSet.has(item) }, i)) });
 }
-function InteractiveRow({ label, highlighted, disabled, onClick }) {
+function InteractiveRow({ id, label, highlighted, disabled, onClick }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx7("box", { paddingX: 1, backgroundColor: "#111111", children: /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#444444", children: label }) }) });
+    return /* @__PURE__ */ jsx8("box", { id, paddingX: 1, backgroundColor: "#111111", children: /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#444444", children: label }) }) });
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "box",
     {
+      id,
       paddingX: 1,
       backgroundColor: highlighted ? "#1a2a1a" : "#111111",
       onMouseDown: onClick,
-      children: /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: highlighted ? "#66bb6a" : "#7dcfff", children: label }) })
+      children: /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: highlighted ? "#66bb6a" : "#7dcfff", children: label }) })
+    }
+  );
+}
+function ViewModeRow({
+  id,
+  label,
+  active,
+  highlighted,
+  disabled,
+  onClick
+}) {
+  const bg = highlighted ? "#1a2a1a" : "#111111";
+  const fg = disabled ? "#444444" : active ? "#66bb6a" : "#cccccc";
+  const marker = active ? "\u25B8" : " ";
+  return /* @__PURE__ */ jsx8(
+    "box",
+    {
+      id,
+      paddingX: 1,
+      backgroundColor: bg,
+      onMouseDown: disabled ? void 0 : onClick,
+      children: /* @__PURE__ */ jsxs8("text", { children: [
+        /* @__PURE__ */ jsxs8("span", { fg: active ? "#66bb6a" : "#555555", children: [
+          marker,
+          " "
+        ] }),
+        active ? /* @__PURE__ */ jsx8("span", { fg, children: /* @__PURE__ */ jsx8("strong", { children: label }) }) : /* @__PURE__ */ jsx8("span", { fg, children: label })
+      ] })
     }
   );
 }
-function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, envConfig, previews, onWakeWorkspace, onCreatePr, isPlanMode, wakingWorkspaceId }) {
+function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, envConfig, previews, onWakeWorkspace, onViewDiff, wakingWorkspaceId, viewMode, viewingDiffRepoName, onSelectChatMode, onSelectDiffMode, onCreatePr, isPlanMode }) {
   const borderColor = focused ? "#66bb6a" : "#333333";
-  const [cursorIndex, setCursorIndex] = useState5(0);
-  const interactiveItems = useMemo4(() => {
+  const [cursorIndex, setCursorIndex] = useState6(0);
+  const interactiveItems = useMemo5(() => {
     if (!status || !workspaceName) return [];
     return buildInteractiveItems(workspaceId, status, previews, wakingWorkspaceId);
   }, [workspaceId, workspaceName, status, previews, wakingWorkspaceId]);
+  const diffItems = useMemo5(
+    () => interactiveItems.filter((item) => item.type === "diff"),
+    [interactiveItems]
+  );
+  const hasAnyDiff = diffItems.length > 0;
   const safeCursor = interactiveItems.length > 0 ? Math.min(cursorIndex, interactiveItems.length - 1) : 0;
-  const moveCursor = useCallback4(
+  const scrollboxRef = useRef3(null);
+  const moveCursor = useCallback5(
     (next) => {
       const len = interactiveItems.length;
       if (len === 0) return;
       const wrapped = (next % len + len) % len;
       setCursorIndex(wrapped);
+      const item = interactiveItems[wrapped];
+      if (item) scrollboxRef.current?.scrollChildIntoView(getItemId(item));
     },
-    [interactiveItems.length]
+    [interactiveItems]
   );
-  const handleAction = useCallback4(
+  const handleAction = useCallback5(
     (item) => {
       if (!item) return;
       switch (item.type) {
@@ -1627,6 +2205,15 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
           open(item.url).catch(() => {
           });
           break;
+        case "diff":
+          onViewDiff?.(item.diff, item.repoName);
+          break;
+        case "view-chat":
+          onSelectChatMode();
+          break;
+        case "view-diff":
+          onSelectDiffMode();
+          break;
         case "createPr":
           if (!isPlanMode) onCreatePr();
           break;
@@ -1634,7 +2221,7 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
     },
     [onWakeWorkspace, onCreatePr]
   );
-  useKeyboard3((key) => {
+  useKeyboard4((key) => {
     if (!focused) return;
     if (interactiveItems.length === 0) return;
     if (key.name === "j" || key.name === "down") {
@@ -1668,7 +2255,7 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
       return;
     }
   });
-  const isHighlighted = useCallback4(
+  const isHighlighted = useCallback5(
     (item) => {
       if (!focused) return false;
       const idx = interactiveItems.indexOf(item);
@@ -1676,19 +2263,20 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
     },
     [focused, interactiveItems, safeCursor]
   );
-  const findItem = useCallback4(
+  const findItem = useCallback5(
     (type, key) => {
       return interactiveItems.find((item) => {
         if (item.type !== type) return false;
         if (type === "preview" && key) return item.port === Number(key);
         if (type === "pr" && key) return item.repoName === key;
+        if (type === "diff" && key) return item.repoName === key;
         return true;
       });
     },
     [interactiveItems]
   );
   if (!workspaceName) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "box",
       {
         width: 30,
@@ -1700,12 +2288,12 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
         flexDirection: "column",
         paddingX: 1,
         backgroundColor: "#000000",
-        children: /* @__PURE__ */ jsx7("text", { fg: "#666666", children: "Select a workspace" })
+        children: /* @__PURE__ */ jsx8("text", { fg: "#666666", children: "Select a workspace" })
       }
     );
   }
   if (loading || !status) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "box",
       {
         width: 30,
@@ -1717,7 +2305,7 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
         flexDirection: "column",
         paddingX: 1,
         backgroundColor: "#000000",
-        children: /* @__PURE__ */ jsx7("text", { fg: "#666666", children: "Loading..." })
+        children: /* @__PURE__ */ jsx8("text", { fg: "#666666", children: "Loading..." })
       }
     );
   }
@@ -1729,7 +2317,7 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
   const dashboardItem = findItem("dashboard");
   const wakeItem = findItem("wake");
   const createPrItem = findItem("createPr");
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "box",
     {
       width: 30,
@@ -1740,16 +2328,16 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
       titleAlignment: "center",
       flexDirection: "column",
       backgroundColor: "#000000",
-      children: /* @__PURE__ */ jsxs7("scrollbox", { focused, flexGrow: 1, children: [
-        /* @__PURE__ */ jsx7("box", { backgroundColor: "#111111", paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs7("box", { flexDirection: "column", children: [
-          /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx7("strong", { children: workspaceName }) }) }),
-          /* @__PURE__ */ jsxs7("text", { children: [
-            /* @__PURE__ */ jsxs7("span", { fg: statusColor, children: [
+      children: /* @__PURE__ */ jsxs8("scrollbox", { ref: scrollboxRef, focused: false, flexGrow: 1, children: [
+        /* @__PURE__ */ jsx8("box", { backgroundColor: "#111111", paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs8("box", { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx8("strong", { children: workspaceName }) }) }),
+          /* @__PURE__ */ jsxs8("text", { children: [
+            /* @__PURE__ */ jsxs8("span", { fg: statusColor, children: [
               "\u25CF",
               " ",
               status.status
             ] }),
-            env && /* @__PURE__ */ jsxs7("span", { fg: "#555555", children: [
+            env && /* @__PURE__ */ jsxs8("span", { fg: "#555555", children: [
               " ",
               "\u2502",
               " ",
@@ -1757,94 +2345,158 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
             ] })
           ] })
         ] }) }),
-        dashboardItem && /* @__PURE__ */ jsx7(
+        createPrItem && /* @__PURE__ */ jsx8(
+          InteractiveRow,
+          {
+            id: getItemId(createPrItem),
+            label: getItemLabel(createPrItem),
+            highlighted: isHighlighted(createPrItem),
+            disabled: isPlanMode,
+            onClick: () => handleAction(createPrItem)
+          }
+        ),
+        dashboardItem && /* @__PURE__ */ jsx8(
           InteractiveRow,
           {
+            id: getItemId(dashboardItem),
             label: getItemLabel(dashboardItem),
             highlighted: isHighlighted(dashboardItem),
             onClick: () => handleAction(dashboardItem)
           }
         ),
-        wakeItem && /* @__PURE__ */ jsx7(
+        wakeItem && /* @__PURE__ */ jsx8(
           InteractiveRow,
           {
+            id: getItemId(wakeItem),
             label: getItemLabel(wakeItem),
             highlighted: isHighlighted(wakeItem),
             onClick: () => handleAction(wakeItem)
           }
         ),
-        (status.isClaudeProcessing || status.isCodexProcessing) && /* @__PURE__ */ jsxs7("box", { backgroundColor: "#1a1500", paddingX: 1, marginX: 1, marginBottom: 1, children: [
-          status.isClaudeProcessing && /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsxs7("span", { fg: "#ffaa00", children: [
+        (status.isClaudeProcessing || status.isCodexProcessing) && /* @__PURE__ */ jsxs8("box", { backgroundColor: "#1a1500", paddingX: 1, marginX: 1, marginBottom: 1, children: [
+          status.isClaudeProcessing && /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsxs8("span", { fg: "#ffaa00", children: [
             "\u25C6",
             " Claude thinking..."
           ] }) }),
-          status.isCodexProcessing && /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsxs7("span", { fg: "#ffaa00", children: [
+          status.isCodexProcessing && /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsxs8("span", { fg: "#ffaa00", children: [
             "\u25C6",
             " Codex thinking..."
           ] }) })
         ] }),
-        env && /* @__PURE__ */ jsxs7(Section, { title: "Agents", children: [
-          /* @__PURE__ */ jsxs7("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
-            /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#cccccc", children: "Claude" }) }),
-            /* @__PURE__ */ jsx7("text", { children: AUTH_METHOD_LABELS[env.claudeAuthMethod] ? /* @__PURE__ */ jsx7("span", { fg: "#66bb6a", children: AUTH_METHOD_LABELS[env.claudeAuthMethod] }) : /* @__PURE__ */ jsx7("span", { fg: "#ff4444", children: "\u2717" }) })
+        env && /* @__PURE__ */ jsxs8(Section, { title: "Agents", children: [
+          /* @__PURE__ */ jsxs8("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+            /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#cccccc", children: "Claude" }) }),
+            /* @__PURE__ */ jsx8("text", { children: AUTH_METHOD_LABELS[env.claudeAuthMethod] ? /* @__PURE__ */ jsx8("span", { fg: "#66bb6a", children: AUTH_METHOD_LABELS[env.claudeAuthMethod] }) : /* @__PURE__ */ jsx8("span", { fg: "#ff4444", children: "\u2717" }) })
           ] }),
-          /* @__PURE__ */ jsxs7("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
-            /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#cccccc", children: "Codex" }) }),
-            /* @__PURE__ */ jsx7("text", { children: AUTH_METHOD_LABELS[env.codexAuthMethod] ? /* @__PURE__ */ jsx7("span", { fg: "#66bb6a", children: AUTH_METHOD_LABELS[env.codexAuthMethod] }) : /* @__PURE__ */ jsx7("span", { fg: "#ff4444", children: "\u2717" }) })
+          /* @__PURE__ */ jsxs8("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+            /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#cccccc", children: "Codex" }) }),
+            /* @__PURE__ */ jsx8("text", { children: AUTH_METHOD_LABELS[env.codexAuthMethod] ? /* @__PURE__ */ jsx8("span", { fg: "#66bb6a", children: AUTH_METHOD_LABELS[env.codexAuthMethod] }) : /* @__PURE__ */ jsx8("span", { fg: "#ff4444", children: "\u2717" }) })
           ] })
         ] }),
-        env && /* @__PURE__ */ jsxs7(Section, { title: "Integrations", children: [
-          /* @__PURE__ */ jsx7(CardItem, { label: "GitHub", status: env.githubAccessConfigured }),
-          /* @__PURE__ */ jsx7(CardItem, { label: "Slack", status: env.slackAccessConfigured }),
-          /* @__PURE__ */ jsx7(CardItem, { label: "Linear", status: env.linearAccessConfigured })
+        /* @__PURE__ */ jsx8(Section, { title: "View", children: (() => {
+          const chatItem = findItem("view-chat");
+          const diffItem = findItem("view-diff");
+          return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+            chatItem && /* @__PURE__ */ jsx8(
+              ViewModeRow,
+              {
+                id: getItemId(chatItem),
+                label: "1 Chat",
+                active: viewMode === "chat",
+                highlighted: isHighlighted(chatItem),
+                onClick: () => handleAction(chatItem)
+              }
+            ),
+            diffItem ? /* @__PURE__ */ jsx8(
+              ViewModeRow,
+              {
+                id: getItemId(diffItem),
+                label: "2 Diff",
+                active: viewMode === "diff",
+                highlighted: isHighlighted(diffItem),
+                onClick: () => handleAction(diffItem)
+              }
+            ) : /* @__PURE__ */ jsx8(ViewModeRow, { label: "2 Diff", active: false, highlighted: false, disabled: true, onClick: () => {
+            } }),
+            hasAnyDiff && diffItems.map((item, i) => {
+              const isActive = viewMode === "diff" && viewingDiffRepoName === item.repoName;
+              const cursorOn = isHighlighted(item);
+              const bg = cursorOn ? "#1a2a1a" : isActive ? "#0d2b0d" : "#111111";
+              const nameColor = isActive || cursorOn ? "#66bb6a" : "#cccccc";
+              return /* @__PURE__ */ jsxs8(
+                "box",
+                {
+                  id: getItemId(item),
+                  paddingX: 1,
+                  backgroundColor: bg,
+                  onMouseDown: () => handleAction(item),
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  children: [
+                    /* @__PURE__ */ jsxs8("text", { children: [
+                      /* @__PURE__ */ jsx8("span", { fg: isActive ? "#66bb6a" : "#555555", children: isActive ? "  \u25B8 " : "    \u2514 " }),
+                      isActive ? /* @__PURE__ */ jsx8("span", { fg: nameColor, children: /* @__PURE__ */ jsx8("strong", { children: item.repoName }) }) : /* @__PURE__ */ jsx8("span", { fg: nameColor, children: item.repoName })
+                    ] }),
+                    /* @__PURE__ */ jsxs8("text", { children: [
+                      item.added > 0 && /* @__PURE__ */ jsxs8("span", { fg: "#66bb6a", children: [
+                        "+",
+                        item.added
+                      ] }),
+                      item.added > 0 && item.removed > 0 && /* @__PURE__ */ jsx8("span", { fg: "#444444", children: " " }),
+                      item.removed > 0 && /* @__PURE__ */ jsxs8("span", { fg: "#ff4444", children: [
+                        "-",
+                        item.removed
+                      ] })
+                    ] })
+                  ]
+                },
+                `diff-${i}`
+              );
+            })
+          ] });
+        })() }),
+        env && /* @__PURE__ */ jsxs8(Section, { title: "Integrations", children: [
+          /* @__PURE__ */ jsx8(CardItem, { label: "GitHub", status: env.githubAccessConfigured }),
+          /* @__PURE__ */ jsx8(CardItem, { label: "Slack", status: env.slackAccessConfigured }),
+          /* @__PURE__ */ jsx8(CardItem, { label: "Linear", status: env.linearAccessConfigured })
         ] }),
-        previews.length > 0 && /* @__PURE__ */ jsx7(Section, { title: "Previews", children: previews.map((preview, i) => {
+        previews.length > 0 && /* @__PURE__ */ jsx8(Section, { title: "Previews", children: previews.map((preview, i) => {
           const previewItem = findItem("preview", String(preview.port));
-          return /* @__PURE__ */ jsxs7(
+          return /* @__PURE__ */ jsxs8(
             "box",
             {
+              id: previewItem ? getItemId(previewItem) : void 0,
               flexDirection: "row",
               justifyContent: "space-between",
               paddingX: 1,
               backgroundColor: previewItem && isHighlighted(previewItem) ? "#1a2a1a" : "#111111",
               onMouseDown: () => previewItem && handleAction(previewItem),
               children: [
-                /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsxs7("span", { fg: "#cccccc", children: [
+                /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsxs8("span", { fg: "#cccccc", children: [
                   ":",
                   preview.port
                 ] }) }),
-                /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: previewItem && isHighlighted(previewItem) ? "#66bb6a" : "#7dcfff", children: "\u2197" }) })
+                /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: previewItem && isHighlighted(previewItem) ? "#66bb6a" : "#7dcfff", children: "\u2197" }) })
               ]
             },
             i
           );
         }) }),
-        status.repoStatuses && status.repoStatuses.length > 0 && /* @__PURE__ */ jsx7(Section, { title: "Repositories", children: status.repoStatuses.map((repo, i) => {
+        status.repoStatuses && status.repoStatuses.length > 0 && /* @__PURE__ */ jsx8(Section, { title: "Repositories", children: status.repoStatuses.map((repo, i) => {
           const prItem = findItem("pr", repo.name);
-          return /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
-            /* @__PURE__ */ jsx7("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx7("strong", { children: repo.name }) }) }) }),
-            /* @__PURE__ */ jsx7("box", { backgroundColor: "#111111", paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: /* @__PURE__ */ jsxs7("text", { children: [
-              /* @__PURE__ */ jsxs7("span", { fg: "#555555", children: [
+          return /* @__PURE__ */ jsxs8(React6.Fragment, { children: [
+            /* @__PURE__ */ jsx8("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx8("strong", { children: repo.name }) }) }) }),
+            /* @__PURE__ */ jsx8("box", { backgroundColor: "#111111", paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: /* @__PURE__ */ jsxs8("text", { children: [
+              /* @__PURE__ */ jsxs8("span", { fg: "#555555", children: [
                 "\u2514",
                 " "
               ] }),
-              /* @__PURE__ */ jsx7("span", { fg: repo.currentBranch !== repo.defaultBranch ? "#ffaa00" : "#66bb6a", children: repo.currentBranch })
+              /* @__PURE__ */ jsx8("span", { fg: repo.currentBranch !== repo.defaultBranch ? "#ffaa00" : "#66bb6a", children: repo.currentBranch })
             ] }) }),
-            repo.gitDiff && (repo.gitDiff.added > 0 || repo.gitDiff.removed > 0) && /* @__PURE__ */ jsx7("box", { backgroundColor: "#111111", paddingX: 1, flexDirection: "row", children: /* @__PURE__ */ jsxs7("text", { children: [
-              /* @__PURE__ */ jsx7("span", { fg: "#555555", children: "  " }),
-              /* @__PURE__ */ jsxs7("span", { fg: "#66bb6a", children: [
-                "+",
-                repo.gitDiff.added
-              ] }),
-              /* @__PURE__ */ jsx7("span", { fg: "#444444", children: " / " }),
-              /* @__PURE__ */ jsxs7("span", { fg: "#ff4444", children: [
-                "-",
-                repo.gitDiff.removed
-              ] })
-            ] }) }),
-            prItem && /* @__PURE__ */ jsx7(
+            prItem && /* @__PURE__ */ jsx8(
               InteractiveRow,
               {
+                id: getItemId(prItem),
                 label: `  ${getItemLabel(prItem)}`,
                 highlighted: isHighlighted(prItem),
                 onClick: () => handleAction(prItem)
@@ -1852,44 +2504,35 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
             )
           ] }, i);
         }) }),
-        createPrItem && /* @__PURE__ */ jsx7(
-          InteractiveRow,
-          {
-            label: getItemLabel(createPrItem),
-            highlighted: isHighlighted(createPrItem),
-            disabled: isPlanMode,
-            onClick: () => handleAction(createPrItem)
-          }
-        ),
-        env && /* @__PURE__ */ jsxs7(Section, { title: "Hooks", children: [
-          /* @__PURE__ */ jsx7(CardItem, { label: "Global warm", status: env.globalWarmHookCompleted.status }),
-          env.repositories.map((repo, i) => /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
-            /* @__PURE__ */ jsx7("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx7("strong", { children: repo.repositoryName }) }) }) }),
-            /* @__PURE__ */ jsxs7("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
-              /* @__PURE__ */ jsxs7("text", { children: [
-                /* @__PURE__ */ jsxs7("span", { fg: "#555555", children: [
+        env && /* @__PURE__ */ jsxs8(Section, { title: "Hooks", children: [
+          /* @__PURE__ */ jsx8(CardItem, { label: "Global warm", status: env.globalWarmHookCompleted.status }),
+          env.repositories.map((repo, i) => /* @__PURE__ */ jsxs8(React6.Fragment, { children: [
+            /* @__PURE__ */ jsx8("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx8("strong", { children: repo.repositoryName }) }) }) }),
+            /* @__PURE__ */ jsxs8("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+              /* @__PURE__ */ jsxs8("text", { children: [
+                /* @__PURE__ */ jsxs8("span", { fg: "#555555", children: [
                   "\u251C",
                   " "
                 ] }),
-                /* @__PURE__ */ jsx7("span", { fg: "#cccccc", children: "warm" })
+                /* @__PURE__ */ jsx8("span", { fg: "#cccccc", children: "warm" })
               ] }),
-              /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7(StatusDot, { status: repo.warmHookCompleted }) })
+              /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8(StatusDot, { status: repo.warmHookCompleted }) })
             ] }),
-            /* @__PURE__ */ jsxs7("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
-              /* @__PURE__ */ jsxs7("text", { children: [
-                /* @__PURE__ */ jsxs7("span", { fg: "#555555", children: [
+            /* @__PURE__ */ jsxs8("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+              /* @__PURE__ */ jsxs8("text", { children: [
+                /* @__PURE__ */ jsxs8("span", { fg: "#555555", children: [
                   "\u2514",
                   " "
                 ] }),
-                /* @__PURE__ */ jsx7("span", { fg: "#cccccc", children: "start" })
+                /* @__PURE__ */ jsx8("span", { fg: "#cccccc", children: "start" })
               ] }),
-              /* @__PURE__ */ jsx7("text", { children: /* @__PURE__ */ jsx7(StatusDot, { status: repo.startHookCompleted }) })
+              /* @__PURE__ */ jsx8("text", { children: /* @__PURE__ */ jsx8(StatusDot, { status: repo.startHookCompleted }) })
             ] })
           ] }, i))
         ] }),
-        env && (expectedSkills.length > 0 || env.skillsInstalled.length > 0) && /* @__PURE__ */ jsx7(Section, { title: "Skills", children: /* @__PURE__ */ jsx7(DetailList, { expected: expectedSkills, actual: env.skillsInstalled }) }),
-        env && (expectedGlobalVars.length > 0 || env.envVarsSet.length > 0) && /* @__PURE__ */ jsx7(Section, { title: "Env Vars", children: /* @__PURE__ */ jsx7(DetailList, { expected: expectedGlobalVars, actual: env.envVarsSet }) }),
-        env && (expectedGlobalFiles.length > 0 || env.filesUploaded.length > 0) && /* @__PURE__ */ jsx7(Section, { title: "Files", children: /* @__PURE__ */ jsx7(DetailList, { expected: expectedGlobalFiles, actual: env.filesUploaded }) })
+        env && (expectedSkills.length > 0 || env.skillsInstalled.length > 0) && /* @__PURE__ */ jsx8(Section, { title: "Skills", children: /* @__PURE__ */ jsx8(DetailList, { expected: expectedSkills, actual: env.skillsInstalled }) }),
+        env && (expectedGlobalVars.length > 0 || env.envVarsSet.length > 0) && /* @__PURE__ */ jsx8(Section, { title: "Env Vars", children: /* @__PURE__ */ jsx8(DetailList, { expected: expectedGlobalVars, actual: env.envVarsSet }) }),
+        env && (expectedGlobalFiles.length > 0 || env.filesUploaded.length > 0) && /* @__PURE__ */ jsx8(Section, { title: "Files", children: /* @__PURE__ */ jsx8(DetailList, { expected: expectedGlobalFiles, actual: env.filesUploaded }) })
       ] })
     }
   );
@@ -1899,8 +2542,8 @@ function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, e
 import { useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
 
 // src/interactive/toast-context.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState6, useCallback as useCallback5, useRef as useRef2 } from "react";
-import { jsx as jsx8 } from "@opentui/react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useState as useState7, useCallback as useCallback6, useRef as useRef4 } from "react";
+import { jsx as jsx9 } from "@opentui/react/jsx-runtime";
 var ToastContext = createContext2(null);
 function useToast() {
   const ctx = useContext2(ToastContext);
@@ -1908,9 +2551,9 @@ function useToast() {
   return ctx;
 }
 function ToastProvider({ children }) {
-  const [current, setCurrent] = useState6(null);
-  const timeoutRef = useRef2(null);
-  const show = useCallback5((options) => {
+  const [current, setCurrent] = useState7(null);
+  const timeoutRef = useRef4(null);
+  const show = useCallback6((options) => {
     const { message, variant = "info", duration = 3e3 } = options;
     setCurrent({ message, variant });
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -1918,15 +2561,15 @@ function ToastProvider({ children }) {
       setCurrent(null);
     }, duration);
   }, []);
-  const error = useCallback5((err) => {
+  const error = useCallback6((err) => {
     const message = err instanceof Error ? err.message : "An error occurred";
     show({ message, variant: "error", duration: 5e3 });
   }, [show]);
-  return /* @__PURE__ */ jsx8(ToastContext.Provider, { value: { current, show, error }, children });
+  return /* @__PURE__ */ jsx9(ToastContext.Provider, { value: { current, show, error }, children });
 }
 
 // src/interactive/components/Toast.tsx
-import { jsx as jsx9 } from "@opentui/react/jsx-runtime";
+import { jsx as jsx10 } from "@opentui/react/jsx-runtime";
 var VARIANT_COLORS = {
   info: { border: "#66bb6a", bg: "#0a1a0a" },
   success: { border: "#66bb6a", bg: "#0a1a0a" },
@@ -1939,7 +2582,7 @@ function Toast() {
   if (!current) return null;
   const colors = VARIANT_COLORS[current.variant] ?? VARIANT_COLORS.info;
   const toastWidth = Math.min(60, width - 4);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "box",
     {
       position: "absolute",
@@ -1953,13 +2596,13 @@ function Toast() {
       border: true,
       borderStyle: "rounded",
       zIndex: 100,
-      children: /* @__PURE__ */ jsx9("text", { fg: "#ffffff", selectable: true, children: current.message })
+      children: /* @__PURE__ */ jsx10("text", { fg: "#ffffff", selectable: true, children: current.message })
     }
   );
 }
 
 // src/interactive/App.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "@opentui/react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "@opentui/react/jsx-runtime";
 var FOCUS_ORDER = ["sidebar", "chat-tabs", "chat-history", "chat-input", "info"];
 var MOCK_CHATS = [
   { id: "mock-claude", provider: "claude", title: "Claude Code", createdAt: "", updatedAt: "", processing: false },
@@ -1981,9 +2624,9 @@ var authValue = {
   queryClient
 };
 function App() {
-  return /* @__PURE__ */ jsx10(ReplicasAuthProvider, { value: authValue, children: /* @__PURE__ */ jsxs8(ToastProvider, { children: [
-    /* @__PURE__ */ jsx10(AppInner, {}),
-    /* @__PURE__ */ jsx10(Toast, {})
+  return /* @__PURE__ */ jsx11(ReplicasAuthProvider, { value: authValue, children: /* @__PURE__ */ jsxs9(ToastProvider, { children: [
+    /* @__PURE__ */ jsx11(AppInner, {}),
+    /* @__PURE__ */ jsx11(Toast, {})
   ] }) });
 }
 function AppInner() {
@@ -2003,17 +2646,19 @@ function AppInner() {
       renderer.off("selection", handler);
     };
   }, [renderer, toast]);
-  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState7(null);
-  const [selectedChatId, setSelectedChatId] = useState7(null);
-  const [focusPanel, setFocusPanel] = useState7("sidebar");
-  const [taskMode, setTaskMode] = useState7("build");
-  const [mockWorkspaces, setMockWorkspaces] = useState7([]);
-  const mockToRealRef = useRef3(/* @__PURE__ */ new Map());
-  const mockGroupRef = useRef3(/* @__PURE__ */ new Map());
-  const [mockMessages, setMockMessages] = useState7([]);
-  const [mockThinking, setMockThinking] = useState7(false);
-  const pendingMessageRef = useRef3(/* @__PURE__ */ new Map());
-  const mockIds = useMemo5(() => new Set(mockWorkspaces.map((m) => m.id)), [mockWorkspaces]);
+  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState8(null);
+  const [selectedChatId, setSelectedChatId] = useState8(null);
+  const [focusPanel, setFocusPanel] = useState8("sidebar");
+  const [taskMode, setTaskMode] = useState8("build");
+  const [mockWorkspaces, setMockWorkspaces] = useState8([]);
+  const mockToRealRef = useRef5(/* @__PURE__ */ new Map());
+  const mockGroupRef = useRef5(/* @__PURE__ */ new Map());
+  const [mockMessages, setMockMessages] = useState8([]);
+  const [mockThinking, setMockThinking] = useState8(false);
+  const pendingMessageRef = useRef5(/* @__PURE__ */ new Map());
+  const [viewingDiff, setViewingDiff] = useState8(null);
+  const [lastViewedDiff, setLastViewedDiff] = useState8(null);
+  const mockIds = useMemo6(() => new Set(mockWorkspaces.map((m) => m.id)), [mockWorkspaces]);
   const isMockSelected = selectedWorkspaceId ? mockIds.has(selectedWorkspaceId) : false;
   const { data: workspacesData, isLoading: loadingWorkspaces } = useWorkspaces(1, 100, "organization");
   const { data: reposData } = useRepositories();
@@ -2027,7 +2672,7 @@ function AppInner() {
   );
   const { data: chatsData } = useWorkspaceChats(isMockSelected ? null : selectedWorkspaceId);
   const chats = isMockSelected ? MOCK_CHATS : chatsData?.chats ?? [];
-  const resolvedChatId = useMemo5(() => {
+  const resolvedChatId = useMemo6(() => {
     if (selectedChatId && chats.find((c) => c.id === selectedChatId)) {
       return selectedChatId;
     }
@@ -2045,22 +2690,22 @@ function AppInner() {
   const deleteWorkspaceMutation = useDeleteWorkspace();
   const wakeWorkspaceMutation = useWakeWorkspace();
   const generateNameMutation = useGenerateWorkspaceName();
-  const [wakingWorkspaceId, setWakingWorkspaceId] = useState7(null);
+  const [wakingWorkspaceId, setWakingWorkspaceId] = useState8(null);
   const sendMessageMutation = useSendChatMessage(selectedWorkspaceId, resolvedChatId);
   const interruptMutation = useInterruptChat(selectedWorkspaceId, resolvedChatId);
   const workspaces = workspacesData?.workspaces ?? [];
   const repositories = reposData?.repositories ?? [];
   const repositorySets = setsData?.repository_sets ?? [];
   const previews = previewsData?.previews ?? [];
-  const allWorkspaces = useMemo5(() => [...mockWorkspaces, ...workspaces], [mockWorkspaces, workspaces]);
-  const groups = useMemo5(
+  const allWorkspaces = useMemo6(() => [...mockWorkspaces, ...workspaces], [mockWorkspaces, workspaces]);
+  const groups = useMemo6(
     () => buildGroups(allWorkspaces, workspacesData, repositories, repositorySets, mockGroupRef.current),
     [allWorkspaces, workspacesData, repositories, repositorySets]
   );
   const selectedWorkspace = allWorkspaces.find((ws) => ws.id === selectedWorkspaceId) ?? null;
   const selectedChat = chats.find((c) => c.id === resolvedChatId) ?? null;
   const isProcessing = mockThinking || (selectedChat?.processing ?? false);
-  const displayMessages = useMemo5(() => {
+  const displayMessages = useMemo6(() => {
     if (isMockSelected) return mockMessages;
     const rawEvents = historyData?.events ?? [];
     const events = rawEvents.filter(isAgentBackendEvent);
@@ -2124,23 +2769,27 @@ function AppInner() {
     }, 5e3);
     return () => clearInterval(interval);
   }, [mockWorkspaces.length]);
-  const handleSelectWorkspace = useCallback6((workspaceId) => {
+  const handleSelectWorkspace = useCallback7((workspaceId) => {
     setSelectedWorkspaceId(workspaceId);
     setSelectedChatId(null);
     setMockMessages([]);
     setMockThinking(false);
+    setViewingDiff(null);
+    setLastViewedDiff(null);
     setFocusPanel("chat-input");
   }, []);
-  const handleFocus = useCallback6((panel) => {
+  const handleFocus = useCallback7((panel) => {
     setFocusPanel(panel);
   }, []);
-  const handleCreateWorkspace = useCallback6(
+  const handleCreateWorkspace = useCallback7(
     async (groupId, groupType) => {
       const orgId = getOrganizationId() ?? "";
       const mock = createMockWorkspaceRecord(orgId);
       mockGroupRef.current.set(mock.id, groupId);
       setMockWorkspaces((prev) => [mock, ...prev]);
       setSelectedWorkspaceId(mock.id);
+      setViewingDiff(null);
+      setLastViewedDiff(null);
       setFocusPanel("chat-input");
       try {
         const request = groupType === "set" ? { repository_set_id: groupId.replace(/^set:/, ""), name: mock.name, placeholder: true } : { repository_ids: [groupId], name: mock.name, placeholder: true };
@@ -2154,18 +2803,26 @@ function AppInner() {
     },
     [createWorkspaceMutation, toast]
   );
-  const handleDeleteWorkspace = useCallback6(
+  const handleDeleteWorkspace = useCallback7(
     async (workspaceId) => {
       if (mockIds.has(workspaceId)) {
         mockGroupRef.current.delete(workspaceId);
         mockToRealRef.current.delete(workspaceId);
         setMockWorkspaces((prev) => prev.filter((m) => m.id !== workspaceId));
-        if (selectedWorkspaceId === workspaceId) setSelectedWorkspaceId(null);
+        if (selectedWorkspaceId === workspaceId) {
+          setSelectedWorkspaceId(null);
+          setViewingDiff(null);
+          setLastViewedDiff(null);
+        }
         return;
       }
       try {
         await deleteWorkspaceMutation.mutateAsync(workspaceId);
-        if (selectedWorkspaceId === workspaceId) setSelectedWorkspaceId(null);
+        if (selectedWorkspaceId === workspaceId) {
+          setSelectedWorkspaceId(null);
+          setViewingDiff(null);
+          setLastViewedDiff(null);
+        }
         toast.show({ message: "Workspace deleted", variant: "info" });
       } catch (err) {
         toast.error(err);
@@ -2173,7 +2830,7 @@ function AppInner() {
     },
     [mockIds, selectedWorkspaceId, deleteWorkspaceMutation]
   );
-  const handleWakeWorkspace = useCallback6(
+  const handleWakeWorkspace = useCallback7(
     async (workspaceId) => {
       setWakingWorkspaceId(workspaceId);
       try {
@@ -2187,10 +2844,10 @@ function AppInner() {
     },
     [wakeWorkspaceMutation, toast]
   );
-  const handleSelectChat = useCallback6((chatId) => {
+  const handleSelectChat = useCallback7((chatId) => {
     setSelectedChatId(chatId);
   }, []);
-  useKeyboard4((key) => {
+  useKeyboard5((key) => {
     if (key.name === "f12") {
       renderer.console.toggle();
       return;
@@ -2210,6 +2867,7 @@ function AppInner() {
         const availablePanels = FOCUS_ORDER.filter((p) => {
           if (p === "sidebar" && !showWorkspacePanel) return false;
           if ((p === "chat-tabs" || p === "chat-history" || p === "chat-input") && (!selectedWorkspaceId || statusData?.status === "sleeping")) return false;
+          if (viewingDiff && (p === "chat-tabs" || p === "chat-input")) return false;
           if (p === "chat-tabs" && chats.length <= 1) return false;
           if (p === "info" && !showInfoPanel) return false;
           return true;
@@ -2223,6 +2881,15 @@ function AppInner() {
       setTaskMode((m) => m === "build" ? "plan" : "build");
       return;
     }
+    if ((key.name === "1" || key.name === "2") && focusPanel !== "chat-input") {
+      if (key.name === "1") {
+        setViewingDiff(null);
+      } else if (firstAvailableDiff) {
+        setViewingDiff(firstAvailableDiff);
+        setLastViewedDiff(firstAvailableDiff);
+      }
+      return;
+    }
     if (key.name === "w" && focusPanel !== "sidebar" && focusPanel !== "info" && selectedWorkspaceId) {
       if (statusData?.status === "sleeping" && !wakingWorkspaceId) {
         handleWakeWorkspace(selectedWorkspaceId);
@@ -2231,7 +2898,33 @@ function AppInner() {
     }
     if (focusPanel === "chat-input") return;
   });
-  const handleSendMessage = useCallback6(
+  const handleViewDiff = useCallback7((diff, repoName) => {
+    setViewingDiff({ diff, repoName });
+    setLastViewedDiff({ diff, repoName });
+    setFocusPanel("chat-history");
+  }, []);
+  const handleSelectChatMode = useCallback7(() => {
+    setViewingDiff(null);
+    setFocusPanel("chat-history");
+  }, []);
+  const firstAvailableDiff = useMemo6(() => {
+    if (lastViewedDiff) return lastViewedDiff;
+    const repos = statusData?.repoStatuses ?? [];
+    for (const repo of repos) {
+      if (repo.gitDiff?.fullDiff && (repo.gitDiff.added > 0 || repo.gitDiff.removed > 0)) {
+        return { diff: repo.gitDiff.fullDiff, repoName: repo.name };
+      }
+    }
+    return null;
+  }, [lastViewedDiff, statusData?.repoStatuses]);
+  const handleSelectDiffMode = useCallback7(() => {
+    if (firstAvailableDiff) {
+      setViewingDiff(firstAvailableDiff);
+      setLastViewedDiff(firstAvailableDiff);
+      setFocusPanel("chat-history");
+    }
+  }, [firstAvailableDiff]);
+  const handleSendMessage = useCallback7(
     async (message) => {
       if (!selectedWorkspaceId || !resolvedChatId) return;
       if (isMockSelected) {
@@ -2248,9 +2941,9 @@ function AppInner() {
     },
     [selectedWorkspaceId, resolvedChatId, isMockSelected, sendMessageMutation, taskMode]
   );
-  return /* @__PURE__ */ jsxs8("box", { flexDirection: "column", width: "100%", height: "100%", backgroundColor: "#000000", children: [
-    /* @__PURE__ */ jsxs8("box", { flexDirection: "row", flexGrow: 1, backgroundColor: "#000000", children: [
-      showWorkspacePanel && /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs9("box", { flexDirection: "column", width: "100%", height: "100%", backgroundColor: "#000000", children: [
+    /* @__PURE__ */ jsxs9("box", { flexDirection: "row", flexGrow: 1, backgroundColor: "#000000", children: [
+      showWorkspacePanel && /* @__PURE__ */ jsx11(
         WorkspaceSidebar,
         {
           groups,
@@ -2265,7 +2958,20 @@ function AppInner() {
           loading: loadingWorkspaces
         }
       ),
-      selectedWorkspaceId && statusData?.status !== "sleeping" ? /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("box", { flexDirection: "column", flexGrow: 1, children: viewingDiff ? /* @__PURE__ */ jsx11(
+        "box",
+        {
+          flexGrow: 1,
+          border: true,
+          borderStyle: "rounded",
+          borderColor: focusPanel !== "sidebar" && focusPanel !== "info" ? "#66bb6a" : "#333333",
+          backgroundColor: "#000000",
+          flexDirection: "column",
+          title: "Diff",
+          titleAlignment: "center",
+          children: /* @__PURE__ */ jsx11(DiffViewer, { diff: viewingDiff.diff, repoName: viewingDiff.repoName, focused: focusPanel !== "sidebar" && focusPanel !== "info" })
+        }
+      ) : selectedWorkspaceId && statusData?.status !== "sleeping" ? /* @__PURE__ */ jsx11(
         ChatArea,
         {
           chats,
@@ -2279,7 +2985,7 @@ function AppInner() {
           isProcessing,
           loading: loadingMessages
         }
-      ) : selectedWorkspaceId && statusData?.status === "sleeping" ? /* @__PURE__ */ jsxs8(
+      ) : selectedWorkspaceId && statusData?.status === "sleeping" ? /* @__PURE__ */ jsxs9(
         "box",
         {
           flexGrow: 1,
@@ -2292,18 +2998,18 @@ function AppInner() {
           flexDirection: "column",
           gap: 1,
           children: [
-            /* @__PURE__ */ jsxs8("text", { fg: "#888888", children: [
+            /* @__PURE__ */ jsxs9("text", { fg: "#888888", children: [
               "\u263E",
               " This workspace is sleeping"
             ] }),
-            /* @__PURE__ */ jsxs8("text", { fg: "#555555", children: [
+            /* @__PURE__ */ jsxs9("text", { fg: "#555555", children: [
               "Press ",
-              /* @__PURE__ */ jsx10("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx10("strong", { children: "w" }) }),
+              /* @__PURE__ */ jsx11("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx11("strong", { children: "w" }) }),
               " to wake it up"
             ] })
           ]
         }
-      ) : /* @__PURE__ */ jsx10(
+      ) : /* @__PURE__ */ jsx11(
         "box",
         {
           flexGrow: 1,
@@ -2313,10 +3019,10 @@ function AppInner() {
           backgroundColor: "#000000",
           justifyContent: "center",
           alignItems: "center",
-          children: /* @__PURE__ */ jsx10("text", { fg: "#555555", children: "Create a workspace to begin building!" })
+          children: /* @__PURE__ */ jsx11("text", { fg: "#555555", children: "Create a workspace to begin building!" })
         }
-      ),
-      showInfoPanel && /* @__PURE__ */ jsx10(
+      ) }),
+      showInfoPanel && /* @__PURE__ */ jsx11(
         WorkspaceInfo,
         {
           status: statusData ?? null,
@@ -2331,31 +3037,38 @@ function AppInner() {
           },
           previews,
           onWakeWorkspace: handleWakeWorkspace,
+          onViewDiff: handleViewDiff,
           onCreatePr: () => {
             if (!resolvedChatId) return;
             sendMessageMutation.mutate({ message: "Push changes and create a GitHub PR" });
           },
           isPlanMode: taskMode === "plan",
-          wakingWorkspaceId
+          wakingWorkspaceId,
+          viewMode: viewingDiff ? "diff" : "chat",
+          viewingDiffRepoName: viewingDiff?.repoName ?? null,
+          onSelectChatMode: handleSelectChatMode,
+          onSelectDiffMode: handleSelectDiffMode
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       StatusBar,
       {
-        focusPanel
+        focusPanel,
+        viewingDiff: !!viewingDiff,
+        hasDiffAvailable: !!firstAvailableDiff
       }
     )
   ] });
 }
 
 // src/interactive/index.tsx
-import { jsx as jsx11 } from "@opentui/react/jsx-runtime";
+import { jsx as jsx12 } from "@opentui/react/jsx-runtime";
 async function launchInteractive() {
   const renderer = await createCliRenderer({
     exitOnCtrlC: false
   });
-  createRoot(renderer).render(/* @__PURE__ */ jsx11(App, {}));
+  createRoot(renderer).render(/* @__PURE__ */ jsx12(App, {}));
 }
 export {
   launchInteractive