@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.2

package/dist/components/playground/Playground.svelte

@@ -17,6 +17,7 @@
   import ControlPanel from './ControlPanel.svelte';
   import type { Workflow } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
+  import type { AuthProvider } from '../../types/auth.js';
   import type {
     PlaygroundMode,
     PlaygroundConfig,
@@ -24,21 +25,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 {
@@ -47,11 +36,14 @@
     mode?: PlaygroundMode;
     initialSessionId?: string;
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     config?: PlaygroundConfig;
     onClose?: () => void;
     onTogglePanel?: () => void;
     isPipelinePanelOpen?: boolean;
     onSessionNavigate?: (sessionId: string) => void;
+    instance?: FlowDropInstance;
   }
 
   let {
@@ -60,13 +52,19 @@
     mode = 'standalone',
     initialSessionId,
     endpointConfig,
+    authProvider,
     config = {},
     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 +76,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 +130,23 @@
   }
 
   onMount(() => {
-    if (endpointConfig) setEndpointConfig(endpointConfig);
-    if (workflow) playgroundActions.setWorkflow(workflow);
+    if (endpointConfig) fd.api.configure(endpointConfig, authProvider);
+    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, {
-              since: playgroundService.getLastSequenceNumber() ?? undefined
-            })
-            .then((response) => applyServerResponse(response, sessionId))
+            .getMessages(
+              fd.api.config,
+              sessionId,
+              {
+                since: playgroundService.getLastSequenceNumber() ?? undefined
+              },
+              fd.api.authProvider
+            )
+            .then((response) => fd.playground.applyServerResponse(response, sessionId))
             .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
       }
@@ -168,7 +171,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 +197,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 +220,62 @@
   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,
+        undefined,
+        fd.api.authProvider
+      );
+      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,
+        fd.api.authProvider
+      );
       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, {
-        latest: true,
-        limit: messagePageSize
-      });
+      const response = await playgroundService.getMessages(
+        fd.api.config,
+        sessionId,
+        {
+          latest: true,
+          limit: messagePageSize
+        },
+        fd.api.authProvider
+      );
       if (token !== loadToken) return;
-      playgroundActions.clearMessages();
-      applyServerResponse(response, sessionId);
-      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 +285,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 +299,27 @@
    * 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, {
-        before,
-        limit: messagePageSize
-      });
+      const response = await playgroundService.getMessages(
+        fd.api.config,
+        sessionId,
+        {
+          before,
+          limit: messagePageSize
+        },
+        fd.api.authProvider
+      );
       // 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,12 +336,18 @@
   }
 
   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,
+        undefined,
+        fd.api.authProvider
+      );
 
       // Stop polling the previous (possibly running) session before switching,
       // mirroring handleSelectSession. Otherwise its next poll keeps the old
@@ -331,60 +359,66 @@
         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.api.authProvider);
+      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.api.authProvider
+      );
+      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
@@ -394,25 +428,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, fd.api.authProvider);
       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);
     }
   }
@@ -423,26 +457,33 @@
     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, sessionId),
+      (response) => fd.playground.applyServerResponse(response, sessionId),
       pollingInterval,
       overrideShouldStopPolling ?? config.shouldStopPolling,
-      initialSequenceNumber
+      initialSequenceNumber,
+      fd.api.authProvider
     );
   }
 
   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, {
-        since: playgroundService.getLastSequenceNumber() ?? undefined
-      });
-      applyServerResponse(response, sessionId);
+      const response = await playgroundService.getMessages(
+        fd.api.config,
+        sessionId,
+        {
+          since: playgroundService.getLastSequenceNumber() ?? undefined
+        },
+        fd.api.authProvider
+      );
+      fd.playground.applyServerResponse(response, sessionId);
       if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
         startPolling(sessionId, true);
       }
@@ -454,16 +495,21 @@
   }
 
   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, {
-        since: playgroundService.getLastSequenceNumber() ?? undefined
-      });
-      applyServerResponse(response, sessionId);
+      const response = await playgroundService.getMessages(
+        fd.api.config,
+        sessionId,
+        {
+          since: playgroundService.getLastSequenceNumber() ?? undefined
+        },
+        fd.api.authProvider
+      );
+      fd.playground.applyServerResponse(response, sessionId);
     } catch (err) {
       logger.error('[Playground] Failed to refresh after interrupt:', err);
     }
@@ -483,14 +529,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>
@@ -498,7 +544,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>
@@ -509,7 +555,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}
         />
 
@@ -550,6 +596,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,17 +1,22 @@
 import type { Workflow } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
+import type { AuthProvider } from '../../types/auth.js';
 import type { PlaygroundMode, PlaygroundConfig } from '../../types/playground.js';
+import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
 interface Props {
     workflowId: string;
     workflow?: Workflow;
     mode?: PlaygroundMode;
     initialSessionId?: string;
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     config?: PlaygroundConfig;
     onClose?: () => void;
     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,7 +13,9 @@
   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 { AuthProvider } from '../../types/auth.js';
   import type { PlaygroundConfig } from '../../types/playground.js';
   import type { SettingsCategory } from '../../types/settings.js';
   import type { NavbarAction } from '../../types/navbar.js';
@@ -23,6 +25,8 @@
     workflow?: Workflow;
     mode?: 'standalone' | 'embedded';
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     config?: PlaygroundConfig;
     showNavbar?: boolean;
     navbarTitle?: string;
@@ -37,6 +41,8 @@
     initialPipelineWidth?: number;
     onClose?: () => void;
     onSessionNavigate?: (sessionId: string) => void;
+    /** Per-instance state container — forwarded to the inner PlaygroundStudio */
+    instance?: FlowDropInstance;
   }
 
   let {
@@ -44,6 +50,7 @@
     workflow,
     mode = 'standalone',
     endpointConfig,
+    authProvider,
     config = {},
     showNavbar = true,
     navbarTitle,
@@ -57,7 +64,8 @@
     minChatWidth,
     initialPipelineWidth,
     onClose,
-    onSessionNavigate
+    onSessionNavigate,
+    instance
   }: Props = $props();
 
   const displayTitle = $derived(navbarTitle ?? workflow?.name ?? 'Playground');
@@ -77,10 +85,12 @@
   {/if}
   <div class="fd-playground-app__content">
     <PlaygroundStudio
+      {instance}
       {workflowId}
       {workflow}
       {mode}
       {endpointConfig}
+      {authProvider}
       {config}
       {initialSessionId}
       {initialPipelineOpen}

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

@@ -1,5 +1,7 @@
 import type { Workflow } from '../../types/index.js';
+import type { FlowDropInstance } from '../../stores/instanceContainer.svelte.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
+import type { AuthProvider } from '../../types/auth.js';
 import type { PlaygroundConfig } from '../../types/playground.js';
 import type { SettingsCategory } from '../../types/settings.js';
 import type { NavbarAction } from '../../types/navbar.js';
@@ -8,6 +10,8 @@ interface Props {
     workflow?: Workflow;
     mode?: 'standalone' | 'embedded';
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     config?: PlaygroundConfig;
     showNavbar?: boolean;
     navbarTitle?: string;
@@ -22,6 +26,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>;