mcpgraph-ux 0.1.2 → 0.1.4

package/app/api/tools/[toolName]/route.ts

@@ -1,23 +1,16 @@
 import { NextResponse } from 'next/server';
-import { McpGraphApi } from 'mcpgraph';
+import { 
+  type ExecutionOptions, 
+  type ExecutionHooks, 
+  type ExecutionResult, 
+  type NodeDefinition,
+  ToolCallMcpError,
+  ToolCallError
+} from 'mcpgraph';
+import { getApi } from '@/lib/mcpGraphApi';
+import { sendExecutionEvent, closeExecutionStream } from '@/lib/executionStreamServer';
+import { registerController, unregisterController, getController } from '@/lib/executionController';
 
-// Force dynamic rendering - this route requires runtime config
-export const dynamic = 'force-dynamic';
-
-let apiInstance: McpGraphApi | null = null;
-
-function getApi(): McpGraphApi {
-  const configPath = process.env.MCPGRAPH_CONFIG_PATH;
-  if (!configPath) {
-    throw new Error('MCPGRAPH_CONFIG_PATH environment variable is not set');
-  }
-
-  if (!apiInstance) {
-    apiInstance = new McpGraphApi(configPath);
-  }
-
-  return apiInstance;
-}
 
 export async function GET(
   request: Request,
@@ -48,16 +41,340 @@ export async function POST(
   request: Request,
   { params }: { params: { toolName: string } }
 ) {
+  let executionId: string | undefined;
   try {
     const api = getApi();
-    const body = await request.json();
+    const body = await request.json() as {
+      args?: Record<string, unknown>;
+      executionId?: string;
+      options?: ExecutionOptions;
+    };
     const args = body.args || {};
+    executionId = body.executionId;
+    const executionOptions = body.options;
+    
+    // Log breakpoints received
+    const breakpointsReceived = executionOptions?.breakpoints || [];
+    console.log(`[API] Received breakpoints: ${breakpointsReceived.length > 0 ? breakpointsReceived.join(', ') : 'none'}`);
+
+    // If executionId is provided, set up hooks to stream events via SSE
+    // Store breakpoints for use in hooks (controller may not be available yet)
+    const breakpointsList = executionOptions?.breakpoints || [];
+    let hooks: ExecutionHooks | undefined;
+    if (executionId) {
+      const execId = executionId; // Capture in const for closure
+      console.log(`[API] Setting up hooks for executionId: ${execId}, breakpoints: ${breakpointsList.join(', ')}`);
+      hooks = {
+        onNodeStart: async (executionIndex, nodeId, node, context) => {
+          console.log(`[API] onNodeStart hook called for node: ${nodeId}, executionIndex: ${executionIndex}`);
+          
+          // Check if this node should have a breakpoint
+          const controller = getController(execId);
+          if (controller && breakpointsList.includes(nodeId)) {
+            const controllerBreakpoints = controller.getBreakpoints();
+            const state = controller.getState();
+            console.log(`[API] WARNING: onNodeStart called for node ${nodeId} which has a breakpoint!`);
+            console.log(`[API] Controller breakpoints: ${controllerBreakpoints.length > 0 ? controllerBreakpoints.join(', ') : 'none'}`);
+            console.log(`[API] Controller status: ${state.status}, currentNodeId: ${state.currentNodeId}`);
+          }
+          
+          sendExecutionEvent(execId, 'nodeStart', {
+            nodeId,
+            nodeType: node.type,
+            executionIndex,
+            context, // Send context so client can determine input
+            timestamp: Date.now(),
+          });
+          
+          // Note: mcpGraph should check breakpoints internally before executing nodes
+          // If we reach here, the node is starting. The controller's breakpoint checking
+          // should have paused execution before this hook is called.
+          
+          return true; // Continue execution
+        },
+        onNodeComplete: async (executionIndex, nodeId, node, input, output, duration) => {
+          sendExecutionEvent(execId, 'nodeComplete', {
+            nodeId,
+            nodeType: node.type,
+            executionIndex,
+            input,
+            output,
+            duration,
+            timestamp: Date.now(),
+          });
+        },
+        onNodeError: async (executionIndex, nodeId, node, error, context) => {
+          // Log the entire error object for debugging
+          console.log(`[API] onNodeError - Full error object dump:`);
+          console.log(`[API] Error type: ${error.constructor.name}`);
+          console.log(`[API] Error instanceof ToolCallMcpError: ${error instanceof ToolCallMcpError}`);
+          console.log(`[API] Error instanceof ToolCallError: ${error instanceof ToolCallError}`);
+          console.log(`[API] Error instanceof Error: ${error instanceof Error}`);
+          console.log(`[API] Error object keys:`, Object.keys(error));
+          console.log(`[API] Full error object:`, JSON.stringify(error, Object.getOwnPropertyNames(error), 2));
+          console.log(`[API] Error properties:`, {
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+            code: (error as any).code,
+            data: (error as any).data,
+            stderr: (error as any).stderr,
+            result: (error as any).result,
+          });
+          
+          // Type-safe extraction of error properties based on error type
+          const errorData: {
+            message: string;
+            stack?: string;
+            code?: number;
+            data?: unknown;
+            stderr?: string[]; // For ToolCallMcpError
+            result?: unknown; // For ToolCallError
+            errorType: 'mcp' | 'tool' | 'unknown';
+          } = {
+            message: error.message,
+            stack: error.stack,
+            errorType: 'unknown',
+          };
+
+          // Check for ToolCallMcpError (MCP protocol-level error with stderr)
+          if (error instanceof ToolCallMcpError) {
+            console.log(`[API] Detected ToolCallMcpError - stderr:`, error.stderr);
+            errorData.errorType = 'mcp';
+            errorData.code = error.code;
+            errorData.data = error.data;
+            errorData.stderr = error.stderr;
+          }
+          // Check for ToolCallError (tool returned error response)
+          else if (error instanceof ToolCallError) {
+            console.log(`[API] Detected ToolCallError - result:`, error.result);
+            errorData.errorType = 'tool';
+            errorData.result = error.result;
+          }
+          // Fallback: check if it's a generic McpError (has code property)
+          else if (error instanceof Error && 'code' in error && typeof (error as { code: unknown }).code === 'number') {
+            console.log(`[API] Detected generic McpError-like error`);
+            errorData.errorType = 'mcp';
+            errorData.code = (error as { code: number }).code;
+            if ('data' in error) {
+              errorData.data = (error as { data: unknown }).data;
+            }
+          }
+          
+          console.log(`[API] Final errorData being sent:`, JSON.stringify(errorData, null, 2));
+
+          sendExecutionEvent(execId, 'nodeError', {
+            nodeId,
+            nodeType: node.type,
+            executionIndex,
+            input: context, // Include context as input (mcpGraph 0.1.19+ provides actual context)
+            error: errorData,
+            timestamp: Date.now(),
+          });
+        },
+        onPause: async (executionIndex, nodeId, context) => {
+          console.log(`[API] onPause hook called for node: ${nodeId}, executionIndex: ${executionIndex}`);
+          
+          // Look up node type from the tool
+          const tool = api.getTool(params.toolName);
+          let nodeType = 'unknown';
+          if (tool && 'nodes' in tool && Array.isArray(tool.nodes)) {
+            const node = tool.nodes.find((n: NodeDefinition) => n.id === nodeId);
+            nodeType = node?.type || 'unknown';
+          }
+          
+          sendExecutionEvent(execId, 'pause', {
+            nodeId,
+            nodeType,
+            executionIndex,
+            context, // Include context so client can show input for pending node
+            timestamp: Date.now(),
+          });
+          // Send stateUpdate to ensure UI status is updated
+          sendExecutionEvent(execId, 'stateUpdate', {
+            status: 'paused',
+            currentNodeId: nodeId,
+            timestamp: Date.now(),
+          });
+        },
+        onResume: async () => {
+          sendExecutionEvent(execId, 'resume', {
+            timestamp: Date.now(),
+          });
+        },
+      };
+    }
+
+    // Merge with provided hooks if any
+    const finalOptions: ExecutionOptions = {
+      ...executionOptions,
+      hooks: executionOptions?.hooks
+        ? {
+            ...hooks,
+            ...executionOptions.hooks,
+            // Merge hook functions - call both
+            onNodeStart: async (executionIndex, nodeId, node, context) => {
+              const hook1 = hooks?.onNodeStart;
+              const hook2 = executionOptions.hooks?.onNodeStart;
+              const result1 = hook1 ? await hook1(executionIndex, nodeId, node, context) : true;
+              const result2 = hook2 ? await hook2(executionIndex, nodeId, node, context) : true;
+              return result1 && result2;
+            },
+            onNodeComplete: async (executionIndex, nodeId, node, input, output, duration) => {
+              await hooks?.onNodeComplete?.(executionIndex, nodeId, node, input, output, duration);
+              await executionOptions.hooks?.onNodeComplete?.(executionIndex, nodeId, node, input, output, duration);
+            },
+            onNodeError: async (executionIndex, nodeId, node, error, context) => {
+              await hooks?.onNodeError?.(executionIndex, nodeId, node, error, context);
+              await executionOptions.hooks?.onNodeError?.(executionIndex, nodeId, node, error, context);
+            },
+            onPause: async (executionIndex, nodeId, context) => {
+              await hooks?.onPause?.(executionIndex, nodeId, context);
+              await executionOptions.hooks?.onPause?.(executionIndex, nodeId, context);
+            },
+            onResume: async () => {
+              await hooks?.onResume?.();
+              await executionOptions.hooks?.onResume?.();
+            },
+          }
+        : hooks,
+      breakpoints: executionOptions?.breakpoints,
+      enableTelemetry: executionOptions?.enableTelemetry ?? true, // Enable by default for UX
+    };
+
+    console.log(`[API] Executing tool ${params.toolName} with executionId: ${executionId || 'none'}`);
+    const finalBreakpoints = finalOptions.breakpoints || [];
+    console.log(`[API] Final options breakpoints: ${finalBreakpoints.length > 0 ? finalBreakpoints.join(', ') : 'none'}`);
+    console.log(`[API] Final options object:`, JSON.stringify({ 
+      breakpoints: finalBreakpoints, 
+      enableTelemetry: finalOptions.enableTelemetry,
+      hasHooks: !!finalOptions.hooks
+    }, null, 2));
+    
+    // Start execution and get controller directly (mcpGraph 0.1.11+ returns both)
+    const { promise: executionPromise, controller } = api.executeTool(params.toolName, args, finalOptions);
+    
+    console.log(`[API] executeTool returned controller: ${controller ? 'present' : 'null'}, executionId: ${executionId || 'none'}`);
+    
+    // Register controller immediately if we have executionId and controller
+    if (executionId && controller) {
+      const execId = executionId; // Capture in const for closure
+      registerController(execId, controller);
+      console.log(`[API] Registered controller for executionId: ${execId}`);
+      
+      // Log breakpoints on controller
+      const controllerBreakpoints = controller.getBreakpoints();
+      console.log(`[API] Controller breakpoints: ${controllerBreakpoints.length > 0 ? controllerBreakpoints.join(', ') : 'none'}`);
+    } else {
+      if (!executionId) {
+        console.log(`[API] WARNING: No executionId provided, controller not registered`);
+      }
+      if (!controller) {
+        console.log(`[API] WARNING: Controller is null, cannot register. Hooks: ${!!finalOptions.hooks}, Breakpoints: ${finalBreakpoints.length > 0 ? finalBreakpoints.join(', ') : 'none'}`);
+      }
+    }
+    
+    const result = await executionPromise;
+    console.log(`[API] Tool execution completed, result:`, result.result ? 'present' : 'missing');
+
+    // Send completion event and close stream
+    if (executionId) {
+      const execId = executionId; // Capture in const for closure
+      console.log(`[API] Sending executionComplete event for executionId: ${execId}`);
+      
+      // Fetch input contexts for all execution records BEFORE unregistering controller
+      // Use the controller's context directly since api.getContextForExecution() requires active controller
+      const controller = getController(execId);
+      console.log(`[API] Fetching input contexts for ${result.executionHistory?.length || 0} records`);
+      const executionHistoryWithInput = (result.executionHistory || []).map((record) => {
+        console.log(`[API] Processing record: nodeId=${record.nodeId}, executionIndex=${record.executionIndex}`);
+        try {
+          let context: Record<string, unknown> | null = null;
+          if (controller) {
+            const state = controller.getState();
+            context = state.context.getContextForExecution(record.executionIndex);
+          } else {
+            console.warn(`[API] Controller not found for ${execId}, trying API method`);
+            context = api.getContextForExecution(record.executionIndex);
+          }
+          console.log(`[API] Got context for ${record.nodeId}:`, context ? 'present' : 'null', context);
+          return {
+            ...record,
+            input: context || undefined,
+          };
+        } catch (error) {
+          console.error(`[API] Error getting context for executionIndex ${record.executionIndex}:`, error);
+          return record;
+        }
+      });
+      console.log(`[API] Final execution history with input:`, JSON.stringify(executionHistoryWithInput, null, 2));
+
+      sendExecutionEvent(execId, 'executionComplete', {
+        result: result.result,
+        executionHistory: executionHistoryWithInput,
+        telemetry: result.telemetry
+          ? {
+              ...result.telemetry,
+              nodeDurations: Object.fromEntries(result.telemetry.nodeDurations),
+              nodeCounts: Object.fromEntries(result.telemetry.nodeCounts),
+            }
+          : undefined,
+        timestamp: Date.now(),
+      });
+      // Close stream immediately - enqueue is synchronous, event is already sent
+      console.log(`[API] Closing stream for executionId: ${execId}`);
+      closeExecutionStream(execId);
+      unregisterController(execId);
+    }
 
-    const result = await api.executeTool(params.toolName, args);
+    // Serialize telemetry Maps for JSON response
+    const responseResult = {
+      ...result,
+      telemetry: result.telemetry
+        ? {
+            ...result.telemetry,
+            nodeDurations: Object.fromEntries(result.telemetry.nodeDurations),
+            nodeCounts: Object.fromEntries(result.telemetry.nodeCounts),
+          }
+        : undefined,
+    };
     
-    return NextResponse.json({ result });
+    return NextResponse.json({ result: responseResult });
   } catch (error) {
     console.error('Error executing tool:', error);
+    
+    // Check if execution was stopped (not a real error)
+    const isStopped = error instanceof Error && error.message === 'Execution was stopped';
+    
+    if (executionId) {
+      const execId = executionId; // Capture in const for closure
+      
+      if (isStopped) {
+        // Execution was stopped by user - send stopped event, not error
+        sendExecutionEvent(execId, 'executionStopped', {
+          timestamp: Date.now(),
+        });
+      } else {
+        // Real error occurred
+        sendExecutionEvent(execId, 'executionError', {
+          error: error instanceof Error ? error.message : 'Unknown error',
+          timestamp: Date.now(),
+        });
+      }
+      
+      // Close stream immediately - enqueue is synchronous, event is already sent
+      closeExecutionStream(execId);
+      unregisterController(execId);
+    }
+    
+    // If stopped, return success (stopping is intentional)
+    if (isStopped) {
+      return NextResponse.json({ 
+        result: null,
+        stopped: true 
+      });
+    }
+    
     return NextResponse.json(
       { error: error instanceof Error ? error.message : 'Unknown error' },
       { status: 500 }

package/app/api/tools/route.ts

@@ -1,24 +1,9 @@
 import { NextResponse } from 'next/server';
-import { McpGraphApi } from 'mcpgraph';
+import { getApi } from '@/lib/mcpGraphApi';
 
 // Force dynamic rendering - this route requires runtime config
 export const dynamic = 'force-dynamic';
 
-let apiInstance: McpGraphApi | null = null;
-
-function getApi(): McpGraphApi {
-  const configPath = process.env.MCPGRAPH_CONFIG_PATH;
-  if (!configPath) {
-    throw new Error('MCPGRAPH_CONFIG_PATH environment variable is not set');
-  }
-
-  if (!apiInstance) {
-    apiInstance = new McpGraphApi(configPath);
-  }
-
-  return apiInstance;
-}
-
 export async function GET() {
   try {
     const api = getApi();

package/app/page.module.css

@@ -33,7 +33,9 @@
   width: 300px;
   background-color: #fff;
   border-right: 1px solid #e0e0e0;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .content {
@@ -43,35 +45,79 @@
   overflow: hidden;
 }
 
-.graphSection {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.testerSection {
+  background-color: #fff;
+  padding: 0.75rem 1.5rem;
   border-bottom: 1px solid #e0e0e0;
-  background-color: #fafafa;
+  flex-shrink: 0;
 }
 
-.graphSection h2 {
-  padding: 1rem 1.5rem;
+.testerSection h2 {
   font-size: 1.1rem;
   font-weight: 600;
+  margin-bottom: 0.5rem;
   color: #333;
-  border-bottom: 1px solid #e0e0e0;
+}
+
+.bottomSection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
   background-color: #fff;
 }
 
-.testerSection {
+.debugControlsHeader {
+  flex-shrink: 0;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  border-radius: 8px 8px 0 0;
+}
+
+.graphSection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.graphHistoryContainer {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+
+.historySection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   background-color: #fff;
-  padding: 1.5rem;
-  overflow-y: auto;
-  max-height: 400px;
+  overflow: hidden;
+  min-width: 0;
 }
 
-.testerSection h2 {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  color: #333;
+
+.emptyHistory {
+  padding: 2rem;
+  text-align: center;
+  color: #666;
+  font-style: italic;
+}
+
+.historySection > :global(.container) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .loading,

package/app/page.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import GraphVisualization from '@/components/GraphVisualization';
+import { useEffect, useState, useRef } from 'react';
 import ToolList from '@/components/ToolList';
 import ToolTester from '@/components/ToolTester';
+import InputForm, { type InputFormHandle } from '@/components/InputForm';
+import { ServerConfig, McpServers } from '@/components/ServerDetails';
 import styles from './page.module.css';
 
 interface Tool {
@@ -16,27 +17,23 @@ interface Tool {
 export default function Home() {
   const [tools, setTools] = useState<Tool[]>([]);
   const [selectedTool, setSelectedTool] = useState<string | null>(null);
-  const [graphData, setGraphData] = useState<{ nodes: any[]; edges: any[] } | null>(null);
+  const [graphData, setGraphData] = useState<{ nodes: Array<{ id: string; type: string; data: Record<string, unknown>; position: { x: number; y: number } }>; edges: Array<{ id: string; source: string; target: string; label?: string }> } | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [serverDetails, setServerDetails] = useState<any>(null);
+  const inputFormRef = useRef<InputFormHandle>(null);
+  const toolTesterFormSubmitRef = useRef<((formData: Record<string, any>, startPaused: boolean) => void) | null>(null);
 
   useEffect(() => {
-    // Load tools and graph data
-    Promise.all([
-      fetch('/api/tools').then(res => res.json()),
-      fetch('/api/graph').then(res => res.json()),
-    ])
-      .then(([toolsRes, graphRes]) => {
+    // Load tools and server config
+    fetch('/api/tools')
+      .then(res => res.json())
+      .then(toolsRes => {
         if (toolsRes.error) {
           setError(toolsRes.error);
           return;
         }
-        if (graphRes.error) {
-          setError(graphRes.error);
-          return;
-        }
         setTools(toolsRes.tools);
-        setGraphData({ nodes: graphRes.nodes, edges: graphRes.edges });
         if (toolsRes.tools.length > 0) {
           setSelectedTool(toolsRes.tools[0].name);
         }
@@ -49,6 +46,27 @@ export default function Home() {
       });
   }, []);
 
+  // Load graph data and server config when tool is selected
+  useEffect(() => {
+    if (!selectedTool) return;
+    
+    fetch(`/api/graph?toolName=${encodeURIComponent(selectedTool)}`)
+      .then(res => res.json())
+      .then(graphRes => {
+        if (graphRes.error) {
+          setError(graphRes.error);
+          return;
+        }
+        setGraphData({ nodes: graphRes.nodes, edges: graphRes.edges });
+        if (graphRes.config) {
+          setServerDetails(graphRes.config);
+        }
+      })
+      .catch(err => {
+        setError(err.message);
+      });
+  }, [selectedTool]);
+
   if (loading) {
     return (
       <div className={styles.container}>
@@ -77,31 +95,47 @@ export default function Home() {
 
       <div className={styles.main}>
         <div className={styles.sidebar}>
+          {serverDetails && <ServerConfig config={serverDetails} />}
           <ToolList
             tools={tools}
             selectedTool={selectedTool}
             onSelectTool={setSelectedTool}
           />
+          {serverDetails && <McpServers config={serverDetails} />}
         </div>
 
         <div className={styles.content}>
-          <div className={styles.graphSection}>
-            <h2>Graph Visualization</h2>
-            {graphData && (
-              <GraphVisualization
-                nodes={graphData.nodes}
-                edges={graphData.edges}
-                selectedTool={selectedTool}
-              />
-            )}
-          </div>
-
+          {/* Top section: Input form */}
           {selectedTool && (
             <div className={styles.testerSection}>
               <h2>Test Tool: {selectedTool}</h2>
-              <ToolTester toolName={selectedTool} />
+              <InputForm
+                ref={inputFormRef}
+                toolName={selectedTool}
+                onSubmit={(data, startPaused) => {
+                  // Form validated and collected data - pass to ToolTester for execution
+                  if (toolTesterFormSubmitRef.current) {
+                    toolTesterFormSubmitRef.current(data, startPaused);
+                  } else {
+                    console.warn('[page.tsx] toolTesterFormSubmitRef.current is null');
+                  }
+                }}
+              />
             </div>
           )}
+
+          {/* Bottom section: Execution/testing area (includes debug controls, graph, and history) */}
+          {selectedTool && graphData && (
+            <ToolTester
+              toolName={selectedTool}
+              graphData={graphData}
+              inputFormRef={inputFormRef}
+              onFormSubmit={(handler) => {
+                // Store the handler that InputForm will call
+                toolTesterFormSubmitRef.current = handler;
+              }}
+            />
+          )}
         </div>
       </div>
     </div>