From c14d17f81f5bcf2c3d575a8027c0054219fdc516 Mon Sep 17 00:00:00 2001 From: kang Date: Thu, 23 Apr 2026 21:30:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20full=20diagnostic=20dashboard=20?= =?UTF-8?q?=E2=80=94=20Easy=20/=20Pro=20view=20toggle,=20all=20CHARM=20fie?= =?UTF-8?q?lds?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/components/SampleReport.tsx | 799 ++++++++++++++++++++++++++------ 1 file changed, 662 insertions(+), 137 deletions(-) diff --git a/src/components/SampleReport.tsx b/src/components/SampleReport.tsx index 79737b6..0547d5a 100644 --- a/src/components/SampleReport.tsx +++ b/src/components/SampleReport.tsx @@ -1,4 +1,4 @@ -import { motion } from "framer-motion"; +import { motion, AnimatePresence } from "framer-motion"; import { Car, Clock, @@ -6,52 +6,185 @@ import { AlertTriangle, Wrench, Share2, + Gauge, + Activity, + Database, + User, + Cog, + CheckCircle2, + CircleAlert, + CircleSlash, + LineChart, + Zap, + FlaskConical, + Info, } from "lucide-react"; +import { useState } from "react"; + +type ViewMode = "easy" | "pro"; const SAMPLE = { - vehicle: "2018 Honda Civic 1.5L Turbo", - mileage: "108,432", - scannedAgo: "2 min ago", - analysisTime: "9.8 sec", - healthScore: 78, - healthGrade: "B+", - healthLabel: "Good", - issues: [ + vehicle: { + make: "Honda", + model: "Civic", + engine: "1.5L Turbo L4", + year: 2018, + vinMasked: "1HGFC2F57JH••••XXX", + mileage: "108,432", + }, + meta: { + scannedAgo: "2 min ago", + analysisSeconds: 9.8, + aiModel: "DeepSeek-R1", + sourceCharm: true, + dataPoints: 47, + }, + health: { + overall: 78, + grade: "B+", + label: "Good", + subsystems: [ + { name: "Powertrain", score: 70, color: "#F59E0B" }, + { name: "Emission", score: 62, color: "#F59E0B" }, + { name: "Fuel System", score: 82, color: "#10B981" }, + { name: "Electrical", score: 88, color: "#10B981" }, + { name: "Chassis", score: 92, color: "#10B981" }, + ], + }, + aiSummary: + "Your Civic is in solid shape for 108k miles. The catalytic converter is degrading — not urgent, but past 80k on this engine it's almost expected. The lean fuel condition is likely related and cheap to fix. The EVAP code is almost certainly the gas cap. Fix the lean condition first ($80–220), drive 2 weeks, then re-test the cat. You may save $400–650.", + faults: [ { - dtc: "P0420", - title: "Catalytic Converter Degradation", - desc: - "Catalyst efficiency is below threshold. Common on 2016–2018 Civics past 80k miles. Not urgent, but worth budgeting for.", - severityLabel: "Plan within 2 weeks", + code: "P0420", + title: "Catalyst System Efficiency Below Threshold (Bank 1)", + category: "Emission", + severity: "medium", severityColor: "#F59E0B", - cost: "$400 – $650", + urgency: "Plan within 2 weeks", + simple: + "Your catalytic converter is past its prime. Not urgent — you have 1–2 weeks — but past 80k miles on this engine it's almost expected.", + technical: + "Downstream O₂ sensor waveform is mimicking the upstream sensor's cycling pattern, indicating the cat is no longer storing and releasing enough oxygen to convert emissions efficiently. On 2016–2018 Civics with the 1.5L Turbo past 80k miles this is very common due to the engine's known oil-burn tendency.", + causes: [ + { cause: "Aged/failed catalytic converter", probability: 40 }, + { cause: "Faulty upstream O₂ sensor (mixture issue)", probability: 20 }, + { cause: "Faulty downstream O₂ sensor (false reading)", probability: 15 }, + { cause: "Exhaust leak before downstream O₂", probability: 15 }, + { cause: "Engine oil consumption fouling cat", probability: 10 }, + ], + steps: [ + "Compare upstream and downstream O₂ waveforms at 2500 RPM", + "Measure cat inlet/outlet temperature delta (should be +50°F min)", + "Smoke test exhaust for leaks upstream of downstream sensor", + "Check oil consumption rate over 1,000 miles", + "Replace catalytic converter if above confirm failure", + ], + whenMonitored: "Warm engine, steady 1500–3000 RPM cruise", + setCondition: "Downstream O₂ activity > 60% of upstream over 2 drive cycles", + cost: { min: 400, max: 650 }, + laborHours: 1.5, + charmSourced: true, }, { - dtc: "P0171", - title: "Lean Fuel Condition (Bank 1)", - desc: - "Engine is running lean — likely a vacuum leak or dirty MAF sensor. Cheap to diagnose, cheap to fix.", - severityLabel: "Easy fix", - severityColor: "#10B981", - cost: "$80 – $120", + code: "P0171", + title: "Fuel System Too Lean (Bank 1)", + category: "Fuel Metering", + severity: "medium", + severityColor: "#F59E0B", + urgency: "Service soon", + simple: + "Your engine is getting too much air or not enough fuel. Cheap to diagnose. On this platform it's almost always a vacuum leak.", + technical: + "LTFT is +12.5% on Bank 1 (past the +10% threshold). Combined with STFT +8.2%, the ECU is consistently commanding more fuel to compensate. On the 1.5L Turbo the most common cause is a cracked PCV hose or carbon-clogged MAF sensor.", + causes: [ + { cause: "Vacuum leak in intake system", probability: 40 }, + { cause: "Dirty or faulty MAF sensor", probability: 25 }, + { cause: "Insufficient fuel pump pressure", probability: 15 }, + { cause: "Clogged or leaking fuel injector", probability: 10 }, + { cause: "Faulty O₂ sensor", probability: 10 }, + ], + steps: [ + "Inspect intake duct and PCV hose for cracks", + "Check MAF sensor reading against spec (3–6 g/s at idle)", + "Test fuel pressure (should be 50–58 PSI)", + "Smoke test intake system for vacuum leaks", + "Inspect injector spray pattern if all above OK", + ], + whenMonitored: "Warm engine, closed-loop cruising", + setCondition: "LTFT > +10% on Bank 1 over 2 drive cycles", + cost: { min: 80, max: 220 }, + laborHours: 1.0, + charmSourced: true, }, { - dtc: "P0496", - title: "EVAP Flow During Non-Purge", - desc: - "Likely a stuck purge valve. Often resolved with a $20 part and 30 minutes of labor.", - severityLabel: "Easy fix", + code: "P0442", + title: "EVAP System Small Leak Detected", + category: "Emission", + severity: "low", severityColor: "#10B981", - cost: "$40 – $80", + urgency: "Easy fix", + simple: + "Small leak somewhere in your fuel vapor system. 9 out of 10 times it's the gas cap — check whether it clicks when you tighten it.", + technical: + "EVAP leak detected > 0.020-inch orifice equivalent. No driveability impact — emissions only. Gas cap seal is the statistically dominant failure mode on Hondas.", + causes: [ + { cause: "Worn fuel cap seal", probability: 40 }, + { cause: "Hairline crack in EVAP hose", probability: 25 }, + { cause: "EVAP canister port leak", probability: 20 }, + { cause: "Fuel tank port leak", probability: 15 }, + ], + steps: [ + "Replace fuel cap first ($5) and drive 2 cycles", + "If code returns, smoke test EVAP system", + "Inspect EVAP hose fittings at canister and tank", + "Check EVAP canister and purge valve", + ], + whenMonitored: "Cold start EVAP self-test", + setCondition: "Pressure decay > spec during timed test", + cost: { min: 10, max: 120 }, + laborHours: 0.5, + charmSourced: false, }, ], - aiSummary: - "Your Civic is in solid shape for 108k miles. The catalytic converter is the only item I'd plan to address in the next two weeks — it's not urgent, but past 80k miles on the 1.5L turbo it's worth budgeting for. The lean condition and EVAP code are quick, cheap fixes you can ask your mechanic to bundle into the same visit.", - totalLow: 520, - totalHigh: 850, + freezeFrame: [ + { label: "Engine RPM", value: "1,420", unit: "rpm", ok: true }, + { label: "Engine Load", value: "34", unit: "%", ok: true }, + { label: "Coolant Temp", value: "192", unit: "°F", ok: true }, + { label: "Intake Air Temp", value: "78", unit: "°F", ok: true }, + { label: "MAF", value: "4.8", unit: "g/s", ok: true }, + { label: "STFT B1", value: "+8.2", unit: "%", ok: false }, + { label: "LTFT B1", value: "+12.5", unit: "%", ok: false }, + { label: "O₂ Upstream", value: "0.34", unit: "V", ok: true }, + { label: "O₂ Downstream", value: "0.55", unit: "V", ok: false }, + { label: "Throttle Pos", value: "12", unit: "%", ok: true }, + { label: "Vehicle Speed", value: "38", unit: "mph", ok: true }, + { label: "Timing Adv", value: "18", unit: "°", ok: true }, + ], + readiness: [ + { name: "Misfire Monitor", status: "ready" }, + { name: "Fuel System", status: "ready" }, + { name: "Comprehensive Component", status: "ready" }, + { name: "Catalyst", status: "ready" }, + { name: "EVAP System", status: "pending" }, + { name: "O₂ Sensor", status: "ready" }, + { name: "O₂ Sensor Heater", status: "ready" }, + { name: "EGR System", status: "notReady" }, + ] as const, + correlation: + "P0171 and P0420 are likely linked — running lean over time has accelerated catalyst degradation by causing incomplete combustion and higher-than-spec exhaust temperatures. Recommended order: fix the lean condition first (~$80–220), drive 2 weeks, then re-test catalyst efficiency. If P0420 clears on its own, you save $400–650.", + totalCost: { min: 490, max: 990 }, } as const; +function StatusDot({ status }: { status: string }) { + if (status === "ready") return ; + if (status === "pending") return ; + if (status === "notReady") return ; + return ; +} + export default function SampleReport() { + const [mode, setMode] = useState("easy"); + return (

A complete AI repair report — exactly what shows up on your phone - after a 10-second scan. No login. No app install. + after a 10-second scan. Simple view for you. Pro view for your mechanic.

+ + {/* View toggle */} +
+ + +
- {/* Report container */} + {/* Dashboard container */} - {/* Top strip — vehicle + scan timestamp */} + {/* Top strip — vehicle + scan */}
Vehicle
- {SAMPLE.vehicle} + {SAMPLE.vehicle.year} {SAMPLE.vehicle.make} {SAMPLE.vehicle.model}{" "} + + {SAMPLE.vehicle.engine} +
-
- {SAMPLE.mileage} mi +
+ {SAMPLE.vehicle.mileage} mi + {mode === "pro" && ( + <> + · + VIN {SAMPLE.vehicle.vinMasked} + + )}
@@ -103,117 +273,73 @@ export default function SampleReport() { Scanned
- {SAMPLE.scannedAgo} + {SAMPLE.meta.scannedAgo}
-
- analysis time: {SAMPLE.analysisTime} -
-
-
- - {/* Body grid */} -
- {/* Health score card */} -
-
- HEALTH SCORE -
-
-
-
- {SAMPLE.healthScore} -
-
/100
-
-
- - {SAMPLE.healthGrade} · {SAMPLE.healthLabel} - -
-
- {/* Decorative ring */} -
-
- - {/* AI Summary card */} -
-
- AI SUMMARY -
-

- {SAMPLE.aiSummary} -

-
- - Generated from 706 GB of vehicle-specific repair knowledge -
-
- - {/* Issues — full width */} -
-
-
- 3 ISSUES FOUND -
- - PRIORITY ORDER - -
-
    - {SAMPLE.issues.map((issue) => ( -
  • - - {issue.dtc} +
    + analysis {SAMPLE.meta.analysisSeconds}s + {mode === "pro" && ( + <> + · + + {SAMPLE.meta.aiModel} -
    -
    - {issue.title} -
    -

    - {issue.desc} -

    -
    -
    -
    - {issue.cost} -
    -
    - - {issue.severityLabel} -
    -
    -
    • - ))} -
+ {SAMPLE.meta.sourceCharm && ( + <> + · + CHARM ✓ + + )} + + )} +
- {/* Bottom strip — total + CTAs */} + {/* Body */} +
+ + {mode === "easy" ? ( + + + + ) : ( + + + + )} + +
+ + {/* Footer strip — cost + CTAs */}
- TOTAL ESTIMATED REPAIR COST + ESTIMATED REPAIR COST — ALL ISSUES
- ${SAMPLE.totalLow}{" "} + ${SAMPLE.totalCost.min}{" "} – $ - {SAMPLE.totalHigh} + {SAMPLE.totalCost.max}
+ {mode === "pro" && ( +
+ based on priority-ordered fix plan (see correlation) +
+ )}
); } + +/* ──────────────────────────────────────────────────────── Easy view */ +function EasyView() { + const issueRingColor = "#10B981"; + return ( +
+ {/* Health ring */} +
+
+ HEALTH SCORE +
+
+
+
+ {SAMPLE.health.overall} +
+
/100
+
+
+ + {SAMPLE.health.grade} · {SAMPLE.health.label} + +
+
+
+
+ + {/* AI Summary */} +
+
+ AI SUMMARY +
+

+ {SAMPLE.aiSummary} +

+
+ + Generated from 706 GB of vehicle-specific repair knowledge +
+
+ + {/* Simplified issues */} +
+
+
+ {SAMPLE.faults.length} ISSUES FOUND +
+ + PRIORITY ORDER + +
+
    + {SAMPLE.faults.map((f) => ( +
  • + + {f.code} + +
    +
    {f.title}
    +

    + {f.simple} +

    +
    +
    +
    + ${f.cost.min}–${f.cost.max} +
    +
    + + {f.urgency} +
    +
    +
    • + ))} +
+
+
+ ); +} + +/* ──────────────────────────────────────────────────────── Pro view */ +function ProView() { + return ( +
+ {/* Row 1: 5-dimension health scores */} +
+
+
+ SYSTEM HEALTH · 5 SUBSYSTEMS +
+ + OVERALL{" "} + + {SAMPLE.health.overall} + + /100 + +
+
+ {SAMPLE.health.subsystems.map((sub) => ( +
+
+ + {sub.name} + + + {sub.score} + +
+
+ +
+
+ ))} +
+
+ + {/* Row 2: Fault cards (detailed) */} +
+ {SAMPLE.faults.map((f) => ( +
+ {/* Fault header */} +
+
+
+ {f.code} +
+
+
+ {f.title} +
+
+ + {f.category} + + + LABOR {f.laborHours}h + + {f.charmSourced && ( + + CHARM ✓ + + )} +
+
+
+
+
+ ${f.cost.min}–${f.cost.max} +
+ + + {f.urgency} + +
+
+ + {/* Technical explanation */} +

+ {f.technical} +

+ + {/* Grid: causes + steps */} +
+ {/* Causes with probability */} +
+
+ PROBABLE CAUSES +
+
    + {f.causes.map((c, i) => ( +
  • +
    + + {c.cause} + + + {c.probability}% + +
    +
    + +
    +
    • + ))} +
+
+ + {/* Diagnostic steps */} +
+
+ DIAGNOSTIC STEPS +
+
    + {f.steps.map((s, i) => ( +
  1. + + {String(i + 1).padStart(2, "0")} + + {s} +
    2. + ))} +
+
+
+ + {/* Monitoring conditions */} +
+
+
+ WHEN MONITORED +
+
+ {f.whenMonitored} +
+
+
+
+ SET CONDITION +
+
+ {f.setCondition} +
+
+
+
+ ))} +
+ + {/* Row 3: Freeze Frame + Readiness + Correlation */} +
+ {/* Freeze Frame */} +
+
+
+ FREEZE FRAME DATA +
+ + CAPTURED AT FAULT + +
+
+ {SAMPLE.freezeFrame.map((p) => ( +
+
+ {p.label} +
+
+ + {p.value} + + + {p.unit} + +
+
+ ))} +
+
+ + {/* Readiness Monitors */} +
+
+ I/M READINESS +
+
    + {SAMPLE.readiness.map((m) => ( +
  • + {m.name} + + + + {m.status === "ready" + ? "Ready" + : m.status === "pending" + ? "Pending" + : m.status === "notReady" + ? "Not Ready" + : "N/A"} + + +
    • + ))} +
+
+ + {/* Fault Correlation */} +
+
+ MULTI-CODE CORRELATION +
+

+ {SAMPLE.correlation} +

+
+ + This analysis is only possible when multiple codes are present and + the vehicle is known (CHARM matched). +
+
+
+ + {/* Meta footer */} +
+
+ + 706 GB CHARM + + + {SAMPLE.meta.aiModel} + + + {SAMPLE.meta.analysisSeconds}s ·{" "} + {SAMPLE.meta.dataPoints} data points + +
+ Raw JSON available via /api/v1/report/{"{id}"} +
+
+ ); +}