@kinqs/brainrouter-cli 0.3.5 → 0.3.7

package/dist/cli/ink/ChatApp.js

@@ -0,0 +1,493 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { classifyDiffLine, looksLikeDiff } from './toolFormat.js';
+import { renderMarkdown } from './markdownRender.js';
+import { useTerminalSize } from './useTerminalSize.js';
+// --- Main app ---------------------------------------------------------
+export function ChatApp({ initialBanner, initialOfflineWarning, initialHint, slashCommands, promptLabel, accentColor = '#CC9166', onSubmit, onReady, onAccessModeCycle, initialAccessMode = 'read', initialFooter = {}, }) {
+    const { exit } = useApp();
+    // useTerminalSize subscribes to stdout 'resize' and pushes the new
+    // width into React state, forcing a re-render. Reading
+    // useStdout().stdout.columns inline LOOKS like it would work (it's a
+    // live getter and Ink claims to re-render on resize), but in practice
+    // the dividers + footer + slash palette were left at the OLD width
+    // until the next unrelated state change — which is what causes the
+    // duplicated/growing dash residue when dragging the window. See
+    // useTerminalSize.ts for the full rationale.
+    const { columns: cols } = useTerminalSize();
+    const [scrollback, setScrollback] = useState(() => seedScrollback(initialBanner, initialOfflineWarning, initialHint));
+    const nextIdRef = useRef(scrollback.length);
+    const [composerValue, setComposerValue] = useState('');
+    const [phase, setPhase] = useState('idle');
+    const [spinnerLabel, setSpinnerLabel] = useState('');
+    const [accessMode, setAccessMode] = useState(initialAccessMode);
+    const [footer, setFooter] = useState(initialFooter);
+    /**
+     * Per-turn elapsed time, ticked once a second while phase === 'turn-running'.
+     * Drives the amber spinner-color transition at 10s — claude-code's
+     * "Claude is still working" cue (CHANGELOG v2.1.130 entry 154).
+     */
+    const [turnElapsedMs, setTurnElapsedMs] = useState(0);
+    /**
+     * Overlay slot — when set, hides the composer + palette and renders
+     * the overlay node instead. Set via controller.showOverlay; cleared
+     * via controller.clearOverlay. Used by runPicker/runTextField so
+     * /config /login /init render inside the chat Ink (not as a second
+     * Ink mount that would fight for stdin).
+     */
+    const [overlay, setOverlay] = useState(null);
+    const overlayResolveRef = useRef(null);
+    /**
+     * Slash palette cursor — lifted out of SlashPalettePanel so this
+     * component owns both the highlight + the keystroke handlers.
+     * (useInput at the panel level would race with TextInput for arrow
+     * keys; centralizing here makes the precedence explicit.)
+     */
+    const [paletteCursor, setPaletteCursor] = useState(0);
+    const pushFns = useMemo(() => {
+        const push = (entry) => {
+            setScrollback((s) => {
+                const id = ++nextIdRef.current;
+                return [...s, { id, ...entry }];
+            });
+        };
+        return {
+            raw: (text, opts) => push({ kind: 'raw', text, noWrap: opts?.noWrap }),
+            user: (text) => push({ kind: 'user', text }),
+            assistant: (text, meta) => push({ kind: 'assistant', text, ...meta }),
+            tool: (header, ok, opts) => push({ kind: 'tool', header, ok, ...opts }),
+            memory: (level, text) => push({ kind: 'memory', level, text }),
+            plan: (items, explanation) => push({ kind: 'plan', items, explanation }),
+            notice: (text, level) => push({ kind: 'notice', text, level: level ?? 'info' }),
+            setStatus: (label) => setSpinnerLabel(label),
+            setPhase: (p) => setPhase(p),
+        };
+    }, []);
+    // Tick the per-turn elapsed time while a turn is running. Resets to 0
+    // on each phase change. Spinner color blends from green → amber when
+    // this crosses 10s, matching claude-code's "still working" cue
+    // (CHANGELOG v2.1.130 entry 154).
+    useEffect(() => {
+        if (phase !== 'turn-running') {
+            setTurnElapsedMs(0);
+            return;
+        }
+        const startedAt = Date.now();
+        setTurnElapsedMs(0);
+        const interval = setInterval(() => {
+            setTurnElapsedMs(Date.now() - startedAt);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [phase]);
+    // Imperative controller — exposed once on mount via onReady so the
+    // orchestrator can push from outside the React tree (child agent
+    // callbacks fire long after `await agent.runTurn()` resolves and need
+    // a way to inject into scrollback without re-entering React state).
+    useEffect(() => {
+        if (!onReady)
+            return;
+        onReady({
+            push: pushFns,
+            replaceBanner: (text) => {
+                setScrollback((rows) => {
+                    const idx = rows.findIndex((entry) => entry.kind === 'raw');
+                    if (idx < 0)
+                        return [{ id: ++nextIdRef.current, kind: 'raw', text, noWrap: true }, ...rows];
+                    return rows.map((entry, i) => i === idx ? { ...entry, text } : entry);
+                });
+            },
+            setFooter: (patch) => {
+                if (patch.accessMode)
+                    setAccessMode(patch.accessMode);
+                setFooter((prev) => ({ ...prev, ...patch }));
+            },
+            setComposer: (text) => setComposerValue(text),
+            showOverlay: (node) => new Promise((resolve) => {
+                // Save the resolver; clearOverlay() will fire it. Setting the
+                // overlay React state hides the composer next render so the
+                // overlay's own useInput hooks own keystrokes uncontested.
+                overlayResolveRef.current = resolve;
+                setOverlay(node);
+            }),
+            clearOverlay: () => {
+                setOverlay(null);
+                const r = overlayResolveRef.current;
+                overlayResolveRef.current = null;
+                if (r)
+                    r();
+            },
+            exit,
+        });
+        // Run exactly once — the controller's identity is stable across renders.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Slash palette visibility — open when input is just `/<query>`
+    // with no whitespace yet (so the user is still composing the
+    // command name, not args).
+    const slashQuery = useMemo(() => {
+        if (!composerValue.startsWith('/'))
+            return null;
+        const tail = composerValue.slice(1);
+        if (tail.includes(' '))
+            return null;
+        return tail;
+    }, [composerValue]);
+    // All matches for the current query, in filter rank order. Computed
+    // once per keystroke so the panel and the Enter/Tab handlers all
+    // share the same view of "what's highlighted".
+    const paletteMatches = useMemo(() => (slashQuery !== null ? filterPaletteCommands(slashCommands, slashQuery) : []), [slashCommands, slashQuery]);
+    // Reset the cursor whenever the filter changes (matches array shrinks
+    // or shifts), and snap to 0 when the palette closes so a fresh `/`
+    // doesn't land on a stale row index.
+    useEffect(() => {
+        if (slashQuery === null) {
+            setPaletteCursor(0);
+            return;
+        }
+        setPaletteCursor((c) => (paletteMatches.length === 0 ? 0 : Math.min(c, paletteMatches.length - 1)));
+    }, [slashQuery, paletteMatches.length]);
+    const onComposerSubmit = useCallback(async (text) => {
+        let trimmed = text.trim();
+        // Palette substitution: if the user pressed Enter while a slash
+        // palette match is highlighted AND the buffer is still in palette
+        // mode (just `/<query>`, no args yet), submit the highlighted
+        // command instead of the literal typed text. Matches the standalone
+        // SlashPalette in cli/ink/SlashPalette.tsx:onSubmit.
+        if (trimmed.startsWith('/') && !trimmed.includes(' ') && paletteMatches.length > 0) {
+            const picked = paletteMatches[paletteCursor] ?? paletteMatches[0];
+            if (picked.cmd !== trimmed) {
+                trimmed = picked.cmd;
+            }
+        }
+        if (!trimmed)
+            return;
+        pushFns.user(trimmed);
+        setComposerValue('');
+        setPhase('turn-running');
+        setSpinnerLabel('thinking');
+        try {
+            await onSubmit(trimmed, pushFns);
+        }
+        catch (err) {
+            pushFns.notice(`✗ ${err?.message ?? err}`);
+        }
+        finally {
+            setPhase('idle');
+            setSpinnerLabel('');
+        }
+    }, [onSubmit, pushFns, paletteMatches, paletteCursor]);
+    // Ctrl+D / Ctrl+C exit; Shift+Tab cycles access mode; while the
+    // slash palette is open, arrow keys navigate it and Tab autocompletes
+    // the highlighted command into the composer.
+    //
+    // CRITICAL: when an overlay is active (e.g. /config picker), this
+    // handler returns immediately so the overlay's useInput owns every
+    // keystroke uncontested. Without this, Ctrl+C / Shift+Tab would
+    // still fire from chat-level and cause double-handling — the kind
+    // of bug that makes "/config exits to bash" symptoms.
+    useInput((input, key) => {
+        if (overlay !== null)
+            return;
+        if (key.ctrl && (input === 'c' || input === 'd')) {
+            exit();
+            return;
+        }
+        if (key.shift && key.tab && onAccessModeCycle) {
+            const next = onAccessModeCycle();
+            if (next === 'read' || next === 'write' || next === 'shell') {
+                setAccessMode(next);
+                pushFns.notice(`Access mode → ${next}`);
+            }
+            return;
+        }
+        // Palette navigation — only when palette is open AND there's at
+        // least one match. We DON'T use `key.return` here because Enter is
+        // handled by TextInput's onSubmit (which calls onComposerSubmit
+        // above, which performs the highlight-substitution).
+        if (slashQuery !== null && paletteMatches.length > 0) {
+            if (key.upArrow) {
+                setPaletteCursor((c) => (c - 1 + paletteMatches.length) % paletteMatches.length);
+                return;
+            }
+            if (key.downArrow) {
+                setPaletteCursor((c) => (c + 1) % paletteMatches.length);
+                return;
+            }
+            if (key.tab && !key.shift) {
+                // Tab autocompletes the highlighted command into the composer
+                // (with a trailing space so the user can keep typing args).
+                const picked = paletteMatches[paletteCursor] ?? paletteMatches[0];
+                setComposerValue(picked.cmd + ' ');
+                setPaletteCursor(0);
+                return;
+            }
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { flexDirection: "column", children: scrollback.map((entry) => (_jsx(ScrollbackRow, { entry: entry, accentColor: accentColor }, entry.id))) }), overlay !== null ? (_jsxs(_Fragment, { children: [overlay, _jsx(FooterStatus, { promptLabel: promptLabel, phase: phase, accentColor: accentColor, accessMode: accessMode, footer: footer, cols: cols })] })) : (_jsxs(_Fragment, { children: [phase === 'turn-running' ? (_jsxs(Box, { children: [_jsx(Text, { color: turnElapsedMs >= 10_000 ? 'yellow' : 'green', children: React.createElement(Spinner, { type: 'dots' }) }), _jsxs(Text, { color: "gray", wrap: "truncate", children: ["  ", spinnerLabel] })] })) : null, _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accentColor, dimColor: true, children: '─'.repeat(Math.max(10, cols - 2)) }), _jsxs(Box, { children: [_jsx(Text, { color: accentColor, children: ' ❯ ' }), _jsx(TextInput, { value: composerValue, onChange: setComposerValue, onSubmit: onComposerSubmit, placeholder: phase === 'turn-running' ? '' : 'type a prompt or / for commands' })] }), _jsx(Text, { color: accentColor, dimColor: true, children: '─'.repeat(Math.max(10, cols - 2)) })] }), slashQuery !== null ? (_jsx(SlashPalettePanel, { matches: paletteMatches, cursor: paletteCursor, accentColor: accentColor, cols: cols })) : null, _jsx(FooterStatus, { promptLabel: promptLabel, phase: phase, accentColor: accentColor, accessMode: accessMode, footer: footer, cols: cols })] }))] }));
+}
+// --- Sub-components ---------------------------------------------------
+/**
+ * Per-entry renderer — every scrollback kind has its own claude-code-style
+ * layout. Glyph conventions:
+ *
+ *   ⏺  assistant turn (first line) — green dot
+ *   ❯  user prompt (left margin)   — accent (orange)
+ *   ⏺  tool call header            — green dot when ok, red when failed
+ *   ⎿  tool result connector       — first line of preview
+ *   ✓ / ✗  status mark             — final status line of tool block
+ *   ↳  plan / memory dim-italic explanation
+ */
+function ScrollbackRow({ entry, accentColor }) {
+    switch (entry.kind) {
+        case 'raw':
+            return _jsx(Text, { wrap: entry.noWrap ? 'truncate' : 'wrap', children: entry.text });
+        case 'user':
+            // Flex layout: ❯ on the left, prompt body in an inner column that
+            // takes the remaining width. Continuation lines (when the user
+            // pastes a multi-line prompt) align under the body column, not
+            // under the caret.
+            return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: accentColor, children: "\u276F " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { children: entry.text }) })] }));
+        case 'assistant': {
+            // Pass the WHOLE rendered markdown to a single <Text> instead of
+            // splitting on \n and re-rendering each line. The old line-split
+            // approach broke ANSI styling that spans newlines — e.g. a
+            // multi-line blockquote whose `gray italic` open code sat on line
+            // 1 but whose close code sat on line 3 lost its style on lines
+            // 2-3. `renderMarkdown` re-scopes the styling per line so the
+            // single <Text> reads cleanly.
+            //
+            // The `⏺` lives in its own Text to the left of the body. The body
+            // Box has flexGrow=1 so it takes the remaining terminal width and
+            // Ink's wrap-ansi handles reflow inside it. Continuation lines
+            // (both from wrap and from explicit \n in the rendered output)
+            // align under the body column.
+            //
+            // `entry.raw === true` (user's rawScrollback preference) skips
+            // marked entirely — useful when the user wants to see the LLM's
+            // literal markdown source.
+            const rendered = (entry.raw ? entry.text : renderMarkdown(entry.text)).trimEnd();
+            const meta = entry.durationMs !== undefined
+                ? `  ${Math.floor(entry.durationMs / 1000)}s${entry.tokensIn !== undefined ? ` · ${entry.tokensIn.toLocaleString()} in / ${entry.tokensOut?.toLocaleString() ?? 0} out` : ''}`
+                : '';
+            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "green", children: "\u23FA " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { children: rendered }) })] }), meta ? (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: meta }) })) : null] }));
+        }
+        case 'tool': {
+            // Claude-code layout:
+            //   ⏺ Read(src/foo.ts)
+            //     ⎿ <line 1 of preview>
+            //       <line 2 of preview>
+            //       (+N more lines hidden)
+            // The header DOT is green on success and red on failure so the user
+            // can scan a long turn at a glance. Duration appended in dim if set.
+            const dotColor = entry.ok ? 'green' : 'red';
+            const previewLines = entry.preview ? splitForPreview(entry.preview) : null;
+            const isDiff = entry.preview ? looksLikeDiff(entry.preview) : false;
+            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: dotColor, children: "\u23FA " }), _jsx(Text, { wrap: "truncate", children: entry.header }), entry.durationMs !== undefined ? (_jsx(Text, { color: "gray", dimColor: true, children: `  · ${formatDuration(entry.durationMs)}` })) : null, !entry.ok ? (_jsx(Text, { color: "red", dimColor: true, children: '  · failed' })) : null] }), previewLines ? previewLines.visible.map((line, i) => (_jsx(ToolPreviewLine, { line: line, isFirst: i === 0, isDiff: isDiff }, i))) : null, previewLines && previewLines.hidden > 0 ? (_jsx(Box, { children: _jsx(Text, { color: "gray", dimColor: true, children: `    (+${previewLines.hidden} more line${previewLines.hidden === 1 ? '' : 's'} hidden)` }) })) : null] }));
+        }
+        case 'memory':
+            // Memory pipeline events — briefing / capture / citation / contradiction.
+            // Warnings (contradictions, extraction failures) stand out; info events
+            // stay dim so the chat doesn't drown in capture chatter.
+            return (_jsx(Box, { children: _jsxs(Text, { color: entry.level === 'warn' ? 'yellow' : 'gray', bold: entry.level === 'warn', dimColor: entry.level === 'info', wrap: "truncate", children: [entry.level === 'warn' ? '⚠ ' : '· ', entry.text] }) }));
+        case 'plan':
+            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "gray", bold: true, children: "\uD83D\uDCCB Plan" }), entry.explanation ? (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "gray", dimColor: true, italic: true, children: ["   \u21B3 ", entry.explanation] }) })) : null, entry.items.map((item, i) => {
+                        const mark = item.status === 'completed' ? '✓' : item.status === 'in_progress' ? '⏳' : '☐';
+                        const color = item.status === 'completed' ? 'green' : item.status === 'in_progress' ? 'yellow' : 'gray';
+                        // Multi-line steps indent under the first line so the checkbox
+                        // anchor stays visually attached to the whole step.
+                        const stepLines = String(item.step).split('\n');
+                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: color, children: ["  ", mark, " "] }), _jsx(Text, { color: item.status === 'completed' ? 'gray' : undefined, children: stepLines[0] })] }), stepLines.slice(1).map((line, j) => (_jsxs(Box, { children: [_jsx(Text, { children: '      ' }), _jsx(Text, { color: item.status === 'completed' ? 'gray' : undefined, dimColor: true, children: line })] }, j)))] }, i));
+                    })] }));
+        case 'notice': {
+            // info  → gray dim
+            // warn  → yellow
+            // error → red bold
+            const level = entry.level ?? 'info';
+            const color = level === 'error' ? 'red' : level === 'warn' ? 'yellow' : 'gray';
+            return (_jsx(Box, { children: _jsx(Text, { color: color, bold: level === 'error', dimColor: level === 'info', wrap: "truncate", children: entry.text }) }));
+        }
+    }
+}
+/**
+ * Render one line of a tool-result preview. Diff lines get red/green
+ * coloring (see classifyDiffLine). The first line of the preview is
+ * prefixed with `⎿` connector under the tool header; continuation lines
+ * just indent to align with the connector body.
+ */
+function ToolPreviewLine({ line, isFirst, isDiff }) {
+    const indent = isFirst ? '    ⎿ ' : '      ';
+    let textColor = 'gray';
+    let dim = true;
+    if (isDiff) {
+        const kind = classifyDiffLine(line);
+        if (kind === 'add') {
+            textColor = 'green';
+            dim = false;
+        }
+        else if (kind === 'del') {
+            textColor = 'red';
+            dim = false;
+        }
+        else if (kind === 'hunk') {
+            textColor = 'cyan';
+            dim = true;
+        }
+    }
+    return (_jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: indent }), _jsx(Text, { color: textColor, dimColor: dim, wrap: "truncate", children: line })] }));
+}
+const TOOL_PREVIEW_MAX_LINES = 8;
+/** Split preview into the visible head + the count of hidden tail lines. */
+function splitForPreview(preview) {
+    const lines = preview.split('\n');
+    if (lines.length <= TOOL_PREVIEW_MAX_LINES)
+        return { visible: lines, hidden: 0 };
+    return { visible: lines.slice(0, TOOL_PREVIEW_MAX_LINES), hidden: lines.length - TOOL_PREVIEW_MAX_LINES };
+}
+/** Human-readable duration: 950ms, 1.2s, 12s, 1m 23s. */
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 10_000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    if (ms < 60_000)
+        return `${Math.round(ms / 1000)}s`;
+    const m = Math.floor(ms / 60_000);
+    const s = Math.round((ms % 60_000) / 1000);
+    return `${m}m ${s}s`;
+}
+/**
+ * Slash command palette — scrollable, navigable, full-list view.
+ *
+ * Sized to a fixed `MAX_VISIBLE` window; when the match count exceeds
+ * the window, the viewport scrolls to keep the highlighted cursor in
+ * range. "↑ N more" / "↓ N more" hints render at the edges so the user
+ * knows there's more list to see.
+ *
+ * The command column has a fixed width so descriptions align across
+ * rows; descriptions use Ink's `wrap="truncate"` so a long line is
+ * cut with an ellipsis at the terminal edge instead of wrapping to
+ * the next row (which would break the per-row layout).
+ */
+const PALETTE_MAX_VISIBLE = 10;
+const PALETTE_CMD_COL_WIDTH = 24;
+function SlashPalettePanel({ matches, cursor, accentColor, cols, }) {
+    if (matches.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "(no matching commands)" }) }));
+    }
+    // Compute a sliding viewport so the cursor stays comfortably inside.
+    // Prefer centering when possible; clamp at the ends so we never show
+    // an empty row at top or bottom.
+    const total = matches.length;
+    const safeCursor = Math.max(0, Math.min(cursor, total - 1));
+    const windowSize = Math.min(PALETTE_MAX_VISIBLE, total);
+    let viewportStart = safeCursor - Math.floor(windowSize / 2);
+    if (viewportStart < 0)
+        viewportStart = 0;
+    if (viewportStart + windowSize > total)
+        viewportStart = Math.max(0, total - windowSize);
+    const visible = matches.slice(viewportStart, viewportStart + windowSize);
+    const hiddenAbove = viewportStart;
+    const hiddenBelow = total - (viewportStart + windowSize);
+    // Progressive collapse for narrow terminals:
+    //   - Below 50 cols: drop the description column entirely; the cmd
+    //     column expands to fill the remaining width.
+    //   - At normal widths: fixed 24-col cmd column, description takes
+    //     the rest with `wrap="truncate"`.
+    const showDescription = cols >= 50;
+    const cmdColWidth = showDescription
+        ? PALETTE_CMD_COL_WIDTH
+        : Math.max(12, cols - 6);
+    const descBudget = showDescription ? Math.max(12, cols - cmdColWidth - 5) : 0;
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [hiddenAbove > 0 ? (_jsx(Box, { children: _jsx(Text, { color: "gray", dimColor: true, children: `   ↑ ${hiddenAbove} more above` }) })) : null, visible.map((cmd, i) => {
+                const actualIdx = viewportStart + i;
+                const isSelected = actualIdx === safeCursor;
+                return (_jsxs(Box, { children: [_jsx(Text, { color: accentColor, children: isSelected ? ' › ' : '   ' }), _jsx(Box, { width: cmdColWidth, children: _jsx(Text, { bold: isSelected, color: isSelected ? accentColor : undefined, wrap: "truncate", children: cmd.cmd }) }), showDescription ? (_jsx(Box, { width: descBudget, children: _jsx(Text, { color: "gray", wrap: "truncate", children: cmd.description }) })) : null] }, cmd.cmd));
+            }), hiddenBelow > 0 ? (_jsx(Box, { children: _jsx(Text, { color: "gray", dimColor: true, children: `   ↓ ${hiddenBelow} more below` }) })) : null, _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, wrap: "truncate", children: cols >= 90
+                        ? '↑/↓ navigate  ·  tab autocomplete  ·  ↵ submit  ·  type to filter  ·  esc / backspace past / to cancel'
+                        : cols >= 60
+                            ? '↑/↓  ·  tab autocomplete  ·  ↵ submit  ·  esc to cancel'
+                            : '↑/↓  ·  tab  ·  ↵  ·  esc' }) })] }));
+}
+function FooterStatus({ promptLabel, phase, accentColor, accessMode, footer, cols, }) {
+    // Pill background mirrors the readline REPL's mode-to-token mapping:
+    //   read  → green   (safe)
+    //   write → accent  (default brand)
+    //   shell → red     (escalated)
+    // See cli/repl.ts:refreshPromptForMode for the rationale.
+    const pillBg = accessMode === 'shell' ? 'red' : accessMode === 'write' ? accentColor : 'green';
+    const pillFg = 'black';
+    // Effort glyphs — claude-code v2.1.147 convention:
+    //   low    → ○ (open circle, light)
+    //   medium → ◐ (half circle)
+    //   high   → ● (filled circle, heavy)
+    // Rendered inline next to the pill, not as a separate boxed pill, so
+    // the footer stays compact on narrow terminals.
+    const effortGlyph = footer.effort === 'high' ? '●' : footer.effort === 'medium' ? '◐' : footer.effort === 'low' ? '○' : '';
+    const effortColor = footer.effort === 'high' ? 'magenta' : footer.effort === 'medium' ? 'yellow' : 'gray';
+    // Left side: model · session · branch.  Right side: ? for shortcuts.
+    // Spreads out so the footer feels like claude-code's bottom bar.
+    const leftSegs = [];
+    if (footer.model)
+        leftSegs.push(footer.model);
+    if (footer.session)
+        leftSegs.push(footer.session.slice(0, 16));
+    if (footer.branch)
+        leftSegs.push(footer.branch);
+    if (footer.rightExtra)
+        leftSegs.push(footer.rightExtra);
+    // Progressive collapse — borrowed from codex's footer.rs:58–86 pattern.
+    // Below 80 cols, drop the auxiliary left segments (model · session ·
+    // branch). Below 60 cols, drop the right-side hint. Below 40 cols,
+    // even the effort glyph collapses to just the access pill — that's
+    // the smallest viable status row.
+    const showLeftSegs = cols >= 80 && leftSegs.length > 0;
+    const showEffortLabel = cols >= 50;
+    const showEffortGlyph = !!effortGlyph && cols >= 40;
+    const showRightHint = cols >= 60;
+    const rightText = showRightHint
+        ? (cols >= 80 ? '? for shortcuts  ·  / for commands' : '?  ·  /')
+        : '';
+    // Render the WHOLE footer as a single Text with nested Text children
+    // for the colored pill and glyphs. wrap="truncate" on the outer Text
+    // ensures it NEVER visually wraps (which is what causes Ink's diff
+    // to leave residue on resize — each wrap-overflow row that Ink
+    // thinks is 1 logical row but is 2+ visual rows accumulates as
+    // duplicated composer/footer blocks on every resize).
+    //
+    // Ink supports nested Text — children inherit parent props (like
+    // wrap) but their own color/backgroundColor/bold etc. apply locally.
+    return (_jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { backgroundColor: pillBg, color: pillFg, children: ` ◉ ${accessMode} ` }), showEffortGlyph ? (_jsxs(Text, { children: ['  ', _jsx(Text, { color: effortColor, children: effortGlyph }), showEffortLabel ? _jsx(Text, { color: "gray", dimColor: true, children: ` ${footer.effort}` }) : null] })) : null, showLeftSegs ? (_jsx(Text, { color: "gray", dimColor: true, children: '  ' + leftSegs.join(' · ') })) : null, phase === 'turn-running' && cols >= 50 ? (_jsx(Text, { color: "gray", dimColor: true, children: '  · running' })) : null] }), showRightHint ? (_jsx(Text, { color: "gray", dimColor: true, wrap: "truncate", children: rightText })) : null] }));
+}
+// --- Helpers ----------------------------------------------------------
+function seedScrollback(banner, offline, hint) {
+    let id = 0;
+    const next = () => ++id;
+    const out = [{ id: next(), kind: 'raw', text: banner, noWrap: true }];
+    if (offline)
+        out.push({ id: next(), kind: 'raw', text: offline, noWrap: true });
+    out.push({ id: next(), kind: 'raw', text: hint, noWrap: true });
+    return out;
+}
+export function filterPaletteCommands(commands, query) {
+    if (!query)
+        return commands;
+    const q = query.toLowerCase();
+    const scored = commands
+        .map((c, i) => {
+        const body = c.cmd.slice(1).toLowerCase();
+        let s = 3;
+        if (body.startsWith(q))
+            s = 0;
+        else if (body.includes(q))
+            s = 1;
+        else if (c.description.toLowerCase().includes(q))
+            s = 2;
+        return { c, i, s };
+    })
+        .filter((x) => x.s < 3);
+    scored.sort((a, b) => (a.s - b.s) || (a.i - b.i));
+    return scored.map((x) => x.c);
+}

package/dist/cli/ink/Frame.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+/**
+ * Bordered panel chrome shared by every Ink picker / prompt in the
+ * 0.3.7 redesign.
+ *
+ * Why a Frame component? Ink owns the render loop and diffs the cell
+ * grid between frames — so we don't have to track cursor positions or
+ * worry about lines stacking. Every picker / wizard step / config
+ * panel is a `<Frame>` with a title, optional badge, and a body. Ink
+ * handles all the redraw mechanics that the previous raw-stdout
+ * approach got wrong.
+ *
+ * Visual reference: matches the previous renderFrame() chrome —
+ * theme-colored border, bold title left, muted badge right, muted
+ * footer hint at the bottom.
+ */
+export interface FrameProps {
+    title: string;
+    badge?: string;
+    subtitle?: string;
+    footer?: string;
+    /** Border color — defaults to brand orange. */
+    accentColor?: string;
+    children?: React.ReactNode;
+}
+export declare function Frame({ title, badge, subtitle, footer, accentColor, children }: FrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/cli/ink/Frame.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Frame({ title, badge, subtitle, footer, accentColor = '#CC9166', children }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: accentColor, paddingX: 1, marginY: 0, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: subtitle ? 0 : 0, children: [_jsx(Text, { bold: true, color: accentColor, children: title }), badge ? _jsx(Text, { color: "gray", children: badge }) : null] }), subtitle ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: subtitle }) })) : null, _jsx(Box, { flexDirection: "column", children: children }), footer ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: footer }) })) : null] }));
+}

package/dist/cli/ink/Picker.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Arrow-key picker built on Ink.
+ *
+ * Replaces the raw-stdout `pickFromList` primitive that was creeping
+ * upward on every cursor move + stacking frames on step transitions.
+ * Ink's render loop handles all the redraw / diff / cursor mechanics
+ * correctly because it owns the screen.
+ *
+ * Supports:
+ *   - N rows (no 2-4 cap)
+ *   - Optional "Other" free-text fallback
+ *   - Pre-filled "Other" mode for env-var-derived defaults
+ *   - Live preview rows (returned from `onCursorChange`, rendered
+ *     INSIDE the frame above the footer)
+ *   - Value column right-aligned per row
+ *   - `›` selected glyph + theme-colored highlight
+ *
+ * Pattern lineage: state machine + reducer split lifted from grok-cli's
+ * SuggestionOverlay; live-preview-from-state contract from codex's
+ * theme_picker.rs.
+ */
+export interface PickerRow {
+    id: string;
+    label: string;
+    value?: string;
+    description?: string;
+}
+export interface PickerProps {
+    title: string;
+    subtitle?: string;
+    badge?: string;
+    /** Optional footer override; defaults to "↑/↓ navigate · ↵ confirm · esc / q cancel". */
+    footer?: string;
+    rows: PickerRow[];
+    initialCursor?: number;
+    allowOther?: boolean;
+    otherLabel?: string;
+    otherDescription?: string;
+    prefilledOther?: string;
+    onCursorChange?: (id: string, index: number) => string[] | undefined;
+    /** Hex / named color for the panel border + title. Defaults to brand orange. */
+    accentColor?: string;
+    /**
+     * Back-compat: callers from `commands/config.ts` etc. pass a Theme
+     * object (chalk-based). When present, we pull `accentColor` from
+     * the theme's primary hex. Ignored if accentColor is also set.
+     */
+    theme?: {
+        mode: string;
+    };
+    /** Ignored (kept for back-compat with the raw-stdout picker shape). */
+    eraseOnClose?: boolean;
+    /** Resolves with the picker outcome. The component unmounts itself after the callback. */
+    onResolve: (result: PickerResult) => void;
+}
+export type PickerResult = {
+    kind: 'pick';
+    id: string;
+} | {
+    kind: 'other';
+    text: string;
+} | {
+    kind: 'cancelled';
+};
+export declare function Picker(props: PickerProps): import("react/jsx-runtime").JSX.Element;