UI Components

This directory contains documentation for the StellaOps Angular UI components.

Evidence-Weighted Score (EWS) Components

The EWS component suite provides visual representations of vulnerability scores based on evidence-weighted analysis.

Core Components

Component	Purpose	Location
ScorePill	Compact score display with bucket coloring	`shared/components/score/`
ScoreBreakdownPopover	Detailed score breakdown with dimensions	`shared/components/score/`
ScoreBadge	Evidence flag badges (live-signal, proven-path, etc.)	`shared/components/score/`
ScoreHistoryChart	Timeline visualization of score changes	`shared/components/score/`

Feature Components

Component	Purpose	Location
FindingsList	Findings table with EWS integration	`features/findings/`
BulkTriageView	Bulk triage interface with bucket summaries	`features/findings/`

Score Buckets

All EWS components use a consistent bucket system:

Bucket	Score Range	Color	Priority
Act Now	90-100	Red (`#DC2626`)	Critical - Immediate action required
Schedule Next	70-89	Amber (`#D97706`)	High - Schedule for next sprint
Investigate	40-69	Blue (`#2563EB`)	Medium - Investigate when possible
Watchlist	0-39	Gray (`#6B7280`)	Low - Monitor for changes

Evidence Flags

Findings can have special flags indicating evidence quality:

Flag	Icon	Color	Description
`live-signal`	Signal wave	Green	Active runtime signals detected
`proven-path`	Checkmark	Blue	Verified reachability path confirmed
`vendor-na`	Strikethrough	Gray	Vendor marked as not affected
`speculative`	Question mark	Orange	Evidence is speculative/unconfirmed
`anchored`	[A]	Violet	Score anchored with DSSE/Rekor attestation
`hard-fail`	[!]	Red	Policy hard-fail triggered

Witness Visualization Components

Sprint: SPRINT_20260118_020_FE_witness_visualization

The witness visualization component suite provides UI for runtime witness display, static vs runtime path comparison, and witness gate results in release promotion flows.

Components

Component	Purpose	Location
WitnessStatusChip	Status badge showing witness state (witnessed/unwitnessed/stale/failed)	`shared/domain/witness-status-chip/`
WitnessComparison	Side-by-side static vs runtime path comparison	`shared/components/witness-comparison/`
UnwitnessedAdvisory	Advisory panel for paths without witnesses	`shared/components/unwitnessed-advisory/`
GateSummaryPanel	Extended gate summary with witness metrics	`shared/domain/gate-summary-panel/`

Witness States

State	Badge Color	Description
`witnessed`	Green	Path confirmed by runtime observation
`unwitnessed`	Yellow	Path not yet observed at runtime
`stale`	Orange	Witness data is outdated
`failed`	Red	Witness verification failed

Usage

import {
  WitnessStatusChipComponent,
  WitnessComparisonComponent,
  UnwitnessedAdvisoryComponent,
  GateSummaryPanelComponent,
} from '@app/shared/domain';

<!-- Witness Status Chip -->
<app-witness-status-chip [status]="'witnessed'" [showCount]="true" />

<!-- Witness Comparison -->
<app-witness-comparison [data]="comparisonData" (stepClick)="onStepClick($event)" />

<!-- Unwitnessed Advisory -->
<app-unwitnessed-advisory [data]="advisoryData" (createTestTask)="onCreateTask($event)" />

See witness-visualization.md for full documentation.

Grey Queue Components (withdrawn)

Withdrawn 2026-10-08 (SPRINT_20261007_011 CCP-023). Originally added by SPRINT_20260112_011_FE_policy_unknowns_queue_integration.

GreyQueuePanelComponent, GreyQueueDashboardComponent and DeterminizationReviewComponent read /api/v1/policy/unknowns, which no host maps, and offered triage, escalate and resolve actions without an owner. They are frozen under src/__Obsoleted/Web/StellaOps.Web/CCP-023/ and are not part of the build; do not import or reintroduce them. The Console Unknowns pages (/security/unknowns, /security/unknowns/:unknownId) read the read-only Scanner unknowns registry instead; see docs/UI_GUIDE.md#unknowns.

The shared determinization components under shared/components/determinization/ (observation-state chip, uncertainty indicator, guardrails badge, decay progress) are unaffected.

Quick Start

Import Components

// Score components
import {
  ScorePillComponent,
  ScoreBreakdownPopoverComponent,
  ScoreBadgeComponent,
  ScoreHistoryChartComponent,
} from '@app/shared/components/score';

// Findings components
import {
  FindingsListComponent,
  BulkTriageViewComponent,
} from '@app/features/findings';

Basic Usage

<!-- Display a score pill -->
<stella-score-pill [score]="78" size="md" />

<!-- Display score badges -->
<stella-score-badge type="live-signal" />
<stella-score-badge type="proven-path" />

<!-- Full findings list with scoring -->
<app-findings-list
  [findings]="findings"
  (findingSelect)="onFindingSelect($event)"
/>

Storybook

Interactive examples and documentation are available in Storybook:

cd src/Web/StellaOps.Web
npm run storybook

Navigate to:

Score/ScorePill - Score pill variants
Score/ScoreBreakdownPopover - Breakdown popover examples
Score/ScoreBadge - Evidence flag badges
Score/ScoreHistoryChart - History chart variants
Findings/FindingsList - Findings list with scoring
Findings/BulkTriageView - Bulk triage interface

Design Tokens

Score colors are defined as CSS custom properties. See design-tokens.md for the full token reference.

Accessibility

All components follow WCAG 2.1 AA guidelines:

Proper ARIA labels and roles
Keyboard navigation support
Focus management
Color contrast ratios meet AA standards
Screen reader announcements for dynamic content