From f106275643608c5cd63affe55d9637b0da4f2ba0 Mon Sep 17 00:00:00 2001
From: Michael <michael.dombaugh@gmail.com>
Date: Mon, 18 May 2026 22:23:35 +0000
Subject: [PATCH] test(home): replace clutter outliner with click-to-inspect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User reported the previous diagnostic was too cluttered to read,
and the white bar showed no outline anyway — meaning the flat
``querySelectorAll('body *')`` walker missed it (likely inside an
iframe's contentDocument, which the script didn't recurse into).

New approach: a single red button "CLAUDE: click here, then click
the white bar" in the top-right. Clicking the button arms an
inspect handler. The next click anywhere on the page reports the
full element stack at that point via ``elementsFromPoint`` AND
recursively descends into any same-origin iframe at the click
location, so iframe contents are no longer invisible.

A black report panel lists every element in the stack with its
tag/id/testid/class, position, z-index, background color, and
bounding rect — TOP element highlighted in red. User clicks the
white bar exactly once and we know what it is.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/gui/_home.py | 226 +++++++++++++++++++++++++----------------------
 1 file changed, 119 insertions(+), 107 deletions(-)

diff --git a/src/gui/_home.py b/src/gui/_home.py
index 509ae57..66db2fb 100644
--- a/src/gui/_home.py
+++ b/src/gui/_home.py
@@ -310,33 +310,22 @@ def _home_page() -> None:
         """
 <script>
 (function () {
-  // Cast a wide net: outline EVERY element whose visible rect lives
-  // in the bottom 200px of the viewport, regardless of position type.
-  // Different border styles for different position values so the user
-  // can tell at a glance what kind of element each box is.
-  // Also dump a readable list onto the page (top-right panel) so the
-  // user can read the labels without needing devtools.
-  function styleFor(pos, idx) {
-    var palette = ['#e6194b', '#3cb44b', '#4363d8', '#f58231', '#911eb4',
-                   '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080'];
-    var color = palette[idx % palette.length];
-    var width = '3px';
-    var style = 'solid';
-    if (pos === 'sticky') style = 'dashed';
-    else if (pos === 'absolute') style = 'dotted';
-    else if (pos === 'static' || pos === 'relative') {
-      style = 'solid';
-      width = '1px';
-    }
-    return { color: color, css: width + ' ' + style + ' ' + color };
-  }
-  function inspect() {
+  // CLICK-TO-INSPECT: a single button enters inspect mode. The next
+  // click anywhere on the page reports the full element stack at
+  // that point — including elements inside same-origin iframes
+  // (which earlier diagnostics couldn't reach with a flat walker).
+  // No clutter outside the button + the report panel; nothing
+  // re-runs on scroll.
+  function init() {
     var doc = window.parent.document;
-    if (!doc) return;
     var winp = window.parent;
-    var vh = winp.innerHeight;
-    var vw = winp.innerWidth;
-    // Clear previous outlines + labels.
+    if (!doc || !doc.body) { setTimeout(init, 300); return; }
+    // Clear any earlier diagnostic chrome.
+    ['claude-diag-panel', 'claude-inspect-btn', 'claude-inspect-report']
+      .forEach(function (id) {
+        var prev = doc.getElementById(id);
+        if (prev) prev.remove();
+      });
     doc.querySelectorAll('[data-claude-label]').forEach(function (n) {
       n.remove();
     });
@@ -345,92 +334,115 @@ def _home_page() -> None:
       el.style.outlineOffset = '';
       el.removeAttribute('data-claude-outlined');
     });
-    var panel = doc.getElementById('claude-diag-panel');
-    if (panel) panel.remove();
-    panel = doc.createElement('div');
-    panel.id = 'claude-diag-panel';
-    panel.style.cssText =
-      'position:fixed;top:8px;right:8px;width:420px;max-height:60vh;'
-      + 'overflow:auto;background:rgba(0,0,0,0.88);color:#fff;'
-      + 'font:11px/1.35 ui-monospace,monospace;padding:8px 10px;'
-      + 'border-radius:6px;z-index:2147483647;'
-      + 'box-shadow:0 4px 16px rgba(0,0,0,0.4);';
-    panel.innerHTML =
-      '<div style="font-weight:700;margin-bottom:4px;">'
-      + 'CLAUDE DIAG — elements in bottom ' + 200 + 'px of viewport '
-      + '(vh=' + vh + ')</div>'
-      + '<div style="font-size:10px;opacity:.7;margin-bottom:6px;">'
-      + 'Border styles: solid=fixed, dashed=sticky, dotted=absolute, '
-      + 'thin=static/relative</div>';
-    var rows = [];
-    var idx = 0;
-    var seen = new Set();
-    doc.querySelectorAll('body *').forEach(function (el) {
-      if (seen.has(el)) return;
+
+    var btn = doc.createElement('button');
+    btn.id = 'claude-inspect-btn';
+    btn.type = 'button';
+    btn.textContent = 'CLAUDE: click here, then click the white bar';
+    btn.style.cssText =
+      'position:fixed;top:8px;right:8px;z-index:2147483647;'
+      + 'background:#b00020;color:#fff;font:13px/1.2 system-ui,sans-serif;'
+      + 'font-weight:700;padding:8px 14px;border:none;border-radius:6px;'
+      + 'cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.35);';
+    doc.body.appendChild(btn);
+
+    function describe(el) {
+      if (!el || !el.tagName) return '?';
+      var testid = el.getAttribute && el.getAttribute('data-testid');
+      var cls = (el.className && typeof el.className === 'string')
+        ? el.className.split(/\\s+/).slice(0, 3).join('.') : '';
+      var cs = (el.ownerDocument.defaultView || winp)
+        .getComputedStyle(el);
       var rect = el.getBoundingClientRect();
-      // Must intersect the bottom 200px of the viewport.
-      if (rect.bottom < vh - 200 || rect.top > vh) return;
-      if (rect.width < 2 || rect.height < 2) return;
-      if (rect.width > vw + 50 || rect.height > vh + 50) return;
-      var cs = winp.getComputedStyle(el);
-      // Skip transparent backgrounds — we want to find OPAQUE
-      // overlays. But keep fixed/sticky regardless, since those can
-      // still cause overlay even without bg color (children paint).
-      var hasOpaqueBg =
-        cs.backgroundColor !== 'rgba(0, 0, 0, 0)'
-        && cs.backgroundColor !== 'transparent';
-      var positioned = cs.position === 'fixed'
-        || cs.position === 'sticky' || cs.position === 'absolute';
-      if (!hasOpaqueBg && !positioned) return;
-      seen.add(el);
-      var st = styleFor(cs.position, idx);
-      idx += 1;
-      el.style.outline = st.css;
-      el.style.outlineOffset = '-3px';
-      el.setAttribute('data-claude-outlined', '1');
-      var testid = el.getAttribute('data-testid');
-      var name = el.tagName.toLowerCase()
+      return el.tagName.toLowerCase()
         + (el.id ? '#' + el.id : '')
-        + (testid ? '[' + testid + ']' : '')
-        + (el.className && typeof el.className === 'string'
-              ? '.' + el.className.split(/\\s+/).slice(0, 2).join('.') : '');
-      var summary =
-        'pos=' + cs.position
-        + ' z=' + cs.zIndex
-        + ' top=' + Math.round(rect.top)
-        + ' h=' + Math.round(rect.height) + 'px'
-        + ' bg=' + cs.backgroundColor;
-      rows.push(
-        '<div style="margin:2px 0;padding:3px 5px;'
-        + 'border-left:4px solid ' + st.color + ';background:#111;">'
-        + '<div style="color:' + st.color + ';font-weight:700;">'
-        + name + '</div>'
-        + '<div style="opacity:.85;">' + summary + '</div></div>'
-      );
-      // Floating label on the element itself.
-      var lbl = doc.createElement('div');
-      lbl.setAttribute('data-claude-label', '1');
-      lbl.textContent = name;
-      lbl.style.cssText =
-        'position:fixed;left:' + Math.max(0, rect.left) + 'px;'
-        + 'top:' + Math.max(0, rect.top - 16) + 'px;'
-        + 'background:' + st.color + ';color:#fff;'
-        + 'font:10px/1.2 ui-monospace,monospace;'
-        + 'padding:1px 4px;border-radius:3px;'
-        + 'z-index:2147483646;pointer-events:none;'
-        + 'white-space:nowrap;max-width:60vw;overflow:hidden;'
-        + 'text-overflow:ellipsis;';
-      doc.body.appendChild(lbl);
+        + (testid ? '[testid=' + testid + ']' : '')
+        + (cls ? '.' + cls : '')
+        + ' { pos=' + cs.position
+        + ', z=' + cs.zIndex
+        + ', bg=' + cs.backgroundColor
+        + ', rect=(' + Math.round(rect.left) + ','
+        + Math.round(rect.top) + ' '
+        + Math.round(rect.width) + 'x'
+        + Math.round(rect.height) + ') }';
+    }
+
+    function showReport(stack, x, y, frameLabel) {
+      var prev = doc.getElementById('claude-inspect-report');
+      if (prev) prev.remove();
+      var panel = doc.createElement('div');
+      panel.id = 'claude-inspect-report';
+      panel.style.cssText =
+        'position:fixed;top:8px;left:8px;right:8px;max-height:60vh;'
+        + 'overflow:auto;background:rgba(0,0,0,0.92);color:#fff;'
+        + 'font:12px/1.4 ui-monospace,monospace;padding:10px 12px;'
+        + 'border-radius:6px;z-index:2147483647;'
+        + 'box-shadow:0 4px 18px rgba(0,0,0,0.5);';
+      var html =
+        '<div style="font-weight:700;color:#ffb;margin-bottom:6px;">'
+        + 'CLICKED AT (' + x + ',' + y + ') — ' + frameLabel + '</div>';
+      stack.forEach(function (el, i) {
+        html += '<div style="margin:3px 0;padding:3px 6px;'
+          + 'background:' + (i === 0 ? '#3a0010' : '#111')
+          + ';border-left:3px solid '
+          + (i === 0 ? '#ff4060' : '#555') + ';">'
+          + (i === 0 ? '<b>TOP: </b>' : ('[' + i + '] '))
+          + describe(el) + '</div>';
+      });
+      html += '<button onclick="this.parentElement.remove()" '
+        + 'style="margin-top:8px;background:#444;color:#fff;'
+        + 'border:none;padding:4px 10px;border-radius:4px;'
+        + 'cursor:pointer;">close</button>';
+      panel.innerHTML = html;
+      doc.body.appendChild(panel);
+    }
+
+    function pickFromPoint(targetDoc, x, y, label, depth) {
+      depth = depth || 0;
+      var stack = (targetDoc.elementsFromPoint
+        ? targetDoc.elementsFromPoint(x, y) : []);
+      // Recurse into any same-origin iframe at the click point.
+      for (var i = 0; i < stack.length; i++) {
+        var el = stack[i];
+        if (el && el.tagName === 'IFRAME' && depth < 3) {
+          try {
+            var inner = el.contentDocument;
+            if (inner) {
+              var r = el.getBoundingClientRect();
+              var innerStack = pickFromPoint(inner,
+                x - r.left, y - r.top,
+                label + ' > IFRAME(' + (el.src || 'srcdoc') + ')',
+                depth + 1);
+              if (innerStack && innerStack.length) {
+                return innerStack.concat(stack);
+              }
+            }
+          } catch (e) { /* cross-origin */ }
+        }
+      }
+      // Tag the frame label onto the returned stack via showReport.
+      showReport(stack, x, y, label);
+      return stack;
+    }
+
+    btn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      btn.textContent = 'click the white bar now…';
+      btn.style.background = '#0a8';
+      function onPick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        doc.removeEventListener('click', onPick, true);
+        btn.textContent = 'CLAUDE: click here, then click the white bar';
+        btn.style.background = '#b00020';
+        pickFromPoint(doc, ev.clientX, ev.clientY, 'parent doc', 0);
+      }
+      setTimeout(function () {
+        doc.addEventListener('click', onPick, true);
+      }, 50);
     });
-    panel.innerHTML += rows.join('') || '<i>(nothing found)</i>';
-    doc.body.appendChild(panel);
   }
-  setTimeout(inspect, 400);
-  setTimeout(inspect, 1500);
-  setTimeout(inspect, 3500);
-  window.parent.addEventListener('scroll', function () {
-    setTimeout(inspect, 80);
-  }, true);
+  init();
 })();
 </script>
 """,