Improve Admin SPA UI auto-fix: platform UI catalog + pre-PR visual render harness#54
Merged
Merged
Conversation
… harness Fix the /qa-fix Admin SPA (Angular) layout/CSS auto-fix path that thrashed on vc-module-export PR #101 (5 commits + dismissed review). Two gaps closed: - Knowledge: new /angular-admin platform UI class catalog (blades, search, filters, dropdowns, inputs, buttons, grids, checkboxes, dialogs, lists) grounded in vc-platform source, with a "mirror a canonical sibling blade" discovery recipe + before/after fix recipes. There is no Storybook for the Admin SPA. - Verification: visual render harness renders the real blade against the real platform.css and proves the fix red->green in a browser BEFORE the PR opens (qa-backend-expert interactive; Bash+Playwright in headless CI) instead of trivial-skip / post-deploy-only. Wire-up: /angular-admin SKILL + angular-patterns Layout/CSS path; gate ladder (G2 red render, G3/G4 green pre-PR + reject inline position/fixed-px/ng-style); fullstack-backend, backend-reviewer (Gate-4 anti-pattern check), qa-backend-expert; vc-module-architecture, skills-commands; CI twins fix-backend-agent / fix-triage-agent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ality-check The frontmatter description and "Reality check" section described only the Node scratch harness (logic path), making the new layout/CSS render-harness path invisible to fullstack-backend. Update both to present the two proof mechanisms (logic → Node harness; layout/CSS → visual render harness). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… (VCST-5276 validation) Validating the new tooling against the live VCST-5276 bug surfaced a real limitation: for blades where .blade-content hosts a ui-grid, a static render / DOM-swap can't prove a toolbar↔grid-header overlap is fixed — ui-grid only repositions below the toolbar on a real Angular relayout, so the static green showed the same overlap. Document the limitation + two honest options: drive a real $digest + handleWindowResize() in the harness, or validate the fix pattern by reference to a canonical sibling blade (vc-module-pricing pricelist-list, confirmed 0px overlap on live QA) and route to deploy verification (G6). Never report a static green as proof for ui-grid blades. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…arness Option 1 now ships runnable code: capture gridApi via onRegisterApi, flush the digest so .blade-static auto-sizes, then requestAnimationFrame -> window resize + handleWindowResize() + re-digest, and gate the screenshot on a ready flag so the grid has repositioned below the toolbar. Assert thead-top >= toolbar-bottom rather than eyeballing. Clarifies it needs a real Angular+ui-grid bootstrap (not a static setContent or a live-admin DOM swap). Option 2 (validate-by-reference + deploy verification) keeps the pricing-blade evidence. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…icon renders A remote platform.css references its FA glyph font via relative URLs that 404 when render.html is served from localhost, so fa fa-* icons render blank (hit during the VCST-5276 clear-icon proof). Note it in the render.html recipe + the CDN workaround. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ASUREMENT (VCST-5276 lesson) The catalog wrongly claimed ".blade-static auto-sizes; never reserve height" — that false guidance drove a fix that didn't fix VCST-5276. Live DevTools measurement proved .blade-static is FIXED-height (70px, overflow:visible) and .blade-content flows in at that fixed bottom; a note stacked above the searchrow overflows ~136px onto the grid header. Corrections: - §2.1: blade-static is fixed-height, not auto-sizing; multi-row toolbars reserve height via __expanded or move the note into content (the original 140px reservation was the right idea; only inline ng-style was wrong — removing it re-broke the bug). - css-layout-patterns Recipe 2 rewritten (was the exact failed approach). - §4 + SKILL + quality-gates G3: a layout fix is gated by a NUMERIC measurement (getBoundingClientRect: searchrow.bottom <= gridHeader.top), not a screenshot — a screenshot gave a false PASS. Adds a reusable read-only measure script run via Chrome DevTools / browser_evaluate. Measure failing -> fix -> measure green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…r + wire into skill Adds bladeStaticOverflowSnippet() + classifyBladeStaticOverflow() to scripts/lib/measure-layout.ts: a reusable, read-only (getBoundingClientRect/ getComputedStyle) check that detects when a fixed-height .blade-static's content overflows past .blade-content's top — the VCST-5276 defect class. Generic: works on ANY module's blade (located by header substring or auto-picked), any toolbar shape (searchrow, multi-row filter, note), and names the offending element. The universal assertion is bladeStaticContentBottom <= bladeContentTop (overflowPx===0), NOT the misleading fixed-box edge. Validated live on the export blade: overflowPx 66, offender div.form-group.searchrow, PASS false. admin-spa-ui-conventions.md §4 now points at the shared helper instead of an inline copy. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
vc-module-export PR #101 took 5 commits + a dismissed review to fix one Admin SPA toolbar-overlap bug. The
/qa-fixAdmin UI path had two gaps:/angular-adminhad zero documentation of the platform's Admin SPA layout classes, so the agent invented layout with inlineposition:absolute+ fixed pixels and discovered the real conventions (searchrow/column-half/filter-edit,blade-staticauto-sizing) by trial-and-error.What
New
/angular-adminfilesadmin-spa-ui-conventions.md— element-by-element catalog of platform UI classes (blades & sizing, search, filters,va-filter-panel, dropdowns, form inputs, buttons,ui-grid,vc-checkbox, dialogs, lists) grounded invc-platformsource, with a mirror-a-canonical-sibling-blade discovery recipe. (No Storybook exists for the Admin SPA — this is the substitute style guide.)css-layout-patterns.md— before/after fix recipes.visual-render-harness.md— renders the real blade against the realplatform.cssand proves the fix red→green in a browser before the PR opens (qa-backend-expert +playwright-edgeinteractively; Bash + Playwright headlessly in CI).Wired into the flow
SKILL.md/angular-patterns.md— new Layout/CSS path; replaced the trivial-skip / "human-Storybook confirmation" language.quality-gates.md— G2 (render red), G3/G4 (browser green pre-PR + reject inlineposition/fixed-px/ng-style), G6 (final post-deploy confirmation).fullstack-backend.md,backend-reviewer.md(Gate-4 anti-pattern check),qa-backend-expert.md(render-harness verification),vc-module-architecture.md,skills-commands.md.ci/agents/fix-backend-agent.md(+ Admin SPA UI section, Bash+Playwright render),ci/agents/fix-triage-agent.md(layout/CSS is GO).Net effect
Admin SPA layout/CSS bugs are fixed in one structural pass (mirror the platform pattern) and visually proven before the PR — no more public commit thrash, no "deploy and see."
🤖 Generated with Claude Code