@flowdrop/flowdrop 1.8.1 → 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

@@ -21,6 +21,11 @@
     apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
+    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;
@@ -32,9 +37,13 @@
     ) => void;
   }
 
-  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady }: 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 =
@@ -213,8 +222,9 @@
     };
   });
 
-  // Send pipeline breadcrumbs to layout when they change
+  // Send pipeline breadcrumbs to layout when they change (skip when embedded in playground)
   $effect(() => {
+    if (isEmbedded) return;
     if (pipelineStatus && pipelineId && workflow) {
       const sp = m().status.pipeline;
       const breadcrumbs = [
@@ -239,7 +249,9 @@
           icon: 'mdi:source-branch'
         },
         {
-          label: sp.pipelineCrumb({ id: pipelineId, status: pipelineStatus }),
+          label: runLabel
+            ? `${runLabel} – ${pipelineStatus}`
+            : sp.pipelineCrumb({ id: pipelineId, status: pipelineStatus }),
           icon: 'mdi:play-circle'
         }
       ];
@@ -279,13 +291,23 @@
 
   // 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">
+<div class="pipeline-status-container" class:pipeline-status-container--embedded={isEmbedded}>
   <!-- Workflow Visualization using App component -->
   <App
     {workflow}
-    height="100vh"
+    height={isEmbedded ? '100%' : '100vh'}
     width="100%"
     showNavbar={false}
     disableSidebar={true}
@@ -310,8 +332,9 @@
     background: var(--fd-layout-background, var(--fd-muted));
   }
 
-  /* Dark mode override */
-  :global([data-theme='dark']) .pipeline-status-container {
-    background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
+  .pipeline-status-container--embedded {
+    height: 100%;
+    background: var(--fd-muted);
+    --fd-layout-background: var(--fd-muted);
   }
 </style>

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

@@ -7,6 +7,11 @@ interface Props {
     apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
+    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/chat/AIChatPanel.svelte

@@ -191,10 +191,22 @@
     const msg = displayMessages[messageIndex];
     if (!msg?.commandPreview) return;
 
-    // Capture pre-existing parse errors before execution. If the LLM produced
-    // a malformed batch (e.g. unclosed """), retrying tends to reproduce the
-    // same shape and just locks the input behind isLoading for the cascade.
-    const hadParseErrors = msg.commandPreview.some((c) => c.status === 'error');
+    // Refuse to run the batch if any command failed to parse. A corrupted batch
+    // (e.g. multiline set without """) causes partial execution and can hang the
+    // app — rejecting the whole batch is safer than executing the healthy subset.
+    const parseErrorCount = msg.commandPreview.filter((c) => c.status === 'error').length;
+    if (parseErrorCount > 0) {
+      for (const cmd of msg.commandPreview) {
+        if (cmd.status === 'pending') {
+          cmd.status = 'error';
+          cmd.result = 'Batch refused: fix parse errors before executing';
+        }
+      }
+      appendErrorToHistory(
+        `Batch was not executed: ${parseErrorCount} command${parseErrorCount > 1 ? 's have' : ' has'} parse errors. Dismiss this batch and ask the AI to provide corrected commands.`
+      );
+      return;
+    }
 
     const context = getCommandContext();
     if (!context) {
@@ -277,7 +289,6 @@
     }
 
     if (
-      !hadParseErrors &&
       getBehaviorSettings().chatAutoRetry &&
       workflowId &&
       autoRetryCount < MAX_AUTO_RETRIES

package/dist/components/playground/ChatPanel.svelte

@@ -22,6 +22,7 @@
     getMessages,
     getChatMessages,
     getIsExecuting,
+    getCanSendMessage,
     getSessionStatus,
     getCurrentSession
   } from '../../stores/playgroundStore.svelte.js';
@@ -74,6 +75,8 @@
      * @default true
      */
     compactSystemMessages?: boolean;
+    /** Whether log messages are visible — bindable so parent can host the toggle */
+    showLogs?: boolean;
   }
 
   let {
@@ -88,7 +91,8 @@
     showChatInput = true,
     showRunButton = true,
     predefinedMessage,
-    compactSystemMessages = true
+    compactSystemMessages = true,
+    showLogs = $bindable(true)
   }: Props = $props();
 
   // Hoist playground branches — states/actions are read 8+ times each in the
@@ -125,36 +129,21 @@
   let inputField = $state<HTMLTextAreaElement>();
 
   /**
-   * Filter messages based on showLogsInline setting
+   * Filter messages based on local showLogs toggle.
+   * The showLogsInline prop is still honoured as the initial hint when explicitly set to false.
    */
-  const displayMessages = $derived(showLogsInline ? getMessages() : getChatMessages());
+  const displayMessages = $derived(showLogs ? getMessages() : getChatMessages());
 
-  /**
-   * 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;
@@ -249,7 +238,7 @@
    */
   function handleSend(): void {
     const trimmedValue = inputValue.trim();
-    if (!trimmedValue || getIsExecuting()) {
+    if (!trimmedValue || !getCanSendMessage()) {
       return;
     }
 
@@ -332,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;
@@ -391,50 +347,17 @@
     });
   });
 
-  /**
-   * Track previous executing state to detect when execution completes
-   */
-  let wasExecuting = $state(false);
-
-  /**
-   * Auto-focus input when execution completes or session becomes ready
-   */
-  $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();
-      });
-    }
-  });
+  let wasExecuting = false;
 
   /**
-   * Focus input when a new session is created/loaded
+   * Auto-focus input when execution completes
    */
   $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;
   });
 
   /**
@@ -450,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">
@@ -537,7 +460,6 @@
       <!-- Messages -->
       {#each displayMessages as message, index (message.id)}
         {#if isInterruptMessage(message)}
-          <!-- Render interrupt inline -->
           {@const interrupt = getInterruptForMessage(message)}
           {#if interrupt}
             <InterruptBubble
@@ -598,7 +520,7 @@
           </div>
         {/if}
 
-        {#if getSessionStatus() === 'running' || getIsExecuting()}
+        {#if getIsExecuting()}
           <button
             type="button"
             class="chat-panel__stop-btn"
@@ -613,7 +535,7 @@
             type="button"
             class="chat-panel__send-btn"
             onclick={handleSend}
-            disabled={!inputValue.trim()}
+            disabled={!inputValue.trim() || !getCanSendMessage()}
             title={actions.sendTitle}
           >
             {actions.send}
@@ -644,13 +566,13 @@
     background-color: var(--fd-background);
   }
 
+
   /* Messages Container - Scrollable area that takes remaining space */
   .chat-panel__messages {
     flex: 1;
     min-height: 0; /* Critical: allows overflow to work in flex container */
     overflow-y: auto;
     padding: var(--fd-space-3xl);
-    scroll-behavior: smooth;
   }
 
   /* Welcome State */
@@ -757,7 +679,7 @@
     display: flex;
     align-items: flex-end;
     gap: var(--fd-space-md);
-    max-width: 800px;
+    max-width: 760px;
     margin: 0 auto;
   }
 
@@ -822,8 +744,9 @@
   }
 
   .chat-panel__send-btn:disabled {
-    background-color: var(--fd-border);
-    color: var(--fd-muted-foreground);
+    background-color: var(--fd-foreground);
+    color: var(--fd-background);
+    opacity: 0.3;
     cursor: not-allowed;
   }
 
@@ -890,7 +813,7 @@
     border-radius: var(--fd-radius-lg);
     color: var(--fd-muted-foreground);
     font-size: var(--fd-text-sm);
-    max-width: 800px;
+    max-width: 760px;
     margin: 0 auto;
   }
 

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

@@ -40,7 +40,9 @@ interface Props {
      * @default true
      */
     compactSystemMessages?: boolean;
+    /** Whether log messages are visible — bindable so parent can host the toggle */
+    showLogs?: boolean;
 }
-declare const ChatPanel: import("svelte").Component<Props, {}, "">;
+declare const ChatPanel: import("svelte").Component<Props, {}, "showLogs">;
 type ChatPanel = ReturnType<typeof ChatPanel>;
 export default ChatPanel;

package/dist/components/playground/ExecutionList.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import type { PlaygroundExecution } from '../../types/playground.js';
+
+  interface Props {
+    executions: PlaygroundExecution[];
+    activeExecutionId: string | null;
+    latestExecutionId: string | null;
+    onSelect: (executionId: string) => void;
+  }
+
+  let { executions, activeExecutionId, latestExecutionId, onSelect }: Props = $props();
+
+  function statusIcon(status: PlaygroundExecution['status']): string {
+    if (status === 'completed') return 'mdi:check-circle';
+    if (status === 'failed') return 'mdi:alert-circle';
+    return '';
+  }
+</script>
+
+<div class="execution-list">
+  {#each executions as execution (execution.id)}
+    <div
+      class="execution-list__item"
+      class:execution-list__item--active={execution.id === activeExecutionId}
+      class:execution-list__item--running={execution.status === 'running'}
+      class:execution-list__item--completed={execution.status === 'completed'}
+      class:execution-list__item--failed={execution.status === 'failed'}
+      role="button"
+      tabindex="0"
+      onclick={() => onSelect(execution.id)}
+      onkeydown={(e) => e.key === 'Enter' && onSelect(execution.id)}
+    >
+      {#if execution.status === 'running'}
+        <span class="execution-list__running-dot" aria-hidden="true"></span>
+      {:else if statusIcon(execution.status)}
+        <Icon
+          icon={statusIcon(execution.status)}
+          class="execution-list__status-icon execution-list__status-icon--{execution.status}"
+        />
+      {/if}
+      <span class="execution-list__label">{execution.id}</span>
+      {#if execution.id === latestExecutionId}
+        <span class="execution-list__badge">latest</span>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  /* Match the visual weight of .playground__session items */
+  .execution-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fd-space-3xs);
+    padding: 0 var(--fd-space-sm);
+  }
+
+  .execution-list__item {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    border-radius: var(--fd-radius-md);
+    border-left: 3px solid transparent;
+    cursor: pointer;
+    font-size: var(--fd-text-sm);
+    color: var(--fd-foreground);
+    transition:
+      background-color var(--fd-transition-fast),
+      border-left-color var(--fd-transition-fast);
+    user-select: none;
+  }
+
+  .execution-list__item:hover {
+    background-color: var(--fd-muted);
+    border-left-color: var(--fd-border);
+  }
+
+  .execution-list__item--active {
+    background-color: var(--fd-primary-muted);
+    border-left-color: var(--fd-primary);
+  }
+
+  .execution-list__item--active:hover {
+    background-color: var(--fd-primary-muted);
+    border-left-color: var(--fd-primary);
+  }
+
+  .execution-list__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .execution-list__item--active .execution-list__label {
+    color: var(--fd-primary);
+    font-weight: 500;
+  }
+
+  .execution-list__badge {
+    font-size: var(--fd-text-2xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--fd-success);
+    flex-shrink: 0;
+  }
+
+  .execution-list__running-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--fd-success);
+    flex-shrink: 0;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  :global(.execution-list__status-icon) {
+    flex-shrink: 0;
+    font-size: var(--fd-text-sm);
+  }
+
+  :global(.execution-list__status-icon--completed) {
+    color: var(--fd-success, #22c55e);
+  }
+
+  :global(.execution-list__status-icon--failed) {
+    color: var(--fd-error, #ef4444);
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { PlaygroundExecution } from '../../types/playground.js';
+interface Props {
+    executions: PlaygroundExecution[];
+    activeExecutionId: string | null;
+    latestExecutionId: string | null;
+    onSelect: (executionId: string) => void;
+}
+declare const ExecutionList: import("svelte").Component<Props, {}, "">;
+type ExecutionList = ReturnType<typeof ExecutionList>;
+export default ExecutionList;