box-box/documentations/refactor/claude-phase-6-react-race-hub-analytics-prompt.md

Claude Prompt: Phase 6 React Race Hub Analytics

You are continuing the React frontend work for box-box.

Phase 5 added the Vite + React + TypeScript app under frontend/ and built the first Race Hub route using:

GET /api/v1/race-hub?session_key=...

Your task is Phase 6: expand Race Hub into a richer analysis surface while keeping the design F1-native and operational.

Read First

Read:

• frontend/README.md
• frontend/src/pages/RaceHubPage.tsx
• frontend/src/styles/app.css
• frontend/src/types.ts
• documentations/refactor/06-visual-design-direction.md
• documentations/refactor/13-phase-5-react-race-hub.md
• documentations/refactor/14-phase-6-react-race-hub-analytics.md
• internal/query/racehub.go

Goal

Add a more useful Race Hub interaction model: tabs or segmented views for classification, grid, strategy, position evolution, and dataset status.

Required Work

1. Add a compact Race Hub tab/segmented control.
2. Preserve the existing classification and grid views.
3. Add a Dataset Status view that makes available/missing datasets very clear.
4. Add Strategy and Position Evolution views with honest missing states if the backend does not yet expose enough data.
5. Improve the desktop information hierarchy so the timing table feels more legible and intentional.
6. Preserve the mobile table fix: active phone columns must fit the viewport.
7. Add or update frontend tests.

Guardrails

• Do not fake analytics data.
• Do not fetch OpenF1 directly from React.
• Do not start live timing React work.
• Avoid card sludge and generic SaaS dashboard patterns.
• Keep old Web UI behavior intact.
• Make backend changes only if they are tiny API contract fixes.

Verification

Run:

cd frontend
npm test -- --run
npm run build
cd ..
go build -o /tmp/box-box ./cmd/main.go

Visually check desktop and phone widths.

Final Response

Report:

• views/components added;
• API datasets used;
• tests/build results;
• desktop/mobile visual notes;
• any backend data needed for real strategy/position charts.