Files
git.stella-ops.org/docs/features/unchecked/web/vex-gate.md

4.2 KiB

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)