# MI5 - Performance Budgets (Interaction Response, Animation Frame, LCP)

## Module
Web

## Status
PARTIALLY_IMPLEMENTED

## Description
Lighthouse CI config exists for performance monitoring. Specific interaction response <=100ms, frame budget 16ms, and layout shift <0.05 budgets were not found as explicitly configured thresholds in test fixtures.

## What's Implemented
- **Existing components**:
  - `extension-slot` (`src/Web/StellaOps.Web/src/app/core/plugins/extension-slots/extension-slot.component.ts`)
- **Existing services**:
  - `evidence-panel-metrics` (`src/Web/StellaOps.Web/src/app/core/analytics/evidence-panel-metrics.service.ts`)
  - `gateway-metrics` (`src/Web/StellaOps.Web/src/app/core/api/gateway-metrics.service.ts`)
  - `policy-interop` (`src/Web/StellaOps.Web/src/app/core/api/policy-interop.service.ts`)
  - `reachability-integration` (`src/Web/StellaOps.Web/src/app/core/api/reachability-integration.service.ts`)
  - `vuln-export-orchestrator` (`src/Web/StellaOps.Web/src/app/core/api/vuln-export-orchestrator.service.ts`)

## What's Missing
- **Interaction response budget**: No explicitly configured <=100ms interaction response threshold in test fixtures or CI checks
- **Animation frame budget**: No configured 16ms frame budget validation for animations
- **Layout shift budget**: No configured <0.05 CLS (Cumulative Layout Shift) threshold enforcement
- **LCP budget**: No Largest Contentful Paint budget configured in Lighthouse CI or performance tests
- **Performance regression CI gate**: Lighthouse CI config exists but no CI gate failing builds on budget violations

## Implementation Plan
- Configure Lighthouse CI budgets: interaction <=100ms, frame 16ms, CLS <0.05, LCP <2.5s
- Add performance regression CI gate failing on budget violations
- Add `evidence-panel-metrics.service.ts` integration with performance budgets for key user flows
- Document performance budgets in frontend architecture docs

## E2E Test Plan
- **Setup**:
  - [ ] Log in with a user that has appropriate permissions
  - [ ] Navigate to the relevant page/section where this feature appears
  - [ ] 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)