@inkeep/agents-manage-ui 0.0.0-dev-20251021180725 → 0.0.0-dev-20251021181503

package/src/app/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]/page.tsx

@@ -0,0 +1,52 @@
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ViewExternalAgentDetails } from '@/components/external-agents/view-external-agent-details';
+import { fetchExternalAgent } from '@/lib/api/external-agents';
+
+interface ExternalAgentPageProps {
+  params: Promise<{ externalAgentId: string; tenantId: string; projectId: string }>;
+}
+
+async function ExternalAgentPage({ params }: ExternalAgentPageProps) {
+  const { externalAgentId, tenantId, projectId } = await params;
+
+  let externalAgent: Awaited<ReturnType<typeof fetchExternalAgent>>;
+  try {
+    externalAgent = await fetchExternalAgent(tenantId, projectId, externalAgentId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/external-agents`}
+        linkText="Back to external agents"
+        context="External agent"
+      />
+    );
+  }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        {
+          label: externalAgent.name,
+          href: `/${tenantId}/projects/${projectId}/external-agents/${externalAgentId}`,
+        },
+      ]}
+    >
+      <MainContent>
+        <ViewExternalAgentDetails
+          externalAgent={externalAgent}
+          tenantId={tenantId}
+          projectId={projectId}
+        />
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ExternalAgentPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/new/page.tsx

@@ -0,0 +1,43 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { ExternalAgentForm } from '@/components/external-agents/form/external-agent-form';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+
+async function NewExternalAgentPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+  let credentials: Credential[] = [];
+  try {
+    credentials = await fetchCredentials(tenantId, projectId);
+  } catch (error) {
+    console.error('Failed to load credentials:', error);
+  }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'External agents',
+          href: `/${tenantId}/projects/${projectId}/external-agents`,
+        },
+        { label: 'New' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <ExternalAgentForm
+            mode="create"
+            credentials={credentials}
+            tenantId={tenantId}
+            projectId={projectId}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default NewExternalAgentPage;

package/src/app/[tenantId]/projects/[projectId]/external-agents/page.tsx

@@ -0,0 +1,64 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import EmptyState from '@/components/layout/empty-state';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { ExternalAgentsList } from '@/components/external-agents/external-agents-list';
+import { Button } from '@/components/ui/button';
+import { fetchExternalAgents } from '@/lib/api/external-agents';
+
+const externalAgentsDescription =
+  'Create external agents that can be delegated to from your internal agents.';
+
+async function ExternalAgentsPage({
+  params,
+}: {
+  params: Promise<{ tenantId: string; projectId: string }>;
+}) {
+  const { tenantId, projectId } = await params;
+
+  let externalAgents: Awaited<ReturnType<typeof fetchExternalAgents>>;
+  try {
+    externalAgents = await fetchExternalAgents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="External agents" />;
+  }
+
+  return (
+    <BodyTemplate breadcrumbs={[{ label: 'External agents' }]}>
+      <MainContent className="min-h-full">
+        {externalAgents.length > 0 ? (
+          <>
+            <PageHeader
+              title="External agents"
+              description={externalAgentsDescription}
+              action={
+                <Button asChild>
+                  <Link
+                    href={`/${tenantId}/projects/${projectId}/external-agents/new`}
+                    className="flex items-center gap-2"
+                  >
+                    <Plus className="size-4" />
+                    New external agent
+                  </Link>
+                </Button>
+              }
+            />
+            <ExternalAgentsList externalAgents={externalAgents} />
+          </>
+        ) : (
+          <EmptyState
+            title="No external agents yet."
+            description={externalAgentsDescription}
+            link={`/${tenantId}/projects/${projectId}/external-agents/new`}
+            linkText="Create external agent"
+          />
+        )}
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default ExternalAgentsPage;

package/src/components/agent/agent.tsx

@@ -48,9 +48,21 @@ export type AgentToolConfig = {
   headers?: Record<string, string>;
 };
 
+export type SubAgentExternalAgentConfig = {
+  externalAgentId: string;
+  headers?: Record<string, string>;
+};
+
 // AgentToolConfigLookup: subAgentId -> relationshipId -> config
 export type AgentToolConfigLookup = Record<string, Record<string, AgentToolConfig>>;
 
+// SubAgentExternalAgentConfigLookup: subAgentId -> relationshipId -> config
+export type SubAgentExternalAgentConfigLookup = Record<
+  string,
+  Record<string, SubAgentExternalAgentConfig>
+>;
+
+import type { ExternalAgent } from '@/lib/api/external-agents';
 import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
 import {
   agentNodeSourceHandleId,
@@ -81,6 +93,7 @@ interface AgentProps {
   artifactComponentLookup?: Record<string, ArtifactComponent>;
   toolLookup?: Record<string, MCPTool>;
   credentialLookup?: Record<string, Credential>;
+  externalAgentLookup?: Record<string, ExternalAgent>;
 }
 
 function Flow({
@@ -89,6 +102,7 @@ function Flow({
   artifactComponentLookup = {},
   toolLookup = {},
   credentialLookup = {},
+  externalAgentLookup = {},
 }: AgentProps) {
   const [showPlayground, setShowPlayground] = useState(false);
   const router = useRouter();
@@ -193,6 +207,28 @@ function Flow({
     return lookup;
   }, [agent?.subAgents]);
 
+  const subAgentExternalAgentConfigLookup = useMemo((): SubAgentExternalAgentConfigLookup => {
+    if (!agent?.subAgents) return {} as SubAgentExternalAgentConfigLookup;
+    const lookup: SubAgentExternalAgentConfigLookup = {};
+    Object.entries(agent.subAgents).forEach(([subAgentId, agentData]) => {
+      if ('canDelegateTo' in agentData && agentData.canDelegateTo) {
+        const externalAgentConfigs: Record<string, SubAgentExternalAgentConfig> = {};
+        agentData.canDelegateTo
+          .filter((delegate) => typeof delegate === 'object' && 'externalAgentId' in delegate)
+          .forEach((delegate) => {
+            externalAgentConfigs[delegate.externalAgentId] = {
+              externalAgentId: delegate.externalAgentId,
+              headers: delegate.headers ?? undefined,
+            };
+          });
+        if (Object.keys(externalAgentConfigs).length > 0) {
+          lookup[subAgentId] = externalAgentConfigs;
+        }
+      }
+    });
+    return lookup;
+  }, [agent?.subAgents]);
+
   const {
     screenToFlowPosition,
     updateNodeData,
@@ -564,7 +600,8 @@ function Flow({
       metadata,
       dataComponentLookup,
       artifactComponentLookup,
-      agentToolConfigLookup
+      agentToolConfigLookup,
+      subAgentExternalAgentConfigLookup
     );
 
     const functionToolNodeMap = new Map<string, string>();
@@ -691,6 +728,8 @@ function Flow({
     setErrors,
     agentToolConfigLookup,
     toolLookup,
+    subAgentExternalAgentConfigLookup,
+    externalAgentLookup,
   ]);
 
   useEffect(() => {
@@ -928,6 +967,7 @@ function Flow({
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         agentToolConfigLookup={agentToolConfigLookup}
+        subAgentExternalAgentConfigLookup={subAgentExternalAgentConfigLookup}
         credentialLookup={credentialLookup}
       />
       {showPlayground && agent?.id && (
@@ -950,6 +990,7 @@ export function Agent({
   artifactComponentLookup,
   toolLookup,
   credentialLookup,
+  externalAgentLookup,
 }: AgentProps) {
   return (
     <ReactFlowProvider>
@@ -959,6 +1000,7 @@ export function Agent({
         artifactComponentLookup={artifactComponentLookup}
         toolLookup={toolLookup}
         credentialLookup={credentialLookup}
+        externalAgentLookup={externalAgentLookup}
       />
     </ReactFlowProvider>
   );

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

@@ -1,8 +1,8 @@
-import { Bot, BotMessageSquare, Code, Hammer } from 'lucide-react';
+import { Bot, Code, Globe, Hammer } from 'lucide-react';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
 import { FunctionToolNode } from '../nodes/function-tool-node';
 import { MCPNode } from '../nodes/mcp-node';
-import { MCPPlaceholderNode } from '../nodes/mcp-placeholder-node';
+import { PlaceholderNode } from '../nodes/placeholder-node';
 import { SubAgentNode } from '../nodes/sub-agent-node';
 import type { AgentModels } from './agent-types';
 
@@ -11,6 +11,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
 }
 
 import type { SubAgentStopWhen } from '@inkeep/agents-core/client-exports';
@@ -48,7 +49,7 @@ export interface ExternalAgentNodeData extends Record<string, unknown> {
   name: string;
   description?: string;
   baseUrl: string;
-  headers: string;
+  relationshipId?: string | null;
   credentialReferenceId?: string | null;
 }
 
@@ -69,6 +70,7 @@ export interface FunctionToolNodeData extends Record<string, unknown> {
 export enum NodeType {
   SubAgent = 'agent',
   ExternalAgent = 'external-agent',
+  ExternalAgentPlaceholder = 'external-agent-placeholder',
   MCP = 'mcp',
   MCPPlaceholder = 'mcp-placeholder',
   FunctionTool = 'function-tool',
@@ -77,8 +79,9 @@ export enum NodeType {
 export const nodeTypes = {
   [NodeType.SubAgent]: SubAgentNode,
   [NodeType.ExternalAgent]: ExternalAgentNode,
+  [NodeType.ExternalAgentPlaceholder]: PlaceholderNode,
   [NodeType.MCP]: MCPNode,
-  [NodeType.MCPPlaceholder]: MCPPlaceholderNode,
+  [NodeType.MCPPlaceholder]: PlaceholderNode,
   [NodeType.FunctionTool]: FunctionToolNode,
 };
 
@@ -95,6 +98,10 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   [NodeType.ExternalAgent]: {
     name: '',
   },
+  [NodeType.ExternalAgentPlaceholder]: {
+    name: 'Select external agent',
+    type: 'external-agent-placeholder',
+  },
   [NodeType.MCP]: {
     name: 'MCP',
     subAgentId: null,
@@ -102,6 +109,7 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   },
   [NodeType.MCPPlaceholder]: {
     name: 'Select MCP server',
+    type: 'mcp-placeholder',
   },
   [NodeType.FunctionTool]: {
     name: 'Function Tool',
@@ -118,7 +126,12 @@ export const nodeTypeMap = {
   [NodeType.ExternalAgent]: {
     type: NodeType.ExternalAgent,
     name: 'External Agent',
-    Icon: BotMessageSquare,
+    Icon: Globe,
+  },
+  [NodeType.ExternalAgentPlaceholder]: {
+    type: NodeType.ExternalAgentPlaceholder,
+    name: 'External Agent',
+    Icon: Globe,
   },
   [NodeType.MCPPlaceholder]: {
     type: NodeType.MCPPlaceholder,

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

@@ -5,7 +5,7 @@ import { NodeItem } from './node-item';
 
 const nodeTypes: NodeItem[] = [
   nodeTypeMap[NodeType.SubAgent],
-  nodeTypeMap[NodeType.ExternalAgent],
+  nodeTypeMap[NodeType.ExternalAgentPlaceholder],
   nodeTypeMap[NodeType.MCPPlaceholder],
   nodeTypeMap[NodeType.FunctionTool],
 ];

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

@@ -1,19 +1,19 @@
 import { type NodeProps, Position } from '@xyflow/react';
-import { BotMessageSquare } from 'lucide-react';
+import { Globe } 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 type { AgentNodeData } from '../configuration/node-types';
+import { cn } from '@/lib/utils';
+import type { ExternalAgentNodeData } from '../configuration/node-types';
 import { externalAgentNodeTargetHandleId } 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';
-import { cn } from '@/lib/utils';
 
-export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
+export function ExternalAgentNode(props: NodeProps & { data: ExternalAgentNodeData }) {
   const { data, selected, id } = props;
-  const { name, description, isExecuting } = data;
+  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
@@ -25,17 +25,13 @@ export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
     <div className="relative">
       <NodeTab isSelected={selected}>External</NodeTab>
       <BaseNode
-        isSelected={selected || data.isDelegating}
-        className={cn(
-          'rounded-tl-none',
-          hasErrors && 'ring-2 ring-red-300 border-red-300',
-          isExecuting && 'node-executing'
-        )}
+        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">
-            <BotMessageSquare className="size-4 text-muted-foreground" />
+            <Globe className="size-4 text-muted-foreground" />
             <BaseNodeHeaderTitle>{name || 'External Agent'}</BaseNodeHeaderTitle>
           </div>
           <Badge variant="primary" className="text-xs uppercase">

package/src/components/agent/nodes/{mcp-placeholder-node.tsx → placeholder-node.tsx}

@@ -1,12 +1,13 @@
 import type { NodeProps } from '@xyflow/react';
-import { Hammer } from 'lucide-react';
+import { Globe, Hammer } from 'lucide-react';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 
-type MCPPlaceholderNodeData = {
+type PlaceholderNodeData = {
   name: string;
+  type: 'mcp-placeholder' | 'external-agent-placeholder';
 };
 
-export function MCPPlaceholderNode(props: NodeProps & { data: MCPPlaceholderNodeData }) {
+export function PlaceholderNode(props: NodeProps & { data: PlaceholderNodeData }) {
   const { data, selected } = props;
   const { name } = data;
   return (
@@ -15,7 +16,10 @@ export function MCPPlaceholderNode(props: NodeProps & { data: MCPPlaceholderNode
       className={`rounded-4xl border-dashed min-w-40 min-h-13 flex items-center justify-center max-w-3xs ${selected ? 'outline-dashed outline-2 outline-gray-700 hover:outline-gray-700 ring-0 hover:ring-0' : ''}`}
     >
       <BaseNodeHeader className="mb-0 py-3">
-        <Hammer className="size-4 text-muted-foreground/65" />
+        {data.type === 'mcp-placeholder' && <Hammer className="size-4 text-muted-foreground/65" />}
+        {data.type === 'external-agent-placeholder' && (
+          <Globe className="size-4 text-muted-foreground/65" />
+        )}
         <BaseNodeHeaderTitle className="text-muted-foreground">{name}</BaseNodeHeaderTitle>
       </BaseNodeHeader>
     </BaseNode>

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

@@ -1,29 +1,68 @@
-import type { Node } from '@xyflow/react';
-import { useCallback } from 'react';
+import { type Node, useReactFlow } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
+import { ExternalLink } from '@/components/ui/external-link';
+import { useAgentActions, useAgentStore } 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 type { Credential } from '@/lib/api/credentials';
+import { getCurrentHeadersForExternalAgentNode } from '@/lib/utils/external-agent-utils';
+import type { SubAgentExternalAgentConfigLookup } from '../../agent';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
-import { CredentialSelector } from './credential-selector';
 import { InputField, TextareaField } from './form-fields';
 
 interface ExternalAgentNodeEditorProps {
   selectedNode: Node<ExternalAgentNodeData>;
   credentialLookup: Record<string, Credential>;
+  subAgentExternalAgentConfigLookup: SubAgentExternalAgentConfigLookup;
   errorHelpers?: ErrorHelpers;
 }
 
 export function ExternalAgentNodeEditor({
   selectedNode,
-  credentialLookup,
+  subAgentExternalAgentConfigLookup,
   errorHelpers,
 }: ExternalAgentNodeEditorProps) {
+  const { updateNodeData } = useReactFlow();
+  const { markUnsaved } = useAgentActions();
   const { handleInputChange, getFieldError, setFieldRef, updateField } = 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 { edges } = useAgentStore((state) => ({
+    edges: state.edges,
+  }));
 
   const handleIdChange = useCallback(
     (generatedId: string) => {
@@ -40,6 +79,24 @@ export function ExternalAgentNodeEditor({
     isEditing: false,
   });
 
+  const getCurrentHeaders = useCallback((): Record<string, string> => {
+    return getCurrentHeadersForExternalAgentNode(
+      selectedNode,
+      subAgentExternalAgentConfigLookup,
+      edges
+    );
+  }, [selectedNode, subAgentExternalAgentConfigLookup, edges]);
+
+  // 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">
@@ -56,6 +113,7 @@ export function ExternalAgentNodeEditor({
         value={selectedNode.data.name || ''}
         onChange={handleInputChange}
         placeholder="Support agent"
+        disabled
         error={getFieldError('name')}
       />
 
@@ -68,6 +126,7 @@ export function ExternalAgentNodeEditor({
         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
       />
@@ -81,6 +140,7 @@ export function ExternalAgentNodeEditor({
         onChange={handleInputChange}
         placeholder="This agent is responsible for..."
         error={getFieldError('description')}
+        disabled
       />
 
       <InputField
@@ -93,26 +153,21 @@ export function ExternalAgentNodeEditor({
         placeholder="https://api.example.com/agent"
         error={getFieldError('baseUrl')}
         tooltip="This URL is used to discover the agent's capabilities and communicate with it using the A2A protocol. For locally hosted agent defined with the agent-framework this would be: http://localhost:3002/tenants/:tenantId/projects/:projectId/agents/:agentId"
+        disabled
       />
       <ExpandableJsonEditor
         name="headers"
         label="Headers"
-        value={selectedNode.data.headers}
-        onChange={(value) => updateField('headers', value)}
+        value={headersInputValue}
+        onChange={handleHeadersChange}
         placeholder="{}"
         className=""
       />
-      <CredentialSelector
-        label="Credential"
-        credentialLookup={credentialLookup}
-        value={
-          typeof selectedNode.data.credentialReferenceId === 'string'
-            ? selectedNode.data.credentialReferenceId
-            : null
-        }
-        onValueChange={(value) => updateField('credentialReferenceId', value || '')}
-        placeholder="Select a credential"
-      />
+      <ExternalLink
+        href={`/${tenantId}/projects/${projectId}/external-agents/${selectedNode.data.id}/edit`}
+      >
+        Edit External Agent
+      </ExternalLink>
     </div>
   );
 }

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

@@ -0,0 +1,39 @@
+import { Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { ExternalAgent } from '@/lib/types/external-agents';
+
+interface ExternalAgentItemProps {
+  externalAgent: ExternalAgent;
+  onClick: (externalAgent: ExternalAgent) => void;
+}
+
+export function ExternalAgentItem({ externalAgent, onClick }: ExternalAgentItemProps) {
+  const { id, name, description, baseUrl } = externalAgent;
+
+  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(externalAgent)}
+    >
+      <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">
+          <Globe 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>
+          )}
+          <p className="text-xs text-muted-foreground/70 truncate">{baseUrl}</p>
+        </div>
+      </div>
+    </Button>
+  );
+}