2.4 KiB
2.4 KiB
AI Summary 3-Line Component
Module
Web
Status
IMPLEMENTED
Description
Compact 3-line AI summary component providing at-a-glance severity assessment, key finding highlights, and recommended action for each vulnerability finding. Designed for progressive disclosure in list views.
Implementation Details
- Feature directory:
src/Web/StellaOps.Web/src/app/shared/components/ai/ - Components:
ai-assist-panel(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-assist-panel.component.ts)ai-authority-badge(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-authority-badge.component.ts)ai-chip(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-chip.component.ts)ai-explain-chip(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-explain-chip.component.ts)ai-exploitability-chip(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-exploitability-chip.component.ts)ai-fix-chip(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-fix-chip.component.ts)ai-needs-evidence-chip(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-needs-evidence-chip.component.ts)ai-summary(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-summary.component.ts)ai-vex-draft-chip(src/Web/StellaOps.Web/src/app/shared/components/ai/ai-vex-draft-chip.component.ts)ask-stella-button(src/Web/StellaOps.Web/src/app/shared/components/ai/ask-stella-button.component.ts)ask-stella-panel(src/Web/StellaOps.Web/src/app/shared/components/ai/ask-stella-panel.component.ts)llm-unavailable(src/Web/StellaOps.Web/src/app/shared/components/ai/llm-unavailable.component.ts)
- Source: SPRINT_20251226_020_FE_ai_ux_patterns.md
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)