Problem
The driver's visual/UX feedback leg currently depends on a vision model reviewing screenshots. That misses a class of layout defect that is trivially detectable from the DOM: content painting outside its container and overlapping a sibling's content (case study in the linked miss report — text from one table column overlapping the next column's badge by 48×24px, present on screen for an entire tour, never flagged).
Vision fidelity limits (screenshot downscaling, a 24px-tall overlap band in a 900px-tall frame, attention steered by functional briefs) make this class unreliable to catch from pixels. From geometry it is a few comparisons.
Proposal
After each navigation/observe, run a cheap in-page sweep and surface hits as structured findings the driver can include in its report. No model call, milliseconds, deterministic:
- Cell/container overflow — for every element, descendants whose
getBoundingClientRect() exceeds the element's own rect while computed overflow is visible. On <td>/<th> this catches text spilling out of a table cell.
- Sibling-cell intersection — in tables, pairwise rect intersection between elements belonging to different cells of the same row. Catches overlap even when the overflowing element is inside its own cell (e.g. absolutely positioned).
- See-through occlusion check (optional) — for hits from (1)/(2), flag when the overlapped element has a transparent
background-color, which is what turns a hidden overlap into a visible "text painted through a pill" defect.
Hits report: page URL, the two selectors, the overlap rect, and computed-style facts (overflow, background alpha). The driver can then verify interactively or file directly.
Acceptance fixture
The linked miss report contains a fully measured live case (multi-ai-router Accounts table, dev seed, viewport 1440×900: 64px cell spill, 48×24px element overlap, transparent badge). A sweep run on that page must flag ≥1 finding naming the dl.spend ↔ credential badge pair.
Problem
The driver's visual/UX feedback leg currently depends on a vision model reviewing screenshots. That misses a class of layout defect that is trivially detectable from the DOM: content painting outside its container and overlapping a sibling's content (case study in the linked miss report — text from one table column overlapping the next column's badge by 48×24px, present on screen for an entire tour, never flagged).
Vision fidelity limits (screenshot downscaling, a 24px-tall overlap band in a 900px-tall frame, attention steered by functional briefs) make this class unreliable to catch from pixels. From geometry it is a few comparisons.
Proposal
After each navigation/observe, run a cheap in-page sweep and surface hits as structured findings the driver can include in its report. No model call, milliseconds, deterministic:
getBoundingClientRect()exceeds the element's own rect while computedoverflowisvisible. On<td>/<th>this catches text spilling out of a table cell.background-color, which is what turns a hidden overlap into a visible "text painted through a pill" defect.Hits report: page URL, the two selectors, the overlap rect, and computed-style facts (overflow, background alpha). The driver can then verify interactively or file directly.
Acceptance fixture
The linked miss report contains a fully measured live case (multi-ai-router Accounts table, dev seed, viewport 1440×900: 64px cell spill, 48×24px element overlap, transparent badge). A sweep run on that page must flag ≥1 finding naming the
dl.spend↔ credential badge pair.