@fonderie/react-admin-screens 1.0.2 → 1.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.tsx
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/react-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/react-courier-admin-screens";
-import { useState as useState5 } from "react";
+import { useEffect, useState as useState7 } from "react";
 
 // src/styles.ts
 var t = {
@@ -23,6 +23,31 @@ var t = {
   trackingDisplay: "var(--fonderie-tracking-display,-0.05em)",
   shadowCard: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
 };
+var tint = (token, pct) => `color-mix(in srgb, ${token} ${pct}%, transparent)`;
+var toneColor = {
+  ok: t.accentStrong,
+  bad: t.danger,
+  // Amber on white fails contrast; mixing in the text colour darkens it in
+  // light mode and lightens it in dark, from the same two tokens.
+  warn: `color-mix(in srgb, ${t.warning} 70%, ${t.text})`,
+  neutral: t.muted,
+  info: t.text
+};
+var control = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  height: 32,
+  boxSizing: "border-box",
+  borderRadius: 6,
+  padding: "0 12px",
+  fontSize: 13,
+  fontWeight: 500,
+  fontFamily: "inherit",
+  lineHeight: 1,
+  whiteSpace: "nowrap"
+};
 var styles = {
   shell: {
     display: "flex",
@@ -31,155 +56,578 @@ var styles = {
     color: t.text,
     background: t.bg
   },
-  // The sidebar sits on the raised surface against the page canvas, which is
-  // what separates the two without a heavy rule between them.
+  // Sticky, full height, scrolls on its own: the nav never scrolls away with
+  // a long table, and the footer (session controls) stays in reach.
   nav: {
-    width: 220,
-    borderRight: `1px solid ${t.border}`,
-    padding: 16,
+    width: 248,
     flexShrink: 0,
-    background: t.surface
+    boxSizing: "border-box",
+    borderRight: `1px solid ${t.border}`,
+    background: t.surface,
+    position: "sticky",
+    top: 0,
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column"
   },
+  navBrand: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "18px 16px 14px",
+    borderBottom: `1px solid ${t.borderLight}`
+  },
+  navMark: {
+    width: 28,
+    height: 28,
+    borderRadius: 7,
+    background: t.text,
+    color: t.surface,
+    display: "grid",
+    placeItems: "center",
+    flexShrink: 0
+  },
+  navBrandTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    letterSpacing: t.trackingDisplay,
+    lineHeight: 1.2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  navScroll: { flex: 1, overflowY: "auto", padding: "8px 10px 16px" },
   navGroup: {
     fontSize: 11,
     textTransform: "uppercase",
     letterSpacing: 0.6,
     color: t.muted,
-    margin: "16px 0 6px",
+    margin: "16px 8px 4px",
     fontWeight: 600
   },
   navItem: {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
     width: "100%",
     textAlign: "left",
     background: "none",
     border: "none",
-    borderRadius: t.radius,
-    padding: "6px 8px",
+    borderRadius: 6,
+    padding: "7px 8px",
     cursor: "pointer",
-    fontSize: 14,
-    color: t.text,
-    fontFamily: "inherit"
+    fontSize: 13.5,
+    fontWeight: 500,
+    color: t.muted,
+    fontFamily: "inherit",
+    position: "relative"
+  },
+  navItemActive: { background: tint(t.accent, 12), color: t.text, fontWeight: 600 },
+  navIconActive: { color: t.accentStrong },
+  navFooter: {
+    borderTop: `1px solid ${t.borderLight}`,
+    padding: 12,
+    display: "flex",
+    flexDirection: "column",
+    gap: 10
+  },
+  // Phone layout: a top bar with the menu button replaces the sidebar, which
+  // opens as a drawer over the content.
+  topbar: {
+    position: "sticky",
+    top: 0,
+    zIndex: 20,
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "10px 16px",
+    background: t.surface,
+    borderBottom: `1px solid ${t.border}`
+  },
+  drawer: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 30,
+    display: "flex"
+  },
+  scrim: { flex: 1, background: "rgba(0,0,0,.35)" },
+  main: { flex: 1, minWidth: 0 },
+  container: { padding: "32px 40px 64px", maxWidth: 1160, boxSizing: "border-box" },
+  // ── page header ──
+  header: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 16,
+    marginBottom: 24,
+    flexWrap: "wrap"
   },
-  navItemActive: { background: t.surfaceAlt, fontWeight: 600, color: t.accentStrong },
-  main: { flex: 1, padding: 24, maxWidth: 960 },
-  container: { padding: 24, maxWidth: 960 },
   title: {
-    fontSize: 20,
+    fontSize: 22,
     fontWeight: 600,
-    marginTop: 0,
-    marginBottom: 12,
-    letterSpacing: t.trackingDisplay
+    margin: 0,
+    letterSpacing: t.trackingDisplay,
+    lineHeight: 1.25
   },
+  lead: { color: t.muted, fontSize: 13.5, margin: "4px 0 0", lineHeight: 1.5 },
+  actions: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
   subtitle: {
     fontSize: 15,
     fontWeight: 600,
-    marginTop: 24,
-    marginBottom: 8,
-    letterSpacing: t.trackingDisplay
+    marginTop: 32,
+    marginBottom: 10,
+    letterSpacing: t.trackingDisplay,
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  // ── feedback ──
+  status: { padding: "24px 0", color: t.muted, fontSize: 13.5 },
+  error: {
+    color: t.danger,
+    background: tint(t.danger, 8),
+    border: `1px solid ${tint(t.danger, 25)}`,
+    borderRadius: t.radiusLg,
+    padding: "10px 14px",
+    marginBottom: 16,
+    fontSize: 13.5
+  },
+  notice: {
+    color: t.text,
+    background: tint(t.warning, 10),
+    border: `1px solid ${tint(t.warning, 35)}`,
+    borderRadius: t.radiusLg,
+    padding: "10px 14px",
+    marginBottom: 16,
+    fontSize: 13.5
   },
-  status: { padding: 12, color: t.muted },
-  error: { color: t.danger, marginBottom: 12, fontSize: 14 },
   ok: { color: t.accentStrong, fontWeight: 600 },
   bad: { color: t.danger, fontWeight: 600 },
   advice: { color: t.warning },
   muted: { color: t.muted, fontSize: 13 },
-  mono: { fontFamily: t.mono, fontSize: 13 },
-  table: { width: "100%", borderCollapse: "collapse", fontSize: 14 },
+  mono: { fontFamily: t.mono, fontSize: 12.5 },
+  code: {
+    fontFamily: t.mono,
+    fontSize: 12,
+    background: t.surfaceAlt,
+    border: `1px solid ${t.borderLight}`,
+    borderRadius: 4,
+    padding: "1px 5px"
+  },
+  // ── surfaces ──
+  // Tables and lists are cards themselves, so every screen gets the framed,
+  // rounded look without wrapping each one. The last row's rule is removed in
+  // the shell stylesheet (a pseudo-selector); embedded without the shell it
+  // simply doubles against the frame.
+  table: {
+    width: "100%",
+    borderCollapse: "separate",
+    borderSpacing: 0,
+    fontSize: 13.5,
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    overflow: "hidden",
+    boxShadow: t.shadowCard
+  },
   th: {
     textAlign: "left",
     borderBottom: `1px solid ${t.border}`,
-    padding: "6px 8px",
+    padding: "9px 14px",
     fontWeight: 600,
-    color: t.muted
+    fontSize: 11.5,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    color: t.muted,
+    background: t.surfaceAlt,
+    whiteSpace: "nowrap"
+  },
+  td: {
+    borderBottom: `1px solid ${t.borderLight}`,
+    padding: "11px 14px",
+    verticalAlign: "top"
+  },
+  list: {
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    overflow: "hidden",
+    boxShadow: t.shadowCard
+  },
+  row: { borderBottom: `1px solid ${t.borderLight}`, padding: "12px 16px" },
+  card: {
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    padding: 16,
+    boxShadow: t.shadowCard
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+    gap: 12,
+    marginBottom: 24
+  },
+  statLabel: { fontSize: 12, color: t.muted, fontWeight: 500 },
+  statValue: {
+    fontSize: 26,
+    fontWeight: 600,
+    letterSpacing: t.trackingDisplay,
+    lineHeight: 1.2,
+    marginTop: 6
+  },
+  statHint: { fontSize: 12, color: t.muted, marginTop: 2 },
+  empty: {
+    background: t.surface,
+    border: `1px dashed ${t.border}`,
+    borderRadius: t.radiusLg,
+    padding: "40px 24px",
+    textAlign: "center",
+    color: t.muted,
+    fontSize: 13.5
+  },
+  emptyTitle: { color: t.text, fontWeight: 600, fontSize: 14.5, margin: "10px 0 4px" },
+  dl: { display: "grid", gridTemplateColumns: "160px 1fr", margin: 0 },
+  dt: {
+    color: t.muted,
+    fontSize: 13,
+    padding: "10px 16px",
+    borderBottom: `1px solid ${t.borderLight}`
+  },
+  dd: {
+    margin: 0,
+    padding: "10px 16px",
+    borderBottom: `1px solid ${t.borderLight}`,
+    fontSize: 13.5,
+    minWidth: 0
   },
-  td: { borderBottom: `1px solid ${t.borderLight}`, padding: "6px 8px", verticalAlign: "top" },
-  list: { listStyle: "none", padding: 0, margin: 0 },
-  row: { borderBottom: `1px solid ${t.borderLight}`, padding: "8px 0" },
   badge: {
-    display: "inline-block",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 5,
     borderRadius: 999,
-    padding: "1px 8px",
-    fontSize: 12,
+    padding: "2px 8px",
+    fontSize: 11.5,
+    fontWeight: 500,
+    lineHeight: 1.5,
     background: t.surfaceAlt,
     border: `1px solid ${t.border}`,
-    color: t.muted
+    color: t.muted,
+    whiteSpace: "nowrap"
+  },
+  pill: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 999,
+    padding: "2px 9px 2px 8px",
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 1.5,
+    whiteSpace: "nowrap",
+    verticalAlign: "baseline"
   },
+  dot: { width: 6, height: 6, borderRadius: 999, flexShrink: 0, background: "currentColor" },
+  // ── controls ──
   button: {
+    ...control,
     background: t.surface,
     border: `1px solid ${t.border}`,
-    borderRadius: t.radius,
-    padding: "4px 10px",
-    cursor: "pointer",
-    fontSize: 13,
     color: t.text,
-    fontFamily: "inherit",
+    cursor: "pointer",
     boxShadow: t.shadowCard
   },
-  toolbar: { display: "flex", gap: 8, alignItems: "center", marginBottom: 12 },
-  // Surfaces the screens compose themselves, kept here so a card looks the
-  // same on every page rather than being re-invented per screen.
-  card: {
+  buttonPrimary: {
+    ...control,
+    background: t.text,
+    border: `1px solid ${t.text}`,
+    color: t.surface,
+    cursor: "pointer"
+  },
+  buttonDanger: {
+    ...control,
     background: t.surface,
+    border: `1px solid ${tint(t.danger, 40)}`,
+    color: t.danger,
+    cursor: "pointer"
+  },
+  buttonGhost: {
+    ...control,
+    background: "none",
+    border: "1px solid transparent",
+    color: t.muted,
+    cursor: "pointer",
+    padding: "0 8px"
+  },
+  link: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    color: t.text,
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    fontWeight: 500,
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  input: {
+    height: 32,
+    boxSizing: "border-box",
     border: `1px solid ${t.border}`,
-    borderRadius: t.radiusLg,
-    padding: 16,
-    boxShadow: t.shadowCard
+    borderRadius: 6,
+    padding: "0 10px",
+    fontSize: 13.5,
+    fontFamily: "inherit",
+    background: t.surface,
+    color: t.text,
+    minWidth: 0
   },
+  toolbar: { display: "flex", gap: 8, alignItems: "center", marginBottom: 16, flexWrap: "wrap" },
   accent: { color: t.accent }
 };
 
+// src/icons.ts
+var ICONS = {
+  attention: ["M22 12h-4l-3 9L9 3l-3 9H2"],
+  modules: [
+    "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",
+    "M3.3 7 12 12l8.7-5",
+    "M12 22V12"
+  ],
+  environment: [
+    "M4 21v-7",
+    "M4 10V3",
+    "M12 21v-9",
+    "M12 8V3",
+    "M20 21v-5",
+    "M20 12V3",
+    "M1 14h6",
+    "M9 8h6",
+    "M17 16h6"
+  ],
+  doctor: [
+    "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+  ],
+  routes: [
+    "M6 3v12",
+    "M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    "M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    "M18 9a9 9 0 0 1-9 9"
+  ],
+  users: [
+    "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
+    "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+    "M22 21v-2a4 4 0 0 0-3-3.87",
+    "M16 3.13a4 4 0 0 1 0 7.75"
+  ],
+  catalog: [
+    "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z",
+    "M7.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
+  ],
+  subscriber: ["M2 7h20v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z", "M2 11h20", "M6 15h4"],
+  settings: [
+    "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
+    "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+  ],
+  templates: [
+    "M22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",
+    "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
+  ],
+  audit: ["M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", "M9 12l2 2 4-4"],
+  log: ["M12 8v4l3 3", "M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"],
+  tokens: [
+    "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z",
+    "M16.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
+  ],
+  migrations: [
+    "M12 22c4.97 0 9-1.79 9-4V6",
+    "M3 6v12c0 2.21 4.03 4 9 4",
+    "M12 10c4.97 0 9-1.79 9-4s-4.03-4-9-4-9 1.79-9 4 4.03 4 9 4z",
+    "M3 12c0 2.21 4.03 4 9 4s9-1.79 9-4"
+  ],
+  menu: ["M4 6h16", "M4 12h16", "M4 18h16"],
+  close: ["M18 6 6 18", "m6 6 12 12"],
+  refresh: [
+    "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
+    "M21 3v5h-5",
+    "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",
+    "M8 16H3v5"
+  ],
+  check: ["M20 6 9 17l-5-5"],
+  alert: [
+    "M12 9v4",
+    "M12 17h.01",
+    "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+  ],
+  search: ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "m21 21-4.3-4.3"],
+  back: ["m12 19-7-7 7-7", "M19 12H5"],
+  logout: ["M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", "m16 17 5-5-5-5", "M21 12H9"],
+  lock: [
+    "M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z",
+    "M7 11V7a5 5 0 0 1 10 0v4"
+  ],
+  plus: ["M12 5v14", "M5 12h14"],
+  mark: [
+    "M4 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
+    "M15 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
+    "M15 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z",
+    "M4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z"
+  ]
+};
+
+// src/ui.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Icon({
+  name,
+  size = 16,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0, ...style },
+      children: ICONS[name].map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+    }
+  );
+}
+function PageHeader({
+  title,
+  lead,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+    /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx("h1", { style: styles.title, children: title }),
+      lead ? /* @__PURE__ */ jsx("p", { style: styles.lead, children: lead }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { style: styles.actions, children: actions }) : null
+  ] });
+}
+function Pill({
+  tone,
+  children,
+  dot = true
+}) {
+  const color = toneColor[tone];
+  return /* @__PURE__ */ jsxs("span", { style: { ...styles.pill, color, background: tint(color, tone === "neutral" ? 10 : 13) }, children: [
+    dot ? /* @__PURE__ */ jsx("span", { style: styles.dot }) : null,
+    children
+  ] });
+}
+function Stat({
+  label,
+  value,
+  hint,
+  tone
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: styles.card, children: [
+    /* @__PURE__ */ jsx("div", { style: styles.statLabel, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { ...styles.statValue, ...tone ? { color: toneColor[tone] } : {} }, children: value }),
+    hint ? /* @__PURE__ */ jsx("div", { style: styles.statHint, children: hint }) : null
+  ] });
+}
+function Empty({
+  icon = "check",
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: styles.empty, children: [
+    /* @__PURE__ */ jsx(Icon, { name: icon, size: 22 }),
+    /* @__PURE__ */ jsx("div", { style: styles.emptyTitle, children: title }),
+    children ? /* @__PURE__ */ jsx("div", { children }) : null
+  ] });
+}
+function RefreshButton({
+  onClick,
+  busy,
+  label = "Refresh"
+}) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", style: styles.button, onClick, disabled: busy, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "refresh", size: 14 }),
+    busy ? "Working\u2026" : label
+  ] });
+}
+function MethodChip({ method }) {
+  const tone = method === "GET" ? "ok" : method === "DELETE" ? "bad" : method === "POST" ? "info" : "warn";
+  const color = toneColor[tone];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        ...styles.mono,
+        fontSize: 11,
+        fontWeight: 700,
+        color,
+        background: tint(color, 12),
+        borderRadius: 4,
+        padding: "2px 6px",
+        display: "inline-block",
+        minWidth: 44,
+        textAlign: "center"
+      },
+      children: method
+    }
+  );
+}
+
 // src/screens/AdminLogScreen.tsx
 import { useAdminLog } from "@fonderie/react-admin";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function AdminLogScreen({ client, pageSize = 50 }) {
   const { entries, hasMore, isLoading, error, refresh, loadMore } = useAdminLog(client, {
     limit: pageSize
   });
-  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles.toolbar, children: [
-      /* @__PURE__ */ jsx("h1", { style: { ...styles.title, marginBottom: 0 }, children: "Admin log" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          style: styles.button,
-          onClick: () => void refresh(),
-          disabled: isLoading,
-          children: "Refresh"
-        }
-      )
-    ] }),
-    error ? /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: error.status === 404 ? "The admin log is off \u2014 give AdminModule a store." : error.explanation }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { style: styles.th, children: "When" }),
-          /* @__PURE__ */ jsx("th", { style: styles.th, children: "Actor" }),
-          /* @__PURE__ */ jsx("th", { style: styles.th, children: "Request" }),
-          /* @__PURE__ */ jsx("th", { style: styles.th, children: "Status" }),
-          /* @__PURE__ */ jsx("th", { style: styles.th, children: "Module" })
+  return /* @__PURE__ */ jsxs2("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx2(
+      PageHeader,
+      {
+        title: "Admin log",
+        lead: "Every request made through this surface, newest first \u2014 refused ones included.",
+        actions: /* @__PURE__ */ jsx2(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
+      }
+    ),
+    error ? /* @__PURE__ */ jsx2("p", { style: styles.error, role: "alert", children: error.status === 404 ? "The admin log is off \u2014 give AdminModule a store." : error.explanation }) : entries.length === 0 && !isLoading ? /* @__PURE__ */ jsx2(Empty, { icon: "log", title: "No requests yet" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx2("th", { style: styles.th, children: "When" }),
+          /* @__PURE__ */ jsx2("th", { style: styles.th, children: "Actor" }),
+          /* @__PURE__ */ jsx2("th", { style: styles.th, children: "Request" }),
+          /* @__PURE__ */ jsx2("th", { style: styles.th, children: "Status" }),
+          /* @__PURE__ */ jsx2("th", { style: styles.th, children: "Module" })
         ] }) }),
-        /* @__PURE__ */ jsx("tbody", { children: entries.map((e) => /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.at).toLocaleString() }),
-          /* @__PURE__ */ jsx("td", { style: styles.td, children: e.actor }),
-          /* @__PURE__ */ jsxs("td", { style: { ...styles.td, ...styles.mono }, children: [
-            e.method,
+        /* @__PURE__ */ jsx2("tbody", { children: entries.map((e) => /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx2("td", { style: { ...styles.td, ...styles.muted, whiteSpace: "nowrap" }, children: new Date(e.at).toLocaleString() }),
+          /* @__PURE__ */ jsx2("td", { style: styles.td, children: e.actor }),
+          /* @__PURE__ */ jsxs2("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx2(MethodChip, { method: e.method }),
             " ",
-            e.path
+            /* @__PURE__ */ jsx2("span", { style: { ...styles.mono, wordBreak: "break-all" }, children: e.path })
           ] }),
-          /* @__PURE__ */ jsxs("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx("span", { style: e.status >= 400 ? styles.bad : styles.ok, children: e.status }),
+          /* @__PURE__ */ jsxs2("td", { style: { ...styles.td, whiteSpace: "nowrap" }, children: [
+            /* @__PURE__ */ jsx2(Pill, { tone: e.status >= 500 ? "bad" : e.status >= 400 ? "warn" : "ok", children: e.status }),
             " ",
-            /* @__PURE__ */ jsxs("span", { style: styles.muted, children: [
+            /* @__PURE__ */ jsxs2("span", { style: styles.muted, children: [
               e.durationMs,
               " ms"
             ] })
           ] }),
-          /* @__PURE__ */ jsx("td", { style: { ...styles.td, ...styles.muted }, children: e.module })
+          /* @__PURE__ */ jsx2("td", { style: { ...styles.td, ...styles.muted }, children: e.module })
         ] }, e.id)) })
       ] }),
-      isLoading ? /* @__PURE__ */ jsx("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      hasMore && !isLoading ? /* @__PURE__ */ jsx(
+      isLoading ? /* @__PURE__ */ jsx2("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      hasMore && !isLoading ? /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -193,180 +641,373 @@ function AdminLogScreen({ client, pageSize = 50 }) {
 }
 
 // src/screens/AttentionScreen.tsx
-import { useAttention } from "@fonderie/react-admin";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useAttention, useManifest } from "@fonderie/react-admin";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AttentionScreen({ client }) {
   const { attention, isLoading, error, refresh } = useAttention(client);
-  return /* @__PURE__ */ jsxs2("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxs2("div", { style: styles.toolbar, children: [
-      /* @__PURE__ */ jsx2("h1", { style: { ...styles.title, marginBottom: 0 }, children: "Attention" }),
-      /* @__PURE__ */ jsx2(
-        "button",
+  const { manifest } = useManifest(client);
+  const errors = attention?.items.filter((i) => i.severity === "error") ?? [];
+  const advice = attention?.items.filter((i) => i.severity !== "error") ?? [];
+  const ready = manifest?.modules.filter((m) => m.readiness.ok).length ?? 0;
+  const total = manifest?.modules.length ?? 0;
+  return /* @__PURE__ */ jsxs3("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx3(
+      PageHeader,
+      {
+        title: "Attention",
+        lead: attention ? `What needs you on this deployment \xB7 checked ${new Date(attention.generatedAt).toLocaleTimeString()}` : "What needs you on this deployment",
+        actions: /* @__PURE__ */ jsx3(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
+      }
+    ),
+    error ? /* @__PURE__ */ jsx3("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    /* @__PURE__ */ jsxs3("div", { style: styles.grid, children: [
+      /* @__PURE__ */ jsx3(
+        Stat,
         {
-          type: "button",
-          style: styles.button,
-          onClick: () => void refresh(),
-          disabled: isLoading,
-          children: "Refresh"
+          label: "Needs action",
+          value: attention ? errors.length : "\u2014",
+          tone: errors.length ? "bad" : attention ? "ok" : void 0,
+          hint: "errors to fix"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Stat,
+        {
+          label: "Advice",
+          value: attention ? advice.length : "\u2014",
+          tone: advice.length ? "warn" : void 0,
+          hint: "worth a look"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Stat,
+        {
+          label: "Modules ready",
+          value: manifest ? `${ready}/${total}` : "\u2014",
+          tone: manifest && ready < total ? "warn" : manifest ? "ok" : void 0,
+          hint: manifest ? `admin ${manifest.admin.version}` : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Stat,
+        {
+          label: "Routes",
+          value: manifest ? manifest.routes.length : "\u2014",
+          hint: manifest ? manifest.env : void 0
         }
       )
     ] }),
-    isLoading && !attention ? /* @__PURE__ */ jsx2("p", { style: styles.status, children: "Running the checks\u2026" }) : error ? /* @__PURE__ */ jsx2("p", { style: styles.error, role: "alert", children: error.explanation }) : attention?.items.length === 0 ? /* @__PURE__ */ jsxs2("p", { style: styles.ok, children: [
-      "Nothing needs you. Checked ",
+    isLoading && !attention ? /* @__PURE__ */ jsx3("p", { style: styles.status, children: "Running the checks\u2026" }) : attention && attention.items.length === 0 ? /* @__PURE__ */ jsxs3(Empty, { title: "Nothing needs you", children: [
+      "Every check passes. Checked ",
       new Date(attention.generatedAt).toLocaleString(),
       "."
-    ] }) : /* @__PURE__ */ jsx2("ul", { style: styles.list, children: attention?.items.map((item) => /* @__PURE__ */ jsxs2("li", { style: styles.row, children: [
-      /* @__PURE__ */ jsx2("span", { style: item.severity === "error" ? styles.bad : styles.advice, children: item.severity === "error" ? "error" : "advice" }),
-      " ",
-      /* @__PURE__ */ jsx2("span", { style: styles.mono, children: item.source }),
-      " \u2014 ",
-      item.message
-    ] }, `${item.source}:${item.message}`)) })
+    ] }) : /* @__PURE__ */ jsx3("ul", { style: styles.list, children: [...errors, ...advice].map((item) => /* @__PURE__ */ jsxs3(
+      "li",
+      {
+        style: { ...styles.row, display: "flex", gap: 12, alignItems: "flex-start" },
+        children: [
+          /* @__PURE__ */ jsx3(
+            Icon,
+            {
+              name: "alert",
+              size: 16,
+              style: {
+                marginTop: 3,
+                color: item.severity === "error" ? "var(--fonderie-danger,#e00)" : "var(--fonderie-warning,#f5a623)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { style: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: 8,
+                  alignItems: "center",
+                  flexWrap: "wrap",
+                  marginBottom: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(Pill, { tone: item.severity === "error" ? "bad" : "warn", children: item.severity === "error" ? "error" : "advice" }),
+                  /* @__PURE__ */ jsx3("span", { style: styles.mono, children: item.source })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { style: { lineHeight: 1.55 }, children: item.message })
+          ] })
+        ]
+      },
+      `${item.source}:${item.message}`
+    )) })
   ] });
 }
 
 // src/screens/EnvironmentScreen.tsx
 import { useAdminEnvironment } from "@fonderie/react-admin";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function EnvironmentScreen({ client }) {
   const { report, isLoading, error } = useAdminEnvironment(client);
-  return /* @__PURE__ */ jsxs3("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx3("h1", { style: styles.title, children: "Configuration" }),
-    isLoading ? /* @__PURE__ */ jsx3("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx3("p", { style: styles.error, role: "alert", children: error.explanation }) : report ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3("h2", { style: styles.subtitle, children: "Readiness" }),
-      /* @__PURE__ */ jsx3("ul", { style: styles.list, children: report.modules.map((m) => /* @__PURE__ */ jsxs3("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx3("span", { style: styles.mono, children: m.name }),
-        " ",
-        m.problems.length === 0 ? /* @__PURE__ */ jsx3("span", { style: styles.ok, children: "ok" }) : m.problems.map((p) => /* @__PURE__ */ jsx3(
+  const missing = report?.env.filter((e) => !e.set).length ?? 0;
+  return /* @__PURE__ */ jsxs4("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx4(
+      PageHeader,
+      {
+        title: "Environment",
+        lead: "Whether each module is configured and each variable the app reads is set. Values are never shown.",
+        actions: report && report.env.length > 0 ? /* @__PURE__ */ jsx4(Pill, { tone: missing ? "bad" : "ok", children: missing ? `${missing} missing` : "all set" }) : null
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx4("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx4("p", { style: styles.error, role: "alert", children: error.explanation }) : report ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Variables" }),
+      report.env.length === 0 ? /* @__PURE__ */ jsx4("p", { style: styles.muted, children: "No variables declared \u2014 pass `env` to AdminModule." }) : /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            ...styles.grid,
+            gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+            gap: 8
+          },
+          children: report.env.map((e) => /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                ...styles.card,
+                padding: "10px 12px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx4("span", { style: { ...styles.mono, wordBreak: "break-all" }, children: e.name }),
+                /* @__PURE__ */ jsx4(Pill, { tone: e.set ? "ok" : "bad", children: e.set ? "set" : "missing" })
+              ]
+            },
+            e.name
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx4("h2", { style: styles.subtitle, children: "Module readiness" }),
+      /* @__PURE__ */ jsx4("ul", { style: styles.list, children: report.modules.map((m) => /* @__PURE__ */ jsxs4("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsxs4(
           "div",
           {
-            style: p.severity === "error" ? styles.bad : styles.advice,
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              gap: 12,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx4("span", { style: { ...styles.mono, fontWeight: 600 }, children: m.name }),
+              /* @__PURE__ */ jsx4(
+                Pill,
+                {
+                  tone: m.problems.length === 0 ? "ok" : m.problems.some((p) => p.severity === "error") ? "bad" : "warn",
+                  children: m.problems.length === 0 ? "ready" : `${m.problems.length} problem${m.problems.length === 1 ? "" : "s"}`
+                }
+              )
+            ]
+          }
+        ),
+        m.problems.map((p) => /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              marginTop: 6,
+              fontSize: 13,
+              color: p.severity === "error" ? "var(--fonderie-danger,#e00)" : "var(--fonderie-text-muted,#5c5c5c)"
+            },
             children: p.message
           },
           p.message
         ))
-      ] }, m.name)) }),
-      /* @__PURE__ */ jsx3("h2", { style: styles.subtitle, children: "Environment" }),
-      report.env.length === 0 ? /* @__PURE__ */ jsx3("p", { style: styles.muted, children: "No variables declared \u2014 pass `env` to AdminModule." }) : /* @__PURE__ */ jsx3("ul", { style: styles.list, children: report.env.map((e) => /* @__PURE__ */ jsxs3("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx3("span", { style: styles.mono, children: e.name }),
-        " ",
-        e.set ? /* @__PURE__ */ jsx3("span", { style: styles.ok, children: "set" }) : /* @__PURE__ */ jsx3("span", { style: styles.bad, children: "missing" })
-      ] }, e.name)) })
+      ] }, m.name)) })
     ] }) : null
   ] });
 }
 
 // src/screens/DoctorScreen.tsx
 import { useDoctor } from "@fonderie/react-admin";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function DoctorScreen({ client }) {
   const { report, isLoading, error, refresh } = useDoctor(client);
-  return /* @__PURE__ */ jsxs4("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxs4("div", { style: styles.toolbar, children: [
-      /* @__PURE__ */ jsx4("h1", { style: { ...styles.title, marginBottom: 0 }, children: "Doctor" }),
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "button",
-          style: styles.button,
-          onClick: () => void refresh(),
-          disabled: isLoading,
-          children: "Run again"
-        }
-      ),
-      report && !isLoading ? /* @__PURE__ */ jsx4("span", { style: report.ok ? styles.ok : styles.bad, children: report.ok ? "all checks pass" : "a check failed" }) : null
-    ] }),
-    isLoading && !report ? /* @__PURE__ */ jsx4("p", { style: styles.status, children: "Running the checks\u2026" }) : error ? /* @__PURE__ */ jsx4("p", { style: styles.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsx4("ul", { style: styles.list, children: report?.checks.map((c) => /* @__PURE__ */ jsxs4("li", { style: styles.row, children: [
-      /* @__PURE__ */ jsx4("span", { style: c.skipped ? styles.muted : c.ok ? styles.ok : styles.bad, children: c.skipped ? "skipped" : c.ok ? "ok" : "failed" }),
-      " ",
-      /* @__PURE__ */ jsx4("span", { style: styles.mono, children: c.name }),
-      " ",
-      /* @__PURE__ */ jsxs4("span", { style: styles.muted, children: [
-        c.module,
-        " \xB7 ",
-        c.durationMs,
-        " ms"
-      ] }),
-      c.skipped ? /* @__PURE__ */ jsx4("div", { style: styles.muted, children: c.skipped }) : null,
-      c.findings.map((f) => /* @__PURE__ */ jsx4("div", { style: c.ok ? styles.advice : styles.bad, children: f }, f))
-    ] }, c.name)) })
+  return /* @__PURE__ */ jsxs5("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx5(
+      PageHeader,
+      {
+        title: "Doctor",
+        lead: "Every reconciliation check across the installed modules, run on demand.",
+        actions: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          report && !isLoading ? /* @__PURE__ */ jsx5(Pill, { tone: report.ok ? "ok" : "bad", children: report.ok ? "all checks pass" : "a check failed" }) : null,
+          /* @__PURE__ */ jsx5(RefreshButton, { onClick: () => void refresh(), busy: isLoading, label: "Run again" })
+        ] })
+      }
+    ),
+    isLoading && !report ? /* @__PURE__ */ jsx5("p", { style: styles.status, children: "Running the checks\u2026" }) : error ? /* @__PURE__ */ jsx5("p", { style: styles.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsxs5("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+        /* @__PURE__ */ jsx5("th", { style: { ...styles.th, width: 110 }, children: "Result" }),
+        /* @__PURE__ */ jsx5("th", { style: styles.th, children: "Check" }),
+        /* @__PURE__ */ jsx5("th", { style: { ...styles.th, textAlign: "right", width: 90 }, children: "Time" })
+      ] }) }),
+      /* @__PURE__ */ jsx5("tbody", { children: report?.checks.map((c) => /* @__PURE__ */ jsxs5("tr", { children: [
+        /* @__PURE__ */ jsx5("td", { style: styles.td, children: /* @__PURE__ */ jsx5(
+          Pill,
+          {
+            tone: c.skipped ? "neutral" : c.ok ? c.findings.length ? "warn" : "ok" : "bad",
+            children: c.skipped ? "skipped" : c.ok ? c.findings.length ? "advice" : "ok" : "failed"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs5("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5("span", { style: { ...styles.mono, fontWeight: 600 }, children: c.name }),
+            " ",
+            /* @__PURE__ */ jsx5("span", { style: styles.muted, children: c.module })
+          ] }),
+          c.skipped ? /* @__PURE__ */ jsx5("div", { style: { ...styles.muted, marginTop: 4 }, children: c.skipped }) : null,
+          c.findings.map((f) => /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: {
+                marginTop: 4,
+                fontSize: 13,
+                lineHeight: 1.55,
+                color: c.ok ? "var(--fonderie-text,#171717)" : "var(--fonderie-danger,#e00)"
+              },
+              children: f
+            },
+            f
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs5(
+          "td",
+          {
+            style: {
+              ...styles.td,
+              ...styles.muted,
+              textAlign: "right",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              c.durationMs,
+              " ms"
+            ]
+          }
+        )
+      ] }, c.name)) })
+    ] })
   ] });
 }
 
 // src/screens/ModulesScreen.tsx
-import { useManifest } from "@fonderie/react-admin";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useManifest as useManifest2 } from "@fonderie/react-admin";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ModulesScreen({ client }) {
-  const { manifest, isLoading, error } = useManifest(client);
-  return /* @__PURE__ */ jsxs5("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx5("h1", { style: styles.title, children: "Modules" }),
-    isLoading ? /* @__PURE__ */ jsx5("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx5("p", { style: styles.error, role: "alert", children: error.explanation }) : manifest ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsxs5("p", { style: styles.muted, children: [
-        manifest.env,
-        " \xB7 admin ",
-        manifest.admin.version,
-        " \xB7 admin log",
-        " ",
-        manifest.admin.log ? "on" : "off",
-        " \xB7 ",
-        manifest.routes.length,
-        " routes"
-      ] }),
-      /* @__PURE__ */ jsxs5("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-          /* @__PURE__ */ jsx5("th", { style: styles.th, children: "Module" }),
-          /* @__PURE__ */ jsx5("th", { style: styles.th, children: "Version" }),
-          /* @__PURE__ */ jsx5("th", { style: styles.th, children: "Readiness" }),
-          /* @__PURE__ */ jsx5("th", { style: styles.th, children: "Describes admin" })
-        ] }) }),
-        /* @__PURE__ */ jsx5("tbody", { children: manifest.modules.map((m) => /* @__PURE__ */ jsxs5("tr", { children: [
-          /* @__PURE__ */ jsx5("td", { style: { ...styles.td, ...styles.mono }, children: m.name }),
-          /* @__PURE__ */ jsx5("td", { style: styles.td, children: m.version ?? /* @__PURE__ */ jsx5("span", { style: styles.muted, children: "not reported" }) }),
-          /* @__PURE__ */ jsxs5("td", { style: styles.td, children: [
-            m.readiness.ok ? /* @__PURE__ */ jsx5("span", { style: styles.ok, children: "ok" }) : /* @__PURE__ */ jsx5("span", { style: styles.bad, children: "error" }),
-            m.readiness.problems.map((p) => /* @__PURE__ */ jsx5(
-              "div",
-              {
-                style: p.severity === "error" ? styles.bad : styles.advice,
-                children: p.message
+  const { manifest, isLoading, error } = useManifest2(client);
+  return /* @__PURE__ */ jsxs6("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx6(
+      PageHeader,
+      {
+        title: "Modules",
+        lead: manifest ? `${manifest.env} \xB7 admin ${manifest.admin.version} \xB7 admin log ${manifest.admin.log ? "on" : "off"} \xB7 ${manifest.routes.length} routes` : "Every installed module, its version and whether it is ready."
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx6("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx6("p", { style: styles.error, role: "alert", children: error.explanation }) : manifest ? /* @__PURE__ */ jsxs6("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
+        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Module" }),
+        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Version" }),
+        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Readiness" }),
+        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Admin" })
+      ] }) }),
+      /* @__PURE__ */ jsx6("tbody", { children: manifest.modules.map((m) => /* @__PURE__ */ jsxs6("tr", { children: [
+        /* @__PURE__ */ jsx6("td", { style: { ...styles.td, ...styles.mono, fontWeight: 600 }, children: m.name }),
+        /* @__PURE__ */ jsx6("td", { style: { ...styles.td, ...styles.mono }, children: m.version ?? /* @__PURE__ */ jsx6("span", { style: styles.muted, children: "not reported" }) }),
+        /* @__PURE__ */ jsxs6("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsx6(Pill, { tone: m.readiness.ok ? "ok" : "bad", children: m.readiness.ok ? "ready" : "error" }),
+          m.readiness.problems.map((p) => /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                marginTop: 6,
+                fontSize: 13,
+                color: p.severity === "error" ? "var(--fonderie-danger,#e00)" : "var(--fonderie-text-muted,#5c5c5c)"
               },
-              p.message
-            ))
-          ] }),
-          /* @__PURE__ */ jsx5("td", { style: styles.td, children: m.describesAdmin ? "yes" : /* @__PURE__ */ jsx5("span", { style: styles.muted, children: "no" }) })
-        ] }, m.name)) })
-      ] })
+              children: p.message
+            },
+            p.message
+          ))
+        ] }),
+        /* @__PURE__ */ jsx6("td", { style: styles.td, children: m.describesAdmin ? /* @__PURE__ */ jsx6("span", { style: styles.badge, children: "describes admin" }) : /* @__PURE__ */ jsx6("span", { style: styles.muted, children: "\u2014" }) })
+      ] }, m.name)) })
     ] }) : null
   ] });
 }
 
 // src/screens/RoutesScreen.tsx
 import { useAdminRoutes } from "@fonderie/react-admin";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function RoutesScreen({ client }) {
   const { report, isLoading, error } = useAdminRoutes(client);
-  return /* @__PURE__ */ jsxs6("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx6("h1", { style: styles.title, children: "Routes" }),
-    isLoading ? /* @__PURE__ */ jsx6("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx6("p", { style: styles.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsxs6("table", { style: styles.table, children: [
-      /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
-        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Method" }),
-        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Path" }),
-        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Guard" }),
-        /* @__PURE__ */ jsx6("th", { style: styles.th, children: "Module" })
+  const [q, setQ] = useState("");
+  const needle = q.trim().toLowerCase();
+  const routes = (report?.routes ?? []).filter(
+    (r) => !needle || `${r.method} ${r.path} ${r.module ?? "application"} ${r.guard}`.toLowerCase().includes(needle)
+  );
+  return /* @__PURE__ */ jsxs7("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx7(
+      PageHeader,
+      {
+        title: "Routes",
+        lead: report ? `${report.routes.length} routes exposed by this deployment, with the guard in front of each.` : "Every exposed route, with its guard.",
+        actions: /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "search",
+            value: q,
+            onChange: (e) => setQ(e.target.value),
+            placeholder: "Filter by path, method, module\u2026",
+            style: { ...styles.input, width: 280 },
+            "aria-label": "Filter routes"
+          }
+        )
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx7("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx7("p", { style: styles.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsxs7("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
+        /* @__PURE__ */ jsx7("th", { style: { ...styles.th, width: 80 }, children: "Method" }),
+        /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Path" }),
+        /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Guard" }),
+        /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Module" })
       ] }) }),
-      /* @__PURE__ */ jsx6("tbody", { children: report?.routes.map((r) => /* @__PURE__ */ jsxs6("tr", { children: [
-        /* @__PURE__ */ jsx6("td", { style: { ...styles.td, ...styles.mono }, children: r.method }),
-        /* @__PURE__ */ jsx6("td", { style: { ...styles.td, ...styles.mono }, children: r.path }),
-        /* @__PURE__ */ jsx6("td", { style: styles.td, children: /* @__PURE__ */ jsx6("span", { style: styles.badge, children: r.guard }) }),
-        /* @__PURE__ */ jsx6("td", { style: { ...styles.td, ...styles.muted }, children: r.module ?? "application" })
-      ] }, `${r.method} ${r.path}`)) })
+      /* @__PURE__ */ jsxs7("tbody", { children: [
+        routes.map((r) => /* @__PURE__ */ jsxs7("tr", { children: [
+          /* @__PURE__ */ jsx7("td", { style: styles.td, children: /* @__PURE__ */ jsx7(MethodChip, { method: r.method }) }),
+          /* @__PURE__ */ jsx7("td", { style: { ...styles.td, ...styles.mono, wordBreak: "break-all" }, children: r.path }),
+          /* @__PURE__ */ jsx7("td", { style: styles.td, children: /* @__PURE__ */ jsx7(
+            Pill,
+            {
+              tone: r.guard === "admin" ? "ok" : r.guard === "probe" ? "neutral" : "info",
+              dot: false,
+              children: r.guard
+            }
+          ) }),
+          /* @__PURE__ */ jsx7("td", { style: { ...styles.td, ...styles.muted }, children: r.module ?? "application" })
+        ] }, `${r.method} ${r.path}`)),
+        routes.length === 0 ? /* @__PURE__ */ jsx7("tr", { children: /* @__PURE__ */ jsxs7("td", { style: { ...styles.td, ...styles.muted }, colSpan: 4, children: [
+          "No route matches \u201C",
+          q,
+          "\u201D."
+        ] }) }) : null
+      ] })
     ] })
   ] });
 }
 
 // src/screens/MigrationsScreen.tsx
 import { useAdminMigrations } from "@fonderie/react-admin";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function why(m, everApplied) {
   if (m.pending.length === 0) return null;
   if (m.blockedBy) return `Apply "${m.blockedBy}" first \u2014 it runs before this one and is behind.`;
@@ -377,36 +1018,40 @@ function why(m, everApplied) {
 function MigrationsScreen({ client }) {
   const { report, isLoading, error, refresh, apply } = useAdminMigrations(client);
   const behind = report?.modules.filter((m) => m.pending.length > 0) ?? [];
-  return /* @__PURE__ */ jsxs7("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx7("h1", { style: styles.title, children: "Migrations" }),
-    error ? /* @__PURE__ */ jsx7("p", { style: styles.error, role: "alert", children: error.status === 403 ? "Applying migrations needs a token with the write scope." : error.explanation }) : null,
-    /* @__PURE__ */ jsxs7("p", { children: [
-      /* @__PURE__ */ jsx7("button", { type: "button", style: styles.button, onClick: () => void refresh(), disabled: isLoading, children: isLoading ? "Checking\u2026" : "Refresh" }),
-      " ",
-      report && !report.everApplied ? /* @__PURE__ */ jsx7("span", { style: styles.advice, children: "This database has never been migrated \u2014 treating it as a first install, so nothing is held back." }) : null
-    ] }),
-    report && behind.length === 0 ? /* @__PURE__ */ jsx7("p", { style: styles.ok, children: "Every module is up to date." }) : null,
+  return /* @__PURE__ */ jsxs8("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx8(
+      PageHeader,
+      {
+        title: "Migrations",
+        lead: "Schema changes each module ships, and whether this database has them.",
+        actions: /* @__PURE__ */ jsx8(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
+      }
+    ),
+    error ? /* @__PURE__ */ jsx8("p", { style: styles.error, role: "alert", children: error.status === 403 ? "Applying migrations needs a token with the write scope." : error.explanation }) : null,
+    report && !report.everApplied ? /* @__PURE__ */ jsx8("p", { style: styles.notice, children: "This database has never been migrated \u2014 treating it as a first install, so nothing is held back." }) : null,
+    report && behind.length === 0 ? /* @__PURE__ */ jsx8(Empty, { icon: "migrations", title: "Every module is up to date", children: "No pending migrations." }) : null,
     behind.map((m) => {
       const blocked = why(m, report?.everApplied ?? false);
       const files = m.pending.map((p) => p.file);
-      return /* @__PURE__ */ jsxs7("section", { style: { marginBottom: 24 }, children: [
-        /* @__PURE__ */ jsxs7("h2", { style: styles.subtitle, children: [
-          m.name,
-          " \u2014 ",
-          m.pending.length,
-          " pending"
+      return /* @__PURE__ */ jsxs8("section", { style: { ...styles.card, marginBottom: 16 }, children: [
+        /* @__PURE__ */ jsxs8("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: [
+          /* @__PURE__ */ jsx8("span", { style: styles.mono, children: m.name }),
+          /* @__PURE__ */ jsxs8(Pill, { tone: "warn", children: [
+            m.pending.length,
+            " pending"
+          ] })
         ] }),
-        /* @__PURE__ */ jsx7("ul", { children: m.pending.map((p) => /* @__PURE__ */ jsxs7("li", { children: [
-          /* @__PURE__ */ jsx7("code", { children: p.file }),
+        /* @__PURE__ */ jsx8("ul", { style: { margin: "0 0 12px", paddingLeft: 18, lineHeight: 1.9 }, children: m.pending.map((p) => /* @__PURE__ */ jsxs8("li", { children: [
+          /* @__PURE__ */ jsx8("code", { style: styles.code, children: p.file }),
           " ",
-          p.impact === "destructive" ? /* @__PURE__ */ jsx7("span", { style: styles.bad, children: "destructive" }) : /* @__PURE__ */ jsx7("span", { style: styles.advice, children: "additive" }),
-          p.destructive.length > 0 ? /* @__PURE__ */ jsx7("ul", { children: p.destructive.map((s) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7("code", { children: s.slice(0, 120) }) }, s)) }) : null
+          p.impact === "destructive" ? /* @__PURE__ */ jsx8(Pill, { tone: "bad", children: "destructive" }) : /* @__PURE__ */ jsx8(Pill, { tone: "neutral", children: "additive" }),
+          p.destructive.length > 0 ? /* @__PURE__ */ jsx8("ul", { children: p.destructive.map((s) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8("code", { children: s.slice(0, 120) }) }, s)) }) : null
         ] }, p.file)) }),
-        blocked ? /* @__PURE__ */ jsx7("p", { style: styles.advice, children: blocked }) : /* @__PURE__ */ jsxs7(
+        blocked ? /* @__PURE__ */ jsx8("p", { style: { ...styles.notice, marginBottom: 0 }, children: blocked }) : /* @__PURE__ */ jsxs8(
           "button",
           {
             type: "button",
-            style: styles.button,
+            style: styles.buttonPrimary,
             disabled: isLoading || !m.appliable,
             onClick: () => {
               if (window.confirm(
@@ -428,37 +1073,306 @@ function MigrationsScreen({ client }) {
   ] });
 }
 
+// src/screens/OperatorsScreen.tsx
+import { useAdminOperators } from "@fonderie/react-admin";
+import { useState as useState2 } from "react";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var LEVELS = [
+  { label: "Read only", scopes: ["read"], hint: "look around, change nothing" },
+  { label: "Editor", scopes: ["read", "write"], hint: "change config, templates, users" },
+  {
+    label: "Owner",
+    scopes: ["read", "write", "secrets"],
+    hint: "secrets, tokens and operators too"
+  }
+];
+var levelOf = (scopes) => scopes.includes("secrets") ? "Owner" : scopes.includes("write") ? "Editor" : "Read only";
+function Minted({ link, onClose }) {
+  const [copied, setCopied] = useState2(false);
+  const url = `${window.location.origin}${link.url}`;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        ...styles.notice,
+        background: "color-mix(in srgb, var(--fonderie-accent,#00d294) 10%, transparent)",
+        borderColor: "color-mix(in srgb, var(--fonderie-accent,#00d294) 35%, transparent)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs9("strong", { children: [
+          "Send this link to ",
+          link.email,
+          ". It is shown once."
+        ] }),
+        " It works once and expires",
+        " ",
+        new Date(link.expiresAt).toLocaleString(),
+        ".",
+        /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 8, marginTop: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx9("code", { style: { ...styles.code, flex: 1, padding: "7px 10px", wordBreak: "break-all" }, children: url }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                void navigator.clipboard?.writeText(url);
+                setCopied(true);
+              },
+              children: copied ? "Copied" : "Copy"
+            }
+          ),
+          /* @__PURE__ */ jsx9("button", { type: "button", style: styles.buttonGhost, onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx9(Icon, { name: "close", size: 14 }) })
+        ] })
+      ]
+    }
+  );
+}
+function OperatorsScreen({ client, me }) {
+  const { report, isLoading, error, invite, recover, update, revokeLink } = useAdminOperators(client);
+  const [email, setEmail] = useState2("");
+  const [level, setLevel] = useState2("Editor");
+  const [minted, setMinted] = useState2(null);
+  const scopesFor = (label) => LEVELS.find((l) => l.label === label)?.scopes ?? ["read"];
+  const status = (o) => o.disabledAt ? /* @__PURE__ */ jsx9(Pill, { tone: "neutral", children: "disabled" }) : o.locked ? /* @__PURE__ */ jsx9(Pill, { tone: "warn", children: "locked" }) : !o.enrolled ? /* @__PURE__ */ jsx9(Pill, { tone: "warn", children: "setting up" }) : /* @__PURE__ */ jsx9(Pill, { tone: "ok", children: "active" });
+  return /* @__PURE__ */ jsxs9("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx9(
+      PageHeader,
+      {
+        title: "Operators",
+        lead: "The people who can sign in to this console. Each one uses a password and an authenticator app; there is no sign-up."
+      }
+    ),
+    error ? /* @__PURE__ */ jsx9("p", { style: styles.error, role: "alert", children: error.status === 403 && error.reason === "FORBIDDEN" ? "Managing operators needs the Owner level." : error.explanation }) : null,
+    minted ? /* @__PURE__ */ jsx9(Minted, { link: minted, onClose: () => setMinted(null) }) : null,
+    /* @__PURE__ */ jsxs9(
+      "form",
+      {
+        style: {
+          ...styles.card,
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "wrap",
+          marginBottom: 20
+        },
+        onSubmit: (e) => {
+          e.preventDefault();
+          void invite({ email: email.trim(), scopes: scopesFor(level) }).then((l) => {
+            setMinted(l);
+            setEmail("");
+          }).catch(() => {
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx9(Icon, { name: "users", size: 16 }),
+          /* @__PURE__ */ jsx9("strong", { style: { fontSize: 13.5, marginRight: 4 }, children: "Invite" }),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              type: "email",
+              required: true,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              placeholder: "teammate@company.com",
+              style: { ...styles.input, flex: 1, minWidth: 220 },
+              "aria-label": "Email to invite"
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "select",
+            {
+              value: level,
+              onChange: (e) => setLevel(e.target.value),
+              style: styles.input,
+              "aria-label": "Access level",
+              children: LEVELS.map((l) => /* @__PURE__ */ jsxs9("option", { value: l.label, children: [
+                l.label,
+                " \u2014 ",
+                l.hint
+              ] }, l.label))
+            }
+          ),
+          /* @__PURE__ */ jsxs9("button", { type: "submit", style: styles.buttonPrimary, disabled: !email.trim(), children: [
+            /* @__PURE__ */ jsx9(Icon, { name: "plus", size: 14 }),
+            "Create invite link"
+          ] })
+        ]
+      }
+    ),
+    isLoading && !report ? /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Loading\u2026" }) : report && report.operators.length === 0 ? /* @__PURE__ */ jsx9(Empty, { icon: "users", title: "No operators yet" }) : report ? /* @__PURE__ */ jsxs9("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Operator" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Access" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Status" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Last sign-in" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th })
+      ] }) }),
+      /* @__PURE__ */ jsx9("tbody", { children: report.operators.map((o) => /* @__PURE__ */ jsxs9("tr", { children: [
+        /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontWeight: 600 }, children: o.name || o.email }),
+          o.name ? /* @__PURE__ */ jsx9("div", { style: styles.muted, children: o.email }) : null
+        ] }),
+        /* @__PURE__ */ jsx9("td", { style: styles.td, children: /* @__PURE__ */ jsx9(
+          "select",
+          {
+            value: levelOf(o.scopes),
+            onChange: (e) => void update(o.id, { scopes: scopesFor(e.target.value) }).catch(() => {
+            }),
+            style: { ...styles.input, height: 28, fontSize: 12.5 },
+            disabled: o.email === me,
+            "aria-label": `Access level for ${o.email}`,
+            children: LEVELS.map((l) => /* @__PURE__ */ jsx9("option", { value: l.label, children: l.label }, l.label))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+          status(o),
+          o.enrolled && o.backupCodesLeft <= 2 && !o.disabledAt ? /* @__PURE__ */ jsxs9("div", { style: { ...styles.muted, marginTop: 4 }, children: [
+            o.backupCodesLeft,
+            " backup code(s) left"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx9("td", { style: { ...styles.td, ...styles.muted, whiteSpace: "nowrap" }, children: o.lastLoginAt ? new Date(o.lastLoginAt).toLocaleString() : "never" }),
+        /* @__PURE__ */ jsx9("td", { style: { ...styles.td, textAlign: "right", whiteSpace: "nowrap" }, children: o.email === me ? /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "you" }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, height: 28, marginRight: 6 },
+              onClick: () => {
+                if (window.confirm(
+                  `Create a recovery link for ${o.email}? It signs them out everywhere; the link sets a new password and a new authenticator.`
+                ))
+                  void recover(o.id).then(setMinted).catch(() => {
+                  });
+              },
+              children: "Recovery link"
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...o.disabledAt ? styles.button : styles.buttonDanger,
+                height: 28
+              },
+              onClick: () => {
+                if (o.disabledAt || window.confirm(`Disable ${o.email}? They are signed out immediately.`))
+                  void update(o.id, { disabled: !o.disabledAt }).catch(() => {
+                  });
+              },
+              children: o.disabledAt ? "Enable" : "Disable"
+            }
+          )
+        ] }) })
+      ] }, o.id)) })
+    ] }) : null,
+    report && report.links.length > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Pending links" }),
+      /* @__PURE__ */ jsx9("ul", { style: styles.list, children: report.links.map((l) => /* @__PURE__ */ jsxs9(
+        "li",
+        {
+          style: { ...styles.row, display: "flex", gap: 12, alignItems: "center" },
+          children: [
+            /* @__PURE__ */ jsx9(Pill, { tone: l.kind === "invite" ? "info" : "warn", dot: false, children: l.kind }),
+            /* @__PURE__ */ jsxs9("span", { style: { flex: 1 }, children: [
+              l.email,
+              l.kind === "invite" ? /* @__PURE__ */ jsxs9("span", { style: styles.muted, children: [
+                " \xB7 ",
+                levelOf(l.scopes)
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs9("span", { style: styles.muted, children: [
+              "expires ",
+              new Date(l.expiresAt).toLocaleString()
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                style: { ...styles.buttonDanger, height: 28 },
+                onClick: () => void revokeLink(l.id).catch(() => {
+                }),
+                children: "Revoke"
+              }
+            )
+          ]
+        },
+        l.id
+      )) })
+    ] }) : null
+  ] });
+}
+
 // src/screens/TokensScreen.tsx
 import { useAdminTokens } from "@fonderie/react-admin";
-import { useState } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var ALL = ["read", "write", "secrets"];
 function TokensScreen({ client }) {
   const { report, isLoading, error, issue, revoke } = useAdminTokens(client);
-  const [name, setName] = useState("");
-  const [scopes, setScopes] = useState(["read"]);
-  const [days, setDays] = useState("");
-  const [minted, setMinted] = useState(null);
+  const [name, setName] = useState3("");
+  const [scopes, setScopes] = useState3(["read"]);
+  const [days, setDays] = useState3("");
+  const [minted, setMinted] = useState3(null);
   const toggle = (s) => setScopes((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
-  return /* @__PURE__ */ jsxs8("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx8("h1", { style: styles.title, children: "Access" }),
-    error ? /* @__PURE__ */ jsx8("p", { style: styles.error, role: "alert", children: error.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.explanation }) : null,
-    /* @__PURE__ */ jsx8("h2", { style: styles.subtitle, children: "Root token" }),
-    report ? /* @__PURE__ */ jsxs8("p", { children: [
-      report.admin.ok ? /* @__PURE__ */ jsx8("span", { style: styles.ok, children: "strong" }) : /* @__PURE__ */ jsx8("span", { style: styles.bad, children: "weak" }),
-      report.admin.problems.map((p) => /* @__PURE__ */ jsx8("div", { style: styles.bad, children: p.message }, p.message))
+  return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx10(
+      PageHeader,
+      {
+        title: "Tokens",
+        lead: "Credentials for machines: the root token's strength, scoped tokens for the CLI and CI, and any legacy per-module tokens. People sign in as operators."
+      }
+    ),
+    error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: error.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.explanation }) : null,
+    /* @__PURE__ */ jsx10("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Root token" }),
+    report ? /* @__PURE__ */ jsxs10("div", { style: { ...styles.card, display: "flex", gap: 12, alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx10(Icon, { name: "lock", size: 18, style: { marginTop: 2 } }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Pill, { tone: report.admin.ok ? "ok" : "bad", children: report.admin.ok ? "strong" : "weak" }),
+        report.admin.problems.map((p) => /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: { marginTop: 6, color: "var(--fonderie-danger,#e00)", fontSize: 13 },
+            children: p.message
+          },
+          p.message
+        ))
+      ] })
     ] }) : null,
-    /* @__PURE__ */ jsx8("h2", { style: styles.subtitle, children: "Issued tokens" }),
-    report?.issued === null ? /* @__PURE__ */ jsx8("p", { style: styles.muted, children: "Issuing is off \u2014 give AdminModule a store and run its migrations." }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
-      minted ? /* @__PURE__ */ jsxs8("p", { style: styles.ok, children: [
-        "Copy this now \u2014 it is never shown again.",
-        " ",
-        /* @__PURE__ */ jsx8("span", { style: styles.mono, children: minted.token }),
-        " (",
-        minted.name,
-        ")"
-      ] }) : null,
-      /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Issued tokens" }),
+    report?.issued === null ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "Issuing is off \u2014 give AdminModule a store and run its migrations." }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+      minted ? /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          style: {
+            ...styles.notice,
+            background: "color-mix(in srgb, var(--fonderie-accent,#00d294) 10%, transparent)",
+            borderColor: "color-mix(in srgb, var(--fonderie-accent,#00d294) 35%, transparent)"
+          },
+          children: [
+            /* @__PURE__ */ jsx10("strong", { children: "Copy this now \u2014 it is never shown again." }),
+            " (",
+            minted.name,
+            ")",
+            /* @__PURE__ */ jsx10(
+              "div",
+              {
+                style: {
+                  ...styles.code,
+                  display: "block",
+                  marginTop: 8,
+                  padding: "8px 10px",
+                  wordBreak: "break-all"
+                },
+                children: minted.token
+              }
+            )
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs10(
         "form",
         {
           style: styles.toolbar,
@@ -477,70 +1391,90 @@ function TokensScreen({ client }) {
             });
           },
           children: [
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 value: name,
                 onChange: (e) => setName(e.target.value),
                 placeholder: "name",
-                style: { ...styles.button, cursor: "text" },
+                style: styles.input,
                 "aria-label": "Name"
               }
             ),
-            ALL.map((s) => /* @__PURE__ */ jsxs8("label", { style: { ...styles.badge, cursor: "pointer" }, children: [
-              /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: scopes.includes(s), onChange: () => toggle(s) }),
-              " ",
+            ALL.map((s) => /* @__PURE__ */ jsxs10(
+              "label",
+              {
+                style: {
+                  ...styles.badge,
+                  cursor: "pointer",
+                  height: 32,
+                  boxSizing: "border-box",
+                  padding: "0 10px",
+                  fontSize: 13
+                },
+                children: [
+                  /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: scopes.includes(s), onChange: () => toggle(s) }),
+                  " ",
+                  s
+                ]
+              },
               s
-            ] }, s)),
-            /* @__PURE__ */ jsx8(
+            )),
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 value: days,
                 onChange: (e) => setDays(e.target.value),
                 placeholder: "days (optional)",
-                style: { ...styles.button, cursor: "text", width: 140 },
+                style: { ...styles.input, width: 140 },
                 "aria-label": "Days"
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "submit",
-                style: styles.button,
+                style: styles.buttonPrimary,
                 disabled: !name.trim() || scopes.length === 0 || isLoading,
-                children: "Issue"
+                children: [
+                  /* @__PURE__ */ jsx10(Icon, { name: "plus", size: 14 }),
+                  "Issue token"
+                ]
               }
             )
           ]
         }
       ),
-      report?.issued && report.issued.length > 0 ? /* @__PURE__ */ jsxs8("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
-          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Name" }),
-          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Scopes" }),
-          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Created" }),
-          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Expires" }),
-          /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Last used" }),
-          /* @__PURE__ */ jsx8("th", { style: styles.th })
+      report?.issued && report.issued.length > 0 ? /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Scopes" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Expires" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Last used" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ jsx8("tbody", { children: report.issued.map((t2) => /* @__PURE__ */ jsxs8("tr", { children: [
-          /* @__PURE__ */ jsxs8("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsx10("tbody", { children: report.issued.map((t2) => /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
             t2.name,
-            t2.revokedAt ? /* @__PURE__ */ jsx8("span", { style: styles.badge, children: " revoked" }) : null
+            t2.revokedAt ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              " ",
+              /* @__PURE__ */ jsx10(Pill, { tone: "neutral", children: "revoked" })
+            ] }) : null
           ] }),
-          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.mono }, children: t2.scopes.join(", ") }),
-          /* @__PURE__ */ jsxs8("td", { style: { ...styles.td, ...styles.muted }, children: [
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.mono }, children: t2.scopes.join(", ") }),
+          /* @__PURE__ */ jsxs10("td", { style: { ...styles.td, ...styles.muted }, children: [
             new Date(t2.createdAt).toLocaleDateString(),
             " \xB7 ",
             t2.createdBy
           ] }),
-          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.muted }, children: t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never" }),
-          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.muted }, children: t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never" }),
-          /* @__PURE__ */ jsx8("td", { style: styles.td, children: t2.revokedAt ? null : /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.muted }, children: t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never" }),
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.muted }, children: t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never" }),
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: t2.revokedAt ? null : /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
-              style: styles.button,
+              style: styles.buttonDanger,
               onClick: () => {
                 if (window.confirm(
                   `Revoke "${t2.name}"? Anything using it stops working immediately.`
@@ -552,13 +1486,13 @@ function TokensScreen({ client }) {
             }
           ) })
         ] }, t2.id)) })
-      ] }) : /* @__PURE__ */ jsx8("p", { style: styles.muted, children: "None issued." })
+      ] }) : /* @__PURE__ */ jsx10(Empty, { icon: "tokens", title: "No scoped tokens yet", children: "Issue a read-only token for a dashboard or a teammate instead of sharing the root." })
     ] }),
-    /* @__PURE__ */ jsx8("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
-    report && report.legacy.length === 0 ? /* @__PURE__ */ jsx8("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ jsx8("ul", { style: styles.list, children: report?.legacy.map((l) => /* @__PURE__ */ jsxs8("li", { style: styles.row, children: [
-      /* @__PURE__ */ jsx8("span", { style: styles.mono, children: l.module }),
+    /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
+    report && report.legacy.length === 0 ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ jsx10("ul", { style: styles.list, children: report?.legacy.map((l) => /* @__PURE__ */ jsxs10("li", { style: styles.row, children: [
+      /* @__PURE__ */ jsx10("span", { style: styles.mono, children: l.module }),
       " ",
-      /* @__PURE__ */ jsx8("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
+      /* @__PURE__ */ jsx10("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
     ] }, l.module)) })
   ] });
 }
@@ -571,11 +1505,11 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/react-admin";
-import { useState as useState2 } from "react";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function UsersScreen({ client, pageSize = 50 }) {
-  const [input, setInput] = useState2("");
-  const [selected, setSelected] = useState2(null);
+  const [input, setInput] = useState4("");
+  const [selected, setSelected] = useState4(null);
   const list = useAdminUsers(client, { limit: pageSize });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
     client,
@@ -584,14 +1518,20 @@ function UsersScreen({ client, pageSize = 50 }) {
   const userId = user?.id ?? null;
   const sessions = useAdminUserSessions(client, userId);
   const history = useAdminLoginHistory(client, userId, { limit: 20 });
-  const yesNo = (v) => v ? /* @__PURE__ */ jsx9("span", { style: styles.ok, children: "yes" }) : /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "no" });
+  const yesNo = (v) => v ? /* @__PURE__ */ jsx11(Pill, { tone: "ok", children: "yes" }) : /* @__PURE__ */ jsx11(Pill, { tone: "neutral", children: "no" });
   const clear = () => {
     setSelected(null);
     setInput("");
   };
-  return /* @__PURE__ */ jsxs9("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx9("h1", { style: styles.title, children: "Users" }),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx11(
+      PageHeader,
+      {
+        title: "Users",
+        lead: "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
+      }
+    ),
+    /* @__PURE__ */ jsxs11(
       "form",
       {
         style: styles.toolbar,
@@ -601,19 +1541,25 @@ function UsersScreen({ client, pageSize = 50 }) {
           setSelected(email ? { email } : null);
         },
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "email",
               value: input,
               onChange: (e) => setInput(e.target.value),
               placeholder: "email address",
-              style: { ...styles.button, cursor: "text", minWidth: 280 },
+              style: { ...styles.input, minWidth: 280 },
               "aria-label": "Email"
             }
           ),
-          /* @__PURE__ */ jsx9("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
-          selected ? /* @__PURE__ */ jsx9("button", { type: "button", style: styles.button, onClick: clear, children: "\u2190 All users" }) : /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs11("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx11(Icon, { name: "search", size: 14 }),
+            "Look up"
+          ] }),
+          selected ? /* @__PURE__ */ jsxs11("button", { type: "button", style: styles.buttonGhost, onClick: clear, children: [
+            /* @__PURE__ */ jsx11(Icon, { name: "back", size: 14 }),
+            "All users"
+          ] }) : /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -626,37 +1572,37 @@ function UsersScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx9("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
-    !selected ? /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      list.error ? /* @__PURE__ */ jsx9("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
-      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx9("p", { style: styles.muted, children: "No users yet." }) : /* @__PURE__ */ jsxs9("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Email" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Name" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Created" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Status" })
+    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
+    !selected ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      list.error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx11(Empty, { icon: "users", title: "No users yet", children: "Sign-ups appear here as they happen." }) : /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Email" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Status" })
         ] }) }),
-        /* @__PURE__ */ jsx9("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
-              style: { ...styles.navItem, padding: 0 },
+              style: styles.link,
               onClick: () => setSelected({ id: u.id }),
               children: u.email
             }
           ) }),
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "\u2014" }) }),
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
-          /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
-            u.suspended ? /* @__PURE__ */ jsx9("span", { style: styles.badge, children: "suspended" }) : null,
-            u.deletedAt ? /* @__PURE__ */ jsx9("span", { style: styles.badge, children: "deleted" }) : null,
-            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "active" }) : null
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "\u2014" }) }),
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
+            u.suspended ? /* @__PURE__ */ jsx11(Pill, { tone: "warn", children: "suspended" }) : null,
+            u.deletedAt ? /* @__PURE__ */ jsx11(Pill, { tone: "neutral", children: "deleted" }) : null,
+            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx11(Pill, { tone: "ok", children: "active" }) : null
           ] })
         ] }, u.id)) })
       ] }),
-      list.isLoading ? /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx9(
+      list.isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -666,48 +1612,48 @@ function UsersScreen({ client, pageSize = 50 }) {
         }
       ) : null
     ] }) : null,
-    user ? /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      /* @__PURE__ */ jsxs9("h2", { style: styles.subtitle, children: [
+    user ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      /* @__PURE__ */ jsxs11("h2", { style: styles.subtitle, children: [
         user.firstName || user.lastName ? `${user.firstName} ${user.lastName}`.trim() : user.email,
         " ",
-        user.suspended ? /* @__PURE__ */ jsx9("span", { style: styles.badge, children: "suspended" }) : null,
-        user.deletedAt ? /* @__PURE__ */ jsx9("span", { style: styles.badge, children: "deleted" }) : null
+        user.suspended ? /* @__PURE__ */ jsx11(Pill, { tone: "warn", children: "suspended" }) : null,
+        user.deletedAt ? /* @__PURE__ */ jsx11(Pill, { tone: "neutral", children: "deleted" }) : null
       ] }),
-      /* @__PURE__ */ jsx9("table", { style: styles.table, children: /* @__PURE__ */ jsxs9("tbody", { children: [
-        /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: "id" }),
-          /* @__PURE__ */ jsx9("td", { style: { ...styles.td, ...styles.mono }, children: user.id })
+      /* @__PURE__ */ jsx11("table", { style: styles.table, children: /* @__PURE__ */ jsxs11("tbody", { children: [
+        /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "id" }),
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: user.id })
         ] }),
-        /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: "email" }),
-          /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "email" }),
+          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
             user.email,
             " \xB7 verified ",
             yesNo(user.isEmailVerified)
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: "MFA" }),
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: yesNo(user.mfaEnabled) })
+        /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "MFA" }),
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: yesNo(user.mfaEnabled) })
         ] }),
-        /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: "provider" }),
-          /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "provider" }),
+          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
             user.provider || "password",
             user.hasPassword ? "" : " \xB7 no password set"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: "last login" }),
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: user.lastLogin ? new Date(user.lastLogin).toLocaleString() : /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "never" }) })
+        /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "last login" }),
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: user.lastLogin ? new Date(user.lastLogin).toLocaleString() : /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "never" }) })
         ] }),
-        /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: "created" }),
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "created" }),
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs9("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
-        user.suspended ? /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsxs11("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
+        user.suspended ? /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -716,17 +1662,17 @@ function UsersScreen({ client, pageSize = 50 }) {
             disabled: isLoading,
             children: "Unsuspend"
           }
-        ) : /* @__PURE__ */ jsx9(
+        ) : /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
-            style: styles.button,
+            style: styles.buttonDanger,
             onClick: () => void suspend(),
             disabled: isLoading,
             children: "Suspend"
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -737,38 +1683,38 @@ function UsersScreen({ client, pageSize = 50 }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Live sessions" }),
-      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx9("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx9("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs9("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx9("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
+      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Live sessions" }),
+      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx11("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs11("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsx11("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
         " ",
-        describeLocation(s.location) ? /* @__PURE__ */ jsxs9("span", { style: styles.muted, children: [
+        describeLocation(s.location) ? /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
           describeLocation(s.location),
           " "
         ] }) : null,
-        /* @__PURE__ */ jsx9("span", { style: styles.muted, children: s.userAgent ?? "" }),
+        /* @__PURE__ */ jsx11("span", { style: styles.muted, children: s.userAgent ?? "" }),
         " ",
-        /* @__PURE__ */ jsxs9("span", { style: styles.muted, children: [
+        /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
           "since ",
           new Date(s.createdAt).toLocaleString()
         ] })
       ] }, s.id)) }),
-      /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
-      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx9("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx9("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs9("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx9("span", { style: e.outcome === "success" ? styles.ok : styles.bad, children: e.outcome }),
+      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
+      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx11("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs11("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsx11(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
         " ",
-        /* @__PURE__ */ jsx9("span", { style: styles.muted, children: e.method }),
+        /* @__PURE__ */ jsx11("span", { style: styles.muted, children: e.method }),
         " ",
-        /* @__PURE__ */ jsx9("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
+        /* @__PURE__ */ jsx11("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
         " ",
-        describeLocation(e.location) ? /* @__PURE__ */ jsx9("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
-        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs9("span", { style: styles.bad, children: [
+        describeLocation(e.location) ? /* @__PURE__ */ jsx11("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
+        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
           " ",
-          e.location.proxy ? "proxy/VPN" : "hosting"
+          /* @__PURE__ */ jsx11(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
         ] }) : null,
         " ",
-        /* @__PURE__ */ jsx9("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsx11("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
       ] }, e.id)) }),
-      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx9(
+      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -783,59 +1729,67 @@ function UsersScreen({ client, pageSize = 50 }) {
 
 // src/screens/CatalogScreen.tsx
 import { useAdminCatalog } from "@fonderie/react-admin";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function CatalogScreen({ client }) {
   const { catalog, isLoading, error, refresh, deletePlan } = useAdminCatalog(client);
   const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
-  return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxs10("div", { style: styles.toolbar, children: [
-      /* @__PURE__ */ jsx10("h1", { style: { ...styles.title, marginBottom: 0 }, children: "Catalog" }),
-      /* @__PURE__ */ jsx10(
-        "button",
+  return /* @__PURE__ */ jsxs12("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx12(
+      PageHeader,
+      {
+        title: "Catalog",
+        lead: "What you sell: plans as configured in code, and as stored in the database, side by side.",
+        actions: /* @__PURE__ */ jsx12(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
+      }
+    ),
+    error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    isLoading && !catalog ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    catalog ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      /* @__PURE__ */ jsx12("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Configured (code)" }),
+      /* @__PURE__ */ jsx12(
+        "pre",
         {
-          type: "button",
-          style: styles.button,
-          onClick: () => void refresh(),
-          disabled: isLoading,
-          children: "Refresh"
+          style: {
+            ...styles.card,
+            ...styles.mono,
+            margin: 0,
+            overflowX: "auto",
+            maxHeight: 360,
+            lineHeight: 1.6
+          },
+          children: JSON.stringify(catalog.configured, null, 2)
         }
-      )
-    ] }),
-    error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    isLoading && !catalog ? /* @__PURE__ */ jsx10("p", { style: styles.status, children: "Loading\u2026" }) : null,
-    catalog ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Configured (code)" }),
-      /* @__PURE__ */ jsx10("pre", { style: { ...styles.mono, background: "var(--fonderie-surface-alt,#fafafa)", padding: 12, overflowX: "auto" }, children: JSON.stringify(catalog.configured, null, 2) }),
-      /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Stored (database)" }),
-      catalog.stored.length === 0 ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "No stored plans." }) : /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Plan" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Tier" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Seats" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Monthly" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Yearly" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Trial" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th })
+      ),
+      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Stored (database)" }),
+      catalog.stored.length === 0 ? /* @__PURE__ */ jsx12(Empty, { icon: "catalog", title: "No stored plans", children: "Plans are configured in code; nothing has been written to the database." }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Tier" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Seats" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Monthly" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Yearly" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Trial" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ jsx10("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx10("strong", { children: p.name }),
-            p.description ? /* @__PURE__ */ jsx10("div", { style: styles.muted, children: p.description }) : null
+        /* @__PURE__ */ jsx12("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx12("strong", { children: p.name }),
+            p.description ? /* @__PURE__ */ jsx12("div", { style: styles.muted, children: p.description }) : null
           ] }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: p.tier }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: p.seats ?? "\u221E" }),
-          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: p.tier }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: p.seats ?? "\u221E" }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
             money(p.pricing?.monthly),
             " ",
             p.pricing?.currency ?? ""
           ] }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: money(p.pricing?.yearly) }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: money(p.pricing?.yearly) }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
-              style: styles.button,
+              style: styles.buttonDanger,
               onClick: () => {
                 if (window.confirm(`Delete stored plan "${p.name}"?`))
                   void deletePlan(p.id).catch(() => {
@@ -852,26 +1806,32 @@ function CatalogScreen({ client }) {
 
 // src/screens/SubscriberScreen.tsx
 import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/react-admin";
-import { useState as useState3 } from "react";
-import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function SubscriberScreen({ client, pageSize = 50 }) {
-  const [type, setType] = useState3("user");
-  const [idInput, setIdInput] = useState3("");
-  const [subscriber, setSubscriber] = useState3(null);
+  const [type, setType] = useState5("user");
+  const [idInput, setIdInput] = useState5("");
+  const [subscriber, setSubscriber] = useState5(null);
   const list = useAdminSubscribers(client, { limit: pageSize });
   const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
-  const [amount, setAmount] = useState3("");
-  const [note, setNote] = useState3("");
-  const [granted, setGranted] = useState3(null);
+  const [amount, setAmount] = useState5("");
+  const [note, setNote] = useState5("");
+  const [granted, setGranted] = useState5(null);
   const open = (t2, id) => {
     setGranted(null);
     setType(t2);
     setIdInput(id);
     setSubscriber({ type: t2, id });
   };
-  return /* @__PURE__ */ jsxs11("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx11("h1", { style: styles.title, children: "Subscriber" }),
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx13(
+      PageHeader,
+      {
+        title: "Subscribers",
+        lead: "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
+      }
+    ),
+    /* @__PURE__ */ jsxs13(
       "form",
       {
         style: styles.toolbar,
@@ -881,31 +1841,34 @@ function SubscriberScreen({ client, pageSize = 50 }) {
           setSubscriber(idInput.trim() ? { type, id: idInput.trim() } : null);
         },
         children: [
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs13(
             "select",
             {
               value: type,
               onChange: (e) => setType(e.target.value),
-              style: styles.button,
+              style: styles.input,
               "aria-label": "Type",
               children: [
-                /* @__PURE__ */ jsx11("option", { value: "user", children: "user" }),
-                /* @__PURE__ */ jsx11("option", { value: "workspace", children: "workspace" })
+                /* @__PURE__ */ jsx13("option", { value: "user", children: "user" }),
+                /* @__PURE__ */ jsx13("option", { value: "workspace", children: "workspace" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13(
             "input",
             {
               value: idInput,
               onChange: (e) => setIdInput(e.target.value),
               placeholder: "subscriber id",
-              style: { ...styles.button, cursor: "text", minWidth: 280 },
+              style: { ...styles.input, minWidth: 280 },
               "aria-label": "Subscriber id"
             }
           ),
-          /* @__PURE__ */ jsx11("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
-          subscriber ? /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs13("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx13(Icon, { name: "search", size: 14 }),
+            "Look up"
+          ] }),
+          subscriber ? /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
@@ -915,9 +1878,12 @@ function SubscriberScreen({ client, pageSize = 50 }) {
                 setIdInput("");
                 setGranted(null);
               },
-              children: "\u2190 All subscribers"
+              children: [
+                /* @__PURE__ */ jsx13(Icon, { name: "back", size: 14 }),
+                "All subscribers"
+              ]
             }
-          ) : /* @__PURE__ */ jsx11(
+          ) : /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -930,22 +1896,22 @@ function SubscriberScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    !subscriber ? /* @__PURE__ */ jsxs11(Fragment7, { children: [
-      list.error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
-      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "No subscribers yet." }) : /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Subscriber" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Plan" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Status" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Renews" })
+    error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    !subscriber ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+      list.error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx13(Empty, { icon: "subscriber", title: "No subscribers yet", children: "Subscriptions appear here once someone checks out." }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Subscriber" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Status" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Renews" })
         ] }) }),
-        /* @__PURE__ */ jsx11("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsx13("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
-              style: { ...styles.navItem, padding: 0, ...styles.mono },
+              style: { ...styles.link, ...styles.mono },
               onClick: () => open(s.subscriberType, s.subscriberId),
               children: [
                 s.subscriberType,
@@ -954,20 +1920,29 @@ function SubscriberScreen({ client, pageSize = 50 }) {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx11("strong", { children: s.plan }),
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx13("strong", { children: s.plan }),
             " \xB7 ",
             s.interval
           ] }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
-            s.status,
-            s.cancelAtPeriodEnd ? /* @__PURE__ */ jsx11("span", { style: styles.badge, children: "cancels" }) : null
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx13(
+              Pill,
+              {
+                tone: s.status === "active" ? "ok" : s.status === "trialing" ? "info" : s.status === "past_due" ? "warn" : "neutral",
+                children: s.status
+              }
+            ),
+            s.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+              " ",
+              /* @__PURE__ */ jsx13(Pill, { tone: "warn", dot: false, children: "cancels" })
+            ] }) : null
           ] }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "\u2014" }) })
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ jsx13("span", { style: styles.muted, children: "\u2014" }) })
         ] }, s.id)) })
       ] }),
-      list.isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx11(
+      list.isLoading ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -977,27 +1952,27 @@ function SubscriberScreen({ client, pageSize = 50 }) {
         }
       ) : null
     ] }) : null,
-    subscriber && !isLoading ? /* @__PURE__ */ jsxs11(Fragment7, { children: [
-      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Subscription" }),
-      subscription ? /* @__PURE__ */ jsx11("table", { style: styles.table, children: /* @__PURE__ */ jsxs11("tbody", { children: [
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "plan" }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx11("strong", { children: subscription.plan }),
+    subscriber && !isLoading ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+      /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Subscription" }),
+      subscription ? /* @__PURE__ */ jsx13("table", { style: styles.table, children: /* @__PURE__ */ jsxs13("tbody", { children: [
+        /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "plan" }),
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx13("strong", { children: subscription.plan }),
             " \xB7 ",
             subscription.interval
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "status" }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "status" }),
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
             subscription.status,
             subscription.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "period" }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "period" }),
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
             subscription.currentPeriodStart ? new Date(subscription.currentPeriodStart).toLocaleDateString() : "\u2014",
             " ",
             "\u2192",
@@ -1005,28 +1980,49 @@ function SubscriberScreen({ client, pageSize = 50 }) {
             subscription.currentPeriodEnd ? new Date(subscription.currentPeriodEnd).toLocaleDateString() : "\u2014"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "provider" }),
-          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: subscription.providerSubscriptionId ?? "\u2014" })
+        /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "provider" }),
+          /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: subscription.providerSubscriptionId ?? "\u2014" })
         ] })
-      ] }) }) : /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "No subscription." }),
-      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Wallet" }),
-      wallet ? /* @__PURE__ */ jsxs11(Fragment7, { children: [
-        /* @__PURE__ */ jsxs11("p", { children: [
-          /* @__PURE__ */ jsx11("strong", { children: wallet.balance }),
-          " ",
-          wallet.currency,
-          " ",
-          /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
-            "(granted ",
-            wallet.granted ?? "0",
-            " \xB7 purchased ",
-            wallet.purchased ?? "0",
-            ") \xB7 minor units, precision ",
-            wallet.precision
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs11(
+      ] }) }) : /* @__PURE__ */ jsx13("p", { style: styles.muted, children: "No subscription." }),
+      /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Wallet" }),
+      wallet ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+        /* @__PURE__ */ jsxs13(
+          "p",
+          {
+            style: {
+              ...styles.card,
+              display: "flex",
+              alignItems: "baseline",
+              gap: 8,
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx13(
+                "strong",
+                {
+                  style: {
+                    fontSize: 22,
+                    letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
+                  },
+                  children: wallet.balance
+                }
+              ),
+              " ",
+              wallet.currency,
+              " ",
+              /* @__PURE__ */ jsxs13("span", { style: styles.muted, children: [
+                "(granted ",
+                wallet.granted ?? "0",
+                " \xB7 purchased ",
+                wallet.purchased ?? "0",
+                ") \xB7 minor units, precision ",
+                wallet.precision
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs13(
           "form",
           {
             style: styles.toolbar,
@@ -1045,47 +2041,58 @@ function SubscriberScreen({ client, pageSize = 50 }) {
               });
             },
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   value: amount,
                   onChange: (e) => setAmount(e.target.value),
                   placeholder: "amount (minor units)",
-                  style: { ...styles.button, cursor: "text" },
+                  style: styles.input,
                   "aria-label": "Amount"
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   value: note,
                   onChange: (e) => setNote(e.target.value),
                   placeholder: "reason (optional)",
-                  style: { ...styles.button, cursor: "text", minWidth: 220 },
+                  style: { ...styles.input, minWidth: 220 },
                   "aria-label": "Reason"
                 }
               ),
-              /* @__PURE__ */ jsx11("button", { type: "submit", style: styles.button, disabled: !/^\d+$/.test(amount.trim()), children: "Grant" }),
-              granted ? /* @__PURE__ */ jsx11("span", { style: styles.ok, children: granted }) : null
+              /* @__PURE__ */ jsxs13(
+                "button",
+                {
+                  type: "submit",
+                  style: styles.buttonPrimary,
+                  disabled: !/^\d+$/.test(amount.trim()),
+                  children: [
+                    /* @__PURE__ */ jsx13(Icon, { name: "plus", size: 14 }),
+                    "Grant"
+                  ]
+                }
+              ),
+              granted ? /* @__PURE__ */ jsx13("span", { style: styles.ok, children: granted }) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Ledger" }),
-        ledger.length === 0 ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "Nothing moved yet." }) : /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
-          /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
-            /* @__PURE__ */ jsx11("th", { style: styles.th, children: "When" }),
-            /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Kind" }),
-            /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Amount" }),
-            /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Note" })
+        /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Ledger" }),
+        ledger.length === 0 ? /* @__PURE__ */ jsx13(Empty, { icon: "subscriber", title: "Nothing moved yet" }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
+          /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "When" }),
+            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Kind" }),
+            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Amount" }),
+            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Note" })
           ] }) }),
-          /* @__PURE__ */ jsx11("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs11("tr", { children: [
-            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t2.createdAt).toLocaleString() }),
-            /* @__PURE__ */ jsx11("td", { style: styles.td, children: t2.type }),
-            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
-            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
+          /* @__PURE__ */ jsx13("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs13("tr", { children: [
+            /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t2.createdAt).toLocaleString() }),
+            /* @__PURE__ */ jsx13("td", { style: styles.td, children: t2.type }),
+            /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
+            /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
           ] }, t2.id)) })
         ] }),
-        hasMoreLedger ? /* @__PURE__ */ jsx11(
+        hasMoreLedger ? /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -1094,37 +2101,43 @@ function SubscriberScreen({ client, pageSize = 50 }) {
             children: "Load more"
           }
         ) : null
-      ] }) : /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "No wallet \u2014 billing has no wallet configuration." })
+      ] }) : /* @__PURE__ */ jsx13("p", { style: styles.muted, children: "No wallet \u2014 billing has no wallet configuration." })
     ] }) : null
   ] });
 }
 
 // src/screens/AuditScreen.tsx
 import { useAdminAudit } from "@fonderie/react-admin";
-import { useState as useState4 } from "react";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function AuditScreen({ client, pageSize = 50 }) {
-  const [draft, setDraft] = useState4({ workspaceId: "", type: "", actorId: "" });
-  const [filter, setFilter] = useState4(
+  const [draft, setDraft] = useState6({ workspaceId: "", type: "", actorId: "" });
+  const [filter, setFilter] = useState6(
     {}
   );
   const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(client, {
     ...filter,
     limit: pageSize
   });
-  const field = (key, placeholder) => /* @__PURE__ */ jsx12(
+  const field = (key, placeholder) => /* @__PURE__ */ jsx14(
     "input",
     {
       value: draft[key],
       onChange: (e) => setDraft({ ...draft, [key]: e.target.value }),
       placeholder,
-      style: { ...styles.button, cursor: "text" },
+      style: styles.input,
       "aria-label": placeholder
     }
   );
-  return /* @__PURE__ */ jsxs12("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx12("h1", { style: styles.title, children: "Audit" }),
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx14(
+      PageHeader,
+      {
+        title: "Audit",
+        lead: "What happened, across every workspace unless you name one. The chain's integrity verdict is on the Doctor page."
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
       "form",
       {
         style: styles.toolbar,
@@ -1140,8 +2153,11 @@ function AuditScreen({ client, pageSize = 50 }) {
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          /* @__PURE__ */ jsx12("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Filter" }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs14("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx14(Icon, { name: "search", size: 14 }),
+            "Filter"
+          ] }),
+          /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -1154,25 +2170,25 @@ function AuditScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "Nothing recorded for this filter." }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
-      /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
-        /* @__PURE__ */ jsx12("th", { style: styles.th, children: "When" }),
-        /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Type" }),
-        /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Workspace" }),
-        /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Actor" }),
-        /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Request" })
+    error ? /* @__PURE__ */ jsx14("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx14(Empty, { icon: "audit", title: "Nothing recorded for this filter" }) : /* @__PURE__ */ jsxs14("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "When" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Type" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Workspace" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Actor" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Request" })
       ] }) }),
-      /* @__PURE__ */ jsx12("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs12("tr", { children: [
-        /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
-        /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
-        /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
-        /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
-        /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
+      /* @__PURE__ */ jsx14("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs14("tr", { children: [
+        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
+        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
+        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
+        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
+        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
       ] }, e.id)) })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Loading\u2026" }) : null,
-    hasMore && !isLoading ? /* @__PURE__ */ jsx12(
+    isLoading ? /* @__PURE__ */ jsx14("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    hasMore && !isLoading ? /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -1185,7 +2201,36 @@ function AuditScreen({ client, pageSize = 50 }) {
 }
 
 // src/screens/AdminShell.tsx
-import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var ICON = {
+  attention: "attention",
+  modules: "modules",
+  environment: "environment",
+  doctor: "doctor",
+  routes: "routes",
+  users: "users",
+  catalog: "catalog",
+  subscriber: "subscriber",
+  settings: "settings",
+  templates: "templates",
+  audit: "audit",
+  log: "log",
+  tokens: "tokens",
+  operators: "users",
+  migrations: "migrations"
+};
+var NARROW = "(max-width: 820px)";
+function useNarrow() {
+  const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
+  const [narrow, setNarrow] = useState7(() => query?.matches ?? false);
+  useEffect(() => {
+    if (!query) return;
+    const on = (e) => setNarrow(e.matches);
+    query.addEventListener("change", on);
+    return () => query.removeEventListener("change", on);
+  }, [query]);
+  return narrow;
+}
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
   {
@@ -1212,7 +2257,8 @@ var NAV = [
     items: [
       { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
-      { page: "tokens", label: "Access" },
+      { page: "operators", label: "Operators", needs: "operators" },
+      { page: "tokens", label: "Tokens" },
       { page: "migrations", label: "Migrations" }
     ]
   }
@@ -1226,64 +2272,79 @@ function AdminShell({
   auditClient,
   environment,
   page,
-  onNavigate
+  onNavigate,
+  appName = "Admin",
+  envLabel,
+  footer,
+  operators = false,
+  currentOperator
 }) {
-  const [own, setOwn] = useState5("attention");
+  const narrow = useNarrow();
+  const [drawer, setDrawer] = useState7(false);
+  const [own, setOwn] = useState7("attention");
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
+    setDrawer(false);
   };
-  const [editing, setEditing] = useState5(null);
+  const [editing, setEditing] = useState7(null);
   const has = {
     config: Boolean(configClient),
     courier: Boolean(courierClient),
     auth: Boolean(authClient),
     billing: Boolean(billingClient),
-    audit: Boolean(auditClient)
+    audit: Boolean(auditClient),
+    operators
   };
   let body;
   switch (current) {
     case "attention":
-      body = /* @__PURE__ */ jsx13(AttentionScreen, { client });
+      body = /* @__PURE__ */ jsx15(AttentionScreen, { client });
       break;
     case "modules":
-      body = /* @__PURE__ */ jsx13(ModulesScreen, { client });
+      body = /* @__PURE__ */ jsx15(ModulesScreen, { client });
       break;
     case "doctor":
-      body = /* @__PURE__ */ jsx13(DoctorScreen, { client });
+      body = /* @__PURE__ */ jsx15(DoctorScreen, { client });
       break;
     case "environment":
-      body = /* @__PURE__ */ jsx13(EnvironmentScreen, { client });
+      body = /* @__PURE__ */ jsx15(EnvironmentScreen, { client });
       break;
     case "routes":
-      body = /* @__PURE__ */ jsx13(RoutesScreen, { client });
+      body = /* @__PURE__ */ jsx15(RoutesScreen, { client });
       break;
     case "tokens":
-      body = /* @__PURE__ */ jsx13(TokensScreen, { client });
+      body = /* @__PURE__ */ jsx15(TokensScreen, { client });
+      break;
+    case "operators":
+      body = /* @__PURE__ */ jsx15(OperatorsScreen, { client, me: currentOperator });
       break;
     case "migrations":
-      body = /* @__PURE__ */ jsx13(MigrationsScreen, { client });
+      body = /* @__PURE__ */ jsx15(MigrationsScreen, { client });
       break;
     case "log":
-      body = /* @__PURE__ */ jsx13(AdminLogScreen, { client });
+      body = /* @__PURE__ */ jsx15(AdminLogScreen, { client });
       break;
     case "catalog":
-      body = billingClient ? /* @__PURE__ */ jsx13(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Pass a BillingAdminClient to see the catalog here." });
+      body = billingClient ? /* @__PURE__ */ jsx15(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to see the catalog here." });
       break;
     case "subscriber":
-      body = billingClient ? /* @__PURE__ */ jsx13(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Pass a BillingAdminClient to look up subscribers here." });
+      body = billingClient ? /* @__PURE__ */ jsx15(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to look up subscribers here." });
       break;
     case "audit":
-      body = auditClient ? /* @__PURE__ */ jsx13(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Pass an AuditAdminClient to see the audit trail here." });
+      body = auditClient ? /* @__PURE__ */ jsx15(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuditAdminClient to see the audit trail here." });
       break;
     case "users":
-      body = authClient ? /* @__PURE__ */ jsx13(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
+      body = authClient ? /* @__PURE__ */ jsx15(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-        /* @__PURE__ */ jsx13("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ jsx13(
+      body = !configClient ? /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        /* @__PURE__ */ jsx15("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs15("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx15(Icon, { name: "back", size: 14 }),
+          "Config & secrets"
+        ] }) }),
+        /* @__PURE__ */ jsx15(
           ConfigEditorScreen,
           {
             client: configClient,
@@ -1293,7 +2354,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx13(
+      ] }) : /* @__PURE__ */ jsx15(
         ConfigListScreen,
         {
           client: configClient,
@@ -1306,9 +2367,12 @@ function AdminShell({
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-        /* @__PURE__ */ jsx13("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ jsx13(
+      body = !courierClient ? /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        /* @__PURE__ */ jsx15("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs15("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx15(Icon, { name: "back", size: 14 }),
+          "Templates"
+        ] }) }),
+        /* @__PURE__ */ jsx15(
           TemplateEditorScreen,
           {
             client: courierClient,
@@ -1316,7 +2380,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx13(
+      ] }) : /* @__PURE__ */ jsx15(
         TemplateListScreen,
         {
           client: courierClient,
@@ -1325,29 +2389,105 @@ function AdminShell({
       );
       break;
   }
-  return /* @__PURE__ */ jsxs13("div", { style: styles.shell, children: [
-    /* @__PURE__ */ jsx13("nav", { style: styles.nav, "aria-label": "Admin", children: NAV.map((g) => {
-      const items = g.items.filter((i) => !i.needs || has[i.needs]);
-      if (items.length === 0) return null;
-      return /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx13("div", { style: styles.navGroup, children: g.group }),
-        items.map((i) => /* @__PURE__ */ jsx13(
+  const production = envLabel ? /^prod/i.test(envLabel) : false;
+  const brand = /* @__PURE__ */ jsxs15("div", { style: styles.navBrand, children: [
+    /* @__PURE__ */ jsx15("div", { style: styles.navMark, children: /* @__PURE__ */ jsx15(Icon, { name: "mark", size: 15 }) }),
+    /* @__PURE__ */ jsxs15("div", { style: { minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsx15("div", { style: styles.navBrandTitle, children: appName }),
+      envLabel ? /* @__PURE__ */ jsx15(
+        "span",
+        {
+          style: {
+            ...styles.badge,
+            marginTop: 3,
+            padding: "0 7px",
+            fontSize: 11,
+            ...production ? {
+              color: "var(--fonderie-danger,#e00)",
+              borderColor: "color-mix(in srgb, var(--fonderie-danger,#e00) 35%, transparent)"
+            } : {}
+          },
+          children: envLabel
+        }
+      ) : null
+    ] }),
+    narrow ? /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        style: styles.buttonGhost,
+        "aria-label": "Close menu",
+        onClick: () => setDrawer(false),
+        children: /* @__PURE__ */ jsx15(Icon, { name: "close" })
+      }
+    ) : null
+  ] });
+  const nav = /* @__PURE__ */ jsxs15(
+    "nav",
+    {
+      style: {
+        ...styles.nav,
+        ...narrow ? { width: 280, maxWidth: "85vw", boxShadow: "0 10px 40px rgba(0,0,0,.25)" } : {}
+      },
+      "aria-label": "Admin",
+      children: [
+        brand,
+        /* @__PURE__ */ jsx15("div", { style: styles.navScroll, children: NAV.map((g) => {
+          const items = g.items.filter((i) => !i.needs || has[i.needs]);
+          if (items.length === 0) return null;
+          return /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsx15("div", { style: styles.navGroup, children: g.group }),
+            items.map((i) => {
+              const active = current === i.page;
+              return /* @__PURE__ */ jsxs15(
+                "button",
+                {
+                  type: "button",
+                  className: "fonderie-admin-nav-item",
+                  style: { ...styles.navItem, ...active ? styles.navItemActive : {} },
+                  "aria-current": active ? "page" : void 0,
+                  onClick: () => {
+                    setEditing(null);
+                    go(i.page);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx15(Icon, { name: ICON[i.page], style: active ? styles.navIconActive : void 0 }),
+                    i.label
+                  ]
+                },
+                i.page
+              );
+            })
+          ] }, g.group);
+        }) }),
+        footer ? /* @__PURE__ */ jsx15("div", { style: styles.navFooter, children: footer }) : null
+      ]
+    }
+  );
+  const title = NAV.flatMap((g) => g.items).find((i) => i.page === current)?.label ?? "";
+  return /* @__PURE__ */ jsxs15("div", { style: { ...styles.shell, ...narrow ? { flexDirection: "column" } : {} }, children: [
+    narrow ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
+      /* @__PURE__ */ jsxs15("div", { style: styles.topbar, children: [
+        /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
-            style: { ...styles.navItem, ...current === i.page ? styles.navItemActive : {} },
-            "aria-current": current === i.page ? "page" : void 0,
-            onClick: () => {
-              setEditing(null);
-              go(i.page);
-            },
-            children: i.label
-          },
-          i.page
-        ))
-      ] }, g.group);
-    }) }),
-    /* @__PURE__ */ jsx13("main", { style: styles.main, children: body })
+            style: styles.buttonGhost,
+            "aria-label": "Open menu",
+            "aria-expanded": drawer,
+            onClick: () => setDrawer(true),
+            children: /* @__PURE__ */ jsx15(Icon, { name: "menu" })
+          }
+        ),
+        /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
+        envLabel ? /* @__PURE__ */ jsx15("span", { style: { ...styles.badge, marginLeft: "auto" }, children: envLabel }) : null
+      ] }),
+      drawer ? /* @__PURE__ */ jsxs15("div", { style: styles.drawer, children: [
+        nav,
+        /* @__PURE__ */ jsx15("div", { style: styles.scrim, onClick: () => setDrawer(false), "aria-hidden": "true" })
+      ] }) : null
+    ] }) : nav,
+    /* @__PURE__ */ jsx15("main", { className: "fonderie-admin-main", style: styles.main, children: body })
   ] });
 }
 export {
@@ -1360,6 +2500,7 @@ export {
   EnvironmentScreen,
   MigrationsScreen,
   ModulesScreen,
+  OperatorsScreen,
   RoutesScreen,
   SubscriberScreen,
   TokensScreen,