fix(apps/landing): prevent hydration mismatch in live-signal-preview

The previous implementation called getSemanticBridgePreview() inside
useState's lazy initializer, which executes both during SSR and during
client hydration. Each call invoked new Date(), producing a different
observedAt timestamp on server vs client. The rendered chip then
formatted that timestamp with toLocaleTimeString(), which uses the
runtime's timezone and locale, so the server-rendered text never
matched the client-rendered text.

Fix:
- Initial state is now null (same on server and client first render).
- useEffect fetches the real preview from /api/live-signal; on non-OK
  or network error it falls back to the local getSemanticBridgePreview()
  on the client side, so the fallback timestamp is also client-only.
- A structurally identical placeholder section renders while preview
  is null, with aria-busy on the section and aria-hidden on the empty
  right-grid slot. The 'Observed ...' chip is replaced by the real
  time string only after hydration completes, so toLocaleTimeString()
  is never called during the SSR vs client diff.

Scope: this commit contains the hydration hotfix only. The Week 2
practice-surface additions (consult page, session-types, cohort-cta,
ARIA fixes to the practice components, content namespace additions
and the new tests) remain uncommitted in the working tree and will
be committed separately once the copy review lands.

Validation: pnpm typecheck, pnpm lint, pnpm test (12/12), pnpm build
(10 static routes + 2 dynamic API routes) all pass.

Author: Codex

apps/landing/src/components/live-signal-preview.tsx

@@ -7,7 +7,12 @@ import { getSemanticBridgePreview, type SemanticBridgePreview } from "@/lib/sema
 import { useEffect, useState } from "react";
 
 export function LiveSignalPreview() {
-  const [preview, setPreview] = useState<SemanticBridgePreview>(() => getSemanticBridgePreview());
+  // SSR-safe initial state: `null` means "not loaded yet". The server's
+  // first render and the client's first render both see this same value,
+  // so hydration is deterministic. The real preview is fetched in
+  // useEffect; until it arrives we render a structurally identical
+  // placeholder so the section never shows a hydration mismatch.
+  const [preview, setPreview] = useState<SemanticBridgePreview | null>(null);
 
   useEffect(() => {
     const controller = new AbortController();
@@ -18,13 +23,15 @@ export function LiveSignalPreview() {
           cache: "no-store",
           signal: controller.signal,
         });
-        if (!response.ok) {
+        if (response.ok) {
+          const nextPreview = (await response.json()) as SemanticBridgePreview;
+          setPreview(nextPreview);
           return;
         }
-        const nextPreview = (await response.json()) as SemanticBridgePreview;
-        setPreview(nextPreview);
+        // Non-OK: use local fallback (still client-side, so no SSR mismatch).
+        setPreview(getSemanticBridgePreview());
       } catch {
-        // Read-only preview; local fallback stays in place on request failure.
+        setPreview(getSemanticBridgePreview());
       }
     }
 
@@ -33,6 +40,43 @@ export function LiveSignalPreview() {
     return () => controller.abort();
   }, []);
 
+  // Loading state: same section shape, deterministic placeholder copy.
+  if (!preview) {
+    return (
+      <section
+        id="live-signal"
+        className="scroll-mt-24 border-t border-white/10 pt-10 sm:pt-12"
+        aria-busy="true"
+      >
+        <div className="grid gap-6 lg:grid-cols-[0.84fr_1.16fr] lg:items-start">
+          <Reveal>
+            <div className="space-y-4">
+              <SectionHeading
+                eyebrow="System trace"
+                title="Read-only residue"
+                description="A low-volume echo from the live seam. Alive enough to matter. Detached enough to stay safe."
+              />
+
+              <div className="flex flex-wrap gap-2">
+                <span className="chip">Observed …</span>
+                <span className="chip">Dominant …</span>
+                <span className="chip">Mode …</span>
+              </div>
+
+              <Reveal delay={120}>
+                <p className="max-w-xl text-sm leading-7 text-zinc-400">
+                  Loading live signal…
+                </p>
+              </Reveal>
+            </div>
+          </Reveal>
+
+          <div className="space-y-4" aria-hidden="true" />
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section id="live-signal" className="scroll-mt-24 border-t border-white/10 pt-10 sm:pt-12">
       <div className="grid gap-6 lg:grid-cols-[0.84fr_1.16fr] lg:items-start">