@parallel-cli/parallel 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to Parallel are documented here.
 
+## 0.4.6 - 2026-06-24
+
+### 0.4.6 Added
+
+- Added an interactive npm update prompt on startup with daily cache, CI/headless/attach skips, `PARALLEL_SKIP_UPDATE_CHECK=1`, and `--no-update`.
+- Added a Codex-like empty hub with a quieter framed header, cream-toned accents, and a full-width prompt block with distinct background.
+- Added a complete paginated slash palette driven by one deterministic rendered order.
+- Added selectable `/help` command navigation with visible highlight and Enter-to-run behavior.
+- Added localized prompt placeholder copy and an i18n audit to keep all used UI keys translated.
+
+### 0.4.6 Changed
+
+- Reduced default Hub noise by removing persistent startup toasts, duplicate task hints, and always-on command footer lines.
+- Replaced blue/cyan UI accents with a softer cream theme across hub, palettes, wizard/settings lists, markdown summaries, and attached agent terminals.
+- Made the prompt block start at three rows, grow when input wraps, and show the blinking cursor on the first placeholder character while empty.
+- Reused the same minimal prompt treatment in dedicated agent terminals and toned down their footer.
+- Simplified agent rows so secondary telemetry only appears when there is a useful latest signal or result.
+- Moved command palette priority to shared command helpers so autocomplete, help, and rendering stay aligned.
+
+### 0.4.6 Fixed
+
+- Fixed slash palette Up/Down navigation jumping to visually unrelated commands.
+- Fixed `/help` being scrollable but not actually selectable.
+- Fixed Wizard and Settings selection lists wrapping around unexpectedly by clamping navigation at list boundaries.
+
 ## 0.4.5 - 2026-06-23
 
 ### 0.4.5 Added

package/README.md

@@ -19,13 +19,14 @@ Parallel lets you run several AI coding agents on the same repository at the sam
 - Use context-aware input in the hub, focus view, and attached agent terminals.
 - Steer one agent with `@a1 ...` or broadcast with `@all ...`.
 - Open dedicated agent terminals with native scrollback.
-- See a richer live hub with latest agent signals, mode badges, context usage, and responsive timelines.
+- Use a cleaner Codex-like hub with a framed header, focused prompt bar, and quieter empty state.
 - Review agents, notes, file activity, diffs, cost, skills, specialists, and saved sessions from the TUI.
 - Track shell-created file mutations in the same live diff feed as agent edits.
 - Configure OpenAI-compatible providers through a guided wizard and settings panel.
 - Use 29 provider presets across Western, Chinese, Gateway, Inference, and Local categories.
 - Support local no-key endpoints such as Ollama and vLLM/SGLang.
 - Keep shell execution controlled with `ask`, `auto-safe`, or `yolo` approvals.
+- Get prompted for npm updates at startup, with an explicit skip path.
 - Save and restore project sessions.
 - Run headless multi-agent jobs for CI or scripts.
 
@@ -117,7 +118,9 @@ Plain text is equivalent to `/task`.
 
 ## Control Room
 
-The main TUI is the Parallel hub. It is designed to answer:
+The main TUI is the Parallel hub. The default view stays intentionally quiet: a Codex-like framed header, cream-toned accents, a focused prompt block, and detailed status moved into explicit views.
+
+It is designed to answer:
 
 - what needs your input
 - which agents are working
@@ -129,7 +132,7 @@ Input has three explicit contexts:
 
 - Hub: plain text launches a new `/task` agent. Slash suggestions show hub commands and agent arguments autocomplete for `/focus`, `/send`, `/attach`, `/pause`, `/resume`, `/stop`, `/restore`, and `/commit`.
 - Focus: after `/focus a1`, plain text talks to the focused agent instead of spawning a new one. `/raw` affects this view only.
-- Attach: in `parallel attach a1`, plain text steers the attached agent. `/task`, `/ask`, and `/plan` spawn new agents from that terminal, while `@all ...`, `@a2 ...`, and `/send ...` route instructions through the main session.
+- Attach: in `parallel attach a1`, the same minimal prompt UI steers the attached agent. `/task`, `/ask`, and `/plan` spawn new agents from that terminal, while `@all ...`, `@a2 ...`, and `/send ...` route instructions through the main session.
 
 Use `Name: task` when naming an agent:
 
@@ -157,9 +160,11 @@ Commands are typed in the control room input. When a long view is open, use Esca
 Keyboard behavior:
 
 - `/` opens slash command suggestions.
-- Up/Down selects suggestions when a suggestion menu is open.
+- Up/Down selects suggestions in the same order they appear.
 - Enter accepts the selected suggestion.
 - Tab or Right accepts the best completion.
+- `/help` is keyboard navigable: Up/Down moves the visible selection, PgUp/PgDn pages, and Enter runs the selected command.
+- Wizard, settings, slash suggestions, and help views use clamped keyboard selection so the highlight does not jump, disappear, or wrap unexpectedly.
 - PgUp/PgDn scrolls the hub or focus view even while the input is active. Up/Down scrolls long views and navigates suggestions/history.
 - Escape returns to the agents view or clears the input.
 
@@ -239,6 +244,19 @@ Environment variables:
 - `PARALLEL_BASE_URL`: override the default provider base URL.
 - `PARALLEL_MODEL`: override the session model.
 - `PARALLEL_NO_ALT_SCREEN=1`: disable the alternate terminal screen.
+- `PARALLEL_SKIP_UPDATE_CHECK=1`: disable npm update checks.
+
+## Updates
+
+On interactive startup, Parallel checks npm at most once per day for a newer `@parallel-cli/parallel` version. The check is skipped in `attach`, `--headless`, `--first-run`, CI, non-TTY sessions, or when `PARALLEL_SKIP_UPDATE_CHECK=1` is set.
+
+When an update is available, Parallel asks before running:
+
+```bash
+npm install -g @parallel-cli/parallel
+```
+
+If the update succeeds, restart Parallel to run the new version. Use `parallel --no-update` for a one-off launch without checking.
 
 ## Commands
 

package/dist/commands.js

@@ -60,12 +60,43 @@ export const COMMANDS = [
 export function visibleCommands() {
     return COMMANDS.filter((c) => !c.hidden);
 }
+const COMMAND_GROUP_ORDER = ['modes', 'control', 'views', 'settings', 'git', 'other'];
+const COMMAND_PALETTE_PRIORITY = [
+    '/ask',
+    '/task',
+    '/plan',
+    '/send',
+    '/focus',
+    '/attach',
+    '/agents',
+    '/board',
+    '/diff',
+    '/settings',
+    '/help',
+    '/quit',
+];
+function commandRank(c) {
+    const priority = COMMAND_PALETTE_PRIORITY.indexOf(c.name);
+    if (priority !== -1)
+        return priority;
+    const group = COMMAND_GROUP_ORDER.indexOf(c.group ?? 'other');
+    return COMMAND_PALETTE_PRIORITY.length + group * 100 + COMMANDS.indexOf(c);
+}
+export function sortCommandsForPalette(commands) {
+    return [...commands].sort((a, b) => commandRank(a) - commandRank(b) || a.name.localeCompare(b.name));
+}
 export function matchCommands(input, opts = {}) {
     if (!input.startsWith('/'))
         return [];
     const word = input.split(/\s+/)[0].toLowerCase();
     return COMMANDS.filter((c) => opts.includeHidden || !c.hidden).filter((c) => c.name.startsWith(word) || c.aliases?.some((a) => a.startsWith(word)));
 }
+export function commandPalette(input, opts = {}) {
+    const allowed = opts.allowedNames
+        ? (c) => opts.allowedNames.includes(c.name) || c.aliases?.some((a) => opts.allowedNames.includes(a))
+        : () => true;
+    return sortCommandsForPalette(matchCommands(input, opts).filter(allowed));
+}
 function agentList(ctl) {
     return [...ctl.board.agents.values()].map((a) => a.name).join(', ') || t('m.none');
 }

package/dist/controller.js

@@ -9,7 +9,7 @@ import { saveConfig, getProvider, upsertProvider } from './config.js';
 import { priceFor, fmtCost } from './pricing.js';
 import { loadSkills, loadSpecialists } from './skills.js';
 import { t } from './i18n.js';
-const AGENT_COLORS = ['cyan', 'magenta', 'yellow', 'green', 'blue', 'redBright', 'cyanBright', 'magentaBright'];
+const AGENT_COLORS = ['#f3e7c7', 'magenta', 'yellow', 'green', 'whiteBright', 'redBright', '#c8bfa6', 'magentaBright'];
 export function normalizeShellApprovalMode(mode) {
     if (mode === 'ask' || mode === 'auto-safe' || mode === 'yolo')
         return mode;

package/dist/i18n.js

@@ -76,6 +76,10 @@ const en = {
     'main.ready1': '⚡ Ready — folder: {folder}',
     'main.ready2': 'Type a task + Enter to launch your first agent. /help for help.',
     'main.empty': 'No agents yet. Type a task + Enter to launch your first agent — then launch more at any time, even while they work.',
+    'main.prompt': 'Example: Redesign the UI',
+    'main.emptyCard.tagline': 'Multi-agent coding from one terminal.',
+    'main.emptyCard.cta': 'Describe work below to launch the first agent.',
+    'main.emptyCard.hints': '/ for commands · @agent to steer · /help for shortcuts',
     'main.status': 'Enter = new agent N+1 (even while others work) · @Name = real-time instruction · /help · views: /agents /board /diff /notes',
     'main.placeholder': 'Type a task (= new agent N+1) · @Agent message · /command',
     'agent.summary': 'Summary',
@@ -454,6 +458,10 @@ const fr = {
     'main.ready1': '⚡ Prêt — dossier : {folder}',
     'main.ready2': "Tape une tâche + Entrée pour lancer ton premier agent. /help pour l'aide.",
     'main.empty': "Aucun agent pour le moment. Tape une tâche + Entrée pour lancer ton premier agent — puis relances-en d'autres à tout moment, même pendant qu'ils travaillent.",
+    'main.prompt': 'Exemple : Fais moi une refonte UI',
+    'main.emptyCard.tagline': 'Code multi-agent depuis un terminal.',
+    'main.emptyCard.cta': 'Décris le travail ci-dessous pour lancer le premier agent.',
+    'main.emptyCard.hints': '/ pour les commandes · @agent pour piloter · /help pour les raccourcis',
     'main.status': 'Entrée = nouvel agent N+1 (même pendant que les autres travaillent) · @Nom = instruction temps réel · /help · vues : /agents /board /diff /notes',
     'main.placeholder': 'Tape une tâche (= nouvel agent N+1) · @Agent message · /commande',
     'agent.summary': 'Récapitulatif',
@@ -820,6 +828,10 @@ const es = {
     'main.ready1': '⚡ Listo — carpeta: {folder}',
     'main.ready2': 'Escribe una tarea + Enter para lanzar tu primer agente. /help para ayuda.',
     'main.empty': 'Aún no hay agentes. Escribe una tarea + Enter para lanzar tu primer agente — luego lanza más en cualquier momento, incluso mientras trabajan.',
+    'main.prompt': 'Ejemplo: hazme un rediseño de UI',
+    'main.emptyCard.tagline': 'Código multiagente desde un terminal.',
+    'main.emptyCard.cta': 'Describe el trabajo abajo para lanzar el primer agente.',
+    'main.emptyCard.hints': '/ para comandos · @agente para dirigir · /help para atajos',
     'main.status': 'Enter = nuevo agente N+1 (incluso mientras otros trabajan) · @Nombre = instrucción en tiempo real · /help · vistas: /agents /board /diff /notes',
     'main.placeholder': 'Escribe una tarea (= nuevo agente N+1) · @Agente mensaje · /comando',
     'agent.summary': 'Resumen',
@@ -1186,6 +1198,10 @@ const zh = {
     'main.ready1': '⚡ 就绪 — 文件夹：{folder}',
     'main.ready2': '输入任务 + 回车即可启动第一个智能体。/help 查看帮助。',
     'main.empty': '尚无智能体。输入任务 + 回车启动第一个 — 之后可随时启动更多，即使它们正在工作。',
+    'main.prompt': '示例：帮我重做 UI',
+    'main.emptyCard.tagline': '在一个终端中进行多智能体编码。',
+    'main.emptyCard.cta': '在下方描述工作以启动第一个智能体。',
+    'main.emptyCard.hints': '/ 查看命令 · @智能体 可指挥 · /help 查看快捷键',
     'main.status': '回车 = 新智能体 N+1（即使其他智能体正在工作）· @名称 = 实时指令 · /help · 视图：/agents /board /diff /notes',
     'main.placeholder': '输入任务（= 新智能体 N+1）· @智能体 消息 · /命令',
     'agent.summary': '摘要',

package/dist/index.js

@@ -8,6 +8,7 @@ import { App } from './ui/App.js';
 import { Controller } from './controller.js';
 import { loadConfig, providerReady, setConfigHome } from './config.js';
 import { setLang } from './i18n.js';
+import { maybeRunStartupUpdate } from './update.js';
 const argv = process.argv.slice(2);
 function takeFlagValue(flag) {
     const i = argv.indexOf(flag);
@@ -26,6 +27,9 @@ if (headless)
 const jsonOut = argv.includes('--json');
 if (jsonOut)
     argv.splice(argv.indexOf('--json'), 1);
+const noUpdate = argv.includes('--no-update');
+if (noUpdate)
+    argv.splice(argv.indexOf('--no-update'), 1);
 const configHome = takeFlagValue('--config-home');
 if (argv.includes('--help') || argv.includes('-h')) {
     console.log(`⚡ Parallel — real-time parallel coding agents.
@@ -39,6 +43,8 @@ Usage:
   parallel --first-run   Test the first-run wizard with a temporary config home
   parallel --config-home <dir> [folder]
                           Use <dir>/config.json instead of ~/.parallel/config.json
+  parallel --no-update [folder]
+                          Start without checking npm for a newer Parallel version
   parallel --headless "task1" ["task2"…] [--json]
                           No TUI: one agent per task in the current folder,
                           auto-approved commands, summary (or JSON) on stdout — for CI
@@ -48,6 +54,7 @@ Environment variables:
   PARALLEL_MODEL                        Default model
   PARALLEL_BASE_URL                     OpenAI-compatible endpoint
   PARALLEL_NO_ALT_SCREEN=1              Disable the alternate terminal screen.
+  PARALLEL_SKIP_UPDATE_CHECK=1           Disable npm update checks.
 
 Inside the TUI:
   <task> + Enter         Launch agent N+1 — even while the others are working
@@ -172,6 +179,8 @@ if (!process.stdout.isTTY) {
     console.error('Parallel requires an interactive terminal (TTY).');
     process.exit(1);
 }
+if (await maybeRunStartupUpdate(firstRun || noUpdate))
+    process.exit(0);
 const config = loadConfig();
 if (config.language)
     setLang(config.language);

package/dist/ui/AgentPanel.js

@@ -6,7 +6,7 @@ import { elapsed, truncate } from './theme.js';
 import { Md } from './Md.js';
 import { Spinner } from './Spinner.js';
 import { Timeline } from './Timeline.js';
-import { MARK, MODE, STATE_META, UI, ANIM } from './tokens.js';
+import { MARK, MODE, STATE_META, UI, ANIM, COLOR } from './tokens.js';
 import { latestSignal, toUIEvents } from './events.js';
 export const KIND_COLOR = {
     tool: UI.accent,
@@ -52,7 +52,7 @@ function ResultBlock({ agent, compact = false }) {
 const SPINNER_STATES = new Set(['thinking', 'working', 'listening', 'waiting']);
 function spinnerColor(state) {
     if (state === 'working')
-        return 'cyan';
+        return COLOR.cream;
     return 'yellow'; // thinking, listening, waiting
 }
 function modeChar(mode) {
@@ -87,18 +87,14 @@ export function AgentRow({ agent, logs, cols, }) {
     const telemetry = formatAgentTelemetry(agent);
     const signal = latestSignal(agent, toUIEvents(logs));
     const specialist = agent.specialist ? ` #${agent.specialist}` : '';
-    // Line 2 content
     let line2 = null;
     if (agent.lastResult) {
         line2 = { text: `✓ ${compactResultSummary(agent.lastResult, line2Max)}`, color: UI.ok };
     }
-    else if (signal) {
+    else if (signal && signal !== agent.task) {
         line2 = { text: `▸ ${truncate(signal, line2Max)}`, color: UI.accent };
     }
-    else {
-        line2 = { text: meta.label, color: meta.color };
-    }
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, paddingLeft: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [SPINNER_STATES.has(agent.state) ? (_jsx(Spinner, { color: pulseColor ?? spinnerColor(agent.state) })) : (_jsx(Text, { color: pulseColor ?? meta.color, bold: true, children: meta.mark })), _jsx(Text, { children: " " }), _jsx(Text, { color: agent.color, bold: true, children: name }), mode ? (_jsxs(Text, { color: mode.color, children: [" ", mode.char] })) : null, specialist ? _jsx(Text, { color: UI.note, children: specialist }) : null, _jsxs(Text, { color: UI.text, children: ["  ", truncate(agent.task, taskMax)] })] }), _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { color: line2.color, wrap: "truncate-end", children: line2.text }), _jsx(Text, { color: UI.muted, children: telemetry })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, paddingLeft: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [SPINNER_STATES.has(agent.state) ? (_jsx(Spinner, { color: pulseColor ?? spinnerColor(agent.state) })) : (_jsx(Text, { color: pulseColor ?? meta.color, bold: true, children: meta.mark })), _jsx(Text, { children: " " }), _jsx(Text, { color: agent.color, bold: true, children: name }), mode ? (_jsxs(Text, { color: mode.color, children: [" ", mode.char] })) : null, specialist ? _jsx(Text, { color: UI.note, children: specialist }) : null, _jsxs(Text, { color: UI.text, children: ["  ", truncate(agent.task, taskMax)] })] }), line2 ? (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { color: line2.color, wrap: "truncate-end", children: line2.text }), _jsx(Text, { color: UI.muted, children: telemetry })] })) : null] }));
 }
 export function AgentTranscript({ agent, logs, raw = false, scrolled = 0, cols = 100, }) {
     const meta = STATE_META[agent.state];

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 = 1;
     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,9 @@ 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;
     // View breadcrumb: when not in agents view, show the view name instead of "control room".
     const VIEW_LABEL = {
         agents: 'control room',
@@ -645,7 +642,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"] })] }) })) : (_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 +654,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(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(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, 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));

package/dist/ui/AttachApp.js

@@ -12,7 +12,7 @@ import { Timeline } from './Timeline.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 = () => { };
 export function parseAttachCommand(text) {
     const v = text.trim();
@@ -157,5 +157,5 @@ export function AttachApp({ agentRef, sock }) {
                 } })) : 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(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, onSubmit: send, onEscape: () => exit() }), _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,16 +32,10 @@ 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);
+    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) {
@@ -67,12 +56,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, 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 +131,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 +153,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 +233,7 @@ 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;
             }
             setHistIdx((i) => {
@@ -206,7 +246,7 @@ 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;
             }
             setHistIdx((i) => {
@@ -257,15 +297,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}` : ''] }))] }));
 }

package/dist/ui/Md.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { BRAND } from './tokens.js';
 /**
  * Mini markdown renderer for agent summaries — line-based, zero deps.
  * Supports: ## headers, - / * bullets, numbered lists, **bold**, `code`.
@@ -25,15 +26,15 @@ export function Md({ text, dim }) {
                 return _jsx(Text, { children: " " }, i);
             const header = line.match(/^#{1,3}\s+(.*)$/);
             if (header) {
-                return (_jsx(Text, { bold: true, color: "cyanBright", children: header[1] }, i));
+                return (_jsx(Text, { bold: true, color: BRAND.primary, children: header[1] }, i));
             }
             const bullet = line.match(/^(\s*)[-*]\s+(.*)$/);
             if (bullet) {
-                return (_jsxs(Text, { wrap: "wrap", dimColor: dim, children: [bullet[1], _jsx(Text, { color: "cyan", children: "\u2022 " }), inline(bullet[2], `b${i}`)] }, i));
+                return (_jsxs(Text, { wrap: "wrap", dimColor: dim, children: [bullet[1], _jsx(Text, { color: BRAND.primary, children: "\u2022 " }), inline(bullet[2], `b${i}`)] }, i));
             }
             const numbered = line.match(/^(\s*)(\d+)[.)]\s+(.*)$/);
             if (numbered) {
-                return (_jsxs(Text, { wrap: "wrap", dimColor: dim, children: [numbered[1], _jsxs(Text, { color: "cyan", children: [numbered[2], ". "] }), inline(numbered[3], `n${i}`)] }, i));
+                return (_jsxs(Text, { wrap: "wrap", dimColor: dim, children: [numbered[1], _jsxs(Text, { color: BRAND.primary, children: [numbered[2], ". "] }), inline(numbered[3], `n${i}`)] }, i));
             }
             return (_jsx(Text, { wrap: "wrap", dimColor: dim, children: inline(line, `l${i}`) }, i));
         }) }));

package/dist/ui/SettingsPanel.js

@@ -6,6 +6,7 @@ import { priceFor } from '../pricing.js';
 import { SelectList as BaseSelectList } from './Wizard.js';
 import { LANGS, getLang, setLang, t } from '../i18n.js';
 import { detectProviderModels, isLocalProvider, isPlaceholderModel, providerNeedsApiKey, PROVIDER_PRESETS } from '../config.js';
+import { BRAND } from './tokens.js';
 function masked(key) {
     if (!key)
         return '—';
@@ -163,7 +164,7 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
         setStep(next);
     };
     // ---- render ----
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: scope === 'global' ? t('set.title') : t('sset.title') }), flash ? _jsx(Text, { color: "green", children: flash }) : null, _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [step.id === 'root' && _jsx(SelectList, { items: rootItems, height: listHeight, onSelect: chooseRoot }), step.id === 'lang' && (_jsx(SelectList, { items: LANGS.map((l) => ({ label: l.label, value: l.code })), height: listHeight, onSelect: (code) => {
+    return (_jsxs(Box, { borderStyle: "round", borderColor: BRAND.muted, flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: BRAND.primary, children: scope === 'global' ? t('set.title') : t('sset.title') }), flash ? _jsx(Text, { color: "green", children: flash }) : null, _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [step.id === 'root' && _jsx(SelectList, { items: rootItems, height: listHeight, onSelect: chooseRoot }), step.id === 'lang' && (_jsx(SelectList, { items: LANGS.map((l) => ({ label: l.label, value: l.code })), height: listHeight, onSelect: (code) => {
                             setLang(code);
                             ctl.setLanguage(code);
                             saved();

package/dist/ui/Wizard.js

@@ -2,6 +2,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { t } from '../i18n.js';
+import { BRAND, COLOR } from './tokens.js';
+function clampIndex(index, count) {
+    if (count <= 0)
+        return 0;
+    return Math.max(0, Math.min(index, count - 1));
+}
 /**
  * Simple ↑/↓ + Entrée select list. If `allowInput` is set, the user can also
  * type a free value (e.g. a folder path or a custom model name) — typing
@@ -41,12 +47,12 @@ export function SelectList({ items, allowInput, inputPlaceholder, mask, height,
         }
         if (key.upArrow) {
             if (!typing)
-                setIdx((i) => (i - 1 + selectable.length) % Math.max(1, selectable.length));
+                setIdx((i) => clampIndex(i - 1, selectable.length));
             return;
         }
         if (key.downArrow) {
             if (!typing)
-                setIdx((i) => (i + 1) % Math.max(1, selectable.length));
+                setIdx((i) => clampIndex(i + 1, selectable.length));
             return;
         }
         if (key.pageUp) {
@@ -95,9 +101,9 @@ export function SelectList({ items, allowInput, inputPlaceholder, mask, height,
     const below = Math.max(0, items.length - start - visibleItems.length);
     return (_jsxs(Box, { flexDirection: "column", children: [above > 0 ? _jsxs(Text, { color: "gray", children: ["\u25B2 ", above] }) : null, visibleItems.map((it, localIdx) => {
                 const i = start + localIdx;
-                return (it.section ? (_jsx(Box, { marginTop: i > 0 ? 1 : 0, children: _jsx(Text, { bold: true, color: "white", children: it.label }) }, it.label)) : (_jsxs(Text, { children: [_jsxs(Text, { color: !typing && i === safeIdx ? 'cyanBright' : 'gray', bold: !typing && i === safeIdx, children: [!typing && i === safeIdx ? '❯ ' : '  ', it.label] }), it.hint ? _jsxs(Text, { color: "gray", children: [" ", it.hint] }) : null, it.detail ? _jsxs(Text, { color: "gray", children: [" \u2014 ", it.detail] }) : null] }, it.value + i)));
-            }), below > 0 ? _jsxs(Text, { color: "gray", children: ["\u25BC ", below] }) : null, allowInput && (_jsx(Box, { marginTop: items.length > 0 ? 1 : 0, children: _jsxs(Text, { color: typing ? 'cyanBright' : 'gray', children: ["\u270E", ' ', typing ? (_jsx(Text, { color: "white", children: mask ? '•'.repeat(typed.length) : typed })) : (_jsx(Text, { color: "gray", children: inputPlaceholder ?? '…' })), typing ? _jsx(Text, { color: "cyanBright", children: "\u2588" }) : null] }) }))] }));
+                return (it.section ? (_jsx(Box, { marginTop: i > 0 ? 1 : 0, children: _jsx(Text, { bold: true, color: "white", children: it.label }) }, it.label)) : (_jsxs(Text, { children: [_jsxs(Text, { color: !typing && i === safeIdx ? COLOR.cream : 'gray', bold: !typing && i === safeIdx, children: [!typing && i === safeIdx ? '❯ ' : '  ', it.label] }), it.hint ? _jsxs(Text, { color: "gray", children: [" ", it.hint] }) : null, it.detail ? _jsxs(Text, { color: "gray", children: [" \u2014 ", it.detail] }) : null] }, it.value + i)));
+            }), below > 0 ? _jsxs(Text, { color: "gray", children: ["\u25BC ", below] }) : null, allowInput && (_jsx(Box, { marginTop: items.length > 0 ? 1 : 0, children: _jsxs(Text, { color: typing ? COLOR.cream : 'gray', children: ["\u270E", ' ', typing ? (_jsx(Text, { color: "white", children: mask ? '•'.repeat(typed.length) : typed })) : (_jsx(Text, { color: "gray", children: inputPlaceholder ?? '…' })), typing ? _jsx(Text, { color: COLOR.cream, children: "\u2588" }) : null] }) }))] }));
 }
 export function WizardStep({ step, total, title, children, footer, }) {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["[", step, "/", total, "] ", title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: children }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: footer ?? t('wiz.footer.select') }) })] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: BRAND.muted, flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: BRAND.primary, children: ["[", step, "/", total, "] ", title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: children }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: footer ?? t('wiz.footer.select') }) })] }));
 }

package/dist/ui/theme.js

@@ -1,13 +1,13 @@
 import { t } from '../i18n.js';
-import { STATE } from './tokens.js';
+import { COLOR, STATE } from './tokens.js';
 /** Strong visual cues: icon + label (i18n key) + color per state. */
 export const STATE_LABEL = {
     idle: { icon: '◇', labelKey: 'st.idle', color: STATE.idle },
     thinking: { icon: '🧠', labelKey: 'st.thinking', color: STATE.thinking },
-    listening: { icon: '👂', labelKey: 'st.listening', color: 'cyanBright' },
+    listening: { icon: '👂', labelKey: 'st.listening', color: COLOR.cream },
     working: { icon: '🔨', labelKey: 'st.working', color: 'green' },
     waiting: { icon: '✋', labelKey: 'st.waiting', color: 'magenta' },
-    paused: { icon: '⏸', labelKey: 'st.paused', color: 'blue' },
+    paused: { icon: '⏸', labelKey: 'st.paused', color: COLOR.creamMuted },
     done: { icon: '✅', labelKey: 'st.done', color: STATE.done },
     error: { icon: '✖', labelKey: 'st.error', color: 'red' },
     stopped: { icon: '⏹', labelKey: 'st.stopped', color: STATE.error },

package/dist/ui/tokens.js

@@ -6,9 +6,14 @@ export const MARK = {
     waiting: '?',
     arrow: '▸',
 };
+export const COLOR = {
+    cream: '#f3e7c7',
+    creamMuted: '#c8bfa6',
+    promptBackground: '#5f5963',
+};
 export const UI = {
-    brand: 'cyanBright',
-    accent: 'cyan',
+    brand: COLOR.cream,
+    accent: COLOR.cream,
     muted: 'gray',
     text: 'white',
     ok: 'greenBright',
@@ -30,12 +35,12 @@ export const STATE_META = {
 // ─── Hub redesign tokens (Phase 0) ───────────────────────────────────────────
 /** Brand colors — logotype, borders, focus indicator. */
 export const BRAND = {
-    primary: 'cyanBright',
-    muted: 'cyan',
+    primary: COLOR.cream,
+    muted: COLOR.creamMuted,
 };
 /** Semantic state colors mapped to agent states. */
 export const STATE = {
-    working: 'cyan',
+    working: COLOR.cream,
     thinking: 'yellow',
     listening: 'yellow',
     done: 'greenBright',
@@ -46,7 +51,7 @@ export const STATE = {
 /** Mode indicator colors. `task` is undefined — it renders no mark. */
 export const MODE = {
     ask: 'yellow',
-    plan: 'blue',
+    plan: COLOR.creamMuted,
     task: undefined,
 };
 /** Chrome / UI element colors. */

package/dist/ui/views.js

@@ -1,12 +1,38 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import * as Diff from 'diff';
-import { visibleCommands } from '../commands.js';
+import { sortCommandsForPalette, visibleCommands } from '../commands.js';
 import { Controller } from '../controller.js';
 import { fmtCost } from '../pricing.js';
 import { STATE_LABEL, stateLabel, truncate } from './theme.js';
 import { t } from '../i18n.js';
+import { BRAND, COLOR } from './tokens.js';
+function clampIndex(index, count) {
+    if (count <= 0)
+        return 0;
+    return Math.max(0, Math.min(index, count - 1));
+}
+function useSelectableIndex(count, pageSize) {
+    const [selected, setSelected] = useState(0);
+    const safeSelected = clampIndex(selected, count);
+    useEffect(() => {
+        if (safeSelected !== selected)
+            setSelected(safeSelected);
+    }, [safeSelected, selected]);
+    const step = Math.max(1, pageSize - 1);
+    useInput((_input, key) => {
+        if (key.downArrow)
+            setSelected((i) => clampIndex(i + 1, count));
+        if (key.upArrow)
+            setSelected((i) => clampIndex(i - 1, count));
+        if (key.pageDown)
+            setSelected((i) => clampIndex(i + step, count));
+        if (key.pageUp)
+            setSelected((i) => clampIndex(i - step, count));
+    });
+    return safeSelected;
+}
 /**
  * PgUp/PgDn window over a list — the TUI runs in the alternate screen, so
  * every long view needs its own scrolling. `anchor` decides what you see
@@ -79,7 +105,7 @@ export function DiffView({ board, bodyHeight }) {
     return (_jsxs(Box, { borderStyle: "round", borderColor: "green", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "green", children: t('diff.title', { total: board.changes.length }) }), board.changes.length === 0 ? (_jsx(Text, { color: "gray", children: t('diff.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), changes.map((c) => {
                         const patch = Diff.createPatch(c.path, c.before, c.after, '', '', { context: 2 });
                         const lines = patch.split('\n').slice(4, 34);
-                        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, children: [_jsx(Text, { color: "cyan", children: c.path }), _jsxs(Text, { color: "gray", children: [' ', t('diff.by', { agent: c.agentName, time: new Date(c.ts).toLocaleTimeString() })] })] }), lines.map((l, i) => (_jsx(Text, { color: l.startsWith('+') ? 'green' : l.startsWith('-') ? 'red' : l.startsWith('@') ? 'cyan' : 'gray', wrap: "truncate-end", children: l || ' ' }, i))), patch.split('\n').length > 38 ? _jsx(Text, { color: "gray", children: t('diff.trunc') }) : null] }, c.id));
+                        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, children: [_jsx(Text, { color: BRAND.primary, children: c.path }), _jsxs(Text, { color: "gray", children: [' ', t('diff.by', { agent: c.agentName, time: new Date(c.ts).toLocaleTimeString() })] })] }), lines.map((l, i) => (_jsx(Text, { color: l.startsWith('+') ? 'green' : l.startsWith('-') ? 'red' : l.startsWith('@') ? BRAND.primary : 'gray', wrap: "truncate-end", children: l || ' ' }, i))), patch.split('\n').length > 38 ? _jsx(Text, { color: "gray", children: t('diff.trunc') }) : null] }, c.id));
                     }), _jsx(Below, { n: below })] }))] }));
 }
 /** Financial view: live cost / steps / tokens per agent + session total. */
@@ -90,21 +116,21 @@ export function CostView({ board, bodyHeight }) {
     const { slice, above, below } = useScrollWindow(agents, visible, 'top');
     const total = agents.reduce((s, a) => s + (a.cost ?? 0), 0);
     const unknown = agents.some((a) => a.cost === null);
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "greenBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "greenBright", children: t('cost.title') }), agents.length === 0 ? (_jsx(Text, { color: "gray", children: t('cost.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name.padEnd(12) }), _jsxs(Text, { color: "gray", children: [a.model.padEnd(24).slice(0, 24), " "] }), _jsxs(Text, { children: [String(a.steps).padStart(3), " steps "] }), _jsxs(Text, { color: "cyan", children: [String(Math.round(a.tokensIn / 1000)).padStart(5), "k in ", String(Math.round(a.tokensOut / 1000)).padStart(4), "k out", ' '] }), _jsx(Text, { color: "greenBright", bold: true, children: a.cost === null ? '   $—' : fmtCost(a.cost).padStart(8) }), a.cost === null ? _jsxs(Text, { color: "gray", children: [" ", t('cost.unknown')] }) : null] }, a.id))), _jsx(Below, { n: below }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, children: ['  ', t('cost.total'), " ", _jsx(Text, { color: "greenBright", children: fmtCost(total) }), unknown ? _jsxs(Text, { color: "gray", children: [" ", t('cost.partial')] }) : null] })] })), _jsx(Text, { color: "gray", children: t('cost.hint') })] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "greenBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "greenBright", children: t('cost.title') }), agents.length === 0 ? (_jsx(Text, { color: "gray", children: t('cost.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name.padEnd(12) }), _jsxs(Text, { color: "gray", children: [a.model.padEnd(24).slice(0, 24), " "] }), _jsxs(Text, { children: [String(a.steps).padStart(3), " steps "] }), _jsxs(Text, { color: BRAND.primary, children: [String(Math.round(a.tokensIn / 1000)).padStart(5), "k in ", String(Math.round(a.tokensOut / 1000)).padStart(4), "k out", ' '] }), _jsx(Text, { color: "greenBright", bold: true, children: a.cost === null ? '   $—' : fmtCost(a.cost).padStart(8) }), a.cost === null ? _jsxs(Text, { color: "gray", children: [" ", t('cost.unknown')] }) : null] }, a.id))), _jsx(Below, { n: below }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, children: ['  ', t('cost.total'), " ", _jsx(Text, { color: "greenBright", children: fmtCost(total) }), unknown ? _jsxs(Text, { color: "gray", children: [" ", t('cost.partial')] }) : null] })] })), _jsx(Text, { color: "gray", children: t('cost.hint') })] }));
 }
 /** Skills catalog: user-authored markdown instructions agents can load. */
 export function SkillsView({ skills, bodyHeight }) {
     const fallbackVisible = useVisibleRows(8);
     const visible = bodyHeight ? Math.max(3, bodyHeight - 6) : fallbackVisible;
     const { slice, above, below } = useScrollWindow(skills, visible, 'top');
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "blueBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "blueBright", children: t('skills.title') }), skills.length === 0 ? (_jsx(Text, { color: "gray", children: t('skills.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "blueBright", bold: true, children: ["#", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 100) })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('skills.hint1') }), _jsx(Text, { color: "gray", children: t('skills.hint2') })] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: BRAND.muted, flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: BRAND.primary, children: t('skills.title') }), skills.length === 0 ? (_jsx(Text, { color: "gray", children: t('skills.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: BRAND.primary, bold: true, children: ["#", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 100) })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('skills.hint1') }), _jsx(Text, { color: "gray", children: t('skills.hint2') })] }));
 }
 /** Specialists catalog: personas (role + optional pinned model). */
 export function SpecialistsView({ specialists, bodyHeight }) {
     const fallbackVisible = useVisibleRows(8);
     const visible = bodyHeight ? Math.max(3, bodyHeight - 6) : fallbackVisible;
     const { slice, above, below } = useScrollWindow(specialists, visible, 'top');
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "magentaBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magentaBright", children: t('spec.title') }), specialists.length === 0 ? (_jsx(Text, { color: "gray", children: t('spec.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magentaBright", bold: true, children: ["\uD83C\uDF93", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), s.model ? _jsxs(Text, { color: "cyan", children: [s.model, " "] }) : null, _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 90) })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('spec.hint1') }), _jsx(Text, { color: "gray", children: t('spec.hint2') })] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "magentaBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magentaBright", children: t('spec.title') }), specialists.length === 0 ? (_jsx(Text, { color: "gray", children: t('spec.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magentaBright", bold: true, children: ["\uD83C\uDF93", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), s.model ? _jsxs(Text, { color: BRAND.primary, children: [s.model, " "] }) : null, _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 90) })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('spec.hint1') }), _jsx(Text, { color: "gray", children: t('spec.hint2') })] }));
 }
 /** Saved sessions: inspect available restore points; restore via /session. */
 export function SessionsView({ projectRoot, bodyHeight }) {
@@ -118,16 +144,27 @@ export function SessionsView({ projectRoot, bodyHeight }) {
                                     agents: s.data.agents.length,
                                 }) }), _jsxs(Text, { color: "gray", children: [" ", s.data.agents.map((a) => a.name).join(', ').slice(0, 80)] })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('sessions.hint') })] }));
 }
-export function HelpView({ bodyHeight }) {
+export function HelpView({ bodyHeight, onSelect }) {
     // Fixed intro/highlight/footer rows consume about 12 lines inside the already-sized body.
     const fallbackVisible = useVisibleRows(16);
     const visible = bodyHeight ? Math.max(3, bodyHeight - 12) : fallbackVisible;
-    const commands = visibleCommands();
-    const { slice, above, below } = useScrollWindow(commands, visible, 'top');
+    const commands = sortCommandsForPalette(visibleCommands());
+    const selected = useSelectableIndex(commands.length, visible);
+    useInput((_input, key) => {
+        if (key.return)
+            onSelect?.(commands[selected]?.name ?? '/help');
+    });
+    const start = Math.min(Math.max(0, selected - Math.floor(visible / 2)), Math.max(0, commands.length - visible));
+    const slice = commands.slice(start, start + visible);
+    const above = start;
+    const below = Math.max(0, commands.length - start - slice.length);
     const highlights = [
         ['Agent modes', ['/ask', '/task', '/plan']],
         ['Shell approvals', ['/approvals ask', '/approvals auto', '/approvals yolo']],
         ['Navigation', ['/focus', '/attach', '/raw', '/send']],
     ];
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: t('help.title') }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, children: t('help.l1a') }), t('help.l1b'), _jsx(Text, { bold: true, children: t('help.l1c') }), "."] }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, children: t('help.l2a') }), t('help.l2b'), _jsx(Text, { bold: true, children: t('help.l2c') }), t('help.l2d')] }), _jsx(Text, { wrap: "truncate-end", children: t('help.l3') }), _jsx(Text, { children: " " }), highlights.map(([label, names]) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: "cyan", bold: true, children: [label, ": "] }), _jsx(Text, { color: "gray", children: names.join('  ') })] }, label))), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "Keyboard: \u2191/\u2193 or PgUp/PgDn scroll \u00B7 Tab/\u2192 autocomplete \u00B7 Esc back/clear \u00B7 Ctrl+U clear \u00B7 Ctrl+V image" }), _jsx(Text, { children: " " }), _jsx(Above, { n: above }), slice.map((c) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "cyan", bold: true, children: c.name.padEnd(18) }), _jsx(Text, { color: "yellow", children: c.args.padEnd(24) }), _jsxs(Text, { color: "gray", children: [t(c.descKey), c.aliases?.length ? ` (= ${c.aliases.join(', ')})` : ''] })] }, c.name))), _jsx(Below, { n: below }), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: t('help.states') }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: t('help.keys') })] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: BRAND.muted, flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: BRAND.primary, children: t('help.title') }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, children: t('help.l1a') }), t('help.l1b'), _jsx(Text, { bold: true, children: t('help.l1c') }), "."] }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, children: t('help.l2a') }), t('help.l2b'), _jsx(Text, { bold: true, children: t('help.l2c') }), t('help.l2d')] }), _jsx(Text, { wrap: "truncate-end", children: t('help.l3') }), _jsx(Text, { children: " " }), highlights.map(([label, names]) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: BRAND.primary, bold: true, children: [label, ": "] }), _jsx(Text, { color: "gray", children: names.join('  ') })] }, label))), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "Keyboard: \u2191/\u2193 select \u00B7 Enter run selected \u00B7 PgUp/PgDn page \u00B7 Esc back" }), _jsx(Text, { children: " " }), _jsx(Above, { n: above }), slice.map((c, i) => {
+                const isSelected = start + i === selected;
+                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: isSelected ? COLOR.cream : COLOR.creamMuted, bold: true, children: [isSelected ? '› ' : '  ', c.name.padEnd(16)] }), _jsx(Text, { color: "yellow", children: c.args.padEnd(24) }), _jsxs(Text, { color: "gray", children: [t(c.descKey), c.aliases?.length ? ` (= ${c.aliases.join(', ')})` : ''] })] }, c.name));
+            }), _jsx(Below, { n: below }), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: t('help.states') }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: t('help.keys') })] }));
 }

package/dist/update.js

@@ -0,0 +1,125 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import readline from 'node:readline';
+import { spawn } from 'node:child_process';
+import { configDir } from './config.js';
+import { PACKAGE_NAME, VERSION } from './version.js';
+const CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000;
+const REMIND_LATER_MS = 24 * 60 * 60 * 1000;
+export function compareVersions(a, b) {
+    const pa = a.replace(/^v/, '').split(/[.-]/).map((n) => Number.parseInt(n, 10) || 0);
+    const pb = b.replace(/^v/, '').split(/[.-]/).map((n) => Number.parseInt(n, 10) || 0);
+    const len = Math.max(pa.length, pb.length);
+    for (let i = 0; i < len; i++) {
+        const left = pa[i] ?? 0;
+        const right = pb[i] ?? 0;
+        if (left !== right)
+            return left > right ? 1 : -1;
+    }
+    return 0;
+}
+function updateStateFile() {
+    return path.join(configDir(), 'update.json');
+}
+export function readUpdateState() {
+    try {
+        const file = updateStateFile();
+        return fs.existsSync(file) ? JSON.parse(fs.readFileSync(file, 'utf8')) : {};
+    }
+    catch {
+        return {};
+    }
+}
+export function writeUpdateState(state) {
+    try {
+        fs.mkdirSync(configDir(), { recursive: true });
+        fs.writeFileSync(updateStateFile(), JSON.stringify(state, null, 2));
+    }
+    catch {
+        /* best effort */
+    }
+}
+export function shouldSkipUpdateCheck(env = process.env) {
+    return (env.PARALLEL_SKIP_UPDATE_CHECK === '1' ||
+        env.CI === 'true' ||
+        env.GITHUB_ACTIONS === 'true' ||
+        env.GITLAB_CI === 'true' ||
+        env.BUILDKITE === 'true');
+}
+export function shouldPromptForUpdate(info, state, now = Date.now()) {
+    if (compareVersions(info.latest, info.current) <= 0)
+        return false;
+    if (state.dismissedVersion === info.latest)
+        return false;
+    if (state.skipUntil && state.skipUntil > now)
+        return false;
+    return true;
+}
+export async function fetchLatestVersion(timeoutMs = 1500) {
+    let timeout;
+    try {
+        const controller = new AbortController();
+        timeout = setTimeout(() => controller.abort(), timeoutMs);
+        const resp = await fetch(`https://registry.npmjs.org/${encodeURIComponent(PACKAGE_NAME)}/latest`, {
+            signal: controller.signal,
+        });
+        if (!resp.ok)
+            return null;
+        const data = await resp.json();
+        return typeof data.version === 'string' ? data.version : null;
+    }
+    catch {
+        return null;
+    }
+    finally {
+        if (timeout)
+            clearTimeout(timeout);
+    }
+}
+function ask(question) {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+export async function runGlobalUpdate() {
+    return new Promise((resolve) => {
+        const child = spawn('npm', ['install', '-g', PACKAGE_NAME], { stdio: 'inherit' });
+        child.on('close', (code) => resolve(code ?? 1));
+        child.on('error', () => resolve(1));
+    });
+}
+export async function maybeRunStartupUpdate(skip = false) {
+    if (skip || shouldSkipUpdateCheck() || !process.stdin.isTTY || !process.stdout.isTTY)
+        return false;
+    const now = Date.now();
+    const state = readUpdateState();
+    if (state.lastCheckAt && now - state.lastCheckAt < CHECK_INTERVAL_MS && (!state.skipUntil || state.skipUntil > now)) {
+        return false;
+    }
+    const latest = await fetchLatestVersion();
+    writeUpdateState({ ...state, lastCheckAt: now });
+    if (!latest)
+        return false;
+    const info = { current: VERSION, latest };
+    if (!shouldPromptForUpdate(info, state, now))
+        return false;
+    const answer = await ask(`Update Parallel ${VERSION} -> ${latest}? [y/N] `);
+    if (!/^y(es)?$/i.test(answer)) {
+        writeUpdateState({ ...state, lastCheckAt: now, skipUntil: now + REMIND_LATER_MS });
+        return false;
+    }
+    console.log(`Updating Parallel via \`npm install -g ${PACKAGE_NAME}\`...\n`);
+    const code = await runGlobalUpdate();
+    if (code === 0) {
+        writeUpdateState({ lastCheckAt: now, dismissedVersion: latest });
+        console.log('\nUpdate ran successfully! Please restart Parallel.');
+    }
+    else {
+        console.log('\nUpdate failed. Parallel will continue with the current version.');
+    }
+    return code === 0;
+}

package/dist/version.js

@@ -0,0 +1,2 @@
+export const PACKAGE_NAME = '@parallel-cli/parallel';
+export const VERSION = '0.4.6';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallel-cli/parallel",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Real-time multi-agent coding CLI with shared context, adaptive co-editing, dedicated agent terminals, and headless CI runs.",
   "keywords": [
     "cli",