From 5f3e3719ccc4380f9389822f1cb6622213c72ca0 Mon Sep 17 00:00:00 2001
From: Joe <joe@example.com>
Date: Fri, 4 Sep 2026 17:16:37 -0400
Subject: [PATCH] feat(ui): add the Tools menu that reaches the diagnostic and
 field-test pages

Several shipped pages are reachable only by typing their URL, because the main
nav has no entry for them. This adds a Tools dropdown grouping them under Field
tests, Diagnostics and Views.

**This PR is wiring only and MUST merge last.** It adds no pages. Eight of the
eleven links point at pages that arrive with other PRs, so merging this first
would put dead entries in the nav. Three are already present here
(`viz.html`, `observatory.html`, `pose-fusion.html`) and would work today.

Deliberately kept as one small follow-up rather than splitting a menu line into
each page's PR: a nav menu is a single coherent thing, and assembling it three
lines at a time across eight PRs produces eight conflicts in one file for no
benefit. Reviewing it once, last, against the pages that actually landed is
both safer and less work.

The dropdown is plain markup plus a small inline handler -- no framework, no
build step, no dependency. It closes on outside click (including touch, where
there is no pointer to move away) and on Escape, and carries the
aria-haspopup / aria-expanded / role=menu wiring so it is reachable without a
mouse.

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 ui/index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/ui/index.html b/ui/index.html
index 857ebf2f60..0691e3d97c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -37,6 +37,40 @@ <h1>WiFi DensePose</h1>
             <button class="nav-tab" data-tab="applications" role="tab" aria-selected="false" aria-controls="applications">Applications</button>
             <button class="nav-tab" data-tab="sensing" role="tab" aria-selected="false" aria-controls="sensing">Sensing</button>
             <button class="nav-tab" data-tab="training" role="tab" aria-selected="false" aria-controls="training">Training</button>
+            <div class="nav-menu" id="toolsMenu">
+              <button class="nav-tab nav-menu-btn" id="toolsBtn" aria-haspopup="true"
+                      aria-expanded="false" aria-controls="toolsList">Tools &#9662;</button>
+              <div class="nav-menu-list" id="toolsList" role="menu" aria-labelledby="toolsBtn" hidden>
+                <span class="nav-menu-head">Field tests</span>
+                <a href="walk.html"   role="menuitem">Walk Test Runner<em>timed walk with ground-truth marks</em></a>
+                <a href="survey.html" role="menuitem">Tile Survey Runner<em>stand-on-each-tile fingerprinting</em></a>
+                <a href="mark.html"   role="menuitem">Room Marker<em>tag the current moment from a phone</em></a>
+                <span class="nav-menu-head">Diagnostics</span>
+                <a href="mesh.html"   role="menuitem">Mesh Matrix<em>who hears whom, and how well</em></a>
+                <a href="mesh3d.html" role="menuitem">RF Distance Map<em>link geometry, coordinate-free</em></a>
+                <a href="viz.html"    role="menuitem">3D Visualization<em>legacy pose view</em></a>
+                <a href="illuminators.html" role="menuitem">Illuminators<em>which transmitters light each node</em></a>
+                <a href="tapper.html" role="menuitem">Tapper<em>tap-to-timestamp ground truth</em></a>
+                <span class="nav-menu-head">Views</span>
+                <a href="world3d.html" role="menuitem">World 3D<em>rooms, nodes and links in space</em></a>
+                <a href="observatory.html" role="menuitem">Observatory<em>live signal observatory</em></a>
+                <a href="pose-fusion.html" role="menuitem">Pose Fusion<em>multi-node fused pose</em></a>
+              </div>
+            </div>
+        </nav>
+
+        <!-- Dashboard Tab -->
+        <section id="dashboard" class="tab-content active" role="tabpanel" aria-labelledby="dashboard">
+            <div class="hero-section">
+                <h2 data-i18n="dashboard.title">Revolutionary WiFi-Based Human Pose Detection</h2>
+                <p class="hero-description">
+                    AI can track your full-body movement through walls using just WiFi signals. 
+                    Researchers at Carnegie Mellon have trained a neural network to turn basic WiFi 
+                    signals into detailed wireframe models of human bodies.
+                </p>
+                
+                <!-- Error container -->
+                <div class="error-container" style="display: none;"></div>
             <a href="pose-fusion.html" class="nav-tab" style="text-decoration:none">Pose Fusion</a>
             <a href="observatory.html" class="nav-tab" style="text-decoration:none">Observatory</a>
         </nav>
@@ -516,6 +550,34 @@ <h2>Model Training</h2>
     <div id="globalErrorToast" class="error-toast"></div>
 
     <!-- Load application scripts as modules -->
-    <script type="module" src="app.js"></script>
+    <script type="module" src="app.js">  (function () {
+    var wrap = document.getElementById('toolsMenu');
+    if (!wrap) return;
+    var btn = document.getElementById('toolsBtn');
+    var list = document.getElementById('toolsList');
+    function close() {
+      list.hidden = true;
+      btn.setAttribute('aria-expanded', 'false');
+      wrap.classList.remove('open');
+    }
+    function open() {
+      list.hidden = false;
+      btn.setAttribute('aria-expanded', 'true');
+      wrap.classList.add('open');
+    }
+    btn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      list.hidden ? open() : close();
+    });
+    // Clicking anywhere else closes it, including on touch where there is no
+    // pointer to move away.
+    document.addEventListener('click', function (e) {
+      if (!wrap.contains(e.target)) close();
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') close();
+    });
+  })();
+</script>
 </body>
 </html>
\ No newline at end of file