Aurora AI Agent

1"use client"
2 
3import * as React from "react"
4import { Bot, CircleDashed, CirclePlus, Clock, SquareCode } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge } from "@/registry/aurora/ui/badge"
7import { Spinner } from "@/registry/aurora/ui/spinner"
8 
9export type AgentStatus = "idle" | "running" | "blocked" | "completed"
10 
11export interface AgentProps extends React.HTMLAttributes<HTMLDivElement> {
12  /** Agent display name. */
13  name: string
14  /** Short role / responsibility line under the name. */
15  role?: string
16  /** Lifecycle status — drives the status pill and live affordances. */
17  status?: AgentStatus
18  /** Render the Axon-orange Agent identity chip beside the name. */
19  badge?: boolean
20  /** Model identifier shown in the metadata footer. */
21  model?: string
22  /** Current task description shown in the activity row. */
23  task?: string
24  /** Progress 0..1 — renders the determinate progress bar + percentage. */
25  progress?: number
26  /** Token usage shown in the footer (formatted to k). */
27  tokens?: number
28  /** Elapsed time string shown in the footer. */
29  elapsed?: string
30  /** Layout density. "compact" = single-line tile for grids. */
31  variant?: "default" | "compact"
32}
33 
34const statusTone: Record<AgentStatus, "info" | "success" | "warn" | "neutral"> = {
35  running: "info",
36  completed: "success",
37  blocked: "warn",
38  idle: "neutral",
39}
40 
41const statusLabel: Record<AgentStatus, string> = {
42  idle: "Idle",
43  running: "Running",
44  blocked: "Blocked",
45  completed: "Completed",
46}
47 
48function formatTokens(value: number): string {
49  if (value >= 1000) {
50    const k = value / 1000
51    return `${Number.isInteger(k) ? k : k.toFixed(1)}k`
52  }
53  return String(value)
54}
55 
56function panelStyle(style?: React.CSSProperties): React.CSSProperties {
57  return {
58    background: "var(--aurora-surface-raised)",
59    border: "1px solid var(--aurora-border-default)",
60    borderRadius: "var(--aurora-radius-1)",
61    boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
62    ...style,
63  }
64}
65 
66interface AvatarProps {
67  status: AgentStatus
68  size: number
69}
70 
71function AgentAvatar({ status, size }: AvatarProps) {
72  const dotSize = Math.round(size * 0.3)
73  return (
74    <span
75      aria-hidden
76      style={{
77        position: "relative",
78        display: "inline-flex",
79        flexShrink: 0,
80        alignItems: "center",
81        justifyContent: "center",
82        width: size,
83        height: size,
84        borderRadius: "calc(var(--aurora-radius-1) - 2px)",
85// … truncated