miss: driver toured a table whose cost text overlapped the next column's pill by 48px and reported zero visual findings

[ivndev001]

What happened

On 2026-07-31 a ui-debugger tour (3 sequential driver runs, managed headless Chrome) covered the multi-ai-router admin console: login, Overview, Accounts, Pools, Keys, Usage, Settings, theme. The runs reported zero visual findings. The Accounts table the driver walked past had, on every row, the USAGE cell's two-line cost block overflowing its column and painting across the CREDENTIAL cell's pill badge — the pill's border striking through both dollar figures, the figures visible through the pill.

Reproduced and measured 2026-08-01 on the same seeded dev DB (viewport 1440×900; identical geometry on all 3 rows):

• cost block right edge extends 64px past its cell's right edge;
• overlap with the pill: 48px × 24px (pill is 110×24, so its left half is under the text);
• pill computed background rgba(0, 0, 0, 0) — text paints through it, which is what makes it read as strikethrough rather than occlusion.

The defect is structural, not data-dependent: it reproduces with zero-usage data ($0.00) — the driver's runs had it on screen. (No screenshots survive in the run records to prove the exact pixels the driver saw, and a much wider viewport could have relieved the table squeeze — but the seed, the table, and the CSS were identical, and headless defaults are narrower, not wider.)

The app bug itself is tracked as multi-ai-router#62.

Why the miss matters

This is precisely the class the visual/UX feedback leg exists for: a human glancing at the table for one second sees it. Contributing hypotheses, in rough order of likelihood:

1. Vision-model resolution/attention. The overlap band is 24px tall inside a ~900px-tall screenshot, and a border-through-text pattern is visually quiet compared to what screenshot review prompts usually hunt (blank regions, broken layouts, error states).
2. Functional briefs steer attention. The tour briefs were interaction-first (click every control, switch windows, open dialogs). Visual findings are a secondary output, so nothing ever asked "does anything overlap anything else on this page?"
3. No explicit overlap checklist. The visual review prompt presumably has no "text overlapping other elements / borders striking through text" item; this defect class is unlisted.

What would have caught it

A deterministic DOM-geometry sweep needs no vision at all for this class — proposed as #55, with this case as its acceptance fixture. Independent of that: an explicit overlap/strikethrough item in the visual review checklist, and a standing "for each data table, look at column boundaries" heuristic on table-heavy admin consoles.

[dinndev2]

Second reproduction — this time on our own fixture, with a checked-in answer key and surviving screenshots

This report notes that "no screenshots survive in the run records to prove the exact pixels the driver saw." Here is a run where they do, against dummy/web, whose planted bugs are enumerated in BUGS.md. That makes it the graded acceptance case #55 asks for, without needing a seeded external DB.

Run: @developerz.ai/ui-debugger-mcp@1.8.0 (published latest), browser adapter, managed headless Chromium, 1280x720, session 2026-08-08_02-14-06-0001. Goal was interaction-first (browse, add to cart, subscribe) with a trailing "report anything that looks broken, unreadable, or misaligned."

Grade against dummy/web/BUGS.md

Planted	Detected
1. Hero subtitle white on #fdfdfd	yes — reported 1.02:1, severity high
2. logo.png 404	yes (network)
2. product-3.png 404	yes (network)
2. alt="" on product-3, alt="logo" non-descriptive	no
3a. Product 3 add-to-cart has no handler	no — see below, and the report is wrong about it
3b. Product 4 throws ReferenceError	yes (console)
3c. Newsletter form reloads the page on submit	no — reported as working (filed as #60)
4a. Price #cfcfcf	yes — reported 1.56:1
4b. Cramped add button, no :hover	no
4c. Grid heading width:320px; white-space:nowrap	no
4d. Third card margin-top:-14px	no
5. /api/featured 404 + JSON SyntaxError	yes (console + network)

Console and network are strong. Everything caught came from those two channels. The visual leg produced exactly three findings, all contrast ratios; not one geometric finding, which is this issue's thesis reproduced.

The geometry, measured

Same viewport as the run, via getBoundingClientRect / scrollWidth:

heading  "Featured products from the spring collection"
         clientWidth 320  scrollWidth 614  ->  paints 294px outside its own box
         computed white-space: nowrap, overflow: visible

cards    tops [550, 550, 536, 550]  ->  third card 14px out of row alignment
         pairwise rect intersections: 0

The heading is #55's rule 1 almost verbatim — an element whose content box is exceeded by its own content while computed overflow is visible — and it is 294px, not a subtle 24px band. One comparison finds it. The vision leg looked at a screenshot containing it and said nothing.

One honest correction to the fixture's own framing: at 1280px the third card is misaligned but not overlapping (0 pairwise intersections). BUGS.md §4d calls it an overlap; that only manifests when the grid wraps to more than one row. A 14px break in a row of four is still a legitimate visual finding a human spots instantly, and it was also missed — but the sweep in #55 should not expect an intersection hit here.

The miss is not only geometric

Two of the misses are plain DOM attribute reads, no vision and no geometry involved:

img /images/product-3.png   alt=""       naturalWidth 0  (broken)
img /images/logo.png        alt="logo"   naturalWidth 0  (broken)
button "Add to cart" (#3)   onclick === null

The third one changes a report from incomplete to wrong. The run's summary says the cart "stops updating after 2 items" and attributes products 3 and 4 both to quantityToAdd is not defined. Product 3 does not throw — it has no handler at all (ProductGrid.tsx:19-21 renders it without onAdd), so it fails silently and for a different reason. The driver inferred one cause for two symptoms because a silent no-op leaves no console trace, and onclick === null on a control the goal depends on was never read.

So the sweep this issue and #55 are converging on wants three cheap rules, not one:

1. geometry — content exceeding its own box while overflow: visible; sibling rect intersection (feat: deterministic layout-defect sweep (DOM geometry) per visited page — catch overflow/overlap without a vision model #55 as written);
2. a11y attributes — broken image with empty or non-descriptive alt;
3. dead controls — an interactive element with no handler and no form/href, when the goal asked the driver to use it.

All three are deterministic, millisecond-cheap, and independent of the vision model. Rule 3 is what stops a run from confidently naming the wrong cause.

Related: #60 (unrequested navigation invisible — the newsletter miss, a fourth deterministic signal that was captured and never consumed).