mcpgraph-ux 0.1.3 → 0.1.4

package/README.md

@@ -106,3 +106,7 @@ This application follows the design recommendations from the mcpGraph project:
 ## License
 
 MIT
+
+## TODO
+
+Would be nice to be able to inspect nodes in graph

package/app/api/graph/route.ts

@@ -5,13 +5,47 @@ import { getApi } from '@/lib/mcpGraphApi';
 // Force dynamic rendering - this route requires runtime config
 export const dynamic = 'force-dynamic';
 
-export async function GET() {
+export async function GET(request: Request) {
   try {
     const api = getApi();
     const config = api.getConfig();
     
+    // Get toolName from query parameter
+    const url = new URL(request.url);
+    const toolName = url.searchParams.get('toolName');
+    
+    if (!toolName) {
+      return NextResponse.json(
+        { error: 'toolName query parameter is required' },
+        { status: 400 }
+      );
+    }
+    
+    // Get tool definition from config.tools (which is ToolDefinition[], not ToolInfo)
+    // getTool() returns ToolInfo which doesn't have nodes - we need ToolDefinition from config
+    const tool = config.tools.find(t => t.name === toolName);
+    
+    if (!tool) {
+      const toolNames = config.tools.map(t => t.name);
+      return NextResponse.json(
+        { error: `Tool '${toolName}' not found. Available tools: ${toolNames.join(', ')}` },
+        { status: 404 }
+      );
+    }
+    
+    if (!tool.nodes || tool.nodes.length === 0) {
+      return NextResponse.json(
+        { error: `Tool '${toolName}' has no nodes defined` },
+        { status: 404 }
+      );
+    }
+    
+    const allNodes: NodeDefinition[] = tool.nodes;
+    console.log(`[graph/route] Found ${allNodes.length} nodes for tool '${toolName}'`);
+    console.log(`[graph/route] Node IDs:`, allNodes.map(n => n.id));
+    
     // Transform nodes into React Flow format
-    const nodes = config.nodes.map((node: NodeDefinition) => {
+    const nodes = allNodes.map((node: NodeDefinition) => {
       const baseNode = {
         id: node.id,
         type: node.type,
@@ -74,7 +108,7 @@ export async function GET() {
     // Create edges from node.next and switch conditions
     const edges: Array<{ id: string; source: string; target: string; label?: string }> = [];
     
-    config.nodes.forEach((node: NodeDefinition) => {
+    allNodes.forEach((node: NodeDefinition) => {
       if ('next' in node && node.next) {
         edges.push({
           id: `${node.id}-${node.next}`,
@@ -95,6 +129,8 @@ export async function GET() {
       }
     });
 
+    console.log(`[graph/route] Returning ${nodes.length} nodes and ${edges.length} edges`);
+    
     return NextResponse.json({ 
       nodes, 
       edges, 
@@ -102,8 +138,7 @@ export async function GET() {
       config: {
         name: config.server.name,
         version: config.server.version,
-        description: config.server.description,
-        servers: Object.entries(config.servers || {}).map(([name, server]) => {
+        servers: Object.entries(config.mcpServers || {}).map(([name, server]) => {
           const details: {
             name: string;
             type: string;

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

@@ -1,5 +1,12 @@
 import { NextResponse } from 'next/server';
-import { type ExecutionOptions, type ExecutionHooks, type ExecutionResult } 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';
@@ -37,10 +44,14 @@ export async function POST(
   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 as string | undefined;
-    const executionOptions = body.options as ExecutionOptions | undefined;
+    executionId = body.executionId;
+    const executionOptions = body.options;
     
     // Log breakpoints received
     const breakpointsReceived = executionOptions?.breakpoints || [];
@@ -93,26 +104,84 @@ export async function POST(
           });
         },
         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: {
-              message: error.message,
-              stack: error.stack,
-            },
+            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 config
-          const api = getApi();
-          const config = api.getConfig();
-          const node = config.nodes.find(n => n.id === nodeId);
-          const nodeType = node?.type || 'unknown';
+          // 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,

package/app/page.tsx

@@ -17,7 +17,7 @@ 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);
@@ -25,25 +25,15 @@ export default function Home() {
   const toolTesterFormSubmitRef = useRef<((formData: Record<string, any>, startPaused: boolean) => void) | null>(null);
 
   useEffect(() => {
-    // Load tools and graph data (graph includes config)
-    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 (graphRes.config) {
-          setServerDetails(graphRes.config);
-        }
         if (toolsRes.tools.length > 0) {
           setSelectedTool(toolsRes.tools[0].name);
         }
@@ -56,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}>

package/components/ExecutionHistory.module.css

@@ -138,11 +138,62 @@
   word-break: break-word;
 }
 
-.stackTrace {
-  margin-top: 8px;
+
+.errorTypeBadge {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  background: rgba(198, 40, 40, 0.1);
+  border: 1px solid rgba(198, 40, 40, 0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #c62828;
+}
+
+.errorSection {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(198, 40, 40, 0.3);
+}
+
+.errorSection strong {
+  display: block;
+  margin-bottom: 4px;
+  color: #c62828;
   font-size: 11px;
-  color: #999;
+}
+
+.errorDataPre {
+  margin: 0;
+  padding: 8px;
+  background: rgba(198, 40, 40, 0.1);
+  border: 1px solid rgba(198, 40, 40, 0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #c62828;
+}
+
+.stderrOutput {
+  margin: 0;
+  padding: 8px;
+  background: rgba(255, 152, 0, 0.1);
+  border: 1px solid rgba(255, 152, 0, 0.3);
+  border-radius: 4px;
+  font-size: 10px;
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #e65100;
 }
 
 .dataSection {
@@ -180,6 +231,22 @@
   word-break: break-word;
 }
 
+.errorOutput {
+  margin: 0;
+  padding: 8px;
+  background: #ffebee;
+  border: 1px solid #ef5350;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #c62828;
+}
+
 .metadata {
   display: flex;
   gap: 16px;
@@ -200,6 +267,15 @@
   margin-top: auto;
 }
 
+.errorResultItem {
+  border-top: 3px solid #ef5350;
+  background: linear-gradient(to bottom, #ffebee 0%, #ffffff 100%);
+}
+
+.errorResultItem .resultHeader {
+  border-bottom: 2px solid #ef5350;
+}
+
 .resultHeader {
   display: flex;
   justify-content: space-between;
@@ -224,6 +300,12 @@
   font-weight: bold;
 }
 
+.errorIcon {
+  font-size: 18px;
+  color: #ef5350;
+  font-weight: bold;
+}
+
 .resultStats {
   display: flex;
   gap: 16px;
@@ -266,3 +348,24 @@
   color: #333;
 }
 
+.errorResult {
+  padding: 16px;
+  background: white;
+}
+
+.errorPre {
+  margin: 0;
+  padding: 12px;
+  background: #ffebee;
+  border: 1px solid #ef5350;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #c62828;
+}
+

package/components/ExecutionHistory.tsx

@@ -110,32 +110,88 @@ export default function ExecutionHistory({ history, onNodeClick, result, telemet
               
               {isExpanded && (
                 <div className={styles.details}>
-                  {hasError && (
-                    <div className={styles.errorSection}>
-                      <strong>Error:</strong>
-                      <pre className={styles.errorMessage}>
-                        {record.error?.message || 'Unknown error'}
-                        {record.error?.stack && (
-                          <div className={styles.stackTrace}>
-                            {record.error.stack}
-                          </div>
-                        )}
-                      </pre>
-                    </div>
-                  )}
-                  
                   <div className={styles.dataSection}>
                     <div className={styles.dataItem}>
                       <strong>Input:</strong>
                       <pre className={styles.jsonData}>{formatJSON(record.input)}</pre>
                     </div>
-                    {!hasError && record.output !== undefined && (
+                    {hasError ? (
+                      <div className={styles.dataItem}>
+                        <strong>Error:</strong>
+                        <pre className={styles.errorOutput}>
+                          {(() => {
+                            const err = record.error;
+                            if (!err) return 'Unknown error';
+                            
+                            // Extract error properties
+                            const errorCode = 'code' in err && typeof err.code === 'number' ? err.code : null;
+                            const errorData = 'data' in err ? err.data : null;
+                            const errorType = 'errorType' in err && typeof err.errorType === 'string' ? err.errorType : 'unknown';
+                            const stderr = 'stderr' in err && Array.isArray(err.stderr) ? err.stderr : null;
+                            const result = 'result' in err ? err.result : null;
+                            
+                            // Clean the message - remove stderr part if stderr is available as separate property
+                            let errorText = err.message || 'Unknown error';
+                            if (stderr && stderr.length > 0) {
+                              // Remove the stderr part that was concatenated into the message
+                              errorText = errorText.split('\n\nServer stderr output:')[0].trim();
+                            }
+                            
+                            // Prepend error code if available
+                            if (errorCode !== null) {
+                              errorText = `[Error ${errorCode}] ${errorText}`;
+                            }
+                            
+                            return (
+                              <>
+                                <div className={styles.errorTypeBadge}>
+                                  {errorType === 'mcp' && '🔴 MCP Protocol Error'}
+                                  {errorType === 'tool' && '🟡 Tool Error'}
+                                  {errorType === 'unknown' && '❌ Error'}
+                                </div>
+                                {errorText}
+                                
+                                {/* Show stderr for MCP errors */}
+                                {stderr && stderr.length > 0 && (
+                                  <div className={styles.errorSection}>
+                                    <strong>Server stderr output:</strong>
+                                    <pre className={styles.stderrOutput}>{stderr.join('\n')}</pre>
+                                  </div>
+                                )}
+                                
+                                {/* Show error data for MCP errors */}
+                                {errorData !== null && errorData !== undefined && (
+                                  <div className={styles.errorSection}>
+                                    <strong>Error Details:</strong>
+                                    <pre className={styles.errorDataPre}>{formatJSON(errorData)}</pre>
+                                  </div>
+                                )}
+                                
+                                {/* Show result for tool errors */}
+                                {result !== null && result !== undefined && (
+                                  <div className={styles.errorSection}>
+                                    <strong>Tool Call Result:</strong>
+                                    <pre className={styles.errorDataPre}>{formatJSON(result)}</pre>
+                                  </div>
+                                )}
+                                
+                                {err.stack && (
+                                  <div className={styles.errorSection}>
+                                    <strong>Stack Trace:</strong>
+                                    <pre className={styles.errorDataPre}>{err.stack}</pre>
+                                  </div>
+                                )}
+                              </>
+                            );
+                          })()}
+                        </pre>
+                      </div>
+                    ) : record.output !== undefined ? (
                       <div className={styles.dataItem}>
                         <strong>Output:</strong>
                         <pre className={styles.jsonData}>{formatJSON(record.output)}</pre>
                       </div>
-                    )}
-                    {!hasError && record.output === undefined && (
+                    ) : (
                       <div className={styles.dataItem}>
                         <strong>Output:</strong>
                         <div style={{ fontStyle: 'italic', color: '#666' }}>Pending execution</div>
@@ -164,11 +220,20 @@ export default function ExecutionHistory({ history, onNodeClick, result, telemet
       
       {/* Result display at the bottom - always expanded and styled to stand out */}
       {result !== null && result !== undefined && (
-        <div className={styles.resultItem}>
+        <div className={`${styles.resultItem} ${result && typeof result === 'object' && 'error' in result ? styles.errorResultItem : ''}`}>
           <div className={styles.resultHeader}>
             <div className={styles.resultTitle}>
-              <span className={styles.resultIcon}>✓</span>
-              <strong>Final Result</strong>
+              {result && typeof result === 'object' && 'error' in result ? (
+                <>
+                  <span className={styles.errorIcon}>✗</span>
+                  <strong style={{ color: '#c62828' }}>Execution Error</strong>
+                </>
+              ) : (
+                <>
+                  <span className={styles.resultIcon}>✓</span>
+                  <strong>Final Result</strong>
+                </>
+              )}
             </div>
             {telemetry && (
               <div className={styles.resultStats}>
@@ -187,7 +252,17 @@ export default function ExecutionHistory({ history, onNodeClick, result, telemet
             )}
           </div>
           <div className={styles.resultContent}>
-            <pre className={styles.resultPre}>{formatJSON(result)}</pre>
+            {result && typeof result === 'object' && 'error' in result ? (
+              <div className={styles.errorResult}>
+                <pre className={styles.errorPre}>
+                  {typeof result.error === 'string' 
+                    ? result.error 
+                    : 'Execution failed - see node errors above for details'}
+                </pre>
+              </div>
+            ) : (
+              <pre className={styles.resultPre}>{formatJSON(result)}</pre>
+            )}
           </div>
         </div>
       )}

package/components/GraphVisualization.tsx

@@ -37,6 +37,13 @@ interface NodeData {
   args?: Record<string, unknown>;
   transform?: { expr: string };
   conditions?: Array<{ rule?: unknown; target: string }>;
+  executionState?: NodeExecutionState;
+  isHighlighted?: boolean;
+  isCurrentNode?: boolean;
+  hasBreakpoint?: boolean;
+  onToggleBreakpoint?: (nodeId: string) => void;
+  onNodeClick?: (nodeId: string) => void;
+  nodeId: string;
   [key: string]: unknown;
 }
 
@@ -232,15 +239,15 @@ function NodeTypeIcon({ nodeType }: { nodeType: string }) {
 }
 
 // Custom node component with top/bottom handles for vertical flow
-function CustomNode({ data }: { data: any }) {
+function CustomNode({ data }: { data: NodeData }) {
   const nodeType = data.nodeType || 'unknown';
-  const executionState = data.executionState as NodeExecutionState | undefined;
-  const isHighlighted = data.isHighlighted as boolean | undefined;
-  const isCurrentNode = data.isCurrentNode as boolean | undefined;
-  const hasBreakpoint = data.hasBreakpoint as boolean | undefined;
-  const onToggleBreakpoint = data.onToggleBreakpoint as ((nodeId: string) => void) | undefined;
-  const onNodeClick = data.onNodeClick as ((nodeId: string) => void) | undefined;
-  const nodeId = data.nodeId as string;
+  const executionState = data.executionState;
+  const isHighlighted = data.isHighlighted;
+  const isCurrentNode = data.isCurrentNode;
+  const hasBreakpoint = data.hasBreakpoint;
+  const onToggleBreakpoint = data.onToggleBreakpoint;
+  const onNodeClick = data.onNodeClick;
+  const nodeId = data.nodeId;
   
   const baseStyle = getNodeStyle(nodeType, executionState);
   
@@ -284,7 +291,7 @@ function CustomNode({ data }: { data: any }) {
 
   const handleNodeClick = (e: React.MouseEvent) => {
     // Don't trigger node click if clicking on breakpoint
-    if ((e.target as HTMLElement).closest('button')) {
+    if (e.target instanceof HTMLElement && e.target.closest('button')) {
       return;
     }
     if (onNodeClick && nodeId) {
@@ -309,7 +316,7 @@ function CustomNode({ data }: { data: any }) {
         <span>{data.label}</span>
         
         {/* Duration */}
-        {data.duration !== undefined && (
+        {typeof data.duration === 'number' && (
           <span style={{ fontSize: '10px', opacity: 0.7 }}>
             ({data.duration}ms)
           </span>
@@ -526,63 +533,10 @@ export default function GraphVisualization({
     );
   }, [nodes, edges, executionState, highlightedNode, breakpoints, onToggleBreakpoint, onNodeClick, currentNodeId, setNodes, setEdges]);
 
-  // Filter nodes/edges for selected tool if provided
-  const filteredNodes = useMemo(() => {
-    if (!selectedTool) return flowNodes;
-    return flowNodes.filter(node => {
-      const data = node.data as NodeData;
-      return (
-        (data.nodeType === 'entry' && data.tool === selectedTool) ||
-        (data.nodeType === 'exit' && data.tool === selectedTool) ||
-        flowEdges.some(edge => {
-          // Include nodes that are reachable from entry or lead to exit
-          const entryNode = flowNodes.find(
-            n => {
-              const nData = n.data as NodeData;
-              return nData?.nodeType === 'entry' && nData?.tool === selectedTool;
-            }
-          );
-          const exitNode = flowNodes.find(
-            n => {
-              const nData = n.data as NodeData;
-              return nData?.nodeType === 'exit' && nData?.tool === selectedTool;
-            }
-          );
-          
-          if (!entryNode || !exitNode) return false;
-          
-          // Simple reachability check
-          const visited = new Set<string>();
-          const queue = [entryNode.id];
-          visited.add(entryNode.id);
-          
-          while (queue.length > 0) {
-            const current = queue.shift()!;
-            if (current === node.id) return true;
-            
-            flowEdges
-              .filter(e => e.source === current)
-              .forEach(e => {
-                if (!visited.has(e.target)) {
-                  visited.add(e.target);
-                  queue.push(e.target);
-                }
-              });
-          }
-          
-          return false;
-        })
-      );
-    });
-  }, [flowNodes, flowEdges, selectedTool]);
-
-  const filteredEdges = useMemo(() => {
-    if (!selectedTool) return flowEdges;
-    const filteredNodeIds = new Set(filteredNodes.map(n => n.id));
-    return flowEdges.filter(
-      edge => filteredNodeIds.has(edge.source) && filteredNodeIds.has(edge.target)
-    );
-  }, [flowEdges, filteredNodes, selectedTool]);
+  // No need to filter - the API already returns nodes for the selected tool
+  // The selectedTool prop is kept for potential future use but filtering is done server-side
+  const filteredNodes = flowNodes;
+  const filteredEdges = flowEdges;
 
   return (
     <div className={styles.container}>

package/components/InputForm.module.css

@@ -111,5 +111,36 @@
   color: #c62828;
   border-radius: 4px;
   border: 1px solid #ffcdd2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
+.dismissButton {
+  background: none;
+  border: none;
+  color: #c62828;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.dismissButton:hover {
+  background-color: rgba(198, 40, 40, 0.1);
+}
+
+.dismissButton:focus {
+  outline: 2px solid #c62828;
+  outline-offset: 2px;
+}
+
+

package/components/InputForm.tsx

@@ -3,17 +3,23 @@
 import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import styles from './InputForm.module.css';
 
+interface JsonSchemaProperty {
+  type: string;
+  description?: string;
+  format?: string;
+}
+
 interface ToolInfo {
   name: string;
   description: string;
   inputSchema: {
     type: string;
-    properties?: Record<string, any>;
+    properties?: Record<string, JsonSchemaProperty>;
     required?: string[];
   };
   outputSchema?: {
     type: string;
-    properties?: Record<string, any>;
+    properties?: Record<string, JsonSchemaProperty>;
   };
 }
 
@@ -80,7 +86,7 @@ const InputForm = forwardRef<InputFormHandle, InputFormProps>(({ toolName, onSub
     },
   }));
 
-  const handleInputChange = (key: string, value: any) => {
+  const handleInputChange = (key: string, value: unknown) => {
     setFormData(prev => ({
       ...prev,
       [key]: value,
@@ -106,7 +112,7 @@ const InputForm = forwardRef<InputFormHandle, InputFormProps>(({ toolName, onSub
     onSubmit(formData, startPaused);
   };
 
-  const renderInputField = (key: string, prop: any) => {
+  const renderInputField = (key: string, prop: JsonSchemaProperty) => {
     const value = formData[key];
     const isRequired = toolInfo?.inputSchema.required?.includes(key);
 
@@ -245,16 +251,21 @@ const InputForm = forwardRef<InputFormHandle, InputFormProps>(({ toolName, onSub
     return <div className={styles.loading}>Loading tool information...</div>;
   }
 
-  if (error) {
-    return (
-      <div className={styles.error}>
-        <strong>Error:</strong> {error}
-      </div>
-    );
-  }
-
   return (
     <form ref={formRef} onSubmit={handleSubmit} className={styles.form}>
+      {error && (
+        <div className={styles.error}>
+          <strong>Error:</strong> {error}
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            className={styles.dismissButton}
+            aria-label="Dismiss error"
+          >
+            ×
+          </button>
+        </div>
+      )}
       <div className={styles.inputs}>
         {toolInfo.inputSchema.properties &&
           Object.entries(toolInfo.inputSchema.properties).map(([key, prop]) =>

package/components/ToolTester.module.css

@@ -45,3 +45,42 @@
   color: #c62828;
 }
 
+.errorBanner {
+  padding: 0.75rem 1rem;
+  background-color: #ffebee;
+  border: 1px solid #ef5350;
+  border-radius: 4px;
+  color: #c62828;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.dismissButton {
+  background: none;
+  border: none;
+  color: #c62828;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.dismissButton:hover {
+  background-color: rgba(198, 40, 40, 0.1);
+}
+
+.dismissButton:focus {
+  outline: 2px solid #c62828;
+  outline-offset: 2px;
+}
+

package/components/ToolTester.tsx

@@ -27,6 +27,11 @@ interface NodeErrorEventData {
   error: {
     message: string;
     stack?: string;
+    code?: number; // MCP error code (e.g., -32000, -32603)
+    data?: unknown; // MCP error data/details
+    stderr?: string[]; // For ToolCallMcpError - server stderr output
+    result?: unknown; // For ToolCallError - tool call result with error
+    errorType: 'mcp' | 'tool' | 'unknown'; // Type of error
   };
   timestamp: number;
 }
@@ -59,7 +64,7 @@ export type { ExecutionStatus };
 
 interface ToolTesterProps {
   toolName: string;
-  graphData: { nodes: any[]; edges: any[] } | null;
+  graphData: { 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;
   inputFormRef: React.RefObject<{ submit: (startPaused: boolean) => void }>;
   onFormSubmit: (handler: (formData: Record<string, any>, startPaused: boolean) => void) => void;
 }
@@ -75,7 +80,6 @@ export default function ToolTester({
   // This needs to be after handleSubmit is defined, so we'll do it in a useEffect
   const formSubmitHandlerRef = useRef<((formData: Record<string, any>, startPaused: boolean) => void) | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [executionHistory, setExecutionHistory] = useState<NodeExecutionRecord[]>([]);
   const [telemetry, setTelemetry] = useState<ExecutionTelemetry | null>(null);
   const [executionStatus, setExecutionStatus] = useState<ExecutionStatus>('not_started');
@@ -127,7 +131,7 @@ export default function ToolTester({
           setExecutionHistory(prev => {
             const newHistory = prev.map(record => {
               // Match by executionIndex if available (from final history)
-              const recordWithIndex = record as NodeExecutionRecord & { executionIndex?: number };
+              const recordWithIndex: NodeExecutionRecord & { executionIndex?: number } = record;
               if (recordWithIndex.executionIndex === executionIndex) {
                 console.log(`[ToolTester] Updating input for record with executionIndex=${executionIndex}`);
                 return { ...record, input: data.context };
@@ -163,7 +167,7 @@ export default function ToolTester({
         if (data.history && Array.isArray(data.history)) {
           // Find the most recent record for this nodeId
           // The history is in execution order, so the last matching record is the most recent
-          const records = data.history as Array<{ nodeId: string; executionIndex: number }>;
+          const records: Array<{ nodeId: string; executionIndex: number }> = Array.isArray(data.history) ? data.history : [];
           let matchingRecord: { nodeId: string; executionIndex: number } | undefined;
           
           // Find the last (most recent) record for this nodeId
@@ -191,7 +195,6 @@ export default function ToolTester({
     const currentBreakpoints = breakpointsRef.current;
     
     setLoading(true);
-    setError(null);
     setExecutionResult(null);
     setExecutionHistory([]);
     setTelemetry(null);
@@ -229,6 +232,10 @@ export default function ToolTester({
           break;
         case 'nodeStart': {
           const nodeStartData = event.data as NodeStartEventData;
+          if (!nodeStartData || typeof nodeStartData !== 'object' || !('nodeId' in nodeStartData)) {
+            console.warn('[ToolTester] Invalid nodeStart event data:', event.data);
+            break;
+          }
           const existing = state.get(nodeStartData.nodeId);
           state.set(nodeStartData.nodeId, {
             nodeId: nodeStartData.nodeId,
@@ -278,17 +285,21 @@ export default function ToolTester({
           break;
         }
         case 'nodeComplete': {
-          const existing = state.get(event.data.nodeId);
-          state.set(event.data.nodeId, {
-            nodeId: event.data.nodeId,
+          const eventData = event.data as NodeCompleteEventData;
+          if (!eventData || typeof eventData !== 'object' || !('nodeId' in eventData)) {
+            console.warn('[ToolTester] Invalid nodeComplete event data:', event.data);
+            break;
+          }
+          const existing = state.get(eventData.nodeId);
+          state.set(eventData.nodeId, {
+            nodeId: eventData.nodeId,
             state: 'completed',
-            startTime: existing?.startTime || event.data.timestamp,
-            endTime: event.data.timestamp,
-            duration: event.data.duration,
+            startTime: existing?.startTime || eventData.timestamp,
+            endTime: eventData.timestamp,
+            duration: eventData.duration,
           });
           // Build history record immediately for progressive display
           // Use input from the event if available, otherwise fetch it
-          const eventData = event.data as NodeCompleteEventData;
           const startTime = existing?.startTime || eventData.timestamp;
           const executionIndex = eventData.executionIndex;
           const inputFromEvent = eventData.input;
@@ -336,37 +347,89 @@ export default function ToolTester({
           break;
         }
         case 'nodeError': {
-          const existingError = state.get(event.data.nodeId);
-          state.set(event.data.nodeId, {
-            nodeId: event.data.nodeId,
+          const eventData = event.data as NodeErrorEventData;
+          if (!eventData || typeof eventData !== 'object' || !('nodeId' in eventData)) {
+            console.warn('[ToolTester] Invalid nodeError event data:', event.data);
+            break;
+          }
+          const existingError = state.get(eventData.nodeId);
+          state.set(eventData.nodeId, {
+            nodeId: eventData.nodeId,
             state: 'error',
-            startTime: existingError?.startTime || event.data.timestamp,
-            endTime: event.data.timestamp,
-            error: event.data.error?.message || 'Unknown error',
+            startTime: existingError?.startTime || eventData.timestamp,
+            endTime: eventData.timestamp,
+            error: eventData.error?.message || 'Unknown error',
           });
           // Build history record immediately for progressive display
           // Use input from the event (mcpGraph 0.1.19+ provides actual context)
-          const eventData = event.data as NodeErrorEventData;
           const errorStartTime = existingError?.startTime || eventData.timestamp;
           const executionIndex = eventData.executionIndex;
           const inputFromEvent = eventData.input; // Context is now always provided
           
           setExecutionHistory(prev => {
-            const newHistory = [...prev, {
-              nodeId: eventData.nodeId,
-              nodeType: eventData.nodeType,
-              startTime: errorStartTime,
-              endTime: eventData.timestamp,
-              duration: eventData.timestamp - errorStartTime,
-              input: inputFromEvent, // Use input from event
-              output: undefined,
-              error: {
-                message: eventData.error.message,
-                stack: eventData.error.stack,
-              } as Error,
-              executionIndex,
-            }];
-            return newHistory;
+            // Check if we already have a record for this node (created from pause/nodeStart)
+            const existingIndex = prev.findIndex(
+              r => r.nodeId === eventData.nodeId && r.executionIndex === executionIndex
+            );
+            
+            if (existingIndex >= 0) {
+              // Update existing record (created from pause/nodeStart)
+              const updated = [...prev];
+              updated[existingIndex] = {
+                ...updated[existingIndex],
+                nodeType: eventData.nodeType,
+                startTime: errorStartTime,
+                endTime: eventData.timestamp,
+                duration: eventData.timestamp - errorStartTime,
+                input: inputFromEvent, // Use input from event
+                output: undefined,
+                error: {
+                  message: eventData.error.message,
+                  stack: eventData.error.stack,
+                  ...(eventData.error.code !== undefined && { code: eventData.error.code }),
+                  ...(eventData.error.data !== undefined && { data: eventData.error.data }),
+                  ...(eventData.error.stderr !== undefined && { stderr: eventData.error.stderr }),
+                  ...(eventData.error.result !== undefined && { result: eventData.error.result }),
+                  ...(eventData.error.errorType !== undefined && { errorType: eventData.error.errorType }),
+                } as Error & { 
+                  code?: number; 
+                  data?: unknown; 
+                  stderr?: string[];
+                  result?: unknown;
+                  errorType?: 'mcp' | 'tool' | 'unknown';
+                },
+                executionIndex,
+              };
+              return updated;
+            } else {
+              // Create new record
+              const newHistory = [...prev, {
+                nodeId: eventData.nodeId,
+                nodeType: eventData.nodeType,
+                startTime: errorStartTime,
+                endTime: eventData.timestamp,
+                duration: eventData.timestamp - errorStartTime,
+                input: inputFromEvent, // Use input from event
+                output: undefined,
+                error: {
+                  message: eventData.error.message,
+                  stack: eventData.error.stack,
+                  ...(eventData.error.code !== undefined && { code: eventData.error.code }),
+                  ...(eventData.error.data !== undefined && { data: eventData.error.data }),
+                  ...(eventData.error.stderr !== undefined && { stderr: eventData.error.stderr }),
+                  ...(eventData.error.result !== undefined && { result: eventData.error.result }),
+                  ...(eventData.error.errorType !== undefined && { errorType: eventData.error.errorType }),
+                } as Error & { 
+                  code?: number; 
+                  data?: unknown; 
+                  stderr?: string[];
+                  result?: unknown;
+                  errorType?: 'mcp' | 'tool' | 'unknown';
+                },
+                executionIndex,
+              }];
+              return newHistory;
+            }
           });
           
           // If input wasn't in the event, fetch it using executionIndex
@@ -375,17 +438,21 @@ export default function ToolTester({
           }
           break;
         }
-        case 'executionComplete':
-          console.log(`[ToolTester] Execution complete, result:`, event.data.result);
-          setExecutionResult(event.data.result);
+        case 'executionComplete': {
+          const completeData = event.data as { result?: unknown; executionHistory?: Array<NodeExecutionRecord & { executionIndex?: number }> };
+          if (!completeData || typeof completeData !== 'object') {
+            console.warn('[ToolTester] Invalid executionComplete event data:', event.data);
+            break;
+          }
+          console.log(`[ToolTester] Execution complete, result:`, completeData.result);
+          setExecutionResult(completeData.result);
           // The execution history from the API should already have input populated
           // since we fetch it before unregistering the controller
-          if (event.data.executionHistory) {
-            const finalHistory = event.data.executionHistory as Array<NodeExecutionRecord & { executionIndex?: number }>;
-            setExecutionHistory(finalHistory);
+          if (Array.isArray(completeData.executionHistory)) {
+            setExecutionHistory(completeData.executionHistory);
           }
-          if (event.data.telemetry) {
-            setTelemetry(event.data.telemetry);
+          if ('telemetry' in completeData && completeData.telemetry) {
+            setTelemetry(completeData.telemetry as ExecutionTelemetry);
           }
           setExecutionStatus('finished');
           setCurrentNodeId(null);
@@ -393,9 +460,21 @@ export default function ToolTester({
           stream.disconnect();
           executionStreamRef.current = null;
           break;
-        case 'executionError':
-          console.log(`[ToolTester] Execution error:`, event.data.error);
-          setError(event.data.error);
+        }
+        case 'executionError': {
+          if (typeof event.data !== 'object' || !event.data) {
+            console.warn('[ToolTester] Invalid executionError event data:', event.data);
+            break;
+          }
+          const errorData = event.data as { error?: string | { message?: string } };
+          const fullErrorMessage = typeof errorData.error === 'string' 
+            ? errorData.error 
+            : (typeof errorData.error === 'object' && errorData.error?.message) || 'Unknown error';
+          // Extract just the first line for the summary (before stderr/details)
+          const errorSummary = fullErrorMessage.split('\n')[0].split('Server stderr')[0].trim();
+          console.log(`[ToolTester] Execution error:`, fullErrorMessage);
+          // Set error as the execution result so it shows in history - just the summary
+          setExecutionResult({ error: errorSummary });
           setExecutionStatus('error');
           setCurrentNodeId(null);
           setLoading(false);
@@ -403,6 +482,7 @@ export default function ToolTester({
           executionStreamRef.current = null;
           setCurrentExecutionId(null);
           break;
+        }
         case 'executionStopped':
           console.log(`[ToolTester] Execution stopped by user`);
           setExecutionStatus('stopped');
@@ -414,6 +494,10 @@ export default function ToolTester({
           break;
         case 'pause': {
           const pauseData = event.data as PauseEventData;
+          if (!pauseData || typeof pauseData !== 'object' || !('nodeId' in pauseData)) {
+            console.warn('[ToolTester] Invalid pause event data:', event.data);
+            break;
+          }
           console.log(`[ToolTester] Pause event received for node: ${pauseData.nodeId}`);
           setExecutionStatus('paused');
           if (pauseData.nodeId) {
@@ -457,19 +541,21 @@ export default function ToolTester({
           // Don't set status here - stateUpdate is the authoritative source
           // The resume event is just informational, stateUpdate will follow with the actual status
           break;
-        case 'stateUpdate':
-          console.log(`[ToolTester] stateUpdate event:`, event.data);
-          if (event.data.status) {
-            console.log(`[ToolTester] Setting execution status to: ${event.data.status}`);
-            setExecutionStatus(event.data.status);
+        case 'stateUpdate': {
+          const stateData = event.data as { status?: ExecutionStatus; currentNodeId?: string | null };
+          console.log(`[ToolTester] stateUpdate event:`, stateData);
+          if (stateData.status) {
+            console.log(`[ToolTester] Setting execution status to: ${stateData.status}`);
+            setExecutionStatus(stateData.status);
           }
-          if (event.data.currentNodeId !== undefined) {
-            setCurrentNodeId(event.data.currentNodeId);
-          } else if (event.data.status === 'running' || event.data.status === 'finished' || event.data.status === 'error' || event.data.status === 'stopped') {
+          if (stateData.currentNodeId !== undefined) {
+            setCurrentNodeId(stateData.currentNodeId);
+          } else if (stateData.status === 'running' || stateData.status === 'finished' || stateData.status === 'error' || stateData.status === 'stopped') {
             // Clear currentNodeId when execution is no longer paused
             setCurrentNodeId(null);
           }
           break;
+        }
       }
       
       // Update execution state
@@ -518,7 +604,16 @@ export default function ToolTester({
       const data = await response.json();
       
       if (data.error) {
-        setError(data.error);
+        // Show error in execution history, not as a banner - just the summary
+        const fullError = typeof data.error === 'string' 
+          ? data.error 
+          : (typeof data.error === 'object' && data.error !== null && 'message' in data.error)
+            ? String((data.error as { message: unknown }).message)
+            : 'Unknown error';
+        // Extract just the first line for the summary (before stderr/details)
+        const errorSummary = fullError.split('\n')[0].split('Server stderr')[0].trim();
+        setExecutionResult({ error: errorSummary });
+        setExecutionStatus('error');
         setLoading(false);
         stream.disconnect();
         executionStreamRef.current = null;
@@ -526,7 +621,9 @@ export default function ToolTester({
       // Result will be set via SSE executionComplete event
     } catch (err) {
       console.error(`[ToolTester] Error executing tool:`, err);
-      setError(err instanceof Error ? err.message : 'Unknown error');
+      // Show error in execution history, not as a banner
+      setExecutionResult({ error: err instanceof Error ? err.message : 'Unknown error' });
+      setExecutionStatus('error');
       setLoading(false);
       stream.disconnect();
       executionStreamRef.current = null;
@@ -552,7 +649,6 @@ export default function ToolTester({
   const handleClear = () => {
     // Reset all execution-related state
     setLoading(false);
-    setError(null);
     setExecutionResult(null);
     setExecutionHistory([]);
     setTelemetry(null);
@@ -581,7 +677,32 @@ export default function ToolTester({
     breakpointsRef.current = breakpoints;
   }, [breakpoints]);
 
+  // Reset execution state when toolName changes (switching to a different tool)
+  useEffect(() => {
+    // Clear all execution-related state when tool changes
+    setLoading(false);
+    setExecutionResult(null);
+    setExecutionHistory([]);
+    setTelemetry(null);
+    setExecutionStatus('not_started');
+    setCurrentNodeId(null);
+    setCurrentExecutionId(null);
+    setExecutionState(new Map());
+    setHighlightedNode(null);
+    const emptyBreakpoints = new Set<string>();
+    setBreakpoints(emptyBreakpoints);
+    breakpointsRef.current = emptyBreakpoints;
+    executionStateRef.current.clear();
+    
+    // Disconnect any active stream
+    if (executionStreamRef.current) {
+      executionStreamRef.current.disconnect();
+      executionStreamRef.current = null;
+    }
+  }, [toolName]);
+
   // Expose form submit handler to parent (so InputForm can call it)
+  // Update when toolName changes to ensure we use the correct tool
   useEffect(() => {
     // Update the ref with the current handleSubmit
     // The handleSubmit function will read breakpoints from breakpointsRef when called
@@ -599,8 +720,10 @@ export default function ToolTester({
     } else {
       console.warn('[ToolTester] onFormSubmit is not provided');
     }
+    // Update handler when toolName changes so it uses the correct tool
+    // handleSubmit is recreated on every render but uses toolName from props, so we need to update the ref
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [toolName, onFormSubmit]);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -628,16 +751,6 @@ export default function ToolTester({
     setTimeout(() => setHighlightedNode(null), 2000);
   };
 
-  if (error) {
-    return (
-      <div className={styles.container}>
-        <div className={styles.error}>
-          <strong>Error:</strong> {error}
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className={styles.container}>
       <div className={styles.debugControlsHeader}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcpgraph-ux",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Visual interface for mcpGraph - visualize and test MCP tool execution graphs",
   "main": "server.ts",
   "bin": {
@@ -25,23 +25,23 @@
     "package.json"
   ],
   "dependencies": {
+    "dagre": "^0.8.5",
+    "mcpgraph": "^0.1.23",
     "next": "^14.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "reactflow": "^11.11.0",
-    "mcpgraph": "^0.1.19",
-    "zod": "^3.22.4",
-    "dagre": "^0.8.5",
-    "tsx": "^4.7.0"
+    "tsx": "^4.7.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/dagre": "^0.7.52",
     "@types/node": "^20.10.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@types/dagre": "^0.7.52",
-    "typescript": "^5.3.3",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.0"
+    "eslint-config-next": "^14.2.0",
+    "typescript": "^5.3.3"
   },
   "keywords": [
     "mcp",
@@ -63,4 +63,3 @@
     "node": ">=20.0.0"
   }
 }
-