@parallel-cli/parallel 0.4.5 → 0.4.7

package/dist/ui/App.js

@@ -16,9 +16,8 @@ import { SettingsPanel } from './SettingsPanel.js';
 import { BoardView, CostView, DiffView, HelpView, NotesView, SessionsView, SkillsView, SpecialistsView } from './views.js';
 import { SelectList, WizardStep } from './Wizard.js';
 import { BRAND, CHROME, STATE, STATE_META, UI, middleTruncate } from './tokens.js';
+import { VERSION } from '../version.js';
 const LOGO = 'Parallel';
-// Version from package.json. Hardcoded — rootDir: "src" prevents importing ../../package.json.
-const VERSION = '0.4.5';
 function usableProvider(config) {
     const p = getProvider(config);
     return p && providerReady(p) && (p.defaultModel || p.models[0]) ? p : undefined;
@@ -65,12 +64,7 @@ export function App({ config, initialFolder }) {
     // Focus mode (/focus <agent>): plain input is routed to that agent.
     const [focus, setFocus] = useState(null);
     const [rawLogs, setRawLogs] = useState(false);
-    const [systemLines, setSystemLines] = useState(directFolder
-        ? [
-            { text: t('main.ready1', { folder: directFolder }), level: 'ok' },
-            { text: t('main.ready2'), level: 'info' },
-        ]
-        : []);
+    const [systemLines, setSystemLines] = useState([]);
     const [inputReady, setInputReady] = useState(Boolean(directFolder));
     const ctl = ctlRef.current;
     const leaveCurrentProject = () => {
@@ -277,10 +271,7 @@ export function App({ config, initialFolder }) {
         enterMain();
     };
     const enterMain = () => {
-        setSystemLines([
-            { text: t('main.ready1', { folder }), level: 'ok' },
-            { text: t('main.ready2'), level: 'info' },
-        ]);
+        setSystemLines([]);
         setPhase('main');
         setInputReady(false);
         setTimeout(() => setInputReady(true), 350);
@@ -311,7 +302,7 @@ export function App({ config, initialFolder }) {
     if (phase !== 'main') {
         const totalSteps = 5;
         const sessionProvider = ctl ? ctl.sessionProvider() : getProvider(config);
-        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyanBright", children: LOGO }), _jsx(Text, { color: "gray", children: t('tagline') }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === 'lang' && (_jsx(WizardStep, { step: 1, total: totalSteps, title: t('wiz.lang.title'), children: _jsx(SelectList, { items: LANGS.map((l) => ({ label: l.label, value: l.code })), height: wizardListHeight, onSelect: chooseLang }) })), phase === 'folder' && (_jsxs(WizardStep, { step: 2, total: totalSteps, title: t('wiz.folder.title'), footer: t('wiz.folder.footer'), children: [wizardError ? _jsx(Text, { color: "red", children: wizardError }) : null, _jsx(SelectList, { items: [
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: BRAND.primary, children: LOGO }), _jsx(Text, { color: "gray", children: t('tagline') }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === 'lang' && (_jsx(WizardStep, { step: 1, total: totalSteps, title: t('wiz.lang.title'), children: _jsx(SelectList, { items: LANGS.map((l) => ({ label: l.label, value: l.code })), height: wizardListHeight, onSelect: chooseLang }) })), phase === 'folder' && (_jsxs(WizardStep, { step: 2, total: totalSteps, title: t('wiz.folder.title'), footer: t('wiz.folder.footer'), children: [wizardError ? _jsx(Text, { color: "red", children: wizardError }) : null, _jsx(SelectList, { items: [
                                         { label: process.cwd(), value: process.cwd(), hint: t('wiz.folder.current') },
                                         ...config.recentFolders
                                             .filter((f) => f !== process.cwd())
@@ -523,6 +514,10 @@ export function App({ config, initialFolder }) {
             }
         }, notify: ui.system }));
 }
+function EmptyHub({ bodyHeight }) {
+    const topPad = Math.max(0, Math.floor((bodyHeight - 3) / 2));
+    return (_jsxs(Box, { flexDirection: "column", children: [topPad > 0 ? _jsx(Box, { height: topPad }) : null, _jsx(Text, { color: UI.text, children: t('main.emptyCard.cta') }), _jsx(Text, { color: CHROME.muted, children: t('main.emptyCard.hints') })] }));
+}
 function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames, approval, question, inputActive, onInput, onEscape, notify, }) {
     const agents = [...ctl.board.agents.values()];
     // Adapt the layout to the REAL terminal size (never resize the user's terminal).
@@ -530,11 +525,10 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
     const cols = Math.max(20, stdout?.columns ?? 100);
     const rows = Math.max(12, stdout?.rows ?? 30);
     const settingsOpen = view === 'settings' || view === 'settings-session';
+    const [inputRows, setInputRows] = useState(3);
     // Height budget: fixed sections → body gets the remainder.
-    const headerLines = 4; // border-box header (top border + 2 content lines + bottom border)
-    const footerLine2 = 1; // always shown
-    const footerLine1 = agents.length === 0 ? 1 : 0;
-    const footerLines = footerLine1 + footerLine2;
+    const headerLines = 4; // Codex-like framed header: top + 2 content lines + bottom
+    const footerLines = 1;
     // System messages: count actual rendered lines (including \n splits + "Session" label).
     const systemMsgLines = systemLines.length > 0 && !settingsOpen
         ? (agents.length > 0 ? 1 : 0) + // "Session" label
@@ -544,8 +538,8 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
                     .slice(-2)
                 : systemLines).reduce((sum, l) => sum + l.text.split('\n').length, 0)
         : 0;
-    const inputLines = 4; // modeHint (1) + input border box (3)
-    const spacerLines = 2; // after header + before footer
+    const inputLines = inputRows;
+    const spacerLines = 2;
     const approvalHeight = approval ? 6 : 0;
     const questionHeight = question ? 7 : 0;
     const bodyHeight = Math.max(1, rows - headerLines - footerLines - systemMsgLines - inputLines - spacerLines - approvalHeight - questionHeight);
@@ -630,6 +624,11 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
         : agents.some((a) => ['waiting', 'paused'].includes(a.state)) ? 'yellow'
             : 'gray';
     const folderMax = Math.max(10, cols - 40);
+    const provider = ctl.sessionProvider();
+    const providerModel = provider ? `${provider.name}:${ctl.session.model}` : 'no model';
+    const headerColor = view === 'agents' && agents.length === 0 ? BRAND.muted : CHROME.muted;
+    const workMapAlerts = ctl.board.workMapWarnings.filter((w) => w.level !== 'info');
+    const conflictAlerts = workMapAlerts.filter((w) => w.level === 'conflict');
     // View breadcrumb: when not in agents view, show the view name instead of "control room".
     const VIEW_LABEL = {
         agents: 'control room',
@@ -645,7 +644,7 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
         specialists: 'specialists',
     };
     const viewLabel = VIEW_LABEL[view] ?? 'control room';
-    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: CHROME.muted, children: ["\u256D", '─'.repeat(cols - 2), "\u256E"] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: CHROME.muted, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: "space-between", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: BRAND.primary, children: "PARALLEL" }), _jsx(Text, { color: globalDotColor, children: " \u25CF" }), _jsxs(Text, { color: view === 'agents' ? CHROME.muted : BRAND.muted, children: [" ", viewLabel] }), rawLogs && focused ? _jsx(Text, { color: UI.warn, children: " [RAW]" }) : null] }), _jsx(Text, { color: CHROME.muted, children: middleTruncate(folder, folderMax) })] }), _jsx(Text, { color: CHROME.muted, children: " \u2502" })] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: CHROME.muted, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: agents.length > 0 ? 'space-between' : 'flex-end', children: [agents.length > 0 ? (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { children: [_jsxs(Text, { color: CHROME.muted, children: ["\u25C7 ", idleCount, " idle"] }), ' · ', _jsxs(Text, { color: workingCount > 0 ? STATE.working : CHROME.muted, children: ["\u25CF ", workingCount, " active"] }), ' · ', _jsxs(Text, { color: doneCount > 0 ? STATE.done : CHROME.muted, children: ["\u2713 ", doneCount, " done"] }), ' · ', _jsxs(Text, { color: errorCount > 0 ? STATE.error : CHROME.muted, children: ["\u2717 ", errorCount, " err"] })] }) })) : null, _jsxs(Text, { color: CHROME.muted, children: ["v", VERSION] })] }), _jsx(Text, { color: CHROME.muted, children: " \u2502" })] }), _jsxs(Text, { color: CHROME.muted, children: ["\u2570", '─'.repeat(cols - 2), "\u256F"] })] }), _jsx(Text, { children: " " }), _jsx(Box, { height: bodyHeight, overflow: "hidden", flexDirection: "column", children: view === 'settings' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "global", height: bodyHeight, onClose: onEscape })) : view === 'settings-session' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "session", height: bodyHeight, onClose: onEscape })) : view === 'board' ? (_jsx(BoardView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot, bodyHeight: bodyHeight })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills(), bodyHeight: bodyHeight })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists(), bodyHeight: bodyHeight })) : view === 'help' ? (_jsx(HelpView, { bodyHeight: bodyHeight })) : agents.length === 0 ? (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: "gray", children: t('main.empty') }) })) : focused ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentTranscript, { agent: focused, logs: visibleLogs, raw: rawLogs, scrolled: clampedScroll, cols: cols }), !focusFollowTail ? _jsx(Text, { color: UI.warn, children: "Viewing older \u00B7 PgDn to latest" }) : null] })) : (_jsx(AgentHub, { agents: agents, ctl: ctl, cols: cols, scroll: clampedHub, visibleRows: hubRows })) }), systemLines.length > 0 && !settingsOpen && (_jsxs(Box, { flexDirection: "column", children: [agents.length > 0 ? _jsx(Text, { color: UI.muted, bold: true, children: "Session" }) : null, (agents.length > 0
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: headerColor, children: ["\u256D", '─'.repeat(cols - 2), "\u256E"] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: headerColor, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: "space-between", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: BRAND.primary, children: "PARALLEL" }), _jsx(Text, { color: globalDotColor, children: " \u25CF" }), _jsxs(Text, { color: view === 'agents' ? CHROME.muted : BRAND.muted, children: [" ", agents.length === 0 ? 'ready' : viewLabel] }), rawLogs && focused ? _jsx(Text, { color: UI.warn, children: " [RAW]" }) : null] }), _jsx(Text, { color: CHROME.muted, children: middleTruncate(folder, folderMax) })] }), _jsx(Text, { color: headerColor, children: " \u2502" })] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: headerColor, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: "space-between", children: [agents.length > 0 ? (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { children: [_jsxs(Text, { color: CHROME.muted, children: ["\u25C7 ", idleCount, " idle"] }), ' · ', _jsxs(Text, { color: workingCount > 0 ? STATE.working : CHROME.muted, children: ["\u25CF ", workingCount, " active"] }), ' · ', _jsxs(Text, { color: doneCount > 0 ? STATE.done : CHROME.muted, children: ["\u2713 ", doneCount, " done"] }), ' · ', _jsxs(Text, { color: errorCount > 0 ? STATE.error : CHROME.muted, children: ["\u2717 ", errorCount, " err"] }), workMapAlerts.length > 0 ? (_jsxs(Text, { color: conflictAlerts.length > 0 ? UI.danger : UI.warn, children: [" \u00B7 \u26A0 work-map ", workMapAlerts.length] })) : null] }) })) : (_jsx(Text, { color: CHROME.muted, children: providerModel })), _jsxs(Text, { color: CHROME.muted, children: ["v", VERSION] })] }), _jsx(Text, { color: headerColor, children: " \u2502" })] }), _jsxs(Text, { color: headerColor, children: ["\u2570", '─'.repeat(cols - 2), "\u256F"] })] }), _jsx(Box, { height: bodyHeight, overflow: "hidden", flexDirection: "column", children: view === 'settings' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "global", height: bodyHeight, onClose: onEscape })) : view === 'settings-session' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "session", height: bodyHeight, onClose: onEscape })) : view === 'board' ? (_jsx(BoardView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot, bodyHeight: bodyHeight })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills(), bodyHeight: bodyHeight })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists(), bodyHeight: bodyHeight })) : view === 'help' ? (_jsx(HelpView, { bodyHeight: bodyHeight, onSelect: (cmd) => onInput(cmd) })) : agents.length === 0 ? (_jsx(EmptyHub, { bodyHeight: bodyHeight })) : focused ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentTranscript, { agent: focused, logs: visibleLogs, raw: rawLogs, scrolled: clampedScroll, cols: cols }), !focusFollowTail ? _jsx(Text, { color: UI.warn, children: "Viewing older \u00B7 PgDn to latest" }) : null] })) : (_jsx(AgentHub, { agents: agents, ctl: ctl, cols: cols, scroll: clampedHub, visibleRows: hubRows })) }), systemLines.length > 0 && !settingsOpen && (_jsxs(Box, { flexDirection: "column", children: [agents.length > 0 ? _jsx(Text, { color: UI.muted, bold: true, children: "Session" }) : null, (agents.length > 0
                         ? systemLines
                             .filter((l) => !/^Ready|^Type a task|^⚡ Ready|^Default \/task|^Agent .* launched/.test(l.text))
                             .slice(-2)
@@ -657,9 +656,9 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
                         // Split on \n so multiline i18n messages render correctly (Ink <Text> doesn't interpret \n).
                         const lines = l.text.split('\n');
                         return lines.map((line, j) => (_jsx(Text, { color: levelColor, wrap: "truncate-end", children: line }, `${i}-${j}`)));
-                    })] })), approval && (_jsx(ApprovalPrompt, { request: approval, pendingCount: ctl.approvals.length, onAnswer: (id, ok, always) => ctl.answerApproval(id, ok, always) })), question && (_jsx(QuestionPrompt, { question: question, pendingCount: ctl.questions.length, onAnswer: (id, answer, auto) => ctl.answerQuestion(id, answer, auto) }, question.id)), _jsx(CommandInput, { active: inputActive, placeholder: focus ? `Message ${focus} or /command` : 'Task mode: describe work to run · /ask question · /plan proposal · / for commands', context: focus ? 'focus' : 'hub', targetAgent: focused?.name, modelLabel: ctl.sessionProvider() ? `${ctl.sessionProvider()?.name}:${ctl.session.model}` : undefined, agentNames: agentNames, agents: agents, onSubmit: onInput, onEscape: onEscape, notify: notify }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", children: [agents.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: BRAND.muted, children: "/ask /task /plan" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Tab autocompletes \u00B7 Esc clears" })] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: CHROME.muted, children: "\u2318 Parallel" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Shell " }), _jsx(Text, { color: ctl.session.approvalMode === 'ask' ? UI.warn :
-                                    ctl.session.approvalMode === 'yolo' ? UI.danger :
-                                        UI.ok, children: ctl.session.approvalMode === 'auto-safe' ? 'auto' : ctl.session.approvalMode }), _jsxs(Text, { color: CHROME.muted, children: [" \u00B7 Sessions: ", Controller.listSessions(ctl.projectRoot).length] }), ctl.questions.length > 0 ? (_jsxs(Text, { color: UI.warn, children: [" \u00B7 \u2753", ctl.questions.length] })) : null, ctl.approvals.length > 0 ? (_jsxs(Text, { color: UI.warn, children: [" \u00B7 \u23F3", ctl.approvals.length] })) : null, focused ? (_jsxs(Text, { color: BRAND.muted, children: [" \u00B7 \uD83C\uDFAF ", focused.name] })) : null] })] })] }));
+                    })] })), approval && (_jsx(ApprovalPrompt, { request: approval, pendingCount: ctl.approvals.length, onAnswer: (id, ok, always) => ctl.answerApproval(id, ok, always) })), question && (_jsx(QuestionPrompt, { question: question, pendingCount: ctl.questions.length, onAnswer: (id, answer, auto) => ctl.answerQuestion(id, answer, auto) }, question.id)), _jsx(Text, { children: " " }), _jsx(CommandInput, { active: inputActive, placeholder: focus ? `Message ${focus} or /command` : t('main.prompt'), context: focus ? 'focus' : 'hub', targetAgent: focused?.name, modelLabel: ctl.sessionProvider() ? `${ctl.sessionProvider()?.name}:${ctl.session.model}` : undefined, agentNames: agentNames, agents: agents, width: cols, onHeightChange: setInputRows, onSubmit: onInput, onEscape: onEscape, notify: notify }), _jsx(Text, { children: " " }), _jsx(Box, { flexDirection: "column", children: _jsxs(Text, { children: [_jsx(Text, { color: CHROME.muted, children: "/ for commands" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Shell " }), _jsx(Text, { color: ctl.session.approvalMode === 'ask' ? UI.warn :
+                                ctl.session.approvalMode === 'yolo' ? UI.danger :
+                                    UI.ok, children: ctl.session.approvalMode === 'auto-safe' ? 'auto' : ctl.session.approvalMode }), agents.length > 0 ? _jsxs(Text, { color: CHROME.muted, children: [" \u00B7 Sessions ", Controller.listSessions(ctl.projectRoot).length] }) : null, ctl.questions.length > 0 ? (_jsxs(Text, { color: UI.warn, children: [" \u00B7 \u2753", ctl.questions.length] })) : null, ctl.approvals.length > 0 ? (_jsxs(Text, { color: UI.warn, children: [" \u00B7 \u23F3", ctl.approvals.length] })) : null, workMapAlerts.length > 0 ? (_jsx(Text, { color: conflictAlerts.length > 0 ? UI.danger : UI.warn, children: " \u00B7 \u26A0 /board" })) : null, conflictAlerts.length > 0 ? (_jsx(Text, { color: UI.danger, children: " \u00B7 run /review all" })) : null, focused ? (_jsxs(Text, { color: BRAND.muted, children: [" \u00B7 \uD83C\uDFAF ", focused.name] })) : null] }) })] }));
 }
 function groupAgents(agents) {
     const needs = agents.filter((a) => ['waiting', 'paused'].includes(a.state));
@@ -687,7 +686,10 @@ function AgentHub({ agents, ctl, cols, scroll, visibleRows, }) {
                 continue;
             }
             const needsSeparator = rows.length > 0;
-            const neededLines = 2 + (needsSeparator ? 1 : 0);
+            const summaryLines = agent.lastResult ? Math.min(4, Math.max(1, agent.lastResult.split('\n').filter((l) => l.trim()).length)) : 0;
+            const stepLines = !agent.lastResult && agent.progressSteps && agent.progressSteps.length > 0 ? Math.min(3, agent.progressSteps.length) : 0;
+            const agentLines = 1 + Math.max(summaryLines, agent.currentAction || agent.claims?.length ? 1 : 0) + stepLines;
+            const neededLines = agentLines + (needsSeparator ? 1 : 0);
             if (renderedLines + neededLines > visibleRows) {
                 full = true;
                 break;
@@ -697,7 +699,7 @@ function AgentHub({ agents, ctl, cols, scroll, visibleRows, }) {
                 renderedLines++;
             }
             renderedAgents++;
-            renderedLines += 2;
+            renderedLines += agentLines;
             rows.push(_jsx(AgentRow, { agent: agent, logs: ctl.board.logsFor(agent.id, 8), cols: cols }, agent.id));
         }
         if (full)

package/dist/ui/AttachApp.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import net from 'node:net';
-import { Box, Static, Text, useApp } from 'ink';
+import { Box, Static, Text, useApp, useInput, useStdout } from 'ink';
 import { ApprovalPrompt } from './ApprovalPrompt.js';
 import { CommandInput } from './CommandInput.js';
-import { formatAgentTelemetry, KIND_COLOR, KIND_DIM } from './AgentPanel.js';
+import { formatAgentTelemetry, KIND_COLOR, KIND_DIM, modeBadge, ProgressSteps } from './AgentPanel.js';
 import { Md } from './Md.js';
 import { QuestionPrompt } from './QuestionPrompt.js';
-import { Spinner } from './Spinner.js';
 import { Timeline } from './Timeline.js';
+import { toUIEvents } from './events.js';
 import { stateLabel, elapsed, truncate } from './theme.js';
 import { fmtCost } from '../pricing.js';
 import { t } from '../i18n.js';
-import { STATE_META, UI, middleTruncate } from './tokens.js';
+import { COLOR, STATE_META, UI, middleTruncate } from './tokens.js';
 const noop = () => { };
+const TERMINAL_STATES = new Set(['done', 'error', 'stopped']);
 export function parseAttachCommand(text) {
     const v = text.trim();
     if (!v)
@@ -28,6 +29,14 @@ export function parseAttachCommand(text) {
     const send = v.match(/^\/send\s+(\S+)\s+(.+)$/s);
     if (send)
         return { type: 'send', target: send[1], text: send[2].trim() };
+    const review = v.match(/^\/review\s+(.+)$/s);
+    if (review) {
+        return {
+            type: 'spawn',
+            text: `Review current shared-tree work: ${review[1].trim()}. Return Verdict: APPROVE | REVISE | BLOCK, Risks, Tests to run, Files to inspect, and Notes.`,
+            mode: 'ask',
+        };
+    }
     const m = v.match(/^\/(ask|a|task|t|plan|p)\s+(.+)$/s);
     if (m) {
         const mode = m[1] === 'ask' || m[1] === 'a' ? 'ask' : m[1] === 'plan' || m[1] === 'p' ? 'plan' : 'task';
@@ -40,11 +49,39 @@ export function formatAttachFooter(info) {
         return 'Waiting for agent · /quit';
     return `${middleTruncate(info.model, 28)} · ${formatAgentTelemetry(info)} · plain text steers · /task new · /quit`;
 }
+function AttachStaticLine({ item, raw }) {
+    if (raw) {
+        return (_jsx(Text, { color: KIND_COLOR[item.log.kind] ?? 'white', italic: KIND_DIM[item.log.kind] ?? false, wrap: "wrap", children: item.log.text }));
+    }
+    const event = toUIEvents([item.log])[0];
+    if (!event || event.kind === 'thought')
+        return _jsx(Text, { color: UI.muted, children: " " });
+    const color = event.kind === 'error' ? UI.danger : event.kind === 'note' ? UI.note : event.kind === 'command' ? UI.accent : UI.muted;
+    const detail = event.detail.replace(/\r/g, '').split('\n').filter(Boolean).slice(0, 3).join(' ↳ ');
+    return (_jsxs(Text, { color: color, wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), _jsx(Text, { bold: true, children: event.label }), detail ? _jsxs(Text, { color: event.kind === 'command_output' ? UI.muted : color, children: [" ", truncate(detail, process.stdout.columns ? process.stdout.columns - 8 : 120)] }) : null] }));
+}
+export function isLaunchSystemLog(log) {
+    return log.kind === 'system' && /\bAgent\s+.+\slaunched\b|Terminal dédié ouvert|Dedicated terminal/i.test(log.text);
+}
+function AttachLaunchHeader({ item }) {
+    const { info } = item;
+    const mode = modeBadge(info.mode);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: info.color, paddingX: 1, marginBottom: 1, children: [_jsx(Text, { color: UI.brand, bold: true, children: "Parallel agent terminal" }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: info.color, bold: true, children: info.name }), info.alias && info.alias !== info.name ? _jsxs(Text, { color: UI.muted, children: [" @", info.alias] }) : null, _jsxs(Text, { color: mode.color, children: [" [", mode.label, "]"] }), _jsx(Text, { color: UI.muted, children: " \u00B7 " }), _jsx(Text, { color: UI.text, children: middleTruncate(info.model, 36) })] }), _jsxs(Text, { color: UI.muted, wrap: "wrap", children: ["Task  ", _jsx(Text, { color: UI.text, children: info.task })] }), _jsx(Text, { color: COLOR.creamMuted, children: "Dedicated terminal is ready." }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " })] }));
+}
+function AttachResultCard({ item }) {
+    const st = STATE_META[item.info.state];
+    return (_jsxs(Box, { borderStyle: "single", borderColor: st.color, flexDirection: "column", paddingX: 1, marginTop: 1, children: [_jsxs(Text, { color: COLOR.cream, bold: true, children: ["Result \u00B7 ", item.info.name, " [", st.label, "]"] }), _jsx(Md, { text: item.result })] }));
+}
 export function AttachApp({ agentRef, sock }) {
     const { exit } = useApp();
+    const { stdout } = useStdout();
     const [info, setInfo] = useState(null);
     const [others, setOthers] = useState([]);
+    const [launchCards, setLaunchCards] = useState([]);
+    const [resultCards, setResultCards] = useState([]);
     const [lines, setLines] = useState([]);
+    const [timelineScroll, setTimelineScroll] = useState(0);
+    const [timelineFollowTail, setTimelineFollowTail] = useState(true);
     const [approval, setApproval] = useState(null);
     const [question, setQuestion] = useState(null);
     const [gone, setGone] = useState(false);
@@ -52,6 +89,8 @@ export function AttachApp({ agentRef, sock }) {
     const socketRef = useRef(null);
     const keySeq = useRef(0);
     const lastBellId = useRef('');
+    const launchRendered = useRef(false);
+    const renderedResultKey = useRef('');
     useEffect(() => {
         const socket = net.connect(sock);
         socketRef.current = socket;
@@ -96,6 +135,21 @@ export function AttachApp({ agentRef, sock }) {
             socket.destroy();
         };
     }, [agentRef, sock]);
+    useEffect(() => {
+        if (!info || launchRendered.current)
+            return;
+        launchRendered.current = true;
+        setLaunchCards([{ key: ++keySeq.current, info }]);
+    }, [info?.id]);
+    useEffect(() => {
+        if (!info || !TERMINAL_STATES.has(info.state) || !info.lastResult)
+            return;
+        const key = `${info.id}:${info.state}:${info.lastResult.length}:${info.lastResult.slice(0, 24)}`;
+        if (renderedResultKey.current === key)
+            return;
+        renderedResultKey.current = key;
+        setResultCards((prev) => [...prev, { key: ++keySeq.current, info: { ...info }, result: info.lastResult ?? '' }]);
+    }, [info?.id, info?.state, info?.lastResult]);
     // Audible alert in THIS terminal when a new interaction arrives — the hub
     // also rings, but the user may well be looking at the agent's terminal.
     useEffect(() => {
@@ -123,7 +177,7 @@ export function AttachApp({ agentRef, sock }) {
             setRaw((r) => !r);
             return;
         }
-        // /task|/ask|/plan <text> — launch agent N+1 from this terminal.
+        // /task|/ask|/plan|/review <text> — launch agent N+1 from this terminal.
         if (cmd.type === 'spawn') {
             wire({ type: 'spawn', text: cmd.text, mode: cmd.mode });
             return;
@@ -136,26 +190,57 @@ export function AttachApp({ agentRef, sock }) {
     };
     const st = info ? STATE_META[info.state] : null;
     const busy = info ? ['thinking', 'working', 'listening'].includes(info.state) : false;
+    const terminal = info ? TERMINAL_STATES.has(info.state) : false;
     const interacting = Boolean(approval || question);
+    const logs = lines.map((l) => l.log);
+    const staticLines = raw ? lines : lines.filter((l) => l.log.kind !== 'llm' && !isLaunchSystemLog(l.log));
+    const timelineVisibleLogs = Math.max(8, (stdout?.rows ?? 30) - 14);
+    const maxTimelineScroll = Math.max(0, logs.length - timelineVisibleLogs);
+    const clampedTimelineScroll = Math.min(timelineScroll, maxTimelineScroll);
+    const timelineWindow = logs.slice(Math.max(0, logs.length - timelineVisibleLogs - clampedTimelineScroll), logs.length - clampedTimelineScroll);
+    useEffect(() => {
+        if (timelineFollowTail)
+            setTimelineScroll(0);
+    }, [logs.length, timelineFollowTail]);
+    const scrollTimeline = (direction) => {
+        if (direction === 'up') {
+            setTimelineFollowTail(false);
+            setTimelineScroll((s) => Math.min(Math.min(s, maxTimelineScroll) + Math.max(1, Math.floor(timelineVisibleLogs / 2)), maxTimelineScroll));
+            return;
+        }
+        setTimelineScroll((s) => {
+            const next = Math.max(0, Math.min(s, maxTimelineScroll) - Math.max(1, Math.floor(timelineVisibleLogs / 2)));
+            if (next === 0)
+                setTimelineFollowTail(true);
+            return next;
+        });
+    };
+    useInput((_input, key) => {
+        if (!busy || interacting || raw)
+            return;
+        if (key.pageUp)
+            scrollTimeline('up');
+        if (key.pageDown)
+            scrollTimeline('down');
+    }, { isActive: Boolean(busy && !interacting && !raw) });
     const banner = (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: UI.brand, bold: true, children: t('attach.banner') }), info ? (_jsxs(Text, { color: info.color, bold: true, children: [' ', info.name, info.alias && info.alias !== info.name ? _jsxs(Text, { color: UI.muted, children: [" @", info.alias] }) : null] })) : null] }));
-    return (_jsxs(Box, { flexDirection: "column", children: [raw ? (_jsx(Static, { items: lines, children: (item) => (_jsx(Text, { color: KIND_COLOR[item.log.kind] ?? 'white', italic: KIND_DIM[item.log.kind] ?? false, wrap: "wrap", children: item.log.text }, item.key)) })) : null, busy && info && st && !interacting ? (
-            /* COMPACT region while the agent runs: small + borderless, so Ink's
-             * constant repaints (spinner ticks) never erase tall zones — this is
-             * what used to leave stray blank lines in the native scrollback. */
-            _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: info.color, bold: true, children: info.alias || info.name }), ' ', _jsxs(Text, { color: st.color, bold: true, children: [st.mark, " ", st.label] }), ' ', _jsx(Spinner, { color: info.color }), _jsxs(Text, { color: UI.muted, children: [' ', "\u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' '] }), _jsx(Text, { color: UI.ok, children: info.cost === null ? '$-' : fmtCost(info.cost) })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["Current  ", truncate(info.currentAction, 120)] })) : null, others.length > 0 ? (_jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: ["Others  ", ' ', others
+    return (_jsxs(Box, { flexDirection: "column", children: [!raw ? (_jsx(Static, { items: launchCards, children: (item) => _jsx(AttachLaunchHeader, { item: item }, item.key) })) : null, _jsx(Static, { items: staticLines, children: (item) => (_jsx(AttachStaticLine, { item: item, raw: raw }, item.key)) }), !raw ? (_jsx(Static, { items: resultCards, children: (item) => _jsx(AttachResultCard, { item: item }, item.key) })) : null, !raw && staticLines.length > 0 ? _jsx(Text, { color: UI.muted, children: '─'.repeat(Math.min(Math.max(20, (stdout?.columns ?? 100) - 4), 80)) }) : null, (busy || terminal) && info && st && !interacting ? (
+            /* While running, keep the native terminal scrollback stable: activity is
+             * appended once above via <Static>, and this live region stays tiny. */
+            _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: info.color, bold: true, children: info.alias || info.name }), ' ', _jsxs(Text, { color: modeBadge(info.mode).color, children: ["[", modeBadge(info.mode).label, "]"] }), ' ', _jsxs(Text, { color: st.color, bold: true, children: [st.mark, " ", st.label] }), _jsxs(Text, { color: UI.muted, children: [' ', "\u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' '] }), _jsx(Text, { color: UI.ok, children: info.cost === null ? '$-' : fmtCost(info.cost) })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["Current  ", truncate(info.currentAction, 120)] })) : null, _jsx(ProgressSteps, { agent: info, max: 6, cols: process.stdout.columns || 100 }), terminal && info.lastResult ? (_jsx(Text, { color: COLOR.creamMuted, children: "Result was appended above; native mouse scroll stays available." })) : null, others.length > 0 ? (_jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: ["Others  ", ' ', others
                                 .map((o) => `${o.name} [${stateLabel(o.state)}] ${truncate(o.currentAction || o.task, 40)}`)
-                                .join(' · ')] })) : null, !raw ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.muted, bold: true, children: t('timeline.activity') }), _jsx(Timeline, { logs: lines.map((l) => l.log), cols: process.stdout.columns || 100 })] })) : null] })) : (
-            /* FULL panel when idle / waiting / done — repaints are rare here. */
-            _jsxs(Box, { borderStyle: "single", borderColor: info?.color ?? 'gray', flexDirection: "column", paddingX: 1, marginTop: 1, children: [info && st ? (_jsxs(_Fragment, { children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [banner, _jsxs(Text, { color: st.color, bold: true, children: [' ', st.mark, " ", st.label] })] }), _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: [middleTruncate(info.model, 18), " \u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' ', info.ctxPct !== undefined ? (_jsxs(Text, { color: info.ctxPct >= 90 ? UI.danger : info.ctxPct >= 70 ? UI.warn : UI.muted, children: [info.ctxPct, "% \u00B7", ' '] })) : null, _jsx(Text, { color: UI.ok, children: info.cost === null ? '$-' : fmtCost(info.cost) })] })] }), _jsxs(Text, { color: UI.muted, wrap: "wrap", children: ["Task  ", _jsx(Text, { color: UI.text, children: info.task })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["Current  ", truncate(info.currentAction, 160)] })) : null, others.length > 0 ? (
+                                .join(' · ')] })) : null, !timelineFollowTail ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.warn, children: "Viewing older activity \u00B7 \u2193/PgDn to latest" }), _jsx(Timeline, { logs: timelineWindow, cols: process.stdout.columns || 100 })] })) : null] })) : (
+            /* FULL panel for idle/waiting/interactions — terminal states stay compact. */
+            _jsxs(Box, { borderStyle: "single", borderColor: info?.color ?? 'gray', flexDirection: "column", paddingX: 1, marginTop: 1, children: [info && st ? (_jsxs(_Fragment, { children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [banner, _jsxs(Text, { color: modeBadge(info.mode).color, children: [" [", modeBadge(info.mode).label, "]"] }), _jsxs(Text, { color: st.color, bold: true, children: [' ', st.mark, " ", st.label] })] }), _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: [middleTruncate(info.model, 18), " \u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' ', info.ctxPct !== undefined ? (_jsxs(Text, { color: info.ctxPct >= 90 ? UI.danger : info.ctxPct >= 70 ? UI.warn : UI.muted, children: [info.ctxPct, "% \u00B7", ' '] })) : null, _jsx(Text, { color: UI.ok, children: info.cost === null ? '$-' : fmtCost(info.cost) })] })] }), _jsxs(Text, { color: UI.muted, wrap: "wrap", children: ["Task  ", _jsx(Text, { color: UI.text, children: info.task })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["Current  ", truncate(info.currentAction, 160)] })) : null, _jsx(ProgressSteps, { agent: info, max: 6, cols: process.stdout.columns || 100 }), others.length > 0 ? (
                             // The session's shared awareness, visible here too: what the
                             // OTHER agents are doing right now (live, same feed the agents get).
                             _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: ["Others  ", ' ', others
                                         .map((o) => `${o.name} [${stateLabel(o.state)}] ${truncate(o.currentAction || o.task, 40)}`)
-                                        .join(' · ')] })) : null, !raw ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.muted, bold: true, children: t('timeline.activity') }), _jsx(Timeline, { logs: lines.map((l) => l.log), cols: process.stdout.columns || 100 })] })) : null, info.lastResult && (info.state === 'done' || info.state === 'error' || info.state === 'stopped') ? (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: UI.ok, bold: true, children: "Result" }), _jsx(Md, { text: info.lastResult })] })) : null] })) : (_jsx(Text, { color: "gray", children: gone ? t('attach.gone') : t('attach.waiting', { agent: agentRef }) })), gone && info ? _jsx(Text, { color: UI.danger, children: t('attach.gone') }) : null] })), approval ? (_jsx(ApprovalPrompt, { request: { ...approval, agentId: info?.id ?? '', resolve: noop }, pendingCount: 1, onAnswer: (id, ok, always) => {
+                                        .join(' · ')] })) : null, info.lastResult && (info.state === 'done' || info.state === 'error' || info.state === 'stopped') ? (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: UI.ok, bold: true, children: "Result" }), _jsx(Md, { text: info.lastResult })] })) : null] })) : (_jsx(Text, { color: "gray", children: gone ? t('attach.gone') : t('attach.waiting', { agent: agentRef }) })), gone && info ? _jsx(Text, { color: UI.danger, children: t('attach.gone') }) : null] })), approval ? (_jsx(ApprovalPrompt, { request: { ...approval, agentId: info?.id ?? '', resolve: noop }, pendingCount: 1, onAnswer: (id, ok, always) => {
                     wire({ type: 'approve', id, approved: ok, always: !!always });
                     setApproval(null);
                 } })) : question ? (_jsx(QuestionPrompt, { question: { ...question, agentId: info?.id ?? '', resolve: noop }, pendingCount: 1, onAnswer: (id, answer) => {
                     wire({ type: 'answer', id, text: answer });
                     setQuestion(null);
-                } }, question.id)) : null, _jsx(CommandInput, { active: !gone && !interacting, placeholder: t('attach.placeholder', { agent: info?.name ?? agentRef }), context: "attach", targetAgent: info?.name ?? agentRef, modelLabel: info?.model, agentNames: [info?.alias, info?.name, ...others.flatMap((o) => [o.alias, o.name])].filter((n) => Boolean(n)), agents: info ? [info] : [], onSubmit: send, onEscape: () => exit() }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "yellowBright", wrap: "truncate-end", children: formatAttachFooter(info) }) })] }));
+                } }, question.id)) : null, _jsx(Text, { children: " " }), _jsx(CommandInput, { active: !gone && !interacting, placeholder: t('attach.placeholder', { agent: info?.name ?? agentRef }), context: "attach", targetAgent: info?.name ?? agentRef, modelLabel: info?.model, agentNames: [info?.alias, info?.name, ...others.flatMap((o) => [o.alias, o.name])].filter((n) => Boolean(n)), agents: info ? [info] : [], width: process.stdout.columns || 100, onIdleNavigation: busy && !raw ? scrollTimeline : undefined, onSubmit: send, onEscape: () => exit() }), _jsx(Text, { children: " " }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: COLOR.creamMuted, wrap: "truncate-end", children: formatAttachFooter(info) }) })] }));
 }

package/dist/ui/CommandInput.js

@@ -1,28 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { matchCommands } from '../commands.js';
+import { commandPalette } from '../commands.js';
 import { t } from '../i18n.js';
 import { readClipboardImage } from './clipboard.js';
+import { BRAND, COLOR } from './tokens.js';
 /** A paste is "long" when it spans multiple lines — it then collapses into a chip. */
 const PASTE_MIN_LINES = 2;
-const GROUP_LABEL = {
-    modes: 'Agent modes',
-    control: 'Control',
-    views: 'Views',
-    settings: 'Settings',
-    git: 'Git/session',
-    other: 'Other',
-};
 const AGENT_ARG_COMMANDS = new Set(['/focus', '/send', '/attach', '/pause', '/resume', '/stop', '/restore', '/commit']);
+const COMMAND_PAGE_SIZE = 9;
+const PROMPT_GUTTER = '› ';
 function modeHint(value, context, targetAgent) {
     const v = value.trimStart().toLowerCase();
     if (!v) {
         if (context === 'focus')
-            return `Message ${targetAgent ?? 'focused agent'} · / for hub commands · PgUp/PgDn scroll`;
+            return `Message ${targetAgent ?? 'focused agent'} · / commands`;
         if (context === 'attach')
-            return `Steer ${targetAgent ?? 'agent'} · /task spawns · @all broadcasts · /quit detaches`;
-        return 'Default /task · Tab/→ autocomplete · / for commands';
+            return `Steer ${targetAgent ?? 'agent'} · @all broadcasts · /quit detaches`;
+        return 'Type a task or / for commands';
     }
     if (!v.startsWith('/')) {
         if (context === 'focus')
@@ -37,22 +32,18 @@ function modeHint(value, context, targetAgent) {
         return 'Task mode · execute, edit, validate';
     if (v.startsWith('/plan') || v === '/p')
         return 'Plan mode · asks before editing';
-    return 'Tab/→ accepts the best suggestion';
-}
-function groupedCommands(commands) {
-    const order = ['modes', 'control', 'views', 'settings', 'git', 'other'];
-    return order
-        .map((g) => [g, commands.filter((c) => (c.group ?? 'other') === g)])
-        .filter(([, items]) => items.length > 0);
+    if (v.startsWith('/review'))
+        return 'Review mode · verdict, risks, tests';
+    return '↑/↓ select · Enter accept';
 }
 export function bestCommandCompletion(value) {
-    const cmd = matchCommands(value)[0];
+    const cmd = commandPalette(value)[0];
     return cmd ? `${cmd.name} ` : null;
 }
 export function commandNamesForContext(context) {
     if (context !== 'attach')
         return undefined;
-    return ['/ask', '/a', '/task', '/t', '/plan', '/p', '/send', '/raw', '/quit', '/exit', '/detach'];
+    return ['/ask', '/a', '/task', '/t', '/plan', '/p', '/review', '/send', '/raw', '/quit', '/exit', '/detach'];
 }
 export function agentArgCommand(value) {
     const m = value.match(/^(\/\S+)\s+([^\s]*)$/);
@@ -67,12 +58,36 @@ export function completeAgentArgument(value, agent) {
         return value;
     return `${cmd} ${agent} `;
 }
-export function CommandInput({ active, placeholder, mask, context = 'hub', targetAgent, modelLabel, commandNames, agentNames = [], agents = [], onSubmit, onEscape, notify, }) {
+export function clampSuggestionIndex(index, count) {
+    if (count <= 0)
+        return 0;
+    return Math.max(0, Math.min(index, count - 1));
+}
+export function wrappedPromptLines(text, width) {
+    const usable = Math.max(8, width - PROMPT_GUTTER.length);
+    if (!text)
+        return [''];
+    const lines = [];
+    for (const logical of text.split('\n')) {
+        if (!logical) {
+            lines.push('');
+            continue;
+        }
+        for (let i = 0; i < logical.length; i += usable)
+            lines.push(logical.slice(i, i + usable));
+    }
+    return lines.length > 0 ? lines : [''];
+}
+function paintLine(text, width) {
+    return text.length >= width ? text.slice(0, width) : text.padEnd(width, ' ');
+}
+export function CommandInput({ active, placeholder, mask, context = 'hub', targetAgent, modelLabel, commandNames, agentNames = [], agents = [], width, onHeightChange, onIdleNavigation, onSubmit, onEscape, notify, }) {
     const [value, setValue] = useState('');
     const [attachments, setAttachments] = useState([]);
     const [history, setHistory] = useState([]);
     const [histIdx, setHistIdx] = useState(-1);
     const [selectedSuggestion, setSelectedSuggestion] = useState(0);
+    const [cursorOn, setCursorOn] = useState(true);
     const attSeq = useRef(0);
     const reset = () => {
         setValue('');
@@ -118,8 +133,7 @@ export function CommandInput({ active, placeholder, mask, context = 'hub', targe
     };
     const uniqueAgentNames = [...new Set(agentNames.filter(Boolean))];
     const allowedCommands = commandNames ?? commandNamesForContext(context);
-    const commandAllowed = (c) => !allowedCommands || allowedCommands.includes(c.name) || c.aliases?.some((a) => allowedCommands.includes(a));
-    const cmdSuggestions = value.startsWith('/') && !value.includes(' ') ? matchCommands(value).filter(commandAllowed).slice(0, 10) : [];
+    const cmdSuggestions = value.startsWith('/') && !value.includes(' ') ? commandPalette(value, { allowedNames: allowedCommands }) : [];
     const agentSuggestions = value.startsWith('@') && !value.includes(' ')
         ? ['all', ...uniqueAgentNames].filter((n) => n.toLowerCase().startsWith(value.slice(1).toLowerCase())).slice(0, 8)
         : [];
@@ -141,23 +155,51 @@ export function CommandInput({ active, placeholder, mask, context = 'hub', targe
     useEffect(() => {
         setSelectedSuggestion(0);
     }, [value]);
+    const safeSelectedSuggestion = clampSuggestionIndex(selectedSuggestion, suggestionCount);
     useEffect(() => {
-        if (selectedSuggestion >= suggestionCount)
-            setSelectedSuggestion(Math.max(0, suggestionCount - 1));
-    }, [selectedSuggestion, suggestionCount]);
+        if (selectedSuggestion !== safeSelectedSuggestion)
+            setSelectedSuggestion(safeSelectedSuggestion);
+    }, [selectedSuggestion, safeSelectedSuggestion]);
+    useEffect(() => {
+        if (!active)
+            return;
+        const timer = setInterval(() => setCursorOn((on) => !on), 450);
+        return () => clearInterval(timer);
+    }, [active]);
+    const commandWindowStart = cmdSuggestions.length > COMMAND_PAGE_SIZE
+        ? Math.min(Math.max(0, safeSelectedSuggestion - Math.floor(COMMAND_PAGE_SIZE / 2)), Math.max(0, cmdSuggestions.length - COMMAND_PAGE_SIZE))
+        : 0;
+    const shownCommandSuggestions = cmdSuggestions.slice(commandWindowStart, commandWindowStart + COMMAND_PAGE_SIZE);
+    const shown = mask ? '•'.repeat(value.length) : value;
+    const promptWidth = Math.max(20, width ?? process.stdout.columns ?? 100);
+    const inputText = shown || placeholder;
+    const promptLines = wrappedPromptLines(inputText, promptWidth);
+    const suggestionRows = cmdSuggestions.length > 0
+        ? shownCommandSuggestions.length + 1
+        : agentSuggestions.length > 0
+            ? agentSuggestions.length
+            : argSuggestions.length > 0
+                ? argSuggestions.length + 1
+                : 0;
+    const attachmentRows = attachments.length > 0 ? 1 : 0;
+    const hintRows = value || context !== 'hub' ? 1 : 0;
+    const renderedRows = suggestionRows + attachmentRows + promptLines.length + 2 + hintRows;
+    useEffect(() => {
+        onHeightChange?.(renderedRows);
+    }, [onHeightChange, renderedRows]);
     const completeBest = () => {
         if (cmdSuggestions.length > 0) {
-            const cmd = cmdSuggestions[Math.min(selectedSuggestion, cmdSuggestions.length - 1)];
+            const cmd = cmdSuggestions[clampSuggestionIndex(safeSelectedSuggestion, cmdSuggestions.length)];
             setValue(`${cmd.name} `);
             return true;
         }
         if (agentSuggestions.length > 0) {
-            const agent = agentSuggestions[Math.min(selectedSuggestion, agentSuggestions.length - 1)];
+            const agent = agentSuggestions[clampSuggestionIndex(safeSelectedSuggestion, agentSuggestions.length)];
             setValue('@' + agent + ' ');
             return true;
         }
         if (argSuggestions.length > 0) {
-            const agent = argSuggestions[Math.min(selectedSuggestion, argSuggestions.length - 1)];
+            const agent = argSuggestions[clampSuggestionIndex(safeSelectedSuggestion, argSuggestions.length)];
             setValue(completeAgentArgument(value, agent));
             return true;
         }
@@ -193,7 +235,11 @@ export function CommandInput({ active, placeholder, mask, context = 'hub', targe
         }
         if (key.upArrow) {
             if (hasSuggestions) {
-                setSelectedSuggestion((i) => (i - 1 + suggestionCount) % suggestionCount);
+                setSelectedSuggestion((i) => clampSuggestionIndex(i - 1, suggestionCount));
+                return;
+            }
+            if (!value && attachments.length === 0 && onIdleNavigation) {
+                onIdleNavigation('up');
                 return;
             }
             setHistIdx((i) => {
@@ -206,7 +252,11 @@ export function CommandInput({ active, placeholder, mask, context = 'hub', targe
         }
         if (key.downArrow) {
             if (hasSuggestions) {
-                setSelectedSuggestion((i) => (i + 1) % suggestionCount);
+                setSelectedSuggestion((i) => clampSuggestionIndex(i + 1, suggestionCount));
+                return;
+            }
+            if (!value && attachments.length === 0 && onIdleNavigation) {
+                onIdleNavigation('down');
                 return;
             }
             setHistIdx((i) => {
@@ -257,15 +307,21 @@ export function CommandInput({ active, placeholder, mask, context = 'hub', targe
         }
         setValue((v) => v + input);
     }, { isActive: active });
-    const shown = mask ? '•'.repeat(value.length) : value;
     const byName = new Map(agents.flatMap((a) => [[a.name, a], [a.alias, a]]));
-    const commandIndexes = new Map(cmdSuggestions.map((c, i) => [c.name, i]));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: "gray", wrap: "truncate-end", children: modeHint(value, context, targetAgent) }), _jsxs(Text, { color: "cyan", children: ["[", context, "]"] }), targetAgent ? _jsxs(Text, { color: "magenta", children: ["[", targetAgent, "]"] }) : null, modelLabel ? _jsxs(Text, { color: "yellow", children: ["[", modelLabel, "]"] }) : null] }), cmdSuggestions.length > 0 && (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: groupedCommands(cmdSuggestions).map(([group, commands]) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", bold: true, children: GROUP_LABEL[group] ?? group }), commands.map((c) => ((() => {
-                            const selected = commandIndexes.get(c.name) === selectedSuggestion;
-                            return (_jsxs(Text, { children: [_jsxs(Text, { color: selected ? 'cyanBright' : 'cyan', bold: true, children: [selected ? '› ' : '  ', c.name.padEnd(14)] }), _jsx(Text, { color: "yellow", children: c.args.padEnd(22) }), _jsx(Text, { color: "gray", children: t(c.descKey) })] }, c.name));
-                        })()))] }, group))) })), agentSuggestions.length > 0 && (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: agentSuggestions.map((n, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: i === selectedSuggestion ? 'cyanBright' : 'cyan', bold: true, children: [i === selectedSuggestion ? '› ' : '  ', "@", n.padEnd(10)] }), _jsx(Text, { color: "gray", children: n === 'all'
+    return (_jsxs(Box, { flexDirection: "column", children: [cmdSuggestions.length > 0 && (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: "gray", children: ["Commands ", Math.min(safeSelectedSuggestion + 1, cmdSuggestions.length), "/", cmdSuggestions.length, " \u00B7 \u2191/\u2193"] }), shownCommandSuggestions.map((c, i) => {
+                        const absolute = commandWindowStart + i;
+                        const selected = absolute === safeSelectedSuggestion;
+                        return (_jsxs(Text, { children: [_jsxs(Text, { color: selected ? COLOR.cream : COLOR.creamMuted, bold: true, children: [selected ? '› ' : '  ', c.name.padEnd(13)] }), _jsx(Text, { color: "gray", children: t(c.descKey) })] }, c.name));
+                    })] })), agentSuggestions.length > 0 && (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: agentSuggestions.map((n, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: i === safeSelectedSuggestion ? COLOR.cream : COLOR.creamMuted, bold: true, children: [i === safeSelectedSuggestion ? '› ' : '  ', "@", n.padEnd(10)] }), _jsx(Text, { color: "gray", children: n === 'all'
                                 ? t('input.atAll')
-                                : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n))) })), argSuggestions.length > 0 && (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "gray", bold: true, children: "Agents" }), argSuggestions.map((n, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: i === selectedSuggestion ? 'cyanBright' : 'cyan', bold: true, children: [i === selectedSuggestion ? '› ' : '  ', n.padEnd(12)] }), _jsx(Text, { color: "gray", children: n === 'all'
+                                : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n))) })), argSuggestions.length > 0 && (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "gray", bold: true, children: "Agents" }), argSuggestions.map((n, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: i === safeSelectedSuggestion ? COLOR.cream : COLOR.creamMuted, bold: true, children: [i === safeSelectedSuggestion ? '› ' : '  ', n.padEnd(12)] }), _jsx(Text, { color: "gray", children: n === 'all'
                                     ? t('input.atAll')
-                                    : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n)))] })), attachments.length > 0 && (_jsx(Box, { flexDirection: "row", gap: 1, paddingX: 1, children: attachments.map((a) => (_jsxs(Text, { color: "cyan", backgroundColor: "gray", children: [' ', a.kind === 'paste' ? t('input.attPaste', { n: a.n, lines: a.lines }) : t('input.attImage', { n: a.n, file: a.label }), ' '] }, a.n))) })), _jsxs(Box, { borderStyle: "single", borderColor: active ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { color: "cyanBright", bold: true, children: ["\u203A", ' '] }), shown ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: shown }), active && _jsx(Text, { color: "cyanBright", children: "\u2588" })] })) : (_jsxs(_Fragment, { children: [active && _jsx(Text, { color: "cyanBright", children: "\u2588" }), _jsx(Text, { color: "gray", children: placeholder })] }))] })] }));
+                                    : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n)))] })), attachments.length > 0 && (_jsx(Box, { flexDirection: "row", gap: 1, paddingX: 1, children: attachments.map((a) => (_jsxs(Text, { color: COLOR.cream, backgroundColor: COLOR.promptBackground, children: [' ', a.kind === 'paste' ? t('input.attPaste', { n: a.n, lines: a.lines }) : t('input.attImage', { n: a.n, file: a.label }), ' '] }, a.n))) })), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { backgroundColor: COLOR.promptBackground, children: paintLine('', promptWidth) }), promptLines.map((line, i) => {
+                        const last = i === promptLines.length - 1;
+                        const placeholderCursor = !shown && active && cursorOn && i === 0;
+                        const cursor = shown && active && last && cursorOn ? '█' : '';
+                        const prefix = i === 0 ? PROMPT_GUTTER : '  ';
+                        const content = placeholderCursor ? `█${line.slice(1)}` : `${line}${cursor}`;
+                        return (_jsxs(Text, { backgroundColor: COLOR.promptBackground, children: [_jsx(Text, { color: active ? BRAND.primary : BRAND.muted, backgroundColor: COLOR.promptBackground, bold: true, children: prefix }), _jsx(Text, { color: shown ? 'white' : COLOR.creamMuted, backgroundColor: COLOR.promptBackground, children: paintLine(content, promptWidth - prefix.length) })] }, i));
+                    }), _jsx(Text, { backgroundColor: COLOR.promptBackground, children: paintLine('', promptWidth) })] }), (value || context !== 'hub') && (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: [modeHint(value, context, targetAgent), targetAgent ? ` · ${targetAgent}` : '', modelLabel && value ? ` · ${modelLabel}` : ''] }))] }));
 }