flowstudio 0.0.30 → 0.0.32

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: '' }
+    // },
+    // gotonode: {
+    //   type: 'gotoNode' as const,
+    //   data: { label: '', function: '' }
+    // },
     default: {
         type: 'gNode',
         data: {
@@ -40,6 +48,132 @@ 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 = 80, verticalSpacing = 50, nodeWidth: DEFAULT_WIDTH = 250, nodeHeight: DEFAULT_HEIGHT = 200, } = options;
+    // Use the actual rendered size when available (React Flow populates node.measured after paint)
+    const nw = (n) => { var _a, _b, _c; return (_c = (_b = (_a = n.measured) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : n.width) !== null && _c !== void 0 ? _c : DEFAULT_WIDTH; };
+    const nh = (n) => { var _a, _b, _c; return (_c = (_b = (_a = n.measured) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : n.height) !== null && _c !== void 0 ? _c : DEFAULT_HEIGHT; };
+    const nodeById = new Map(nodes.map((n) => [n.id, n]));
+    // ── 1. Build adjacency (deduplicate, skip self-loops) ────────────────────
+    const nodeSet = new Set(nodes.map((n) => n.id));
+    const childMap = new Map();
+    const parentMap = new Map();
+    nodes.forEach((n) => { childMap.set(n.id, []); parentMap.set(n.id, []); });
+    const seenEdge = new Set();
+    edges.forEach((e) => {
+        const key = `${e.source}|${e.target}`;
+        if (nodeSet.has(e.source) && nodeSet.has(e.target) && e.source !== e.target && !seenEdge.has(key)) {
+            seenEdge.add(key);
+            childMap.get(e.source).push(e.target);
+            parentMap.get(e.target).push(e.source);
+        }
+    });
+    // ── 2. Shortest-path BFS layering ────────────────────────────────────────
+    const levelMap = new Map();
+    const visited = new Set();
+    const roots = nodes.filter((n) => { var _a, _b; return ((_b = (_a = parentMap.get(n.id)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) === 0; });
+    const queue = (roots.length > 0 ? roots : [nodes[0]])
+        .map((n) => ({ id: n.id, level: 0 }));
+    while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        if (visited.has(id))
+            continue;
+        visited.add(id);
+        levelMap.set(id, level);
+        (childMap.get(id) || []).forEach((c) => {
+            if (!visited.has(c))
+                queue.push({ id: c, level: level + 1 });
+        });
+    }
+    let extraCol = levelMap.size > 0 ? Math.max(...Array.from(levelMap.values())) + 1 : 0;
+    nodes.forEach((n) => { if (!levelMap.has(n.id))
+        levelMap.set(n.id, extraCol++); });
+    // ── 3. Group into columns ─────────────────────────────────────────────────
+    const columns = new Map();
+    levelMap.forEach((lv, id) => {
+        if (!columns.has(lv))
+            columns.set(lv, []);
+        columns.get(lv).push(id);
+    });
+    const sortedLevels = Array.from(columns.keys()).sort((a, b) => a - b);
+    // ── 4. Compute column X positions using actual node widths ────────────────
+    const colX = [];
+    let curX = 0;
+    sortedLevels.forEach((lv, colIdx) => {
+        colX[colIdx] = curX;
+        const maxW = Math.max(...(columns.get(lv).map(id => nw(nodeById.get(id)))));
+        curX += maxW + horizontalSpacing;
+    });
+    // ── 5. Place nodes — sequential Y using actual heights, centred on parents ─
+    const pos = new Map();
+    sortedLevels.forEach((lv, colIdx) => {
+        const group = columns.get(lv);
+        const x = colX[colIdx];
+        // Sort within column by average parent Y-centre (minimises edge crossings)
+        if (colIdx > 0) {
+            group.sort((a, b) => {
+                const midY = (id) => {
+                    const ps = parentMap.get(id) || [];
+                    if (!ps.length)
+                        return 0;
+                    return ps.reduce((s, p) => {
+                        const pp = pos.get(p);
+                        return s + (pp ? pp.y + nh(nodeById.get(p)) / 2 : 0);
+                    }, 0) / ps.length;
+                };
+                return midY(a) - midY(b);
+            });
+        }
+        // Total column height = sum of actual node heights + gaps between them
+        const heights = group.map((id) => nh(nodeById.get(id)));
+        const totalHeight = heights.reduce((s, h) => s + h, 0)
+            + (group.length - 1) * verticalSpacing;
+        // Centre point: Y=0 for first column, parent mid-Y centroid for the rest
+        let colCenterY = 0;
+        if (colIdx > 0) {
+            const pys = [];
+            group.forEach((id) => {
+                ;
+                (parentMap.get(id) || []).forEach((p) => {
+                    const pp = pos.get(p);
+                    if (pp)
+                        pys.push(pp.y + nh(nodeById.get(p)) / 2);
+                });
+            });
+            if (pys.length > 0)
+                colCenterY = pys.reduce((s, y) => s + y, 0) / pys.length;
+        }
+        // Place nodes sequentially from the top of the column, never with a fixed step —
+        // each node starts immediately after the actual bottom of the previous one.
+        let y = colCenterY - totalHeight / 2;
+        group.forEach((id, i) => {
+            pos.set(id, { x, y });
+            y += heights[i] + verticalSpacing;
+        });
+    });
+    // ── 6. Shift to match the canvas top-left bounding box ───────────────────
+    const originX = Math.min(...nodes.map((n) => { var _a, _b; return (_b = (_a = n.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0; }));
+    const originY = Math.min(...nodes.map((n) => { var _a, _b; return (_b = (_a = n.position) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0; }));
+    const minPX = Math.min(...Array.from(pos.values()).map(p => p.x));
+    const minPY = Math.min(...Array.from(pos.values()).map(p => p.y));
+    return nodes.map((n) => {
+        const p = pos.get(n.id);
+        return p
+            ? { ...n, position: { x: p.x + (originX - minPX), y: p.y + (originY - minPY) } }
+            : n;
+    });
+}
 // Debounce utility
 function useDebounce(callback, delay) {
     const timeoutRef = useRef(null);
@@ -89,15 +223,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 +261,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 +308,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 +397,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 +503,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 +602,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 +614,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 +628,19 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
             handleRedo();
         }
     }, [cmdAndZPressed, cmdAndYPressed, handleUndo, handleRedo]);
+    ////////////////// Auto Arrange Nodes /////////////////////////////
+    const handleAutoArrange = useCallback(() => {
+        // Use rfInstance.getNodes() so each node carries its actual measured dimensions
+        const liveNodes = rfInstance ? rfInstance.getNodes() : nodes;
+        const arrangedNodes = autoArrangeNodes(liveNodes, edges);
+        setNodes(arrangedNodes);
+        addToHistory({ nodes: arrangedNodes, edges, viewport: rfInstance === null || rfInstance === void 0 ? void 0 : rfInstance.getViewport() });
+        performSave();
+        // Wait for React to repaint the new positions before fitting the view
+        setTimeout(() => {
+            rfInstance === null || rfInstance === void 0 ? void 0 : rfInstance.fitView({ padding: 0.1, duration: 400 });
+        }, 50);
+    }, [nodes, edges, setNodes, addToHistory, rfInstance, performSave]);
     ////////////////// 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 +653,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 === 'gotonode' ? NODE_TEMPLATES.gotonode : NODE_TEMPLATES.default;
+                const template = NODE_TEMPLATES.default;
                 return [
                     ...prevNodes,
                     {
@@ -433,9 +664,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 === 'gotonode' ? {
+                                node: '',
+                                response: {
+                                    source: 'gotonode',
+                                    inputs: [{ id: 1 }]
+                                }
+                            } : {
                                 message: '',
-                                type,
                                 response: {
                                     validation: 'alpha-numeric',
                                     source: 'manual',
@@ -450,10 +693,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 +732,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, historySize: historySize, 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