effect-start 0.27.0 → 0.28.0

package/src/tower/ui/Metrics.tsx

@@ -0,0 +1,78 @@
+import type * as TowerStore from "../TowerStore.ts"
+
+function MetricValue(options: { metric: TowerStore.TowerMetricSnapshot }) {
+  if (options.metric.type === "counter" || options.metric.type === "gauge") {
+    return (
+      <div style="font-size:32px;font-weight:700;color:#e5e7eb;font-family:monospace;line-height:1.1">
+        {String(options.metric.value)}
+      </div>
+    )
+  }
+  if (options.metric.type === "histogram") {
+    const h = options.metric.value as { count: number; sum: number; min: number; max: number }
+    return (
+      <div style="display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace">
+        <span style="color:#6b7280">count</span>
+        <span style="color:#e5e7eb">{h.count}</span>
+        <span style="color:#6b7280">sum</span>
+        <span style="color:#e5e7eb">{h.sum.toFixed(2)}</span>
+        <span style="color:#6b7280">min</span>
+        <span style="color:#e5e7eb">{h.min.toFixed(2)}</span>
+        <span style="color:#6b7280">max</span>
+        <span style="color:#e5e7eb">{h.max.toFixed(2)}</span>
+      </div>
+    )
+  }
+  if (options.metric.type === "frequency") {
+    const occ = options.metric.value as Record<string, number>
+    return (
+      <div style="display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace">
+        {Object.entries(occ)
+          .slice(0, 10)
+          .map(([k, v]) => (
+            <>
+              <span style="color:#6b7280">{k}</span>
+              <span style="color:#e5e7eb">{v}</span>
+            </>
+          ))}
+      </div>
+    )
+  }
+  return (
+    <pre style="font-size:11px;color:#9ca3af;margin:0;white-space:pre-wrap">
+      {JSON.stringify(options.metric.value, null, 2)}
+    </pre>
+  )
+}
+
+function MetricCard(options: { metric: TowerStore.TowerMetricSnapshot }) {
+  return (
+    <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:200px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+        <span style="color:#d1d5db;font-size:13px;font-weight:600">{options.metric.name}</span>
+        <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#1e3a5f;color:#60a5fa">
+          {options.metric.type}
+        </span>
+      </div>
+      <MetricValue metric={options.metric} />
+      {options.metric.tags.length > 0 && (
+        <div style="font-size:10px;color:#6b7280;margin-top:4px">
+          {options.metric.tags.map((t) => `${t.key}=${t.value}`).join(" ")}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function MetricsGrid(options: { metrics: Array<TowerStore.TowerMetricSnapshot> }) {
+  if (options.metrics.length === 0) {
+    return <div class="empty">Waiting for metrics...</div>
+  }
+  return (
+    <>
+      {options.metrics.map((m) => (
+        <MetricCard metric={m} />
+      ))}
+    </>
+  )
+}

package/src/tower/ui/Routes.tsx

@@ -0,0 +1,125 @@
+export interface RouteInfo {
+  readonly method: string
+  readonly path: string
+  readonly format: string | undefined
+}
+
+function groupByPath(routes: Array<RouteInfo>): Array<{ path: string; routes: Array<RouteInfo> }> {
+  const byPath = new Map<string, Array<RouteInfo>>()
+  for (const r of routes) {
+    let group = byPath.get(r.path)
+    if (!group) {
+      group = []
+      byPath.set(r.path, group)
+    }
+    group.push(r)
+  }
+  return Array.from(byPath, ([path, routes]) => ({
+    path,
+    routes: routes.sort((a, b) => methodOrder.indexOf(a.method) - methodOrder.indexOf(b.method)),
+  })).sort((a, b) => a.path.localeCompare(b.path))
+}
+
+function methodColor(method: string): string {
+  if (method === "GET") return "#22c55e"
+  if (method === "POST") return "#3b82f6"
+  if (method === "PUT") return "#f59e0b"
+  if (method === "DELETE") return "#ef4444"
+  if (method === "PATCH") return "#a855f7"
+  if (method === "*") return "#6b7280"
+  return "#94a3b8"
+}
+
+function methodBg(method: string): string {
+  if (method === "GET") return "#052e16"
+  if (method === "POST") return "#172554"
+  if (method === "PUT") return "#422006"
+  if (method === "DELETE") return "#450a0a"
+  if (method === "PATCH") return "#3b0764"
+  return "#1e293b"
+}
+
+const methodOrder = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS", "*"]
+
+function MethodBadge(options: { method: string }) {
+  return (
+    <span
+      style={`font-size:10px;font-weight:700;font-family:monospace;padding:2px 6px;border-radius:3px;background:${methodBg(options.method)};color:${methodColor(options.method)};min-width:48px;text-align:center;display:inline-block`}
+    >
+      {options.method}
+    </span>
+  )
+}
+
+function FormatBadge(options: { format: string }) {
+  return (
+    <span style="font-size:10px;padding:1px 6px;border-radius:3px;background:#1e3a5f;color:#60a5fa">
+      {options.format}
+    </span>
+  )
+}
+
+function ColoredPath(options: { path: string }) {
+  const segments = options.path.split("/").filter(Boolean)
+  return (
+    <span style="font-family:monospace;font-size:13px">
+      {segments.length === 0 ? (
+        <span style="color:#e2e8f0">/</span>
+      ) : (
+        segments.map((seg) => {
+          const isParam = seg.startsWith(":")
+          return (
+            <>
+              <span style="color:#475569">/</span>
+              <span style={isParam ? "color:#c084fc" : "color:#e2e8f0"}>{seg}</span>
+            </>
+          )
+        })
+      )}
+    </span>
+  )
+}
+
+function PathGroup(options: { path: string; routes: Array<RouteInfo> }) {
+  return (
+    <div style="padding:8px 12px;border-bottom:1px solid #1e293b">
+      <div style="margin-bottom:4px">
+        <ColoredPath path={options.path} />
+      </div>
+      <div style="display:flex;flex-wrap:wrap;gap:4px">
+        {options.routes.map((r) => (
+          <div style="display:flex;align-items:center;gap:6px">
+            <MethodBadge method={r.method} />
+            {r.format && <FormatBadge format={r.format} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function RouteList(options: { routes: Array<RouteInfo> }) {
+  if (options.routes.length === 0) {
+    return <div class="empty">No routes registered</div>
+  }
+
+  const groups = groupByPath(options.routes)
+  const routeCount = options.routes.length
+  const pathCount = groups.length
+
+  return (
+    <>
+      <div style="padding:8px 12px;border-bottom:1px solid #1e293b;display:flex;gap:16px;font-size:12px;color:#64748b">
+        <span>
+          {pathCount} path{pathCount !== 1 ? "s" : ""}
+        </span>
+        <span>
+          {routeCount} route{routeCount !== 1 ? "s" : ""}
+        </span>
+      </div>
+      {groups.map((g) => (
+        <PathGroup path={g.path} routes={g.routes} />
+      ))}
+    </>
+  )
+}

package/src/tower/ui/Services.tsx

@@ -0,0 +1,273 @@
+import * as Option from "effect/Option"
+
+const EffectTypeIds: Record<symbol, string> = {
+  [Symbol.for("effect/Ref")]: "Ref",
+  [Symbol.for("effect/SynchronizedRef")]: "SynchronizedRef",
+  [Symbol.for("effect/QueueDequeue")]: "Dequeue",
+  [Symbol.for("effect/QueueEnqueue")]: "Enqueue",
+  [Symbol.for("effect/Pool")]: "Pool",
+  [Symbol.for("effect/Deferred")]: "Deferred",
+  [Symbol.for("effect/FiberRef")]: "FiberRef",
+  [Symbol.for("effect/Scope")]: "Scope",
+  [Symbol.for("effect/Tracer")]: "Tracer",
+  [Symbol.for("effect/Request/Cache")]: "RequestCache",
+  [Symbol.for("effect/Logger")]: "Logger",
+  [Symbol.for("effect/Supervisor")]: "Supervisor",
+  [Symbol.for("effect/Clock")]: "Clock",
+  [Symbol.for("effect/Random")]: "Random",
+  [Symbol.for("effect/KeyValueStore")]: "KeyValueStore",
+  [Symbol.for("effect/RateLimiter")]: "RateLimiter",
+}
+
+function detectEffectType(value: unknown): string | undefined {
+  if (value === null || value === undefined || typeof value !== "object") return undefined
+  if ("publish" in value && "subscribe" in value && "offer" in value) return "PubSub"
+  for (const sym of Object.getOwnPropertySymbols(value)) {
+    const name = EffectTypeIds[sym]
+    if (name) return name
+  }
+  return undefined
+}
+
+function inspectEffectValue(type: string, value: any): Record<string, unknown> {
+  const info: Record<string, unknown> = { _type: type }
+  try {
+    switch (type) {
+      case "PubSub": {
+        if (typeof value.capacity === "function") info.capacity = value.capacity()
+        if (typeof value.isActive === "function") info.active = value.isActive()
+        if (typeof value.unsafeSize === "function") {
+          const size = value.unsafeSize()
+          info.size = Option.isSome(size) ? size.value : "shutdown"
+        }
+        if (value.pubsub && typeof value.pubsub.subscriberCount === "number") {
+          info.subscribers = value.pubsub.subscriberCount
+        }
+        break
+      }
+      case "Enqueue":
+      case "Dequeue": {
+        if (typeof value.capacity === "function") info.capacity = value.capacity()
+        if (typeof value.isActive === "function") info.active = value.isActive()
+        if (typeof value.unsafeSize === "function") {
+          const size = value.unsafeSize()
+          info.size = Option.isSome(size) ? size.value : "shutdown"
+        }
+        break
+      }
+      case "Ref":
+      case "SynchronizedRef": {
+        if (value.ref && "current" in value.ref) {
+          const current = value.ref.current
+          info.value = safeSerialize(current)
+        }
+        break
+      }
+      case "Pool": {
+        if (typeof value.minSize === "number") info.minSize = value.minSize
+        if (typeof value.maxSize === "number") info.maxSize = value.maxSize
+        if (typeof value.concurrency === "number") info.concurrency = value.concurrency
+        if (value.items instanceof Set) info.items = value.items.size
+        if (value.available instanceof Set) info.available = value.available.size
+        if (value.invalidated instanceof Set) info.invalidated = value.invalidated.size
+        if (typeof value.waiters === "number") info.waiters = value.waiters
+        break
+      }
+      case "FiberRef": {
+        if ("initial" in value) info.initial = safeSerialize(value.initial)
+        break
+      }
+      case "Deferred": {
+        if ("state" in value && value.state) {
+          const state = value.state
+          if (typeof state === "object" && "_tag" in state) {
+            info.status = state._tag
+          }
+        }
+        break
+      }
+    }
+  } catch {
+    // ignore introspection errors
+  }
+  return info
+}
+
+function safeSerialize(value: unknown): unknown {
+  if (value === null || value === undefined) return value
+  if (typeof value === "bigint") return `${value}n`
+  if (typeof value === "function") return "<function>"
+  if (typeof value === "symbol") return value.toString()
+  if (typeof value !== "object") return value
+  if (detectEffectType(value)) return `<${detectEffectType(value)}>`
+  if (Array.isArray(value)) return value.map(safeSerialize)
+  const proto = Object.getPrototypeOf(value)
+  if (proto !== null && proto !== Object.prototype)
+    return `<${proto.constructor?.name ?? "object"}>`
+  const out: Record<string, unknown> = {}
+  for (const [k, v] of Object.entries(value)) {
+    if (typeof v === "function") continue
+    out[k] = safeSerialize(v)
+  }
+  return out
+}
+
+export interface ServiceEntry {
+  readonly key: string
+  readonly kind: string
+  readonly display: string
+  readonly type: "config" | "value" | "effect"
+}
+
+function isJsonPrimitive(value: unknown): boolean {
+  if (value === null) return true
+  const t = typeof value
+  return t === "string" || t === "number" || t === "boolean" || t === "bigint"
+}
+
+function isPlainJson(value: unknown): boolean {
+  if (isJsonPrimitive(value)) return true
+  if (Array.isArray(value)) return value.every(isPlainJson)
+  if (typeof value === "object" && value !== null) {
+    const proto = Object.getPrototypeOf(value)
+    if (proto !== null && proto !== Object.prototype) return false
+    return Object.values(value).every(isPlainJson)
+  }
+  return false
+}
+
+function jsonReplacer(_key: string, v: unknown): unknown {
+  if (typeof v === "bigint") return `${v}n`
+  return v
+}
+
+function collectDisplayValues(obj: unknown, prefix: string, out: Record<string, unknown>): void {
+  if (typeof obj === "function") return
+  if (isJsonPrimitive(obj) || Array.isArray(obj)) {
+    out[prefix] = safeSerialize(obj)
+    return
+  }
+  if (typeof obj === "object" && obj !== null) {
+    const et = detectEffectType(obj)
+    if (et) {
+      out[prefix || et] = inspectEffectValue(et, obj)
+      return
+    }
+    for (const [k, v] of Object.entries(obj)) {
+      if (typeof v === "function") continue
+      const path = prefix ? `${prefix}.${k}` : k
+      if (isPlainJson(v)) {
+        out[path] = safeSerialize(v)
+      } else if (typeof v === "object" && v !== null) {
+        collectDisplayValues(v, path, out)
+      }
+    }
+  }
+}
+
+function kindColor(kind: string): { bg: string; fg: string } {
+  if (kind === "config") return { bg: "#2d1f0e", fg: "#fbbf24" }
+  if (kind === "effect") return { bg: "#2d1a3e", fg: "#c084fc" }
+  if (kind === "empty") return { bg: "#1f2937", fg: "#64748b" }
+  if (kind === "function") return { bg: "#1a2e1a", fg: "#4ade80" }
+  return { bg: "#1e3a5f", fg: "#60a5fa" }
+}
+
+function ServiceRow(options: { entry: ServiceEntry }) {
+  const colors = kindColor(options.entry.type)
+  return (
+    <details class="tl-row">
+      <summary class="tl-summary tl-cols">
+        <span class="tl-cell tl-cell-status">
+          <span
+            style={`width:8px;height:8px;border-radius:50%;background:${colors.fg};display:block`}
+          />
+        </span>
+        <span class="tl-cell tl-cell-name">{options.entry.key}</span>
+        <span class="tl-cell tl-cell-dur">
+          <span
+            style={`font-size:10px;padding:1px 6px;border-radius:4px;background:${colors.bg};color:${colors.fg}`}
+          >
+            {options.entry.kind}
+          </span>
+        </span>
+      </summary>
+      <div class="tl-body">
+        {options.entry.display ? (
+          <pre style="color:#e2e8f0;font-family:monospace;font-size:12px;margin:0;padding:8px;white-space:pre-wrap;word-break:break-all">
+            {options.entry.display}
+          </pre>
+        ) : (
+          <div style="padding:4px 8px;color:#64748b;font-size:12px">No inspectable values</div>
+        )}
+      </div>
+    </details>
+  )
+}
+
+export function ServiceList(options: { services: Array<ServiceEntry> }) {
+  if (options.services.length === 0) {
+    return <div class="empty">No services registered</div>
+  }
+  return (
+    <div class="tl-grid">
+      <div class="tl-header tl-cols">
+        <span class="tl-cell tl-cell-status" />
+        <span class="tl-cell tl-cell-name">Service</span>
+        <span class="tl-cell tl-cell-dur">Kind</span>
+      </div>
+      {options.services.map((s) => (
+        <ServiceRow entry={s} />
+      ))}
+    </div>
+  )
+}
+
+export function collectServices(unsafeMap: Map<string, any>): Array<ServiceEntry> {
+  const entries: Array<ServiceEntry> = []
+  for (const [key, value] of unsafeMap) {
+    const isConfig =
+      key.toLowerCase().includes("config") || key.toLowerCase().includes("configuration")
+
+    const effectType =
+      typeof value === "object" && value !== null ? detectEffectType(value) : undefined
+    if (effectType) {
+      const info = inspectEffectValue(effectType, value)
+      entries.push({
+        key,
+        kind: effectType,
+        display: JSON.stringify(info, jsonReplacer, 2),
+        type: "effect",
+      })
+      continue
+    }
+
+    if (typeof value === "function") {
+      entries.push({ key, kind: "function", display: "", type: "value" })
+      continue
+    }
+
+    if (value === null || value === undefined) {
+      entries.push({ key, kind: "empty", display: "", type: "value" })
+      continue
+    }
+
+    const type = isConfig ? ("config" as const) : ("value" as const)
+    const plain: Record<string, unknown> = {}
+    collectDisplayValues(value, "", plain)
+    const display = Object.keys(plain).length > 0 ? JSON.stringify(plain, jsonReplacer, 2) : ""
+
+    let kind = "object"
+    if (typeof value !== "object") {
+      kind = typeof value
+    } else {
+      const proto = Object.getPrototypeOf(value)
+      if (proto && proto.constructor && proto.constructor.name !== "Object") {
+        kind = proto.constructor.name
+      }
+    }
+
+    entries.push({ key, kind: isConfig ? "config" : kind, display, type })
+  }
+  return entries.sort((a, b) => a.key.localeCompare(b.key))
+}

package/src/tower/ui/Shell.tsx

@@ -0,0 +1,74 @@
+export type NavTab =
+  | "traces"
+  | "metrics"
+  | "logs"
+  | "errors"
+  | "fibers"
+  | "routes"
+  | "system"
+  | "services"
+
+export function Sidebar(options: { prefix: string; active: NavTab }) {
+  return (
+    <div class="sidebar">
+      <div class="sidebar-title">Effect Tower</div>
+      <a
+        href={`${options.prefix}/traces`}
+        class={options.active === "traces" ? "nav-link active" : "nav-link"}
+      >
+        Traces
+      </a>
+      <a
+        href={`${options.prefix}/metrics`}
+        class={options.active === "metrics" ? "nav-link active" : "nav-link"}
+      >
+        Metrics
+      </a>
+      <a
+        href={`${options.prefix}/logs`}
+        class={options.active === "logs" ? "nav-link active" : "nav-link"}
+      >
+        Logs
+      </a>
+      <a
+        href={`${options.prefix}/errors`}
+        class={options.active === "errors" ? "nav-link active" : "nav-link"}
+      >
+        Errors
+      </a>
+      <a
+        href={`${options.prefix}/fibers`}
+        class={options.active === "fibers" ? "nav-link active" : "nav-link"}
+      >
+        Fibers
+      </a>
+      <a
+        href={`${options.prefix}/routes`}
+        class={options.active === "routes" ? "nav-link active" : "nav-link"}
+      >
+        Routes
+      </a>
+      <a
+        href={`${options.prefix}/system`}
+        class={options.active === "system" ? "nav-link active" : "nav-link"}
+      >
+        System
+      </a>
+      <a
+        href={`${options.prefix}/services`}
+        class={options.active === "services" ? "nav-link active" : "nav-link"}
+      >
+        Services
+      </a>
+    </div>
+  )
+}
+
+export function Shell(options: { prefix: string; active: NavTab; children: any }) {
+  return (
+    <div class="shell">
+      <Sidebar prefix={options.prefix} active={options.active} />
+      <div class="content">{options.children}</div>
+    </div>
+  )
+}

package/src/tower/ui/System.tsx

@@ -0,0 +1,141 @@
+import type * as TowerStore from "../TowerStore.ts"
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)}MB`
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)}GB`
+}
+
+function formatUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400)
+  const h = Math.floor((seconds % 86400) / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = Math.floor(seconds % 60)
+  if (d > 0) return `${d}d ${h}h ${m}m`
+  if (h > 0) return `${h}h ${m}m ${s}s`
+  if (m > 0) return `${m}m ${s}s`
+  return `${s}s`
+}
+
+function StatCard(options: { label: string; value: string; sub?: string }) {
+  return (
+    <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:180px">
+      <div style="color:#9ca3af;font-size:11px;margin-bottom:4px">{options.label}</div>
+      <div style="color:#f3f4f6;font-size:22px;font-weight:700;font-family:monospace">
+        {options.value}
+      </div>
+      {options.sub && <div style="color:#6b7280;font-size:10px;margin-top:2px">{options.sub}</div>}
+    </div>
+  )
+}
+
+function BarMeter(options: { label: string; used: number; total: number }) {
+  const pct = options.total > 0 ? (options.used / options.total) * 100 : 0
+  const color = pct > 90 ? "#ef4444" : pct > 70 ? "#f59e0b" : "#22c55e"
+  return (
+    <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px">
+      <div style="display:flex;justify-content:space-between;margin-bottom:6px">
+        <span style="color:#9ca3af;font-size:11px">{options.label}</span>
+        <span style="color:#e5e7eb;font-size:11px;font-family:monospace">
+          {formatBytes(options.used)} / {formatBytes(options.total)}
+        </span>
+      </div>
+      <div style="height:8px;background:#1f2937;border-radius:4px;overflow:hidden">
+        <div
+          style={`width:${pct.toFixed(1)}%;height:100%;background:${color};border-radius:4px;transition:width .3s`}
+        />
+      </div>
+      <div style="color:#6b7280;font-size:10px;margin-top:2px;text-align:right">
+        {pct.toFixed(1)}%
+      </div>
+    </div>
+  )
+}
+
+export function SystemStatsView(options: { stats: TowerStore.ProcessStats }) {
+  const cpuTotal = options.stats.cpu.user + options.stats.cpu.system
+  return (
+    <>
+      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:12px">
+        <StatCard
+          label="PID"
+          value={String(options.stats.pid)}
+          sub={`${options.stats.system.platform} ${options.stats.system.arch}`}
+        />
+        <StatCard label="Uptime" value={formatUptime(options.stats.uptime)} />
+        <StatCard
+          label="CPU Time"
+          value={`${(cpuTotal / 1_000_000).toFixed(2)}s`}
+          sub={`user ${(options.stats.cpu.user / 1_000_000).toFixed(2)}s / sys ${(options.stats.cpu.system / 1_000_000).toFixed(2)}s`}
+        />
+        <StatCard
+          label="Load Average"
+          value={options.stats.system.loadavg[0].toFixed(2)}
+          sub={`${options.stats.system.loadavg[0].toFixed(2)} / ${options.stats.system.loadavg[1].toFixed(2)} / ${options.stats.system.loadavg[2].toFixed(2)}  (${options.stats.system.cpuCount} cores)`}
+        />
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;padding:0 12px 12px">
+        <BarMeter
+          label="Heap Memory"
+          used={options.stats.memory.heapUsed}
+          total={options.stats.memory.heapTotal}
+        />
+        <BarMeter
+          label="System Memory"
+          used={options.stats.system.totalmem - options.stats.system.freemem}
+          total={options.stats.system.totalmem}
+        />
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:0 12px 12px">
+        <StatCard label="RSS" value={formatBytes(options.stats.memory.rss)} />
+        <StatCard label="Peak RSS" value={formatBytes(options.stats.resourceUsage.maxRSS)} />
+        <StatCard label="External" value={formatBytes(options.stats.memory.external)} />
+        <StatCard label="Array Buffers" value={formatBytes(options.stats.memory.arrayBuffers)} />
+      </div>
+      <div style="padding:0 12px 12px">
+        <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px">
+          <div style="color:#9ca3af;font-size:11px;margin-bottom:8px">Resource Usage</div>
+          <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px">
+            <div style="display:flex;justify-content:space-between;font-size:12px">
+              <span style="color:#6b7280">Page Faults (minor)</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.minorPageFault}
+              </span>
+            </div>
+            <div style="display:flex;justify-content:space-between;font-size:12px">
+              <span style="color:#6b7280">Page Faults (major)</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.majorPageFault}
+              </span>
+            </div>
+            <div style="display:flex;justify-content:space-between;font-size:12px">
+              <span style="color:#6b7280">FS Reads</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.fsRead}
+              </span>
+            </div>
+            <div style="display:flex;justify-content:space-between;font-size:12px">
+              <span style="color:#6b7280">FS Writes</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.fsWrite}
+              </span>
+            </div>
+            <div style="display:flex;justify-content:space-between;font-size:12px">
+              <span style="color:#6b7280">Context Switches (vol)</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.voluntaryContextSwitches}
+              </span>
+            </div>
+            <div style="display:flex;justify-content:space-between;font-size:12px">
+              <span style="color:#6b7280">Context Switches (invol)</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.involuntaryContextSwitches}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}