@flowdrop/flowdrop 1.9.0 → 1.10.0

package/dist/api/enhanced-client.js

@@ -425,6 +425,10 @@ export class EnhancedFlowDropApiClient {
      * Fetch pipeline data including job information and status
      */
     async getPipelineData(pipelineId) {
-        return this.request('pipelines.get', this.config.endpoints.pipelines.get, { id: pipelineId }, {}, 'get pipeline data');
+        const response = await this.request('pipelines.get', this.config.endpoints.pipelines.get, { id: pipelineId }, {}, 'get pipeline data');
+        if (!response.success || !response.data) {
+            throw new Error(response.error ?? 'Failed to fetch pipeline data');
+        }
+        return response.data;
     }
 }

package/dist/components/PipelineStatus.svelte

@@ -24,6 +24,8 @@
     runLabel?: string;
     /** When true, suppresses breadcrumb and layout events (used inside playground panel) */
     isEmbedded?: boolean;
+    /** Increments when new messages arrive — triggers an immediate pipeline data refresh */
+    refreshTrigger?: number;
     onActionsReady?: (
       actions: Array<{
         label: string;
@@ -35,9 +37,13 @@
     ) => void;
   }
 
-  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady, runLabel, isEmbedded = false }: Props =
+  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady, runLabel, isEmbedded = false, refreshTrigger = 0 }: Props =
     $props();
 
+  // Track previous trigger value so the $effect only fires on increments, not on initial mount.
+  // svelte-ignore state_referenced_locally
+  let _prevRefreshTrigger = refreshTrigger;
+
   // Initialize API client if not provided
   // svelte-ignore state_referenced_locally — client created once from props
   const client =
@@ -285,6 +291,16 @@
 
   // Note: Interval cleanup is handled by the $effect above.
   // In Svelte 5, $effect cleanup runs both on re-execution and component destroy.
+
+  // Refresh pipeline data whenever new messages arrive (e.g. log messages during execution).
+  // Debounced so burst arrivals collapse into one fetch.
+  $effect(() => {
+    const t = refreshTrigger;
+    if (t <= 0 || t === _prevRefreshTrigger) return;
+    _prevRefreshTrigger = t;
+    const timer = setTimeout(fetchPipelineData, 300);
+    return () => clearTimeout(timer);
+  });
 </script>
 
 <div class="pipeline-status-container" class:pipeline-status-container--embedded={isEmbedded}>

package/dist/components/PipelineStatus.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     runLabel?: string;
     /** When true, suppresses breadcrumb and layout events (used inside playground panel) */
     isEmbedded?: boolean;
+    /** Increments when new messages arrive — triggers an immediate pipeline data refresh */
+    refreshTrigger?: number;
     onActionsReady?: (actions: Array<{
         label: string;
         href: string;

package/dist/components/WorkflowEditor.svelte

@@ -266,6 +266,32 @@
     }
   });
 
+  // Apply nodeStatuses from the parent (PipelineStatus embedded mode) to flowNodes
+  // whenever they change. loadNodeExecutionInfo() only fires on pipelineId change,
+  // so this is the update path for subsequent refreshes (e.g. after HITL resolution).
+  $effect(() => {
+    const statuses = props.nodeStatuses;
+    if (!statuses || Object.keys(statuses).length === 0) return;
+
+    flowNodes = untrack(() => flowNodes).map((node) => {
+      const rawStatus = statuses[node.id];
+      if (!rawStatus) return node;
+
+      const existing = node.data.executionInfo ?? { status: 'idle' as const, executionCount: 0, isExecuting: false };
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          executionInfo: {
+            ...existing,
+            status: rawStatus === 'error' ? ('failed' as const) : rawStatus,
+            isExecuting: rawStatus === 'running'
+          }
+        }
+      };
+    });
+  });
+
   // ---------------------------------------------------------------------------
   // History restore callback
   // ---------------------------------------------------------------------------

package/dist/components/playground/ChatPanel.svelte

@@ -22,10 +22,10 @@
     getMessages,
     getChatMessages,
     getIsExecuting,
+    getCanSendMessage,
     getSessionStatus,
     getCurrentSession
   } from '../../stores/playgroundStore.svelte.js';
-  import type { PlaygroundExecution } from '../../types/playground.js';
   import {
     getInterruptsMap,
     interruptActions,
@@ -135,74 +135,15 @@
   const displayMessages = $derived(showLogs ? getMessages() : getChatMessages());
 
   // ---------------------------------------------------------------------------
-  // Execution separators
-  // ---------------------------------------------------------------------------
-
-  type ChatItem =
-    | { type: 'message'; message: PlaygroundMessage; msgIndex: number }
-    | { type: 'separator'; key: string; label: string; status: PlaygroundExecution['status'] };
-
-  /** Map executionId → { label, status } derived from the current session */
-  const executionMeta = $derived(
-    new Map(
-      (getCurrentSession()?.executions ?? []).map((e, i) => [
-        e.id,
-        { label: `Run #${i + 1}`, status: e.status }
-      ])
-    )
-  );
-
-  /**
-   * Interleave execution-boundary separators into the message list.
-   * A separator is inserted before the first message of each new execution.
-   */
-  const chatItems = $derived(
-    (() => {
-      const items: ChatItem[] = [];
-      let lastExecId: string | null = null;
-
-      displayMessages.forEach((msg, i) => {
-        const execId = msg.executionId ?? null;
-        if (execId !== null && execId !== lastExecId) {
-          const meta = executionMeta.get(execId);
-          if (meta) {
-            items.push({ type: 'separator', key: `sep-${execId}`, label: meta.label, status: meta.status });
-            lastExecId = execId;
-          }
-        }
-        items.push({ type: 'message', message: msg, msgIndex: i });
-      });
-
-      return items;
-    })()
-  );
-
-  /**
-   * Track previous message count for detecting new messages.
-   * We only want to auto-scroll when NEW messages are added,
-   * not when existing messages are updated.
-   */
   let previousMessageCount = $state(0);
+  let userScrolledUp = $state(false);
 
-  /**
-   * Check if user is near the bottom of the scroll container.
-   * Used to determine if we should auto-scroll when new messages arrive.
-   * If user has scrolled up to read previous messages, we don't interrupt them.
-   *
-   * @param threshold - Pixels from bottom to consider "near bottom"
-   * @returns True if user is within threshold of the bottom
-   */
-  function isNearBottom(threshold: number = 100): boolean {
-    if (!messagesContainer) return true;
+  function handleScroll() {
+    if (!messagesContainer) return;
     const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
-    return scrollHeight - scrollTop - clientHeight <= threshold;
+    userScrolledUp = scrollHeight - scrollTop - clientHeight > 50;
   }
 
-  /**
-   * Check if a form element inside the messages container has focus.
-   * When user is interacting with a form (e.g., interrupt prompt),
-   * we should not auto-scroll as it disrupts their input.
-   */
   function isFormFocused(): boolean {
     if (!messagesContainer) return false;
     const activeElement = document.activeElement;
@@ -297,7 +238,7 @@
    */
   function handleSend(): void {
     const trimmedValue = inputValue.trim();
-    if (!trimmedValue || getIsExecuting()) {
+    if (!trimmedValue || !getCanSendMessage()) {
       return;
     }
 
@@ -380,58 +321,25 @@
   $effect(() => {
     const session = getCurrentSession();
     if (session) {
-      // Reset to enabled state for new/changed sessions
       runEnabled = true;
-      // Clear processed IDs for the new session
       processedEnableRunIds = new Set();
+      userScrolledUp = false;
     }
   });
 
-  /**
-   * Smart auto-scroll to bottom when NEW messages are added.
-   *
-   * Only scrolls if:
-   * 1. autoScroll prop is enabled
-   * 2. New messages were actually added (not just updates)
-   * 3. User is already near the bottom (hasn't scrolled up to read)
-   * 4. User is not interacting with a form inside the chat
-   *
-   * This prevents disruptive scrolling when:
-   * - User is reading previous messages
-   * - User is filling out an interrupt form
-   * - Messages are being updated (e.g., status changes)
-   */
   $effect(() => {
     const currentCount = displayMessages.length;
 
-    // Skip if auto-scroll is disabled or no container
     if (!autoScroll || !messagesContainer) {
       previousMessageCount = currentCount;
       return;
     }
 
-    // Check if this is a NEW message (count increased)
     const hasNewMessage = currentCount > previousMessageCount;
-
-    // Update the tracked count
     previousMessageCount = currentCount;
 
-    // Only scroll if there's a new message
-    if (!hasNewMessage) {
-      return;
-    }
-
-    // Don't scroll if user has scrolled up to read previous messages
-    if (!isNearBottom()) {
-      return;
-    }
-
-    // Don't scroll if user is interacting with a form
-    if (isFormFocused()) {
-      return;
-    }
+    if (!hasNewMessage || userScrolledUp || isFormFocused()) return;
 
-    // Safe to scroll to bottom
     tick().then(() => {
       if (messagesContainer) {
         messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -439,50 +347,17 @@
     });
   });
 
-  /**
-   * Track previous executing state to detect when execution completes
-   */
-  let wasExecuting = $state(false);
+  let wasExecuting = false;
 
   /**
-   * Auto-focus input when execution completes or session becomes ready
+   * Auto-focus input when execution completes
    */
   $effect(() => {
-    const currentlyExecuting = getIsExecuting();
-
-    // Focus input when execution completes (was executing, now not)
-    if (wasExecuting && !currentlyExecuting && inputField) {
-      tick().then(() => {
-        inputField?.focus();
-      });
-    }
-
-    // Update tracking state
-    wasExecuting = currentlyExecuting;
-  });
-
-  /**
-   * Focus input when session status changes to idle or completed
-   */
-  $effect(() => {
-    const status = getSessionStatus();
-    if ((status === 'idle' || status === 'completed') && inputField && !getIsExecuting()) {
-      tick().then(() => {
-        inputField?.focus();
-      });
-    }
-  });
-
-  /**
-   * Focus input when a new session is created/loaded
-   */
-  $effect(() => {
-    const session = getCurrentSession();
-    if (session && inputField && !getIsExecuting()) {
-      tick().then(() => {
-        inputField?.focus();
-      });
+    const nowExecuting = getIsExecuting();
+    if (wasExecuting && !nowExecuting && inputField) {
+      tick().then(() => inputField?.focus());
     }
+    wasExecuting = nowExecuting;
   });
 
   /**
@@ -498,7 +373,7 @@
 
 <div class="chat-panel">
   <!-- Messages Container -->
-  <div class="chat-panel__messages" bind:this={messagesContainer}>
+  <div class="chat-panel__messages" bind:this={messagesContainer} onscroll={handleScroll}>
     {#if showWelcome}
       <!-- Welcome State (no session) -->
       <div class="chat-panel__welcome">
@@ -582,50 +457,25 @@
         {/if}
       </div>
     {:else}
-      <!-- Messages with execution separators -->
-      {#each chatItems as item (item.type === 'message' ? item.message.id : item.key)}
-        {#if item.type === 'separator'}
-          <div
-            class="chat-panel__exec-sep"
-            class:chat-panel__exec-sep--completed={item.status === 'completed'}
-            class:chat-panel__exec-sep--failed={item.status === 'failed'}
-            class:chat-panel__exec-sep--running={item.status === 'running'}
-          >
-            <span class="chat-panel__exec-sep-line"></span>
-            <span class="chat-panel__exec-sep-label">
-              {#if item.status === 'completed'}
-                <Icon icon="mdi:check-circle" class="chat-panel__exec-sep-icon" />
-              {:else if item.status === 'failed'}
-                <Icon icon="mdi:alert-circle" class="chat-panel__exec-sep-icon" />
-              {:else}
-                <Icon icon="mdi:play-circle" class="chat-panel__exec-sep-icon" />
-              {/if}
-              {item.label}
-              <span class="chat-panel__exec-sep-status">{item.status}</span>
-            </span>
-            <span class="chat-panel__exec-sep-line"></span>
-          </div>
-        {:else}
-          {@const message = item.message}
-          {@const index = item.msgIndex}
-          {#if isInterruptMessage(message)}
-            {@const interrupt = getInterruptForMessage(message)}
-            {#if interrupt}
-              <InterruptBubble
-                {interrupt}
-                showTimestamp={showTimestamps}
-                onResolved={onInterruptResolved}
-              />
-            {/if}
-          {:else}
-            <MessageBubble
-              {message}
+      <!-- Messages -->
+      {#each displayMessages as message, index (message.id)}
+        {#if isInterruptMessage(message)}
+          {@const interrupt = getInterruptForMessage(message)}
+          {#if interrupt}
+            <InterruptBubble
+              {interrupt}
               showTimestamp={showTimestamps}
-              isLast={index === displayMessages.length - 1}
-              {enableMarkdown}
-              {compactSystemMessages}
+              onResolved={onInterruptResolved}
             />
           {/if}
+        {:else}
+          <MessageBubble
+            {message}
+            showTimestamp={showTimestamps}
+            isLast={index === displayMessages.length - 1}
+            {enableMarkdown}
+            {compactSystemMessages}
+          />
         {/if}
       {/each}
 
@@ -670,7 +520,7 @@
           </div>
         {/if}
 
-        {#if getSessionStatus() === 'running' || getIsExecuting()}
+        {#if getIsExecuting()}
           <button
             type="button"
             class="chat-panel__stop-btn"
@@ -685,7 +535,7 @@
             type="button"
             class="chat-panel__send-btn"
             onclick={handleSend}
-            disabled={!inputValue.trim()}
+            disabled={!inputValue.trim() || !getCanSendMessage()}
             title={actions.sendTitle}
           >
             {actions.send}
@@ -716,57 +566,6 @@
     background-color: var(--fd-background);
   }
 
-  /* Execution separator */
-  .chat-panel__exec-sep {
-    display: flex;
-    align-items: center;
-    gap: var(--fd-space-sm);
-    padding: var(--fd-space-md) var(--fd-space-3xl);
-    margin: var(--fd-space-sm) 0;
-  }
-
-  .chat-panel__exec-sep-line {
-    flex: 1;
-    height: 1px;
-    background-color: var(--fd-border);
-  }
-
-  .chat-panel__exec-sep-label {
-    display: flex;
-    align-items: center;
-    gap: var(--fd-space-3xs);
-    font-size: var(--fd-text-xs);
-    font-weight: 600;
-    white-space: nowrap;
-    color: var(--fd-muted-foreground);
-  }
-
-  :global(.chat-panel__exec-sep-icon) {
-    font-size: 0.875rem;
-  }
-
-  .chat-panel__exec-sep--completed .chat-panel__exec-sep-label {
-    color: var(--fd-success, #16a34a);
-  }
-
-  .chat-panel__exec-sep--completed .chat-panel__exec-sep-line {
-    background-color: var(--fd-success-muted, rgba(22, 163, 74, 0.2));
-  }
-
-  .chat-panel__exec-sep--failed .chat-panel__exec-sep-label {
-    color: var(--fd-error);
-  }
-
-  .chat-panel__exec-sep--failed .chat-panel__exec-sep-line {
-    background-color: var(--fd-error-muted);
-  }
-
-  .chat-panel__exec-sep-status {
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    opacity: 0.8;
-    font-size: var(--fd-text-2xs);
-  }
 
   /* Messages Container - Scrollable area that takes remaining space */
   .chat-panel__messages {
@@ -774,7 +573,6 @@
     min-height: 0; /* Critical: allows overflow to work in flex container */
     overflow-y: auto;
     padding: var(--fd-space-3xl);
-    scroll-behavior: smooth;
   }
 
   /* Welcome State */

package/dist/components/playground/ExecutionList.svelte

@@ -11,10 +11,6 @@
 
   let { executions, activeExecutionId, latestExecutionId, onSelect }: Props = $props();
 
-  function label(index: number): string {
-    return `Run #${index + 1}`;
-  }
-
   function statusIcon(status: PlaygroundExecution['status']): string {
     if (status === 'completed') return 'mdi:check-circle';
     if (status === 'failed') return 'mdi:alert-circle';
@@ -23,7 +19,7 @@
 </script>
 
 <div class="execution-list">
-  {#each executions as execution, i (execution.id)}
+  {#each executions as execution (execution.id)}
     <div
       class="execution-list__item"
       class:execution-list__item--active={execution.id === activeExecutionId}
@@ -43,7 +39,7 @@
           class="execution-list__status-icon execution-list__status-icon--{execution.status}"
         />
       {/if}
-      <span class="execution-list__label">{label(i)}</span>
+      <span class="execution-list__label">{execution.id}</span>
       {#if execution.id === latestExecutionId}
         <span class="execution-list__badge">latest</span>
       {/if}

package/dist/components/playground/MessageBubble.svelte

@@ -153,8 +153,17 @@
 
 {#if useCompactMode}
   <!-- Compact system message: minimal inline text without bubble -->
-  <div class="system-notice" class:system-notice--last={isLast}>
-    <Icon icon="mdi:information-outline" class="system-notice__icon" />
+  <div
+    class="system-notice"
+    class:system-notice--last={isLast}
+    class:system-notice--warning={message.metadata?.level === 'warning'}
+    class:system-notice--error={message.metadata?.level === 'error'}
+    class:system-notice--debug={message.metadata?.level === 'debug'}
+  >
+    <Icon icon={getLogLevelIcon()} class="system-notice__icon" />
+    {#if message.metadata?.source}
+      <span class="system-notice__source">{message.metadata.source}</span>
+    {/if}
     <span class="system-notice__text">{message.content}</span>
     {#if showTimestamp}
       <span class="system-notice__timestamp">{formatTimestamp(message.timestamp)}</span>
@@ -172,6 +181,9 @@
       <Icon icon={getLogLevelIcon()} />
     </div>
     <div class="log-row__body">
+      {#if message.metadata?.source}
+        <span class="log-row__source">{message.metadata.source}</span>
+      {/if}
       <span class="log-row__node">{message.metadata?.nodeLabel ?? message.nodeId ?? 'log'}</span>
       <span class="log-row__text">{message.content}</span>
     </div>
@@ -578,7 +590,7 @@
 
   .log-row {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--fd-space-sm);
     padding: 0.1875rem var(--fd-space-xl);
     border-left: 2px solid var(--fd-info);
@@ -636,6 +648,20 @@
     overflow: hidden;
   }
 
+  .log-row__source {
+    flex-shrink: 0;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--fd-muted-foreground);
+    opacity: 0.6;
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: 0 0.25rem;
+    line-height: 1.4;
+  }
+
   .log-row__node {
     flex-shrink: 0;
     font-weight: 600;
@@ -688,11 +714,42 @@
     color: var(--fd-border-strong);
   }
 
-  .system-notice__text {
+  .system-notice__source {
+    flex-shrink: 0;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
     color: var(--fd-muted-foreground);
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: 0 0.25rem;
+    line-height: 1.4;
+  }
+
+  .system-notice__text {
     line-height: var(--fd-leading-tight);
   }
 
+  .system-notice--warning {
+    color: var(--fd-warning);
+  }
+  .system-notice--warning :global(.system-notice__icon) {
+    color: var(--fd-warning);
+  }
+
+  .system-notice--error {
+    color: var(--fd-error);
+  }
+  .system-notice--error :global(.system-notice__icon) {
+    color: var(--fd-error);
+  }
+
+  .system-notice--debug {
+    color: var(--fd-border-strong);
+    opacity: 0.6;
+  }
+
   .system-notice__timestamp {
     flex-shrink: 0;
     font-size: 0.625rem;

package/dist/components/playground/PipelinePanel.svelte

@@ -10,13 +10,14 @@
     workflow: Workflow;
     endpointConfig: EndpointConfig;
     isPinned: boolean;
-    runLabel?: string;
     /** All executions for the current session, oldest-first */
     executions?: PlaygroundExecution[];
     /** ID of the most-recent execution */
     latestExecutionId?: string | null;
     /** Called with an execution ID to pin it, or null to follow latest */
     onSelectExecution?: (id: string | null) => void;
+    /** Increments when new messages arrive — forwarded to PipelineStatus for immediate refresh */
+    refreshTrigger?: number;
   }
 
   let {
@@ -24,10 +25,10 @@
     workflow,
     endpointConfig,
     isPinned,
-    runLabel,
     executions = [],
     latestExecutionId = null,
     onSelectExecution,
+    refreshTrigger = 0,
   }: Props = $props();
 
   let runDropdownOpen = $state(false);
@@ -74,14 +75,13 @@
           onclick={() => (runDropdownOpen = !runDropdownOpen)}
           title="Switch run"
         >
-          <span class="pipeline-panel__run-chip-label">{runLabel ?? 'Run'}</span>
+          <span class="pipeline-panel__run-chip-label">{pipelineId ?? 'Run'}</span>
           <Icon icon={runDropdownOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'} class="pipeline-panel__run-chip-chevron" />
         </button>
 
         {#if runDropdownOpen}
           <div class="pipeline-panel__run-popover">
-            {#each [...executions].reverse() as exec, i (exec.id)}
-              {@const index = executions.length - i}
+            {#each [...executions].reverse() as exec (exec.id)}
               {@const isActive = pipelineId === exec.id}
               <button
                 type="button"
@@ -96,7 +96,7 @@
                   icon={statusIcon(exec.status)}
                   class="pipeline-panel__run-status {statusClass(exec.status)}"
                 />
-                <span>Run #{index}</span>
+                <span class="pipeline-panel__run-id">{exec.id}</span>
                 {#if isActive}
                   <Icon icon="mdi:check" class="pipeline-panel__run-popover-check" />
                 {/if}
@@ -134,7 +134,7 @@
   {#if pipelineId}
     {#key pipelineId}
       <div class="pipeline-panel__content">
-        <PipelineStatus {pipelineId} {workflow} {endpointConfig} {runLabel} isEmbedded={true} />
+        <PipelineStatus {pipelineId} {workflow} {endpointConfig} runLabel={pipelineId ?? undefined} {refreshTrigger} isEmbedded={true} />
       </div>
     {/key}
   {:else}
@@ -277,6 +277,16 @@
     font-weight: 500;
   }
 
+  .pipeline-panel__run-id {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--fd-font-mono, monospace);
+    font-size: var(--fd-text-xs);
+  }
+
   :global(.pipeline-panel__run-popover-check) {
     color: var(--fd-primary) !important;
     margin-left: auto;