@parallel-cli/parallel 0.4.3 → 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, providerNeedsApiKey, providerReady, 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';
@@ -18,7 +18,7 @@ import { SelectList, WizardStep } from './Wizard.js';
 import { BRAND, CHROME, STATE, STATE_META, UI, middleTruncate } from './tokens.js';
 const LOGO = 'Parallel';
 // Version from package.json. Hardcoded — rootDir: "src" prevents importing ../../package.json.
-const VERSION = '0.4.3';
+const VERSION = '0.4.4';
 function usableProvider(config) {
     const p = getProvider(config);
     return p && providerReady(p) && (p.defaultModel || p.models[0]) ? p : undefined;
@@ -60,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);
@@ -107,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)
@@ -228,7 +234,10 @@ export function App({ config, initialFolder }) {
                 setProviderStep({ id: 'pick' });
             }
             else if (providerStep.id === 'endpoint') {
-                setProviderStep({ id: 'presetModel', provider: providerStep.provider });
+                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 });
@@ -391,27 +400,16 @@ 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' },
@@ -452,16 +450,35 @@ export function App({ config, initialFolder }) {
                                         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({
+                                    } })] })), 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(),
                                 }) }) })), 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: [
@@ -548,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(() => {
@@ -560,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));
@@ -585,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;
@@ -627,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", 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
+    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)
@@ -658,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] }));
 }

package/dist/ui/SettingsPanel.js

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { Box, Text } from 'ink';
 import { createSkillTemplate, createSpecialistTemplate } from '../skills.js';
 import { priceFor } from '../pricing.js';
-import { SelectList } from './Wizard.js';
+import { SelectList as BaseSelectList } from './Wizard.js';
 import { LANGS, getLang, setLang, t } from '../i18n.js';
-import { providerNeedsApiKey, PROVIDER_PRESETS } from '../config.js';
+import { detectProviderModels, isLocalProvider, isPlaceholderModel, providerNeedsApiKey, PROVIDER_PRESETS } from '../config.js';
 function masked(key) {
     if (!key)
         return '—';
@@ -39,6 +39,16 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
     const saved = () => setFlash(t('set.saved'));
     const cfg = ctl.config;
     const listHeight = height ? Math.max(3, height - 5) : undefined;
+    const goBack = () => {
+        if (step.id === 'root')
+            return onClose();
+        setStep(returnStep ?? { id: 'root' });
+        setReturnStep(null);
+    };
+    const SelectList = (props) => {
+        const { onBack, ...rest } = props;
+        return _jsx(BaseSelectList, { ...rest, onBack: onBack ?? goBack });
+    };
     // ---- root menu items ----
     const rootItems = scope === 'global'
         ? [
@@ -103,6 +113,10 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
     };
     // ---- shared helpers ----
     const pickModel = (provider, model) => {
+        if (isPlaceholderModel(model)) {
+            setFlash(t('set.modelPlaceholder'));
+            return;
+        }
         if (step.id === 'model' && step.setup) {
             provider.defaultModel = model;
             if (!provider.models.includes(model))
@@ -124,23 +138,25 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
         setStep(returnStep ?? { id: 'root' });
         setReturnStep(null);
     };
-    const finishProviderSetup = (provider) => {
-        ctl.saveProvider(provider);
-        if (scope === 'global') {
-            ctl.setDefaultProvider(provider.name);
-            saved();
+    const finishProviderSetup = (provider, persist = scope === 'global') => {
+        if (persist) {
+            ctl.saveProvider(provider);
+            if (scope === 'global') {
+                ctl.setDefaultProvider(provider.name);
+                saved();
+            }
+            else {
+                ctl.setSessionModel(`${provider.name}:${provider.defaultModel || provider.models[0] || ''}`);
+                setFlash(t('set.saved'));
+            }
         }
         else {
-            ctl.setSessionModel(`${provider.name}:${provider.defaultModel || provider.models[0] || ''}`);
+            ctl.setSessionProviderConfig(provider);
+            setFlash(t('set.sessionProviderReady', { name: provider.name }));
         }
         setStep(returnStep ?? { id: 'providers', scope });
         setReturnStep(null);
     };
-    const finishNewProvider = (name, url, model, key) => {
-        finishProviderSetup({ name, baseUrl: url, apiKey: key, models: [model], defaultModel: model });
-        setStep(returnStep ?? { id: 'root' });
-        setReturnStep(null);
-    };
     // ---- navigate into a sub-step, remembering where to return ----
     const goSub = (next) => {
         setReturnStep(step);
@@ -194,6 +210,8 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
                                     if (step.setup) {
                                         if (providerNeedsApiKey(step.provider))
                                             return setStep({ id: 'key', provider: step.provider, setup: true });
+                                        if (scope === 'session')
+                                            return setStep({ id: 'setupScope', provider: step.provider });
                                         finishProviderSetup(step.provider);
                                         return;
                                     }
@@ -201,6 +219,14 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
                                     saved();
                                     setStep(returnStep ?? { id: 'providerDetail', provider: step.provider, scope });
                                     setReturnStep(null);
+                                } })] })), step.id === 'setupScope' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('set.setupScope.title', { name: step.provider.name }) }), _jsx(SelectList, { items: [
+                                    { label: t('set.setupScope.session'), value: 'session' },
+                                    { label: t('set.setupScope.global'), value: 'global' },
+                                    { label: t('set.back'), value: '__back__' },
+                                ], height: listHeight, onSelect: (v) => {
+                                    if (v === '__back__')
+                                        return setStep({ id: 'endpoint', provider: step.provider, setup: true });
+                                    finishProviderSetup(step.provider, v === 'global');
                                 } })] })), step.id === 'editEndpoint' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.url.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: step.provider.baseUrl, onInput: (url) => {
                                     const provider = { ...step.provider, baseUrl: url.trim() };
                                     setStep({ id: 'endpoint', provider, setup: step.setup });
@@ -268,15 +294,40 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
                                     setReturnStep(null);
                                 } })] })), step.id === 'key' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.key.title', { name: step.provider.name }) }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onInput: (k) => {
                                     const provider = { ...step.provider, apiKey: k.trim() };
-                                    if (step.setup)
+                                    if (step.setup) {
+                                        if (scope === 'session') {
+                                            setStep({ id: 'setupScope', provider });
+                                            return;
+                                        }
                                         finishProviderSetup(provider);
+                                        return;
+                                    }
                                     else {
                                         ctl.saveProvider(provider);
                                         saved();
                                     }
                                     setStep(returnStep ?? { id: 'root' });
                                     setReturnStep(null);
-                                } })] })), step.id === 'newName' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.name.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: t('wiz.provider.name.ph'), onInput: (name) => setStep({ id: 'newUrl', name }) })] })), step.id === 'newUrl' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.url.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: t('wiz.provider.url.ph'), onInput: (url) => setStep({ id: 'newModel', name: step.name, url }) })] })), step.id === 'newModel' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.model.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onInput: (model) => setStep({ id: 'newKey', name: step.name, url: step.url, model }) })] })), step.id === 'newKey' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.key.title', { name: step.name }) }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onInput: (key) => finishNewProvider(step.name, step.url, step.model, key.trim()) })] })), step.id === 'newSkill' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('set.newSkillName') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: "review, deploy, tests\u2026", onInput: (name) => {
+                                } })] })), step.id === 'newName' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.name.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: t('wiz.provider.name.ph'), onInput: (name) => setStep({ id: 'newUrl', name }) })] })), step.id === 'newUrl' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.url.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: t('wiz.provider.url.ph'), onInput: (url) => setStep({ id: 'newModel', name: step.name, url }) })] })), step.id === 'newModel' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.model.title') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onInput: (model) => {
+                                    const trimmed = model.trim();
+                                    if (isPlaceholderModel(trimmed)) {
+                                        setFlash(t('set.modelPlaceholder'));
+                                        return;
+                                    }
+                                    const local = isLocalProvider({ baseUrl: step.url });
+                                    setStep({
+                                        id: 'endpoint',
+                                        setup: true,
+                                        provider: {
+                                            name: step.name,
+                                            baseUrl: step.url,
+                                            apiKey: '',
+                                            models: [trimmed],
+                                            defaultModel: trimmed,
+                                            requiresApiKey: !local,
+                                        },
+                                    });
+                                } })] })), step.id === 'newKey' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('wiz.provider.key.title', { name: step.name }) }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onInput: (key) => finishProviderSetup({ name: step.name, baseUrl: step.url, apiKey: key.trim(), models: [step.model], defaultModel: step.model }) })] })), step.id === 'newSkill' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: t('set.newSkillName') }), _jsx(SelectList, { items: [], height: listHeight, allowInput: true, inputPlaceholder: "review, deploy, tests\u2026", onInput: (name) => {
                                     try {
                                         const file = createSkillTemplate(name.trim(), '', 'global', ctl.projectRoot);
                                         setFlash(t('m.skillCreated', { file }));
@@ -355,9 +406,26 @@ export function SettingsPanel({ ctl, scope, height, onClose, }) {
                                         const preset = PROVIDER_PRESETS.find((p) => p.name === presetName);
                                         if (!preset)
                                             return;
-                                        if (presetName.toLowerCase() === 'ollama') {
-                                            setReturnStep({ id: 'providers', scope: step.scope });
-                                            return setStep({ id: 'model', provider: { ...preset, apiKey: 'ollama-local' }, setup: true });
+                                        if (preset.category === 'local') {
+                                            setFlash(t('wiz.provider.ollama.checking', { url: preset.baseUrl }));
+                                            void (async () => {
+                                                const detected = await detectProviderModels(preset);
+                                                setFlash(detected
+                                                    ? t('wiz.provider.ollama.found', { n: detected.models.length })
+                                                    : t('wiz.provider.ollama.notFound', { url: preset.baseUrl }));
+                                                setReturnStep({ id: 'providers', scope: step.scope });
+                                                setStep({
+                                                    id: 'model',
+                                                    provider: {
+                                                        ...preset,
+                                                        apiKey: 'local',
+                                                        models: detected?.models ?? [...preset.models],
+                                                        defaultModel: detected?.defaultModel ?? preset.defaultModel,
+                                                    },
+                                                    setup: true,
+                                                });
+                                            })();
+                                            return;
                                         }
                                         // Preset setup: choose model, review endpoint, then ask for API key if needed.
                                         setReturnStep({ id: 'providers', scope: step.scope });

package/dist/ui/views.js

@@ -52,20 +52,27 @@ function useVisibleRows(overhead, min = 6) {
     const { stdout } = useStdout();
     return Math.max(min, (stdout?.rows ?? 30) - overhead);
 }
-export function BoardView({ board }) {
+export function BoardView({ board, bodyHeight }) {
     const agents = [...board.agents.values()];
-    const activities = [...board.fileActivity.values()].sort((a, b) => b.ts - a.ts).slice(0, 12);
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: t('board.title') }), _jsx(Text, { bold: true, children: t('board.agents') }), agents.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.none')] })) : (agents.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name }), _jsxs(Text, { color: STATE_LABEL[a.state].color, children: [' ', STATE_LABEL[a.state].icon, " ", stateLabel(a.state)] }), _jsxs(Text, { color: "gray", children: [" ", truncate(a.currentAction || a.task, 110)] })] }, a.id)))), _jsx(Text, { bold: true, children: t('board.activity') }), activities.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.noActivity')] })) : (activities.map((act) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', "\u270F ", act.path, " ", _jsxs(Text, { color: "gray", children: ["\u2014 ", act.agentName, " (", act.op, ", ", Math.round((Date.now() - act.ts) / 1000), "s)"] })] }, act.path)))), _jsx(Text, { bold: true, children: t('board.notes') }), board.notes.slice(-8).map((n) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magenta", children: [n.from, " \u2192 ", n.to] }), _jsxs(Text, { children: [": ", truncate(n.content, 140)] })] }, n.id)))] }));
+    const fallbackVisible = useVisibleRows(12);
+    const visibleAgents = bodyHeight ? Math.max(1, Math.floor((bodyHeight - 7) / 3)) : fallbackVisible;
+    const { slice: agentSlice, above, below } = useScrollWindow(agents, visibleAgents, 'top');
+    const sideRows = bodyHeight ? Math.max(1, Math.floor((bodyHeight - visibleAgents - 5) / 2)) : 8;
+    const activities = [...board.fileActivity.values()].sort((a, b) => b.ts - a.ts).slice(0, sideRows);
+    const notes = board.notes.slice(-sideRows);
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: t('board.title') }), _jsx(Text, { bold: true, children: t('board.agents') }), agents.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.none')] })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), agentSlice.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name }), _jsxs(Text, { color: STATE_LABEL[a.state].color, children: [' ', STATE_LABEL[a.state].icon, " ", stateLabel(a.state)] }), _jsxs(Text, { color: "gray", children: [" ", truncate(a.currentAction || a.task, 110)] })] }, a.id))), _jsx(Below, { n: below })] })), _jsx(Text, { bold: true, children: t('board.activity') }), activities.length === 0 ? (_jsxs(Text, { color: "gray", children: [" ", t('board.noActivity')] })) : (activities.map((act) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', "\u270F ", act.path, " ", _jsxs(Text, { color: "gray", children: ["\u2014 ", act.agentName, " (", act.op, ", ", Math.round((Date.now() - act.ts) / 1000), "s)"] })] }, act.path)))), _jsx(Text, { bold: true, children: t('board.notes') }), notes.map((n) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magenta", children: [n.from, " \u2192 ", n.to] }), _jsxs(Text, { children: [": ", truncate(n.content, 140)] })] }, n.id)))] }));
 }
-export function NotesView({ board }) {
-    const visible = useVisibleRows(7);
+export function NotesView({ board, bodyHeight }) {
+    const fallbackVisible = useVisibleRows(7);
+    const visible = bodyHeight ? Math.max(3, bodyHeight - 4) : fallbackVisible;
     const { slice, above, below } = useScrollWindow(board.notes, visible, 'bottom');
     return (_jsxs(Box, { borderStyle: "round", borderColor: "magenta", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: t('notes.title') }), board.notes.length === 0 ? (_jsx(Text, { color: "gray", children: t('notes.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((n) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: "gray", children: [new Date(n.ts).toLocaleTimeString(), " "] }), _jsx(Text, { color: "magenta", bold: true, children: n.from }), _jsxs(Text, { color: "gray", children: [" \u2192 ", n.to, ": "] }), _jsx(Text, { children: truncate(n.content, 200) })] }, n.id))), _jsx(Below, { n: below })] }))] }));
 }
-export function DiffView({ board }) {
+export function DiffView({ board, bodyHeight }) {
     // Each change renders up to ~33 rows (header + 30 patch lines + spacing):
     // window over WHOLE history, newest first, PgUp to walk back in time.
-    const rows = useVisibleRows(8, 18);
+    const fallbackRows = useVisibleRows(8, 18);
+    const rows = bodyHeight ? Math.max(8, bodyHeight - 4) : fallbackRows;
     const perChange = Math.max(1, Math.floor(rows / 34));
     const { slice: changes, above, below } = useScrollWindow(board.changes, perChange, 'bottom');
     return (_jsxs(Box, { borderStyle: "round", borderColor: "green", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "green", children: t('diff.title', { total: board.changes.length }) }), board.changes.length === 0 ? (_jsx(Text, { color: "gray", children: t('diff.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), changes.map((c) => {
@@ -75,24 +82,40 @@ export function DiffView({ board }) {
                     }), _jsx(Below, { n: below })] }))] }));
 }
 /** Financial view: live cost / steps / tokens per agent + session total. */
-export function CostView({ board }) {
+export function CostView({ board, bodyHeight }) {
     const agents = [...board.agents.values()];
+    const fallbackVisible = useVisibleRows(8);
+    const visible = bodyHeight ? Math.max(3, bodyHeight - 7) : fallbackVisible;
+    const { slice, above, below } = useScrollWindow(agents, visible, 'top');
     const total = agents.reduce((s, a) => s + (a.cost ?? 0), 0);
     const unknown = agents.some((a) => a.cost === null);
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "greenBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "greenBright", children: t('cost.title') }), agents.length === 0 ? (_jsx(Text, { color: "gray", children: t('cost.empty') })) : (_jsxs(_Fragment, { children: [agents.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name.padEnd(12) }), _jsxs(Text, { color: "gray", children: [a.model.padEnd(24).slice(0, 24), " "] }), _jsxs(Text, { children: [String(a.steps).padStart(3), " steps "] }), _jsxs(Text, { color: "cyan", children: [String(Math.round(a.tokensIn / 1000)).padStart(5), "k in ", String(Math.round(a.tokensOut / 1000)).padStart(4), "k out", ' '] }), _jsx(Text, { color: "greenBright", bold: true, children: a.cost === null ? '   $—' : fmtCost(a.cost).padStart(8) }), a.cost === null ? _jsxs(Text, { color: "gray", children: [" ", t('cost.unknown')] }) : null] }, a.id))), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, children: ['  ', t('cost.total'), " ", _jsx(Text, { color: "greenBright", children: fmtCost(total) }), unknown ? _jsxs(Text, { color: "gray", children: [" ", t('cost.partial')] }) : null] })] })), _jsx(Text, { color: "gray", children: t('cost.hint') })] }));
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "greenBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "greenBright", children: t('cost.title') }), agents.length === 0 ? (_jsx(Text, { color: "gray", children: t('cost.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((a) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsx(Text, { color: a.color, bold: true, children: a.name.padEnd(12) }), _jsxs(Text, { color: "gray", children: [a.model.padEnd(24).slice(0, 24), " "] }), _jsxs(Text, { children: [String(a.steps).padStart(3), " steps "] }), _jsxs(Text, { color: "cyan", children: [String(Math.round(a.tokensIn / 1000)).padStart(5), "k in ", String(Math.round(a.tokensOut / 1000)).padStart(4), "k out", ' '] }), _jsx(Text, { color: "greenBright", bold: true, children: a.cost === null ? '   $—' : fmtCost(a.cost).padStart(8) }), a.cost === null ? _jsxs(Text, { color: "gray", children: [" ", t('cost.unknown')] }) : null] }, a.id))), _jsx(Below, { n: below }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, children: ['  ', t('cost.total'), " ", _jsx(Text, { color: "greenBright", children: fmtCost(total) }), unknown ? _jsxs(Text, { color: "gray", children: [" ", t('cost.partial')] }) : null] })] })), _jsx(Text, { color: "gray", children: t('cost.hint') })] }));
 }
 /** Skills catalog: user-authored markdown instructions agents can load. */
-export function SkillsView({ skills }) {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "blueBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "blueBright", children: t('skills.title') }), skills.length === 0 ? (_jsx(Text, { color: "gray", children: t('skills.empty') })) : (skills.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "blueBright", bold: true, children: ["#", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 100) })] }, s.file)))), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('skills.hint1') }), _jsx(Text, { color: "gray", children: t('skills.hint2') })] }));
+export function SkillsView({ skills, bodyHeight }) {
+    const fallbackVisible = useVisibleRows(8);
+    const visible = bodyHeight ? Math.max(3, bodyHeight - 6) : fallbackVisible;
+    const { slice, above, below } = useScrollWindow(skills, visible, 'top');
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "blueBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "blueBright", children: t('skills.title') }), skills.length === 0 ? (_jsx(Text, { color: "gray", children: t('skills.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "blueBright", bold: true, children: ["#", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 100) })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('skills.hint1') }), _jsx(Text, { color: "gray", children: t('skills.hint2') })] }));
 }
 /** Specialists catalog: personas (role + optional pinned model). */
-export function SpecialistsView({ specialists }) {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "magentaBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magentaBright", children: t('spec.title') }), specialists.length === 0 ? (_jsx(Text, { color: "gray", children: t('spec.empty') })) : (specialists.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magentaBright", bold: true, children: ["\uD83C\uDF93", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), s.model ? _jsxs(Text, { color: "cyan", children: [s.model, " "] }) : null, _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 90) })] }, s.file)))), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('spec.hint1') }), _jsx(Text, { color: "gray", children: t('spec.hint2') })] }));
+export function SpecialistsView({ specialists, bodyHeight }) {
+    const fallbackVisible = useVisibleRows(8);
+    const visible = bodyHeight ? Math.max(3, bodyHeight - 6) : fallbackVisible;
+    const { slice, above, below } = useScrollWindow(specialists, visible, 'top');
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "magentaBright", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magentaBright", children: t('spec.title') }), specialists.length === 0 ? (_jsx(Text, { color: "gray", children: t('spec.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "magentaBright", bold: true, children: ["\uD83C\uDF93", s.name.padEnd(16)] }), _jsxs(Text, { color: s.scope === 'global' ? 'yellow' : 'green', children: ["[", s.scope, "] "] }), s.model ? _jsxs(Text, { color: "cyan", children: [s.model, " "] }) : null, _jsx(Text, { color: "gray", children: truncate(s.description || s.file, 90) })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('spec.hint1') }), _jsx(Text, { color: "gray", children: t('spec.hint2') })] }));
 }
 /** Saved sessions: inspect available restore points; restore via /session. */
-export function SessionsView({ projectRoot }) {
+export function SessionsView({ projectRoot, bodyHeight }) {
     const sessions = Controller.listSessions(projectRoot);
-    return (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: t('sessions.title') }), sessions.length === 0 ? (_jsx(Text, { color: "gray", children: t('sessions.empty') })) : (sessions.map((s, i) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "yellow", bold: true, children: [String(i + 1).padStart(2), "."] }), ' ', _jsx(Text, { children: t('sessions.item', { date: new Date(s.data.savedAt).toLocaleString(), agents: s.data.agents.length }) }), _jsxs(Text, { color: "gray", children: [" ", s.data.agents.map((a) => a.name).join(', ').slice(0, 80)] })] }, s.file)))), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('sessions.hint') })] }));
+    const fallbackVisible = useVisibleRows(7);
+    const visible = bodyHeight ? Math.max(3, bodyHeight - 5) : fallbackVisible;
+    const { slice, above, below } = useScrollWindow(sessions, visible, 'top');
+    return (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: t('sessions.title') }), sessions.length === 0 ? (_jsx(Text, { color: "gray", children: t('sessions.empty') })) : (_jsxs(_Fragment, { children: [_jsx(Above, { n: above }), slice.map((s, i) => (_jsxs(Text, { wrap: "truncate-end", children: ['  ', _jsxs(Text, { color: "yellow", bold: true, children: [String(sessions.indexOf(s) + 1).padStart(2), "."] }), ' ', _jsx(Text, { children: t('sessions.item', {
+                                    name: s.data.name ? `${s.data.name} · ` : '',
+                                    date: new Date(s.data.savedAt).toLocaleString(),
+                                    agents: s.data.agents.length,
+                                }) }), _jsxs(Text, { color: "gray", children: [" ", s.data.agents.map((a) => a.name).join(', ').slice(0, 80)] })] }, s.file))), _jsx(Below, { n: below })] })), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: t('sessions.hint') })] }));
 }
 export function HelpView({ bodyHeight }) {
     // Fixed intro/highlight/footer rows consume about 12 lines inside the already-sized body.

package/package.json

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