@parallel-cli/parallel 0.4.1 → 0.4.4

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, detectProviderModels, getProvider, isLocalProvider, isPlaceholderModel, 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.4';
 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 ----------
@@ -58,7 +60,7 @@ export function App({ config, initialFolder }) {
     const [modelCustom, setModelCustom] = useState(false);
     const ctlRef = useRef(directFolder ? new Controller(config, directFolder) : null);
     // ---------- main state ----------
-    const [, setTick] = useState(0);
+    const [tick, setTick] = useState(0);
     const [view, setView] = useState('agents');
     // Focus mode (/focus <agent>): plain input is routed to that agent.
     const [focus, setFocus] = useState(null);
@@ -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)
@@ -92,6 +107,12 @@ export function App({ config, initialFolder }) {
             clearInterval(timer);
         };
     }, [ctl]);
+    useEffect(() => {
+        if (!ctl || !focus)
+            return;
+        if (!ctl.board.getAgentByName(focus))
+            setFocus(null);
+    }, [ctl, focus, tick]);
     // Session server: lets `parallel attach <agent>` open per-agent terminals.
     useEffect(() => {
         if (!ctl)
@@ -132,6 +153,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 +230,32 @@ 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') {
+                const isPreset = PROVIDER_PRESETS.some((p) => p.name.toLowerCase() === providerStep.provider.name.toLowerCase());
+                setProviderStep(isPreset
+                    ? { id: 'presetModel', provider: providerStep.provider }
+                    : { id: 'customModel', name: providerStep.provider.name, url: providerStep.provider.baseUrl });
+            }
+            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 +270,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 +311,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 +326,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 +374,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;
                                     }
@@ -341,45 +400,87 @@ export function App({ config, initialFolder }) {
                                             ...ls.slice(-5),
                                             { text: t('wiz.provider.ollama.checking', { url: preset.baseUrl }), level: 'info' },
                                         ]);
-                                        let models = [...preset.models];
-                                        let defaultModel = preset.defaultModel;
-                                        try {
-                                            const controller = new AbortController();
-                                            const timeout = setTimeout(() => controller.abort(), 2000);
-                                            const resp = await fetch(preset.baseUrl + '/models', { signal: controller.signal });
-                                            clearTimeout(timeout);
-                                            if (resp.ok) {
-                                                const data = (await resp.json());
-                                                const detected = data?.data?.map((m) => m.id).filter(Boolean) ?? [];
-                                                if (detected.length > 0) {
-                                                    models = detected;
-                                                    defaultModel = detected[0];
-                                                    setSystemLines((ls) => [
-                                                        ...ls.slice(-5),
-                                                        { text: t('wiz.provider.ollama.found', { n: detected.length }), level: 'ok' },
-                                                    ]);
-                                                }
-                                            }
+                                        const detected = await detectProviderModels(preset);
+                                        let models = detected?.models ?? [...preset.models];
+                                        let defaultModel = detected?.defaultModel ?? preset.defaultModel;
+                                        if (detected) {
+                                            setSystemLines((ls) => [
+                                                ...ls.slice(-5),
+                                                { text: t('wiz.provider.ollama.found', { n: detected.models.length }), level: 'ok' },
+                                            ]);
                                         }
-                                        catch {
+                                        else {
                                             setSystemLines((ls) => [
                                                 ...ls.slice(-5),
                                                 { text: t('wiz.provider.ollama.notFound', { url: preset.baseUrl }), level: 'warn' },
                                             ]);
                                         }
                                         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) => {
+                                    const baseUrl = url.trim();
+                                    setProviderStep({
+                                        id: 'endpoint',
+                                        provider: {
+                                            ...providerStep.provider,
+                                            baseUrl,
+                                            requiresApiKey: !isLocalProvider({ baseUrl }),
+                                        },
+                                    });
+                                } }) })), 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) => {
+                                    const trimmed = model.trim();
+                                    if (isPlaceholderModel(trimmed)) {
+                                        setSystemLines((ls) => [...ls.slice(-5), { text: t('set.modelPlaceholder'), level: 'warn' }]);
+                                        return;
+                                    }
+                                    const local = isLocalProvider({ baseUrl: providerStep.url });
+                                    setProviderStep({
+                                        id: 'endpoint',
+                                        provider: {
+                                            name: providerStep.name,
+                                            baseUrl: providerStep.url,
+                                            apiKey: '',
+                                            models: [trimmed],
+                                            defaultModel: trimmed,
+                                            requiresApiKey: !local,
+                                        },
+                                    });
+                                } }) })), 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 +489,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 +503,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 +527,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)
@@ -463,8 +565,8 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
         : [];
     const [hubScroll, setHubScroll] = useState(0);
     const [hubFollowTail, setHubFollowTail] = useState(true);
-    const hubRows = Math.max(6, bodyHeight - 2);
-    const maxHubScroll = Math.max(0, agents.length - hubRows);
+    const hubRows = Math.max(3, bodyHeight - 2);
+    const maxHubScroll = Math.max(0, agents.length - Math.max(1, Math.floor(hubRows / 2)));
     const clampedHub = Math.min(hubScroll, maxHubScroll);
     const logSeq = ctl.board.logs.length > 0 ? ctl.board.logs[ctl.board.logs.length - 1].seq ?? ctl.board.logs.length : 0;
     useEffect(() => {
@@ -475,7 +577,7 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
         if (hubFollowTail)
             setHubScroll(0);
     }, [logSeq, agents.length, hubFollowTail]);
-    // Scroll helpers (also used by mouse wheel handler below).
+    // Scroll helpers.
     const scrollFocusUp = () => {
         setFocusFollowTail(false);
         setScroll((s) => Math.min(s + 1, maxScroll));
@@ -500,25 +602,23 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
             return next;
         });
     };
-    // Keyboard: Esc / PgUp-PgDn / Up-Down arrows.
-    // When CommandInput is NOT focused, Up/Down scroll the hub or focused agent;
-    // when it IS focused, CommandInput's own useInput sees them first (history nav).
+    // Keyboard: PgUp/PgDn always scroll hub/focus. Up/Down only scroll when input is inactive.
     useInput((_input, key) => {
-        if (key.escape)
+        if (key.escape && !settingsOpen)
             onEscape();
         if (focused) {
-            if (key.pageUp || key.upArrow)
+            if (key.pageUp || (!inputActive && key.upArrow))
                 scrollFocusUp();
-            if (key.pageDown || key.downArrow)
+            if (key.pageDown || (!inputActive && key.downArrow))
                 scrollFocusDown();
         }
         else if (view === 'agents') {
-            if (key.pageUp || key.upArrow)
+            if (key.pageUp || (!inputActive && key.upArrow))
                 scrollHubUp();
-            if (key.pageDown || key.downArrow)
+            if (key.pageDown || (!inputActive && key.downArrow))
                 scrollHubDown();
         }
-    }, { isActive: !inputActive });
+    }, { isActive: !approval && !question });
     const idleCount = agents.filter((a) => a.state === 'idle').length;
     const workingCount = agents.filter((a) => ['working', 'thinking', 'listening'].includes(a.state)).length;
     const doneCount = agents.filter((a) => a.state === 'done').length;
@@ -542,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 ? _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, 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 }), !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)
@@ -573,27 +673,33 @@ function groupAgents(agents) {
 function AgentHub({ agents, ctl, cols, scroll, visibleRows, }) {
     const groups = groupAgents([...agents].sort((a, b) => STATE_META[a.state].rank - STATE_META[b.state].rank || a.startedAt - b.startedAt));
     let skipped = scroll;
-    let rendered = 0;
+    let renderedAgents = 0;
+    let renderedLines = 0;
     const rows = [];
+    let full = false;
     for (const group of groups) {
-        const groupRows = [];
         for (const agent of group.agents) {
             if (skipped > 0) {
                 skipped--;
                 continue;
             }
-            if (rendered >= visibleRows)
-                continue;
-            rendered++;
-            groupRows.push(_jsx(AgentRow, { agent: agent, logs: ctl.board.logsFor(agent.id, 8), cols: cols }, agent.id));
-        }
-        if (groupRows.length === 0)
-            continue;
-        if (rows.length > 0) {
-            rows.push(_jsx(Text, { color: CHROME.separator, children: '─'.repeat(cols - 2) }, `sep-${group.title}`));
+            const needsSeparator = rows.length > 0;
+            const neededLines = 2 + (needsSeparator ? 1 : 0);
+            if (renderedLines + neededLines > visibleRows) {
+                full = true;
+                break;
+            }
+            if (needsSeparator) {
+                rows.push(_jsx(Text, { color: CHROME.separator, children: '─'.repeat(cols - 2) }, `sep-${group.title}-${agent.id}`));
+                renderedLines++;
+            }
+            renderedAgents++;
+            renderedLines += 2;
+            rows.push(_jsx(AgentRow, { agent: agent, logs: ctl.board.logsFor(agent.id, 8), cols: cols }, agent.id));
         }
-        rows.push(_jsx(Box, { flexDirection: "column", children: groupRows }, group.title));
+        if (full)
+            break;
     }
-    const below = Math.max(0, agents.length - scroll - rendered);
+    const below = Math.max(0, agents.length - scroll - renderedAgents);
     return (_jsxs(Box, { flexDirection: "column", children: [scroll > 0 ? _jsxs(Text, { color: CHROME.muted, children: ["\u25B2 ", scroll, " older \u00B7 PgDn to latest"] }) : null, rows, below > 0 ? _jsxs(Text, { color: CHROME.muted, children: ["\u25BC ", below, " more \u00B7 PgUp"] }) : null] }));
 }