@timber-js/app 0.2.0-alpha.8 → 0.2.0-alpha.80

package/src/cache/handler-store.ts

@@ -0,0 +1,68 @@
+/**
+ * Module-level cache handler singleton.
+ *
+ * Lazily initialized to MemoryCacheHandler on first access. The framework
+ * replaces this at boot from timber.config.ts via setCacheHandler().
+ *
+ * This module avoids importing from ./index to prevent circular dependencies.
+ */
+
+// Inline the interface to avoid circular import with index.ts
+interface CacheHandlerLike {
+  get(key: string): Promise<{ value: unknown; stale: boolean } | null>;
+  set(key: string, value: unknown, opts: { ttl: number; tags: string[] }): Promise<void>;
+  invalidate(opts: { key?: string; tag?: string }): Promise<void>;
+}
+
+let handler: CacheHandlerLike | null = null;
+
+/** Replace the active cache handler. Called by the framework at boot. */
+export function setCacheHandler(h: CacheHandlerLike): void {
+  handler = h;
+}
+
+/**
+ * Get the active cache handler. Creates a default MemoryCacheHandler on
+ * first access if none has been set via setCacheHandler().
+ */
+export function getCacheHandler(): CacheHandlerLike {
+  if (!handler) {
+    // Inline a minimal LRU cache to avoid circular dep with index.ts.
+    // In production, the framework always calls setCacheHandler() at boot.
+    handler = createDefaultHandler();
+  }
+  return handler;
+}
+
+function createDefaultHandler(): CacheHandlerLike {
+  const store = new Map<string, { value: unknown; expiresAt: number; tags: string[] }>();
+  const maxEntries = 1000;
+
+  return {
+    async get(key) {
+      const entry = store.get(key);
+      if (!entry) return null;
+      store.delete(key);
+      store.set(key, entry);
+      const stale = Date.now() > entry.expiresAt;
+      return { value: entry.value, stale };
+    },
+    async set(key, value, opts) {
+      if (store.has(key)) store.delete(key);
+      while (store.size >= maxEntries) {
+        const oldest = store.keys().next().value;
+        if (oldest !== undefined) store.delete(oldest);
+        else break;
+      }
+      store.set(key, { value, expiresAt: Date.now() + opts.ttl * 1000, tags: opts.tags });
+    },
+    async invalidate(opts) {
+      if (opts.key) store.delete(opts.key);
+      if (opts.tag) {
+        for (const [key, entry] of store) {
+          if (entry.tags.includes(opts.tag)) store.delete(key);
+        }
+      }
+    },
+  };
+}

package/src/cache/index.ts

@@ -1,5 +1,7 @@
 // @timber-js/app/cache — Caching primitives
 
+import { estimateByteSize } from './sizeof.js';
+
 export interface CacheHandler {
   get(key: string): Promise<{ value: unknown; stale: boolean } | null>;
   set(key: string, value: unknown, opts: { ttl: number; tags: string[] }): Promise<void>;
@@ -12,19 +14,40 @@ export interface CacheOptions<Fn extends (...args: any[]) => any> {
   key?: (...args: Parameters<Fn>) => string;
   staleWhileRevalidate?: boolean;
   tags?: string[] | ((...args: Parameters<Fn>) => string[]);
+  /** Timeout (ms) for singleflight-coalesced calls. Prevents hung fn() from
+   *  permanently blocking all future callers for the same cache key. See TIM-518. */
+  timeoutMs?: number;
 }
 
 export interface MemoryCacheHandlerOptions {
   /** Maximum number of entries. Oldest accessed entries are evicted first. Default: 1000. */
+  maxEntries?: number;
+  /**
+   * @deprecated Use `maxEntries` instead. Will be removed in a future release.
+   * Alias for `maxEntries` — maximum number of entries (not bytes).
+   */
   maxSize?: number;
+  /** Maximum total byte budget for all cached values. Oldest entries are evicted when exceeded. Default: no limit. */
+  maxBytes?: number;
+  /** Maximum byte size for a single cache entry. Entries exceeding this are silently dropped. Default: no limit. */
+  maxEntryBytes?: number;
 }
 
 export class MemoryCacheHandler implements CacheHandler {
-  private store = new Map<string, { value: unknown; expiresAt: number; tags: string[] }>();
-  private maxSize: number;
+  private store = new Map<
+    string,
+    { value: unknown; expiresAt: number; tags: string[]; byteSize: number }
+  >();
+  private maxEntries: number;
+  private maxBytes: number | undefined;
+  private maxEntryBytes: number | undefined;
+  private currentBytes = 0;
 
   constructor(opts?: MemoryCacheHandlerOptions) {
-    this.maxSize = opts?.maxSize ?? 1000;
+    // maxEntries takes precedence over deprecated maxSize
+    this.maxEntries = opts?.maxEntries ?? opts?.maxSize ?? 1000;
+    this.maxBytes = opts?.maxBytes;
+    this.maxEntryBytes = opts?.maxEntryBytes;
   }
 
   async get(key: string) {
@@ -40,18 +63,33 @@ export class MemoryCacheHandler implements CacheHandler {
   }
 
   async set(key: string, value: unknown, opts: { ttl: number; tags: string[] }) {
-    // If key already exists, delete first to refresh insertion order
+    const byteSize = estimateByteSize(value);
+
+    // Reject entries exceeding per-entry byte limit
+    if (this.maxEntryBytes !== undefined && byteSize > this.maxEntryBytes) {
+      return;
+    }
+
+    // If key already exists, delete first to refresh insertion order and reclaim bytes
     if (this.store.has(key)) {
+      const existing = this.store.get(key)!;
+      this.currentBytes -= existing.byteSize;
       this.store.delete(key);
     }
 
-    // Evict oldest entries (front of Map) if at capacity
-    while (this.store.size >= this.maxSize) {
-      const oldest = this.store.keys().next().value;
-      if (oldest !== undefined) {
-        this.store.delete(oldest);
-      } else {
-        break;
+    // Evict oldest entries (front of Map) if at entry count capacity
+    while (this.store.size >= this.maxEntries) {
+      this.evictOldest();
+    }
+
+    // Evict oldest entries if byte budget would be exceeded
+    if (this.maxBytes !== undefined) {
+      while (this.currentBytes + byteSize > this.maxBytes && this.store.size > 0) {
+        this.evictOldest();
+      }
+      // If the single entry exceeds the total byte budget, don't store it
+      if (this.currentBytes + byteSize > this.maxBytes) {
+        return;
       }
     }
 
@@ -59,16 +97,23 @@ export class MemoryCacheHandler implements CacheHandler {
       value,
       expiresAt: Date.now() + opts.ttl * 1000,
       tags: opts.tags,
+      byteSize,
     });
+    this.currentBytes += byteSize;
   }
 
   async invalidate(opts: { key?: string; tag?: string }) {
     if (opts.key) {
-      this.store.delete(opts.key);
+      const entry = this.store.get(opts.key);
+      if (entry) {
+        this.currentBytes -= entry.byteSize;
+        this.store.delete(opts.key);
+      }
     }
     if (opts.tag) {
       for (const [key, entry] of this.store) {
         if (entry.tags.includes(opts.tag)) {
+          this.currentBytes -= entry.byteSize;
           this.store.delete(key);
         }
       }
@@ -79,13 +124,31 @@ export class MemoryCacheHandler implements CacheHandler {
   get size(): number {
     return this.store.size;
   }
+
+  /** Estimated total byte size of all cached values. */
+  get bytes(): number {
+    return this.currentBytes;
+  }
+
+  /** Evict the oldest entry (front of Map). */
+  private evictOldest(): void {
+    const oldest = this.store.keys().next().value;
+    if (oldest !== undefined) {
+      const entry = this.store.get(oldest)!;
+      this.currentBytes -= entry.byteSize;
+      this.store.delete(oldest);
+    }
+  }
 }
 
 export { RedisCacheHandler } from './redis-handler';
 export type { RedisClient } from './redis-handler';
-export { createCache } from './timber-cache';
-export { registerCachedFunction } from './register-cached-function';
-export type { RegisterCachedFunctionOptions } from './register-cached-function';
-export { stableStringify } from './stable-stringify';
-export { createSingleflight } from './singleflight';
-export type { Singleflight } from './singleflight';
+export { cache } from './cache-api';
+export { setCacheHandler, getCacheHandler } from './handler-store';
+// NOTE: registerCachedFunction (runtime for 'use cache' directive) removed.
+// Future feature pending design doc. See design/06-caching.md.
+export { estimateByteSize } from './sizeof';
+// stableStringify, createSingleflight, and SingleflightTimeoutError are
+// internal utilities used by the cache implementation. They are not
+// re-exported here — import directly from the source files if needed
+// within the package. See TIM-720.

package/src/cache/singleflight.ts

@@ -3,24 +3,82 @@
  * execution. All callers receive the same result (or error).
  *
  * Per-process, in-memory. Each process coalesces independently.
+ *
+ * An optional `timeoutMs` prevents hung `fn()` calls from permanently
+ * blocking all future callers for that key. When set, `fn()` is raced
+ * against a timeout — if the timeout fires first, the promise rejects
+ * with `SingleflightTimeoutError`, `finally` cleans up the key, and
+ * subsequent callers can retry. See TIM-518.
  */
+
+export interface SingleflightOptions {
+  /** Maximum time (ms) a coalesced call may run before being rejected. */
+  timeoutMs?: number;
+}
+
 export interface Singleflight {
   do<T>(key: string, fn: () => Promise<T>): Promise<T>;
 }
 
-export function createSingleflight(): Singleflight {
+/**
+ * Error thrown when a singleflight call exceeds `timeoutMs`.
+ * Exported so callers can distinguish timeout from other errors.
+ */
+export class SingleflightTimeoutError extends Error {
+  constructor(key: string, timeoutMs: number) {
+    super(`Singleflight timeout: key "${key}" exceeded ${timeoutMs}ms`);
+    this.name = 'SingleflightTimeoutError';
+  }
+}
+
+export function createSingleflight(opts?: SingleflightOptions): Singleflight {
   const inflight = new Map<string, Promise<unknown>>();
+  const timeoutMs = opts?.timeoutMs;
 
   return {
     do<T>(key: string, fn: () => Promise<T>): Promise<T> {
       const existing = inflight.get(key);
       if (existing) return existing as Promise<T>;
 
-      const promise = fn().finally(() => {
+      let promise: Promise<T>;
+
+      if (timeoutMs != null && timeoutMs > 0) {
+        // Race fn() against a timeout to prevent hung calls from
+        // permanently blocking the key. See TIM-518.
+        promise = new Promise<T>((resolve, reject) => {
+          const timer = setTimeout(
+            () => reject(new SingleflightTimeoutError(key, timeoutMs)),
+            timeoutMs
+          );
+          // Wrap in try/catch so a synchronous throw from fn()
+          // (e.g. argument validation) still clears the timer.
+          // Without this, the timer leaks until expiry.
+          try {
+            fn().then(
+              (value) => {
+                clearTimeout(timer);
+                resolve(value);
+              },
+              (err) => {
+                clearTimeout(timer);
+                reject(err);
+              }
+            );
+          } catch (err) {
+            clearTimeout(timer);
+            reject(err);
+          }
+        });
+      } else {
+        promise = fn();
+      }
+
+      const tracked = promise.finally(() => {
         inflight.delete(key);
       });
-      inflight.set(key, promise);
-      return promise;
+
+      inflight.set(key, tracked);
+      return tracked as Promise<T>;
     },
   };
 }

package/src/cache/sizeof.ts

@@ -0,0 +1,31 @@
+/**
+ * Lightweight byte-size estimation for cache entries.
+ *
+ * Estimates the in-memory byte cost of a JavaScript value using
+ * JSON.stringify().length * 2 (UTF-16 char width). This is a rough
+ * approximation — it doesn't account for V8 object overhead, Map
+ * metadata, or non-serializable values — but it's fast and good
+ * enough for cache budget enforcement.
+ *
+ * Values that fail JSON serialization (circular references, BigInt,
+ * etc.) return 0, allowing the entry to be cached without counting
+ * toward the byte budget. This is a conservative choice: it's better
+ * to cache and undercount than to reject the entry.
+ */
+
+/**
+ * Estimate the byte size of a value.
+ *
+ * Uses `JSON.stringify(value).length * 2` to approximate UTF-16
+ * in-memory size. Returns 0 if the value is not serializable.
+ */
+export function estimateByteSize(value: unknown): number {
+  try {
+    const json = JSON.stringify(value);
+    if (json === undefined) return 0;
+    // Each JS string character is 2 bytes (UTF-16)
+    return json.length * 2;
+  } catch {
+    return 0;
+  }
+}

package/src/cache/timber-cache.ts

@@ -1,10 +1,10 @@
 import type { CacheHandler, CacheOptions } from './index';
 import { stableStringify } from './stable-stringify';
 import { createSingleflight } from './singleflight';
-import { addSpanEventSync } from '#/server/tracing.js';
+import { addSpanEventSync } from '../server/tracing.js';
 import { fnv1aHash } from './fast-hash.js';
 
-const singleflight = createSingleflight();
+const defaultSingleflight = createSingleflight();
 
 /**
  * Generate a cache key from function identity and serialized args.
@@ -53,10 +53,16 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
   fn: Fn,
   opts: CacheOptions<Fn>,
   handler: CacheHandler
-): (...args: Parameters<Fn>) => Promise<Awaited<ReturnType<Fn>>> {
+): Fn {
   const fnId = `timber-cache:${fnIdCounter++}`;
+  const sf = opts.timeoutMs
+    ? createSingleflight({ timeoutMs: opts.timeoutMs })
+    : defaultSingleflight;
 
-  return async (...args: Parameters<Fn>): Promise<Awaited<ReturnType<Fn>>> => {
+  // Cast to Fn to preserve the original function's generic call signature.
+  // Without this, generic type parameters (e.g. <T> in apiFetch<T>) are
+  // erased and callers lose type safety on the return type.
+  return (async (...args: Parameters<Fn>): Promise<Awaited<ReturnType<Fn>>> => {
     const key = opts.key ? opts.key(...args) : defaultKeyGenerator(fnId, args);
 
     const cacheStart = performance.now();
@@ -80,25 +86,23 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
         stale: true,
       });
       // Serve stale immediately, trigger background refetch
-      singleflight
-        .do(`swr:${key}`, async () => {
-          try {
-            const fresh = await fn(...args);
-            const tags = resolveTags(opts, args);
-            await handler.set(key, fresh, { ttl: opts.ttl, tags });
-          } catch {
-            // Failed refetch — stale entry continues to be served.
-            // Error is swallowed per design doc: "Error is logged."
-          }
-        })
-        .catch(() => {
-          // Singleflight promise rejection handled — stale continues.
-        });
+      sf.do(`swr:${key}`, async () => {
+        try {
+          const fresh = await fn(...args);
+          const tags = resolveTags(opts, args);
+          await handler.set(key, fresh, { ttl: opts.ttl, tags });
+        } catch {
+          // Failed refetch — stale entry continues to be served.
+          // Error is swallowed per design doc: "Error is logged."
+        }
+      }).catch(() => {
+        // Singleflight promise rejection handled — stale continues.
+      });
       return cached.value as Awaited<ReturnType<Fn>>;
     }
 
     // Cache miss (or stale without SWR) — execute with singleflight
-    const result = await singleflight.do(key, () => fn(...args));
+    const result = await sf.do(key, () => fn(...args));
     const tags = resolveTags(opts, args);
     await handler.set(key, result, { ttl: opts.ttl, tags });
 
@@ -109,7 +113,7 @@ export function createCache<Fn extends (...args: any[]) => Promise<any>>(
     });
 
     return result as Awaited<ReturnType<Fn>>;
-  };
+  }) as unknown as Fn;
 }
 
 /**

package/src/cli.ts

@@ -63,7 +63,12 @@ export interface ViteDeps {
 
 /**
  * Start the Vite dev server.
- * Middleware re-runs on file change via HMR wiring in timber-routing.
+ *
+ * The timber plugin binds the port immediately with a holding page
+ * (in rootSync's config hook) so browsers see a "starting..." page
+ * instead of ERR_CONNECTION_REFUSED during initialization.
+ *
+ * See design/21-dev-server.md, TIM-665.
  */
 export async function runDev(options: CommandOptions, _deps?: ViteDeps): Promise<void> {
   const createServer = _deps?.createServer ?? (await import('vite')).createServer;

package/src/client/browser-dev.ts

@@ -1,5 +1,6 @@
 /**
- * Dev-only browser helpers — server log replay and client error forwarding.
+ * Dev-only browser helpers — server log replay, client error forwarding,
+ * and compiling overlay.
  *
  * These are only active when import.meta.hot is available (Vite dev mode).
  * Extracted from browser-entry.ts to keep files under 500 lines.
@@ -100,6 +101,132 @@ export function setupServerLogReplay(hot: Pick<HotInterface, 'on'>): void {
   });
 }
 
+// ─── Compiling Overlay ──────────────────────────────────────────
+
+/**
+ * Compiling overlay state.
+ *
+ * A small non-blocking indicator in the bottom-left corner that shows
+ * "Compiling..." during HMR/module updates. Uses a 200ms debounce so
+ * near-instant updates never flash the indicator.
+ *
+ * The overlay is lazily created on first show and reused thereafter.
+ * All styles are inline — no external CSS dependency.
+ */
+
+let overlayEl: HTMLDivElement | null = null;
+let showTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let pendingUpdates = 0;
+
+/** Debounce delay before showing the overlay (ms). */
+const SHOW_DELAY_MS = 200;
+
+/**
+ * Get the effective debounce delay.
+ * Checks for a test override on `window.__timber_compiling_debounce`
+ * (number) to allow E2E tests to bypass the debounce.
+ */
+function getShowDelay(): number {
+  const win = window as unknown as { __timber_compiling_debounce?: number };
+  return typeof win.__timber_compiling_debounce === 'number'
+    ? win.__timber_compiling_debounce
+    : SHOW_DELAY_MS;
+}
+
+/**
+ * Lazily create the overlay DOM element.
+ * Appended to document.body with fixed positioning in the bottom-left.
+ */
+function getOrCreateOverlay(): HTMLDivElement {
+  if (overlayEl) return overlayEl;
+
+  const el = document.createElement('div');
+  el.setAttribute('data-timber-compiling-overlay', '');
+  Object.assign(el.style, {
+    position: 'fixed',
+    bottom: '16px',
+    left: '16px',
+    padding: '6px 12px',
+    background: 'rgba(0, 0, 0, 0.85)',
+    color: '#fff',
+    fontSize: '13px',
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontWeight: '500',
+    borderRadius: '6px',
+    zIndex: '2147483647',
+    pointerEvents: 'none',
+    opacity: '0',
+    transition: 'opacity 150ms ease',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+    lineHeight: '1',
+  });
+  el.textContent = 'Compiling…';
+  document.body.appendChild(el);
+  overlayEl = el;
+  return el;
+}
+
+/**
+ * Signal that an HMR/module update has started.
+ *
+ * If an update is already tracked, this increments the counter.
+ * The overlay is shown after SHOW_DELAY_MS to avoid flashing
+ * for fast updates.
+ *
+ * When the delay is 0 (E2E test override), the overlay is shown
+ * synchronously to eliminate the race where hideCompilingOverlay()
+ * clears the show timeout before it fires.
+ */
+export function showCompilingOverlay(): void {
+  pendingUpdates++;
+  if (pendingUpdates === 1) {
+    const delay = getShowDelay();
+    if (delay <= 0) {
+      // Synchronous show — no setTimeout race with hideCompilingOverlay().
+      // Used by E2E tests to guarantee the overlay is visible before
+      // the async HMR refresh begins its network roundtrip.
+      const el = getOrCreateOverlay();
+      el.style.opacity = '1';
+    } else {
+      // Production path — debounce to avoid flashing for fast updates
+      showTimeoutId = setTimeout(() => {
+        showTimeoutId = null;
+        const el = getOrCreateOverlay();
+        el.style.opacity = '1';
+      }, delay);
+    }
+  }
+}
+
+/**
+ * Signal that an HMR/module update has completed.
+ *
+ * When all pending updates are resolved, the overlay is hidden.
+ * If the overlay was never shown (update completed within the
+ * debounce window), the timeout is cleared — no visual flash.
+ *
+ * Test hook: if `window.__timber_hold_compiling_overlay` is true,
+ * the overlay stays visible. E2E tests use this to avoid a race
+ * where the RSC refresh completes between polling intervals,
+ * making the overlay impossible to observe.
+ */
+export function hideCompilingOverlay(): void {
+  const win = window as unknown as { __timber_hold_compiling_overlay?: boolean };
+  if (win.__timber_hold_compiling_overlay) return;
+
+  pendingUpdates = Math.max(0, pendingUpdates - 1);
+  if (pendingUpdates === 0) {
+    if (showTimeoutId !== null) {
+      clearTimeout(showTimeoutId);
+      showTimeoutId = null;
+    }
+    if (overlayEl) {
+      overlayEl.style.opacity = '0';
+    }
+  }
+}
+
 // ─── Client Error Forwarding ────────────────────────────────────────
 
 /**