@parallel-cli/parallel 0.3.3 → 0.4.0

package/dist/ui/AgentPanel.js

@@ -1,25 +1,94 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
-import { Spinner } from './Spinner.js';
 import { fmtCost } from '../pricing.js';
-import { STATE_LABEL, stateLabel, elapsed, truncate } from './theme.js';
+import { elapsed, truncate } from './theme.js';
 import { Md } from './Md.js';
-import { t } from '../i18n.js';
+import { Spinner } from './Spinner.js';
+import { Timeline } from './Timeline.js';
+import { MARK, MODE, STATE_META, UI, ANIM } from './tokens.js';
 export const KIND_COLOR = {
-    tool: 'cyanBright',
-    llm: 'gray',
-    error: 'red',
-    note: 'magentaBright',
-    system: 'yellow',
-    info: 'white',
+    tool: UI.accent,
+    llm: UI.muted,
+    error: UI.danger,
+    note: UI.note,
+    system: UI.warn,
+    info: UI.text,
 };
-/** Thinking/commentary lines (kind 'llm') are dimmed + italic, à la Codex/Claude Code. */
 export const KIND_DIM = { llm: true };
+export function cleanHubSummary(text) {
+    return text
+        .replace(/^#{1,6}\s+/gm, '')
+        .replace(/\*\*(.*?)\*\*/g, '$1')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/^\s*[-*]\s+/gm, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+export function formatAgentTelemetry(agent) {
+    return `${elapsed(agent.startedAt)} · ${agent.cost === null ? '$-' : fmtCost(agent.cost)}`;
+}
+function ResultBlock({ agent, compact = false }) {
+    if (!agent.lastResult)
+        return null;
+    if (compact) {
+        return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: UI.ok, children: [MARK.done, " "] }), _jsx(Text, { children: truncate(agent.lastResult, 110) })] }));
+    }
+    return (_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: agent.lastResult })] }));
+}
+const SPINNER_STATES = new Set(['thinking', 'working', 'listening', 'waiting']);
+function spinnerColor(state) {
+    if (state === 'working')
+        return 'cyan';
+    return 'yellow'; // thinking, listening, waiting
+}
+function modeChar(mode) {
+    if (mode === 'ask')
+        return { char: '?', color: MODE.ask };
+    if (mode === 'plan')
+        return { char: '△', color: MODE.plan };
+    return null; // task = no mark
+}
+function agentDisplayName(agent) {
+    return agent.alias && agent.alias !== agent.name ? `${agent.alias} ${agent.name}` : agent.alias || agent.name;
+}
+export function AgentRow({ agent, logs, cols, }) {
+    const meta = STATE_META[agent.state];
+    // ── State transition pulse (Phase 5) ──
+    const prevState = useRef(agent.state);
+    const [pulse, setPulse] = useState(false);
+    useEffect(() => {
+        if (agent.state !== prevState.current) {
+            setPulse(true);
+            const timer = setTimeout(() => setPulse(false), ANIM.pulseMs);
+            prevState.current = agent.state;
+            return () => clearTimeout(timer);
+        }
+    }, [agent.state]);
+    // Pulse bumps the mark/spinner color to whiteBright for 400ms
+    const pulseColor = pulse ? 'whiteBright' : null;
+    const name = agentDisplayName(agent);
+    const mode = modeChar(agent.mode);
+    const taskMax = Math.max(10, cols - 18);
+    const line2Max = Math.max(10, cols - 2);
+    const telemetry = formatAgentTelemetry(agent);
+    // Line 2 content
+    let line2 = null;
+    if (agent.lastResult) {
+        line2 = { text: `✓ ${truncate(cleanHubSummary(agent.lastResult), line2Max)}`, color: UI.ok };
+    }
+    else if (agent.currentAction) {
+        line2 = { text: `▸ ${truncate(agent.currentAction, line2Max)}`, color: UI.accent };
+    }
+    else {
+        line2 = { text: meta.label, color: meta.color };
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, paddingLeft: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [SPINNER_STATES.has(agent.state) ? (_jsx(Spinner, { color: pulseColor ?? spinnerColor(agent.state) })) : (_jsx(Text, { color: pulseColor ?? meta.color, bold: true, children: meta.mark })), _jsx(Text, { children: " " }), _jsx(Text, { color: agent.color, bold: true, children: name }), mode ? (_jsxs(Text, { color: mode.color, children: [" ", mode.char] })) : null, _jsxs(Text, { color: UI.text, children: ["  ", truncate(agent.task, taskMax)] })] }), _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { color: line2.color, wrap: "truncate-end", children: line2.text }), _jsx(Text, { color: UI.muted, children: telemetry })] })] }));
+}
+export function AgentTranscript({ agent, logs, raw = false, scrolled = 0, }) {
+    const meta = STATE_META[agent.state];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsx(Text, { color: agent.color, bold: true, children: agent.name }), agent.alias && agent.alias !== agent.name ? _jsxs(Text, { color: UI.muted, children: [" @", agent.alias] }) : null, _jsx(Text, { color: UI.muted, children: "  " }), _jsxs(Text, { color: meta.color, bold: true, children: [meta.mark, " ", meta.label] })] }), _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: [agent.model, " \u00B7 ", formatAgentTelemetry(agent)] })] }), _jsxs(Text, { color: UI.muted, wrap: "wrap", children: ["Task  ", _jsx(Text, { color: UI.text, children: agent.task })] }), agent.claims && agent.claims.length > 0 ? (_jsxs(Text, { color: UI.warn, wrap: "truncate-end", children: ["Claims  ", agent.claims.join(' ')] })) : null, agent.currentAction ? (_jsxs(Text, { color: UI.accent, wrap: "truncate-end", children: ["Current  ", truncate(agent.currentAction, 140)] })) : null, agent.state === 'done' || agent.lastResult ? _jsx(ResultBlock, { agent: agent }) : null, _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: UI.muted, bold: true, children: ["Activity", raw ? ' raw' : ''] }), _jsx(Timeline, { logs: logs, raw: raw })] }), _jsxs(Text, { color: UI.muted, wrap: "truncate-end", children: ["PgUp/PgDn scroll \u00B7 /raw toggles detail \u00B7 Esc returns", scrolled > 0 ? ` · ${scrolled} older` : ''] })] }));
+}
 export function AgentPanel({ agent, logs, width, expanded = false, }) {
-    const st = STATE_LABEL[agent.state];
-    const busy = agent.state === 'thinking' || agent.state === 'working' || agent.state === 'listening';
-    return (_jsx(Box, { width: width, paddingX: 0, children: _jsxs(Box, { borderStyle: agent.state === 'listening' ? 'double' : 'round', borderColor: agent.state === 'error' ? 'red' : agent.state === 'listening' ? 'cyanBright' : agent.color, flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsxs(Text, { color: agent.color, bold: true, children: ["\u25C6 ", agent.name, agent.alias && agent.alias !== agent.name ? _jsxs(Text, { color: "gray", children: [" @", agent.alias] }) : null, ' '] }), _jsxs(Text, { backgroundColor: st.color, color: "black", bold: true, children: [' ', st.icon, " ", stateLabel(agent.state), ' '] }), busy && (_jsxs(Text, { children: [' ', _jsx(Spinner, { color: agent.color })] }))] }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [agent.specialist ? `🎓${agent.specialist} · ` : '', truncate(agent.model, 18), " \u00B7 ", elapsed(agent.startedAt), " \u00B7 ", agent.steps, " st \u00B7", ' ', Math.round((agent.tokensIn + agent.tokensOut) / 1000), "k \u00B7", ' ', agent.ctxPct !== undefined ? (_jsxs(Text, { color: agent.ctxPct >= 90 ? 'redBright' : agent.ctxPct >= 70 ? 'yellowBright' : 'gray', children: ["\u25D4", agent.ctxPct, "% \u00B7", ' '] })) : null, _jsx(Text, { color: "greenBright", children: agent.cost === null ? '$—' : fmtCost(agent.cost) })] })] }), _jsxs(Text, { color: "gray", wrap: expanded ? 'wrap' : 'truncate-end', children: ["\u25E6 ", expanded ? agent.task : truncate(agent.task, 120)] }), agent.claims && agent.claims.length > 0 ? (_jsxs(Text, { color: "yellowBright", wrap: "truncate-end", children: ["\uD83D\uDEA9 ", agent.claims.join(' ')] })) : null, agent.currentAction ? (_jsxs(Text, { color: agent.color, wrap: "truncate-end", children: ["\u25B8 ", truncate(agent.currentAction, 120)] })) : null, agent.lastResult ? (_jsxs(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: "greenBright", bold: true, children: t('agent.summary') }), expanded || agent.state === 'done' ? (
-                        // A finished agent's summary is the deliverable: show it ENTIRELY,
-                        // wrapped and lightly formatted — never truncated.
-                        _jsx(Md, { text: agent.lastResult })) : (_jsx(Text, { color: "white", wrap: "truncate-end", children: truncate(agent.lastResult, 260) }))] })) : null, _jsx(Box, { flexDirection: "column", marginTop: 0, children: logs.map((l, i) => (_jsx(Text, { color: KIND_COLOR[l.kind] ?? 'white', italic: KIND_DIM[l.kind] ?? false, wrap: "truncate-end", children: truncate(l.text, expanded ? 220 : 140) }, i))) })] }) }));
+    return (_jsx(Box, { width: width, flexDirection: "column", children: expanded ? _jsx(AgentTranscript, { agent: agent, logs: logs }) : _jsx(AgentRow, { agent: agent, logs: logs, cols: 100 }) }));
 }

package/dist/ui/App.js

@@ -7,16 +7,18 @@ 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 { AgentRow, AgentTranscript } 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';
+import { BRAND, CHROME, STATE, STATE_META, UI, middleTruncate } from './tokens.js';
+const LOGO = 'Parallel';
+// Version from package.json (v0.3.3). Hardcoded — rootDir: "src" prevents importing ../../package.json.
+const VERSION = '0.3.3';
 function usableProvider(config) {
     const p = getProvider(config);
     return p && p.apiKey && (p.defaultModel || p.models[0]) ? p : undefined;
@@ -60,7 +62,13 @@ export function App({ config, initialFolder }) {
     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 [rawLogs, setRawLogs] = useState(false);
+    const [systemLines, setSystemLines] = useState(directFolder
+        ? [
+            { text: t('main.ready1', { folder: directFolder }), level: 'ok' },
+            { text: t('main.ready2'), level: 'info' },
+        ]
+        : []);
     const [inputReady, setInputReady] = useState(Boolean(directFolder));
     const ctl = ctlRef.current;
     // Re-render (throttled) on every blackboard/controller update.
@@ -97,11 +105,33 @@ export function App({ config, initialFolder }) {
     }, [ctl]);
     const ui = useMemo(() => ({
         setView,
-        system: (line) => setSystemLines((ls) => [...ls.slice(-5), line]),
+        system: (line, level) => setSystemLines((ls) => [...ls.slice(-5), { text: line, level }]),
         exit: () => {
             setTimeout(() => exit(), 50);
         },
         setFocus,
+        toggleRaw: () => setRawLogs((v) => {
+            const next = !v;
+            setSystemLines((ls) => [
+                ...ls.slice(-5),
+                { text: t(next ? 'm.rawOn' : 'm.rawOff'), level: 'info' },
+            ]);
+            return next;
+        }),
+        copyLatest: () => {
+            const agents = [...(ctlRef.current?.board.agents.values() ?? [])].filter((a) => a.lastResult);
+            const latest = agents.sort((a, b) => b.startedAt - a.startedAt)[0];
+            if (!latest?.lastResult) {
+                setSystemLines((ls) => [...ls.slice(-5), { text: t('m.copyNone'), level: 'warn' }]);
+                return;
+            }
+            const encoded = Buffer.from(latest.lastResult).toString('base64');
+            process.stdout.write(`\x1b]52;c;${encoded}\x07`);
+            setSystemLines((ls) => [
+                ...ls.slice(-5),
+                { text: t('m.copyDone', { name: latest.name }), level: 'ok' },
+            ]);
+        },
     }), [exit]);
     // ---------- wizard transitions ----------
     // In normal launches, a complete config goes straight to the main TUI.
@@ -195,7 +225,10 @@ export function App({ config, initialFolder }) {
         enterMain();
     };
     const enterMain = () => {
-        setSystemLines([t('main.ready1', { folder }), t('main.ready2')]);
+        setSystemLines([
+            { text: t('main.ready1', { folder }), level: 'ok' },
+            { text: t('main.ready2'), level: 'info' },
+        ]);
         setPhase('main');
         setInputReady(false);
         setTimeout(() => setInputReady(true), 350);
@@ -301,7 +334,7 @@ export function App({ config, initialFolder }) {
     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) => {
+    return (_jsx(MainScreen, { ctl: ctl, folder: folder, view: view, focus: focus, rawLogs: rawLogs, systemLines: systemLines, agentNames: agentNames, approval: approval, question: question, inputActive: inputActive, onInput: (value, images) => {
             const v = value.trim();
             // Focus mode: plain text goes straight to the focused agent.
             if (focus && v && !v.startsWith('/') && !v.startsWith('@')) {
@@ -315,86 +348,183 @@ export function App({ config, initialFolder }) {
                 setView('agents');
             else if (focus) {
                 setFocus(null);
-                ui.system(t('m.focusOff'));
+                ui.system(t('m.focusOff'), 'info');
             }
         }, notify: ui.system }));
 }
-function MainScreen({ ctl, folder, view, focus, systemLines, agentNames, approval, question, inputActive, onInput, onEscape, notify, }) {
+function MainScreen({ ctl, folder, view, focus, rawLogs, 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 rows = stdout?.rows ?? 30;
     const settingsOpen = view === 'settings' || view === 'settings-session';
+    // Height budget: fixed sections → body gets the remainder.
+    const headerLines = 4; // border-box header (top border + 2 content lines + bottom border)
+    const footerLine2 = 1; // always shown
+    const footerLine1 = agents.length === 0 ? 1 : 0;
+    const footerLines = footerLine1 + footerLine2;
+    // System messages: count actual rendered lines (including \n splits + "Session" label).
+    const systemMsgLines = systemLines.length > 0 && !settingsOpen
+        ? (agents.length > 0 ? 1 : 0) + // "Session" label
+            (agents.length > 0
+                ? systemLines
+                    .filter((l) => !/^Ready|^Type a task|^⚡ Ready|^Default \/task|^Agent .* launched/.test(l.text))
+                    .slice(-2)
+                : systemLines).reduce((sum, l) => sum + l.text.split('\n').length, 0)
+        : 0;
+    const inputLines = 4; // modeHint (1) + input border box (3)
+    const spacerLines = 2; // after header + before footer
+    const approvalHeight = approval ? 6 : 0;
+    const questionHeight = question ? 7 : 0;
+    const bodyHeight = Math.max(1, rows - headerLines - footerLines - systemMsgLines - inputLines - spacerLines - approvalHeight - questionHeight);
     // 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);
+    const [focusFollowTail, setFocusFollowTail] = useState(true);
     useEffect(() => setScroll(0), [focus]);
-    const FOCUS_LOGS = 20;
+    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);
     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.
+    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 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(() => {
+        if (focusFollowTail)
+            setScroll(0);
+    }, [logSeq, focused?.state, focusFollowTail]);
+    useEffect(() => {
+        if (hubFollowTail)
+            setHubScroll(0);
+    }, [logSeq, agents.length, hubFollowTail]);
+    // Scroll helpers (also used by mouse wheel handler below).
+    const scrollFocusUp = () => {
+        setFocusFollowTail(false);
+        setScroll((s) => Math.min(s + 1, maxScroll));
+    };
+    const scrollFocusDown = () => {
+        setScroll((s) => {
+            const next = Math.max(0, s - 1);
+            if (next === 0)
+                setFocusFollowTail(true);
+            return next;
+        });
+    };
+    const scrollHubUp = () => {
+        setHubFollowTail(false);
+        setHubScroll((s) => Math.min(Math.min(s, maxHubScroll) + 1, maxHubScroll));
+    };
+    const scrollHubDown = () => {
+        setHubScroll((s) => {
+            const next = Math.max(0, Math.min(s, maxHubScroll) - 1);
+            if (next === 0)
+                setHubFollowTail(true);
+            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).
     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));
+            if (key.pageUp || key.upArrow)
+                scrollFocusUp();
+            if (key.pageDown || key.downArrow)
+                scrollFocusDown();
         }
         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));
+            if (key.pageUp || key.upArrow)
+                scrollHubUp();
+            if (key.pageDown || key.downArrow)
+                scrollHubDown();
+        }
+    }, { isActive: !inputActive });
+    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;
+    const errorCount = agents.filter((a) => ['error', 'stopped'].includes(a.state)).length;
+    const globalDotColor = workingCount > 0 ? 'green'
+        : agents.some((a) => ['waiting', 'paused'].includes(a.state)) ? 'yellow'
+            : 'gray';
+    const folderMax = Math.max(10, cols - 40);
+    // View breadcrumb: when not in agents view, show the view name instead of "control room".
+    const VIEW_LABEL = {
+        agents: 'control room',
+        board: 'coordination',
+        diff: 'diffs',
+        notes: 'notes',
+        help: 'help',
+        settings: 'settings',
+        'settings-session': 'session settings',
+        sessions: 'sessions',
+        cost: 'cost',
+        skills: 'skills',
+        specialists: 'specialists',
+    };
+    const viewLabel = VIEW_LABEL[view] ?? 'control room';
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: CHROME.muted, children: ["\u256D", '─'.repeat(cols - 2), "\u256E"] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: CHROME.muted, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: "space-between", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: BRAND.primary, children: "PARALLEL" }), _jsx(Text, { color: globalDotColor, children: " \u25CF" }), _jsxs(Text, { color: view === 'agents' ? CHROME.muted : BRAND.muted, children: [" ", viewLabel] }), rawLogs ? _jsx(Text, { color: UI.warn, children: " [RAW]" }) : null] }), _jsx(Text, { color: CHROME.muted, children: middleTruncate(folder, folderMax) })] }), _jsx(Text, { color: CHROME.muted, children: " \u2502" })] }), _jsxs(Box, { flexDirection: "row", width: cols, children: [_jsx(Text, { color: CHROME.muted, children: "\u2502 " }), _jsxs(Box, { flexDirection: "row", width: cols - 4, justifyContent: agents.length > 0 ? 'space-between' : 'flex-end', children: [agents.length > 0 ? (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { children: [_jsxs(Text, { color: CHROME.muted, children: ["\u25C7 ", idleCount, " idle"] }), ' · ', _jsxs(Text, { color: workingCount > 0 ? STATE.working : CHROME.muted, children: ["\u25CF ", workingCount, " active"] }), ' · ', _jsxs(Text, { color: doneCount > 0 ? STATE.done : CHROME.muted, children: ["\u2713 ", doneCount, " done"] }), ' · ', _jsxs(Text, { color: errorCount > 0 ? STATE.error : CHROME.muted, children: ["\u2717 ", errorCount, " err"] })] }) })) : null, _jsxs(Text, { color: CHROME.muted, children: ["v", VERSION] })] }), _jsx(Text, { color: CHROME.muted, children: " \u2502" })] }), _jsxs(Text, { color: CHROME.muted, children: ["\u2570", '─'.repeat(cols - 2), "\u256F"] })] }), _jsx(Text, { children: " " }), _jsx(Box, { height: bodyHeight, overflow: "hidden", flexDirection: "column", children: view === 'settings' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "global", onClose: onEscape })) : view === 'settings-session' ? (_jsx(SettingsPanel, { ctl: ctl, scope: "session", onClose: onEscape })) : view === 'board' ? (_jsx(BoardView, { board: ctl.board })) : view === 'notes' ? (_jsx(NotesView, { board: ctl.board })) : view === 'sessions' ? (_jsx(SessionsView, { projectRoot: ctl.projectRoot })) : view === 'diff' ? (_jsx(DiffView, { board: ctl.board })) : view === 'cost' ? (_jsx(CostView, { board: ctl.board })) : view === 'skills' ? (_jsx(SkillsView, { skills: ctl.getSkills() })) : view === 'specialists' ? (_jsx(SpecialistsView, { specialists: ctl.getSpecialists() })) : view === 'help' ? (_jsx(HelpView, {})) : agents.length === 0 ? (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: "gray", children: t('main.empty') }) })) : focused ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentTranscript, { agent: focused, logs: visibleLogs, raw: rawLogs, scrolled: clampedScroll }), !focusFollowTail ? _jsx(Text, { color: UI.warn, children: "Viewing older \u00B7 PgDn to latest" }) : null] })) : (_jsx(AgentHub, { agents: agents, ctl: ctl, cols: cols, scroll: clampedHub, visibleRows: hubRows })) }), systemLines.length > 0 && !settingsOpen && (_jsxs(Box, { flexDirection: "column", children: [agents.length > 0 ? _jsx(Text, { color: UI.muted, bold: true, children: "Session" }) : null, (agents.length > 0
+                        ? systemLines
+                            .filter((l) => !/^Ready|^Type a task|^⚡ Ready|^Default \/task|^Agent .* launched/.test(l.text))
+                            .slice(-2)
+                        : systemLines).flatMap((l, i) => {
+                        const levelColor = l.level === 'ok' ? UI.ok :
+                            l.level === 'warn' ? UI.warn :
+                                l.level === 'error' ? UI.danger :
+                                    'gray';
+                        // 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 :
+                                    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] })] })] }));
+}
+function groupAgents(agents) {
+    const needs = agents.filter((a) => ['waiting', 'paused'].includes(a.state));
+    const working = agents.filter((a) => ['working', 'thinking', 'listening', 'idle'].includes(a.state));
+    const errors = agents.filter((a) => ['error', 'stopped'].includes(a.state));
+    const completed = agents.filter((a) => a.state === 'done');
+    return [
+        { title: 'Needs input', color: UI.warn, agents: needs },
+        { title: 'Working', color: UI.accent, agents: working },
+        { title: 'Errors', color: UI.danger, agents: errors },
+        { title: 'Completed', color: UI.ok, agents: completed },
+    ].filter((g) => g.agents.length > 0);
+}
+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;
+    const rows = [];
+    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));
         }
-    });
-    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}` : '') })] }));
+        if (groupRows.length === 0)
+            continue;
+        if (rows.length > 0) {
+            rows.push(_jsx(Text, { color: CHROME.separator, children: '─'.repeat(cols - 2) }, `sep-${group.title}`));
+        }
+        rows.push(_jsx(Box, { flexDirection: "column", children: groupRows }, group.title));
+    }
+    const below = Math.max(0, agents.length - scroll - rendered);
+    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

@@ -1,17 +1,39 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, 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 { formatAgentTelemetry, 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 { Timeline } from './Timeline.js';
+import { stateLabel, elapsed, truncate } from './theme.js';
 import { fmtCost } from '../pricing.js';
 import { t } from '../i18n.js';
+import { STATE_META, UI, middleTruncate } from './tokens.js';
 const noop = () => { };
+export function parseAttachCommand(text) {
+    const v = text.trim();
+    if (!v)
+        return null;
+    if (v === '/quit' || v === '/exit' || v === '/detach')
+        return { type: 'detach' };
+    if (v === '/raw')
+        return { type: 'raw' };
+    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';
+        return { type: 'spawn', text: m[2].trim(), mode };
+    }
+    return { type: 'input', text: v };
+}
+export function formatAttachFooter(info) {
+    if (!info)
+        return 'Waiting for agent · /quit';
+    return `${middleTruncate(info.model, 28)} · ${formatAgentTelemetry(info)} · plain text steers · /task new · /quit`;
+}
 export function AttachApp({ agentRef, sock }) {
     const { exit } = useApp();
     const [info, setInfo] = useState(null);
@@ -20,6 +42,7 @@ export function AttachApp({ agentRef, sock }) {
     const [approval, setApproval] = useState(null);
     const [question, setQuestion] = useState(null);
     const [gone, setGone] = useState(false);
+    const [raw, setRaw] = useState(false);
     const socketRef = useRef(null);
     const keySeq = useRef(0);
     const lastBellId = useRef('');
@@ -83,44 +106,46 @@ export function AttachApp({ agentRef, sock }) {
         socketRef.current?.write(JSON.stringify(msg) + '\n');
     };
     const send = (text) => {
-        const v = text.trim();
-        if (!v)
+        const cmd = parseAttachCommand(text);
+        if (!cmd)
             return;
-        if (v === '/quit' || v === '/exit' || v === '/detach') {
+        if (cmd.type === '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] });
+        if (cmd.type === 'raw') {
+            setRaw((r) => !r);
+            return;
+        }
+        // /task|/ask|/plan <text> — launch agent N+1 from this terminal.
+        if (cmd.type === 'spawn') {
+            wire({ type: 'spawn', text: cmd.text, mode: cmd.mode });
             return;
         }
-        wire({ type: 'input', agent: agentRef, text: v });
+        wire({ type: 'input', agent: agentRef, text: cmd.text });
     };
-    const st = info ? STATE_LABEL[info.state] : null;
+    const st = info ? STATE_META[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 ? (
+    const banner = (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: UI.brand, bold: true, children: t('attach.banner') }), info ? (_jsxs(Text, { color: info.color, bold: true, children: [' ', info.name, info.alias && info.alias !== info.name ? _jsxs(Text, { color: UI.muted, children: [" @", info.alias] }) : null] })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [raw ? (_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)) })) : null, 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
+            _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] })) : (
+                                .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] })) : (
             /* 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 ? (
+            _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: "gray", wrap: "truncate-end", children: ["\u21C4", ' ', others
+                            _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, 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) => {
+                                        .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) => {
                     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') })] }));
+                } }, 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) }) })] }));
 }