# Triage Component Catalog

**Version:** 1.0
**Status:** Active
**Last Updated:** 2025-12-26
**Sprint:** SPRINT_20251226_014_DOCS_triage_consolidation

## Overview

This document catalogs all Angular components used in the unified triage experience, including the Smart-Diff Compare View, Triage Canvas, and Risk Dashboard. Each component is documented with its responsibilities, inputs/outputs, and relationships.

## Component Hierarchy

```
src/Web/StellaOps.Web/src/app/
├── features/
│   ├── triage/
│   │   ├── triage-canvas/
│   │   │   ├── triage-canvas.component.ts          [Container]
│   │   │   ├── triage-list.component.ts
│   │   │   ├── triage-detail.component.ts
│   │   │   ├── ai-recommendation-panel.component.ts
│   │   │   ├── vex-decision-modal.component.ts
│   │   │   └── vex-history.component.ts
│   │   └── compare/
│   │       ├── compare-view.component.ts           [Container]
│   │       ├── baseline-selector.component.ts
│   │       ├── trust-indicators.component.ts
│   │       ├── delta-summary-strip.component.ts
│   │       ├── three-pane-layout.component.ts
│   │       ├── categories-pane.component.ts
│   │       ├── items-pane.component.ts
│   │       ├── proof-pane.component.ts
│   │       └── export-actions.component.ts
│   ├── risk-budget/
│   │   ├── risk-dashboard.component.ts             [Container]
│   │   ├── burn-up-chart.component.ts
│   │   ├── unknowns-heatmap.component.ts
│   │   ├── delta-table.component.ts
│   │   ├── exception-ledger.component.ts
│   │   └── kpi-tiles.component.ts
│   └── vulnerabilities/
│       └── vulnerability-detail.component.ts
└── shared/
    └── components/
        ├── confidence-badge.component.ts
        ├── determinism-badge.component.ts
        ├── severity-indicator.component.ts
        └── evidence-chain.component.ts
```

## Container Components

### TriageCanvasComponent

**Location:** `features/triage/triage-canvas/triage-canvas.component.ts`
**Sprint:** SPRINT_20251226_013_FE
**Status:** TODO

**Purpose:** Main container for the unified triage experience. Orchestrates list, detail, and decision panels.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| initialVulnId | string? | Pre-select vulnerability by ID |
| environment | string? | Filter by environment |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| triageComplete | EventEmitter<VexDecision> | Emitted when triage decision saved |
| queueExhausted | EventEmitter<void> | Emitted when all items triaged |

**Child Components:**
- TriageListComponent
- TriageDetailComponent
- AiRecommendationPanel
- VexDecisionModalComponent
- VexHistoryComponent

---

### CompareViewComponent

**Location:** `features/triage/compare/compare-view.component.ts`
**Sprint:** SPRINT_20251226_012_FE
**Status:** TODO

**Purpose:** Three-pane Smart-Diff comparison view with baseline selection and proof display.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| currentDigest | string | Digest of current scan |
| baselineDigest | string? | Digest of baseline (auto-selected if not provided) |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| baselineChanged | EventEmitter<string> | New baseline selected |
| exportRequested | EventEmitter<ExportFormat> | Export action triggered |

**Child Components:**
- BaselineSelectorComponent
- TrustIndicatorsComponent
- DeltaSummaryStripComponent
- ThreePaneLayoutComponent
- ExportActionsComponent

---

### RiskDashboardComponent

**Location:** `features/risk-budget/risk-dashboard.component.ts`
**Sprint:** SPRINT_20251226_004_FE
**Status:** TODO

**Purpose:** Risk budget visualization with burn-up charts, heatmaps, and exception ledger.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| serviceId | string | Service to display budget for |
| window | BudgetWindow | Budget window (monthly, weekly) |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| exceptionCreated | EventEmitter<Exception> | New exception added |
| thresholdAlert | EventEmitter<ThresholdAlert> | Budget threshold crossed |

**Child Components:**
- BurnUpChartComponent
- UnknownsHeatmapComponent
- DeltaTableComponent
- ExceptionLedgerComponent
- KpiTilesComponent

---

## Presentation Components

### TriageListComponent

**Location:** `features/triage/triage-canvas/triage-list.component.ts`
**Sprint:** SPRINT_20251226_013_FE
**Status:** TODO

**Purpose:** Paginated, filterable list of vulnerabilities for triage.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| vulnerabilities | Vulnerability[] | List of vulnerabilities |
| selectedId | string? | Currently selected vulnerability |
| filters | TriageFilters | Active filters |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| selectionChange | EventEmitter<Vulnerability> | Vulnerability selected |
| bulkAction | EventEmitter<BulkActionRequest> | Bulk triage requested |

**Features:**
- Virtual scrolling (cdk-virtual-scroll) for large lists
- Filter chips: severity, KEV, exploitability, fix-available
- Quick actions: "Mark Not Affected", "Request Analysis"

---

### VexDecisionModalComponent

**Location:** `features/triage/triage-canvas/vex-decision-modal.component.ts`
**Sprint:** SPRINT_20251226_013_FE
**Status:** TODO

**Purpose:** Modal for creating/editing VEX decisions with full form controls.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| vulnerability | Vulnerability | Target vulnerability |
| existingDecision | VexDecision? | Decision to edit |
| suggestedJustification | string? | AI-suggested justification |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| save | EventEmitter<VexDecision> | Decision saved |
| cancel | EventEmitter<void> | Modal cancelled |

**Form Fields:**
- Status: NotAffected, AffectedMitigated, AffectedUnmitigated, Fixed
- Justification type (matches VexJustificationType enum)
- Evidence references (PR, Ticket, Doc, Commit links)
- Scope: environments and projects
- Validity window: NotBefore/NotAfter dates
- "Sign as Attestation" checkbox

---

### ThreePaneLayoutComponent

**Location:** `features/triage/compare/three-pane-layout.component.ts`
**Sprint:** SPRINT_20251226_012_FE
**Status:** TODO

**Purpose:** Responsive three-column layout for Categories, Items, and Proof panes.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| delta | Delta | Computed delta with items |
| selectedCategory | Category? | Currently selected category |
| selectedItem | DeltaItem? | Currently selected item |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| categorySelected | EventEmitter<Category> | Category clicked |
| itemSelected | EventEmitter<DeltaItem> | Item clicked |

**Layout Behavior:**
- Desktop: 3 columns (20% / 40% / 40%)
- Tablet: 2 columns (collapsed categories)
- Mobile: Single pane with navigation

---

### BurnUpChartComponent

**Location:** `features/risk-budget/burn-up-chart.component.ts`
**Sprint:** SPRINT_20251226_004_FE
**Status:** TODO

**Purpose:** Risk budget burn-up chart showing budget line vs actual risk over time.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| budgetData | BudgetTimeSeries | Historical budget data |
| releaseDate | Date | Target release date |
| showMarkers | boolean | Show milestone markers |

**Outputs:**
| Name | Type | Description |
|------|------|-------------|
| pointClicked | EventEmitter<DataPoint> | Chart point clicked |

**Chart Features:**
- X-axis: Calendar dates
- Y-axis: Risk points
- Lines: Budget (flat), Actual (cumulative)
- Shaded regions: Headroom (green), Overrun (red)
- Markers: Feature freeze, pen-test, dependency bumps

---

## Shared Components

### ConfidenceBadgeComponent

**Location:** `shared/components/confidence-badge.component.ts`
**Status:** COMPLETE

**Purpose:** Displays confidence level with color-coded visual indicator.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| confidence | number | 0-1 confidence value |
| showValue | boolean | Display numeric value |

---

### DeterminismBadgeComponent

**Location:** `shared/components/determinism-badge.component.ts`
**Status:** COMPLETE

**Purpose:** Shows determinism status with hash verification.

**Inputs:**
| Name | Type | Description |
|------|------|-------------|
| hash | string | Determinism hash |
| verified | boolean | Hash verification status |
| copyable | boolean | Show copy button |

---

## Service Layer

### TriageService

**Location:** `core/services/triage.service.ts`
**Sprint:** SPRINT_20251226_013_FE

**Methods:**
```typescript
getVulnerabilities(filters: TriageFilters): Observable<Page<Vulnerability>>
getVulnerability(id: string): Observable<Vulnerability>
getReachability(id: string): Observable<CallGraphSlice>
```

### VexDecisionService

**Location:** `core/services/vex-decision.service.ts`
**Sprint:** SPRINT_20251226_013_FE

**Methods:**
```typescript
create(decision: CreateVexDecision): Observable<VexDecision>
update(id: string, decision: UpdateVexDecision): Observable<VexDecision>
getHistory(vulnId: string): Observable<VexDecision[]>
```

### CompareService

**Location:** `core/services/compare.service.ts`
**Sprint:** SPRINT_20251226_012_FE

**Methods:**
```typescript
getBaselineRecommendations(digest: string): Observable<BaselineRecommendation[]>
computeDelta(current: string, baseline: string): Observable<Delta>
getTrustIndicators(deltaId: string): Observable<TrustIndicators>
```

### RiskBudgetService

**Location:** `core/services/risk-budget.service.ts`
**Sprint:** SPRINT_20251226_004_FE

**Methods:**
```typescript
getBudgetStatus(serviceId: string): Observable<BudgetStatus>
getBurnUpData(serviceId: string, window: BudgetWindow): Observable<BudgetTimeSeries>
createException(exception: CreateException): Observable<Exception>
```

---

## Interaction Diagrams

### Triage Flow

```
User Action                    Component                      Service
    │                             │                              │
    │ Select vulnerability        │                              │
    ├────────────────────────────►│ TriageListComponent          │
    │                             ├─────────────────────────────►│
    │                             │                              │ getVulnerability()
    │                             │◄─────────────────────────────┤
    │                             │                              │
    │                             │ TriageDetailComponent        │
    │                             ├─────────────────────────────►│
    │                             │                              │ getReachability()
    │                             │◄─────────────────────────────┤
    │                             │                              │
    │ Click "Mark Not Affected"   │                              │
    ├────────────────────────────►│ VexDecisionModalComponent    │
    │                             │                              │
    │ Submit form                 │                              │
    ├────────────────────────────►│                              │
    │                             ├─────────────────────────────►│
    │                             │                              │ VexDecisionService.create()
    │                             │◄─────────────────────────────┤
    │                             │                              │
    │                             │ Update list, advance queue   │
    │◄────────────────────────────┤                              │
```

### Compare Flow

```
User Action                    Component                      Service
    │                             │                              │
    │ Navigate to /compare/:id    │                              │
    ├────────────────────────────►│ CompareViewComponent         │
    │                             ├─────────────────────────────►│
    │                             │                              │ getBaselineRecommendations()
    │                             │◄─────────────────────────────┤
    │                             │                              │
    │                             │ Auto-select baseline         │
    │                             ├─────────────────────────────►│
    │                             │                              │ computeDelta()
    │                             │◄─────────────────────────────┤
    │                             │                              │
    │                             │ ThreePaneLayoutComponent     │
    │                             │  ├ CategoriesPaneComponent   │
    │                             │  ├ ItemsPaneComponent        │
    │                             │  └ ProofPaneComponent        │
    │                             │                              │
    │ Select category             │                              │
    ├────────────────────────────►│                              │
    │                             │ Filter items by category     │
    │                             │                              │
    │ Select item                 │                              │
    ├────────────────────────────►│                              │
    │                             │ Display proof in right pane  │
    │◄────────────────────────────┤                              │
```

---

## Accessibility Requirements

All triage components must meet WCAG 2.1 AA compliance:

| Requirement | Implementation |
|-------------|----------------|
| Keyboard navigation | Tab/Arrow/Enter/Escape, documented shortcuts |
| Focus management | Visible focus indicators, logical tab order |
| Screen reader | ARIA labels, live regions for updates |
| Color contrast | 4.5:1 minimum for text, 3:1 for UI elements |
| Error messages | Associated with inputs, announced immediately |

---

## Testing Requirements

### Unit Tests
- Component behavior (selection, filtering, expansion)
- Signal/computed derivations
- Form validation

### Integration Tests
- Service API calls
- Route navigation
- State persistence

### E2E Tests (Playwright)
- Full triage workflow
- Comparison workflow
- Keyboard navigation

---

## References

- [Unified Triage Specification](./unified-triage-specification.md)
- [Smart-Diff UI Architecture](./smart-diff-ui-architecture.md)
- [Angular Component Guidelines](https://angular.dev/guide/components)