@timber-js/app 0.2.0-alpha.56 → 0.2.0-alpha.58

package/src/client/error-reconstituter.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+/**
+ * Reconstitutes a SerializableError into a real Error instance before
+ * passing to the user's error component.
+ *
+ * TSX error pages are 'use client' components that receive { error: Error, digest, reset }.
+ * Error objects are not RSC-serializable (React Flight throws "Only plain objects
+ * can be passed to Client Components"). This wrapper receives the error as a plain
+ * SerializableError object, reconstitutes a real Error instance, and passes it
+ * to the user's error component — ensuring error instanceof Error works correctly.
+ *
+ * See design/spike-TIM-565-unify-error-pages.md §"Edge Case B"
+ * See design/10-error-handling.md §"RSC → SSR for Error Pages via SerializableError"
+ */
+
+import { createElement, type ReactNode, type ComponentType } from 'react';
+
+/**
+ * Plain-object representation of an Error that can cross the RSC → client boundary.
+ * Stack is only included in dev mode (gated by isDevMode() on the server).
+ */
+export interface SerializableError {
+  message: string;
+  name: string;
+  stack?: string;
+}
+
+/**
+ * Props for the ErrorReconstituter wrapper component.
+ * All props are RSC-serializable:
+ * - error: plain object (SerializableError)
+ * - digest: plain JSON or null
+ * - reset: undefined (only meaningful on client after boundary catch)
+ * - component: client module reference (RSC Flight serializes as opaque ref)
+ */
+interface ErrorReconstituterProps {
+  error: SerializableError;
+  digest: { code: string; data: unknown } | null;
+  reset: undefined;
+  component: ComponentType<{
+    error: Error;
+    digest: { code: string; data: unknown } | null;
+    reset: (() => void) | undefined;
+  }>;
+}
+
+/**
+ * Reconstitute a SerializableError into a real Error instance and render
+ * the user's error component with the proper props.
+ */
+export function ErrorReconstituter({
+  error: serialized,
+  digest,
+  reset,
+  component,
+}: ErrorReconstituterProps): ReactNode {
+  // Reconstitute a real Error so instanceof checks work in user code
+  const error = Object.assign(new Error(serialized.message), {
+    name: serialized.name,
+    ...(serialized.stack != null ? { stack: serialized.stack } : {}),
+  });
+
+  return createElement(component, { error, digest, reset });
+}

package/src/client/segment-outlet.tsx

@@ -0,0 +1,86 @@
+/**
+ * SegmentOutlet — client component boundary at each layout segment.
+ *
+ * Replaces the post-hoc tree walking in segment-merger.ts with an explicit
+ * client component at each segment boundary. Each outlet:
+ *
+ * 1. Knows its own segment path (prop from the server)
+ * 2. Caches its children in a ref across navigations
+ * 3. When `keepCurrent` is true (partial navigation, this segment skipped),
+ *    returns the previously cached children — layout state is preserved
+ * 4. When `keepCurrent` is false (full navigation or this segment changed),
+ *    stores and renders the new children
+ *
+ * This eliminates the need for client-side element tree walking, which
+ * breaks on real RSC trees due to opaque client component lazy refs,
+ * Suspense thenables, and AccessGate wrappers.
+ *
+ * Architecture is similar to Next.js's `<LayoutRouter>` client component —
+ * each layout boundary is an explicit client component that manages its
+ * own subtree. See design/19-client-navigation.md.
+ *
+ * Security: This is a performance optimization only. The server always
+ * runs all access.ts files regardless of segment skipping. A fabricated
+ * keepCurrent prop can only cause stale layouts — never auth bypass.
+ * See design/13-security.md §"State tree manipulation".
+ */
+
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+
+export interface SegmentOutletProps {
+  /**
+   * Unique identifier for this segment. For normal segments this is the
+   * urlPath (e.g., "/", "/dashboard"). For route groups this includes the
+   * group name (e.g., "/(marketing)") to distinguish siblings that share
+   * the same urlPath. Must match the segmentId used in state-tree-diff.ts.
+   */
+  segmentPath: string;
+
+  /**
+   * When true, the outlet returns its previously cached children instead
+   * of rendering the new children prop. Set by the server when this
+   * segment was skipped (the client already has the layout mounted).
+   *
+   * On the first render (SSR/hydration), this is always false — there's
+   * no cached content yet. On subsequent partial navigations, the server
+   * sets this to true for segments it skipped rendering.
+   */
+  keepCurrent?: boolean;
+
+  /** The segment's React subtree (layout + inner content). */
+  children: ReactNode;
+}
+
+/**
+ * Client component boundary at each layout segment in the element tree.
+ *
+ * On full navigation: receives new children, stores them, renders them.
+ * On partial navigation (keepCurrent=true): ignores children prop,
+ * returns previously stored content — React reconciles the same elements,
+ * preserving all client component state in the layout subtree.
+ *
+ * React preserves the ref across `reactRoot.render()` calls because:
+ * - SegmentOutlet has a stable type (client component module reference)
+ * - It appears at the same tree position on every navigation
+ * - React reconciles same-type, same-position → instance preserved
+ */
+export function SegmentOutlet({
+  segmentPath: _segmentPath,
+  keepCurrent = false,
+  children,
+}: SegmentOutletProps) {
+  // Store content in a ref to avoid triggering re-renders on cache updates.
+  // The ref persists across reactRoot.render() calls because React reconciles
+  // the same component type at the same tree position.
+  const contentRef = useRef<ReactNode>(null);
+
+  if (!keepCurrent) {
+    // Full render or this segment was re-rendered — store and render new content
+    contentRef.current = children;
+  }
+  // else: keepCurrent=true — return previously cached content
+
+  return contentRef.current;
+}

package/src/client/stale-reload.ts

@@ -16,6 +16,16 @@
 
 const RELOAD_FLAG_KEY = '__timber_stale_reload';
 
+/**
+ * In-memory fallback counter for environments where sessionStorage is
+ * unavailable (private browsing, storage full, extension interference).
+ * Incremented each time triggerStaleReload() falls into the catch path.
+ * If the counter exceeds 0 on a subsequent call, the reload is suppressed
+ * to prevent an infinite loop. Resets naturally on page load (module
+ * re-evaluates) and can be manually reset via clearStaleReloadFlag().
+ */
+let memoryReloadCount = 0;
+
 /**
  * Check if an error is a stale client reference error from React's
  * Flight client. These errors have the message pattern:
@@ -93,9 +103,22 @@ export function triggerStaleReload(): boolean {
     window.location.reload();
     return true;
   } catch {
-    // sessionStorage may be unavailable (private browsing, storage full, etc.)
-    // Fall back to reloading without loop protection
-    console.warn('[timber] Stale client reference detected. Reloading page.');
+    // sessionStorage unavailable (private browsing, storage full, etc.)
+    // Use in-memory counter as fallback loop guard
+    if (memoryReloadCount > 0) {
+      console.warn(
+        '[timber] Stale client reference detected again after reload. ' +
+          'Not reloading to prevent infinite loop. ' +
+          'This may indicate a deployment issue — try a hard refresh.'
+      );
+      return false;
+    }
+
+    memoryReloadCount++;
+    console.warn(
+      '[timber] Stale client reference detected — the server has been ' +
+        'redeployed with new bundles. Reloading to pick up the new version.'
+    );
     window.location.reload();
     return true;
   }
@@ -107,6 +130,7 @@ export function triggerStaleReload(): boolean {
  * reference error should trigger a fresh reload attempt.
  */
 export function clearStaleReloadFlag(): void {
+  memoryReloadCount = 0;
   try {
     sessionStorage.removeItem(RELOAD_FLAG_KEY);
   } catch {

package/src/index.ts

@@ -15,6 +15,7 @@ import { timberStaticBuild } from './plugins/static-build';
 import { timberServerActionExports } from './plugins/server-action-exports';
 import { timberBuildManifest } from './plugins/build-manifest';
 import { timberDevLogs } from './plugins/dev-logs';
+import { timberDevBrowserLogs } from './plugins/dev-browser-logs';
 import { timberReactProd } from './plugins/react-prod';
 import { timberChunks } from './plugins/chunks';
 import { clientChunkGroup } from './plugins/client-chunks';
@@ -102,6 +103,21 @@ export interface TimberUserConfig {
    * See design/02-rendering-pipeline.md §"Streaming Constraints".
    */
   renderTimeoutMs?: number;
+  /**
+   * Forward browser console output to the server terminal in dev mode.
+   *
+   * Sets the minimum log level to forward:
+   * - `'error'` — only `console.error`
+   * - `'warn'` — `console.error` + `console.warn` (default)
+   * - `'info'` — `console.error` + `console.warn` + `console.info`
+   * - `'none'` — disabled
+   *
+   * Does not intercept `console.log` or `console.debug` (too noisy).
+   * No effect in production builds.
+   *
+   * See TIM-513.
+   */
+  devBrowserLogs?: 'error' | 'warn' | 'info' | 'none';
   /** Dev-mode options. These have no effect in production builds. */
   dev?: {
     /** Threshold in ms to highlight slow phases in dev logging output. Default: 200. */
@@ -644,6 +660,7 @@ export function timber(config?: TimberUserConfig): PluginOption[] {
     timberBuildReport(ctx), // Post-build: route table with bundle sizes
     timberAdapterBuild(ctx), // Post-build: invoke adapter.buildOutput()
     timberDevLogs(ctx), // Dev-only: forward server console.* to browser console
+    timberDevBrowserLogs(ctx), // Dev-only: forward browser console.* to server terminal
     timberDevServer(ctx), // Must be last — configureServer post-hook runs after all watchers
   ];
 }

package/src/params/define.ts

@@ -15,6 +15,33 @@
 
 import type { Codec } from '#/codec.js';
 
+// ---------------------------------------------------------------------------
+// Server-only ALS reference for .load()
+// ---------------------------------------------------------------------------
+
+// Same pattern as search-params: eagerly registered at server startup
+// to avoid dynamic imports that lose ALS context. See TIM-523.
+let _rawSegmentParams: (() => Promise<Record<string, string | string[]>>) | undefined;
+
+/**
+ * Register the rawSegmentParams function. Called once at module load time
+ * from request-context.ts to avoid dynamic import at call time.
+ * @internal
+ */
+export function _setRawSegmentParamsFn(fn: () => Promise<Record<string, string | string[]>>): void {
+  _rawSegmentParams = fn;
+}
+
+function getRawSegmentParams(): Promise<Record<string, string | string[]>> {
+  if (!_rawSegmentParams) {
+    throw new Error(
+      '[timber] segmentParams.load() is only available on the server. ' +
+        'Use useSegmentParams() on the client.'
+    );
+  }
+  return _rawSegmentParams();
+}
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -39,6 +66,25 @@ export interface ParamsDefinition<T extends Record<string, unknown>> {
   /** Serialize typed values back to strings for URL construction. */
   serialize(values: T): Record<string, string>;
 
+  /**
+   * Load typed segment params from the current request context (ALS).
+   *
+   * Server-only. Reads rawSegmentParams() from ALS and coerces through
+   * this definition's codecs, returning fully typed params.
+   *
+   * ```ts
+   * // app/products/[id]/params.ts
+   * export const segmentParams = defineSegmentParams({ id: z.coerce.number() })
+   *
+   * // app/products/[id]/page.tsx
+   * import { segmentParams } from './params'
+   * export default async function Page() {
+   *   const { id } = await segmentParams.load() // id: number
+   * }
+   * ```
+   */
+  load(): Promise<T>;
+
   /** Read-only codec map. */
   codecs: { [K in keyof T]: Codec<T[K]> };
 }
@@ -250,9 +296,23 @@ export function defineSegmentParams<C extends Record<string, ParamField>>(
     return result;
   }
 
+  // ---- load ----
+  // ALS-backed: reads rawSegmentParams() from the current request context
+  // and parses through codecs. Server-only — throws on client.
+  async function load(): Promise<T> {
+    if (typeof window !== 'undefined') {
+      throw new Error(
+        '[timber] segmentParams.load() is server-only. ' + 'Use useSegmentParams() on the client.'
+      );
+    }
+    const raw = await getRawSegmentParams();
+    return parse(raw);
+  }
+
   const definition: ParamsDefinition<T> = {
     parse,
     serialize,
+    load,
     codecs: resolvedCodecs as { [K in keyof T]: Codec<T[K]> },
   };
 

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

@@ -0,0 +1,274 @@
+/**
+ * timber-dev-browser-logs — Forwards browser console output to the server terminal.
+ *
+ * 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.
+ *
+ * The server-side listener formats and prints the messages with color-coded
+ * prefixes: [browser:error], [browser:warn], [browser:info].
+ *
+ * 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.
+ */
+
+import type { Plugin, ViteDevServer } from 'vite';
+import type { PluginContext } from '#/index.js';
+
+// ─── Types ───────────────────────────────────────────────────────────────
+
+/** Log levels forwarded from the browser. */
+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 ──────────────────────────────────────────────────────────────
+
+/**
+ * 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').
+ */
+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') return;
+
+      // 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 {
+          // Never let log forwarding crash the server
+        }
+      });
+    },
+
+    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,
+        },
+      ];
+    },
+  };
+}

package/src/plugins/routing.ts

@@ -423,6 +423,13 @@ function generateManifestModule(tree: RouteTree): string {
     proxyLine = `  proxy: { load: ${v}, filePath: ${JSON.stringify(tree.proxy.filePath)} },`;
   }
 
+  // Global error page (Tier 2)
+  let globalErrorLine = '';
+  if (tree.globalError) {
+    const v = addImport(tree.globalError);
+    globalErrorLine = `  globalError: { load: ${v}, filePath: ${JSON.stringify(tree.globalError.filePath)} },`;
+  }
+
   // Interception rewrites — computed at build time from the route tree.
   // Only interceptedPattern and interceptingPrefix are needed at runtime.
   const rewrites = collectInterceptionRewrites(tree.root);
@@ -439,6 +446,7 @@ function generateManifestModule(tree: RouteTree): string {
     '',
     'const manifest = {',
     proxyLine,
+    globalErrorLine,
     rewritesLine,
     `  root: ${rootSerialized},`,
     '};',

package/src/routing/scanner.ts

@@ -83,6 +83,14 @@ export function scanRoutes(appDir: string, config: ScannerConfig = {}): RouteTre
     tree.proxy = proxyFile;
   }
 
+  // Check for global-error.{tsx,ts,jsx,js} at app root.
+  // Tier 2 error page — renders standalone (no layouts) when no segment-level
+  // error file is found. See design/10-error-handling.md §"Tier 2".
+  const globalErrorFile = findPageExtFile(appDir, 'global-error', extSet);
+  if (globalErrorFile) {
+    tree.globalError = globalErrorFile;
+  }
+
   // Scan the root directory's files
   scanSegmentFiles(appDir, tree.root, extSet);
 
@@ -547,3 +555,25 @@ function findFixedFile(dirPath: string, name: string): RouteFile | undefined {
   }
   return undefined;
 }
+
+/**
+ * Find a file using the configured page extensions (tsx, ts, jsx, js, mdx, etc.).
+ * Used for app-root conventions like global-error that aren't per-segment.
+ */
+function findPageExtFile(
+  dirPath: string,
+  name: string,
+  extSet: Set<string>
+): RouteFile | undefined {
+  for (const ext of extSet) {
+    const fullPath = join(dirPath, `${name}.${ext}`);
+    try {
+      if (statSync(fullPath).isFile()) {
+        return { filePath: fullPath, extension: ext };
+      }
+    } catch {
+      // File doesn't exist
+    }
+  }
+  return undefined;
+}

package/src/routing/types.ts

@@ -91,6 +91,16 @@ export interface RouteTree {
   root: SegmentNode;
   /** All discovered proxy.ts files (should be at most one, in app/) */
   proxy?: RouteFile;
+  /**
+   * Global error page: app/global-error.{tsx,ts,jsx,js}
+   *
+   * Rendered as a standalone full-page replacement (no layout wrapping)
+   * when no segment-level error file is found. SSR-only render path.
+   * Must provide its own <html> and <body>.
+   *
+   * See design/10-error-handling.md §"Tier 2 — Global Error Page"
+   */
+  globalError?: RouteFile;
 }
 
 /** Configuration passed to the scanner */