@omg-dev/admin 0.4.26 → 0.4.28

package/src/safe-url.ts

@@ -0,0 +1,11 @@
+/** URLs in the admin console can originate from reports or user-controlled
+ * Computers. Only ordinary web links may become clickable operator actions. */
+export function safeHref(value: unknown): string | undefined {
+  if (typeof value !== "string") return undefined
+  try {
+    const url = new URL(value)
+    return url.protocol === "http:" || url.protocol === "https:" ? value : undefined
+  } catch {
+    return undefined
+  }
+}

package/src/server.ts

@@ -30,7 +30,7 @@ export interface OmgAdminProxyOptions {
 // The proxy only forwards the admin surface — never arbitrary control-plane
 // paths — so a leaked mount can't wield the powerful admin token against other
 // endpoints. Keep in sync with the console's AdminClient modules.
-const ALLOWED = ["/api/flags/", "/api/adminBilling/", "/api/bugReports/", "/api/users/"];
+const ALLOWED = ["/api/flags/", "/api/adminBilling/", "/api/bugReports/", "/api/users/", "/api/imessageDebug/"];
 
 function json(body: unknown, status: number): Response {
   return new Response(JSON.stringify(body), {

package/src/styles.ts

@@ -29,6 +29,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;
@@ -169,6 +170,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; }
@@ -187,6 +422,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) {