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

CHANGELOG.md

@@ -6,6 +6,7 @@ Generated section is appended on release tag via `git-cliff` (see `.gitea/workfl
 ## [Unreleased]
 
 ### Added
+- feat(portal): M10.1 — real content for /settings + /settings/api-keys (full CRUD) + /audit (paginated, filterable) + /products (live entitlements). Forward-looking empty states with milestone hooks + CTAs on projects/users/integrations/billing/support.
 - feat(signup): M12.1 — public /start form creates a trial tenant via POST /v1/tenants (KC adapter provisions the org + invites the admin); dashboard renders a trial-days-left banner when status=trial
 - feat(catalog): M11.1 — /[slug]/catalog renders the live catalog, gates owned products, server-action 'Request' (POST /v1/catalog/request) + 'Start 14-day trial' (POST /v1/catalog/trial-request)
 - feat(test): M5.3 — Playwright e2e harness (apex / tenant / dev-stack-health specs). pnpm e2e + make e2e. CI e2e job gated behind RUN_E2E variable until stage exists.

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
+    <section>
-      title="Audit log"
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>Audit log</h1>
-      description="Every state-changing action across portal + products."
+      <p style={{ color: "#444", marginBottom: 16 }}>
-      milestone="M10.2"
+        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
+    <section>
-      title="Products"
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>Products</h1>
-      description="Per-product tiles — open into the embedded web component."
+      <p style={{ color: "#444", marginBottom: 24 }}>
-      milestone="M10.1"
+        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."
+      description="Sub-tenancy: scope products by team/environment (GCP-Project-style)."
-      milestone="M10.1"
+      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
+    <section>
-      title="API keys"
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>API keys</h1>
-      description="Per-tenant API keys for headless product access."
+      <p style={{ color: "#444", marginBottom: 16 }}>
-      milestone="M15.1"
+        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
+    <section>
-      title="Settings"
+      <h1 style={{ fontSize: 28, marginBottom: 8 }}>Settings</h1>
-      description="Tenant identity, SSO, organization defaults."
+      <p style={{ color: "#444", marginBottom: 24 }}>
-      milestone="M10.1"
+        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."
+      description="Invite teammates as IT_ADMIN, CXO, FINANCE, LEGAL, or USER."
-      milestone="M10.1"
+      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)."
     />
   );
 }

src/components/ShellEmpty.tsx

@@ -1,15 +1,22 @@
-// Reusable empty-state for a customer-area route shell. Every M5.2 route
+// Empty state for surfaces whose real backend hasn't shipped yet.
-// renders one of these; real content lands in M10.1 / M11.x / M12.x /
+// `milestone` names the milestone that unblocks the surface; `cta` is an
-// M14.x / etc.
+// optional in-portal action (link or button) the user can take in the
+// meantime (e.g., "Browse the catalog" while real billing waits on M8.3).
+
+import type { ReactNode } from "react";
 
 export function ShellEmpty({
   title,
   description,
   milestone,
+  details,
+  cta,
 }: {
   title: string;
   description: string;
   milestone: string;
+  details?: string;
+  cta?: ReactNode;
 }) {
   return (
     <section style={{ maxWidth: 720 }}>
@@ -25,15 +32,18 @@ export function ShellEmpty({
           fontSize: 14,
         }}
       >
-        This surface is a route shell. Real implementation lands in{" "}
+        <div style={{ marginBottom: details ? 8 : 0 }}>
-        <code>{milestone}</code>. See{" "}
+          Lands in <code>{milestone}</code>. See{" "}
-        <a
+          <a
-          href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
+            href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
-          style={{ color: "#0070f3" }}
+            style={{ color: "#0070f3" }}
-        >
+          >
-          PLATFORM_ARCHITECTURE.md §5a
+            PLATFORM_ARCHITECTURE.md §5a
-        </a>{" "}
+          </a>
-        for the spec.
+          .
+        </div>
+        {details && <p style={{ marginTop: 8, marginBottom: 0 }}>{details}</p>}
+        {cta && <div style={{ marginTop: 12 }}>{cta}</div>}
       </div>
     </section>
   );

src/lib/format.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from "vitest";
+import { formatDateTime, formatRelative, truncate } from "./format";
+
+describe("formatRelative", () => {
+  const NOW = new Date("2026-05-20T12:00:00Z").getTime();
+  test("seconds ago", () => {
+    expect(formatRelative("2026-05-20T11:59:50Z", NOW)).toBe("10 seconds ago");
+  });
+  test("singular unit", () => {
+    expect(formatRelative("2026-05-20T11:59:59Z", NOW)).toBe("1 second ago");
+  });
+  test("minutes ago", () => {
+    expect(formatRelative("2026-05-20T11:55:00Z", NOW)).toBe("5 minutes ago");
+  });
+  test("hours ago", () => {
+    expect(formatRelative("2026-05-20T09:00:00Z", NOW)).toBe("3 hours ago");
+  });
+  test("days ago", () => {
+    expect(formatRelative("2026-05-13T12:00:00Z", NOW)).toBe("1 week ago");
+  });
+  test("future", () => {
+    expect(formatRelative("2026-06-03T12:00:00Z", NOW)).toBe("in 2 weeks");
+  });
+  test("malformed input returns the input", () => {
+    expect(formatRelative("not-a-date", NOW)).toBe("not-a-date");
+  });
+  test("years ago", () => {
+    expect(formatRelative("2024-05-20T12:00:00Z", NOW)).toBe("2 years ago");
+  });
+  test("months ago", () => {
+    expect(formatRelative("2026-01-20T12:00:00Z", NOW)).toBe("4 months ago");
+  });
+});
+
+describe("formatDateTime", () => {
+  test("formats UTC", () => {
+    expect(formatDateTime("2026-05-20T12:34:56Z")).toBe("2026-05-20 12:34:56 UTC");
+  });
+  test("malformed input returns input", () => {
+    expect(formatDateTime("nope")).toBe("nope");
+  });
+});
+
+describe("truncate", () => {
+  test("short string unchanged", () => {
+    expect(truncate("hi", 10)).toBe("hi");
+  });
+  test("long string truncated with ellipsis", () => {
+    expect(truncate("abcdefghij", 6)).toBe("abcde…");
+  });
+  test("default max", () => {
+    expect(truncate("x".repeat(50)).length).toBe(40);
+  });
+});

src/lib/format.ts

@@ -0,0 +1,56 @@
+// Lightweight date/time helpers — shared across server components so we
+// don't reinvent toLocaleString conventions per page.
+
+export function formatRelative(iso: string, now: number = Date.now()): string {
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return iso;
+  const diff = t - now;
+  const abs = Math.abs(diff);
+  const ago = diff < 0;
+  const units: [string, number][] = [
+    ["second", 1000],
+    ["minute", 60 * 1000],
+    ["hour", 3600 * 1000],
+    ["day", 24 * 3600 * 1000],
+    ["week", 7 * 24 * 3600 * 1000],
+    ["month", 30 * 24 * 3600 * 1000],
+    ["year", 365 * 24 * 3600 * 1000],
+  ];
+  let unit = "second";
+  let n = Math.round(abs / 1000);
+  for (let i = units.length - 1; i >= 0; i--) {
+    if (abs >= units[i][1]) {
+      unit = units[i][0];
+      n = Math.round(abs / units[i][1]);
+      break;
+    }
+  }
+  const suffix = n === 1 ? unit : `${unit}s`;
+  return ago ? `${n} ${suffix} ago` : `in ${n} ${suffix}`;
+}
+
+export function formatDateTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  // YYYY-MM-DD HH:MM:SS — locale-stable, sortable, no surprises.
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return (
+    d.getUTCFullYear() +
+    "-" +
+    pad(d.getUTCMonth() + 1) +
+    "-" +
+    pad(d.getUTCDate()) +
+    " " +
+    pad(d.getUTCHours()) +
+    ":" +
+    pad(d.getUTCMinutes()) +
+    ":" +
+    pad(d.getUTCSeconds()) +
+    " UTC"
+  );
+}
+
+export function truncate(s: string, max = 40): string {
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + "…";
+}

src/lib/tenant-registry.test.ts

@@ -1,10 +1,14 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import {
+  createAPIKey,
   createTenant,
+  fetchAPIKeys,
+  fetchAudit,
   fetchCatalog,
   fetchEntitlements,
   fetchTenantBySlug,
   requestProduct,
+  revokeAPIKey,
   startTrial,
   type Tenant,
 } from "./tenant-registry";
@@ -198,3 +202,119 @@ describe("coverage gaps", () => {
     await expect(fetchCatalog()).rejects.toThrow();
   });
 });
+
+describe("fetchAPIKeys", () => {
+  test("happy path", async () => {
+    globalThis.fetch = mockJSON(200, {
+      items: [
+        { id: "1", tenant_id: "t1", name: "k1", scopes: [], prefix: "bp_a", created_at: "x" },
+      ],
+    });
+    const list = await fetchAPIKeys("t1");
+    expect(list).toHaveLength(1);
+  });
+  test("404 → []", async () => {
+    globalThis.fetch = mockJSON(404, {});
+    expect(await fetchAPIKeys("t1")).toEqual([]);
+  });
+  test("non-200 throws", async () => {
+    globalThis.fetch = mockJSON(500, {});
+    await expect(fetchAPIKeys("t1")).rejects.toThrow();
+  });
+});
+
+describe("createAPIKey", () => {
+  test("201 returns plaintext", async () => {
+    globalThis.fetch = mockJSON(201, {
+      api_key: { id: "1", tenant_id: "t1", name: "k", scopes: [], prefix: "bp_a", created_at: "x" },
+      plaintext: "bp_abc123",
+    });
+    const res = await createAPIKey({ tenant_id: "t1", name: "k" });
+    expect(res.ok).toBe(true);
+    if (res.ok) expect(res.plaintext).toBe("bp_abc123");
+  });
+  test("404 → tenant_not_found", async () => {
+    globalThis.fetch = mockJSON(404, {});
+    expect(await createAPIKey({ tenant_id: "t1", name: "k" })).toEqual({
+      ok: false,
+      error: "tenant_not_found",
+    });
+  });
+  test("400 → invalid_input", async () => {
+    globalThis.fetch = mockJSON(400, {});
+    expect(await createAPIKey({ tenant_id: "t1", name: "" })).toEqual({
+      ok: false,
+      error: "invalid_input",
+    });
+  });
+  test("409 → name_taken", async () => {
+    globalThis.fetch = mockJSON(409, {});
+    expect(await createAPIKey({ tenant_id: "t1", name: "k" })).toEqual({
+      ok: false,
+      error: "name_taken",
+    });
+  });
+  test("unexpected status", async () => {
+    globalThis.fetch = mockJSON(500, {});
+    expect(await createAPIKey({ tenant_id: "t1", name: "k" })).toEqual({
+      ok: false,
+      error: "unexpected_500",
+    });
+  });
+});
+
+describe("revokeAPIKey", () => {
+  test("204 → ok", async () => {
+    globalThis.fetch = vi.fn<typeof fetch>(async () => new Response(null, { status: 204 }));
+    expect(await revokeAPIKey("k1")).toEqual({ ok: true });
+  });
+  test("404 → not_found", async () => {
+    globalThis.fetch = mockJSON(404, {});
+    expect(await revokeAPIKey("k1")).toEqual({ ok: false, error: "not_found" });
+  });
+  test("unexpected status", async () => {
+    globalThis.fetch = mockJSON(500, {});
+    expect(await revokeAPIKey("k1")).toEqual({ ok: false, error: "unexpected_500" });
+  });
+});
+
+describe("fetchAudit", () => {
+  test("happy path with filters", async () => {
+    const spy = mockJSON(200, {
+      items: [{ id: 1, action: "tenant.created", created_at: "x" }],
+      next_cursor: 1,
+    });
+    globalThis.fetch = spy;
+    const res = await fetchAudit({
+      tenant_id: "t1",
+      product: "certifai",
+      actor_id: "u1",
+      action: "tenant.created",
+      since: "2026-05-01T00:00:00Z",
+      until: "2026-05-20T00:00:00Z",
+      limit: 50,
+      cursor: 10,
+    });
+    expect(res.items).toHaveLength(1);
+    expect(res.next_cursor).toBe(1);
+    const url = String(spy.mock.calls[0]![0]);
+    expect(url).toContain("tenant_id=t1");
+    expect(url).toContain("product=certifai");
+    expect(url).toContain("actor_id=u1");
+    expect(url).toContain("action=tenant.created");
+    expect(url).toContain("limit=50");
+    expect(url).toContain("cursor=10");
+  });
+  test("no filters", async () => {
+    const spy = mockJSON(200, { items: [] });
+    globalThis.fetch = spy;
+    const res = await fetchAudit({});
+    expect(res.items).toEqual([]);
+    const url = String(spy.mock.calls[0]![0]);
+    expect(url).toBe("http://test:1234/v1/audit?");
+  });
+  test("non-200 throws", async () => {
+    globalThis.fetch = mockJSON(500, {});
+    await expect(fetchAudit({ tenant_id: "t1" })).rejects.toThrow();
+  });
+});

src/lib/tenant-registry.ts

@@ -30,6 +30,41 @@ export type Entitlement = {
   expires_at?: string | null;
 };
 
+export type APIKey = {
+  id: string;
+  tenant_id: string;
+  product?: string;
+  name: string;
+  scopes: string[];
+  prefix: string;
+  created_by?: string;
+  last_used_at?: string | null;
+  revoked_at?: string | null;
+  created_at: string;
+};
+
+export type AuditEvent = {
+  id: number;
+  tenant_id?: string;
+  actor_id?: string;
+  actor_name?: string;
+  actor_type?: string;
+  action: string;
+  target_id?: string;
+  target_type?: string;
+  target_name?: string;
+  product?: string;
+  metadata?: Record<string, unknown>;
+  source_ip?: string;
+  user_agent?: string;
+  created_at: string;
+};
+
+export type AuditPage = {
+  items: AuditEvent[];
+  next_cursor?: number;
+};
+
 function baseUrl(): string {
   return process.env.TENANT_REGISTRY_URL ?? "http://localhost:8090";
 }
@@ -157,3 +192,79 @@ export async function createTenant(
   if (status === 400) return { ok: false, error: "invalid_input" };
   return { ok: false, error: `unexpected_${status}` };
 }
+
+// ─── api keys ────────────────────────────────────────────────────────────
+
+export async function fetchAPIKeys(tenantId: string): Promise<APIKey[]> {
+  const { status, data } = await req<{ items: APIKey[] }>(
+    "GET",
+    `/v1/api-keys?tenant_id=${encodeURIComponent(tenantId)}`,
+  );
+  if (status === 404) return [];
+  if (status !== 200 || !data) {
+    throw new Error(`tenant-registry: GET api-keys ${status}`);
+  }
+  return data.items;
+}
+
+export type CreateAPIKeyInput = {
+  tenant_id: string;
+  name: string;
+  product?: string;
+  scopes?: string[];
+  created_by?: string;
+};
+
+export type CreateAPIKeyResult =
+  | { ok: true; api_key: APIKey; plaintext: string }
+  | { ok: false; error: string };
+
+export async function createAPIKey(in_: CreateAPIKeyInput): Promise<CreateAPIKeyResult> {
+  const { status, data } = await req<{ api_key: APIKey; plaintext: string }>(
+    "POST",
+    "/v1/api-keys",
+    in_,
+  );
+  if (status === 201 && data) return { ok: true, api_key: data.api_key, plaintext: data.plaintext };
+  if (status === 404) return { ok: false, error: "tenant_not_found" };
+  if (status === 400) return { ok: false, error: "invalid_input" };
+  if (status === 409) return { ok: false, error: "name_taken" };
+  return { ok: false, error: `unexpected_${status}` };
+}
+
+export async function revokeAPIKey(id: string): Promise<{ ok: boolean; error?: string }> {
+  const { status } = await req<unknown>("DELETE", `/v1/api-keys/${encodeURIComponent(id)}`);
+  if (status === 204) return { ok: true };
+  if (status === 404) return { ok: false, error: "not_found" };
+  return { ok: false, error: `unexpected_${status}` };
+}
+
+// ─── audit ───────────────────────────────────────────────────────────────
+
+export type AuditFilter = {
+  tenant_id?: string;
+  product?: string;
+  actor_id?: string;
+  action?: string;
+  since?: string;
+  until?: string;
+  limit?: number;
+  cursor?: number;
+};
+
+export async function fetchAudit(f: AuditFilter): Promise<AuditPage> {
+  const qs = new URLSearchParams();
+  if (f.tenant_id) qs.set("tenant_id", f.tenant_id);
+  if (f.product) qs.set("product", f.product);
+  if (f.actor_id) qs.set("actor_id", f.actor_id);
+  if (f.action) qs.set("action", f.action);
+  if (f.since) qs.set("since", f.since);
+  if (f.until) qs.set("until", f.until);
+  if (f.limit) qs.set("limit", String(f.limit));
+  if (f.cursor) qs.set("cursor", String(f.cursor));
+  const { status, data } = await req<AuditPage>("GET", `/v1/audit?${qs.toString()}`);
+  if (status !== 200 || !data) {
+    throw new Error(`tenant-registry: GET audit ${status}`);
+  }
+  return data;
+}

tests/e2e/surfaces.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "@playwright/test";
+
+// One canary per shell surface — confirms the route mounts and renders
+// SOMETHING the user can see (heading or 403 gate) without OIDC.
+// All run signed-out, so role-gated routes land on the NotAuthorized 403.
+
+test.describe("customer-area surfaces @needs-stack", () => {
+  const surfaces = [
+    { path: "/products",                expected: "403" },
+    { path: "/projects",                expected: "403" },
+    { path: "/catalog",                 expected: "403" },
+    { path: "/settings",                expected: "403" },
+    { path: "/settings/users",          expected: "403" },
+    { path: "/settings/api-keys",       expected: "403" },
+    { path: "/settings/integrations",   expected: "403" },
+    { path: "/billing",                 expected: "403" },
+    { path: "/audit",                   expected: "403" },
+    { path: "/support",                 expected: "403" },
+  ];
+  for (const { path, expected } of surfaces) {
+    test(`acme${path} renders signed-out`, async ({ page }) => {
+      await page.goto(path);
+      await expect(page.getByRole("heading", { name: new RegExp(expected, "i") })).toBeVisible();
+    });
+  }
+});