mcpgraph-ux 0.1.2 → 0.1.4

package/components/GraphVisualization.tsx

@@ -18,22 +18,94 @@ import dagre from 'dagre';
 import 'reactflow/dist/style.css';
 import styles from './GraphVisualization.module.css';
 
+export type NodeExecutionState = 'pending' | 'running' | 'completed' | 'error' | 'paused' | 'stopped';
+
+export interface NodeExecutionStatus {
+  nodeId: string;
+  state: NodeExecutionState;
+  startTime?: number;
+  endTime?: number;
+  duration?: number;
+  error?: string;
+}
+
+interface NodeData {
+  label: string;
+  nodeType: string;
+  tool?: string;
+  server?: string;
+  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;
+}
+
 interface GraphVisualizationProps {
   nodes: Node[];
   edges: Edge[];
   selectedTool?: string | null;
+  executionState?: Map<string, NodeExecutionStatus>;
+  highlightedNode?: string | null;
+  breakpoints?: Set<string>;
+  onToggleBreakpoint?: (nodeId: string) => void;
+  onNodeClick?: (nodeId: string) => void;
+  currentNodeId?: string | null;
 }
 
-// Custom node styles based on node type
-const getNodeStyle = (nodeType: string) => {
-  const baseStyle = {
+// Custom node styles based on node type and execution state
+const getNodeStyle = (nodeType: string, executionState?: NodeExecutionState) => {
+  const baseStyle: React.CSSProperties = {
     padding: '10px',
     borderRadius: '8px',
-    border: '2px solid',
+    borderStyle: 'solid',
+    borderWidth: '2px',
     fontSize: '12px',
     fontWeight: 500,
+    transition: 'all 0.3s ease',
+    boxSizing: 'border-box', // Include border in width/height to prevent shifting
   };
 
+  // Override colors based on execution state
+  if (executionState === 'running') {
+    return {
+      ...baseStyle,
+      backgroundColor: '#fff9c4',
+      borderColor: '#fbc02d',
+      color: '#f57f17',
+      boxShadow: '0 0 10px rgba(251, 192, 45, 0.5)',
+      animation: 'pulse 1.5s ease-in-out infinite',
+    };
+  } else if (executionState === 'paused') {
+    return {
+      ...baseStyle,
+      backgroundColor: '#e0f2f7',
+      borderColor: '#00bcd4',
+      color: '#006064',
+      boxShadow: '0 0 0 3px #00bcd4',
+    };
+  } else if (executionState === 'completed') {
+    return {
+      ...baseStyle,
+      backgroundColor: '#c8e6c9',
+      borderColor: '#66bb6a',
+      color: '#2e7d32',
+    };
+  } else if (executionState === 'error') {
+    return {
+      ...baseStyle,
+      backgroundColor: '#ffcdd2',
+      borderColor: '#ef5350',
+      color: '#c62828',
+    };
+  }
+
   switch (nodeType) {
     case 'entry':
       return {
@@ -80,27 +152,235 @@ const getNodeStyle = (nodeType: string) => {
   }
 };
 
-// Custom node component with left/right handles for horizontal flow
-function CustomNode({ data }: { data: any }) {
+// Node type icon component
+function NodeTypeIcon({ nodeType }: { nodeType: string }) {
+  const iconStyle: React.CSSProperties = {
+    width: '1.5em',
+    height: '1.5em',
+    color: '#000',
+    flexShrink: 0,
+    display: 'inline-block',
+  };
+
+  switch (nodeType) {
+    case 'mcp':
+      return (
+        <svg
+          fill="currentColor"
+          fillRule="evenodd"
+          height="1.5em"
+          style={iconStyle}
+          viewBox="0 0 24 24"
+          width="1.5em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>ModelContextProtocol</title>
+          <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path>
+          <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path>
+        </svg>
+      );
+    case 'entry':
+      return (
+        <svg
+          fill="currentColor"
+          height="1.5em"
+          style={iconStyle}
+          viewBox="0 0 24 24"
+          width="1.5em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2"/>
+          <path d="M10 8l6 4-6 4V8z" />
+        </svg>
+      );
+    case 'exit':
+      return (
+        <svg
+          fill="currentColor"
+          height="1.5em"
+          style={iconStyle}
+          viewBox="0 0 24 24"
+          width="1.5em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2"/>
+          <rect x="9" y="9" width="6" height="6" fill="currentColor"/>
+        </svg>
+      );
+    case 'transform':
+      return (
+        <svg
+          fill="currentColor"
+          height="1.5em"
+          style={iconStyle}
+          viewBox="0 0 24 24"
+          width="1.5em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
+        </svg>
+      );
+    case 'switch':
+      return (
+        <svg
+          fill="currentColor"
+          height="1.5em"
+          style={iconStyle}
+          viewBox="0 0 24 24"
+          width="1.5em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 2L2 12l10 10 10-10L12 2zm0 2.83L19.17 12 12 19.17 4.83 12 12 4.83z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+// Custom node component with top/bottom handles for vertical flow
+function CustomNode({ data }: { data: NodeData }) {
   const nodeType = data.nodeType || 'unknown';
-  const style = getNodeStyle(nodeType);
+  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);
+  
+  // Make current node very obvious with outline (doesn't affect layout)
+  let style: React.CSSProperties = { ...baseStyle };
+  if (isCurrentNode) {
+    // Use outline to create thicker border effect without changing element size
+    style = {
+      ...baseStyle,
+      outline: '4px solid',
+      outlineColor: baseStyle.borderColor as string || '#333',
+      outlineOffset: '-2px', // Overlap with border to create thicker effect
+      zIndex: 10,
+    };
+  }
+  
+  if (isHighlighted) {
+    // Use outline for highlight to avoid layout shift (outline doesn't affect box model)
+    style = {
+      ...style,
+      outline: isCurrentNode ? '4px solid rgba(255, 193, 7, 0.8)' : '3px solid rgba(255, 193, 7, 0.5)',
+      outlineOffset: isCurrentNode ? '-2px' : '2px',
+      boxShadow: '0 0 20px rgba(255, 193, 7, 0.3)',
+      zIndex: 10,
+    };
+  }
   const isEntry = nodeType === 'entry';
   const isExit = nodeType === 'exit';
 
+  // Add status indicator
+  const statusIndicator = executionState === 'running' ? '⏳' :
+                         executionState === 'completed' ? '✓' :
+                         executionState === 'error' ? '✗' : null;
+
+  const handleBreakpointClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onToggleBreakpoint && nodeId) {
+      onToggleBreakpoint(nodeId);
+    }
+  };
+
+  const handleNodeClick = (e: React.MouseEvent) => {
+    // Don't trigger node click if clicking on breakpoint
+    if (e.target instanceof HTMLElement && e.target.closest('button')) {
+      return;
+    }
+    if (onNodeClick && nodeId) {
+      onNodeClick(nodeId);
+    }
+  };
+
   return (
-    <div style={style}>
+    <div style={{ ...style, cursor: onNodeClick ? 'pointer' : 'default' }} onClick={handleNodeClick}>
       {!isEntry && (
         <Handle
           type="target"
-          position={Position.Left}
+          position={Position.Top}
           style={{ background: '#555' }}
         />
       )}
-      <div>{data.label}</div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '5px', width: '100%' }}>
+        {/* Node type icon at far left */}
+        <NodeTypeIcon nodeType={nodeType} />
+        
+        {/* Label */}
+        <span>{data.label}</span>
+        
+        {/* Duration */}
+        {typeof data.duration === 'number' && (
+          <span style={{ fontSize: '10px', opacity: 0.7 }}>
+            ({data.duration}ms)
+          </span>
+        )}
+        
+        {/* Breakpoint button */}
+        {onToggleBreakpoint && (
+          <button
+            onClick={handleBreakpointClick}
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: '50%',
+              cursor: 'pointer',
+              padding: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              border: 'none',
+              background: 'transparent',
+              flexShrink: 0,
+            }}
+            title={hasBreakpoint ? 'Click to remove breakpoint' : 'Click to add breakpoint'}
+          >
+            <span
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: '50%',
+                background: hasBreakpoint ? '#ef5350' : 'transparent',
+                border: hasBreakpoint ? '2px solid white' : '1px solid #999',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: hasBreakpoint ? '8px' : '0',
+                boxShadow: hasBreakpoint ? '0 2px 4px rgba(0,0,0,0.2)' : 'none',
+                opacity: hasBreakpoint ? 1 : 0.5,
+                transition: 'opacity 0.2s, background 0.2s, border 0.2s',
+              }}
+              onMouseEnter={(e) => {
+                if (!hasBreakpoint) {
+                  e.currentTarget.style.opacity = '1';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!hasBreakpoint) {
+                  e.currentTarget.style.opacity = '0.5';
+                }
+              }}
+            >
+              {hasBreakpoint && '●'}
+            </span>
+          </button>
+        )}
+        
+        {/* Status indicators (running/completed/error) at far right */}
+        {statusIndicator && (
+          <span style={{ marginLeft: 'auto' }}>{statusIndicator}</span>
+        )}
+      </div>
       {!isExit && (
         <Handle
           type="source"
-          position={Position.Right}
+          position={Position.Bottom}
           style={{ background: '#555' }}
         />
       )}
@@ -108,6 +388,7 @@ function CustomNode({ data }: { data: any }) {
   );
 }
 
+// Define nodeTypes outside component to avoid React Flow warning
 const nodeTypes = {
   custom: CustomNode,
 };
@@ -118,9 +399,9 @@ const layoutNodes = (nodes: Node[], edges: Edge[]): Node[] => {
   const g = new dagre.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   g.setGraph({ 
-    rankdir: 'LR', // Left to right layout
-    nodesep: 100,  // Horizontal spacing between nodes
-    ranksep: 150,  // Vertical spacing between ranks
+    rankdir: 'TB', // Top to bottom layout
+    nodesep: 50,   // Vertical spacing between nodes
+    ranksep: 75,   // Horizontal spacing between ranks
     marginx: 50,
     marginy: 50,
   });
@@ -128,7 +409,8 @@ const layoutNodes = (nodes: Node[], edges: Edge[]): Node[] => {
   // Add nodes to dagre graph
   nodes.forEach(node => {
     // Estimate node dimensions (dagre needs width/height)
-    const nodeType = (node.data as any)?.nodeType || 'unknown';
+    const nodeData = node.data as NodeData;
+    const nodeType = nodeData?.nodeType || 'unknown';
     const label = node.id;
     // Rough estimate: ~10px per character + padding
     const width = Math.max(150, label.length * 8 + 40);
@@ -147,7 +429,8 @@ const layoutNodes = (nodes: Node[], edges: Edge[]): Node[] => {
 
   // Map dagre positions back to React Flow nodes
   const positionedNodes = nodes.map(node => {
-    const nodeType = (node.data as any)?.nodeType || 'unknown';
+    const nodeData = node.data as NodeData;
+    const nodeType = nodeData?.nodeType || 'unknown';
     const dagreNode = g.node(node.id);
     
     return {
@@ -171,10 +454,38 @@ export default function GraphVisualization({
   nodes,
   edges,
   selectedTool,
+  executionState,
+  highlightedNode,
+  breakpoints,
+  onToggleBreakpoint,
+  onNodeClick,
+  currentNodeId,
 }: GraphVisualizationProps) {
   const layoutedNodes = useMemo(() => layoutNodes(nodes, edges), [nodes, edges]);
 
-  const [flowNodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
+  // Merge execution state, highlight, and breakpoints into nodes
+  const nodesWithExecutionState = useMemo(() => {
+    return layoutedNodes.map(node => {
+      const status = executionState?.get(node.id);
+      const isCurrentNode = currentNodeId === node.id;
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          nodeId: node.id,
+          executionState: status?.state || 'pending',
+          duration: status?.duration,
+          isHighlighted: highlightedNode === node.id,
+          isCurrentNode, // Mark current node explicitly
+          hasBreakpoint: breakpoints?.has(node.id) || false,
+          onToggleBreakpoint,
+          onNodeClick,
+        },
+      };
+    });
+  }, [layoutedNodes, executionState, highlightedNode, breakpoints, onToggleBreakpoint, onNodeClick, currentNodeId]);
+
+  const [flowNodes, setNodes, onNodesChange] = useNodesState(nodesWithExecutionState);
   const [flowEdges, setEdges, onEdgesChange] = useEdgesState(
     edges.map(edge => ({
       ...edge,
@@ -189,7 +500,26 @@ export default function GraphVisualization({
 
   useEffect(() => {
     const layouted = layoutNodes(nodes, edges);
-    setNodes(layouted);
+    // Merge execution state, highlight, and breakpoints into nodes
+    const nodesWithState = layouted.map(node => {
+      const status = executionState?.get(node.id);
+      const isCurrentNode = currentNodeId === node.id;
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          nodeId: node.id,
+          executionState: status?.state || 'pending',
+          duration: status?.duration,
+          isHighlighted: highlightedNode === node.id,
+          isCurrentNode, // Mark current node explicitly
+          hasBreakpoint: breakpoints?.has(node.id) || false,
+          onToggleBreakpoint,
+          onNodeClick,
+        },
+      };
+    });
+    setNodes(nodesWithState);
     setEdges(
       edges.map(edge => ({
         ...edge,
@@ -201,59 +531,12 @@ export default function GraphVisualization({
         style: { strokeWidth: 2 },
       }))
     );
-  }, [nodes, edges, setNodes, setEdges]);
+  }, [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 any;
-      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 => (n.data as any)?.nodeType === 'entry' && (n.data as any)?.tool === selectedTool
-          );
-          const exitNode = flowNodes.find(
-            n => (n.data as any)?.nodeType === 'exit' && (n.data as any)?.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

@@ -0,0 +1,146 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-weight: 600;
+  color: #333;
+  font-size: 0.9rem;
+}
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #333;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.required {
+  color: #d32f2f;
+  margin-left: 4px;
+}
+
+.input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-family: inherit;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #2196f3;
+  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
+}
+
+.input:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.textarea {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  resize: vertical;
+  min-height: 60px;
+}
+
+.textarea:focus {
+  outline: none;
+  border-color: #2196f3;
+  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
+}
+
+.textarea:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.checkbox:disabled {
+  cursor: not-allowed;
+}
+
+.hint {
+  font-size: 0.85rem;
+  color: #666;
+  font-style: italic;
+}
+
+.loading {
+  padding: 1rem;
+  text-align: center;
+  color: #666;
+}
+
+.error {
+  padding: 1rem;
+  background-color: #ffebee;
+  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;
+}
+
+