From b42199e5973293af0b9e98f253db991d9fe1c324 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 15 May 2026 21:25:29 -0400
Subject: [PATCH] fix: assets response shape, thumbnail lazy-load, bin sidebar
 wired up

---
 services/web-ui/public/index.html | 378 +++++++++++++++++++++---------
 1 file changed, 262 insertions(+), 116 deletions(-)

diff --git a/services/web-ui/public/index.html b/services/web-ui/public/index.html
index 5747e59..9d6262a 100644
--- a/services/web-ui/public/index.html
+++ b/services/web-ui/public/index.html
@@ -40,12 +40,8 @@
         }
 
         @keyframes slideInRight {
-            from {
-                transform: translateX(100%);
-            }
-            to {
-                transform: translateX(0);
-            }
+            from { transform: translateX(100%); }
+            to   { transform: translateX(0); }
         }
 
         .detail-header {
@@ -71,9 +67,7 @@
             height: 32px;
         }
 
-        .detail-close:hover {
-            color: var(--color-text-primary);
-        }
+        .detail-close:hover { color: var(--color-text-primary); }
 
         .detail-body {
             padding: var(--spacing-lg);
@@ -81,9 +75,7 @@
             overflow-y: auto;
         }
 
-        .detail-section {
-            margin-bottom: var(--spacing-lg);
-        }
+        .detail-section { margin-bottom: var(--spacing-lg); }
 
         .detail-section-title {
             font-size: 0.85rem;
@@ -154,6 +146,7 @@
             display: flex;
             gap: var(--spacing-sm);
             margin-bottom: var(--spacing-lg);
+            flex-wrap: wrap;
         }
 
         .filter-tag {
@@ -187,8 +180,54 @@
             transition: margin-right var(--transition-normal);
         }
 
-        .content-main.detail-open {
-            margin-right: 400px;
+        .content-main.detail-open { margin-right: 400px; }
+
+        /* 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;
+        }
+
+        .card-thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+            transition: opacity 0.3s ease;
+        }
+
+        .card-thumbnail img.loading { opacity: 0.3; }
+        .card-thumbnail img.loaded  { opacity: 1; }
+
+        .card-thumbnail .thumb-placeholder {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            opacity: 0.2;
+        }
+
+        /* 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; }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50%       { opacity: 0.3; }
         }
     </style>
 </head>
@@ -231,7 +270,7 @@
                         <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>
+                            <button class="btn btn-primary" onclick="navigateTo('capture')">⏺ New Capture</button>
                         </div>
                     </div>
 
@@ -251,7 +290,9 @@
                     <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 to get started</p>
+                        <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>
@@ -264,7 +305,7 @@
                 <button class="detail-close" onclick="closeDetailPanel()">✕</button>
             </div>
             <div class="detail-body">
-                <video class="video-player" id="videoPlayer" controls></video>
+                <video class="video-player" id="videoPlayer" controls preload="metadata"></video>
 
                 <div class="detail-section">
                     <div class="detail-section-title">File Information</div>
@@ -272,10 +313,6 @@
                         <div class="detail-label">Filename</div>
                         <div class="detail-value" id="detailFilename">—</div>
                     </div>
-                    <div class="detail-row">
-                        <div class="detail-label">Format</div>
-                        <div class="detail-value" id="detailFormat">—</div>
-                    </div>
                     <div class="detail-row">
                         <div class="detail-label">Codec</div>
                         <div class="detail-value" id="detailCodec">—</div>
@@ -339,11 +376,10 @@
     <script src="/js/api.js"></script>
     <script>
         // ============================================================
-        // STATE MANAGEMENT
+        // STATE
         // ============================================================
 
-        let state = {
-            currentPage: 'assets',
+        const state = {
             assets: [],
             projects: [],
             bins: [],
@@ -352,35 +388,46 @@
             selectedBin: null,
             searchQuery: '',
             filterStatus: null,
+            // Cache of assetId -> thumbnail URL to avoid re-fetching
+            thumbCache: {},
         };
 
+        // 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' });
+
         // ============================================================
-        // INITIALIZATION
+        // INIT
         // ============================================================
 
         document.addEventListener('DOMContentLoaded', async () => {
             setupEventListeners();
             await loadInitialData();
-            updateStatusBar();
         });
 
         function setupEventListeners() {
-            // Navigation
             document.querySelectorAll('[data-page]').forEach(el => {
                 el.addEventListener('click', (e) => navigateTo(e.target.dataset.page));
             });
 
-            // Search
             const searchInput = document.getElementById('searchInput');
             searchInput.addEventListener('input', debounce((e) => {
                 state.searchQuery = e.target.value.toLowerCase();
                 renderAssets();
             }, 300));
 
-            // Refresh button
             document.getElementById('refreshBtn').addEventListener('click', loadInitialData);
 
-            // Close detail panel on overlay click
             document.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape') closeDetailPanel();
             });
@@ -388,27 +435,27 @@
 
         async function loadInitialData() {
             try {
-                updateStatusBar('Loading data...');
+                updateStatusBar('Loading...');
 
-                // Load projects and assets in parallel
                 const [projectsRes, assetsRes] = await Promise.all([
                     getProjects(),
-                    getAssets(),
+                    getAssets({ limit: 100 }),
                 ]);
 
                 if (projectsRes.success) {
-                    state.projects = projectsRes.data;
+                    state.projects = projectsRes.data || [];
                     renderProjects();
                 }
 
                 if (assetsRes.success) {
-                    state.assets = assetsRes.data;
+                    // API returns { assets: [...], total: n }
+                    state.assets = assetsRes.data?.assets ?? assetsRes.data ?? [];
                     renderAssets();
                 }
 
                 updateStatusBar();
-            } catch (error) {
-                console.error('Failed to load data:', error);
+            } catch (err) {
+                console.error('Failed to load data:', err);
                 updateStatusBar('Error loading data', true);
             }
         }
@@ -421,6 +468,11 @@
             const container = document.getElementById('projectsList');
             container.innerHTML = '';
 
+            if (state.projects.length === 0) {
+                container.innerHTML = '<div style="padding:8px;color:var(--color-text-tertiary);font-size:0.85rem;">No projects</div>';
+                return;
+            }
+
             state.projects.forEach(project => {
                 const item = document.createElement('div');
                 item.className = `sidebar-item ${state.selectedProject === project.id ? 'active' : ''}`;
@@ -434,28 +486,36 @@
             const grid = document.getElementById('assetsGrid');
             const emptyState = document.getElementById('emptyState');
 
-            // Filter assets
-            let filtered = state.assets;
+            let filtered = [...state.assets];
 
             if (state.searchQuery) {
                 filtered = filtered.filter(asset => {
-                    const searchStr = `${asset.filename} ${asset.tags?.join(' ') || ''}`.toLowerCase();
-                    return searchStr.includes(state.searchQuery);
+                    const haystack = [
+                        asset.filename,
+                        asset.display_name,
+                        ...(asset.tags || []),
+                        asset.notes || '',
+                    ].join(' ').toLowerCase();
+                    return haystack.includes(state.searchQuery);
                 });
             }
 
             if (state.filterStatus) {
-                filtered = filtered.filter(asset => asset.status === state.filterStatus);
+                filtered = filtered.filter(a => a.status === state.filterStatus);
             }
 
             if (state.selectedProject) {
-                filtered = filtered.filter(asset => asset.project_id === state.selectedProject);
+                filtered = filtered.filter(a => a.project_id === state.selectedProject);
+            }
+
+            if (state.selectedBin) {
+                filtered = filtered.filter(a => a.bin_id === state.selectedBin);
             }
 
-            // Show/hide empty state
             if (filtered.length === 0) {
                 grid.innerHTML = '';
                 emptyState.style.display = 'flex';
+                document.getElementById('assetCountItem').style.display = 'none';
                 return;
             }
 
@@ -467,22 +527,35 @@
                 grid.appendChild(card);
             });
 
-            // Update filter group
             renderFilterGroup();
+            updateStatusBar();
         }
 
         function createAssetCard(asset) {
             const card = document.createElement('div');
             card.className = 'card';
+            card.dataset.assetId = asset.id;
+
+            const durationStr = formatDuration(
+                asset.duration_ms ? Math.round(asset.duration_ms / 1000) : 0
+            );
+
             card.innerHTML = `
                 <div class="card-thumbnail">
-                    <img src="${asset.thumbnail_url || '/placeholder.png'}" alt="${asset.filename}">
+                    <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">${asset.filename}</div>
+                    <div class="card-title">${escapeHtml(asset.display_name || asset.filename)}</div>
                     <div class="card-meta">
-                        <div class="card-duration">${formatDuration(asset.duration || 0)}</div>
+                        <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>
@@ -490,32 +563,64 @@
                     </div>
                 </div>
             `;
+
+            // 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';
+            }
+
             card.addEventListener('click', () => openAssetDetail(asset));
             return card;
         }
 
+        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;
+            }
+
+            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
+            }
+        }
+
         function renderFilterGroup() {
             const container = document.getElementById('filterGroup');
             container.innerHTML = '';
 
-            const statuses = ['ingesting', 'processing', 'ready', 'error', 'archived'];
             const counts = {};
-
             state.assets.forEach(asset => {
                 counts[asset.status] = (counts[asset.status] || 0) + 1;
             });
 
-            statuses.forEach(status => {
-                if (counts[status] > 0) {
-                    const tag = document.createElement('div');
-                    tag.className = `filter-tag ${state.filterStatus === status ? 'active' : ''}`;
-                    tag.textContent = `${status.charAt(0).toUpperCase() + status.slice(1)} (${counts[status]})`;
-                    tag.addEventListener('click', () => {
-                        state.filterStatus = state.filterStatus === status ? null : status;
-                        renderAssets();
-                    });
-                    container.appendChild(tag);
-                }
+            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);
             });
         }
 
@@ -526,41 +631,46 @@
         async function openAssetDetail(asset) {
             state.selectedAsset = asset;
             const panel = document.getElementById('detailPanel');
-            const main = document.getElementById('contentMain');
+            const main  = document.getElementById('contentMain');
+            const video = document.getElementById('videoPlayer');
 
-            // Fetch full asset details
-            const result = await getAsset(asset.id);
-            if (result.success) {
-                const fullAsset = result.data;
+            // Clear previous video
+            video.src = '';
 
-                // Populate detail panel
-                document.getElementById('detailFilename').textContent = fullAsset.filename;
-                document.getElementById('detailFormat').textContent = fullAsset.format || '—';
-                document.getElementById('detailCodec').textContent = fullAsset.codec || '—';
-                document.getElementById('detailResolution').textContent = fullAsset.resolution || '—';
-                document.getElementById('detailFps').textContent = fullAsset.fps ? `${fullAsset.fps} fps` : '—';
-                document.getElementById('detailDuration').textContent = formatDuration(fullAsset.duration);
-                document.getElementById('detailFileSize').textContent = formatFileSize(fullAsset.file_size || 0);
-                document.getElementById('detailStatus').innerHTML = `<span class="badge ${getStatusBadgeClass(fullAsset.status)}">${getStatusLabel(fullAsset.status)}</span>`;
-                document.getElementById('detailCreated').textContent = new Date(fullAsset.created_at).toLocaleDateString();
-                document.getElementById('detailTags').value = fullAsset.tags?.join(', ') || '';
-                document.getElementById('detailNotes').value = fullAsset.notes || '';
-
-                // Load video player
-                const streamResult = await getAssetStreamUrl(asset.id);
-                if (streamResult.success) {
-                    document.getElementById('videoPlayer').src = streamResult.data.url;
-                }
-            }
+            // 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 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;
@@ -570,53 +680,79 @@
             if (!state.selectedAsset) return;
 
             const tags = document.getElementById('detailTags').value
-                .split(',')
-                .map(t => t.trim())
-                .filter(t => t);
+                .split(',').map(t => t.trim()).filter(Boolean);
             const notes = document.getElementById('detailNotes').value;
 
-            const result = await updateAsset(state.selectedAsset.id, {
-                tags,
-                notes,
-            });
+            const result = await updateAsset(state.selectedAsset.id, { tags, notes });
 
             if (result.success) {
-                updateStatusBar('Asset saved');
-                // Update asset in local state
+                updateStatusBar('Saved');
                 const idx = state.assets.findIndex(a => a.id === state.selectedAsset.id);
                 if (idx >= 0) {
-                    state.assets[idx].tags = tags;
-                    state.assets[idx].notes = notes;
+                    state.assets[idx] = { ...state.assets[idx], tags, notes };
                 }
+                setTimeout(() => updateStatusBar(), 2000);
             } else {
-                updateStatusBar('Failed to save asset', true);
+                updateStatusBar('Save failed', true);
             }
         }
 
         // ============================================================
-        // PROJECT SELECTION
+        // PROJECT / BIN SELECTION
         // ============================================================
 
-        function selectProject(projectId) {
+        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) {
-            if (page === 'capture') {
-                window.location.href = '/capture.html';
-            } else if (page === 'upload') {
-                window.location.href = '/upload.html';
-            } else if (page === 'recorders') {
-                window.location.href = '/recorders.html';
-            } else if (page === 'projects') {
-                alert('Projects page coming soon');
-            }
+            const pages = {
+                capture:   '/capture.html',
+                upload:    '/upload.html',
+                recorders: '/recorders.html',
+            };
+            if (pages[page]) window.location.href = pages[page];
         }
 
         // ============================================================
@@ -625,8 +761,8 @@
 
         function updateStatusBar(message = '', isError = false) {
             const indicator = document.getElementById('statusIndicator');
-            const text = document.getElementById('statusText');
-            const count = document.getElementById('assetCountItem');
+            const text      = document.getElementById('statusText');
+            const countEl   = document.getElementById('assetCountItem');
 
             if (message) {
                 text.textContent = message;
@@ -636,14 +772,24 @@
                 text.textContent = 'Connected';
             }
 
-            const assetCount = state.assets.length;
-            if (assetCount > 0) {
-                count.style.display = 'flex';
-                document.getElementById('assetCount').textContent = assetCount;
+            const total = state.assets.length;
+            if (total > 0) {
+                countEl.style.display = 'flex';
+                document.getElementById('assetCount').textContent = total;
             } else {
-                count.style.display = 'none';
+                countEl.style.display = 'none';
             }
         }
+
+        // ============================================================
+        // HELPERS
+        // ============================================================
+
+        function escapeHtml(str) {
+            const d = document.createElement('div');
+            d.textContent = str;
+            return d.innerHTML;
+        }
     </script>
 </body>
 </html>