@scira/cli 0.1.4 → 0.1.6

package/dist/ui/ink/SciraApp.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Box, useApp, useStdout, useStdin } from "ink";
-import { CHAT_COMMANDS, MENU_VISIBLE } from "./constants.js";
+import { Box, Text, useApp, useStdout, useStdin } from "ink";
+import { CHAT_COMMANDS, MENU_VISIBLE, SPINNER_FRAMES, LOADING_PHRASES } from "./constants.js";
 import { CWD_DISPLAY, wrapText, wrapInputWithCursor, loadInputHistory, saveInputHistory, linkAtMouseColumn, openExternalUrl } from "./lib/utils.js";
 import { deleteRun } from "../../storage/run-store.js";
 import { saveGlobalConfig } from "../../config/load-config.js";
@@ -56,6 +56,10 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const planModeRef = useRef(false);
     const [planMode, setPlanModeState] = useState(false);
     const setPlanMode = useCallback((active) => { planModeRef.current = active; setPlanModeState(active); }, []);
+    // Plan-mode preference armed from the home screen, applied when the next run opens.
+    const pendingPlanModeRef = useRef(false);
+    const [pendingPlanMode, setPendingPlanModeState] = useState(false);
+    const setPendingPlanMode = useCallback((active) => { pendingPlanModeRef.current = active; setPendingPlanModeState(active); }, []);
     const [usage, setUsage] = useState({});
     const turnsRef = useRef([]);
     const recordUsage = useCallback((model, u) => {
@@ -226,9 +230,9 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     }), [pushFeed, appendText, appendReasoning, finishReasoning, markToolDone, setBusy, setApprovalPending, setMode]);
     const runTurnRef = useRef(async () => { });
     const { refreshSessions, refreshRun, openRun: openRunBase } = useSession({
-        config, currentRunPath, conversationRef, feedRef, turnsRef, startedRef,
+        config, currentRunPath, conversationRef, feedRef, turnsRef, startedRef, pendingPlanModeRef,
         setSessions, setRunState, setCurrentRunPath, setInputText, setCursorPos,
-        setFeed, setUsage, setScrollOffset, setScreen, setMode, setPlanMode,
+        setFeed, setUsage, setScrollOffset, setScreen, setMode, setPlanMode, setPendingPlanMode,
         setBusy, setApprovalPending, getSubscriber,
     });
     const { runTurn } = useAgentTurn({
@@ -314,10 +318,10 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     });
     const { submitHome, submitChat, stopTurn } = useSubmit({
         state: { config, currentRunPath, sessions, selectedIdx, busy, usage, pendingRerun },
-        refs: { queuedPromptRef, fullModeRef, planModeRef, conversationRef, feedRef },
+        refs: { queuedPromptRef, fullModeRef, planModeRef, pendingPlanModeRef, conversationRef, feedRef },
         setters: {
             setApprovalPending, setInputText, setCursorPos, setInputHistory, setHistoryIndex, setHelpOpen,
-            setNotice, setBusy, setScreen, setFeed, setRunState, setPendingRerun, setMode, setPlanMode, setConfig, setMcpOpen,
+            setNotice, setBusy, setScreen, setFeed, setRunState, setPendingRerun, setMode, setPlanMode, setPendingPlanMode, setConfig, setMcpOpen,
             setHeroHidden,
         },
         actions: { pushFeed, refreshSessions, openRun, openMenu, handleSettings, runTurn, exit },
@@ -346,12 +350,25 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const menuHeight = commandMenuHeight + helpHeight + approvalHeight + linkHeight;
     const feedRows = Math.max(3, rows - 6 - inputLines.length - menuHeight);
     const hasRunningTool = feed.some((it) => it.kind === "tool" && it.status === "running");
-    const { lines: feedLines, toggleAtLine, groupToggleAtLine, linkAtLine } = useFeedLines(feed, innerWidth, reasoningTick, hasRunningTool ? frame : 0, collapsedGroups, focusedGroupKey, itemExpandState, hoveredIdx, config);
+    const { lines: feedLines, toggleAtLine, groupToggleAtLine, linkAtLine, lastUserLineStart } = useFeedLines(feed, innerWidth, reasoningTick, hasRunningTool ? frame : 0, collapsedGroups, focusedGroupKey, itemExpandState, hoveredIdx, config);
     const contentRows = Math.max(1, feedRows);
     const maxScrollOffset = Math.max(0, feedLines.length - contentRows);
     wheelStateRef.current = { screen, maxScrollOffset };
-    const clampedOffset = Math.min(scrollOffset, maxScrollOffset);
-    const startIdx = Math.max(0, feedLines.length - contentRows - clampedOffset);
+    // scrollOffset < 0 is a sentinel meaning "pin the most recent user message to
+    // the top of the viewport" (with empty space below for the incoming reply).
+    // Once the reply grows past the viewport we fall back to bottom-anchoring so
+    // the streaming output stays visible. Any manual scroll clears the sentinel.
+    const pinUserToTop = scrollOffset < 0 && lastUserLineStart >= 0;
+    let startIdx;
+    if (pinUserToTop) {
+        const fitsBelow = feedLines.length - lastUserLineStart <= contentRows;
+        startIdx = fitsBelow ? lastUserLineStart : Math.max(0, feedLines.length - contentRows);
+    }
+    else {
+        const off = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
+        startIdx = Math.max(0, feedLines.length - contentRows - off);
+    }
+    const clampedOffset = Math.max(0, feedLines.length - contentRows - startIdx);
     const hasLinkHover = hoveredIdx !== null && (linkAtLine.get(hoveredIdx)?.length ?? 0) > 0;
     const feedStartRow = 3;
     if (screen === "chat") {
@@ -384,7 +401,31 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
         clickMapRef.current = clickMap;
         hoverMapRef.current = hoverMap;
     }
-    const visibleLines = feedLines.slice(startIdx, startIdx + contentRows);
+    const slicedLines = feedLines.slice(startIdx, startIdx + contentRows);
+    // The feed box is bottom-aligned (justifyContent="flex-end"). When pinning the
+    // user message to the top, pad blank lines below it so short content is pushed
+    // up — the user message sits at the top with empty room below for the reply.
+    const blankLine = (k) => _jsx(Text, { children: " " }, k);
+    // Show an animated loading line whenever the agent is still doing non-text
+    // work (reasoning, tool calls, status) — i.e. the latest feed item isn't the
+    // streamed answer text. It stays pinned below the latest content for the whole
+    // turn, and the phrase rotates slowly so it doesn't feel frozen. The feed box
+    // is bottom-aligned with overflow hidden, so when the timeline is long the
+    // loader stays visible and the oldest lines scroll off the top instead.
+    const lastItem = feed[feed.length - 1];
+    const showLoader = busy && lastItem !== undefined && lastItem.kind !== "text";
+    const phrase = LOADING_PHRASES[Math.floor(frame / 24) % LOADING_PHRASES.length];
+    const loadingLine = (_jsx(Text, { dimColor: true, children: `${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ${phrase}` }, "loading"));
+    const contentWithLoader = showLoader
+        ? (slicedLines.length > 0 ? [...slicedLines, blankLine("loading-gap"), loadingLine] : [loadingLine])
+        : slicedLines;
+    const visibleLines = pinUserToTop && contentWithLoader.length < contentRows
+        ? [
+            blankLine("pad-top"),
+            ...contentWithLoader,
+            ...Array.from({ length: Math.max(0, contentRows - contentWithLoader.length - 1) }, (_, i) => blankLine(`pad-${i}`)),
+        ]
+        : contentWithLoader;
     const scrollLabel = clampedOffset > 0
         ? (startIdx > 0 ? `↑ ${startIdx} · ↓ ${clampedOffset} · wheel/⇞⇟` : `top · ↓ ${clampedOffset} · wheel/⇞⇟`)
         : "";
@@ -406,9 +447,9 @@ export function SciraApp({ runPath: initialRunPath, config: initialConfig }) {
     const activeUsage = usage[config.model];
     const themed = (node) => (_jsx(ThemeProvider, { config: config, children: node }));
     if (screen === "home") {
-        return themed(_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [_jsx(TipCycler, { setTipIndex: setTipIndex }), (!sessionsModalOpen || mcpOpen) && stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, planMode: planMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY, config: config }), _jsx(HomeScreen, { cols: cols, rows: rows, sessions: sessions, selectedIdx: selectedIdx, hoveredIdx: hoveredIdx, heroHidden: heroHidden, notice: notice, tipIndex: tipIndex, commandMenuHeight: commandMenuHeight, mcpOpen: mcpOpen, sessionsModalOpen: sessionsModalOpen, sessionsModalIdx: sessionsModalIdx, inputText: inputText, config: config, modelName: modelName, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef, setSelectedIdx: setSelectedIdx, setSessionsModalOpen: setSessionsModalOpen, setSessionsModalIdx: setSessionsModalIdx, setNotice: setNotice, openRun: openRun, submitHome: submitHome, exit: exit }), _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions, config: config }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: inputBlocked, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName, config: config }), _jsx(HintLine, { screen: screen, busy: busy, config: config })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows, config: config }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows, selectedIdx: mcpRowIdx, hoveredIdx: hoveredIdx, onToggle: handleMcpToggle, onRemove: handleMcpRemove, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef })] }));
+        return themed(_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [_jsx(TipCycler, { setTipIndex: setTipIndex }), (!sessionsModalOpen || mcpOpen) && stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, planMode: planMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY, config: config }), _jsx(HomeScreen, { cols: cols, rows: rows, sessions: sessions, selectedIdx: selectedIdx, hoveredIdx: hoveredIdx, heroHidden: heroHidden, notice: notice, tipIndex: tipIndex, commandMenuHeight: commandMenuHeight, mcpOpen: mcpOpen, sessionsModalOpen: sessionsModalOpen, sessionsModalIdx: sessionsModalIdx, inputText: inputText, config: config, modelName: modelName, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef, setSelectedIdx: setSelectedIdx, setSessionsModalOpen: setSessionsModalOpen, setSessionsModalIdx: setSessionsModalIdx, setNotice: setNotice, openRun: openRun, submitHome: submitHome, exit: exit }), _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions, config: config }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: inputBlocked, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName, planMode: planMode, config: config }), _jsx(HintLine, { screen: screen, busy: busy, modeLabel: pendingPlanMode ? "PLAN MODE" : "", modeColor: "cyan", config: config })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows, config: config }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows, selectedIdx: mcpRowIdx, hoveredIdx: hoveredIdx, onToggle: handleMcpToggle, onRemove: handleMcpRemove, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef })] }));
     }
-    return themed(_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, planMode: planMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY, config: config }), _jsx(Box, { flexDirection: "column", height: contentRows, flexShrink: 0, justifyContent: "flex-end", paddingTop: 1, overflow: "hidden", children: visibleLines }), _jsxs(ChatInputChrome, { children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions, config: config }), _jsx(HelpBox, { open: helpOpen, innerWidth: innerWidth, config: config }), approvalPending && _jsx(ApprovalBox, { toolName: approvalPending.toolName, description: approvalPending.description, innerWidth: innerWidth, config: config }), linkPending && _jsx(LinkOpenBox, { url: linkPending.url, innerWidth: innerWidth, config: config }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: inputBlocked, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName, config: config }), _jsx(HintLine, { screen: screen, busy: busy, scrollLabel: scrollLabel, hasDoneGroups: doneGroupKeys.length > 0, hasFocusedGroup: focusedGroupKey !== null, hasLinkHover: hasLinkHover || !!linkPending, alwaysAllowLinks: config.alwaysAllowLinks, config: config })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows, config: config }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows, selectedIdx: mcpRowIdx, hoveredIdx: hoveredIdx, onToggle: handleMcpToggle, onRemove: handleMcpRemove, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef })] }));
+    return themed(_jsxs(Box, { flexDirection: "column", width: cols, height: rows, paddingX: 2, children: [stdout !== undefined && stdin !== undefined && (_jsx(MouseTracker, { stdout: stdout, stdin: stdin, onData: handleMouseData, onUnmount: () => setHoveredIdx(null) })), busy && _jsx(AnimationTick, { setBlink: setBlink, setFrame: setFrame, setReasoningTick: setReasoningTick }), _jsx(TopBar, { screen: screen, runState: runState, fullMode: fullMode, planMode: planMode, activeUsage: activeUsage, busy: busy, frame: frame, cwdDisplay: CWD_DISPLAY, config: config }), _jsx(Box, { flexDirection: "column", height: contentRows, flexShrink: 0, justifyContent: feedLines.length > contentRows ? "flex-end" : "flex-start", paddingTop: 1, overflow: "hidden", children: visibleLines }), _jsxs(ChatInputChrome, { children: [_jsx(CommandMenuBox, { activeSuggestions: activeSuggestions, activeSuggestionKind: activeSuggestionKind, commandMenuIndex: commandMenuIndex, innerWidth: innerWidth, sessions: sessions, config: config }), _jsx(HelpBox, { open: helpOpen, innerWidth: innerWidth, config: config }), approvalPending && _jsx(ApprovalBox, { toolName: approvalPending.toolName, description: approvalPending.description, innerWidth: innerWidth, config: config }), linkPending && _jsx(LinkOpenBox, { url: linkPending.url, innerWidth: innerWidth, config: config }), _jsx(InputBar, { inputLines: inputLines, cursorLine: cursorLine, cursorCol: cursorCol, showCursor: showCursor, approvalPending: inputBlocked, busy: busy, frame: frame, boxWidth: boxWidth, modelName: modelName, planMode: planMode, config: config }), _jsx(HintLine, { screen: screen, busy: busy, modeLabel: fullMode ? "FULL RESEARCH" : planMode ? "PLAN MODE" : "", modeColor: fullMode ? "magenta" : "cyan", scrollLabel: scrollLabel, hasDoneGroups: doneGroupKeys.length > 0, hasFocusedGroup: focusedGroupKey !== null, hasLinkHover: hasLinkHover || !!linkPending, alwaysAllowLinks: config.alwaysAllowLinks, config: config })] }), _jsx(MenuDialog, { menu: menu, cols: cols, rows: rows, config: config }), _jsx(McpDialog, { open: mcpOpen, config: config, cols: cols, rows: rows, selectedIdx: mcpRowIdx, hoveredIdx: hoveredIdx, onToggle: handleMcpToggle, onRemove: handleMcpRemove, clickMapRef: clickMapRef, hoverMapRef: hoverMapRef })] }));
 }
 function ChatInputChrome({ children }) {
     const theme = useTheme();

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

@@ -97,7 +97,7 @@ export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, hero
             if (inputText.trim())
                 void submitHome(inputText);
             else
-                setNotice("Type a question below to start a new research run.");
+                setNotice("Type a question below to start a new session.");
         });
         hoverMap.set(rowBase, newIdx);
         clickMap.set(rowBase + 1, (_x) => exit());
@@ -122,5 +122,5 @@ export function HomeScreen({ cols, rows, sessions, selectedIdx, hoveredIdx, hero
                         const display = (s.title || s.goal || s.id).slice(0, cardW - 22);
                         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] })) }));
+        })() : 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 & coding 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 session" }), 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

@@ -1,34 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { fmtTokens, wrapText, displayWidth } from "../lib/utils.js";
 import { LLM_PROVIDER_LABELS } from "../../../providers/llm/registry.js";
 import { useTheme } from "../hooks/use-theme.js";
 export function TopBar({ screen, runState, fullMode, planMode, 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" }), planMode && _jsx(Text, { color: "cyan", children: "plan" }), 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, config }) {
+export function InputBar({ inputLines, cursorLine, cursorCol, showCursor, approvalPending, busy, frame, boxWidth, modelName, planMode, config }) {
     const theme = useTheme();
-    const borderColor = approvalPending ? theme.warning : busy ? theme.accentDim : theme.textDim;
-    const promptColor = approvalPending ? theme.warning : busy ? theme.accentDim : theme.accent;
+    // Plan mode tints the whole input box (unless an approval/busy state takes precedence).
+    const borderColor = approvalPending ? theme.warning : busy ? theme.accentDim : planMode ? "cyan" : theme.textDim;
+    const promptColor = approvalPending ? theme.warning : busy ? theme.accentDim : planMode ? "cyan" : theme.accent;
     const inputColor = approvalPending ? theme.textDim : theme.inputText;
-    const borderLabel = busy ? `${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ${modelName}` : modelName;
+    const planTag = planMode ? "plan ◆ " : "";
+    const borderLabel = busy ? `${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ${planTag}${modelName}` : `${planTag}${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: 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(Box, { flexGrow: 1, minWidth: 0, children: showCursor && i === cursorLine ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: inputColor, children: line.slice(0, cursorCol) }), _jsx(Text, { backgroundColor: theme.cursorBackground, color: theme.cursorForeground, children: line[cursorCol] ?? " " }), _jsx(Text, { color: inputColor, children: line.slice(cursorCol + 1) })] })) : (_jsx(Text, { color: inputColor, wrap: "truncate", children: 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: " ─╯" })] })] }));
+    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(Box, { flexGrow: 1, minWidth: 0, children: showCursor && i === cursorLine ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: inputColor, children: line.slice(0, cursorCol) }), _jsx(Text, { backgroundColor: theme.cursorBackground, color: theme.cursorForeground, children: line[cursorCol] ?? " " }), _jsx(Text, { color: inputColor, children: line.slice(cursorCol + 1) })] })) : (_jsx(Text, { color: inputColor, wrap: "truncate", children: 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: planMode ? "cyan" : theme.accent, children: label }), _jsx(Text, { color: borderColor, children: " ─╯" })] })] }));
 }
-export function HintLine({ screen, busy, scrollLabel, hasDoneGroups, hasFocusedGroup, hasLinkHover, alwaysAllowLinks, config }) {
+export function HintLine({ screen, busy, scrollLabel, hasDoneGroups, hasFocusedGroup, hasLinkHover, alwaysAllowLinks, modeLabel, modeColor, config }) {
     const theme = useTheme();
+    const modeChip = modeLabel ? _jsx(Text, { backgroundColor: modeColor ?? "cyan", color: theme.background, bold: true, children: ` ${modeLabel} ` }) : null;
     if (screen === "chat") {
         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" }) }), hasLinkHover && !busy ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.textDim, children: "|" }), _jsx(Text, { color: theme.textDim, children: alwaysAllowLinks
                                 ? "click link to open"
                                 : _jsxs(_Fragment, { children: ["click link \u00B7 ", _jsx(Text, { bold: true, color: theme.accent, children: "a" }), " always \u00B7 ", _jsx(Text, { bold: true, color: theme.accent, children: "y" }), " open \u00B7 ", _jsx(Text, { bold: true, color: theme.accent, children: "n" }), " cancel"] }) })] })) : null, 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] }));
+                                : _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: theme.accent, children: "[ ]" }), " \u00B7 ", _jsx(Text, { bold: true, color: theme.accent, children: "C" }), " groups"] }) })] })) : null, (modeChip || scrollLabel) ? _jsx(Box, { flexGrow: 1 }) : null, modeChip, scrollLabel ? _jsx(Text, { color: theme.textDim, children: scrollLabel }) : null] }));
     }
-    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"] })] }));
+    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: "^D" }), ":quit"] }), modeChip ? _jsxs(_Fragment, { children: [_jsx(Box, { flexGrow: 1 }), modeChip] }) : null] }));
 }
 export function CommandMenuBox({ activeSuggestions, activeSuggestionKind, commandMenuIndex, innerWidth, sessions, config }) {
     const theme = useTheme();
@@ -106,11 +109,66 @@ export function MenuDialog({ menu, cols, rows, config }) {
     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: 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.inputText, 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 ? 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"] }))] }))] }));
+    const bg = theme.userBandBackground ? { backgroundColor: theme.userBandBackground } : {};
+    const innerW = DIALOG_W - 2; // cells between the two border columns
+    // Draw the border as characters inside full-width background lines (like
+    // InputBar). Ink's box border + backgroundColor leaves unfilled gaps, so we
+    // compose each line ourselves: every line is one solid Text spanning DIALOG_W.
+    const line = (key, visibleLen, content) => (_jsxs(Text, { ...bg, wrap: "truncate", children: [_jsx(Text, { color: theme.accent, children: "\u2502" }), _jsx(Text, { children: " " }), content, _jsx(Text, { children: " ".repeat(Math.max(0, innerW - 1 - visibleLen)) }), _jsx(Text, { color: theme.accent, children: "\u2502" })] }, key));
+    // Clip a string to at most `max` display columns (so a row never overruns the
+    // border on narrow terminals — wrap="truncate" would eat the closing │).
+    const clip = (s, max) => {
+        if (max <= 0)
+            return "";
+        if (displayWidth(s) <= max)
+            return s;
+        let out = "", w = 0;
+        for (const ch of s) {
+            const cw = displayWidth(ch);
+            if (w + cw > max - 1)
+                break; // leave a column for the ellipsis
+            out += ch;
+            w += cw;
+        }
+        return out + "…";
+    };
+    const avail = innerW - 1; // usable columns after the leading space
+    const title = menu.type === "model" ? "Select model" : menu.type === "llm" ? "Select LLM provider" : "Select search provider";
+    const hint = "↑↓ navigate · ⏎ apply · esc close";
+    const dialogLines = [];
+    // Title + hint, dropping/clipping the (secondary) hint when space is tight.
+    const titleC = clip(title, avail);
+    const hintRoom = avail - displayWidth(titleC) - 2;
+    const hintC = hintRoom >= 6 ? clip(hint, hintRoom) : "";
+    dialogLines.push(line("title", displayWidth(titleC) + (hintC ? 2 + displayWidth(hintC) : 0), (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: theme.text, children: titleC }), hintC ? _jsx(Text, { color: theme.textDim, children: "  " + hintC }) : null] }))));
+    if (!menu.loading) {
+        const filterC = clip(menu.query || "type to filter…", avail - 2);
+        dialogLines.push(line("filter", 2 + displayWidth(filterC), (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.accent, children: "⌕ " }), menu.query ? _jsx(Text, { color: theme.inputText, children: filterC }) : _jsx(Text, { color: theme.textDim, children: filterC })] }))));
+        dialogLines.push(line("divider", innerW - 1, _jsx(Text, { color: theme.textDim, children: "─".repeat(Math.max(4, innerW - 1)) })));
+    }
+    if (menu.loading) {
+        dialogLines.push(line("loading", displayWidth("loading models…"), _jsx(Text, { color: theme.textDim, children: "loading models\u2026" })));
+    }
+    else if (menuFiltered.length === 0) {
+        const msg = clip(`no matches for "${menu.query}"`, avail);
+        dialogLines.push(line("empty", displayWidth(msg), _jsx(Text, { color: theme.textDim, children: msg })));
+    }
+    else {
+        if (menuStart > 0)
+            dialogLines.push(line("up", displayWidth(`↑ ${menuStart} more`), _jsx(Text, { color: theme.textDim, children: `↑ ${menuStart} more` })));
+        menuFiltered.slice(menuStart, menuStart + DIALOG_ITEMS).forEach((item, i) => {
+            const active = menuStart + i === menu.index;
+            const marker = active ? "❯ " : "  ";
+            const label = clip(displayName(item), avail - displayWidth(marker));
+            const suffixRoom = avail - displayWidth(marker + label);
+            const suffix = menu.type === "llm" && suffixRoom >= 4 ? clip("  " + item, suffixRoom) : "";
+            dialogLines.push(line(item, displayWidth(marker + label) + displayWidth(suffix), (_jsxs(_Fragment, { children: [_jsx(Text, { color: active ? theme.accent : theme.textDim, bold: active, children: marker + label }), suffix ? _jsx(Text, { color: theme.textDim, children: suffix }) : null] }))));
+        });
+        const moreBelow = menuFiltered.length - (menuStart + DIALOG_ITEMS);
+        if (moreBelow > 0)
+            dialogLines.push(line("down", displayWidth(`↓ ${moreBelow} more`), _jsx(Text, { color: theme.textDim, children: `↓ ${moreBelow} more` })));
+    }
+    return (_jsxs(Box, { position: "absolute", marginLeft: dialogLeft, marginTop: dialogTop, width: DIALOG_W, flexDirection: "column", children: [_jsx(Text, { ...bg, children: _jsx(Text, { color: theme.accent, children: "╭" + "─".repeat(innerW) + "╮" }) }), dialogLines, _jsx(Text, { ...bg, children: _jsx(Text, { color: theme.accent, children: "╰" + "─".repeat(innerW) + "╯" }) })] }));
 }
 export function buildMcpDialogRows(config) {
     const dt = config.mcp.chromeDevtools;
@@ -163,7 +221,7 @@ export function McpDialog({ open, config, cols, rows, selectedIdx, hoveredIdx, o
     });
     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) => {
+    return (_jsxs(Box, { position: "absolute", marginLeft: left, marginTop: top, width: W, flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, paddingY: 1, ...(theme.userBandBackground ? { backgroundColor: theme.userBandBackground } : {}), 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));

package/dist/ui/ink/constants.js

@@ -3,15 +3,15 @@ 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", "/home", "/new", "/plan", "/rerun", "/report", "/sources", "/claims", "/why", "/mcp", "/copy", "/usage", "/rename", "/model", "/llm", "/provider", "/theme", "/links", "/key", "/keys", "/stop", "/back", "/quit"];
+export const CHAT_COMMANDS = ["/help", "/home", "/new", "/plan", "/rerun", "/report", "/sources", "/claims", "/why", "/mcp", "/copy", "/usage", "/rename", "/model", "/llm", "/provider", "/thinking", "/reasoning", "/theme", "/links", "/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", "/links"]);
 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.",
+    "/new": "Go to the home screen to start a new session.",
     "/plan": "Toggle plan mode (explore and plan before making changes).",
-    "/rerun": "Run the research agent again for this run.",
+    "/rerun": "Run the research agent again for this session.",
     "/report": "Show the generated report.md in the timeline.",
     "/sources": "List the run's gathered sources with links.",
     "/claims": "List all claims with id, confidence, status, and text.",
@@ -21,8 +21,10 @@ export const COMMAND_DESCRIPTIONS = {
     "/usage": "Show token usage per model for this session.",
     "/rename": "Set a title for this session, e.g. /rename SpaceX IPO analysis",
     "/model": "Open the model selector dropup.",
-    "/llm": "Switch the LLM provider (gateway, xai, workers-ai).",
+    "/llm": "Switch the LLM provider (gateway, xai, workers-ai, claude-code, codex).",
     "/provider": "Open the search provider selector.",
+    "/thinking": "Claude Code thinking: /thinking off · on · adaptive",
+    "/reasoning": "Codex reasoning effort: /reasoning low · medium · high",
     "/theme": "Set UI theme: /theme dark · /theme light · /theme auto",
     "/links": "Link opens: /links always · /links ask",
     "/key": "Save an API key, e.g. /key EXA_API_KEY ...",
@@ -40,6 +42,7 @@ export const TOOL_ICONS = {
     createClaim: "◎",
     verifyClaim: "✓",
     webSearch: "⌕",
+    multiWebSearch: "⌕",
     readUrl: "↗",
     listSkills: "★",
     readSkill: "★",
@@ -51,12 +54,39 @@ export const TOOL_ICONS = {
     grepWorkspace: "⌕"
 };
 export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export const LOADING_PHRASES = [
+    "Thinking it through…",
+    "Digging into it…",
+    "Connecting the dots…",
+    "Gathering context…",
+    "Working through it…",
+    "Sifting the details…",
+    "Putting it together…",
+    "Chasing down answers…",
+    "Mulling it over…",
+    "Lining things up…",
+    "Reading the room…",
+    "Scanning the sources…",
+    "Cross-checking facts…",
+    "Tracing the threads…",
+    "Weighing the options…",
+    "Following the trail…",
+    "Piecing it together…",
+    "Untangling the details…",
+    "Skimming the fine print…",
+    "Joining the dots…",
+    "Hunting for specifics…",
+    "Sorting signal from noise…",
+    "Drafting the answer…",
+    "Double-checking the work…",
+    "Wrapping my head around it…",
+];
 export const HOME_TIPS = [
-    "Type a question and press ⏎ to start a new research run.",
+    "Type a question and press ⏎ to start a new session.",
     "Say \"deep research …\" or \"compare …\" to trigger the full research harness.",
-    "↑↓ navigate · ⏎ open · type to start a new run.",
+    "↑↓ navigate · ⏎ open · type to start a new session.",
     "/model · /provider · /key NAME value  to configure.",
-    "Browse all sessions to find older runs.",
+    "Browse all sessions to find older ones.",
     "ready / draft badges show full-research runs and their report state."
 ];
 export const FULL_MODE_TRIGGERS = [

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

@@ -1,7 +1,6 @@
 import { useCallback, useRef } from "react";
-import { writeFile } from "node:fs/promises";
 import { join } from "node:path";
-import { createResearchAgent, createOneShotAgent } from "../../../agent/research-agent.js";
+import { createResearchAgent, createOneShotAgent } from "../../../agent/main-agent.js";
 import { createBackgroundTaskManager } from "../../../tools/background-tasks.js";
 import { resolveProjectRoot } from "../../../tools/workspace.js";
 import { generateWithGateway } from "../../../providers/llm/gateway.js";
@@ -26,7 +25,9 @@ export function useAgentTurn({ config, currentRunPath, queuedPromptRef, fullMode
         const controller = new AbortController();
         session.abort = controller;
         setBusy(true);
-        setScrollOffset(0);
+        // Pin the just-sent user message to the top of the viewport, leaving room
+        // below for the incoming assistant reply (-1 sentinel; see SciraApp).
+        setScrollOffset(-1);
         sessionSetBusy(runPath, true);
         const modelId = config.model;
         const turnStartedAt = Date.now();
@@ -60,9 +61,19 @@ export function useAgentTurn({ config, currentRunPath, queuedPromptRef, fullMode
                         case "reasoning-end":
                             sessionFinishReasoning(runPath);
                             break;
-                        case "tool-call":
-                            sessionPushFeed(runPath, { kind: "tool", name: part.toolName, toolCallId: part.toolCallId, summary: summarizeToolInput(part.toolName, part.input), status: "running" });
+                        case "tool-call": {
+                            // Stash the raw input (capped) so dedicated tool renderers (diffs,
+                            // checklists, …) can reconstruct it from the feed.
+                            let inputJson;
+                            try {
+                                inputJson = JSON.stringify(part.input)?.slice(0, 32_000);
+                            }
+                            catch {
+                                inputJson = undefined;
+                            }
+                            sessionPushFeed(runPath, { kind: "tool", name: part.toolName, toolCallId: part.toolCallId, summary: summarizeToolInput(part.toolName, part.input), status: "running", input: inputJson });
                             break;
+                        }
                         case "tool-result": {
                             if (part.preliminary)
                                 break;
@@ -204,7 +215,7 @@ export function useAgentTurn({ config, currentRunPath, queuedPromptRef, fullMode
                 .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 {
-                await writeFile(join(runPath, "convo.json"), JSON.stringify({ feed: snapshot, messages: conversationRef.current, usage: aggregateTurns(turnsRef.current) }, null, 2));
+                await Bun.write(join(runPath, "convo.json"), JSON.stringify({ feed: snapshot, messages: conversationRef.current, usage: aggregateTurns(turnsRef.current) }, null, 2));
             }
             catch { /* non-fatal */ }
             removeSession(runPath);

package/dist/ui/ink/hooks/use-feed-lines.js

@@ -4,8 +4,25 @@ import { Text } from "ink";
 import Link from "ink-link";
 import { S_BAR, TOOL_ICONS, SPINNER_FRAMES } from "../constants.js";
 import { formatTime, fmtDuration, wrapText, computeLineLinks, displayWidth } from "../lib/utils.js";
-import { formatToolResultLines, formatToolResultPreview, feedToolItemId, isCollapsibleToolName, isToolItemCollapsed, } from "../lib/tool-result.js";
+import { formatToolResultLines, formatToolResultPreview, feedToolItemId, isCollapsibleToolName, isToolItemCollapsed, canonicalToolName, displayToolName, } from "../lib/tool-result.js";
 import { markdownToSegLines } from "../lib/markdown.js";
+// Formatting a tool body (wrapping/parsing the result) is the expensive part of
+// building feed lines. The feed re-renders on every spinner/reasoning tick
+// (~20fps while busy), so without caching a large result would be re-parsed
+// dozens of times a second. Cache by content identity; completed items hit the
+// cache and only the live item (whose result is still growing) recomputes.
+const toolBodyCache = new Map();
+function cachedToolBody(themeKey, name, callId, summary, result, status, width, theme, expanded, input) {
+    const key = `${themeKey}|${callId}|${name}|${status}|${width}|${expanded}|${result?.length ?? 0}|${input?.length ?? 0}`;
+    const hit = toolBodyCache.get(key);
+    if (hit)
+        return hit;
+    const v = formatToolResultLines(name, summary, result, status, width, theme, expanded, input);
+    toolBodyCache.set(key, v);
+    if (toolBodyCache.size > 400)
+        toolBodyCache.delete(toolBodyCache.keys().next().value);
+    return v;
+}
 import { useTheme } from "./use-theme.js";
 export function computeGroups(feed) {
     const groupOf = new Array(feed.length).fill(-1);
@@ -63,6 +80,7 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState,
         const toggleAtLine = new Map();
         const groupToggleAtLine = new Map();
         const linkAtLine = new Map();
+        let lastUserLineStart = -1;
         let key = 0;
         const { groupOf, groups } = computeGroups(feed);
         const eff = [];
@@ -154,21 +172,29 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState,
                 const running = fi.status === "running";
                 const failed = fi.status === "error";
                 const itemId = feedToolItemId(feedIdx, fi.toolCallId);
-                const collapsible = isCollapsibleToolName(fi.name) && !running;
-                const collapsed = collapsible && isToolItemCollapsed(itemId, fi.name, fi.status, itemExpandState);
+                // Route rendering through the Scira-canonical name (Claude/Codex builtins
+                // and `mcp__harness-tools__*` host tools map onto our renderers), but show
+                // the cleaned real name in the header.
+                const canon = canonicalToolName(fi.name);
+                const shownName = displayToolName(fi.name);
+                const collapsible = isCollapsibleToolName(canon) && !running;
+                const collapsed = collapsible && isToolItemCollapsed(itemId, canon, fi.status, itemExpandState);
                 const headerLineIdx = lines.length;
                 const hovered = hoveredLineIdx === headerLineIdx;
                 const toolIcon = running
                     ? SPINNER_FRAMES[spinnerFrame % SPINNER_FRAMES.length]
-                    : TOOL_ICONS[fi.name] ?? "·";
+                    : TOOL_ICONS[canon] ?? "·";
                 const symColor = failed ? theme.error : theme.accentDim;
                 const nameColor = running ? theme.text : failed ? theme.error : theme.textDim;
                 const panelWidth = innerWidth - 4;
+                // Pass the raw name so dedicated built-in renderers (Edit diff, TodoWrite
+                // checklist, …) can key off it; the formatters canonicalize internally
+                // for the generic path.
                 const preview = formatToolResultPreview(fi.name, fi.summary, fi.result, fi.status);
-                const bodyLines = formatToolResultLines(fi.name, fi.summary, fi.result, fi.status, panelWidth, theme, !collapsed);
+                const bodyLines = cachedToolBody(theme.accent, fi.name, fi.toolCallId ?? String(feedIdx), fi.summary, fi.result, fi.status, panelWidth, theme, !collapsed, fi.input);
                 if (collapsible)
                     toggleAtLine.set(headerLineIdx, itemId);
-                lines.push(_jsxs(Text, { wrap: "truncate", children: [collapsible ? (_jsx(Text, { color: hovered ? theme.accent : theme.textDim, bold: hovered, children: collapsed ? "▶ " : "▼ " })) : null, _jsx(Text, { color: symColor, bold: running, children: toolIcon }), _jsxs(Text, { color: nameColor, bold: running || failed || hovered, children: [" ", fi.name] }), failed ? _jsx(Text, { color: theme.error, children: " failed" }) : null, running ? _jsx(Text, { color: theme.textDim, children: " \u2026" }) : null, !running && !failed && collapsed && preview ? (_jsxs(Text, { color: theme.textDim, children: ["  ", preview] })) : null] }, key++));
+                lines.push(_jsxs(Text, { wrap: "truncate", children: [collapsible ? (_jsx(Text, { color: hovered ? theme.accent : theme.textDim, bold: hovered, children: collapsed ? "▶ " : "▼ " })) : null, _jsx(Text, { color: symColor, bold: running, children: toolIcon }), _jsxs(Text, { color: nameColor, bold: running || failed || hovered, children: [" ", shownName] }), failed ? _jsx(Text, { color: theme.error, children: " failed" }) : null, running ? _jsx(Text, { color: theme.textDim, children: " \u2026" }) : null, !running && !failed && collapsed && preview ? (_jsxs(Text, { color: theme.textDim, children: ["  ", preview] })) : null] }, key++));
                 for (const row of bodyLines) {
                     if (row.length === 0) {
                         lines.push(_jsx(Text, { color: theme.textDim, children: S_BAR }, key++));
@@ -188,6 +214,7 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState,
                 const rightPad = time ? time.length + 1 : 0;
                 const wrapped = wrapText(fi.text, Math.max(10, bandW - 4 - rightPad));
                 const blank = " ".repeat(bandW);
+                lastUserLineStart = lines.length;
                 lines.push(_jsx(Text, { ...bandBg, children: blank }, key++));
                 wrapped.forEach((l, idx) => {
                     const isFirst = idx === 0;
@@ -233,7 +260,7 @@ reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState,
                 }
             }
         });
-        return { lines, toggleAtLine, groupToggleAtLine, linkAtLine };
+        return { lines, toggleAtLine, groupToggleAtLine, linkAtLine, lastUserLineStart };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [feed, innerWidth, reasoningTick, spinnerFrame, collapsedGroups, focusedGroupKey, itemExpandState, hoveredLineIdx, config, theme]);
 }

package/dist/ui/ink/hooks/use-keyboard.js

@@ -16,6 +16,9 @@ export function useKeyboard(o) {
     const { setScrollOffset, contentRows, maxScrollOffset, pendingRerun, setPendingRerun, busy, stopTurn, submitChat, toggleAllGroups, toggleFocusedGroup, focusPrevGroup, focusNextGroup, unfocusGroup, hasFocusedGroup } = o.chat;
     const { sessionsModalOpen, setSessionsModalOpen, sessionsModalIdx, setSessionsModalIdx, sessions, deleteSession, selectedIdx, setSelectedIdx, setHeroHidden, openRun, submitHome } = o.home;
     const deleteArmedRef = useRef(null);
+    // Quit requires confirmation: first Ctrl+C arms, second within the window quits.
+    const quitArmedRef = useRef(false);
+    const quitTimerRef = useRef(null);
     const editInput = (char, key) => {
         const deleteWordBefore = () => {
             const match = inputText.slice(0, cursorPos).match(/\S+\s*$/u);
@@ -95,6 +98,30 @@ export function useKeyboard(o) {
         // OSC background-color query responses leak as stdin when terminals reply to theme probes.
         if (char && (/\]11;rgb:/u.test(char) || /^11;rgb:/u.test(char)))
             return;
+        // Quit handling (all screens): Ctrl+C twice (with warning) or Ctrl+D.
+        if (key.ctrl && char === "c") {
+            if (busy) {
+                stopTurn();
+                quitArmedRef.current = false;
+                return;
+            }
+            if (quitArmedRef.current) {
+                exit();
+                return;
+            }
+            quitArmedRef.current = true;
+            setNotice("Press Ctrl+C again to quit (or Ctrl+D).");
+            if (quitTimerRef.current)
+                clearTimeout(quitTimerRef.current);
+            quitTimerRef.current = setTimeout(() => { quitArmedRef.current = false; }, 3000);
+            // Don't let the disarm timer keep the process alive after a quit.
+            quitTimerRef.current.unref?.();
+            return;
+        }
+        if (key.ctrl && char === "d" && !inputText) {
+            exit();
+            return;
+        }
         if (approvalPending) {
             if (char === "y" || char === "Y" || key.return) {
                 const p = approvalPending;
@@ -303,7 +330,7 @@ export function useKeyboard(o) {
                     setSessionsModalIdx(0);
                 }
                 else if (selectedIdx === newIdx) {
-                    setNotice("Type a question below to start a new research run.");
+                    setNotice("Type a question below to start a new session.");
                 }
                 else if (selectedIdx === quitIdx) {
                     exit();
@@ -312,10 +339,6 @@ export function useKeyboard(o) {
                     void submitHome("");
                 }
             }
-            else if (char === "q" && !inputText)
-                exit();
-            else if (key.ctrl && char === "d" && !inputText)
-                exit();
             else
                 editInput(char, key);
         }