Cycles
Design · c56

Compliance Framework Pages

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:

  1. /v2/compliance/framework-listing — Lists Active Frameworks and Available Frameworks with Deactivate/Activate action columns
  2. /v2/compliance/framework/owasp-llm-top-10 — Framework details page

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)
  • Figma source: https://www.figma.com/design/AGxdHnJ1cf847C7WRuybch/app.qpoint.io---1.1---Agent-Transition
  • 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 export
Instrumented framework mapping, projected frameworks, and evidence export
Active and available compliance frameworks — kind, violations, control completeness, activate/deactivate
Active and available compliance frameworks — kind, violations, control completeness, activate/deactivate
Framework-lensed findings table — severity rollup, chip filters, and expandable violation-detail rows
Framework-lensed findings table — severity rollup, chip filters, and expandable violation-detail rows
c56 hero
c56 full
c56 full
c56 full
c56 full

In the archive

Artifacts

  • initial-prompt.md
  • initial-prompt.md
  • plan.md

Qpoint Brand Style Guide