@timber-js/app 0.2.0-alpha.20 → 0.2.0-alpha.201

package/src/{server/dev-logger.ts → 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/{plugins/dev-logs.ts → dev-tools/logs.ts}

@@ -12,8 +12,85 @@
  * Design docs: 18-build-system.md §"Dev Server", 02-rendering-pipeline.md
  */
 
-import type { Plugin, ViteDevServer } from 'vite';
-import type { PluginContext } from '#/index.js';
+import type { Plugin, ViteDevServer, Logger } from 'vite';
+import type { PluginContext } from '../plugin-context.ts';
+
+// ─── Original Console Snapshot ──────────────────────────────────────────
+
+/**
+ * Snapshot of the original console methods, captured at module load time
+ * (before any patching). Used as Vite's `customLogger` console so that
+ * forwardConsole output bypasses our patch entirely — eliminating the
+ * server→browser→server forwarding loop without string matching.
+ */
+export const originalConsole: Pick<Console, 'log' | 'warn' | 'error' | 'debug' | 'info'> = {
+  log: console.log.bind(console),
+  warn: console.warn.bind(console),
+  error: console.error.bind(console),
+  debug: console.debug.bind(console),
+  info: console.info.bind(console),
+};
+
+/**
+ * Wrap a Vite Logger so its output methods route through `originalConsole`
+ * instead of the global (potentially patched) console. This prevents the
+ * server→browser→server forwarding loop even when the user supplies their
+ * own `customLogger` that internally calls console methods.
+ */
+export function wrapLoggerWithOriginalConsole(logger: Logger): Logger {
+  // Swap all patched console methods to originals during any logger call,
+  // since user loggers may call any combination of console methods internally.
+  function withOriginals<T>(fn: () => T): T {
+    const saved = {
+      log: console.log,
+      warn: console.warn,
+      error: console.error,
+      debug: console.debug,
+      info: console.info,
+    };
+    console.log = originalConsole.log;
+    console.warn = originalConsole.warn;
+    console.error = originalConsole.error;
+    console.debug = originalConsole.debug;
+    console.info = originalConsole.info;
+    try {
+      return fn();
+    } finally {
+      console.log = saved.log;
+      console.warn = saved.warn;
+      console.error = saved.error;
+      console.debug = saved.debug;
+      console.info = saved.info;
+    }
+  }
+
+  return {
+    get hasWarned() {
+      return logger.hasWarned;
+    },
+    set hasWarned(v) {
+      logger.hasWarned = v;
+    },
+    info(msg, opts) {
+      withOriginals(() => logger.info(msg, opts));
+    },
+    warn(msg, opts) {
+      withOriginals(() => logger.warn(msg, opts));
+    },
+    warnOnce(msg, opts) {
+      withOriginals(() => logger.warnOnce(msg, opts));
+    },
+    error(msg, opts) {
+      withOriginals(() => logger.error(msg, opts));
+    },
+    clearScreen(type) {
+      logger.clearScreen(type);
+    },
+    hasErrorLogged(error) {
+      return logger.hasErrorLogged(error);
+    },
+  };
+}
 
 // ─── Types ───────────────────────────────────────────────────────────────
 
@@ -149,7 +226,7 @@ function extractCallerLocation(projectRoot: string): string | null {
   for (let i = 1; i < lines.length; i++) {
     const line = lines[i].trim();
     // Skip our own patching frames
-    if (line.includes('dev-logs')) continue;
+    if (line.includes('dev-tools/logs')) continue;
     // Skip node internals
     if (line.includes('node:') || line.includes('node_modules')) continue;
 
@@ -189,7 +266,7 @@ export function isFrameworkInternalCaller(): boolean {
   for (let i = 1; i < lines.length; i++) {
     const line = lines[i].trim();
     // Skip our own patching frames
-    if (line.includes('dev-logs')) continue;
+    if (line.includes('dev-tools/logs')) continue;
     // Skip node internals (but NOT node_modules — we need to inspect those)
     if (line.includes('node:')) continue;
 
@@ -215,39 +292,58 @@ export function isFrameworkInternalCaller(): boolean {
  * 3. Sends via server.hot.send() — dropped if no clients connected
  */
 function patchConsole(server: ViteDevServer, projectRoot: string): () => void {
-  const originals = new Map<ServerLogLevel, (...args: unknown[]) => void>();
+  const prevConsole = new Map<ServerLogLevel, (...args: unknown[]) => void>();
+  // Per-level guard so a console.warn inside a console.error handler isn't
+  // suppressed — only same-level synchronous re-entrancy is blocked.
+  const patchingLevel = new Set<ServerLogLevel>();
 
   for (const level of LOG_LEVELS) {
-    originals.set(level, console[level].bind(console));
+    prevConsole.set(level, console[level].bind(console));
 
     console[level] = (...args: unknown[]) => {
-      // Always call the original — server terminal output is preserved
-      originals.get(level)!(...args);
-
-      // Skip framework-internal logs (plugins/, adapters/) from browser forwarding.
-      // Server runtime logs (render errors, action errors, etc.) are preserved.
-      if (isFrameworkInternalCaller()) return;
+      // Same-level re-entrancy guard: if prevConsole's wrapper calls back
+      // into console[level], just pass through without forwarding.
+      if (patchingLevel.has(level)) {
+        prevConsole.get(level)!(...args);
+        return;
+      }
 
-      // Serialize and forward to browser
+      patchingLevel.add(level);
       try {
-        const payload: ServerLogPayload = {
-          level,
-          args: args.map((arg) => serializeArg(arg)),
-          location: extractCallerLocation(projectRoot),
-          timestamp: Date.now(),
-        };
-
-        server.hot.send('timber:server-log', payload);
-      } catch {
-        // Never let log forwarding break the server
+        // Call the previous console method first — guarantees terminal output
+        // even if serialization or forwarding fails downstream. If prevConsole
+        // throws, the error propagates (not swallowed) but patchingLevel is
+        // still cleaned up by the outer finally.
+        prevConsole.get(level)!(...args);
+
+        // Skip framework-internal logs (plugins/, adapters/) from browser forwarding.
+        if (isFrameworkInternalCaller()) return;
+
+        try {
+          const payload: ServerLogPayload = {
+            level,
+            args: args.map((arg) => serializeArg(arg)),
+            location: extractCallerLocation(projectRoot),
+            timestamp: Date.now(),
+          };
+
+          server.hot.send('timber:server-log', payload);
+        } catch (e) {
+          originalConsole.debug(
+            '[timber] server log forwarding failed:',
+            e instanceof Error ? e.message : e
+          );
+        }
+      } finally {
+        patchingLevel.delete(level);
       }
     };
   }
 
-  // Return a cleanup function to restore originals
+  // Return a cleanup function to restore the previous console methods
   return () => {
-    for (const [level, original] of originals) {
-      console[level] = original;
+    for (const [level, prev] of prevConsole) {
+      console[level] = prev;
     }
   };
 }