@flowdrop/flowdrop 1.8.1 → 1.10.0

package/dist/playground/mount.js

@@ -46,9 +46,52 @@
 import { mount, unmount } from 'svelte';
 import Playground from '../components/playground/Playground.svelte';
 import PlaygroundModal from '../components/playground/PlaygroundModal.svelte';
+import PlaygroundStudio from '../components/playground/PlaygroundStudio.svelte';
 import { setEndpointConfig } from '../services/api.js';
 import { playgroundService } from '../services/playgroundService.js';
-import { getCurrentSession, getSessions, getMessages, playgroundActions, createPollingCallback, subscribeToSessionStatus } from '../stores/playgroundStore.svelte.js';
+import { getCurrentSession, getSessions, getMessages, getIsExecuting, playgroundActions, applyServerResponse, subscribeToSessionStatus } from '../stores/playgroundStore.svelte.js';
+async function resolveEndpointConfig(endpointConfig) {
+    if (!endpointConfig)
+        return undefined;
+    const { defaultEndpointConfig } = await import('../config/endpoints.js');
+    const resolved = {
+        ...defaultEndpointConfig,
+        ...endpointConfig,
+        endpoints: { ...defaultEndpointConfig.endpoints, ...endpointConfig.endpoints }
+    };
+    setEndpointConfig(resolved);
+    return resolved;
+}
+function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange) {
+    const pollingInterval = config.pollingInterval ?? 1500;
+    const unsubscribeStatus = onSessionStatusChange
+        ? subscribeToSessionStatus(onSessionStatusChange)
+        : undefined;
+    return {
+        destroy: () => {
+            unsubscribeStatus?.();
+            playgroundService.stopPolling();
+            playgroundActions.reset();
+            unmount(svelteApp);
+        },
+        getCurrentSession: () => getCurrentSession(),
+        getSessions: () => getSessions(),
+        getMessageCount: () => getMessages().length,
+        isExecuting: () => getIsExecuting(),
+        stopPolling: () => playgroundService.stopPolling(),
+        startPolling: () => {
+            const session = getCurrentSession();
+            if (session) {
+                playgroundService.startPolling(session.id, (response) => applyServerResponse(response), pollingInterval, config.shouldStopPolling, playgroundService.getLastSequenceNumber());
+            }
+        },
+        pushMessages: (response) => applyServerResponse(response),
+        reset: () => {
+            playgroundService.stopPolling();
+            playgroundActions.reset();
+        }
+    };
+}
 /**
  * Mount the Playground component in a container
  *
@@ -91,37 +134,15 @@ export async function mountPlayground(container, options) {
     if (mode === 'modal' && !onClose) {
         throw new Error('onClose callback is required for modal mode');
     }
-    // Set endpoint configuration if provided
-    let finalEndpointConfig;
-    if (endpointConfig) {
-        // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import('../config/endpoints.js');
-        finalEndpointConfig = {
-            ...defaultEndpointConfig,
-            ...endpointConfig,
-            endpoints: {
-                ...defaultEndpointConfig.endpoints,
-                ...endpointConfig.endpoints
-            }
-        };
-        setEndpointConfig(finalEndpointConfig);
-    }
-    // Handle modal mode differently
-    // For modal mode, PlaygroundModal creates its own backdrop, so we mount directly to body
-    // For other modes, use the provided container
+    const finalEndpointConfig = await resolveEndpointConfig(endpointConfig);
     let targetContainer = container;
     if (mode === 'modal') {
-        // For modal mode, create a container in the body
-        // PlaygroundModal will handle the backdrop itself
         targetContainer = document.body;
     }
     else {
-        // Apply container styling for non-modal modes
         container.style.height = height;
         container.style.width = width;
     }
-    // Mount the appropriate component
-    // Separate the mount calls to avoid TypeScript inference issues with different props types
     let svelteApp;
     if (mode === 'modal') {
         svelteApp = mount(PlaygroundModal, {
@@ -155,63 +176,7 @@ export async function mountPlayground(container, options) {
             }
         });
     }
-    // Store state for cleanup
-    const state = {
-        svelteApp,
-        container: targetContainer,
-        originalContainer: mode === 'modal' ? container : undefined,
-        workflowId
-    };
-    // Create shared polling callback using lifecycle hooks from config
-    const pollingCallback = createPollingCallback(config.isTerminalStatus);
-    const pollingInterval = config.pollingInterval ?? 1500;
-    // Subscribe to session status changes if callback provided
-    let unsubscribeStatus;
-    if (onSessionStatusChange) {
-        unsubscribeStatus = subscribeToSessionStatus(onSessionStatusChange);
-    }
-    // Create the mounted playground interface
-    const mountedPlayground = {
-        destroy: () => {
-            // Unsubscribe from status changes
-            unsubscribeStatus?.();
-            // Stop any active polling
-            playgroundService.stopPolling();
-            // Reset playground state
-            playgroundActions.reset();
-            // Unmount Svelte component
-            unmount(state.svelteApp);
-        },
-        getCurrentSession: () => {
-            return getCurrentSession();
-        },
-        getSessions: () => {
-            return getSessions();
-        },
-        getMessageCount: () => {
-            return getMessages().length;
-        },
-        isExecuting: () => {
-            return playgroundService.isPolling();
-        },
-        stopPolling: () => {
-            playgroundService.stopPolling();
-        },
-        startPolling: () => {
-            const session = getCurrentSession();
-            if (session) {
-                playgroundService.startPolling(session.id, pollingCallback, pollingInterval, config.shouldStopPolling);
-            }
-        },
-        pushMessages: (response) => {
-            pollingCallback(response);
-        },
-        reset: () => {
-            playgroundService.stopPolling();
-            playgroundActions.reset();
-        }
-    };
-    return mountedPlayground;
+    return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
 }
 /**
  * Unmount a Playground instance
@@ -233,3 +198,35 @@ export function unmountPlayground(app) {
         app.destroy();
     }
 }
+export async function mountPlaygroundStudio(container, options) {
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', initialPipelineOpen, minChatWidth, initialPipelineWidth, onClose, onSessionNavigate, onSessionStatusChange } = options;
+    if (!workflowId) {
+        throw new Error('workflowId is required for mountPlaygroundStudio()');
+    }
+    if (!container) {
+        throw new Error('container element is required for mountPlaygroundStudio()');
+    }
+    if (mode === 'modal') {
+        throw new Error('modal mode is not supported by mountPlaygroundStudio() — use mountPlayground() instead');
+    }
+    const finalEndpointConfig = await resolveEndpointConfig(endpointConfig);
+    container.style.height = height;
+    container.style.width = width;
+    const svelteApp = mount(PlaygroundStudio, {
+        target: container,
+        props: {
+            workflowId,
+            workflow,
+            mode,
+            initialSessionId,
+            endpointConfig: finalEndpointConfig,
+            config,
+            onClose,
+            onSessionNavigate,
+            initialPipelineOpen,
+            minChatWidth,
+            initialPipelineWidth
+        }
+    });
+    return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
+}

package/dist/services/globalSave.d.ts

@@ -34,6 +34,13 @@ export interface GlobalSaveOptions {
      * Pass workflowStore's markAsSaved here when calling from App.svelte.
      */
     onMarkAsSaved?: () => void;
+    /**
+     * Callback invoked after a successful save with the persisted workflow.
+     * Receives the server-returned workflow (which may have a different ID than
+     * the one sent, e.g. server-assigned integer vs client UUID).
+     * Use this to update draft storage keys or other ID-dependent state.
+     */
+    onSaved?: (savedWorkflow: Workflow) => void;
 }
 /**
  * Options accepted by globalExportWorkflow().

package/dist/services/globalSave.js

@@ -85,7 +85,7 @@ async function flushPendingFormChanges() {
  *  7. Show toast notifications (respecting features.showToasts)
  */
 export async function globalSaveWorkflow(options = {}) {
-    const { apiClient, eventHandlers, onMarkAsSaved } = options;
+    const { apiClient, eventHandlers, onMarkAsSaved, onSaved } = options;
     const features = { ...DEFAULT_FEATURES, ...options.features };
     // Step 1 — Flush pending form changes (single location for this logic)
     await flushPendingFormChanges();
@@ -170,6 +170,10 @@ export async function globalSaveWorkflow(options = {}) {
             // Fallback: call the store's own markAsSaved if no callback was provided
             storeMarkAsSaved();
         }
+        // Notify caller with the definitive saved workflow (server-assigned ID)
+        if (onSaved) {
+            onSaved(savedWorkflow);
+        }
         // Show success toast
         if (loadingToast)
             dismissToast(loadingToast);

package/dist/services/nodeExecutionService.js

@@ -41,7 +41,8 @@ export class NodeExecutionService {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            const pipelineData = await response.json();
+            const raw = await response.json();
+            const pipelineData = raw.data ?? raw;
             const jobs = pipelineData.jobs || [];
             const nodeStatuses = pipelineData.node_statuses || {};
             // Find the job for this node
@@ -116,7 +117,8 @@ export class NodeExecutionService {
                 }
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            const result = await response.json();
+            const raw = await response.json();
+            const result = raw.data ?? raw;
             const jobs = result.jobs || [];
             const executionInfoMap = {};
             // Initialize all nodes with default values

package/dist/services/playgroundService.d.ts

@@ -18,7 +18,7 @@ export declare class PlaygroundService {
     private pollingInterval;
     private pollingSessionId;
     private currentBackoff;
-    private lastMessageTimestamp;
+    private lastSequenceNumber;
     private constructor();
     /**
      * Get the singleton instance of PlaygroundService
@@ -78,11 +78,11 @@ export declare class PlaygroundService {
      * Get messages from a playground session
      *
      * @param sessionId - The session UUID
-     * @param since - Optional timestamp to fetch only newer messages (ISO 8601)
+     * @param afterSequence - Optional sequence number cursor — returns only messages with sequenceNumber > this value
      * @param limit - Maximum number of messages to return
      * @returns Messages and session status
      */
-    getMessages(sessionId: string, since?: string, limit?: number): Promise<PlaygroundMessagesApiResponse>;
+    getMessages(sessionId: string, afterSequence?: number, limit?: number): Promise<PlaygroundMessagesApiResponse>;
     /**
      * Send a message to a playground session
      *
@@ -105,8 +105,9 @@ export declare class PlaygroundService {
      * @param callback - Callback function to handle new messages
      * @param interval - Polling interval in milliseconds (default: 1500)
      * @param shouldStopPolling - Optional override for stop conditions (default: defaultShouldStopPolling)
+     * @param initialSequenceNumber - Optional sequence number to seed polling from (avoids re-fetching already loaded messages)
      */
-    startPolling(sessionId: string, callback: (response: PlaygroundMessagesApiResponse) => void, interval?: number, shouldStopPolling?: (status: PlaygroundSessionStatus) => boolean): void;
+    startPolling(sessionId: string, callback: (response: PlaygroundMessagesApiResponse) => void, interval?: number, shouldStopPolling?: (status: PlaygroundSessionStatus) => boolean, initialSequenceNumber?: number | null): void;
     /**
      * Stop polling for messages
      */
@@ -123,6 +124,12 @@ export declare class PlaygroundService {
      * @returns The session ID being polled, or null
      */
     getPollingSessionId(): string | null;
+    /**
+     * Get the last sequence number used as cursor for incremental polling
+     *
+     * @returns The last sequence number, or null
+     */
+    getLastSequenceNumber(): number | null;
 }
 /**
  * Export singleton instance

package/dist/services/playgroundService.js

@@ -29,7 +29,7 @@ export class PlaygroundService {
     pollingInterval = null;
     pollingSessionId = null;
     currentBackoff = DEFAULT_POLLING_INTERVAL;
-    lastMessageTimestamp = null;
+    lastSequenceNumber = null;
     constructor() { }
     /**
      * Get the singleton instance of PlaygroundService
@@ -171,19 +171,18 @@ export class PlaygroundService {
      * Get messages from a playground session
      *
      * @param sessionId - The session UUID
-     * @param since - Optional timestamp to fetch only newer messages (ISO 8601)
+     * @param afterSequence - Optional sequence number cursor — returns only messages with sequenceNumber > this value
      * @param limit - Maximum number of messages to return
      * @returns Messages and session status
      */
-    async getMessages(sessionId, since, limit) {
+    async getMessages(sessionId, afterSequence, limit) {
         const config = this.getConfig();
         let url = buildEndpointUrl(config, config.endpoints.playground.getMessages, {
             sessionId
         });
-        // Add query parameters
         const params = new URLSearchParams();
-        if (since) {
-            params.append('since', since);
+        if (afterSequence !== undefined) {
+            params.append('since', afterSequence.toString());
         }
         if (limit !== undefined) {
             params.append('limit', limit.toString());
@@ -244,24 +243,27 @@ export class PlaygroundService {
      * @param callback - Callback function to handle new messages
      * @param interval - Polling interval in milliseconds (default: 1500)
      * @param shouldStopPolling - Optional override for stop conditions (default: defaultShouldStopPolling)
+     * @param initialSequenceNumber - Optional sequence number to seed polling from (avoids re-fetching already loaded messages)
      */
-    startPolling(sessionId, callback, interval = DEFAULT_POLLING_INTERVAL, shouldStopPolling) {
+    startPolling(sessionId, callback, interval = DEFAULT_POLLING_INTERVAL, shouldStopPolling, initialSequenceNumber) {
         // Stop any existing polling
         this.stopPolling();
         this.pollingSessionId = sessionId;
         this.currentBackoff = interval;
-        this.lastMessageTimestamp = null;
+        this.lastSequenceNumber = initialSequenceNumber ?? null;
         const shouldStop = shouldStopPolling ?? defaultShouldStopPolling;
         const poll = async () => {
             if (this.pollingSessionId !== sessionId) {
                 return;
             }
             try {
-                const response = await this.getMessages(sessionId, this.lastMessageTimestamp ?? undefined);
-                // Update last message timestamp
+                const response = await this.getMessages(sessionId, this.lastSequenceNumber ?? undefined);
+                // Update last sequence number cursor
                 if (response.data && response.data.length > 0) {
                     const lastMessage = response.data[response.data.length - 1];
-                    this.lastMessageTimestamp = lastMessage.timestamp;
+                    if (lastMessage.sequenceNumber !== undefined) {
+                        this.lastSequenceNumber = lastMessage.sequenceNumber;
+                    }
                 }
                 // Reset backoff on successful request
                 this.currentBackoff = interval;
@@ -295,7 +297,7 @@ export class PlaygroundService {
             this.pollingInterval = null;
         }
         this.pollingSessionId = null;
-        this.lastMessageTimestamp = null;
+        this.lastSequenceNumber = null;
         this.currentBackoff = DEFAULT_POLLING_INTERVAL;
     }
     /**
@@ -314,6 +316,14 @@ export class PlaygroundService {
     getPollingSessionId() {
         return this.pollingSessionId;
     }
+    /**
+     * Get the last sequence number used as cursor for incremental polling
+     *
+     * @returns The last sequence number, or null
+     */
+    getLastSequenceNumber() {
+        return this.lastSequenceNumber;
+    }
 }
 /**
  * Export singleton instance

package/dist/stores/pipelinePanelStore.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function getPipelinePanelOpen(): boolean;
+export declare const pipelinePanelActions: {
+    init(): void;
+    toggle(): void;
+    setOpen(value: boolean): void;
+};

package/dist/stores/pipelinePanelStore.svelte.js

@@ -0,0 +1,24 @@
+const STORAGE_KEY = 'fd-pipeline-panel-open';
+let _isOpen = $state(false);
+export function getPipelinePanelOpen() {
+    return _isOpen;
+}
+export const pipelinePanelActions = {
+    init() {
+        if (typeof localStorage !== 'undefined') {
+            _isOpen = localStorage.getItem(STORAGE_KEY) === 'true';
+        }
+    },
+    toggle() {
+        _isOpen = !_isOpen;
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, String(_isOpen));
+        }
+    },
+    setOpen(value) {
+        _isOpen = value;
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, String(value));
+        }
+    }
+};

package/dist/stores/playgroundStore.svelte.d.ts

@@ -37,13 +37,18 @@ export declare function getError(): string | null;
  */
 export declare function getCurrentWorkflow(): Workflow | null;
 /**
- * Get the last poll timestamp
+ * Get the last poll sequence number cursor
  */
-export declare function getLastPollTimestamp(): string | null;
+export declare function getLastPollSequenceNumber(): number | null;
 /**
  * Get current session status
  */
 export declare function getSessionStatus(): PlaygroundSessionStatus;
+/**
+ * Whether the user can currently send a message.
+ * False when executing, when awaiting input, or when no session exists.
+ */
+export declare function getCanSendMessage(): boolean;
 /**
  * Get message count
  */
@@ -75,6 +80,15 @@ export declare function getHasChatInput(): boolean;
  * Get session count
  */
 export declare function getSessionCount(): number;
+export declare function getPinnedExecutionId(): string | null;
+export declare function getLatestExecutionId(): string | null;
+export declare function getActiveExecutionId(): string | null;
+/**
+ * Counter that increments whenever new messages arrive and the pipeline display
+ * should re-fetch — i.e. when following latest or pinned to the latest execution.
+ * Pass to PipelinePanel's refreshTrigger prop.
+ */
+export declare function getPipelineRefreshTrigger(): number;
 /**
  * Playground store actions for modifying state
  */
@@ -140,12 +154,6 @@ export declare const playgroundActions: {
      * Clear all messages
      */
     clearMessages: () => void;
-    /**
-     * Set the executing state
-     *
-     * @param executing - Whether execution is in progress
-     */
-    setExecuting: (executing: boolean) => void;
     /**
      * Set the loading state
      *
@@ -163,7 +171,7 @@ export declare const playgroundActions: {
      *
      * @param timestamp - ISO 8601 timestamp
      */
-    updateLastPollTimestamp: (timestamp: string) => void;
+    updateLastPollSequenceNumber: (seq: number) => void;
     /**
      * Reset all playground state
      */
@@ -174,16 +182,14 @@ export declare const playgroundActions: {
      * @param sessionId - The session ID to switch to
      */
     switchSession: (sessionId: string) => void;
+    pinExecution(executionId: string | null): void;
 };
 /**
- * Create a polling callback that processes poll responses.
- * This is the single source of truth for how poll responses update stores.
- * Used by mount.ts, Playground.svelte, and refreshSessionMessages.
- *
- * @param isTerminalStatus - Function to determine if a status clears isExecuting (default: defaultIsTerminalStatus)
- * @returns A callback suitable for playgroundService.startPolling() or pushMessages()
+ * Apply a server response to the store. All message and status updates from
+ * the server flow through here — polling callback, manual fetches, interrupt
+ * resolution. Nothing updates messages or session status except this function.
  */
-export declare function createPollingCallback(isTerminalStatus?: (status: PlaygroundSessionStatus) => boolean): (response: PlaygroundMessagesApiResponse) => void;
+export declare function applyServerResponse(response: PlaygroundMessagesApiResponse): void;
 /**
  * Get the current session ID
  *
@@ -204,11 +210,11 @@ export declare function isSessionSelected(sessionId: string): boolean;
  */
 export declare function getMessagesSnapshot(): PlaygroundMessage[];
 /**
- * Get the latest message timestamp for polling
+ * Get the sequence number of the latest message, used to seed incremental polling.
  *
- * @returns ISO 8601 timestamp of the latest message, or null
+ * @returns Sequence number of the last message, or null
  */
-export declare function getLatestMessageTimestamp(): string | null;
+export declare function getLatestSequenceNumber(): number | null;
 /**
  * Subscribe to session status changes using $effect.root.
  * This is designed for use in non-component contexts (e.g., mount.ts).
@@ -224,7 +230,6 @@ export declare function subscribeToSessionStatus(callback: (status: PlaygroundSe
  * has stopped but new messages may exist on the server.
  *
  * @param fetchMessages - Async function to fetch messages from the API
- * @param isTerminalStatus - Optional override for terminal status check
  * @returns Promise that resolves when messages are refreshed
  */
-export declare function refreshSessionMessages(fetchMessages: (sessionId: string) => Promise<PlaygroundMessagesApiResponse>, isTerminalStatus?: (status: PlaygroundSessionStatus) => boolean): Promise<void>;
+export declare function refreshSessionMessages(fetchMessages: (sessionId: string) => Promise<PlaygroundMessagesApiResponse>): Promise<void>;