Video with UI

client/index.html

@@ -577,6 +577,80 @@ <h3>Notifications</h3>
     <script src="terminal.js"></script>
     <script src="notifications.js"></script>
     <script src="agent-modal.js"></script>
+    <script>
+    // Trailer neon cycle with fixed glow overlay
+    (function() {
+      let running = false;
+      let stopped = false;
+      let overlay = null;
+
+      function getOverlay() {
+        if (!overlay) {
+          overlay = document.createElement('div');
+          overlay.className = 'neon-glow-overlay';
+          overlay.style.opacity = '0';
+          document.body.appendChild(overlay);
+        }
+        return overlay;
+      }
+
+      function positionOverlay(el) {
+        const ov = getOverlay();
+        const rect = el.getBoundingClientRect();
+        const pad = 4;
+        ov.style.left = (rect.left - pad) + 'px';
+        ov.style.top = (rect.top - pad) + 'px';
+        ov.style.width = (rect.width + pad * 2) + 'px';
+        ov.style.height = (rect.height + pad * 2) + 'px';
+        ov.style.opacity = '1';
+        ov.style.transform = 'scale(1.03)';
+      }
+
+      function hideOverlay() {
+        const ov = getOverlay();
+        ov.style.opacity = '0';
+        ov.style.transform = 'scale(1)';
+      }
+
+      async function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+      async function runCycle() {
+        running = true;
+        while (!stopped) {
+          const wrappers = document.querySelectorAll('.terminal-grid .terminal-wrapper, .terminal-pair .terminal-wrapper');
+          if (!wrappers.length) { await sleep(1000); continue; }
+
+          for (let i = 0; i < wrappers.length; i++) {
+            if (stopped) break;
+            wrappers.forEach(w => w.classList.remove('neon-active'));
+            wrappers[i].classList.add('neon-active');
+            positionOverlay(wrappers[i]);
+            await sleep(700);
+          }
+
+          wrappers.forEach(w => w.classList.remove('neon-active'));
+          hideOverlay();
+          if (!stopped) await sleep(5000);
+        }
+        running = false;
+      }
+
+      function startNeonCycle() {
+        stopped = false;
+        if (!running) runCycle();
+      }
+
+      function stopNeonCycle() {
+        stopped = true;
+        document.querySelectorAll('.terminal-wrapper.neon-active').forEach(w => w.classList.remove('neon-active'));
+        hideOverlay();
+      }
+
+      setTimeout(startNeonCycle, 2000);
+      window.startNeonCycle = startNeonCycle;
+      window.stopNeonCycle = stopNeonCycle;
+    })();
+    </script>
 </body>
 
 </html>

client/styles.css

@@ -1449,7 +1449,7 @@ header {
    Pairs stack top-to-bottom; within each pair terminals sit side-by-side. */
 .terminal-grid {
   padding: var(--space-xs);
-  overflow: hidden;
+  overflow: visible;
   display: grid;
   gap: var(--space-xs);
   grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
@@ -1467,7 +1467,7 @@ header {
   gap: var(--space-xs);
   min-height: 0;
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .terminal-pair > .terminal-wrapper {
@@ -1494,14 +1494,47 @@ header {
 .terminal-wrapper {
   background: var(--bg-tertiary);
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-color);
+  border: 2px solid var(--border-color);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  height: 100%;  /* Fill grid cell completely */
+  height: 100%;
   width: 100%;
   position: relative;
-  isolation: isolate;
+  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+.terminal-wrapper.neon-active,
+.terminal-wrapper:hover {
+  border-color: #fff;
+  border-width: 3px;
+  box-shadow:
+    0 0 4px #fff,
+    0 0 8px #fff,
+    inset 0 0 50px rgba(0, 229, 255, 0.25),
+    inset 0 0 100px rgba(0, 229, 255, 0.12);
+}
+
+/* Fixed-position glow overlay that escapes all parent clipping */
+.neon-glow-overlay {
+  position: fixed;
+  pointer-events: none;
+  z-index: 999999;
+  border-radius: 10px;
+  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
+  box-shadow:
+    0 0 4px #fff,
+    0 0 10px #fff,
+    0 0 20px #00e5ff,
+    0 0 40px #00e5ff,
+    0 0 70px #00e5ff,
+    0 0 110px rgba(0, 229, 255, 0.9),
+    0 0 180px rgba(0, 229, 255, 0.6),
+    0 0 280px rgba(0, 229, 255, 0.4),
+    0 0 400px rgba(0, 229, 255, 0.25),
+    0 0 550px rgba(0, 229, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
 }
 
 .terminal-header {