feat(design): a passive layout audit with an inbox the person triages - #154
Merged
Conversation
The prototype audits its own layout once fonts, geometry and finite animations settle — clipped text and controls, controls and text outside the viewport, a page that scrolls sideways, text covered by an opaque sibling — keeps only what two samples agree on, and reports each pass with its own completeness. Passes land in a "Layout issues" inbox on the review page (badge, drawer, select, queue, dismiss, reveal); nothing reaches the agent until the person queues it, and then it is one ordinary note. A warning clears only on a complete pass of a newer revision that no longer finds it; a failed pass, another viewport or a reload in flight never clears anything, and a dismissal lasts one revision. Every frame load is named by a token so a replaced frame's pass is discarded, the page holds the prototype behind a short curtain until its first pass, probes the server when the frame stays silent, and the one unasked report is a prototype that cannot be shown at all. Ported from lavish-axi's layout-warnings lifecycle and artifact audit, with the same thresholds and timings. Claude-Session: https://claude.ai/code/session_013JrKXL4pdgTu2EtCjgiYyq
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tranche B of the lavish-axi parity plan: the passive layout audit.
Inside the prototype (
client/audit.ts, bundled beside the helpers): afterfonts.ready, a ResizeObserver settle (180 ms / 2 s), finite animations (≤ 4 s) and two rAF, the page is sampled twice 120 ms apart and once more after DOM quiescence; only findings present in both samples survive. Six rules —page-horizontal-overflow,clipped-text,clipped-control,viewport-unreachable-control,viewport-unreachable-content,overlapping-text— with lavish's thresholds and suppressions (diagrams/SVG, visually-hidden text, ellipsis/line-clamp, real scrollers, elements in motion, positioned decoration,data-redcode-ui). The pure classifiers live inhelpers.tsand are unit-tested. A pass carries its own completeness.Server (
layout-warnings.ts, a port of lavish's lifecycle with its 27 tests): fingerprintsha256(rule|target|viewport)[:16]without magnitude; statusesopen|queued|recurring|unverified|reopened|resolved|dismissed|obsolete; a warning clears only on a complete pass of a newer revision, a failed pass marks it unverified, another viewport class never touches it, dismissal lasts one revision, ≤ 200 stored, ≤ 50 per note, history ≤ 20. Warnings persist in the review sidecar.Load epochs: the shell names every frame load (
POST /design/:id/loads/begin, per shell, out-of-order detected) and the token rides on the frame URL;index.html?load=refuses a replaced load with 409,&probe=1answers whether the document can be served. A pass is accepted only under a current token, matching revision and increasing sequence.Routes:
POST /layout-diagnostics(never wakes the agent),GET /layout-warnings,POST /layout-warnings/queue(prepares the note; 409conflictwhen the revision moved; committed toqueuedwhen the note is delivered through/feedback),POST /layout-warnings/dismiss,POST /artifact-failures(artifact-unavailable/artifact-asset-unavailable, deduped per load — the one report that wakes the agent, as<artifact-failures>). The event stream sendslayout-warningson open and on change.Shell: "Layout issues" badge and drawer (select all, per-row Reveal/Dismiss, "Queue selected fixes" → one
layout-warningsnote with lavish's exact prompt payload; selection persisted per tab; rows already queued to send are shown as such), a curtain until the first pass with "Show anyway" and a 12 s cap (experimental.design.gate,gate_timeout≤ 60 s,?gate=0per tab), an 8 s silence probe and a 15 s boot failsafe card whose Retry asks the server first. The reload debounce widens to 900 ms while a batch of fixes is outstanding. Also fixes a latentReferenceErrorin the shell's end-review path.Config:
experimental.design.viewports(a class left out has its warnings marked obsolete, never resolved),gate,gate_timeout.Agent side:
design_previewnames open, unqueued issues as a note; the mode prompt explains the inbox, thelayout issues: N queued for repairtarget, and<artifact-failures>.Tests:
layout-warnings.test.ts(27, ported), classifiers and bundle insdk.test.ts, five route scenarios (pass never prompts, replay/forged stale, queue conflict + commit on delivery, dismiss for one revision, failures prompt once and are stale under an old load, SSE carries the inbox), a registry load test, shell markup/handshake/script-parse tests, sidecar round trip. 219 design tests pass.https://claude.ai/code/session_013JrKXL4pdgTu2EtCjgiYyq
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.