robodev 0.35.0 → 0.37.0

package/src/dev-inspect.ts

@@ -1,8 +1,64 @@
+import {
+  isLocalAuthPath,
+  matchPathParams,
+  matchProjectRoute,
+  projectGoogleOverrideMode,
+  projectSocketCount,
+  socketAuthDisplay,
+} from "@robodev-ai/runtime";
+import type { ApiAuth } from "@robodev-ai/sdk";
+
 export const DEV_INSPECT_MAX = 500;
+export const HISTOGRAM_MINUTES = 120;
+
+const DASHBOARD_HTML_PATHS = new Set([
+  "/_robodev",
+  "/_robodev/apis",
+  "/_robodev/jobs",
+  "/_robodev/emails",
+  "/_robodev/auth",
+  "/_robodev/storage",
+  "/_robodev/sockets",
+  "/_robodev/logs",
+]);
+
+const DASHBOARD_JSON_PATHS = new Set(["/_robodev/state.json", "/_robodev/logs.json"]);
+
+const HISTOGRAM_EXCLUDED_PATHS = new Set([
+  ...DASHBOARD_HTML_PATHS,
+  ...DASHBOARD_JSON_PATHS,
+  "/_robodev/docs",
+  "/_robodev/swagger",
+  "/docs",
+  "/swagger",
+  "/_robodev/scalar",
+  "/scalar",
+  "/openapi.json",
+  "/_robodev/ready",
+]);
 
-const INSPECT_PATHS = new Set(["/_robodev", "/_robodev/logs", "/_robodev/logs.json"]);
+export const RESERVED_AUTH_ROUTES: Array<{ method: string; path: string; file: string }> = [
+  { method: "POST", path: "/api/user/auth/register", file: "reserved" },
+  { method: "POST", path: "/api/user/auth/login", file: "reserved" },
+  { method: "POST", path: "/api/user/auth/refresh", file: "reserved" },
+  { method: "GET", path: "/api/user/auth/magic-link", file: "reserved" },
+  { method: "GET", path: "/api/user/auth/magic-link/callback", file: "reserved" },
+  { method: "POST", path: "/api/user/auth/forgot-password", file: "reserved" },
+  { method: "POST", path: "/api/user/auth/forgot-password/callback", file: "reserved" },
+  { method: "GET", path: "/api/user/auth/google", file: "reserved" },
+  { method: "GET", path: "/api/user/auth/google/callback", file: "reserved" },
+  { method: "GET", path: "/api/user/auth/apple/callback", file: "reserved" },
+  { method: "GET", path: "/api/user/me", file: "reserved" },
+  { method: "PUT", path: "/api/user/me", file: "reserved" },
+];
 
-export type DevInspectKind = "request" | "email" | "auth_code" | "job" | "log";
+export const SOCKET_PREVIEW_MAX = 200;
+
+export type DevInspectKind =
+  "request" | "email" | "auth_code" | "job" | "job_run" | "log" | "storage" | "socket";
+
+export type StorageInspectOp = "upload" | "get" | "getUrl" | "delete" | "list" | "serve";
+export type SocketInspectKind = "connect" | "message" | "close" | "send" | "broadcast";
 
 type EventBase = {
   id: string;
@@ -38,39 +94,251 @@ export type DevInspectJobEvent = EventBase & {
   error: string;
 };
 
+export type DevInspectJobRunEvent = EventBase & {
+  kind: "job_run";
+  name: string;
+  status: "succeeded" | "failed";
+  payload?: unknown;
+  error?: string;
+};
+
 export type DevInspectLogEvent = EventBase & {
   kind: "log";
   message: string;
 };
 
+export type DevInspectStorageEvent = EventBase & {
+  kind: "storage";
+  op: StorageInspectOp;
+  key: string;
+  ok: boolean;
+  error?: string;
+};
+
+export type DevInspectSocketEvent = EventBase & {
+  kind: "socket";
+  socketKind: SocketInspectKind;
+  path?: string;
+  name?: string;
+  userId?: string | null;
+  code?: number;
+  reason?: string;
+  error?: string;
+  preview?: string;
+};
+
 export type DevInspectEvent =
   | DevInspectRequestEvent
   | DevInspectEmailEvent
   | DevInspectAuthCodeEvent
   | DevInspectJobEvent
-  | DevInspectLogEvent;
+  | DevInspectJobRunEvent
+  | DevInspectLogEvent
+  | DevInspectStorageEvent
+  | DevInspectSocketEvent;
 
 export type DevInspectRecordInput =
   | Omit<DevInspectRequestEvent, "id" | "at">
   | Omit<DevInspectEmailEvent, "id" | "at">
   | Omit<DevInspectAuthCodeEvent, "id" | "at">
   | Omit<DevInspectJobEvent, "id" | "at">
-  | Omit<DevInspectLogEvent, "id" | "at">;
+  | Omit<DevInspectJobRunEvent, "id" | "at">
+  | Omit<DevInspectLogEvent, "id" | "at">
+  | Omit<DevInspectStorageEvent, "id" | "at">
+  | Omit<DevInspectSocketEvent, "id" | "at">;
+
+export type DashboardGoogle = "broker" | "local_override" | "incomplete";
+
+export type RequestHistogramBucket = { t: number; c2xx: number; c4xx: number; c5xx: number };
+export type JobHistogramBucket = { t: number; succeeded: number; failed: number };
+
+export type DashboardStorageObject = {
+  key: string;
+  public: boolean;
+  sizeBytes: number;
+  contentType: string;
+  createdAt: string;
+  url: string;
+};
+
+export type DashboardStorageActivity = {
+  at: number;
+  op: StorageInspectOp;
+  key: string;
+  ok: boolean;
+  error?: string;
+};
+
+export type DashboardSocketDef = {
+  path: string;
+  file: string;
+  auth: "required" | "public";
+  name: string;
+};
+
+export type DashboardSocketEvent = {
+  at: number;
+  socketKind: SocketInspectKind;
+  path?: string;
+  name?: string;
+  userId?: string | null;
+  code?: number;
+  reason?: string;
+  error?: string;
+  preview?: string;
+};
+
+export type DashboardState = {
+  overview: {
+    apiCount: number;
+    jobCount: number;
+    storageObjectCount: number;
+    socketCount: number;
+    google: DashboardGoogle;
+    requestHistogram: RequestHistogramBucket[];
+    jobHistogram: JobHistogramBucket[];
+    links: { swagger: string; scalar: string; openapi: string };
+  };
+  routes: Array<{ method: string; path: string; file: string }>;
+  calls: Array<{ at: number; method: string; path: string; status: number; durationMs: number }>;
+  jobs: Array<{ name: string; cron: string | null; file: string }>;
+  jobRuns: Array<{
+    at: number;
+    name: string;
+    status: "succeeded" | "failed";
+    payload?: unknown;
+    error?: string;
+  }>;
+  emails: Array<{ at: number; to: string; subject: string; text?: string }>;
+  auth: {
+    google: DashboardGoogle;
+    users: Array<{ id: string; email: string; name: string | null; createdAt: string }>;
+  };
+  storage: {
+    objects: DashboardStorageObject[];
+    activity: DashboardStorageActivity[];
+  };
+  sockets: {
+    connected: number;
+    defs: DashboardSocketDef[];
+    events: DashboardSocketEvent[];
+  };
+};
+
+export type DashboardRuntime = {
+  routes: Array<{ method: string; path: string; file: string }>;
+  jobs: Array<{ name: string; file: string; def: { cron?: string } }>;
+  sockets?: Array<{ name: string; path: string; file: string; def: { auth?: ApiAuth } }>;
+  pool?: {
+    query: <R extends Record<string, unknown> = Record<string, unknown>>(
+      sql: string,
+      values?: unknown[],
+    ) => Promise<{ rows: R[] }>;
+  };
+} | null;
 
 export type DevInspectStore = {
   record: (input: DevInspectRecordInput) => DevInspectEvent;
   list: () => DevInspectEvent[];
+  incrementRequestHistogram: (status: number, at?: number) => void;
+  incrementJobHistogram: (outcome: "succeeded" | "failed", at?: number) => void;
+  requestHistogram: (now?: number) => RequestHistogramBucket[];
+  jobHistogram: (now?: number) => JobHistogramBucket[];
   html: () => string;
 };
 
-/** Inspect HTML/JSON self-routes — do not print or record these as requests. */
+/** Dashboard HTML/JSON self-routes — do not print or record these as requests. */
 export function isInspectPath(pathname: string): boolean {
-  return INSPECT_PATHS.has(pathname);
+  return DASHBOARD_HTML_PATHS.has(pathname) || DASHBOARD_JSON_PATHS.has(pathname);
+}
+
+export function isHistogramExcludedPath(pathname: string): boolean {
+  return HISTOGRAM_EXCLUDED_PATHS.has(pathname);
+}
+
+/** Project file routes and `/api/user…` only. Unmatched 404s and reserved tools are out. */
+export function shouldCountRequestHistogram(
+  pathname: string,
+  runtime: { routes: Array<{ method: string; path: string }> } | null,
+  method = "GET",
+): boolean {
+  if (isHistogramExcludedPath(pathname)) return false;
+  if (isLocalAuthPath(pathname)) return true;
+  if (!runtime) return false;
+  return matchProjectRoute(pathname, method, runtime.routes) !== null;
+}
+
+export function callMatchesRoute(
+  call: { method: string; path: string },
+  route: { method: string; path: string },
+): boolean {
+  if (call.method.toUpperCase() !== route.method.toUpperCase()) return false;
+  if (matchPathParams(route.path, call.path)) return true;
+  if (route.path.startsWith("/api/") || route.path === "/api") return false;
+  const prefixed = route.path === "/" ? "/api" : `/api${route.path}`;
+  return matchPathParams(prefixed, call.path) !== null;
+}
+
+/** Exact key for object ops; list matches empty prefix, the prefix itself, or a key under it. */
+export function storageActivityMatchesKey(
+  event: { op: StorageInspectOp; key: string },
+  selectedKey: string,
+): boolean {
+  if (event.op === "list") {
+    const prefix = event.key;
+    return prefix === "" || selectedKey === prefix || selectedKey.startsWith(prefix);
+  }
+  return event.key === selectedKey;
+}
+
+export function socketEventMatchesDef(
+  event: { path?: string; name?: string },
+  socket: { path: string; name: string },
+): boolean {
+  if (event.path && matchPathParams(socket.path, event.path)) return true;
+  return event.name === socket.name;
+}
+
+export function truncateInspectPreview(value: unknown, max = SOCKET_PREVIEW_MAX): string {
+  let text: string;
+  if (typeof value === "string") {
+    text = value;
+  } else {
+    try {
+      text = JSON.stringify(value) ?? "";
+    } catch {
+      text = "[unserializable]";
+    }
+  }
+  if (text.length <= max) return text;
+  return `${text.slice(0, max)}…`;
+}
+
+export function googleDashboardStatus(mode: "both" | "one" | "none"): DashboardGoogle {
+  if (mode === "both") return "local_override";
+  if (mode === "one") return "incomplete";
+  return "broker";
+}
+
+function minuteOf(at: number): number {
+  return Math.floor(at / 60_000);
+}
+
+function pruneMap<T>(map: Map<number, T>, nowMinute: number): void {
+  const oldest = nowMinute - HISTOGRAM_MINUTES + 1;
+  for (const key of map.keys()) {
+    if (key < oldest) map.delete(key);
+  }
 }
 
 export function createDevInspect(options?: { max?: number }): DevInspectStore {
   const max = options?.max ?? DEV_INSPECT_MAX;
   const events: DevInspectEvent[] = [];
+  const requestBuckets = new Map<
+    number,
+    { minute: number; c2xx: number; c4xx: number; c5xx: number }
+  >();
+  const jobBuckets = new Map<number, { minute: number; succeeded: number; failed: number }>();
   let nextId = 1;
 
   function record(input: DevInspectRecordInput): DevInspectEvent {
@@ -86,142 +354,832 @@ export function createDevInspect(options?: { max?: number }): DevInspectStore {
     return events.slice();
   }
 
-  return { record, list, html: inspectHtml };
+  function incrementRequestHistogram(status: number, at = Date.now()): void {
+    if (status < 200 || (status >= 300 && status < 400) || status >= 600) return;
+    const minute = minuteOf(at);
+    pruneMap(requestBuckets, minute);
+    let bucket = requestBuckets.get(minute);
+    if (!bucket) {
+      bucket = { minute, c2xx: 0, c4xx: 0, c5xx: 0 };
+      requestBuckets.set(minute, bucket);
+    }
+    if (status < 300) bucket.c2xx += 1;
+    else if (status < 500) bucket.c4xx += 1;
+    else bucket.c5xx += 1;
+  }
+
+  function incrementJobHistogram(outcome: "succeeded" | "failed", at = Date.now()): void {
+    const minute = minuteOf(at);
+    pruneMap(jobBuckets, minute);
+    let bucket = jobBuckets.get(minute);
+    if (!bucket) {
+      bucket = { minute, succeeded: 0, failed: 0 };
+      jobBuckets.set(minute, bucket);
+    }
+    bucket[outcome] += 1;
+  }
+
+  function requestHistogram(now = Date.now()): RequestHistogramBucket[] {
+    const nowMinute = minuteOf(now);
+    pruneMap(requestBuckets, nowMinute);
+    const out: RequestHistogramBucket[] = [];
+    for (let i = HISTOGRAM_MINUTES - 1; i >= 0; i--) {
+      const minute = nowMinute - i;
+      const bucket = requestBuckets.get(minute);
+      out.push({
+        t: minute * 60_000,
+        c2xx: bucket?.c2xx ?? 0,
+        c4xx: bucket?.c4xx ?? 0,
+        c5xx: bucket?.c5xx ?? 0,
+      });
+    }
+    return out;
+  }
+
+  function jobHistogram(now = Date.now()): JobHistogramBucket[] {
+    const nowMinute = minuteOf(now);
+    pruneMap(jobBuckets, nowMinute);
+    const out: JobHistogramBucket[] = [];
+    for (let i = HISTOGRAM_MINUTES - 1; i >= 0; i--) {
+      const minute = nowMinute - i;
+      const bucket = jobBuckets.get(minute);
+      out.push({
+        t: minute * 60_000,
+        succeeded: bucket?.succeeded ?? 0,
+        failed: bucket?.failed ?? 0,
+      });
+    }
+    return out;
+  }
+
+  return {
+    record,
+    list,
+    incrementRequestHistogram,
+    incrementJobHistogram,
+    requestHistogram,
+    jobHistogram,
+    html: inspectHtml,
+  };
 }
 
-/** Inline inspect page — same pattern as runtime `swaggerHtml` (string template, no FE build). */
+function isoTimestamp(value: Date | string | undefined): string {
+  if (value instanceof Date) return value.toISOString();
+  return String(value ?? "");
+}
+
+async function loadAuthUsers(
+  pool: NonNullable<DashboardRuntime>["pool"],
+): Promise<DashboardState["auth"]["users"]> {
+  if (!pool) return [];
+  try {
+    const result = await pool.query<{
+      id: string;
+      email: string;
+      name: string | null;
+      created_at: Date | string;
+    }>(`SELECT id, email, name, created_at FROM robodev_auth.users ORDER BY created_at DESC`);
+    return result.rows.map((row) => ({
+      id: row.id,
+      email: row.email,
+      name: row.name ?? null,
+      createdAt: isoTimestamp(row.created_at),
+    }));
+  } catch {
+    return [];
+  }
+}
+
+async function loadStorageObjectCount(
+  pool: NonNullable<DashboardRuntime>["pool"],
+): Promise<number> {
+  if (!pool) return 0;
+  try {
+    const result = await pool.query<{ count: string | number }>(
+      `SELECT count(*) FROM robodev_storage.objects`,
+    );
+    return Number(result.rows[0]?.count ?? 0);
+  } catch {
+    return 0;
+  }
+}
+
+async function loadStorageObjects(
+  pool: NonNullable<DashboardRuntime>["pool"],
+): Promise<DashboardStorageObject[]> {
+  if (!pool) return [];
+  try {
+    const result = await pool.query<{
+      key: string;
+      public: boolean;
+      size_bytes: string | number;
+      content_type: string;
+      created_at: Date | string;
+    }>(
+      `SELECT key, public, size_bytes, content_type, created_at
+       FROM robodev_storage.objects
+       ORDER BY created_at DESC`,
+    );
+    return result.rows.map((row) => ({
+      key: row.key,
+      public: Boolean(row.public),
+      sizeBytes: Number(row.size_bytes),
+      contentType: row.content_type,
+      createdAt: isoTimestamp(row.created_at),
+      url: `/storage/objects/${row.key}`,
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export async function buildDashboardState(input: {
+  inspect: DevInspectStore;
+  runtime: DashboardRuntime;
+  projectId?: string;
+  googleClientId?: string;
+  googleClientSecret?: string;
+}): Promise<DashboardState> {
+  const google = googleDashboardStatus(
+    projectGoogleOverrideMode(input.googleClientId, input.googleClientSecret),
+  );
+  const fileRoutes = (input.runtime?.routes ?? []).map((route) => ({
+    method: route.method.toUpperCase(),
+    path: route.path,
+    file: route.file,
+  }));
+  const routes = [...fileRoutes, ...RESERVED_AUTH_ROUTES];
+  const newest = input.inspect.list().slice().reverse();
+  const calls = newest
+    .filter((event): event is DevInspectRequestEvent => event.kind === "request")
+    .filter((event) => !isHistogramExcludedPath(event.path))
+    .map((event) => ({
+      at: event.at,
+      method: event.method,
+      path: event.path,
+      status: event.status,
+      durationMs: event.durationMs,
+    }));
+  const jobRuns = newest
+    .filter((event): event is DevInspectJobRunEvent => event.kind === "job_run")
+    .map((event) => ({
+      at: event.at,
+      name: event.name,
+      status: event.status,
+      payload: event.payload,
+      error: event.error,
+    }));
+  const emails = newest
+    .filter((event): event is DevInspectEmailEvent => event.kind === "email")
+    .map((event) => ({
+      at: event.at,
+      to: event.to,
+      subject: event.subject,
+      text: event.text,
+    }));
+  const jobs = (input.runtime?.jobs ?? []).map((job) => ({
+    name: job.name,
+    cron: job.def.cron ?? null,
+    file: job.file,
+  }));
+  const activity = newest
+    .filter((event): event is DevInspectStorageEvent => event.kind === "storage")
+    .map((event) => ({
+      at: event.at,
+      op: event.op,
+      key: event.key,
+      ok: event.ok,
+      error: event.error,
+    }));
+  const socketEvents = newest
+    .filter((event): event is DevInspectSocketEvent => event.kind === "socket")
+    .map((event) => ({
+      at: event.at,
+      socketKind: event.socketKind,
+      path: event.path,
+      name: event.name,
+      userId: event.userId,
+      code: event.code,
+      reason: event.reason,
+      error: event.error,
+      preview: event.preview,
+    }));
+  const socketDefs = (input.runtime?.sockets ?? []).map((socket) => ({
+    path: socket.path,
+    file: socket.file,
+    auth: socketAuthDisplay(socket.def.auth ?? false),
+    name: socket.name,
+  }));
+
+  return {
+    overview: {
+      apiCount: routes.length,
+      jobCount: jobs.length,
+      storageObjectCount: await loadStorageObjectCount(input.runtime?.pool),
+      socketCount: socketDefs.length,
+      google,
+      requestHistogram: input.inspect.requestHistogram(),
+      jobHistogram: input.inspect.jobHistogram(),
+      links: { swagger: "/_robodev/docs", scalar: "/_robodev/scalar", openapi: "/openapi.json" },
+    },
+    routes,
+    calls,
+    jobs,
+    jobRuns,
+    emails,
+    auth: {
+      google,
+      users: await loadAuthUsers(input.runtime?.pool),
+    },
+    storage: {
+      objects: await loadStorageObjects(input.runtime?.pool),
+      activity,
+    },
+    sockets: {
+      connected: input.projectId ? projectSocketCount(input.projectId) : 0,
+      defs: socketDefs,
+      events: socketEvents,
+    },
+  };
+}
+
+/** Inline dashboard — same pattern as runtime `swaggerHtml` (string template, no FE build). */
 export function inspectHtml(): string {
   return `<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Robodev Inspect</title>
+    <title>robodev dev</title>
     <style>
       :root { color-scheme: light dark; }
       body {
         margin: 0 auto;
-        max-width: 960px;
-        padding: 24px 20px 48px;
+        max-width: 1080px;
+        padding: 20px 18px 48px;
         font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
         line-height: 1.45;
       }
-      h1 { font-size: 1.25rem; font-weight: 650; margin: 0 0 4px; }
-      .lead { color: #666; margin: 0 0 24px; font-size: 0.9rem; }
-      h2 {
-        font-size: 0.75rem;
-        font-weight: 700;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        margin: 28px 0 8px;
-      }
-      ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ddd; }
-      li {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: 12.5px;
-        padding: 8px 0;
-        border-bottom: 1px solid #eee;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-      .empty { color: #888; font-family: inherit; }
-      .meta { color: #888; }
+      header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; margin-bottom: 20px; }
+      h1 { font-size: 1.15rem; font-weight: 650; margin: 0; }
+      nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.92rem; }
+      nav a { color: inherit; text-decoration: none; opacity: 0.7; }
+      nav a.current { opacity: 1; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
+      .lead { color: #666; margin: 0 0 18px; font-size: 0.88rem; }
+      .cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
+      .card {
+        min-width: 140px;
+        flex: 1;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 10px 12px;
+      }
+      .card .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }
+      .card .value { font-size: 1.35rem; font-weight: 650; margin-top: 2px; }
+      .card .note { font-size: 0.82rem; margin-top: 4px; }
+      .links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; font-size: 0.9rem; }
+      .chart-wrap { margin: 0 0 18px; }
+      .chart-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; }
+      .legend { font-size: 0.75rem; opacity: 0.75; margin: 0 0 8px; }
+      .legend span { margin-right: 10px; }
+      .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
+      .chart { display: flex; align-items: flex-end; gap: 1px; height: 88px; border-bottom: 1px solid #ddd; }
+      .bar { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; min-width: 0; }
+      .seg { width: 100%; }
+      .c2xx, .sw-2xx { background: #3b82f6; }
+      .c4xx, .sw-4xx { background: #f59e0b; }
+      .c5xx, .sw-5xx { background: #ef4444; }
+      .ok, .sw-ok { background: #22c55e; }
+      .bad, .sw-bad { background: #ef4444; }
+      .tabs { display: flex; gap: 8px; margin: 0 0 12px; }
+      .tabs button, .clear {
+        font: inherit;
+        font-size: 0.85rem;
+        padding: 4px 10px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+      .tabs button.active { font-weight: 650; border-color: currentColor; }
+      table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+      th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
+      th { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; font-family: inherit; }
+      tr.clickable { cursor: pointer; }
+      tr.clickable:hover td { background: color-mix(in srgb, currentColor 6%, transparent); }
+      .empty { color: #888; font-family: inherit; padding: 10px 0; }
+      .filter { font-size: 0.85rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
+      .ok-text { color: #16a34a; }
+      .bad-text { color: #dc2626; }
+      .page { display: none; }
+      .page.visible { display: block; }
       @media (prefers-color-scheme: dark) {
-        .lead, .empty, .meta { color: #9aa0a6; }
-        ul { border-top-color: #333; }
-        li { border-bottom-color: #2a2a2a; }
+        .lead, .empty, .card .label, .chart-title, .legend { color: #9aa0a6; }
+        .card, .chart { border-color: #333; }
+        th, td { border-bottom-color: #2a2a2a; }
+        .tabs button, .clear { border-color: #555; }
       }
     </style>
   </head>
   <body>
-    <h1>Inspect</h1>
-    <p class="lead">Local <code>robodev dev</code> events. Newest first. Polls every 1s.</p>
-    <h2>Requests</h2>
-    <ul id="requests"></ul>
-    <h2>Emails</h2>
-    <ul id="emails"></ul>
-    <h2>Jobs</h2>
-    <ul id="jobs"></ul>
-    <h2>Logs</h2>
-    <ul id="logs"></ul>
+    <header>
+      <h1>robodev dev</h1>
+      <nav>
+        <a href="/_robodev" data-nav="overview">Overview</a>
+        <a href="/_robodev/apis" data-nav="apis">APIs</a>
+        <a href="/_robodev/jobs" data-nav="jobs">Jobs</a>
+        <a href="/_robodev/emails" data-nav="emails">Emails</a>
+        <a href="/_robodev/auth" data-nav="auth">Auth</a>
+        <a href="/_robodev/storage" data-nav="storage">Storage</a>
+        <a href="/_robodev/sockets" data-nav="sockets">Sockets</a>
+      </nav>
+    </header>
+    <p class="lead">Local dashboard. Readonly. Polls every 1s.</p>
+
+    <section id="page-overview" class="page">
+      <div class="cards">
+        <div class="card"><div class="label">APIs</div><div class="value" id="api-count">0</div></div>
+        <div class="card"><div class="label">Jobs</div><div class="value" id="job-count">0</div></div>
+        <div class="card"><div class="label">Storage</div><div class="value" id="storage-count">0</div></div>
+        <div class="card"><div class="label">Sockets</div><div class="value" id="socket-count">0</div></div>
+        <div class="card"><div class="label">Auth</div><div class="note" id="google-line"></div></div>
+      </div>
+      <div class="links" id="doc-links"></div>
+      <div class="chart-wrap">
+        <p class="chart-title">Requests (2 hours)</p>
+        <p class="legend">
+          <span><i class="swatch sw-2xx"></i>2xx</span>
+          <span><i class="swatch sw-4xx"></i>4xx</span>
+          <span><i class="swatch sw-5xx"></i>5xx</span>
+        </p>
+        <div class="chart" id="req-chart"></div>
+      </div>
+      <div class="chart-wrap">
+        <p class="chart-title">Jobs (2 hours)</p>
+        <p class="legend">
+          <span><i class="swatch sw-ok"></i>succeeded</span>
+          <span><i class="swatch sw-bad"></i>failed</span>
+        </p>
+        <div class="chart" id="job-chart"></div>
+      </div>
+    </section>
+
+    <section id="page-apis" class="page">
+      <div class="tabs">
+        <button type="button" data-tab="routes">Routes</button>
+        <button type="button" data-tab="calls">Calls</button>
+      </div>
+      <div id="apis-filter" class="filter" hidden></div>
+      <div id="apis-routes"></div>
+      <div id="apis-calls" hidden></div>
+    </section>
+
+    <section id="page-jobs" class="page">
+      <p class="chart-title">Registered</p>
+      <div id="jobs-defs"></div>
+      <p class="chart-title" style="margin-top:18px">Runs</p>
+      <div id="jobs-runs"></div>
+    </section>
+
+    <section id="page-emails" class="page">
+      <div id="emails-list"></div>
+    </section>
+
+    <section id="page-auth" class="page">
+      <p class="lead" id="auth-google"></p>
+      <div id="auth-users"></div>
+    </section>
+
+    <section id="page-storage" class="page">
+      <div class="tabs">
+        <button type="button" data-storage-tab="objects">Objects</button>
+        <button type="button" data-storage-tab="activity">Activity</button>
+      </div>
+      <div id="storage-filter" class="filter" hidden></div>
+      <div id="storage-objects"></div>
+      <div id="storage-activity" hidden></div>
+    </section>
+
+    <section id="page-sockets" class="page">
+      <p class="lead" id="sockets-connected">0 connected</p>
+      <div class="tabs">
+        <button type="button" data-socket-tab="sockets">Sockets</button>
+        <button type="button" data-socket-tab="events">Events</button>
+      </div>
+      <div id="sockets-filter" class="filter" hidden></div>
+      <div id="sockets-defs"></div>
+      <div id="sockets-events" hidden></div>
+    </section>
+
     <script>
+      var PAGES = {
+        "/_robodev": "overview",
+        "/_robodev/apis": "apis",
+        "/_robodev/jobs": "jobs",
+        "/_robodev/emails": "emails",
+        "/_robodev/auth": "auth",
+        "/_robodev/storage": "storage",
+        "/_robodev/sockets": "sockets"
+      };
+      var apisTab = "routes";
+      var storageTab = "objects";
+      var socketTab = "sockets";
+      var callFilter = null;
+      var storageFilter = null;
+      var socketFilter = null;
+      var lastState = null;
+
+      function pagePath() {
+        return location.pathname.replace(/\\/$/, "") || "/";
+      }
+      function currentPage() {
+        return PAGES[pagePath()] || "overview";
+      }
+      function matchPathParams(pattern, pathname) {
+        var patternParts = pattern.split("/").filter(Boolean);
+        var pathParts = pathname.split("/").filter(Boolean);
+        if (patternParts.length !== pathParts.length) return null;
+        var params = {};
+        for (var i = 0; i < patternParts.length; i++) {
+          var expected = patternParts[i];
+          var actual = pathParts[i];
+          if (expected.charAt(0) === ":") {
+            try { params[expected.slice(1)] = decodeURIComponent(actual); }
+            catch (e) { params[expected.slice(1)] = actual; }
+            continue;
+          }
+          if (expected !== actual) return null;
+        }
+        return params;
+      }
+      function callMatches(call, route) {
+        if (String(call.method).toUpperCase() !== String(route.method).toUpperCase()) return false;
+        if (matchPathParams(route.path, call.path)) return true;
+        if (route.path.indexOf("/api/") === 0 || route.path === "/api") return false;
+        var prefixed = route.path === "/" ? "/api" : "/api" + route.path;
+        return matchPathParams(prefixed, call.path) !== null;
+      }
+      function storageActivityMatches(event, selectedKey) {
+        if (event.op === "list") {
+          var prefix = event.key;
+          return prefix === "" || selectedKey === prefix || selectedKey.indexOf(prefix) === 0;
+        }
+        return event.key === selectedKey;
+      }
+      function socketEventMatches(event, socket) {
+        if (event.path && matchPathParams(socket.path, event.path)) return true;
+        return event.name === socket.name;
+      }
       function timeLabel(at) {
         return new Date(at).toLocaleTimeString();
       }
-      function emptyRow() {
-        const li = document.createElement("li");
-        li.className = "empty";
-        li.textContent = "None yet";
-        return li;
-      }
-      function line(at, text) {
-        const li = document.createElement("li");
-        const meta = document.createElement("span");
-        meta.className = "meta";
-        meta.textContent = timeLabel(at) + "  ";
-        li.appendChild(meta);
-        li.appendChild(document.createTextNode(text));
-        return li;
-      }
-      function fill(id, rows) {
-        const ul = document.getElementById(id);
-        ul.replaceChildren();
-        if (rows.length === 0) {
-          ul.appendChild(emptyRow());
-          return;
+      function googleLabel(mode) {
+        if (mode === "local_override") return "Local Google override";
+        if (mode === "incomplete") return "Google credentials incomplete (not override; Google is 503)";
+        return "Starbase identity broker";
+      }
+      function emptyNode() {
+        var p = document.createElement("p");
+        p.className = "empty";
+        p.textContent = "None yet";
+        return p;
+      }
+      function fill(el, node) {
+        el.replaceChildren();
+        el.appendChild(node);
+      }
+      function table(headers, rows, onRow) {
+        if (!rows.length) return emptyNode();
+        var tableEl = document.createElement("table");
+        var thead = document.createElement("thead");
+        var hr = document.createElement("tr");
+        for (var i = 0; i < headers.length; i++) {
+          var th = document.createElement("th");
+          th.textContent = headers[i];
+          hr.appendChild(th);
+        }
+        thead.appendChild(hr);
+        tableEl.appendChild(thead);
+        var tbody = document.createElement("tbody");
+        for (var r = 0; r < rows.length; r++) {
+          var tr = document.createElement("tr");
+          if (onRow) {
+            tr.className = "clickable";
+            (function (row) {
+              tr.addEventListener("click", function () { onRow(row); });
+            })(rows[r]);
+          }
+          var cells = rows[r].cells;
+          for (var c = 0; c < cells.length; c++) {
+            var td = document.createElement("td");
+            if (cells[c] && cells[c].html) td.innerHTML = cells[c].html;
+            else td.textContent = cells[c] == null ? "" : String(cells[c]);
+            tr.appendChild(td);
+          }
+          tbody.appendChild(tr);
         }
-        for (const row of rows) ul.appendChild(row);
+        tableEl.appendChild(tbody);
+        return tableEl;
       }
       function payloadText(payload) {
         if (payload === undefined) return "";
-        try {
-          return " " + JSON.stringify(payload);
-        } catch {
-          return " [unserializable payload]";
+        try { return JSON.stringify(payload); }
+        catch (e) { return "[unserializable payload]"; }
+      }
+      function renderChart(el, buckets, series) {
+        el.replaceChildren();
+        var max = 1;
+        for (var i = 0; i < buckets.length; i++) {
+          var total = 0;
+          for (var s = 0; s < series.length; s++) total += buckets[i][series[s].key] || 0;
+          if (total > max) max = total;
+        }
+        for (var i = 0; i < buckets.length; i++) {
+          var col = document.createElement("div");
+          col.className = "bar";
+          for (var s = 0; s < series.length; s++) {
+            var n = buckets[i][series[s].key] || 0;
+            if (!n) continue;
+            var seg = document.createElement("div");
+            seg.className = "seg " + series[s].cls;
+            seg.style.height = ((n / max) * 100) + "%";
+            col.appendChild(seg);
+          }
+          el.appendChild(col);
         }
       }
-      function render(events) {
-        const newest = events.slice().reverse();
-        fill(
-          "requests",
-          newest
-            .filter((e) => e.kind === "request")
-            .map((e) => line(e.at, e.method + " " + e.path + " " + e.status + " " + e.durationMs + "ms")),
-        );
-        fill(
-          "emails",
-          newest
-            .filter((e) => e.kind === "email" || e.kind === "auth_code")
-            .map((e) => {
-              if (e.kind === "auth_code") {
-                return line(e.at, e.type + "  " + e.to + "  " + e.code);
-              }
-              const extra = e.text ? "\\n" + e.text : "";
-              return line(e.at, e.to + "  " + e.subject + extra);
-            }),
-        );
-        fill(
-          "jobs",
-          newest
-            .filter((e) => e.kind === "job")
-            .map((e) => {
-              const err = e.error ? "  " + e.error : "";
-              return line(e.at, e.name + payloadText(e.payload) + err);
-            }),
+      function markNav() {
+        var page = currentPage();
+        var links = document.querySelectorAll("nav a");
+        for (var i = 0; i < links.length; i++) {
+          links[i].className = links[i].getAttribute("data-nav") === page ? "current" : "";
+        }
+        var sections = document.querySelectorAll(".page");
+        for (var i = 0; i < sections.length; i++) {
+          sections[i].className = sections[i].id === "page-" + page ? "page visible" : "page";
+        }
+      }
+      function setApisTab(tab) {
+        apisTab = tab;
+        document.querySelector('[data-tab="routes"]').className = tab === "routes" ? "active" : "";
+        document.querySelector('[data-tab="calls"]').className = tab === "calls" ? "active" : "";
+        document.getElementById("apis-routes").hidden = tab !== "routes";
+        document.getElementById("apis-calls").hidden = tab !== "calls";
+      }
+      function setStorageTab(tab) {
+        storageTab = tab;
+        document.querySelector('[data-storage-tab="objects"]').className = tab === "objects" ? "active" : "";
+        document.querySelector('[data-storage-tab="activity"]').className = tab === "activity" ? "active" : "";
+        document.getElementById("storage-objects").hidden = tab !== "objects";
+        document.getElementById("storage-activity").hidden = tab !== "activity";
+      }
+      function setSocketTab(tab) {
+        socketTab = tab;
+        document.querySelector('[data-socket-tab="sockets"]').className = tab === "sockets" ? "active" : "";
+        document.querySelector('[data-socket-tab="events"]').className = tab === "events" ? "active" : "";
+        document.getElementById("sockets-defs").hidden = tab !== "sockets";
+        document.getElementById("sockets-events").hidden = tab !== "events";
+      }
+      function renderFilter(el, labelText, onClear) {
+        if (!labelText) {
+          el.hidden = true;
+          el.replaceChildren();
+          return;
+        }
+        el.hidden = false;
+        el.replaceChildren();
+        var label = document.createElement("span");
+        label.textContent = labelText;
+        var clear = document.createElement("button");
+        clear.type = "button";
+        clear.className = "clear";
+        clear.textContent = "Clear filter";
+        clear.addEventListener("click", onClear);
+        el.appendChild(label);
+        el.appendChild(clear);
+      }
+      function render(state) {
+        lastState = state;
+        markNav();
+        document.getElementById("api-count").textContent = String(state.overview.apiCount);
+        document.getElementById("job-count").textContent = String(state.overview.jobCount);
+        document.getElementById("storage-count").textContent = String(state.overview.storageObjectCount);
+        document.getElementById("socket-count").textContent = String(state.overview.socketCount);
+        document.getElementById("google-line").textContent = googleLabel(state.overview.google);
+        var links = document.getElementById("doc-links");
+        links.replaceChildren();
+        var items = [
+          { href: state.overview.links.swagger, label: "Swagger" },
+          { href: state.overview.links.scalar, label: "Scalar" },
+          { href: state.overview.links.openapi, label: "openapi.json" }
+        ];
+        for (var i = 0; i < items.length; i++) {
+          var a = document.createElement("a");
+          a.href = items[i].href;
+          a.textContent = items[i].label;
+          links.appendChild(a);
+        }
+        renderChart(document.getElementById("req-chart"), state.overview.requestHistogram, [
+          { key: "c2xx", cls: "c2xx" },
+          { key: "c4xx", cls: "c4xx" },
+          { key: "c5xx", cls: "c5xx" }
+        ]);
+        renderChart(document.getElementById("job-chart"), state.overview.jobHistogram, [
+          { key: "succeeded", cls: "ok" },
+          { key: "failed", cls: "bad" }
+        ]);
+
+        fill(document.getElementById("apis-routes"), table(
+          ["Method", "Path", "File"],
+          state.routes.map(function (route) {
+            return { cells: [route.method, route.path, route.file], route: route };
+          }),
+          function (row) {
+            callFilter = { method: row.route.method, path: row.route.path };
+            setApisTab("calls");
+            render(lastState);
+          }
+        ));
+        var filtered = state.calls;
+        if (callFilter) {
+          filtered = state.calls.filter(function (call) { return callMatches(call, callFilter); });
+        }
+        var filterEl = document.getElementById("apis-filter");
+        if (callFilter) {
+          filterEl.hidden = false;
+          filterEl.replaceChildren();
+          var label = document.createElement("span");
+          label.textContent = "Filtered to " + callFilter.method + " " + callFilter.path;
+          var clear = document.createElement("button");
+          clear.type = "button";
+          clear.className = "clear";
+          clear.textContent = "Clear filter";
+          clear.addEventListener("click", function () {
+            callFilter = null;
+            render(lastState);
+          });
+          filterEl.appendChild(label);
+          filterEl.appendChild(clear);
+        } else {
+          filterEl.hidden = true;
+          filterEl.replaceChildren();
+        }
+        fill(document.getElementById("apis-calls"), table(
+          ["Time", "Method", "Path", "Status", "Duration"],
+          filtered.map(function (call) {
+            return { cells: [timeLabel(call.at), call.method, call.path, call.status, call.durationMs + "ms"] };
+          })
+        ));
+        setApisTab(apisTab);
+
+        fill(document.getElementById("jobs-defs"), table(
+          ["Name", "Cron", "File"],
+          state.jobs.map(function (job) {
+            return { cells: [job.name, job.cron || "", job.file] };
+          })
+        ));
+        fill(document.getElementById("jobs-runs"), table(
+          ["Time", "Name", "Status", "Payload", "Error"],
+          state.jobRuns.map(function (run) {
+            var status = run.status === "succeeded"
+              ? { html: '<span class="ok-text">succeeded</span>' }
+              : { html: '<span class="bad-text">failed</span>' };
+            return { cells: [timeLabel(run.at), run.name, status, payloadText(run.payload), run.error || ""] };
+          })
+        ));
+
+        fill(document.getElementById("emails-list"), table(
+          ["Time", "To", "Subject", "Body"],
+          state.emails.map(function (email) {
+            return { cells: [timeLabel(email.at), email.to, email.subject, email.text || ""] };
+          })
+        ));
+
+        document.getElementById("auth-google").textContent = googleLabel(state.auth.google);
+        fill(document.getElementById("auth-users"), table(
+          ["Id", "Email", "Name", "Created"],
+          state.auth.users.map(function (user) {
+            return { cells: [user.id, user.email, user.name || "", user.createdAt] };
+          })
+        ));
+
+        fill(document.getElementById("storage-objects"), table(
+          ["Key", "Public", "Size", "Type", "Created", "URL"],
+          state.storage.objects.map(function (object) {
+            return { cells: [object.key, object.public ? "public" : "private", object.sizeBytes, object.contentType, object.createdAt, object.url], object: object };
+          }),
+          function (row) {
+            storageFilter = row.object.key;
+            setStorageTab("activity");
+            render(lastState);
+          }
+        ));
+        var storageEvents = state.storage.activity;
+        if (storageFilter) {
+          storageEvents = state.storage.activity.filter(function (event) {
+            return storageActivityMatches(event, storageFilter);
+          });
+        }
+        renderFilter(
+          document.getElementById("storage-filter"),
+          storageFilter ? "Filtered to " + storageFilter : null,
+          function () {
+            storageFilter = null;
+            render(lastState);
+          }
         );
-        fill(
-          "logs",
-          newest.filter((e) => e.kind === "log").map((e) => line(e.at, e.message)),
+        fill(document.getElementById("storage-activity"), table(
+          ["Time", "Op", "Key", "Status"],
+          storageEvents.map(function (event) {
+            var status = event.ok
+              ? { html: '<span class="ok-text">ok</span>' }
+              : { html: '<span class="bad-text">' + (event.error || "error") + "</span>" };
+            return { cells: [timeLabel(event.at), event.op, event.key, status] };
+          })
+        ));
+        setStorageTab(storageTab);
+
+        document.getElementById("sockets-connected").textContent = String(state.sockets.connected) + " connected";
+        fill(document.getElementById("sockets-defs"), table(
+          ["Path", "File", "Auth"],
+          state.sockets.defs.map(function (socket) {
+            return { cells: [socket.path, socket.file, socket.auth], socket: socket };
+          }),
+          function (row) {
+            socketFilter = { path: row.socket.path, name: row.socket.name };
+            setSocketTab("events");
+            render(lastState);
+          }
+        ));
+        var socketEvents = state.sockets.events;
+        if (socketFilter) {
+          socketEvents = state.sockets.events.filter(function (event) {
+            return socketEventMatches(event, socketFilter);
+          });
+        }
+        renderFilter(
+          document.getElementById("sockets-filter"),
+          socketFilter ? "Filtered to " + socketFilter.path : null,
+          function () {
+            socketFilter = null;
+            render(lastState);
+          }
         );
+        fill(document.getElementById("sockets-events"), table(
+          ["Time", "Kind", "Path / name", "User", "Detail", "Preview"],
+          socketEvents.map(function (event) {
+            var detail = event.error
+              ? { html: '<span class="bad-text">' + event.error + "</span>" }
+              : [event.code, event.reason].filter(function (part) { return part !== undefined && part !== ""; }).join(" ");
+            return {
+              cells: [
+                timeLabel(event.at),
+                event.socketKind,
+                event.path || event.name || "",
+                event.userId || "",
+                detail,
+                event.preview || ""
+              ]
+            };
+          })
+        ));
+        setSocketTab(socketTab);
       }
+      document.querySelector('[data-tab="routes"]').addEventListener("click", function () {
+        setApisTab("routes");
+      });
+      document.querySelector('[data-tab="calls"]').addEventListener("click", function () {
+        callFilter = null;
+        setApisTab("calls");
+        if (lastState) render(lastState);
+      });
+      document.querySelector('[data-storage-tab="objects"]').addEventListener("click", function () {
+        setStorageTab("objects");
+      });
+      document.querySelector('[data-storage-tab="activity"]').addEventListener("click", function () {
+        storageFilter = null;
+        setStorageTab("activity");
+        if (lastState) render(lastState);
+      });
+      document.querySelector('[data-socket-tab="sockets"]').addEventListener("click", function () {
+        setSocketTab("sockets");
+      });
+      document.querySelector('[data-socket-tab="events"]').addEventListener("click", function () {
+        socketFilter = null;
+        setSocketTab("events");
+        if (lastState) render(lastState);
+      });
       async function poll() {
         try {
-          const events = await fetch("/_robodev/logs.json").then((r) => r.json());
-          render(events);
-        } catch {
-          /* keep last render */
-        }
+          var state = await fetch("/_robodev/state.json").then(function (r) { return r.json(); });
+          render(state);
+        } catch (e) { /* keep last render */ }
       }
+      markNav();
+      setApisTab("routes");
+      setStorageTab("objects");
+      setSocketTab("sockets");
       poll();
       setInterval(poll, 1000);
     </script>