@d34dman/flowdrop 0.0.38 → 0.0.40

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shibin Das (d34dman)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -5,7 +5,7 @@
 <h1 align="center">FlowDrop</h1>
 
 <p align="center">
-  <img src="https://img.shields.io/github/actions/workflow/status/d34dman/flowdrop/docker-publish.yml?style=flat-square&label=Build" alt="GitHub pages build status" />
+  <img src="https://img.shields.io/github/actions/workflow/status/flowdrop-io/flowdrop/docker-publish.yml?style=flat-square&label=Build" alt="GitHub pages build status" />
   <a href="https://www.npmjs.com/package/@d34dman/flowdrop"><img src="https://img.shields.io/npm/v/@d34dman/flowdrop?style=flat-square" alt="npm" /></a>
   <img src="https://img.shields.io/npm/unpacked-size/%40d34dman%2Fflowdrop?style=flat-square" alt="NPM Unpacked Size" />
   <img src="https://img.shields.io/npm/types/@d34dman/flowdrop?style=flat-square" alt="npm type definitions" />

package/dist/components/playground/ChatPanel.svelte

@@ -12,6 +12,7 @@
 	import MessageBubble from './MessageBubble.svelte';
 	import { InterruptBubble } from '../interrupt/index.js';
 	import type { PlaygroundMessage } from '../../types/playground.js';
+	import { hasEnableRunFlag } from '../../types/playground.js';
 	import {
 		isInterruptMetadata,
 		extractInterruptMetadata,
@@ -50,6 +51,21 @@
 		enableMarkdown?: boolean;
 		/** Callback when an interrupt is resolved (to refresh messages) */
 		onInterruptResolved?: () => void;
+		/**
+		 * Whether to show the chat text input (default: true)
+		 * When false, only the "Run" button is displayed.
+		 */
+		showChatInput?: boolean;
+		/**
+		 * Whether to show the "Run" button (default: true)
+		 * When false, the Run button is hidden.
+		 */
+		showRunButton?: boolean;
+		/**
+		 * Predefined message to send when "Run" button is clicked
+		 * Used when showChatInput is false.
+		 */
+		predefinedMessage?: string;
 	}
 
 	let {
@@ -60,9 +76,25 @@
 		onStopExecution,
 		showLogsInline = false,
 		enableMarkdown = true,
-		onInterruptResolved
+		onInterruptResolved,
+		showChatInput = true,
+		showRunButton = true,
+		predefinedMessage = 'Run workflow'
 	}: Props = $props();
 
+	/**
+	 * Tracks whether the Run button is enabled.
+	 * Starts as true, becomes false after Run is clicked,
+	 * and is re-enabled when backend sends a message with enableRun: true metadata.
+	 */
+	let runEnabled = $state(true);
+
+	/**
+	 * Computed flag: true if both chat input and run button are hidden.
+	 * In this case, we show a helpful message to the user.
+	 */
+	const noInputsAvailable = $derived(!showChatInput && !showRunButton);
+
 	/** Input field value */
 	let inputValue = $state('');
 
@@ -89,6 +121,10 @@
 	 * This effect runs when messages change and adds any new interrupt messages
 	 * to the interrupt store. We do this in an effect rather than during render
 	 * to avoid Svelte 5's state_unsafe_mutation error.
+	 *
+	 * If a message has status 'completed', the interrupt is marked as resolved
+	 * to show the "Confirmation Submitted" header, disabled buttons, and
+	 * "Response submitted" indicator.
 	 */
 	$effect(() => {
 		// Get all messages that are interrupt requests
@@ -105,6 +141,15 @@
 				if (metadata) {
 					const interrupt = metadataToInterrupt(metadata, message.id, message.content);
 					interruptActions.addInterrupt(interrupt);
+
+					// If the message status is 'completed', mark the interrupt as resolved
+					// This ensures completed interrupts show proper UI state:
+					// - "Confirmation Submitted" header
+					// - Disabled buttons
+					// - "Response submitted" indicator
+					if (message.status === 'completed') {
+						interruptActions.resolveInterrupt(interrupt.id, metadata.response_value);
+					}
 				}
 			}
 		}
@@ -179,6 +224,61 @@
 		onStopExecution?.();
 	}
 
+	/**
+	 * Handle "Run" button click when chat input is hidden.
+	 * Sends the predefined message to execute the workflow.
+	 * Disables the Run button after clicking until backend re-enables it.
+	 */
+	function handleRun(): void {
+		if ($isExecuting || !runEnabled) {
+			return;
+		}
+		// Disable the Run button after clicking
+		runEnabled = false;
+		onSendMessage?.(predefinedMessage);
+	}
+
+	/**
+	 * Track processed message IDs for enableRun detection
+	 * to avoid re-processing the same messages.
+	 */
+	let processedEnableRunIds = $state(new Set<string>());
+
+	/**
+	 * Watch for messages with enableRun: true metadata from the backend.
+	 * When detected, re-enable the Run button.
+	 */
+	$effect(() => {
+		// Check all messages for enableRun flag
+		for (const message of displayMessages) {
+			// Skip if already processed
+			if (processedEnableRunIds.has(message.id)) {
+				continue;
+			}
+			// Check if this message has the enableRun flag
+			if (hasEnableRunFlag(message.metadata)) {
+				// Mark as processed
+				processedEnableRunIds = new Set([...processedEnableRunIds, message.id]);
+				// Re-enable the Run button
+				runEnabled = true;
+			}
+		}
+	});
+
+	/**
+	 * Reset runEnabled state when session changes.
+	 * This ensures a fresh state for each session.
+	 */
+	$effect(() => {
+		const session = $currentSession;
+		if (session) {
+			// Reset to enabled state for new/changed sessions
+			runEnabled = true;
+			// Clear processed IDs for the new session
+			processedEnableRunIds = new Set();
+		}
+	});
+
 	/**
 	 * Auto-scroll to bottom when messages change
 	 */
@@ -280,8 +380,18 @@
 						<path d="M16 36L32 28" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
 					</svg>
 				</div>
-				<h2 class="chat-panel__welcome-title">New chat</h2>
-				<p class="chat-panel__welcome-text">Test your flow with a chat prompt</p>
+				{#if noInputsAvailable}
+					<h2 class="chat-panel__welcome-title">View only</h2>
+					<p class="chat-panel__welcome-text">
+						This playground is in view-only mode. No inputs are available.
+					</p>
+				{:else if showChatInput}
+					<h2 class="chat-panel__welcome-title">New chat</h2>
+					<p class="chat-panel__welcome-text">Test your flow with a chat prompt</p>
+				{:else}
+					<h2 class="chat-panel__welcome-title">Ready to run</h2>
+					<p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
+				{/if}
 			</div>
 		{:else if showEmptyChat}
 			<!-- Empty Chat State (session exists but no messages) -->
@@ -311,8 +421,18 @@
 						<path d="M16 36L32 28" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
 					</svg>
 				</div>
-				<h2 class="chat-panel__welcome-title">New chat</h2>
-				<p class="chat-panel__welcome-text">Test your flow with a chat prompt</p>
+				{#if noInputsAvailable}
+					<h2 class="chat-panel__welcome-title">View only</h2>
+					<p class="chat-panel__welcome-text">
+						This playground is in view-only mode. No inputs are available.
+					</p>
+				{:else if showChatInput}
+					<h2 class="chat-panel__welcome-title">New chat</h2>
+					<p class="chat-panel__welcome-text">Test your flow with a chat prompt</p>
+				{:else}
+					<h2 class="chat-panel__welcome-title">Ready to run</h2>
+					<p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
+				{/if}
 			</div>
 		{:else}
 			<!-- Messages -->
@@ -352,42 +472,66 @@
 
 	<!-- Input Area -->
 	<div class="chat-panel__input-area">
-		<div class="chat-panel__input-container">
-			<div class="chat-panel__input-wrapper">
-				<textarea
-					bind:this={inputField}
-					bind:value={inputValue}
-					class="chat-panel__input"
-					{placeholder}
-					rows="1"
-					disabled={$isExecuting}
-					onkeydown={handleKeydown}
-					oninput={handleInput}
-				></textarea>
+		{#if noInputsAvailable}
+			<!-- No inputs available - show informational message -->
+			<div class="chat-panel__no-inputs">
+				<Icon icon="mdi:information-outline" />
+				<span>View-only mode. Workflow execution is controlled externally.</span>
 			</div>
+		{:else}
+			<div
+				class="chat-panel__input-container"
+				class:chat-panel__input-container--run-only={!showChatInput}
+			>
+				{#if showChatInput}
+					<div class="chat-panel__input-wrapper">
+						<textarea
+							bind:this={inputField}
+							bind:value={inputValue}
+							class="chat-panel__input"
+							{placeholder}
+							rows="1"
+							disabled={$isExecuting}
+							onkeydown={handleKeydown}
+							oninput={handleInput}
+						></textarea>
+					</div>
+				{/if}
 
-			{#if $sessionStatus === 'running' || $isExecuting}
-				<button
-					type="button"
-					class="chat-panel__stop-btn"
-					onclick={handleStop}
-					title="Stop execution"
-				>
-					<Icon icon="mdi:stop" />
-					Stop
-				</button>
-			{:else}
-				<button
-					type="button"
-					class="chat-panel__send-btn"
-					onclick={handleSend}
-					disabled={!inputValue.trim()}
-					title="Send message"
-				>
-					Send
-				</button>
-			{/if}
-		</div>
+				{#if $sessionStatus === 'running' || $isExecuting}
+					<button
+						type="button"
+						class="chat-panel__stop-btn"
+						onclick={handleStop}
+						title="Stop execution"
+					>
+						<Icon icon="mdi:stop" />
+						Stop
+					</button>
+				{:else if showChatInput}
+					<button
+						type="button"
+						class="chat-panel__send-btn"
+						onclick={handleSend}
+						disabled={!inputValue.trim()}
+						title="Send message"
+					>
+						Send
+					</button>
+				{:else if showRunButton}
+					<button
+						type="button"
+						class="chat-panel__run-btn"
+						onclick={handleRun}
+						disabled={!runEnabled}
+						title={runEnabled ? 'Run workflow' : 'Waiting for workflow to be ready...'}
+					>
+						<Icon icon="mdi:play" />
+						Run
+					</button>
+				{/if}
+			</div>
+		{/if}
 	</div>
 </div>
 
@@ -603,6 +747,53 @@
 		background-color: #dc2626;
 	}
 
+	/* Run button (when chat input is hidden) */
+	.chat-panel__run-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.625rem 1.25rem;
+		border: none;
+		border-radius: 0.5rem;
+		background-color: #10b981;
+		color: #ffffff;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.chat-panel__run-btn:hover:not(:disabled) {
+		background-color: #059669;
+	}
+
+	.chat-panel__run-btn:disabled {
+		background-color: #e5e7eb;
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	/* Container modifier for run-only mode (no text input) */
+	.chat-panel__input-container--run-only {
+		justify-content: flex-end;
+	}
+
+	/* No inputs available message (view-only mode) */
+	.chat-panel__no-inputs {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		background-color: #f3f4f6;
+		border-radius: 0.5rem;
+		color: #6b7280;
+		font-size: 0.875rem;
+		max-width: 800px;
+		margin: 0 auto;
+	}
+
 	/* Responsive */
 	@media (max-width: 640px) {
 		.chat-panel__messages {
@@ -618,7 +809,8 @@
 		}
 
 		.chat-panel__send-btn,
-		.chat-panel__stop-btn {
+		.chat-panel__stop-btn,
+		.chat-panel__run-btn {
 			padding: 0.5rem 1rem;
 		}
 	}

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

@@ -18,6 +18,21 @@ interface Props {
     enableMarkdown?: boolean;
     /** Callback when an interrupt is resolved (to refresh messages) */
     onInterruptResolved?: () => void;
+    /**
+     * Whether to show the chat text input (default: true)
+     * When false, only the "Run" button is displayed.
+     */
+    showChatInput?: boolean;
+    /**
+     * Whether to show the "Run" button (default: true)
+     * When false, the Run button is hidden.
+     */
+    showRunButton?: boolean;
+    /**
+     * Predefined message to send when "Run" button is clicked
+     * Used when showChatInput is false.
+     */
+    predefinedMessage?: string;
 }
 declare const ChatPanel: import("svelte").Component<Props, {}, "">;
 type ChatPanel = ReturnType<typeof ChatPanel>;

package/dist/components/playground/Playground.svelte

@@ -73,8 +73,17 @@
 	/** Track session pending delete */
 	let pendingDeleteId = $state<string | null>(null);
 
+	/** Track if initial session has been loaded to prevent duplicate loads */
+	let initialSessionLoaded = $state(false);
+
+	/** Track the session ID that was loaded to detect prop changes */
+	let loadedInitialSessionId = $state<string | undefined>(undefined);
+
+	/** Track if auto-run has already been triggered to prevent duplicate executions */
+	let autoRunTriggered = $state(false);
+
 	/**
-	 * Initialize the playground
+	 * Initialize the playground on mount
 	 */
 	onMount(() => {
 		// Set endpoint config if provided
@@ -95,7 +104,15 @@
 
 				// Resume initial session if provided
 				if (initialSessionId) {
-					await loadSession(initialSessionId);
+					await loadInitialSession(initialSessionId);
+				}
+
+				// Handle auto-run after initialization is complete
+				if (config.autoRun && !autoRunTriggered) {
+					autoRunTriggered = true;
+					const predefinedMessage = config.predefinedMessage ?? 'Run workflow';
+					console.log('[Playground] Auto-run triggered with message:', predefinedMessage);
+					await handleSendMessage(predefinedMessage);
 				}
 			} catch (err) {
 				console.error('[Playground] Initialization error:', err);
@@ -106,6 +123,66 @@
 		void initializePlayground();
 	});
 
+	/**
+	 * Handle reactive changes to initialSessionId prop
+	 * This allows the initial session to be set after mount
+	 */
+	$effect(() => {
+		// Skip if no initialSessionId provided
+		if (!initialSessionId) {
+			return;
+		}
+
+		// Skip if this session was already loaded
+		if (initialSessionLoaded && loadedInitialSessionId === initialSessionId) {
+			return;
+		}
+
+		// Skip if sessions haven't been loaded yet (will be handled by onMount)
+		const sessionList = get(sessions);
+		if (sessionList.length === 0 && get(isLoading)) {
+			return;
+		}
+
+		// Load the initial session if sessions are available
+		if (sessionList.length > 0 && !initialSessionLoaded) {
+			void loadInitialSession(initialSessionId);
+		}
+	});
+
+	/**
+	 * Load the initial session with validation and error handling
+	 *
+	 * @param sessionId - The session ID to load
+	 */
+	async function loadInitialSession(sessionId: string): Promise<void> {
+		// Validate session exists in loaded sessions
+		const sessionList = get(sessions);
+		const sessionExists = sessionList.some((s) => s.id === sessionId);
+
+		if (!sessionExists) {
+			console.warn(
+				`[Playground] Initial session "${sessionId}" not found in available sessions. ` +
+					`Available sessions: ${sessionList.map((s) => s.id).join(', ') || 'none'}`
+			);
+			// Don't set error - just log warning and let user pick a session
+			initialSessionLoaded = true;
+			loadedInitialSessionId = sessionId;
+			return;
+		}
+
+		try {
+			await loadSession(sessionId);
+			initialSessionLoaded = true;
+			loadedInitialSessionId = sessionId;
+		} catch (err) {
+			console.error('[Playground] Failed to load initial session:', err);
+			// Mark as attempted to prevent retry loops
+			initialSessionLoaded = true;
+			loadedInitialSessionId = sessionId;
+		}
+	}
+
 	/**
 	 * Cleanup on destroy
 	 */
@@ -563,6 +640,9 @@
 						autoScroll={config.autoScroll ?? true}
 						showLogsInline={config.logDisplayMode === 'inline'}
 						enableMarkdown={config.enableMarkdown ?? true}
+						showChatInput={config.showChatInput ?? true}
+						showRunButton={config.showRunButton ?? true}
+						predefinedMessage={config.predefinedMessage ?? 'Run workflow'}
 						onSendMessage={handleSendMessage}
 						onStopExecution={handleStopExecution}
 						onInterruptResolved={handleInterruptResolved}

package/dist/config/endpoints.js

@@ -71,7 +71,8 @@ export const defaultEndpointConfig = {
             preferences: '/users/preferences'
         },
         system: {
-            health: '/system/health',
+            /** Health check at root level (industry standard for K8s, Docker, load balancers) */
+            health: '/health',
             config: '/system/config',
             version: '/system/version'
         }

package/dist/types/interrupt.d.ts

@@ -244,6 +244,8 @@ export interface InterruptMessageMetadata {
     options?: InterruptChoice[];
     /** Default value for pre-filling */
     default_value?: unknown;
+    /** Response value when interrupt has been resolved */
+    response_value?: unknown;
     /** Node ID that triggered the interrupt */
     node_id?: string;
     /** Execution ID */

package/dist/types/interrupt.js

@@ -36,6 +36,7 @@ export function extractInterruptMetadata(metadata) {
         schema: metadata.schema,
         options: metadata.options,
         default_value: metadata.default_value,
+        response_value: metadata.response_value,
         node_id: metadata.node_id,
         execution_id: metadata.execution_id,
         allow_cancel: metadata.allow_cancel,

package/dist/types/playground.d.ts

@@ -194,7 +194,57 @@ export interface PlaygroundConfig {
     logDisplayMode?: 'inline' | 'collapsible';
     /** Enable markdown rendering in messages (default: true) */
     enableMarkdown?: boolean;
+    /**
+     * Whether to show the chat text input (default: true)
+     * When false, only the "Run" button is displayed for workflow execution.
+     */
+    showChatInput?: boolean;
+    /**
+     * Whether to show the "Run" button (default: true)
+     * When false, the Run button is hidden. If both showChatInput and showRunButton
+     * are false, a helpful message is displayed to the user.
+     */
+    showRunButton?: boolean;
+    /**
+     * Predefined message to send when "Run" button is clicked (default: "Run workflow")
+     * Used when showChatInput is false to provide a default message for workflow execution.
+     */
+    predefinedMessage?: string;
+    /**
+     * Automatically run the workflow once when the playground loads (default: false)
+     * When true, the workflow will execute immediately using the predefinedMessage.
+     * This is useful for scenarios where the workflow should start without user interaction.
+     * Note: Only runs once per session - subsequent runs require clicking the Run button.
+     */
+    autoRun?: boolean;
 }
+/**
+ * Metadata field to control Run button state from backend.
+ * When a message contains this field set to true, the Run button becomes enabled.
+ *
+ * @example
+ * ```typescript
+ * // Backend sends a message with this metadata to re-enable Run button:
+ * const message: PlaygroundMessage = {
+ *   id: "msg-123",
+ *   sessionId: "sess-456",
+ *   role: "system",
+ *   content: "Workflow completed. Ready for next run.",
+ *   timestamp: new Date().toISOString(),
+ *   metadata: {
+ *     enableRun: true
+ *   }
+ * };
+ * ```
+ */
+export declare const ENABLE_RUN_METADATA_KEY = "enableRun";
+/**
+ * Check if a message metadata contains the enableRun flag
+ *
+ * @param metadata - The message metadata to check
+ * @returns True if the metadata signals to enable the Run button
+ */
+export declare function hasEnableRunFlag(metadata: PlaygroundMessageMetadata | undefined): boolean;
 /**
  * Display mode for the Playground component
  */

package/dist/types/playground.js

@@ -6,6 +6,35 @@
  *
  * @module types/playground
  */
+/**
+ * Metadata field to control Run button state from backend.
+ * When a message contains this field set to true, the Run button becomes enabled.
+ *
+ * @example
+ * ```typescript
+ * // Backend sends a message with this metadata to re-enable Run button:
+ * const message: PlaygroundMessage = {
+ *   id: "msg-123",
+ *   sessionId: "sess-456",
+ *   role: "system",
+ *   content: "Workflow completed. Ready for next run.",
+ *   timestamp: new Date().toISOString(),
+ *   metadata: {
+ *     enableRun: true
+ *   }
+ * };
+ * ```
+ */
+export const ENABLE_RUN_METADATA_KEY = 'enableRun';
+/**
+ * Check if a message metadata contains the enableRun flag
+ *
+ * @param metadata - The message metadata to check
+ * @returns True if the metadata signals to enable the Run button
+ */
+export function hasEnableRunFlag(metadata) {
+    return metadata?.[ENABLE_RUN_METADATA_KEY] === true;
+}
 /**
  * Chat input detection patterns for identifying chat nodes in workflows
  */

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.38",
+	"version": "0.0.40",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -27,7 +27,11 @@
 		"test:all": "npm run test && npm run test:e2e",
 		"format": "prettier --write .",
 		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
+		"build-storybook": "storybook build",
+		"api:lint": "redocly lint api/openapi.yaml --config api/redocly.yaml",
+		"api:bundle": "redocly bundle api/openapi.yaml -o api/bundled.yaml --config api/redocly.yaml",
+		"api:preview": "redocly preview-docs api/openapi.yaml --config api/redocly.yaml",
+		"api:docs": "redocly build-docs api/bundled.yaml -o api-docs/index.html"
 	},
 	"watch": {
 		"build": {
@@ -138,7 +142,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/d34dman/flowdrop.git"
+		"url": "git+https://github.com/flowdrop-io/flowdrop.git"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^4.0.1",
@@ -146,6 +150,7 @@
 		"@eslint/js": "^9.18.0",
 		"@iconify/svelte": "^5.0.0",
 		"@playwright/test": "^1.49.1",
+		"@redocly/cli": "^2.14.9",
 		"@storybook/addon-docs": "^9.0.15",
 		"@storybook/addon-svelte-csf": "^5.0.4",
 		"@storybook/addon-vitest": "^9.0.15",