Compare commits

...
Author SHA1 Message Date
Paul BakausandClaude Fable 5.1 3f345f7058 Add a real-browser regression for the documented-palette case
Greptile asked for coverage beyond FakeDom, and it is right that the
interesting question here is a browser one: whether the `oklch()` a
DESIGN.md declares and the `oklch()` Chrome computes for an element are the
same color by the time the rule sees them.

A `file://` target loads the DESIGN.md that governs the page's directory,
so the whole path runs end to end: the allowlist is parsed from markdown,
Chrome renders the page, and the browser element sweep decides. The test
writes two pages with the same shapes — verdigris text on a dark instrument
face, and a violet-to-verdigris gradient — one in declared tokens and one in
colors the DESIGN.md never mentions, and asserts the first is silent while
the second still fires. It skips cleanly with no installed browser or no
built binary, the way differential.rs does.

Verified against the pre-fix engine: the declared page reports two
ai-color-palette findings there and none here.

Assisted-by: Claude Code
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LQBUunp8QttxZqihybNmtL
2026-09-11 12:24:57 -07:00
Paul BakausandClaude Fable 5.1 bb1ca3c7df Fix: a DESIGN.md token is not the generic AI palette
`ai-color-palette` catches the palette nobody picked: the violet and the
cyan a model reaches for when there is no design system. The browser sweep
was reading only the hue, so a site whose own documented tokens land in
those bands tripped it on every element wearing one. On impeccable-site's
"Paper and instruments" pull request, where the DESIGN.md palette is a
verdigris `oklch(70% 0.12 188)` on an `oklch(24% 0 0)` instrument face,
that was 218 findings across 54 pages, all of them "Cyan neon text on dark
background" against a token the author had written down.

`check_element_ai_palette_dom` now takes the scan's design system and skips
any gradient stop or text color the DESIGN.md declares, matched with the
same `browser_colors_close` tolerance the `design-system-color` rule uses,
so a color that rule calls declared is declared here too. A scan with no
DESIGN.md, or one whose DESIGN.md has no palette, is unchanged: there is
nothing to consult and every color stays in scope.

Measured on that site (54 pages, headless Chrome, the in-page bundle):
with the design system, ai-color-palette drops 218 -> 8; without one it
stays at 218. The 8 survivors are the real thing, the purple gradients the
/slop and /docs before-and-after exhibits ship on purpose. No
design-system-* count moves.

Assisted-by: Claude Code
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LQBUunp8QttxZqihybNmtL
2026-09-11 12:13:52 -07:00
cb56ed6c19 Fix: detect placeholder contrast (#790) (#799)
* Fix: detect placeholder contrast (#790)

`detect` never read `::placeholder` color, so pale placeholders passed. Score them with the same WCAG math as body text, without host class/clip heuristics.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix: match descendant ::placeholder hosts (#790)

`.form ::placeholder` kept the ancestor as the host. Reuse the hover combinator star-fill so the color lands on the inputs inside.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix: placeholder-shown and gradient alpha (#790)

Browser scans skip when :placeholder-shown is false, so a live filled field does not keep the HTML value attribute's empty state. Translucent placeholders flatten over each gradient stop before scoring.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix: trailing combinator only for ::placeholder hosts (#790)

`star_empty_compounds` turned `.label + ::placeholder` into `.label *+*`. Fill only a trailing empty compound so adjacent-sibling hosts still match.

Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-10 13:49:59 -07:00
github-actions[bot] 3e1f67c52c Sync generated provider output 2026-09-10 20:46:13 +00:00
0c09f4c7e2 Fix: verify touch gestures in adapt, audit, and harden (#805) (#807)
* Fix: verify touch gestures in adapt, audit, and harden (#805)

The verification sections of adapt.md, audit.md, and harden.md listed
environments and layout properties but never had the agent exercise a
control's primary gesture, so an emulated viewport plus screenshots
could pass as touch testing. adapt now exercises the primary gesture
and the scroll-across trade and reports what produced the evidence,
audit checks broken touch interaction with code-level tells, harden
covers interrupted gestures and recovery, and a reference-contract
test pins the three sections.

Prepared with AI assistance (Claude Code), directed by @abdulwahabone.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* Pin the scroll, exercise, and cleanup sentences in the reference test (#805)

Greptile flagged that the contract test pinned the new labels but not
adapt's scroll-across trade, audit's instruction to exercise the
gesture, or harden's drag-state and capture cleanup.

Prepared with AI assistance (Claude Code), directed by @abdulwahabone.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-10 13:45:37 -07:00
7a7579858c test: scenario 19 documentation case when the context launcher is denied (#791)
* Add degraded Setup path: must-read pack when the context launcher is refused

When the host denies the impeccable context launcher (issue #789, measured
in #744), the Setup fallback now names the degraded path and its
unconditional must-read pack: the routed command's reference and
craft-floor.md before any UI edit, and document.md before writing DESIGN.md.
init.md gains the degraded Step 1 behavior, docs/CLI-CONTRACT.md documents
the degraded contract, and scenario 19 gains a denied-launcher documentation
case asserting document.md and source reads precede the DESIGN.md write.

No version bump, no changelog entry, no generated harness sync.

AI was used for assistance.
Includes AI_PR_NOTICE.txt per the repository's contribution policy: this
change was prepared without maintainer approval on issue #789, so no PR is
opened by the agent.

Co-authored-by: Matt Van Horn <mvanhorn@users.noreply.github.com>

* Drop restated degraded-setup prose; keep the scenario 19 documentation case

The launcher-unavailable path already lives on main. This removes the
notice file and the restated SKILL, init, and CLI-contract text, and keeps
the denied-launcher documentation coverage. The notice must now land before
the first tool call after the denial, not only before the eventual write.

AI was used for assistance.

Co-authored-by: Matt Van Horn <mvanhorn@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
2026-09-10 13:44:25 -07:00
67d018fe05 Fix: print JSON on live-poll --reply success (#800)
Successful --reply was exit 0 with empty stdout, so agents could not tell delivery from a hang. Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-10 08:47:39 +05:00
3bdb9ff06c Fix: drop stale carbonize diagnostic on complete (#801)
Complete and discarded snapshots no longer keep carbonize_cleanup_required after cleanup is done.

AI assistance: Cursor Grok 4.6.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-10 08:47:16 +05:00
94 changed files with 1594 additions and 179 deletions
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `$impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `$impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
+6
View File
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
+6 -1
View File
@@ -585,6 +585,7 @@ const __impeccableSnapshot = {
for (let id = 1; id < elements.length; id++) {
const el = elements[id];
const rec = { t: el.tagName };
const tag = rec.t;
const nsUri = el.namespaceURI || '';
const ns = __SNAP_NS[nsUri];
if (ns === undefined) { rec.n = 3; rec.nu = nsUri; } else if (ns !== 0) { rec.n = ns; }
@@ -615,6 +616,11 @@ const __impeccableSnapshot = {
if (content == null || content === '' || content === 'none') continue;
rec[key] = __SNAP_PSEUDO_PROPS.map(p => intern(ps[p]));
}
if ((tag === 'INPUT' || tag === 'TEXTAREA') && el.getAttribute('placeholder')) {
let ps;
try { ps = getComputedStyle(el, '::placeholder'); } catch { ps = null; }
if (ps) rec.ph = intern(ps.color);
}
if (typeof el.getBoundingClientRect === 'function') rec.r = __snapRect4(el.getBoundingClientRect());
rec.m = [
__snapNum(el.clientWidth), __snapNum(el.clientHeight), __snapNum(el.clientLeft),
@@ -632,7 +638,6 @@ const __impeccableSnapshot = {
if (typeof el.className !== 'string') rec.k = true;
const st = states.get(id);
if (st) rec.st = st;
const tag = rec.t;
if (tag === 'IMG' || tag === 'VIDEO' || tag === 'CANVAS' || tag === 'PICTURE') {
rec.md = {
nw: el.naturalWidth || 0, nh: el.naturalHeight || 0,
@@ -0,0 +1,138 @@
//! `ai-color-palette` against a project's own documented palette, through a
//! real browser.
//!
//! The FakeDom tests in `impeccable-core` pin the rule's decision; this one
//! pins the thing only a browser can answer: that the `oklch()` a DESIGN.md
//! declares and the `oklch()` Chrome computes for an element are the same
//! color by the time the rule sees them. A `file://` target loads the
//! DESIGN.md that governs the page's directory, so the whole path runs — the
//! allowlist is parsed from the markdown, the page is rendered, and the
//! browser element sweep decides.
//!
//! Skips cleanly without an installed browser or a built binary, the way
//! `differential.rs` does.
//!
//! Env:
//! - `IMPECCABLE_BIN` — the binary (default `target/debug/impeccable`).
use std::collections::HashMap;
use std::path::{Path, PathBuf};
use std::process::Command;
use serde_json::Value;
fn workspace_root() -> PathBuf {
Path::new(env!("CARGO_MANIFEST_DIR"))
.join("../..")
.canonicalize()
.expect("workspace root")
}
/// A DESIGN.md whose palette is all `oklch()`, including a verdigris that
/// sits inside the rule's cyan band and a violet inside its purple one.
const DESIGN_MD: &str = "---\n\
name: Instruments\n\
colors:\n\
\x20 paper: \"oklch(97.8% 0 0)\"\n\
\x20 ink: \"oklch(13% 0 0)\"\n\
\x20 instrument: \"oklch(24% 0 0)\"\n\
\x20 patina: \"oklch(70% 0.12 188)\"\n\
\x20 iris: \"oklch(58% 0.2 300)\"\n\
---\n\n\
The palette above is the whole system.\n";
fn page(swatch_color: &str, gradient: &str) -> String {
format!(
"<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\">\
<title>Instruments</title></head>\
<body style=\"background: oklch(97.8% 0 0); color: oklch(13% 0 0); font-family: Arial, sans-serif\">\
<div style=\"background: oklch(24% 0 0); padding: 24px\">\
<span style=\"color: {swatch_color}; font-size: 16px\">Live</span>\
</div>\
<section style=\"background-image: {gradient}; height: 200px\"></section>\
</body></html>"
)
}
fn rules(bin: &Path, dir: &Path, file: &str) -> Vec<String> {
let url = format!("file://{}", dir.join(file).display());
let out = Command::new(bin)
.arg("detect")
.arg("--json")
.arg(&url)
.current_dir(dir)
.output()
.expect("run detect");
let stdout = String::from_utf8_lossy(&out.stdout).to_string();
let parsed: Value = serde_json::from_str(&stdout)
.unwrap_or_else(|e| panic!("detect {url} did not print JSON ({e}): {stdout}"));
parsed
.as_array()
.expect("findings array")
.iter()
.filter_map(|f| f.get("antipattern")?.as_str().map(str::to_string))
.collect()
}
#[test]
fn ai_palette_respects_a_documented_oklch_palette() {
let env: HashMap<String, String> = std::env::vars().collect();
if impeccable_browser::discovery::find_browser(&env).is_err() {
eprintln!("skip: no installed browser found");
return;
}
let bin = std::env::var("IMPECCABLE_BIN")
.map(PathBuf::from)
.unwrap_or_else(|_| workspace_root().join("target/debug/impeccable"));
if !bin.exists() {
eprintln!(
"skip: {} missing (cargo build -p impeccable, or set IMPECCABLE_BIN)",
bin.display()
);
return;
}
let dir = std::env::temp_dir().join(format!("impeccable-ds-palette-{}", std::process::id()));
std::fs::create_dir_all(&dir).expect("temp dir");
// A project marker, so the DESIGN.md walk-up stops here rather than
// climbing out of the temp directory.
std::fs::write(dir.join("package.json"), "{\"name\":\"ds-palette-fixture\"}\n").unwrap();
std::fs::write(dir.join("DESIGN.md"), DESIGN_MD).unwrap();
std::fs::write(
dir.join("declared.html"),
page(
"oklch(70% 0.12 188)",
"linear-gradient(oklch(58% 0.2 300), oklch(70% 0.12 188))",
),
)
.unwrap();
std::fs::write(
dir.join("undeclared.html"),
page(
"rgb(0, 229, 255)",
"linear-gradient(rgb(168, 85, 247), rgb(59, 130, 246))",
),
)
.unwrap();
let declared = rules(&bin, &dir, "declared.html");
let undeclared = rules(&bin, &dir, "undeclared.html");
let _ = std::fs::remove_dir_all(&dir);
// Every color on this page is a token the DESIGN.md declares, so neither
// the palette rule nor the drift rule has anything to say.
assert!(
!declared.iter().any(|r| r == "ai-color-palette"),
"declared tokens reported as a generic AI palette: {declared:?}"
);
assert!(
!declared.iter().any(|r| r == "design-system-color"),
"declared tokens reported as drift: {declared:?}"
);
// The same shapes in colors the DESIGN.md never declared still fire.
assert!(
undeclared.iter().any(|r| r == "ai-color-palette"),
"undeclared neon and violet gradient went unreported: {undeclared:?}"
);
}
+63 -1
View File
@@ -1353,7 +1353,11 @@ pub fn collect_browser_findings(dom: &dyn Dom, config: &BrowserConfig) -> Collec
findings.extend(hits(ec::check_element_colors_dom(dom, el)));
findings.extend(hits(ec::check_element_motion_dom(dom, el)));
findings.extend(hits(ec::check_element_glow_dom(dom, el)));
findings.extend(hits(ec::check_element_ai_palette_dom(dom, el)));
findings.extend(hits(ec::check_element_ai_palette_dom(
dom,
el,
design_system.as_ref(),
)));
findings.extend(hits(ec::check_element_radial_spotlight_dom(dom, el)));
findings.extend(hits(ec::check_element_icon_tile_dom(dom, el)));
findings.extend(hits(ec::check_element_italic_serif_dom(dom, el)));
@@ -1791,6 +1795,64 @@ mod tests {
assert!(types(&out).contains(&"design-system-font".to_string()));
}
/// End to end through the collector: a page whose colors are all its own
/// documented oklch tokens must not report `ai-color-palette`, while a
/// color the DESIGN.md never declared still reports both rules.
#[test]
fn ai_palette_respects_the_design_system_palette() {
// oklch(24% 0 0) instrument face carrying oklch(70% 0.12 188) verdigris.
let make_dom = |text_color: &str| {
let mut d = FakeDom::new();
let (_h, body) = d.with_page();
let panel = d.add(Some(body), "div");
d.set_styles(panel, &[("backgroundColor", "rgb(58, 58, 58)")]);
d.el_mut(panel).check_visibility = Some(true);
let label = d.add(Some(panel), "span");
d.add_text(label, "Live");
d.set_styles(
label,
&[
("color", text_color),
("backgroundColor", "rgba(0, 0, 0, 0)"),
("fontFamily", "Inter, sans-serif"),
],
);
d.el_mut(label).check_visibility = Some(true);
d
};
let types = |out: &CollectResult| -> Vec<String> {
out.groups
.iter()
.flat_map(|g| g.findings.iter().map(|f| f.type_.clone()))
.collect()
};
let design_system = json!({
"present": true,
"hasFonts": true, "allowedFonts": ["Inter"],
"hasColors": true,
"allowedColors": [{ "r": 15, "g": 182, "b": 172 }, { "r": 58, "g": 58, "b": 58 }]
});
let with_ds = BrowserConfig {
design_system: Some(design_system),
..Default::default()
};
let without_ds = BrowserConfig::default();
// No DESIGN.md: the teal is an unexplained neon and the rule fires.
let out = collect_browser_findings(&make_dom("rgb(15, 182, 172)"), &without_ds);
assert!(types(&out).contains(&"ai-color-palette".to_string()));
// Declared token: neither the palette rule nor the drift rule fires.
let out = collect_browser_findings(&make_dom("rgb(15, 182, 172)"), &with_ds);
assert!(!types(&out).contains(&"ai-color-palette".to_string()), "{:?}", types(&out));
assert!(!types(&out).contains(&"design-system-color".to_string()), "{:?}", types(&out));
// An undeclared neon on the same page still reports both.
let out = collect_browser_findings(&make_dom("rgb(0, 229, 255)"), &with_ds);
assert!(types(&out).contains(&"ai-color-palette".to_string()), "{:?}", types(&out));
assert!(types(&out).contains(&"design-system-color".to_string()), "{:?}", types(&out));
}
#[test]
fn disabled_values_parse_and_normalize_like_the_js() {
// JS `.filter(e => e && typeof e === 'object' && e.rule && e.value)`:
+191 -8
View File
@@ -11,6 +11,7 @@ use super::dom::{
class_attr, class_attr_or_prop, closest_or_none, direct_text, has_direct_text_longer_than,
matches_or_false, pf0, safe_id, style_px, tag_lower, Dom, ElId, ElStyle, Rect,
};
use super::driver::{browser_colors_close, DesignSystemConfig};
use super::BrowserFinding;
use crate::checks::measures::{
self, border_colors_from_style, border_widths_from_style, check_gpt_thin_border_wide_shadow,
@@ -20,8 +21,9 @@ use crate::checks::measures::{
};
use crate::checks::rules::{
check_borders, check_colors, check_glow, check_hero_eyebrow, check_icon_tile,
check_italic_serif, check_motion, is_emoji_only_text, BorderOpts, ColorOpts, GlowOpts,
HeroEyebrowOpts, IconTileOpts, ItalicSerifOpts, MotionOpts, RuleHit, Sides, HEADING_TAGS,
check_italic_serif, check_motion, check_placeholder_colors, is_emoji_only_text, BorderOpts,
ColorOpts, GlowOpts, HeroEyebrowOpts, IconTileOpts, ItalicSerifOpts, MotionOpts, RuleHit,
Sides, HEADING_TAGS,
};
use crate::checks::text_rules::{
CURSOR_FIRST_VIEWPORT_PX, CURSOR_GLYPH_RE, POSITIONED_CHILD_INTERACTIVE_SELECTOR,
@@ -459,8 +461,8 @@ pub fn check_element_colors_dom(dom: &dyn Dom, el: ElId) -> Vec<RuleHit> {
} else {
resolve_gradient_stops(dom, el)
};
check_colors(&ColorOpts {
tag,
let color_opts = ColorOpts {
tag: tag.clone(),
text_color: parse_rgb_or_any(&dom.style(el, "color")),
bg_color: own_bg,
effective_bg: if surface_unresolved {
@@ -477,7 +479,36 @@ pub fn check_element_colors_dom(dom: &dyn Dom, el: ElId) -> Vec<RuleHit> {
bg_image: Some(dom.style(el, "backgroundImage")),
class_list: Some(class_attr(dom, el)),
detector_is_browser: true,
})
};
let mut findings = check_colors(&color_opts);
if tag == "input" || tag == "textarea" {
let placeholder = dom.attr(el, "placeholder").unwrap_or_default();
let placeholder = js::trim(&placeholder);
if !placeholder.is_empty() {
let skip = if tag == "input" {
let t = js::to_lower_case(&dom.attr(el, "type").unwrap_or_else(|| "text".into()));
matches!(
t.as_str(),
"hidden" | "checkbox" | "radio" | "file" | "submit" | "button" | "image"
| "reset" | "range" | "color"
)
} else {
false
} || !matches_or_false(dom, el, ":placeholder-shown");
if !skip {
if let Some(ph_raw) = dom.pseudo_style(el, "::placeholder", "color") {
if let Some(ph_color) = parse_rgb_or_any(&ph_raw) {
findings.extend(check_placeholder_colors(
&color_opts,
placeholder,
ph_color,
));
}
}
}
}
}
findings
}
// ── icon tile / italic serif / hero eyebrow ───────────────────────────────
@@ -686,11 +717,42 @@ pub fn check_element_glow_dom(dom: &dyn Dom, el: ElId) -> Vec<RuleHit> {
})
}
/// True when the scan was given a DESIGN.md and that file declares this
/// color as one of the project's own.
///
/// `ai-color-palette` is a rule about the *unchosen* palette: the purple and
/// the cyan a model reaches for when nobody picked one. A color the author
/// wrote down in DESIGN.md was picked, so it is not that default whatever
/// its hue, and a site whose whole palette is its own documented tokens must
/// not trip the rule on every element that wears one. With no design system
/// there is nothing to consult and every color stays in scope, which is the
/// behavior every scan without a DESIGN.md keeps.
///
/// The tolerance is `browser_colors_close`, the same one the
/// `design-system-color` rule matches computed colors with, so a token the
/// design-system rule calls declared is declared here too.
fn is_declared_design_color(ds: Option<&DesignSystemConfig>, c: &Rgba) -> bool {
let Some(ds) = ds else { return false };
if !ds.has_colors {
return false;
}
ds.allowed_colors
.iter()
.any(|allowed| browser_colors_close(c, allowed))
}
/// JS: checks.mjs#checkElementAIPaletteDOM(el)
pub fn check_element_ai_palette_dom(dom: &dyn Dom, el: ElId) -> Vec<RuleHit> {
pub fn check_element_ai_palette_dom(
dom: &dyn Dom,
el: ElId,
design_system: Option<&DesignSystemConfig>,
) -> Vec<RuleHit> {
let mut findings = Vec::new();
let bg_image = dom.style(el, "backgroundImage");
for c in parse_gradient_colors(Some(&bg_image)) {
if is_declared_design_color(design_system, &c) {
continue;
}
if has_chroma(Some(&c), Some(50.0)) {
let hue = get_hue(Some(&c));
if hue >= 260.0 && hue <= 310.0 {
@@ -709,7 +771,8 @@ pub fn check_element_ai_palette_dom(dom: &dyn Dom, el: ElId) -> Vec<RuleHit> {
}
}
}
let text_color = parse_rgb_or_any(&dom.style(el, "color"));
let text_color = parse_rgb_or_any(&dom.style(el, "color"))
.filter(|c| !is_declared_design_color(design_system, c));
if let Some(tc) = text_color {
if has_chroma(Some(&tc), Some(80.0)) {
let hue = get_hue(Some(&tc));
@@ -1378,6 +1441,61 @@ mod tests {
assert!(check_element_pseudo_stripe_dom(&d, card).is_empty());
}
#[test]
fn placeholder_low_contrast_flags() {
let (mut d, body) = page();
let input = d.add(Some(body), "input");
visible(&mut d, input);
d.set_attr(input, "placeholder", "Pale Placeholder On White Field");
d.set_rect(input, 0.0, 0.0, 200.0, 40.0);
d.set_styles(
input,
&[
("backgroundColor", "rgb(255, 255, 255)"),
("color", "rgb(0, 0, 0)"),
("fontSize", "16px"),
("fontWeight", "400"),
("webkitBackgroundClip", "border-box"),
],
);
d.set_pseudo_style(input, "::placeholder", "color", "rgb(187, 187, 187)");
d.add_selector(input, ":placeholder-shown");
let hits = check_element_colors_dom(&d, input);
assert!(
hits.iter().any(|h| {
h.id == "low-contrast"
&& h.snippet.contains("placeholder \"Pale Placeholder On White Field\"")
}),
"{hits:?}"
);
}
#[test]
fn placeholder_skips_when_not_shown() {
let (mut d, body) = page();
let input = d.add(Some(body), "input");
visible(&mut d, input);
d.set_attr(input, "placeholder", "Pale Placeholder On White Field");
d.set_attr(input, "value", "");
d.set_rect(input, 0.0, 0.0, 200.0, 40.0);
d.set_styles(
input,
&[
("backgroundColor", "rgb(255, 255, 255)"),
("color", "rgb(0, 0, 0)"),
("fontSize", "16px"),
("fontWeight", "400"),
("webkitBackgroundClip", "border-box"),
],
);
d.set_pseudo_style(input, "::placeholder", "color", "rgb(187, 187, 187)");
let hits = check_element_colors_dom(&d, input);
assert!(
hits.iter().all(|h| h.id != "low-contrast"),
"live filled field must not score a hidden placeholder, {hits:?}"
);
}
#[test]
fn colors_low_contrast_on_resolved_surface_and_pseudo_surface() {
let (mut d, body) = page();
@@ -1449,7 +1567,72 @@ mod tests {
"linear-gradient(rgb(168, 85, 247), rgb(59, 130, 246))",
);
d.set_style(hero, "color", "rgb(0, 0, 0)");
let hits = check_element_ai_palette_dom(&d, hero);
let hits = check_element_ai_palette_dom(&d, hero, None);
assert_eq!(hits.len(), 1);
assert_eq!(hits[0].snippet, "Purple/violet gradient background");
}
/// A DESIGN.md palette built out of the project's own oklch tokens is not
/// the generic assistant default, however cyan or violet the tokens are.
/// The verdigris-on-instrument pair here is the shape that fired 80 times
/// on one site whose whole palette is documented.
fn design_system_with(colors: &[(f64, f64, f64)]) -> DesignSystemConfig {
DesignSystemConfig {
has_colors: true,
allowed_colors: colors
.iter()
.map(|&(r, g, b)| Rgba { r, g, b, a: None })
.collect(),
..DesignSystemConfig::default()
}
}
#[test]
fn ai_palette_skips_colors_the_design_system_declares() {
let (mut d, body) = page();
// oklch(24% 0 0) instrument face, oklch(70% 0.12 188) verdigris text.
let panel = d.add(Some(body), "div");
d.set_style(panel, "backgroundColor", "rgb(58, 58, 58)");
let label = d.add(Some(panel), "span");
d.set_style(label, "color", "rgb(15, 182, 172)");
// With no DESIGN.md the rule still fires: nothing says the teal was chosen.
let hits = check_element_ai_palette_dom(&d, label, None);
assert_eq!(hits.len(), 1);
assert_eq!(hits[0].snippet, "Cyan neon text on dark background");
// Declared in DESIGN.md, so it is the project's palette, not the default.
let ds = design_system_with(&[(15.0, 182.0, 172.0)]);
assert!(check_element_ai_palette_dom(&d, label, Some(&ds)).is_empty());
// A design system that declares some other color leaves the rule alone.
let other = design_system_with(&[(200.0, 40.0, 30.0)]);
assert_eq!(check_element_ai_palette_dom(&d, label, Some(&other)).len(), 1);
// `hasColors: false` is a DESIGN.md with no palette section: no allowlist
// to consult, so the rule keeps its unconstrained behavior.
let empty = DesignSystemConfig::default();
assert_eq!(check_element_ai_palette_dom(&d, label, Some(&empty)).len(), 1);
}
#[test]
fn ai_palette_gradient_skips_declared_stops_but_not_undeclared_ones() {
let (mut d, body) = page();
let hero = d.add(Some(body), "section");
d.set_style(
hero,
"backgroundImage",
"linear-gradient(rgb(168, 85, 247), rgb(59, 130, 246))",
);
d.set_style(hero, "color", "rgb(0, 0, 0)");
// The violet stop is a declared token, so this gradient is the project's.
let ds = design_system_with(&[(168.0, 85.0, 247.0), (59.0, 130.0, 246.0)]);
assert!(check_element_ai_palette_dom(&d, hero, Some(&ds)).is_empty());
// Declaring only the blue stop leaves the violet one in scope.
let partial = design_system_with(&[(59.0, 130.0, 246.0)]);
let hits = check_element_ai_palette_dom(&d, hero, Some(&partial));
assert_eq!(hits.len(), 1);
assert_eq!(hits[0].snippet, "Purple/violet gradient background");
}
+163 -70
View File
@@ -4,7 +4,8 @@
//! `undefined` / `null` distinctions the source relies on.
use crate::color::{
color_to_hex, contrast_ratio, get_hue, has_chroma, is_neutral_color, relative_luminance, Rgba,
color_to_hex, composite_color_over, contrast_ratio, get_hue, has_chroma, is_neutral_color,
relative_luminance, Rgba,
};
use crate::constants::{
BORDER_SAFE_TAGS, GENERIC_FONTS, KNOWN_SERIF_FONTS, SAFE_TAGS, WCAG_LARGE_BOLD_TEXT_PX,
@@ -155,75 +156,10 @@ pub fn check_colors(opts: &ColorOpts) -> Vec<RuleHit> {
if opts.has_direct_text && opts.text_color.is_some() && !opts.is_emoji_only {
let text_color = opts.text_color.unwrap();
let is_gradient_clipped_text = bg_clip == "text";
let bgs: Option<Vec<Rgba>> = if is_gradient_clipped_text {
None
} else if let Some(bg) = opts.effective_bg {
Some(vec![bg])
} else {
match &opts.effective_bg_stops {
Some(stops) if !stops.is_empty() => Some(stops.clone()),
_ => None,
}
};
if let Some(bgs) = bgs {
let text_lum = relative_luminance(&text_color);
let is_gray =
!has_chroma(Some(&text_color), Some(20.0)) && text_lum > 0.05 && text_lum < 0.85;
if is_gray && bgs.iter().all(|b| has_chroma(Some(b), Some(40.0))) {
let bg_label = match opts.effective_bg {
Some(bg) => color_to_hex(Some(&bg)),
None => format!(
"gradient({})",
bgs.iter()
.map(|b| color_to_hex(Some(b)))
.collect::<Vec<_>>()
.join(", ")
),
};
findings.push(RuleHit::new(
"gray-on-color",
format!(
"text {} on bg {}",
color_to_hex(Some(&text_color)),
bg_label
),
));
}
let ratios: Vec<f64> = bgs.iter().map(|b| contrast_ratio(&text_color, b)).collect();
let mut worst_idx = 0usize;
for i in 1..ratios.len() {
if ratios[i] < ratios[worst_idx] {
worst_idx = i;
}
}
let ratio = ratios[worst_idx];
let is_large_text = opts.font_size >= WCAG_LARGE_TEXT_PX
|| (opts.font_size >= WCAG_LARGE_BOLD_TEXT_PX && opts.font_weight >= 700.0);
let threshold = if is_large_text { 3.0 } else { 4.5 };
if ratio < threshold {
let is_alpha_fallback_fp = !opts.detector_is_browser
&& opts.effective_bg.is_none()
&& text_color.a.map_or(false, |a| a < 1.0);
if !is_alpha_fallback_fp {
let ratio_label = if to_fixed(ratio, 1) == to_fixed(threshold, 1) {
to_fixed(ratio, 2)
} else {
to_fixed(ratio, 1)
};
findings.push(RuleHit::new(
"low-contrast",
format!(
"{}:1 (need {}:1) — text {} on {}",
ratio_label,
number_to_string(threshold),
color_to_hex(Some(&text_color)),
color_to_hex(Some(&bgs[worst_idx]))
),
));
}
}
// Gradient-clipped text paints the gradient, not `color`, so there
// is no background to score it against.
if bg_clip != "text" {
findings.extend(contrast_findings(opts, &text_color));
}
if has_chroma(Some(&text_color), Some(50.0)) {
@@ -281,6 +217,119 @@ pub fn check_colors(opts: &ColorOpts) -> Vec<RuleHit> {
findings
}
/// The contrast scoring `check_colors` and `check_placeholder_colors`
/// share: gray-on-color, then WCAG AA against the worst background. The
/// backgrounds are the composited `effective_bg`, or the gradient stops when
/// no opaque surface resolved; with neither there is nothing to score.
fn contrast_findings(opts: &ColorOpts, text_color: &Rgba) -> Vec<RuleHit> {
let bgs: Vec<Rgba> = if let Some(bg) = opts.effective_bg {
vec![bg]
} else {
match &opts.effective_bg_stops {
Some(stops) if !stops.is_empty() => stops.clone(),
_ => return Vec::new(),
}
};
let mut findings = Vec::new();
let text_lum = relative_luminance(text_color);
let is_gray = !has_chroma(Some(text_color), Some(20.0)) && text_lum > 0.05 && text_lum < 0.85;
if is_gray && bgs.iter().all(|b| has_chroma(Some(b), Some(40.0))) {
let bg_label = match opts.effective_bg {
Some(bg) => color_to_hex(Some(&bg)),
None => format!(
"gradient({})",
bgs.iter()
.map(|b| color_to_hex(Some(b)))
.collect::<Vec<_>>()
.join(", ")
),
};
findings.push(RuleHit::new(
"gray-on-color",
format!("text {} on bg {}", color_to_hex(Some(text_color)), bg_label),
));
}
let ratios: Vec<f64> = bgs.iter().map(|b| contrast_ratio(text_color, b)).collect();
let mut worst_idx = 0usize;
for i in 1..ratios.len() {
if ratios[i] < ratios[worst_idx] {
worst_idx = i;
}
}
let ratio = ratios[worst_idx];
let is_large_text = opts.font_size >= WCAG_LARGE_TEXT_PX
|| (opts.font_size >= WCAG_LARGE_BOLD_TEXT_PX && opts.font_weight >= 700.0);
let threshold = if is_large_text { 3.0 } else { 4.5 };
if ratio < threshold {
let is_alpha_fallback_fp = !opts.detector_is_browser
&& opts.effective_bg.is_none()
&& text_color.a.map_or(false, |a| a < 1.0);
if !is_alpha_fallback_fp {
let ratio_label = if to_fixed(ratio, 1) == to_fixed(threshold, 1) {
to_fixed(ratio, 2)
} else {
to_fixed(ratio, 1)
};
findings.push(RuleHit::new(
"low-contrast",
format!(
"{}:1 (need {}:1) — text {} on {}",
ratio_label,
number_to_string(threshold),
color_to_hex(Some(text_color)),
color_to_hex(Some(&bgs[worst_idx]))
),
));
}
}
findings
}
/// Placeholder text contrast, sibling of `check_hover_contrast`. Skips the
/// SAFE_TAGS gate and the host heuristics in `check_colors` (class list,
/// clip, gradient) because the host is an empty control; only the
/// placeholder glyphs are scored. A translucent placeholder is flattened
/// over the composited background first, including each gradient stop when
/// no opaque surface resolved. Snippets carry the placeholder string so
/// fixture tests can key on it.
pub fn check_placeholder_colors(
opts: &ColorOpts,
placeholder_text: &str,
mut text_color: Rgba,
) -> Vec<RuleHit> {
let mut flat: Option<ColorOpts> = None;
if text_color.a.map_or(false, |a| a < 1.0) {
if let Some(bg) = opts.effective_bg {
text_color = composite_color_over(&text_color, &bg);
} else if let Some(stops) = opts.effective_bg_stops.as_ref().filter(|s| !s.is_empty()) {
let mut worst_i = 0usize;
let mut worst_ratio = f64::MAX;
let mut worst_fg = text_color;
for (i, stop) in stops.iter().enumerate() {
let fg = composite_color_over(&text_color, stop);
let r = contrast_ratio(&fg, stop);
if r < worst_ratio {
worst_ratio = r;
worst_i = i;
worst_fg = fg;
}
}
text_color = worst_fg;
let mut o = opts.clone();
o.effective_bg = Some(stops[worst_i]);
o.effective_bg_stops = None;
flat = Some(o);
}
}
let opts = flat.as_ref().unwrap_or(opts);
let mut findings = contrast_findings(opts, &text_color);
for h in &mut findings {
h.snippet = format!("placeholder \"{}\" {}", placeholder_text, h.snippet);
}
findings
}
/// JS: checks.mjs#checkHoverContrast
pub fn check_hover_contrast(opts: &HoverContrastOpts) -> Vec<RuleHit> {
if !opts.has_direct_text || opts.is_emoji_only || opts.text_color.is_none() || opts.bg.is_none()
@@ -1044,6 +1093,50 @@ mod tests {
);
}
#[test]
fn placeholder_colors_ignore_host_class_heuristics() {
let opts = ColorOpts {
tag: "input".to_string(),
effective_bg: Some(Rgba::new(255.0, 255.0, 255.0, 1.0)),
font_size: 24.0,
font_weight: 400.0,
class_list: Some("text-slate-300 bg-red-500".to_string()),
bg_clip: Some("text".to_string()),
bg_image: Some("linear-gradient(red, blue)".to_string()),
..Default::default()
};
let ink = check_placeholder_colors(&opts, "Name", Rgba::new(26.0, 26.0, 26.0, 1.0));
assert!(ink.is_empty(), "{ink:?}");
let pale = check_placeholder_colors(&opts, "Name", Rgba::new(187.0, 187.0, 187.0, 1.0));
assert_eq!(pale.len(), 1);
assert_eq!(pale[0].id, "low-contrast");
assert!(pale[0].snippet.contains("placeholder \"Name\""), "{pale:?}");
// No resolved surface and no gradient stops: nothing to score.
let unresolved = ColorOpts {
effective_bg: None,
effective_bg_stops: None,
..opts.clone()
};
let none = check_placeholder_colors(&unresolved, "Name", Rgba::new(187.0, 187.0, 187.0, 1.0));
assert!(none.is_empty(), "{none:?}");
// Translucent black over a light gradient: flatten per stop, then score.
let gradient = ColorOpts {
effective_bg: None,
effective_bg_stops: Some(vec![
Rgba::new(255.0, 255.0, 255.0, 1.0),
Rgba::new(240.0, 240.0, 240.0, 1.0),
]),
..opts.clone()
};
let wash = check_placeholder_colors(
&gradient,
"Name",
Rgba::new(0.0, 0.0, 0.0, 0.2),
);
assert_eq!(wash.len(), 1, "{wash:?}");
assert_eq!(wash[0].id, "low-contrast");
}
#[test]
fn heading_tags_and_card_like() {
assert!(is_heading_tag("h4"));
+33 -2
View File
@@ -12,8 +12,9 @@
//! element tree in document order (child nodes with their text, so
//! `textContent` and the direct text nodes come out byte-equal), attributes,
//! the computed-style properties the rules read (`STYLE_PROPS`, interned
//! values), `::before` / `::after` styles where `content` is set, bounding
//! rects, the client/scroll/offset metrics, `checkVisibility`, direct-text
//! values), `::before` / `::after` styles where `content` is set,
//! `::placeholder` `color` on text controls, bounding rects, the
//! client/scroll/offset metrics, `checkVisibility`, direct-text
//! rects, viewport and scroll, hostname, quirks mode, `body.innerText`, the
//! `@keyframes` rules, the document HTML for the regex pass, and the media
//! intrinsics the visual-contrast path needs.
@@ -253,6 +254,10 @@ pub struct SnapNode {
pub before: Option<Vec<u32>>,
#[serde(rename = "f", default)]
pub after: Option<Vec<u32>>,
/// Interned `getComputedStyle(el, '::placeholder').color` when the
/// element has a non-empty `placeholder` attribute.
#[serde(rename = "ph", default)]
pub placeholder_color: Option<u32>,
/// `getBoundingClientRect` as `[x, y, width, height]`; `None` when the
/// element has no such method.
#[serde(rename = "r", default)]
@@ -824,6 +829,11 @@ impl Dom for SnapshotDom {
}
fn pseudo_style(&self, el: ElId, pseudo: &str, prop: &str) -> Option<String> {
let n = self.snap.node(el);
if pseudo == "::placeholder" && prop == "color" {
return n
.placeholder_color
.and_then(|idx| self.snap.strings.get(idx as usize).cloned());
}
let vals = match pseudo {
"::before" | ":before" => n.before.as_ref(),
"::after" | ":after" => n.after.as_ref(),
@@ -999,6 +1009,27 @@ mod tests {
assert!(d.offset_width(6).is_nan());
}
#[test]
fn placeholder_color_is_readable_as_pseudo_style() {
let json = r#"{
"v": 1, "hostname": "example.test", "innerWidth": 1280, "innerHeight": 800,
"styleProps": ["display", "color"], "pseudoProps": ["content"],
"strings": ["block", "rgb(0, 0, 0)", "rgb(187, 187, 187)"],
"documentElement": 1, "body": 2,
"els": [
{"t":"HTML","c":[2],"s":[0,1],"r":[0,0,1280,800]},
{"t":"BODY","p":1,"c":[3],"s":[0,1]},
{"t":"INPUT","p":2,"c":[],"a":[["placeholder","Jane"]],"s":[0,1],"ph":2}
]
}"#;
let d = snap(json);
assert_eq!(
d.pseudo_style(3, "::placeholder", "color").as_deref(),
Some("rgb(187, 187, 187)")
);
assert_eq!(d.pseudo_style(2, "::placeholder", "color"), None);
}
#[test]
fn selectors_over_snapshot() {
let d = snap(SMALL);
+41 -5
View File
@@ -20,9 +20,9 @@ use impeccable_core::checks::measures::{
use impeccable_core::checks::rules::{
check_borders, check_colors, check_glow, check_hero_eyebrow, check_hover_contrast,
check_icon_tile, check_italic_serif, check_kicker_above_heading, check_motion,
is_emoji_only_text, is_heading_tag, resolve_hero_heading_size_px, BorderOpts, ColorOpts,
GlowOpts, HeroEyebrowOpts, HoverContrastOpts, IconTileOpts, ItalicSerifOpts, KickerCandidate,
MotionOpts, RuleHit, Sides,
check_placeholder_colors, is_emoji_only_text, is_heading_tag, resolve_hero_heading_size_px,
BorderOpts, ColorOpts, GlowOpts, HeroEyebrowOpts, HoverContrastOpts, IconTileOpts,
ItalicSerifOpts, KickerCandidate, MotionOpts, RuleHit, Sides,
};
use impeccable_core::checks::text_rules::{
check_numbered_section_labels, is_kicker_candidate, is_numbered_section_label_candidate,
@@ -539,7 +539,7 @@ pub fn check_element_colors(
sv(style, "backgroundClip")
}
};
check_colors(&ColorOpts {
let color_opts = ColorOpts {
tag: tag.to_string(),
text_color,
bg_color: own_bg,
@@ -557,7 +557,43 @@ pub fn check_element_colors(
bg_image: Some(sv(style, "backgroundImage").to_string()),
class_list: Some(el.class_name().to_string()),
detector_is_browser: false,
})
};
let mut findings = check_colors(&color_opts);
if tag == "input" || tag == "textarea" {
let placeholder = el.get_attribute("placeholder").unwrap_or("").trim();
if !placeholder.is_empty() {
let skip = if tag == "input" {
let t = js::to_lower_case(el.get_attribute("type").unwrap_or("text"));
matches!(
t.as_str(),
"hidden" | "checkbox" | "radio" | "file" | "submit" | "button" | "image"
| "reset" | "range" | "color"
) || el
.get_attribute("value")
.is_some_and(|v| !js::trim(v).is_empty())
} else {
!js::trim(&direct_text).is_empty()
};
if !skip {
if let Some(ph_style) = el.doc.get_placeholder_style(el.id()) {
let ph_color = custom_props
.and_then(|m| {
measures::parse_color_resolved(sv_opt(ph_style, "color"), Some(m))
})
.or_else(|| parse_rgb(sv_opt(ph_style, "color")))
.or_else(|| parse_any_color(sv_opt(ph_style, "color")));
if let Some(ph_color) = ph_color {
findings.extend(check_placeholder_colors(
&color_opts,
placeholder,
ph_color,
));
}
}
}
}
}
findings
}
/// JS: checks.mjs#checkElementHoverContrast(el, style, tag, window)
+62 -2
View File
@@ -139,6 +139,31 @@ static PSEUDO_RULE_RE: Lazy<Regex> = Lazy::new(|| {
))
.expect("PSEUDO_RULE_RE")
});
static PLACEHOLDER_RULE_RE: Lazy<Regex> = Lazy::new(|| {
Regex::new(r"(?i)^(.*)(?:::placeholder|::?-webkit-input-placeholder|::?-moz-placeholder)$")
.expect("PLACEHOLDER_RULE_RE")
});
fn placeholder_host_selector(selector: &str) -> Option<String> {
let pm = PLACEHOLDER_RULE_RE.captures(selector)?;
let captured = pm.get(1).map(|m| m.as_str()).unwrap_or("");
let trimmed_end = captured.trim_end_matches(|c: char| js::is_js_whitespace(c));
if trimmed_end.is_empty() {
return Some("*".to_string());
}
// Only fill a trailing empty compound. `star_empty_compounds` would
// rewrite `.label + ::placeholder` to `.label *+*`.
let last = trimmed_end.chars().last().unwrap();
if captured.len() != trimmed_end.len() || last == '>' || last == '+' || last == '~' {
if last == '>' || last == '+' || last == '~' {
Some(format!("{}*", trimmed_end))
} else {
Some(format!("{} *", trimmed_end))
}
} else {
Some(trimmed_end.to_string())
}
}
static COLOR_TOKEN_RE: Lazy<Regex> = Lazy::new(|| {
Regex::new(r"(?i)(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb|color-mix)\([^)]*(?:\([^)]*\))?[^)]*\)|#[0-9a-f]{3,8}(?-u:\b)")
.expect("COLOR_TOKEN_RE")
@@ -252,6 +277,7 @@ pub fn build_static_style_map(
) {
let mut specified: SpecifiedStore<NodeId> = SpecifiedStore::new();
let mut hover_specified: SpecifiedStore<NodeId> = SpecifiedStore::new();
let mut placeholder_specified: SpecifiedStore<NodeId> = SpecifiedStore::new();
let root_custom_props = collect_css_custom_props(css_text);
let rules = profile::step(
profile,
@@ -264,7 +290,12 @@ pub fn build_static_style_map(
Meta::new("selector-match", "css-selectors", file_path),
|| {
for rule in &rules {
if !rule.is_hover {
let placeholder_host = if rule.is_hover {
None
} else {
placeholder_host_selector(&rule.selector)
};
if !rule.is_hover && placeholder_host.is_none() {
if let Some(pm) = PSEUDO_RULE_RE.captures(&rule.selector) {
let base = pm.get(1).map(|m| m.as_str()).unwrap_or("").to_string();
mark_pseudo_rule(doc, rule, &base, &root_custom_props);
@@ -273,6 +304,8 @@ pub fn build_static_style_map(
}
let match_selector: Option<&str> = if rule.is_hover {
rule.match_selector.as_deref()
} else if let Some(ref host) = placeholder_host {
Some(host.as_str())
} else {
Some(rule.selector.as_str())
};
@@ -296,11 +329,18 @@ pub fn build_static_style_map(
};
let store = if rule.is_hover {
&mut hover_specified
} else if placeholder_host.is_some() {
&mut placeholder_specified
} else {
&mut specified
};
for node in matched {
for decl in &rule.declarations {
if placeholder_host.is_some()
&& js::to_lower_case(&decl.prop) != "color"
{
continue;
}
let meta = DeclMeta {
important: decl.important,
specificity: rule.specificity,
@@ -341,7 +381,7 @@ pub fn build_static_style_map(
profile,
Meta::new("cascade", "compute-styles", file_path),
|| {
compute_styles(doc, &specified, &hover_specified);
compute_styles(doc, &specified, &hover_specified, &placeholder_specified);
},
);
}
@@ -353,6 +393,7 @@ fn compute_styles(
doc: &mut StaticDocument,
specified: &SpecifiedStore<NodeId>,
hover_specified: &SpecifiedStore<NodeId>,
placeholder_specified: &SpecifiedStore<NodeId>,
) {
let mut computed: HashMap<NodeId, Rc<StyleValues>> = HashMap::new();
let mut customs: HashMap<NodeId, Rc<CustomProps>> = HashMap::new();
@@ -368,6 +409,7 @@ fn compute_styles(
.map(|e| (e.id(), None))
.collect();
let mut hover_out: Vec<(NodeId, StyleValues)> = Vec::new();
let mut placeholder_out: Vec<(NodeId, StyleValues)> = Vec::new();
while let Some((node, parent)) = stack.pop() {
let parent_style: Option<Rc<StyleValues>> = parent.and_then(|p| computed.get(&p).cloned());
@@ -439,6 +481,21 @@ fn compute_styles(
}
}
if let Some(ph_map) = placeholder_specified.get(&node) {
if let Some(color_decl) = ph_map.get("color") {
let next = normalize_static_css_value(
"color",
&color_decl.value,
&custom_props,
Some(&values),
Some(&values),
);
let mut ph_style = StyleValues::default();
ph_style.insert("color".to_string(), next);
placeholder_out.push((node, ph_style));
}
}
let style_rc = Rc::new(values);
computed.insert(node, style_rc);
customs.insert(node, Rc::new(custom_props));
@@ -460,6 +517,9 @@ fn compute_styles(
for (node, style) in hover_out {
doc.set_hover_style(node, style);
}
for (node, style) in placeholder_out {
doc.set_placeholder_style(node, style);
}
}
/// `STATIC_DEFAULT_STYLE[prop]` lookup re-exported for the adapters.
+8
View File
@@ -55,6 +55,7 @@ pub struct StaticDocument {
pub html: Html,
styles: HashMap<NodeId, StyleValues>,
hover_styles: HashMap<NodeId, StyleValues>,
placeholder_styles: HashMap<NodeId, StyleValues>,
accent_dash: HashSet<NodeId>,
pseudo_surface: HashMap<NodeId, Rgba>,
selector_cache: RefCell<HashMap<String, Result<Selector, SelectorError>>>,
@@ -174,6 +175,7 @@ impl StaticDocument {
html,
styles: HashMap::new(),
hover_styles: HashMap::new(),
placeholder_styles: HashMap::new(),
accent_dash: HashSet::new(),
pseudo_surface: HashMap::new(),
selector_cache: RefCell::new(HashMap::new()),
@@ -319,6 +321,12 @@ impl StaticDocument {
pub fn get_hover_style(&self, node: NodeId) -> Option<&StyleValues> {
self.hover_styles.get(&node)
}
pub fn set_placeholder_style(&mut self, node: NodeId, style: StyleValues) {
self.placeholder_styles.insert(node, style);
}
pub fn get_placeholder_style(&self, node: NodeId) -> Option<&StyleValues> {
self.placeholder_styles.get(&node)
}
pub fn set_accent_dash_pseudo(&mut self, node: NodeId) {
self.accent_dash.insert(node);
}
+122
View File
@@ -0,0 +1,122 @@
//! Integration tests for `::placeholder` contrast detection (#790).
use impeccable_html::{detect_html_source, DetectHtmlOptions};
use std::path::Path;
const ISSUER_REPRO: &str = r#"<!DOCTYPE html>
<html><head><style>
input::placeholder { color: #bbbbbb; }
input { background: white; font-size: 16px; width: 200px; height: 40px; border: 1px solid #ccc; padding: 8px; box-sizing: border-box; }
</style></head>
<body><input placeholder="Search"></body></html>
"#;
fn scan(html: &str) -> Vec<impeccable_core::findings::Finding> {
detect_html_source(html, Path::new("/tmp/placeholder.html"), &DetectHtmlOptions::default())
}
fn repo_root() -> std::path::PathBuf {
std::env::var("IMPECCABLE_PUBLIC_REPO")
.map(std::path::PathBuf::from)
.unwrap_or_else(|_| Path::new(env!("CARGO_MANIFEST_DIR")).join("../.."))
}
#[test]
fn issuer_repro_flags_pale_placeholder() {
let findings = scan(ISSUER_REPRO);
assert!(
findings.iter().any(|f| f.antipattern == "low-contrast"),
"expected low-contrast finding, got {findings:?}"
);
}
#[test]
fn bare_placeholder_selector_flags() {
let html = r#"<!DOCTYPE html>
<html><head><style>
::placeholder { color: #bbbbbb; }
input { background: white; font-size: 16px; width: 200px; height: 40px; }
</style></head>
<body><input placeholder="Search"></body></html>
"#;
let findings = scan(html);
assert!(
findings.iter().any(|f| f.antipattern == "low-contrast"),
"expected low-contrast for bare ::placeholder, got {findings:?}"
);
}
#[test]
fn descendant_placeholder_selector_flags() {
let html = r#"<!DOCTYPE html>
<html><head><style>
.form ::placeholder { color: #bbbbbb; }
input { background: white; font-size: 16px; width: 200px; height: 40px; }
</style></head>
<body><div class="form"><input placeholder="Search"></div></body></html>
"#;
let findings = scan(html);
assert!(
findings.iter().any(|f| f.antipattern == "low-contrast"),
"expected low-contrast for descendant ::placeholder, got {findings:?}"
);
}
#[test]
fn sibling_placeholder_selector_flags() {
let html = r#"<!DOCTYPE html>
<html><head><style>
.label + ::placeholder { color: #bbbbbb; }
input { background: white; font-size: 16px; width: 200px; height: 40px; }
</style></head>
<body><label class="label">Name</label><input placeholder="Search"></body></html>
"#;
let findings = scan(html);
assert!(
findings.iter().any(|f| f.antipattern == "low-contrast"),
"expected low-contrast for sibling ::placeholder, got {findings:?}"
);
}
#[test]
fn fixture_flag_and_pass_cases() {
let fixture = repo_root().join("tests/fixtures/antipatterns/placeholder-contrast.html");
assert!(
fixture.is_file(),
"missing fixture at {}",
fixture.display()
);
let html = std::fs::read_to_string(&fixture).unwrap();
let findings = detect_html_source(&html, &fixture, &DetectHtmlOptions::default());
let ids: Vec<&str> = findings.iter().map(|f| f.antipattern.as_str()).collect();
let snippets: Vec<&str> = findings.iter().map(|f| f.snippet.as_str()).collect();
for needle in [
"Pale Placeholder On White Field",
"Pale Placeholder On White Textarea",
"Translucent Placeholder On Light Field",
"Pale Placeholder On Frosted Panel",
] {
assert!(
snippets.iter().any(|s| s.contains(needle)),
"expected flag for placeholder {needle:?}, findings={findings:?}"
);
}
for needle in [
"Ink Placeholder On White Field",
"Light Placeholder On Dark Field",
"Filled Field Hides Placeholder",
"Unstyled Placeholder Uses UA Color",
] {
assert!(
!snippets.iter().any(|s| s.contains(needle)),
"pass case {needle:?} should not flag, findings={findings:?}"
);
}
assert!(
ids.iter().filter(|id| **id == "low-contrast").count() >= 4,
"expected at least four low-contrast hits, got {findings:?}"
);
}
File diff suppressed because one or more lines are too long
+55 -1
View File
@@ -596,6 +596,18 @@ fn write_carbonize_banner(event: &Map<String, Value>, io: &mut Io) {
}
}
fn reply_ack_json(reply: &Reply) -> Value {
let mut m = Map::new();
m.insert("ok".into(), json!(true));
m.insert("id".into(), json!(reply.id));
m.insert("status".into(), json!(reply.ty));
if let Some(f) = &reply.file {
m.insert("file".into(), json!(f));
}
m.insert("_instructions".into(), json!("Poll again now."));
Value::Object(m)
}
/// JS: printPollEvent(event) — a wire-supplied `_instructions` must never
/// win over the locally generated one (#488).
fn print_poll_event(event: &mut Value, io: &mut Io) {
@@ -718,7 +730,13 @@ pub fn run(args: &[String], io: &mut Io) -> i32 {
}
};
return match post_reply(&base, &token, &reply) {
Ok(()) => 0,
Ok(()) => {
println(
io,
&serde_json::to_string(&reply_ack_json(&reply)).unwrap_or_default(),
);
0
}
Err(PollError::ConnRefused) => {
io.err(&format!(
"Live server not running. Start one with: {}\n",
@@ -839,4 +857,40 @@ mod tests {
}));
assert!(parsed.get("_instructions").is_none(), "{}", parsed);
}
#[test]
fn reply_ack_json_includes_file_when_present() {
let reply = Reply {
id: "ab12cd34".into(),
ty: "done".into(),
message: None,
file: Some("index.html".into()),
data: None,
source_event_type: None,
};
let parsed = reply_ack_json(&reply);
assert_eq!(parsed["ok"], json!(true));
assert_eq!(parsed["id"], json!("ab12cd34"));
assert_eq!(parsed["status"], json!("done"));
assert_eq!(parsed["file"], json!("index.html"));
assert_eq!(parsed["_instructions"], json!("Poll again now."));
}
#[test]
fn reply_ack_json_omits_file_when_absent() {
let reply = Reply {
id: "ab12cd34".into(),
ty: "steer_done".into(),
message: None,
file: None,
data: None,
source_event_type: None,
};
let parsed = reply_ack_json(&reply);
assert_eq!(parsed["ok"], json!(true));
assert_eq!(parsed["id"], json!("ab12cd34"));
assert_eq!(parsed["status"], json!("steer_done"));
assert!(parsed.get("file").is_none(), "{}", parsed);
assert_eq!(parsed["_instructions"], json!("Poll again now."));
}
}
+72
View File
@@ -418,6 +418,16 @@ fn push_diag(next: &mut Map<String, Value>, d: Value) {
next.insert("diagnostics".to_string(), Value::Array(arr));
}
fn drop_diag(next: &mut Map<String, Value>, error: &str) {
let mut arr = next
.get("diagnostics")
.and_then(|v| v.as_array())
.cloned()
.unwrap_or_default();
arr.retain(|d| d.get("error").and_then(|e| e.as_str()) != Some(error));
next.insert("diagnostics".to_string(), Value::Array(arr));
}
/// JS: applyEvent(snapshot, entry)
pub fn apply_event(snapshot: &Map<String, Value>, entry: &Value) -> Map<String, Value> {
let event: Map<String, Value> = match entry.get("event") {
@@ -864,6 +874,7 @@ pub fn apply_event(snapshot: &Map<String, Value>, entry: &Value) -> Map<String,
set!("phase", json!("discarded"));
set!("pendingEventSeq", Value::Null);
set!("pendingEvent", Value::Null);
drop_diag(&mut next, "carbonize_cleanup_required");
}
"complete" => {
set!("phase", json!("completed"));
@@ -876,6 +887,7 @@ pub fn apply_event(snapshot: &Map<String, Value>, entry: &Value) -> Map<String,
set_if!("previewMode", ev("previewMode"));
set!("pendingEventSeq", Value::Null);
set!("pendingEvent", Value::Null);
drop_diag(&mut next, "carbonize_cleanup_required");
}
"agent_error" => {
if canceled && ev("sourceEventType").and_then(|v| v.as_str()) == Some("generate") {
@@ -925,3 +937,63 @@ fn write_snapshot(path: &str, snapshot: &Map<String, Value>, journal_bytes: i64,
pub fn get_str<'a>(m: &'a Map<String, Value>, k: &str) -> Option<&'a str> {
get(m, k).and_then(|v| v.as_str())
}
#[cfg(test)]
mod tests {
use super::*;
use serde_json::json;
fn journal_entry(seq: i64, event: Value) -> Value {
json!({ "seq": seq, "ts": "2026-01-01T00:00:00.000Z", "event": event })
}
fn has_diag(snapshot: &Map<String, Value>, error: &str) -> bool {
snapshot
.get("diagnostics")
.and_then(|v| v.as_array())
.map(|a| {
a.iter()
.any(|d| d.get("error").and_then(|e| e.as_str()) == Some(error))
})
.unwrap_or(false)
}
fn replay(id: &str, events: &[Value]) -> Map<String, Value> {
let mut snap = base_snapshot(id);
for entry in events {
snap = apply_event(&snap, entry);
}
snap
}
fn accept_carbonize_done(id: &str, terminal: &str) -> Map<String, Value> {
replay(
id,
&[
journal_entry(
1,
json!({ "id": id, "type": "accept", "variantId": 2 }),
),
journal_entry(
2,
json!({ "id": id, "type": "agent_done", "carbonize": true, "file": "index.html" }),
),
journal_entry(3, json!({ "id": id, "type": terminal })),
],
)
}
#[test]
fn complete_drops_carbonize_cleanup_required() {
let snap = accept_carbonize_done("ab12cd34", "complete");
assert_eq!(snap.get("phase").and_then(|p| p.as_str()), Some("completed"));
assert!(!has_diag(&snap, "carbonize_cleanup_required"));
}
#[test]
fn discarded_drops_carbonize_cleanup_required() {
let snap = accept_carbonize_done("ab12cd34", "discarded");
assert_eq!(snap.get("phase").and_then(|p| p.as_str()), Some("discarded"));
assert!(!has_diag(&snap, "carbonize_cleanup_required"));
}
}
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
+1 -1
View File
@@ -1740,7 +1740,7 @@ Conventions: every script's "run directly" guard is `process.argv[1]` ending wit
#### `live-poll.mjs` -> `impeccable poll`
- Invoked from live.md poll loop; `--reply` forms quoted in `_instructions` (see instructions.mjs strings in 6.3/below).
- Args: `--stream`, `--timeout=MS` (one-shot total, default 600000), `--types=A,B`, `--ack-timeout=MS` (stream, default 600000), `--reply <id> <status> [--file PATH] [--data JSON] [message]`, `--help`. `--reply` errors (stderr, exit 1): `Usage: node "<abs>/live-poll.mjs" --reply <id> <status> [--file path] [--data '<json>'] [message]` + `Missing event id after --reply.` / `The value after --reply must be the event id, not the status "done". Use --reply EVENT_ID done.` / `Missing reply status after event id "X".`; `--data must be valid JSON: <err>`.
- Args: `--stream`, `--timeout=MS` (one-shot total, default 600000), `--types=A,B`, `--ack-timeout=MS` (stream, default 600000), `--reply <id> <status> [--file PATH] [--data JSON] [message]`, `--help`. `--reply` success (stdout, exit 0): one compact JSON line `{ok:true,id,status,file? (only when --file was passed),_instructions:'Poll again now.'}`. `--reply` errors (stderr, exit 1): `Usage: node "<abs>/live-poll.mjs" --reply <id> <status> [--file path] [--data '<json>'] [message]` + `Missing event id after --reply.` / `The value after --reply must be the event id, not the status "done". Use --reply EVENT_ID done.` / `Missing reply status after event id "X".`; `--data must be valid JSON: <err>`.
- Needs `server.json`; else stderr `No running live server found. Start one with: node "<abs>/live.mjs"` exit 1.
- One-shot: loops `GET /poll?token&timeout=<slice ≤270000>&leaseMs=600000[&types]` until an event or total deadline; prints one JSON line (`console.log(JSON.stringify(event))`) with `_instructions` added by `instructionsForEvent` (unless already present). For `accept`/`discard`: spawns `node live-accept.mjs --id ID (--discard | --variant N) [--page-url U] [--param-values JSON]` (30 s), sets `event._acceptResult` (parse failure/throw → `{handled:false, mode:'error', error}`), then POSTs completion `{id, type: completionType, sourceEventType: event.type, message: _acceptResult.error, file: _acceptResult.file, data: {carbonize:true}?}` where completionType = discard: `discarded` if handled else `error`; accept: `agent_done` if handled&carbonize, `complete` if handled, `error` if mode error or (svelte-component unhandled), else `agent_done`; sets `event._completionAck = {ok:true, type}` (+ `final:false, requiresComplete:true, nextCommand:'live-complete.mjs --id <id>', message:'Carbonize cleanup must be verified, then the session must be completed explicitly before polling again.'` for carbonize) or `{ok:false, error}`. Stderr banners: manual_edit_apply → 4-line banner starting `Manual Apply action required: edit source, then reply with \`live-poll.mjs --reply <id> done --data '<json>'\`.`; carbonize → `⚠ Carbonize cleanup REQUIRED before next poll. After cleanup, run live-complete.mjs --id <id>. See reference/live.md "Required after accept".`
- Stream: stderr `[impeccable-poll] stream mode: one JSON object per line on stdout; use --reply while this process stays running`; after each reply-needing event waits (poll `/status` every 400 ms) until the id leaves `pendingEvents` (else `Timed out waiting for --reply on event <id>` exit 1); returns on `exit`.
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `/impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `/impeccable polish` for the final pass.
+6
View File
@@ -188,6 +188,12 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
**Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
- **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
- **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
- **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
When the adaptation feels native to each context, hand off to `{{command_prefix}}impeccable polish` for the final pass.
---
+2 -1
View File
@@ -48,11 +48,12 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the
**Check for**:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
### 5. Implementation Integrity (CRITICAL)
+9
View File
@@ -205,6 +205,11 @@ t('items', { count }) // Handles complex plural rules
- Optimistic updates with rollback
- Conflict resolution
**Interrupted gestures** (custom sliders, drag surfaces, scrollable control strips):
- A second finger or pointer lands mid-drag: the first drag keeps its pointer or ends cleanly, never jumps to the new one
- The browser cancels the gesture to scroll (`pointercancel`), capture is lost (`lostpointercapture`), the pointer is released outside the control, or the window loses focus (`blur`) mid-drag: clear the dragging state and release capture
- After each of these, the next tap or drag works without a reload
**Permission states**:
- No permission to view
- No permission to edit
@@ -304,6 +309,7 @@ const throttledScroll = throttle(handleScroll, 100);
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- A behavioral regression for each confirmed gesture fix, when the project's test runner can drive input
- Visual regression tests
- Accessibility tests (axe, WAVE)
@@ -330,7 +336,10 @@ Test thoroughly with edge cases:
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Interrupted gestures**: Add a second finger mid-drag, scroll across the control, release outside it, switch windows mid-drag; then drag again
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
For gestures, say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and name what stayed untested.
When edge cases are covered, hand off to `{{command_prefix}}impeccable polish` for the final pass.
+92
View File
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Contrast — Should Flag vs Should Pass</title>
<style>
body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #1a1a1a; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
.col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
.col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
.field {
width: 280px;
height: 40px;
padding: 8px 12px;
font-size: 16px;
border: 1px solid #cbd5e1;
border-radius: 6px;
box-sizing: border-box;
display: block;
margin-bottom: 8px;
}
.field-white { background: #ffffff; }
.field-light { background: #f5f5f5; }
.field-dark { background: #1a1a1a; border-color: #333; }
.flag-pale-white::placeholder { color: #bbbbbb; }
.flag-pale-textarea::placeholder { color: #bbbbbb; }
.flag-translucent-light::placeholder { color: rgba(255, 255, 255, 0.4); }
.dark-wrap { background: #0f0f11; padding: 20px; width: 320px; }
.frosted-panel {
background: rgba(255, 255, 255, 0.15);
padding: 12px;
}
.frosted-panel .field {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.25);
}
.frosted-panel .field::placeholder { color: #bbbbbb; }
.pass-ink-white::placeholder { color: #1a1a1a; }
.pass-light-dark::placeholder { color: #e8e8e8; }
.pass-filled-pale::placeholder { color: #bbbbbb; }
.pass-unstyled { /* no ::placeholder rule — UA color only */ }
</style>
</head>
<body>
<div class="grid">
<div class="col" data-col="flag">
<h2>Should flag</h2>
<h3>Pale placeholder on white input</h3>
<input class="field field-white flag-pale-white" type="text" placeholder="Pale Placeholder On White Field">
<h3>Pale placeholder on white textarea</h3>
<textarea class="field field-white flag-pale-textarea" rows="2" placeholder="Pale Placeholder On White Textarea"></textarea>
<h3>Translucent placeholder on light field</h3>
<input class="field field-light flag-translucent-light" type="text" placeholder="Translucent Placeholder On Light Field">
<h3>Pale placeholder on frosted panel</h3>
<div class="dark-wrap">
<div class="frosted-panel">
<input class="field" type="text" placeholder="Pale Placeholder On Frosted Panel">
</div>
</div>
</div>
<div class="col" data-col="pass">
<h2>Should pass</h2>
<h3>Ink placeholder on white field</h3>
<input class="field field-white pass-ink-white" type="text" placeholder="Ink Placeholder On White Field">
<h3>Light placeholder on dark field</h3>
<input class="field field-dark pass-light-dark" type="text" placeholder="Light Placeholder On Dark Field">
<h3>Input with no placeholder attribute</h3>
<input class="field field-white" type="text" value="">
<h3>Filled field hides placeholder</h3>
<input class="field field-white pass-filled-pale" type="text" value="Already filled" placeholder="Filled Field Hides Placeholder">
<h3>Unstyled placeholder uses UA color</h3>
<input class="field field-white pass-unstyled" type="text" placeholder="Unstyled Placeholder Uses UA Color">
<h3>Empty placeholder attribute</h3>
<input class="field field-white flag-pale-white" type="text" placeholder="">
</div>
</div>
</body>
</html>
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
{
"stdout": "",
"stderr": "415 anti-patterns found.\n17 advisory notes (not counted).\n",
"stderr": "419 anti-patterns found.\n17 advisory notes (not counted).\n",
"exit": 2,
"signal": null,
"files": {}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
{
"stdout": "[\n {\n \"antipattern\": \"low-contrast\",\n \"name\": \"Low contrast text\",\n \"description\": \"Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\",\n \"severity\": \"warning\",\n \"category\": \"quality\",\n \"file\": \"<REPO>/tests/fixtures/antipatterns/placeholder-contrast.html\",\n \"line\": 0,\n \"snippet\": \"placeholder \\\"Pale Placeholder On White Field\\\" 1.9:1 (need 4.5:1) — text #bbbbbb on #ffffff\"\n },\n {\n \"antipattern\": \"low-contrast\",\n \"name\": \"Low contrast text\",\n \"description\": \"Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\",\n \"severity\": \"warning\",\n \"category\": \"quality\",\n \"file\": \"<REPO>/tests/fixtures/antipatterns/placeholder-contrast.html\",\n \"line\": 0,\n \"snippet\": \"placeholder \\\"Pale Placeholder On White Textarea\\\" 1.9:1 (need 4.5:1) — text #bbbbbb on #ffffff\"\n },\n {\n \"antipattern\": \"low-contrast\",\n \"name\": \"Low contrast text\",\n \"description\": \"Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\",\n \"severity\": \"warning\",\n \"category\": \"quality\",\n \"file\": \"<REPO>/tests/fixtures/antipatterns/placeholder-contrast.html\",\n \"line\": 0,\n \"snippet\": \"placeholder \\\"Translucent Placeholder On Light Field\\\" 1.0:1 (need 4.5:1) — text #f9f9f9 on #f5f5f5\"\n },\n {\n \"antipattern\": \"low-contrast\",\n \"name\": \"Low contrast text\",\n \"description\": \"Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\",\n \"severity\": \"warning\",\n \"category\": \"quality\",\n \"file\": \"<REPO>/tests/fixtures/antipatterns/placeholder-contrast.html\",\n \"line\": 0,\n \"snippet\": \"placeholder \\\"Pale Placeholder On Frosted Panel\\\" 3.5:1 (need 4.5:1) — text #bbbbbb on #5c5c5d\"\n }\n]\n",
"stderr": "",
"exit": 2,
"signal": null,
"files": {}
}
@@ -0,0 +1,7 @@
{
"stdout": "",
"stderr": "\n<REPO>/tests/fixtures/antipatterns/placeholder-contrast.html\n [low-contrast] placeholder \"Pale Placeholder On White Field\" 1.9:1 (need 4.5:1) — text #bbbbbb on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] placeholder \"Pale Placeholder On White Textarea\" 1.9:1 (need 4.5:1) — text #bbbbbb on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] placeholder \"Translucent Placeholder On Light Field\" 1.0:1 (need 4.5:1) — text #f9f9f9 on #f5f5f5\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] placeholder \"Pale Placeholder On Frosted Panel\" 3.5:1 (need 4.5:1) — text #bbbbbb on #5c5c5d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n4 anti-patterns found.\n",
"exit": 2,
"signal": null,
"files": {}
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -1,11 +1,11 @@
{
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stderr": "",
"exit": 0,
"signal": null,
"files": {
".impeccable/live/config.json": "{\n \"files\": [\"index.html\", \"public/**/*.html\"],\n \"insertBefore\": \"</body>\",\n \"commentSyntax\": \"html\"\n}\n",
".impeccable/live/sessions/ab12cd34.jsonl": "{\"seq\":1,\"id\":\"ab12cd34\",\"type\":\"generate\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"generate\",\"action\":\"bolder\",\"count\":3,\"pageUrl\":\"/\",\"element\":{\"tagName\":\"h1\",\"id\":\"hero\",\"classes\":[\"hero-title\"],\"textContent\":\"Oracle Fixture\",\"outerHTML\":\"<h1 id=\\\"hero\\\" class=\\\"hero-title\\\">Oracle Fixture</h1>\"},\"clientSentAt\":1754042400000}}\n{\"seq\":2,\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"file\":\"index.html\",\"sourceEventType\":\"generate\",\"carbonize\":false,\"arrivedVariants\":3}}\n{\"seq\":3,\"id\":\"ab12cd34\",\"type\":\"accept\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"accept\",\"variantId\":\"2\",\"pageUrl\":\"/\",\"paramValues\":{\"face\":\"serif\"}}}\n{\"seq\":4,\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"file\":\"index.html\",\"sourceEventType\":\"accept\",\"carbonize\":true}}\n{\"seq\":5,\"id\":\"ab12cd34\",\"type\":\"complete\",\"ts\":\"<ISO>\",\"event\":{\"type\":\"complete\",\"id\":\"ab12cd34\"}}\n",
".impeccable/live/sessions/ab12cd34.snapshot.json": "{\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\",\n \"__journalBytes\": 1053,\n \"__nextSeq\": 6\n}\n"
".impeccable/live/sessions/ab12cd34.snapshot.json": "{\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\",\n \"__journalBytes\": 1053,\n \"__nextSeq\": 6\n}\n"
}
}
@@ -1,11 +1,11 @@
{
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stderr": "",
"exit": 0,
"signal": null,
"files": {
".impeccable/live/config.json": "{\n \"files\": [\"index.html\", \"public/**/*.html\"],\n \"insertBefore\": \"</body>\",\n \"commentSyntax\": \"html\"\n}\n",
".impeccable/live/sessions/ab12cd34.jsonl": "{\"seq\":1,\"id\":\"ab12cd34\",\"type\":\"generate\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"generate\",\"action\":\"bolder\",\"count\":3,\"pageUrl\":\"/\",\"element\":{\"tagName\":\"h1\",\"id\":\"hero\",\"classes\":[\"hero-title\"],\"textContent\":\"Oracle Fixture\",\"outerHTML\":\"<h1 id=\\\"hero\\\" class=\\\"hero-title\\\">Oracle Fixture</h1>\"},\"clientSentAt\":1754042400000}}\n{\"seq\":2,\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"file\":\"index.html\",\"sourceEventType\":\"generate\",\"carbonize\":false,\"arrivedVariants\":3}}\n{\"seq\":3,\"id\":\"ab12cd34\",\"type\":\"accept\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"accept\",\"variantId\":\"2\",\"pageUrl\":\"/\",\"paramValues\":{\"face\":\"serif\"}}}\n{\"seq\":4,\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"file\":\"index.html\",\"sourceEventType\":\"accept\",\"carbonize\":true}}\n{\"seq\":5,\"id\":\"ab12cd34\",\"type\":\"complete\",\"ts\":\"<ISO>\",\"event\":{\"type\":\"complete\",\"id\":\"ab12cd34\"}}\n",
".impeccable/live/sessions/ab12cd34.snapshot.json": "{\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\",\n \"__journalBytes\": 1053,\n \"__nextSeq\": 6\n}\n"
".impeccable/live/sessions/ab12cd34.snapshot.json": "{\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\",\n \"__journalBytes\": 1053,\n \"__nextSeq\": 6\n}\n"
}
}
+3 -3
View File
@@ -1,13 +1,13 @@
{
"steps": [
{
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stderr": "",
"exit": 0,
"signal": null
},
{
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stdout": "{\n \"ok\": true,\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"snapshot\": {\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\"\n }\n}\n",
"stderr": "",
"exit": 0,
"signal": null
@@ -16,6 +16,6 @@
"files": {
".impeccable/live/config.json": "{\n \"files\": [\"index.html\", \"public/**/*.html\"],\n \"insertBefore\": \"</body>\",\n \"commentSyntax\": \"html\"\n}\n",
".impeccable/live/sessions/ab12cd34.jsonl": "{\"seq\":1,\"id\":\"ab12cd34\",\"type\":\"generate\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"generate\",\"action\":\"bolder\",\"count\":3,\"pageUrl\":\"/\",\"element\":{\"tagName\":\"h1\",\"id\":\"hero\",\"classes\":[\"hero-title\"],\"textContent\":\"Oracle Fixture\",\"outerHTML\":\"<h1 id=\\\"hero\\\" class=\\\"hero-title\\\">Oracle Fixture</h1>\"},\"clientSentAt\":1754042400000}}\n{\"seq\":2,\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"file\":\"index.html\",\"sourceEventType\":\"generate\",\"carbonize\":false,\"arrivedVariants\":3}}\n{\"seq\":3,\"id\":\"ab12cd34\",\"type\":\"accept\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"accept\",\"variantId\":\"2\",\"pageUrl\":\"/\",\"paramValues\":{\"face\":\"serif\"}}}\n{\"seq\":4,\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"ts\":\"<ISO>\",\"event\":{\"id\":\"ab12cd34\",\"type\":\"agent_done\",\"file\":\"index.html\",\"sourceEventType\":\"accept\",\"carbonize\":true}}\n{\"seq\":5,\"id\":\"ab12cd34\",\"type\":\"complete\",\"ts\":\"<ISO>\",\"event\":{\"type\":\"complete\",\"id\":\"ab12cd34\"}}\n{\"seq\":6,\"id\":\"ab12cd34\",\"type\":\"complete\",\"ts\":\"<ISO>\",\"event\":{\"type\":\"complete\",\"id\":\"ab12cd34\"}}\n",
".impeccable/live/sessions/ab12cd34.snapshot.json": "{\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [\n {\n \"error\": \"carbonize_cleanup_required\",\n \"file\": \"index.html\",\n \"message\": \"Accepted variant still has carbonize markers that must be folded into source CSS.\"\n }\n ],\n \"updatedAt\": \"<ISO>\",\n \"__journalBytes\": 1173,\n \"__nextSeq\": 7\n}\n"
".impeccable/live/sessions/ab12cd34.snapshot.json": "{\n \"id\": \"ab12cd34\",\n \"phase\": \"completed\",\n \"pageUrl\": \"/\",\n \"sourceFile\": \"index.html\",\n \"previewFile\": null,\n \"previewMode\": null,\n \"expectedVariants\": 3,\n \"arrivedVariants\": 3,\n \"visibleVariant\": 2,\n \"paramValues\": {\n \"face\": \"serif\"\n },\n \"pendingEventSeq\": null,\n \"pendingEvent\": null,\n \"deliveryLease\": null,\n \"checkpointRevision\": 0,\n \"browserCheckpointRevision\": 0,\n \"publicationCheckpointRevision\": 0,\n \"activeOwner\": null,\n \"sourceMarkers\": {},\n \"fallbackMode\": null,\n \"generationPhase\": null,\n \"generationCompletedAt\": 1785578580000,\n \"generationTimings\": {},\n \"variantPlan\": null,\n \"generationCanceled\": true,\n \"generationCanceledAt\": 1785578520000,\n \"cancelReason\": \"accept\",\n \"annotationArtifacts\": [],\n \"mountedVariants\": [],\n \"mountFailures\": [],\n \"renderState\": \"pending\",\n \"diagnostics\": [],\n \"updatedAt\": \"<ISO>\",\n \"__journalBytes\": 1173,\n \"__nextSeq\": 7\n}\n"
}
}
@@ -26,7 +26,7 @@
"signal": null
},
{
"stdout": "",
"stdout": "{\"ok\":true,\"id\":\"ab12cd34\",\"status\":\"done\",\"file\":\"index.html\",\"_instructions\":\"Poll again now.\"}\n",
"stderr": "",
"exit": 0,
"signal": null
@@ -44,7 +44,7 @@
"signal": null
},
{
"stdout": "",
"stdout": "{\"ok\":true,\"id\":\"ab12cd34\",\"status\":\"steer_done\",\"_instructions\":\"Poll again now.\"}\n",
"stderr": "",
"exit": 0,
"signal": null
+19 -1
View File
@@ -4,7 +4,7 @@ import fs from 'node:fs';
import path from 'node:path';
import { MockLanguageModelV3 } from 'ai/test';
import { prepareWorkspace, cleanupWorkspace, makeTools, runTurn, fileLoaded, SKILL_BODY } from './skill-behavior/harness.mjs';
import { assertPlanningFallbackWarning, assertNewWorkLifecycle, assertWorkflowAdvice, assertCommandComparison, missingReferences } from './skill-behavior/assertions.mjs';
import { assertLauncherDenialWarningBeforeNextTool, assertPlanningFallbackWarning, assertNewWorkLifecycle, assertWorkflowAdvice, assertCommandComparison, missingReferences } from './skill-behavior/assertions.mjs';
import { CASE_STUDY_ANSWER } from './skill-behavior/fixtures.mjs';
import { sourceHash as hashSources } from './skill-workflow/source-hash.mjs';
import { assertCompleted, assertFreshCaptures, assertNoChangeDocumentation, assertDocumentationArtifacts } from './skill-workflow/assertions.mjs';
@@ -186,6 +186,24 @@ it('headless behavior shells disable unattended decision pages and omit provider
}
});
it('documentation fallback requires an assistant warning before the first tool call after denial', () => {
const call = { role: 'assistant', content: [{ type: 'tool-call', toolCallId: 'context', toolName: 'bash', input: { command: '.claude/skills/impeccable/scripts/impeccable context' } }] };
const denial = { role: 'tool', content: [{ type: 'tool-result', toolCallId: 'context', toolName: 'bash', output: { type: 'text', value: 'Error: Bash permission denied by the host. This command was not executed.' } }] };
const warning = { role: 'assistant', content: 'Context loading did not run because the launcher was denied.' };
const read = { role: 'assistant', content: [{ type: 'tool-call', toolCallId: 'read', toolName: 'read', input: { path: 'reference/document.md' } }] };
const write = { role: 'assistant', content: [{ type: 'tool-call', toolCallId: 'write', toolName: 'write', input: { path: 'DESIGN.md' } }] };
assert.doesNotThrow(() => assertLauncherDenialWarningBeforeNextTool([call, denial, warning, read, write]));
assert.doesNotThrow(() => assertLauncherDenialWarningBeforeNextTool([call, denial, { role: 'assistant', content: [{ type: 'text', text: warning.content }, ...read.content] }, write]));
for (const messages of [
[call, denial, read, warning, write], // Reads first, warns only before the write.
[call, denial, read, write, warning], // Final-only disclosure.
[warning, call, denial, read], // Not a response to the actual denial.
[call, denial, warning], // Warning with no follow-up tool call.
]) {
assert.throws(() => assertLauncherDenialWarningBeforeNextTool(messages), assert.AssertionError);
}
});
it('planning fallback requires an assistant warning between the denial and context reads', () => {
const call = { role: 'assistant', content: [{ type: 'tool-call', toolCallId: 'context', toolName: 'bash', input: { command: '.claude/skills/impeccable/scripts/impeccable context' } }] };
const denial = { role: 'tool', content: [{ type: 'tool-result', toolCallId: 'context', toolName: 'bash', output: { type: 'text', value: 'Error: Bash permission denied by the host. This command was not executed.' } }] };
+15 -1
View File
@@ -321,7 +321,7 @@ results remain the completed measurements.
| 16 | existing surface, with and without PRODUCT.md; asks where to start | completes relevant advice without edits, interviews, critique archives, menu scans, or explicit invented refinement prerequisites; reference coverage is diagnostic |
| 17 | existing surface; asks whether critique is required before polish | completes read-only advice distinguishing assessment from implementation and explaining critique is optional; reference coverage is diagnostic |
| 18 | existing surface; explicitly requests polish followed by a next-command recommendation | loads `polish.md` rather than substituting workflow advice for the requested work |
| 19 | tiny spacing edit with PRODUCT.md + DESIGN.md; Bash denied, a real-loader success control, and a denied-launcher planning-only case | edits require successful playbook/craft-floor reads and a pre-edit denial warning; planning stays read-only and skips craft-floor |
| 19 | tiny spacing edit with PRODUCT.md + DESIGN.md; Bash denied, a real-loader success control, a denied-launcher planning-only case, and a denied-launcher documentation case (PRODUCT.md + index.html, no DESIGN.md) | edits require successful playbook/craft-floor reads and a pre-edit denial warning; planning stays read-only and skips craft-floor; documentation requires successful document.md and source reads before any DESIGN.md write, with the denial disclosed before the first tool call after the denied launcher |
## Setup launcher-failure branch (2026-09-06, PR #750)
@@ -405,6 +405,20 @@ IMPECCABLE_SKILL_BEHAVIOR_MODELS=claude-sonnet-5,gpt-5.6-terra,gemini-3.7-flash,
node --test --test-name-pattern='scenario 19:' tests/skill-behavior/scenarios.test.mjs
```
### Degraded documentation case (#789)
A fourth scenario 19 case covers the documentation branch: launcher denied,
PRODUCT.md plus an incumbent `index.html`, prompt `/impeccable document`.
It requires an actual denied context attempt, successful `document.md` and
source reads before the DESIGN.md write, the denial disclosed before the
first tool call after the denied launcher, and an untouched PRODUCT.md.
Scenario 19 on this branch, all four cases, one run each on 2026-09-09:
4/4 on claude-sonnet-5, 4/4 on gpt-5.6-terra, 4/4 on gemini-3.7-flash. The
documentation case also passes with main's unchanged `SKILL.src.md` and
`init.md` plus this test file, so the coverage is the test, not a skill-text
change.
## Workflow-advice baseline (2026-09-05, PR #737)
The four cases in scenarios 16-18 are new; prior scenario results do not
+24 -3
View File
@@ -61,17 +61,25 @@ export function assertNewWorkLifecycle(trace, { target, redesign = false }) {
export const LAUNCHER_FAILURE_WARNING = /(?:context|launcher|bash)[^.!?\n]{0,160}(?:denied|refused|unavailable|blocked|could(?:n't| not)|cannot|can't|did(?:n't| not)|fail|unable)|(?:denied|refused|unavailable|blocked|could(?:n't| not)|cannot|can't|unable)[^.!?\n]{0,160}(?:context|launcher|bash)/i;
export function assertPlanningFallbackWarning(responseMessages) {
const blocks = responseMessages.flatMap((message) =>
function responseBlocks(responseMessages) {
return responseMessages.flatMap((message) =>
(typeof message.content === 'string' ? [{ type: 'text', text: message.content }] : message.content)
.map((block) => ({ ...block, role: message.role })),
);
}
function contextLauncherDenialIndex(blocks) {
const contextCalls = new Set(blocks.filter((block) => block.role === 'assistant'
&& block.type === 'tool-call' && block.toolName === 'bash'
&& /impeccable\s+context\b/.test(block.input?.command ?? '')).map((block) => block.toolCallId));
const denialIndex = blocks.findIndex((block) => block.role === 'tool'
return blocks.findIndex((block) => block.role === 'tool'
&& block.type === 'tool-result' && contextCalls.has(block.toolCallId)
&& block.output?.type === 'text' && /Bash permission denied by the host/.test(block.output.value));
}
export function assertPlanningFallbackWarning(responseMessages) {
const blocks = responseBlocks(responseMessages);
const denialIndex = contextLauncherDenialIndex(blocks);
assert.ok(denialIndex >= 0, 'must observe the context launcher denial in the response sequence');
const warningIndex = blocks.findIndex((block, index) => index > denialIndex
&& block.role === 'assistant' && block.type === 'text' && LAUNCHER_FAILURE_WARNING.test(block.text));
@@ -81,3 +89,16 @@ export function assertPlanningFallbackWarning(responseMessages) {
assert.ok(warningIndex > denialIndex && contextReadIndex > warningIndex,
'planning fallback must warn after denial and before reading project context, not only in the final response');
}
export function assertLauncherDenialWarningBeforeNextTool(responseMessages) {
const blocks = responseBlocks(responseMessages);
const denialIndex = contextLauncherDenialIndex(blocks);
assert.ok(denialIndex >= 0, 'must observe the context launcher denial in the response sequence');
const warningIndex = blocks.findIndex((block, index) => index > denialIndex
&& block.role === 'assistant' && block.type === 'text' && LAUNCHER_FAILURE_WARNING.test(block.text));
const nextToolIndex = blocks.findIndex((block, index) => index > denialIndex
&& block.role === 'assistant' && block.type === 'tool-call');
assert.ok(nextToolIndex >= 0, 'must continue with a tool call after the denied launcher');
assert.ok(warningIndex > denialIndex && nextToolIndex > warningIndex,
'must disclose the failed context launcher before the first tool call after the denial, not only before the eventual write');
}
+30 -1
View File
@@ -28,7 +28,7 @@ import {
ENGINE_MISSING_MESSAGE,
} from './harness.mjs';
import { detectProvider, getModel, hasKey, resolveModelList, PROVIDERS } from './providers.mjs';
import { assertPlanningFallbackWarning, LAUNCHER_FAILURE_WARNING, assertAdviceOnly, assertWorkflowAdvice, assertCommandComparison, missingReferences } from './assertions.mjs';
import { assertLauncherDenialWarningBeforeNextTool, assertPlanningFallbackWarning, LAUNCHER_FAILURE_WARNING, assertAdviceOnly, assertWorkflowAdvice, assertCommandComparison, missingReferences } from './assertions.mjs';
import { assertCompleted } from '../skill-workflow/assertions.mjs';
import {
PRODUCT_MD_SAMPLE,
@@ -708,6 +708,35 @@ for (const modelId of resolveModelList()) {
});
}
it('scenario 19: denied launcher requires document.md before writing DESIGN.md', async () => {
const workspace = prepareWorkspace({ files: {
'PRODUCT.md': PRODUCT_MD_SAMPLE,
'index.html': MINIMAL_LANDING_HTML,
} });
try {
const { trace, stepTexts, finishReason, responseMessages } = await runTurn({
workspace,
model,
userPrompt: '/impeccable document. Record the incumbent design system from index.html into DESIGN.md.',
maxSteps: 14,
denyBash: true,
});
logTrace('S19', 'denied-launcher-document', modelId, trace, { finishReason, text: stepTexts.join('\n') });
assert.notEqual(finishReason, 'length', 'a truncated response is not a completed documentation pass');
assert.ok(trace.toolCalls.some((call) => call.name === 'bash' && call.denied && /impeccable\s+context\b/.test(call.input.command)), 'must encounter an actual denied context attempt');
const designWriteIndex = trace.toolCalls.findIndex((call) => call.mutatedPaths.some((p) => /(?:^|\/)DESIGN\.md$/.test(p)));
assert.ok(designWriteIndex >= 0, 'must still produce DESIGN.md, not stop at the refusal');
const documentReadIndex = trace.toolCalls.findIndex((call) => call.name === 'read' && call.succeeded && /(?:^|\/)reference\/document\.md$/.test(call.input.path));
assert.ok(documentReadIndex >= 0 && documentReadIndex < designWriteIndex, 'reference/document.md must actually be read before DESIGN.md is written');
const sourceReadIndex = trace.toolCalls.findIndex((call) => call.name === 'read' && call.succeeded && call.input.path.endsWith('index.html'));
assert.ok(sourceReadIndex >= 0 && sourceReadIndex < designWriteIndex, 'the incumbent source must be read before DESIGN.md is written');
assertLauncherDenialWarningBeforeNextTool(responseMessages);
assert.ok(!trace.toolCalls.some((call) => call.mutatedPaths.some((p) => /(?:^|\/)PRODUCT\.md$/.test(p))), 'must not rewrite PRODUCT.md');
} finally {
cleanupWorkspace(workspace);
}
});
it('scenario 19: denied launcher keeps planning-only work read-only without craft-floor', async () => {
const workspace = prepareWorkspace({ files: {
'PRODUCT.md': PRODUCT_MD_SAMPLE,
+22
View File
@@ -67,4 +67,26 @@ describe('skill reference authoring contracts', () => {
assert.match(polish, /if a newer critique landed meanwhile, its backlog stays live/);
assert.doesNotMatch(polish, /git status|git log/);
});
it('keeps touch-gesture verification in the adapt, audit, and harden references', () => {
const adapt = readFileSync(join(ROOT, 'skill/reference/adapt.md'), 'utf-8').replace(/\r\n?/g, '\n');
const audit = readFileSync(join(ROOT, 'skill/reference/audit.md'), 'utf-8').replace(/\r\n?/g, '\n');
const harden = readFileSync(join(ROOT, 'skill/reference/harden.md'), 'utf-8').replace(/\r\n?/g, '\n');
const verifyAdaptations = adapt.match(/## Verify Adaptations\n([\s\S]*?)\n## /)?.[1] ?? '';
const responsive = audit.match(/### 4\. Responsive Design\n([\s\S]*?)\n### 5\./)?.[1] ?? '';
const edgeCases = harden.match(/### Edge Cases & Boundary Conditions\n([\s\S]*?)\n### /)?.[1] ?? '';
const verifyHardening = harden.match(/## Verify Hardening\n([\s\S]*?)(?:\n## |$)/)?.[1] ?? '';
assert.match(verifyAdaptations, /\*\*Primary gesture\*\*/);
assert.match(verifyAdaptations, /produced the evidence/);
assert.match(verifyAdaptations, /verify layout, never a gesture/);
assert.match(verifyAdaptations, /reported gap, not a blocker/);
assert.match(verifyAdaptations, /\*\*Scroll across it\*\*[\s\S]*without activating it/);
assert.match(responsive, /\*\*Broken touch interaction\*\*/);
assert.match(responsive, /what stayed untested/);
assert.match(responsive, /Exercise the gesture when a browser tool can synthesize touch/);
assert.match(edgeCases, /\*\*Interrupted gestures\*\*[\s\S]*works without a reload/);
assert.match(edgeCases, /clear the dragging state and release capture/);
assert.match(verifyHardening, /\*\*Interrupted gestures\*\*/);
});
});