c14d17f81f5bcf2c3d575a8027c0054219fdc516
Replace the previous one-screen SampleReport with a real two-mode dashboard
wired to every field the backend (backend/src/dtc_data.py + ai_diagnose.py
prompt) actually produces.
Easy view (owner-facing):
• Overall health ring (78/100 B+ Good)
• AI summary (plain English)
• 3 issue cards: code + title + simple_explanation + urgency + cost
Pro view (mechanic-facing):
• 5-subsystem health scores (Powertrain/Emission/Fuel/Electrical/Chassis)
with per-subsystem colored bars
• Per-fault detailed card:
– category pill, labor_hours, CHARM ✓ badge
– technical_explanation
– causes with animated probability bars (e.g. Aged cat 40%)
– numbered diagnostic_steps
– whenMonitored + setCondition
– cost range + urgency pill
• Freeze Frame Data grid (12 OBD params, out-of-range highlighted amber)
• I/M Readiness Monitors (8 monitors with Ready / Pending / Not Ready dots)
• Multi-code correlation note (blue gradient card — P0171 ↔ P0420 linkage)
• Meta footer: 706 GB CHARM + DeepSeek-R1 + timing + raw-JSON hint
Vehicle bar shows VIN and AI model only in Pro. CTAs + total cost strip
unchanged but gain a pro-mode "priority-ordered fix plan" hint.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Description
OBDX landing page (React + Vite + Tailwind v4 + Bento Garage design)
Languages
TypeScript
96.9%
HTML
2.1%
CSS
0.7%
Dockerfile
0.3%