Overview
AgentActivityStream displays AI agent activities in a timeline format with confidence levels, status indicators, and filtering capabilities. Perfect for monitoring AI operations and building transparency into AI decision-making.
Features
- Timeline display with agent icons
- Confidence level indicators
- Status badges (pending, completed, failed)
- Group by agent type option
- Filter by agent type and status
- Expandable list with show more/less
Examples
Basic Stream
Default timeline view
Categorized insight as Bug Report
INS-2847: Login fails on mobile
High confidence match with existing bug patterns
Suggested priority escalation
INS-2845: Payment processing timeout
Similar issues have high user impact based on historical data
Analyzing sentiment patterns
Survey responses from Q4 2024
Failed to send notification
Reminder email for Survey #42
Email service returned 503 error
With Confidence Indicators
Showing AI confidence levels
Categorized insight as Bug Report
INS-2847: Login fails on mobile
High confidence match with existing bug patterns
Suggested priority escalation
INS-2845: Payment processing timeout
Similar issues have high user impact based on historical data
Analyzing sentiment patterns
Survey responses from Q4 2024
Failed to send notification
Reminder email for Survey #42
Email service returned 503 error
Grouped by Agent
Activities grouped by agent type
Analyzing sentiment patterns
Survey responses from Q4 2024
Failed to send notification
Reminder email for Survey #42
Email service returned 503 error
Categorized insight as Bug Report
INS-2847: Login fails on mobile
High confidence match with existing bug patterns
Auto-tagged feedback
15 new survey responses
Suggested priority escalation
INS-2845: Payment processing timeout
Similar issues have high user impact based on historical data
Generated improvement suggestions
Project Alpha Dashboard
Based on user engagement metrics and feedback analysis
With Filters
Filter controls enabled
Categorized insight as Bug Report
INS-2847: Login fails on mobile
High confidence match with existing bug patterns
Suggested priority escalation
INS-2845: Payment processing timeout
Similar issues have high user impact based on historical data
Analyzing sentiment patterns
Survey responses from Q4 2024
Failed to send notification
Reminder email for Survey #42
Email service returned 503 error
Auto-tagged feedback
15 new survey responses
Generated improvement suggestions
Project Alpha Dashboard
Based on user engagement metrics and feedback analysis
Max Items (3)
Limited initial display with expand
Categorized insight as Bug Report
INS-2847: Login fails on mobile
High confidence match with existing bug patterns
Suggested priority escalation
INS-2845: Payment processing timeout
Similar issues have high user impact based on historical data
Analyzing sentiment patterns
Survey responses from Q4 2024
With ChartCard
Wrapped in ChartCard
Recent AI operations and decisions
Categorized insight as Bug Report
INS-2847: Login fails on mobile
High confidence match with existing bug patterns
Suggested priority escalation
INS-2845: Payment processing timeout
Similar issues have high user impact based on historical data
Analyzing sentiment patterns
Survey responses from Q4 2024
Failed to send notification
Reminder email for Survey #42
Email service returned 503 error
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
activities | AgentActivity[] | required | Array of agent activities |
showConfidence | boolean | true | Show confidence indicator |
groupByAgent | boolean | false | Group activities by agent type |
onActivityClick | (activity: AgentActivity) => void | - | Click handler for activities |
showFilters | boolean | false | Show filter controls |
agentTypes | string[] | - | Available agent types for filtering |
maxItems | number | 10 | Maximum items to show initially |
isLoading | boolean | false | Loading state |
emptyMessage | string | - | Custom empty state message |
className | string | - | Additional CSS classes |
AgentActivity Type
id: string - Unique identifier
agentType: string - Type of agent
action: string - Action performed
target?: string - Target of the action
confidence?: number - Confidence level (0-100)
timestamp: Date - When the action occurred
status: 'pending' | 'completed' | 'failed'
details?: string - Additional details
Usage
import { AgentActivityStream, ChartCard } from '@/ui/components/charts';
const activities = [
{
id: '1',
agentType: 'categorizer',
action: 'Categorized insight as Bug Report',
target: 'INS-2847: Login fails on mobile',
confidence: 92,
timestamp: new Date(),
status: 'completed',
},
{
id: '2',
agentType: 'recommender',
action: 'Suggested priority escalation',
confidence: 87,
timestamp: new Date(),
status: 'pending',
},
];
// Basic stream
<AgentActivityStream activities={activities} />
// With confidence shown
<AgentActivityStream
activities={activities}
showConfidence
onActivityClick={(activity) => console.log(activity)}
/>
// Grouped by agent type
<AgentActivityStream
activities={activities}
groupByAgent
showFilters
agentTypes={['categorizer', 'recommender', 'analyzer']}
/>
// With ChartCard
<ChartCard title="AI Agent Activity">
<AgentActivityStream
activities={activities}
showConfidence
maxItems={5}
/>
</ChartCard>