diff --git a/services/web-ui/public/upload.html b/services/web-ui/public/upload.html
index e636032..4540735 100644
--- a/services/web-ui/public/upload.html
+++ b/services/web-ui/public/upload.html
@@ -1,922 +1,459 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wild Dragon - Web Uploader</title>
-    <link rel="stylesheet" href="/css/common.css">
-    <style>
-        .upload-container {
-            display: flex;
-            flex-direction: column;
-            height: calc(100vh - 110px);
-            overflow: hidden;
-        }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ingest — Wild Dragon</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/common.css">
+  <style>
+    .ingest-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-5);
+      max-width: 860px;
+    }
 
-        .upload-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: var(--spacing-lg);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-lg);
-        }
+    /* Context bar */
+    .context-bar {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--sp-4);
+    }
 
-        .upload-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: var(--spacing-lg);
-        }
+    .context-bar .form-group { flex: 1; }
 
-        .upload-header h1 {
-            margin: 0;
-        }
+    /* Drop zone */
+    .drop-zone {
+      border: 1px dashed var(--border-strong);
+      border-radius: var(--r-lg);
+      background: var(--bg-surface);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: var(--sp-12) var(--sp-8);
+      gap: var(--sp-4);
+      text-align: center;
+      cursor: pointer;
+      transition: border-color var(--t-fast), background var(--t-fast);
+      min-height: 200px;
+      position: relative;
+    }
 
-        .upload-controls {
-            display: flex;
-            gap: var(--spacing-md);
-        }
+    .drop-zone:hover,
+    .drop-zone.drag-over {
+      border-color: var(--accent);
+      background: var(--accent-subtle);
+    }
 
-        .dropzone {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: var(--spacing-lg);
-            min-height: 300px;
-            padding: var(--spacing-xl);
-            background-color: var(--color-bg-tertiary);
-            border: 2px dashed var(--color-border);
-            border-radius: var(--radius-lg);
-            cursor: pointer;
-            transition: all var(--transition-normal);
-        }
+    .drop-zone input[type="file"] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+      width: 100%;
+      height: 100%;
+    }
 
-        .dropzone:hover {
-            border-color: var(--color-accent-primary);
-            background-color: var(--color-bg-hover);
-        }
+    .drop-zone-icon { color: var(--text-tertiary); }
+    .drop-zone-icon svg { width: 36px; height: 36px; }
 
-        .dropzone.dragover {
-            border-color: var(--color-accent-primary);
-            background-color: rgba(233, 69, 96, 0.1);
-        }
+    .drop-zone-primary {
+      font-size: var(--text-md);
+      font-weight: 500;
+      color: var(--text-primary);
+    }
 
-        .dropzone-icon {
-            font-size: 3rem;
-            opacity: 0.6;
-        }
+    .drop-zone-secondary {
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+    }
 
-        .dropzone-text {
-            text-align: center;
-        }
+    .drop-zone.drag-over .drop-zone-icon { color: var(--accent); }
+    .drop-zone.drag-over .drop-zone-primary { color: var(--accent); }
 
-        .dropzone-text h3 {
-            margin-bottom: var(--spacing-sm);
-            color: var(--color-text-primary);
-        }
+    /* Upload queue */
+    .queue-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
 
-        .dropzone-text p {
-            margin: 0;
-            color: var(--color-text-secondary);
-            font-size: 0.95rem;
-        }
+    .queue-title {
+      font-size: var(--text-sm);
+      font-weight: 500;
+      color: var(--text-secondary);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
 
-        .upload-config {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: var(--spacing-lg);
-            padding: var(--spacing-lg);
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-        }
+    .queue-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-2);
+    }
 
-        .config-section {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-md);
-        }
+    .queue-item {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      padding: var(--sp-3) var(--sp-4);
+      display: flex;
+      gap: var(--sp-4);
+      align-items: center;
+    }
 
-        .config-section-title {
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--color-text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
+    .queue-item-icon { color: var(--text-tertiary); flex-shrink: 0; }
+    .queue-item-icon svg { width: 18px; height: 18px; }
 
-        .upload-queue {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-md);
-            padding: var(--spacing-lg);
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-            overflow: hidden;
-        }
+    .queue-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
 
-        .queue-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding-bottom: var(--spacing-md);
-            border-bottom: 1px solid var(--color-border);
-        }
+    .queue-item-name {
+      font-size: var(--text-sm);
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-        .queue-title {
-            font-size: 1rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-        }
+    .queue-item-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-3);
+      font-size: var(--text-xs);
+      color: var(--text-tertiary);
+    }
 
-        .queue-clear {
-            font-size: 0.85rem;
-            color: var(--color-accent-primary);
-            cursor: pointer;
-            transition: color var(--transition-fast);
-        }
+    .queue-item-progress { width: 100%; }
 
-        .queue-clear:hover {
-            color: var(--color-accent-light);
-        }
+    .queue-item-status { flex-shrink: 0; }
 
-        .queue-list {
-            flex: 1;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-        }
+    .queue-item.status-done   { border-color: oklch(68% 0.18 148 / 0.25); }
+    .queue-item.status-error  { border-color: oklch(62% 0.22 25 / 0.25); }
+    .queue-item.status-active { border-color: var(--accent-border); }
 
-        .queue-item {
-            display: grid;
-            grid-template-columns: 1fr auto;
-            gap: var(--spacing-md);
-            padding: var(--spacing-md);
-            background-color: var(--color-bg-secondary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-md);
-            align-items: center;
-        }
-
-        .queue-item-info {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-            min-width: 0;
-        }
-
-        .queue-item-name {
-            font-weight: 600;
-            color: var(--color-text-primary);
-            font-size: 0.95rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .queue-item-meta {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.85rem;
-            color: var(--color-text-tertiary);
-            margin-bottom: var(--spacing-xs);
-        }
-
-        .queue-item-progress {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-            width: 100%;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background-color: var(--color-bg-primary);
-            border-radius: 3px;
-            overflow: hidden;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-light));
-            border-radius: 3px;
-            width: 0%;
-            transition: width var(--transition-fast);
-        }
-
-        .progress-text {
-            font-size: 0.8rem;
-            color: var(--color-text-tertiary);
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .queue-item-actions {
-            display: flex;
-            gap: var(--spacing-sm);
-        }
-
-        .queue-item-status {
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: var(--color-text-secondary);
-            white-space: nowrap;
-        }
-
-        .queue-item-status.waiting {
-            color: var(--color-text-tertiary);
-        }
-
-        .queue-item-status.uploading {
-            color: var(--color-info);
-        }
-
-        .queue-item-status.processing {
-            color: var(--color-warning);
-        }
-
-        .queue-item-status.complete {
-            color: var(--color-success);
-        }
-
-        .queue-item-status.error {
-            color: var(--color-danger);
-        }
-
-        .btn-cancel {
-            padding: var(--spacing-xs) var(--spacing-sm);
-            font-size: 0.8rem;
-            background-color: var(--color-status-error);
-            color: white;
-        }
-
-        .btn-cancel:hover {
-            background-color: #ef5555;
-        }
-
-        .queue-empty {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 150px;
-            color: var(--color-text-tertiary);
-            text-align: center;
-        }
-
-        .overall-progress {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-            padding: var(--spacing-md);
-            background-color: var(--color-bg-secondary);
-            border-radius: var(--radius-md);
-            border: 1px solid var(--color-border);
-        }
-
-        .overall-progress-label {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-        }
-
-        .overall-progress-bar {
-            width: 100%;
-            height: 8px;
-            background-color: var(--color-bg-primary);
-            border-radius: 4px;
-            overflow: hidden;
-        }
-
-        .overall-progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-light));
-            width: 0%;
-            transition: width var(--transition-fast);
-        }
-
-        .hidden-file-input {
-            display: none;
-        }
-
-        .create-project-form {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-md);
-            padding: var(--spacing-lg);
-            background-color: var(--color-bg-secondary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-        }
-
-        .create-project-form-title {
-            font-size: 0.95rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-        }
-
-        @media (max-width: 768px) {
-            .upload-config {
-                grid-template-columns: 1fr;
-            }
-
-            .upload-container {
-                height: calc(100vh - 100px);
-            }
-        }
-    </style>
+    /* Overall progress */
+    .overall-progress {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      padding: var(--sp-4);
+      display: flex;
+      align-items: center;
+      gap: var(--sp-4);
+    }
+    .overall-progress-label { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
+    .overall-progress-bar { flex: 1; }
+    .overall-progress-pct { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 500; white-space: nowrap; }
+  </style>
 </head>
 <body>
-    <div class="app-container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-logo">
-                <div class="header-logo-icon">D</div>
-                <span>WILD DRAGON</span>
-            </div>
-            <nav class="header-nav">
-                <div class="nav-item" data-page="assets">Assets</div>
-                <div class="nav-item" data-page="capture">Capture</div>
-                <div class="nav-item active" data-page="upload">Upload</div>
-                <div class="nav-item" data-page="recorders">Recorders</div>
-            </nav>
-        </header>
+<div class="shell">
+  <nav class="sidebar" aria-label="Main navigation">
+    <div class="sidebar-brand">
+      <div class="sidebar-brand-mark">
+        <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12"><path d="M8 1L2 5v6l6 4 6-4V5L8 1zm0 2.2L12 6v4l-4 2.7L4 10V6l4-2.8z"/></svg>
+      </div>
+      <span class="sidebar-brand-name">Wild Dragon</span>
+    </div>
+    <nav class="sidebar-nav">
+      <a href="index.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
+        Library
+      </a>
+      <a href="upload.html" class="nav-item active">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg>
+        Ingest
+      </a>
+      <a href="recorders.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg>
+        Recorders
+      </a>
+      <a href="capture.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg>
+        Capture
+      </a>
+      <a href="jobs.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg>
+        Jobs
+      </a>
+    </nav>
+  </nav>
 
-        <!-- Main Content -->
-        <div class="main-content">
-            <div class="content-area">
-                <div class="upload-container">
-                    <div class="upload-content">
-                        <!-- Header -->
-                        <div class="upload-header">
-                            <h1>Web Uploader</h1>
-                            <div class="upload-controls">
-                                <button class="btn btn-secondary" id="backBtn" onclick="navigateTo('assets')">← Back</button>
-                            </div>
-                        </div>
+  <div class="main">
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="page-title">Ingest</span>
+      </div>
+      <div class="topbar-right">
+        <button class="btn btn-ghost btn-sm" id="clearDoneBtn" style="display:none;">Clear completed</button>
+      </div>
+    </header>
 
-                        <!-- Dropzone -->
-                        <div class="dropzone" id="dropzone">
-                            <div class="dropzone-icon">📤</div>
-                            <div class="dropzone-text">
-                                <h3>Drop files here or click to browse</h3>
-                                <p>Supported formats: MOV, MP4, MXF, AVI, MKV, TS, M2T</p>
-                            </div>
-                        </div>
-
-                        <!-- Configuration -->
-                        <div class="upload-config">
-                            <div class="config-section">
-                                <div class="config-section-title">Project</div>
-                                <select id="projectSelect" class="form-select"></select>
-                                <div id="createProjectSection" style="display: none;">
-                                    <button class="btn btn-secondary" style="width: 100%;" onclick="toggleCreateProject()">+ Create New Project</button>
-                                    <div class="create-project-form" id="createProjectForm" style="display: none;">
-                                        <div class="create-project-form-title">New Project</div>
-                                        <input type="text" id="newProjectName" class="form-input" placeholder="Project name">
-                                        <div style="display: flex; gap: var(--spacing-sm);">
-                                            <button class="btn btn-primary btn-sm" style="flex: 1;" onclick="createNewProject()">Create</button>
-                                            <button class="btn btn-secondary btn-sm" style="flex: 1;" onclick="toggleCreateProject()">Cancel</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="config-section">
-                                <div class="config-section-title">Bin</div>
-                                <select id="binSelect" class="form-select"></select>
-                            </div>
-                        </div>
-
-                        <!-- Overall Progress -->
-                        <div class="overall-progress" id="overallProgressContainer" style="display: none;">
-                            <div class="overall-progress-label">
-                                <span>Overall Progress</span>
-                                <span id="overallProgressPercent">0%</span>
-                            </div>
-                            <div class="overall-progress-bar">
-                                <div class="overall-progress-fill" id="overallProgressFill"></div>
-                            </div>
-                        </div>
-
-                        <!-- Upload Queue -->
-                        <div class="upload-queue">
-                            <div class="queue-header">
-                                <div class="queue-title">Upload Queue</div>
-                                <div class="queue-clear" id="queueClear" style="display: none;" onclick="clearCompleted()">Clear Completed</div>
-                            </div>
-                            <div class="queue-list" id="queueList">
-                                <div class="queue-empty">No files selected</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <div class="page-content">
+      <div class="ingest-content">
+        <!-- Project + bin selectors -->
+        <div class="context-bar">
+          <div class="form-group">
+            <label class="form-label" for="projectSel">Project</label>
+            <select id="projectSel">
+              <option value="">Select project…</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="binSel">Bin</label>
+            <select id="binSel">
+              <option value="">No bin (project root)</option>
+            </select>
+          </div>
         </div>
 
-        <!-- Status Bar -->
-        <footer class="status-bar">
-            <div class="status-item">
-                <span class="status-indicator" id="statusIndicator"></span>
-                <span id="statusText">Ready to upload</span>
-            </div>
-            <div class="status-item" id="uploadStatsItem" style="display: none;">
-                <span id="uploadStats">0 files uploaded</span>
-            </div>
-        </footer>
+        <!-- Drop zone -->
+        <div class="drop-zone" id="dropZone">
+          <input type="file" id="fileInput" multiple accept="video/*,audio/*,image/*" aria-label="Select files to upload">
+          <div class="drop-zone-icon">
+            <svg viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M18 26V10M11 17l7-7 7 7"/>
+              <path d="M4 28h28"/>
+              <rect x="2" y="4" width="32" height="26" rx="2" stroke-opacity="0.25"/>
+            </svg>
+          </div>
+          <div class="drop-zone-primary">Drop files here or click to browse</div>
+          <div class="drop-zone-secondary">Video, audio, and image files — up to 5 GB each</div>
+        </div>
+
+        <!-- Overall progress (hidden until uploading) -->
+        <div class="overall-progress" id="overallProgress" style="display:none;">
+          <span class="overall-progress-label" id="overallLabel">Uploading…</span>
+          <div class="overall-progress-bar progress-bar">
+            <div class="progress-fill" id="overallFill" style="width:0%"></div>
+          </div>
+          <span class="overall-progress-pct" id="overallPct">0%</span>
+        </div>
+
+        <!-- Queue -->
+        <div id="queueSection" style="display:none;">
+          <div class="queue-header" style="margin-bottom:var(--sp-3);">
+            <span class="queue-title">Queue</span>
+            <span class="text-xs text-tertiary" id="queueSummary"></span>
+          </div>
+          <div class="queue-list" id="queueList"></div>
+        </div>
+      </div>
     </div>
+  </div>
+</div>
 
-    <!-- Hidden file input -->
-    <input type="file" id="fileInput" class="hidden-file-input" multiple accept=".mov,.mp4,.mxf,.avi,.mkv,.ts,.m2t">
+<div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-    <script src="/js/api.js"></script>
-    <script>
-        // ============================================================
-        // STATE MANAGEMENT
-        // ============================================================
+<script src="js/api.js"></script>
+<script>
+  const CHUNK = 10 * 1024 * 1024; // 10 MB chunks
+  const state = { projects: [], bins: [], queue: [], uploading: false };
 
-        let uploadState = {
-            projects: [],
-            bins: [],
-            selectedProject: null,
-            selectedBin: null,
-            uploadQueue: [],
-            activeUploads: 0,
-            completedUploads: 0,
-        };
+  document.addEventListener('DOMContentLoaded', async () => {
+    await loadProjects();
+    const params = new URLSearchParams(location.search);
+    if (params.get('project')) {
+      document.getElementById('projectSel').value = params.get('project');
+      await loadBins();
+    }
+    setupDropZone();
+    document.getElementById('clearDoneBtn').onclick = clearDone;
+  });
 
-        // ============================================================
-        // INITIALIZATION
-        // ============================================================
+  async function loadProjects() {
+    const r = await getProjects();
+    if (!r.success) return;
+    state.projects = r.data;
+    const sel = document.getElementById('projectSel');
+    sel.innerHTML = '<option value="">Select project…</option>' +
+      r.data.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join('');
+    sel.onchange = loadBins;
+  }
 
-        document.addEventListener('DOMContentLoaded', async () => {
-            setupEventListeners();
-            await loadProjects();
-            updateStatusBar();
-        });
+  async function loadBins() {
+    const projectId = document.getElementById('projectSel').value;
+    const sel = document.getElementById('binSel');
+    sel.innerHTML = '<option value="">No bin (project root)</option>';
+    if (!projectId) return;
+    const r = await getBins(projectId);
+    if (r.success && r.data.length) {
+      r.data.forEach(b => sel.innerHTML += `<option value="${b.id}">${esc(b.name)}</option>`);
+    }
+  }
 
-        function setupEventListeners() {
-            // Navigation
-            document.querySelectorAll('[data-page]').forEach(el => {
-                el.addEventListener('click', (e) => navigateTo(e.target.dataset.page));
-            });
+  function setupDropZone() {
+    const zone = document.getElementById('dropZone');
+    const input = document.getElementById('fileInput');
 
-            // Dropzone
-            const dropzone = document.getElementById('dropzone');
-            dropzone.addEventListener('click', () => document.getElementById('fileInput').click());
-            dropzone.addEventListener('dragover', (e) => {
-                e.preventDefault();
-                dropzone.classList.add('dragover');
-            });
-            dropzone.addEventListener('dragleave', () => {
-                dropzone.classList.remove('dragover');
-            });
-            dropzone.addEventListener('drop', (e) => {
-                e.preventDefault();
-                dropzone.classList.remove('dragover');
-                handleFileSelection(e.dataTransfer.files);
-            });
+    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
+    zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+    zone.addEventListener('drop', e => {
+      e.preventDefault();
+      zone.classList.remove('drag-over');
+      enqueue([...e.dataTransfer.files]);
+    });
+    input.addEventListener('change', () => { enqueue([...input.files]); input.value = ''; });
+  }
 
-            // File input
-            document.getElementById('fileInput').addEventListener('change', (e) => {
-                handleFileSelection(e.target.files);
-            });
+  function enqueue(files) {
+    const projectId = document.getElementById('projectSel').value;
+    if (!projectId) { toast('Select a project first', '', 'warning'); return; }
+    files = files.filter(f => f.type.startsWith('video/') || f.type.startsWith('audio/') || f.type.startsWith('image/'));
+    if (!files.length) { toast('No supported files selected', '', 'warning'); return; }
 
-            // Project selection
-            document.getElementById('projectSelect').addEventListener('change', (e) => {
-                uploadState.selectedProject = e.target.value;
-                loadBins();
-            });
+    files.forEach(file => {
+      state.queue.push({ id: Math.random().toString(36).slice(2), file, status: 'queued', progress: 0, error: null });
+    });
 
-            // Bin selection
-            document.getElementById('binSelect').addEventListener('change', (e) => {
-                uploadState.selectedBin = e.target.value;
-            });
+    renderQueue();
+    if (!state.uploading) processQueue();
+  }
+
+  async function processQueue() {
+    state.uploading = true;
+    const pending = state.queue.filter(i => i.status === 'queued');
+    for (const item of pending) {
+      await uploadFile(item);
+      renderQueue();
+    }
+    state.uploading = false;
+    toast('All uploads complete', `${pending.length} file${pending.length > 1 ? 's' : ''} ingested`, 'success');
+  }
+
+  async function uploadFile(item) {
+    item.status = 'active';
+    renderQueue();
+    const projectId = document.getElementById('projectSel').value;
+    const binId = document.getElementById('binSel').value || null;
+    const file = item.file;
+
+    try {
+      if (file.size <= 50 * 1024 * 1024) {
+        // Simple upload
+        const fd = new FormData();
+        fd.append('file', file);
+        fd.append('filename', file.name);
+        fd.append('projectId', projectId);
+        if (binId) fd.append('binId', binId);
+        fd.append('contentType', file.type);
+        const r = await simpleUpload(fd);
+        if (!r.success) throw new Error(r.error || 'Upload failed');
+        item.progress = 100;
+      } else {
+        // Multipart
+        const init = await initUpload({ filename: file.name, fileSize: file.size, contentType: file.type, projectId, binId });
+        if (!init.success) throw new Error(init.error || 'Failed to init upload');
+        const { assetId, uploadId, key } = init.data;
+        const parts = [];
+        const totalChunks = Math.ceil(file.size / CHUNK);
+
+        for (let i = 0; i < totalChunks; i++) {
+          const chunk = file.slice(i * CHUNK, (i + 1) * CHUNK);
+          const fd = new FormData();
+          fd.append('file', chunk, file.name);
+          fd.append('uploadId', uploadId);
+          fd.append('key', key);
+          fd.append('partNumber', i + 1);
+          const pr = await uploadPart(fd);
+          if (!pr.success) throw new Error(pr.error || 'Part upload failed');
+          parts.push({ partNumber: i + 1, etag: pr.data.etag });
+          item.progress = Math.round(((i + 1) / totalChunks) * 95);
+          renderQueue();
         }
 
-        // ============================================================
-        // PROJECT & BIN MANAGEMENT
-        // ============================================================
+        const complete = await completeUpload({ uploadId, key, assetId, parts });
+        if (!complete.success) throw new Error(complete.error || 'Failed to finalize');
+        item.progress = 100;
+      }
+      item.status = 'done';
+    } catch (err) {
+      item.status = 'error';
+      item.error = err.message;
+    }
+    renderQueue();
+  }
 
-        async function loadProjects() {
-            try {
-                const result = await getProjects();
-                if (result.success) {
-                    uploadState.projects = result.data;
-                    renderProjects();
-                    if (uploadState.projects.length > 0) {
-                        uploadState.selectedProject = uploadState.projects[0].id;
-                        document.getElementById('projectSelect').value = uploadState.selectedProject;
-                        await loadBins();
-                    } else {
-                        document.getElementById('createProjectSection').style.display = 'block';
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to load projects:', error);
-            }
-        }
+  function renderQueue() {
+    const list = document.getElementById('queueList');
+    const section = document.getElementById('queueSection');
+    const overallProgress = document.getElementById('overallProgress');
+    const clearBtn = document.getElementById('clearDoneBtn');
 
-        function renderProjects() {
-            const select = document.getElementById('projectSelect');
-            select.innerHTML = '';
+    if (!state.queue.length) { section.style.display = 'none'; overallProgress.style.display = 'none'; return; }
 
-            uploadState.projects.forEach(project => {
-                const option = document.createElement('option');
-                option.value = project.id;
-                option.textContent = project.name;
-                select.appendChild(option);
-            });
-        }
+    section.style.display = 'block';
+    const done = state.queue.filter(i => i.status === 'done').length;
+    const total = state.queue.length;
+    const hasActive = state.queue.some(i => i.status === 'active' || i.status === 'queued');
 
-        async function loadBins() {
-            if (!uploadState.selectedProject) return;
+    document.getElementById('queueSummary').textContent = `${done} of ${total} complete`;
+    clearBtn.style.display = done > 0 ? '' : 'none';
 
-            try {
-                const result = await getBins(uploadState.selectedProject);
-                if (result.success) {
-                    uploadState.bins = result.data;
-                    renderBins();
-                }
-            } catch (error) {
-                console.error('Failed to load bins:', error);
-            }
-        }
+    // Overall bar
+    if (hasActive || done > 0) {
+      overallProgress.style.display = 'flex';
+      const totalPct = state.queue.reduce((s, i) => s + (i.status === 'done' ? 100 : i.progress), 0) / total;
+      document.getElementById('overallFill').style.width = totalPct + '%';
+      document.getElementById('overallPct').textContent = Math.round(totalPct) + '%';
+      document.getElementById('overallLabel').textContent = hasActive ? 'Uploading…' : 'Complete';
+    }
 
-        function renderBins() {
-            const select = document.getElementById('binSelect');
-            select.innerHTML = '';
+    list.innerHTML = state.queue.map(item => {
+      const statusLabel = { queued:'Queued', active:'Uploading', done:'Done', error:'Error' }[item.status] || item.status;
+      const statusClass = { queued:'badge-idle', active:'badge-processing', done:'badge-ready', error:'badge-error' }[item.status];
+      const iconColor = { queued:'var(--text-tertiary)', active:'var(--accent)', done:'var(--status-green)', error:'var(--status-red)' }[item.status];
+      const icon = item.file.type.startsWith('video') ? videoIcon : item.file.type.startsWith('audio') ? audioIcon : docIcon;
+      return `<div class="queue-item status-${item.status}">
+        <div class="queue-item-icon" style="color:${iconColor}">${icon}</div>
+        <div class="queue-item-body">
+          <div class="queue-item-name">${esc(item.file.name)}</div>
+          <div class="queue-item-meta">
+            <span>${formatFileSize(item.file.size)}</span>
+            ${item.error ? `<span style="color:var(--status-red)">${esc(item.error)}</span>` : ''}
+          </div>
+          ${item.status === 'active' ? `<div class="queue-item-progress progress-bar" style="margin-top:var(--sp-1)"><div class="progress-fill" style="width:${item.progress}%"></div></div>` : ''}
+        </div>
+        <div class="queue-item-status">
+          <span class="badge ${statusClass}">${statusLabel}${item.status === 'active' ? ' ' + item.progress + '%' : ''}</span>
+        </div>
+      </div>`;
+    }).join('');
+  }
 
-            uploadState.bins.forEach(bin => {
-                const option = document.createElement('option');
-                option.value = bin.id;
-                option.textContent = bin.name;
-                select.appendChild(option);
-            });
+  const videoIcon = `<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18"><rect x="1" y="4" width="11" height="10" rx="1"/><path d="M12 8l5-2v6l-5-2"/></svg>`;
+  const audioIcon = `<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18"><path d="M9 2v14M6 5v8M3 7v4M12 5v8M15 7v4"/></svg>`;
+  const docIcon = `<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18"><path d="M5 2h6l4 4v10H5V2z"/><path d="M11 2v4h4"/></svg>`;
 
-            if (uploadState.bins.length > 0) {
-                uploadState.selectedBin = uploadState.bins[0].id;
-                document.getElementById('binSelect').value = uploadState.selectedBin;
-            }
-        }
+  function clearDone() {
+    state.queue = state.queue.filter(i => i.status !== 'done');
+    renderQueue();
+  }
 
-        function toggleCreateProject() {
-            const form = document.getElementById('createProjectForm');
-            form.style.display = form.style.display === 'none' ? 'flex' : 'none';
-        }
+  function toast(title, msg, type = 'info') {
+    const el = document.createElement('div');
+    el.className = `toast toast--${type}`;
+    el.innerHTML = `<div class="toast-body"><div class="toast-title">${esc(title)}</div>${msg ? `<div class="toast-msg">${esc(msg)}</div>` : ''}</div>`;
+    document.getElementById('toastContainer').appendChild(el);
+    setTimeout(() => el.remove(), 4000);
+  }
 
-        async function createNewProject() {
-            const name = document.getElementById('newProjectName').value.trim();
-            if (!name) {
-                alert('Please enter a project name');
-                return;
-            }
+  function esc(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
 
-            try {
-                const result = await createProject(name);
-                if (result.success) {
-                    await loadProjects();
-                    toggleCreateProject();
-                    document.getElementById('newProjectName').value = '';
-                    updateStatusBar('Project created');
-                } else {
-                    alert('Failed to create project');
-                }
-            } catch (error) {
-                console.error('Failed to create project:', error);
-                alert('Error creating project');
-            }
-        }
-
-        // ============================================================
-        // FILE HANDLING
-        // ============================================================
-
-        function handleFileSelection(files) {
-            Array.from(files).forEach(file => {
-                if (isValidVideoFile(file)) {
-                    addToQueue(file);
-                }
-            });
-        }
-
-        function isValidVideoFile(file) {
-            const validTypes = ['.mov', '.mp4', '.mxf', '.avi', '.mkv', '.ts', '.m2t'];
-            const ext = '.' + file.name.split('.').pop().toLowerCase();
-            return validTypes.includes(ext);
-        }
-
-        function addToQueue(file) {
-            const id = 'upload_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-            const queueItem = {
-                id,
-                file,
-                status: 'waiting',
-                progress: 0,
-                uploadId: null,
-                s3Key: null,
-                assetId: null,
-                uploadedBytes: 0,
-            };
-
-            uploadState.uploadQueue.push(queueItem);
-            renderQueue();
-
-            // Auto-start upload if not at max concurrent
-            if (uploadState.activeUploads < 3) {
-                uploadNext();
-            }
-        }
-
-        function renderQueue() {
-            const list = document.getElementById('queueList');
-            const clear = document.getElementById('queueClear');
-
-            if (uploadState.uploadQueue.length === 0) {
-                list.innerHTML = '<div class="queue-empty">No files selected</div>';
-                clear.style.display = 'none';
-                return;
-            }
-
-            clear.style.display = uploadState.uploadQueue.some(u => u.status === 'complete' || u.status === 'error') ? 'block' : 'none';
-
-            list.innerHTML = '';
-            uploadState.uploadQueue.forEach(item => {
-                const el = createQueueItemElement(item);
-                list.appendChild(el);
-            });
-        }
-
-        function createQueueItemElement(item) {
-            const el = document.createElement('div');
-            el.className = 'queue-item';
-            el.id = `queue-${item.id}`;
-
-            const isComplete = item.status === 'complete';
-            const isError = item.status === 'error';
-            const isProcessing = item.status === 'processing';
-
-            el.innerHTML = `
-                <div class="queue-item-info">
-                    <div class="queue-item-name">${item.file.name}</div>
-                    <div class="queue-item-meta">
-                        <span>${formatFileSize(item.file.size)}</span>
-                        <span id="progress-${item.id}">${item.progress}%</span>
-                    </div>
-                    ${item.status !== 'waiting' ? `
-                        <div class="queue-item-progress">
-                            <div class="progress-bar">
-                                <div class="progress-fill" id="fill-${item.id}" style="width: ${item.progress}%"></div>
-                            </div>
-                        </div>
-                    ` : ''}
-                </div>
-                <div class="queue-item-actions">
-                    <div class="queue-item-status ${item.status}">
-                        ${item.status === 'waiting' ? 'Waiting' :
-                          item.status === 'uploading' ? 'Uploading' :
-                          item.status === 'processing' ? 'Processing' :
-                          item.status === 'complete' ? 'Complete' :
-                          item.status === 'error' ? 'Error' : item.status}
-                    </div>
-                    ${item.status === 'waiting' || item.status === 'uploading' ? `
-                        <button class="btn btn-cancel btn-sm" onclick="cancelUpload('${item.id}')">Cancel</button>
-                    ` : ''}
-                </div>
-            `;
-
-            return el;
-        }
-
-        // ============================================================
-        // UPLOAD LOGIC
-        // ============================================================
-
-        async function uploadNext() {
-            const item = uploadState.uploadQueue.find(u => u.status === 'waiting');
-            if (!item) return;
-
-            uploadState.activeUploads++;
-            item.status = 'uploading';
-            updateQueueItem(item);
-            updateOverallProgress();
-
-            try {
-                const file = item.file;
-                const CHUNK_SIZE = 10 * 1024 * 1024; // 10MB
-
-                if (file.size < 50 * 1024 * 1024) {
-                    // Simple upload for small files
-                    await simpleUploadFile(item);
-                } else {
-                    // Multipart upload for large files
-                    await multipartUploadFile(item, CHUNK_SIZE);
-                }
-
-                item.status = 'processing';
-                updateQueueItem(item);
-                updateOverallProgress();
-
-                // Simulate processing completion
-                setTimeout(() => {
-                    item.status = 'complete';
-                    item.progress = 100;
-                    uploadState.completedUploads++;
-                    updateQueueItem(item);
-                    updateOverallProgress();
-                    uploadState.activeUploads--;
-                    uploadNext();
-                    updateStatusBar();
-                }, 2000);
-            } catch (error) {
-                console.error('Upload error:', error);
-                item.status = 'error';
-                updateQueueItem(item);
-                updateOverallProgress();
-                uploadState.activeUploads--;
-                uploadNext();
-            }
-        }
-
-        async function simpleUploadFile(item) {
-            const formData = new FormData();
-            formData.append('file', item.file);
-            formData.append('filename', item.file.name);
-            formData.append('projectId', uploadState.selectedProject);
-            formData.append('binId', uploadState.selectedBin);
-
-            const result = await simpleUpload(formData);
-            if (!result.success) {
-                throw new Error(result.error);
-            }
-
-            item.progress = 100;
-            updateQueueItem(item);
-        }
-
-        async function multipartUploadFile(item, chunkSize) {
-            const file = item.file;
-            const fileName = file.name;
-
-            // Initialize upload
-            const initResult = await initUpload({
-                filename: fileName,
-                fileSize: file.size,
-                contentType: file.type,
-                projectId: uploadState.selectedProject,
-                binId: uploadState.selectedBin,
-            });
-
-            if (!initResult.success) {
-                throw new Error('Failed to initialize upload');
-            }
-
-            const { uploadId, key, assetId } = initResult.data;
-            item.uploadId = uploadId;
-            item.s3Key = key;
-            item.assetId = assetId;
-            const parts = [];
-            const totalChunks = Math.ceil(file.size / chunkSize);
-
-            // Upload chunks
-            for (let i = 0; i < totalChunks; i++) {
-                const start = i * chunkSize;
-                const end = Math.min(start + chunkSize, file.size);
-                const chunk = file.slice(start, end);
-
-                const formData = new FormData();
-                formData.append('file', chunk);
-                formData.append('uploadId', uploadId);
-                formData.append('partNumber', i + 1);
-                formData.append('key', key);
-
-                const chunkResult = await uploadPart(formData);
-                if (!chunkResult.success) {
-                    throw new Error('Failed to upload chunk ' + (i + 1));
-                }
-
-                parts.push({
-                    partNumber: i + 1,
-                    ETag: chunkResult.data.etag,
-                });
-
-                item.uploadedBytes = end;
-                item.progress = Math.round((end / file.size) * 100);
-                updateQueueItem(item);
-            }
-
-            // Complete upload
-            const completeResult = await completeUpload({
-                uploadId,
-                key,
-                assetId,
-                parts,
-            });
-
-            if (!completeResult.success) {
-                throw new Error('Failed to complete upload');
-            }
-
-            item.progress = 100;
-            updateQueueItem(item);
-        }
-
-        function updateQueueItem(item) {
-            const el = document.getElementById(`queue-${item.id}`);
-            if (el) {
-                el.parentNode.replaceChild(createQueueItemElement(item), el);
-            }
-        }
-
-        function cancelUpload(id) {
-            const item = uploadState.uploadQueue.find(u => u.id === id);
-            if (!item) return;
-
-            if (item.uploadId) {
-                abortUpload({
-                    uploadId: item.uploadId,
-                    key: item.s3Key,
-                    assetId: item.assetId,
-                }).catch(console.error);
-            }
-
-            uploadState.uploadQueue = uploadState.uploadQueue.filter(u => u.id !== id);
-            renderQueue();
-            updateOverallProgress();
-
-            uploadState.activeUploads--;
-            uploadNext();
-        }
-
-        function clearCompleted() {
-            uploadState.uploadQueue = uploadState.uploadQueue.filter(u => u.status !== 'complete' && u.status !== 'error');
-            renderQueue();
-            updateOverallProgress();
-        }
-
-        // ============================================================
-        // UI UPDATES
-        // ============================================================
-
-        function updateOverallProgress() {
-            const container = document.getElementById('overallProgressContainer');
-            const queue = uploadState.uploadQueue;
-
-            if (queue.length === 0) {
-                container.style.display = 'none';
-                return;
-            }
-
-            const totalProgress = queue.reduce((sum, u) => sum + u.progress, 0) / queue.length;
-            const percent = Math.round(totalProgress);
-
-            container.style.display = 'flex';
-            document.getElementById('overallProgressPercent').textContent = percent + '%';
-            document.getElementById('overallProgressFill').style.width = percent + '%';
-        }
-
-        function updateStatusBar() {
-            const indicator = document.getElementById('statusIndicator');
-            const text = document.getElementById('statusText');
-            const stats = document.getElementById('uploadStatsItem');
-
-            indicator.className = 'status-indicator';
-
-            if (uploadState.activeUploads > 0) {
-                text.textContent = `Uploading ${uploadState.activeUploads} file(s)...`;
-            } else if (uploadState.completedUploads > 0) {
-                text.textContent = `${uploadState.completedUploads} file(s) uploaded`;
-            } else {
-                text.textContent = 'Ready to upload';
-            }
-
-            if (uploadState.completedUploads > 0) {
-                stats.style.display = 'flex';
-                document.getElementById('uploadStats').textContent = uploadState.completedUploads + ' file(s) uploaded';
-            }
-        }
-
-        // ============================================================
-        // NAVIGATION
-        // ============================================================
-
-        function navigateTo(page) {
-            if (page === 'assets') {
-                window.location.href = '/index.html';
-            } else if (page === 'capture') {
-                window.location.href = '/capture.html';
-            } else if (page === 'recorders') {
-                window.location.href = '/recorders.html';
-            }
-        }
-    </script>
+  function formatFileSize(bytes) {
+    if (!bytes) return '';
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + ' KB';
+    if (bytes < 1024*1024*1024) return (bytes/1024/1024).toFixed(1) + ' MB';
+    return (bytes/1024/1024/1024).toFixed(2) + ' GB';
+  }
+</script>
 </body>
 </html>
