@inkeep/agents-manage-ui 0.26.1 → 0.27.0

package/src/components/agent/agent.tsx

@@ -53,6 +53,11 @@ export type SubAgentExternalAgentConfig = {
   headers?: Record<string, string>;
 };
 
+export type SubAgentTeamAgentConfig = {
+  agentId: string;
+  headers?: Record<string, string>;
+};
+
 // AgentToolConfigLookup: subAgentId -> relationshipId -> config
 export type AgentToolConfigLookup = Record<string, Record<string, AgentToolConfig>>;
 
@@ -62,6 +67,9 @@ export type SubAgentExternalAgentConfigLookup = Record<
   Record<string, SubAgentExternalAgentConfig>
 >;
 
+// SubAgentTeamAgentConfigLookup: subAgentId -> relationshipId -> config
+export type SubAgentTeamAgentConfigLookup = Record<string, Record<string, SubAgentTeamAgentConfig>>;
+
 import type { ExternalAgent } from '@/lib/api/external-agents';
 import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
 import {
@@ -73,6 +81,7 @@ import {
   NodeType,
   newNodeDefaults,
   nodeTypes,
+  teamAgentNodeTargetHandleId,
 } from './configuration/node-types';
 import { AgentErrorSummary } from './error-display/agent-error-summary';
 import { DefaultMarker } from './markers/default-marker';
@@ -229,6 +238,29 @@ function Flow({
     return lookup;
   }, [agent?.subAgents]);
 
+  const subAgentTeamAgentConfigLookup = useMemo((): SubAgentTeamAgentConfigLookup => {
+    if (!agent?.subAgents) return {} as SubAgentTeamAgentConfigLookup;
+    const lookup: SubAgentTeamAgentConfigLookup = {};
+    Object.entries(agent.subAgents).forEach(([subAgentId, agentData]) => {
+      if ('canDelegateTo' in agentData && agentData.canDelegateTo) {
+        const teamAgentConfigs: Record<string, SubAgentTeamAgentConfig> = {};
+        agentData.canDelegateTo
+          .filter((delegate) => typeof delegate === 'object' && 'agentId' in delegate)
+          .forEach((delegate) => {
+            // For team agents, the delegate is just the target agent ID string
+            teamAgentConfigs[delegate.agentId] = {
+              agentId: delegate.agentId,
+              headers: delegate.headers ?? undefined,
+            };
+          });
+        if (Object.keys(teamAgentConfigs).length > 0) {
+          lookup[subAgentId] = teamAgentConfigs;
+        }
+      }
+    });
+    return lookup;
+  }, [agent?.subAgents]);
+
   const {
     screenToFlowPosition,
     updateNodeData,
@@ -408,6 +440,23 @@ function Flow({
           },
         },
       };
+    } else if (
+      (sourceHandle === agentNodeSourceHandleId || sourceHandle === agentNodeTargetHandleId) &&
+      targetHandle === teamAgentNodeTargetHandleId
+    ) {
+      newEdge = {
+        ...newEdge,
+        type: EdgeType.A2ATeam,
+        selected: true,
+        data: {
+          relationships: {
+            transferTargetToSource: false,
+            transferSourceToTarget: false,
+            delegateTargetToSource: false,
+            delegateSourceToTarget: true,
+          },
+        },
+      };
     }
 
     // Update MCP node subAgentId when connecting agent to MCP tool
@@ -601,7 +650,8 @@ function Flow({
       dataComponentLookup,
       artifactComponentLookup,
       agentToolConfigLookup,
-      subAgentExternalAgentConfigLookup
+      subAgentExternalAgentConfigLookup,
+      subAgentTeamAgentConfigLookup
     );
 
     const functionToolNodeMap = new Map<string, string>();
@@ -729,6 +779,7 @@ function Flow({
     agentToolConfigLookup,
     toolLookup,
     subAgentExternalAgentConfigLookup,
+    subAgentTeamAgentConfigLookup,
     externalAgentLookup,
   ]);
 
@@ -968,6 +1019,7 @@ function Flow({
         artifactComponentLookup={artifactComponentLookup}
         agentToolConfigLookup={agentToolConfigLookup}
         subAgentExternalAgentConfigLookup={subAgentExternalAgentConfigLookup}
+        subAgentTeamAgentConfigLookup={subAgentTeamAgentConfigLookup}
         credentialLookup={credentialLookup}
       />
       {showPlayground && agent?.id && (

package/src/components/agent/configuration/edge-types.tsx

@@ -12,6 +12,7 @@ export enum A2AEdgeType {
 export enum EdgeType {
   A2A = 'a2a',
   A2AExternal = 'a2a-external',
+  A2ATeam = 'a2a-team',
   // Built-in 'default' edges ignore the `data` prop.
   // Use a custom edge type instead to access `data` in rendering.
   Default = 'custom',
@@ -35,6 +36,7 @@ export const edgeTypes = {
   [EdgeType.A2A]: AgentToAgentEdge,
   [EdgeType.Default]: DefaultEdge,
   [EdgeType.A2AExternal]: DefaultEdge,
+  [EdgeType.A2ATeam]: DefaultEdge,
   [EdgeType.SelfLoop]: SelfLoopEdge,
 } as const;
 

package/src/components/agent/configuration/node-types.tsx

@@ -1,9 +1,10 @@
-import { Bot, Code, Globe, Hammer } from 'lucide-react';
+import { Bot, Code, Globe, Hammer, Users } from 'lucide-react';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
 import { FunctionToolNode } from '../nodes/function-tool-node';
 import { MCPNode } from '../nodes/mcp-node';
 import { PlaceholderNode } from '../nodes/placeholder-node';
 import { SubAgentNode } from '../nodes/sub-agent-node';
+import { TeamAgentNode } from '../nodes/team-agent-node';
 import type { AgentModels } from './agent-types';
 
 interface NodeData {
@@ -11,7 +12,7 @@ interface NodeData {
   isDefault?: boolean;
   subAgentId?: string | null; // Optional for MCP nodes
   relationshipId?: string | null; // Optional for MCP nodes
-  type?: 'mcp-placeholder' | 'external-agent-placeholder'; // Optional for placeholder nodes
+  type?: 'mcp-placeholder' | 'external-agent-placeholder' | 'team-agent-placeholder'; // Optional for placeholder nodes
 }
 
 import type { SubAgentStopWhen } from '@inkeep/agents-core/client-exports';
@@ -67,9 +68,18 @@ export interface FunctionToolNodeData extends Record<string, unknown> {
   isDelegating?: boolean;
 }
 
+export interface TeamAgentNodeData extends Record<string, unknown> {
+  id: string;
+  name: string;
+  description?: string;
+  relationshipId?: string | null;
+}
+
 export enum NodeType {
   SubAgent = 'agent',
   ExternalAgent = 'external-agent',
+  TeamAgent = 'team-agent',
+  TeamAgentPlaceholder = 'team-agent-placeholder',
   ExternalAgentPlaceholder = 'external-agent-placeholder',
   MCP = 'mcp',
   MCPPlaceholder = 'mcp-placeholder',
@@ -80,6 +90,8 @@ export const nodeTypes = {
   [NodeType.SubAgent]: SubAgentNode,
   [NodeType.ExternalAgent]: ExternalAgentNode,
   [NodeType.ExternalAgentPlaceholder]: PlaceholderNode,
+  [NodeType.TeamAgent]: TeamAgentNode,
+  [NodeType.TeamAgentPlaceholder]: PlaceholderNode,
   [NodeType.MCP]: MCPNode,
   [NodeType.MCPPlaceholder]: PlaceholderNode,
   [NodeType.FunctionTool]: FunctionToolNode,
@@ -90,6 +102,7 @@ export const agentNodeSourceHandleId = 'source-agent';
 export const agentNodeTargetHandleId = 'target-agent';
 export const externalAgentNodeTargetHandleId = 'target-external-agent';
 export const functionToolNodeHandleId = 'target-function-tool';
+export const teamAgentNodeTargetHandleId = 'target-team-agent';
 
 export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   [NodeType.SubAgent]: {
@@ -115,6 +128,15 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
     name: 'Function Tool',
     subAgentId: null,
   },
+  [NodeType.TeamAgent]: {
+    name: 'Team Agent',
+    subAgentId: null,
+    relationshipId: null,
+  },
+  [NodeType.TeamAgentPlaceholder]: {
+    name: 'Select team agent',
+    type: 'team-agent-placeholder',
+  },
 };
 
 export const nodeTypeMap = {
@@ -148,4 +170,14 @@ export const nodeTypeMap = {
     name: 'Function Tool',
     Icon: Code,
   },
+  [NodeType.TeamAgent]: {
+    type: NodeType.TeamAgent,
+    name: 'Team Agent',
+    Icon: Users,
+  },
+  [NodeType.TeamAgentPlaceholder]: {
+    type: NodeType.TeamAgentPlaceholder,
+    name: 'Team Agent',
+    Icon: Users,
+  },
 };

package/src/components/agent/node-library/node-library.tsx

@@ -7,6 +7,7 @@ const nodeTypes: NodeItem[] = [
   nodeTypeMap[NodeType.SubAgent],
   nodeTypeMap[NodeType.ExternalAgentPlaceholder],
   nodeTypeMap[NodeType.MCPPlaceholder],
+  nodeTypeMap[NodeType.TeamAgentPlaceholder],
   nodeTypeMap[NodeType.FunctionTool],
 ];
 

package/src/components/agent/nodes/placeholder-node.tsx

@@ -1,10 +1,10 @@
 import type { NodeProps } from '@xyflow/react';
-import { Globe, Hammer } from 'lucide-react';
+import { Globe, Hammer, Users } from 'lucide-react';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 
 type PlaceholderNodeData = {
   name: string;
-  type: 'mcp-placeholder' | 'external-agent-placeholder';
+  type: 'mcp-placeholder' | 'external-agent-placeholder' | 'team-agent-placeholder';
 };
 
 export function PlaceholderNode(props: NodeProps & { data: PlaceholderNodeData }) {
@@ -20,6 +20,9 @@ export function PlaceholderNode(props: NodeProps & { data: PlaceholderNodeData }
         {data.type === 'external-agent-placeholder' && (
           <Globe className="size-4 text-muted-foreground/65" />
         )}
+        {data.type === 'team-agent-placeholder' && (
+          <Users className="size-4 text-muted-foreground/65" />
+        )}
         <BaseNodeHeaderTitle className="text-muted-foreground">{name}</BaseNodeHeaderTitle>
       </BaseNodeHeader>
     </BaseNode>

package/src/components/agent/nodes/team-agent-node.tsx

@@ -0,0 +1,60 @@
+import { type NodeProps, Position } from '@xyflow/react';
+import { Users } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { NODE_WIDTH } from '@/features/agent/domain/deserialize';
+import { useAgentErrors } from '@/hooks/use-agent-errors';
+import { cn } from '@/lib/utils';
+import type { TeamAgentNodeData } from '../configuration/node-types';
+import { teamAgentNodeTargetHandleId } from '../configuration/node-types';
+import { ErrorIndicator } from '../error-display/error-indicator';
+import { BaseNode, BaseNodeContent, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { Handle } from './handle';
+import { NodeTab } from './node-tab';
+
+export function TeamAgentNode(props: NodeProps & { data: TeamAgentNodeData }) {
+  const { data, selected, id } = props;
+  const { name, description } = data;
+  const { getNodeErrors, hasNodeErrors } = useAgentErrors();
+
+  // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
+  const subAgentId = data.id || id;
+  const nodeErrors = getNodeErrors(subAgentId);
+  const hasErrors = hasNodeErrors(subAgentId);
+
+  return (
+    <div className="relative">
+      <NodeTab isSelected={selected}>Team</NodeTab>
+      <BaseNode
+        isSelected={selected}
+        className={cn('rounded-tl-none', hasErrors && 'ring-2 ring-red-300 border-red-300')}
+        style={{ width: NODE_WIDTH }}
+      >
+        <BaseNodeHeader className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <Users className="size-4 text-muted-foreground" />
+            <BaseNodeHeaderTitle>{name || 'Team Agent'}</BaseNodeHeaderTitle>
+          </div>
+          <Badge variant="primary" className="text-xs uppercase">
+            Team Agent
+          </Badge>
+          {hasErrors && (
+            <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />
+          )}
+        </BaseNodeHeader>
+        <BaseNodeContent>
+          <div
+            className={`text-sm ${description ? ' text-muted-foreground' : 'text-muted-foreground/50'}`}
+          >
+            {description || 'No description'}
+          </div>
+        </BaseNodeContent>
+        <Handle
+          id={teamAgentNodeTargetHandleId}
+          type="target"
+          position={Position.Top}
+          isConnectable
+        />
+      </BaseNode>
+    </div>
+  );
+}

package/src/components/agent/sidepane/nodes/function-tool-node-editor.tsx

@@ -110,7 +110,7 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
   );
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <InputField
         ref={(el) => setFieldRef('name', el)}
         id="function-tool-name"
@@ -135,31 +135,29 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
         isRequired
         maxHeight="max-h-32"
       />
+      <div className="space-y-2">
+        <ExpandableTextArea
+          id="function-tool-code"
+          label="Code"
+          value={code}
+          onChange={handleCodeChange}
+          placeholder="Enter function code here..."
+          data-invalid={getFieldError('code') ? '' : undefined}
+          isRequired
+          className="font-mono text-sm data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300"
+        />
+        <p className="text-xs text-muted-foreground">
+          JavaScript function code to be executed by the tool. The function will receive arguments
+          based on the input schema and should return a result.
+        </p>
 
-      <ExpandableTextArea
-        id="function-tool-code"
-        label="Code"
-        value={code}
-        onChange={handleCodeChange}
-        placeholder="Enter function code here..."
-        data-invalid={getFieldError('code') ? '' : undefined}
-        isRequired
-        className="font-mono text-sm data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300"
-      />
-      <p className="text-sm text-muted-foreground">
-        JavaScript function code to be executed by the tool. The function will receive arguments
-        based on the input schema and should return a result.
-      </p>
-      {getFieldError('code') && <p className="text-sm text-red-600">{getFieldError('code')}</p>}
-
+        {getFieldError('code') && <p className="text-sm text-red-600">{getFieldError('code')}</p>}
+      </div>
       <div className="space-y-2">
         <div className="text-sm font-medium">
           Input Schema <span className="text-red-500">*</span>
         </div>
-        <p className="text-sm text-muted-foreground">
-          JSON schema defining the parameters that the function will receive. This defines the
-          structure and validation rules for the function's input arguments.
-        </p>
+
         <StandaloneJsonEditor
           value={inputSchema}
           onChange={handleInputSchemaChange}
@@ -178,6 +176,10 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
   "required": ["param1"]
 }`}
         />
+        <p className="text-xs text-muted-foreground">
+          JSON schema defining the parameters that the function will receive. This defines the
+          structure and validation rules for the function's input arguments.
+        </p>
         {getFieldError('inputSchema') && (
           <p className="text-sm text-red-600">{getFieldError('inputSchema')}</p>
         )}
@@ -185,10 +187,7 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
 
       <div className="space-y-2">
         <div className="text-sm font-medium">Dependencies</div>
-        <p className="text-sm text-muted-foreground">
-          External npm packages that the function code requires. These packages will be installed
-          before executing the function.
-        </p>
+
         <StandaloneJsonEditor
           value={dependencies}
           onChange={handleDependenciesChange}
@@ -197,6 +196,10 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
   "lodash": "^4.17.21"
 }`}
         />
+        <p className="text-xs text-muted-foreground">
+          External npm packages that the function code requires. These packages will be installed
+          before executing the function.
+        </p>
         {getFieldError('dependencies') && (
           <p className="text-sm text-red-600">{getFieldError('dependencies')}</p>
         )}

package/src/components/agent/sidepane/nodes/team-agent-node-editor.tsx

@@ -0,0 +1,159 @@
+import { type Node, useReactFlow } from '@xyflow/react';
+import { Trash2 } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
+import { Button } from '@/components/ui/button';
+import { ExternalLink } from '@/components/ui/external-link';
+import { Separator } from '@/components/ui/separator';
+import { useAgentActions } from '@/features/agent/state/use-agent-store';
+import type { ErrorHelpers } from '@/hooks/use-agent-errors';
+import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
+import { useNodeEditor } from '@/hooks/use-node-editor';
+import { getCurrentHeadersForTeamAgentNode } from '@/lib/utils/team-agent-utils';
+import type { SubAgentTeamAgentConfigLookup } from '../../agent';
+import type { TeamAgentNodeData } from '../../configuration/node-types';
+import { InputField, TextareaField } from './form-fields';
+
+interface TeamAgentNodeEditorProps {
+  selectedNode: Node<TeamAgentNodeData>;
+  subAgentTeamAgentConfigLookup: SubAgentTeamAgentConfigLookup;
+  errorHelpers?: ErrorHelpers;
+}
+
+export function TeamAgentNodeEditor({
+  selectedNode,
+  subAgentTeamAgentConfigLookup,
+  errorHelpers,
+}: TeamAgentNodeEditorProps) {
+  const { updateNodeData } = useReactFlow();
+  const { markUnsaved } = useAgentActions();
+  const { handleInputChange, getFieldError, setFieldRef, updateField, deleteNode } = useNodeEditor({
+    selectedNodeId: selectedNode.id,
+    errorHelpers,
+  });
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+  const handleHeadersChange = (value: string) => {
+    // Always update the input state (allows user to type invalid JSON)
+    setHeadersInputValue(value);
+
+    // Only save to node data if the JSON is valid
+    try {
+      const parsedHeaders = value.trim() === '' ? {} : JSON.parse(value);
+      if (
+        typeof parsedHeaders === 'object' &&
+        parsedHeaders !== null &&
+        !Array.isArray(parsedHeaders)
+      ) {
+        // Valid format - save to node data
+        updateNodeData(selectedNode.id, {
+          ...selectedNode.data,
+          tempHeaders: parsedHeaders,
+        });
+        markUnsaved();
+      }
+    } catch {
+      // Invalid JSON - don't save, but allow user to continue typing
+      // The ExpandableJsonEditor will show the validation error
+    }
+  };
+
+  const handleIdChange = useCallback(
+    (generatedId: string) => {
+      updateField('id', generatedId);
+    },
+    [updateField]
+  );
+
+  // Auto-prefill ID based on name field (always enabled for agent nodes)
+  useAutoPrefillIdZustand({
+    nameValue: selectedNode.data.name,
+    idValue: selectedNode.data.id,
+    onIdChange: handleIdChange,
+    isEditing: false,
+  });
+
+  const getCurrentHeaders = useCallback((): Record<string, string> => {
+    return getCurrentHeadersForTeamAgentNode(selectedNode, subAgentTeamAgentConfigLookup, []);
+  }, [selectedNode, subAgentTeamAgentConfigLookup]);
+
+  // Local state for headers input (allows invalid JSON while typing)
+  const [headersInputValue, setHeadersInputValue] = useState('{}');
+
+  // Sync input value when node changes (but not on every data change)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omit getCurrentHeaders to prevent reset loops
+  useEffect(() => {
+    const newHeaders = getCurrentHeaders();
+    setHeadersInputValue(JSON.stringify(newHeaders, null, 2));
+  }, [selectedNode.id]);
+
+  return (
+    <div className="space-y-8 flex flex-col">
+      <p className="text-sm text-muted-foreground">
+        Team agents are other agents within the same project that can collaborate and delegate tasks
+        using the A2A (Agent-to-Agent) protocol. Team agents enable you to create specialized agents
+        that work together to accomplish complex tasks.
+      </p>
+
+      <InputField
+        ref={(el) => setFieldRef('name', el)}
+        id="name"
+        name="name"
+        label="Name"
+        value={selectedNode.data.name || ''}
+        onChange={handleInputChange}
+        placeholder="Support agent"
+        disabled
+        error={getFieldError('name')}
+      />
+
+      <InputField
+        ref={(el) => setFieldRef('id', el)}
+        id="id"
+        name="id"
+        label="Id"
+        value={selectedNode.data.id || ''}
+        onChange={handleInputChange}
+        placeholder="my-external-agent"
+        error={getFieldError('id')}
+        disabled
+        description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
+        isRequired
+      />
+
+      <TextareaField
+        ref={(el) => setFieldRef('description', el)}
+        id="description"
+        name="description"
+        label="Description"
+        value={selectedNode.data.description || ''}
+        onChange={handleInputChange}
+        placeholder="This agent is responsible for..."
+        error={getFieldError('description')}
+        disabled
+      />
+
+      <ExpandableJsonEditor
+        name="headers"
+        label="Headers"
+        value={headersInputValue}
+        onChange={handleHeadersChange}
+        placeholder="{}"
+        className=""
+      />
+      <ExternalLink href={`/${tenantId}/projects/${projectId}/agents/${selectedNode.data.id}`}>
+        Edit Agent
+      </ExternalLink>
+      <Separator />
+      <div className="flex justify-end">
+        <Button variant="destructive-outline" size="sm" onClick={deleteNode}>
+          <Trash2 className="size-4" />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/agent/sidepane/nodes/team-agent-selector/loading.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface TeamAgentSelectorLoadingProps {
+  title: string;
+}
+
+export function TeamAgentSelectorLoading({ title }: TeamAgentSelectorLoadingProps) {
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-medium mb-2">{title}</h3>
+      <div className="flex flex-col gap-2">
+        {[...Array(3)].map((_, index) => (
+          <div key={index} className="w-full p-3 rounded-lg border border-border">
+            <div className="flex items-start gap-3">
+              <Skeleton className="size-8 rounded flex-shrink-0" />
+              <div className="flex-1 min-w-0 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/agent/sidepane/nodes/team-agent-selector/team-agent-item.tsx

@@ -0,0 +1,38 @@
+import { Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { Agent } from '@/lib/types/agent-full';
+
+interface TeamAgentItemProps {
+  agent: Agent;
+  onClick: (agent: Agent) => void;
+}
+
+export function TeamAgentItem({ agent, onClick }: TeamAgentItemProps) {
+  const { id, name, description } = agent;
+
+  return (
+    <Button
+      variant="unstyled"
+      size="unstyled"
+      type="button"
+      key={id}
+      className="w-full p-3 rounded-lg border cursor-pointer transition-colors border-border hover:bg-muted/50 text-left inline-block"
+      id={id}
+      onClick={() => onClick(agent)}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 mt-0.5 size-8 rounded bg-muted flex items-center justify-center">
+          <Users className="size-4 text-muted-foreground" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-1 gap-2 min-w-0 truncate">
+            <span className="font-medium text-sm truncate">{name}</span>
+          </div>
+          {description && (
+            <p className="text-xs text-muted-foreground truncate mb-1">{description}</p>
+          )}
+        </div>
+      </div>
+    </Button>
+  );
+}