@omg-dev/admin 0.4.24

package/src/server.ts

@@ -0,0 +1,83 @@
+// @omg-dev/admin/server — mountable backend proxy for the admin console.
+//
+// The admin console must NOT hold the omg control-plane token in the browser.
+// Instead the HOST APP's backend mounts this proxy: the browser calls a
+// same-origin path (default "/_omg/..."), and the proxy injects the admin
+// bearer token SERVER-SIDE and forwards to the control-plane. The token lives
+// in the host's server env, never in the client bundle.
+//
+// Web-standard handler (Request → Response) so it drops into Bun.serve, the
+// Fetch API, Hono, Next route handlers, etc. Returns `null` when the path is
+// outside the mount prefix, so the host can fall through to its own routes:
+//
+//   import { createOmgAdminProxy } from "@omg-dev/admin/server"
+//   const omgAdmin = createOmgAdminProxy({ token: process.env.OMG_ADMIN_TOKEN! })
+//   // inside fetch(req):
+//   const res = await omgAdmin(req); if (res) return res;
+//
+// Then point the console at the mount: <AdminConsole config={{ apiBase: "/_omg",
+// getToken: () => null }} /> — auth is added by the proxy, not the client.
+
+export interface OmgAdminProxyOptions {
+  /** omg admin bearer JWT (an auth.omg.dev token for an allowlisted admin). */
+  token: string;
+  /** Control-plane origin. Default https://backend.omg.dev. */
+  target?: string;
+  /** Same-origin mount prefix the console's apiBase points at. Default "/_omg". */
+  prefix?: string;
+}
+
+// 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/"];
+
+function json(body: unknown, status: number): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json", "cache-control": "no-store" },
+  });
+}
+
+export function createOmgAdminProxy(opts: OmgAdminProxyOptions) {
+  const target = (opts.target ?? "https://backend.omg.dev").replace(/\/$/, "");
+  const prefix = opts.prefix ?? "/_omg";
+
+  return async function handle(req: Request): Promise<Response | null> {
+    const url = new URL(req.url);
+    if (url.pathname !== prefix && !url.pathname.startsWith(prefix + "/")) {
+      return null; // not ours — host falls through
+    }
+    if (!opts.token) return json({ error: "omg admin token not configured" }, 503);
+
+    const upstreamPath = url.pathname.slice(prefix.length); // e.g. "/api/flags/listFlags"
+    if (!ALLOWED.some((p) => upstreamPath.startsWith(p))) {
+      return json({ error: "forbidden path" }, 403);
+    }
+
+    const init: RequestInit = {
+      method: req.method,
+      headers: {
+        "content-type": req.headers.get("content-type") ?? "application/json",
+        authorization: `Bearer ${opts.token}`,
+      },
+      signal: AbortSignal.timeout(30_000),
+    };
+    if (req.method !== "GET" && req.method !== "HEAD") {
+      init.body = await req.text();
+    }
+
+    try {
+      const r = await fetch(`${target}${upstreamPath}${url.search}`, init);
+      return new Response(r.body, {
+        status: r.status,
+        headers: {
+          "content-type": r.headers.get("content-type") ?? "application/json",
+          "cache-control": "no-store",
+        },
+      });
+    } catch {
+      return json({ error: "omg control-plane unreachable" }, 502);
+    }
+  };
+}

package/src/standalone.tsx

@@ -0,0 +1,25 @@
+// @omg-dev/admin/standalone — run the console as its own app.
+//
+// The SAME <AdminConsole/> embedded as a tab elsewhere, but with a tiny shell
+// that mounts it into a DOM node. The host still supplies auth (apiBase +
+// getToken) — standalone just means "this is the whole page", not "no auth".
+//
+//   import { mountAdminConsole } from "@omg-dev/admin/standalone"
+//   mountAdminConsole(document.getElementById("root")!, {
+//     apiBase: "https://backend.omg.dev",
+//     getToken: async () => myAuth.getToken(),
+//   })
+
+import { createRoot, type Root } from "react-dom/client"
+import { createElement } from "react"
+import { AdminConsole } from "./react"
+import { AdminClient, type AdminClientConfig } from "./client"
+
+export function mountAdminConsole(el: HTMLElement, config: AdminClientConfig): Root {
+  const root = createRoot(el)
+  root.render(createElement(AdminConsole, { client: new AdminClient(config) }))
+  return root
+}
+
+export { AdminConsole, AdminClient }
+export type { AdminClientConfig }

package/src/styles.ts

@@ -0,0 +1,200 @@
+// @omg-dev/admin — self-contained stylesheet, injected once at first mount.
+//
+// Same reasoning as @omg-dev/pwa: Tailwind v4 does not scan
+// node_modules, so utility classes shipped from an npm package only render by
+// luck. This panel ships one `<style>` tag of plain, namespaced (`.vadm-*`)
+// CSS. Colors read the host's shadcn CSS variables first (--background,
+// --foreground, --border, --primary, --muted-foreground) and fall back to
+// neutral defaults with a prefers-color-scheme dark variant — so the console
+// looks native embedded in a themed app and presentable in a bare one.
+
+export const STYLE_ID = "vibes-admin-styles"
+
+export function ensureStyles() {
+  if (typeof document === "undefined") return
+  if (document.getElementById(STYLE_ID)) 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; }
+}
+`