From 416046a237bfe0ad2ab6a033efd60f12e84858ac Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 07:41:57 +0000
Subject: [PATCH] Add vintage LCD panel to VCR bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dark green-on-black LCD display on right side of VCR bar showing:
- Mode: LIVE / PAUSE / PLAY 2x (green)
- Time: HH:MM:SS with glow (green)
- Packet counter: +N PKTS when paused, N/total during replay (amber)

Styled with dark background, inset shadow, monospace font,
text-shadow glow — vintage VCR aesthetic.
---
 public/live.css | 56 +++++++++++++++++++++++++++++++++++++++++++------
 public/live.js  | 32 +++++++++++++++++++++++++---
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/public/live.css b/public/live.css
index f41c4ffc..db6173a5 100644
--- a/public/live.css
+++ b/public/live.css
@@ -388,9 +388,21 @@
   backdrop-filter: blur(12px);
   border-top: 1px solid rgba(255,255,255,0.08);
   padding: 6px 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+.vcr-bar > .vcr-controls,
+.vcr-bar > .vcr-timeline-wrap {
+  /* These stack vertically in a wrapper — but we need them side by side with LCD */
+}
+.vcr-left {
   display: flex;
   flex-direction: column;
+  flex: 1;
   gap: 4px;
+  min-width: 0;
 }
 
 .vcr-controls {
@@ -447,14 +459,46 @@
 }
 
 .vcr-clock {
+  display: none; /* replaced by LCD panel */
+}
+.vcr-lcd {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  background: #1a1a0a;
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 4px 10px;
+  min-width: 110px;
+  box-shadow: inset 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.3);
+  gap: 1px;
+}
+.vcr-lcd-row {
   font-family: 'Courier New', 'Consolas', monospace;
-  font-size: 0.85rem;
+  letter-spacing: 2px;
+  line-height: 1.1;
+  text-align: right;
+  white-space: nowrap;
+}
+.vcr-lcd-mode {
+  font-size: 0.65rem;
+  color: #4ade80;
+  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
   font-weight: 700;
-  color: #f87171;
-  letter-spacing: 1.5px;
-  text-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
-  min-width: 5.5em;
-  text-align: center;
+}
+.vcr-lcd-time {
+  font-size: 1rem;
+  color: #4ade80;
+  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5), 0 0 2px rgba(74, 222, 128, 0.8);
+  font-weight: 700;
+}
+.vcr-lcd-pkts {
+  font-size: 0.6rem;
+  color: #fbbf24;
+  text-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
+  font-weight: 700;
+  min-height: 0.7rem;
 }
 .vcr-missed {
   font-size: 0.7rem;
diff --git a/public/live.js b/public/live.js
index 0474ce17..1549d146 100644
--- a/public/live.js
+++ b/public/live.js
@@ -206,6 +206,7 @@
       const entry = VCR.buffer[VCR.playhead];
       animatePacket(entry.pkt);
       updateVCRClock(entry.ts);
+      updateVCRLcd();
       VCR.playhead++;
       updateVCRUI();
       updateTimelinePlayhead();
@@ -239,7 +240,7 @@
   }
 
   function updateVCRClock(tsMs) {
-    const el = document.getElementById('vcrClock');
+    const el = document.getElementById('vcrLcdTime');
     if (!el) return;
     const d = new Date(tsMs);
     const hh = String(d.getHours()).padStart(2, '0');
@@ -248,6 +249,25 @@
     el.textContent = `${hh}:${mm}:${ss}`;
   }
 
+  function updateVCRLcd() {
+    const modeEl = document.getElementById('vcrLcdMode');
+    const pktsEl = document.getElementById('vcrLcdPkts');
+    if (modeEl) {
+      if (VCR.mode === 'LIVE') modeEl.textContent = 'LIVE';
+      else if (VCR.mode === 'PAUSED') modeEl.textContent = 'PAUSE';
+      else if (VCR.mode === 'REPLAY') modeEl.textContent = `PLAY ${VCR.speed}x`;
+    }
+    if (pktsEl) {
+      if (VCR.mode === 'PAUSED' && VCR.missedCount > 0) {
+        pktsEl.textContent = `+${VCR.missedCount} PKTS`;
+      } else if (VCR.mode === 'REPLAY' && VCR.playhead >= 0) {
+        pktsEl.textContent = `${VCR.playhead}/${VCR.buffer.length}`;
+      } else {
+        pktsEl.textContent = '';
+      }
+    }
+  }
+
   function updateVCRUI() {
     const modeEl = document.getElementById('vcrMode');
     const pauseBtn = document.getElementById('vcrPauseBtn');
@@ -276,6 +296,7 @@
       if (missedEl) missedEl.classList.add('hidden');
     }
     if (speedBtn) speedBtn.textContent = VCR.speed + 'x';
+    updateVCRLcd();
   }
 
   function dbPacketToLive(pkt) {
@@ -474,14 +495,13 @@
 
         <!-- VCR Bar -->
         <div class="vcr-bar" id="vcrBar">
+          <div class="vcr-left">
           <div class="vcr-controls">
             <button id="vcrRewindBtn" class="vcr-btn" title="Rewind">⏪</button>
             <button id="vcrPauseBtn" class="vcr-btn" title="Pause/Play">⏸</button>
             <button id="vcrLiveBtn" class="vcr-btn vcr-live-btn" title="Jump to live">LIVE</button>
             <button id="vcrSpeedBtn" class="vcr-btn" title="Playback speed">1x</button>
             <div id="vcrMode" class="vcr-mode vcr-mode-live"><span class="vcr-live-dot"></span> LIVE</div>
-            <span id="vcrClock" class="vcr-clock">--:--:--</span>
-            <span id="vcrMissed" class="vcr-missed hidden">+0</span>
           </div>
           <div class="vcr-timeline-wrap">
             <div class="vcr-scope-btns">
@@ -496,6 +516,12 @@
               <div id="vcrTimeTooltip" class="vcr-time-tooltip hidden"></div>
             </div>
           </div>
+          </div>
+          <div class="vcr-lcd">
+            <div class="vcr-lcd-row vcr-lcd-mode" id="vcrLcdMode">LIVE</div>
+            <div class="vcr-lcd-row vcr-lcd-time" id="vcrLcdTime">--:--:--</div>
+            <div class="vcr-lcd-row vcr-lcd-pkts" id="vcrLcdPkts"></div>
+          </div>
           <div id="vcrPrompt" class="vcr-prompt hidden"></div>
         </div>
       </div>`;