@marktoflow/gui 2.0.0-alpha.1

package/src/client/hooks/useCanvas.ts

@@ -0,0 +1,247 @@
+import { useCallback, useMemo } from 'react';
+import { useReactFlow, type Node, type Edge } from '@xyflow/react';
+import { useCanvasStore } from '../stores/canvasStore';
+import dagre from 'dagre';
+
+export function useCanvas() {
+  const {
+    nodes,
+    edges,
+    setNodes,
+    setEdges,
+    updateNodeData,
+    clearCanvas,
+  } = useCanvasStore();
+
+  const reactFlowInstance = useReactFlow();
+
+  // Get selected nodes
+  const selectedNodes = useMemo(
+    () => nodes.filter((node) => node.selected),
+    [nodes]
+  );
+
+  // Get selected edges
+  const selectedEdges = useMemo(
+    () => edges.filter((edge) => edge.selected),
+    [edges]
+  );
+
+  // Get node by ID
+  const getNode = useCallback(
+    (id: string): Node | undefined => {
+      return nodes.find((node) => node.id === id);
+    },
+    [nodes]
+  );
+
+  // Get edge by ID
+  const getEdge = useCallback(
+    (id: string): Edge | undefined => {
+      return edges.find((edge) => edge.id === id);
+    },
+    [edges]
+  );
+
+  // Add a new node
+  const addNode = useCallback(
+    (node: Node) => {
+      setNodes([...nodes, node]);
+    },
+    [nodes, setNodes]
+  );
+
+  // Remove a node
+  const removeNode = useCallback(
+    (id: string) => {
+      setNodes(nodes.filter((node) => node.id !== id));
+      // Also remove connected edges
+      setEdges(edges.filter((edge) => edge.source !== id && edge.target !== id));
+    },
+    [nodes, edges, setNodes, setEdges]
+  );
+
+  // Duplicate selected nodes
+  const duplicateSelected = useCallback(() => {
+    const newNodes: Node[] = [];
+    const idMap = new Map<string, string>();
+
+    for (const node of selectedNodes) {
+      const newId = `${node.id}-copy-${Date.now()}`;
+      idMap.set(node.id, newId);
+
+      newNodes.push({
+        ...node,
+        id: newId,
+        position: {
+          x: node.position.x + 50,
+          y: node.position.y + 50,
+        },
+        selected: false,
+        data: {
+          ...node.data,
+          id: newId,
+        },
+      });
+    }
+
+    setNodes([...nodes, ...newNodes]);
+
+    // Duplicate edges between selected nodes
+    const newEdges: Edge[] = [];
+    for (const edge of edges) {
+      if (idMap.has(edge.source) && idMap.has(edge.target)) {
+        newEdges.push({
+          ...edge,
+          id: `${edge.id}-copy-${Date.now()}`,
+          source: idMap.get(edge.source)!,
+          target: idMap.get(edge.target)!,
+        });
+      }
+    }
+
+    if (newEdges.length > 0) {
+      setEdges([...edges, ...newEdges]);
+    }
+  }, [selectedNodes, nodes, edges, setNodes, setEdges]);
+
+  // Delete selected nodes and edges
+  const deleteSelected = useCallback(() => {
+    const selectedNodeIds = new Set(selectedNodes.map((n) => n.id));
+    const selectedEdgeIds = new Set(selectedEdges.map((e) => e.id));
+
+    setNodes(nodes.filter((node) => !selectedNodeIds.has(node.id)));
+    setEdges(
+      edges.filter(
+        (edge) =>
+          !selectedEdgeIds.has(edge.id) &&
+          !selectedNodeIds.has(edge.source) &&
+          !selectedNodeIds.has(edge.target)
+      )
+    );
+  }, [selectedNodes, selectedEdges, nodes, edges, setNodes, setEdges]);
+
+  // Auto-layout using dagre
+  const autoLayout = useCallback(() => {
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({ rankdir: 'TB', nodesep: 50, ranksep: 80 });
+
+    // Add nodes
+    for (const node of nodes) {
+      dagreGraph.setNode(node.id, { width: 200, height: 100 });
+    }
+
+    // Add edges
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    // Run layout
+    dagre.layout(dagreGraph);
+
+    // Update node positions
+    const layoutedNodes = nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+      return {
+        ...node,
+        position: {
+          x: nodeWithPosition.x - 100,
+          y: nodeWithPosition.y - 50,
+        },
+      };
+    });
+
+    setNodes(layoutedNodes);
+
+    // Fit view after layout
+    setTimeout(() => {
+      reactFlowInstance.fitView({ padding: 0.2 });
+    }, 50);
+  }, [nodes, edges, setNodes, reactFlowInstance]);
+
+  // Fit view
+  const fitView = useCallback(() => {
+    reactFlowInstance.fitView({ padding: 0.2 });
+  }, [reactFlowInstance]);
+
+  // Zoom to node
+  const zoomToNode = useCallback(
+    (nodeId: string) => {
+      const node = getNode(nodeId);
+      if (node) {
+        reactFlowInstance.setCenter(node.position.x + 100, node.position.y + 50, {
+          zoom: 1.5,
+          duration: 300,
+        });
+      }
+    },
+    [getNode, reactFlowInstance]
+  );
+
+  // Select node
+  const selectNode = useCallback(
+    (nodeId: string, addToSelection = false) => {
+      setNodes(
+        nodes.map((node) => ({
+          ...node,
+          selected: addToSelection
+            ? node.selected || node.id === nodeId
+            : node.id === nodeId,
+        }))
+      );
+    },
+    [nodes, setNodes]
+  );
+
+  // Clear selection
+  const clearSelection = useCallback(() => {
+    setNodes(nodes.map((node) => ({ ...node, selected: false })));
+    setEdges(edges.map((edge) => ({ ...edge, selected: false })));
+  }, [nodes, edges, setNodes, setEdges]);
+
+  // Undo/redo and copy/paste
+  const { undo, redo, canUndo, canRedo, copySelected, paste, canPaste } = useCanvasStore();
+
+  return {
+    // State
+    nodes,
+    edges,
+    selectedNodes,
+    selectedEdges,
+
+    // Queries
+    getNode,
+    getEdge,
+
+    // Mutations
+    addNode,
+    removeNode,
+    updateNodeData,
+    setNodes,
+    setEdges,
+    clearCanvas,
+
+    // Selection
+    selectNode,
+    clearSelection,
+    duplicateSelected,
+    deleteSelected,
+
+    // Layout
+    autoLayout,
+    fitView,
+    zoomToNode,
+
+    // History
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+
+    // Clipboard
+    copySelected,
+    paste,
+    canPaste,
+  };
+}

package/src/client/hooks/useWebSocket.ts

@@ -0,0 +1,164 @@
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { WS_EVENTS } from '@shared/constants';
+import type {
+  WorkflowUpdatedEvent,
+  ExecutionStepEvent,
+  ExecutionCompletedEvent,
+} from '@shared/types';
+
+interface UseWebSocketOptions {
+  autoConnect?: boolean;
+  onWorkflowUpdated?: (event: WorkflowUpdatedEvent) => void;
+  onExecutionStep?: (event: ExecutionStepEvent) => void;
+  onExecutionCompleted?: (event: ExecutionCompletedEvent) => void;
+  onAIProcessing?: (processing: boolean) => void;
+  onAIResponse?: (response: any) => void;
+}
+
+interface UseWebSocketReturn {
+  connected: boolean;
+  socket: Socket | null;
+  subscribeToWorkflow: (path: string) => void;
+  unsubscribeFromWorkflow: (path: string) => void;
+  subscribeToExecution: (runId: string) => void;
+  unsubscribeFromExecution: (runId: string) => void;
+  connect: () => void;
+  disconnect: () => void;
+}
+
+export function useWebSocket(
+  options: UseWebSocketOptions = {}
+): UseWebSocketReturn {
+  const {
+    autoConnect = true,
+    onWorkflowUpdated,
+    onExecutionStep,
+    onExecutionCompleted,
+    onAIProcessing,
+    onAIResponse,
+  } = options;
+
+  const socketRef = useRef<Socket | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  // Store callbacks in refs to avoid reconnection on callback changes
+  const callbacksRef = useRef({
+    onWorkflowUpdated,
+    onExecutionStep,
+    onExecutionCompleted,
+    onAIProcessing,
+    onAIResponse,
+  });
+
+  useEffect(() => {
+    callbacksRef.current = {
+      onWorkflowUpdated,
+      onExecutionStep,
+      onExecutionCompleted,
+      onAIProcessing,
+      onAIResponse,
+    };
+  }, [
+    onWorkflowUpdated,
+    onExecutionStep,
+    onExecutionCompleted,
+    onAIProcessing,
+    onAIResponse,
+  ]);
+
+  const connect = useCallback(() => {
+    if (socketRef.current?.connected) return;
+
+    const socket = io({
+      transports: ['websocket'],
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+    });
+
+    socket.on('connect', () => {
+      console.log('WebSocket connected');
+      setConnected(true);
+    });
+
+    socket.on('disconnect', () => {
+      console.log('WebSocket disconnected');
+      setConnected(false);
+    });
+
+    socket.on('connect_error', (error) => {
+      console.error('WebSocket connection error:', error);
+      setConnected(false);
+    });
+
+    // Event handlers
+    socket.on(WS_EVENTS.WORKFLOW_UPDATED, (event: WorkflowUpdatedEvent) => {
+      callbacksRef.current.onWorkflowUpdated?.(event);
+    });
+
+    socket.on(WS_EVENTS.EXECUTION_STEP, (event: ExecutionStepEvent) => {
+      callbacksRef.current.onExecutionStep?.(event);
+    });
+
+    socket.on(WS_EVENTS.EXECUTION_COMPLETED, (event: ExecutionCompletedEvent) => {
+      callbacksRef.current.onExecutionCompleted?.(event);
+    });
+
+    socket.on(WS_EVENTS.AI_PROCESSING, ({ processing }: { processing: boolean }) => {
+      callbacksRef.current.onAIProcessing?.(processing);
+    });
+
+    socket.on(WS_EVENTS.AI_RESPONSE, (response: any) => {
+      callbacksRef.current.onAIResponse?.(response);
+    });
+
+    socketRef.current = socket;
+  }, []);
+
+  const disconnect = useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+      setConnected(false);
+    }
+  }, []);
+
+  const subscribeToWorkflow = useCallback((path: string) => {
+    socketRef.current?.emit(WS_EVENTS.WORKFLOW_SUBSCRIBE, path);
+  }, []);
+
+  const unsubscribeFromWorkflow = useCallback((path: string) => {
+    socketRef.current?.emit(WS_EVENTS.WORKFLOW_UNSUBSCRIBE, path);
+  }, []);
+
+  const subscribeToExecution = useCallback((runId: string) => {
+    socketRef.current?.emit(WS_EVENTS.EXECUTION_SUBSCRIBE, runId);
+  }, []);
+
+  const unsubscribeFromExecution = useCallback((runId: string) => {
+    socketRef.current?.emit(WS_EVENTS.EXECUTION_UNSUBSCRIBE, runId);
+  }, []);
+
+  // Auto-connect on mount
+  useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+
+    return () => {
+      disconnect();
+    };
+  }, [autoConnect, connect, disconnect]);
+
+  return {
+    connected,
+    socket: socketRef.current,
+    subscribeToWorkflow,
+    unsubscribeFromWorkflow,
+    subscribeToExecution,
+    unsubscribeFromExecution,
+    connect,
+    disconnect,
+  };
+}

package/src/client/hooks/useWorkflow.ts

@@ -0,0 +1,138 @@
+import { useCallback, useEffect } from 'react';
+import { useWorkflowStore } from '../stores/workflowStore';
+import { useCanvasStore } from '../stores/canvasStore';
+import { useWebSocket } from './useWebSocket';
+import { workflowToGraph } from '../utils/workflowToGraph';
+
+export function useWorkflow() {
+  const {
+    workflows,
+    selectedWorkflow,
+    currentWorkflow,
+    isLoading,
+    error,
+    loadWorkflows,
+    selectWorkflow,
+    loadWorkflow,
+    saveWorkflow,
+    createWorkflow,
+    deleteWorkflow,
+  } = useWorkflowStore();
+
+  const { setNodes, setEdges } = useCanvasStore();
+
+  // Subscribe to workflow updates via WebSocket
+  const { subscribeToWorkflow, unsubscribeFromWorkflow, connected } = useWebSocket({
+    onWorkflowUpdated: (event) => {
+      if (event.path === selectedWorkflow) {
+        // Reload workflow when it changes
+        loadWorkflow(event.path);
+      }
+      // Refresh workflow list for add/remove events
+      if (event.event === 'add' || event.event === 'remove') {
+        loadWorkflows();
+      }
+    },
+  });
+
+  // Load workflows on mount
+  useEffect(() => {
+    loadWorkflows();
+  }, [loadWorkflows]);
+
+  // Subscribe to selected workflow
+  useEffect(() => {
+    if (connected && selectedWorkflow) {
+      subscribeToWorkflow(selectedWorkflow);
+      return () => {
+        unsubscribeFromWorkflow(selectedWorkflow);
+      };
+    }
+  }, [connected, selectedWorkflow, subscribeToWorkflow, unsubscribeFromWorkflow]);
+
+  // Update canvas when workflow changes
+  useEffect(() => {
+    if (currentWorkflow) {
+      const { nodes, edges } = workflowToGraph(currentWorkflow as any);
+      setNodes(nodes);
+      setEdges(edges);
+    }
+  }, [currentWorkflow, setNodes, setEdges]);
+
+  // Select workflow and update canvas
+  const handleSelectWorkflow = useCallback(
+    (path: string) => {
+      selectWorkflow(path);
+    },
+    [selectWorkflow]
+  );
+
+  // Save workflow and refresh canvas
+  const handleSaveWorkflow = useCallback(
+    async (workflow: typeof currentWorkflow) => {
+      if (!workflow) return;
+      await saveWorkflow(workflow);
+    },
+    [saveWorkflow]
+  );
+
+  // Create new workflow
+  const handleCreateWorkflow = useCallback(
+    async (name: string) => {
+      await createWorkflow(name);
+    },
+    [createWorkflow]
+  );
+
+  // Delete workflow
+  const handleDeleteWorkflow = useCallback(
+    async (path: string) => {
+      await deleteWorkflow(path);
+    },
+    [deleteWorkflow]
+  );
+
+  // Get available variables at a given step index
+  const getAvailableVariables = useCallback(
+    (stepIndex: number): string[] => {
+      if (!currentWorkflow) return [];
+
+      const variables: string[] = [];
+
+      // Add input variables
+      if (currentWorkflow.inputs) {
+        for (const key of Object.keys(currentWorkflow.inputs)) {
+          variables.push(`inputs.${key}`);
+        }
+      }
+
+      // Add output variables from previous steps
+      for (let i = 0; i < stepIndex && i < currentWorkflow.steps.length; i++) {
+        const step = currentWorkflow.steps[i];
+        if (step.outputVariable) {
+          variables.push(step.outputVariable);
+        }
+      }
+
+      return variables;
+    },
+    [currentWorkflow]
+  );
+
+  return {
+    // State
+    workflows,
+    selectedWorkflow,
+    currentWorkflow,
+    isLoading,
+    error,
+
+    // Actions
+    selectWorkflow: handleSelectWorkflow,
+    saveWorkflow: handleSaveWorkflow,
+    createWorkflow: handleCreateWorkflow,
+    deleteWorkflow: handleDeleteWorkflow,
+    refreshWorkflows: loadWorkflows,
+    getAvailableVariables,
+  };
+}

package/src/client/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);