# 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](./score-pill.md) | Compact score display with bucket coloring | `shared/components/score/` |
| [ScoreBreakdownPopover](./score-breakdown-popover.md) | Detailed score breakdown with dimensions | `shared/components/score/` |
| [ScoreBadge](./score-badge.md) | Evidence flag badges (live-signal, proven-path, etc.) | `shared/components/score/` |
| [ScoreHistoryChart](./score-history-chart.md) | Timeline visualization of score changes | `shared/components/score/` |

### Feature Components

| Component | Purpose | Location |
|-----------|---------|----------|
| [FindingsList](./findings-list.md) | Findings table with EWS integration | `features/findings/` |
| [BulkTriageView](./bulk-triage-view.md) | 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 |

## Quick Start

### Import Components

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

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

### Basic Usage

```html
<!-- 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"
  [autoLoadScores]="true"
  (findingSelect)="onFindingSelect($event)"
/>
```

## Storybook

Interactive examples and documentation are available in Storybook:

```bash
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](./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