@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/renderer/tab-strip.ts

@@ -21,46 +21,148 @@ export interface TabStripStyle {
   readonly trailingFg?: string;
 }
 
+/** Absolute column range a rendered tab occupies, for click hit-testing. */
+export interface TabHitRegion {
+  /** Index into the original `tabs` array. */
+  readonly index: number;
+  /** First column (inclusive) the tab occupies on the line. */
+  readonly startCol: number;
+  /** Last column (exclusive) the tab occupies on the line. */
+  readonly endCol: number;
+}
+
 export interface TabStripConfig {
   readonly width: number;
   readonly tabs: readonly TabStripItem[];
   readonly style: TabStripStyle;
   readonly prefixLabel?: string;
   readonly suffixLabel?: string;
+  /** Right-side overflow glyph (more tabs after the window). Default '›'. */
   readonly overflowIndicator?: string;
+  /** Left-side overflow glyph (more tabs before the window). Default '‹'. */
+  readonly overflowIndicatorLeft?: string;
+  /**
+   * Optional callback invoked with the absolute column ranges of each rendered
+   * tab. Used by the compositor to hit-test mouse clicks onto tabs. Additive —
+   * the function still returns a `Line` so existing callers are unaffected.
+   */
+  readonly onLayout?: (regions: readonly TabHitRegion[]) => void;
+}
+
+const SEPARATOR = '│';
+
+interface WindowResult {
+  segments: StyledPanelSegment[];
+  /** Per-tab column ranges relative to the start of the tab block. */
+  regions: Array<{ index: number; startCol: number; endCol: number }>;
+  overflowLeft: boolean;
+  overflowRight: boolean;
 }
 
+/**
+ * Build the visible tab segments, windowed so the ACTIVE tab is always shown.
+ *
+ * Tabs are laid out left-to-right, but when they don't all fit we keep a
+ * contiguous window that contains the active tab and grow it outward (biased
+ * toward following tabs) until the budget is exhausted. Left/right overflow is
+ * reported so the caller can render `‹`/`›` indicators.
+ */
 function makeSegments(
   tabs: readonly TabStripItem[],
   style: TabStripStyle,
   maxWidth: number,
-): { segments: StyledPanelSegment[]; hasOverflow: boolean } {
-  const segments: StyledPanelSegment[] = [];
-  let used = 0;
-  let hasOverflow = false;
-  for (const tab of tabs) {
-    const separatorWidth = getDisplayWidth('│');
-    const labelText = tab.active ? `[${tab.label}]` : tab.label;
-    const labelWidth = getDisplayWidth(labelText);
-    const entryWidth = separatorWidth + labelWidth + 1;
-    if (used + entryWidth > maxWidth) {
-      hasOverflow = true;
-      break;
+  indicatorWidth: number,
+): WindowResult {
+  const empty: WindowResult = { segments: [], regions: [], overflowLeft: false, overflowRight: false };
+  if (tabs.length === 0 || maxWidth <= 0) return empty;
+
+  const sepWidth = getDisplayWidth(SEPARATOR);
+  // Per-tab entry width: leading separator + (bracketed if active) label + trailing space.
+  const labelText = (tab: TabStripItem) => (tab.active ? `[${tab.label}]` : tab.label);
+  const entryWidths = tabs.map((tab) => sepWidth + getDisplayWidth(labelText(tab)) + 1);
+
+  const activeIndex = Math.max(0, tabs.findIndex((t) => t.active));
+  const n = tabs.length;
+  const closing = sepWidth; // trailing │ after the last visible tab
+  const totalAll = entryWidths.reduce((a, b) => a + b, 0) + closing;
+
+  let start = activeIndex;
+  let end = activeIndex; // inclusive
+  let used = entryWidths[activeIndex] + closing;
+
+  if (totalAll <= maxWidth) {
+    // Everything fits — show all tabs, no windowing.
+    start = 0;
+    end = n - 1;
+  } else {
+    // Need windowing. Reserve room for indicators on whichever side still has
+    // hidden tabs; the reserve is recomputed each step so reaching an edge
+    // frees its indicator column.
+    const budget = maxWidth;
+    let leftDone = start === 0;
+    let rightDone = end === n - 1;
+    let preferRight = true;
+
+    const fits = (extra: number, nextStart: number, nextEnd: number) => {
+      const leftRes = nextStart > 0 ? indicatorWidth : 0;
+      const rightRes = nextEnd < n - 1 ? indicatorWidth : 0;
+      return used + extra + leftRes + rightRes <= budget;
+    };
+
+    while (!leftDone || !rightDone) {
+      const goRight = !rightDone && (preferRight || leftDone);
+      if (goRight) {
+        const ne = end + 1;
+        if (fits(entryWidths[ne], start, ne)) {
+          end = ne;
+          used += entryWidths[ne];
+          if (end === n - 1) rightDone = true;
+          preferRight = false;
+        } else {
+          rightDone = true;
+        }
+      } else if (!leftDone) {
+        const ns = start - 1;
+        if (fits(entryWidths[ns], ns, end)) {
+          start = ns;
+          used += entryWidths[ns];
+          if (start === 0) leftDone = true;
+          preferRight = true;
+        } else {
+          leftDone = true;
+        }
+      } else {
+        break;
+      }
     }
-    segments.push({ text: '│', fg: style.separatorFg });
+  }
+
+  const segments: StyledPanelSegment[] = [];
+  const regions: Array<{ index: number; startCol: number; endCol: number }> = [];
+  let col = 0;
+  for (let i = start; i <= end; i++) {
+    const tab = tabs[i];
+    const text = labelText(tab);
+    const entryStart = col;
+    segments.push({ text: SEPARATOR, fg: style.separatorFg });
     segments.push({
-      text: `${labelText} `,
+      text: `${text} `,
       fg: tab.active ? style.activeFg : style.inactiveFg,
       bg: tab.active ? style.activeBg : style.inactiveBg,
       bold: tab.active ? (style.activeBold ?? false) : false,
     });
-    used += entryWidth;
+    col += entryWidths[i];
+    regions.push({ index: i, startCol: entryStart, endCol: col });
   }
+  // Closing separator.
+  segments.push({ text: SEPARATOR, fg: style.separatorFg });
 
-  if (segments.length > 0 && used + getDisplayWidth('│') <= maxWidth) {
-    segments.push({ text: '│', fg: style.separatorFg });
-  }
-  return { segments, hasOverflow };
+  return {
+    segments,
+    regions,
+    overflowLeft: start > 0,
+    overflowRight: end < n - 1,
+  };
 }
 
 export function renderTabStrip(config: TabStripConfig): Line {
@@ -70,18 +172,18 @@ export function renderTabStrip(config: TabStripConfig): Line {
     style,
     prefixLabel,
     suffixLabel,
-  overflowIndicator = '›',
+    overflowIndicator = '›',
+    overflowIndicatorLeft = '‹',
+    onLayout,
   } = config;
 
+  const prefixWidth = prefixLabel ? getDisplayWidth(prefixLabel) + 1 : 0;
   const reservedSuffixWidth = suffixLabel ? getDisplayWidth(suffixLabel) : 0;
-  const reservedOverflowWidth = getDisplayWidth(overflowIndicator);
-  const maxTabWidth = Math.max(
-    0,
-    width
-      - (prefixLabel ? getDisplayWidth(prefixLabel) + 1 : 0)
-      - (suffixLabel ? reservedSuffixWidth : 0)
-      - reservedOverflowWidth,
+  const indicatorWidth = Math.max(
+    getDisplayWidth(overflowIndicator),
+    getDisplayWidth(overflowIndicatorLeft),
   );
+  const maxTabWidth = Math.max(0, width - prefixWidth - reservedSuffixWidth);
 
   const baseSegments: StyledPanelSegment[] = [];
   if (prefixLabel) {
@@ -94,15 +196,27 @@ export function renderTabStrip(config: TabStripConfig): Line {
     baseSegments.push({ text: ' ', fg: style.separatorFg });
   }
 
-  const { segments: tabSegments, hasOverflow } = makeSegments(tabs, style, maxTabWidth);
+  const { segments: tabSegments, regions, overflowLeft, overflowRight } =
+    makeSegments(tabs, style, maxTabWidth, indicatorWidth);
+
+  const leftSegments: StyledPanelSegment[] = [];
+  if (overflowLeft) {
+    leftSegments.push({ text: overflowIndicatorLeft, fg: style.overflowFg ?? style.separatorFg });
+  }
+
   const suffixSegments: StyledPanelSegment[] = [];
-  if (hasOverflow) suffixSegments.push({ text: overflowIndicator, fg: style.overflowFg ?? style.separatorFg });
+  if (overflowRight) {
+    suffixSegments.push({ text: overflowIndicator, fg: style.overflowFg ?? style.separatorFg });
+  }
   if (suffixLabel) {
-    suffixSegments.push({
-      text: suffixLabel,
-      fg: style.trailingFg ?? style.inactiveFg,
-    });
+    suffixSegments.push({ text: suffixLabel, fg: style.trailingFg ?? style.inactiveFg });
+  }
+
+  // Report absolute hit regions: prefix + optional left indicator, then tabs.
+  if (onLayout) {
+    const offset = prefixWidth + (overflowLeft ? getDisplayWidth(overflowIndicatorLeft) : 0);
+    onLayout(regions.map((r) => ({ index: r.index, startCol: offset + r.startCol, endCol: offset + r.endCol })));
   }
 
-  return buildStyledPanelLine(width, [...baseSegments, ...tabSegments, ...suffixSegments]);
+  return buildStyledPanelLine(width, [...baseSegments, ...leftSegments, ...tabSegments, ...suffixSegments]);
 }

package/src/renderer/theme.ts

@@ -14,8 +14,19 @@
  * IMPORTANT: inline code has NO background token. The bg:#1a1a1a hardcode
  * that previously existed caused a near-black box on light terminals.
  * Differentiate inline code via inlineCodeFg + bold only; bg inherits terminal.
+ *
+ * resolveUiTones(mode) is the sibling read path for CHROME tokens (UI_TONES
+ * in ui-primitives.ts — panel/modal/overlay/fullscreen backgrounds, borders,
+ * status colours). It composes the same ThemeMode dimension so that
+ * DEFAULT_PANEL_PALETTE, DEFAULT_STYLE, FULLSCREEN_PALETTE and
+ * DEFAULT_OVERLAY_PALETTE all read through ONE mode-resolved path instead of
+ * importing the static UI_TONES constant directly. Mode stays 'dark'
+ * everywhere until the terminal-bg-probe lands (see WO-001) — the light
+ * entry is type-complete, not a shipped light theme.
  */
 
+import { UI_TONES } from './ui-primitives.ts';
+
 /** Background mode — dark is the safe default until terminal-bg-probe lands. */
 export type ThemeMode = 'dark' | 'light';
 
@@ -78,9 +89,9 @@ const DARK: ThemeTokens = {
   searchCurrentFg: '#000000',
   strikethrough:   '244',
   blockquote:      '244',
-  assistantHeader: '#22d3ee',
-  reasoningAccent: '#a855f7',
-  toolAccent:      '#38bdf8',
+  assistantHeader: UI_TONES.accent.control,
+  reasoningAccent: UI_TONES.state.reasoning,
+  toolAccent:      UI_TONES.state.info,
   collapsedBodyBg: '#1a1a1a',
   checkboxChecked: '#22c55e',
   errorBarBg:      '#3a1a1a',
@@ -156,3 +167,49 @@ Object.freeze(LIGHT);
  * Frozen — do not mutate.
  */
 export const DARK_THEME: Readonly<ThemeTokens> = DARK;
+
+// ---------------------------------------------------------------------------
+// Chrome tokens (UI_TONES) — mode-resolved sibling to resolveTheme().
+//
+// UI_TONES (ui-primitives.ts) is the dark entry. The light entry mirrors
+// dark for every role that has no light-appropriate equivalent yet — the
+// WO-001 deliverable is the mode dimension and single read path, not a
+// shipped light chrome theme (see module doc comment above).
+// ---------------------------------------------------------------------------
+
+/** Recursively widen the `as const` literal leaves of UI_TONES to `string`
+ * so mode variants (e.g. UI_TONES_LIGHT) can assign different colour
+ * values without fighting TypeScript's literal-type inference. */
+type DeepWidenToString<T> = T extends string ? string : { [K in keyof T]: DeepWidenToString<T[K]> };
+
+export type UiToneTokens = DeepWidenToString<typeof UI_TONES>;
+
+const UI_TONES_LIGHT: UiToneTokens = {
+  ...UI_TONES,
+  state: {
+    ...UI_TONES.state,
+    info: LIGHT.toolAccent,
+    reasoning: LIGHT.reasoningAccent,
+  },
+  accent: {
+    ...UI_TONES.accent,
+    brand: LIGHT.heading1,
+    gradientStart: LIGHT.heading1,
+    gradientEnd: LIGHT.reasoningAccent,
+  },
+};
+
+Object.freeze(UI_TONES_LIGHT.state);
+Object.freeze(UI_TONES_LIGHT.accent);
+Object.freeze(UI_TONES_LIGHT);
+
+/**
+ * resolveUiTones — Return the chrome (panel/modal/overlay/fullscreen) token
+ * set for the given background mode. Single read path for UI_TONES; the
+ * 'dark' resolution is byte-identical to the UI_TONES constant.
+ *
+ * Call with 'dark' (the safe default) until terminal-bg-probe lands.
+ */
+export function resolveUiTones(mode: ThemeMode): Readonly<UiToneTokens> {
+  return mode === 'light' ? UI_TONES_LIGHT : UI_TONES;
+}

package/src/renderer/ui-factory.ts

@@ -4,8 +4,12 @@ import { VERSION } from '../version.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
 import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
-import { GLYPHS } from './ui-primitives.ts';
+import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 import { formatElapsed } from '../utils/format-elapsed.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
+import { computeContextUsage } from '../core/context-usage.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { buildFooterTip, isAgentActive } from './footer-tips.ts';
 
 /** Number of frames before the animated gradient completes one full cycle. */
 const GRADIENT_CYCLE_FRAMES = 50;
@@ -30,11 +34,15 @@ function buildGitSegment(gitInfo: GitHeaderInfo): { text: string; width: number
 
 /** Format a number: up to 999, then 1.0k, 1.0M, 1.0B, 1.0T */
 function fmtNum(n: number): string {
-  if (n < 1000) return String(n);
-  if (n < 1_000_000) return (n / 1000).toFixed(1) + 'k';
-  if (n < 1_000_000_000) return (n / 1_000_000).toFixed(1) + 'M';
-  if (n < 1_000_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
-  return (n / 1_000_000_000_000).toFixed(1) + 'T';
+  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);
 }
 
 /**
@@ -43,9 +51,9 @@ function fmtNum(n: number): string {
 export class UIFactory {
   public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo): Line[] {
     const lines: Line[] = [];
-    const CYAN = '#00ffff';
-    const GREY = '244';
-    const TITLE_COLOR = '250';
+    const CYAN = UI_TONES.accent.brand;
+    const GREY = UI_TONES.fg.dim;
+    const TITLE_COLOR = UI_TONES.fg.muted;
     const brand = ` GoodVibes `;
     const ver = `v${VERSION} `;
     const stats = ` ${model} `;
@@ -79,11 +87,11 @@ export class UIFactory {
     }
     // Build git info segment
     let gitStr = '';
-    let gitFg = '238';
+    let gitFg: string = UI_TONES.fg.dim;
     if (gitInfo) {
       gitStr = buildGitSegment(gitInfo).text;
       if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
-        gitFg = '220'; // yellow when dirty or out-of-sync
+        gitFg = UI_TONES.state.warn; // yellow when dirty or out-of-sync
       }
     }
     const rightSideText = stats + prov;
@@ -93,7 +101,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: '244' }));
+    lines.push(this.stringToLine('━'.repeat(width), width, { fg: UI_TONES.fg.dim }));
     return lines;
   }
 
@@ -103,12 +111,12 @@ export class UIFactory {
    */
   public static createMessageBar(
     width: number, text: string,
-    bgColor = '#2a2a2a', textColor = '252', prefixStr = ' › ',
+    bgColor: string = '#2a2a2a', textColor: string = UI_TONES.fg.secondary, prefixStr: string = ' › ',
     strikethrough = false
   ): Line[] {
     return renderConversationFragment(text, width, {
       prefix: prefixStr,
-      prefixFg: '135',
+      prefixFg: UI_TONES.state.reasoning,
       text: textColor,
       bodyBg: bgColor,
       strikethrough,
@@ -121,8 +129,8 @@ export class UIFactory {
   public static createQueuedMessageFragment(width: number, text: string): Line[] {
     return renderConversationFragment(text, width, {
       prefix: ' (...) ',
-      prefixFg: '135',
-      text: '240',
+      prefixFg: UI_TONES.state.reasoning,
+      text: UI_TONES.fg.dim,
       bodyBg: '#1a1a1a',
       dim: true,
     });
@@ -150,6 +158,7 @@ export class UIFactory {
     composerStatus?: string,
     composerFlags?: readonly string[],
     composerPendingRisk?: 'none' | 'approval-wait' | 'shell' | 'command' | 'remote',
+    compact: boolean = false,
   ): Line[] {
     const lines: Line[] = [];
     const promptLines = prompt.split('\n');
@@ -255,7 +264,9 @@ export class UIFactory {
       }
     }
     lines.push(bottomLine);
-    lines.push(createBaseLine());
+    // --- 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.
     const composerTokens: Array<{ text: string; fg: string; bold?: boolean; dim?: boolean }> = [];
     if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: '#38bdf8', bold: true });
     if (composerPendingRisk && composerPendingRisk !== 'none') {
@@ -270,7 +281,7 @@ export class UIFactory {
     }
     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 (composerTokens.length > 0) {
+    if (!compact && composerTokens.length > 0) {
       const postureLine = createBaseLine();
       let px = 2;
       for (const token of composerTokens) {
@@ -291,10 +302,10 @@ export class UIFactory {
         if (px >= width) break;
       }
       lines.push(postureLine);
-      lines.push(createBaseLine());
     }
     const isRecentlyCopied = Date.now() - lastCopyTime < 2000;
-    // Token usage line
+    // 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 inp = u.input ?? u.up ?? 0;
     const out = u.output ?? u.down ?? 0;
@@ -302,26 +313,28 @@ export class UIFactory {
     const cw = u.cacheWrite ?? 0;
     const total = inp + out + cr + cw;
     const tokenSep = ` ${GLYPHS.navigation.pipeSeparator} `;
-    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)} ]`;
+    const costSegment = model ? `${tokenSep}~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}` : '';
+    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} ]`;
     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
-    if (contextWindow && contextWindow > 0) {
+    // Context usage progress bar — suppressed in compact mode.
+    if (!compact && contextWindow && contextWindow > 0) {
       const ctxTokens = lastInputTokens ?? 0;
       const label = '   Context Usage: ';
       const suffix = ` [ ${fmtNum(ctxTokens)} / ${fmtNum(contextWindow)} ]`;
       const barWidth = Math.max(10, Math.min(30, width - getDisplayWidth(label) - getDisplayWidth(suffix) - 8));
-      const ctxPct = Math.min(1, ctxTokens / contextWindow);
+      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(createBaseLine());
       lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix, thresholdFraction));
     }
-    // Context info line (working dir, model+provider, tools)
-    if (workingDir || model) {
+    // 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)
@@ -333,19 +346,16 @@ export class UIFactory {
       }
       if (toolCount) ctxParts.push(`${toolCount} tools`);
       if (hitlMode) ctxParts.push(`hitl:${hitlMode}`);
-      if (composerMode) ctxParts.push(`mode:${composerMode}`);
-      if (composerStatus && composerStatus !== 'idle') ctxParts.push(`status:${composerStatus}`);
-      if (composerFlags && composerFlags.length > 0) ctxParts.push(composerFlags.join(','));
       const ctxLine = '   ' + ctxParts.join(`  ${GLYPHS.navigation.pipeSeparator}  `);
-      lines.push(createBaseLine());
       lines.push(this.stringToLine(truncateDisplay(ctxLine, width), width, { fg: '240', dim: true }));
-      lines.push(createBaseLine());
     }
     if (showExitNotice) {
       const notice = `   !!! Press Ctrl+C again to exit !!! `;
       lines.push(this.stringToLine(fitDisplay(notice, width), width, { fg: '196', bold: true }));
     } else {
-      const help = `   /help for commands  -  Ctrl+C to quit `;
+      // 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);
@@ -365,7 +375,6 @@ export class UIFactory {
       }
       lines.push(line);
     }
-    lines.push(createBaseLine());
     return lines;
   }
 
@@ -394,8 +403,8 @@ export class UIFactory {
   ];
 
   /** Gradient colors for thinking text — cyan to purple (matches splash). */
-  private static readonly THINK_GRADIENT_START = '#00ffff';
-  private static readonly THINK_GRADIENT_END = '#d000ff';
+  private static readonly THINK_GRADIENT_START = UI_TONES.accent.gradientStart;
+  private static readonly THINK_GRADIENT_END = UI_TONES.accent.gradientEnd;
 
   public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number, elapsedMs?: number, ttftMs?: number): Line[] {
     // Rotate phrase every ~30 seconds (frame ticks at 80ms, so ~375 frames)

package/src/renderer/ui-primitives.ts

@@ -35,8 +35,9 @@ export const GLYPHS = {
     failure: '✕',
     pending: '•',
     active: '●',
-    idle: '○',
-    info: '•',
+    idle: '◌',
+    info: '○',
+    warn: '⚠',
     blocked: '⊘',
     skipped: '◇',
     review: '◈',
@@ -56,6 +57,11 @@ export const GLYPHS = {
   },
 } as const;
 
+/**
+ * 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',
@@ -63,6 +69,8 @@ export const UI_TONES = {
     muted: '#94a3b8',
     dim: '#475569',
     inverse: '#0f172a',
+    /** Empty-state / placeholder foreground (formerly DEFAULT_PANEL_PALETTE.empty literal). */
+    empty: '#334155',
   },
   bg: {
     base: '#11131a',
@@ -75,6 +83,8 @@ export const UI_TONES = {
     warning: '#2b2116',
     error: '#2a161b',
     success: '#14241b',
+    /** Fullscreen/shell footer background. */
+    footer: '#111827',
   },
   state: {
     info: '#38bdf8',
@@ -83,6 +93,8 @@ export const UI_TONES = {
     bad: '#ef4444',
     blocked: '#f97316',
     active: '#60a5fa',
+    /** Single canonical reasoning/thinking purple (replaces #9945FF and ad-hoc purples). */
+    reasoning: '#a855f7',
   },
   accent: {
     browser: '#7dd3fc',
@@ -90,7 +102,16 @@ export const UI_TONES = {
     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;
 
 export type UiGlyphRegistry = typeof GLYPHS;
+
+/** Single spinner-frame source — layout.ts and progress.ts both re-export this. */
+export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const;

package/src/runtime/bootstrap-shell.ts

@@ -109,12 +109,41 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
     homeDirectory: services.homeDirectory,
   });
 
+  const foundationClients = createRuntimeFoundationClients({
+    runtimeServices: services,
+    tasksReadModel: uiServices.readModels.tasks,
+    taskManager,
+    opsControlPlane,
+  });
+  const {
+    directTransport,
+    hookApi,
+    knowledgeApi,
+    mcpApi,
+    opsApi,
+    providerApi,
+  } = foundationClients;
+  const planRuntime = createShellPlanRuntime({
+    adaptivePlanner: services.adaptivePlanner,
+    runtimeBus,
+  });
+
   const openAgentDetailRef: { fn: (agentId: string) => void } = { fn: (_agentId: string) => {} };
 
+  // WO-139: initial cost-budget alert threshold (USD; 0/unset = disabled).
+  // Once the session starts, the real control surface is the CostTrackerPanel
+  // itself — the in-panel 'b' key and /cost budget <usd> both call
+  // CostTrackerPanel.setBudgetThreshold() directly on the live panel instance.
+  const parsedBudgetThreshold = Number(process.env.GOODVIBES_COST_BUDGET_USD);
+  const initialCostBudgetThreshold = Number.isFinite(parsedBudgetThreshold) && parsedBudgetThreshold > 0
+    ? parsedBudgetThreshold
+    : 0;
+
   let commandContextRef: CommandContext | null = null;
   registerBuiltinPanels(services.panelManager, {
     configManager,
     getOrchestratorUsage: () => orchestrator.usage as { input: number; output: number; cacheRead: number; cacheWrite: number; model?: string },
+    budgetThreshold: initialCostBudgetThreshold,
     toolRegistry,
     providerRegistry: services.providerRegistry,
     contextWindow: services.providerRegistry.getContextWindowForModel(services.providerRegistry.getCurrentModel()),
@@ -153,6 +182,12 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
     mcpRegistry: services.mcpRegistry,
     openAgentDetail: (agentId: string) => openAgentDetailRef.fn(agentId),
     daemonHomeDir: join(services.homeDirectory, '.goodvibes', 'daemon'),
+    opsApi,
+    planRuntime,
+    watcherRegistry: services.watcherRegistry,
+    runtimeStore,
+    openPanel: (panelId: string) => { services.panelManager.open(panelId); },
+    knowledgeApi,
   });
   services.panelManager.prewarmRegistered();
 
@@ -170,29 +205,11 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
 
   const commandRegistry = new CommandRegistry();
   registerBuiltinCommands(commandRegistry);
-  const foundationClients = createRuntimeFoundationClients({
-    runtimeServices: services,
-    tasksReadModel: uiServices.readModels.tasks,
-    taskManager,
-    opsControlPlane,
-  });
-  const {
-    directTransport,
-    hookApi,
-    knowledgeApi,
-    mcpApi,
-    opsApi,
-    providerApi,
-  } = foundationClients;
   const remoteRuntime = createShellRemoteCommandService({
     readModels: uiServices.readModels,
     remoteRunnerRegistry: services.remoteRunnerRegistry,
     runtimeStore,
   });
-  const planRuntime = createShellPlanRuntime({
-    adaptivePlanner: services.adaptivePlanner,
-    runtimeBus,
-  });
 
   const commandContext: CommandContext = createBootstrapCommandContext({
     configManager,