@marktoflow/gui 2.0.0-alpha.4 → 2.0.1

package/src/client/hooks/useCanvas.ts

@@ -1,247 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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>
-);