archivedcreated 2026-07-25· last activity 2026-09-11
Mock up two compliance framework pages from Figma designs
Why
The product needs two compliance-related pages mocked in the design site to validate the Figma designs and establish the component patterns for framework management workflows.
Objective
Create two pages in the design site:
/v2/compliance/framework-listing — Lists Active Frameworks and Available Frameworks with Deactivate/Activate action columns
Both pages transcribed from the Figma design source (ignoring nav chrome).
Scope
New pages: app/pages/pages/framework-listing.vue, app/pages/pages/framework-detail.vue (design-site pages section, registered in app/data/page-registry.ts)
Layer components: Reuse existing table, button, and layout components as needed
No new layer components up front — build cells inline, extract to the layer in a follow-up pass if they prove reusable (c54 pattern)
See plan.md for the full build plan.
Key Changes
app/pages/pages/findings.vue — /v2/findings mock (added mid-cycle): framework-lens chip filters (working), severity rollup DataCard, and a UxTableListExpandRow findings table where each row expands into the violation-detail panel (policy → violation → remediation chain, severity/first-seen/last-seen/framework meta, Manage Violation button) as drawn in the updated Figma frame.
app/pages/pages/framework-listing.vue — Active (3) + Available (7) framework tables via UxTableList; framework/kind/violations/completeness columns plus the prompt's Deactivate/Activate action column. Reuses PolicyCompletenessCell from the c54 policy suite; kind glyphs (shield/scales/medal) are inline SVGs since the layer icon set has no fit.
app/pages/pages/framework-detail.vue — OWASP LLM Top 10 detail: header + kind badge, live recommended-controls progress bar, and an LLM01–LLM10 requirements table with real UxToggle control state (toggles and Activate/Deactivate-all buttons drive the progress count).
app/data/page-registry.ts — two new entries in the security group; pages cross-link (listing "Details + Configuration" → detail, detail's back link → listing).
Mock data varies per row instead of repeating the Figma placeholders (120 violations / 84% everywhere); framework names & descriptions extend the set from compliance.vue.
Outcome
Both pages render at /pages/framework-listing and /pages/framework-detail and are listed in the pages index. Cell-component extraction to the layer (framework cell, kind badge, violations stat, control toggle row, addressability status) deferred to a follow-up pass per plan.md.
Visual record
8 captures — heroes, page slices, and full-page renders. Click to view.
Instrumented framework mapping, projected frameworks, and evidence exportActive and available compliance frameworks — kind, violations, control completeness, activate/deactivateFramework-lensed findings table — severity rollup, chip filters, and expandable violation-detail rows