diff --git a/services/web-ui/public/_primitives-smoke.html b/services/web-ui/public/_primitives-smoke.html
new file mode 100644
index 0000000..0bf5fe4
--- /dev/null
+++ b/services/web-ui/public/_primitives-smoke.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Primitives smoke test</title>
+  <link rel="stylesheet" href="/dist/app.css">
+</head>
+<body>
+  <div style="display:flex; min-height:100vh;">
+    <nav class="wd-sidebar">
+      <div class="wd-sidebar-header">
+        <div style="width:18px;height:18px;background:var(--accent);border-radius:3px"></div>
+        <span class="wd-sidebar-brand">Z-AMPP</span>
+      </div>
+      <div class="wd-sidebar-nav">
+        <a href="#" class="wd-nav-item is-active"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Home</a>
+        <a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Library</a>
+        <a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Recorders</a>
+        <div class="wd-sidebar-section">Admin</div>
+        <a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Settings <span class="nav-dev-badge">IN DEV</span></a>
+      </div>
+    </nav>
+
+    <div style="flex:1;display:flex;flex-direction:column;">
+      <header class="wd-topbar">
+        <div class="wd-topbar-left">
+          <nav class="wd-breadcrumb">
+            <span class="wd-breadcrumb-crumb">Library</span>
+            <svg class="wd-breadcrumb-sep" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor"/></svg>
+            <span class="wd-breadcrumb-crumb">Project Alpha</span>
+            <svg class="wd-breadcrumb-sep" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor"/></svg>
+            <span class="wd-breadcrumb-crumb">Key Scenes</span>
+          </nav>
+        </div>
+        <div class="wd-topbar-center">
+          <div class="wd-topbar-search">
+            <svg viewBox="0 0 12 12"><circle cx="5" cy="5" r="3.5" fill="none" stroke="currentColor"/><path d="M8 8l3 3" stroke="currentColor"/></svg>
+            <input type="text" placeholder="Search in Key Scenes...">
+          </div>
+        </div>
+        <div class="wd-topbar-right">
+          <button class="wd-btn wd-btn--ghost wd-btn--sm wd-btn--icon" aria-label="Filter">f</button>
+          <button class="wd-btn wd-btn--ghost wd-btn--sm wd-btn--icon" aria-label="Sort">s</button>
+          <div class="wd-topbar-divider"></div>
+          <button class="wd-btn wd-btn--primary wd-btn--sm">+ New asset</button>
+        </div>
+      </header>
+
+      <main style="flex:1; padding:20px 20px 32px;">
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Asset cards</h2>
+        <div class="wd-card-asset-grid" style="margin-bottom:32px;">
+          <article class="wd-card-asset">
+            <div class="wd-card-asset-thumb" style="background:linear-gradient(135deg,#333,#111)">
+              <span class="wd-card-asset-chip wd-card-asset-chip--duration">00:30</span>
+              <span class="wd-card-asset-chip wd-card-asset-chip--comments">2</span>
+            </div>
+            <div class="wd-card-asset-meta">
+              <div class="wd-card-asset-name">DRP_B004_081606_V1_0099.mov</div>
+              <div class="wd-card-asset-sub">Alissa Morris · Oct 14th, 2024</div>
+            </div>
+            <button class="wd-card-asset-role" style="color:var(--signal-warn)">Coloring</button>
+          </article>
+          <article class="wd-card-asset">
+            <div class="wd-card-asset-thumb" style="background:linear-gradient(135deg,#553,#221)">
+              <span class="wd-card-asset-chip wd-card-asset-chip--duration">00:05</span>
+              <span class="wd-card-asset-chip wd-card-asset-chip--version">V2</span>
+            </div>
+            <div class="wd-card-asset-meta">
+              <div class="wd-card-asset-name">DRP_A015_0815OF_V1_0023.mov</div>
+              <div class="wd-card-asset-sub">Alissa Morris · Oct 14th, 2024</div>
+            </div>
+            <button class="wd-card-asset-role wd-card-asset-role--unset">Select role</button>
+          </article>
+        </div>
+
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Operational cards</h2>
+        <div class="wd-card-op-grid" style="margin-bottom:32px;">
+          <article class="wd-card-op is-active">
+            <header class="wd-card-op-header">
+              <span class="wd-card-op-name">Studio A SRT</span>
+              <span class="wd-badge wd-badge--bad"><span class="wd-dot wd-dot--bad"></span>Recording</span>
+            </header>
+            <div class="wd-card-op-content">
+              <div class="wd-signal-strip"><div class="wd-signal-strip-fill wd-sweep"></div></div>
+              <div style="display:flex; justify-content:space-between; align-items:center;">
+                <span>Receiving · 12450 fr · 30 fps</span>
+                <span style="font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--signal-bad); font-weight:600;">00:23:14</span>
+              </div>
+            </div>
+            <footer class="wd-card-op-footer">
+              <span class="wd-card-op-meta">Last: Oct 14th, 2024 4:00 PM</span>
+              <div class="wd-card-op-actions">
+                <button class="wd-btn wd-btn--danger wd-btn--sm">Stop</button>
+              </div>
+            </footer>
+          </article>
+          <article class="wd-card-op">
+            <header class="wd-card-op-header">
+              <span class="wd-card-op-name">zampp2</span>
+              <span class="wd-badge wd-badge--good"><span class="wd-dot wd-dot--good"></span>Online</span>
+            </header>
+            <div class="wd-card-op-content">
+              <div>
+                <div style="display:flex; justify-content:space-between; font:400 11px/1 var(--font-mono); color:var(--text-tertiary); margin-bottom:4px;">
+                  <span>CPU</span><span>42%</span>
+                </div>
+                <div class="wd-mini-bar"><div class="wd-mini-bar-fill" style="width:42%"></div></div>
+              </div>
+              <div>
+                <div style="display:flex; justify-content:space-between; font:400 11px/1 var(--font-mono); color:var(--text-tertiary); margin-bottom:4px;">
+                  <span>Memory</span><span>71%</span>
+                </div>
+                <div class="wd-mini-bar"><div class="wd-mini-bar-fill wd-mini-bar-fill--warn" style="width:71%"></div></div>
+              </div>
+            </div>
+            <footer class="wd-card-op-footer">
+              <span class="wd-card-op-meta">DeckLink Duo 2 · 4 ports</span>
+              <div class="wd-card-op-actions">
+                <button class="wd-btn wd-btn--ghost wd-btn--sm">Ping</button>
+              </div>
+            </footer>
+          </article>
+        </div>
+
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">List rows</h2>
+        <div class="wd-list" style="margin-bottom:32px; border:1px solid var(--border-faint); border-radius:6px; overflow:hidden;">
+          <div class="wd-list-header">
+            <span style="flex:1">Name</span>
+            <span>Image</span>
+            <span>Status</span>
+            <span>Actions</span>
+          </div>
+          <div class="wd-list-row is-selected">
+            <span class="wd-list-cell wd-list-cell--name">wild-dragon-mam-api-1</span>
+            <span class="wd-list-cell wd-list-cell--meta">wild-dragon-mam-api:latest</span>
+            <span><span class="wd-badge wd-badge--good">Up</span></span>
+            <span class="wd-list-cell--actions"><button class="wd-btn wd-btn--ghost wd-btn--sm">Logs</button></span>
+          </div>
+          <div class="wd-list-row">
+            <span class="wd-list-cell wd-list-cell--name">wild-dragon-web-ui-1</span>
+            <span class="wd-list-cell wd-list-cell--meta">wild-dragon-web-ui:latest</span>
+            <span><span class="wd-badge wd-badge--good">Up</span></span>
+            <span class="wd-list-cell--actions"><button class="wd-btn wd-btn--ghost wd-btn--sm">Logs</button></span>
+          </div>
+        </div>
+
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Buttons</h2>
+        <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px;">
+          <button class="wd-btn wd-btn--primary wd-btn--sm">Primary sm</button>
+          <button class="wd-btn wd-btn--primary wd-btn--md">Primary md</button>
+          <button class="wd-btn wd-btn--secondary wd-btn--md">Secondary md</button>
+          <button class="wd-btn wd-btn--ghost wd-btn--md">Ghost md</button>
+          <button class="wd-btn wd-btn--danger wd-btn--md">Danger md</button>
+          <button class="wd-btn wd-btn--primary wd-btn--md" disabled>Disabled</button>
+        </div>
+
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Form controls</h2>
+        <div style="max-width:460px; display:flex; flex-direction:column; gap:14px; margin-bottom:32px;">
+          <div class="wd-form-group">
+            <label class="wd-label" for="smoke-input">Recorder name</label>
+            <input class="wd-input" id="smoke-input" placeholder="e.g. Studio A SRT">
+            <div class="wd-hint">Letters, numbers, dashes. Used in clip filenames.</div>
+          </div>
+          <div class="wd-form-row">
+            <div class="wd-form-group">
+              <label class="wd-label" for="smoke-select">Codec</label>
+              <select class="wd-select" id="smoke-select">
+                <option>ProRes 422 HQ</option>
+                <option>H.264 NVENC</option>
+              </select>
+            </div>
+            <div class="wd-form-group">
+              <label class="wd-label" for="smoke-fps">Framerate</label>
+              <input class="wd-input" id="smoke-fps" value="29.97">
+            </div>
+          </div>
+          <label class="wd-toggle">
+            <input type="checkbox" checked>
+            <span class="wd-toggle-track"></span>
+            <span class="wd-toggle-label">Generate proxy</span>
+          </label>
+        </div>
+
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Field group</h2>
+        <div style="max-width:460px; margin-bottom:32px;">
+          <div class="wd-field-group">
+            <div class="wd-field-group-header">
+              <span class="wd-field-group-title">Master recording</span>
+            </div>
+            <div class="wd-tabs">
+              <button class="wd-tab is-active">Video</button>
+              <button class="wd-tab">Audio</button>
+              <button class="wd-tab">Container</button>
+            </div>
+            <div class="wd-tab-panel is-active">
+              <div class="wd-form-row">
+                <div class="wd-form-group">
+                  <label class="wd-label">Codec</label>
+                  <select class="wd-select"><option>ProRes 422 HQ</option></select>
+                </div>
+                <div class="wd-form-group">
+                  <label class="wd-label">Resolution</label>
+                  <select class="wd-select"><option>1920x1080</option></select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Empty state</h2>
+        <div class="wd-empty">
+          <svg class="wd-empty-icon" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.5">
+            <rect x="2" y="6" width="18" height="16" rx="2"/><path d="M20 11l6-3v12l-6-3"/>
+          </svg>
+          <div class="wd-empty-title">No recorders yet</div>
+          <div class="wd-empty-body">Create a recorder to ingest live streams via SRT, RTMP, or SDI.</div>
+          <div class="wd-empty-actions">
+            <button class="wd-btn wd-btn--primary wd-btn--sm">+ New recorder</button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
