@omg-dev/admin 0.4.24

package/src/react.tsx

@@ -0,0 +1,983 @@
+// @omg-dev/admin — embeddable admin console (React).
+//
+// <AdminConsole client={...} /> renders the full tabbed console; <FlagsPanel/>
+// and <PricingPanel/> render a single panel if a host wants to place them
+// individually. All three are self-styled (injected <style>, themed from the
+// host's shadcn vars — see styles.ts) and take an AdminClient, so they drop into
+// the omg dashboard, the LFG app, or Inspect without per-host wiring.
+//
+// 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 { ensureStyles } from "./styles"
+import {
+  AdminClient,
+  type AdminClientConfig,
+  type FlagDef,
+  type FlagOverride,
+  type PlanVersion,
+  type ModelInfo,
+  type UserHit,
+  type AdminUser,
+  type UserBalance,
+  type BugReportSummary,
+  type BugReportDetail,
+  type BugStatus,
+} from "./client"
+
+export type { AdminClientConfig }
+export { AdminClient }
+
+// ── primitives ───────────────────────────────────────────────────────────────
+
+function Switch({ checked, onChange, disabled }: { checked: boolean; onChange: (v: boolean) => void; disabled?: boolean }) {
+  return (
+    <label className="vadm-switch">
+      <input type="checkbox" checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} />
+      <span className="vadm-slider" />
+    </label>
+  )
+}
+
+function ErrorBanner({ error }: { error: unknown }) {
+  if (!error) return null
+  const msg = error instanceof Error ? error.message : String(error)
+  return <div className="vadm-err">{msg}</div>
+}
+
+function initialsFor(user: Pick<AdminUser, "name" | "email">): string {
+  const source = (user.name || user.email || "?").trim()
+  const parts = source.split(/\s+/).filter(Boolean)
+  if (parts.length >= 2) return `${parts[0][0]}${parts[1][0]}`.toUpperCase()
+  return source.slice(0, 2).toUpperCase()
+}
+
+function UserAvatar({ user }: { user: Pick<AdminUser, "name" | "email" | "image"> }) {
+  return (
+    <span className="vadm-avatar">
+      {user.image ? <img src={user.image} alt="" /> : initialsFor(user)}
+    </span>
+  )
+}
+
+function UserListSkeleton() {
+  return (
+    <div className="vadm-list" aria-label="Loading users">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div key={i} className="vadm-user-row" aria-hidden="true">
+          <span className="vadm-skel vadm-skel-avatar" />
+          <span className="vadm-grow">
+            <span className="vadm-skel" style={{ width: "42%" }} />
+            <span className="vadm-skel" style={{ width: "68%", marginTop: 8 }} />
+          </span>
+          <span className="vadm-skel" style={{ width: 72 }} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ── Flags panel ──────────────────────────────────────────────────────────────
+
+const EMPTY_DRAFT: {
+  key: string
+  description: string
+  valueType: "bool" | "json"
+  enabled: boolean
+  defaultValue: string
+  rolloutPercent: string
+  planRules: string
+} = { key: "", description: "", valueType: "bool", enabled: false, defaultValue: "", rolloutPercent: "", planRules: "" }
+
+export function FlagsPanel({ client }: { client: AdminClient }) {
+  const [flags, setFlags] = useState<FlagDef[] | null>(null)
+  const [error, setError] = useState<unknown>(null)
+  const [busy, setBusy] = useState(false)
+  const [editing, setEditing] = useState<string | null>(null) // key or "__new__"
+  const [draft, setDraft] = useState(EMPTY_DRAFT)
+  const [expanded, setExpanded] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      setFlags(await client.listFlags())
+      setError(null)
+    } catch (e) {
+      setError(e)
+    }
+  }, [client])
+
+  useEffect(() => {
+    ensureStyles()
+    void load()
+  }, [load])
+
+  function openNew() {
+    setDraft(EMPTY_DRAFT)
+    setEditing("__new__")
+  }
+  function openEdit(f: FlagDef) {
+    setDraft({
+      key: f.key,
+      description: f.description,
+      valueType: f.valueType,
+      enabled: f.enabled,
+      defaultValue: f.valueType === "json" ? JSON.stringify(f.defaultValue ?? null, null, 2) : "",
+      rolloutPercent: f.rolloutPercent == null ? "" : String(f.rolloutPercent),
+      planRules: f.planRules ? JSON.stringify(f.planRules, null, 2) : "",
+    })
+    setEditing(f.key)
+  }
+
+  async function save() {
+    setBusy(true)
+    try {
+      const payload: Record<string, unknown> = {
+        key: draft.key.trim(),
+        description: draft.description.trim(),
+        valueType: draft.valueType,
+        enabled: draft.enabled,
+        rolloutPercent: draft.rolloutPercent.trim() === "" ? null : Number(draft.rolloutPercent),
+      }
+      if (draft.valueType === "json" && draft.defaultValue.trim()) {
+        payload.defaultValue = JSON.parse(draft.defaultValue)
+      }
+      payload.planRules = draft.planRules.trim() ? JSON.parse(draft.planRules) : null
+      await client.upsertFlag(payload as never)
+      setEditing(null)
+      await load()
+    } catch (e) {
+      setError(e)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function toggleEnabled(f: FlagDef, enabled: boolean) {
+    setBusy(true)
+    try {
+      await client.upsertFlag({
+        key: f.key,
+        valueType: f.valueType,
+        description: f.description,
+        enabled,
+        rolloutPercent: f.rolloutPercent,
+        planRules: f.planRules,
+        defaultValue: f.valueType === "json" ? f.defaultValue : undefined,
+      })
+      await load()
+    } catch (e) {
+      setError(e)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function archive(f: FlagDef) {
+    setBusy(true)
+    try {
+      await client.setFlagArchived(f.key, !f.archivedAt)
+      await load()
+    } catch (e) {
+      setError(e)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (editing) {
+    const isNew = editing === "__new__"
+    return (
+      <div>
+        <p className="vadm-h">{isNew ? "New flag" : `Edit ${draft.key}`}</p>
+        <ErrorBanner error={error} />
+        <div className="vadm-field">
+          <label className="vadm-label">Key</label>
+          <input
+            className="vadm-input vadm-mono"
+            placeholder="model.claude-opus-4-8"
+            value={draft.key}
+            disabled={!isNew}
+            onChange={(e) => setDraft({ ...draft, key: e.target.value })}
+          />
+        </div>
+        <div className="vadm-field">
+          <label className="vadm-label">Description</label>
+          <input className="vadm-input" value={draft.description} onChange={(e) => setDraft({ ...draft, description: e.target.value })} />
+        </div>
+        <div className="vadm-row" style={{ marginBottom: 10 }}>
+          <div className="vadm-grow">
+            <label className="vadm-label">Type</label>
+            <select className="vadm-select" value={draft.valueType} disabled={!isNew} onChange={(e) => setDraft({ ...draft, valueType: e.target.value as "bool" | "json" })}>
+              <option value="bool">boolean</option>
+              <option value="json">json</option>
+            </select>
+          </div>
+          <div className="vadm-grow">
+            <label className="vadm-label">Rollout %</label>
+            <input className="vadm-input" placeholder="(none)" inputMode="numeric" value={draft.rolloutPercent} onChange={(e) => setDraft({ ...draft, rolloutPercent: e.target.value })} />
+          </div>
+          <div>
+            <label className="vadm-label">Default on</label>
+            <Switch checked={draft.enabled} onChange={(v) => setDraft({ ...draft, enabled: v })} />
+          </div>
+        </div>
+        {draft.valueType === "json" && (
+          <div className="vadm-field">
+            <label className="vadm-label">Default value (JSON)</label>
+            <textarea className="vadm-textarea" value={draft.defaultValue} onChange={(e) => setDraft({ ...draft, defaultValue: e.target.value })} />
+          </div>
+        )}
+        <div className="vadm-field">
+          <label className="vadm-label">Plan rules (JSON map, optional) — e.g. {`{"free":false,"pro":true}`}</label>
+          <textarea className="vadm-textarea" value={draft.planRules} onChange={(e) => setDraft({ ...draft, planRules: e.target.value })} />
+        </div>
+        <div className="vadm-row">
+          <button className="vadm-btn" data-primary="true" disabled={busy || !draft.key.trim()} onClick={save}>Save</button>
+          <button className="vadm-btn" disabled={busy} onClick={() => { setEditing(null); setError(null) }}>Cancel</button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="vadm-spread" style={{ marginBottom: 12 }}>
+        <p className="vadm-sub" style={{ margin: 0 }}>Gate UI / API features per account, plan, or rollout %.</p>
+        <button className="vadm-btn" data-primary="true" onClick={openNew}>New flag</button>
+      </div>
+      <ErrorBanner error={error} />
+      {flags === null ? (
+        <div className="vadm-empty">Loading…</div>
+      ) : flags.length === 0 ? (
+        <div className="vadm-empty">No flags yet.</div>
+      ) : (
+        flags.map((f) => (
+          <div key={f.key} className="vadm-card" data-off={f.archivedAt ? "true" : undefined}>
+            <div className="vadm-spread">
+              <div className="vadm-grow">
+                <div className="vadm-row">
+                  <span className="vadm-mono" style={{ fontWeight: 600 }}>{f.key}</span>
+                  <span className="vadm-badge">{f.valueType}</span>
+                  {f.rolloutPercent != null && <span className="vadm-badge">{f.rolloutPercent}%</span>}
+                  {f.planRules && <span className="vadm-badge">plan rules</span>}
+                  {f.archivedAt && <span className="vadm-badge">archived</span>}
+                </div>
+                {f.description && <div className="vadm-muted" style={{ fontSize: 13, marginTop: 2 }}>{f.description}</div>}
+              </div>
+              <div className="vadm-row">
+                {f.valueType === "bool" && !f.archivedAt && (
+                  <Switch checked={f.enabled} disabled={busy} onChange={(v) => toggleEnabled(f, v)} />
+                )}
+                <button className="vadm-btn vadm-btn-sm" onClick={() => setExpanded(expanded === f.key ? null : f.key)}>
+                  {f.overrideCount > 0 ? `${f.overrideCount} override${f.overrideCount > 1 ? "s" : ""}` : "Overrides"}
+                </button>
+                <button className="vadm-btn vadm-btn-sm" onClick={() => openEdit(f)}>Edit</button>
+                <button className="vadm-btn vadm-btn-sm" onClick={() => archive(f)}>{f.archivedAt ? "Restore" : "Archive"}</button>
+              </div>
+            </div>
+            {expanded === f.key && <OverridesEditor client={client} flag={f} onChange={load} />}
+          </div>
+        ))
+      )}
+    </div>
+  )
+}
+
+// ── per-account overrides ──────────────────────────────────────────────────
+
+function OverridesEditor({ client, flag, onChange }: { client: AdminClient; flag: FlagDef; onChange: () => void }) {
+  const [rows, setRows] = useState<FlagOverride[] | null>(null)
+  const [error, setError] = useState<unknown>(null)
+  const [query, setQuery] = useState("")
+  const [hits, setHits] = useState<UserHit[]>([])
+  const [picked, setPicked] = useState<UserHit | null>(null)
+  const [enabled, setEnabled] = useState(true)
+  const [value, setValue] = useState("")
+  const [busy, setBusy] = useState(false)
+
+  const reload = useCallback(async () => {
+    try {
+      setRows(await client.listOverrides(flag.key))
+    } catch (e) {
+      setError(e)
+    }
+  }, [client, flag.key])
+
+  useEffect(() => { void reload() }, [reload])
+
+  useEffect(() => {
+    if (!query.trim() || picked) { setHits([]); return }
+    let live = true
+    const t = setTimeout(async () => {
+      try {
+        const r = await client.findUsers(query.trim())
+        if (live) setHits(r)
+      } catch { /* ignore search errors */ }
+    }, 200)
+    return () => { live = false; clearTimeout(t) }
+  }, [query, picked, client])
+
+  async function add() {
+    if (!picked) return
+    setBusy(true)
+    try {
+      await client.setOverride({
+        flagKey: flag.key,
+        userId: picked.id,
+        enabled,
+        value: flag.valueType === "json" && value.trim() ? JSON.parse(value) : undefined,
+      })
+      setPicked(null); setQuery(""); setValue(""); setEnabled(true)
+      await reload(); onChange()
+    } catch (e) {
+      setError(e)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function drop(userId: string) {
+    setBusy(true)
+    try {
+      await client.removeOverride(flag.key, userId)
+      await reload(); onChange()
+    } catch (e) {
+      setError(e)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="vadm-detail">
+      <ErrorBanner error={error} />
+      {rows && rows.length > 0 && (
+        <table className="vadm-table" style={{ marginBottom: 12 }}>
+          <thead><tr><th>Account</th><th>State</th>{flag.valueType === "json" && <th>Value</th>}<th /></tr></thead>
+          <tbody>
+            {rows.map((r) => (
+              <tr key={r.userId}>
+                <td>{r.userEmail ?? r.userId}</td>
+                <td><span className="vadm-badge" data-on={r.enabled ? "true" : undefined}>{r.enabled ? "on" : "off"}</span></td>
+                {flag.valueType === "json" && <td className="vadm-mono">{r.value == null ? "—" : JSON.stringify(r.value)}</td>}
+                <td style={{ textAlign: "right" }}><button className="vadm-btn vadm-btn-sm" data-danger="true" disabled={busy} onClick={() => drop(r.userId)}>Remove</button></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      <div className="vadm-row" style={{ position: "relative" }}>
+        <div className="vadm-grow" style={{ position: "relative" }}>
+          <input
+            className="vadm-input"
+            placeholder="Search account by email…"
+            value={picked ? `${picked.email}` : query}
+            onChange={(e) => { setPicked(null); setQuery(e.target.value) }}
+          />
+          {hits.length > 0 && (
+            <div className="vadm-card" style={{ position: "absolute", zIndex: 5, left: 0, right: 0, marginTop: 2, padding: 4 }}>
+              {hits.map((h) => (
+                <div key={h.id} className="vadm-btn" style={{ display: "block", border: "none", textAlign: "left", width: "100%" }} onClick={() => { setPicked(h); setHits([]) }}>
+                  {h.email}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <Switch checked={enabled} onChange={setEnabled} />
+        {flag.valueType === "json" && (
+          <input className="vadm-input vadm-mono vadm-grow" placeholder='value JSON (optional)' value={value} onChange={(e) => setValue(e.target.value)} />
+        )}
+        <button className="vadm-btn vadm-btn-sm" data-primary="true" disabled={!picked || busy} onClick={add}>Add</button>
+      </div>
+    </div>
+  )
+}
+
+// ── Pricing panel (read-only) ──────────────────────────────────────────────
+
+export function PricingPanel({ client }: { client: AdminClient }) {
+  const [plans, setPlans] = useState<PlanVersion[] | null>(null)
+  const [models, setModels] = useState<ModelInfo[] | null>(null)
+  const [error, setError] = useState<unknown>(null)
+
+  useEffect(() => {
+    ensureStyles()
+    void (async () => {
+      try {
+        const [p, m] = await Promise.all([client.planVersions(), client.models()])
+        setPlans(p); setModels(m)
+      } catch (e) {
+        setError(e)
+      }
+    })()
+  }, [client])
+
+  return (
+    <div>
+      <p className="vadm-sub">Read-only — pricing is code-defined (defineBilling) and reconciled by the orchestrator.</p>
+      <ErrorBanner error={error} />
+      <p className="vadm-h">Plans</p>
+      {plans === null ? <div className="vadm-empty">Loading…</div> : plans.length === 0 ? <div className="vadm-empty">No plan versions.</div> : (
+        <table className="vadm-table" style={{ marginBottom: 24 }}>
+          <thead><tr><th>Plan</th><th>Ver</th><th>Status</th><th>Price</th><th>Interval</th><th>Stripe price</th></tr></thead>
+          <tbody>
+            {plans.map((p) => (
+              <tr key={`${p.planKey}-${p.version}`}>
+                <td style={{ fontWeight: 600 }}>{p.planKey}</td>
+                <td>{p.version}</td>
+                <td><span className="vadm-badge" data-on={p.status === "active" ? "true" : undefined}>{p.status}</span></td>
+                <td>${p.priceUsd.toFixed(2)}</td>
+                <td>{p.interval}</td>
+                <td className="vadm-mono">{p.externalPriceId || "—"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      <p className="vadm-h">Models</p>
+      {models === null ? <div className="vadm-empty">Loading…</div> : models.length === 0 ? <div className="vadm-empty">No models.</div> : (
+        <table className="vadm-table">
+          <thead><tr><th>Model</th><th>Provider</th><th>ID</th></tr></thead>
+          <tbody>
+            {models.map((m) => (
+              <tr key={m.id}>
+                <td>{m.name ?? m.id}</td>
+                <td>{m.provider ?? "—"}</td>
+                <td className="vadm-mono">{m.id}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}
+
+// ── Users panel ────────────────────────────────────────────────────────────
+
+export function UsersPanel({ client }: { client: AdminClient }) {
+  const [queryInput, setQueryInput] = useState("")
+  const [query, setQuery] = useState("")
+  const [users, setUsers] = useState<AdminUser[] | null>(null)
+  const [total, setTotal] = useState(0)
+  const [error, setError] = useState<unknown>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [balance, setBalance] = useState<UserBalance | null>(null)
+  const [balanceError, setBalanceError] = useState<unknown>(null)
+
+  const load = useCallback(async () => {
+    try {
+      const res = await client.listUsers({ query, limit: 50 })
+      setUsers(res.users)
+      setTotal(res.total)
+      setSelectedId((current) => current ?? res.users[0]?.id ?? null)
+      setError(null)
+    } catch (e) {
+      setError(e)
+    }
+  }, [client, query])
+
+  useEffect(() => {
+    ensureStyles()
+    void load()
+  }, [load])
+
+  const selected = users?.find((u) => u.id === selectedId) ?? users?.[0] ?? null
+
+  useEffect(() => {
+    if (!selected) {
+      setBalance(null)
+      setBalanceError(null)
+      return
+    }
+    let live = true
+    setBalance(null)
+    setBalanceError(null)
+    void client.userBalance(selected.id)
+      .then((b) => { if (live) setBalance(b) })
+      .catch((e) => { if (live) setBalanceError(e) })
+    return () => { live = false }
+  }, [client, selected?.id])
+
+  function submit(e: FormEvent) {
+    e.preventDefault()
+    setQuery(queryInput.trim())
+    setSelectedId(null)
+    setUsers(null)
+  }
+
+  return (
+    <div>
+      <div className="vadm-spread vadm-panel-head">
+        <div>
+          <p className="vadm-h">Users</p>
+          <p className="vadm-sub">Accounts, sessions, projects, flag overrides, and billing status.</p>
+        </div>
+        <form className="vadm-search" onSubmit={submit}>
+          <input
+            className="vadm-input"
+            placeholder="Search users"
+            value={queryInput}
+            onChange={(e) => setQueryInput(e.target.value)}
+          />
+          <button className="vadm-btn" type="submit">Search</button>
+          {query && (
+            <button
+              className="vadm-btn"
+              type="button"
+              onClick={() => {
+                setQuery("")
+                setQueryInput("")
+                setSelectedId(null)
+                setUsers(null)
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </form>
+      </div>
+
+      <ErrorBanner error={error} />
+
+      {users === null ? (
+        <UserListSkeleton />
+      ) : users.length === 0 ? (
+        <div className="vadm-empty">No users found.</div>
+      ) : (
+        <div className="vadm-split">
+          <div className="vadm-list">
+            <div className="vadm-muted" style={{ fontSize: 12, marginBottom: 8 }}>
+              Showing {users.length} of {total}
+            </div>
+            {users.map((u) => (
+              <button
+                key={u.id}
+                className="vadm-user-row"
+                data-active={u.id === selected?.id}
+                onClick={() => setSelectedId(u.id)}
+              >
+                <UserAvatar user={u} />
+                <span className="vadm-grow">
+                  <span className="vadm-user-name">{u.name || u.email}</span>
+                  <span className="vadm-muted">{u.email}</span>
+                </span>
+                <span className="vadm-user-stats">
+                  <span>{u.projectCount} apps</span>
+                  <span>{u.activeSessionCount} sessions</span>
+                </span>
+              </button>
+            ))}
+          </div>
+
+          {selected && (
+            <div className="vadm-card vadm-inspector">
+              <div className="vadm-row" style={{ alignItems: "flex-start" }}>
+                <UserAvatar user={selected} />
+                <div className="vadm-grow">
+                  <p className="vadm-h" style={{ marginBottom: 2 }}>{selected.name || selected.email}</p>
+                  <div className="vadm-muted">{selected.email}</div>
+                </div>
+                <span className="vadm-badge" data-on={selected.emailVerified ? "true" : undefined}>
+                  {selected.emailVerified ? "verified" : "unverified"}
+                </span>
+              </div>
+
+              <div className="vadm-metrics">
+                <div><strong>{selected.projectCount}</strong><span>apps</span></div>
+                <div><strong>{selected.ownedProjectCount}</strong><span>owned</span></div>
+                <div><strong>{selected.activeSessionCount}</strong><span>sessions</span></div>
+                <div><strong>{selected.flagOverrideCount}</strong><span>flags</span></div>
+              </div>
+
+              <div className="vadm-kv">
+                <div><span>User ID</span><code>{selected.id}</code></div>
+                <div><span>Joined</span><strong>{fmtTime(selected.createdAt)}</strong></div>
+                <div><span>Updated</span><strong>{fmtTime(selected.updatedAt)}</strong></div>
+                <div>
+                  <span>Plan</span>
+                  <strong>
+                    {balance ? balance.plan : balanceError ? "Unavailable" : "Loading..."}
+                  </strong>
+                </div>
+                {balance && (
+                  <>
+                    <div><span>Balance</span><strong>${balance.balanceUsd.toFixed(2)}</strong></div>
+                    <div><span>App credits</span><strong>${balance.appCreditsUsd.toFixed(2)}</strong></div>
+                  </>
+                )}
+              </div>
+              <ErrorBanner error={balanceError} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Reports panel (triage) ─────────────────────────────────────────────────
+
+const BUG_STATUSES: BugStatus[] = ["open", "triaged", "in_progress", "resolved", "wont_fix"]
+const STATUS_LABEL: Record<BugStatus, string> = {
+  open: "Open",
+  triaged: "Triaged",
+  in_progress: "In progress",
+  resolved: "Resolved",
+  wont_fix: "Won't fix",
+}
+const OPEN_STATUSES = new Set<BugStatus>(["open", "triaged", "in_progress"])
+
+function fmtTime(ms: number): string {
+  try {
+    return new Date(ms).toLocaleString()
+  } catch {
+    return String(ms)
+  }
+}
+
+// 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
+// carries the durable screenshotKey for manual lookup). Mirrors the ingestion
+// allowlist in control-plane/lib/sanitize.ts → storageImageUrl.
+const STORAGE_HOSTS = ["t3.storage.dev"]
+function safeImageSrc(v: unknown): string | undefined {
+  if (typeof v !== "string") return undefined
+  try {
+    const u = new URL(v)
+    if (u.protocol !== "http:" && u.protocol !== "https:") return undefined
+    const host = u.hostname.toLowerCase()
+    return STORAGE_HOSTS.some((h) => host === h || host.endsWith("." + h)) ? v : undefined
+  } catch {
+    return undefined
+  }
+}
+
+export function ReportsPanel({ client }: { client: AdminClient }) {
+  const [reports, setReports] = useState<BugReportSummary[] | null>(null)
+  const [counts, setCounts] = useState<Record<string, number>>({})
+  const [filter, setFilter] = useState<BugStatus | "all">("all")
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [detail, setDetail] = useState<BugReportDetail | null>(null)
+  const [error, setError] = useState<unknown>(null)
+  const [busy, setBusy] = useState(false)
+  const [note, setNote] = useState("")
+
+  const load = useCallback(async () => {
+    try {
+      const res = await client.listReports(filter === "all" ? {} : { status: filter })
+      setReports(res.reports)
+      setCounts(res.counts)
+      setError(null)
+    } catch (e) {
+      setError(e)
+    }
+  }, [client, filter])
+
+  useEffect(() => {
+    ensureStyles()
+    void load()
+  }, [load])
+
+  const openDetail = useCallback(
+    async (id: string) => {
+      setSelectedId(id)
+      setDetail(null)
+      try {
+        const d = await client.getReport(id)
+        setDetail(d)
+        setNote(d?.adminNotes ?? "")
+      } catch (e) {
+        setError(e)
+      }
+    },
+    [client],
+  )
+
+  async function mutate(fn: () => Promise<unknown>) {
+    setBusy(true)
+    try {
+      await fn()
+      await load()
+      if (selectedId) await openDetail(selectedId)
+      setError(null)
+    } catch (e) {
+      setError(e)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const totalOpen = BUG_STATUSES.filter((s) => OPEN_STATUSES.has(s)).reduce((n, s) => n + (counts[s] ?? 0), 0)
+
+  return (
+    <div>
+      <p className="vadm-sub">
+        User-submitted bug reports. Each carries the context to <strong>recover</strong> — open or fork the exact app
+        version the reporter saw. {totalOpen} open.
+      </p>
+      <ErrorBanner error={error} />
+
+      <div className="vadm-row" style={{ marginBottom: 12, gap: 6, flexWrap: "wrap" }}>
+        <button className="vadm-tab" data-active={filter === "all"} onClick={() => setFilter("all")}>
+          All
+        </button>
+        {BUG_STATUSES.map((s) => (
+          <button key={s} className="vadm-tab" data-active={filter === s} onClick={() => setFilter(s)}>
+            {STATUS_LABEL[s]} {counts[s] ? `(${counts[s]})` : ""}
+          </button>
+        ))}
+      </div>
+
+      <div className="vadm-spread" style={{ alignItems: "flex-start", gap: 16 }}>
+        {/* List */}
+        <div className="vadm-grow" style={{ minWidth: 0 }}>
+          {reports === null ? (
+            <div className="vadm-empty">Loading…</div>
+          ) : reports.length === 0 ? (
+            <div className="vadm-empty">No reports.</div>
+          ) : (
+            <table className="vadm-table">
+              <thead>
+                <tr>
+                  <th>Title</th>
+                  <th>Sev</th>
+                  <th>Status</th>
+                  <th>Reporter</th>
+                  <th>When</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reports.map((r) => (
+                  <tr
+                    key={r.id}
+                    onClick={() => openDetail(r.id)}
+                    style={{ cursor: "pointer", fontWeight: r.id === selectedId ? 600 : undefined }}
+                  >
+                    <td style={{ maxWidth: 260, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {r.title}
+                    </td>
+                    <td>
+                      <span className="vadm-badge" data-on={r.severity === "critical" || r.severity === "high" ? "true" : undefined}>
+                        {r.severity}
+                      </span>
+                    </td>
+                    <td>{STATUS_LABEL[r.status]}</td>
+                    <td className="vadm-muted">
+                      {r.reporterEmail ?? "—"}
+                      {r.reporterEmail && !r.reporterUserId && (
+                        <span className="vadm-badge" style={{ marginLeft: 6 }} title="Self-reported email — not verified">
+                          unverified
+                        </span>
+                      )}
+                    </td>
+                    <td className="vadm-muted">{fmtTime(r.createdAt)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        {/* Detail */}
+        {detail && (
+          <div className="vadm-detail vadm-card" style={{ width: 360, flexShrink: 0 }}>
+            {/* The title + body are UNTRUSTED visitor text (potential prompt
+                injection if pasted into an LLM). Fence them visually so a
+                triager never mistakes embedded "instructions" for system copy.
+                React already escapes the content; this is provenance, not XSS. */}
+            <div
+              style={{
+                border: "1px solid #f0d8a8",
+                background: "#fffaf0",
+                borderRadius: 8,
+                padding: "8px 10px",
+                margin: "0 0 12px",
+              }}
+            >
+              <div className="vadm-muted" style={{ fontSize: 11, marginBottom: 4, textTransform: "uppercase", letterSpacing: 0.4 }}>
+                Reported text · untrusted input
+              </div>
+              <p className="vadm-h" style={{ margin: "0 0 4px" }}>{detail.title}</p>
+              <p style={{ whiteSpace: "pre-wrap", wordBreak: "break-word", margin: 0 }}>
+                {detail.body || <em className="vadm-muted">No description.</em>}
+              </p>
+            </div>
+
+            <div className="vadm-field">
+              <label className="vadm-label">Status</label>
+              <select
+                className="vadm-select"
+                value={detail.status}
+                disabled={busy}
+                onChange={(e) => mutate(() => client.setReportStatus(detail.id, e.target.value as BugStatus))}
+              >
+                {BUG_STATUSES.map((s) => (
+                  <option key={s} value={s}>{STATUS_LABEL[s]}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="vadm-field">
+              <label className="vadm-label">Recover context</label>
+              <div className="vadm-mono" style={{ fontSize: 12, lineHeight: 1.6 }}>
+                {detail.slug ? (
+                  <div>
+                    app:{" "}
+                    <a href={`https://omg.dev/${detail.slug}`} target="_blank" rel="noreferrer">{detail.slug}</a>
+                    {detail.version != null ? ` · v${detail.version}` : ""}
+                  </div>
+                ) : (
+                  <div className="vadm-muted">no app linked</div>
+                )}
+                {detail.snapshotId && <div>snapshot: {detail.snapshotId}</div>}
+                {detail.runId && <div>run: {detail.runId}</div>}
+                {detail.pageUrl && (
+                  <div style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    page:{" "}
+                    {safeHref(detail.pageUrl) ? (
+                      <a href={detail.pageUrl} target="_blank" rel="noreferrer">{detail.pageUrl}</a>
+                    ) : (
+                      <span>{detail.pageUrl}</span>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {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">
+                  Open app
+                </a>
+                <a className="vadm-btn vadm-btn-sm" href={`https://omg.dev/${detail.slug}/inspect/data`} target="_blank" rel="noreferrer">
+                  Inspect
+                </a>
+              </div>
+            )}
+
+            {(() => {
+              const ctx = detail.context as { screenshotUrl?: unknown } | null
+              const url = safeImageSrc(ctx?.screenshotUrl) ?? null
+              return url ? (
+                <div className="vadm-field">
+                  <label className="vadm-label">Screenshot</label>
+                  <a href={url} target="_blank" rel="noreferrer">
+                    <img
+                      src={url}
+                      alt="screenshot"
+                      style={{ width: "100%", maxHeight: 200, objectFit: "cover", borderRadius: 8, border: "1px solid #eee" }}
+                    />
+                  </a>
+                </div>
+              ) : null
+            })()}
+
+            {detail.context != null && (
+              <div className="vadm-field">
+                <label className="vadm-label">Diagnostics</label>
+                <pre className="vadm-mono" style={{ fontSize: 11, maxHeight: 160, overflow: "auto", margin: 0 }}>
+                  {JSON.stringify(detail.context, null, 2)}
+                </pre>
+              </div>
+            )}
+
+            <div className="vadm-field">
+              <label className="vadm-label">Triage note</label>
+              <textarea className="vadm-textarea" rows={3} value={note} onChange={(e) => setNote(e.target.value)} disabled={busy} />
+              <button
+                className="vadm-btn vadm-btn-sm"
+                disabled={busy || note === (detail.adminNotes ?? "")}
+                onClick={() => mutate(() => client.addReportNote(detail.id, note))}
+                style={{ marginTop: 6 }}
+              >
+                Save note
+              </button>
+            </div>
+
+            <div className="vadm-spread" style={{ marginTop: 12 }}>
+              <span className="vadm-muted" style={{ fontSize: 12 }}>
+                {detail.reporterEmail ?? "anonymous"}
+                {detail.reporterEmail && !detail.reporterUserId && " · unverified"}
+              </span>
+              <button
+                className="vadm-btn vadm-btn-sm"
+                disabled={busy}
+                onClick={() => {
+                  if (confirm("Delete this report?")) void mutate(() => client.removeReport(detail.id).then(() => { setDetail(null); setSelectedId(null) }))
+                }}
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ── Console (tab shell) ──────────────────────────────────────────────────────
+
+export interface PanelDef {
+  id: string
+  label: string
+  render: (client: AdminClient) => ReactElement
+}
+
+const DEFAULT_PANELS: PanelDef[] = [
+  { 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} /> },
+  { id: "pricing", label: "Pricing", render: (c) => <PricingPanel client={c} /> },
+]
+
+export interface AdminConsoleProps {
+  /** A constructed AdminClient, or a config to build one from. */
+  client?: AdminClient
+  config?: AdminClientConfig
+  /** Override the panel set (e.g. embed only Flags). Defaults to Flags + Pricing. */
+  panels?: PanelDef[]
+}
+
+export function AdminConsole({ client, config, panels = DEFAULT_PANELS }: AdminConsoleProps) {
+  const resolved = useMemo(() => client ?? (config ? new AdminClient(config) : null), [client, config])
+  const [active, setActive] = useState(panels[0]?.id)
+
+  useEffect(() => { ensureStyles() }, [])
+
+  if (!resolved) {
+    return <div className="vadm"><div className="vadm-err">AdminConsole requires a `client` or `config` prop.</div></div>
+  }
+  const current = panels.find((p) => p.id === active) ?? panels[0]
+
+  return (
+    <div className="vadm">
+      <div className="vadm-tabs">
+        {panels.map((p) => (
+          <button key={p.id} className="vadm-tab" data-active={p.id === current?.id} onClick={() => setActive(p.id)}>
+            {p.label}
+          </button>
+        ))}
+      </div>
+      {current?.render(resolved)}
+    </div>
+  )
+}