feat: integrate static reference cases and update REST API

app.py

@@ -40,6 +40,8 @@ rule_matcher = RuleMatcher()
 fault_deducer = FaultDeducer()
 report_generator = ReportGenerator()
 
+from backend.app.core.reference_data import REFERENCE_CASES
+
 # ── ZeroGPU: Top-level decorated function ──────────────────────────────
 # This MUST be a top-level function wired to a Gradio event handler.
 
@@ -228,6 +230,11 @@ def get_case_photos_fn(case_id):
     ensure_init()
     try:
         photos = run_async(db.get_photos_by_case(int(case_id)))
+        if not photos:
+            # Check reference cases
+            ref = REFERENCE_CASES.get(int(case_id))
+            if ref:
+                return [(p["filepath"], p["filename"]) for p in ref["photos"]]
         return [(p["filepath"], p["filename"]) for p in photos if Path(p["filepath"]).exists()]
     except Exception:
         return []
@@ -397,19 +404,38 @@ def health_fn():
 
 
 def list_cases_json():
-    """List cases as JSON."""
+    """List cases as JSON, including reference cases."""
     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)
+        c["is_reference"] = False
+    
+    # Add reference cases
+    ref_list = [v["case"] for v in REFERENCE_CASES.values()]
+    cases = ref_list + cases
+    
     return json.dumps({"cases": cases})
 
 
 def get_case_json(case_id):
-    """Get full case details as JSON."""
+    """Get full case details as JSON, handling reference cases."""
     if not case_id:
         return json.dumps({"error": "No case ID"})
+    
+    # Check reference cases first
+    ref = REFERENCE_CASES.get(int(case_id))
+    if ref:
+        data = ref.copy()
+        data["stats"] = {
+            "total_photos": len(data["photos"]),
+            "analyzed_photos": len(data["analyses"]),
+            "violations_found": len(data["violations"]),
+            "parties_identified": len(data["parties"]),
+        }
+        return json.dumps(data)
+
     ensure_init()
     case = run_async(db.get_case(int(case_id)))
     if not case:
@@ -419,8 +445,12 @@ def get_case_json(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)))
+    
+    case_dict = dict(case)
+    case_dict["is_reference"] = False
+
     return json.dumps({
-        "case": case,
+        "case": case_dict,
         "photos": photos,
         "analyses": analyses,
         "parties": parties,

backend/app/api/routes.py

@@ -22,6 +22,7 @@ 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
+from backend.app.core.reference_data import REFERENCE_CASES
 
 logger = get_logger("api")
 
@@ -82,18 +83,46 @@ async def create_case(
 
 @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)
+    """List all cases with photo counts, including reference cases."""
+    db_cases = await db.list_cases()
+    cases = []
+    for case in db_cases:
+        case_dict = dict(case)
+        photos = await db.get_photos_by_case(case_dict["id"])
+        case_dict["photo_count"] = len(photos)
+        case_dict["is_reference"] = False
+        cases.append(case_dict)
+    
+    # Add reference cases
+    for ref_id, ref_data in REFERENCE_CASES.items():
+        ref_case = ref_data["case"].copy()
+        ref_case["photo_count"] = len(ref_data["photos"])
+        cases.append(ref_case)
+        
     return {"cases": cases}
 
 
 @router.get("/cases/{case_id}")
 async def get_case(case_id: int):
-    """Get case details with photos and analysis status."""
+    """Get case details with photos and analysis status, handling reference cases."""
+    # Check reference cases first
+    if case_id in REFERENCE_CASES:
+        ref_data = REFERENCE_CASES[case_id]
+        return {
+            "case": ref_data["case"],
+            "photos": ref_data["photos"],
+            "analyses": ref_data["analyses"],
+            "parties": ref_data["parties"],
+            "violations": ref_data["violations"],
+            "fault_analysis": ref_data["fault_analysis"],
+            "stats": {
+                "total_photos": len(ref_data["photos"]),
+                "analyzed_photos": len(ref_data["analyses"]),
+                "violations_found": len(ref_data["violations"]),
+                "parties_identified": len(ref_data["parties"]),
+            },
+        }
+
     case = await db.get_case(case_id)
     if not case:
         raise HTTPException(404, "Case not found")
@@ -104,8 +133,11 @@ async def get_case(case_id: int):
     violations = await db.get_violations_by_case(case_id)
     fault = await db.get_fault_analysis(case_id)
 
+    case_dict = dict(case)
+    case_dict["is_reference"] = False
+
     return {
-        "case": case,
+        "case": case_dict,
         "photos": photos,
         "analyses": analyses,
         "parties": parties,

backend/app/core/reference_data.py

@@ -0,0 +1,84 @@
+
+"""
+Static reference cases for the TraceScene demo.
+Sourced from deployment_ui_only/js/alt_app.js
+"""
+
+REFERENCE_CASES = {
+    9001: {
+        "case": {
+            "id": 9001,
+            "case_number": "REF-2026-042",
+            "officer_name": "Sgt. Miller",
+            "location": "Hwy 101 N",
+            "incident_date": "2026-03-01",
+            "status": "complete",
+            "created_at": "2026-03-01T08:14:00Z",
+            "is_reference": True
+        },
+        "photos": [
+            {"id": "ref_img_1", "filename": "01a252ba0708_car_8.jpg", "filepath": "/static/images/demo/01a252ba0708_car_8.jpg"},
+            {"id": "ref_img_2", "filename": "bb7313c8f601_car_10.jpg", "filepath": "/static/images/demo/bb7313c8f601_car_10.jpg"},
+            {"id": "ref_img_3", "filename": "413495119937_accident_6.jpg", "filepath": "/static/images/demo/413495119937_accident_6.jpg"}
+        ],
+        "analyses": [
+            {
+                "filename": "01a252ba0708_car_8.jpg",
+                "raw_analysis": "[AI Observation]\\nVehicles Involved: 1\\nVehicle 1 Make/Model: 2018 Toyota Highlander (Silver SUV)\\nVehicle 1 License Plate: CA 8XYZ123\\nVehicle 1 Geographic Location: California, USA\\nVehicle 1 Owner: Sarah Jenkins\\nNon-vehicle Parties: None\\n\\n[Accident Severity]\\nAccident Category: critical\\nSurvival/Injury Estimation: minor injury\\n\\n[Condition Assessment]\\nTime of Incident: Day\\nWeather: Clear\\nRoad Type: 2-way\\nRoad Surface: Dry\\nVehicle 1 Position: Facing right, near the curb\\nVehicle 1 Tyre Direction: Straight\\nVehicle 1 Tyre Condition: Front-Left (Good, 6mm tread), Front-Right (Good, 6mm tread), Rears (Worn, 3mm tread)\\nArea of Impact: Front\\nVisible Debris/Skid Marks: Glass shards and fluid leak near the front bumper\\nAirbag/Safety: Deployed\\n\\n[Damage Analysis & Insurance Assessment]\\n- Front Bumper: Severe crush damage (Intensity: High). \\n- Radiator & Core Support: Destroyed (Intensity: High).\\n- Right Fender: Crumpled (Intensity: High).\\n\\n[Summary]\\nSevere front-end deformation observed consistent with high-speed frontal impact. Airbags deployed. Vehicle is likely a total loss."
+            }
+        ],
+        "violations": [
+            {"rule_id": "SPEED-001", "rule_title": "Excessive Speed", "severity": "CRITICAL", "confidence": 0.92, "party_label": "Silver SUV", "evidence_summary": "Long skid marks and severe front-end crush profile indicate speeds greater than safe for conditions."},
+            {"rule_id": "FOLLOW-001", "rule_title": "Following Too Closely (Tailgating)", "severity": "HIGH", "confidence": 0.96, "party_label": "Silver SUV", "evidence_summary": "Impact pattern consistent with rear-ending a leading vehicle without sufficient braking distance."}
+        ],
+        "fault_analysis": {
+            "determined": True,
+            "primary_fault_party": "Silver SUV",
+            "probable_cause": "Following too closely combined with excessive speed.",
+            "fault_distribution_json": {"Silver SUV": 100, "Other": 0},
+            "overall_confidence": 0.94,
+            "analysis_summary": "Based on severe front-end damage and skid marks, the Silver SUV is entirely at fault for failing to maintain a safe following distance and speed."
+        },
+        "parties": [
+            {"label": "Silver SUV", "vehicle_type": "SUV", "vehicle_color": "Silver", "description": "2018 Toyota Highlander"}
+        ]
+    },
+    9002: {
+        "case": {
+            "id": 9002,
+            "case_number": "REF-2026-043",
+            "officer_name": "Off. Davis",
+            "location": "Downtown Intersection",
+            "incident_date": "2026-03-02",
+            "status": "complete",
+            "created_at": "2026-03-02T10:30:00Z",
+            "is_reference": True
+        },
+        "photos": [
+            {"id": "ref_img_4", "filename": "a358e234c528_accident_scene_2.jpg", "filepath": "/static/images/demo/a358e234c528_accident_scene_2.jpg"},
+            {"id": "ref_img_5", "filename": "e05bd82a2cfa_accident_9.jpg", "filepath": "/static/images/demo/e05bd82a2cfa_accident_9.jpg"}
+        ],
+        "analyses": [
+            {
+                "filename": "a358e234c528_accident_scene_2.jpg",
+                "raw_analysis": "[AI Observation]\\nVehicles Involved: 2\\nVehicle 1 Make/Model: 2020 Honda Civic (Blue Sedan)\\nVehicle 1 License Plate: TX LMN-4567\\nVehicle 2 Make/Model: 2015 Ford F-150 (White Truck)\\nVehicle 2 License Plate: TX PQR-8910\\n\\n[Accident Severity]\\nAccident Category: medium\\n\\n[Summary]\\nT-bone intersection collision. Blue Sedan sustained heavy side impact; White Truck shows front-end damage. Airbags deployed on Blue Sedan."
+            }
+        ],
+        "violations": [
+            {"rule_id": "SIGNAL-001", "rule_title": "Red Light Violation", "severity": "CRITICAL", "confidence": 0.95, "party_label": "White Truck", "evidence_summary": "Point of impact suggests White Truck entered intersection after signal turned red."},
+            {"rule_id": "MAINT-002", "rule_title": "Defective Tires", "severity": "HIGH", "confidence": 0.88, "party_label": "White Truck", "evidence_summary": "Rear left tire on White Truck is severely worn (bald)."}
+        ],
+        "fault_analysis": {
+            "determined": True,
+            "primary_fault_party": "White Truck",
+            "probable_cause": "Failure to stop at red light.",
+            "fault_distribution_json": {"White Truck": 100, "Blue Sedan": 0},
+            "overall_confidence": 0.91,
+            "analysis_summary": "White Truck failed to stop for a red signal, directly causing the T-bone collision."
+        },
+        "parties": [
+            {"label": "Blue Sedan", "vehicle_type": "Sedan", "vehicle_color": "Blue", "description": "2020 Honda Civic"},
+            {"label": "White Truck", "vehicle_type": "Truck", "vehicle_color": "White", "description": "2015 Ford F-150"}
+        ]
+    }
+}

frontend/css/styles.css

@@ -374,6 +374,39 @@ button {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 1rem;
+    align-items: start;
+}
+
+.grid-header {
+    grid-column: 1 / -1;
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--glass-border);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.grid-header::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 18px;
+    background: var(--accent);
+    border-radius: 2px;
+}
+
+.reference-card {
+    background: rgba(30, 58, 138, 0.03);
+    border-style: solid;
+    border-color: rgba(30, 58, 138, 0.1);
+}
+
+.reference-card:hover {
+    background: rgba(30, 58, 138, 0.05);
+    border-color: var(--accent);
 }
 
 .case-card {

frontend/js/alt_app.js

@@ -321,8 +321,10 @@ async function loadCases(vertical = 'le') {
 }
 
 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');
+    const gridId = vertical === 'le' ? 'le-cases-grid' : 'ins-cases-grid';
+    const emptyId = vertical === 'le' ? 'le-empty-state-dashboard' : 'ins-empty-state-dashboard';
+    const grid = document.getElementById(gridId);
+    const empty = document.getElementById(emptyId);
 
     if (!cases.length) {
         grid.innerHTML = '';
@@ -334,11 +336,32 @@ function renderCases(cases, vertical) {
     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">
+    const referenceCases = cases.filter(c => c.is_reference);
+    const userCases = cases.filter(c => !c.is_reference);
+
+    let html = '';
+
+    if (referenceCases.length) {
+        html += `<h3 class="grid-header">Reference cases</h3>`;
+        html += referenceCases.map(c => renderCaseCard(c, vertical)).join('');
+    }
+
+    if (userCases.length) {
+        const myCasesLabel = vertical === 'ins' ? 'All cases' : 'My cases';
+        html += `<h3 class="grid-header" style="margin-top: 1.5rem;">${myCasesLabel}</h3>`;
+        html += userCases.map(c => renderCaseCard(c, vertical)).join('');
+    }
+
+    grid.innerHTML = html;
+}
+
+function renderCaseCard(c, vertical) {
+    return `
+        <div class="case-card ${c.is_reference ? 'reference-card' : ''}" onclick="openCase(${c.id})">
+            ${!c.is_reference ? `
+            <button class="btn-delete-card" onclick="event.stopPropagation(); deleteCase(${c.id}, '${escHtml(c.case_number)}', '${vertical}')" title="Delete Case">
                 <i class="fa-solid fa-trash-can"></i>
-            </button>
+            </button>` : ''}
             <div class="card-header">
                 <span class="case-number">${escHtml(c.case_number)}</span>
                 <span class="status-badge ${c.status}">
@@ -352,10 +375,10 @@ function renderCases(cases, vertical) {
             </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>
+                <span style="font-size:0.72rem;color:var(--text-muted)">${c.is_reference ? 'Static Reference' : formatDate(c.created_at)}</span>
             </div>
         </div>
-    `).join('');
+    `;
 }
 
 async function deleteCase(id, caseNum, vertical = 'le') {
@@ -664,7 +687,21 @@ function renderCaseDetail(data) {
     // Enable/disable buttons
     const btnAnalysis = document.getElementById('btn-run-analysis');
     const btnReport = document.getElementById('btn-view-report');
-    btnAnalysis.disabled = !data.photos?.length;
+    const btnEdit = document.getElementById('btn-edit-case');
+    const btnAddPhotos = document.getElementById('btn-add-photos-inline');
+
+    if (c.is_reference) {
+        btnAnalysis.disabled = true;
+        btnAnalysis.title = "Analytics is disabled for reference cases";
+        if (btnEdit) btnEdit.disabled = true;
+        if (btnAddPhotos) btnAddPhotos.disabled = true;
+    } else {
+        btnAnalysis.disabled = !data.photos?.length;
+        btnAnalysis.title = "";
+        if (btnEdit) btnEdit.disabled = false;
+        if (btnAddPhotos) btnAddPhotos.disabled = false;
+    }
+
     btnReport.disabled = c.status !== 'complete';
 
     // Photos
@@ -672,11 +709,14 @@ function renderCaseDetail(data) {
     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('');
+        photosGrid.innerHTML = data.photos.map(p => {
+            const imgSrc = c.is_reference ? p.filepath : `/${p.filepath}`;
+            return `
+                <div class="detail-photo">
+                    <img src="${imgSrc}" 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>';
     }

frontend/js/app.js

@@ -180,11 +180,31 @@ function renderCases(cases) {
     grid.style.display = 'grid';
     empty.style.display = 'none';
 
-    grid.innerHTML = cases.map(c => `
-        <div class="case-card" onclick="openCase(${c.id})">
+    const referenceCases = cases.filter(c => c.is_reference);
+    const userCases = cases.filter(c => !c.is_reference);
+
+    let html = '';
+
+    if (referenceCases.length) {
+        html += `<h3 class="grid-header">Reference cases</h3>`;
+        html += referenceCases.map(c => renderCaseCard(c)).join('');
+    }
+
+    if (userCases.length) {
+        html += `<h3 class="grid-header" style="margin-top: 1.5rem;">My cases</h3>`;
+        html += userCases.map(c => renderCaseCard(c)).join('');
+    }
+
+    grid.innerHTML = html;
+}
+
+function renderCaseCard(c) {
+    return `
+        <div class="case-card ${c.is_reference ? 'reference-card' : ''}" onclick="openCase(${c.id})">
+            ${!c.is_reference ? `
             <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>
+            </button>` : ''}
             <div class="card-header">
                 <span class="case-number">${escHtml(c.case_number)}</span>
                 <span class="status-badge ${c.status}">
@@ -198,10 +218,10 @@ function renderCases(cases) {
             </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>
+                <span style="font-size:0.72rem;color:var(--text-muted)">${c.is_reference ? 'Static Reference' : formatDate(c.created_at)}</span>
             </div>
         </div>
-    `).join('');
+    `;
 }
 
 async function deleteCase(id, caseNum) {
@@ -498,19 +518,32 @@ function renderCaseDetail(data) {
     // 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';
+    const btnEdit = document.getElementById('btn-edit-case');
+    const btnAddPhotos = document.getElementById('btn-add-photos-inline');
+
+    if (c.is_reference) {
+        btnAnalysis.disabled = true;
+        btnAnalysis.title = "Analytics is disabled for reference cases";
+        if (btnEdit) btnEdit.disabled = true;
+        if (btnAddPhotos) btnAddPhotos.disabled = true;
+    } else {
+        btnAnalysis.disabled = !data.photos?.length;
+        btnAnalysis.title = "";
+        if (btnEdit) btnEdit.disabled = false;
+        if (btnAddPhotos) btnAddPhotos.disabled = false;
+    }
 
-    // Photos
-    const photosGrid = document.getElementById('detail-photos-grid');
-    document.getElementById('photo-badge').textContent = data.photos?.length || 0;
+    btnReport.disabled = c.status !== 'complete';
 
     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('');
+        photosGrid.innerHTML = data.photos.map(p => {
+            const imgSrc = c.is_reference ? p.filepath : `${API_BASE.replace('/api', '')}/api/photos/${p.id}/image`;
+            return `
+                <div class="detail-photo">
+                    <img src="${imgSrc}" alt="${escHtml(p.filename)}" loading="lazy">
+                </div>
+            `;
+        }).join('');
     } else {
         photosGrid.innerHTML = '<p class="placeholder-text">No photos uploaded yet.</p>';
     }