@pellux/goodvibes-tui 1.1.0 → 1.9.0

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,

package/src/renderer/ui-primitives.ts

@@ -1,134 +1,35 @@
-export const GLYPHS = {
-  frame: {
-    topLeft: '┌',
-    topRight: '┐',
-    bottomLeft: '└',
-    bottomRight: '┘',
-    horizontal: '─',
-    vertical: '│',
-    teeLeft: '├',
-    teeRight: '┤',
-    teeTop: '┬',
-    teeBottom: '┴',
-    cross: '┼',
-  },
-  surface: {
-    top: '▄',
-    bottom: '▀',
-    cursor: '█',
-    altCursor: '▌',
-  },
-  navigation: {
-    selected: '▸',
-    collapsed: '▸',
-    expanded: '▾',
-    up: '↑',
-    down: '↓',
-    moreAbove: '▲',
-    moreBelow: '▼',
-    next: '→',
-    back: '←',
-    pipeSeparator: '│',
-  },
-  status: {
-    success: '✓',
-    failure: '✕',
-    pending: '•',
-    active: '●',
-    idle: '◌',
-    info: '○',
-    warn: '⚠',
-    blocked: '⊘',
-    skipped: '◇',
-    review: '◈',
-    retry: '↻',
-    handoff: '⇢',
-    reference: '↗',
-    partial: '◐',
-    dualPane: '◆',
-    star: '★',
-  },
-  meter: {
-    filled: '█',
-    medium: '▓',
-    light: '▒',
-    empty: '░',
-    spark: ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'],
-  },
-} as const;
+// ---------------------------------------------------------------------------
+// ui-primitives.ts — glyph registry + tone-token table.
+//
+// W6-P1: these four tables (GLYPHS, UI_TONES, DIFF_TONES, SPINNER_FRAMES) are
+// no longer minted locally. They are the SDK presentation contract
+// (@pellux/goodvibes-sdk/platform/presentation, landed by W4-S1 and already
+// adopted by the agent in W4-R4), consumed here so the TUI and the agent
+// share ONE source (Mike's move-to-SDK ruling — machinery needed by 2+
+// surfaces => SDK). The TUI was the reference these values were lifted from
+// verbatim, so this swap is byte-identical. See
+// docs/decisions/2026-07-05-presentation-contract-sdk-extraction.md in the SDK.
+//
+// Re-exported under the historical names (GLYPHS, UI_TONES) so every existing
+// importer keeps working with no call-site churn. UI_TONES is the dark-mode
+// tone table (== resolveTones('dark')); light is resolved via theme.ts's
+// activeUiTones() / resolveUiTones(), which composes the mode dimension over
+// this dark constant unchanged.
+// ---------------------------------------------------------------------------
+
+import {
+  GLYPHS,
+  TONE_TOKENS,
+  DIFF_TONES,
+  SPINNER_FRAMES,
+} from '@pellux/goodvibes-sdk/platform/presentation';
+
+export { GLYPHS, DIFF_TONES, SPINNER_FRAMES };
 
 /**
  * UI_TONES — the single chrome/color-token source for src/renderer and
  * src/panels. Concrete (dark-mode) values; resolveUiTones(mode) in theme.ts
- * is the single mode-resolved read path — this object is the 'dark' entry.
- */
-export const UI_TONES = {
-  fg: {
-    primary: '#e2e8f0',
-    secondary: '#cbd5e1',
-    muted: '#94a3b8',
-    dim: '#475569',
-    inverse: '#0f172a',
-    /** Empty-state / placeholder foreground (formerly DEFAULT_PANEL_PALETTE.empty literal). */
-    empty: '#334155',
-  },
-  bg: {
-    base: '#11131a',
-    surface: '#161a22',
-    title: '#0f172a',
-    section: '#18202b',
-    summary: '#1b2430',
-    selected: '#223049',
-    input: '#1e293b',
-    warning: '#2b2116',
-    error: '#2a161b',
-    success: '#14241b',
-    /** Fullscreen/shell footer background. */
-    footer: '#111827',
-  },
-  state: {
-    info: '#38bdf8',
-    good: '#22c55e',
-    warn: '#f59e0b',
-    bad: '#ef4444',
-    blocked: '#f97316',
-    active: '#60a5fa',
-    /** Single canonical reasoning/thinking purple (replaces #9945FF and ad-hoc purples). */
-    reasoning: '#a855f7',
-  },
-  accent: {
-    browser: '#7dd3fc',
-    control: '#22d3ee',
-    inspector: '#c4b5fd',
-    workflow: '#fbbf24',
-    conversation: '#93c5fd',
-    /** Neon brand accent — header/splash/thinking gradient only. */
-    brand: '#00ffff',
-    gradientStart: '#00ffff',
-    gradientEnd: '#d000ff',
-  },
-  /** Canonical border stroke color for fullscreen/panel chrome. */
-  border: '#64748b',
-} as const;
-
-/**
- * Diff surface accent color shared across the three diff-rendering surfaces —
- * the conversation diff view (diff-view.ts), the file diff panel
- * (diff-panel.ts), and the git panel's inline diff (git-panel.ts). Hunk-header
- * blue has no matching UI_TONES.state/accent role, so WO-204 gives it one
- * named token here (value converged on diff-panel.ts's pre-existing hunk
- * color, the only one of the three surfaces that predates this token; add/del
- * on all three surfaces already converge on UI_TONES.state.good/bad).
+ * is the single mode-resolved read path — this object is the 'dark' entry
+ * (== resolveTones('dark') from the SDK presentation contract).
  */
-export const DIFF_TONES = {
-  // add/del carry diff-panel.ts's shipped colors: the diff panel is the only
-  // diff surface users have ever seen (diff-view.ts was unwired from v0.9.6
-  // until WO-204), so its look is the reference — the conversation surface
-  // adopts it, never the other way around.
-  add: '#00ff88',
-  del: '#ff4444',
-  hunk: '#88aaff',
-} as const;
-
-/** Single spinner-frame source — layout.ts and progress.ts both re-export this. */
-export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const;
+export const UI_TONES = TONE_TOKENS;