omniharness-cli 0.1.81 → 0.1.83

package/dist/ui/sidebar.js

@@ -0,0 +1,105 @@
+/**
+ * Data shaping for the sidebar. The layout lives in the Ink component; every
+ * decision it has to make is here so it can be tested without a terminal.
+ *
+ * The shape follows OpenCode's session sidebar (MIT, sst/opencode): a fixed
+ * narrow panel carrying what the conversation column should not have to —
+ * session identity, what is running, and what is queued. The implementation is
+ * ours; Ink has no scrollbox and no absolute positioning, so the behaviour
+ * differs where it has to.
+ */
+/** Fixed width of the panel, matching the measure OpenCode settled on. */
+export const SIDEBAR_WIDTH = 34;
+/**
+ * Below this the terminal cannot hold a sidebar and a readable conversation
+ * at once, so the toggle shows the sidebar *instead of* the conversation
+ * rather than beside it. Ink cannot overlay one panel on another, which is
+ * what OpenCode does at this size.
+ */
+export const SIDEBAR_MIN_SPLIT = 92;
+/**
+ * How the sidebar should be shown, given the terminal width and whether the
+ * user has it toggled on.
+ */
+export function sidebarMode(width, wanted) {
+    if (!wanted)
+        return 'hidden';
+    return width >= SIDEBAR_MIN_SPLIT ? 'split' : 'replace';
+}
+/** Width left for the conversation once the sidebar has taken its share. */
+export function conversationWidth(width, mode) {
+    if (mode !== 'split')
+        return width;
+    return Math.max(20, width - SIDEBAR_WIDTH - 1);
+}
+/**
+ * Render a token count the way it is read: exact while small, then thousands.
+ * A six-digit number in a 34-column panel is noise, not information.
+ */
+export function compactTokens(n) {
+    if (!Number.isFinite(n) || n < 0)
+        return '0';
+    if (n < 1000)
+        return String(Math.round(n));
+    if (n < 1_000_000) {
+        const k = n / 1000;
+        return `${k < 10 ? k.toFixed(1) : Math.round(k)}k`;
+    }
+    return `${(n / 1_000_000).toFixed(1)}M`;
+}
+/**
+ * Cost to four places under a cent, two above. Sub-cent spend is the normal
+ * case for a single turn and "$0.00" would report every one of them as free.
+ */
+export function formatCost(usd) {
+    if (!Number.isFinite(usd) || usd <= 0)
+        return '$0';
+    return usd < 0.01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
+}
+/**
+ * The usage rows, or none at all when nothing has been spent yet. An empty
+ * panel section reads as broken; a missing one reads as "not yet".
+ */
+export function usageRows(usage) {
+    const rows = [];
+    const inTokens = usage.tokensIn ?? 0;
+    const outTokens = usage.tokensOut ?? 0;
+    if (inTokens > 0 || outTokens > 0) {
+        // Only name a direction that was measured: "1.2k in · 0 out" claims zero
+        // output rather than admitting it is not counted here.
+        const parts = [];
+        if (inTokens > 0)
+            parts.push(`${compactTokens(inTokens)} in`);
+        if (outTokens > 0)
+            parts.push(`${compactTokens(outTokens)} out`);
+        rows.push({ label: 'tokens', value: parts.join(' · ') });
+    }
+    if ((usage.costUSD ?? 0) > 0)
+        rows.push({ label: 'cost', value: formatCost(usage.costUSD ?? 0) });
+    if ((usage.requests ?? 0) > 0)
+        rows.push({ label: 'calls', value: String(usage.requests) });
+    return rows;
+}
+/**
+ * Task queue rows. Plain-word markers rather than glyphs, matching the rest of
+ * the interface. The active item is marked so the eye finds it without colour,
+ * which matters under NO_COLOR.
+ */
+export function todoRows(todos, limit, width) {
+    return todos.slice(0, Math.max(0, limit)).map((todo) => ({
+        marker: todo.status === 'done' ? 'x' : todo.status === 'active' ? '>' : '-',
+        title: clip(todo.title, Math.max(4, width)),
+        active: todo.status === 'active',
+    }));
+}
+/** How many queued items were not shown, for a "+N more" line. */
+export function overflowCount(total, shown) {
+    return Math.max(0, total - shown);
+}
+export function clip(text, width) {
+    const runes = [...text.replace(/\s+/g, ' ')];
+    if (runes.length <= width)
+        return runes.join('');
+    return `${runes.slice(0, Math.max(0, width - 1)).join('')}…`;
+}
+//# sourceMappingURL=sidebar.js.map

package/dist/ui/terminalInterface.js

@@ -9,6 +9,9 @@ import { renderMarkdown } from './markdown.js';
 import { looksLikeDiff, diffSegments } from './diff.js';
 import { palette } from './palette.js';
 import { capabilityLine, recentRows, shortenPath, twoColumn } from './home.js';
+import { conversationWidth, overflowCount, sidebarMode, SIDEBAR_WIDTH, todoRows, usageRows, clip as clipRow } from './sidebar.js';
+import { planViewport } from './viewport.js';
+import { statusMarker, toolHead } from './toolrow.js';
 import { contextMeter, meterBar } from './modelWindows.js';
 import { BEL, SYNC_QUERY, isSyncOutputReply, osc9Notify, osc52Copy, shouldNudgeOnFinish, wrapSynchronizedOutput } from './termcaps.js';
 import { KITTY_POP, KITTY_PUSH, KITTY_QUERY, isEncodedKey, isKittyQueryResponse, parseRawKey } from './keys.js';
@@ -86,8 +89,12 @@ const PERM_COLOR = (p) => (p === 'bypass' ? PALETTE.error : p === 'acceptEdits'
  * the end of it, and the chrome ends up further from what it describes.
  */
 const MAX_MEASURE = 100;
+/** Shown after an expanded tool head; the head reserves room for it. */
+const COLLAPSE_HINT = '   Ctrl+T collapse';
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const widthOf = (stdout) => Math.max(48, stdout.columns ?? 80);
+/** Terminal height, floored so the layout maths never goes negative. */
+const rowsOf = (stdout) => Math.max(8, stdout.rows ?? 24);
 const clip = (text, width) => text.length <= width ? text : `${text.slice(0, Math.max(0, width - 1))}…`;
 /** Word-wrap text to width, honoring existing newlines and hard-breaking long words. */
 function wrap(text, width) {
@@ -180,6 +187,30 @@ function TranscriptEntry({ line, width, fallbackModel }) {
     const bullet = line.role === 'user' ? '>' : line.role === 'error' ? '!' : '-';
     return _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, color: colorFor(line.role), children: [bullet, " ", label] }), rows.map((segments, index) => _jsx(SegmentText, { segments: segments, role: line.role }, index)), line.saved ? _jsxs(Text, { dimColor: true, children: ["  ", line.saved] }) : null] });
 }
+/**
+ * The session panel, shown beside the live region on Ctrl+B.
+ *
+ * It carries what the conversation column should not have to: what is
+ * running, what is queued, and what the turn has cost. The shape follows
+ * OpenCode's session sidebar (MIT); the implementation is ours, because Ink
+ * has neither a scrollbox nor absolute positioning, so it cannot scroll
+ * independently or overlay the conversation.
+ *
+ * Sections are absent rather than empty. A heading with nothing under it
+ * reads as something failing to load.
+ */
+function SidebarPanel(props) {
+    const { width, model, mode, perm, workspace, usage, agents, todos, skills, plugins } = props;
+    const inner = Math.max(10, width - 4);
+    // Two columns of slack, not one. At an exact fit Ink still wraps, and a
+    // wrapped value in a 34-column panel shows as a stray blank line under a
+    // bare label — measured, not reasoned about.
+    const value = Math.max(6, inner - LABEL_WIDTH - 2);
+    const usageLines = usageRows(usage);
+    const shownTodos = todoRows(todos, 6, inner - 2);
+    const moreTodos = overflowCount(todos.length, shownTodos.length);
+    return _jsxs(Box, { flexDirection: "column", width: width, borderStyle: "round", borderColor: PALETTE.muted, paddingX: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: "session" }), _jsx(Field, { label: "model", children: clip(model, value) }), _jsx(Field, { label: "mode", children: _jsx(Text, { color: MODE_ACCENT[mode], children: mode }) }), _jsx(Field, { label: "perms", children: _jsx(Text, { color: mode === 'crazy' ? PALETTE.error : PERM_COLOR(perm), children: mode === 'crazy' ? 'bypass' : PERM_LABEL[perm] }) }), _jsx(Field, { label: "cwd", children: shortenPath(workspace, value) }), skills > 0 && _jsx(Field, { label: "skills", children: clip(plugins > 0 ? `${skills} · ${plugins} plugins` : String(skills), value) }), usageLines.length > 0 && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: "usage" }), usageLines.map((row) => _jsx(Field, { label: row.label, children: clip(row.value, value) }, row.label))] }), agents.length > 0 && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: "agents" }), agents.slice(-6).map((lane, index) => _jsxs(Text, { children: [_jsx(Text, { color: AGENT_COLORS[index % AGENT_COLORS.length], children: lane.status === 'error' ? 'FAIL' : lane.status === 'done' ? 'ok  ' : '..  ' }), _jsx(Text, { dimColor: true, children: clipRow(lane.label, inner - 5) })] }, lane.id))] }), shownTodos.length > 0 && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: "plan" }), shownTodos.map((row) => _jsxs(Text, { children: [_jsxs(Text, { color: row.active ? PALETTE.accent : PALETTE.muted, children: [row.marker, " "] }), _jsx(Text, { dimColor: !row.active, children: row.title })] }, row.title)), moreTodos > 0 && _jsxs(Text, { dimColor: true, children: ["+", moreTodos, " more"] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Ctrl+B hides this" }) })] });
+}
 /**
  * Width of the dim label column on the home screen. The value gets whatever is
  * left, and every caller has to subtract this: a value sized to the whole box
@@ -219,8 +250,14 @@ export function TerminalInterface({ engine }) {
     const { stdout } = useStdout();
     const { stdin } = useStdin();
     const [width, setWidth] = useState(() => widthOf(stdout));
+    // Height has to be state for the same reason width is. Maximising and
+    // then floating a window changes rows without necessarily changing
+    // columns, and setting width to the value it already had re-renders
+    // nothing — so the live region kept the height budget of the old
+    // terminal and overran the viewport.
+    const [rows, setRows] = useState(() => rowsOf(stdout));
     const [edit, setEdit] = useState({ value: '', cursor: 0 });
-    const inputWidth = Math.max(16, Math.min(width, MAX_MEASURE) - 12);
+    const inputWidth = Math.max(16, Math.min(width, MAX_MEASURE) - 12); // recomputed below once the split is known
     // Settled transcript. Rendered once each into <Static> — the terminal's own
     // scrollback is the history; there is no in-app viewport to scroll.
     const [lines, setLines] = useState(() => engine.state.messages.map(lineFromMessage));
@@ -256,6 +293,9 @@ export function TerminalInterface({ engine }) {
     // Recent snapshots for the home screen. Read once on mount and left
     // alone: the home screen is only on screen before the first turn.
     const [recentSessions, setRecentSessions] = useState([]);
+    // Off by default: it is a second thing to read, and the conversation is
+    // the first. Ctrl+B brings it in.
+    const [sidebarWanted, setSidebarWanted] = useState(false);
     const [layoutDebug, setLayoutDebug] = useState(false);
     const syncRestoreRef = useRef(null);
     const pushLine = (line) => setLines((current) => [...current, line]);
@@ -273,7 +313,10 @@ export function TerminalInterface({ engine }) {
         return () => { alive = false; };
     }, []);
     useEffect(() => {
-        const onResize = () => setWidth(widthOf(stdout));
+        const onResize = () => {
+            setWidth(widthOf(stdout));
+            setRows(rowsOf(stdout));
+        };
         stdout.on('resize', onResize);
         stdout.write(KITTY_PUSH);
         let kittyTimer;
@@ -696,6 +739,9 @@ export function TerminalInterface({ engine }) {
             case 'ctrlE':
                 cycleMode();
                 return;
+            case 'ctrlB':
+                setSidebarWanted((on) => !on);
+                return;
             case 'up':
                 if (sessionsOpen) {
                     setSessionsIndex((current) => clamp(current - 1, 0, Math.max(0, sessionsList.length - 1)));
@@ -789,6 +835,10 @@ export function TerminalInterface({ engine }) {
             applyAction({ kind: 'ctrlE' });
             return;
         }
+        if (key.ctrl && value.toLowerCase() === 'b') {
+            applyAction({ kind: 'ctrlB' });
+            return;
+        }
         if (pickerOpen) {
             if (key.escape) {
                 applyAction({ kind: 'escape' });
@@ -922,10 +972,14 @@ export function TerminalInterface({ engine }) {
     // input box and the text you are reading at opposite ends of the screen.
     // Hold the content to a readable measure and centre it instead; below that
     // measure the gutter collapses and nothing changes.
-    const measure = Math.min(width, MAX_MEASURE);
+    const sideMode = sidebarMode(width, sidebarWanted);
+    // With the panel beside it the conversation gets what is left, so the
+    // centred measure applies to the pair rather than to the text alone.
+    const measure = Math.min(width, sideMode === 'split' ? MAX_MEASURE + SIDEBAR_WIDTH + 1 : MAX_MEASURE);
     const gutter = Math.max(2, Math.floor((width - measure) / 2));
-    const contentWidth = Math.max(20, measure - 6);
-    const terminalRows = stdout.rows ?? 24;
+    const convoWidth = conversationWidth(measure, sideMode);
+    const contentWidth = Math.max(20, convoWidth - 6);
+    const terminalRows = rows;
     const metrics = engine.client.snapshotMetrics();
     const meter = contextMeter(metrics.compression.inputTokens, engine.state.activeModel, metrics.fallback.activeProvider);
     const meterColor = meter.zone === 'danger' ? PALETTE.error : meter.zone === 'warn' ? PALETTE.warn : PALETTE.muted;
@@ -941,33 +995,45 @@ export function TerminalInterface({ engine }) {
     const liveAnswerLines = useMemo(() => renderMarkdown(liveAnswer, contentWidth), [liveAnswer, contentWidth]);
     // Cap the streaming region so a long think/answer can't crowd out the chrome;
     // the complete text lands in <Static> once the event fires.
-    const liveBudget = Math.max(3, terminalRows - 14 - Math.min(6, taskQueue.length) - Math.min(4, agents.length) - editorLayout.lines.length);
+    // What fits. The old budget subtracted a fixed 14 rows of guesswork and
+    // never bounded the sections it was competing with, so a short terminal
+    // still produced a frame taller than itself.
+    const view = planViewport({
+        rows: terminalRows,
+        editorLines: editorLayout.lines.length,
+        toolCards: toolCards.length,
+        todos: taskQueue.length,
+        wantHero: lines.length === 0 && !busy,
+    });
+    const liveBudget = view.liveLines;
     const liveThinkView = liveThinkLines.slice(-Math.max(2, Math.floor(liveBudget / 2)));
     const liveAnswerView = liveAnswerLines.slice(-liveBudget);
     const doneAgents = agents.filter((lane) => lane.status === 'done').length;
-    return _jsxs(Box, { flexDirection: "column", width: width, paddingLeft: gutter, paddingRight: gutter, children: [_jsx(Static, { items: lines, children: (line, index) => _jsx(TranscriptEntry, { line: line, width: contentWidth, fallbackModel: engine.state.activeModel }, index) }, staticKey), _jsxs(Box, { flexDirection: "column", children: [lines.length === 0 && !busy && _jsx(Hero, { width: contentWidth + 2, endpoint: engine.client.endpoint ?? 'omniroute', model: engine.state.activeModel, mode: mode, perm: permMode, workspace: engine.state.workspace.root, sessions: recentSessions, skills: engine.skills.length, plugins: new Set(engine.skills.map((skill) => skill.source).filter((source) => source !== undefined)).size, mcpTools: engine.mcpTools.length }), liveThink !== '' && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warn, children: "\u00B7 thinking" }), liveThinkView.map((segments, index) => _jsx(SegmentText, { segments: segments, role: "thinking" }, index))] }), liveAnswer !== '' && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.accent, children: engine.state.activeModel }), liveAnswerView.map((segments, index) => _jsx(SegmentText, { segments: segments, role: "assistant" }, index))] }), toolCards.slice(-5).map((card) => {
-                        const expanded = expandedTool === card.id;
-                        const dot = card.status === 'running' ? _jsx(Text, { color: PALETTE.warn, children: ".." }) : card.status === 'error' ? _jsx(Text, { color: PALETTE.error, children: "FAIL" }) : _jsx(Text, { color: PALETTE.success, children: "ok" });
-                        const head = card.name === 'run_command'
-                            ? `$ ${clip(card.target || '…', Math.max(10, contentWidth - 20))}`
-                            : `${toolVerb(card.name)}${card.target ? ` ${clip(card.target, Math.max(10, contentWidth - 24))}` : ''}`;
-                        return _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [dot, " ", head, expanded ? '   Ctrl+T collapse' : ''] }), expanded && renderToolBody(card, contentWidth, PALETTE)] }, card.id);
-                    }), agents.length > 0 && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 2, marginTop: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: PALETTE.error, children: "swarm" }), _jsxs(Text, { dimColor: true, children: [doneAgents, "/", agents.length, " lanes done"] })] }), agents.map((lane, index) => {
-                                const color = AGENT_COLORS[index % AGENT_COLORS.length];
-                                const glyph = lane.status === 'done' ? 'ok' : lane.status === 'error' ? 'FAIL' : lane.status === 'working' ? '..' : '--';
-                                const detail = lane.note ?? (lane.label !== lane.id ? lane.label : lane.status);
-                                return _jsxs(Text, { color: color, children: [glyph, " ", lane.id, "  ", _jsx(Text, { dimColor: true, children: clip(detail, Math.max(12, contentWidth - 8)) })] }, lane.id);
-                            })] }), taskQueue.length > 0 && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.accent, paddingX: 2, marginTop: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: PALETTE.accent, children: "plan" }), _jsxs(Text, { dimColor: true, children: [taskQueue.filter((item) => item.status === 'done').length, "/", taskQueue.length, " done"] })] }), taskQueue.slice(-6).map((item) => {
-                                const marker = item.status === 'done' ? 'ok' : item.status === 'active' ? '>' : '-';
-                                const color = item.status === 'done' ? PALETTE.success : item.status === 'active' ? PALETTE.accent : undefined;
-                                return _jsxs(Text, { color: color, dimColor: item.status === 'done', children: [marker, " ", clip(item.title, contentWidth - 4)] }, item.id);
-                            })] }), engine.state.preview && _jsxs(Text, { color: PALETTE.success, children: ["preview live \u00B7 ", engine.state.preview.url] }), sessionsOpen && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 2, marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.info, children: "saved sessions" }), _jsx(Text, { dimColor: true, children: "up/down navigate \u00B7 enter resume \u00B7 esc close" }), sessionsList.map((session, index) => (_jsxs(Text, { color: index === sessionsIndex ? PALETTE.info : undefined, children: [index === sessionsIndex ? '> ' : '  ', session.name, session.savedAt ? _jsxs(Text, { dimColor: true, children: ["  \u00B7  ", session.savedAt] }) : null] }, session.name)))] }), pickerOpen && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.accent, paddingX: 2, marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.accent, children: "choose an OmniRoute model" }), _jsx(Text, { dimColor: true, children: "up/down / j k navigate \u00B7 enter select \u00B7 esc close" }), pickerError && _jsx(Text, { color: PALETTE.error, children: clip(pickerError, contentWidth) }), pickerItems.length === 0 && !pickerError && _jsx(Text, { dimColor: true, children: "no models returned by OmniRoute." }), pickerItems.map((item, index) => {
-                                const header = index === 0 || pickerItems[index - 1].group !== item.group
-                                    ? _jsx(Text, { dimColor: true, bold: true, children: item.group === 'combos' ? 'your combos' : 'auto engine' }, `h-${item.group}`)
-                                    : null;
-                                return _jsxs(Box, { flexDirection: "column", children: [header, _jsxs(Text, { color: index === pickerIndex ? PALETTE.accent : undefined, children: [index === pickerIndex ? '> ' : '  ', item.id, item.strategy ? _jsxs(Text, { dimColor: true, children: ["  \u00B7 ", item.strategy] }) : null, item.id === engine.state.activeModel ? '  *' : ''] })] }, item.id);
-                            })] }), approval && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warn, paddingX: 2, marginTop: 1, children: [_jsxs(Text, { bold: true, color: PALETTE.warn, children: ["approve ", approval.tool, "?"] }), _jsxs(Text, { dimColor: true, children: ["args: ", clip(JSON.stringify(approval.input), contentWidth)] }), approval.scopes.map((scope, index) => _jsxs(Text, { dimColor: true, children: ["  ", index + 1, " \u00B7 ", clip(scope.label, Math.max(12, contentWidth - 6))] }, scope.id)), _jsxs(Text, { dimColor: true, children: ["y allow once \u00B7 n deny \u00B7 t always allow \u00B7 1\u2013", approval.scopes.length, " pick a trust scope"] })] }), layoutDebug && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.muted, paddingX: 2, marginTop: 1, children: [_jsxs(Text, { bold: true, dimColor: true, children: ["layout \u00B7 ", width, "\u00D7", terminalRows, " \u00B7 Ctrl+L to hide"] }), _jsxs(Text, { dimColor: true, children: ["static entries ", lines.length, " \u00B7 live budget ", liveBudget, " \u00B7 think ", liveThinkLines.length, " \u00B7 answer ", liveAnswerLines.length] }), _jsxs(Text, { dimColor: true, children: ["plan ", taskQueue.length, " \u00B7 swarm ", agents.length, " \u00B7 tool cards ", toolCards.length, " \u00B7 editor rows ", editorLayout.lines.length] })] }), queued && _jsxs(Text, { color: PALETTE.warn, children: ["queued \u00B7 ", clip(queued, Math.max(12, contentWidth - 12))] }), _jsx(Box, { borderStyle: "round", borderColor: error ? PALETTE.error : modeAccent, paddingX: 1, marginTop: 1, flexDirection: "column", children: edit.value === ''
-                            ? _jsxs(Text, { color: modeAccent, children: ['>', " ", _jsx(Text, { dimColor: true, children: busy ? 'type to queue the next task' : 'describe the work and press enter' })] })
-                            : editorLayout.lines.map((text, index) => _jsxs(Text, { color: modeAccent, children: [index === 0 ? '> ' : '  ', text] }, index)) }), kitty !== null && _jsx(Text, { dimColor: true, children: kitty ? 'kitty protocol active — Shift+Enter makes a new line' : 'this terminal can\'t distinguish Shift+Enter from Enter — use Ctrl+J for a new line' }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: busy ? modeAccent : PALETTE.muted, children: [busy && _jsx(Spinner, { type: "line" }), busy ? ' ' : '', phase, elapsed ? ` · ${elapsed}` : '', agents.length > 0 ? ` · swarm ${doneAgents}/${agents.length}` : ''] }), _jsxs(Text, { color: PALETTE.muted, children: [_jsx(Text, { color: modeAccent, children: mode }), _jsx(Text, { children: " \u00B7 " }), _jsx(Text, { color: mode === 'crazy' ? PALETTE.error : PERM_COLOR(permMode), children: mode === 'crazy' ? 'bypass' : PERM_LABEL[permMode] }), _jsxs(Text, { children: [" \u00B7 ", engine.state.activeModel] }), metrics.fallback.activeProvider ? _jsxs(Text, { children: [" \u00B7 via ", metrics.fallback.activeProvider] }) : null, contextLabel ? _jsxs(Text, { color: meterColor, children: [" \u00B7 ", contextLabel] }) : null] })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { dimColor: true, children: ["Enter send \u00B7 Ctrl+J newline \u00B7 Ctrl+O models \u00B7 Ctrl+", modeKey, " mode \u00B7 Shift+Tab perms \u00B7 Ctrl+T tool \u00B7 Ctrl+Y copy \u00B7 Ctrl+C ", busy ? 'cancel' : 'quit', " \u00B7 /help"] }), compression ? _jsxs(Text, { dimColor: true, children: ["saved ", compression, metrics.remainingQuota !== undefined ? ` · quota ${metrics.remainingQuota}` : ''] }) : null] })] })] })] });
+    const panel = _jsx(SidebarPanel, { width: SIDEBAR_WIDTH, model: engine.state.activeModel, mode: mode, perm: permMode, workspace: engine.state.workspace.root, usage: { tokensIn: metrics.compression.inputTokens, requests: metrics.requestCount }, agents: agents, todos: taskQueue, skills: engine.skills.length, plugins: new Set(engine.skills.map((skill) => skill.source).filter((source) => source !== undefined)).size });
+    return _jsxs(Box, { flexDirection: "column", width: width, paddingLeft: gutter, paddingRight: gutter, children: [_jsx(Static, { items: lines, children: (line, index) => _jsx(TranscriptEntry, { line: line, width: contentWidth, fallbackModel: engine.state.activeModel }, index) }, staticKey), sideMode === 'replace' && _jsx(Box, { marginBottom: 1, children: panel }), _jsxs(Box, { flexDirection: "row", alignItems: "flex-start", children: [_jsxs(Box, { flexDirection: "column", width: sideMode === 'split' ? convoWidth : undefined, flexGrow: sideMode === 'split' ? 0 : 1, children: [view.showHero && _jsx(Hero, { width: contentWidth + 2, endpoint: engine.client.endpoint ?? 'omniroute', model: engine.state.activeModel, mode: mode, perm: permMode, workspace: engine.state.workspace.root, sessions: recentSessions, skills: engine.skills.length, plugins: new Set(engine.skills.map((skill) => skill.source).filter((source) => source !== undefined)).size, mcpTools: engine.mcpTools.length }), liveThink !== '' && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.warn, children: "\u00B7 thinking" }), liveThinkView.map((segments, index) => _jsx(SegmentText, { segments: segments, role: "thinking" }, index))] }), liveAnswer !== '' && _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.accent, children: engine.state.activeModel }), liveAnswerView.map((segments, index) => _jsx(SegmentText, { segments: segments, role: "assistant" }, index))] }), (view.toolCards > 0 ? toolCards.slice(-view.toolCards) : []).map((card) => {
+                                const expanded = expandedTool === card.id;
+                                const status = card.status === 'running' ? 'running' : card.status === 'error' ? 'error' : 'done';
+                                const statusColor = status === 'running' ? PALETTE.warn : status === 'error' ? PALETTE.error : PALETTE.success;
+                                const head = toolHead(card.name === 'run_command' ? '$' : toolVerb(card.name), card.name === 'run_command' ? (card.target || '…') : card.target, contentWidth, expanded ? COLLAPSE_HINT.length : 0);
+                                return _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: statusColor, children: statusMarker(status) }), _jsx(Text, { dimColor: true, children: head }), expanded ? _jsx(Text, { dimColor: true, children: COLLAPSE_HINT }) : null] }), expanded && _jsx(Box, { borderStyle: "round", borderColor: statusColor, borderTop: false, borderBottom: false, borderRight: false, paddingLeft: 1, marginLeft: 1, flexDirection: "column", children: renderToolBody(card, Math.max(10, contentWidth - 4), PALETTE) })] }, card.id);
+                            }), sideMode === 'hidden' && agents.length > 0 && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 2, marginTop: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: PALETTE.error, children: "swarm" }), _jsxs(Text, { dimColor: true, children: [doneAgents, "/", agents.length, " lanes done"] })] }), agents.map((lane, index) => {
+                                        const color = AGENT_COLORS[index % AGENT_COLORS.length];
+                                        const glyph = lane.status === 'done' ? 'ok' : lane.status === 'error' ? 'FAIL' : lane.status === 'working' ? '..' : '--';
+                                        const detail = lane.note ?? (lane.label !== lane.id ? lane.label : lane.status);
+                                        return _jsxs(Text, { color: color, children: [glyph, " ", lane.id, "  ", _jsx(Text, { dimColor: true, children: clip(detail, Math.max(12, contentWidth - 8)) })] }, lane.id);
+                                    })] }), sideMode === 'hidden' && taskQueue.length > 0 && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.accent, paddingX: 2, marginTop: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: PALETTE.accent, children: "plan" }), _jsxs(Text, { dimColor: true, children: [taskQueue.filter((item) => item.status === 'done').length, "/", taskQueue.length, " done"] })] }), taskQueue.slice(-6).map((item) => {
+                                        const marker = item.status === 'done' ? 'ok' : item.status === 'active' ? '>' : '-';
+                                        const color = item.status === 'done' ? PALETTE.success : item.status === 'active' ? PALETTE.accent : undefined;
+                                        return _jsxs(Text, { color: color, dimColor: item.status === 'done', children: [marker, " ", clip(item.title, contentWidth - 4)] }, item.id);
+                                    })] }), engine.state.preview && _jsxs(Text, { color: PALETTE.success, children: ["preview live \u00B7 ", engine.state.preview.url] }), sessionsOpen && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 2, marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.info, children: "saved sessions" }), _jsx(Text, { dimColor: true, children: "up/down navigate \u00B7 enter resume \u00B7 esc close" }), sessionsList.map((session, index) => (_jsxs(Text, { color: index === sessionsIndex ? PALETTE.info : undefined, children: [index === sessionsIndex ? '> ' : '  ', session.name, session.savedAt ? _jsxs(Text, { dimColor: true, children: ["  \u00B7  ", session.savedAt] }) : null] }, session.name)))] }), pickerOpen && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.accent, paddingX: 2, marginTop: 1, children: [_jsx(Text, { bold: true, color: PALETTE.accent, children: "choose an OmniRoute model" }), _jsx(Text, { dimColor: true, children: "up/down / j k navigate \u00B7 enter select \u00B7 esc close" }), pickerError && _jsx(Text, { color: PALETTE.error, children: clip(pickerError, contentWidth) }), pickerItems.length === 0 && !pickerError && _jsx(Text, { dimColor: true, children: "no models returned by OmniRoute." }), pickerItems.map((item, index) => {
+                                        const header = index === 0 || pickerItems[index - 1].group !== item.group
+                                            ? _jsx(Text, { dimColor: true, bold: true, children: item.group === 'combos' ? 'your combos' : 'auto engine' }, `h-${item.group}`)
+                                            : null;
+                                        return _jsxs(Box, { flexDirection: "column", children: [header, _jsxs(Text, { color: index === pickerIndex ? PALETTE.accent : undefined, children: [index === pickerIndex ? '> ' : '  ', item.id, item.strategy ? _jsxs(Text, { dimColor: true, children: ["  \u00B7 ", item.strategy] }) : null, item.id === engine.state.activeModel ? '  *' : ''] })] }, item.id);
+                                    })] }), approval && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warn, paddingX: 2, marginTop: 1, children: [_jsxs(Text, { bold: true, color: PALETTE.warn, children: ["approve ", approval.tool, "?"] }), _jsxs(Text, { dimColor: true, children: ["args: ", clip(JSON.stringify(approval.input), contentWidth)] }), approval.scopes.map((scope, index) => _jsxs(Text, { dimColor: true, children: ["  ", index + 1, " \u00B7 ", clip(scope.label, Math.max(12, contentWidth - 6))] }, scope.id)), _jsxs(Text, { dimColor: true, children: ["y allow once \u00B7 n deny \u00B7 t always allow \u00B7 1\u2013", approval.scopes.length, " pick a trust scope"] })] }), layoutDebug && _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.muted, paddingX: 2, marginTop: 1, children: [_jsxs(Text, { bold: true, dimColor: true, children: ["layout \u00B7 ", width, "\u00D7", terminalRows, " \u00B7 Ctrl+L to hide"] }), _jsxs(Text, { dimColor: true, children: ["static entries ", lines.length, " \u00B7 live budget ", liveBudget, " \u00B7 think ", liveThinkLines.length, " \u00B7 answer ", liveAnswerLines.length] }), _jsxs(Text, { dimColor: true, children: ["plan ", taskQueue.length, " \u00B7 swarm ", agents.length, " \u00B7 tool cards ", toolCards.length, " \u00B7 editor rows ", editorLayout.lines.length] })] }), queued && _jsxs(Text, { color: PALETTE.warn, children: ["queued \u00B7 ", clip(queued, Math.max(12, contentWidth - 12))] }), _jsx(Box, { borderStyle: "round", borderColor: error ? PALETTE.error : modeAccent, paddingX: 1, marginTop: 1, flexDirection: "column", children: edit.value === ''
+                                    ? _jsxs(Text, { color: modeAccent, children: ['>', " ", _jsx(Text, { dimColor: true, children: busy ? 'type to queue the next task' : 'describe the work and press enter' })] })
+                                    : editorLayout.lines.map((text, index) => _jsxs(Text, { color: modeAccent, children: [index === 0 ? '> ' : '  ', text] }, index)) }), kitty !== null && _jsx(Text, { dimColor: true, children: kitty ? 'kitty protocol active — Shift+Enter makes a new line' : 'this terminal can\'t distinguish Shift+Enter from Enter — use Ctrl+J for a new line' }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: busy ? modeAccent : PALETTE.muted, children: [busy && _jsx(Spinner, { type: "line" }), busy ? ' ' : '', phase, elapsed ? ` · ${elapsed}` : '', agents.length > 0 ? ` · swarm ${doneAgents}/${agents.length}` : ''] }), _jsxs(Text, { color: PALETTE.muted, children: [_jsx(Text, { color: modeAccent, children: mode }), _jsx(Text, { children: " \u00B7 " }), _jsx(Text, { color: mode === 'crazy' ? PALETTE.error : PERM_COLOR(permMode), children: mode === 'crazy' ? 'bypass' : PERM_LABEL[permMode] }), _jsxs(Text, { children: [" \u00B7 ", engine.state.activeModel] }), metrics.fallback.activeProvider ? _jsxs(Text, { children: [" \u00B7 via ", metrics.fallback.activeProvider] }) : null, contextLabel ? _jsxs(Text, { color: meterColor, children: [" \u00B7 ", contextLabel] }) : null] })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: sideMode === 'split'
+                                                    ? `Ctrl+B panel · Ctrl+${modeKey} mode · Ctrl+C ${busy ? 'cancel' : 'quit'} · /help`
+                                                    : `Enter send · Ctrl+J newline · Ctrl+O models · Ctrl+${modeKey} mode · Shift+Tab perms · Ctrl+B panel · Ctrl+T tool · Ctrl+Y copy · Ctrl+C ${busy ? 'cancel' : 'quit'} · /help` }), compression ? _jsxs(Text, { dimColor: true, children: ["saved ", compression, metrics.remainingQuota !== undefined ? ` · quota ${metrics.remainingQuota}` : ''] }) : null] })] })] }), sideMode === 'split' && _jsx(Box, { marginLeft: 1, children: panel })] })] });
 }
 //# sourceMappingURL=terminalInterface.js.map

package/dist/ui/toolrow.js

@@ -0,0 +1,53 @@
+/**
+ * Tool row composition.
+ *
+ * Follows the two shapes OpenCode uses (MIT, anomalyco/opencode): a one-line
+ * inline row with a fixed-width status column so descriptions align down the
+ * page, and a block form for output, marked with a rule down its left edge
+ * rather than boxed on all four sides — a full border around every tool
+ * result turns a transcript into a stack of crates.
+ */
+/**
+ * Width of the status column. Every marker is padded to it, so the tool
+ * descriptions start at the same column whatever happened to the call. The
+ * markers were 'ok' (2), 'FAIL' (4) and '..' (2), which meant every failure
+ * shunted its own description two columns right.
+ */
+// Five, not four: the longest marker is 'FAIL', and padding to its own
+// length leaves no gap, so a failed call rendered as "FAIL$ go test ...".
+// The extra column is the separator, which is why the head is not padded
+// again on the other side.
+export const STATUS_WIDTH = 5;
+/** Plain-word status marker, padded to a fixed column. No glyphs. */
+export function statusMarker(status) {
+    switch (status) {
+        case 'running': return '..'.padEnd(STATUS_WIDTH);
+        case 'error': return 'FAIL'.padEnd(STATUS_WIDTH);
+        case 'denied': return 'no'.padEnd(STATUS_WIDTH);
+        default: return 'ok'.padEnd(STATUS_WIDTH);
+    }
+}
+/**
+ * The text beside the marker: a verb and its target, clipped to the room
+ * actually left once the status column and the indent are accounted for.
+ * Sizing this to the full width is what makes rows wrap and the column
+ * collapse.
+ */
+export function toolHead(verb, target, width, reserve = 0) {
+    // `reserve` is room kept for something drawn after the head on the same
+    // row — the collapse hint, today. Without it the hint pushed itself onto a
+    // line of its own, which is worse than not showing it.
+    const room = Math.max(8, width - STATUS_WIDTH - 2 - Math.max(0, reserve));
+    if (target === '')
+        return clip(verb, room);
+    const head = `${verb} ${target}`;
+    return clip(head, room);
+}
+export function clip(text, width) {
+    const flat = text.replace(/\s+/g, ' ');
+    const runes = [...flat];
+    if (runes.length <= width)
+        return flat;
+    return `${runes.slice(0, Math.max(0, width - 1)).join('')}…`;
+}
+//# sourceMappingURL=toolrow.js.map

package/dist/ui/viewport.js

@@ -0,0 +1,62 @@
+/**
+ * How much of the live region fits in the terminal.
+ *
+ * Ink redraws its live region by walking the cursor up over the lines it
+ * wrote last time and erasing them. That accounting only holds while the
+ * frame fits on screen: once it is taller than the viewport the terminal
+ * scrolls it, the cursor no longer lands where Ink expects, and the redraw
+ * eats the transcript above or leaves a trail of half-erased frames. It shows
+ * up as the display "going weird" after a resize, because maximising and then
+ * floating a window is the ordinary way to make the viewport smaller than the
+ * frame that was drawn for it.
+ *
+ * So the sections that can grow are given a budget rather than a fixed cap.
+ */
+/** Rows the input frame, status line and key hints always need. */
+const CHROME_ROWS = 6;
+/** Rows the home screen occupies when it is drawn. */
+const HERO_ROWS = 12;
+/** Streaming never drops below this, or a running turn looks like a hang. */
+const LIVE_MIN = 2;
+const MAX_TOOL_CARDS = 5;
+const MAX_TODO_ROWS = 6;
+/**
+ * Decide what fits. Order of sacrifice, least useful first: the home screen
+ * goes before tool cards, tool cards before the queue, and streaming text
+ * keeps a floor because a turn with nothing visible reads as a hang.
+ */
+export function planViewport(input) {
+    const rows = Math.max(8, Math.floor(input.rows));
+    const editor = Math.max(1, Math.floor(input.editorLines));
+    let free = rows - CHROME_ROWS - editor;
+    // The home screen only appears before the first turn, and only when there
+    // is genuinely room: half a home screen is worse than none.
+    const showHero = input.wantHero && free >= HERO_ROWS + LIVE_MIN;
+    if (showHero)
+        free -= HERO_ROWS;
+    // The bounded sections are allocated first and streaming absorbs the rest.
+    // Taking a share of the remainder for streaming up front looks fair and is
+    // not: on a tall terminal it starved the queue of rows there was plenty of
+    // room for.
+    let budget = free - LIVE_MIN;
+    const toolCards = clamp(input.toolCards, 0, Math.max(0, Math.min(MAX_TOOL_CARDS, budget)));
+    budget -= toolCards;
+    const todoRows = clamp(input.todos, 0, Math.max(0, Math.min(MAX_TODO_ROWS, budget)));
+    budget -= todoRows;
+    // Whatever is left goes to the running turn, never below the floor — a turn
+    // with nothing visible reads as a hang.
+    const liveLines = LIVE_MIN + Math.max(0, budget);
+    return { toolCards, todoRows, liveLines, showHero };
+}
+/**
+ * The smallest frame this can produce: the input and the chrome around it,
+ * plus the streaming floor. Below this the terminal is simply too short and
+ * nothing can be given up to fix it.
+ */
+export function minimumHeight(editorLines) {
+    return CHROME_ROWS + Math.max(1, Math.floor(editorLines)) + LIVE_MIN;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, Math.floor(value)));
+}
+//# sourceMappingURL=viewport.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omniharness-cli",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "description": "OmniHarness — local-first agent orchestration harness for OmniRoute.",
   "license": "MIT",
   "type": "module",