@inkeep/agents-manage-ui 0.8.2 → 0.8.4

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

@@ -73,237 +73,250 @@ export function ModelSelector({
 
   return (
     <div className="space-y-2">
-      <Label>
-        {label}
-        {tooltip && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Info className="w-3 h-3 text-muted-foreground" />
-              </TooltipTrigger>
-              <TooltipContent>{tooltip}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-        {isRequired && <span className="text-red-500">*</span>}
-      </Label>
+      {label && (
+        <Label>
+          {label}
+          {tooltip && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="w-3 h-3 text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent>{tooltip}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+          {isRequired && <span className="text-red-500">*</span>}
+        </Label>
+      )}
       <div className="relative">
-      <div className="flex w-full shadow-xs rounded-md">
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-expanded={open}
-              className={cn(
-                'justify-between bg-background dark:bg-background flex-1 text-foreground shadow-none truncate',
-                selectedModel && canClear ? 'rounded-r-none border-r-0' : 'rounded-r-md'
-              )}
+        <div className="flex w-full shadow-xs rounded-md">
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={open}
+                className={cn(
+                  'justify-between bg-background dark:bg-background flex-1 text-foreground shadow-none truncate',
+                  selectedModel && canClear ? 'rounded-r-none border-r-0' : 'rounded-r-md'
+                )}
+              >
+                {selectedModel ? (
+                  <div className="truncate">
+                    {'prefix' in selectedModel && selectedModel.prefix && (
+                      <span className="text-gray-400">{selectedModel.prefix}</span>
+                    )}
+                    {selectedModel.label}
+                  </div>
+                ) : inheritedModel ? (
+                  <div className="truncate text-muted-foreground">
+                    <span className="italic">{inheritedModel.label}</span>
+                    <span className="text-xs ml-1">(inherited)</span>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground">{placeholder}</div>
+                )}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0 w-[var(--radix-popover-trigger-width)] transition-all duration-200 ease-in-out"
+              align="start"
+              side="bottom"
+              onWheel={(e) => {
+                e.stopPropagation(); // to make scroll work inside dialog https://github.com/radix-ui/primitives/issues/1159
+              }}
+              onTouchMove={(e) => {
+                e.stopPropagation(); // to make scroll work inside dialog https://github.com/radix-ui/primitives/issues/1159
+              }}
             >
-              {selectedModel ? (
-                <div className="truncate">
-                  {'prefix' in selectedModel && selectedModel.prefix && (
-                    <span className="text-gray-400">{selectedModel.prefix}</span>
-                  )}
-                  {selectedModel.label}
-                </div>
-              ) : inheritedModel ? (
-                <div className="truncate text-muted-foreground">
-                  <span className="italic">{inheritedModel.label}</span>
-                  <span className="text-xs ml-1">(inherited)</span>
-                </div>
-              ) : (
-                <div className="text-muted-foreground">{placeholder}</div>
-              )}
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="p-0 w-[var(--radix-popover-trigger-width)] transition-all duration-200 ease-in-out"
-            align="start"
-            side="bottom"
-            onWheel={(e) => {
-              e.stopPropagation(); // to make scroll work inside dialog https://github.com/radix-ui/primitives/issues/1159
-            }}
-            onTouchMove={(e) => {
-              e.stopPropagation(); // to make scroll work inside dialog https://github.com/radix-ui/primitives/issues/1159
-            }}
-          >
-            <Command>
-              <CommandInput placeholder="Search models or type custom model ID..." />
-              <CommandList className="max-h-64">
-                <CommandEmpty>
-                  {(() => {
-                    // Only access document on the client side
-                    if (typeof document !== 'undefined') {
-                      const input = document.querySelector('[cmdk-input]') as HTMLInputElement;
-                      const searchValue = input?.value || '';
+              <Command>
+                <CommandInput placeholder="Search models or type custom model ID..." />
+                <CommandList className="max-h-64">
+                  <CommandEmpty>
+                    {(() => {
+                      // Only access document on the client side
+                      if (typeof document !== 'undefined') {
+                        const input = document.querySelector('[cmdk-input]') as HTMLInputElement;
+                        const searchValue = input?.value || '';
 
-                      if (searchValue.trim()) {
-                        return (
-                          <CommandItem
-                            className="flex items-center justify-between cursor-pointer text-foreground"
-                            value={searchValue}
-                            onSelect={() => {
-                              const modelValue = searchValue.trim();
+                        if (searchValue.trim()) {
+                          return (
+                            <CommandItem
+                              className="flex items-center justify-between cursor-pointer text-foreground"
+                              value={searchValue}
+                              onSelect={() => {
+                                const modelValue = searchValue.trim();
 
-                              // Auto-add prefixes if they look like they belong to these services
-                              if (modelValue.includes('/') && !modelValue.startsWith('openrouter/') && !modelValue.startsWith('gateway/')) {
-                                // Could be openrouter format, let user decide or add logic here
-                              }
+                                // Auto-add prefixes if they look like they belong to these services
+                                if (
+                                  modelValue.includes('/') &&
+                                  !modelValue.startsWith('openrouter/') &&
+                                  !modelValue.startsWith('gateway/')
+                                ) {
+                                  // Could be openrouter format, let user decide or add logic here
+                                }
 
-                              onValueChange?.(modelValue);
-                              setOpen(false);
-                            }}
-                          >
-                            Use "{searchValue}" as custom model
-                          </CommandItem>
-                        );
+                                onValueChange?.(modelValue);
+                                setOpen(false);
+                              }}
+                            >
+                              Use "{searchValue}" as custom model
+                            </CommandItem>
+                          );
+                        }
                       }
-                    }
 
-                    return (
-                      <div className="p-2 text-muted-foreground text-sm">
-                        Type to search models or enter a custom model ID
-                      </div>
-                    );
-                  })()}
-                </CommandEmpty>
-                {/* LLM Gateway options */}
-                <CommandGroup heading="LLM Gateway">
-                  <CommandItem
-                    className="flex items-center justify-between cursor-pointer text-foreground"
-                    value="__openrouter__"
-                    onSelect={() => {
-                      setShowCustomInput('openrouter');
-                      setCustomModelInput('');
+                      return (
+                        <div className="p-2 text-muted-foreground text-sm">
+                          Type to search models or enter a custom model ID
+                        </div>
+                      );
+                    })()}
+                  </CommandEmpty>
+                  {/* LLM Gateway options */}
+                  <CommandGroup heading="LLM Gateway">
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__openrouter__"
+                      onSelect={() => {
+                        setShowCustomInput('openrouter');
+                        setCustomModelInput('');
+                      }}
+                    >
+                      OpenRouter ...
+                    </CommandItem>
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__gateway__"
+                      onSelect={() => {
+                        setShowCustomInput('gateway');
+                        setCustomModelInput('');
+                      }}
+                    >
+                      Vercel AI Gateway ...
+                    </CommandItem>
+                  </CommandGroup>
+                  {/* Predefined models */}
+                  {Object.entries(modelOptions).map(([provider, models]) => (
+                    <CommandGroup key={provider} heading={provider}>
+                      {models.map((model) => (
+                        <CommandItem
+                          key={model.value}
+                          className="flex items-center justify-between cursor-pointer text-foreground"
+                          value={model.value}
+                          onSelect={(currentValue) => {
+                            onValueChange?.(currentValue === value ? '' : currentValue);
+                            setOpen(false);
+                          }}
+                        >
+                          {model.label}
+                          <Check
+                            className={cn(
+                              'ml-2 h-4 w-4',
+                              value === model.value ? 'opacity-100' : 'opacity-0'
+                            )}
+                          />
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  ))}
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          {showCustomInput && (
+            <div className="absolute top-full left-0 right-0 mt-1 p-3 bg-background border rounded-md shadow-lg z-20">
+              <div className="space-y-2">
+                <div className="text-sm font-medium">
+                  {showCustomInput === 'openrouter'
+                    ? 'OpenRouter Model ID'
+                    : 'Vercel AI Gateway 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'}
+                </div>
+                <div className="flex gap-2">
+                  <input
+                    className="flex-1 px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder={
+                      showCustomInput === 'openrouter'
+                        ? 'anthropic/claude-3-5-sonnet'
+                        : 'openai/gpt-4o'
+                    }
+                    value={customModelInput}
+                    onChange={(e) => setCustomModelInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && customModelInput.trim()) {
+                        const prefix =
+                          showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
+                        onValueChange?.(`${prefix}${customModelInput.trim()}`);
+                        setShowCustomInput(null);
+                        setCustomModelInput('');
+                        setOpen(false);
+                      }
+                      if (e.key === 'Escape') {
+                        setShowCustomInput(null);
+                        setCustomModelInput('');
+                      }
                     }}
-                  >
-                    OpenRouter ...
-                  </CommandItem>
-                  <CommandItem
-                    className="flex items-center justify-between cursor-pointer text-foreground"
-                    value="__gateway__"
-                    onSelect={() => {
-                      setShowCustomInput('gateway');
-                      setCustomModelInput('');
+                  />
+                  <Button
+                    size="sm"
+                    onClick={() => {
+                      if (customModelInput.trim()) {
+                        const prefix =
+                          showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
+                        onValueChange?.(`${prefix}${customModelInput.trim()}`);
+                        setShowCustomInput(null);
+                        setCustomModelInput('');
+                        setOpen(false);
+                      }
                     }}
+                    disabled={!customModelInput.trim()}
                   >
-                    Vercel AI Gateway ...
-                  </CommandItem>
-                </CommandGroup>
-                {/* Predefined models */}
-                {Object.entries(modelOptions).map(([provider, models]) => (
-                  <CommandGroup key={provider} heading={provider}>
-                    {models.map((model) => (
-                      <CommandItem
-                        key={model.value}
-                        className="flex items-center justify-between cursor-pointer text-foreground"
-                        value={model.value}
-                        onSelect={(currentValue) => {
-                          onValueChange?.(currentValue === value ? '' : currentValue);
-                          setOpen(false);
-                        }}
-                      >
-                        {model.label}
-                        <Check
-                          className={cn(
-                            'ml-2 h-4 w-4',
-                            value === model.value ? 'opacity-100' : 'opacity-0'
-                          )}
-                        />
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                ))}
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-        {showCustomInput && (
-          <div className="absolute top-full left-0 right-0 mt-1 p-3 bg-background border rounded-md shadow-lg z-20">
-            <div className="space-y-2">
-              <div className="text-sm font-medium">
-                {showCustomInput === 'openrouter' ? 'OpenRouter Model ID' : 'Vercel AI Gateway 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'
-                }
-              </div>
-              <div className="flex gap-2">
-                <input
-                  className="flex-1 px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder={showCustomInput === 'openrouter' ? 'anthropic/claude-3-5-sonnet' : 'openai/gpt-4o'}
-                  value={customModelInput}
-                  onChange={(e) => setCustomModelInput(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && customModelInput.trim()) {
-                      const prefix = showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
-                      onValueChange?.(`${prefix}${customModelInput.trim()}`);
-                      setShowCustomInput(null);
-                      setCustomModelInput('');
-                      setOpen(false);
-                    }
-                    if (e.key === 'Escape') {
-                      setShowCustomInput(null);
-                      setCustomModelInput('');
-                    }
-                  }}
-                />
-                <Button
-                  size="sm"
-                  onClick={() => {
-                    if (customModelInput.trim()) {
-                      const prefix = showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
-                      onValueChange?.(`${prefix}${customModelInput.trim()}`);
+                    Add
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
                       setShowCustomInput(null);
                       setCustomModelInput('');
-                      setOpen(false);
-                    }
-                  }}
-                  disabled={!customModelInput.trim()}
-                >
-                  Add
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => {
-                    setShowCustomInput(null);
-                    setCustomModelInput('');
-                  }}
-                >
-                  Cancel
-                </Button>
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-        {canClear && (
-          <div
-            className={cn(
-              'transition-all duration-200 ease-in-out overflow-hidden',
-              selectedModel && canClear ? 'w-10 opacity-100 scale-100' : 'w-0 opacity-0 scale-95'
-            )}
-          >
-            <Button
-              variant="outline"
-              size="icon"
-              className="rounded-l-none border-l-0 px-2 bg-transparent w-10 transition-all duration-200 ease-in-out text-muted-foreground hover:text-foreground"
-              onClick={() => {
-                onValueChange?.('');
-              }}
-              aria-label="Clear model selection"
-              type="button"
-              disabled={!selectedModel}
+          )}
+          {canClear && (
+            <div
+              className={cn(
+                'transition-all duration-200 ease-in-out overflow-hidden',
+                selectedModel && canClear ? 'w-10 opacity-100 scale-100' : 'w-0 opacity-0 scale-95'
+              )}
             >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-      </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="rounded-l-none border-l-0 px-2 bg-transparent w-10 transition-all duration-200 ease-in-out text-muted-foreground hover:text-foreground"
+                onClick={() => {
+                  onValueChange?.('');
+                }}
+                aria-label="Clear model selection"
+                type="button"
+                disabled={!selectedModel}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/components/graph/sidepane/sidepane.tsx

@@ -4,6 +4,7 @@ import { type LucideIcon, Workflow } from 'lucide-react';
 import { useMemo } from 'react';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
 import { edgeTypeMap } from '../configuration/edge-types';
@@ -32,6 +33,7 @@ interface SidePaneProps {
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   agentToolConfigLookup: AgentToolConfigLookup;
+  credentialLookup: Record<string, Credential>;
 }
 
 export function SidePane({
@@ -43,6 +45,7 @@ export function SidePane({
   dataComponentLookup,
   artifactComponentLookup,
   agentToolConfigLookup,
+  credentialLookup,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
@@ -100,6 +103,7 @@ export function SidePane({
           return (
             <ExternalAgentNodeEditor
               selectedNode={selectedNode as Node<ExternalAgentNodeData>}
+              credentialLookup={credentialLookup}
               errorHelpers={errorHelpers}
             />
           );

package/src/components/projects/form/form-configuration.ts

@@ -23,8 +23,5 @@ export const defaultValues: ProjectFormData = {
       providerOptions: undefined,
     },
   },
-  stopWhen: {
-    transferCountIs: undefined,
-    stepCountIs: undefined,
-  },
+  stopWhen: undefined,
 };

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

@@ -25,27 +25,59 @@ interface ProjectFormProps {
 }
 
 const serializeData = (data: ProjectFormData) => {
+  const cleanProviderOptions = (options: any) => {
+    // Convert null, empty object, or falsy values to undefined
+    if (!options || (typeof options === 'object' && Object.keys(options).length === 0)) {
+      return undefined;
+    }
+    return options;
+  };
+
+  const cleanStopWhen = (stopWhen: any) => {
+    // If stopWhen is null, undefined, or empty object, return undefined
+    if (!stopWhen || (typeof stopWhen === 'object' && Object.keys(stopWhen).length === 0)) {
+      return undefined;
+    }
+
+    // Clean the individual properties - remove null/undefined values
+    const cleaned: any = {};
+    if (stopWhen.transferCountIs !== null && stopWhen.transferCountIs !== undefined) {
+      cleaned.transferCountIs = stopWhen.transferCountIs;
+    }
+    if (stopWhen.stepCountIs !== null && stopWhen.stepCountIs !== undefined) {
+      cleaned.stepCountIs = stopWhen.stepCountIs;
+    }
+
+    // If no valid properties, return undefined
+    if (Object.keys(cleaned).length === 0) {
+      return undefined;
+    }
+
+    return cleaned;
+  };
+
   return {
     ...data,
     models: {
       ...data.models,
       base: {
         model: data.models.base.model,
-        providerOptions: data.models.base.providerOptions,
+        providerOptions: cleanProviderOptions(data.models.base.providerOptions),
       },
       structuredOutput: data.models?.structuredOutput?.model
         ? {
             model: data.models.structuredOutput.model,
-            providerOptions: data.models.structuredOutput.providerOptions,
+            providerOptions: cleanProviderOptions(data.models.structuredOutput.providerOptions),
           }
         : undefined,
       summarizer: data.models?.summarizer?.model
         ? {
             model: data.models.summarizer.model,
-            providerOptions: data.models.summarizer.providerOptions,
+            providerOptions: cleanProviderOptions(data.models.summarizer.providerOptions),
           }
         : undefined,
     },
+    stopWhen: cleanStopWhen(data.stopWhen),
   };
 };