stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity
Files
4bdc298ec1fc821ee0d9dda6d2d4643dcedf6b35
git.stella-ops.org/docs/features/unchecked/web/ai-chip-components.md

2.3 KiB
Raw Blame History

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