@parallel-cli/parallel 0.4.1 → 0.4.3

package/dist/ui/App.js

@@ -6,7 +6,7 @@ import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { Controller } from '../controller.js';
 import { startSessionServer } from '../server.js';
 import { executeInput } from '../commands.js';
-import { PROVIDER_PRESETS, getProvider, rememberFolder, saveConfig } from '../config.js';
+import { PROVIDER_PRESETS, getProvider, providerNeedsApiKey, providerReady, rememberFolder, saveConfig } from '../config.js';
 import { LANGS, setLang, t } from '../i18n.js';
 import { AgentRow, AgentTranscript } from './AgentPanel.js';
 import { ApprovalPrompt } from './ApprovalPrompt.js';
@@ -17,11 +17,11 @@ import { BoardView, CostView, DiffView, HelpView, NotesView, SessionsView, Skill
 import { SelectList, WizardStep } from './Wizard.js';
 import { BRAND, CHROME, STATE, STATE_META, UI, middleTruncate } from './tokens.js';
 const LOGO = 'Parallel';
-// Version from package.json (v0.3.3). Hardcoded — rootDir: "src" prevents importing ../../package.json.
-const VERSION = '0.3.3';
+// Version from package.json. Hardcoded — rootDir: "src" prevents importing ../../package.json.
+const VERSION = '0.4.3';
 function usableProvider(config) {
     const p = getProvider(config);
-    return p && p.apiKey && (p.defaultModel || p.models[0]) ? p : undefined;
+    return p && providerReady(p) && (p.defaultModel || p.models[0]) ? p : undefined;
 }
 function normalizeFolder(p) {
     return path.resolve(p.replace(/^~(?=$|\/)/, process.env.HOME ?? '~'));
@@ -47,6 +47,8 @@ function startupFolder(config, initialFolder) {
 }
 export function App({ config, initialFolder }) {
     const { exit } = useApp();
+    const { stdout } = useStdout();
+    const wizardListHeight = Math.max(4, (stdout?.rows ?? 30) - 10);
     const initialUsableProvider = usableProvider(config);
     const directFolder = config.language && initialUsableProvider ? startupFolder(config, initialFolder) : null;
     // ---------- wizard state ----------
@@ -71,6 +73,19 @@ export function App({ config, initialFolder }) {
         : []);
     const [inputReady, setInputReady] = useState(Boolean(directFolder));
     const ctl = ctlRef.current;
+    const leaveCurrentProject = () => {
+        const current = ctlRef.current;
+        current?.saveSession();
+        current?.stopAll();
+        setFocus(null);
+        setView('agents');
+        setRawLogs(false);
+        setProviderStep({ id: 'pick' });
+        setModelCustom(false);
+        setWizardError('');
+        setSessions([]);
+        setInputReady(false);
+    };
     // Re-render (throttled) on every blackboard/controller update.
     useEffect(() => {
         if (!ctl)
@@ -132,6 +147,22 @@ export function App({ config, initialFolder }) {
                 { text: t('m.copyDone', { name: latest.name }), level: 'ok' },
             ]);
         },
+        openProject: (nextFolder) => {
+            leaveCurrentProject();
+            if (nextFolder) {
+                chooseFolder(nextFolder);
+                return;
+            }
+            ctlRef.current = null;
+            setFolder('');
+            setPhase('folder');
+        },
+        openWizard: () => {
+            leaveCurrentProject();
+            ctlRef.current = null;
+            setFolder('');
+            setPhase('lang');
+        },
     }), [exit]);
     // ---------- wizard transitions ----------
     // In normal launches, a complete config goes straight to the main TUI.
@@ -193,20 +224,29 @@ export function App({ config, initialFolder }) {
             if (providerStep.id === 'pick') {
                 setPhase(sessions.length > 0 ? 'session' : 'folder');
             }
-            else if (providerStep.id === 'key') {
+            else if (providerStep.id === 'presetModel') {
                 setProviderStep({ id: 'pick' });
             }
+            else if (providerStep.id === 'endpoint') {
+                setProviderStep({ id: 'presetModel', provider: providerStep.provider });
+            }
+            else if (providerStep.id === 'editEndpoint') {
+                setProviderStep({ id: 'endpoint', provider: providerStep.provider });
+            }
+            else if (providerStep.id === 'key') {
+                setProviderStep({ id: 'endpoint', provider: providerStep.provider });
+            }
             else if (providerStep.id === 'name') {
                 setProviderStep({ id: 'pick' });
             }
             else if (providerStep.id === 'url') {
                 setProviderStep({ id: 'name' });
             }
-            else if (providerStep.id === 'model') {
+            else if (providerStep.id === 'customModel') {
                 setProviderStep({ id: 'url', name: providerStep.name });
             }
             else if (providerStep.id === 'newKey') {
-                setProviderStep({ id: 'model', name: providerStep.name, url: providerStep.url });
+                setProviderStep({ id: 'customModel', name: providerStep.provider.name, url: providerStep.provider.baseUrl });
             }
         }
     };
@@ -221,6 +261,9 @@ export function App({ config, initialFolder }) {
     const finishProvider = (p) => {
         ctlRef.current?.saveProvider(p);
         ctlRef.current?.setDefaultProvider(p.name);
+        ctlRef.current?.setSessionProvider(p.name);
+        if (p.defaultModel || p.models[0])
+            ctlRef.current?.setSessionModel(`${p.name}:${p.defaultModel || p.models[0]}`);
         setProviderStep({ id: 'pick' });
         enterMain();
     };
@@ -259,12 +302,12 @@ 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 })), 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: "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: [
                                         { label: process.cwd(), value: process.cwd(), hint: t('wiz.folder.current') },
                                         ...config.recentFolders
                                             .filter((f) => f !== process.cwd())
                                             .map((f) => ({ label: f, value: f, hint: t('wiz.folder.recent') })),
-                                    ], allowInput: true, inputPlaceholder: t('wiz.folder.input'), onBack: wizardBack, onSelect: chooseFolder, onInput: chooseFolder })] })), phase === 'session' && (_jsx(WizardStep, { step: 3, total: totalSteps, title: t('wiz.session.title'), children: _jsx(SelectList, { items: [
+                                    ], height: wizardListHeight, allowInput: true, inputPlaceholder: t('wiz.folder.input'), onBack: wizardBack, onSelect: chooseFolder, onInput: chooseFolder })] })), phase === 'session' && (_jsx(WizardStep, { step: 3, total: totalSteps, title: t('wiz.session.title'), children: _jsx(SelectList, { items: [
                                     { label: t('wiz.session.new'), value: '__new__', hint: t('wiz.session.newHint') },
                                     ...sessions.map((s) => ({
                                         label: t('wiz.session.item', { date: new Date(s.data.savedAt).toLocaleString() }),
@@ -274,39 +317,46 @@ export function App({ config, initialFolder }) {
                                             .join(', ')
                                             .slice(0, 60)})`,
                                     })),
-                                ], onBack: wizardBack, onSelect: chooseSession }) })), phase === 'provider' && providerStep.id === 'pick' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.title'), children: _jsx(SelectList, { items: (() => {
+                                ], height: wizardListHeight, onBack: wizardBack, onSelect: chooseSession }) })), phase === 'provider' && providerStep.id === 'pick' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.title'), children: _jsx(SelectList, { items: (() => {
                                     const items = [];
+                                    const configuredNames = new Set(config.providers.map((p) => p.name.toLowerCase()));
                                     // Section: Configured
-                                    const configured = config.providers.map((p) => ({
-                                        label: p.name,
-                                        value: p.name,
-                                        detail: p.apiKey ? undefined : t('wiz.provider.needsKey'),
-                                    }));
-                                    if (configured.length > 0) {
+                                    if (config.providers.length > 0) {
                                         items.push({ label: t('wiz.provider.section.configured'), value: '', section: true });
-                                        items.push(...configured);
-                                    }
-                                    // Section: Cloud Providers (presets except Ollama, not already configured)
-                                    const cloudPresets = PROVIDER_PRESETS.filter((preset) => preset.name !== 'Ollama' &&
-                                        !config.providers.some((p) => p.name.toLowerCase() === preset.name.toLowerCase()));
-                                    if (cloudPresets.length > 0) {
-                                        items.push({ label: t('wiz.provider.section.cloud'), value: '', section: true });
-                                        items.push(...cloudPresets.map((preset) => ({
-                                            label: preset.name,
-                                            value: preset.name,
-                                            detail: preset.defaultModel,
-                                        })));
+                                        for (const p of config.providers) {
+                                            items.push({
+                                                label: p.name,
+                                                value: p.name,
+                                                detail: p.apiKey ? undefined : t('wiz.provider.needsKey'),
+                                            });
+                                        }
                                     }
-                                    // Section: Local (Ollama only, if not already configured)
-                                    const ollamaPreset = PROVIDER_PRESETS.find((p) => p.name === 'Ollama');
-                                    const ollamaConfigured = config.providers.some((p) => p.name.toLowerCase() === 'ollama');
-                                    if (ollamaPreset && !ollamaConfigured) {
-                                        items.push({ label: t('wiz.provider.section.local'), value: '', section: true });
-                                        items.push({
-                                            label: ollamaPreset.name,
-                                            value: ollamaPreset.name,
-                                            detail: t('wiz.provider.ollamaDetail'),
-                                        });
+                                    // Sections per category: western, chinese, gateways, inference, local
+                                    const catOrder = ['western', 'chinese', 'gateways', 'inference', 'local'];
+                                    const emoji = {
+                                        western: '\u{1F1FA}\u{1F1F8} ',
+                                        chinese: '\u{1F1E8}\u{1F1F3} ',
+                                        gateways: '\u{1F310} ',
+                                        inference: '\u26A1 ',
+                                        local: '\u{1F3E0} ',
+                                    };
+                                    for (const cat of catOrder) {
+                                        const presetsInCat = PROVIDER_PRESETS.filter((p) => p.category === cat && !configuredNames.has(p.name.toLowerCase()));
+                                        if (presetsInCat.length === 0)
+                                            continue;
+                                        const key = `wiz.provider.section.${cat}`;
+                                        const sectionLabel = emoji[cat] + t(key);
+                                        items.push({ value: '', label: sectionLabel, section: true });
+                                        for (const preset of presetsInCat) {
+                                            const detail = preset.models.length > 0
+                                                ? `${preset.models.length} model${preset.models.length > 1 ? 's' : ''}`
+                                                : undefined;
+                                            items.push({
+                                                value: preset.name,
+                                                label: preset.name,
+                                                detail,
+                                            });
+                                        }
                                     }
                                     // Custom always last
                                     items.push({
@@ -315,19 +365,19 @@ export function App({ config, initialFolder }) {
                                         detail: t('wiz.provider.customDetail'),
                                     });
                                     return items;
-                                })(), onBack: wizardBack, onSelect: async (v) => {
+                                })(), height: wizardListHeight, onBack: wizardBack, onSelect: async (v) => {
                                     if (v === '__custom__')
                                         return setProviderStep({ id: 'name' });
                                     // Already-configured provider?
                                     const existing = config.providers.find((x) => x.name === v);
                                     if (existing) {
-                                        if (existing.apiKey) {
+                                        if (providerReady(existing)) {
                                             ctlRef.current?.setDefaultProvider(v);
                                             ctlRef.current?.setSessionProvider(v);
-                                            enterMain();
+                                            setPhase('model');
                                         }
                                         else {
-                                            setProviderStep({ id: 'key', preset: existing });
+                                            setProviderStep({ id: 'presetModel', provider: existing });
                                         }
                                         return;
                                     }
@@ -368,18 +418,52 @@ export function App({ config, initialFolder }) {
                                             ]);
                                         }
                                         const ollamaProvider = { ...preset, apiKey: 'ollama-local', models, defaultModel };
-                                        ctlRef.current?.saveProvider(ollamaProvider);
-                                        ctlRef.current?.setSessionProvider(ollamaProvider.name);
-                                        setPhase('model');
+                                        setProviderStep({ id: 'presetModel', provider: ollamaProvider });
                                         return;
                                     }
-                                    setProviderStep({ id: 'key', preset: { ...preset, models: [...preset.models] } });
-                                } }) })), phase === 'provider' && providerStep.id === 'key' && (_jsxs(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.key.title', { name: providerStep.preset.name }), footer: t('wiz.provider.key.footer'), children: [_jsx(Text, { color: "gray", children: providerStep.preset.baseUrl }), _jsx(SelectList, { items: [], allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onBack: wizardBack, onInput: (k) => finishProvider({ ...providerStep.preset, apiKey: k.trim() }) })] })), phase === 'provider' && providerStep.id === 'name' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.name.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.name.ph'), onBack: wizardBack, onInput: (name) => setProviderStep({ id: 'url', name }) }) })), phase === 'provider' && providerStep.id === 'url' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.url.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.url.ph'), onBack: wizardBack, onInput: (url) => setProviderStep({ id: 'model', name: providerStep.name, url }) }) })), phase === 'provider' && providerStep.id === 'model' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.model.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onInput: (model) => setProviderStep({ id: 'newKey', name: providerStep.name, url: providerStep.url, model }) }) })), phase === 'provider' && providerStep.id === 'newKey' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.key.title', { name: providerStep.name }), footer: t('wiz.provider.key.footer'), children: _jsx(SelectList, { items: [], allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onBack: wizardBack, onInput: (key) => finishProvider({
-                                    name: providerStep.name,
-                                    baseUrl: providerStep.url,
+                                    setProviderStep({ id: 'presetModel', provider: { ...preset, models: [...preset.models] } });
+                                } }) })), phase === 'provider' && providerStep.id === 'presetModel' && (_jsxs(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.model.title'), children: [_jsx(Text, { color: "gray", children: t('wiz.model.provider', { name: providerStep.provider.name, url: providerStep.provider.baseUrl }) }), _jsx(SelectList, { items: [
+                                        ...providerStep.provider.models.map((m) => ({
+                                            label: m,
+                                            value: m,
+                                            hint: m === providerStep.provider.defaultModel ? t('wiz.model.default') : undefined,
+                                        })),
+                                    ], height: wizardListHeight, allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onSelect: (v) => {
+                                        const provider = { ...providerStep.provider };
+                                        provider.defaultModel = v;
+                                        if (!provider.models.includes(v))
+                                            provider.models.push(v);
+                                        setProviderStep({ id: 'endpoint', provider });
+                                    }, onInput: (m) => {
+                                        const model = m.trim();
+                                        if (!model)
+                                            return;
+                                        const provider = { ...providerStep.provider, models: [...providerStep.provider.models] };
+                                        provider.defaultModel = model;
+                                        if (!provider.models.includes(model))
+                                            provider.models.push(model);
+                                        setProviderStep({ id: 'endpoint', provider });
+                                    } })] })), phase === 'provider' && providerStep.id === 'endpoint' && (_jsxs(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.endpoint.title', { name: providerStep.provider.name }), children: [_jsx(Text, { color: "gray", children: providerStep.provider.baseUrl }), _jsx(Text, { color: "gray", children: t('wiz.provider.endpoint.model', { model: providerStep.provider.defaultModel || providerStep.provider.models[0] || '—' }) }), _jsx(SelectList, { items: [
+                                        { label: t('wiz.provider.endpoint.use'), value: 'use' },
+                                        { label: t('wiz.provider.endpoint.edit'), value: 'edit' },
+                                    ], height: wizardListHeight, onBack: wizardBack, onSelect: (v) => {
+                                        if (v === 'edit')
+                                            return setProviderStep({ id: 'editEndpoint', provider: providerStep.provider });
+                                        if (providerNeedsApiKey(providerStep.provider))
+                                            return setProviderStep({ id: 'key', provider: providerStep.provider });
+                                        finishProvider(providerStep.provider);
+                                    } })] })), phase === 'provider' && providerStep.id === 'editEndpoint' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.url.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, inputPlaceholder: providerStep.provider.baseUrl, onBack: wizardBack, onInput: (url) => setProviderStep({ id: 'endpoint', provider: { ...providerStep.provider, baseUrl: url.trim() } }) }) })), phase === 'provider' && providerStep.id === 'key' && (_jsxs(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.key.title', { name: providerStep.provider.name }), footer: t('wiz.provider.key.footer'), children: [_jsx(Text, { color: "gray", children: providerStep.provider.baseUrl }), _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onBack: wizardBack, onInput: (k) => finishProvider({ ...providerStep.provider, apiKey: k.trim() }) })] })), phase === 'provider' && providerStep.id === 'name' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.name.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, inputPlaceholder: t('wiz.provider.name.ph'), onBack: wizardBack, onInput: (name) => setProviderStep({ id: 'url', name }) }) })), phase === 'provider' && providerStep.id === 'url' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.url.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, inputPlaceholder: t('wiz.provider.url.ph'), onBack: wizardBack, onInput: (url) => setProviderStep({ id: 'customModel', name: providerStep.name, url }) }) })), phase === 'provider' && providerStep.id === 'customModel' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.model.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onInput: (model) => setProviderStep({
+                                    id: 'newKey',
+                                    provider: {
+                                        name: providerStep.name,
+                                        baseUrl: providerStep.url,
+                                        apiKey: '',
+                                        models: [model.trim()],
+                                        defaultModel: model.trim(),
+                                    },
+                                }) }) })), phase === 'provider' && providerStep.id === 'newKey' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.key.title', { name: providerStep.provider.name }), footer: t('wiz.provider.key.footer'), children: _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onBack: wizardBack, onInput: (key) => finishProvider({
+                                    ...providerStep.provider,
                                     apiKey: key.trim(),
-                                    models: [providerStep.model],
-                                    defaultModel: providerStep.model,
                                 }) }) })), phase === 'model' && !modelCustom && sessionProvider && (_jsxs(WizardStep, { step: 5, total: totalSteps, title: t('wiz.model.title'), children: [_jsx(Text, { color: "gray", children: t('wiz.model.provider', { name: sessionProvider.name, url: sessionProvider.baseUrl }) }), _jsx(SelectList, { items: [
                                         ...sessionProvider.models.map((m) => ({
                                             label: m,
@@ -388,7 +472,7 @@ export function App({ config, initialFolder }) {
                                         })),
                                         { label: t('wiz.model.custom'), value: '__custom__', hint: t('wiz.model.customHint') },
                                         { label: t('wiz.model.addProvider'), value: '__provider__' },
-                                    ], onBack: wizardBack, onSelect: chooseModel })] })), phase === 'model' && modelCustom && (_jsx(WizardStep, { step: 5, total: totalSteps, title: t('wiz.model.customTitle'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onInput: (m) => {
+                                    ], height: wizardListHeight, onBack: wizardBack, onSelect: chooseModel })] })), phase === 'model' && modelCustom && (_jsx(WizardStep, { step: 5, total: totalSteps, title: t('wiz.model.customTitle'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], height: wizardListHeight, allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onInput: (m) => {
                                     setModelCustom(false);
                                     chooseModel(m);
                                 } }) }))] })] }));
@@ -402,7 +486,8 @@ export function App({ config, initialFolder }) {
     const approval = ctl.approvals[0];
     const question = approval ? undefined : ctl.questions[0]; // approvals take priority
     const settingsOpen = view === 'settings' || view === 'settings-session';
-    const inputActive = inputReady && !approval && !question && !settingsOpen;
+    const viewOwnsKeyboard = view !== 'agents' && !settingsOpen;
+    const inputActive = inputReady && !approval && !question && !settingsOpen && !viewOwnsKeyboard;
     return (_jsx(MainScreen, { ctl: ctl, folder: folder, view: view, focus: focus, rawLogs: rawLogs, systemLines: systemLines, agentNames: agentNames, approval: approval, question: question, inputActive: inputActive, onInput: (value, images) => {
             const v = value.trim();
             // Focus mode: plain text goes straight to the focused agent.
@@ -425,8 +510,8 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
     const agents = [...ctl.board.agents.values()];
     // Adapt the layout to the REAL terminal size (never resize the user's terminal).
     const { stdout } = useStdout();
-    const cols = stdout?.columns ?? 100;
-    const rows = stdout?.rows ?? 30;
+    const cols = Math.max(20, stdout?.columns ?? 100);
+    const rows = Math.max(12, stdout?.rows ?? 30);
     const settingsOpen = view === 'settings' || view === 'settings-session';
     // Height budget: fixed sections → body gets the remainder.
     const headerLines = 4; // border-box header (top border + 2 content lines + bottom border)
@@ -542,7 +627,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 ? _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", onClose: onEscape })) : view === 'settings-session' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "session", onClose: onEscape })) : view === 'board' ? (_jsx(BoardView, { board: ctl.board })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills() })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists() })) : view === 'help' ? (_jsx(HelpView, {})) : 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 }), !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: 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 ? _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 })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills() })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists() })) : 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 }), !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)

package/dist/ui/CommandInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { matchCommands } from '../commands.js';
 import { t } from '../i18n.js';
@@ -43,6 +43,7 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
     const [attachments, setAttachments] = useState([]);
     const [history, setHistory] = useState([]);
     const [histIdx, setHistIdx] = useState(-1);
+    const [selectedSuggestion, setSelectedSuggestion] = useState(0);
     const attSeq = useRef(0);
     const reset = () => {
         setValue('');
@@ -62,7 +63,8 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
         const images = attachments.filter((a) => a.kind === 'image');
         if (!full && images.length === 0)
             return;
-        setHistory((h) => [...h.slice(-49), v]);
+        if (!full.toLowerCase().startsWith('/key '))
+            setHistory((h) => [...h.slice(-49), v]);
         setHistIdx(-1);
         reset();
         onSubmit(full, images.length > 0 ? images.map((i) => i.dataUri) : undefined);
@@ -85,19 +87,30 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
         setAttachments((arr) => [...arr, { kind: 'image', n, dataUri: img.dataUri, label: img.label }]);
         notify?.(t('input.imageAdded'));
     };
+    const cmdSuggestions = value.startsWith('/') && !value.includes(' ') ? matchCommands(value).slice(0, 10) : [];
+    const agentSuggestions = value.startsWith('@') && !value.includes(' ')
+        ? ['all', ...agentNames].filter((n) => n.toLowerCase().startsWith(value.slice(1).toLowerCase())).slice(0, 8)
+        : [];
+    const suggestionCount = cmdSuggestions.length > 0 ? cmdSuggestions.length : agentSuggestions.length;
+    const hasSuggestions = suggestionCount > 0;
+    const exactCommand = cmdSuggestions.some((c) => c.name === value.toLowerCase() || c.aliases?.some((a) => a === value.toLowerCase()));
+    useEffect(() => {
+        setSelectedSuggestion(0);
+    }, [value]);
+    useEffect(() => {
+        if (selectedSuggestion >= suggestionCount)
+            setSelectedSuggestion(Math.max(0, suggestionCount - 1));
+    }, [selectedSuggestion, suggestionCount]);
     const completeBest = () => {
-        const cmd = bestCommandCompletion(value);
-        if (cmd) {
-            setValue(cmd);
+        if (cmdSuggestions.length > 0) {
+            const cmd = cmdSuggestions[Math.min(selectedSuggestion, cmdSuggestions.length - 1)];
+            setValue(`${cmd.name} `);
             return true;
         }
-        if (value.startsWith('@')) {
-            const frag = value.slice(1).toLowerCase();
-            const m = ['all', ...agentNames].find((n) => n.toLowerCase().startsWith(frag));
-            if (m) {
-                setValue('@' + m + ' ');
-                return true;
-            }
+        if (agentSuggestions.length > 0) {
+            const agent = agentSuggestions[Math.min(selectedSuggestion, agentSuggestions.length - 1)];
+            setValue('@' + agent + ' ');
+            return true;
         }
         return false;
     };
@@ -110,6 +123,10 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
             return;
         }
         if (key.return) {
+            if (hasSuggestions && !exactCommand) {
+                completeBest();
+                return;
+            }
             submit(value);
             return;
         }
@@ -126,6 +143,10 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
             return;
         }
         if (key.upArrow) {
+            if (hasSuggestions) {
+                setSelectedSuggestion((i) => (i - 1 + suggestionCount) % suggestionCount);
+                return;
+            }
             setHistIdx((i) => {
                 const ni = i === -1 ? history.length - 1 : Math.max(0, i - 1);
                 if (history[ni] !== undefined)
@@ -135,6 +156,10 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
             return;
         }
         if (key.downArrow) {
+            if (hasSuggestions) {
+                setSelectedSuggestion((i) => (i + 1) % suggestionCount);
+                return;
+            }
             setHistIdx((i) => {
                 if (i === -1)
                     return -1;
@@ -183,13 +208,13 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
         }
         setValue((v) => v + input);
     }, { isActive: active });
-    const cmdSuggestions = value.startsWith('/') && !value.includes(' ') ? matchCommands(value).slice(0, 10) : [];
-    const agentSuggestions = value.startsWith('@') && !value.includes(' ')
-        ? ['all', ...agentNames].filter((n) => n.toLowerCase().startsWith(value.slice(1).toLowerCase())).slice(0, 8)
-        : [];
     const shown = mask ? '•'.repeat(value.length) : value;
     const byName = new Map(agents.flatMap((a) => [[a.name, a], [a.alias, a]]));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", wrap: "truncate-end", children: modeHint(value) }), 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) => (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: 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) => (_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["@", n.padEnd(10)] }), _jsx(Text, { color: "gray", children: n === 'all'
+    const commandIndexes = new Map(cmdSuggestions.map((c, i) => [c.name, i]));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", wrap: "truncate-end", children: modeHint(value) }), 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'
                                 ? 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 })] }))] })] }));
 }