@flowdrop/flowdrop 1.9.0 → 1.11.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,13 +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)
 // =========================================================================
@@ -95,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
@@ -109,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
  */
@@ -219,6 +229,14 @@ export function getLatestExecutionId() {
 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
 // =========================================================================
@@ -277,6 +295,8 @@ function syncExecutionsFromMessages(messages) {
             ..._currentSession,
             executions: [...(_currentSession.executions ?? []), ...newExecutions]
         };
+        // Clear any manual pin so the panel automatically follows the new run.
+        _pinnedExecutionId = null;
     }
 }
 // =========================================================================
@@ -323,11 +343,14 @@ export const playgroundActions = {
         // 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) {
+        // '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 };
+                execs[execs.length - 1] = { ...last, status: terminalExecutionStatus };
                 _currentSession = { ..._currentSession, executions: execs };
             }
         }
@@ -402,27 +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(newMessages);
+        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
@@ -445,8 +468,8 @@ export const playgroundActions = {
      *
      * @param timestamp - ISO 8601 timestamp
      */
-    updateLastPollTimestamp: (timestamp) => {
-        _lastPollTimestamp = timestamp;
+    updateLastPollSequenceNumber: (seq) => {
+        _lastPollSequenceNumber = seq;
     },
     /**
      * Reset all playground state
@@ -455,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
@@ -472,7 +495,7 @@ export const playgroundActions = {
         if (session) {
             _currentSession = session;
             _messages = [];
-            _lastPollTimestamp = null;
+            _lastPollSequenceNumber = null;
         }
     },
     pinExecution(executionId) {
@@ -480,28 +503,25 @@ export const playgroundActions = {
     }
 };
 // =========================================================================
-// 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);
+ * 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);
-            if (isTerminalStatus(response.sessionStatus)) {
-                playgroundActions.setExecuting(false);
-            }
-        }
-    };
+    }
+    if (response.sessionStatus) {
+        playgroundActions.updateSessionStatus(response.sessionStatus);
+    }
 }
 // =========================================================================
 // Utilities
@@ -532,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.
@@ -568,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.d.ts

@@ -14,16 +14,8 @@ import type { FlowDropTheme, FlowDropThemeName } from './types/theme.js';
 import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
 import './registry/builtinFormats.js';
 import type { PartialSettings, SettingsCategory } from './types/settings.js';
-/**
- * Navbar action configuration
- */
-export interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-}
+import type { NavbarAction } from './types/navbar.js';
+export type { NavbarAction };
 /**
  * Mount options for FlowDrop App
  */

package/dist/types/navbar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Navbar action button configuration.
+ *
+ * Rendered as a link by `<Navbar>` and the mount functions that wrap it.
+ */
+export interface NavbarAction {
+    label: string;
+    href: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'outline';
+    onclick?: (event: Event) => void;
+    /** If true, opens link in new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+}

package/dist/types/navbar.js

@@ -0,0 +1 @@
+export {};

package/dist/types/playground.d.ts

@@ -110,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;
 }
@@ -146,11 +148,7 @@ 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;

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.9.0",
+  "version": "1.11.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"