Agent Status Panel
A comprehensive status panel that displays agent connection status, model information, system resources, and capabilities.
Features
- Connection Status: Real-time connection state with visual indicators
- Model Information: Display model name, provider, context length, and pricing
- Capabilities Display: Visual badges for model capabilities
- System Resources: CPU, memory, latency, and uptime monitoring
- Resource Meters: Visual progress bars with threshold warnings
- Compact Mode: Space-efficient version for sidebars
- Action Buttons: Reconnect, refresh, and settings
Examples
Basic Status
Simple status panel showing connection state.
Runtime status
Agent connection
Version 2.1.0
Connected
Full Featured
Complete status panel with model info and system resources.
Runtime status
Agent connection
Version 2.1.0
Connected
GPT-4 Turbo
OpenAI · 128,000 token context
ChatCodeVisionTools
Input $0.01/1K · Output $0.03/1K
Resources
CPU
45%
Memory
72%
Latency
125 ms
Uptime 14d 6h 32m
Compact Mode
Space-efficient version ideal for sidebars.
Connected
Claude 3 Opus · Anthropic
Installation
npx shadcn@latest add "https://agents-ui.github.io/agents-kit/c/agent-status-panel.json"API Reference
AgentStatusPanel
| Prop | Type | Default | Description |
|---|---|---|---|
| connectionStatus | ConnectionStatus | "connected" | Current connection state |
| modelInfo | ModelInfo | - | Model details and capabilities |
| systemResources | SystemResources | - | System resource usage |
| version | string | "1.0.0" | Agent version |
| onReconnect | () => void | - | Reconnect callback |
| onRefresh | () => void | - | Refresh callback |
| onSettings | () => void | - | Settings callback |
| className | string | - | Additional CSS classes |
| compact | boolean | false | Enable compact mode |
ConnectionStatus
type ConnectionStatus = "connected" | "connecting" | "disconnected" | "error"
ModelInfo
| Property | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | Model name |
| provider | string | Yes | Model provider |
| contextLength | number | Yes | Maximum context tokens |
| capabilities | ModelCapability[] | Yes | Model capabilities |
| costPer1kTokens | { input: number; output: number } | No | Pricing information |
ModelCapability
type ModelCapability = "chat" | "code" | "vision" | "function-calling" | "embedding"
SystemResources
| Property | Type | Required | Description |
|---|---|---|---|
| cpu | number | Yes | CPU usage percentage |
| memory | number | Yes | Memory usage percentage |
| latency | number | Yes | Connection latency in ms |
| uptime | string | Yes | System uptime string |