@flowdrop/flowdrop 1.11.0 → 1.12.0

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

@@ -1,29 +1,16 @@
 import type { Workflow } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundMode, PlaygroundConfig } from '../../types/playground.js';
-/**
- * Component props
- */
 interface Props {
-    /** Target workflow ID */
     workflowId: string;
-    /** Pre-loaded workflow (optional, will be fetched if not provided) */
     workflow?: Workflow;
-    /** Display mode: embedded (panel) or standalone (page) */
     mode?: PlaygroundMode;
-    /** Resume a specific session */
     initialSessionId?: string;
-    /** API endpoint configuration */
     endpointConfig?: EndpointConfig;
-    /** Playground configuration options */
     config?: PlaygroundConfig;
-    /** Callback when playground is closed (for embedded mode) */
     onClose?: () => void;
-    /** Callback to toggle the pipeline panel (if undefined, toggle button is hidden) */
     onTogglePanel?: () => void;
-    /** Whether the pipeline panel is currently open (for toggle button active state) */
     isPipelinePanelOpen?: boolean;
-    /** When provided, session switches and creation navigate to a URL instead of mutating store state */
     onSessionNavigate?: (sessionId: string) => void;
 }
 declare const Playground: import("svelte").Component<Props, {}, "">;

package/dist/components/playground/PlaygroundStudio.svelte

@@ -1,48 +1,5 @@
-<!--
-  PlaygroundStudio Component
-
-  Drop-in embeddable split-pane layout: PipelinePanel (left, resizable) + Playground
-  chat (right). Provides the same integrated experience as the FlowDrop demo app with a
-  single import and zero layout glue code.
-
-  @example Basic usage — workflow fetched automatically
-  ```svelte
-  <script>
-    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
-    import '@flowdrop/flowdrop/styles';
-  </script>
-
-  <PlaygroundStudio
-    workflowId="wf-123"
-    endpointConfig={createEndpointConfig('/api/flowdrop')}
-  />
-  ```
-
-  @example With pre-loaded workflow and URL-based session routing
-  ```svelte
-  <script>
-    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
-
-    let { data } = $props();          // workflow from server load
-    let sessionId = $derived($page.params.sessionId);
-
-    function handleSessionNavigate(id) {
-      goto(`/playground/${id}`);
-    }
-  </script>
-
-  <PlaygroundStudio
-    workflowId={data.workflow.id}
-    workflow={data.workflow}
-    endpointConfig={createEndpointConfig('/api/flowdrop')}
-    initialSessionId={sessionId}
-    onSessionNavigate={handleSessionNavigate}
-  />
-  ```
--->
-
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import Icon from '@iconify/svelte';
   import Playground from './Playground.svelte';
   import PipelinePanel from './PipelinePanel.svelte';
@@ -57,7 +14,7 @@
   } from '../../stores/playgroundStore.svelte.js';
   import { setEndpointConfig, workflowApi } from '../../services/api.js';
   import { logger } from '../../utils/logger.js';
-  import type { Workflow } from '../../types/index.js';
+  import type { Workflow, PipelineViewDef } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
 
@@ -84,6 +41,8 @@
     onSessionNavigate?: (sessionId: string) => void;
     /** Called when the playground is closed (embedded / modal mode) */
     onClose?: () => void;
+    /** Additional pipeline views injected by the consumer */
+    extraPipelineViews?: PipelineViewDef[];
   }
 
   let {
@@ -98,19 +57,18 @@
     initialPipelineWidth = 500,
     onSessionNavigate,
     onClose,
+    extraPipelineViews = [],
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally
   let resolvedWorkflow = $state<Workflow | null>(workflowProp ?? null);
-  // svelte-ignore state_referenced_locally
   let workflowLoading = $state(workflowProp === undefined);
   let workflowError = $state<string | null>(null);
 
   let splitEl = $state<HTMLElement | null>(null);
-  // svelte-ignore state_referenced_locally
   let pipelineWidth = $state(initialPipelineWidth);
   let isResizing = $state(false);
   let containerWidth = $state(0);
+  let dragContainerLeft = 0;
 
   $effect(() => {
     if (!splitEl) return;
@@ -121,6 +79,12 @@
     return () => observer.disconnect();
   });
 
+  $effect(() => {
+    if (containerWidth > 0) {
+      pipelineWidth = clampPipelineWidth(untrack(() => pipelineWidth));
+    }
+  });
+
   onMount(() => {
     pipelinePanelActions.init();
     if (initialPipelineOpen !== undefined) {
@@ -153,23 +117,36 @@
     }
   }
 
+  function clampPipelineWidth(w: number): number {
+    if (!containerWidth) return Math.max(w, 0);
+    return Math.min(Math.max(w, containerWidth - minChatWidth), containerWidth * 0.75);
+  }
+
   function handleResizerPointerDown(e: PointerEvent) {
+    if (splitEl) dragContainerLeft = splitEl.getBoundingClientRect().left;
     isResizing = true;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   }
 
   function handleResizerPointerMove(e: PointerEvent) {
-    if (!isResizing || !splitEl) return;
-    const rect = splitEl.getBoundingClientRect();
-    pipelineWidth = Math.min(
-      Math.max(e.clientX - rect.left, rect.width - minChatWidth),
-      rect.width * 0.75
-    );
+    if (!isResizing) return;
+    pipelineWidth = clampPipelineWidth(e.clientX - dragContainerLeft);
   }
 
   function handleResizerPointerUp() {
     isResizing = false;
   }
+
+  function handleResizerKeyDown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 50 : 20;
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      pipelineWidth = clampPipelineWidth(pipelineWidth - step);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      pipelineWidth = clampPipelineWidth(pipelineWidth + step);
+    }
+  }
 </script>
 
 <div class="playground-studio" class:playground-studio--resizing={isResizing} style="--playground-studio-min-chat-width: {minChatWidth}px">
@@ -188,10 +165,10 @@
           latestExecutionId={getLatestExecutionId()}
           onSelectExecution={(id) => playgroundActions.pinExecution(id)}
           refreshTrigger={getPipelineRefreshTrigger()}
+          extraViews={extraPipelineViews}
         />
       </div>
 
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <div
         class="playground-studio__resizer"
         class:playground-studio__resizer--active={isResizing}
@@ -200,11 +177,13 @@
         aria-valuenow={Math.round(pipelineWidth)}
         aria-valuemin={0}
         aria-valuemax={Math.round(containerWidth * 0.75)}
+        aria-label="Resize pipeline panel"
         tabindex="0"
         onpointerdown={handleResizerPointerDown}
         onpointermove={handleResizerPointerMove}
         onpointerup={handleResizerPointerUp}
         onpointercancel={handleResizerPointerUp}
+        onkeydown={handleResizerKeyDown}
       >
         <div class="playground-studio__resizer-handle"></div>
       </div>
@@ -271,10 +250,8 @@
     overflow: hidden;
   }
 
-  /* Pipeline pane — explicit width set via inline style */
+  /* Pipeline pane — explicit width driven by JS; clamping keeps it in bounds */
   .playground-studio__pipeline {
-    min-width: calc(100% - var(--playground-studio-min-chat-width));
-    max-width: 75%;
     overflow: hidden;
     flex-shrink: 0;
   }
@@ -351,9 +328,6 @@
   }
 
   @keyframes studio-spin {
-    from {
-      transform: rotate(0deg);
-    }
     to {
       transform: rotate(360deg);
     }

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

@@ -1,4 +1,4 @@
-import type { Workflow } from '../../types/index.js';
+import type { Workflow, PipelineViewDef } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
 interface Props {
@@ -24,6 +24,8 @@ interface Props {
     onSessionNavigate?: (sessionId: string) => void;
     /** Called when the playground is closed (embedded / modal mode) */
     onClose?: () => void;
+    /** Additional pipeline views injected by the consumer */
+    extraPipelineViews?: PipelineViewDef[];
 }
 declare const PlaygroundStudio: import("svelte").Component<Props, {}, "">;
 type PlaygroundStudio = ReturnType<typeof PlaygroundStudio>;

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

@@ -0,0 +1,22 @@
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { NodeExecutionStatus, KanbanColumnDef } from '../../types/index.js';
+export type NodeStatus = NodeExecutionStatus;
+export interface NodeStatusData {
+    status: string;
+    last_executed?: string | null;
+    execution_time?: number | null;
+    error?: string | null;
+}
+export declare function resolveStatus(raw: NodeStatusData | undefined): NodeStatus;
+/**
+ * Creates a reactive pipeline data fetcher.
+ * `endpointConfig` is used once to construct the API client — it must be stable.
+ * `getPipelineId` is called on every fetch so pipeline ID changes are picked up.
+ */
+export declare function createPipelineDataFetcher(getPipelineId: () => string, endpointConfig: EndpointConfig): {
+    readonly nodeStatusMap: Record<string, NodeStatusData>;
+    readonly kanbanConfig: KanbanColumnDef[] | null;
+    readonly isLoading: boolean;
+    readonly isError: boolean;
+    fetchData: () => Promise<void>;
+};

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

@@ -0,0 +1,77 @@
+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'
+]);
+export function resolveStatus(raw) {
+    if (!raw)
+        return 'pending';
+    const s = raw.status || 'pending';
+    if (!KNOWN_STATUSES.has(s)) {
+        logger.warn(`[FlowDrop] Unknown node status from server: "${s}" — falling back to "pending"`);
+        return 'pending';
+    }
+    return s;
+}
+/**
+ * Creates a reactive pipeline data fetcher.
+ * `endpointConfig` is used once to construct the API client — it must be stable.
+ * `getPipelineId` is called on every fetch so pipeline ID changes are picked up.
+ */
+export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
+    const client = new EnhancedFlowDropApiClient(endpointConfig);
+    let nodeStatusMap = $state({});
+    let kanbanConfig = $state(null);
+    let isLoading = $state(false);
+    let isError = $state(false);
+    async function fetchData() {
+        try {
+            isLoading = true;
+            isError = false;
+            const data = await client.getPipelineData(getPipelineId());
+            const map = {};
+            for (const [nodeId, info] of Object.entries(data.node_statuses)) {
+                map[nodeId] = {
+                    status: info.status,
+                    last_executed: info.last_executed,
+                    execution_time: info.execution_time,
+                    error: info.error,
+                };
+            }
+            nodeStatusMap = map;
+            if (data.kanban_config?.columns) {
+                // Server sends statuses as string[]; trust the server and cast at this
+                // boundary. resolveStatus() handles unknown values at read time.
+                kanbanConfig = data.kanban_config.columns.map((col) => ({
+                    key: col.key,
+                    label: col.label,
+                    statuses: col.statuses,
+                    icon: col.icon,
+                    color: col.color,
+                }));
+            }
+        }
+        catch {
+            isError = true;
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    return {
+        get nodeStatusMap() {
+            return nodeStatusMap;
+        },
+        get kanbanConfig() {
+            return kanbanConfig;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get isError() {
+            return isError;
+        },
+        fetchData
+    };
+}

package/dist/messages/defaults.d.ts

@@ -328,6 +328,30 @@ export declare const defaultMessages: {
                 n: number;
             }) => string;
         };
+        readonly executionConsole: {
+            readonly header: "Execution";
+            readonly noExecutionTitle: "No execution yet";
+            readonly noExecutionText: "Create or select a session below, then run your workflow to see execution output here.";
+            readonly readyTitle: "Ready to run";
+            readonly readyText: "Use the controls below to start the workflow. Output and interactive prompts will appear here.";
+            readonly newSession: "New session";
+        };
+        readonly controlPanel: {
+            readonly sessionsLabel: "Sessions";
+            readonly noSession: "No session";
+            readonly switchSession: "Switch session";
+            readonly newSession: "New session";
+            readonly pipeline: "Pipeline";
+            readonly showPipeline: "Show pipeline";
+            readonly hidePipeline: "Hide pipeline";
+            readonly refresh: "Refresh";
+            readonly refreshTitle: "Refresh status";
+            readonly logs: "Logs";
+            readonly showLogs: "Show log messages";
+            readonly hideLogs: "Hide log messages";
+            readonly deleteSession: "Delete session";
+            readonly messageStreamLabel: "Execution output";
+        };
     };
     readonly nodes: {
         readonly notes: {

package/dist/messages/defaults.js

@@ -300,6 +300,30 @@ export const defaultMessages = {
             minutesAgo: ({ n }) => `${n}m ago`,
             hoursAgo: ({ n }) => `${n}h ago`,
             daysAgo: ({ n }) => `${n}d ago`
+        },
+        executionConsole: {
+            header: 'Execution',
+            noExecutionTitle: 'No execution yet',
+            noExecutionText: 'Create or select a session below, then run your workflow to see execution output here.',
+            readyTitle: 'Ready to run',
+            readyText: 'Use the controls below to start the workflow. Output and interactive prompts will appear here.',
+            newSession: 'New session'
+        },
+        controlPanel: {
+            sessionsLabel: 'Sessions',
+            noSession: 'No session',
+            switchSession: 'Switch session',
+            newSession: 'New session',
+            pipeline: 'Pipeline',
+            showPipeline: 'Show pipeline',
+            hidePipeline: 'Hide pipeline',
+            refresh: 'Refresh',
+            refreshTitle: 'Refresh status',
+            logs: 'Logs',
+            showLogs: 'Show log messages',
+            hideLogs: 'Hide log messages',
+            deleteSession: 'Delete session',
+            messageStreamLabel: 'Execution output'
         }
     },
     nodes: {

package/dist/playground/index.d.ts

@@ -115,6 +115,10 @@ export { default as PlaygroundStudio } from '../components/playground/Playground
 export { default as PlaygroundApp } from '../components/playground/PlaygroundApp.svelte';
 export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
+export { default as MessageStream } from '../components/playground/MessageStream.svelte';
+export { default as ChatInput } from '../components/playground/ChatInput.svelte';
+export { default as ExecutionConsole } from '../components/playground/ExecutionConsole.svelte';
+export { default as ControlPanel } from '../components/playground/ControlPanel.svelte';
 export { default as PipelinePanel } from '../components/playground/PipelinePanel.svelte';
 export { default as ExecutionList } from '../components/playground/ExecutionList.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
@@ -124,7 +128,7 @@ export { default as MessageBubble } from '../components/playground/MessageBubble
 export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt, ReviewPrompt } from '../components/interrupt/index.js';
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
 export { InterruptService, interruptService } from '../services/interruptService.js';
-export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
+export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, getShowLogs, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
 export { getPipelinePanelOpen, pipelinePanelActions } from '../stores/pipelinePanelStore.svelte.js';
 export type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundMessageRequest, PlaygroundMessagesResult, PlaygroundConfig, PlaygroundMode, PlaygroundSessionStatus, PlaygroundMessageRole, PlaygroundMessageLevel, PlaygroundMessageMetadata, PlaygroundApiResponse, PlaygroundSessionsResponse, PlaygroundSessionResponse, PlaygroundMessageResponse, PlaygroundMessagesApiResponse, PlaygroundExecution } from '../types/playground.js';
 export { isChatInputNode, CHAT_INPUT_PATTERNS, defaultShouldStopPolling, defaultIsTerminalStatus, DEFAULT_STOP_POLLING_STATUSES, DEFAULT_TERMINAL_STATUSES } from '../types/playground.js';
@@ -133,4 +137,5 @@ export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, def
 export { getInterruptsMap, getPendingInterruptIds, getPendingInterrupts, getPendingInterruptCount, getResolvedInterrupts, getIsAnySubmitting, interruptActions, getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId, interruptHasError } from '../stores/interruptStore.svelte.js';
 export type { InterruptWithState } from '../stores/interruptStore.svelte.js';
 export { mountPlayground, unmountPlayground, mountPlaygroundStudio, mountPlaygroundApp, type PlaygroundMountOptions, type PlaygroundStudioMountOptions, type PlaygroundAppMountOptions, type MountedPlayground } from './mount.js';
+export type { PipelineViewDef, PipelineViewProps } from '../types/index.js';
 export { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl, type EndpointConfig } from '../config/endpoints.js';

package/dist/playground/index.js

@@ -118,6 +118,10 @@ export { default as PlaygroundStudio } from '../components/playground/Playground
 export { default as PlaygroundApp } from '../components/playground/PlaygroundApp.svelte';
 export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
+export { default as MessageStream } from '../components/playground/MessageStream.svelte';
+export { default as ChatInput } from '../components/playground/ChatInput.svelte';
+export { default as ExecutionConsole } from '../components/playground/ExecutionConsole.svelte';
+export { default as ControlPanel } from '../components/playground/ControlPanel.svelte';
 export { default as PipelinePanel } from '../components/playground/PipelinePanel.svelte';
 export { default as ExecutionList } from '../components/playground/ExecutionList.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
@@ -146,6 +150,8 @@ getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage,
 getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, 
 // Execution getters (used with PipelinePanel / PlaygroundSplit)
 getActiveExecutionId, getPinnedExecutionId, getLatestExecutionId, 
+// UI state
+getShowLogs, 
 // Actions
 playgroundActions, 
 // Server response application (single update path)

package/dist/playground/mount.d.ts

@@ -48,6 +48,7 @@ import type { EndpointConfig } from '../config/endpoints.js';
 import type { PlaygroundMode, PlaygroundConfig, PlaygroundSession, PlaygroundMessagesApiResponse, PlaygroundSessionStatus } from '../types/playground.js';
 import type { PartialSettings, SettingsCategory } from '../types/settings.js';
 import type { NavbarAction } from '../types/navbar.js';
+import type { PipelineViewDef } from '../types/index.js';
 /**
  * Mount options for Playground component
  */
@@ -216,6 +217,8 @@ export interface PlaygroundStudioMountOptions extends PlaygroundMountOptions {
     minChatWidth?: number;
     initialPipelineWidth?: number;
     onSessionNavigate?: (sessionId: string) => void;
+    /** Additional pipeline views injected into the view switcher */
+    pipelineViews?: PipelineViewDef[];
 }
 export declare function mountPlaygroundStudio(container: HTMLElement, options: PlaygroundStudioMountOptions): Promise<MountedPlayground>;
 export interface PlaygroundAppMountOptions extends Omit<PlaygroundStudioMountOptions, 'mode'> {

package/dist/playground/mount.js

@@ -225,7 +225,7 @@ export function unmountPlayground(app) {
     }
 }
 export async function mountPlaygroundStudio(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, pipelineViews } = options;
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlaygroundStudio()');
     }
@@ -253,7 +253,8 @@ export async function mountPlaygroundStudio(container, options) {
             onSessionNavigate,
             initialPipelineOpen,
             minChatWidth,
-            initialPipelineWidth
+            initialPipelineWidth,
+            extraPipelineViews: pipelineViews
         }
     });
     return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);

package/dist/stores/playgroundStore.svelte.d.ts

@@ -89,6 +89,10 @@ export declare function getActiveExecutionId(): string | null;
  * Pass to PipelinePanel's refreshTrigger prop.
  */
 export declare function getPipelineRefreshTrigger(): number;
+/**
+ * Whether log messages should be shown in the execution console
+ */
+export declare function getShowLogs(): boolean;
 /**
  * Playground store actions for modifying state
  */
@@ -183,6 +187,8 @@ export declare const playgroundActions: {
      */
     switchSession: (sessionId: string) => void;
     pinExecution(executionId: string | null): void;
+    setShowLogs(value: boolean): void;
+    toggleShowLogs(): void;
 };
 /**
  * Apply a server response to the store. All message and status updates from

package/dist/stores/playgroundStore.svelte.js

@@ -43,6 +43,8 @@ let _lastPollSequenceNumber = $state(null);
 let _pinnedExecutionId = $state(null);
 /** Incremented on every message batch that should trigger a pipeline re-fetch */
 let _pipelineRefreshTrigger = $state(0);
+/** Whether log messages are visible in the execution console */
+let _showLogs = $state(true);
 /** Latest execution ID derived from current session's executions list */
 const _latestExecutionId = $derived(_currentSession?.executions?.at(-1)?.id ?? null);
 /** Active execution: pinned if set, otherwise latest */
@@ -237,6 +239,12 @@ export function getActiveExecutionId() {
 export function getPipelineRefreshTrigger() {
     return _pipelineRefreshTrigger;
 }
+/**
+ * Whether log messages should be shown in the execution console
+ */
+export function getShowLogs() {
+    return _showLogs;
+}
 // =========================================================================
 // Helper Functions
 // =========================================================================
@@ -345,7 +353,11 @@ export const playgroundActions = {
         // so we only need to check and update the tail entry.
         // 'idle' means the run finished normally (server returns 'idle' post-completion,
         // not 'completed'), so map it to 'completed' for the execution entry.
-        const terminalExecutionStatus = status === 'failed' ? 'failed' : status === 'completed' || status === 'idle' ? 'completed' : null;
+        const terminalExecutionStatus = status === 'failed'
+            ? 'failed'
+            : status === 'completed' || status === 'idle'
+                ? 'completed'
+                : null;
         if (terminalExecutionStatus && _currentSession?.executions?.length) {
             const execs = [..._currentSession.executions];
             const last = execs[execs.length - 1];
@@ -405,6 +417,8 @@ export const playgroundActions = {
      * @param message - The message to add
      */
     addMessage: (message) => {
+        if (_messages.some(m => m.id === message.id))
+            return;
         const seq = message.sequenceNumber ?? 0;
         let lo = 0, hi = _messages.length;
         while (lo < hi) {
@@ -500,6 +514,12 @@ export const playgroundActions = {
     },
     pinExecution(executionId) {
         _pinnedExecutionId = executionId;
+    },
+    setShowLogs(value) {
+        _showLogs = value;
+    },
+    toggleShowLogs() {
+        _showLogs = !_showLogs;
     }
 };
 // =========================================================================

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * Core types for the Workflow Library
  */
+import type { Component } from 'svelte';
 import type { Node, Edge, XYPosition } from '@xyflow/svelte';
 import { ConnectionLineType } from '@xyflow/svelte';
 import type { EndpointConfig } from '../config/endpoints.js';
@@ -1168,7 +1169,32 @@ export type WorkflowsResponse = ApiResponse<Workflow[]>;
 /**
  * Node execution status enum
  */
-export type NodeExecutionStatus = 'idle' | 'pending' | 'running' | 'completed' | 'failed' | 'cancelled' | 'skipped';
+export type NodeExecutionStatus = 'idle' | 'pending' | 'running' | 'completed' | 'failed' | 'cancelled' | 'skipped' | 'paused' | 'interrupted';
+export interface KanbanColumnDef {
+    key: string;
+    label: string;
+    statuses: NodeExecutionStatus[];
+    icon?: string;
+    color?: string;
+}
+/** Props passed to every pipeline view component, built-in or custom. */
+export interface PipelineViewProps {
+    pipelineId: string | null;
+    workflow: Workflow;
+    endpointConfig: EndpointConfig;
+    refreshTrigger?: number;
+}
+/** A custom view injected into the PipelinePanel view switcher. */
+export interface PipelineViewDef {
+    /** Unique key — must not clash with built-ins: 'graph' | 'kanban' | 'table' */
+    key: string;
+    /** Label shown in the toggle button tooltip */
+    label: string;
+    /** Iconify icon name, e.g. 'mdi:chart-bar' */
+    icon: string;
+    /** Svelte component that receives PipelineViewProps */
+    component: Component<PipelineViewProps>;
+}
 /**
  * Node execution tracking information
  */
@@ -1191,7 +1217,7 @@ export interface NodeExecutionInfo {
 /**
  * Workflow execution status
  */
-export type ExecutionStatus = 'idle' | 'running' | 'completed' | 'failed' | 'cancelled';
+export type ExecutionStatus = 'idle' | 'running' | 'completed' | 'failed' | 'cancelled' | 'paused' | 'interrupted';
 /**
  * Workflow execution result
  */

package/dist/types/playground.d.ts

@@ -12,7 +12,10 @@ import type { ConfigProperty } from './index.js';
  */
 export type PlaygroundSessionStatus = 'idle' | 'running' | 'awaiting_input' | 'completed' | 'failed';
 /**
- * Statuses that stop polling by default (resource efficiency)
+ * Statuses that stop polling by default.
+ * Only truly-dormant sessions stop polling — completed/failed/awaiting_input
+ * sessions on async servers can still generate messages after the status change,
+ * so polling continues until the session is explicitly idle.
  */
 export declare const DEFAULT_STOP_POLLING_STATUSES: PlaygroundSessionStatus[];
 /**
@@ -273,7 +276,7 @@ export interface PlaygroundConfig {
     /**
      * Determines if polling should stop for a given session status.
      * Override to customize which statuses pause polling.
-     * @default defaultShouldStopPolling (stops on idle, completed, failed, awaiting_input)
+     * @default defaultShouldStopPolling (stops only on idle)
      */
     shouldStopPolling?: (status: PlaygroundSessionStatus) => boolean;
     /**

package/dist/types/playground.js

@@ -7,14 +7,12 @@
  * @module types/playground
  */
 /**
- * Statuses that stop polling by default (resource efficiency)
+ * Statuses that stop polling by default.
+ * Only truly-dormant sessions stop polling — completed/failed/awaiting_input
+ * sessions on async servers can still generate messages after the status change,
+ * so polling continues until the session is explicitly idle.
  */
-export const DEFAULT_STOP_POLLING_STATUSES = [
-    'idle',
-    'completed',
-    'failed',
-    'awaiting_input'
-];
+export const DEFAULT_STOP_POLLING_STATUSES = ['idle'];
 /**
  * Statuses that are considered terminal by default (clears isExecuting)
  */