Deploy Chatbot, Animation, and Full TraceScene Application

.gitignore

@@ -0,0 +1,5 @@
+data/
+logs/
+__pycache__/
+*.pyc
+*.db*

app.py

@@ -0,0 +1,896 @@
+"""
+TraceScene — Gradio ZeroGPU Application
+
+Serves the custom TraceScene frontend + REST API with GPU-accelerated inference.
+Architecture:
+  - Gradio demo at / (primary — required for ZeroGPU)
+  - Custom FastAPI routes added to Gradio's internal app for REST API
+  - Custom HTML/CSS/JS frontend served alongside
+  - @spaces.GPU wraps inference for dynamic GPU allocation
+"""
+
+import os
+from pathlib import Path
+
+import torch
+import gradio as gr
+import spaces
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+
+# ── Backend Imports ────────────────────────────────────────────────────
+from backend.app.config import settings
+from backend.app.db.database import db
+from backend.app.core.inference import inference_engine, SCENE_ANALYSIS_PROMPT
+from backend.app.core.scene_analyzer import SceneAnalyzer
+from backend.app.core.rule_matcher import RuleMatcher
+from backend.app.core.fault_deducer import FaultDeducer
+from backend.app.core.report_generator import ReportGenerator
+from backend.app.rules.rule_loader import rule_loader
+from backend.app.utils.logger import get_logger
+from backend.app.api.routes import router
+
+logger = get_logger("app")
+
+scene_analyzer = SceneAnalyzer()
+rule_matcher = RuleMatcher()
+fault_deducer = FaultDeducer()
+report_generator = ReportGenerator()
+
+# ── ZeroGPU: Top-level decorated function ──────────────────────────────
+# This MUST be a top-level function wired to a Gradio event handler.
+
+_original_run_inference = inference_engine._run_inference  # bound method
+
+
+@spaces.GPU(duration=120)
+def gpu_run_inference(image, prompt):
+    """GPU-accelerated inference — ZeroGPU allocates GPU for this call."""
+    return _original_run_inference(image, prompt)
+
+
+# Monkey-patch so the entire pipeline uses GPU
+inference_engine._run_inference = gpu_run_inference
+
+
+# ── Async helpers ──────────────────────────────────────────────────────
+
+def run_async(coro):
+    """Run async coroutine from sync Gradio context."""
+    import asyncio
+    try:
+        loop = asyncio.get_event_loop()
+        if loop.is_running():
+            import concurrent.futures
+            with concurrent.futures.ThreadPoolExecutor() as pool:
+                return pool.submit(asyncio.run, coro).result()
+        return loop.run_until_complete(coro)
+    except RuntimeError:
+        return asyncio.run(coro)
+
+
+# ── Initialize backend ────────────────────────────────────────────────
+
+_initialized = False
+
+
+async def _ensure_init():
+    global _initialized
+    if _initialized:
+        return
+    await db.connect()
+    rule_loader.load_rules()
+    try:
+        inference_engine.load_model()
+    except Exception as e:
+        logger.error(f"Vision model load failed: {e}")
+    _initialized = True
+
+
+def ensure_init():
+    run_async(_ensure_init())
+
+
+# ── Gradio Handlers ───────────────────────────────────────────────────
+
+def gradio_analyze_photo(image):
+    """Analyze a single uploaded photo via GPU."""
+    if image is None:
+        return "Please upload an image."
+    from PIL import Image as PILImage
+    if not isinstance(image, PILImage.Image):
+        image = PILImage.fromarray(image)
+
+    ensure_init()
+    if not inference_engine.is_loaded:
+        inference_engine.load_model()
+
+    result = gpu_run_inference(image, SCENE_ANALYSIS_PROMPT)
+    return result
+
+
+import json
+import hashlib
+import time
+from PIL import Image
+
+
+def create_case_fn(case_number, officer_name, location, incident_date, notes):
+    """Create a new accident case."""
+    if not case_number or not case_number.strip():
+        return "❌ Case number is required.", list_cases_fn()
+    ensure_init()
+    try:
+        cid = run_async(db.create_case(
+            case_number=case_number.strip(),
+            officer_name=officer_name.strip() if officer_name else None,
+            location=location.strip() if location else None,
+            incident_date=incident_date if incident_date else None,
+            notes=notes.strip() if notes else None,
+        ))
+        return f"✅ Case **{case_number}** created (ID: {cid})", list_cases_fn()
+    except Exception as e:
+        return f"❌ {e}", list_cases_fn()
+
+
+def list_cases_fn():
+    """List all cases."""
+    ensure_init()
+    try:
+        cases = run_async(db.list_cases())
+        if not cases:
+            return []
+        rows = []
+        for c in cases:
+            photos = run_async(db.get_photos_by_case(c["id"]))
+            rows.append([
+                c["id"], c["case_number"],
+                c.get("officer_name", "—"), c.get("location", "—"),
+                c.get("incident_date", "—"), c["status"], len(photos),
+            ])
+        return rows
+    except Exception:
+        return []
+
+
+def delete_case_fn(case_id):
+    """Delete a case."""
+    if not case_id:
+        return "❌ Enter a Case ID.", list_cases_fn()
+    ensure_init()
+    try:
+        run_async(db.delete_case(int(case_id)))
+        return f"✅ Case {int(case_id)} deleted.", list_cases_fn()
+    except Exception as e:
+        return f"❌ {e}", list_cases_fn()
+
+
+def upload_photos_fn(case_id, files):
+    """Upload photos to a case."""
+    if not case_id:
+        return "❌ Enter a Case ID."
+    if not files:
+        return "❌ Select photos to upload."
+    ensure_init()
+    try:
+        case = run_async(db.get_case(int(case_id)))
+        if not case:
+            return f"❌ Case {int(case_id)} not found."
+
+        case_dir = settings.upload_path / f"case_{int(case_id)}"
+        case_dir.mkdir(parents=True, exist_ok=True)
+
+        count = 0
+        for fp in files:
+            with open(fp, "rb") as f:
+                content = f.read()
+            filename = Path(fp).name
+            ext = filename.rsplit(".", 1)[-1].lower() if "." in filename else ""
+            if ext not in settings.allowed_extensions_list:
+                continue
+            fhash = hashlib.md5(content).hexdigest()[:12]
+            dest = case_dir / f"{fhash}_{filename}"
+            with open(dest, "wb") as f:
+                f.write(content)
+            w, h = None, None
+            try:
+                img = Image.open(dest)
+                w, h = img.size
+            except Exception:
+                pass
+            run_async(db.add_photo(
+                case_id=int(case_id), filename=filename,
+                filepath=str(dest), file_size=len(content),
+                width=w, height=h,
+            ))
+            count += 1
+        return f"✅ Uploaded {count} photo(s) to Case {int(case_id)}."
+    except Exception as e:
+        return f"❌ {e}"
+
+
+def get_case_photos_fn(case_id):
+    """Get photo gallery for a case."""
+    if not case_id:
+        return []
+    ensure_init()
+    try:
+        photos = run_async(db.get_photos_by_case(int(case_id)))
+        return [(p["filepath"], p["filename"]) for p in photos if Path(p["filepath"]).exists()]
+    except Exception:
+        return []
+
+
+def run_analysis_fn(case_id, progress=gr.Progress()):
+    """Run the full AI analysis pipeline (GPU-accelerated)."""
+    if not case_id:
+        return "❌ Enter a Case ID.", "", ""
+    ensure_init()
+
+    try:
+        case = run_async(db.get_case(int(case_id)))
+        if not case:
+            return "❌ Case not found.", "", ""
+        photos = run_async(db.get_photos_by_case(int(case_id)))
+        if not photos:
+            return "❌ No photos uploaded.", "", ""
+    except Exception as e:
+        return f"❌ {e}", "", ""
+
+    if not inference_engine.is_loaded:
+        inference_engine.load_model()
+
+    # Step 1: Analyze each photo
+    analysis_results = []
+    for i, photo in enumerate(photos):
+        progress((i + 1) / len(photos) * 0.5, desc=f"Analyzing photo {i+1}/{len(photos)}...")
+        try:
+            img = Image.open(photo["filepath"])
+            start = time.perf_counter()
+            raw = gpu_run_inference(img, SCENE_ANALYSIS_PROMPT)
+            elapsed_ms = (time.perf_counter() - start) * 1000
+            parsed = scene_analyzer._parse_analysis(raw)
+            run_async(db.add_scene_analysis(
+                photo_id=photo["id"], raw_analysis=raw,
+                vehicles_json=json.dumps(parsed.get("vehicles", [])) if parsed.get("vehicles") else None,
+                road_conditions_json=json.dumps(parsed.get("road_conditions", {})) if parsed.get("road_conditions") else None,
+                evidence_json=json.dumps(parsed.get("evidence", {})) if parsed.get("evidence") else None,
+                environmental_json=json.dumps(parsed.get("environmental", {})) if parsed.get("environmental") else None,
+                positions_json=json.dumps(parsed.get("positions", {})) if parsed.get("positions") else None,
+                model_id=settings.model_id, inference_time_ms=elapsed_ms,
+            ))
+            analysis_results.append({"filename": photo["filename"], "analysis": raw, "time_ms": round(elapsed_ms)})
+        except Exception as e:
+            analysis_results.append({"filename": photo["filename"], "analysis": f"Error: {e}", "time_ms": 0})
+
+    # Identify parties
+    progress(0.55, desc="Identifying parties...")
+    all_analyses = run_async(db.get_analyses_by_case(int(case_id)))
+    parties_data = scene_analyzer._identify_parties(all_analyses)
+    run_async(db.clear_parties(int(case_id)))
+    for p in parties_data:
+        run_async(db.add_party(
+            case_id=int(case_id), label=p.get("label", "Unknown"),
+            vehicle_type=p.get("vehicle_type"), vehicle_color=p.get("vehicle_color"),
+            vehicle_description=p.get("description"),
+        ))
+
+    # Step 2: Rule matching
+    progress(0.65, desc="Matching traffic rules...")
+    violations = run_async(rule_matcher.match_violations(int(case_id)))
+
+    # Step 3: Fault deduction
+    progress(0.8, desc="Deducing fault...")
+    fault_result = run_async(fault_deducer.deduce_fault(int(case_id)))
+    run_async(db.update_case_status(int(case_id), "complete"))
+
+    # Format output
+    total_time = sum(r["time_ms"] for r in analysis_results)
+    analysis_text = ""
+    for r in analysis_results:
+        analysis_text += f"### 📷 {r['filename']} ({r['time_ms']}ms)\n```\n{r['analysis']}\n```\n---\n\n"
+
+    violations_text = f"Found {len(violations)} violation(s):\n"
+    for v in violations:
+        violations_text += f"\n• **{v.get('rule_title', '?')}** ({v.get('severity', '?')}) — {v.get('confidence', 0):.0%}"
+    violations_text += f"\n\n### Fault: {fault_result.get('primary_fault_party', 'N/A')}"
+    violations_text += f"\nConfidence: {fault_result.get('overall_confidence', 0):.0%}"
+    violations_text += f"\n\n{fault_result.get('analysis_summary', '')}"
+
+    progress(1.0, desc="Complete!")
+    return f"✅ Done! {len(photos)} photos in {total_time/1000:.1f}s", analysis_text, violations_text
+
+
+def generate_report_fn(case_id):
+    """Generate incident report."""
+    if not case_id:
+        return "❌ Enter a Case ID."
+    ensure_init()
+    try:
+        report = run_async(report_generator.generate_report(int(case_id)))
+    except Exception as e:
+        return f"❌ {e}"
+    if "error" in report:
+        return f"❌ {report['error']}"
+
+    c = report.get("case", {})
+    stats = report.get("statistics", {})
+    fa = report.get("fault_analysis", {})
+    md = f"""# 🚔 TraceScene Report
+> Case: {c.get('case_number', '—')} | Officer: {c.get('officer_name', '—')}
+> Location: {c.get('location', '—')} | Date: {c.get('incident_date', '—')}
+
+*{report.get('disclaimer', '')}*
+
+| Metric | Value |
+|---|---|
+| Photos | {stats.get('analyzed_photos', 0)} |
+| Violations | {stats.get('total_violations', 0)} |
+| Critical | {stats.get('critical_violations', 0)} |
+| Parties | {stats.get('parties_identified', 0)} |
+
+## Scene Summary
+{report.get('scene_summary', 'N/A')}
+
+## Violations
+"""
+    for v in report.get("violations", {}).get("list", []):
+        md += f"- **{v.get('title', '?')}** [{v.get('severity', '?')}] — {v.get('party', '?')} ({v.get('confidence', 0):.0%})\n"
+    md += f"\n## Fault Analysis\n"
+    if fa.get("determined"):
+        md += f"**Primary Fault:** {fa.get('primary_fault_party', '?')}\n"
+        md += f"**Confidence:** {fa.get('overall_confidence', 0):.0%}\n"
+        md += f"\n{fa.get('probable_cause', '')}\n"
+    return md
+
+
+def get_rules_fn():
+    """Get traffic rules."""
+    ensure_init()
+    data = rule_loader.get_all_rules()
+    categories = data.get("categories", [])
+    if not categories:
+        return "No rules loaded."
+    md = "# 📜 Traffic Rules\n\n"
+    for cat in categories:
+        md += f"## {cat.get('name', '?')} ({cat.get('rule_count', 0)})\n"
+        md += "| ID | Title | Severity | Weight |\n|---|---|---|---|\n"
+        for r in cat.get("rules", []):
+            md += f"| {r.get('id', '')} | {r.get('title', '')} | {r.get('severity', '')} | {r.get('fault_weight', '')} |\n"
+        md += "\n"
+    return md
+
+
+# ── JSON API functions (for custom frontend via @gradio/client) ────────
+
+def health_fn():
+    """Return system health as JSON."""
+    ensure_init()
+    return json.dumps({
+        "status": "ok",
+        "model_loaded": inference_engine.is_loaded,
+        "model_id": settings.model_id if inference_engine.is_loaded else None,
+        "device": inference_engine._device if inference_engine.is_loaded else None,
+        "rules_loaded": len(rule_loader.get_all_rules().get("categories", [])),
+    })
+
+
+def list_cases_json():
+    """List cases as JSON."""
+    ensure_init()
+    cases = run_async(db.list_cases())
+    for c in cases:
+        photos = run_async(db.get_photos_by_case(c["id"]))
+        c["photo_count"] = len(photos)
+    return json.dumps({"cases": cases})
+
+
+def get_case_json(case_id):
+    """Get full case details as JSON."""
+    if not case_id:
+        return json.dumps({"error": "No case ID"})
+    ensure_init()
+    case = run_async(db.get_case(int(case_id)))
+    if not case:
+        return json.dumps({"error": f"Case {int(case_id)} not found"})
+    photos = run_async(db.get_photos_by_case(int(case_id)))
+    analyses = run_async(db.get_analyses_by_case(int(case_id)))
+    parties = run_async(db.get_parties_by_case(int(case_id)))
+    violations = run_async(db.get_violations_by_case(int(case_id)))
+    fault = run_async(db.get_fault_analysis(int(case_id)))
+    return json.dumps({
+        "case": case,
+        "photos": photos,
+        "analyses": analyses,
+        "parties": parties,
+        "violations": violations,
+        "fault_analysis": fault,
+        "stats": {
+            "total_photos": len(photos),
+            "analyzed_photos": len(analyses),
+            "violations_found": len(violations),
+            "parties_identified": len(parties),
+        },
+    })
+
+
+def get_report_json(case_id):
+    """Get report as JSON."""
+    if not case_id:
+        return json.dumps({"error": "No case ID"})
+    ensure_init()
+    report = run_async(report_generator.generate_report(int(case_id)))
+    return json.dumps(report)
+
+
+def get_rules_json():
+    """Get rules as JSON."""
+    ensure_init()
+    return json.dumps(rule_loader.get_all_rules())
+
+
+# ── Build Gradio App ──────────────────────────────────────────────────
+
+CUSTOM_CSS = """
+.gradio-container { max-width: 1200px !important; }
+footer { display: none !important; }
+"""
+
+with gr.Blocks(
+    title="TraceScene — AI Accident Analysis",
+) as demo:
+    gr.Markdown("""
+    # 🚔 TraceScene
+    ### AI-Powered Accident Scene Analysis
+    *GPU-accelerated inference via ZeroGPU (NVIDIA H200)*
+    ---
+    """)
+
+    with gr.Tabs():
+        # Tab 1: Quick Analyze (single photo)
+        with gr.TabItem("⚡ Quick Analyze"):
+            gr.Markdown("Upload a photo for instant GPU-accelerated analysis.")
+            with gr.Row():
+                with gr.Column():
+                    input_image = gr.Image(label="Upload Accident Photo", type="pil")
+                    quick_btn = gr.Button("🚀 Analyze with GPU", variant="primary")
+                with gr.Column():
+                    quick_output = gr.Textbox(label="AI Analysis", lines=20)
+            quick_btn.click(fn=gradio_analyze_photo, inputs=[input_image], outputs=[quick_output], api_name="analyze_photo")
+
+        # Tab 2: Cases
+        with gr.TabItem("📋 Cases"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("### Create Case")
+                    cn = gr.Textbox(label="Case Number *", placeholder="ACC-2026-001")
+                    on = gr.Textbox(label="Officer Name")
+                    loc = gr.Textbox(label="Location")
+                    dt = gr.Textbox(label="Incident Date", placeholder="YYYY-MM-DD")
+                    nt = gr.Textbox(label="Notes", lines=2)
+                    create_btn = gr.Button("Create Case", variant="primary")
+                    create_status = gr.Markdown()
+                with gr.Column(scale=2):
+                    gr.Markdown("### Existing Cases")
+                    cases_tbl = gr.Dataframe(
+                        headers=["ID", "Case #", "Officer", "Location", "Date", "Status", "Photos"],
+                        interactive=False,
+                    )
+                    with gr.Row():
+                        refresh_btn = gr.Button("🔄 Refresh")
+                        del_id = gr.Number(label="Case ID to Delete", precision=0)
+                        del_btn = gr.Button("🗑️ Delete", variant="stop")
+                    del_status = gr.Markdown()
+            create_btn.click(create_case_fn, inputs=[cn, on, loc, dt, nt], outputs=[create_status, cases_tbl], api_name="create_case")
+            refresh_btn.click(list_cases_fn, outputs=[cases_tbl], api_name="list_cases")
+            del_btn.click(delete_case_fn, inputs=[del_id], outputs=[del_status, cases_tbl], api_name="delete_case")
+
+        # Tab 3: Upload Photos
+        with gr.TabItem("📸 Photos"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    up_case = gr.Number(label="Case ID", precision=0)
+                    up_files = gr.File(label="Select Photos", file_count="multiple", file_types=["image"])
+                    up_btn = gr.Button("Upload", variant="primary")
+                    up_status = gr.Markdown()
+                with gr.Column(scale=2):
+                    pv_case = gr.Number(label="Preview Case ID", precision=0)
+                    pv_btn = gr.Button("Load Photos")
+                    gallery = gr.Gallery(label="Photos", columns=3)
+            up_btn.click(upload_photos_fn, inputs=[up_case, up_files], outputs=[up_status], api_name="upload_photos")
+            pv_btn.click(get_case_photos_fn, inputs=[pv_case], outputs=[gallery], api_name="get_case_photos")
+
+        # Tab 4: Run Analysis
+        with gr.TabItem("🧠 Analysis"):
+            gr.Markdown("""
+            ### Full Analysis Pipeline (GPU-accelerated)
+            1. Scene Analysis → 2. Rule Matching → 3. Fault Deduction
+            """)
+            an_case = gr.Number(label="Case ID", precision=0)
+            an_btn = gr.Button("🚀 Run Full Analysis", variant="primary", size="lg")
+            an_status = gr.Markdown()
+            with gr.Accordion("Scene Details", open=False):
+                an_detail = gr.Markdown()
+            an_violations = gr.Markdown(label="Violations & Fault")
+            an_btn.click(run_analysis_fn, inputs=[an_case], outputs=[an_status, an_detail, an_violations], api_name="run_analysis")
+
+        # Tab 5: Report
+        with gr.TabItem("📄 Report"):
+            rp_case = gr.Number(label="Case ID", precision=0)
+            rp_btn = gr.Button("Generate Report", variant="primary")
+            rp_out = gr.Markdown()
+            rp_btn.click(generate_report_fn, inputs=[rp_case], outputs=[rp_out], api_name="generate_report")
+
+        # Tab 6: Rules
+        with gr.TabItem("📜 Rules"):
+            ru_btn = gr.Button("Load Traffic Rules")
+            ru_out = gr.Markdown()
+            ru_btn.click(get_rules_fn, outputs=[ru_out], api_name="get_rules")
+
+        # Tab 7: Chat Q&A
+        with gr.TabItem("💬 Chat"):
+            gr.Markdown("### Case Q&A Chatbot\nAsk questions about logged cases, traffic rules, or insurance clauses.")
+            with gr.Row():
+                chat_case_id = gr.Number(label="Case ID (optional)", precision=0)
+                chat_load_btn = gr.Button("📂 Load Case Context", variant="secondary")
+            chat_context_status = gr.Markdown(value="*No case loaded. You can still ask general traffic/insurance questions.*")
+            chatbot = gr.Chatbot(label="Conversation", height=400)
+            chat_input = gr.Textbox(label="Your Question", placeholder="e.g. What vehicles were involved? What rules were violated?", lines=2)
+            with gr.Row():
+                chat_send_btn = gr.Button("💬 Send", variant="primary")
+                chat_clear_btn = gr.Button("🗑️ Clear")
+
+            # State for context
+            chat_system_ctx = gr.State(value="You are TraceScene AI assistant. You help insurers and investigating officers analyze accident cases, traffic rules, and insurance clauses. Answer concisely and accurately based on the context provided.")
+
+            def load_chat_context(case_id):
+                if not case_id:
+                    default_ctx = "You are TraceScene AI assistant. You help insurers and investigating officers analyze accident cases, traffic rules, and insurance clauses. Answer concisely and accurately.\n\n"
+                    # Load traffic rules as general context
+                    ensure_init()
+                    rules_data = rule_loader.get_all_rules()
+                    rules_text = ""
+                    for cat in rules_data.get("categories", []):
+                        rules_text += f"\nCategory: {cat.get('name', '')}\n"
+                        for r in cat.get("rules", []):
+                            rules_text += f"  - {r.get('id', '')}: {r.get('title', '')} (Severity: {r.get('severity', '')})\n"
+                    ctx = default_ctx + "TRAFFIC RULES:\n" + rules_text
+                    return ctx, "*General mode: traffic rules loaded. Ask any question!*"
+
+                ensure_init()
+                case = run_async(db.get_case(int(case_id)))
+                if not case:
+                    return "", f"❌ Case {int(case_id)} not found."
+
+                analyses = run_async(db.get_analyses_by_case(int(case_id)))
+                parties = run_async(db.get_parties_by_case(int(case_id)))
+                violations = run_async(db.get_violations_by_case(int(case_id)))
+                fault = run_async(db.get_fault_analysis(int(case_id)))
+                rules_data = rule_loader.get_all_rules()
+
+                ctx = f"""You are TraceScene AI assistant analyzing Case #{case.get('case_number', '')}.
+Location: {case.get('location', 'Unknown')}
+Date: {case.get('incident_date', 'Unknown')}
+Officer: {case.get('officer_name', 'Unknown')}
+Status: {case.get('status', 'Unknown')}
+
+SCENE ANALYSES:\n"""
+                for a in analyses:
+                    ctx += f"\n--- Photo Analysis ---\n{a.get('raw_analysis', '')}\n"
+
+                if parties:
+                    ctx += "\nPARTIES IDENTIFIED:\n"
+                    for p in parties:
+                        ctx += f"  - {p.get('label', '')}: {p.get('vehicle_type', '')} {p.get('vehicle_color', '')} — {p.get('vehicle_description', '')}\n"
+
+                if violations:
+                    ctx += "\nVIOLATIONS FOUND:\n"
+                    for v in violations:
+                        ctx += f"  - {v.get('rule_title', '')} (Severity: {v.get('severity', '')}, Confidence: {v.get('confidence', 0):.0%})\n"
+
+                if fault:
+                    ctx += f"\nFAULT ANALYSIS:\n  Primary Fault: {fault.get('primary_fault_party', 'N/A')}\n  Confidence: {fault.get('overall_confidence', 0):.0%}\n  Summary: {fault.get('analysis_summary', '')}\n"
+
+                # Append traffic rules
+                rules_text = ""
+                for cat in rules_data.get("categories", []):
+                    rules_text += f"\nCategory: {cat.get('name', '')}\n"
+                    for r in cat.get("rules", []):
+                        rules_text += f"  - {r.get('id', '')}: {r.get('title', '')} (Severity: {r.get('severity', '')})\n"
+                ctx += "\nTRAFFIC RULES:\n" + rules_text
+
+                return ctx, f"✅ Case **{case.get('case_number', '')}** loaded with {len(analyses)} analyses, {len(violations)} violations."
+
+            def chat_respond(user_message, history, system_ctx):
+                if not user_message or not user_message.strip():
+                    return history, "", system_ctx
+                ensure_init()
+                if not inference_engine.is_loaded:
+                    inference_engine.load_model()
+                try:
+                    # Use the vision model's text generation capability for chat
+                    chat_prompt = f"""You are TraceScene AI assistant helping with accident analysis.
+
+CONTEXT:
+{system_ctx}
+
+USER QUESTION: {user_message.strip()}
+
+Provide a concise, helpful answer based on the context above."""
+                    # Create a small blank image for the vision model
+                    from PIL import Image as PILImg
+                    blank = PILImg.new('RGB', (64, 64), color=(0, 0, 0))
+                    response = gpu_run_inference(blank, chat_prompt)
+                except Exception as e:
+                    response = f"Error: {e}"
+                history = history or []
+                history.append((user_message.strip(), response))
+                return history, "", system_ctx
+
+            chat_load_btn.click(load_chat_context, inputs=[chat_case_id], outputs=[chat_system_ctx, chat_context_status])
+            chat_send_btn.click(chat_respond, inputs=[chat_input, chatbot, chat_system_ctx], outputs=[chatbot, chat_input, chat_system_ctx], api_name="chat")
+            chat_input.submit(chat_respond, inputs=[chat_input, chatbot, chat_system_ctx], outputs=[chatbot, chat_input, chat_system_ctx])
+            chat_clear_btn.click(lambda: ([], ""), outputs=[chatbot, chat_input])
+
+        # Tab 8: 2D Animation
+        with gr.Tab("Simulation"):
+            gr.Markdown("### 2D Accident Simulation\nVisualize the top-down perspective of the incident.")
+            anim_case_id = gr.Number(label="Case ID", precision=0)
+            anim_btn = gr.Button("Generate Animation", variant="primary")
+            anim_output = gr.HTML(label="Animation View")
+
+            def generate_animation_fn(case_id):
+                if not case_id:
+                    return "<p style='color:red;'>Enter a Case ID.</p>"
+                ensure_init()
+                analyses = run_async(db.get_analyses_by_case(int(case_id)))
+                if not analyses:
+                    return "<p style='color:red;'>No analyses found. Run analysis first.</p>"
+
+                # Parse scene details from the first analysis
+                raw = analyses[0].get("raw_analysis", "")
+
+                def extract_field(text, field):
+                    import re
+                    pattern = rf"{re.escape(field)}:\s*(.+)"
+                    m = re.search(pattern, text, re.IGNORECASE)
+                    return m.group(1).strip() if m else "Unknown"
+
+                road_type = extract_field(raw, "Road Type")
+                num_vehicles = extract_field(raw, "Vehicles Involved")
+                v1_pos = extract_field(raw, "Vehicle 1 Position")
+                v1_tyre = extract_field(raw, "Vehicle 1 Tyre Direction")
+                impact = extract_field(raw, "Area of Impact")
+                category = extract_field(raw, "Accident Category")
+                v1_make = extract_field(raw, "Vehicle 1 Make/Model")
+
+                # Check for Vehicle 2
+                v2_pos = extract_field(raw, "Vehicle 2 Position")
+                v2_tyre = extract_field(raw, "Vehicle 2 Tyre Direction")
+                v2_make = extract_field(raw, "Vehicle 2 Make/Model")
+                has_v2 = v2_make != "Unknown"
+
+                # Determine colors from extracted make
+                import re as re_mod
+                def extract_color(make_str):
+                    colors = ["Red", "Blue", "White", "Black", "Silver", "Grey", "Green", "Yellow", "Brown", "Orange"]
+                    for c in colors:
+                        if c.lower() in make_str.lower():
+                            return c.lower()
+                    return "#3b82f6"
+
+                v1_color = extract_color(v1_make)
+                v2_color = extract_color(v2_make) if has_v2 else "#ef4444"
+
+                # Severity affects animation speed
+                speed_map = {"mild": 1.5, "medium": 2.5, "critical": 4.0}
+                anim_speed = speed_map.get(category.lower(), 2.5)
+
+                # Road layout
+                road_is_intersection = "intersection" in road_type.lower()
+                road_is_highway = "highway" in road_type.lower()
+
+                num_v = 1
+                try:
+                    num_v = int(num_vehicles)
+                except:
+                    pass
+                # Unique ID to force Gradio to re-render on each click (enables replay)
+                import random
+                uid = random.randint(10000, 99999)
+                # Determine animation duration based on severity
+                dur = "3s" if category.lower() == "mild" else "2s" if category.lower() == "medium" else "1.5s"
+                sev_color = "#22c55e" if category.lower() == "mild" else "#f59e0b" if category.lower() == "medium" else "#ef4444"
+
+                # Build SVG road
+                if road_is_intersection:
+                    road_svg = '''
+                    <rect x="0" y="160" width="700" height="100" fill="#555"/>
+                    <rect x="300" y="0" width="100" height="420" fill="#555"/>
+                    <line x1="0" y1="210" x2="300" y2="210" stroke="#fbbf24" stroke-width="2" stroke-dasharray="20,15"/>
+                    <line x1="400" y1="210" x2="700" y2="210" stroke="#fbbf24" stroke-width="2" stroke-dasharray="20,15"/>
+                    <line x1="350" y1="0" x2="350" y2="160" stroke="#fbbf24" stroke-width="2" stroke-dasharray="20,15"/>
+                    <line x1="350" y1="260" x2="350" y2="420" stroke="#fbbf24" stroke-width="2" stroke-dasharray="20,15"/>
+                    '''
+                else:
+                    road_svg = '''
+                    <rect x="0" y="150" width="700" height="120" fill="#555" rx="2"/>
+                    <line x1="0" y1="210" x2="700" y2="210" stroke="#fbbf24" stroke-width="2" stroke-dasharray="20,15"/>
+                    <line x1="0" y1="150" x2="700" y2="150" stroke="white" stroke-width="2"/>
+                    <line x1="0" y1="270" x2="700" y2="270" stroke="white" stroke-width="2"/>
+                    '''
+
+                # Vehicle 2 SVG (if present)
+                v2_svg = ""
+                if has_v2:
+                    if road_is_intersection:
+                        v2_svg = f'''<g>
+                          <animateTransform attributeName="transform" type="translate" from="0,0" to="0,135" dur="{dur}" fill="freeze"/>
+                          <rect x="325" y="60" width="50" height="26" rx="5" fill="{v2_color}" stroke="#fff" stroke-width="1"/>
+                          <text x="350" y="78" fill="white" font-size="10" font-weight="bold" text-anchor="middle">V2</text>
+                        </g>'''
+                    else:
+                        v2_svg = f'''<g>
+                          <animateTransform attributeName="transform" type="translate" from="0,0" to="-200,0" dur="{dur}" fill="freeze"/>
+                          <rect x="560" y="215" width="50" height="26" rx="5" fill="{v2_color}" stroke="#fff" stroke-width="1"/>
+                          <text x="585" y="233" fill="white" font-size="10" font-weight="bold" text-anchor="middle">V2</text>
+                        </g>'''
+
+                html = f'''
+<div style="text-align:center; font-family: Inter, Arial, sans-serif;">
+<svg id="anim_{uid}" width="700" height="420" viewBox="0 0 700 420" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #444; border-radius:10px; background:#1a1a2e;">
+  <defs>
+    <radialGradient id="glow_{uid}" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#fbbf24" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  {road_svg}
+
+  <!-- Vehicle 1 -->
+  <g>
+    <animateTransform attributeName="transform" type="translate" from="0,0" to="200,0" dur="{dur}" fill="freeze"/>
+    <rect x="80" y="190" width="50" height="26" rx="5" fill="{v1_color}" stroke="#fff" stroke-width="1"/>
+    <text x="105" y="207" fill="white" font-size="10" font-weight="bold" text-anchor="middle">V1</text>
+  </g>
+
+  {v2_svg}
+
+  <!-- Impact flash -->
+  <circle cx="340" cy="210" r="0" fill="url(#glow_{uid})">
+    <animate attributeName="r" values="0;0;0;0;0;0;0;45;55;0" dur="{dur}" fill="freeze"/>
+    <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;0.5;0" dur="{dur}" fill="freeze"/>
+  </circle>
+
+  <!-- Debris -->
+  <circle cx="340" cy="210" r="3" fill="#fbbf24" opacity="0">
+    <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;0" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cx" values="340;340;340;340;340;340;340;310;290" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cy" values="210;210;210;210;210;210;210;185;170" dur="{dur}" fill="freeze"/>
+  </circle>
+  <circle cx="340" cy="210" r="2" fill="#ef4444" opacity="0">
+    <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;0" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cx" values="340;340;340;340;340;340;340;370;395" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cy" values="210;210;210;210;210;210;210;190;175" dur="{dur}" fill="freeze"/>
+  </circle>
+  <circle cx="340" cy="210" r="3" fill="#e2e8f0" opacity="0">
+    <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;0" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cx" values="340;340;340;340;340;340;340;320;305" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cy" values="210;210;210;210;210;210;210;235;255" dur="{dur}" fill="freeze"/>
+  </circle>
+  <circle cx="340" cy="210" r="2" fill="#f97316" opacity="0">
+    <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;0" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cx" values="340;340;340;340;340;340;340;365;385" dur="{dur}" fill="freeze"/>
+    <animate attributeName="cy" values="210;210;210;210;210;210;210;230;250" dur="{dur}" fill="freeze"/>
+  </circle>
+
+  <!-- Collision label -->
+  <text x="350" y="145" fill="#ef4444" font-size="18" font-weight="bold" text-anchor="middle" opacity="0" font-family="Inter, Arial, sans-serif">
+    COLLISION
+    <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;1" dur="{dur}" fill="freeze"/>
+  </text>
+
+  <!-- HUD -->
+  <rect x="10" y="350" width="680" height="60" rx="8" fill="rgba(0,0,0,0.6)"/>
+  <text x="20" y="375" fill="#e2e8f0" font-size="12" font-family="Inter, Arial, sans-serif">{v1_make[:35]}</text>
+  <text x="20" y="398" fill="#e2e8f0" font-size="12" font-family="Inter, Arial, sans-serif">{"" if not has_v2 else v2_make[:35]}{"Single vehicle accident" if not has_v2 else ""}</text>
+  <text x="680" y="375" fill="{sev_color}" font-size="14" font-weight="bold" text-anchor="end" font-family="Inter, Arial, sans-serif">{category.upper()}</text>
+  <text x="680" y="398" fill="#94a3b8" font-size="11" text-anchor="end" font-family="Inter, Arial, sans-serif">Impact: {impact} | Road: {road_type}</text>
+</svg>
+<div style="margin-top:8px; color:#94a3b8; font-size:12px;">
+  Vehicles: {num_v} | Animation auto-plays on load
+</div>
+</div>
+'''
+                return html
+
+            anim_btn.click(generate_animation_fn, inputs=[anim_case_id], outputs=[anim_output])
+
+
+
+            anim_btn.click(generate_animation_fn, inputs=[anim_case_id], outputs=[anim_output])
+
+        # Hidden API-only endpoints (for @gradio/client from custom frontend)
+        with gr.TabItem("🔌 API", visible=False):
+            api_health_btn = gr.Button("health")
+            api_health_out = gr.Textbox()
+            api_health_btn.click(health_fn, outputs=[api_health_out], api_name="health")
+
+            api_cases_btn = gr.Button("list_cases_json")
+            api_cases_out = gr.Textbox()
+            api_cases_btn.click(list_cases_json, outputs=[api_cases_out], api_name="list_cases_json")
+
+            api_case_id = gr.Number(precision=0)
+            api_case_btn = gr.Button("get_case")
+            api_case_out = gr.Textbox()
+            api_case_btn.click(get_case_json, inputs=[api_case_id], outputs=[api_case_out], api_name="get_case")
+
+            api_report_id = gr.Number(precision=0)
+            api_report_btn = gr.Button("get_report")
+            api_report_out = gr.Textbox()
+            api_report_btn.click(get_report_json, inputs=[api_report_id], outputs=[api_report_out], api_name="get_report_json")
+
+            api_rules_btn = gr.Button("get_rules_json")
+            api_rules_out = gr.Textbox()
+            api_rules_btn.click(get_rules_json, outputs=[api_rules_out], api_name="get_rules_json")
+
+    gr.Markdown("---\n*TraceScene — Built by Siddharth Ravikumar | tracescene@zohomail.ae*")
+
+
+# ── Create FastAPI App & Mount Gradio ────────────────────────────────
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Static files (frontend)
+frontend_dir = Path(__file__).resolve().parent / "frontend"
+if frontend_dir.exists():
+    app.mount("/static", StaticFiles(directory=str(frontend_dir)), name="static")
+
+@app.get("/")
+async def serve_frontend():
+    index_file = frontend_dir / "index.html"
+    if index_file.exists():
+        return FileResponse(str(index_file))
+    return {"message": "TraceScene API", "docs": "/docs"}
+
+# API Routes
+app.include_router(router, prefix="/api")
+
+# Serve uploads folder manually too
+@app.get("/uploads/{path:path}")
+async def serve_upload(path: str):
+    filepath = settings.upload_path / path
+    if not filepath.exists():
+        from fastapi import HTTPException
+        raise HTTPException(404, "File not found")
+    return FileResponse(str(filepath))
+
+# Mount Gradio app at /gradio
+# Note: Since ZeroGPU uses the main app module, we must export `app` itself as the Gradio wrapper. HF Spaces uses app.py
+app = gr.mount_gradio_app(
+    app,
+    demo,
+    path="/gradio"
+)
+
+# Startup event wrapper
+@app.on_event("startup")
+async def startup_event():
+    logger.info("Starting up FastAPI application...")
+    await _ensure_init()
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

backend/app/__init__.py

@@ -0,0 +1 @@
+"""AI Accident Analysis — Backend Application"""

backend/app/api/routes.py

@@ -0,0 +1,367 @@
+"""
+AI Accident Analysis — REST API Routes
+
+All endpoints for case management, photo upload, analysis, and reporting.
+"""
+
+import os
+import hashlib
+import json
+from pathlib import Path
+from typing import Optional
+
+from fastapi import APIRouter, UploadFile, File, Form, HTTPException, Query
+from fastapi.responses import JSONResponse, FileResponse
+
+from backend.app.config import settings
+from backend.app.db.database import db
+from backend.app.core.inference import inference_engine
+from backend.app.core.scene_analyzer import scene_analyzer
+from backend.app.core.rule_matcher import rule_matcher
+from backend.app.core.fault_deducer import fault_deducer
+from backend.app.core.report_generator import report_generator
+from backend.app.rules.rule_loader import rule_loader
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("api")
+
+router = APIRouter(prefix="/api")
+
+
+# ── Health ─────────────────────────────────────────────────────────────
+
+@router.get("/health")
+async def health():
+    """Health check with model and rules status."""
+    return {
+        "status": "ok",
+        "model_loaded": inference_engine.is_loaded,
+        "model_id": settings.model_id if inference_engine.is_loaded else None,
+        "device": inference_engine._device if inference_engine.is_loaded else None,
+        "rules_loaded": len(rule_loader.get_all_rules()),
+    }
+
+
+# ── Cases ──────────────────────────────────────────────────────────────
+
+@router.post("/cases")
+async def create_case(
+    case_number: str = Form(...),
+    officer_name: Optional[str] = Form(None),
+    location: Optional[str] = Form(None),
+    incident_date: Optional[str] = Form(None),
+    notes: Optional[str] = Form(None),
+):
+    """Create a new accident case."""
+    try:
+        case_id = await db.create_case(
+            case_number=case_number,
+            officer_name=officer_name,
+            location=location,
+            incident_date=incident_date,
+            notes=notes,
+        )
+        case = await db.get_case(case_id)
+        logger.info(f"Created case {case_id}: {case_number}")
+        return {"id": case_id, "case": case}
+    except Exception as e:
+        if "UNIQUE constraint" in str(e):
+            raise HTTPException(400, f"Case number '{case_number}' already exists")
+        raise HTTPException(500, str(e))
+
+
+@router.get("/cases")
+async def list_cases():
+    """List all cases with photo counts."""
+    cases = await db.list_cases()
+    # Add photo counts
+    for case in cases:
+        photos = await db.get_photos_by_case(case["id"])
+        case["photo_count"] = len(photos)
+    return {"cases": cases}
+
+
+@router.get("/cases/{case_id}")
+async def get_case(case_id: int):
+    """Get case details with photos and analysis status."""
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    photos = await db.get_photos_by_case(case_id)
+    analyses = await db.get_analyses_by_case(case_id)
+    parties = await db.get_parties_by_case(case_id)
+    violations = await db.get_violations_by_case(case_id)
+    fault = await db.get_fault_analysis(case_id)
+
+    return {
+        "case": case,
+        "photos": photos,
+        "analyses": analyses,
+        "parties": parties,
+        "violations": violations,
+        "fault_analysis": fault,
+        "stats": {
+            "total_photos": len(photos),
+            "analyzed_photos": len(analyses),
+            "violations_found": len(violations),
+            "parties_identified": len(parties),
+        },
+    }
+
+
+@router.delete("/cases/{case_id}")
+async def delete_case(case_id: int):
+    """Delete a case and all associated data."""
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    # Delete uploaded photos from disk
+    photos = await db.get_photos_by_case(case_id)
+    for photo in photos:
+        try:
+            filepath = Path(photo["filepath"])
+            if filepath.exists():
+                filepath.unlink()
+        except Exception as e:
+            logger.warning(f"Failed to delete photo file: {e}")
+
+    await db.delete_case(case_id)
+    logger.info(f"Deleted case {case_id}")
+    return {"message": f"Case {case_id} deleted"}
+
+
+@router.put("/cases/{case_id}")
+async def update_case(
+    case_id: int,
+    officer_name: Optional[str] = Form(None),
+    location: Optional[str] = Form(None),
+    incident_date: Optional[str] = Form(None),
+    notes: Optional[str] = Form(None),
+):
+    """Update case details."""
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    await db.update_case(
+        case_id=case_id,
+        officer_name=officer_name,
+        location=location,
+        incident_date=incident_date,
+        notes=notes,
+    )
+    updated_case = await db.get_case(case_id)
+    logger.info(f"Updated case {case_id}")
+    return {"message": "Case updated", "case": updated_case}
+
+
+# ── Photos ─────────────────────────────────────────────────────────────
+
+@router.post("/cases/{case_id}/photos")
+async def upload_photos(
+    case_id: int,
+    files: list[UploadFile] = File(...),
+):
+    """Upload one or more photos to a case."""
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    # Check photo limit
+    existing = await db.get_photos_by_case(case_id)
+    if len(existing) + len(files) > settings.max_photos_per_case:
+        raise HTTPException(
+            400,
+            f"Maximum {settings.max_photos_per_case} photos per case. "
+            f"Already have {len(existing)}."
+        )
+
+    # Create case-specific upload directory
+    case_dir = settings.upload_path / f"case_{case_id}"
+    case_dir.mkdir(parents=True, exist_ok=True)
+
+    uploaded = []
+    for upload_file in files:
+        # Validate extension
+        ext = upload_file.filename.rsplit(".", 1)[-1].lower() if "." in upload_file.filename else ""
+        if ext not in settings.allowed_extensions_list:
+            logger.warning(f"Rejected file: {upload_file.filename} (invalid extension)")
+            continue
+
+        # Read file
+        content = await upload_file.read()
+        file_size = len(content)
+
+        # Check size
+        if file_size > settings.max_file_size_bytes:
+            logger.warning(f"Rejected file: {upload_file.filename} (too large: {file_size})")
+            continue
+
+        # Save file
+        file_hash = hashlib.md5(content).hexdigest()[:12]
+        safe_name = f"{file_hash}_{upload_file.filename}"
+        filepath = case_dir / safe_name
+
+        with open(filepath, "wb") as f:
+            f.write(content)
+
+        # Get image dimensions
+        width, height = None, None
+        try:
+            from PIL import Image
+            img = Image.open(filepath)
+            width, height = img.size
+        except Exception:
+            pass
+
+        # Store in DB
+        photo_id = await db.add_photo(
+            case_id=case_id,
+            filename=upload_file.filename,
+            filepath=str(filepath),
+            file_size=file_size,
+            width=width,
+            height=height,
+        )
+
+        uploaded.append({
+            "id": photo_id,
+            "filename": upload_file.filename,
+            "size": file_size,
+            "width": width,
+            "height": height,
+        })
+
+    logger.info(f"Uploaded {len(uploaded)} photos to case {case_id}")
+    return {"uploaded": uploaded, "count": len(uploaded)}
+
+
+@router.get("/photos/{photo_id}/image")
+async def get_photo_image(photo_id: int):
+    """Serve a photo image file."""
+    photo = await db.get_photo(photo_id)
+    if not photo:
+        raise HTTPException(404, "Photo not found")
+
+    filepath = Path(photo["filepath"])
+    if not filepath.exists():
+        raise HTTPException(404, "Photo file not found on disk")
+
+    return FileResponse(str(filepath), media_type="image/jpeg")
+
+
+# ── Analysis ───────────────────────────────────────────────────────────
+
+@router.post("/cases/{case_id}/analyze")
+async def analyze_case(case_id: int):
+    """
+    Trigger full analysis pipeline for a case:
+    1. Analyze all unanalyzed photos (scene analysis)
+    2. Match observations against traffic rules
+    3. Deduce fault
+    """
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    if not inference_engine.is_loaded:
+        raise HTTPException(503, "Model not loaded yet. Please wait for startup to complete.")
+
+    photos = await db.get_photos_by_case(case_id)
+    if not photos:
+        raise HTTPException(400, "No photos uploaded for this case")
+
+    try:
+        # Step 1: Scene analysis
+        logger.info(f"[Case {case_id}] Step 1: Scene analysis...")
+        analysis_result = await scene_analyzer.analyze_case(case_id)
+
+        # Step 2: Rule matching
+        logger.info(f"[Case {case_id}] Step 2: Rule matching...")
+        violations = await rule_matcher.match_violations(case_id)
+
+        # Step 3: Fault deduction
+        logger.info(f"[Case {case_id}] Step 3: Fault deduction...")
+        fault_result = await fault_deducer.deduce_fault(case_id)
+
+        # Update case status
+        await db.update_case_status(case_id, "complete")
+
+        return {
+            "status": "complete",
+            "analysis": analysis_result,
+            "violations_found": len(violations),
+            "fault_analysis": fault_result,
+        }
+
+    except Exception as e:
+        logger.error(f"Analysis failed for case {case_id}: {e}")
+        await db.update_case_status(case_id, "error")
+        raise HTTPException(500, f"Analysis failed: {str(e)}")
+
+
+@router.get("/cases/{case_id}/report")
+async def get_report(case_id: int):
+    """Get the full generated incident report."""
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    report = await report_generator.generate_report(case_id)
+    return report
+
+
+@router.get("/cases/{case_id}/status")
+async def get_analysis_status(case_id: int):
+    """Get analysis progress for a case."""
+    case = await db.get_case(case_id)
+    if not case:
+        raise HTTPException(404, "Case not found")
+
+    photos = await db.get_photos_by_case(case_id)
+    analyses = await db.get_analyses_by_case(case_id)
+    violations = await db.get_violations_by_case(case_id)
+
+    total = len(photos)
+    analyzed = len(analyses)
+
+    return {
+        "case_id": case_id,
+        "status": case["status"],
+        "total_photos": total,
+        "analyzed_photos": analyzed,
+        "violations_found": len(violations),
+        "progress_percent": round(analyzed / max(total, 1) * 100, 1),
+    }
+
+
+# ── Rules ──────────────────────────────────────────────────────────────
+
+@router.get("/rules")
+async def get_rules():
+    """Get all traffic rules organized by category."""
+    return rule_loader.get_rules_summary()
+
+
+@router.get("/rules/{category_id}")
+async def get_rules_by_category(category_id: str):
+    """Get rules for a specific category."""
+    rules = rule_loader.get_rules_by_category(category_id.upper())
+    if not rules:
+        raise HTTPException(404, f"Category '{category_id}' not found")
+    return {
+        "category": category_id.upper(),
+        "rules": [
+            {
+                "id": r.id,
+                "title": r.title,
+                "description": r.description,
+                "severity": r.severity,
+                "visual_indicators": r.visual_indicators,
+                "fault_weight": r.fault_weight,
+            }
+            for r in rules
+        ],
+    }

backend/app/config.py

@@ -0,0 +1,134 @@
+"""
+AI Accident Analysis — Application Configuration
+
+All settings are loaded from environment variables / .env file.
+Reuses the same pydantic-settings pattern as PhotoSearchApp.
+"""
+
+import os
+from pathlib import Path
+from typing import List
+
+from pydantic_settings import BaseSettings
+from pydantic import Field
+
+
+class Settings(BaseSettings):
+    """Central configuration — all values come from .env or environment."""
+
+    # --- Model ---
+    model_id: str = Field(default="LiquidAI/LFM2-VL-3B", description="HuggingFace model ID for vision")
+    chat_model_id: str = Field(default="LiquidAI/LFM2.5-1.2B-Instruct", description="HuggingFace model ID for text chatbot")
+    model_torch_dtype: str = Field(default="bfloat16", description="Torch dtype: bfloat16, float16, float32")
+    model_max_new_tokens: int = Field(default=1024, description="Max tokens — higher for detailed accident analysis")
+    model_repetition_penalty: float = Field(default=1.2, description="Penalty for repeating tokens")
+    model_temperature: float = Field(default=0.3, description="Low temperature for deterministic analysis")
+    model_trust_remote_code: bool = Field(default=True, description="Trust remote code in model repo")
+
+    # --- Device ---
+    device: str = Field(default="auto", description="Device: auto, mps, cuda, cpu")
+
+    # --- Server ---
+    host: str = Field(default="0.0.0.0")
+    port: int = Field(default=8001)
+    debug: bool = Field(default=True)
+    workers: int = Field(default=1)
+
+    # --- Upload ---
+    max_file_size_mb: int = Field(default=15, description="Max single file size in MB")
+    max_photos_per_case: int = Field(default=20, description="Max photos per accident case")
+    allowed_extensions: str = Field(default="jpg,jpeg,png,webp", description="Comma-separated allowed extensions")
+
+    # --- Analysis ---
+    confidence_threshold: float = Field(default=0.6, description="Min confidence for rule violation match")
+    fault_min_violations: int = Field(default=1, description="Min violations needed to assign fault")
+
+    # --- Security ---
+    cors_origins: str = Field(default="http://localhost:8001,http://127.0.0.1:8001")
+
+    # --- Logging ---
+    log_level: str = Field(default="INFO")
+    log_file_max_bytes: int = Field(default=10485760)  # 10MB
+    log_file_backup_count: int = Field(default=5)
+
+    # --- Paths ---
+    upload_dir: str = Field(default="uploads")
+    data_dir: str = Field(default="data")
+    log_dir: str = Field(default="logs")
+    rules_dir: str = Field(default="backend/app/rules")
+
+    class Config:
+        env_file = ".env"
+        env_file_encoding = "utf-8"
+        case_sensitive = False
+        extra = "allow"
+
+    # --- Derived properties ---
+
+    @property
+    def base_path(self) -> Path:
+        """Project root directory."""
+        return Path(__file__).resolve().parent.parent.parent
+
+    @property
+    def upload_path(self) -> Path:
+        p = self.base_path / self.upload_dir
+        p.mkdir(parents=True, exist_ok=True)
+        return p
+
+    @property
+    def data_path(self) -> Path:
+        p = self.base_path / self.data_dir
+        p.mkdir(parents=True, exist_ok=True)
+        return p
+
+    @property
+    def log_path(self) -> Path:
+        p = self.base_path / self.log_dir
+        p.mkdir(parents=True, exist_ok=True)
+        return p
+
+    @property
+    def db_path(self) -> Path:
+        return self.data_path / "accident_analysis.db"
+
+    @property
+    def rules_path(self) -> Path:
+        return self.base_path / self.rules_dir
+
+    @property
+    def allowed_extensions_list(self) -> List[str]:
+        return [ext.strip().lower() for ext in self.allowed_extensions.split(",")]
+
+    @property
+    def cors_origins_list(self) -> List[str]:
+        return [origin.strip() for origin in self.cors_origins.split(",")]
+
+    @property
+    def max_file_size_bytes(self) -> int:
+        return self.max_file_size_mb * 1024 * 1024
+
+    def resolve_device(self) -> str:
+        """Resolve 'auto' device to the best available: MPS (M3) > CUDA > CPU."""
+        import torch
+        if self.device != "auto":
+            return self.device
+        if torch.backends.mps.is_available():
+            return "mps"
+        if torch.cuda.is_available():
+            return "cuda"
+        return "cpu"
+
+    def resolve_torch_dtype(self):
+        """Convert string dtype to torch dtype object."""
+        import torch
+        dtype_map = {
+            "bfloat16": torch.bfloat16,
+            "float16": torch.float16,
+            "float32": torch.float32,
+        }
+        return dtype_map.get(self.model_torch_dtype, torch.bfloat16)
+
+
+# Singleton settings instance
+settings = Settings()

backend/app/core/fault_deducer.py

@@ -0,0 +1,293 @@
+"""
+AI Accident Analysis — Fault Deducer
+
+Determines probable cause and fault assignment based on matched
+violations, their severity weights, and physical evidence.
+"""
+
+import json
+from typing import List, Dict, Optional, Tuple
+
+from backend.app.db.database import db
+from backend.app.rules.rule_loader import rule_loader
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("fault_deducer")
+
+# Severity multipliers for fault scoring
+SEVERITY_MULTIPLIER = {
+    "CRITICAL": 3.0,
+    "HIGH": 2.0,
+    "MEDIUM": 1.0,
+    "LOW": 0.5,
+}
+
+
+class FaultDeducer:
+    """
+    Determines probable cause and fault assignment.
+
+    Scoring algorithm:
+      fault_score(party) = Σ (violation.confidence × violation.fault_weight × severity_multiplier)
+
+    The party with the highest fault score is assigned primary fault.
+    Fault percentages are computed as relative scores.
+    """
+
+    async def deduce_fault(self, case_id: int) -> Dict:
+        """
+        Analyze violations and evidence to determine fault.
+        Returns fault analysis and saves to database.
+        """
+        logger.info(f"Starting fault deduction for case {case_id}")
+
+        violations = await db.get_violations_by_case(case_id)
+        parties = await db.get_parties_by_case(case_id)
+        analyses = await db.get_analyses_by_case(case_id)
+
+        if not violations:
+            result = self._no_violations_result(case_id, parties)
+            await self._save_result(case_id, result)
+            return result
+
+        if not parties:
+            result = self._no_parties_result(case_id, violations)
+            await self._save_result(case_id, result)
+            return result
+
+        # Calculate fault scores per party
+        party_scores = self._calculate_fault_scores(violations, parties)
+
+        # Determine fault distribution (percentages)
+        fault_distribution = self._compute_distribution(party_scores, parties)
+
+        # Find primary fault party
+        primary_party_id, primary_score = max(
+            party_scores.items(), key=lambda x: x[1]
+        ) if party_scores else (None, 0)
+
+        # Generate probable cause narrative
+        probable_cause = self._generate_probable_cause(
+            violations, parties, party_scores, analyses
+        )
+
+        # Generate summary
+        analysis_summary = self._generate_summary(
+            violations, parties, fault_distribution, primary_party_id
+        )
+
+        # Overall confidence = weighted average of violation confidences
+        total_confidence_weight = sum(
+            v["confidence"] * SEVERITY_MULTIPLIER.get(v.get("severity", "MEDIUM"), 1.0)
+            for v in violations
+        )
+        total_weight = sum(
+            SEVERITY_MULTIPLIER.get(v.get("severity", "MEDIUM"), 1.0)
+            for v in violations
+        )
+        overall_confidence = round(
+            total_confidence_weight / max(total_weight, 1), 3
+        )
+
+        result = {
+            "case_id": case_id,
+            "primary_fault_party_id": primary_party_id,
+            "primary_fault_party_label": next(
+                (p["label"] for p in parties if p["id"] == primary_party_id), None
+            ),
+            "fault_distribution": fault_distribution,
+            "probable_cause": probable_cause,
+            "overall_confidence": overall_confidence,
+            "analysis_summary": analysis_summary,
+            "violation_count": len(violations),
+            "party_scores": {
+                next((p["label"] for p in parties if p["id"] == pid), f"Party {pid}"): round(score, 3)
+                for pid, score in party_scores.items()
+            },
+        }
+
+        await self._save_result(case_id, result)
+
+        logger.info(
+            f"Case {case_id} fault analysis: primary fault = "
+            f"{result['primary_fault_party_label']}, "
+            f"confidence = {overall_confidence}, "
+            f"{len(violations)} violations"
+        )
+
+        return result
+
+    def _calculate_fault_scores(
+        self, violations: List[dict], parties: List[dict]
+    ) -> Dict[int, float]:
+        """
+        Calculate fault scores per party.
+        Score = Σ (confidence × fault_weight × severity_multiplier)
+        """
+        scores = {p["id"]: 0.0 for p in parties}
+
+        for violation in violations:
+            party_id = violation.get("party_id")
+            if party_id is None or party_id not in scores:
+                continue
+
+            rule = rule_loader.get_rule_by_id(violation["rule_id"])
+            fault_weight = rule.fault_weight if rule else 0.5
+            severity = violation.get("severity", "MEDIUM")
+            multiplier = SEVERITY_MULTIPLIER.get(severity, 1.0)
+
+            score = violation["confidence"] * fault_weight * multiplier
+            scores[party_id] += score
+
+        return scores
+
+    def _compute_distribution(
+        self, party_scores: Dict[int, float], parties: List[dict]
+    ) -> Dict[str, float]:
+        """Convert raw scores to fault percentage distribution."""
+        total = sum(party_scores.values())
+        if total == 0:
+            # Equal distribution
+            n = len(parties)
+            return {
+                p["label"]: round(100.0 / n, 1) for p in parties
+            }
+
+        distribution = {}
+        for party in parties:
+            score = party_scores.get(party["id"], 0)
+            pct = round((score / total) * 100, 1)
+            distribution[party["label"]] = pct
+
+        return distribution
+
+    def _generate_probable_cause(
+        self, violations: List[dict], parties: List[dict],
+        party_scores: Dict[int, float], analyses: List[dict]
+    ) -> str:
+        """Generate a human-readable probable cause narrative."""
+        if not violations:
+            return "Insufficient evidence to determine probable cause."
+
+        # Group violations by party
+        party_violations = {}
+        for v in violations:
+            party_id = v.get("party_id")
+            party_label = v.get("party_label", "Unknown")
+            if party_label not in party_violations:
+                party_violations[party_label] = []
+            party_violations[party_label].append(v)
+
+        # Build narrative
+        parts = ["Based on the analysis of accident scene photographs:"]
+
+        for party_label, p_violations in party_violations.items():
+            critical = [v for v in p_violations if v.get("severity") == "CRITICAL"]
+            high = [v for v in p_violations if v.get("severity") == "HIGH"]
+            other = [v for v in p_violations
+                     if v.get("severity") not in ("CRITICAL", "HIGH")]
+
+            violation_desc = []
+            for v in (critical + high + other)[:5]:  # Top 5 violations
+                violation_desc.append(
+                    f"{v['rule_title']} ({v.get('severity', 'MEDIUM')}, "
+                    f"confidence: {v['confidence']:.0%})"
+                )
+
+            parts.append(
+                f"\n{party_label} was found to have the following violations: "
+                + "; ".join(violation_desc) + "."
+            )
+
+        # Add conclusion
+        if party_scores:
+            max_party_id = max(party_scores, key=party_scores.get)
+            max_label = next(
+                (p["label"] for p in parties if p["id"] == max_party_id),
+                "Unknown"
+            )
+            parts.append(
+                f"\nBased on the severity and number of violations, "
+                f"{max_label} is assessed as the primary contributing party."
+            )
+
+        return " ".join(parts)
+
+    def _generate_summary(
+        self, violations: List[dict], parties: List[dict],
+        distribution: Dict[str, float], primary_party_id: Optional[int]
+    ) -> str:
+        """Generate a concise summary of the fault analysis."""
+        primary_label = next(
+            (p["label"] for p in parties if p["id"] == primary_party_id),
+            "Unknown"
+        )
+
+        critical_count = sum(1 for v in violations if v.get("severity") == "CRITICAL")
+        high_count = sum(1 for v in violations if v.get("severity") == "HIGH")
+
+        dist_str = ", ".join(
+            f"{label}: {pct}%" for label, pct in distribution.items()
+        )
+
+        return (
+            f"Analysis identified {len(violations)} traffic violation(s) "
+            f"({critical_count} critical, {high_count} high severity). "
+            f"Primary fault assigned to {primary_label}. "
+            f"Fault distribution: {dist_str}."
+        )
+
+    def _no_violations_result(self, case_id: int, parties: List[dict]) -> Dict:
+        """Result when no violations are found."""
+        return {
+            "case_id": case_id,
+            "primary_fault_party_id": None,
+            "primary_fault_party_label": None,
+            "fault_distribution": {
+                p["label"]: round(100.0 / max(len(parties), 1), 1)
+                for p in parties
+            } if parties else {},
+            "probable_cause": (
+                "No clear traffic violations were identified from the available "
+                "photographs. Additional evidence or investigation may be required."
+            ),
+            "overall_confidence": 0.0,
+            "analysis_summary": "No violations detected. Manual review recommended.",
+            "violation_count": 0,
+            "party_scores": {},
+        }
+
+    def _no_parties_result(self, case_id: int, violations: List[dict]) -> Dict:
+        """Result when no parties are identified."""
+        return {
+            "case_id": case_id,
+            "primary_fault_party_id": None,
+            "primary_fault_party_label": None,
+            "fault_distribution": {},
+            "probable_cause": (
+                f"{len(violations)} violation(s) detected but no parties could be "
+                "identified from the photographs. Manual party identification required."
+            ),
+            "overall_confidence": 0.3,
+            "analysis_summary": "Violations detected but parties not identifiable.",
+            "violation_count": len(violations),
+            "party_scores": {},
+        }
+
+    async def _save_result(self, case_id: int, result: Dict):
+        """Save fault analysis to database."""
+        try:
+            await db.save_fault_analysis(
+                case_id=case_id,
+                primary_fault_party_id=result.get("primary_fault_party_id"),
+                fault_distribution_json=json.dumps(result.get("fault_distribution", {})),
+                probable_cause=result.get("probable_cause", ""),
+                overall_confidence=result.get("overall_confidence", 0.0),
+                analysis_summary=result.get("analysis_summary", ""),
+            )
+        except Exception as e:
+            logger.error(f"Failed to save fault analysis for case {case_id}: {e}")
+
+
+# Singleton
+fault_deducer = FaultDeducer()

backend/app/core/inference.py

@@ -0,0 +1,319 @@
+"""
+AI Accident Analysis — LFM Inference Engine
+
+Wraps the LiquidAI LFM2-VL model for accident scene analysis.
+Reused from PhotoSearchApp with specialized accident analysis prompts.
+Supports M3/MPS, CUDA, and CPU. Model ID is configurable.
+"""
+
+import time
+import torch
+from PIL import Image
+from typing import Dict, Any
+from pathlib import Path
+
+from backend.app.config import settings
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("inference")
+
+
+# ── Accident Analysis Prompts ──────────────────────────────────────────
+
+SCENE_ANALYSIS_PROMPT = """You are an expert AI Accident Investigator. Analyze this accident scene photograph and extract specific details EXACTLY matching the formatting below.
+
+DO NOT output a generic "Accident Report" with Date/Time/Location. Do not use markdown headers like "## Accident Report".
+You MUST output EXACTLY these four bracketed sections and nothing else. Output the brackets exactly as shown.
+
+[AI Observation]
+Vehicles Involved: <Number>
+Vehicle 1 Make/Model: <Year Make Model (Color BodyType)>
+Vehicle 1 License Plate: <Plate or "Not visible">
+Vehicle 1 Geographic Location: <Place name and Country derived from license plate format/text. E.g. "Maharashtra, India" or "Texas, USA" if possible, else "Unknown">
+Vehicle 1 Owner: <Owner Name or "Not visible">
+... (Repeat exactly the same 4 fields for Vehicle 2, Vehicle 3, etc. ONLY if they are clearly visible in the image. DO NOT invent vehicles that do not exist.)
+Non-vehicle Parties: <Pedestrians, cyclists, objects if any>
+
+[Accident Severity]
+Accident Category: <mild / medium / critical based on structural damage>
+Survival/Injury Estimation: <minor injury / critical injury / life threatening injury based on passenger compartment intrusion and airbag deployment>
+
+[Condition Assessment]
+Time of Incident: <Day / Dusk / Night based on lighting>
+Weather: <Clear / Cloudy / Rain / Fog / Snow>
+Road Type: <1-way / 2-way / Intersection / Parking Lot / Highway>
+Road Surface: <Dry / Wet / Icy / Debris-covered>
+Vehicle 1 Position: <Direction facing, location on road>
+Vehicle 1 Tyre Direction: <Straight / Turned Left / Turned Right>
+Vehicle 1 Tyre Condition: <Condition details or "Not visible">
+... (Repeat exactly the same 3 fields for Vehicle 2, Vehicle 3, etc. ONLY if they are present)
+Area of Impact: <Front / Rear / Side / Corner etc. for the primary collision>
+Visible Debris/Skid Marks: <Description of glass, plastic, fluids, or tire marks on road>
+Airbag/Safety: <Deployed / Not visible>
+
+[Damage Analysis & Insurance Assessment]
+- <Specific Part of Vehicle 1>: <Damage description> (Intensity: <Low/Medium/High>). Clause <Guess> -> <SUBROGATION CLAIM / FULLY COVERED / SUBJECT TO DEDUCTIBLE>
+... (List damage for other visible vehicles only)
+
+[Summary]
+<2-3 sentences summarizing the collision, layout, and visible damages>"""
+
+
+DAMAGE_ASSESSMENT_PROMPT = """Examine this vehicle closely and provide a detailed damage assessment:
+
+1. DAMAGE_LOCATIONS: List every area of damage visible (front bumper, hood, windshield, driver door, rear quarter panel, etc.)
+2. DAMAGE_SEVERITY: For each location, rate: minor (cosmetic scratches/dents), moderate (structural deformation), severe (crushed/destroyed)
+3. DAMAGE_TYPE: For each location: impact, scrape, rollover, fire, or combination
+4. IMPACT_DIRECTION: Based on damage pattern, estimate the direction of force (front, rear, left, right, top)
+5. SAFETY_INDICATORS: Airbag deployment, seatbelt marks, interior damage visible
+
+Only describe what you can see. Be specific about locations on the vehicle."""
+
+
+class LFMInferenceEngine:
+    """
+    Singleton wrapper around the LFM vision-language model.
+
+    Provides specialized methods for accident scene analysis:
+    - analyze_scene(): Comprehensive scene analysis from accident photo
+    - assess_damage(): Detailed vehicle damage assessment
+    """
+
+    _instance = None
+    _model = None
+    _processor = None
+    _device = None
+
+    def __new__(cls):
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+        return cls._instance
+
+    @property
+    def is_loaded(self) -> bool:
+        return self._model is not None and self._processor is not None
+
+    def load_model(self):
+        """Load the model and processor. Called once at app startup."""
+        if self.is_loaded:
+            logger.info("Model already loaded, skipping")
+            return
+
+        from transformers import AutoProcessor, AutoModelForImageTextToText, AutoModel
+
+        model_id = settings.model_id
+        device = settings.resolve_device()
+        dtype = settings.resolve_torch_dtype()
+
+        logger.info(f"Loading model: {model_id} on device: {device} with dtype: {settings.model_torch_dtype}")
+        start = time.perf_counter()
+
+        def load_fn(m_id, **kwargs):
+            try:
+                return AutoModelForImageTextToText.from_pretrained(m_id, **kwargs)
+            except Exception as e:
+                logger.warning(f"AutoModelForImageTextToText failed: {e}. Trying AutoModel...")
+                return AutoModel.from_pretrained(m_id, **kwargs)
+
+        model_args = {
+            "torch_dtype": dtype,
+            "trust_remote_code": settings.model_trust_remote_code,
+        }
+
+        if device == "mps":
+            self._model = load_fn(model_id, **model_args).to("mps")
+        elif device == "cuda":
+            self._model = load_fn(model_id, device_map="auto", **model_args)
+        else:
+            self._model = load_fn(model_id, **model_args)
+
+        self._processor = AutoProcessor.from_pretrained(
+            model_id,
+            trust_remote_code=settings.model_trust_remote_code,
+        )
+
+        self._device = device
+        elapsed = round(time.perf_counter() - start, 2)
+        logger.info(f"Model loaded in {elapsed}s on device: {device}")
+
+    def _get_model_device(self):
+        """Get the device the model is on."""
+        if self._device == "mps":
+            return "mps"
+        elif self._device == "cuda":
+            return self._model.device
+        return "cpu"
+
+    def _run_inference(self, image: Image.Image, prompt: str) -> str:
+        """
+        Core inference: run the model on an image with a text prompt.
+        Returns the generated text response.
+        """
+        if not self.is_loaded:
+            raise RuntimeError("Model not loaded. Call load_model() first.")
+
+        # Modern standard VLM pattern (Llama 3.2 Vision, Qwen2-VL)
+        conversation = [
+            {
+                "role": "user",
+                "content": [
+                    {"type": "image"},
+                    {"type": "text", "text": prompt},
+                ],
+            },
+        ]
+
+        device = self._get_model_device()
+        try:
+            text_prompt = self._processor.apply_chat_template(
+                conversation,
+                add_generation_prompt=True,
+                tokenize=False,
+            )
+            inputs = self._processor(
+                text=text_prompt,
+                images=image,
+                return_tensors="pt",
+            ).to(device)
+        except Exception as e:
+            # Fallback mapping for LiquidAI LFM2-VL
+            logger.info(f"Using fallback processor apply_chat_template: {e}")
+            conversation[0]["content"][0]["image"] = image
+            inputs = self._processor.apply_chat_template(
+                conversation,
+                add_generation_prompt=True,
+                return_tensors="pt",
+                return_dict=True,
+                tokenize=True,
+            ).to(device)
+
+        with torch.inference_mode():
+            outputs = self._model.generate(
+                **inputs,
+                max_new_tokens=settings.model_max_new_tokens,
+                repetition_penalty=settings.model_repetition_penalty,
+                temperature=settings.model_temperature,
+                do_sample=settings.model_temperature > 0,
+            )
+
+        # Better decoding: slice off the input prompt to get only generated tokens
+        prompt_length = inputs["input_ids"].shape[1]
+        generated_tokens = outputs[0][prompt_length:]
+        response = self._processor.decode(generated_tokens, skip_special_tokens=True)
+
+        return response.strip()
+
+    def analyze_scene(self, image: Image.Image) -> Dict[str, Any]:
+        """
+        Analyze an accident scene photo.
+        Returns structured observations about vehicles, damage,
+        road conditions, positions, and visible evidence.
+        """
+        start = time.perf_counter()
+        analysis = self._run_inference(image, SCENE_ANALYSIS_PROMPT)
+        elapsed_ms = round((time.perf_counter() - start) * 1000, 2)
+
+        logger.info(f"Scene analyzed in {elapsed_ms}ms ({len(analysis)} chars)")
+        return {
+            "raw_analysis": analysis,
+            "inference_time_ms": elapsed_ms,
+            "model_id": settings.model_id,
+        }
+
+    def assess_damage(self, image: Image.Image) -> Dict[str, Any]:
+        """
+        Detailed damage assessment for a specific vehicle photo.
+        Returns damage locations, severity, type, and impact direction.
+        """
+        start = time.perf_counter()
+        assessment = self._run_inference(image, DAMAGE_ASSESSMENT_PROMPT)
+        elapsed_ms = round((time.perf_counter() - start) * 1000, 2)
+
+        logger.info(f"Damage assessed in {elapsed_ms}ms ({len(assessment)} chars)")
+        return {
+            "raw_assessment": assessment,
+            "inference_time_ms": elapsed_ms,
+            "model_id": settings.model_id,
+        }
+
+
+# Singleton instance
+inference_engine = LFMInferenceEngine()
+
+
+# ── Chat Engine (Text-only, LFM2.5-1.2B-Instruct) ────────────────────
+
+class ChatEngine:
+    """Lightweight text-only chatbot for case Q&A using LFM2.5-1.2B-Instruct."""
+
+    def __init__(self):
+        self._model = None
+        self._tokenizer = None
+        self._device = None
+        self.is_loaded = False
+
+    def load_model(self):
+        """Load the text-only chat model."""
+        from transformers import AutoModelForCausalLM, AutoTokenizer
+
+        model_id = settings.chat_model_id
+        logger.info(f"Loading chat model: {model_id}")
+
+        device = settings.resolve_device()
+        dtype = settings.resolve_torch_dtype()
+
+        self._tokenizer = AutoTokenizer.from_pretrained(
+            model_id, trust_remote_code=settings.model_trust_remote_code,
+        )
+        self._model = AutoModelForCausalLM.from_pretrained(
+            model_id, torch_dtype=dtype, trust_remote_code=settings.model_trust_remote_code,
+        )
+
+        if device != "cpu":
+            self._model = self._model.to(device)
+
+        self._device = device
+        self.is_loaded = True
+        logger.info(f"Chat model loaded on {device}")
+
+    def chat(self, system_context: str, user_message: str) -> str:
+        """
+        Generate a response given system context and a user question.
+        system_context: case data, traffic rules, etc.
+        user_message: the user's question
+        """
+        if not self.is_loaded:
+            raise RuntimeError("Chat model not loaded. Call load_model() first.")
+
+        messages = [
+            {"role": "system", "content": system_context},
+            {"role": "user", "content": user_message},
+        ]
+
+        try:
+            text_prompt = self._tokenizer.apply_chat_template(
+                messages, add_generation_prompt=True, tokenize=False,
+            )
+        except Exception:
+            # Fallback if no chat template
+            text_prompt = f"System: {system_context}\n\nUser: {user_message}\n\nAssistant:"
+
+        inputs = self._tokenizer(text_prompt, return_tensors="pt").to(self._device)
+
+        with torch.inference_mode():
+            outputs = self._model.generate(
+                **inputs,
+                max_new_tokens=512,
+                repetition_penalty=1.2,
+                temperature=0.4,
+                do_sample=True,
+            )
+
+        prompt_length = inputs["input_ids"].shape[1]
+        generated_tokens = outputs[0][prompt_length:]
+        response = self._tokenizer.decode(generated_tokens, skip_special_tokens=True)
+        return response.strip()
+
+
+# Singleton instance
+chat_engine = ChatEngine()

backend/app/core/report_generator.py

@@ -0,0 +1,200 @@
+"""
+AI Accident Analysis — Report Generator
+
+Generates structured incident reports from analysis results.
+Assembles all analysis components into a comprehensive report object.
+"""
+
+import json
+from typing import Dict, Any, List, Optional
+
+from backend.app.db.database import db
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("report_generator")
+
+DISCLAIMER = (
+    "ADVISORY NOTICE: This analysis was generated by an AI system powered by "
+    "the LFM2-VL vision-language model and is intended as an assistive tool only. "
+    "All findings are preliminary and must be reviewed and validated by qualified "
+    "law enforcement personnel before use in any official proceedings. "
+    "This report does not constitute a legal determination of fault or liability."
+)
+
+
+class ReportGenerator:
+    """Generates structured incident reports from analysis results."""
+
+    async def generate_report(self, case_id: int) -> Dict[str, Any]:
+        """
+        Generate a full incident report for a case.
+        Assembles case info, photos, analyses, violations, and fault analysis.
+        """
+        logger.info(f"Generating report for case {case_id}")
+
+        case = await db.get_case(case_id)
+        if not case:
+            return {"error": f"Case {case_id} not found"}
+
+        photos = await db.get_photos_by_case(case_id)
+        analyses = await db.get_analyses_by_case(case_id)
+        parties = await db.get_parties_by_case(case_id)
+        violations = await db.get_violations_by_case(case_id)
+        fault = await db.get_fault_analysis(case_id)
+
+        # Build scene summary from all analyses
+        scene_summary = self._build_scene_summary(analyses)
+
+        # Build violations summary grouped by severity
+        violations_summary = self._build_violations_summary(violations)
+
+        # Build fault summary
+        fault_summary = self._build_fault_summary(fault, parties)
+
+        report = {
+            "report_type": "TraceScene Report",
+            "disclaimer": DISCLAIMER,
+            "case": {
+                "id": case["id"],
+                "case_number": case["case_number"],
+                "officer_name": case.get("officer_name", "N/A"),
+                "location": case.get("location", "N/A"),
+                "incident_date": case.get("incident_date", "N/A"),
+                "notes": case.get("notes", ""),
+                "status": case["status"],
+                "created_at": case["created_at"],
+            },
+            "photos": [
+                {
+                    "id": p["id"],
+                    "filename": p["filename"],
+                    "photo_type": p.get("photo_type", "general"),
+                    "filepath": p["filepath"],
+                }
+                for p in photos
+            ],
+            "scene_summary": scene_summary,
+            "parties": [
+                {
+                    "id": p["id"],
+                    "label": p["label"],
+                    "vehicle_type": p.get("vehicle_type"),
+                    "vehicle_color": p.get("vehicle_color"),
+                    "description": p.get("vehicle_description", ""),
+                }
+                for p in parties
+            ],
+            "analyses": [
+                {
+                    "photo_id": a.get("photo_id"),
+                    "filename": a.get("filename"),
+                    "raw_analysis": a.get("raw_analysis", ""),
+                    "inference_time_ms": a.get("inference_time_ms"),
+                }
+                for a in analyses
+            ],
+            "violations": violations_summary,
+            "fault_analysis": fault_summary,
+            "statistics": {
+                "total_photos": len(photos),
+                "analyzed_photos": len(analyses),
+                "total_violations": len(violations),
+                "critical_violations": sum(
+                    1 for v in violations if v.get("severity") == "CRITICAL"
+                ),
+                "high_violations": sum(
+                    1 for v in violations if v.get("severity") == "HIGH"
+                ),
+                "parties_identified": len(parties),
+            },
+        }
+
+        logger.info(f"Report generated for case {case_id}")
+        return report
+
+    def _build_scene_summary(self, analyses: List[dict]) -> str:
+        """Build a combined scene description from all photo analyses."""
+        if not analyses:
+            return "No scene analysis available."
+
+        summaries = []
+        for i, analysis in enumerate(analyses, 1):
+            raw = analysis.get("raw_analysis", "")
+            if raw:
+                # Take first 300 chars of each analysis for summary
+                snippet = raw[:300].strip()
+                if len(raw) > 300:
+                    snippet += "..."
+                summaries.append(f"Photo {i} ({analysis.get('filename', 'unknown')}): {snippet}")
+
+        return "\n\n".join(summaries) if summaries else "No scene analysis available."
+
+    def _build_violations_summary(self, violations: List[dict]) -> Dict[str, Any]:
+        """Group violations by severity and format for the report."""
+        grouped = {
+            "CRITICAL": [],
+            "HIGH": [],
+            "MEDIUM": [],
+            "LOW": [],
+        }
+
+        for v in violations:
+            severity = v.get("severity", "MEDIUM")
+            entry = {
+                "rule_id": v["rule_id"],
+                "title": v["rule_title"],
+                "confidence": v["confidence"],
+                "party": v.get("party_label", "Unknown"),
+                "evidence": v.get("evidence_summary", ""),
+                "category": v.get("rule_category", ""),
+            }
+            if severity in grouped:
+                grouped[severity].append(entry)
+            else:
+                grouped["MEDIUM"].append(entry)
+
+        return {
+            "by_severity": grouped,
+            "total": len(violations),
+            "list": [
+                {
+                    "rule_id": v["rule_id"],
+                    "title": v["rule_title"],
+                    "severity": v.get("severity", "MEDIUM"),
+                    "confidence": v["confidence"],
+                    "party": v.get("party_label", "Unknown"),
+                    "evidence": v.get("evidence_summary", ""),
+                }
+                for v in violations
+            ],
+        }
+
+    def _build_fault_summary(
+        self, fault: Optional[dict], parties: List[dict]
+    ) -> Dict[str, Any]:
+        """Format fault analysis for the report."""
+        if not fault:
+            return {
+                "determined": False,
+                "message": "Fault analysis not yet performed.",
+            }
+
+        distribution = {}
+        if fault.get("fault_distribution_json"):
+            try:
+                distribution = json.loads(fault["fault_distribution_json"])
+            except json.JSONDecodeError:
+                pass
+
+        return {
+            "determined": True,
+            "primary_fault_party": fault.get("fault_party_label", "Unknown"),
+            "fault_distribution": distribution,
+            "probable_cause": fault.get("probable_cause", ""),
+            "overall_confidence": fault.get("overall_confidence", 0),
+            "summary": fault.get("analysis_summary", ""),
+        }
+
+
+# Singleton
+report_generator = ReportGenerator()

backend/app/core/rule_matcher.py

@@ -0,0 +1,258 @@
+"""
+AI Accident Analysis — Rule Matcher
+
+Matches scene observations against the traffic ruleset.
+Uses keyword overlap and semantic matching on visual indicators
+to identify which traffic rules were likely violated.
+"""
+
+import re
+import json
+from typing import List, Dict, Set, Tuple
+from collections import Counter
+
+from backend.app.rules.rule_loader import rule_loader, TrafficRule, RuleMatch
+from backend.app.db.database import db
+from backend.app.config import settings
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("rule_matcher")
+
+# Common stop words to filter out
+STOP_WORDS = {
+    "a", "an", "the", "is", "are", "was", "were", "be", "been", "being",
+    "have", "has", "had", "do", "does", "did", "will", "would", "shall",
+    "should", "may", "might", "can", "could", "and", "but", "or", "nor",
+    "not", "no", "so", "if", "then", "than", "that", "this", "these",
+    "those", "it", "its", "to", "of", "in", "on", "at", "by", "for",
+    "with", "from", "up", "out", "off", "into", "over", "about", "as",
+    "very", "also", "just", "each", "some", "any", "all", "such",
+}
+
+
+class RuleMatcher:
+    """
+    Matches observed evidence from accident scene analysis
+    against the traffic ruleset to identify violations.
+    """
+
+    def _tokenize(self, text: str) -> List[str]:
+        """Tokenize text: lowercase, split on non-alpha, remove stop words."""
+        tokens = re.findall(r'[a-z]+', text.lower())
+        return [t for t in tokens if t not in STOP_WORDS and len(t) > 1]
+
+    def _compute_match_score(
+        self, observation_tokens: Set[str], indicator_tokens: Set[str]
+    ) -> float:
+        """
+        Compute overlap score between observation and indicator tokens.
+        Returns a value between 0.0 and 1.0.
+        """
+        if not indicator_tokens:
+            return 0.0
+
+        overlap = observation_tokens & indicator_tokens
+        if not overlap:
+            return 0.0
+
+        # Jaccard-like score weighted by indicator coverage
+        indicator_coverage = len(overlap) / len(indicator_tokens)
+        observation_relevance = len(overlap) / max(len(observation_tokens), 1)
+
+        # Weight indicator coverage more heavily (we care that the
+        # observation matches the rule, not that the rule matches all
+        # the observation text)
+        score = 0.7 * indicator_coverage + 0.3 * observation_relevance
+        return min(score, 1.0)
+
+    async def match_violations(self, case_id: int) -> List[Dict]:
+        """
+        Match all scene analyses for a case against traffic rules.
+        Returns list of violations found and stores them in the database.
+        """
+        logger.info(f"Starting rule matching for case {case_id}")
+
+        analyses = await db.get_analyses_by_case(case_id)
+        parties = await db.get_parties_by_case(case_id)
+
+        if not analyses:
+            logger.warning(f"Case {case_id}: no analyses found for rule matching")
+            return []
+
+        # Clear previous violations for re-analysis
+        await db.clear_violations(case_id)
+
+        all_rules = rule_loader.get_all_rules()
+        if not all_rules:
+            logger.warning("No traffic rules loaded!")
+            return []
+
+        violations = []
+        threshold = settings.confidence_threshold
+
+        for analysis in analyses:
+            # Combine all observation text from this photo
+            observation_text = self._build_observation_text(analysis)
+            observation_tokens = set(self._tokenize(observation_text))
+
+            if not observation_tokens:
+                continue
+
+            for rule in all_rules:
+                match_result = self._match_rule(
+                    observation_tokens, observation_text, rule
+                )
+
+                if match_result and match_result.confidence >= threshold:
+                    # Assign to the most likely party
+                    party_id = self._assign_to_party(
+                        rule, parties, observation_text
+                    )
+
+                    violation_id = await db.add_violation(
+                        case_id=case_id,
+                        rule_id=rule.id,
+                        rule_title=rule.title,
+                        confidence=round(match_result.confidence, 3),
+                        party_id=party_id,
+                        rule_category=rule.category_name,
+                        severity=rule.severity,
+                        evidence_summary=match_result.evidence_text[:500],
+                        photo_id=analysis.get("photo_id"),
+                    )
+
+                    violations.append({
+                        "id": violation_id,
+                        "rule_id": rule.id,
+                        "rule_title": rule.title,
+                        "severity": rule.severity,
+                        "confidence": match_result.confidence,
+                        "party_id": party_id,
+                        "evidence": match_result.evidence_text[:200],
+                    })
+
+        # Deduplicate: if same rule matched across multiple photos,
+        # keep only the highest-confidence instance
+        violations = self._deduplicate_violations(violations)
+
+        logger.info(
+            f"Case {case_id}: {len(violations)} violations found "
+            f"from {len(analyses)} photo analyses"
+        )
+
+        return violations
+
+    def _build_observation_text(self, analysis: dict) -> str:
+        """Combine all analysis fields into a single observation text."""
+        parts = [analysis.get("raw_analysis", "")]
+
+        for field in ["vehicles_json", "road_conditions_json",
+                      "evidence_json", "environmental_json", "positions_json"]:
+            value = analysis.get(field, "")
+            if value and value != "null":
+                if isinstance(value, str):
+                    try:
+                        parsed = json.loads(value)
+                        parts.append(json.dumps(parsed))
+                    except json.JSONDecodeError:
+                        parts.append(value)
+                else:
+                    parts.append(str(value))
+
+        return " ".join(parts)
+
+    def _match_rule(
+        self, observation_tokens: Set[str], observation_text: str,
+        rule: TrafficRule
+    ) -> RuleMatch | None:
+        """
+        Check if a single rule is matched by the observation.
+        Uses both token overlap and phrase matching.
+        """
+        # Score each visual indicator
+        best_score = 0.0
+        matched_indicators = []
+
+        for indicator in rule.visual_indicators:
+            indicator_tokens = set(self._tokenize(indicator))
+
+            # Token overlap score
+            token_score = self._compute_match_score(
+                observation_tokens, indicator_tokens
+            )
+
+            # Phrase/substring match bonus
+            phrase_bonus = 0.0
+            indicator_lower = indicator.lower()
+            if indicator_lower in observation_text.lower():
+                phrase_bonus = 0.3  # Exact phrase found
+
+            combined_score = min(token_score + phrase_bonus, 1.0)
+
+            if combined_score > 0.3:  # Individual indicator threshold
+                matched_indicators.append(indicator)
+
+            best_score = max(best_score, combined_score)
+
+        if not matched_indicators:
+            return None
+
+        # Final confidence = best indicator score * (matched indicator ratio bonus)
+        indicator_ratio = len(matched_indicators) / len(rule.visual_indicators)
+        multi_indicator_bonus = min(indicator_ratio * 0.2, 0.2)
+        final_confidence = min(best_score + multi_indicator_bonus, 1.0)
+
+        # Build evidence summary
+        evidence = f"Matched indicators: {', '.join(matched_indicators[:3])}"
+
+        return RuleMatch(
+            rule=rule,
+            confidence=final_confidence,
+            matched_indicators=matched_indicators,
+            evidence_text=evidence,
+        )
+
+    def _assign_to_party(
+        self, rule: TrafficRule, parties: List[dict],
+        observation_text: str
+    ) -> int | None:
+        """
+        Assign a violation to the most likely party.
+        Uses simple heuristics based on rule type and observation text.
+        """
+        if not parties:
+            return None
+
+        obs_lower = observation_text.lower()
+
+        # Check if observation mentions specific party labels
+        for party in parties:
+            label = party["label"].lower()
+            if label in obs_lower:
+                return party["id"]
+
+            # Also check by color + type
+            p_color = (party.get("vehicle_color") or "").lower()
+            p_type = (party.get("vehicle_type") or "").lower()
+            if p_color and p_color in obs_lower:
+                return party["id"]
+
+        # Default: assign to first party for rear-end rules (following vehicle),
+        # otherwise first party
+        if "following" in str(rule.applicable_parties):
+            return parties[-1]["id"] if len(parties) > 1 else parties[0]["id"]
+
+        return parties[0]["id"]
+
+    def _deduplicate_violations(self, violations: List[dict]) -> List[dict]:
+        """Keep only the highest-confidence violation per rule_id."""
+        best = {}
+        for v in violations:
+            rule_id = v["rule_id"]
+            if rule_id not in best or v["confidence"] > best[rule_id]["confidence"]:
+                best[rule_id] = v
+        return list(best.values())
+
+
+# Singleton
+rule_matcher = RuleMatcher()

backend/app/core/scene_analyzer.py

@@ -0,0 +1,293 @@
+"""
+AI Accident Analysis — Scene Analyzer
+
+Orchestrates multi-image accident scene analysis.
+Runs LFM inference on each photo and parses the structured output
+into components (vehicles, road conditions, evidence, etc.).
+"""
+
+import json
+import re
+import time
+from typing import List, Dict, Any, Optional
+from PIL import Image
+from pathlib import Path
+
+from backend.app.core.inference import inference_engine
+from backend.app.db.database import db
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("scene_analyzer")
+
+
+class SceneAnalyzer:
+    """
+    Analyzes accident scene photos and extracts structured observations.
+    Processes each photo individually, then merges observations across images.
+    """
+
+    async def analyze_case(self, case_id: int) -> Dict[str, Any]:
+        """
+        Analyze all unanalyzed photos in a case.
+        Returns analysis results and updates the database.
+        """
+        logger.info(f"Starting analysis for case {case_id}")
+        start = time.perf_counter()
+
+        # Get unanalyzed photos
+        unanalyzed = await db.get_unanalyzed_photos(case_id)
+        total = len(unanalyzed)
+        analyzed = 0
+        errors = 0
+
+        if total == 0:
+            logger.info(f"Case {case_id}: no unanalyzed photos found")
+            return {"total": 0, "analyzed": 0, "errors": 0, "elapsed_ms": 0}
+
+        await db.update_case_status(case_id, "analyzing")
+
+        all_analyses = []
+        for photo in unanalyzed:
+            try:
+                result = await self._analyze_single_photo(photo)
+                if result:
+                    all_analyses.append(result)
+                    analyzed += 1
+                else:
+                    errors += 1
+            except Exception as e:
+                errors += 1
+                logger.error(f"Failed to analyze photo {photo['id']}: {e}")
+
+        # Identify parties from all analyses
+        parties = self._identify_parties(all_analyses)
+        for party in parties:
+            await db.add_party(
+                case_id=case_id,
+                label=party["label"],
+                vehicle_type=party.get("vehicle_type"),
+                vehicle_color=party.get("vehicle_color"),
+                vehicle_description=party.get("description"),
+            )
+
+        elapsed_ms = round((time.perf_counter() - start) * 1000, 2)
+
+        logger.info(
+            f"Case {case_id} analysis complete: "
+            f"{analyzed}/{total} photos analyzed, {errors} errors, "
+            f"{len(parties)} parties identified, {elapsed_ms}ms"
+        )
+
+        return {
+            "total": total,
+            "analyzed": analyzed,
+            "errors": errors,
+            "parties_found": len(parties),
+            "elapsed_ms": elapsed_ms,
+        }
+
+    async def _analyze_single_photo(self, photo: dict) -> Optional[Dict[str, Any]]:
+        """Analyze a single photo and store results."""
+        photo_id = photo["id"]
+        filepath = photo["filepath"]
+
+        logger.info(f"Analyzing photo {photo_id}: {filepath}")
+
+        try:
+            image = Image.open(filepath).convert("RGB")
+        except Exception as e:
+            logger.error(f"Cannot open image {filepath}: {e}")
+            return None
+
+        try:
+            result = inference_engine.analyze_scene(image)
+            raw_analysis = result["raw_analysis"]
+
+            # Parse structured sections from the model response
+            parsed = self._parse_analysis(raw_analysis)
+
+            await db.add_scene_analysis(
+                photo_id=photo_id,
+                raw_analysis=raw_analysis,
+                vehicles_json=json.dumps(parsed.get("vehicles", [])),
+                road_conditions_json=json.dumps(parsed.get("road_conditions", {})),
+                evidence_json=json.dumps(parsed.get("evidence", {})),
+                environmental_json=json.dumps(parsed.get("environmental", {})),
+                positions_json=parsed.get("positions", ""),
+                model_id=result["model_id"],
+                inference_time_ms=result["inference_time_ms"],
+            )
+
+            logger.info(
+                f"Photo {photo_id} analyzed: {len(raw_analysis)} chars, "
+                f"{result['inference_time_ms']}ms, "
+                f"{len(parsed.get('vehicles', []))} vehicles detected"
+            )
+
+            return {
+                "photo_id": photo_id,
+                "raw_analysis": raw_analysis,
+                "parsed": parsed,
+            }
+
+        except Exception as e:
+            logger.error(f"Inference failed for photo {photo_id}: {e}")
+            return None
+
+    def _parse_analysis(self, raw_text: str) -> Dict[str, Any]:
+        """
+        Parse the structured model response into components based on static UI format.
+        """
+        result = {
+            "vehicles": [],
+            "road_conditions": {},
+            "evidence": {},
+            "environmental": {},
+            "positions": "",
+        }
+
+        sections = self._split_sections(raw_text)
+
+        # Parse vehicles section
+        if "vehicles" in sections:
+            result["vehicles"] = self._parse_vehicles(sections["vehicles"])
+
+        # Parse road conditions
+        if "road_conditions" in sections:
+            result["road_conditions"] = self._parse_key_values(sections["road_conditions"])
+
+        # Parse evidence
+        if "evidence" in sections:
+            result["evidence"] = self._parse_key_values(sections["evidence"])
+
+        # Parse environmental
+        if "environmental" in sections:
+            result["environmental"] = self._parse_key_values(sections["environmental"])
+
+        # Parse positions (keep as text)
+        if "positions" in sections:
+            result["positions"] = sections["positions"].strip()
+
+        return result
+
+    def _split_sections(self, text: str) -> Dict[str, str]:
+        """Split the model response into named sections based on brackets."""
+        sections = {}
+        section_patterns = [
+            ("vehicles", r"\[AI Observation\]\s*(.+?)(?=\[Condition Assessment\]|$)"),
+            ("road_conditions", r"\[Condition Assessment\]\s*(.+?)(?=\[Damage Analysis|\[Summary\]|$)"),
+            ("evidence", r"\[Damage Analysis.*?\]\s*(.+?)(?=\[Summary\]|$)"),
+            ("positions", r"\[Summary\]\s*(.+?)$"),
+        ]
+
+        for name, pattern in section_patterns:
+            match = re.search(pattern, text, re.IGNORECASE | re.DOTALL)
+            if match:
+                sections[name] = match.group(1).strip()
+
+        return sections
+
+    def _parse_vehicles(self, text: str) -> List[Dict[str, str]]:
+        """Parse vehicle descriptions from the AI Observation section."""
+        vehicles = []
+        
+        # Look for "Vehicle 1 Make/Model: Year Make Model (Color Type)"
+        pattern = r"Vehicle\s+(\d+)\s+Make/Model:\s*(.+?)\s*(?:\((.+?)\))?"
+        matches = re.finditer(pattern, text, re.IGNORECASE)
+        
+        for match in matches:
+            label = match.group(1)
+            make_model = match.group(2).strip()
+            color_type = match.group(3)
+            
+            color = ""
+            vtype = make_model
+            
+            if color_type:
+                # E.g. "Blue Sedan" -> color="Blue", type="Sedan"
+                parts = color_type.strip().split()
+                if len(parts) > 1:
+                    color = parts[0]
+                    vtype = " ".join(parts[1:])
+                else:
+                    vtype = parts[0]
+                    
+            vehicles.append({
+                "label": f"Vehicle {label}",
+                "description": make_model,
+                "color": color,
+                "type": vtype
+            })
+
+        return vehicles if vehicles else [{"description": text[:500]}]
+
+    def _parse_key_values(self, text: str) -> Dict[str, str]:
+        """Parse key-value pairs from a section (bullet points or lines)."""
+        result = {}
+        lines = text.strip().split("\n")
+
+        for line in lines:
+            line = line.strip().lstrip("-*•").strip()
+            if ":" in line:
+                key, _, value = line.partition(":")
+                key = key.strip().lower().replace(" ", "_")
+                value = value.strip().strip(".,")
+                if key and value:
+                    result[key] = value
+            elif line:
+                # Store as a numbered or generic entry
+                result[f"note_{len(result)}"] = line
+
+        return result
+
+    def _identify_parties(self, analyses: List[Dict[str, Any]]) -> List[Dict[str, str]]:
+        """
+        Identify distinct parties (Vehicle A, Vehicle B, etc.)
+        from all photo analyses.
+        """
+        parties = []
+        seen_types = set()
+        vehicle_counter = 0
+        labels = ["Vehicle A", "Vehicle B", "Vehicle C", "Vehicle D"]
+
+        for analysis in analyses:
+            parsed = analysis.get("parsed", {})
+            for vehicle in parsed.get("vehicles", []):
+                v_type = vehicle.get("type", "unknown").lower()
+                v_color = vehicle.get("color", "").lower()
+                v_key = f"{v_color}_{v_type}".strip("_")
+
+                # Simple dedup — don't add if we already have same color+type
+                if v_key and v_key in seen_types:
+                    continue
+
+                if v_key:
+                    seen_types.add(v_key)
+
+                if vehicle_counter < len(labels):
+                    label = labels[vehicle_counter]
+                else:
+                    label = f"Vehicle {vehicle_counter + 1}"
+
+                parties.append({
+                    "label": label,
+                    "vehicle_type": vehicle.get("type"),
+                    "vehicle_color": vehicle.get("color"),
+                    "description": vehicle.get("description", ""),
+                })
+                vehicle_counter += 1
+
+        # If no vehicles found at all, add two generic parties
+        if not parties:
+            parties = [
+                {"label": "Vehicle A", "vehicle_type": "unknown",
+                 "vehicle_color": None, "description": ""},
+                {"label": "Vehicle B", "vehicle_type": "unknown",
+                 "vehicle_color": None, "description": ""},
+            ]
+
+        return parties
+
+
+# Singleton
+scene_analyzer = SceneAnalyzer()

backend/app/db/database.py

@@ -0,0 +1,364 @@
+"""
+AI Accident Analysis — Database Layer
+
+SQLite database for accident cases, photos, scene analyses,
+traffic violations, parties, and fault analysis.
+Uses aiosqlite for async compatibility with FastAPI.
+"""
+
+import aiosqlite
+from pathlib import Path
+from typing import Optional, List, Dict, Any
+
+from backend.app.config import settings
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("database")
+
+SCHEMA = """
+CREATE TABLE IF NOT EXISTS cases (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    case_number TEXT UNIQUE NOT NULL,
+    officer_name TEXT,
+    location TEXT,
+    incident_date TEXT,
+    notes TEXT,
+    status TEXT DEFAULT 'pending',
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS photos (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    case_id INTEGER NOT NULL,
+    filename TEXT NOT NULL,
+    filepath TEXT NOT NULL,
+    file_size INTEGER,
+    width INTEGER,
+    height INTEGER,
+    photo_type TEXT DEFAULT 'general',
+    uploaded_at TEXT NOT NULL DEFAULT (datetime('now')),
+    FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE
+);
+
+CREATE TABLE IF NOT EXISTS scene_analyses (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    photo_id INTEGER NOT NULL UNIQUE,
+    raw_analysis TEXT NOT NULL,
+    vehicles_json TEXT,
+    road_conditions_json TEXT,
+    evidence_json TEXT,
+    environmental_json TEXT,
+    positions_json TEXT,
+    model_id TEXT,
+    inference_time_ms REAL,
+    analyzed_at TEXT NOT NULL DEFAULT (datetime('now')),
+    FOREIGN KEY (photo_id) REFERENCES photos(id) ON DELETE CASCADE
+);
+
+CREATE TABLE IF NOT EXISTS parties (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    case_id INTEGER NOT NULL,
+    label TEXT NOT NULL,
+    vehicle_type TEXT,
+    vehicle_color TEXT,
+    vehicle_description TEXT,
+    FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE
+);
+
+CREATE TABLE IF NOT EXISTS violations (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    case_id INTEGER NOT NULL,
+    party_id INTEGER,
+    rule_id TEXT NOT NULL,
+    rule_title TEXT NOT NULL,
+    rule_category TEXT,
+    severity TEXT,
+    confidence REAL NOT NULL,
+    evidence_summary TEXT,
+    photo_id INTEGER,
+    FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE,
+    FOREIGN KEY (party_id) REFERENCES parties(id),
+    FOREIGN KEY (photo_id) REFERENCES photos(id)
+);
+
+CREATE TABLE IF NOT EXISTS fault_analyses (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    case_id INTEGER NOT NULL UNIQUE,
+    primary_fault_party_id INTEGER,
+    fault_distribution_json TEXT,
+    probable_cause TEXT,
+    overall_confidence REAL,
+    analysis_summary TEXT,
+    generated_at TEXT NOT NULL DEFAULT (datetime('now')),
+    FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE,
+    FOREIGN KEY (primary_fault_party_id) REFERENCES parties(id)
+);
+
+CREATE INDEX IF NOT EXISTS idx_photos_case ON photos(case_id);
+CREATE INDEX IF NOT EXISTS idx_analyses_photo ON scene_analyses(photo_id);
+CREATE INDEX IF NOT EXISTS idx_violations_case ON violations(case_id);
+CREATE INDEX IF NOT EXISTS idx_violations_party ON violations(party_id);
+CREATE INDEX IF NOT EXISTS idx_parties_case ON parties(case_id);
+"""
+
+
+class Database:
+    """Async SQLite database wrapper."""
+
+    def __init__(self):
+        self.db_path = str(settings.db_path)
+        self._connection: Optional[aiosqlite.Connection] = None
+
+    async def connect(self):
+        """Initialize database connection and create schema."""
+        logger.info(f"Connecting to database: {self.db_path}")
+        Path(self.db_path).parent.mkdir(parents=True, exist_ok=True)
+
+        self._connection = await aiosqlite.connect(self.db_path)
+        self._connection.row_factory = aiosqlite.Row
+        await self._connection.execute("PRAGMA journal_mode=WAL")
+        await self._connection.execute("PRAGMA foreign_keys=ON")
+
+        for statement in SCHEMA.strip().split(";"):
+            stmt = statement.strip()
+            if stmt:
+                await self._connection.execute(stmt)
+        await self._connection.commit()
+        logger.info("Database schema initialized")
+
+    async def disconnect(self):
+        """Close database connection."""
+        if self._connection:
+            await self._connection.close()
+
+    @property
+    def conn(self) -> aiosqlite.Connection:
+        if not self._connection:
+            raise RuntimeError("Database not connected. Call connect() first.")
+        return self._connection
+
+    # ── Cases ──────────────────────────────────────────────────────────
+
+    async def create_case(self, case_number: str, officer_name: str = None,
+                          location: str = None, incident_date: str = None,
+                          notes: str = None) -> int:
+        cursor = await self.conn.execute(
+            """INSERT INTO cases (case_number, officer_name, location, incident_date, notes)
+               VALUES (?, ?, ?, ?, ?)""",
+            (case_number, officer_name, location, incident_date, notes),
+        )
+        await self.conn.commit()
+        return cursor.lastrowid
+
+    async def get_case(self, case_id: int) -> Optional[dict]:
+        cursor = await self.conn.execute("SELECT * FROM cases WHERE id = ?", (case_id,))
+        row = await cursor.fetchone()
+        return dict(row) if row else None
+
+    async def list_cases(self) -> List[dict]:
+        cursor = await self.conn.execute(
+            "SELECT * FROM cases ORDER BY created_at DESC"
+        )
+        rows = await cursor.fetchall()
+        return [dict(r) for r in rows]
+
+    async def update_case_status(self, case_id: int, status: str):
+        await self.conn.execute(
+            "UPDATE cases SET status = ? WHERE id = ?", (status, case_id)
+        )
+        await self.conn.commit()
+
+    async def delete_case(self, case_id: int):
+        await self.conn.execute("DELETE FROM cases WHERE id = ?", (case_id,))
+        await self.conn.commit()
+
+    async def update_case(self, case_id: int, officer_name: str = None,
+                          location: str = None, incident_date: str = None,
+                          notes: str = None) -> bool:
+        """Update case details."""
+        updates = []
+        params = []
+        if officer_name is not None:
+            updates.append("officer_name = ?")
+            params.append(officer_name)
+        if location is not None:
+            updates.append("location = ?")
+            params.append(location)
+        if incident_date is not None:
+            updates.append("incident_date = ?")
+            params.append(incident_date)
+        if notes is not None:
+            updates.append("notes = ?")
+            params.append(notes)
+
+        if not updates:
+            return False
+
+        params.append(case_id)
+        query = f"UPDATE cases SET {', '.join(updates)} WHERE id = ?"
+        await self.conn.execute(query, tuple(params))
+        await self.conn.commit()
+        return True
+
+    # ── Photos ─────────────────────────────────────────────────────────
+
+    async def add_photo(self, case_id: int, filename: str, filepath: str,
+                        file_size: int, width: int = None, height: int = None,
+                        photo_type: str = "general") -> int:
+        cursor = await self.conn.execute(
+            """INSERT INTO photos (case_id, filename, filepath, file_size, width, height, photo_type)
+               VALUES (?, ?, ?, ?, ?, ?, ?)""",
+            (case_id, filename, filepath, file_size, width, height, photo_type),
+        )
+        await self.conn.commit()
+        return cursor.lastrowid
+
+    async def get_photos_by_case(self, case_id: int) -> List[dict]:
+        cursor = await self.conn.execute(
+            "SELECT * FROM photos WHERE case_id = ? ORDER BY uploaded_at", (case_id,)
+        )
+        rows = await cursor.fetchall()
+        return [dict(r) for r in rows]
+
+    async def get_photo(self, photo_id: int) -> Optional[dict]:
+        cursor = await self.conn.execute("SELECT * FROM photos WHERE id = ?", (photo_id,))
+        row = await cursor.fetchone()
+        return dict(row) if row else None
+
+    async def get_unanalyzed_photos(self, case_id: int) -> List[dict]:
+        cursor = await self.conn.execute(
+            """SELECT p.* FROM photos p
+               LEFT JOIN scene_analyses sa ON p.id = sa.photo_id
+               WHERE p.case_id = ? AND sa.id IS NULL""",
+            (case_id,),
+        )
+        rows = await cursor.fetchall()
+        return [dict(r) for r in rows]
+
+    # ── Scene Analyses ─────────────────────────────────────────────────
+
+    async def add_scene_analysis(self, photo_id: int, raw_analysis: str,
+                                 vehicles_json: str = None,
+                                 road_conditions_json: str = None,
+                                 evidence_json: str = None,
+                                 environmental_json: str = None,
+                                 positions_json: str = None,
+                                 model_id: str = None,
+                                 inference_time_ms: float = None) -> int:
+        cursor = await self.conn.execute(
+            """INSERT INTO scene_analyses
+               (photo_id, raw_analysis, vehicles_json, road_conditions_json,
+                evidence_json, environmental_json, positions_json, model_id, inference_time_ms)
+               VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+            (photo_id, raw_analysis, vehicles_json, road_conditions_json,
+             evidence_json, environmental_json, positions_json, model_id, inference_time_ms),
+        )
+        await self.conn.commit()
+        return cursor.lastrowid
+
+    async def get_analyses_by_case(self, case_id: int) -> List[dict]:
+        cursor = await self.conn.execute(
+            """SELECT sa.*, p.filename, p.filepath, p.photo_type
+               FROM scene_analyses sa
+               JOIN photos p ON sa.photo_id = p.id
+               WHERE p.case_id = ?""",
+            (case_id,),
+        )
+        rows = await cursor.fetchall()
+        return [dict(r) for r in rows]
+
+    # ── Parties ────────────────────────────────────────────────────────
+
+    async def add_party(self, case_id: int, label: str,
+                        vehicle_type: str = None, vehicle_color: str = None,
+                        vehicle_description: str = None) -> int:
+        cursor = await self.conn.execute(
+            """INSERT INTO parties (case_id, label, vehicle_type, vehicle_color, vehicle_description)
+               VALUES (?, ?, ?, ?, ?)""",
+            (case_id, label, vehicle_type, vehicle_color, vehicle_description),
+        )
+        await self.conn.commit()
+        return cursor.lastrowid
+
+    async def get_parties_by_case(self, case_id: int) -> List[dict]:
+        cursor = await self.conn.execute(
+            "SELECT * FROM parties WHERE case_id = ?", (case_id,)
+        )
+        rows = await cursor.fetchall()
+        return [dict(r) for r in rows]
+
+    async def clear_parties(self, case_id: int):
+        await self.conn.execute("DELETE FROM parties WHERE case_id = ?", (case_id,))
+        await self.conn.commit()
+
+    # ── Violations ─────────────────────────────────────────────────────
+
+    async def add_violation(self, case_id: int, rule_id: str, rule_title: str,
+                            confidence: float, party_id: int = None,
+                            rule_category: str = None, severity: str = None,
+                            evidence_summary: str = None,
+                            photo_id: int = None) -> int:
+        cursor = await self.conn.execute(
+            """INSERT INTO violations
+               (case_id, party_id, rule_id, rule_title, rule_category, severity,
+                confidence, evidence_summary, photo_id)
+               VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+            (case_id, party_id, rule_id, rule_title, rule_category, severity,
+             confidence, evidence_summary, photo_id),
+        )
+        await self.conn.commit()
+        return cursor.lastrowid
+
+    async def get_violations_by_case(self, case_id: int) -> List[dict]:
+        cursor = await self.conn.execute(
+            """SELECT v.*, p.label as party_label
+               FROM violations v
+               LEFT JOIN parties p ON v.party_id = p.id
+               WHERE v.case_id = ?
+               ORDER BY v.confidence DESC""",
+            (case_id,),
+        )
+        rows = await cursor.fetchall()
+        return [dict(r) for r in rows]
+
+    async def clear_violations(self, case_id: int):
+        await self.conn.execute("DELETE FROM violations WHERE case_id = ?", (case_id,))
+        await self.conn.commit()
+
+    # ── Fault Analysis ─────────────────────────────────────────────────
+
+    async def save_fault_analysis(self, case_id: int,
+                                  primary_fault_party_id: int = None,
+                                  fault_distribution_json: str = None,
+                                  probable_cause: str = None,
+                                  overall_confidence: float = None,
+                                  analysis_summary: str = None) -> int:
+        # Upsert — replace if already exists
+        await self.conn.execute(
+            "DELETE FROM fault_analyses WHERE case_id = ?", (case_id,)
+        )
+        cursor = await self.conn.execute(
+            """INSERT INTO fault_analyses
+               (case_id, primary_fault_party_id, fault_distribution_json,
+                probable_cause, overall_confidence, analysis_summary)
+               VALUES (?, ?, ?, ?, ?, ?)""",
+            (case_id, primary_fault_party_id, fault_distribution_json,
+             probable_cause, overall_confidence, analysis_summary),
+        )
+        await self.conn.commit()
+        return cursor.lastrowid
+
+    async def get_fault_analysis(self, case_id: int) -> Optional[dict]:
+        cursor = await self.conn.execute(
+            """SELECT fa.*, p.label as fault_party_label
+               FROM fault_analyses fa
+               LEFT JOIN parties p ON fa.primary_fault_party_id = p.id
+               WHERE fa.case_id = ?""",
+            (case_id,),
+        )
+        row = await cursor.fetchone()
+        return dict(row) if row else None
+
+
+# Singleton database instance
+db = Database()

backend/app/models/schemas.py

@@ -0,0 +1,156 @@
+"""
+AI Accident Analysis — Pydantic Request/Response Models
+
+Defines the API contract between frontend and backend.
+"""
+
+from pydantic import BaseModel, Field
+from typing import Optional, List, Dict
+from datetime import datetime
+
+
+# ── Request Models ─────────────────────────────────────────────────────
+
+class CreateCaseRequest(BaseModel):
+    case_number: str = Field(..., description="Unique case/incident number")
+    officer_name: Optional[str] = Field(None, description="Officer filing the report")
+    location: Optional[str] = Field(None, description="Accident location")
+    incident_date: Optional[str] = Field(None, description="Date of incident (YYYY-MM-DD)")
+    notes: Optional[str] = Field(None, description="Initial officer notes")
+
+
+class UpdateCaseRequest(BaseModel):
+    officer_name: Optional[str] = Field(None, description="Officer filing the report")
+    location: Optional[str] = Field(None, description="Accident location")
+    incident_date: Optional[str] = Field(None, description="Date of incident (YYYY-MM-DD)")
+    notes: Optional[str] = Field(None, description="Initial officer notes")
+
+
+# ── Response Models ────────────────────────────────────────────────────
+
+class CaseResponse(BaseModel):
+    id: int
+    case_number: str
+    officer_name: Optional[str]
+    location: Optional[str]
+    incident_date: Optional[str]
+    notes: Optional[str]
+    status: str
+    created_at: str
+    photo_count: Optional[int] = 0
+
+
+class PhotoResponse(BaseModel):
+    id: int
+    case_id: int
+    filename: str
+    filepath: str
+    file_size: Optional[int]
+    width: Optional[int]
+    height: Optional[int]
+    photo_type: str
+    uploaded_at: str
+
+
+class VehicleInfo(BaseModel):
+    vehicle_type: Optional[str] = None
+    color: Optional[str] = None
+    model: Optional[str] = None
+    position: Optional[str] = None
+    direction: Optional[str] = None
+    damage: Optional[str] = None
+    damage_severity: Optional[str] = None
+
+
+class RoadConditions(BaseModel):
+    road_type: Optional[str] = None
+    surface_condition: Optional[str] = None
+    lane_markings: Optional[str] = None
+    speed_limit: Optional[str] = None
+    traffic_signals: Optional[str] = None
+
+
+class EvidenceInfo(BaseModel):
+    skid_marks: Optional[str] = None
+    debris: Optional[str] = None
+    fluid_spills: Optional[str] = None
+    glass_pattern: Optional[str] = None
+    airbag_deployed: Optional[bool] = None
+
+
+class EnvironmentalInfo(BaseModel):
+    time_of_day: Optional[str] = None
+    weather: Optional[str] = None
+    visibility: Optional[str] = None
+
+
+class SceneAnalysisResponse(BaseModel):
+    photo_id: int
+    filename: str
+    raw_analysis: str
+    vehicles: Optional[List[VehicleInfo]] = []
+    road_conditions: Optional[RoadConditions] = None
+    evidence: Optional[EvidenceInfo] = None
+    environmental: Optional[EnvironmentalInfo] = None
+    positions: Optional[str] = None
+    inference_time_ms: Optional[float] = None
+
+
+class PartyResponse(BaseModel):
+    id: int
+    label: str
+    vehicle_type: Optional[str]
+    vehicle_color: Optional[str]
+    vehicle_description: Optional[str]
+
+
+class ViolationResponse(BaseModel):
+    id: int
+    rule_id: str
+    rule_title: str
+    rule_category: Optional[str]
+    severity: Optional[str]
+    confidence: float
+    evidence_summary: Optional[str]
+    party_label: Optional[str]
+    photo_id: Optional[int]
+
+
+class FaultAnalysisResponse(BaseModel):
+    primary_fault_party: Optional[str]
+    fault_distribution: Optional[Dict[str, float]]
+    probable_cause: Optional[str]
+    overall_confidence: Optional[float]
+    analysis_summary: Optional[str]
+
+
+class FullReportResponse(BaseModel):
+    case: CaseResponse
+    photos: List[PhotoResponse]
+    analyses: List[SceneAnalysisResponse]
+    parties: List[PartyResponse]
+    violations: List[ViolationResponse]
+    fault_analysis: Optional[FaultAnalysisResponse]
+    disclaimer: str = (
+        "ADVISORY NOTICE: This analysis was generated by an AI system and is intended "
+        "as an assistive tool only. All findings are preliminary and must be reviewed "
+        "and validated by qualified law enforcement personnel before use in any "
+        "official proceedings. This report does not constitute a legal determination."
+    )
+
+
+class AnalysisStatusResponse(BaseModel):
+    case_id: int
+    status: str
+    total_photos: int
+    analyzed_photos: int
+    violations_found: int
+    progress_percent: float
+
+
+class HealthResponse(BaseModel):
+    status: str
+    model_loaded: bool
+    model_id: Optional[str]
+    device: Optional[str]
+    rules_loaded: int

backend/app/rules/rule_loader.py

@@ -0,0 +1,148 @@
+"""
+AI Accident Analysis — Traffic Rules Loader
+
+Loads and indexes traffic rules from YAML for fast lookup.
+Rules are loaded once at startup and cached in memory.
+"""
+
+import yaml
+from pathlib import Path
+from typing import List, Optional, Dict, Any
+from dataclasses import dataclass, field
+
+from backend.app.config import settings
+from backend.app.utils.logger import get_logger
+
+logger = get_logger("rule_loader")
+
+
+@dataclass
+class TrafficRule:
+    """A single traffic rule with visual indicators."""
+    id: str
+    title: str
+    description: str
+    severity: str  # CRITICAL, HIGH, MEDIUM, LOW
+    visual_indicators: List[str]
+    fault_weight: float
+    applicable_parties: List[str]
+    category_id: str
+    category_name: str
+
+
+@dataclass
+class RuleMatch:
+    """A matched rule with confidence score."""
+    rule: TrafficRule
+    confidence: float
+    matched_indicators: List[str]
+    evidence_text: str = ""
+
+
+class RuleLoader:
+    """Load and index traffic rules from YAML for fast lookup."""
+
+    _instance = None
+    _rules: List[TrafficRule] = []
+    _rules_by_id: Dict[str, TrafficRule] = {}
+    _categories: List[Dict[str, Any]] = []
+    _all_indicators: List[str] = []
+
+    def __new__(cls):
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+        return cls._instance
+
+    @property
+    def is_loaded(self) -> bool:
+        return len(self._rules) > 0
+
+    def load_rules(self, rules_path: Path = None):
+        """Load all rules from YAML files in the rules directory."""
+        if rules_path is None:
+            rules_path = settings.rules_path
+
+        yaml_file = rules_path / "traffic_rules.yaml"
+        if not yaml_file.exists():
+            logger.error(f"Rules file not found: {yaml_file}")
+            return
+
+        logger.info(f"Loading traffic rules from: {yaml_file}")
+
+        with open(yaml_file, "r") as f:
+            data = yaml.safe_load(f)
+
+        self._rules = []
+        self._rules_by_id = {}
+        self._categories = []
+        self._all_indicators = []
+
+        for category in data.get("categories", []):
+            cat_id = category["id"]
+            cat_name = category["name"]
+            self._categories.append({"id": cat_id, "name": cat_name})
+
+            for rule_data in category.get("rules", []):
+                rule = TrafficRule(
+                    id=rule_data["id"],
+                    title=rule_data["title"],
+                    description=rule_data["description"],
+                    severity=rule_data.get("severity", "MEDIUM"),
+                    visual_indicators=rule_data.get("visual_indicators", []),
+                    fault_weight=rule_data.get("fault_weight", 0.5),
+                    applicable_parties=rule_data.get("applicable_parties", []),
+                    category_id=cat_id,
+                    category_name=cat_name,
+                )
+                self._rules.append(rule)
+                self._rules_by_id[rule.id] = rule
+                self._all_indicators.extend(rule.visual_indicators)
+
+        logger.info(
+            f"Loaded {len(self._rules)} rules across "
+            f"{len(self._categories)} categories with "
+            f"{len(self._all_indicators)} visual indicators"
+        )
+
+    def get_all_rules(self) -> List[TrafficRule]:
+        """Return all loaded rules."""
+        return self._rules
+
+    def get_rule_by_id(self, rule_id: str) -> Optional[TrafficRule]:
+        """Look up a rule by its ID."""
+        return self._rules_by_id.get(rule_id)
+
+    def get_rules_by_category(self, category_id: str) -> List[TrafficRule]:
+        """Get all rules in a category."""
+        return [r for r in self._rules if r.category_id == category_id]
+
+    def get_categories(self) -> List[Dict[str, Any]]:
+        """Get list of all categories."""
+        return self._categories
+
+    def get_all_visual_indicators(self) -> List[str]:
+        """Get all visual indicators for prompt construction."""
+        return self._all_indicators
+
+    def get_rules_summary(self) -> Dict[str, Any]:
+        """Get a summary of loaded rules for the API."""
+        summary = {
+            "total_rules": len(self._rules),
+            "categories": []
+        }
+        for cat in self._categories:
+            cat_rules = self.get_rules_by_category(cat["id"])
+            summary["categories"].append({
+                "id": cat["id"],
+                "name": cat["name"],
+                "rule_count": len(cat_rules),
+                "rules": [
+                    {"id": r.id, "title": r.title, "severity": r.severity}
+                    for r in cat_rules
+                ]
+            })
+        return summary
+
+
+# Singleton instance
+rule_loader = RuleLoader()

backend/app/rules/traffic_rules.yaml

@@ -0,0 +1,550 @@
+# ============================================================================
+# AI Accident Analysis — Traffic Rules Knowledge Base
+# ============================================================================
+# This YAML file contains pre-computed traffic rules that the AI matches
+# against visual observations from accident scene photos.
+#
+# Each rule has:
+#   - visual_indicators: what the AI should look for in photos
+#   - fault_weight: how strongly this violation indicates fault (0.0-1.0)
+#   - severity: CRITICAL, HIGH, MEDIUM, LOW
+#   - applicable_parties: who can commit this violation
+# ============================================================================
+
+categories:
+
+  # ── Signal Violations ──────────────────────────────────────────────
+  - id: "SIGNAL"
+    name: "Traffic Signal Violations"
+    rules:
+      - id: "SIGNAL-001"
+        title: "Red Light Violation"
+        description: "Proceeding through a red traffic signal without stopping"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "vehicle past stop line at intersection"
+          - "traffic signal showing red"
+          - "vehicle in middle of intersection"
+          - "collision at signalized intersection"
+        fault_weight: 0.95
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SIGNAL-002"
+        title: "Failure to Stop at Yellow Signal"
+        description: "Entering intersection on yellow when safe stop was possible"
+        severity: "HIGH"
+        visual_indicators:
+          - "vehicle in intersection"
+          - "traffic signal showing yellow"
+          - "skid marks before intersection"
+          - "late braking evidence"
+        fault_weight: 0.70
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SIGNAL-003"
+        title: "Failure to Obey Stop Sign"
+        description: "Failing to come to a complete stop at a stop sign"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "stop sign visible"
+          - "vehicle past stop line"
+          - "no evidence of stopping"
+          - "collision near stop sign"
+        fault_weight: 0.90
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SIGNAL-004"
+        title: "Failure to Obey Yield Sign"
+        description: "Failing to yield right of way at a yield sign"
+        severity: "HIGH"
+        visual_indicators:
+          - "yield sign visible"
+          - "vehicle entering without yielding"
+          - "merging collision"
+        fault_weight: 0.80
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SIGNAL-005"
+        title: "Disobeying Traffic Control Device"
+        description: "Ignoring any official traffic control sign or signal"
+        severity: "HIGH"
+        visual_indicators:
+          - "no entry sign visible"
+          - "one way sign"
+          - "vehicle going wrong direction"
+          - "do not enter sign"
+        fault_weight: 0.85
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SIGNAL-006"
+        title: "Ignoring Railroad Crossing Signal"
+        description: "Proceeding through an active railroad crossing signal"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "railroad crossing"
+          - "crossing gates"
+          - "flashing lights at crossing"
+        fault_weight: 0.95
+        applicable_parties: ["moving_vehicle"]
+
+  # ── Lane Discipline ────────────────────────────────────────────────
+  - id: "LANE"
+    name: "Lane Discipline Violations"
+    rules:
+      - id: "LANE-001"
+        title: "Wrong-Way Driving"
+        description: "Driving against the direction of traffic on a one-way road or divided highway"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "vehicle facing opposite direction"
+          - "head-on collision"
+          - "vehicle on wrong side of divided highway"
+          - "one way sign with vehicle going wrong direction"
+        fault_weight: 0.98
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-002"
+        title: "Unsafe Lane Change"
+        description: "Changing lanes without signaling or when unsafe to do so"
+        severity: "HIGH"
+        visual_indicators:
+          - "sideswipe damage"
+          - "contact marks on sides of vehicles"
+          - "vehicles in adjacent lanes"
+          - "paint transfer on vehicle sides"
+        fault_weight: 0.75
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-003"
+        title: "Crossing Double Yellow Line"
+        description: "Crossing a double yellow center line to pass or turn"
+        severity: "HIGH"
+        visual_indicators:
+          - "double yellow line visible"
+          - "vehicle across center line"
+          - "head-on or angular collision"
+          - "vehicle in opposing lane"
+        fault_weight: 0.85
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-004"
+        title: "Failure to Maintain Lane"
+        description: "Drifting out of designated travel lane"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "vehicle partly in multiple lanes"
+          - "tire marks crossing lane lines"
+          - "sideswipe on lane boundary"
+          - "erratic tire tracks"
+        fault_weight: 0.65
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-005"
+        title: "Improper Passing"
+        description: "Passing another vehicle illegally or unsafely"
+        severity: "HIGH"
+        visual_indicators:
+          - "passing zone violation"
+          - "solid line crossing"
+          - "head-on collision in passing zone"
+          - "vehicle in oncoming lane"
+        fault_weight: 0.80
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-006"
+        title: "Driving on Shoulder"
+        description: "Operating a vehicle on the road shoulder"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "vehicle on shoulder"
+          - "tire marks on shoulder"
+          - "collision on road shoulder"
+          - "gravel spray from shoulder"
+        fault_weight: 0.60
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-007"
+        title: "Improper U-Turn"
+        description: "Making a U-turn where prohibited or unsafe"
+        severity: "HIGH"
+        visual_indicators:
+          - "vehicle turned perpendicular to traffic"
+          - "no u-turn sign"
+          - "vehicle blocking lanes during turn"
+        fault_weight: 0.80
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "LANE-008"
+        title: "Failure to Use Turn Signal"
+        description: "Turning or changing lanes without activating turn signal"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "no turn signal visible during maneuver"
+          - "sudden lane change"
+          - "unexpected turn collision"
+        fault_weight: 0.55
+        applicable_parties: ["moving_vehicle"]
+
+  # ── Speed Related ──────────────────────────────────────────────────
+  - id: "SPEED"
+    name: "Speed Related Violations"
+    rules:
+      - id: "SPEED-001"
+        title: "Excessive Speed"
+        description: "Traveling at a speed greater than posted limit or unsafe for conditions"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "long skid marks"
+          - "severe impact damage"
+          - "extensive debris field"
+          - "vehicle displacement after impact"
+          - "deployed airbags"
+          - "significant vehicle deformation"
+        fault_weight: 0.85
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SPEED-002"
+        title: "Too Fast for Conditions"
+        description: "Driving too fast for weather, road, or traffic conditions"
+        severity: "HIGH"
+        visual_indicators:
+          - "wet road surface"
+          - "skid marks on wet road"
+          - "reduced visibility conditions"
+          - "loss of control evidence"
+          - "single vehicle off-road"
+        fault_weight: 0.75
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SPEED-003"
+        title: "Speed Too Slow"
+        description: "Driving unreasonably slow and impeding traffic"
+        severity: "LOW"
+        visual_indicators:
+          - "rear-end collision"
+          - "slow vehicle on highway"
+          - "hazard lights on moving vehicle"
+        fault_weight: 0.40
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SPEED-004"
+        title: "Racing or Speed Contest"
+        description: "Engaging in speed competition on public roads"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "multiple vehicles with severe damage"
+          - "very long skid marks"
+          - "extreme vehicle deformation"
+          - "vehicle rollover"
+        fault_weight: 0.90
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "SPEED-005"
+        title: "Failure to Reduce Speed in School Zone"
+        description: "Not reducing speed in a designated school zone"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "school zone sign"
+          - "school crossing"
+          - "pedestrian collision near school"
+          - "school zone flashing lights"
+        fault_weight: 0.90
+        applicable_parties: ["moving_vehicle"]
+
+  # ── Right of Way ───────────────────────────────────────────────────
+  - id: "YIELD"
+    name: "Right of Way Violations"
+    rules:
+      - id: "YIELD-001"
+        title: "Failure to Yield at Intersection"
+        description: "Not yielding right of way to cross traffic at an intersection"
+        severity: "HIGH"
+        visual_indicators:
+          - "T-bone collision at intersection"
+          - "side impact at intersection"
+          - "vehicle entering intersection from side street"
+          - "angular collision"
+        fault_weight: 0.85
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "YIELD-002"
+        title: "Failure to Yield When Turning Left"
+        description: "Not yielding to oncoming traffic when making a left turn"
+        severity: "HIGH"
+        visual_indicators:
+          - "left-turning vehicle struck"
+          - "front-corner impact on turning vehicle"
+          - "collision in intersection during left turn"
+        fault_weight: 0.85
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "YIELD-003"
+        title: "Failure to Yield to Pedestrian"
+        description: "Not yielding right of way to pedestrian in crosswalk"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "pedestrian in crosswalk"
+          - "pedestrian struck"
+          - "crosswalk markings visible"
+          - "pedestrian crossing sign"
+        fault_weight: 0.95
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "YIELD-004"
+        title: "Failure to Yield When Merging"
+        description: "Not yielding when entering a highway or merging into traffic"
+        severity: "HIGH"
+        visual_indicators:
+          - "merge lane collision"
+          - "on-ramp collision"
+          - "merging vehicle sideswipe"
+          - "acceleration lane impact"
+        fault_weight: 0.80
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "YIELD-005"
+        title: "Failure to Yield to Emergency Vehicle"
+        description: "Not pulling over for an emergency vehicle with lights/sirens"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "emergency vehicle involved"
+          - "police car, ambulance, or fire truck"
+          - "emergency lights visible"
+        fault_weight: 0.90
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "YIELD-006"
+        title: "Failure to Yield at Roundabout"
+        description: "Not yielding to traffic already in a roundabout"
+        severity: "HIGH"
+        visual_indicators:
+          - "roundabout collision"
+          - "circular intersection"
+          - "vehicle entering roundabout"
+          - "yield sign at roundabout"
+        fault_weight: 0.80
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "YIELD-007"
+        title: "Right of Way at Uncontrolled Intersection"
+        description: "Failure to yield to vehicle on the right at an uncontrolled intersection"
+        severity: "HIGH"
+        visual_indicators:
+          - "intersection without signals or signs"
+          - "side impact collision"
+          - "residential intersection collision"
+        fault_weight: 0.70
+        applicable_parties: ["moving_vehicle"]
+
+  # ── Following Distance ─────────────────────────────────────────────
+  - id: "FOLLOW"
+    name: "Following Distance Violations"
+    rules:
+      - id: "FOLLOW-001"
+        title: "Following Too Closely (Tailgating)"
+        description: "Not maintaining a safe following distance behind another vehicle"
+        severity: "HIGH"
+        visual_indicators:
+          - "rear-end collision"
+          - "front damage on following vehicle"
+          - "rear damage on lead vehicle"
+          - "chain reaction collision"
+          - "short skid marks before impact"
+        fault_weight: 0.90
+        applicable_parties: ["following_vehicle"]
+
+      - id: "FOLLOW-002"
+        title: "Sudden Stop Causing Rear Collision"
+        description: "Stopping abruptly without justification causing following vehicle to collide"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "rear-end collision"
+          - "no apparent hazard ahead"
+          - "brake lights"
+        fault_weight: 0.40
+        applicable_parties: ["lead_vehicle"]
+
+  # ── Vehicle Condition ──────────────────────────────────────────────
+  - id: "MAINT"
+    name: "Vehicle Maintenance Violations"
+    rules:
+      - id: "MAINT-001"
+        title: "Defective Brakes"
+        description: "Operating vehicle with defective or inadequate braking system"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "very long skid marks"
+          - "no skid marks despite high-speed impact"
+          - "brake fluid on road"
+          - "brake component debris"
+        fault_weight: 0.70
+        applicable_parties: ["vehicle_owner"]
+
+      - id: "MAINT-002"
+        title: "Defective Tires"
+        description: "Operating vehicle with bald, damaged, or improper tires"
+        severity: "HIGH"
+        visual_indicators:
+          - "tire blowout debris"
+          - "bald tires visible"
+          - "irregular tire marks"
+          - "tire tread separation"
+        fault_weight: 0.65
+        applicable_parties: ["vehicle_owner"]
+
+      - id: "MAINT-003"
+        title: "Defective Lights"
+        description: "Operating vehicle with non-functional headlights, taillights, or signals"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "broken headlight pre-collision"
+          - "no tail lights"
+          - "nighttime collision with unlit vehicle"
+        fault_weight: 0.55
+        applicable_parties: ["vehicle_owner"]
+
+      - id: "MAINT-004"
+        title: "Obstructed View"
+        description: "Driving with obstructed windshield or mirrors"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "cracked windshield"
+          - "obstructed view"
+          - "missing mirrors"
+          - "tinted windows too dark"
+        fault_weight: 0.50
+        applicable_parties: ["vehicle_owner"]
+
+      - id: "MAINT-005"
+        title: "Unsecured Load"
+        description: "Carrying unsecured cargo that falls onto roadway"
+        severity: "HIGH"
+        visual_indicators:
+          - "cargo on road"
+          - "items fallen from vehicle"
+          - "truck load spill"
+          - "debris from cargo"
+        fault_weight: 0.75
+        applicable_parties: ["vehicle_owner"]
+
+      - id: "MAINT-006"
+        title: "Vehicle Overloaded"
+        description: "Vehicle loaded beyond safe operating capacity"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "visibly overloaded vehicle"
+          - "sagging suspension"
+          - "items stacked above roof"
+        fault_weight: 0.55
+        applicable_parties: ["vehicle_owner"]
+
+  # ── Pedestrian Related ─────────────────────────────────────────────
+  - id: "PEDES"
+    name: "Pedestrian Related Violations"
+    rules:
+      - id: "PEDES-001"
+        title: "Pedestrian Jaywalking"
+        description: "Pedestrian crossing road outside of designated crosswalk"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "pedestrian outside crosswalk"
+          - "pedestrian crossing mid-block"
+          - "no crosswalk markings at impact location"
+        fault_weight: 0.50
+        applicable_parties: ["pedestrian"]
+
+      - id: "PEDES-002"
+        title: "Pedestrian Against Signal"
+        description: "Pedestrian crossing against a don't walk signal"
+        severity: "HIGH"
+        visual_indicators:
+          - "pedestrian signal showing do not walk"
+          - "pedestrian in crosswalk against signal"
+        fault_weight: 0.70
+        applicable_parties: ["pedestrian"]
+
+      - id: "PEDES-003"
+        title: "Driver Failure to Stop for Pedestrian in Crosswalk"
+        description: "Driver not stopping for pedestrian in a marked or unmarked crosswalk"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "pedestrian struck in crosswalk"
+          - "crosswalk markings visible"
+          - "pedestrian crossing sign"
+        fault_weight: 0.95
+        applicable_parties: ["moving_vehicle"]
+
+      - id: "PEDES-004"
+        title: "Pedestrian on Highway"
+        description: "Pedestrian walking on a limited-access highway"
+        severity: "HIGH"
+        visual_indicators:
+          - "pedestrian on highway"
+          - "limited access road"
+          - "no pedestrian facilities"
+        fault_weight: 0.60
+        applicable_parties: ["pedestrian"]
+
+      - id: "PEDES-005"
+        title: "Failure to Stop for School Bus"
+        description: "Passing a stopped school bus with flashing lights"
+        severity: "CRITICAL"
+        visual_indicators:
+          - "school bus with stop sign extended"
+          - "school bus with flashing lights"
+          - "children near school bus"
+        fault_weight: 0.95
+        applicable_parties: ["moving_vehicle"]
+
+  # ── Road Condition Related ─────────────────────────────────────────
+  - id: "ROAD"
+    name: "Road Condition Violations"
+    rules:
+      - id: "ROAD-001"
+        title: "Hazardous Road Condition"
+        description: "Road surface or design defect contributing to accident"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "pothole visible"
+          - "road surface damage"
+          - "missing road markings"
+          - "inadequate signage"
+          - "construction zone without proper markings"
+        fault_weight: 0.30
+        applicable_parties: ["road_authority"]
+
+      - id: "ROAD-002"
+        title: "Inadequate Lighting"
+        description: "Road segment without adequate lighting contributing to collision"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "dark road"
+          - "no street lights"
+          - "nighttime collision in unlit area"
+        fault_weight: 0.25
+        applicable_parties: ["road_authority"]
+
+      - id: "ROAD-003"
+        title: "Missing or Damaged Guard Rail"
+        description: "Absent or damaged barrier that could have prevented injury"
+        severity: "MEDIUM"
+        visual_indicators:
+          - "vehicle off road"
+          - "no guard rail on curve"
+          - "damaged guard rail"
+          - "vehicle in ditch or embankment"
+        fault_weight: 0.20
+        applicable_parties: ["road_authority"]
+
+      - id: "ROAD-004"
+        title: "Work Zone / Construction Hazard"
+        description: "Improperly marked or protected construction zone"
+        severity: "HIGH"
+        visual_indicators:
+          - "construction zone"
+          - "work zone signs"
+          - "cones, barrels, barriers"
+          - "lane closure"
+          - "construction equipment on road"
+        fault_weight: 0.35
+        applicable_parties: ["road_authority", "moving_vehicle"]

backend/app/utils/logger.py

@@ -0,0 +1,63 @@
+"""
+AI Accident Analysis — Logging Utility
+
+Provides a consistent logger with file and console output.
+Reuses the same pattern as PhotoSearchApp.
+"""
+
+import logging
+import functools
+import time
+from pathlib import Path
+
+from backend.app.config import settings
+
+
+def get_logger(name: str) -> logging.Logger:
+    """Get a logger with both console and file handlers."""
+    logger = logging.getLogger(f"accident_analysis.{name}")
+
+    if logger.handlers:
+        return logger
+
+    logger.setLevel(getattr(logging, settings.log_level.upper(), logging.INFO))
+
+    # Console handler
+    console = logging.StreamHandler()
+    console.setLevel(logging.DEBUG)
+    fmt = logging.Formatter(
+        "%(asctime)s | %(name)-30s | %(levelname)-7s | %(message)s",
+        datefmt="%H:%M:%S",
+    )
+    console.setFormatter(fmt)
+    logger.addHandler(console)
+
+    # File handler
+    try:
+        log_file = settings.log_path / "server.log"
+        from logging.handlers import RotatingFileHandler
+        file_handler = RotatingFileHandler(
+            log_file,
+            maxBytes=settings.log_file_max_bytes,
+            backupCount=settings.log_file_backup_count,
+        )
+        file_handler.setLevel(logging.DEBUG)
+        file_handler.setFormatter(fmt)
+        logger.addHandler(file_handler)
+    except Exception:
+        pass  # Don't crash if log file can't be created
+
+    return logger
+
+
+def timed(func):
+    """Decorator to log execution time of a function."""
+    @functools.wraps(func)
+    def wrapper(*args, **kwargs):
+        start = time.perf_counter()
+        result = func(*args, **kwargs)
+        elapsed = round((time.perf_counter() - start) * 1000, 2)
+        logger = get_logger("timing")
+        logger.info(f"{func.__name__} completed in {elapsed}ms")
+        return result
+    return wrapper

frontend/css/styles.css

@@ -0,0 +1,1725 @@
+/* ==========================================================================
+   AI Accident Analysis — Stylesheet
+   Dark theme with police/forensic aesthetic, glassmorphism
+   ========================================================================== */
+
+/* ── CSS Variables ──────────────────────────────────────────────────── */
+:root {
+    /* Primary palette — clean white with dark blue accents */
+    --bg-primary: #f8fafc;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f1f5f9;
+
+    /* Dark Blue Panels */
+    --surface: rgba(255, 255, 255, 0.85);
+    /* deeply saturated dark blue */
+    --surface-hover: rgba(240, 244, 248, 0.9);
+    --glass: rgba(255, 255, 255, 0.75);
+    /* translucent dark blue */
+    --glass-border: rgba(30, 58, 138, 0.15);
+
+    /* Text on light backgrounds (Global) */
+    --text-primary: #0f172a;
+    --text-secondary: #334155;
+    --text-muted: #64748b;
+
+    /* Accent */
+    --accent: #1e3a8a;
+    /* deep dark blue */
+    --accent-hover: #172554;
+    --accent-glow: rgba(30, 58, 138, 0.15);
+
+    /* Severity colors */
+    --critical: #ef4444;
+    --critical-bg: rgba(239, 68, 68, 0.12);
+    --high: #f97316;
+    --high-bg: rgba(249, 115, 22, 0.12);
+    --medium: #eab308;
+    --medium-bg: rgba(234, 179, 8, 0.12);
+    --low: #22c55e;
+    --low-bg: rgba(34, 197, 94, 0.12);
+
+    /* Status */
+    --pending: #8b97b0;
+    --analyzing: #3b82f6;
+    --complete: #22c55e;
+    --error: #ef4444;
+
+    /* Layout */
+    --sidebar-width: 240px;
+    --radius: 12px;
+    --radius-sm: 8px;
+    --radius-xs: 6px;
+
+    /* Fonts */
+    --font-heading: 'Outfit', sans-serif;
+    --font-body: 'Inter', sans-serif;
+
+    /* Transitions */
+    --transition: 0.2s ease;
+    --transition-slow: 0.4s ease;
+}
+
+/* ── Reset & Base ──────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    height: 100%;
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background: var(--bg-primary);
+    -webkit-font-smoothing: antialiased;
+    overflow: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: var(--font-heading);
+    font-weight: 600;
+}
+
+input,
+select,
+textarea,
+button {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+}
+
+/* ── App Layout ────────────────────────────────────────────────────── */
+.app-container {
+    display: flex;
+    height: 100vh;
+    background:
+        radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
+        radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
+        var(--bg-primary);
+}
+
+/* ── Sidebar ───────────────────────────────────────────────────────── */
+.sidebar {
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem 1rem;
+    border-right: 1px solid var(--glass-border);
+    background: var(--glass);
+    backdrop-filter: blur(20px);
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    padding: 0 0.5rem;
+    margin-bottom: 2rem;
+}
+
+.brand i {
+    font-size: 1.5rem;
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent-glow);
+}
+
+.brand h1 {
+    font-size: 1.2rem;
+    letter-spacing: -0.5px;
+    background: linear-gradient(135deg, var(--text-primary), var(--accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.nav-menu {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    padding: 0.65rem 0.8rem;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: var(--transition);
+    text-align: left;
+    font-size: 0.88rem;
+}
+
+.nav-item:hover {
+    background: var(--surface-hover);
+    color: var(--text-primary);
+}
+
+.nav-item.active {
+    background: var(--accent-glow);
+    color: var(--accent);
+    font-weight: 500;
+}
+
+.nav-section-title {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    font-weight: 600;
+    margin: 1.2rem 0 0.4rem 0.8rem;
+}
+
+.nav-divider {
+    height: 1px;
+    background: var(--glass-border);
+    margin: 0.5rem 0;
+}
+
+.status-panel {
+    padding: 0.8rem;
+    background: var(--surface);
+    border-radius: var(--radius-sm);
+    margin-top: auto;
+}
+
+.status-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.3rem 0;
+}
+
+.status-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-value {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.disclaimer-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 0.8rem;
+    margin-top: 0.8rem;
+    background: var(--medium-bg);
+    border: 1px solid rgba(234, 179, 8, 0.2);
+    border-radius: var(--radius-xs);
+    color: var(--medium);
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.3px;
+}
+
+/* ── Main Content ──────────────────────────────────────────────────── */
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem 2rem;
+    position: relative;
+}
+
+.view {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.view.active {
+    display: block;
+}
+
+.hidden {
+    display: none !important;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.view-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.view-header h2 {
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.view-header h2 i {
+    color: var(--accent);
+    font-size: 1.1rem;
+}
+
+.header-actions {
+    margin-left: auto;
+    display: flex;
+    gap: 0.6rem;
+}
+
+/* ── Buttons ───────────────────────────────────────────────────────── */
+.btn-primary {
+    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    transition: var(--transition);
+    box-shadow: 0 2px 10px var(--accent-glow);
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 15px var(--accent-glow);
+}
+
+.btn-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.btn-secondary {
+    background: var(--surface);
+    color: var(--text-secondary);
+    border: 1px solid var(--glass-border);
+    padding: 0.6rem 1rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    transition: var(--transition);
+}
+
+.btn-secondary:hover {
+    background: var(--surface-hover);
+    color: var(--text-primary);
+}
+
+.btn-secondary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-large {
+    padding: 0.8rem 2rem;
+    font-size: 1rem;
+}
+
+.btn-back {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 1.1rem;
+    padding: 0.4rem;
+    transition: var(--transition);
+}
+
+.btn-back:hover {
+    color: var(--accent);
+}
+
+/* ── Glass Panel ───────────────────────────────────────────────────── */
+.glass {
+    background: var(--glass);
+    backdrop-filter: blur(20px);
+    border: 2px solid var(--accent);
+    /* thick dark blue border */
+    border-radius: var(--radius);
+}
+
+/* ── Cases Grid (Dashboard) ────────────────────────────────────────── */
+.cases-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1rem;
+}
+
+.case-card {
+    background: var(--surface);
+    border: 2px solid var(--accent);
+    /* thick dark blue border */
+    border-radius: var(--radius);
+    padding: 1.2rem;
+    cursor: pointer;
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.case-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--accent);
+    opacity: 0;
+    transition: var(--transition);
+}
+
+.case-card:hover {
+    border-color: var(--accent);
+    transform: translateY(-2px);
+}
+
+.case-card:hover::before {
+    opacity: 1;
+}
+
+.case-card .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.6rem;
+}
+
+.case-card .case-number {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--text-primary);
+}
+
+.case-card .case-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+}
+
+.case-card .case-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.case-card .case-meta i {
+    width: 14px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+
+.case-card .card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.8rem;
+    padding-top: 0.8rem;
+    border-top: 1px solid var(--glass-border);
+}
+
+.case-card .photo-count {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+/* Status badge */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-badge.pending {
+    background: rgba(139, 151, 176, 0.15);
+    color: var(--pending);
+}
+
+.status-badge.analyzing {
+    background: rgba(59, 130, 246, 0.15);
+    color: var(--analyzing);
+}
+
+.status-badge.complete {
+    background: rgba(34, 197, 94, 0.15);
+    color: var(--complete);
+}
+
+.status-badge.error {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--error);
+}
+
+.status-badge i {
+    font-size: 0.5rem;
+}
+
+/* ── Empty State ───────────────────────────────────────────────────── */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    text-align: center;
+}
+
+.empty-state i {
+    font-size: 3rem;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    opacity: 0.4;
+}
+
+.empty-state h3 {
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.empty-state p {
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+}
+
+/* ── New Case Form ─────────────────────────────────────────────────── */
+.form-container {
+    padding: 1.5rem;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+.form-group label {
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+    background: var(--bg-secondary);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-xs);
+    padding: 0.6rem 0.8rem;
+    color: var(--text-primary);
+    /* explicitly dark text for white inputs */
+    transition: var(--transition);
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.form-group textarea {
+    resize: vertical;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+}
+
+/* ── Drop Zone ─────────────────────────────────────────────────────── */
+.drop-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2.5rem 1.5rem;
+    border: 2px dashed var(--glass-border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: var(--transition);
+    text-align: center;
+}
+
+.drop-zone:hover,
+.drop-zone.drag-over {
+    border-color: var(--accent);
+    background: var(--accent-glow);
+}
+
+.drop-zone i {
+    font-size: 2.2rem;
+    color: var(--accent);
+    margin-bottom: 0.8rem;
+    opacity: 0.7;
+}
+
+.drop-zone p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin-bottom: 0.3rem;
+}
+
+.drop-zone .sub-text {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+/* ── Photo Preview ─────────────────────────────────────────────────── */
+.photo-preview {
+    margin-top: 1rem;
+}
+
+.photo-thumbnails {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.photo-thumbnail {
+    width: 70px;
+    height: 70px;
+    border-radius: var(--radius-xs);
+    overflow: hidden;
+    border: 2px solid var(--glass-border);
+}
+
+.photo-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.photo-count {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+}
+
+/* ── Progress ────────────────────────────────────────────��─────────── */
+.progress-section {
+    margin-top: 1rem;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 6px;
+    background: var(--bg-secondary);
+    border-radius: 999px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #818cf8);
+    border-radius: 999px;
+    width: 0%;
+    transition: width 0.5s ease;
+}
+
+#upload-status-text {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+}
+
+/* ── Case Detail ───────────────────────────────────────────────────── */
+.case-info-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    padding: 0.8rem 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.info-chip {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    padding: 0.3rem 0.7rem;
+    background: var(--surface);
+    border-radius: 999px;
+}
+
+.info-chip i {
+    color: var(--accent);
+    font-size: 0.75rem;
+}
+
+.status-chip.pending i {
+    color: var(--pending);
+}
+
+.status-chip.analyzing i {
+    color: var(--analyzing);
+}
+
+.status-chip.complete i {
+    color: var(--complete);
+}
+
+.status-chip.error i {
+    color: var(--error);
+}
+
+/* ── Analysis Grid ─────────────────────────────────────────────────── */
+.analysis-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.panel {
+    padding: 1rem;
+    min-height: 200px;
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.panel-header h3 {
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-primary);
+}
+
+.panel-header h3 i {
+    color: var(--accent);
+    font-size: 0.85rem;
+}
+
+.badge {
+    background: var(--surface);
+    color: var(--text-secondary);
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 600;
+}
+
+.badge.danger {
+    background: var(--critical-bg);
+    color: var(--critical);
+}
+
+.placeholder-text {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* ── Detail Photos Grid ────────────────────────────────────────────── */
+.detail-photos-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 0.5rem;
+}
+
+.detail-photo {
+    aspect-ratio: 4/3;
+    border-radius: var(--radius-xs);
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: var(--transition);
+}
+
+.detail-photo:hover {
+    border-color: var(--accent);
+    transform: scale(1.02);
+}
+
+.detail-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* ── Analysis Content ──────────────────────────────────────────────── */
+.analysis-content {
+    font-size: 0.85rem;
+    line-height: 1.7;
+    color: var(--text-secondary);
+}
+
+.analysis-content pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: var(--font-body);
+}
+
+.analysis-photo-section {
+    margin-bottom: 1rem;
+}
+
+.analysis-photo-label {
+    font-weight: 600;
+    color: var(--accent);
+    margin-bottom: 0.3rem;
+    font-size: 0.82rem;
+}
+
+/* ── Violations List ───────────────────────────────────────────────── */
+.violation-card {
+    background: var(--surface);
+    border: 2px solid var(--accent);
+    /* thick dark blue border */
+    border-radius: var(--radius-sm);
+    padding: 0.8rem;
+    margin-bottom: 0.5rem;
+    border-left: 6px solid var(--text-muted);
+    transition: var(--transition);
+}
+
+.violation-card:hover {
+    background: var(--surface-hover);
+}
+
+.violation-card.CRITICAL {
+    border-left-color: var(--critical);
+}
+
+.violation-card.HIGH {
+    border-left-color: var(--high);
+}
+
+.violation-card.MEDIUM {
+    border-left-color: var(--medium);
+}
+
+.violation-card.LOW {
+    border-left-color: var(--low);
+}
+
+.violation-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.3rem;
+}
+
+.violation-title {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--text-primary);
+}
+
+.severity-tag {
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.severity-tag.CRITICAL {
+    background: var(--critical-bg);
+    color: var(--critical);
+}
+
+.severity-tag.HIGH {
+    background: var(--high-bg);
+    color: var(--high);
+}
+
+.severity-tag.MEDIUM {
+    background: var(--medium-bg);
+    color: var(--medium);
+}
+
+.severity-tag.LOW {
+    background: var(--low-bg);
+    color: var(--low);
+}
+
+.violation-meta {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    display: flex;
+    gap: 1rem;
+}
+
+.violation-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.violation-evidence {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    margin-top: 0.3rem;
+    font-style: italic;
+}
+
+/* ── Fault Content ─────────────────────────────────────────────────── */
+.fault-content {
+    font-size: 0.85rem;
+}
+
+.fault-party-bars {
+    margin-bottom: 1rem;
+}
+
+.party-bar {
+    margin-bottom: 0.6rem;
+}
+
+.party-bar-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+    font-size: 0.82rem;
+}
+
+.party-bar-label .party-name {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.party-bar-label .party-pct {
+    color: var(--accent);
+    font-weight: 600;
+}
+
+.party-bar-track {
+    height: 8px;
+    background: var(--bg-secondary);
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.party-bar-fill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 1s ease;
+}
+
+.party-bar-fill.primary {
+    background: linear-gradient(90deg, var(--critical), var(--high));
+}
+
+.party-bar-fill.secondary {
+    background: linear-gradient(90deg, var(--medium), var(--low));
+}
+
+.fault-cause {
+    background: var(--surface);
+    border-radius: var(--radius-sm);
+    padding: 0.8rem;
+    margin-top: 0.8rem;
+}
+
+.fault-cause h4 {
+    font-size: 0.82rem;
+    color: var(--accent);
+    margin-bottom: 0.4rem;
+}
+
+.fault-cause p {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.confidence-meter {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.8rem;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+}
+
+.confidence-meter .meter-bar {
+    flex: 1;
+    height: 4px;
+    background: var(--bg-secondary);
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.confidence-meter .meter-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: 999px;
+}
+
+/* ── Analysis Overlay ──────────────────────────────────────────────── */
+.analysis-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(10, 14, 26, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(5px);
+}
+
+.analysis-overlay.hidden {
+    display: none;
+}
+
+.overlay-content {
+    text-align: center;
+    padding: 2.5rem 3rem;
+    border-radius: var(--radius);
+}
+
+.overlay-content h3 {
+    margin: 1rem 0 0.5rem;
+    color: var(--text-primary);
+}
+
+.overlay-content p {
+    color: var(--text-secondary);
+    font-size: 0.88rem;
+}
+
+/* ── Spinner ───────────────────────────────────────────────────────── */
+.spinner-large {
+    width: 48px;
+    height: 48px;
+    border: 4px solid var(--glass-border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    margin: 0 auto;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ── Report Content ────────────────────────────────────────────────── */
+.report-content {
+    padding: 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+.report-content h3 {
+    font-size: 1.1rem;
+    color: var(--accent);
+    margin: 1.5rem 0 0.5rem;
+    padding-bottom: 0.3rem;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.report-content h4 {
+    font-size: 0.95rem;
+    color: var(--text-primary);
+    margin: 1rem 0 0.3rem;
+}
+
+.report-content p {
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.report-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 2px solid var(--accent);
+}
+
+.report-header h2 {
+    font-size: 1.4rem;
+    margin-bottom: 0.3rem;
+}
+
+.report-header .report-subtitle {
+    color: var(--text-muted);
+    font-size: 0.88rem;
+}
+
+.report-disclaimer {
+    background: var(--medium-bg);
+    border: 1px solid rgba(234, 179, 8, 0.2);
+    border-radius: var(--radius-sm);
+    padding: 0.8rem 1rem;
+    font-size: 0.78rem;
+    color: var(--medium);
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.report-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.8rem;
+    margin-bottom: 1.5rem;
+}
+
+.report-stat {
+    text-align: center;
+    background: var(--surface);
+    border-radius: var(--radius-sm);
+    padding: 0.8rem;
+}
+
+.report-stat .stat-number {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--accent);
+}
+
+.report-stat .stat-label {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* ── Rules View ────────────────────────────────────────────────────── */
+.rules-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.rule-category {
+    margin-bottom: 1.5rem;
+}
+
+.rule-category-header {
+    font-size: 1rem;
+    color: var(--text-primary);
+    padding: 0.6rem 1rem;
+    background: var(--surface);
+    border-radius: var(--radius-sm);
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.rule-category-header:hover {
+    background: var(--surface-hover);
+}
+
+.rule-category-header .rule-count {
+    margin-left: auto;
+    color: var(--text-muted);
+    font-size: 0.82rem;
+}
+
+.rule-list {
+    padding-left: 0.5rem;
+}
+
+.rule-item {
+    padding: 0.4rem 0.8rem;
+    margin-bottom: 0.25rem;
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.rule-item .rule-id {
+    color: var(--text-muted);
+    font-family: monospace;
+    font-size: 0.75rem;
+    min-width: 90px;
+}
+
+/* ── Toast ─────────────────────────────────────────────────────────── */
+#toast-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.toast {
+    padding: 0.7rem 1.2rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+    animation: slideIn 0.3s ease, fadeOut 0.5s ease 3.5s forwards;
+    max-width: 350px;
+    backdrop-filter: blur(10px);
+}
+
+.toast.success {
+    background: rgba(34, 197, 94, 0.9);
+    color: white;
+}
+
+.toast.error {
+    background: rgba(239, 68, 68, 0.9);
+    color: white;
+}
+
+.toast.info {
+    background: rgba(59, 130, 246, 0.9);
+    color: white;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+    }
+}
+
+/* ── Responsive ────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+    .sidebar {
+        display: none;
+    }
+
+    .main-content {
+        padding: 1rem;
+    }
+
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .analysis-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .case-info-bar {
+        flex-direction: column;
+    }
+
+    .report-stat-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* ── Scrollbar ─────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--glass-border);
+    border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+/* ── Modals ────────────────────────────────────────────────────────── */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+    transition: opacity 0.3s ease;
+}
+
+.modal.hidden {
+    display: none;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.modal-content {
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: 2rem;
+    position: relative;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.modal-header h2 {
+    font-size: 1.3rem;
+    margin: 0;
+}
+
+.btn-close {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.8rem;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--glass-border);
+}
+
+/* ── UI Enhancements ──────────────────────────────────────────────── */
+.panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+
+.btn-icon-sm {
+    background: var(--surface);
+    border: 1px solid var(--glass-border);
+    color: var(--text-secondary);
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.btn-icon-sm:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: var(--accent-glow);
+}
+
+/* Delete Icon in Card */
+.btn-delete-card {
+    position: absolute;
+    top: 0.8rem;
+    right: 0.8rem;
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--critical);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--transition);
+    z-index: 10;
+    opacity: 0.4;
+}
+
+.case-card:hover .btn-delete-card {
+    opacity: 1;
+}
+
+.btn-delete-card:hover {
+    background: var(--critical);
+    color: white;
+    border-color: var(--critical);
+}
+
+/* ── Landing Page ─────────────────────────────────────────────────── */
+#view-landing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    animation: fadeIn 0.8s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.landing-hero {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.landing-title {
+    font-size: 4.5rem;
+    font-weight: 800;
+    color: var(--accent);
+    margin-bottom: 1rem;
+    letter-spacing: -1px;
+    background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.landing-subtitle {
+    font-size: 1.6rem;
+    color: var(--text-primary);
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    line-height: 1.3;
+}
+
+.landing-description {
+    font-size: 1.15rem;
+    color: var(--text-secondary);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.landing-use-cases {
+    width: 100%;
+}
+
+.use-cases-title {
+    font-size: 1.8rem;
+    color: var(--text-primary);
+    margin-bottom: 2rem;
+    text-align: center;
+    font-weight: 700;
+}
+
+/* ── Modern Accordion ─────────────────────────────────────────────── */
+.accordion-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.accordion-item {
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.accordion-item:hover {
+    box-shadow: 0 4px 20px var(--accent-glow);
+    border-color: var(--accent);
+}
+
+.accordion-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.2rem 1.5rem;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    text-align: left;
+    transition: color 0.3s ease;
+}
+
+.accordion-header i:first-child {
+    margin-right: 0.8rem;
+    color: var(--accent);
+    width: 24px;
+    text-align: center;
+}
+
+.accordion-icon {
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--text-secondary);
+    font-size: 1rem;
+}
+
+.accordion-header:hover {
+    color: var(--accent);
+}
+
+/* Modern smooth height transition using Grid */
+.accordion-body {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.accordion-content {
+    overflow: hidden;
+}
+
+.accordion-content p {
+    padding: 0 1.5rem 1.2rem 3.5rem;
+    margin: 0;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.accordion-content p strong {
+    color: var(--text-primary);
+}
+
+.accordion-content p:first-child {
+    padding-top: 0.5rem;
+}
+
+/* Active State */
+.accordion-item.active .accordion-body {
+    grid-template-rows: 1fr;
+}
+
+.accordion-item.active .accordion-icon {
+    transform: rotate(180deg);
+    color: var(--accent);
+}
+
+.accordion-item.active .accordion-header {
+    color: var(--accent);
+}
+
+/* ── Sidebar Collapsible Widgets ──────────────────────────────────── */
+.sidebar-collapsible {
+    margin-bottom: 0.4rem;
+}
+
+.sidebar-collapse-btn {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.55rem 0.8rem;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 0.82rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: var(--transition);
+    text-align: left;
+}
+
+.sidebar-collapse-btn span {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+}
+
+.sidebar-collapse-btn span i {
+    color: var(--accent);
+    font-size: 0.85rem;
+    width: 16px;
+    text-align: center;
+}
+
+.sidebar-collapse-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text-primary);
+}
+
+.sidebar-collapse-icon {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-collapsible.open .sidebar-collapse-icon {
+    transform: rotate(180deg);
+    color: var(--accent);
+}
+
+.sidebar-collapsible.open .sidebar-collapse-btn {
+    color: var(--accent);
+    background: var(--accent-glow);
+}
+
+/* Smooth height animation via CSS Grid */
+.sidebar-collapse-body {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-collapsible.open .sidebar-collapse-body {
+    grid-template-rows: 1fr;
+}
+
+.sidebar-collapse-content {
+    overflow: hidden;
+    padding: 0 0.8rem;
+}
+
+.sidebar-collapsible.open .sidebar-collapse-content {
+    padding: 0.4rem 0.8rem 0.6rem;
+}
+
+/* Founder details in sidebar */
+.sidebar-founder-role {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin-bottom: 0.5rem;
+}
+
+.sidebar-linkedin {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.3rem 0.7rem;
+    background: #0a66c2;
+    color: #ffffff;
+    border-radius: var(--radius-xs);
+    text-decoration: none;
+    font-size: 0.75rem;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.sidebar-linkedin:hover {
+    background: #004182;
+    transform: translateY(-1px);
+}
+
+.sidebar-linkedin i {
+    font-size: 0.85rem;
+}
+
+/* Contact details in sidebar */
+.sidebar-contact-link {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--accent);
+    text-decoration: none;
+    font-size: 0.78rem;
+    font-weight: 500;
+    margin-bottom: 0.4rem;
+    transition: var(--transition);
+}
+
+.sidebar-contact-link:hover {
+    color: var(--accent-hover);
+}
+
+.sidebar-contact-link i,
+.sidebar-contact-phone i {
+    color: var(--accent);
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+.sidebar-contact-phone {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-style: italic;
+}

frontend/index.html

@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TraceScene — Visual Intelligence for Law Enforcement</title>
+    <meta name="description"
+        content="AI-powered accident scene analysis: upload photos, detect traffic violations, determine fault.">
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&display=swap"
+        rel="stylesheet">
+
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar glass">
+            <div class="brand">
+                <i class="fa-solid fa-shield-halved"></i>
+                <h1>TraceScene</h1>
+            </div>
+
+            <nav class="nav-menu">
+                <button class="nav-item active" data-view="landing">
+                    <i class="fa-solid fa-home"></i> Home
+                </button>
+
+                <div class="nav-section-title">Law Enforcement</div>
+                <button class="nav-item" data-view="le-dashboard">
+                    <i class="fa-solid fa-chart-line"></i> Dashboard
+                </button>
+                <button class="nav-item" data-view="le-new-case">
+                    <i class="fa-solid fa-shield-halved"></i> New Case
+                </button>
+
+                <div class="nav-section-title">Insurance</div>
+                <button class="nav-item" data-view="ins-dashboard">
+                    <i class="fa-solid fa-chart-line"></i> Dashboard
+                </button>
+                <button class="nav-item" data-view="ins-new-case">
+                    <i class="fa-solid fa-file-invoice-dollar"></i> New Case
+                </button>
+
+                <div class="nav-divider"></div>
+
+                <button class="nav-item" data-view="rules">
+                    <i class="fa-solid fa-book-open"></i> Traffic Rules
+                </button>
+                <button class="nav-item" data-view="chat">
+                    <i class="fa-solid fa-message"></i> Chat Agent
+                </button>
+                <button class="nav-item" data-view="simulation">
+                    <i class="fa-solid fa-video"></i> Simulation
+                </button>
+            </nav>
+
+            <!-- Sidebar: Founder (collapsible) -->
+            <div class="sidebar-collapsible">
+                <button class="sidebar-collapse-btn" aria-expanded="false"
+                    onclick="this.parentElement.classList.toggle('open'); this.setAttribute('aria-expanded', this.parentElement.classList.contains('open'))">
+                    <span><i class="fa-solid fa-user-tie"></i> Built by</span>
+                    <i class="fa-solid fa-chevron-down sidebar-collapse-icon"></i>
+                </button>
+                <div class="sidebar-collapse-body">
+                    <div class="sidebar-collapse-content">
+                        <a href="https://www.linkedin.com/in/siddharth-ravikumar-17262a50/" target="_blank"
+                            rel="noopener noreferrer" class="sidebar-linkedin">
+                            <i class="fa-brands fa-linkedin"></i> LinkedIn
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sidebar: Contact (collapsible) -->
+            <div class="sidebar-collapsible">
+                <button class="sidebar-collapse-btn" aria-expanded="false"
+                    onclick="this.parentElement.classList.toggle('open'); this.setAttribute('aria-expanded', this.parentElement.classList.contains('open'))">
+                    <span><i class="fa-solid fa-envelope"></i> Request Demo</span>
+                    <i class="fa-solid fa-chevron-down sidebar-collapse-icon"></i>
+                </button>
+                <div class="sidebar-collapse-body">
+                    <div class="sidebar-collapse-content">
+                        <a href="mailto:tracescene@zohomail.ae" class="sidebar-contact-link">
+                            <i class="fa-solid fa-at"></i> tracescene@zohomail.ae
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="status-panel">
+                <div class="status-item">
+                    <span class="status-label">Model</span>
+                    <span class="status-value" id="status-model">Loading...</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">Device</span>
+                    <span class="status-value" id="status-device">—</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">Rules</span>
+                    <span class="status-value" id="status-rules">—</span>
+                </div>
+            </div>
+
+            <div class="disclaimer-badge">
+                <i class="fa-solid fa-triangle-exclamation"></i>
+                <span>AI Advisory Only</span>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+
+            <!-- Landing Page View -->
+            <section id="view-landing" class="view active">
+                <div class="landing-hero">
+                    <h1 class="landing-title">TraceScene</h1>
+                    <h2 class="landing-subtitle">Edge AI for Accident Intelligence — Fully Offline. Fully Private.</h2>
+                    <p class="landing-description">
+                        Edge-based AI enables powerful reasoning, and real-time physical world analysis directly on edge
+                        devices custom-trained in specialized physical conditions for accurate accident analysis and
+                        Insurance Verification—all fully offline and privacy-preserving, with no data leaving the device
+                    </p>
+                </div>
+
+                <div class="landing-use-cases">
+                    <h3 class="use-cases-title">Cross-Vertical Use Cases: From Intelligence to Implementation</h3>
+
+                    <div class="accordion-container">
+                        <!-- Law Enforcement -->
+                        <div class="accordion-item glass">
+                            <button class="accordion-header" aria-expanded="false">
+                                <span><i class="fa-solid fa-shield-halved"></i> Law Enforcement and Public Safety</span>
+                                <i class="fa-solid fa-chevron-down accordion-icon"></i>
+                            </button>
+                            <div class="accordion-body">
+                                <div class="accordion-content">
+                                    <p><strong>Automated Incident Reporting:</strong> Field officers capture a 30-second
+                                        scene walkthrough. The engine determines causality (e.g., "Vehicle A rear-ended
+                                        Vehicle B due to wet road conditions") and
+                                        auto-generates a structured First Information Report (FIR) instantly.</p>
+                                    <p><strong>Rule-Book Verification:</strong> Insights are matched against the UAE
+                                        Federal Traffic rulebook to identify violations like Article 18 tailgating or
+                                        signal jumping.</p>
+                                    <p><strong>Forensic Reconstructions:</strong> Generates "frozen-in-time" 3D digital
+                                        twins and evidence maps locally on mobile NPUs.</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Insurance -->
+                        <div class="accordion-item glass">
+                            <button class="accordion-header" aria-expanded="false">
+                                <span><i class="fa-solid fa-file-invoice-dollar"></i> Insurance and Claims
+                                    Management</span>
+                                <i class="fa-solid fa-chevron-down accordion-icon"></i>
+                            </button>
+                            <div class="accordion-body">
+                                <div class="accordion-content">
+                                    <p><strong>Verified Local Law Mapping:</strong> Automatically cross-references
+                                        visual evidence
+                                        against the UAE Federal Traffic Law (e.g., Article 18 for tailgating or Article
+                                        12 for accident assistance) to determine fault based on objective legal
+                                        standards rather than human estimation.</p>
+                                    <p><strong>Real-Time Reasoning vs. Manual Verification:</strong> Shifts the
+                                        adjuster's
+                                        workflow from "Collect-then-Verify" to an Analyze-while-Collecting model.
+                                        Real-time physical-AI analyzes impact trajectories and debris patterns to
+                                        justify or flag claims instantly.</p>
+                                    <p><strong>Auto-Filled Insurance Pointers:</strong> Uses document intelligence to
+                                        instantly extract data from Emirates IDs, Mulkiya cards, and police reports,
+                                        converting them into structured JSON to auto-populate mandatory claim fields.
+                                    </p>
+                                    <p><strong>Rapid Triage and settlement:</strong> Reduces the average UAE claims
+                                        lifecycle from 15 days to minutes by automating the intake and verification of
+                                        accident photos.</p>
+                                    <p><strong>Fraud Shielding and CBUAE 2026 Compliance:</strong> Identifies suspicious
+                                        patterns that contradict the reported scene context. Every reasoning deduction
+                                        is
+                                        linked to an auditable Evidence Map (linking frame coordinates to specific law
+                                        articles) as mandated by 2026 Central Bank guidelines on AI transparency.</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Real Estate & Legal Removed for Alternative UI -->
+                    </div>
+                </div>
+            </section>
+
+            <!-- LE Dashboard View -->
+            <section id="view-le-dashboard" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-chart-line"></i> Active Cases</h2>
+                    <button class="btn-secondary" id="btn-refresh-cases">
+                        <i class="fa-solid fa-rotate-right"></i>
+                    </button>
+                </div>
+
+                <div id="le-cases-grid" class="cases-grid">
+                    <!-- Cases injected here -->
+                </div>
+
+                <div id="le-empty-state-dashboard" class="empty-state">
+                    <i class="fa-solid fa-folder-open"></i>
+                    <h3>No Cases Yet</h3>
+                    <p>Create a new case to begin accident analysis.</p>
+                    <button class="btn-primary" id="btn-le-empty-new-case">
+                        <i class="fa-solid fa-plus"></i> Create First Case
+                    </button>
+                </div>
+            </section>
+
+            <!-- LE New Case View -->
+            <section id="view-le-new-case" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-plus-circle"></i> New Accident Case</h2>
+                </div>
+
+                <div class="form-container glass">
+                    <div class="form-grid">
+                        <div class="form-group">
+                            <label for="case-number">Case / Incident Number *</label>
+                            <input type="text" id="case-number" placeholder="e.g., ACC-2026-001">
+                        </div>
+                        <div class="form-group">
+                            <label for="officer-name">Officer Name</label>
+                            <input type="text" id="officer-name" placeholder="e.g., Officer Smith">
+                        </div>
+                        <div class="form-group">
+                            <label for="incident-location">Location</label>
+                            <input type="text" id="incident-location" placeholder="e.g., Main St & 5th Ave">
+                        </div>
+                        <div class="form-group">
+                            <label for="incident-date">Incident Date</label>
+                            <input type="date" id="incident-date">
+                        </div>
+                        <div class="form-group full-width">
+                            <label for="officer-notes">Officer Notes</label>
+                            <textarea id="officer-notes" rows="3"
+                                placeholder="Initial observations, weather conditions, etc."></textarea>
+                        </div>
+                    </div>
+
+                    <div class="drop-zone" id="drop-zone">
+                        <i class="fa-solid fa-camera"></i>
+                        <p>Drag & drop accident scene photos here</p>
+                        <span class="sub-text">or click to browse • Max 20 photos • JPG, PNG, WebP</span>
+                        <input type="file" id="file-input" multiple accept="image/*" capture="environment" hidden>
+                    </div>
+
+                    <div id="photo-preview" class="photo-preview hidden">
+                        <div id="photo-thumbnails" class="photo-thumbnails"></div>
+                        <span id="photo-count" class="photo-count">0 photos selected</span>
+                    </div>
+
+                    <div class="form-actions">
+                        <button class="btn-primary btn-large" id="btn-create-case" disabled>
+                            <i class="fa-solid fa-shield-halved"></i> Create Case & Upload Photos
+                        </button>
+                    </div>
+
+                    <div id="upload-progress" class="progress-section hidden">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="upload-progress-fill"></div>
+                        </div>
+                        <span id="upload-status-text">Uploading photos...</span>
+                    </div>
+                </div>
+            </section>
+
+            <!-- INS Dashboard View -->
+            <section id="view-ins-dashboard" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-chart-line"></i> Active Cases</h2>
+                    <button class="btn-secondary" id="btn-refresh-cases-ins">
+                        <i class="fa-solid fa-rotate-right"></i>
+                    </button>
+                </div>
+
+                <div id="ins-cases-grid" class="cases-grid">
+                    <!-- Cases injected here -->
+                </div>
+
+                <div id="ins-empty-state-dashboard" class="empty-state">
+                    <i class="fa-solid fa-folder-open"></i>
+                    <h3>No Cases Yet</h3>
+                    <p>Create a new case to begin accident analysis.</p>
+                    <button class="btn-primary" id="btn-ins-empty-new-case">
+                        <i class="fa-solid fa-plus"></i> Create First Case
+                    </button>
+                </div>
+            </section>
+
+            <!-- INS New Case View -->
+            <section id="view-ins-new-case" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-plus-circle"></i> New Accident Case</h2>
+                </div>
+
+                <div class="form-container glass">
+                    <div class="form-grid">
+                        <div class="form-group">
+                            <label for="ins-case-number">Case / Incident Number *</label>
+                            <input type="text" id="ins-case-number" placeholder="e.g., ACC-2026-001">
+                        </div>
+                        <div class="form-group">
+                            <label for="ins-officer-name">Adjuster Name</label>
+                            <input type="text" id="ins-officer-name" placeholder="e.g., Adjuster Smith">
+                        </div>
+                        <div class="form-group">
+                            <label for="ins-incident-location">Location</label>
+                            <input type="text" id="ins-incident-location" placeholder="e.g., Main St & 5th Ave">
+                        </div>
+                        <div class="form-group">
+                            <label for="ins-incident-date">Incident Date</label>
+                            <input type="date" id="ins-incident-date">
+                        </div>
+                        <div class="form-group full-width">
+                            <label for="ins-officer-notes">Adjuster Notes</label>
+                            <textarea id="ins-officer-notes" rows="3"
+                                placeholder="Initial observations, weather conditions, etc."></textarea>
+                        </div>
+                    </div>
+
+                    <div class="drop-zone" id="ins-drop-zone">
+                        <i class="fa-solid fa-camera"></i>
+                        <p>Drag & drop accident scene photos here</p>
+                        <span class="sub-text">or click to browse • Max 20 photos • JPG, PNG, WebP</span>
+                        <input type="file" id="ins-file-input" multiple accept="image/*" capture="environment" hidden>
+                    </div>
+
+                    <div id="ins-photo-preview" class="photo-preview hidden">
+                        <div id="ins-photo-thumbnails" class="photo-thumbnails"></div>
+                        <span id="ins-photo-count" class="photo-count">0 photos selected</span>
+                    </div>
+
+                    <div class="form-actions">
+                        <button class="btn-primary btn-large" id="btn-ins-create-case" disabled>
+                            <i class="fa-solid fa-file-invoice-dollar"></i> Create Case & Upload Photos
+                        </button>
+                    </div>
+
+                    <div id="ins-upload-progress" class="progress-section hidden">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="ins-upload-progress-fill"></div>
+                        </div>
+                        <span id="ins-upload-status-text">Uploading photos...</span>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Case Detail View -->
+            <section id="view-case-detail" class="view hidden">
+                <div class="view-header">
+                    <button class="btn-back" id="btn-back-dashboard">
+                        <i class="fa-solid fa-arrow-left"></i>
+                    </button>
+                    <h2 id="case-detail-title">Case Details</h2>
+                    <div class="header-actions">
+                        <button class="btn-primary" id="btn-run-analysis" disabled>
+                            <i class="fa-solid fa-brain"></i> Run AI Analysis
+                        </button>
+                        <button class="btn-secondary" id="btn-edit-case">
+                            <i class="fa-solid fa-pen-to-square"></i> Edit
+                        </button>
+                        <button class="btn-secondary" id="btn-view-report" disabled>
+                            <i class="fa-solid fa-file-lines"></i> View Report
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Case Info Bar -->
+                <div class="case-info-bar glass">
+                    <div class="info-chip">
+                        <i class="fa-solid fa-hashtag"></i>
+                        <span id="detail-case-number">—</span>
+                    </div>
+                    <div class="info-chip">
+                        <i class="fa-solid fa-user-shield"></i>
+                        <span id="detail-officer">—</span>
+                    </div>
+                    <div class="info-chip">
+                        <i class="fa-solid fa-location-dot"></i>
+                        <span id="detail-location">—</span>
+                    </div>
+                    <div class="info-chip">
+                        <i class="fa-solid fa-calendar"></i>
+                        <span id="detail-date">—</span>
+                    </div>
+                    <div class="info-chip status-chip" id="detail-status-chip">
+                        <i class="fa-solid fa-circle"></i>
+                        <span id="detail-status">—</span>
+                    </div>
+                </div>
+
+                <!-- Analysis Panels -->
+                <div class="analysis-grid">
+                    <!-- Photo Gallery Panel -->
+                    <div class="panel glass" id="panel-photos">
+                        <div class="panel-header">
+                            <h3><i class="fa-solid fa-images"></i> Scene Photos</h3>
+                            <div class="panel-actions">
+                                <span class="badge" id="photo-badge">0</span>
+                                <button class="btn-icon-sm" id="btn-add-photos-inline" title="Add Photos">
+                                    <i class="fa-solid fa-plus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div id="detail-photos-grid" class="detail-photos-grid">
+                            <!-- Photo thumbnails injected here -->
+                        </div>
+                    </div>
+
+                    <!-- Scene Analysis Panel -->
+                    <div class="panel glass" id="panel-analysis">
+                        <div class="panel-header">
+                            <h3><i class="fa-solid fa-eye"></i> Scene Analysis</h3>
+                        </div>
+                        <div id="analysis-content" class="analysis-content">
+                            <p class="placeholder-text">Run analysis to see AI observations.</p>
+                        </div>
+                    </div>
+
+                    <!-- Violations Panel -->
+                    <div class="panel glass" id="panel-violations">
+                        <div class="panel-header">
+                            <h3><i class="fa-solid fa-gavel"></i> Violations Detected</h3>
+                            <span class="badge danger" id="violation-badge">0</span>
+                        </div>
+                        <div id="violations-list" class="violations-list">
+                            <p class="placeholder-text">No violations detected yet.</p>
+                        </div>
+                    </div>
+
+                    <!-- Fault Analysis Panel -->
+                    <div class="panel glass" id="panel-fault">
+                        <div class="panel-header">
+                            <h3><i class="fa-solid fa-scale-balanced"></i> Fault Analysis</h3>
+                        </div>
+                        <div id="fault-content" class="fault-content">
+                            <p class="placeholder-text">Run analysis to determine fault.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Analysis Progress Overlay -->
+                <div id="analysis-overlay" class="analysis-overlay hidden">
+                    <div class="overlay-content glass">
+                        <div class="spinner-large"></div>
+                        <h3 id="analysis-step">Analyzing scene photos...</h3>
+                        <p id="analysis-detail">This may take a few minutes depending on the number of photos.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Report View -->
+            <section id="view-report" class="view hidden">
+                <div class="view-header">
+                    <button class="btn-back" id="btn-back-case">
+                        <i class="fa-solid fa-arrow-left"></i>
+                    </button>
+                    <h2><i class="fa-solid fa-file-lines"></i> Incident Report</h2>
+                </div>
+                <div id="report-content" class="report-content glass">
+                    <!-- Report injected here -->
+                </div>
+            </section>
+
+            <!-- Rules View -->
+            <section id="view-rules" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-book-open"></i> Traffic Rules Reference</h2>
+                </div>
+                <div id="rules-content" class="rules-content">
+                    <!-- Rules injected here -->
+                </div>
+            </section>
+
+            <!-- Chat View -->
+            <section id="view-chat" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-message"></i> Interactive Chat Agent</h2>
+                </div>
+                <div class="form-container glass" style="display:flex; flex-direction:column; height: 75vh;">
+                    <div style="flex:1; overflow-y:auto; padding:1rem; border-bottom:1px solid rgba(255,255,255,0.1);"
+                        id="chat-messages">
+                        <div class="chat-message assistant">
+                            <i class="fa-solid fa-robot" style="margin-right:10px;"></i>
+                            <span>Hello! I am the TraceScene AI Assistant. You can ask me about traffic rules, insurance
+                                clauses, or a specific case if you load it.</span>
+                        </div>
+                    </div>
+                    <div style="padding:1rem; display:flex; gap:10px;">
+                        <input type="text" id="chat-input" placeholder="Type your message..." style="flex:1;">
+                        <button class="btn-primary" id="btn-chat-send"><i class="fa-solid fa-paper-plane"></i>
+                            Send</button>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Simulation View -->
+            <section id="view-simulation" class="view hidden">
+                <div class="view-header">
+                    <h2><i class="fa-solid fa-video"></i> 2D Accident Simulation</h2>
+                </div>
+                <div class="form-container glass" style="text-align:center;">
+                    <p style="margin-bottom:1rem; color:var(--text-secondary);">Enter a Case ID to generate a
+                        physics-based 2D simulation of the accident trajectory from AI observations.</p>
+                    <div style="display:flex; justify-content:center; gap:10px; margin-bottom: 2rem;">
+                        <input type="number" id="sim-case-id" placeholder="Case ID" style="max-width: 200px;">
+                        <button class="btn-primary" id="btn-sim-generate"><i class="fa-solid fa-play"></i>
+                            Generate</button>
+                    </div>
+                    <div id="simulation-content"
+                        style="min-height:300px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2); border-radius:8px;">
+                        <p class="placeholder-text">Simulation output will appear here.</p>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
+
+    <!-- Edit Case Modal -->
+    <div id="modal-edit-case" class="modal hidden">
+        <div class="modal-content glass">
+            <div class="modal-header">
+                <h2><i class="fa-solid fa-pen-to-square"></i> Edit Case Details</h2>
+                <button class="btn-close" id="btn-close-edit-modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label for="edit-officer-name">Officer Name</label>
+                        <input type="text" id="edit-officer-name" placeholder="e.g., Officer Smith">
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-incident-location">Location</label>
+                        <input type="text" id="edit-incident-location" placeholder="e.g., Main St & 5th Ave">
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-incident-date">Incident Date</label>
+                        <input type="date" id="edit-incident-date">
+                    </div>
+                    <div class="form-group full-width">
+                        <label for="edit-officer-notes">Officer Notes</label>
+                        <textarea id="edit-officer-notes" rows="4" placeholder="Update observations..."></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn-secondary" id="btn-cancel-edit">Cancel</button>
+                <button class="btn-primary" id="btn-save-case">Save Changes</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Photos Modal/Overlay -->
+    <div id="modal-add-photos" class="modal hidden">
+        <div class="modal-content glass">
+            <div class="modal-header">
+                <h2><i class="fa-solid fa-images"></i> Add More Photos</h2>
+                <button class="btn-close" id="btn-close-photos-modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="drop-zone" id="edit-drop-zone">
+                    <i class="fa-solid fa-camera"></i>
+                    <p>Drag & drop additional photos here</p>
+                    <span class="sub-text">or click to browse</span>
+                    <input type="file" id="edit-file-input" multiple accept="image/*" capture="environment" hidden>
+                </div>
+                <div id="edit-photo-preview" class="photo-preview hidden">
+                    <div id="edit-photo-thumbnails" class="photo-thumbnails"></div>
+                    <span id="edit-photo-count" class="photo-count">0 photos selected</span>
+                </div>
+                <div id="edit-upload-progress" class="progress-section hidden">
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="edit-upload-progress-fill"></div>
+                    </div>
+                    <span id="edit-upload-status-text">Uploading photos...</span>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn-secondary" id="btn-cancel-photos">Cancel</button>
+                <button class="btn-primary" id="btn-upload-more" disabled>Upload Photos</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/js/alt_app.js"></script>
+</body>
+
+</html>

frontend/js/alt_app.js

@@ -0,0 +1,975 @@
+/**
+ * TraceScene — Frontend Application
+ * 
+ * Single-page application for accident case management,
+ * photo upload, AI analysis, and report viewing.
+ */
+
+const API_BASE = '/api';
+
+// ── State ─────────────────────────────────────────────────────────────
+
+let currentView = 'landing';
+let currentCaseId = null;
+let currentCaseData = null;
+let currentVertical = 'le'; // Store full case data for editing
+let selectedFiles = [];
+let additionalFiles = []; // For add photos modal
+
+// Gradio API Helper for ZeroGPU Event Streams
+async function callGradioApi(apiName, dataArr) {
+    const res = await fetch('/gradio/call/' + apiName, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ data: dataArr })
+    });
+
+    if (!res.ok) {
+        throw new Error('Gradio API Request Failed');
+    }
+
+    const eventObj = await res.json();
+    const eventId = eventObj.event_id;
+
+    return new Promise((resolve, reject) => {
+        const source = new EventSource('/gradio/call/' + apiName + '/' + eventId);
+        source.onmessage = (e) => {
+            const msg = JSON.parse(e.data);
+            if (msg.msg === 'process_completed') {
+                source.close();
+                if (msg.success) {
+                    resolve(msg.output.data);
+                } else {
+                    reject(new Error(msg.output.error || 'Server Error'));
+                }
+            }
+        };
+        source.onerror = (e) => {
+            source.close();
+            reject(new Error('Gradio SSE Connection Failed'));
+        };
+    });
+}
+
+// ── Init ──────────────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+    initNavigation();
+    initDropZone();
+    initButtons();
+    initAccordions();
+    loadHealth();
+    loadCases();
+});
+
+// ── Accordions ────────────────────────────────────────────────────────
+
+function initAccordions() {
+    document.querySelectorAll('.accordion-header').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const item = btn.closest('.accordion-item');
+            const isActive = item.classList.contains('active');
+
+            // Close all other accordions
+            document.querySelectorAll('.accordion-item').forEach(i => {
+                i.classList.remove('active');
+                i.querySelector('.accordion-header').setAttribute('aria-expanded', 'false');
+            });
+
+            // Toggle current
+            if (!isActive) {
+                item.classList.add('active');
+                btn.setAttribute('aria-expanded', 'true');
+            }
+        });
+    });
+}
+
+// ── Navigation ────────────────────────────────────────────────────────
+
+function initNavigation() {
+    document.querySelectorAll('.nav-item[data-view]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const view = btn.dataset.view;
+            switchView(view);
+            document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+        });
+    });
+}
+
+function switchView(viewName) {
+    document.querySelectorAll('.view').forEach(v => {
+        v.classList.remove('active');
+        v.classList.add('hidden');
+    });
+    const target = document.getElementById(`view-${viewName}`);
+    if (target) {
+        target.classList.remove('hidden');
+        target.classList.add('active');
+    }
+    currentView = viewName;
+
+    if (viewName === 'le-dashboard') loadCases('le');
+    if (viewName === 'ins-dashboard') loadCases('ins');
+    if (viewName === 'rules') loadRules();
+}
+
+// ── Buttons ───────────────────────────────────────────────────────────
+
+function initButtons() {
+    // LE Dashboard
+    document.getElementById('btn-refresh-cases')?.addEventListener('click', () => loadCases('le'));
+    document.getElementById('btn-le-empty-new-case')?.addEventListener('click', () => {
+        switchView('le-new-case');
+        document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));
+        document.querySelector('[data-view="le-new-case"]')?.classList.add('active');
+    });
+
+    // INS Dashboard
+    document.getElementById('btn-refresh-cases-ins')?.addEventListener('click', () => loadCases('ins'));
+    document.getElementById('btn-ins-empty-new-case')?.addEventListener('click', () => {
+        switchView('ins-new-case');
+        document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));
+        document.querySelector('[data-view="ins-new-case"]')?.classList.add('active');
+    });
+
+    // New Case Forms
+    document.getElementById('btn-create-case')?.addEventListener('click', () => createCase('le'));
+    document.getElementById('btn-ins-create-case')?.addEventListener('click', () => createCase('ins'));
+
+    // Case Detail
+    document.getElementById('btn-back-dashboard')?.addEventListener('click', () => switchView(currentVertical === 'ins' ? 'ins-dashboard' : 'le-dashboard'));
+    document.getElementById('btn-run-analysis')?.addEventListener('click', runAnalysis);
+    document.getElementById('btn-view-report')?.addEventListener('click', viewReport);
+    document.getElementById('btn-edit-case')?.addEventListener('click', openEditModal);
+    document.getElementById('btn-add-photos-inline')?.addEventListener('click', openAddPhotosModal);
+
+    // Edit Modal
+    document.getElementById('btn-close-edit-modal')?.addEventListener('click', closeEditModal);
+    document.getElementById('btn-cancel-edit')?.addEventListener('click', closeEditModal);
+    document.getElementById('btn-save-case')?.addEventListener('click', saveCaseChanges);
+
+    // Photos Modal
+    document.getElementById('btn-close-photos-modal')?.addEventListener('click', closePhotosModal);
+    document.getElementById('btn-cancel-photos')?.addEventListener('click', closePhotosModal);
+    document.getElementById('btn-upload-more')?.addEventListener('click', uploadMorePhotos);
+
+    // Chat and Simulation Logic
+    document.getElementById('btn-chat-send')?.addEventListener('click', sendChatMessage);
+    document.getElementById('chat-input')?.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') sendChatMessage();
+    });
+    document.getElementById('btn-sim-generate')?.addEventListener('click', generateSimulation);
+
+    // Form logic
+    document.getElementById('case-number')?.addEventListener('input', () => validateForm('le'));
+    document.getElementById('ins-case-number')?.addEventListener('input', () => validateForm('ins'));
+    initEditDropZone();
+}
+
+function initEditDropZone() {
+    const dropZone = document.getElementById('edit-drop-zone');
+    const fileInput = document.getElementById('edit-file-input');
+    if (!dropZone || !fileInput) return;
+
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        handleAdditionalFiles(Array.from(e.dataTransfer.files));
+    });
+    fileInput.addEventListener('change', () => {
+        handleAdditionalFiles(Array.from(fileInput.files));
+    });
+}
+
+function validateForm(vertical = 'le') {
+    const cid = vertical === 'le' ? 'case-number' : 'ins-case-number';
+    const bid = vertical === 'le' ? 'btn-create-case' : 'btn-ins-create-case';
+    const caseNum = document.getElementById(cid)?.value.trim();
+    const btn = document.getElementById(bid);
+    if (btn) btn.disabled = !caseNum;
+}
+
+// ── Health ─────────────────────────────────────────────────────────────
+
+async function loadHealth() {
+    try {
+        const resp = await fetch(`${API_BASE}/health`);
+        const data = await resp.json();
+        document.getElementById('status-model').textContent = data.model_loaded ? '✓ Ready' : '✗ Not loaded';
+        document.getElementById('status-model').style.color = data.model_loaded ? '#22c55e' : '#ef4444';
+        document.getElementById('status-device').textContent = data.device || '—';
+        document.getElementById('status-rules').textContent = `${data.rules_loaded} rules`;
+    } catch {
+        document.getElementById('status-model').textContent = '✗ Offline';
+        document.getElementById('status-model').style.color = '#ef4444';
+    }
+}
+
+// ── Cases ─────────────────────────────────────────────────────────────
+
+async function loadCases(vertical = 'le') {
+    currentVertical = vertical;
+    try {
+        const resp = await fetch(`${API_BASE}/cases`);
+        const data = await resp.json();
+        renderCases(data.cases || [], vertical);
+    } catch (e) {
+        showToast('Failed to load cases', 'error');
+    }
+}
+
+function renderCases(cases, vertical) {
+    const grid = document.getElementById(vertical === 'le' ? 'le-cases-grid' : 'ins-cases-grid');
+    const empty = document.getElementById(vertical === 'le' ? 'le-empty-state-dashboard' : 'ins-empty-state-dashboard');
+
+    if (!cases.length) {
+        grid.innerHTML = '';
+        grid.style.display = 'none';
+        empty.style.display = 'flex';
+        return;
+    }
+
+    grid.style.display = 'grid';
+    empty.style.display = 'none';
+
+    grid.innerHTML = cases.map(c => `
+        <div class="case-card" onclick="openCase(${c.id})">
+            <button class="btn-delete-card" onclick="event.stopPropagation(); deleteCase(${c.id}, '${escHtml(c.case_number)}', currentVertical)" title="Delete Case">
+                <i class="fa-solid fa-trash-can"></i>
+            </button>
+            <div class="card-header">
+                <span class="case-number">${escHtml(c.case_number)}</span>
+                <span class="status-badge ${c.status}">
+                    <i class="fa-solid fa-circle"></i> ${c.status}
+                </span>
+            </div>
+            <div class="case-meta">
+                ${c.officer_name ? `<span><i class="fa-solid fa-user-shield"></i> ${escHtml(c.officer_name)}</span>` : ''}
+                ${c.location ? `<span><i class="fa-solid fa-location-dot"></i> ${escHtml(c.location)}</span>` : ''}
+                ${c.incident_date ? `<span><i class="fa-solid fa-calendar"></i> ${c.incident_date}</span>` : ''}
+            </div>
+            <div class="card-footer">
+                <span class="photo-count"><i class="fa-solid fa-camera"></i> ${c.photo_count || 0} photos</span>
+                <span style="font-size:0.72rem;color:var(--text-muted)">${formatDate(c.created_at)}</span>
+            </div>
+        </div>
+    `).join('');
+}
+
+async function deleteCase(id, caseNum, vertical = 'le') {
+    if (!confirm(`Are you sure you want to delete Case ${caseNum}? This will permanently remove all photos and analysis data.`)) {
+        return;
+    }
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${id}`, { method: 'DELETE' });
+        if (!resp.ok) throw new Error('Delete failed');
+        showToast(`Case ${caseNum} deleted`, 'success');
+        loadCases();
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
+}
+
+// ── Create Case ───────────────────────────────────────────────────────
+
+async function createCase(vertical = 'le') {
+    const cid = vertical === 'le' ? 'case-number' : 'ins-case-number';
+    const oid = vertical === 'le' ? 'officer-name' : 'ins-officer-name';
+    const lid = vertical === 'le' ? 'incident-location' : 'ins-incident-location';
+    const did = vertical === 'le' ? 'incident-date' : 'ins-incident-date';
+    const nid = vertical === 'le' ? 'officer-notes' : 'ins-officer-notes';
+
+    const caseNumber = document.getElementById(cid).value.trim();
+    if (!caseNumber) return showToast('Case number is required', 'error');
+
+    const formData = new FormData();
+    formData.append('case_number', caseNumber);
+    formData.append('officer_name', document.getElementById(oid).value.trim());
+    formData.append('location', document.getElementById(lid).value.trim());
+    formData.append('incident_date', document.getElementById(did).value);
+    formData.append('notes', document.getElementById(nid).value.trim());
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases`, { method: 'POST', body: formData });
+        if (!resp.ok) {
+            const err = await resp.json();
+            throw new Error(err.detail || 'Failed to create case');
+        }
+        const data = await resp.json();
+        const caseId = data.id;
+
+        showToast('Case created', 'success');
+
+        // Upload photos if selected
+        if (selectedFiles.length > 0) {
+            await uploadPhotos(caseId, vertical);
+        }
+
+        // Clear form
+        document.getElementById(cid).value = '';
+        document.getElementById(oid).value = '';
+        document.getElementById(lid).value = '';
+        document.getElementById(did).value = '';
+        document.getElementById(nid).value = '';
+        selectedFiles = [];
+        document.getElementById(vertical === 'le' ? 'photo-preview' : 'ins-photo-preview').classList.add('hidden');
+
+        // Open the case detail
+        openCase(caseId);
+
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
+}
+
+async function uploadPhotos(caseId, vertical = 'le') {
+    const pfx = vertical === 'le' ? '' : 'ins-';
+    const progressSection = document.getElementById(`${pfx}upload-progress`);
+    const progressFill = document.getElementById(`${pfx}upload-progress-fill`);
+    const statusText = document.getElementById(`${pfx}upload-status-text`);
+
+    progressSection.classList.remove('hidden');
+    statusText.textContent = `Uploading ${selectedFiles.length} photos...`;
+
+    const formData = new FormData();
+    selectedFiles.forEach(f => formData.append('files', f));
+
+    try {
+        progressFill.style.width = '50%';
+        const resp = await fetch(`${API_BASE}/cases/${caseId}/photos`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!resp.ok) throw new Error('Upload failed');
+
+        const data = await resp.json();
+        progressFill.style.width = '100%';
+        statusText.textContent = `${data.count} photos uploaded ✓`;
+        showToast(`${data.count} photos uploaded`, 'success');
+        return data;
+    } catch (e) {
+        statusText.textContent = 'Upload failed';
+        showToast('Photo upload failed', 'error');
+        throw e;
+    }
+}
+
+// ── Drop Zone ─────────────────────────────────────────────────────────
+
+function initDropZone() {
+    setupZone('drop-zone', 'file-input', 'photo-preview', 'photo-thumbnails', 'photo-count');
+    setupZone('ins-drop-zone', 'ins-file-input', 'ins-photo-preview', 'ins-photo-thumbnails', 'ins-photo-count');
+}
+
+function setupZone(dzId, inId, prvId, tnId, ctId) {
+    const dropZone = document.getElementById(dzId);
+    const fileInput = document.getElementById(inId);
+    if (!dropZone || !fileInput) return;
+
+    dropZone.addEventListener('click', () => fileInput.click());
+
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        handleFiles(Array.from(e.dataTransfer.files), prvId, tnId, ctId);
+    });
+
+    fileInput.addEventListener('change', () => {
+        handleFiles(Array.from(fileInput.files), prvId, tnId, ctId, prefix);
+    });
+}
+
+function handleFiles(files, prvId = 'photo-preview', tnId = 'photo-thumbnails', ctId = 'photo-count', prefix = 'le') {
+    const imageFiles = files.filter(f => f.type.startsWith('image/'));
+    if (!imageFiles.length) return showToast('No image files found', 'error');
+
+    selectedFiles = imageFiles.slice(0, 20);  // Max 20
+
+    // Show previews
+    const preview = document.getElementById(prvId);
+    const thumbs = document.getElementById(tnId);
+    const count = document.getElementById(ctId);
+
+    preview.classList.remove('hidden');
+    count.textContent = `${selectedFiles.length} photo${selectedFiles.length > 1 ? 's' : ''} selected`;
+
+    thumbs.innerHTML = '';
+    selectedFiles.forEach(file => {
+        const div = document.createElement('div');
+        div.className = 'photo-thumbnail';
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(file);
+        div.appendChild(img);
+        thumbs.appendChild(div);
+    });
+
+    validateForm(prefix);
+}
+
+// ── Open Case Detail ──────────────────────────────────────────────────
+
+async function openCase(caseId) {
+    currentCaseId = caseId;
+    switchView('case-detail');
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${caseId}`);
+        const data = await resp.json();
+        currentCaseData = data.case;
+        renderCaseDetail(data);
+    } catch (e) {
+        showToast('Failed to load case', 'error');
+    }
+}
+
+// ── Edit Case ─────────────────────────────────────────────────────────
+
+function openEditModal() {
+    if (!currentCaseData) return;
+    document.getElementById('edit-officer-name').value = currentCaseData.officer_name || '';
+    document.getElementById('edit-incident-location').value = currentCaseData.location || '';
+    document.getElementById('edit-incident-date').value = currentCaseData.incident_date || '';
+    document.getElementById('edit-officer-notes').value = currentCaseData.notes || '';
+    document.getElementById('modal-edit-case').classList.remove('hidden');
+}
+
+function closeEditModal() {
+    document.getElementById('modal-edit-case').classList.add('hidden');
+}
+
+async function saveCaseChanges() {
+    if (!currentCaseId) return;
+
+    const formData = new FormData();
+    formData.append('officer_name', document.getElementById('edit-officer-name').value.trim());
+    formData.append('location', document.getElementById('edit-incident-location').value.trim());
+    formData.append('incident_date', document.getElementById('edit-incident-date').value);
+    formData.append('notes', document.getElementById('edit-officer-notes').value.trim());
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}`, {
+            method: 'PUT',
+            body: formData
+        });
+
+        if (!resp.ok) throw new Error('Failed to update case');
+
+        showToast('Case updated', 'success');
+        closeEditModal();
+        openCase(currentCaseId); // Refresh
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
+}
+
+// ── Add Photos ─────────────────────────────��──────────────────────────
+
+function openAddPhotosModal() {
+    additionalFiles = [];
+    document.getElementById('edit-photo-preview').classList.add('hidden');
+    document.getElementById('edit-upload-progress').classList.add('hidden');
+    document.getElementById('btn-upload-more').disabled = true;
+    document.getElementById('modal-add-photos').classList.remove('hidden');
+}
+
+function closePhotosModal() {
+    document.getElementById('modal-add-photos').classList.add('hidden');
+}
+
+function handleAdditionalFiles(files) {
+    const imageFiles = files.filter(f => f.type.startsWith('image/'));
+    if (!imageFiles.length) return showToast('No image files found', 'error');
+
+    additionalFiles = imageFiles.slice(0, 20);
+
+    const preview = document.getElementById('edit-photo-preview');
+    const thumbs = document.getElementById('edit-photo-thumbnails');
+    const count = document.getElementById('edit-photo-count');
+
+    preview.classList.remove('hidden');
+    count.textContent = `${additionalFiles.length} photo${additionalFiles.length > 1 ? 's' : ''} selected`;
+
+    thumbs.innerHTML = '';
+    additionalFiles.forEach(file => {
+        const div = document.createElement('div');
+        div.className = 'photo-thumbnail';
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(file);
+        div.appendChild(img);
+        thumbs.appendChild(div);
+    });
+
+    document.getElementById('btn-upload-more').disabled = additionalFiles.length === 0;
+}
+
+async function uploadMorePhotos() {
+    if (!currentCaseId || !additionalFiles.length) return;
+
+    const progressSection = document.getElementById('edit-upload-progress');
+    const progressFill = document.getElementById('edit-upload-progress-fill');
+    const statusText = document.getElementById('edit-upload-status-text');
+
+    progressSection.classList.remove('hidden');
+    document.getElementById('btn-upload-more').disabled = true;
+
+    const formData = new FormData();
+    additionalFiles.forEach(f => formData.append('files', f));
+
+    try {
+        progressFill.style.width = '50%';
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}/photos`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!resp.ok) throw new Error('Upload failed');
+
+        progressFill.style.width = '100%';
+        statusText.textContent = `Upload complete ✓`;
+        showToast('Photos added successfully', 'success');
+
+        setTimeout(() => {
+            closePhotosModal();
+            openCase(currentCaseId); // Refresh
+        }, 1000);
+    } catch (e) {
+        statusText.textContent = 'Upload failed';
+        showToast('Photo upload failed', 'error');
+        document.getElementById('btn-upload-more').disabled = false;
+    }
+}
+
+function renderCaseDetail(data) {
+    const c = data.case;
+
+    // Header
+    document.getElementById('case-detail-title').textContent = `Case: ${c.case_number}`;
+
+    // Info bar
+    document.getElementById('detail-case-number').textContent = c.case_number;
+    document.getElementById('detail-officer').textContent = c.officer_name || 'N/A';
+    document.getElementById('detail-location').textContent = c.location || 'N/A';
+    document.getElementById('detail-date').textContent = c.incident_date || 'N/A';
+    document.getElementById('detail-status').textContent = c.status;
+
+    const statusChip = document.getElementById('detail-status-chip');
+    statusChip.className = `info-chip status-chip ${c.status}`;
+
+    // Enable/disable buttons
+    const btnAnalysis = document.getElementById('btn-run-analysis');
+    const btnReport = document.getElementById('btn-view-report');
+    btnAnalysis.disabled = !data.photos?.length;
+    btnReport.disabled = c.status !== 'complete';
+
+    // Photos
+    const photosGrid = document.getElementById('detail-photos-grid');
+    document.getElementById('photo-badge').textContent = data.photos?.length || 0;
+
+    if (data.photos?.length) {
+        photosGrid.innerHTML = data.photos.map(p => `
+            <div class="detail-photo">
+                <img src="/${p.filepath}" alt="${escHtml(p.filename)}" onerror="this.onerror=null; this.src='/static/placeholder.jpg';" loading="lazy">
+            </div>
+        `).join('');
+    } else {
+        photosGrid.innerHTML = '<p class="placeholder-text">No photos uploaded yet.</p>';
+    }
+
+    // Analyses
+    const analysisContent = document.getElementById('analysis-content');
+    if (data.analyses?.length) {
+        analysisContent.innerHTML = data.analyses.map(a => `
+            <div class="analysis-photo-section">
+                <div class="analysis-photo-label">📷 ${escHtml(a.filename || 'Photo')}</div>
+                <pre>${escHtml(a.raw_analysis || '')}</pre>
+            </div>
+        `).join('');
+    } else {
+        analysisContent.innerHTML = '<p class="placeholder-text">Run analysis to see AI observations.</p>';
+    }
+
+    // Violations
+    const violationsList = document.getElementById('violations-list');
+    const violationBadge = document.getElementById('violation-badge');
+    violationBadge.textContent = data.violations?.length || 0;
+
+    if (data.violations?.length) {
+        violationsList.innerHTML = data.violations.map(v => `
+            <div class="violation-card ${v.severity || 'MEDIUM'}">
+                <div class="violation-header">
+                    <span class="violation-title">${escHtml(v.rule_title)}</span>
+                    <span class="severity-tag ${v.severity || 'MEDIUM'}">${v.severity || 'MEDIUM'}</span>
+                </div>
+                <div class="violation-meta">
+                    <span><i class="fa-solid fa-hashtag"></i> ${v.rule_id}</span>
+                    <span><i class="fa-solid fa-percent"></i> ${Math.round(v.confidence * 100)}% confidence</span>
+                    ${v.party_label ? `<span><i class="fa-solid fa-car"></i> ${escHtml(v.party_label)}</span>` : ''}
+                </div>
+                ${v.evidence_summary ? `<div class="violation-evidence">${escHtml(v.evidence_summary)}</div>` : ''}
+            </div>
+        `).join('');
+    } else {
+        violationsList.innerHTML = '<p class="placeholder-text">No violations detected yet.</p>';
+    }
+
+    // Fault Analysis
+    renderFaultAnalysis(data.fault_analysis, data.parties);
+}
+
+function renderFaultAnalysis(fault, parties) {
+    const content = document.getElementById('fault-content');
+
+    if (!fault) {
+        content.innerHTML = '<p class="placeholder-text">Run analysis to determine fault.</p>';
+        return;
+    }
+
+    let html = '';
+
+    // Fault distribution bars
+    if (fault.fault_distribution_json) {
+        let dist = {};
+        try {
+            dist = typeof fault.fault_distribution_json === 'string'
+                ? JSON.parse(fault.fault_distribution_json)
+                : fault.fault_distribution_json;
+        } catch { dist = {}; }
+
+        const entries = Object.entries(dist);
+        if (entries.length) {
+            html += '<div class="fault-party-bars">';
+            entries.forEach(([label, pct], i) => {
+                html += `
+                    <div class="party-bar">
+                        <div class="party-bar-label">
+                            <span class="party-name">${escHtml(label)}</span>
+                            <span class="party-pct">${pct}%</span>
+                        </div>
+                        <div class="party-bar-track">
+                            <div class="party-bar-fill ${i === 0 ? 'primary' : 'secondary'}" 
+                                 style="width: ${pct}%"></div>
+                        </div>
+                    </div>
+                `;
+            });
+            html += '</div>';
+        }
+    }
+
+    // Probable cause
+    if (fault.probable_cause) {
+        html += `
+            <div class="fault-cause">
+                <h4><i class="fa-solid fa-magnifying-glass-chart"></i> Probable Cause</h4>
+                <p>${escHtml(fault.probable_cause)}</p>
+            </div>
+        `;
+    }
+
+    // Confidence
+    if (fault.overall_confidence != null) {
+        const pct = Math.round(fault.overall_confidence * 100);
+        html += `
+            <div class="confidence-meter">
+                <span>Confidence:</span>
+                <div class="meter-bar">
+                    <div class="meter-fill" style="width: ${pct}%"></div>
+                </div>
+                <span>${pct}%</span>
+            </div>
+        `;
+    }
+
+    // Summary
+    if (fault.analysis_summary) {
+        html += `<p style="margin-top:0.8rem;font-size:0.82rem;color:var(--text-secondary)">
+            ${escHtml(fault.analysis_summary)}</p>`;
+    }
+
+    content.innerHTML = html || '<p class="placeholder-text">No fault analysis available.</p>';
+}
+
+// ── Run Analysis ──────────────────────────────────────────────────────
+
+async function runAnalysis() {
+    if (!currentCaseId) return;
+
+    const overlay = document.getElementById('analysis-overlay');
+    const stepEl = document.getElementById('analysis-step');
+    const detailEl = document.getElementById('analysis-detail');
+
+    overlay.classList.remove('hidden');
+    stepEl.textContent = 'Analyzing accident scene photos...';
+    detailEl.textContent = 'Running AI vision analysis on each photo. This may take several minutes.';
+
+    try {
+        // Use Gradio API to trigger ZeroGPU explicitly
+        const data = await callGradioApi('run_analysis', [currentCaseId]);
+
+        overlay.classList.add('hidden');
+        showToast(`Analysis complete! Status: ${data[0]}`, 'success');
+
+        // Reload case detail
+        openCase(currentCaseId);
+
+    } catch (e) {
+        overlay.classList.add('hidden');
+        showToast(`Analysis failed: ${e.message}`, 'error');
+    }
+}
+
+// ── Chat and Simulation ────────────────────��──────────────────────────
+
+let chatHistory = [];
+let currentSystemCtx = "You are TraceScene AI assistant. Answer concisely and accurately based on context provided.";
+
+async function sendChatMessage() {
+    const input = document.getElementById('chat-input');
+    const msg = input.value.trim();
+    if (!msg) return;
+
+    input.value = '';
+    const chatContainer = document.getElementById('chat-messages');
+
+    // Add user message
+    chatContainer.innerHTML += `
+        <div class="chat-message user" style="text-align:right; margin:10px 0;">
+            <span style="background:var(--primary); color:white; padding:8px 12px; border-radius:15px; display:inline-block;">${escHtml(msg)}</span>
+        </div>
+    `;
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+
+    // Call Gradio Chat
+    try {
+        const responseData = await callGradioApi('chat', [msg, chatHistory, currentSystemCtx]);
+        // chat output expects: [updated_history, clean_input, currentSystemCtx]
+        const updatedHistory = responseData[0];
+        const lastBotMsg = updatedHistory[updatedHistory.length - 1][1];
+        chatHistory = updatedHistory;
+
+        chatContainer.innerHTML += `
+            <div class="chat-message assistant" style="text-align:left; margin:10px 0; max-width:80%;">
+                <i class="fa-solid fa-robot" style="margin-right:10px;"></i>
+                <span style="background:rgba(255,255,255,0.1); padding:8px 12px; border-radius:15px; display:inline-block;">${escHtml(lastBotMsg)}</span>
+            </div>
+        `;
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+
+    } catch (err) {
+        showToast('Chat failed: ' + err.message, 'error');
+    }
+}
+
+async function generateSimulation() {
+    const caseIdInput = document.getElementById('sim-case-id').value;
+    if (!caseIdInput) {
+        showToast('Please enter a Case ID', 'error');
+        return;
+    }
+
+    const contentDiv = document.getElementById('simulation-content');
+    contentDiv.innerHTML = '<div class="spinner-large"></div>';
+
+    try {
+        const simData = await callGradioApi('animation', [parseInt(caseIdInput)]);
+        // The animation out is index 0
+        contentDiv.innerHTML = simData[0];
+    } catch (err) {
+        contentDiv.innerHTML = `<p class="placeholder-text" style="color:red;">Error: ${err.message}</p>`;
+    }
+}
+
+// ── Report ────────────────────────────────────────────────────────────
+
+async function viewReport() {
+    if (!currentCaseId) return;
+
+    switchView('report');
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}/report`);
+        const report = await resp.json();
+        renderReport(report);
+    } catch (e) {
+        showToast('Failed to load report', 'error');
+    }
+}
+
+function renderReport(report) {
+    const content = document.getElementById('report-content');
+
+    let html = `
+        <div class="report-header">
+            <h2><i class="fa-solid fa-shield-halved"></i> ${report.report_type || 'Incident Report'}</h2>
+            <p class="report-subtitle">Case ${escHtml(report.case?.case_number || '')} • Generated by AI</p>
+        </div>
+
+        <div class="report-disclaimer">
+            <i class="fa-solid fa-triangle-exclamation"></i> ${escHtml(report.disclaimer || '')}
+        </div>
+    `;
+
+    // Stats
+    const stats = report.statistics || {};
+    html += `
+        <div class="report-stat-grid">
+            <div class="report-stat">
+                <div class="stat-number">${stats.total_photos || 0}</div>
+                <div class="stat-label">Photos</div>
+            </div>
+            <div class="report-stat">
+                <div class="stat-number">${stats.total_violations || 0}</div>
+                <div class="stat-label">Violations</div>
+            </div>
+            <div class="report-stat">
+                <div class="stat-number">${stats.critical_violations || 0}</div>
+                <div class="stat-label">Critical</div>
+            </div>
+            <div class="report-stat">
+                <div class="stat-number">${stats.parties_identified || 0}</div>
+                <div class="stat-label">Parties</div>
+            </div>
+        </div>
+    `;
+
+    // Case Info
+    html += `<h3>Case Information</h3>`;
+    html += `<p><strong>Case Number:</strong> ${escHtml(report.case?.case_number || 'N/A')}</p>`;
+    html += `<p><strong>Officer:</strong> ${escHtml(report.case?.officer_name || 'N/A')}</p>`;
+    html += `<p><strong>Location:</strong> ${escHtml(report.case?.location || 'N/A')}</p>`;
+    html += `<p><strong>Date:</strong> ${report.case?.incident_date || 'N/A'}</p>`;
+    if (report.case?.notes) html += `<p><strong>Notes:</strong> ${escHtml(report.case.notes)}</p>`;
+
+    // Scene Summary
+    if (report.scene_summary) {
+        html += `<h3>Scene Analysis</h3>`;
+        html += `<p style="white-space:pre-wrap">${escHtml(report.scene_summary)}</p>`;
+    }
+
+    // Parties
+    if (report.parties?.length) {
+        html += `<h3>Parties Involved</h3>`;
+        report.parties.forEach(p => {
+            html += `<h4>${escHtml(p.label)}</h4>`;
+            html += `<p>Type: ${p.vehicle_type || 'Unknown'} • Color: ${p.vehicle_color || 'Unknown'}</p>`;
+        });
+    }
+
+    // Violations
+    if (report.violations?.list?.length) {
+        html += `<h3>Traffic Violations Detected</h3>`;
+        report.violations.list.forEach(v => {
+            html += `
+                <div class="violation-card ${v.severity}" style="margin-bottom:0.5rem">
+                    <div class="violation-header">
+                        <span class="violation-title">${escHtml(v.title)}</span>
+                        <span class="severity-tag ${v.severity}">${v.severity}</span>
+                    </div>
+                    <p style="font-size:0.82rem;color:var(--text-secondary);margin-top:0.3rem">
+                        Party: ${escHtml(v.party)} • Confidence: ${Math.round(v.confidence * 100)}%
+                    </p>
+                    ${v.evidence ? `<p style="font-size:0.78rem;color:var(--text-muted);font-style:italic">${escHtml(v.evidence)}</p>` : ''}
+                </div>
+            `;
+        });
+    }
+
+    // Fault Analysis
+    if (report.fault_analysis?.determined) {
+        html += `<h3>Fault Analysis</h3>`;
+        html += `<p><strong>Primary Fault:</strong> ${escHtml(report.fault_analysis.primary_fault_party || 'Undetermined')}</p>`;
+
+        if (report.fault_analysis.fault_distribution) {
+            html += `<p><strong>Distribution:</strong> `;
+            html += Object.entries(report.fault_analysis.fault_distribution)
+                .map(([k, v]) => `${k}: ${v}%`).join(' • ');
+            html += `</p>`;
+        }
+
+        html += `<p><strong>Confidence:</strong> ${Math.round((report.fault_analysis.overall_confidence || 0) * 100)}%</p>`;
+
+        if (report.fault_analysis.probable_cause) {
+            html += `<h4>Probable Cause</h4>`;
+            html += `<p>${escHtml(report.fault_analysis.probable_cause)}</p>`;
+        }
+    }
+
+    content.innerHTML = html;
+}
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+async function loadRules() {
+    try {
+        const resp = await fetch(`${API_BASE}/rules`);
+        const data = await resp.json();
+        renderRules(data);
+    } catch (e) {
+        showToast('Failed to load rules', 'error');
+    }
+}
+
+function renderRules(data) {
+    const content = document.getElementById('rules-content');
+
+    if (!data.categories?.length) {
+        content.innerHTML = '<p class="placeholder-text">No rules loaded.</p>';
+        return;
+    }
+
+    content.innerHTML = data.categories.map(cat => `
+        <div class="rule-category">
+            <div class="rule-category-header">
+                <i class="fa-solid fa-gavel"></i>
+                ${escHtml(cat.name)}
+                <span class="rule-count">${cat.rule_count} rules</span>
+            </div>
+            <div class="rule-list">
+                ${cat.rules.map(r => `
+                    <div class="rule-item">
+                        <span class="rule-id">${r.id}</span>
+                        <span>${escHtml(r.title)}</span>
+                        <span class="severity-tag ${r.severity}" style="margin-left:auto">${r.severity}</span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    `).join('');
+}
+
+// ── Toast ─────────────────────────────────────────────────────────────
+
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(() => toast.remove(), 4000);
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+function escHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+function formatDate(dateStr) {
+    if (!dateStr) return '';
+    try {
+        const d = new Date(dateStr);
+        return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    } catch { return dateStr; }
+}

frontend/js/app.js

@@ -0,0 +1,852 @@
+/**
+ * TraceScene — Frontend Application
+ * 
+ * Single-page application for accident case management,
+ * photo upload, AI analysis, and report viewing.
+ */
+
+const API_BASE = '/api';
+
+// ── State ─────────────────────────────────────────────────────────────
+
+let currentView = 'landing';
+let currentCaseId = null;
+let currentCaseData = null; // Store full case data for editing
+let selectedFiles = [];
+let additionalFiles = []; // For add photos modal
+
+// ── Init ──────────────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+    initNavigation();
+    initDropZone();
+    initButtons();
+    initAccordions();
+    loadHealth();
+    loadCases();
+});
+
+// ── Accordions ────────────────────────────────────────────────────────
+
+function initAccordions() {
+    document.querySelectorAll('.accordion-header').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const item = btn.closest('.accordion-item');
+            const isActive = item.classList.contains('active');
+
+            // Close all other accordions
+            document.querySelectorAll('.accordion-item').forEach(i => {
+                i.classList.remove('active');
+                i.querySelector('.accordion-header').setAttribute('aria-expanded', 'false');
+            });
+
+            // Toggle current
+            if (!isActive) {
+                item.classList.add('active');
+                btn.setAttribute('aria-expanded', 'true');
+            }
+        });
+    });
+}
+
+// ── Navigation ────────────────────────────────────────────────────────
+
+function initNavigation() {
+    document.querySelectorAll('.nav-item[data-view]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const view = btn.dataset.view;
+            switchView(view);
+            document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+        });
+    });
+}
+
+function switchView(viewName) {
+    document.querySelectorAll('.view').forEach(v => {
+        v.classList.remove('active');
+        v.classList.add('hidden');
+    });
+    const target = document.getElementById(`view-${viewName}`);
+    if (target) {
+        target.classList.remove('hidden');
+        target.classList.add('active');
+    }
+    currentView = viewName;
+
+    if (viewName === 'dashboard') loadCases();
+    if (viewName === 'rules') loadRules();
+}
+
+// ── Buttons ───────────────────────────────────────────────────────────
+
+function initButtons() {
+    // Dashboard
+    document.getElementById('btn-refresh-cases')?.addEventListener('click', loadCases);
+    document.getElementById('btn-empty-new-case')?.addEventListener('click', () => {
+        switchView('new-case');
+        document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));
+        document.querySelector('[data-view="new-case"]')?.classList.add('active');
+    });
+
+    // New Case
+    document.getElementById('btn-create-case')?.addEventListener('click', createCase);
+
+    // Case Detail  
+    document.getElementById('btn-back-dashboard')?.addEventListener('click', () => switchView('dashboard'));
+    document.getElementById('btn-run-analysis')?.addEventListener('click', runAnalysis);
+    document.getElementById('btn-view-report')?.addEventListener('click', viewReport);
+    document.getElementById('btn-edit-case')?.addEventListener('click', openEditModal);
+    document.getElementById('btn-add-photos-inline')?.addEventListener('click', openAddPhotosModal);
+
+    // Edit Modal
+    document.getElementById('btn-close-edit-modal')?.addEventListener('click', closeEditModal);
+    document.getElementById('btn-cancel-edit')?.addEventListener('click', closeEditModal);
+    document.getElementById('btn-save-case')?.addEventListener('click', saveCaseChanges);
+
+    // Photos Modal
+    document.getElementById('btn-close-photos-modal')?.addEventListener('click', closePhotosModal);
+    document.getElementById('btn-cancel-photos')?.addEventListener('click', closePhotosModal);
+    document.getElementById('btn-upload-more')?.addEventListener('click', uploadMorePhotos);
+
+    // Form logic
+    document.getElementById('case-number')?.addEventListener('input', validateForm);
+    initEditDropZone();
+}
+
+function initEditDropZone() {
+    const dropZone = document.getElementById('edit-drop-zone');
+    const fileInput = document.getElementById('edit-file-input');
+    if (!dropZone || !fileInput) return;
+
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        handleAdditionalFiles(Array.from(e.dataTransfer.files));
+    });
+    fileInput.addEventListener('change', () => {
+        handleAdditionalFiles(Array.from(fileInput.files));
+    });
+}
+
+function validateForm() {
+    const caseNum = document.getElementById('case-number')?.value.trim();
+    const btn = document.getElementById('btn-create-case');
+    if (btn) btn.disabled = !caseNum;
+}
+
+// ── Health ─────────────────────────────────────────────────────────────
+
+async function loadHealth() {
+    try {
+        const resp = await fetch(`${API_BASE}/health`);
+        const data = await resp.json();
+        document.getElementById('status-model').textContent = data.model_loaded ? '✓ Ready' : '✗ Not loaded';
+        document.getElementById('status-model').style.color = data.model_loaded ? '#22c55e' : '#ef4444';
+        document.getElementById('status-device').textContent = data.device || '—';
+        document.getElementById('status-rules').textContent = `${data.rules_loaded} rules`;
+    } catch {
+        document.getElementById('status-model').textContent = '✗ Offline';
+        document.getElementById('status-model').style.color = '#ef4444';
+    }
+}
+
+// ── Cases ─────────────────────────────────────────────────────────────
+
+async function loadCases() {
+    try {
+        const resp = await fetch(`${API_BASE}/cases`);
+        const data = await resp.json();
+        renderCases(data.cases || []);
+    } catch (e) {
+        showToast('Failed to load cases', 'error');
+    }
+}
+
+function renderCases(cases) {
+    const grid = document.getElementById('cases-grid');
+    const empty = document.getElementById('empty-state-dashboard');
+
+    if (!cases.length) {
+        grid.innerHTML = '';
+        grid.style.display = 'none';
+        empty.style.display = 'flex';
+        return;
+    }
+
+    grid.style.display = 'grid';
+    empty.style.display = 'none';
+
+    grid.innerHTML = cases.map(c => `
+        <div class="case-card" onclick="openCase(${c.id})">
+            <button class="btn-delete-card" onclick="event.stopPropagation(); deleteCase(${c.id}, '${escHtml(c.case_number)}')" title="Delete Case">
+                <i class="fa-solid fa-trash-can"></i>
+            </button>
+            <div class="card-header">
+                <span class="case-number">${escHtml(c.case_number)}</span>
+                <span class="status-badge ${c.status}">
+                    <i class="fa-solid fa-circle"></i> ${c.status}
+                </span>
+            </div>
+            <div class="case-meta">
+                ${c.officer_name ? `<span><i class="fa-solid fa-user-shield"></i> ${escHtml(c.officer_name)}</span>` : ''}
+                ${c.location ? `<span><i class="fa-solid fa-location-dot"></i> ${escHtml(c.location)}</span>` : ''}
+                ${c.incident_date ? `<span><i class="fa-solid fa-calendar"></i> ${c.incident_date}</span>` : ''}
+            </div>
+            <div class="card-footer">
+                <span class="photo-count"><i class="fa-solid fa-camera"></i> ${c.photo_count || 0} photos</span>
+                <span style="font-size:0.72rem;color:var(--text-muted)">${formatDate(c.created_at)}</span>
+            </div>
+        </div>
+    `).join('');
+}
+
+async function deleteCase(id, caseNum) {
+    if (!confirm(`Are you sure you want to delete Case ${caseNum}? This will permanently remove all photos and analysis data.`)) {
+        return;
+    }
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${id}`, { method: 'DELETE' });
+        if (!resp.ok) throw new Error('Delete failed');
+        showToast(`Case ${caseNum} deleted`, 'success');
+        loadCases();
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
+}
+
+// ── Create Case ───────────────────────────────────────────────────────
+
+async function createCase() {
+    const caseNumber = document.getElementById('case-number').value.trim();
+    if (!caseNumber) return showToast('Case number is required', 'error');
+
+    const formData = new FormData();
+    formData.append('case_number', caseNumber);
+    formData.append('officer_name', document.getElementById('officer-name').value.trim());
+    formData.append('location', document.getElementById('incident-location').value.trim());
+    formData.append('incident_date', document.getElementById('incident-date').value);
+    formData.append('notes', document.getElementById('officer-notes').value.trim());
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases`, { method: 'POST', body: formData });
+        if (!resp.ok) {
+            const err = await resp.json();
+            throw new Error(err.detail || 'Failed to create case');
+        }
+        const data = await resp.json();
+        const caseId = data.id;
+
+        showToast('Case created', 'success');
+
+        // Upload photos if selected
+        if (selectedFiles.length > 0) {
+            await uploadPhotos(caseId);
+        }
+
+        // Clear form
+        document.getElementById('case-number').value = '';
+        document.getElementById('officer-name').value = '';
+        document.getElementById('incident-location').value = '';
+        document.getElementById('incident-date').value = '';
+        document.getElementById('officer-notes').value = '';
+        selectedFiles = [];
+        document.getElementById('photo-preview').classList.add('hidden');
+
+        // Open the case detail
+        openCase(caseId);
+
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
+}
+
+async function uploadPhotos(caseId) {
+    const progressSection = document.getElementById('upload-progress');
+    const progressFill = document.getElementById('upload-progress-fill');
+    const statusText = document.getElementById('upload-status-text');
+
+    progressSection.classList.remove('hidden');
+    statusText.textContent = `Uploading ${selectedFiles.length} photos...`;
+
+    const formData = new FormData();
+    selectedFiles.forEach(f => formData.append('files', f));
+
+    try {
+        progressFill.style.width = '50%';
+        const resp = await fetch(`${API_BASE}/cases/${caseId}/photos`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!resp.ok) throw new Error('Upload failed');
+
+        const data = await resp.json();
+        progressFill.style.width = '100%';
+        statusText.textContent = `${data.count} photos uploaded ✓`;
+        showToast(`${data.count} photos uploaded`, 'success');
+        return data;
+    } catch (e) {
+        statusText.textContent = 'Upload failed';
+        showToast('Photo upload failed', 'error');
+        throw e;
+    }
+}
+
+// ── Drop Zone ─────────────────────────────────────────────────────────
+
+function initDropZone() {
+    const dropZone = document.getElementById('drop-zone');
+    const fileInput = document.getElementById('file-input');
+    if (!dropZone || !fileInput) return;
+
+    dropZone.addEventListener('click', () => fileInput.click());
+
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        handleFiles(Array.from(e.dataTransfer.files));
+    });
+
+    fileInput.addEventListener('change', () => {
+        handleFiles(Array.from(fileInput.files));
+    });
+}
+
+function handleFiles(files) {
+    const imageFiles = files.filter(f => f.type.startsWith('image/'));
+    if (!imageFiles.length) return showToast('No image files found', 'error');
+
+    selectedFiles = imageFiles.slice(0, 20);  // Max 20
+
+    // Show previews
+    const preview = document.getElementById('photo-preview');
+    const thumbs = document.getElementById('photo-thumbnails');
+    const count = document.getElementById('photo-count');
+
+    preview.classList.remove('hidden');
+    count.textContent = `${selectedFiles.length} photo${selectedFiles.length > 1 ? 's' : ''} selected`;
+
+    thumbs.innerHTML = '';
+    selectedFiles.forEach(file => {
+        const div = document.createElement('div');
+        div.className = 'photo-thumbnail';
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(file);
+        div.appendChild(img);
+        thumbs.appendChild(div);
+    });
+
+    validateForm();
+}
+
+// ── Open Case Detail ──────────────────────────────────────────────────
+
+async function openCase(caseId) {
+    currentCaseId = caseId;
+    switchView('case-detail');
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${caseId}`);
+        const data = await resp.json();
+        currentCaseData = data.case;
+        renderCaseDetail(data);
+    } catch (e) {
+        showToast('Failed to load case', 'error');
+    }
+}
+
+// ── Edit Case ─────────────────────────────────────────────────────────
+
+function openEditModal() {
+    if (!currentCaseData) return;
+    document.getElementById('edit-officer-name').value = currentCaseData.officer_name || '';
+    document.getElementById('edit-incident-location').value = currentCaseData.location || '';
+    document.getElementById('edit-incident-date').value = currentCaseData.incident_date || '';
+    document.getElementById('edit-officer-notes').value = currentCaseData.notes || '';
+    document.getElementById('modal-edit-case').classList.remove('hidden');
+}
+
+function closeEditModal() {
+    document.getElementById('modal-edit-case').classList.add('hidden');
+}
+
+async function saveCaseChanges() {
+    if (!currentCaseId) return;
+
+    const formData = new FormData();
+    formData.append('officer_name', document.getElementById('edit-officer-name').value.trim());
+    formData.append('location', document.getElementById('edit-incident-location').value.trim());
+    formData.append('incident_date', document.getElementById('edit-incident-date').value);
+    formData.append('notes', document.getElementById('edit-officer-notes').value.trim());
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}`, {
+            method: 'PUT',
+            body: formData
+        });
+
+        if (!resp.ok) throw new Error('Failed to update case');
+
+        showToast('Case updated', 'success');
+        closeEditModal();
+        openCase(currentCaseId); // Refresh
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
+}
+
+// ── Add Photos ────────────────────────────────────────────────────────
+
+function openAddPhotosModal() {
+    additionalFiles = [];
+    document.getElementById('edit-photo-preview').classList.add('hidden');
+    document.getElementById('edit-upload-progress').classList.add('hidden');
+    document.getElementById('btn-upload-more').disabled = true;
+    document.getElementById('modal-add-photos').classList.remove('hidden');
+}
+
+function closePhotosModal() {
+    document.getElementById('modal-add-photos').classList.add('hidden');
+}
+
+function handleAdditionalFiles(files) {
+    const imageFiles = files.filter(f => f.type.startsWith('image/'));
+    if (!imageFiles.length) return showToast('No image files found', 'error');
+
+    additionalFiles = imageFiles.slice(0, 20);
+
+    const preview = document.getElementById('edit-photo-preview');
+    const thumbs = document.getElementById('edit-photo-thumbnails');
+    const count = document.getElementById('edit-photo-count');
+
+    preview.classList.remove('hidden');
+    count.textContent = `${additionalFiles.length} photo${additionalFiles.length > 1 ? 's' : ''} selected`;
+
+    thumbs.innerHTML = '';
+    additionalFiles.forEach(file => {
+        const div = document.createElement('div');
+        div.className = 'photo-thumbnail';
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(file);
+        div.appendChild(img);
+        thumbs.appendChild(div);
+    });
+
+    document.getElementById('btn-upload-more').disabled = additionalFiles.length === 0;
+}
+
+async function uploadMorePhotos() {
+    if (!currentCaseId || !additionalFiles.length) return;
+
+    const progressSection = document.getElementById('edit-upload-progress');
+    const progressFill = document.getElementById('edit-upload-progress-fill');
+    const statusText = document.getElementById('edit-upload-status-text');
+
+    progressSection.classList.remove('hidden');
+    document.getElementById('btn-upload-more').disabled = true;
+
+    const formData = new FormData();
+    additionalFiles.forEach(f => formData.append('files', f));
+
+    try {
+        progressFill.style.width = '50%';
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}/photos`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!resp.ok) throw new Error('Upload failed');
+
+        progressFill.style.width = '100%';
+        statusText.textContent = `Upload complete ✓`;
+        showToast('Photos added successfully', 'success');
+
+        setTimeout(() => {
+            closePhotosModal();
+            openCase(currentCaseId); // Refresh
+        }, 1000);
+    } catch (e) {
+        statusText.textContent = 'Upload failed';
+        showToast('Photo upload failed', 'error');
+        document.getElementById('btn-upload-more').disabled = false;
+    }
+}
+
+function renderCaseDetail(data) {
+    const c = data.case;
+
+    // Header
+    document.getElementById('case-detail-title').textContent = `Case: ${c.case_number}`;
+
+    // Info bar
+    document.getElementById('detail-case-number').textContent = c.case_number;
+    document.getElementById('detail-officer').textContent = c.officer_name || 'N/A';
+    document.getElementById('detail-location').textContent = c.location || 'N/A';
+    document.getElementById('detail-date').textContent = c.incident_date || 'N/A';
+    document.getElementById('detail-status').textContent = c.status;
+
+    const statusChip = document.getElementById('detail-status-chip');
+    statusChip.className = `info-chip status-chip ${c.status}`;
+
+    // Enable/disable buttons
+    const btnAnalysis = document.getElementById('btn-run-analysis');
+    const btnReport = document.getElementById('btn-view-report');
+    btnAnalysis.disabled = !data.photos?.length;
+    btnReport.disabled = c.status !== 'complete';
+
+    // Photos
+    const photosGrid = document.getElementById('detail-photos-grid');
+    document.getElementById('photo-badge').textContent = data.photos?.length || 0;
+
+    if (data.photos?.length) {
+        photosGrid.innerHTML = data.photos.map(p => `
+            <div class="detail-photo">
+                <img src="${API_BASE.replace('/api', '')}/api/photos/${p.id}/image" alt="${escHtml(p.filename)}" loading="lazy">
+            </div>
+        `).join('');
+    } else {
+        photosGrid.innerHTML = '<p class="placeholder-text">No photos uploaded yet.</p>';
+    }
+
+    // Analyses
+    const analysisContent = document.getElementById('analysis-content');
+    if (data.analyses?.length) {
+        analysisContent.innerHTML = data.analyses.map(a => `
+            <div class="analysis-photo-section">
+                <div class="analysis-photo-label">📷 ${escHtml(a.filename || 'Photo')}</div>
+                <pre>${escHtml(a.raw_analysis || '')}</pre>
+            </div>
+        `).join('');
+    } else {
+        analysisContent.innerHTML = '<p class="placeholder-text">Run analysis to see AI observations.</p>';
+    }
+
+    // Violations
+    const violationsList = document.getElementById('violations-list');
+    const violationBadge = document.getElementById('violation-badge');
+    violationBadge.textContent = data.violations?.length || 0;
+
+    if (data.violations?.length) {
+        violationsList.innerHTML = data.violations.map(v => `
+            <div class="violation-card ${v.severity || 'MEDIUM'}">
+                <div class="violation-header">
+                    <span class="violation-title">${escHtml(v.rule_title)}</span>
+                    <span class="severity-tag ${v.severity || 'MEDIUM'}">${v.severity || 'MEDIUM'}</span>
+                </div>
+                <div class="violation-meta">
+                    <span><i class="fa-solid fa-hashtag"></i> ${v.rule_id}</span>
+                    <span><i class="fa-solid fa-percent"></i> ${Math.round(v.confidence * 100)}% confidence</span>
+                    ${v.party_label ? `<span><i class="fa-solid fa-car"></i> ${escHtml(v.party_label)}</span>` : ''}
+                </div>
+                ${v.evidence_summary ? `<div class="violation-evidence">${escHtml(v.evidence_summary)}</div>` : ''}
+            </div>
+        `).join('');
+    } else {
+        violationsList.innerHTML = '<p class="placeholder-text">No violations detected yet.</p>';
+    }
+
+    // Fault Analysis
+    renderFaultAnalysis(data.fault_analysis, data.parties);
+}
+
+function renderFaultAnalysis(fault, parties) {
+    const content = document.getElementById('fault-content');
+
+    if (!fault) {
+        content.innerHTML = '<p class="placeholder-text">Run analysis to determine fault.</p>';
+        return;
+    }
+
+    let html = '';
+
+    // Fault distribution bars
+    if (fault.fault_distribution_json) {
+        let dist = {};
+        try {
+            dist = typeof fault.fault_distribution_json === 'string'
+                ? JSON.parse(fault.fault_distribution_json)
+                : fault.fault_distribution_json;
+        } catch { dist = {}; }
+
+        const entries = Object.entries(dist);
+        if (entries.length) {
+            html += '<div class="fault-party-bars">';
+            entries.forEach(([label, pct], i) => {
+                html += `
+                    <div class="party-bar">
+                        <div class="party-bar-label">
+                            <span class="party-name">${escHtml(label)}</span>
+                            <span class="party-pct">${pct}%</span>
+                        </div>
+                        <div class="party-bar-track">
+                            <div class="party-bar-fill ${i === 0 ? 'primary' : 'secondary'}" 
+                                 style="width: ${pct}%"></div>
+                        </div>
+                    </div>
+                `;
+            });
+            html += '</div>';
+        }
+    }
+
+    // Probable cause
+    if (fault.probable_cause) {
+        html += `
+            <div class="fault-cause">
+                <h4><i class="fa-solid fa-magnifying-glass-chart"></i> Probable Cause</h4>
+                <p>${escHtml(fault.probable_cause)}</p>
+            </div>
+        `;
+    }
+
+    // Confidence
+    if (fault.overall_confidence != null) {
+        const pct = Math.round(fault.overall_confidence * 100);
+        html += `
+            <div class="confidence-meter">
+                <span>Confidence:</span>
+                <div class="meter-bar">
+                    <div class="meter-fill" style="width: ${pct}%"></div>
+                </div>
+                <span>${pct}%</span>
+            </div>
+        `;
+    }
+
+    // Summary
+    if (fault.analysis_summary) {
+        html += `<p style="margin-top:0.8rem;font-size:0.82rem;color:var(--text-secondary)">
+            ${escHtml(fault.analysis_summary)}</p>`;
+    }
+
+    content.innerHTML = html || '<p class="placeholder-text">No fault analysis available.</p>';
+}
+
+// ── Run Analysis ──────────────────────────────────────────────────────
+
+async function runAnalysis() {
+    if (!currentCaseId) return;
+
+    const overlay = document.getElementById('analysis-overlay');
+    const stepEl = document.getElementById('analysis-step');
+    const detailEl = document.getElementById('analysis-detail');
+
+    overlay.classList.remove('hidden');
+    stepEl.textContent = 'Analyzing accident scene photos...';
+    detailEl.textContent = 'Running AI vision analysis on each photo. This may take several minutes.';
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}/analyze`, {
+            method: 'POST',
+        });
+
+        if (!resp.ok) {
+            const err = await resp.json();
+            throw new Error(err.detail || 'Analysis failed');
+        }
+
+        const data = await resp.json();
+        overlay.classList.add('hidden');
+        showToast(`Analysis complete: ${data.violations_found} violations found`, 'success');
+
+        // Reload case detail
+        openCase(currentCaseId);
+
+    } catch (e) {
+        overlay.classList.add('hidden');
+        showToast(`Analysis failed: ${e.message}`, 'error');
+    }
+}
+
+// ── Report ────────────────────────────────────────────────────────────
+
+async function viewReport() {
+    if (!currentCaseId) return;
+
+    switchView('report');
+
+    try {
+        const resp = await fetch(`${API_BASE}/cases/${currentCaseId}/report`);
+        const report = await resp.json();
+        renderReport(report);
+    } catch (e) {
+        showToast('Failed to load report', 'error');
+    }
+}
+
+function renderReport(report) {
+    const content = document.getElementById('report-content');
+
+    let html = `
+        <div class="report-header">
+            <h2><i class="fa-solid fa-shield-halved"></i> ${report.report_type || 'Incident Report'}</h2>
+            <p class="report-subtitle">Case ${escHtml(report.case?.case_number || '')} • Generated by AI</p>
+        </div>
+
+        <div class="report-disclaimer">
+            <i class="fa-solid fa-triangle-exclamation"></i> ${escHtml(report.disclaimer || '')}
+        </div>
+    `;
+
+    // Stats
+    const stats = report.statistics || {};
+    html += `
+        <div class="report-stat-grid">
+            <div class="report-stat">
+                <div class="stat-number">${stats.total_photos || 0}</div>
+                <div class="stat-label">Photos</div>
+            </div>
+            <div class="report-stat">
+                <div class="stat-number">${stats.total_violations || 0}</div>
+                <div class="stat-label">Violations</div>
+            </div>
+            <div class="report-stat">
+                <div class="stat-number">${stats.critical_violations || 0}</div>
+                <div class="stat-label">Critical</div>
+            </div>
+            <div class="report-stat">
+                <div class="stat-number">${stats.parties_identified || 0}</div>
+                <div class="stat-label">Parties</div>
+            </div>
+        </div>
+    `;
+
+    // Case Info
+    html += `<h3>Case Information</h3>`;
+    html += `<p><strong>Case Number:</strong> ${escHtml(report.case?.case_number || 'N/A')}</p>`;
+    html += `<p><strong>Officer:</strong> ${escHtml(report.case?.officer_name || 'N/A')}</p>`;
+    html += `<p><strong>Location:</strong> ${escHtml(report.case?.location || 'N/A')}</p>`;
+    html += `<p><strong>Date:</strong> ${report.case?.incident_date || 'N/A'}</p>`;
+    if (report.case?.notes) html += `<p><strong>Notes:</strong> ${escHtml(report.case.notes)}</p>`;
+
+    // Scene Summary
+    if (report.scene_summary) {
+        html += `<h3>Scene Analysis</h3>`;
+        html += `<p style="white-space:pre-wrap">${escHtml(report.scene_summary)}</p>`;
+    }
+
+    // Parties
+    if (report.parties?.length) {
+        html += `<h3>Parties Involved</h3>`;
+        report.parties.forEach(p => {
+            html += `<h4>${escHtml(p.label)}</h4>`;
+            html += `<p>Type: ${p.vehicle_type || 'Unknown'} • Color: ${p.vehicle_color || 'Unknown'}</p>`;
+        });
+    }
+
+    // Violations
+    if (report.violations?.list?.length) {
+        html += `<h3>Traffic Violations Detected</h3>`;
+        report.violations.list.forEach(v => {
+            html += `
+                <div class="violation-card ${v.severity}" style="margin-bottom:0.5rem">
+                    <div class="violation-header">
+                        <span class="violation-title">${escHtml(v.title)}</span>
+                        <span class="severity-tag ${v.severity}">${v.severity}</span>
+                    </div>
+                    <p style="font-size:0.82rem;color:var(--text-secondary);margin-top:0.3rem">
+                        Party: ${escHtml(v.party)} • Confidence: ${Math.round(v.confidence * 100)}%
+                    </p>
+                    ${v.evidence ? `<p style="font-size:0.78rem;color:var(--text-muted);font-style:italic">${escHtml(v.evidence)}</p>` : ''}
+                </div>
+            `;
+        });
+    }
+
+    // Fault Analysis
+    if (report.fault_analysis?.determined) {
+        html += `<h3>Fault Analysis</h3>`;
+        html += `<p><strong>Primary Fault:</strong> ${escHtml(report.fault_analysis.primary_fault_party || 'Undetermined')}</p>`;
+
+        if (report.fault_analysis.fault_distribution) {
+            html += `<p><strong>Distribution:</strong> `;
+            html += Object.entries(report.fault_analysis.fault_distribution)
+                .map(([k, v]) => `${k}: ${v}%`).join(' • ');
+            html += `</p>`;
+        }
+
+        html += `<p><strong>Confidence:</strong> ${Math.round((report.fault_analysis.overall_confidence || 0) * 100)}%</p>`;
+
+        if (report.fault_analysis.probable_cause) {
+            html += `<h4>Probable Cause</h4>`;
+            html += `<p>${escHtml(report.fault_analysis.probable_cause)}</p>`;
+        }
+    }
+
+    content.innerHTML = html;
+}
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+async function loadRules() {
+    try {
+        const resp = await fetch(`${API_BASE}/rules`);
+        const data = await resp.json();
+        renderRules(data);
+    } catch (e) {
+        showToast('Failed to load rules', 'error');
+    }
+}
+
+function renderRules(data) {
+    const content = document.getElementById('rules-content');
+
+    if (!data.categories?.length) {
+        content.innerHTML = '<p class="placeholder-text">No rules loaded.</p>';
+        return;
+    }
+
+    content.innerHTML = data.categories.map(cat => `
+        <div class="rule-category">
+            <div class="rule-category-header">
+                <i class="fa-solid fa-gavel"></i>
+                ${escHtml(cat.name)}
+                <span class="rule-count">${cat.rule_count} rules</span>
+            </div>
+            <div class="rule-list">
+                ${cat.rules.map(r => `
+                    <div class="rule-item">
+                        <span class="rule-id">${r.id}</span>
+                        <span>${escHtml(r.title)}</span>
+                        <span class="severity-tag ${r.severity}" style="margin-left:auto">${r.severity}</span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    `).join('');
+}
+
+// ── Toast ─────────────────────────────────────────────────────────────
+
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(() => toast.remove(), 4000);
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+function escHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+function formatDate(dateStr) {
+    if (!dateStr) return '';
+    try {
+        const d = new Date(dateStr);
+        return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    } catch { return dateStr; }
+}