AI Agent Status

1"use client";
2 
3import * as React from "react";
4 
5import {
6  ArrowRight,
7  Bot,
8  Brain,
9  Check,
10  Clock,
11  Loader2,
12  Pause,
13} from "lucide-react";
14 
15import { cn } from "@/lib/utils";
16 
17type AgentStatus =
18  | "idle"
19  | "thinking"
20  | "acting"
21  | "waiting"
22  | "done"
23  | "handoff";
24 
25interface AgentInfo {
26  name: string;
27  icon?: React.ReactNode;
28  description?: string;
29}
30 
31interface AiAgentStatusContextValue {
32  agent: AgentInfo;
33  status: AgentStatus;
34  handoffTo?: string;
35  variant: "badge" | "card";
36}
37 
38const AiAgentStatusContext =
39  React.createContext<AiAgentStatusContextValue | null>(null);
40 
41function useAgentStatusContext() {
42  const context = React.useContext(AiAgentStatusContext);
43  if (!context) {
44    throw new Error(
45      "AiAgentStatus components must be used within <AiAgentStatus>",
46    );
47  }
48  return context;
49}
50 
51interface AiAgentStatusProps {
52  agent: AgentInfo;
53  status: AgentStatus;
54  handoffTo?: string;
55  variant?: "badge" | "card";
56  children?: React.ReactNode;
57  className?: string;
58}
59 
60function AiAgentStatus({
61  agent,
62  status,
63  handoffTo,
64  variant = "badge",
65  children,
66  className,
67}: AiAgentStatusProps) {
68  const contextValue = React.useMemo(
69    () => ({ agent, status, handoffTo, variant }),
70    [agent, status, handoffTo, variant],
71  );
72 
73  if (variant === "badge") {
74    return (
75      <AiAgentStatusContext.Provider value={contextValue}>
76        <AiAgentStatusBadge className={className}>
77          {children}
78        </AiAgentStatusBadge>
79      </AiAgentStatusContext.Provider>
80    );
81  }
82 
83  return (
84    <AiAgentStatusContext.Provider value={contextValue}>
85      <AiAgentStatusCard className={className}>{children}</AiAgentStatusCard>
86    </AiAgentStatusContext.Provider>
87  );
88}
89 
90interface AiAgentStatusBadgeProps {
91  children?: React.ReactNode;
92  className?: string;
93}
94 
95function AiAgentStatusBadge({ children, className }: AiAgentStatusBadgeProps) {
96  const { agent, status, handoffTo } = useAgentStatusContext();
97 
98  const statusConfig = React.useMemo(() => {
99    const configs: Record<
100      AgentStatus,
101      { icon: React.ReactNode; label: string; className: string }
102    > = {
103      idle: {
104        icon: <Clock className="size-3" />,
105        label: "Idle",
106        className: "bg-muted text-muted-foreground",
107      },
108      thinking: {
109        icon: <Brain className="size-3 animate-pulse" />,
110        label: "Thinking",
111        className:
112          "bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300",
113      },
114// … truncated