@parallel-cli/parallel 0.4.4 → 0.4.6

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/Timeline.js

@@ -26,20 +26,22 @@ function itemColor(item) {
         return UI.text;
     return UI.text;
 }
-function OutputLines({ item }) {
+function OutputLines({ item, cols }) {
     if (!item.output || item.output.length === 0)
         return null;
-    return (_jsxs(Box, { flexDirection: "column", children: [item.output.map((line, i) => (_jsxs(Text, { color: item.status === 'error' ? UI.danger : UI.muted, wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: i === 0 ? '└ ' : '  ' }), truncate(line, 180)] }, `${item.seq ?? 0}-out-${i}`))), item.hiddenLines && item.hiddenLines > 0 ? (_jsxs(Text, { color: UI.muted, children: ['  ', t('timeline.hiddenLines', { count: item.hiddenLines })] })) : null] }));
+    const max = Math.max(40, cols - 8);
+    return (_jsxs(Box, { flexDirection: "column", children: [item.output.map((line, i) => (_jsxs(Text, { color: item.status === 'error' ? UI.danger : UI.muted, wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: i === 0 ? '└ ' : '  ' }), truncate(line, max)] }, `${item.seq ?? 0}-out-${i}`))), item.hiddenLines && item.hiddenLines > 0 ? (_jsxs(Text, { color: UI.muted, children: ['  ', t('timeline.hiddenLines', { count: item.hiddenLines })] })) : null] }));
 }
-function TimelineRow({ item }) {
+function TimelineRow({ item, cols }) {
+    const max = Math.max(40, cols - 8);
     if (item.kind === 'section') {
-        return _jsx(Text, { color: UI.muted, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" });
+        return _jsx(Text, { color: UI.muted, children: '─'.repeat(Math.min(Math.max(20, cols - 4), 80)) });
     }
     if (item.kind === 'narration') {
         return (_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: UI.text, wrap: "wrap", children: item.detail }) }));
     }
     if (item.kind === 'command') {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: item.status === 'error' ? UI.danger : UI.text, wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), _jsxs(Text, { bold: true, children: [t('timeline.ran'), " "] }), _jsx(Text, { color: UI.accent, children: truncate(item.command ?? '', 160) })] }), _jsx(OutputLines, { item: item })] }));
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: item.status === 'error' ? UI.danger : UI.text, wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), _jsxs(Text, { bold: true, children: [t('timeline.ran'), " "] }), _jsx(Text, { color: UI.accent, children: truncate(item.command ?? '', max) })] }), _jsx(OutputLines, { item: item, cols: cols })] }));
     }
     if (item.kind === 'files') {
         const files = item.files ?? [];
@@ -48,13 +50,13 @@ function TimelineRow({ item }) {
         return (_jsxs(Text, { color: itemColor(item), wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), _jsxs(Text, { bold: true, children: [fileLabel(item.label, files.length), " "] }), _jsxs(Text, { color: UI.muted, children: [shown, extra] })] }));
     }
     if (item.output) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: itemColor(item), wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), item.label] }), _jsx(OutputLines, { item: item })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: itemColor(item), wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), item.label] }), _jsx(OutputLines, { item: item, cols: cols })] }));
     }
-    return (_jsxs(Text, { color: itemColor(item), italic: item.kind === 'thought', wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), truncate(item.detail ? `${item.label} ${item.detail}` : item.label, 180)] }));
+    return (_jsxs(Text, { color: itemColor(item), italic: item.kind === 'thought', wrap: "truncate-end", children: [_jsx(Text, { color: UI.muted, children: "\u2022 " }), truncate(item.detail ? `${item.label} ${item.detail}` : item.label, max)] }));
 }
-export function Timeline({ logs, raw = false, emptyText }) {
+export function Timeline({ logs, raw = false, emptyText, cols = 100 }) {
     const items = presentTimeline(logs, { raw, outputLines: raw ? 10 : 6 });
     if (items.length === 0)
         return _jsx(Text, { color: UI.muted, children: emptyText ?? t('timeline.empty') });
-    return (_jsx(Box, { flexDirection: "column", children: items.map((item, i) => item.kind === 'section' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(TimelineRow, { item: item }), _jsx(Text, { color: UI.muted, children: sectionLabel(item.category) })] }, `${item.seq ?? i}-section`)) : (_jsx(TimelineRow, { item: item }, `${item.seq ?? i}-${i}`))) }));
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, i) => item.kind === 'section' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(TimelineRow, { item: item, cols: cols }), _jsx(Text, { color: UI.muted, children: sectionLabel(item.category) })] }, `${item.seq ?? i}-section`)) : (_jsx(TimelineRow, { item: item, cols: cols }, `${item.seq ?? i}-${i}`))) }));
 }

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
@@ -60,7 +86,8 @@ export function BoardView({ board, bodyHeight }) {
     const sideRows = bodyHeight ? Math.max(1, Math.floor((bodyHeight - visibleAgents - 5) / 2)) : 8;
     const activities = [...board.fileActivity.values()].sort((a, b) => b.ts - a.ts).slice(0, sideRows);
     const notes = board.notes.slice(-sideRows);
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: t('board.title') }), _jsx(Text, { bold: true, children: t('board.agents') }), agents.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.none')] })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), agentSlice.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name }), _jsxs(Text, { color: STATE_LABEL[a.state].color, children: [' ', STATE_LABEL[a.state].icon, " ", stateLabel(a.state)] }), _jsxs(Text, { color: "gray", children: [" ", truncate(a.currentAction || a.task, 110)] })] }, a.id))), _jsx(Below, { n: below })] })), _jsx(Text, { bold: true, children: t('board.activity') }), activities.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.noActivity')] })) : (activities.map((act) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', "\u270F ", act.path, " ", _jsxs(Text, { color: "gray", children: ["\u2014 ", act.agentName, " (", act.op, ", ", Math.round((Date.now() - act.ts) / 1000), "s)"] })] }, act.path)))), _jsx(Text, { bold: true, children: t('board.notes') }), notes.map((n) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magenta", children: [n.from, " \u2192 ", n.to] }), _jsxs(Text, { children: [": ", truncate(n.content, 140)] })] }, n.id)))] }));
+    const warnings = board.workMapWarnings.slice(-Math.max(2, Math.min(4, sideRows)));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: t('board.title') }), _jsx(Text, { bold: true, children: t('board.agents') }), agents.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.none')] })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), agentSlice.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name }), _jsxs(Text, { color: STATE_LABEL[a.state].color, children: [' ', STATE_LABEL[a.state].icon, " ", stateLabel(a.state)] }), _jsxs(Text, { color: "gray", children: [" ", truncate(a.currentAction || a.task, 80)] }), a.claims && a.claims.length > 0 ? _jsxs(Text, { color: "yellow", children: [" \u00B7 ", truncate(a.claims.join(', '), 45)] }) : null] }, a.id))), _jsx(Below, { n: below })] })), _jsx(Text, { bold: true, children: t('board.activity') }), warnings.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "yellowBright", children: t('board.workMap') }), warnings.map((w) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: w.level === 'conflict' ? 'redBright' : 'yellow', children: [w.level === 'conflict' ? '!' : '⚠', " "] }), _jsx(Text, { color: "yellow", children: w.title }), _jsxs(Text, { color: "gray", children: [" \u2014 ", truncate(w.detail, 120)] })] }, w.id)))] })) : null, activities.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.noActivity')] })) : (activities.map((act) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', "\u270F ", act.path, " ", _jsxs(Text, { color: "gray", children: ["\u2014 ", act.agentName, " (", act.op, ", ", Math.round((Date.now() - act.ts) / 1000), "s)"] })] }, act.path)))), _jsx(Text, { bold: true, children: t('board.notes') }), notes.map((n) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magenta", children: [n.from, " \u2192 ", n.to] }), _jsxs(Text, { children: [": ", truncate(n.content, 140)] })] }, n.id)))] }));
 }
 export function NotesView({ board, bodyHeight }) {
     const fallbackVisible = useVisibleRows(7);
@@ -78,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. */
@@ -89,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 }) {
@@ -117,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.4",
+  "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",