@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/playground/Playground.svelte

@@ -24,21 +24,9 @@
   } from '../../types/playground.js';
   import { playgroundService } from '../../services/playgroundService.js';
   import { interruptService } from '../../services/interruptService.js';
-  import { setEndpointConfig } from '../../services/api.js';
-  import {
-    getCurrentSession,
-    getSessions,
-    getIsExecuting,
-    getIsLoading,
-    getError,
-    playgroundActions,
-    applyServerResponse,
-    getLatestSequenceNumber,
-    getOldestSequenceNumber,
-    setHasOlder
-  } from '../../stores/playgroundStore.svelte.js';
+  import { provideInstance } from '../../stores/getInstance.svelte.js';
+  import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
   import type { PlaygroundMessagesApiResponse } from '../../types/playground.js';
-  import { interruptActions } from '../../stores/interruptStore.svelte.js';
   import { logger } from '../../utils/logger.js';
 
   interface Props {
@@ -52,6 +40,7 @@
     onTogglePanel?: () => void;
     isPipelinePanelOpen?: boolean;
     onSessionNavigate?: (sessionId: string) => void;
+    instance?: FlowDropInstance;
   }
 
   let {
@@ -64,9 +53,14 @@
     onClose,
     onTogglePanel,
     isPipelinePanelOpen = false,
-    onSessionNavigate
+    onSessionNavigate,
+    instance
   }: Props = $props();
 
+  // Resolve/provide once at init; the instance prop is a fixed mount-time choice.
+  // svelte-ignore state_referenced_locally
+  const fd = provideInstance(instance);
+
   let loadedInitialSessionId = $state<string | undefined>(undefined);
   let autoRunTriggered = $state(false);
   let isRefreshing = $state(false);
@@ -78,7 +72,7 @@
 
   // Vertical resizer state for the ExecutionConsole ↔ ControlPanel split.
   let playgroundContentEl = $state<HTMLElement | null>(null);
-  let controlPanelHeight = $state(280);
+  let controlPanelHeight = $state(140);
   let isVerticalResizing = $state(false);
   let containerHeight = $state(0);
   let dragContainerBottom = 0;
@@ -132,18 +126,18 @@
   }
 
   onMount(() => {
-    if (endpointConfig) setEndpointConfig(endpointConfig);
-    if (workflow) playgroundActions.setWorkflow(workflow);
+    if (endpointConfig) fd.api.configure(endpointConfig);
+    if (workflow) fd.playground.setWorkflow(workflow);
 
     const handleVisibility = () => {
       if (document.visibilityState === 'visible' && playgroundService.isPolling()) {
-        const sessionId = getCurrentSession()?.id;
+        const sessionId = fd.playground.currentSession?.id;
         if (sessionId) {
           void playgroundService
-            .getMessages(sessionId, {
+            .getMessages(fd.api.config, sessionId, {
               since: playgroundService.getLastSequenceNumber() ?? undefined
             })
-            .then((response) => applyServerResponse(response))
+            .then((response) => fd.playground.applyServerResponse(response, sessionId))
             .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
       }
@@ -168,7 +162,7 @@
     if (!initialSessionId) return;
     if (loadedInitialSessionId === initialSessionId) return;
 
-    const sessionList = getSessions();
+    const sessionList = fd.playground.sessions;
     if (sessionList.length === 0) return;
 
     void loadInitialSession(initialSessionId);
@@ -194,7 +188,7 @@
   }
 
   async function loadInitialSession(sessionId: string): Promise<void> {
-    const sessionList = getSessions();
+    const sessionList = fd.playground.sessions;
     const sessionExists = sessionList.some((s) => s.id === sessionId);
 
     if (!sessionExists) {
@@ -217,48 +211,48 @@
   onDestroy(() => {
     playgroundService.stopPolling();
     interruptService.stopPolling();
-    playgroundActions.reset();
-    interruptActions.reset();
+    fd.playground.reset();
+    fd.interrupts.reset();
   });
 
   async function loadSessions(): Promise<void> {
-    playgroundActions.setLoading(true);
-    playgroundActions.setError(null);
+    fd.playground.setLoading(true);
+    fd.playground.setError(null);
 
     try {
-      const sessionList = await playgroundService.listSessions(workflowId);
-      playgroundActions.setSessions(sessionList);
+      const sessionList = await playgroundService.listSessions(fd.api.config, workflowId);
+      fd.playground.setSessions(sessionList);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to load sessions';
-      playgroundActions.setError(errorMessage);
+      fd.playground.setError(errorMessage);
       logger.error('Failed to load sessions:', err);
     } finally {
-      playgroundActions.setLoading(false);
+      fd.playground.setLoading(false);
     }
   }
 
   async function loadSession(sessionId: string): Promise<void> {
-    playgroundActions.setLoading(true);
-    playgroundActions.setError(null);
+    fd.playground.setLoading(true);
+    fd.playground.setError(null);
     const token = ++loadToken;
 
     try {
-      const session = await playgroundService.getSession(sessionId);
+      const session = await playgroundService.getSession(fd.api.config, sessionId);
       if (token !== loadToken) return; // a newer session load superseded us
-      playgroundActions.setCurrentSession(session);
+      fd.playground.setCurrentSession(session);
 
       // Load only the most recent page; older messages load on demand when the
       // user scrolls up (loadOlderMessages). Clear right before applying the
       // fresh page — not before the await — so switching sessions doesn't blank
       // the view for the duration of the fetch.
-      const response = await playgroundService.getMessages(sessionId, {
+      const response = await playgroundService.getMessages(fd.api.config, sessionId, {
         latest: true,
         limit: messagePageSize
       });
       if (token !== loadToken) return;
-      playgroundActions.clearMessages();
-      applyServerResponse(response);
-      setHasOlder(deriveHasOlder(response));
+      fd.playground.clearMessages();
+      fd.playground.applyServerResponse(response, sessionId);
+      fd.playground.setHasOlder(deriveHasOlder(response));
 
       if (session.status !== 'idle') {
         // Seed polling from the newest loaded message so it tails live updates
@@ -268,10 +262,10 @@
     } catch (err) {
       if (token !== loadToken) return; // don't surface a superseded load's error
       const errorMessage = err instanceof Error ? err.message : 'Failed to load session';
-      playgroundActions.setError(errorMessage);
+      fd.playground.setError(errorMessage);
       logger.error('Failed to load session:', err);
     } finally {
-      if (token === loadToken) playgroundActions.setLoading(false);
+      if (token === loadToken) fd.playground.setLoading(false);
     }
   }
 
@@ -282,22 +276,22 @@
    * historical fetch never disturbs the live polling cursor or pipeline view.
    */
   async function loadOlderMessages(): Promise<void> {
-    const sessionId = getCurrentSession()?.id;
-    const before = getOldestSequenceNumber();
+    const sessionId = fd.playground.currentSession?.id;
+    const before = fd.playground.oldestSequenceNumber;
     if (!sessionId || before === null) return;
 
     try {
-      const response = await playgroundService.getMessages(sessionId, {
+      const response = await playgroundService.getMessages(fd.api.config, sessionId, {
         before,
         limit: messagePageSize
       });
       // The session may have changed while the fetch was in flight — don't
       // splice an old session's page into the new session's store.
-      if (getCurrentSession()?.id !== sessionId) return;
+      if (fd.playground.currentSession?.id !== sessionId) return;
       if (response.data && response.data.length > 0) {
-        playgroundActions.addMessages(response.data);
+        fd.playground.addMessages(response.data);
       }
-      setHasOlder(deriveHasOlder(response));
+      fd.playground.setHasOlder(deriveHasOlder(response));
     } catch (err) {
       logger.error('[Playground] Failed to load older messages:', err);
     }
@@ -314,72 +308,77 @@
   }
 
   async function handleCreateSession(): Promise<void> {
-    playgroundActions.setLoading(true);
-    playgroundActions.setError(null);
+    fd.playground.setLoading(true);
+    fd.playground.setError(null);
 
     try {
-      const sessionName = `Session ${getSessions().length + 1}`;
-      const session = await playgroundService.createSession(workflowId, sessionName);
+      const sessionName = `Session ${fd.playground.sessions.length + 1}`;
+      const session = await playgroundService.createSession(fd.api.config, workflowId, sessionName);
+
+      // Stop polling the previous (possibly running) session before switching,
+      // mirroring handleSelectSession. Otherwise its next poll keeps the old
+      // 'running' status alive and the new session's chat input stays disabled.
+      playgroundService.stopPolling();
 
       if (onSessionNavigate) {
         onSessionNavigate(session.id);
         return;
       }
 
-      playgroundActions.addSession(session);
-      playgroundActions.setCurrentSession(session);
-      playgroundActions.clearMessages();
+      fd.playground.addSession(session);
+      fd.playground.setCurrentSession(session);
+      fd.playground.clearMessages();
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to create session';
-      playgroundActions.setError(errorMessage);
+      fd.playground.setError(errorMessage);
       logger.error('Failed to create session:', err);
     } finally {
-      playgroundActions.setLoading(false);
+      fd.playground.setLoading(false);
     }
   }
 
   async function handleSelectSession(sessionId: string): Promise<void> {
-    playgroundActions.pinExecution(null);
-    const currentSessionId = getCurrentSession()?.id;
+    fd.playground.pinExecution(null);
+    const currentSessionId = fd.playground.currentSession?.id;
     if (currentSessionId === sessionId) return;
 
     playgroundService.stopPolling();
-    playgroundActions.updateSessionStatus('idle');
+    fd.playground.updateSessionStatus('idle');
     await loadSession(sessionId);
   }
 
   async function handleDeleteSession(sessionId: string): Promise<void> {
     try {
-      await playgroundService.deleteSession(sessionId);
-      playgroundActions.removeSession(sessionId);
+      await playgroundService.deleteSession(fd.api.config, sessionId);
+      fd.playground.removeSession(sessionId);
 
-      if (getCurrentSession()?.id === sessionId) {
+      if (fd.playground.currentSession?.id === sessionId) {
         playgroundService.stopPolling();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to delete session';
-      playgroundActions.setError(errorMessage);
+      fd.playground.setError(errorMessage);
       logger.error('Failed to delete session:', err);
     }
   }
 
   async function handleSendMessage(content: string): Promise<void> {
-    if (getIsExecuting()) return;
+    if (fd.playground.isExecuting) return;
 
-    if (!getCurrentSession()) {
+    if (!fd.playground.currentSession) {
       await handleCreateSession();
-      if (!getCurrentSession()) return;
+      if (!fd.playground.currentSession) return;
     }
 
-    const sessionId = getCurrentSession()!.id;
+    const sessionId = fd.playground.currentSession!.id;
 
-    playgroundActions.updateSessionStatus('running');
-    playgroundActions.pinExecution(null);
-    playgroundActions.setError(null);
+    fd.playground.updateSessionStatus('running');
+    fd.playground.pinExecution(null);
+    fd.playground.setError(null);
 
     try {
-      const message = await playgroundService.sendMessage(sessionId, content, {});
-      playgroundActions.addMessage(message);
+      const message = await playgroundService.sendMessage(fd.api.config, sessionId, content, {});
+      fd.playground.addMessage(message);
       // Only start polling if not already active — avoids resetting the cursor
       // mid-session and re-fetching messages that are already in the store.
       // Seed from the newest loaded message so polling tails live updates
@@ -389,25 +388,25 @@
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
-      playgroundActions.setError(errorMessage);
-      playgroundActions.updateSessionStatus('idle');
+      fd.playground.setError(errorMessage);
+      fd.playground.updateSessionStatus('idle');
       logger.error('Failed to send message:', err);
     }
   }
 
   async function handleStopExecution(): Promise<void> {
-    const sessionId = getCurrentSession()?.id;
+    const sessionId = fd.playground.currentSession?.id;
     if (!sessionId) return;
 
     try {
-      await playgroundService.stopExecution(sessionId);
+      await playgroundService.stopExecution(fd.api.config, sessionId);
       playgroundService.stopPolling();
-      playgroundActions.updateSessionStatus('idle');
+      fd.playground.updateSessionStatus('idle');
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to stop execution';
-      playgroundActions.setError(errorMessage);
+      fd.playground.setError(errorMessage);
       playgroundService.stopPolling();
-      playgroundActions.updateSessionStatus('idle');
+      fd.playground.updateSessionStatus('idle');
       logger.error('Failed to stop execution:', err);
     }
   }
@@ -418,11 +417,12 @@
     overrideShouldStopPolling?: (status: PlaygroundSessionStatus) => boolean
   ): void {
     const pollingInterval = config.pollingInterval ?? 1500;
-    const initialSequenceNumber = seedSequence ? getLatestSequenceNumber() : null;
+    const initialSequenceNumber = seedSequence ? fd.playground.latestSequenceNumber : null;
 
     playgroundService.startPolling(
+      fd.api.config,
       sessionId,
-      (response) => applyServerResponse(response),
+      (response) => fd.playground.applyServerResponse(response, sessionId),
       pollingInterval,
       overrideShouldStopPolling ?? config.shouldStopPolling,
       initialSequenceNumber
@@ -430,14 +430,14 @@
   }
 
   async function refreshFromServer(): Promise<void> {
-    const sessionId = getCurrentSession()?.id;
+    const sessionId = fd.playground.currentSession?.id;
     if (!sessionId || isRefreshing) return;
     isRefreshing = true;
     try {
-      const response = await playgroundService.getMessages(sessionId, {
+      const response = await playgroundService.getMessages(fd.api.config, sessionId, {
         since: playgroundService.getLastSequenceNumber() ?? undefined
       });
-      applyServerResponse(response);
+      fd.playground.applyServerResponse(response, sessionId);
       if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
         startPolling(sessionId, true);
       }
@@ -449,16 +449,16 @@
   }
 
   async function handleInterruptResolved(): Promise<void> {
-    const sessionId = getCurrentSession()?.id;
+    const sessionId = fd.playground.currentSession?.id;
     if (!sessionId) return;
 
     try {
       // Catch up immediately rather than waiting for the next poll interval.
       // Use the service's sequence cursor so we only fetch new messages.
-      const response = await playgroundService.getMessages(sessionId, {
+      const response = await playgroundService.getMessages(fd.api.config, sessionId, {
         since: playgroundService.getLastSequenceNumber() ?? undefined
       });
-      applyServerResponse(response);
+      fd.playground.applyServerResponse(response, sessionId);
     } catch (err) {
       logger.error('[Playground] Failed to refresh after interrupt:', err);
     }
@@ -478,14 +478,14 @@
   class:playground--modal={mode === 'modal'}
 >
   <main class="playground__main">
-    {#if getError()}
+    {#if fd.playground.error}
       <div class="playground__error">
         <Icon icon="mdi:alert-circle" />
-        <span>{getError()}</span>
+        <span>{fd.playground.error}</span>
         <button
           type="button"
           class="playground__error-dismiss"
-          onclick={() => playgroundActions.setError(null)}
+          onclick={() => fd.playground.setError(null)}
         >
           <Icon icon="mdi:close" />
         </button>
@@ -493,7 +493,7 @@
     {/if}
 
     <div class="playground__content" bind:this={playgroundContentEl}>
-      {#if getIsLoading() && !getCurrentSession()}
+      {#if fd.playground.isLoading && !fd.playground.currentSession}
         <div class="playground__loading">
           <Icon icon="mdi:loading" class="playground__loading-icon" />
           <span>Loading...</span>
@@ -504,7 +504,7 @@
           autoScroll={config.autoScroll ?? true}
           enableMarkdown={config.enableMarkdown ?? true}
           onInterruptResolved={handleInterruptResolved}
-          onCreateSession={getSessions().length === 0 ? handleCreateSession : undefined}
+          onCreateSession={fd.playground.sessions.length === 0 ? handleCreateSession : undefined}
           onLoadOlder={loadOlderMessages}
         />
 
@@ -545,6 +545,9 @@
           showChatInput={config.showChatInput ?? true}
           showRunButton={config.showRunButton ?? true}
           predefinedMessage={config.predefinedMessage}
+          showSessionHeader={config.showSessionHeader ?? true}
+          showNewSessionButton={config.showNewSessionButton ?? true}
+          showSessionList={config.showSessionList ?? true}
         />
       {/if}
     </div>

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

@@ -1,6 +1,7 @@
 import type { Workflow } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundMode, PlaygroundConfig } from '../../types/playground.js';
+import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
 interface Props {
     workflowId: string;
     workflow?: Workflow;
@@ -12,6 +13,7 @@ interface Props {
     onTogglePanel?: () => void;
     isPipelinePanelOpen?: boolean;
     onSessionNavigate?: (sessionId: string) => void;
+    instance?: FlowDropInstance;
 }
 declare const Playground: import("svelte").Component<Props, {}, "">;
 type Playground = ReturnType<typeof Playground>;

package/dist/components/playground/PlaygroundApp.svelte

@@ -13,6 +13,7 @@
   import Navbar from '../Navbar.svelte';
   import PlaygroundStudio from './PlaygroundStudio.svelte';
   import type { Workflow } from '../../types/index.js';
+  import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundConfig } from '../../types/playground.js';
   import type { SettingsCategory } from '../../types/settings.js';
@@ -37,6 +38,8 @@
     initialPipelineWidth?: number;
     onClose?: () => void;
     onSessionNavigate?: (sessionId: string) => void;
+    /** Per-instance state container — forwarded to the inner PlaygroundStudio */
+    instance?: FlowDropInstance;
   }
 
   let {
@@ -57,7 +60,8 @@
     minChatWidth,
     initialPipelineWidth,
     onClose,
-    onSessionNavigate
+    onSessionNavigate,
+    instance
   }: Props = $props();
 
   const displayTitle = $derived(navbarTitle ?? workflow?.name ?? 'Playground');
@@ -77,6 +81,7 @@
   {/if}
   <div class="fd-playground-app__content">
     <PlaygroundStudio
+      {instance}
       {workflowId}
       {workflow}
       {mode}

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

@@ -1,4 +1,5 @@
 import type { Workflow } from '../../types/index.js';
+import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundConfig } from '../../types/playground.js';
 import type { SettingsCategory } from '../../types/settings.js';
@@ -22,6 +23,8 @@ interface Props {
     initialPipelineWidth?: number;
     onClose?: () => void;
     onSessionNavigate?: (sessionId: string) => void;
+    /** Per-instance state container — forwarded to the inner PlaygroundStudio */
+    instance?: FlowDropInstance;
 }
 declare const PlaygroundApp: import("svelte").Component<Props, {}, "">;
 type PlaygroundApp = ReturnType<typeof PlaygroundApp>;

package/dist/components/playground/PlaygroundModal.svelte

@@ -10,6 +10,7 @@
   import Icon from '@iconify/svelte';
   import Playground from './Playground.svelte';
   import type { Workflow } from '../../types/index.js';
+  import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundConfig } from '../../types/playground.js';
   import { m } from '../../messages/index.js';
@@ -30,6 +31,8 @@
     endpointConfig?: EndpointConfig;
     /** Playground configuration options */
     config?: PlaygroundConfig;
+    /** Per-instance state container — forwarded to the inner Playground */
+    instance?: FlowDropInstance;
     /** Callback when modal is closed */
     onClose: () => void;
   }
@@ -41,9 +44,15 @@
     initialSessionId,
     endpointConfig,
     config = {},
+    instance,
     onClose
   }: Props = $props();
 
+  // Unique per component instance so two FlowDrop editors on one page
+  // don't render colliding DOM ids (a11y).
+  const uid = $props.id();
+  const titleId = `${uid}-playground-modal-title`;
+
   /**
    * Close modal on Escape key
    */
@@ -71,15 +80,15 @@
     onkeydown={handleKeydown}
     role="dialog"
     aria-modal="true"
-    aria-labelledby="playground-modal-title"
+    aria-labelledby={titleId}
     tabindex="-1"
   >
     <!-- Modal Container -->
-    <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events — role="presentation" container stops backdrop click propagation -->
+    <!-- role="presentation" container stops backdrop click propagation -->
     <div class="playground-modal" onclick={(e) => e.stopPropagation()} role="presentation">
       <!-- Modal Header -->
       <div class="playground-modal__header">
-        <div class="playground-modal__title" id="playground-modal-title">
+        <div class="playground-modal__title" id={titleId}>
           <Icon icon="mdi:play-circle-outline" />
           <span>Playground</span>
         </div>
@@ -96,6 +105,7 @@
       <!-- Modal Content -->
       <div class="playground-modal__content">
         <Playground
+          {instance}
           {workflowId}
           {workflow}
           mode="modal"

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

@@ -1,4 +1,5 @@
 import type { Workflow } from '../../types/index.js';
+import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundConfig } from '../../types/playground.js';
 /**
@@ -17,6 +18,8 @@ interface Props {
     endpointConfig?: EndpointConfig;
     /** Playground configuration options */
     config?: PlaygroundConfig;
+    /** Per-instance state container — forwarded to the inner Playground */
+    instance?: FlowDropInstance;
     /** Callback when modal is closed */
     onClose: () => void;
 }