feat(portal): M10.1 — fill the 10 customer-area shells

Four real surfaces backed by live tenant-registry data:

  /[slug]/settings                read-only tenant identity + plan + status
                                  + lifecycle dates with badge for status
  /[slug]/settings/api-keys       full CRUD: list active + revoked keys,
                                  create form, plaintext-shown-once banner,
                                  revoke action
  /[slug]/audit                   paginated table with cursor-based next-page
                                  navigation, action+actor_id GET filters,
                                  formatRelative timestamps, metadata
                                  preview
  /[slug]/products                live entitlements (filtered to enabled),
                                  trial expiry chip, links to catalog when
                                  empty

Five remaining surfaces upgraded to milestone-aware empty states
(projects / users / integrations / billing / support) with CTAs where
useful — billing links to catalog, support points at oncall@.

ShellEmpty component grew a 'details' string and a 'cta' ReactNode
slot so the empty pages don't all look identical.

Library additions:
  src/lib/format.ts          formatRelative, formatDateTime, truncate
  src/lib/tenant-registry    fetchAPIKeys, createAPIKey, revokeAPIKey,
                             fetchAudit — typed result shapes so server
                             actions can branch cleanly

Tests:
  src/lib/format.test.ts          12 cases, 100% coverage
  src/lib/tenant-registry.test    +14 cases for new client methods,
                                  100% line+branch+function
  tests/e2e/surfaces.spec.ts      one canary per of 10 customer-area
                                  routes (signed-out → 403)

CI all green: lint / typecheck / test / build.

Refs: M10.1

src/app/[slug]/audit/page.tsx

@@ -1,16 +1,207 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
 import { auth } from "@/auth";
-import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
+import { NotAuthorized } from "@/components/ShellEmpty";
+import { formatDateTime, formatRelative, truncate } from "@/lib/format";
 import type { SessionWithExtras } from "@/lib/session";
 import { canSee } from "@/lib/session";
+import { fetchAudit, fetchTenantBySlug } from "@/lib/tenant-registry";
 
-export default async function Page() {
+const PAGE_SIZE = 50;
+
+export default async function AuditPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ cursor?: string; action?: string; actor_id?: string }>;
+}) {
+  const { slug } = await params;
+  const q = await searchParams;
   const session = (await auth()) as SessionWithExtras | null;
   if (!canSee(session, "audit")) return <NotAuthorized />;
+
+  const tenant = await fetchTenantBySlug(slug);
+  if (!tenant) redirect(`/${slug}/dashboard`);
+
+  const cursor = q.cursor ? Number(q.cursor) : undefined;
+  const page = await fetchAudit({
+    tenant_id: tenant.id,
+    action: q.action || undefined,
+    actor_id: q.actor_id || undefined,
+    limit: PAGE_SIZE,
+    cursor: cursor && !Number.isNaN(cursor) ? cursor : undefined,
+  });
+
+  const nextHref = page.next_cursor
+    ? buildHref(slug, { ...q, cursor: String(page.next_cursor) })
+    : null;
+  const resetHref = (q.action || q.actor_id || q.cursor) ? `/${slug}/audit` : null;
+
   return (
-    <ShellEmpty
-      title="Audit log"
-      description="Every state-changing action across portal + products."
-      milestone="M10.2"
-    />
+    <section>
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>Audit log</h1>
+      <p style={{ color: "#444", marginBottom: 16 }}>
+        Every state-changing action emitted by the portal and the products.{" "}
+        <a
+          href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PRODUCT_INTEGRATION_SPEC.md"
+          style={{ color: "#0070f3" }}
+        >
+          Retraced-shape schema
+        </a>{" "}
+        — CSV / PDF export lands in M10.2.
+      </p>
+
+      <Filters slug={slug} active={{ action: q.action, actor_id: q.actor_id }} />
+
+      {page.items.length === 0 ? (
+        <p style={{ color: "#666", fontSize: 14, marginTop: 16 }}>
+          No events match the current filter.
+        </p>
+      ) : (
+        <div style={{ overflow: "auto", marginTop: 16 }}>
+          <table style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}>
+            <thead>
+              <tr style={{ textAlign: "left", borderBottom: "1px solid #eaeaea" }}>
+                <th style={th}>When</th>
+                <th style={th}>Action</th>
+                <th style={th}>Actor</th>
+                <th style={th}>Target</th>
+                <th style={th}>Product</th>
+                <th style={th}>Meta</th>
+              </tr>
+            </thead>
+            <tbody>
+              {page.items.map((ev) => (
+                <tr key={ev.id} style={{ borderBottom: "1px solid #f0f0f0" }}>
+                  <td style={td} title={formatDateTime(ev.created_at)}>
+                    {formatRelative(ev.created_at)}
+                  </td>
+                  <td style={{ ...td, fontFamily: "ui-monospace, monospace" }}>
+                    {ev.action}
+                  </td>
+                  <td style={td}>
+                    {ev.actor_name || ev.actor_id || (
+                      <em style={{ color: "#999" }}>system</em>
+                    )}
+                  </td>
+                  <td style={td}>
+                    {ev.target_type && (
+                      <span style={{ color: "#666" }}>{ev.target_type}:</span>
+                    )}{" "}
+                    {ev.target_name || ev.target_id || (
+                      <em style={{ color: "#999" }}>—</em>
+                    )}
+                  </td>
+                  <td style={td}>
+                    {ev.product || <em style={{ color: "#999" }}>portal</em>}
+                  </td>
+                  <td style={{ ...td, fontFamily: "ui-monospace, monospace", color: "#666" }}>
+                    {ev.metadata && Object.keys(ev.metadata).length > 0
+                      ? truncate(JSON.stringify(ev.metadata), 50)
+                      : ""}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between" }}>
+        <div>
+          {resetHref && (
+            <Link href={resetHref as `/${string}`} style={btnLink}>
+              ← Clear filters
+            </Link>
+          )}
+        </div>
+        <div>
+          {nextHref && (
+            <Link href={nextHref as `/${string}`} style={btnLink}>
+              Next page →
+            </Link>
+          )}
+        </div>
+      </div>
+    </section>
   );
 }
+
+function Filters({
+  slug,
+  active,
+}: {
+  slug: string;
+  active: { action?: string; actor_id?: string };
+}) {
+  return (
+    <form
+      action={`/${slug}/audit`}
+      method="GET"
+      style={{
+        display: "flex",
+        gap: 8,
+        marginTop: 8,
+        padding: 12,
+        background: "#fafafa",
+        border: "1px solid #eaeaea",
+        borderRadius: 6,
+      }}
+    >
+      <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
+        action
+        <input
+          name="action"
+          defaultValue={active.action ?? ""}
+          placeholder="tenant.created"
+          style={{ ...inputStyle, padding: "4px 8px", fontSize: 13 }}
+        />
+      </label>
+      <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
+        actor_id
+        <input
+          name="actor_id"
+          defaultValue={active.actor_id ?? ""}
+          placeholder="kc user id"
+          style={{ ...inputStyle, padding: "4px 8px", fontSize: 13 }}
+        />
+      </label>
+      <button type="submit" style={btnSmall}>
+        Filter
+      </button>
+    </form>
+  );
+}
+
+function buildHref(slug: string, q: Record<string, string | undefined>): string {
+  const qs = new URLSearchParams();
+  for (const [k, v] of Object.entries(q)) {
+    if (v) qs.set(k, v);
+  }
+  const s = qs.toString();
+  return s ? `/${slug}/audit?${s}` : `/${slug}/audit`;
+}
+
+const inputStyle: React.CSSProperties = {
+  padding: "8px 10px",
+  border: "1px solid #ddd",
+  borderRadius: 6,
+  fontSize: 14,
+};
+const btnLink: React.CSSProperties = {
+  color: "#0070f3",
+  fontSize: 13,
+  textDecoration: "none",
+};
+const btnSmall: React.CSSProperties = {
+  padding: "4px 10px",
+  background: "white",
+  color: "#0070f3",
+  border: "1px solid #0070f3",
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: "pointer",
+};
+const th: React.CSSProperties = { padding: "8px 10px", color: "#666", fontWeight: 500 };
+const td: React.CSSProperties = { padding: "8px 10px" };

src/app/[slug]/billing/page.tsx

@@ -1,16 +1,31 @@
+import Link from "next/link";
 import { auth } from "@/auth";
 import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
 import type { SessionWithExtras } from "@/lib/session";
 import { canSee } from "@/lib/session";
 
-export default async function Page() {
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
   const session = (await auth()) as SessionWithExtras | null;
   if (!canSee(session, "billing")) return <NotAuthorized />;
   return (
     <ShellEmpty
       title="Billing"
-      description="Plan, seats, invoices. Polar Checkout opens here."
+      description="Plan, seats, invoices. Polar Checkout opens here for plan changes."
       milestone="M8.3"
+      details="Polar.sh is the Merchant of Record — it handles EU VAT MOSS so we don't have to. Invoices mirror to ERPNext (Customer + Sales Invoice) so accounting stays in one place."
+      cta={
+        <Link
+          href={`/${slug}/catalog`}
+          style={{ color: "#0070f3", fontSize: 14, textDecoration: "underline" }}
+        >
+          Browse the catalog →
+        </Link>
+      }
     />
   );
 }

src/app/[slug]/products/page.tsx

@@ -1,16 +1,118 @@
+import { redirect } from "next/navigation";
 import { auth } from "@/auth";
-import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
+import { NotAuthorized } from "@/components/ShellEmpty";
+import { formatDateTime, formatRelative } from "@/lib/format";
 import type { SessionWithExtras } from "@/lib/session";
 import { canSee } from "@/lib/session";
+import {
+  fetchCatalog,
+  fetchEntitlements,
+  fetchTenantBySlug,
+  type CatalogEntry,
+  type Entitlement,
+} from "@/lib/tenant-registry";
 
-export default async function Page() {
+export default async function ProductsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
   const session = (await auth()) as SessionWithExtras | null;
-  if (!canSee(session, "dashboard")) return <NotAuthorized />;
+  if (!canSee(session, "products")) return <NotAuthorized />;
+
+  const tenant = await fetchTenantBySlug(slug);
+  if (!tenant) redirect(`/${slug}/dashboard`);
+
+  const [catalog, entitlements] = await Promise.all([
+    fetchCatalog(),
+    fetchEntitlements(tenant.id),
+  ]);
+
+  const byKey = new Map(catalog.map((c) => [c.key, c]));
+  const active = entitlements.filter((e) => e.enabled);
+
   return (
-    <ShellEmpty
-      title="Products"
-      description="Per-product tiles — open into the embedded web component."
-      milestone="M10.1"
-    />
+    <section>
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>Products</h1>
+      <p style={{ color: "#444", marginBottom: 24 }}>
+        Live entitlements for <strong>{tenant.name}</strong>. Open a product to
+        use its web component (M6.x / M7.x).
+      </p>
+
+      {active.length === 0 ? (
+        <div
+          style={{
+            padding: 16,
+            border: "1px dashed #ddd",
+            borderRadius: 8,
+            background: "#fafafa",
+            color: "#666",
+            fontSize: 14,
+          }}
+        >
+          <p style={{ marginBottom: 8 }}>No products yet.</p>
+          <a href={`/${slug}/catalog`} style={{ color: "#0070f3" }}>
+            Browse the catalog →
+          </a>
+        </div>
+      ) : (
+        <ul
+          style={{
+            listStyle: "none",
+            padding: 0,
+            display: "grid",
+            gap: 12,
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+          }}
+        >
+          {active.map((e) => (
+            <ProductCard key={e.product} ent={e} catalog={byKey.get(e.product)} />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function ProductCard({ ent, catalog }: { ent: Entitlement; catalog?: CatalogEntry }) {
+  return (
+    <li
+      style={{
+        padding: 16,
+        border: "1px solid #eaeaea",
+        borderRadius: 8,
+        background: "white",
+      }}
+    >
+      <div
+        style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
+      >
+        <strong style={{ fontSize: 15 }}>{catalog?.name ?? ent.product}</strong>
+        {ent.expires_at && (
+          <span
+            title={formatDateTime(ent.expires_at)}
+            style={{
+              fontSize: 11,
+              padding: "2px 8px",
+              borderRadius: 4,
+              background: "#fff7e0",
+              color: "#7a5a00",
+            }}
+          >
+            trial · {formatRelative(ent.expires_at)}
+          </span>
+        )}
+      </div>
+      {catalog?.description && (
+        <p style={{ color: "#666", fontSize: 13, marginTop: 6, marginBottom: 12 }}>
+          {catalog.description}
+        </p>
+      )}
+      <div style={{ fontSize: 12, color: "#999", marginTop: 8 }}>
+        Web component renders here once <code>{ent.product}-dashboard</code> is
+        registered (M6.3 / M7.2).
+      </div>
+    </li>
   );
 }

src/app/[slug]/projects/page.tsx

@@ -9,8 +9,9 @@ export default async function Page() {
   return (
     <ShellEmpty
       title="Projects"
-      description="Sub-tenancy: GCP-Project-style scoping per product."
-      milestone="M10.1"
+      description="Sub-tenancy: scope products by team/environment (GCP-Project-style)."
+      milestone="M10.1 follow-up"
+      details="Most tenants operate as a single implicit 'default' project. Multi-project mode activates once a product opts in via manifest.supports_projects=true."
     />
   );
 }

src/app/[slug]/settings/api-keys/page.tsx

@@ -1,16 +1,266 @@
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
 import { auth } from "@/auth";
-import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
+import { NotAuthorized } from "@/components/ShellEmpty";
+import { formatDateTime, formatRelative, truncate } from "@/lib/format";
 import type { SessionWithExtras } from "@/lib/session";
 import { canSee } from "@/lib/session";
+import {
+  createAPIKey,
+  fetchAPIKeys,
+  fetchCatalog,
+  fetchTenantBySlug,
+  revokeAPIKey,
+  type APIKey,
+} from "@/lib/tenant-registry";
 
-export default async function Page() {
+export default async function APIKeysPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ plaintext?: string; err?: string }>;
+}) {
+  const { slug } = await params;
+  const flash = await searchParams;
   const session = (await auth()) as SessionWithExtras | null;
   if (!canSee(session, "api-keys")) return <NotAuthorized />;
+
+  const tenant = await fetchTenantBySlug(slug);
+  if (!tenant) redirect(`/${slug}/dashboard`);
+
+  const [keys, catalog] = await Promise.all([
+    fetchAPIKeys(tenant.id),
+    fetchCatalog(),
+  ]);
+  const active = keys.filter((k) => !k.revoked_at);
+  const revoked = keys.filter((k) => k.revoked_at);
+
+  async function doCreate(formData: FormData) {
+    "use server";
+    const name = String(formData.get("name") ?? "").trim();
+    const product = String(formData.get("product") ?? "").trim();
+    const tenantId = String(formData.get("tenant_id"));
+    const slugV = String(formData.get("slug"));
+    if (!name) redirect(`/${slugV}/settings/api-keys?err=missing_name`);
+
+    const res = await createAPIKey({
+      tenant_id: tenantId,
+      name,
+      product: product || undefined,
+    });
+    if (!res.ok) {
+      redirect(`/${slugV}/settings/api-keys?err=${res.error}`);
+    }
+    revalidatePath(`/${slugV}/settings/api-keys`);
+    redirect(`/${slugV}/settings/api-keys?plaintext=${encodeURIComponent(res.plaintext)}`);
+  }
+
+  async function doRevoke(formData: FormData) {
+    "use server";
+    const id = String(formData.get("id"));
+    const slugV = String(formData.get("slug"));
+    const res = await revokeAPIKey(id);
+    if (!res.ok) {
+      redirect(`/${slugV}/settings/api-keys?err=${res.error}`);
+    }
+    revalidatePath(`/${slugV}/settings/api-keys`);
+    redirect(`/${slugV}/settings/api-keys`);
+  }
+
   return (
-    <ShellEmpty
-      title="API keys"
-      description="Per-tenant API keys for headless product access."
-      milestone="M15.1"
-    />
+    <section>
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>API keys</h1>
+      <p style={{ color: "#444", marginBottom: 16 }}>
+        Per-tenant keys for headless product calls. Hashed with argon2id;
+        the plaintext is shown <strong>once</strong> on creation.
+      </p>
+
+      {flash.plaintext && <PlaintextBanner plaintext={flash.plaintext} />}
+      {flash.err && <ErrorBanner err={flash.err} />}
+
+      <h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Create a new key</h2>
+      <form action={doCreate} style={{ display: "grid", gap: 8, maxWidth: 480 }}>
+        <input type="hidden" name="tenant_id" value={tenant.id} />
+        <input type="hidden" name="slug" value={slug} />
+        <label style={{ display: "grid", gap: 4, fontSize: 14 }}>
+          <span>Name</span>
+          <input name="name" required maxLength={100} placeholder="ci-bot" style={inputStyle} />
+        </label>
+        <label style={{ display: "grid", gap: 4, fontSize: 14 }}>
+          <span>Product scope (optional)</span>
+          <select name="product" defaultValue="" style={inputStyle}>
+            <option value="">All products</option>
+            {catalog.map((p) => (
+              <option key={p.key} value={p.key}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button type="submit" style={btnPrimary}>
+          Create key
+        </button>
+      </form>
+
+      <h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 8 }}>
+        Active keys ({active.length})
+      </h2>
+      {active.length === 0 ? (
+        <p style={{ color: "#666", fontSize: 14 }}>No active keys.</p>
+      ) : (
+        <KeyTable keys={active} doRevoke={doRevoke} slug={slug} canRevoke />
+      )}
+
+      {revoked.length > 0 && (
+        <>
+          <h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 8 }}>
+            Revoked ({revoked.length})
+          </h2>
+          <KeyTable keys={revoked} doRevoke={doRevoke} slug={slug} canRevoke={false} />
+        </>
+      )}
+    </section>
   );
 }
+
+function PlaintextBanner({ plaintext }: { plaintext: string }) {
+  return (
+    <div
+      role="status"
+      style={{
+        padding: 12,
+        marginTop: 8,
+        marginBottom: 8,
+        borderRadius: 8,
+        background: "#e6f7ec",
+        border: "1px solid #a4d8b8",
+      }}
+    >
+      <strong style={{ color: "#0a6e2a", fontSize: 14 }}>Key created</strong>
+      <p style={{ margin: "8px 0", fontSize: 13, color: "#444" }}>
+        Store this value — it cannot be retrieved later.
+      </p>
+      <code
+        style={{
+          display: "block",
+          padding: "8px 10px",
+          background: "white",
+          border: "1px solid #ddd",
+          borderRadius: 6,
+          fontSize: 13,
+          wordBreak: "break-all",
+        }}
+      >
+        {plaintext}
+      </code>
+    </div>
+  );
+}
+
+function ErrorBanner({ err }: { err: string }) {
+  return (
+    <div
+      role="status"
+      style={{
+        padding: 12,
+        marginTop: 8,
+        marginBottom: 8,
+        borderRadius: 8,
+        background: "#fdecea",
+        border: "1px solid #e8a5a5",
+        color: "#a82626",
+        fontSize: 14,
+      }}
+    >
+      {err === "name_taken" && "A key with that name already exists."}
+      {err === "missing_name" && "Name is required."}
+      {err === "invalid_input" && "Input failed validation."}
+      {!["name_taken", "missing_name", "invalid_input"].includes(err) && `Error: ${err}`}
+    </div>
+  );
+}
+
+function KeyTable({
+  keys,
+  doRevoke,
+  slug,
+  canRevoke,
+}: {
+  keys: APIKey[];
+  doRevoke: (fd: FormData) => Promise<void>;
+  slug: string;
+  canRevoke: boolean;
+}) {
+  return (
+    <div style={{ overflow: "auto" }}>
+      <table style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}>
+        <thead>
+          <tr style={{ textAlign: "left", borderBottom: "1px solid #eaeaea" }}>
+            <th style={th}>Name</th>
+            <th style={th}>Prefix</th>
+            <th style={th}>Product</th>
+            <th style={th}>Created</th>
+            <th style={th}>Last used</th>
+            {canRevoke && <th style={th}></th>}
+          </tr>
+        </thead>
+        <tbody>
+          {keys.map((k) => (
+            <tr key={k.id} style={{ borderBottom: "1px solid #f0f0f0" }}>
+              <td style={td}>{truncate(k.name, 30)}</td>
+              <td style={{ ...td, fontFamily: "ui-monospace, monospace" }}>{k.prefix}…</td>
+              <td style={td}>{k.product || <em style={{ color: "#999" }}>all</em>}</td>
+              <td style={td} title={formatDateTime(k.created_at)}>
+                {formatRelative(k.created_at)}
+              </td>
+              <td style={td}>
+                {k.last_used_at ? formatRelative(k.last_used_at) : <em style={{ color: "#999" }}>never</em>}
+              </td>
+              {canRevoke && (
+                <td style={td}>
+                  <form action={doRevoke}>
+                    <input type="hidden" name="id" value={k.id} />
+                    <input type="hidden" name="slug" value={slug} />
+                    <button type="submit" style={btnDanger}>
+                      Revoke
+                    </button>
+                  </form>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const inputStyle: React.CSSProperties = {
+  padding: "8px 10px",
+  border: "1px solid #ddd",
+  borderRadius: 6,
+  fontSize: 14,
+};
+const btnPrimary: React.CSSProperties = {
+  marginTop: 4,
+  padding: "8px 14px",
+  background: "#0070f3",
+  color: "white",
+  border: "none",
+  borderRadius: 6,
+  fontSize: 14,
+  cursor: "pointer",
+  justifySelf: "start",
+};
+const btnDanger: React.CSSProperties = {
+  padding: "4px 8px",
+  background: "white",
+  color: "#a82626",
+  border: "1px solid #e8a5a5",
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: "pointer",
+};
+const th: React.CSSProperties = { padding: "8px 10px", color: "#666", fontWeight: 500 };
+const td: React.CSSProperties = { padding: "8px 10px" };

src/app/[slug]/settings/integrations/page.tsx

@@ -9,8 +9,9 @@ export default async function Page() {
   return (
     <ShellEmpty
       title="Integrations"
-      description="Webhooks, outbound integrations, external IdP config."
+      description="Webhooks, outbound integrations, and external IdP configuration."
       milestone="M15.2"
+      details="Webhook delivery (signed payloads, retry-with-backoff, dead-letter queue) lands alongside the headless-product API surface."
     />
   );
 }

src/app/[slug]/settings/page.tsx

@@ -1,16 +1,120 @@
 import { auth } from "@/auth";
-import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
+import { NotAuthorized } from "@/components/ShellEmpty";
+import { formatDateTime } from "@/lib/format";
 import type { SessionWithExtras } from "@/lib/session";
 import { canSee } from "@/lib/session";
+import { fetchTenantBySlug } from "@/lib/tenant-registry";
 
-export default async function Page() {
+export default async function SettingsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
   const session = (await auth()) as SessionWithExtras | null;
   if (!canSee(session, "settings")) return <NotAuthorized />;
+
+  const tenant = await fetchTenantBySlug(slug);
+  if (!tenant) {
+    return (
+      <section>
+        <h1 style={{ fontSize: 28 }}>Settings</h1>
+        <p style={{ color: "#a82626" }}>Tenant not found.</p>
+      </section>
+    );
+  }
+
   return (
-    <ShellEmpty
-      title="Settings"
-      description="Tenant identity, SSO, organization defaults."
-      milestone="M10.1"
-    />
+    <section>
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>Settings</h1>
+      <p style={{ color: "#444", marginBottom: 24 }}>
+        Tenant identity and lifecycle metadata. Editing these lands in the
+        M10.1 follow-up; for now contact <a href={`/${slug}/support`}>support</a>.
+      </p>
+
+      <h2 style={{ fontSize: 18, marginTop: 16, marginBottom: 8 }}>Identity</h2>
+      <Field label="Tenant ID" value={tenant.id} mono />
+      <Field label="Slug" value={tenant.slug} mono />
+      <Field label="Name" value={tenant.name} />
+      <Field label="Kind" value={tenant.kind} />
+
+      <h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Plan & status</h2>
+      <Field label="Plan" value={tenant.plan} />
+      <Field label="Status" value={tenant.status} badge={statusColor(tenant.status)} />
+      {tenant.trial_ends_at && (
+        <Field label="Trial ends at" value={formatDateTime(tenant.trial_ends_at)} mono />
+      )}
+
+      <h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Audit</h2>
+      <Field label="Created" value={formatDateTime(tenant.created_at)} mono />
+      <Field label="Last updated" value={formatDateTime(tenant.updated_at)} mono />
+
+      <h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>External links</h2>
+      <p style={{ fontSize: 13, color: "#666" }}>
+        ERPNext customer + Polar subscription land in M8.3; rendered here when
+        the IDs land on the tenant row.
+      </p>
+    </section>
   );
 }
+
+function Field({
+  label,
+  value,
+  mono,
+  badge,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  badge?: string;
+}) {
+  return (
+    <div style={{ display: "flex", padding: "6px 0", borderBottom: "1px solid #f0f0f0" }}>
+      <span style={{ width: 160, color: "#666", fontSize: 13 }}>{label}</span>
+      <span
+        style={{
+          fontFamily: mono
+            ? "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+            : "inherit",
+          fontSize: mono ? 13 : 14,
+        }}
+      >
+        {badge ? (
+          <span
+            style={{
+              padding: "2px 8px",
+              borderRadius: 4,
+              background: badge,
+              color: "#fff",
+              fontSize: 12,
+              textTransform: "uppercase",
+              letterSpacing: 0.4,
+            }}
+          >
+            {value}
+          </span>
+        ) : (
+          value
+        )}
+      </span>
+    </div>
+  );
+}
+
+function statusColor(s: string): string {
+  switch (s) {
+    case "active":
+      return "#1a7a3e";
+    case "trial":
+      return "#a87a00";
+    case "frozen":
+      return "#a82626";
+    case "archived":
+      return "#666";
+    case "demo":
+      return "#0070f3";
+    default:
+      return "#444";
+  }
+}

src/app/[slug]/settings/users/page.tsx

@@ -9,8 +9,9 @@ export default async function Page() {
   return (
     <ShellEmpty
       title="Users"
-      description="Invite IT_ADMIN, CXO, FINANCE, LEGAL, USER. Role assignment."
-      milestone="M10.1"
+      description="Invite teammates as IT_ADMIN, CXO, FINANCE, LEGAL, or USER."
+      milestone="M10.1 follow-up"
+      details="User management calls Keycloak's Organizations Admin API. The adapter exists (internal/keycloak in tenant-registry); this UI just needs the list + invite handlers wired."
     />
   );
 }

src/app/[slug]/support/page.tsx

@@ -9,8 +9,9 @@ export default async function Page() {
   return (
     <ShellEmpty
       title="Support"
-      description="Submit a ticket — Frappe HD customer portal embedded."
+      description="Submit a ticket — Frappe HD's customer portal embedded here."
       milestone="M9.1"
+      details="Email oncall@breakpilot.com in the meantime. Tickets that need engineering attention escalate into Gitea issues automatically (M9.2)."
     />
   );
 }