@inkeep/agents-manage-ui 0.1.1 → 0.1.2

package/src/components/form/generic-combo-box.tsx

@@ -25,6 +25,7 @@ interface GenericComboBoxProps<T extends FieldValues> {
   searchPlaceholder?: string;
   placeholder?: string;
   disabled?: boolean;
+  isRequired?: boolean;
 }
 
 export function GenericComboBox<T extends FieldValues>({
@@ -35,11 +36,12 @@ export function GenericComboBox<T extends FieldValues>({
   searchPlaceholder = 'Search...',
   placeholder,
   disabled = false,
+  isRequired = false,
 }: GenericComboBoxProps<T>) {
   const [open, setOpen] = useState(false);
 
   return (
-    <FormFieldWrapper control={control} name={name} label={label}>
+    <FormFieldWrapper control={control} name={name} label={label} isRequired={isRequired}>
       {(field) => (
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>

package/src/components/form/generic-input.tsx

@@ -13,6 +13,7 @@ interface GenericInputProps<T extends FieldValues> {
   min?: string;
   disabled?: boolean;
   description?: string;
+  isRequired?: boolean;
 }
 
 export function GenericInput<T extends FieldValues>({
@@ -24,9 +25,16 @@ export function GenericInput<T extends FieldValues>({
   min,
   disabled,
   description,
+  isRequired = false,
 }: GenericInputProps<T>) {
   return (
-    <FormFieldWrapper control={control} name={name} label={label} description={description}>
+    <FormFieldWrapper
+      control={control}
+      name={name}
+      label={label}
+      description={description}
+      isRequired={isRequired}
+    >
       {(field) => (
         <Input
           type={type}

package/src/components/form/generic-select.tsx

@@ -24,6 +24,7 @@ interface GenericSelectProps<T extends FieldValues> {
   options: SelectOption[];
   disabled?: boolean;
   selectTriggerClassName?: string;
+  isRequired?: boolean;
 }
 
 export function GenericSelect<T extends FieldValues>({
@@ -34,9 +35,10 @@ export function GenericSelect<T extends FieldValues>({
   options,
   disabled = false,
   selectTriggerClassName,
+  isRequired = false,
 }: GenericSelectProps<T>) {
   return (
-    <FormFieldWrapper control={control} name={name} label={label}>
+    <FormFieldWrapper control={control} name={name} label={label} isRequired={isRequired}>
       {(field) => (
         <Select onValueChange={field.onChange} defaultValue={field.value} disabled={disabled}>
           <SelectTrigger disabled={disabled} className={selectTriggerClassName}>

package/src/components/form/generic-textarea.tsx

@@ -12,6 +12,7 @@ interface GenericTextareaProps<T extends FieldValues> {
   className?: string;
   disabled?: boolean;
   readOnly?: boolean;
+  isRequired?: boolean;
 }
 
 export function GenericTextarea<T extends FieldValues>({
@@ -22,9 +23,10 @@ export function GenericTextarea<T extends FieldValues>({
   className,
   disabled,
   readOnly,
+  isRequired = false,
 }: GenericTextareaProps<T>) {
   return (
-    <FormFieldWrapper control={control} name={name} label={label}>
+    <FormFieldWrapper control={control} name={name} label={label} isRequired={isRequired}>
       {(field) => (
         <Textarea
           placeholder={placeholder}

package/src/components/form/json-schema-input.tsx

@@ -12,6 +12,7 @@ interface JsonSchemaInputProps<T extends FieldValues> {
   disabled?: boolean;
   description?: string;
   readOnly?: boolean;
+  isRequired?: boolean;
 }
 
 export function JsonSchemaInput<T extends FieldValues>({
@@ -22,9 +23,16 @@ export function JsonSchemaInput<T extends FieldValues>({
   disabled,
   description,
   readOnly,
+  isRequired = false,
 }: JsonSchemaInputProps<T>) {
   return (
-    <FormFieldWrapper control={control} name={name} label={label} description={description}>
+    <FormFieldWrapper
+      control={control}
+      name={name}
+      label={label}
+      description={description}
+      isRequired={isRequired}
+    >
       {(field) => (
         <StandaloneJsonEditor
           placeholder={placeholder}

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

@@ -1,4 +1,5 @@
 '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 { EXECUTION_API_BASE_URL } from '@/lib/api/api-config';
@@ -107,16 +108,44 @@ export function ChatWidget({
   startPolling,
   stopPolling,
 }: ChatWidgetProps) {
+  const stopPollingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (stopPollingTimeoutRef.current) {
+        clearTimeout(stopPollingTimeoutRef.current);
+        stopPollingTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <div className="h-full flex flex-row gap-4">
       <div className="flex-1 min-w-0 h-full">
         <InkeepEmbeddedChat
           baseSettings={{
             onEvent: (event: InkeepCallbackEvent) => {
+              if (event.eventName === 'assistant_message_received') {
+                // Add a delay before stopping polling to allow activity data to be available
+                stopPollingTimeoutRef.current = setTimeout(() => {
+                  stopPolling();
+                  stopPollingTimeoutRef.current = null;
+                }, 5000);
+              }
               if (event.eventName === 'user_message_submitted') {
+                // Cancel any pending stop polling timeout since we need to keep polling
+                if (stopPollingTimeoutRef.current) {
+                  clearTimeout(stopPollingTimeoutRef.current);
+                  stopPollingTimeoutRef.current = null;
+                }
                 startPolling();
               }
               if (event.eventName === 'chat_clear_button_clicked') {
+                // Cancel any pending stop polling timeout
+                if (stopPollingTimeoutRef.current) {
+                  clearTimeout(stopPollingTimeoutRef.current);
+                  stopPollingTimeoutRef.current = null;
+                }
                 stopPolling();
                 setConversationId(nanoid());
               }
@@ -171,7 +200,7 @@ export function ChatWidget({
             components: {
               IkpMessage,
             },
-            introMessage: 'Hi!'
+            introMessage: 'Hi!',
           }}
         />
       </div>

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

@@ -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,7 +2,7 @@
 
 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';
@@ -22,6 +22,8 @@ import { useProjectData } from '@/hooks/use-project-data';
 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();
@@ -64,45 +66,43 @@ function MetadataEditor() {
           <CopyableSingleLineCode code={graphUrl} />
         </div>
       )}
+      <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
+        }
+      />
+      <InputField
+        id="name"
+        name="name"
+        label="Name"
+        value={name}
+        onChange={(e) => updateMetadata('name', e.target.value)}
+        placeholder="My graph"
+        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

@@ -35,7 +35,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);
@@ -76,6 +76,7 @@ export function AgentNodeEditor({
         onChange={(e) => updatePath('name', e.target.value)}
         placeholder="Support agent"
         error={getFieldError('name')}
+        isRequired
       />
 
       <TextareaField
@@ -100,14 +101,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 +158,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/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/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>

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

@@ -82,6 +82,7 @@ export function ProjectForm({
           placeholder="my-project"
           description="Choose a unique identifier for this project. This cannot be changed later."
           disabled={!!projectId}
+          isRequired
         />
         <GenericInput
           control={form.control}
@@ -89,6 +90,7 @@ export function ProjectForm({
           label="Project Name"
           placeholder="My Project"
           description="A friendly name for your project"
+          isRequired
         />
         <GenericTextarea
           control={form.control}
@@ -96,6 +98,7 @@ export function ProjectForm({
           label="Description"
           placeholder="Describe what this project is for..."
           className="min-h-[100px]"
+          isRequired
         />
 
         <Separator />

package/src/components/projects/form/validation.ts

@@ -1,20 +1,24 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 const modelSettingsSchema = z.object({
   model: z.string().optional(), // Allow empty model - system will fall back to defaults
   providerOptions: z.record(z.string(), z.any()).optional(),
 });
 
-const projectModelsSchema = z.object({
-  base: modelSettingsSchema.optional(),
-  structuredOutput: modelSettingsSchema.optional(),
-  summarizer: modelSettingsSchema.optional(),
-}).optional();
+const projectModelsSchema = z
+  .object({
+    base: modelSettingsSchema.optional(),
+    structuredOutput: modelSettingsSchema.optional(),
+    summarizer: modelSettingsSchema.optional(),
+  })
+  .optional();
 
-const projectStopWhenSchema = z.object({
-  transferCountIs: z.number().min(1).max(100).optional(),
-  stepCountIs: z.number().min(1).max(1000).optional(),
-}).optional();
+const projectStopWhenSchema = z
+  .object({
+    transferCountIs: z.number().min(1).max(100).optional(),
+    stepCountIs: z.number().min(1).max(1000).optional(),
+  })
+  .optional();
 
 export const projectSchema = z.object({
   id: z

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

@@ -52,7 +52,7 @@ export function NewProjectDialog({
           )}
         </DialogTrigger>
       )}
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="!max-w-2xl">
         <DialogTitle>Create new project</DialogTitle>
         <DialogDescription>
           Create a new project to organize your agents, tools, and resources.