Make Conbal placement geometry-safe and self-auditing

[SteveSimonson]

Closes #49.

Outcome

• Removes Conbal facts from purchase and asymmetric detail columns.
• Rebalances the PDP into independent gallery/details and purchase columns.
• Uses three spaced semantic placements: after review, after field-guide content, and as a replacement tile in related products.
• Renders Conbal facts with host-native iBamboo components; remote HTML/CSS is never mounted.
• Adds route-aware rolling rotation history and stable resize behavior.
• Caps Shop fact density and keeps recommendation shelves in complete rows.
• Adds Playwright geometry gates at 390, 768, 1024, 1440, and 2560px.

Verification

• npm test (14/14)
• npm run lint
• npm run build
• npm run test:e2e (8/8)
• Affiliate links retain iu0e3-20

Depends on the Conbal structured v2 PR. The client includes a v1 fallback for deployment safety. This PR must pass CI and independent adversarial review before merge/deploy.

[SteveSimonson]

Adversarial review — current head 0b554b3

• P1 — PDP whitespace gate cannot detect the reported failure. tests/e2e/content-balloon-layout.spec.ts:84-89 compares the bottoms of the two CSS-grid cells. Grid stretch makes those bounds equal by construction, even when the final child in one column ends hundreds of pixels earlier. A 1440px full-catalog audit of actual last-child bottoms found 42/98 PDPs with more than 100px of dead space, 6 with more than 300px, and a worst case of 636px on royal-craft-wood-wooden-cutting-boards-for-kitchen-meal-prep-serving-non-toxic-b. Product.tsx:218-337 still encodes the imbalance.

• P1 — Product.tsx:309-337 creates a mobile commerce and heading-order regression. Product details h2 is inside the gallery column, before the purchase column and page h1 in DOM order. Below lg, shoppers must pass the gallery, optional feature video, and specs before product name, price, and Buy on Amazon. Assistive technology also encounters h2 before the page h1.

• P1 — useAdaptiveContentBalloons.ts:70-136 never clears or revalidates the current deck when routeKey or plan.signature changes. Reproduced by loading Product A, navigating client-side to Product B, then failing both v2 and legacy delivery: all three first-product slugs remain rendered indefinitely on Product B. This defeats route relevance and fail-closed behavior. The resize test at lines 115-141 does not cover route transitions.

• P1 — Product.tsx:117-123 only offers two slots when product enrichment is absent. Only 8 static products have enrichment, so 90/98 catalog PDPs render two balloons, not the required 3-8. Reproduced on the Niagara mattress PDP: only product-guide-note and product-related-card render. The E2E suite hardcodes an enriched product and cannot catch this.

• P2 — contentBalloonContent.ts:11-14 can throw RangeError while rendering a malformed legacy numeric entity. Reproduced with � in the legacy headline. Because the conversion runs during render without an error boundary, one malformed v1 balloon can take down the route instead of failing closed.

Local verification: npm test PASS (14/14), npm run lint PASS, npm run build PASS, npm run test:e2e PASS (8/8). The passing tests do not cover the failures above.

VERDICT: REQUEST_CHANGES

[SteveSimonson]

Adversarial re-review — commit ec31d0a

• P1 — The PDP whitespace gate is still tautological and the original defect remains inside the new bordered media surface. Product.tsx at ec31d0a:216 uses items-stretch while both direct children at lines 218 and 283 use h-full. tests/e2e/content-balloon-layout.spec.ts:155-184 only asserts that those forced-equal outer boxes have equal heights and bottoms, so it cannot detect empty space inside either box. Independent 1440px catalog audit measured each surface bottom against its own last child: 98/98 PDPs contain more than 100px of internal dead space, 94/98 exceed 300px, and the worst media surface contains 745px of blank card below its content. Example: royal-craft-wood-wooden-cutting-boards-for-kitchen-meal-prep-and-serving-bamboo has two 1546px forced-equal surfaces, but media content ends 745px before the card ends. The previous screenshot-class failure is hidden inside a white bordered card, not eliminated.

Local checks on ec31d0a before the follow-up edit began: npm test PASS (14/14), npm run lint PASS, npm run build PASS, updated Playwright gates PASS. The geometry test passes because CSS guarantees its assertion.

VERDICT: REQUEST_CHANGES

[SteveSimonson]

Adversarial re-review — commit 32f5fa7

• P1 — The thumbnail-overlay reservation creates a new empty stripe on single-image PDPs. Product.tsx:225-229 applies pb-24 / sm:pb-28 to every non-placeholder main image, but the overlaid thumbnail rail is rendered only when thumbs.length > 1. Independent live-local audit found 61/98 PDPs with no thumbnail buttons. On the Niagara mattress PDP, the only product image visibly ends about 110px above the media-stage bottom, leaving a large blank white band. The updated catalog geometry gate cannot detect this because it measures the image-stage wrapper as the media surface last child, not the padded image content. Apply the bottom reservation only when a thumbnail rail exists.

Verification otherwise passes: npm test 14/14, lint, build, Playwright exit green, independent 98-route audit found zero remaining surface-level dead-space violations; this finding is inside the image stage.

VERDICT: REQUEST_CHANGES

[SteveSimonson]

Adversarial final re-review — commit 7fa746b

PASS. The thumbnail reservation is now conditional on an actual rail, single-image PDPs retain only normal symmetric image padding, and the catalog regression explicitly rejects large bottom padding when no rail exists. Prior findings covering route-stale decks, mobile purchase order, three-placement coverage, malformed legacy entities, true surface-content bottoms, and affiliate tag iu0e3-20 remain resolved.

Independent verification:

• npm test: 14/14 PASS
• npm run lint: PASS
• npm run build: PASS
• npm run test:e2e: PASS, exit green for 12-test suite including five widths and full-catalog audit
• git diff --check: PASS

No remaining concrete defects found. GitHub CI is still pending and must be green before merge.

VERDICT: APPROVE

[SteveSimonson]

Adversarial approval confirmation — commit 66fea6f

PASS. The test-only optimization preserves the same production-style ASIN deduplication, visits the same 98 PDPs, waits for each route-specific h1 before evaluating geometry, and retains every prior assertion. Client-side navigation also exercises the real React Router transition path and the stale-deck safeguards.

Independent npm run test:e2e result: 12/12 PASS; full catalog case completed in 11.8s, total suite 23.3s. git diff --check remains clean. No runtime files changed from the previously approved commit. GitHub CI is pending and must be green before merge.

VERDICT: APPROVE

[SteveSimonson]

Adversarial final delta review — commit cf5ebb4

APPROVE. Raising the permitted inter-column bottom difference from 100px to 128px does not materially weaken the visual gate: the strict per-surface internal dead-space ceiling remains 40px, the no-thumbnail padding assertion remains intact, the split begins only at xl, and the details section must still start below both surfaces. The 28px renderer tolerance cannot reintroduce the hundreds-of-pixels whitespace failures this gate was designed to block.

No runtime code changed and git diff --check is clean.

VERDICT: APPROVE