Merge pull request #17 from web3dev1337/feature/master-pr13-stabilize-release

fix: stabilize post-PR13 UI and prep v0.9.5 release

Author: web3dev1337

index.html

@@ -83,6 +83,7 @@
             <button class="nav-tab nav-dropdown-toggle" data-tooltip="More options">
               <span class="material-icons">more_horiz</span>
               <span class="nav-label">More</span>
+              <span class="badge hidden" id="more-badge">0</span>
               <span class="material-icons nav-dropdown-arrow">expand_more</span>
             </button>
             <div class="nav-dropdown-menu">

js/app.js

@@ -50,6 +50,7 @@ const elements = {
   townName: document.getElementById('town-name'),
   connectionStatus: document.getElementById('connection-status'),
   mailBadge: document.getElementById('mail-badge'),
+  moreBadge: document.getElementById('more-badge'),
   hookStatus: document.getElementById('hook-status'),
   statusMessage: document.getElementById('status-message'),
   agentTree: document.getElementById('agent-tree'),
@@ -257,8 +258,15 @@ function switchView(viewId) {
     tab.classList.toggle('active', tab.dataset.view === viewId);
   });
 
+  let hasActiveDropdownView = false;
   document.querySelectorAll('.nav-dropdown-item').forEach(item => {
-    item.classList.toggle('active', item.dataset.view === viewId);
+    const isActive = item.dataset.view === viewId;
+    item.classList.toggle('active', isActive);
+    if (isActive) hasActiveDropdownView = true;
+  });
+
+  document.querySelectorAll('.nav-dropdown-toggle').forEach(toggle => {
+    toggle.classList.toggle('active', hasActiveDropdownView);
   });
 
   views.forEach(view => {
@@ -762,8 +770,14 @@ function subscribeToState() {
 
     // Update badge
     const unread = mail.filter(m => !m.read).length;
-    elements.mailBadge.textContent = unread;
-    elements.mailBadge.classList.toggle('hidden', unread === 0);
+    if (elements.mailBadge) {
+      elements.mailBadge.textContent = unread;
+      elements.mailBadge.classList.toggle('hidden', unread === 0);
+    }
+    if (elements.moreBadge) {
+      elements.moreBadge.textContent = unread;
+      elements.moreBadge.classList.toggle('hidden', unread === 0);
+    }
   });
 }
 

js/components/dashboard.js

@@ -288,6 +288,7 @@ function renderGettingStarted() {
       </div>
     </div>
   `;
+}
 
 /**
  * Calculate dashboard metrics

js/components/modals.js

@@ -99,12 +99,13 @@ export function initModals() {
     btn.addEventListener('click', closeAllModals);
   });
 
-  // Open buttons
-  document.querySelectorAll('[data-modal-open]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const modalId = btn.dataset.modalOpen;
-      openModal(modalId);
-    });
+  // Open buttons (delegated so dynamically rendered content works too)
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-modal-open]');
+    if (!btn) return;
+    const modalId = btn.dataset.modalOpen;
+    if (!modalId) return;
+    openModal(modalId);
   });
 
   // Form submissions

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gastown-gui",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Web GUI for Gas Town multi-agent orchestrator - A companion interface for steveyegge/gastown",
   "type": "module",
   "main": "server.js",

package.json

@@ -113,8 +113,41 @@ export async function waitForConnection(page) {
  * Click a navigation tab and wait for view to switch
  */
 export async function switchView(page, viewName) {
-  await page.waitForSelector(`[data-view="${viewName}"]`, { timeout: 5000 });
-  await page.click(`[data-view="${viewName}"]`);
+  const selector = `[data-view="${viewName}"]`;
+  await page.waitForSelector(selector, { timeout: 5000 });
+
+  const clickVisibleTarget = async () => {
+    return page.evaluate((target) => {
+      const nodes = Array.from(document.querySelectorAll(`[data-view="${target}"]`));
+      const visible = nodes.find((el) => {
+        const rect = el.getBoundingClientRect();
+        const style = window.getComputedStyle(el);
+        return rect.width > 0 && rect.height > 0 && style.visibility !== 'hidden' && style.display !== 'none';
+      });
+      if (!visible) return false;
+      visible.click();
+      return true;
+    }, viewName);
+  };
+
+  let clicked = await clickVisibleTarget();
+  if (!clicked) {
+    await page.waitForSelector('.nav-dropdown-toggle', { timeout: 5000 });
+    await page.click('.nav-dropdown-toggle');
+    const dropdownItemSelector = `.nav-dropdown.open .nav-dropdown-item[data-view="${viewName}"]`;
+    await page.waitForSelector(dropdownItemSelector, { timeout: 5000 });
+    await page.evaluate((target) => {
+      const item = document.querySelector(`.nav-dropdown-item[data-view="${target}"]`);
+      if (!item) return;
+      item.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    }, viewName);
+    clicked = true;
+  }
+
+  if (!clicked) {
+    throw new Error(`Unable to click a visible nav item for view: ${viewName}`);
+  }
+
   await page.waitForSelector(`#view-${viewName}.active`, { timeout: 5000 });
 }