@flowdrop/flowdrop 1.13.0 → 1.15.0

package/dist/components/playground/PipelineKanbanView.svelte

@@ -2,10 +2,34 @@
   import type { KanbanColumnDef } from '../../types/index.js';
 
   const DEFAULT_COLUMNS: KanbanColumnDef[] = [
-    { key: 'pending',     label: 'Pending',     statuses: ['idle', 'pending'],                    icon: 'mdi:clock-outline',        color: 'var(--fd-muted-foreground)' },
-    { key: 'in_progress', label: 'In Progress', statuses: ['running', 'paused', 'interrupted'],   icon: 'mdi:play-circle-outline',  color: 'var(--fd-warning)'          },
-    { key: 'done',        label: 'Done',        statuses: ['completed', 'skipped'],               icon: 'mdi:check-circle',         color: 'var(--fd-success)'          },
-    { key: 'failed',      label: 'Failed',      statuses: ['failed', 'cancelled'],                icon: 'mdi:alert-circle',         color: 'var(--fd-error)'            },
+    {
+      key: 'pending',
+      label: 'Pending',
+      statuses: ['idle', 'pending'],
+      icon: 'mdi:clock-outline',
+      color: 'var(--fd-muted-foreground)'
+    },
+    {
+      key: 'in_progress',
+      label: 'In Progress',
+      statuses: ['running', 'paused', 'interrupted'],
+      icon: 'mdi:play-circle-outline',
+      color: 'var(--fd-warning)'
+    },
+    {
+      key: 'done',
+      label: 'Done',
+      statuses: ['completed', 'skipped'],
+      icon: 'mdi:check-circle',
+      color: 'var(--fd-success)'
+    },
+    {
+      key: 'failed',
+      label: 'Failed',
+      statuses: ['failed', 'cancelled'],
+      icon: 'mdi:alert-circle',
+      color: 'var(--fd-error)'
+    }
   ];
 </script>
 
@@ -13,7 +37,11 @@
   import { onMount } from 'svelte';
   import Icon from '@iconify/svelte';
   import { createPipelineDataFetcher, resolveStatus } from './pipelineViewUtils.svelte.js';
-  import { getStatusLabel, getStatusTextColor, getStatusBackgroundColor } from '../../utils/nodeStatus.js';
+  import {
+    getStatusLabel,
+    getStatusTextColor,
+    getStatusBackgroundColor
+  } from '../../utils/nodeStatus.js';
   import type { NodeStatus } from './pipelineViewUtils.svelte.js';
   import type { Workflow, WorkflowNode } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
@@ -27,6 +55,7 @@
 
   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
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -88,10 +117,7 @@
           style="--col-color: {col.color ?? 'var(--fd-muted-foreground)'}"
         >
           <div class="pipeline-kanban__column-header">
-            <Icon
-              icon={col.icon ?? 'mdi:circle-outline'}
-              class="pipeline-kanban__col-icon"
-            />
+            <Icon icon={col.icon ?? 'mdi:circle-outline'} class="pipeline-kanban__col-icon" />
             <span class="pipeline-kanban__col-label">{col.label}</span>
             <span class="pipeline-kanban__col-count">{items.length}</span>
           </div>
@@ -104,8 +130,11 @@
                     {#if showStatusPill}
                       <span
                         class="pipeline-kanban__card-status"
-                        style="color: {getStatusTextColor(status)}; background-color: {getStatusBackgroundColor(status)}"
-                      >{getStatusLabel(status)}</span>
+                        style="color: {getStatusTextColor(
+                          status
+                        )}; background-color: {getStatusBackgroundColor(status)}"
+                        >{getStatusLabel(status)}</span
+                      >
                     {/if}
                   </div>
                   <span class="pipeline-kanban__card-type">{node.data.metadata.id}</span>

package/dist/components/playground/PipelinePanel.svelte

@@ -2,7 +2,7 @@
   const VIEW_MODE_KEY = 'fd-pipeline-view-mode';
   const BUILTIN_VIEWS = ['graph', 'kanban', 'table'] as const;
   // `string & {}` preserves autocomplete for built-in values while still accepting arbitrary strings from extraViews.
-  type ViewMode = typeof BUILTIN_VIEWS[number] | (string & {});
+  type ViewMode = (typeof BUILTIN_VIEWS)[number] | (string & {});
 </script>
 
 <script lang="ts">
@@ -177,6 +177,7 @@
             class="pipeline-panel__run-popover"
             bind:this={runPopoverEl}
             role="menu"
+            tabindex="-1"
             onkeydown={(e) => {
               if (e.key === 'Escape') {
                 runDropdownOpen = false;
@@ -415,6 +416,9 @@
     right: 0;
     z-index: 50;
     min-width: 160px;
+    max-width: 320px;
+    max-height: min(60vh, 420px);
+    overflow-y: auto;
     padding: var(--fd-space-xs);
     background-color: var(--fd-background);
     border: 1px solid var(--fd-border);

package/dist/components/playground/PipelineTableView.svelte

@@ -64,6 +64,7 @@
     statusData: NodeStatusData | undefined;
   }
 
+  // svelte-ignore state_referenced_locally — endpointConfig is consumed once to build the API client; it must be stable
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -137,14 +138,24 @@
                 {#if expandable}
                   <Icon
                     icon="mdi:chevron-right"
-                    class="pipeline-table__chevron {expanded ? 'pipeline-table__chevron--open' : ''}"
+                    class="pipeline-table__chevron {expanded
+                      ? 'pipeline-table__chevron--open'
+                      : ''}"
                   />
                 {/if}
               </td>
-              <td class="pipeline-table__td pipeline-table__td--label" title={row.node.data.label}>{row.node.data.label}</td>
-              <td class="pipeline-table__td pipeline-table__td--muted" title={row.node.data.metadata.id}>{row.node.data.metadata.id}</td>
+              <td class="pipeline-table__td pipeline-table__td--label" title={row.node.data.label}
+                >{row.node.data.label}</td
+              >
+              <td
+                class="pipeline-table__td pipeline-table__td--muted"
+                title={row.node.data.metadata.id}>{row.node.data.metadata.id}</td
+              >
               <td class="pipeline-table__td">
-                <span class="pipeline-table__status" style="color: {getStatusTextColor(row.status)}">
+                <span
+                  class="pipeline-table__status"
+                  style="color: {getStatusTextColor(row.status)}"
+                >
                   <Icon
                     icon={STATUS_ICON[row.status] ?? 'mdi:circle-outline'}
                     class="pipeline-table__status-icon"
@@ -152,7 +163,9 @@
                   {row.status}
                 </span>
               </td>
-              <td class="pipeline-table__td pipeline-table__td--id" title={row.node.id}>{row.node.id}</td>
+              <td class="pipeline-table__td pipeline-table__td--id" title={row.node.id}
+                >{row.node.id}</td
+              >
             </tr>
             {#if expanded && expandable}
               <tr class="pipeline-table__detail-row">
@@ -320,7 +333,8 @@
   }
 
   .pipeline-table__detail-cell {
-    padding: var(--fd-space-sm) var(--fd-space-md) var(--fd-space-sm) calc(1.5rem + var(--fd-space-md));
+    padding: var(--fd-space-sm) var(--fd-space-md) var(--fd-space-sm)
+      calc(1.5rem + var(--fd-space-md));
     border-bottom: 1px solid var(--fd-border);
   }
 

package/dist/components/playground/Playground.svelte

@@ -33,8 +33,11 @@
     getError,
     playgroundActions,
     applyServerResponse,
-    getLatestSequenceNumber
+    getLatestSequenceNumber,
+    getOldestSequenceNumber,
+    setHasOlder
   } from '../../stores/playgroundStore.svelte.js';
+  import type { PlaygroundMessagesApiResponse } from '../../types/playground.js';
   import { interruptActions } from '../../stores/interruptStore.svelte.js';
   import { logger } from '../../utils/logger.js';
 
@@ -67,6 +70,11 @@
   let loadedInitialSessionId = $state<string | undefined>(undefined);
   let autoRunTriggered = $state(false);
   let isRefreshing = $state(false);
+  // Monotonic token so a slow session load can't overwrite a newer one when the
+  // user switches sessions faster than the network responds (last-load wins).
+  let loadToken = 0;
+
+  const messagePageSize = $derived(config.messagePageSize ?? 50);
 
   // Vertical resizer state for the ExecutionConsole ↔ ControlPanel split.
   let playgroundContentEl = $state<HTMLElement | null>(null);
@@ -90,16 +98,15 @@
     }
   });
 
-  const maxControlPanelHeight = $derived(
-    containerHeight ? Math.round(containerHeight * 0.6) : 600
-  );
+  const maxControlPanelHeight = $derived(containerHeight ? Math.round(containerHeight * 0.6) : 600);
 
   function clampControlPanelHeight(h: number): number {
     return Math.min(Math.max(h, 140), maxControlPanelHeight);
   }
 
   function handleVerticalResizerPointerDown(e: PointerEvent) {
-    if (playgroundContentEl) dragContainerBottom = playgroundContentEl.getBoundingClientRect().bottom;
+    if (playgroundContentEl)
+      dragContainerBottom = playgroundContentEl.getBoundingClientRect().bottom;
     isVerticalResizing = true;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   }
@@ -133,8 +140,10 @@
         const sessionId = getCurrentSession()?.id;
         if (sessionId) {
           void playgroundService
-            .getMessages(sessionId, playgroundService.getLastSequenceNumber() ?? undefined)
-            .then((response) => applyServerResponse(response))
+            .getMessages(sessionId, {
+              since: playgroundService.getLastSequenceNumber() ?? undefined
+            })
+            .then((response) => applyServerResponse(response, sessionId))
             .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
       }
@@ -231,26 +240,79 @@
   async function loadSession(sessionId: string): Promise<void> {
     playgroundActions.setLoading(true);
     playgroundActions.setError(null);
+    const token = ++loadToken;
 
     try {
       const session = await playgroundService.getSession(sessionId);
+      if (token !== loadToken) return; // a newer session load superseded us
       playgroundActions.setCurrentSession(session);
 
-      const response = await playgroundService.getMessages(sessionId);
-      applyServerResponse(response);
+      // 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
+      });
+      if (token !== loadToken) return;
+      playgroundActions.clearMessages();
+      applyServerResponse(response, sessionId);
+      setHasOlder(deriveHasOlder(response));
 
       if (session.status !== 'idle') {
+        // Seed polling from the newest loaded message so it tails live updates
+        // instead of crawling forward from the start of the conversation.
         startPolling(sessionId, true);
       }
     } 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);
       logger.error('Failed to load session:', err);
     } finally {
-      playgroundActions.setLoading(false);
+      if (token === loadToken) playgroundActions.setLoading(false);
     }
   }
 
+  /**
+   * Load the page of messages immediately older than the oldest one currently
+   * shown. Triggered by scroll-up in MessageStream, which serializes calls and
+   * owns the in-flight/anchoring state. Bypasses applyServerResponse so a
+   * historical fetch never disturbs the live polling cursor or pipeline view.
+   */
+  async function loadOlderMessages(): Promise<void> {
+    const sessionId = getCurrentSession()?.id;
+    const before = getOldestSequenceNumber();
+    if (!sessionId || before === null) return;
+
+    try {
+      const response = await playgroundService.getMessages(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 (response.data && response.data.length > 0) {
+        playgroundActions.addMessages(response.data);
+      }
+      setHasOlder(deriveHasOlder(response));
+    } catch (err) {
+      logger.error('[Playground] Failed to load older messages:', err);
+    }
+  }
+
+  /**
+   * Whether older messages remain after a backward-pagination response. Prefer
+   * the server's explicit `hasOlder` flag; fall back to inferring from page
+   * fullness for backends that haven't adopted the field yet.
+   */
+  function deriveHasOlder(response: PlaygroundMessagesApiResponse): boolean {
+    if (typeof response.hasOlder === 'boolean') return response.hasOlder;
+    return (response.data?.length ?? 0) >= messagePageSize;
+  }
+
   async function handleCreateSession(): Promise<void> {
     playgroundActions.setLoading(true);
     playgroundActions.setError(null);
@@ -259,6 +321,11 @@
       const sessionName = `Session ${getSessions().length + 1}`;
       const session = await playgroundService.createSession(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;
@@ -320,8 +387,10 @@
       playgroundActions.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
+      // rather than crawling forward from the start of the conversation.
       if (!playgroundService.isPolling()) {
-        startPolling(sessionId);
+        startPolling(sessionId, true);
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
@@ -358,7 +427,7 @@
 
     playgroundService.startPolling(
       sessionId,
-      (response) => applyServerResponse(response),
+      (response) => applyServerResponse(response, sessionId),
       pollingInterval,
       overrideShouldStopPolling ?? config.shouldStopPolling,
       initialSequenceNumber
@@ -370,11 +439,10 @@
     if (!sessionId || isRefreshing) return;
     isRefreshing = true;
     try {
-      const response = await playgroundService.getMessages(
-        sessionId,
-        playgroundService.getLastSequenceNumber() ?? undefined
-      );
-      applyServerResponse(response);
+      const response = await playgroundService.getMessages(sessionId, {
+        since: playgroundService.getLastSequenceNumber() ?? undefined
+      });
+      applyServerResponse(response, sessionId);
       if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
         startPolling(sessionId, true);
       }
@@ -392,11 +460,10 @@
     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,
-        playgroundService.getLastSequenceNumber() ?? undefined
-      );
-      applyServerResponse(response);
+      const response = await playgroundService.getMessages(sessionId, {
+        since: playgroundService.getLastSequenceNumber() ?? undefined
+      });
+      applyServerResponse(response, sessionId);
     } catch (err) {
       logger.error('[Playground] Failed to refresh after interrupt:', err);
     }
@@ -430,10 +497,7 @@
       </div>
     {/if}
 
-    <div
-      class="playground__content"
-      bind:this={playgroundContentEl}
-    >
+    <div class="playground__content" bind:this={playgroundContentEl}>
       {#if getIsLoading() && !getCurrentSession()}
         <div class="playground__loading">
           <Icon icon="mdi:loading" class="playground__loading-icon" />
@@ -444,11 +508,14 @@
           showTimestamps={config.showTimestamps ?? true}
           autoScroll={config.autoScroll ?? true}
           enableMarkdown={config.enableMarkdown ?? true}
-          showLogsInline={config.logDisplayMode === 'inline'}
           onInterruptResolved={handleInterruptResolved}
           onCreateSession={getSessions().length === 0 ? handleCreateSession : undefined}
+          onLoadOlder={loadOlderMessages}
         />
 
+        <!-- Focusable ARIA splitter: keyboard/pointer handlers drive the resize -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <div
           class="playground__vertical-resizer"
           class:playground__vertical-resizer--active={isVerticalResizing}

package/dist/components/playground/PlaygroundStudio.svelte

@@ -3,14 +3,17 @@
   import Icon from '@iconify/svelte';
   import Playground from './Playground.svelte';
   import PipelinePanel from './PipelinePanel.svelte';
-  import { getPipelinePanelOpen, pipelinePanelActions } from '../../stores/pipelinePanelStore.svelte.js';
+  import {
+    getPipelinePanelOpen,
+    pipelinePanelActions
+  } from '../../stores/pipelinePanelStore.svelte.js';
   import {
     getActiveExecutionId,
     getPinnedExecutionId,
     getLatestExecutionId,
     getPipelineRefreshTrigger,
-    getCurrentSession,
-    playgroundActions,
+    getSelectableExecutions,
+    playgroundActions
   } from '../../stores/playgroundStore.svelte.js';
   import { setEndpointConfig, workflowApi } from '../../services/api.js';
   import { logger } from '../../utils/logger.js';
@@ -57,14 +60,17 @@
     initialPipelineWidth = 500,
     onSessionNavigate,
     onClose,
-    extraPipelineViews = [],
+    extraPipelineViews = []
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — seed mutable state from the prop's initial value; workflow may load asynchronously below
   let resolvedWorkflow = $state<Workflow | null>(workflowProp ?? null);
+  // svelte-ignore state_referenced_locally — initial loading flag derived from whether a workflow was provided up front
   let workflowLoading = $state(workflowProp === undefined);
   let workflowError = $state<string | null>(null);
 
   let splitEl = $state<HTMLElement | null>(null);
+  // svelte-ignore state_referenced_locally — seed mutable width from the initial prop; it changes as the user drags the resizer
   let pipelineWidth = $state(initialPipelineWidth);
   let isResizing = $state(false);
   let containerWidth = $state(0);
@@ -100,7 +106,8 @@
 
   async function loadWorkflow(): Promise<void> {
     if (!endpointConfig) {
-      workflowError = 'Provide a workflow prop or an endpointConfig so the workflow can be fetched.';
+      workflowError =
+        'Provide a workflow prop or an endpointConfig so the workflow can be fetched.';
       workflowLoading = false;
       return;
     }
@@ -149,11 +156,15 @@
   }
 </script>
 
-<div class="playground-studio" class:playground-studio--resizing={isResizing} style="--playground-studio-min-chat-width: {minChatWidth}px">
+<div
+  class="playground-studio"
+  class:playground-studio--resizing={isResizing}
+  style="--playground-studio-min-chat-width: {minChatWidth}px"
+>
   <div class="playground-studio__panes" bind:this={splitEl}>
     {#if getPipelinePanelOpen() && resolvedWorkflow && endpointConfig}
       {@const activeId = getActiveExecutionId()}
-      {@const executions = getCurrentSession()?.executions ?? []}
+      {@const executions = getSelectableExecutions()}
 
       <div class="playground-studio__pipeline" style="width: {pipelineWidth}px;">
         <button
@@ -178,6 +189,9 @@
         />
       </div>
 
+      <!-- Focusable ARIA splitter: keyboard/pointer handlers drive the resize -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <div
         class="playground-studio__resizer"
         class:playground-studio__resizer--active={isResizing}

package/dist/components/playground/pipelineViewUtils.svelte.js

@@ -1,8 +1,15 @@
 import { EnhancedFlowDropApiClient } from '../../api/enhanced-client.js';
 import { logger } from '../../utils/logger.js';
 const KNOWN_STATUSES = new Set([
-    'idle', 'pending', 'running', 'paused', 'interrupted',
-    'completed', 'skipped', 'failed', 'cancelled'
+    'idle',
+    'pending',
+    'running',
+    'paused',
+    'interrupted',
+    'completed',
+    'skipped',
+    'failed',
+    'cancelled'
 ]);
 export function resolveStatus(raw) {
     if (!raw)
@@ -36,7 +43,7 @@ export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
                     status: info.status,
                     last_executed: info.last_executed,
                     execution_time: info.execution_time,
-                    error: info.error,
+                    error: info.error
                 };
             }
             nodeStatusMap = map;
@@ -48,7 +55,7 @@ export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
                     label: col.label,
                     statuses: col.statuses,
                     icon: col.icon,
-                    color: col.color,
+                    color: col.color
                 }));
             }
         }

package/dist/helpers/proximityConnect.d.ts

@@ -19,8 +19,11 @@ export interface ProximityEdgeCandidate {
 export declare class ProximityConnectHelper {
     /**
      * Get ALL ports (static + dynamic + gateway branches) for a node.
+     *
+     * Only reads `type` and `data`, so callers can pass a full node or a lighter
+     * slice (e.g. a renderer that has metadata + config but no position/measured).
      */
-    static getAllPorts(node: WorkflowNodeType, direction: 'input' | 'output'): NodePort[];
+    static getAllPorts(node: Pick<WorkflowNodeType, 'type' | 'data'>, direction: 'input' | 'output'): NodePort[];
     /**
      * Build handle ID in the standard format.
      */

package/dist/helpers/proximityConnect.js

@@ -13,12 +13,28 @@ const PROXIMITY_EDGE_CLASS = 'flowdrop--edge--proximity-preview';
 export class ProximityConnectHelper {
     /**
      * Get ALL ports (static + dynamic + gateway branches) for a node.
+     *
+     * Only reads `type` and `data`, so callers can pass a full node or a lighter
+     * slice (e.g. a renderer that has metadata + config but no position/measured).
      */
     static getAllPorts(node, direction) {
         // Static ports from metadata
-        const staticPorts = direction === 'output'
+        let staticPorts = direction === 'output'
             ? (node.data?.metadata?.outputs ?? [])
             : (node.data?.metadata?.inputs ?? []);
+        // Atom value-type binding: the bound output port's dataType follows a config
+        // field (e.g. Constant's `valueType`), so connection validation matches the
+        // type the user actually picked. Derived on read — never stored redundantly.
+        if (direction === 'output') {
+            const atom = node.data?.metadata?.extensions?.ui?.atom;
+            const boundType = atom?.valueTypeKey
+                ? node.data?.config?.[atom.valueTypeKey]
+                : undefined;
+            if (boundType) {
+                const portId = atom?.outputPortId ?? staticPorts[0]?.id;
+                staticPorts = staticPorts.map((p) => (p.id === portId ? { ...p, dataType: boundType } : p));
+            }
+        }
         // Dynamic ports from config
         const dynamicKey = direction === 'output' ? 'dynamicOutputs' : 'dynamicInputs';
         const rawDynamic = node.data?.config?.[dynamicKey] ?? [];