Initial UI Demo deployment with simulated AI

README.md

@@ -1,10 +1 @@
----
-title: TraceScene UI
-emoji: 😻
-colorFrom: green
-colorTo: red
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---\ntitle: TraceScene UI Demo\nemoji: 🚔\ncolorFrom: blue\ncolorTo: red\nsdk: static\npinned: false\n---\n

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;
+}

index.html

@@ -1,19 +1,560 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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="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>
+            </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@gmail.com" class="sidebar-contact-link">
+                            <i class="fa-solid fa-at"></i> tracescene@gmail.com
+                        </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>
+
+        </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="js/alt_app.js"></script>
+</body>
+
+</html>

js/alt_app.js

@@ -0,0 +1,1010 @@
+/**
+ * TraceScene — Frontend Application
+ * 
+ * Single-page application for accident case management,
+ * photo upload, AI analysis, and report viewing.
+ */
+
+const API_BASE = '/api';
+
+// ── Mock Backend Interceptor ───────────────────────────────────────────
+// This simulates the AI backend purely in the browser for the public UI demo
+const originalFetch = window.fetch;
+let mockNextId = 1;
+let mockCases = {};
+
+window.fetch = async (url, options = {}) => {
+    // Only intercept our API calls
+    if (typeof url === 'string' && url.startsWith('/api')) {
+        console.log(`[Mock Demo API] ${options.method || 'GET'} ${url}`);
+
+        // Helper to delay response
+        const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+        // 1. Health check
+        if (url === '/api/health') {
+            return new Response(JSON.stringify({ model_loaded: true, device: "Browser Demo", rules_loaded: 43 }), { status: 200 });
+        }
+
+        // 2. Get cases
+        if (url === '/api/cases' && (options.method === 'GET' || !options.method)) {
+            const casesList = Object.values(mockCases);
+            return new Response(JSON.stringify({ cases: casesList }), { status: 200 });
+        }
+
+        // 3. Create case
+        if (url === '/api/cases' && options.method === 'POST') {
+            const formData = options.body;
+            const newCase = {
+                id: mockNextId++,
+                case_number: formData.get('case_number'),
+                officer_name: formData.get('officer_name'),
+                location: formData.get('location'),
+                incident_date: formData.get('incident_date'),
+                notes: formData.get('notes'),
+                status: 'new',
+                created_at: new Date().toISOString()
+            };
+            mockCases[newCase.id] = { case: newCase, photos: [], violations: [], fault_analysis: null, analyses: [] };
+            return new Response(JSON.stringify(newCase), { status: 200 });
+        }
+
+        // 3.5 Delete case
+        if (url.match(/^\/api\/cases\/\d+$/) && options.method === 'DELETE') {
+            const id = parseInt(url.split('/').pop());
+            delete mockCases[id];
+            return new Response(JSON.stringify({ detail: "Deleted" }), { status: 200 });
+        }
+
+        // 4. Upload photos
+        if (url.match(/^\/api\/cases\/\d+\/photos$/) && options.method === 'POST') {
+            const id = parseInt(url.split('/')[3]);
+            const formData = options.body;
+            const files = formData.getAll('files');
+            await delay(800); // Simulate upload
+
+            files.forEach(f => {
+                mockCases[id].photos.push({
+                    id: Math.random().toString(36).substr(2, 9),
+                    filename: f.name,
+                    blob_url: URL.createObjectURL(f)
+                });
+            });
+            mockCases[id].case.photo_count = mockCases[id].photos.length;
+            mockCases[id].case.status = 'ready';
+
+            return new Response(JSON.stringify({ count: files.length }), { status: 200 });
+        }
+
+        // 5. Get case details
+        if (url.match(/^\/api\/cases\/\d+$/) && (options.method === 'GET' || !options.method)) {
+            const id = parseInt(url.split('/').pop());
+            if (!mockCases[id]) return new Response(JSON.stringify({ detail: "Not found" }), { status: 404 });
+            return new Response(JSON.stringify(mockCases[id]), { status: 200 });
+        }
+
+        // 6. Run AI Analysis
+        if (url.match(/^\/api\/cases\/\d+\/analyze$/) && options.method === 'POST') {
+            const id = parseInt(url.split('/')[3]);
+            await delay(3000); // Simulate heavy AI reasoning
+
+            mockCases[id].case.status = 'complete';
+
+            // Generate mock analysis data based on the uploaded photos
+            mockCases[id].analyses = mockCases[id].photos.map(p => ({
+                filename: p.filename,
+                raw_analysis: `[AI Observation]\nSubject: Vehicle A and Vehicle B.\nAction: Vehicle A exhibits front-end damage consistent with forward impact. Vehicle B exhibits rear damage. Road conditions appear clear.`
+            }));
+
+            mockCases[id].violations = [
+                {
+                    rule_id: "Article 18",
+                    rule_title: "Failure to Leave Safe Distance",
+                    severity: "HIGH",
+                    confidence: 0.94,
+                    party_label: "Vehicle A",
+                    evidence_summary: "Visual estimation of skid marks and impact deformation indicates Vehicle A failed to maintain adequate stopping distance."
+                }
+            ];
+
+            mockCases[id].fault_analysis = {
+                determined: true,
+                primary_fault_party: "Vehicle A",
+                probable_cause: "Rear-end collision due to insufficient following distance.",
+                fault_distribution_json: { "Vehicle A": 100, "Vehicle B": 0 },
+                overall_confidence: 0.92,
+                analysis_summary: "Based on the visual evidence, Vehicle A is fully at fault for failing to stop in time."
+            };
+
+            return new Response(JSON.stringify({ violations_found: 1 }), { status: 200 });
+        }
+    }
+
+    // Intercept photo image requests to return the stored blob URL instead
+    if (typeof url === 'string' && url.match(/^\/api\/photos\/.+\/image$/)) {
+        const photoId = url.split('/')[3];
+        let foundPhotoURL = null;
+        Object.values(mockCases).forEach(c => {
+            const p = c.photos.find(p => p.id === photoId);
+            if (p) foundPhotoURL = p.blob_url;
+        });
+        if (foundPhotoURL) {
+            // Fetch the blob URL to return a proper image response
+            return originalFetch(foundPhotoURL);
+        }
+    }
+
+    // Fallback for non-API requests
+    return originalFetch(url, options);
+};
+
+// ── 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
+
+// ── 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);
+
+    // 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="${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; }
+}

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; }
+}