@inkeep/agents-manage-ui 0.1.2 → 0.1.3

package/src/components/graph/graph.tsx

@@ -16,7 +16,7 @@ import {
 } from '@xyflow/react';
 import { nanoid } from 'nanoid';
 import { useParams, useRouter } from 'next/navigation';
-import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { commandManager } from '@/features/graph/commands/command-manager';
 import { AddNodeCommand, AddPreparedEdgeCommand } from '@/features/graph/commands/commands';
@@ -31,7 +31,6 @@ import { saveGraph } from '@/lib/services/save-graph';
 import type { FullGraphDefinition } from '@/lib/types/graph-full';
 import { formatJsonField } from '@/lib/utils';
 import { getErrorSummaryMessage, parseGraphValidationErrors } from '@/lib/utils/graph-error-parser';
-import { Playground } from './playground/playground';
 import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
 import type { ContextConfig } from './configuration/graph-types';
 import {
@@ -47,10 +46,10 @@ import { GraphErrorSummary } from './error-display/graph-error-summary';
 import { DefaultMarker } from './markers/default-marker';
 import { SelectedMarker } from './markers/selected-marker';
 import NodeLibrary from './node-library/node-library';
+import { Playground } from './playground/playground';
 import { SidePane } from './sidepane/sidepane';
 import { Toolbar } from './toolbar/toolbar';
 
-
 function getEdgeId(a: string, b: string) {
   const [low, high] = [a, b].sort();
   return `edge-${low}-${high}`;
@@ -76,7 +75,7 @@ function Flow({ graph, dataComponentLookup = {}, artifactComponentLookup = {} }:
         id: nanoid(),
         type: NodeType.Agent,
         position: { x: 0, y: 0 },
-        data: { name: 'Agent', isDefault: true },
+        data: { name: '', isDefault: true },
         deletable: false,
       },
     ],
@@ -179,25 +178,6 @@ function Flow({ graph, dataComponentLookup = {}, artifactComponentLookup = {} }:
     }
   }, []);
 
-  const generateUniqueName = useCallback(
-    (type: string) => {
-      if (type !== NodeType.Agent && type !== NodeType.ExternalAgent)
-        return newNodeDefaults[type as keyof typeof newNodeDefaults].name;
-
-      const agentNodes = nodes.filter(
-        (node) => node.type === NodeType.Agent || node.type === NodeType.ExternalAgent
-      );
-      const existingNames = new Set(agentNodes.map((node) => node.data.name));
-      let counter = 1;
-
-      while (existingNames.has(`Agent ${counter}`)) {
-        counter++;
-      }
-
-      return `Agent ${counter}`;
-    },
-    [nodes]
-  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to add/connect edges once
   const onConnectWrapped = useCallback((params: Connection) => {
@@ -280,14 +260,13 @@ function Flow({ graph, dataComponentLookup = {}, artifactComponentLookup = {} }:
         selected: true,
         data: {
           ...newNodeDefaults[nodeData.type as keyof typeof newNodeDefaults],
-          name: generateUniqueName(nodeData.type),
         },
       };
 
       clearSelection();
       commandManager.execute(new AddNodeCommand(newNode as Node));
     },
-    [screenToFlowPosition, generateUniqueName, clearSelection]
+    [screenToFlowPosition, clearSelection]
   );
 
   const onSelectionChange = useCallback(
@@ -401,7 +380,6 @@ function Flow({ graph, dataComponentLookup = {}, artifactComponentLookup = {} }:
       artifactComponentLookup
     );
 
-
     const res = await saveGraph(
       tenantId,
       projectId,

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

@@ -79,7 +79,7 @@ export function AgentNode(props: NodeProps & { data: AgentNodeData }) {
         <BaseNodeHeader className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">
             <Bot className="size-4 text-muted-foreground" />
-            <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
+            <BaseNodeHeaderTitle>{name || 'Agent'}</BaseNodeHeaderTitle>
           </div>
           {hasErrors && (
             <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />

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

@@ -30,7 +30,7 @@ export function ExternalAgentNode(props: NodeProps & { data: AgentNodeData }) {
         <BaseNodeHeader className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">
             <BotMessageSquare className="size-4 text-muted-foreground" />
-            <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
+            <BaseNodeHeaderTitle>{name || 'External agent'}</BaseNodeHeaderTitle>
           </div>
           {hasErrors && (
             <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />

package/src/components/graph/playground/chat-widget.tsx

@@ -1,10 +1,10 @@
 'use client';
-import { useRef, useEffect } from 'react';
 import { InkeepEmbeddedChat } from '@inkeep/cxkit-react-oss';
 import type { ComponentsConfig, InkeepCallbackEvent } from '@inkeep/cxkit-react-oss/types';
+import { nanoid } from 'nanoid';
+import { useEffect, useRef } from 'react';
 import { EXECUTION_API_BASE_URL } from '@/lib/api/api-config';
 import { IkpMessage as IkpMessageComponent } from './ikp-message';
-import { nanoid } from 'nanoid';
 
 interface ChatWidgetProps {
   graphId?: string;

package/src/components/graph/playground/ikp-message.tsx

@@ -15,7 +15,7 @@ import {
   Sparkles,
   Users,
 } from 'lucide-react';
-import { type FC, useEffect, useMemo, useState, useRef } from 'react';
+import { type FC, useEffect, useMemo, useRef, useState } from 'react';
 import supersub from 'remark-supersub';
 import { Streamdown } from 'streamdown';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -278,17 +278,17 @@ const OperationStep: FC<{ operation: any; isLast: boolean }> = ({ operation, isL
   const renderStructuredLabel = (operationType: string, context: any) => {
     // Convert snake_case to readable format
     const readableType = operationType.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
-    
+
     // Try to find the most meaningful fields to display
     const meaningfulFields = Object.entries(context).filter(
       ([key, value]) => typeof value === 'string' && value.length > 0 && value.length < 100
     );
-    
+
     if (meaningfulFields.length > 0) {
       const [firstKey, firstValue] = meaningfulFields[0];
       return `${readableType}: ${firstValue}`;
     }
-    
+
     return readableType;
   };
 
@@ -315,20 +315,20 @@ const OperationStep: FC<{ operation: any; isLast: boolean }> = ({ operation, isL
 
   return (
     <div className="relative">
-    <div className="flex items-center gap-2 relative">
-      {/* Connection line */}
-      {!isLast && (
-        <div className="absolute left-1.5 top-6 bottom-0 w-px bg-gray-200 dark:bg-border" />
-      )}
+      <div className="flex items-center gap-2 relative">
+        {/* Connection line */}
+        {!isLast && (
+          <div className="absolute left-1.5 top-6 bottom-0 w-px bg-gray-200 dark:bg-border" />
+        )}
 
-      {/* Step indicator */}
-      <div className={cn('flex items-center justify-center w-3 h-3 z-10', getStepColor())}>
-        {getStepIcon()}
-      </div>
+        {/* Step indicator */}
+        <div className={cn('flex items-center justify-center w-3 h-3 z-10', getStepColor())}>
+          {getStepIcon()}
+        </div>
+
+        {/* Step label */}
+        <span className={cn('text-xs font-medium', getStepColor())}>{getStepLabel()}</span>
 
-      {/* Step label */}
-      <span className={cn('text-xs font-medium', getStepColor())}>{getStepLabel()}</span>
-        
         {/* Expand button for structured operations */}
         {isStructuredOperation && Object.keys(ctx).length > 1 && (
           <button

package/src/components/graph/playground/playground.tsx

@@ -1,11 +1,11 @@
+import { ArrowLeft } from 'lucide-react';
+import { nanoid } from 'nanoid';
 import { useState } from 'react';
-import { ChatWidget } from './chat-widget';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
 import { TimelineWrapper } from '@/components/traces/timeline/timeline-wrapper';
-import { useChatActivitiesPolling } from '@/hooks/use-chat-activities-polling';
-import { nanoid } from 'nanoid';
 import { Button } from '@/components/ui/button';
-import { ArrowLeft } from 'lucide-react';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { useChatActivitiesPolling } from '@/hooks/use-chat-activities-polling';
+import { ChatWidget } from './chat-widget';
 
 interface PlaygroundProps {
   graphId: string;

package/src/components/graph/sidepane/metadata/metadata-editor.tsx

@@ -7,23 +7,24 @@ import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { CopyableSingleLineCode } from '@/components/ui/copyable-single-line-code';
+import {
+  getExecutionLimitInheritanceStatus,
+  getModelInheritanceStatus,
+  InheritanceIndicator,
+} from '@/components/ui/inheritance-indicator';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
-import {
-  InheritanceIndicator,
-  getModelInheritanceStatus,
-  getExecutionLimitInheritanceStatus,
-} from '@/components/ui/inheritance-indicator';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useGraphStore } from '@/features/graph/state/use-graph-store';
-import { EXECUTION_API_BASE_URL } from '@/lib/api/api-config';
 import { useProjectData } from '@/hooks/use-project-data';
+import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
+import { EXECUTION_API_BASE_URL } from '@/lib/api/api-config';
+import { ExpandableTextArea } from '../nodes/expandable-text-area';
+import { InputField, TextareaField } from '../nodes/form-fields';
 import { ModelSelector } from '../nodes/model-selector';
 import { ContextConfigForm } from './context-config';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { InputField, TextareaField } from '../nodes/form-fields';
-import { ExpandableTextArea } from '../nodes/expandable-text-area';
 
 function MetadataEditor() {
   const params = useParams();
@@ -46,6 +47,21 @@ function MetadataEditor() {
     [setMetadata, markUnsaved]
   );
 
+  const handleIdChange = useCallback(
+    (generatedId: string) => {
+      updateMetadata('id', generatedId);
+    },
+    [updateMetadata]
+  );
+
+  // Auto-prefill ID based on name field (only for new graphs)
+  useAutoPrefillIdZustand({
+    nameValue: name,
+    idValue: id,
+    onIdChange: handleIdChange,
+    isEditing: !!graphId,
+  });
+
   return (
     <div className="space-y-8">
       {graphId && (
@@ -66,6 +82,15 @@ function MetadataEditor() {
           <CopyableSingleLineCode code={graphUrl} />
         </div>
       )}
+      <InputField
+        id="name"
+        name="name"
+        label="Name"
+        value={name}
+        onChange={(e) => updateMetadata('name', e.target.value)}
+        placeholder="My graph"
+        isRequired
+      />
       <InputField
         id="id"
         name="id"
@@ -79,14 +104,6 @@ function MetadataEditor() {
             ? 'Choose a unique identifier for this graph. Using an existing id will replace that graph.'
             : undefined
         }
-      />
-      <InputField
-        id="name"
-        name="name"
-        label="Name"
-        value={name}
-        onChange={(e) => updateMetadata('name', e.target.value)}
-        placeholder="My graph"
         isRequired
       />
       <TextareaField

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

@@ -1,18 +1,19 @@
 import type { Node } from '@xyflow/react';
 import { useParams } from 'next/navigation';
 import { useCallback } from 'react';
+import {
+  getExecutionLimitInheritanceStatus,
+  InheritanceIndicator,
+} from '@/components/ui/inheritance-indicator';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
 import type { ErrorHelpers } from '@/hooks/use-graph-errors';
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import { useProjectData } from '@/hooks/use-project-data';
-import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  InheritanceIndicator,
-  getExecutionLimitInheritanceStatus,
-} from '@/components/ui/inheritance-indicator';
 import type { AgentNodeData } from '../../configuration/node-types';
 import { ComponentSelector } from './component-selector/component-selector';
 import { ExpandableTextArea } from './expandable-text-area';
@@ -53,8 +54,34 @@ export function AgentNodeEditor({
     [updateNestedPath, selectedNode.data]
   );
 
+  const handleIdChange = useCallback(
+    (generatedId: string) => {
+      updatePath('id', generatedId);
+    },
+    [updatePath]
+  );
+
+  // 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,
+  });
+
   return (
     <div className="space-y-8 flex flex-col">
+      <InputField
+        ref={(el) => setFieldRef('name', el)}
+        id="name"
+        name="name"
+        label="Name"
+        value={selectedNode.data.name || ''}
+        onChange={(e) => updatePath('name', e.target.value)}
+        placeholder="Support agent"
+        error={getFieldError('name')}
+        isRequired
+      />
       <InputField
         ref={(el) => setFieldRef('id', el)}
         id="id"
@@ -65,20 +92,8 @@ export function AgentNodeEditor({
         placeholder="my-agent"
         error={getFieldError('id')}
         description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
-      />
-
-      <InputField
-        ref={(el) => setFieldRef('name', el)}
-        id="name"
-        name="name"
-        label="Name"
-        value={selectedNode.data.name || ''}
-        onChange={(e) => updatePath('name', e.target.value)}
-        placeholder="Support agent"
-        error={getFieldError('name')}
         isRequired
       />
-
       <TextareaField
         ref={(el) => setFieldRef('description', el)}
         id="description"

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

@@ -3,6 +3,8 @@ import type { ErrorHelpers } from '@/hooks/use-graph-errors';
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
 import { InputField, TextareaField } from './form-fields';
+import { useCallback } from 'react';
+import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 
 interface ExternalAgentNodeEditorProps {
   selectedNode: Node<ExternalAgentNodeData>;
@@ -18,6 +20,23 @@ export function ExternalAgentNodeEditor({
     errorHelpers,
   });
 
+  const handleIdChange = useCallback(
+    (generatedId: string) => {
+      handleInputChange({
+        target: { name: 'id', value: generatedId },
+      } as React.ChangeEvent<HTMLInputElement>);
+    },
+    [handleInputChange]
+  );
+
+  // 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,
+  });
+
   return (
     <div className="space-y-8 flex flex-col">
       <p className="text-sm text-muted-foreground">
@@ -26,6 +45,17 @@ export function ExternalAgentNodeEditor({
         within the agent framework or to third-party services.
       </p>
 
+      <InputField
+        ref={(el) => setFieldRef('name', el)}
+        id="name"
+        name="name"
+        label="Name"
+        value={selectedNode.data.name || ''}
+        onChange={handleInputChange}
+        placeholder="Support agent"
+        error={getFieldError('name')}
+      />
+
       <InputField
         ref={(el) => setFieldRef('id', el)}
         id="id"
@@ -36,17 +66,7 @@ export function ExternalAgentNodeEditor({
         placeholder="my-external-agent"
         error={getFieldError('id')}
         description="Choose a unique identifier for this agent. Using an existing id will replace that agent."
-      />
-
-      <InputField
-        ref={(el) => setFieldRef('name', el)}
-        id="name"
-        name="name"
-        label="Name"
-        value={selectedNode.data.name || ''}
-        onChange={handleInputChange}
-        placeholder="Support agent"
-        error={getFieldError('name')}
+        isRequired
       />
 
       <TextareaField

package/src/components/graph/sidepane/nodes/mcp-node-editor.tsx

@@ -1,10 +1,9 @@
 import { type Node, useReactFlow } from '@xyflow/react';
-import { ExternalLink } from 'lucide-react';
-import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { getActiveTools } from '@/app/utils/active-tools';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Badge } from '@/components/ui/badge';
+import { ExternalLink } from '@/components/ui/external-link';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -126,15 +125,11 @@ export function MCPServerNodeEditor({ selectedNode }: MCPServerNodeEditorProps)
         )}
       </div>
 
-      <Link
+      <ExternalLink
         href={`/${tenantId}/projects/${projectId}/mcp-servers/${selectedNode.data.id}/edit`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        <ExternalLink className="w-3 h-3" />
-        Click here to edit
-      </Link>
+        Edit MCP Server
+      </ExternalLink>
     </div>
   );
 }

package/src/components/graph/sidepane/nodes/model-section.tsx

@@ -4,8 +4,8 @@ import type { AgentNodeData } from '@/components/graph/configuration/node-types'
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import {
-  InheritanceIndicator,
   getModelInheritanceStatus,
+  InheritanceIndicator,
 } from '@/components/ui/inheritance-indicator';
 import { ModelSelector } from './model-selector';
 

package/src/components/graph/toolbar/toolbar.tsx

@@ -1,4 +1,4 @@
-import { Settings, Play } from 'lucide-react';
+import { Play, Settings } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useGraphStore } from '@/features/graph/state/use-graph-store';

package/src/components/mcp-servers/form/active-tools-selector.tsx

@@ -104,8 +104,10 @@ export function ActiveToolsSelector<
         return availableTools.some((tool) => tool.name === toolName);
       case 'selective':
         // Only return true if tool is selected AND still exists in availableTools
-        return safeToolsConfig.tools.includes(toolName) && 
-               availableTools.some((tool) => tool.name === toolName);
+        return (
+          safeToolsConfig.tools.includes(toolName) &&
+          availableTools.some((tool) => tool.name === toolName)
+        );
       default:
         return false;
     }

package/src/components/projects/form/project-form.tsx

@@ -9,11 +9,12 @@ import { GenericTextarea } from '@/components/form/generic-textarea';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
+import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import { createProjectAction, updateProjectAction } from '@/lib/actions/projects';
 import { defaultValues } from './form-configuration';
-import { type ProjectFormData, projectSchema } from './validation';
 import { ProjectModelsSection } from './project-models-section';
 import { ProjectStopWhenSection } from './project-stopwhen-section';
+import { type ProjectFormData, projectSchema } from './validation';
 
 interface ProjectFormProps {
   tenantId: string;
@@ -38,6 +39,14 @@ export function ProjectForm({
   const { isSubmitting } = form.formState;
   const router = useRouter();
 
+  // Auto-prefill ID based on name field (only for new components)
+  useAutoPrefillId({
+    form,
+    nameField: 'name',
+    idField: 'id',
+    isEditing: !!projectId,
+  });
+
   const onSubmit = async (data: ProjectFormData) => {
     try {
       if (projectId) {
@@ -75,6 +84,14 @@ export function ProjectForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Project Name"
+          placeholder="My Project"
+          description="A friendly name for your project"
+          isRequired
+        />
         <GenericInput
           control={form.control}
           name="id"
@@ -84,14 +101,6 @@ export function ProjectForm({
           disabled={!!projectId}
           isRequired
         />
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Project Name"
-          placeholder="My Project"
-          description="A friendly name for your project"
-          isRequired
-        />
         <GenericTextarea
           control={form.control}
           name="description"