@timber-js/app 0.2.0-alpha.158 → 0.2.0-alpha.159

package/src/dev-tools/browser-logs.ts

@@ -1,23 +1,19 @@
 /**
- * timber-dev-browser-logs — Forwards browser console output to the server terminal.
+ * Browser log forwarding — maps timber's devBrowserLogs config to Vite 8's
+ * server.forwardConsole option.
  *
- * Injects a small inline script in dev mode that intercepts browser
- * `console.error`, `console.warn`, and `console.info`, then forwards
- * messages to the server via Vite's HMR WebSocket.
+ * Vite 8 ships built-in browser→terminal console forwarding via
+ * server.forwardConsole, which patches console methods in /@vite/client
+ * and prints forwarded output server-side. This replaces timber's custom
+ * client-side interception script and HMR WebSocket transport.
  *
- * The server-side listener formats and prints the messages with color-coded
- * prefixes: [browser:error], [browser:warn], [browser:info].
+ * Client error forwarding (overlay echo, digest filtering, componentStack)
+ * remains in browser-dev.ts — Vite's forwardConsole only logs to terminal
+ * and has no client-side filter hook. See TIM-1152.
  *
- * Dev-only: this plugin only runs during `vite dev`.
- * No runtime overhead in production.
- *
- * See TIM-513 for design context.
- * See design/18-build-system.md §"Dev Server" for sub-plugin architecture.
+ * See design/21-dev-server.md §"Browser Log Forwarding"
  */
 
-import type { Plugin, ViteDevServer } from 'vite';
-import type { PluginContext } from '../plugin-context.js';
-
 // ─── Types ───────────────────────────────────────────────────────────────
 
 /** Log levels forwarded from the browser. */
@@ -26,266 +22,34 @@ export type BrowserLogLevel = 'error' | 'warn' | 'info';
 /** Configuration value for devBrowserLogs in timber.config.ts. */
 export type DevBrowserLogsConfig = BrowserLogLevel | 'none' | undefined;
 
-/**
- * Payload sent from browser to server via Vite's HMR WebSocket.
- * Kept small — truncated before sending.
- */
-export interface BrowserLogPayload {
-  level: BrowserLogLevel;
-  /** Serialized message string. */
-  message: string;
-  /** Error stack trace, if the first argument was an Error. */
-  stack: string | null;
-  /** Source URL and line number, if available. */
-  source: string | null;
-  /** Timestamp in ms (Date.now()) from the browser. */
-  timestamp: number;
-}
-
-// ─── Constants ───────────────────────────────────────────────────────────
-
-/** Max message size in bytes before truncation. */
-const MAX_MESSAGE_BYTES = 2048;
-
-/** HMR event name for browser→server log forwarding. */
-const HMR_EVENT = 'timber:browser-log';
-
-/** ANSI color codes for terminal output. */
-const COLORS = {
-  red: '\x1b[31m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  dim: '\x1b[2m',
-  reset: '\x1b[0m',
-} as const;
-
-/** Level severity ordering for threshold comparison. */
-const LEVEL_SEVERITY: Record<BrowserLogLevel | 'none', number> = {
-  none: 0,
-  info: 1,
-  warn: 2,
-  error: 3,
-};
-
-// ─── Formatting ──────────────────────────────────────────────────────────
-
-/**
- * Format a browser log payload for server terminal output.
- *
- * Produces color-coded output like:
- *   [browser:error] Uncaught TypeError: x is not a function
- *     at App (app.tsx:10:5)
- *   [browser:warn] Deprecation warning (app/page.tsx:42:12)
- */
-export function formatBrowserLog(payload: BrowserLogPayload): string {
-  const { level, message, stack, source } = payload;
-
-  // Color-coded prefix
-  const color = level === 'error' ? COLORS.red : level === 'warn' ? COLORS.yellow : COLORS.blue;
-  const prefix = `${color}[browser:${level}]${COLORS.reset}`;
-
-  // Source suffix
-  const sourceSuffix = source ? ` ${COLORS.dim}(${source})${COLORS.reset}` : '';
-
-  let output = `${prefix} ${message}${sourceSuffix}`;
-
-  // Append stack trace indented
-  if (stack) {
-    const indented = stack
-      .split('\n')
-      .map((line) => `  ${COLORS.dim}${line}${COLORS.reset}`)
-      .join('\n');
-    output += `\n${indented}`;
-  }
-
-  return output;
-}
-
-// ─── Level Filtering ─────────────────────────────────────────────────────
-
-/**
- * Check if a log at `level` should be forwarded given the configured threshold.
- *
- * The threshold acts as a minimum severity:
- * - 'error' → only errors
- * - 'warn' → errors + warnings
- * - 'info' → errors + warnings + info
- * - 'none' → nothing
- */
-export function shouldForwardLevel(
-  level: BrowserLogLevel,
-  threshold: BrowserLogLevel | 'none'
-): boolean {
-  if (threshold === 'none') return false;
-  return LEVEL_SEVERITY[level] >= LEVEL_SEVERITY[threshold];
-}
-
-// ─── Truncation ──────────────────────────────────────────────────────────
-
-/**
- * Truncate a message to `maxBytes` to avoid flooding the terminal.
- * Appends a suffix indicating how many bytes were dropped.
- */
-export function truncateMessage(message: string, maxBytes: number): string {
-  if (message.length <= maxBytes) return message;
-
-  const truncated = message.slice(0, maxBytes);
-  const droppedBytes = message.length - maxBytes;
-  return `${truncated}… [truncated ${droppedBytes} bytes]`;
-}
-
-// ─── Client Injection Script ─────────────────────────────────────────────
-
-/**
- * Generate the inline script injected into the browser in dev mode.
- *
- * This script:
- * 1. Saves references to the original console methods
- * 2. Wraps `console.error`, `console.warn`, `console.info`
- * 3. Calls the original first (browser devtools still work)
- * 4. Serializes and forwards via `import.meta.hot.send()`
- * 5. Truncates messages to MAX_MESSAGE_BYTES
- *
- * The script is minimal and self-contained — no imports, no dependencies.
- */
-export function generateClientScript(threshold: BrowserLogLevel | 'none'): string {
-  if (threshold === 'none') return '';
-
-  // Only intercept levels that meet the threshold
-  const levels: BrowserLogLevel[] = ['error', 'warn', 'info'].filter((l) =>
-    shouldForwardLevel(l as BrowserLogLevel, threshold)
-  ) as BrowserLogLevel[];
-
-  if (levels.length === 0) return '';
-
-  return `
-(function() {
-  if (!import.meta.hot) return;
-  var MAX_BYTES = ${MAX_MESSAGE_BYTES};
-  var levels = ${JSON.stringify(levels)};
-  var originals = {};
-
-  function serialize(arg) {
-    if (arg === null) return 'null';
-    if (arg === undefined) return 'undefined';
-    if (arg instanceof Error) return arg.stack || arg.message || String(arg);
-    if (typeof arg === 'object') {
-      try { return JSON.stringify(arg); } catch(e) { return String(arg); }
-    }
-    return String(arg);
-  }
-
-  function truncate(s) {
-    if (s.length <= MAX_BYTES) return s;
-    return s.slice(0, MAX_BYTES) + '... [truncated ' + (s.length - MAX_BYTES) + ' bytes]';
-  }
-
-  levels.forEach(function(level) {
-    originals[level] = console[level];
-    console[level] = function() {
-      originals[level].apply(console, arguments);
-      try {
-        var args = Array.prototype.slice.call(arguments);
-        var firstArg = args[0];
-        var stack = null;
-        var source = null;
-
-        if (firstArg instanceof Error) {
-          stack = firstArg.stack || null;
-          source = null;
-        }
-
-        var message = args.map(serialize).join(' ');
-        message = truncate(message);
-
-        import.meta.hot.send('${HMR_EVENT}', {
-          level: level,
-          message: message,
-          stack: stack,
-          source: source,
-          timestamp: Date.now()
-        });
-      } catch(e) {
-        // Never let log forwarding break the page
-      }
-    };
-  });
-})();
-`.trim();
-}
-
-// ─── Plugin ──────────────────────────────────────────────────────────────
+// ─── Vite Config Mapping ─────────────────────────────────────────────────
 
 /**
- * Create the timber-dev-browser-logs Vite plugin.
- *
- * - `configureServer`: Listens for HMR messages and prints them to the terminal
- * - `transformIndexHtml`: Injects the client-side interception script
- *
- * Only active during `vite dev` (apply: 'serve').
+ * Map timber's devBrowserLogs threshold to Vite 8's server.forwardConsole.
+ *
+ * Vite defaults forwardConsole OFF for non-agent dev; timber enables it
+ * based on the configured threshold (default: 'warn'). The threshold acts
+ * as a minimum severity — 'warn' forwards errors + warnings, 'info'
+ * forwards everything, 'error' forwards only errors, 'none' disables.
+ *
+ * Vite's unhandledErrors is explicitly disabled — timber's own
+ * setupClientErrorForwarding (browser-dev.ts) already catches window
+ * error/unhandledrejection, filters framework control-flow signals
+ * (redirect/deny digests) and page-unload aborts (TIM-838), and
+ * echoes errors to the Vite overlay. Enabling Vite's unhandledErrors
+ * would duplicate terminal output for normal errors and reintroduce
+ * unfiltered noise for framework signals.
  */
-export function timberDevBrowserLogs(ctx: PluginContext): Plugin {
-  return {
-    name: 'timber-dev-browser-logs',
-    apply: 'serve',
-
-    configureServer(server: ViteDevServer) {
-      const threshold = ctx.config.devBrowserLogs ?? 'warn';
-      if (threshold === 'none') {
-        // Clear any stale script from a prior server instance (e.g. HMR reconfigure)
-        delete (globalThis as Record<string, unknown>).__timber_dev_browser_log_script;
-        return;
-      }
-
-      // Register the client injection script on globalThis so the RSC entry
-      // can include it in headHtml for all Timber route responses.
-      // transformIndexHtml only runs for Vite's index.html fallback, not
-      // for responses served by createTimberMiddleware (TIM-575).
-      const script = generateClientScript(threshold);
-      if (script) {
-        (globalThis as Record<string, unknown>).__timber_dev_browser_log_script =
-          `<script type="module">${script}</script>`;
-      }
-
-      // Listen for browser log messages via HMR WebSocket
-      server.hot.on(HMR_EVENT, (payload: BrowserLogPayload) => {
-        try {
-          // Validate level
-          if (!shouldForwardLevel(payload.level, threshold)) return;
-
-          // Truncate server-side too (defense in depth)
-          payload.message = truncateMessage(payload.message, MAX_MESSAGE_BYTES);
-
-          const formatted = formatBrowserLog(payload);
-
-          // Use the correct console method for the log level
-          if (payload.level === 'error') {
-            process.stderr.write(formatted + '\n');
-          } else {
-            process.stdout.write(formatted + '\n');
-          }
-        } catch (e) {
-          // Use process.stderr directly to avoid re-entering patched console
-          process.stderr.write(
-            `[timber] log forwarding failed: ${e instanceof Error ? e.message : e}\n`
-          );
-        }
-      });
-    },
-
-    transformIndexHtml() {
-      const threshold = ctx.config.devBrowserLogs ?? 'warn';
-      const script = generateClientScript(threshold);
-      if (!script) return [];
-
-      return [
-        {
-          tag: 'script',
-          attrs: { type: 'module' },
-          children: script,
-          injectTo: 'head' as const,
-        },
-      ];
-    },
-  };
+export function resolveForwardConsole(
+  threshold: DevBrowserLogsConfig
+): boolean | { unhandledErrors: boolean; logLevels: string[] } {
+  const resolved = threshold ?? 'warn';
+  if (resolved === 'none') return false;
+
+  const logLevels: string[] = [];
+  if (resolved === 'info') logLevels.push('info', 'warn', 'error');
+  else if (resolved === 'warn') logLevels.push('warn', 'error');
+  else logLevels.push('error');
+
+  return { unhandledErrors: false, logLevels };
 }

package/src/dev-tools/index.ts

@@ -63,9 +63,9 @@ export {
   type DevLoggerConfig,
 } from './logger.js';
 
-// Browser log forwarding
+// Browser log forwarding (Vite 8 config mapping)
 export {
-  timberDevBrowserLogs,
+  resolveForwardConsole,
   type BrowserLogLevel,
   type DevBrowserLogsConfig,
 } from './browser-logs.js';

package/src/dev-tools/instrumentation.ts

@@ -35,7 +35,7 @@ export type DevFetchCleanup = () => void;
  * instrumentDevFetch() again. Without this guard each call would wrap the
  * previous wrapper — N nested wrappers emitting N duplicate timber.fetch
  * spans per request. Symbol.for() survives module re-evaluation (same
- * pattern as __timber_dev_browser_log_script). See TIM-1067, B49.
+ * pattern as globalThis Symbol guards). See TIM-1067, B49.
  */
 const FETCH_PATCH_KEY = Symbol.for('timber.dev.fetch-instrumentation-cleanup');
 

package/src/dev-tools/logger.ts

@@ -14,6 +14,9 @@
  * Design doc: 21-dev-server.md §"Dev Logging", 17-logging.md §"Dev Logging"
  */
 
+import { STATUS_CODES } from 'node:http';
+import type { InspectColor } from 'node:util';
+import { styleText } from 'node:util';
 import type { ReadableSpan } from '@opentelemetry/sdk-trace-base';
 
 // ─── Configuration ──────────────────────────────────────────────────────────
@@ -27,16 +30,11 @@ export interface DevLoggerConfig {
   slowPhaseMs?: number;
 }
 
-// ─── ANSI Codes ─────────────────────────────────────────────────────────────
+// ─── Styling ────────────────────────────────────────────────────────────────
 
-const DIM = '\x1b[2m';
-const BOLD = '\x1b[1m';
-const RESET = '\x1b[0m';
-const GREEN = '\x1b[32m';
-const YELLOW = '\x1b[33m';
-const RED = '\x1b[31m';
-const CYAN = '\x1b[36m';
-const MAGENTA = '\x1b[35m';
+type Format = InspectColor | readonly InspectColor[];
+const noValidate = { validateStream: false } as const;
+const style = (fmt: Format, text: string) => styleText(fmt, text, noValidate);
 
 /**
  * Color an HTTP method for dev log output.
@@ -45,21 +43,21 @@ const MAGENTA = '\x1b[35m';
 function colorMethod(method: string): string {
   switch (method) {
     case 'GET':
-      return `${DIM}${method}${RESET}`;
+      return style('dim', method);
     case 'POST':
-      return `${GREEN}${BOLD}${method}${RESET}`;
+      return style(['green', 'bold'], method);
     case 'PUT':
-      return `${YELLOW}${BOLD}${method}${RESET}`;
+      return style(['yellow', 'bold'], method);
     case 'DELETE':
-      return `${RED}${BOLD}${method}${RESET}`;
+      return style(['red', 'bold'], method);
     case 'PATCH':
-      return `${CYAN}${BOLD}${method}${RESET}`;
+      return style(['cyan', 'bold'], method);
     case 'HEAD':
-      return `${DIM}${method}${RESET}`;
+      return style('dim', method);
     case 'OPTIONS':
-      return `${MAGENTA}${BOLD}${method}${RESET}`;
+      return style(['magenta', 'bold'], method);
     default:
-      return `${BOLD}${method}${RESET}`;
+      return style('bold', method);
   }
 }
 
@@ -251,14 +249,14 @@ export function formatSpanTree(spans: ReadableSpan[], config?: DevLoggerConfig):
   const traceId = root.spanContext().traceId;
   const actionName = root.attributes['timber.action_name'] as string | undefined;
 
-  const dimTrace = `${DIM}trace_id: ${traceId}${RESET}`;
+  const dimTrace = style('dim', `trace_id: ${traceId}`);
   if (actionName) {
     const actionFile = root.attributes['timber.action_file'] as string | undefined;
     lines.push(
-      `${BOLD}ACTION ${actionName}${actionFile ? ` (${actionFile})` : ''}${RESET}  ${dimTrace}`
+      `${style('bold', `ACTION ${actionName}${actionFile ? ` (${actionFile})` : ''}`)}  ${dimTrace}`
     );
   } else {
-    lines.push(`${colorMethod(method)} ${BOLD}${path}${RESET}  ${dimTrace}`);
+    lines.push(`${colorMethod(method)} ${style('bold', path)}  ${dimTrace}`);
   }
 
   // Render child span nodes
@@ -271,17 +269,17 @@ export function formatSpanTree(spans: ReadableSpan[], config?: DevLoggerConfig):
   const statusCode = root.attributes['http.response.status_code'] as number | undefined;
   const status = statusCode ?? (root.status.code === 2 ? 500 : 200);
   const totalMs = Math.round(hrTimeToMs(root.duration));
-  const statusColor = status < 400 ? GREEN : status < 500 ? YELLOW : RED;
+  const statusFmt = status < 400 ? 'green' : status < 500 ? 'yellow' : 'red';
   const statusText = `${status} ${httpStatusText(status)}`;
 
   // Surface deny() signal info for 500s caused by deny-inside-suspense
   const denyInfo = root.attributes['timber.deny_status'] as number | undefined;
   const denyNote = denyInfo
-    ? `${DIM}  (caused by deny(${denyInfo}) inside Suspense — status already committed)${RESET}`
+    ? style('dim', `  (caused by deny(${denyInfo}) inside Suspense — status already committed)`)
     : '';
 
   lines.push(
-    `${statusColor}└─ ✓ ${statusText}${RESET}${DIM}                              total    ${totalMs}ms${RESET}${denyNote}`
+    `${style(statusFmt, `└─ ✓ ${statusText}`)}${style('dim', `                              total    ${totalMs}ms`)}${denyNote}`
   );
 
   return lines.join('\n') + '\n';
@@ -307,18 +305,18 @@ function formatFetchLine(
   const fetchError = span.attributes['timber.fetch_error'] as string | undefined;
   const isError = span.status.code === 2; // SpanStatusCode.ERROR
 
-  let line = `${prefix}${connector} ${DIM}fetch ${method}${RESET} ${url}`;
-  line += `  ${DIM}${startMs}ms → ${endMs}ms (${durationMs}ms)${RESET}`;
+  let line = `${prefix}${connector} ${style('dim', `fetch ${method}`)} ${url}`;
+  line += `  ${style('dim', `${startMs}ms → ${endMs}ms (${durationMs}ms)`)}`;
 
   if (cacheStatus) {
-    line += `  ${DIM}[cdn: ${cacheStatus}]${RESET}`;
+    line += `  ${style('dim', `[cdn: ${cacheStatus}]`)}`;
   }
 
   if (isError) {
     const errMsg = fetchError ? `: ${fetchError}` : '';
-    line += `  ${RED}ERROR${errMsg}${RESET}`;
+    line += `  ${style('red', `ERROR${errMsg}`)}`;
   } else if (statusCode && statusCode >= 400) {
-    line += `  ${YELLOW}${statusCode}${RESET}`;
+    line += `  ${style('yellow', String(statusCode))}`;
   }
 
   return line;
@@ -363,10 +361,9 @@ function formatSpanNode(
     }
   }
 
-  const slowHighlight = isSlow ? YELLOW : '';
-  const slowReset = isSlow ? RESET : '';
-  const envTag = `${CYAN}[${env}]${RESET}`;
-  const line = `${prefix}${connector} ${envTag} ${slowHighlight}${label}${slowReset}  ${DIM}${timing}${RESET}`;
+  const styledLabel = isSlow ? style('yellow', label) : label;
+  const envTag = style('cyan', `[${env}]`);
+  const line = `${prefix}${connector} ${envTag} ${styledLabel}  ${style('dim', timing)}`;
   lines.push(line);
 
   // Span events (cache hits/misses) as child annotations
@@ -378,7 +375,7 @@ function formatSpanNode(
       const durStr = durMs !== undefined ? `  ${durMs < 1 ? '<1' : Math.round(durMs)}ms` : '';
       const stale = event.attributes?.['stale'] ? ' (stale)' : '';
       lines.push(
-        `${childPrefix}${DIM}└── ${key}  timber.cache ${hitMiss}${durStr}${stale}${RESET}`
+        `${childPrefix}${style('dim', `└── ${key}  timber.cache ${hitMiss}${durStr}${stale}`)}`
       );
     }
   }
@@ -405,8 +402,8 @@ export function formatSpanSummary(spans: ReadableSpan[], _config?: DevLoggerConf
   const traceId = root.spanContext().traceId;
   const traceIdShort = traceId.slice(0, 8);
 
-  const statusColor = status < 400 ? GREEN : status < 500 ? YELLOW : RED;
-  return `${colorMethod(method)} ${path} → ${statusColor}${status} ${httpStatusText(status)}${RESET}  ${totalMs}ms  ${DIM}trace_id: ${traceIdShort}...${RESET}\n`;
+  const statusFmt = status < 400 ? 'green' : status < 500 ? 'yellow' : 'red';
+  return `${colorMethod(method)} ${path} → ${style(statusFmt, `${status} ${httpStatusText(status)}`)}  ${totalMs}ms  ${style('dim', `trace_id: ${traceIdShort}...`)}\n`;
 }
 
 /**
@@ -449,20 +446,5 @@ export function formatJson(spans: ReadableSpan[]): string {
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
 function httpStatusText(status: number): string {
-  const texts: Record<number, string> = {
-    200: 'OK',
-    201: 'Created',
-    204: 'No Content',
-    301: 'Moved Permanently',
-    302: 'Found',
-    304: 'Not Modified',
-    400: 'Bad Request',
-    401: 'Unauthorized',
-    403: 'Forbidden',
-    404: 'Not Found',
-    405: 'Method Not Allowed',
-    413: 'Payload Too Large',
-    500: 'Internal Server Error',
-  };
-  return texts[status] ?? String(status);
+  return STATUS_CODES[status] ?? String(status);
 }

package/src/dev-tools/terminal.ts

@@ -15,6 +15,8 @@
  */
 
 import { pathToFileURL } from 'node:url';
+import type { InspectColor } from 'node:util';
+import { styleText } from 'node:util';
 import {
   extractComponentStack,
   parseFirstAppFrame,
@@ -23,14 +25,11 @@ import {
 } from './overlay.js';
 import { classifyStack } from './stack-classifier.js';
 
-// ─── ANSI Codes ─────────────────────────────────────────────────────────────
+// ─── Styling ────────────────────────────────────────────────────────────────
 
-const RED = '\x1b[31m';
-const CYAN = '\x1b[36m';
-const DIM = '\x1b[2m';
-const RESET = '\x1b[0m';
-const BOLD = '\x1b[1m';
-const UNDERLINE = '\x1b[4m';
+type Format = InspectColor | readonly InspectColor[];
+const noValidate = { validateStream: false } as const;
+const style = (fmt: Format, text: string) => styleText(fmt, text, noValidate);
 
 // ─── OSC 8 Hyperlinks ──────────────────────────────────────────────────────
 
@@ -59,7 +58,7 @@ function fileLink(filePath: string, line?: number, col?: number): string {
   // drive letters (TIM-792). Append :line:col after the URL.
   const base = pathToFileURL(filePath).href;
   const url = line ? `${base}:${line}${col ? `:${col}` : ''}` : base;
-  return `${CYAN}${UNDERLINE}${hyperlink(display, url)}${RESET}`;
+  return style(['cyan', 'underline'], hyperlink(display, url));
 }
 
 // ─── Box Drawing ────────────────────────────────────────────────────────────
@@ -79,15 +78,15 @@ const BOX = {
  * @param lines - Content lines (no ANSI length calculation — keeps it simple)
  * @param width - Box width (characters). Lines longer than this are not truncated.
  */
-function box(lines: string[], borderColor: string, width = 80): string {
+function box(lines: string[], borderFormat: Format, width = 80): string {
   const bar = BOX.horizontal.repeat(width - 2);
   const output: string[] = [];
 
-  output.push(`${borderColor}${BOX.topLeft}${bar}${BOX.topRight}${RESET}`);
+  output.push(style(borderFormat, `${BOX.topLeft}${bar}${BOX.topRight}`));
   for (const line of lines) {
-    output.push(`${borderColor}${BOX.vertical}${RESET} ${line}`);
+    output.push(`${style(borderFormat, BOX.vertical)} ${line}`);
   }
-  output.push(`${borderColor}${BOX.bottomLeft}${bar}${BOX.bottomRight}${RESET}`);
+  output.push(style(borderFormat, `${BOX.bottomLeft}${bar}${BOX.bottomRight}`));
 
   return output.join('\n');
 }
@@ -116,12 +115,12 @@ export function formatTerminalError(error: Error, phase: ErrorPhase, projectRoot
 
   // ── Box: Phase + Message ──────────────────────────────────────────
   const boxLines: string[] = [];
-  boxLines.push(`${RED}${BOLD}${PHASE_LABELS[phase]} Error${RESET}`);
+  boxLines.push(style(['red', 'bold'], `${PHASE_LABELS[phase]} Error`));
   boxLines.push('');
 
   // Error message — may be multi-line
   for (const msgLine of error.message.split('\n')) {
-    boxLines.push(`${RED}${msgLine}${RESET}`);
+    boxLines.push(style('red', msgLine));
   }
 
   // Primary file location (clickable)
@@ -131,31 +130,31 @@ export function formatTerminalError(error: Error, phase: ErrorPhase, projectRoot
       ? loc.file.slice(projectRoot.length + 1)
       : loc.file;
     boxLines.push(
-      `${BOLD}→${RESET} ${fileLink(loc.file, loc.line, loc.column)} ${DIM}(${relPath})${RESET}`
+      `${style('bold', '→')} ${fileLink(loc.file, loc.line, loc.column)} ${style('dim', `(${relPath})`)}`
     );
   }
 
-  sections.push(box(boxLines, RED));
+  sections.push(box(boxLines, 'red'));
 
   // ── Component Stack ───────────────────────────────────────────────
   if (componentStack) {
     sections.push('');
-    sections.push(`  ${BOLD}Component Stack:${RESET}`);
+    sections.push(`  ${style('bold', 'Component Stack:')}`);
     for (const csLine of componentStack.trim().split('\n')) {
-      sections.push(`  ${DIM}${csLine.trim()}${RESET}`);
+      sections.push(`  ${style('dim', csLine.trim())}`);
     }
   }
 
   // ── App Frames ────────────────────────────────────────────────────
   if (appFrames.length > 0) {
     sections.push('');
-    sections.push(`  ${BOLD}Application Frames:${RESET}`);
+    sections.push(`  ${style('bold', 'Application Frames:')}`);
     for (let i = 0; i < appFrames.length; i++) {
       const f = appFrames[i]!;
       if (f.file && f.line) {
-        const prefix = i === 0 ? `${BOLD}▸${RESET}` : ' ';
+        const prefix = i === 0 ? style('bold', '▸') : ' ';
         sections.push(
-          `  ${prefix} ${fileLink(f.file, f.line, f.col)} ${DIM}${extractFnName(f.raw)}${RESET}`
+          `  ${prefix} ${fileLink(f.file, f.line, f.col)} ${style('dim', extractFnName(f.raw))}`
         );
       } else {
         sections.push(`  ${f.raw}`);
@@ -166,7 +165,7 @@ export function formatTerminalError(error: Error, phase: ErrorPhase, projectRoot
   // ── Internal Frames (collapsed) ───────────────────────────────────
   if (internalCount > 0) {
     sections.push(
-      `  ${DIM}… ${internalCount} internal frame${internalCount !== 1 ? 's' : ''} hidden${RESET}`
+      `  ${style('dim', `… ${internalCount} internal frame${internalCount !== 1 ? 's' : ''} hidden`)}`
     );
   }