code refactoring: seperation of concerns; cleanup; structural organization..

frontend/css/initial.css

@@ -0,0 +1,81 @@
+:root {
+    --cocoa: #8b5e3c;
+    --cocoa-l: #c89a6c;
+    --cocoa-xl: #d4b08a;
+    --t1: #f0ece6;
+    --t2: #a89f97;
+    --border: #2a2a2a;
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    background-color: #000000;
+    color: var(--t1);
+}
+
+.fade-in {
+    animation: fadeIn 0.4s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Executive Overrides */
+.traffic-dynamics-card {
+    background-color: #0a0a0a !important;
+    border: 2px solid var(--cocoa) !important;
+}
+
+.traffic-dynamics-card:hover {
+    border-color: var(--cocoa-l) !important;
+}
+
+#dropzone {
+    transition: all 0.2s ease;
+    border-color: #2a2a2a;
+}
+
+#dropzone:hover {
+    border-color: var(--cocoa-l) !important;
+    background-color: #0a0a0a !important;
+}
+
+.core-badge {
+    background-color: var(--cocoa) !important;
+    color: var(--t1) !important;
+}
+
+/* Onboarding */
+.onboard-overlay {
+    position: fixed; inset: 0; z-index: 9999;
+    background: rgba(0,0,0,0.92);
+    display: flex; align-items: center; justify-content: center;
+}
+.onboard-card {
+    background: #0a0a0a; border: 1px solid #2a2a2a;
+    border-radius: 16px; max-width: 440px; width: 90%;
+    padding: 40px 32px; text-align: center;
+}
+.onboard-step { display: none; }
+.onboard-step.active { display: block; }
+.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
+.onboard-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: #333; transition: background 0.2s;
+}
+.onboard-dot.active { background: var(--cocoa-l); }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+    main { grid-template-columns: 1fr !important; padding: 16px !important; }
+    h1 { font-size: 2.2rem !important; }
+}

frontend/css/vehicles.css

@@ -0,0 +1,450 @@
+
+        :root {
+            --cocoa: #8b5e3c;
+            --cocoa-l: #c89a6c;
+            --cocoa-xl: #d4b08a;
+        }
+
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #000000;
+            color: #f0ece6;
+        }
+
+        .mono-font {
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        ::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #000000;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #222222;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #333333;
+        }
+
+        .info-wrap {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            margin-left: 6px;
+        }
+
+        .info-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #444444 !important;
+            color: #ffffff !important;
+            font-size: 7px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .info-btn:hover {
+            background: #666666 !important;
+        }
+
+        .info-tip {
+            display: none;
+            position: fixed;
+            z-index: 9999;
+            background: #0a0a0a;
+            color: #aaaaaa;
+            font-size: 10px;
+            font-weight: 500;
+            line-height: 1.4;
+            padding: 8px 12px;
+            border-radius: 6px;
+            max-width: 240px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
+            border: 1px solid #222222;
+            pointer-events: none;
+            text-transform: none;
+            letter-spacing: normal;
+        }
+
+        /* Nav states */
+        .nav-item-active {
+            background-color: #111111 !important;
+            color: var(--cocoa-xl) !important;
+            border-left: 2px solid var(--cocoa-l) !important;
+        }
+
+        .nav-item-inactive {
+            color: #555555 !important;
+        }
+
+        .nav-item-inactive:hover {
+            color: #f0ece6 !important;
+            background-color: #050505 !important;
+        }
+
+        /* Card Overrides */
+        .bg-white {
+            background-color: #0a0a0a !important;
+        }
+
+        .border-slate-200,
+        .border-slate-100,
+        .border-slate-50,
+        .border-neutral-800,
+        .border-neutral-900 {
+            border-color: #2a2a2a !important;
+        }
+
+        .bg-slate-50\/50,
+        .bg-slate-50,
+        .bg-slate-900,
+        .bg-neutral-900 {
+            background-color: #0c0c0c !important;
+        }
+
+        .text-slate-900,
+        .text-slate-800,
+        .text-slate-700,
+        .text-neutral-900 {
+            color: #ffffff !important;
+        }
+
+        .text-slate-600,
+        .text-slate-500,
+        .text-slate-400,
+        .text-neutral-500,
+        .text-neutral-400 {
+            color: #888888 !important;
+        }
+
+        .shadow-sm {
+            box-shadow: none !important;
+        }
+
+        /* Controls */
+        .toggle-track {
+            width: 32px;
+            height: 18px;
+            border-radius: 9px;
+            background: #222222;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .toggle-track.active {
+            background: var(--cocoa-l);
+        }
+
+        .toggle-thumb {
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #555555;
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            transition: all 0.2s ease;
+        }
+
+        .toggle-track.active .toggle-thumb {
+            transform: translateX(14px);
+            background: #000000;
+        }
+
+        .custom-select {
+            appearance: none;
+            background-color: #111111;
+            border: 1px solid #222222;
+            border-radius: 6px;
+            padding: 4px 24px 4px 10px;
+            font-size: 11px;
+            font-weight: 600;
+            color: #ffffff;
+            outline: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666666'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 8px center;
+            background-size: 12px;
+        }
+
+        .s-stepper {
+            display: inline-flex;
+            border: 1px solid #222222;
+            border-radius: 6px;
+            background: #111111;
+            overflow: hidden;
+        }
+
+        .s-stepper button {
+            padding: 4px 8px;
+            color: #666666;
+            font-size: 12px;
+        }
+
+        .s-stepper button:hover {
+            background: #1a1a1a;
+            color: #ffffff;
+        }
+
+        .s-stepper .s-val {
+            min-width: 40px;
+            text-align: center;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            font-weight: 700;
+            color: #ffffff;
+            padding: 4px 0;
+            border-left: 1px solid #222222;
+            border-right: 1px solid #222222;
+        }
+
+        .s-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 0;
+            border-bottom: 1px solid #1a1a1a;
+        }
+
+        .s-row:last-child {
+            border-bottom: none;
+        }
+
+        #proc-bar {
+            background-color: var(--cocoa-l) !important;
+        }
+
+        #proc-label {
+            color: #ffffff !important;
+        }
+
+        .s-row.disabled {
+            opacity: 0.65 !important;
+        }
+
+        .s-row.disabled .s-stepper,
+        .s-row.disabled .custom-select,
+        .s-row.disabled .toggle-track,
+        .s-row.disabled .chip-container {
+            pointer-events: none !important;
+            opacity: 0.5 !important;
+        }
+
+        .s-row.disabled .info-wrap {
+            pointer-events: auto !important;
+            opacity: 1 !important;
+        }
+
+
+        #btn-start-processing {
+            font-family: 'Montserrat', sans-serif !important;
+        }
+
+        /* Chips */
+        .chip-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid #1a1a1a;
+            transition: all 0.3s ease;
+        }
+
+        .chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 14px;
+            border-radius: 9999px;
+            font-size: 10px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            user-select: none;
+            border: 1px solid #333333;
+            background: rgba(255, 255, 255, 0.03);
+            color: #888888;
+        }
+
+        .chip.active {
+            background: var(--cocoa-l);
+            color: #000000;
+            border-color: var(--cocoa-l);
+        }
+
+        .chip.frozen {
+            background: rgba(255, 255, 255, 0.4);
+            color: #000000;
+            border-color: transparent;
+            cursor: default !important;
+            pointer-events: none;
+        }
+
+        .chip:hover {
+            border-color: #666666;
+        }
+
+        .chip.active:hover {
+            background: var(--cocoa-xl);
+        }
+
+        .chip i {
+            font-size: 9px;
+        }
+
+        .hidden-chip-container {
+            height: 0;
+            opacity: 0;
+            overflow: hidden;
+            margin-top: 0;
+            padding-top: 0;
+            border-top: none;
+        }
+
+        /* Toast Notifications */
+        #toast-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 10000;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            pointer-events: none;
+        }
+        .toast {
+            background: #111;
+            border: 1px solid #2a2a2a;
+            color: #f0ece6;
+            font-size: 11px;
+            font-weight: 600;
+            padding: 10px 18px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            pointer-events: auto;
+            animation: toastIn 0.3s ease-out;
+            max-width: 320px;
+        }
+        .toast.toast-out { animation: toastOut 0.3s ease-in forwards; }
+        .toast-success { border-color: #166534; }
+        .toast-success i { color: #22c55e; }
+        .toast-error { border-color: #7f1d1d; }
+        .toast-error i { color: #ef4444; }
+        .toast-info i { color: var(--cocoa-l); }
+        @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
+        @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }
+
+        /* Stats Empty State */
+        .stats-empty-overlay {
+            position: absolute;
+            inset: 0;
+            z-index: 50;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: rgba(10, 10, 10, 0.85);
+            backdrop-filter: blur(8px);
+            border-radius: 12px;
+        }
+
+        /* Mobile Responsive */
+        @media (max-width: 1024px) {
+            aside.w-60 { display: none; }
+            .mobile-nav { display: flex !important; }
+            #tab-overview { grid-template-columns: repeat(1, 1fr) !important; }
+            #tab-overview > div { grid-column: span 1 !important; }
+        }
+        @media (max-width: 768px) {
+            .grid-cols-3 { grid-template-columns: 1fr !important; }
+            .grid-cols-2 { grid-template-columns: 1fr !important; }
+            main { padding: 8px !important; }
+        }
+
+        /* Feedback form */
+        .fb-textarea {
+            background: #111;
+            border: 1px solid #2a2a2a;
+            border-radius: 8px;
+            color: #f0ece6;
+            font-size: 12px;
+            padding: 12px;
+            width: 100%;
+            min-height: 120px;
+            resize: vertical;
+            font-family: 'Inter', sans-serif;
+        }
+        .fb-textarea:focus { outline: none; border-color: var(--cocoa-l); }
+        .fb-select {
+            background: #111;
+            border: 1px solid #2a2a2a;
+            border-radius: 8px;
+            color: #f0ece6;
+            font-size: 11px;
+            padding: 8px 12px;
+            width: 100%;
+            font-family: 'Inter', sans-serif;
+        }
+        .fb-select:focus { outline: none; border-color: var(--cocoa-l); }
+        .fb-stars { display: flex; gap: 6px; }
+        .fb-star {
+            font-size: 22px;
+            color: #333;
+            cursor: pointer;
+            transition: color 0.15s;
+        }
+        .fb-star.active, .fb-star:hover { color: var(--cocoa-l); }
+        .fb-chip {
+            background: #050505;
+            border: 1px solid #222;
+            border-radius: 8px;
+            color: #666;
+            font-size: 10px;
+            font-weight: 700;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-align: center;
+            text-transform: uppercase;
+            tracking-widest: 0.05em;
+        }
+        .fb-chip:hover { border-color: #444; color: #999; }
+        .fb-chip.active {
+            border-color: var(--cocoa-l);
+            background: #111;
+            color: #fff;
+            box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
+        }
+        .fb-emoji-btn {
+            background: #111;
+            border: 1px solid #2a2a2a;
+            border-radius: 8px;
+            color: #555;
+            flex: 1;
+            text-align: center;
+            padding: 10px 4px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .fb-emoji-btn:hover { border-color: #444; color: #888; }
+        .fb-emoji-btn.active {
+            border-color: var(--cocoa-l);
+            background: #1a1a1a;
+            color: var(--cocoa-l);
+            box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
+        }
+    

frontend/initial.html

@@ -18,102 +18,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UrbanFlow</title>
-    <link rel="icon" type="image/svg+xml" href="rf.png">
+    <link rel="icon" type="image/svg+xml" href="/assets/rf.png">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
         rel="stylesheet">
-    <style>
-        :root {
-            --cocoa: #8b5e3c;
-            --cocoa-l: #c89a6c;
-            --cocoa-xl: #d4b08a;
-            --t1: #f0ece6;
-            --t2: #a89f97;
-            --border: #2a2a2a;
-        }
-
-        body {
-            font-family: 'Montserrat', sans-serif;
-            background-color: #000000;
-            color: var(--t1);
-        }
-
-        .fade-in {
-            animation: fadeIn 0.4s ease-in-out forwards;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Executive Overrides */
-        .traffic-dynamics-card {
-            background-color: #0a0a0a !important;
-            border: 2px solid var(--cocoa) !important;
-        }
-
-        .traffic-dynamics-card:hover {
-            border-color: var(--cocoa-l) !important;
-        }
-
-        #dropzone {
-            transition: all 0.2s ease;
-            border-color: #2a2a2a;
-        }
-
-        #dropzone:hover {
-            border-color: var(--cocoa-l) !important;
-            background-color: #0a0a0a !important;
-        }
-
-        .core-badge {
-            background-color: var(--cocoa) !important;
-            color: var(--t1) !important;
-        }
-
-        /* Onboarding */
-        .onboard-overlay {
-            position: fixed; inset: 0; z-index: 9999;
-            background: rgba(0,0,0,0.92);
-            display: flex; align-items: center; justify-content: center;
-        }
-        .onboard-card {
-            background: #0a0a0a; border: 1px solid #2a2a2a;
-            border-radius: 16px; max-width: 440px; width: 90%;
-            padding: 40px 32px; text-align: center;
-        }
-        .onboard-step { display: none; }
-        .onboard-step.active { display: block; }
-        .onboard-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
-        .onboard-dot {
-            width: 8px; height: 8px; border-radius: 50%;
-            background: #333; transition: background 0.2s;
-        }
-        .onboard-dot.active { background: var(--cocoa-l); }
-
-        /* Mobile responsive */
-        @media (max-width: 768px) {
-            main { grid-template-columns: 1fr !important; padding: 16px !important; }
-            h1 { font-size: 2.2rem !important; }
-        }
-    </style>
+    <link rel="stylesheet" href="/css/initial.css">
 </head>
 
 <body
     class="bg-black text-white min-h-screen w-full flex flex-col items-center selection:bg-white selection:text-black">
 
     <header class="mt-16 flex flex-col items-center flex-shrink-0 w-full z-10">
-        <img src="uf_rf.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3">
+        <img src="/assets/uf_rf.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3">
     </header>
 
     <main
@@ -218,192 +136,7 @@
         </div>
     </main>
 
-    <script>
-        let videoId = null;
-        let runConfig = {};
-
-        function showStep(name) {
-            ['modules', 'upload', 'draw'].forEach(s => {
-                const el = document.getElementById('step-' + s);
-                if (el) el.classList.add('hidden');
-            });
-            const target = document.getElementById('step-' + name);
-            if (target) target.classList.remove('hidden');
-
-            if (name === 'upload') {
-                document.getElementById('upload-progress-container').classList.add('hidden');
-                document.getElementById('dropzone').classList.remove('hidden');
-                // Reset Progress Bar state for new uploads
-                document.getElementById('upload-bar').style.width = '0%';
-                document.getElementById('upload-percentage').innerText = '0%';
-                document.getElementById('upload-text').innerText = 'Uploading...';
-                document.getElementById('upload-text').classList.remove('text-red-500');
-            }
-            if (name === 'draw') loadFirstFrame();
-        }
-
-        const dropzone = document.getElementById('dropzone');
-        const fileInput = document.getElementById('file-input');
-
-        if (fileInput) {
-            fileInput.addEventListener('change', () => {
-                if (fileInput.files.length) uploadFile(fileInput.files[0]);
-            });
-        }
-
-        if (dropzone) {
-            dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.classList.add('border-white', 'bg-neutral-950'); });
-            dropzone.addEventListener('dragleave', () => dropzone.classList.remove('border-white', 'bg-neutral-950'));
-            dropzone.addEventListener('drop', e => {
-                e.preventDefault();
-                dropzone.classList.remove('border-white', 'bg-neutral-950');
-                if (e.dataTransfer.files.length) uploadFile(e.dataTransfer.files[0]);
-            });
-        }
-
-        let currentXHR = null;
-        function uploadFile(file) {
-            // Abort previous upload if it exists to prevent jitter/multiple requests
-            if (currentXHR) currentXHR.abort();
-
-            const dropzoneEl = document.getElementById('dropzone');
-            const prog = document.getElementById('upload-progress-container');
-            const bar = document.getElementById('upload-bar');
-            const pct = document.getElementById('upload-percentage');
-            const txt = document.getElementById('upload-text');
-
-            if (dropzoneEl) dropzoneEl.classList.add('hidden');
-            if (prog) prog.classList.remove('hidden');
-
-            const form = new FormData();
-            form.append('file', file);
-
-            const xhr = new XMLHttpRequest();
-            currentXHR = xhr;
-            xhr.open('POST', '/upload');
-
-            xhr.upload.onprogress = e => {
-                if (e.lengthComputable) {
-                    const p = Math.round(e.loaded / e.total * 100);
-                    bar.style.width = p + '%';
-                    pct.innerText = p + '%';
-                }
-            };
-
-            xhr.onerror = () => {
-                txt.innerText = 'Error: Network failure';
-                txt.classList.add('text-red-500');
-                fileInput.value = '';
-            };
-
-            xhr.onload = () => {
-                if (xhr.status !== 200) {
-                    txt.innerText = 'Error: ' + xhr.status;
-                    txt.classList.add('text-red-500');
-                    fileInput.value = '';
-                    return;
-                }
-                const res = JSON.parse(xhr.responseText);
-                videoId = res.video_id;
-                txt.innerText = 'Extracting Metadata...';
-                bar.style.width = '100%';
-                pct.innerText = '100%';
-
-                fetch('/config/' + videoId)
-                    .then(r => r.json())
-                    .then(cfg => {
-                        runConfig = cfg;
-                        runConfig.conf = 0.12;
-                        runConfig.iou = 0.60;
-                        txt.innerText = 'Initialization Complete';
-                        fileInput.value = '';
-                        setTimeout(() => showStep('draw'), 800);
-                    })
-                    .catch(e => {
-                        txt.innerText = 'Metadata Failed';
-                        txt.classList.add('text-red-500');
-                        fileInput.value = '';
-                    });
-            };
-            xhr.send(form);
-        }
-
-        // Draw Canvas Logic
-        const canvas = document.getElementById('drawing-canvas');
-        const ctx = canvas.getContext('2d');
-        let points = [];
-        let imgNatW = 0, imgNatH = 0;
-
-        function loadFirstFrame() {
-            const img = document.getElementById('frame-img');
-            img.src = '/first-frame/' + videoId;
-            img.onload = () => {
-                imgNatW = img.naturalWidth;
-                imgNatH = img.naturalHeight;
-                img.style.display = 'block';
-                document.getElementById('frame-placeholder').style.display = 'none';
-                initCanvas();
-            };
-        }
-
-        function initCanvas() {
-            if (canvas) {
-                canvas.width = canvas.offsetWidth;
-                canvas.height = canvas.offsetHeight;
-            }
-        }
-
-        window.addEventListener('resize', initCanvas);
-
-        if (canvas) {
-            canvas.addEventListener('mousedown', e => {
-                if (points.length >= 2) return;
-                const rect = canvas.getBoundingClientRect();
-                const cx = e.clientX - rect.left;
-                const cy = e.clientY - rect.top;
-                const rx = (cx / canvas.width) * imgNatW;
-                const ry = (cy / canvas.height) * imgNatH;
-                points.push({ cx, cy, rx: Math.round(rx), ry: Math.round(ry) });
-                drawDot(cx, cy);
-                if (points.length === 2) drawLine();
-            });
-        }
-
-        function drawDot(x, y) {
-            ctx.beginPath();
-            ctx.arc(x, y, 5, 0, Math.PI * 2);
-            ctx.fillStyle = '#c89a6c';
-            ctx.fill();
-            ctx.strokeStyle = '#f0ece6';
-            ctx.lineWidth = 2;
-            ctx.stroke();
-        }
-
-        function drawLine() {
-            ctx.beginPath();
-            ctx.moveTo(points[0].cx, points[0].cy);
-            ctx.lineTo(points[1].cx, points[1].cy);
-            ctx.strokeStyle = '#c89a6c';
-            ctx.lineWidth = 3;
-            ctx.stroke();
-        }
-
-        function resetCanvas() {
-            points = [];
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-        }
-
-        function startRun() {
-            if (points.length < 2) return;
-            const line = [[points[0].rx, points[0].ry], [points[1].rx, points[1].ry]];
-            sessionStorage.setItem('funky_run', JSON.stringify({
-                video_id: videoId,
-                line: line,
-                config: runConfig
-            }));
-            window.location.href = '/';
-        }
-    </script>
+    <script src="/js/initial.js"></script>
 
     <!-- Onboarding Walkthrough -->
     <div id="onboard-overlay" class="onboard-overlay" style="display:none">
@@ -434,22 +167,7 @@
             </div>
         </div>
     </div>
-    <script>
-        let _obStep = 0;
-        function nextOnboardStep() {
-            _obStep++;
-            if (_obStep >= 3) { closeOnboarding(); return; }
-            document.querySelectorAll('.onboard-step').forEach((s, i) => s.classList.toggle('active', i === _obStep));
-            document.querySelectorAll('.onboard-dot').forEach((d, i) => d.classList.toggle('active', i === _obStep));
-            if (_obStep === 2) document.getElementById('onboard-next').innerText = 'Get Started';
-        }
-        function closeOnboarding() {
-            document.getElementById('onboard-overlay').style.display = 'none';
-        }
-        
-        // Show onboarding on every page load
-        document.getElementById('onboard-overlay').style.display = 'flex';
-    </script>
+
 </body>
 
 </html>

frontend/js/initial.js

@@ -0,0 +1,201 @@
+let videoId = null;
+let runConfig = {};
+
+function showStep(name) {
+    ['modules', 'upload', 'draw'].forEach(s => {
+        const el = document.getElementById('step-' + s);
+        if (el) el.classList.add('hidden');
+    });
+    const target = document.getElementById('step-' + name);
+    if (target) target.classList.remove('hidden');
+
+    if (name === 'upload') {
+        document.getElementById('upload-progress-container').classList.add('hidden');
+        document.getElementById('dropzone').classList.remove('hidden');
+        // Reset Progress Bar state for new uploads
+        document.getElementById('upload-bar').style.width = '0%';
+        document.getElementById('upload-percentage').innerText = '0%';
+        document.getElementById('upload-text').innerText = 'Uploading...';
+        document.getElementById('upload-text').classList.remove('text-red-500');
+    }
+    if (name === 'draw') loadFirstFrame();
+}
+
+const dropzone = document.getElementById('dropzone');
+const fileInput = document.getElementById('file-input');
+
+if (fileInput) {
+    fileInput.addEventListener('change', () => {
+        if (fileInput.files.length) uploadFile(fileInput.files[0]);
+    });
+}
+
+if (dropzone) {
+    dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.classList.add('border-white', 'bg-neutral-950'); });
+    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('border-white', 'bg-neutral-950'));
+    dropzone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropzone.classList.remove('border-white', 'bg-neutral-950');
+        if (e.dataTransfer.files.length) uploadFile(e.dataTransfer.files[0]);
+    });
+}
+
+let currentXHR = null;
+function uploadFile(file) {
+    // Abort previous upload if it exists to prevent jitter/multiple requests
+    if (currentXHR) currentXHR.abort();
+
+    const dropzoneEl = document.getElementById('dropzone');
+    const prog = document.getElementById('upload-progress-container');
+    const bar = document.getElementById('upload-bar');
+    const pct = document.getElementById('upload-percentage');
+    const txt = document.getElementById('upload-text');
+
+    if (dropzoneEl) dropzoneEl.classList.add('hidden');
+    if (prog) prog.classList.remove('hidden');
+
+    const form = new FormData();
+    form.append('file', file);
+
+    const xhr = new XMLHttpRequest();
+    currentXHR = xhr;
+    xhr.open('POST', '/upload');
+
+    xhr.upload.onprogress = e => {
+        if (e.lengthComputable) {
+            const p = Math.round(e.loaded / e.total * 100);
+            bar.style.width = p + '%';
+            pct.innerText = p + '%';
+        }
+    };
+
+    xhr.onerror = () => {
+        txt.innerText = 'Error: Network failure';
+        txt.classList.add('text-red-500');
+        fileInput.value = '';
+    };
+
+    xhr.onload = () => {
+        if (xhr.status !== 200) {
+            txt.innerText = 'Error: ' + xhr.status;
+            txt.classList.add('text-red-500');
+            fileInput.value = '';
+            return;
+        }
+        const res = JSON.parse(xhr.responseText);
+        videoId = res.video_id;
+        txt.innerText = 'Extracting Metadata...';
+        bar.style.width = '100%';
+        pct.innerText = '100%';
+
+        fetch('/config/' + videoId)
+            .then(r => r.json())
+            .then(cfg => {
+                runConfig = cfg;
+                runConfig.conf = 0.12;
+                runConfig.iou = 0.60;
+                txt.innerText = 'Initialization Complete';
+                fileInput.value = '';
+                setTimeout(() => showStep('draw'), 800);
+            })
+            .catch(e => {
+                txt.innerText = 'Metadata Failed';
+                txt.classList.add('text-red-500');
+                fileInput.value = '';
+            });
+    };
+    xhr.send(form);
+}
+
+// Draw Canvas Logic
+const canvas = document.getElementById('drawing-canvas');
+const ctx = canvas.getContext('2d');
+let points = [];
+let imgNatW = 0, imgNatH = 0;
+
+function loadFirstFrame() {
+    const img = document.getElementById('frame-img');
+    img.src = '/first-frame/' + videoId;
+    img.onload = () => {
+        imgNatW = img.naturalWidth;
+        imgNatH = img.naturalHeight;
+        img.style.display = 'block';
+        document.getElementById('frame-placeholder').style.display = 'none';
+        initCanvas();
+    };
+}
+
+function initCanvas() {
+    if (canvas) {
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+    }
+}
+
+window.addEventListener('resize', initCanvas);
+
+if (canvas) {
+    canvas.addEventListener('mousedown', e => {
+        if (points.length >= 2) return;
+        const rect = canvas.getBoundingClientRect();
+        const cx = e.clientX - rect.left;
+        const cy = e.clientY - rect.top;
+        const rx = (cx / canvas.width) * imgNatW;
+        const ry = (cy / canvas.height) * imgNatH;
+        points.push({ cx, cy, rx: Math.round(rx), ry: Math.round(ry) });
+        drawDot(cx, cy);
+        if (points.length === 2) drawLine();
+    });
+}
+
+function drawDot(x, y) {
+    ctx.beginPath();
+    ctx.arc(x, y, 5, 0, Math.PI * 2);
+    ctx.fillStyle = '#c89a6c';
+    ctx.fill();
+    ctx.strokeStyle = '#f0ece6';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+}
+
+function drawLine() {
+    ctx.beginPath();
+    ctx.moveTo(points[0].cx, points[0].cy);
+    ctx.lineTo(points[1].cx, points[1].cy);
+    ctx.strokeStyle = '#c89a6c';
+    ctx.lineWidth = 3;
+    ctx.stroke();
+}
+
+function resetCanvas() {
+    points = [];
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+function startRun() {
+    if (points.length < 2) return;
+    const line = [[points[0].rx, points[0].ry], [points[1].rx, points[1].ry]];
+    sessionStorage.setItem('funky_run', JSON.stringify({
+        video_id: videoId,
+        line: line,
+        config: runConfig
+    }));
+    window.location.href = '/';
+}
+
+let _obStep = 0;
+function nextOnboardStep() {
+    _obStep++;
+    if (_obStep >= 3) { closeOnboarding(); return; }
+    document.querySelectorAll('.onboard-step').forEach((s, i) => s.classList.toggle('active', i === _obStep));
+    document.querySelectorAll('.onboard-dot').forEach((d, i) => d.classList.toggle('active', i === _obStep));
+    if (_obStep === 2) document.getElementById('onboard-next').innerText = 'Get Started';
+}
+function closeOnboarding() {
+    document.getElementById('onboard-overlay').style.display = 'none';
+}
+
+// Show onboarding on every page load
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById('onboard-overlay').style.display = 'flex';
+});

frontend/js/vehicles.js

@@ -0,0 +1,1058 @@
+
+        // =========== Rolling Counter ===========
+        function animateValue(obj, start, end, duration) {
+            let startTimestamp = null;
+            const isPct = typeof end === 'string' && end.includes('%');
+            const endNum = isPct ? parseFloat(end) : end;
+            const startNum = parseFloat(start) || 0;
+
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                const ease = progress * (2 - progress);
+                const current = ease * (endNum - startNum) + startNum;
+                
+                if (isPct) {
+                    obj.innerText = current.toFixed(1) + '%';
+                } else {
+                    obj.innerText = Math.floor(current);
+                }
+
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                } else {
+                    obj.innerText = end;
+                }
+            };
+            window.requestAnimationFrame(step);
+        }
+
+        // =========== Tooltip ===========
+        // Position and toggle tooltip visibility
+        document.addEventListener('mouseover', e => {
+            const wrap = e.target.closest('.info-wrap');
+            if (!wrap) return;
+            const tip = wrap.querySelector('.info-tip');
+            if (!tip) return;
+
+            tip.style.display = 'block';
+            const rect = wrap.getBoundingClientRect();
+            const tipH = tip.offsetHeight || 60;
+            if (rect.bottom + tipH + 10 > window.innerHeight) {
+                tip.style.top = (rect.top - tipH - 6) + 'px';
+            } else {
+                tip.style.top = (rect.bottom + 6) + 'px';
+            }
+            tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
+        });
+
+        document.addEventListener('mouseout', e => {
+            const wrap = e.target.closest('.info-wrap');
+            if (!wrap) return;
+            const tip = wrap.querySelector('.info-tip');
+            if (tip) tip.style.display = 'none';
+        });
+
+        document.addEventListener('click', e => {
+            const btn = e.target.closest('.info-btn');
+            if (!btn) return;
+            const wrap = btn.closest('.info-wrap');
+            if (!wrap) return;
+            const tip = wrap.querySelector('.info-tip');
+            if (!tip) return;
+
+            const isVisible = tip.style.display === 'block';
+            tip.style.display = isVisible ? 'none' : 'block';
+
+            if (!isVisible) {
+                const rect = wrap.getBoundingClientRect();
+                const tipH = tip.offsetHeight || 60;
+                if (rect.bottom + tipH + 10 > window.innerHeight) {
+                    tip.style.top = (rect.top - tipH - 6) + 'px';
+                } else {
+                    tip.style.top = (rect.bottom + 6) + 'px';
+                }
+                tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
+            }
+        });
+
+        // =========== Tab switching ===========
+        function switchTab(tab) {
+            ['about', 'overview', 'run-details', 'reports', 'settings', 'feedback'].forEach(t => {
+                const el = document.getElementById('tab-' + t);
+                const nav = document.getElementById('nav-' + t);
+                if (el) el.classList.toggle('hidden', tab !== t);
+                if (nav) {
+                    if (tab === t) {
+                        nav.classList.add('nav-item-active');
+                        nav.classList.remove('nav-item-inactive');
+                    } else {
+                        nav.classList.remove('nav-item-active');
+                        nav.classList.add('nav-item-inactive');
+                    }
+                }
+            });
+        }
+
+        // =========== Toast System ===========
+        function showToast(message, type) {
+            type = type || 'info';
+            const icons = { success: 'fa-check-circle', error: 'fa-circle-xmark', info: 'fa-circle-info' };
+            const el = document.createElement('div');
+            el.className = `toast toast-${type}`;
+            el.innerHTML = `<i class="fa-solid ${icons[type] || icons.info}"></i> ${message}`;
+            document.getElementById('toast-container').appendChild(el);
+            setTimeout(() => { el.classList.add('toast-out'); setTimeout(() => el.remove(), 300); }, 3000);
+        }
+
+        // =========== Keyboard Shortcuts ===========
+        const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'run-details', '4': 'reports', '5': 'settings', '6': 'feedback' };
+        document.addEventListener('keydown', function(e) {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
+            if (TAB_KEYS[e.key]) { switchTab(TAB_KEYS[e.key]); return; }
+            if (e.key === 'd' || e.key === 'D') {
+                const vid = document.body.dataset.lastVideoId;
+                if (vid) {
+                    window.open(`/bundle/${vid}`, '_blank');
+                    showToast('Download started', 'success');
+                }
+            }
+        });
+
+        // =========== Feedback ===========
+        let _fbRating = 0;
+        let _fbEmojis = {
+            'fb-recommend': null,
+            'fb-security': null,
+            'fb-integration': null,
+            'fb-ease': null
+        };
+
+        function setRating(n) {
+            _fbRating = n;
+            document.querySelectorAll('.fb-star').forEach(s => {
+                s.classList.toggle('active', parseInt(s.dataset.v) <= n);
+            });
+        }
+
+        function setEmoji(el, qId, val) {
+            _fbEmojis[qId] = val;
+            const container = document.getElementById(qId);
+            if (container) {
+                container.querySelectorAll('.fb-emoji-btn').forEach(btn => btn.classList.remove('active'));
+            }
+            el.classList.add('active');
+        }
+
+        async function submitFeedback() {
+            const type = document.getElementById('fb-type').value;
+            const text = document.getElementById('fb-text').value.trim();
+            const usecase = document.getElementById('fb-usecase').value;
+            
+            const priorities = [];
+            document.querySelectorAll('#fb-priorities .fb-chip.active').forEach(c => {
+                priorities.push(c.getAttribute('data-val'));
+            });
+
+            if (!text && _fbRating === 0 && !_fbEmojis['fb-recommend'] && !_fbEmojis['fb-security'] && !_fbEmojis['fb-integration'] && !_fbEmojis['fb-ease']) {
+                showToast("Please provide a rating, some emojis, or word feedback", "error");
+                return;
+            }
+
+            const payload = {
+                rating: _fbRating,
+                emojis: _fbEmojis,
+                type: type,
+                usecase: usecase,
+                priorities: priorities,
+                details: text,
+                timestamp: new Date().toISOString()
+            };
+            const res = await fetch('/api/feedback', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            if (res.ok) {
+                showToast('Thank you for your feedback!', 'success');
+                document.getElementById('fb-text').value = '';
+                document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
+                
+                // Reset Emojis
+                Object.keys(_fbEmojis).forEach(k => {
+                    _fbEmojis[k] = null;
+                    const c = document.getElementById(k);
+                    if (c) c.querySelectorAll('.fb-emoji-btn').forEach(b => b.classList.remove('active'));
+                });
+
+                _fbRating = 0;
+                setRating(0);
+            } else {
+                showToast('Failed to submit — please try again', 'error');
+            }
+        }
+
+        // =========== PCU Calculation (client-side mirror) ===========
+        const PCU_TABLE = {0:1,1:1,2:1,3:1,4:3,5:3,6:1.2,7:0.5,8:3,9:3,10:3,11:0.5,12:1,13:1};
+        function calcPCU(classIn, classOut) {
+            let total = 0;
+            for (const [k, v] of Object.entries(classIn)) total += (PCU_TABLE[parseInt(k)] || 1) * v;
+            for (const [k, v] of Object.entries(classOut)) total += (PCU_TABLE[parseInt(k)] || 1) * v;
+            return Math.round(total * 10) / 10;
+        }
+
+        // =========== Insights Rendering ===========
+        function renderInsights(d) {
+            const panel = document.getElementById('insights-panel');
+            panel.classList.remove('hidden');
+
+            // Speed distribution bars
+            const dist = d.speed_distribution || {};
+            const bars = document.getElementById('speed-bars');
+            const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
+            const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
+            bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
+                const pct = dist[cat] || 0;
+                const h = Math.max(8, pct * 1.2);
+                return `<div class="flex flex-col items-center gap-1">
+                    <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
+                    <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
+                    <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
+                </div>`;
+            }).join('');
+
+            // Congestion insights
+            const ci = document.getElementById('congestion-insights');
+            const pcu = d.pcu || {};
+            ci.innerHTML = [
+                infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
+                infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
+                infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
+            ].join('');
+
+            // ---- Also populate Stats tab cards ----
+            // Speed card in Stats
+            const speedCard = document.getElementById('speed-stats-card');
+            if (speedCard) {
+                speedCard.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
+                    ${['slow', 'normal', 'fast'].map(cat => {
+                        const pct = dist[cat] || 0;
+                        const h = Math.max(12, pct * 1.0);
+                        return `<div class="flex flex-col items-center gap-1.5 flex-1">
+                            <span class="text-lg font-black" style="color:${colors[cat]}">${pct}%</span>
+                            <div style="width:100%;max-width:48px;height:${h}px;background:${colors[cat]};border-radius:8px;transition:height 0.5s"></div>
+                            <span class="text-[10px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
+                        </div>`;
+                    }).join('')}
+                </div>`;
+            }
+
+            // PCU card in Stats
+            const pcuCard = document.getElementById('pcu-stats-card');
+            if (pcuCard) {
+                pcuCard.innerHTML = `<div class="space-y-3 w-full">
+                    <div class="flex justify-between items-center">
+                        <span class="text-xs font-medium text-slate-500">Total PCU</span>
+                        <span class="text-2xl font-black" style="color:#8b5e3c">${pcu.total_pcu || 0}</span>
+                    </div>
+                    <div class="flex gap-3">
+                        <div class="flex-1 bg-green-50 rounded-lg p-2.5 text-center border border-green-100">
+                            <div class="text-lg font-bold text-green-700">${pcu.pcu_in || 0}</div>
+                            <div class="text-[9px] font-bold text-green-500 uppercase">PCU In</div>
+                        </div>
+                        <div class="flex-1 bg-red-50 rounded-lg p-2.5 text-center border border-red-100">
+                            <div class="text-lg font-bold text-red-700">${pcu.pcu_out || 0}</div>
+                            <div class="text-[9px] font-bold text-red-500 uppercase">PCU Out</div>
+                        </div>
+                    </div>
+                </div>`;
+            }
+        }
+
+        // =========== Run Details helpers ===========
+        function detailRow(label, value, extra) {
+            extra = extra || '';
+            return `<div class="flex justify-between items-center border-b border-slate-800 pb-2">
+                <span class="text-xs font-medium text-slate-500 mono-font">${label}</span>
+                <span class="text-sm font-bold text-white">${value}${extra}</span>
+            </div>`;
+        }
+
+        function infoRow(label, value, tip, extra) {
+            extra = extra || '';
+            return `<div class="flex justify-between items-center border-b border-slate-800 pb-2 relative">
+                <span class="text-xs font-medium text-slate-500 mono-font flex items-center">${label}
+                    <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                    <span class="info-tip">${tip}</span></span>
+                </span>
+                <span class="text-sm font-bold text-white">${value}${extra}</span>
+            </div>`;
+        }
+
+        function boolBadge(val) {
+            if (val) return `<span class="inline-flex items-center bg-green-50 text-green-700 text-[10px] font-bold px-2 py-0.5 rounded border border-green-200"><i class="fa-solid fa-check mr-1"></i>TRUE</span>`;
+            return `<span class="text-[10px] font-bold text-slate-300">FALSE</span>`;
+        }
+
+        function populateRunDetails(c) {
+            const res = c.resolution || [0, 0];
+
+            document.getElementById('panel-video').innerHTML =
+                detailRow('video_fps', c.video_fps) +
+                detailRow('frames', c.frames) +
+                detailRow('duration', c.duration + ' sec') +
+                detailRow('resolution', res[0] + ' <span class="text-slate-400 text-xs">x</span> ' + res[1]) +
+                detailRow('pixels', (c.pixels || 0).toLocaleString());
+
+            const cpuPct = Math.min(100, Math.round((c.cpu_score / 10) * 100));
+            document.getElementById('panel-perf').innerHTML =
+                `<div class="flex justify-between items-center border-b border-slate-800 pb-2 relative">
+                    <span class="text-xs font-medium text-slate-500 mono-font flex items-center">cpu_score
+                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                        <span class="info-tip">Available CPU core count used for throughput estimation.</span></span>
+                    </span>
+                    <div class="flex items-center">
+                        <span class="text-sm font-bold text-white mr-2">${c.cpu_score}</span>
+                        <div class="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                            <div class="h-full bg-emerald-500" style="width:${cpuPct}%"></div>
+                        </div>
+                    </div>
+                </div>` +
+                infoRow('model_fps_est', c.model_fps_est, 'Estimated model inference throughput based on CPU benchmark.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                infoRow('effective_fps', c.effective_fps_est, 'Adjusted throughput accounting for frame stride.', ' <span class="text-xs text-slate-400 font-normal">fps</span>');
+
+            document.getElementById('panel-model').innerHTML =
+                `<div class="flex justify-between items-center border-b border-slate-800 pb-2">
+                    <span class="text-xs font-medium text-slate-500 mono-font">model</span>
+                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-white mono-font hover:text-slate-300 transition underline underline-offset-4 decoration-slate-700">Perception365/VehicleNet-Y26s</a>
+                </div>` +
+                detailRow('task', 'detect') +
+                detailRow('format', 'OpenVINO') +
+                detailRow('tracker', 'ByteTrack');
+
+            populateInferPanel(c);
+        }
+
+        function populateInferPanel(c) {
+            document.getElementById('panel-infer').innerHTML =
+                infoRow('imgsz', c.imgsz, 'Input image resolution for model inference.') +
+                infoRow('vid_stride', c.detect_stride, 'Frames skipped between consecutive detections relative to the spatial boundary.') +
+                infoRow('conf', (c.conf || 0.12).toFixed(2), 'Minimum confidence threshold for valid detections.') +
+                infoRow('iou', (c.iou || 0.60).toFixed(2), 'Intersection-over-Union threshold for non-max suppression.') +
+                infoRow('stream', 'TRUE', 'Frame-by-frame processing for constant memory usage.') +
+                infoRow('verbose', 'FALSE', 'Console logging suppressed during inference.');
+        }
+
+        // =========== Palettes ===========
+        const PALETTES = {
+            default: { congestion: '#f97316', congestionBg: 'rgba(249,115,22,0.08)', dominance: '#14b8a6', flow: '#3b82f6', doughIn: '#3b82f6', doughOut: '#f97316' },
+            vibrant: { congestion: '#ff2d55', congestionBg: 'rgba(255,45,85,0.08)', dominance: '#a855f7', flow: '#22d3ee', doughIn: '#22d3ee', doughOut: '#ff2d55' },
+            corporate: { congestion: '#1e40af', congestionBg: 'rgba(30,64,175,0.08)', dominance: '#0d9488', flow: '#475569', doughIn: '#475569', doughOut: '#1e40af' },
+            neon: { congestion: '#f0abfc', congestionBg: 'rgba(240,171,252,0.08)', dominance: '#22d3ee', flow: '#a855f7', doughIn: '#a855f7', doughOut: '#f0abfc' },
+            earth: { congestion: '#84cc16', congestionBg: 'rgba(132,204,22,0.08)', dominance: '#22c55e', flow: '#f59e0b', doughIn: '#f59e0b', doughOut: '#84cc16' },
+            ocean: { congestion: '#06b6d4', congestionBg: 'rgba(6,182,212,0.08)', dominance: '#3b82f6', flow: '#14b8a6', doughIn: '#14b8a6', doughOut: '#06b6d4' },
+            sunset: { congestion: '#f59e0b', congestionBg: 'rgba(245,158,11,0.08)', dominance: '#f43f5e', flow: '#fb923c', doughIn: '#fb923c', doughOut: '#f59e0b' },
+            midnight: { congestion: '#38bdf8', congestionBg: 'rgba(56,189,248,0.08)', dominance: '#1d4ed8', flow: '#f8fafc', doughIn: '#f8fafc', doughOut: '#38bdf8' },
+            gold: { congestion: '#fbbf24', congestionBg: 'rgba(251,191,36,0.08)', dominance: '#a8a29e', flow: '#f5f5f4', doughIn: '#f5f5f4', doughOut: '#fbbf24' }
+        };
+
+        // Read settings from sessionStorage (set by settings.html)
+        const rawRun = sessionStorage.getItem('funky_run');
+        const runSettings = rawRun ? (JSON.parse(rawRun).settings || {}) : {};
+        let currentPalette = runSettings.palette || 'default';
+        let activePalette = PALETTES[currentPalette];
+
+        // =========== Charts ===========
+        Chart.defaults.font.family = "'Montserrat', sans-serif";
+        Chart.defaults.color = '#888888';
+        Chart.defaults.borderColor = '#222222';
+        Chart.defaults.plugins.tooltip.backgroundColor = '#0a0a0a';
+        Chart.defaults.plugins.tooltip.titleColor = '#ffffff';
+        Chart.defaults.plugins.tooltip.bodyColor = '#aaaaaa';
+        Chart.defaults.plugins.tooltip.borderColor = '#222222';
+        Chart.defaults.plugins.tooltip.borderWidth = 1;
+
+        let MODEL_CLASSES = {};
+        let BUSINESS_MAP = {};
+
+        const congChart = new Chart(document.getElementById('congestionChart').getContext('2d'), {
+            type: 'line',
+            data: {
+                labels: [], datasets: [{
+                    data: [],
+                    borderColor: activePalette.congestion,
+                    backgroundColor: activePalette.congestionBg,
+                    fill: true,
+                    tension: 0.2,
+                    borderWidth: 1.5,
+                    pointRadius: 0
+                }]
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Frame Index', font: { size: 10, weight: '700' }, color: '#888888' } },
+                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Active Vehicles', font: { size: 10, weight: '700' }, color: '#888888' } }
+                },
+                animation: { duration: 0 }
+            },
+            plugins: []
+        });
+
+        const doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
+            type: 'doughnut',
+            data: {
+                labels: ['Incoming', 'Outgoing'], datasets: [{
+                    data: [0, 0],
+                    backgroundColor: [activePalette.doughIn, activePalette.doughOut],
+                    borderColor: '#0a0a0a',
+                    borderWidth: 3,
+                    hoverOffset: 6
+                }]
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                cutout: '68%',
+                plugins: {
+                    legend: { display: true, position: 'bottom', labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 10, weight: '600' } } }
+                },
+                animation: { duration: 0 }
+            },
+            plugins: []
+        });
+
+        const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
+            type: 'bar',
+            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.dominance, borderRadius: 2 }] },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { font: { size: 10, weight: '500' }, color: '#666666' } },
+                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Total Vehicle Count', font: { size: 10, weight: '700' }, color: '#888888' } }
+                },
+                animation: { duration: 0 }
+            },
+            plugins: []
+        });
+
+        const flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
+            type: 'bar',
+            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.flow, borderColor: '#0a0a0a', borderWidth: 1.5, barPercentage: 1.0, categoryPercentage: 1.0 }] },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Time (seconds)', font: { size: 10, weight: '700' }, color: '#888888' } },
+                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Vehicles Crossed', font: { size: 10, weight: '700' }, color: '#888888' } }
+                },
+                animation: { duration: 0 }
+            },
+            plugins: []
+        });
+
+        // =========== Update functions ===========
+        function sumValues(obj) { return Object.values(obj).reduce((a, b) => a + b, 0); }
+
+        // =========== Live Palette Switching ===========
+        function applyPalette(key) {
+            activePalette = PALETTES[key] || PALETTES.default;
+            currentPalette = key;
+
+            // Congestion
+            congChart.data.datasets[0].borderColor = activePalette.congestion;
+            congChart.data.datasets[0].backgroundColor = activePalette.congestionBg;
+            congChart.update();
+
+            // Doughnut
+            doughChart.data.datasets[0].backgroundColor = [activePalette.doughIn, activePalette.doughOut];
+            doughChart.update();
+
+            // Dominance
+            domChart.data.datasets[0].backgroundColor = activePalette.dominance;
+            domChart.update();
+
+            // Flow
+            flowChart.data.datasets[0].backgroundColor = activePalette.flow;
+            flowChart.update();
+
+            // Update palette dropdown in progress bar
+            const barSel = document.getElementById('live-palette-select');
+            if (barSel) barSel.value = key;
+        }
+
+        function renderPalettePreview(key) {
+            const pal = PALETTES[key];
+            const colors = [
+                { color: pal.congestion, label: 'Congestion' },
+                { color: pal.dominance, label: 'Dominance' },
+                { color: pal.flow, label: 'Flow' },
+                { color: pal.doughIn, label: 'Incoming' },
+                { color: pal.doughOut, label: 'Outgoing' }
+            ];
+            const el = document.getElementById('live-palette-preview');
+            if (el) {
+                el.innerHTML = colors.map(c =>
+                    `<div class="flex-1 rounded-lg overflow-hidden border border-neutral-800">
+                        <div class="h-6" style="background:${c.color}"></div>
+                        <div class="text-[8px] font-bold text-neutral-500 text-center py-1 bg-neutral-900">${c.label}</div>
+                    </div>`
+                ).join('');
+            }
+        }
+
+        function populateSettingsTab(config, settings) {
+            // Populate stepper values from config
+            document.getElementById('sv-imgsz').textContent = config.imgsz || 640;
+            document.getElementById('sv-conf').textContent = (config.conf || 0.12).toFixed(2);
+            document.getElementById('sv-iou').textContent = (config.iou || 0.60).toFixed(2);
+            document.getElementById('sv-stride').textContent = config.detect_stride || 2;
+
+            // Populate export settings
+            const selReport = document.getElementById('sv-report');
+            if (selReport) selReport.value = settings.reportFormat || 'png';
+            const togAnnot = document.getElementById('sv-annotated');
+            if (togAnnot && settings.annotatedVideo) togAnnot.classList.add('active');
+
+            // Set live palette dropdown
+            const sel = document.getElementById('live-palette-select');
+            if (sel) sel.value = currentPalette;
+            renderPalettePreview(currentPalette);
+        }
+
+        // =========== Settings Stepper Logic ===========
+        const PARAM_LIMITS = {
+            imgsz: { min: 640, max: 1280 },
+            conf: { min: 0.10, max: 0.95 },
+            iou: { min: 0.50, max: 0.95 },
+            stride: { min: 1, max: 10 },
+            smoothing: { min: 0.05, max: 0.95 }
+        };
+
+        function stepParam(param, delta) {
+            const el = document.getElementById('sv-' + param);
+            if (!el) return;
+            const limits = PARAM_LIMITS[param];
+            let val = parseFloat(el.textContent);
+            val = Math.round((val + delta) * 100) / 100;
+            val = Math.max(limits.min, Math.min(limits.max, val));
+            el.textContent = (param === 'conf' || param === 'iou' || param === 'smoothing') ? val.toFixed(2) : val;
+        }
+
+        function lockSettings() {
+            document.querySelectorAll('#settings-params .s-row').forEach(row => {
+                const p = row.dataset.param;
+                if (p && p !== 'palette') {
+                    row.classList.add('disabled');
+                }
+            });
+            const reportRow = document.getElementById('sv-report');
+            if (reportRow) reportRow.closest('.s-row').classList.add('disabled');
+            const annotatedRow = document.getElementById('sv-annotated');
+            if (annotatedRow) annotatedRow.closest('.s-row').classList.add('disabled');
+            const wrap = document.getElementById('settings-start-wrap');
+            if (wrap) wrap.style.display = 'none';
+        }
+
+        function startNewAnalysis() {
+            sessionStorage.clear();
+            _params = null;
+            [congChart, doughChart, domChart, flowChart].forEach(c => {
+                c.data.labels = [];
+                c.data.datasets[0].data = [];
+                c.update();
+            });
+            window.location.href = '/';
+        }
+        function updateBreakdown(classIn, classOut) {
+            const container = document.getElementById('class-breakdown');
+            const totalAll = sumValues(classIn) + sumValues(classOut);
+            container.innerHTML = '';
+
+            // Update Doughnut border logic (remove gap if unidirectional)
+            const sumIn = sumValues(classIn);
+            const sumOut = sumValues(classOut);
+            doughChart.data.datasets[0].borderWidth = (sumIn === 0 || sumOut === 0) ? 0 : 3;
+            doughChart.data.datasets[0].data = [sumIn, sumOut];
+            doughChart.update();
+            document.getElementById('cnt-total').innerText = totalAll;
+
+            Object.keys(MODEL_CLASSES).map(Number).sort((a, b) => a - b).forEach(id => {
+                const inC = classIn[String(id)] || 0;
+                const outC = classOut[String(id)] || 0;
+                const total = inC + outC;
+                const pct = totalAll > 0 ? ((total / totalAll) * 100).toFixed(1) : '0.0';
+
+                const row = document.createElement('div');
+                row.className = 'flex items-center justify-between text-xs py-2 border-b border-slate-800';
+                row.innerHTML = `
+                    <div class="w-[30%] font-bold text-white truncate" title="${MODEL_CLASSES[id]}">${MODEL_CLASSES[id]}</div>
+                    <div class="w-[20%] text-slate-500 text-[11px]">${total} total</div>
+                    <div class="w-[15%] text-slate-500 text-[11px]"><i class="fa-solid fa-arrow-down text-[9px] mr-1"></i>${inC}</div>
+                    <div class="w-[15%] text-slate-500 text-[11px]"><i class="fa-solid fa-arrow-up text-[9px] mr-1"></i>${outC}</div>
+                    <div class="w-[20%] text-right font-bold text-white">${pct}%</div>
+                `;
+                container.appendChild(row);
+            });
+        }
+
+        function updateDominance(classIn, classOut) {
+            const labels = [], values = [];
+            for (const [group, ids] of Object.entries(BUSINESS_MAP)) {
+                let total = 0;
+                ids.forEach(id => { total += (classIn[String(id)] || 0) + (classOut[String(id)] || 0); });
+                labels.push(group);
+                values.push(total);
+            }
+            domChart.data.labels = labels;
+            domChart.data.datasets[0].data = values;
+            domChart.update();
+        }
+
+        function buildFlowHistogram(flowTimes, videoDuration) {
+            const binCount = Math.max(1, Math.ceil(videoDuration));
+            const bins = new Array(binCount).fill(0);
+            const labels = [];
+            for (let i = 0; i < binCount; i++) labels.push(i);
+            flowTimes.forEach(t => { bins[Math.min(Math.floor(t), binCount - 1)]++; });
+            flowChart.data.labels = labels;
+            flowChart.data.datasets[0].data = bins;
+            flowChart.update();
+        }
+
+        let _alpha = 0.25;
+
+        function updateCongestion(congestion, stride) {
+            let data = congestion;
+            // Apply EMA smoothing if alpha is less than 1 (1 = no smoothing)
+            if (_alpha < 0.99) {
+                data = [];
+                let s = congestion[0] || 0;
+                for (let v of congestion) {
+                    s = _alpha * v + (1 - _alpha) * s;
+                    data.push(s);
+                }
+            }
+
+            const len = data.length;
+            if (len <= 200) {
+                congChart.data.labels = data.map((_, i) => i * stride);
+                congChart.data.datasets[0].data = data;
+            } else {
+                // Dynamic sampling to keep chart performance high
+                const step = Math.ceil(len / 200);
+                const sampled = [], labels = [];
+                for (let i = 0; i < len; i += step) {
+                    labels.push(i * stride);
+                    sampled.push(data[i]);
+                }
+                congChart.data.labels = labels;
+                congChart.data.datasets[0].data = sampled;
+            }
+            congChart.update();
+        }
+
+        // =========== Main ===========
+        let _params = null;
+
+        async function init() {
+            const raw = sessionStorage.getItem('funky_run');
+            if (!raw) { window.location.href = '/'; return; }
+
+            _params = JSON.parse(raw);
+
+            // SECURITY: Clear session storage so refresh always redirects home
+            sessionStorage.removeItem('funky_run');
+
+            const cRes = await fetch('/constants');
+            const cData = await cRes.json();
+            MODEL_CLASSES = cData.classes;
+            BUSINESS_MAP = cData.business_map;
+
+            populateAndInit(_params);
+
+            // SECURITY: Clear session storage after populate so refresh triggers redirect
+            sessionStorage.removeItem('funky_run');
+
+            // Show Settings tab first, but also initialized with About implicitly in sidebar hierarchy
+            switchTab('settings');
+        }
+
+        function populateAndInit(params) {
+            populateRunDetails(params.config);
+            populateSettingsTab(params.config, params.settings || {});
+        }
+
+        function startProcessingFromSettings() {
+            if (!_params) return;
+
+            // Read current stepper/control values
+            const imgsz = parseInt(document.getElementById('sv-imgsz').textContent);
+            const conf = parseFloat(document.getElementById('sv-conf').textContent);
+            const iou = parseFloat(document.getElementById('sv-iou').textContent);
+            const stride = parseInt(document.getElementById('sv-stride').textContent);
+            const reportFmt = document.getElementById('sv-report').value;
+            const annotated = document.getElementById('sv-annotated').classList.contains('active');
+            _alpha = parseFloat(document.getElementById('sv-smoothing').textContent) || 0.25;
+
+            // Annotation Options
+            const annotated_options = {
+                bbox: true, // Always true if export is enabled
+                spatial: document.getElementById('chip-spatial').classList.contains('active'),
+                class_name: document.getElementById('chip-class_name').classList.contains('active'),
+                class_id: document.getElementById('chip-class_id').classList.contains('active'),
+                track_id: document.getElementById('chip-track_id').classList.contains('active')
+            };
+
+            const exportJson = document.getElementById('sv-export-json').classList.contains('active');
+            const exportCsv = document.getElementById('sv-export-csv').classList.contains('active');
+
+            // Apply to config
+            _params.config.imgsz = imgsz;
+            _params.config.conf = conf;
+            _params.config.iou = iou;
+            _params.config.detect_stride = stride;
+
+            // Reflect final resolved params in Run tab
+            populateInferPanel(_params.config);
+
+            // Lock settings
+            lockSettings();
+
+            // Switch to overview
+            switchTab('overview');
+            document.getElementById('proc-label').innerText = 'Processing';
+
+            // Reset Run Tab Results to Awaiting
+            const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
+            if (analyzeAgainBtn) {
+                analyzeAgainBtn.classList.add('hidden');
+            }
+
+            const badge = document.getElementById('results-status-badge');
+            if (badge) {
+                badge.innerText = 'Processing';
+                badge.className = 'px-2.5 py-1 bg-slate-800 text-white text-[10px] font-bold rounded-full uppercase tracking-tighter animate-pulse';
+            }
+            document.getElementById('run-results-content').innerHTML = `
+                <div class="flex flex-col items-center justify-center p-8 bg-black/40 border border-slate-800 rounded-2xl col-span-3 text-slate-500">
+                    <i class="fa-solid fa-spinner fa-spin text-2xl mb-3 text-white"></i>
+                    <span class="text-xs font-semibold">Executing inference pipeline... results pending</span>
+                </div>`;
+
+            // Update Reports tab pending message
+            const repIcon = document.getElementById('reports-pending-icon');
+            if (repIcon) repIcon.className = 'fa-solid fa-circle-notch fa-spin text-[#c89a6c]';
+            const repText = document.getElementById('reports-pending-text');
+            if (repText) repText.innerText = 'Generating artifacts & rendering analytics... Please wait';
+
+
+            // Start WebSocket
+            const videoDuration = _params.config.duration || 10;
+
+            const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+            const ws = new WebSocket(`${proto}://${location.host}/ws/run`);
+
+            ws.onopen = () => {
+                ws.send(JSON.stringify({
+                    video_id: _params.video_id,
+                    line: _params.line,
+                    config: _params.config,
+                    annotated_video: annotated,
+                    annotated_options: annotated_options,
+                    export_json: exportJson,
+                    export_csv: exportCsv,
+                    report_format: reportFmt
+                }));
+            };
+
+            ws.onerror = e => {
+                console.error('WS Error:', e);
+                document.getElementById('proc-label').innerText = 'Connection Error';
+                showToast('Connection error — server may be busy', 'error');
+                if (badge) {
+                    badge.innerText = 'Pipeline Failed';
+                    badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-100 text-[10px] font-bold rounded-full uppercase tracking-tighter';
+                }
+            };
+
+            let processingDone = false;
+
+            ws.onclose = () => {
+                console.log('WS Closed');
+                if (!processingDone) {
+                    // Closed before done=True received — show error state
+                    document.getElementById('proc-label').innerText = 'Disconnected';
+                    const badge = document.getElementById('results-status-badge');
+                    if (badge) {
+                        badge.innerText = 'Connection Lost';
+                        badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-300 text-[10px] font-bold rounded-full uppercase tracking-tighter';
+                    }
+                    document.getElementById('run-results-content').innerHTML = `
+                        <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-red-900/40 rounded-2xl col-span-3 text-slate-400">
+                            <i class="fa-solid fa-triangle-exclamation text-2xl mb-3 text-red-400"></i>
+                            <span class="text-xs font-semibold mb-1">Processing connection was lost.</span>
+                            <span class="text-[10px] text-slate-500 mb-4">The server may have timed out or restarted. Please try again.</span>
+                            <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
+                                &larr; Start New Analysis
+                            </button>
+                        </div>`;
+                }
+            };
+
+            let lastUIUpdate = 0;
+
+            ws.onmessage = e => {
+                const d = JSON.parse(e.data);
+
+                // Hide empty state on first data
+                const emptyState = document.getElementById('stats-empty-state');
+                if (emptyState) emptyState.style.display = 'none';
+                if (d.error) {
+                    processingDone = true;
+                    document.getElementById('proc-label').innerText = 'Engine Error';
+                    const badge = document.getElementById('results-status-badge');
+                    if (badge) {
+                        badge.innerText = 'Failed';
+                        badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-300 text-[10px] font-bold rounded-full uppercase tracking-tighter';
+                    }
+                    console.error('[UrbanFlow] Engine error:', d.detail || d.error);
+                    document.getElementById('run-results-content').innerHTML = `
+                        <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-red-900/40 rounded-2xl col-span-3 text-slate-400">
+                            <i class="fa-solid fa-triangle-exclamation text-2xl mb-3 text-red-400"></i>
+                            <span class="text-xs font-semibold mb-1">Inference pipeline failed.</span>
+                            <span class="text-[10px] text-slate-500 mb-4 text-center max-w-xs">${d.error}</span>
+                            <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
+                                &larr; Start New Analysis
+                            </button>
+                        </div>`;
+                    return;
+                }
+
+                if (d.done) {
+                    processingDone = true;
+                    document.getElementById('proc-label').innerText = 'Complete';
+                    document.getElementById('proc-bar').style.width = '100%';
+                    document.getElementById('proc-pct').innerText = '100%';
+                    // Force frame counter to n/n
+                    const framesEl = document.getElementById('proc-frames');
+                    if (framesEl) {
+                        const parts = framesEl.innerText.split('/');
+                        if (parts.length === 2) {
+                            const total = parts[1].trim().replace(' Frames', '');
+                            framesEl.innerText = `${total} / ${total} Frames`;
+                        }
+                    }
+
+                    // Update Run Tab Badge
+                    const badge = document.getElementById('results-status-badge');
+                    if (badge) {
+                        badge.innerText = 'Completed';
+                        badge.className = 'px-2.5 py-1 bg-white text-black text-[10px] font-bold rounded-full uppercase tracking-tighter';
+                    }
+
+                    const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
+                    if (analyzeAgainBtn) {
+                        analyzeAgainBtn.classList.remove('hidden');
+                    }
+
+                    document.getElementById('run-results-content').innerHTML =
+                        detailRow('Inference Time', d.processing_time + ' sec') +
+                        infoRow('Throughput (FPS)', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                        infoRow('Real-time Ratio', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
+
+                    if (d.video_id) {
+                        loadReports(d.video_id).then(data => {
+                            if (!data) return;
+
+                            // Auto-Download Logic (Respects live toggle state)
+                            if (document.getElementById('sv-auto-download').classList.contains('active')) {
+                                // Download the full bundle ZIP via direct navigation
+                                setTimeout(() => {
+                                    console.log('[UrbanFlow] Fetching ZIP bundle for:', d.video_id);
+                                    window.open(`/bundle/${d.video_id}`, '_blank');
+                                }, 1000); 
+                            }
+                        });
+                    }
+
+                    // Disable Auto-Download toggle after completion
+                    const adToggle = document.getElementById('sv-auto-download');
+                    if (adToggle) {
+                        adToggle.closest('.s-row').classList.add('disabled');
+                    }
+                    const jsonToggle = document.getElementById('sv-export-json');
+                    if (jsonToggle) {
+                        jsonToggle.closest('.s-row').classList.add('disabled');
+                    }
+                    const csvToggle = document.getElementById('sv-export-csv');
+                    if (csvToggle) {
+                        csvToggle.closest('.s-row').classList.add('disabled');
+                    }
+
+                    // Show New Analysis button in Settings
+                    const newWrap = document.getElementById('new-analysis-wrap');
+                    if (newWrap) newWrap.classList.remove('hidden');
+
+                    // Toast + Insights
+                    showToast('Processing complete — artifacts ready', 'success');
+                    renderInsights(d);
+
+                    // Store video_id for keyboard shortcut download
+                    document.body.setAttribute('data-last-video-id', d.video_id);
+
+                    return;
+                }
+
+                let pct = ((d.frame_index / d.total_iters) * 100).toFixed(1);
+                if (d.frame_index >= d.total_iters - 1) pct = '100.0';
+                document.getElementById('proc-bar').style.width = pct + '%';
+                document.getElementById('proc-frames').innerText = `${d.frame_index} / ${d.total_iters} Frames`;
+                
+                const procPctEl = document.getElementById('proc-pct');
+                const currPct = parseFloat(procPctEl.innerText) || 0;
+                animateValue(procPctEl, currPct, pct + '%', 300);
+
+                const totalIn = sumValues(d.class_in);
+                const totalOut = sumValues(d.class_out);
+                
+                const cntTotalEl = document.getElementById('cnt-total');
+                const currTotal = parseInt(cntTotalEl.innerText) || 0;
+                animateValue(cntTotalEl, currTotal, totalIn + totalOut, 300);
+
+                // Update PCU display
+                const pcuVal = calcPCU(d.class_in, d.class_out);
+                const pcuEl = document.getElementById('cnt-pcu');
+                if (pcuEl) pcuEl.innerText = pcuVal;
+
+                // Update doughnut
+                doughChart.data.datasets[0].data = [totalIn, totalOut];
+                doughChart.update();
+
+                const now = performance.now();
+                if (now - lastUIUpdate < 300) return;
+                lastUIUpdate = now;
+
+                updateCongestion(d.congestion, stride);
+                updateBreakdown(d.class_in, d.class_out);
+                updateDominance(d.class_in, d.class_out);
+                buildFlowHistogram(d.flow_times, videoDuration);
+            };
+        }
+
+        const REPORT_LABELS = {
+            'direction_pie.png': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
+            'direction_pie.pdf': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
+            'flow_over_time.png': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
+            'flow_over_time.pdf': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
+            'congestion_index.png': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
+            'congestion_index.pdf': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
+            'class_dominance.png': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
+            'class_dominance.pdf': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
+            'confidence_dist.png': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
+            'confidence_dist.pdf': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
+            'annotated.mp4': { title: 'Annotated Video Export', desc: 'Rendered video with tracking overlays' },
+            'heatmap.png': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
+            'heatmap.pdf': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
+            'raw_data.csv': { title: 'Raw Analytics Export', desc: 'Comma-separated values of all crossings' },
+            'analysis.json': { title: 'Structured JSON Export', desc: 'Complete analysis data with metadata for API consumption' }
+        };
+
+        async function loadReports(videoId) {
+            const res = await fetch(`/reports/${videoId}`, { method: 'POST' });
+            const data = await res.json();
+            if (!data.files || !data.files.length) return null;
+
+            document.getElementById('reports-pending').classList.add('hidden');
+            document.getElementById('reports-pending-message').classList.add('hidden');
+            document.getElementById('post-process-cards').classList.remove('hidden');
+            const grid = document.getElementById('reports-grid');
+            grid.classList.remove('hidden');
+            grid.innerHTML = '';
+
+            data.files.forEach(name => {
+                const info = REPORT_LABELS[name] || { title: name, desc: '' };
+                const url = `/reports/${videoId}/${name}`;
+                const isVideo = name.endsWith('.mp4');
+                const isPDF = name.endsWith('.pdf');
+                const isCSV = name.endsWith('.csv');
+                const card = document.createElement('div');
+                card.className = 'bg-black rounded-xl border border-slate-800 shadow-sm flex flex-col overflow-hidden';
+
+                let previewHTML = '';
+                if (isVideo) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
+                            <i class="fa-solid fa-film text-6xl mb-4 text-white"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Video Ready for Local Analysis</span>
+                        </div>`;
+                } else if (isPDF) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
+                            <i class="fa-solid fa-file-pdf text-6xl mb-4 text-white"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">PDF Document</span>
+                        </div>`;
+                } else if (isCSV) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
+                            <i class="fa-solid fa-file-csv text-6xl mb-4 text-white"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Raw Analytics Export</span>
+                        </div>`;
+                } else if (name.endsWith('.json')) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
+                            <i class="fa-solid fa-code text-6xl mb-4 text-white"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Structured JSON</span>
+                        </div>`;
+                } else {
+                    previewHTML = `<img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">`;
+                }
+
+                card.innerHTML = `
+                    <div class="px-5 py-3 border-b border-slate-800 bg-slate-900/40 flex justify-between items-center">
+                        <div>
+                            <h3 class="font-bold text-white text-sm">${info.title}</h3>
+                            <p class="text-[10px] text-slate-400 mt-0.5">${info.desc}</p>
+                        </div>
+                        <a href="${url}" download="${name}"
+                           class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-[#444444] text-white text-[10px] font-bold rounded-full hover:bg-neutral-800 transition uppercase tracking-wider">
+                            <i class="fa-solid fa-download text-[9px]"></i> Download
+                        </a>
+                    </div>
+                    <div class="p-4 flex items-center justify-center bg-black/30">
+                        ${previewHTML}
+                    </div>
+                `;
+                grid.appendChild(card);
+            });
+            return data;
+        }
+
+        function toggleExportMaster(el) {
+            el.classList.toggle('active');
+            const chips = document.getElementById('chip-selector');
+            if (el.classList.contains('active')) {
+                chips.classList.remove('hidden-chip-container');
+            } else {
+                chips.classList.add('hidden-chip-container');
+            }
+        }
+
+        function toggleAutoDownload(el) {
+            el.classList.toggle('active');
+        }
+
+        function toggleChip(id) {
+            const chip = document.getElementById(`chip-${id}`);
+            chip.classList.toggle('active');
+            const icon = chip.querySelector('i');
+            if (chip.classList.contains('active')) {
+                icon.className = 'fa-solid fa-check';
+            } else {
+                icon.className = 'fa-solid fa-plus';
+            }
+        }
+
+        init();
+    

frontend/run_details.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta http-equiv="refresh" content="0;url=vehicles.html">
-</head>
-
-</html>

frontend/settings.html

@@ -1,433 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UrbanFlow</title>
-    <link rel="icon" type="image/svg+xml" href="rf.png">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
-        rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-
-        .font-montserrat {
-            font-family: 'Montserrat', sans-serif;
-        }
-
-        .mono-font {
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        .fade-in {
-            animation: fadeIn 0.4s ease-in-out forwards;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        :root {
-            --cocoa: #8b5e3c;
-            --cocoa-l: #c89a6c;
-            --cocoa-xl: #d4b08a;
-            --t1: #f0ece6;
-            --t2: #a89f97;
-            --border: #2a2a2a;
-        }
-
-        .bg-glow {
-            position: absolute;
-            width: 600px;
-            height: 600px;
-            background: radial-gradient(circle, rgba(139,94,60,0.08) 0%, rgba(0,0,0,0) 70%);
-            top: 50%;
-            left: 0;
-            transform: translateY(-50%);
-            z-index: -1;
-            pointer-events: none;
-        }
-
-        .toggle-track {
-            width: 36px;
-            height: 20px;
-            border-radius: 10px;
-            background: #2a2a2a;
-            position: relative;
-            cursor: pointer;
-            transition: background 0.2s;
-            flex-shrink: 0;
-        }
-
-        .toggle-track.active {
-            background: var(--cocoa-l);
-        }
-
-        .toggle-thumb {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: #555;
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            transition: transform 0.2s;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-        }
-
-        .toggle-track.active .toggle-thumb {
-            transform: translateX(16px);
-            background: #000;
-        }
-
-        .toggle-track.locked {
-            opacity: 0.4;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-
-        .custom-select {
-            appearance: none;
-            background: #111;
-            border: 1px solid #2a2a2a;
-            border-radius: 8px;
-            padding: 6px 32px 6px 12px;
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--t1);
-            cursor: pointer;
-            outline: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a89f97'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 10px center;
-            background-size: 14px;
-            transition: border-color 0.15s;
-        }
-
-        .custom-select:hover {
-            border-color: var(--cocoa);
-        }
-
-        .custom-select:focus {
-            border-color: var(--cocoa-l);
-        }
-
-        .custom-select:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-        }
-
-        .stepper-btn {
-            cursor: pointer;
-        }
-
-        .stepper-btn:disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-        }
-
-        .setting-card {
-            background: #0a0a0a;
-            border: 1px solid #2a2a2a;
-            border-radius: 16px;
-            box-shadow: 0 4px 24px rgba(0,0,0,0.6);
-            overflow: hidden;
-        }
-
-        .setting-card-header {
-            padding: 16px 24px;
-            border-bottom: 1px solid #1a1a1a;
-        }
-
-        .setting-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 14px 24px;
-            border-bottom: 1px solid #111;
-        }
-
-        .setting-row:last-child {
-            border-bottom: none;
-        }
-    </style>
-</head>
-
-<body
-    class="min-h-screen w-full overflow-x-hidden flex flex-col items-center relative z-0"
-    style="background:#000;color:#f0ece6;font-family:'Montserrat',sans-serif">
-
-    <div class="bg-glow"></div>
-
-    <header class="mt-6 flex flex-col items-center flex-shrink-0 w-full z-10">
-        <img src="uf_rf.png" alt="UrbanFlow Logo" class="h-28 w-auto object-contain mb-2">
-        <div class="flex items-center space-x-3">
-            <span class="w-12 h-[1px]" style="background:#2a2a2a"></span>
-            <p class="font-montserrat font-bold tracking-[0.25em] uppercase text-[10px] text-center" style="color:#a89f97">
-                Inference Configuration
-            </p>
-            <span class="w-12 h-[1px]" style="background:#2a2a2a"></span>
-        </div>
-    </header>
-
-    <main class="flex-1 w-full max-w-4xl mx-auto px-8 py-6 z-10 fade-in">
-
-        <div class="grid grid-cols-2 gap-5 mb-6">
-
-            <!-- Processing Parameters (locked once started) -->
-            <div class="setting-card" id="card-processing">
-                <div class="setting-card-header">
-                    <h3 class="font-montserrat font-bold text-base" style="color:#f0ece6">Processing Parameters</h3>
-                    <p class="text-[10px] font-montserrat font-medium mt-1 uppercase tracking-widest" style="color:#a89f97">
-                        Auto-configured &middot; adjustable before start</p>
-                </div>
-
-                <!-- Image Size -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">Image Size</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Model input resolution</div>
-                    </div>
-                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('imgsz',-1)">
-                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
-                        </button>
-                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-imgsz">640</span>
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('imgsz',1)">
-                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Confidence -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">Confidence</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Minimum detection threshold</div>
-                    </div>
-                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('conf',-1)">
-                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
-                        </button>
-                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-conf">0.12</span>
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('conf',1)">
-                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- IoU -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">IoU Threshold</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Non-max suppression overlap</div>
-                    </div>
-                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('iou',-1)">
-                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
-                        </button>
-                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-iou">0.60</span>
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('iou',1)">
-                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Frame Stride -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">Frame Stride</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Frames skipped between detections</div>
-                    </div>
-                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('detect_stride',-1)">
-                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
-                        </button>
-                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-detect_stride">3</span>
-                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('detect_stride',1)">
-                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Report Format -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">Report Format</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Export file type for report charts</div>
-                    </div>
-                    <select class="custom-select" id="sel-report-format">
-                        <option value="png" selected>PNG Image</option>
-                        <option value="pdf">PDF Document</option>
-                    </select>
-                </div>
-
-                <!-- Annotated Video -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">Export Annotated Video</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Bounding boxes · track IDs · spatial boundary</div>
-                    </div>
-                    <div class="toggle-track" id="tog-annotated" onclick="toggleSwitch(this)">
-                        <div class="toggle-thumb"></div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Display Preferences (editable anytime) -->
-            <div class="setting-card" id="card-display">
-                <div class="setting-card-header">
-                    <h3 class="font-montserrat font-bold text-base" style="color:#f0ece6">Display Preferences</h3>
-                    <p class="text-[10px] font-montserrat font-medium mt-1 uppercase tracking-widest" style="color:#a89f97">
-                        Editable anytime &middot; applies to live charts</p>
-                </div>
-
-                <!-- Chart Color Palette -->
-                <div class="setting-row">
-                    <div>
-                        <div class="text-xs font-semibold" style="color:#f0ece6">Chart Color Palette</div>
-                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Color scheme for all dashboard charts</div>
-                    </div>
-                    <select class="custom-select" id="sel-palette">
-                        <option value="default" selected>Default</option>
-                        <option value="vibrant">Vibrant</option>
-                        <option value="corporate">Corporate</option>
-                        <option value="neon">Neon Night</option>
-                        <option value="earth">Earth Tones</option>
-                        <option value="ocean">Ocean Breeze</option>
-                        <option value="sunset">Sunset Glow</option>
-                        <option value="midnight">Midnight Deep</option>
-                        <option value="gold">Monochrome Gold</option>
-                    </select>
-                </div>
-
-                <!-- Palette Preview -->
-                <div class="px-6 py-4">
-                    <div class="text-[10px] font-bold uppercase tracking-widest mb-3" style="color:#a89f97">Palette Preview</div>
-                    <div class="flex gap-2" id="palette-preview"></div>
-                </div>
-            </div>
-
-        </div>
-
-        <!-- Start Button -->
-        <button id="btn-start" onclick="startProcessing()"
-            class="w-full py-4 rounded-full font-montserrat font-semibold transition-all text-sm flex justify-center items-center shadow-lg"
-            style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
-            Initiate Processing <i class="fa-solid fa-arrow-right ml-3 text-sm"></i>
-        </button>
-
-    </main>
-
-    <script>
-        // =========== Config params ===========
-        const paramDefs = {
-            imgsz: { step: 32, min: 640, max: 1280, decimals: 0 },
-            conf: { step: 0.01, min: 0.08, max: 1.0, decimals: 2 },
-            iou: { step: 0.05, min: 0.5, max: 1.0, decimals: 2 },
-            detect_stride: { step: 1, min: 1, max: 10, decimals: 0 }
-        };
-
-        // =========== Palette definitions ===========
-        const PALETTES = {
-            default: { congestion: '#f97316', dominance: '#14b8a6', flow: '#3b82f6', label: 'Default' },
-            vibrant: { congestion: '#ff2d55', dominance: '#a855f7', flow: '#22d3ee', label: 'Vibrant' },
-            corporate: { congestion: '#1e40af', dominance: '#0d9488', flow: '#475569', label: 'Corporate' },
-            neon: { congestion: '#f0abfc', dominance: '#22d3ee', flow: '#a855f7', label: 'Neon Night' },
-            earth: { congestion: '#84cc16', dominance: '#22c55e', flow: '#f59e0b', label: 'Earth Tones' },
-            ocean: { congestion: '#06b6d4', dominance: '#3b82f6', flow: '#14b8a6', label: 'Ocean Breeze' },
-            sunset: { congestion: '#f59e0b', dominance: '#f43f5e', flow: '#fb923c', label: 'Sunset Glow' },
-            midnight: { congestion: '#38bdf8', dominance: '#1d4ed8', flow: '#f8fafc', label: 'Midnight Deep' },
-            gold: { congestion: '#fbbf24', dominance: '#a8a29e', flow: '#f5f5f4', label: 'Monochrome Gold' }
-        };
-
-        // =========== Load run data from initial.html ===========
-        const raw = sessionStorage.getItem('funky_run');
-        if (!raw) { window.location.href = '/'; }
-        const runData = JSON.parse(raw);
-        const config = runData.config;
-
-        // Populate stepper values from auto-calculated config
-        function renderValues() {
-            for (const key of Object.keys(paramDefs)) {
-                const d = paramDefs[key].decimals;
-                const val = config[key];
-                document.getElementById('val-' + key).innerText = d ? val.toFixed(d) : val;
-            }
-        }
-        renderValues();
-
-        // =========== Stepper ===========
-        function adjust(key, dir) {
-            const p = paramDefs[key];
-            let val = config[key] + dir * p.step;
-            val = Math.max(p.min, Math.min(p.max, val));
-            val = p.decimals ? parseFloat(val.toFixed(p.decimals)) : Math.round(val);
-            config[key] = val;
-            document.getElementById('val-' + key).innerText = p.decimals ? val.toFixed(p.decimals) : val;
-        }
-
-        // =========== Toggle ===========
-        function toggleSwitch(el) {
-            if (el.classList.contains('locked')) return;
-            el.classList.toggle('active');
-        }
-
-        // =========== Palette preview ===========
-        function updatePalettePreview() {
-            const key = document.getElementById('sel-palette').value;
-            const pal = PALETTES[key];
-            const container = document.getElementById('palette-preview');
-            const colors = [
-                { color: pal.congestion, label: 'Congestion' },
-                { color: pal.dominance, label: 'Dominance' },
-                { color: pal.flow, label: 'Flow' }
-            ];
-            container.innerHTML = colors.map(c =>
-                `<div class="flex-1 rounded-lg overflow-hidden border border-slate-100">
-                    <div class="h-8" style="background:${c.color}"></div>
-                    <div class="text-[9px] font-bold text-slate-500 text-center py-1.5 bg-slate-50">${c.label}</div>
-                </div>`
-            ).join('');
-        }
-        document.getElementById('sel-palette').addEventListener('change', updatePalettePreview);
-        updatePalettePreview();
-
-        // =========== Start Processing ===========
-        function startProcessing() {
-            // Gather settings
-            const settings = {
-                reportFormat: document.getElementById('sel-report-format').value,
-                annotatedVideo: document.getElementById('tog-annotated').classList.contains('active'),
-                palette: document.getElementById('sel-palette').value
-            };
-
-            // Update config from steppers (already in config object)
-            // Save everything to sessionStorage
-            sessionStorage.setItem('funky_run', JSON.stringify({
-                video_id: runData.video_id,
-                line: runData.line,
-                config: config,
-                settings: settings
-            }));
-
-            window.location.href = 'vehicles.html';
-        }
-    </script>
-</body>
-
-</html>

frontend/vehicles.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UrbanFlow</title>
-    <link rel="icon" type="image/svg+xml" href="rf.png">
+    <link rel="icon" type="image/svg+xml" href="/assets/rf.png">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -13,456 +13,7 @@
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
         rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --cocoa: #8b5e3c;
-            --cocoa-l: #c89a6c;
-            --cocoa-xl: #d4b08a;
-        }
-
-        body {
-            font-family: 'Montserrat', sans-serif;
-            background-color: #000000;
-            color: #f0ece6;
-        }
-
-        .mono-font {
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        ::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #000000;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #222222;
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #333333;
-        }
-
-        .info-wrap {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            margin-left: 6px;
-        }
-
-        .info-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #444444 !important;
-            color: #ffffff !important;
-            font-size: 7px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .info-btn:hover {
-            background: #666666 !important;
-        }
-
-        .info-tip {
-            display: none;
-            position: fixed;
-            z-index: 9999;
-            background: #0a0a0a;
-            color: #aaaaaa;
-            font-size: 10px;
-            font-weight: 500;
-            line-height: 1.4;
-            padding: 8px 12px;
-            border-radius: 6px;
-            max-width: 240px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
-            border: 1px solid #222222;
-            pointer-events: none;
-            text-transform: none;
-            letter-spacing: normal;
-        }
-
-        /* Nav states */
-        .nav-item-active {
-            background-color: #111111 !important;
-            color: var(--cocoa-xl) !important;
-            border-left: 2px solid var(--cocoa-l) !important;
-        }
-
-        .nav-item-inactive {
-            color: #555555 !important;
-        }
-
-        .nav-item-inactive:hover {
-            color: #f0ece6 !important;
-            background-color: #050505 !important;
-        }
-
-        /* Card Overrides */
-        .bg-white {
-            background-color: #0a0a0a !important;
-        }
-
-        .border-slate-200,
-        .border-slate-100,
-        .border-slate-50,
-        .border-neutral-800,
-        .border-neutral-900 {
-            border-color: #2a2a2a !important;
-        }
-
-        .bg-slate-50\/50,
-        .bg-slate-50,
-        .bg-slate-900,
-        .bg-neutral-900 {
-            background-color: #0c0c0c !important;
-        }
-
-        .text-slate-900,
-        .text-slate-800,
-        .text-slate-700,
-        .text-neutral-900 {
-            color: #ffffff !important;
-        }
-
-        .text-slate-600,
-        .text-slate-500,
-        .text-slate-400,
-        .text-neutral-500,
-        .text-neutral-400 {
-            color: #888888 !important;
-        }
-
-        .shadow-sm {
-            box-shadow: none !important;
-        }
-
-        /* Controls */
-        .toggle-track {
-            width: 32px;
-            height: 18px;
-            border-radius: 9px;
-            background: #222222;
-            position: relative;
-            cursor: pointer;
-        }
-
-        .toggle-track.active {
-            background: var(--cocoa-l);
-        }
-
-        .toggle-thumb {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #555555;
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            transition: all 0.2s ease;
-        }
-
-        .toggle-track.active .toggle-thumb {
-            transform: translateX(14px);
-            background: #000000;
-        }
-
-        .custom-select {
-            appearance: none;
-            background-color: #111111;
-            border: 1px solid #222222;
-            border-radius: 6px;
-            padding: 4px 24px 4px 10px;
-            font-size: 11px;
-            font-weight: 600;
-            color: #ffffff;
-            outline: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666666'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 8px center;
-            background-size: 12px;
-        }
-
-        .s-stepper {
-            display: inline-flex;
-            border: 1px solid #222222;
-            border-radius: 6px;
-            background: #111111;
-            overflow: hidden;
-        }
-
-        .s-stepper button {
-            padding: 4px 8px;
-            color: #666666;
-            font-size: 12px;
-        }
-
-        .s-stepper button:hover {
-            background: #1a1a1a;
-            color: #ffffff;
-        }
-
-        .s-stepper .s-val {
-            min-width: 40px;
-            text-align: center;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 12px;
-            font-weight: 700;
-            color: #ffffff;
-            padding: 4px 0;
-            border-left: 1px solid #222222;
-            border-right: 1px solid #222222;
-        }
-
-        .s-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px 0;
-            border-bottom: 1px solid #1a1a1a;
-        }
-
-        .s-row:last-child {
-            border-bottom: none;
-        }
-
-        #proc-bar {
-            background-color: var(--cocoa-l) !important;
-        }
-
-        #proc-label {
-            color: #ffffff !important;
-        }
-
-        .s-row.disabled {
-            opacity: 0.65 !important;
-        }
-
-        .s-row.disabled .s-stepper,
-        .s-row.disabled .custom-select,
-        .s-row.disabled .toggle-track,
-        .s-row.disabled .chip-container {
-            pointer-events: none !important;
-            opacity: 0.5 !important;
-        }
-
-        .s-row.disabled .info-wrap {
-            pointer-events: auto !important;
-            opacity: 1 !important;
-        }
-
-
-        #btn-start-processing {
-            font-family: 'Montserrat', sans-serif !important;
-        }
-
-        /* Chips */
-        .chip-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 12px;
-            padding-top: 12px;
-            border-top: 1px solid #1a1a1a;
-            transition: all 0.3s ease;
-        }
-
-        .chip {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 6px 14px;
-            border-radius: 9999px;
-            font-size: 10px;
-            font-weight: 700;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            user-select: none;
-            border: 1px solid #333333;
-            background: rgba(255, 255, 255, 0.03);
-            color: #888888;
-        }
-
-        .chip.active {
-            background: var(--cocoa-l);
-            color: #000000;
-            border-color: var(--cocoa-l);
-        }
-
-        .chip.frozen {
-            background: rgba(255, 255, 255, 0.4);
-            color: #000000;
-            border-color: transparent;
-            cursor: default !important;
-            pointer-events: none;
-        }
-
-        .chip:hover {
-            border-color: #666666;
-        }
-
-        .chip.active:hover {
-            background: var(--cocoa-xl);
-        }
-
-        .chip i {
-            font-size: 9px;
-        }
-
-        .hidden-chip-container {
-            height: 0;
-            opacity: 0;
-            overflow: hidden;
-            margin-top: 0;
-            padding-top: 0;
-            border-top: none;
-        }
-
-        /* Toast Notifications */
-        #toast-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 10000;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            pointer-events: none;
-        }
-        .toast {
-            background: #111;
-            border: 1px solid #2a2a2a;
-            color: #f0ece6;
-            font-size: 11px;
-            font-weight: 600;
-            padding: 10px 18px;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            pointer-events: auto;
-            animation: toastIn 0.3s ease-out;
-            max-width: 320px;
-        }
-        .toast.toast-out { animation: toastOut 0.3s ease-in forwards; }
-        .toast-success { border-color: #166534; }
-        .toast-success i { color: #22c55e; }
-        .toast-error { border-color: #7f1d1d; }
-        .toast-error i { color: #ef4444; }
-        .toast-info i { color: var(--cocoa-l); }
-        @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
-        @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }
-
-        /* Stats Empty State */
-        .stats-empty-overlay {
-            position: absolute;
-            inset: 0;
-            z-index: 50;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background: rgba(10, 10, 10, 0.85);
-            backdrop-filter: blur(8px);
-            border-radius: 12px;
-        }
-
-        /* Mobile Responsive */
-        @media (max-width: 1024px) {
-            aside.w-60 { display: none; }
-            .mobile-nav { display: flex !important; }
-            #tab-overview { grid-template-columns: repeat(1, 1fr) !important; }
-            #tab-overview > div { grid-column: span 1 !important; }
-        }
-        @media (max-width: 768px) {
-            .grid-cols-3 { grid-template-columns: 1fr !important; }
-            .grid-cols-2 { grid-template-columns: 1fr !important; }
-            main { padding: 8px !important; }
-        }
-
-        /* Feedback form */
-        .fb-textarea {
-            background: #111;
-            border: 1px solid #2a2a2a;
-            border-radius: 8px;
-            color: #f0ece6;
-            font-size: 12px;
-            padding: 12px;
-            width: 100%;
-            min-height: 120px;
-            resize: vertical;
-            font-family: 'Inter', sans-serif;
-        }
-        .fb-textarea:focus { outline: none; border-color: var(--cocoa-l); }
-        .fb-select {
-            background: #111;
-            border: 1px solid #2a2a2a;
-            border-radius: 8px;
-            color: #f0ece6;
-            font-size: 11px;
-            padding: 8px 12px;
-            width: 100%;
-            font-family: 'Inter', sans-serif;
-        }
-        .fb-select:focus { outline: none; border-color: var(--cocoa-l); }
-        .fb-stars { display: flex; gap: 6px; }
-        .fb-star {
-            font-size: 22px;
-            color: #333;
-            cursor: pointer;
-            transition: color 0.15s;
-        }
-        .fb-star.active, .fb-star:hover { color: var(--cocoa-l); }
-        .fb-chip {
-            background: #050505;
-            border: 1px solid #222;
-            border-radius: 8px;
-            color: #666;
-            font-size: 10px;
-            font-weight: 700;
-            padding: 12px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            text-align: center;
-            text-transform: uppercase;
-            tracking-widest: 0.05em;
-        }
-        .fb-chip:hover { border-color: #444; color: #999; }
-        .fb-chip.active {
-            border-color: var(--cocoa-l);
-            background: #111;
-            color: #fff;
-            box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
-        }
-        .fb-emoji-btn {
-            background: #111;
-            border: 1px solid #2a2a2a;
-            border-radius: 8px;
-            color: #555;
-            flex: 1;
-            text-align: center;
-            padding: 10px 4px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .fb-emoji-btn:hover { border-color: #444; color: #888; }
-        .fb-emoji-btn.active {
-            border-color: var(--cocoa-l);
-            background: #1a1a1a;
-            color: var(--cocoa-l);
-            box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
-        }
-    </style>
+    <link rel="stylesheet" href="/css/vehicles.css">
 </head>
 
 <body class="bg-black text-white h-screen w-screen overflow-hidden flex">
@@ -470,7 +21,7 @@
     <!-- Sidebar -->
     <aside class="w-60 bg-white shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-slate-200 relative">
         <div class="h-28 bg-black flex items-center justify-center px-4 my-2 border-b border-slate-800 flex-shrink-0">
-            <img id="sidebar-logo-top" src="uf_rf.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain">
+            <img id="sidebar-logo-top" src="/assets/uf_rf.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain">
         </div>
         <nav class="flex-1 px-4 py-4 space-y-1.5 overflow-y-auto text-sm">
             <a onclick="switchTab('about')" id="nav-about"
@@ -514,7 +65,7 @@
 
     <!-- Mobile Navigation (hidden on desktop) -->
     <div class="mobile-nav hidden fixed top-0 left-0 right-0 z-30 bg-black border-b border-slate-800 px-2 py-1.5 items-center justify-between">
-        <img src="uf_rf.png" alt="UF" class="h-8">
+        <img src="/assets/uf_rf.png" alt="UF" class="h-8">
         <div class="flex gap-1">
             <button onclick="switchTab('about')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-circle-info"></i></button>
             <button onclick="switchTab('overview')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-desktop"></i></button>
@@ -1291,1064 +842,7 @@
 
     </main>
 
-    <script>
-        // =========== Rolling Counter ===========
-        function animateValue(obj, start, end, duration) {
-            let startTimestamp = null;
-            const isPct = typeof end === 'string' && end.includes('%');
-            const endNum = isPct ? parseFloat(end) : end;
-            const startNum = parseFloat(start) || 0;
-
-            const step = (timestamp) => {
-                if (!startTimestamp) startTimestamp = timestamp;
-                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-                const ease = progress * (2 - progress);
-                const current = ease * (endNum - startNum) + startNum;
-                
-                if (isPct) {
-                    obj.innerText = current.toFixed(1) + '%';
-                } else {
-                    obj.innerText = Math.floor(current);
-                }
-
-                if (progress < 1) {
-                    window.requestAnimationFrame(step);
-                } else {
-                    obj.innerText = end;
-                }
-            };
-            window.requestAnimationFrame(step);
-        }
-
-        // =========== Tooltip ===========
-        // Position and toggle tooltip visibility
-        document.addEventListener('mouseover', e => {
-            const wrap = e.target.closest('.info-wrap');
-            if (!wrap) return;
-            const tip = wrap.querySelector('.info-tip');
-            if (!tip) return;
-
-            tip.style.display = 'block';
-            const rect = wrap.getBoundingClientRect();
-            const tipH = tip.offsetHeight || 60;
-            if (rect.bottom + tipH + 10 > window.innerHeight) {
-                tip.style.top = (rect.top - tipH - 6) + 'px';
-            } else {
-                tip.style.top = (rect.bottom + 6) + 'px';
-            }
-            tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
-        });
-
-        document.addEventListener('mouseout', e => {
-            const wrap = e.target.closest('.info-wrap');
-            if (!wrap) return;
-            const tip = wrap.querySelector('.info-tip');
-            if (tip) tip.style.display = 'none';
-        });
-
-        document.addEventListener('click', e => {
-            const btn = e.target.closest('.info-btn');
-            if (!btn) return;
-            const wrap = btn.closest('.info-wrap');
-            if (!wrap) return;
-            const tip = wrap.querySelector('.info-tip');
-            if (!tip) return;
-
-            const isVisible = tip.style.display === 'block';
-            tip.style.display = isVisible ? 'none' : 'block';
-
-            if (!isVisible) {
-                const rect = wrap.getBoundingClientRect();
-                const tipH = tip.offsetHeight || 60;
-                if (rect.bottom + tipH + 10 > window.innerHeight) {
-                    tip.style.top = (rect.top - tipH - 6) + 'px';
-                } else {
-                    tip.style.top = (rect.bottom + 6) + 'px';
-                }
-                tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
-            }
-        });
-
-        // =========== Tab switching ===========
-        function switchTab(tab) {
-            ['about', 'overview', 'run-details', 'reports', 'settings', 'feedback'].forEach(t => {
-                const el = document.getElementById('tab-' + t);
-                const nav = document.getElementById('nav-' + t);
-                if (el) el.classList.toggle('hidden', tab !== t);
-                if (nav) {
-                    if (tab === t) {
-                        nav.classList.add('nav-item-active');
-                        nav.classList.remove('nav-item-inactive');
-                    } else {
-                        nav.classList.remove('nav-item-active');
-                        nav.classList.add('nav-item-inactive');
-                    }
-                }
-            });
-        }
-
-        // =========== Toast System ===========
-        function showToast(message, type) {
-            type = type || 'info';
-            const icons = { success: 'fa-check-circle', error: 'fa-circle-xmark', info: 'fa-circle-info' };
-            const el = document.createElement('div');
-            el.className = `toast toast-${type}`;
-            el.innerHTML = `<i class="fa-solid ${icons[type] || icons.info}"></i> ${message}`;
-            document.getElementById('toast-container').appendChild(el);
-            setTimeout(() => { el.classList.add('toast-out'); setTimeout(() => el.remove(), 300); }, 3000);
-        }
-
-        // =========== Keyboard Shortcuts ===========
-        const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'run-details', '4': 'reports', '5': 'settings', '6': 'feedback' };
-        document.addEventListener('keydown', function(e) {
-            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
-            if (TAB_KEYS[e.key]) { switchTab(TAB_KEYS[e.key]); return; }
-            if (e.key === 'd' || e.key === 'D') {
-                const vid = document.body.dataset.lastVideoId;
-                if (vid) {
-                    window.open(`/bundle/${vid}`, '_blank');
-                    showToast('Download started', 'success');
-                }
-            }
-        });
-
-        // =========== Feedback ===========
-        let _fbRating = 0;
-        let _fbEmojis = {
-            'fb-recommend': null,
-            'fb-security': null,
-            'fb-integration': null,
-            'fb-ease': null
-        };
-
-        function setRating(n) {
-            _fbRating = n;
-            document.querySelectorAll('.fb-star').forEach(s => {
-                s.classList.toggle('active', parseInt(s.dataset.v) <= n);
-            });
-        }
-
-        function setEmoji(el, qId, val) {
-            _fbEmojis[qId] = val;
-            const container = document.getElementById(qId);
-            if (container) {
-                container.querySelectorAll('.fb-emoji-btn').forEach(btn => btn.classList.remove('active'));
-            }
-            el.classList.add('active');
-        }
-
-        async function submitFeedback() {
-            const type = document.getElementById('fb-type').value;
-            const text = document.getElementById('fb-text').value.trim();
-            const usecase = document.getElementById('fb-usecase').value;
-            
-            const priorities = [];
-            document.querySelectorAll('#fb-priorities .fb-chip.active').forEach(c => {
-                priorities.push(c.getAttribute('data-val'));
-            });
-
-            if (!text && _fbRating === 0 && !_fbEmojis['fb-recommend'] && !_fbEmojis['fb-security'] && !_fbEmojis['fb-integration'] && !_fbEmojis['fb-ease']) {
-                showToast("Please provide a rating, some emojis, or word feedback", "error");
-                return;
-            }
-
-            const payload = {
-                rating: _fbRating,
-                emojis: _fbEmojis,
-                type: type,
-                usecase: usecase,
-                priorities: priorities,
-                details: text,
-                timestamp: new Date().toISOString()
-            };
-            const res = await fetch('/api/feedback', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
-            if (res.ok) {
-                showToast('Thank you for your feedback!', 'success');
-                document.getElementById('fb-text').value = '';
-                document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
-                
-                // Reset Emojis
-                Object.keys(_fbEmojis).forEach(k => {
-                    _fbEmojis[k] = null;
-                    const c = document.getElementById(k);
-                    if (c) c.querySelectorAll('.fb-emoji-btn').forEach(b => b.classList.remove('active'));
-                });
-
-                _fbRating = 0;
-                setRating(0);
-            } else {
-                showToast('Failed to submit — please try again', 'error');
-            }
-        }
-
-        // =========== PCU Calculation (client-side mirror) ===========
-        const PCU_TABLE = {0:1,1:1,2:1,3:1,4:3,5:3,6:1.2,7:0.5,8:3,9:3,10:3,11:0.5,12:1,13:1};
-        function calcPCU(classIn, classOut) {
-            let total = 0;
-            for (const [k, v] of Object.entries(classIn)) total += (PCU_TABLE[parseInt(k)] || 1) * v;
-            for (const [k, v] of Object.entries(classOut)) total += (PCU_TABLE[parseInt(k)] || 1) * v;
-            return Math.round(total * 10) / 10;
-        }
-
-        // =========== Insights Rendering ===========
-        function renderInsights(d) {
-            const panel = document.getElementById('insights-panel');
-            panel.classList.remove('hidden');
-
-            // Speed distribution bars
-            const dist = d.speed_distribution || {};
-            const bars = document.getElementById('speed-bars');
-            const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
-            const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
-            bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
-                const pct = dist[cat] || 0;
-                const h = Math.max(8, pct * 1.2);
-                return `<div class="flex flex-col items-center gap-1">
-                    <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
-                    <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
-                    <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
-                </div>`;
-            }).join('');
-
-            // Congestion insights
-            const ci = document.getElementById('congestion-insights');
-            const pcu = d.pcu || {};
-            ci.innerHTML = [
-                infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
-                infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
-                infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
-            ].join('');
-
-            // ---- Also populate Stats tab cards ----
-            // Speed card in Stats
-            const speedCard = document.getElementById('speed-stats-card');
-            if (speedCard) {
-                speedCard.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
-                    ${['slow', 'normal', 'fast'].map(cat => {
-                        const pct = dist[cat] || 0;
-                        const h = Math.max(12, pct * 1.0);
-                        return `<div class="flex flex-col items-center gap-1.5 flex-1">
-                            <span class="text-lg font-black" style="color:${colors[cat]}">${pct}%</span>
-                            <div style="width:100%;max-width:48px;height:${h}px;background:${colors[cat]};border-radius:8px;transition:height 0.5s"></div>
-                            <span class="text-[10px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
-                        </div>`;
-                    }).join('')}
-                </div>`;
-            }
-
-            // PCU card in Stats
-            const pcuCard = document.getElementById('pcu-stats-card');
-            if (pcuCard) {
-                pcuCard.innerHTML = `<div class="space-y-3 w-full">
-                    <div class="flex justify-between items-center">
-                        <span class="text-xs font-medium text-slate-500">Total PCU</span>
-                        <span class="text-2xl font-black" style="color:#8b5e3c">${pcu.total_pcu || 0}</span>
-                    </div>
-                    <div class="flex gap-3">
-                        <div class="flex-1 bg-green-50 rounded-lg p-2.5 text-center border border-green-100">
-                            <div class="text-lg font-bold text-green-700">${pcu.pcu_in || 0}</div>
-                            <div class="text-[9px] font-bold text-green-500 uppercase">PCU In</div>
-                        </div>
-                        <div class="flex-1 bg-red-50 rounded-lg p-2.5 text-center border border-red-100">
-                            <div class="text-lg font-bold text-red-700">${pcu.pcu_out || 0}</div>
-                            <div class="text-[9px] font-bold text-red-500 uppercase">PCU Out</div>
-                        </div>
-                    </div>
-                </div>`;
-            }
-        }
-
-        // =========== Run Details helpers ===========
-        function detailRow(label, value, extra) {
-            extra = extra || '';
-            return `<div class="flex justify-between items-center border-b border-slate-800 pb-2">
-                <span class="text-xs font-medium text-slate-500 mono-font">${label}</span>
-                <span class="text-sm font-bold text-white">${value}${extra}</span>
-            </div>`;
-        }
-
-        function infoRow(label, value, tip, extra) {
-            extra = extra || '';
-            return `<div class="flex justify-between items-center border-b border-slate-800 pb-2 relative">
-                <span class="text-xs font-medium text-slate-500 mono-font flex items-center">${label}
-                    <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                    <span class="info-tip">${tip}</span></span>
-                </span>
-                <span class="text-sm font-bold text-white">${value}${extra}</span>
-            </div>`;
-        }
-
-        function boolBadge(val) {
-            if (val) return `<span class="inline-flex items-center bg-green-50 text-green-700 text-[10px] font-bold px-2 py-0.5 rounded border border-green-200"><i class="fa-solid fa-check mr-1"></i>TRUE</span>`;
-            return `<span class="text-[10px] font-bold text-slate-300">FALSE</span>`;
-        }
-
-        function populateRunDetails(c) {
-            const res = c.resolution || [0, 0];
-
-            document.getElementById('panel-video').innerHTML =
-                detailRow('video_fps', c.video_fps) +
-                detailRow('frames', c.frames) +
-                detailRow('duration', c.duration + ' sec') +
-                detailRow('resolution', res[0] + ' <span class="text-slate-400 text-xs">x</span> ' + res[1]) +
-                detailRow('pixels', (c.pixels || 0).toLocaleString());
-
-            const cpuPct = Math.min(100, Math.round((c.cpu_score / 10) * 100));
-            document.getElementById('panel-perf').innerHTML =
-                `<div class="flex justify-between items-center border-b border-slate-800 pb-2 relative">
-                    <span class="text-xs font-medium text-slate-500 mono-font flex items-center">cpu_score
-                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                        <span class="info-tip">Available CPU core count used for throughput estimation.</span></span>
-                    </span>
-                    <div class="flex items-center">
-                        <span class="text-sm font-bold text-white mr-2">${c.cpu_score}</span>
-                        <div class="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
-                            <div class="h-full bg-emerald-500" style="width:${cpuPct}%"></div>
-                        </div>
-                    </div>
-                </div>` +
-                infoRow('model_fps_est', c.model_fps_est, 'Estimated model inference throughput based on CPU benchmark.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                infoRow('effective_fps', c.effective_fps_est, 'Adjusted throughput accounting for frame stride.', ' <span class="text-xs text-slate-400 font-normal">fps</span>');
-
-            document.getElementById('panel-model').innerHTML =
-                `<div class="flex justify-between items-center border-b border-slate-800 pb-2">
-                    <span class="text-xs font-medium text-slate-500 mono-font">model</span>
-                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-white mono-font hover:text-slate-300 transition underline underline-offset-4 decoration-slate-700">Perception365/VehicleNet-Y26s</a>
-                </div>` +
-                detailRow('task', 'detect') +
-                detailRow('format', 'OpenVINO') +
-                detailRow('tracker', 'ByteTrack');
-
-            populateInferPanel(c);
-        }
-
-        function populateInferPanel(c) {
-            document.getElementById('panel-infer').innerHTML =
-                infoRow('imgsz', c.imgsz, 'Input image resolution for model inference.') +
-                infoRow('vid_stride', c.detect_stride, 'Frames skipped between consecutive detections relative to the spatial boundary.') +
-                infoRow('conf', (c.conf || 0.12).toFixed(2), 'Minimum confidence threshold for valid detections.') +
-                infoRow('iou', (c.iou || 0.60).toFixed(2), 'Intersection-over-Union threshold for non-max suppression.') +
-                infoRow('stream', 'TRUE', 'Frame-by-frame processing for constant memory usage.') +
-                infoRow('verbose', 'FALSE', 'Console logging suppressed during inference.');
-        }
-
-        // =========== Palettes ===========
-        const PALETTES = {
-            default: { congestion: '#f97316', congestionBg: 'rgba(249,115,22,0.08)', dominance: '#14b8a6', flow: '#3b82f6', doughIn: '#3b82f6', doughOut: '#f97316' },
-            vibrant: { congestion: '#ff2d55', congestionBg: 'rgba(255,45,85,0.08)', dominance: '#a855f7', flow: '#22d3ee', doughIn: '#22d3ee', doughOut: '#ff2d55' },
-            corporate: { congestion: '#1e40af', congestionBg: 'rgba(30,64,175,0.08)', dominance: '#0d9488', flow: '#475569', doughIn: '#475569', doughOut: '#1e40af' },
-            neon: { congestion: '#f0abfc', congestionBg: 'rgba(240,171,252,0.08)', dominance: '#22d3ee', flow: '#a855f7', doughIn: '#a855f7', doughOut: '#f0abfc' },
-            earth: { congestion: '#84cc16', congestionBg: 'rgba(132,204,22,0.08)', dominance: '#22c55e', flow: '#f59e0b', doughIn: '#f59e0b', doughOut: '#84cc16' },
-            ocean: { congestion: '#06b6d4', congestionBg: 'rgba(6,182,212,0.08)', dominance: '#3b82f6', flow: '#14b8a6', doughIn: '#14b8a6', doughOut: '#06b6d4' },
-            sunset: { congestion: '#f59e0b', congestionBg: 'rgba(245,158,11,0.08)', dominance: '#f43f5e', flow: '#fb923c', doughIn: '#fb923c', doughOut: '#f59e0b' },
-            midnight: { congestion: '#38bdf8', congestionBg: 'rgba(56,189,248,0.08)', dominance: '#1d4ed8', flow: '#f8fafc', doughIn: '#f8fafc', doughOut: '#38bdf8' },
-            gold: { congestion: '#fbbf24', congestionBg: 'rgba(251,191,36,0.08)', dominance: '#a8a29e', flow: '#f5f5f4', doughIn: '#f5f5f4', doughOut: '#fbbf24' }
-        };
-
-        // Read settings from sessionStorage (set by settings.html)
-        const rawRun = sessionStorage.getItem('funky_run');
-        const runSettings = rawRun ? (JSON.parse(rawRun).settings || {}) : {};
-        let currentPalette = runSettings.palette || 'default';
-        let activePalette = PALETTES[currentPalette];
-
-        // =========== Charts ===========
-        Chart.defaults.font.family = "'Montserrat', sans-serif";
-        Chart.defaults.color = '#888888';
-        Chart.defaults.borderColor = '#222222';
-        Chart.defaults.plugins.tooltip.backgroundColor = '#0a0a0a';
-        Chart.defaults.plugins.tooltip.titleColor = '#ffffff';
-        Chart.defaults.plugins.tooltip.bodyColor = '#aaaaaa';
-        Chart.defaults.plugins.tooltip.borderColor = '#222222';
-        Chart.defaults.plugins.tooltip.borderWidth = 1;
-
-        let MODEL_CLASSES = {};
-        let BUSINESS_MAP = {};
-
-        const congChart = new Chart(document.getElementById('congestionChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: [], datasets: [{
-                    data: [],
-                    borderColor: activePalette.congestion,
-                    backgroundColor: activePalette.congestionBg,
-                    fill: true,
-                    tension: 0.2,
-                    borderWidth: 1.5,
-                    pointRadius: 0
-                }]
-            },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Frame Index', font: { size: 10, weight: '700' }, color: '#888888' } },
-                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Active Vehicles', font: { size: 10, weight: '700' }, color: '#888888' } }
-                },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
-
-        const doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
-            type: 'doughnut',
-            data: {
-                labels: ['Incoming', 'Outgoing'], datasets: [{
-                    data: [0, 0],
-                    backgroundColor: [activePalette.doughIn, activePalette.doughOut],
-                    borderColor: '#0a0a0a',
-                    borderWidth: 3,
-                    hoverOffset: 6
-                }]
-            },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                cutout: '68%',
-                plugins: {
-                    legend: { display: true, position: 'bottom', labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 10, weight: '600' } } }
-                },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
-
-        const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
-            type: 'bar',
-            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.dominance, borderRadius: 2 }] },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { grid: { display: false }, ticks: { font: { size: 10, weight: '500' }, color: '#666666' } },
-                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Total Vehicle Count', font: { size: 10, weight: '700' }, color: '#888888' } }
-                },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
-
-        const flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
-            type: 'bar',
-            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.flow, borderColor: '#0a0a0a', borderWidth: 1.5, barPercentage: 1.0, categoryPercentage: 1.0 }] },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Time (seconds)', font: { size: 10, weight: '700' }, color: '#888888' } },
-                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Vehicles Crossed', font: { size: 10, weight: '700' }, color: '#888888' } }
-                },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
-
-        // =========== Update functions ===========
-        function sumValues(obj) { return Object.values(obj).reduce((a, b) => a + b, 0); }
-
-        // =========== Live Palette Switching ===========
-        function applyPalette(key) {
-            activePalette = PALETTES[key] || PALETTES.default;
-            currentPalette = key;
-
-            // Congestion
-            congChart.data.datasets[0].borderColor = activePalette.congestion;
-            congChart.data.datasets[0].backgroundColor = activePalette.congestionBg;
-            congChart.update();
-
-            // Doughnut
-            doughChart.data.datasets[0].backgroundColor = [activePalette.doughIn, activePalette.doughOut];
-            doughChart.update();
-
-            // Dominance
-            domChart.data.datasets[0].backgroundColor = activePalette.dominance;
-            domChart.update();
-
-            // Flow
-            flowChart.data.datasets[0].backgroundColor = activePalette.flow;
-            flowChart.update();
-
-            // Update palette dropdown in progress bar
-            const barSel = document.getElementById('live-palette-select');
-            if (barSel) barSel.value = key;
-        }
-
-        function renderPalettePreview(key) {
-            const pal = PALETTES[key];
-            const colors = [
-                { color: pal.congestion, label: 'Congestion' },
-                { color: pal.dominance, label: 'Dominance' },
-                { color: pal.flow, label: 'Flow' },
-                { color: pal.doughIn, label: 'Incoming' },
-                { color: pal.doughOut, label: 'Outgoing' }
-            ];
-            const el = document.getElementById('live-palette-preview');
-            if (el) {
-                el.innerHTML = colors.map(c =>
-                    `<div class="flex-1 rounded-lg overflow-hidden border border-neutral-800">
-                        <div class="h-6" style="background:${c.color}"></div>
-                        <div class="text-[8px] font-bold text-neutral-500 text-center py-1 bg-neutral-900">${c.label}</div>
-                    </div>`
-                ).join('');
-            }
-        }
-
-        function populateSettingsTab(config, settings) {
-            // Populate stepper values from config
-            document.getElementById('sv-imgsz').textContent = config.imgsz || 640;
-            document.getElementById('sv-conf').textContent = (config.conf || 0.12).toFixed(2);
-            document.getElementById('sv-iou').textContent = (config.iou || 0.60).toFixed(2);
-            document.getElementById('sv-stride').textContent = config.detect_stride || 2;
-
-            // Populate export settings
-            const selReport = document.getElementById('sv-report');
-            if (selReport) selReport.value = settings.reportFormat || 'png';
-            const togAnnot = document.getElementById('sv-annotated');
-            if (togAnnot && settings.annotatedVideo) togAnnot.classList.add('active');
-
-            // Set live palette dropdown
-            const sel = document.getElementById('live-palette-select');
-            if (sel) sel.value = currentPalette;
-            renderPalettePreview(currentPalette);
-        }
-
-        // =========== Settings Stepper Logic ===========
-        const PARAM_LIMITS = {
-            imgsz: { min: 640, max: 1280 },
-            conf: { min: 0.10, max: 0.95 },
-            iou: { min: 0.50, max: 0.95 },
-            stride: { min: 1, max: 10 },
-            smoothing: { min: 0.05, max: 0.95 }
-        };
-
-        function stepParam(param, delta) {
-            const el = document.getElementById('sv-' + param);
-            if (!el) return;
-            const limits = PARAM_LIMITS[param];
-            let val = parseFloat(el.textContent);
-            val = Math.round((val + delta) * 100) / 100;
-            val = Math.max(limits.min, Math.min(limits.max, val));
-            el.textContent = (param === 'conf' || param === 'iou' || param === 'smoothing') ? val.toFixed(2) : val;
-        }
-
-        function lockSettings() {
-            document.querySelectorAll('#settings-params .s-row').forEach(row => {
-                const p = row.dataset.param;
-                if (p && p !== 'palette') {
-                    row.classList.add('disabled');
-                }
-            });
-            const reportRow = document.getElementById('sv-report');
-            if (reportRow) reportRow.closest('.s-row').classList.add('disabled');
-            const annotatedRow = document.getElementById('sv-annotated');
-            if (annotatedRow) annotatedRow.closest('.s-row').classList.add('disabled');
-            const wrap = document.getElementById('settings-start-wrap');
-            if (wrap) wrap.style.display = 'none';
-        }
-
-        function startNewAnalysis() {
-            sessionStorage.clear();
-            _params = null;
-            [congChart, doughChart, domChart, flowChart].forEach(c => {
-                c.data.labels = [];
-                c.data.datasets[0].data = [];
-                c.update();
-            });
-            window.location.href = '/';
-        }
-        function updateBreakdown(classIn, classOut) {
-            const container = document.getElementById('class-breakdown');
-            const totalAll = sumValues(classIn) + sumValues(classOut);
-            container.innerHTML = '';
-
-            // Update Doughnut border logic (remove gap if unidirectional)
-            const sumIn = sumValues(classIn);
-            const sumOut = sumValues(classOut);
-            doughChart.data.datasets[0].borderWidth = (sumIn === 0 || sumOut === 0) ? 0 : 3;
-            doughChart.data.datasets[0].data = [sumIn, sumOut];
-            doughChart.update();
-            document.getElementById('cnt-total').innerText = totalAll;
-
-            Object.keys(MODEL_CLASSES).map(Number).sort((a, b) => a - b).forEach(id => {
-                const inC = classIn[String(id)] || 0;
-                const outC = classOut[String(id)] || 0;
-                const total = inC + outC;
-                const pct = totalAll > 0 ? ((total / totalAll) * 100).toFixed(1) : '0.0';
-
-                const row = document.createElement('div');
-                row.className = 'flex items-center justify-between text-xs py-2 border-b border-slate-800';
-                row.innerHTML = `
-                    <div class="w-[30%] font-bold text-white truncate" title="${MODEL_CLASSES[id]}">${MODEL_CLASSES[id]}</div>
-                    <div class="w-[20%] text-slate-500 text-[11px]">${total} total</div>
-                    <div class="w-[15%] text-slate-500 text-[11px]"><i class="fa-solid fa-arrow-down text-[9px] mr-1"></i>${inC}</div>
-                    <div class="w-[15%] text-slate-500 text-[11px]"><i class="fa-solid fa-arrow-up text-[9px] mr-1"></i>${outC}</div>
-                    <div class="w-[20%] text-right font-bold text-white">${pct}%</div>
-                `;
-                container.appendChild(row);
-            });
-        }
-
-        function updateDominance(classIn, classOut) {
-            const labels = [], values = [];
-            for (const [group, ids] of Object.entries(BUSINESS_MAP)) {
-                let total = 0;
-                ids.forEach(id => { total += (classIn[String(id)] || 0) + (classOut[String(id)] || 0); });
-                labels.push(group);
-                values.push(total);
-            }
-            domChart.data.labels = labels;
-            domChart.data.datasets[0].data = values;
-            domChart.update();
-        }
-
-        function buildFlowHistogram(flowTimes, videoDuration) {
-            const binCount = Math.max(1, Math.ceil(videoDuration));
-            const bins = new Array(binCount).fill(0);
-            const labels = [];
-            for (let i = 0; i < binCount; i++) labels.push(i);
-            flowTimes.forEach(t => { bins[Math.min(Math.floor(t), binCount - 1)]++; });
-            flowChart.data.labels = labels;
-            flowChart.data.datasets[0].data = bins;
-            flowChart.update();
-        }
-
-        let _alpha = 0.25;
-
-        function updateCongestion(congestion, stride) {
-            let data = congestion;
-            // Apply EMA smoothing if alpha is less than 1 (1 = no smoothing)
-            if (_alpha < 0.99) {
-                data = [];
-                let s = congestion[0] || 0;
-                for (let v of congestion) {
-                    s = _alpha * v + (1 - _alpha) * s;
-                    data.push(s);
-                }
-            }
-
-            const len = data.length;
-            if (len <= 200) {
-                congChart.data.labels = data.map((_, i) => i * stride);
-                congChart.data.datasets[0].data = data;
-            } else {
-                // Dynamic sampling to keep chart performance high
-                const step = Math.ceil(len / 200);
-                const sampled = [], labels = [];
-                for (let i = 0; i < len; i += step) {
-                    labels.push(i * stride);
-                    sampled.push(data[i]);
-                }
-                congChart.data.labels = labels;
-                congChart.data.datasets[0].data = sampled;
-            }
-            congChart.update();
-        }
-
-        // =========== Main ===========
-        let _params = null;
-
-        async function init() {
-            const raw = sessionStorage.getItem('funky_run');
-            if (!raw) { window.location.href = '/'; return; }
-
-            _params = JSON.parse(raw);
-
-            // SECURITY: Clear session storage so refresh always redirects home
-            sessionStorage.removeItem('funky_run');
-
-            const cRes = await fetch('/constants');
-            const cData = await cRes.json();
-            MODEL_CLASSES = cData.classes;
-            BUSINESS_MAP = cData.business_map;
-
-            populateAndInit(_params);
-
-            // SECURITY: Clear session storage after populate so refresh triggers redirect
-            sessionStorage.removeItem('funky_run');
-
-            // Show Settings tab first, but also initialized with About implicitly in sidebar hierarchy
-            switchTab('settings');
-        }
-
-        function populateAndInit(params) {
-            populateRunDetails(params.config);
-            populateSettingsTab(params.config, params.settings || {});
-        }
-
-        function startProcessingFromSettings() {
-            if (!_params) return;
-
-            // Read current stepper/control values
-            const imgsz = parseInt(document.getElementById('sv-imgsz').textContent);
-            const conf = parseFloat(document.getElementById('sv-conf').textContent);
-            const iou = parseFloat(document.getElementById('sv-iou').textContent);
-            const stride = parseInt(document.getElementById('sv-stride').textContent);
-            const reportFmt = document.getElementById('sv-report').value;
-            const annotated = document.getElementById('sv-annotated').classList.contains('active');
-            _alpha = parseFloat(document.getElementById('sv-smoothing').textContent) || 0.25;
-
-            // Annotation Options
-            const annotated_options = {
-                bbox: true, // Always true if export is enabled
-                spatial: document.getElementById('chip-spatial').classList.contains('active'),
-                class_name: document.getElementById('chip-class_name').classList.contains('active'),
-                class_id: document.getElementById('chip-class_id').classList.contains('active'),
-                track_id: document.getElementById('chip-track_id').classList.contains('active')
-            };
-
-            const exportJson = document.getElementById('sv-export-json').classList.contains('active');
-            const exportCsv = document.getElementById('sv-export-csv').classList.contains('active');
-
-            // Apply to config
-            _params.config.imgsz = imgsz;
-            _params.config.conf = conf;
-            _params.config.iou = iou;
-            _params.config.detect_stride = stride;
-
-            // Reflect final resolved params in Run tab
-            populateInferPanel(_params.config);
-
-            // Lock settings
-            lockSettings();
-
-            // Switch to overview
-            switchTab('overview');
-            document.getElementById('proc-label').innerText = 'Processing';
-
-            // Reset Run Tab Results to Awaiting
-            const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
-            if (analyzeAgainBtn) {
-                analyzeAgainBtn.classList.add('hidden');
-            }
-
-            const badge = document.getElementById('results-status-badge');
-            if (badge) {
-                badge.innerText = 'Processing';
-                badge.className = 'px-2.5 py-1 bg-slate-800 text-white text-[10px] font-bold rounded-full uppercase tracking-tighter animate-pulse';
-            }
-            document.getElementById('run-results-content').innerHTML = `
-                <div class="flex flex-col items-center justify-center p-8 bg-black/40 border border-slate-800 rounded-2xl col-span-3 text-slate-500">
-                    <i class="fa-solid fa-spinner fa-spin text-2xl mb-3 text-white"></i>
-                    <span class="text-xs font-semibold">Executing inference pipeline... results pending</span>
-                </div>`;
-
-            // Update Reports tab pending message
-            const repIcon = document.getElementById('reports-pending-icon');
-            if (repIcon) repIcon.className = 'fa-solid fa-circle-notch fa-spin text-[#c89a6c]';
-            const repText = document.getElementById('reports-pending-text');
-            if (repText) repText.innerText = 'Generating artifacts & rendering analytics... Please wait';
-
-
-            // Start WebSocket
-            const videoDuration = _params.config.duration || 10;
-
-            const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-            const ws = new WebSocket(`${proto}://${location.host}/ws/run`);
-
-            ws.onopen = () => {
-                ws.send(JSON.stringify({
-                    video_id: _params.video_id,
-                    line: _params.line,
-                    config: _params.config,
-                    annotated_video: annotated,
-                    annotated_options: annotated_options,
-                    export_json: exportJson,
-                    export_csv: exportCsv,
-                    report_format: reportFmt
-                }));
-            };
-
-            ws.onerror = e => {
-                console.error('WS Error:', e);
-                document.getElementById('proc-label').innerText = 'Connection Error';
-                showToast('Connection error — server may be busy', 'error');
-                if (badge) {
-                    badge.innerText = 'Pipeline Failed';
-                    badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-100 text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                }
-            };
-
-            let processingDone = false;
-
-            ws.onclose = () => {
-                console.log('WS Closed');
-                if (!processingDone) {
-                    // Closed before done=True received — show error state
-                    document.getElementById('proc-label').innerText = 'Disconnected';
-                    const badge = document.getElementById('results-status-badge');
-                    if (badge) {
-                        badge.innerText = 'Connection Lost';
-                        badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-300 text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                    }
-                    document.getElementById('run-results-content').innerHTML = `
-                        <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-red-900/40 rounded-2xl col-span-3 text-slate-400">
-                            <i class="fa-solid fa-triangle-exclamation text-2xl mb-3 text-red-400"></i>
-                            <span class="text-xs font-semibold mb-1">Processing connection was lost.</span>
-                            <span class="text-[10px] text-slate-500 mb-4">The server may have timed out or restarted. Please try again.</span>
-                            <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
-                                &larr; Start New Analysis
-                            </button>
-                        </div>`;
-                }
-            };
-
-            let lastUIUpdate = 0;
-
-            ws.onmessage = e => {
-                const d = JSON.parse(e.data);
-
-                // Hide empty state on first data
-                const emptyState = document.getElementById('stats-empty-state');
-                if (emptyState) emptyState.style.display = 'none';
-                if (d.error) {
-                    processingDone = true;
-                    document.getElementById('proc-label').innerText = 'Engine Error';
-                    const badge = document.getElementById('results-status-badge');
-                    if (badge) {
-                        badge.innerText = 'Failed';
-                        badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-300 text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                    }
-                    console.error('[UrbanFlow] Engine error:', d.detail || d.error);
-                    document.getElementById('run-results-content').innerHTML = `
-                        <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-red-900/40 rounded-2xl col-span-3 text-slate-400">
-                            <i class="fa-solid fa-triangle-exclamation text-2xl mb-3 text-red-400"></i>
-                            <span class="text-xs font-semibold mb-1">Inference pipeline failed.</span>
-                            <span class="text-[10px] text-slate-500 mb-4 text-center max-w-xs">${d.error}</span>
-                            <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
-                                &larr; Start New Analysis
-                            </button>
-                        </div>`;
-                    return;
-                }
-
-                if (d.done) {
-                    processingDone = true;
-                    document.getElementById('proc-label').innerText = 'Complete';
-                    document.getElementById('proc-bar').style.width = '100%';
-                    document.getElementById('proc-pct').innerText = '100%';
-                    // Force frame counter to n/n
-                    const framesEl = document.getElementById('proc-frames');
-                    if (framesEl) {
-                        const parts = framesEl.innerText.split('/');
-                        if (parts.length === 2) {
-                            const total = parts[1].trim().replace(' Frames', '');
-                            framesEl.innerText = `${total} / ${total} Frames`;
-                        }
-                    }
-
-                    // Update Run Tab Badge
-                    const badge = document.getElementById('results-status-badge');
-                    if (badge) {
-                        badge.innerText = 'Completed';
-                        badge.className = 'px-2.5 py-1 bg-white text-black text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                    }
-
-                    const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
-                    if (analyzeAgainBtn) {
-                        analyzeAgainBtn.classList.remove('hidden');
-                    }
-
-                    document.getElementById('run-results-content').innerHTML =
-                        detailRow('Inference Time', d.processing_time + ' sec') +
-                        infoRow('Throughput (FPS)', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                        infoRow('Real-time Ratio', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
-
-                    if (d.video_id) {
-                        loadReports(d.video_id).then(data => {
-                            if (!data) return;
-
-                            // Auto-Download Logic (Respects live toggle state)
-                            if (document.getElementById('sv-auto-download').classList.contains('active')) {
-                                // Download the full bundle ZIP via direct navigation
-                                setTimeout(() => {
-                                    console.log('[UrbanFlow] Fetching ZIP bundle for:', d.video_id);
-                                    window.open(`/bundle/${d.video_id}`, '_blank');
-                                }, 1000); 
-                            }
-                        });
-                    }
-
-                    // Disable Auto-Download toggle after completion
-                    const adToggle = document.getElementById('sv-auto-download');
-                    if (adToggle) {
-                        adToggle.closest('.s-row').classList.add('disabled');
-                    }
-                    const jsonToggle = document.getElementById('sv-export-json');
-                    if (jsonToggle) {
-                        jsonToggle.closest('.s-row').classList.add('disabled');
-                    }
-                    const csvToggle = document.getElementById('sv-export-csv');
-                    if (csvToggle) {
-                        csvToggle.closest('.s-row').classList.add('disabled');
-                    }
-
-                    // Show New Analysis button in Settings
-                    const newWrap = document.getElementById('new-analysis-wrap');
-                    if (newWrap) newWrap.classList.remove('hidden');
-
-                    // Toast + Insights
-                    showToast('Processing complete — artifacts ready', 'success');
-                    renderInsights(d);
-
-                    // Store video_id for keyboard shortcut download
-                    document.body.setAttribute('data-last-video-id', d.video_id);
-
-                    return;
-                }
-
-                let pct = ((d.frame_index / d.total_iters) * 100).toFixed(1);
-                if (d.frame_index >= d.total_iters - 1) pct = '100.0';
-                document.getElementById('proc-bar').style.width = pct + '%';
-                document.getElementById('proc-frames').innerText = `${d.frame_index} / ${d.total_iters} Frames`;
-                
-                const procPctEl = document.getElementById('proc-pct');
-                const currPct = parseFloat(procPctEl.innerText) || 0;
-                animateValue(procPctEl, currPct, pct + '%', 300);
-
-                const totalIn = sumValues(d.class_in);
-                const totalOut = sumValues(d.class_out);
-                
-                const cntTotalEl = document.getElementById('cnt-total');
-                const currTotal = parseInt(cntTotalEl.innerText) || 0;
-                animateValue(cntTotalEl, currTotal, totalIn + totalOut, 300);
-
-                // Update PCU display
-                const pcuVal = calcPCU(d.class_in, d.class_out);
-                const pcuEl = document.getElementById('cnt-pcu');
-                if (pcuEl) pcuEl.innerText = pcuVal;
-
-                // Update doughnut
-                doughChart.data.datasets[0].data = [totalIn, totalOut];
-                doughChart.update();
-
-                const now = performance.now();
-                if (now - lastUIUpdate < 300) return;
-                lastUIUpdate = now;
-
-                updateCongestion(d.congestion, stride);
-                updateBreakdown(d.class_in, d.class_out);
-                updateDominance(d.class_in, d.class_out);
-                buildFlowHistogram(d.flow_times, videoDuration);
-            };
-        }
-
-        const REPORT_LABELS = {
-            'direction_pie.png': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
-            'direction_pie.pdf': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
-            'flow_over_time.png': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
-            'flow_over_time.pdf': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
-            'congestion_index.png': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
-            'congestion_index.pdf': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
-            'class_dominance.png': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
-            'class_dominance.pdf': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
-            'confidence_dist.png': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
-            'confidence_dist.pdf': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
-            'annotated.mp4': { title: 'Annotated Video Export', desc: 'Rendered video with tracking overlays' },
-            'heatmap.png': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
-            'heatmap.pdf': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
-            'raw_data.csv': { title: 'Raw Analytics Export', desc: 'Comma-separated values of all crossings' },
-            'analysis.json': { title: 'Structured JSON Export', desc: 'Complete analysis data with metadata for API consumption' }
-        };
-
-        async function loadReports(videoId) {
-            const res = await fetch(`/reports/${videoId}`, { method: 'POST' });
-            const data = await res.json();
-            if (!data.files || !data.files.length) return null;
-
-            document.getElementById('reports-pending').classList.add('hidden');
-            document.getElementById('reports-pending-message').classList.add('hidden');
-            document.getElementById('post-process-cards').classList.remove('hidden');
-            const grid = document.getElementById('reports-grid');
-            grid.classList.remove('hidden');
-            grid.innerHTML = '';
-
-            data.files.forEach(name => {
-                const info = REPORT_LABELS[name] || { title: name, desc: '' };
-                const url = `/reports/${videoId}/${name}`;
-                const isVideo = name.endsWith('.mp4');
-                const isPDF = name.endsWith('.pdf');
-                const isCSV = name.endsWith('.csv');
-                const card = document.createElement('div');
-                card.className = 'bg-black rounded-xl border border-slate-800 shadow-sm flex flex-col overflow-hidden';
-
-                let previewHTML = '';
-                if (isVideo) {
-                    previewHTML = `
-                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
-                            <i class="fa-solid fa-film text-6xl mb-4 text-white"></i>
-                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Video Ready for Local Analysis</span>
-                        </div>`;
-                } else if (isPDF) {
-                    previewHTML = `
-                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
-                            <i class="fa-solid fa-file-pdf text-6xl mb-4 text-white"></i>
-                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">PDF Document</span>
-                        </div>`;
-                } else if (isCSV) {
-                    previewHTML = `
-                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
-                            <i class="fa-solid fa-file-csv text-6xl mb-4 text-white"></i>
-                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Raw Analytics Export</span>
-                        </div>`;
-                } else if (name.endsWith('.json')) {
-                    previewHTML = `
-                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
-                            <i class="fa-solid fa-code text-6xl mb-4 text-white"></i>
-                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Structured JSON</span>
-                        </div>`;
-                } else {
-                    previewHTML = `<img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">`;
-                }
-
-                card.innerHTML = `
-                    <div class="px-5 py-3 border-b border-slate-800 bg-slate-900/40 flex justify-between items-center">
-                        <div>
-                            <h3 class="font-bold text-white text-sm">${info.title}</h3>
-                            <p class="text-[10px] text-slate-400 mt-0.5">${info.desc}</p>
-                        </div>
-                        <a href="${url}" download="${name}"
-                           class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-[#444444] text-white text-[10px] font-bold rounded-full hover:bg-neutral-800 transition uppercase tracking-wider">
-                            <i class="fa-solid fa-download text-[9px]"></i> Download
-                        </a>
-                    </div>
-                    <div class="p-4 flex items-center justify-center bg-black/30">
-                        ${previewHTML}
-                    </div>
-                `;
-                grid.appendChild(card);
-            });
-            return data;
-        }
-
-        function toggleExportMaster(el) {
-            el.classList.toggle('active');
-            const chips = document.getElementById('chip-selector');
-            if (el.classList.contains('active')) {
-                chips.classList.remove('hidden-chip-container');
-            } else {
-                chips.classList.add('hidden-chip-container');
-            }
-        }
-
-        function toggleAutoDownload(el) {
-            el.classList.toggle('active');
-        }
-
-        function toggleChip(id) {
-            const chip = document.getElementById(`chip-${id}`);
-            chip.classList.toggle('active');
-            const icon = chip.querySelector('i');
-            if (chip.classList.contains('active')) {
-                icon.className = 'fa-solid fa-check';
-            } else {
-                icon.className = 'fa-solid fa-plus';
-            }
-        }
-
-        init();
-    </script>
+    <script src="/js/vehicles.js"></script>
     <!-- Privacy Modal -->
     <div id="appModal-privacyModal" onclick="if(event.target===this)closeAppModal('privacyModal')"
         style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">