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

Four real surfaces wired to tenant-registry (settings, settings/api-keys CRUD, audit pagination, products live entitlements), five forward-looking empty states with CTAs. 56 vitest tests + 10 Playwright canaries. lib/format.ts consolidates date helpers.

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" };