@scira/cli 0.1.0 → 0.1.1

package/dist/ui/ink/components/home-screen.js

@@ -1,15 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { LLM_PROVIDER_LABELS } from "../../../providers/llm/registry.js";
 import { pkgVersion, relativeTime } from "../lib/utils.js";
 import { HOME_TIPS } from "../constants.js";
+import { useTheme } from "../hooks/use-theme.js";
+function enabledMcpCount(config) {
+    return (config.mcp.chromeDevtools.enabled ? 1 : 0) + config.mcp.servers.filter((s) => s.enabled).length;
+}
+function computeHeroLayout(bodyRows, bodyCols, hasNotice) {
+    const showTip = bodyRows >= 20 && bodyCols >= 58 && !hasNotice;
+    const showArt = bodyRows >= 17 && bodyCols >= 72;
+    const showSubtitle = bodyRows >= 14 && bodyCols >= 50;
+    const showTagline = bodyRows >= 16 && bodyCols >= 64;
+    const showHint = bodyRows >= 15 && bodyCols >= 58;
+    const showConfig = bodyRows >= 12 && bodyCols >= 46;
+    const showConfigDetail = bodyRows >= 14 && bodyCols >= 56;
+    const showProviderLabel = bodyCols >= 62;
+    const showVersion = bodyRows >= 13 && bodyCols >= 54;
+    const showActionHints = bodyCols >= 52;
+    let contentRows = 1; // title
+    if (showTagline)
+        contentRows++;
+    if (showHint)
+        contentRows++;
+    if (showConfig || showConfigDetail) {
+        contentRows++; // spacer
+        if (showConfig)
+            contentRows++;
+        if (showConfigDetail)
+            contentRows++;
+    }
+    const newResearchRowOffset = contentRows + 1; // spacer before actions, then new research
+    contentRows = newResearchRowOffset + 2; // new + quit
+    const cardRows = contentRows + 2; // border padding
+    return {
+        showArt,
+        showSubtitle,
+        showTagline,
+        showHint,
+        showConfig,
+        showConfigDetail,
+        showProviderLabel,
+        showVersion,
+        showActionHints,
+        showTip,
+        cardRows,
+        newResearchRowOffset,
+    };
+}
 /** Home screen body: branding card, browse modal, notice, and tip line.
  *  Also (re)builds the mouse click/hover row maps as a render side-effect. */
-export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, heroHidden, notice, tipIndex, commandMenuHeight, sessionsModalOpen, sessionsModalIdx, inputText, clickMapRef, hoverMapRef, setSelectedIdx, setSessionsModalOpen, setSessionsModalIdx, setNotice, openRun, submitHome, exit, }) {
-    const cardW = Math.min(Math.max(52, cols - 4), 90);
-    const heroRows = heroHidden ? 0 : 2;
-    const cardH = heroHidden ? 0 : 10;
+export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, heroHidden, notice, tipIndex, commandMenuHeight, mcpOpen, sessionsModalOpen, sessionsModalIdx, inputText, config, modelName, clickMapRef, hoverMapRef, setSelectedIdx, setSessionsModalOpen, setSessionsModalIdx, setNotice, openRun, submitHome, exit, }) {
+    const theme = useTheme();
+    const bodyCols = Math.max(32, cols - 4);
+    const cardW = Math.min(Math.max(36, bodyCols), 90);
+    const mcpCount = enabledMcpCount(config);
     const bHeight = rows - 6 - commandMenuHeight;
-    const contentH = cardH + (notice ? 2 : 0) + 2;
+    const heroLayout = heroHidden ? null : computeHeroLayout(bHeight, bodyCols, !!notice);
+    const providerLabel = heroLayout?.showProviderLabel
+        ? LLM_PROVIDER_LABELS[config.llmProvider]
+        : config.llmProvider;
+    const cardH = heroLayout?.cardRows ?? 0;
+    const tipRows = heroLayout?.showTip ? 2 : 0;
+    const contentH = cardH + (notice ? 2 : 0) + tipRows;
     const topGap = Math.max(0, Math.floor((bHeight - contentH) / 2));
     const cardTop0 = 2 + topGap;
     const newIdx = 0;
@@ -18,8 +71,8 @@ export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, hero
     const quitActive = selectedIdx === quitIdx || hoveredIdx === quitIdx;
     const clickMap = new Map();
     const hoverMap = new Map();
-    const rowBase = cardTop0 + heroRows + 4;
-    if (sessionsModalOpen) {
+    const rowBase = cardTop0 + 1 + (heroLayout?.newResearchRowOffset ?? 4);
+    if (!mcpOpen && sessionsModalOpen) {
         const modalVisible = Math.max(5, rows - 12);
         const half = Math.floor(modalVisible / 2);
         const windowStart = Math.max(0, Math.min(sessionsModalIdx - half, Math.max(0, sessions.length - modalVisible)));
@@ -38,8 +91,8 @@ export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, hero
             hoverMap.set(row, idx);
         });
     }
-    else if (!heroHidden) {
-        clickMap.set(rowBase, () => {
+    else if (!mcpOpen && !heroHidden) {
+        clickMap.set(rowBase, (_x) => {
             setSelectedIdx(newIdx);
             if (inputText.trim())
                 void submitHome(inputText);
@@ -47,11 +100,13 @@ export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, hero
                 setNotice("Type a question below to start a new research run.");
         });
         hoverMap.set(rowBase, newIdx);
-        clickMap.set(rowBase + 1, () => exit());
+        clickMap.set(rowBase + 1, (_x) => exit());
         hoverMap.set(rowBase + 1, quitIdx);
     }
-    clickMapRef.current = clickMap;
-    hoverMapRef.current = hoverMap;
+    if (!mcpOpen) {
+        clickMapRef.current = clickMap;
+        hoverMapRef.current = hoverMap;
+    }
     return (_jsx(Box, { flexGrow: 1, flexDirection: "column", justifyContent: "center", alignItems: "center", children: sessionsModalOpen ? (() => {
             const modalVisible = Math.max(5, rows - 12);
             const half = Math.floor(modalVisible / 2);
@@ -59,11 +114,13 @@ export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, hero
             const windowEnd = Math.min(sessions.length, windowStart + modalVisible);
             const above = windowStart;
             const below = sessions.length - windowEnd;
-            return (_jsxs(Box, { borderStyle: "round", borderColor: "#FFE0C2", width: cardW, flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: "#FFE0C2", bold: true, children: "All sessions" }), _jsx(Text, { color: "gray", dimColor: true, children: `${sessions.length} total  ·  ${sessionsModalIdx + 1}/${sessions.length}  ·  ↑↓ navigate · ⏎ open · esc close` }), _jsx(Box, { height: 1 }), above > 0 && _jsx(Text, { color: "gray", dimColor: true, children: `  ↑ ${above} more above` }), sessions.slice(windowStart, windowEnd).map((s, i) => {
+            return (_jsxs(Box, { borderStyle: "round", borderColor: theme.border, width: cardW, flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { color: theme.accent, bold: true, children: "All sessions" }), _jsx(Text, { color: theme.textDim, wrap: "truncate", children: bodyCols >= 58
+                            ? `${sessions.length} total  ·  ${sessionsModalIdx + 1}/${sessions.length}  ·  ↑↓ navigate · ⏎ open · esc close`
+                            : `${sessions.length} sessions  ·  ${sessionsModalIdx + 1}/${sessions.length}  ·  esc close` }), _jsx(Box, { height: 1 }), above > 0 && _jsx(Text, { color: theme.textDim, children: `  ↑ ${above} more above` }), sessions.slice(windowStart, windowEnd).map((s, i) => {
                         const idx = windowStart + i;
                         const active = idx === sessionsModalIdx;
                         const display = (s.title || s.goal || s.id).slice(0, cardW - 22);
-                        return (_jsxs(Box, { children: [_jsx(Text, { color: active ? "white" : "gray", children: active ? "❯ [ " : "  [ " }), _jsx(Text, { bold: active, color: active ? "white" : "gray", wrap: "truncate", children: display }), _jsx(Box, { flexGrow: 1 }), s.isFull && _jsx(Text, { color: s.reportDirty ? "yellow" : "green", dimColor: true, children: s.reportDirty ? "draft " : "ready " }), _jsx(Text, { color: "gray", dimColor: true, children: relativeTime(s.updatedAt) }), _jsx(Text, { color: active ? "white" : "gray", children: " ]" })] }, s.id));
-                    }), below > 0 && _jsx(Text, { color: "gray", dimColor: true, children: `  ↓ ${below} more below` })] }));
-        })() : heroHidden ? null : (_jsxs(Box, { flexDirection: "column", alignItems: "center", width: cardW, children: [_jsxs(Box, { borderStyle: "round", borderColor: "gray", width: cardW, flexDirection: "row", paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", justifyContent: "center", marginRight: 3, children: [" ·:::· ", "·:     ", " ·:::· ", "     ·:", " ·:::· "].map((line, i) => (_jsx(Text, { color: "#FFE0C2", dimColor: true, children: line }, i))) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "white", children: "scira" }), _jsx(Text, { color: "gray", dimColor: true, children: "research agent" }), _jsxs(Text, { color: "gray", dimColor: true, children: ["v", pkgVersion] })] }), _jsx(Text, { color: "white", children: "Research and coding agent with real sources and tools." }), _jsx(Text, { color: "gray", dimColor: true, children: "Type a question below to start, or use # to browse past sessions." }), _jsx(Box, { height: 1 }), _jsxs(Box, { children: [_jsx(Text, { bold: newActive, color: newActive ? "white" : "gray", children: "New research" }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: "gray", dimColor: true, children: "\u23CE enter" })] }), _jsxs(Box, { children: [_jsx(Text, { bold: quitActive, color: quitActive ? "white" : "gray", children: "Quit" }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: "gray", dimColor: true, children: "ctrl+d" })] })] })] }), notice ? (_jsx(Box, { paddingTop: 1, children: _jsx(Text, { color: "yellow", children: notice }) })) : null, _jsx(Box, { paddingTop: 2, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["Tip:  ", HOME_TIPS[tipIndex % HOME_TIPS.length]] }) })] })) }));
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: active ? theme.text : theme.textDim, children: active ? "❯ [ " : "  [ " }), _jsx(Text, { bold: active, color: active ? theme.text : theme.textDim, wrap: "truncate", children: display }), _jsx(Box, { flexGrow: 1 }), s.isFull && _jsx(Text, { color: s.reportDirty ? theme.warning : theme.success, children: s.reportDirty ? "draft " : "ready " }), _jsx(Text, { color: theme.textDim, children: relativeTime(s.updatedAt) }), _jsx(Text, { color: active ? theme.text : theme.textDim, children: " ]" })] }, s.id));
+                    }), below > 0 && _jsx(Text, { color: theme.textDim, children: `  ↓ ${below} more below` })] }));
+        })() : heroHidden || !heroLayout ? null : (_jsxs(Box, { flexDirection: "column", alignItems: "center", width: cardW, children: [_jsxs(Box, { borderStyle: "round", borderColor: theme.border, width: cardW, flexDirection: "row", paddingX: 2, paddingY: 1, children: [heroLayout.showArt ? (_jsx(Box, { flexDirection: "column", justifyContent: "center", marginRight: 3, children: [" ·:::· ", "·:     ", " ·:::· ", "     ·:", " ·:::· "].map((line, i) => (_jsx(Text, { color: theme.accent, children: line }, i))) })) : null, _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { gap: heroLayout.showSubtitle || heroLayout.showVersion ? 2 : 0, marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.text, children: "scira" }), heroLayout.showSubtitle ? _jsx(Text, { color: theme.textDim, children: "research agent" }) : null, heroLayout.showVersion ? _jsxs(Text, { color: theme.textDim, children: ["v", pkgVersion] }) : null] }), heroLayout.showTagline ? (_jsx(Text, { color: theme.text, wrap: "truncate", children: "Research and coding agent with real sources and tools." })) : null, heroLayout.showHint ? (_jsx(Text, { color: theme.textDim, wrap: "truncate", children: "Type a question below to start, or use # to browse past sessions." })) : null, (heroLayout.showConfig || heroLayout.showConfigDetail) ? _jsx(Box, { height: 1 }) : null, heroLayout.showConfig ? (_jsxs(Text, { color: theme.textDim, wrap: "truncate", children: [_jsx(Text, { color: theme.accent, children: "model " }), modelName, _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", providerLabel] })] })) : null, heroLayout.showConfigDetail ? (_jsxs(Text, { color: theme.textDim, wrap: "truncate", children: [_jsx(Text, { color: theme.accent, children: "search " }), config.search.provider, " \u00D7", config.search.maxResults, _jsxs(Text, { color: theme.textDim, children: [" \u00B7 theme ", config.theme, " \u00B7 ", config.approvalMode] }), mcpCount > 0 ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", mcpCount, " mcp"] }) : null] })) : null, _jsx(Box, { height: 1 }), _jsxs(Box, { children: [_jsx(Text, { bold: newActive, color: newActive ? theme.text : theme.textDim, children: "New research" }), heroLayout.showActionHints ? (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: theme.textDim, children: "\u23CE enter" })] })) : null] }), _jsxs(Box, { children: [_jsx(Text, { bold: quitActive, color: quitActive ? theme.text : theme.textDim, children: "Quit" }), heroLayout.showActionHints ? (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: theme.textDim, children: "ctrl+d" })] })) : null] })] })] }), notice ? (_jsx(Box, { paddingTop: 1, children: _jsx(Text, { color: theme.warning, children: notice }) })) : null, heroLayout.showTip ? (_jsx(Box, { paddingTop: 2, width: cardW, children: _jsxs(Text, { color: theme.textDim, wrap: "truncate", children: ["Tip:  ", HOME_TIPS[tipIndex % HOME_TIPS.length]] }) })) : null] })) }));
 }

package/dist/ui/ink/components/overlays.js

@@ -3,26 +3,33 @@ import { Box, Text } from "ink";
 import { SPINNER_FRAMES, CHAT_COMMANDS, COMMAND_DESCRIPTIONS, MENU_VISIBLE } from "../constants.js";
 import { fmtTokens, wrapText } from "../lib/utils.js";
 import { LLM_PROVIDER_LABELS } from "../../../providers/llm/registry.js";
-export function TopBar({ screen, runState, fullMode, activeUsage, busy, frame, cwdDisplay }) {
-    return (_jsxs(Box, { paddingTop: 1, justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, minWidth: 0, marginRight: 2, children: _jsx(Text, { color: "gray", dimColor: true, wrap: "truncate-end", children: screen === "chat" ? (runState?.title || runState?.goal || cwdDisplay) : cwdDisplay }) }), screen === "chat" && (_jsxs(Box, { flexShrink: 0, gap: 1, children: [_jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsx(Text, { color: fullMode ? "magenta" : "#FFE0C2", children: fullMode ? "full" : "quick" }), activeUsage && (_jsx(Text, { color: "gray", dimColor: true, children: `↑${fmtTokens(activeUsage.input)} ↓${fmtTokens(activeUsage.output)}` })), fullMode && (_jsxs(Text, { color: "gray", dimColor: true, children: [`src:${runState?.sourceCount ?? 0}`, (runState?.claimCount ?? 0) > 0 ? ` · claims:${runState?.claimCount}` : ""] })), fullMode && (_jsx(Text, { color: runState?.reportDirty ? "yellow" : "green", dimColor: true, children: runState?.reportDirty ? "draft" : "ready" })), busy && _jsx(Text, { color: "#FFE0C2", children: SPINNER_FRAMES[frame % SPINNER_FRAMES.length] }), _jsx(Text, { color: "gray", dimColor: true, children: "|" })] }))] }));
+import { useTheme } from "../hooks/use-theme.js";
+export function TopBar({ screen, runState, fullMode, activeUsage, busy, frame, cwdDisplay, config }) {
+    const theme = useTheme();
+    return (_jsxs(Box, { paddingTop: 1, justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, minWidth: 0, marginRight: 2, children: _jsx(Text, { color: theme.textDim, wrap: "truncate-end", children: screen === "chat" ? (runState?.title || runState?.goal || cwdDisplay) : cwdDisplay }) }), screen === "chat" && (_jsxs(Box, { flexShrink: 0, gap: 1, children: [_jsx(Text, { color: theme.textDim, children: "|" }), _jsx(Text, { color: fullMode ? "magenta" : theme.accent, children: fullMode ? "full" : "quick" }), activeUsage && (_jsx(Text, { color: theme.textDim, children: `↑${fmtTokens(activeUsage.input)} ↓${fmtTokens(activeUsage.output)}` })), fullMode && (_jsxs(Text, { color: theme.textDim, children: [`src:${runState?.sourceCount ?? 0}`, (runState?.claimCount ?? 0) > 0 ? ` · claims:${runState?.claimCount}` : ""] })), fullMode && (_jsx(Text, { color: runState?.reportDirty ? theme.warning : theme.success, children: runState?.reportDirty ? "draft" : "ready" })), busy && _jsx(Text, { color: theme.accent, children: SPINNER_FRAMES[frame % SPINNER_FRAMES.length] }), _jsx(Text, { color: theme.textDim, children: "|" })] }))] }));
 }
-export function InputBar({ inputLines, cursorLine, cursorCol, showCursor, approvalPending, busy, frame, boxWidth, modelName }) {
-    const accentColor = approvalPending ? "yellowBright" : busy ? "#C2AA93" : "gray";
+export function InputBar({ inputLines, cursorLine, cursorCol, showCursor, approvalPending, busy, frame, boxWidth, modelName, config }) {
+    const theme = useTheme();
+    const borderColor = approvalPending ? theme.warning : busy ? theme.accentDim : theme.textDim;
+    const promptColor = approvalPending ? theme.warning : busy ? theme.accentDim : theme.accent;
+    const inputColor = approvalPending ? theme.textDim : theme.inputText;
     const borderLabel = busy ? `${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ${modelName}` : modelName;
     const labelMax = Math.max(0, boxWidth - 6);
     const label = borderLabel.length > labelMax ? borderLabel.slice(0, labelMax) : borderLabel;
     const dashCount = Math.max(1, boxWidth - label.length - 5);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accentColor, children: "╭" + "─".repeat(Math.max(0, boxWidth - 2)) + "╮" }), inputLines.map((line, i) => (_jsxs(Box, { width: boxWidth, children: [_jsx(Text, { color: accentColor, children: "│ " }), _jsx(Text, { color: i === 0 ? (approvalPending ? "yellowBright" : busy ? "#C2AA93" : "#FFE0C2") : accentColor, children: i === 0 ? "❯ " : "  " }), showCursor && i === cursorLine ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "white", children: line.slice(0, cursorCol) }), _jsx(Text, { color: "white", inverse: true, children: line[cursorCol] ?? " " }), _jsx(Text, { color: "white", children: line.slice(cursorCol + 1) })] })) : (_jsx(Text, { color: approvalPending ? "gray" : "white", children: line })), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: accentColor, children: " \u2502" })] }, i))), _jsxs(Box, { width: boxWidth, children: [_jsx(Text, { color: accentColor, children: "╰" + "─".repeat(dashCount) + " " }), _jsx(Text, { color: "#FFE0C2", children: label }), _jsx(Text, { color: accentColor, children: " ─╯" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: borderColor, children: "╭" + "─".repeat(Math.max(0, boxWidth - 2)) + "╮" }), inputLines.map((line, i) => (_jsxs(Box, { width: boxWidth, children: [_jsx(Text, { color: borderColor, children: "│ " }), _jsx(Text, { color: i === 0 ? promptColor : borderColor, children: i === 0 ? "❯ " : "  " }), _jsx(Text, { color: inputColor, wrap: "truncate", children: showCursor && i === cursorLine ? (_jsxs(_Fragment, { children: [line.slice(0, cursorCol), _jsx(Text, { backgroundColor: theme.cursorBackground, color: theme.cursorForeground, children: line[cursorCol] ?? " " }), line.slice(cursorCol + 1)] })) : (line) }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: borderColor, children: " \u2502" })] }, i))), _jsxs(Box, { width: boxWidth, children: [_jsx(Text, { color: borderColor, children: "╰" + "─".repeat(dashCount) + " " }), _jsx(Text, { color: theme.accent, children: label }), _jsx(Text, { color: borderColor, children: " ─╯" })] })] }));
 }
-export function HintLine({ screen, busy, scrollLabel, hasDoneGroups, hasFocusedGroup }) {
+export function HintLine({ screen, busy, scrollLabel, hasDoneGroups, hasFocusedGroup, config }) {
+    const theme = useTheme();
     if (screen === "chat") {
-        return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", dimColor: true, children: _jsx(Text, { bold: true, color: "#FFE0C2", children: "/HELP" }) }), _jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsx(Text, { color: "gray", dimColor: true, children: _jsx(Text, { bold: true, color: "#FFE0C2", children: "/REPORT" }) }), _jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsx(Text, { color: "gray", dimColor: true, children: _jsx(Text, { bold: true, color: "#FFE0C2", children: "/NEW" }) }), busy && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsx(Text, { color: "gray", dimColor: true, children: _jsx(Text, { bold: true, color: "#FFE0C2", children: "/STOP" }) })] })), hasDoneGroups && !busy ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsx(Text, { color: "gray", dimColor: true, children: hasFocusedGroup
-                                ? _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "#FFE0C2", children: "C" }), " toggle \u00B7 ", _jsx(Text, { bold: true, color: "#FFE0C2", children: "ESC" }), " unfocus"] })
-                                : _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "#FFE0C2", children: "[ ]" }), " \u00B7 ", _jsx(Text, { bold: true, color: "#FFE0C2", children: "C" }), " groups"] }) })] })) : null, scrollLabel ? (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: "gray", dimColor: true, children: scrollLabel })] })) : null] }));
+        return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: theme.textDim, children: _jsx(Text, { bold: true, color: theme.accent, children: "/HELP" }) }), _jsx(Text, { color: theme.textDim, children: "|" }), _jsx(Text, { color: theme.textDim, children: _jsx(Text, { bold: true, color: theme.accent, children: "/REPORT" }) }), _jsx(Text, { color: theme.textDim, children: "|" }), _jsx(Text, { color: theme.textDim, children: _jsx(Text, { bold: true, color: theme.accent, children: "/NEW" }) }), busy && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.textDim, children: "|" }), _jsx(Text, { color: theme.textDim, children: _jsx(Text, { bold: true, color: theme.accent, children: "/STOP" }) })] })), hasDoneGroups && !busy ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.textDim, children: "|" }), _jsx(Text, { color: theme.textDim, children: hasFocusedGroup
+                                ? _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: theme.accent, children: "C" }), " toggle \u00B7 ", _jsx(Text, { bold: true, color: theme.accent, children: "ESC" }), " unfocus"] })
+                                : _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: theme.accent, children: "[ ]" }), " \u00B7 ", _jsx(Text, { bold: true, color: theme.accent, children: "C" }), " groups"] }) })] })) : null, scrollLabel ? (_jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: theme.textDim, children: scrollLabel })] })) : null] }));
     }
-    return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [_jsx(Text, { bold: true, color: "#FFE0C2", children: "\u2191\u2193" }), ":navigate"] }), _jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsxs(Text, { color: "gray", dimColor: true, children: [_jsx(Text, { bold: true, color: "#FFE0C2", children: "\u23CE" }), ":open"] }), _jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsxs(Text, { color: "gray", dimColor: true, children: [_jsx(Text, { bold: true, color: "#FFE0C2", children: "ESC" }), ":close"] }), _jsx(Text, { color: "gray", dimColor: true, children: "|" }), _jsxs(Text, { color: "gray", dimColor: true, children: [_jsx(Text, { bold: true, color: "#FFE0C2", children: "Q" }), ":quit"] })] }));
+    return (_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { bold: true, color: theme.accent, children: "\u2191\u2193" }), ":navigate"] }), _jsx(Text, { color: theme.textDim, children: "|" }), _jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { bold: true, color: theme.accent, children: "\u23CE" }), ":open"] }), _jsx(Text, { color: theme.textDim, children: "|" }), _jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { bold: true, color: theme.accent, children: "ESC" }), ":close"] }), _jsx(Text, { color: theme.textDim, children: "|" }), _jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Q" }), ":quit"] })] }));
 }
-export function CommandMenuBox({ activeSuggestions, activeSuggestionKind, commandMenuIndex, innerWidth, sessions }) {
+export function CommandMenuBox({ activeSuggestions, activeSuggestionKind, commandMenuIndex, innerWidth, sessions, config }) {
+    const theme = useTheme();
     if (activeSuggestions.length === 0)
         return null;
     const total = activeSuggestions.length;
@@ -36,7 +43,7 @@ export function CommandMenuBox({ activeSuggestions, activeSuggestionKind, comman
     const isSessionMenu = activeSuggestionKind === "session";
     const baseHeader = isFileMenu ? "files  ↑↓ move · tab complete"
         : isSessionMenu ? "sessions  ↑↓ move · ⏎ open"
-            : "commands  ↑↓ move · tab complete";
+            : "commands  ↑↓ move · tab complete · ⏎ run";
     const header = total > MENU_VISIBLE ? `${baseHeader}  ·  ${clampedIdx + 1}/${total}` : baseHeader;
     const sessionDesc = (label) => {
         const s = sessions?.find((r) => (r.title ?? r.goal ?? r.id).replace(/\s+/gu, " ").trim() === label);
@@ -49,7 +56,7 @@ export function CommandMenuBox({ activeSuggestions, activeSuggestionKind, comman
             bits.push(`${s.claimCount} claims`);
         return bits.join(" · ");
     };
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, marginX: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [header, windowStart > 0 ? "  ↑" : "", windowStart + MENU_VISIBLE < total ? "  ↓" : ""] }), visible.map((item, i) => {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, marginX: 1, children: [_jsxs(Text, { color: theme.textDim, children: [header, windowStart > 0 ? "  ↑" : "", windowStart + MENU_VISIBLE < total ? "  ↓" : ""] }), visible.map((item, i) => {
                 const gi = windowStart + i;
                 const active = gi === clampedIdx;
                 const name = isSessionMenu && item.length > nameWidth ? item.slice(0, Math.max(0, nameWidth - 1)) + "…" : item;
@@ -59,22 +66,25 @@ export function CommandMenuBox({ activeSuggestions, activeSuggestionKind, comman
                         : COMMAND_DESCRIPTIONS[item] ?? "";
                 const trimmed = desc.length > descMax ? desc.slice(0, Math.max(0, descMax - 1)) + "…" : desc;
                 const namePad = " ".repeat(Math.max(1, nameWidth - name.length + 2));
-                return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: active ? "white" : "gray", bold: active, children: [active ? "❯ " : "  ", label] }), _jsxs(Text, { color: "gray", dimColor: true, children: [namePad, trimmed] })] }, `${item}-${gi}`));
+                return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: active ? theme.text : theme.textDim, bold: active, children: [active ? "❯ " : "  ", label] }), _jsxs(Text, { color: theme.textDim, children: [namePad, trimmed] })] }, `${item}-${gi}`));
             })] }));
 }
-export function HelpBox({ open, innerWidth }) {
+export function HelpBox({ open, innerWidth, config }) {
+    const theme = useTheme();
     if (!open)
         return null;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, marginX: 1, children: [_jsxs(Text, { bold: true, color: "white", children: ["help ", _jsx(Text, { color: "gray", dimColor: true, children: "esc close" })] }), _jsx(Text, { color: "gray", dimColor: true, children: "─".repeat(Math.max(10, innerWidth - 6)) }), _jsx(Text, { color: "gray", dimColor: true, children: "scroll  \u2191/\u2193  k/j  u/d  pgup/pgdn" }), _jsx(Text, { color: "gray", dimColor: true, children: "autocomplete  / commands \u00B7 @ files \u00B7 # sessions" }), _jsx(Text, { color: "gray", dimColor: true, children: "─".repeat(Math.max(10, innerWidth - 6)) }), CHAT_COMMANDS.map((cmd) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: "#FFE0C2", children: cmd }), _jsx(Text, { color: "gray", dimColor: true, children: COMMAND_DESCRIPTIONS[cmd] })] }, cmd)))] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, marginX: 1, children: [_jsxs(Text, { bold: true, color: theme.text, children: ["help ", _jsx(Text, { color: theme.textDim, children: "esc close" })] }), _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(10, innerWidth - 6)) }), _jsx(Text, { color: theme.textDim, children: "scroll  \u2191/\u2193  k/j  u/d  pgup/pgdn" }), _jsx(Text, { color: theme.textDim, children: "autocomplete  / commands \u00B7 @ files \u00B7 # sessions" }), _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(10, innerWidth - 6)) }), CHAT_COMMANDS.map((cmd) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: theme.accent, children: cmd }), _jsx(Text, { color: theme.textDim, children: COMMAND_DESCRIPTIONS[cmd] })] }, cmd)))] }));
 }
-export function ApprovalBox({ toolName, description, innerWidth }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellowBright", paddingX: 1, marginX: 1, children: [_jsxs(Text, { bold: true, color: "yellowBright", children: ["\u26A0  ", toolName, _jsx(Text, { color: "gray", dimColor: true, children: "  y approve \u00B7 n reject" })] }), _jsx(Text, { color: "gray", dimColor: true, children: "─".repeat(Math.max(10, innerWidth - 6)) }), wrapText(description, Math.max(10, innerWidth - 4)).slice(0, 6).map((line, i) => {
+export function ApprovalBox({ toolName, description, innerWidth, config }) {
+    const theme = useTheme();
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.warning, paddingX: 1, marginX: 1, children: [_jsxs(Text, { bold: true, color: theme.warning, children: ["\u26A0  ", toolName, _jsx(Text, { color: theme.textDim, children: "  y approve \u00B7 n reject" })] }), _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(10, innerWidth - 6)) }), wrapText(description, Math.max(10, innerWidth - 4)).slice(0, 6).map((line, i) => {
                 const isAdded = line.startsWith("+ ");
                 const isRemoved = line.startsWith("- ");
-                return (_jsx(Text, { color: isAdded ? "green" : isRemoved ? "red" : "gray", wrap: "truncate", children: line }, i));
+                return (_jsx(Text, { color: isAdded ? theme.success : isRemoved ? theme.error : theme.textDim, wrap: "truncate", children: line }, i));
             })] }));
 }
-export function MenuDialog({ menu, cols, rows }) {
+export function MenuDialog({ menu, cols, rows, config }) {
+    const theme = useTheme();
     if (!menu)
         return null;
     const DIALOG_W = Math.min(64, Math.max(40, cols - 4));
@@ -90,22 +100,66 @@ export function MenuDialog({ menu, cols, rows }) {
     const dialogLeft = Math.max(0, Math.floor((cols - 4 - DIALOG_W) / 2));
     const dialogH = 5 + (menu.loading ? 1 : Math.min(DIALOG_ITEMS, menuFiltered.length) + (menuStart > 0 ? 1 : 0) + (menuFiltered.length - (menuStart + DIALOG_ITEMS) > 0 ? 1 : 0));
     const dialogTop = Math.max(1, Math.floor((rows - dialogH) / 2));
-    return (_jsxs(Box, { position: "absolute", marginLeft: dialogLeft, marginTop: dialogTop, width: DIALOG_W, flexDirection: "column", borderStyle: "round", borderColor: "#FFE0C2", backgroundColor: "#0d0d0d", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "white", children: [menu.type === "model" ? "Select model" : menu.type === "llm" ? "Select LLM provider" : "Select search provider", "  ", _jsx(Text, { color: "gray", dimColor: true, children: "\u2191\u2193 navigate \u00B7 \u23CE apply \u00B7 esc close" })] }), !menu.loading && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: "#FFE0C2", children: "⌕ " }), _jsx(Text, { color: "white", children: menu.query }), !menu.query && _jsx(Text, { color: "gray", dimColor: true, children: "type to filter\u2026" })] }), _jsx(Text, { color: "gray", dimColor: true, children: "─".repeat(Math.max(4, DIALOG_W - 4)) })] })), menu.loading ? (_jsx(Text, { color: "gray", dimColor: true, children: "  loading models\u2026" })) : menuFiltered.length === 0 ? (_jsxs(Text, { color: "gray", dimColor: true, children: ["  no matches for \"", menu.query, "\""] })) : (_jsxs(_Fragment, { children: [menuStart > 0 && _jsxs(Text, { color: "gray", dimColor: true, children: ["  \u2191 ", menuStart, " more"] }), menuFiltered.slice(menuStart, menuStart + DIALOG_ITEMS).map((item, i) => {
+    return (_jsxs(Box, { position: "absolute", marginLeft: dialogLeft, marginTop: dialogTop, width: DIALOG_W, flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, children: [_jsxs(Text, { bold: true, color: theme.text, children: [menu.type === "model" ? "Select model" : menu.type === "llm" ? "Select LLM provider" : "Select search provider", "  ", _jsx(Text, { color: theme.textDim, children: "\u2191\u2193 navigate \u00B7 \u23CE apply \u00B7 esc close" })] }), !menu.loading && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: "⌕ " }), _jsx(Text, { color: theme.text, children: menu.query }), !menu.query && _jsx(Text, { color: theme.textDim, children: "type to filter\u2026" })] }), _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(4, DIALOG_W - 4)) })] })), menu.loading ? (_jsx(Text, { color: theme.textDim, children: "  loading models\u2026" })) : menuFiltered.length === 0 ? (_jsxs(Text, { color: theme.textDim, children: ["  no matches for \"", menu.query, "\""] })) : (_jsxs(_Fragment, { children: [menuStart > 0 && _jsxs(Text, { color: theme.textDim, children: ["  \u2191 ", menuStart, " more"] }), menuFiltered.slice(menuStart, menuStart + DIALOG_ITEMS).map((item, i) => {
                         const idx = menuStart + i;
                         const active = idx === menu.index;
-                        return (_jsxs(Text, { color: active ? "#FFE0C2" : "gray", bold: active, wrap: "truncate", children: [active ? "❯ " : "  ", displayName(item), menu.type === "llm" ? _jsx(Text, { color: "gray", dimColor: true, children: "  " + item }) : null] }, item));
-                    }), menuFiltered.length - (menuStart + DIALOG_ITEMS) > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  \u2193 ", menuFiltered.length - (menuStart + DIALOG_ITEMS), " more"] }))] }))] }));
+                        return (_jsxs(Text, { color: active ? theme.accent : theme.textDim, bold: active, wrap: "truncate", children: [active ? "❯ " : "  ", displayName(item), menu.type === "llm" ? _jsx(Text, { color: theme.textDim, children: "  " + item }) : null] }, item));
+                    }), menuFiltered.length - (menuStart + DIALOG_ITEMS) > 0 && (_jsxs(Text, { color: theme.textDim, children: ["  \u2193 ", menuFiltered.length - (menuStart + DIALOG_ITEMS), " more"] }))] }))] }));
 }
-export function McpDialog({ open, config, cols, rows }) {
+export function buildMcpDialogRows(config) {
+    const dt = config.mcp.chromeDevtools;
+    const rows = [{
+            key: "chromeDevtools",
+            name: "chromeDevtools",
+            transport: "stdio",
+            target: [dt.command, ...dt.args].join(" "),
+            enabled: dt.enabled,
+            removable: false,
+        }];
+    for (const s of config.mcp.servers) {
+        rows.push({
+            key: s.name,
+            name: s.name,
+            transport: s.transport,
+            target: s.transport === "stdio"
+                ? [s.command, ...s.args].filter(Boolean).join(" ")
+                : s.url ?? "(missing url)",
+            enabled: s.enabled,
+            removable: true,
+        });
+    }
+    return rows;
+}
+export function McpDialog({ open, config, cols, rows, selectedIdx, hoveredIdx, onToggle, onRemove, clickMapRef, hoverMapRef, }) {
+    const theme = useTheme();
     if (!open)
         return null;
     const W = Math.min(92, Math.max(52, cols - 8));
     const left = Math.max(0, Math.floor((cols - 4 - W) / 2));
-    const servers = config.mcp.servers;
-    const top = Math.max(1, Math.floor((rows - (8 + servers.length)) / 2));
-    const dt = config.mcp.chromeDevtools;
-    return (_jsxs(Box, { position: "absolute", marginLeft: left, marginTop: top, width: W, flexDirection: "column", borderStyle: "round", borderColor: "#FFE0C2", backgroundColor: "#0d0d0d", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "white", children: ["MCP servers ", _jsx(Text, { color: "gray", dimColor: true, children: "esc/q/enter close" })] }), _jsx(Text, { color: "gray", dimColor: true, children: "─".repeat(Math.max(4, W - 4)) }), _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: dt.enabled ? "green" : "gray", children: dt.enabled ? "●" : "○" }), _jsx(Text, { color: "white", children: " chromeDevtools " }), _jsx(Text, { color: "#FFE0C2", children: "[stdio] " }), _jsx(Text, { color: "gray", dimColor: true, children: [dt.command, ...dt.args].join(" ") })] }), servers.length === 0 ? (_jsx(Text, { color: "gray", dimColor: true, children: "  no user-defined servers" })) : servers.map((s) => {
-                const target = s.transport === "stdio" ? [s.command, ...s.args].filter(Boolean).join(" ") : s.url ?? "(missing url)";
-                return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: s.enabled ? "green" : "gray", children: s.enabled ? "●" : "○" }), _jsxs(Text, { color: "white", children: [" ", s.name, " "] }), _jsxs(Text, { color: "#FFE0C2", children: ["[", s.transport, "] "] }), _jsx(Text, { color: "gray", dimColor: true, children: target })] }, s.name));
-            }), _jsx(Text, { color: "gray", dimColor: true, children: "─".repeat(Math.max(4, W - 4)) }), _jsx(Text, { color: "gray", dimColor: true, children: "/mcp add http exa https://mcp.exa.ai/mcp" }), _jsx(Text, { color: "gray", dimColor: true, children: "/mcp enable <name> \u00B7 /mcp disable <name>" })] }));
+    const entries = buildMcpDialogRows(config);
+    const top = Math.max(1, Math.floor((rows - (8 + entries.length)) / 2));
+    const deleteCol = left + W - 5;
+    const checkboxCol = left + 4;
+    const clickMap = new Map();
+    const hoverMap = new Map();
+    const firstRow = top + 2;
+    entries.forEach((row, i) => {
+        const termRow = firstRow + i;
+        hoverMap.set(termRow, i);
+        clickMap.set(termRow, (x) => {
+            if (row.removable && x >= deleteCol)
+                onRemove(row);
+            else if (x <= checkboxCol + 2)
+                onToggle(row);
+            else
+                onToggle(row);
+        });
+    });
+    clickMapRef.current = clickMap;
+    hoverMapRef.current = hoverMap;
+    return (_jsxs(Box, { position: "absolute", marginLeft: left, marginTop: top, width: W, flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, paddingY: 1, children: [_jsxs(Text, { bold: true, color: theme.text, children: ["MCP servers ", _jsx(Text, { color: theme.textDim, children: "\u2191\u2193 \u00B7 space toggle \u00B7 x remove \u00B7 esc close" })] }), _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(4, W - 4)) }), entries.map((row, i) => {
+                const active = i === selectedIdx || hoveredIdx === i;
+                const check = row.enabled ? "x" : " ";
+                return (_jsxs(Box, { width: W - 2, flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, minWidth: 0, children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: active ? theme.text : theme.textDim, children: active ? "❯ " : "  " }), _jsxs(Text, { color: active ? theme.accent : theme.textDim, bold: active, children: ["[", check, "]"] }), _jsxs(Text, { color: theme.text, children: [" ", row.name, " "] }), _jsxs(Text, { color: theme.accent, children: ["[", row.transport, "] "] }), _jsx(Text, { color: theme.textDim, children: row.target })] }) }), row.removable ? (_jsx(Text, { color: active ? theme.warning : theme.textDim, children: " [x]" })) : null] }, row.key));
+            }), entries.length === 1 ? (_jsx(Text, { color: theme.textDim, children: "  no user-defined servers" })) : null, _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(4, W - 4)) }), _jsx(Text, { color: theme.textDim, children: "/mcp add http exa https://mcp.exa.ai/mcp" })] }));
 }

package/dist/ui/ink/constants.js

@@ -1,12 +1,14 @@
-export const USER_BAND_BG = "#1c1c1c";
 export const S_BAR = "│";
 export const MENU_VISIBLE = 8;
 export const FILE_MENTION_MAX_CHARS = 20000;
 export const FILE_MENTION_SKIP = new Set([".git", "node_modules", "dist", ".scira"]);
 export const PROVIDERS = ["parallel", "exa", "firecrawl"];
-export const CHAT_COMMANDS = ["/help", "/new", "/rerun", "/report", "/sources", "/claims", "/why", "/mcp", "/copy", "/usage", "/rename", "/model", "/llm", "/provider", "/key", "/keys", "/stop", "/back", "/quit"];
+export const CHAT_COMMANDS = ["/help", "/home", "/new", "/rerun", "/report", "/sources", "/claims", "/why", "/mcp", "/copy", "/usage", "/rename", "/model", "/llm", "/provider", "/theme", "/key", "/keys", "/stop", "/back", "/quit"];
+/** Slash commands that take an argument; ⏎ from the menu appends a space instead of running. */
+export const COMMANDS_NEEDING_ARGS = new Set(["/theme", "/key", "/rename", "/why"]);
 export const COMMAND_DESCRIPTIONS = {
     "/help": "Show command and keyboard shortcuts.",
+    "/home": "Go to the home screen (or show the welcome card on home).",
     "/new": "Go to the home screen to start a new research run.",
     "/rerun": "Run the research agent again for this run.",
     "/report": "Show the generated report.md in the timeline.",
@@ -20,6 +22,7 @@ export const COMMAND_DESCRIPTIONS = {
     "/model": "Open the model selector dropup.",
     "/llm": "Switch the LLM provider (gateway, xai, workers-ai).",
     "/provider": "Open the search provider selector.",
+    "/theme": "Set UI theme: /theme dark · /theme light · /theme auto",
     "/key": "Save an API key, e.g. /key EXA_API_KEY ...",
     "/keys": "Show which required API keys are set.",
     "/stop": "Abort the currently running agent turn.",

package/dist/ui/ink/hooks/use-agent-turn.js

@@ -7,7 +7,7 @@ import { setRunTitle, summarizeRun } from "../../../storage/run-store.js";
 import { fmtDuration, fmtTokens, aggregateTurns, wantsFullResearch, summarizeToolInput } from "../lib/utils.js";
 import { promptWithFileMentions } from "../lib/file-mentions.js";
 import { markdownJoinerTransform } from "../../../utils/markdown-joiner.js";
-import { createSession, getSession, removeSession, attachSubscriber, sessionPushFeed, sessionSetBusy, sessionSetApproval, sessionFinishReasoning, sessionNotifyEscalate, sessionNotifyModeChange, } from "../session-manager.js";
+import { createSession, getSession, removeSession, attachSubscriber, sessionPushFeed, sessionSetBusy, sessionSetApproval, sessionFinishReasoning, sessionNotifyEscalate, sessionNotifyModeChange, mergeFeedToolResults, getSessionFeedBuffer, } from "../session-manager.js";
 export function useAgentTurn({ config, currentRunPath, queuedPromptRef, fullModeRef, conversationRef, turnsRef, feedRef, setBusy, setScrollOffset, refreshRun, recordUsage, setMode, getSubscriber, }) {
     const runTurn = useCallback(async (prompt) => {
         const runPath = currentRunPath;
@@ -60,16 +60,32 @@ export function useAgentTurn({ config, currentRunPath, queuedPromptRef, fullMode
                             sessionPushFeed(runPath, { kind: "tool", name: part.toolName, toolCallId: part.toolCallId, summary: summarizeToolInput(part.toolName, part.input), status: "running" });
                             break;
                         case "tool-result": {
-                            const toolResultId = part.toolCallId;
-                            const resultText = String(part.output).slice(0, 200);
-                            sessionPushFeed(runPath, { kind: "tool", name: "", toolCallId: toolResultId, summary: resultText, status: "done", result: resultText });
+                            if (part.preliminary)
+                                break;
+                            const raw = part.output;
+                            const resultText = typeof raw === "string" ? raw : JSON.stringify(raw);
+                            sessionPushFeed(runPath, {
+                                kind: "tool",
+                                name: "",
+                                toolCallId: part.toolCallId,
+                                summary: "",
+                                status: "done",
+                                result: resultText,
+                            });
                             void refreshRun();
                             break;
                         }
                         case "tool-error": {
-                            const toolErrId = part.toolCallId ?? "";
-                            const errText = String(part.error).slice(0, 200);
-                            sessionPushFeed(runPath, { kind: "tool", name: "", toolCallId: toolErrId, summary: errText, status: "error", result: errText });
+                            const errRaw = part.error;
+                            const errText = errRaw instanceof Error ? errRaw.message : String(errRaw);
+                            sessionPushFeed(runPath, {
+                                kind: "tool",
+                                name: "",
+                                toolCallId: part.toolCallId ?? "",
+                                summary: errText,
+                                status: "error",
+                                result: errText,
+                            });
                             break;
                         }
                         case "error":
@@ -164,7 +180,8 @@ export function useAgentTurn({ config, currentRunPath, queuedPromptRef, fullMode
             if (turnUsage.input + turnUsage.output + turnUsage.total > 0) {
                 turnsRef.current = [...turnsRef.current, { model: modelId, input: turnUsage.input, output: turnUsage.output, total: turnUsage.total, ts: Date.now() }];
             }
-            const snapshot = feedRef.current
+            const merged = mergeFeedToolResults(feedRef.current, getSessionFeedBuffer(runPath));
+            const snapshot = merged
                 .filter((item) => !(item.kind === "status" && item.text === "This will wipe the conversation history. Press /rerun again to confirm."))
                 .map((item) => item.kind === "tool" && item.status === "running" ? { ...item, status: "error" } : item);
             try {