@parallel-cli/parallel 0.3.3

package/dist/ui/App.js

@@ -0,0 +1,400 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import fs from 'node:fs';
+import path from 'node:path';
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
+import { Controller } from '../controller.js';
+import { startSessionServer } from '../server.js';
+import { executeInput } from '../commands.js';
+import { PROVIDER_PRESETS, getProvider, rememberFolder, saveConfig } from '../config.js';
+import { fmtCost } from '../pricing.js';
+import { LANGS, setLang, t } from '../i18n.js';
+import { AgentPanel } from './AgentPanel.js';
+import { ApprovalPrompt } from './ApprovalPrompt.js';
+import { QuestionPrompt } from './QuestionPrompt.js';
+import { CommandInput } from './CommandInput.js';
+import { SettingsPanel } from './SettingsPanel.js';
+import { BoardView, CostView, DiffView, HelpView, NotesView, SessionsView, SkillsView, SpecialistsView } from './views.js';
+import { SelectList, WizardStep } from './Wizard.js';
+const LOGO = '⚡ P A R A L L E L';
+function usableProvider(config) {
+    const p = getProvider(config);
+    return p && p.apiKey && (p.defaultModel || p.models[0]) ? p : undefined;
+}
+function normalizeFolder(p) {
+    return path.resolve(p.replace(/^~(?=$|\/)/, process.env.HOME ?? '~'));
+}
+function validFolder(p) {
+    const abs = normalizeFolder(p);
+    try {
+        return fs.existsSync(abs) && fs.statSync(abs).isDirectory() ? abs : null;
+    }
+    catch {
+        return null;
+    }
+}
+function startupFolder(config, initialFolder) {
+    if (initialFolder)
+        return validFolder(initialFolder);
+    for (const recent of config.recentFolders ?? []) {
+        const found = validFolder(recent);
+        if (found)
+            return found;
+    }
+    return validFolder(process.cwd());
+}
+export function App({ config, initialFolder }) {
+    const { exit } = useApp();
+    const initialUsableProvider = usableProvider(config);
+    const directFolder = config.language && initialUsableProvider ? startupFolder(config, initialFolder) : null;
+    // ---------- wizard state ----------
+    const [phase, setPhase] = useState(directFolder ? 'main' : config.language ? 'folder' : 'lang');
+    const [folder, setFolder] = useState(directFolder ?? '');
+    const [wizardError, setWizardError] = useState('');
+    const [sessions, setSessions] = useState([]);
+    const [providerStep, setProviderStep] = useState({ id: 'pick' });
+    const [modelCustom, setModelCustom] = useState(false);
+    const ctlRef = useRef(directFolder ? new Controller(config, directFolder) : null);
+    // ---------- main state ----------
+    const [, setTick] = useState(0);
+    const [view, setView] = useState('agents');
+    // Focus mode (/focus <agent>): plain input is routed to that agent.
+    const [focus, setFocus] = useState(null);
+    const [systemLines, setSystemLines] = useState(directFolder ? [t('main.ready1', { folder: directFolder }), t('main.ready2')] : []);
+    const [inputReady, setInputReady] = useState(Boolean(directFolder));
+    const ctl = ctlRef.current;
+    // Re-render (throttled) on every blackboard/controller update.
+    useEffect(() => {
+        if (!ctl)
+            return;
+        let pending = false;
+        const onUpdate = () => {
+            if (pending)
+                return;
+            pending = true;
+            setTimeout(() => {
+                pending = false;
+                setTick((x) => x + 1);
+            }, 80);
+        };
+        ctl.on('update', onUpdate);
+        const timer = setInterval(onUpdate, 1000); // refresh elapsed timers
+        return () => {
+            ctl.off('update', onUpdate);
+            clearInterval(timer);
+        };
+    }, [ctl]);
+    // Session server: lets `parallel attach <agent>` open per-agent terminals.
+    useEffect(() => {
+        if (!ctl)
+            return;
+        const stop = startSessionServer(ctl);
+        ctl.attachEnabled = Boolean(stop);
+        return () => {
+            ctl.attachEnabled = false;
+            stop?.();
+        };
+    }, [ctl]);
+    const ui = useMemo(() => ({
+        setView,
+        system: (line) => setSystemLines((ls) => [...ls.slice(-5), line]),
+        exit: () => {
+            setTimeout(() => exit(), 50);
+        },
+        setFocus,
+    }), [exit]);
+    // ---------- wizard transitions ----------
+    // In normal launches, a complete config goes straight to the main TUI.
+    // This effect only supports partially-configured installs with a folder arg.
+    useEffect(() => {
+        if (config.language && initialFolder && phase === 'folder' && !ctlRef.current) {
+            chooseFolder(initialFolder);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (directFolder)
+            rememberFolder(config, directFolder);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const chooseLang = (code) => {
+        setLang(code);
+        config.language = code;
+        saveConfig(config);
+        if (initialFolder)
+            chooseFolder(initialFolder);
+        else
+            setPhase('folder');
+    };
+    const chooseFolder = (p) => {
+        const abs = validFolder(p);
+        if (!abs) {
+            setWizardError(t('wiz.folder.notFound', { path: normalizeFolder(p) }));
+            return;
+        }
+        setWizardError('');
+        setFolder(abs);
+        rememberFolder(config, abs);
+        const controller = new Controller(config, abs);
+        ctlRef.current = controller;
+        const found = Controller.listSessions(abs);
+        setSessions(found);
+        setPhase(found.length > 0 ? 'session' : usableProvider(config) ? 'model' : 'provider');
+    };
+    const wizardBack = () => {
+        if (phase === 'folder') {
+            if (!config.language)
+                setPhase('lang');
+            return;
+        }
+        if (phase === 'session') {
+            setPhase('folder');
+            return;
+        }
+        if (phase === 'model') {
+            if (modelCustom) {
+                setModelCustom(false);
+                return;
+            }
+            setPhase(sessions.length > 0 ? 'session' : 'folder');
+            return;
+        }
+        if (phase === 'provider') {
+            if (providerStep.id === 'pick') {
+                setPhase(sessions.length > 0 ? 'session' : 'folder');
+            }
+            else if (providerStep.id === 'key') {
+                setProviderStep({ id: 'pick' });
+            }
+            else if (providerStep.id === 'name') {
+                setProviderStep({ id: 'pick' });
+            }
+            else if (providerStep.id === 'url') {
+                setProviderStep({ id: 'name' });
+            }
+            else if (providerStep.id === 'model') {
+                setProviderStep({ id: 'url', name: providerStep.name });
+            }
+            else if (providerStep.id === 'newKey') {
+                setProviderStep({ id: 'model', name: providerStep.name, url: providerStep.url });
+            }
+        }
+    };
+    const chooseSession = (value) => {
+        if (value !== '__new__') {
+            const s = sessions.find((x) => x.file === value);
+            if (s && ctlRef.current)
+                ctlRef.current.loadSession(s.data);
+        }
+        setPhase(usableProvider(config) ? 'model' : 'provider');
+    };
+    const finishProvider = (p) => {
+        ctlRef.current?.saveProvider(p);
+        ctlRef.current?.setDefaultProvider(p.name);
+        setProviderStep({ id: 'pick' });
+        enterMain();
+    };
+    const enterMain = () => {
+        setSystemLines([t('main.ready1', { folder }), t('main.ready2')]);
+        setPhase('main');
+        setInputReady(false);
+        setTimeout(() => setInputReady(true), 350);
+    };
+    const chooseModel = (value) => {
+        if (value === '__custom__')
+            return setModelCustom(true);
+        if (value === '__provider__') {
+            setProviderStep({ id: 'pick' });
+            setPhase('provider');
+            return;
+        }
+        const ctl = ctlRef.current;
+        if (ctl) {
+            const resolved = ctl.resolveModel(value);
+            if (resolved) {
+                resolved.provider.defaultModel = resolved.model;
+                if (!resolved.provider.models.includes(resolved.model))
+                    resolved.provider.models.push(resolved.model);
+                ctl.saveProvider(resolved.provider);
+                ctl.setDefaultProvider(resolved.provider.name);
+                ctl.setSessionModel(`${resolved.provider.name}:${resolved.model}`);
+            }
+        }
+        enterMain();
+    };
+    // ---------- wizard rendering ----------
+    if (phase !== 'main') {
+        const totalSteps = 5;
+        const sessionProvider = ctl ? ctl.sessionProvider() : getProvider(config);
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyanBright", children: LOGO }), _jsx(Text, { color: "gray", children: t('tagline') }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [phase === 'lang' && (_jsx(WizardStep, { step: 1, total: totalSteps, title: t('wiz.lang.title'), children: _jsx(SelectList, { items: LANGS.map((l) => ({ label: l.label, value: l.code })), onSelect: chooseLang }) })), phase === 'folder' && (_jsxs(WizardStep, { step: 2, total: totalSteps, title: t('wiz.folder.title'), footer: t('wiz.folder.footer'), children: [wizardError ? _jsx(Text, { color: "red", children: wizardError }) : null, _jsx(SelectList, { items: [
+                                        { label: process.cwd(), value: process.cwd(), hint: t('wiz.folder.current') },
+                                        ...config.recentFolders
+                                            .filter((f) => f !== process.cwd())
+                                            .map((f) => ({ label: f, value: f, hint: t('wiz.folder.recent') })),
+                                    ], allowInput: true, inputPlaceholder: t('wiz.folder.input'), onBack: wizardBack, onSelect: chooseFolder, onInput: chooseFolder })] })), phase === 'session' && (_jsx(WizardStep, { step: 3, total: totalSteps, title: t('wiz.session.title'), children: _jsx(SelectList, { items: [
+                                    { label: t('wiz.session.new'), value: '__new__', hint: t('wiz.session.newHint') },
+                                    ...sessions.map((s) => ({
+                                        label: t('wiz.session.item', { date: new Date(s.data.savedAt).toLocaleString() }),
+                                        value: s.file,
+                                        hint: `(${s.data.agents.length}: ${s.data.agents
+                                            .map((a) => a.name)
+                                            .join(', ')
+                                            .slice(0, 60)})`,
+                                    })),
+                                ], onBack: wizardBack, onSelect: chooseSession }) })), phase === 'provider' && providerStep.id === 'pick' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.title'), children: _jsx(SelectList, { items: [
+                                    ...config.providers.map((p) => ({
+                                        label: p.name,
+                                        value: `existing:${p.name}`,
+                                        hint: `(${p.baseUrl}${p.apiKey ? '' : ' — ' + t('wiz.provider.needsKey')})`,
+                                    })),
+                                    ...PROVIDER_PRESETS.filter((preset) => !config.providers.some((p) => p.name.toLowerCase() === preset.name.toLowerCase())).map((preset) => ({
+                                        label: preset.name,
+                                        value: `preset:${preset.name}`,
+                                        hint: t('wiz.provider.presetHint', { url: preset.baseUrl, model: preset.defaultModel }),
+                                    })),
+                                    { label: t('wiz.provider.custom'), value: '__custom__', hint: t('wiz.provider.customHint') },
+                                ], onBack: wizardBack, onSelect: (v) => {
+                                    if (v === '__custom__')
+                                        return setProviderStep({ id: 'name' });
+                                    if (v.startsWith('preset:')) {
+                                        const preset = PROVIDER_PRESETS.find((p) => p.name === v.slice('preset:'.length));
+                                        if (preset)
+                                            return setProviderStep({ id: 'key', preset: { ...preset, models: [...preset.models] } });
+                                    }
+                                    const p = config.providers.find((x) => x.name === v.slice('existing:'.length));
+                                    if (!p)
+                                        return;
+                                    if (p.apiKey) {
+                                        ctlRef.current?.setDefaultProvider(p.name);
+                                        ctlRef.current?.setSessionProvider(p.name);
+                                        enterMain();
+                                    }
+                                    else {
+                                        setProviderStep({ id: 'key', preset: p });
+                                    }
+                                } }) })), phase === 'provider' && providerStep.id === 'key' && (_jsxs(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.key.title', { name: providerStep.preset.name }), footer: t('wiz.provider.key.footer'), children: [_jsx(Text, { color: "gray", children: providerStep.preset.baseUrl }), _jsx(SelectList, { items: [], allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onBack: wizardBack, onInput: (k) => finishProvider({ ...providerStep.preset, apiKey: k.trim() }) })] })), phase === 'provider' && providerStep.id === 'name' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.name.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.name.ph'), onBack: wizardBack, onInput: (name) => setProviderStep({ id: 'url', name }) }) })), phase === 'provider' && providerStep.id === 'url' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.url.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.url.ph'), onBack: wizardBack, onInput: (url) => setProviderStep({ id: 'model', name: providerStep.name, url }) }) })), phase === 'provider' && providerStep.id === 'model' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.model.title'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onInput: (model) => setProviderStep({ id: 'newKey', name: providerStep.name, url: providerStep.url, model }) }) })), phase === 'provider' && providerStep.id === 'newKey' && (_jsx(WizardStep, { step: 4, total: totalSteps, title: t('wiz.provider.key.title', { name: providerStep.name }), footer: t('wiz.provider.key.footer'), children: _jsx(SelectList, { items: [], allowInput: true, mask: true, inputPlaceholder: "sk-\u2026", onBack: wizardBack, onInput: (key) => finishProvider({
+                                    name: providerStep.name,
+                                    baseUrl: providerStep.url,
+                                    apiKey: key.trim(),
+                                    models: [providerStep.model],
+                                    defaultModel: providerStep.model,
+                                }) }) })), phase === 'model' && !modelCustom && sessionProvider && (_jsxs(WizardStep, { step: 5, total: totalSteps, title: t('wiz.model.title'), children: [_jsx(Text, { color: "gray", children: t('wiz.model.provider', { name: sessionProvider.name, url: sessionProvider.baseUrl }) }), _jsx(SelectList, { items: [
+                                        ...sessionProvider.models.map((m) => ({
+                                            label: m,
+                                            value: `${sessionProvider.name}:${m}`,
+                                            hint: m === sessionProvider.defaultModel ? t('wiz.model.default') : undefined,
+                                        })),
+                                        { label: t('wiz.model.custom'), value: '__custom__', hint: t('wiz.model.customHint') },
+                                        { label: t('wiz.model.addProvider'), value: '__provider__' },
+                                    ], onBack: wizardBack, onSelect: chooseModel })] })), phase === 'model' && modelCustom && (_jsx(WizardStep, { step: 5, total: totalSteps, title: t('wiz.model.customTitle'), footer: t('wiz.footer.type'), children: _jsx(SelectList, { items: [], allowInput: true, inputPlaceholder: t('wiz.provider.model.ph'), onBack: wizardBack, onInput: (m) => {
+                                    setModelCustom(false);
+                                    chooseModel(m);
+                                } }) }))] })] }));
+    }
+    // ---------- main UI ----------
+    if (!ctl)
+        return null;
+    const agents = [...ctl.board.agents.values()];
+    // Names + short aliases (a1, a2, …) — both usable after @ and in commands.
+    const agentNames = [...new Set(agents.flatMap((a) => (a.alias && a.alias !== a.name ? [a.alias, a.name] : [a.name])))];
+    const approval = ctl.approvals[0];
+    const question = approval ? undefined : ctl.questions[0]; // approvals take priority
+    const settingsOpen = view === 'settings' || view === 'settings-session';
+    const inputActive = inputReady && !approval && !question && !settingsOpen;
+    return (_jsx(MainScreen, { ctl: ctl, folder: folder, view: view, focus: focus, systemLines: systemLines, agentNames: agentNames, approval: approval, question: question, inputActive: inputActive, onInput: (value, images) => {
+            const v = value.trim();
+            // Focus mode: plain text goes straight to the focused agent.
+            if (focus && v && !v.startsWith('/') && !v.startsWith('@')) {
+                executeInput(`@${focus} ${v}`, ctl, ui, images);
+            }
+            else {
+                executeInput(value, ctl, ui, images);
+            }
+        }, onEscape: () => {
+            if (view !== 'agents')
+                setView('agents');
+            else if (focus) {
+                setFocus(null);
+                ui.system(t('m.focusOff'));
+            }
+        }, notify: ui.system }));
+}
+function MainScreen({ ctl, folder, view, focus, systemLines, agentNames, approval, question, inputActive, onInput, onEscape, notify, }) {
+    const agents = [...ctl.board.agents.values()];
+    // Adapt the layout to the REAL terminal size (never resize the user's terminal).
+    const { stdout } = useStdout();
+    const cols = stdout?.columns ?? 100;
+    const narrow = cols < 110;
+    const logsPerAgent = agents.length <= 1 ? 10 : agents.length <= 2 ? 7 : 5;
+    const width = agents.length === 1 || narrow ? '100%' : '50%';
+    const settingsOpen = view === 'settings' || view === 'settings-session';
+    // Focus mode: one agent rendered alone, with scrollback (PgUp/PgDn).
+    const focused = focus
+        ? agents.find((a) => a.name.toLowerCase() === focus.toLowerCase())
+        : undefined;
+    const [scroll, setScroll] = useState(0);
+    useEffect(() => setScroll(0), [focus]);
+    const FOCUS_LOGS = 20;
+    const focusedLogs = focused ? ctl.board.logs.filter((l) => l.agentId === focused.id) : [];
+    const maxScroll = Math.max(0, focusedLogs.length - FOCUS_LOGS);
+    const clampedScroll = Math.min(scroll, maxScroll);
+    const visibleLogs = focused
+        ? focusedLogs.slice(Math.max(0, focusedLogs.length - FOCUS_LOGS - clampedScroll), focusedLogs.length - clampedScroll)
+        : [];
+    // Grid scroll: when more agents than fit on screen, PgUp/PgDn slides a
+    // window over the agent panels (with ▲/▼ indicators so you know where you are).
+    const GRID_CAP = narrow ? 2 : 4;
+    const [gridScroll, setGridScroll] = useState(0);
+    const maxGridScroll = Math.max(0, agents.length - GRID_CAP);
+    const clampedGrid = Math.min(gridScroll, maxGridScroll);
+    const visibleAgents = agents.length > GRID_CAP ? agents.slice(clampedGrid, clampedGrid + GRID_CAP) : agents;
+    // Solo scroll: with a SINGLE agent on the agents view, PgUp/PgDn scrolls
+    // its log history (same behaviour as /focus, without needing to focus).
+    const solo = agents.length === 1 ? agents[0] : null;
+    const [soloScroll, setSoloScroll] = useState(0);
+    const soloLogs = solo ? ctl.board.logs.filter((l) => l.agentId === solo.id) : [];
+    const maxSoloScroll = Math.max(0, soloLogs.length - logsPerAgent);
+    const clampedSolo = Math.min(soloScroll, maxSoloScroll);
+    // Esc always returns to the agents view, even while approval is shown.
+    useInput((_input, key) => {
+        if (key.escape)
+            onEscape();
+        if (focused) {
+            if (key.pageUp)
+                setScroll((s) => Math.min(s + 10, maxScroll));
+            if (key.pageDown)
+                setScroll((s) => Math.max(0, s - 10));
+        }
+        else if (view === 'agents') {
+            // Scroll only on the agents view — every other long view
+            // (/help, /notes, /diff…) owns PgUp/PgDn for its own scrolling.
+            if (solo) {
+                if (key.pageUp)
+                    setSoloScroll((s) => Math.min(Math.min(s, maxSoloScroll) + 5, maxSoloScroll));
+                if (key.pageDown)
+                    setSoloScroll((s) => Math.max(0, Math.min(s, maxSoloScroll) - 5));
+            }
+            else {
+                if (key.pageUp)
+                    setGridScroll((s) => Math.max(0, Math.min(s, maxGridScroll) - 1));
+                if (key.pageDown)
+                    setGridScroll((s) => Math.min(Math.min(s, maxGridScroll) + 1, maxGridScroll));
+            }
+        }
+    });
+    const p = ctl.sessionProvider();
+    const activeCount = agents.filter((a) => ['working', 'thinking', 'listening', 'waiting'].includes(a.state)).length;
+    const totalCost = agents.reduce((s, a) => s + (a.cost ?? 0), 0);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: "cyan", color: "black", bold: true, children: [' ', "\u2302 HUB", ' '] }), _jsxs(Text, { bold: true, color: "cyanBright", children: [' ', LOGO] })] }), _jsxs(Text, { color: "gray", children: [p ? `${p.name}:${ctl.session.model}` : '—', " \u00B7 ", p ? p.baseUrl.replace(/^https?:\/\//, '') : '', " \u00B7", ' ', ctl.session.approvalMode, " \u00B7 ", ctl.session.soundEnabled ? '🔔' : '🔕'] })] }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\uD83D\uDCC1 ", folder] }), view === 'settings' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "global", onClose: onEscape })) : view === 'settings-session' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "session", onClose: onEscape })) : view === 'board' ? (_jsx(BoardView, { board: ctl.board })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills() })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists() })) : view === 'help' ? (_jsx(HelpView, {})) : agents.length === 0 ? (_jsx(Box, { borderStyle: "round", borderColor: "gray", flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: "gray", children: t('main.empty') }) })) : focused ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentPanel, { agent: focused, logs: visibleLogs, width: "100%", expanded: true }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [t('m.focusHint', { name: focused.name }), clampedScroll > 0 ? ` · ↑${clampedScroll}` : ''] })] })) : (_jsxs(Box, { flexDirection: "column", children: [clampedGrid > 0 ? _jsx(Text, { color: "gray", children: t('grid.above', { n: clampedGrid }) }) : null, _jsx(Box, { flexWrap: "wrap", children: visibleAgents.map((a) => (_jsx(AgentPanel, { agent: a, logs: solo
+                                ? soloLogs.slice(Math.max(0, soloLogs.length - logsPerAgent - clampedSolo), soloLogs.length - clampedSolo)
+                                : ctl.board.logsFor(a.id, logsPerAgent), width: width }, a.id))) }), solo && clampedSolo > 0 ? (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u2191", clampedSolo, " \u00B7 PgDn \u21E3"] })) : null, agents.length - clampedGrid - visibleAgents.length > 0 ? (_jsx(Text, { color: "gray", children: t('grid.below', { n: agents.length - clampedGrid - visibleAgents.length }) })) : null] })), systemLines.length > 0 && !settingsOpen && (_jsx(Box, { flexDirection: "column", children: systemLines.map((l, i) => (_jsx(Text, { color: "gray", wrap: "truncate-end", children: l }, i))) })), 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: t('main.placeholder'), agentNames: agentNames, onSubmit: onInput, onEscape: onEscape, notify: notify }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: agents.length === 0
+                    ? t('main.status')
+                    : t('status.bar', {
+                        agents: agents.length,
+                        active: activeCount,
+                        cost: fmtCost(totalCost),
+                    }) +
+                        (ctl.questions.length > 0 ? ` · ❓${ctl.questions.length}` : '') +
+                        (ctl.approvals.length > 0 ? ` · ⏳${ctl.approvals.length}` : '') +
+                        (focused ? ` · 🎯 ${focused.name}` : '') })] }));
+}

package/dist/ui/ApprovalPrompt.js

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { t } from '../i18n.js';
+const SENTINEL = '<<NAME>>';
+export function ApprovalPrompt({ request, pendingCount, onAnswer }) {
+    useInput((input) => {
+        const c = input.toLowerCase();
+        if (c === 'y' || c === 'o')
+            onAnswer(request.id, true);
+        else if (c === 'n')
+            onAnswer(request.id, false);
+        else if (c === 'a')
+            onAnswer(request.id, true, true);
+    });
+    // appr.wants = "Agent {name} wants to run:" — render the name bold by splitting on the placeholder.
+    const [before, after = ''] = t('appr.wants', { name: SENTINEL }).split(SENTINEL);
+    return (_jsxs(Box, { borderStyle: "double", borderColor: "magenta", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "magenta", children: [t('appr.title'), pendingCount > 1 ? t('appr.pending', { n: pendingCount }) : ''] }), _jsxs(Text, { children: [before, _jsx(Text, { bold: true, children: request.agentName }), after] }), _jsxs(Text, { color: "yellowBright", bold: true, children: ['  $ ', request.command] }), _jsx(Text, { color: "gray", children: t('appr.keys') })] }));
+}

package/dist/ui/AttachApp.js

@@ -0,0 +1,126 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import net from 'node:net';
+import { Box, Static, Text, useApp } from 'ink';
+import { ApprovalPrompt } from './ApprovalPrompt.js';
+import { CommandInput } from './CommandInput.js';
+import { KIND_COLOR, KIND_DIM } from './AgentPanel.js';
+import { Md } from './Md.js';
+import { QuestionPrompt } from './QuestionPrompt.js';
+import { Spinner } from './Spinner.js';
+import { STATE_LABEL, stateLabel, elapsed, truncate } from './theme.js';
+import { fmtCost } from '../pricing.js';
+import { t } from '../i18n.js';
+const noop = () => { };
+export function AttachApp({ agentRef, sock }) {
+    const { exit } = useApp();
+    const [info, setInfo] = useState(null);
+    const [others, setOthers] = useState([]);
+    const [lines, setLines] = useState([]);
+    const [approval, setApproval] = useState(null);
+    const [question, setQuestion] = useState(null);
+    const [gone, setGone] = useState(false);
+    const socketRef = useRef(null);
+    const keySeq = useRef(0);
+    const lastBellId = useRef('');
+    useEffect(() => {
+        const socket = net.connect(sock);
+        socketRef.current = socket;
+        let buffer = '';
+        socket.setEncoding('utf8');
+        socket.on('connect', () => {
+            socket.write(JSON.stringify({ type: 'hello', agent: agentRef }) + '\n');
+        });
+        socket.on('data', (chunk) => {
+            buffer += chunk;
+            let nl;
+            while ((nl = buffer.indexOf('\n')) !== -1) {
+                const line = buffer.slice(0, nl).trim();
+                buffer = buffer.slice(nl + 1);
+                if (!line)
+                    continue;
+                let msg;
+                try {
+                    msg = JSON.parse(line);
+                }
+                catch {
+                    continue;
+                }
+                if (msg.type === 'state') {
+                    setInfo(msg.info ?? null);
+                    setOthers(Array.isArray(msg.others) ? msg.others : []);
+                    setApproval(msg.approval ?? null);
+                    setQuestion(msg.question ?? null);
+                    if (Array.isArray(msg.logs) && msg.logs.length > 0) {
+                        setLines((prev) => [...prev, ...msg.logs.map((l) => ({ key: ++keySeq.current, log: l }))]);
+                    }
+                }
+                else if (msg.type === 'bye') {
+                    setGone(true);
+                }
+            }
+        });
+        const drop = () => setGone(true);
+        socket.on('close', drop);
+        socket.on('error', drop);
+        return () => {
+            socket.destroy();
+        };
+    }, [agentRef, sock]);
+    // Audible alert in THIS terminal when a new interaction arrives — the hub
+    // also rings, but the user may well be looking at the agent's terminal.
+    useEffect(() => {
+        const id = approval ? `a${approval.id}` : question ? `q${question.id}` : '';
+        if (id && id !== lastBellId.current) {
+            lastBellId.current = id;
+            process.stdout.write('\x07');
+            setTimeout(() => process.stdout.write('\x07'), 300);
+        }
+        if (!id)
+            lastBellId.current = '';
+    }, [approval?.id, question?.id]);
+    const wire = (msg) => {
+        socketRef.current?.write(JSON.stringify(msg) + '\n');
+    };
+    const send = (text) => {
+        const v = text.trim();
+        if (!v)
+            return;
+        if (v === '/quit' || v === '/exit' || v === '/detach') {
+            exit();
+            return;
+        }
+        // /spawn <task> — launch agent N+1 from THIS terminal; its own dedicated
+        // terminal opens automatically (the main TUI stays the session hub).
+        const spawn = v.match(/^\/spawn\s+(.+)$/s);
+        if (spawn) {
+            wire({ type: 'spawn', text: spawn[1] });
+            return;
+        }
+        wire({ type: 'input', agent: agentRef, text: v });
+    };
+    const st = info ? STATE_LABEL[info.state] : null;
+    const busy = info ? ['thinking', 'working', 'listening'].includes(info.state) : false;
+    const interacting = Boolean(approval || question);
+    const banner = (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { backgroundColor: info?.color ?? 'gray', color: "black", bold: true, children: [' ', "\u26D3 ", t('attach.banner'), ' '] }), info ? (_jsxs(Text, { color: info.color, bold: true, children: [' ', "\u25C6 ", info.name, info.alias && info.alias !== info.name ? _jsxs(Text, { color: "gray", children: [" @", info.alias] }) : null] })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: lines, children: (item) => (_jsx(Text, { color: KIND_COLOR[item.log.kind] ?? 'white', italic: KIND_DIM[item.log.kind] ?? false, wrap: "wrap", children: item.log.text }, item.key)) }), busy && info && st && !interacting ? (
+            /* COMPACT region while the agent runs: small + borderless, so Ink's
+             * constant repaints (spinner ticks) never erase tall zones — this is
+             * what used to leave stray blank lines in the native scrollback. */
+            _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { backgroundColor: info.color, color: "black", bold: true, children: [' ', "\u26D3 ", info.name, ' '] }), ' ', _jsxs(Text, { backgroundColor: st.color, color: "black", bold: true, children: [' ', st.icon, " ", stateLabel(info.state), ' '] }), ' ', _jsx(Spinner, { color: info.color }), _jsxs(Text, { color: "gray", children: [' ', "\u00B7 ", elapsed(info.startedAt), " \u00B7 ", info.steps, " st \u00B7", ' ', Math.round((info.tokensIn + info.tokensOut) / 1000), "k \u00B7", ' '] }), _jsx(Text, { color: "greenBright", children: info.cost === null ? '$—' : fmtCost(info.cost) })] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["\u25B8 ", truncate(info.currentAction, 120)] })) : null, others.length > 0 ? (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u21C4", ' ', others
+                                .map((o) => `${o.name} [${stateLabel(o.state)}] ${truncate(o.currentAction || o.task, 40)}`)
+                                .join(' · ')] })) : null] })) : (
+            /* FULL panel when idle / waiting / done — repaints are rare here. */
+            _jsxs(Box, { borderStyle: "round", 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, { backgroundColor: st.color, color: "black", bold: true, children: [' ', st.icon, " ", stateLabel(info.state), ' '] })] }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [truncate(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 ? 'redBright' : info.ctxPct >= 70 ? 'yellowBright' : 'gray', children: ["\u25D4", info.ctxPct, "% \u00B7", ' '] })) : null, _jsx(Text, { color: "greenBright", children: info.cost === null ? '$—' : fmtCost(info.cost) })] })] }), _jsxs(Text, { color: "gray", wrap: "wrap", children: ["\u25E6 ", info.task] }), info.currentAction ? (_jsxs(Text, { color: info.color, wrap: "truncate-end", children: ["\u25B8 ", 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: "gray", wrap: "truncate-end", children: ["\u21C4", ' ', others
+                                        .map((o) => `${o.name} [${stateLabel(o.state)}] ${truncate(o.currentAction || o.task, 40)}`)
+                                        .join(' · ')] })) : 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: "greenBright", bold: true, children: t('agent.summary') }), _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: "redBright", 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(Text, { color: "gray", wrap: "truncate-end", children: t('attach.hint') })] }));
+}