@semalt-ai/code 1.19.0 → 1.20.1

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() {}

package/lib/ui/create-ui.js

@@ -5,8 +5,15 @@ const readline = require('readline');
 const { RST, FG_YELLOW, FG_CYAN, FG_GRAY } = require('./ansi');
 const { ChatHistory } = require('./chat-history');
 const writer = require('./writer');
+const { getCols } = require('./utils');
+const { wrapPromptLines } = require('./format');
 const { registerTerminalCleanup } = require('./terminal');
 
+// Cap a long ask_user question to this many wrapped lines in the modal header
+// (mirrors the permission picker's MAX_DESC_LINES in permissions.js) so it can
+// never overflow the live modal band; the rest collapses to "… N more lines".
+const MAX_PROMPT_LINES = 12;
+
 function _createNoOpUI() {
   const chatHistory = {
     addMessage: (msg) => {
@@ -19,6 +26,10 @@ function _createNoOpUI() {
     clearStreamingContent: () => {},
     finalizeLastMessage: () => {},
     clearMessages: () => {},
+    // Phase 7b — no live region in the non-TTY no-op UI, so the deferred detail
+    // band is inert; the output preview just never displays. Present so the
+    // chat-turn boundary calls are safe in a non-TTY interactive run.
+    deferToolOutput: () => {}, commitDeferredDetail: () => {},
     scrollUp: () => {}, scrollDown: () => {},
     rerenderById: () => {},
     removeById: () => {},
@@ -62,7 +73,6 @@ function createUI(opts) {
   const { LayoutManager } = require('./layout');
   const { FullStatusBar } = require('./status-bar');
   const { InputField } = require('./input-field');
-  const { interactiveSelect } = require('./select');
 
   const layout = new LayoutManager();
   const chatHistory = new ChatHistory();
@@ -153,34 +163,67 @@ function createUI(opts) {
 
   // ── captureSelect (modal menu) ───────────────────────────────────────────────
   //
-  // Numbered-options picker for tools like ask_user. interactiveSelect
-  // renders each frame into the writer's modal region (above status,
-  // below scrollback) and routes keys through the input field's
-  // captureNavigation API — so the menu cohabits with the live region
-  // instead of taking over the screen, and Enter/Esc resolve in place.
+  // ask_user-PRIVATE numbered-options picker (the model/rewind/permission
+  // pickers call interactiveSelect directly — this wrapper is NOT on that path).
+  // It manages its OWN modal frame (mirroring permissions.js requestPermission)
+  // rather than going through interactiveSelect, because it prepends the QUESTION
+  // as NON-SELECTABLE header rows above the options: navigation only ever cycles
+  // the options, so the prompt rows can never be landed on or returned. The frame
+  // redraws in place in the writer's modal region (above status, below
+  // scrollback) and keys route through the input field's captureNavigation API,
+  // so the menu cohabits with the live region instead of taking over the screen.
+  //
+  // `menu` = { prompt, options }. `prompt` (the question prose, already stripped
+  // of the numbered options by the executor) is word-wrapped to terminal width
+  // and clamped to MAX_PROMPT_LINES so a long question can't overflow the band.
   inputField.captureSelect = (menu) => new Promise((resolve) => {
+    const options = (menu && Array.isArray(menu.options)) ? menu.options : [];
     if (!process.stdin.isTTY) {
-      resolve(menu.options[0]);
+      resolve(options[0]);
       return;
     }
-    interactiveSelect(
-      menu.options,
-      (opt, isSelected) => isSelected
-        ? `  ${FG_YELLOW}❯${RST} ${FG_CYAN}${opt}${RST}`
-        : `   ${FG_GRAY}${opt}${RST}`,
-      {
-        initialIndex: 0,
-        onExpand: () => chatHistory.toggleLastExpand(),
-        captureNavigation: (handler) => {
-          inputField.captureNavigation(handler);
-          return () => inputField.releaseNavigation();
-        },
+    if (options.length === 0) {
+      resolve(null);
+      return;
+    }
+
+    // Wrap + clamp the question into non-selectable header rows.
+    const promptLines = wrapPromptLines(menu && menu.prompt, {
+      cols: Math.max(20, getCols() - 4),
+      maxLines: MAX_PROMPT_LINES,
+    });
+
+    let idx = 0;
+    const buildLines = () => {
+      const lines = [];
+      for (const p of promptLines) lines.push(`  ${FG_GRAY}${p}${RST}`);
+      if (promptLines.length) lines.push('');
+      for (let i = 0; i < options.length; i++) {
+        lines.push(i === idx
+          ? `  ${FG_YELLOW}❯${RST} ${FG_CYAN}${options[i]}${RST}`
+          : `   ${FG_GRAY}${options[i]}${RST}`);
+      }
+      return lines;
+    };
+
+    writer.setModal(buildLines());
+    inputField.captureNavigation((action) => {
+      if (action === 'prev') {
+        idx = (idx - 1 + options.length) % options.length;
+        writer.setModal(buildLines());
+      } else if (action === 'next') {
+        idx = (idx + 1) % options.length;
+        writer.setModal(buildLines());
+      } else if (action === 'select' || action === 'cancel') {
+        // Order matters (mirrors interactiveSelect): clearModal first while the
+        // caret is still suppressed, then releaseNavigation so the host's render
+        // hooks restore the input caret on the next setLive frame.
+        writer.clearModal();
+        inputField.releaseNavigation();
+        // Cancel → last option (typically "No"/decline) so callers don't need to
+        // special-case cancellation — matches the prior contract.
+        resolve(action === 'select' ? options[idx] : options[options.length - 1]);
       }
-    ).then((idx) => {
-      // Cancel returns null. Match the prior contract: pick the last
-      // option (typically "No"/decline) so callers don't need to
-      // special-case cancellation.
-      resolve(idx === null ? menu.options[menu.options.length - 1] : menu.options[idx]);
     });
   });