lopata 0.0.1

package/runtime/dashboard/api.ts

@@ -0,0 +1,174 @@
+import { join, dirname } from "node:path";
+import { mkdirSync, existsSync } from "node:fs";
+import type { WranglerConfig } from "../config";
+import type { GenerationManager } from "../generation-manager";
+import type { WorkerRegistry } from "../worker-registry";
+import type { HandlerContext } from "./rpc/types";
+import { dispatch } from "./rpc/server";
+import { getDatabase, getDataDir } from "../db";
+
+const ctx: HandlerContext = { config: null, manager: null, registry: null };
+
+export function setDashboardConfig(config: WranglerConfig): void {
+  ctx.config = config;
+}
+
+export function setGenerationManager(manager: GenerationManager): void {
+  ctx.manager = manager;
+}
+
+export function setWorkerRegistry(registry: WorkerRegistry): void {
+  ctx.registry = registry;
+}
+
+// ─── Pre-built dashboard assets ──────────────────────────────────────────
+// We use Bun.build() with bun-plugin-tailwind to pre-build the dashboard
+// so Tailwind CSS works regardless of the CWD where bunflare is launched.
+
+let dashboardAssets: Map<string, { content: Uint8Array; contentType: string }> | null = null;
+let dashboardHtmlContent: string | null = null;
+
+async function buildDashboard(): Promise<void> {
+  const tailwindPlugin = (await import("bun-plugin-tailwind")).default;
+  const htmlEntry = join(import.meta.dir, "index.html");
+
+  const result = await Bun.build({
+    entrypoints: [htmlEntry],
+    plugins: [tailwindPlugin],
+  });
+
+  if (!result.success) {
+    console.error("[bunflare] Dashboard build failed:", result.logs);
+    throw new Error("Dashboard build failed");
+  }
+
+  const assets = new Map<string, { content: Uint8Array; contentType: string }>();
+  let html = "";
+
+  for (const output of result.outputs) {
+    const name = output.path.split("/").pop()!;
+    const content = new Uint8Array(await output.arrayBuffer());
+
+    if (output.kind === "entry-point" && name.endsWith(".html")) {
+      html = new TextDecoder().decode(content);
+    } else {
+      const contentType = name.endsWith(".css")
+        ? "text/css"
+        : name.endsWith(".js")
+          ? "application/javascript"
+          : "application/octet-stream";
+      assets.set(name, { content, contentType });
+    }
+  }
+
+  // Rewrite asset paths in HTML from "./chunk-xxx" to "/__dashboard/assets/chunk-xxx"
+  for (const name of assets.keys()) {
+    html = html.replaceAll(`./${name}`, `/__dashboard/assets/${name}`);
+  }
+
+  dashboardHtmlContent = html;
+  dashboardAssets = assets;
+}
+
+// Build on import
+await buildDashboard();
+
+export function handleDashboardRequest(request: Request): Response | Promise<Response> {
+  const url = new URL(request.url);
+
+  // Serve dashboard HTML
+  if (url.pathname === "/__dashboard") {
+    return new Response(dashboardHtmlContent, {
+      headers: { "Content-Type": "text/html; charset=utf-8" },
+    });
+  }
+
+  // Serve dashboard assets (JS, CSS)
+  const assetMatch = url.pathname.match(/^\/__dashboard\/assets\/(.+)$/);
+  if (assetMatch && dashboardAssets) {
+    const asset = dashboardAssets.get(assetMatch[1]!);
+    if (asset) {
+      return new Response(asset.content as unknown as BodyInit, {
+        headers: {
+          "Content-Type": asset.contentType,
+          "Cache-Control": "public, max-age=31536000, immutable",
+        },
+      });
+    }
+  }
+
+  // RPC endpoint
+  if (url.pathname === "/__dashboard/api/rpc" && request.method === "POST") {
+    return dispatch(request, ctx);
+  }
+
+  // R2 upload (multipart/form-data)
+  if (url.pathname === "/__dashboard/api/r2/upload" && request.method === "POST") {
+    return handleR2Upload(request);
+  }
+
+  // R2 download
+  if (url.pathname === "/__dashboard/api/r2/download" && request.method === "GET") {
+    return handleR2Download(url);
+  }
+
+  return new Response("Not found", { status: 404 });
+}
+
+async function handleR2Upload(request: Request): Promise<Response> {
+  try {
+    const formData = await request.formData();
+    const bucket = formData.get("bucket") as string;
+    const key = formData.get("key") as string;
+    const file = formData.get("file") as File;
+
+    if (!bucket || !key || !file) {
+      return Response.json({ error: "Missing bucket, key, or file" }, { status: 400 });
+    }
+
+    const data = await file.arrayBuffer();
+    const fp = join(getDataDir(), "r2", bucket, key);
+    mkdirSync(dirname(fp), { recursive: true });
+    await Bun.write(fp, data);
+
+    const hasher = new Bun.CryptoHasher("md5");
+    hasher.update(new Uint8Array(data));
+    const etag = hasher.digest("hex");
+
+    const db = getDatabase();
+    db.run(
+      `INSERT OR REPLACE INTO r2_objects (bucket, key, size, etag, version, uploaded, http_metadata, custom_metadata)
+       VALUES (?, ?, ?, ?, ?, ?, NULL, NULL)`,
+      [bucket, key, data.byteLength, etag, crypto.randomUUID(), new Date().toISOString()],
+    );
+
+    return Response.json({ ok: true });
+  } catch (err) {
+    console.error("[bunflare dashboard] R2 upload error:", err);
+    return Response.json({ error: String(err) }, { status: 500 });
+  }
+}
+
+function handleR2Download(url: URL): Response {
+  const bucket = url.searchParams.get("bucket");
+  const key = url.searchParams.get("key");
+
+  if (!bucket || !key) {
+    return Response.json({ error: "Missing bucket or key" }, { status: 400 });
+  }
+
+  const fp = join(getDataDir(), "r2", bucket, key);
+  const file = Bun.file(fp);
+
+  if (!existsSync(fp)) {
+    return new Response("Not found", { status: 404 });
+  }
+
+  const filename = key.split("/").pop() ?? key;
+  return new Response(file as unknown as BodyInit, {
+    headers: {
+      "Content-Disposition": `attachment; filename="${filename}"`,
+      "Content-Type": file.type || "application/octet-stream",
+    },
+  });
+}

package/runtime/dashboard/app.tsx

@@ -0,0 +1,220 @@
+import { render } from "preact";
+import { useState, useEffect } from "preact/hooks";
+
+import { useRoute } from "./lib";
+import { useQuery } from "./rpc/hooks";
+import { HomeView } from "./views/home";
+import { KvView } from "./views/kv";
+import { R2View } from "./views/r2";
+import { QueueView } from "./views/queue";
+import { DoView } from "./views/do";
+import { WorkflowsView } from "./views/workflows";
+import { ContainersView } from "./views/containers";
+import { D1View } from "./views/d1";
+import { CacheView } from "./views/cache";
+import { WorkersView } from "./views/workers";
+import { TracesView } from "./views/traces";
+import { ErrorsView } from "./views/errors";
+import { ScheduledView } from "./views/scheduled";
+import { EmailView } from "./views/email";
+import { AiView } from "./views/ai";
+import { AnalyticsEngineView } from "./views/analytics-engine";
+
+interface NavItem {
+  path: string;
+  label: string;
+  icon: string;
+  badge?: (counts: Record<string, number>) => number | null;
+  badgeColor?: string;
+}
+
+interface NavGroup {
+  label: string;
+  items: NavItem[];
+}
+
+const NAV_TOP: NavItem[] = [
+  { path: "/", label: "Overview", icon: "◉" },
+];
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: "Observability",
+    items: [
+      {
+        path: "/errors", label: "Errors", icon: "⚠\uFE0E",
+        badge: c => c.errors || null, badgeColor: "bg-red-500",
+      },
+      { path: "/traces", label: "Traces", icon: "⟡" },
+      { path: "/analytics", label: "Analytics Engine", icon: "⊘" },
+    ],
+  },
+  {
+    label: "Compute",
+    items: [
+      { path: "/workers", label: "Workers", icon: "⊡" },
+      { path: "/do", label: "Durable Objects", icon: "⬢" },
+      { path: "/containers", label: "Containers", icon: "▣" },
+      { path: "/workflows", label: "Workflows", icon: "⇶" },
+      { path: "/scheduled", label: "Scheduled", icon: "⏱\uFE0E" },
+    ],
+  },
+  {
+    label: "Storage",
+    items: [
+      { path: "/kv", label: "KV", icon: "⬡" },
+      { path: "/r2", label: "R2", icon: "◧" },
+      { path: "/d1", label: "D1", icon: "⊞" },
+      { path: "/cache", label: "Cache", icon: "◎" },
+    ],
+  },
+  {
+    label: "Messaging",
+    items: [
+      { path: "/queue", label: "Queues", icon: "☰" },
+      { path: "/email", label: "Email", icon: "✉\uFE0E" },
+    ],
+  },
+  {
+    label: "AI",
+    items: [
+      { path: "/ai", label: "AI", icon: "⚡" },
+    ],
+  },
+];
+
+function NavLink({ item, active, counts }: { item: NavItem; active: boolean; counts: Record<string, number> }) {
+  const badgeValue = item.badge?.(counts) ?? null;
+  return (
+    <a
+      href={`#${item.path}`}
+      class={`flex items-center gap-2.5 px-3 py-1.5 text-sm no-underline rounded-md transition-colors ${
+        active
+          ? "bg-panel-hover text-ink font-medium"
+          : "text-text-secondary hover:bg-panel-hover hover:text-ink"
+      }`}
+    >
+      <span class="w-4 text-center text-sm opacity-60">{item.icon}</span>
+      <span class="flex-1">{item.label}</span>
+      {badgeValue !== null && (
+        <span class={`min-w-[20px] h-5 flex items-center justify-center rounded-full text-[10px] font-bold text-white px-1.5 ${item.badgeColor ?? "bg-text-muted"}`}>
+          {badgeValue > 99 ? "99+" : badgeValue}
+        </span>
+      )}
+    </a>
+  );
+}
+
+function SidebarGroup({ group, activeSection, counts }: { group: NavGroup; activeSection: string; counts: Record<string, number> }) {
+  return (
+    <div class="mb-1">
+      <div class="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-text-muted">
+        {group.label}
+      </div>
+      <div class="mt-0.5 ml-1">
+        {group.items.map(item => (
+          <NavLink key={item.path} item={item} active={activeSection === item.path} counts={counts} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+type Theme = "auto" | "light" | "dark";
+
+const THEME_ICONS: Record<Theme, string> = { light: "☀︎", dark: "☾", auto: "◐" };
+const THEME_LABELS: Record<Theme, string> = { light: "Light", dark: "Dark", auto: "Auto" };
+const THEME_CYCLE: Record<Theme, Theme> = { auto: "light", light: "dark", dark: "auto" };
+
+function ThemeSwitcher() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem("bunflare-theme");
+    return saved === "light" || saved === "dark" ? saved : "auto";
+  });
+
+  useEffect(() => {
+    if (theme === "auto") {
+      document.documentElement.removeAttribute("data-theme");
+      localStorage.removeItem("bunflare-theme");
+    } else {
+      document.documentElement.setAttribute("data-theme", theme);
+      localStorage.setItem("bunflare-theme", theme);
+    }
+  }, [theme]);
+
+  return (
+    <button
+      onClick={() => setTheme(THEME_CYCLE[theme])}
+      class="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-text-muted hover:text-ink hover:bg-panel-hover rounded-md transition-colors"
+      title={`Theme: ${THEME_LABELS[theme]}`}
+    >
+      <span class="w-4 text-center text-sm">{THEME_ICONS[theme]}</span>
+      <span>{THEME_LABELS[theme]}</span>
+    </button>
+  );
+}
+
+function App() {
+  const route = useRoute();
+  const activeSection = "/" + (route.split("/")[1] || "");
+  const { data: overview } = useQuery("overview.get");
+
+  const counts: Record<string, number> = overview
+    ? { errors: overview.errors, kv: overview.kv, r2: overview.r2, queue: overview.queue, do: overview.do, workflows: overview.workflows, containers: overview.containers, d1: overview.d1, cache: overview.cache, scheduled: overview.scheduled, email: overview.email, ai: overview.ai }
+    : {};
+
+  function renderView() {
+    if (route === "/" || route === "") return <HomeView />;
+    if (route.startsWith("/errors")) return <ErrorsView route={route} />;
+    if (route.startsWith("/traces")) return <TracesView />;
+    if (route.startsWith("/workers")) return <WorkersView />;
+    if (route.startsWith("/kv")) return <KvView route={route} />;
+    if (route.startsWith("/r2")) return <R2View route={route} />;
+    if (route.startsWith("/queue")) return <QueueView route={route} />;
+    if (route.startsWith("/do")) return <DoView route={route} />;
+    if (route.startsWith("/workflows")) return <WorkflowsView route={route} />;
+    if (route.startsWith("/containers")) return <ContainersView route={route} />;
+    if (route.startsWith("/d1")) return <D1View route={route} />;
+    if (route.startsWith("/cache")) return <CacheView route={route} />;
+    if (route.startsWith("/scheduled")) return <ScheduledView route={route} />;
+    if (route.startsWith("/email")) return <EmailView route={route} />;
+    if (route.startsWith("/ai")) return <AiView route={route} />;
+    if (route.startsWith("/analytics")) return <AnalyticsEngineView route={route} />;
+    return <div class="p-8 text-text-muted">Page not found</div>;
+  }
+
+  return (
+    <div class="flex h-full">
+      <nav class="w-52 flex-shrink-0 border-r border-border bg-panel flex flex-col">
+        <div class="p-4 pb-3">
+          <a href="#/" class="flex items-center gap-2.5 no-underline">
+            <span class="w-7 h-7 rounded-lg bg-ink flex items-center justify-center text-xs font-bold text-surface">B</span>
+            <div>
+              <div class="text-sm font-semibold text-ink leading-tight">Bunflare</div>
+              <div class="text-[10px] text-text-muted">Dev Dashboard</div>
+            </div>
+          </a>
+        </div>
+        <div class="flex-1 overflow-y-auto scrollbar-thin px-2 py-1">
+          {NAV_TOP.map(item => (
+            <div key={item.path} class="mb-2">
+              <NavLink item={item} active={activeSection === item.path} counts={counts} />
+            </div>
+          ))}
+          {NAV_GROUPS.map(group => (
+            <SidebarGroup key={group.label} group={group} activeSection={activeSection} counts={counts} />
+          ))}
+        </div>
+        <div class="border-t border-border px-2 py-2">
+          <ThemeSwitcher />
+        </div>
+      </nav>
+
+      <main class="flex-1 overflow-y-auto scrollbar-thin bg-surface">
+        {renderView()}
+      </main>
+    </div>
+  );
+}
+
+render(<App />, document.getElementById("app")!);

package/runtime/dashboard/components/breadcrumb.tsx

@@ -0,0 +1,16 @@
+export function Breadcrumb({ items }: { items: { label: string; href?: string }[] }) {
+  return (
+    <div class="flex items-center gap-2 text-sm text-text-muted mb-8">
+      {items.map((item, i) => (
+        <span key={i} class="flex items-center gap-2">
+          {i > 0 && <span class="text-text-dim">/</span>}
+          {item.href ? (
+            <a href={item.href} class="text-text-secondary hover:text-ink no-underline font-medium transition-colors">{item.label}</a>
+          ) : (
+            <span class="text-ink font-semibold">{item.label}</span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}

package/runtime/dashboard/components/buttons.tsx

@@ -0,0 +1,13 @@
+export function LoadMoreButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button onClick={onClick} class="mt-4 rounded-md px-3 py-1.5 text-sm font-medium bg-panel border border-border text-text-secondary hover:bg-panel-hover transition-all">
+      Load more
+    </button>
+  );
+}
+
+export function DeleteButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button onClick={onClick} class="text-red-400 hover:text-red-600 text-xs font-medium rounded-md px-2 py-1 hover:bg-red-50 transition-all">Delete</button>
+  );
+}

package/runtime/dashboard/components/code-block.tsx

@@ -0,0 +1,5 @@
+export function CodeBlock({ children, class: className }: { children: any; class?: string }) {
+  return (
+    <pre class={`bg-panel-secondary rounded-lg p-4 text-xs overflow-x-auto font-mono ${className ?? ""}`}>{children}</pre>
+  );
+}

package/runtime/dashboard/components/detail-field.tsx

@@ -0,0 +1,8 @@
+export function DetailField({ label, value, children }: { label: string; value?: string; children?: any }) {
+  return (
+    <div class="bg-panel rounded-lg border border-border p-5">
+      <div class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">{label}</div>
+      {value ? <div class="font-mono text-sm font-medium">{value}</div> : children}
+    </div>
+  );
+}

package/runtime/dashboard/components/empty-state.tsx

@@ -0,0 +1,8 @@
+export function EmptyState({ message }: { message: string }) {
+  return (
+    <div class="text-center py-16 text-text-muted">
+      <div class="text-5xl mb-3 opacity-50">&#8709;</div>
+      <div class="text-sm font-medium">{message}</div>
+    </div>
+  );
+}

package/runtime/dashboard/components/filter-input.tsx

@@ -0,0 +1,11 @@
+export function FilterInput({ value, onInput, placeholder, class: className }: { value: string; onInput: (v: string) => void; placeholder?: string; class?: string }) {
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onInput={e => onInput((e.target as HTMLInputElement).value)}
+      class={`bg-panel border border-border rounded-lg px-3 py-2 text-sm outline-none focus:border-border focus:ring-1 focus:ring-border transition-all ${className ?? "w-72"}`}
+    />
+  );
+}

package/runtime/dashboard/components/index.ts

@@ -0,0 +1,16 @@
+export { Modal } from "./modal";
+export { EmptyState } from "./empty-state";
+export { PageHeader } from "./page-header";
+export { Breadcrumb } from "./breadcrumb";
+export { Table } from "./table";
+export { DetailField } from "./detail-field";
+export { CodeBlock } from "./code-block";
+export { FilterInput } from "./filter-input";
+export { PillButton } from "./pill-button";
+export { RefreshButton } from "./refresh-button";
+export { LoadMoreButton, DeleteButton } from "./buttons";
+export { TableLink } from "./table-link";
+export { StatusBadge } from "./status-badge";
+export { ServiceInfo } from "./service-info";
+export { SqlBrowser } from "../sql-browser/index";
+export { KeyValueTable } from "./key-value-table";

package/runtime/dashboard/components/key-value-table.tsx

@@ -0,0 +1,23 @@
+export function KeyValueTable({ data }: { data: Record<string, string> }) {
+  const entries = Object.entries(data);
+  if (entries.length === 0) {
+    return <div class="px-4 py-3 text-sm text-text-muted">No entries</div>;
+  }
+
+  return (
+    <table class="w-full text-sm">
+      <tbody>
+        {entries.map(([key, value]) => (
+          <tr key={key} class="border-b border-border-subtle last:border-0 hover:bg-panel-hover/50 transition-colors">
+            <td class="px-4 py-2 font-medium text-text-secondary whitespace-nowrap align-top font-mono" style="width: 1%;">
+              {key}
+            </td>
+            <td class="px-4 py-2 text-ink break-all font-mono">
+              {value}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/runtime/dashboard/components/modal.tsx

@@ -0,0 +1,23 @@
+import type { ComponentChildren } from "preact";
+
+export function Modal({ title, onClose, maxWidth, children }: {
+  title: string | ComponentChildren;
+  onClose: () => void;
+  maxWidth?: string;
+  children: ComponentChildren;
+}) {
+  return (
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div class={`bg-panel rounded-xl shadow-xl border border-border w-full ${maxWidth ?? "max-w-lg"} mx-4 max-h-[80vh] flex flex-col`}>
+        <div class="flex items-center justify-between px-5 py-4 border-b border-border-subtle">
+          <h3 class="text-sm font-bold text-ink">{title}</h3>
+          <button onClick={onClose} class="text-text-muted hover:text-text-data text-lg leading-none transition-colors">&times;</button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/runtime/dashboard/components/page-header.tsx

@@ -0,0 +1,11 @@
+export function PageHeader({ title, subtitle, actions }: { title: string; subtitle?: string; actions?: preact.ComponentChildren }) {
+  return (
+    <div class="mb-8 flex items-start justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-ink">{title}</h1>
+        {subtitle && <div class="text-sm text-text-muted mt-1 font-medium">{subtitle}</div>}
+      </div>
+      {actions && <div class="flex gap-2 items-center">{actions}</div>}
+    </div>
+  );
+}

package/runtime/dashboard/components/pill-button.tsx

@@ -0,0 +1,14 @@
+export function PillButton({ onClick, active, children }: { onClick: () => void; active?: boolean; children: any }) {
+  return (
+    <button
+      onClick={onClick}
+      class={`rounded-md px-3 py-1.5 text-sm font-medium transition-all ${
+        active
+          ? "bg-ink text-surface"
+          : "bg-panel border border-border text-text-secondary hover:bg-panel-hover"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}

package/runtime/dashboard/components/refresh-button.tsx

@@ -0,0 +1,7 @@
+export function RefreshButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button onClick={onClick} class="rounded-md px-3 py-1.5 text-sm font-medium bg-panel border border-border text-text-secondary hover:bg-panel-hover transition-all" title="Refresh">
+      Refresh
+    </button>
+  );
+}

package/runtime/dashboard/components/service-info.tsx

@@ -0,0 +1,45 @@
+export function ServiceInfo({ description, links, stats, configGroups }: {
+  description: string;
+  links: { label: string; href: string }[];
+  stats?: { label: string; value: string | number }[];
+  configGroups?: { title: string; items: { name: string; value: string }[] }[] | null;
+}) {
+  return (
+    <div class="w-80 flex-shrink-0 space-y-5">
+      {stats && stats.length > 0 && (
+        <div class="grid grid-cols-2 gap-2">
+          {stats.map(stat => (
+            <div key={stat.label} class="bg-panel border border-border rounded-lg px-3.5 py-3">
+              <div class="text-xs text-text-muted font-medium">{stat.label}</div>
+              <div class="text-xl font-semibold text-ink mt-0.5 tabular-nums">{stat.value}</div>
+            </div>
+          ))}
+        </div>
+      )}
+      {configGroups && configGroups.length > 0 && configGroups.map(group => (
+        <div key={group.title}>
+          <div class="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">{group.title}</div>
+          <div class="bg-panel border border-border rounded-lg divide-y divide-border-subtle">
+            {group.items.map(item => (
+              <div key={item.name} class="px-3.5 py-2.5">
+                <div class="text-xs font-medium text-ink">{item.name}</div>
+                <div class="text-xs text-text-muted font-mono mt-0.5 truncate" title={item.value}>{item.value}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      <div>
+        <p class="text-xs text-text-muted leading-relaxed mb-2.5">{description}</p>
+        <div class="space-y-1.5">
+          {links.map(link => (
+            <a key={link.href} href={link.href} target="_blank" rel="noopener"
+               class="flex items-center gap-1.5 text-xs text-text-muted hover:text-ink no-underline transition-colors">
+              <span>&rarr;</span> {link.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/runtime/dashboard/components/status-badge.tsx

@@ -0,0 +1,7 @@
+export function StatusBadge({ status, colorMap }: { status: string; colorMap: Record<string, string> }) {
+  return (
+    <span class={`inline-flex px-2 py-0.5 rounded-md text-xs font-semibold ${colorMap[status] ?? "bg-panel-hover text-text-data"}`}>
+      {status}
+    </span>
+  );
+}

package/runtime/dashboard/components/table-link.tsx

@@ -0,0 +1,5 @@
+export function TableLink({ href, children, mono }: { href: string; children: any; mono?: boolean }) {
+  return (
+    <a href={href} class={`text-ink font-medium hover:text-accent-olive transition-colors no-underline ${mono ? "font-mono text-xs" : ""}`}>{children}</a>
+  );
+}

package/runtime/dashboard/components/table.tsx

@@ -0,0 +1,26 @@
+export function Table({ headers, rows }: { headers: string[]; rows: unknown[][] }) {
+  return (
+    <div class="bg-panel rounded-lg border border-border overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-border-subtle">
+            {headers.map(h => (
+              <th key={h} class="text-left px-4 py-3 font-medium text-xs text-text-muted uppercase tracking-wider">{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} class="group border-b border-border-row last:border-0 hover:bg-panel-hover/50 transition-colors">
+              {row.map((cell, j) => (
+                <td key={j} class="px-4 py-3">
+                  {cell as any}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}