@omg-dev/admin 0.4.27 → 0.4.28

package/dist/{react-COCR3YSL.mjs → react-BNHn5Pe0.mjs}

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/styles.ts
 const STYLE_ID = "vibes-admin-styles";
@@ -20,6 +20,7 @@ const CSS = `
   --vadm-accent-fg: var(--primary-foreground, #ffffff);
   --vadm-card: var(--card, #fafafa);
   --vadm-danger: #dc2626;
+  --vadm-warn: color-mix(in srgb, #f59e0b 72%, var(--vadm-fg));
   color: var(--vadm-fg);
   font-family: inherit;
   font-size: 14px;
@@ -160,6 +161,240 @@ button.vadm-user-row { cursor: pointer; }
   animation: vadmPulse 1.4s ease-in-out infinite;
 }
 .vadm-skel-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
+/* ── routing flow graph ───────────────────────────────────────────────────
+   Port of the docs site's <Flow> (apps/docs/app/components/flow.tsx) onto
+   --vadm-* tokens: hairline connector, 12px SVG chevron, pill edge label,
+   rounded card node with muted sub + accent ring. Horizontal by default so a
+   100-trace log stays scannable; the 760px breakpoint below collapses it to
+   the docs' vertical trunk. No per-trace canvas — the row border is the
+   canvas — and rows are left-aligned so decision nodes column-align. */
+.vadm-brain-trace { position: relative; background: var(--vadm-bg); padding: 13px 16px 12px; }
+.vadm-brain-trace[data-failed="true"] { border-color: color-mix(in srgb, var(--vadm-danger) 55%, var(--vadm-border)); }
+.vadm-flow-time {
+  position: absolute; top: 12px; right: 14px;
+  color: var(--vadm-muted); font-size: 11px; white-space: nowrap;
+}
+.vadm-flow { display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding-right: 76px; }
+
+.vadm-flow-node {
+  flex: 0 1 auto; min-width: 118px; max-width: 260px; min-height: 0;
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  border: 1px solid var(--vadm-border); border-radius: 12px;
+  background: var(--vadm-card); padding: 7px 12px;
+  text-decoration: none; color: inherit;
+}
+.vadm-flow-node--bare {
+  flex: 0 1 260px; min-width: 0; align-items: flex-start; text-align: left;
+  border-color: transparent; background: none; padding: 7px 10px 7px 0;
+}
+.vadm-flow-node--accent {
+  border-color: var(--vadm-accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vadm-accent) 25%, transparent);
+}
+.vadm-flow-node--accent .vadm-flow-label { color: var(--vadm-accent); }
+/* Amber is mixed toward the host's foreground so it stays legible whether the
+   host theme is light or dark (the panel can be dark while the OS is light). */
+.vadm-flow-node--changed {
+  border-color: color-mix(in srgb, var(--vadm-warn) 60%, var(--vadm-border));
+  background: color-mix(in srgb, #f59e0b 9%, var(--vadm-card));
+}
+.vadm-flow-node--changed .vadm-flow-sub { color: var(--vadm-warn); }
+.vadm-flow-node--danger {
+  border-color: var(--vadm-danger);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vadm-danger) 22%, transparent);
+}
+.vadm-flow-node--danger .vadm-flow-label { color: var(--vadm-danger); }
+a.vadm-flow-node:hover { border-color: var(--vadm-accent); }
+
+.vadm-flow-label {
+  display: block; max-width: 100%; font-size: 13px; font-weight: 500; line-height: 1.35;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.vadm-flow-label[data-mono="true"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.vadm-flow-pre { color: var(--vadm-muted); font-weight: 400; }
+.vadm-flow-out { color: var(--vadm-muted); font-size: 10px; margin-left: 4px; }
+.vadm-flow-quote::before { content: "\\201C"; }
+.vadm-flow-quote::after { content: "\\201D"; }
+.vadm-flow-sub {
+  display: block; max-width: 100%; margin-top: 2px;
+  font-size: 11px; line-height: 1.35; color: var(--vadm-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.vadm-flow-edge {
+  position: relative; flex: none; align-self: center;
+  display: flex; align-items: center; justify-content: flex-end;
+  width: 68px; height: 12px; color: var(--vadm-muted);
+}
+.vadm-flow-edge::before {
+  content: ""; position: absolute; left: 0; right: 0; top: 50%;
+  border-top: 1px solid var(--vadm-border);
+}
+.vadm-flow-edge[data-danger="true"] { color: var(--vadm-danger); }
+.vadm-flow-edge[data-danger="true"]::before { border-top-style: dashed; border-top-color: var(--vadm-danger); }
+.vadm-flow-edge[data-running="true"]::before { animation: vadmPulse 1.4s ease-in-out infinite; }
+.vadm-flow-arrow { position: relative; flex: none; margin-right: -2px; transform: rotate(-90deg); }
+.vadm-flow-pill {
+  position: absolute; left: 50%; bottom: calc(50% + 5px); transform: translateX(-50%);
+  white-space: nowrap; font-size: 10px; font-weight: 500; line-height: 16px;
+  padding: 0 6px; border-radius: 999px;
+  border: 1px solid var(--vadm-border); background: var(--vadm-card); color: var(--vadm-muted);
+}
+
+/* ── message-list-first view ───────────────────────────────────────────────
+   The Chat Brain panel leads with a scannable list of inbound iMessages;
+   tapping a row unveils the routing flow graph (TraceRouting) inline. */
+.vadm-filter-pill {
+  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
+  padding: 6px 6px 6px 12px; border: 1px solid var(--vadm-border); border-radius: 999px;
+  background: color-mix(in srgb, var(--vadm-accent) 7%, var(--vadm-bg)); font-size: 13px;
+  width: fit-content; max-width: 100%;
+}
+.vadm-filter-pill strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vadm-userchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
+.vadm-userchip {
+  appearance: none; cursor: pointer; font: inherit; font-size: 12px;
+  display: inline-flex; align-items: center; gap: 6px;
+  border: 1px solid var(--vadm-border); border-radius: 999px;
+  background: var(--vadm-bg); color: var(--vadm-fg); padding: 3px 6px 3px 10px;
+}
+.vadm-userchip:hover { border-color: var(--vadm-accent); }
+.vadm-userchip-count {
+  min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
+  font-size: 11px; font-weight: 600; color: var(--vadm-muted);
+  background: color-mix(in srgb, var(--vadm-muted) 15%, transparent);
+}
+
+/* Conversation (user view): a self-contained, scrollable chat pane. Oldest at
+   the top, newest at the bottom; "Load older" prepends above. iMessage-style
+   bubbles — their inbound messages (left) + our replies (right). A bubble with
+   a routing trace is tappable and reveals TraceRouting full-width below it.
+   Every color reads from the shared --vadm-* design tokens so the pane stays
+   consistent with the rest of the admin console in both light and dark. */
+.vadm-conv {
+  display: flex; flex-direction: column; gap: 4px; min-width: 0;
+  max-height: min(64vh, 640px); overflow-y: auto; overscroll-behavior: contain;
+  padding: 12px; border: 1px solid var(--vadm-border); border-radius: 12px;
+  background: color-mix(in srgb, var(--vadm-muted) 5%, var(--vadm-bg));
+}
+.vadm-conv-more {
+  position: sticky; top: -12px; z-index: 1;
+  display: flex; justify-content: center; padding: 4px 0 8px;
+  margin: -12px -12px 4px; /* bleed to pane edges so the blur covers full width */
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--vadm-muted) 5%, var(--vadm-bg)) 60%,
+    transparent
+  );
+}
+.vadm-bubble-row { display: flex; flex-direction: column; min-width: 0; }
+.vadm-bubble-row--in { align-items: flex-start; }
+.vadm-bubble-row--out { align-items: flex-end; }
+.vadm-bubble {
+  appearance: none; font: inherit; text-align: left; cursor: default;
+  max-width: 82%; min-width: 0; border-radius: 16px; padding: 8px 12px;
+  border: 1px solid transparent; display: flex; flex-direction: column; gap: 3px;
+}
+.vadm-bubble[data-dir="in"] {
+  background: var(--vadm-card); border-color: var(--vadm-border);
+  color: var(--vadm-fg); border-bottom-left-radius: 5px;
+}
+.vadm-bubble[data-dir="out"] {
+  background: var(--vadm-accent); color: var(--vadm-accent-fg);
+  border-bottom-right-radius: 5px;
+}
+.vadm-bubble[data-has-trace] { cursor: pointer; }
+.vadm-bubble[data-has-trace]:hover { filter: brightness(0.97); }
+.vadm-bubble[data-open] {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vadm-accent) 60%, transparent);
+}
+.vadm-bubble-text { font-size: 14px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
+.vadm-bubble-media { display: flex; flex-wrap: wrap; gap: 6px; }
+.vadm-bubble-att {
+  display: block; max-width: 220px; max-height: 260px; width: auto; height: auto;
+  border-radius: 10px; object-fit: cover; background: rgba(0,0,0,0.2);
+}
+.vadm-bubble-meta {
+  display: flex; align-items: center; gap: 5px; font-size: 11px;
+  color: var(--vadm-muted);
+}
+.vadm-bubble[data-dir="out"] .vadm-bubble-meta {
+  color: color-mix(in srgb, var(--vadm-accent-fg) 80%, var(--vadm-accent));
+}
+.vadm-bubble-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vadm-muted); }
+.vadm-bubble-dot[data-outcome="completed"] { background: color-mix(in srgb, #16a34a 78%, var(--vadm-fg)); }
+.vadm-bubble-dot[data-outcome="failed"] { background: var(--vadm-danger); }
+.vadm-bubble-dot[data-outcome="running"] {
+  background: var(--vadm-accent-fg); animation: vadmPulse 1.4s ease-in-out infinite;
+}
+.vadm-bubble-detail {
+  align-self: stretch; margin: 4px 0 8px;
+  border: 1px solid color-mix(in srgb, var(--vadm-accent) 40%, var(--vadm-border));
+  border-radius: 10px; background: var(--vadm-bg); padding: 12px 14px;
+}
+
+.vadm-msg-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.vadm-msg {
+  border: 1px solid var(--vadm-border); border-radius: 10px;
+  background: var(--vadm-bg); overflow: hidden;
+}
+.vadm-msg[data-open="true"] {
+  border-color: color-mix(in srgb, var(--vadm-accent) 45%, var(--vadm-border));
+  background: var(--vadm-card);
+}
+.vadm-msg[data-failed="true"] { border-color: color-mix(in srgb, var(--vadm-danger) 45%, var(--vadm-border)); }
+.vadm-msg-row {
+  appearance: none; width: 100%; border: none; background: none; cursor: pointer;
+  color: inherit; font: inherit; text-align: left;
+  display: flex; align-items: center; gap: 11px; padding: 11px 13px; min-width: 0;
+}
+.vadm-msg-row:hover { background: color-mix(in srgb, var(--vadm-muted) 6%, transparent); }
+.vadm-msg-dot {
+  flex: none; width: 9px; height: 9px; border-radius: 50%;
+  background: var(--vadm-muted);
+}
+.vadm-msg-dot[data-outcome="completed"] { background: color-mix(in srgb, #16a34a 78%, var(--vadm-fg)); }
+.vadm-msg-dot[data-outcome="failed"] { background: var(--vadm-danger); }
+.vadm-msg-dot[data-outcome="running"] {
+  background: var(--vadm-accent); animation: vadmPulse 1.4s ease-in-out infinite;
+}
+.vadm-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.vadm-msg-text {
+  font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.vadm-msg-meta {
+  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+  color: var(--vadm-muted); font-size: 12px; min-width: 0;
+}
+.vadm-msg-decision {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
+  color: var(--vadm-fg);
+}
+.vadm-msg-decision[data-variant="accent"] { color: var(--vadm-accent); }
+.vadm-msg-decision[data-variant="danger"] { color: var(--vadm-danger); }
+.vadm-msg-sender { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
+.vadm-msg-sender:hover { color: var(--vadm-fg); }
+.vadm-msg-chevron {
+  flex: none; width: 8px; height: 8px; margin-right: 3px;
+  border-right: 1.5px solid var(--vadm-muted); border-bottom: 1.5px solid var(--vadm-muted);
+  transform: rotate(-45deg); transition: transform 0.15s;
+}
+.vadm-msg[data-open="true"] .vadm-msg-chevron { transform: rotate(45deg); }
+.vadm-msg-detail { padding: 4px 14px 14px; border-top: 1px dashed var(--vadm-border); }
+
+.vadm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
+
+.vadm-flow-error { margin: 10px 0 0; font-size: 12px; }
+.vadm-flow-more { margin-top: 2px; }
+.vadm-flow-more > summary {
+  list-style: none; cursor: pointer; text-align: right;
+  color: var(--vadm-muted); font-size: 12px; line-height: 1.2;
+}
+.vadm-flow-more > summary::-webkit-details-marker { display: none; }
+.vadm-flow-more > summary::after { content: "\\2026"; letter-spacing: 1px; }
+.vadm-flow-more[open] > summary::after { content: "\\2212"; }
+.vadm-flow-more > summary:hover { color: var(--vadm-fg); }
+.vadm-flow-more .vadm-kv { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--vadm-border); }
 @keyframes vadmPulse {
   0%, 100% { opacity: 0.55; }
   50% { opacity: 1; }
@@ -178,6 +413,23 @@ button.vadm-user-row { cursor: pointer; }
   .vadm-user-stats { flex-direction: row; align-items: center; gap: 8px; width: 100%; padding-left: 48px; margin-top: -4px; }
   .vadm-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
   .vadm-detail.vadm-card { width: 100% !important; max-width: 100%; }
+  /* Below the fold the graph becomes the docs' vertical trunk verbatim:
+     full-width nodes stacked, hairline + chevron between, pill beside it. */
+  .vadm-flow { flex-direction: column; align-items: stretch; padding-right: 0; }
+  .vadm-flow-node { flex: none; width: 100%; max-width: none; align-items: center; text-align: center; }
+  .vadm-flow-node--bare { align-items: center; text-align: center; padding: 4px 0 6px; }
+  .vadm-flow-edge {
+    flex-direction: column; justify-content: flex-end; align-self: stretch;
+    width: 100%; height: 26px;
+  }
+  .vadm-flow-edge::before {
+    left: 50%; right: auto; top: 0; bottom: 0;
+    border-top: 0; border-left: 1px solid var(--vadm-border);
+  }
+  .vadm-flow-edge[data-danger="true"]::before { border-left-style: dashed; border-left-color: var(--vadm-danger); }
+  .vadm-flow-arrow { transform: none; margin: 0 0 -2px; }
+  .vadm-flow-pill { left: calc(50% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
+  .vadm-flow-time { position: static; display: block; text-align: right; margin-bottom: 4px; }
 }
 
 @media (max-width: 480px) {
@@ -190,6 +442,19 @@ button.vadm-user-row { cursor: pointer; }
 }
 `;
 //#endregion
+//#region src/safe-url.ts
+/** URLs in the admin console can originate from reports or user-controlled
+* Computers. Only ordinary web links may become clickable operator actions. */
+function safeHref(value) {
+	if (typeof value !== "string") return void 0;
+	try {
+		const url = new URL(value);
+		return url.protocol === "http:" || url.protocol === "https:" ? value : void 0;
+	} catch {
+		return;
+	}
+}
+//#endregion
 //#region src/client.ts
 var AdminError = class extends Error {
 	status;
@@ -303,6 +568,12 @@ var AdminClient = class {
 	removeReport(id) {
 		return this.rpc("bugReports", "removeReport", { id });
 	}
+	listImessageBrainRouting(args) {
+		return this.rpc("imessageDebug", "listBrainRouting", args ?? {});
+	}
+	listImessageBrainTranscript(args) {
+		return this.rpc("imessageDebug", "listBrainTranscript", args);
+	}
 };
 //#endregion
 //#region src/react.tsx
@@ -1168,15 +1439,6 @@ function fmtTime(ms) {
 		return String(ms);
 	}
 }
-function safeHref(v) {
-	if (typeof v !== "string") return void 0;
-	try {
-		const u = new URL(v);
-		return u.protocol === "http:" || u.protocol === "https:" ? v : void 0;
-	} catch {
-		return;
-	}
-}
 const STORAGE_HOSTS = ["t3.storage.dev"];
 function safeImageSrc(v) {
 	if (typeof v !== "string") return void 0;
@@ -1409,7 +1671,7 @@ function ReportsPanel({ client }) {
 									"app:",
 									" ",
 									/* @__PURE__ */ jsx("a", {
-										href: `https://omg.dev/${detail.slug}`,
+										href: `https://app.omg.dev/${detail.slug}`,
 										target: "_blank",
 										rel: "noreferrer",
 										children: detail.slug
@@ -1449,13 +1711,13 @@ function ReportsPanel({ client }) {
 						},
 						children: [/* @__PURE__ */ jsx("a", {
 							className: "vadm-btn vadm-btn-sm",
-							href: `https://omg.dev/${detail.slug}`,
+							href: `https://app.omg.dev/${detail.slug}`,
 							target: "_blank",
 							rel: "noreferrer",
 							children: "Open app"
 						}), /* @__PURE__ */ jsx("a", {
 							className: "vadm-btn vadm-btn-sm",
-							href: `https://omg.dev/${detail.slug}/inspect/data`,
+							href: `https://app.omg.dev/${detail.slug}/inspect/data`,
 							target: "_blank",
 							rel: "noreferrer",
 							children: "Inspect"
@@ -1550,7 +1812,729 @@ function ReportsPanel({ client }) {
 		})
 	] });
 }
+function shortId(value) {
+	if (!value) return "none";
+	return value.length > 16 ? `${value.slice(0, 8)}…${value.slice(-5)}` : value;
+}
+function maskedPhone(value) {
+	const tail = value.replace(/\D/g, "").slice(-4);
+	return tail ? `••• ${tail}` : "unknown";
+}
+function formatMs(ms) {
+	return ms < 1e3 ? `${ms}ms` : `${(ms / 1e3).toFixed(1)}s`;
+}
+function shortTime(at) {
+	const d = new Date(at);
+	const time = d.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	return (/* @__PURE__ */ new Date()).toDateString() === d.toDateString() ? time : `${d.toLocaleDateString([], {
+		month: "short",
+		day: "numeric"
+	})} ${time}`;
+}
+/** `computer.steer` → ["computer.", "steer"] so the namespace can be demoted. */
+function splitDecision(decision) {
+	const dot = decision.indexOf(".");
+	return dot === -1 ? ["", decision] : [decision.slice(0, dot + 1), decision.slice(dot + 1)];
+}
+/** routeVia is only ever "reply-reference" | "fallback"; never render null. */
+function routeViaLabel(via) {
+	if (!via) return null;
+	return via === "reply-reference" ? "reply-ref" : via;
+}
+function timingLine(fleetMs, llmMs, total) {
+	const parts = [
+		total != null ? `${total}ms total` : null,
+		llmMs != null ? `brain ${llmMs}ms` : null,
+		fleetMs != null ? `fleet ${fleetMs}ms` : null
+	].filter(Boolean);
+	return parts.length ? parts.join(" · ") : "—";
+}
+function FlowArrow() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "vadm-flow-arrow",
+		width: "12",
+		height: "12",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6 13l6 6 6-6",
+			stroke: "currentColor",
+			strokeWidth: "2.2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/**
+* Connector between two nodes — hairline + chevron + optional pill edge label
+* (the docs Trunk). `danger` dashes it red, `running` pulses it.
+*/
+function FlowEdge({ label, danger, running }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vadm-flow-edge",
+		"data-danger": danger ? "true" : void 0,
+		"data-running": running ? "true" : void 0,
+		children: [label ? /* @__PURE__ */ jsx("span", {
+			className: "vadm-flow-pill",
+			children: label
+		}) : null, /* @__PURE__ */ jsx(FlowArrow, {})]
+	});
+}
+function FlowNode({ variant, mono, href, children, sub }) {
+	const className = `vadm-flow-node${variant ? ` vadm-flow-node--${variant}` : ""}`;
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "vadm-flow-label",
+		"data-mono": mono ? "true" : void 0,
+		children: [children, href ? /* @__PURE__ */ jsx("span", {
+			className: "vadm-flow-out",
+			"aria-hidden": "true",
+			children: "↗"
+		}) : null]
+	}), sub ? /* @__PURE__ */ jsx("span", {
+		className: "vadm-flow-sub",
+		children: sub
+	}) : null] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: body
+	});
+}
+function BrainTraceSkeleton() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "vadm-list",
+		"aria-label": "Loading Brain routing traces",
+		children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx("div", {
+			className: "vadm-card vadm-brain-trace",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "vadm-flow",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "vadm-flow-node vadm-flow-node--bare",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "vadm-skel",
+							style: { width: `${86 - i * 8}%` }
+						})
+					}),
+					/* @__PURE__ */ jsx(FlowEdge, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-flow-node",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "vadm-skel",
+							style: { width: "70%" }
+						}), /* @__PURE__ */ jsx("span", {
+							className: "vadm-skel",
+							style: {
+								width: "88%",
+								marginTop: 7
+							}
+						})]
+					}),
+					i % 2 === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FlowEdge, {}), /* @__PURE__ */ jsx("div", {
+						className: "vadm-flow-node",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "vadm-skel",
+							style: { width: "64%" }
+						})
+					})] })
+				]
+			})
+		}, i))
+	});
+}
+const BRAIN_FETCH_LIMIT = 200;
+const BRAIN_TRANSCRIPT_PAGE = 30;
+function BrainRoutingPanel({ client }) {
+	const [traces, setTraces] = useState(null);
+	const [steps, setSteps] = useState(/* @__PURE__ */ new Map());
+	const [capture, setCapture] = useState(null);
+	const [transcript, setTranscript] = useState(null);
+	const [hasMore, setHasMore] = useState(false);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const [error, setError] = useState(null);
+	const [query, setQuery] = useState("");
+	const [hits, setHits] = useState([]);
+	const [filter, setFilter] = useState(null);
+	const [openMsgId, setOpenMsgId] = useState(null);
+	const scrollRef = useRef(null);
+	const restoreRef = useRef(null);
+	const bottomRef = useRef(false);
+	useLayoutEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		if (restoreRef.current) {
+			el.scrollTop = restoreRef.current.top + (el.scrollHeight - restoreRef.current.height);
+			restoreRef.current = null;
+		} else if (bottomRef.current) {
+			el.scrollTop = el.scrollHeight;
+			bottomRef.current = false;
+		}
+	}, [transcript]);
+	const load = useCallback(async (userId) => {
+		setTraces(null);
+		try {
+			const result = await client.listImessageBrainRouting({
+				userId,
+				limit: BRAIN_FETCH_LIMIT,
+				steps: true
+			});
+			setTraces(result.traces);
+			const grouped = /* @__PURE__ */ new Map();
+			for (const row of result.steps ?? []) {
+				const list = grouped.get(row.traceId);
+				if (list) list.push(row);
+				else grouped.set(row.traceId, [row]);
+			}
+			setSteps(grouped);
+			setCapture(result.capture);
+			setError(null);
+		} catch (e) {
+			setError(e);
+			setTraces([]);
+		}
+	}, [client]);
+	const loadTranscript = useCallback(async (userId) => {
+		setTranscript(null);
+		setHasMore(false);
+		setOpenMsgId(null);
+		try {
+			const result = await client.listImessageBrainTranscript({
+				userId,
+				limit: BRAIN_TRANSCRIPT_PAGE
+			});
+			bottomRef.current = true;
+			setTranscript(result.messages);
+			setHasMore(result.hasMore);
+		} catch (e) {
+			setError(e);
+			setTranscript([]);
+		}
+	}, [client]);
+	const loadOlder = useCallback(async () => {
+		if (!filter || loadingMore || !hasMore) return;
+		const el = scrollRef.current;
+		const oldest = transcript?.[0];
+		if (!oldest) return;
+		setLoadingMore(true);
+		try {
+			const result = await client.listImessageBrainTranscript({
+				userId: filter.id,
+				limit: BRAIN_TRANSCRIPT_PAGE,
+				before: oldest.id
+			});
+			if (el) restoreRef.current = {
+				top: el.scrollTop,
+				height: el.scrollHeight
+			};
+			setTranscript((cur) => cur ? [...result.messages, ...cur] : result.messages);
+			setHasMore(result.hasMore);
+		} catch (e) {
+			setError(e);
+		} finally {
+			setLoadingMore(false);
+		}
+	}, [
+		client,
+		filter,
+		hasMore,
+		loadingMore,
+		transcript
+	]);
+	useEffect(() => {
+		ensureStyles();
+		load();
+	}, [load]);
+	useEffect(() => {
+		if (!query.trim() || filter) {
+			setHits([]);
+			return;
+		}
+		let live = true;
+		const timer = setTimeout(async () => {
+			try {
+				const result = await client.findUsers(query.trim());
+				if (live) setHits(result);
+			} catch {
+				if (live) setHits([]);
+			}
+		}, 200);
+		return () => {
+			live = false;
+			clearTimeout(timer);
+		};
+	}, [
+		client,
+		query,
+		filter
+	]);
+	function openConversation(next) {
+		setFilter(next);
+		setQuery("");
+		setHits([]);
+		load(next.id);
+		loadTranscript(next.id);
+	}
+	function pickUser(hit) {
+		openConversation({
+			id: hit.id,
+			label: hit.name || hit.email
+		});
+	}
+	function clearFilter() {
+		setFilter(null);
+		setQuery("");
+		setTranscript(null);
+		setHasMore(false);
+		load();
+	}
+	function refresh() {
+		if (filter) {
+			load(filter.id);
+			loadTranscript(filter.id);
+		} else load();
+	}
+	const traceByMsgId = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const t of traces ?? []) if (t.inboundMessageId) m.set(t.inboundMessageId, t);
+		return m;
+	}, [traces]);
+	const traceByText = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const t of traces ?? []) m.set(t.text, t);
+		return m;
+	}, [traces]);
+	function traceForMessage(msg) {
+		if (msg.direction !== "in") return null;
+		return (msg.providerMessageId ? traceByMsgId.get(msg.providerMessageId) : void 0) ?? traceByText.get(msg.text) ?? null;
+	}
+	const senders = useMemo(() => {
+		if (!traces) return [];
+		const m = /* @__PURE__ */ new Map();
+		for (const t of traces) {
+			const e = m.get(t.userId);
+			if (e) e.count++;
+			else m.set(t.userId, {
+				userId: t.userId,
+				phone: t.phone,
+				count: 1
+			});
+		}
+		return [...m.values()].sort((a, b) => b.count - a.count);
+	}, [traces]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "vadm-spread vadm-panel-head",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "vadm-h",
+				children: "Chat Brain conversations"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "vadm-sub",
+				style: { margin: 0 },
+				children: filter ? "Their messages and our replies — tap any message to reveal the backend routing behind it." : "Pick a conversation to see the full thread and the routing behind each message."
+			})] }), /* @__PURE__ */ jsx("button", {
+				className: "vadm-btn vadm-btn-sm",
+				onClick: refresh,
+				children: "Refresh"
+			})]
+		}),
+		filter ? /* @__PURE__ */ jsxs("div", {
+			className: "vadm-filter-pill",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "vadm-muted",
+					children: "Conversation with"
+				}),
+				/* @__PURE__ */ jsx("strong", { children: filter.label }),
+				/* @__PURE__ */ jsx("button", {
+					className: "vadm-btn vadm-btn-sm",
+					onClick: clearFilter,
+					children: "← All"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "vadm-search",
+			style: {
+				position: "relative",
+				marginBottom: 12
+			},
+			children: [/* @__PURE__ */ jsx("input", {
+				className: "vadm-input",
+				placeholder: "Find by account email…",
+				value: query,
+				onChange: (e) => setQuery(e.target.value)
+			}), hits.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "vadm-card",
+				style: {
+					position: "absolute",
+					zIndex: 5,
+					top: 38,
+					left: 0,
+					right: 0,
+					padding: 4
+				},
+				children: hits.map((hit) => /* @__PURE__ */ jsxs("button", {
+					className: "vadm-user-row",
+					onClick: () => pickUser(hit),
+					children: [/* @__PURE__ */ jsx(UserAvatar, { user: hit }), /* @__PURE__ */ jsxs("span", {
+						className: "vadm-grow",
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								display: "block",
+								fontWeight: 600
+							},
+							children: hit.name || hit.email
+						}), /* @__PURE__ */ jsx("span", {
+							className: "vadm-muted",
+							style: { fontSize: 12 },
+							children: hit.email
+						})]
+					})]
+				}, hit.id))
+			})]
+		}), senders.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "vadm-userchips",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "vadm-muted",
+				style: { fontSize: 12 },
+				children: "Recent:"
+			}), senders.slice(0, 8).map((s) => /* @__PURE__ */ jsxs("button", {
+				className: "vadm-userchip",
+				onClick: () => openConversation({
+					id: s.userId,
+					label: maskedPhone(s.phone)
+				}),
+				children: [maskedPhone(s.phone), /* @__PURE__ */ jsx("span", {
+					className: "vadm-userchip-count",
+					children: s.count
+				})]
+			}, s.userId))]
+		})] }),
+		/* @__PURE__ */ jsx(ErrorBanner, { error }),
+		filter ? transcript === null ? /* @__PURE__ */ jsx(BrainTraceSkeleton, {}) : transcript.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "vadm-empty",
+			children: [/* @__PURE__ */ jsx("strong", {
+				style: {
+					display: "block",
+					color: "var(--foreground)",
+					marginBottom: 5
+				},
+				children: "No messages yet"
+			}), "This account has no iMessage history with the line."]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "vadm-conv",
+			ref: scrollRef,
+			children: [hasMore && /* @__PURE__ */ jsx("div", {
+				className: "vadm-conv-more",
+				children: /* @__PURE__ */ jsx("button", {
+					className: "vadm-btn vadm-btn-sm",
+					onClick: loadOlder,
+					disabled: loadingMore,
+					children: loadingMore ? "Loading…" : "Load older messages"
+				})
+			}), transcript.map((msg) => {
+				const inbound = msg.direction === "in";
+				const trace = traceForMessage(msg);
+				const open = openMsgId === msg.id;
+				return /* @__PURE__ */ jsxs("div", {
+					className: `vadm-bubble-row vadm-bubble-row--${inbound ? "in" : "out"}`,
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "vadm-bubble",
+						"data-dir": inbound ? "in" : "out",
+						"data-open": open ? "true" : void 0,
+						"data-has-trace": trace ? "true" : void 0,
+						"aria-expanded": trace ? open : void 0,
+						onClick: trace ? () => setOpenMsgId(open ? null : msg.id) : void 0,
+						children: [
+							msg.media && msg.media.length > 0 && /* @__PURE__ */ jsx("span", {
+								className: "vadm-bubble-media",
+								children: msg.media.map((url) => /\.(mp4|mov|webm)(?:$|\?)/i.test(url) ? /* @__PURE__ */ jsx("video", {
+									className: "vadm-bubble-att",
+									src: url,
+									controls: true,
+									preload: "metadata"
+								}, url) : /* @__PURE__ */ jsx("img", {
+									className: "vadm-bubble-att",
+									src: url,
+									alt: "attachment",
+									loading: "lazy"
+								}, url))
+							}),
+							msg.text && /* @__PURE__ */ jsx("span", {
+								className: "vadm-bubble-text",
+								children: msg.text
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "vadm-bubble-meta",
+								children: [
+									/* @__PURE__ */ jsx("span", { children: inbound ? "them" : "us" }),
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										children: "·"
+									}),
+									/* @__PURE__ */ jsx("time", {
+										dateTime: new Date(msg.at).toISOString(),
+										children: shortTime(msg.at)
+									}),
+									trace && /* @__PURE__ */ jsx("span", {
+										className: "vadm-bubble-dot",
+										"data-outcome": trace.outcome,
+										"aria-hidden": "true"
+									})
+								]
+							})
+						]
+					}), open && trace && /* @__PURE__ */ jsx("div", {
+						className: "vadm-bubble-detail",
+						children: /* @__PURE__ */ jsx(TraceRouting, {
+							trace,
+							steps: steps.get(trace.id) ?? []
+						})
+					})]
+				}, msg.id);
+			})]
+		}) : traces === null ? /* @__PURE__ */ jsx(BrainTraceSkeleton, {}) : senders.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "vadm-empty",
+			children: [
+				/* @__PURE__ */ jsx("strong", {
+					style: {
+						display: "block",
+						color: "var(--foreground)",
+						marginBottom: 5
+					},
+					children: "No conversations yet"
+				}),
+				"No inbound iMessage has arrived since capture started. Send the line a message, then refresh.",
+				capture?.gatewayStartedAt && /* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "block",
+						marginTop: 7,
+						fontSize: 12
+					},
+					children: ["Gateway online since ", new Date(capture.gatewayStartedAt).toLocaleString()]
+				})
+			]
+		}) : null
+	] });
+}
+/** The routing story for one message: the flow graph + error + detail grid.
+*  Rendered inline when a message row is expanded. */
+/** Kind → label + accent. Rules read as ✓/· in their own name (set by the
+* gateway), so the badge only needs to name the category. */
+const STEP_KIND_LABEL = {
+	rule: "rule",
+	context: "context",
+	prompt: "prompt",
+	"llm-text": "model",
+	"tool-call": "tool →",
+	"tool-result": "← result",
+	effect: "effect"
+};
+/**
+* The turn, step by step: which deterministic rules were evaluated (and which
+* declined), the prompt blocks the model was given, every tool call with its
+* arguments, every result, and the effects committed.
+*
+* This is the panel's answer to the operator complaint that motivated it —
+* "we don't actually see the actual routing logic … what tool calling is
+* happening behind the scene" (2026-07-25). Before this, the only thing
+* recorded about a model turn was its duration.
+*
+* Long payloads (a prompt snapshot is thousands of chars) collapse to a
+* summary line and expand on click, so the common case stays scannable.
+*/
+function TraceSteps({ steps }) {
+	const [openSeq, setOpenSeq] = useState(null);
+	if (!steps.length) return null;
+	const t0 = steps[0].at;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			marginTop: 12,
+			paddingTop: 10,
+			borderTop: "1px dashed var(--vadm-border)"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				fontSize: 11,
+				opacity: .6,
+				marginBottom: 6
+			},
+			children: [
+				steps.length,
+				" step",
+				steps.length === 1 ? "" : "s",
+				" — tap one to see its payload"
+			]
+		}), steps.map((step) => {
+			const open = openSeq === step.seq;
+			const detail = step.detail ?? "";
+			const inline = step.kind === "rule" || detail.length <= 120;
+			const firstLine = detail.split("\n")[0] ?? "";
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					borderTop: "1px solid var(--vadm-border)",
+					padding: "5px 0"
+				},
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setOpenSeq(open ? null : step.seq),
+					style: {
+						display: "flex",
+						gap: 8,
+						alignItems: "baseline",
+						width: "100%",
+						background: "none",
+						border: "none",
+						padding: 0,
+						textAlign: "left",
+						cursor: detail ? "pointer" : "default",
+						color: "inherit",
+						font: "inherit"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("code", {
+							style: {
+								fontSize: 10,
+								opacity: .5,
+								minWidth: 44
+							},
+							children: ["+", formatMs(step.at - t0)]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: 10,
+								opacity: .6,
+								minWidth: 58
+							},
+							children: STEP_KIND_LABEL[step.kind]
+						}),
+						/* @__PURE__ */ jsx("strong", {
+							style: { fontSize: 12 },
+							children: step.name ?? ""
+						}),
+						step.durationMs != null && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: 10,
+								opacity: .5
+							},
+							children: formatMs(step.durationMs)
+						}),
+						!open && !inline && firstLine && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: 11,
+								opacity: .55,
+								overflow: "hidden",
+								whiteSpace: "nowrap",
+								textOverflow: "ellipsis"
+							},
+							children: firstLine
+						})
+					]
+				}), (open || inline) && detail && /* @__PURE__ */ jsx("pre", {
+					style: {
+						margin: "4px 0 0 52px",
+						fontSize: 11,
+						whiteSpace: "pre-wrap",
+						wordBreak: "break-word",
+						opacity: .8,
+						maxHeight: open ? 420 : void 0,
+						overflow: open ? "auto" : void 0
+					},
+					children: detail
+				})]
+			}, step.seq);
+		})]
+	});
+}
+function TraceRouting({ trace, steps }) {
+	const failed = trace.outcome === "failed";
+	const running = trace.outcome === "running";
+	const sessionChanged = trace.activeSessionBefore !== trace.activeSessionAfter;
+	const duration = trace.completedAt ? trace.completedAt - trace.createdAt : null;
+	const targetHref = safeHref(trace.targetSessionUrl);
+	const routed = trace.targetSessionId != null;
+	const [decisionPrefix, decisionVerb] = splitDecision(trace.decision);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "vadm-flow",
+			children: [
+				/* @__PURE__ */ jsx(FlowNode, {
+					variant: "bare",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "vadm-flow-quote",
+						children: trace.text
+					})
+				}),
+				/* @__PURE__ */ jsx(FlowEdge, { label: routeViaLabel(trace.routeVia) }),
+				/* @__PURE__ */ jsxs(FlowNode, {
+					variant: failed ? "danger" : trace.decision.startsWith("computer.") ? "accent" : void 0,
+					sub: trace.reason ? /* @__PURE__ */ jsx("span", {
+						title: trace.reason,
+						children: trace.reason
+					}) : null,
+					children: [decisionPrefix && /* @__PURE__ */ jsx("span", {
+						className: "vadm-flow-pre",
+						children: decisionPrefix
+					}), decisionVerb]
+				}),
+				routed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FlowEdge, {
+					label: running ? null : duration != null ? formatMs(duration) : null,
+					danger: failed,
+					running
+				}), /* @__PURE__ */ jsx(FlowNode, {
+					variant: sessionChanged ? "changed" : void 0,
+					mono: true,
+					href: targetHref ?? void 0,
+					sub: sessionChanged ? `was ${shortId(trace.activeSessionBefore)}` : null,
+					children: shortId(trace.targetSessionId)
+				})] })
+			]
+		}),
+		trace.error && /* @__PURE__ */ jsx("div", {
+			className: "vadm-err vadm-flow-error",
+			children: trace.error
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "vadm-kv",
+			style: {
+				marginTop: 12,
+				paddingTop: 10,
+				borderTop: "1px dashed var(--vadm-border)"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Generation" }), /* @__PURE__ */ jsx("strong", { children: trace.generation })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "From" }), /* @__PURE__ */ jsx("strong", { children: maskedPhone(trace.phone) })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Reply to" }), /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("code", { children: shortId(trace.replyToMessageId) }) })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Timing" }), /* @__PURE__ */ jsx("strong", { children: timingLine(trace.fleetMs, trace.llmMs, duration) })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Session" }), /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsxs("code", { children: [
+					shortId(trace.activeSessionBefore),
+					" → ",
+					shortId(trace.activeSessionAfter)
+				] }) })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Message" }), /* @__PURE__ */ jsx("strong", { children: trace.text })] }),
+				trace.reason && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Reason" }), /* @__PURE__ */ jsx("strong", { children: trace.reason })] })
+			]
+		}),
+		/* @__PURE__ */ jsx(TraceSteps, { steps })
+	] });
+}
 const DEFAULT_PANELS = [
+	{
+		id: "brain",
+		label: "Chat Brain",
+		render: (c) => /* @__PURE__ */ jsx(BrainRoutingPanel, { client: c })
+	},
 	{
 		id: "flags",
 		label: "Flags",
@@ -1600,4 +2584,4 @@ function AdminConsole({ client, config, panels = DEFAULT_PANELS }) {
 	});
 }
 //#endregion
-export { UsersPanel as a, STYLE_ID as c, ReportsPanel as i, ensureStyles as l, FlagsPanel as n, AdminClient as o, PricingPanel as r, AdminError as s, AdminConsole as t };
+export { ReportsPanel as a, AdminError as c, PricingPanel as i, STYLE_ID as l, BrainRoutingPanel as n, UsersPanel as o, FlagsPanel as r, AdminClient as s, AdminConsole as t, ensureStyles as u };