From e045a29508fbb35a11efc5bbb9a0000be4ad5dd9 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 1 Jun 2026 19:45:39 +0200
Subject: [PATCH] fix(#994,#996): replace undefined CSS vars; guard overflow
 rebuild when open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

dashboard.css used var(--surface0/1/2) and var(--text) throughout the
agent context menu, tabbar overflow dropdown, and logs toolbar — none
of which are declared in base.css (the palette only defines --bg-elev,
--border, --purple-dim, --fg etc). This caused all three dropdowns to
render with a transparent background (issue #996).

Replacements:
  --surface0  → --bg-elev   (dropdown background)
  --surface1  → --border    (hover / active state)
  --surface2  → --purple-dim (border / separator)
  --text      → --fg        (label colour)

Also addresses two argus yellows from the PR #997 review:
- Skip updateTabbarOverflow() early when the dropdown is open; avoids
  DOM flicker from the 1s badge-update tick while the menu is visible.
- Fall back to 32px when overflowBtn.offsetWidth === 0 (hidden on the
  first render) so the initial width measurement is not off.
---
 frontend/packages/dashboard/src/dashboard.css | 32 +++++++++----------
 frontend/packages/dashboard/src/tabs.js       |  8 ++++-
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index 0f9b4dee..fa997833 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -144,8 +144,8 @@ body.dashboard-shell {
   right: 0;
   top: calc(100% + 2px);
   z-index: 100;
-  background: var(--surface0);
-  border: 1px solid var(--surface2);
+  background: var(--bg-elev);
+  border: 1px solid var(--purple-dim);
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   list-style: none;
@@ -163,7 +163,7 @@ body.dashboard-shell {
   width: 100%;
   background: none;
   border: none;
-  color: var(--text);
+  color: var(--fg);
   font-family: inherit;
   font-size: 0.88em;
   letter-spacing: 0.05em;
@@ -173,7 +173,7 @@ body.dashboard-shell {
   cursor: pointer;
 }
 .tabbar-overflow-item:hover {
-  background: var(--surface1);
+  background: var(--border);
   color: var(--purple);
 }
 .tabbar-overflow-item-active {
@@ -447,8 +447,8 @@ a:hover {
 }
 .agent-menu-btn:hover,
 .agent-menu-btn:focus-visible {
-  background: var(--surface1);
-  color: var(--text);
+  background: var(--border);
+  color: var(--fg);
   opacity: 1;
 }
 .agent-menu-btn:focus-visible {
@@ -460,8 +460,8 @@ a:hover {
   right: 0;
   top: calc(100% + 2px);
   z-index: 200;
-  background: var(--surface0);
-  border: 1px solid var(--surface2);
+  background: var(--bg-elev);
+  border: 1px solid var(--purple-dim);
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
   list-style: none;
@@ -475,7 +475,7 @@ a:hover {
   width: 100%;
   background: none;
   border: none;
-  color: var(--text);
+  color: var(--fg);
   font-family: inherit;
   font-size: 0.82em;
   letter-spacing: 0.01em;
@@ -484,11 +484,11 @@ a:hover {
   cursor: pointer;
 }
 .agent-menu-item:hover {
-  background: var(--surface1);
+  background: var(--border);
 }
 .agent-menu-sep {
   height: 1px;
-  background: var(--surface2);
+  background: var(--purple-dim);
   margin: 0.3em 0;
 }
 /* Pending state splits queued vs running — queued ops show only
@@ -2016,9 +2016,9 @@ body.logs-shell {
   letter-spacing: 0.05em;
   transition: background 100ms, color 100ms;
 }
-.logs-tab:hover { background: var(--surface1); color: var(--text); }
+.logs-tab:hover { background: var(--border); color: var(--fg); }
 .logs-tab.logs-tab-active {
-  background: var(--surface1);
+  background: var(--border);
   color: var(--mauve);
 }
 
@@ -2037,9 +2037,9 @@ body.logs-shell {
 }
 
 .logs-toolbar .journal-unit {
-  background: var(--surface1);
-  color: var(--text);
-  border: 1px solid var(--surface2);
+  background: var(--border);
+  color: var(--fg);
+  border: 1px solid var(--purple-dim);
   border-radius: 4px;
   padding: 0.25em 0.5em;
   font-size: 0.85em;
diff --git a/frontend/packages/dashboard/src/tabs.js b/frontend/packages/dashboard/src/tabs.js
index 9a295b32..44ce6296 100644
--- a/frontend/packages/dashboard/src/tabs.js
+++ b/frontend/packages/dashboard/src/tabs.js
@@ -3438,6 +3438,9 @@ window.marked = marked;
   function updateTabbarOverflow() {
     const tabbar = $('tabbar');
     if (!tabbar || !overflowBtn || !overflowDrop) return;
+    // Skip dropdown rebuild while it is open — the 1s badge tick would
+    // replace DOM nodes and cause a flicker mid-interaction.
+    if (overflowOpen) return;
 
     // Collect all tabs that are not JS-hidden (P33RS/M4TR1X may be hidden
     // by feature-gating) and not already removed from the DOM.
@@ -3452,7 +3455,10 @@ window.marked = marked;
 
     // Step 2: measure available width (bar width minus overflow-btn width).
     // We must read layout AFTER restoring all dynamic tabs.
-    const availWidth = tabbar.clientWidth - overflowBtn.offsetWidth - 8;
+    // overflowBtn may be hidden (offsetWidth=0) on the very first call; fall
+    // back to a 32px estimate so the first-pass measurement isn't off.
+    const btnW = overflowBtn.offsetWidth || 32;
+    const availWidth = tabbar.clientWidth - btnW - 8;
 
     // Step 3: walk dynamic tabs left-to-right, accumulating widths.
     // Any that go over the available width get overflowed.