@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

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>

package/dist/components/playground/PipelineKanbanView.svelte

@@ -42,6 +42,7 @@
     getStatusTextColor,
     getStatusBackgroundColor
   } from '../../utils/nodeStatus.js';
+  import { formatMicroseconds } from '../../utils/duration.js';
   import type { NodeStatus } from './pipelineViewUtils.svelte.js';
   import type { Workflow, WorkflowNode } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
@@ -55,7 +56,8 @@
 
   let { pipelineId, workflow, endpointConfig, refreshTrigger = 0 }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — endpointConfig is consumed once to build the API client; it must be stable
+  // endpointConfig is consumed once to build the API client; it must be stable
+  // svelte-ignore state_referenced_locally
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -65,8 +67,13 @@
   });
 
   interface CardItem {
-    node: WorkflowNode;
+    /** Stable key: job id, or node id for nodes without a job yet */
+    key: string;
+    label: string;
+    typeId: string;
     status: NodeStatus;
+    /** Duration in microseconds, for finished jobs */
+    durationUs?: number | null;
   }
 
   const columnedNodes = $derived.by(() => {
@@ -85,10 +92,37 @@
       nodesByColumn.set(col.key, []);
     }
 
+    const nodesById = new Map<string, WorkflowNode>(workflow.nodes.map((node) => [node.id, node]));
+
+    // One card per job: loop iterations create multiple jobs for the same
+    // node, and each deserves its own card (label carries the #N suffix).
+    const nodesWithJobs = new Set<string>();
+    for (const job of fetcher.jobs) {
+      const node = nodesById.get(job.nodeId);
+      if (!node) continue;
+      nodesWithJobs.add(job.nodeId);
+      const status = resolveStatus({ status: job.status });
+      const colKey = statusToColumn.get(status) ?? fallbackKey;
+      nodesByColumn.get(colKey)?.push({
+        key: job.id,
+        label: job.label || node.data.label,
+        typeId: node.data.metadata.id,
+        status,
+        durationUs: job.executionTimeUs
+      });
+    }
+
+    // Nodes without a job yet keep a single card (pending / not reached).
     for (const node of workflow.nodes) {
+      if (nodesWithJobs.has(node.id)) continue;
       const status = resolveStatus(fetcher.nodeStatusMap[node.id]);
       const colKey = statusToColumn.get(status) ?? fallbackKey;
-      nodesByColumn.get(colKey)?.push({ node, status });
+      nodesByColumn.get(colKey)?.push({
+        key: node.id,
+        label: node.data.label,
+        typeId: node.data.metadata.id,
+        status
+      });
     }
 
     return { columns, nodesByColumn };
@@ -122,11 +156,11 @@
             <span class="pipeline-kanban__col-count">{items.length}</span>
           </div>
           <div class="pipeline-kanban__cards">
-            {#each items as { node, status } (node.id)}
+            {#each items as { key, label, typeId, status, durationUs } (key)}
               <div class="pipeline-kanban__card">
                 <div class="pipeline-kanban__card-body">
                   <div class="pipeline-kanban__card-top">
-                    <span class="pipeline-kanban__card-label">{node.data.label}</span>
+                    <span class="pipeline-kanban__card-label">{label}</span>
                     {#if showStatusPill}
                       <span
                         class="pipeline-kanban__card-status"
@@ -137,7 +171,14 @@
                       >
                     {/if}
                   </div>
-                  <span class="pipeline-kanban__card-type">{node.data.metadata.id}</span>
+                  <div class="pipeline-kanban__card-meta">
+                    <span class="pipeline-kanban__card-type">{typeId}</span>
+                    {#if durationUs != null}
+                      <span class="pipeline-kanban__card-duration"
+                        >{formatMicroseconds(durationUs)}</span
+                      >
+                    {/if}
+                  </div>
                 </div>
               </div>
             {/each}
@@ -296,12 +337,30 @@
     flex-shrink: 0;
   }
 
+  .pipeline-kanban__card-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    min-width: 0;
+  }
+
   .pipeline-kanban__card-type {
     color: var(--fd-muted-foreground);
     font-size: var(--fd-text-2xs);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .pipeline-kanban__card-duration {
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-2xs);
+    font-family: var(--fd-font-mono, monospace);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .pipeline-kanban__empty {