57 lines
4.2 KiB
Markdown
57 lines
4.2 KiB
Markdown
# VEX Gate (Inline Gated Action with Evidence Tiers)
|
|
|
|
## Module
|
|
Web
|
|
|
|
## Status
|
|
IMPLEMENTED
|
|
|
|
## Description
|
|
The advisory proposed a VexGateButtonDirective that morphs primary action buttons into Green/Amber/Red gated actions with evidence sheets. VEX evidence and decision infrastructure exists (vex-evidence client, vex-decision-modal, evidence-ribbon). However, the specific VexGateButtonDirective and VexEvidenceSheetComponent with inline button morphing and tier-based gating were not found. The pattern is partially realized through separate VEX decision modals and evidence display components.
|
|
|
|
## What's Implemented
|
|
- **Existing components**:
|
|
- `ai-code-guard-badge` (`src/Web/StellaOps.Web/src/app/features/triage/components/ai-code-guard-badge/ai-code-guard-badge.component.ts`)
|
|
- `ai-recommendation-panel` (`src/Web/StellaOps.Web/src/app/features/triage/components/ai-recommendation-panel/ai-recommendation-panel.component.ts`)
|
|
- `attestation-viewer` (`src/Web/StellaOps.Web/src/app/features/triage/components/attestation-viewer/attestation-viewer.component.ts`)
|
|
- `bulk-action-modal` (`src/Web/StellaOps.Web/src/app/features/triage/components/bulk-action-modal/bulk-action-modal.component.ts`)
|
|
- `case-header` (`src/Web/StellaOps.Web/src/app/features/triage/components/case-header/case-header.component.ts`)
|
|
- `decision-drawer-enhanced` (`src/Web/StellaOps.Web/src/app/features/triage/components/decision-drawer/decision-drawer-enhanced.component.ts`)
|
|
- `decision-drawer` (`src/Web/StellaOps.Web/src/app/features/triage/components/decision-drawer/decision-drawer.component.ts`)
|
|
- `attestation-chain` (`src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/attestation-chain.component.ts`)
|
|
- `backport-verdict-badge` (`src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/backport-verdict-badge.component.ts`)
|
|
- `binary-diff-tab` (`src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/binary-diff-tab.component.ts`)
|
|
- **Existing services**:
|
|
- `advisory-ai` (`src/Web/StellaOps.Web/src/app/features/triage/services/advisory-ai.service.ts`)
|
|
- `binary-diff-evidence` (`src/Web/StellaOps.Web/src/app/features/triage/services/binary-diff-evidence.service.ts`)
|
|
- `diff-evidence` (`src/Web/StellaOps.Web/src/app/features/triage/services/diff-evidence.service.ts`)
|
|
- `display-preferences` (`src/Web/StellaOps.Web/src/app/features/triage/services/display-preferences.service.ts`)
|
|
- `evidence-tab` (`src/Web/StellaOps.Web/src/app/features/triage/services/evidence-tab.service.ts`)
|
|
|
|
## What's Missing
|
|
- **VexGateButtonDirective**: No Angular directive that morphs primary action buttons (e.g., "Promote", "Release") into Green/Amber/Red gated states based on VEX verdict evidence tiers
|
|
- **VexEvidenceSheetComponent**: No inline evidence sheet that expands from a gated button to show the VEX evidence supporting the gate decision
|
|
- **Tier-based button color mapping**: No mapping from VEX evidence tier (Tier 1: full evidence, Tier 2: partial, Tier 3: no evidence) to button color states
|
|
- **Gate override with justification**: No inline flow for overriding a Red/Amber gate with a required justification text
|
|
|
|
## Implementation Plan
|
|
- Create `VexGateButtonDirective` that wraps action buttons with VEX gate logic and color state
|
|
- Create `VexEvidenceSheetComponent` for inline evidence display on gate button expansion
|
|
- Define evidence tier-to-color mapping (Green = all evidence, Amber = partial, Red = missing/contradictory)
|
|
- Add gate override flow requiring justification text for Red/Amber overrides
|
|
- Wire to existing `VexGateService` backend for gate evaluation data
|
|
|
|
## E2E Test Plan
|
|
- **Setup**:
|
|
- [ ] Log in with a user that has appropriate permissions
|
|
- [ ] Navigate to `/triage/artifacts`
|
|
- [ ] Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
|
|
- **Core verification**:
|
|
- [ ] Verify the component renders correctly with sample data
|
|
- [ ] Verify interactive elements respond to user input
|
|
- [ ] Verify data is fetched and displayed from the correct API endpoints
|
|
- **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)
|