@flowdrop/flowdrop 1.9.0 → 1.11.0

package/dist/playground/mount.js

@@ -46,9 +46,76 @@
 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 PlaygroundApp from '../components/playground/PlaygroundApp.svelte';
+import { initializeSettings } from '../stores/settingsStore.svelte.js';
 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;
+}
+/**
+ * Shared prelude for the playground mount functions: resolves the endpoint
+ * config and initializes settings/theme. Each mount function still owns its
+ * own argument validation and container sizing (those vary per mode).
+ */
+async function prepareMount(options) {
+    const finalEndpointConfig = await resolveEndpointConfig(options.endpointConfig);
+    await initializeSettings({ defaults: options.settings });
+    return finalEndpointConfig;
+}
+/**
+ * Apply caller-supplied height/width as inline styles. When omitted, the host
+ * CSS owns container sizing — this is deliberate: a default of `100%` does not
+ * resolve inside parents with only `min-height` set (a common pattern in
+ * Drupal admin chrome), collapsing the playground to zero.
+ */
+function sizeContainer(container, height, width) {
+    if (height !== undefined)
+        container.style.height = height;
+    if (width !== undefined)
+        container.style.width = width;
+}
+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
  *
@@ -79,7 +146,7 @@ import { getCurrentSession, getSessions, getMessages, playgroundActions, createP
  * ```
  */
 export async function mountPlayground(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', onClose, onSessionStatusChange } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, settings: initialSettings, onClose, onSessionStatusChange } = options;
     // Validate required parameters
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlayground()');
@@ -91,37 +158,17 @@ 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 prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
     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;
+        sizeContainer(container, height, 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 +202,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 +224,101 @@ export function unmountPlayground(app) {
         app.destroy();
     }
 }
+export async function mountPlaygroundStudio(container, options) {
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, 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 prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
+    sizeContainer(container, height, 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);
+}
+/**
+ * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ *
+ * Use this when you want the same chrome as the FlowDrop editor — logo,
+ * branding, and settings modal — wrapped around the playground. For an
+ * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlaygroundApp(container, {
+ *   workflowId: 'wf-123',
+ *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   navbarTitle: 'My Workflow',
+ *   primaryActions: [
+ *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
+ *     { label: 'Workflows', href: '/workflows', icon: 'mdi:arrow-left', variant: 'outline' }
+ *   ]
+ * });
+ * ```
+ */
+export async function mountPlaygroundApp(container, options) {
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange } = options;
+    if (!workflowId) {
+        throw new Error('workflowId is required for mountPlaygroundApp()');
+    }
+    if (!container) {
+        throw new Error('container element is required for mountPlaygroundApp()');
+    }
+    // Positive narrowing (not `=== 'modal'`) because PlaygroundAppMountOptions
+    // Omit-narrows `mode`, so the type lies for JS callers — check the values
+    // we actually accept instead of the one we don't.
+    if (mode !== 'standalone' && mode !== 'embedded') {
+        throw new Error(`mountPlaygroundApp(): mode must be 'standalone' or 'embedded', got ${String(mode)}`);
+    }
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
+    sizeContainer(container, height, width);
+    const svelteApp = mount(PlaygroundApp, {
+        target: container,
+        props: {
+            workflowId,
+            workflow,
+            mode,
+            initialSessionId,
+            endpointConfig: finalEndpointConfig,
+            config,
+            showNavbar,
+            navbarTitle,
+            primaryActions,
+            showSettings,
+            settingsCategories,
+            showSettingsSyncButton,
+            showSettingsResetButton,
+            initialPipelineOpen,
+            minChatWidth,
+            initialPipelineWidth,
+            onClose,
+            onSessionNavigate
+        }
+    });
+    return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
+}

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/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
  */
@@ -78,6 +83,12 @@ 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
  */
@@ -143,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
      *
@@ -166,7 +171,7 @@ export declare const playgroundActions: {
      *
      * @param timestamp - ISO 8601 timestamp
      */
-    updateLastPollTimestamp: (timestamp: string) => void;
+    updateLastPollSequenceNumber: (seq: number) => void;
     /**
      * Reset all playground state
      */
@@ -180,14 +185,11 @@ export declare const playgroundActions: {
     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
  *
@@ -208,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).
@@ -228,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>;