flashlite 0.0.0-stage → 0.1.1

package/dist/ui.js

@@ -0,0 +1,1630 @@
+// ui.ts — sole terminal writer. The chat scrolls above a bottom-anchored composer;
+// pipes and very small terminals retain the simple line-oriented interface.
+import { stripVTControlCharacters } from 'node:util';
+import { ChatViewport } from "./chatviewport.js";
+import { highlightCode } from "./markdown.js";
+const colorEnabled = () => process.stdout.isTTY === true && !process.env.NO_COLOR;
+const animated = colorEnabled;
+function wrap(text, code) {
+    return colorEnabled() ? `\x1b[${code}m${text}\x1b[0m` : text;
+}
+/** The warm palette is tuned for dark terminals. On a light background the same hues are
+ *  darkened and pinned to explicit true-color — no bright `9x`, no `2` faint — so every
+ *  text role keeps >=4.5:1 contrast. Set `FLASHLITE_THEME=light` (or `dark`, the default). */
+const LIGHT = (process.env.FLASHLITE_THEME ?? '').trim().toLowerCase() === 'light';
+/** Dark terminals: warm light-yellow (#ffe066) primary, orange (#ff9f40) secondary; bright
+ *  `9x` status colors and true-color RGB both clear 4.5:1 on a dark background. */
+const DARK_THEME = {
+    dim: '2',
+    yellow: '93',
+    red: '91',
+    green: '92',
+    accent: '38;2;255;224;102',
+    orange: '38;2;255;159;64',
+    gradientFrom: [255, 159, 64],
+    gradientTo: [255, 224, 102],
+    effort: {
+        auto: '255;224;102',
+        low: '255;205;90',
+        medium: '255;176;74',
+        high: '255;138;62',
+        xhigh: '255;102;66',
+        max: '255;74;74',
+    },
+    mutedBg: '48;2;56;56;56',
+    mutedFg: '38;2;180;180;180',
+    hlOk: '48;2;0;58;0;97',
+    hlFail: '48;2;74;8;8;97',
+    hlWarn: '48;2;64;54;0;97',
+    hlNeutral: '48;2;45;45;58;97',
+    toolSecondary: '38;2;185;195;185',
+};
+/** Light terminals: the same warm hues darkened and made explicit, each >=4.5:1 on both
+ *  #f5f5f5 and #ffffff (see test/theme.test.ts). */
+const LIGHT_THEME = {
+    dim: '38;2;95;99;104',
+    yellow: '38;2;122;92;0',
+    red: '38;2;179;18;26',
+    green: '38;2;11;122;53',
+    accent: '38;2;125;98;0',
+    orange: '38;2;150;75;0',
+    gradientFrom: [150, 75, 0],
+    gradientTo: [125, 98, 0],
+    effort: {
+        auto: '125;98;0',
+        low: '133;90;0',
+        medium: '141;82;0',
+        high: '150;75;0',
+        xhigh: '160;60;0',
+        max: '160;0;0',
+    },
+    mutedBg: '48;2;232;232;232',
+    mutedFg: '38;2;60;60;60',
+    hlOk: '48;2;215;245;215;38;2;10;61;10',
+    hlFail: '48;2;251;220;220;38;2;90;15;15',
+    hlWarn: '48;2;246;239;207;38;2;74;59;0',
+    hlNeutral: '48;2;230;230;238;38;2;45;45;58',
+    toolSecondary: '38;2;60;66;68',
+};
+/** Resolved palette for the active theme. */
+export const theme = LIGHT ? LIGHT_THEME : DARK_THEME;
+export const dim = (t) => wrap(t, theme.dim);
+export const bold = (t) => wrap(t, '1');
+export const yellow = (t) => wrap(t, theme.yellow);
+export const red = (t) => wrap(t, theme.red);
+export const green = (t) => wrap(t, theme.green);
+export const accent = (t) => wrap(t, theme.accent);
+export const orange = (t) => wrap(t, theme.orange);
+/** Warm brand gradient: light yellow (#ffe066) interpolated from orange (#ff9f40)
+ *  across a string's visible characters, so titles and the brand read as one warm run.
+ *  Callers pass plain text; returns plain text when colors are disabled. */
+export function gradient(text, opts = {}) {
+    if (!colorEnabled() || !text)
+        return text;
+    const chars = [...text];
+    const channel = (from, to, at) => Math.round(from + (to - from) * at);
+    let out = opts.bold ? '\x1b[1m' : '';
+    for (let i = 0; i < chars.length; i++) {
+        const t = chars.length === 1 ? 0 : i / (chars.length - 1);
+        out += `\x1b[38;2;${channel(theme.gradientFrom[0], theme.gradientTo[0], t)};${channel(theme.gradientFrom[1], theme.gradientTo[1], t)};${channel(theme.gradientFrom[2], theme.gradientTo[2], t)}m${chars[i]}`;
+    }
+    return out + '\x1b[0m';
+}
+/** Faint layer for the conversation while a dock modal owns focus. A loud SGR inside a
+ *  row would otherwise cancel the dim, so re-assert it after every reset; the plain
+ *  text is byte-for-byte unchanged. */
+function faint(line) {
+    if (!colorEnabled() || !line)
+        return line;
+    return `\x1b[2m${line.replaceAll('\x1b[0m', '\x1b[0m\x1b[2m')}\x1b[0m`;
+}
+/** Color for the effort level: light yellow at `auto` through red at `max`. The ramp is
+ *  per-theme (see `Theme.effort`) so it stays legible on either background. */
+export function effortColor(level) {
+    const code = theme.effort[level] ?? theme.effort.auto;
+    return (text) => wrap(text, `38;2;${code}`);
+}
+/** A dim short label followed by a colored value, e.g. `mode ask` or `effort med`. */
+function labeled(label, value, color) {
+    return dim(label) + ' ' + color(value);
+}
+/** Compact token counts for the context gauge: 950, 42k, 390.7M — never a long digit run. */
+function compactCount(value) {
+    if (!Number.isFinite(value))
+        return '?';
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1).replace(/\.0$/, '')}M`;
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(value >= 10_000 ? 0 : 1).replace(/\.0$/, '')}k`;
+    return String(value);
+}
+function usageStyle(text) {
+    return text
+        .replace(/ctx (\d+)%/g, (_, pct) => {
+        const pressure = Number(pct);
+        const color = pressure > 85 ? red : pressure > 70 ? yellow : accent;
+        return `${dim('ctx')} ${color(`${pct}%`)}`;
+    })
+        .replace(/\b([a-z][\w-]*):/g, (label, name) => ['account', 'usage', 'quota'].includes(name) ? dim(label) : accent(bold(label)))
+        .replace(/([\d,]+) in \/ ([\d,]+) out/, (_, input, output) => `${accent(input)} ${dim('in')} / ${orange(output)} ${dim('out')}`)
+        .replace(/\b(\d+)%/g, (percent, value) => Number(value) < 15 ? red(bold(percent)) : Number(value) < 40 ? yellow(bold(percent)) : accent(bold(percent)))
+        .replace(/([\d,]+) rpm/, (_, value) => `${accent(value)} ${dim('rpm')}`)
+        .replace(/\b(day|week)\b/g, (label) => dim(label))
+        .replace(/\bunlimited\b/g, (value) => green(value))
+        .replace(/\$[\d,.]+/g, (value) => accent(value))
+        .replace(/\b(unknown|not reported)\b/g, (value) => yellow(value))
+        .replace(/ · /g, dim(' · '));
+}
+// Dock labels must stay on one physical row, even with wide model names/paths.
+function cells(c) {
+    if (/\p{Mark}/u.test(c))
+        return 0;
+    const cp = c.codePointAt(0);
+    return cp >= 0x1100 && (cp <= 0x115f || cp >= 0x2e80 && cp <= 0xa4cf ||
+        cp >= 0xac00 && cp <= 0xd7a3 || cp >= 0xf900 && cp <= 0xfaff ||
+        cp >= 0xfe10 && cp <= 0xfe6f || cp >= 0xff00 && cp <= 0xff60 || cp >= 0x1f300) ? 2 : 1;
+}
+function clean(text) {
+    return stripVTControlCharacters(text).replace(/[\x00-\x1f\x7f]/g, ' ');
+}
+function width(text) {
+    return [...clean(text)].reduce((n, c) => n + cells(c), 0);
+}
+function fit(text, limit) {
+    let out = '';
+    let used = 0;
+    for (const c of clean(text)) {
+        if (used + cells(c) > limit)
+            break;
+        used += cells(c);
+        out += c;
+    }
+    return out;
+}
+/** Animated intensity is presentation-only, so honor explicit opt-outs. */
+function motionEnabled() {
+    return colorEnabled() && !process.env.FLASHLITE_REDUCED_MOTION;
+}
+/** One width-aware model row. A hot sweep travels the whole bar; the model name and
+ *  bolt keep their neon orange between passes. */
+function boostBar(text, modelStart, boltStart, sweep) {
+    if (!colorEnabled())
+        return text;
+    const end = Math.max(0, width(text) - 1);
+    let column = 0;
+    let out = '\x1b[1m';
+    for (const char of text) {
+        const onBolt = column >= boltStart && column < end;
+        const onModel = !onBolt && column >= modelStart && column < end;
+        const base = LIGHT
+            ? onBolt ? [162, 45, 0] : onModel ? [174, 61, 0] : [150, 81, 20]
+            : onBolt ? [255, 105, 0] : onModel ? [255, 115, 0] : [255, 135, 15];
+        const hot = sweep < 0 ? 0 : Math.max(0, 1 - Math.abs(column - sweep) / 12);
+        const peak = LIGHT ? [120, 20, 0] : [255, 246, 132];
+        const rgb = base.map((value, channel) => Math.round(value + (peak[channel] - value) * hot));
+        out += `\x1b[38;2;${rgb.join(';')}m${char}`;
+        column += cells(char);
+    }
+    return out + '\x1b[0m';
+}
+/** A full-width, diff-style outcome row: dark background through the right edge, light text. */
+function highlightRow(text, code, columns, secondary = false) {
+    const body = fit(` ${text} `, columns);
+    if (!colorEnabled())
+        return body.trim();
+    // Explicit secondary foreground is predictable in light/dark themes; ANSI faint
+    // depends on the user's terminal and can make normal-sized text unreadable.
+    const style = secondary ? `${code};${theme.toolSecondary}` : code;
+    return `\x1b[${style}m${body + ' '.repeat(Math.max(0, columns - width(body)))}\x1b[0m`;
+}
+/** Bold only the call title. SGR 22 ends bold without clearing the row background. */
+function highlightedToolLine(text, title, code, columns) {
+    const body = fit(` ${text} `, columns);
+    if (!colorEnabled())
+        return body.trim();
+    const index = body.indexOf(title);
+    const padded = body + ' '.repeat(Math.max(0, columns - width(body)));
+    const styled = index < 0 ? padded :
+        padded.slice(0, index) + `\x1b[1m${padded.slice(index, index + title.length)}\x1b[22m` + padded.slice(index + title.length);
+    return `\x1b[${code}m${styled}\x1b[0m`;
+}
+/** Render tool preview/result lines as a tree beneath their parent node. File
+ *  edits (edit_file/write_file) read better as a mini unified diff: a colored left
+ *  bar per line plus a `+N −M` chip; every other tool keeps the dim tree. */
+function treePreview(lines, language) {
+    if (isDiff(lines))
+        return diffRows(lines, language);
+    return lines.map((line, i) => {
+        const connector = i === lines.length - 1 ? '└─ ' : '├─ ';
+        const body = line.startsWith('+ ') ? green(line) : line.startsWith('− ') ? red(line) : dim(line);
+        return dim('  ') + dim(connector) + body;
+    });
+}
+/** A file-edit preview: additions, removals, numbered context, or a collapse marker. */
+function isDiff(lines) {
+    return lines.length > 0 &&
+        lines.some((line) => /^[+−]/.test(line)) &&
+        lines.every((line) => /^[+−]\d* /.test(line) || /^ \d+ /.test(line) || line.startsWith('…'));
+}
+/** Parse one preview line: `+N code`, `−N code`, ` N code` (numbered) or `+ code`/`− code`. */
+function parseDiffLine(line) {
+    if (line.startsWith('…'))
+        return { kind: 'elide', text: line };
+    let match = /^\+(\d*) (.*)$/.exec(line);
+    if (match)
+        return { kind: 'add', ...(match[1] ? { line: Number(match[1]) } : {}), text: match[2] };
+    match = /^−(\d*) (.*)$/.exec(line);
+    if (match)
+        return { kind: 'delete', ...(match[1] ? { line: Number(match[1]) } : {}), text: match[2] };
+    match = /^ (\d+) (.*)$/.exec(line);
+    if (match)
+        return { kind: 'context', line: Number(match[1]), text: match[2] };
+    return { kind: 'context', text: line };
+}
+/** Mini unified diff: a colored left bar + `+`/`−` marker, an aligned line-number gutter
+ *  when the preview carries line numbers, a `+N −M` chip on the first row, and a syntax-
+ *  highlighted code body. `/^[+−]/` is tested by `isDiff`, so plain lines never land here. */
+function diffRows(lines, language) {
+    const parsed = lines.map(parseDiffLine);
+    const added = parsed.filter((line) => line.kind === 'add').length;
+    const removed = parsed.filter((line) => line.kind === 'delete').length;
+    const chip = `${green('+' + added)} ${red('−' + removed)}`;
+    const gutter = parsed.reduce((width, line) => Math.max(width, line.line !== undefined ? String(line.line).length : 0), 0);
+    const paint = (code) => language ? highlightCode(code, language) : code;
+    const chipRow = parsed.findIndex((line) => line.kind !== 'elide');
+    return parsed.map((line, i) => {
+        if (line.kind === 'elide')
+            return dim('  ') + dim(line.text);
+        const bar = line.kind === 'add' ? green('▌') : line.kind === 'delete' ? red('▌') : dim('▌');
+        const marker = line.kind === 'add' ? green('+') : line.kind === 'delete' ? red('−') : dim(' ');
+        const color = line.kind === 'add' ? green : line.kind === 'delete' ? red : dim;
+        const prefix = line.line !== undefined
+            ? marker + color(String(line.line).padStart(gutter)) + ' '
+            : (line.kind === 'add' ? green('+ ') : line.kind === 'delete' ? red('− ') : dim('  '));
+        return dim('  ') + bar + ' ' + prefix + paint(line.text) + (i === chipRow ? dim('  ') + chip : '');
+    });
+}
+const inlinePlain = (text) => text;
+/** Split one line into styled segments for the lightweight inline markdown used in
+ *  prompts/panels: `**bold**` and `` `code` ``. Unclosed markers stay plain. */
+function inlineSegments(line) {
+    const segs = [];
+    let i = 0;
+    while (i < line.length) {
+        if (line[i] === '`') {
+            const end = line.indexOf('`', i + 1);
+            if (end === -1) {
+                segs.push({ text: line.slice(i), style: inlinePlain });
+                break;
+            }
+            segs.push({ text: line.slice(i + 1, end), style: accent });
+            i = end + 1;
+            continue;
+        }
+        if (line.startsWith('**', i)) {
+            const end = line.indexOf('**', i + 2);
+            if (end === -1) {
+                segs.push({ text: line.slice(i), style: inlinePlain });
+                break;
+            }
+            segs.push({ text: line.slice(i + 2, end), style: bold });
+            i = end + 2;
+            continue;
+        }
+        let j = i;
+        while (j < line.length && line[j] !== '`' && !line.startsWith('**', j))
+            j++;
+        segs.push({ text: line.slice(i, j), style: inlinePlain });
+        i = j;
+    }
+    return segs;
+}
+/** Wrap a markdown-marked line into styled rows fitted to `limit` cells, keeping each
+ *  styled run intact and width-aware (escape codes never count as visible cells). */
+function styledApprovalRows(line, limit) {
+    const rows = [];
+    let rowParts = [];
+    let used = 0;
+    const flush = () => {
+        rows.push(rowParts.map((part) => part.style(part.text)).join(''));
+        rowParts = [];
+        used = 0;
+    };
+    for (const seg of inlineSegments(line)) {
+        for (const ch of seg.text) {
+            const w = cells(ch);
+            if (used + w > limit && used > 0)
+                flush();
+            const last = rowParts[rowParts.length - 1];
+            if (last && last.style === seg.style)
+                last.text += ch;
+            else
+                rowParts.push({ style: seg.style, text: ch });
+            used += w;
+        }
+    }
+    if (rowParts.length)
+        flush();
+    else if (rows.length === 0)
+        rows.push('');
+    return rows;
+}
+/** Build one run's terminal-command card (header + tree), sized to the terminal. */
+function runCommandCard(run, columns) {
+    const maxInner = Math.max(0, columns - 6);
+    const label = run.name + (run.count > 1 ? ` ${run.count}x` : '');
+    const shownSubjects = (run.subjects ?? [])
+        .map((s) => run.name === 'run_command' && !s.startsWith('$') ? `$ ${s}` : s)
+        .slice(0, 3)
+        .map((s) => fit(s, maxInner));
+    const truncated = (run.subjects ?? []).length - 3;
+    const duration = run.elapsedMs ? ` · ${formatDuration(run.elapsedMs)}` : '';
+    const lines = [];
+    let glyph = '● ';
+    let bg = theme.hlNeutral;
+    const summary = [];
+    if (run.denied === run.count && run.count) {
+        glyph = '⊘ ';
+        bg = theme.hlWarn;
+        lines.push(...shownSubjects);
+        lines.push('denied');
+    }
+    else if (run.done === run.count && run.count) {
+        glyph = '✓ ';
+        bg = theme.hlOk;
+        lines.push(...shownSubjects);
+        if (truncated > 0)
+            lines.push(`+${truncated} more`);
+    }
+    else if (run.error === run.count && run.count) {
+        glyph = '✗ ';
+        bg = theme.hlFail;
+        lines.push(...shownSubjects);
+        lines.push(run.failure ? fit(`failed · ${run.failure}`, maxInner) : 'failed');
+    }
+    else {
+        bg = run.error ? theme.hlFail : run.denied ? theme.hlWarn : theme.hlNeutral;
+        if (run.done)
+            summary.push(`${run.done} done`);
+        if (run.error)
+            summary.push(`${run.error} failed`);
+        if (run.denied)
+            summary.push(`${run.denied} denied`);
+        lines.push(...shownSubjects);
+        if (truncated > 0)
+            lines.push(`+${truncated} more`);
+    }
+    const prefix = `$ ${label}`;
+    const header = fit(`${glyph}${prefix}${summary.length ? ` · ${summary.join(' · ')}` : ''}${duration}`, maxInner);
+    for (let i = 0; i < lines.length; i++) {
+        const connector = i === lines.length - 1 ? '└─ ' : '├─ ';
+        lines[i] = connector + fit(lines[i], maxInner);
+    }
+    return { bg, header, lines };
+}
+/** Plain lines for a generic call. The batch renderer applies one background to every
+ * line, so the subject, result and status are always part of the same tool block. */
+function runRows(run, columns) {
+    const card = runCommandCard(run, columns);
+    if (run.name === 'run_command' && run.count === 1 && run.subjects?.[0]) {
+        return [` $ ${run.subjects[0]}`, `   ${card.header}${run.failure ? ` · ${run.failure}` : ''}`];
+    }
+    return [` ${card.header}`, ...card.lines.map((line) => run.count === 1 ? `  ${line.replace(/^[├└]─ /, '')}` : `  ${line}`)];
+}
+/** Pi-style compact calls. One blank row separates blocks, never their content. */
+function toolBatchRows(runs, columns, expanded) {
+    const rows = [];
+    for (const run of runs) {
+        if (rows.length)
+            rows.push('');
+        const card = runCommandCard(run, columns);
+        const result = run.results?.at(-1);
+        const lines = [];
+        if (run.name === 'run_command' && run.count === 1 && run.subjects?.[0]) {
+            lines.push(` $ ${run.subjects[0]}`);
+            if (result) {
+                const output = expanded ? result.lines : result.lines.slice(-4);
+                if (!expanded && result.lines.length > 4)
+                    lines.push(`   … (${result.lines.length - 4} hidden lines · ctrl+o expand)`);
+                for (const line of output)
+                    lines.push(`   ${line}`);
+            }
+            lines.push(`   ${card.header}${result ? ` · ${result.summary}` : run.failure ? ` · ${run.failure}` : ''}${result?.lines.length ? ' · ctrl+o expand' : ''}`);
+        }
+        else if (run.name === 'read_file' && run.count === 1 && run.subjects?.[0]) {
+            const summary = result?.summary ? ` · ${result.summary}` : '';
+            const duration = run.elapsedMs ? ` · ${formatDuration(run.elapsedMs)}` : '';
+            lines.push(` ${run.error ? '✗' : run.denied ? '⊘' : run.done ? '✓' : '●'} read ${run.subjects[0]}${summary}${duration}`);
+            if (expanded && result?.lines.length) {
+                for (const line of result.lines)
+                    lines.push(`   ${line}`);
+            }
+        }
+        else {
+            lines.push(...runRows(run, columns));
+            if (result)
+                lines.push(`   ${result.summary}${result.lines.length ? ' · ctrl+o expand' : ''}`);
+            if (expanded && result)
+                for (const line of result.lines)
+                    lines.push(`   ${line}`);
+        }
+        const title = run.name === 'run_command' && run.count === 1 && run.subjects?.[0]
+            ? `$ ${run.subjects[0]}` : run.name === 'read_file' && run.count === 1 ? 'read' : `$ ${run.name}${run.count > 1 ? ` ${run.count}x` : ''}`;
+        rows.push(...lines.map((line, index) => index === 0
+            ? highlightedToolLine(line, title, card.bg, columns)
+            : highlightRow(line, card.bg, columns, true)));
+    }
+    return rows;
+}
+/** A full-width muted band (theme-aware), used for notices and queued-steering rows. */
+function mutedRow(text, columns) {
+    const body = fit(text, columns);
+    if (!colorEnabled())
+        return body.trim();
+    return wrap(body + ' '.repeat(Math.max(0, columns - width(body))), `${theme.mutedBg};${theme.mutedFg}`);
+}
+/** A full-width muted-grey notice row, distinct from model prose and tool outcomes. */
+function noticeRow(text, columns) {
+    return mutedRow(` ${text} `, columns);
+}
+/** Compact completion duration: 380ms, 1.2s, 2m 05s, 1h 02m. */
+export function formatDuration(ms) {
+    if (!Number.isFinite(ms) || ms <= 0)
+        return '';
+    if (ms < 1000)
+        return `${Math.max(1, Math.round(ms))}ms`;
+    const seconds = ms / 1000;
+    if (seconds < 60) {
+        const whole = Math.round(seconds); // round first so the remainder can never be 60
+        if (whole >= 60)
+            return '1m 00s';
+        return `${whole < 10 ? seconds.toFixed(1).replace(/\.0$/, '') : whole}s`;
+    }
+    const total = Math.round(seconds);
+    const minutes = Math.floor(total / 60);
+    const rest = String(total % 60).padStart(2, '0');
+    if (minutes < 60)
+        return `${minutes}m ${rest}s`;
+    const hours = Math.floor(minutes / 60);
+    const mins = String(minutes % 60).padStart(2, '0');
+    return `${hours}h ${mins}m`;
+}
+/** ANSI-shadow block “F” wordmark shown at the top of the startup screen. */
+const WELCOME_GLYPH = [
+    '███████╗',
+    '██╔════╝',
+    '█████╗░░',
+    '██╔══╝░░',
+    '██║░░░░░',
+    '╚═╝░░░░░',
+];
+class UiImpl {
+    lineOpen = false;
+    composerVisible = false;
+    dock = false;
+    dockRows = new Map();
+    chatRows = 0;
+    chatRow = 1;
+    chatColumn = 1;
+    restoredWrap = false;
+    viewport = new ChatViewport();
+    model = '';
+    prompt = '❯ ';
+    text = '';
+    cursor = 0;
+    mode = 'ask before writes';
+    effort = 'auto';
+    boost = false;
+    boostSweep = null;
+    boostFrame = -1;
+    boostThinking = false;
+    thinkingSnapshot = null;
+    attachmentNames = [];
+    status = 'ready';
+    queuedSteering = null;
+    steeringMessages = [];
+    contextUsage = '';
+    menuItems = null;
+    menuIndex = 0;
+    menuTop = 0;
+    menuCancel = null;
+    menuHint = '↑/↓ move · enter select · esc/ctrl+c cancel';
+    panelLines = null;
+    panelTop = 0;
+    panelCancel = null;
+    footerNotice = '';
+    commandMode = false;
+    searchActive = false;
+    searchQuery = '';
+    searchMatch = '';
+    searchRank = 0;
+    searchTotal = 0;
+    approvalTitle = '';
+    approvalLines = [];
+    approvalHint = '';
+    approvalChoice = '';
+    approvalCursor = 0;
+    approvalTop = 0;
+    agentActivity = '';
+    toolCount = 0;
+    previewTitle = '';
+    previewLines = [];
+    previewLanguage;
+    // A run_command preview is transient status (`queued`/`running` + the command line).
+    // It belongs on the live activity card only — the run-summary box already carries the
+    // command as its subject, so appending it again would duplicate the finished card.
+    previewTransient = false;
+    cardStart = null;
+    cardEnd = null;
+    cardKind = null;
+    todos = [];
+    subagentStatus = [];
+    lastToolCard = null;
+    toolDetailsExpanded = false;
+    /** A dock modal (approval, command menu, or panel) layers over a dimmed conversation. */
+    modalFocused() {
+        return this.dock && !!(this.approvalTitle || this.menuItems || this.panelLines);
+    }
+    approvalRows() {
+        const limit = Math.max(1, (process.stdout.columns || 80) - 5);
+        return this.approvalLines.flatMap((line) => styledApprovalRows(line, limit));
+    }
+    approvalHeight() {
+        if (!this.approvalTitle)
+            return 0;
+        const base = this.menuItems || this.panelLines ? 3 : 5;
+        return Math.min(this.approvalRows().length + 2, Math.max(3, (process.stdout.rows || 24) - base - 2));
+    }
+    approvalPageSize() {
+        return Math.max(1, this.approvalHeight() - 2);
+    }
+    steeringHeight() {
+        if (!this.steeringMessages.length || this.menuItems || this.panelLines || this.commandMode)
+            return 0;
+        const room = (process.stdout.rows || 24) - 4 - this.approvalHeight() - 3;
+        return Math.min(4, this.steeringMessages.length + 1, Math.max(0, room));
+    }
+    todosHeight() {
+        if (!this.todos.length || this.menuItems || this.panelLines || this.commandMode)
+            return 0;
+        const room = (process.stdout.rows || 24) - 4 - this.approvalHeight() - this.steeringHeight() - 3;
+        return Math.min(6, this.todos.length + 1, Math.max(0, room));
+    }
+    agentStatusHeight() {
+        if (!this.subagentStatus.length || this.menuItems || this.panelLines || this.commandMode)
+            return 0;
+        const room = (process.stdout.rows || 24) - 4 - this.approvalHeight() - this.steeringHeight() - this.todosHeight() - 3;
+        return Math.min(this.subagentStatus.length, 3, Math.max(0, room));
+    }
+    dockHeight() {
+        return (this.menuItems || this.panelLines ? 3 : 4) + this.approvalHeight() + this.steeringHeight() + this.todosHeight() + this.agentStatusHeight() + (this.searchActive ? 1 : 0);
+    }
+    setCommandMode(active) {
+        this.commandMode = active;
+        if (!this.dock)
+            return;
+        this.reflow();
+        this.drawDock();
+    }
+    startTool(name, preview) {
+        this.previewTitle = preview ? clean(preview.title) : '';
+        this.previewLines = preview ? preview.lines.map(clean) : [];
+        this.previewLanguage = preview?.language;
+        this.previewTransient = name.startsWith('run_command');
+        if (!this.dock) {
+            this.setAgentActivity(`● ${this.previewTitle || name}`);
+            return;
+        }
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        if (this.previewTransient) {
+            const command = this.previewLines.find((line) => line.startsWith('$ '));
+            if (command)
+                this.renderRunCard([mutedRow(` ${command}`, columns), dim(`   ${this.previewLines[0] ?? 'running'}`)], false, 'activity');
+            else
+                this.setAgentActivity(`● ${this.previewTitle || name}`);
+        }
+        else {
+            const lines = [dim(`  ● ${this.previewTitle || name}`), ...treePreview(this.previewLines, this.previewLanguage)];
+            this.renderRunCard(lines, false, 'activity');
+        }
+    }
+    preview(title, lines, language) {
+        this.previewTitle = clean(title);
+        this.previewLines = lines.map(clean);
+        this.previewLanguage = language;
+        this.previewTransient = false;
+        if (!this.dock) {
+            this.setAgentActivity(`● ${this.previewTitle} · preparing`);
+            return;
+        }
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        const previewLines = treePreview(this.previewLines, this.previewLanguage);
+        const rows = [dim(`  ● ${this.previewTitle} · preparing`), ...previewLines];
+        this.cardKind = 'activity';
+        this.agentActivity = rows.join(' · ');
+        this.writeActivityCard(rows, columns);
+    }
+    beginTurn() {
+        if (this.viewport.offset)
+            this.scrollChat(-Infinity);
+        this.toolCount = 0;
+        if (this.cardStart && this.cardEnd)
+            this.viewport.release(this.cardStart, this.cardEnd);
+        this.cardStart = this.cardEnd = null;
+        this.cardKind = null;
+        this.previewTitle = '';
+        this.previewLines = [];
+        this.previewLanguage = undefined;
+        this.previewTransient = false;
+        this.setAgentActivity('');
+    }
+    writeActivityCard(lines, columns) {
+        if (!this.dock)
+            return;
+        const card = lines.join('\n') + '\n';
+        if (this.cardStart && this.cardEnd) {
+            this.viewport.replace(this.cardStart, this.cardEnd, card, columns);
+            this.paintChat();
+        }
+        else {
+            this.endTurn();
+            this.cardStart = this.viewport.position();
+            this.writeChat(card);
+            this.cardEnd = this.viewport.position();
+        }
+    }
+    setAgentActivity(text) {
+        this.cardKind = 'activity';
+        this.agentActivity = text;
+        if (!this.dock || !text)
+            return;
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        const title = clean(text);
+        const styled = title.includes('✓') ? green(bold(title)) : title.includes('⊘') ? yellow(title)
+            : title.includes(':') && /^\d+ tools? · /.test(title) ? red(title) : green(bold(title));
+        const lines = [dim(`  ● ${styled}`), ...treePreview(this.previewLines, this.previewLanguage)];
+        this.writeActivityCard(lines, columns);
+    }
+    activity(label, text) {
+        if (!this.dock)
+            return false;
+        if (label.startsWith('compacting conversation'))
+            this.setStatus(text);
+        else {
+            const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+            const command = this.previewLines.find((line) => line.startsWith('$ '));
+            const lines = this.previewTransient && command
+                ? [mutedRow(` ${command}`, columns), dim(`   ${text}`)]
+                : [dim(`  ● ${this.previewTitle || label} · ${text}`), ...treePreview(this.previewLines, this.previewLanguage)];
+            this.renderRunCard(lines, false, 'activity');
+        }
+        return true;
+    }
+    stopActivity(note) {
+        if (!this.agentActivity || this.agentActivity.includes('✓') || this.agentActivity.includes('⊘'))
+            return;
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        this.renderRunCard([mutedRow(` ⊘ ${this.previewTitle || 'tool'}`, columns), dim(`   ${note}`)], true, 'activity');
+        if (!this.dock)
+            this.say(`⊘ ${this.previewTitle || 'tool'} · ${note}`);
+        if (this.cardStart && this.cardEnd)
+            this.viewport.release(this.cardStart, this.cardEnd);
+        this.cardStart = this.cardEnd = null;
+    }
+    finishActivity(label, final) {
+        if (label.startsWith('compacting conversation'))
+            return;
+        if (final)
+            this.toolCount++;
+        const result = this.previewTitle ? clean(final).replace(/\b(write_file|edit_file|make_dir|copy_path|move_path|remove_path|run_command)\b/, () => this.previewTitle) : clean(final);
+        if (final) {
+            const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+            const command = this.previewLines.find((line) => line.startsWith('$ '));
+            const lines = this.previewTransient && command
+                ? [mutedRow(` ${command}`, columns), green(`   ✓ ${result}`)]
+                : [green(`  ✓ ${result}`), ...treePreview(this.previewLines, this.previewLanguage)];
+            this.cardKind = 'activity';
+            this.agentActivity = lines.join(' · ');
+            this.writeActivityCard(lines, columns);
+            if (!this.dock)
+                this.say(lines.join('\n'));
+            if (this.cardStart && this.cardEnd)
+                this.viewport.release(this.cardStart, this.cardEnd);
+            this.cardStart = this.cardEnd = null;
+            this.cardKind = null;
+        }
+        else
+            this.discardLiveCard();
+    }
+    /** Replace a single pending call preview as its status changes. Completed calls are
+     *  committed once, so output never jumps from a live card into a rebuilt batch summary. */
+    renderRunCard(lines, commit, kind) {
+        if (this.cardStart && this.cardEnd && this.cardKind !== kind)
+            this.discardLiveCard();
+        this.cardKind = kind;
+        this.agentActivity = lines.join(' · ');
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        if (kind === 'activity') {
+            this.writeActivityCard(lines, columns);
+            if (commit) {
+                if (this.cardStart && this.cardEnd)
+                    this.viewport.release(this.cardStart, this.cardEnd);
+                this.cardStart = this.cardEnd = null;
+                this.cardKind = null;
+            }
+            return;
+        }
+        // A run-summary box already names the command it ran; drop the transient
+        // run_command status preview so the finished card is not duplicated.
+        const card = lines.join('\n') + '\n';
+        if (this.cardStart && this.cardEnd) {
+            this.viewport.replace(this.cardStart, this.cardEnd, card, columns);
+            this.paintChat();
+        }
+        else {
+            this.endTurn();
+            this.cardStart = this.viewport.position();
+            this.writeChat(card);
+            this.cardEnd = this.viewport.position();
+        }
+        if (commit) {
+            if (this.cardStart && this.cardEnd)
+                this.viewport.release(this.cardStart, this.cardEnd);
+            this.cardStart = this.cardEnd = null;
+            this.cardKind = null;
+        }
+    }
+    /** Render an in-flight tally by replacing the live card. */
+    holdToolRuns(runs) {
+        if (!runs.length || !this.dock)
+            return;
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        const rows = toolBatchRows(runs, columns, false);
+        // Keep the current file diff visible while the rest of this batch settles.
+        if (!this.previewTransient && this.previewLines.length)
+            rows.push(...treePreview(this.previewLines, this.previewLanguage));
+        this.renderRunCard(rows, false, 'activity');
+    }
+    /** Render a completed tool batch. Ctrl+O toggles its bounded output in place. */
+    finishToolRuns(runs) {
+        if (!runs.length)
+            return;
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        const snapshot = runs.map((run) => ({ ...run, subjects: run.subjects?.slice(), results: run.results?.map((r) => ({ ...r, lines: r.lines.slice() })) }));
+        const rows = toolBatchRows(snapshot, columns, false);
+        if (!this.dock) {
+            for (const row of rows)
+                this.say(row);
+            this.say('');
+            return;
+        }
+        if (this.lastToolCard)
+            this.viewport.release(this.lastToolCard.start, this.lastToolCard.end);
+        this.renderRunCard([...rows, ''], false, 'activity');
+        if (this.cardStart && this.cardEnd) {
+            this.lastToolCard = { start: this.cardStart, end: this.cardEnd, runs: snapshot };
+            this.cardStart = this.cardEnd = null;
+            this.cardKind = null;
+            this.toolDetailsExpanded = false;
+        }
+    }
+    toggleToolDetails() {
+        if (!this.dock || !this.lastToolCard)
+            return false;
+        this.toolDetailsExpanded = !this.toolDetailsExpanded;
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        const { start, end, runs } = this.lastToolCard;
+        // Expanded cards must not consume the whole visible transcript. Share the
+        // available rows across calls, keeping every header and a continuation hint.
+        const perCall = Math.max(1, Math.floor(Math.max(1, this.chatRows - runs.length * 5 - 3) / runs.length));
+        const visibleRuns = this.toolDetailsExpanded ? runs.map((run) => ({ ...run, results: run.results?.map((result) => {
+                if (result.lines.length <= perCall)
+                    return result;
+                return { ...result, lines: [...result.lines.slice(0, perCall), `… ${result.lines.length - perCall} more lines in session transcript`] };
+            }) })) : runs;
+        this.viewport.replace(start, end, toolBatchRows(visibleRuns, columns, this.toolDetailsExpanded).join('\n') + '\n\n', columns);
+        this.paintChat();
+        return true;
+    }
+    /** Live thinking card: spinner frame, elapsed time, and active output-token estimate. */
+    setThinking(elapsedSeconds, outputTokens, frame, phase = 'waiting for model') {
+        this.thinkingSnapshot = [elapsedSeconds, outputTokens, frame, phase];
+        this.setBoostThinking(true);
+        if (!this.dock)
+            return;
+        const elapsed = elapsedSeconds < 60 ? `${elapsedSeconds}s`
+            : `${Math.floor(elapsedSeconds / 60)}m ${String(elapsedSeconds % 60).padStart(2, '0')}s`;
+        const tok = outputTokens >= 1000
+            ? `${(outputTokens / 1000).toFixed(outputTokens >= 10000 ? 0 : 1).replace(/\.0$/, '')}k`
+            : String(outputTokens);
+        const steer = this.queuedSteering ? `${this.queuedSteering} steering queued` : 'Enter to steer';
+        this.renderRunCard([dim(`  ${frame} thinking · ${elapsed}${outputTokens ? ` · ${tok} tok` : ''} · ${steer}`)], false, 'thinking');
+    }
+    /** Remove the live thinking card when the model starts responding or calls a tool. */
+    endThinking() {
+        this.thinkingSnapshot = null;
+        this.setBoostThinking(false);
+        if (this.cardKind === 'thinking')
+            this.discardLiveCard();
+    }
+    discardLiveCard() {
+        if (this.cardStart && this.cardEnd) {
+            this.viewport.remove(this.cardStart, this.cardEnd);
+            this.viewport.release(this.cardStart, this.cardEnd);
+        }
+        this.cardStart = this.cardEnd = null;
+        this.cardKind = null;
+        this.agentActivity = '';
+        if (this.dock)
+            this.paintChat();
+    }
+    commandNotice(text) {
+        if (!this.dock) {
+            this.info(text);
+            return;
+        }
+        this.footerNotice = text;
+        this.drawDock();
+    }
+    openApproval(title, lines, hint) {
+        this.approvalTitle = clean(title);
+        this.approvalLines = lines.map(clean);
+        this.approvalHint = clean(hint);
+        this.approvalChoice = '';
+        this.approvalCursor = 0;
+        this.approvalTop = 0;
+        if (!this.dock)
+            return;
+        this.reflow();
+        this.drawDock();
+    }
+    hasApproval() { return this.dock && !!this.approvalTitle; }
+    setApprovalChoice(text, cursor) {
+        if (!this.hasApproval())
+            return false;
+        this.approvalChoice = clean(text);
+        this.approvalCursor = cursor;
+        this.drawDock();
+        return true;
+    }
+    scrollApproval(delta) {
+        if (!this.hasApproval())
+            return;
+        const visible = this.approvalPageSize();
+        this.approvalTop = Math.max(0, Math.min(Math.max(0, this.approvalRows().length - visible), this.approvalTop + delta));
+        this.drawDock();
+    }
+    closeApproval() {
+        if (!this.approvalTitle)
+            return;
+        this.approvalTitle = '';
+        this.approvalLines = [];
+        this.approvalHint = '';
+        this.approvalChoice = '';
+        this.approvalCursor = 0;
+        this.approvalTop = 0;
+        if (!this.dock)
+            return;
+        this.reflow();
+        this.drawDock();
+    }
+    panel(lines, cancel) {
+        if (!this.dock)
+            return false;
+        if (cancel)
+            this.panelCancel = cancel;
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        this.panelLines = lines.flatMap((line) => {
+            const rows = [];
+            let text = clean(line);
+            while (width(text) > columns) {
+                const part = fit(text, columns);
+                rows.push(part);
+                text = text.slice(part.length);
+            }
+            rows.push(text);
+            return rows;
+        });
+        this.reflow();
+        this.drawDock();
+        return true;
+    }
+    scrollPanel(delta) {
+        if (!this.panelLines)
+            return;
+        this.panelTop = Math.max(0, Math.min(this.panelLines.length - 1, this.panelTop + delta));
+        this.drawDock();
+    }
+    closePanel() {
+        if (!this.panelLines)
+            return;
+        this.panelLines = null;
+        this.panelCancel = null;
+        this.panelTop = 0;
+        this.reflow();
+        this.drawDock();
+    }
+    welcome(model, cwd) {
+        if (!process.stdout.isTTY) {
+            this.say(`flashlite · model ${model} · cwd ${cwd} · type / for commands`);
+            return;
+        }
+        this.model = model;
+        this.openDock();
+        // Header text sits beside the glyph: cwd and the hint align to its top rows.
+        const beside = [dim(cwd), dim('What are we building?  / commands · ctrl+v image')];
+        for (let row = 0; row < WELCOME_GLYPH.length; row++) {
+            const glyph = accent(WELCOME_GLYPH[row]);
+            this.say(beside[row] ? `  ${glyph}  ${beside[row]}` : `  ${glyph}`);
+        }
+        this.say('');
+    }
+    /** Reserve five bottom rows; keep shell history in scrollback (no alternate screen). */
+    openDock() {
+        if (this.dock || !process.stdin.isTTY || !process.stdout.isTTY || (process.stdout.rows || 24) < 10)
+            return;
+        this.dock = true;
+        this.dockRows.clear();
+        process.stdout.write('\n'.repeat(process.stdout.rows || 24));
+        this.chatRows = (process.stdout.rows || 24) - this.dockHeight();
+        this.chatRow = 1;
+        this.chatColumn = 1;
+        // Leave clicks and drags to the terminal for native text selection. Page keys
+        // navigate retained chat; the mouse wheel remains native terminal scrolling.
+        process.stdout.write(`\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1006l\x1b[1;${this.chatRows}r\x1b[1;1H\x1b7`);
+        process.stdout.off('resize', this.onResize);
+        process.stdout.on('resize', this.onResize);
+        process.once('exit', this.onExit);
+        this.drawDock();
+        this.startBoostSweep();
+    }
+    closeDock() {
+        this.stopBoostSweep();
+        process.stdout.off('resize', this.onResize);
+        process.off('exit', this.onExit);
+        if (!this.dock)
+            return;
+        this.dock = false;
+        this.dockRows.clear();
+        process.stdout.write(`\x1b[?1000l\x1b[?1006l\x1b[${this.chatRows + 1};1H\x1b[J\x1b[r\x1b[${process.stdout.rows || 24};1H\x1b[?25h`);
+        this.menuItems = null;
+        this.menuCancel = null;
+        this.panelLines = null;
+        this.panelCancel = null;
+        this.lastToolCard = null;
+    }
+    onExit = () => this.closeDock();
+    onResize = () => {
+        this.dockRows.clear();
+        if ((process.stdout.rows || 24) < 10) {
+            if (this.dock) {
+                const cancel = this.menuCancel ?? this.panelCancel;
+                this.closeDock();
+                cancel?.();
+                process.stdout.on('resize', this.onResize);
+                process.once('exit', this.onExit);
+            }
+            this.composer(this.model, this.prompt, this.text, this.cursor);
+            return;
+        }
+        if (!this.dock) {
+            this.clearComposer();
+            this.openDock();
+            this.paintChat();
+            return;
+        }
+        this.reflow();
+        this.paintChat();
+    };
+    menuHeight() {
+        const lines = this.menuItems ?? this.panelLines;
+        return lines ? Math.min(lines.length, 8, Math.max(1, (process.stdout.rows || 24) - this.dockHeight() - 3)) + 1 : 0;
+    }
+    /** Scroll output clear of a newly opened popup before reducing its region. */
+    reflow() {
+        const next = Math.max(2, (process.stdout.rows || 24) - this.dockHeight() - this.menuHeight());
+        if (next === this.chatRows)
+            return; // width-only resize preserves the saved cursor
+        this.dockRows.clear();
+        process.stdout.write(`\x1b[${Math.min(this.chatRows + 1, process.stdout.rows || 24)};1H\x1b[J`);
+        if (this.chatRow > next) {
+            const shift = this.chatRow - next;
+            process.stdout.write(`\x1b[${this.chatRows};1H` + '\n'.repeat(shift));
+            this.chatRow -= shift;
+        }
+        this.chatRows = next;
+        this.chatRow = Math.min(next, this.chatRow);
+        this.chatColumn = Math.min(process.stdout.columns || 80, this.chatColumn);
+        process.stdout.write(`\x1b[1;${next}r\x1b[${this.chatRow};${this.chatColumn}H\x1b7`);
+        this.paintChat();
+    }
+    setStatus(status) {
+        if (status !== 'ready')
+            this.footerNotice = '';
+        if (this.status === status)
+            return;
+        this.status = status;
+        if (this.dock)
+            this.drawDock();
+    }
+    setMode(mode) {
+        this.mode = mode;
+        if (this.dock)
+            this.drawDock();
+    }
+    setEffort(effort) {
+        this.effort = effort;
+        if (this.dock)
+            this.drawDock();
+    }
+    setBoost(enabled) {
+        this.boost = enabled;
+        if (!enabled)
+            this.stopBoostSweep();
+        else
+            this.startBoostSweep();
+        if (this.dock)
+            this.drawDock();
+    }
+    stopBoostSweep() {
+        if (this.boostSweep)
+            clearInterval(this.boostSweep);
+        this.boostSweep = null;
+        this.boostFrame = -1;
+    }
+    /** The sweep runs only during an active model request, never at rest. */
+    setBoostThinking(thinking) {
+        this.boostThinking = thinking;
+        if (thinking)
+            this.startBoostSweep();
+        else
+            this.stopBoostSweep();
+        if (this.dock)
+            this.drawDock();
+    }
+    startBoostSweep() {
+        if (!this.dock || !this.boost || !this.boostThinking || this.boostSweep || !motionEnabled())
+            return;
+        this.boostFrame = 0;
+        this.drawDock();
+        this.boostSweep = setInterval(() => {
+            if (!this.dock || !this.boost || !this.boostThinking || !motionEnabled())
+                this.stopBoostSweep();
+            else
+                this.boostFrame = (this.boostFrame + 1) % 24;
+            if (this.dock)
+                this.drawDock();
+        }, 65);
+        this.boostSweep.unref();
+    }
+    setSteering(queued, messages = []) {
+        const oldHeight = this.dockHeight();
+        this.queuedSteering = queued;
+        this.steeringMessages = queued ? messages.map(clean) : [];
+        if (this.dock) {
+            if (oldHeight !== this.dockHeight())
+                this.reflow();
+            if (this.cardKind === 'thinking' && this.thinkingSnapshot)
+                this.setThinking(...this.thinkingSnapshot);
+            this.drawDock();
+        }
+    }
+    setAttachments(names) {
+        this.attachmentNames = names.map(clean);
+        if (this.dock)
+            this.drawDock();
+    }
+    /** Live todo list from the model's todo_write tool; replaces the previous list. */
+    setTodos(lines) {
+        const oldHeight = this.dockHeight();
+        this.todos = lines.map(clean);
+        if (this.dock) {
+            if (oldHeight !== this.dockHeight())
+                this.reflow();
+            this.drawDock();
+        }
+    }
+    clearTodos() {
+        if (!this.todos.length)
+            return;
+        this.setTodos([]);
+    }
+    /** Persistent agent status above the composer; never inserted into chat history. */
+    setSubagents(lines) {
+        const before = this.dockHeight();
+        this.subagentStatus = lines.map(clean);
+        if (!this.dock)
+            return;
+        if (before !== this.dockHeight())
+            this.reflow();
+        this.drawDock();
+    }
+    /** Show the reverse-search row above the input; rank is the newest-first position. */
+    setSearch(query, match, rank, total) {
+        const wasActive = this.searchActive;
+        this.searchQuery = query;
+        this.searchMatch = match;
+        this.searchRank = rank;
+        this.searchTotal = total;
+        this.searchActive = true;
+        if (this.dock) {
+            if (!wasActive && this.dockHeight() > 0)
+                this.reflow();
+            this.drawDock();
+        }
+    }
+    clearSearch() {
+        if (!this.searchActive)
+            return;
+        this.searchActive = false;
+        this.searchQuery = '';
+        this.searchMatch = '';
+        this.searchRank = 0;
+        this.searchTotal = 0;
+        if (this.dock) {
+            this.reflow();
+            this.drawDock();
+        }
+    }
+    setContextUsage(used, total) {
+        if (used === undefined || !total) {
+            this.contextUsage = '';
+            if (this.dock)
+                this.drawDock();
+            return;
+        }
+        const consumed = Math.max(0, Math.min(total, Math.floor(used)));
+        const percent = Math.round((consumed / total) * 100);
+        // Numbers only — no bar; the percent already carries the pressure color.
+        this.contextUsage = `ctx ${percent}% ${compactCount(consumed)}/${compactCount(total)}`;
+        if (this.dock)
+            this.drawDock();
+    }
+    composer(model, prompt, text, cursor) {
+        if (text !== this.text && text)
+            this.footerNotice = '';
+        this.model = model;
+        this.prompt = prompt;
+        this.text = text;
+        this.cursor = cursor;
+        if (this.dock) {
+            this.drawDock();
+            return;
+        }
+        this.clearComposer();
+        const columns = Math.max(8, (process.stdout.columns || 80) - 1);
+        const status = fit(`─ ${model} `, columns);
+        this.say(dim(status + '─'.repeat(Math.max(0, columns - width(status)))));
+        const available = Math.max(1, columns - 2);
+        const start = Math.max(0, cursor - available + 1);
+        const visible = text.slice(start, start + available);
+        this.line(prompt, visible, cursor - start);
+        this.composerVisible = true;
+    }
+    clearComposer() {
+        if (this.dock) {
+            this.text = '';
+            this.cursor = 0;
+            this.drawDock();
+            return;
+        }
+        if (!this.composerVisible)
+            return;
+        process.stdout.write('\r\x1b[1A\x1b[J');
+        this.composerVisible = false;
+        this.lineOpen = false;
+    }
+    submitInput(prompt, text) {
+        if (this.viewport.offset)
+            this.scrollChat(-Infinity);
+        this.clearComposer();
+        this.say(prompt + text);
+    }
+    /** Command controls live below the input, outside the scrolling conversation. */
+    menu(items, index, top, cancel, hint = '↑/↓ move · enter select · esc/ctrl+c cancel') {
+        if (!this.dock)
+            return false;
+        this.menuItems = items;
+        this.menuCancel = cancel ?? null;
+        this.menuHint = hint;
+        this.menuIndex = index;
+        this.menuTop = top;
+        this.reflow();
+        this.drawDock();
+        return true;
+    }
+    closeMenu() {
+        if (!this.dock || !this.menuItems)
+            return;
+        this.dockRows.clear();
+        process.stdout.write(`\x1b[${this.chatRows + 1};1H\x1b[J`);
+        this.menuItems = null;
+        this.menuCancel = null;
+        this.reflow();
+        this.drawDock();
+    }
+    drawDock() {
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        let output = '';
+        const put = (row, text) => {
+            if (this.dockRows.get(row) === text)
+                return;
+            this.dockRows.set(row, text);
+            output += `\x1b[${row};1H` + text + '\x1b[K';
+        };
+        let row = this.chatRows + 1;
+        let approvalInputRow = 0;
+        if (this.approvalTitle) {
+            const available = Math.max(1, columns - 4);
+            const title = fit(` ${this.approvalTitle} `, Math.max(1, columns - 4));
+            put(row++, yellow('╭─') + yellow(bold(title)) + dim('─'.repeat(Math.max(0, columns - width(title) - 3))) + yellow('╮'));
+            const body = (text, marker = '│') => yellow('│ ') + text + ' '.repeat(Math.max(0, columns - width(text) - 3)) + yellow(marker);
+            const details = this.approvalRows();
+            const pageSize = this.approvalPageSize();
+            this.approvalTop = Math.min(this.approvalTop, Math.max(0, details.length - pageSize));
+            const visible = details.slice(this.approvalTop, this.approvalTop + pageSize);
+            for (let i = 0; i < visible.length; i++) {
+                const above = i === 0 && this.approvalTop > 0;
+                const below = i === visible.length - 1 && this.approvalTop + pageSize < details.length;
+                const marker = above && below ? '↕' : above ? '↑' : below ? '↓' : '│';
+                put(row++, body(visible[i], marker));
+            }
+            approvalInputRow = row;
+            const choice = fit(this.approvalChoice, Math.max(1, columns - 6));
+            const hintRoom = Math.max(0, columns - 8 - width(choice));
+            const hint = details.length > pageSize
+                ? `${fit(this.approvalHint, hintRoom)} · PgUp/PgDn details`
+                : fit(this.approvalHint, hintRoom);
+            const answer = `${choice}${hint ? dim(' · ') + dim(hint) : ''}`;
+            put(row++, yellow('╰─ ') + accent('› ') + answer + ' '.repeat(Math.max(0, columns - width(answer) - 6)) + yellow('╯'));
+        }
+        const pendingRows = this.steeringHeight();
+        if (pendingRows) {
+            const count = pendingRows === 1 ? 1 : pendingRows - 1;
+            for (const message of this.steeringMessages.slice(-count)) {
+                const raw = '› ' + message;
+                const text = width(raw) > columns ? fit(raw, columns - 1) + '…' : raw;
+                put(row++, mutedRow(text, columns));
+            }
+            if (pendingRows > 1) {
+                const hidden = this.steeringMessages.length - count;
+                put(row++, dim(fit(`  ${hidden ? `${hidden} earlier · ` : ''}pending · sent at next model call`, columns)));
+            }
+        }
+        const todoRows = this.todosHeight();
+        if (todoRows) {
+            put(row++, dim(fit('  todo', columns)));
+            const count = todoRows - 1;
+            for (const todo of this.todos.slice(-count)) {
+                put(row++, dim(fit(`  ${todo}`, columns)));
+            }
+            if (this.todos.length > count)
+                put(row++, dim(fit(`  +${this.todos.length - count} more`, columns)));
+        }
+        for (const text of this.subagentStatus.slice(-this.agentStatusHeight()))
+            put(row++, mutedRow(`  ◇ ${text}`, columns));
+        if (this.searchActive) {
+            const match = fit(this.searchMatch.replace(/\s+/g, ' '), Math.max(4, columns - 2));
+            const rank = this.searchTotal > 1 ? dim(` (${this.searchRank}/${this.searchTotal})`) : '';
+            put(row++, dim('(reverse-i-search`') + (this.searchQuery ? yellow(this.searchQuery) : '') + dim("': ") + match + rank + dim(')'));
+        }
+        const unguarded = this.mode === 'unguarded auto';
+        const modelLabel = unguarded ? ` ${this.mode} · ${this.model}` : ` ${this.model}`;
+        if (this.boost) {
+            const content = fit(`${modelLabel} ϟ`, Math.max(0, columns - 3));
+            const left = '─'.repeat(Math.max(1, columns - width(content) - 2));
+            const plain = `${left}${content} ─`;
+            const modelStart = width(left) + (content.startsWith(' ') ? 1 : 0);
+            const boltStart = width(left) + Math.max(0, content.lastIndexOf('ϟ'));
+            const sweep = this.boostFrame < 0 ? -1 : Math.floor(this.boostFrame / 23 * (width(plain) + 12)) - 6;
+            put(row++, boostBar(plain, modelStart, boltStart, sweep));
+        }
+        else {
+            const label = fit(`${modelLabel} ─`, Math.max(0, columns - 2));
+            put(row++, dim('─'.repeat(Math.max(1, columns - width(label)))) + accent(bold(label)));
+        }
+        const inputRow = row;
+        const prefix = fit(this.prompt, Math.max(2, columns - 8));
+        const available = Math.max(1, columns - width(prefix));
+        // Slice by cells around the caret, preserving the editor's UTF-16 cursor contract.
+        let start = this.cursor;
+        let before = '';
+        for (const c of [...this.text.slice(0, this.cursor)].reverse()) {
+            if (width(c + before) >= available)
+                break;
+            before = c + before;
+            start -= c.length;
+        }
+        const visible = fit(this.text.slice(start), available);
+        const promptText = this.boost ? wrap(prefix, '1;38;2;255;115;0') : orange(prefix);
+        put(row++, promptText + visible);
+        const lowerRule = '─'.repeat(columns);
+        const lowerSweep = this.boostFrame < 0 ? -1 : Math.floor(this.boostFrame / 23 * (columns + 12)) - 6;
+        put(row++, this.boost ? boostBar(lowerRule, columns, columns, lowerSweep) : dim(lowerRule));
+        if (this.menuItems) {
+            const count = this.menuHeight() - 1;
+            if (this.menuIndex < this.menuTop)
+                this.menuTop = this.menuIndex;
+            if (this.menuIndex >= this.menuTop + count)
+                this.menuTop = this.menuIndex - count + 1;
+            for (let i = 0; i < count; i++) {
+                const index = this.menuTop + i;
+                const label = fit(this.menuItems[index] ?? '', columns - 2);
+                const styled = label.replace(/^(\/\w+)(\s+)(.*)$/, (_, command, gap, description) => accent(command) + gap + dim(description));
+                put(row++, index === this.menuIndex ? orange('› ') + accent(bold(label)) : '  ' + styled);
+            }
+            put(row++, dim(fit(this.menuHint, columns)));
+        }
+        else if (this.panelLines) {
+            const count = this.menuHeight() - 1;
+            this.panelTop = Math.min(this.panelTop, Math.max(0, this.panelLines.length - count));
+            for (let i = 0; i < count; i++) {
+                const index = this.panelTop + i;
+                const text = fit(this.panelLines[index] ?? '', columns);
+                put(row++, index === 0 ? accent(bold(text)) : text.startsWith('  ') ? text : usageStyle(text));
+            }
+            put(row++, dim(fit('↑/↓ scroll · r refresh · enter/esc close', columns)));
+        }
+        if (this.menuItems || this.panelLines) {
+            const caretRow = approvalInputRow || inputRow;
+            const caretColumn = approvalInputRow ? Math.min(columns, 5 + Math.min(this.approvalCursor, width(this.approvalChoice)) + 1)
+                : Math.min(columns, width(prefix) + width(before) + 1);
+            process.stdout.write(output + `\x1b[${caretRow};${caretColumn}H`);
+            return;
+        }
+        const modelWorking = this.status === 'waiting for model' || this.status === 'generating';
+        const footerStatus = modelWorking ? 'ready' : this.status.startsWith('thinking') ? 'thinking · ctrl+c to stop' : this.status;
+        const activity = this.viewport.offset ? 'history · PgDn to live' : footerStatus;
+        const attachments = this.attachmentNames.length ? `${this.attachmentNames.length} image${this.attachmentNames.length === 1 ? '' : 's'} attached · ${this.attachmentNames.join(' · ')}` : '';
+        const steering = this.queuedSteering === null || modelWorking ? '' : `${this.queuedSteering ? `${this.queuedSteering} steering queued` : 'Enter to steer'} · ${activity}`;
+        const modeCore = this.mode;
+        const modeLabel = modeCore === 'ask before writes' ? 'ask' : modeCore;
+        const effortLabel = this.effort === 'medium' ? 'med' : this.effort;
+        // While the model reasons, the chat card carries the frame/elapsed/tokens; the footer
+        // narrows to a compact "thinking" marker plus the cancellation shortcut so the mode and
+        // effort tokens do not crowd it out on narrow terminals.
+        const thinking = !this.viewport.offset && !this.footerNotice && this.status.startsWith('thinking');
+        let renderedStatus;
+        if (this.footerNotice) {
+            renderedStatus = accent(fit(this.footerNotice, columns));
+        }
+        else if (attachments && !this.commandMode) {
+            renderedStatus = accent(fit(attachments, columns));
+        }
+        else if (thinking) {
+            const head = yellow('thinking');
+            const longHint = ' · ctrl+c to stop';
+            const hint = width(head) + width(longHint) <= columns - 1 ? longHint : ' · ^C stop';
+            renderedStatus = head + dim(fit(hint, Math.max(0, columns - width(head))));
+        }
+        else {
+            // Every token names itself: a dim short label plus a colored value, so mode and
+            // effort are never ambiguous. The effort value warms toward red as the level rises.
+            // A resting `ready` status is omitted — the prompt already says the CLI is idle.
+            const statusSource = this.commandMode ? this.status : steering || activity;
+            const modeColor = modeCore === 'unguarded auto' || modeCore === 'guarded auto' || modeCore === 'auto mode on' ? yellow : dim;
+            const head = [
+                labeled('mode', modeLabel, modeColor),
+                labeled('effort', effortLabel, effortColor(this.effort)),
+            ].join(dim(' · '));
+            renderedStatus = statusSource === 'ready'
+                ? head
+                : head + dim(' · ') + yellow(fit(statusSource, Math.max(0, columns - width(head) - 3)));
+        }
+        // The context amount is never hidden: reserve space for it first, then trim the
+        // status around it when the line is tight.
+        const contextAmount = this.contextUsage;
+        const ctxWidth = contextAmount ? width(contextAmount) : 0;
+        let statusText = renderedStatus;
+        if (ctxWidth && columns - width(statusText) < 3 + ctxWidth) {
+            statusText = fit(statusText, Math.max(0, columns - 3 - ctxWidth));
+        }
+        const footer = contextAmount ? `${statusText}${dim(' · ')}${usageStyle(contextAmount)}` : statusText;
+        // Footer separators stay muted in every mode; effort retains its semantic color
+        // instead of inheriting the Boost bar's orange accent.
+        put(row, footer);
+        const caretRow = approvalInputRow || inputRow;
+        const caretColumn = approvalInputRow ? Math.min(columns, 5 + Math.min(this.approvalCursor, width(this.approvalChoice)) + 1)
+            : Math.min(columns, width(prefix) + width(before) + 1);
+        process.stdout.write(output + `\x1b[${caretRow};${caretColumn}H`);
+    }
+    scrollChat(delta) {
+        if (!this.dock)
+            return;
+        this.viewport.scroll(delta, process.stdout.columns || 80, this.chatRows);
+        this.paintChat();
+    }
+    paintChat() {
+        if (!this.dock)
+            return;
+        const columns = process.stdout.columns || 80;
+        const lines = this.viewport.visible(columns, this.chatRows);
+        // A dock modal (approval, menu, panel) layers over the conversation; faint it so the
+        // modal reads on top. Plain text is unchanged — only intensity is added.
+        const modal = this.modalFocused();
+        for (let row = 1; row <= this.chatRows; row++) {
+            const line = lines[row - 1] ?? '';
+            process.stdout.write(`\x1b[${row};1H\x1b[2K` + (modal ? faint(line) : line));
+        }
+        const caret = this.viewport.caret(columns, this.chatRows);
+        this.chatRow = caret.row;
+        this.chatColumn = caret.column;
+        this.restoredWrap = caret.column > columns;
+        process.stdout.write(`\x1b[${this.chatRow};${Math.min(columns, this.chatColumn)}H\x1b7`);
+        this.drawDock();
+    }
+    chatPosition() { return this.viewport.position(); }
+    removeChat(start, end) {
+        this.viewport.remove(start, end);
+        this.viewport.release(start, end);
+        if (this.dock)
+            this.paintChat();
+    }
+    clearChat() {
+        this.cardStart = this.cardEnd = null;
+        this.lastToolCard = null;
+        this.toolDetailsExpanded = false;
+        this.agentActivity = '';
+        this.viewport.clear();
+        if (!this.dock)
+            return;
+        for (let row = 1; row <= this.chatRows; row++)
+            process.stdout.write(`\x1b[${row};1H\x1b[2K`);
+        this.chatRow = this.chatColumn = 1;
+        this.restoredWrap = false;
+        this.lineOpen = false;
+        process.stdout.write('\x1b[1;1H\x1b7');
+        this.drawDock();
+    }
+    /** DEC save/restore tracks the chat cursor independently of the input caret. */
+    writeChat(text) {
+        this.viewport.append(text, process.stdout.columns || 80);
+        if (this.dock && this.viewport.offset) {
+            this.paintChat();
+            return;
+        }
+        if (!this.dock) {
+            process.stdout.write(text);
+            return;
+        }
+        const first = stripVTControlCharacters(text)[0];
+        const wrap = this.restoredWrap && first && first !== '\n' && first !== '\r' ? '\r\n' : '';
+        if (first)
+            this.restoredWrap = false;
+        process.stdout.write('\x1b8' + wrap + text + '\x1b7');
+        const columns = process.stdout.columns || 80;
+        for (const c of stripVTControlCharacters(wrap + text)) {
+            if (c === '\r')
+                this.chatColumn = 1;
+            else if (c === '\n') {
+                this.chatRow = Math.min(this.chatRows, this.chatRow + 1);
+                this.chatColumn = 1;
+            }
+            else if (c >= ' ') {
+                if (this.chatColumn > columns) {
+                    this.chatRow = Math.min(this.chatRows, this.chatRow + 1);
+                    this.chatColumn = 1;
+                }
+                this.chatColumn += cells(c);
+            }
+        }
+        this.drawDock();
+    }
+    streamText(text) {
+        this.writeChat(text);
+        this.lineOpen = true;
+    }
+    streamReasoning(text) {
+        this.writeChat(dim(text));
+        this.lineOpen = true;
+    }
+    endTurn() {
+        if (this.lineOpen)
+            this.writeChat('\n');
+        this.lineOpen = false;
+    }
+    clearLine() {
+        if (!this.dock)
+            this.clearComposer();
+        this.writeChat('\r\x1b[K');
+        this.lineOpen = false;
+    }
+    rewrite(text) {
+        this.clearLine();
+        this.writeChat(text);
+        this.lineOpen = !text.endsWith('\n');
+    }
+    line(prompt, text, cursor) {
+        if (this.dock) {
+            this.prompt = prompt;
+            this.text = text;
+            this.cursor = cursor;
+            this.drawDock();
+            return;
+        }
+        this.clearLine();
+        process.stdout.write(prompt + text);
+        const back = text.length - cursor;
+        if (back > 0)
+            process.stdout.write(`\x1b[${back}D`);
+    }
+    say(line) {
+        if (!this.dock)
+            this.clearComposer();
+        this.writeChat(line + '\n');
+        this.lineOpen = false;
+    }
+    warn(line) { this.say(yellow('! ') + line); }
+    error(line) { this.say(red('× ') + line); }
+    info(line) { this.say(dim('· ') + line); }
+    notice(line) {
+        if (!this.dock) {
+            this.info(line);
+            return;
+        }
+        const columns = Math.max(4, (process.stdout.columns || 80) - 1);
+        this.say(noticeRow(line, columns));
+    }
+    spinner(text) { return new Spinner(text, this); }
+}
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+/** Delayed activity indicator; never animates in pipes or under NO_COLOR. */
+export class Spinner {
+    text;
+    sink;
+    timer = null;
+    frame = 0;
+    shown = false;
+    done = false;
+    live = false;
+    constructor(text, sink) {
+        this.text = text;
+        this.sink = sink;
+    }
+    start(delayMs = 300) {
+        this.live = this.sink.activity(this.text, this.text);
+        if (!animated()) {
+            if (this.text && !this.live)
+                this.sink.info(this.text);
+            return this;
+        }
+        this.arm(delayMs);
+        return this;
+    }
+    update(text) {
+        if (this.done)
+            return;
+        this.text = text;
+        this.live = this.sink.activity(this.text, this.text);
+    }
+    pause() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    resume() {
+        if (!animated() || this.done || this.timer)
+            return;
+        this.arm(150);
+    }
+    arm(delayMs) {
+        this.timer = setTimeout(() => {
+            this.shown = true;
+            this.tick();
+            this.timer = setInterval(() => this.tick(), 100);
+        }, delayMs);
+    }
+    tick() {
+        const text = SPINNER_FRAMES[this.frame++ % SPINNER_FRAMES.length] + ' ' + this.text;
+        if (this.live)
+            this.sink.activity(this.text, text);
+        else
+            this.sink.rewrite(text);
+    }
+    stop(final, keepActivity = false) {
+        if (this.done)
+            return;
+        this.done = true;
+        this.pause();
+        if (keepActivity)
+            return;
+        if (this.live) {
+            this.sink.finishActivity(this.text, final);
+            return;
+        }
+        if (!animated()) {
+            if (final !== '')
+                this.sink.say(final);
+            return;
+        }
+        if (final === '')
+            this.sink.clearLine();
+        else if (this.shown)
+            this.sink.rewrite(final + '\n');
+        else
+            this.sink.say(final);
+    }
+}
+export const ui = new UiImpl();