fix(#73): consume canonical Weekend Context contract and repair navigation

Address the independent review blockers on PR #80 after rebasing onto the
authoritative #72 Weekend Context API.

- Replace the invented frontend WeekendContext with the exact backend contract
  (temporal_state, previous/focus/next meetings, previous_completed/active/next/
  default_analysis sessions with availability). Every valid canonical payload now
  maps to a designed state via a total resolveViewState; a well-formed response
  can never fall through to the limited-data placeholder.
- Make the canonical read the single source of truth: useWeekendContext no longer
  fans out to season/meetings/per-weekend/OpenF1/live queries. Only supplementary
  championship + news reads run, and only once the canonical context resolves.
- Fix the Prepare/analysis flow: /preview is a stable alias that renders the
  preparation surface (PreSessionView) instead of redirecting back to the same
  between-races screen.
- One primary navigation system per breakpoint: the mobile top-bar links are
  hidden so the bottom bar is the sole primary nav, and Admin is moved out of
  every Primary landmark into an operator-utilities toolbar.
- Add Vitest coverage for the contract mapping, every temporal state, loading/
  error/limited surfaces, the no-fanout guarantee, the /preview CTA, and the nav
  hierarchy; add hermetic Playwright journeys (seeded + injected canonical
  payloads), 390/768/1440 overflow checks, and Weekend visual snapshots. Retire
  the stale Command Center specs/snapshots.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/weekend/BetweenRacesView.tsx

@@ -1,18 +1,24 @@
 import { Link } from '@tanstack/react-router'
 import { ChevronRight, Flag as FlagIcon } from 'lucide-react'
-import type { WeekendContext } from '../../types'
+import type {
+  WeekendBriefingItem,
+  WeekendChampionshipImpact,
+  WeekendContext,
+  WeekendViewState,
+} from '../../types'
 import {
   BriefingStrip,
   ChampionshipImpactCard,
+  ChampionshipRoundStrip,
   CountdownDisplay,
   EventPodium,
   Flag,
-  SeasonNavStrip,
 } from './shared'
+import { analysisSessionKey, meetingIdentity } from '../../lib/weekendContext'
 import { parseScheduleTime } from '../../lib/schedule'
 
 const EYEBROW: Record<string, string> = {
-  between_races: 'Between races',
+  between_weekends: 'Between races',
   post_weekend: 'Post-weekend',
   season_complete: 'Season complete',
 }
@@ -30,63 +36,85 @@ function formatSessionLine(name: string | undefined, start: string | undefined):
   return `${name} · ${when}`
 }
 
-export function BetweenRacesView({ context, now }: { context: WeekendContext; now: Date }) {
-  const { last_event, next_event, championship_impact, season_rounds, briefing } = context
-  const eyebrow = EYEBROW[context.state] ?? 'Between races'
+export function BetweenRacesView({
+  context,
+  now,
+  view,
+  championship,
+  briefing,
+}: {
+  context: WeekendContext
+  now: Date
+  view: WeekendViewState
+  championship?: WeekendChampionshipImpact
+  briefing: WeekendBriefingItem[]
+}) {
+  const eyebrow = EYEBROW[view] ?? 'Between races'
+
+  const previous = context.previous_completed_session
+  const previousMeeting = meetingIdentity(previous?.meeting ?? context.previous_meeting)
+  const nextMeeting = meetingIdentity(context.next_meeting)
+  const nextSession = context.next_session?.session
+  const analysisKey = analysisSessionKey(context)
 
   return (
-    <div className="wk-between" data-testid="weekend-between-races" data-state={context.state}>
+    <div className="wk-between" data-testid="weekend-between-races" data-state={view}>
       <div className="wk-eyebrow mono" data-testid="wk-eyebrow">{eyebrow}</div>
 
       <div className="wk-top-grid">
-        {last_event && (
+        {previousMeeting && (
           <section className="wk-event-card wk-event-last" data-testid="wk-last-event">
             <header className="wk-event-head">
               <div className="wk-event-id">
-                <Flag code={last_event.country_code} flag={last_event.country_flag} />
-                <h2 className="wk-event-name">{last_event.meeting_name}</h2>
+                <Flag code={previousMeeting.country_code} flag={previousMeeting.country_flag} />
+                <h2 className="wk-event-name">{previousMeeting.meeting_name}</h2>
               </div>
               <span className="wk-event-tag wk-tag-done mono">
                 <FlagIcon size={13} aria-hidden="true" /> Completed
               </span>
             </header>
             <div className="wk-event-body">
-              <EventPodium event={last_event} />
+              <EventPodium sessionKey={analysisKey} />
               <div className="wk-story-card">
                 <span className="wk-story-label">What decided it?</span>
-                {last_event.story && <p className="wk-story-text">{last_event.story}</p>}
-                <Link
-                  to="/race-hub"
-                  search={{ session_key: last_event.analysis_session_key }}
-                  className="wk-cta wk-cta-primary"
-                  data-testid="wk-explore-race-story"
-                >
-                  Explore Race Story <ChevronRight size={15} aria-hidden="true" />
-                </Link>
+                {analysisKey ? (
+                  <Link
+                    to="/race-hub"
+                    search={{ session_key: analysisKey }}
+                    className="wk-cta wk-cta-primary"
+                    data-testid="wk-explore-race-story"
+                  >
+                    Explore Race Story <ChevronRight size={15} aria-hidden="true" />
+                  </Link>
+                ) : (
+                  <p className="wk-story-text" data-testid="wk-no-analysis">
+                    Analysis for this session is not available locally yet.
+                  </p>
+                )}
               </div>
             </div>
           </section>
         )}
 
-        {next_event ? (
+        {nextMeeting ? (
           <section className="wk-event-card wk-event-next" data-testid="wk-next-event">
             <header className="wk-event-head">
               <div className="wk-event-id">
-                <Flag code={next_event.country_code} flag={next_event.country_flag} />
-                <h2 className="wk-event-name">{next_event.meeting_name}</h2>
+                <Flag code={nextMeeting.country_code} flag={nextMeeting.country_flag} />
+                <h2 className="wk-event-name">{nextMeeting.meeting_name}</h2>
               </div>
               <span className="wk-event-tag wk-tag-next mono">Next event</span>
             </header>
             <div className="wk-next-body">
-              <CountdownDisplay target={next_event.next_session_start ?? next_event.date_start} now={now} />
+              <CountdownDisplay target={nextSession?.date_start ?? nextMeeting.date_start} now={now} />
               <div className="wk-next-session">
                 <span className="wk-next-label mono">Next session</span>
                 <span className="wk-next-value">
-                  {formatSessionLine(next_event.next_session_name, next_event.next_session_start)}
+                  {formatSessionLine(nextSession?.session_name, nextSession?.date_start)}
                 </span>
               </div>
               <Link to="/preview" className="wk-cta wk-cta-primary wk-cta-wide" data-testid="wk-prepare">
-                Prepare for {next_event.meeting_name.replace(/ Grand Prix$/i, '')}
+                Prepare for {nextMeeting.short_name}
                 <ChevronRight size={15} aria-hidden="true" />
               </Link>
             </div>
@@ -94,15 +122,15 @@ export function BetweenRacesView({ context, now }: { context: WeekendContext; no
         ) : (
           <section className="wk-event-card wk-event-next" data-testid="wk-season-complete-card">
             <header className="wk-event-head">
-              <h2 className="wk-event-name">That's a wrap</h2>
+              <h2 className="wk-event-name">That&apos;s a wrap</h2>
               <span className="wk-event-tag wk-tag-next mono">Off-season</span>
             </header>
             <div className="wk-next-body">
               <p className="wk-season-complete-copy">
-                The {context.season} calendar is complete. Explore the season's races or revisit the championship
+                The {context.season} calendar is complete. Explore the season&apos;s races or revisit the championship
                 battle while the next schedule is confirmed.
               </p>
-              <Link to="/explore" className="wk-cta wk-cta-primary wk-cta-wide">
+              <Link to="/explore" className="wk-cta wk-cta-primary wk-cta-wide" data-testid="wk-season-complete-explore">
                 Explore the season <ChevronRight size={15} aria-hidden="true" />
               </Link>
             </div>
@@ -111,11 +139,14 @@ export function BetweenRacesView({ context, now }: { context: WeekendContext; no
       </div>
 
       <div className="wk-mid-grid">
-        {championship_impact && <ChampionshipImpactCard impact={championship_impact} />}
-        {season_rounds && season_rounds.length > 0 && <SeasonNavStrip rounds={season_rounds} />}
+        {championship && <ChampionshipImpactCard impact={championship} />}
+        <ChampionshipRoundStrip
+          round={context.championship_round}
+          total={context.total_championship_rounds}
+        />
       </div>
 
-      {briefing && briefing.length > 0 && <BriefingStrip items={briefing} />}
+      {briefing.length > 0 && <BriefingStrip items={briefing} />}
     </div>
   )
 }