@parallel-cli/parallel 0.4.3 → 0.4.5

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.5';
 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: [
@@ -538,7 +555,10 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
         : undefined;
     const [scroll, setScroll] = useState(0);
     const [focusFollowTail, setFocusFollowTail] = useState(true);
-    useEffect(() => setScroll(0), [focus]);
+    useEffect(() => {
+        setScroll(0);
+        setFocusFollowTail(true);
+    }, [focus]);
     const FOCUS_LOGS = Math.max(8, bodyHeight - 1);
     const focusedLogs = focused ? ctl.board.logs.filter((l) => l.agentId === focused.id) : [];
     const maxScroll = Math.max(0, focusedLogs.length - FOCUS_LOGS);
@@ -548,8 +568,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 +580,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 +605,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 +645,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 && focused ? _jsx(Text, { color: UI.warn, children: " [RAW]" }) : null] }), _jsx(Text, { color: CHROME.muted, children: middleTruncate(folder, folderMax) })] }), _jsx(Text, { color: CHROME.muted, children: " \u2502" })] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: CHROME.muted, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: agents.length > 0 ? 'space-between' : 'flex-end', children: [agents.length > 0 ? (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { children: [_jsxs(Text, { color: CHROME.muted, children: ["\u25C7 ", idleCount, " idle"] }), ' · ', _jsxs(Text, { color: workingCount > 0 ? STATE.working : CHROME.muted, children: ["\u25CF ", workingCount, " active"] }), ' · ', _jsxs(Text, { color: doneCount > 0 ? STATE.done : CHROME.muted, children: ["\u2713 ", doneCount, " done"] }), ' · ', _jsxs(Text, { color: errorCount > 0 ? STATE.error : CHROME.muted, children: ["\u2717 ", errorCount, " err"] })] }) })) : null, _jsxs(Text, { color: CHROME.muted, children: ["v", VERSION] })] }), _jsx(Text, { color: CHROME.muted, children: " \u2502" })] }), _jsxs(Text, { color: CHROME.muted, children: ["\u2570", '─'.repeat(cols - 2), "\u256F"] })] }), _jsx(Text, { children: " " }), _jsx(Box, { height: bodyHeight, overflow: "hidden", flexDirection: "column", children: view === 'settings' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "global", height: bodyHeight, onClose: onEscape })) : view === 'settings-session' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "session", height: bodyHeight, onClose: onEscape })) : view === 'board' ? (_jsx(BoardView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot, bodyHeight: bodyHeight })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board, bodyHeight: bodyHeight })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills(), bodyHeight: bodyHeight })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists(), bodyHeight: bodyHeight })) : view === 'help' ? (_jsx(HelpView, { bodyHeight: bodyHeight })) : agents.length === 0 ? (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: "gray", children: t('main.empty') }) })) : focused ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentTranscript, { agent: focused, logs: visibleLogs, raw: rawLogs, scrolled: clampedScroll, cols: cols }), !focusFollowTail ? _jsx(Text, { color: UI.warn, children: "Viewing older \u00B7 PgDn to latest" }) : null] })) : (_jsx(AgentHub, { agents: agents, ctl: ctl, cols: cols, scroll: clampedHub, visibleRows: hubRows })) }), systemLines.length > 0 && !settingsOpen && (_jsxs(Box, { flexDirection: "column", children: [agents.length > 0 ? _jsx(Text, { color: UI.muted, bold: true, children: "Session" }) : null, (agents.length > 0
                         ? systemLines
                             .filter((l) => !/^Ready|^Type a task|^⚡ Ready|^Default \/task|^Agent .* launched/.test(l.text))
                             .slice(-2)
@@ -639,7 +657,7 @@ function MainScreen({ ctl, folder, view, focus, rawLogs, systemLines, agentNames
                         // Split on \n so multiline i18n messages render correctly (Ink <Text> doesn't interpret \n).
                         const lines = l.text.split('\n');
                         return lines.map((line, j) => (_jsx(Text, { color: levelColor, wrap: "truncate-end", children: line }, `${i}-${j}`)));
-                    })] })), approval && (_jsx(ApprovalPrompt, { request: approval, pendingCount: ctl.approvals.length, onAnswer: (id, ok, always) => ctl.answerApproval(id, ok, always) })), question && (_jsx(QuestionPrompt, { question: question, pendingCount: ctl.questions.length, onAnswer: (id, answer, auto) => ctl.answerQuestion(id, answer, auto) }, question.id)), _jsx(CommandInput, { active: inputActive, placeholder: focus ? `Message ${focus} or /command` : 'Task mode: describe work to run · /ask question · /plan proposal · / for commands', agentNames: agentNames, agents: agents, onSubmit: onInput, onEscape: onEscape, notify: notify }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", children: [agents.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: BRAND.muted, children: "/ask /task /plan" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Tab autocompletes \u00B7 Esc clears" })] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: CHROME.muted, children: "\u2318 Parallel" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Shell " }), _jsx(Text, { color: ctl.session.approvalMode === 'ask' ? UI.warn :
+                    })] })), approval && (_jsx(ApprovalPrompt, { request: approval, pendingCount: ctl.approvals.length, onAnswer: (id, ok, always) => ctl.answerApproval(id, ok, always) })), question && (_jsx(QuestionPrompt, { question: question, pendingCount: ctl.questions.length, onAnswer: (id, answer, auto) => ctl.answerQuestion(id, answer, auto) }, question.id)), _jsx(CommandInput, { active: inputActive, placeholder: focus ? `Message ${focus} or /command` : 'Task mode: describe work to run · /ask question · /plan proposal · / for commands', context: focus ? 'focus' : 'hub', targetAgent: focused?.name, modelLabel: ctl.sessionProvider() ? `${ctl.sessionProvider()?.name}:${ctl.session.model}` : undefined, agentNames: agentNames, agents: agents, onSubmit: onInput, onEscape: onEscape, notify: notify }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", children: [agents.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: BRAND.muted, children: "/ask /task /plan" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Tab autocompletes \u00B7 Esc clears" })] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: CHROME.muted, children: "\u2318 Parallel" }), _jsx(Text, { color: CHROME.muted, children: " \u00B7 Shell " }), _jsx(Text, { color: ctl.session.approvalMode === 'ask' ? UI.warn :
                                     ctl.session.approvalMode === 'yolo' ? UI.danger :
                                         UI.ok, children: ctl.session.approvalMode === 'auto-safe' ? 'auto' : ctl.session.approvalMode }), _jsxs(Text, { color: CHROME.muted, children: [" \u00B7 Sessions: ", Controller.listSessions(ctl.projectRoot).length] }), ctl.questions.length > 0 ? (_jsxs(Text, { color: UI.warn, children: [" \u00B7 \u2753", ctl.questions.length] })) : null, ctl.approvals.length > 0 ? (_jsxs(Text, { color: UI.warn, children: [" \u00B7 \u23F3", ctl.approvals.length] })) : null, focused ? (_jsxs(Text, { color: BRAND.muted, children: [" \u00B7 \uD83C\uDFAF ", focused.name] })) : null] })] })] }));
 }
@@ -658,27 +676,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/AttachApp.js

@@ -22,6 +22,12 @@ export function parseAttachCommand(text) {
         return { type: 'detach' };
     if (v === '/raw')
         return { type: 'raw' };
+    const at = v.match(/^@(\S+)\s+(.+)$/s);
+    if (at)
+        return { type: 'send', target: at[1], text: at[2].trim() };
+    const send = v.match(/^\/send\s+(\S+)\s+(.+)$/s);
+    if (send)
+        return { type: 'send', target: send[1], text: send[2].trim() };
     const m = v.match(/^\/(ask|a|task|t|plan|p)\s+(.+)$/s);
     if (m) {
         const mode = m[1] === 'ask' || m[1] === 'a' ? 'ask' : m[1] === 'plan' || m[1] === 'p' ? 'plan' : 'task';
@@ -122,6 +128,10 @@ export function AttachApp({ agentRef, sock }) {
             wire({ type: 'spawn', text: cmd.text, mode: cmd.mode });
             return;
         }
+        if (cmd.type === 'send') {
+            wire({ type: 'send', target: cmd.target, text: cmd.text });
+            return;
+        }
         wire({ type: 'input', agent: agentRef, text: cmd.text });
     };
     const st = info ? STATE_META[info.state] : null;
@@ -134,18 +144,18 @@ export function AttachApp({ agentRef, sock }) {
              * what used to leave stray blank lines in the native scrollback. */
             _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: info.color, bold: true, children: info.alias || info.name }), ' ', _jsxs(Text, { color: st.color, bold: true, children: [st.mark, " ", st.label] }), ' ', _jsx(Spinner, { color: info.color }), _jsxs(Text, { color: UI.muted, children: [' ', "\u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' '] }), _jsx(Text, { color: UI.ok, children: info.cost === null ? '$-' : fmtCost(info.cost) })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["Current  ", truncate(info.currentAction, 120)] })) : null, others.length > 0 ? (_jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: ["Others  ", ' ', others
                                 .map((o) => `${o.name} [${stateLabel(o.state)}] ${truncate(o.currentAction || o.task, 40)}`)
-                                .join(' · ')] })) : null, !raw ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.muted, bold: true, children: t('timeline.activity') }), _jsx(Timeline, { logs: lines.map((l) => l.log) })] })) : null] })) : (
+                                .join(' · ')] })) : null, !raw ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.muted, bold: true, children: t('timeline.activity') }), _jsx(Timeline, { logs: lines.map((l) => l.log), cols: process.stdout.columns || 100 })] })) : null] })) : (
             /* FULL panel when idle / waiting / done — repaints are rare here. */
             _jsxs(Box, { borderStyle: "single", borderColor: info?.color ?? 'gray', flexDirection: "column", paddingX: 1, marginTop: 1, children: [info && st ? (_jsxs(_Fragment, { children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [banner, _jsxs(Text, { color: st.color, bold: true, children: [' ', st.mark, " ", st.label] })] }), _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: [middleTruncate(info.model, 18), " \u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' ', info.ctxPct !== undefined ? (_jsxs(Text, { color: info.ctxPct >= 90 ? UI.danger : info.ctxPct >= 70 ? UI.warn : UI.muted, children: [info.ctxPct, "% \u00B7", ' '] })) : null, _jsx(Text, { color: UI.ok, children: info.cost === null ? '$-' : fmtCost(info.cost) })] })] }), _jsxs(Text, { color: UI.muted, wrap: "wrap", children: ["Task  ", _jsx(Text, { color: UI.text, children: info.task })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["Current  ", truncate(info.currentAction, 160)] })) : null, others.length > 0 ? (
                             // The session's shared awareness, visible here too: what the
                             // OTHER agents are doing right now (live, same feed the agents get).
                             _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: ["Others  ", ' ', others
                                         .map((o) => `${o.name} [${stateLabel(o.state)}] ${truncate(o.currentAction || o.task, 40)}`)
-                                        .join(' · ')] })) : null, !raw ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.muted, bold: true, children: t('timeline.activity') }), _jsx(Timeline, { logs: lines.map((l) => l.log) })] })) : null, info.lastResult && (info.state === 'done' || info.state === 'error' || info.state === 'stopped') ? (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: UI.ok, bold: true, children: "Result" }), _jsx(Md, { text: info.lastResult })] })) : null] })) : (_jsx(Text, { color: "gray", children: gone ? t('attach.gone') : t('attach.waiting', { agent: agentRef }) })), gone && info ? _jsx(Text, { color: UI.danger, children: t('attach.gone') }) : null] })), approval ? (_jsx(ApprovalPrompt, { request: { ...approval, agentId: info?.id ?? '', resolve: noop }, pendingCount: 1, onAnswer: (id, ok, always) => {
+                                        .join(' · ')] })) : null, !raw ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: UI.muted, bold: true, children: t('timeline.activity') }), _jsx(Timeline, { logs: lines.map((l) => l.log), cols: process.stdout.columns || 100 })] })) : null, info.lastResult && (info.state === 'done' || info.state === 'error' || info.state === 'stopped') ? (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: UI.ok, bold: true, children: "Result" }), _jsx(Md, { text: info.lastResult })] })) : null] })) : (_jsx(Text, { color: "gray", children: gone ? t('attach.gone') : t('attach.waiting', { agent: agentRef }) })), gone && info ? _jsx(Text, { color: UI.danger, children: t('attach.gone') }) : null] })), approval ? (_jsx(ApprovalPrompt, { request: { ...approval, agentId: info?.id ?? '', resolve: noop }, pendingCount: 1, onAnswer: (id, ok, always) => {
                     wire({ type: 'approve', id, approved: ok, always: !!always });
                     setApproval(null);
                 } })) : question ? (_jsx(QuestionPrompt, { question: { ...question, agentId: info?.id ?? '', resolve: noop }, pendingCount: 1, onAnswer: (id, answer) => {
                     wire({ type: 'answer', id, text: answer });
                     setQuestion(null);
-                } }, question.id)) : null, _jsx(CommandInput, { active: !gone && !interacting, placeholder: t('attach.placeholder', { agent: info?.name ?? agentRef }), onSubmit: send, onEscape: () => exit() }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "yellowBright", wrap: "truncate-end", children: formatAttachFooter(info) }) })] }));
+                } }, question.id)) : null, _jsx(CommandInput, { active: !gone && !interacting, placeholder: t('attach.placeholder', { agent: info?.name ?? agentRef }), context: "attach", targetAgent: info?.name ?? agentRef, modelLabel: info?.model, agentNames: [info?.alias, info?.name, ...others.flatMap((o) => [o.alias, o.name])].filter((n) => Boolean(n)), agents: info ? [info] : [], onSubmit: send, onEscape: () => exit() }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "yellowBright", wrap: "truncate-end", children: formatAttachFooter(info) }) })] }));
 }

package/dist/ui/CommandInput.js

@@ -14,12 +14,23 @@ const GROUP_LABEL = {
     git: 'Git/session',
     other: 'Other',
 };
-function modeHint(value) {
+const AGENT_ARG_COMMANDS = new Set(['/focus', '/send', '/attach', '/pause', '/resume', '/stop', '/restore', '/commit']);
+function modeHint(value, context, targetAgent) {
     const v = value.trimStart().toLowerCase();
-    if (!v)
+    if (!v) {
+        if (context === 'focus')
+            return `Message ${targetAgent ?? 'focused agent'} · / for hub commands · PgUp/PgDn scroll`;
+        if (context === 'attach')
+            return `Steer ${targetAgent ?? 'agent'} · /task spawns · @all broadcasts · /quit detaches`;
         return 'Default /task · Tab/→ autocomplete · / for commands';
-    if (!v.startsWith('/'))
+    }
+    if (!v.startsWith('/')) {
+        if (context === 'focus')
+            return `Will message ${targetAgent ?? 'focused agent'}`;
+        if (context === 'attach')
+            return `Will steer ${targetAgent ?? 'attached agent'}`;
         return 'Will launch /task';
+    }
     if (v.startsWith('/ask') || v === '/a')
         return 'Ask mode · advice only · no edits';
     if (v.startsWith('/task') || v === '/t')
@@ -38,7 +49,25 @@ export function bestCommandCompletion(value) {
     const cmd = matchCommands(value)[0];
     return cmd ? `${cmd.name} ` : null;
 }
-export function CommandInput({ active, placeholder, mask, agentNames = [], agents = [], onSubmit, onEscape, notify }) {
+export function commandNamesForContext(context) {
+    if (context !== 'attach')
+        return undefined;
+    return ['/ask', '/a', '/task', '/t', '/plan', '/p', '/send', '/raw', '/quit', '/exit', '/detach'];
+}
+export function agentArgCommand(value) {
+    const m = value.match(/^(\/\S+)\s+([^\s]*)$/);
+    if (!m)
+        return null;
+    const cmd = m[1].toLowerCase();
+    return AGENT_ARG_COMMANDS.has(cmd) ? cmd : null;
+}
+export function completeAgentArgument(value, agent) {
+    const cmd = agentArgCommand(value);
+    if (!cmd)
+        return value;
+    return `${cmd} ${agent} `;
+}
+export function CommandInput({ active, placeholder, mask, context = 'hub', targetAgent, modelLabel, commandNames, agentNames = [], agents = [], onSubmit, onEscape, notify, }) {
     const [value, setValue] = useState('');
     const [attachments, setAttachments] = useState([]);
     const [history, setHistory] = useState([]);
@@ -87,11 +116,26 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
         setAttachments((arr) => [...arr, { kind: 'image', n, dataUri: img.dataUri, label: img.label }]);
         notify?.(t('input.imageAdded'));
     };
-    const cmdSuggestions = value.startsWith('/') && !value.includes(' ') ? matchCommands(value).slice(0, 10) : [];
+    const uniqueAgentNames = [...new Set(agentNames.filter(Boolean))];
+    const allowedCommands = commandNames ?? commandNamesForContext(context);
+    const commandAllowed = (c) => !allowedCommands || allowedCommands.includes(c.name) || c.aliases?.some((a) => allowedCommands.includes(a));
+    const cmdSuggestions = value.startsWith('/') && !value.includes(' ') ? matchCommands(value).filter(commandAllowed).slice(0, 10) : [];
     const agentSuggestions = value.startsWith('@') && !value.includes(' ')
-        ? ['all', ...agentNames].filter((n) => n.toLowerCase().startsWith(value.slice(1).toLowerCase())).slice(0, 8)
+        ? ['all', ...uniqueAgentNames].filter((n) => n.toLowerCase().startsWith(value.slice(1).toLowerCase())).slice(0, 8)
         : [];
-    const suggestionCount = cmdSuggestions.length > 0 ? cmdSuggestions.length : agentSuggestions.length;
+    const argCommand = agentArgCommand(value);
+    const argPrefix = argCommand ? value.split(/\s+/)[1] ?? '' : '';
+    const argSuggestions = argCommand
+        ? [
+            ...(argCommand === '/send' || argCommand === '/pause' || argCommand === '/resume' || argCommand === '/stop' || argCommand === '/commit'
+                ? ['all']
+                : []),
+            ...uniqueAgentNames,
+        ]
+            .filter((n) => n.toLowerCase().startsWith(argPrefix.toLowerCase()))
+            .slice(0, 8)
+        : [];
+    const suggestionCount = cmdSuggestions.length > 0 ? cmdSuggestions.length : agentSuggestions.length > 0 ? agentSuggestions.length : argSuggestions.length;
     const hasSuggestions = suggestionCount > 0;
     const exactCommand = cmdSuggestions.some((c) => c.name === value.toLowerCase() || c.aliases?.some((a) => a === value.toLowerCase()));
     useEffect(() => {
@@ -112,6 +156,11 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
             setValue('@' + agent + ' ');
             return true;
         }
+        if (argSuggestions.length > 0) {
+            const agent = argSuggestions[Math.min(selectedSuggestion, argSuggestions.length - 1)];
+            setValue(completeAgentArgument(value, agent));
+            return true;
+        }
         return false;
     };
     useInput((input, key) => {
@@ -211,10 +260,12 @@ export function CommandInput({ active, placeholder, mask, agentNames = [], agent
     const shown = mask ? '•'.repeat(value.length) : value;
     const byName = new Map(agents.flatMap((a) => [[a.name, a], [a.alias, a]]));
     const commandIndexes = new Map(cmdSuggestions.map((c, i) => [c.name, i]));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", wrap: "truncate-end", children: modeHint(value) }), cmdSuggestions.length > 0 && (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: groupedCommands(cmdSuggestions).map(([group, commands]) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", bold: true, children: GROUP_LABEL[group] ?? group }), commands.map((c) => ((() => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: "gray", wrap: "truncate-end", children: modeHint(value, context, targetAgent) }), _jsxs(Text, { color: "cyan", children: ["[", context, "]"] }), targetAgent ? _jsxs(Text, { color: "magenta", children: ["[", targetAgent, "]"] }) : null, modelLabel ? _jsxs(Text, { color: "yellow", children: ["[", modelLabel, "]"] }) : null] }), cmdSuggestions.length > 0 && (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: groupedCommands(cmdSuggestions).map(([group, commands]) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", bold: true, children: GROUP_LABEL[group] ?? group }), commands.map((c) => ((() => {
                             const selected = commandIndexes.get(c.name) === selectedSuggestion;
                             return (_jsxs(Text, { children: [_jsxs(Text, { color: selected ? 'cyanBright' : 'cyan', bold: true, children: [selected ? '› ' : '  ', c.name.padEnd(14)] }), _jsx(Text, { color: "yellow", children: c.args.padEnd(22) }), _jsx(Text, { color: "gray", children: t(c.descKey) })] }, c.name));
                         })()))] }, group))) })), agentSuggestions.length > 0 && (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: agentSuggestions.map((n, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: i === selectedSuggestion ? 'cyanBright' : 'cyan', bold: true, children: [i === selectedSuggestion ? '› ' : '  ', "@", n.padEnd(10)] }), _jsx(Text, { color: "gray", children: n === 'all'
                                 ? t('input.atAll')
-                                : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n))) })), attachments.length > 0 && (_jsx(Box, { flexDirection: "row", gap: 1, paddingX: 1, children: attachments.map((a) => (_jsxs(Text, { color: "cyan", backgroundColor: "gray", children: [' ', a.kind === 'paste' ? t('input.attPaste', { n: a.n, lines: a.lines }) : t('input.attImage', { n: a.n, file: a.label }), ' '] }, a.n))) })), _jsxs(Box, { borderStyle: "single", borderColor: active ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { color: "cyanBright", bold: true, children: ["\u203A", ' '] }), shown ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: shown }), active && _jsx(Text, { color: "cyanBright", children: "\u2588" })] })) : (_jsxs(_Fragment, { children: [active && _jsx(Text, { color: "cyanBright", children: "\u2588" }), _jsx(Text, { color: "gray", children: placeholder })] }))] })] }));
+                                : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n))) })), argSuggestions.length > 0 && (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "gray", bold: true, children: "Agents" }), argSuggestions.map((n, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: i === selectedSuggestion ? 'cyanBright' : 'cyan', bold: true, children: [i === selectedSuggestion ? '› ' : '  ', n.padEnd(12)] }), _jsx(Text, { color: "gray", children: n === 'all'
+                                    ? t('input.atAll')
+                                    : `${byName.get(n)?.state ?? ''} ${byName.get(n)?.mode ? `/${byName.get(n)?.mode}` : ''}` })] }, n)))] })), attachments.length > 0 && (_jsx(Box, { flexDirection: "row", gap: 1, paddingX: 1, children: attachments.map((a) => (_jsxs(Text, { color: "cyan", backgroundColor: "gray", children: [' ', a.kind === 'paste' ? t('input.attPaste', { n: a.n, lines: a.lines }) : t('input.attImage', { n: a.n, file: a.label }), ' '] }, a.n))) })), _jsxs(Box, { borderStyle: "single", borderColor: active ? 'cyan' : 'gray', paddingX: 1, children: [_jsxs(Text, { color: "cyanBright", bold: true, children: ["\u203A", ' '] }), shown ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: shown }), active && _jsx(Text, { color: "cyanBright", children: "\u2588" })] })) : (_jsxs(_Fragment, { children: [active && _jsx(Text, { color: "cyanBright", children: "\u2588" }), _jsx(Text, { color: "gray", children: placeholder })] }))] })] }));
 }