@pellux/goodvibes-tui 2.0.21 → 2.1.1

package/src/renderer/ui-factory.ts

@@ -1,28 +1,18 @@
-import { type Line, type Cell, createEmptyLine, createEmptyCell } from '@pellux/goodvibes-sdk/platform/types';
-import { LAYOUT } from './layout.ts';
+import { type Line, type Cell, createEmptyLine } from '@pellux/goodvibes-sdk/platform/types';
 import { VERSION } from '../version.ts';
-import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor, joinPrioritizedSegments, type PrioritizedSegment } from '../utils/terminal-width.ts';
+import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
 import { renderHeaderLine } from './header-line.ts';
-import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
-import { GLYPHS } from './ui-primitives.ts';
-import { activeUiTones } from './theme.ts';
-import { formatElapsed } from '../utils/format-elapsed.ts';
-import { abbreviateCount } from '../utils/format-number.ts';
-import { computeContextUsage } from '../core/context-usage.ts';
-import { permissionModeLabel, permissionModeTone } from '../core/permission-mode.ts';
-import { SLEEP_DISABLED_CHIP } from '../core/power-status.ts';
+import { renderConversationFragment } from './conversation-surface.ts';
+import { activeTheme, activeTokens, activeUiTones } from './theme.ts';
 import { renderQueuedMessageList, renderMemoryProvenanceChip, type MemoryProvenanceEntry } from './composer-fragments.ts';
-import { calcSessionCost, isModelPriced } from '@pellux/goodvibes-sdk/platform/providers';
-import { buildFooterTip, isAgentActive } from './footer-tips.ts';
+import { renderUserMessage } from './user-message.ts';
 import type { StreamMetrics } from '../core/stream-event-wiring.ts';
 import { waitingPhrase, type WaitingState } from '@pellux/goodvibes-sdk/platform/presentation';
 
-/** Number of frames before the animated gradient completes one full cycle. */
-const GRADIENT_CYCLE_FRAMES = 50;
 /**
  * Ms since the last STREAM_DELTA before the whimsical phrase rotation freezes
- * and createThinkingFragment shows an honest "stalled Ns" / "reconnecting"
+ * and the status line shows an honest "stalled Ns" / "reconnecting"
  * label instead. Deliberately much shorter than the 30s stream-stall-watchdog
  * hint threshold (stream-stall-watchdog.ts), that threshold gates a
  * low-priority system message about a likely-dead connection; this one gates
@@ -43,58 +33,32 @@ export interface ThinkingStallInfo {
   readonly reconnect?: { readonly attempt: number; readonly maxAttempts: number };
 }
 
-/** Format a number: up to 999, then 1.0k, 1.0M, 1.0B, 1.0T */
-function fmtNum(n: number): string {
-  return abbreviateCount(n, { bSuffix: true });
-}
-
-/** Format a running USD cost estimate with a precision that suits its magnitude. */
-function fmtCost(usd: number): string {
-  if (!(usd > 0)) return '0.00';
-  if (usd < 0.01) return usd.toFixed(4);
-  if (usd < 1) return usd.toFixed(3);
-  return usd.toFixed(2);
-}
-
 /**
  * UIFactory - Generates standard UI fragments without needing Ink/React overhead.
  */
 export class UIFactory {
   /**
-   * The header row. Delegates to renderHeaderLine (header-line.ts), extracted
-   * when the header gained the failover divergence marker and this file was
-   * already on the 800-line source gate.
-   *
-   * `model`/`provider` are the SERVING backend and `note` the divergence
-   * marker, both resolved by core/active-model-identity.ts so the header and
-   * the footer answer "who is serving?" from one place. `version` defaults to
-   * the live build VERSION; tests pass a pinned fixture so golden snapshots
-   * don't break on every release bump.
+   * The header row, see header-line.ts. `model` is the SERVING backend
+   * resolved by core/active-model-identity.ts. `version` defaults to the live
+   * build VERSION; tests pass a pinned fixture so golden snapshots don't break
+   * on every release bump. `modelNote` is the failover marker drawn after the
+   * model while serving differs from the configured selection.
    */
-  public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo, version: string = VERSION, note: string = ''): Line[] {
-    return renderHeaderLine(width, model, provider, title, gitInfo, version, note);
+  public static createHeader(width: number, model: string, title?: string, gitInfo?: GitHeaderInfo, version: string = VERSION, modelNote?: string): Line[] {
+    return renderHeaderLine(width, model, title, gitInfo, version, modelNote);
   }
 
   /**
-   * createMessageBar - Renders a historical user message.
-   * Logic: Calculates the longest line to create a "hugging" block.
+   * createMessageBar, a sent user message: a full-width surface fill with the
+   * secondary bar (user-message.ts). A cancelled message passes its own fill,
+   * error bar and strikethrough.
    */
   public static createMessageBar(
     width: number, text: string,
-    bgColor: string = '#2a2a2a', textColor: string = activeUiTones().fg.secondary, prefixStr: string = ' › ',
-    strikethrough = false
+    bgColor: string = activeTokens().backgroundPanel, textColor: string = activeTokens().text, barColor: string = activeTokens().secondary,
+    strikethrough = false,
   ): Line[] {
-    // A historical user-message pill: it carries its own dark bodyBg, so its fg
-    // reads fg.secondary/state.reasoning (light-on-dark), this is conversation
-    // content, not the transparent-terminal chrome, so it is not part of the
-    // light-terminal chrome flip.
-    return renderConversationFragment(text, width, {
-      prefix: prefixStr,
-      prefixFg: activeUiTones().state.reasoning,
-      text: textColor,
-      bodyBg: bgColor,
-      strikethrough,
-    });
+    return renderUserMessage(text, width, { bar: barColor, bg: bgColor, text: textColor, strikethrough });
   }
 
   /**
@@ -106,8 +70,7 @@ export class UIFactory {
       prefix: ' (...) ',
       prefixFg: t.state.reasoning,
       text: t.fg.dim,
-      bodyBg: '#1a1a1a',
-      dim: true,
+      bodyBg: activeTheme().collapsedBodyBg,
     });
   }
 
@@ -121,389 +84,11 @@ export class UIFactory {
     return renderMemoryProvenanceChip(width, count, entries, expanded);
   }
 
-  public static createFooter(
-    width: number,
-    prompt: string,
-    usage: { up: number; down: number; max?: number; fleetCostUsd?: number | null },
-    showExitNotice: boolean,
-    lastCopyTime: number,
-    model?: string,
-    toolCount?: number,
-    cursorPos?: number,
-    workingDir?: string,
-    provider?: string,
-    contextWindow?: number,
-    compactThreshold?: number,
-    dangerMode?: boolean,
-    lastInputTokens?: number,
-    commandArgsHint?: string,
-    hitlMode?: string,
-    promptFocused: boolean = true,
-    composerMode?: string,
-    composerStatus?: string,
-    composerFlags?: readonly string[],
-    composerPendingRisk?: 'none' | 'approval-wait' | 'shell' | 'command' | 'remote',
-    compact: boolean = false,
-    // Honest cross-surface spine posture. Defined ONLY in adopted-daemon
-    // mode (undefined in local-only mode), so the segment is absent otherwise.
-    sessionSpineStatus?: 'online' | 'offline',
-    // Session permission mode (config value). Rendered as a leading pill in the
-    // posture block; undefined suppresses the pill (e.g. bare test callers).
-    permissionMode?: string,
-    // The web surface's reachable URL, when that surface is enabled, a
-    // persistent low-priority context segment; undefined suppresses it.
-    webSurfaceUrl?: string,
-    // True while power.keepAwake holds, renders the always-visible
-    // "sleep disabled" chip in the posture block (the danger-mode idiom: a
-    // persistent, colored surface indicator, the safety mechanism itself).
-    powerKeepAwake?: boolean,
-    // Divergence marker for the model segment (core/active-model-identity.ts):
-    // set only while the serving backend is not the user's configured
-    // selection, e.g. "failover from abacusai:route-llm". Empty/undefined
-    // renders the context-info line exactly as it did before the marker existed.
-    modelNote?: string,
-  ): Line[] {
-    const lines: Line[] = [];
-    const promptLines = prompt.split('\n');
-    const TEXT_COLOR = promptFocused ? '252' : '246';
-    const BG_COLOR = promptFocused ? '#2a2a2a' : '#1f2430';
-    const BORDER_COLOR = BG_COLOR;
-    const boxMargin = 2; const boxWidth = width - (boxMargin * 2); const boxStartX = boxMargin;
-    const createBaseLine = () => {
-      const l = createEmptyLine(width);
-      for (let x = 0; x < width; x++) l[x].bg = ''; 
-      return l;
-    };
-    const topLine = createBaseLine();
-    for (let x = 0; x < boxWidth; x++) topLine[boxStartX + x] = { char: GLYPHS.surface.top, fg: BORDER_COLOR, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
-    lines.push(topLine);
-    promptLines.forEach((text, i) => {
-      const contentW = boxWidth - 4;
-      const prefix = i === 0 ? ' › ' : '   ';
-      // Render text without cursor insertion, cursor is overlaid after
-      const rawText = `${prefix}${text}`;
-      const paddedText = fitDisplay(rawText, contentW);
-      const contentLine = createBaseLine();
-      for (let x = 0; x < boxWidth; x++) {
-        const char = (x >= 2 && x < boxWidth - 2) ? paddedText[x - 2] || ' ' : ' ';
-        contentLine[boxStartX + x] = {
-          char,
-          fg: (x < 5 && i === 0) ? (promptFocused ? '135' : '244') : TEXT_COLOR,
-          bg: BG_COLOR,
-          bold: false,
-          dim: !promptFocused,
-          underline: false,
-          italic: false,
-          strikethrough: false,
-        };
-      }
-
-      // Overlay cursor only while the prompt owns focus.
-      if (promptFocused && cursorPos !== undefined) {
-        let lineStart = 0;
-        for (let li = 0; li < i; li++) lineStart += promptLines[li].length + 1;
-        const posInLine = cursorPos - lineStart;
-        if (posInLine >= 0 && posInLine <= text.length) {
-          // Cursor column in cell coordinates: prefix width (3) + posInLine + box padding (2)
-          const cursorX = boxStartX + 2 + prefix.length + posInLine;
-          if (cursorX < boxStartX + boxWidth - 2) {
-            const cell = contentLine[cursorX];
-            // Invert: bright fg on the text bg, swap to make cursor visible
-            contentLine[cursorX] = {
-              char: cell.char === ' ' ? GLYPHS.surface.cursor : cell.char,
-              fg: cell.char === ' ' ? '252' : '#000000',
-              bg: cell.char === ' ' ? (promptFocused ? BG_COLOR : '#334155') : '#ffffff',
-              bold: false, dim: false, underline: false, italic: false, strikethrough: false
-            };
-          }
-        }
-      } else if (promptFocused && i === promptLines.length - 1) {
-        // No cursorPos provided, show block at end (fallback)
-        const endX = boxStartX + 2 + prefix.length + text.length;
-        if (endX < boxStartX + boxWidth - 2) {
-          contentLine[endX] = { char: GLYPHS.surface.cursor, fg: '252', bg: promptFocused ? BG_COLOR : '#334155', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
-        }
-      }
-
-      // focus visibility (item 1c): when the panel workspace owns focus
-      // and the composer is empty, name the state and the way back, the
-      // dimmed prompt alone (TEXT_COLOR/BG_COLOR above) told you nothing was
-      // wrong, but not why keystrokes weren't landing here.
-      if (!promptFocused && text === '' && i === 0) {
-        const hintText = 'panel focused: Esc returns';
-        const hintStartX = boxStartX + 2 + prefix.length;
-        let hx = hintStartX;
-        for (const ch of hintText) {
-          if (hx >= boxStartX + boxWidth - 2) break;
-          contentLine[hx] = { char: ch, fg: '244', bg: BG_COLOR, bold: false, dim: true, underline: false, italic: false, strikethrough: false };
-          hx++;
-        }
-      }
-
-      // Overlay args hint: dim grey text after cursor on the last prompt line.
-      // Only shown when a commandArgsHint is provided and cursor is at the end of input.
-      if (commandArgsHint && i === promptLines.length - 1) {
-        // Determine where the cursor sits on this line
-        let cursorColOnLine: number;
-        if (cursorPos !== undefined) {
-          let lineStart = 0;
-          for (let li = 0; li < i; li++) lineStart += promptLines[li].length + 1;
-          cursorColOnLine = cursorPos - lineStart;
-        } else {
-          cursorColOnLine = text.length;
-        }
-        // Only show hint when cursor is at end of the last line (no args typed yet)
-        if (cursorColOnLine >= text.length) {
-          // Hint starts one cell after the cursor block
-          const hintStartX = boxStartX + 2 + prefix.length + text.length + 1;
-          const hintLimit = boxStartX + boxWidth - 2; // exclusive right bound
-          const avail = Math.max(0, hintLimit - hintStartX);
-          // Clamp to the available width with an ellipsis so a long arg-spec
-          // (e.g. /marketplace) ends in "…" rather than a hard mid-word cut. (5b)
-          let hintText = ' ' + commandArgsHint;
-          if (hintText.length > avail) {
-            hintText = avail > 1 ? `${hintText.slice(0, avail - 1)}…` : hintText.slice(0, Math.max(0, avail));
-          }
-          let hx = hintStartX;
-          for (const ch of hintText) {
-            if (hx >= hintLimit) break;
-            contentLine[hx] = { char: ch, fg: '238', bg: BG_COLOR, bold: false, dim: true, underline: false, italic: false, strikethrough: false };
-            hx++;
-          }
-        }
-      }
-
-      lines.push(contentLine);
-    });
-    const bottomLine = createBaseLine();
-    for (let x = 0; x < boxWidth; x++) bottomLine[boxStartX + x] = { char: GLYPHS.surface.bottom, fg: BORDER_COLOR, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
-    // Multi-line indicator lives inside the bottom border (right-aligned) so
-    // the footer height stays invariant while the user adds prompt lines.
-    if (promptLines.length > 1) {
-      const lineCountTag = ` ${promptLines.length}L `;
-      let tx = boxStartX + boxWidth - lineCountTag.length - 2;
-      for (const ch of lineCountTag) {
-        if (tx >= boxStartX + boxWidth - 1) break;
-        bottomLine[tx] = { char: ch, fg: '244', bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false };
-        tx += 1;
-      }
-    }
-    lines.push(bottomLine);
-    // --- Composer posture block (mode / risk / status / flags) ------------
-    // Suppressed in compact mode; the ctx-info line no longer duplicates these
-    // tokens, so this block is the single home for mode/status/flags.
-    // Footer chrome paints on the transparent terminal bg → chrome.* accents
-    // (light-terminal-aware); state.info reads on both light and dark terminals.
-    const t = activeUiTones();
-    const composerTokens: Array<{ text: string; fg: string; bold?: boolean; dim?: boolean }> = [];
-    // Permission-mode pill, always shown so the active session posture (normal
-    // / plan / accept-edits / auto) is visible at a glance. Tone: normal reads
-    // dim/neutral, plan reads info (read-only, safe), accept-edits and auto read
-    // as caution (raised autonomy). Cycled by Shift+Tab, toggled by /plan.
-    if (permissionMode) {
-      const modeTone = permissionModeTone(permissionMode);
-      const modeFg = modeTone === 'caution' ? t.chrome.warn : modeTone === 'info' ? t.state.info : '244';
-      composerTokens.push({ text: ` mode:${permissionModeLabel(permissionMode)} `, fg: modeFg, bold: modeTone !== 'neutral', dim: modeTone === 'neutral' });
-    }
-    // Context-usage chip, always-visible compaction-pressure indicator so the
-    // user sees compaction approaching before it happens. Colored by proximity
-    // to the auto-compact threshold (fraction; falls back to 0.85 when unset).
-    if (contextWindow && contextWindow > 0) {
-      const ctxUsage = computeContextUsage(lastInputTokens ?? 0, contextWindow);
-      const ctxThr = compactThreshold && compactThreshold > 0 ? compactThreshold : 0.85;
-      const ctxFg = ctxUsage.clampedRatio >= ctxThr ? t.chrome.bad : ctxUsage.clampedRatio >= ctxThr * 0.85 ? t.chrome.warn : '244';
-      composerTokens.push({ text: ` ctx:${ctxUsage.pct}% `, fg: ctxFg, bold: ctxUsage.clampedRatio >= ctxThr, dim: ctxUsage.clampedRatio < ctxThr * 0.85 });
-    }
-    if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: t.state.info, bold: true });
-    if (composerPendingRisk && composerPendingRisk !== 'none') {
-      const riskColor = composerPendingRisk === 'approval-wait'
-        ? t.chrome.warn
-        : composerPendingRisk === 'shell'
-          ? t.chrome.bad
-          : composerPendingRisk === 'remote'
-            ? t.chrome.remote
-            : t.chrome.warn;
-      composerTokens.push({ text: ` risk:${composerPendingRisk} `, fg: riskColor, bold: true });
-    }
-    // "sleep disabled" chip, always visible while keep-awake holds, in the
-    // danger-mode idiom (a persistent warn-tone indicator; the chip is the
-    // safety mechanism, so there is no timer and no AC-only variant).
-    if (powerKeepAwake) composerTokens.push({ text: ` ${SLEEP_DISABLED_CHIP} `, fg: t.chrome.warn, bold: true });
-    if (composerStatus && composerStatus !== 'idle') composerTokens.push({ text: ` state:${composerStatus} `, fg: '244', dim: true });
-    if (composerFlags && composerFlags.length > 0) composerTokens.push({ text: ` flags:${composerFlags.join(',')} `, fg: '244', dim: true });
-    if (!compact && composerTokens.length > 0) {
-      const postureLine = createBaseLine();
-      let px = 2;
-      for (const token of composerTokens) {
-        for (const ch of token.text) {
-          if (px >= width) break;
-          postureLine[px] = {
-            char: ch,
-            fg: token.fg,
-            bg: '',
-            bold: token.bold ?? false,
-            dim: token.dim ?? false,
-            underline: false,
-            italic: false,
-            strikethrough: false,
-          };
-          px += getDisplayWidth(ch);
-        }
-        if (px >= width) break;
-      }
-      lines.push(postureLine);
-    } else if (compact && powerKeepAwake) {
-      // The keep-awake chip is a safety indicator, it survives compact height
-      // even though the rest of the posture row (mode/ctx/risk/state/flags) is
-      // dropped at height < 30. Its own compact-surviving slot.
-      const chipLine = createBaseLine();
-      let cx = 2;
-      for (const ch of ` ${SLEEP_DISABLED_CHIP} `) {
-        if (cx >= width) break;
-        chipLine[cx] = { char: ch, fg: t.chrome.warn, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
-        cx += getDisplayWidth(ch);
-      }
-      lines.push(chipLine);
-    }
-    const isRecentlyCopied = Date.now() - lastCopyTime < 2000;
-    // Token usage line + running ~$ cost estimate (derived from the usage
-    // object and the active model via cost-utils).
-    const u = usage as { input?: number; output?: number; cacheRead?: number; cacheWrite?: number; up?: number; down?: number; fleetCostUsd?: number | null };
-    const inp = u.input ?? u.up ?? 0;
-    const out = u.output ?? u.down ?? 0;
-    const cr = u.cacheRead ?? 0;
-    const cw = u.cacheWrite ?? 0;
-    const total = inp + out + cr + cw;
-    const tokenSep = ` ${GLYPHS.navigation.pipeSeparator} `;
-    // 'n/a' (not 'unpriced') to stay compact in the single-line footer and
-    // match the existing "no priceable data" convention used elsewhere
-    // (cockpit-panel formatCost, agent-inspector-shared), the footer has no
-    // room for a longer marker before truncation kicks in.
-    const mainCostStr = model
-      ? isModelPriced(model)
-        ? `~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}`
-        : '~n/a'
-      : null;
-    // Honest total = your main session + the delegated fleet. We show a SPLIT
-    // ("you ~$X · fleet ~$Y") rather than one summed figure: the two costs are
-    // tracked and attributed to different actors, and the split directly answers
-    // "where did the money go", the exact confusion in the eval where the footer
-    // showed only the main session (~$0.046) while the fleet cost ~10x more
-    // ($0.446). The fleet segment appears only when there is a real fleet cost, so
-    // the idle single-session footer is unchanged.
-    const fleetCost = u.fleetCostUsd;
-    const hasFleetCost = typeof fleetCost === 'number' && fleetCost > 0;
-    const costSegment = hasFleetCost
-      ? `${tokenSep}you ${mainCostStr ?? '~n/a'} · fleet ~$${fmtCost(fleetCost)}`
-      : mainCostStr
-        ? `${tokenSep}${mainCostStr}`
-        : '';
-    // Input tokens are unknown until the first assistant usage lands (often the
-    // first tool turn). Show "—" rather than a false 0 during that window. (5c)
-    const inpDisplay = inp > 0 ? fmtNum(inp) : '—';
-    const tokenLine = ` Token Usage [ Input: ${inpDisplay}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)}${costSegment} ]`;
-    const copiedNotice = isRecentlyCopied ? ` [COPIED] ` : '';
-    const statsLine = '  ' + tokenLine + ' '.repeat(Math.max(0, width - 4 - getDisplayWidth(tokenLine) - getDisplayWidth(copiedNotice))) + copiedNotice;
-    lines.push(this.stringToLine(statsLine, width, { fg: isRecentlyCopied ? '81' : '244', bold: isRecentlyCopied }));
-    // Context usage progress bar, suppressed in compact mode.
-    if (!compact && contextWindow && contextWindow > 0) {
-      const ctxTokens = lastInputTokens ?? 0;
-      const label = '   Context Usage: ';
-      // "—" until the first input-token count is known, not a false 0. (5c)
-      const ctxDisplay = ctxTokens > 0 ? fmtNum(ctxTokens) : '—';
-      const suffix = ` [ ${ctxDisplay} / ${fmtNum(contextWindow)} ]`;
-      const barWidth = Math.max(10, Math.min(30, width - getDisplayWidth(label) - getDisplayWidth(suffix) - 8));
-      const ctxPct = computeContextUsage(ctxTokens, contextWindow).clampedRatio;
-      // Clamp threshold to [0..1]; undefined/0 means no threshold marker.
-      const thresholdFraction = (compactThreshold !== undefined && compactThreshold > 0)
-        ? Math.min(1, compactThreshold)
-        : undefined;
-      lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix, thresholdFraction));
-    }
-    // Context info line (working dir, model+provider, tools, hitl).
-    // Suppressed in compact mode. mode/status/flags are intentionally omitted,
-    // the posture block above owns them, so they are not duplicated here.
-    if (!compact && (workingDir || model)) {
-      const home = typeof process !== 'undefined' ? process.env.HOME ?? '' : '';
-      const displayDir = workingDir && home && workingDir.startsWith(home)
-        ? '~' + workingDir.slice(home.length)
-        : workingDir ?? '';
-      // Segments carry a survival priority (lower = survives longer) so that
-      // under width pressure whole low-value segments are dropped before any
-      // segment is character-truncated mid-word. cwd/model are the essential
-      // orientation segments (priority 0); the spine liveness marker is the
-      // daemon-honesty signal and must outlive the two decorative segments
-      // (tool count, notify mode), it is ordered ahead of them too, so a
-      // narrow line drops "N tools"/"notify:x" whole before spine is at risk.
-      const ctxParts: PrioritizedSegment[] = [];
-      if (displayDir) ctxParts.push({ text: displayDir, priority: 0 });
-      if (model) {
-        ctxParts.push({ text: model + (provider ? ` (${provider})` : ''), priority: 0 });
-      }
-      // Divergence marker, its own segment so a narrow line drops it WHOLE
-      // (joinPrioritizedSegments breaks priority ties toward the later
-      // segment) rather than truncating it into a half-word. Priority 0: it
-      // outranks every decorative segment, and what survives without it is
-      // still the SERVING backend, never a claim about the configured one.
-      if (modelNote) ctxParts.push({ text: modelNote, priority: 0 });
-      // Cross-surface spine posture, plain words, no blame. Adopted mode only.
-      if (sessionSpineStatus) ctxParts.push({ text: `spine:${sessionSpineStatus}`, priority: 1 });
-      // Web surface reachability, plain, persistent; dropped first under width pressure.
-      if (webSurfaceUrl) ctxParts.push({ text: `web:${webSurfaceUrl}`, priority: 2 });
-      if (toolCount) ctxParts.push({ text: `${toolCount} tools`, priority: 2 });
-      // Labeled "notify" (not "hitl"), /mode (aliased /hitl) governs UX
-      // notification verbosity (quiet/balanced/operator), not tool
-      // auto-approval, so it must not share vocabulary with the DANGER MODE
-      // risk banner rendered a few lines below. Lowest priority: dropped first.
-      if (hitlMode) ctxParts.push({ text: `notify:${hitlMode}`, priority: 3 });
-      const sep = `  ${GLYPHS.navigation.pipeSeparator}  `;
-      const ctxBody = joinPrioritizedSegments(ctxParts, sep, width - 3);
-      const ctxLine = '   ' + ctxBody;
-      lines.push(this.stringToLine(ctxLine, width, { fg: '240', dim: true }));
-    }
-    if (showExitNotice) {
-      const notice = `   !!! Press Ctrl+C again to exit !!! `;
-      lines.push(this.stringToLine(fitDisplay(notice, width), width, { fg: '196', bold: true }));
-    } else {
-      // Persistent discoverability tip. Rotates by context (agent-aware): the
-      // process-monitor tip leads while a turn is in flight. See footer-tips.ts.
-      const help = `   ${buildFooterTip({ agentActive: isAgentActive(composerStatus) })} `;
-      const dangerWarn = dangerMode ? `! DANGER MODE - ALL CHANGES AUTO-APPROVED ` : '';
-      const helpW = getDisplayWidth(help);
-      const dangerW = getDisplayWidth(dangerWarn);
-      const spacerW = Math.max(0, width - helpW - dangerW);
-      const combinedLine = help + ' '.repeat(spacerW) + dangerWarn;
-      const line = this.stringToLine(truncateDisplay(combinedLine, width), width, { fg: '240', dim: true });
-      // Overlay the danger warning in red bold
-      if (dangerMode && dangerW > 0) {
-        let col = helpW + spacerW;
-        for (const ch of dangerWarn) {
-          if (col >= width) break;
-          const cw = getDisplayWidth(ch);
-          line[col] = { char: ch, fg: t.chrome.bad, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
-          if (cw === 2 && col + 1 < width) line[col + 1] = { ...line[col], char: '' };
-          col += cw;
-        }
-      }
-      lines.push(line);
-    }
-    return lines;
-  }
-
-  // The rotating "thinking" phrase pool and the honest waiting-state
-  // wording (approval/reconnecting/pre-first-token/stalled/thinking) are no
-  // longer minted here. They come from the SDK presentation contract's
-  // waitingPhrase() (@pellux/goodvibes-sdk/platform/presentation, already
-  // adopted by the agent), see createThinkingFragment
-  // below. This renderer still decides WHICH state applies from its own
-  // stall/reconnect/approval signals (computeStallInfo/computeRenderStallInfo
-  // stay renderer-local per the extraction decision record); only the exact
-  // wording is shared.
-
-  // Gradient colors for thinking text, cyan→purple in dark, teal→purple in
-  // light (matches splash/brand). Read live per render inside
-  // createThinkingFragment via activeUiTones() rather than baked into a static
-  // field, so a mode flip re-resolves without a module reload.
+  // The waiting-state wording (approval/reconnecting/pre-first-token/stalled/
+  // thinking) comes from the SDK presentation contract's waitingPhrase(),
+  // shared with the agent. This renderer still decides WHICH state applies
+  // from its own stall/reconnect/approval signals (computeStallInfo /
+  // computeRenderStallInfo below, see busyPhrase).
 
   /**
    * Per-frame stall info from stream metrics, computed from lastDeltaAtMs every render (not
@@ -524,7 +109,7 @@ export class UIFactory {
    * executing. lastDeltaAtMs only tracks STREAM_START/STREAM_DELTA and is
    * never advanced during tool execution (the model isn't producing tokens
    * then), so without this gate any tool call longer than
-   * THINKING_STALL_FREEZE_MS would make the thinking fragment print
+   * THINKING_STALL_FREEZE_MS would make the status line print
    * "Stalled Ns..." directly above the ticking "executing (Ns)" tool row, a
    * false positive during ordinary tool execution (see stream-event-wiring.ts
    * TOOL_EXECUTING/TOOL_SUCCEEDED/TOOL_FAILED/TOOL_CANCELLED handlers).
@@ -542,17 +127,15 @@ export class UIFactory {
       : undefined;
   }
 
-  public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number, elapsedMs?: number, ttftMs?: number, stallInfo?: ThinkingStallInfo, approvalPending?: boolean): Line[] {
-    // Live thinking row paints on the transparent terminal bg → read the
-    // mode-resolved chrome tones per render (gradient/brand/tool accents flip).
-    const tones = activeUiTones();
-    // Freeze the whimsical phrase rotation once real silence has gone on
-    // long enough to be misleading (THINKING_STALL_FREEZE_MS). Decide WHICH
-    // honest waiting state applies (renderer-local, this signal computation
-    // stays here per the extraction decision record), then defer the exact
-    // wording to the SDK presentation contract's waitingPhrase() (which
-    // mirrors the agent's adoption). Precedence matches the contract:
-    // approval > reconnecting > pre-first-token > stalled > thinking.
+  /**
+   * The status line's waiting phrase for a running turn. Decides WHICH honest
+   * waiting state applies (renderer-local signals), then takes the exact
+   * wording from the SDK presentation contract's waitingPhrase(). Precedence:
+   * approval > reconnecting > pre-first-token > stalled > thinking. The
+   * whimsical rotation freezes once real silence has lasted long enough to be
+   * misleading (THINKING_STALL_FREEZE_MS).
+   */
+  public static busyPhrase(frame: number, outputTokens?: number, stallInfo?: ThinkingStallInfo, approvalPending?: boolean): string {
     const isStalled = stallInfo !== undefined && stallInfo.msSinceLastDelta >= THINKING_STALL_FREEZE_MS;
     let state: WaitingState;
     if (approvalPending) state = 'approval';
@@ -560,163 +143,17 @@ export class UIFactory {
     else if (isStalled && (outputTokens ?? 0) === 0) state = 'pre-first-token';
     else if (isStalled) state = 'stalled';
     else state = 'thinking';
-    const phrase = waitingPhrase(state, {
+    return waitingPhrase(state, {
       reconnectAttempt: stallInfo?.reconnect?.attempt,
       reconnectMaxAttempts: stallInfo?.reconnect?.maxAttempts,
       msSinceLastDelta: stallInfo?.msSinceLastDelta,
       frame,
     });
-    // Token-rate and time-to-first-token readouts are meaningless while waiting on the user, and a
-    // "tok/s" figure next to an approval prompt reads as if the model were still working, suppress
-    // them; keep the elapsed timer since "how long the approval has waited" is honest.
-    const speedSuffix = (!approvalPending && tokenSpeed !== undefined && tokenSpeed > 0) ? ` (${Math.round(tokenSpeed)} tok/s)` : '';
-    const elapsedSuffix = elapsedMs !== undefined ? ` (${formatElapsed(elapsedMs)})` : '';
-    const ttftSuffix = (!approvalPending && ttftMs !== undefined && ttftMs > 0) ? ` (first token ${formatElapsed(ttftMs)})` : '';
-    const text = `  ${spinner} ${phrase}${speedSuffix}${elapsedSuffix}${ttftSuffix} `;
-
-    const textWidth = Math.max(1, getDisplayWidth(text) - 1);
-    const segments: ConversationStatusSegment[] = Array.from(text).map((char, index) => {
-      const rawUnwrapped = (index / textWidth) - (frame % GRADIENT_CYCLE_FRAMES) * 0.02;
-      const raw = ((rawUnwrapped % 1.0) + 1.0) % 1.0;
-      const gradientPos = raw <= 0.5 ? raw * 2 : (1 - raw) * 2;
-      return {
-        text: char,
-        fg: interpolateColor(tones.accent.gradientStart, tones.accent.gradientEnd, gradientPos),
-        bold: true,
-      };
-    });
-    if (inputTokens !== undefined || outputTokens !== undefined) {
-      const inTok = inputTokens ?? 0;
-      const outTok = outputTokens ?? 0;
-      segments.push({ text: ` in ${fmtNum(inTok)} `, fg: '243', dim: true });
-      segments.push({ text: `out ${fmtNum(outTok)}`, fg: tones.accent.brand });
-    }
-    const line = createEmptyLine(width);
-    let col = 1;
-    for (const segment of segments) {
-      for (const char of segment.text) {
-        if (col >= width) break;
-        const charWidth = getDisplayWidth(char);
-        if (charWidth <= 0 || col + charWidth > width) break;
-        line[col] = {
-          char,
-          fg: segment.fg,
-          bg: '',
-          bold: segment.bold ?? false,
-          dim: segment.dim ?? false,
-          underline: false,
-          italic: segment.italic ?? false,
-          strikethrough: false,
-        };
-        if (charWidth === 2 && col + 1 < width) {
-          line[col + 1] = { ...line[col], char: '' };
-        }
-        col += charWidth;
-      }
-      if (col >= width) break;
-    }
-
-    const lines: Line[] = [
-      this.stringToLine(' '.repeat(width), width),
-      line,
-    ];
-
-    if (toolPreview) {
-      const previewLine = createEmptyLine(width);
-      const label = ' tool: ';
-      let px = 0;
-      for (const ch of label) {
-        if (px >= width) break;
-        previewLine[px] = {
-          char: ch,
-          fg: tones.state.info,
-          bg: '',
-          bold: true,
-          dim: false,
-          underline: false,
-          italic: false,
-          strikethrough: false,
-        };
-        px += getDisplayWidth(ch);
-      }
-      for (const ch of toolPreview) {
-        if (px >= width) break;
-        const charWidth = getDisplayWidth(ch);
-        if (charWidth <= 0 || px + charWidth > width) break;
-        previewLine[px] = {
-          char: ch,
-          fg: '243',
-          bg: '',
-          bold: false,
-          dim: true,
-          underline: false,
-          italic: false,
-          strikethrough: false,
-        };
-        if (charWidth === 2 && px + 1 < width) {
-          previewLine[px + 1] = { ...previewLine[px], char: '' };
-        }
-        px += charWidth;
-      }
-      lines.push(previewLine);
-    }
-
-    lines.push(this.stringToLine(' '.repeat(width), width));
-    return lines;
   }
 
-  /**
-   * createProgressBarLine - Renders a labeled progress bar line.
-   * @param label - Left-side label string (padded as-is)
-   * @param pct - Fill fraction 0..1
-   * @param barWidth - Number of bar characters
-   * @param lineWidth - Total terminal width to slice to
-   * @param suffix - Optional suffix appended after the percentage
-   * @param compactThreshold - Optional fraction [0..1] at which a threshold marker is drawn
-   *   and the color switches from safe to at-threshold. When omitted, falls back to the
-   *   legacy hardcoded 0.6/0.85 thresholds.
-   */
-  private static createProgressBarLine(
-    label: string,
-    pct: number,
-    barWidth: number,
-    lineWidth: number,
-    suffix?: string,
-    compactThreshold?: number,
-  ): Line {
-    const pctDisplay = Math.round(pct * 100);
-    const filled = Math.round(pct * barWidth);
-
-    // Color: when compactThreshold is provided, switch at the threshold;
-    // otherwise fall back to legacy hardcoded 0.6 (green) / 0.85 (yellow) / red.
-    let color: string;
-    if (compactThreshold !== undefined) {
-      color = pct < compactThreshold ? '82' : pct < 1.0 ? '220' : '196';
-    } else {
-      color = pct < 0.6 ? '82' : pct < 0.85 ? '220' : '196';
-    }
-
-    // Build bar with optional threshold marker.
-    // The marker ('▸') is placed at the threshold column, replacing an empty cell.
-    const emptyChar = GLYPHS.meter.empty;
-    const filledChar = GLYPHS.meter.filled;
-    const thresholdCol = compactThreshold !== undefined
-      ? Math.round(compactThreshold * barWidth)
-      : -1;
-
-    let bar = '';
-    for (let i = 0; i < barWidth; i++) {
-      if (i === thresholdCol && i >= filled) {
-        // Threshold marker sits in the empty region
-        bar += '▸'; // ▸
-      } else {
-        bar += i < filled ? filledChar : emptyChar;
-      }
-    }
-
-    const pctStr = `  ${pctDisplay}%`;
-    const full = label + bar + pctStr + (suffix ?? '');
-    return this.stringToLine(truncateDisplay(full, lineWidth), lineWidth, { fg: color, dim: true });
+  /** The opt-in partial tool preview row shown under the transcript while a turn runs. */
+  public static createToolPreviewRow(width: number, preview: string): Line {
+    return this.stringToLine(truncateDisplay(`   tool: ${preview}`, width), width, { fg: activeTokens().textFaint });
   }
 
   public static stringToLine(text: string, width: number, style: Partial<Cell> = {}): Line {