mcpgraph-ux 0.1.1 → 0.1.3

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

@@ -1,20 +1,9 @@
 import { NextResponse } from 'next/server';
-import { McpGraphApi } from 'mcpgraph';
+import { type ExecutionOptions, type ExecutionHooks, type ExecutionResult } from 'mcpgraph';
+import { getApi } from '@/lib/mcpGraphApi';
+import { sendExecutionEvent, closeExecutionStream } from '@/lib/executionStreamServer';
+import { registerController, unregisterController, getController } from '@/lib/executionController';
 
-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,
@@ -45,16 +34,278 @@ export async function POST(
   request: Request,
   { params }: { params: { toolName: string } }
 ) {
+  let executionId: string | undefined;
   try {
     const api = getApi();
     const body = await request.json();
     const args = body.args || {};
+    executionId = body.executionId as string | undefined;
+    const executionOptions = body.options as ExecutionOptions | undefined;
+    
+    // Log breakpoints received
+    const breakpointsReceived = executionOptions?.breakpoints || [];
+    console.log(`[API] Received breakpoints: ${breakpointsReceived.length > 0 ? breakpointsReceived.join(', ') : 'none'}`);
 
-    const result = await api.executeTool(params.toolName, args);
+    // 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) => {
+          sendExecutionEvent(execId, 'nodeError', {
+            nodeId,
+            nodeType: node.type,
+            executionIndex,
+            input: context, // Include context as input (mcpGraph 0.1.19+ provides actual context)
+            error: {
+              message: error.message,
+              stack: error.stack,
+            },
+            timestamp: Date.now(),
+          });
+        },
+        onPause: async (executionIndex, nodeId, context) => {
+          console.log(`[API] onPause hook called for node: ${nodeId}, executionIndex: ${executionIndex}`);
+          
+          // Look up node type from config
+          const api = getApi();
+          const config = api.getConfig();
+          const node = config.nodes.find(n => n.id === nodeId);
+          const 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));
     
-    return NextResponse.json({ result });
+    // 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);
+    }
+
+    // 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: 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,20 +1,8 @@
 import { NextResponse } from 'next/server';
-import { McpGraphApi } from 'mcpgraph';
+import { getApi } from '@/lib/mcpGraphApi';
 
-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;
-}
+// Force dynamic rendering - this route requires runtime config
+export const dynamic = 'force-dynamic';
 
 export async function GET() {
   try {

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 {
@@ -19,9 +20,12 @@ export default function Home() {
   const [graphData, setGraphData] = useState<{ nodes: any[]; edges: any[] } | 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
+    // Load tools and graph data (graph includes config)
     Promise.all([
       fetch('/api/tools').then(res => res.json()),
       fetch('/api/graph').then(res => res.json()),
@@ -37,6 +41,9 @@ export default function Home() {
         }
         setTools(toolsRes.tools);
         setGraphData({ nodes: graphRes.nodes, edges: graphRes.edges });
+        if (graphRes.config) {
+          setServerDetails(graphRes.config);
+        }
         if (toolsRes.tools.length > 0) {
           setSelectedTool(toolsRes.tools[0].name);
         }
@@ -77,31 +84,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>

package/components/DebugControls.module.css

@@ -0,0 +1,124 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.controlsRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.statusInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  margin-left: auto;
+}
+
+.statusLabel {
+  font-weight: 600;
+  color: #666;
+}
+
+.statusBadge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.statusBadge.not_started {
+  background: #e0e0e0;
+  color: #666;
+}
+
+.statusBadge.running {
+  background: #e3f2fd;
+  color: #1976d2;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.statusBadge.paused {
+  background: #fff3e0;
+  color: #f57c00;
+}
+
+.statusBadge.finished {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.statusBadge.error {
+  background: #ffebee;
+  color: #c62828;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.separator {
+  color: #999;
+}
+
+.currentNode {
+  color: #666;
+  font-size: 12px;
+}
+
+.currentNode code {
+  background: #fff;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 11px;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+}
+
+.button {
+  padding: 8px 16px;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.button:hover:not(:disabled) {
+  background: #1976d2;
+}
+
+.button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+