atom-agent 0.3.0 → 1.1.0

package/dist/ui/pickers.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+export function PickerShell({ title, borderColor = theme.border.picker, children, }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.border.style, borderColor: borderColor, paddingX: theme.spacing.pickerPadX, children: [_jsx(Text, { bold: true, children: title }), children] }));
+}
+export function PickerMoreAbove({ count }) {
+    if (count <= 0)
+        return null;
+    return (_jsxs(Text, { dimColor: true, children: [theme.symbol.moreAbove, " ", count, " more"] }));
+}
+export function PickerMoreBelow({ count }) {
+    if (count <= 0)
+        return null;
+    return (_jsxs(Text, { dimColor: true, children: [theme.symbol.moreBelow, " ", count, " more"] }));
+}
+// Visible window for a picker: at most `visible` rows, scrolled so the
+// highlight stays visible (centered while scrolling, pinned at both ends).
+// Pure — the frame never grows past the window no matter how many rows
+// the list holds. Shared by every windowed popup (pickers, slash menu,
+// palette).
+export const MODEL_PICKER_VISIBLE = 10;
+export function pickerWindow(total, highlight, visible = MODEL_PICKER_VISIBLE) {
+    if (total <= visible)
+        return { start: 0, end: total };
+    const h = Math.max(0, Math.min(highlight, total - 1));
+    const start = Math.max(0, Math.min(h - Math.floor(visible / 2), total - visible));
+    return { start, end: start + visible };
+}
+export function PickerRow({ highlighted, highlightColor = theme.color.selection, children, }) {
+    return (_jsxs(Text, { color: highlighted ? highlightColor : undefined, children: [highlighted ? `${theme.symbol.select} ` : theme.spacing.rowIndent, children] }));
+}

package/dist/ui/side-by-side.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Side-by-side diff view for write/edit results: BEFORE pane (left) vs
+// AFTER pane (right), aligned rows, preserved line numbers.
+//
+// Requirements it answers (presentation only — data comes from the
+// existing approve-time preview / commit slot, tool behavior untouched):
+// - left = original, right = result; additions right, removals left,
+//   context on both sides; paired changes share ONE row so corresponding
+//   lines align; changed regions pop via the existing word-background +
+//   add/del line-number treatment; syntax colors reused per cell.
+// - hunks only (configurable context in the engine) — never whole files.
+// - width-aware: panes split the measured terminal (useStdout, same
+//   pattern as App's termColumns); long lines truncate per pane with …
+//   (code-point safe); below NARROW_COLUMNS the view degrades to the
+//   stacked unified DiffView instead of destroying the layout.
+// - computed once per mount (useMemo, keyed on inputs + pane width) and
+//   capped (maxRows + trailer) — never recomputed per tick, never floods.
+// All paint comes from ui/theme tokens.
+import React from "react";
+import { Box, Text } from "ink";
+import { useStdout } from "ink";
+import { computeSideBySide, wordRuns } from "./diff.js";
+import { DiffView, LineBody } from "./diff-view.js";
+import { theme } from "./theme.js";
+// Below this width two panes cannot breathe — stack unified instead.
+export const SBS_NARROW_COLUMNS = 70;
+// Committed-transcript cap (rows, context + change): the scrollback shows
+// the reviewable head; the file on disk is the whole truth. The engine
+// still truncates past 400 changed lines with its own notice.
+export const TRANSCRIPT_DIFF_MAX_LINES = 120;
+function truncateTo(s, width) {
+    const chars = [...s];
+    if (chars.length <= width)
+        return s;
+    if (width < 4)
+        return "";
+    return chars.slice(0, width - 1).join("") + theme.symbol.ellipsis;
+}
+// Fit engine rows to a pane content width: truncate cell texts (with …)
+// and re-derive word runs on the truncated pair so offsets always tile
+// the displayed text. Runs once per mount/width — never per tick.
+function fitRows(rows, contentW) {
+    return rows.map((r) => {
+        if (r.kind === "context") {
+            return {
+                kind: "context",
+                left: { no: r.oldNo, text: truncateTo(r.text, contentW) },
+                right: { no: r.newNo, text: truncateTo(r.text, contentW) },
+            };
+        }
+        const tOld = r.oldText !== null ? truncateTo(r.oldText, contentW) : null;
+        const tNew = r.newText !== null ? truncateTo(r.newText, contentW) : null;
+        let oldRuns = [];
+        let newRuns = [];
+        if (tOld !== null && tNew !== null) {
+            const w = wordRuns(tOld, tNew);
+            oldRuns = w.del;
+            newRuns = w.add;
+        }
+        else if (tOld !== null) {
+            oldRuns = tOld === "" ? [] : [{ text: tOld, changed: false }];
+        }
+        else if (tNew !== null) {
+            newRuns = tNew === "" ? [] : [{ text: tNew, changed: false }];
+        }
+        const changed = oldRuns.some((x) => x.changed) ||
+            newRuns.some((x) => x.changed) ||
+            (r.oldText === null) !== (r.newText === null);
+        return {
+            kind: "change",
+            changed,
+            left: tOld !== null ? { no: r.oldNo, text: tOld, runs: oldRuns } : null,
+            right: tNew !== null ? { no: r.newNo, text: tNew, runs: newRuns } : null,
+        };
+    });
+}
+function padEnd(s, width) {
+    const len = [...s].length;
+    if (len >= width)
+        return s;
+    return s + " ".repeat(width - len);
+}
+function SideBySideInner({ oldText, newText, lang = null, maxRows = Infinity, columns, }) {
+    let stdoutCols;
+    try {
+        stdoutCols = useStdout()?.stdout?.columns;
+    }
+    catch {
+        stdoutCols = undefined;
+    }
+    const totalW = columns ?? stdoutCols ?? 100;
+    const sbs = React.useMemo(() => computeSideBySide(oldText, newText), [oldText, newText]);
+    if (sbs.kind === "same") {
+        return _jsx(Text, { dimColor: true, children: "(no changes \u2014 file unchanged)" });
+    }
+    if (sbs.kind === "binary") {
+        return _jsx(Text, { dimColor: true, children: "binary file changed" });
+    }
+    if (sbs.kind === "skipped") {
+        return _jsx(Text, { dimColor: true, children: sbs.reason });
+    }
+    // Graceful narrow-terminal degrade: stacked unified keeps every char
+    // instead of crushing two panes into unreadable slivers.
+    if (totalW < SBS_NARROW_COLUMNS) {
+        return _jsx(DiffView, { oldText: oldText, newText: newText, lang: lang, maxLines: maxRows });
+    }
+    const sep = ` ${theme.symbol.bar} `;
+    const paneW = Math.max(20, Math.floor((totalW - sep.length) / 2));
+    let maxNo = 0;
+    for (const r of sbs.rows) {
+        if (r.kind === "context")
+            maxNo = Math.max(maxNo, r.oldNo, r.newNo);
+        else {
+            if (r.oldNo !== null)
+                maxNo = Math.max(maxNo, r.oldNo);
+            if (r.newNo !== null)
+                maxNo = Math.max(maxNo, r.newNo);
+        }
+    }
+    const numW = String(Math.max(maxNo, 1)).length;
+    const contentW = Math.max(8, paneW - numW - 1);
+    const view = React.useMemo(() => fitRows(sbs.rows, contentW), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sbs, contentW]);
+    const shown = view.slice(0, maxRows);
+    const overflow = Math.max(0, view.length - shown.length);
+    const renderCell = (no, body, opts) => {
+        const num = no === null ? " ".repeat(numW) : padEnd(String(no), numW);
+        return (_jsxs(Text, { children: [_jsxs(Text, { color: opts.numColor, dimColor: opts.numColor === undefined || opts.dim, children: [num, " "] }), body] }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [sbs.isNewFile ? "new file " : "", "+", sbs.adds, " \u2212", sbs.dels] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: padEnd("BEFORE", paneW) }), _jsx(Text, { dimColor: true, children: sep }), _jsx(Text, { bold: true, children: "AFTER" })] }), shown.map((r, k) => {
+                if (r.kind === "context") {
+                    return (_jsxs(Text, { children: [renderCell(r.left.no, _jsx(Text, { dimColor: true, children: r.left.text }), { dim: true }), _jsx(Text, { dimColor: true, children: sep }), renderCell(r.right.no, _jsx(Text, { dimColor: true, children: r.right.text }), { dim: true })] }, k));
+                }
+                const leftNumColor = r.left !== null && r.changed ? theme.color.toolError : undefined;
+                const rightNumColor = r.right !== null && r.changed ? theme.color.success : undefined;
+                return (_jsxs(Text, { children: [r.left !== null
+                            ? renderCell(r.left.no, _jsx(LineBody, { lineText: r.left.text, runs: r.left.runs, base: "del", lang: lang }), { numColor: leftNumColor, dim: !r.changed })
+                            : renderCell(null, _jsx(Text, { children: padEnd("", contentW) }), { dim: true }), _jsx(Text, { dimColor: true, children: sep }), r.right !== null
+                            ? renderCell(r.right.no, _jsx(LineBody, { lineText: r.right.text, runs: r.right.runs, base: "add", lang: lang }), { numColor: rightNumColor, dim: !r.changed })
+                            : renderCell(null, _jsx(Text, { children: padEnd("", contentW) }), { dim: true })] }, k));
+            }), overflow > 0 ? _jsxs(Text, { dimColor: true, children: ["\u2026 ", overflow, " more row", overflow === 1 ? "" : "s"] }) : null, sbs.truncated ? _jsx(Text, { dimColor: true, children: "(diff truncated at 400 changed lines)" }) : null] }));
+}
+export const SideBySideDiffView = React.memo(SideBySideInner);

package/dist/ui/status-bar.js

@@ -0,0 +1,75 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Status bar leaf: the sole info bar, state-prioritized and quiet.
+// - idle: provider/model │ token │ cwd[:branch] │ reasoning │ mode.
+//   Labels are positional (no `provider:` prefixes); mode/trust show always
+//   (pinned), cwd shortens, branch only for git repos.
+// - busy: activity │ elapsed │ token │ reasoning │ mode │ esc-hint (+waiting/approval flags).
+//   Provider/model/cwd drop while working — the activity, the
+//   clock, context pressure, effort, and the pinned mode are what matter mid-turn.
+// All paint comes from ui/theme tokens. The token segment formatter lives
+// in context-windows (its only surface).
+import React from "react";
+import { Box, Text } from "ink";
+import { formatTokenSegment } from "../context-windows.js";
+import { theme } from "./theme.js";
+// ~/… collapse + tail-cut: informative, never a full scroll of nesting.
+// Further shrinking for tight widths goes through shrinkTo below (the bar
+// measures first and only renders what fits).
+export function shortenCwd(cwd, home, max = 20) {
+    const short = home && cwd.startsWith(home) ? `~${cwd.slice(home.length)}` : cwd;
+    if (short.length <= max)
+        return short;
+    return `…/${short.slice(-(max - 3))}`;
+}
+// Shrink text to n chars max for tight widths (`…/tail` keeps the
+// meaningful end). n < 4 yields "" (caller drops the segment instead).
+export function shrinkTo(s, n) {
+    if (s.length <= n)
+        return s;
+    if (n < 4)
+        return "";
+    return `…/${s.slice(-(n - 3))}`;
+}
+// Render-count probe for the flicker tests: incremented on every StatusBar
+// render (same-props parent churn — token paints, keystrokes, unrelated
+// ticks — must skip it; only changed props repaint).
+export const statusBarRenderProbe = { count: 0 };
+export const StatusBar = React.memo(function StatusBar({ provider, model, usageTotals, contextLoad, reasoningDisplay, mode, trustAll, busy, activity, phaseLabel, elapsedSecs, stalled, approvalPending, cwd, branch, columns = 100, }) {
+    statusBarRenderProbe.count += 1;
+    const bar = theme.symbol.bar;
+    if (!busy) {
+        const token = formatTokenSegment(usageTotals, model, contextLoad);
+        const trust = trustAll && mode !== "plan" ? "+trust" : "";
+        // Measure-first layout: the location (cwd + branch) flexes so the whole
+        // line always fits `columns`. Fixed segments never shrink (wrapping
+        // would split `mode: X` needles across lines); the location yields in
+        // order: branch → cwd tail → the whole segment.
+        const tail = `reasoning: ${reasoningDisplay} ${bar} mode: ${mode}${trust}`;
+        const baseLen = `${provider}/${model} ${bar} ${token} ${bar}  ${bar} ${tail}`.length;
+        const avail = columns - baseLen;
+        let loc = null;
+        if (cwd) {
+            const branchPart = branch ? ` : ${branch}` : "";
+            if (3 + cwd.length + branchPart.length <= avail) {
+                loc = `${cwd}${branchPart}`;
+            }
+            else if (3 + cwd.length <= avail) {
+                loc = cwd;
+            }
+            else {
+                const shrunk = shrinkTo(cwd, avail - 3);
+                loc = shrunk ? shrunk : null;
+            }
+        }
+        return (_jsx(Box, { marginTop: theme.spacing.statusMarginTop, children: _jsxs(Text, { dimColor: true, children: [provider, "/", model, " ", bar, " ", token, loc ? (_jsxs(_Fragment, { children: [" ", bar, " ", loc] })) : null, " ", bar, " reasoning: ", reasoningDisplay, " ", bar, " mode: ", mode, trust ? "+trust" : null] }) }));
+    }
+    // Busy layout prioritizes activity + clock + interrupt hint; the mode
+    // stays pinned (it used to vanish while working), and the reasoning
+    // effort stays visible (it used to vanish while working). The activity text
+    // shrinks to fit so `esc stops` never wraps away.
+    const busyTrust = trustAll && mode !== "plan" ? "+trust" : "";
+    const busyFixed = ` ${bar} ${elapsedSecs}s ${bar} ${formatTokenSegment(usageTotals, model, contextLoad)} ${bar} reasoning: ${reasoningDisplay} ${bar} mode: ${mode}${busyTrust} ${bar} esc stops`;
+    const busyAvail = columns - busyFixed.length - 2;
+    const activityText = shrinkTo(activity ?? phaseLabel, Math.max(0, busyAvail));
+    return (_jsx(Box, { marginTop: theme.spacing.statusMarginTop, children: _jsxs(Text, { dimColor: true, children: [_jsxs(Text, { color: theme.color.activity, children: [theme.symbol.workTool, " ", activityText] }), busyFixed, stalled && !approvalPending ? ` ${bar} waiting${theme.symbol.ellipsis}` : null, approvalPending ? (_jsxs(Text, { color: theme.color.warning, children: [" ", bar, " waiting approval"] })) : null] }) }));
+});

package/dist/ui/theme.js

@@ -0,0 +1,128 @@
+// ATOM TUI design tokens: the single source of visual truth.
+//
+// Every color, glyph, separator, border, and spacing value in the interface
+// lives here. Components reference these tokens — never string literals —
+// so the whole TUI can be re-skinned by editing this file alone, and later
+// polish chunks change values here instead of hunting call sites.
+//
+// Density rules (terminal space is scarce):
+// - No decorative boxes: only the input, pickers, and modals are framed.
+// - The transcript is frameless text; hierarchy comes from speaker labels,
+//   dimming, and one blank line between turns — never extra chrome.
+// - `muted` is implemented as Ink `dimColor` (terminal-dimmed default fg),
+//   NOT as gray paint: it adapts to light/dark terminals. Literal gray
+//   (`color.mutedPaint`) is reserved for block glyphs (cursors) that need a
+//   fixed shade to read as a shape.
+//
+// Identities (ATOM's own, not borrowed):
+// - Speaker labels: `you>` (cyan) vs `ATOM>` (magenta).
+// - Selection marker: `❯` + highlight color; unselected rows indent two
+//   spaces so lists align without bullets.
+// - Live activity: `◌` (tool running), `💭` (thinking), `▍`/`█` (cursors).
+// - Status segments join with `·`; name/description rows join with `—`.
+export const theme = {
+    color: {
+        // Base surfaces: inherit the terminal (no paint) — the TUI never sets a
+        // background, so light and dark terminals both work.
+        background: undefined,
+        foreground: undefined,
+        // Primary reading text: terminal default, emphasized with bold (titles,
+        // speaker labels), never with a hue.
+        primary: undefined,
+        // Secondary/muted text: Ink dimColor mechanism (see note above).
+        // `mutedPaint` is the fixed gray reserved for cursor glyphs.
+        mutedPaint: "gray",
+        // Interactive selection (picker rows, approval highlight).
+        selection: "green",
+        menuSelection: "cyan",
+        questionSelection: "magenta",
+        // Speaker identities.
+        user: "cyan",
+        assistant: "magenta",
+        inputPrompt: "cyan",
+        // Live activity (busy phase segment in the status bar).
+        activity: "yellow",
+        // Tool transcript lines: dim default text; red only on failure.
+        tool: undefined,
+        toolError: "red",
+        // Outcomes + permission surfaces.
+        success: "green",
+        warning: "yellow",
+        error: "red",
+        permission: "yellow",
+        // Reserved for the streaming-markdown chunk: code frames + links + headings.
+        code: "green",
+        link: "cyan",
+        heading: undefined, // bold, no hue
+        // Diff-body syntax colors (ui/highlight): Monokai-ish hues that read
+        // on dark and light terminals. Comments stay dim (no hue — same rule
+        // as muted text); plain code inherits the line paint.
+        synKeyword: "magenta",
+        synString: "yellow",
+        synNumber: "cyan",
+    },
+    border: {
+        style: "round",
+        input: "gray",
+        picker: "green",
+        menu: "cyan",
+        panel: "cyan",
+        approval: "yellow",
+        question: "magenta",
+    },
+    spacing: {
+        // Unselected picker rows indent to align with `❯ ` selected rows.
+        rowIndent: "  ",
+        // Code-block body indent (no boxes around code — indentation only).
+        codeIndent: "  ",
+        pickerPadX: 1,
+        // Breathing room: one blank line after each committed turn; the live
+        // tail floats with vertical margin; the status bar sits one line below.
+        turnGap: 1,
+        liveTailMarginY: 1,
+        statusMarginTop: 1,
+    },
+    symbol: {
+        select: "❯",
+        bullet: "•",
+        quoteBar: "│",
+        moreAbove: "↑",
+        moreBelow: "↓",
+        separator: "·",
+        descSeparator: "—",
+        // Status-bar segment divider (structural, quiet). Inline joins elsewhere
+        // keep `·`.
+        bar: "│",
+        // Expanded-view divider unit (repeated for the rule line — a divider,
+        // never a frame).
+        rule: "─",
+        ellipsis: "…",
+        running: "◌",
+        thinking: "💭",
+        // Working-state glyphs: open circle = unsettled (thinking), filled
+        // circle = engaged (tool executing). Stable by design — liveness reads
+        // from ticking elapsed seconds, not animation (see ui/activity).
+        workThinking: "◐",
+        workTool: "◉",
+        // Attention marker for permission + warning surfaces (mirrors the
+        // loop's `⚠ ` warning prefix).
+        warningMark: "⚠",
+        // The loop's tool-audit marker: committed call rows keep `⚙ name target`
+        // byte-identical (tests + help pin the text); ToolLine keys its slow-run
+        // suffix off this same marker.
+        toolMark: "⚙",
+        cursorBar: "▍",
+        cursorBlock: "█",
+        inputPrompt: "›",
+        keyMask: "•",
+        keyPresent: "✓",
+        taskDone: "✅",
+        taskActive: "🔧",
+        // Pending means "not started yet" — an open circle (never ❌, which
+        // reads as failed/denied). Matches the circle language of the
+        // working-state glyphs (◌ unsettled / ◉ engaged).
+        taskPending: "○",
+        speakerUser: "you>",
+        speakerAssistant: "ATOM>",
+    },
+};

package/dist/ui/todo-panel.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// Live session checklist panel (TodoWrite mirror). Prop-driven; returns
+// null when empty. Mounted below the transcript, fed by a checklist snapshot.
+// Paint from ui/theme tokens — no literal colors or glyphs here.
+import React from "react";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+// Live session checklist (Claude-Code-style TodoWrite panel). Mounted in
+// the live area below the transcript (NOT in <Static> scrollback) and fed
+// by a snapshot the loop refreshes after every todowrite/todo_update call,
+// so the in-progress row — shown with its activeForm when present — always
+// answers "what is the model doing right now". Returns null when empty.
+// Render-count probe for the flicker tests: same-props parent churn must
+// skip the panel (it only changes when the loop commits todo activity).
+export const todoPanelRenderProbe = { count: 0 };
+export const TodoPanel = React.memo(function TodoPanel({ items }) {
+    todoPanelRenderProbe.count += 1;
+    if (items.length === 0)
+        return null;
+    const done = items.filter((t) => t.status === "completed").length;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.border.style, borderColor: theme.border.panel, paddingX: theme.spacing.pickerPadX, marginTop: theme.spacing.turnGap, children: [_jsxs(Text, { bold: true, children: ["Tasks ", done, "/", items.length] }), items.map((t, i) => {
+                const mark = t.status === "completed"
+                    ? theme.symbol.taskDone
+                    : t.status === "in_progress"
+                        ? theme.symbol.taskActive
+                        : theme.symbol.taskPending;
+                const label = t.status === "in_progress" && t.activeForm ? t.activeForm : t.content;
+                return (_jsxs(Text, { dimColor: t.status === "completed", children: [mark, " ", label, t.priority ? ` (${t.priority})` : ""] }, `${i}-${t.content}`));
+            })] }));
+});

package/dist/ui/tool-inspector.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+export const MAX_TOOL_RECORDS = 50;
+export const STORE_CHARS = 32768;
+export const VIEWPORT_LINES = 20;
+export const LIST_WINDOW = 15;
+export function createToolRecord(id, label, result, isError, ms) {
+    const text = result ?? "";
+    const truncated = text.length > STORE_CHARS;
+    const stored = truncated ? text.slice(0, STORE_CHARS) : text;
+    return {
+        id,
+        label,
+        result: stored,
+        truncated,
+        isError,
+        ms,
+        lineCount: stored.length === 0 ? 0 : stored.split("\n").length,
+    };
+}
+// Centered window over a list: {slice, start, above, below}. Pure — the
+// panel and its tests share it.
+export function windowedList(items, index, size) {
+    if (items.length <= size)
+        return { slice: items, start: 0, above: 0, below: 0 };
+    const half = Math.floor(size / 2);
+    let start = Math.max(0, Math.min(index - half, items.length - size));
+    return {
+        slice: items.slice(start, start + size),
+        start,
+        above: start,
+        below: items.length - (start + size),
+    };
+}
+function formatDur(ms) {
+    return ` ${theme.symbol.separator} ${Math.max(1, Math.round(ms / 1000))}s`;
+}
+export function InspectorPanel({ records, index, expanded, scroll }) {
+    const sel = Math.max(0, Math.min(index, records.length - 1));
+    const rec = records[sel];
+    if (!rec)
+        return null;
+    if (!expanded) {
+        const win = windowedList(records, sel, LIST_WINDOW);
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Tool outputs \u2014 select to inspect (Enter expands, Esc closes):" }), win.above > 0 ? (_jsxs(Text, { dimColor: true, children: [theme.symbol.moreAbove, " ", win.above, " more"] })) : null, win.slice.map((r, k) => {
+                    const i = win.start + k;
+                    const hi = i === sel;
+                    return (_jsxs(Text, { color: hi ? theme.color.selection : r.isError ? theme.color.toolError : undefined, children: [hi ? `${theme.symbol.select} ` : theme.spacing.rowIndent, r.isError ? "✕ " : "", r.label, r.ms >= 2000 ? formatDur(r.ms) : ""] }, r.id));
+                }), win.below > 0 ? (_jsxs(Text, { dimColor: true, children: [theme.symbol.moreBelow, " ", win.below, " more"] })) : null, _jsxs(Text, { dimColor: true, children: [theme.symbol.moreAbove, "/", theme.symbol.moreBelow, " move \u00B7 Enter expands \u00B7 Esc closes \u00B7 Ctrl+O closes"] })] }));
+    }
+    const lines = rec.result.split("\n");
+    const total = lines.length;
+    const maxOffset = Math.max(0, total - VIEWPORT_LINES);
+    const off = Math.max(0, Math.min(scroll, maxOffset));
+    const view = lines.slice(off, off + VIEWPORT_LINES);
+    const rule = theme.symbol.rule.repeat(32);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: [_jsx(Text, { color: rec.isError ? theme.color.toolError : theme.color.success, children: rec.isError ? "✕ " : "✓ " }), rec.label, rec.ms >= 2000 ? formatDur(rec.ms) : "", _jsxs(Text, { dimColor: true, children: [" ", theme.symbol.separator, " ", rec.lineCount, " line", rec.lineCount === 1 ? "" : "s"] })] }), rec.truncated ? (_jsxs(Text, { dimColor: true, children: ["(stored output truncated at ", Math.round(STORE_CHARS / 1024), "KB)"] })) : null, _jsx(Text, { dimColor: true, children: rule }), view.map((ln, k) => (_jsx(Text, { children: ln.length > 0 ? ln : " " }, off + k))), _jsx(Text, { dimColor: true, children: rule }), _jsxs(Text, { dimColor: true, children: [off > 0 ? `${theme.symbol.moreAbove} ${off} more ` : "", theme.symbol.moreAbove, "/", theme.symbol.moreBelow, " scroll \u00B7 PgUp/PgDn jump \u00B7 Enter collapses \u00B7 Esc closes", maxOffset - off > 0 ? ` ${theme.symbol.moreBelow} ${maxOffset - off} more` : ""] })] }));
+}

package/dist/ui/transcript.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Transcript leaves: the committed <Static> scrollback, its item renderer,
+// and the startup banner. Prop-driven + memoized (see comments) so App state
+// churn never repaints them. Turn is the display-transcript entry shape.
+// All paint comes from ui/theme tokens — no literal colors or glyphs here.
+import React from "react";
+import { Box, Text } from "ink";
+import { SideBySideDiffView, TRANSCRIPT_DIFF_MAX_LINES } from "./side-by-side.js";
+import { ErrorCard, classifyToolError } from "./errors.js";
+import { MarkdownText, ToolLine } from "./markdown.js";
+import { theme } from "./theme.js";
+// Scrollback viewport: the committed transcript renders as a windowed
+// slice of turns in a live Box (NOT <Static> — Static is append-only with
+// no scroll API, so PgUp/Home/follow modes are impossible on it).
+//
+// Model: E = viewed end index (items visible: (E-WIN, E]). E === turns.length
+// means follow mode — new turns extend the view automatically. Any E < len
+// is manual mode: the view freezes while new turns accumulate below, and a
+// `↓ N new` indicator offers the jump back. Clamping makes list replacement
+// (/clear, /resume, /new) re-follow for free (E > len collapses to len).
+// Banner shows only when the window touches the top.
+export const SCROLLBACK_WINDOW = 300;
+export const SCROLL_PAGE_ITEMS = 10;
+export function resolveViewport(len, end, win = SCROLLBACK_WINDOW) {
+    const e = Math.max(0, Math.min(end ?? len, len));
+    const follow = e >= len;
+    return { start: Math.max(0, e - win), end: e, pending: len - e, follow };
+}
+export function applyScrollAction(end, len, action) {
+    const e = end ?? len;
+    switch (action.kind) {
+        case "pageUp":
+            // Short sessions (everything fits the window) have no window to move:
+            // freeze at the bottom instead of no-op-ing, so PgUp always engages
+            // the held view (live output stops growing; the terminal stops
+            // yanking). Long sessions move the window up a page, as before.
+            if (len <= SCROLLBACK_WINDOW)
+                return len;
+            return Math.max(Math.min(len, SCROLLBACK_WINDOW), e - SCROLL_PAGE_ITEMS);
+        case "pageDown": {
+            const next = Math.min(len, e + SCROLL_PAGE_ITEMS);
+            return next >= len ? null : next;
+        }
+        case "home":
+            return Math.min(len, SCROLLBACK_WINDOW);
+        case "end":
+            return null;
+    }
+}
+function isAuditLabel(t) {
+    return t.role === "tool" && !t.error && t.content.startsWith(`${theme.symbol.toolMark} `);
+}
+export function renderTranscriptItem(item) {
+    if (!item.turn)
+        return _jsx(StartupBanner, {}, item.id);
+    const t = item.turn;
+    const i = item.id;
+    // Committed thinking blocks read as quiet annotations (never confused
+    // with answers): dim label plus the raw reasoning text, verbatim.
+    if (t.thinking === true) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [theme.symbol.thinking, " thinking"] }), _jsx(Text, { dimColor: true, children: t.content })] }, i));
+    }
+    // Conversation turns (user/assistant) breathe: one blank line after each,
+    // so the eye lands on the next turn. Tool/status lines stay dense — they
+    // read as lightweight annotations woven between turns, not blocks.
+    if (t.role === "user") {
+        return (_jsx(Box, { flexDirection: "column", marginBottom: theme.spacing.turnGap, children: _jsxs(Text, { children: [_jsxs(Text, { color: theme.color.user, bold: true, children: [theme.symbol.speakerUser, " "] }), t.content] }) }, i));
+    }
+    if (t.role === "tool") {
+        const classified = classifyToolError(t, item.label ?? null);
+        if (classified) {
+            // Paired cards keep the verbatim audit line above the card (pinned
+            // `⚙ name target` text for tests/scanning) and name the failure in
+            // the card title. Lone details render the card alone. A successful
+            // write/edit label swallowed by pairing (success line immediately
+            // followed by an error line) keeps its committed diff above the card.
+            const labelDiff = item.label?.diff;
+            return (_jsxs(React.Fragment, { children: [item.label ? _jsx(ToolLine, { content: item.label.content, ms: item.label.ms }) : null, labelDiff && !item.label?.error ? (_jsx(SideBySideDiffView, { oldText: labelDiff.oldText, newText: labelDiff.newText, lang: labelDiff.lang, maxRows: TRANSCRIPT_DIFF_MAX_LINES })) : null, _jsx(ErrorCard, { classified: classified })] }, i));
+        }
+        return (_jsxs(React.Fragment, { children: [_jsx(ToolLine, { content: t.content, error: t.error, ms: t.ms }), t.diff && !t.error ? (_jsx(SideBySideDiffView, { oldText: t.diff.oldText, newText: t.diff.newText, lang: t.diff.lang, maxRows: TRANSCRIPT_DIFF_MAX_LINES })) : null] }, i));
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: theme.spacing.turnGap, children: [_jsx(Text, { children: _jsxs(Text, { color: theme.color.assistant, bold: true, children: [theme.symbol.speakerAssistant, " "] }) }), _jsx(MarkdownText, { text: t.content })] }, i));
+}
+// Render-count probe for the timer-isolation test: incremented on every
+// TranscriptView render (a 1s timer tick must leave it unchanged).
+export const transcriptRenderProbe = { count: 0 };
+export const TranscriptView = React.memo(function TranscriptView({ turns, clearGen, renderItem, end, windowSize, held, showThinking = true, }) {
+    transcriptRenderProbe.count += 1;
+    const render = renderItem ?? renderTranscriptItem;
+    const win = windowSize ?? SCROLLBACK_WINDOW;
+    const vp = resolveViewport(turns.length, end, win);
+    // Pairing ([audit label, error detail] → one card) runs over the VISIBLE
+    // slice only — pairing is positional, and off-window turns never mount.
+    // Keys stay global (`turn-${idx}`) so scrolling never remounts rows.
+    // Hidden thinking turns are skipped in place (same index stability).
+    const body = [];
+    for (let idx = vp.start; idx < vp.end; idx++) {
+        const turn = turns[idx];
+        if (turn.thinking === true && !showThinking)
+            continue;
+        const next = idx + 1 < vp.end ? turns[idx + 1] : undefined;
+        if (isAuditLabel(turn) && next !== undefined && next.role === "tool" && next.error === true) {
+            body.push({ id: `turn-${idx}`, turn: next, label: turn });
+            idx += 1;
+            continue;
+        }
+        body.push({ id: `turn-${idx}`, turn });
+    }
+    const items = clearGen === 0 && vp.start === 0 ? [{ id: "banner" }, ...body] : body;
+    return (_jsxs(Box, { flexDirection: "column", children: [items.map((item) => (_jsx(React.Fragment, { children: render(item) }, item.id))), vp.pending > 0 ? (_jsxs(Text, { dimColor: true, children: ["\u2193 ", vp.pending, " new \u2014 End for latest"] })) : held ? (_jsxs(Text, { dimColor: true, children: [theme.symbol.moreAbove, " held \u2014 End to follow"] })) : null] }));
+});
+// Startup banner: the ATOM block-letter art, rendered once at launch inside
+// <Static> (scrollback, so it scrolls away naturally). FIGlet "ANSI Shadow"
+// ATOM (Unicode box-drawing — needs a monospace font with box-drawing
+// support, which Windows Terminal / ConHost / most terminals have). The art
+// is the whole banner: the footer status line is the sole info bar, so no
+// hint lines live here.
+export const ATOM_ART = [
+    " █████╗ ████████╗ ██████╗ ███╗   ███╗",
+    "██╔══██╗╚══██╔══╝██╔═══██╗████╗ ████║",
+    "███████║   ██║   ██║   ██║██╔████╔██║",
+    "██╔══██║   ██║   ██║   ██║██║╚██╔╝██║",
+    "██║  ██║   ██║   ╚██████╔╝██║ ╚═╝ ██║",
+    "╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝     ╚═╝",
+];
+export function StartupBanner() {
+    return (_jsx(Box, { flexDirection: "column", marginBottom: theme.spacing.turnGap, children: ATOM_ART.map((line, i) => (_jsx(Text, { color: theme.color.user, bold: true, children: line }, i))) }));
+}