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.

Agent Status

Version 2.1.0

Connection

Connected

Full Featured

Complete status panel with model info and system resources.

Agent Status

Version 2.1.0

Connection

Connected

Model Information

ModelGPT-4 Turbo

ProviderOpenAI

Context128,000 tokens

Cost/1k tokens$0.01 / $0.03

Capabilities

chat

code

vision

function calling

System Resources

CPU

45%

Memory

72%

Latency

125ms

Uptime

14d 6h 32m

Compact Mode

Space-efficient version ideal for sidebars.

Connected

Claude 3 Opus

Anthropic

Installation

npx shadcn add "https://agents-ui-kit.com/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