Eidetic

AI Status Indicator

AI
Trust

Unified component for displaying confidence levels, AI capability boundaries, and sentiment analysis. Consolidates multiple status patterns into a single flexible component with badge, inline, card, detailed, and progress variants.

Confidence — Badge

Compact confidence indicator with tooltip

87%
65%
42%

Confidence — Progress

Progress bar visualization

Source reliability87%
Data completeness65%
Fact verification42%

Confidence — Card

Card with reasoning and sources

Based on multiple corroborating sources and recent data from verified publications.

AI-generated assessment

Confidence — Low Confidence Card

Warning state with low confidence

Limited sources available. Information may be outdated or incomplete.

Based on 1 source

Forum discussion (unverified)
AI-generated assessment

Capability — Badge

Compact capability status badge

2 limitations
Full capabilities

Capability — Card

Detailed capability list with statuses

Text Generation
Available
Code Execution
Limited

Sandboxed environment only

Web Browsing
Restricted

Disabled for this conversation

Image Generation
Unavailable
File Analysis
Available
Capabilities may vary based on context

Capability — Limitations Only

Filtered view showing only limitations

Code Execution
Limited

Sandboxed environment only

Web Browsing
Restricted

Disabled for this conversation

Image Generation
Unavailable
Capabilities may vary based on context

Sentiment — Badge

Compact sentiment indicator

Positive89%
Mixed62%
Negative78%

Sentiment — Card

Detailed sentiment breakdown with emotions

Positive 65%Neutral 25%Negative 10%

Detected emotions

Joy72%
Trust65%
Anticipation45%
Surprise20%
AI-powered sentiment analysis

Sentiment — Mixed

Mixed sentiment analysis

Positive 35%Neutral 35%Negative 30%

Detected emotions

Confusion55%
Curiosity50%
Frustration30%
AI-powered sentiment analysis

Props

AIStatusIndicator component API reference

PropTypeDefaultDescription
type*'confidence' | 'capability' | 'sentiment'Type of status indicator — determines data model and visual treatment
variant'badge' | 'inline' | 'card' | 'detailed' | 'progress''badge'Display variant
titlestringOverride the default title label
confidenceConfidenceDataConfidence data object (for type="confidence")
capabilitiesCapability[]Array of capability items (for type="capability")
sentimentSentimentDataSentiment analysis data (for type="sentiment")
showTrendbooleanfalseShow trend direction indicator
collapsiblebooleanfalseAllow card/detailed variants to collapse
defaultCollapsedbooleanfalseStart in collapsed state
showOnlyLimitationsbooleanfalseFilter capability list to show only non-available items
onLearnMore() => voidCallback for the learn more action in card footer

Type Interfaces

Data models for each status type

// Confidence data
interface ConfidenceData {
value: number // 0-100 confidence score
sources?: { title: string; url?: string }[]
reasoning?: string // Explanation of confidence level
trend?: number[] // Historical values for trend
}
// Capability data
type CapabilityStatus = 'available' | 'limited' | 'unavailable' | 'restricted'
interface Capability {
id: string
name: string
status: CapabilityStatus
limitation?: string // Explanation when limited/restricted
alternative?: string // Suggested alternative
}
// Sentiment data
type SentimentValue = 'positive' | 'negative' | 'neutral' | 'mixed'
interface SentimentData {
overall: SentimentValue
confidence: number
scores?: { positive: number; negative: number; neutral: number }
emotions?: { name: string; intensity: number }[]
}

Usage

Import and basic examples

import { AIStatusIndicator } from '@/blocks/ai-transparency/ai-status-indicator'
// Confidence badge
<AIStatusIndicator
type="confidence"
confidence={{ value: 87, reasoning: 'Based on verified sources' }}
/>
// Capability card
<AIStatusIndicator
type="capability"
variant="card"
capabilities={[
{ id: '1', name: 'Text Generation', status: 'available' },
{ id: '2', name: 'Web Browsing', status: 'restricted', limitation: 'Disabled' },
]}
collapsible
/>
// Sentiment analysis
<AIStatusIndicator
type="sentiment"
variant="card"
sentiment={{
overall: 'positive',
confidence: 89,
scores: { positive: 65, negative: 10, neutral: 25 },
emotions: [{ name: 'Joy', intensity: 72 }],
}}
/>

Built With

3 components

This block uses the following UI components from the design system:

Consolidation Note

Which blocks this replaces

Unified Component

This component consolidates the functionality of three previously separate blocks:

  • Confidence Indicator — now type="confidence"
  • AI Capability Boundary — now type="capability"
  • AI Sentiment Indicator — now type="sentiment"

Features

Built-in functionality

  • Three status types: Confidence, capability, and sentiment analysis in one component
  • Five display variants: Badge, inline, card, detailed, and progress bar modes
  • Color-coded levels: Automatic color mapping based on confidence/status values
  • Collapsible cards: Cards can be collapsed to save space
  • Trend indicators: Show directional trends for confidence scores
  • Source attribution: Link to sources that inform confidence scores
  • Emotion detection: Sentiment type supports granular emotion display
  • Capability filtering: Show all capabilities or only limitations
  • Tooltip integration: Badge variants show details on hover
  • Dark mode support: Full dark mode styling throughout

Accessibility

Accessibility considerations

ARIA Attributes

Status values conveyed through text labels, not just colorTooltips accessible via keyboard focusCollapsible state communicated to screen readers

Keyboard Navigation

KeyAction
TabNavigate between interactive elements
Enter / SpaceToggle collapse and activate links

Notes

  • Color-coded levels always paired with text labels for colorblind users
  • Badge tooltips use TooltipProvider for consistent behavior
  • Progress bars include numeric values for screen readers