Session 35: Design system Phase D — core screens: Grade Result, Slate card, Scan, Terminal, Landing (1839 tests)

VYNDR 2.0 conversion, Phase D (the screens users touch). Frontend-only; zero
backend changes.

- GradeResultCard + ProcessingGrade (the core product moment): intel-surface
  grade hero, signal breakdown, kill conditions, best-book strip, alt ladder;
  sections self-hide when empty.
- lib/gradeAdapter.js maps engine output -> §7 contract and tier-gates content
  (free teaser / analyst kill-conditions / desk alt ladder) so the new card
  doesn't give paid content away.
- Scan result wired to ProcessingGrade->GradeResultCard, preserving scan limits,
  parlay add, reads tracking, and noopener sportsbook deep-links.
- GameCard (Bloomberg best/worst line cells) built + tested.
- Terminal page replaces its stub with a real league-intelligence screen.
- Landing gets the founder-seat ClaimMeter.

Honest scope: live dashboard/Slate swap onto GameCard, scan input -> TerminalInput,
full landing rebuild, and the blurred-paywall polish (Phase G) are deferred to
keep working flows stable.

22 new tests. Backend 1818 -> 1839, 143 suites, zero regressions. Web build clean.

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

tests/unit/vyndrAppShell.test.js

@@ -121,7 +121,8 @@ describe('Phase C — layout wiring', () => {
 });
 
 describe('Phase C — route stubs for not-yet-built screens', () => {
-  const stubs = ['terminal', 'compare', 'invite', 'help', 'about', 'notifications'];
+  // /terminal became a real page in Session 35 (Phase D) — no longer a stub.
+  const stubs = ['compare', 'invite', 'help', 'about', 'notifications'];
   it.each(stubs)('/%s has a page that uses the design-system RouteStub', (name) => {
     expect(exists(`app/${name}/page.tsx`)).toBe(true);
     expect(read(`app/${name}/page.tsx`)).toContain('RouteStub');

tests/unit/vyndrCoreScreens.test.js

@@ -0,0 +1,153 @@
+// VYNDR 2.0 — Phase D core screens (Session 35). Adapter LOGIC is exercised
+// directly via the CommonJS gradeAdapter; the .tsx screens/components are
+// asserted against source text (the plain-JS Jest config has no TS transform).
+
+const fs = require('fs');
+const path = require('path');
+
+const WEB = path.join(__dirname, '..', '..', 'web', 'src');
+const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
+const adapter = require('../../web/src/lib/gradeAdapter');
+
+describe('Phase D — grade adapter (engine → §7 contract)', () => {
+  const base = {
+    player: 'Nikola Jokic', sport: 'NBA', stat: 'home_runs', line: 26.5, direction: 'over',
+    grade: 'A', projection: 29.4, confidence: 67, sample_size: 34,
+    factors: { matchup: 'soft interior', trend: 'hot', usage: 'up', rest: 'rested', pace: 'fast' },
+    kill_conditions: [{ code: 'BLOWOUT', reason: 'Blowout risk caps minutes' }],
+    alt_lines: [{ line: 24.5, grade: 'A+' }, { line: 28.5, grade: 'B' }],
+  };
+
+  it('maps direction → side and humanizes the stat', () => {
+    const out = adapter.mapScanToGradeResult({ ...base, tier: 'desk' });
+    expect(out.side).toBe('Over');
+    expect(out.stat).toBe('Home Runs');
+    expect(out.player).toBe('Nikola Jokic');
+  });
+
+  it('computes a signed percentage edge from projection vs line', () => {
+    expect(adapter.computeEdge(29.4, 26.5, 'over')).toBeCloseTo(10.9, 1);
+    expect(adapter.computeEdge(24, 26.5, 'over')).toBeLessThan(0);
+    expect(adapter.computeEdge(24, 26.5, 'under')).toBeGreaterThan(0);
+  });
+
+  it('flags phosphor confirmed only for A/A+ with strong support', () => {
+    expect(adapter.isPhosphorConfirmed('A+', 80, 40)).toBe(true);
+    expect(adapter.isPhosphorConfirmed('A', 50, 35)).toBe(true); // sample carries it
+    expect(adapter.isPhosphorConfirmed('B', 90, 90)).toBe(false);
+    expect(adapter.isPhosphorConfirmed('A', 40, 5)).toBe(false);
+  });
+
+  it('FREE tier teases 3 signals, hides kill conditions and the alt ladder', () => {
+    const out = adapter.mapScanToGradeResult({ ...base, tier: 'free' });
+    expect(out.signals.length).toBe(3);
+    expect(out.killConditions).toEqual([]);
+    expect(out.altLadder).toEqual([]);
+  });
+
+  it('ANALYST tier shows kill conditions + all signals, but no alt ladder', () => {
+    const out = adapter.mapScanToGradeResult({ ...base, tier: 'analyst' });
+    expect(out.signals.length).toBe(5);
+    expect(out.killConditions).toEqual(['Blowout risk caps minutes']);
+    expect(out.altLadder).toEqual([]);
+  });
+
+  it('DESK tier unlocks the alt line ladder', () => {
+    const out = adapter.mapScanToGradeResult({ ...base, tier: 'desk' });
+    expect(out.altLadder).toEqual([{ line: 24.5, grade: 'A+' }, { line: 28.5, grade: 'B' }]);
+  });
+
+  it('defaults missing fields safely', () => {
+    const out = adapter.mapScanToGradeResult({});
+    expect(out.grade).toBe('—');
+    expect(out.side).toBe('Over');
+    expect(out.signals).toEqual([]);
+    expect(out.books).toEqual([]);
+  });
+});
+
+describe('Phase D — GradeResultCard (the core moment)', () => {
+  const src = read('components/vyndr/GradeResultCard.tsx');
+  it('renders the grade letter at hero size (92–116px)', () => {
+    expect(src).toContain('116');
+    expect(src).toContain('92');
+  });
+  it('uses the intel-surface for the grade hero zone + grade-reveal', () => {
+    expect(src).toContain('intel-surface');
+    expect(src).toContain('grade-reveal');
+  });
+  it('highlights the best book with green tint + green left border', () => {
+    expect(src).toContain('rgba(0,212,160,.13)');
+    expect(src).toContain("borderLeft: b.best ? '2px solid var(--g-a)'");
+  });
+  it('renders kill conditions with amber border, gated on non-empty', () => {
+    expect(src).toContain('hasKill');
+    expect(src).toContain('rgba(255,179,71,.4)');
+    expect(src).toContain('KILL CONDITIONS');
+  });
+  it('self-hides books / alt ladder when empty', () => {
+    expect(src).toContain('hasBooks');
+    expect(src).toContain('hasAlt');
+  });
+});
+
+describe('Phase D — ProcessingGrade', () => {
+  const src = read('components/vyndr/ProcessingGrade.tsx');
+  it('plays the factor-ignite + proc-scan sequence then reveals the card', () => {
+    expect(src).toContain('factor-ignite');
+    expect(src).toContain('proc-scan');
+    expect(src).toContain('<GradeResultCard');
+  });
+});
+
+describe('Phase D — GameCard (Bloomberg best/worst lines)', () => {
+  const src = read('components/vyndr/GameCard.tsx');
+  it('renders team abbreviations', () => {
+    expect(src).toContain('g.away.abbr');
+    expect(src).toContain('g.home.abbr');
+  });
+  it('best line = green tint + green border; worst = subtle red', () => {
+    expect(src).toContain('rgba(0,212,160,.13)');
+    expect(src).toContain('rgba(255,82,82,.07)');
+  });
+  it('shows a live-dot for live games and grades props with GradeBadge', () => {
+    expect(src).toContain('live-dot');
+    expect(src).toContain('<GradeBadge');
+  });
+});
+
+describe('Phase D — ClaimMeter', () => {
+  const src = read('components/vyndr/ClaimMeter.tsx');
+  it('renders the amber founder-seat scarcity bar', () => {
+    expect(src).toContain('CLAIMED');
+    expect(src).toContain('var(--amber)');
+  });
+});
+
+describe('Phase D — Terminal page (real intelligence, not a stub)', () => {
+  const src = read('app/terminal/page.tsx');
+  it('is no longer a RouteStub', () => {
+    expect(src).not.toContain('RouteStub');
+  });
+  it('uses the intel-surface and renders the VVI / cascade / leaders sections', () => {
+    expect(src).toContain('intel-surface');
+    expect(src).toContain('VOLATILITY INDEX');
+    expect(src).toContain('INJURY WIRE');
+    expect(src).toContain('GRADEABLE LEADERS');
+  });
+});
+
+describe('Phase D — scan + landing wiring', () => {
+  it('scan renders the new ProcessingGrade card via the adapter (legacy GradeCard removed)', () => {
+    const src = read('app/scan/page.tsx');
+    expect(src).toContain('ProcessingGrade');
+    expect(src).toContain('mapScanToGradeResult');
+    expect(src).not.toContain("from '@/components/GradeCard'");
+  });
+  it('scan keeps sportsbook deep-links safe (noopener noreferrer)', () => {
+    expect(read('app/scan/page.tsx')).toContain('noopener noreferrer');
+  });
+  it('landing mounts the ClaimMeter', () => {
+    expect(read('app/page.tsx')).toContain('ClaimMeter');
+  });
+});