@flowdrop/flowdrop 1.9.0 → 1.10.0

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

@@ -6,13 +6,14 @@ interface Props {
     workflow: Workflow;
     endpointConfig: EndpointConfig;
     isPinned: boolean;
-    runLabel?: string;
     /** All executions for the current session, oldest-first */
     executions?: PlaygroundExecution[];
     /** ID of the most-recent execution */
     latestExecutionId?: string | null;
     /** Called with an execution ID to pin it, or null to follow latest */
     onSelectExecution?: (id: string | null) => void;
+    /** Increments when new messages arrive — forwarded to PipelineStatus for immediate refresh */
+    refreshTrigger?: number;
 }
 declare const PipelinePanel: import("svelte").Component<Props, {}, "">;
 type PipelinePanel = ReturnType<typeof PipelinePanel>;

package/dist/components/playground/Playground.svelte

@@ -26,7 +26,9 @@
     getError,
     playgroundActions,
     getInputFields,
-    createPollingCallback,
+    applyServerResponse,
+    getCanSendMessage,
+    getLatestSequenceNumber,
     getActiveExecutionId,
     getLatestExecutionId,
     getPinnedExecutionId,
@@ -98,6 +100,9 @@
   /** Whether log messages are visible in the chat panel */
   let showLogs = $state(true);
 
+  /** Whether a manual refresh is in flight */
+  let isRefreshing = $state(false);
+
   /** Whether the session switcher popover is open (standalone mode) */
   let sessionDropdownOpen = $state(false);
 
@@ -117,41 +122,31 @@
    * Initialize the playground on mount
    */
   onMount(() => {
-    // Set endpoint config if provided
-    if (endpointConfig) {
-      setEndpointConfig(endpointConfig);
-    }
-
-    // Set workflow in store
-    if (workflow) {
-      playgroundActions.setWorkflow(workflow);
-    }
-
-    // Async initialization
-    const initializePlayground = async (): Promise<void> => {
-      try {
-        // Load sessions
-        await loadSessions();
-
-        // Resume initial session if provided
-        if (initialSessionId) {
-          await loadInitialSession(initialSessionId);
-        }
-
-        // Handle auto-run after initialization is complete
-        if (config.autoRun && !autoRunTriggered) {
-          autoRunTriggered = true;
-          const predefinedMessage = config.predefinedMessage ?? 'Run workflow';
-          logger.debug('[Playground] Auto-run triggered with message:', predefinedMessage);
-          await handleSendMessage(predefinedMessage);
+    if (endpointConfig) setEndpointConfig(endpointConfig);
+    if (workflow) playgroundActions.setWorkflow(workflow);
+
+    const handleVisibility = () => {
+      if (document.visibilityState === 'visible' && playgroundService.isPolling()) {
+        const sessionId = getCurrentSession()?.id;
+        if (sessionId) {
+          void playgroundService
+            .getMessages(sessionId, playgroundService.getLastSequenceNumber() ?? undefined)
+            .then((response) => applyServerResponse(response))
+            .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
-      } catch (err) {
-        logger.error('[Playground] Initialization error:', err);
       }
     };
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    const handleRefreshStatus = () => void refreshFromServer();
+    document.addEventListener('flowdrop:refresh-status', handleRefreshStatus);
 
-    // Execute initialization
     void initializePlayground();
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibility);
+      document.removeEventListener('flowdrop:refresh-status', handleRefreshStatus);
+    };
   });
 
   /**
@@ -164,8 +159,10 @@
       return;
     }
 
-    // Skip if this session was already loaded
-    if (initialSessionLoaded && loadedInitialSessionId === initialSessionId) {
+    // Skip if this session was already loaded or is currently loading.
+    // loadedInitialSessionId is set synchronously at the start of loadInitialSession,
+    // so this prevents the effect from spawning concurrent loads when isLoading changes.
+    if (loadedInitialSessionId === initialSessionId) {
       return;
     }
 
@@ -176,18 +173,42 @@
     }
 
     // Load the initial session if sessions are available
-    if (sessionList.length > 0 && !initialSessionLoaded) {
+    if (sessionList.length > 0) {
       void loadInitialSession(initialSessionId);
     }
   });
 
+  /**
+   * Initialize the playground: load sessions, load initial session, handle auto-run
+   */
+  async function initializePlayground(): Promise<void> {
+    try {
+      await loadSessions();
+
+      if (initialSessionId) {
+        await loadInitialSession(initialSessionId);
+      }
+
+      if (config.autoRun && !autoRunTriggered) {
+        autoRunTriggered = true;
+        const predefinedMessage = config.predefinedMessage ?? 'Run workflow';
+        logger.debug('[Playground] Auto-run triggered with message:', predefinedMessage);
+        await handleSendMessage(predefinedMessage);
+      }
+    } catch (err) {
+      logger.error('[Playground] Initialization error:', err);
+    }
+  }
+
   /**
    * Load the initial session with validation and error handling
    *
    * @param sessionId - The session ID to load
    */
   async function loadInitialSession(sessionId: string): Promise<void> {
-    // Validate session exists in loaded sessions
+    // Validate session exists in loaded sessions before setting the guard.
+    // If not found yet, we skip setting loadedInitialSessionId so the $effect
+    // can retry when _sessions updates (e.g. after a new session is created).
     const sessionList = getSessions();
     const sessionExists = sessionList.some((s) => s.id === sessionId);
 
@@ -196,21 +217,19 @@
         `[Playground] Initial session "${sessionId}" not found in available sessions. ` +
           `Available sessions: ${sessionList.map((s) => s.id).join(', ') || 'none'}`
       );
-      // Don't set error - just log warning and let user pick a session
       initialSessionLoaded = true;
-      loadedInitialSessionId = sessionId;
       return;
     }
 
+    // Set guard BEFORE the first await to prevent concurrent loads.
+    loadedInitialSessionId = sessionId;
+
     try {
       await loadSession(sessionId);
       initialSessionLoaded = true;
-      loadedInitialSessionId = sessionId;
     } catch (err) {
       logger.error('[Playground] Failed to load initial session:', err);
-      // Mark as attempted to prevent retry loops
       initialSessionLoaded = true;
-      loadedInitialSessionId = sessionId;
     }
   }
 
@@ -265,17 +284,14 @@
     playgroundActions.setError(null);
 
     try {
-      // Get session details
       const session = await playgroundService.getSession(sessionId);
       playgroundActions.setCurrentSession(session);
 
-      // Get messages
       const response = await playgroundService.getMessages(sessionId);
-      playgroundActions.setMessages(response.data ?? []);
+      applyServerResponse(response);
 
-      // Start polling if session is running
       if (session.status === 'running') {
-        startPolling(sessionId);
+        startPolling(sessionId, true);
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to load session';
@@ -326,9 +342,8 @@
       return;
     }
 
-    // Stop polling for current session
     playgroundService.stopPolling();
-
+    playgroundActions.updateSessionStatus('idle');
     await loadSession(sessionId);
   }
 
@@ -387,9 +402,10 @@
    * Send a message
    */
   async function handleSendMessage(content: string): Promise<void> {
+    if (getIsExecuting()) return;
+
     const session = getCurrentSession();
     if (!session) {
-      // Create a session first if none exists
       await handleCreateSession();
       const newSession = getCurrentSession();
       if (!newSession) {
@@ -397,23 +413,19 @@
       }
     }
 
-    const sessionId = getCurrentSession()?.id;
-    if (!sessionId) {
-      return;
-    }
+    const sessionId = getCurrentSession()!.id;
 
-    playgroundActions.setExecuting(true);
+    playgroundActions.updateSessionStatus('running');
+    playgroundActions.pinExecution(null);
     playgroundActions.setError(null);
 
     try {
-      // Prepare inputs from the input collector
       const inputs: Record<string, unknown> = {};
       const fields = getInputFields();
 
       fields.forEach((field) => {
         const key = `${field.nodeId}:${field.fieldId}`;
         if (inputValues[key] !== undefined) {
-          // Map to node ID and field ID for the backend
           if (!inputs[field.nodeId]) {
             inputs[field.nodeId] = {};
           }
@@ -421,19 +433,13 @@
         }
       });
 
-      // Send message
       const message = await playgroundService.sendMessage(sessionId, content, inputs);
       playgroundActions.addMessage(message);
-
-      // Update session status
-      playgroundActions.updateSessionStatus('running');
-
-      // Start polling for responses
       startPolling(sessionId);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
       playgroundActions.setError(errorMessage);
-      playgroundActions.setExecuting(false);
+      playgroundActions.updateSessionStatus('idle');
       logger.error('Failed to send message:', err);
     }
   }
@@ -450,33 +456,56 @@
     try {
       await playgroundService.stopExecution(sessionId);
       playgroundService.stopPolling();
-      playgroundActions.setExecuting(false);
       playgroundActions.updateSessionStatus('idle');
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to stop execution';
       playgroundActions.setError(errorMessage);
+      playgroundService.stopPolling();
+      playgroundActions.updateSessionStatus('idle');
       logger.error('Failed to stop execution:', err);
     }
   }
 
-  /** Shared polling callback created from config lifecycle hooks */
-  // svelte-ignore state_referenced_locally — config is static
-  const pollingCallback = createPollingCallback(config.isTerminalStatus);
-
   /**
    * Start polling for messages
    */
-  function startPolling(sessionId: string): void {
+  function startPolling(sessionId: string, seedSequence = false): void {
     const pollingInterval = config.pollingInterval ?? 1500;
+    const initialSequenceNumber = seedSequence ? getLatestSequenceNumber() : null;
 
     playgroundService.startPolling(
       sessionId,
-      pollingCallback,
+      (response) => applyServerResponse(response),
       pollingInterval,
-      config.shouldStopPolling
+      config.shouldStopPolling,
+      initialSequenceNumber
     );
   }
 
+  /**
+   * Fetch the latest messages and session status from the server.
+   * Resumes polling if the session is running but polling had stopped.
+   */
+  async function refreshFromServer(): Promise<void> {
+    const sessionId = getCurrentSession()?.id;
+    if (!sessionId || isRefreshing) return;
+    isRefreshing = true;
+    try {
+      const response = await playgroundService.getMessages(
+        sessionId,
+        playgroundService.getLastSequenceNumber() ?? undefined
+      );
+      applyServerResponse(response);
+      if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
+        startPolling(sessionId, true);
+      }
+    } catch (err) {
+      logger.error('[Playground] Status refresh failed:', err);
+    } finally {
+      isRefreshing = false;
+    }
+  }
+
   /**
    * Refresh messages for the current session
    * Called after interrupt resolution when polling has stopped
@@ -487,9 +516,13 @@
 
     try {
       const response = await playgroundService.getMessages(sessionId);
-      pollingCallback(response);
+      applyServerResponse(response);
+
+      if (response.sessionStatus === 'running') {
+        startPolling(sessionId, true);
+      }
     } catch (err) {
-      logger.error('[Playground] Failed to refresh messages after interrupt:', err);
+      logger.error('[Playground] Failed to refresh after interrupt:', err);
     }
   }
 
@@ -771,6 +804,19 @@
                 Pipeline
               </button>
             {/if}
+            {#if getCurrentSession()}
+              <button
+                type="button"
+                class="playground__log-toggle"
+                class:playground__refresh--spinning={isRefreshing}
+                onclick={() => void refreshFromServer()}
+                disabled={isRefreshing}
+                title="Refresh status"
+              >
+                <Icon icon="mdi:refresh" />
+                Refresh
+              </button>
+            {/if}
             <button
               type="button"
               class="playground__log-toggle"
@@ -1313,6 +1359,10 @@
     color: var(--fd-primary);
   }
 
+  .playground__refresh--spinning :global(svg) {
+    animation: spin 0.8s linear infinite;
+  }
+
   /* Session chip (standalone mode) */
   .playground__session-chip-wrap {
     position: relative;