diff --git a/DESIGN.md b/DESIGN.md
index 95aad4d..be9280f 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -90,6 +90,16 @@ Never use `gradient text` (impeccable absolute ban). Emphasis via weight and siz
- Panels (`.panel`): `--bg-1` + 1px `--border` + `--r-lg`. Use for grouped lists, not for every section.
- Do NOT nest panels.
+### Page header
+
+Standard screens use `.page > .page-header > h1`. Three screens are documented exceptions because they need full-bleed layouts and their own top-chrome:
+
+- **Home** uses `.launcher` (lobby pattern: hero logo + tile grid + status pip).
+- **Library** uses `.library-layout` (dual-pane rail + main). The h1 sits inside `.library-toolbar` as `.toolbar-title`.
+- **Editor** uses `.editor-shell` (NLE with timeline + monitors). The beta banner doubles as its top chrome.
+
+All other screens should render `
…
…
…
` for consistent IA and screen-reader hierarchy.
+
## Shadow
Two tokens, used sparingly:
diff --git a/services/web-ui/public/app.jsx b/services/web-ui/public/app.jsx
index 93c7040..f713b8b 100644
--- a/services/web-ui/public/app.jsx
+++ b/services/web-ui/public/app.jsx
@@ -1,4 +1,4 @@
-// app.jsx — main shell
+// app.jsx - main shell
const ACCENT = '#5B7CFA';
@@ -40,6 +40,14 @@ function App() {
}, []);
const navigate = (id) => { setOpenAsset(null); setRoute(id); };
+
+ // Window-level nav event so deeply nested components (like the Tokens
+ // "see the parody" link) can route without prop drilling.
+ React.useEffect(() => {
+ const handler = (e) => { if (e && e.detail) navigate(e.detail); };
+ window.addEventListener('df:nav', handler);
+ return () => window.removeEventListener('df:nav', handler);
+ }, []);
const openProjectFromAnywhere = (p) => { setOpenAsset(null); setOpenProject(p); setRoute('library'); };
const crumbs = React.useMemo(() => {
@@ -108,6 +116,7 @@ function App() {
case 'editor': content = ; break;
case 'users': content = ; break;
case 'tokens': content = ; break;
+ case 'tokens-parody': content = ; break;
case 'containers':content = ; break;
case 'cluster': content = ; break;
case 'settings': content = ; break;
@@ -115,7 +124,7 @@ function App() {
}
}
- // Home (launcher) suppresses the topbar — it's a full-bleed landing page.
+ // Home (launcher) suppresses the topbar - it's a full-bleed landing page.
const hideTopbar = !openAsset && route === 'home';
return (
diff --git a/services/web-ui/public/auth-gate.jsx b/services/web-ui/public/auth-gate.jsx
index 2e9a0ca..88d884b 100644
--- a/services/web-ui/public/auth-gate.jsx
+++ b/services/web-ui/public/auth-gate.jsx
@@ -1,10 +1,10 @@
-// auth-gate.jsx — owns the "logged in or not" state.
+// auth-gate.jsx - owns the "logged in or not" state.
//
// The SPA boots into , which calls GET /auth/me. On 401 it then
// calls GET /auth/setup-required and renders or
// (defined in screens-auth.jsx, Task 16). On 200 it renders the real .
//
-// This component is the SINGLE source of truth for the auth check — no other
+// This component is the SINGLE source of truth for the auth check - no other
// component should redirect to a login page or wipe data on 401. Other code
// surfaces auth failure by calling window.AuthGate.bounce(), which re-mounts
// the gate so the next /auth/me request decides what to do.
diff --git a/services/web-ui/public/data.jsx b/services/web-ui/public/data.jsx
index 883cea4..5102be7 100644
--- a/services/web-ui/public/data.jsx
+++ b/services/web-ui/public/data.jsx
@@ -1,4 +1,4 @@
-// data.jsx — API client; populates window.ZAMPP_DATA from real endpoints
+// data.jsx - API client; populates window.ZAMPP_DATA from real endpoints
const API = '/api/v1';
window.ZAMPP_API_PREFIX = API; // single source of truth (#115)
@@ -22,14 +22,14 @@ window.ZAMPP_API_PREFIX = API; // single source of truth (#115)
})();
// Premiere panel releases embedded in this deployment. Bumping the version
-// here is the single source of truth — both the Editor download buttons and
+// here is the single source of truth - both the Editor download buttons and
// the Settings → Capture SDKs page read from this list (#125).
window.PREMIERE_RELEASES = [
{
version: '1.2.0',
zxp: '/downloads/dragonflight-premiere-panel-1.2.0.zxp',
installer: null,
- notes: 'Latest — design system refresh, aligned panel UI with web-ui tokens',
+ notes: 'Latest: design system refresh, aligned panel UI with web-ui tokens',
latest: true,
},
{
@@ -86,7 +86,7 @@ async function apiFetch(path, opts = {}) {
}
function fmtDuration(ms) {
- if (!ms) return '—';
+ if (!ms) return '·';
const s = Math.round(ms / 1000);
const h = Math.floor(s / 3600);
const m = Math.floor((s % 3600) / 60);
@@ -96,7 +96,7 @@ function fmtDuration(ms) {
}
function fmtSize(bytes) {
- if (!bytes) return '—';
+ if (!bytes) return '·';
if (bytes >= 1e12) return (bytes / 1e12).toFixed(1) + ' TB';
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
if (bytes >= 1e6) return Math.round(bytes / 1e6) + ' MB';
@@ -104,7 +104,7 @@ function fmtSize(bytes) {
}
function fmtRelative(iso) {
- if (!iso) return '—';
+ if (!iso) return '·';
const diff = (Date.now() - new Date(iso)) / 1000;
if (diff < 60) return 'just now';
if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
@@ -122,7 +122,7 @@ function normalizeAsset(a, projectMap) {
type: a.media_type || 'video',
duration: fmtDuration(a.duration_ms),
size: fmtSize(a.file_size),
- res: a.resolution || '—',
+ res: a.resolution || '·',
updated: fmtRelative(a.updated_at),
project: (projectMap && projectMap[a.project_id]) || '',
comments: 0,
@@ -133,7 +133,7 @@ function normalizeAsset(a, projectMap) {
}
function normalizeRecorder(r) {
- let elapsed = '—';
+ let elapsed = '·';
if (r.status === 'recording' && r.started_at) {
const s = Math.floor((Date.now() - new Date(r.started_at)) / 1000);
elapsed = String(Math.floor(s / 3600)).padStart(2, '0') + ':' +
@@ -143,13 +143,13 @@ function normalizeRecorder(r) {
const cfg = r.source_config || {};
return {
...r,
- source: r.source_type || '—',
- url: cfg.url || cfg.address || cfg.srt_url || cfg.rtmp_url || r.source_type || '—',
- codec: r.recording_codec || '—',
- res: r.recording_resolution || '—',
+ source: r.source_type || '·',
+ url: cfg.url || cfg.address || cfg.srt_url || cfg.rtmp_url || r.source_type || '·',
+ codec: r.recording_codec || '·',
+ res: r.recording_resolution || '·',
node: r.node_id ? r.node_id.slice(0, 8) : 'primary',
elapsed,
- bitrate: '—',
+ bitrate: '·',
health: 100,
audio: false,
};
@@ -163,9 +163,9 @@ function normalizeJob(j) {
...j,
status: statusMap[j.status] || j.status,
kind: kindMap[j.type] || j.type || 'Job',
- asset: j.asset_name || meta.filename || '—',
- eta: '—',
- node: meta.node || '—',
+ asset: j.asset_name || meta.filename || '·',
+ eta: '·',
+ node: meta.node || '·',
priority: meta.priority || 'normal',
error: j.error || null,
progress: j.progress || 0,
diff --git a/services/web-ui/public/modal-new-recorder.jsx b/services/web-ui/public/modal-new-recorder.jsx
index f10292a..ba4041a 100644
--- a/services/web-ui/public/modal-new-recorder.jsx
+++ b/services/web-ui/public/modal-new-recorder.jsx
@@ -1,21 +1,21 @@
-// modal-new-recorder.jsx — New Recorder dialog (SRT / RTMP / SDI / Deltacast)
+// modal-new-recorder.jsx - New Recorder dialog (SRT / RTMP / SDI / Deltacast)
/**
- * DevicePortPicker — groups a flat per-port API response by node_id and
+ * 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
+ * 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
+ * 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
+ * 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)
+ // Group by node_id (stable - one group per physical node)
const groups = React.useMemo(() => {
const map = new Map();
for (const p of ports) {
@@ -32,7 +32,7 @@ function DevicePortPicker({ ports, selectedIdx, selectedNode, onSelect, portLabe
{groups.map(group => (
1 ? 12 : 4 }}>
- {/* Node header — only show when multiple groups, or always for clarity */}
+ {/* Node header: only show when multiple groups, or always for clarity */}
- {u.created_at ? new Date(u.created_at).toLocaleDateString() : u.lastSeen || '—'}
+ {u.created_at ? new Date(u.created_at).toLocaleDateString() : u.lastSeen || '·'}
-
HOURLY BURN — DRAGONFLIGHT vs. THE OTHER GUYS
+
HOURLY BURN: DRAGONFLIGHT vs. THE OTHER GUYS
Disclaimer: No actual tokens were billed in the making of this page. Wild Dragon's broadcast platform
is self-hosted infrastructure. Any resemblance to per-API-call broadcast token economies, living or dead, is satirical
- and protected as commentary. If you came here looking for actual API tokens, that page no longer exists — service
+ and protected as commentary. If you came here looking for actual API tokens, that page no longer exists: service
credentials are managed through the cluster's own JWT issuer.
@@ -798,7 +819,7 @@ function Containers() {
const [containers, setContainers] = React.useState(null);
const [restartFlashState, setRestartFlashState] = React.useState(null);
const [logsModalState, setLogsModalState] = React.useState(null);
- // #111 — guard restart-flash timers against unmount.
+ // #111 - guard restart-flash timers against unmount.
const mountedRef = React.useRef(true);
const flashTimerRef = React.useRef(null);
React.useEffect(() => () => {
@@ -960,7 +981,7 @@ function Containers() {
}
// ────────────────────────────────────────────────────────────────────────────
-// BmdCardPanel — capture-card section inside the Cluster node detail panel.
+// BmdCardPanel - capture-card section inside the Cluster node detail panel.
// Shows port chips with live video-presence dots AND the BMD SVG card diagram.
// ────────────────────────────────────────────────────────────────────────────
function BmdCardPanel({ sel, portSignals }) {
@@ -995,7 +1016,7 @@ function BmdCardPanel({ sel, portSignals }) {
@@ -1021,7 +1042,7 @@ function BmdCardPanel({ sel, portSignals }) {
const { label, color } = _signalChip(sig);
const isReceiving = sig === 'receiving';
return (
-
{
- if (!window.confirm('Remove node ' + node.id + ' from the cluster?\nThis does not stop the machine — it only removes it from cluster membership.')) return;
+ if (!window.confirm('Remove node ' + node.id + ' from the cluster?\nThis does not stop the machine: it only removes it from cluster membership.')) return;
window.ZAMPP_API.fetch('/cluster/nodes/' + encodeURIComponent(node.dbId || node.id), { method: 'DELETE' })
.then(() => refresh())
.catch(e => setAdviceModal({ title: 'Remove failed', lines: [e.message] }));
@@ -1323,7 +1344,7 @@ function Cluster() {
@@ -1504,7 +1525,7 @@ function ApiTokensSection() {
{justCreated && (
- Save this token now — it will not be shown again
+ Save this token now: it will not be shown again
{justCreated.token}
@@ -1580,7 +1601,7 @@ function Settings() {
}
// ────────────────────────────────────────────────────────────────────────────
-// Storage — unified view: live mount/bucket health on top, then the two
+// Storage - unified view: live mount/bucket health on top, then the two
// existing editors (S3 bucket + growing-files SMB landing zone) stacked.
// ────────────────────────────────────────────────────────────────────────────
@@ -1595,7 +1616,7 @@ function StorageSection() {
}
function formatBytes(n) {
- if (n == null || isNaN(n)) return '—';
+ if (n == null || isNaN(n)) return '·';
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
let v = n, i = 0;
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
@@ -1628,7 +1649,7 @@ function MountHealthStrip() {
React.useEffect(() => {
load();
// Light auto-refresh so free-space + reachability stay current while the
- // operator is on the page. 15s is plenty — these are diagnostic, not real-time.
+ // operator is on the page. 15s is plenty - these are diagnostic, not real-time.
const t = setInterval(load, 15_000);
return () => clearInterval(t);
}, [load]);
@@ -1678,9 +1699,9 @@ function MountHealthStrip() {
)}
@@ -1791,7 +1812,7 @@ function GpuSettingsCard() {
const save = () => {
setSaving(true); setMsg(null);
window.ZAMPP_API.fetch('/settings/transcoding', { method: 'PUT', body: JSON.stringify(cfg) })
- .then(() => { setSaving(false); setMsg({ ok: true, text: 'Saved — new settings apply to the next proxy job.' }); })
+ .then(() => { setSaving(false); setMsg({ ok: true, text: 'Saved: new settings apply to the next proxy job.' }); })
.catch(e => { setSaving(false); setMsg({ ok: false, text: e.message }); });
};
@@ -1810,7 +1831,7 @@ function GpuSettingsCard() {
@@ -1843,9 +1864,9 @@ function GpuSettingsCard() {
@@ -1941,13 +1962,13 @@ function SdiSettingsCard() {
}
// ────────────────────────────────────────────────────────────────────────────
-// Capture SDK deployment — Blackmagic / AJA / Deltacast
+// Capture SDK deployment - Blackmagic / AJA / Deltacast
// ────────────────────────────────────────────────────────────────────────────
const SDK_VENDORS = [
{
id: 'blackmagic',
name: 'Blackmagic DeckLink',
- sub: 'DeckLink SDK 16.x — required for SDI capture via DeckLink cards',
+ sub: 'DeckLink SDK 16.x: required for SDI capture via DeckLink cards',
expect: 'DeckLinkAPI.h, DeckLinkAPIDispatch.cpp, LinuxCOM.h, libDeckLinkAPI.so',
docs: 'https://www.blackmagicdesign.com/developer/product/capture',
buildHint: 'docker compose build --no-cache capture',
@@ -1956,24 +1977,24 @@ const SDK_VENDORS = [
{
id: 'aja',
name: 'AJA NTV2',
- sub: 'NTV2 SDK — for Kona / Io / U-Tap / T-Tap cards',
+ sub: 'NTV2 SDK: for Kona / Io / U-Tap / T-Tap cards',
expect: 'libajantv2.so, ntv2card.h, ntv2enums.h',
docs: 'https://sdksupport.aja.com/',
- buildHint: 'FFmpeg patch + Dockerfile update pending — files will be staged for the next capture image build',
+ buildHint: 'FFmpeg patch + Dockerfile update pending: files will be staged for the next capture image build',
status: 'staging-only',
},
{
id: 'deltacast',
name: 'Deltacast VideoMaster',
- sub: 'VideoMasterHD SDK — for FLEX / DELTA-h4k2 / etc.',
+ sub: 'VideoMasterHD SDK: for FLEX / DELTA-h4k2 / etc.',
expect: 'VideoMasterHD_Core.h, libVideoMasterHD_Core.so',
docs: 'https://www.deltacast.tv/products/sdk',
- buildHint: 'FFmpeg patch + Dockerfile update pending — files will be staged for the next capture image build',
+ buildHint: 'FFmpeg patch + Dockerfile update pending: files will be staged for the next capture image build',
status: 'staging-only',
},
];
-// Premiere panel releases — single source of truth lives on `window.PREMIERE_RELEASES`
+// Premiere panel releases - single source of truth lives on `window.PREMIERE_RELEASES`
// (see data.jsx). Local alias for readability.
const PREMIERE_RELEASES = window.PREMIERE_RELEASES;
@@ -1988,7 +2009,7 @@ function SdkSettingsCard() {
React.useEffect(() => { load(); }, [load]);
return (
- {SDK_VENDORS.length} vendors}>
{/* ── Premiere Panel download section ── */}
@@ -2059,7 +2080,7 @@ function SdkVendorRow({ vendor, status, onDone }) {
const fd = new FormData();
fd.append('archive', file);
- // Use XHR so we can report progress to the user — fetch's stream API is fiddly.
+ // Use XHR so we can report progress to the user - fetch's stream API is fiddly.
await new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', (window.ZAMPP_API_PREFIX || '/api/v1') + '/sdk/' + vendor.id);
@@ -2075,7 +2096,7 @@ function SdkVendorRow({ vendor, status, onDone }) {
} else {
let txt = xhr.responseText;
try { txt = JSON.parse(xhr.responseText).error || txt; } catch {}
- onDone(vendor.name + ': upload failed — ' + txt, false);
+ onDone(vendor.name + ': upload failed: ' + txt, false);
}
resolve();
};
@@ -2159,7 +2180,7 @@ function AmppSettingsCard() {
setCfg(p => ({...p, ampp_base_url: e.target.value}))} placeholder="https://my-org.gvampp.tv" />
- setCfg(p => ({...p, ampp_token: e.target.value}))} placeholder={tokenExists ? '(saved — type to replace)' : 'AMPP API token'} autoComplete="new-password" />
+ setCfg(p => ({...p, ampp_token: e.target.value}))} placeholder={tokenExists ? '(saved: type to replace)' : 'AMPP API token'} autoComplete="new-password" />
diff --git a/services/web-ui/public/screens-asset.jsx b/services/web-ui/public/screens-asset.jsx
index b0d279b..d92deb7 100644
--- a/services/web-ui/public/screens-asset.jsx
+++ b/services/web-ui/public/screens-asset.jsx
@@ -1,6 +1,6 @@
-// screens-asset.jsx — asset detail (Frame.io-style player, filmstrip, comments)
+// screens-asset.jsx - asset detail (Frame.io-style player, filmstrip, comments)
-// Simple gradient palette — replaces the missing thumbGrad function
+// Simple gradient palette - replaces the missing thumbGrad function
const _FRAME_GRADIENTS = [
'linear-gradient(135deg,#1a1f2e 0%,#2a3045 100%)',
'linear-gradient(135deg,#1e2030 0%,#2d2040 100%)',
@@ -41,7 +41,7 @@ function AssetDetail({ asset, onClose }) {
// Player health: 'idle' | 'loading' | 'playing' | 'paused' | 'seeking' | 'waiting' | 'stalled' | 'error'
const [playerState, setPlayerState] = React.useState('idle');
const [playerError, setPlayerError] = React.useState(null);
- // Array of {start, end} in milliseconds — populated from HTMLMediaElement.buffered
+ // Array of {start, end} in milliseconds - populated from HTMLMediaElement.buffered
const [buffered, setBuffered] = React.useState([]);
// Wall-clock when waiting/stalled began (so we can show how long it's been hung)
const [stallStart, setStallStart] = React.useState(null);
@@ -89,7 +89,7 @@ function AssetDetail({ asset, onClose }) {
}, [streamUrl, streamType]);
// Fetch server-side filmstrip (pre-built by filmstrip worker via FFmpeg).
- // Falls back to nothing if not ready yet — user can right-click → Re-generate.
+ // Falls back to nothing if not ready yet - user can right-click → Re-generate.
React.useEffect(() => {
if (!assetId) return;
let cancelled = false;
@@ -115,7 +115,7 @@ function AssetDetail({ asset, onClose }) {
return function() { cancelled = true; };
}, [assetId, filmstripKey]);
- // Fake playback timer — only used when no real video stream
+ // Fake playback timer - only used when no real video stream
React.useEffect(() => {
if (!playing || totalMs <= 0 || streamUrl) return;
const i = setInterval(function() {
@@ -159,7 +159,7 @@ function AssetDetail({ asset, onClose }) {
return () => clearInterval(i);
}, [stallStart]);
- // #143 — if the player is stalled within 250 ms of EOF for more than 1.2 s,
+ // #143 - if the player is stalled within 250 ms of EOF for more than 1.2 s,
// treat it as a clean end. Avoids the silent-freeze users hit when seeking
// to the last instant of a clip.
React.useEffect(() => {
@@ -180,7 +180,7 @@ function AssetDetail({ asset, onClose }) {
}, [stallStart, totalMs, playerState]);
const seek = function(ms) {
- // #143 — seeking exactly to `totalMs` parked the playhead one micro-sample
+ // #143 - seeking exactly to `totalMs` parked the playhead one micro-sample
// past the last decoded frame; the player then asked S3 for a range past
// EOF and stalled silently. Pull the clamp back 50 ms so the final frames
// are reachable but the player never asks for bytes past the file size.
@@ -212,7 +212,7 @@ function AssetDetail({ asset, onClose }) {
.finally(function() { setDownloading(false); });
};
- // Right-click style menu on the kebab icon — delete, copy ID.
+ // Right-click style menu on the kebab icon - delete, copy ID.
const [menuOpen, setMenuOpen] = React.useState(false);
const moreBtnRef = React.useRef(null);
React.useEffect(function() {
@@ -258,7 +258,7 @@ function AssetDetail({ asset, onClose }) {
const regenFilmstrip = function() {
window.ZAMPP_API.fetch('/assets/' + assetId + '/reprocess?type=filmstrip', { method: 'POST' })
- .then(function() { window.alert('Filmstrip job queued — it will appear automatically when ready.'); })
+ .then(function() { window.alert('Filmstrip job queued: it will appear automatically when ready.'); })
.catch(function(e) { window.alert('Failed to queue filmstrip: ' + (e.message || 'unknown error')); });
};
@@ -477,7 +477,7 @@ function AssetDetail({ asset, onClose }) {
LIVE · REC
)}
- {/* Player health badge — shows when waiting/stalled so the freeze is visible */}
+ {/* Player health badge: shows when waiting/stalled so the freeze is visible */}
{streamUrl && (playerState === 'waiting' || playerState === 'stalled' || playerState === 'seeking' || playerState === 'error') && (
-
+ {/* Beta banner: flat strip across top, no glassmorphism or gradient. */}
+
+
+
+ NLE editor is in beta.
+ Use the Premiere Pro panel for frame-accurate editing and growing-file workflows.
-
-
- NLE Editor — Coming Soon
-
-
- The browser-based timeline editor is under active development.
- In the meantime, use the Premiere Pro panel for
- frame-accurate editing and growing-file workflows — download it from
- Settings → Capture SDKs.
-
@@ -719,7 +697,7 @@ function ProgramMonitor({ videoRef, currentSeq, playheadFrames, setPlayheadFrame
function EditorKeyboard({ onUndo, onRedo, onSave, onMarkIn, onMarkOut, currentSeq }) {
React.useEffect(() => {
function handler(e) {
- // #116 — `document.activeElement` is null in some edge cases (iframe focus,
+ // #116 - `document.activeElement` is null in some edge cases (iframe focus,
// popovers, devtools-driven focus), and the previous code threw NPE here.
const tag = (document.activeElement && document.activeElement.tagName) || '';
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag)) return;
diff --git a/services/web-ui/public/screens-home.jsx b/services/web-ui/public/screens-home.jsx
index d5b56b6..56f50eb 100644
--- a/services/web-ui/public/screens-home.jsx
+++ b/services/web-ui/public/screens-home.jsx
@@ -2,18 +2,18 @@
//
// Two routes share this file:
//
-// • Home — the launcher. Big-button entry into each section of the MAM.
+// • 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
+// • 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
+// 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.
@@ -91,6 +91,19 @@ function Home({ navigate }) {
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 (
@@ -144,6 +157,71 @@ function Home({ navigate }) {
);
@@ -1517,7 +1517,7 @@ function Schedule({ navigate }) {
return () => clearInterval(id);
}, []);
- // Schedule data — pull everything once and filter client-side for the
+ // Schedule data - pull everything once and filter client-side for the
// active view. /schedules caps at 200 rows so this stays cheap.
const apiFilter = view === 'list' ? listFilter : 'all';
const load = React.useCallback(() => {
@@ -1549,7 +1549,7 @@ function Schedule({ navigate }) {
const projects = window.ZAMPP_DATA?.PROJECTS || [];
- // Pixels per hour — wider on Today (high-res operations view), tighter
+ // Pixels per hour - wider on Today (high-res operations view), tighter
// when the user is scanning Week-at-a-glance.
const pph = view === 'week' ? 44 : 88;
@@ -1604,7 +1604,7 @@ function Schedule({ navigate }) {
};
const openCtx = (s, ev) => setCtxMenu({ schedule: s, x: ev.clientX, y: ev.clientY });
- // Dismiss the context menu on any outside click — capture phase so a
+ // Dismiss the context menu on any outside click - capture phase so a
// click on a menu item still fires before the menu unmounts.
React.useEffect(() => {
if (!ctxMenu) return;
@@ -1859,7 +1859,7 @@ function EditScheduleModal({ schedule, onClose, onSaved }) {
-
Recorder can't be reassigned — delete + recreate to change.
+
Recorder can't be reassigned: delete + recreate to change.
@@ -1928,11 +1928,11 @@ function NewScheduleModal({ recorders, onClose, onCreated, defaultStart, default
const endD = new Date(form.end_at);
if (endD <= startD) return setErr('End must be after start');
- // Warn (but allow) start times in the past — the scheduler tick will fire
+ // Warn (but allow) start times in the past - the scheduler tick will fire
// them immediately, which is occasionally what the operator wants
// (e.g. "record the next 30 minutes starting now").
if (startD < new Date(Date.now() - 60_000)) {
- if (!confirm('Start time is in the past — recorder will fire immediately when saved.\nContinue?')) return;
+ if (!confirm('Start time is in the past: recorder will fire immediately when saved.\nContinue?')) return;
}
// Datetime-local inputs are in the browser's local zone; ship as ISO so
@@ -1972,7 +1972,7 @@ function NewScheduleModal({ recorders, onClose, onCreated, defaultStart, default