Clip the inspector to the device; guard the page against our own controls

Two things the inspector got wrong on a scrollable screen. Native frames
routinely extend past the display — a horizontally scrollable chip row,
list content below the fold — and the overlay drew them unclipped, so
boxes floated in the black beside the device describing elements nobody
could point at. The overlay now clips to the device and its corners, and
nodes lying wholly off-screen are skipped rather than drawn.

The guard is the more important half. The device page is a test target,
so it must contain nothing but the device: any control of ours living
there would appear in an agent's snapshot beside the app's own elements,
indistinguishable from them, and an agent told to tap a button could
drive DeviceDeck instead of the app under test. Checked by pointing
playwright-mcp at the page — every ref it minted was an app element, the
only non-app node being the mirror root — and the test now fails if a
button, input, link or select ever appears there. Our controls belong on
the console, which is a surface for people.

Author: omnarayan

internal/web/static/app.js

@@ -502,6 +502,10 @@ function renderOverlay(nodes) {
     const f = node.frame;
     if (node.depth === 0 || f.width <= 0 || f.height <= 0) continue;
     if (!node.identifier && !node.label && !node.hittable) continue;
+    // Wholly off-screen: a recycled list cell parked below the fold, or
+    // a scrollable row's overflow. It is in the tree and cannot be
+    // pointed at, so drawing it only adds boxes with nothing under them.
+    if (f.x >= app.width || f.y >= app.height || f.x + f.width <= 0 || f.y + f.height <= 0) continue;
     const el = document.createElement("div");
     el.className = "node";
     el.style.left = `${(f.x / app.width) * 100}%`;

internal/web/static/style.css

@@ -87,6 +87,12 @@ main { flex: 1; display: flex; min-height: 0; }
 #overlay {
   position: absolute;
   pointer-events: none;
+  /* Clipped to the device, and to its corners. Native frames routinely
+     extend past the screen — a horizontally scrollable row, list content
+     below the fold — and drawn unclipped those boxes float in the black
+     beside the device, describing elements nobody can point at. */
+  overflow: hidden;
+  border-radius: 24px;
 }
 
 #overlay .node {

internal/web/web_test.go

@@ -73,3 +73,31 @@ func TestConsoleHeaderWraps(t *testing.T) {
 		t.Error("the app-id input must be allowed to shrink")
 	}
 }
+
+// The device page is a test target, so it must contain nothing but the
+// device. Any control of ours living there would appear in an agent's
+// snapshot beside the app's own elements — indistinguishable from them —
+// and an agent told to "tap the button" could drive DeviceDeck instead
+// of the app under test. The console is where our controls belong.
+func TestDevicePageCarriesNoControlsOfOurOwn(t *testing.T) {
+	body := get(t, "/device/EB69B42A-4763-4A33-AF0F-CD233F721951").Body.String()
+	// Everything between <body> and the scripts is the test target.
+	start := strings.Index(body, "<body>")
+	end := strings.Index(body, "<script")
+	if start < 0 || end < 0 {
+		t.Fatal("device page shape changed; this guard needs updating")
+	}
+	markup := body[start:end]
+	for _, forbidden := range []string{"<button", "<input", "<select", "<textarea", "<a "} {
+		if strings.Contains(markup, forbidden) {
+			t.Errorf("device page carries %q — an agent would see it as part of the app:\n%s",
+				forbidden, markup)
+		}
+	}
+	// The mirror and the video are the only things that belong.
+	for _, want := range []string{`id="video"`, `id="mirror"`} {
+		if !strings.Contains(markup, want) {
+			t.Errorf("device page is missing %s", want)
+		}
+	}
+}