@omg-dev/admin 0.4.24

package/dist/react-COCR3YSL.mjs

@@ -0,0 +1,1603 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/styles.ts
+const STYLE_ID = "vibes-admin-styles";
+function ensureStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById("vibes-admin-styles")) return;
+	const el = document.createElement("style");
+	el.id = STYLE_ID;
+	el.textContent = CSS;
+	document.head.appendChild(el);
+}
+const CSS = `
+.vadm {
+  --vadm-bg: var(--background, #ffffff);
+  --vadm-fg: var(--foreground, #18181b);
+  --vadm-muted: var(--muted-foreground, #71717a);
+  --vadm-border: var(--border, #e4e4e7);
+  --vadm-accent: var(--primary, #2563eb);
+  --vadm-accent-fg: var(--primary-foreground, #ffffff);
+  --vadm-card: var(--card, #fafafa);
+  --vadm-danger: #dc2626;
+  color: var(--vadm-fg);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.vadm, .vadm * { box-sizing: border-box; }
+@media (prefers-color-scheme: dark) {
+  .vadm {
+    --vadm-bg: var(--background, #0a0a0a);
+    --vadm-fg: var(--foreground, #f4f4f5);
+    --vadm-muted: var(--muted-foreground, #a1a1aa);
+    --vadm-border: var(--border, #27272a);
+    --vadm-card: var(--card, #18181b);
+    --vadm-danger: #f87171;
+  }
+}
+
+.vadm-tabs {
+  display: flex; gap: 3px; border: 1px solid var(--vadm-border);
+  background: color-mix(in srgb, var(--vadm-muted) 9%, transparent);
+  border-radius: 8px; padding: 3px; margin-bottom: 16px; overflow-x: auto;
+  scrollbar-width: none;
+}
+.vadm-tabs::-webkit-scrollbar { display: none; }
+.vadm-tab {
+  appearance: none; background: none; border: none; cursor: pointer;
+  padding: 7px 12px; color: var(--vadm-muted); font: inherit; font-weight: 600;
+  border-radius: 6px; white-space: nowrap; flex: none;
+}
+.vadm-tab[data-active="true"] {
+  color: var(--vadm-fg); background: var(--vadm-bg);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--vadm-fg) 10%, transparent);
+}
+
+.vadm-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.vadm-grow { flex: 1; min-width: 0; }
+.vadm-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
+.vadm-muted { color: var(--vadm-muted); }
+.vadm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.vadm-h { font-weight: 600; font-size: 15px; margin: 0 0 4px; }
+.vadm-sub { color: var(--vadm-muted); font-size: 13px; margin: 0 0 16px; }
+
+.vadm-card {
+  border: 1px solid var(--vadm-border); border-radius: 8px;
+  background: var(--vadm-card); padding: 14px 16px; margin-bottom: 10px;
+}
+.vadm-card[data-off="true"] { opacity: 0.6; }
+
+.vadm-btn {
+  appearance: none; cursor: pointer; font: inherit; font-weight: 500;
+  border: 1px solid var(--vadm-border); border-radius: 8px;
+  background: var(--vadm-bg); color: var(--vadm-fg); padding: 6px 12px;
+  min-height: 34px; white-space: nowrap;
+}
+.vadm-btn:hover { border-color: var(--vadm-accent); }
+.vadm-btn[data-primary="true"] { background: var(--vadm-accent); color: var(--vadm-accent-fg); border-color: var(--vadm-accent); }
+.vadm-btn[data-danger="true"] { color: var(--vadm-danger); border-color: var(--vadm-danger); }
+.vadm-btn:disabled { opacity: 0.5; cursor: default; }
+.vadm-btn-sm { padding: 3px 8px; font-size: 12px; border-radius: 6px; }
+
+.vadm-input, .vadm-select, .vadm-textarea {
+  font: inherit; color: var(--vadm-fg); background: var(--vadm-bg);
+  border: 1px solid var(--vadm-border); border-radius: 8px; padding: 7px 10px; width: 100%;
+  min-height: 36px;
+}
+.vadm-input:focus, .vadm-select:focus, .vadm-textarea:focus { outline: none; border-color: var(--vadm-accent); }
+.vadm-textarea { resize: vertical; min-height: 56px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+
+.vadm-field { margin-bottom: 10px; }
+.vadm-label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; color: var(--vadm-muted); }
+
+/* iOS-style switch */
+.vadm-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
+.vadm-switch input { opacity: 0; width: 0; height: 0; }
+.vadm-slider {
+  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
+  background: var(--vadm-border); transition: background 0.15s;
+}
+.vadm-slider::before {
+  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
+  background: #fff; border-radius: 50%; transition: transform 0.15s;
+}
+.vadm-switch input:checked + .vadm-slider { background: var(--vadm-accent); }
+.vadm-switch input:checked + .vadm-slider::before { transform: translateX(16px); }
+
+.vadm-badge {
+  display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 7px;
+  border-radius: 999px; border: 1px solid var(--vadm-border); color: var(--vadm-muted);
+}
+.vadm-badge[data-on="true"] { color: var(--vadm-accent); border-color: var(--vadm-accent); }
+
+.vadm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.vadm-table th { text-align: left; color: var(--vadm-muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--vadm-border); }
+.vadm-table td { padding: 6px 8px; border-bottom: 1px solid var(--vadm-border); }
+
+.vadm-empty { text-align: center; color: var(--vadm-muted); padding: 32px 0; }
+.vadm-err { color: var(--vadm-danger); background: color-mix(in srgb, var(--vadm-danger) 10%, transparent); border: 1px solid var(--vadm-danger); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
+.vadm-detail { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--vadm-border); }
+
+.vadm-panel-head { align-items: flex-start; margin-bottom: 12px; }
+.vadm-search { display: flex; align-items: center; gap: 8px; width: min(100%, 420px); }
+.vadm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 14px; align-items: start; }
+.vadm-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.vadm-user-row {
+  appearance: none; width: 100%; border: 1px solid var(--vadm-border); border-radius: 8px;
+  background: var(--vadm-bg); color: var(--vadm-fg); padding: 10px;
+  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit;
+}
+button.vadm-user-row { cursor: pointer; }
+.vadm-user-row[data-active="true"] {
+  border-color: color-mix(in srgb, var(--vadm-accent) 55%, var(--vadm-border));
+  background: color-mix(in srgb, var(--vadm-accent) 8%, var(--vadm-bg));
+}
+.vadm-avatar {
+  width: 38px; height: 38px; border-radius: 50%; flex: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: color-mix(in srgb, var(--vadm-accent) 13%, var(--vadm-bg));
+  color: var(--vadm-accent); font-weight: 700; font-size: 12px; overflow: hidden;
+}
+.vadm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.vadm-user-name { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vadm-user-stats { color: var(--vadm-muted); font-size: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
+.vadm-inspector { position: sticky; top: 12px; margin-bottom: 0; }
+.vadm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
+.vadm-metrics div {
+  border: 1px solid var(--vadm-border); border-radius: 8px; padding: 8px; background: var(--vadm-bg);
+}
+.vadm-metrics strong { display: block; font-size: 18px; line-height: 1.1; }
+.vadm-metrics span { display: block; color: var(--vadm-muted); font-size: 11px; margin-top: 2px; }
+.vadm-kv { display: grid; gap: 8px; }
+.vadm-kv > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }
+.vadm-kv span { color: var(--vadm-muted); font-size: 12px; }
+.vadm-kv strong { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
+.vadm-kv code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
+.vadm-skel {
+  display: block; height: 12px; border-radius: 999px;
+  background: color-mix(in srgb, var(--vadm-muted) 18%, transparent);
+  animation: vadmPulse 1.4s ease-in-out infinite;
+}
+.vadm-skel-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
+@keyframes vadmPulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+@media (max-width: 760px) {
+  .vadm { font-size: 13px; }
+  .vadm-tabs { margin-left: -2px; margin-right: -2px; }
+  .vadm-row, .vadm-spread { flex-wrap: wrap; }
+  .vadm-panel-head { display: block; }
+  .vadm-search { width: 100%; margin-top: 10px; }
+  .vadm-search .vadm-input { min-width: 0; }
+  .vadm-split { display: flex; flex-direction: column; }
+  .vadm-inspector { position: static; width: 100% !important; max-width: 100%; }
+  .vadm-user-row { align-items: flex-start; flex-wrap: wrap; }
+  .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%; }
+}
+
+@media (max-width: 480px) {
+  .vadm-card { padding: 12px; }
+  .vadm-search { flex-wrap: wrap; }
+  .vadm-search .vadm-input { flex: 1 0 100%; }
+  .vadm-btn { min-height: 36px; }
+  .vadm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .vadm-kv > div { grid-template-columns: 1fr; gap: 1px; }
+}
+`;
+//#endregion
+//#region src/client.ts
+var AdminError = class extends Error {
+	status;
+	data;
+	constructor(message, status, data) {
+		super(message);
+		this.name = "AdminError";
+		this.status = status;
+		this.data = data;
+	}
+};
+var AdminClient = class {
+	apiBase;
+	getToken;
+	constructor(config) {
+		this.apiBase = config.apiBase.replace(/\/$/, "");
+		this.getToken = config.getToken;
+	}
+	async rpc(module, name, args) {
+		const token = await this.getToken();
+		const headers = { "content-type": "application/json" };
+		if (token) headers.authorization = `Bearer ${token}`;
+		const res = await fetch(`${this.apiBase}/api/${module}/${name}`, {
+			method: "POST",
+			headers,
+			body: JSON.stringify(args ?? {})
+		});
+		if (!res.ok) {
+			let message = `${module}.${name} failed (${res.status})`;
+			let payload = null;
+			try {
+				payload = await res.json();
+				if (payload && typeof payload === "object" && "error" in payload) message = String(payload.error);
+			} catch {}
+			throw new AdminError(message, res.status, payload);
+		}
+		if (res.status === 204) return void 0;
+		const text = await res.text();
+		return text ? JSON.parse(text) : void 0;
+	}
+	listFlags() {
+		return this.rpc("flags", "listFlags");
+	}
+	upsertFlag(flag) {
+		return this.rpc("flags", "upsert", flag);
+	}
+	setFlagArchived(key, archived) {
+		return this.rpc("flags", "setArchived", {
+			key,
+			archived
+		});
+	}
+	removeFlag(key) {
+		return this.rpc("flags", "removeFlag", { key });
+	}
+	listOverrides(flagKey) {
+		return this.rpc("flags", "listOverrides", { flagKey });
+	}
+	setOverride(o) {
+		return this.rpc("flags", "setOverride", o);
+	}
+	removeOverride(flagKey, userId) {
+		return this.rpc("flags", "removeOverride", {
+			flagKey,
+			userId
+		});
+	}
+	findUsers(query) {
+		return this.rpc("users", "findUsers", { query });
+	}
+	listUsers(args) {
+		return this.rpc("users", "listUsers", args ?? {});
+	}
+	planVersions() {
+		return this.rpc("adminBilling", "planVersions");
+	}
+	models() {
+		return this.rpc("adminBilling", "models");
+	}
+	userBalance(userId) {
+		return this.rpc("adminBilling", "userBalance", { userId });
+	}
+	listReports(args) {
+		return this.rpc("bugReports", "listReports", args ?? {});
+	}
+	getReport(id) {
+		return this.rpc("bugReports", "getReport", { id });
+	}
+	setReportStatus(id, status, assignee) {
+		return this.rpc("bugReports", "setStatus", {
+			id,
+			status,
+			assignee
+		});
+	}
+	addReportNote(id, note) {
+		return this.rpc("bugReports", "addNote", {
+			id,
+			note
+		});
+	}
+	setReportCluster(id, clusterKey) {
+		return this.rpc("bugReports", "setCluster", {
+			id,
+			clusterKey
+		});
+	}
+	listClusters() {
+		return this.rpc("bugReports", "listClusters", {});
+	}
+	removeReport(id) {
+		return this.rpc("bugReports", "removeReport", { id });
+	}
+};
+//#endregion
+//#region src/react.tsx
+function Switch({ checked, onChange, disabled }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "vadm-switch",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			checked,
+			disabled,
+			onChange: (e) => onChange(e.target.checked)
+		}), /* @__PURE__ */ jsx("span", { className: "vadm-slider" })]
+	});
+}
+function ErrorBanner({ error }) {
+	if (!error) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "vadm-err",
+		children: error instanceof Error ? error.message : String(error)
+	});
+}
+function initialsFor(user) {
+	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 }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "vadm-avatar",
+		children: user.image ? /* @__PURE__ */ jsx("img", {
+			src: user.image,
+			alt: ""
+		}) : initialsFor(user)
+	});
+}
+function UserListSkeleton() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "vadm-list",
+		"aria-label": "Loading users",
+		children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+			className: "vadm-user-row",
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "vadm-skel vadm-skel-avatar" }),
+				/* @__PURE__ */ jsxs("span", {
+					className: "vadm-grow",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "vadm-skel",
+						style: { width: "42%" }
+					}), /* @__PURE__ */ jsx("span", {
+						className: "vadm-skel",
+						style: {
+							width: "68%",
+							marginTop: 8
+						}
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "vadm-skel",
+					style: { width: 72 }
+				})
+			]
+		}, i))
+	});
+}
+const EMPTY_DRAFT = {
+	key: "",
+	description: "",
+	valueType: "bool",
+	enabled: false,
+	defaultValue: "",
+	rolloutPercent: "",
+	planRules: ""
+};
+function FlagsPanel({ client }) {
+	const [flags, setFlags] = useState(null);
+	const [error, setError] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const [editing, setEditing] = useState(null);
+	const [draft, setDraft] = useState(EMPTY_DRAFT);
+	const [expanded, setExpanded] = useState(null);
+	const load = useCallback(async () => {
+		try {
+			setFlags(await client.listFlags());
+			setError(null);
+		} catch (e) {
+			setError(e);
+		}
+	}, [client]);
+	useEffect(() => {
+		ensureStyles();
+		load();
+	}, [load]);
+	function openNew() {
+		setDraft(EMPTY_DRAFT);
+		setEditing("__new__");
+	}
+	function openEdit(f) {
+		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 = {
+				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);
+			setEditing(null);
+			await load();
+		} catch (e) {
+			setError(e);
+		} finally {
+			setBusy(false);
+		}
+	}
+	async function toggleEnabled(f, enabled) {
+		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 : void 0
+			});
+			await load();
+		} catch (e) {
+			setError(e);
+		} finally {
+			setBusy(false);
+		}
+	}
+	async function archive(f) {
+		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 /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "vadm-h",
+				children: isNew ? "New flag" : `Edit ${draft.key}`
+			}),
+			/* @__PURE__ */ jsx(ErrorBanner, { error }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vadm-field",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "vadm-label",
+					children: "Key"
+				}), /* @__PURE__ */ jsx("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
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vadm-field",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "vadm-label",
+					children: "Description"
+				}), /* @__PURE__ */ jsx("input", {
+					className: "vadm-input",
+					value: draft.description,
+					onChange: (e) => setDraft({
+						...draft,
+						description: e.target.value
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vadm-row",
+				style: { marginBottom: 10 },
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-grow",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "vadm-label",
+							children: "Type"
+						}), /* @__PURE__ */ jsxs("select", {
+							className: "vadm-select",
+							value: draft.valueType,
+							disabled: !isNew,
+							onChange: (e) => setDraft({
+								...draft,
+								valueType: e.target.value
+							}),
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "bool",
+								children: "boolean"
+							}), /* @__PURE__ */ jsx("option", {
+								value: "json",
+								children: "json"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-grow",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "vadm-label",
+							children: "Rollout %"
+						}), /* @__PURE__ */ jsx("input", {
+							className: "vadm-input",
+							placeholder: "(none)",
+							inputMode: "numeric",
+							value: draft.rolloutPercent,
+							onChange: (e) => setDraft({
+								...draft,
+								rolloutPercent: e.target.value
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						className: "vadm-label",
+						children: "Default on"
+					}), /* @__PURE__ */ jsx(Switch, {
+						checked: draft.enabled,
+						onChange: (v) => setDraft({
+							...draft,
+							enabled: v
+						})
+					})] })
+				]
+			}),
+			draft.valueType === "json" && /* @__PURE__ */ jsxs("div", {
+				className: "vadm-field",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "vadm-label",
+					children: "Default value (JSON)"
+				}), /* @__PURE__ */ jsx("textarea", {
+					className: "vadm-textarea",
+					value: draft.defaultValue,
+					onChange: (e) => setDraft({
+						...draft,
+						defaultValue: e.target.value
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vadm-field",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "vadm-label",
+					children: ["Plan rules (JSON map, optional) — e.g. ", `{"free":false,"pro":true}`]
+				}), /* @__PURE__ */ jsx("textarea", {
+					className: "vadm-textarea",
+					value: draft.planRules,
+					onChange: (e) => setDraft({
+						...draft,
+						planRules: e.target.value
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vadm-row",
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "vadm-btn",
+					"data-primary": "true",
+					disabled: busy || !draft.key.trim(),
+					onClick: save,
+					children: "Save"
+				}), /* @__PURE__ */ jsx("button", {
+					className: "vadm-btn",
+					disabled: busy,
+					onClick: () => {
+						setEditing(null);
+						setError(null);
+					},
+					children: "Cancel"
+				})]
+			})
+		] });
+	}
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "vadm-spread",
+			style: { marginBottom: 12 },
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "vadm-sub",
+				style: { margin: 0 },
+				children: "Gate UI / API features per account, plan, or rollout %."
+			}), /* @__PURE__ */ jsx("button", {
+				className: "vadm-btn",
+				"data-primary": "true",
+				onClick: openNew,
+				children: "New flag"
+			})]
+		}),
+		/* @__PURE__ */ jsx(ErrorBanner, { error }),
+		flags === null ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "Loading…"
+		}) : flags.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "No flags yet."
+		}) : flags.map((f) => /* @__PURE__ */ jsxs("div", {
+			className: "vadm-card",
+			"data-off": f.archivedAt ? "true" : void 0,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "vadm-spread",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "vadm-grow",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "vadm-row",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "vadm-mono",
+								style: { fontWeight: 600 },
+								children: f.key
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "vadm-badge",
+								children: f.valueType
+							}),
+							f.rolloutPercent != null && /* @__PURE__ */ jsxs("span", {
+								className: "vadm-badge",
+								children: [f.rolloutPercent, "%"]
+							}),
+							f.planRules && /* @__PURE__ */ jsx("span", {
+								className: "vadm-badge",
+								children: "plan rules"
+							}),
+							f.archivedAt && /* @__PURE__ */ jsx("span", {
+								className: "vadm-badge",
+								children: "archived"
+							})
+						]
+					}), f.description && /* @__PURE__ */ jsx("div", {
+						className: "vadm-muted",
+						style: {
+							fontSize: 13,
+							marginTop: 2
+						},
+						children: f.description
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "vadm-row",
+					children: [
+						f.valueType === "bool" && !f.archivedAt && /* @__PURE__ */ jsx(Switch, {
+							checked: f.enabled,
+							disabled: busy,
+							onChange: (v) => toggleEnabled(f, v)
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "vadm-btn vadm-btn-sm",
+							onClick: () => setExpanded(expanded === f.key ? null : f.key),
+							children: f.overrideCount > 0 ? `${f.overrideCount} override${f.overrideCount > 1 ? "s" : ""}` : "Overrides"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "vadm-btn vadm-btn-sm",
+							onClick: () => openEdit(f),
+							children: "Edit"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "vadm-btn vadm-btn-sm",
+							onClick: () => archive(f),
+							children: f.archivedAt ? "Restore" : "Archive"
+						})
+					]
+				})]
+			}), expanded === f.key && /* @__PURE__ */ jsx(OverridesEditor, {
+				client,
+				flag: f,
+				onChange: load
+			})]
+		}, f.key))
+	] });
+}
+function OverridesEditor({ client, flag, onChange }) {
+	const [rows, setRows] = useState(null);
+	const [error, setError] = useState(null);
+	const [query, setQuery] = useState("");
+	const [hits, setHits] = useState([]);
+	const [picked, setPicked] = useState(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(() => {
+		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 {}
+		}, 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) : void 0
+			});
+			setPicked(null);
+			setQuery("");
+			setValue("");
+			setEnabled(true);
+			await reload();
+			onChange();
+		} catch (e) {
+			setError(e);
+		} finally {
+			setBusy(false);
+		}
+	}
+	async function drop(userId) {
+		setBusy(true);
+		try {
+			await client.removeOverride(flag.key, userId);
+			await reload();
+			onChange();
+		} catch (e) {
+			setError(e);
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vadm-detail",
+		children: [
+			/* @__PURE__ */ jsx(ErrorBanner, { error }),
+			rows && rows.length > 0 && /* @__PURE__ */ jsxs("table", {
+				className: "vadm-table",
+				style: { marginBottom: 12 },
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", { children: "Account" }),
+					/* @__PURE__ */ jsx("th", { children: "State" }),
+					flag.valueType === "json" && /* @__PURE__ */ jsx("th", { children: "Value" }),
+					/* @__PURE__ */ jsx("th", {})
+				] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("td", { children: r.userEmail ?? r.userId }),
+					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", {
+						className: "vadm-badge",
+						"data-on": r.enabled ? "true" : void 0,
+						children: r.enabled ? "on" : "off"
+					}) }),
+					flag.valueType === "json" && /* @__PURE__ */ jsx("td", {
+						className: "vadm-mono",
+						children: r.value == null ? "—" : JSON.stringify(r.value)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						style: { textAlign: "right" },
+						children: /* @__PURE__ */ jsx("button", {
+							className: "vadm-btn vadm-btn-sm",
+							"data-danger": "true",
+							disabled: busy,
+							onClick: () => drop(r.userId),
+							children: "Remove"
+						})
+					})
+				] }, r.userId)) })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vadm-row",
+				style: { position: "relative" },
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-grow",
+						style: { position: "relative" },
+						children: [/* @__PURE__ */ jsx("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 && /* @__PURE__ */ jsx("div", {
+							className: "vadm-card",
+							style: {
+								position: "absolute",
+								zIndex: 5,
+								left: 0,
+								right: 0,
+								marginTop: 2,
+								padding: 4
+							},
+							children: hits.map((h) => /* @__PURE__ */ jsx("div", {
+								className: "vadm-btn",
+								style: {
+									display: "block",
+									border: "none",
+									textAlign: "left",
+									width: "100%"
+								},
+								onClick: () => {
+									setPicked(h);
+									setHits([]);
+								},
+								children: h.email
+							}, h.id))
+						})]
+					}),
+					/* @__PURE__ */ jsx(Switch, {
+						checked: enabled,
+						onChange: setEnabled
+					}),
+					flag.valueType === "json" && /* @__PURE__ */ jsx("input", {
+						className: "vadm-input vadm-mono vadm-grow",
+						placeholder: "value JSON (optional)",
+						value,
+						onChange: (e) => setValue(e.target.value)
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "vadm-btn vadm-btn-sm",
+						"data-primary": "true",
+						disabled: !picked || busy,
+						onClick: add,
+						children: "Add"
+					})
+				]
+			})
+		]
+	});
+}
+function PricingPanel({ client }) {
+	const [plans, setPlans] = useState(null);
+	const [models, setModels] = useState(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		ensureStyles();
+		(async () => {
+			try {
+				const [p, m] = await Promise.all([client.planVersions(), client.models()]);
+				setPlans(p);
+				setModels(m);
+			} catch (e) {
+				setError(e);
+			}
+		})();
+	}, [client]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "vadm-sub",
+			children: "Read-only — pricing is code-defined (defineBilling) and reconciled by the orchestrator."
+		}),
+		/* @__PURE__ */ jsx(ErrorBanner, { error }),
+		/* @__PURE__ */ jsx("p", {
+			className: "vadm-h",
+			children: "Plans"
+		}),
+		plans === null ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "Loading…"
+		}) : plans.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "No plan versions."
+		}) : /* @__PURE__ */ jsxs("table", {
+			className: "vadm-table",
+			style: { marginBottom: 24 },
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", { children: "Plan" }),
+				/* @__PURE__ */ jsx("th", { children: "Ver" }),
+				/* @__PURE__ */ jsx("th", { children: "Status" }),
+				/* @__PURE__ */ jsx("th", { children: "Price" }),
+				/* @__PURE__ */ jsx("th", { children: "Interval" }),
+				/* @__PURE__ */ jsx("th", { children: "Stripe price" })
+			] }) }), /* @__PURE__ */ jsx("tbody", { children: plans.map((p) => /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("td", {
+					style: { fontWeight: 600 },
+					children: p.planKey
+				}),
+				/* @__PURE__ */ jsx("td", { children: p.version }),
+				/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", {
+					className: "vadm-badge",
+					"data-on": p.status === "active" ? "true" : void 0,
+					children: p.status
+				}) }),
+				/* @__PURE__ */ jsxs("td", { children: ["$", p.priceUsd.toFixed(2)] }),
+				/* @__PURE__ */ jsx("td", { children: p.interval }),
+				/* @__PURE__ */ jsx("td", {
+					className: "vadm-mono",
+					children: p.externalPriceId || "—"
+				})
+			] }, `${p.planKey}-${p.version}`)) })]
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "vadm-h",
+			children: "Models"
+		}),
+		models === null ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "Loading…"
+		}) : models.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "No models."
+		}) : /* @__PURE__ */ jsxs("table", {
+			className: "vadm-table",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", { children: "Model" }),
+				/* @__PURE__ */ jsx("th", { children: "Provider" }),
+				/* @__PURE__ */ jsx("th", { children: "ID" })
+			] }) }), /* @__PURE__ */ jsx("tbody", { children: models.map((m) => /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("td", { children: m.name ?? m.id }),
+				/* @__PURE__ */ jsx("td", { children: m.provider ?? "—" }),
+				/* @__PURE__ */ jsx("td", {
+					className: "vadm-mono",
+					children: m.id
+				})
+			] }, m.id)) })]
+		})
+	] });
+}
+function UsersPanel({ client }) {
+	const [queryInput, setQueryInput] = useState("");
+	const [query, setQuery] = useState("");
+	const [users, setUsers] = useState(null);
+	const [total, setTotal] = useState(0);
+	const [error, setError] = useState(null);
+	const [selectedId, setSelectedId] = useState(null);
+	const [balance, setBalance] = useState(null);
+	const [balanceError, setBalanceError] = useState(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();
+		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);
+		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) {
+		e.preventDefault();
+		setQuery(queryInput.trim());
+		setSelectedId(null);
+		setUsers(null);
+	}
+	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: "Users"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "vadm-sub",
+				children: "Accounts, sessions, projects, flag overrides, and billing status."
+			})] }), /* @__PURE__ */ jsxs("form", {
+				className: "vadm-search",
+				onSubmit: submit,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						className: "vadm-input",
+						placeholder: "Search users",
+						value: queryInput,
+						onChange: (e) => setQueryInput(e.target.value)
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "vadm-btn",
+						type: "submit",
+						children: "Search"
+					}),
+					query && /* @__PURE__ */ jsx("button", {
+						className: "vadm-btn",
+						type: "button",
+						onClick: () => {
+							setQuery("");
+							setQueryInput("");
+							setSelectedId(null);
+							setUsers(null);
+						},
+						children: "Clear"
+					})
+				]
+			})]
+		}),
+		/* @__PURE__ */ jsx(ErrorBanner, { error }),
+		users === null ? /* @__PURE__ */ jsx(UserListSkeleton, {}) : users.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "vadm-empty",
+			children: "No users found."
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "vadm-split",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "vadm-list",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "vadm-muted",
+					style: {
+						fontSize: 12,
+						marginBottom: 8
+					},
+					children: [
+						"Showing ",
+						users.length,
+						" of ",
+						total
+					]
+				}), users.map((u) => /* @__PURE__ */ jsxs("button", {
+					className: "vadm-user-row",
+					"data-active": u.id === selected?.id,
+					onClick: () => setSelectedId(u.id),
+					children: [
+						/* @__PURE__ */ jsx(UserAvatar, { user: u }),
+						/* @__PURE__ */ jsxs("span", {
+							className: "vadm-grow",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "vadm-user-name",
+								children: u.name || u.email
+							}), /* @__PURE__ */ jsx("span", {
+								className: "vadm-muted",
+								children: u.email
+							})]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "vadm-user-stats",
+							children: [/* @__PURE__ */ jsxs("span", { children: [u.projectCount, " apps"] }), /* @__PURE__ */ jsxs("span", { children: [u.activeSessionCount, " sessions"] })]
+						})
+					]
+				}, u.id))]
+			}), selected && /* @__PURE__ */ jsxs("div", {
+				className: "vadm-card vadm-inspector",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-row",
+						style: { alignItems: "flex-start" },
+						children: [
+							/* @__PURE__ */ jsx(UserAvatar, { user: selected }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "vadm-grow",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "vadm-h",
+									style: { marginBottom: 2 },
+									children: selected.name || selected.email
+								}), /* @__PURE__ */ jsx("div", {
+									className: "vadm-muted",
+									children: selected.email
+								})]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "vadm-badge",
+								"data-on": selected.emailVerified ? "true" : void 0,
+								children: selected.emailVerified ? "verified" : "unverified"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-metrics",
+						children: [
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: selected.projectCount }), /* @__PURE__ */ jsx("span", { children: "apps" })] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: selected.ownedProjectCount }), /* @__PURE__ */ jsx("span", { children: "owned" })] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: selected.activeSessionCount }), /* @__PURE__ */ jsx("span", { children: "sessions" })] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: selected.flagOverrideCount }), /* @__PURE__ */ jsx("span", { children: "flags" })] })
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-kv",
+						children: [
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "User ID" }), /* @__PURE__ */ jsx("code", { children: selected.id })] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Joined" }), /* @__PURE__ */ jsx("strong", { children: fmtTime(selected.createdAt) })] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Updated" }), /* @__PURE__ */ jsx("strong", { children: fmtTime(selected.updatedAt) })] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Plan" }), /* @__PURE__ */ jsx("strong", { children: balance ? balance.plan : balanceError ? "Unavailable" : "Loading..." })] }),
+							balance && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Balance" }), /* @__PURE__ */ jsxs("strong", { children: ["$", balance.balanceUsd.toFixed(2)] })] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "App credits" }), /* @__PURE__ */ jsxs("strong", { children: ["$", balance.appCreditsUsd.toFixed(2)] })] })] })
+						]
+					}),
+					/* @__PURE__ */ jsx(ErrorBanner, { error: balanceError })
+				]
+			})]
+		})
+	] });
+}
+const BUG_STATUSES = [
+	"open",
+	"triaged",
+	"in_progress",
+	"resolved",
+	"wont_fix"
+];
+const STATUS_LABEL = {
+	open: "Open",
+	triaged: "Triaged",
+	in_progress: "In progress",
+	resolved: "Resolved",
+	wont_fix: "Won't fix"
+};
+const OPEN_STATUSES = new Set([
+	"open",
+	"triaged",
+	"in_progress"
+]);
+function fmtTime(ms) {
+	try {
+		return new Date(ms).toLocaleString();
+	} catch {
+		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;
+	try {
+		const u = new URL(v);
+		if (u.protocol !== "http:" && u.protocol !== "https:") return void 0;
+		const host = u.hostname.toLowerCase();
+		return STORAGE_HOSTS.some((h) => host === h || host.endsWith("." + h)) ? v : void 0;
+	} catch {
+		return;
+	}
+}
+function ReportsPanel({ client }) {
+	const [reports, setReports] = useState(null);
+	const [counts, setCounts] = useState({});
+	const [filter, setFilter] = useState("all");
+	const [selectedId, setSelectedId] = useState(null);
+	const [detail, setDetail] = useState(null);
+	const [error, setError] = useState(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();
+		load();
+	}, [load]);
+	const openDetail = useCallback(async (id) => {
+		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) {
+		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 /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("p", {
+			className: "vadm-sub",
+			children: [
+				"User-submitted bug reports. Each carries the context to ",
+				/* @__PURE__ */ jsx("strong", { children: "recover" }),
+				" — open or fork the exact app version the reporter saw. ",
+				totalOpen,
+				" open."
+			]
+		}),
+		/* @__PURE__ */ jsx(ErrorBanner, { error }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "vadm-row",
+			style: {
+				marginBottom: 12,
+				gap: 6,
+				flexWrap: "wrap"
+			},
+			children: [/* @__PURE__ */ jsx("button", {
+				className: "vadm-tab",
+				"data-active": filter === "all",
+				onClick: () => setFilter("all"),
+				children: "All"
+			}), BUG_STATUSES.map((s) => /* @__PURE__ */ jsxs("button", {
+				className: "vadm-tab",
+				"data-active": filter === s,
+				onClick: () => setFilter(s),
+				children: [
+					STATUS_LABEL[s],
+					" ",
+					counts[s] ? `(${counts[s]})` : ""
+				]
+			}, s))]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "vadm-spread",
+			style: {
+				alignItems: "flex-start",
+				gap: 16
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "vadm-grow",
+				style: { minWidth: 0 },
+				children: reports === null ? /* @__PURE__ */ jsx("div", {
+					className: "vadm-empty",
+					children: "Loading…"
+				}) : reports.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "vadm-empty",
+					children: "No reports."
+				}) : /* @__PURE__ */ jsxs("table", {
+					className: "vadm-table",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", { children: "Title" }),
+						/* @__PURE__ */ jsx("th", { children: "Sev" }),
+						/* @__PURE__ */ jsx("th", { children: "Status" }),
+						/* @__PURE__ */ jsx("th", { children: "Reporter" }),
+						/* @__PURE__ */ jsx("th", { children: "When" })
+					] }) }), /* @__PURE__ */ jsx("tbody", { children: reports.map((r) => /* @__PURE__ */ jsxs("tr", {
+						onClick: () => openDetail(r.id),
+						style: {
+							cursor: "pointer",
+							fontWeight: r.id === selectedId ? 600 : void 0
+						},
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								style: {
+									maxWidth: 260,
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap"
+								},
+								children: r.title
+							}),
+							/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", {
+								className: "vadm-badge",
+								"data-on": r.severity === "critical" || r.severity === "high" ? "true" : void 0,
+								children: r.severity
+							}) }),
+							/* @__PURE__ */ jsx("td", { children: STATUS_LABEL[r.status] }),
+							/* @__PURE__ */ jsxs("td", {
+								className: "vadm-muted",
+								children: [r.reporterEmail ?? "—", r.reporterEmail && !r.reporterUserId && /* @__PURE__ */ jsx("span", {
+									className: "vadm-badge",
+									style: { marginLeft: 6 },
+									title: "Self-reported email — not verified",
+									children: "unverified"
+								})]
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "vadm-muted",
+								children: fmtTime(r.createdAt)
+							})
+						]
+					}, r.id)) })]
+				})
+			}), detail && /* @__PURE__ */ jsxs("div", {
+				className: "vadm-detail vadm-card",
+				style: {
+					width: 360,
+					flexShrink: 0
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							border: "1px solid #f0d8a8",
+							background: "#fffaf0",
+							borderRadius: 8,
+							padding: "8px 10px",
+							margin: "0 0 12px"
+						},
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "vadm-muted",
+								style: {
+									fontSize: 11,
+									marginBottom: 4,
+									textTransform: "uppercase",
+									letterSpacing: .4
+								},
+								children: "Reported text · untrusted input"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "vadm-h",
+								style: { margin: "0 0 4px" },
+								children: detail.title
+							}),
+							/* @__PURE__ */ jsx("p", {
+								style: {
+									whiteSpace: "pre-wrap",
+									wordBreak: "break-word",
+									margin: 0
+								},
+								children: detail.body || /* @__PURE__ */ jsx("em", {
+									className: "vadm-muted",
+									children: "No description."
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-field",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "vadm-label",
+							children: "Status"
+						}), /* @__PURE__ */ jsx("select", {
+							className: "vadm-select",
+							value: detail.status,
+							disabled: busy,
+							onChange: (e) => mutate(() => client.setReportStatus(detail.id, e.target.value)),
+							children: BUG_STATUSES.map((s) => /* @__PURE__ */ jsx("option", {
+								value: s,
+								children: STATUS_LABEL[s]
+							}, s))
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-field",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "vadm-label",
+							children: "Recover context"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "vadm-mono",
+							style: {
+								fontSize: 12,
+								lineHeight: 1.6
+							},
+							children: [
+								detail.slug ? /* @__PURE__ */ jsxs("div", { children: [
+									"app:",
+									" ",
+									/* @__PURE__ */ jsx("a", {
+										href: `https://omg.dev/${detail.slug}`,
+										target: "_blank",
+										rel: "noreferrer",
+										children: detail.slug
+									}),
+									detail.version != null ? ` · v${detail.version}` : ""
+								] }) : /* @__PURE__ */ jsx("div", {
+									className: "vadm-muted",
+									children: "no app linked"
+								}),
+								detail.snapshotId && /* @__PURE__ */ jsxs("div", { children: ["snapshot: ", detail.snapshotId] }),
+								detail.runId && /* @__PURE__ */ jsxs("div", { children: ["run: ", detail.runId] }),
+								detail.pageUrl && /* @__PURE__ */ jsxs("div", {
+									style: {
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap"
+									},
+									children: [
+										"page:",
+										" ",
+										safeHref(detail.pageUrl) ? /* @__PURE__ */ jsx("a", {
+											href: detail.pageUrl,
+											target: "_blank",
+											rel: "noreferrer",
+											children: detail.pageUrl
+										}) : /* @__PURE__ */ jsx("span", { children: detail.pageUrl })
+									]
+								})
+							]
+						})]
+					}),
+					detail.slug && /* @__PURE__ */ jsxs("div", {
+						className: "vadm-row",
+						style: {
+							gap: 6,
+							marginBottom: 8
+						},
+						children: [/* @__PURE__ */ jsx("a", {
+							className: "vadm-btn vadm-btn-sm",
+							href: `https://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`,
+							target: "_blank",
+							rel: "noreferrer",
+							children: "Inspect"
+						})]
+					}),
+					(() => {
+						const ctx = detail.context;
+						const url = safeImageSrc(ctx?.screenshotUrl) ?? null;
+						return url ? /* @__PURE__ */ jsxs("div", {
+							className: "vadm-field",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: "vadm-label",
+								children: "Screenshot"
+							}), /* @__PURE__ */ jsx("a", {
+								href: url,
+								target: "_blank",
+								rel: "noreferrer",
+								children: /* @__PURE__ */ jsx("img", {
+									src: url,
+									alt: "screenshot",
+									style: {
+										width: "100%",
+										maxHeight: 200,
+										objectFit: "cover",
+										borderRadius: 8,
+										border: "1px solid #eee"
+									}
+								})
+							})]
+						}) : null;
+					})(),
+					detail.context != null && /* @__PURE__ */ jsxs("div", {
+						className: "vadm-field",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "vadm-label",
+							children: "Diagnostics"
+						}), /* @__PURE__ */ jsx("pre", {
+							className: "vadm-mono",
+							style: {
+								fontSize: 11,
+								maxHeight: 160,
+								overflow: "auto",
+								margin: 0
+							},
+							children: JSON.stringify(detail.context, null, 2)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-field",
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								className: "vadm-label",
+								children: "Triage note"
+							}),
+							/* @__PURE__ */ jsx("textarea", {
+								className: "vadm-textarea",
+								rows: 3,
+								value: note,
+								onChange: (e) => setNote(e.target.value),
+								disabled: busy
+							}),
+							/* @__PURE__ */ jsx("button", {
+								className: "vadm-btn vadm-btn-sm",
+								disabled: busy || note === (detail.adminNotes ?? ""),
+								onClick: () => mutate(() => client.addReportNote(detail.id, note)),
+								style: { marginTop: 6 },
+								children: "Save note"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "vadm-spread",
+						style: { marginTop: 12 },
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "vadm-muted",
+							style: { fontSize: 12 },
+							children: [detail.reporterEmail ?? "anonymous", detail.reporterEmail && !detail.reporterUserId && " · unverified"]
+						}), /* @__PURE__ */ jsx("button", {
+							className: "vadm-btn vadm-btn-sm",
+							disabled: busy,
+							onClick: () => {
+								if (confirm("Delete this report?")) mutate(() => client.removeReport(detail.id).then(() => {
+									setDetail(null);
+									setSelectedId(null);
+								}));
+							},
+							children: "Delete"
+						})]
+					})
+				]
+			})]
+		})
+	] });
+}
+const DEFAULT_PANELS = [
+	{
+		id: "flags",
+		label: "Flags",
+		render: (c) => /* @__PURE__ */ jsx(FlagsPanel, { client: c })
+	},
+	{
+		id: "users",
+		label: "Users",
+		render: (c) => /* @__PURE__ */ jsx(UsersPanel, { client: c })
+	},
+	{
+		id: "reports",
+		label: "Reports",
+		render: (c) => /* @__PURE__ */ jsx(ReportsPanel, { client: c })
+	},
+	{
+		id: "pricing",
+		label: "Pricing",
+		render: (c) => /* @__PURE__ */ jsx(PricingPanel, { client: c })
+	}
+];
+function AdminConsole({ client, config, panels = DEFAULT_PANELS }) {
+	const resolved = useMemo(() => client ?? (config ? new AdminClient(config) : null), [client, config]);
+	const [active, setActive] = useState(panels[0]?.id);
+	useEffect(() => {
+		ensureStyles();
+	}, []);
+	if (!resolved) return /* @__PURE__ */ jsx("div", {
+		className: "vadm",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "vadm-err",
+			children: "AdminConsole requires a `client` or `config` prop."
+		})
+	});
+	const current = panels.find((p) => p.id === active) ?? panels[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vadm",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "vadm-tabs",
+			children: panels.map((p) => /* @__PURE__ */ jsx("button", {
+				className: "vadm-tab",
+				"data-active": p.id === current?.id,
+				onClick: () => setActive(p.id),
+				children: p.label
+			}, p.id))
+		}), current?.render(resolved)]
+	});
+}
+//#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 };