PreviewKarlContainerUI_WithSuggestion

Preview function for KarlContainerUI displaying an active AI suggestion.

This preview demonstrates the container UI component when the KARL AI system has generated a high-confidence prediction, showcasing the full functionality of the suggestion display and interaction capabilities.

State Configuration:

• Prediction State: Active suggestion with high confidence

• Suggestion: "git commit" (simulated development workflow command)

• Confidence: 0.9f (90% - high confidence prediction)

• Type: "next_command" (categorized as workflow automation)

• Learning Progress: 0.75f (75% - advanced learning stage)

Technical Implementation:

• Creates mock MutableStateFlow<Prediction> with realistic prediction data

• Simulates advanced learning progress through MutableStateFlow(0.75f)

• Demonstrates prediction rendering and confidence visualization

• Tests component behavior with complete data structures

Visual Characteristics:

• Active prediction display with suggestion text

• High confidence indicator (90% confidence visualization)

• Advanced progress indicator (75% completion)

• Interactive elements for prediction acceptance/rejection

Data Structure:

Prediction(
    suggestion = "git commit",    // User-facing suggestion text
    confidence = 0.9f,           // AI confidence score (0.0-1.0)
    type = "next_command"        // Prediction categorization
)

Use Cases:

• Active suggestion state validation

• High-confidence prediction visualization

• Interaction design verification

• Performance testing with realistic data

• User acceptance flow validation

See also