@flowdrop/flowdrop 1.8.0 → 1.9.0

package/dist/components/playground/Playground.svelte.d.ts

@@ -19,6 +19,12 @@ interface Props {
     config?: PlaygroundConfig;
     /** Callback when playground is closed (for embedded mode) */
     onClose?: () => void;
+    /** Callback to toggle the pipeline panel (if undefined, toggle button is hidden) */
+    onTogglePanel?: () => void;
+    /** Whether the pipeline panel is currently open (for toggle button active state) */
+    isPipelinePanelOpen?: boolean;
+    /** When provided, session switches and creation navigate to a URL instead of mutating store state */
+    onSessionNavigate?: (sessionId: string) => void;
 }
 declare const Playground: import("svelte").Component<Props, {}, "">;
 type Playground = ReturnType<typeof Playground>;

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/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

@@ -75,6 +75,9 @@ 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;
 /**
  * Playground store actions for modifying state
  */
@@ -174,6 +177,7 @@ 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.

package/dist/stores/playgroundStore.svelte.js

@@ -43,6 +43,12 @@ let _currentWorkflow = $state(null);
  * Last polling timestamp for incremental message fetching
  */
 let _lastPollTimestamp = $state(null);
+/** Execution ID explicitly pinned by the user (null = follow latest) */
+let _pinnedExecutionId = $state(null);
+/** Latest execution ID derived from current session's executions list */
+const _latestExecutionId = $derived(_currentSession?.executions?.at(-1)?.id ?? null);
+/** Active execution: pinned if set, otherwise latest */
+const _activeExecutionId = $derived(_pinnedExecutionId ?? _latestExecutionId);
 // =========================================================================
 // Getter Functions (for reactive access in components)
 // =========================================================================
@@ -204,6 +210,15 @@ export function getHasChatInput() {
 export function getSessionCount() {
     return _sessions.length;
 }
+export function getPinnedExecutionId() {
+    return _pinnedExecutionId;
+}
+export function getLatestExecutionId() {
+    return _latestExecutionId;
+}
+export function getActiveExecutionId() {
+    return _activeExecutionId;
+}
 // =========================================================================
 // Helper Functions
 // =========================================================================
@@ -238,6 +253,32 @@ function sortMessagesChronologically(messageList) {
         return a.id.localeCompare(b.id);
     });
 }
+/**
+ * Syncs the current session's executions list from incoming messages.
+ * When a message has a new executionId not yet tracked, adds it as a new execution entry.
+ */
+function syncExecutionsFromMessages(messages) {
+    if (!_currentSession)
+        return;
+    const existingIds = new Set((_currentSession.executions ?? []).map((e) => e.id));
+    const newExecutions = [];
+    for (const msg of messages) {
+        if (msg.executionId && !existingIds.has(msg.executionId)) {
+            existingIds.add(msg.executionId);
+            newExecutions.push({
+                id: msg.executionId,
+                startedAt: msg.timestamp,
+                status: 'running'
+            });
+        }
+    }
+    if (newExecutions.length > 0) {
+        _currentSession = {
+            ..._currentSession,
+            executions: [...(_currentSession.executions ?? []), ...newExecutions]
+        };
+    }
+}
 // =========================================================================
 // Actions
 // =========================================================================
@@ -259,6 +300,7 @@ export const playgroundActions = {
      * @param session - The session to set as active
      */
     setCurrentSession: (session) => {
+        _pinnedExecutionId = null;
         _currentSession = session;
         if (session) {
             // Update session in the list
@@ -278,6 +320,17 @@ export const playgroundActions = {
                 updatedAt: new Date().toISOString()
             };
         }
+        // Update the latest execution status when the session reaches a terminal state.
+        // Only the last execution can be running at any time (sessions are single-pipeline),
+        // so we only need to check and update the tail entry.
+        if ((status === 'completed' || status === 'failed') && _currentSession?.executions?.length) {
+            const execs = [..._currentSession.executions];
+            const last = execs[execs.length - 1];
+            if (last.status === 'running') {
+                execs[execs.length - 1] = { ...last, status };
+                _currentSession = { ..._currentSession, executions: execs };
+            }
+        }
         // Also update in sessions list
         const session = _currentSession;
         if (session) {
@@ -354,6 +407,7 @@ export const playgroundActions = {
         const uniqueNewMessages = newMessages.filter((m) => !existingIds.has(m.id));
         // Sort the combined messages chronologically
         _messages = sortMessagesChronologically([..._messages, ...uniqueNewMessages]);
+        syncExecutionsFromMessages(newMessages);
     },
     /**
      * Clear all messages
@@ -413,12 +467,16 @@ export const playgroundActions = {
      * @param sessionId - The session ID to switch to
      */
     switchSession: (sessionId) => {
+        _pinnedExecutionId = null;
         const session = _sessions.find((s) => s.id === sessionId);
         if (session) {
             _currentSession = session;
             _messages = [];
             _lastPollTimestamp = null;
         }
+    },
+    pinExecution(executionId) {
+        _pinnedExecutionId = executionId;
     }
 };
 // =========================================================================

package/dist/svelte-app.js

@@ -188,14 +188,37 @@ export async function mountFlowDropApp(container, options = {}) {
         isDirty: () => isDirty(),
         markAsSaved: () => {
             markAsSaved();
-            // Also update draft manager
             if (state.draftManager) {
+                // Migrate the draft key when the host confirms a save. New workflows start
+                // on 'flowdrop:draft:new', a key shared across all tabs. If the host has
+                // written the server-assigned ID back into the store before calling
+                // markAsSaved(), we can move to a unique per-workflow key and stop
+                // competing with other tabs that may also have unsaved new workflows.
+                // Skip when customDraftKey is set — the host manages that key explicitly.
+                if (!customDraftKey) {
+                    const currentWorkflow = getWorkflowFromStore();
+                    if (currentWorkflow?.id) {
+                        state.draftManager.updateStorageKey(getDraftStorageKey(currentWorkflow.id));
+                    }
+                }
                 state.draftManager.markAsSaved();
             }
         },
         getWorkflow: () => getWorkflowFromStore(),
         save: async () => {
-            await globalSaveWorkflow();
+            await globalSaveWorkflow({
+                onSaved: (saved) => {
+                    // globalSaveWorkflow does not write the server-assigned ID back to the
+                    // workflow store, so we cannot read it from getWorkflowFromStore() here.
+                    // Instead we use the savedWorkflow returned by the API directly.
+                    // This migrates 'flowdrop:draft:new' to a unique per-workflow key
+                    // immediately after the first save, preventing cross-tab collisions
+                    // when multiple new workflows are open simultaneously.
+                    if (state.draftManager && !customDraftKey && saved.id) {
+                        state.draftManager.updateStorageKey(getDraftStorageKey(saved.id));
+                    }
+                }
+            });
         },
         export: () => {
             globalExportWorkflow();

package/dist/types/playground.d.ts

@@ -52,6 +52,14 @@ export type PlaygroundMessageLevel = 'info' | 'warning' | 'error' | 'debug';
  * Status of a playground message
  */
 export type PlaygroundMessageStatus = 'pending' | 'processing' | 'completed' | 'failed';
+/**
+ * A single pipeline execution associated with a playground session
+ */
+export interface PlaygroundExecution {
+    id: string;
+    startedAt: string;
+    status: 'running' | 'completed' | 'failed';
+}
 /**
  * Playground session representing a test conversation
  *
@@ -83,6 +91,8 @@ export interface PlaygroundSession {
     createdAt: string;
     /** Last activity timestamp (ISO 8601) */
     updatedAt: string;
+    /** Pipeline executions triggered within this session, ordered oldest-first */
+    executions?: PlaygroundExecution[];
     /** Custom session metadata */
     metadata?: Record<string, unknown>;
 }
@@ -144,6 +154,8 @@ export interface PlaygroundMessage {
     sequenceNumber?: number;
     /** Parent message ID (for assistant responses linked to user messages) */
     parentMessageId?: string;
+    /** Pipeline/execution ID that generated this message */
+    executionId?: string | null;
     /** Associated node ID (for log/assistant messages) */
     nodeId?: string | null;
     /** Additional message metadata */

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "1.8.0",
+  "version": "1.9.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"