Merge DS4 (design): billboards — STREAKS row, grade reveal, CLV reframe, /u profile

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> # Conflicts: # web/src/app/ledger/page.tsx
2026-07-12 19:27:15 -04:00
parent 9d903ee4aa 45bafbc01a
commit 73325665ec
7 changed files with 452 additions and 74 deletions
@@ -0,0 +1,180 @@
+// DS4 (Design v2) — the BILLBOARDS. Screenshot-first surfaces (the timeline is
+// customer #1): the STREAKS row, the grade reveal, the CLV reframe, and the /u
+// public profile. The .tsx surfaces are asserted against source (plain-JS Jest,
+// no TS transform) — same pattern as publicProfilePage / vyndrParityQA. The
+// CLV flat-vs-spread decision is a pure fn and is exercised directly.
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = path.join(__dirname, '..', '..');
+const WEB = path.join(ROOT, 'web', 'src');
+const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
+
+// ── 1. CLV reframe — the pure flat/spread decision (#16) ──────────────────
+describe('clvDisplay — flat CLV says so, spread shows bars', () => {
+  const { clvMode, isFlatClv, CLV_FLAT_LINE } = require('../../web/src/lib/clvDisplay');
+
+  test('near-flat (73/74 at the close) is FLAT, not a broken histogram', () => {
+    const dist = [
+      { label: '[-.5,0)', side: 'faded', count: 0 },
+      { label: '0', side: 'flat', count: 73 },
+      { label: '(0,.5]', side: 'beat', count: 1 },
+    ];
+    expect(clvMode(dist).mode).toBe('flat');
+    expect(isFlatClv(dist)).toBe(true);
+  });
+
+  test('real dispersion is SPREAD (the bars are meaningful)', () => {
+    const dist = [
+      { label: '[-1,-.5)', side: 'faded', count: 8 },
+      { label: '[-.5,0)', side: 'faded', count: 6 },
+      { label: '0', side: 'flat', count: 5 },
+      { label: '(0,.5]', side: 'beat', count: 9 },
+      { label: '(.5,1]', side: 'beat', count: 12 },
+    ];
+    expect(clvMode(dist).mode).toBe('spread');
+    expect(isFlatClv(dist)).toBe(false);
+  });
+
+  test('null / empty / all-zero → none (renders nothing, never errored)', () => {
+    expect(clvMode(null).mode).toBe('none');
+    expect(clvMode([]).mode).toBe('none');
+    expect(clvMode([{ side: 'flat', count: 0 }, { side: 'beat', count: 0 }]).mode).toBe('none');
+  });
+
+  test('the flat line is confident + VOICE-compliant (no jargon, no hype)', () => {
+    expect(CLV_FLAT_LINE).toMatch(/grade the outcome, not the close/);
+    expect(CLV_FLAT_LINE).not.toMatch(/!/);
+    expect(CLV_FLAT_LINE.toLowerCase()).not.toMatch(/bayesian|regression|guarantee/);
+  });
+
+  test('the ledger MODEL tab renders the flat line, not a histogram, when flat', () => {
+    const src = read('app/ledger/page.tsx');
+    expect(src).toContain("import { clvMode, CLV_FLAT_LINE }");
+    expect(src).toMatch(/mode === 'flat'/);
+    expect(src).toContain('CLV_FLAT_LINE');
+    // bars still exist for the spread branch
+    expect(src).toContain('CLV DISTRIBUTION');
+  });
+});
+
+// ── 2. STREAKS row — the Bloomberg alert (#2) ─────────────────────────────
+describe('StreaksPanel — one hero figure, real identity, one accent', () => {
+  const src = read('components/StreaksPanel.tsx');
+
+  test('uses the real PlayerAvatar entity (not a bare <img>)', () => {
+    expect(src).toContain('import PlayerAvatar');
+    expect(src).toContain('<PlayerAvatar');
+    expect(src).not.toMatch(/<img\b/);
+  });
+
+  test('the streak LENGTH is the hero — the largest font in the row', () => {
+    // heroNum renders currentStreak and is the biggest fontSize; the player
+    // name is demoted well below it.
+    expect(src).toMatch(/heroNum[\s\S]*fontSize:\s*38/);
+    expect(src).toContain('{s.currentStreak}');
+    const heroSize = Number((src.match(/heroNum:[^}]*fontSize:\s*(\d+)/) || [])[1]);
+    const nameSize = Number((src.match(/playerName:[^}]*fontSize:\s*(\d+)/) || [])[1]);
+    expect(heroSize).toBeGreaterThan(nameSize);
+    expect(heroSize).toBeGreaterThanOrEqual(32);
+  });
+
+  test('the hero number is mono + tabular (data grammar)', () => {
+    expect(src).toMatch(/heroNum:[\s\S]*fontVariantNumeric:\s*'tabular-nums'/);
+  });
+
+  test('carries the muted "built vs" lens context', () => {
+    expect(src).toContain('built vs');
+    expect(src).toContain('builtVs');
+  });
+
+  test('ONE severity accent — step-up amber / step-down green', () => {
+    expect(src).toContain("diff === 'step up'");
+    expect(src).toContain('var(--amber');
+    expect(src).toContain("diff === 'step down'");
+    expect(src).toContain('var(--g-a');
+  });
+
+  test('the grade badge is tier-gated (the READ is the paid layer)', () => {
+    expect(src).toMatch(/tier === 'analyst' \|\| tier === 'desk'/);
+    expect(src).toContain('<GradeBadge');
+  });
+});
+
+// ── 3. Grade reveal — sign-colored edge (#3, the color contract) ──────────
+describe('GradeResultCard — the letter is hero, edge is sign-colored', () => {
+  const src = read('components/vyndr/GradeResultCard.tsx');
+
+  test('a negative edge NEVER renders green — negative = var(--miss)', () => {
+    expect(src).toMatch(/edgeColor\s*=\s*d\.edge != null && d\.edge < 0 \? 'var\(--miss\)' : 'var\(--g-a\)'/);
+    // both the confidence strip and the projection row use edgeColor, not a
+    // hardcoded green.
+    expect(src).toContain('color: edgeColor');
+    expect(src).toMatch(/d\.edge != null \? edgeColor : 'var\(--text-2\)'/);
+  });
+
+  test('the grade LETTER is still the hero (largest element)', () => {
+    expect(src).toMatch(/grade-hero[\s\S]*fontSize: compact \? 92 : 116/);
+  });
+
+  test('the MODEL/LINE/EDGE row is mono + tabular (demoted data)', () => {
+    expect(src).toMatch(/fontSize: 19[\s\S]*fontVariantNumeric: 'tabular-nums'/);
+  });
+
+  test('reveal choreography is reduced-motion safe', () => {
+    const proc = read('components/vyndr/ProcessingGrade.tsx');
+    expect(proc).toContain("prefers-reduced-motion: reduce");
+    expect(proc).toMatch(/setPhase\('card'\)/);
+  });
+});
+
+// ── 4. /u public profile — the shareable record billboard (#4) ────────────
+describe('PublicProfile — the record hero + CLV-verified badge', () => {
+  const src = read('app/u/[handle]/PublicProfile.tsx');
+
+  test('the hit rate is the bold hero figure (large mono tabular)', () => {
+    expect(src).toMatch(/fontSize: 56[\s\S]*fontVariantNumeric: 'tabular-nums'/);
+    expect(src).toContain('{agg.hit_pct}%');
+    expect(src).toContain('HIT RATE');
+  });
+
+  test('beat-close is the secondary bold figure', () => {
+    expect(src).toContain('{agg.beat_close_pct}%');
+    expect(src).toContain('BEAT CLOSE');
+  });
+
+  test('CLV-VERIFIED badge is HONEST — only when closing value is tracked', () => {
+    expect(src).toContain('✓ CLV-VERIFIED');
+    expect(src).toMatch(/clvVerified = Boolean\(ready && agg && agg\.beat_close_pct != null\)/);
+  });
+
+  test('still honors the n-gate: RECORD BUILDING under min_sample', () => {
+    expect(src).toContain('RECORD BUILDING');
+    expect(src).toMatch(/settled >= minSample/);
+  });
+
+  test('renders real player identity (PlayerAvatar entity)', () => {
+    expect(src).toContain('import PlayerAvatar');
+    expect(src).toContain('<PlayerAvatar');
+  });
+});
+
+// ── 5. /u OG image — the record at social crop ────────────────────────────
+describe('/u opengraph-image — real record at 1200x630 social crop', () => {
+  const src = read('app/u/[handle]/opengraph-image.tsx');
+
+  test('social crop size is preserved (1200x630)', () => {
+    expect(src).toMatch(/size = \{ width: 1200, height: 630 \}/);
+  });
+
+  test('renders the real hit% / beat-close% when the record is published', () => {
+    expect(src).toContain('{rec.hit_pct}%');
+    expect(src).toContain('{rec.beat_close_pct}%');
+    expect(src).toContain('CLV-VERIFIED RECORD');
+  });
+
+  test('falls back gracefully to the tagline when there is no record', () => {
+    expect(src).toContain('every settled read · misses included');
+  });
+});