Wave 5A: /u house-mode public profile (D2)

Reserved house handle (default 'vyndr', env HOUSE_HANDLE) resolves to the
PUBLIC model record — getModelAggregate() with no userId (user_id=NULL rows)
— WITHOUT a public_profiles row. It is the ONLY special case; every other
handle keeps the private-by-default, byte-identical-404 no-existence-leak
contract. The house profile is always public and never 404s (a fetch failure
degrades to an honest building state).

- src/routes/profiles.js: house short-circuit + sendHouseProfile (public
  aggregate + by_tier + public settled entries), reserved before the publish
  lookup so a user claim is shadowed.
- PublicProfile.tsx: house label 'VYNDR MODEL · PUBLIC RECORD' + hero/subtitle
  off data.house; keeps the CLV-VERIFIED record hero + TierRecord calibration
  + recent settled reads (misses included).
- opengraph-image.tsx (1200x630): house-branded eyebrow/heading.
- portrait/route.tsx: new 1080x1350 share crop (real aggregate or tagline
  fallback, never a fabricated number).
- Discoverability: 'VIEW AS PUBLIC PAGE ->' on the ledger MODEL header +
  'VIEW PUBLIC RECORD ->' under the landing ModelRecord, both to /u/vyndr.
- tests/unit/houseProfile.test.js: house resolves to user_id=NULL aggregate
  (no public_profiles row) + by_tier; unknown/unpublished user handles stay
  byte-identical 404; page renders house label + TierRecord + portrait crop.

3019 tests green (3012 -> 3019); next build EXIT=0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

BACKEND_HANDOFF.md

@@ -242,6 +242,18 @@ Published only. Unknown AND unpublished return the SAME 404 body
 }
 ```
 
+### HOUSE profile (Wave 5A, D2)
+The reserved handle `HOUSE_HANDLE` (env, default `vyndr`) resolves to the
+PUBLIC model record (`getModelAggregate()` with NO userId → the `user_id=NULL`
+ledger rows) WITHOUT a `public_profiles` row, and is ALWAYS public (the
+partner-pitch weapon). Same response shape + two extra fields:
+`{ ..., house: true, label: 'VYNDR MODEL · PUBLIC RECORD' }`. Entries are the
+public settled rows (`user_id IS NULL`, misses included). Reserved before the
+publish lookup — a user who claims it is shadowed. Every OTHER handle keeps the
+private-by-default, byte-identical-404 contract. It never 404s (a fetch failure
+degrades to an honest empty/building state). Portrait share crop: route handler
+`GET /u/[handle]/portrait` → 1080×1350 PNG (real aggregate or tagline fallback).
+
 ### `GET|POST /api/profiles/me`  (requireAuth)
 GET → `{ profile: { handle, published, created_at } | null }`.
 POST `{ handle, published }` → upsert own row (service role). Handle must

src/routes/profiles.js

@@ -19,6 +19,13 @@
  * PRIVACY: PRIVATE BY DEFAULT — `published` only flips via the explicit
  * toggle. NO EXISTENCE LEAK: an unknown handle and an unpublished handle
  * return the byte-identical 404 body.
+ *
+ * HOUSE PROFILE (Wave 5A, D2) — the reserved `HOUSE_HANDLE` (default `vyndr`)
+ * resolves to the PUBLIC model record (`getModelAggregate()` with NO userId →
+ * the `user_id = NULL` ledger rows). It needs NO public_profiles row and is
+ * ALWAYS public (it's the partner-pitch weapon: the real house record). It is
+ * the ONLY special case; every OTHER handle keeps the private-by-default,
+ * no-existence-leak contract intact.
  */
 
 const express = require('express');
@@ -30,6 +37,10 @@ const router = express.Router();
 router.use(createRateLimit({ windowMs: 60_000, max: 60 }));
 
 const HANDLE_RE = /^[a-z0-9_]{3,20}$/;
+// Reserved house handle → the public model record (user_id = NULL). Operators
+// can override via env; it must still satisfy HANDLE_RE to be reachable.
+const HOUSE_HANDLE = String(process.env.HOUSE_HANDLE || 'vyndr').trim().toLowerCase();
+const HOUSE_LABEL = 'VYNDR MODEL · PUBLIC RECORD';
 // Same 404 body for unknown AND unpublished — never confirm a handle exists.
 const NOT_FOUND = { error: 'Profile not found' };
 // Same columns as /api/ledger (routes/ledger.js ROW_COLUMNS).
@@ -94,6 +105,10 @@ router.get('/:handle', async (req, res) => {
   const handle = String(req.params.handle || '').trim().toLowerCase();
   // Invalid shape can't exist (DB CHECK) → same 404, no query needed.
   if (!HANDLE_RE.test(handle)) return res.status(404).json(NOT_FOUND);
+  // HOUSE handle → the public model record. Checked BEFORE the
+  // public_profiles lookup so the handle is reserved (a user who claims it is
+  // shadowed). This is the ONLY handle that bypasses the publish gate.
+  if (handle === HOUSE_HANDLE) return sendHouseProfile(res);
   const sb = sbOrNull();
   if (!sb) return res.status(404).json(NOT_FOUND);
   try {
@@ -131,4 +146,52 @@ router.get('/:handle', async (req, res) => {
   }
 });
 
+/**
+ * The house/model profile — the PUBLIC model record (user_id = NULL), served
+ * as a shareable /u profile WITHOUT a public_profiles row. Same response shape
+ * the page already consumes (aggregate + by_tier + settled entries), plus
+ * `house: true` + a label so the UI can distinguish it from a user profile.
+ * It always "exists" → a fetch failure degrades to an honest empty/building
+ * state, never a 404.
+ */
+async function sendHouseProfile(res) {
+  const sb = sbOrNull();
+  try {
+    // NO userId → the public `user_id = NULL` aggregate (the real house
+    // record + Wave-3 by_tier). getModelAggregate self-empties without env.
+    const aggregate = await ledgerService.getModelAggregate(sb ? { sb } : {});
+    let entries = [];
+    if (sb) {
+      // ALL public settled reads, misses included — nothing curated.
+      const { data, error } = await sb.from('ledger_entries')
+        .select(ROW_COLUMNS)
+        .is('user_id', null)
+        .not('outcome', 'is', null)
+        .order('graded_at', { ascending: false })
+        .limit(ENTRY_LIMIT);
+      if (error) throw new Error(error.message);
+      entries = data || [];
+    }
+    res.set('Cache-Control', 'public, max-age=60');
+    return res.json({
+      handle: HOUSE_HANDLE,
+      house: true,
+      label: HOUSE_LABEL,
+      aggregate,
+      entries,
+      min_sample: ledgerService.MIN_AGG_SAMPLE,
+    });
+  } catch (err) {
+    console.error('[profiles/house]', err.message);
+    return res.status(200).json({
+      handle: HOUSE_HANDLE,
+      house: true,
+      label: HOUSE_LABEL,
+      aggregate: null,
+      entries: [],
+      min_sample: ledgerService.MIN_AGG_SAMPLE,
+    });
+  }
+}
+
 module.exports = router;

tests/unit/houseProfile.test.js

@@ -0,0 +1,170 @@
+// Wave 5A (D2) — the HOUSE/model /u profile. The reserved house handle
+// (`vyndr`) resolves to the PUBLIC model record (user_id = NULL) WITHOUT a
+// public_profiles row — the partner-pitch weapon. Every OTHER handle keeps the
+// private-by-default, no-existence-leak 404 (a byte-identical body for unknown
+// AND unpublished). Supabase + auth mocked (profilesRoutes.test.js pattern) —
+// no network, no live Supabase.
+
+const express = require('express');
+const request = require('supertest');
+const fs = require('fs');
+const path = require('path');
+
+jest.mock('../../src/middleware/auth', () => ({
+  requireAuth: (req, res, next) => {
+    if (!req.headers.authorization) return res.status(401).json({ error: 'auth required' });
+    req.user = { id: 'u1', tier: 'analyst' };
+    return next();
+  },
+}));
+
+const mockState = {
+  profileRow: null,
+  ledgerRows: [],
+  filters: [], // [table, filters[]]
+};
+
+function mockChain(table) {
+  const b = { _filters: [] };
+  const rec = (op) => (...args) => { b._filters.push([op, ...args]); return b; };
+  b.select = () => b;
+  b.eq = rec('eq');
+  b.is = rec('is');
+  b.not = rec('not');
+  b.gte = rec('gte');
+  b.order = () => b;
+  b.maybeSingle = () => {
+    mockState.filters.push([table, b._filters]);
+    return Promise.resolve({ data: mockState.profileRow, error: null });
+  };
+  b.limit = () => {
+    mockState.filters.push([table, b._filters]);
+    return Promise.resolve({ data: mockState.ledgerRows, error: null, count: 0 });
+  };
+  b.then = (resolve, reject) => {
+    mockState.filters.push([table, b._filters]);
+    return Promise.resolve({ data: mockState.ledgerRows, error: null, count: 0 }).then(resolve, reject);
+  };
+  return b;
+}
+
+jest.mock('../../src/utils/supabase', () => ({
+  getSupabaseServiceClient: () => ({ from: (table) => mockChain(table) }),
+}));
+
+process.env.SUPABASE_URL = 'https://test.supabase.co';
+process.env.SUPABASE_SERVICE_ROLE_KEY = 'test-key';
+
+function mountApp() {
+  // resetModules forces profiles.js to re-read process.env.HOUSE_HANDLE (jest
+  // ignores require.cache deletes). The jest.mock factories re-apply.
+  jest.resetModules();
+  const routes = require('../../src/routes/profiles');
+  const app = express();
+  app.use(express.json());
+  app.use('/api/profiles', routes);
+  return app;
+}
+
+beforeEach(() => {
+  mockState.profileRow = null;
+  mockState.ledgerRows.length = 0;
+  mockState.filters.length = 0;
+});
+
+describe('GET /api/profiles/vyndr — the HOUSE/model profile', () => {
+  test('resolves the public user_id=NULL aggregate with NO public_profiles row', async () => {
+    // Note: profileRow stays null — the house handle must NOT need a claim.
+    mockState.ledgerRows.push({ id: 'r1', player_name: 'Judge', outcome: 'hit', grade: 'A', clv_result: 'beat', clv: 0.5 });
+    const res = await request(mountApp()).get('/api/profiles/vyndr');
+
+    expect(res.status).toBe(200);
+    expect(res.body.handle).toBe('vyndr');
+    expect(res.body.house).toBe(true);
+    expect(res.body.label).toBe('VYNDR MODEL · PUBLIC RECORD');
+    expect(res.body.min_sample).toBe(20);
+    expect(res.body.aggregate).toBeTruthy();
+    // Wave 3 per-tier calibration rides along inside the aggregate.
+    expect(res.body.aggregate.by_tier).toBeDefined();
+    // n<20 gate honored: hit_pct is present but null (not a small-sample %).
+    expect(res.body.aggregate.hit_pct).toBeNull();
+    expect(Array.isArray(res.body.entries)).toBe(true);
+
+    // The public_profiles table was NEVER queried (handle is reserved).
+    expect(mockState.filters.filter(([t]) => t === 'public_profiles')).toHaveLength(0);
+
+    // Every ledger query is the PUBLIC record (user_id IS NULL), never a user.
+    const ledgerQueries = mockState.filters.filter(([t]) => t === 'ledger_entries');
+    expect(ledgerQueries.length).toBeGreaterThan(0);
+    for (const [, filters] of ledgerQueries) {
+      expect(filters.some((f) => f[0] === 'is' && f[1] === 'user_id' && f[2] === null)).toBe(true);
+      expect(filters.some((f) => f[0] === 'eq' && f[1] === 'user_id')).toBe(false);
+    }
+    // The entries list is settled rows only.
+    const entriesQ = ledgerQueries.find(([, f]) => f.some((x) => x[0] === 'not' && x[1] === 'outcome'));
+    expect(entriesQ).toBeTruthy();
+  });
+
+  test('honors an env override for the house handle', async () => {
+    const prev = process.env.HOUSE_HANDLE;
+    process.env.HOUSE_HANDLE = 'house';
+    try {
+      const res = await request(mountApp()).get('/api/profiles/house');
+      expect(res.status).toBe(200);
+      expect(res.body.house).toBe(true);
+      // The default handle is no longer reserved → falls through to 404.
+      const other = await request(mountApp()).get('/api/profiles/vyndr');
+      expect(other.status).toBe(404);
+    } finally {
+      if (prev === undefined) delete process.env.HOUSE_HANDLE; else process.env.HOUSE_HANDLE = prev;
+    }
+  });
+});
+
+describe('privacy preserved — the house handle is the ONLY special case', () => {
+  test('NO EXISTENCE LEAK — unknown and unpublished USER handles are byte-identical 404s', async () => {
+    mockState.profileRow = null;
+    const unknown = await request(mountApp()).get('/api/profiles/ghost_handle');
+
+    mockState.profileRow = { user_id: 'u3', handle: 'private_kev', published: false };
+    const unpublished = await request(mountApp()).get('/api/profiles/private_kev');
+
+    expect(unknown.status).toBe(404);
+    expect(unpublished.status).toBe(404);
+    expect(unknown.body).toEqual(unpublished.body);
+    expect(unknown.body).toEqual({ error: 'Profile not found' });
+  });
+
+  test('an unpublished USER handle still leaks NO ledger data', async () => {
+    mockState.profileRow = { user_id: 'u3', handle: 'private_kev', published: false };
+    mockState.ledgerRows.push({ id: 'r1', player_name: 'Judge', outcome: 'hit', grade: 'A' });
+    const res = await request(mountApp()).get('/api/profiles/private_kev');
+    expect(res.status).toBe(404);
+    expect(res.body.entries).toBeUndefined();
+    expect(mockState.filters.filter(([t]) => t === 'ledger_entries')).toHaveLength(0);
+  });
+});
+
+describe('/u/[handle] renders the house label + per-tier calibration', () => {
+  const WEB = path.join(__dirname, '..', '..', 'web', 'src');
+  const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
+
+  it('PublicProfile shows the house label off data.house + keeps TierRecord', () => {
+    const src = read('app/u/[handle]/PublicProfile.tsx');
+    expect(src).toContain('VYNDR MODEL · PUBLIC RECORD');
+    expect(src).toMatch(/data\.house/);
+    expect(src).toContain('TierRecord');
+  });
+
+  it('has a portrait 1080x1350 share crop route', () => {
+    const src = read('app/u/[handle]/portrait/route.tsx');
+    expect(src).toContain('1080');
+    expect(src).toContain('1350');
+    expect(src).not.toContain("runtime = 'edge'");
+  });
+
+  it('is discoverable — a link to /u/vyndr on the ledger + landing record surfaces', () => {
+    expect(read('app/ledger/page.tsx')).toContain('/u/vyndr');
+    expect(read('app/page.tsx')).toContain('/u/vyndr');
+  });
+});

web/src/app/ledger/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
 import { GradePill } from '@/components/GradeCard';
 import { useAuth } from '@/contexts/AuthContext';
 import { Skeleton, EmptyState, ArchetypeBadge, BookWordmark, TierRecord } from '@/components/vyndr';
@@ -284,6 +285,17 @@ function ModelHeader({ agg, minSample }: { agg: ModelAggregate; minSample: numbe
       {/* Wave 3 (Addition 2) — the ONE shared record-by-grade-tier table,
           identical here, on the dashboard, and on /u. */}
       <TierRecord byTier={agg.by_tier} minSample={minSample} />
+      {/* Wave 5A (D2) — the shareable house/model profile. Same record, a
+          public page you can hand a partner. */}
+      <div style={{ marginTop: 14, textAlign: 'right' }}>
+        <Link
+          href="/u/vyndr"
+          className="mono"
+          style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--g-a, #00D4A0)', textDecoration: 'none' }}
+        >
+          VIEW AS PUBLIC PAGE →
+        </Link>
+      </div>
     </div>
   );
 }

web/src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
 import Hero from '@/components/Hero';
@@ -85,8 +86,16 @@ export default function Home() {
       {/* Session 58 (work-order 1.4) — the public model record (proof-strip
           footer). Deferred-render: "RECORD BUILDING" until 20 settles, then
           the real hit% + beat-close%. Self-hides with no data. */}
-      <div style={{ padding: '4px 16px 12px' }}>
+      <div style={{ padding: '4px 16px 12px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
         <ModelRecord />
+        {/* Wave 5A (D2) — the shareable public model record (the house profile). */}
+        <Link
+          href="/u/vyndr"
+          className="mono"
+          style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--text-tertiary)', textDecoration: 'none' }}
+        >
+          VIEW PUBLIC RECORD →
+        </Link>
       </div>
       {/* Founder-seat scarcity meter (§12) */}
       <div style={{ padding: '0 16px 8px' }}>

web/src/app/u/[handle]/PublicProfile.tsx

@@ -61,6 +61,11 @@ interface ProfilePayload {
   aggregate: ProfileAggregate | null;
   entries: ProfileRow[];
   min_sample?: number;
+  // Wave 5A (D2) — the HOUSE/model profile: the public user_id=NULL record,
+  // shareable without a claimed public_profiles row. `label` distinguishes it
+  // from a user profile ("VYNDR MODEL · PUBLIC RECORD").
+  house?: boolean;
+  label?: string;
 }
 
 const SPORT_COLOR: Record<string, string> = {
@@ -115,18 +120,21 @@ export default function PublicProfile({ handle }: { handle: string }) {
 
   const agg = data.aggregate;
   const minSample = Number(data.min_sample) > 0 ? Number(data.min_sample) : 20;
+  const isHouse = Boolean(data.house);
 
   return (
     <section style={{ maxWidth: 1100, margin: '0 auto', padding: '32px 16px 120px' }}>
       <header style={{ marginBottom: 20 }}>
         <p className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--g-a, #00D4A0)', marginBottom: 8 }}>
-          PUBLIC LEDGER
+          {isHouse ? (data.label || 'VYNDR MODEL · PUBLIC RECORD') : 'PUBLIC LEDGER'}
         </p>
         <h1 className="mono" style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 6 }}>
-          @{data.handle}
+          {isHouse ? 'VYNDR MODEL' : `@${data.handle}`}
         </h1>
         <p style={{ color: 'var(--text-secondary)', fontSize: 15 }}>
-          Every settled read. Wins and misses. Nothing curated.
+          {isHouse
+            ? 'The VYNDR model’s public record. Every graded read, wins and misses, closing-line value included.'
+            : 'Every settled read. Wins and misses. Nothing curated.'}
         </p>
       </header>
 

web/src/app/u/[handle]/opengraph-image.tsx

@@ -11,7 +11,7 @@ export const contentType = 'image/png';
 
 const BACKEND_URL = process.env.BACKEND_URL || 'http://localhost:3000';
 
-async function fetchRecord(handle: string): Promise<{ hit_pct: number | null; beat_close_pct: number | null; hits: number; misses: number } | null> {
+async function fetchRecord(handle: string): Promise<{ hit_pct: number | null; beat_close_pct: number | null; hits: number; misses: number; house: boolean } | null> {
   try {
     const r = await fetch(`${BACKEND_URL}/api/profiles/${encodeURIComponent(handle)}`, {
       headers: { Accept: 'application/json' },
@@ -21,7 +21,7 @@ async function fetchRecord(handle: string): Promise<{ hit_pct: number | null; be
     const d = await r.json();
     const agg = d && d.aggregate;
     if (!agg || agg.hit_pct == null) return null;
-    return { hit_pct: agg.hit_pct, beat_close_pct: agg.beat_close_pct ?? null, hits: agg.hits, misses: agg.misses };
+    return { hit_pct: agg.hit_pct, beat_close_pct: agg.beat_close_pct ?? null, hits: agg.hits, misses: agg.misses, house: Boolean(d.house) };
   } catch {
     return null;
   }
@@ -49,10 +49,10 @@ export default async function Image({ params }: { params: Promise<{ handle: stri
         <div style={{ display: 'flex', position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#00D4A0' }} />
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           <div style={{ display: 'flex', fontSize: 26, letterSpacing: '0.22em', color: '#00D4A0', fontWeight: 700 }}>
-            {rec ? 'CLV-VERIFIED RECORD · 30D' : 'PUBLIC LEDGER'}
+            {rec ? (rec.house ? 'VYNDR MODEL · PUBLIC RECORD' : 'CLV-VERIFIED RECORD · 30D') : 'PUBLIC LEDGER'}
           </div>
           <div style={{ display: 'flex', fontSize: 72, fontWeight: 900, letterSpacing: '-0.02em', marginTop: 14, color: '#FFFFFF' }}>
-            @{h}
+            {rec?.house ? 'VYNDR MODEL' : `@${h}`}
           </div>
           {rec ? (
             <div style={{ display: 'flex', alignItems: 'flex-end', gap: 56, marginTop: 26 }}>

web/src/app/u/[handle]/portrait/route.tsx

@@ -0,0 +1,117 @@
+import { ImageResponse } from 'next/og';
+import type { NextRequest } from 'next/server';
+
+/**
+ * /u/[handle]/portrait (Wave 5A, D2) — the PORTRAIT share crop (1080×1350,
+ * the 4:5 story/feed format from the design mockup). The square-crop OG
+ * (opengraph-image.tsx, 1200×630) unfurls a link; this is the standalone
+ * image you drop into a story or a partner deck.
+ *
+ * It reads the SAME /api/profiles/:handle payload — so the house handle
+ * (`vyndr`) renders the real public model record, a published user handle
+ * renders theirs, and anything else falls back to the tagline. NEVER a
+ * fabricated number: no record past the n-gate → the tagline, not a zero.
+ *
+ * Self-hosted standalone build → Node runtime (NOT edge; Session-53 rule).
+ */
+export const dynamic = 'force-dynamic';
+
+const SIZE = { width: 1080, height: 1350 };
+const BACKEND_URL = process.env.BACKEND_URL || 'http://localhost:3000';
+
+async function fetchRecord(handle: string): Promise<{
+  hit_pct: number | null;
+  beat_close_pct: number | null;
+  hits: number;
+  misses: number;
+  house: boolean;
+} | null> {
+  try {
+    const r = await fetch(`${BACKEND_URL}/api/profiles/${encodeURIComponent(handle)}`, {
+      headers: { Accept: 'application/json' },
+      cache: 'no-store',
+    });
+    if (!r.ok) return null;
+    const d = await r.json();
+    const agg = d && d.aggregate;
+    if (!agg || agg.hit_pct == null) return null;
+    return {
+      hit_pct: agg.hit_pct,
+      beat_close_pct: agg.beat_close_pct ?? null,
+      hits: agg.hits,
+      misses: agg.misses,
+      house: Boolean(d.house),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ handle: string }> },
+) {
+  const { handle } = await params;
+  const h = decodeURIComponent(handle || '').slice(0, 20).toLowerCase() || 'handle';
+  const rec = await fetchRecord(h);
+  const heading = rec?.house ? 'VYNDR MODEL' : `@${h}`;
+  const eyebrow = rec ? (rec.house ? 'VYNDR MODEL · PUBLIC RECORD' : 'CLV-VERIFIED RECORD · 30D') : 'PUBLIC LEDGER';
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          width: '100%',
+          height: '100%',
+          background: '#06060B',
+          color: '#E8E8F0',
+          padding: 90,
+          fontFamily: 'monospace',
+        }}
+      >
+        <div style={{ display: 'flex', position: 'absolute', top: 0, left: 0, right: 0, height: 8, background: '#00D4A0' }} />
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div style={{ display: 'flex', fontSize: 30, letterSpacing: '0.22em', color: '#00D4A0', fontWeight: 700 }}>
+            {eyebrow}
+          </div>
+          <div style={{ display: 'flex', fontSize: 84, fontWeight: 900, letterSpacing: '-0.02em', marginTop: 18, color: '#FFFFFF' }}>
+            {heading}
+          </div>
+        </div>
+
+        {rec ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 44 }}>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div style={{ display: 'flex', fontSize: 240, fontWeight: 900, lineHeight: 1, color: '#00D4A0' }}>{rec.hit_pct}%</div>
+              <div style={{ display: 'flex', fontSize: 30, letterSpacing: '0.14em', color: '#7A7A8E', marginTop: 12 }}>HIT RATE · {rec.hits}-{rec.misses}</div>
+            </div>
+            {rec.beat_close_pct != null && (
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div style={{ display: 'flex', fontSize: 128, fontWeight: 900, lineHeight: 1, color: '#FFFFFF' }}>{rec.beat_close_pct}%</div>
+                <div style={{ display: 'flex', fontSize: 30, letterSpacing: '0.14em', color: '#7A7A8E', marginTop: 12 }}>BEAT CLOSE</div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div style={{ display: 'flex', fontSize: 40, color: '#7A7A8E', lineHeight: 1.4 }}>
+            CLV-verified record · every settled read · misses included
+          </div>
+        )}
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+          <div style={{ display: 'flex', fontSize: 60, fontWeight: 900, letterSpacing: '0.08em' }}>
+            <span style={{ color: '#FFFFFF' }}>VYND</span>
+            <span style={{ color: '#00D4A0' }}>R</span>
+          </div>
+          <div style={{ display: 'flex', fontSize: 26, color: '#4A4A5E', letterSpacing: '0.12em' }}>
+            NOTHING CURATED · NOTHING DELETED
+          </div>
+        </div>
+      </div>
+    ),
+    { ...SIZE },
+  );
+}