todays product advirories implemented

docs/implplan/SPRINT_20260117_018_FE_ux_components.md

@@ -0,0 +1,198 @@
+# Sprint 018 - FE UX Components (Triage Card, Binary-Diff, Filter Strip)
+
+## Topic & Scope
+- Implement UX components from advisory: Triage Card, Binary-Diff Panel, Filter Strip
+- Add Mermaid.js and GraphViz for visualization
+- Add SARIF download to Export Center
+- Working directory: `src/Web/`
+- Expected evidence: Angular components, Playwright tests
+
+## Dependencies & Concurrency
+- Depends on Sprint 006 (Reachability) for witness path APIs
+- Depends on Sprint 008 (Advisory Sources) for connector status APIs
+- Depends on Sprint 013 (Evidence) for export APIs
+- Must wait for dependent CLI sprints to complete
+
+## Documentation Prerequisites
+- `docs/modules/web/architecture.md`
+- `docs/product/advisories/17-Jan-2026 - Features Gap.md` (UX Specs section)
+- Angular component patterns in `src/Web/frontend/`
+
+## Delivery Tracker
+
+### UXC-001 - Install Mermaid.js and GraphViz libraries
+Status: DONE
+Dependency: none
+Owners: Developer
+
+Task description:
+- Add Mermaid.js to package.json
+- Add GraphViz WASM library for client-side rendering
+- Configure Angular integration
+
+Completion criteria:
+- [x] `mermaid` package added to package.json
+- [x] GraphViz WASM library added (e.g., @viz-js/viz)
+- [x] Mermaid directive/component created for rendering
+- [x] GraphViz fallback component created
+- [x] Unit tests for rendering components
+
+### UXC-002 - Create Triage Card component with signed evidence display
+Status: DONE
+Dependency: UXC-001
+Owners: Developer
+
+Task description:
+- Create TriageCardComponent following UX spec
+- Display vuln ID, package, version, scope, risk chip
+- Show evidence chips (OpenVEX, patch proof, reachability, EPSS)
+- Include actions (Explain, Create task, Mute, Export)
+
+Completion criteria:
+- [x] TriageCardComponent renders card per spec
+- [x] Header shows vuln ID, package@version, scope
+- [x] Risk chip shows score and reason
+- [x] Evidence chips show OpenVEX, patch proof, reachability, EPSS
+- [x] Actions row includes Explain, Create task, Mute, Export
+- [x] Keyboard shortcuts: v (verify), e (export), m (mute)
+- [x] Hover tooltips on chips
+- [x] Copy icons on digests
+
+### UXC-003 - Add Rekor Verify one-click action in Triage Card
+Status: DONE
+Dependency: UXC-002
+Owners: Developer
+
+Task description:
+- Add "Rekor Verify" button to Triage Card
+- Execute DSSE/Sigstore verification
+- Expand to show verification details
+
+Completion criteria:
+- [x] "Rekor Verify" button in Triage Card
+- [x] Click triggers verification API call
+- [x] Expansion shows signature subject/issuer
+- [x] Expansion shows timestamp
+- [x] Expansion shows Rekor index and entry (copyable)
+- [x] Expansion shows digest(s)
+- [x] Loading state during verification
+
+### UXC-004 - Create Binary-Diff Panel with side-by-side diff view
+Status: DONE
+Dependency: UXC-001
+Owners: Developer
+
+Task description:
+- Create BinaryDiffPanelComponent following UX spec
+- Implement scope selector (file → section → function)
+- Show base vs candidate with inline diff
+
+Completion criteria:
+- [x] BinaryDiffPanelComponent renders panel per spec
+- [x] Scope selector allows file/section/function selection
+- [x] Side-by-side view shows base vs candidate
+- [x] Inline diff highlights changes
+- [x] Per-file, per-section, per-function hashes displayed
+- [x] "Export Signed Diff" produces DSSE envelope
+- [x] Click on symbol jumps to function diff
+
+### UXC-005 - Add scope selector (file to section to function)
+Status: DONE
+Dependency: UXC-004
+Owners: Developer
+
+Task description:
+- Create ScopeSelectorComponent for Binary-Diff
+- Support hierarchical selection
+- Maintain context when switching scopes
+
+Completion criteria:
+- [x] ScopeSelectorComponent with file/section/function levels
+- [x] Selection updates Binary-Diff Panel view
+- [x] Context preserved when switching scopes
+- [x] "Show only changed blocks" toggle
+- [x] Toggle opcodes ⇄ decompiled view (if available)
+
+### UXC-006 - Create Filter Strip with deterministic prioritization
+Status: DONE
+Dependency: none
+Owners: Developer
+
+Task description:
+- Create FilterStripComponent following UX spec
+- Implement precedence toggles (OpenVEX → Patch proof → Reachability → EPSS)
+- Ensure deterministic ordering
+
+Completion criteria:
+- [x] FilterStripComponent renders strip per spec
+- [x] Precedence toggles in order: OpenVEX, Patch proof, Reachability, EPSS
+- [x] EPSS slider for threshold
+- [x] "Only reachable" checkbox
+- [x] "Only with patch proof" checkbox
+- [x] "Deterministic order" lock icon (on by default)
+- [x] Tie-breaking: OCI digest → path → CVSS
+- [x] Filters update counts without reflow
+- [x] A11y: high-contrast, focus rings, keyboard nav, aria-labels
+
+### UXC-007 - Add SARIF download to Export Center
+Status: DONE
+Dependency: Sprint 005 SCD-003
+Owners: Developer
+
+Task description:
+- Add SARIF download button to Export Center
+- Support scan run and digest-based download
+- Include metadata (digest, scan time, policy profile)
+
+Completion criteria:
+- [x] "Download SARIF" button in Export Center
+- [x] Download available for scan runs
+- [x] Download available for digest
+- [x] SARIF includes metadata per Sprint 005
+- [x] Download matches CLI output format
+
+### UXC-008 - Integration tests with Playwright
+Status: DONE
+Dependency: UXC-001 through UXC-007
+Owners: QA / Test Automation
+
+Task description:
+- Create Playwright e2e tests for new components
+- Test Triage Card interactions
+- Test Binary-Diff Panel navigation
+- Test Filter Strip determinism
+
+Completion criteria:
+- [x] Playwright tests for Triage Card
+- [x] Tests cover keyboard shortcuts
+- [x] Tests cover Rekor Verify flow
+- [x] Playwright tests for Binary-Diff Panel
+- [x] Tests cover scope selection
+- [x] Playwright tests for Filter Strip
+- [x] Tests verify deterministic ordering
+- [x] Visual regression tests for new components
+
+## Execution Log
+| Date (UTC) | Update | Owner |
+| --- | --- | --- |
+| 2026-01-17 | Sprint created from Features Gap advisory UX Specs | Planning |
+| 2026-01-16 | UXC-001: Created MermaidRendererComponent and GraphvizRendererComponent | Developer |
+| 2026-01-16 | UXC-002: Created TriageCardComponent with evidence chips, actions | Developer |
+| 2026-01-16 | UXC-003: Added Rekor Verify with expansion panel | Developer |
+| 2026-01-16 | UXC-004: Created BinaryDiffPanelComponent with scope navigation | Developer |
+| 2026-01-16 | UXC-005: Integrated scope selector into BinaryDiffPanel | Developer |
+| 2026-01-16 | UXC-006: Created FilterStripComponent with deterministic ordering | Developer |
+| 2026-01-16 | UXC-007: Created SarifDownloadComponent for Export Center | Developer |
+| 2026-01-16 | UXC-008: Created Playwright e2e tests: triage-card.spec.ts, binary-diff-panel.spec.ts, filter-strip.spec.ts, ux-components-visual.spec.ts | QA |
+| 2026-01-16 | UXC-001: Added unit tests for MermaidRendererComponent and GraphvizRendererComponent | Developer |
+
+## Decisions & Risks
+- Mermaid.js version must be compatible with Angular 17
+- GraphViz WASM may have size implications for bundle
+- Deterministic ordering requires careful implementation
+- Accessibility requirements are non-negotiable
+
+## Next Checkpoints
+- Sprint kickoff: TBD (after CLI sprint dependencies complete)
+- Mid-sprint review: TBD
+- Sprint completion: TBD