Session 36: Design system Phase E — remaining screens + dashboard Bloomberg lines (1853 tests)

VYNDR 2.0 conversion, Phase E. Frontend-only; zero backend changes.

- lib/slateAdapter.js: parseAmericanOdds, detectBestLines, mapScheduleToGameCards
  (best/worst line detection — the Bloomberg pattern).
- Reskinned the LEGACY GameCard's game-lines grid with best/worst highlighting +
  SportBadge, keeping inline grading intact (a wholesale swap to the display-only
  vyndr/GameCard would have deleted the slate's grading interaction).
- compare/invite/help/about: RouteStubs -> real design-system pages.
- login reskinned (scanlines, system voice, new Wordmark); pricing + ClaimMeter.

Honest scope: the full GameCard swap needs inline grading ported into the new
component first; profile/settings/blog/game-detail reskins are light/deferred.

18 new tests. Backend 1839 -> 1853, 144 suites, zero regressions. Web build clean.

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

web/src/app/about/page.tsx

@@ -1,13 +1,47 @@
-import RouteStub from '@/components/vyndr/RouteStub';
+import SectionHead from '@/components/vyndr/SectionHead';
+import { Wordmark } from '@/components/vyndr';
 
 export const metadata = { title: 'About' };
 
+// Brand page in system voice (§3). Server component.
 export default function AboutPage() {
   return (
-    <RouteStub
-      title="About"
-      arriving="SESSION 36"
-      blurb="The books have every advantage. We built this to give it back. Built by Kevon Butler · Detroit."
-    />
+    <section style={{ maxWidth: 680, margin: '0 auto', padding: '40px 16px 96px' }}>
+      <div style={{ marginBottom: 28 }}>
+        <Wordmark size="lg" cursor beta />
+      </div>
+
+      <h1 style={{ fontSize: 'clamp(28px, 6vw, 40px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: 20, color: 'var(--text-0)' }}>
+        The books have every advantage. We built this to give it back.
+      </h1>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
+        <p className="mono" style={{ fontSize: 14.5, color: 'var(--text-1)', lineHeight: 1.7 }}>
+          VYNDR is prop intelligence — a proprietary terminal that reads the context the books hide.
+          Beyond the box score: form, matchup, usage, rest, the cascade when a star sits. Then a single
+          grade, earned across 40+ factors, that tells you whether the number is worth taking.
+        </p>
+        <p className="mono" style={{ fontSize: 14.5, color: 'var(--text-1)', lineHeight: 1.7 }}>
+          We are an analytics tool, not a sportsbook. We don&apos;t take wagers. We hand you the read and
+          the kill conditions, and let you decide.
+        </p>
+
+        <div>
+          <SectionHead style={{ marginBottom: 12 }}>BUILT BY</SectionHead>
+          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, padding: 18 }}>
+            <div style={{ fontSize: 17, fontWeight: 800 }}>Kevon Butler</div>
+            <div className="mono" style={{ fontSize: 12.5, color: 'var(--text-1)', marginTop: 4 }}>Founder · Detroit</div>
+            <p className="mono" style={{ fontSize: 13.5, color: 'var(--text-1)', lineHeight: 1.65, marginTop: 12 }}>
+              A glitch between a tech-genius mind and a love for sports. Built in Detroit, for everyone the
+              books count on staying in the dark.
+            </p>
+          </div>
+        </div>
+
+        <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-2)', letterSpacing: '0.08em' }}>
+          BUILT BY KEVON BUTLER · DETROIT · © 2026 VYNDR
+        </div>
+      </div>
+    </section>
   );
 }

web/src/app/compare/page.tsx

@@ -1,13 +1,68 @@
-import RouteStub from '@/components/vyndr/RouteStub';
+'use client';
 
-export const metadata = { title: 'Compare' };
+import { useState } from 'react';
+import SectionHead from '@/components/vyndr/SectionHead';
+import GradeBadge from '@/components/vyndr/GradeBadge';
+import TerminalInput from '@/components/vyndr/TerminalInput';
+
+// Head-to-head player comparison (§6). Sample data for now — real player
+// resolution wires to /api/players/search + game logs in a later pass.
+const SAMPLE = {
+  a: { name: 'Nikola Jokić', team: 'DEN', rows: { 'L10 PTS': '28.4', 'L10 REB': '12.1', 'L10 AST': '9.8', 'Usage%': '29.1', 'Grade': 'A+' } },
+  b: { name: 'Victor Wembanyama', team: 'SA', rows: { 'L10 PTS': '26.9', 'L10 REB': '10.4', 'L10 AST': '4.2', 'Usage%': '31.0', 'Grade': 'A' } },
+};
+const ROW_KEYS = ['L10 PTS', 'L10 REB', 'L10 AST', 'Usage%', 'Grade'];
+
+const num = (v: string) => parseFloat(v.replace(/[^\d.]/g, ''));
 
 export default function ComparePage() {
+  const [a, setA] = useState('Nikola Jokić');
+  const [b, setB] = useState('Victor Wembanyama');
+
   return (
-    <RouteStub
-      title="Compare"
-      arriving="SESSION 36"
-      blurb="Two players head-to-head — markets, form, and the verdict on who has the edge tonight."
-    />
+    <section style={{ maxWidth: 860, margin: '0 auto', padding: '28px 16px 96px' }}>
+      <SectionHead accent="var(--g-a)">▚ HEAD TO HEAD</SectionHead>
+      <h1 className="mono" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', margin: '8px 0 18px' }}>COMPARE</h1>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
+        <TerminalInput prompt="›" value={a} onChange={setA} placeholder="Player A" />
+        <TerminalInput prompt="›" value={b} onChange={setB} placeholder="Player B" amber />
+      </div>
+
+      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr', padding: '14px 16px', background: 'var(--bg-2)', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
+          <div style={{ fontSize: 16, fontWeight: 800, textAlign: 'right' }}>{SAMPLE.a.name} <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)' }}>{SAMPLE.a.team}</span></div>
+          <div className="label" style={{ textAlign: 'center' }}>VS</div>
+          <div style={{ fontSize: 16, fontWeight: 800 }}>{SAMPLE.b.name} <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)' }}>{SAMPLE.b.team}</span></div>
+        </div>
+        {ROW_KEYS.map((k) => {
+          const av = SAMPLE.a.rows[k as keyof typeof SAMPLE.a.rows];
+          const bv = SAMPLE.b.rows[k as keyof typeof SAMPLE.b.rows];
+          const isGrade = k === 'Grade';
+          const aWins = !isGrade && num(av) >= num(bv);
+          const bWins = !isGrade && num(bv) >= num(av);
+          return (
+            <div key={k} style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr', padding: '11px 16px', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
+              <div className="mono" style={{ textAlign: 'right', fontSize: 15, fontWeight: 700, color: aWins ? 'var(--g-a)' : 'var(--text-0)' }}>
+                {isGrade ? <GradeBadge grade={av} size="sm" glow /> : av}
+              </div>
+              <div className="label" style={{ textAlign: 'center' }}>{k}</div>
+              <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: bWins ? 'var(--g-a)' : 'var(--text-0)' }}>
+                {isGrade ? <GradeBadge grade={bv} size="sm" glow /> : bv}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="intel-surface scanlines" style={{ marginTop: 16, borderRadius: 10, padding: '16px 18px', position: 'relative', overflow: 'hidden' }}>
+        <div style={{ position: 'relative', zIndex: 2 }}>
+          <div className="label" style={{ color: 'rgba(232,255,244,.6)', marginBottom: 6 }}>VYNDR VERDICT</div>
+          <div className="mono" style={{ fontSize: 14, color: '#e8fff4', lineHeight: 1.6 }}>
+            {SAMPLE.a.name} carries the higher floor on usage and playmaking — the edge tonight tilts his way.
+          </div>
+        </div>
+      </div>
+    </section>
   );
 }

web/src/app/help/page.tsx

@@ -1,13 +1,64 @@
-import RouteStub from '@/components/vyndr/RouteStub';
+'use client';
 
-export const metadata = { title: 'Help' };
+import { useMemo, useState } from 'react';
+import SectionHead from '@/components/vyndr/SectionHead';
+import TerminalInput from '@/components/vyndr/TerminalInput';
+
+const FAQ: { cat: string; q: string; a: string }[] = [
+  { cat: 'GRADES', q: 'What does a VYNDR grade mean?', a: 'A grade is our confidence that a prop hits, weighed across 40+ factors. A+ is the rarest and strongest; D means stay away. The letter is earned, not opinion.' },
+  { cat: 'GRADES', q: 'What is a kill condition?', a: 'A red flag we detect that can sink a prop regardless of the stats — a blowout risk, a minutes cap, a brutal matchup. Analyst and Desk see them in full.' },
+  { cat: 'READS', q: 'How many free reads do I get?', a: 'Five reads every calendar month on the Free tier. The counter resets at the start of each month.' },
+  { cat: 'READS', q: 'What counts as a read?', a: 'Grading one prop. Viewing the same prop twice in a session only counts once.' },
+  { cat: 'PLANS', q: 'What do Analyst and Desk unlock?', a: 'Analyst unlocks unlimited reads, every signal, and kill conditions. Desk adds the alt-line ladder and the full intelligence layer.' },
+  { cat: 'DATA', q: 'Where does the data come from?', a: 'Live odds, schedules, injuries, and box scores from multiple providers — refreshed continuously so the signal stays current.' },
+];
 
 export default function HelpPage() {
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState<number | null>(null);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return FAQ;
+    return FAQ.filter((f) => f.q.toLowerCase().includes(q) || f.a.toLowerCase().includes(q) || f.cat.toLowerCase().includes(q));
+  }, [query]);
+
   return (
-    <RouteStub
-      title="Help & FAQ"
-      arriving="SESSION 36"
-      blurb="Searchable answers on grades, reads, plans, and how to read the signal."
-    />
+    <section style={{ maxWidth: 720, margin: '0 auto', padding: '28px 16px 96px' }}>
+      <SectionHead accent="var(--g-a)">▚ SUPPORT</SectionHead>
+      <h1 className="mono" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', margin: '8px 0 18px' }}>HELP &amp; FAQ</h1>
+
+      <div style={{ marginBottom: 20 }}>
+        <TerminalInput prompt="›" value={query} onChange={setQuery} placeholder="Search the manual…" />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {filtered.map((f, i) => {
+          const isOpen = open === i;
+          return (
+            <div key={i} className="scanlines" style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
+              <button
+                onClick={() => setOpen(isOpen ? null : i)}
+                aria-expanded={isOpen}
+                style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}
+              >
+                <span className="label" style={{ color: 'var(--g-a)', fontSize: 9.5 }}>{f.cat}</span>
+                <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>{f.q}</span>
+                <span className="mono" style={{ color: 'var(--text-1)' }}>{isOpen ? '−' : '+'}</span>
+              </button>
+              {isOpen && (
+                <div className="mono" style={{ padding: '0 16px 16px', fontSize: 13, color: 'var(--text-1)', lineHeight: 1.65 }}>{f.a}</div>
+              )}
+            </div>
+          );
+        })}
+        {filtered.length === 0 && (
+          <div className="mono" style={{ padding: 16, fontSize: 13, color: 'var(--text-1)' }}>No answers matched &ldquo;{query}&rdquo;.</div>
+        )}
+      </div>
+
+      <div className="mono" style={{ marginTop: 24, fontSize: 13, color: 'var(--text-1)' }}>
+        Still stuck? <a href="mailto:support@vyndr.app" style={{ color: 'var(--g-a)', textDecoration: 'none' }}>support@vyndr.app</a>
+      </div>
+    </section>
   );
 }

web/src/app/invite/page.tsx

@@ -1,13 +1,63 @@
-import RouteStub from '@/components/vyndr/RouteStub';
+'use client';
 
-export const metadata = { title: 'Invite' };
+import { useState } from 'react';
+import SectionHead from '@/components/vyndr/SectionHead';
+import VBtn from '@/components/vyndr/VBtn';
+import { useAuth } from '@/contexts/AuthContext';
 
+// Referral system (§12) — bring 3 friends → free Analyst. Progress is read
+// from the session when available; the live invite ledger wires in later.
 export default function InvitePage() {
+  const { user } = useAuth();
+  const [copied, setCopied] = useState(false);
+  const code = (user?.email?.split('@')[0] || 'signal').replace(/[^a-z0-9]/gi, '').toUpperCase().slice(0, 10) || 'SIGNAL';
+  const link = `https://vyndr.app/?ref=${code}`;
+  const invited = 0;
+  const goal = 3;
+
+  const copy = () => {
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      void navigator.clipboard.writeText(link);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    }
+  };
+
   return (
-    <RouteStub
-      title="Invite"
-      arriving="SESSION 36"
-      blurb="Bring three friends onto the signal and your Analyst plan is on the house."
-    />
+    <section style={{ maxWidth: 640, margin: '0 auto', padding: '28px 16px 96px' }}>
+      <SectionHead accent="var(--amber)">▚ REFERRAL</SectionHead>
+      <h1 className="mono" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', margin: '8px 0 8px' }}>INVITE</h1>
+      <p className="mono" style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.6, marginBottom: 24 }}>
+        Bring <span style={{ color: 'var(--g-a)', fontWeight: 700 }}>3 friends</span> onto the signal and your Analyst plan is on the house — locked for as long as they stay.
+      </p>
+
+      {/* Progress */}
+      <div style={{ marginBottom: 24 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+          <span className="label">FRIENDS JOINED</span>
+          <span className="mono" style={{ fontSize: 13, fontWeight: 700, color: 'var(--g-a)' }}>{invited} / {goal}</span>
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {Array.from({ length: goal }).map((_, i) => (
+            <div key={i} style={{ flex: 1, height: 6, borderRadius: 4, background: i < invited ? 'var(--g-a)' : 'var(--bg-2)', border: '1px solid var(--border)', boxShadow: i < invited ? '0 0 10px rgba(0,212,160,.5)' : 'none' }} />
+          ))}
+        </div>
+      </div>
+
+      {/* Referral link */}
+      <div style={{ marginBottom: 16 }}>
+        <span className="label">YOUR LINK</span>
+        <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+          <div className="mono" style={{ flex: 1, padding: '11px 14px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 6, fontSize: 13, color: 'var(--g-a)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {link}
+          </div>
+          <VBtn variant={copied ? 'primary' : 'outline'} onClick={copy}>{copied ? '✓ Copied' : 'Copy'}</VBtn>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', gap: 10 }}>
+        <VBtn variant="primary" style={{ flex: 1 }} onClick={copy}>↗ Share your link</VBtn>
+      </div>
+    </section>
   );
 }

web/src/app/login/page.tsx

@@ -4,7 +4,7 @@ import { useState, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
 import { trackLogin } from '@/lib/analytics';
-import Wordmark from '@/components/Wordmark';
+import { Wordmark } from '@/components/vyndr';
 import { GoogleIcon, AppleIcon, XIcon } from '@/components/OAuthIcons';
 
 // Session 14 — small helper so each OAuth button has the same icon+label
@@ -80,18 +80,18 @@ function LoginInner() {
   };
 
   return (
-    <section style={{ minHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 16px' }}>
-      <div className="surface diagonal-cut animate-fade-up" style={{ width: '100%', maxWidth: 420, padding: 32 }}>
+    <section className="scanlines" style={{ minHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 16px', position: 'relative' }}>
+      <div className="fade-in" style={{ width: '100%', maxWidth: 420, padding: 32, background: 'var(--bg-1)', border: '1px solid var(--border-hi)', borderRadius: 12, position: 'relative' }}>
         <a
           href="/"
           style={{ display: 'flex', justifyContent: 'center', color: 'var(--text-0)', textDecoration: 'none', marginBottom: 24 }}
           aria-label="VYNDR — home"
         >
-          <Wordmark size={26} />
+          <Wordmark size="md" cursor beta />
         </a>
 
-        <h1 style={{ fontSize: 24, fontWeight: 700, textAlign: 'center', marginBottom: 6 }}>Log in</h1>
-        <p style={{ textAlign: 'center', color: 'var(--text-secondary)', fontSize: 13, marginBottom: 24 }}>
+        <h1 className="mono" style={{ fontSize: 18, fontWeight: 800, textAlign: 'center', marginBottom: 6, letterSpacing: '0.04em' }}>ACCESS THE SIGNAL</h1>
+        <p className="mono" style={{ textAlign: 'center', color: 'var(--text-1)', fontSize: 12.5, marginBottom: 24 }}>
           Welcome back. Let&apos;s read something.
         </p>
 

web/src/app/pricing/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import Pricing from '@/components/Pricing';
+import { ClaimMeter } from '@/components/vyndr';
 
 export const metadata: Metadata = {
   title: 'Pricing — VYNDR',
@@ -33,8 +34,12 @@ export const metadata: Metadata = {
  */
 export default function PricingPage() {
   return (
-    <main style={{ minHeight: '100vh', paddingTop: 64 }}>
+    <main style={{ minHeight: '100vh' }}>
       <Pricing />
+      {/* Founder-seat scarcity under the grid (§12) */}
+      <div style={{ padding: '8px 16px 48px' }}>
+        <ClaimMeter />
+      </div>
     </main>
   );
 }

web/src/components/GameCard.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 import type { PropRowProp, PropRowResult, Tier } from '@/components/PropRow';
+import SportBadge from '@/components/vyndr/SportBadge';
+import SectionHead from '@/components/vyndr/SectionHead';
+import { detectBestLines } from '@/lib/slateAdapter';
 // Session 19 — PlayerCard groups props by player so a single player
 // with 4 props renders as ONE card with their headshot + 4 stat
 // lines, instead of 4 independent stripes that repeat the name.
@@ -20,13 +23,6 @@ import PlayerCard, { groupPropsByPlayer } from '@/components/PlayerCard';
 
 export type SlateSport = 'nba' | 'wnba' | 'mlb' | 'soccer';
 
-const SPORT_EMOJI: Record<SlateSport, string> = {
-  nba: '🏀',
-  wnba: '🏀',
-  mlb: '⚾',
-  soccer: '⚽',
-};
-
 const SPORT_ACCENT: Record<SlateSport, string> = {
   nba: '#E94B3C',
   wnba: '#FFB347',
@@ -172,12 +168,27 @@ export function teamAbbr(fullName: string, sport: SlateSport): string {
   return fullName.slice(0, 4).toUpperCase();
 }
 
-const SPORT_LABEL: Record<SlateSport, string> = {
-  nba: 'NBA',
-  wnba: 'WNBA',
-  mlb: 'MLB',
-  soccer: 'SOCCER',
-};
+// Bloomberg line cell (Session 36): best = green tint + green left border,
+// worst = subtle red. The #1 visual upgrade (§13).
+function LineCell({ value, best, worst }: { value: string; best?: boolean; worst?: boolean }) {
+  return (
+    <div
+      className="mono"
+      style={{
+        padding: '7px 6px',
+        textAlign: 'center',
+        fontSize: 12.5,
+        fontWeight: best ? 700 : 500,
+        color: best ? 'var(--g-a)' : worst ? '#ff8a8a' : 'var(--text-0)',
+        background: best ? 'rgba(0,212,160,.13)' : worst ? 'rgba(255,82,82,.07)' : 'transparent',
+        borderLeft: best ? '2px solid var(--g-a)' : worst ? '2px solid rgba(255,82,82,.4)' : '2px solid transparent',
+        borderRadius: 3,
+      }}
+    >
+      {value}
+    </div>
+  );
+}
 
 export default function GameCard(props: GameCardProps) {
   const {
@@ -189,7 +200,8 @@ export default function GameCard(props: GameCardProps) {
   } = props;
   const [expanded, setExpanded] = useState(false);
   const badge = statusBadge(status, score);
-  const bookRows = gameLines?.books ? Object.entries(gameLines.books) : [];
+  // Session 36 — best/worst line detection (Bloomberg pattern) via slateAdapter.
+  const lineRows = gameLines?.books ? detectBestLines(gameLines.books) : [];
   const streakRows = (streaks || []).filter((s) => s && s.player && s.description);
 
   // Session 19 — visibility budget now applies to PLAYERS, not raw
@@ -240,7 +252,7 @@ export default function GameCard(props: GameCardProps) {
               letterSpacing: '-0.02em',
             }}
           >
-            <span aria-hidden style={{ fontSize: 15 }}>{SPORT_EMOJI[sport]}</span>
+            <SportBadge sport={sport} size="sm" />
             <span className="mono" style={{ letterSpacing: '0.04em' }}>
               {teamAbbr(awayTeam, sport)}
             </span>
@@ -250,22 +262,6 @@ export default function GameCard(props: GameCardProps) {
             <span className="mono" style={{ letterSpacing: '0.04em' }}>
               {teamAbbr(homeTeam, sport)}
             </span>
-            <span
-              className="mono"
-              style={{
-                marginLeft: 'auto',
-                fontSize: 10,
-                fontWeight: 700,
-                color: '#0A0A0F',
-                background: accent,
-                padding: '3px 8px',
-                borderRadius: 4,
-                letterSpacing: '0.08em',
-              }}
-              aria-label={`Sport: ${SPORT_LABEL[sport]}`}
-            >
-              {SPORT_LABEL[sport]}
-            </span>
           </div>
           <div
             style={{
@@ -331,41 +327,31 @@ export default function GameCard(props: GameCardProps) {
           spread, total. Renders only when lines exist; never blocks the
           card. The brand edge is props, but lines give immediate action
           even when props haven't been published. */}
-      {bookRows.length > 0 && (
+      {lineRows.length > 0 && (
         <div
           style={{
             padding: '12px 20px 14px',
             borderTop: '1px solid var(--border, #1A1A24)',
-            display: 'grid',
-            gap: 8,
             background: 'rgba(255,255,255,0.015)',
           }}
         >
-          <div
-            className="mono"
-            style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--text-tertiary, #6B6B7B)', textTransform: 'uppercase' }}
-          >
-            Game Lines
+          <SectionHead style={{ marginBottom: 10 }}>
+            GAME LINES <span style={{ color: 'var(--text-2)' }}>· {lineRows.length} BOOK{lineRows.length === 1 ? '' : 'S'}</span>
+          </SectionHead>
+          <div style={{ display: 'grid', gridTemplateColumns: '72px 1fr 1fr 1fr', gap: '2px 6px', alignItems: 'center' }}>
+            <div className="label" style={{ fontSize: 10 }}>BOOK</div>
+            <div className="label" style={{ fontSize: 10, textAlign: 'center' }}>{teamAbbr(awayTeam, sport)} ML</div>
+            <div className="label" style={{ fontSize: 10, textAlign: 'center' }}>{teamAbbr(homeTeam, sport)} ML</div>
+            <div className="label" style={{ fontSize: 10, textAlign: 'center' }}>O/U</div>
+            {lineRows.map((r) => (
+              <span key={r.book} style={{ display: 'contents' }}>
+                <div className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-1)', textTransform: 'capitalize', paddingLeft: 2, alignSelf: 'center' }}>{r.book}</div>
+                <LineCell value={r.awayML} best={r.bestAway} worst={r.worstAway} />
+                <LineCell value={r.homeML} best={r.bestHome} worst={r.worstHome} />
+                <LineCell value={r.ou} />
+              </span>
+            ))}
           </div>
-          {bookRows.map(([book, line]) => (
-            <div
-              key={book}
-              className="mono"
-              style={{
-                display: 'grid',
-                gridTemplateColumns: '72px 1fr 1fr 1fr',
-                gap: 8,
-                fontSize: 11.5,
-                alignItems: 'baseline',
-                color: 'var(--text-secondary, #8A8A9A)',
-              }}
-            >
-              <span style={{ color: 'var(--text-0, #F0F0F5)', fontWeight: 700, textTransform: 'capitalize' }}>{book}</span>
-              <span>{line.awayML ? `${teamAbbr(awayTeam, sport)} ${line.awayML}` : '—'}</span>
-              <span>{line.homeML ? `${teamAbbr(homeTeam, sport)} ${line.homeML}` : '—'}</span>
-              <span style={{ textAlign: 'right' }}>{line.total ? `O/U ${line.total}` : '—'}</span>
-            </div>
-          ))}
         </div>
       )}
 

web/src/lib/slateAdapter.js

@@ -0,0 +1,126 @@
+/* ============================================================
+   VYNDR 2.0 — slate adapter (§7, §E.1).
+   Merges schedule + gamelines + streaks + grades into the GameCard
+   contract, and detects the best/worst book line per game (the
+   Bloomberg pattern — the #1 visual upgrade). Plain CommonJS so the
+   .tsx cards import it (allowJs) AND Jest exercises the logic directly.
+   ============================================================ */
+
+/** American odds → decimal payout multiplier (higher = better for the bettor).
+ *  "+150" → 2.5, "-110" → ~1.909. Returns null when unparseable. */
+function parseAmericanOdds(odds) {
+  if (odds == null) return null;
+  const n = typeof odds === 'number' ? odds : parseInt(String(odds).replace(/[^\d+-]/g, ''), 10);
+  if (!Number.isFinite(n) || n === 0) return null;
+  return n > 0 ? 1 + n / 100 : 1 + 100 / Math.abs(n);
+}
+
+/** Mark the most/least favorable moneyline per side across a game's books.
+ *  Input: { book1: { awayML, homeML, total }, ... } → rows with best/worst flags.
+ *  best/worst only set when ≥2 books disagree (a lone price isn't "best"). */
+function detectBestLines(books) {
+  const entries = Object.entries(books || {});
+  const rows = entries.map(([book, ln]) => ({
+    book,
+    awayML: ln.awayML || '—',
+    homeML: ln.homeML || '—',
+    ou: ln.total != null ? `O/U ${ln.total}` : '—',
+    _away: parseAmericanOdds(ln.awayML),
+    _home: parseAmericanOdds(ln.homeML),
+  }));
+
+  const mark = (side) => {
+    const vals = rows.map((r) => r[side]).filter((v) => v != null);
+    if (vals.length < 2) return [null, null];
+    const max = Math.max(...vals);
+    const min = Math.min(...vals);
+    return max === min ? [null, null] : [max, min];
+  };
+  const [bestAway, worstAway] = mark('_away');
+  const [bestHome, worstHome] = mark('_home');
+
+  return rows.map((r) => ({
+    book: r.book,
+    awayML: r.awayML,
+    homeML: r.homeML,
+    ou: r.ou,
+    bestAway: r._away != null && r._away === bestAway,
+    worstAway: r._away != null && r._away === worstAway,
+    bestHome: r._home != null && r._home === bestHome,
+    worstHome: r._home != null && r._home === worstHome,
+  }));
+}
+
+function formatGameTime(iso) {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleString(undefined, { weekday: 'short', hour: 'numeric', minute: '2-digit' });
+  } catch {
+    return String(iso);
+  }
+}
+
+/** Map one schedule game's lines entry → the GameCard `lines[]` contract. */
+function mapGameLines(linesEntry) {
+  if (!linesEntry || !linesEntry.books) return [];
+  return detectBestLines(linesEntry.books);
+}
+
+/**
+ * Map schedule + gamelines + streaks (+ optional grades) → GameCardData[]
+ * (§7). Pure — no API calls, no side effects.
+ */
+function mapScheduleToGameCards(schedule, gamelines, streaks, grades) {
+  const sched = Array.isArray(schedule) ? schedule : [];
+  return sched.map((g) => {
+    const id = g.id || `${g.awayTeam?.abbreviation || '?'}-${g.homeTeam?.abbreviation || '?'}`;
+    const live = g.live === true || g.status === 'in';
+    const linesEntry = gamelines && gamelines[id];
+    return {
+      id,
+      sport: (g.sport || 'nba').toLowerCase(),
+      live,
+      score: g.score ? { away: g.score.away, home: g.score.home } : undefined,
+      clock: g.clock || undefined,
+      away: { abbr: g.awayTeam?.abbreviation || '', name: g.awayTeam?.name || '' },
+      home: { abbr: g.homeTeam?.abbreviation || '', name: g.homeTeam?.name || '' },
+      time: formatGameTime(g.gameTime),
+      venue: g.venue || undefined,
+      lines: mapGameLines(linesEntry),
+      props: mapGradedProps(grades, g),
+      streaks: mapStreaks(streaks, g),
+    };
+  });
+}
+
+function mapGradedProps(grades, game) {
+  if (!Array.isArray(grades)) return [];
+  const h = (game.homeTeam?.abbreviation || '').toUpperCase();
+  const a = (game.awayTeam?.abbreviation || '').toUpperCase();
+  return grades
+    .filter((p) => {
+      const t = (p.team || '').toUpperCase();
+      return !t || t === h || t === a;
+    })
+    .map((p) => ({ player: p.player, stat: p.stat, line: p.line, grade: p.grade, side: p.side || 'Over', delta: p.delta }));
+}
+
+function mapStreaks(streaks, game) {
+  if (!Array.isArray(streaks)) return [];
+  const h = (game.homeTeam?.abbreviation || '').toUpperCase();
+  const a = (game.awayTeam?.abbreviation || '').toUpperCase();
+  return streaks
+    .filter((s) => {
+      const t = (s.team || '').toUpperCase();
+      return t && (t === h || t === a);
+    })
+    .map((s) => ({ player: s.player, text: s.text || s.description || '' }));
+}
+
+module.exports = {
+  parseAmericanOdds,
+  detectBestLines,
+  mapGameLines,
+  mapScheduleToGameCards,
+  formatGameTime,
+};