atom-agent 1.4.0 → 1.5.0

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

@@ -20,8 +20,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { computeSideBySide, rangeLabel, sbsRange, wordRuns } from "./diff.js";
+import { DiffSummary, 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;
@@ -30,13 +30,65 @@ export const SBS_NARROW_COLUMNS = 70;
 // remains as an opt-in window for callers/tests that want a collapsed tail.
 // Retained for compatibility.
 export const TRANSCRIPT_DIFF_MAX_LINES = Infinity;
+// Terminal-cell width helpers: the old truncateTo/padEnd counted code
+// points, so tabs (1 cp, N columns), CJK/emoji (1 cp, 2 columns), and
+// unpadded short lines all shifted the │ separator per row — the "messy
+// spacing" in the report. These helpers normalize first, then measure in
+// terminal cells so every row tiles exactly paneW + sep + paneW.
+function expandTabs(s) {
+    // Repo indent is 2 spaces; a tab becomes 2 columns (compact, stable).
+    return s.replace(/\t/g, "  ");
+}
+function cellWidth(ch) {
+    const cp = ch.codePointAt(0) ?? 0;
+    if (cp < 0x1100)
+        return 1;
+    if ((cp >= 0x1100 && cp <= 0x115f) ||
+        (cp >= 0x2e80 && cp <= 0x303e) ||
+        (cp >= 0x3041 && cp <= 0x33ff) ||
+        (cp >= 0x3400 && cp <= 0x4dbf) ||
+        (cp >= 0x4e00 && cp <= 0x9fff) ||
+        (cp >= 0xac00 && cp <= 0xd7af) ||
+        (cp >= 0xf900 && cp <= 0xfaff) ||
+        (cp >= 0xfe30 && cp <= 0xfe4f) ||
+        (cp >= 0xff00 && cp <= 0xff60) ||
+        (cp >= 0xffe0 && cp <= 0xffe6) ||
+        (cp >= 0x20000 && cp <= 0x3fffd) ||
+        (cp >= 0x1f300 && cp <= 0x1faff) ||
+        (cp >= 0x2600 && cp <= 0x27bf))
+        return 2;
+    return 1;
+}
+function displayWidth(s) {
+    let w = 0;
+    for (const ch of expandTabs(s))
+        w += cellWidth(ch);
+    return w;
+}
 function truncateTo(s, width) {
-    const chars = [...s];
-    if (chars.length <= width)
-        return s;
+    const src = expandTabs(s);
+    if (displayWidth(src) <= width)
+        return src;
     if (width < 4)
         return "";
-    return chars.slice(0, width - 1).join("") + theme.symbol.ellipsis;
+    const ell = theme.symbol.ellipsis; // 1 cell
+    let w = 0;
+    let out = "";
+    for (const ch of src) {
+        const cw = cellWidth(ch);
+        if (w + cw > width - 1)
+            break;
+        out += ch;
+        w += cw;
+    }
+    return out + ell;
+}
+function padDisplay(s, width) {
+    const src = expandTabs(s);
+    const w = displayWidth(src);
+    if (w >= width)
+        return src;
+    return src + " ".repeat(width - w);
 }
 // 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
@@ -77,12 +129,9 @@ function fitRows(rows, contentW) {
     });
 }
 function padEnd(s, width) {
-    const len = [...s].length;
-    if (len >= width)
-        return s;
-    return s + " ".repeat(width - len);
+    return padDisplay(s, width);
 }
-function SideBySideInner({ oldText, newText, lang = null, maxRows = Infinity, columns, }) {
+function SideBySideInner({ oldText, newText, lang = null, path = null, maxRows = Infinity, columns, }) {
     let stdoutCols;
     try {
         stdoutCols = useStdout()?.stdout?.columns;
@@ -104,10 +153,16 @@ function SideBySideInner({ oldText, newText, lang = null, maxRows = Infinity, co
     // 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 });
+        return _jsx(DiffView, { oldText: oldText, newText: newText, lang: lang, path: path, maxLines: maxRows });
     }
     const sep = ` ${theme.symbol.bar} `;
-    const paneW = Math.max(20, Math.floor((totalW - sep.length) / 2));
+    // Reserve the App root padding (padding={1} each side = 2 cols) so tiles
+    // never overflow the frame and wrap. Inside bordered modals (border 2 +
+    // padding 2) we still overestimate by ~4 — wrap="truncate" below contains
+    // that instead of breaking the box.
+    const availW = Math.max(SBS_NARROW_COLUMNS, totalW - 2);
+    const sepW = displayWidth(sep);
+    const paneW = Math.max(20, Math.floor((availW - sepW) / 2));
     let maxNo = 0;
     for (const r of sbs.rows) {
         if (r.kind === "context")
@@ -126,21 +181,25 @@ function SideBySideInner({ oldText, newText, lang = null, maxRows = Infinity, co
     [sbs, contentW]);
     const shown = view.slice(0, maxRows);
     const overflow = Math.max(0, view.length - shown.length);
-    const renderCell = (no, body, opts) => {
+    // Every cell tiles exactly numW + 1 + contentW cells: the body text is
+    // already truncated to contentW by fitRows, so trailing spaces pad it to
+    // full width and the │ separator lands in the same column every row.
+    const renderCell = (no, bodyText, 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] }));
+        const pad = " ".repeat(Math.max(0, contentW - displayWidth(bodyText)));
+        return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: opts.numColor, dimColor: opts.numColor === undefined || opts.dim, children: [num, " "] }), body, pad] }));
     };
-    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) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(DiffSummary, { adds: sbs.adds, dels: sbs.dels, isNewFile: sbs.isNewFile, path: path, range: sbs.isNewFile ? null : rangeLabel(sbsRange(sbs.rows)) }), 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));
+                    return (_jsxs(Text, { wrap: "truncate", children: [renderCell(r.left.no, r.left.text, _jsx(Text, { dimColor: true, children: r.left.text }), { dim: true }), _jsx(Text, { dimColor: true, children: sep }), renderCell(r.right.no, r.right.text, _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));
+                return (_jsxs(Text, { wrap: "truncate", children: [r.left !== null
+                            ? renderCell(r.left.no, r.left.text, _jsx(LineBody, { lineText: r.left.text, runs: r.left.runs, base: "del", lang: lang }), { numColor: leftNumColor, dim: !r.changed })
+                            : renderCell(null, "", _jsx(Text, { children: "" }), { dim: true }), _jsx(Text, { dimColor: true, children: sep }), r.right !== null
+                            ? renderCell(r.right.no, r.right.text, _jsx(LineBody, { lineText: r.right.text, runs: r.right.runs, base: "add", lang: lang }), { numColor: rightNumColor, dim: !r.changed })
+                            : renderCell(null, "", _jsx(Text, { children: "" }), { 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

@@ -1,11 +1,18 @@
 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.
+// Status bar leaf: the sole info bar, state-prioritized and quiet (ticket 06
+// information discipline).
 // - 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.
+//   (pinned), cwd shortens, branch only for git repos. A pending approval
+//   pins a `waiting approval` decision flag (warning color) — decision demand
+//   outranks location, which yields first under width pressure.
 // - 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.
+// - estimates: the token P% reads `(~P%)` (tilde) whenever the context load
+//   is a chars-based estimate rather than provider-reported input tokens
+//   (see `loadEstimated` / `isEstimatedLoad`); `token: n/a` and bare
+//   `token: NK` never gain a marker. Estimates are never exact facts.
 // All paint comes from ui/theme tokens. The token segment formatter lives
 // in context-windows (its only surface).
 import React from "react";
@@ -53,6 +60,44 @@ export function fitGoalSegment(goal, room) {
         return null;
     return `goal: ${truncateGoalObjective(goal.objective, allow)} [${state}]`;
 }
+// Estimate honesty (ticket 06): is the context load behind P% a heuristic
+// rather than provider-reported input tokens? An explicit `override` (the
+// `loadEstimated` prop, owned by the caller that tracks the report latch)
+// always wins. Without one, the bar can only prove the never-reported case:
+// usage exists with no finite prompt_tokens anywhere in the accumulated
+// totals, so the load could only have come from the chars/token estimate.
+// Stale-totals resets (compaction/clear/resume/switch keep accumulated
+// prompt_tokens while the load falls back to the estimate) need the explicit
+// latch — the heuristic stays exact there, documented as a known gap rather
+// than guessed. Pure; never throws.
+export function isEstimatedLoad(usage, load, override) {
+    if (override === true)
+        return true;
+    if (override === false)
+        return false;
+    if (!usage || typeof load !== "number" || !Number.isFinite(load))
+        return false;
+    const reported = usage.prompt_tokens;
+    return !(typeof reported === "number" && Number.isFinite(reported));
+}
+// Tilde-marker for an estimated P%: `token: (17%) 44K` → `token: (~17%) 44K`.
+// Single source of truth stays `formatTokenSegment` — this only inserts the
+// `~` when the exact `(P%)` form is present, so `token: n/a` (nothing
+// reported yet) and bare `token: NK` (no verified window, spend only) pass
+// through byte-identical. Pure; never throws.
+export function markTokenEstimate(segment) {
+    const prefix = "token: (";
+    if (typeof segment === "string" && segment.startsWith(prefix)) {
+        return `token: (~${segment.slice(prefix.length)}`;
+    }
+    return segment;
+}
+// Labeled token segment for the bar: exact `(P%)` for provider-reported
+// loads, `(~P%)` for estimates, `n/a` / bare forms untouched. Pure.
+export function formatStatusTokenSegment(usage, model, load, loadEstimated) {
+    const segment = formatTokenSegment(usage, model, load);
+    return isEstimatedLoad(usage, load, loadEstimated) ? markTokenEstimate(segment) : segment;
+}
 // ~/… 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).
@@ -75,7 +120,7 @@ export function shrinkTo(s, n) {
 // 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, extensionStatus, goal, }) {
+export const StatusBar = React.memo(function StatusBar({ provider, model, usageTotals, contextLoad, loadEstimated, reasoningDisplay, mode, trustAll, busy, activity, phaseLabel, elapsedSecs, stalled, approvalPending, cwd, branch, columns = 100, extensionStatus, goal, }) {
     statusBarRenderProbe.count += 1;
     const bar = theme.symbol.bar;
     // Extension guest slot (ticket 10): pre-budgeted text renders only when
@@ -83,14 +128,18 @@ export const StatusBar = React.memo(function StatusBar({ provider, model, usageT
     // is the ` ${bar} ` separator the segment carries with it.
     const hasExt = typeof extensionStatus === "string" && extensionStatus.length > 0;
     if (!busy) {
-        const token = formatTokenSegment(usageTotals, model, contextLoad);
+        const token = formatStatusTokenSegment(usageTotals, model, contextLoad, loadEstimated);
         const trust = trustAll && mode !== "plan" ? "+trust" : "";
+        // Waiting-approval while idle (ticket 06): the decision flag is pinned —
+        // decision demand outranks location. It joins the width budget up front
+        // so the location (then the goal) yields for it instead of overflowing.
+        const approvalSeg = approvalPending ? ` ${bar} waiting approval` : "";
         // 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 baseLen = `${provider}/${model} ${bar} ${token} ${bar}  ${bar} ${tail}${approvalSeg}`.length;
         const showExt = hasExt && baseLen + extensionStatus.length + 3 + 2 <= columns;
         const avail = columns - baseLen - (showExt ? extensionStatus.length + 3 : 0);
         let loc = null;
@@ -112,14 +161,18 @@ export const StatusBar = React.memo(function StatusBar({ provider, model, usageT
         // the line past `columns`. Hidden entirely with no goal.
         const lineSoFar = baseLen + (showExt ? extensionStatus.length + 3 : 0) + (loc ? loc.length + 3 : 0);
         const goalSeg = fitGoalSegment(goal ?? null, columns - lineSoFar - 2);
-        return (_jsx(Box, { marginTop: theme.spacing.statusMarginTop, children: _jsxs(Text, { dimColor: true, children: [provider, "/", model, " ", bar, " ", token, showExt ? (_jsxs(_Fragment, { children: [" ", bar, " ", extensionStatus] })) : null, loc ? (_jsxs(_Fragment, { children: [" ", bar, " ", loc] })) : null, " ", bar, " reasoning: ", reasoningDisplay, " ", bar, " mode: ", mode, trust ? "+trust" : null, goalSeg ? (_jsxs(_Fragment, { children: [" ", bar, " ", goalSeg] })) : null] }) }));
+        return (
+        // flexShrink=0: footer-cluster anchoring (ticket 05) — the status line
+        // is the cluster's bottom pin; segments fit-or-drop via `columns`
+        // (ticket 06 discipline: decision flag outranks location, goal yields).
+        _jsx(Box, { marginTop: theme.spacing.statusMarginTop, flexShrink: 0, children: _jsxs(Text, { dimColor: true, children: [provider, "/", model, " ", bar, " ", token, showExt ? (_jsxs(_Fragment, { children: [" ", bar, " ", extensionStatus] })) : null, loc ? (_jsxs(_Fragment, { children: [" ", bar, " ", loc] })) : null, " ", bar, " reasoning: ", reasoningDisplay, " ", bar, " mode: ", mode, trust ? "+trust" : null, approvalPending ? (_jsx(Text, { color: theme.color.warning, children: approvalSeg })) : null, goalSeg ? (_jsxs(_Fragment, { children: [" ", bar, " ", goalSeg] })) : 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 busyToken = formatTokenSegment(usageTotals, model, contextLoad);
+    const busyToken = formatStatusTokenSegment(usageTotals, model, contextLoad, loadEstimated);
     // Goal segment (ticket 09): a guest in the fixed part — capped at 48
     // chars and rendered only when the FULL activity text still fits beside
     // it. Otherwise the goal drops whole and every existing segment renders
@@ -146,5 +199,7 @@ export const StatusBar = React.memo(function StatusBar({ provider, model, usageT
     const busyFixed = ` ${bar} ${elapsedSecs}s${showBusyExt ? ` ${bar} ${extensionStatus}` : ""} ${bar} ${busyToken} ${bar} reasoning: ${reasoningDisplay} ${bar} mode: ${mode}${busyTrust}${busyGoalPart} ${bar} esc stops`;
     const busyAvail = columns - busyFixed.length - 2;
     const activityText = shrinkTo(activityFull, 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] }) }));
+    return (
+    // flexShrink=0: same footer-cluster pin as the idle layout above.
+    _jsx(Box, { marginTop: theme.spacing.statusMarginTop, flexShrink: 0, 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/stream-store.js

@@ -36,6 +36,13 @@ export function createStreamStore() {
                 return;
             assign({ draft: snapshot.draft, thinking: text });
         },
+        set: (next) => {
+            const draft = next.draft !== undefined ? next.draft : snapshot.draft;
+            const thinking = next.thinking !== undefined ? next.thinking : snapshot.thinking;
+            if (draft === snapshot.draft && thinking === snapshot.thinking)
+                return;
+            assign({ draft, thinking });
+        },
         getDraft: () => snapshot.draft,
         getThinking: () => snapshot.thinking,
         clear: () => {

package/dist/ui/theme.js

@@ -6,9 +6,18 @@
 // 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.
+// - Framed surfaces: the input, pickers/popups, and modals only. Live
+//   panels (todo checklist, tool inspector, diff review) stay frameless —
+//   their bold headers name the group, matching the transcript's frameless
+//   text. Third-party extension widgets keep the `panel` frame: untrusted
+//   content of unbounded shape needs a containment + provenance boundary.
 // - The transcript is frameless text; hierarchy comes from speaker labels,
 //   dimming, and one blank line between turns — never extra chrome.
+// - The live tail mounts nothing when there is nothing live (no draft,
+//   thinking, tool, or held line): its margin would otherwise spend two
+//   blank lines on every idle frame with history.
+// - Liveness reads from ticking elapsed seconds, never animated glyphs —
+//   no animation without feedback, no spinner timers.
 // - `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
@@ -60,6 +69,11 @@ export const theme = {
         synKeyword: "magenta",
         synString: "yellow",
         synNumber: "cyan",
+        // Diff changed-word highlight: high-contrast background treatment so
+        // changed words pop over syntax hues (paired with diffChangedFg).
+        diffAddBg: "green",
+        diffDelBg: "red",
+        diffChangedFg: "black",
     },
     border: {
         style: "round",
@@ -116,6 +130,14 @@ export const theme = {
         inputPrompt: "›",
         keyMask: "•",
         keyPresent: "✓",
+        // Collapsed tool-block states (ticket 03): every collapsed one-liner
+        // (inspector row, expanded header) reads its outcome glyph from here —
+        // never ad-hoc literals — so success/failed/denied stay one token edit.
+        // Denied is calm-neutral (its own glyph, never the failure cross); the
+        // running state keeps the live `running`/`workTool` glyphs above.
+        toolOk: "✓",
+        toolFail: "✕",
+        toolDenied: "⊘",
         taskDone: "✅",
         taskActive: "🔧",
         // Pending means "not started yet" — an open circle (never ❌, which

package/dist/ui/todo-panel.js

@@ -9,7 +9,10 @@ import { theme } from "./theme.js";
 // 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.
+// answers "what is the model doing right now". Frameless by restraint
+// (ticket 07): the bold `Tasks n/m` header names the group, matching the
+// frameless inspector/diff-panel lists — a box would spend two rows and two
+// columns on chrome the header already carries. 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 };
@@ -18,7 +21,7 @@ export const TodoPanel = React.memo(function TodoPanel({ items }) {
     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) => {
+    return (_jsxs(Box, { flexDirection: "column", 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"

package/dist/ui/tool-inspector.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { truncateHead } from "../tools/shared.js";
 import { theme } from "./theme.js";
@@ -39,6 +39,16 @@ export function windowedList(items, index, size) {
         below: items.length - (start + size),
     };
 }
+export function toolBlockState(rec) {
+    if (rec.isError && /denied by user/i.test(`${rec.label} ${rec.result}`))
+        return "denied";
+    return rec.isError ? "failed" : "ok";
+}
+const TOOL_STATE_GLYPH = {
+    ok: theme.symbol.toolOk,
+    failed: theme.symbol.toolFail,
+    denied: theme.symbol.toolDenied,
+};
 function formatDur(ms) {
     return ` ${theme.symbol.separator} ${Math.max(1, Math.round(ms / 1000))}s`;
 }
@@ -49,10 +59,20 @@ export function InspectorPanel({ records, index, expanded, scroll }) {
         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) => {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Tool outputs ", theme.symbol.descSeparator, " 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));
+                    // Collapsed one-liner (ticket 03): state glyph + name + target +
+                    // duration where useful. Every row carries its state explicitly —
+                    // success is a quiet ✓, failures ✕, denials the calm ⊘.
+                    const st = toolBlockState(r);
+                    return (_jsxs(Text, { color: hi
+                            ? theme.color.selection
+                            : st === "failed"
+                                ? theme.color.toolError
+                                : st === "denied"
+                                    ? theme.color.warning
+                                    : undefined, children: [hi ? `${theme.symbol.select} ` : theme.spacing.rowIndent, TOOL_STATE_GLYPH[st], " ", 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");
@@ -61,5 +81,14 @@ export function InspectorPanel({ records, index, expanded, scroll }) {
     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` : ""] })] }));
+    // Expanded in place (ticket 03): the same record's full retained output
+    // under its one-liner header — one key (Enter) opens, another (Esc/Enter)
+    // collapses back to the list. The panel mounts in the dynamic zone, never
+    // in <Static>, so committed rows keep their identities throughout.
+    const expandedState = toolBlockState(rec);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: [_jsxs(Text, { color: expandedState === "failed"
+                            ? theme.color.toolError
+                            : expandedState === "denied"
+                                ? theme.color.warning
+                                : theme.color.success, children: [TOOL_STATE_GLYPH[expandedState], " "] }), 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

@@ -53,10 +53,13 @@ export function renderTranscriptItem(item) {
         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.
+    // Committed thinking blocks read as one grouped unit (never confused
+    // with answers): dim labeled header plus quoteBar-prefixed body lines —
+    // the same visual language as the live thinking block. The divider lives
+    // inside this row's own box (no extra Static rows), all dim per theme law.
     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));
+        const bodyLines = t.content.split("\n");
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [theme.symbol.thinking, " thinking"] }), bodyLines.map((line, idx) => (_jsx(Text, { dimColor: true, children: `${theme.symbol.quoteBar} ${line}` }, idx)))] }, 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
@@ -73,9 +76,9 @@ export function renderTranscriptItem(item) {
             // 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 })) : null, _jsx(ErrorCard, { classified: classified })] }, i));
+            return (_jsxs(React.Fragment, { children: [item.label ? _jsx(ToolLine, { content: item.label.content, ms: item.label.ms, via: item.label.approvalVia }) : null, labelDiff && !item.label?.error ? (_jsx(SideBySideDiffView, { oldText: labelDiff.oldText, newText: labelDiff.newText, lang: labelDiff.lang, path: labelDiff.path })) : 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 })) : null] }, i));
+        return (_jsxs(React.Fragment, { children: [_jsx(ToolLine, { content: t.content, error: t.error, ms: t.ms, via: t.approvalVia }), t.diff && !t.error ? (_jsx(SideBySideDiffView, { oldText: t.diff.oldText, newText: t.diff.newText, lang: t.diff.lang, path: t.diff.path })) : 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));
 }

package/dist/web/events.js

@@ -0,0 +1,93 @@
+// WebUI event protocol: the SSE vocabulary the browser consumes.
+//
+// Every kind maps 1:1 to an existing ATOM callback or sink — nothing is
+// invented. The runtime (./runtime.js) translates, this module only defines
+// and serializes:
+//
+// - token / thinking  ← StreamCallbacks.onToken / onThinking (accumulated
+//   text, same value the TUI renders in its live tail)
+// - phase             ← StreamCallbacks.onPhase ("thinking" | "streaming" |
+//   "tool" | "retry" | "done", detail carries the tool name / retry summary)
+// - tool_delta        ← StreamCallbacks.onToolDelta (name revealed mid-stream)
+// - tool_started /
+//   tool_finished      ← TurnEventsSink.onToolStarted / onToolFinished
+//   (stable toolCallId + name + index / isError — never display labels)
+// - tool_call          ← the approve() gate decision (name + effective args +
+//   description + decision + provenance — the only pre-execution arg source)
+// - tool_activity     ← AgenticOpts.onToolActivity (label + result + isError)
+// - tool_result        ← AgenticOpts.onToolResult (name + effective args +
+//   result + isError for EVERY committed call, including read-only tools
+//   that never consult approve; result text capped, see truncateEventText)
+// - file_diff          ← write/edit commits only: op (created/modified) +
+//   pre-computed unified hunks + side-by-side rows from src/ui/diff.ts
+//   (the same engine the TUI approval preview uses), all text-capped.
+//   ATOM has no delete tool and bash side effects are opaque by design
+//   (see src/rollback.ts), so deletions never appear as file events.
+// - usage             ← AgenticOpts.onUsage (API-reported tokens only)
+// - reasoning         ← AgenticOpts.onReasoning (per-POST reasoning label)
+// - warning           ← StreamCallbacks.onWarning
+// - approval_request /
+//   approval_resolved  ← the approve() gate (write/edit/bash in normal mode;
+//   the turn blocks until the browser POSTs a decision)
+// - question_request /
+//   question_resolved  ← the askUser() hook (ask_question tool; same blocking
+//   contract as approvals)
+// - message           ← committed transcript turns (user/assistant/tool rows)
+// - error             ← failed POST / tool-throw abort (caller rolls back)
+// - done / cancelled  ← clean turn end / LoopCancelledError rollback
+//
+// Pure module: types + SSE serialization only. No I/O, no loop imports.
+export function createWebEvent(seq, kind, data) {
+    return {
+        seq,
+        at: new Date().toISOString(),
+        kind,
+        data: data ?? {},
+    };
+}
+// Serialize one event as an SSE frame. `id:` carries the sequence so an
+// EventSource client resumes without gaps; `event:` carries the kind so the
+// browser dispatches without parsing the body first.
+export function formatSSE(event) {
+    return `id: ${event.seq}\nevent: ${event.kind}\ndata: ${JSON.stringify(event)}\n\n`;
+}
+// SSE response headers shared by every event stream on the server.
+export function sseHeaders() {
+    return {
+        "Content-Type": "text/event-stream; charset=utf-8",
+        "Cache-Control": "no-store",
+        "X-Content-Type-Options": "nosniff",
+        Connection: "keep-alive",
+    };
+}
+// Parse one SSE frame back (tests + future resumable clients). Returns null
+// for heartbeats/comments or malformed frames — never throws.
+export function parseSSEFrame(frame) {
+    try {
+        const lines = frame.split("\n");
+        const dataLine = lines.find((l) => l.startsWith("data:"));
+        if (!dataLine)
+            return null;
+        const parsed = JSON.parse(dataLine.slice("data:".length).trim());
+        if (typeof parsed !== "object" || parsed === null)
+            return null;
+        const o = parsed;
+        if (typeof o["seq"] !== "number" || typeof o["kind"] !== "string")
+            return null;
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+// Reconnect replay: events after the client's last seen id, oldest first.
+// Pure (unit-tested); the runtime and the SSE route share it.
+export function eventsAfter(log, lastEventId) {
+    if (typeof lastEventId !== "number" || !Number.isFinite(lastEventId))
+        return [];
+    return log.filter((e) => e.seq > lastEventId);
+}
+// Heartbeat comment (keeps proxies/load-balancers from closing idle turns).
+export function sseHeartbeat() {
+    return `: ping\n\n`;
+}