37 lines
2.3 KiB
Markdown
37 lines
2.3 KiB
Markdown
# AI Chip Components (Progressive Disclosure UX)
|
|
|
|
## Module
|
|
Web
|
|
|
|
## Status
|
|
IMPLEMENTED
|
|
|
|
## Description
|
|
UX pattern for AI results surfacing with compact chips, 3-line doctrine, progressive disclosure. All core AI chip components are implemented covering explain, exploitability, fix, needs-evidence, VEX draft, authority badge, assist panel, and summary.
|
|
|
|
## Implementation Details
|
|
- **AI chip components** (10 components):
|
|
- `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-vex-draft-chip` (`src/Web/StellaOps.Web/src/app/shared/components/ai/ai-vex-draft-chip.component.ts`)
|
|
- `ai-authority-badge` (`src/Web/StellaOps.Web/src/app/shared/components/ai/ai-authority-badge.component.ts`)
|
|
- `ai-assist-panel` (`src/Web/StellaOps.Web/src/app/shared/components/ai/ai-assist-panel.component.ts`)
|
|
- `ai-summary` (`src/Web/StellaOps.Web/src/app/shared/components/ai/ai-summary.component.ts`)
|
|
- `ask-stella-button` (`src/Web/StellaOps.Web/src/app/shared/components/ai/ask-stella-button.component.ts`)
|
|
- **List view integration**: `ai-chip-row.component.ts` (`src/Web/StellaOps.Web/src/app/features/findings/ai-chip-row.component.ts`)
|
|
- **Code guard badge**: `ai-code-guard-badge.component.ts` (`src/Web/StellaOps.Web/src/app/features/triage/components/ai-code-guard-badge/`)
|
|
- **E2E tests**: `ai-chip-visual.e2e.spec.ts` (`src/Web/StellaOps.Web/src/app/shared/components/ai/__tests__/`)
|
|
|
|
## E2E Test Plan
|
|
- [ ] Verify all AI chip variants render with correct status color and label
|
|
- [ ] Verify chips update reactively when underlying data changes
|
|
- [ ] Verify tooltip or popover shows additional detail on hover
|
|
- [ ] Verify progressive disclosure: compact chip expands to full explanation panel
|
|
- [ ] Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)
|
|
|
|
## Related Documentation
|
|
- Source: See feature catalog
|