From fb44bd8aff232cf1ea7aa3a081d34a40bef9e6fd Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 22 May 2026 10:55:20 -0400
Subject: [PATCH] fix: SDI crash, monitors polling, home RAM fields, editor IN
 DEV splash, timecode, create recorder API: screens-editor.jsx

---
 services/web-ui/public/screens-editor.jsx | 35 +++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/services/web-ui/public/screens-editor.jsx b/services/web-ui/public/screens-editor.jsx
index a360b53..c82506a 100644
--- a/services/web-ui/public/screens-editor.jsx
+++ b/services/web-ui/public/screens-editor.jsx
@@ -1,5 +1,14 @@
 // screens-editor.jsx — Editor (timeline)
 
+function _fmtTimecode(ms) {
+  const s = Math.floor(ms / 1000);
+  const f = Math.floor((ms % 1000) / (1000 / 30));
+  return String(Math.floor(s / 3600)).padStart(2, '0') + ':' +
+         String(Math.floor((s % 3600) / 60)).padStart(2, '0') + ':' +
+         String(s % 60).padStart(2, '0') + ':' +
+         String(f).padStart(2, '0');
+}
+
 function Editor() {
   const { ASSETS } = window.ZAMPP_DATA;
   const [playing, setPlaying] = React.useState(false);
@@ -12,7 +21,7 @@ function Editor() {
   }, [playing]);
 
   return (
-    <div className="editor-shell">
+    <div className="editor-shell" style={{ position: 'relative' }}>
       <div className="editor-topbar">
         <span style={{ fontWeight: 600, fontSize: 13 }}>New sequence</span>
         <div style={{ flex: 1 }} />
@@ -48,7 +57,7 @@ function Editor() {
                 <Icon name="play" size={28} />
               </button>
             )}
-            <div className="player-tc"><span className="mono">{msToTimecode ? msToTimecode(currentMs) : '00:00:00:00'}</span></div>
+            <div className="player-tc"><span className="mono">{_fmtTimecode(currentMs)}</span></div>
           </div>
           <div className="editor-transport">
             <button className="icon-btn" onClick={() => setCurrentMs(0)}><Icon name="arrowLeft" size={14} /></button>
@@ -83,6 +92,28 @@ function Editor() {
         </aside>
       </div>
       <EditorTimeline currentMs={currentMs} total={60} clips={[]} />
+
+      {/* IN DEVELOPMENT overlay */}
+      <div style={{
+        position: 'absolute', inset: 0, zIndex: 20,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        backdropFilter: 'blur(6px)', background: 'rgba(10,12,16,0.82)',
+        pointerEvents: 'all',
+      }}>
+        <div style={{
+          background: 'var(--bg-1)', border: '1px solid var(--border-stronger)',
+          borderRadius: 14, padding: '48px 56px', textAlign: 'center',
+          maxWidth: 440, boxShadow: '0 24px 80px rgba(0,0,0,0.6)',
+        }}>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--warning)', textTransform: 'uppercase', marginBottom: 20 }}>In Development</div>
+          <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 14, letterSpacing: '-0.02em', color: 'var(--text-1)' }}>Non-linear Editor</div>
+          <div style={{ fontSize: 13, color: 'var(--text-3)', lineHeight: 1.75 }}>
+            Timeline editing, multi-track audio mixing,<br />
+            GPU-accelerated export, and color grading<br />
+            are coming in a future release.
+          </div>
+        </div>
+      </div>
     </div>
   );
 }