From f7a96677ef3b7b1e33d13bcc17f22c6f91337324 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 16 May 2026 13:57:20 -0400
Subject: [PATCH] feat: redesign recorders.html with new design system

---
 services/web-ui/public/recorders.html | 1775 ++++++++++---------------
 1 file changed, 685 insertions(+), 1090 deletions(-)
diff --git a/services/web-ui/public/recorders.html b/services/web-ui/public/recorders.html
index f584dc1..c70f66f 100644
--- a/services/web-ui/public/recorders.html
+++ b/services/web-ui/public/recorders.html
@@ -1,1142 +1,737 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wild Dragon - Recorders</title>
-    <link rel="stylesheet" href="/css/common.css">
-    <style>
-        .recorders-container {
-            display: flex;
-            flex-direction: column;
-            height: calc(100vh - 110px);
-            overflow: hidden;
-        }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Recorders — 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>
+    /* Recorder grid */
+    .recorder-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+      gap: var(--sp-4);
+    }
 
-        .recorders-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: var(--spacing-lg);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-lg);
-        }
+    /* Recorder card */
+    .recorder-card {
+      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-3);
+      transition: border-color var(--t-fast);
+    }
 
-        .recorders-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: var(--spacing-lg);
-        }
+    .recorder-card.recording {
+      border-color: var(--accent-border);
+    }
 
-        .recorders-header h1 {
-            margin: 0;
-        }
+    .recorder-card.error {
+      border-color: oklch(62% 0.22 25 / 0.3);
+    }
 
-        .recorders-controls {
-            display: flex;
-            gap: var(--spacing-md);
-        }
+    /* Card header */
+    .recorder-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--sp-3);
+    }
 
-        .recorders-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-            gap: var(--spacing-lg);
-        }
+    .recorder-id {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-1);
+      min-width: 0;
+    }
 
-        .recorder-card {
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-            overflow: hidden;
-            transition: all var(--transition-normal);
-            display: flex;
-            flex-direction: column;
-        }
+    .recorder-name {
+      font-size: var(--text-base);
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-        .recorder-card:hover {
-            border-color: var(--color-accent-primary);
-            box-shadow: 0 8px 24px rgba(233, 69, 96, 0.15);
-            transform: translateY(-2px);
-        }
+    .recorder-badges {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-2);
+    }
 
-        .recorder-thumbnail {
-            position: relative;
-            width: 100%;
-            height: 200px;
-            background-color: var(--color-bg-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 3rem;
-            opacity: 0.3;
-            overflow: hidden;
-        }
+    .recorder-actions {
+      display: flex;
+      gap: var(--sp-1);
+      flex-shrink: 0;
+    }
 
-        .recorder-thumbnail.recording {
-            background: linear-gradient(45deg, rgba(239, 68, 68, 0.2), rgba(233, 69, 96, 0.2));
-        }
+    /* Status row */
+    .recorder-status-row {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-3);
+    }
 
-        .recorder-status-badge {
-            position: absolute;
-            top: var(--spacing-md);
-            left: var(--spacing-md);
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-            padding: 6px 12px;
-            background-color: rgba(0, 0, 0, 0.6);
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: white;
-        }
+    .recorder-timer {
+      font-size: var(--text-sm);
+      font-variant-numeric: tabular-nums;
+      color: var(--accent);
+      font-weight: 500;
+      letter-spacing: 0.02em;
+    }
 
-        .recorder-status-badge.recording {
-            background-color: rgba(239, 68, 68, 0.9);
-            animation: pulse 1s infinite;
-        }
+    .recorder-timer.hidden { display: none; }
 
-        .recorder-status-badge.stopped {
-            background-color: rgba(75, 85, 99, 0.9);
-        }
+    /* Source info */
+    .recorder-source {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-2);
+      font-size: var(--text-xs);
+      color: var(--text-secondary);
+    }
 
-        .recorder-status-badge.error {
-            background-color: rgba(239, 68, 68, 0.9);
-        }
+    /* Connection info banner */
+    .recorder-connect-info {
+      margin-top: var(--sp-1);
+    }
 
-        .recording-indicator {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: currentColor;
-            animation: pulse 1s infinite;
-        }
+    /* Card footer */
+    .recorder-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--sp-3);
+      padding-top: var(--sp-2);
+      border-top: 1px solid var(--border);
+    }
 
-        .recorder-content {
-            padding: var(--spacing-md);
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
+    .recorder-footer-meta {
+      font-size: var(--text-xs);
+      color: var(--text-tertiary);
+    }
 
-        .recorder-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: var(--spacing-md);
-            margin-bottom: var(--spacing-md);
-            padding-bottom: var(--spacing-md);
-            border-bottom: 1px solid var(--color-border);
-        }
+    .recorder-controls {
+      display: flex;
+      gap: var(--sp-2);
+    }
 
-        .recorder-title {
-            font-size: 1rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-            word-break: break-word;
-        }
+    /* Form sections */
+    .form-section-label {
+      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);
+    }
 
-        .recorder-type-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: var(--spacing-xs);
-            padding: 4px 10px;
-            background-color: var(--color-bg-secondary);
-            border: 1px solid var(--color-border);
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            color: var(--color-text-secondary);
-            white-space: nowrap;
-        }
+    /* Source type radio row */
+    .source-type-row {
+      display: flex;
+      gap: var(--sp-2);
+    }
 
-        .recorder-type-badge.sdi {
-            border-color: var(--color-info);
-            color: var(--color-info);
-        }
+    .source-type-btn {
+      flex: 1;
+      padding: var(--sp-2) var(--sp-3);
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-md);
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+      cursor: pointer;
+      text-align: center;
+      transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
+    }
 
-        .recorder-type-badge.srt {
-            border-color: var(--color-warning);
-            color: var(--color-warning);
-        }
+    .source-type-btn:hover {
+      border-color: var(--border-strong);
+      color: var(--text-primary);
+    }
 
-        .recorder-type-badge.rtmp {
-            border-color: var(--color-success);
-            color: var(--color-success);
-        }
+    .source-type-btn.active {
+      border-color: var(--accent-border);
+      background: var(--accent-subtle);
+      color: var(--accent);
+      font-weight: 500;
+    }
 
-        .recorder-meta {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-            margin-bottom: var(--spacing-md);
-            font-size: 0.9rem;
-            color: var(--color-text-secondary);
-        }
+    /* Mode selector */
+    .mode-row {
+      display: flex;
+      gap: var(--sp-2);
+    }
 
-        .recorder-meta-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
+    .mode-btn {
+      flex: 1;
+      padding: var(--sp-2) var(--sp-3);
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-md);
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: all var(--t-fast);
+    }
 
-        .recorder-meta-label {
-            color: var(--color-text-tertiary);
-            font-size: 0.85rem;
-        }
-
-        .recorder-meta-value {
-            color: var(--color-text-primary);
-            font-weight: 500;
-            font-family: 'Courier New', monospace;
-            font-size: 0.8rem;
-            word-break: break-all;
-            text-align: right;
-            max-width: 60%;
-        }
-
-        .recorder-duration {
-            font-size: 0.9rem;
-            color: var(--color-text-secondary);
-            font-family: 'Courier New', monospace;
-        }
-
-        .recorder-actions {
-            display: flex;
-            gap: var(--spacing-sm);
-            margin-top: auto;
-        }
-
-        .recorder-actions button {
-            flex: 1;
-        }
-
-        .empty-state {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 400px;
-            text-align: center;
-            color: var(--color-text-tertiary);
-        }
-
-        .empty-state-icon {
-            font-size: 3rem;
-            margin-bottom: var(--spacing-md);
-            opacity: 0.3;
-        }
-
-        .empty-state-text {
-            color: var(--color-text-tertiary);
-            margin-bottom: var(--spacing-md);
-        }
-
-        /* Modal Styles */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.6);
-            z-index: 1000;
-        }
-
-        .modal-overlay.active {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .modal {
-            background-color: var(--color-bg-secondary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-            max-width: 600px;
-            width: 90%;
-            max-height: 90vh;
-            overflow-y: auto;
-        }
-
-        .modal-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: var(--spacing-lg);
-            border-bottom: 1px solid var(--color-border);
-        }
-
-        .modal-title {
-            font-size: 1.25rem;
-            font-weight: 700;
-            color: var(--color-text-primary);
-        }
-
-        .modal-close {
-            background: none;
-            border: none;
-            color: var(--color-text-secondary);
-            font-size: 1.5rem;
-            cursor: pointer;
-            padding: 0;
-            width: 32px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .modal-close:hover {
-            color: var(--color-text-primary);
-        }
-
-        .modal-body {
-            padding: var(--spacing-lg);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-md);
-        }
-
-        .modal-footer {
-            display: flex;
-            justify-content: flex-end;
-            gap: var(--spacing-md);
-            padding: var(--spacing-lg);
-            border-top: 1px solid var(--color-border);
-            background-color: var(--color-bg-tertiary);
-        }
-
-        .form-group {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-        }
-
-        .form-label {
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--color-text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
-
-        .form-input,
-        .form-select {
-            padding: var(--spacing-sm) var(--spacing-md);
-            background-color: var(--color-bg-primary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-md);
-            color: var(--color-text-primary);
-            font-family: var(--font-family);
-            font-size: 0.95rem;
-        }
-
-        .form-input:focus,
-        .form-select:focus {
-            outline: none;
-            border-color: var(--color-accent-primary);
-            background-color: var(--color-bg-secondary);
-        }
-
-        .form-select {
-            cursor: pointer;
-            appearance: none;
-            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23b0b0b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
-            background-position: right var(--spacing-sm) center;
-            background-repeat: no-repeat;
-            background-size: 1.5em 1.5em;
-            padding-right: 2.5rem;
-        }
-
-        .form-toggle {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-md);
-            margin-bottom: var(--spacing-md);
-        }
-
-        .toggle-switch {
-            position: relative;
-            width: 50px;
-            height: 28px;
-            background-color: var(--color-bg-primary);
-            border: 1px solid var(--color-border);
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all var(--transition-fast);
-        }
-
-        .toggle-switch.on {
-            background-color: var(--color-accent-primary);
-            border-color: var(--color-accent-primary);
-        }
-
-        .toggle-switch::after {
-            content: '';
-            position: absolute;
-            width: 22px;
-            height: 22px;
-            background-color: white;
-            border-radius: 50%;
-            top: 2px;
-            left: 2px;
-            transition: left var(--transition-fast);
-        }
-
-        .toggle-switch.on::after {
-            left: 26px;
-        }
-
-        .conditional-fields {
-            display: none;
-            padding: var(--spacing-md);
-            background-color: var(--color-bg-tertiary);
-            border-radius: var(--radius-md);
-            border: 1px solid var(--color-border);
-            gap: var(--spacing-md);
-            flex-direction: column;
-        }
-
-        .conditional-fields.visible {
-            display: flex;
-        }
-
-        .connection-info {
-            background-color: var(--color-bg-primary);
-            border-radius: var(--radius-md);
-            border: 1px solid var(--color-border);
-            padding: var(--spacing-md);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xs);
-        }
-
-        .connection-info-label {
-            font-size: 0.8rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
-
-        .connection-info-label.srt {
-            color: var(--color-warning);
-        }
-
-        .connection-info-label.rtmp {
-            color: var(--color-success);
-        }
-
-        .connection-info-url {
-            font-family: 'Courier New', monospace;
-            font-size: 0.85rem;
-            color: var(--color-text-secondary);
-            word-break: break-all;
-        }
-
-        @media (max-width: 768px) {
-            .recorders-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
+    .mode-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
+    .mode-btn.active { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent); font-weight: 500; }
+  </style>
 </head>
 <body>
-    <div class="app-container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-logo">
-                <div class="header-logo-icon">D</div>
-                <span>WILD DRAGON</span>
-            </div>
-            <nav class="header-nav">
-                <div class="nav-item" data-page="assets">Assets</div>
-                <div class="nav-item" data-page="capture">Capture</div>
-                <div class="nav-item" data-page="upload">Upload</div>
-                <div class="nav-item active" data-page="recorders">Recorders</div>
-            </nav>
-        </header>
+<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">
+        <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 active">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg>
+        Recorders
+      </a>
+      <a href="capture.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg>
+        Capture
+      </a>
+      <a href="jobs.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg>
+        Jobs
+      </a>
+    </nav>
+  </nav>
 
-        <!-- Main Content -->
-        <div class="main-content">
-            <div class="content-area">
-                <div class="recorders-container">
-                    <div class="recorders-content">
-                        <!-- Header -->
-                        <div class="recorders-header">
-                            <h1>Recorder Management</h1>
-                            <div class="recorders-controls">
-                                <button class="btn btn-primary" onclick="openCreateModal()">+ New Recorder</button>
-                                <button class="btn btn-secondary" id="backBtn" onclick="navigateTo('assets')">← Back</button>
-                            </div>
-                        </div>
+  <div class="main">
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="page-title">Recorders</span>
+      </div>
+      <div class="topbar-right">
+        <button class="btn btn-primary btn-sm" id="newRecorderBtn">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v12M2 8h12"/></svg>
+          New recorder
+        </button>
+      </div>
+    </header>
 
-                        <!-- Recorders Grid -->
-                        <div class="recorders-grid" id="recordersGrid">
-                            <div class="empty-state">
-                                <div class="empty-state-icon">🎬</div>
-                                <div class="empty-state-text">No recorders configured</div>
-                                <p style="color: var(--color-text-tertiary); font-size: 0.9rem;">Click "New Recorder" to create your first recorder instance</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <div class="page-content">
+      <div id="recorderGrid" class="recorder-grid"></div>
+      <div id="recorderEmpty" 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="2" y="9" width="26" height="22" rx="2"/><path d="M28 16l10-5v18l-10-5"/><circle cx="15" cy="20" r="4"/></svg>
         </div>
+        <div class="empty-state-title">No recorders yet</div>
+        <div class="empty-state-body">Create a recorder to ingest live streams via SRT, RTMP, or SDI.</div>
+        <div class="empty-state-actions">
+          <button class="btn btn-primary btn-sm" onclick="openPanel()">New recorder</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
-        <!-- Status Bar -->
-        <footer class="status-bar">
-            <div class="status-item">
-                <span class="status-indicator" id="statusIndicator"></span>
-                <span id="statusText">Loading recorders...</span>
-            </div>
-            <div class="status-item" id="recorderCountItem" style="display: none;">
-                <span id="recorderCount">0</span> recorder(s)
-            </div>
-        </footer>
+<!-- Slide panel: new/edit recorder -->
+<div class="slide-overlay" id="panelOverlay"></div>
+<div class="slide-panel" id="recorderPanel">
+  <div class="slide-panel-header">
+    <span class="slide-panel-title">New recorder</span>
+    <button class="btn btn-ghost btn-sm" id="closePanelBtn" 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">
+    <!-- Name -->
+    <div class="form-group">
+      <label class="form-label" for="recName">Recorder name</label>
+      <input type="text" id="recName" placeholder="e.g. Studio A SRT">
     </div>
 
-    <!-- Create Recorder Modal -->
-    <div class="modal-overlay" id="createModal">
-        <div class="modal">
-            <div class="modal-header">
-                <div class="modal-title">New Recorder</div>
-                <button class="modal-close" onclick="closeCreateModal()">✕</button>
-            </div>
-            <div class="modal-body">
-                <div class="form-group">
-                    <label class="form-label">Recorder Name</label>
-                    <input type="text" id="recorderName" class="form-input" placeholder="e.g., Studio A SDI">
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">Source Type</label>
-                    <select id="sourceType" class="form-select" onchange="updateSourceFields()">
-                        <option value="">Select source type...</option>
-                        <option value="sdi">SDI (DeckLink)</option>
-                        <option value="srt">SRT (Streaming)</option>
-                        <option value="rtmp">RTMP (Stream)</option>
-                    </select>
-                </div>
-
-                <!-- Source Config Fields — rebuilt dynamically per source type -->
-                <div id="sourceConfigFields" class="conditional-fields"></div>
-
-                <div class="form-group">
-                    <label class="form-label">Recording Codec</label>
-                    <select id="recordingCodec" class="form-select">
-                        <option value="prores_hq">ProRes HQ</option>
-                        <option value="prores_422">ProRes 422</option>
-                        <option value="dnxhd_185">DNxHD 185</option>
-                        <option value="dnxhr_hq">DNxHR HQ</option>
-                        <option value="h264">H.264</option>
-                        <option value="h265">H.265</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">Resolution</label>
-                    <select id="resolution" class="form-select">
-                        <option value="native">Native</option>
-                        <option value="4k">3840x2160 (4K)</option>
-                        <option value="1080p">1920x1080 (Full HD)</option>
-                        <option value="720p">1280x720 (HD)</option>
-                    </select>
-                </div>
-
-                <div class="form-toggle">
-                    <div>
-                        <div class="form-label">Proxy Generation</div>
-                        <div style="font-size: 0.8rem; color: var(--color-text-tertiary);">Generate lower-res proxy for faster editing</div>
-                    </div>
-                    <div class="toggle-switch" id="proxyToggle" onclick="toggleProxy()"></div>
-                </div>
-
-                <div id="proxyFields" class="conditional-fields">
-                    <div class="form-group">
-                        <label class="form-label">Proxy Codec</label>
-                        <select id="proxyCodec" class="form-select">
-                            <option value="h264">H.264</option>
-                            <option value="h265">H.265</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Proxy Resolution</label>
-                        <select id="proxyResolution" class="form-select">
-                            <option value="1080p">1920x1080 (Full HD)</option>
-                            <option value="720p">1280x720 (HD)</option>
-                        </select>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">Project</label>
-                    <select id="projectSelect" class="form-select"></select>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-secondary" onclick="closeCreateModal()">Cancel</button>
-                <button class="btn btn-primary" onclick="handleCreateRecorder()">Create</button>
-            </div>
-        </div>
+    <!-- Source type -->
+    <div class="form-group">
+      <label class="form-label">Source type</label>
+      <div class="source-type-row">
+        <button class="source-type-btn active" data-type="srt" onclick="setSourceType('srt')">SRT</button>
+        <button class="source-type-btn" data-type="rtmp" onclick="setSourceType('rtmp')">RTMP</button>
+        <button class="source-type-btn" data-type="sdi" onclick="setSourceType('sdi')">SDI</button>
+      </div>
     </div>
 
-    <script src="/js/api.js"></script>
-    <script>
-        // ============================================================
-        // STATE MANAGEMENT
-        // ============================================================
+    <!-- Dynamic source config -->
+    <div id="sourceConfigFields" class="conditional-fields"></div>
 
-        let recorderState = {
-            recorders: [],
-            projects: [],
-            selectedProject: null,
-            proxyEnabled: false,
-            statusPollInterval: null,
+    <!-- Recording settings -->
+    <div class="form-group">
+      <div class="form-section-label">Recording settings</div>
+    </div>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label" for="recCodec">Codec</label>
+        <select id="recCodec">
+          <option value="prores_hq">ProRes HQ</option>
+          <option value="prores_422">ProRes 422</option>
+          <option value="prores_lt">ProRes LT</option>
+          <option value="h264">H.264</option>
+          <option value="dnxhd">DNxHD</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="recResolution">Resolution</label>
+        <select id="recResolution">
+          <option value="native">Native (source)</option>
+          <option value="1920x1080">1920x1080</option>
+          <option value="1280x720">1280x720</option>
+          <option value="3840x2160">3840x2160</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="toggle">
+        <input type="checkbox" id="proxyToggle">
+        <div class="toggle-track"></div>
+        <span class="toggle-label">Generate proxy on stop</span>
+      </label>
+    </div>
+
+    <!-- Proxy settings (shown when proxy enabled) -->
+    <div id="proxyFields" style="display:none;" class="form-row">
+      <div class="form-group">
+        <label class="form-label" for="proxyCodec">Proxy codec</label>
+        <select id="proxyCodec">
+          <option value="h264">H.264</option>
+          <option value="h265">H.265</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="proxyBitrate">Proxy bitrate</label>
+        <select id="proxyBitrate">
+          <option value="2000k">2 Mbps</option>
+          <option value="4000k">4 Mbps</option>
+          <option value="8000k">8 Mbps</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Project / bin -->
+    <div class="form-group">
+      <div class="form-section-label">Destination</div>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label" for="recProject">Project</label>
+        <select id="recProject">
+          <option value="">None (manual assignment)</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="recBin">Bin</label>
+        <select id="recBin">
+          <option value="">Project root</option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div class="slide-panel-footer">
+    <button class="btn btn-ghost" onclick="closePanel()">Cancel</button>
+    <button class="btn btn-primary" id="saveRecorderBtn">Create recorder</button>
+  </div>
+</div>
+
+<div class="toast-container" id="toastContainer" aria-live="polite"></div>
+
+<script src="js/api.js"></script>
+<script>
+  const pState = { recorders: [], timers: {}, sourceType: 'srt', mode: 'listener', projects: [] };
+
+  document.addEventListener('DOMContentLoaded', async () => {
+    await Promise.all([loadRecorders(), loadProjects()]);
+    setInterval(loadRecorders, 5000);
+
+    document.getElementById('newRecorderBtn').onclick = openPanel;
+    document.getElementById('closePanelBtn').onclick = closePanel;
+    document.getElementById('panelOverlay').onclick = closePanel;
+    document.getElementById('saveRecorderBtn').onclick = handleSaveRecorder;
+    document.getElementById('proxyToggle').onchange = e => {
+      document.getElementById('proxyFields').style.display = e.target.checked ? 'grid' : 'none';
+    };
+    document.getElementById('recProject').onchange = handleProjectChange;
+    updateSourceFields();
+  });
+
+  // Load / render
+  async function loadRecorders() {
+    const r = await getRecorders();
+    if (!r.success) return;
+    pState.recorders = r.data;
+    renderRecorders();
+  }
+
+  function renderRecorders() {
+    const grid = document.getElementById('recorderGrid');
+    const empty = document.getElementById('recorderEmpty');
+
+    if (!pState.recorders.length) {
+      grid.innerHTML = ''; empty.style.display = 'flex'; return;
+    }
+    empty.style.display = 'none';
+
+    grid.innerHTML = pState.recorders.map(rec => {
+      const isRecording = rec.status === 'recording';
+      const cfg = rec.source_config || {};
+      const sourceTypeKey = (rec.source_type || 'sdi').toLowerCase();
+      const badgeClass = { sdi:'badge-sdi', srt:'badge-srt', rtmp:'badge-rtmp' }[sourceTypeKey] || 'badge-idle';
+      const statusClass = isRecording ? 'recording' : rec.status === 'error' ? 'error' : '';
+      const statusDotClass = isRecording ? 'status-dot--recording' : rec.status === 'error' ? 'status-dot--error' : 'status-dot--idle';
+
+      let sourceDisplay = '';
+      if (cfg.mode === 'listener') {
+        const port = cfg.listen_port || (sourceTypeKey === 'srt' ? 9000 : 1935);
+        sourceDisplay = `Listen :${port}`;
+      } else if (cfg.url) {
+        sourceDisplay = cfg.url;
+      } else if (cfg.device !== undefined) {
+        sourceDisplay = `DeckLink ${cfg.device}`;
+      }
+
+      let connectBanner = '';
+      if (!isRecording && cfg.mode === 'listener') {
+        const serverIp = location.hostname || '10.0.0.25';
+        if (sourceTypeKey === 'srt') {
+          const port = cfg.listen_port || 9000;
+          connectBanner = `<div class="info-banner recorder-connect-info">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="6"/><path d="M7 4v4M7 9.5v.5"/></svg>
+            <span>Push to <code>srt://${serverIp}:${port}?mode=caller</code></span>
+          </div>`;
+        } else if (sourceTypeKey === 'rtmp') {
+          const port = cfg.listen_port || 1935;
+          const key = cfg.stream_key || 'stream';
+          connectBanner = `<div class="info-banner recorder-connect-info">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="6"/><path d="M7 4v4M7 9.5v.5"/></svg>
+            <span>Push to <code>rtmp://${serverIp}:${port}/live/${key}</code></span>
+          </div>`;
+        }
+      }
+
+      const lastRec = rec.last_recording_at ? new Date(rec.last_recording_at).toLocaleString() : 'Never';
+
+      return `<div class="recorder-card ${statusClass}" data-id="${rec.id}">
+        <div class="recorder-header">
+          <div class="recorder-id">
+            <div class="recorder-name">${esc(rec.name)}</div>
+            <div class="recorder-badges">
+              <span class="badge ${badgeClass}">${sourceTypeKey.toUpperCase()}</span>
+              ${rec.codec ? `<span class="badge badge-idle">${esc(rec.codec)}</span>` : ''}
+            </div>
+          </div>
+          <div class="recorder-actions">
+            <button class="btn btn-ghost btn-sm" onclick="handleDeleteRecorder('${rec.id}')" title="Delete recorder" style="padding:0;width:28px;height:28px;">
+              <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="recorder-status-row">
+          <span class="status-dot ${statusDotClass}"></span>
+          <span class="text-sm" style="color:${isRecording ? 'var(--accent)' : rec.status === 'error' ? 'var(--status-red)' : 'var(--text-secondary)'}">
+            ${isRecording ? 'Recording' : rec.status === 'error' ? 'Error' : 'Idle'}
+          </span>
+          ${isRecording ? `<span class="recorder-timer" id="timer-${rec.id}">00:00:00</span>` : ''}
+        </div>
+
+        <div class="recorder-source">
+          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M2 4h10M2 8h7M2 12h5"/></svg>
+          <span>${esc(sourceDisplay)}</span>
+        </div>
+
+        ${connectBanner}
+
+        <div class="recorder-footer">
+          <span class="recorder-footer-meta">Last: ${lastRec}</span>
+          <div class="recorder-controls">
+            ${isRecording
+              ? `<button class="btn btn-danger btn-sm" onclick="handleStop('${rec.id}')">Stop</button>`
+              : `<button class="btn btn-record btn-sm" onclick="handleStart('${rec.id}')">
+                  <svg viewBox="0 0 14 14" fill="currentColor" width="10" height="10"><circle cx="7" cy="7" r="5"/></svg>
+                  Record
+                 </button>`
+            }
+          </div>
+        </div>
+      </div>`;
+    }).join('');
+
+    pState.recorders.filter(r => r.status === 'recording').forEach(rec => {
+      if (!pState.timers[rec.id]) {
+        const startedAt = rec.started_at ? new Date(rec.started_at) : new Date();
+        pState.timers[rec.id] = setInterval(() => {
+          const el = document.getElementById(`timer-${rec.id}`);
+          if (!el) { clearInterval(pState.timers[rec.id]); delete pState.timers[rec.id]; return; }
+          const elapsed = Math.floor((Date.now() - startedAt) / 1000);
+          el.textContent = formatDur(elapsed);
+        }, 500);
+      }
+    });
+    Object.keys(pState.timers).forEach(id => {
+      if (!pState.recorders.find(r => r.id === id && r.status === 'recording')) {
+        clearInterval(pState.timers[id]); delete pState.timers[id];
+      }
+    });
+  }
+
+  function formatDur(s) {
+    const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+    return [h, m, sec].map(v => String(v).padStart(2,'0')).join(':');
+  }
+
+  // Controls
+  async function handleStart(id) {
+    const r = await startRecorder(id);
+    if (r.success) { toast('Recording started', '', 'success'); loadRecorders(); }
+    else toast('Failed to start', r.error, 'error');
+  }
+
+  async function handleStop(id) {
+    const r = await stopRecorder(id);
+    if (r.success) { toast('Recording stopped', '', 'success'); loadRecorders(); }
+    else toast('Failed to stop', r.error, 'error');
+  }
+
+  async function handleDeleteRecorder(id) {
+    if (!confirm('Delete this recorder?')) return;
+    const r = await deleteRecorder(id);
+    if (r.success) { toast('Recorder deleted', '', 'success'); loadRecorders(); }
+    else toast('Delete failed', r.error, 'error');
+  }
+
+  // Panel
+  function openPanel() {
+    document.getElementById('recorderPanel').classList.add('open');
+    document.getElementById('panelOverlay').classList.add('open');
+    updateSourceFields();
+  }
+
+  function closePanel() {
+    document.getElementById('recorderPanel').classList.remove('open');
+    document.getElementById('panelOverlay').classList.remove('open');
+  }
+
+  // Source type
+  function setSourceType(type) {
+    pState.sourceType = type;
+    pState.mode = 'listener';
+    document.querySelectorAll('.source-type-btn').forEach(b => b.classList.toggle('active', b.dataset.type === type));
+    updateSourceFields();
+  }
+
+  function updateSourceFields() {
+    const container = document.getElementById('sourceConfigFields');
+    const type = pState.sourceType;
+    container.innerHTML = '';
+
+    if (type === 'sdi') {
+      container.innerHTML = `
+        <div class="form-group">
+          <label class="form-label" for="sdiDevice">DeckLink device</label>
+          <select id="sdiDevice">
+            <option value="0">DeckLink Card 1</option>
+            <option value="1">DeckLink Card 2</option>
+          </select>
+        </div>`;
+
+    } else if (type === 'srt') {
+      container.innerHTML = `
+        <div class="form-group">
+          <label class="form-label">Mode</label>
+          <div class="mode-row">
+            <button class="mode-btn active" data-mode="listener" onclick="setMode('listener')">Listener - encoder pushes here</button>
+            <button class="mode-btn" data-mode="caller" onclick="setMode('caller')">Caller - pull from source</button>
+          </div>
+        </div>
+        <div id="srtListenerFields">
+          <div class="form-group">
+            <label class="form-label" for="srtPort">Listen port (UDP)</label>
+            <input type="number" id="srtPort" value="9000" min="1024" max="65535">
+            <div class="form-hint">Encoders connect to this port on the server</div>
+          </div>
+          <div id="srtConnectInfo" class="info-banner">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="6"/><path d="M7 4v4M7 9.5v.5"/></svg>
+            <span>Encoder connect string: <code id="srtConnectStr">srt://10.0.0.25:9000?mode=caller</code></span>
+          </div>
+        </div>
+        <div id="srtCallerFields" style="display:none;">
+          <div class="form-group">
+            <label class="form-label" for="srtUrl">Source URL</label>
+            <input type="url" id="srtUrl" placeholder="srt://192.168.1.100:4200?mode=caller">
+          </div>
+        </div>`;
+
+      setTimeout(() => {
+        const portIn = document.getElementById('srtPort');
+        if (portIn) portIn.addEventListener('input', () => {
+          const el = document.getElementById('srtConnectStr');
+          if (el) el.textContent = `srt://${location.hostname || '10.0.0.25'}:${portIn.value}?mode=caller`;
+        });
+      }, 0);
+
+    } else if (type === 'rtmp') {
+      container.innerHTML = `
+        <div class="form-group">
+          <label class="form-label">Mode</label>
+          <div class="mode-row">
+            <button class="mode-btn active" data-mode="listener" onclick="setMode('listener')">Listener - encoder pushes here</button>
+            <button class="mode-btn" data-mode="caller" onclick="setMode('caller')">Caller - pull from source</button>
+          </div>
+        </div>
+        <div id="rtmpListenerFields">
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label" for="rtmpPort">Listen port (TCP)</label>
+              <input type="number" id="rtmpPort" value="1935" min="1024" max="65535">
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="rtmpKey">Stream key</label>
+              <input type="text" id="rtmpKey" value="stream" placeholder="stream">
+            </div>
+          </div>
+          <div id="rtmpConnectInfo" class="info-banner">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="6"/><path d="M7 4v4M7 9.5v.5"/></svg>
+            <span>Push to: <code id="rtmpConnectStr">rtmp://10.0.0.25:1935/live/stream</code></span>
+          </div>
+        </div>
+        <div id="rtmpCallerFields" style="display:none;">
+          <div class="form-group">
+            <label class="form-label" for="rtmpUrl">Source URL</label>
+            <input type="url" id="rtmpUrl" placeholder="rtmp://192.168.1.100/live/key">
+          </div>
+        </div>`;
+
+      setTimeout(() => {
+        const portIn = document.getElementById('rtmpPort');
+        const keyIn = document.getElementById('rtmpKey');
+        const update = () => {
+          const el = document.getElementById('rtmpConnectStr');
+          if (el) el.textContent = `rtmp://${location.hostname || '10.0.0.25'}:${portIn?.value || 1935}/live/${keyIn?.value || 'stream'}`;
         };
+        portIn?.addEventListener('input', update);
+        keyIn?.addEventListener('input', update);
+      }, 0);
+    }
+  }
 
-        // ============================================================
-        // INITIALIZATION
-        // ============================================================
+  function setMode(mode) {
+    pState.mode = mode;
+    document.querySelectorAll('.mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
+    const type = pState.sourceType;
+    if (type === 'srt') {
+      document.getElementById('srtListenerFields').style.display = mode === 'listener' ? '' : 'none';
+      document.getElementById('srtCallerFields').style.display = mode === 'caller' ? '' : 'none';
+    } else if (type === 'rtmp') {
+      document.getElementById('rtmpListenerFields').style.display = mode === 'listener' ? '' : 'none';
+      document.getElementById('rtmpCallerFields').style.display = mode === 'caller' ? '' : 'none';
+    }
+  }
 
-        document.addEventListener('DOMContentLoaded', async () => {
-            setupEventListeners();
-            await loadRecorders();
-            await loadProjects();
-            startStatusPolling();
-            updateStatusBar();
-        });
+  // Projects for recorder destination
+  async function loadProjects() {
+    const r = await getProjects();
+    if (!r.success) return;
+    pState.projects = r.data;
+    const sel = document.getElementById('recProject');
+    sel.innerHTML = '<option value="">None (manual assignment)</option>' +
+      r.data.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join('');
+  }
 
-        function setupEventListeners() {
-            document.querySelectorAll('[data-page]').forEach(el => {
-                el.addEventListener('click', (e) => navigateTo(e.target.dataset.page));
-            });
+  async function handleProjectChange() {
+    const projectId = document.getElementById('recProject').value;
+    const binSel = document.getElementById('recBin');
+    binSel.innerHTML = '<option value="">Project root</option>';
+    if (!projectId) return;
+    const r = await getBins(projectId);
+    if (r.success) r.data.forEach(b => binSel.innerHTML += `<option value="${b.id}">${esc(b.name)}</option>`);
+  }
 
-            document.getElementById('createModal').addEventListener('click', (e) => {
-                if (e.target.id === 'createModal') closeCreateModal();
-            });
-        }
+  // Save recorder
+  async function handleSaveRecorder() {
+    const name = document.getElementById('recName').value.trim();
+    if (!name) { toast('Enter a recorder name', '', 'warning'); return; }
 
-        // ============================================================
-        // LOAD DATA
-        // ============================================================
+    const type = pState.sourceType;
+    const mode = pState.mode;
+    const codec = document.getElementById('recCodec').value;
+    const resolution = document.getElementById('recResolution').value;
+    const projectId = document.getElementById('recProject').value || null;
+    const binId = document.getElementById('recBin').value || null;
 
-        async function loadRecorders() {
-            try {
-                const result = await getRecorders();
-                if (result.success) {
-                    recorderState.recorders = result.data || [];
-                    renderRecorders();
-                }
-            } catch (error) {
-                console.error('Failed to load recorders:', error);
-            }
-        }
+    let sourceConfig = {};
+    if (type === 'sdi') {
+      sourceConfig.device = parseInt(document.getElementById('sdiDevice')?.value || '0');
+    } else if (type === 'srt') {
+      sourceConfig.mode = mode;
+      if (mode === 'listener') sourceConfig.listen_port = parseInt(document.getElementById('srtPort')?.value || '9000');
+      else sourceConfig.url = document.getElementById('srtUrl')?.value;
+    } else if (type === 'rtmp') {
+      sourceConfig.mode = mode;
+      if (mode === 'listener') {
+        sourceConfig.listen_port = parseInt(document.getElementById('rtmpPort')?.value || '1935');
+        sourceConfig.stream_key = document.getElementById('rtmpKey')?.value || 'stream';
+      } else {
+        sourceConfig.url = document.getElementById('rtmpUrl')?.value;
+      }
+    }
 
-        async function loadProjects() {
-            try {
-                const result = await getProjects();
-                if (result.success) {
-                    recorderState.projects = result.data || [];
-                    renderProjectSelect();
-                }
-            } catch (error) {
-                console.error('Failed to load projects:', error);
-            }
-        }
+    const proxy = document.getElementById('proxyToggle').checked;
+    const proxyConfig = proxy ? {
+      codec: document.getElementById('proxyCodec').value,
+      bitrate: document.getElementById('proxyBitrate').value,
+    } : null;
 
-        function renderProjectSelect() {
-            const select = document.getElementById('projectSelect');
-            select.innerHTML = '';
+    const payload = {
+      name, source_type: type, source_config: sourceConfig,
+      codec, resolution, project_id: projectId, bin_id: binId,
+      proxy_config: proxyConfig,
+    };
 
-            recorderState.projects.forEach(project => {
-                const option = document.createElement('option');
-                option.value = project.id;
-                option.textContent = project.name;
-                select.appendChild(option);
-            });
+    const r = await createRecorder(payload);
+    if (r.success) {
+      toast('Recorder created', name, 'success');
+      closePanel();
+      document.getElementById('recName').value = '';
+      await loadRecorders();
+    } else toast('Failed to create recorder', r.error, 'error');
+  }
 
-            if (recorderState.projects.length > 0) {
-                recorderState.selectedProject = recorderState.projects[0].id;
-                select.value = recorderState.selectedProject;
-            }
-        }
+  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);
+  }
 
-        // ============================================================
-        // RENDERING
-        // ============================================================
-
-        function renderRecorders() {
-            const grid = document.getElementById('recordersGrid');
-
-            if (recorderState.recorders.length === 0) {
-                grid.innerHTML = `
-                    <div class="empty-state">
-                        <div class="empty-state-icon">🎬</div>
-                        <div class="empty-state-text">No recorders configured</div>
-                        <p style="color: var(--color-text-tertiary); font-size: 0.9rem;">Click "New Recorder" to create your first recorder instance</p>
-                    </div>
-                `;
-                return;
-            }
-
-            grid.innerHTML = '';
-            recorderState.recorders.forEach(recorder => {
-                const card = createRecorderCard(recorder);
-                grid.appendChild(card);
-            });
-
-            updateStatusBar();
-        }
-
-        function getSourceDisplay(recorder) {
-            const cfg = recorder.source_config || {};
-            if (cfg.mode === 'listener') {
-                const port = cfg.listen_port || (recorder.source_type === 'srt' ? 9000 : 1935);
-                return `Listen :${port}`;
-            }
-            return cfg.url || cfg.device || '—';
-        }
-
-        function createRecorderCard(recorder) {
-            const isRecording = recorder.status === 'recording';
-            const card = document.createElement('div');
-            card.className = 'recorder-card';
-
-            const sourceTypeLower = (recorder.source_type || '').toLowerCase();
-            const sourceTypeClass = ['sdi', 'srt', 'rtmp'].includes(sourceTypeLower) ? sourceTypeLower : 'sdi';
-            const sourceDisplay = getSourceDisplay(recorder);
-
-            card.innerHTML = `
-                <div class="recorder-thumbnail ${isRecording ? 'recording' : ''}">
-                    🎥
-                    <div class="recorder-status-badge ${recorder.status || 'stopped'}">
-                        ${isRecording ? '<span class="recording-indicator"></span>' : ''}
-                        ${recorder.status === 'recording' ? 'Recording' :
-                          recorder.status === 'stopped' ? 'Stopped' : 'Error'}
-                    </div>
-                </div>
-                <div class="recorder-content">
-                    <div class="recorder-header">
-                        <div class="recorder-title">${recorder.name || 'Untitled Recorder'}</div>
-                        <div class="recorder-type-badge ${sourceTypeClass}">${recorder.source_type || 'Unknown'}</div>
-                    </div>
-                    <div class="recorder-meta">
-                        <div class="recorder-meta-item">
-                            <span class="recorder-meta-label">Source</span>
-                            <span class="recorder-meta-value">${sourceDisplay}</span>
-                        </div>
-                        <div class="recorder-meta-item">
-                            <span class="recorder-meta-label">Codec</span>
-                            <span class="recorder-meta-value">${recorder.recording_codec || '—'}</span>
-                        </div>
-                        <div class="recorder-meta-item">
-                            <span class="recorder-meta-label">Resolution</span>
-                            <span class="recorder-meta-value">${recorder.recording_resolution || 'Native'}</span>
-                        </div>
-                        ${isRecording ? `
-                            <div class="recorder-meta-item">
-                                <span class="recorder-meta-label">Duration</span>
-                                <span class="recorder-duration" id="duration-${recorder.id}">00:00:00</span>
-                            </div>
-                        ` : ''}
-                    </div>
-                    <div class="recorder-actions">
-                        ${isRecording ? `
-                            <button class="btn btn-sm btn-secondary" onclick="handleStopRecorder('${recorder.id}')">⏹ Stop</button>
-                        ` : `
-                            <button class="btn btn-sm btn-primary" onclick="handleStartRecorder('${recorder.id}')">⏺ Start</button>
-                        `}
-                        <button class="btn btn-sm btn-secondary" onclick="handleDeleteRecorder('${recorder.id}')">🗑 Delete</button>
-                    </div>
-                </div>
-            `;
-
-            return card;
-        }
-
-        // ============================================================
-        // MODAL OPERATIONS
-        // ============================================================
-
-        function openCreateModal() {
-            document.getElementById('createModal').classList.add('active');
-            document.getElementById('recorderName').value = '';
-            document.getElementById('sourceType').value = '';
-            document.getElementById('recordingCodec').value = 'prores_hq';
-            document.getElementById('resolution').value = 'native';
-            document.getElementById('proxyToggle').classList.remove('on');
-            document.getElementById('proxyFields').classList.remove('visible');
-            recorderState.proxyEnabled = false;
-            updateSourceFields();
-        }
-
-        function closeCreateModal() {
-            document.getElementById('createModal').classList.remove('active');
-        }
-
-        // ============================================================
-        // SOURCE FIELD BUILDERS
-        // Rebuilt each time the source type selector changes.
-        // ============================================================
-
-        function updateSourceFields() {
-            const sourceType = document.getElementById('sourceType').value;
-            const fieldsContainer = document.getElementById('sourceConfigFields');
-            fieldsContainer.innerHTML = '';
-
-            if (sourceType === 'sdi') {
-                fieldsContainer.innerHTML = `
-                    <div class="form-group">
-                        <label class="form-label">Device</label>
-                        <select id="sdiDevice" class="form-select">
-                            <option value="">Select DeckLink device...</option>
-                            <option value="decklink_0">DeckLink Card 1</option>
-                            <option value="decklink_1">DeckLink Card 2</option>
-                        </select>
-                    </div>
-                `;
-                fieldsContainer.classList.add('visible');
-
-            } else if (sourceType === 'srt') {
-                fieldsContainer.innerHTML = `
-                    <div class="form-group">
-                        <label class="form-label">Mode</label>
-                        <select id="srtMode" class="form-select" onchange="updateSrtModeFields()">
-                            <option value="listener">Listener — encoder pushes to this recorder</option>
-                            <option value="caller">Caller — recorder pulls from source</option>
-                        </select>
-                    </div>
-
-                    <!-- Listener fields (default) -->
-                    <div id="srtListenerFields" style="display:flex;flex-direction:column;gap:var(--spacing-md);">
-                        <div class="form-group">
-                            <label class="form-label">Listen Port</label>
-                            <input type="number" id="srtListenPort" class="form-input"
-                                   value="9000" min="1024" max="65535"
-                                   oninput="refreshSrtInfo()">
-                        </div>
-                        <div class="connection-info">
-                            <div class="connection-info-label srt">📡 Push SRT to this address</div>
-                            <div class="connection-info-url" id="srtConnectionInfo">
-                                srt://&lt;server-ip&gt;:9000?mode=caller
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Caller fields (hidden initially) -->
-                    <div id="srtCallerFields" style="display:none;flex-direction:column;gap:var(--spacing-md);">
-                        <div class="form-group">
-                            <label class="form-label">SRT Source URL</label>
-                            <input type="text" id="srtUrl" class="form-input"
-                                   placeholder="srt://host:port">
-                        </div>
-                    </div>
-                `;
-                fieldsContainer.classList.add('visible');
-
-            } else if (sourceType === 'rtmp') {
-                fieldsContainer.innerHTML = `
-                    <div class="form-group">
-                        <label class="form-label">Mode</label>
-                        <select id="rtmpMode" class="form-select" onchange="updateRtmpModeFields()">
-                            <option value="listener">Listener — encoder pushes to this recorder</option>
-                            <option value="caller">Caller — recorder pulls from source</option>
-                        </select>
-                    </div>
-
-                    <!-- Listener fields (default) -->
-                    <div id="rtmpListenerFields" style="display:flex;flex-direction:column;gap:var(--spacing-md);">
-                        <div class="form-group">
-                            <label class="form-label">Listen Port</label>
-                            <input type="number" id="rtmpListenPort" class="form-input"
-                                   value="1935" min="1024" max="65535"
-                                   oninput="refreshRtmpInfo()">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Stream Key</label>
-                            <input type="text" id="rtmpStreamKey" class="form-input"
-                                   value="stream" placeholder="e.g., live"
-                                   oninput="refreshRtmpInfo()">
-                        </div>
-                        <div class="connection-info">
-                            <div class="connection-info-label rtmp">📡 Push RTMP to this address</div>
-                            <div class="connection-info-url" id="rtmpConnectionInfo">
-                                rtmp://&lt;server-ip&gt;:1935/live/stream
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Caller fields (hidden initially) -->
-                    <div id="rtmpCallerFields" style="display:none;flex-direction:column;gap:var(--spacing-md);">
-                        <div class="form-group">
-                            <label class="form-label">RTMP Source URL</label>
-                            <input type="text" id="rtmpUrl" class="form-input"
-                                   placeholder="rtmp://host:port/app/stream">
-                        </div>
-                    </div>
-                `;
-                fieldsContainer.classList.add('visible');
-
-            } else {
-                fieldsContainer.classList.remove('visible');
-            }
-        }
-
-        // Update SRT fields when mode selector changes
-        function updateSrtModeFields() {
-            const mode = document.getElementById('srtMode').value;
-            document.getElementById('srtListenerFields').style.display =
-                mode === 'listener' ? 'flex' : 'none';
-            document.getElementById('srtCallerFields').style.display =
-                mode === 'caller' ? 'flex' : 'none';
-        }
-
-        // Refresh SRT connection info as port field changes
-        function refreshSrtInfo() {
-            const port = document.getElementById('srtListenPort').value || '9000';
-            const el = document.getElementById('srtConnectionInfo');
-            if (el) el.textContent = `srt://<server-ip>:${port}?mode=caller`;
-        }
-
-        // Update RTMP fields when mode selector changes
-        function updateRtmpModeFields() {
-            const mode = document.getElementById('rtmpMode').value;
-            document.getElementById('rtmpListenerFields').style.display =
-                mode === 'listener' ? 'flex' : 'none';
-            document.getElementById('rtmpCallerFields').style.display =
-                mode === 'caller' ? 'flex' : 'none';
-        }
-
-        // Refresh RTMP connection info as port/key fields change
-        function refreshRtmpInfo() {
-            const port = document.getElementById('rtmpListenPort').value || '1935';
-            const key  = document.getElementById('rtmpStreamKey').value || 'stream';
-            const el   = document.getElementById('rtmpConnectionInfo');
-            if (el) el.textContent = `rtmp://<server-ip>:${port}/live/${key}`;
-        }
-
-        function toggleProxy() {
-            const toggle = document.getElementById('proxyToggle');
-            const fields = document.getElementById('proxyFields');
-            recorderState.proxyEnabled = !recorderState.proxyEnabled;
-
-            toggle.classList.toggle('on');
-            if (recorderState.proxyEnabled) {
-                fields.classList.add('visible');
-            } else {
-                fields.classList.remove('visible');
-            }
-        }
-
-        // ============================================================
-        // RECORDER OPERATIONS
-        // Named handleCreateRecorder / handleStartRecorder / handleStopRecorder /
-        // handleDeleteRecorder to avoid shadowing the api.js globals of the
-        // same name (which would cause infinite recursion).
-        // ============================================================
-
-        async function handleCreateRecorder() {
-            const name = document.getElementById('recorderName').value.trim();
-            const sourceType = document.getElementById('sourceType').value;
-
-            if (!name || !sourceType) {
-                alert('Please fill in all required fields');
-                return;
-            }
-
-            let sourceConfig = {};
-
-            if (sourceType === 'sdi') {
-                sourceConfig.device = document.getElementById('sdiDevice').value;
-
-            } else if (sourceType === 'srt') {
-                const mode = document.getElementById('srtMode').value;
-                sourceConfig.mode = mode;
-                if (mode === 'listener') {
-                    sourceConfig.listen_port =
-                        parseInt(document.getElementById('srtListenPort').value, 10) || 9000;
-                } else {
-                    const url = document.getElementById('srtUrl').value.trim();
-                    if (!url) {
-                        alert('SRT caller mode requires a source URL');
-                        return;
-                    }
-                    sourceConfig.url = url;
-                }
-
-            } else if (sourceType === 'rtmp') {
-                const mode = document.getElementById('rtmpMode').value;
-                sourceConfig.mode = mode;
-                if (mode === 'listener') {
-                    sourceConfig.listen_port =
-                        parseInt(document.getElementById('rtmpListenPort').value, 10) || 1935;
-                    sourceConfig.stream_key =
-                        document.getElementById('rtmpStreamKey').value.trim() || 'stream';
-                } else {
-                    const url = document.getElementById('rtmpUrl').value.trim();
-                    if (!url) {
-                        alert('RTMP caller mode requires a source URL');
-                        return;
-                    }
-                    sourceConfig.url = url;
-                }
-            }
-
-            const data = {
-                name,
-                source_type: sourceType,
-                source_config: sourceConfig,
-                recording_codec: document.getElementById('recordingCodec').value,
-                recording_resolution: document.getElementById('resolution').value,
-                project_id: document.getElementById('projectSelect').value,
-            };
-
-            if (recorderState.proxyEnabled) {
-                data.proxy_enabled = true;
-                data.proxy_codec = document.getElementById('proxyCodec').value;
-                data.proxy_resolution = document.getElementById('proxyResolution').value;
-            }
-
-            try {
-                const result = await createRecorder(data);
-                if (result.success) {
-                    closeCreateModal();
-                    await loadRecorders();
-                    updateStatusBar('Recorder created');
-                } else {
-                    alert('Failed to create recorder');
-                }
-            } catch (error) {
-                console.error('Failed to create recorder:', error);
-                alert('Error creating recorder');
-            }
-        }
-
-        async function handleStartRecorder(id) {
-            try {
-                const result = await startRecorder(id);
-                if (result.success) {
-                    const recorder = recorderState.recorders.find(r => r.id === id);
-                    if (recorder) {
-                        recorder.status = 'recording';
-                        recorder.start_time = Date.now();
-                        renderRecorders();
-                        updateStatusBar('Recorder started');
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to start recorder:', error);
-            }
-        }
-
-        async function handleStopRecorder(id) {
-            try {
-                const result = await stopRecorder(id);
-                if (result.success) {
-                    const recorder = recorderState.recorders.find(r => r.id === id);
-                    if (recorder) {
-                        recorder.status = 'stopped';
-                        renderRecorders();
-                        updateStatusBar('Recorder stopped');
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to stop recorder:', error);
-            }
-        }
-
-        async function handleDeleteRecorder(id) {
-            if (!confirm('Are you sure you want to delete this recorder?')) return;
-
-            try {
-                const result = await deleteRecorder(id);
-                if (result.success) {
-                    recorderState.recorders = recorderState.recorders.filter(r => r.id !== id);
-                    renderRecorders();
-                    updateStatusBar('Recorder deleted');
-                }
-            } catch (error) {
-                console.error('Failed to delete recorder:', error);
-            }
-        }
-
-        // ============================================================
-        // STATUS POLLING
-        // ============================================================
-
-        function startStatusPolling() {
-            if (recorderState.statusPollInterval) {
-                clearInterval(recorderState.statusPollInterval);
-            }
-
-            recorderState.statusPollInterval = setInterval(async () => {
-                for (const recorder of recorderState.recorders) {
-                    if (recorder.status === 'recording') {
-                        const result = await getRecorderStatus(recorder.id);
-                        if (result.success) {
-                            recorder.status = result.data.status;
-                            if (result.data.duration) {
-                                const durationEl = document.getElementById(`duration-${recorder.id}`);
-                                if (durationEl) {
-                                    durationEl.textContent = formatDuration(result.data.duration);
-                                }
-                            }
-                        }
-                    }
-                }
-            }, 2000);
-        }
-
-        // ============================================================
-        // NAVIGATION
-        // ============================================================
-
-        function navigateTo(page) {
-            if (page === 'assets') {
-                window.location.href = '/index.html';
-            } else if (page === 'capture') {
-                window.location.href = '/capture.html';
-            } else if (page === 'upload') {
-                window.location.href = '/upload.html';
-            }
-        }
-
-        // ============================================================
-        // STATUS BAR
-        // ============================================================
-
-        function updateStatusBar() {
-            const indicator = document.getElementById('statusIndicator');
-            const text = document.getElementById('statusText');
-            const count = document.getElementById('recorderCountItem');
-
-            indicator.className = 'status-indicator';
-            text.textContent = 'Connected';
-
-            const recordingCount = recorderState.recorders.filter(r => r.status === 'recording').length;
-            if (recordingCount > 0) {
-                text.textContent = `${recordingCount} recorder(s) recording`;
-            }
-
-            if (recorderState.recorders.length > 0) {
-                count.style.display = 'flex';
-                document.getElementById('recorderCount').textContent = recorderState.recorders.length;
-            } else {
-                count.style.display = 'none';
-            }
-        }
-
-        // Cleanup on page unload
-        window.addEventListener('beforeunload', () => {
-            if (recorderState.statusPollInterval) {
-                clearInterval(recorderState.statusPollInterval);
-            }
-        });
-    </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>
