<!-- source-hash: 99dd713ce86aad3a5fa950334530599b -->
A React component that displays AI operation status with visual indicators, confidence levels, and custom messaging for different AI processing states.

## Key Components

- **AIStatusIndicator**: Main component that renders status badges with sparkle icons
- **AIStatus**: Type union defining four states: `'idle' | 'loading' | 'success' | 'error'`
- **AIStatusIndicatorProps**: Interface for component props including status, confidence, message, and styling options
- **statusConfig**: Configuration object mapping each status to colors, backgrounds, and default labels

## Usage Example

```typescript
import { AIStatusIndicator, AIStatus } from './AIStatusIndicator'

function AIProcessingPanel() {
  const [status, setStatus] = useState<AIStatus>('idle')
  const [confidence, setConfidence] = useState<number>()

  return (
    <div className="space-y-4">
      {/* Basic status indicator */}
      <AIStatusIndicator status="loading" />
      
      {/* With confidence score */}
      <AIStatusIndicator 
        status="success" 
        confidence={87}
        message="Data enrichment complete"
      />
      
      {/* Custom styling */}
      <AIStatusIndicator 
        status="error"
        message="Processing failed"
        showConfidence={false}
        className="border border-red-200"
      />
    </div>
  )
}
```

The component automatically handles visual states including loading animations, confidence-based color coding, and responsive badge styling. It integrates with the ODS design system and includes accessibility considerations through semantic markup.