@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.1

package/dist/components/playground/ChatPanel.svelte

@@ -5,16 +5,14 @@
   MessageStream (message + interrupt feed) and ChatInput (textarea +
   send/run/stop). Use this for chat-style agent interactions.
 
-  For view-only execution surfaces, prefer the MessageStream primitive
-  directly — ChatPanel's showChatInput/showRunButton flags are kept for
-  backwards compatibility but are deprecated.
+  For view-only execution surfaces, use the MessageStream primitive directly.
+  Log visibility is managed by the playground store (fd.playground.setShowLogs).
 -->
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import MessageStream from './MessageStream.svelte';
   import ChatInput from './ChatInput.svelte';
-  import { playgroundActions } from '../../stores/playgroundStore.svelte.js';
   import { m } from '../../messages/index.js';
 
   interface Props {
@@ -28,22 +26,8 @@
     onInterruptResolved?: () => void;
     /** Render a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     * Kept for backwards compatibility with PlaygroundConfig URL params.
-     */
-    showChatInput?: boolean;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     */
-    showRunButton?: boolean;
     predefinedMessage?: string;
     compactSystemMessages?: boolean;
-    /**
-     * @deprecated `showLogs` is now managed by playgroundStore.
-     * Setting it here syncs to the store on mount for backwards compatibility.
-     */
-    showLogs?: boolean;
   }
 
   let {
@@ -56,23 +40,11 @@
     enableMarkdown = true,
     onInterruptResolved,
     onCreateSession,
-    showChatInput = true,
-    showRunButton = true,
     predefinedMessage,
-    compactSystemMessages = true,
-    showLogs
+    compactSystemMessages = true
   }: Props = $props();
 
   const states = $derived(m().playground.states);
-
-  const noInputsAvailable = $derived(!showChatInput && !showRunButton);
-
-  // Back-compat: sync legacy showLogs prop into the store whenever it changes.
-  $effect(() => {
-    if (showLogs !== undefined) {
-      playgroundActions.setShowLogs(showLogs);
-    }
-  });
 </script>
 
 <div class="chat-panel">
@@ -87,14 +59,7 @@
     emptySession={emptyChatState}
   />
 
-  <ChatInput
-    {placeholder}
-    {predefinedMessage}
-    {onSendMessage}
-    {onStopExecution}
-    showTextarea={showChatInput}
-    {showRunButton}
-  />
+  <ChatInput {placeholder} {predefinedMessage} {onSendMessage} {onStopExecution} />
 </div>
 
 {#snippet welcomeIcon()}
@@ -115,16 +80,8 @@
 {/snippet}
 
 {#snippet welcomeCopy()}
-  {#if noInputsAvailable}
-    <h2 class="chat-panel__welcome-title">{states.viewOnlyTitle}</h2>
-    <p class="chat-panel__welcome-text">{states.viewOnlyText}</p>
-  {:else if showChatInput}
-    <h2 class="chat-panel__welcome-title">{states.newSessionTitle}</h2>
-    <p class="chat-panel__welcome-text">{states.newSessionText}</p>
-  {:else}
-    <h2 class="chat-panel__welcome-title">{states.readyTitle}</h2>
-    <p class="chat-panel__welcome-text">{states.readyText}</p>
-  {/if}
+  <h2 class="chat-panel__welcome-title">{states.newSessionTitle}</h2>
+  <p class="chat-panel__welcome-text">{states.newSessionText}</p>
 {/snippet}
 
 {#snippet welcomeState()}

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

@@ -9,22 +9,8 @@ interface Props {
     onInterruptResolved?: () => void;
     /** Render a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     * Kept for backwards compatibility with PlaygroundConfig URL params.
-     */
-    showChatInput?: boolean;
-    /**
-     * @deprecated Use `<MessageStream />` directly for view-only feeds.
-     */
-    showRunButton?: boolean;
     predefinedMessage?: string;
     compactSystemMessages?: boolean;
-    /**
-     * @deprecated `showLogs` is now managed by playgroundStore.
-     * Setting it here syncs to the store on mount for backwards compatibility.
-     */
-    showLogs?: boolean;
 }
 declare const ChatPanel: import("svelte").Component<Props, {}, "">;
 type ChatPanel = ReturnType<typeof ChatPanel>;

package/dist/components/playground/ControlPanel.svelte

@@ -10,15 +10,11 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import ChatInput from './ChatInput.svelte';
-  import {
-    getCurrentSession,
-    getSessions,
-    getIsLoading,
-    getShowLogs,
-    playgroundActions
-  } from '../../stores/playgroundStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
 
+  const fd = getInstance();
+
   interface Props {
     // Session management
     onCreateSession: () => void;
@@ -38,6 +34,10 @@
     showRunButton?: boolean;
     predefinedMessage?: string;
     placeholder?: string;
+    // Session UI config
+    showSessionHeader?: boolean;
+    showNewSessionButton?: boolean;
+    showSessionList?: boolean;
     style?: string;
   }
 
@@ -56,11 +56,14 @@
     showRunButton = true,
     predefinedMessage,
     placeholder,
+    showSessionHeader = true,
+    showNewSessionButton = true,
+    showSessionList = true,
     style
   }: Props = $props();
 
   const cp = $derived(m().playground.controlPanel);
-  const logsTitle = $derived(getShowLogs() ? cp.hideLogs : cp.showLogs);
+  const logsTitle = $derived(fd.playground.showLogs ? cp.hideLogs : cp.showLogs);
 
   let sessionDropdownOpen = $state(false);
   let chipWrapEl = $state<HTMLElement | null>(null);
@@ -107,136 +110,144 @@
 </script>
 
 <section class="control-panel" {style}>
-  <header class="control-panel__header">
-    <Icon icon="mdi:message-text-outline" class="control-panel__icon" />
-    <span class="control-panel__label">{cp.sessionsLabel}</span>
-
-    <div class="control-panel__session-chip-wrap" bind:this={chipWrapEl}>
-      <button
-        type="button"
-        class="control-panel__session-chip"
-        class:control-panel__session-chip--open={sessionDropdownOpen}
-        bind:this={sessionChipEl}
-        aria-haspopup="menu"
-        aria-expanded={sessionDropdownOpen}
-        onclick={() => (sessionDropdownOpen = !sessionDropdownOpen)}
-        onkeydown={(e) => {
-          if (e.key === 'Escape') sessionDropdownOpen = false;
-        }}
-        title={cp.switchSession}
-      >
-        <span class="control-panel__session-chip-name">
-          {getCurrentSession()?.name ?? cp.noSession}
-        </span>
-        <Icon
-          icon={sessionDropdownOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'}
-          class="control-panel__session-chip-chevron"
-        />
-      </button>
-
-      {#if sessionDropdownOpen}
-        <div
-          class="control-panel__session-popover"
-          bind:this={sessionPopoverEl}
-          role="menu"
-          tabindex="-1"
-          onkeydown={(e) => {
-            if (e.key === 'Escape') {
-              sessionDropdownOpen = false;
-              sessionChipEl?.focus();
-            }
-          }}
-        >
+  {#if showSessionHeader}
+    <header class="control-panel__header">
+      <Icon icon="mdi:message-text-outline" class="control-panel__icon" />
+      <span class="control-panel__label">{cp.sessionsLabel}</span>
+
+      {#if showSessionList}
+        <div class="control-panel__session-chip-wrap" bind:this={chipWrapEl}>
           <button
             type="button"
-            role="menuitem"
-            class="control-panel__session-popover-item control-panel__session-popover-item--new"
-            disabled={getIsLoading()}
-            onclick={handleCreate}
+            class="control-panel__session-chip"
+            class:control-panel__session-chip--open={sessionDropdownOpen}
+            bind:this={sessionChipEl}
+            aria-haspopup="menu"
+            aria-expanded={sessionDropdownOpen}
+            onclick={() => (sessionDropdownOpen = !sessionDropdownOpen)}
+            onkeydown={(e) => {
+              if (e.key === 'Escape') sessionDropdownOpen = false;
+            }}
+            title={cp.switchSession}
           >
-            <Icon icon="mdi:plus" />
-            <span>{cp.newSession}</span>
+            <span class="control-panel__session-chip-name">
+              {fd.playground.currentSession?.name ?? cp.noSession}
+            </span>
+            <Icon
+              icon={sessionDropdownOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'}
+              class="control-panel__session-chip-chevron"
+            />
           </button>
-          {#if getSessions().length > 0}
-            <div class="control-panel__session-popover-divider"></div>
-            <div class="control-panel__session-popover-list">
-              {#each getSessions() as session (session.id)}
-                {@const isActive = getCurrentSession()?.id === session.id}
-                <div class="control-panel__session-popover-row">
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="control-panel__session-popover-item"
-                    class:control-panel__session-popover-item--active={isActive}
-                    onclick={() => handleSelect(session.id)}
-                  >
-                    {#if isActive}
-                      <Icon icon="mdi:check" class="control-panel__session-popover-check" />
-                    {:else}
-                      <Icon icon="mdi:message-outline" />
-                    {/if}
-                    <span>{session.name}</span>
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    class="control-panel__session-popover-delete"
-                    onclick={(e) => handleDelete(e, session.id)}
-                    title={cp.deleteSession}
-                    aria-label={cp.deleteSession}
-                  >
-                    <Icon icon="mdi:delete-outline" />
-                  </button>
+
+          {#if sessionDropdownOpen}
+            <div
+              class="control-panel__session-popover"
+              bind:this={sessionPopoverEl}
+              role="menu"
+              tabindex="-1"
+              onkeydown={(e) => {
+                if (e.key === 'Escape') {
+                  sessionDropdownOpen = false;
+                  sessionChipEl?.focus();
+                }
+              }}
+            >
+              {#if showNewSessionButton}
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="control-panel__session-popover-item control-panel__session-popover-item--new"
+                  disabled={fd.playground.isLoading}
+                  onclick={handleCreate}
+                >
+                  <Icon icon="mdi:plus" />
+                  <span>{cp.newSession}</span>
+                </button>
+              {/if}
+              {#if showSessionList && fd.playground.sessions.length > 0}
+                {#if showNewSessionButton}
+                  <div class="control-panel__session-popover-divider"></div>
+                {/if}
+                <div class="control-panel__session-popover-list">
+                  {#each fd.playground.sessions as session (session.id)}
+                    {@const isActive = fd.playground.currentSession?.id === session.id}
+                    <div class="control-panel__session-popover-row">
+                      <button
+                        type="button"
+                        role="menuitem"
+                        class="control-panel__session-popover-item"
+                        class:control-panel__session-popover-item--active={isActive}
+                        onclick={() => handleSelect(session.id)}
+                      >
+                        {#if isActive}
+                          <Icon icon="mdi:check" class="control-panel__session-popover-check" />
+                        {:else}
+                          <Icon icon="mdi:message-outline" />
+                        {/if}
+                        <span>{session.name}</span>
+                      </button>
+                      <button
+                        type="button"
+                        role="menuitem"
+                        class="control-panel__session-popover-delete"
+                        onclick={(e) => handleDelete(e, session.id)}
+                        title={cp.deleteSession}
+                        aria-label={cp.deleteSession}
+                      >
+                        <Icon icon="mdi:delete-outline" />
+                      </button>
+                    </div>
+                  {/each}
                 </div>
-              {/each}
+              {/if}
             </div>
           {/if}
         </div>
       {/if}
-    </div>
 
-    <div class="control-panel__header-actions">
-      {#if onTogglePanel}
-        {@const pipelineTitle = isPipelinePanelOpen ? cp.hidePipeline : cp.showPipeline}
-        <button
-          type="button"
-          class="control-panel__toolbar-btn"
-          class:control-panel__toolbar-btn--active={isPipelinePanelOpen}
-          onclick={onTogglePanel}
-          title={pipelineTitle}
-          aria-label={pipelineTitle}
-        >
-          <Icon icon="mdi:source-branch" />
-          {cp.pipeline}
-        </button>
-      {/if}
-      {#if getCurrentSession()}
+      <div class="control-panel__header-actions">
+        {#if onTogglePanel}
+          {@const pipelineTitle = isPipelinePanelOpen ? cp.hidePipeline : cp.showPipeline}
+          <button
+            type="button"
+            class="control-panel__toolbar-btn"
+            class:control-panel__toolbar-btn--active={isPipelinePanelOpen}
+            onclick={onTogglePanel}
+            title={pipelineTitle}
+            aria-label={pipelineTitle}
+          >
+            <Icon icon="mdi:source-branch" />
+            {cp.pipeline}
+          </button>
+        {/if}
+        {#if fd.playground.currentSession}
+          <button
+            type="button"
+            class="control-panel__toolbar-btn"
+            class:control-panel__toolbar-btn--spinning={isRefreshing}
+            onclick={onRefresh}
+            disabled={isRefreshing}
+            title={cp.refreshTitle}
+            aria-label={cp.refreshTitle}
+          >
+            <Icon icon="mdi:refresh" />
+            {cp.refresh}
+          </button>
+        {/if}
         <button
           type="button"
           class="control-panel__toolbar-btn"
-          class:control-panel__toolbar-btn--spinning={isRefreshing}
-          onclick={onRefresh}
-          disabled={isRefreshing}
-          title={cp.refreshTitle}
-          aria-label={cp.refreshTitle}
+          class:control-panel__toolbar-btn--active={fd.playground.showLogs}
+          onclick={() => fd.playground.toggleShowLogs()}
+          title={logsTitle}
+          aria-label={logsTitle}
         >
-          <Icon icon="mdi:refresh" />
-          {cp.refresh}
+          <Icon icon="mdi:console" />
+          {cp.logs}
         </button>
-      {/if}
-      <button
-        type="button"
-        class="control-panel__toolbar-btn"
-        class:control-panel__toolbar-btn--active={getShowLogs()}
-        onclick={() => playgroundActions.toggleShowLogs()}
-        title={logsTitle}
-        aria-label={logsTitle}
-      >
-        <Icon icon="mdi:console" />
-        {cp.logs}
-      </button>
-    </div>
-  </header>
+      </div>
+    </header>
+  {/if}
 
   <ChatInput
     showTextarea={showChatInput}

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

@@ -13,6 +13,9 @@ interface Props {
     showRunButton?: boolean;
     predefinedMessage?: string;
     placeholder?: string;
+    showSessionHeader?: boolean;
+    showNewSessionButton?: boolean;
+    showSessionList?: boolean;
     style?: string;
 }
 declare const ControlPanel: import("svelte").Component<Props, {}, "">;

package/dist/components/playground/ExecutionLogs.svelte

@@ -9,8 +9,10 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import { slide } from 'svelte/transition';
-  import type { PlaygroundMessage, PlaygroundMessageLevel } from '../../types/playground.js';
-  import { getLogMessages } from '../../stores/playgroundStore.svelte.js';
+  import type { PlaygroundMessageLevel } from '../../types/playground.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
+
+  const fd = getInstance();
 
   /**
    * Component props
@@ -37,19 +39,19 @@
    */
   const filteredLogs = $derived(
     levelFilter === 'all'
-      ? getLogMessages()
-      : getLogMessages().filter((log) => log.metadata?.level === levelFilter)
+      ? fd.playground.logMessages
+      : fd.playground.logMessages.filter((log) => log.metadata?.level === levelFilter)
   );
 
   /**
    * Count of logs by level
    */
   const logCounts = $derived({
-    all: getLogMessages().length,
-    info: getLogMessages().filter((l) => l.metadata?.level === 'info').length,
-    warning: getLogMessages().filter((l) => l.metadata?.level === 'warning').length,
-    error: getLogMessages().filter((l) => l.metadata?.level === 'error').length,
-    debug: getLogMessages().filter((l) => l.metadata?.level === 'debug').length
+    all: fd.playground.logMessages.length,
+    info: fd.playground.logMessages.filter((l) => l.metadata?.level === 'info').length,
+    warning: fd.playground.logMessages.filter((l) => l.metadata?.level === 'warning').length,
+    error: fd.playground.logMessages.filter((l) => l.metadata?.level === 'error').length,
+    debug: fd.playground.logMessages.filter((l) => l.metadata?.level === 'debug').length
   });
 
   /**

package/dist/components/playground/InputCollector.svelte

@@ -10,7 +10,9 @@
   import Icon from '@iconify/svelte';
   import { slide } from 'svelte/transition';
   import type { PlaygroundInputField } from '../../types/playground.js';
-  import { getInputFields, getHasChatInput } from '../../stores/playgroundStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
+
+  const fd = getInstance();
 
   /**
    * Component props
@@ -41,14 +43,14 @@
    */
   $effect(() => {
     // Only initialize once when we have input fields and haven't initialized yet
-    if (getInputFields().length > 0 && !hasInitializedDefaults) {
+    if (fd.playground.inputFields.length > 0 && !hasInitializedDefaults) {
       hasInitializedDefaults = true;
 
       // Only set values if there are actual defaults to set
       const initialValues: Record<string, unknown> = {};
       let hasDefaults = false;
 
-      getInputFields().forEach((field) => {
+      fd.playground.inputFields.forEach((field) => {
         if (field.defaultValue !== undefined) {
           initialValues[`${field.nodeId}:${field.fieldId}`] = field.defaultValue;
           hasDefaults = true;
@@ -117,7 +119,7 @@
    */
   function resetToDefaults(): void {
     const defaultValues: Record<string, unknown> = {};
-    getInputFields().forEach((field) => {
+    fd.playground.inputFields.forEach((field) => {
       if (field.defaultValue !== undefined) {
         defaultValues[`${field.nodeId}:${field.fieldId}`] = field.defaultValue;
       }
@@ -127,7 +129,7 @@
   }
 </script>
 
-{#if getInputFields().length > 0}
+{#if fd.playground.inputFields.length > 0}
   <div class="input-collector" class:input-collector--expanded={isExpanded}>
     <!-- Header -->
     <button
@@ -139,7 +141,7 @@
       <div class="input-collector__title">
         <Icon icon="mdi:form-textbox" />
         <span>Workflow Inputs</span>
-        <span class="input-collector__count">{getInputFields().length}</span>
+        <span class="input-collector__count">{fd.playground.inputFields.length}</span>
       </div>
       <Icon
         icon="mdi:chevron-down"
@@ -150,7 +152,7 @@
     <!-- Content -->
     {#if isExpanded}
       <div class="input-collector__content" transition:slide={{ duration: 200 }}>
-        {#if getHasChatInput()}
+        {#if fd.playground.hasChatInput}
           <div class="input-collector__hint">
             <Icon icon="mdi:information-outline" />
             <span>Chat input will be collected from the message field below</span>
@@ -158,7 +160,7 @@
         {/if}
 
         <div class="input-collector__fields">
-          {#each getInputFields() as field (field.nodeId + ':' + field.fieldId)}
+          {#each fd.playground.inputFields as field (field.nodeId + ':' + field.fieldId)}
             <div class="input-collector__field">
               <label class="input-collector__label" for="input-{field.nodeId}-{field.fieldId}">
                 {field.label}
@@ -176,7 +178,7 @@
                   onchange={(e) => updateValue(field, e.currentTarget.value)}
                 >
                   <option value="">Select {field.label}</option>
-                  {#each field.schema?.enum ?? [] as option}
+                  {#each field.schema?.enum ?? [] as option (option)}
                     <option value={String(option)}>{option}</option>
                   {/each}
                 </select>

package/dist/components/playground/MessageStream.svelte

@@ -19,21 +19,11 @@
     extractInterruptMetadata,
     metadataToInterrupt
   } from '../../types/interrupt.js';
-  import {
-    getMessages,
-    getChatMessages,
-    getIsExecuting,
-    getCurrentSession,
-    getShowLogs,
-    getHasOlder
-  } from '../../stores/playgroundStore.svelte.js';
-  import {
-    getInterruptsMap,
-    interruptActions,
-    getInterruptByMessageId
-  } from '../../stores/interruptStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
 
+  const fd = getInstance();
+
   interface Props {
     /** Whether to show timestamps on messages */
     showTimestamps?: boolean;
@@ -80,7 +70,9 @@
   /** Reference to the messages container for scrolling */
   let messagesContainer = $state<HTMLDivElement | undefined>();
 
-  const displayMessages = $derived(allowLogs && getShowLogs() ? getMessages() : getChatMessages());
+  const displayMessages = $derived(
+    allowLogs && fd.playground.showLogs ? fd.playground.messages : fd.playground.chatMessages
+  );
 
   let previousMessageCount = 0;
   let userScrolledUp = false;
@@ -117,7 +109,7 @@
    * prepend doesn't shift the reading position.
    */
   async function loadOlder() {
-    if (!onLoadOlder || !messagesContainer || isLoadingOlder || !getHasOlder()) return;
+    if (!onLoadOlder || !messagesContainer || isLoadingOlder || !fd.playground.hasOlder) return;
 
     const anchor = topSentinel?.nextElementSibling as HTMLElement | null;
     const anchorTopBefore = anchor?.getBoundingClientRect().top ?? 0;
@@ -160,17 +152,17 @@
     const interruptMessages = displayMessages.filter(isInterruptMessage);
 
     for (const message of interruptMessages) {
-      const existing = getInterruptByMessageId(message.id);
+      const existing = fd.interrupts.getByMessageId(message.id);
       if (!existing) {
         const metadata = extractInterruptMetadata(
           message.metadata as Record<string, unknown> | undefined
         );
         if (metadata) {
           const interrupt = metadataToInterrupt(metadata, message.id, message.content);
-          interruptActions.addInterrupt(interrupt);
+          fd.interrupts.addInterrupt(interrupt);
 
           if (message.status === 'completed') {
-            interruptActions.resolveInterrupt(interrupt.id, metadata.response_value);
+            fd.interrupts.resolveInterrupt(interrupt.id, metadata.response_value);
           }
         }
       }
@@ -179,7 +171,7 @@
 
   const interruptsByMessageId = $derived(
     new Map(
-      Array.from(getInterruptsMap().values())
+      Array.from(fd.interrupts.getMap().values())
         .filter((i) => i.messageId)
         .map((i) => [i.messageId, i])
     )
@@ -189,12 +181,14 @@
     return interruptsByMessageId.get(message.id);
   }
 
-  const showWelcome = $derived(!getCurrentSession() && displayMessages.length === 0);
-  const showEmptyChat = $derived(getCurrentSession() !== null && displayMessages.length === 0);
+  const showWelcome = $derived(!fd.playground.currentSession && displayMessages.length === 0);
+  const showEmptyChat = $derived(
+    fd.playground.currentSession !== null && displayMessages.length === 0
+  );
 
   // Reset scroll-tracking when session changes
   $effect(() => {
-    if (getCurrentSession()) {
+    if (fd.playground.currentSession) {
       userScrolledUp = false;
     }
   });
@@ -271,7 +265,7 @@
       {/if}
     {/each}
 
-    {#if getIsExecuting()}
+    {#if fd.playground.isExecuting}
       <div class="message-stream__typing">
         <div class="message-stream__typing-indicator">
           <span></span>