4.2 Stage 2 & 3: Multimodal Visual Geometry & CSS Auto-Patch

chinwag ui-gate --vision-tribunal --auto-patch

⏳ Coming Soon (v0.2.0 · CHWG-PUB-111 · ⚡ In Flight — Live Autonomous Fleet): While Stage 1 (176/176 DOM Physics · verify-ui-geometry.py) and the Deterministic 64/64 Copy Gate (verify-copy-declaration.py) are ✅ Available Now (v0.1.0), Stage 2 & Stage 3 (chinwag-visual-tribunal-v1 multimodal rubric & autonomous CSS/HTML auto-patch LoRA synthesis) are currently in flight for v0.2.0 (Chinwag Reflex-1 p10: 2026-11-16 · p50: 2026-11-20 · p90: 2026-11-26). Track live progress via /api/reality-matrix and the Chinwag Public Roadmap.

Deterministic bounding boxes catch overflow and contrast regressions, but they cannot judge whether a dark-mode glass card looks muddy, an SVG diagram has cramped labels, or a call-to-action button lacks visual hierarchy.

For visual semantics and automatic repair, chinwag ui-gate combines Stage 1 DOM physics with Stage 2 (Chinwag Vision-3 64-Question Multimodal Rubric) and Stage 3 (Chinwag Vision-3 Autonomous CSS/HTML Auto-Patch Synthesis).

# Run all 3 stages: DOM physics (0 Cr) -> 16-surface Vision-3 Audit (100 Cr) + Drop-In CSS Fix & Closed-Loop Re-Verify (200 Cr total!)
chinwag ui-gate --url http://localhost:3000 --stage 3 --auto-patch

Architecture of the 3-Stage Visual Pipeline

+-----------------------------------------------------------------------------------+
| STAGE 1: Deterministic 12-Tuple DOM Physics (Local Headless Chromium · <900ms)    |
|   8 Viewports × 2 Themes × 11 Invariants = 176/176 Mathematical Assertions (0 Cr) |
+-----------------------------------------+-----------------------------------------+
                                          |
                                          v (DOM Snapshot + 16 Viewport Renders)
+-----------------------------------------------------------------------------------+
| STAGE 2 & 3: Chinwag Vision-3 16-Surface Geometry + CSS Auto-Patch (100 / 200 Cr) |
|   Evaluates visual hierarchy, typography rhythm, surface elevation, icon optical  |
|   balance, dark/light polarity harmony, and component spacing density across      |
|   all 16 surfaces (100 Cr); synthesizes a drop-in CSS/DOM fix inside an isolated  |
|   Shadow jj workspace and re-verifies all 16 surfaces (200 Cr total).             |
|   Unchanged DOM/CSS trees hit the BLAKE3 Visual Cache -> 0 Cr (Free)!             |
+-----------------------------------------------------------------------------------+

Stage 2: The 64-Question Chinwag Vision-3 16-Surface Design Rubric (100 Cr · $0.64 on Growth Pack)

When Stage 2 runs, chinwag ui-gate computes a deterministic BLAKE3 visual fingerprint over the rendered DOM structure and computed styles. If the visual fingerprint matches a previously approved commit, Stage 2 returns an instant cache hit at 0 Cr.

When visual changes are present, Chinwag Vision-3 evaluates the 16 viewport renders against 64 structured visual criteria grouped into 8 domains (8 questions per domain):

1. Typographic Hierarchy & Rhythm (Q01..Q08): Display scale cadence, heading-to-body contrast, optical kerning, line-height breathing room, and code block legibility.
2. Surface Elevation & Border Hairlines (Q09..Q16): Card-on-canvas separation, 1px border luminance, subtle glass blur discipline, and shadow softness across Midnight and Daylight.
3. Color Polarity & Semantic Accent Discipline (Q17..Q24): Restraint of primary emerald (#38F2AF / #0B7A53) and sky (#58A6FF) accents, semantic badge clarity, and zero washed-out grays in light mode.
4. Navigation & Wayfinding Clarity (Q25..Q32): Active route indicators, breadcrumb legibility, search trigger discoverability (⌘K), and mobile drawer ergonomics.
5. Data Density & Table Alignment (Q33..Q40): Column header alignment, numeric right-alignment with tabular-nums, row hover affordances, and responsive scroll indicators.
6. Interactive Affordance & State Feedback (Q41..Q48): Primary vs. secondary CTA distinction, focus-visible ring clarity, disabled state legibility, and copy-button feedback.
7. Diagram, Icon & Media Framing (Q49..Q56): SVG stroke consistency, diagram padding, aspect-ratio preservation, and zero clipped badges inside cards.
8. Responsive Reflow & Whitespace Balance (Q57..Q64): Section vertical cadence, balanced multi-column Collapse on 1024px and 768px, and mobile thumb-zone spacing.

Stage 3: Autonomous CSS/HTML Auto-Patch Synthesis & Closed-Loop 16-Surface Re-Verification (200 Cr Total · $1.28 on Growth Pack)

Instead of dumping a list of UI complaints into a PR comment and waiting for a human designer, Stage 3 (--auto-patch) repairs the stylesheet or component markup automatically and seals a permanent visual proof into your Git timeline:

1. Defect Localization: Maps each failed Stage 1 invariant (GEO-01..GEO-11) or Stage 2 rubric item (Q01..Q64) back to its exact source component and CSS rule via source maps.
2. Isolated Patch Synthesis: Chinwag Vision-3 generates a minimal, token-compliant CSS/HTML patch inside the task's isolated Shadow jj workspace (always using existing CSS custom properties rather than hard-coded hex values).
3. Closed-Loop Verification: Re-runs Stage 1 (176/176) and Stage 2 (64/64) against the patched build across all 16 surfaces (32 total VLM GPU surface evaluations). The patch is only committed if zero regressions are introduced across all 16 viewport-theme surfaces.

Real Auto-Patch Case Study

--- a/assets/css/pricing-grid.css
+++ b/assets/css/pricing-grid.css
@@ -18,7 +18,9 @@
 .credit-schedule-wrapper {
   width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 .tier-card .muted-footnote {
-  color: #7A8291;
+  color: var(--cw-text-secondary); /* 6.8:1 in Daylight, 8.4:1 in Midnight */
   font-variant-numeric: tabular-nums;
 }

Unified Credit Schedule for chinwag ui-gate

Next Steps

• Next: Deterministic 64/64 Declaration Copy Gate (INV-DECLARATION-COPY-GATE-01)
• Ready to eliminate visual regressions before merge? Reserve Your Organization Credit Pack →