@inkeep/agents-manage-ui 0.26.1 → 0.27.0

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

@@ -0,0 +1,110 @@
+import { type Node, useReactFlow } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { fetchAgents } from '@/lib/api/agent-full-client';
+import type { Agent } from '@/lib/types/agent-full';
+import { NodeType } from '../../../configuration/node-types';
+import { EmptyState } from '../empty-state';
+import { TeamAgentSelectorLoading } from './loading';
+import { TeamAgentItem } from './team-agent-item';
+
+interface TeamAgentSelectorState {
+  agents: Agent[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+const useFetchAvailableAgents = (): TeamAgentSelectorState => {
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { tenantId, projectId, agentId } = useParams<{
+    tenantId: string;
+    projectId: string;
+    agentId: string;
+  }>();
+
+  useEffect(() => {
+    const loadAgents = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await fetchAgents(tenantId, projectId);
+        // Filter out the current agent to prevent self-selection
+        const filteredAgents = agentId
+          ? response.data.filter((agent) => agent.id !== agentId)
+          : response.data;
+        setAgents(filteredAgents);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load agents';
+        setError(errorMessage);
+        toast.error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadAgents();
+  }, [tenantId, projectId, agentId]);
+
+  return { agents, isLoading, error };
+};
+
+export function TeamAgentSelector({ selectedNode }: { selectedNode: Node }) {
+  const { updateNode } = useReactFlow();
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
+  const { agents, isLoading, error } = useFetchAvailableAgents();
+
+  const handleSelect = (agent: Agent) => {
+    updateNode(selectedNode.id, {
+      type: NodeType.TeamAgent,
+      data: {
+        id: agent.id,
+        name: agent.name,
+        description: agent.description,
+        relationshipId: null, // Will be set after saving to database
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <TeamAgentSelectorLoading title="Select team agent" />;
+  }
+
+  if (error) {
+    return (
+      <EmptyState
+        message="Something went wrong."
+        actionText="Create agent"
+        actionHref={`/${tenantId}/projects/${projectId}/agents/new`}
+      />
+    );
+  }
+
+  if (!agents?.length) {
+    return (
+      <EmptyState
+        message="No agents found."
+        actionText="Create agent"
+        actionHref={`/${tenantId}/projects/${projectId}/agents/new`}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium mb-2">Select team agent</h3>
+        <div className="flex flex-col gap-2 min-w-0 min-h-0">
+          {agents.map((agent: Agent) => (
+            <TeamAgentItem key={agent.id} agent={agent} onClick={handleSelect} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/agent/sidepane/sidepane.tsx

@@ -7,7 +7,11 @@ import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
-import type { AgentToolConfigLookup, SubAgentExternalAgentConfigLookup } from '../agent';
+import type {
+  AgentToolConfigLookup,
+  SubAgentExternalAgentConfigLookup,
+  SubAgentTeamAgentConfigLookup,
+} from '../agent';
 import { edgeTypeMap } from '../configuration/edge-types';
 import {
   type AgentNodeData,
@@ -16,6 +20,7 @@ import {
   type MCPNodeData,
   NodeType,
   nodeTypeMap,
+  type TeamAgentNodeData,
 } from '../configuration/node-types';
 import EdgeEditor from './edges/edge-editor';
 import { EditorLoadingSkeleton } from './editor-loading-skeleton';
@@ -27,6 +32,8 @@ import { FunctionToolNodeEditor } from './nodes/function-tool-node-editor';
 import { MCPServerNodeEditor } from './nodes/mcp-node-editor';
 import { MCPSelector } from './nodes/mcp-selector/mcp-selector';
 import { SubAgentNodeEditor } from './nodes/sub-agent-node-editor';
+import { TeamAgentNodeEditor } from './nodes/team-agent-node-editor';
+import { TeamAgentSelector } from './nodes/team-agent-selector/team-agent-selector';
 
 interface SidePaneProps {
   selectedNodeId: string | null;
@@ -38,6 +45,7 @@ interface SidePaneProps {
   artifactComponentLookup: Record<string, ArtifactComponent>;
   agentToolConfigLookup: AgentToolConfigLookup;
   subAgentExternalAgentConfigLookup: SubAgentExternalAgentConfigLookup;
+  subAgentTeamAgentConfigLookup: SubAgentTeamAgentConfigLookup;
   credentialLookup: Record<string, Credential>;
 }
 
@@ -51,6 +59,7 @@ export function SidePane({
   artifactComponentLookup,
   agentToolConfigLookup,
   subAgentExternalAgentConfigLookup,
+  subAgentTeamAgentConfigLookup,
   credentialLookup,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
@@ -125,6 +134,18 @@ export function SidePane({
         case NodeType.ExternalAgentPlaceholder: {
           return <ExternalAgentSelector selectedNode={selectedNode as Node} />;
         }
+        case NodeType.TeamAgent: {
+          return (
+            <TeamAgentNodeEditor
+              selectedNode={selectedNode as Node<TeamAgentNodeData>}
+              subAgentTeamAgentConfigLookup={subAgentTeamAgentConfigLookup}
+              errorHelpers={errorHelpers}
+            />
+          );
+        }
+        case NodeType.TeamAgentPlaceholder: {
+          return <TeamAgentSelector selectedNode={selectedNode as Node} />;
+        }
         case NodeType.MCPPlaceholder: {
           return <MCPSelector selectedNode={selectedNode as Node} />;
         }
@@ -162,6 +183,7 @@ export function SidePane({
     agentToolConfigLookup,
     credentialLookup,
     subAgentExternalAgentConfigLookup,
+    subAgentTeamAgentConfigLookup,
   ]);
 
   const showBackButton = useMemo(() => {

package/src/components/api-keys/api-key-display.tsx

@@ -38,7 +38,7 @@ export function ApiKeyDisplay({ apiKey, open, onClose }: ApiKeyDisplayProps) {
         </AlertDialogHeader>
         {apiKey && (
           <div className="min-w-0">
-            <div className="space-y-6">
+            <div className="space-y-8">
               <div className="min-w-0">
                 <div className="flex items-center justify-between mb-2">
                   <div className="text-sm font-medium">API Key</div>

package/src/components/api-keys/form/api-key-form.tsx

@@ -95,7 +95,7 @@ export function ApiKeyForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <GenericInput
           control={form.control}
           name="name"

package/src/components/api-keys/form/api-key-update-form.tsx

@@ -122,7 +122,7 @@ export function ApiKeyUpdateForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <GenericInput
           control={form.control}
           name="name"

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -140,7 +140,7 @@ export function ArtifactComponentForm({
             </Button>
             {id && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Artifact
                 </Button>
               </DialogTrigger>

package/src/components/credentials/views/edit-credential-form.tsx

@@ -199,7 +199,7 @@ export function EditCredentialForm({
               </Button>
             )}
             <DialogTrigger asChild>
-              <Button type="button" variant="secondary">
+              <Button type="button" variant="destructive-outline">
                 Delete Credential
               </Button>
             </DialogTrigger>

package/src/components/credentials/views/generic-auth-form.tsx

@@ -113,7 +113,7 @@ export function GenericAuthForm({
 
   const renderField = (field: FieldConfig) => {
     const isPrivateKey = field.key === 'private_key';
-    const label = `${field.label}${field.required ? ' *' : ''}`;
+    const label = field.label;
 
     if (field.component === 'textarea') {
       return (
@@ -122,6 +122,7 @@ export function GenericAuthForm({
             control={form.control}
             name={field.key}
             label={label}
+            isRequired={field.required}
             placeholder={field.placeholder}
             className={isPrivateKey ? 'font-mono text-sm min-h-[120px]' : 'min-h-[80px]'}
           />
@@ -136,6 +137,7 @@ export function GenericAuthForm({
           control={form.control}
           name={field.key}
           label={label}
+          isRequired={field.required}
           type={field.type}
           placeholder={field.placeholder}
           disabled={loading}
@@ -146,7 +148,7 @@ export function GenericAuthForm({
   };
 
   const renderSection = (section: FormSection, index: number) => (
-    <div key={index} className="space-y-4">
+    <div key={index} className="space-y-8">
       {section.title && (
         <div>
           <h3 className="text-lg font-medium">{section.title}</h3>
@@ -155,7 +157,6 @@ export function GenericAuthForm({
           )}
         </div>
       )}
-
       {section.fields.map(renderField)}
     </div>
   );
@@ -175,10 +176,10 @@ export function GenericAuthForm({
       </div>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
           {formConfig.sections.map(renderSection)}
 
-          <div className="flex gap-3 pt-4">
+          <div className="flex gap-3">
             <Button type="submit" disabled={loading}>
               {loading ? 'Creating Credential...' : 'Create Credential'}
             </Button>

package/src/components/credentials/views/nango-providers-grid.tsx

@@ -15,10 +15,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 interface NangoProvidersGridProps {
   providers: ApiProvider[];
-  error: string | null;
 }
 
-export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps) {
+export function NangoProvidersGrid({ providers }: NangoProvidersGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const { tenantId, projectId } = useParams<{
     tenantId: string;
@@ -85,17 +84,6 @@ export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps
     return providersWithSearchText.filter((provider) => provider.searchText.includes(query));
   }, [providersWithSearchText, searchQuery]);
 
-  if (error) {
-    return (
-      <div className="text-center p-8">
-        <p className="text-destructive">{error}</p>
-        <Button variant="outline" onClick={() => window.location.reload()} className="mt-4">
-          Try Again
-        </Button>
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-6">
       {/* Search bar */}

package/src/components/data-components/form/data-component-form.tsx

@@ -159,7 +159,7 @@ export function DataComponentForm({
             </Button>
             {id && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Component
                 </Button>
               </DialogTrigger>

package/src/components/data-components/preview/component-preview-generator.tsx

@@ -16,6 +16,15 @@ import { Textarea } from '@/components/ui/textarea';
 import { updateDataComponent } from '@/lib/api/data-components';
 import { DynamicComponentRenderer } from './dynamic-component-renderer';
 
+const StyledTabsTrigger = (props: React.ComponentProps<typeof TabsTrigger>) => {
+  return (
+    <TabsTrigger
+      {...props}
+      className="bg-transparent data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none data-[state=active]:text-primary data-[state=active]:bg-transparent uppercase font-mono text-xs mt-0.5 pt-2"
+    />
+  );
+};
+
 interface ComponentPreviewGeneratorProps {
   tenantId: string;
   projectId: string;
@@ -166,15 +175,20 @@ export function ComponentPreviewGenerator({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">Component Preview</h3>
+        <div className="space-y-2">
+          <h3 className="text-md font-medium">Component Preview</h3>
           <p className="text-sm text-muted-foreground">
-            Generate a React/Tailwind component based on your schema
+            Generate a React/Tailwind component based on your schema.
           </p>
         </div>
         <div className="flex gap-2">
           {!hasPreview && (
-            <Button onClick={() => generatePreview()} disabled={isGenerating} className="gap-2">
+            <Button
+              onClick={() => generatePreview()}
+              disabled={isGenerating}
+              size="sm"
+              className="gap-2"
+            >
               {isGenerating ? (
                 <>
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -192,7 +206,12 @@ export function ComponentPreviewGenerator({
             <>
               <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
-                  <Button variant="outline" disabled={isDeleting || isGenerating} className="gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={isDeleting || isGenerating}
+                    className="gap-2 font-mono uppercase"
+                  >
                     {isGenerating ? (
                       <>
                         <Loader2 className="h-4 w-4 animate-spin" />
@@ -221,28 +240,27 @@ export function ComponentPreviewGenerator({
                         className="mt-2 min-h-[100px]"
                       />
                     </div>
-                    <div className="flex gap-2">
+                    <div className="flex justify-end gap-2">
                       <Button
                         size="sm"
-                        onClick={async () => {
+                        variant="outline"
+                        onClick={() => {
                           setIsPopoverOpen(false);
-                          await generatePreview(regenerateInstructions || undefined);
                           setRegenerateInstructions('');
                         }}
-                        disabled={isGenerating}
-                        className="flex-1"
                       >
-                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
+                        Cancel
                       </Button>
                       <Button
                         size="sm"
-                        variant="outline"
-                        onClick={() => {
+                        onClick={async () => {
                           setIsPopoverOpen(false);
+                          await generatePreview(regenerateInstructions || undefined);
                           setRegenerateInstructions('');
                         }}
+                        disabled={isGenerating}
                       >
-                        Cancel
+                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
                       </Button>
                     </div>
                   </div>
@@ -267,58 +285,57 @@ export function ComponentPreviewGenerator({
           )}
         </div>
       </div>
-
       {isGenerating && streamingCode && (
         <Streamdown
           isAnimating
           className="[&_[data-code-block-header=true]]:hidden [&_pre]:bg-muted/40!"
         >{`\`\`\`jsx\n${streamingCode}\`\`\``}</Streamdown>
       )}
-
       {isGenerating && !streamingCode && (
         <Card className="p-6">
-          <div className="flex flex-col items-center justify-center space-y-4">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <p className="text-sm text-muted-foreground">Generating component preview...</p>
+          <div className="flex flex-row items-center justify-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground/70">Generating component preview...</p>
           </div>
         </Card>
       )}
-
       {hasPreview && !isGenerating && isComplete && preview && (
-        <Tabs defaultValue="preview" className="w-full">
-          <TabsList>
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-            <TabsTrigger value="data">Sample Data</TabsTrigger>
-          </TabsList>
-          <TabsContent value="preview">
-            <Card className="p-6">
-              <DynamicComponentRenderer code={previewCode} props={previewData} />
-            </Card>
-          </TabsContent>
-          <TabsContent value="code">
-            <CodeEditor
-              value={previewCode}
-              onChange={(newCode) => {
-                if (!preview) return;
-                const updatedPreview = { ...preview, code: newCode };
-                setPreview(updatedPreview);
-                onPreviewChanged?.(updatedPreview);
-              }}
-              language="jsx"
-              className="max-h-[500px]"
-            />
-          </TabsContent>
-          <TabsContent value="data">
-            <JsonEditor
-              value={stringifiedData}
-              onChange={handleDataChange}
-              className="max-h-[500px]"
-            />
-          </TabsContent>
-        </Tabs>
-      )}
+        <Card className="px-2 py-4 pt-0">
+          <Tabs defaultValue="preview" className="w-full">
+            <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-2">
+              <StyledTabsTrigger value="preview">Preview</StyledTabsTrigger>
+              <StyledTabsTrigger value="code">Code</StyledTabsTrigger>
+              <StyledTabsTrigger value="data">Sample Data</StyledTabsTrigger>
+            </TabsList>
 
+            <TabsContent value="preview">
+              <div className="p-4">
+                <DynamicComponentRenderer code={previewCode} props={previewData} />
+              </div>
+            </TabsContent>
+            <TabsContent value="code">
+              <CodeEditor
+                value={previewCode}
+                onChange={(newCode) => {
+                  if (!preview) return;
+                  const updatedPreview = { ...preview, code: newCode };
+                  setPreview(updatedPreview);
+                  onPreviewChanged?.(updatedPreview);
+                }}
+                language="jsx"
+                className="max-h-[500px] border-0 shadow-none"
+              />
+            </TabsContent>
+            <TabsContent value="data">
+              <JsonEditor
+                value={stringifiedData}
+                onChange={handleDataChange}
+                className="max-h-[500px] border-0 shadow-none"
+              />
+            </TabsContent>
+          </Tabs>
+        </Card>
+      )}
       {!hasPreview && !isGenerating && !isComplete && (
         <InfoCard>
           <p className="text-sm text-muted-foreground">No preview generated</p>

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -272,7 +272,7 @@ export function MCPServerForm({
             </Button>
             {mode === 'update' && tool && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Server
                 </Button>
               </DialogTrigger>

package/src/components/ui/sidebar.tsx

@@ -356,7 +356,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent',
         className
       )}
       {...props}

package/src/features/agent/domain/deserialize.ts

@@ -1,4 +1,3 @@
-import { generateId } from '@/lib/utils/id-utils';
 import type { Edge, Node } from '@xyflow/react';
 import * as dagre from 'dagre';
 import { EdgeType } from '@/components/agent/configuration/edge-types';
@@ -9,9 +8,11 @@ import {
   functionToolNodeHandleId,
   mcpNodeHandleId,
   NodeType,
+  teamAgentNodeTargetHandleId,
 } from '@/components/agent/configuration/node-types';
 import type { FullAgentDefinition } from '@/lib/types/agent-full';
 import { formatJsonField } from '@/lib/utils';
+import { generateId } from '@/lib/utils/id-utils';
 
 interface TransformResult {
   nodes: Node[];
@@ -101,6 +102,7 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
   const nodes: Node[] = [];
   const edges: Edge[] = [];
   const createdExternalAgentNodes = new Set<string>();
+  const createdTeamAgentNodes = new Set<string>();
 
   const subAgentIds: string[] = Object.keys(data.subAgents);
   for (const subAgentId of subAgentIds) {
@@ -319,12 +321,14 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
       for (const targetSubAgent of sourceAgent.canDelegateTo) {
         let targetSubAgentId: string;
         let isTargetExternal: boolean;
+        let isTargetTeamAgent: boolean;
         let headers: Record<string, string> | undefined;
         let relationshipId: string | undefined;
 
         if (typeof targetSubAgent === 'object' && 'externalAgentId' in targetSubAgent) {
           targetSubAgentId = targetSubAgent.externalAgentId;
           isTargetExternal = true;
+          isTargetTeamAgent = false;
           headers = targetSubAgent.headers ?? undefined;
           relationshipId = targetSubAgent.subAgentExternalAgentRelationId;
 
@@ -370,12 +374,61 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
             },
           };
           edges.push(edge);
+        } else if (typeof targetSubAgent === 'object' && 'agentId' in targetSubAgent) {
+          // Handle team agent delegation
+          targetSubAgentId = targetSubAgent.agentId;
+          isTargetExternal = false;
+          isTargetTeamAgent = true;
+          headers = targetSubAgent.headers ?? undefined;
+          relationshipId = targetSubAgent.subAgentTeamAgentRelationId;
+
+          // Create team agent node if it doesn't exist
+          if (!createdTeamAgentNodes.has(targetSubAgentId)) {
+            const teamAgent = data.teamAgents?.[targetSubAgentId];
+            if (teamAgent) {
+              const teamAgentNode: Node = {
+                id: targetSubAgentId,
+                type: NodeType.TeamAgent,
+                position: { x: 0, y: 0 },
+                data: {
+                  id: targetSubAgentId,
+                  name: teamAgent.name,
+                  description: teamAgent.description,
+                  relationshipId,
+                  tempHeaders: headers,
+                },
+              };
+              nodes.push(teamAgentNode);
+              createdTeamAgentNodes.add(targetSubAgentId);
+            }
+          }
+
+          // Create edge from source agent to team agent
+          const edge: Edge = {
+            id: `edge-${sourceSubAgentId}-${targetSubAgentId}`,
+            type: EdgeType.A2ATeam, // Use same edge type as external agents
+            source: sourceSubAgentId,
+            sourceHandle: agentNodeSourceHandleId,
+            target: targetSubAgentId,
+            targetHandle: teamAgentNodeTargetHandleId,
+            selected: false,
+            data: {
+              relationships: {
+                transferTargetToSource: false,
+                transferSourceToTarget: false,
+                delegateTargetToSource: false,
+                delegateSourceToTarget: true,
+              },
+            },
+          };
+          edges.push(edge);
         } else {
           targetSubAgentId = targetSubAgent;
           isTargetExternal = false;
+          isTargetTeamAgent = false;
         }
 
-        if (!isTargetExternal && data.subAgents[targetSubAgentId]) {
+        if (!isTargetExternal && !isTargetTeamAgent && data.subAgents[targetSubAgentId]) {
           // Special handling for self-referencing edges
           const isSelfReference = sourceSubAgentId === targetSubAgentId;
           const pairKey = isSelfReference