mcpgraph-ux 0.1.1 → 0.1.3

package/components/GraphVisualization.tsx

@@ -18,22 +18,87 @@ 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 }>;
+  [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 +145,235 @@ const getNodeStyle = (nodeType: string) => {
   }
 };
 
-// Custom node component with left/right handles for horizontal flow
+// 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: any }) {
   const nodeType = data.nodeType || 'unknown';
-  const style = getNodeStyle(nodeType);
+  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 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 as HTMLElement).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 */}
+        {data.duration !== undefined && (
+          <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 +381,7 @@ function CustomNode({ data }: { data: any }) {
   );
 }
 
+// Define nodeTypes outside component to avoid React Flow warning
 const nodeTypes = {
   custom: CustomNode,
 };
@@ -118,9 +392,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 +402,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 +422,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 +447,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 +493,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,23 +524,29 @@ 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;
+      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 => (n.data as any)?.nodeType === 'entry' && (n.data as any)?.tool === selectedTool
+            n => {
+              const nData = n.data as NodeData;
+              return nData?.nodeType === 'entry' && nData?.tool === selectedTool;
+            }
           );
           const exitNode = flowNodes.find(
-            n => (n.data as any)?.nodeType === 'exit' && (n.data as any)?.tool === selectedTool
+            n => {
+              const nData = n.data as NodeData;
+              return nData?.nodeType === 'exit' && nData?.tool === selectedTool;
+            }
           );
           
           if (!entryNode || !exitNode) return false;

package/components/InputForm.module.css

@@ -0,0 +1,115 @@
+.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;
+}
+