@d34dman/flowdrop 0.0.39 → 0.0.41

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,28 @@
 		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;
+		/**
+		 * Whether to display system messages in compact mode.
+		 * When true, system messages appear as minimal inline text
+		 * instead of full chat bubbles to reduce visual noise.
+		 * @default true
+		 */
+		compactSystemMessages?: boolean;
 	}
 
 	let {
@@ -60,9 +83,26 @@
 		onStopExecution,
 		showLogsInline = false,
 		enableMarkdown = true,
-		onInterruptResolved
+		onInterruptResolved,
+		showChatInput = true,
+		showRunButton = true,
+		predefinedMessage = 'Run workflow',
+		compactSystemMessages = true
 	}: 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('');
 
@@ -77,6 +117,46 @@
 	 */
 	const displayMessages = $derived(showLogsInline ? $messages : $chatMessages);
 
+	/**
+	 * Track previous message count for detecting new messages.
+	 * We only want to auto-scroll when NEW messages are added,
+	 * not when existing messages are updated.
+	 */
+	let previousMessageCount = $state(0);
+
+	/**
+	 * Check if user is near the bottom of the scroll container.
+	 * Used to determine if we should auto-scroll when new messages arrive.
+	 * If user has scrolled up to read previous messages, we don't interrupt them.
+	 *
+	 * @param threshold - Pixels from bottom to consider "near bottom"
+	 * @returns True if user is within threshold of the bottom
+	 */
+	function isNearBottom(threshold: number = 100): boolean {
+		if (!messagesContainer) return true;
+		const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
+		return scrollHeight - scrollTop - clientHeight <= threshold;
+	}
+
+	/**
+	 * Check if a form element inside the messages container has focus.
+	 * When user is interacting with a form (e.g., interrupt prompt),
+	 * we should not auto-scroll as it disrupts their input.
+	 */
+	function isFormFocused(): boolean {
+		if (!messagesContainer) return false;
+		const activeElement = document.activeElement;
+		if (!activeElement) return false;
+		// Check if active element is a form control inside the messages container
+		const isFormControl =
+			activeElement.tagName === 'INPUT' ||
+			activeElement.tagName === 'TEXTAREA' ||
+			activeElement.tagName === 'SELECT' ||
+			activeElement.tagName === 'BUTTON' ||
+			activeElement.getAttribute('contenteditable') === 'true';
+		return isFormControl && messagesContainer.contains(activeElement);
+	}
+
 	/**
 	 * Check if a message is an interrupt request
 	 */
@@ -193,16 +273,110 @@
 	}
 
 	/**
-	 * Auto-scroll to bottom when messages change
+	 * 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(() => {
-		if (autoScroll && messagesContainer && displayMessages.length > 0) {
-			tick().then(() => {
-				if (messagesContainer) {
-					messagesContainer.scrollTop = messagesContainer.scrollHeight;
-				}
-			});
+		// 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();
+		}
+	});
+
+	/**
+	 * Smart auto-scroll to bottom when NEW messages are added.
+	 *
+	 * Only scrolls if:
+	 * 1. autoScroll prop is enabled
+	 * 2. New messages were actually added (not just updates)
+	 * 3. User is already near the bottom (hasn't scrolled up to read)
+	 * 4. User is not interacting with a form inside the chat
+	 *
+	 * This prevents disruptive scrolling when:
+	 * - User is reading previous messages
+	 * - User is filling out an interrupt form
+	 * - Messages are being updated (e.g., status changes)
+	 */
+	$effect(() => {
+		const currentCount = displayMessages.length;
+
+		// Skip if auto-scroll is disabled or no container
+		if (!autoScroll || !messagesContainer) {
+			previousMessageCount = currentCount;
+			return;
+		}
+
+		// Check if this is a NEW message (count increased)
+		const hasNewMessage = currentCount > previousMessageCount;
+
+		// Update the tracked count
+		previousMessageCount = currentCount;
+
+		// Only scroll if there's a new message
+		if (!hasNewMessage) {
+			return;
+		}
+
+		// Don't scroll if user has scrolled up to read previous messages
+		if (!isNearBottom()) {
+			return;
 		}
+
+		// Don't scroll if user is interacting with a form
+		if (isFormFocused()) {
+			return;
+		}
+
+		// Safe to scroll to bottom
+		tick().then(() => {
+			if (messagesContainer) {
+				messagesContainer.scrollTop = messagesContainer.scrollHeight;
+			}
+		});
 	});
 
 	/**
@@ -293,8 +467,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) -->
@@ -324,8 +508,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 -->
@@ -346,6 +540,7 @@
 						showTimestamp={showTimestamps}
 						isLast={index === displayMessages.length - 1}
 						{enableMarkdown}
+						{compactSystemMessages}
 					/>
 				{/if}
 			{/each}
@@ -365,42 +560,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>
 
@@ -616,6 +835,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 {
@@ -631,7 +897,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,28 @@ 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;
+    /**
+     * Whether to display system messages in compact mode.
+     * When true, system messages appear as minimal inline text
+     * instead of full chat bubbles to reduce visual noise.
+     * @default true
+     */
+    compactSystemMessages?: boolean;
 }
 declare const ChatPanel: import("svelte").Component<Props, {}, "">;
 type ChatPanel = ReturnType<typeof ChatPanel>;

package/dist/components/playground/MessageBubble.svelte

@@ -4,13 +4,18 @@
   Renders individual messages in the playground chat interface.
   Supports different message roles with distinct styling.
   Supports markdown rendering for message content.
+  Supports compact mode for system messages to reduce visual noise.
   Styled with BEM syntax.
 -->
 
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { marked } from 'marked';
-	import type { PlaygroundMessage, PlaygroundMessageRole } from '../../types/playground.js';
+	import type {
+		PlaygroundMessage,
+		PlaygroundMessageMetadata,
+		PlaygroundMessageRole
+	} from '../../types/playground.js';
 
 	/**
 	 * Component props
@@ -24,9 +29,28 @@
 		isLast?: boolean;
 		/** Whether to render markdown content */
 		enableMarkdown?: boolean;
-	}
+		/**
+		 * Use compact display mode for system messages.
+		 * When true, system messages are rendered as minimal inline text
+		 * instead of full chat bubbles to reduce visual noise.
+		 * @default true
+		 */
+		compactSystemMessages?: boolean;
+	}
+
+	let {
+		message,
+		showTimestamp = true,
+		isLast = false,
+		enableMarkdown = true,
+		compactSystemMessages = true
+	}: Props = $props();
 
-	let { message, showTimestamp = true, isLast = false, enableMarkdown = true }: Props = $props();
+	/**
+	 * Determine if this message should render in compact mode.
+	 * Only system messages use compact mode when enabled.
+	 */
+	const useCompactMode = $derived(message.role === 'system' && compactSystemMessages);
 
 	/**
 	 * Render content as markdown or plain text
@@ -60,18 +84,22 @@
 	 * Get the display label for the message role
 	 *
 	 * @param role - The message role
+	 * @param metadata - Optional message metadata containing userName for user messages
 	 * @returns Display label
 	 */
-	function getRoleLabel(role: PlaygroundMessageRole): string {
+	function getRoleLabel(
+		role: PlaygroundMessageRole,
+		metadata?: PlaygroundMessageMetadata
+	): string {
 		switch (role) {
 			case 'user':
-				return 'You';
+				return metadata?.userName ?? 'You';
 			case 'assistant':
 				return 'Assistant';
 			case 'system':
 				return 'System';
 			case 'log':
-				return message.metadata?.nodeLabel ?? 'Log';
+				return metadata?.nodeLabel ?? 'Log';
 			default:
 				return 'Message';
 		}
@@ -121,68 +149,79 @@
 	}
 </script>
 
-<div
-	class="message-bubble"
-	class:message-bubble--user={message.role === 'user'}
-	class:message-bubble--assistant={message.role === 'assistant'}
-	class:message-bubble--system={message.role === 'system'}
-	class:message-bubble--log={message.role === 'log'}
-	class:message-bubble--log-error={message.role === 'log' && message.metadata?.level === 'error'}
-	class:message-bubble--log-warning={message.role === 'log' &&
-		message.metadata?.level === 'warning'}
-	class:message-bubble--last={isLast}
->
-	<!-- Avatar / Icon -->
-	<div class="message-bubble__avatar">
-		<Icon icon={getRoleIcon(message.role)} />
+{#if useCompactMode}
+	<!-- Compact system message: minimal inline text without bubble -->
+	<div class="system-notice" class:system-notice--last={isLast}>
+		<Icon icon="mdi:information-outline" class="system-notice__icon" />
+		<span class="system-notice__text">{message.content}</span>
+		{#if showTimestamp}
+			<span class="system-notice__timestamp">{formatTimestamp(message.timestamp)}</span>
+		{/if}
 	</div>
-
-	<!-- Content -->
-	<div class="message-bubble__content">
-		<!-- Header -->
-		<div class="message-bubble__header">
-			<span class="message-bubble__role">{getRoleLabel(message.role)}</span>
-			{#if message.role === 'log' && message.metadata?.level}
-				<span class="message-bubble__log-level message-bubble__log-level--{message.metadata.level}">
-					<Icon icon={getLogLevelIcon()} />
-					{message.metadata.level.toUpperCase()}
-				</span>
-			{/if}
-			{#if showTimestamp}
-				<span class="message-bubble__timestamp">{formatTimestamp(message.timestamp)}</span>
-			{/if}
+{:else}
+	<div
+		class="message-bubble"
+		class:message-bubble--user={message.role === 'user'}
+		class:message-bubble--assistant={message.role === 'assistant'}
+		class:message-bubble--system={message.role === 'system'}
+		class:message-bubble--log={message.role === 'log'}
+		class:message-bubble--log-error={message.role === 'log' && message.metadata?.level === 'error'}
+		class:message-bubble--log-warning={message.role === 'log' &&
+			message.metadata?.level === 'warning'}
+		class:message-bubble--last={isLast}
+	>
+		<!-- Avatar / Icon -->
+		<div class="message-bubble__avatar">
+			<Icon icon={getRoleIcon(message.role)} />
 		</div>
 
-		<!-- Message Text -->
-		<div class="message-bubble__text">
-			{#if enableMarkdown && message.role !== 'log'}
-				<!-- Markdown content - marked.js sanitizes content by default -->
-				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-				{@html renderedContent}
-			{:else}
-				{message.content}
-			{/if}
-		</div>
-
-		<!-- Metadata Footer -->
-		{#if message.metadata?.duration !== undefined || message.nodeId}
-			<div class="message-bubble__footer">
-				{#if message.nodeId}
-					<span class="message-bubble__node" title="Node ID: {message.nodeId}">
-						<Icon icon="mdi:graph" />
-						{message.metadata?.nodeLabel ?? message.nodeId}
+		<!-- Content -->
+		<div class="message-bubble__content">
+			<!-- Header -->
+			<div class="message-bubble__header">
+				<span class="message-bubble__role">{getRoleLabel(message.role, message.metadata)}</span>
+				{#if message.role === 'log' && message.metadata?.level}
+					<span class="message-bubble__log-level message-bubble__log-level--{message.metadata.level}">
+						<Icon icon={getLogLevelIcon()} />
+						{message.metadata.level.toUpperCase()}
 					</span>
 				{/if}
-				{#if message.metadata?.duration !== undefined}
-					<span class="message-bubble__duration" title="Execution duration">
-						<Icon icon="mdi:timer-outline" />
-						{formatDuration(message.metadata.duration)}
-					</span>
+				{#if showTimestamp}
+					<span class="message-bubble__timestamp">{formatTimestamp(message.timestamp)}</span>
 				{/if}
 			</div>
-		{/if}
+
+			<!-- Message Text -->
+			<div class="message-bubble__text">
+				{#if enableMarkdown && message.role !== 'log'}
+					<!-- Markdown content - marked.js sanitizes content by default -->
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html renderedContent}
+				{:else}
+					{message.content}
+				{/if}
+			</div>
+
+			<!-- Metadata Footer -->
+			{#if message.metadata?.duration !== undefined || message.nodeId}
+				<div class="message-bubble__footer">
+					{#if message.nodeId}
+						<span class="message-bubble__node" title="Node ID: {message.nodeId}">
+							<Icon icon="mdi:graph" />
+							{message.metadata?.nodeLabel ?? message.nodeId}
+						</span>
+					{/if}
+					{#if message.metadata?.duration !== undefined}
+						<span class="message-bubble__duration" title="Execution duration">
+							<Icon icon="mdi:timer-outline" />
+							{formatDuration(message.metadata.duration)}
+						</span>
+					{/if}
+				</div>
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.message-bubble {
@@ -542,4 +581,51 @@
 			font-size: 1rem;
 		}
 	}
+
+	/* ========================================
+	   Compact System Notice Styles
+	   Minimal inline display for system messages
+	   ======================================== */
+
+	.system-notice {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		margin: 0.25rem 0;
+		font-size: 0.75rem;
+		color: #9ca3af;
+		text-align: center;
+	}
+
+	.system-notice--last {
+		margin-bottom: 0.75rem;
+	}
+
+	/* Icon styling - using :global for Iconify component */
+	.system-notice :global(.system-notice__icon) {
+		flex-shrink: 0;
+		font-size: 0.875rem;
+		color: #d1d5db;
+	}
+
+	.system-notice__text {
+		color: #6b7280;
+		line-height: 1.4;
+	}
+
+	.system-notice__timestamp {
+		flex-shrink: 0;
+		font-size: 0.625rem;
+		color: #d1d5db;
+		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+	}
+
+	/* Responsive: hide timestamp on small screens for compactness */
+	@media (max-width: 640px) {
+		.system-notice__timestamp {
+			display: none;
+		}
+	}
 </style>

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

@@ -11,6 +11,13 @@ interface Props {
     isLast?: boolean;
     /** Whether to render markdown content */
     enableMarkdown?: boolean;
+    /**
+     * Use compact display mode for system messages.
+     * When true, system messages are rendered as minimal inline text
+     * instead of full chat bubbles to reduce visual noise.
+     * @default true
+     */
+    compactSystemMessages?: boolean;
 }
 declare const MessageBubble: import("svelte").Component<Props, {}, "">;
 type MessageBubble = ReturnType<typeof MessageBubble>;

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

@@ -74,6 +74,8 @@ export interface PlaygroundMessageMetadata {
     nodeLabel?: string;
     /** Node output data */
     outputs?: Record<string, unknown>;
+    /** User's display name for user-role messages (from backend) */
+    userName?: string;
     /** Allow additional properties */
     [key: string]: unknown;
 }
@@ -194,7 +196,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.39",
+	"version": "0.0.41",
 	"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",