diff --git a/services/web-ui/public/capture.html b/services/web-ui/public/capture.html
index 8ccec4c..10386d1 100644
--- a/services/web-ui/public/capture.html
+++ b/services/web-ui/public/capture.html
@@ -1,643 +1,517 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wild Dragon - Capture Control</title>
-    <link rel="stylesheet" href="/css/common.css">
-    <style>
-        .capture-container {
-            display: grid;
-            grid-template-columns: 1fr 2fr 1fr;
-            gap: var(--spacing-lg);
-            height: calc(100vh - 110px);
-            padding: var(--spacing-lg);
-            overflow: hidden;
-        }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Capture — 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>
+    .capture-layout {
+      display: grid;
+      grid-template-columns: 340px 1fr;
+      gap: var(--sp-6);
+      max-width: 960px;
+    }
 
-        .capture-panel {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-md);
-        }
+    /* Control panel */
+    .capture-controls {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-5);
+    }
 
-        .capture-center {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: var(--spacing-lg);
-        }
+    /* Timecode display */
+    .timecode-block {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      padding: var(--sp-5) var(--sp-6);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--sp-3);
+    }
 
-        .recording-display {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: var(--spacing-lg);
-            padding: var(--spacing-xl);
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-            min-height: 250px;
-            justify-content: center;
-        }
+    .timecode-label {
+      font-size: var(--text-xs);
+      font-weight: 500;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--text-tertiary);
+    }
 
-        .recording-status {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: var(--spacing-md);
-        }
+    .timecode-display {
+      font-size: 38px;
+      font-weight: 400;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: 0.06em;
+      color: var(--accent);
+      font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
+      line-height: 1;
+    }
 
-        .recording-indicator-large {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2rem;
-            transition: all var(--transition-normal);
-        }
+    .timecode-display.inactive {
+      color: var(--text-tertiary);
+    }
 
-        .recording-indicator-large.idle {
-            background-color: rgba(16, 185, 129, 0.2);
-            color: var(--color-status-ready);
-        }
+    .timecode-status {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-2);
+      font-size: var(--text-xs);
+      color: var(--text-secondary);
+    }
 
-        .recording-indicator-large.recording {
-            background-color: rgba(239, 68, 68, 0.2);
-            color: var(--color-status-error);
-            animation: pulse 1.5s infinite;
-        }
+    /* Record button */
+    .record-btn-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--sp-3);
+    }
 
-        .recording-info {
-            text-align: center;
-        }
+    .record-btn {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: oklch(20% 0.010 25);
+      border: 3px solid oklch(30% 0.010 25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
+    }
 
-        .recording-info-item {
-            margin-bottom: var(--spacing-sm);
-        }
+    .record-btn:hover {
+      background: oklch(25% 0.012 25);
+      border-color: var(--status-red);
+    }
 
-        .recording-info-label {
-            font-size: 0.8rem;
-            color: var(--color-text-tertiary);
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
+    .record-btn.recording {
+      background: var(--status-red);
+      border-color: var(--status-red);
+      box-shadow: 0 0 0 4px oklch(62% 0.22 25 / 0.20);
+      animation: rec-pulse 2s ease-out infinite;
+    }
 
-        .recording-info-value {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-            font-family: 'Courier New', monospace;
-        }
+    .record-btn-inner {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: var(--status-red);
+      transition: border-radius var(--t-fast), width var(--t-fast), height var(--t-fast);
+    }
 
-        .control-buttons {
-            display: flex;
-            gap: var(--spacing-lg);
-            width: 100%;
-            justify-content: center;
-        }
+    .record-btn.recording .record-btn-inner {
+      border-radius: var(--r-sm);
+      width: 22px;
+      height: 22px;
+      background: oklch(98% 0.005 25);
+    }
 
-        .btn-record {
-            width: 120px;
-            height: 120px;
-            border-radius: 50%;
-            font-size: 1.2rem;
-            font-weight: 700;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all var(--transition-normal);
-        }
+    @keyframes rec-pulse {
+      0%   { box-shadow: 0 0 0 4px oklch(62% 0.22 25 / 0.25); }
+      50%  { box-shadow: 0 0 0 10px oklch(62% 0.22 25 / 0.08); }
+      100% { box-shadow: 0 0 0 4px oklch(62% 0.22 25 / 0.25); }
+    }
 
-        .btn-record:hover {
-            transform: scale(1.05);
-        }
+    .record-btn-label {
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+      font-weight: 500;
+    }
 
-        .btn-record:active:not(:disabled) {
-            transform: scale(0.95);
-        }
+    .record-btn-label.recording { color: var(--status-red); }
 
-        .btn-start {
-            background-color: var(--color-accent-primary);
-            color: white;
-        }
+    /* Settings panel */
+    .capture-settings {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      padding: var(--sp-4);
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-4);
+    }
 
-        .btn-start:hover:not(:disabled) {
-            background-color: var(--color-accent-light);
-            box-shadow: 0 8px 24px rgba(233, 69, 96, 0.4);
-        }
+    .settings-title {
+      font-size: var(--text-xs);
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-tertiary);
+      padding-bottom: var(--sp-3);
+      border-bottom: 1px solid var(--border);
+    }
 
-        .btn-stop {
-            background-color: var(--color-status-error);
-            color: white;
-        }
+    /* Status bar */
+    .status-bar {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-3);
+      padding: var(--sp-3) var(--sp-4);
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      font-size: var(--text-xs);
+      color: var(--text-secondary);
+    }
 
-        .btn-stop:hover:not(:disabled) {
-            background-color: #ef5555;
-        }
+    .status-bar-dot { flex-shrink: 0; }
+    .status-bar-text { flex: 1; }
+    .status-bar-file { font-family: 'SF Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
 
-        .recent-captures-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-        }
-
-        .capture-item {
-            padding: var(--spacing-md);
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-md);
-            transition: all var(--transition-fast);
-        }
-
-        .capture-item:hover {
-            border-color: var(--color-accent-primary);
-            background-color: var(--color-bg-hover);
-        }
-
-        .capture-item-name {
-            font-weight: 600;
-            color: var(--color-text-primary);
-            margin-bottom: var(--spacing-xs);
-            font-size: 0.95rem;
-        }
-
-        .capture-item-meta {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.8rem;
-            color: var(--color-text-tertiary);
-        }
-
-        @media (max-width: 1024px) {
-            .capture-container {
-                grid-template-columns: 1fr;
-                height: auto;
-            }
-
-            .recording-display {
-                min-height: 200px;
-            }
-
-            .btn-record {
-                width: 100px;
-                height: 100px;
-            }
-        }
-
-        .control-section {
-            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);
-        }
-    </style>
+    /* Recent captures table */
+    .recent-section { display: flex; flex-direction: column; gap: var(--sp-3); }
+    .recent-title {
+      font-size: var(--text-xs);
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-tertiary);
+    }
+  </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 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">
+        <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 active">
+        <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>
+
+  <div class="main">
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="page-title">Capture</span>
+        <span class="topbar-sep">/</span>
+        <span class="text-sm text-secondary">Direct SDI</span>
+      </div>
+      <div class="topbar-right">
+        <span class="text-xs text-tertiary" id="deviceStatus">Loading devices…</span>
+      </div>
+    </header>
+
+    <div class="page-content">
+      <!-- No-device empty state (shown when no SDI cards found) -->
+      <div id="noDeviceState" 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="3" y="10" width="34" height="22" rx="2"/><path d="M13 32v4M27 32v4M9 36h22"/><path d="M16 19l4-3 4 3-1.5 5h-5L16 19z" stroke-opacity="0.5"/></svg>
+        </div>
+        <div class="empty-state-title">No SDI devices found</div>
+        <div class="empty-state-body">This machine has no DeckLink cards installed. To ingest live streams via SRT or RTMP, use the Recorders page instead.</div>
+        <div class="empty-state-actions">
+          <a href="recorders.html" class="btn btn-primary btn-sm">Go to Recorders</a>
+          <button class="btn btn-ghost btn-sm" onclick="initCapture()">Retry</button>
+        </div>
+      </div>
+
+      <!-- Main capture layout (shown when devices found) -->
+      <div class="capture-layout" id="captureLayout" style="display:none;">
+        <!-- Left: controls -->
+        <div class="capture-controls">
+          <!-- Timecode -->
+          <div class="timecode-block">
+            <div class="timecode-label">Elapsed</div>
+            <div class="timecode-display inactive" id="timecodeDisplay">00:00:00:00</div>
+            <div class="timecode-status">
+              <span class="status-dot status-dot--idle" id="recStatusDot"></span>
+              <span id="recStatusLabel">Ready</span>
             </div>
-            <nav class="header-nav">
-                <div class="nav-item" data-page="assets">Assets</div>
-                <div class="nav-item active" data-page="capture">Capture</div>
-                <div class="nav-item" data-page="projects">Projects</div>
-            </nav>
-        </header>
+          </div>
 
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Sidebar -->
-            <aside class="sidebar">
-                <div class="sidebar-section">
-                    <div class="sidebar-section-title">Capture Settings</div>
-                    <div class="control-section">
-                        <div class="form-group">
-                            <label class="form-label">Project</label>
-                            <select id="projectSelect" class="form-select"></select>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Bin</label>
-                            <select id="binSelect" class="form-select"></select>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Clip Name</label>
-                            <input type="text" id="clipNameInput" class="form-input" placeholder="e.g., Interview_John_01">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Device</label>
-                            <select id="deviceSelect" class="form-select"></select>
-                        </div>
-                    </div>
-                </div>
-            </aside>
+          <!-- Record button -->
+          <div class="record-btn-wrap">
+            <button class="record-btn" id="recordBtn" onclick="toggleRecord()" aria-label="Start recording" title="Start/stop recording">
+              <div class="record-btn-inner"></div>
+            </button>
+            <div class="record-btn-label" id="recordBtnLabel">Record</div>
+          </div>
 
-            <!-- Content Area -->
-            <div class="content-area">
-                <div class="content-main">
-                    <div class="capture-container">
-                        <!-- Left Panel -->
-                        <div class="capture-panel">
-                            <div class="control-section">
-                                <div style="text-align: center;">
-                                    <h3 style="margin-bottom: var(--spacing-md);">Device Status</h3>
-                                    <div id="deviceStatus" style="color: var(--color-text-tertiary); font-size: 0.9rem;">
-                                        Loading devices...
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Center Panel -->
-                        <div class="capture-center">
-                            <div class="recording-display">
-                                <div class="recording-status">
-                                    <div class="recording-indicator-large idle" id="recordingIndicator">●</div>
-                                    <div class="recording-info">
-                                        <div class="recording-info-item">
-                                            <div class="recording-info-label">Timecode</div>
-                                            <div class="recording-info-value" id="timecodeDisplay">00:00:00</div>
-                                        </div>
-                                        <div class="recording-info-item">
-                                            <div class="recording-info-label">Status</div>
-                                            <div class="recording-info-value" id="statusDisplay" style="color: var(--color-status-ready);">IDLE</div>
-                                        </div>
-                                        <div class="recording-info-item" id="clipNameDisplay" style="display: none;">
-                                            <div class="recording-info-label">Clip</div>
-                                            <div class="recording-info-value" id="clipNameText"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="control-buttons">
-                                <button class="btn btn-record btn-start" id="startBtn" onclick="handleStartRecording()">
-                                    ⏺ START
-                                </button>
-                                <button class="btn btn-record btn-stop" id="stopBtn" onclick="handleStopRecording()" disabled>
-                                    ⏹ STOP
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Right Panel -->
-                        <div class="capture-panel">
-                            <h3 style="margin-bottom: var(--spacing-md);">Recent Captures</h3>
-                            <div class="recent-captures-list" id="recentCapturesList">
-                                <div style="text-align: center; color: var(--color-text-tertiary); padding: var(--spacing-lg);">
-                                    No captures yet
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+          <!-- Status bar -->
+          <div class="status-bar" id="statusBar">
+            <span class="status-bar-dot status-dot status-dot--idle" id="statusDot"></span>
+            <span class="status-bar-text" id="statusText">Select device and project to begin</span>
+          </div>
         </div>
 
-        <!-- Status Bar -->
-        <footer class="status-bar">
-            <div class="status-item">
-                <span class="status-indicator" id="statusIndicator"></span>
-                <span id="statusText">Initializing...</span>
+        <!-- Right: settings + recent -->
+        <div style="display:flex;flex-direction:column;gap:var(--sp-5);">
+          <!-- Settings -->
+          <div class="capture-settings">
+            <div class="settings-title">Source</div>
+            <div class="form-group">
+              <label class="form-label" for="deviceSelect">Device</label>
+              <select id="deviceSelect"></select>
             </div>
-            <div class="status-item">
-                <span id="captureMode">Ready to capture</span>
+          </div>
+
+          <div class="capture-settings">
+            <div class="settings-title">Destination</div>
+            <div class="form-group">
+              <label class="form-label" for="projectSelect">Project</label>
+              <select id="projectSelect">
+                <option value="">Select project…</option>
+              </select>
             </div>
-        </footer>
+            <div class="form-group">
+              <label class="form-label" for="binSelect">Bin</label>
+              <select id="binSelect">
+                <option value="">Project root</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="clipName">Clip name</label>
+              <input type="text" id="clipName" placeholder="Auto-generated if blank">
+            </div>
+          </div>
+
+          <!-- Recent captures -->
+          <div class="recent-section">
+            <div class="recent-title">Recent captures</div>
+            <div id="recentList">
+              <div class="empty-state" style="padding:var(--sp-8) 0;">
+                <div class="empty-state-body">No recent captures</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
+</div>
 
-    <script src="/js/api.js"></script>
-    <script>
-        // ============================================================
-        // STATE MANAGEMENT
-        // ============================================================
+<div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-        let captureState = {
-            isRecording: false,
-            currentDevice: null,
-            currentProject: null,
-            currentBin: null,
-            currentClipName: '',
-            projects: [],
-            bins: [],
-            devices: [],
-            recentCaptures: [],
-            recordingTime: 0,
-            recordingInterval: null,
-            sessionId: null,
-        };
+<script src="js/api.js"></script>
+<script>
+  const cState = {
+    devices: [],
+    projects: [],
+    currentDevice: null,
+    isRecording: false,
+    startedAt: null,
+    tcInterval: null,
+  };
 
-        // ============================================================
-        // INITIALIZATION
-        // ============================================================
+  document.addEventListener('DOMContentLoaded', () => {
+    initCapture();
+    document.getElementById('projectSelect').onchange = handleProjectChange;
+  });
 
-        document.addEventListener('DOMContentLoaded', async () => {
-            setupEventListeners();
-            await loadCaptureData();
-            updateStatusBar();
-        });
+  async function initCapture() {
+    document.getElementById('deviceStatus').textContent = 'Loading devices…';
+    const [devRes, projRes, recRes] = await Promise.all([
+      getCaptureDevices(),
+      getProjects(),
+      getRecentCaptures(8),
+    ]);
 
-        function setupEventListeners() {
-            // Navigation
-            document.querySelectorAll('[data-page]').forEach(el => {
-                el.addEventListener('click', (e) => navigateTo(e.target.dataset.page));
-            });
+    if (devRes.success) {
+      cState.devices = devRes.data;
+      renderDevices();
+    }
 
-            // Project selection
-            document.getElementById('projectSelect').addEventListener('change', (e) => {
-                captureState.currentProject = e.target.value;
-                loadBins();
-            });
+    if (projRes.success) {
+      cState.projects = projRes.data;
+      const sel = document.getElementById('projectSelect');
+      sel.innerHTML = '<option value="">Select project…</option>' +
+        projRes.data.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join('');
+    }
 
-            // Bin selection
-            document.getElementById('binSelect').addEventListener('change', (e) => {
-                captureState.currentBin = e.target.value;
-            });
+    if (recRes.success) renderRecent(recRes.data);
 
-            // Device selection
-            document.getElementById('deviceSelect').addEventListener('change', (e) => {
-                captureState.currentDevice = e.target.value;
-            });
+    if (!cState.devices.length) {
+      document.getElementById('noDeviceState').style.display = 'flex';
+      document.getElementById('captureLayout').style.display = 'none';
+      document.getElementById('deviceStatus').textContent = 'No devices';
+    } else {
+      document.getElementById('noDeviceState').style.display = 'none';
+      document.getElementById('captureLayout').style.display = 'grid';
+    }
 
-            // Clip name input
-            document.getElementById('clipNameInput').addEventListener('input', (e) => {
-                captureState.currentClipName = e.target.value;
-            });
-        }
+    // Check if already recording
+    const statusRes = await getRecordingStatus();
+    if (statusRes.success && statusRes.data?.recording) {
+      cState.isRecording = true;
+      cState.startedAt = new Date(statusRes.data.started_at || Date.now());
+      updateRecordingUI();
+      startTimecodeUpdate();
+    }
+  }
 
-        async function loadCaptureData() {
-            try {
-                updateStatusBar('Loading capture devices...');
+  function renderDevices() {
+    const sel = document.getElementById('deviceSelect');
+    const status = document.getElementById('deviceStatus');
+    if (!cState.devices.length) { status.textContent = 'No devices'; return; }
+    sel.innerHTML = cState.devices.map(d => `<option value="${d.id}">${esc(d.name)}</option>`).join('');
+    cState.currentDevice = cState.devices[0].id;
+    status.textContent = `${cState.devices.length} device${cState.devices.length > 1 ? 's' : ''} available`;
+  }
 
-                const [projectsRes, devicesRes, capturesRes] = await Promise.all([
-                    getProjects(),
-                    getCaptureDevices(),
-                    getRecentCaptures(10),
-                ]);
+  async function handleProjectChange() {
+    const pid = document.getElementById('projectSelect').value;
+    const binSel = document.getElementById('binSelect');
+    binSel.innerHTML = '<option value="">Project root</option>';
+    if (!pid) return;
+    const r = await getBins(pid);
+    if (r.success) r.data.forEach(b => binSel.innerHTML += `<option value="${b.id}">${esc(b.name)}</option>`);
+  }
 
-                if (projectsRes.success) {
-                    captureState.projects = projectsRes.data;
-                    renderProjects();
-                    if (captureState.projects.length > 0) {
-                        captureState.currentProject = captureState.projects[0].id;
-                        document.getElementById('projectSelect').value = captureState.currentProject;
-                        await loadBins();
-                    }
-                }
+  async function toggleRecord() {
+    if (cState.isRecording) {
+      await stopCap();
+    } else {
+      await startCap();
+    }
+  }
 
-                if (devicesRes.success) {
-                    captureState.devices = devicesRes.data;
-                    renderDevices();
-                }
+  async function startCap() {
+    const device = document.getElementById('deviceSelect').value;
+    const projectId = document.getElementById('projectSelect').value;
+    if (!device) { toast('Select a device', '', 'warning'); return; }
 
-                if (capturesRes.success) {
-                    captureState.recentCaptures = capturesRes.data;
-                    renderRecentCaptures();
-                }
+    setStatus('Starting…', 'processing');
+    const r = await startRecording(
+      device,
+      projectId || null,
+      document.getElementById('binSelect').value || null,
+      document.getElementById('clipName').value || null
+    );
 
-                // Fetch current recording status
-                const statusRes = await getRecordingStatus();
-                if (statusRes.success && statusRes.data.recording) {
-                    captureState.isRecording = true;
-                    startTimecodeUpdate();
-                    updateRecordingUI();
-                }
+    if (r.success) {
+      cState.isRecording = true;
+      cState.startedAt = new Date();
+      updateRecordingUI();
+      startTimecodeUpdate();
+      setStatus('Recording', 'recording');
+      toast('Recording started', '', 'success');
+    } else {
+      setStatus('Error: ' + (r.error || 'failed to start'), 'error');
+      toast('Failed to start', r.error, 'error');
+    }
+  }
 
-                updateStatusBar();
-            } catch (error) {
-                console.error('Failed to load capture data:', error);
-                updateStatusBar('Error loading capture devices', true);
-            }
-        }
+  async function stopCap() {
+    setStatus('Stopping…', 'processing');
+    const r = await stopRecording();
+    if (r.success) {
+      cState.isRecording = false;
+      clearInterval(cState.tcInterval);
+      cState.tcInterval = null;
+      updateRecordingUI();
+      setStatus('Stopped — file saved', 'idle');
+      toast('Recording stopped', r.data?.filename || '', 'success');
+      setTimeout(() => initCapture(), 1500);
+    } else {
+      setStatus('Stop failed: ' + r.error, 'error');
+      toast('Failed to stop', r.error, 'error');
+    }
+  }
 
-        // ============================================================
-        // RENDERING
-        // ============================================================
+  function updateRecordingUI() {
+    const btn = document.getElementById('recordBtn');
+    const label = document.getElementById('recordBtnLabel');
+    const tc = document.getElementById('timecodeDisplay');
+    const dot = document.getElementById('recStatusDot');
+    const statusLabel = document.getElementById('recStatusLabel');
 
-        function renderProjects() {
-            const select = document.getElementById('projectSelect');
-            select.innerHTML = '';
+    if (cState.isRecording) {
+      btn.classList.add('recording');
+      btn.setAttribute('aria-label', 'Stop recording');
+      label.textContent = 'Stop';
+      label.classList.add('recording');
+      tc.classList.remove('inactive');
+      dot.className = 'status-dot status-dot--recording';
+      statusLabel.textContent = 'Recording';
+    } else {
+      btn.classList.remove('recording');
+      btn.setAttribute('aria-label', 'Start recording');
+      label.textContent = 'Record';
+      label.classList.remove('recording');
+      tc.classList.add('inactive');
+      tc.textContent = '00:00:00:00';
+      dot.className = 'status-dot status-dot--idle';
+      statusLabel.textContent = 'Ready';
+    }
+  }
 
-            captureState.projects.forEach(project => {
-                const option = document.createElement('option');
-                option.value = project.id;
-                option.textContent = project.name;
-                select.appendChild(option);
-            });
-        }
+  function startTimecodeUpdate() {
+    if (cState.tcInterval) clearInterval(cState.tcInterval);
+    cState.tcInterval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - cState.startedAt) / 1000);
+      const h = Math.floor(elapsed / 3600);
+      const m = Math.floor((elapsed % 3600) / 60);
+      const s = elapsed % 60;
+      const f = Math.floor((Date.now() - cState.startedAt) % 1000 / (1000 / 30));
+      document.getElementById('timecodeDisplay').textContent =
+        [h, m, s, f].map(v => String(v).padStart(2,'0')).join(':');
+    }, 33);
+  }
 
-        function renderDevices() {
-            const select = document.getElementById('deviceSelect');
-            const statusDiv = document.getElementById('deviceStatus');
-            select.innerHTML = '';
+  function setStatus(text, type) {
+    document.getElementById('statusText').textContent = text;
+    const dot = document.getElementById('statusDot');
+    const dotClass = { recording:'status-dot--recording', processing:'status-dot--processing', error:'status-dot--error', idle:'status-dot--idle' }[type] || 'status-dot--idle';
+    dot.className = `status-bar-dot status-dot ${dotClass}`;
+  }
 
-            if (captureState.devices.length === 0) {
-                statusDiv.innerHTML = '<span style="color: var(--color-status-error);">No devices found</span>';
-                return;
-            }
+  function renderRecent(captures) {
+    const list = document.getElementById('recentList');
+    if (!captures?.length) return;
+    list.innerHTML = `<table class="data-table">
+      <thead><tr><th>File</th><th>Duration</th><th>Date</th></tr></thead>
+      <tbody>${captures.map(c => `
+        <tr>
+          <td class="truncate" style="max-width:200px">${esc(c.filename || c.clip_name || 'untitled')}</td>
+          <td>${c.duration ? formatDuration(c.duration) : '—'}</td>
+          <td>${c.created_at ? new Date(c.created_at).toLocaleString() : '—'}</td>
+        </tr>`).join('')}
+      </tbody>
+    </table>`;
+  }
 
-            statusDiv.innerHTML = `<span style="color: var(--color-status-ready);">${captureState.devices.length} device(s) available</span>`;
+  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);
+  }
 
-            captureState.devices.forEach(device => {
-                const option = document.createElement('option');
-                option.value = device.id;
-                option.textContent = `${device.name} (${device.interface})`;
-                select.appendChild(option);
-            });
-
-            if (captureState.devices.length > 0) {
-                captureState.currentDevice = captureState.devices[0].id;
-                document.getElementById('deviceSelect').value = captureState.currentDevice;
-            }
-        }
-
-        async function loadBins() {
-            if (!captureState.currentProject) return;
-
-            const result = await getBins(captureState.currentProject);
-            if (result.success) {
-                captureState.bins = result.data;
-                renderBins();
-            }
-        }
-
-        function renderBins() {
-            const select = document.getElementById('binSelect');
-            select.innerHTML = '';
-
-            captureState.bins.forEach(bin => {
-                const option = document.createElement('option');
-                option.value = bin.id;
-                option.textContent = bin.name;
-                select.appendChild(option);
-            });
-
-            if (captureState.bins.length > 0) {
-                captureState.currentBin = captureState.bins[0].id;
-                document.getElementById('binSelect').value = captureState.currentBin;
-            }
-        }
-
-        function renderRecentCaptures() {
-            const container = document.getElementById('recentCapturesList');
-
-            if (captureState.recentCaptures.length === 0) {
-                container.innerHTML = '<div style="text-align: center; color: var(--color-text-tertiary); padding: var(--spacing-lg);">No captures yet</div>';
-                return;
-            }
-
-            container.innerHTML = '';
-            captureState.recentCaptures.slice(0, 10).forEach(capture => {
-                const item = document.createElement('div');
-                item.className = 'capture-item';
-                item.innerHTML = `
-                    <div class="capture-item-name">${capture.clip_name || capture.name || 'Untitled'}</div>
-                    <div class="capture-item-meta">
-                        <span>${formatDuration(capture.duration || 0)}</span>
-                        <span>${new Date(capture.created_at || capture.captured_at).toLocaleDateString()}</span>
-                    </div>
-                `;
-                container.appendChild(item);
-            });
-        }
-
-        // ============================================================
-        // RECORDING CONTROL
-        // Named handleStartRecording / handleStopRecording to avoid
-        // shadowing the api.js startRecording / stopRecording functions.
-        // ============================================================
-
-        async function handleStartRecording() {
-            if (!captureState.currentProject || !captureState.currentDevice) {
-                alert('Please select project and device');
-                return;
-            }
-
-            if (!captureState.currentClipName) {
-                alert('Please enter a clip name');
-                return;
-            }
-
-            try {
-                updateStatusBar('Starting recording...');
-                const result = await startRecording(
-                    parseInt(captureState.currentDevice, 10),
-                    captureState.currentProject,
-                    captureState.currentBin || null,
-                    captureState.currentClipName
-                );
-
-                if (result.success) {
-                    captureState.isRecording = true;
-                    captureState.recordingTime = 0;
-                    captureState.sessionId = result.data.session_id || null;
-                    startTimecodeUpdate();
-                    updateRecordingUI();
-                    updateStatusBar();
-                } else {
-                    updateStatusBar('Failed to start recording', true);
-                }
-            } catch (error) {
-                console.error('Recording error:', error);
-                updateStatusBar('Error starting recording', true);
-            }
-        }
-
-        async function handleStopRecording() {
-            try {
-                updateStatusBar('Stopping recording...');
-                const result = await stopRecording(captureState.sessionId);
-
-                if (result.success) {
-                    captureState.isRecording = false;
-                    captureState.sessionId = null;
-                    clearInterval(captureState.recordingInterval);
-                    updateRecordingUI();
-                    loadCaptureData();
-                    updateStatusBar('Recording saved');
-                } else {
-                    updateStatusBar('Failed to stop recording', true);
-                }
-            } catch (error) {
-                console.error('Stop error:', error);
-                updateStatusBar('Error stopping recording', true);
-            }
-        }
-
-        function startTimecodeUpdate() {
-            if (captureState.recordingInterval) {
-                clearInterval(captureState.recordingInterval);
-            }
-
-            captureState.recordingInterval = setInterval(() => {
-                captureState.recordingTime++;
-                document.getElementById('timecodeDisplay').textContent = formatDuration(captureState.recordingTime);
-            }, 1000);
-        }
-
-        function updateRecordingUI() {
-            const indicator = document.getElementById('recordingIndicator');
-            const status = document.getElementById('statusDisplay');
-            const startBtn = document.getElementById('startBtn');
-            const stopBtn = document.getElementById('stopBtn');
-            const clipDisplay = document.getElementById('clipNameDisplay');
-            const clipText = document.getElementById('clipNameText');
-
-            if (captureState.isRecording) {
-                indicator.className = 'recording-indicator-large recording';
-                status.textContent = 'RECORDING';
-                status.style.color = 'var(--color-status-error)';
-                startBtn.disabled = true;
-                stopBtn.disabled = false;
-                clipDisplay.style.display = 'block';
-                clipText.textContent = captureState.currentClipName;
-            } else {
-                indicator.className = 'recording-indicator-large idle';
-                status.textContent = 'IDLE';
-                status.style.color = 'var(--color-status-ready)';
-                startBtn.disabled = false;
-                stopBtn.disabled = true;
-                clipDisplay.style.display = 'none';
-            }
-        }
-
-        // ============================================================
-        // NAVIGATION
-        // ============================================================
-
-        function navigateTo(page) {
-            if (page === 'assets') {
-                window.location.href = '/index.html';
-            } else if (page === 'projects') {
-                alert('Projects page coming soon');
-            }
-        }
-
-        // ============================================================
-        // STATUS BAR
-        // ============================================================
-
-        function updateStatusBar(message = '', isError = false) {
-            const indicator = document.getElementById('statusIndicator');
-            const text = document.getElementById('statusText');
-
-            if (message) {
-                text.textContent = message;
-                indicator.className = isError ? 'status-indicator disconnected' : 'status-indicator';
-            } else {
-                indicator.className = 'status-indicator';
-                text.textContent = 'Connected';
-            }
-        }
-    </script>
+  function esc(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+</script>
 </body>
 </html>
