git.stella-ops.org/docs/features/checked/web/delta-verdict-compare-view-ui.md

Delta Verdict / Compare View UI

Module

Web

Status

VERIFIED

Description

Full compare/delta view UI with dedicated feature area including components, services, and implementation summary. Deploy-diff feature for release-level comparison. Verdicts feature for verdict display and management.

Implementation Details

• Feature directory: src/Web/StellaOps.Web/src/app/features/compare/
• Components:
  • actionables-panel (src/Web/StellaOps.Web/src/app/features/compare/components/actionables-panel/actionables-panel.component.ts)
  • baseline-rationale (src/Web/StellaOps.Web/src/app/features/compare/components/baseline-rationale/baseline-rationale.component.ts)
  • baseline-selector (src/Web/StellaOps.Web/src/app/features/compare/components/baseline-selector.component.ts)
  • categories-pane (src/Web/StellaOps.Web/src/app/features/compare/components/categories-pane.component.ts)
  • compare-view (src/Web/StellaOps.Web/src/app/features/compare/components/compare-view.component.ts)
  • compare-view (src/Web/StellaOps.Web/src/app/features/compare/components/compare-view/compare-view.component.ts)
  • degraded-mode-banner (src/Web/StellaOps.Web/src/app/features/compare/components/degraded-mode-banner/degraded-mode-banner.component.ts)
  • delta-summary-strip (src/Web/StellaOps.Web/src/app/features/compare/components/delta-summary-strip.component.ts)
  • envelope-hashes (src/Web/StellaOps.Web/src/app/features/compare/components/envelope-hashes/envelope-hashes.component.ts)
  • export-actions (src/Web/StellaOps.Web/src/app/features/compare/components/export-actions/export-actions.component.ts)
  • graph-mini-map (src/Web/StellaOps.Web/src/app/features/compare/components/graph-mini-map/graph-mini-map.component.ts)
  • items-pane (src/Web/StellaOps.Web/src/app/features/compare/components/items-pane.component.ts)
  • proof-pane (src/Web/StellaOps.Web/src/app/features/compare/components/proof-pane.component.ts)
  • three-pane-layout (src/Web/StellaOps.Web/src/app/features/compare/components/three-pane-layout.component.ts)
  • trust-indicators (src/Web/StellaOps.Web/src/app/features/compare/components/trust-indicators.component.ts)
  • ... and 3 more components
• Services:
  • compare-export (src/Web/StellaOps.Web/src/app/features/compare/services/compare-export.service.ts)
  • compare (src/Web/StellaOps.Web/src/app/features/compare/services/compare.service.ts)
  • delta-compute (src/Web/StellaOps.Web/src/app/features/compare/services/delta-compute.service.ts)
  • user-preferences (src/Web/StellaOps.Web/src/app/features/compare/services/user-preferences.service.ts)
• Source: Feature matrix scan

E2E Test Plan

• Setup:
  • Log in with a user that has appropriate permissions
  • Navigate to /compare/:currentId
  • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
• Core verification:
  • Verify side-by-side comparison view renders correctly with two versions
  • Verify additions, removals, and changes are visually highlighted
  • Verify diff data matches the expected delta between versions
• Edge cases:
  • Verify graceful handling when backend API is unavailable (error state)
  • Verify responsive layout at different viewport sizes
  • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)

Verification

• Run: docs/qa/feature-checks/runs/web/delta-verdict-compare-view-ui/run-001/
• Tier 0 (source): pass (tier0-source-check.json)
• Tier 1 (build/tests): pass (tier1-build-check.json)
• Tier 2 (behavior): pass (tier2-e2e-check.json)
• Verified on (UTC): 2026-02-10