@flowdrop/flowdrop 1.10.0 → 1.12.0

package/dist/playground/mount.d.ts

@@ -46,6 +46,9 @@
 import type { Workflow } from '../types/index.js';
 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
  */
@@ -83,13 +86,15 @@ export interface PlaygroundMountOptions {
      */
     config?: PlaygroundConfig;
     /**
-     * Container height (CSS value)
-     * @default "100%"
+     * Container height (CSS value). If omitted, the library does NOT set an
+     * inline height — the host's own CSS owns sizing. Pass a definite value
+     * (e.g. `"100dvh"`, `"600px"`) only when mounting into an unsized
+     * container.
      */
     height?: string;
     /**
-     * Container width (CSS value)
-     * @default "100%"
+     * Container width (CSS value). If omitted, the library does NOT set an
+     * inline width. See `height` for rationale.
      */
     width?: string;
     /**
@@ -103,6 +108,12 @@ export interface PlaygroundMountOptions {
      * @param previousStatus - The previous session status
      */
     onSessionStatusChange?: (status: PlaygroundSessionStatus, previousStatus: PlaygroundSessionStatus) => void;
+    /**
+     * Optional setting overrides deep-merged over current settings before mount.
+     * Theme is re-initialized on every mount regardless. Mirrors mountFlowDropApp's
+     * `settings` option.
+     */
+    settings?: PartialSettings;
 }
 /**
  * Return type for mounted Playground instance
@@ -206,5 +217,49 @@ 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'> {
+    /**
+     * Display mode. Modal is unsupported — use mountPlayground() for that.
+     * @default "standalone"
+     */
+    mode?: 'standalone' | 'embedded';
+    /** Render the FlowDrop Navbar above the playground (default: true). */
+    showNavbar?: boolean;
+    /** Title shown in the navbar. Falls back to the workflow name, then "Playground". */
+    navbarTitle?: string;
+    /** Action buttons rendered in the navbar. Passed straight through to <Navbar primaryActions>. */
+    primaryActions?: NavbarAction[];
+    /** Show the settings gear icon in the navbar (default: true). */
+    showSettings?: boolean;
+    /** Restrict which settings categories are exposed in the settings modal. */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal. */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal. */
+    showSettingsResetButton?: boolean;
+}
+/**
+ * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ *
+ * Use this when you want the same chrome as the FlowDrop editor — logo,
+ * branding, and settings modal — wrapped around the playground. For an
+ * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlaygroundApp(container, {
+ *   workflowId: 'wf-123',
+ *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   navbarTitle: 'My Workflow',
+ *   primaryActions: [
+ *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
+ *     { label: 'Workflows', href: '/workflows', icon: 'mdi:arrow-left', variant: 'outline' }
+ *   ]
+ * });
+ * ```
+ */
+export declare function mountPlaygroundApp(container: HTMLElement, options: PlaygroundAppMountOptions): Promise<MountedPlayground>;

package/dist/playground/mount.js

@@ -47,6 +47,8 @@ import { mount, unmount } from 'svelte';
 import Playground from '../components/playground/Playground.svelte';
 import PlaygroundModal from '../components/playground/PlaygroundModal.svelte';
 import PlaygroundStudio from '../components/playground/PlaygroundStudio.svelte';
+import PlaygroundApp from '../components/playground/PlaygroundApp.svelte';
+import { initializeSettings } from '../stores/settingsStore.svelte.js';
 import { setEndpointConfig } from '../services/api.js';
 import { playgroundService } from '../services/playgroundService.js';
 import { getCurrentSession, getSessions, getMessages, getIsExecuting, playgroundActions, applyServerResponse, subscribeToSessionStatus } from '../stores/playgroundStore.svelte.js';
@@ -62,6 +64,28 @@ async function resolveEndpointConfig(endpointConfig) {
     setEndpointConfig(resolved);
     return resolved;
 }
+/**
+ * Shared prelude for the playground mount functions: resolves the endpoint
+ * config and initializes settings/theme. Each mount function still owns its
+ * own argument validation and container sizing (those vary per mode).
+ */
+async function prepareMount(options) {
+    const finalEndpointConfig = await resolveEndpointConfig(options.endpointConfig);
+    await initializeSettings({ defaults: options.settings });
+    return finalEndpointConfig;
+}
+/**
+ * Apply caller-supplied height/width as inline styles. When omitted, the host
+ * CSS owns container sizing — this is deliberate: a default of `100%` does not
+ * resolve inside parents with only `min-height` set (a common pattern in
+ * Drupal admin chrome), collapsing the playground to zero.
+ */
+function sizeContainer(container, height, width) {
+    if (height !== undefined)
+        container.style.height = height;
+    if (width !== undefined)
+        container.style.width = width;
+}
 function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange) {
     const pollingInterval = config.pollingInterval ?? 1500;
     const unsubscribeStatus = onSessionStatusChange
@@ -122,7 +146,7 @@ function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusCh
  * ```
  */
 export async function mountPlayground(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', onClose, onSessionStatusChange } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, settings: initialSettings, onClose, onSessionStatusChange } = options;
     // Validate required parameters
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlayground()');
@@ -134,14 +158,16 @@ export async function mountPlayground(container, options) {
     if (mode === 'modal' && !onClose) {
         throw new Error('onClose callback is required for modal mode');
     }
-    const finalEndpointConfig = await resolveEndpointConfig(endpointConfig);
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
     let targetContainer = container;
     if (mode === 'modal') {
         targetContainer = document.body;
     }
     else {
-        container.style.height = height;
-        container.style.width = width;
+        sizeContainer(container, height, width);
     }
     let svelteApp;
     if (mode === 'modal') {
@@ -199,7 +225,7 @@ export function unmountPlayground(app) {
     }
 }
 export async function mountPlaygroundStudio(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', initialPipelineOpen, minChatWidth, initialPipelineWidth, 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()');
     }
@@ -209,9 +235,11 @@ export async function mountPlaygroundStudio(container, options) {
     if (mode === 'modal') {
         throw new Error('modal mode is not supported by mountPlaygroundStudio() — use mountPlayground() instead');
     }
-    const finalEndpointConfig = await resolveEndpointConfig(endpointConfig);
-    container.style.height = height;
-    container.style.width = width;
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
+    sizeContainer(container, height, width);
     const svelteApp = mount(PlaygroundStudio, {
         target: container,
         props: {
@@ -225,7 +253,72 @@ export async function mountPlaygroundStudio(container, options) {
             onSessionNavigate,
             initialPipelineOpen,
             minChatWidth,
-            initialPipelineWidth
+            initialPipelineWidth,
+            extraPipelineViews: pipelineViews
+        }
+    });
+    return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
+}
+/**
+ * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ *
+ * Use this when you want the same chrome as the FlowDrop editor — logo,
+ * branding, and settings modal — wrapped around the playground. For an
+ * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ *
+ * @example
+ * ```typescript
+ * const app = await mountPlaygroundApp(container, {
+ *   workflowId: 'wf-123',
+ *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   navbarTitle: 'My Workflow',
+ *   primaryActions: [
+ *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
+ *     { label: 'Workflows', href: '/workflows', icon: 'mdi:arrow-left', variant: 'outline' }
+ *   ]
+ * });
+ * ```
+ */
+export async function mountPlaygroundApp(container, options) {
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange } = options;
+    if (!workflowId) {
+        throw new Error('workflowId is required for mountPlaygroundApp()');
+    }
+    if (!container) {
+        throw new Error('container element is required for mountPlaygroundApp()');
+    }
+    // Positive narrowing (not `=== 'modal'`) because PlaygroundAppMountOptions
+    // Omit-narrows `mode`, so the type lies for JS callers — check the values
+    // we actually accept instead of the one we don't.
+    if (mode !== 'standalone' && mode !== 'embedded') {
+        throw new Error(`mountPlaygroundApp(): mode must be 'standalone' or 'embedded', got ${String(mode)}`);
+    }
+    const finalEndpointConfig = await prepareMount({
+        endpointConfig,
+        settings: initialSettings
+    });
+    sizeContainer(container, height, width);
+    const svelteApp = mount(PlaygroundApp, {
+        target: container,
+        props: {
+            workflowId,
+            workflow,
+            mode,
+            initialSessionId,
+            endpointConfig: finalEndpointConfig,
+            config,
+            showNavbar,
+            navbarTitle,
+            primaryActions,
+            showSettings,
+            settingsCategories,
+            showSettingsSyncButton,
+            showSettingsResetButton,
+            initialPipelineOpen,
+            minChatWidth,
+            initialPipelineWidth,
+            onClose,
+            onSessionNavigate
         }
     });
     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/svelte-app.d.ts

@@ -14,16 +14,8 @@ import type { FlowDropTheme, FlowDropThemeName } from './types/theme.js';
 import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
 import './registry/builtinFormats.js';
 import type { PartialSettings, SettingsCategory } from './types/settings.js';
-/**
- * Navbar action configuration
- */
-export interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-}
+import type { NavbarAction } from './types/navbar.js';
+export type { NavbarAction };
 /**
  * Mount options for FlowDrop App
  */

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

@@ -0,0 +1,14 @@
+/**
+ * Navbar action button configuration.
+ *
+ * Rendered as a link by `<Navbar>` and the mount functions that wrap it.
+ */
+export interface NavbarAction {
+    label: string;
+    href: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'outline';
+    onclick?: (event: Event) => void;
+    /** If true, opens link in new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+}

package/dist/types/navbar.js

@@ -0,0 +1 @@
+export {};

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)
  */

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.10.0",
+  "version": "1.12.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"