flowstudio 0.0.29 → 0.0.31

package/dist/studio_pane.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@radix-ui/themes';
-import { ReactFlow, useNodesState, useEdgesState, addEdge, Controls, Background, Panel, SmoothStepEdge, useReactFlow, reconnectEdge, useKeyPress } from '@xyflow/react';
-import GNode, { FNode } from './node';
+import { ReactFlow, useNodesState, useEdgesState, addEdge, Background, Panel, SmoothStepEdge, useReactFlow, reconnectEdge, useKeyPress } from '@xyflow/react';
+import GNode from './node';
 import ContextMenu from './context';
 import { useConfigStore } from './zustand/store';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -15,17 +14,26 @@ import TopLeftPanel from './top_left_panel';
 import './studio.css';
 import AppAnalytics from './app_analytics';
 import flow_constants from './constants';
+import BottomLeftPanel from './bottom_left_panel';
+import { toast } from './lib/toast';
+const CustomSmoothstepEdge = memo(({ data, ...props }) => {
+    return _jsx(SmoothStepEdge, { ...props, data: data, style: { strokeWidth: 2 } });
+});
 // Constants
 const MAX_HISTORY_SIZE = 50;
-const AUTO_SAVE_DELAY = 1000;
+const AUTO_SAVE_DELAY = 3000;
 const QUERY_STALE_TIME = 5 * 60 * 1000; // 5 minutes
 const QUERY_CACHE_TIME = 10 * 60 * 1000; // 10 minutes
 // Node templates for performance
 const NODE_TEMPLATES = {
-    function: {
-        type: 'fNode',
-        data: { label: '', function: '' }
-    },
+    // function: {
+    //   type: 'fNode' as const,
+    //   data: { label: '', function: '' }
+    // },
+    // bnode: {
+    //   type: 'bNode' as const,
+    //   data: { label: '', function: '' }
+    // },
     default: {
         type: 'gNode',
         data: {
@@ -40,6 +48,95 @@ const NODE_TEMPLATES = {
         }
     }
 };
+/**
+ * Auto-arrange nodes for horizontal left-to-right flow
+ * - Nodes are arranged in levels (columns) from left to right
+ * - Within each level, nodes are ordered top-to-bottom based on their parent positions
+ * - This creates a clean hierarchical layout that respects input source ordering
+ *
+ * Nodes: any[] where each node has at least `.id` and optional `.data?.type === 'start'`
+ * Edges: any[] where each edge has `.source` and `.target` (ids)
+ */
+function autoArrangeNodes(nodes, edges, options = {}) {
+    if (!nodes || nodes.length === 0)
+        return nodes;
+    const { horizontalSpacing = 300, // Horizontal offset between levels
+    verticalSpacing = 150, // Vertical offset between nodes
+    startX = 100, // Starting X position
+    startY = 100, // Starting Y position
+    nodeWidth: NODE_WIDTH = 250, nodeHeight: NODE_HEIGHT = 180, } = options;
+    // Build adjacency lists
+    const incomingEdges = new Map();
+    const outgoingEdges = new Map();
+    nodes.forEach((n) => {
+        incomingEdges.set(n.id, []);
+        outgoingEdges.set(n.id, []);
+    });
+    edges.forEach((e) => {
+        if (incomingEdges.has(e.target)) {
+            incomingEdges.get(e.target).push(e.source);
+        }
+        if (outgoingEdges.has(e.source)) {
+            outgoingEdges.get(e.source).push(e.target);
+        }
+    });
+    // Find starting nodes (no incoming edges)
+    const startNodes = nodes.filter((n) => { var _a, _b; return ((_b = (_a = incomingEdges.get(n.id)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) === 0; });
+    // BFS level assignment
+    const levels = [];
+    const visited = new Set();
+    const queue = startNodes.map((n) => ({
+        id: n.id,
+        level: 0,
+    }));
+    while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        if (!levels[level])
+            levels[level] = [];
+        if (!visited.has(id)) {
+            levels[level].push(id);
+            visited.add(id);
+            const children = outgoingEdges.get(id) || [];
+            children.forEach((childId) => {
+                if (!visited.has(childId))
+                    queue.push({ id: childId, level: level + 1 });
+            });
+        }
+    }
+    // Assign positions level by level (left → right)
+    const updatedNodes = nodes.map((n) => ({ ...n }));
+    const nodeMap = new Map(updatedNodes.map((n) => [n.id, n]));
+    const nodePositions = new Map();
+    levels.forEach((levelNodes, levelIndex) => {
+        const x = startX + levelIndex * (NODE_WIDTH + horizontalSpacing);
+        // Sort nodes in this level based on their parent positions (top to bottom)
+        if (levelIndex > 0) {
+            levelNodes.sort((a, b) => {
+                const parentsA = incomingEdges.get(a) || [];
+                const parentsB = incomingEdges.get(b) || [];
+                // Calculate average Y position of parents
+                const avgYA = parentsA.length > 0
+                    ? parentsA.reduce((sum, parentId) => { var _a; return sum + (((_a = nodePositions.get(parentId)) === null || _a === void 0 ? void 0 : _a.y) || 0); }, 0) / parentsA.length
+                    : 0;
+                const avgYB = parentsB.length > 0
+                    ? parentsB.reduce((sum, parentId) => { var _a; return sum + (((_a = nodePositions.get(parentId)) === null || _a === void 0 ? void 0 : _a.y) || 0); }, 0) / parentsB.length
+                    : 0;
+                return avgYA - avgYB;
+            });
+        }
+        const totalHeight = levelNodes.length * (NODE_HEIGHT + verticalSpacing);
+        const baseY = startY - totalHeight / 2;
+        levelNodes.forEach((nodeId, idx) => {
+            const y = baseY + idx * (NODE_HEIGHT + verticalSpacing);
+            const node = nodeMap.get(nodeId);
+            if (node) {
+                node.position = { x, y };
+                nodePositions.set(nodeId, { x, y });
+            }
+        });
+    });
+    return Array.from(nodeMap.values());
+}
 // Debounce utility
 function useDebounce(callback, delay) {
     const timeoutRef = useRef(null);
@@ -89,15 +186,21 @@ function useFlowHistory() {
     return { addToHistory, undo, redo, historyIndex, historySize: history.length };
 }
 // Custom hook for auto-save functionality
-function useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory) {
+function useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory, isDraggingRef, isConnectingRef) {
     const [saving, setSaving] = useState(false);
     const lastSavedStateRef = useRef('');
     const performSave = useCallback(async () => {
         if (!rfInstance || !identifier)
             return;
+        const flow = rfInstance.toObject();
+        // CRITICAL: Never save empty flows unless it's intentional
+        // Prevent saving if both nodes and edges are empty (likely a race condition)
+        if (!flow.nodes || !flow.edges || (flow.nodes.length === 0 && flow.edges.length === 0)) {
+            console.warn('Prevented saving empty flow - possible race condition');
+            return;
+        }
         setSaving(true);
         try {
-            const flow = rfInstance.toObject();
             const response = await fetch(`${flow_constants.BACKEND_ENDPOINT}/projects/${identifier}`, {
                 method: 'PATCH',
                 headers: {
@@ -121,6 +224,14 @@ function useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory
     const saveWithHistory = useCallback(() => {
         if (!rfInstance)
             return;
+        // Skip adding to history during drag and connection operations
+        if (isDraggingRef.current || isConnectingRef.current)
+            return;
+        // CRITICAL: Don't save if nodes/edges are undefined or both empty
+        if (!nodes || !edges || (nodes.length === 0 && edges.length === 0)) {
+            console.warn('Skipping save - empty or undefined state');
+            return;
+        }
         const currentState = {
             nodes: nodes === null || nodes === void 0 ? void 0 : nodes.map(n => ({ ...n })),
             edges: edges === null || edges === void 0 ? void 0 : edges.map(e => ({ ...e })),
@@ -160,67 +271,81 @@ function useContextMenu() {
     };
 }
 export default function StudioPane({ api_key, projectsRefetch, identifier, providers, provider, theme }) {
+    var _a;
     const { stateType } = useConfigStore();
+    const stateTypeRef = useRef(stateType);
+    useEffect(() => { stateTypeRef.current = stateType; }, [stateType]);
+    const [getIdentifier, setIdentifier] = useState(identifier);
+    useEffect(() => {
+        setIdentifier(identifier);
+        // Reset the loaded flag when switching projects
+        hasLoadedInitialData.current = false;
+    }, [identifier]);
     // Optimized queries with better caching
     const { data: project, status: projectStatus, refetch: projectRefetch } = useQuery({
-        queryKey: [`project_${identifier}`],
+        queryKey: [`project_${getIdentifier}`],
         queryFn: async () => {
-            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/projects/${identifier}`, {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/projects/${getIdentifier}`, {
                 headers: { "X-API-KEY": `${api_key}` }
             });
             return res === null || res === void 0 ? void 0 : res.json();
         },
-        enabled: !!identifier,
+        enabled: !!getIdentifier,
         staleTime: QUERY_STALE_TIME,
-        gcTime: QUERY_CACHE_TIME
+        gcTime: QUERY_CACHE_TIME,
+        placeholderData: (previousData) => previousData
     });
     const { data: functions, refetch: functionsRefetch } = useQuery({
-        queryKey: [`project_${identifier}_functions`],
+        queryKey: [`project_${getIdentifier}_api_calls`],
         queryFn: async () => {
-            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/functions?project=${identifier}`, {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/api-calls?project=${getIdentifier}`, {
                 headers: { "X-API-KEY": `${api_key}` }
             });
             return res === null || res === void 0 ? void 0 : res.json();
         },
-        enabled: !!identifier,
+        enabled: !!getIdentifier,
         staleTime: QUERY_STALE_TIME,
-        gcTime: QUERY_CACHE_TIME
+        gcTime: QUERY_CACHE_TIME,
+        placeholderData: (previousData) => previousData
     });
     const { data: triggers, refetch: triggersRefetch } = useQuery({
-        queryKey: [`project_${identifier}_triggers`],
+        queryKey: [`project_${getIdentifier}_triggers`],
         queryFn: async () => {
-            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/triggers?project=${identifier}`, {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/triggers?project=${getIdentifier}`, {
                 headers: { "X-API-KEY": `${api_key}` }
             });
             return res === null || res === void 0 ? void 0 : res.json();
         },
-        enabled: !!identifier,
+        enabled: !!getIdentifier,
         staleTime: QUERY_STALE_TIME,
-        gcTime: QUERY_CACHE_TIME
+        gcTime: QUERY_CACHE_TIME,
+        placeholderData: (previousData) => previousData
     });
     const { data: envs, refetch: envsRefetch } = useQuery({
-        queryKey: [`project_${identifier}_envs`],
+        queryKey: [`project_${getIdentifier}_secrets`],
         queryFn: async () => {
-            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/envs?project=${identifier}`, {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/secrets?project=${getIdentifier}`, {
                 headers: { "X-API-KEY": `${api_key}` }
             });
             return res === null || res === void 0 ? void 0 : res.json();
         },
-        enabled: !!identifier,
+        enabled: !!getIdentifier,
         staleTime: QUERY_STALE_TIME,
-        gcTime: QUERY_CACHE_TIME
+        gcTime: QUERY_CACHE_TIME,
+        placeholderData: (previousData) => previousData
     });
     const { data: sessions, status: sessionsStatus, refetch: sessionsRefetch } = useQuery({
-        queryKey: [`project_${identifier}_sessions`],
+        queryKey: [`project_${getIdentifier}_sessions`],
         queryFn: async () => {
-            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/sessions?project=${identifier}`, {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/sessions?project=${getIdentifier}`, {
                 headers: { "X-API-KEY": `${api_key}` }
             });
             return res === null || res === void 0 ? void 0 : res.json();
         },
-        enabled: !!identifier,
+        enabled: !!getIdentifier,
         staleTime: QUERY_STALE_TIME,
-        gcTime: QUERY_CACHE_TIME
+        gcTime: QUERY_CACHE_TIME,
+        placeholderData: (previousData) => previousData
     });
     // Optimized session lookup - compute once, use many times
     const sessionsByNodeId = useMemo(() => {
@@ -235,57 +360,99 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
         }, {});
     }, [sessions === null || sessions === void 0 ? void 0 : sessions.results]);
     ////////////////// Nodes Management (React Flow) /////////////////////////////
-    const CustomSmoothstepEdge = memo(({ data, ...props }) => {
-        return _jsx(SmoothStepEdge, { ...props, data: data, style: { strokeWidth: 2 } });
-    });
-    // Optimized node types with memoized session lookup
+    const [nodes, setNodes, onNodesChange] = useNodesState((project === null || project === void 0 ? void 0 : project.nodes) || []);
+    const [edges, setEdges, onEdgesChange] = useEdgesState((project === null || project === void 0 ? void 0 : project.edges) || []);
+    // Refs hold latest data so nodeTypes can be stable (no deps) while nodes
+    // still read current functions/sessions/envs at render time.
+    const functionsRef = useRef(undefined);
+    const sessionsByNodeIdRef = useRef({});
+    const envsRef = useRef([]);
+    functionsRef.current = functions === null || functions === void 0 ? void 0 : functions.results;
+    sessionsByNodeIdRef.current = sessionsByNodeId;
+    envsRef.current = (_a = envs === null || envs === void 0 ? void 0 : envs.results) !== null && _a !== void 0 ? _a : [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const nodeTypes = useMemo(() => ({
         gNode: (props) => (_jsx(GNode, { ...props, data: {
                 ...props.data,
-                functions: functions === null || functions === void 0 ? void 0 : functions.results,
-                sessions: sessionsByNodeId[props.id] || []
+                functions: functionsRef.current,
+                sessions: sessionsByNodeIdRef.current[props.id] || [],
+                secrets: envsRef.current,
             } })),
-        fNode: (props) => (_jsx(FNode, { ...props, data: {
-                ...props.data,
-                functions: functions === null || functions === void 0 ? void 0 : functions.results,
-                sessions: sessionsByNodeId[props.id] || []
-            } }))
-    }), [functions === null || functions === void 0 ? void 0 : functions.results, sessionsByNodeId]);
+    }), []);
     const edgeTypes = useMemo(() => ({
         default: memo((props) => (_jsx(CustomSmoothstepEdge, { ...props, deletable: true })))
     }), []);
-    const [nodes, setNodes, onNodesChange] = useNodesState((project === null || project === void 0 ? void 0 : project.nodes) || []);
-    const [edges, setEdges, onEdgesChange] = useEdgesState((project === null || project === void 0 ? void 0 : project.edges) || []);
     const [rfInstance, setRfInstance] = useState(null);
     const { setViewport, screenToFlowPosition, getNodes, getEdges } = useReactFlow();
     const isReconnectingRef = useRef(false);
+    const hasLoadedInitialData = useRef(false);
+    const isDraggingRef = useRef(false);
+    const isConnectingRef = useRef(false);
     // Custom hooks
     const { addToHistory, undo, redo, historyIndex, historySize } = useFlowHistory();
-    const { performSave, saveWithHistory, saving } = useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory);
+    const { performSave, saveWithHistory, saving } = useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory, isDraggingRef, isConnectingRef);
     const { showContextMenu, contextMenuPosition, handleContextMenu, setShowContextMenu } = useContextMenu();
     // Key Presses
-    const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
-    const cmdAndZPressed = useKeyPress(['Meta+z', 'Strg+z']);
-    const cmdAndYPressed = useKeyPress(['Meta+y', 'Strg+y']);
+    const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s', 'Ctrl+s']);
+    const cmdAndZPressed = useKeyPress(['Meta+z', 'Strg+z', 'Ctrl+z']);
+    const cmdAndYPressed = useKeyPress(['Meta+y', 'Strg+y', 'Ctrl+y']);
     ////////////// onMount and Initial Load //////////////
     useEffect(() => {
         // Component initialization logic can go here
     }, []);
     useEffect(() => {
         var _a, _b, _c;
+        // Skip resetting canvas when in live mode — live mode manages its own source
+        if (stateTypeRef.current === 'live')
+            return;
         if (project === null || project === void 0 ? void 0 : project.flow_draft) {
             const { x = 0, y = 0, zoom = 1 } = ((_a = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _a === void 0 ? void 0 : _a.viewport) || {};
             setNodes(((_b = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _b === void 0 ? void 0 : _b.nodes) || []);
             setEdges(((_c = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _c === void 0 ? void 0 : _c.edges) || []);
             setViewport({ x, y, zoom });
+            setTimeout(() => {
+                hasLoadedInitialData.current = true;
+            }, 500);
         }
     }, [project, setNodes, setEdges, setViewport]);
+    const prevStateTypeRef = useRef(stateType);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const didSwitch = prevStateTypeRef.current !== stateType;
+        prevStateTypeRef.current = stateType;
+        if (stateType === 'live') {
+            hasLoadedInitialData.current = false;
+            // Use published flow if it has nodes; fall back to draft if not yet published
+            const flowSource = (((_b = (_a = project === null || project === void 0 ? void 0 : project.flow) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.length) > 0) ? project.flow : project === null || project === void 0 ? void 0 : project.flow_draft;
+            if (!((_c = flowSource === null || flowSource === void 0 ? void 0 : flowSource.nodes) === null || _c === void 0 ? void 0 : _c.length))
+                return;
+            const { x = 0, y = 0, zoom = 1 } = (flowSource === null || flowSource === void 0 ? void 0 : flowSource.viewport) || {};
+            setNodes((flowSource === null || flowSource === void 0 ? void 0 : flowSource.nodes) || []);
+            setEdges((flowSource === null || flowSource === void 0 ? void 0 : flowSource.edges) || []);
+            setViewport({ x, y, zoom });
+        }
+        else if (didSwitch && stateType === 'design' && (project === null || project === void 0 ? void 0 : project.flow_draft)) {
+            // Only reload draft when actually switching back — not on every project refetch
+            hasLoadedInitialData.current = false;
+            const { x = 0, y = 0, zoom = 1 } = ((_d = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _d === void 0 ? void 0 : _d.viewport) || {};
+            setNodes(((_e = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _e === void 0 ? void 0 : _e.nodes) || []);
+            setEdges(((_f = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _f === void 0 ? void 0 : _f.edges) || []);
+            setViewport({ x, y, zoom });
+            setTimeout(() => { hasLoadedInitialData.current = true; }, 500);
+        }
+    }, [stateType, project]);
     useEffect(() => {
         setEdges((eds) => eds.map((edge) => ({
             ...edge,
-            animated: stateType === 'sessions'
+            animated: stateType === 'live'
         })));
     }, [stateType, setEdges]);
+    useEffect(() => {
+        if (stateType !== 'live')
+            return;
+        const interval = setInterval(() => { sessionsRefetch(); }, 15000);
+        return () => clearInterval(interval);
+    }, [stateType, sessionsRefetch]);
     //////////////////////////// Connections /////////////////////////////////
     const onConnect = useCallback((connection) => {
         setEdges((eds) => {
@@ -299,9 +466,14 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
         });
     }, [setEdges]);
     const onConnectStart = useCallback(() => {
-        // isReconnectingRef.current = false;
+        isConnectingRef.current = true;
     }, []);
     const onConnectEnd = useCallback((event, connectionState) => {
+        isConnectingRef.current = false;
+        // Trigger saveWithHistory after connection ends to capture final state
+        setTimeout(() => {
+            saveWithHistory();
+        }, 0);
         if (!connectionState.isValid && !connectionState.toNode) {
             if (!connectionState.toNode && !isReconnectingRef.current) {
                 const { clientX, clientY } = 'changedTouches' in event ? event.changedTouches[0] : event;
@@ -393,6 +565,10 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
             setNodes(prevState.nodes);
             setEdges(prevState.edges);
             setViewport(prevState.viewport);
+            toast.success("Undo successful");
+        }
+        else {
+            toast.info("Nothing to undo");
         }
     }, [undo, setNodes, setEdges, setViewport]);
     const handleRedo = useCallback(() => {
@@ -401,6 +577,10 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
             setNodes(nextState.nodes);
             setEdges(nextState.edges);
             setViewport(nextState.viewport);
+            toast.success("Redo successful");
+        }
+        else {
+            toast.info("Nothing to redo");
         }
     }, [redo, setNodes, setEdges, setViewport]);
     useEffect(() => {
@@ -411,6 +591,18 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
             handleRedo();
         }
     }, [cmdAndZPressed, cmdAndYPressed, handleUndo, handleRedo]);
+    ////////////////// Auto Arrange Nodes /////////////////////////////
+    const handleAutoArrange = useCallback(() => {
+        setNodes((currentNodes) => {
+            const arrangedNodes = autoArrangeNodes(currentNodes, edges, {
+                horizontalSpacing: 300, // Horizontal offset between levels
+                verticalSpacing: 150, // Vertical offset between nodes
+                startX: 100, // Starting X position
+                startY: 100 // Starting Y position
+            });
+            return arrangedNodes;
+        });
+    }, [edges, setNodes]);
     ////////////////// For Context Menu /////////////////////////////
     const createNode = useCallback((type) => {
         if ((contextMenuPosition === null || contextMenuPosition === void 0 ? void 0 : contextMenuPosition.x) != null && (contextMenuPosition === null || contextMenuPosition === void 0 ? void 0 : contextMenuPosition.y) != null) {
@@ -423,7 +615,8 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
                 while (existingLabels.has(newLabel)) {
                     newLabel = `${type}_label_${counter++}`;
                 }
-                const template = type === 'function' ? NODE_TEMPLATES.function : NODE_TEMPLATES.default;
+                // const template = type === 'function' ? NODE_TEMPLATES.function : type === 'bnode' ? NODE_TEMPLATES.bnode : NODE_TEMPLATES.default;
+                const template = NODE_TEMPLATES.default;
                 return [
                     ...prevNodes,
                     {
@@ -433,9 +626,21 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
                         data: {
                             ...template.data,
                             label: newLabel,
-                            ...(type === 'function' ? { function: '' } : {
+                            type,
+                            ...(type === 'api' ? {
+                                api: '',
+                                response: {
+                                    source: 'api_call',
+                                    inputs: [{ id: 1 }]
+                                }
+                            } : type === 'bnode' ? {
+                                node: '',
+                                response: {
+                                    source: 'bnode',
+                                    inputs: [{ id: 1 }]
+                                }
+                            } : {
                                 message: '',
-                                type,
                                 response: {
                                     validation: 'alpha-numeric',
                                     source: 'manual',
@@ -450,10 +655,30 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
     }, [contextMenuPosition, setNodes]);
     //////////////////// Auto Save //////////////////
     useEffect(() => {
-        if (rfInstance && identifier && (nodes.length > 0 || edges.length > 0)) {
+        // CRITICAL: Only autosave if we have valid data and identifier matches
+        // This prevents saving empty state during tab switches or initial load
+        if (stateType !== 'live' &&
+            hasLoadedInitialData.current &&
+            rfInstance &&
+            getIdentifier &&
+            identifier === getIdentifier &&
+            nodes &&
+            edges &&
+            (nodes.length > 0 || edges.length > 0)) {
             saveWithHistory();
         }
-    }, [nodes, edges, rfInstance, identifier, saveWithHistory]);
+    }, [nodes, edges, rfInstance, getIdentifier, identifier, saveWithHistory, stateType]);
+    ///////////////// Drag Event Handlers ////////////////
+    const onNodeDragStart = useCallback(() => {
+        isDraggingRef.current = true;
+    }, []);
+    const onNodeDragStop = useCallback(() => {
+        isDraggingRef.current = false;
+        // Trigger saveWithHistory after drag ends to capture final state
+        setTimeout(() => {
+            saveWithHistory();
+        }, 0);
+    }, [saveWithHistory]);
     ///////////////// Delete Key Code ////////////////
     const onSelectionChange = useCallback(({ nodes, edges }) => {
         // console.log('Selected nodes:', nodes)
@@ -469,6 +694,6 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [setNodes, setEdges]);
-    return (_jsxs(Box, { position: 'absolute', top: '0', right: '0', bottom: '0px', left: '0', style: {}, children: [_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onSelectionChange: onSelectionChange, onConnectEnd: onConnectEnd, onConnectStart: onConnectStart, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onInit: setRfInstance, snapToGrid: true, fitView: true, minZoom: 0.1, maxZoom: 3, colorMode: theme, onPaneContextMenu: handleContextMenu, deleteKeyCode: null, attributionPosition: "bottom-right", children: [_jsx(Controls, {}), _jsx(Background, { gap: 12, size: 1 }), _jsx(Panel, { position: "top-center", children: _jsx(TopCenterPanel, { projectId: identifier }) }), _jsx(Panel, { position: "top-left", children: _jsx(TopLeftPanel, { api_key: api_key, projectId: identifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance, redo: handleRedo, undo: handleUndo, historyIndex: historyIndex }) }), _jsx(Panel, { position: "top-right", children: _jsx(TopRightPanel, { api_key: api_key, projectId: identifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance }) })] }), _jsx(AppAnalytics, { api_key: api_key, project: project, sessions: sessions, sessionsStatus: sessionsStatus, refetch: sessionsRefetch }), _jsx(AppSettings, { api_key: api_key, project: project, projectsRefetch: projectsRefetch, providers: providers, provider: provider, triggers: triggers, triggersRefetch: triggersRefetch, functions: functions, functionsRefetch: functionsRefetch, envs: envs, envsRefetch: envsRefetch }), _jsx(ContextMenu, { api_key: api_key, open: showContextMenu, setOpen: setShowContextMenu, createNode: createNode, menuPosition: contextMenuPosition })] }));
+    return (_jsxs("div", { className: 'absolute top-0 right-0 bottom-0 left-0', children: [_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onSelectionChange: onSelectionChange, onConnectEnd: onConnectEnd, onConnectStart: onConnectStart, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onNodeDragStart: onNodeDragStart, onNodeDragStop: onNodeDragStop, onReconnectEnd: onReconnectEnd, onInit: setRfInstance, snapToGrid: true, fitView: true, minZoom: 0.1, maxZoom: 3, colorMode: theme, onPaneContextMenu: handleContextMenu, deleteKeyCode: null, attributionPosition: "bottom-right", children: [_jsx(Background, { gap: 12, size: 1 }), _jsx(Panel, { position: "top-center", children: _jsx(TopCenterPanel, { projectId: getIdentifier }) }), _jsx(Panel, { position: "top-left", children: _jsx(TopLeftPanel, { api_key: api_key, projectId: getIdentifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance, redo: handleRedo, undo: handleUndo, historyIndex: historyIndex, autoArrange: handleAutoArrange }) }), _jsx(Panel, { position: "bottom-left", children: _jsx(BottomLeftPanel, { api_key: api_key, projectId: getIdentifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance, redo: handleRedo, undo: handleUndo, historyIndex: historyIndex, autoArrange: handleAutoArrange }) }), _jsx(Panel, { position: "top-right", children: _jsx(TopRightPanel, { api_key: api_key, projectId: getIdentifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance }) })] }), _jsx(AppAnalytics, { api_key: api_key, project: project, sessions: sessions, sessionsStatus: sessionsStatus, refetch: sessionsRefetch }), _jsx(AppSettings, { api_key: api_key, project: project, projectRefetch: projectRefetch, projectsRefetch: projectsRefetch, providers: providers, provider: provider, triggers: triggers, triggersRefetch: triggersRefetch, functions: functions, functionsRefetch: functionsRefetch, envs: envs, envsRefetch: envsRefetch }), _jsx(ContextMenu, { api_key: api_key, open: showContextMenu, setOpen: setShowContextMenu, createNode: createNode, menuPosition: contextMenuPosition })] }));
 }
 //# sourceMappingURL=studio_pane.js.map