@semalt-ai/code 1.8.5 → 1.20.0

package/lib/ui/anim.js

@@ -0,0 +1,86 @@
+'use strict';
+
+// Single animation driver (Output Refactor — Phase 3).
+//
+// Before Phase 3 the status bar owned TWO independent setIntervals: a 1 Hz
+// clock tick and a 100 ms spinner-glyph cycle. They never coordinated, each
+// repainted the whole live region on its own, and the per-tool running glyph
+// never animated (its elapsed meter only advanced as an accidental side-effect
+// of whichever of the two timers happened to be firing).
+//
+// This driver replaces both with ONE timer. Subscribers register a per-frame
+// callback; the driver advances a single monotonic frame counter at the base
+// interval and, after running every subscriber, performs AT MOST ONE
+// coordinated repaint — so a tick yields a single writer frame, never two
+// competing ones. A subscriber returns truthy to request the repaint this
+// frame; the driver coalesces those requests into one.
+//
+// The base interval is the finer (spinner) cadence — 100 ms. Coarser
+// consumers (the clock, which only needs ~1 s) gate on
+// `frame % TICKS_PER_SECOND === 0` inside their callback rather than owning a
+// second timer.
+//
+// start()/stop() are idempotent (the 5404bd0 lesson — never stack intervals
+// across pause/resume cycles). The owner decides WHEN to run: while there is
+// something to animate (a running tool / streaming / thinking) or while the
+// clock should tick (not idle-paused). When neither holds, the owner stops the
+// driver so idle = no periodic repaint = the viewport scrolls freely.
+
+const BASE_INTERVAL_MS = 100;
+const TICKS_PER_SECOND = Math.round(1000 / BASE_INTERVAL_MS); // 10
+
+class AnimDriver {
+  constructor(intervalMs) {
+    this._interval = Number.isFinite(intervalMs) && intervalMs > 0 ? intervalMs : BASE_INTERVAL_MS;
+    this._timer = null;
+    this._frame = 0;
+    // Subscribers: (frame:number) => boolean. A truthy return requests the
+    // single coordinated repaint for this frame.
+    this._subs = new Set();
+    // The one repaint sink. Set by the owner (the status bar wires it to its
+    // _notify → _updateLive → writer.setLive path, which also re-renders the
+    // activity rows, so a single repaint covers spinner + clock + running op).
+    this._repaint = () => {};
+  }
+
+  get frame() { return this._frame; }
+  get intervalMs() { return this._interval; }
+  isRunning() { return this._timer !== null; }
+
+  // Register the single coordinated-repaint sink. Last writer wins.
+  onRepaint(fn) { this._repaint = typeof fn === 'function' ? fn : () => {}; }
+
+  // Register a per-frame subscriber. Returns an unsubscribe thunk.
+  subscribe(fn) {
+    if (typeof fn !== 'function') return () => {};
+    this._subs.add(fn);
+    return () => this._subs.delete(fn);
+  }
+
+  // Idempotent: a second start() while running is a no-op (never stacks a
+  // timer — the regression 5404bd0 guards against).
+  start() {
+    if (this._timer) return;
+    this._timer = setInterval(() => this._tick(), this._interval);
+    // An animation timer must never hold the process open — the interactive
+    // chat is kept alive by the stdin listener, not by this. unref() so a bar
+    // that's constructed-but-not-destroyed (e.g. in a unit test) can't wedge
+    // event-loop drain at exit. Guarded: mock timers may not implement unref.
+    if (this._timer && typeof this._timer.unref === 'function') this._timer.unref();
+  }
+
+  stop() {
+    if (this._timer) { clearInterval(this._timer); this._timer = null; }
+  }
+
+  _tick() {
+    this._frame++;
+    let dirty = false;
+    for (const fn of this._subs) {
+      try { if (fn(this._frame)) dirty = true; } catch {}
+    }
+    if (dirty) { try { this._repaint(); } catch {} }
+  }
+}
+
+module.exports = { AnimDriver, BASE_INTERVAL_MS, TICKS_PER_SECOND };

package/lib/ui/ansi.js

@@ -1,5 +1,14 @@
 'use strict';
 
+// ANSI primitives ONLY. Colour lives in `theme.js` (the single palette table);
+// this file holds the SGR builders, structural box-drawing characters, the
+// syntax-keyword set and the spinner definitions. The legacy colour palette
+// (`THEME` / `FG_*` / code-block colours) is DEFINED in theme.js and re-exported
+// here for back-compat — this file no longer defines any colour of its own.
+//
+// Dependency is one-directional: ansi.js → theme.js. theme.js does not require
+// ansi.js (it has its own private SGR builders), so the two never form a cycle.
+
 const RST  = '\x1b[0m';
 const BOLD = '\x1b[1m';
 const DIM  = '\x1b[2m';
@@ -15,26 +24,6 @@ function hasTruecolor() {
   return v === 'truecolor' || v === '24bit';
 }
 
-const THEME = {
-  user:  '\x1b[36m',
-  agent: '\x1b[32m',
-  sys:   '\x1b[33m',
-  error: '\x1b[31;1m',
-  warn:  '\x1b[33;1m',
-  tool:  '\x1b[35m',
-  dim:   '\x1b[2m',
-  reset: '\x1b[0m',
-};
-
-const FG_GRAY   = '\x1b[38;5;245m';
-const FG_DARK   = '\x1b[38;5;240m';
-const FG_BLUE   = '\x1b[38;5;75m';
-const FG_CYAN   = '\x1b[38;5;116m';
-const FG_GREEN  = '\x1b[38;5;114m';
-const FG_YELLOW = '\x1b[38;5;222m';
-const FG_RED    = '\x1b[38;5;203m';
-const FG_TEAL   = '\x1b[38;5;73m';
-
 const BOX_H  = '─';
 const BOX_V  = '│';
 const BOX_TL = '╭';
@@ -42,13 +31,6 @@ const BOX_TR = '╮';
 const BOX_BL = '╰';
 const BOX_BR = '╯';
 
-const FG_CODE_BG     = '\x1b[48;5;236m';
-const BG_SELECTED    = '\x1b[48;5;237m';
-const FG_CODE_BORDER = '\x1b[38;5;240m';
-const FG_CODE_LANG   = '\x1b[38;5;75m';
-const FG_TAG         = '\x1b[38;5;176m';
-const FG_FILEPATH    = '\x1b[38;5;222m';
-
 const KEYWORDS = new Set([
   'def', 'class', 'import', 'from', 'return', 'if', 'else', 'elif',
   'for', 'while', 'try', 'except', 'finally', 'with', 'as', 'in',
@@ -67,6 +49,14 @@ const SPINNER_DEFS = {
   waiting_download:  { frames: ['⬇ ','⬇⠂','⬇⠆','⬇⠇','⬇⠧','⬇⠷','⬇⠿','⬇⠾','⬇⠼','⬇⠸','⬇⠰','⬇⠠'], color: '\x1b[38;5;75m' },
 };
 
+// Re-export the colour palette from its single home (theme.js). One-directional
+// require — theme.js never requires this file — so there is no cycle.
+const {
+  THEME,
+  FG_GRAY, FG_DARK, FG_BLUE, FG_CYAN, FG_GREEN, FG_YELLOW, FG_RED, FG_TEAL,
+  FG_CODE_BG, BG_SELECTED, FG_CODE_BORDER, FG_CODE_LANG, FG_TAG, FG_FILEPATH,
+} = require('./theme');
+
 module.exports = {
   RST, BOLD, DIM, EL, THEME,
   bg256, fg256, bgRGB, fgRGB, hasTruecolor,

package/lib/ui/chat-history.js

@@ -1,11 +1,55 @@
 'use strict';
 
-const { RST, DIM, BOLD, FG_CYAN, FG_GREEN, FG_YELLOW, FG_RED, FG_DARK, FG_GRAY } = require('./ansi');
+const { RST, DIM, BOLD, FG_CYAN, FG_GREEN, FG_YELLOW, FG_RED, FG_GRAY } = require('./ansi');
 const { getCols, stripAnsi } = require('./utils');
-const { UI_THEME, UI_ICONS, TOOL_CATEGORIES } = require('./theme');
-const { summarizeToolResult } = require('./format');
+const { UI_THEME, UI_ICONS, TOOL_CATEGORIES, colorize, colorEnabled } = require('./theme');
+const { StreamMarkdown, renderBlock } = require('./md-stream');
+const { summarizeToolResult, formatOutputPreview } = require('./format');
+const { descriptorFromStored } = require('./tool-operation');
+const { isWebCore } = require('./web-activity');
+const { renderOperation } = require('./render-operation');
 const writer = require('./writer');
 
+// Gate a raw SGR code through the single NO_COLOR/non-TTY switch (theme.js).
+// Same idiom as diff.js / md-stream.js — wrap every color-constant interpolation
+// in c(...) so UI chrome emits zero ANSI under NO_COLOR while glyphs/layout stay.
+const c = colorize;
+
+// Embedded control chars that would break the "one logical line == one physical
+// row" invariant the detail-band erase/commit math rests on. Mirrors the
+// writer's _CONTROL_CHARS (writer.js): \t (TAB) advances to the next 8-col tab
+// stop, \r/C0/DEL move the cursor unpredictably. ESC (0x1B) is EXCLUDED so SGR
+// color survives — _flattenBandLine strips the non-SGR escapes separately.
+const _BAND_CONTROL_CHARS = /[\x00-\x1A\x1C-\x1F\x7F]/g; // eslint-disable-line no-control-regex
+// A CSI sequence: ESC '[' params final-letter. Used to drop the NON-SGR ones.
+const _CSI_SEQ = /\x1b\[[0-9;?]*[A-Za-z]/g; // eslint-disable-line no-control-regex
+
+// Flatten an already-fitted output-preview body line so it occupies EXACTLY one
+// physical terminal row — restoring the invariant the detail band's logical-line
+// clamp and the writer's physicalRows erase math both depend on. formatOutputPreview
+// truncated the line to the render width, but it (via termWidth) counts a TAB as
+// 1 column while the terminal advances it to the next 8-col tab stop, so a
+// "fitted" TAB-bearing line still WRAPS to ≥2 rows. Two flattening steps, both
+// no-ops on plain ASCII (so clean output stays byte-identical):
+//   1. Replace every C0/DEL control (TAB included) with a space — 1:1, so the
+//      already-fitted visible width is unchanged. Identical to the writer's
+//      _fitOneRow control-char pass that every OTHER live row already gets.
+//   2. Drop stray NON-SGR escapes (e.g. `\x1b[K`): displayRows/termWidth strip
+//      only `…m` sequences, so a surviving non-'m' CSI would inflate the measured
+//      width past cols and re-introduce a phantom second row. SGR (`…m`) is kept
+//      so captured color survives. This closes the stripAnsi-only-'m' gap.
+function _flattenBandLine(line) {
+  let s = String(line == null ? '' : line);
+  if (_BAND_CONTROL_CHARS.test(s)) {
+    _BAND_CONTROL_CHARS.lastIndex = 0; // .test on a /g regex is stateful
+    s = s.replace(_BAND_CONTROL_CHARS, ' ');
+  }
+  if (s.indexOf('\x1b') !== -1) {
+    s = s.replace(_CSI_SEQ, (m) => (m.endsWith('m') ? m : ''));
+  }
+  return s;
+}
+
 
 function safeContent(text) {
   if (!text) return '';
@@ -31,9 +75,9 @@ function _dimPaths(text) {
     if (trail) {
       const core = m.slice(0, -trail[0].length);
       if (!core) return m;
-      return `${UI_THEME.subtle}${core}${UI_THEME.default}${trail[0]}`;
+      return `${c(UI_THEME.subtle)}${core}${c(UI_THEME.default)}${trail[0]}`;
     }
-    return `${UI_THEME.subtle}${m}${UI_THEME.default}`;
+    return `${c(UI_THEME.subtle)}${m}${c(UI_THEME.default)}`;
   });
 }
 
@@ -54,9 +98,13 @@ const BG_USER = '\x1b[48;5;237m';
 // atomic chunk.
 function _buildUser(content, ts) {
   const time = _fmtTime(ts);
-  let out = `\n${FG_CYAN}▸ You${RST}  ${DIM}${time}${RST}\n`;
+  let out = `\n${c(FG_CYAN)}▸ You${c(RST)}  ${c(DIM)}${time}${c(RST)}\n`;
   for (const line of (content || '').split('\n')) {
-    out += `${BG_USER}  ${line}\x1b[K${RST}\n`;
+    // The \x1b[K (erase-to-EOL) only exists to fill the bg tint to the screen
+    // edge — pointless with no bg, and it's not an SGR so stripAnsi can't reach
+    // it. Drop it when color is off so a NO_COLOR bubble carries ZERO escapes.
+    const el = colorEnabled() ? '\x1b[K' : '';
+    out += `${c(BG_USER)}  ${line}${el}${c(RST)}\n`;
   }
   out += '\n';
   return out;
@@ -64,10 +112,12 @@ function _buildUser(content, ts) {
 
 function _buildAI(content, ts) {
   const time = _fmtTime(ts);
-  let out = `\n${FG_GREEN}▸ AI-agent${RST}  ${DIM}${time}${RST}\n`;
-  for (const line of (content || '').split('\n')) {
-    out += `  ${line}\n`;
-  }
+  let out = `\n${colorize(FG_GREEN)}▸ AI-agent${colorize(RST)}  ${colorize(DIM)}${time}${colorize(RST)}\n`;
+  // Drive the SAME StreamMarkdown the live streaming path uses, fed line-by-line
+  // then flushed, so a replayed (--resume / history) assistant turn renders
+  // byte-identical to the live one.
+  const block = renderBlock(content);
+  if (block) out += block + '\n';
   out += '\n';
   return out;
 }
@@ -82,10 +132,18 @@ class ChatHistory {
     this._didStream = false;
     this._msgById = {};
     this._msgLineCount = {};
-    this._toolExpanded = {};
-    this._lastExpandableId = null;
-    this._toolIdCounter = 0;
     this._messages = [];
+    // The single deferred output-preview slot. While set, the held detail lives
+    // in the writer's redrawable detail band (not scrollback). Shape: { msg,
+    // lines }. Committed once at a turn boundary (or auto-flushed before any new
+    // scrollback this class emits), then cleared back to null. The band is
+    // installed once and committed once — never redrawn in place.
+    this._deferred = null;
+    // Per-instance Markdown styler for agent narration. Holds the cross-line
+    // fenced-code-block state so a ``` block split across streamToken calls is
+    // styled correctly; reset at every turn boundary (clearStreamingContent /
+    // clearMessages).
+    this._md = new StreamMarkdown();
     // Callback into the UI orchestrator to refresh the live region (so the
     // in-progress streaming line and chrome re-render together). Set by
     // createUI; safe to leave null for headless/test contexts.
@@ -106,6 +164,23 @@ class ChatHistory {
   isStreaming() { return this._streamActive; }
 
   _commit(text) { writer.scrollback(text); }
+  // Phase 7b detail-band seams (overridable in tests, like _commit): install /
+  // replace the live detail band, and atomically commit it to scrollback.
+  _setDetail(lines) { writer.setDetail(lines); }
+  _commitDetail(text) { writer.commitDetail(text); }
+
+  // Commit an ALREADY-STYLED single line straight to scrollback, with no
+  // reformatting and without touching `_messages` / live-region state. Used by
+  // replay (Phase 6c-ii) to land an aggregated `✓ web · …` web-activity summary
+  // exactly as the live path's `writer.endActivity(id, line)` does — both route
+  // the same styled string through `writer.scrollback` (which appends the single
+  // trailing newline), so a replayed web summary is byte-identical to the live
+  // committed one. Deliberately NOT funnelled through summarizeToolResult.
+  addRawLine(line) {
+    if (line == null || line === '') return;
+    this._flushStream();
+    this._commit(line);
+  }
 
   _notifyLive() {
     if (this._onLiveUpdate) {
@@ -118,6 +193,11 @@ class ChatHistory {
     const content = safeContent(msg.content || '');
     if ((msg.role === 'assistant' || msg.role === 'system') && !content.trim()) return;
 
+    // Phase 7b — any held detail band is the PREVIOUS op's output; commit it to
+    // scrollback before this new bubble so ordering is preserved (tool output
+    // above the message that follows it). No-op when nothing is deferred.
+    if (this._deferred) this.commitDeferredDetail();
+
     // Any in-progress stream must close before we emit a new scrollback
     // block — otherwise the stream's partial line would sit between the
     // header and body of the new bubble.
@@ -135,10 +215,14 @@ class ChatHistory {
     } else if (msg.role === 'shell') {
       const cmd = msg.cmd || '';
       const shellOut = safeContent(msg.content || '');
-      out = `\n${DIM}  $ ${cmd}${RST}\n`;
+      // Replayed shell preview (/history, --resume). Was wholesale-DIM and
+      // illegible; now the `$` command line carries the shell category colour
+      // and the output is subtle (one step up from dim) so it stays readable.
+      const shellColor = (UI_THEME.categories && UI_THEME.categories.shell) || UI_THEME.accent;
+      out = `\n  ${c(shellColor)}$ ${cmd}${c(RST)}\n`;
       if (shellOut.trim()) {
         for (const line of shellOut.split('\n')) {
-          if (line.trim()) out += `${DIM}    ${line}${RST}\n`;
+          if (line.trim()) out += `    ${c(UI_THEME.subtle)}${line}${c(RST)}\n`;
         }
       }
       out += '\n';
@@ -154,23 +238,53 @@ class ChatHistory {
       // to a single live-activity-style line. Callers that pass `output`
       // (debug blocks, live-activity error pass-through) keep the legacy
       // header chrome.
-      if (msg.content && !msg.output) {
+      //
+      // Phase 6a — replay fidelity. A saved native tool message may carry a
+      // serialized display descriptor (`_display`). When present and its
+      // version is known, render the result line (and any diff / output detail)
+      // through the SAME renderOperation a fresh turn uses — full fidelity
+      // (real diff, real duration, real status), not the lossy summary. A
+      // missing / unknown-version core yields null here → the legacy
+      // summarizeToolResult fall-through below, unchanged.
+      // Phase 6c-i — a web op now persists a {v:1,kind:'web',…} core in `_display`
+      // (it used to persist nothing). Treat a web-core as "no descriptor" so it
+      // takes the SAME legacy summarizeToolResult fall-through a web message took
+      // before 6c-i — byte-identical until 6c-ii flips this to aggregation.
+      const restored = (msg._display && !isWebCore(msg._display)) ? descriptorFromStored(msg._display) : null;
+      if (restored) {
+        out = renderOperation(restored, { mode: 'ansi', phase: 'result' }) + '\n';
+        lineCount = 1;
+        const detail = restored.detail;
+        if (detail && detail.kind === 'diff') {
+          // The file-edit diff, expanded exactly as the live path commits it.
+          const diffStr = renderOperation(restored, { mode: 'ansi', phase: 'detail', maxLines: msg.diffMaxLines });
+          if (diffStr) {
+            out += diffStr + '\n';
+            lineCount += diffStr.split('\n').length;
+          }
+        } else if (detail && detail.kind === 'output') {
+          // Route the shell/MCP/subagent preview body through the SAME output
+          // branch below (identical DIM/indent chrome + collapsed hint).
+          msg.output = detail.payload.body;
+          if (!Number.isInteger(msg.previewLines) || msg.previewLines <= 0) msg.previewLines = 5;
+        }
+      } else if (msg.content && !msg.output) {
         const summary = safeContent(summarizeToolResult(msg.content));
         if (summary) {
           const indicator = msg.isError
-            ? `${UI_THEME.error}${UI_ICONS.error}${RST}`
-            : `${UI_THEME.success}${UI_ICONS.success}${RST}`;
-          const sep = ` ${DIM}·${RST} `;
+            ? `${c(UI_THEME.error)}${UI_ICONS.error}${c(RST)}`
+            : `${c(UI_THEME.success)}${UI_ICONS.success}${c(RST)}`;
+          const sep = ` ${c(DIM)}·${c(RST)} `;
           const styled = summary.split(' · ').map((p) => _dimPaths(p)).join(sep);
           out = `  ${indicator} ${styled}\n`;
           lineCount = 1;
         }
       } else if (content) {
         const indicator = msg.isError
-          ? `${UI_THEME.error}${UI_ICONS.error}${RST}`
-          : `${UI_THEME.success}${UI_ICONS.success}${RST}`;
+          ? `${c(UI_THEME.error)}${UI_ICONS.error}${c(RST)}`
+          : `${c(UI_THEME.success)}${UI_ICONS.success}${c(RST)}`;
         const category = TOOL_CATEGORIES[msg.tag] || msg.tag || 'tool';
-        const head = `${UI_THEME.accent}${category}${UI_THEME.muted}:${RST}`;
+        const head = `${c(UI_THEME.accent)}${category}${c(UI_THEME.muted)}:${c(RST)}`;
         const desc = _dimPaths(content);
         out = `  ${indicator} ${head} ${desc}\n`;
         lineCount = 1;
@@ -178,7 +292,18 @@ class ChatHistory {
         out = '';
         lineCount = 0;
       }
-      if (msg.output) {
+      if (msg.output && Number.isInteger(msg.previewLines) && msg.previewLines > 0) {
+        // Phase 5 — collapsed output preview (shell/MCP/subagent). The body is
+        // committed line-by-line to SCROLLBACK (not the live region), each line
+        // fitted to one physical row by formatOutputPreview, so the Phase-4
+        // single-row invariant holds. Rendered ONCE, statically: the first
+        // previewLines + a `… N more lines` hint, with no interactive affordance.
+        const { lines: pvLines } = this._renderOutputPreviewLines(msg);
+        for (const ol of pvLines) {
+          out += ol + '\n';
+          lineCount++;
+        }
+      } else if (msg.output) {
         const wrapAt = Math.max(60, getCols() - 8);
         const outLines = [];
         for (const raw of msg.output.split('\n')) {
@@ -192,32 +317,19 @@ class ChatHistory {
           }
         }
         const truncatable = outLines.length > MAX_TOOL_DISPLAY;
-
-        if (truncatable && !msg.id) {
-          msg.id = `tool-${++this._toolIdCounter}`;
-        }
-        if (truncatable && msg.id) {
-          this._msgById[msg.id] = msg;
-          this._lastExpandableId = msg.id;
-        }
-
-        const expanded = truncatable && msg.id && this._toolExpanded[msg.id];
-        const visible = (truncatable && !expanded) ? outLines.slice(0, MAX_TOOL_DISPLAY) : outLines;
+        const visible = truncatable ? outLines.slice(0, MAX_TOOL_DISPLAY) : outLines;
         const remaining = outLines.length - visible.length;
 
-        const outerOpen = msg.tag === 'debug' ? '  ' : `${DIM}     `;
-        const outerClose = msg.tag === 'debug' ? '' : RST;
+        const outerOpen = msg.tag === 'debug' ? '  ' : `${c(DIM)}     `;
+        const outerClose = msg.tag === 'debug' ? '' : c(RST);
         for (const ol of visible) { out += `${outerOpen}${ol}${outerClose}\n`; lineCount++; }
         if (remaining > 0) {
-          out += `${DIM}     … ${remaining} more lines  ${FG_DARK}(ctrl+o to expand ${remaining} rows)${RST}\n`;
-          lineCount++;
-        } else if (truncatable && expanded) {
-          out += `${DIM}     ${FG_DARK}(ctrl+o to collapse)${RST}\n`;
+          out += `${c(DIM)}     … ${remaining} more lines${c(RST)}\n`;
           lineCount++;
         }
       }
     } else if (msg.role === 'permission') {
-      out = `\n  ${UI_THEME.warning}${UI_ICONS.warn}${RST} ${UI_THEME.warning}Permission required${RST}${UI_THEME.muted}:${RST} ${content}\n`;
+      out = `\n  ${c(UI_THEME.warning)}${UI_ICONS.warn}${c(RST)} ${c(UI_THEME.warning)}Permission required${c(RST)}${c(UI_THEME.muted)}:${c(RST)} ${content}\n`;
     } else {
       // Fallback for role: 'system' and anything unrecognised.
       const lines = content.split('\n');
@@ -225,25 +337,25 @@ class ChatHistory {
       const stripGlyph = (s) => s.replace(/^[✓✗✕⚠]\s*/, '');
       let rendered;
       if (msg.isError && !msg.isWarning) {
-        rendered = `  ${UI_THEME.error}${UI_ICONS.error}${RST} ${UI_THEME.error}${stripGlyph(first)}${RST}`;
+        rendered = `  ${c(UI_THEME.error)}${UI_ICONS.error}${c(RST)} ${c(UI_THEME.error)}${stripGlyph(first)}${c(RST)}`;
       } else if (msg.isWarning) {
-        rendered = `  ${UI_THEME.warning}${UI_ICONS.warn}${RST} ${UI_THEME.warning}${stripGlyph(first)}${RST}`;
+        rendered = `  ${c(UI_THEME.warning)}${UI_ICONS.warn}${c(RST)} ${c(UI_THEME.warning)}${stripGlyph(first)}${c(RST)}`;
       } else if (_isAutoApproveMeta(first)) {
-        const body = first.replace(/(auto-approv\w*)/gi, (m) => `${UI_THEME.warning}${m}${UI_THEME.subtle}`);
-        rendered = `  ${UI_THEME.subtle}${body}${RST}`;
+        const body = first.replace(/(auto-approv\w*)/gi, (m) => `${c(UI_THEME.warning)}${m}${c(UI_THEME.subtle)}`);
+        rendered = `  ${c(UI_THEME.subtle)}${body}${c(RST)}`;
       } else if (first.startsWith('✓')) {
-        rendered = `  ${UI_THEME.success}${UI_ICONS.success}${RST} ${first.slice(1).trimStart()}`;
+        rendered = `  ${c(UI_THEME.success)}${UI_ICONS.success}${c(RST)} ${first.slice(1).trimStart()}`;
       } else if (first.startsWith('✗')) {
-        rendered = `  ${UI_THEME.error}${UI_ICONS.error}${RST} ${UI_THEME.error}${first.slice(1).trimStart()}${RST}`;
+        rendered = `  ${c(UI_THEME.error)}${UI_ICONS.error}${c(RST)} ${c(UI_THEME.error)}${first.slice(1).trimStart()}${c(RST)}`;
       } else {
-        rendered = `  ${UI_THEME.subtle}${UI_ICONS.bullet}${RST} ${UI_THEME.subtle}${first}${RST}`;
+        rendered = `  ${c(UI_THEME.subtle)}${UI_ICONS.bullet}${c(RST)} ${c(UI_THEME.subtle)}${first}${c(RST)}`;
       }
       out = `${rendered}\n`;
       const contColor = (msg.isError && !msg.isWarning) ? UI_THEME.error
                       : msg.isWarning ? UI_THEME.warning
                       : UI_THEME.subtle;
       for (let i = 1; i < lines.length; i++) {
-        out += `     ${contColor}${lines[i]}${RST}\n`;
+        out += `     ${c(contColor)}${lines[i]}${c(RST)}\n`;
       }
       lineCount = lines.length;
     }
@@ -260,12 +372,15 @@ class ChatHistory {
   // the live region while it's still in-flight.
   streamToken(token) {
     if (!token) return;
+    // Phase 7b — the assistant answer is about to flow into scrollback; commit
+    // the prior op's held detail band first so it stays above the answer text.
+    if (this._deferred) this.commitDeferredDetail();
     if (!this._streamActive) {
       // Emit header immediately so users see the new AI turn before any
       // tokens arrive. No blank line before the header since scrollback
       // flows continuously.
       const time = _fmtTime(new Date());
-      this._commit(`\n${FG_GREEN}▸ AI-agent${RST}  ${DIM}${time}${RST}\n`);
+      this._commit(`\n${colorize(FG_GREEN)}▸ AI-agent${colorize(RST)}  ${colorize(DIM)}${time}${colorize(RST)}\n`);
       this._streamActive = true;
       this._streamStart = new Date();
       this._streamPartial = '';
@@ -274,7 +389,11 @@ class ChatHistory {
     let nlIdx;
     while ((nlIdx = this._streamPartial.indexOf('\n')) >= 0) {
       const line = this._streamPartial.slice(0, nlIdx);
-      this._commit('  ' + line + '\n');
+      // Style each COMPLETE line before committing to scrollback. The styler
+      // returns null while buffering a fenced code-block body (the box is
+      // emitted whole at the closing ```), so nothing is committed then.
+      const styled = this._md.feedLine(line);
+      if (styled !== null) this._commit(styled + '\n');
       this._streamPartial = this._streamPartial.slice(nlIdx + 1);
     }
     this._notifyLive();
@@ -283,9 +402,17 @@ class ChatHistory {
   _flushStream() {
     if (!this._streamActive) return;
     if (this._streamPartial !== '') {
-      this._commit('  ' + this._streamPartial + '\n');
+      // The trailing partial is the turn's last (newline-less) line — style it
+      // as a complete line, mirroring the live per-line path exactly.
+      const styled = this._md.feedLine(this._streamPartial);
+      if (styled !== null) this._commit(styled + '\n');
       this._streamPartial = '';
     }
+    // Close any open inline span / still-buffering fenced code block so no
+    // stranded SGR or unclosed box reaches immutable scrollback.
+    const tail = this._md.flush();
+    if (tail !== null) this._commit(tail + '\n');
+    this._md.reset();
     this._commit('\n');
     this._streamActive = false;
     this._streamStart = null;
@@ -294,10 +421,14 @@ class ChatHistory {
 
   clearStreamingContent() {
     this._flushStream();
+    this._md.reset();
     this._notifyLive();
   }
 
   finalizeLastMessage(cleanContent) {
+    // Phase 7b — commit any held detail band before the terminal assistant
+    // bubble (covers the non-streaming path, where no streamToken fired).
+    if (this._deferred) this.commitDeferredDetail();
     const wasStreaming = this._streamActive;
     const streamStart = this._streamStart;
     if (wasStreaming) {
@@ -329,9 +460,12 @@ class ChatHistory {
     this._didStream = false;
     this._msgById = {};
     this._msgLineCount = {};
-    this._toolExpanded = {};
-    this._lastExpandableId = null;
     this._messages = [];
+    this._md.reset();
+    // Drop any held detail band (it belongs to the cleared session)
+    // and erase it from the writer's detail region before the viewport wipe.
+    this._deferred = null;
+    this._setDetail([]);
     // Wipe the terminal's visible scrollback and the saved scrollback buffer
     // so the cleared state feels clean. Serialized through the writer so
     // the clear can't land inside a pending scrollback burst, then redraw
@@ -344,18 +478,69 @@ class ChatHistory {
     this._notifyLive();
   }
 
-  // In append-only scrollback we cannot rewrite a previous bubble in place;
-  // these methods now simply re-render the updated version as new
-  // scrollback. Expand/collapse prints the full (or summary) view below the
-  // prior truncated view. This is a small visual regression from the old
-  // scroll-region mode in exchange for eliminating the torn-frame race.
-  toggleLastExpand() {
-    const id = this._lastExpandableId;
-    if (!id) return;
-    const msg = this._msgById[id];
-    if (!msg) return;
-    this._toolExpanded[id] = !this._toolExpanded[id];
-    this.addMessage(msg);
+  // Render the chrome for a collapsed output-preview body (the Phase-5 DIM /
+  // subtle-indent lines + a static `… N more lines` hint) as an ARRAY of styled
+  // lines (no trailing newline each). This is the single source for the immediate
+  // addMessage commit and the deferred (live-band) preview. The preview is always
+  // collapsed and static — there is no expand affordance; full viewing is deferred
+  // to the transcript viewer.
+  _renderOutputPreviewLines(msg) {
+    // Fit to the width LESS the 5-col indent so indent+content stays within one
+    // physical row at the render width (the Phase-4 single-row invariant). Each
+    // emitted preview line is therefore exactly one physical row.
+    const preview = formatOutputPreview(msg.output, {
+      previewLines: msg.previewLines,
+      cols: Math.max(1, getCols() - 5),
+    });
+    // Flatten each fitted line to exactly one physical row, so the band's
+    // logical-line count == its physical-row count (the load-bearing invariant the
+    // writer's erase/commit math depends on). Without this a TAB-bearing line
+    // counts as 1 here but wraps to ≥2 rows on screen, desyncing the writer's
+    // physicalRows erase math → duplication on wrapping output. No-op on plain
+    // ASCII, so clean output stays byte-identical. Applied here (the single source
+    // for the live band, the immediate/committed scrollback, and replay) so every
+    // render path is byte-consistent.
+    const bodyLines = preview.lines.map(_flattenBandLine);
+    const lines = [];
+    for (const ol of bodyLines) {
+      lines.push(`${c(DIM)}     ${c(UI_THEME.subtle)}${ol}${c(RST)}`);
+    }
+    if (preview.hiddenCount > 0) {
+      const plural = preview.hiddenCount === 1 ? 'line' : 'lines';
+      lines.push(`${c(DIM)}     … ${preview.hiddenCount} more ${plural}${c(RST)}`);
+    }
+    return { lines, truncatable: preview.truncatable };
+  }
+
+  // DEFER the output-preview detail into the writer's redrawable detail band
+  // instead of committing it straight to immutable scrollback. It stays in the
+  // band until a turn boundary commits it once. The collapsed lines are rendered
+  // once here and committed verbatim — the band is installed once and committed
+  // once, never redrawn in place. Only the output-preview detail is deferred —
+  // the result line (endActivity) and the diff (scrollback) still commit
+  // immediately in chat-turn.js, unchanged.
+  deferToolOutput(msg) {
+    // Single slot: a new preview commits any previously-held one first (the
+    // next-op boundary normally already did this; belt-and-suspenders).
+    if (this._deferred) this.commitDeferredDetail();
+    const { lines } = this._renderOutputPreviewLines(msg);
+    this._deferred = { msg, lines };
+    this._setDetail(lines);
+    this._notifyLive();
+  }
+
+  // Commit the held detail band to scrollback and clear the slot, atomically via
+  // the writer (no duplicate frame, no stranded rows). No-op when nothing is held.
+  // Called at each turn boundary (next-op start, assistant answer, turn end) and
+  // auto-fired before any new scrollback this class emits, so ordering is always
+  // preserved. The held collapsed lines are committed verbatim — they already
+  // carry no interactive affordance.
+  commitDeferredDetail() {
+    if (!this._deferred) return;
+    const lines = this._deferred.lines;
+    const text = lines && lines.length ? lines.join('\n') + '\n' : '';
+    this._deferred = null;
+    this._commitDetail(text);
   }
 
   rerenderById(id) {
@@ -365,17 +550,14 @@ class ChatHistory {
   }
 
   collapseById(id) {
-    // Nothing to erase in the append-only model — drop the tracking so a
-    // future expand toggle doesn't target the stale entry.
+    // Nothing to erase in the append-only model — drop the tracking.
     delete this._msgById[id];
     delete this._msgLineCount[id];
-    if (this._lastExpandableId === id) this._lastExpandableId = null;
   }
 
   removeById(id) {
     delete this._msgById[id];
     delete this._msgLineCount[id];
-    if (this._lastExpandableId === id) this._lastExpandableId = null;
   }
 
   invalidateCache() {}