@inkeep/agents-manage-ui 0.1.1 → 0.1.3

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;
@@ -25,9 +25,11 @@ export const Playground = ({
   const {
     chatActivities,
     isPolling,
-    error: _error,
+    error,
     startPolling,
     stopPolling,
+    retryConnection,
+    refreshOnce,
   } = useChatActivitiesPolling({
     conversationId,
   });
@@ -58,6 +60,10 @@ export const Playground = ({
             isPolling={isPolling}
             conversation={chatActivities}
             enableAutoScroll={true}
+            error={error}
+            retryConnection={retryConnection}
+            refreshOnce={refreshOnce}
+            showConversationTracesLink={true}
           />
         </ResizablePanelGroup>
       </div>

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

@@ -2,26 +2,29 @@
 
 import { ChevronRight, Info } from 'lucide-react';
 import { useParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 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';
 
 function MetadataEditor() {
   const params = useParams();
@@ -44,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 && (
@@ -64,45 +82,44 @@ 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"
+        label="Id"
+        value={id || ''}
+        onChange={(e) => updateMetadata('id', e.target.value)}
+        disabled={!!graphId} // only editable if no graphId is set (i.e. new graph)
+        placeholder="my-graph"
+        description={
+          !graphId
+            ? 'Choose a unique identifier for this graph. Using an existing id will replace that graph.'
+            : undefined
+        }
+        isRequired
+      />
+      <TextareaField
+        id="description"
+        name="description"
+        label="Description"
+        value={description}
+        onChange={(e) => updateMetadata('description', e.target.value)}
+        placeholder="This graph is used to..."
+        className="max-h-96"
+      />
       <div className="space-y-2">
-        <Label htmlFor="id">Id</Label>
-        <Input
-          id="id"
-          value={id || ''}
-          onChange={(e) => updateMetadata('id', e.target.value)}
-          disabled={!!graphId} // only editable if no graphId is set (i.e. new graph)
-          placeholder="my-graph"
-        />
-        {!graphId && (
-          <p className="text-sm text-muted-foreground">
-            Choose a unique identifier for this graph. Using an existing id will replace that graph.
-          </p>
-        )}
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="name">Name</Label>
-        <Input
-          id="name"
-          value={name}
-          onChange={(e) => updateMetadata('name', e.target.value)}
-          placeholder="My graph"
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="description">Description</Label>
-        <Textarea
-          id="description"
-          value={description}
-          onChange={(e) => updateMetadata('description', e.target.value)}
-          placeholder="This graph is used to..."
-          className="max-h-96"
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="graph-prompt">Graph Prompt</Label>
-        <Textarea
+        <ExpandableTextArea
           id="graph-prompt"
+          name="graph-prompt"
+          label="Graph Prompt"
           value={graphPrompt || ''}
           onChange={(e) => updateMetadata('graphPrompt', e.target.value)}
           placeholder="System-level instructions for this graph..."

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';
@@ -35,7 +36,7 @@ export function AgentNodeEditor({
   const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
   const selectedDataComponents = selectedNode.data?.dataComponents || [];
   const selectedArtifactComponents = selectedNode.data?.artifactComponents || [];
-  
+
   // Get project and graph data for inheritance indicators
   const { project } = useProjectData();
   const metadata = useGraphStore((state) => state.metadata);
@@ -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,19 +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."
+        isRequired
       />
-
-      <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')}
-      />
-
       <TextareaField
         ref={(el) => setFieldRef('description', el)}
         id="description"
@@ -100,14 +116,15 @@ export function AgentNodeEditor({
           data-invalid={errorHelpers?.hasFieldError('prompt') ? '' : undefined}
           className="w-full max-h-96 data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300"
           label="Prompt"
+          isRequired
         />
         {getFieldError('prompt') && (
           <p className="text-sm text-red-600">{getFieldError('prompt')}</p>
         )}
       </div>
 
-      <ModelSection 
-        models={selectedNode.data.models} 
+      <ModelSection
+        models={selectedNode.data.models}
         updatePath={updateModelPath}
         projectModels={project?.models}
         graphModels={metadata?.models}
@@ -156,12 +173,24 @@ export function AgentNodeEditor({
         </div>
 
         <div className="text-xs text-muted-foreground p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md border border-blue-200 dark:border-blue-800">
-          <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">How execution limit inheritance works:</p>
+          <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+            How execution limit inheritance works:
+          </p>
           <ul className="space-y-1 text-blue-800 dark:text-blue-200">
-            <li>• <strong>stepCountIs</strong>: Project → Agent only (agent-level execution limit)</li>
-            <li>• <strong>Explicit settings</strong> always take precedence over inherited values</li>
-            <li>• <strong>Agent scope</strong>: This limit applies only to this specific agent's execution steps</li>
-            <li>• <strong>Independent from transfers</strong>: Steps are counted per agent, transfers are counted per conversation</li>
+            <li>
+              • <strong>stepCountIs</strong>: Project → Agent only (agent-level execution limit)
+            </li>
+            <li>
+              • <strong>Explicit settings</strong> always take precedence over inherited values
+            </li>
+            <li>
+              • <strong>Agent scope</strong>: This limit applies only to this specific agent's
+              execution steps
+            </li>
+            <li>
+              • <strong>Independent from transfers</strong>: Steps are counted per agent, transfers
+              are counted per conversation
+            </li>
           </ul>
         </div>
       </div>

package/src/components/graph/sidepane/nodes/expandable-text-area.tsx

@@ -17,12 +17,14 @@ function ExpandedTextArea({ ...props }) {
 
 export function ExpandableTextArea({
   label,
+  isRequired = false,
   ...props
-}: { label: string } & React.ComponentProps<typeof Textarea>) {
+}: { label: string; isRequired?: boolean } & React.ComponentProps<typeof Textarea>) {
   return (
     <ExpandableField
       name={props.id || 'expandable-textarea'}
       label={label}
+      isRequired={isRequired}
       compactView={<Textarea {...props} />}
       expandedView={<ExpandedTextArea {...props} />}
     />

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/form-fields.tsx

@@ -4,6 +4,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 
 interface BaseFieldProps {
   id: string;
@@ -16,6 +17,8 @@ interface BaseFieldProps {
   className?: string;
   description?: string;
   tooltip?: string;
+  isRequired?: boolean;
+  disabled?: boolean;
 }
 
 interface InputFieldProps extends BaseFieldProps {
@@ -40,13 +43,16 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
       description,
       tooltip,
       type = 'text',
+      isRequired = false,
+      disabled = false,
     },
     ref
   ) => {
     return (
       <div className="space-y-2">
-        <Label htmlFor={id} className={error ? 'text-red-600' : ''}>
+        <Label htmlFor={id} className={cn(error ? 'text-red-600' : '', 'gap-1')}>
           {label}
+          {isRequired && <span className="text-red-500">*</span>}
           {tooltip && (
             <Tooltip>
               <TooltipTrigger>
@@ -66,6 +72,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
           placeholder={placeholder}
           data-invalid={error ? '' : undefined}
           className={`w-full data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300 ${className}`}
+          disabled={disabled}
         />
         {error && <p className="text-sm text-red-600">{error}</p>}
         {description && <p className="text-sm text-muted-foreground">{description}</p>}
@@ -89,6 +96,7 @@ export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>
       className = '',
       description,
       maxHeight = 'max-h-96',
+      disabled = false,
     },
     ref
   ) => {
@@ -106,6 +114,7 @@ export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>
           placeholder={placeholder}
           data-invalid={error ? '' : undefined}
           className={`w-full ${maxHeight} data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300 ${className}`}
+          disabled={disabled}
         />
         {error && <p className="text-sm text-red-600">{error}</p>}
         {description && <p className="text-sm text-muted-foreground">{description}</p>}

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/mcp-servers/form/mcp-server-form.tsx

@@ -105,12 +105,19 @@ export function MCPServerForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <GenericInput control={form.control} name="name" label="Name" placeholder="MCP Server" />
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Name"
+          placeholder="MCP Server"
+          isRequired
+        />
         <GenericInput
           control={form.control}
           name="config.mcp.server.url"
           label="URL"
           placeholder="https://api.example.com/mcp"
+          isRequired
         />
         <GenericSelect
           control={form.control}

package/src/components/mcp-servers/form/validation.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 // Discriminated union for tool selection
 const toolsConfigSchema = z.discriminatedUnion('type', [

package/src/components/projects/edit-project-dialog.tsx

@@ -33,7 +33,7 @@ export function EditProjectDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="!max-w-2xl">
         <DialogHeader>
           <DialogTitle>Edit project</DialogTitle>
           <DialogDescription className="sr-only">Edit project details.</DialogDescription>