AI Agent Roster

1"use client";
2 
3import * as React from "react";
4 
5import {
6  Bot,
7  Check,
8  ChevronRight,
9  Clock,
10  Cpu,
11  Loader2,
12  Power,
13} from "lucide-react";
14 
15import { cn } from "@/lib/utils";
16 
17type AgentStatus = "active" | "idle" | "busy" | "offline";
18 
19interface RosterAgent {
20  id: string;
21  name: string;
22  description?: string;
23  matchOn?: string[];
24  status: AgentStatus;
25  icon?: React.ReactNode;
26  model?: string;
27}
28 
29interface AiAgentRosterContextValue {
30  agents: RosterAgent[];
31  activeAgentId?: string;
32  layout: "grid" | "list";
33  onSelect?: (agentId: string) => void;
34}
35 
36const AiAgentRosterContext =
37  React.createContext<AiAgentRosterContextValue | null>(null);
38 
39function useAgentRosterContext() {
40  const context = React.useContext(AiAgentRosterContext);
41  if (!context) {
42    throw new Error(
43      "AiAgentRoster components must be used within <AiAgentRoster>",
44    );
45  }
46  return context;
47}
48 
49interface AiAgentRosterProps {
50  agents: RosterAgent[];
51  activeAgentId?: string;
52  onSelect?: (agentId: string) => void;
53  layout?: "grid" | "list";
54  children?: React.ReactNode;
55  className?: string;
56}
57 
58function AiAgentRoster({
59  agents,
60  activeAgentId,
61  onSelect,
62  layout = "grid",
63  children,
64  className,
65}: AiAgentRosterProps) {
66  const contextValue = React.useMemo(
67    () => ({ agents, activeAgentId, layout, onSelect }),
68    [agents, activeAgentId, layout, onSelect],
69  );
70 
71  return (
72    <AiAgentRosterContext.Provider value={contextValue}>
73      <div
74        data-slot="ai-agent-roster"
75        data-layout={layout}
76        className={cn(
77          "rounded-lg border border-border bg-card text-card-foreground",
78          className,
79        )}
80      >
81        {children || <AiAgentRosterContent />}
82      </div>
83    </AiAgentRosterContext.Provider>
84  );
85}
86 
87interface AiAgentRosterHeaderProps {
88  children?: React.ReactNode;
89  className?: string;
90}
91 
92function AiAgentRosterHeader({
93  children,
94  className,
95}: AiAgentRosterHeaderProps) {
96  const { agents } = useAgentRosterContext();
97 
98  const activeCount = React.useMemo(
99    () =>
100      agents.filter((a) => a.status === "active" || a.status === "busy").length,
101    [agents],
102  );
103 
104  return (
105    <div
106      data-slot="ai-agent-roster-header"
107      className={cn(
108        "flex items-center justify-between border-b border-border px-4 py-3",
109        className,
110      )}
111    >
112      <div className="flex items-center gap-2">
113        <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
114// … truncated