@inkeep/agents-manage-ui 0.1.0

package/src/components/graph/sidepane/nodes/mcp-node-editor.tsx

@@ -0,0 +1,140 @@
+import { type Node, useReactFlow } from '@xyflow/react';
+import { ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { getActiveTools } from '@/app/utils/active-tools';
+import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
+import type { MCPNodeData } from '../../configuration/node-types';
+
+interface MCPServerNodeEditorProps {
+  selectedNode: Node<MCPNodeData>;
+}
+
+export function MCPServerNodeEditor({ selectedNode }: MCPServerNodeEditorProps) {
+  const { updateNodeData } = useReactFlow();
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  const activeTools = getActiveTools({
+    availableTools: selectedNode.data.availableTools,
+    activeTools: selectedNode.data.config?.mcp?.activeTools,
+  });
+
+  const markUnsaved = useGraphStore((state) => state.markUnsaved);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    if (selectedNode) {
+      updateNodeData(selectedNode.id, { [name]: value });
+      markUnsaved();
+    }
+  };
+
+  let provider = null;
+  try {
+    provider = getToolTypeAndName(selectedNode.data).type;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div className="space-y-8">
+      {selectedNode.data.imageUrl && (
+        <div className="flex items-center gap-2">
+          <MCPToolImage
+            imageUrl={selectedNode.data.imageUrl}
+            name={selectedNode.data.name}
+            provider={provider || undefined}
+            size={32}
+            className="rounded-lg"
+          />
+          <span className="font-medium text-sm truncate">{selectedNode.data.name}</span>
+        </div>
+      )}
+      <div className="space-y-2">
+        <Label htmlFor="node-id">Id</Label>
+        <Input id="node-id" value={selectedNode.data.id} disabled />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="name">Name</Label>
+        <Input
+          id="name"
+          name="name"
+          value={selectedNode.data.name || ''}
+          onChange={handleInputChange}
+          placeholder="MCP Server"
+          className="w-full"
+          disabled
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="url">URL</Label>
+        <Input
+          id="url"
+          name="url"
+          value={selectedNode.data.config?.mcp?.server?.url || ''}
+          onChange={handleInputChange}
+          placeholder="https://mcp.inkeep.com"
+          disabled
+          className="w-full"
+        />
+      </div>
+      {selectedNode.data.imageUrl && (
+        <div className="space-y-2">
+          <Label htmlFor="imageUrl">Image URL</Label>
+          <Input
+            id="imageUrl"
+            name="imageUrl"
+            value={selectedNode.data.imageUrl || ''}
+            onChange={handleInputChange}
+            placeholder="https://example.com/icon.png"
+            disabled
+            className="w-full"
+          />
+        </div>
+      )}
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <Label>Active tools</Label>
+          <Badge
+            variant="code"
+            className="border-none px-2 text-[10px] text-gray-700 dark:text-gray-300"
+          >
+            {activeTools?.length ?? 0}
+          </Badge>
+        </div>
+        {activeTools && activeTools.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {activeTools.map((tool) => (
+              <Tooltip key={tool.name}>
+                <TooltipTrigger asChild>
+                  <Badge variant="code" className="flex items-center gap-2">
+                    {tool.name}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs text-sm">
+                  <div className="line-clamp-4">{tool.description}</div>
+                </TooltipContent>
+              </Tooltip>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Link
+        href={`/${tenantId}/projects/${projectId}/mcp-servers/${selectedNode.data.id}/edit`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ExternalLink className="w-3 h-3" />
+        Click here to edit
+      </Link>
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/mcp-selector/loading.tsx

@@ -0,0 +1,20 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface MCPSelectorLoadingProps {
+  title: string;
+}
+
+export function MCPSelectorLoading({ title }: MCPSelectorLoadingProps) {
+  return (
+    <div>
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium mb-2">{title}</h3>
+        <div className="flex flex-col gap-2 min-w-0 min-h-0">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="w-full h-[72px] rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { type Node, useReactFlow } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { fetchMCPTools, type MCPTool } from '@/lib/api/tools';
+import { NodeType } from '../../../configuration/node-types';
+import { EmptyState } from '../empty-state';
+import { MCPSelectorLoading } from './loading';
+import { MCPServerItem } from './mcp-server-item';
+
+interface MCPSelectorState {
+  tools: MCPTool[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+const useFetchAvailableMCPs = (): MCPSelectorState => {
+  const [tools, setTools] = useState<MCPTool[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  useEffect(() => {
+    const loadTools = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const mcpTools = await fetchMCPTools(tenantId, projectId);
+        setTools(mcpTools);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load MCP tools';
+        setError(errorMessage);
+        toast.error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadTools();
+  }, [tenantId, projectId]);
+
+  return { tools, isLoading, error };
+};
+
+export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
+  const { updateNode } = useReactFlow();
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+  const { tools, isLoading, error } = useFetchAvailableMCPs();
+
+  const handleSelect = (mcp: MCPTool) => {
+    updateNode(selectedNode.id, {
+      type: NodeType.MCP,
+      data: { ...mcp },
+    });
+  };
+
+  if (isLoading) {
+    return <MCPSelectorLoading title="Select MCP Server" />;
+  }
+
+  if (error) {
+    return (
+      <EmptyState
+        message="Something went wrong."
+        actionText="Create MCP server"
+        actionHref={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
+      />
+    );
+  }
+
+  if (!tools?.length) {
+    return (
+      <EmptyState
+        message="No MCP servers found."
+        actionText="Create MCP server"
+        actionHref={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium mb-2">Select MCP Server</h3>
+        <div className="flex flex-col gap-2 min-w-0 min-h-0">
+          {tools.map((mcp: MCPTool) => (
+            <MCPServerItem key={mcp.id} mcp={mcp} onClick={handleSelect} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/mcp-selector/mcp-server-item.tsx

@@ -0,0 +1,57 @@
+import { getActiveTools } from '@/app/utils/active-tools';
+import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import type { MCPTool } from '@/lib/api/tools';
+
+interface MCPServerItemProps {
+  mcp: MCPTool;
+  onClick: (mcp: MCPTool) => void;
+}
+
+export function MCPServerItem({ mcp, onClick }: MCPServerItemProps) {
+  const server = mcp.config?.mcp?.server;
+  const { id, name, availableTools, imageUrl, config } = mcp;
+
+  const activeTools = getActiveTools({
+    availableTools,
+    activeTools: config?.mcp?.activeTools,
+  });
+
+  const toolCount = activeTools?.length ?? 0;
+
+  return (
+    <Button
+      variant="unstyled"
+      size="unstyled"
+      type="button"
+      key={id}
+      className="w-full p-3 rounded-lg border cursor-pointer transition-colors border-border hover:bg-muted/50 text-left inline-block"
+      id={id}
+      onClick={() => onClick(mcp)}
+    >
+      <div className="flex items-start gap-3">
+        <MCPToolImage
+          imageUrl={imageUrl}
+          name={name}
+          provider={name}
+          size={32}
+          className="flex-shrink-0 mt-0.5"
+        />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-1 gap-2 min-w-0 truncate">
+            <span className="font-medium text-sm truncate">{name}</span>
+            {availableTools && (
+              <div>
+                <Badge variant="code" className="text-2xs flex-shrink-0">
+                  {toolCount === 1 ? '1 tool' : `${toolCount} tools`}
+                </Badge>
+              </div>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground truncate">{server?.url}</p>
+        </div>
+      </div>
+    </Button>
+  );
+}

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

@@ -0,0 +1,202 @@
+import { ChevronRight } from 'lucide-react';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
+import type { AgentNodeData } from '@/components/graph/configuration/node-types';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import {
+  InheritanceIndicator,
+  getModelInheritanceStatus,
+} from '@/components/ui/inheritance-indicator';
+import { ModelSelector } from './model-selector';
+
+interface ModelSectionProps {
+  models: AgentNodeData['models'];
+  updatePath: (path: string, value: any) => void;
+  projectModels?: any;
+  graphModels?: any;
+}
+
+export function ModelSection({
+  models,
+  updatePath,
+  projectModels,
+  graphModels,
+}: ModelSectionProps) {
+  const hasAdvancedOptions = models?.structuredOutput || models?.summarizer;
+  const hasAnyModel = models?.base || models?.structuredOutput || models?.summarizer;
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <ModelSelector
+          value={models?.base?.model || ''}
+          onValueChange={(modelValue) => {
+            updatePath('models.base.model', modelValue || undefined);
+          }}
+          label={
+            <div className="flex items-center gap-2">
+              Base Model
+              <InheritanceIndicator
+                {...getModelInheritanceStatus(
+                  'agent',
+                  models?.base?.model,
+                  graphModels?.base?.model,
+                  projectModels?.base?.model
+                )}
+                size="sm"
+              />
+            </div>
+          }
+          tooltip="Primary model for general agent responses"
+        />
+      </div>
+
+      <Collapsible
+        defaultOpen={!!hasAdvancedOptions}
+        className="border rounded-md bg-muted/30 dark:bg-muted/20"
+      >
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center justify-start gap-1.5 p-0 h-auto font-normal text-xs text-foreground/80 dark:text-foreground/90 hover:text-foreground hover:!bg-transparent transition-colors group w-full py-2 px-4"
+          >
+            <ChevronRight className="h-3.5 w-3.5 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+            Advanced Model Options
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-8 mt-4 data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=open]:animate-[collapsible-down_200ms_ease-out] overflow-hidden px-4 pb-6">
+          <div className="relative">
+            <ModelSelector
+              value={models?.structuredOutput?.model || ''}
+              onValueChange={(modelValue) => {
+                updatePath('models.structuredOutput.model', modelValue || undefined);
+              }}
+              label={
+                <div className="flex items-center gap-2">
+                  Structured output model
+                  <InheritanceIndicator
+                    {...getModelInheritanceStatus(
+                      'agent',
+                      models?.structuredOutput?.model,
+                      graphModels?.structuredOutput?.model,
+                      projectModels?.structuredOutput?.model
+                    )}
+                    size="sm"
+                  />
+                </div>
+              }
+              tooltip="The model used for structured output and data components (defaults to base model)"
+            />
+          </div>
+          <div className="relative">
+            <ModelSelector
+              value={models?.summarizer?.model || ''}
+              onValueChange={(modelValue) => {
+                updatePath('models.summarizer.model', modelValue || undefined);
+              }}
+              label={
+                <div className="flex items-center gap-2">
+                  Summarizer model
+                  <InheritanceIndicator
+                    {...getModelInheritanceStatus(
+                      'agent',
+                      models?.summarizer?.model,
+                      graphModels?.summarizer?.model,
+                      projectModels?.summarizer?.model
+                    )}
+                    size="sm"
+                  />
+                </div>
+              }
+              tooltip="The model used for summarization tasks (defaults to base model)"
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Base Model Provider Options */}
+      {models?.base?.model && (
+        <ExpandableJsonEditor
+          name="base-provider-options"
+          label="Base Model Provider Options"
+          onChange={(value) => {
+            updatePath('models.base.providerOptions', value);
+          }}
+          value={
+            models?.base?.providerOptions
+              ? JSON.stringify(models.base.providerOptions, null, 2)
+              : ''
+          }
+          placeholder={`{
+  "temperature": 0.7,
+  "maxTokens": 2048
+}`}
+        />
+      )}
+
+      {/* Structured Output Model Provider Options */}
+      {models?.structuredOutput?.model && (
+        <ExpandableJsonEditor
+          name="structured-provider-options"
+          label="Structured Output Model Provider Options"
+          onChange={(value) => {
+            updatePath('models.structuredOutput.providerOptions', value);
+          }}
+          value={
+            models?.structuredOutput?.providerOptions
+              ? JSON.stringify(models.structuredOutput.providerOptions, null, 2)
+              : ''
+          }
+          placeholder={`{
+  "temperature": 0.1,
+  "maxTokens": 1024
+}`}
+        />
+      )}
+
+      {/* Summarizer Model Provider Options */}
+      {models?.summarizer?.model && (
+        <ExpandableJsonEditor
+          name="summarizer-provider-options"
+          label="Summarizer Model Provider Options"
+          onChange={(value) => {
+            updatePath('models.summarizer.providerOptions', value);
+          }}
+          value={
+            models?.summarizer?.providerOptions
+              ? JSON.stringify(models.summarizer.providerOptions, null, 2)
+              : ''
+          }
+          placeholder={`{
+  "temperature": 0.3,
+  "maxTokens": 1024
+}`}
+        />
+      )}
+
+      <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 model inheritance works:
+        </p>
+        <ul className="space-y-1 text-blue-800 dark:text-blue-200">
+          <li>
+            • <strong>Models</strong>: Project → Graph → Agent (partial inheritance - missing models
+            only)
+          </li>
+          <li>
+            • <strong>Individual model types</strong> inherit independently (base, structuredOutput,
+            summarizer)
+          </li>
+          <li>
+            • <strong>Explicit settings</strong> always take precedence over inherited values
+          </li>
+          <li>
+            • <strong>Provider options</strong> are inherited along with the model if not explicitly
+            set
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+'use client';
+
+import { Check, ChevronsUpDown, Info, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { modelOptions } from '@/components/graph/configuration/model-options';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+
+interface ModelSelectorProps {
+  tooltip?: string;
+  label?: React.ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  inheritedValue?: string;
+}
+
+export function ModelSelector({
+  label = 'Model',
+  tooltip,
+  value,
+  onValueChange,
+  placeholder = 'Select a model...',
+  inheritedValue,
+}: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedModel = useMemo(() => {
+    for (const [_provider, models] of Object.entries(modelOptions)) {
+      const model = models.find((m) => m.value === value);
+      if (model) return model;
+    }
+    return value ? { value, label: value } : null;
+  }, [value]);
+
+  const inheritedModel = useMemo(() => {
+    if (!inheritedValue) return null;
+    for (const [_provider, models] of Object.entries(modelOptions)) {
+      const model = models.find((m) => m.value === inheritedValue);
+      if (model) return model;
+    }
+    return inheritedValue ? { value: inheritedValue, label: inheritedValue } : null;
+  }, [inheritedValue]);
+
+  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>
+        )}
+      </Label>
+      <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 ? 'rounded-r-none border-r-0' : 'rounded-r-md'
+              )}
+            >
+              {selectedModel ? (
+                <div className="truncate">{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"
+          >
+            <Command>
+              <CommandInput placeholder="Search models..." />
+              <CommandList className="max-h-64">
+                <CommandEmpty>
+                  <div className="text-muted-foreground">No model found.</div>
+                </CommandEmpty>
+                {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>
+        <div
+          className={cn(
+            'transition-all duration-200 ease-in-out overflow-hidden',
+            selectedModel ? '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}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}