@inkeep/agents-manage-ui 0.33.1 → 0.34.0

package/src/components/agent/edges/agent-to-agent-edge.tsx

@@ -1,10 +1,11 @@
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react';
 import { ArrowRight, ArrowRightLeft } from 'lucide-react';
 import { AnimatedCircle } from '@/components/agent/edges/default-edge';
-import type { A2AEdgeData } from '../configuration/edge-types';
+import { cn } from '@/lib/utils';
+import type { A2AEdgeData, AnimatedEdge } from '../configuration/edge-types';
 
-interface AgentToAgentEdgeProps extends EdgeProps {
-  data?: A2AEdgeData;
+interface AgentToAgentEdgeProps extends Omit<EdgeProps, 'data'> {
+  data: AnimatedEdge & A2AEdgeData;
 }
 
 export function AgentToAgentEdge({
@@ -17,13 +18,12 @@ export function AgentToAgentEdge({
   data,
   selected,
 }: AgentToAgentEdgeProps) {
-  const relationships = data?.relationships || {
+  const relationships = data.relationships || {
     transferTargetToSource: false,
     transferSourceToTarget: false,
     delegateTargetToSource: false,
     delegateSourceToTarget: false,
   };
-  const delegating = data?.delegating;
 
   const hasDelegate = relationships.delegateTargetToSource || relationships.delegateSourceToTarget;
   const hasTransfer = relationships.transferTargetToSource || relationships.transferSourceToTarget;
@@ -88,13 +88,14 @@ export function AgentToAgentEdge({
   const delegateMarkerEnd =
     hasDelegate && relationships.delegateSourceToTarget ? getMarker(!!selected) : undefined;
 
-  const className =
-    selected || delegating ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground';
-
+  const className = cn(
+    data.status && 'edge-delegating',
+    data.status === 'inverted-delegating' && 'edge-delegating-inverted'
+  );
   return (
     <>
       {/* Animated circles based on delegating direction */}
-      {delegating && <AnimatedCircle edgePath={edgePath} inverted={delegating === 'inverted'} />}
+      <AnimatedCircle edgePath={edgePath} status={data.status} />
 
       {/* Render transfer path (solid line) */}
       {hasTransfer && (

package/src/components/agent/edges/default-edge.tsx

@@ -2,24 +2,23 @@
 
 import { BaseEdge, type EdgeProps, getBezierPath } from '@xyflow/react';
 import { type FC, useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import type { AnimatedEdge } from '../configuration/edge-types';
 
-type DefaultEdgeProps = EdgeProps & {
-  data?: {
-    delegating: boolean | 'inverted';
-  };
-};
-
-export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
-  edgePath,
-  inverted,
-}) => {
+export const AnimatedCircle: FC<{ edgePath: string } & AnimatedEdge> = ({ edgePath, status }) => {
   const ref = useRef<SVGAnimateElement>(null);
 
   // Without this useEffect, the animation won't start when this component is rendered dynamically.
   // biome-ignore lint/correctness/useExhaustiveDependencies: We need restart animation when invert is changed
   useEffect(() => {
     ref.current?.beginElement();
-  }, [inverted]);
+  }, [status]);
+
+  if (!status) {
+    return;
+  }
+
+  const isInvertedDelegating = status === 'inverted-delegating';
 
   return (
     <circle fill="var(--primary)" r="6">
@@ -27,9 +26,8 @@ export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
         ref={ref}
         dur="2s"
         path={edgePath}
-        fill="freeze"
-        {...(inverted && {
-          pathLength: '1',
+        fill={isInvertedDelegating ? 'remove' : 'freeze'}
+        {...(isInvertedDelegating && {
           keyPoints: '1;0',
           keyTimes: '0;1',
         })}
@@ -38,6 +36,10 @@ export const AnimatedCircle: FC<{ edgePath: string; inverted: boolean }> = ({
   );
 };
 
+interface DefaultEdgeProps extends Omit<EdgeProps, 'data'> {
+  data?: AnimatedEdge;
+}
+
 export function DefaultEdge({
   id,
   sourceX,
@@ -47,9 +49,8 @@ export function DefaultEdge({
   sourcePosition,
   targetPosition,
   label,
-  selected,
   markerEnd,
-  data,
+  data = {},
 }: DefaultEdgeProps) {
   const [edgePath] = getBezierPath({
     sourceX,
@@ -60,24 +61,20 @@ export function DefaultEdge({
     targetPosition,
   });
 
-  const className =
-    selected || data?.delegating
-      ? '!stroke-primary'
-      : '!stroke-border dark:!stroke-muted-foreground';
-
   return (
     <>
       {/* Animated circles based on delegating direction */}
-      {data?.delegating && (
-        <AnimatedCircle edgePath={edgePath} inverted={data.delegating === 'inverted'} />
-      )}
+      <AnimatedCircle edgePath={edgePath} status={data.status} />
       <BaseEdge
         id={id}
         path={edgePath}
         label={label}
         markerEnd={markerEnd}
         style={{ strokeWidth: 2 }}
-        className={className}
+        className={cn(
+          data.status && 'edge-delegating',
+          data.status === 'inverted-delegating' && 'edge-delegating-inverted'
+        )}
       />
     </>
   );

package/src/components/agent/edges/self-loop-edge.tsx

@@ -2,8 +2,8 @@ import { BaseEdge, EdgeLabelRenderer, type EdgeProps, type Node, useStore } from
 import { RefreshCw } from 'lucide-react';
 import type { A2AEdgeData } from '../configuration/edge-types';
 
-interface SelfLoopEdgeProps extends EdgeProps {
-  data?: A2AEdgeData;
+interface SelfLoopEdgeProps extends Omit<EdgeProps, 'data'> {
+  data: A2AEdgeData;
 }
 
 const getNodePositionById = (nodeId: string): ((state: { nodes: Node[] }) => Node | undefined) => {
@@ -15,7 +15,7 @@ export function SelfLoopEdge({ source, data, selected }: SelfLoopEdgeProps) {
 
   if (!sourceNode) return null;
 
-  const relationships = data?.relationships || {
+  const relationships = data.relationships || {
     transferTargetToSource: false,
     transferSourceToTarget: false,
     delegateTargetToSource: false,
@@ -75,7 +75,6 @@ export function SelfLoopEdge({ source, data, selected }: SelfLoopEdgeProps) {
       {/* Render transfer path (solid line) */}
       {hasTransfer && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
           path={transferPath}
           style={{
             strokeWidth: 2,
@@ -88,7 +87,6 @@ export function SelfLoopEdge({ source, data, selected }: SelfLoopEdgeProps) {
       {/* Render delegate path (dashed line) */}
       {hasDelegate && (
         <BaseEdge
-          className={`${selected ? '!stroke-primary' : '!stroke-border dark:!stroke-muted-foreground'}`}
           path={hasTransfer ? delegatePath : transferPath}
           style={{
             strokeDasharray: '5,5',

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

@@ -9,11 +9,11 @@ export const BaseNode: FC<BaseNodeProps> = ({ className, isSelected, ...props })
   <div
     className={cn(
       'relative rounded-lg border bg-card text-card-foreground',
-      // React Flow displays node elements inside of a `NodeWrapper` component,
-      // which compiles down to a div with a the class `react-flow__node`.
+      // React Flow displays node elements inside a `NodeWrapper` component,
+      // which compiles down to a div with a class `react-flow__node`.
       // When a node is selected, the class `selected` is added to the
       // `react-flow__node` element. This allows us to style the node when it
-      isSelected ? 'ring-2 ring-primary' : 'hover:ring-2 hover:ring-gray-700/5',
+      isSelected && 'ring-2 ring-primary',
       className
     )}
     // tabIndex={0}

package/src/components/agent/nodes/function-tool-node.tsx

@@ -19,6 +19,7 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
   const nodeErrors = getNodeErrors(functionToolId);
   const hasErrors = hasNodeErrors(functionToolId);
   const isDelegating = data.status === 'delegating';
+  const isInvertedDelegating = data.status === 'inverted-delegating';
   const isExecuting = data.status === 'executing';
   return (
     <div className="relative">
@@ -27,7 +28,8 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
         className={cn(
           'rounded-4xl min-w-40 max-w-xs',
           hasErrors && 'ring-2 ring-red-300 border-red-300',
-          isExecuting && 'node-executing'
+          isExecuting && 'node-executing',
+          isInvertedDelegating && 'node-delegating-inverted'
         )}
       >
         <BaseNodeHeader className="mb-0 py-3">
@@ -38,9 +40,9 @@ export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData
               </div>
               <BaseNodeHeaderTitle className="flex-1 truncate">{name}</BaseNodeHeaderTitle>
             </div>
-            {description?.trim() ? (
+            {description && (
               <p className="text-xs text-muted-foreground line-clamp-2 pl-7">{description}</p>
-            ) : null}
+            )}
           </div>
           {hasErrors && (
             <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />

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

@@ -1,4 +1,5 @@
 import { type NodeProps, Position } from '@xyflow/react';
+import type { FC, ReactNode } from 'react';
 import { getActiveTools } from '@/app/utils/active-tools';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Badge } from '@/components/ui/badge';
@@ -11,6 +12,21 @@ import { Handle } from './handle';
 
 const TOOLS_SHOWN_LIMIT = 4;
 
+export const TruncateBadge: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <Badge
+      variant="code"
+      className={cn(
+        'text-2xs text-gray-700 dark:text-gray-300',
+        // Add ellipsis for long names
+        'truncate block max-w-full'
+      )}
+    >
+      {children}
+    </Badge>
+  );
+};
+
 export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const { data, selected } = props;
   const { toolLookup, agentToolConfigLookup, edges } = useAgentStore((state) => ({
@@ -77,6 +93,7 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
 
   const toolBadges = getToolDisplay();
   const isDelegating = data.status === 'delegating';
+  const isInvertedDelegating = data.status === 'inverted-delegating';
   const isExecuting = data.status === 'executing';
   const hasErrors = data.status === 'error';
   return (
@@ -85,22 +102,17 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
       className={cn(
         'rounded-4xl min-w-40 min-h-13 max-w-3xs',
         hasErrors && 'ring-2 ring-red-300 border-red-300',
-        isExecuting && 'node-executing'
+        isExecuting && 'node-executing',
+        isInvertedDelegating && 'node-delegating-inverted'
       )}
     >
       <BaseNodeHeader className="flex items-center justify-between gap-2">
         <MCPToolImage imageUrl={imageUrl} name={name} size={24} className="flex-shrink-0" />
         <BaseNodeHeaderTitle>{name}</BaseNodeHeaderTitle>
       </BaseNodeHeader>
-      <BaseNodeContent>
-        {toolBadges.map((label, index) => (
-          <Badge
-            key={index}
-            variant="code"
-            className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
-          >
-            {label}
-          </Badge>
+      <BaseNodeContent className="flex-row gap-2 flex-wrap">
+        {toolBadges.map((label) => (
+          <TruncateBadge key={label}>{label}</TruncateBadge>
         ))}
       </BaseNodeContent>
       <Handle id={mcpNodeHandleId} type="target" position={Position.Top} isConnectable />

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

@@ -1,6 +1,7 @@
 import { type NodeProps, Position } from '@xyflow/react';
 import { Bot, Component, Library, type LucideIcon } from 'lucide-react';
 import { useMemo } from 'react';
+import { TruncateBadge } from '@/components/agent/nodes/mcp-node';
 import { AnthropicIcon } from '@/components/icons/anthropic';
 import { GoogleIcon } from '@/components/icons/google';
 import { OpenAIIcon } from '@/components/icons/openai';
@@ -33,9 +34,7 @@ const ListSection = ({
       </div>
       <div className="flex flex-wrap gap-2">
         {items?.map((name) => (
-          <Badge key={name} className="text-xs" variant="code">
-            {name}
-          </Badge>
+          <TruncateBadge key={name}>{name}</TruncateBadge>
         ))}
       </div>
     </div>
@@ -72,6 +71,7 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
     [data?.artifactComponents, artifactComponentLookup]
   );
   const isDelegating = status === 'delegating';
+  const isInvertedDelegating = status === 'inverted-delegating';
   const isExecuting = status === 'executing';
   return (
     <div className="relative">
@@ -81,7 +81,8 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
         className={cn(
           isDefault && 'rounded-tl-none',
           hasErrors && 'ring-2 ring-red-300 border-red-300',
-          isExecuting && 'node-executing'
+          isExecuting && 'node-executing',
+          isInvertedDelegating && 'node-delegating-inverted'
         )}
         style={{ width: NODE_WIDTH }}
       >

package/src/components/agent/ship/ship-modal.tsx

@@ -82,8 +82,7 @@ const shipModalTabItems: TabItem[] = [
 ];
 
 export const ShipModal: FC<{ buttonClassName: string }> = ({ buttonClassName }) => {
-  const params = useParams();
-  const { tenantId, projectId } = params;
+  const { tenantId, projectId } = useParams();
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -92,7 +91,13 @@ export const ShipModal: FC<{ buttonClassName: string }> = ({ buttonClassName })
           Ship
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-full! w-7xl" position="top" showCloseButton={false}>
+      <DialogContent
+        className="max-w-full! w-7xl"
+        position="top"
+        showCloseButton={false}
+        onWheel={(e) => e.stopPropagation()} // to make scroll work on the widgets
+        onTouchMove={(e) => e.stopPropagation()} // to make scroll work on the widgets
+      >
         <DialogHeader>
           <div className="flex items-center justify-between w-full gap-2">
             <DialogTitle>Talk to your agent</DialogTitle>

package/src/components/agent/sidepane/edges/edge-editor.tsx

@@ -20,6 +20,8 @@ type RelationshipOptionProps = {
   checked: boolean;
 };
 
+const REMOVE_DELEGATION_OPTION_ID = 'none';
+
 function RelationshipOption({ id, label, onCheckedChange, checked }: RelationshipOptionProps) {
   return (
     <div className="flex items-start gap-3">
@@ -47,6 +49,7 @@ type RelationshipSectionProps = {
   checkedValues: A2AEdgeData['relationships'];
   useRadio?: boolean;
   onRadioChange?: (value: string) => void;
+  defaultRadioValue?: string;
 };
 
 function RelationshipSection({
@@ -58,12 +61,23 @@ function RelationshipSection({
   checkedValues,
   useRadio = false,
   onRadioChange,
+  defaultRadioValue,
 }: RelationshipSectionProps) {
   const getRadioValue = () => {
     const checkedOption = options.find(
-      (opt) => checkedValues?.[opt.id as keyof A2AEdgeData['relationships']]
+      (opt) =>
+        (!defaultRadioValue || opt.id !== defaultRadioValue) &&
+        checkedValues?.[opt.id as keyof A2AEdgeData['relationships']]
     );
-    return checkedOption?.id || '';
+    if (checkedOption) {
+      return checkedOption.id;
+    }
+    // If no option is checked, return defaultRadioValue if it exists in options
+    if (defaultRadioValue) {
+      const defaultOption = options.find((opt) => opt.id === defaultRadioValue);
+      return defaultOption ? defaultRadioValue : '';
+    }
+    return '';
   };
 
   return (
@@ -210,7 +224,10 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
       delegateTargetToSource: false,
     };
 
-    if (value) {
+    if (value === REMOVE_DELEGATION_OPTION_ID) {
+      newRelationships.delegateSourceToTarget = false;
+      newRelationships.delegateTargetToSource = false;
+    } else if (value) {
       if (isSelfLoop && value === 'delegateSourceToTarget') {
         newRelationships.delegateSourceToTarget = true;
         newRelationships.delegateTargetToSource = true;
@@ -218,7 +235,6 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
         newRelationships[value as keyof A2AEdgeData['relationships']] = true;
       }
     }
-
     updateRelationships(newRelationships);
   };
 
@@ -285,6 +301,10 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
             </div>
           ),
         },
+        {
+          id: REMOVE_DELEGATION_OPTION_ID,
+          label: <div className="my-0.5 leading-[22px]">None</div>,
+        },
       ]
     : [
         {
@@ -315,6 +335,10 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
             </div>
           ),
         },
+        {
+          id: REMOVE_DELEGATION_OPTION_ID,
+          label: <div className="my-0.5 leading-[22px]">None</div>,
+        },
       ];
 
   return (
@@ -337,6 +361,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
         checkedValues={selectedEdge.data?.relationships as A2AEdgeData['relationships']}
         useRadio={true}
         onRadioChange={handleDelegateRadioChange}
+        defaultRadioValue={REMOVE_DELEGATION_OPTION_ID}
       />
       <Separator />
       <div className="flex justify-end">

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

@@ -53,9 +53,8 @@ const ExecutionLimitInheritanceInfo = () => {
 };
 
 function MetadataEditor() {
-  const params = useParams();
+  const { agentId, tenantId, projectId } = useParams();
   const metadata = useAgentStore((state) => state.metadata);
-  const { agentId, tenantId, projectId } = params;
   const { id, name, description, contextConfig, models, stopWhen, prompt, statusUpdates } =
     metadata;
   const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();

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

@@ -39,7 +39,9 @@ export function ModelSelector({
   canClear = true,
 }: ModelSelectorProps) {
   const [open, setOpen] = useState(false);
-  const [showCustomInput, setShowCustomInput] = useState<'openrouter' | 'gateway' | null>(null);
+  const [showCustomInput, setShowCustomInput] = useState<
+    'openrouter' | 'gateway' | 'nim' | 'custom' | null
+  >(null);
   const [customModelInput, setCustomModelInput] = useState('');
 
   const selectedModel = useMemo(() => {
@@ -57,6 +59,14 @@ export function ModelSelector({
         const modelName = value.replace('gateway/', '');
         return { value, label: modelName, prefix: 'gateway/' };
       }
+      if (value.startsWith('nim/')) {
+        const modelName = value.replace('nim/', '');
+        return { value, label: modelName, prefix: 'nim/' };
+      }
+      if (value.startsWith('custom/')) {
+        const modelName = value.replace('custom/', '');
+        return { value, label: modelName, prefix: 'custom/' };
+      }
       return { value, label: `${value} (custom)` };
     }
     return null;
@@ -153,7 +163,9 @@ export function ModelSelector({
                                 if (
                                   modelValue.includes('/') &&
                                   !modelValue.startsWith('openrouter/') &&
-                                  !modelValue.startsWith('gateway/')
+                                  !modelValue.startsWith('gateway/') &&
+                                  !modelValue.startsWith('nim/') &&
+                                  !modelValue.startsWith('custom/')
                                 ) {
                                   // Could be openrouter format, let user decide or add logic here
                                 }
@@ -175,6 +187,20 @@ export function ModelSelector({
                       );
                     })()}
                   </CommandEmpty>
+                  {/* Custom OpenAI-compatible */}
+                  <CommandGroup heading="Custom OpenAI-compatible">
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__custom__"
+                      onSelect={() => {
+                        setShowCustomInput('custom');
+                        setOpen(false);
+                        setCustomModelInput('');
+                      }}
+                    >
+                      Custom OpenAI-compatible ...
+                    </CommandItem>
+                  </CommandGroup>
                   {/* LLM Gateway options */}
                   <CommandGroup heading="LLM Gateway">
                     <CommandItem
@@ -199,6 +225,17 @@ export function ModelSelector({
                     >
                       Vercel AI Gateway ...
                     </CommandItem>
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__nim__"
+                      onSelect={() => {
+                        setShowCustomInput('nim');
+                        setOpen(false);
+                        setCustomModelInput('');
+                      }}
+                    >
+                      NVIDIA NIM ...
+                    </CommandItem>
                   </CommandGroup>
                   {/* Predefined models */}
                   {Object.entries(modelOptions).map(([provider, models]) => (
@@ -236,12 +273,20 @@ export function ModelSelector({
                 <div className="text-sm font-medium">
                   {showCustomInput === 'openrouter'
                     ? 'OpenRouter Model ID'
-                    : 'Vercel AI Gateway Model ID'}
+                    : showCustomInput === 'gateway'
+                      ? 'Vercel AI Gateway Model ID'
+                      : showCustomInput === 'nim'
+                        ? 'NVIDIA NIM Model ID'
+                        : 'Custom Model ID'}
                 </div>
                 <div className="text-xs text-muted-foreground">
                   {showCustomInput === 'openrouter'
                     ? 'Examples: anthropic/claude-3-5-sonnet, meta-llama/llama-3.1-405b-instruct'
-                    : 'Examples: openai/gpt-4o, anthropic/claude-3-5-sonnet'}
+                    : showCustomInput === 'gateway'
+                      ? 'Examples: openai/gpt-4o, anthropic/claude-3-5-sonnet'
+                      : showCustomInput === 'nim'
+                        ? 'Examples: nvidia/llama-3.3-nemotron-super-49b-v1.5, nvidia/nemotron-4-340b-instruct'
+                        : 'Examples: my-custom-model, llama-3-custom, custom-finetuned'}
                 </div>
                 <div className="flex gap-2 items-center">
                   <input
@@ -249,14 +294,24 @@ export function ModelSelector({
                     placeholder={
                       showCustomInput === 'openrouter'
                         ? 'anthropic/claude-3-5-sonnet'
-                        : 'openai/gpt-4o'
+                        : showCustomInput === 'gateway'
+                          ? 'openai/gpt-4o'
+                          : showCustomInput === 'nim'
+                            ? 'nvidia/llama-3.3-nemotron-super-49b-v1.5'
+                            : 'my-custom-model'
                     }
                     value={customModelInput}
                     onChange={(e) => setCustomModelInput(e.target.value)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' && customModelInput.trim()) {
                         const prefix =
-                          showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
+                          showCustomInput === 'openrouter'
+                            ? 'openrouter/'
+                            : showCustomInput === 'gateway'
+                              ? 'gateway/'
+                              : showCustomInput === 'nim'
+                                ? 'nim/'
+                                : 'custom/';
                         onValueChange?.(`${prefix}${customModelInput.trim()}`);
                         setShowCustomInput(null);
                         setCustomModelInput('');
@@ -273,7 +328,13 @@ export function ModelSelector({
                     onClick={() => {
                       if (customModelInput.trim()) {
                         const prefix =
-                          showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
+                          showCustomInput === 'openrouter'
+                            ? 'openrouter/'
+                            : showCustomInput === 'gateway'
+                              ? 'gateway/'
+                              : showCustomInput === 'nim'
+                                ? 'nim/'
+                                : 'custom/';
                         onValueChange?.(`${prefix}${customModelInput.trim()}`);
                         setShowCustomInput(null);
                         setCustomModelInput('');

package/src/components/agents/delete-agent-confirmation.tsx

@@ -17,11 +17,10 @@ export function DeleteAgentConfirmation({
   agentName,
   setIsOpen,
 }: DeleteAgentConfirmationProps) {
-  const params = useParams();
-  const { tenantId, projectId } = params as {
+  const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
-  };
+  }>();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleDelete = async () => {

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

@@ -19,7 +19,6 @@ import {
   fieldsToJsonSchema,
   findFieldById,
   type JsonSchemaStateData,
-  jsonSchemaStore,
   parseFieldsFromJson,
   Types,
   type TypeValues,
@@ -27,6 +26,7 @@ import {
   useJsonSchemaStore,
 } from '@/features/agent/state/json-schema';
 import { cn } from '@/lib/utils';
+import { useDidUpdate } from '@/hooks/use-did-update';
 import { ArrayIcon, BooleanIcon, EnumIcon, NumberIcon, ObjectIcon, StringIcon } from '../../icons';
 
 const INDENT_PX = 24;
@@ -235,18 +235,20 @@ export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string)
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only on mount
   useEffect(() => {
     setFields(parseFieldsFromJson(value));
-    return () => {
-      const root: FieldObject = {
-        id: '__root__',
-        type: 'object',
-        properties: jsonSchemaStore.getState().fields,
-      };
-      const schema = fieldsToJsonSchema(root);
-      const serialized = JSON.stringify(schema, null, 2);
-      onChange(serialized);
-    };
   }, []);
 
+  // Calls only on update to avoid race condition with above useEffect
+  useDidUpdate(() => {
+    const root: FieldObject = {
+      id: '__root__',
+      type: 'object',
+      properties: fields,
+    };
+    const schema = fieldsToJsonSchema(root);
+    const serialized = JSON.stringify(schema, null, 2);
+    onChange(serialized);
+  }, [fields, onChange]);
+
   return (
     <>
       <Table>

package/src/components/projects/delete-project-confirmation.tsx

@@ -20,8 +20,7 @@ export function DeleteProjectConfirmation({
   setIsOpen,
   isOpen,
 }: DeleteProjectConfirmationProps) {
-  const params = useParams();
-  const { tenantId } = params as { tenantId: string };
+  const { tenantId } = useParams<{ tenantId: string }>();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleDelete = async () => {