akanjs 2.4.2-rc.3 → 3.0.0-alpha.1

package/base/baseEnv.ts

@@ -13,8 +13,6 @@ export interface BaseEnv {
   appName: string;
   environment: Environment;
   operationMode: "local" | "edge" | "cloud" | "module";
-  tunnelUsername: string;
-  tunnelPassword: string;
   databaseMode?: DatabaseMode;
 }
 export type BackendEnv = BaseEnv & {
@@ -87,16 +85,12 @@ export const getEnv = (): ClientEnv => {
   const environment = (process.env.AKAN_PUBLIC_ENV ?? "debug") as BaseEnv["environment"];
   const operationMode = (process.env.AKAN_PUBLIC_OPERATION_MODE ??
     (environment === "local" ? "local" : "cloud")) as BaseEnv["operationMode"];
-  const tunnelUsername = process.env.SSH_TUNNEL_USERNAME ?? "root";
-  const tunnelPassword = process.env.SSH_TUNNEL_PASSWORD ?? repoName;
   const baseEnv: BaseEnv = {
     repoName,
     serveDomain,
     appName,
     environment,
     operationMode,
-    tunnelUsername,
-    tunnelPassword,
     databaseMode: process.env.AKAN_DATABASE_MODE as DatabaseMode | undefined,
   } as const;
   const side = typeof window === "undefined" ? "server" : "client";

package/client/cn.ts

@@ -0,0 +1,52 @@
+import { type ClassNameValue, extendTailwindMerge } from "tailwind-merge";
+
+/**
+ * Akan's semantic color tokens beyond tailwind-merge's built-in Tailwind palette.
+ * Registering them under `theme.color` teaches tailwind-merge that `bg-*`/`text-*`/
+ * `border-*`/… built from these names belong to the same conflict group, so
+ * `cn("bg-primary", "bg-open")` correctly resolves to `"bg-open"` instead of keeping both.
+ */
+export const colorTokens = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "accent",
+  "accent-foreground",
+  "muted",
+  "muted-foreground",
+  "destructive",
+  "destructive-foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "info",
+  "info-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "neutral",
+  "neutral-foreground",
+  "open",
+  "open-foreground",
+  "border",
+  "input",
+  "ring",
+];
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      color: colorTokens,
+    },
+  },
+});
+
+/** The one class-combining function: joins strings/arrays/conditional parts (`cond && "x"`) and
+ *  resolves Tailwind conflicts with a shared tailwind-merge instance that knows Akan's semantic
+ *  color tokens. clsx-style object syntax (`{ x: cond }`) is not supported — write `cond && "x"`. */
+export const cn = (...inputs: ClassNameValue[]) => twMerge(...inputs);

package/client/csrTypes.ts

@@ -270,8 +270,8 @@ export const defaultPageState: PageState = {
   gesture: true,
   cache: false,
   ssr: "stream",
-  topSafeAreaColor: "var(--color-base-100, Canvas)",
-  bottomSafeAreaColor: "var(--color-base-100, Canvas)",
+  topSafeAreaColor: "var(--color-background, Canvas)",
+  bottomSafeAreaColor: "var(--color-background, Canvas)",
 };
 
 export interface Location {

package/client/frameConfig.ts

@@ -152,8 +152,8 @@ export function resolvePageState({
         : (config.gesture ?? false),
     cache: config.cache ?? false,
     ssr: config.ssr ?? "stream",
-    topSafeAreaColor: config.topSafeAreaColor ?? "var(--color-base-100, Canvas)",
-    bottomSafeAreaColor: config.bottomSafeAreaColor ?? "var(--color-base-100, Canvas)",
+    topSafeAreaColor: config.topSafeAreaColor ?? "var(color-background, Canvas)",
+    bottomSafeAreaColor: config.bottomSafeAreaColor ?? "var(color-background, Canvas)",
   };
 }
 

package/client/index.ts

@@ -1,4 +1,5 @@
 export * from "./clientRuntime";
+export * from "./cn";
 export * from "./cookie";
 export * from "./createFont";
 export * from "./csrTypes";

package/client/types.ts

@@ -1,11 +1,7 @@
 import type { BaseInsight } from "akanjs/constant";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
-import { type ClassValue, clsx as clsxLib } from "clsx";
 import type { ReactElement, ReactNode } from "react";
 
-/** Composes class names with the shared clsx implementation. */
-export const clsx = (...args: ClassValue[]) => clsxLib(...args);
-
 export type ReactFontStyle = "normal" | "italic" | "oblique";
 export type ReactFontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
 export type ReactFontCategory = "monospace" | "sans-serif" | "serif" | "display";

package/common/index.ts

@@ -15,6 +15,7 @@ export { isDayjs } from "./isDayjs";
 export { isEmail } from "./isEmail";
 export { isPhoneNumber } from "./isPhoneNumber";
 export { isQueryEqual } from "./isQueryEqual";
+export { isThenable } from "./isThenable";
 export { isValidDate } from "./isValidDate";
 export { decodeJwtPayload } from "./jwtDecode";
 export { Logger, type LoggerSink, type LoggerSinkEntry, type LogLevel } from "./Logger";

package/common/isThenable.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether a value is awaitable. Duck-typed rather than `instanceof Promise` so a thenable produced by a
+ * different realm or promise implementation still counts — a same-realm check silently misses those.
+ *
+ * `<Button>` uses this to decide whether a click handler is asynchronous: a handler that returns a
+ * thenable gets the pending/success states, a plain one renders as an ordinary button. That makes the
+ * distinction impossible to forget, unlike an explicit flag.
+ */
+export const isThenable = (value: unknown): value is PromiseLike<unknown> =>
+  !!value &&
+  (typeof value === "object" || typeof value === "function") &&
+  typeof Reflect.get(value, "then") === "function";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.4.2-rc.3",
+  "version": "3.0.0-alpha.1",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -178,10 +178,11 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
     "immer": "^11.1.8",
-    "sharp": "^0.34.5"
+    "sharp": "^0.34.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.3.0"
   },
   "peerDependencies": {
     "@capacitor-community/contacts": "^7.2.0",
@@ -210,7 +211,6 @@
     "chance": "^1.1.13",
     "cordova-plugin-purchase": "^13.16.0",
     "croner": "^10.0.1",
-    "daisyui": "5.5.23",
     "firebase": "^12.13.0",
     "ioredis": "^5.10.1",
     "mermaid": "^11.15.0",
@@ -308,9 +308,6 @@
     "croner": {
       "optional": true
     },
-    "daisyui": {
-      "optional": true
-    },
     "firebase": {
       "optional": true
     },

package/server/SSR_MEMORY_DIAGNOSIS.md

@@ -23,14 +23,31 @@ Read snapshots from:
 curl http://localhost:8080/_akan/app/metrics
 ```
 
+A replica and its RSC worker are separate processes and are reported separately. **`rssBytes` is the
+replica's own; the worker's is `rscWorkerRssBytes`.** Sum them for what the pod pays.
+
 Key fields:
 
-- `rssBytes`, `heapUsedBytes`, `jscHeapSizeBytes`: distinguish RSS-only native retention from JS heap retention.
+- `rssBytes`, `heapUsedBytes`, `jscHeapSizeBytes`: the replica. Distinguish RSS-only native retention from JS
+  heap retention.
+- `rscWorkerRssBytes`, `rscWorkerHeapUsedBytes`, `rscWorkerJscHeapSizeBytes`, `rscWorkerJscExtraMemorySizeBytes`:
+  the same for the worker. `jscExtra` is off-heap, mostly typed-array backing stores.
 - `rscRenderCount`, `rscInFlightRenderCount`: detect request lifecycle leaks.
 - `rscLoadedRouteModuleCount`, `rscRouteModuleCacheHits`, `rscRouteModuleCacheMisses`: detect route module warm-up.
-- `ssrChunkRegistrySize`, `ssrChunkLoadCount`: detect full-document SSR client chunk retention.
+- `ssrChunkRegistrySize`, `ssrChunkLoadCount`: full-document SSR client chunk loading. **`…RegistrySize` counts
+  keys, not bytes** — evicting does not unload the module, so it can never fall on its own.
+- `httpHtmlCacheEntries` / `httpHtmlCacheBytes`, `rscResultCacheEntries` / `rscResultCacheBytes`,
+  `rscPatchResultCacheEntries` / `rscPatchResultCacheBytes`: what each cache actually holds. Entry count alone
+  says nothing when entries span three orders of magnitude.
 - `httpFullSsrCount`, `httpRscNavigationCount`, `httpStaticAssetCount`, `httpImageCount`: separate request kinds.
 
+Two things measured on `apps/akan` that shape how to read all of the above:
+
+- **Growth converges; it is not a leak.** Ten passes over the same routes plateau by roughly the sixth, with a
+  flat JS heap throughout. Three passes is not enough to tell a plateau from a ratchet.
+- **Freeing JS objects does not lower RSS.** Emptying both result caches returns their bytes to the heap and
+  leaves RSS unchanged. Only not allocating, or restarting the process, reduces what the pod pays.
+
 ## Scenarios
 
 ### Same Route Repeated

package/server/akanApp.ts

@@ -1,3 +1,5 @@
+
+
 import { mkdir, readdir, rm } from "node:fs/promises";
 import path from "node:path";
 import { Logger } from "akanjs/common";

package/server/cachePolicy.ts

@@ -234,20 +234,62 @@ export function shouldInvalidateRouteCacheEntry(
   return false;
 }
 
-export class LruTtlCache<T> {
-  readonly #entries = new Map<string, { value: T; expiresAt: number }>();
+export interface LruTtlCacheOptions<T> {
+  /**
+   * Measures one entry's payload. Entry count alone says nothing about a cache whose entries span
+   * three orders of magnitude, and a byte ceiling needs a running total to enforce. The default
+   * reports 0 rather than guessing, so `byteSize` stays honest about not knowing.
+   */
+  sizeOf?: (value: T) => number;
+  /** Total payload ceiling. 0 leaves the cache bounded only by `maxEntries`. */
+  maxBytes?: number;
+  /** An entry over this is not stored at all, rather than evicting everything else to fit it. */
+  maxEntryBytes?: number;
+  /**
+   * Cadence of the idle sweep. Without one a filled cache never shrinks: an entry is dropped only
+   * when its own key is fetched after expiry or when a write evicts it, so a pod that stops
+   * serving holds its peak forever — measured at 100 entries / 21.4 MiB still resident 310s after
+   * the last request, with a 30s TTL. 0 disables it.
+   */
+  sweepIntervalMs?: number;
+}
 
-  constructor(readonly maxEntries = 100) {}
+export class LruTtlCache<T> {
+  readonly #entries = new Map<string, { value: T; expiresAt: number; byteLength: number }>();
+  #byteLength = 0;
+  #sweepTimer: ReturnType<typeof setInterval> | null = null;
+  readonly #sizeOf: (value: T) => number;
+  readonly #maxBytes: number;
+  readonly #maxEntryBytes: number;
+
+  constructor(
+    readonly maxEntries = 100,
+    options: LruTtlCacheOptions<T> = {},
+  ) {
+    this.#sizeOf = options.sizeOf ?? (() => 0);
+    this.#maxBytes = options.maxBytes ?? 0;
+    this.#maxEntryBytes = options.maxEntryBytes ?? 0;
+    const sweepIntervalMs = options.sweepIntervalMs ?? 0;
+    if (sweepIntervalMs > 0) {
+      this.#sweepTimer = setInterval(() => this.sweepExpired(), sweepIntervalMs);
+      
+      (this.#sweepTimer as { unref?: () => void }).unref?.();
+    }
+  }
 
   get size(): number {
     return this.#entries.size;
   }
 
+  get byteSize(): number {
+    return this.#byteLength;
+  }
+
   get(key: string): T | null {
     const entry = this.#entries.get(key);
     if (!entry) return null;
     if (entry.expiresAt <= Date.now()) {
-      this.#entries.delete(key);
+      this.#remove(key);
       return null;
     }
     this.#entries.delete(key);
@@ -255,26 +297,56 @@ export class LruTtlCache<T> {
     return entry.value;
   }
 
-  set(key: string, value: T, ttlSeconds: number): void {
-    this.#entries.delete(key);
+  /** Returns whether the entry was stored; a payload over `maxEntryBytes` is rejected. */
+  set(key: string, value: T, ttlSeconds: number): boolean {
+    this.#remove(key);
+    const byteLength = LruTtlCache.#measure(this.#sizeOf, value);
+    if (this.#maxEntryBytes > 0 && byteLength > this.#maxEntryBytes) return false;
+    this.sweepExpired();
     const maxEntries = this.maxEntries > 0 ? this.maxEntries : 100;
     while (this.#entries.size >= maxEntries) {
-      const oldest = this.#entries.keys().next().value;
-      if (!oldest) break;
-      this.#entries.delete(oldest);
+      if (!this.#removeOldest()) break;
+    }
+    while (this.#maxBytes > 0 && this.#entries.size > 0 && this.#byteLength + byteLength > this.#maxBytes) {
+      if (!this.#removeOldest()) break;
     }
-    this.#entries.set(key, { value, expiresAt: Date.now() + ttlSeconds * 1000 });
+    this.#entries.set(key, { value, expiresAt: Date.now() + ttlSeconds * 1000, byteLength });
+    this.#byteLength += byteLength;
+    return true;
+  }
+
+  /**
+   * Drops every expired entry. Deliberately a full scan rather than a walk from the oldest that
+   * stops at the first live entry: insertion order is *LRU* order because `get` reinserts, and TTLs
+   * differ per entry, so expiry is not monotonic in map order and an early break would leave
+   * expired entries behind. The map is bounded by `maxEntries`, so the scan is cheap.
+   */
+  sweepExpired(now = Date.now()): number {
+    let removed = 0;
+    for (const [key, entry] of this.#entries) {
+      if (entry.expiresAt > now) continue;
+      this.#remove(key);
+      removed += 1;
+    }
+    return removed;
+  }
+
+  /** Stops the idle sweep. The cache stays usable; only the timer goes away. */
+  dispose(): void {
+    if (!this.#sweepTimer) return;
+    clearInterval(this.#sweepTimer);
+    this.#sweepTimer = null;
   }
 
   delete(key: string): boolean {
-    return this.#entries.delete(key);
+    return this.#remove(key);
   }
 
   invalidate(predicate: (key: string, value: T) => boolean): number {
     let count = 0;
     for (const [key, entry] of this.#entries) {
       if (!predicate(key, entry.value)) continue;
-      this.#entries.delete(key);
+      this.#remove(key);
       count += 1;
     }
     return count;
@@ -282,5 +354,35 @@ export class LruTtlCache<T> {
 
   clear(): void {
     this.#entries.clear();
+    this.#byteLength = 0;
+  }
+
+  static parseByteCeiling(value: string | undefined | null, fallback = 0): number {
+    const parsed = Number.parseInt(value ?? "", 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  }
+
+  #remove(key: string): boolean {
+    const entry = this.#entries.get(key);
+    if (!entry) return false;
+    this.#entries.delete(key);
+    this.#byteLength -= entry.byteLength;
+    return true;
+  }
+
+  #removeOldest(): boolean {
+    const oldest = this.#entries.keys().next().value;
+    if (!oldest) return false;
+    return this.#remove(oldest);
+  }
+
+  /** A measurement must never fail a cache write, and a bad measurement must never skew the total. */
+  static #measure<T>(sizeOf: (value: T) => number, value: T): number {
+    try {
+      const measured = sizeOf(value);
+      return Number.isFinite(measured) && measured > 0 ? measured : 0;
+    } catch {
+      return 0;
+    }
   }
 }

package/server/processMetricsCollector.ts

@@ -138,6 +138,10 @@ export class ProcessMetricsCollector {
       ...(metrics.jscHeapSizeBytes !== undefined
         ? [`jscHeap=${ProcessMetricsCollector.formatBytes(metrics.jscHeapSizeBytes)}`]
         : []),
+
+      ...(metrics.rscWorkerRssBytes !== undefined
+        ? [`rscWorkerRss=${ProcessMetricsCollector.formatBytes(metrics.rscWorkerRssBytes)}`]
+        : []),
       ...(metrics.eventLoopLagMeanMs !== undefined
         ? [`elLag=${metrics.eventLoopLagMeanMs}/${metrics.eventLoopLagP99Ms ?? 0}/${metrics.eventLoopLagMaxMs ?? 0}ms`]
         : []),

package/server/rscWorker.tsx

@@ -24,6 +24,7 @@ import { renderToReadableStream } from "react-server-dom-webpack/server.node";
 import type { ClientManifest } from "./artifact";
 import {
   LruTtlCache,
+  type LruTtlCacheOptions,
   parsePositiveInt,
   type RouteCacheEntry,
   type RouteCacheInvalidation,
@@ -122,6 +123,9 @@ interface FlightRenderResult {
   cancelled: boolean;
 }
 
+/** Well above any sensible TTL: this reclaims a cache nobody is reading, not tracks expiry closely. */
+const RESULT_CACHE_SWEEP_INTERVAL_MS = 60_000;
+
 function hashRscTraceCacheKey(cacheKey: string): string {
   let hash = 5381;
   for (let index = 0; index < cacheKey.length; index += 1) hash = (hash * 33) ^ cacheKey.charCodeAt(index);
@@ -197,11 +201,14 @@ export class RscRenderer {
     pagesBundleBuildId: 0,
   };
   readonly #routeStats = new Map<string, RouteRenderStats>();
+
   #resultCache = new LruTtlCache<CachedRscResult>(
     parsePositiveInt(process.env.AKAN_RSC_RESULT_CACHE_MAX_ENTRIES) ?? 100,
+    RscRenderer.#resultCacheOptions(),
   );
   #patchResultCache = new LruTtlCache<CachedRscResult>(
     parsePositiveInt(process.env.AKAN_RSC_RESULT_CACHE_MAX_ENTRIES) ?? 100,
+    RscRenderer.#resultCacheOptions(),
   );
   readonly #activeRenderReaders = new Map<string, ReadableStreamDefaultReader<Uint8Array>>();
   readonly #cancelledRenderRequests = new Set<string>();
@@ -818,7 +825,11 @@ export class RscRenderer {
       rscLoadedRouteModuleKeys: routeStats.loadedModuleKeys,
       rscTopRoutesByRenderCount: this.#topRoutes((route) => route.count),
       rscTopRoutesByFlightBytes: this.#topRoutes((route) => route.flightBytes),
-      rscResultCacheEntries: this.#resultCache.size + this.#patchResultCache.size,
+
+      rscResultCacheEntries: this.#resultCache.size,
+      rscResultCacheBytes: this.#resultCache.byteSize,
+      rscPatchResultCacheEntries: this.#patchResultCache.size,
+      rscPatchResultCacheBytes: this.#patchResultCache.byteSize,
       rscResultCacheHits: this.#resultCacheHits,
       rscResultCacheMisses: this.#resultCacheMisses,
       rscResultCacheBypass: this.#resultCacheBypass,
@@ -899,7 +910,7 @@ export class RscRenderer {
       });
     };
     try {
-      while (true) {
+      for (;;) {
         if (options.requestId && this.#cancelledRenderRequests.has(options.requestId)) {
           await reader.cancel();
           return { chunks, bytes, chunksCount, control: null, lateControlSent, cancelled: true };
@@ -1125,6 +1136,15 @@ export class RscRenderer {
     return decision;
   }
 
+  static #resultCacheOptions(): LruTtlCacheOptions<CachedRscResult> {
+    return {
+      sizeOf: (result) => result.bytes,
+      maxBytes: LruTtlCache.parseByteCeiling(process.env.AKAN_RSC_RESULT_CACHE_MAX_BYTES),
+      maxEntryBytes: LruTtlCache.parseByteCeiling(process.env.AKAN_RSC_RESULT_CACHE_MAX_BODY_BYTES),
+      sweepIntervalMs: RESULT_CACHE_SWEEP_INTERVAL_MS,
+    };
+  }
+
   #getCachedResult(cacheKey: string): CachedRscResult | null {
     const cached = this.#resultCache.get(cacheKey);
     if (!cached) {
@@ -1146,11 +1166,19 @@ export class RscRenderer {
   }
 
   #setCachedResult(cacheKey: string, result: CachedRscResult, ttl: number): void {
-    this.#resultCache.set(cacheKey, result, ttl);
+    this.#logRejectedStore("full", result, this.#resultCache.set(cacheKey, result, ttl));
   }
 
   #setCachedPatchResult(cacheKey: string, result: CachedRscResult, ttl: number): void {
-    this.#patchResultCache.set(cacheKey, result, ttl);
+    this.#logRejectedStore("patch", result, this.#patchResultCache.set(cacheKey, result, ttl));
+  }
+
+  /** A silently dropped store looks identical to a cache miss; say which route is too big to cache. */
+  #logRejectedStore(kind: string, result: CachedRscResult, stored: boolean): void {
+    if (stored) return;
+    this.#logger.verbose(
+      `${kind} result cache store skipped pathname=${result.pathname} bytes=${result.bytes} reason=body-too-large`,
+    );
   }
 
   #runWithRequest<T>(request: Request, fn: () => Promise<T>): Promise<T> {

package/server/rscWorkerHost.ts

@@ -89,6 +89,66 @@ export function createRscWorkerInvalidateCacheMessage(
   };
 }
 
+/**
+ * The RSC worker samples its own process with the same `ProcessMetricsCollector.collect` its host
+ * replica uses, so its report carries `pid` / `rssBytes` / `role` / … under the identical names.
+ * `AkanServer` spreads the host's report into its own `collect({ role, ...webRouter.getMetrics() })`
+ * and `collect` spreads `extra` last (`processMetricsCollector.ts:122`) — so passing these through
+ * unprefixed silently overwrote the replica's own process fields, and the replica's RSS was reported
+ * nowhere. Rename them onto `rscWorker*`; the `rsc*` render counters, which only the worker
+ * produces, pass through untouched.
+ *
+ * XXX A new process-level field in `ProcessMetricsCollector.collect` must be added here too, or it
+ * starts shadowing the replica again.
+ */
+export function projectRscWorkerProcessMetrics(metrics: AkanMetricsReport): AkanMetricsReport {
+  const {
+    role: _role,
+    pid: _pid,
+    trace: _trace,
+    reportedAt,
+    rssBytes,
+    heapTotalBytes,
+    heapUsedBytes,
+    externalBytes,
+    arrayBuffersBytes,
+    cpuUserMicros,
+    cpuSystemMicros,
+    maxRssKb,
+    jscHeapSizeBytes,
+    jscHeapCapacityBytes,
+    jscExtraMemorySizeBytes,
+    jscObjectCount,
+    jscProtectedObjectCount,
+    eventLoopLagMeanMs,
+    eventLoopLagP99Ms,
+    eventLoopLagMaxMs,
+    gcDurationMs,
+    ...renderMetrics
+  } = metrics;
+  return {
+    ...renderMetrics,
+    rscWorkerReportedAt: reportedAt,
+    rscWorkerRssBytes: rssBytes,
+    rscWorkerHeapTotalBytes: heapTotalBytes,
+    rscWorkerHeapUsedBytes: heapUsedBytes,
+    rscWorkerExternalBytes: externalBytes,
+    rscWorkerArrayBuffersBytes: arrayBuffersBytes,
+    rscWorkerCpuUserMicros: cpuUserMicros,
+    rscWorkerCpuSystemMicros: cpuSystemMicros,
+    rscWorkerMaxRssKb: maxRssKb,
+    rscWorkerJscHeapSizeBytes: jscHeapSizeBytes,
+    rscWorkerJscHeapCapacityBytes: jscHeapCapacityBytes,
+    rscWorkerJscExtraMemorySizeBytes: jscExtraMemorySizeBytes,
+    rscWorkerJscObjectCount: jscObjectCount,
+    rscWorkerJscProtectedObjectCount: jscProtectedObjectCount,
+    rscWorkerEventLoopLagMeanMs: eventLoopLagMeanMs,
+    rscWorkerEventLoopLagP99Ms: eventLoopLagP99Ms,
+    rscWorkerEventLoopLagMaxMs: eventLoopLagMaxMs,
+    rscWorkerGcDurationMs: gcDurationMs,
+  };
+}
+
 export function createRscHostRenderStream(input: {
   setPending: (pending: RscPending) => void;
   deletePending: () => void;
@@ -464,18 +524,7 @@ export class RscWorker {
   }
 
   getMetrics(): AkanMetricsReport {
-    const {
-      rscWorkerPid: _rscWorkerPid,
-      rscWorkerStatus: _rscWorkerStatus,
-      rscWorkerRestartCount: _rscWorkerRestartCount,
-      rscWorkerRecycleCount: _rscWorkerRecycleCount,
-      rscWorkerLastRecycleReason: _rscWorkerLastRecycleReason,
-      rscPendingRenderCount: _rscPendingRenderCount,
-      rscQueuedSendCount: _rscQueuedSendCount,
-      rscHostPendingChunkOverflowCount: _rscHostPendingChunkOverflowCount,
-      ...workerMetrics
-    } = this.#lastWorkerMetrics;
-    return Object.assign(workerMetrics, {
+    return Object.assign(projectRscWorkerProcessMetrics(this.#lastWorkerMetrics), {
       rscWorkerPid: this.#proc.pid,
       rscWorkerStatus: this.#status,
       rscWorkerRestartCount: this.#restartCount,

package/server/ssrFromRscRenderer.tsx

@@ -411,7 +411,7 @@ export function interleaveRscScriptsWithHtml(
       const pumpRscScripts = async () => {
         rscReader = rscClientStream.getReader();
         try {
-          while (true) {
+          for (;;) {
             const { value, done } = await rscReader.read();
             if (done || errored) break;
             await waitForRscQueueDrain();
@@ -446,7 +446,7 @@ export function interleaveRscScriptsWithHtml(
 
         htmlReader = htmlStream.getReader();
         try {
-          while (true) {
+          for (;;) {
             const { value, done } = await htmlReader.read();
             if (done || errored) break;
             controller.enqueue(value);

package/server/systemPageDocument.tsx

@@ -39,19 +39,19 @@ export const SYSTEM_PAGE_STATUS_COPY = {
 } as const;
 
 const FALLBACK_STYLE = `
-:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-base-content: #ffffff; --akan-base-100: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
-body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-base-100); color: var(--akan-base-content); }
+:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
+body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-background); color: var(--akan-foreground); }
 a { color: inherit; }
-.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-base-100), #111); }
+.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-background), #111); }
 .akan-system-card { width: min(720px, 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(145deg, rgba(42, 42, 42, 0.96), rgba(43, 46, 51, 0.78)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36); padding: clamp(28px, 6vw, 56px); }
 .akan-system-status { margin: 0 0 18px; font-weight: 800; font-size: clamp(4rem, 18vw, 8rem); line-height: 0.85; letter-spacing: -0.08em; color: var(--akan-primary); }
 .akan-system-eyebrow { margin: 0 0 10px; color: var(--akan-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
-.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-base-content); }
+.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-foreground); }
 .akan-system-description { margin: 22px 0 0; max-width: 56ch; color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.75; }
 .akan-system-path { margin: 22px 0 0; overflow-wrap: anywhere; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(26, 26, 26, 0.72); padding: 12px 14px; color: rgba(255, 255, 255, 0.72); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88rem; }
 .akan-system-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
-.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-base-content); padding: 0 18px; font-weight: 800; text-decoration: none; }
-.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-base-content); }
+.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-foreground); padding: 0 18px; font-weight: 800; text-decoration: none; }
+.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-foreground); }
 .akan-system-details { margin-top: 28px; max-height: 260px; overflow: auto; border-radius: 18px; background: rgba(26, 26, 26, 0.82); border: 1px solid rgba(240, 32, 32, 0.22); padding: 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; }
 `;
 
@@ -73,9 +73,9 @@ export function createSystemPageDocument(options: SystemPageOptions): ReactNode
         <style data-akan-system-page>{FALLBACK_STYLE}</style>
       </head>
       <body>
-        <main className="akan-system-page min-h-screen bg-base-100 text-base-content">
+        <main className="akan-system-page min-h-screen bg-background text-foreground">
           <section
-            className="akan-system-card rounded-3xl border border-base-content/10 bg-base-content/4 p-8 shadow-2xl backdrop-blur-xl"
+            className="akan-system-card rounded-3xl border border-foreground/10 bg-foreground/4 p-8 shadow-2xl backdrop-blur-xl"
             aria-labelledby="akan-system-title"
           >
             <p className="akan-system-status text-primary">{copy.status}</p>
@@ -83,15 +83,15 @@ export function createSystemPageDocument(options: SystemPageOptions): ReactNode
             <h1 id="akan-system-title" className="akan-system-title font-black">
               {copy.title}
             </h1>
-            <p className="akan-system-description text-base-content/70">{copy.description}</p>
-            <p className="akan-system-path border border-base-content/10 bg-base-200/50" aria-label="Requested path">
+            <p className="akan-system-description text-foreground/70">{copy.description}</p>
+            <p className="akan-system-path border border-foreground/10 bg-muted/50" aria-label="Requested path">
               {options.pathname}
             </p>
             <div className="akan-system-actions">
-              <a className="akan-system-action btn btn-primary" href={options.homeHref}>
+              <a className="akan-system-action" href={options.homeHref}>
                 {copy.actionLabel}
               </a>
-              <a className="akan-system-action akan-system-secondary btn" href={options.pathname}>
+              <a className="akan-system-action akan-system-secondary" href={options.pathname}>
                 Try again
               </a>
             </div>