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/components/ShellEmpty.tsx

@@ -1,15 +1,22 @@
-// Reusable empty-state for a customer-area route shell. Every M5.2 route
-// renders one of these; real content lands in M10.1 / M11.x / M12.x /
-// M14.x / etc.
+// Empty state for surfaces whose real backend hasn't shipped yet.
+// `milestone` names the milestone that unblocks the surface; `cta` is an
+// 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{" "}
-        <code>{milestone}</code>. See{" "}
-        <a
-          href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
-          style={{ color: "#0070f3" }}
-        >
-          PLATFORM_ARCHITECTURE.md §5a
-        </a>{" "}
-        for the spec.
+        <div style={{ marginBottom: details ? 8 : 0 }}>
+          Lands in <code>{milestone}</code>. See{" "}
+          <a
+            href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
+            style={{ color: "#0070f3" }}
+          >
+            PLATFORM_ARCHITECTURE.md §5a
+          </a>
+          .
+        </div>
+        {details && <p style={{ marginTop: 8, marginBottom: 0 }}>{details}</p>}
+        {cta && <div style={{ marginTop: 12 }}>{cta}</div>}
       </div>
     </section>
   );