chore(ui+infra): retire stale recorder modal, clean VC-3 card, fix schema drift

GUI:
- Retire orphaned modal-new-recorder.jsx (old New Recorder dialog).
  Nothing triggered it; the clean inline RecorderConfigModal in
  screens-ingest.jsx is the single recorder editor now. Drop dead
  app.jsx/index.html wiring and the unused onNew prop.
- Recorder card sub-line shows VC-3/DNxHD MXF OP1a 4:2:2 in growing
  mode instead of the misleading hevc_nvenc native native.

Infra:
- Remove vestigial local db service from compose (app uses external
  Postgres via DATABASE_URL). Drops db depends_on refs + orphan
  postgres_data volume. compose config validates clean.
- Regenerate schema.sql from the live migrated DB (8 -> 29 tables).
  Old schema.sql predated 37 migrations (missing growing_codec,
  device_index, node_id, audio_offset_ms) so a fresh init silently
  rolled the UI back to XDCAM. Fresh init now matches current code.

docker-compose.yml

@@ -1,23 +1,4 @@
 services:
-  db:
-    image: postgres:16
-    environment:
-      POSTGRES_DB: ${POSTGRES_DB}
-      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
-    ports:
-      - "${PORT_DB:-5432}:5432"
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-      - ./services/mam-api/src/db/schema.sql:/docker-entrypoint-initdb.d/001-schema.sql:ro
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER}"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-    networks:
-      - wild-dragon
-
   queue:
     image: redis:7-alpine
     ports:
@@ -30,8 +11,6 @@ services:
   mam-api:
     build: ./services/mam-api
     depends_on:
-      db:
-        condition: service_healthy
       queue:
         condition: service_started
     ports:
@@ -119,7 +98,6 @@ services:
     privileged: true
     depends_on:
       - queue
-      - db
     environment:
       REDIS_URL: ${REDIS_URL}
       DATABASE_URL: ${DATABASE_URL}
@@ -152,7 +130,7 @@ services:
   worker-p400a:
     image: wild-dragon-worker-gpu:latest
     runtime: nvidia
-    depends_on: [queue, db, worker-p4]
+    depends_on: [queue, worker-p4]
     environment:
       REDIS_URL: ${REDIS_URL}
       DATABASE_URL: ${DATABASE_URL}
@@ -171,7 +149,7 @@ services:
   worker-p400b:
     image: wild-dragon-worker-gpu:latest
     runtime: nvidia
-    depends_on: [queue, db, worker-p4]
+    depends_on: [queue, worker-p4]
     environment:
       REDIS_URL: ${REDIS_URL}
       DATABASE_URL: ${DATABASE_URL}
@@ -210,7 +188,6 @@ services:
     image: wild-dragon-playout:latest
 
 volumes:
-  postgres_data:
   redis_data:
 
 networks:

services/web-ui/public/app.jsx

@@ -6,7 +6,6 @@ function App() {
   const [route, setRoute] = React.useState('home');
   const [openAsset, setOpenAsset] = React.useState(null);
   const [openProject, setOpenProject] = React.useState(null);
-  const [showNewRecorder, setShowNewRecorder] = React.useState(false);
   const [dataReady, setDataReady] = React.useState(false);
   const [loadError, setLoadError] = React.useState(null);
   const [sidebarCollapsed, setSidebarCollapsed] = React.useState(() => {
@@ -126,7 +125,7 @@ function App() {
       case 'library':   content = <Library navigate={navigate} onOpenAsset={setOpenAsset} openProject={openProject} onClearProject={() => setOpenProject(null)} onOpenProject={openProjectFromAnywhere} />; break;
       case 'projects':  content = <Projects navigate={navigate} onOpenProject={openProjectFromAnywhere} />; break;
       case 'upload':    content = <Upload navigate={navigate} />; break;
-      case 'recorders': content = <Recorders navigate={navigate} onNew={() => setShowNewRecorder(true)} />; break;
+      case 'recorders': content = <Recorders navigate={navigate} />; break;
       case 'schedule':  content = <Schedule navigate={navigate} />; break;
       case 'youtube':   content = <YouTubeImport navigate={navigate} />; break;
       case 'capture':   content = <Capture navigate={navigate} />; break;
@@ -162,7 +161,6 @@ function App() {
         )}
         {content}
       </div>
-      {showNewRecorder && <NewRecorderModal open={showNewRecorder} onClose={() => setShowNewRecorder(false)} />}
     </div>
   );
 }

services/web-ui/public/index.html

@@ -49,7 +49,6 @@
 <script src="dist/screens-editor.js"></script>
 <script src="dist/screens-admin.js"></script>
 <script src="dist/screens-playout.js"></script>
-<script src="dist/modal-new-recorder.js"></script>
 <script src="dist/app.js"></script>
 </body>
 </html>

services/web-ui/public/modal-new-recorder.jsx

@@ -1,604 +0,0 @@
-// modal-new-recorder.jsx - New Recorder dialog (SRT / RTMP / SDI / Deltacast)
-
-/**
- * DevicePortPicker - groups a flat per-port API response by node_id and
- * renders one button per actual port. Replaces the old code that iterated
- * over entries and synthesised port counts, which caused duplicate groups.
- *
- * props:
- *   ports        - flat array from /cluster/devices/blackmagic or /deltacast
- *                  each entry: { node_id, hostname, model, index, device, present? }
- *   selectedIdx  - currently selected device_index
- *   selectedNode - currently selected node_id
- *   onSelect(idx, nodeId)
- *   portLabel    - e.g. "SDI" or "Port"
- *   showTestBadge - show TEST CARD badge when present===false
- */
-function DevicePortPicker({ ports, selectedIdx, selectedNode, onSelect, portLabel = 'Port', showTestBadge = false }) {
-  // Group by node_id (stable - one group per physical node)
-  const groups = React.useMemo(() => {
-    const map = new Map();
-    for (const p of ports) {
-      const key = p.node_id || p.hostname || 'unknown';
-      if (!map.has(key)) map.set(key, { nodeId: p.node_id || p.hostname || '', hostname: p.hostname || key, model: p.model || '', ports: [] });
-      map.get(key).ports.push(p);
-    }
-    // Sort ports within each group by index
-    for (const g of map.values()) g.ports.sort((a, b) => a.index - b.index);
-    return Array.from(map.values());
-  }, [ports]);
-
-  return (
-    <div className="sdi-port-mini">
-      {groups.map(group => (
-        <div key={group.nodeId} style={{ marginBottom: groups.length > 1 ? 12 : 4 }}>
-          {/* Node header: only show when multiple groups, or always for clarity */}
-          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--text-3)', textTransform: 'uppercase', padding: '0 0 6px' }}>
-            {group.model ? group.model.toUpperCase() + ' · ' : ''}{group.hostname}
-          </div>
-          {group.ports.map(port => {
-            const active = selectedIdx === port.index && selectedNode === group.nodeId;
-            return (
-              <button key={port.index}
-                className={`sdi-mini-port${active ? ' active' : ''}`}
-                onClick={() => onSelect(port.index, group.nodeId)}>
-                <span className="sdi-mini-radio"><span className="sdi-mini-radio-dot" /></span>
-                <span style={{ fontSize: 12, fontWeight: 600 }}>
-                  {portLabel} {port.index + 1}
-                  {showTestBadge && port.present === false && (
-                    <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', color: 'var(--accent)', background: 'var(--accent-soft)', borderRadius: 3, padding: '1px 5px', marginLeft: 7 }}>
-                      TEST CARD
-                    </span>
-                  )}
-                </span>
-                <span style={{ fontSize: 11, color: 'var(--text-3)', marginLeft: 'auto', fontFamily: 'var(--font-mono)' }}>
-                  {port.device ? port.device.split('/').pop() : `index ${port.index}`}
-                </span>
-              </button>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-/**
- * ManualDevicePicker - fallback when no devices detected. Lets the operator
- * pick node + index from dropdowns.
- */
-function ManualDevicePicker({ nodes, nodeId, deviceIdx, portLabel, portCount, onNodeChange, onIdxChange, emptyNote }) {
-  return (
-    <div style={{ padding: '4px 0' }}>
-      <div style={{ fontSize: 12, color: 'var(--text-3)', marginBottom: 10 }}>
-        {emptyNote || `No ${portLabel} devices auto-detected. Configure manually:`}
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-        <div className="field">
-          <label className="field-label">Capture node</label>
-          <select className="field-input" value={nodeId}
-            onChange={e => onNodeChange(e.target.value)} style={{ appearance: 'auto' }}>
-            {nodes.length === 0
-              ? <option value="">No cluster nodes</option>
-              : nodes.map(n => {
-                  const id = n.id || n.hostname || n.name || '';
-                  return <option key={id} value={id}>{n.hostname || n.name || id}</option>;
-                })}
-          </select>
-        </div>
-        <div className="field">
-          <label className="field-label">{portLabel} index</label>
-          <select className="field-input" value={deviceIdx}
-            onChange={e => onIdxChange(Number(e.target.value))} style={{ appearance: 'auto' }}>
-            {Array.from({ length: portCount }, (_, i) =>
-              <option key={i} value={i}>{portLabel} {i + 1} (index {i})</option>)}
-          </select>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ProbeResult({ result }) {
-  if (!result.ok) {
-    return (
-      <div style={{ marginTop: 6, padding: '8px 10px', background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 5, fontSize: 11.5, color: 'var(--danger)' }}>
-        Probe failed: {result.error}
-      </div>
-    );
-  }
-  const d = result.data || {};
-  const entries = Object.entries(d).filter(([, v]) => v !== null && typeof v !== 'object');
-  if (entries.length === 0) {
-    return (
-      <div style={{ marginTop: 6, padding: '8px 10px', background: 'var(--success-soft)', border: '1px solid var(--success)', borderRadius: 5, fontSize: 11.5, color: 'var(--success)' }}>
-        ✓ Source reachable
-      </div>
-    );
-  }
-  return (
-    <div style={{ marginTop: 6, padding: '10px 12px', background: 'var(--bg-2)', border: '1px solid var(--success)', borderRadius: 5, fontSize: 11.5 }}>
-      {entries.map(([k, v]) => (
-        <div key={k} style={{ display: 'flex', gap: 8, padding: '2px 0' }}>
-          <span style={{ color: 'var(--text-3)', minWidth: 100, flexShrink: 0 }}>{k}</span>
-          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>{String(v)}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function NewRecorderModal({ open, onClose }) {
-  const PROJECTS = window.ZAMPP_DATA?.PROJECTS || [];
-  const NODES    = window.ZAMPP_DATA?.NODES    || [];
-  const [name, setName] = React.useState('');
-  const [sourceType, setSourceType] = React.useState('SRT');
-  const [srtUrl, setSrtUrl] = React.useState('srt://10.0.4.18:4200');
-  const [rtmpUrl, setRtmpUrl] = React.useState('rtmp://stream.local/live/cam_a');
-  const [sdiDeviceIdx, setSdiDeviceIdx] = React.useState(0);
-  const [sdiNodeId, setSdiNodeId] = React.useState(() => {
-    const n = NODES[0];
-    return n ? (n.id || n.hostname || '') : '';
-  });
-  const [sdiDevices, setSdiDevices] = React.useState(null);
-  const [dcDeviceIdx, setDcDeviceIdx] = React.useState(0);
-  const [dcNodeId, setDcNodeId] = React.useState(() => {
-    const n = NODES[0];
-    return n ? (n.id || n.hostname || '') : '';
-  });
-  const [dcDevices, setDcDevices] = React.useState(null);
-  const [recTab, setRecTab] = React.useState('video');
-  // All-Intra HEVC (NVENC) is the default master — GPU-encoded, growing-file
-  // capable in fragmented MOV. ProRes stays selectable for 4:2:2 mezzanine.
-  const [recCodec, setRecCodec] = React.useState('hevc_nvenc');
-  // Custom target bitrate in Mbps for bitrate-controlled codecs (NVENC / x264 /
-  // x265 / DNxHD). ProRes ignores bitrate (quality is profile-driven).
-  const [recBitrate, setRecBitrate] = React.useState('25');
-  // Container is derived from the codec, not manually chosen: HEVC/ProRes/DNxHR
-  // → MOV (fragmented, growing-capable); H.264 → MP4.
-  const recContainer = (recCodec === 'h264' || recCodec === 'h264_nvenc' || recCodec === 'libx264') ? 'mp4' : 'mov';
-  // Codecs whose bitrate is operator-controlled (everything except ProRes).
-  const BITRATE_CODECS = new Set(['hevc_nvenc', 'h264_nvenc', 'libx264', 'libx265', 'dnxhd', 'dnxhr_hq']);
-  const codecUsesBitrate = BITRATE_CODECS.has(recCodec);
-  const [proxyOn, setProxyOn] = React.useState(true);
-  const [growingOn, setGrowingOn] = React.useState(false);
-  // Growing master is VC-3 / DNxHD in MXF OP1a (ffmpeg-direct, Premiere-native
-  // edit-while-record — matches vMix). Two bitrates: 90 Mbps (default, lighter)
-  // or 220 Mbps (highest quality). Both 8-bit 4:2:2 @ 1080p59.94.
-  const [growingCodec, setGrowingCodec] = React.useState('vc3_90');
-  const showBitrate = codecUsesBitrate;
-  const [projectId, setProjectId] = React.useState(PROJECTS[0]?.id || '');
-  const [submitting, setSubmitting] = React.useState(false);
-  const [submitErr, setSubmitErr] = React.useState(null);
-  const [probing, setProbing] = React.useState(false);
-  const [probeResult, setProbeResult] = React.useState(null);
-
-  React.useEffect(() => {
-    if (sourceType !== 'SDI' || sdiDevices !== null) return;
-    window.ZAMPP_API.fetch('/cluster/devices/blackmagic')
-      .then(d => setSdiDevices(Array.isArray(d) ? d : []))
-      .catch(() => setSdiDevices([]));
-  }, [sourceType]);
-
-  React.useEffect(() => {
-    if (sourceType !== 'DELTACAST' || dcDevices !== null) return;
-    window.ZAMPP_API.fetch('/cluster/devices/deltacast')
-      .then(d => setDcDevices(Array.isArray(d) ? d : []))
-      .catch(() => setDcDevices([]));
-  }, [sourceType]);
-
-  React.useEffect(() => { setProbeResult(null); }, [sourceType, srtUrl, rtmpUrl]);
-
-  const handleProbe = () => {
-    setProbing(true);
-    setProbeResult(null);
-    const body = sourceType === 'SRT'
-      ? { source_type: 'srt', url: srtUrl }
-      : { source_type: 'rtmp', url: rtmpUrl };
-    window.ZAMPP_API.fetch('/recorders/probe', { method: 'POST', body: JSON.stringify(body) })
-      .then(r => { setProbing(false); setProbeResult({ ok: true, data: r }); })
-      .catch(e => { setProbing(false); setProbeResult({ ok: false, error: e.message }); });
-  };
-
-  const handleCreate = () => {
-    if (!name.trim()) { setSubmitErr('Recorder name is required.'); return; }
-    if (sourceType === 'SDI' && !sdiNodeId) { setSubmitErr('Select a capture node for SDI.'); return; }
-    if (sourceType === 'DELTACAST' && !dcNodeId) { setSubmitErr('Select a capture node for Deltacast.'); return; }
-    setSubmitting(true);
-    setSubmitErr(null);
-
-    const body = {
-      name: name.trim(),
-      source_type: sourceType.toLowerCase(),
-      project_id: projectId || undefined,
-      generate_proxy: proxyOn,
-      growing_enabled: growingOn,
-      growing_codec: growingOn ? growingCodec : undefined,
-      recording_codec: recCodec,
-      recording_container: recContainer,
-      // Framerate + resolution are auto-detected from the source signal/stream.
-      recording_framerate: '',          // empty = match source
-      recording_resolution: 'native',
-    };
-    // Custom bitrate applies to non-growing bitrate-controlled codecs only.
-    // VC-3 growing bitrate is selected via the growing codec (vc3_90 / vc3_220).
-    if (codecUsesBitrate && !growingOn && recBitrate) {
-      body.recording_video_bitrate = `${recBitrate}M`;
-    }
-
-    if (sourceType === 'SRT') {
-      body.source_config = { url: srtUrl };
-    } else if (sourceType === 'RTMP') {
-      body.source_config = { url: rtmpUrl };
-    } else if (sourceType === 'DELTACAST') {
-      // One Deltacast board (index 0) exposes 8 channels. The picker's selected
-      // index IS the capture channel, so persist it as source_config.port; the
-      // capture sidecar maps that to the bridge's --port. device_index is kept
-      // for backward-compatible display/fallback.
-      body.source_config = { port: dcDeviceIdx };
-      body.device_index = dcDeviceIdx;
-      body.node_id = dcNodeId || undefined;
-    } else {
-      // SDI (DeckLink): device_index and node_id are top-level fields
-      body.source_config = {};
-      body.device_index = sdiDeviceIdx;
-      body.node_id = sdiNodeId || undefined;
-    }
-
-    window.ZAMPP_API.fetch('/recorders', { method: 'POST', body: JSON.stringify(body) })
-      .then(() => {
-        setSubmitting(false);
-        // Recorders list listens for this and re-fetches; otherwise the
-        // operator has to wait for the next 10s poll tick to see the new row.
-        window.dispatchEvent(new CustomEvent('df:recorders-changed'));
-        onClose();
-      })
-      .catch(e => { setSubmitting(false); setSubmitErr(e.message || 'Failed to create recorder'); });
-  };
-
-  if (!open) return null;
-
-  return (
-    <div className="modal-backdrop" onClick={onClose}>
-      <div className="modal" onClick={e => e.stopPropagation()}>
-        <div className="modal-head">
-          <div>
-            <div style={{ fontSize: 15, fontWeight: 600 }}>New recorder</div>
-            <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>Configure source, codec, and destination</div>
-          </div>
-          <button className="icon-btn" aria-label="Close" onClick={onClose}><Icon name="x" /></button>
-        </div>
-
-        <div className="modal-body">
-          <div className="field">
-            <label className="field-label">Recorder name</label>
-            <input className="field-input" placeholder="e.g. Studio A Stage Cam"
-              value={name} onChange={e => setName(e.target.value)} />
-          </div>
-
-          <div className="field">
-            <label className="field-label">Source type</label>
-            <div className="source-type-grid">
-              {[
-                { id: 'SRT',       label: 'SRT',       desc: 'Secure Reliable Transport · pull caller', icon: 'signal' },
-                { id: 'RTMP',      label: 'RTMP',      desc: 'Real-Time Messaging Protocol',             icon: 'globe' },
-                { id: 'SDI',       label: 'SDI',        desc: 'Blackmagic DeckLink hardware',            icon: 'video' },
-                { id: 'DELTACAST', label: 'Deltacast',  desc: 'Deltacast VideoMaster SDI',               icon: 'video' },
-              ].map(t => (
-                <button key={t.id}
-                  className={`source-type-card ${sourceType === t.id ? 'active' : ''}`}
-                  onClick={() => setSourceType(t.id)}>
-                  <div className="source-type-icon"><Icon name={t.icon} size={16} /></div>
-                  <div>
-                    <div style={{ fontWeight: 600, fontSize: 13 }}>{t.label}</div>
-                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{t.desc}</div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {sourceType === 'SRT' && (
-            <div className="field">
-              <label className="field-label">Source URL</label>
-              <div style={{ display: 'flex', gap: 6 }}>
-                <input className="field-input mono" placeholder="srt://192.168.1.100:4200"
-                  value={srtUrl} onChange={e => setSrtUrl(e.target.value)} style={{ flex: 1 }} />
-                <button className="btn ghost sm" onClick={handleProbe} disabled={probing}
-                  style={{ flexShrink: 0, minWidth: 64 }}>
-                  {probing ? '…' : 'Probe'}
-                </button>
-              </div>
-              <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>
-                Recorder connects out to this URL (caller mode).
-              </div>
-              {probeResult && <ProbeResult result={probeResult} />}
-            </div>
-          )}
-
-          {sourceType === 'RTMP' && (
-            <div className="field">
-              <label className="field-label">Source URL</label>
-              <div style={{ display: 'flex', gap: 6 }}>
-                <input className="field-input mono" placeholder="rtmp://server/live/streamkey"
-                  value={rtmpUrl} onChange={e => setRtmpUrl(e.target.value)} style={{ flex: 1 }} />
-                <button className="btn ghost sm" onClick={handleProbe} disabled={probing}
-                  style={{ flexShrink: 0, minWidth: 64 }}>
-                  {probing ? '…' : 'Probe'}
-                </button>
-              </div>
-              <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>
-                Recorder pulls this RTMP stream.
-              </div>
-              {probeResult && <ProbeResult result={probeResult} />}
-            </div>
-          )}
-
-          {sourceType === 'SDI' && (
-            <div className="field">
-              <label className="field-label">Capture device</label>
-              {sdiDevices === null && (
-                <div style={{ padding: '10px 0', color: 'var(--text-3)', fontSize: 12 }}>Detecting DeckLink devices…</div>
-              )}
-              {sdiDevices !== null && sdiDevices.length > 0 && (
-                <DevicePortPicker
-                  ports={sdiDevices}
-                  selectedIdx={sdiDeviceIdx}
-                  selectedNode={sdiNodeId}
-                  onSelect={(idx, nodeId) => { setSdiDeviceIdx(idx); setSdiNodeId(nodeId); }}
-                  portLabel="SDI"
-                />
-              )}
-              {sdiDevices !== null && sdiDevices.length === 0 && (
-                <ManualDevicePicker
-                  nodes={NODES}
-                  nodeId={sdiNodeId}
-                  deviceIdx={sdiDeviceIdx}
-                  portLabel="SDI"
-                  portCount={4}
-                  onNodeChange={setSdiNodeId}
-                  onIdxChange={setSdiDeviceIdx}
-                />
-              )}
-            </div>
-          )}
-
-          {sourceType === 'DELTACAST' && (
-            <div className="field">
-              <label className="field-label">Capture device</label>
-              {dcDevices === null && (
-                <div style={{ padding: '10px 0', color: 'var(--text-3)', fontSize: 12 }}>Detecting Deltacast devices…</div>
-              )}
-              {dcDevices !== null && dcDevices.length > 0 && (
-                <DevicePortPicker
-                  ports={dcDevices}
-                  selectedIdx={dcDeviceIdx}
-                  selectedNode={dcNodeId}
-                  onSelect={(idx, nodeId) => { setDcDeviceIdx(idx); setDcNodeId(nodeId); }}
-                  portLabel="Port"
-                  showTestBadge
-                />
-              )}
-              {dcDevices !== null && dcDevices.length === 0 && (
-                <ManualDevicePicker
-                  nodes={NODES}
-                  nodeId={dcNodeId}
-                  deviceIdx={dcDeviceIdx}
-                  portLabel="Port"
-                  portCount={8}
-                  onNodeChange={setDcNodeId}
-                  onIdxChange={setDcDeviceIdx}
-                  emptyNote="No Deltacast devices detected. Configure manually (test-card mode):"
-                />
-              )}
-            </div>
-          )}
-
-          <div className="modal-section">
-            <div className="modal-section-head">
-              <span>Master recording</span>
-              <span style={{ flex: 1 }} />
-              <div className="tab-group">
-                {['video', 'audio', 'container'].map(t => (
-                  <button key={t} className={recTab === t ? 'active' : ''} onClick={() => setRecTab(t)}>
-                    {t[0].toUpperCase() + t.slice(1)}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="modal-section-body">
-              {recTab === 'video' && (
-                <>
-                {/* Codec presets — one click fills codec + bitrate with a known-good
-                    combo that passes the server-side validateRecorderConfig guard.
-                    Container is derived from the codec (HEVC/ProRes/DNxHR → MOV,
-                    H.264 → MP4), and master audio is always PCM (valid in MOV). */}
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
-                  {[
-                    { id: 'hevc',  label: 'HEVC Master (MOV)',         codec: 'hevc_nvenc', bitrate: '25' },
-                    { id: 'h264',  label: 'H.264 Proxy-friendly (MP4)', codec: 'h264_nvenc', bitrate: '25' },
-                  ].map(p => (
-                    <button key={p.id}
-                      className={`btn ghost sm${recCodec === p.codec ? ' active' : ''}`}
-                      onClick={() => { setRecCodec(p.codec); setRecBitrate(p.bitrate); }}
-                      style={{ flexShrink: 0 }}>
-                      {p.label}
-                    </button>
-                  ))}
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-                  <div className="field">
-                    <label className="field-label">
-                      {growingOn ? 'Growing master codec' : 'Video codec'}
-                      {growingOn && <span style={{ marginLeft: 6, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', color: 'var(--text-3)' }}>· PREMIERE-NATIVE</span>}
-                    </label>
-                    {growingOn ? (
-                      <div style={{ display: 'flex', gap: 6 }}>
-                        {[
-                          { v: 'vc3_90',  big: '90',  note: 'Lighter · default' },
-                          { v: 'vc3_220', big: '220', note: 'Highest quality' },
-                        ].map(opt => {
-                          const active = growingCodec === opt.v;
-                          return (
-                            <button key={opt.v} type="button"
-                              onClick={() => setGrowingCodec(opt.v)}
-                              style={{
-                                flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
-                                padding: '8px 12px', borderRadius: 8, cursor: 'pointer',
-                                border: active ? '1px solid var(--accent, #4a9eff)' : '1px solid var(--border, #333)',
-                                background: active ? 'var(--accent-soft, rgba(74,158,255,0.12))' : 'transparent',
-                              }}>
-                              <span style={{ fontSize: 16, fontWeight: 700, lineHeight: 1 }}>
-                                {opt.big}<span style={{ fontSize: 10, fontWeight: 500, marginLeft: 3, color: 'var(--text-3)' }}>Mbps</span>
-                              </span>
-                              <span style={{ fontSize: 10.5, color: active ? 'var(--accent, #4a9eff)' : 'var(--text-3)', marginTop: 3 }}>{opt.note}</span>
-                            </button>
-                          );
-                        })}
-                      </div>
-                    ) : (
-                      <select className="field-input" value={recCodec}
-                        onChange={e => setRecCodec(e.target.value)}
-                        style={{ appearance: 'auto' }}>
-                        <option value="hevc_nvenc">HEVC (NVENC, GPU)</option>
-                        <option value="h264_nvenc">H.264 (NVENC, GPU)</option>
-                      </select>
-                    )}
-                  </div>
-                  {showBitrate ? (
-                    <div className="field">
-                      <label className="field-label">Target bitrate (Mbps)</label>
-                      <input
-                        className="field-input"
-                        type="number" min="1" max="400" step="1"
-                        value={recBitrate}
-                        onChange={e => setRecBitrate(e.target.value)}
-                      />
-                    </div>
-                  ) : (
-                    <Field label="Bitrate" value="Quality-based (profile)" select />
-                  )}
-                  <Field label="Resolution" value="Auto (from source)" select />
-                  <Field label="Framerate" value="Auto (from source)" select />
-                  {/* #3: warn when the configured bitrate exceeds the probed source
-                      bitrate — re-encoding above source adds storage, not quality. */}
-                  {codecUsesBitrate && (() => {
-                    const d = probeResult && probeResult.ok ? (probeResult.data || {}) : null;
-                    const raw = d && (d.bitrate ?? d.bit_rate ?? d.video_bitrate ?? (d.video && d.video.bit_rate));
-                    const srcMbps = raw ? (Number(raw) > 100000 ? Number(raw) / 1e6 : Number(raw)) : null;
-                    const cfg = parseFloat(recBitrate);
-                    if (srcMbps && cfg && cfg > srcMbps * 1.05) {
-                      return (
-                        <div style={{ gridColumn: '1 / -1', fontSize: 11.5, color: 'var(--warn, #d9a441)', border: '1px solid var(--warn, #d9a441)', borderRadius: 6, padding: '8px 10px', background: 'rgba(217,164,65,0.08)' }}>
-                          ⚠ Target {cfg} Mbps exceeds the source stream (~{srcMbps.toFixed(1)} Mbps). Encoding above the source bitrate increases file size without adding quality.
-                        </div>
-                      );
-                    }
-                    return null;
-                  })()}
-                </div>
-                </>
-              )}
-              {recTab === 'audio' && (
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-                  <Field label="Audio codec" value="PCM" select />
-                  <Field label="Sample rate" value="48 kHz" select />
-                  <Field label="Channels" value="2.0 stereo" select />
-                  <Field label="Bit depth" value="24-bit" select />
-                </div>
-              )}
-              {recTab === 'container' && (
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-                  <Field label="Container"
-                    value={growingOn ? 'MXF OP1a (growing, auto)' : (recContainer === 'mp4' ? 'MP4 (auto)' : 'Fragmented MOV (auto)')} select />
-                  <Field label="Growing-file"
-                    value={growingOn ? 'On (edit-while-record)' : (recContainer === 'mov' ? 'Supported (edit-while-record)' : 'No')} select />
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="modal-toggle-row">
-            <label className="switch">
-              <input type="checkbox" checked={proxyOn} onChange={e => setProxyOn(e.target.checked)} />
-              <span className="switch-track"><span className="switch-knob" /></span>
-            </label>
-            <div>
-              <div style={{ fontWeight: 500, fontSize: 13 }}>Generate proxy</div>
-              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>
-                SDI sources record proxy in parallel. Network sources generate proxy after stop.
-              </div>
-            </div>
-          </div>
-
-          <div className="modal-toggle-row">
-            <label className="switch">
-              <input type="checkbox" checked={growingOn} onChange={e => setGrowingOn(e.target.checked)} />
-              <span className="switch-track"><span className="switch-knob" /></span>
-            </label>
-            <div>
-              <div style={{ fontWeight: 500, fontSize: 13 }}>Growing-files mode</div>
-              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>
-                Write the live master to the SMB share so editors can cut while it's still recording.
-                Requires the SMB share to be configured in Settings → Storage.
-              </div>
-              {growingOn && (
-                <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 6 }}>
-                  Records VC-3 / DNxHD (8-bit 4:2:2) in MXF OP1a — Premiere-native edit-while-record,
-                  imports and grows live in Premiere. {growingCodec === 'vc3_220' ? '~220 Mbps (highest quality).' : '~90 Mbps (lighter storage, default).'}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {proxyOn && (
-            <div className="modal-section">
-              <div className="modal-section-head"><span>Proxy</span></div>
-              <div className="modal-section-body">
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
-                  {['H.264', '2 Mbps', 'MP4', '1920×1080', 'AAC 128 kbps'].map(tag => (
-                    <span key={tag} className="mono" style={{ background: 'var(--bg-3)', borderRadius: 4, padding: '2px 8px', fontSize: 12 }}>{tag}</span>
-                  ))}
-                </div>
-                <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 6 }}>Fixed proxy profile. Not configurable.</div>
-              </div>
-            </div>
-          )}
-
-          <div className="modal-section">
-            <div className="modal-section-head"><span>Destination</span></div>
-            <div className="modal-section-body">
-              <div className="field">
-                <label className="field-label">Project</label>
-                <select className="field-input" value={projectId}
-                  onChange={e => setProjectId(e.target.value)} style={{ appearance: 'auto' }}>
-                  {PROJECTS.length === 0
-                    ? <option value="">No projects</option>
-                    : PROJECTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
-                </select>
-              </div>
-            </div>
-          </div>
-
-          {submitErr && (
-            <div style={{
-              padding: '10px 14px', background: 'var(--danger-soft)',
-              border: '1px solid var(--danger)', borderRadius: 6,
-              fontSize: 12.5, color: 'var(--danger)', marginTop: 4,
-            }}>{submitErr}</div>
-          )}
-        </div>
-
-        <div className="modal-foot">
-          <button className="btn ghost" onClick={onClose}>Cancel</button>
-          <span style={{ flex: 1 }} />
-          <button className="btn primary" onClick={handleCreate} disabled={submitting}>
-            {submitting ? 'Creating…' : 'Create recorder'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-window.NewRecorderModal = NewRecorderModal;

services/web-ui/public/screens-ingest.jsx

@@ -878,7 +878,7 @@ function _nodeMeta(nodeId) {
   return { hostname: n.hostname || (nodeId ? nodeId.slice(0, 8) : 'node'), online };
 }
 
-function Recorders({ navigate, onNew }) {
+function Recorders({ navigate }) {
   const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA?.RECORDERS || []);
   // Per-recorder config editor (codec / growing / label). Null = closed.
   const [configRecorder, setConfigRecorder] = React.useState(null);
@@ -1177,9 +1177,19 @@ function RecorderRow({ recorder: initialRecorder, onRefresh, onConfigure, nodeOn
            )}
         </div>
         <div className="recorder-sub">
-          <span>{recorder.codec}</span><span className="recorder-sub-sep">·</span>
-          <span>{recorder.res}</span><span className="recorder-sub-sep">·</span>
-          <span>{recorder.framerate}</span>
+          {recorder.growing ? (
+            <>
+              <span>VC-3/DNxHD</span><span className="recorder-sub-sep">·</span>
+              <span>MXF OP1a</span><span className="recorder-sub-sep">·</span>
+              <span>4:2:2</span>
+            </>
+          ) : (
+            <>
+              <span>{recorder.codec}</span><span className="recorder-sub-sep">·</span>
+              <span>{recorder.res}</span><span className="recorder-sub-sep">·</span>
+              <span>{recorder.framerate}</span>
+            </>
+          )}
         </div>
         {err && <div style={{ marginTop: 4, fontSize: 11, color: 'var(--danger)' }}>{err}</div>}
         {liveStatus?.lastError && isRec && (