@omg-dev/admin 0.4.26 → 0.4.28

package/src/react.tsx

@@ -9,8 +9,9 @@
 // The console is admin-gated SERVER-side (every endpoint calls requireAdmin),
 // so a non-admin who somehow renders it just sees errors, never data.
 
-import { useCallback, useEffect, useMemo, useState, type FormEvent, type ReactElement } from "react"
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type FormEvent, type ReactElement, type ReactNode } from "react"
 import { ensureStyles } from "./styles"
+import { safeHref } from "./safe-url"
 import {
   AdminClient,
   type AdminClientConfig,
@@ -21,6 +22,10 @@ import {
   type UserHit,
   type AdminUser,
   type UserBalance,
+  type ImessageBrainCapture,
+  type ImessageBrainTrace,
+  type ImessageBrainTraceStep,
+  type ImessageBrainMessage,
   type BugReportSummary,
   type BugReportDetail,
   type BugStatus,
@@ -638,20 +643,6 @@ function fmtTime(ms: number): string {
   }
 }
 
-// Bug-report URLs (pageUrl, screenshotUrl) are UNTRUSTED visitor input. Only let
-// http(s) reach an href/src — a stored "javascript:" / "data:" URL would be XSS
-// against the admin who clicks it. Returns undefined for anything else, so we
-// render plain text instead of a live link.
-function safeHref(v: unknown): string | undefined {
-  if (typeof v !== "string") return undefined
-  try {
-    const u = new URL(v)
-    return u.protocol === "http:" || u.protocol === "https:" ? v : undefined
-  } catch {
-    return undefined
-  }
-}
-
 // Screenshots come from a report (untrusted). An <img src> to an arbitrary host
 // is a tracking pixel / IP-leak / cookie beacon against the admin. Only render
 // images served from our storage CDN; otherwise show nothing (the report still
@@ -841,7 +832,7 @@ export function ReportsPanel({ client }: { client: AdminClient }) {
                 {detail.slug ? (
                   <div>
                     app:{" "}
-                    <a href={`https://omg.dev/${detail.slug}`} target="_blank" rel="noreferrer">{detail.slug}</a>
+                    <a href={`https://app.omg.dev/${detail.slug}`} target="_blank" rel="noreferrer">{detail.slug}</a>
                     {detail.version != null ? ` · v${detail.version}` : ""}
                   </div>
                 ) : (
@@ -864,10 +855,10 @@ export function ReportsPanel({ client }: { client: AdminClient }) {
 
             {detail.slug && (
               <div className="vadm-row" style={{ gap: 6, marginBottom: 8 }}>
-                <a className="vadm-btn vadm-btn-sm" href={`https://omg.dev/${detail.slug}`} target="_blank" rel="noreferrer">
+                <a className="vadm-btn vadm-btn-sm" href={`https://app.omg.dev/${detail.slug}`} target="_blank" rel="noreferrer">
                   Open app
                 </a>
-                <a className="vadm-btn vadm-btn-sm" href={`https://omg.dev/${detail.slug}/inspect/data`} target="_blank" rel="noreferrer">
+                <a className="vadm-btn vadm-btn-sm" href={`https://app.omg.dev/${detail.slug}/inspect/data`} target="_blank" rel="noreferrer">
                   Inspect
                 </a>
               </div>
@@ -934,6 +925,654 @@ export function ReportsPanel({ client }: { client: AdminClient }) {
   )
 }
 
+// ── iMessage Brain routing panel ────────────────────────────────────────────
+
+function shortId(value: string | null): string {
+  if (!value) return "none"
+  return value.length > 16 ? `${value.slice(0, 8)}…${value.slice(-5)}` : value
+}
+
+function maskedPhone(value: string): string {
+  const tail = value.replace(/\D/g, "").slice(-4)
+  return tail ? `••• ${tail}` : "unknown"
+}
+
+function formatMs(ms: number): string {
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`
+}
+
+function shortTime(at: number): string {
+  const d = new Date(at)
+  const time = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+  const sameDay = new Date().toDateString() === d.toDateString()
+  return sameDay ? time : `${d.toLocaleDateString([], { month: "short", day: "numeric" })} ${time}`
+}
+
+/** `computer.steer` → ["computer.", "steer"] so the namespace can be demoted. */
+function splitDecision(decision: string): [string, string] {
+  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: string | null): string | null {
+  if (!via) return null
+  return via === "reply-reference" ? "reply-ref" : via
+}
+
+function timingLine(fleetMs: number | null, llmMs: number | null, total: number | null): string {
+  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(" · ") : "—"
+}
+
+// ── flow primitives ──────────────────────────────────────────────────────────
+// Ported (not imported) from the docs site's <Flow> (apps/docs/app/components/
+// flow.tsx): same Cloudflare-dashboard visual language — hairline connectors,
+// SVG chevron, pill edge labels — expressed in `vadm-*` CSS because this
+// package ships its own stylesheet and Tailwind never sees node_modules.
+// Horizontal on wide viewports, collapsing to the docs' vertical trunk under
+// 760px (a 100-row vertical-only list would be unusably tall).
+
+// The chevron is the docs component's exact glyph, kept as inline SVG so it has
+// no dependency and themes off currentColor; CSS rotates it per orientation.
+function FlowArrow() {
+  return (
+    <svg className="vadm-flow-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path d="M6 13l6 6 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/**
+ * 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,
+}: {
+  label?: string | null
+  danger?: boolean
+  running?: boolean
+}) {
+  return (
+    <div
+      className="vadm-flow-edge"
+      data-danger={danger ? "true" : undefined}
+      data-running={running ? "true" : undefined}
+    >
+      {label ? <span className="vadm-flow-pill">{label}</span> : null}
+      <FlowArrow />
+    </div>
+  )
+}
+
+type FlowVariant = "bare" | "accent" | "changed" | "danger"
+
+function FlowNode({
+  variant,
+  mono,
+  href,
+  children,
+  sub,
+}: {
+  /** Precedence is applied by the caller: danger > changed > accent. */
+  variant?: FlowVariant
+  mono?: boolean
+  /** When set the whole node becomes the link (no separate button). */
+  href?: string
+  children: ReactNode
+  sub?: ReactNode
+}) {
+  const className = `vadm-flow-node${variant ? ` vadm-flow-node--${variant}` : ""}`
+  const body = (
+    <>
+      <span className="vadm-flow-label" data-mono={mono ? "true" : undefined}>
+        {children}
+        {href ? <span className="vadm-flow-out" aria-hidden="true">↗</span> : null}
+      </span>
+      {sub ? <span className="vadm-flow-sub">{sub}</span> : null}
+    </>
+  )
+  if (href) {
+    return (
+      <a className={className} href={href} target="_blank" rel="noreferrer">
+        {body}
+      </a>
+    )
+  }
+  return <div className={className}>{body}</div>
+}
+
+function BrainTraceSkeleton() {
+  return (
+    <div className="vadm-list" aria-label="Loading Brain routing traces">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div className="vadm-card vadm-brain-trace" key={i} aria-hidden="true">
+          <div className="vadm-flow">
+            <div className="vadm-flow-node vadm-flow-node--bare">
+              <span className="vadm-skel" style={{ width: `${86 - i * 8}%` }} />
+            </div>
+            <FlowEdge />
+            <div className="vadm-flow-node">
+              <span className="vadm-skel" style={{ width: "70%" }} />
+              <span className="vadm-skel" style={{ width: "88%", marginTop: 7 }} />
+            </div>
+            {i % 2 === 0 && (
+              <>
+                <FlowEdge />
+                <div className="vadm-flow-node">
+                  <span className="vadm-skel" style={{ width: "64%" }} />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// Routing traces fetched per user (capped 200 server-side). These annotate the
+// conversation — each inbound bubble maps to its trace for the tap-to-reveal —
+// and, unfiltered, derive the "recent conversations" chips. Messages older than
+// this window paginate in fine but lose their tappable trace.
+const BRAIN_FETCH_LIMIT = 200
+// Conversation page size: newest N first, "Load older" fetches the next N up.
+const BRAIN_TRANSCRIPT_PAGE = 30
+
+/** An active user filter, sourced from either the email search or a message's
+ *  sender chip. `label` is what we show in the filter pill. */
+interface BrainUserFilter {
+  id: string
+  label: string
+}
+
+export function BrainRoutingPanel({ client }: { client: AdminClient }) {
+  const [traces, setTraces] = useState<ImessageBrainTrace[] | null>(null)
+  // Steps for the loaded page, grouped by trace id. Fetched with the traces
+  // (one cross-box hop, not one per expanded card) — see listBrainRouting's
+  // `steps` flag.
+  const [steps, setSteps] = useState<Map<string, ImessageBrainTraceStep[]>>(new Map())
+  const [capture, setCapture] = useState<ImessageBrainCapture | null>(null)
+  // Conversation, oldest-first (index 0 = oldest loaded, last = newest). Older
+  // pages prepend at the front; the newest sits at the bottom of the pane.
+  const [transcript, setTranscript] = useState<ImessageBrainMessage[] | null>(null)
+  const [hasMore, setHasMore] = useState(false)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [error, setError] = useState<unknown>(null)
+  const [query, setQuery] = useState("")
+  const [hits, setHits] = useState<UserHit[]>([])
+  const [filter, setFilter] = useState<BrainUserFilter | null>(null)
+  // Single-open accordion for the conversation (keyed by message id).
+  const [openMsgId, setOpenMsgId] = useState<number | null>(null)
+
+  // Scroll management for the reversed, paginated pane. `restoreRef` keeps the
+  // viewport pinned to the same messages when older ones prepend; `bottomRef`
+  // requests a scroll-to-newest after a fresh load.
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const restoreRef = useRef<{ top: number; height: number } | null>(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?: string) => {
+    setTraces(null)
+    try {
+      const result = await client.listImessageBrainRouting({ userId, limit: BRAIN_FETCH_LIMIT, steps: true })
+      setTraces(result.traces)
+      const grouped = new Map<string, ImessageBrainTraceStep[]>()
+      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: string) => {
+    setTranscript(null)
+    setHasMore(false)
+    setOpenMsgId(null)
+    try {
+      const result = await client.listImessageBrainTranscript({ userId, limit: BRAIN_TRANSCRIPT_PAGE })
+      bottomRef.current = true // newest is at the bottom — land there
+      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,
+      })
+      // Pin the viewport before the prepend so the pane doesn't jump.
+      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()
+    void load()
+  }, [load])
+
+  // Email autocomplete dropdown — suppressed while a filter is pinned.
+  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: BrainUserFilter) {
+    setFilter(next)
+    setQuery("")
+    setHits([])
+    void load(next.id) // user-scoped traces power the per-message reveal
+    void loadTranscript(next.id)
+  }
+
+  function pickUser(hit: UserHit) {
+    openConversation({ id: hit.id, label: hit.name || hit.email })
+  }
+
+  function clearFilter() {
+    setFilter(null)
+    setQuery("")
+    setTranscript(null)
+    setHasMore(false)
+    void load()
+  }
+
+  function refresh() {
+    if (filter) {
+      void load(filter.id)
+      void loadTranscript(filter.id)
+    } else {
+      void load()
+    }
+  }
+
+  // Map an inbound message → its routing trace. Primary key is the provider
+  // message id (trace.inboundMessageId); text is a fallback for older rows
+  // captured before the id was recorded.
+  const traceByMsgId = useMemo(() => {
+    const m = new Map<string, ImessageBrainTrace>()
+    for (const t of traces ?? []) if (t.inboundMessageId) m.set(t.inboundMessageId, t)
+    return m
+  }, [traces])
+  const traceByText = useMemo(() => {
+    const m = new Map<string, ImessageBrainTrace>()
+    for (const t of traces ?? []) m.set(t.text, t) // last (most recent) wins
+    return m
+  }, [traces])
+  function traceForMessage(msg: ImessageBrainMessage): ImessageBrainTrace | null {
+    if (msg.direction !== "in") return null
+    return (msg.providerMessageId ? traceByMsgId.get(msg.providerMessageId) : undefined)
+      ?? traceByText.get(msg.text)
+      ?? null
+  }
+
+  // "Recent conversations" chips: distinct senders in the loaded window, busiest
+  // first. This is the entry point into a user's conversation when unfiltered.
+  const senders = useMemo(() => {
+    if (!traces) return []
+    const m = new Map<string, { userId: string; phone: string; count: number }>()
+    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 (
+    <div>
+      <div className="vadm-spread vadm-panel-head">
+        <div>
+          <p className="vadm-h">Chat Brain conversations</p>
+          <p className="vadm-sub" style={{ margin: 0 }}>
+            {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."}
+          </p>
+        </div>
+        <button className="vadm-btn vadm-btn-sm" onClick={refresh}>Refresh</button>
+      </div>
+
+      {filter ? (
+        <div className="vadm-filter-pill">
+          <span className="vadm-muted">Conversation with</span>
+          <strong>{filter.label}</strong>
+          <button className="vadm-btn vadm-btn-sm" onClick={clearFilter}>← All</button>
+        </div>
+      ) : (
+        <>
+          <div className="vadm-search" style={{ position: "relative", marginBottom: 12 }}>
+            <input
+              className="vadm-input"
+              placeholder="Find by account email…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            {hits.length > 0 && (
+              <div className="vadm-card" style={{ position: "absolute", zIndex: 5, top: 38, left: 0, right: 0, padding: 4 }}>
+                {hits.map((hit) => (
+                  <button key={hit.id} className="vadm-user-row" onClick={() => pickUser(hit)}>
+                    <UserAvatar user={hit} />
+                    <span className="vadm-grow">
+                      <span style={{ display: "block", fontWeight: 600 }}>{hit.name || hit.email}</span>
+                      <span className="vadm-muted" style={{ fontSize: 12 }}>{hit.email}</span>
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          {senders.length > 0 && (
+            <div className="vadm-userchips">
+              <span className="vadm-muted" style={{ fontSize: 12 }}>Recent:</span>
+              {senders.slice(0, 8).map((s) => (
+                <button
+                  key={s.userId}
+                  className="vadm-userchip"
+                  onClick={() => openConversation({ id: s.userId, label: maskedPhone(s.phone) })}
+                >
+                  {maskedPhone(s.phone)}
+                  <span className="vadm-userchip-count">{s.count}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <ErrorBanner error={error} />
+      {filter ? (
+        transcript === null ? (
+          <BrainTraceSkeleton />
+        ) : transcript.length === 0 ? (
+          <div className="vadm-empty">
+            <strong style={{ display: "block", color: "var(--foreground)", marginBottom: 5 }}>
+              No messages yet
+            </strong>
+            This account has no iMessage history with the line.
+          </div>
+        ) : (
+          <div className="vadm-conv" ref={scrollRef}>
+            {hasMore && (
+              <div className="vadm-conv-more">
+                <button className="vadm-btn vadm-btn-sm" onClick={loadOlder} disabled={loadingMore}>
+                  {loadingMore ? "Loading…" : "Load older messages"}
+                </button>
+              </div>
+            )}
+            {transcript.map((msg) => {
+              const inbound = msg.direction === "in"
+              const trace = traceForMessage(msg)
+              const open = openMsgId === msg.id
+              return (
+                <div className={`vadm-bubble-row vadm-bubble-row--${inbound ? "in" : "out"}`} key={msg.id}>
+                  <button
+                    type="button"
+                    className="vadm-bubble"
+                    data-dir={inbound ? "in" : "out"}
+                    data-open={open ? "true" : undefined}
+                    data-has-trace={trace ? "true" : undefined}
+                    aria-expanded={trace ? open : undefined}
+                    onClick={trace ? () => setOpenMsgId(open ? null : msg.id) : undefined}
+                  >
+                    {msg.media && msg.media.length > 0 && (
+                      <span className="vadm-bubble-media">
+                        {msg.media.map((url) =>
+                          /\.(mp4|mov|webm)(?:$|\?)/i.test(url) ? (
+                            <video key={url} className="vadm-bubble-att" src={url} controls preload="metadata" />
+                          ) : (
+                            <img key={url} className="vadm-bubble-att" src={url} alt="attachment" loading="lazy" />
+                          ),
+                        )}
+                      </span>
+                    )}
+                    {msg.text && <span className="vadm-bubble-text">{msg.text}</span>}
+                    <span className="vadm-bubble-meta">
+                      <span>{inbound ? "them" : "us"}</span>
+                      <span aria-hidden="true">·</span>
+                      <time dateTime={new Date(msg.at).toISOString()}>{shortTime(msg.at)}</time>
+                      {trace && <span className="vadm-bubble-dot" data-outcome={trace.outcome} aria-hidden="true" />}
+                    </span>
+                  </button>
+                  {open && trace && (
+                    <div className="vadm-bubble-detail">
+                      <TraceRouting trace={trace} steps={steps.get(trace.id) ?? []} />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )
+      ) : traces === null ? (
+        <BrainTraceSkeleton />
+      ) : senders.length === 0 ? (
+        <div className="vadm-empty">
+          <strong style={{ display: "block", color: "var(--foreground)", marginBottom: 5 }}>
+            No conversations yet
+          </strong>
+          No inbound iMessage has arrived since capture started. Send the line a message, then refresh.
+          {capture?.gatewayStartedAt && (
+            <span style={{ display: "block", marginTop: 7, fontSize: 12 }}>
+              Gateway online since {new Date(capture.gatewayStartedAt).toLocaleString()}
+            </span>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+/** 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: Record<ImessageBrainTraceStep["kind"], string> = {
+  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 }: { steps: ImessageBrainTraceStep[] }) {
+  const [openSeq, setOpenSeq] = useState<number | null>(null)
+  if (!steps.length) return null
+  const t0 = steps[0]!.at
+  return (
+    <div style={{ marginTop: 12, paddingTop: 10, borderTop: "1px dashed var(--vadm-border)" }}>
+      <div style={{ fontSize: 11, opacity: 0.6, marginBottom: 6 }}>
+        {steps.length} step{steps.length === 1 ? "" : "s"} — tap one to see its payload
+      </div>
+      {steps.map((step) => {
+        const open = openSeq === step.seq
+        const detail = step.detail ?? ""
+        // A rule's rationale is short and IS the point, so show it inline
+        // rather than hiding the one thing the operator came here to read.
+        const inline = step.kind === "rule" || detail.length <= 120
+        const firstLine = detail.split("\n")[0] ?? ""
+        return (
+          <div key={step.seq} style={{ borderTop: "1px solid var(--vadm-border)", padding: "5px 0" }}>
+            <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",
+              }}
+            >
+              <code style={{ fontSize: 10, opacity: 0.5, minWidth: 44 }}>+{formatMs(step.at - t0)}</code>
+              <span style={{ fontSize: 10, opacity: 0.6, minWidth: 58 }}>{STEP_KIND_LABEL[step.kind]}</span>
+              <strong style={{ fontSize: 12 }}>{step.name ?? ""}</strong>
+              {step.durationMs != null && (
+                <span style={{ fontSize: 10, opacity: 0.5 }}>{formatMs(step.durationMs)}</span>
+              )}
+              {!open && !inline && firstLine && (
+                <span style={{ fontSize: 11, opacity: 0.55, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}>
+                  {firstLine}
+                </span>
+              )}
+            </button>
+            {(open || inline) && detail && (
+              <pre
+                style={{
+                  margin: "4px 0 0 52px",
+                  fontSize: 11,
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                  opacity: 0.8,
+                  maxHeight: open ? 420 : undefined,
+                  overflow: open ? "auto" : undefined,
+                }}
+              >
+                {detail}
+              </pre>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function TraceRouting({ trace, steps }: { trace: ImessageBrainTrace; steps: ImessageBrainTraceStep[] }) {
+  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)
+  // Graph length IS the story: a decision the brain handled inline
+  // (protocol.quiet, brain.error) never grows the third node.
+  const routed = trace.targetSessionId != null
+  const [decisionPrefix, decisionVerb] = splitDecision(trace.decision)
+  return (
+    <>
+      <div className="vadm-flow">
+        <FlowNode variant="bare">
+          <span className="vadm-flow-quote">{trace.text}</span>
+        </FlowNode>
+        <FlowEdge label={routeViaLabel(trace.routeVia)} />
+        <FlowNode
+          variant={failed ? "danger" : trace.decision.startsWith("computer.") ? "accent" : undefined}
+          sub={trace.reason ? <span title={trace.reason}>{trace.reason}</span> : null}
+        >
+          {decisionPrefix && <span className="vadm-flow-pre">{decisionPrefix}</span>}
+          {decisionVerb}
+        </FlowNode>
+        {routed && (
+          <>
+            <FlowEdge label={running ? null : duration != null ? formatMs(duration) : null} danger={failed} running={running} />
+            <FlowNode
+              variant={sessionChanged ? "changed" : undefined}
+              mono
+              href={targetHref ?? undefined}
+              sub={sessionChanged ? `was ${shortId(trace.activeSessionBefore)}` : null}
+            >
+              {shortId(trace.targetSessionId)}
+            </FlowNode>
+          </>
+        )}
+      </div>
+
+      {trace.error && <div className="vadm-err vadm-flow-error">{trace.error}</div>}
+
+      <div className="vadm-kv" style={{ marginTop: 12, paddingTop: 10, borderTop: "1px dashed var(--vadm-border)" }}>
+        <div><span>Generation</span><strong>{trace.generation}</strong></div>
+        <div><span>From</span><strong>{maskedPhone(trace.phone)}</strong></div>
+        <div><span>Reply to</span><strong><code>{shortId(trace.replyToMessageId)}</code></strong></div>
+        <div><span>Timing</span><strong>{timingLine(trace.fleetMs, trace.llmMs, duration)}</strong></div>
+        <div><span>Session</span><strong><code>{shortId(trace.activeSessionBefore)} → {shortId(trace.activeSessionAfter)}</code></strong></div>
+        <div><span>Message</span><strong>{trace.text}</strong></div>
+        {trace.reason && <div><span>Reason</span><strong>{trace.reason}</strong></div>}
+      </div>
+
+      <TraceSteps steps={steps} />
+    </>
+  )
+}
+
 // ── Console (tab shell) ──────────────────────────────────────────────────────
 
 export interface PanelDef {
@@ -943,6 +1582,7 @@ export interface PanelDef {
 }
 
 const DEFAULT_PANELS: PanelDef[] = [
+  { id: "brain", label: "Chat Brain", render: (c) => <BrainRoutingPanel client={c} /> },
   { id: "flags", label: "Flags", render: (c) => <FlagsPanel client={c} /> },
   { id: "users", label: "Users", render: (c) => <UsersPanel client={c} /> },
   { id: "reports", label: "Reports", render: (c) => <ReportsPanel client={c} /> },