35 KiB
35 KiB
Proof Visualization Wireframes
Version: 1.0.0 Status: APPROVED Created: 2025-12-20 Sprint Reference: SPRINT_3500_0001_0001
Overview
This document provides UX wireframes for the proof visualization features in StellaOps Console. These wireframes support:
- Proof Ledger View — Displaying deterministic proof chains
- Score Replay Panel — Verifying bit-identical replay
- Unknowns Queue — Managing ambiguity triage
- Reachability Explain Widget — Visualizing call-graph paths
- Proof Chain Inspector — Deep-diving attestation chains
1. Proof Ledger View
Purpose
Display the cryptographic proof chain for a scan, showing how the score was calculated with frozen feed snapshots.
Wireframe
┌─────────────────────────────────────────────────────────────────────────────┐
│ Scan: alpine:3.18 @ sha256:abc123... [Replay] [Export] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ PROOF CHAIN ✓ Verified │ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ SCAN MANIFEST │ │ │
│ │ │ ─────────────────│ │ │
│ │ │ ID: scan-7f3a... │ │ │
│ │ │ Artifact: alpine │ │ │
│ │ │ ┌──────────────┐ │ │ │
│ │ │ │ Concelier ↓ │ │ sha256:feed123... │ │
│ │ │ │ Snapshot │─┼──────────────────────────────────────┐ │ │
│ │ │ └──────────────┘ │ │ │ │
│ │ │ ┌──────────────┐ │ │ │ │
│ │ │ │ Excititor ↓ │ │ sha256:vex456... │ │ │
│ │ │ │ Snapshot │─┼───────────────────────────────┐ │ │ │
│ │ │ └──────────────┘ │ │ │ │ │
│ │ └──────────────────┘ │ │ │ │
│ │ │ │ │ │ │
│ │ ▼ │ │ │ │
│ │ ┌──────────────────┐ │ │ │ │
│ │ │ PROOF BUNDLE │ │ │ │ │
│ │ │ ─────────────────│ │ │ │ │
│ │ │ Root Hash: │ │ │ │ │
│ │ │ sha256:proof789. │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ [View CBOR] │ │ │ │ │
│ │ │ [View DSSE] │ │ │ │ │
│ │ └──────────────────┘ │ │ │ │
│ │ │ │ │ │ │
│ │ ▼ ▼ ▼ │ │
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
│ │ │ FROZEN FEEDS AT SCAN TIME │ │ │
│ │ │ ─────────────────────────────────────────────────────────────│ │ │
│ │ │ Concelier: 2025-12-20T10:30:00Z (142,847 advisories) │ │ │
│ │ │ Excititor: 2025-12-20T10:30:00Z (23,491 VEX statements) │ │ │
│ │ └──────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ PROOF SEGMENTS [Expand All]│ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ #1 score_delta CVE-2024-1234 +7.5 → 8.2 [View Details] │ │
│ │ #2 vex_claim CVE-2024-1234 not_affected [View Claim] │ │
│ │ #3 reachability CVE-2024-1235 unreachable [View Graph] │ │
│ │ #4 unknown_band pkg:apk/libcrypto WARM [View Queue] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Key Elements
| Element | Description | Interaction |
|---|---|---|
| Scan Header | Artifact digest + scan ID | Click to copy |
| Proof Chain Status | ✓ Verified / ⚠ Unverified / ✗ Failed | Hover for details |
| Replay Button | Triggers score replay verification | Opens replay modal |
| Export Button | Downloads proof bundle (CBOR + DSSE) | ZIP download |
| Proof Segments | Expandable list of score decisions | Click to expand |
2. Score Replay Panel
Purpose
Allow users to verify that a scan produces identical results when replayed with frozen feeds.
Wireframe
┌─────────────────────────────────────────────────────────────────────────────┐
│ ⟲ Score Replay Verification [Close] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Original Scan Replay Result │ │
│ │ ───────────── ───────────── │ │
│ │ │ │
│ │ Proof Root: Proof Root: │ │
│ │ sha256:proof789... sha256:proof789... │ │
│ │ │ │
│ │ Score: 8.2 Score: 8.2 │ │
│ │ Findings: 47 Findings: 47 │ │
│ │ Critical: 3 Critical: 3 │ │
│ │ High: 12 High: 12 │ │
│ │ │ │
│ │ ════════ │ │
│ │ ║ MATCH ║ │ │
│ │ ════════ │ │
│ │ │ │
│ │ ✓ Bit-identical replay confirmed │ │
│ │ ✓ Proof root hashes match │ │
│ │ ✓ All 47 findings reproduced exactly │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Replay Details │ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ Replayed At: 2025-12-20T14:22:30Z │ │
│ │ Scanner Version: 1.42.0 (same as original) │ │
│ │ Concelier Snapshot: sha256:feed123... (frozen) │ │
│ │ Excititor Snapshot: sha256:vex456... (frozen) │ │
│ │ Duration: 1.23s │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ [Download Replay Report] [View Diff (none)] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
States
| State | Display | Actions |
|---|---|---|
| Replaying | Spinner + progress bar | Cancel |
| Match | Green ✓ MATCH banner | Download report |
| Mismatch | Red ✗ MISMATCH banner | View diff, escalate |
| Error | Yellow ⚠ ERROR banner | Retry, view logs |
3. Unknowns Queue
Purpose
Display packages with ambiguous or missing data, ranked by urgency for triage.
Wireframe
┌─────────────────────────────────────────────────────────────────────────────┐
│ Unknowns Queue [Filter ▾] [Export CSV] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Summary │ │
│ │ ═══════════════════════════════════════════════════════════════════════│ │
│ │ 🔴 HOT: 12 🟠 WARM: 47 🔵 COLD: 234 ✓ RESOLVED: 1,892 │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ HOT Queue (requires immediate attention) │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Score │ Package │ Uncertainty │ Pressure │ Age │ │
│ │ ──────┼────────────────────────────┼─────────────┼──────────┼─────── │ │
│ │ 94.2 │ pkg:npm/lodash@4.17.21 │ 0.89 │ 0.95 │ 2d │ │
│ │ │ Missing: CVE-2024-9999 VEX │ │ │ │ │
│ │ │ [Research] [Request VEX] [Suppress] │ │
│ │ ──────┼────────────────────────────┼─────────────┼──────────┼─────── │ │
│ │ 87.5 │ pkg:maven/log4j@2.17.1 │ 0.72 │ 0.98 │ 5d │ │
│ │ │ Missing: Reachability data │ │ │ │ │
│ │ │ [Analyze] [Mark Reviewed] [Suppress] │ │
│ │ ──────┼────────────────────────────┼─────────────┼──────────┼─────── │ │
│ │ ... │ │ │ │ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Ranking Factors │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Score = (Uncertainty × 50) + (Exploit Pressure × 50) │ │
│ │ │ │
│ │ Uncertainty: │ │
│ │ - Missing VEX statement: +0.40 │ │
│ │ - Missing reachability: +0.30 │ │
│ │ - Conflicting sources: +0.20 │ │
│ │ - Stale advisory (>90d): +0.10 │ │
│ │ │ │
│ │ Exploit Pressure: │ │
│ │ - In KEV list: +0.50 │ │
│ │ - EPSS ≥ 0.90: +0.30 │ │
│ │ - EPSS ≥ 0.50: +0.15 │ │
│ │ - CVSS ≥ 9.0: +0.05 │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Band Definitions
| Band | Score Range | Color | SLA |
|---|---|---|---|
| HOT | 75-100 | 🔴 Red | 24h |
| WARM | 50-74 | 🟠 Orange | 7d |
| COLD | 25-49 | 🔵 Blue | 30d |
| RESOLVED | 0-24 / Resolved | ✓ Green | N/A |
4. Reachability Explain Widget
Purpose
Show the call-graph path from entrypoint to vulnerable code, explaining why a finding is reachable or unreachable.
Wireframe
┌─────────────────────────────────────────────────────────────────────────────┐
│ Reachability: CVE-2024-1234 in pkg:npm/lodash@4.17.21 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Status: ✓ REACHABLE Paths Found: 3 │
│ Shortest Path: 4 hops Confidence: 98% │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Shortest Path (4 hops) │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ 🚪 ENTRYPOINT │ │ │
│ │ │ POST /api/users │ │ │
│ │ │ UsersController.Create()│ │ │
│ │ └───────────┬─────────────┘ │ │
│ │ │ static call │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ UserService.ValidateInput│ │ │
│ │ │ src/services/user.ts:42 │ │ │
│ │ └───────────┬─────────────┘ │ │
│ │ │ static call │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ ValidationHelper.sanitize│ │ │
│ │ │ src/utils/validate.ts:18│ │ │
│ │ └───────────┬─────────────┘ │ │
│ │ │ static call │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ 🎯 VULNERABLE CODE │ │ │
│ │ │ lodash.template() │ │ │
│ │ │ CVE-2024-1234 │ │ │
│ │ └─────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ All Paths (3) [Expand All] │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ Path 1: POST /api/users → ... → lodash.template() (4 hops) ✓ │ │
│ │ Path 2: POST /api/admin → ... → lodash.template() (6 hops) ✓ │ │
│ │ Path 3: GET /api/search → ... → lodash.template() (5 hops) ✓ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ [View Full Graph] [Export DSSE Attestation] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Reachability States
| Status | Icon | Description |
|---|---|---|
| REACHABLE | ✓ Green | At least one path found from entrypoint to vulnerable code |
| UNREACHABLE | ✗ Gray | No paths found; vulnerability in inactive code |
| PARTIAL | ⚠ Yellow | Some paths found but confidence < 80% |
| UNKNOWN | ? Blue | Analysis incomplete (missing call-graph data) |
5. Proof Chain Inspector
Purpose
Deep-dive into the cryptographic attestation chain, showing DSSE envelopes and Rekor log entries.
Wireframe
┌─────────────────────────────────────────────────────────────────────────────┐
│ Proof Chain Inspector [Close] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Chain Overview │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ SBOM │───▶│ Scan │───▶│ Proof │───▶│ DSSE │ │ │
│ │ │ Digest │ │Manifest │ │ Bundle │ │Envelope │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ │ │ │ │ │ │
│ │ ▼ ▼ ▼ ▼ │ │
│ │ ✓ Verified ✓ Verified ✓ Verified ✓ Verified │ │
│ │ │ │
│ │ ┌─────────┐ │ │
│ │ │ Rekor │ Log Index: 12847392 │ │
│ │ │ Log │ Timestamp: 2025-12-20T10:30:00Z │ │
│ │ └─────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ✓ Logged │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ DSSE Envelope [Copy] │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ { │ │
│ │ "payloadType": "application/vnd.stellaops.proof+cbor", │ │
│ │ "payload": "base64...", │ │
│ │ "signatures": [ │ │
│ │ { │ │
│ │ "keyid": "sha256:signer123...", │ │
│ │ "sig": "base64..." │ │
│ │ } │ │
│ │ ] │ │
│ │ } │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Signer Information │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Key ID: sha256:signer123... │ │
│ │ Algorithm: ECDSA P-256 │ │
│ │ Issuer: StellaOps Scanner v1.42.0 │ │
│ │ Trust Tier: VENDOR │ │
│ │ Valid From: 2025-01-01T00:00:00Z │ │
│ │ Valid Until: 2026-01-01T00:00:00Z │ │
│ │ │ │
│ │ [View Certificate] [Verify Signature] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Component Summary
| Wireframe | Angular Component | Route |
|---|---|---|
| Proof Ledger View | ProofLedgerComponent |
/scans/:id/proof |
| Score Replay Panel | ScoreReplayModalComponent |
Modal overlay |
| Unknowns Queue | UnknownsQueueComponent |
/unknowns |
| Reachability Explain | ReachabilityExplainComponent |
/findings/:id/reachability |
| Proof Chain Inspector | ProofChainInspectorComponent |
Modal overlay |
Design Tokens
| Token | Value | Usage |
|---|---|---|
--color-verified |
#22c55e |
Verified status badges |
--color-mismatch |
#ef4444 |
Failed verification |
--color-unknown |
#3b82f6 |
Unknown/pending status |
--color-hot |
#dc2626 |
HOT band indicators |
--color-warm |
#f97316 |
WARM band indicators |
--color-cold |
#2563eb |
COLD band indicators |
Accessibility
- All status indicators include text labels (not just colors)
- Call-graph paths are keyboard-navigable
- ARIA labels on interactive elements
- High-contrast mode supported via theme tokens
Approval
UX Guild: ☑ Approved 2025-12-20 Product Management: ☑ Approved 2025-12-20 Accessibility Review: ☐ Pending
References
docs/db/SPECIFICATION.mdSection 5.6-5.8 — Schema definitionsdocs/24_OFFLINE_KIT.mdSection 2.2 — Proof replay workflowSPRINT_3500_0001_0001_deeper_moat_master.md— Feature requirementsdocs/modules/ui/architecture.md— Console architecture