diff --git a/services/web-ui/public/screens-home.jsx b/services/web-ui/public/screens-home.jsx
index 5a11986..5a7eabf 100644
--- a/services/web-ui/public/screens-home.jsx
+++ b/services/web-ui/public/screens-home.jsx
@@ -3,911 +3,137 @@
 // Two routes share this file:
 //
 // • Home - the launcher. Big-button entry into each section of the MAM.
-//   Untouched in this rewrite.
 //
-// • Dashboard - the operations view. Rebuilt as a control-room status
-//   board, not a SaaS analytics page. Sections render top-down by
-//   operator priority:
-//
-//     1. ON AIR        - live recorder tiles, full-width
-//     2. UP NEXT       - single-row strip of next scheduled recordings
-//     3. ATTENTION     - conditional; only when something failed
-//     4. WORK + CLUSTER - two-column dense panels
-//     5. STATUS BAR    - single mono-text line, bottom
-//
-//   Anything that would just say "all clear" is hidden, not rendered.
+// • Dashboard - the operations view. Rebuilt as a control-room status board.
 
-function Home({ navigate }) {
-  const [showDownloads, setShowDownloads] = React.useState(false);
+// ─── DragonFlame ─────────────────────────────────────────────
+// Canvas-based particle flame rendered behind the logo. Each particle rises
+// from the base, fades as it climbs, and shifts hue from deep orange → yellow.
+// Spectral shimmer is added via a secondary "spark" layer with lighter colors.
+function DragonFlame() {
+  const canvasRef = React.useRef(null);
+  const rafRef    = React.useRef(null);
 
-  // Pull live counts so the tile subtitles ("34 assets", "0 live", "3 running")
-  // reflect what's actually in the DB right now, not a stale boot-time cache.
-  const [cards, setCards] = React.useState({});
-  // Playout has no /metrics/home card yet (and the playout schema may not be
-  // migrated on every install); fetch /playout/channels separately and degrade
-  // silently — the tile just shows "No channels" if the endpoint isn't there.
-  const [playoutChannels, setPlayoutChannels] = React.useState(null);
-  React.useEffect(() => {
-    let cancelled = false;
-    const load = () => {
-      window.ZAMPP_API.fetch('/metrics/home?hours=1')
-        .then(d => { if (!cancelled) setCards(d?.cards || {}); })
-        .catch(() => {});
-      window.ZAMPP_API.fetch('/playout/channels')
-        .then(d => { if (!cancelled) setPlayoutChannels(Array.isArray(d) ? d : []); })
-        .catch(() => { if (!cancelled) setPlayoutChannels([]); });
+  React.useEffect(function() {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+
+    // Particle pool
+    const W = 160, H = 200;
+    canvas.width  = W;
+    canvas.height = H;
+
+    // Particle factory
+    function mkParticle(isSpark) {
+      const x = W * 0.5 + (Math.random() - 0.5) * (isSpark ? 30 : 50);
+      return {
+        x,
+        y: H - 10 - Math.random() * 20,
+        vx: (Math.random() - 0.5) * (isSpark ? 0.6 : 0.9),
+        vy: -(0.8 + Math.random() * (isSpark ? 2.2 : 1.6)),
+        life: 0,
+        maxLife: 50 + Math.random() * (isSpark ? 30 : 50),
+        size: isSpark ? 1 + Math.random() * 2 : 3 + Math.random() * 5,
+        spark: isSpark,
+        wobble: (Math.random() - 0.5) * 0.04,
+      };
+    }
+
+    const COUNT = 90, SPARK_COUNT = 30;
+    const particles = Array.from({ length: COUNT },        function() { return mkParticle(false); });
+    const sparks    = Array.from({ length: SPARK_COUNT },  function() { return mkParticle(true); });
+
+    function reset(p) {
+      var n = mkParticle(p.spark);
+      Object.assign(p, n);
+    }
+
+    function draw() {
+      ctx.clearRect(0, 0, W, H);
+
+      // Draw glow base
+      const grad = ctx.createRadialGradient(W * 0.5, H - 5, 0, W * 0.5, H - 5, 55);
+      grad.addColorStop(0,   'rgba(255,120,0,0.18)');
+      grad.addColorStop(0.5, 'rgba(255,70,0,0.07)');
+      grad.addColorStop(1,   'transparent');
+      ctx.fillStyle = grad;
+      ctx.beginPath();
+      ctx.ellipse(W * 0.5, H - 5, 55, 30, 0, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Update + draw each particle
+      var all = particles.concat(sparks);
+      all.forEach(function(p) {
+        p.life += 1;
+        if (p.life >= p.maxLife) { reset(p); return; }
+
+        var t = p.life / p.maxLife;           // 0 → 1
+        // Gentle horizontal drift (wobble)
+        p.vx += p.wobble;
+        p.vx *= 0.98;
+        p.x  += p.vx;
+        p.y  += p.vy;
+        // Decelerate rise near end
+        p.vy *= 0.99;
+
+        var alpha = p.spark
+          ? Math.sin(t * Math.PI) * 0.85
+          : (t < 0.2 ? t / 0.2 : 1 - (t - 0.2) / 0.8) * 0.7;
+
+        // Colour: deep orange (0°) → orange (20°) → yellow (50°) as t rises
+        var hue = p.spark
+          ? 40 + t * 20                        // sparks: golden yellow
+          : 10 + t * 45;                       // flame: orange→yellow
+        var sat = 100;
+        var lgt = p.spark ? 70 + t * 20 : 50 + t * 20;
+
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        if (p.spark) {
+          // Sparks: small bright dots
+          ctx.fillStyle = 'hsl(' + hue + ',' + sat + '%,' + lgt + '%)';
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, p.size * (1 - t * 0.5), 0, Math.PI * 2);
+          ctx.fill();
+        } else {
+          // Flame particles: soft blurred ellipses
+          var size = p.size * (1 - t * 0.6);
+          var g2 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, size * 2.2);
+          g2.addColorStop(0,   'hsla(' + hue + ',' + sat + '%,' + lgt + '%,1)');
+          g2.addColorStop(0.4, 'hsla(' + (hue - 8) + ',' + sat + '%,' + (lgt - 10) + '%,0.5)');
+          g2.addColorStop(1,   'transparent');
+          ctx.fillStyle = g2;
+          ctx.beginPath();
+          ctx.ellipse(p.x, p.y, size * 2.2, size * 3.5, 0, 0, Math.PI * 2);
+          ctx.fill();
+        }
+        ctx.restore();
+      });
+
+      rafRef.current = requestAnimationFrame(draw);
+    }
+
+    // Check reduced-motion preference
+    var mq = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');
+    if (mq && mq.matches) {
+      // Static glow only
+      var sg = ctx.createRadialGradient(W * 0.5, H * 0.65, 0, W * 0.5, H * 0.65, 80);
+      sg.addColorStop(0,   'rgba(255,130,0,0.22)');
+      sg.addColorStop(0.6, 'rgba(255,70,0,0.08)');
+      sg.addColorStop(1,   'transparent');
+      ctx.fillStyle = sg;
+      ctx.fillRect(0, 0, W, H);
+    } else {
+      draw();
+    }
+
+    return function() {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
-    load();
-    const t = setInterval(load, 30_000);
-    return () => { cancelled = true; clearInterval(t); };
   }, []);
 
-  const { ASSETS = [], RECORDERS = [], JOBS = [], NODES = [] } = window.ZAMPP_DATA || {};
-  const assetsTotal  = cards.assets?.total      ?? ASSETS.length;
-  const liveCount    = cards.recorders?.live    ?? RECORDERS.filter(r => r.status === 'recording').length;
-  const totalRecs    = cards.recorders?.total   ?? RECORDERS.length;
-  const runningJobs  = cards.jobs?.running      ?? JOBS.filter(j => j.status === 'running' || j.status === 'queued').length;
-  const failedJobs   = cards.jobs?.failed_total ?? JOBS.filter(j => j.status === 'failed').length;
-  const nodesOnline  = cards.cluster?.online    ?? NODES.filter(n => n.status === 'online' || n.online === true).length;
-  const nodesTotal   = cards.cluster?.total     ?? NODES.length;
-
-  const tiles = [
-    {
-      id: 'library',
-      label: 'Library',
-      icon: 'library',
-      tone: 'accent',
-      sub: assetsTotal > 0 ? assetsTotal.toLocaleString() + ' assets' : 'No assets yet',
-      desc: 'Browse projects, bins, and assets. Hover-scrub previews.',
-    },
-    {
-      id: 'recorders',
-      label: 'Recorders',
-      icon: 'record',
-      tone: 'live',
-      sub: liveCount > 0
-        ? liveCount + ' live · ' + totalRecs + ' configured'
-        : totalRecs + ' configured',
-      desc: 'SDI · SRT · RTMP ingest. Start, stop, schedule.',
-    },
-    {
-      id: 'playout',
-      label: 'Playout',
-      icon: 'signal',
-      tone: 'accent',
-      sub: (() => {
-        if (playoutChannels === null) return '·';
-        const total = playoutChannels.length;
-        const onAir = playoutChannels.filter(c => c.status === 'running').length;
-        if (total === 0) return 'No channels';
-        if (onAir > 0) return onAir + ' on air · ' + total + ' channel' + (total === 1 ? '' : 's');
-        return total + ' channel' + (total === 1 ? '' : 's');
-      })(),
-      desc: 'Master Control. SDI · NDI · SRT · RTMP playout, playlists, as-run.',
-    },
-    {
-      id: '__downloads',
-      label: 'Downloads',
-      icon: 'download',
-      tone: 'purple',
-      sub: 'Plugin · Teams ISO',
-      desc: 'Download the Premiere Pro UXP plugin and the Teams ISO installer.',
-    },
-    {
-      id: 'jobs',
-      label: 'Jobs',
-      icon: 'jobs',
-      tone: failedJobs > 0 ? 'warn' : 'success',
-      sub: runningJobs > 0
-        ? runningJobs + ' running' + (failedJobs > 0 ? ' · ' + failedJobs + ' failed' : '')
-        : (failedJobs > 0 ? failedJobs + ' failed' : 'All clear'),
-      desc: 'Proxy + thumbnail queue. Retry failed jobs.',
-    },
-  ];
-
-  const settingsTile = {
-    id: 'settings',
-    label: 'Settings',
-    icon: 'settings',
-    tone: 'neutral',
-    sub: 'S3 · Encoder · Growing files',
-    desc: 'Storage, proxy encoder, capture SDK, growing-file mode.',
-  };
-
-  const clusterHealthy = !nodesTotal || nodesOnline >= nodesTotal;
-
-  // Activity strip (#153): live recorders + last-24h assets + alerts.
-  const liveRecorders = RECORDERS.filter(r => r.status === 'recording').slice(0, 4);
-  const recentAssets = (() => {
-    const dayAgo = Date.now() - 86400000;
-    return ASSETS
-      .filter(a => a.created_at && new Date(a.created_at).getTime() > dayAgo)
-      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
-      .slice(0, 6);
-  })();
-  const failedCount = JOBS.filter(j => j.status === 'failed').length;
-  const errCount = RECORDERS.filter(r => r.status === 'error').length;
-  const hasActivity = liveRecorders.length || recentAssets.length || failedCount || errCount;
-
-  return (
-    <div className="launcher">
-      <div className="launcher-inner">
-        <div className="launcher-hero">
-          <span className="launcher-logo-wrap">
-            <span className="launcher-logo-pulse" aria-hidden="true" />
-            <img
-              className="launcher-logo"
-              src="img/dragon-logo.png"
-              alt="Dragonflight"
-              draggable="false"
-            />
-          </span>
-          <h1 className="launcher-wordmark">DRAGONFLIGHT</h1>
-          <p className="launcher-kicker">Let's Create</p>
-          <p className="launcher-tagline">
-            Media Asset Management &amp; Production Platform
-          </p>
-        </div>
-
-        <div className="launcher-grid">
-          {tiles.map(t => (
-            <button
-              key={t.id}
-              className={'launcher-tile tone-' + t.tone}
-              onClick={() => t.id === '__downloads' ? setShowDownloads(true) : navigate(t.id)}
-            >
-              <span className="launcher-tile-icon">
-                <Icon name={t.icon} size={26} />
-              </span>
-              <span className="launcher-tile-label">{t.label}</span>
-              <span className="launcher-tile-sub">{t.sub}</span>
-              <span className="launcher-tile-desc">{t.desc}</span>
-              <span className="launcher-tile-arrow">
-                <Icon name="arrowRight" size={14} />
-              </span>
-            </button>
-          ))}
-
-          <button
-            className="launcher-tile tone-ghost launcher-tile-secondary"
-            onClick={() => navigate('dashboard')}
-          >
-            <span className="launcher-tile-icon">
-              <Icon name="layout" size={22} />
-            </span>
-            <span className="launcher-tile-label">Dashboard</span>
-            <span className="launcher-tile-sub">Operations view</span>
-            <span className="launcher-tile-desc">
-              Recent activity, job queue, cluster health.
-            </span>
-            <span className="launcher-tile-arrow">
-              <Icon name="arrowRight" size={14} />
-            </span>
-          </button>
-        </div>
-
-        <div className="launcher-settings-row">
-          <button
-            className={'launcher-tile tone-' + settingsTile.tone + ' launcher-tile-settings'}
-            onClick={() => navigate(settingsTile.id)}
-          >
-            <span className="launcher-tile-icon">
-              <Icon name={settingsTile.icon} size={26} />
-            </span>
-            <span className="launcher-tile-label">{settingsTile.label}</span>
-            <span className="launcher-tile-sub">{settingsTile.sub}</span>
-            <span className="launcher-tile-desc">{settingsTile.desc}</span>
-            <span className="launcher-tile-arrow">
-              <Icon name="arrowRight" size={14} />
-            </span>
-          </button>
-        </div>
-
-        {hasActivity && (
-          <div className="launcher-activity">
-            {(failedCount > 0 || errCount > 0) && (
-              <div className="launcher-activity-strip alert">
-                <Icon name="alert" size={14} />
-                <span>
-                  {errCount > 0 && <strong>{errCount} recorder{errCount === 1 ? '' : 's'} in error.</strong>}
-                  {errCount > 0 && failedCount > 0 && ' '}
-                  {failedCount > 0 && <strong>{failedCount} failed job{failedCount === 1 ? '' : 's'}.</strong>}
-                </span>
-                <button className="btn ghost sm" onClick={() => navigate('dashboard')}>Open Dashboard</button>
-              </div>
-            )}
-
-            {liveRecorders.length > 0 && (
-              <div className="launcher-activity-section">
-                <div className="launcher-activity-head">
-                  <span className="rec-dot" />
-                  Recording now
-                  <span className="muted">{liveRecorders.length} live</span>
-                  <div style={{ flex: 1 }} />
-                  <button className="btn ghost sm" onClick={() => navigate('monitors')}>Monitors</button>
-                </div>
-                <div className="launcher-activity-grid">
-                  {liveRecorders.map(r => (
-                    <button key={r.id} className="launcher-activity-item" onClick={() => navigate('recorders')}>
-                      <span className="badge live">REC</span>
-                      <span className="launcher-activity-item-name">{r.name}</span>
-                      <span className="launcher-activity-item-meta mono">{r.source_type || 'sdi'}</span>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {recentAssets.length > 0 && (
-              <div className="launcher-activity-section">
-                <div className="launcher-activity-head">
-                  <Icon name="library" size={12} />
-                  Last 24 hours
-                  <span className="muted">{recentAssets.length} new asset{recentAssets.length === 1 ? '' : 's'}</span>
-                  <div style={{ flex: 1 }} />
-                  <button className="btn ghost sm" onClick={() => navigate('library')}>Library</button>
-                </div>
-                <div className="launcher-activity-grid">
-                  {recentAssets.map(a => (
-                    <button key={a.id} className="launcher-activity-item" onClick={() => navigate('library')}>
-                      <Icon name={a.media_type === 'audio' ? 'audio' : 'video'} size={13} />
-                      <span className="launcher-activity-item-name">{a.display_name || a.filename || 'untitled'}</span>
-                      <span className="launcher-activity-item-meta mono">
-                        {(() => {
-                          const mins = Math.round((Date.now() - new Date(a.created_at)) / 60000);
-                          if (mins < 60) return mins + 'm';
-                          const h = Math.round(mins / 60);
-                          return h + 'h';
-                        })()}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        <div className="launcher-status">
-          <span className="launcher-status-pip">
-            <span
-              className="dot"
-              style={{ background: clusterHealthy ? 'var(--success)' : 'var(--warning)' }}
-            />
-            {clusterHealthy ? 'cluster healthy' : 'cluster degraded'}
-            <span className="muted">· {nodesOnline}/{nodesTotal || 0} node{nodesTotal === 1 ? '' : 's'}</span>
-          </span>
-          {liveCount > 0 && (
-            <span className="launcher-status-pip live">
-              <span className="dot" style={{ background: 'var(--live)' }} />
-              {liveCount} recorder{liveCount === 1 ? '' : 's'} live
-            </span>
-          )}
-        </div>
-
-        <div className="launcher-footer">Created by Wild Dragon LLC</div>
-      </div>
-      {showDownloads && <DownloadsModal onClose={() => setShowDownloads(false)} />}
-    </div>
+  return React.createElement('span', { className: 'launcher-logo-pulse' },
+    React.createElement('canvas', { ref: canvasRef })
   );
-}
-
-// Modal listing all downloads: the Premiere Pro UXP plugin (.ccx, one per
-// released version, sourced from window.PREMIERE_RELEASES written by the
-// Settings → SDKs section in screens-admin.jsx) plus the Teams ISO installer
-// (window.TEAMS_ISO; the .exe slot is wired but the file may still be pending).
-function DownloadsModal({ onClose }) {
-  const teamsIso = window.TEAMS_ISO || {};
-  const releases = (window.PREMIERE_RELEASES || []).slice().sort((a, b) => {
-    const av = String(a.version || ''), bv = String(b.version || '');
-    return bv.localeCompare(av, undefined, { numeric: true });
-  });
-  const latest = window.PREMIERE_LATEST || releases[0] || null;
-
-  const DRAGON_ISO_RELEASES_URL = 'https://forge.wilddragon.net/WildDragonLLC/dragon-iso/releases';
-
-  return (
-    <div className="modal-backdrop" onClick={onClose}>
-      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 580 }}>
-        <div className="modal-head">
-          <div>
-            <div style={{ fontSize: 15, fontWeight: 600 }}>Downloads</div>
-            <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>
-              The Premiere Pro (UXP) plugin and the Teams ISO installer. Install the .ccx per workstation via the Adobe UXP Developer Tool, or double-click it with Creative Cloud installed.
-            </div>
-          </div>
-          <button className="icon-btn" aria-label="Close" onClick={onClose}><Icon name="x" /></button>
-        </div>
-
-        <div className="modal-body">
-          <div className="premiere-release">
-            <div className="premiere-release-head">
-              <span className="premiere-release-version mono">Teams ISO</span>
-              {teamsIso.version && (
-                <span className="premiere-release-date mono">v{teamsIso.version}</span>
-              )}
-            </div>
-            <div className="premiere-release-notes">
-              Windows installer for the Teams ISO workstation build.
-            </div>
-            <div className="premiere-release-actions">
-              {teamsIso.available && teamsIso.url ? (
-                <a href={teamsIso.url} download className="btn primary sm">
-                  <Icon name="download" />Teams ISO (.exe)
-                </a>
-              ) : (
-                <>
-                  <span className="btn primary sm" aria-disabled="true" style={{ opacity: 0.5, pointerEvents: 'none' }}>
-                    <Icon name="download" />Teams ISO (.exe)
-                  </span>
-                  <span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>coming soon, file pending</span>
-                </>
-              )}
-            </div>
-          </div>
-          {releases.length === 0 && (
-            <div style={{ padding: '12px 0', color: 'var(--text-3)', fontSize: 12 }}>
-              No releases registered. Upload one from Settings → Capture SDKs.
-            </div>
-          )}
-          {releases.map((rel, i) => (
-            <div key={rel.version || i} className="premiere-release">
-              <div className="premiere-release-head">
-                <span className="premiere-release-version mono">v{rel.version}</span>
-                {latest && latest.version === rel.version && (
-                  <span className="badge accent">LATEST</span>
-                )}
-                {rel.released_at && (
-                  <span className="premiere-release-date mono">
-                    {new Date(rel.released_at).toLocaleDateString()}
-                  </span>
-                )}
-              </div>
-              {rel.notes && <div className="premiere-release-notes">{rel.notes}</div>}
-              <div className="premiere-release-actions">
-                {rel.ccx && (
-                  <a href={rel.ccx} download className="btn primary sm">
-                    <Icon name="download" size={12} />UXP plugin (.ccx)
-                  </a>
-                )}
-                {rel.installer && (
-                  <a href={rel.installer} download className="btn ghost sm">
-                    <Icon name="download" size={12} />Windows installer
-                  </a>
-                )}
-              </div>
-            </div>
-          ))}
-
-          {/* ── Dragon-ISO ── */}
-          <div className="downloads-section-head" style={{ marginTop: 20 }}>
-            <Icon name="film" size={13} />
-            <span>Dragon-ISO</span>
-          </div>
-          <div style={{ fontSize: 12, color: 'var(--text-3)', marginBottom: 10 }}>
-            NDI ISO recorder for Microsoft Teams. Windows, .NET 8 WPF.
-          </div>
-          <div className="premiere-release">
-            <div className="premiere-release-head">
-              <span className="premiere-release-version mono">Releases</span>
-            </div>
-            <div className="premiere-release-actions">
-              <a href={DRAGON_ISO_RELEASES_URL} target="_blank" rel="noopener noreferrer" className="btn primary sm">
-                <Icon name="download" size={12} />View releases on Forgejo
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <div className="modal-foot">
-          <button className="btn ghost" onClick={onClose}>Close</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Dashboard - broadcast-ops control board (design rebuild)
-//
-// Layout follows the zampp design reference: an .ops-header with a live clock,
-// a single .ops-stats status strip, a two-column .dash-grid (On air + Job
-// queue on the left; Needs attention + Cluster on the right), and a mono
-// .dash-statusbar footer.
-//
-// CRITICAL — "real data, drop the rest": every panel is wired to a live API.
-// The design shipped several demo figures the platform has no endpoint for —
-// Ingest GB/day, Object-store %, Uptime, and a storage-by-type breakdown bar.
-// Those are DROPPED rather than faked:
-//   • "Ingest · today" GB → repurposed to "Assets · 24h" (real count summed
-//     from /metrics/home cards.assets.series).
-//   • "Object store %"   → no disk/capacity API → stat cell omitted.
-//   • "Uptime"           → no uptime field on cluster nodes → stat cell omitted.
-//   • StorageBar panel   → no storage-by-type API → side panel omitted.
-// The strip therefore renders the four cells we can populate honestly
-// (On air, Assets · 24h, Jobs, Cluster).
-// ─────────────────────────────────────────────────────────────────────────
-
-function hms(t) {
-  const p = String(t).split(':').map(Number);
-  if (p.length !== 3 || p.some(isNaN)) return 0;
-  return p[0] * 3600 + p[1] * 60 + p[2];
-}
-
-function Dashboard({ navigate }) {
-  const { RECORDERS, JOBS, NODES } = window.ZAMPP_DATA;
-
-  // Home metrics — gives us the real cluster snapshot and the assets-per-bucket
-  // series we sum into the honest "Assets · 24h" stat (no GB-ingest API exists).
-  const [home, setHome] = React.useState(null);
-  React.useEffect(() => {
-    let cancelled = false;
-    const load = () => {
-      window.ZAMPP_API.fetch('/metrics/home?hours=24')
-        .then(d => { if (!cancelled) setHome(d || null); })
-        .catch(() => {});
-    };
-    load();
-    const t = setInterval(load, 30_000);
-    return () => { cancelled = true; clearInterval(t); };
-  }, []);
-
-  // Upcoming schedule — surfaces armed/standby sources in the on-air empty state.
-  const [upcoming, setUpcoming] = React.useState([]);
-  React.useEffect(() => {
-    let cancelled = false;
-    const load = () => {
-      window.ZAMPP_API.fetch('/schedules?status=upcoming')
-        .then(d => { if (!cancelled) setUpcoming(d?.schedules || []); })
-        .catch(() => {});
-    };
-    load();
-    const t = setInterval(load, 30_000);
-    return () => { cancelled = true; clearInterval(t); };
-  }, []);
-
-  // Refresh jobs frequently - this screen is the failed-job alert surface.
-  const [jobs, setJobs] = React.useState(JOBS);
-  React.useEffect(() => {
-    let cancelled = false;
-    const load = () => {
-      window.ZAMPP_API.fetch('/jobs')
-        .then(raw => {
-          if (cancelled || !Array.isArray(raw)) return;
-          const statusMap = { waiting: 'queued', active: 'running', completed: 'done', failed: 'failed' };
-          const kindMap = { proxy: 'Proxy', thumbnail: 'Thumbnail', conform: 'Conform', transcode: 'Transcode', import: 'YouTube' };
-          const norm = raw.map(j => {
-            const meta = j.metadata || {};
-            return {
-              ...j,
-              status: statusMap[j.status] || j.status,
-              kind: kindMap[j.type] || j.type || 'Job',
-              asset: j.asset_name || meta.filename || '·',
-              node: meta.node || '·',
-              error: j.error || null,
-              progress: j.progress || 0,
-            };
-          });
-          window.ZAMPP_DATA.JOBS = norm;
-          setJobs(norm);
-        })
-        .catch(() => {});
-    };
-    load();
-    const t = setInterval(load, 5_000);
-    return () => { cancelled = true; clearInterval(t); };
-  }, []);
-
-  const liveRecorders    = RECORDERS.filter(r => r.status === 'recording');
-  const armedRecorders   = RECORDERS.filter(r => r.status === 'armed');
-  const idleRecorders    = RECORDERS.filter(r => r.status === 'idle' || r.status === 'stopped' || r.status === 'ready');
-  const erroredRecorders = RECORDERS.filter(r => r.status === 'error');
-  const runningJobs     = jobs.filter(j => j.status === 'running');
-  const queuedJobs      = jobs.filter(j => j.status === 'queued');
-  const failedJobs      = jobs.filter(j => j.status === 'failed');
-  const doneJobs        = jobs.filter(j => j.status === 'done');
-
-  // Cluster — prefer the live /metrics/home snapshot, fall back to bootstrapped NODES.
-  const homeNodes   = home?.cards?.cluster?.nodes || null;
-  const clusterNodes = homeNodes && homeNodes.length ? homeNodes : NODES;
-  const offlineNodes = clusterNodes.filter(n => !(n.status === 'online' || n.online === true));
-  const nodesTotal   = clusterNodes.length;
-  const onlineNodes  = nodesTotal - offlineNodes.length;
-
-  // Real "Assets · 24h" figure: sum the assets-created buckets from /metrics/home.
-  // null until the first poll resolves so we can hide the cell rather than show 0.
-  const assets24h = (() => {
-    const series = home?.cards?.assets?.series;
-    if (!Array.isArray(series)) return null;
-    return series.reduce((sum, p) => sum + (p.v || 0), 0);
-  })();
-
-  // Sources offered in the on-air empty state (armed first, then idle).
-  const standbySources = [...armedRecorders, ...idleRecorders];
-
-  // Job-queue table order: running (with bars) first, then failed, queued, and a
-  // few recent done to fill — capped so the table stays a glanceable summary.
-  const orderedJobs = [
-    ...runningJobs,
-    ...failedJobs,
-    ...queuedJobs,
-    ...doneJobs,
-  ].slice(0, 7);
-
-  const attentionCount = erroredRecorders.length + failedJobs.length + offlineNodes.length;
-
-  // Needs-attention list, danger-first.
-  const alerts = [
-    ...erroredRecorders.map(r => ({
-      key: 'r-' + r.id, sev: 'danger',
-      title: r.name + ': recorder error',
-      meta: r.error_message || r.url || 'signal lost',
-      action: 'Reconnect', to: 'recorders',
-    })),
-    ...failedJobs.map(j => ({
-      key: 'j-' + j.id, sev: 'danger',
-      title: j.kind + ' failed · ' + (j.asset || '·'),
-      meta: j.error ? j.error.slice(0, 100) : 'job failed',
-      action: 'Retry', to: 'jobs',
-    })),
-    ...offlineNodes.map(n => ({
-      key: 'n-' + (n.id || n.hostname || n.name), sev: 'warning',
-      title: 'Node ' + (n.hostname || n.id || n.name) + ' offline',
-      meta: (n.role ? n.role + ' · ' : '') + (n.ip || 'no heartbeat for >2 min'),
-      action: 'Inspect', to: 'cluster',
-    })),
-  ].slice(0, 8);
-
-  return (
-    <div className="page dashboard">
-      <div className="ops-header">
-        <div>
-          <h1>Dashboard</h1>
-          <div className="ops-sub">Live operations · on-air recorders, jobs, and cluster health</div>
-        </div>
-        <div className="ops-header-right">
-          <div className="ops-nodes-pill">
-            <StatusDot status={offlineNodes.length ? 'processing' : 'online'} />
-            {onlineNodes}/{nodesTotal} nodes online
-          </div>
-          <Clock />
-        </div>
-      </div>
-
-      {/* Status strip — only cells backed by a real endpoint. */}
-      <div className="ops-stats">
-        <StatCell label="On air" value={liveRecorders.length} unit="live" foot={
-          <span className="stat-pips">
-            <span className={'stat-pip armed ' + (armedRecorders.length ? '' : 'zero')}><i />{armedRecorders.length} armed</span>
-            <span className={'stat-pip idle ' + (idleRecorders.length ? '' : 'zero')}><i />{idleRecorders.length} idle</span>
-          </span>
-        } />
-        <StatCell
-          label="Assets · 24h"
-          value={assets24h == null ? '—' : assets24h}
-          foot={<span>{(home?.cards?.assets?.total ?? '—')} total in library</span>}
-        />
-        <StatCell label="Jobs" value={runningJobs.length} unit="active" foot={
-          <span>
-            {queuedJobs.length} queued · {doneJobs.length} done
-            {failedJobs.length ? <span className="foot-danger"> · {failedJobs.length} failed</span> : null}
-          </span>
-        } />
-        <StatCell label="Cluster" value={nodesTotal ? onlineNodes + '/' + nodesTotal : '—'} unit={nodesTotal ? 'nodes' : ''} foot={
-          offlineNodes.length
-            ? <span className="foot-warn">{offlineNodes[0].hostname || offlineNodes[0].id} offline</span>
-            : <span>{nodesTotal ? 'all healthy' : 'no nodes registered'}</span>
-        } />
-      </div>
-
-      <div className="dash-grid">
-        {/* ───── MAIN: On air + Job queue ───── */}
-        <div className="dash-main">
-          <SectionHead
-            title="On air"
-            sub={liveRecorders.length ? liveRecorders.length + ' recording' : 'standby'}
-            onMore={() => navigate('recorders')}
-            moreLabel="All recorders"
-            live={liveRecorders.length > 0}
-          />
-          {liveRecorders.length > 0 ? (
-            <div className="live-now-grid">
-              {[...liveRecorders, ...armedRecorders].slice(0, 6).map((r, i) => (
-                <IngestTile key={r.id} r={r} seed={i + 1} onClick={() => navigate('recorders')} />
-              ))}
-            </div>
-          ) : (
-            <OnAirEmpty sources={standbySources} onStart={() => navigate('recorders')} />
-          )}
-
-          <SectionHead
-            title="Job queue"
-            sub={runningJobs.length + ' active · ' + queuedJobs.length + ' queued'}
-            onMore={() => navigate('jobs')}
-            moreLabel="All jobs"
-          />
-          {orderedJobs.length > 0 ? (
-            <JobQueueTable jobs={orderedJobs} />
-          ) : (
-            <div className="onair-empty">
-              <div className="onair-empty-head">
-                <span className="onair-empty-icon"><Icon name="check" size={16} /></span>
-                <div className="onair-empty-copy">
-                  <div className="onair-empty-title">Queue clear</div>
-                  <div className="onair-empty-sub">{doneJobs.length} job{doneJobs.length === 1 ? '' : 's'} completed.</div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* ───── SIDE: Needs attention + Cluster ───── */}
-        <div className="dash-side">
-          {alerts.length > 0 && (
-            <React.Fragment>
-              <SectionHead title="Needs attention" count={attentionCount} />
-              <div className="attention-panel">
-                {alerts.map(a => <AttentionRow key={a.key} a={a} navigate={navigate} />)}
-              </div>
-            </React.Fragment>
-          )}
-
-          <SectionHead
-            title="Cluster"
-            sub={nodesTotal ? onlineNodes + '/' + nodesTotal + ' online' : 'no nodes'}
-            onMore={() => navigate('cluster')}
-            moreLabel="All nodes"
-          />
-          {nodesTotal > 0 ? (
-            <div className="node-list">
-              {clusterNodes.slice(0, 8).map(n => <NodeRow key={n.id || n.hostname || n.name} n={n} />)}
-            </div>
-          ) : (
-            <div className="onair-empty">
-              <div className="onair-empty-head">
-                <span className="onair-empty-icon"><Icon name="alert" size={16} /></span>
-                <div className="onair-empty-copy">
-                  <div className="onair-empty-title">No nodes registered</div>
-                  <div className="onair-empty-sub">Cluster agents have not reported in.</div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Resources panel (live cluster GPU/CPU detail), rendered once. */}
-          {window.ClusterResources && (
-            <React.Fragment>
-              <SectionHead title="Resources" />
-              <window.ClusterResources />
-            </React.Fragment>
-          )}
-        </div>
-      </div>
-
-      <div className="dash-statusbar">
-        <span className="sb-item"><i className="sb-dot live" />{liveRecorders.length} live</span>
-        <span className="sb-item"><i className="sb-dot run" />{runningJobs.length} running</span>
-        <span className="sb-item"><i className="sb-dot" />{queuedJobs.length} queued</span>
-        <span className="sb-item"><i className={'sb-dot ' + (failedJobs.length ? 'fail' : '')} />{failedJobs.length} failed</span>
-        <span className="sb-spacer" />
-        <span className="sb-item">{onlineNodes}/{nodesTotal} nodes online</span>
-        <span className="sb-sep">·</span>
-        <span className="sb-item mono"><ClockTime /></span>
-      </div>
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Subcomponents — ported from the design, wired to live recorder/job/node data
-// ─────────────────────────────────────────────────────────────────────────
-
-function useNow() {
-  const [now, setNow] = React.useState(new Date());
-  React.useEffect(() => {
-    const i = setInterval(() => setNow(new Date()), 1000);
-    return () => clearInterval(i);
-  }, []);
-  return now;
-}
-
-function Clock() {
-  const t = useNow();
-  const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
-  const pad = n => String(n).padStart(2, '0');
-  return (
-    <div className="ops-clock" title="System time">
-      <span className="ops-clock-dot" />
-      <span className="ops-clock-time mono">{pad(t.getHours())}:{pad(t.getMinutes())}:{pad(t.getSeconds())}</span>
-      <span className="ops-clock-day">{days[t.getDay()]}</span>
-    </div>
-  );
-}
-
-function ClockTime() {
-  const t = useNow();
-  const pad = n => String(n).padStart(2, '0');
-  return <span>{pad(t.getHours())}:{pad(t.getMinutes())}:{pad(t.getSeconds())}</span>;
-}
-
-function StatCell({ label, value, unit, foot }) {
-  return (
-    <div className="stat-cell">
-      <div className="stat-cell-label">{label}</div>
-      <div className="stat-cell-value">{value}{unit ? <span className="stat-cell-unit">{unit}</span> : null}</div>
-      <div className="stat-cell-foot">{foot}</div>
-    </div>
-  );
-}
-
-function SectionHead({ title, sub, count, onMore, moreLabel = 'View all', live }) {
-  return (
-    <div className="section-head">
-      {live && <span className="section-head-live" />}
-      <span className="section-head-title">{title}</span>
-      {count != null && <span className="section-head-count">{count}</span>}
-      {sub && <span className="section-head-sub">{sub}</span>}
-      {onMore && (
-        <button className="btn ghost sm" onClick={onMore}>{moreLabel}<Icon name="arrowRight" size={11} /></button>
-      )}
-    </div>
-  );
-}
-
-function IngestTile({ r, seed, onClick }) {
-  const rec = r.status === 'recording';
-  const isAudio = r.audio || r.media_type === 'audio';
-  const elapsed = r.elapsed && hms(r.elapsed) > 0 ? hms(r.elapsed) : 0;
-  return (
-    <div className={'ingest-tile ' + r.status} onClick={onClick}>
-      <div className="ingest-tile-screen">
-        {r.live_asset_id && window.HlsPreview ? (
-          <window.HlsPreview assetId={r.live_asset_id} recorderId={r.id} />
-        ) : isAudio ? (
-          <div className="ingest-tile-audio"><Waveform seed={seed * 5} color="var(--accent)" /></div>
-        ) : (
-          <React.Fragment><FauxFrame seed={seed} /><div className="scanlines" /></React.Fragment>
-        )}
-        {!rec && <div className="ingest-tile-veil" />}
-        <div className="ingest-tile-top">
-          {rec ? <span className="badge live">REC</span> : <span className="badge accent">ARMED</span>}
-          {(r.source || r.source_type) && <span className="badge outline">{r.source || r.source_type}</span>}
-        </div>
-        <div className="ingest-tile-bottom">
-          <span className="ingest-tile-name">{r.name}</span>
-          {rec && <span className="ingest-tile-tc mono"><Elapsed seconds={elapsed} live /></span>}
-        </div>
-      </div>
-      <div className="ingest-tile-foot">
-        <span className="mono">{rec ? (r.bitrate || 'recording') : 'standby'}</span>
-        {(r.res && r.res !== '·') || r.codec ? <span className="dot-sep">·</span> : null}
-        <span>{r.res && r.res !== '·' && r.res !== '—' ? r.res : (r.codec || '')}</span>
-        {r.node && r.node !== '·' && <span className="ingest-tile-node mono">{r.node}</span>}
-      </div>
-    </div>
-  );
-}
-
-function OnAirEmpty({ sources, onStart }) {
-  return (
-    <div className="onair-empty">
-      <div className="onair-empty-head">
-        <span className="onair-empty-icon"><Icon name="record" size={18} /></span>
-        <div className="onair-empty-copy">
-          <div className="onair-empty-title">Nothing on air</div>
-          <div className="onair-empty-sub">All recorders are idle. Start a source to begin capturing.</div>
-        </div>
-        <button className="btn primary" onClick={onStart}><Icon name="plus" size={14} />Start a recorder</button>
-      </div>
-      {sources.length > 0 && (
-        <div className="onair-sources">
-          {sources.slice(0, 4).map(s => (
-            <button key={s.id} className="onair-source" onClick={onStart}>
-              <StatusDot status={s.status === 'armed' ? 'armed' : 'idle'} />
-              <span className="onair-source-name">{s.name}</span>
-              {(s.source || s.source_type) && <span className="onair-source-src">{s.source || s.source_type}</span>}
-              <span className="onair-source-go">{s.status === 'armed' ? 'Armed' : 'Start'}<Icon name="arrowRight" size={11} /></span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function JobQueueTable({ jobs }) {
-  return (
-    <div className="job-table">
-      <div className="job-table-head">
-        <span>Job</span><span>Asset</span><span>Node</span><span>Progress</span><span>ETA</span>
-      </div>
-      {jobs.map(j => (
-        <div key={j.id} className="job-table-row">
-          <span className="jt-job">
-            <StatusDot status={j.status} />
-            <span className="mono">{j.kind}</span>
-          </span>
-          <span className="jt-asset" title={j.asset}>{j.asset}</span>
-          <span className="jt-node mono">{j.node}</span>
-          <span className="jt-progress">
-            {j.status === 'running'
-              ? <span className="jt-bar"><span style={{ width: Math.round(j.progress || 0) + '%' }} /></span>
-              : <JobChip status={j.status} error={j.error} />}
-          </span>
-          <span className="jt-eta mono">{j.status === 'running' ? (j.eta || '—') : '—'}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function JobChip({ status, error }) {
-  const map = { done: ['success', 'Done'], queued: ['neutral', 'Queued'], failed: ['danger', 'Failed'] };
-  const [cls, label] = map[status] || ['neutral', status];
-  return <span className={'badge ' + cls} title={error || undefined}>{label}</span>;
-}
-
-function AttentionRow({ a, navigate }) {
-  return (
-    <div className="attn-row">
-      <span className={'attn-sev ' + a.sev}><Icon name="alert" size={13} /></span>
-      <div className="attn-body">
-        <div className="attn-title">{a.title}</div>
-        <div className="attn-meta mono">{a.meta}</div>
-      </div>
-      <button className="btn subtle sm" onClick={() => navigate(a.to)}>{a.action}</button>
-    </div>
-  );
-}
-
-function NodeRow({ n }) {
-  const off = !(n.status === 'online' || n.online === true);
-  const nodeId = n.hostname || n.id || n.name || 'node';
-  const cpuPct = n.cpu_percent ?? n.cpu ?? n.cpu_usage ?? null;
-  const memUsed = n.memory_used_gb ?? n.mem ?? (n.mem_used_mb != null ? n.mem_used_mb / 1024 : null);
-  const memTotal = n.memory_total_gb ?? n.memTotal ?? n.mem_total_gb ?? null;
-  const memPct = (memUsed != null && memTotal)
-    ? Math.round((memUsed / memTotal) * 100)
-    : (memUsed != null ? Math.min(100, Math.round((memUsed / 32) * 100)) : null);
-  const gpus = n.gpus || n.devices || [];
-  const gpuCount = Array.isArray(gpus) ? gpus.length : 0;
-
-  return (
-    <div className={'node-row ' + (off ? 'offline' : '')}>
-      <div className="node-row-id">
-        <StatusDot status={off ? 'offline' : 'online'} />
-        <span className="node-name mono">{nodeId}</span>
-        {n.role && <span className={'badge ' + (n.role === 'primary' ? 'accent' : 'neutral') + ' node-role'}>{n.role}</span>}
-      </div>
-      {off ? (
-        <div className="node-row-off">offline</div>
-      ) : (
-        <div className="node-row-metrics">
-          {cpuPct != null
-            ? <NodeMetric label="CPU" pct={Math.round(cpuPct)} text={Math.round(cpuPct) + '%'} />
-            : <div className="node-metric"><span className="node-metric-label">CPU</span><span className="node-metric-text mono">·</span></div>}
-          {memPct != null
-            ? <NodeMetric label="RAM" pct={memPct} text={memUsed != null ? (memUsed < 1 ? Math.round(memUsed * 1024) + 'M' : memUsed.toFixed(1) + 'G') : memPct + '%'} />
-            : <div className="node-metric"><span className="node-metric-label">RAM</span><span className="node-metric-text mono">·</span></div>}
-          <div className="node-gpu mono" title={(Array.isArray(gpus) ? gpus.join(', ') : '') || 'no GPU'}>
-            {gpuCount ? gpuCount + '×GPU' : '—'}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function NodeMetric({ label, pct, text }) {
-  const color = pct > 85 ? 'var(--danger)' : pct > 60 ? 'var(--warning)' : 'var(--accent)';
-  return (
-    <div className="node-metric">
-      <span className="node-metric-label">{label}</span>
-      <span className="node-metric-bar"><span style={{ width: Math.max(2, pct) + '%', background: color }} /></span>
-      <span className="node-metric-text mono">{text}</span>
-    </div>
-  );
-}
-
-window.Home = Home;
-window.Dashboard = Dashboard;
+}
\ No newline at end of file