@flowdrop/flowdrop 1.11.0 → 1.13.0

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/schemas/v1/workflow.schema.json

@@ -98,6 +98,13 @@
           "type": "boolean",
           "default": false,
           "description": "Whether to allow multiple selections.\nWhen true, users can select multiple values displayed as tags.\n"
+        },
+        "params": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "Map of URL query parameter names to sibling form field names.\nWhen fetching autocomplete options, the current value of each\nreferenced sibling field is appended as a query parameter.\nWhen any dependency field changes, the autocomplete clears its\ncurrent value and invalidates the suggestion cache.\n"
         }
       },
       "required": [
@@ -453,7 +460,9 @@
         "completed",
         "failed",
         "cancelled",
-        "skipped"
+        "skipped",
+        "paused",
+        "interrupted"
       ],
       "description": "Current execution status of a node"
     },

package/dist/services/categoriesApi.d.ts

@@ -4,10 +4,11 @@
  */
 import type { CategoryDefinition } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 /**
  * Fetch category definitions from API
  */
-export declare function fetchCategories(endpointConfig: EndpointConfig): Promise<CategoryDefinition[]>;
+export declare function fetchCategories(endpointConfig: EndpointConfig, authProvider?: AuthProvider): Promise<CategoryDefinition[]>;
 /**
  * Validate category definitions structure
  */

package/dist/services/categoriesApi.js

@@ -2,17 +2,19 @@
  * Categories API Service
  * Handles fetching category definitions from the backend
  */
-import { buildEndpointUrl } from '../config/endpoints.js';
+import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
 import { DEFAULT_CATEGORIES } from '../config/defaultCategories.js';
 import { logger } from '../utils/logger.js';
 /**
  * Fetch category definitions from API
  */
-export async function fetchCategories(endpointConfig) {
+export async function fetchCategories(endpointConfig, authProvider) {
     try {
         const url = buildEndpointUrl(endpointConfig, endpointConfig.endpoints.categories);
+        const configHeaders = getEndpointHeaders(endpointConfig, 'categories');
+        const authHeaders = authProvider ? await authProvider.getAuthHeaders() : {};
         const response = await fetch(url, {
-            headers: { 'Content-Type': 'application/json' }
+            headers: { ...configHeaders, ...authHeaders }
         });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);

package/dist/services/portConfigApi.d.ts

@@ -4,10 +4,11 @@
  */
 import type { PortConfig } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 /**
  * Fetch port configuration from API
  */
-export declare function fetchPortConfig(endpointConfig: EndpointConfig): Promise<PortConfig>;
+export declare function fetchPortConfig(endpointConfig: EndpointConfig, authProvider?: AuthProvider): Promise<PortConfig>;
 /**
  * Validate port configuration structure
  */

package/dist/services/portConfigApi.js

@@ -2,17 +2,19 @@
  * Port Configuration API Service
  * Handles fetching port configuration from the backend
  */
-import { buildEndpointUrl } from '../config/endpoints.js';
+import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
 import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 import { logger } from '../utils/logger.js';
 /**
  * Fetch port configuration from API
  */
-export async function fetchPortConfig(endpointConfig) {
+export async function fetchPortConfig(endpointConfig, authProvider) {
     try {
         const url = buildEndpointUrl(endpointConfig, endpointConfig.endpoints.portConfig);
+        const configHeaders = getEndpointHeaders(endpointConfig, 'portConfig');
+        const authHeaders = authProvider ? await authProvider.getAuthHeaders() : {};
         const response = await fetch(url, {
-            headers: { 'Content-Type': 'application/json' }
+            headers: { ...configHeaders, ...authHeaders }
         });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);

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/svelte-app.d.ts

@@ -153,6 +153,7 @@ export declare function mountWorkflowEditor(container: HTMLElement, options?: {
     endpointConfig?: EndpointConfig;
     portConfig?: PortConfig;
     categories?: CategoryDefinition[];
+    authProvider?: AuthProvider;
 }): Promise<MountedFlowDropApp>;
 /**
  * Unmount a FlowDrop app

package/dist/svelte-app.js

@@ -84,7 +84,7 @@ export async function mountFlowDropApp(container, options = {}) {
     if (!finalPortConfig && config) {
         // Try to fetch port configuration from API
         try {
-            finalPortConfig = await fetchPortConfig(config);
+            finalPortConfig = await fetchPortConfig(config, authProvider);
         }
         catch (error) {
             logger.warn('Failed to fetch port config from API, using default:', error);
@@ -101,7 +101,7 @@ export async function mountFlowDropApp(container, options = {}) {
     }
     else if (config) {
         try {
-            const fetchedCategories = await fetchCategories(config);
+            const fetchedCategories = await fetchCategories(config, authProvider);
             initializeCategories(fetchedCategories);
         }
         catch (error) {
@@ -244,7 +244,7 @@ export async function mountFlowDropApp(container, options = {}) {
  * @returns Promise resolving to a MountedFlowDropApp instance
  */
 export async function mountWorkflowEditor(container, options = {}) {
-    const { nodes = [], endpointConfig, portConfig, categories } = options;
+    const { nodes = [], endpointConfig, portConfig, categories, authProvider } = options;
     // Create endpoint configuration
     let config;
     if (endpointConfig) {
@@ -269,7 +269,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     if (!finalPortConfig && config) {
         // Try to fetch port configuration from API
         try {
-            finalPortConfig = await fetchPortConfig(config);
+            finalPortConfig = await fetchPortConfig(config, authProvider);
         }
         catch (error) {
             logger.warn('Failed to fetch port config from API, using default:', error);
@@ -286,7 +286,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     }
     else if (config) {
         try {
-            const fetchedCategories = await fetchCategories(config);
+            const fetchedCategories = await fetchCategories(config, authProvider);
             initializeCategories(fetchedCategories);
         }
         catch (error) {

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';
@@ -296,6 +297,19 @@ export interface AutocompleteConfig {
      * @default false
      */
     multiple?: boolean;
+    /**
+     * Map of URL query parameter names to sibling form field names.
+     * When fetching autocomplete options, the current value of each
+     * referenced sibling field is appended as a query parameter.
+     *
+     * Example: { "account": "account", "project": "project" }
+     * If the "account" field currently holds "my-jira", the URL becomes:
+     * /api/jira/issue-types?account=my-jira&q=...
+     *
+     * When any dependency field changes, the autocomplete clears its
+     * current value and invalidates the suggestion cache.
+     */
+    params?: Record<string, string>;
 }
 /**
  * Dynamic schema endpoint configuration
@@ -1168,7 +1182,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 +1230,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[];
 /**
@@ -115,6 +118,65 @@ export interface PlaygroundMessageMetadata {
     /** Allow additional properties */
     [key: string]: unknown;
 }
+/**
+ * A node on the contextual tree the server attaches to a message
+ * (e.g. workflow > sub-workflow > iteration). Display-only — this is not a
+ * navigation breadcrumb; `href` is intentionally not part of the schema.
+ */
+export interface MessageHierarchyItem {
+    /** Stable identifier (for keying) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional iconify icon id (e.g. 'mdi:graph') */
+    icon?: string;
+}
+/**
+ * Semantic color hooks for a tag. Map to design tokens in the theme.
+ */
+export type MessageTagColor = 'muted' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Visual emphasis for a tag.
+ */
+export type MessageTagVariant = 'solid' | 'outline' | 'subtle';
+/**
+ * A server-emitted classification chip rendered alongside a message.
+ * Tags are unordered and replace any UI-side defaults.
+ */
+export interface MessageTag {
+    /** Stable identifier (for keying) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional iconify icon id */
+    icon?: string;
+    /** Semantic color hook; defaults to 'muted' if omitted */
+    color?: MessageTagColor;
+    /** Visual style; defaults to 'subtle' if omitted */
+    variant?: MessageTagVariant;
+    /** Free-form classifier the server may use for future grouping/filtering */
+    type?: string;
+}
+/**
+ * Rendering hint the server may set to choose a layout regardless of role.
+ *
+ * - `bubble`: chat bubble shape (default for user/assistant)
+ * - `log`: dense one-liner (default for log role)
+ * - `notice`: compact centered notice (default for system role with
+ *   compactSystemMessages enabled)
+ * - `card`: vertical layout — breadcrumb (top), body (middle), tags (bottom)
+ *
+ * When omitted, the client falls back to the role-based default above.
+ */
+export type PlaygroundMessageDisplay = 'bubble' | 'log' | 'notice' | 'card';
+/**
+ * Resolve the effective layout for a message. Server-supplied `display` wins;
+ * otherwise we fall back to a role-based default. Pure function so the
+ * dispatcher and tests can share it.
+ */
+export declare function resolveMessageDisplay(message: Pick<PlaygroundMessage, 'role' | 'display'>, options?: {
+    compactSystemMessages?: boolean;
+}): PlaygroundMessageDisplay;
 /**
  * Message in a playground session
  *
@@ -156,6 +218,23 @@ export interface PlaygroundMessage {
     executionId?: string | null;
     /** Associated node ID (for log/assistant messages) */
     nodeId?: string | null;
+    /**
+     * Ordered hierarchy path (e.g. workflow > sub-workflow > iteration).
+     * Rendered as a chevron-separated trail. Server-controlled — no
+     * client-side derivation.
+     */
+    hierarchy?: MessageHierarchyItem[];
+    /**
+     * Server-emitted classification chips rendered with the message.
+     * Replace any client-side defaults entirely (no merge).
+     */
+    tags?: MessageTag[];
+    /**
+     * Layout hint. When omitted, the client picks a default from the role:
+     * - log → 'log', system (when compactSystemMessages) → 'notice',
+     *   user/assistant → 'bubble'.
+     */
+    display?: PlaygroundMessageDisplay;
     /** Additional message metadata */
     metadata?: PlaygroundMessageMetadata;
 }
@@ -273,7 +352,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)
  */
@@ -44,6 +42,20 @@ export function defaultShouldStopPolling(status) {
 export function defaultIsTerminalStatus(status) {
     return DEFAULT_TERMINAL_STATUSES.includes(status);
 }
+/**
+ * Resolve the effective layout for a message. Server-supplied `display` wins;
+ * otherwise we fall back to a role-based default. Pure function so the
+ * dispatcher and tests can share it.
+ */
+export function resolveMessageDisplay(message, options = {}) {
+    if (message.display)
+        return message.display;
+    if (message.role === 'system' && options.compactSystemMessages !== false)
+        return 'notice';
+    if (message.role === 'log')
+        return 'log';
+    return 'bubble';
+}
 /**
  * Metadata field to control Run button state from backend.
  * When a message contains this field set to true, the Run button becomes enabled.

package/dist/utils/nodeStatus.js

@@ -13,7 +13,9 @@ export function getStatusColor(status) {
         completed: '#10b981', // emerald
         failed: '#ef4444', // red
         cancelled: '#6b7280', // gray
-        skipped: '#8b5cf6' // violet
+        skipped: '#8b5cf6', // violet
+        paused: '#f97316', // orange
+        interrupted: '#06b6d4' // cyan
     };
     return statusColors[status] || statusColors.idle;
 }
@@ -28,7 +30,9 @@ export function getStatusIcon(status) {
         completed: 'mdi:check-circle',
         failed: 'mdi:alert-circle',
         cancelled: 'mdi:cancel',
-        skipped: 'mdi:skip-next'
+        skipped: 'mdi:skip-next',
+        paused: 'mdi:pause-circle-outline',
+        interrupted: 'mdi:account-clock-outline'
     };
     return statusIcons[status] || statusIcons.idle;
 }
@@ -43,7 +47,9 @@ export function getStatusLabel(status) {
         completed: 'Completed',
         failed: 'Failed',
         cancelled: 'Cancelled',
-        skipped: 'Skipped'
+        skipped: 'Skipped',
+        paused: 'Paused',
+        interrupted: 'Waiting'
     };
     return statusLabels[status] || statusLabels.idle;
 }
@@ -58,7 +64,9 @@ export function getStatusBackgroundColor(status) {
         completed: '#d1fae5', // light emerald
         failed: '#fee2e2', // light red
         cancelled: '#f3f4f6', // light gray
-        skipped: '#ede9fe' // light violet
+        skipped: '#ede9fe', // light violet
+        paused: '#ffedd5', // light orange
+        interrupted: '#cffafe' // light cyan
     };
     return statusBackgroundColors[status] || statusBackgroundColors.idle;
 }
@@ -73,7 +81,9 @@ export function getStatusTextColor(status) {
         completed: '#059669', // emerald
         failed: '#dc2626', // red
         cancelled: '#6b7280', // gray
-        skipped: '#7c3aed' // violet
+        skipped: '#7c3aed', // violet
+        paused: '#ea580c', // orange
+        interrupted: '#0891b2' // cyan
     };
     return statusTextColors[status] || statusTextColors.idle;
 }

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "1.11.0",
+  "version": "1.13.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"
@@ -83,6 +83,11 @@
       "svelte": "./dist/form/code.js",
       "default": "./dist/form/code.js"
     },
+    "./form/autocomplete": {
+      "types": "./dist/form/autocomplete.d.ts",
+      "svelte": "./dist/form/autocomplete.js",
+      "default": "./dist/form/autocomplete.js"
+    },
     "./form/markdown": {
       "types": "./dist/form/markdown.d.ts",
       "svelte": "./dist/form/markdown.js",