From 835545e0613f223d2cb9e9d74d47cf1030ab289a Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 22 May 2026 10:05:57 -0400
Subject: [PATCH] feat(ui): wire library, jobs, ingest, editor screens to live
 API data: screens-editor.jsx

---
 services/web-ui/public/screens-editor.jsx | 118 ++++++----------------
 1 file changed, 32 insertions(+), 86 deletions(-)

diff --git a/services/web-ui/public/screens-editor.jsx b/services/web-ui/public/screens-editor.jsx
index 78fd840..a360b53 100644
--- a/services/web-ui/public/screens-editor.jsx
+++ b/services/web-ui/public/screens-editor.jsx
@@ -1,9 +1,9 @@
-// screens-editor.jsx — Editor (timeline) stub
-const { ASSETS } = window.ZAMPP_DATA;
+// screens-editor.jsx — Editor (timeline)
 
 function Editor() {
+  const { ASSETS } = window.ZAMPP_DATA;
   const [playing, setPlaying] = React.useState(false);
-  const [currentMs, setCurrentMs] = React.useState(8200);
+  const [currentMs, setCurrentMs] = React.useState(0);
 
   React.useEffect(() => {
     if (!playing) return;
@@ -14,27 +14,27 @@ function Editor() {
   return (
     <div className="editor-shell">
       <div className="editor-topbar">
-        <span style={{ fontWeight: 600, fontSize: 13 }}>Untitled sequence</span>
-        <span className="muted" style={{ fontSize: 11.5 }}>Protour 2026 · auto-saved 1m ago</span>
+        <span style={{ fontWeight: 600, fontSize: 13 }}>New sequence</span>
         <div style={{ flex: 1 }} />
-        <button className="btn ghost sm"><Icon name="download" />Render</button>
-        <button className="btn subtle sm">Send to AMPP</button>
+        <button className="btn ghost sm"><Icon name="download" />Export</button>
         <button className="btn primary sm">Publish</button>
       </div>
       <div className="editor-body">
         <aside className="editor-bins">
-          <div style={{ padding: "12px 12px 8px", display: "flex", alignItems: "center", gap: 6 }}>
+          <div style={{ padding: '12px 12px 8px', display: 'flex', alignItems: 'center', gap: 6 }}>
             <span style={{ fontWeight: 600, fontSize: 12 }}>Project bin</span>
             <span style={{ flex: 1 }} />
             <button className="icon-btn"><Icon name="search" size={12} /></button>
           </div>
-          <div style={{ padding: "0 8px 12px", display: "flex", flexDirection: "column", gap: 4 }}>
-            {ASSETS.slice(0, 8).map(a => (
+          <div style={{ padding: '0 8px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+            {ASSETS.length === 0 ? (
+              <div style={{ padding: '16px 4px', color: 'var(--text-3)', fontSize: 12 }}>No assets in library.</div>
+            ) : ASSETS.slice(0, 12).map(a => (
               <div key={a.id} className="editor-bin-item">
-                <div className="editor-bin-thumb"><FauxFrame seed={a.seed} /></div>
+                <div className="editor-bin-thumb"><AssetThumb asset={a} /></div>
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontSize: 11.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{a.name}</div>
-                  <div className="mono" style={{ fontSize: 10, color: "var(--text-3)" }}>{a.duration}</div>
+                  <div style={{ fontSize: 11.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.name}</div>
+                  <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>{a.duration}</div>
                 </div>
               </div>
             ))}
@@ -42,18 +42,18 @@ function Editor() {
         </aside>
         <div className="editor-viewer">
           <div className="editor-canvas">
-            <FauxFrame seed={2} />
+            <FauxFrame />
             {!playing && (
               <button className="player-play-overlay" onClick={() => setPlaying(true)}>
                 <Icon name="play" size={28} />
               </button>
             )}
-            <div className="player-tc"><span className="mono">00:00:08:06</span></div>
+            <div className="player-tc"><span className="mono">{msToTimecode ? msToTimecode(currentMs) : '00:00:00:00'}</span></div>
           </div>
           <div className="editor-transport">
-            <button className="icon-btn"><Icon name="arrowLeft" size={14} /></button>
+            <button className="icon-btn" onClick={() => setCurrentMs(0)}><Icon name="arrowLeft" size={14} /></button>
             <button className="icon-btn" onClick={() => setPlaying(p => !p)}>
-              <Icon name={playing ? "pause" : "play"} size={14} />
+              <Icon name={playing ? 'pause' : 'play'} size={14} />
             </button>
             <button className="icon-btn"><Icon name="arrowRight" size={14} /></button>
             <span style={{ flex: 1 }} />
@@ -63,8 +63,8 @@ function Editor() {
           </div>
         </div>
         <aside className="editor-insp">
-          <div style={{ padding: "12px", fontSize: 12, fontWeight: 600, borderBottom: "1px solid var(--border)" }}>Inspector</div>
-          <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 12 }}>
+          <div style={{ padding: '12px', fontSize: 12, fontWeight: 600, borderBottom: '1px solid var(--border)' }}>Inspector</div>
+          <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
             <InspGroup title="Transform">
               <InspRow label="Position" value="0, 0" />
               <InspRow label="Scale" value="100%" />
@@ -82,7 +82,7 @@ function Editor() {
           </div>
         </aside>
       </div>
-      <EditorTimeline currentMs={currentMs} />
+      <EditorTimeline currentMs={currentMs} total={60} clips={[]} />
     </div>
   );
 }
@@ -90,95 +90,41 @@ function Editor() {
 function InspGroup({ title, children }) {
   return (
     <div>
-      <div className="muted" style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, marginBottom: 6 }}>{title}</div>
-      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>{children}</div>
+      <div className="muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 6 }}>{title}</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>{children}</div>
     </div>
   );
 }
 function InspRow({ label, value }) {
   return (
-    <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", alignItems: "center", fontSize: 11.5 }}>
-      <span style={{ color: "var(--text-3)" }}>{label}</span>
-      <span className="mono" style={{ background: "var(--bg-2)", padding: "3px 6px", borderRadius: 4, border: "1px solid var(--border)" }}>{value}</span>
+    <div style={{ display: 'grid', gridTemplateColumns: '70px 1fr', alignItems: 'center', fontSize: 11.5 }}>
+      <span style={{ color: 'var(--text-3)' }}>{label}</span>
+      <span className="mono" style={{ background: 'var(--bg-2)', padding: '3px 6px', borderRadius: 4, border: '1px solid var(--border)' }}>{value}</span>
     </div>
   );
 }
 
-function EditorTimeline({ currentMs }) {
-  const v1Clips = [
-    { id: "v1a", start: 0, len: 12, color: "#5B7CFA", label: "Stage_Cam_A" },
-    { id: "v1b", start: 12, len: 8, color: "#5B7CFA", label: "Drone_Aerial" },
-    { id: "v1c", start: 20, len: 18, color: "#5B7CFA", label: "Wide_Cam_B" },
-    { id: "v1d", start: 38, len: 10, color: "#5B7CFA", label: "Trophy" },
-  ];
-  const v2Clips = [
-    { id: "v2a", start: 6, len: 4, color: "#B57CFA", label: "Lower3rd" },
-    { id: "v2b", start: 32, len: 4, color: "#B57CFA", label: "Sponsor" },
-  ];
-  const a1Clips = [
-    { id: "a1a", start: 0, len: 48, color: "#2DD4A8", label: "FOH Mix", audio: true },
-  ];
-  const a2Clips = [
-    { id: "a2a", start: 12, len: 6, color: "#F5A623", label: "VO", audio: true },
-  ];
-  const total = 60;
-  const playheadPct = ((currentMs / 1000) / total) * 100;
-
+function EditorTimeline({ currentMs, total = 60, clips = [] }) {
+  const playheadPct = total > 0 ? ((currentMs / 1000) / total) * 100 : 0;
   return (
     <div className="editor-timeline">
       <div className="editor-timeline-head">
-        <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>Timeline · 1m total</span>
+        <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>Timeline</span>
         <span style={{ flex: 1 }} />
-        <div className="tab-group">
-          <button className="active"><Icon name="zap" size={11} /></button>
-          <button><Icon name="layers" size={11} /></button>
-        </div>
       </div>
       <div className="timeline-ruler">
         {Array.from({ length: 13 }).map((_, i) => (
           <div key={i} className="ruler-tick">
-            {i % 2 === 0 && <span className="mono">{`00:${String(i * 5).padStart(2, "0")}`}</span>}
+            {i % 2 === 0 && <span className="mono">{`00:${String(i * 5).padStart(2, '0')}`}</span>}
           </div>
         ))}
       </div>
-      <TimelineTrack label="V2" clips={v2Clips} total={total} />
-      <TimelineTrack label="V1" clips={v1Clips} total={total} hasFilm />
-      <TimelineTrack label="A1" clips={a1Clips} total={total} audio />
-      <TimelineTrack label="A2" clips={a2Clips} total={total} audio />
+      {clips.length === 0 && (
+        <div style={{ padding: '20px 40px', color: 'var(--text-3)', fontSize: 12 }}>Drop assets from the bin to build a sequence.</div>
+      )}
       <div className="timeline-playhead" style={{ left: `calc(40px + (100% - 40px) * ${playheadPct / 100})` }} />
     </div>
   );
 }
 
-function TimelineTrack({ label, clips, total, hasFilm, audio }) {
-  return (
-    <div className="timeline-track">
-      <div className="timeline-track-label">{label}</div>
-      <div className="timeline-track-lane">
-        {clips.map(c => {
-          const left = (c.start / total) * 100;
-          const width = (c.len / total) * 100;
-          return (
-            <div key={c.id} className={`clip ${audio ? "audio" : ""}`} style={{ left: `${left}%`, width: `${width}%`, background: c.color }}>
-              <div className="clip-label">{c.label}</div>
-              {hasFilm && (
-                <div className="clip-film">
-                  {Array.from({ length: 8 }).map((_, i) => (
-                    <div key={i} className="clip-film-cell"><FauxFrame seed={(i + c.start) % 6} /></div>
-                  ))}
-                </div>
-              )}
-              {audio && (
-                <div className="clip-wave">
-                  <Waveform seed={c.start + label.length} color="rgba(255,255,255,0.55)" />
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
 window.Editor = Editor;