@pellux/goodvibes-tui 1.7.0 → 1.9.0

package/src/renderer/tool-result-summary.ts

@@ -0,0 +1,148 @@
+/**
+ * summarizeToolResult — one-line human summaries for tool RESULTS, so the
+ * transcript (and the fleet attach view, which shares the same rendering seam
+ * in conversation-rendering.ts) shows "wrote haiku.txt (532 B)" instead of a
+ * raw `{"files_written":1,"bytes_written":532,...}` JSON blob. The full payload
+ * stays reachable behind the existing collapse/expand toggle — this only
+ * changes the collapsed preview line, never destroys data. (UX-B item 3.)
+ *
+ * Returning `null` means "no honest summary for this shape" — the caller then
+ * falls back to the previous raw-first-line preview, so an unrecognised tool or
+ * an unexpected payload is never mis-summarised.
+ */
+
+/** Compact byte count: "87 B", "1.2 KB", "3.4 MB". */
+function formatBytes(n: number): string {
+  if (!Number.isFinite(n) || n < 0) return '? B';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** Compact duration: "820ms", "1.2s", "1m3s". */
+function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '?';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const s = Math.round(ms / 1000);
+  return `${Math.floor(s / 60)}m${s % 60}s`;
+}
+
+/** Trailing filename for compact display (paths can be long/absolute). */
+function baseName(p: string): string {
+  const cleaned = p.replace(/[/\\]+$/, '');
+  const idx = Math.max(cleaned.lastIndexOf('/'), cleaned.lastIndexOf('\\'));
+  return idx >= 0 ? cleaned.slice(idx + 1) : cleaned;
+}
+
+function asNumber(v: unknown): number | undefined {
+  return typeof v === 'number' && Number.isFinite(v) ? v : undefined;
+}
+
+function firstPath(files: unknown): string | undefined {
+  if (!Array.isArray(files) || files.length === 0) return undefined;
+  const first = files[0];
+  if (typeof first === 'string') return first;
+  if (first && typeof first === 'object') {
+    const rec = first as Record<string, unknown>;
+    if (typeof rec.path === 'string') return rec.path;
+    if (typeof rec.resolved_path === 'string') return rec.resolved_path;
+  }
+  return undefined;
+}
+
+/** write: { files_written, bytes_written, files?: [{path, bytes_written}], dry_run? } */
+function summarizeWrite(obj: Record<string, unknown>): string | null {
+  const count = asNumber(obj.files_written);
+  const bytes = asNumber(obj.bytes_written);
+  if (count === undefined) return null;
+  const verb = obj.dry_run === true ? 'would write' : 'wrote';
+  const size = bytes !== undefined ? ` (${formatBytes(bytes)})` : '';
+  if (count === 1) {
+    const path = firstPath(obj.files);
+    return path ? `${verb} ${baseName(path)}${size}` : `${verb} 1 file${size}`;
+  }
+  return `${verb} ${count} files${size}`;
+}
+
+/** read: { summary: { files_read, total_lines }, files?: [{path, lineCount}] } */
+function summarizeRead(obj: Record<string, unknown>): string | null {
+  const summary = (obj.summary && typeof obj.summary === 'object')
+    ? obj.summary as Record<string, unknown>
+    : obj;
+  const count = asNumber(summary.files_read);
+  const lines = asNumber(summary.total_lines);
+  if (count === undefined && lines === undefined) return null;
+  const lineText = lines !== undefined ? ` (${lines} line${lines === 1 ? '' : 's'})` : '';
+  if (count === 1) {
+    const path = firstPath(obj.files);
+    return path ? `read ${baseName(path)}${lineText}` : `read 1 file${lineText}`;
+  }
+  return `read ${count ?? '?'} files${lineText}`;
+}
+
+/** edit: { applied, failed, dry_run } or richer with a path. */
+function summarizeEdit(obj: Record<string, unknown>): string | null {
+  const applied = asNumber(obj.applied);
+  if (applied === undefined) return null;
+  const failed = asNumber(obj.failed) ?? 0;
+  const verb = obj.dry_run === true ? 'would apply' : 'applied';
+  const path = typeof obj.path === 'string' ? obj.path : firstPath(obj.files);
+  const target = path ? ` to ${baseName(path)}` : '';
+  const failText = failed > 0 ? `, ${failed} failed` : '';
+  return `${verb} ${applied} edit${applied === 1 ? '' : 's'}${target}${failText}`;
+}
+
+/** A single exec command result. */
+function summarizeExecOne(obj: Record<string, unknown>): string | null {
+  const exit = obj.exit_code;
+  const dur = asNumber(obj.duration_ms);
+  const durText = dur !== undefined ? ` · ${formatDuration(dur)}` : '';
+  if (obj.timed_out === true) return `timed out${durText}`;
+  if (obj.cancelled === true) return `cancelled${durText}`;
+  const stdout = typeof obj.stdout === 'string' ? obj.stdout : '';
+  const lineCount = stdout.length === 0
+    ? 0
+    : stdout.replace(/\n$/, '').split('\n').length;
+  const lineText = lineCount > 0 ? ` · ${lineCount} line${lineCount === 1 ? '' : 's'}` : '';
+  const code = typeof exit === 'number' ? String(exit) : '?';
+  return `exit ${code}${durText}${lineText}`;
+}
+
+/** exec: single { cmd, exit_code, ... } or multi { commands: [...], total }. */
+function summarizeExec(obj: Record<string, unknown>): string | null {
+  if (Array.isArray(obj.commands)) {
+    const total = asNumber(obj.total) ?? obj.commands.length;
+    const failed = obj.commands.filter(
+      (c) => c && typeof c === 'object' && (c as Record<string, unknown>).success === false,
+    ).length;
+    return failed > 0
+      ? `${total} commands · ${failed} failed`
+      : `${total} commands · all ok`;
+  }
+  if ('exit_code' in obj || 'timed_out' in obj || 'cancelled' in obj) {
+    return summarizeExecOne(obj);
+  }
+  return null;
+}
+
+export function summarizeToolResult(toolName: string | undefined, content: string): string | null {
+  if (!toolName) return null;
+  const family = toolName.includes('__') ? toolName.split('__').pop()! : toolName;
+  let data: unknown;
+  try {
+    data = JSON.parse(content);
+  } catch {
+    return null;
+  }
+  if (data === null || typeof data !== 'object' || Array.isArray(data)) return null;
+  const obj = data as Record<string, unknown>;
+
+  switch (family) {
+    case 'write': return summarizeWrite(obj);
+    case 'read': return summarizeRead(obj);
+    case 'edit': return summarizeEdit(obj);
+    case 'exec': return summarizeExec(obj);
+    default: return null;
+  }
+}

package/src/renderer/turn-injection.ts

@@ -33,6 +33,24 @@ function fmtN(n: number): string {
   return n.toLocaleString();
 }
 
+/**
+ * Annotate each injected id with its source (Stage B). Code-index hits get a
+ * ` [code]` tag; memory records are left bare so a memory-only line renders
+ * byte-identically to the pre-Stage-B output. `injectedSources` is parallel to
+ * `injectedIds`; a missing/short entry defaults to memory (no tag).
+ */
+function labelInjectedIds(entry: TurnInjectionEntry): string {
+  const sources = entry.injectedSources ?? [];
+  return entry.injectedIds
+    .map((id, i) => (sources[i] === 'code-index' ? `${id} [code]` : id))
+    .join(', ');
+}
+
+/** Honest one-clause note when a wired code index was queried but injected nothing this turn. */
+function codeSkipNote(entry: TurnInjectionEntry): string {
+  return entry.codeInjectionSkipped ? `, code skipped: ${entry.codeInjectionSkipped}` : '';
+}
+
 /** Render a single TurnInjectionRecord as one readable line. */
 export function formatTurnInjectionEntry(entry: TurnInjectionEntry): string {
   const backendTag = entry.embeddingBackend === 'fallback-lexical' ? ' [lexical fallback]' : '';
@@ -42,7 +60,8 @@ export function formatTurnInjectionEntry(entry: TurnInjectionEntry): string {
     const reasonText = entry.reason === 'no records cleared relevance floor'
       ? 'nothing injected this turn — nothing cleared the relevance floor'
       : `nothing injected this turn — ${entry.reason ?? 'unknown reason'}`;
-    return `  turn ${entry.turn}: ${reasonText}${backendTag} (considered ${entry.candidatesConsidered}, floor ${entry.relevanceFloor})`;
+    const codeConsidered = entry.codeCandidatesConsidered ? `, code considered ${entry.codeCandidatesConsidered}` : '';
+    return `  turn ${entry.turn}: ${reasonText}${backendTag} (considered ${entry.candidatesConsidered}${codeConsidered}, floor ${entry.relevanceFloor})${codeSkipNote(entry)}`;
   }
   const droppedStr = entry.droppedForBudget.length > 0
     ? `, dropped for budget: ${entry.droppedForBudget.join(', ')}`
@@ -52,8 +71,8 @@ export function formatTurnInjectionEntry(entry: TurnInjectionEntry): string {
   // (Wave-5 replay flagged the omission). Truncated to keep the line scannable.
   const queryStr = entry.query ? ` for ${JSON.stringify(truncateQuery(entry.query))}` : '';
   return (
-    `  turn ${entry.turn}: injected ${entry.injectedIds.join(', ')}${queryStr} ` +
-    `(~${fmtN(entry.tokenCost)}/${fmtN(entry.budgetTokens)} tok, floor ${entry.relevanceFloor})${droppedStr}${backendTag}`
+    `  turn ${entry.turn}: injected ${labelInjectedIds(entry)}${queryStr} ` +
+    `(~${fmtN(entry.tokenCost)}/${fmtN(entry.budgetTokens)} tok, floor ${entry.relevanceFloor})${droppedStr}${backendTag}${codeSkipNote(entry)}`
   );
 }
 

package/src/renderer/ui-factory.ts

@@ -1,21 +1,21 @@
 import { type Line, type Cell, createEmptyLine, createEmptyCell } from '../types/grid.ts';
 import { LAYOUT } from './layout.ts';
 import { VERSION } from '../version.ts';
-import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor } from '../utils/terminal-width.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor, joinPrioritizedSegments, type PrioritizedSegment } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
 import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
-import { GLYPHS, UI_TONES } from './ui-primitives.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 { calcSessionCost, isModelPriced } from '../export/cost-utils.ts';
 import { buildFooterTip, isAgentActive } from './footer-tips.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;
-/** Number of frames before rotating to the next thinking phrase (~30 seconds at 80ms/frame). */
-const PHRASE_ROTATION_FRAMES = 375;
 /**
  * Ms since the last STREAM_DELTA before the whimsical phrase rotation freezes
  * and createThinkingFragment shows an honest "stalled Ns" / "reconnecting"
@@ -72,13 +72,21 @@ function fmtCost(usd: number): string {
  * UIFactory - Generates standard UI fragments without needing Ink/React overhead.
  */
 export class UIFactory {
-  public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo): Line[] {
+  // `version` defaults to the live build VERSION; tests pass a pinned fixture so
+  // golden snapshots don't break on every release bump (version-decoupled goldens,
+  // mirroring the splash fixture-version pattern).
+  public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo, version: string = VERSION): Line[] {
     const lines: Line[] = [];
-    const CYAN = UI_TONES.accent.brand;
-    const GREY = UI_TONES.fg.dim;
-    const TITLE_COLOR = UI_TONES.fg.muted;
+    // Header/footer/thinking paint on the transparent terminal background, so
+    // they read chrome.* (light-terminal-aware) — NOT fg.*/state.*, which stay
+    // tuned for the opaque dark modal/panel boxes. Read live per render so a
+    // mode flip re-resolves without any module reload (see theme.ts).
+    const t = activeUiTones();
+    const CYAN = t.accent.brand;
+    const GREY = t.chrome.faint;
+    const TITLE_COLOR = t.chrome.label;
     const brand = ` GoodVibes `;
-    const ver = `v${VERSION} `;
+    const ver = `v${version} `;
     const stats = ` ${model} `;
     const prov = `(${provider}) `;
     const line = createEmptyLine(width);
@@ -110,11 +118,11 @@ export class UIFactory {
     }
     // Build git info segment
     let gitStr = '';
-    let gitFg: string = UI_TONES.fg.dim;
+    let gitFg: string = t.chrome.faint;
     if (gitInfo) {
       gitStr = buildGitSegment(gitInfo).text;
       if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
-        gitFg = UI_TONES.state.warn; // yellow when dirty or out-of-sync
+        gitFg = t.chrome.warn; // yellow when dirty or out-of-sync
       }
     }
     const rightSideText = stats + prov;
@@ -124,7 +132,7 @@ export class UIFactory {
     for (const char of stats) { if (rightX < width) line[rightX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
     for (const char of prov) { if (rightX < width) line[rightX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
     lines.push(line);
-    lines.push(this.stringToLine('━'.repeat(width), width, { fg: UI_TONES.fg.dim }));
+    lines.push(this.stringToLine('━'.repeat(width), width, { fg: t.chrome.faint }));
     return lines;
   }
 
@@ -134,12 +142,16 @@ export class UIFactory {
    */
   public static createMessageBar(
     width: number, text: string,
-    bgColor: string = '#2a2a2a', textColor: string = UI_TONES.fg.secondary, prefixStr: string = ' › ',
+    bgColor: string = '#2a2a2a', textColor: string = activeUiTones().fg.secondary, prefixStr: string = ' › ',
     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: UI_TONES.state.reasoning,
+      prefixFg: activeUiTones().state.reasoning,
       text: textColor,
       bodyBg: bgColor,
       strikethrough,
@@ -150,10 +162,11 @@ export class UIFactory {
    * createQueuedMessageFragment - Renders a dimmed message bar for queued prompts.
    */
   public static createQueuedMessageFragment(width: number, text: string): Line[] {
+    const t = activeUiTones();
     return renderConversationFragment(text, width, {
       prefix: ' (...) ',
-      prefixFg: UI_TONES.state.reasoning,
-      text: UI_TONES.fg.dim,
+      prefixFg: t.state.reasoning,
+      text: t.fg.dim,
       bodyBg: '#1a1a1a',
       dim: true,
     });
@@ -162,7 +175,7 @@ export class UIFactory {
   public static createFooter(
     width: number,
     prompt: string,
-    usage: { up: number; down: number; max?: number },
+    usage: { up: number; down: number; max?: number; fleetCostUsd?: number | null },
     showExitNotice: boolean,
     lastCopyTime: number,
     model?: string,
@@ -182,6 +195,9 @@ export class UIFactory {
     composerFlags?: readonly string[],
     composerPendingRisk?: 'none' | 'approval-wait' | 'shell' | 'command' | 'remote',
     compact: boolean = false,
+    // S3d: honest cross-surface spine posture. Defined ONLY in adopted-daemon
+    // mode (undefined in embedded/local), so the segment is absent otherwise.
+    sessionSpineStatus?: 'online' | 'offline',
   ): Line[] {
     const lines: Line[] = [];
     const promptLines = prompt.split('\n');
@@ -245,6 +261,21 @@ export class UIFactory {
         }
       }
 
+      // UX-C 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) {
@@ -261,10 +292,17 @@ export class UIFactory {
         if (cursorColOnLine >= text.length) {
           // Hint starts one cell after the cursor block
           const hintStartX = boxStartX + 2 + prefix.length + text.length + 1;
-          const hintText = ' ' + commandArgsHint;
+          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 >= boxStartX + boxWidth - 2) break;
+            if (hx >= hintLimit) break;
             contentLine[hx] = { char: ch, fg: '238', bg: BG_COLOR, bold: false, dim: true, underline: false, italic: false, strikethrough: false };
             hx++;
           }
@@ -290,16 +328,19 @@ export class UIFactory {
     // --- 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 }> = [];
-    if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: UI_TONES.state.info, bold: true });
+    if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: t.state.info, bold: true });
     if (composerPendingRisk && composerPendingRisk !== 'none') {
       const riskColor = composerPendingRisk === 'approval-wait'
-        ? UI_TONES.state.warn
+        ? t.chrome.warn
         : composerPendingRisk === 'shell'
-          ? UI_TONES.state.bad
+          ? t.chrome.bad
           : composerPendingRisk === 'remote'
-            ? '#a78bfa'
-            : UI_TONES.state.warn;
+            ? t.chrome.remote
+            : t.chrome.warn;
       composerTokens.push({ text: ` risk:${composerPendingRisk} `, fg: riskColor, bold: true });
     }
     if (composerStatus && composerStatus !== 'idle') composerTokens.push({ text: ` state:${composerStatus} `, fg: '244', dim: true });
@@ -329,7 +370,7 @@ export class UIFactory {
     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 };
+    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;
@@ -340,12 +381,29 @@ export class UIFactory {
     // 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 costSegment = model
+    const mainCostStr = model
       ? isModelPriced(model)
-        ? `${tokenSep}~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}`
-        : `${tokenSep}~n/a`
-      : '';
-    const tokenLine = ` Token Usage [ Input: ${fmtNum(inp)}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)}${costSegment} ]`;
+        ? `~$${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 }));
@@ -353,7 +411,9 @@ export class UIFactory {
     if (!compact && contextWindow && contextWindow > 0) {
       const ctxTokens = lastInputTokens ?? 0;
       const label = '   Context Usage: ';
-      const suffix = ` [ ${fmtNum(ctxTokens)} / ${fmtNum(contextWindow)} ]`;
+      // "—" 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.
@@ -370,19 +430,30 @@ export class UIFactory {
       const displayDir = workingDir && home && workingDir.startsWith(home)
         ? '~' + workingDir.slice(home.length)
         : workingDir ?? '';
-      const ctxParts: string[] = [];
-      if (displayDir) ctxParts.push(displayDir);
+      // 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(model + (provider ? ` (${provider})` : ''));
+        ctxParts.push({ text: model + (provider ? ` (${provider})` : ''), priority: 0 });
       }
-      if (toolCount) ctxParts.push(`${toolCount} tools`);
+      // S3d: cross-surface spine posture — plain words, no blame. Adopted mode only.
+      if (sessionSpineStatus) ctxParts.push({ text: `spine:${sessionSpineStatus}`, priority: 1 });
+      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.
-      if (hitlMode) ctxParts.push(`notify:${hitlMode}`);
-      const ctxLine = '   ' + ctxParts.join(`  ${GLYPHS.navigation.pipeSeparator}  `);
-      lines.push(this.stringToLine(truncateDisplay(ctxLine, width), width, { fg: '240', dim: true }));
+      // 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 !!! `;
@@ -403,7 +474,7 @@ export class UIFactory {
         for (const ch of dangerWarn) {
           if (col >= width) break;
           const cw = getDisplayWidth(ch);
-          line[col] = { char: ch, fg: UI_TONES.state.bad, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
+          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;
         }
@@ -413,33 +484,20 @@ export class UIFactory {
     return lines;
   }
 
-  /** Rotating thinking phrases — vaporwave / good vibes themed. */
-  private static readonly THINKING_PHRASES = [
-    'Thinking...',
-    'Vibing...',
-    'Manifesting...',
-    'Channeling energy...',
-    'Tuning frequencies...',
-    'Riding the wave...',
-    'Aligning chakras...',
-    'Entering flow state...',
-    'Consulting the void...',
-    'Absorbing aesthetics...',
-    'Synthesizing vibes...',
-    'Transcending...',
-    'Dreaming in neon...',
-    'Parsing the cosmos...',
-    'Loading good vibes...',
-    'Meditating...',
-    'Catching a vibe...',
-    'Harmonizing...',
-    'Feeling it...',
-    'In the zone...',
-  ];
+  // W6-P1: 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, landed by
+  // W4-S1, already adopted by the agent in W4-R4) — 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 to purple (matches splash). */
-  private static readonly THINK_GRADIENT_START = UI_TONES.accent.gradientStart;
-  private static readonly THINK_GRADIENT_END = UI_TONES.accent.gradientEnd;
+  // 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.
 
   /**
    * Per-frame stall info from stream metrics — computed from lastDeltaAtMs every render (not
@@ -478,25 +536,36 @@ 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): Line[] {
+  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), and show an
-    // honest label instead: the SDK's reconnect attempt/maxAttempts once
-    // STREAM_RETRY is available, else a plain elapsed-silence readout.
+    // 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() (W6-P1;
+    // mirrors the agent's W4-R4 adoption). Precedence matches the contract:
+    // approval > reconnecting > pre-first-token > stalled > thinking.
     const isStalled = stallInfo !== undefined && stallInfo.msSinceLastDelta >= THINKING_STALL_FREEZE_MS;
-    let phrase: string;
-    if (stallInfo?.reconnect) {
-      phrase = `Reconnecting (attempt ${stallInfo.reconnect.attempt}/${stallInfo.reconnect.maxAttempts})...`;
-    } else if (isStalled) {
-      phrase = `Stalled ${Math.floor(stallInfo.msSinceLastDelta / 1000)}s...`;
-    } else {
-      // Rotate phrase every ~30 seconds (frame ticks at 80ms, so ~375 frames)
-      const phraseIndex = Math.floor(frame / PHRASE_ROTATION_FRAMES) % this.THINKING_PHRASES.length;
-      phrase = this.THINKING_PHRASES[phraseIndex];
-    }
-    const speedSuffix = (tokenSpeed !== undefined && tokenSpeed > 0) ? ` (${Math.round(tokenSpeed)} tok/s)` : '';
+    let state: WaitingState;
+    if (approvalPending) state = 'approval';
+    else if (stallInfo?.reconnect) state = 'reconnecting';
+    else if (isStalled && (outputTokens ?? 0) === 0) state = 'pre-first-token';
+    else if (isStalled) state = 'stalled';
+    else state = 'thinking';
+    const phrase = 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 = (ttftMs !== undefined && ttftMs > 0) ? ` ttft:${ttftMs}ms` : '';
+    const ttftSuffix = (!approvalPending && ttftMs !== undefined && ttftMs > 0) ? ` ttft:${ttftMs}ms` : '';
     const text = `  ${spinner} ${phrase}${speedSuffix}${elapsedSuffix}${ttftSuffix} `;
 
     const textWidth = Math.max(1, getDisplayWidth(text) - 1);
@@ -506,7 +575,7 @@ export class UIFactory {
       const gradientPos = raw <= 0.5 ? raw * 2 : (1 - raw) * 2;
       return {
         text: char,
-        fg: interpolateColor(this.THINK_GRADIENT_START, this.THINK_GRADIENT_END, gradientPos),
+        fg: interpolateColor(tones.accent.gradientStart, tones.accent.gradientEnd, gradientPos),
         bold: true,
       };
     });
@@ -514,7 +583,7 @@ export class UIFactory {
       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: UI_TONES.accent.brand });
+      segments.push({ text: `out ${fmtNum(outTok)}`, fg: tones.accent.brand });
     }
     const line = createEmptyLine(width);
     let col = 1;
@@ -554,7 +623,7 @@ export class UIFactory {
         if (px >= width) break;
         previewLine[px] = {
           char: ch,
-          fg: UI_TONES.state.info,
+          fg: tones.state.info,
           bg: '',
           bold: true,
           dim: false,