@flowdrop/flowdrop 1.8.1 → 1.9.0

package/dist/components/PipelineStatus.svelte

@@ -21,6 +21,9 @@
     apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
+    runLabel?: string;
+    /** When true, suppresses breadcrumb and layout events (used inside playground panel) */
+    isEmbedded?: boolean;
     onActionsReady?: (
       actions: Array<{
         label: string;
@@ -32,7 +35,7 @@
     ) => void;
   }
 
-  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady }: Props =
+  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady, runLabel, isEmbedded = false }: Props =
     $props();
 
   // Initialize API client if not provided
@@ -213,8 +216,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 +243,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'
         }
       ];
@@ -281,11 +287,11 @@
   // In Svelte 5, $effect cleanup runs both on re-execution and component destroy.
 </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 +316,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,9 @@ interface Props {
     apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
+    runLabel?: string;
+    /** When true, suppresses breadcrumb and layout events (used inside playground panel) */
+    isEmbedded?: boolean;
     onActionsReady?: (actions: Array<{
         label: string;
         href: string;

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

@@ -25,6 +25,7 @@
     getSessionStatus,
     getCurrentSession
   } from '../../stores/playgroundStore.svelte.js';
+  import type { PlaygroundExecution } from '../../types/playground.js';
   import {
     getInterruptsMap,
     interruptActions,
@@ -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,9 +129,53 @@
   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());
+
+  // ---------------------------------------------------------------------------
+  // 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.
@@ -534,26 +582,50 @@
         {/if}
       </div>
     {:else}
-      <!-- Messages -->
-      {#each displayMessages as message, index (message.id)}
-        {#if isInterruptMessage(message)}
-          <!-- Render interrupt inline -->
-          {@const interrupt = getInterruptForMessage(message)}
-          {#if interrupt}
-            <InterruptBubble
-              {interrupt}
+      <!-- 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}
               showTimestamp={showTimestamps}
-              onResolved={onInterruptResolved}
+              isLast={index === displayMessages.length - 1}
+              {enableMarkdown}
+              {compactSystemMessages}
             />
           {/if}
-        {:else}
-          <MessageBubble
-            {message}
-            showTimestamp={showTimestamps}
-            isLast={index === displayMessages.length - 1}
-            {enableMarkdown}
-            {compactSystemMessages}
-          />
         {/if}
       {/each}
 
@@ -644,6 +716,58 @@
     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 {
     flex: 1;
@@ -757,7 +881,7 @@
     display: flex;
     align-items: flex-end;
     gap: var(--fd-space-md);
-    max-width: 800px;
+    max-width: 760px;
     margin: 0 auto;
   }
 
@@ -822,8 +946,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 +1015,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,142 @@
+<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 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';
+    return '';
+  }
+</script>
+
+<div class="execution-list">
+  {#each executions as execution, i (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">{label(i)}</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;