From c6cca63595c03adce342a8e4fe384c348c7c469b Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 16 May 2026 13:04:45 -0400
Subject: [PATCH] feat: redesign index.html, upload.html, recorders.html:
 index.html

---
 services/web-ui/public/index.html | 1414 ++++++++++++++---------------
 1 file changed, 698 insertions(+), 716 deletions(-)
diff --git a/services/web-ui/public/index.html b/services/web-ui/public/index.html
index 9d6262a..f619afe 100644
--- a/services/web-ui/public/index.html
+++ b/services/web-ui/public/index.html
@@ -1,795 +1,777 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wild Dragon - Asset Browser</title>
-    <link rel="stylesheet" href="/css/common.css">
-    <style>
-        .assets-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: var(--spacing-lg);
-            gap: var(--spacing-lg);
-        }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Library — 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>
+    /* ── Library layout ── */
+    .library-shell {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      height: 100%;
+    }
 
-        .assets-controls {
-            display: flex;
-            gap: var(--spacing-md);
-        }
+    /* Bin tree panel */
+    .bin-panel {
+      width: 220px;
+      flex-shrink: 0;
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-panel);
+      overflow: hidden;
+    }
 
-        .asset-detail-panel {
-            display: none;
-            position: fixed;
-            top: 0;
-            right: 0;
-            width: 400px;
-            height: 100vh;
-            background-color: var(--color-bg-secondary);
-            border-left: 1px solid var(--color-border);
-            z-index: 500;
-            overflow-y: auto;
-            animation: slideInRight var(--transition-normal);
-            box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
-        }
+    .bin-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--sp-3) var(--sp-4);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
 
-        .asset-detail-panel.active {
-            display: flex;
-            flex-direction: column;
-        }
+    .bin-panel-title {
+      font-size: var(--text-xs);
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-tertiary);
+    }
 
-        @keyframes slideInRight {
-            from { transform: translateX(100%); }
-            to   { transform: translateX(0); }
-        }
+    .bin-tree {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--sp-2) 0;
+    }
 
-        .detail-header {
-            padding: var(--spacing-lg);
-            border-bottom: 1px solid var(--color-border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-shrink: 0;
-        }
+    .bin-tree::-webkit-scrollbar { width: 4px; }
+    .bin-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 
-        .detail-close {
-            background: none;
-            border: none;
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            font-size: 1.5rem;
-            padding: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-        }
+    .bin-item {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-2);
+      padding: var(--sp-2) var(--sp-4);
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: color var(--t-fast), background var(--t-fast);
+      white-space: nowrap;
+      overflow: hidden;
+    }
 
-        .detail-close:hover { color: var(--color-text-primary); }
+    .bin-item:hover { color: var(--text-primary); background: var(--bg-hover); }
 
-        .detail-body {
-            padding: var(--spacing-lg);
-            flex: 1;
-            overflow-y: auto;
-        }
+    .bin-item.active {
+      color: var(--accent);
+      background: var(--accent-subtle);
+      font-weight: 500;
+    }
 
-        .detail-section { margin-bottom: var(--spacing-lg); }
+    .bin-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
+    .bin-item.active svg { opacity: 1; }
+    .bin-item span { overflow: hidden; text-overflow: ellipsis; }
 
-        .detail-section-title {
-            font-size: 0.85rem;
-            font-weight: 700;
-            color: var(--color-text-tertiary);
-            text-transform: uppercase;
-            margin-bottom: var(--spacing-md);
-        }
+    /* Asset grid */
+    .asset-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
 
-        .detail-row {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            padding: var(--spacing-sm) 0;
-            border-bottom: 1px solid var(--color-border);
-        }
+    .asset-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--sp-3) var(--sp-5);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+      gap: var(--sp-3);
+    }
 
-        .detail-label {
-            font-size: 0.9rem;
-            color: var(--color-text-tertiary);
-            font-weight: 600;
-        }
+    .asset-toolbar-left { display: flex; align-items: center; gap: var(--sp-3); }
+    .asset-toolbar-right { display: flex; align-items: center; gap: var(--sp-2); }
 
-        .detail-value {
-            font-size: 0.9rem;
-            color: var(--color-text-primary);
-            word-break: break-word;
-            text-align: right;
-            flex: 1;
-            margin-left: var(--spacing-md);
-        }
+    .asset-count {
+      font-size: var(--text-xs);
+      color: var(--text-tertiary);
+      white-space: nowrap;
+    }
 
-        .video-player {
-            width: 100%;
-            height: auto;
-            background-color: var(--color-bg-primary);
-            border-radius: var(--radius-md);
-            margin-bottom: var(--spacing-lg);
-        }
+    .search-input {
+      width: 220px;
+      height: 28px;
+      padding: 0 var(--sp-3);
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-md);
+      color: var(--text-primary);
+      font-size: var(--text-sm);
+      outline: none;
+      transition: border-color var(--t-fast);
+    }
+    .search-input:focus { border-color: var(--accent-border); }
+    .search-input::placeholder { color: var(--text-tertiary); }
 
-        .detail-actions {
-            display: flex;
-            gap: var(--spacing-sm);
-            padding-top: var(--spacing-md);
-        }
+    .asset-grid-wrap {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--sp-5);
+    }
 
-        .empty-state {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 400px;
-            text-align: center;
-        }
+    .asset-grid-wrap::-webkit-scrollbar { width: 5px; }
+    .asset-grid-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
 
-        .empty-state-icon {
-            font-size: 3rem;
-            margin-bottom: var(--spacing-md);
-            opacity: 0.3;
-        }
+    .asset-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
+      gap: var(--sp-4);
+    }
 
-        .empty-state-text {
-            color: var(--color-text-tertiary);
-            margin-bottom: var(--spacing-md);
-        }
+    /* Asset card */
+    .asset-card {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      overflow: hidden;
+      cursor: pointer;
+      transition: border-color var(--t-fast), background var(--t-fast);
+      container-type: inline-size;
+    }
 
-        .filter-group {
-            display: flex;
-            gap: var(--spacing-sm);
-            margin-bottom: var(--spacing-lg);
-            flex-wrap: wrap;
-        }
+    .asset-card:hover {
+      border-color: var(--border-strong);
+      background: var(--bg-raised);
+    }
 
-        .filter-tag {
-            display: inline-flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-            padding: 4px 10px;
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: 20px;
-            font-size: 0.85rem;
-            color: var(--color-text-secondary);
-            cursor: pointer;
-            transition: all var(--transition-fast);
-        }
+    .asset-card.selected {
+      border-color: var(--accent-border);
+      background: var(--accent-subtle);
+    }
 
-        .filter-tag:hover {
-            border-color: var(--color-accent-primary);
-            color: var(--color-accent-primary);
-        }
+    /* Thumbnail */
+    .asset-thumb {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      background: var(--bg-base);
+      overflow: hidden;
+    }
 
-        .filter-tag.active {
-            background-color: var(--color-accent-primary);
-            border-color: var(--color-accent-primary);
-            color: white;
-        }
+    .asset-thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: opacity 300ms ease-out;
+      opacity: 0;
+    }
 
-        .content-main {
-            display: flex;
-            flex-direction: column;
-            transition: margin-right var(--transition-normal);
-        }
+    .asset-thumb img.loaded { opacity: 1; }
 
-        .content-main.detail-open { margin-right: 400px; }
+    .asset-thumb-placeholder {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-tertiary);
+    }
 
-        /* Thumbnail inside asset card */
-        .card-thumbnail {
-            position: relative;
-            aspect-ratio: 16/9;
-            background-color: var(--color-bg-tertiary);
-            overflow: hidden;
-            border-radius: var(--radius-md) var(--radius-md) 0 0;
-        }
+    .asset-thumb-placeholder svg { width: 28px; height: 28px; }
 
-        .card-thumbnail img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-            transition: opacity 0.3s ease;
-        }
+    .asset-thumb-overlay {
+      position: absolute;
+      top: var(--sp-2);
+      left: var(--sp-2);
+      right: var(--sp-2);
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: var(--sp-1);
+    }
 
-        .card-thumbnail img.loading { opacity: 0.3; }
-        .card-thumbnail img.loaded  { opacity: 1; }
+    .asset-duration {
+      font-size: 10px;
+      font-weight: 500;
+      font-variant-numeric: tabular-nums;
+      color: oklch(93% 0.008 250);
+      background: oklch(8% 0.010 250 / 0.75);
+      padding: 1px 5px;
+      border-radius: 3px;
+    }
 
-        .card-thumbnail .thumb-placeholder {
-            position: absolute;
-            inset: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2rem;
-            opacity: 0.2;
-        }
+    /* Asset metadata */
+    .asset-meta {
+      padding: var(--sp-3);
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-1);
+    }
 
-        /* Status pulse for recording/processing */
-        .card-status-dot {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            margin-right: 4px;
-        }
-        .card-status-dot.processing { background: #f59e0b; animation: pulse 1.5s infinite; }
-        .card-status-dot.ingesting  { background: #3b82f6; animation: pulse 1.5s infinite; }
-        .card-status-dot.ready      { background: #22c55e; }
-        .card-status-dot.error      { background: #ef4444; }
+    .asset-name {
+      font-size: var(--text-sm);
+      font-weight: 500;
+      color: var(--text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50%       { opacity: 0.3; }
-        }
-    </style>
+    .asset-info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .asset-type {
+      font-size: var(--text-xs);
+      color: var(--text-tertiary);
+    }
+
+    /* Drag-over overlay */
+    .drop-overlay {
+      position: fixed;
+      inset: 0;
+      background: oklch(76% 0.178 52 / 0.07);
+      border: 2px dashed var(--accent);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--t-fast);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .drop-overlay.active { opacity: 1; }
+    .drop-overlay-label {
+      font-size: var(--text-xl);
+      font-weight: 500;
+      color: var(--accent);
+    }
+
+    /* Project selector in topbar */
+    .project-select {
+      height: 28px;
+      font-size: var(--text-sm);
+      padding: 0 24px 0 var(--sp-3);
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-md);
+      color: var(--text-primary);
+      min-width: 160px;
+    }
+
+    /* Asset detail popover */
+    .asset-actions {
+      position: absolute;
+      top: var(--sp-2);
+      right: var(--sp-2);
+      display: none;
+      gap: var(--sp-1);
+    }
+    .asset-card:hover .asset-actions { display: flex; }
+
+    .asset-action-btn {
+      width: 26px;
+      height: 26px;
+      border-radius: var(--r-sm);
+      background: oklch(8% 0.010 250 / 0.75);
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: oklch(93% 0.008 250);
+      cursor: pointer;
+      transition: background var(--t-fast);
+    }
+    .asset-action-btn:hover { background: oklch(8% 0.010 250 / 0.9); }
+    .asset-action-btn svg { width: 13px; height: 13px; }
+  </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 active" data-page="assets">Assets</div>
-                <div class="nav-item" data-page="capture">Capture</div>
-                <div class="nav-item" data-page="upload">Upload</div>
-                <div class="nav-item" data-page="recorders">Recorders</div>
-            </nav>
-        </header>
-
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Sidebar -->
-            <aside class="sidebar">
-                <div class="sidebar-section">
-                    <div class="sidebar-section-title">Projects</div>
-                    <div id="projectsList"></div>
-                </div>
-                <div class="sidebar-section">
-                    <div class="sidebar-section-title">Bins</div>
-                    <div id="binsList" class="sidebar-tree"></div>
-                </div>
-            </aside>
-
-            <!-- Content Area -->
-            <div class="content-area">
-                <div class="content-main" id="contentMain">
-                    <!-- Assets Header -->
-                    <div class="assets-header">
-                        <h1>Assets</h1>
-                        <div class="assets-controls">
-                            <button class="btn btn-secondary" id="refreshBtn">↻ Refresh</button>
-                            <button class="btn btn-primary" onclick="navigateTo('upload')">↑ Upload</button>
-                            <button class="btn btn-primary" onclick="navigateTo('capture')">⏺ New Capture</button>
-                        </div>
-                    </div>
-
-                    <!-- Search Bar -->
-                    <div class="search-bar">
-                        <span class="search-icon">🔍</span>
-                        <input type="text" id="searchInput" placeholder="Search assets by name, tag, or codec...">
-                    </div>
-
-                    <!-- Filter Tags -->
-                    <div class="filter-group" id="filterGroup"></div>
-
-                    <!-- Assets Grid -->
-                    <div class="grid grid-2" id="assetsGrid"></div>
-
-                    <!-- Empty State -->
-                    <div class="empty-state" id="emptyState" style="display: none;">
-                        <div class="empty-state-icon">📁</div>
-                        <div class="empty-state-text">No assets found</div>
-                        <p style="color: var(--color-text-tertiary); font-size: 0.9rem;">
-                            Create a new capture or upload a file to get started
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Asset Detail Panel -->
-        <div class="asset-detail-panel" id="detailPanel">
-            <div class="detail-header">
-                <h2>Asset Details</h2>
-                <button class="detail-close" onclick="closeDetailPanel()">✕</button>
-            </div>
-            <div class="detail-body">
-                <video class="video-player" id="videoPlayer" controls preload="metadata"></video>
-
-                <div class="detail-section">
-                    <div class="detail-section-title">File Information</div>
-                    <div class="detail-row">
-                        <div class="detail-label">Filename</div>
-                        <div class="detail-value" id="detailFilename">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Codec</div>
-                        <div class="detail-value" id="detailCodec">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Resolution</div>
-                        <div class="detail-value" id="detailResolution">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Framerate</div>
-                        <div class="detail-value" id="detailFps">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Duration</div>
-                        <div class="detail-value" id="detailDuration">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">File Size</div>
-                        <div class="detail-value" id="detailFileSize">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Status</div>
-                        <div class="detail-value" id="detailStatus">—</div>
-                    </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Captured</div>
-                        <div class="detail-value" id="detailCreated">—</div>
-                    </div>
-                </div>
-
-                <div class="detail-section">
-                    <div class="detail-section-title">Metadata</div>
-                    <div class="form-group">
-                        <label class="form-label">Tags</label>
-                        <input type="text" id="detailTags" class="form-input" placeholder="comma-separated tags">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Notes</label>
-                        <textarea id="detailNotes" class="form-textarea" placeholder="Add notes about this asset..."></textarea>
-                    </div>
-                    <div class="detail-actions">
-                        <button class="btn btn-primary btn-sm" onclick="saveAssetMetadata()">Save Changes</button>
-                        <button class="btn btn-secondary btn-sm" onclick="closeDetailPanel()">Close</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Status Bar -->
-        <footer class="status-bar">
-            <div class="status-item">
-                <span class="status-indicator" id="statusIndicator"></span>
-                <span id="statusText">Initializing...</span>
-            </div>
-            <div class="status-item" id="assetCountItem" style="display: none;">
-                <span id="assetCount">0</span> assets
-            </div>
-        </footer>
+<div class="shell">
+  <!-- Sidebar -->
+  <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 active">
+        <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">
+        <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>
 
-    <script src="/js/api.js"></script>
-    <script>
-        // ============================================================
-        // STATE
-        // ============================================================
+  <!-- Main -->
+  <div class="main">
+    <!-- Topbar -->
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="page-title">Library</span>
+        <span class="topbar-sep">/</span>
+        <select class="project-select" id="projectSelect" aria-label="Select project">
+          <option value="">No projects</option>
+        </select>
+      </div>
+      <div class="topbar-right">
+        <button class="btn btn-ghost btn-sm" id="newProjectBtn" title="New project">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v12M2 8h12"/></svg>
+          New project
+        </button>
+        <button class="btn btn-primary btn-sm" id="uploadBtn">
+          <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>
+          Upload
+        </button>
+      </div>
+    </header>
 
-        const state = {
-            assets: [],
-            projects: [],
-            bins: [],
-            selectedAsset: null,
-            selectedProject: null,
-            selectedBin: null,
-            searchQuery: '',
-            filterStatus: null,
-            // Cache of assetId -> thumbnail URL to avoid re-fetching
-            thumbCache: {},
-        };
+    <!-- Library content -->
+    <div class="library-shell">
+      <!-- Bin panel -->
+      <div class="bin-panel">
+        <div class="bin-panel-header">
+          <span class="bin-panel-title">Bins</span>
+          <button class="btn btn-ghost btn-sm" id="newBinBtn" title="New bin" style="padding:0;width:24px;height:24px;">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v12M2 8h12"/></svg>
+          </button>
+        </div>
+        <div class="bin-tree" id="binTree">
+          <div class="bin-item active" data-bin-id="" id="allAssetsItem">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="14" height="10" rx="1"/><path d="M1 4l3-3h8l3 3"/></svg>
+            <span>All assets</span>
+          </div>
+        </div>
+      </div>
 
-        // IntersectionObserver for lazy thumbnail loading
-        const thumbObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    const img = entry.target;
-                    const assetId = img.dataset.assetId;
-                    if (assetId && !img.dataset.loaded) {
-                        loadThumbnail(img, assetId);
-                    }
-                    thumbObserver.unobserve(img);
-                }
-            });
-        }, { rootMargin: '100px' });
+      <!-- Asset area -->
+      <div class="asset-area">
+        <div class="asset-toolbar">
+          <div class="asset-toolbar-left">
+            <span class="asset-count" id="assetCount">0 assets</span>
+          </div>
+          <div class="asset-toolbar-right">
+            <input class="search-input" id="searchInput" type="text" placeholder="Search assets…" aria-label="Search assets">
+          </div>
+        </div>
 
-        // ============================================================
-        // INIT
-        // ============================================================
+        <div class="asset-grid-wrap" id="assetGridWrap">
+          <div id="assetGrid" class="asset-grid"></div>
+          <div id="assetEmpty" class="empty-state" style="display:none;">
+            <div class="empty-state-icon">
+              <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="8" width="32" height="26" rx="2"/><path d="M4 14h32"/><circle cx="20" cy="25" r="6"/><path d="M16 25l2 2 4-4"/></svg>
+            </div>
+            <div class="empty-state-title">No assets yet</div>
+            <div class="empty-state-body">Upload media to this project or select a different bin.</div>
+            <div class="empty-state-actions">
+              <button class="btn btn-primary btn-sm" id="emptyUploadBtn">Upload files</button>
+            </div>
+          </div>
+          <div id="assetLoading" class="empty-state" style="display:none;">
+            <div class="empty-state-body">Loading assets…</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
-        document.addEventListener('DOMContentLoaded', async () => {
-            setupEventListeners();
-            await loadInitialData();
-        });
+<!-- Drag-to-upload overlay -->
+<div class="drop-overlay" id="dropOverlay">
+  <div class="drop-overlay-label">Drop to upload</div>
+</div>
 
-        function setupEventListeners() {
-            document.querySelectorAll('[data-page]').forEach(el => {
-                el.addEventListener('click', (e) => navigateTo(e.target.dataset.page));
-            });
+<!-- Toasts -->
+<div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-            const searchInput = document.getElementById('searchInput');
-            searchInput.addEventListener('input', debounce((e) => {
-                state.searchQuery = e.target.value.toLowerCase();
-                renderAssets();
-            }, 300));
+<!-- New project dialog (inline, not modal) -->
+<div class="slide-overlay" id="projectOverlay"></div>
+<div class="slide-panel" id="projectPanel">
+  <div class="slide-panel-header">
+    <span class="slide-panel-title">New project</span>
+    <button class="btn btn-ghost btn-sm" id="closeProjectPanel" style="padding:0;width:28px;height:28px;">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3l10 10M13 3L3 13"/></svg>
+    </button>
+  </div>
+  <div class="slide-panel-body">
+    <div class="form-group">
+      <label class="form-label" for="newProjectName">Project name</label>
+      <input type="text" id="newProjectName" placeholder="e.g. Evening News 2026-05">
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="newProjectDesc">Description</label>
+      <textarea id="newProjectDesc" rows="3" placeholder="Optional description"></textarea>
+    </div>
+  </div>
+  <div class="slide-panel-footer">
+    <button class="btn btn-ghost" id="cancelProjectBtn">Cancel</button>
+    <button class="btn btn-primary" id="saveProjectBtn">Create project</button>
+  </div>
+</div>
 
-            document.getElementById('refreshBtn').addEventListener('click', loadInitialData);
+<!-- New bin panel -->
+<div class="slide-overlay" id="binOverlay"></div>
+<div class="slide-panel" id="binPanel">
+  <div class="slide-panel-header">
+    <span class="slide-panel-title">New bin</span>
+    <button class="btn btn-ghost btn-sm" id="closeBinPanel" style="padding:0;width:28px;height:28px;">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3l10 10M13 3L3 13"/></svg>
+    </button>
+  </div>
+  <div class="slide-panel-body">
+    <div class="form-group">
+      <label class="form-label" for="newBinName">Bin name</label>
+      <input type="text" id="newBinName" placeholder="e.g. Interviews">
+    </div>
+  </div>
+  <div class="slide-panel-footer">
+    <button class="btn btn-ghost" id="cancelBinBtn">Cancel</button>
+    <button class="btn btn-primary" id="saveBinBtn">Create bin</button>
+  </div>
+</div>
 
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') closeDetailPanel();
-            });
-        }
+<script src="js/api.js"></script>
+<script>
+  const state = {
+    projects: [],
+    currentProjectId: null,
+    bins: [],
+    currentBinId: null,
+    assets: [],
+    thumbCache: {},
+    searchTerm: '',
+  };
 
-        async function loadInitialData() {
-            try {
-                updateStatusBar('Loading...');
+  const thumbObserver = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        loadThumb(e.target);
+        thumbObserver.unobserve(e.target);
+      }
+    });
+  }, { rootMargin: '100px' });
 
-                const [projectsRes, assetsRes] = await Promise.all([
-                    getProjects(),
-                    getAssets({ limit: 100 }),
-                ]);
+  async function loadThumb(img) {
+    const id = img.dataset.assetId;
+    if (!id) return;
+    if (state.thumbCache[id]) { setImgSrc(img, state.thumbCache[id]); return; }
+    try {
+      const r = await api(`/assets/${id}/thumbnail`);
+      if (r.success && r.data?.url) {
+        state.thumbCache[id] = r.data.url;
+        setImgSrc(img, r.data.url);
+      }
+    } catch (_) {}
+  }
 
-                if (projectsRes.success) {
-                    state.projects = projectsRes.data || [];
-                    renderProjects();
-                }
+  function setImgSrc(img, src) {
+    img.src = src;
+    img.onload = () => img.classList.add('loaded');
+  }
 
-                if (assetsRes.success) {
-                    // API returns { assets: [...], total: n }
-                    state.assets = assetsRes.data?.assets ?? assetsRes.data ?? [];
-                    renderAssets();
-                }
+  // ── Init ────────────────────────────────
+  document.addEventListener('DOMContentLoaded', async () => {
+    await loadProjects();
+    setupDrag();
+    setupSearch();
 
-                updateStatusBar();
-            } catch (err) {
-                console.error('Failed to load data:', err);
-                updateStatusBar('Error loading data', true);
-            }
-        }
+    document.getElementById('uploadBtn').onclick = () => location.href = 'upload.html' + (state.currentProjectId ? `?project=${state.currentProjectId}` : '');
+    document.getElementById('emptyUploadBtn').onclick = () => document.getElementById('uploadBtn').click();
+    document.getElementById('newProjectBtn').onclick = () => openPanel('project');
+    document.getElementById('closeProjectPanel').onclick = () => closePanel('project');
+    document.getElementById('cancelProjectBtn').onclick = () => closePanel('project');
+    document.getElementById('projectOverlay').onclick = () => closePanel('project');
+    document.getElementById('saveProjectBtn').onclick = saveProject;
+    document.getElementById('newBinBtn').onclick = () => openPanel('bin');
+    document.getElementById('closeBinPanel').onclick = () => closePanel('bin');
+    document.getElementById('cancelBinBtn').onclick = () => closePanel('bin');
+    document.getElementById('binOverlay').onclick = () => closePanel('bin');
+    document.getElementById('saveBinBtn').onclick = saveBin;
+    document.getElementById('allAssetsItem').onclick = () => selectBin(null);
 
-        // ============================================================
-        // RENDERING
-        // ============================================================
+    const params = new URLSearchParams(location.search);
+    if (params.get('project')) {
+      document.getElementById('projectSelect').value = params.get('project');
+      handleProjectChange();
+    }
+  });
 
-        function renderProjects() {
-            const container = document.getElementById('projectsList');
-            container.innerHTML = '';
+  // ── Projects ──────────────────────────────
+  async function loadProjects() {
+    const r = await getProjects();
+    if (!r.success) return;
+    state.projects = r.data;
+    const sel = document.getElementById('projectSelect');
+    sel.innerHTML = state.projects.length
+      ? state.projects.map(p => `<option value="${p.id}">${escHtml(p.name)}</option>`).join('')
+      : '<option value="">No projects — create one</option>';
+    sel.onchange = handleProjectChange;
+    if (state.projects.length) { state.currentProjectId = state.projects[0].id; await loadBinsAndAssets(); }
+  }
 
-            if (state.projects.length === 0) {
-                container.innerHTML = '<div style="padding:8px;color:var(--color-text-tertiary);font-size:0.85rem;">No projects</div>';
-                return;
-            }
+  function handleProjectChange() {
+    state.currentProjectId = document.getElementById('projectSelect').value || null;
+    state.currentBinId = null;
+    loadBinsAndAssets();
+  }
 
-            state.projects.forEach(project => {
-                const item = document.createElement('div');
-                item.className = `sidebar-item ${state.selectedProject === project.id ? 'active' : ''}`;
-                item.textContent = project.name;
-                item.addEventListener('click', () => selectProject(project.id));
-                container.appendChild(item);
-            });
-        }
+  async function loadBinsAndAssets() {
+    await Promise.all([loadBins(), loadAssets()]);
+  }
 
-        function renderAssets() {
-            const grid = document.getElementById('assetsGrid');
-            const emptyState = document.getElementById('emptyState');
+  async function loadBins() {
+    if (!state.currentProjectId) { renderBins([]); return; }
+    const r = await getBins(state.currentProjectId);
+    state.bins = r.success ? r.data : [];
+    renderBins(state.bins);
+  }
 
-            let filtered = [...state.assets];
+  function renderBins(bins) {
+    const tree = document.getElementById('binTree');
+    const allItem = document.getElementById('allAssetsItem');
+    tree.querySelectorAll('.bin-item:not(#allAssetsItem)').forEach(n => n.remove());
+    bins.forEach(bin => {
+      const el = document.createElement('a');
+      el.className = 'bin-item';
+      el.dataset.binId = bin.id;
+      el.innerHTML = `
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="1" y="5" width="14" height="9" rx="1"/>
+          <path d="M1 5l2.5-3h9L15 5"/>
+        </svg>
+        <span>${escHtml(bin.name)}</span>`;
+      el.onclick = () => selectBin(bin.id);
+      tree.appendChild(el);
+    });
+    updateBinActive();
+  }
 
-            if (state.searchQuery) {
-                filtered = filtered.filter(asset => {
-                    const haystack = [
-                        asset.filename,
-                        asset.display_name,
-                        ...(asset.tags || []),
-                        asset.notes || '',
-                    ].join(' ').toLowerCase();
-                    return haystack.includes(state.searchQuery);
-                });
-            }
+  function selectBin(binId) {
+    state.currentBinId = binId;
+    updateBinActive();
+    loadAssets();
+  }
 
-            if (state.filterStatus) {
-                filtered = filtered.filter(a => a.status === state.filterStatus);
-            }
+  function updateBinActive() {
+    document.querySelectorAll('.bin-item').forEach(el => {
+      const id = el.dataset.binId || null;
+      el.classList.toggle('active', id === state.currentBinId);
+    });
+  }
 
-            if (state.selectedProject) {
-                filtered = filtered.filter(a => a.project_id === state.selectedProject);
-            }
+  // ── Assets ────────────────────────────────
+  async function loadAssets() {
+    if (!state.currentProjectId) { renderAssets([]); return; }
+    document.getElementById('assetLoading').style.display = 'flex';
+    document.getElementById('assetEmpty').style.display = 'none';
+    document.getElementById('assetGrid').innerHTML = '';
 
-            if (state.selectedBin) {
-                filtered = filtered.filter(a => a.bin_id === state.selectedBin);
-            }
+    const filters = { project_id: state.currentProjectId };
+    if (state.currentBinId) filters.bin_id = state.currentBinId;
+    const r = await getAssets(filters);
+    document.getElementById('assetLoading').style.display = 'none';
+    state.assets = r.success ? r.data : [];
+    renderAssets(state.assets);
+  }
 
-            if (filtered.length === 0) {
-                grid.innerHTML = '';
-                emptyState.style.display = 'flex';
-                document.getElementById('assetCountItem').style.display = 'none';
-                return;
-            }
+  function renderAssets(assets) {
+    const term = state.searchTerm.toLowerCase();
+    const filtered = term ? assets.filter(a => a.filename?.toLowerCase().includes(term) || a.display_name?.toLowerCase().includes(term)) : assets;
+    const grid = document.getElementById('assetGrid');
+    grid.innerHTML = '';
 
-            emptyState.style.display = 'none';
-            grid.innerHTML = '';
+    const count = filtered.length;
+    document.getElementById('assetCount').textContent = `${count} asset${count !== 1 ? 's' : ''}`;
+    document.getElementById('assetEmpty').style.display = count === 0 ? 'flex' : 'none';
 
-            filtered.forEach(asset => {
-                const card = createAssetCard(asset);
-                grid.appendChild(card);
-            });
+    filtered.forEach(asset => {
+      const card = document.createElement('div');
+      card.className = 'asset-card';
+      card.dataset.assetId = asset.id;
+      const statusClass = statusBadgeClass(asset.status);
+      card.innerHTML = `
+        <div class="asset-thumb">
+          <div class="asset-thumb-placeholder">
+            ${mediaIcon(asset.media_type)}
+          </div>
+          <img data-asset-id="${asset.id}" alt="${escHtml(asset.display_name || asset.filename)}" aria-hidden="false">
+          <div class="asset-thumb-overlay">
+            <span class="badge ${statusClass}">${escHtml(asset.status)}</span>
+            ${asset.duration ? `<span class="asset-duration">${formatDuration(asset.duration)}</span>` : ''}
+          </div>
+          <div class="asset-actions">
+            <button class="asset-action-btn" onclick="deleteAssetPrompt('${asset.id}', event)" title="Delete">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4v9h6V4"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="asset-meta">
+          <div class="asset-name">${escHtml(asset.display_name || asset.filename)}</div>
+          <div class="asset-info">
+            <span class="asset-type">${escHtml(asset.media_type || '')}</span>
+            <span class="text-tertiary text-xs">${asset.file_size ? formatFileSize(asset.file_size) : ''}</span>
+          </div>
+        </div>`;
 
-            renderFilterGroup();
-            updateStatusBar();
-        }
+      const img = card.querySelector('img');
+      if (asset.thumbnail_s3_key) thumbObserver.observe(img);
+      else img.style.display = 'none';
 
-        function createAssetCard(asset) {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.dataset.assetId = asset.id;
+      grid.appendChild(card);
+    });
+  }
 
-            const durationStr = formatDuration(
-                asset.duration_ms ? Math.round(asset.duration_ms / 1000) : 0
-            );
+  function statusBadgeClass(s) {
+    const map = { ingesting:'badge-ingesting', processing:'badge-processing', ready:'badge-ready', error:'badge-error', archived:'badge-archived' };
+    return map[s] || 'badge-idle';
+  }
 
-            card.innerHTML = `
-                <div class="card-thumbnail">
-                    <span class="thumb-placeholder">🎬</span>
-                    <img
-                        data-asset-id="${asset.id}"
-                        alt="${escapeHtml(asset.display_name || asset.filename)}"
-                        class="loading"
-                        style="position:absolute;inset:0;"
-                    >
-                </div>
-                <div class="card-content">
-                    <div class="card-title">${escapeHtml(asset.display_name || asset.filename)}</div>
-                    <div class="card-meta">
-                        <div class="card-duration">${durationStr}</div>
-                        <div class="card-status">
-                            <span class="card-status-dot ${asset.status}"></span>
-                            <span class="badge ${getStatusBadgeClass(asset.status)}">
-                                ${getStatusLabel(asset.status)}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            `;
+  function mediaIcon(type) {
+    if (type === 'video') return `<svg viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.2" width="28" height="28"><rect x="2" y="6" width="18" height="16" rx="2"/><path d="M20 11l6-3v12l-6-3"/></svg>`;
+    if (type === 'audio') return `<svg viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.2" width="28" height="28"><path d="M14 3v16M10 7v8M6 10v4M18 7v8M22 10v4"/></svg>`;
+    if (type === 'image') return `<svg viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.2" width="28" height="28"><rect x="3" y="3" width="22" height="22" rx="2"/><circle cx="10" cy="10" r="2.5"/><path d="M3 20l6-5 5 4 4-3 7 5"/></svg>`;
+    return `<svg viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.2" width="28" height="28"><path d="M8 4H5v20h18V10l-6-6H8z"/><path d="M17 4v6h5"/></svg>`;
+  }
 
-            // Observe the img element for lazy thumbnail loading
-            const img = card.querySelector('img[data-asset-id]');
-            if (asset.thumbnail_s3_key) {
-                thumbObserver.observe(img);
-            } else {
-                // No thumbnail yet — hide the img entirely, show placeholder
-                img.style.display = 'none';
-            }
+  async function deleteAssetPrompt(id, e) {
+    e.stopPropagation();
+    if (!confirm('Delete this asset? This cannot be undone.')) return;
+    const r = await updateAsset(id, { status: 'deleted' });
+    if (r.success) { toast('Asset deleted', '', 'success'); loadAssets(); }
+    else toast('Delete failed', r.error, 'error');
+  }
 
-            card.addEventListener('click', () => openAssetDetail(asset));
-            return card;
-        }
+  // ── Search ────────────────────────────────
+  function setupSearch() {
+    const inp = document.getElementById('searchInput');
+    inp.addEventListener('input', () => {
+      state.searchTerm = inp.value;
+      renderAssets(state.assets);
+    });
+  }
 
-        async function loadThumbnail(img, assetId) {
-            // Use cached URL if available
-            if (state.thumbCache[assetId]) {
-                img.src = state.thumbCache[assetId];
-                img.classList.remove('loading');
-                img.classList.add('loaded');
-                img.dataset.loaded = '1';
-                return;
-            }
+  // ── New project ───────────────────────────
+  async function saveProject() {
+    const name = document.getElementById('newProjectName').value.trim();
+    if (!name) return;
+    const r = await createProject(name, document.getElementById('newProjectDesc').value.trim());
+    if (r.success) {
+      toast('Project created', name, 'success');
+      closePanel('project');
+      document.getElementById('newProjectName').value = '';
+      document.getElementById('newProjectDesc').value = '';
+      await loadProjects();
+      document.getElementById('projectSelect').value = r.data.id;
+      handleProjectChange();
+    } else toast('Failed to create project', r.error, 'error');
+  }
 
-            try {
-                const result = await api(`/assets/${assetId}/thumbnail`);
-                if (result.success) {
-                    state.thumbCache[assetId] = result.data.url;
-                    img.src = result.data.url;
-                    img.onload = () => {
-                        img.classList.remove('loading');
-                        img.classList.add('loaded');
-                    };
-                    img.dataset.loaded = '1';
-                }
-            } catch (err) {
-                // Silently ignore — placeholder stays
-            }
-        }
+  // ── New bin ──────────────────────────────
+  async function saveBin() {
+    if (!state.currentProjectId) { toast('Select a project first', '', 'warning'); return; }
+    const name = document.getElementById('newBinName').value.trim();
+    if (!name) return;
+    const r = await createBin(state.currentProjectId, name);
+    if (r.success) {
+      toast('Bin created', name, 'success');
+      closePanel('bin');
+      document.getElementById('newBinName').value = '';
+      await loadBins();
+    } else toast('Failed to create bin', r.error, 'error');
+  }
 
-        function renderFilterGroup() {
-            const container = document.getElementById('filterGroup');
-            container.innerHTML = '';
+  // ── Drag upload ───────────────────────────
+  function setupDrag() {
+    let dragCount = 0;
+    const overlay = document.getElementById('dropOverlay');
+    document.addEventListener('dragenter', e => { e.preventDefault(); dragCount++; overlay.classList.add('active'); });
+    document.addEventListener('dragleave', () => { if (--dragCount <= 0) { dragCount = 0; overlay.classList.remove('active'); } });
+    document.addEventListener('dragover', e => e.preventDefault());
+    document.addEventListener('drop', e => {
+      e.preventDefault();
+      dragCount = 0;
+      overlay.classList.remove('active');
+      if (!state.currentProjectId) { toast('Select a project first', '', 'warning'); return; }
+      const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('video/') || f.type.startsWith('audio/') || f.type.startsWith('image/'));
+      if (files.length === 0) { toast('No supported media files', '', 'warning'); return; }
+      sessionStorage.setItem('pendingFiles', JSON.stringify(files.map(f => f.name)));
+      location.href = `upload.html?project=${state.currentProjectId}`;
+    });
+  }
 
-            const counts = {};
-            state.assets.forEach(asset => {
-                counts[asset.status] = (counts[asset.status] || 0) + 1;
-            });
+  // ── Panel helpers ─────────────────────────
+  function openPanel(name) {
+    document.getElementById(name + 'Panel').classList.add('open');
+    document.getElementById(name + 'Overlay').classList.add('open');
+  }
+  function closePanel(name) {
+    document.getElementById(name + 'Panel').classList.remove('open');
+    document.getElementById(name + 'Overlay').classList.remove('open');
+  }
 
-            Object.entries(counts).forEach(([status, count]) => {
-                const tag = document.createElement('div');
-                tag.className = `filter-tag ${state.filterStatus === status ? 'active' : ''}`;
-                tag.textContent = `${getStatusLabel(status)} (${count})`;
-                tag.addEventListener('click', () => {
-                    state.filterStatus = state.filterStatus === status ? null : status;
-                    renderAssets();
-                });
-                container.appendChild(tag);
-            });
-        }
+  // ── Toast ────────────────────────────────
+  function toast(title, msg, type = 'info') {
+    const icons = {
+      success: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><path d="M5 8l2 2 4-4"/></svg>`,
+      error:   `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><path d="M8 5v4M8 11v.5"/></svg>`,
+      warning: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2L1 14h14L8 2z"/><path d="M8 7v3M8 12v.5"/></svg>`,
+      info:    `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><path d="M8 7v5M8 5v.5"/></svg>`,
+    };
+    const el = document.createElement('div');
+    el.className = `toast toast--${type}`;
+    el.innerHTML = `<div class="toast-icon">${icons[type]||icons.info}</div><div class="toast-body"><div class="toast-title">${escHtml(title)}</div>${msg?`<div class="toast-msg">${escHtml(msg)}</div>`:''}</div>`;
+    document.getElementById('toastContainer').appendChild(el);
+    setTimeout(() => el.remove(), 4000);
+  }
 
-        // ============================================================
-        // ASSET DETAIL PANEL
-        // ============================================================
+  function escHtml(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
 
-        async function openAssetDetail(asset) {
-            state.selectedAsset = asset;
-            const panel = document.getElementById('detailPanel');
-            const main  = document.getElementById('contentMain');
-            const video = document.getElementById('videoPlayer');
+  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';
+  }
 
-            // Clear previous video
-            video.src = '';
-
-            // Populate with what we already have
-            document.getElementById('detailFilename').textContent  = asset.display_name || asset.filename;
-            document.getElementById('detailCodec').textContent      = asset.codec || '—';
-            document.getElementById('detailResolution').textContent = asset.resolution || '—';
-            document.getElementById('detailFps').textContent        = asset.fps ? `${asset.fps} fps` : '—';
-            document.getElementById('detailDuration').textContent   = formatDuration(
-                asset.duration_ms ? Math.round(asset.duration_ms / 1000) : 0
-            );
-            document.getElementById('detailFileSize').textContent   = formatFileSize(asset.file_size || 0);
-            document.getElementById('detailStatus').innerHTML       =
-                `<span class="badge ${getStatusBadgeClass(asset.status)}">${getStatusLabel(asset.status)}</span>`;
-            document.getElementById('detailCreated').textContent    = new Date(asset.created_at).toLocaleString();
-            document.getElementById('detailTags').value             = (asset.tags || []).join(', ');
-            document.getElementById('detailNotes').value            = asset.notes || '';
-
-            panel.classList.add('active');
-            main.classList.add('detail-open');
-
-            // Load proxy stream URL asynchronously
-            if (asset.proxy_s3_key) {
-                const streamResult = await getAssetStreamUrl(asset.id);
-                if (streamResult.success) {
-                    video.src = streamResult.data.url;
-                }
-            }
-        }
-
-        function closeDetailPanel() {
-            const panel = document.getElementById('detailPanel');
-            const main  = document.getElementById('contentMain');
-            const video = document.getElementById('videoPlayer');
-
-            video.pause();
-            video.src = '';
-            panel.classList.remove('active');
-            main.classList.remove('detail-open');
-            state.selectedAsset = null;
-        }
-
-        async function saveAssetMetadata() {
-            if (!state.selectedAsset) return;
-
-            const tags = document.getElementById('detailTags').value
-                .split(',').map(t => t.trim()).filter(Boolean);
-            const notes = document.getElementById('detailNotes').value;
-
-            const result = await updateAsset(state.selectedAsset.id, { tags, notes });
-
-            if (result.success) {
-                updateStatusBar('Saved');
-                const idx = state.assets.findIndex(a => a.id === state.selectedAsset.id);
-                if (idx >= 0) {
-                    state.assets[idx] = { ...state.assets[idx], tags, notes };
-                }
-                setTimeout(() => updateStatusBar(), 2000);
-            } else {
-                updateStatusBar('Save failed', true);
-            }
-        }
-
-        // ============================================================
-        // PROJECT / BIN SELECTION
-        // ============================================================
-
-        async function selectProject(projectId) {
-            state.selectedProject = state.selectedProject === projectId ? null : projectId;
-            state.selectedBin = null;
-            renderProjects();
-
-            // Load bins for this project
-            const binsContainer = document.getElementById('binsList');
-            binsContainer.innerHTML = '';
-
-            if (state.selectedProject) {
-                const result = await getBins(state.selectedProject);
-                if (result.success) {
-                    state.bins = result.data || [];
-                    renderBins(state.bins, binsContainer, null);
-                }
-            }
-
-            renderAssets();
-        }
-
-        function renderBins(bins, container, parentId) {
-            const children = bins.filter(b => b.parent_id === parentId);
-            children.forEach(bin => {
-                const item = document.createElement('div');
-                item.className = `sidebar-item ${state.selectedBin === bin.id ? 'active' : ''}`;
-                item.style.paddingLeft = parentId ? '24px' : '8px';
-                item.textContent = bin.name;
-                item.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    state.selectedBin = state.selectedBin === bin.id ? null : bin.id;
-                    renderAssets();
-                    // Re-render bins to update active state
-                    container.innerHTML = '';
-                    renderBins(state.bins, container, null);
-                });
-                container.appendChild(item);
-                // Recurse for nested bins
-                renderBins(bins, container, bin.id);
-            });
-        }
-
-        // ============================================================
-        // NAVIGATION
-        // ============================================================
-
-        function navigateTo(page) {
-            const pages = {
-                capture:   '/capture.html',
-                upload:    '/upload.html',
-                recorders: '/recorders.html',
-            };
-            if (pages[page]) window.location.href = pages[page];
-        }
-
-        // ============================================================
-        // STATUS BAR
-        // ============================================================
-
-        function updateStatusBar(message = '', isError = false) {
-            const indicator = document.getElementById('statusIndicator');
-            const text      = document.getElementById('statusText');
-            const countEl   = document.getElementById('assetCountItem');
-
-            if (message) {
-                text.textContent = message;
-                indicator.className = isError ? 'status-indicator disconnected' : 'status-indicator';
-            } else {
-                indicator.className = 'status-indicator';
-                text.textContent = 'Connected';
-            }
-
-            const total = state.assets.length;
-            if (total > 0) {
-                countEl.style.display = 'flex';
-                document.getElementById('assetCount').textContent = total;
-            } else {
-                countEl.style.display = 'none';
-            }
-        }
-
-        // ============================================================
-        // HELPERS
-        // ============================================================
-
-        function escapeHtml(str) {
-            const d = document.createElement('div');
-            d.textContent = str;
-            return d.innerHTML;
-        }
-    </script>
+  function formatDuration(seconds) {
+    if (!seconds) return '';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    if (h > 0) return `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
+    return `${m}:${String(s).padStart(2,'0')}`;
+  }
+</script>
 </body>
 </html>
