@flowdrop/flowdrop 1.8.1 → 1.10.0

package/dist/stores/playgroundStore.svelte.js

@@ -6,7 +6,7 @@
  *
  * @module stores/playgroundStore
  */
-import { isChatInputNode, defaultIsTerminalStatus } from '../types/playground.js';
+import { isChatInputNode } from '../types/playground.js';
 import { logger } from '../utils/logger.js';
 // =========================================================================
 // Core State
@@ -23,10 +23,6 @@ let _sessions = $state([]);
  * Messages in the current session
  */
 let _messages = $state([]);
-/**
- * Whether an execution is currently running
- */
-let _isExecuting = $state(false);
 /**
  * Whether we are currently loading data
  */
@@ -42,7 +38,19 @@ let _currentWorkflow = $state(null);
 /**
  * Last polling timestamp for incremental message fetching
  */
-let _lastPollTimestamp = $state(null);
+let _lastPollSequenceNumber = $state(null);
+/** Execution ID explicitly pinned by the user (null = follow latest) */
+let _pinnedExecutionId = $state(null);
+/** Incremented on every message batch that should trigger a pipeline re-fetch */
+let _pipelineRefreshTrigger = $state(0);
+/** 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);
+// Derived from server status — never manually set.
+// Exception: updateSessionStatus('running') in handleSendMessage is an
+// acknowledged optimistic write, overwritten by the next server response.
+const _isExecuting = $derived(_currentSession?.status === 'running');
 // =========================================================================
 // Getter Functions (for reactive access in components)
 // =========================================================================
@@ -89,10 +97,10 @@ export function getCurrentWorkflow() {
     return _currentWorkflow;
 }
 /**
- * Get the last poll timestamp
+ * Get the last poll sequence number cursor
  */
-export function getLastPollTimestamp() {
-    return _lastPollTimestamp;
+export function getLastPollSequenceNumber() {
+    return _lastPollSequenceNumber;
 }
 // =========================================================================
 // Derived Getters
@@ -103,6 +111,14 @@ export function getLastPollTimestamp() {
 export function getSessionStatus() {
     return _currentSession?.status ?? 'idle';
 }
+/**
+ * Whether the user can currently send a message.
+ * False when executing, when awaiting input, or when no session exists.
+ */
+export function getCanSendMessage() {
+    const status = _currentSession?.status ?? 'idle';
+    return _currentSession !== null && !_isExecuting && status !== 'awaiting_input';
+}
 /**
  * Get message count
  */
@@ -204,6 +220,23 @@ export function getHasChatInput() {
 export function getSessionCount() {
     return _sessions.length;
 }
+export function getPinnedExecutionId() {
+    return _pinnedExecutionId;
+}
+export function getLatestExecutionId() {
+    return _latestExecutionId;
+}
+export function getActiveExecutionId() {
+    return _activeExecutionId;
+}
+/**
+ * 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 function getPipelineRefreshTrigger() {
+    return _pipelineRefreshTrigger;
+}
 // =========================================================================
 // Helper Functions
 // =========================================================================
@@ -238,6 +271,34 @@ 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]
+        };
+        // Clear any manual pin so the panel automatically follows the new run.
+        _pinnedExecutionId = null;
+    }
+}
 // =========================================================================
 // Actions
 // =========================================================================
@@ -259,6 +320,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 +340,20 @@ 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.
+        // 'idle' means the run finished normally (server returns 'idle' post-completion,
+        // not 'completed'), so map it to 'completed' for the execution entry.
+        const terminalExecutionStatus = status === 'failed' ? 'failed' : status === 'completed' || status === 'idle' ? 'completed' : null;
+        if (terminalExecutionStatus && _currentSession?.executions?.length) {
+            const execs = [..._currentSession.executions];
+            const last = execs[execs.length - 1];
+            if (last.status === 'running') {
+                execs[execs.length - 1] = { ...last, status: terminalExecutionStatus };
+                _currentSession = { ..._currentSession, executions: execs };
+            }
+        }
         // Also update in sessions list
         const session = _currentSession;
         if (session) {
@@ -349,26 +425,27 @@ export const playgroundActions = {
     addMessages: (newMessages) => {
         if (newMessages.length === 0)
             return;
-        // Deduplicate by message ID
+        // Deduplicate against existing messages AND within the incoming batch itself.
+        // The latter matters when the backend returns the same page twice (e.g. broken
+        // offset pagination), which would otherwise create duplicate IDs in _messages
+        // and trigger Svelte's each_key_duplicate error.
         const existingIds = new Set(_messages.map((m) => m.id));
-        const uniqueNewMessages = newMessages.filter((m) => !existingIds.has(m.id));
-        // Sort the combined messages chronologically
+        const seenInBatch = new Set();
+        const uniqueNewMessages = newMessages.filter((m) => {
+            if (existingIds.has(m.id) || seenInBatch.has(m.id))
+                return false;
+            seenInBatch.add(m.id);
+            return true;
+        });
         _messages = sortMessagesChronologically([..._messages, ...uniqueNewMessages]);
+        syncExecutionsFromMessages(uniqueNewMessages);
     },
     /**
      * Clear all messages
      */
     clearMessages: () => {
         _messages = [];
-        _lastPollTimestamp = null;
-    },
-    /**
-     * Set the executing state
-     *
-     * @param executing - Whether execution is in progress
-     */
-    setExecuting: (executing) => {
-        _isExecuting = executing;
+        _lastPollSequenceNumber = null;
     },
     /**
      * Set the loading state
@@ -391,8 +468,8 @@ export const playgroundActions = {
      *
      * @param timestamp - ISO 8601 timestamp
      */
-    updateLastPollTimestamp: (timestamp) => {
-        _lastPollTimestamp = timestamp;
+    updateLastPollSequenceNumber: (seq) => {
+        _lastPollSequenceNumber = seq;
     },
     /**
      * Reset all playground state
@@ -401,11 +478,11 @@ export const playgroundActions = {
         _currentSession = null;
         _sessions = [];
         _messages = [];
-        _isExecuting = false;
         _isLoading = false;
         _error = null;
         _currentWorkflow = null;
-        _lastPollTimestamp = null;
+        _lastPollSequenceNumber = null;
+        _pipelineRefreshTrigger = 0;
     },
     /**
      * Switch to a different session
@@ -413,37 +490,38 @@ 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;
+            _lastPollSequenceNumber = null;
         }
+    },
+    pinExecution(executionId) {
+        _pinnedExecutionId = executionId;
     }
 };
 // =========================================================================
-// Polling Callback Factory
+// Server Response Application
 // =========================================================================
 /**
- * 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()
- */
-export function createPollingCallback(isTerminalStatus = defaultIsTerminalStatus) {
-    return (response) => {
-        if (response.data && response.data.length > 0) {
-            playgroundActions.addMessages(response.data);
-        }
-        if (response.sessionStatus) {
-            playgroundActions.updateSessionStatus(response.sessionStatus);
-            if (isTerminalStatus(response.sessionStatus)) {
-                playgroundActions.setExecuting(false);
-            }
+ * 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 function applyServerResponse(response) {
+    if (response.data && response.data.length > 0) {
+        playgroundActions.addMessages(response.data);
+        // Refresh pipeline when following latest or pinned to the latest execution.
+        // Skip only when the user is viewing a historical run.
+        if (_pinnedExecutionId === null || _pinnedExecutionId === _latestExecutionId) {
+            _pipelineRefreshTrigger++;
         }
-    };
+    }
+    if (response.sessionStatus) {
+        playgroundActions.updateSessionStatus(response.sessionStatus);
+    }
 }
 // =========================================================================
 // Utilities
@@ -474,14 +552,17 @@ export function getMessagesSnapshot() {
     return _messages;
 }
 /**
- * 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 function getLatestMessageTimestamp() {
-    if (_messages.length === 0)
-        return null;
-    return _messages[_messages.length - 1].timestamp;
+export function getLatestSequenceNumber() {
+    for (let i = _messages.length - 1; i >= 0; i--) {
+        if (_messages[i].sequenceNumber !== undefined) {
+            return _messages[i].sequenceNumber;
+        }
+    }
+    return null;
 }
 /**
  * Subscribe to session status changes using $effect.root.
@@ -510,17 +591,15 @@ export function subscribeToSessionStatus(callback) {
  * 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 async function refreshSessionMessages(fetchMessages, isTerminalStatus) {
+export async function refreshSessionMessages(fetchMessages) {
     const session = _currentSession;
     if (!session)
         return;
     try {
         const response = await fetchMessages(session.id);
-        const callback = createPollingCallback(isTerminalStatus);
-        callback(response);
+        applyServerResponse(response);
     }
     catch (err) {
         logger.error('[playgroundStore] Failed to refresh messages:', err);

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>;
 }
@@ -100,6 +110,8 @@ export interface PlaygroundMessageMetadata {
     outputs?: Record<string, unknown>;
     /** User's display name for user-role messages (from backend) */
     userName?: string;
+    /** Subsystem that produced this message (e.g. 'pipeline', 'job', 'queue', 'cron') */
+    source?: string;
     /** Allow additional properties */
     [key: string]: unknown;
 }
@@ -136,14 +148,12 @@ export interface PlaygroundMessage {
     timestamp: string;
     /** Message status */
     status?: PlaygroundMessageStatus;
-    /**
-     * Sequence number for ordering messages
-     * - User messages: incrementing numbers (1, 2, 3, ...)
-     * - Assistant/system responses: 0 (sorted after parent via parentMessageId)
-     */
+    /** Incrementing sequence number for chronological ordering. All message roles receive unique incrementing numbers (1, 2, 3, ...). Primary sort key. */
     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.1",
+  "version": "1.10.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"