@inkeep/agents-manage-ui 0.6.6 → 0.7.1

package/src/components/graph/graph.tsx

@@ -32,6 +32,8 @@ import type { FullGraphDefinition } from '@/lib/types/graph-full';
 import type { MCPTool } from '@/lib/types/tools';
 import { formatJsonField } from '@/lib/utils';
 import { getErrorSummaryMessage, parseGraphValidationErrors } from '@/lib/utils/graph-error-parser';
+import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
+import { detectOrphanedToolsAndGetWarning } from '@/lib/utils/orphaned-tools-detector';
 import { EdgeType, edgeTypes, initialEdges } from './configuration/edge-types';
 import type { ContextConfig } from './configuration/graph-types';
 import {
@@ -95,20 +97,59 @@ function Flow({
     []
   );
 
+  // Helper to enrich MCP nodes with tool data
+  const enrichNodes = useCallback(
+    (nodes: Node[]): Node[] => {
+      return nodes.map((node) => {
+        if (node.type === NodeType.MCP && node.data && 'toolId' in node.data) {
+          const tool = toolLookup[node.data.toolId as string];
+          if (tool) {
+            let provider = null;
+            provider = getToolTypeAndName(tool).type;
+
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                name: tool.name,
+                imageUrl: tool.imageUrl,
+                provider,
+              },
+            };
+          }
+        }
+        return node;
+      });
+    },
+    [toolLookup]
+  );
+
   const { nodes: graphNodes, edges: graphEdges } = useMemo(() => {
-    return graph
-      ? deserializeGraphData(graph, toolLookup)
+    const result = graph
+      ? deserializeGraphData(graph)
       : { nodes: initialNodes, edges: initialEdges };
-  }, [graph, toolLookup, initialNodes]);
+    return {
+      ...result,
+      nodes: enrichNodes(result.nodes),
+    };
+  }, [graph, enrichNodes, initialNodes]);
 
   // Create selectedTools lookup from graph data
   const selectedToolsLookup = useMemo((): Record<string, Record<string, string[]>> => {
     if (!graph?.agents) return {} as Record<string, Record<string, string[]>>;
 
     const lookup: Record<string, Record<string, string[]>> = {};
-    Object.entries(graph.agents).forEach(([agentId, agent]) => {
-      if ('selectedTools' in agent && agent.selectedTools) {
-        lookup[agentId] = agent.selectedTools as Record<string, string[]>;
+    Object.entries(graph.agents).forEach(([agentId, agentData]) => {
+      if ('canUse' in agentData && agentData.canUse) {
+        const toolsMap: Record<string, string[]> = {};
+        agentData.canUse.forEach((tool) => {
+          if (tool.toolSelection) {
+            toolsMap[tool.toolId] = tool.toolSelection;
+          }
+        });
+        if (Object.keys(toolsMap).length > 0) {
+          lookup[agentId] = toolsMap;
+        }
       }
     });
     return lookup;
@@ -116,7 +157,7 @@ function Flow({
 
   const { screenToFlowPosition } = useReactFlow();
   const {
-    nodes,
+    nodes: storeNodes,
     edges,
     setNodes,
     setEdges,
@@ -129,6 +170,9 @@ function Flow({
     clearSelection,
     markUnsaved,
   } = useGraphStore();
+
+  // Always use enriched nodes for ReactFlow
+  const nodes = useMemo(() => enrichNodes(storeNodes), [storeNodes, enrichNodes]);
   const { nodeId, edgeId, setQueryState, openGraphPane, isOpen } = useSidePane();
   const { errors, showErrors, setErrors, clearErrors, setShowErrors } = useGraphErrors();
 
@@ -444,12 +488,23 @@ function Flow({
   );
 
   const onSubmit = useCallback(async () => {
+    // Check for orphaned tools before saving
+    const warningMessage = detectOrphanedToolsAndGetWarning(nodes, selectedToolsLookup, toolLookup);
+
+    if (warningMessage) {
+      toast.warning(warningMessage, {
+        closeButton: true,
+        duration: 6000,
+      });
+    }
+
     const serializedData = serializeGraphData(
       nodes,
       edges,
       metadata,
       dataComponentLookup,
-      artifactComponentLookup
+      artifactComponentLookup,
+      selectedToolsLookup
     );
 
     const res = await saveGraph(
@@ -499,6 +554,8 @@ function Flow({
     projectId,
     clearErrors,
     setErrors,
+    selectedToolsLookup,
+    toolLookup,
   ]);
 
   return (
@@ -565,6 +622,7 @@ function Flow({
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         selectedToolsLookup={selectedToolsLookup}
+        toolLookup={toolLookup}
       />
       {showPlayground && graph?.id && (
         <Playground

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

@@ -1,21 +1,16 @@
 import { type NodeProps, Position } from '@xyflow/react';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
-import type { MCPTool } from '@/lib/types/tools';
 
-import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
-import { mcpNodeHandleId } from '../configuration/node-types';
+import { type MCPNodeData, mcpNodeHandleId } from '../configuration/node-types';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 
-export function MCPNode(props: NodeProps & { data: MCPTool }) {
+export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const { data, selected } = props;
-  const { name, imageUrl } = data;
-  let provider = null;
-  try {
-    provider = getToolTypeAndName(data).type;
-  } catch (error) {
-    console.error(error);
-  }
+
+  const name = data.name || `Tool: ${data.toolId}`;
+  const imageUrl = data.imageUrl;
+  const provider = data.provider;
 
   return (
     <BaseNode

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

@@ -1,5 +1,5 @@
 import { type Node, useReactFlow } from '@xyflow/react';
-import { Check } from 'lucide-react';
+import { Check, CircleAlert } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { getActiveTools } from '@/app/utils/active-tools';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
@@ -9,17 +9,21 @@ 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 type { MCPTool } from '@/lib/types/tools';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
+import { getCurrentSelectedToolsForNode } from '@/lib/utils/orphaned-tools-detector';
 import type { MCPNodeData } from '../../configuration/node-types';
 
 interface MCPServerNodeEditorProps {
   selectedNode: Node<MCPNodeData>;
   selectedToolsLookup: Record<string, Record<string, string[]>>;
+  toolLookup: Record<string, MCPTool>;
 }
 
 export function MCPServerNodeEditor({
   selectedNode,
   selectedToolsLookup,
+  toolLookup,
 }: MCPServerNodeEditorProps) {
   const { updateNodeData } = useReactFlow();
   const { tenantId, projectId } = useParams<{
@@ -27,63 +31,37 @@ export function MCPServerNodeEditor({
     projectId: string;
   }>();
 
-  const activeTools = getActiveTools({
-    availableTools: selectedNode.data.availableTools,
-    activeTools: selectedNode.data.config?.mcp?.activeTools,
-  });
-
+  // All hooks must be called before any early returns
   const markUnsaved = useGraphStore((state) => state.markUnsaved);
 
-  const getCurrentSelectedTools = (): string[] | null => {
-    // First check if we have temporary selections stored on the node (from recent clicks)
-    if ((selectedNode.data as any).tempSelectedTools !== undefined) {
-      return (selectedNode.data as any).tempSelectedTools;
-    }
-
-    // Otherwise, get from the database/initial state
-    const allSelectedTools = new Set<string>();
-    let hasAnyData = false;
-    let hasEmptyArray = false;
-    let hasNullValue = false;
-
-    Object.values(selectedToolsLookup).forEach((agentTools) => {
-      const toolsForThisMCP = agentTools[selectedNode.data.id];
-      if (toolsForThisMCP !== undefined) {
-        hasAnyData = true;
-        if (Array.isArray(toolsForThisMCP) && toolsForThisMCP.length === 0) {
-          // Empty array = NONE selected
-          hasEmptyArray = true;
-        } else if (toolsForThisMCP === null) {
-          // null = ALL selected
-          hasNullValue = true;
-        } else if (Array.isArray(toolsForThisMCP)) {
-          // Specific tools selected
-          toolsForThisMCP.forEach((tool) => {
-            allSelectedTools.add(tool);
-          });
-        }
-      }
-    });
+  // Only use toolLookup - single source of truth
+  const toolData = toolLookup[selectedNode.data.toolId];
 
-    // If we found a null value, return null (all selected)
-    if (hasNullValue) {
-      return null;
-    }
+  const availableTools = toolData?.availableTools;
 
-    // If we found an empty array, return empty array
-    if (hasEmptyArray) {
-      return [];
-    }
+  const activeTools = getActiveTools({
+    availableTools: availableTools,
+    activeTools: toolData?.config?.mcp?.activeTools,
+  });
 
-    // If no data exists (undefined), default to ALL selected (null)
-    if (!hasAnyData) {
-      return null;
-    }
+  // Handle missing tool data
+  if (!toolData) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <div className="text-sm text-muted-foreground">
+          Tool data not found for {selectedNode.data.toolId}
+        </div>
+      </div>
+    );
+  }
 
-    return Array.from(allSelectedTools);
-  };
+  const selectedTools = getCurrentSelectedToolsForNode(selectedNode, selectedToolsLookup);
 
-  const selectedTools = getCurrentSelectedTools();
+  // Find orphaned tools - tools that are selected but no longer available in activeTools
+  const orphanedTools =
+    selectedTools && Array.isArray(selectedTools)
+      ? selectedTools.filter((toolName) => !activeTools?.some((tool) => tool.name === toolName))
+      : [];
 
   const toggleToolSelection = (toolName: string) => {
     // Handle null case (all tools selected) - convert to array of all tool names
@@ -128,35 +106,35 @@ export function MCPServerNodeEditor({
 
   let provider = null;
   try {
-    provider = getToolTypeAndName(selectedNode.data).type;
+    provider = toolData ? getToolTypeAndName(toolData).type : null;
   } catch (error) {
     console.error(error);
   }
 
   return (
     <div className="space-y-8">
-      {selectedNode.data.imageUrl && (
+      {toolData?.imageUrl && (
         <div className="flex items-center gap-2">
           <MCPToolImage
-            imageUrl={selectedNode.data.imageUrl}
-            name={selectedNode.data.name}
+            imageUrl={toolData.imageUrl}
+            name={toolData.name}
             provider={provider || undefined}
             size={32}
             className="rounded-lg"
           />
-          <span className="font-medium text-sm truncate">{selectedNode.data.name}</span>
+          <span className="font-medium text-sm truncate">{toolData.name}</span>
         </div>
       )}
       <div className="space-y-2">
         <Label htmlFor="node-id">Id</Label>
-        <Input id="node-id" value={selectedNode.data.id} disabled />
+        <Input id="node-id" value={selectedNode.data.toolId} disabled />
       </div>
       <div className="space-y-2">
         <Label htmlFor="name">Name</Label>
         <Input
           id="name"
           name="name"
-          value={selectedNode.data.name || ''}
+          value={toolData?.name || ''}
           onChange={handleInputChange}
           placeholder="MCP server"
           className="w-full"
@@ -168,20 +146,20 @@ export function MCPServerNodeEditor({
         <Input
           id="url"
           name="url"
-          value={selectedNode.data.config?.mcp?.server?.url || ''}
+          value={toolData?.config?.mcp?.server?.url || ''}
           onChange={handleInputChange}
           placeholder="https://mcp.inkeep.com"
           disabled
           className="w-full"
         />
       </div>
-      {selectedNode.data.imageUrl && (
+      {toolData?.imageUrl && (
         <div className="space-y-2">
           <Label htmlFor="imageUrl">Image URL</Label>
           <Input
             id="imageUrl"
             name="imageUrl"
-            value={selectedNode.data.imageUrl || ''}
+            value={toolData.imageUrl || ''}
             onChange={handleInputChange}
             placeholder="https://example.com/icon.png"
             disabled
@@ -199,16 +177,15 @@ export function MCPServerNodeEditor({
             {
               selectedTools === null
                 ? (activeTools?.length ?? 0) // All tools selected
-                : selectedTools.filter((toolName) =>
-                    activeTools?.some((tool) => tool.name === toolName)
-                  ).length // Only count selected tools that are currently active
+                : selectedTools.length // Count all selected tools (including orphaned ones)
             }
           </Badge>
         </div>
         <p className="text-xs text-muted-foreground mb-1.5">Click to select/deselect</p>
-        {activeTools && activeTools.length > 0 && (
+        {(activeTools && activeTools.length > 0) || orphanedTools.length > 0 ? (
           <div className="flex flex-wrap gap-2">
-            {activeTools.map((tool) => {
+            {/* Active tools */}
+            {activeTools?.map((tool) => {
               const isSelected =
                 selectedTools === null
                   ? true // If null, all tools are selected
@@ -239,12 +216,36 @@ export function MCPServerNodeEditor({
                 </Tooltip>
               );
             })}
+
+            {/* Orphaned tools (selected but no longer available) */}
+            {orphanedTools.map((toolName) => (
+              <Tooltip key={`orphaned-${toolName}`}>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="warning"
+                    className="flex items-center gap-1 cursor-pointer transition-colors hover:bg-primary/10 normal-case"
+                    onClick={() => toggleToolSelection(toolName)}
+                  >
+                    {toolName}
+                    <span className="text-xs">
+                      <CircleAlert className="w-2.5 h-2.5" />
+                    </span>
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs text-sm">
+                  <div className="line-clamp-4">
+                    This tool was selected but is not available in the MCP server. Click to remove
+                    it from the selection.
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ))}
           </div>
-        )}
+        ) : null}
       </div>
 
       <ExternalLink
-        href={`/${tenantId}/projects/${projectId}/mcp-servers/${selectedNode.data.id}/edit`}
+        href={`/${tenantId}/projects/${projectId}/mcp-servers/${selectedNode.data.toolId}/edit`}
       >
         Edit MCP Server
       </ExternalLink>

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

@@ -1,68 +1,68 @@
-import { type Node, useReactFlow } from '@xyflow/react'
-import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
-import { fetchMCPTools } from "@/lib/api/tools"
-import type { MCPTool } from "@/lib/types/tools";
-import { NodeType } from '../../../configuration/node-types'
-import { EmptyState } from '../empty-state'
-import { MCPSelectorLoading } from './loading'
-import { MCPServerItem } from './mcp-server-item'
+import { type Node, useReactFlow } from '@xyflow/react';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { fetchMCPTools } from '@/lib/api/tools';
+import type { MCPTool } from '@/lib/types/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
+  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 [tools, setTools] = useState<MCPTool[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const { tenantId, projectId } = useParams<{
-    tenantId: string
-    projectId: string
-  }>()
+    tenantId: string;
+    projectId: string;
+  }>();
 
   useEffect(() => {
     const loadTools = async () => {
       try {
-        setIsLoading(true)
-        setError(null)
-        const mcpTools = await fetchMCPTools(tenantId, projectId)
-        setTools(mcpTools)
+        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)
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load MCP tools';
+        setError(errorMessage);
+        toast.error(errorMessage);
       } finally {
-        setIsLoading(false)
+        setIsLoading(false);
       }
-    }
+    };
 
-    loadTools()
-  }, [tenantId, projectId])
+    loadTools();
+  }, [tenantId, projectId]);
 
-  return { tools, isLoading, error }
-}
+  return { tools, isLoading, error };
+};
 
 export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
-  const { updateNode } = useReactFlow()
+  const { updateNode } = useReactFlow();
   const { tenantId, projectId } = useParams<{
-    tenantId: string
-    projectId: string
-  }>()
-  const { tools, isLoading, error } = useFetchAvailableMCPs()
+    tenantId: string;
+    projectId: string;
+  }>();
+  const { tools, isLoading, error } = useFetchAvailableMCPs();
 
   const handleSelect = (mcp: MCPTool) => {
     updateNode(selectedNode.id, {
       type: NodeType.MCP,
-      data: { ...mcp },
-    })
-  }
+      data: { toolId: mcp.id },
+    });
+  };
 
   if (isLoading) {
-    return <MCPSelectorLoading title="Select MCP server" />
+    return <MCPSelectorLoading title="Select MCP server" />;
   }
 
   if (error) {
@@ -72,7 +72,7 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
         actionText="Create MCP server"
         actionHref={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
       />
-    )
+    );
   }
 
   if (!tools?.length) {
@@ -82,7 +82,7 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
         actionText="Create MCP server"
         actionHref={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
       />
-    )
+    );
   }
 
   return (
@@ -96,5 +96,5 @@ export function MCPSelector({ selectedNode }: { selectedNode: Node }) {
         </div>
       </div>
     </div>
-  )
+  );
 }

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

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
 import type { DataComponent } from '@/lib/api/data-components';
+import type { MCPTool } from '@/lib/types/tools';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
 import { edgeTypeMap } from '../configuration/edge-types';
 import {
@@ -31,6 +32,7 @@ interface SidePaneProps {
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   selectedToolsLookup: Record<string, Record<string, string[]>>;
+  toolLookup: Record<string, MCPTool>;
 }
 
 export function SidePane({
@@ -42,6 +44,7 @@ export function SidePane({
   dataComponentLookup,
   artifactComponentLookup,
   selectedToolsLookup,
+  toolLookup,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
@@ -111,6 +114,7 @@ export function SidePane({
             <MCPServerNodeEditor
               selectedNode={selectedNode as Node<MCPNodeData>}
               selectedToolsLookup={selectedToolsLookup}
+              toolLookup={toolLookup}
             />
           );
         }
@@ -131,6 +135,7 @@ export function SidePane({
     getFieldErrorMessage,
     getFirstErrorField,
     selectedToolsLookup,
+    toolLookup,
   ]);
 
   const showBackButton = useMemo(() => {