@inkeep/agents-manage-ui 0.1.1 → 0.1.3

package/src/app/api/signoz/route.ts

@@ -1,14 +1,13 @@
-import { type NextRequest, NextResponse } from 'next/server';
-import { z } from 'zod';
 import axios from 'axios';
 import axiosRetry from 'axios-retry';
+import { type NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod/v4';
 import { getLogger } from '@/lib/logger';
 
-
 // Configure axios retry
-axiosRetry(axios, { 
+axiosRetry(axios, {
   retries: 3,
-  retryDelay: axiosRetry.exponentialDelay 
+  retryDelay: axiosRetry.exponentialDelay,
 });
 
 const SIGNOZ_URL = process.env.SIGNOZ_URL || 'http://localhost:3080';
@@ -96,7 +95,10 @@ export async function POST(request: NextRequest) {
 
     return NextResponse.json(data);
   } catch (error) {
-    logger.error({ error, stack: error instanceof Error ? error.stack : undefined }, 'Error proxying to SigNoz');
+    logger.error(
+      { error, stack: error instanceof Error ? error.stack : undefined },
+      'Error proxying to SigNoz'
+    );
     return NextResponse.json(
       {
         error: 'Failed to connect to SigNoz',

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

@@ -100,6 +100,7 @@ export function ApiKeyForm({
           placeholder="Select expiration date"
           options={EXPIRATION_DATE_OPTIONS}
           selectTriggerClassName="w-full"
+          isRequired
         />
         <GenericComboBox
           control={form.control}
@@ -108,6 +109,7 @@ export function ApiKeyForm({
           options={graphsOptions}
           placeholder="Select a graph"
           searchPlaceholder="Search graphs..."
+          isRequired
         />
         <div className="flex justify-end">
           <Button type="submit" disabled={isSubmitting}>

package/src/components/api-keys/form/validation.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 export const EXPIRATION_DATE_OPTIONS = [
   { value: '1d', label: '1 day' },

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

@@ -9,6 +9,7 @@ import { GenericTextarea } from '@/components/form/generic-textarea';
 import { JsonSchemaInput } from '@/components/form/json-schema-input';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
+import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import {
   createArtifactComponentAction,
   updateArtifactComponentAction,
@@ -52,6 +53,14 @@ export function ArtifactComponentForm({
   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: !!id,
+  });
+
   const onSubmit = async (data: ArtifactComponentFormData) => {
     try {
       const payload = { ...data } as ArtifactComponent;
@@ -81,42 +90,47 @@ export function ArtifactComponentForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Name"
+          placeholder="Document Artifact"
+          isRequired
+        />
         <GenericInput
           control={form.control}
           name="id"
           label="Id"
           placeholder="my-artifact-component"
           disabled={!!id}
+          isRequired
           description={
             id
               ? ''
               : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
           }
         />
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Name"
-          placeholder="Document Artifact"
-        />
         <GenericTextarea
           control={form.control}
           name="description"
           label="Description"
           placeholder="Structured factual information extracted from search results"
           className="min-h-[80px]"
+          isRequired
         />
         <JsonSchemaInput
           control={form.control}
           name="summaryProps"
           label="Summary props (JSON Schema)"
           placeholder="Enter a valid JSON Schema..."
+          isRequired
         />
         <JsonSchemaInput
           control={form.control}
           name="fullProps"
           label="Full props (JSON Schema)"
           placeholder="Enter a valid JSON Schema..."
+          isRequired
         />
         <Button type="submit" disabled={isSubmitting}>
           Save

package/src/components/artifact-components/form/validation.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import { getJsonParseError, validateJsonSchemaForLlm } from '@/lib/json-schema-validation';
 import { idSchema } from '@/lib/validation';
 
@@ -35,8 +35,8 @@ export const artifactComponentSchema = z.object({
   id: idSchema,
   name: z.string().min(1, 'Name is required.'),
   description: z.string().min(1, 'Description is required.'),
-  summaryProps: jsonSchemaValidation('Summary props'),
-  fullProps: jsonSchemaValidation('Full props'),
+  summaryProps: jsonSchemaValidation('Summary props').optional(),
+  fullProps: jsonSchemaValidation('Full props').optional(),
 });
 
 export type ArtifactComponentFormData = z.infer<typeof artifactComponentSchema>;

package/src/components/credentials/views/credential-form-validation.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 export const credentialFormSchema = z.object({
   name: z

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

@@ -115,6 +115,7 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
             name="name"
             label="Name"
             placeholder="e.g., production-api-key"
+            isRequired
           />
 
           <div className="space-y-3">
@@ -123,6 +124,7 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
               name="apiKeyToSet"
               label="API Key"
               placeholder="e.g., sk-1234567890abcdef1234567890abcdef"
+              isRequired
             />
             <div className="text-xs text-muted-foreground p-3 bg-muted/30 rounded-md">
               <p className="mb-2">

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

@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import { CredentialToolsList } from '@/components/credentials/credential-tools-list';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericKeyValueInput } from '@/components/form/generic-key-value-input';

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

@@ -3,7 +3,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { ApiProvider } from '@nangohq/types';
 import { useForm } from 'react-hook-form';
-import * as z from 'zod';
+import * as z from 'zod/v4';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericTextarea } from '@/components/form/generic-textarea';
 import { ProviderIcon } from '@/components/icons/provider-icon';

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

@@ -9,6 +9,7 @@ import { GenericTextarea } from '@/components/form/generic-textarea';
 import { JsonSchemaInput } from '@/components/form/json-schema-input';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
+import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import {
   createDataComponentAction,
   updateDataComponentAction,
@@ -49,6 +50,14 @@ export function DataComponentForm({
   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: !!id,
+    });
+
   const onSubmit = async (data: DataComponentFormData) => {
     try {
       const payload = { ...data } as DataComponent;
@@ -78,6 +87,13 @@ export function DataComponentForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Name"
+          placeholder="List orders"
+          isRequired
+        />
         <GenericInput
           control={form.control}
           name="id"
@@ -89,20 +105,22 @@ export function DataComponentForm({
               ? ''
               : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
           }
+          isRequired
         />
-        <GenericInput control={form.control} name="name" label="Name" placeholder="List orders" />
         <GenericTextarea
           control={form.control}
           name="description"
           label="Description"
           placeholder="Display a list of user orders with interactive options"
           className="min-h-[80px]"
+          isRequired
         />
         <JsonSchemaInput
           control={form.control}
           name="props"
           label="Props (JSON Schema)"
           placeholder="Enter a valid JSON Schema..."
+          isRequired
         />
         <Button type="submit" disabled={isSubmitting}>
           Save

package/src/components/data-components/form/validation.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import { getJsonParseError, validateJsonSchemaForLlm } from '@/lib/json-schema-validation';
 import { idSchema } from '@/lib/validation';
 
@@ -32,7 +32,8 @@ export const dataComponentSchema = z.object({
         });
         return z.NEVER;
       }
-    }),
+    })
+    .optional(),
 });
 
 export type DataComponentFormData = z.infer<typeof dataComponentSchema>;

package/src/components/form/expandable-field.tsx

@@ -20,6 +20,7 @@ interface ExpandableFieldProps {
   expandedView: ReactNode;
   actions?: ReactNode;
   expandButtonLabel?: string;
+  isRequired?: boolean;
 }
 
 export function ExpandableField({
@@ -30,13 +31,17 @@ export function ExpandableField({
   expandedView,
   actions,
   expandButtonLabel = 'Expand to full screen',
+  isRequired = false,
 }: ExpandableFieldProps) {
   return (
     <Dialog>
       <div className={className}>
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <Label htmlFor={name}>{label}</Label>
+            <Label className="gap-1" htmlFor={name}>
+              {label}
+              {isRequired && <span className="text-red-500">*</span>}
+            </Label>
             {actions && <div className="flex gap-2">{actions}</div>}
           </div>
           <div className="relative">

package/src/components/form/form-field-wrapper.tsx

@@ -19,6 +19,7 @@ interface FormFieldWrapperProps<T extends FieldValues> {
   children: (field: FieldValues) => React.ReactNode;
   description?: string;
   rules?: RegisterOptions<T, FieldPath<T>>;
+  isRequired?: boolean;
 }
 
 export function FormFieldWrapper<T extends FieldValues>({
@@ -28,6 +29,7 @@ export function FormFieldWrapper<T extends FieldValues>({
   children,
   description,
   rules,
+  isRequired,
 }: FormFieldWrapperProps<T>) {
   return (
     <FormField
@@ -36,7 +38,7 @@ export function FormFieldWrapper<T extends FieldValues>({
       rules={rules}
       render={({ field }) => (
         <FormItem className="relative">
-          <FormLabel>{label}</FormLabel>
+          <FormLabel isRequired={isRequired}>{label}</FormLabel>
           <FormControl>{children(field)}</FormControl>
           {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />

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/configuration/node-types.tsx

@@ -1,6 +1,4 @@
-import type { Node } from '@xyflow/react';
 import { Bot, BotMessageSquare, Hammer } from 'lucide-react';
-import { nanoid } from 'nanoid';
 import type { MCPTool } from '@/lib/api/tools';
 import { AgentNode } from '../nodes/agent-node';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
@@ -58,10 +56,10 @@ export const externalAgentNodeTargetHandleId = 'target-external-agent';
 
 export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   [NodeType.Agent]: {
-    name: 'Agent',
+    name: '',
   },
   [NodeType.ExternalAgent]: {
-    name: 'External agent',
+    name: '',
   },
   [NodeType.MCP]: {
     name: 'MCP',

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,9 +1,10 @@
 'use client';
 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;
@@ -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>