@d34dman/flowdrop 0.0.37 → 0.0.39

package/dist/components/playground/ChatPanel.svelte

@@ -10,7 +10,13 @@
 	import Icon from '@iconify/svelte';
 	import { tick } from 'svelte';
 	import MessageBubble from './MessageBubble.svelte';
+	import { InterruptBubble } from '../interrupt/index.js';
 	import type { PlaygroundMessage } from '../../types/playground.js';
+	import {
+		isInterruptMetadata,
+		extractInterruptMetadata,
+		metadataToInterrupt
+	} from '../../types/interrupt.js';
 	import {
 		messages,
 		chatMessages,
@@ -18,6 +24,11 @@
 		sessionStatus,
 		currentSession
 	} from '../../stores/playgroundStore.js';
+	import {
+		interrupts,
+		interruptActions,
+		getInterruptByMessageId
+	} from '../../stores/interruptStore.js';
 
 	/**
 	 * Component props
@@ -37,6 +48,8 @@
 		showLogsInline?: boolean;
 		/** Whether to enable markdown rendering in messages */
 		enableMarkdown?: boolean;
+		/** Callback when an interrupt is resolved (to refresh messages) */
+		onInterruptResolved?: () => void;
 	}
 
 	let {
@@ -46,7 +59,8 @@
 		onSendMessage,
 		onStopExecution,
 		showLogsInline = false,
-		enableMarkdown = true
+		enableMarkdown = true,
+		onInterruptResolved
 	}: Props = $props();
 
 	/** Input field value */
@@ -63,6 +77,71 @@
 	 */
 	const displayMessages = $derived(showLogsInline ? $messages : $chatMessages);
 
+	/**
+	 * Check if a message is an interrupt request
+	 */
+	function isInterruptMessage(message: PlaygroundMessage): boolean {
+		return isInterruptMetadata(message.metadata as Record<string, unknown> | undefined);
+	}
+
+	/**
+	 * Sync interrupt messages to the interrupt store.
+	 * 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
+		const interruptMessages = displayMessages.filter(isInterruptMessage);
+
+		for (const message of interruptMessages) {
+			// Check if we already have this interrupt in the store
+			const existing = getInterruptByMessageId(message.id);
+			if (!existing) {
+				// Extract and validate interrupt metadata
+				const metadata = extractInterruptMetadata(
+					message.metadata as Record<string, unknown> | undefined
+				);
+				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);
+					}
+				}
+			}
+		}
+	});
+
+	/**
+	 * Reactive map of message IDs to interrupts.
+	 * This ensures the component re-renders when interrupts are added to the store.
+	 */
+	const interruptsByMessageId = $derived(
+		new Map(
+			Array.from($interrupts.values())
+				.filter((i) => i.messageId)
+				.map((i) => [i.messageId, i])
+		)
+	);
+
+	/**
+	 * Get interrupt data for a message from the reactive map
+	 */
+	function getInterruptForMessage(message: PlaygroundMessage) {
+		return interruptsByMessageId.get(message.id);
+	}
+
 	/**
 	 * Check if we should show the welcome state
 	 */
@@ -126,6 +205,52 @@
 		}
 	});
 
+	/**
+	 * Track previous executing state to detect when execution completes
+	 */
+	let wasExecuting = $state(false);
+
+	/**
+	 * Auto-focus input when execution completes or session becomes ready
+	 */
+	$effect(() => {
+		const currentlyExecuting = $isExecuting;
+
+		// Focus input when execution completes (was executing, now not)
+		if (wasExecuting && !currentlyExecuting && inputField) {
+			tick().then(() => {
+				inputField?.focus();
+			});
+		}
+
+		// Update tracking state
+		wasExecuting = currentlyExecuting;
+	});
+
+	/**
+	 * Focus input when session status changes to idle or completed
+	 */
+	$effect(() => {
+		const status = $sessionStatus;
+		if ((status === 'idle' || status === 'completed') && inputField && !$isExecuting) {
+			tick().then(() => {
+				inputField?.focus();
+			});
+		}
+	});
+
+	/**
+	 * Focus input when a new session is created/loaded
+	 */
+	$effect(() => {
+		const session = $currentSession;
+		if (session && inputField && !$isExecuting) {
+			tick().then(() => {
+				inputField?.focus();
+			});
+		}
+	});
+
 	/**
 	 * Auto-resize textarea based on content
 	 */
@@ -205,12 +330,24 @@
 		{:else}
 			<!-- Messages -->
 			{#each displayMessages as message, index (message.id)}
-				<MessageBubble
-					{message}
-					showTimestamp={showTimestamps}
-					isLast={index === displayMessages.length - 1}
-					{enableMarkdown}
-				/>
+				{#if isInterruptMessage(message)}
+					<!-- Render interrupt inline -->
+					{@const interrupt = getInterruptForMessage(message)}
+					{#if interrupt}
+						<InterruptBubble
+							{interrupt}
+							showTimestamp={showTimestamps}
+							onResolved={onInterruptResolved}
+						/>
+					{/if}
+				{:else}
+					<MessageBubble
+						{message}
+						showTimestamp={showTimestamps}
+						isLast={index === displayMessages.length - 1}
+						{enableMarkdown}
+					/>
+				{/if}
 			{/each}
 
 			{#if $isExecuting}

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

@@ -16,6 +16,8 @@ interface Props {
     showLogsInline?: boolean;
     /** Whether to enable markdown rendering in messages */
     enableMarkdown?: boolean;
+    /** Callback when an interrupt is resolved (to refresh messages) */
+    onInterruptResolved?: () => void;
 }
 declare const ChatPanel: import("svelte").Component<Props, {}, "">;
 type ChatPanel = ReturnType<typeof ChatPanel>;

package/dist/components/playground/MessageBubble.svelte

@@ -32,9 +32,7 @@
 	 * Render content as markdown or plain text
 	 */
 	const renderedContent = $derived(
-		enableMarkdown && message.role !== 'log'
-			? marked.parse(message.content || '')
-			: message.content
+		enableMarkdown && message.role !== 'log' ? marked.parse(message.content || '') : message.content
 	);
 
 	/**

package/dist/components/playground/Playground.svelte

@@ -19,6 +19,7 @@
 		PlaygroundMessagesApiResponse
 	} from '../../types/playground.js';
 	import { playgroundService } from '../../services/playgroundService.js';
+	import { interruptService } from '../../services/interruptService.js';
 	import { setEndpointConfig } from '../../services/api.js';
 	import {
 		currentSession,
@@ -30,6 +31,7 @@
 		playgroundActions,
 		inputFields
 	} from '../../stores/playgroundStore.js';
+	import { interruptActions } from '../../stores/interruptStore.js';
 	import { get } from 'svelte/store';
 
 	/**
@@ -109,7 +111,9 @@
 	 */
 	onDestroy(() => {
 		playgroundService.stopPolling();
+		interruptService.stopPolling();
 		playgroundActions.reset();
+		interruptActions.reset();
 	});
 
 	/**
@@ -241,8 +245,14 @@
 	 */
 	function handleCloseSession(): void {
 		playgroundService.stopPolling();
+		interruptService.stopPolling();
 		playgroundActions.setCurrentSession(null);
 		playgroundActions.clearMessages();
+		// Clear interrupts for this session
+		const sessionId = get(currentSession)?.id;
+		if (sessionId) {
+			interruptActions.clearSessionInterrupts(sessionId);
+		}
 	}
 
 	/**
@@ -335,12 +345,46 @@
 					playgroundActions.addMessages(response.data);
 				}
 
+				// Update session status
+				if (response.sessionStatus) {
+					playgroundActions.updateSessionStatus(response.sessionStatus);
+
+					// Stop executing if idle, completed, or failed
+					// "idle" means no processing is happening (execution finished)
+					if (
+						response.sessionStatus === 'idle' ||
+						response.sessionStatus === 'completed' ||
+						response.sessionStatus === 'failed'
+					) {
+						playgroundActions.setExecuting(false);
+					}
+				}
+			},
+			pollingInterval
+		);
+	}
+
+	/**
+	 * Refresh messages for the current session
+	 * Called after interrupt resolution when polling has stopped
+	 */
+	async function handleInterruptResolved(): Promise<void> {
+		const sessionId = get(currentSession)?.id;
+		if (!sessionId) return;
+
+		try {
+			const response = await playgroundService.getMessages(sessionId);
+
+			// Add new messages (deduplicates automatically)
+			if (response.data && response.data.length > 0) {
+				playgroundActions.addMessages(response.data);
+			}
+
 			// Update session status
 			if (response.sessionStatus) {
 				playgroundActions.updateSessionStatus(response.sessionStatus);
 
-				// Stop executing if idle, completed, or failed
-				// "idle" means no processing is happening (execution finished)
+				// Update executing state based on session status
 				if (
 					response.sessionStatus === 'idle' ||
 					response.sessionStatus === 'completed' ||
@@ -349,9 +393,9 @@
 					playgroundActions.setExecuting(false);
 				}
 			}
-			},
-			pollingInterval
-		);
+		} catch (err) {
+			console.error('[Playground] Failed to refresh messages after interrupt:', err);
+		}
 	}
 
 	/**
@@ -521,6 +565,7 @@
 						enableMarkdown={config.enableMarkdown ?? true}
 						onSendMessage={handleSendMessage}
 						onStopExecution={handleStopExecution}
+						onInterruptResolved={handleInterruptResolved}
 					/>
 				{/if}
 			</div>

package/dist/components/playground/PlaygroundModal.svelte

@@ -7,11 +7,11 @@
 -->
 
 <script lang="ts">
-	import Icon from "@iconify/svelte";
-	import Playground from "./Playground.svelte";
-	import type { Workflow } from "../../types/index.js";
-	import type { EndpointConfig } from "../../config/endpoints.js";
-	import type { PlaygroundConfig } from "../../types/playground.js";
+	import Icon from '@iconify/svelte';
+	import Playground from './Playground.svelte';
+	import type { Workflow } from '../../types/index.js';
+	import type { EndpointConfig } from '../../config/endpoints.js';
+	import type { PlaygroundConfig } from '../../types/playground.js';
 
 	/**
 	 * Component props
@@ -47,7 +47,7 @@
 	 * Close modal on Escape key
 	 */
 	function handleKeydown(event: KeyboardEvent): void {
-		if (event.key === "Escape") {
+		if (event.key === 'Escape') {
 			onClose();
 		}
 	}
@@ -74,7 +74,8 @@
 		tabindex="-1"
 	>
 		<!-- Modal Container -->
-		<div class="playground-modal" onclick={(e) => e.stopPropagation()}>
+		<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+		<div class="playground-modal" onclick={(e) => e.stopPropagation()} role="presentation">
 			<!-- Modal Header -->
 			<div class="playground-modal__header">
 				<div class="playground-modal__title" id="playground-modal-title">

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

@@ -1,6 +1,6 @@
-import type { Workflow } from "../../types/index.js";
-import type { EndpointConfig } from "../../config/endpoints.js";
-import type { PlaygroundConfig } from "../../types/playground.js";
+import type { Workflow } from '../../types/index.js';
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { PlaygroundConfig } from '../../types/playground.js';
 /**
  * Component props
  */

package/dist/config/endpoints.d.ts

@@ -58,6 +58,18 @@ export interface EndpointConfig {
             /** Stop execution in a session */
             stopExecution: string;
         };
+        interrupts: {
+            /** Get interrupt details by ID */
+            get: string;
+            /** Resolve an interrupt with user response */
+            resolve: string;
+            /** Cancel a pending interrupt */
+            cancel: string;
+            /** List interrupts for a playground session */
+            listBySession: string;
+            /** List interrupts for a pipeline */
+            listByPipeline: string;
+        };
         templates: {
             list: string;
             get: string;

package/dist/config/endpoints.js

@@ -52,6 +52,13 @@ export const defaultEndpointConfig = {
             sendMessage: '/playground/sessions/{sessionId}/messages',
             stopExecution: '/playground/sessions/{sessionId}/stop'
         },
+        interrupts: {
+            get: '/interrupts/{interruptId}',
+            resolve: '/interrupts/{interruptId}',
+            cancel: '/interrupts/{interruptId}/cancel',
+            listBySession: '/playground/sessions/{sessionId}/interrupts',
+            listByPipeline: '/pipelines/{pipelineId}/interrupts'
+        },
         templates: {
             list: '/templates',
             get: '/templates/{id}',

package/dist/playground/index.d.ts

@@ -117,9 +117,14 @@ export { default as SessionManager } from '../components/playground/SessionManag
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';
 export { default as ExecutionLogs } from '../components/playground/ExecutionLogs.svelte';
 export { default as MessageBubble } from '../components/playground/MessageBubble.svelte';
+export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt } from '../components/interrupt/index.js';
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
+export { InterruptService, interruptService } from '../services/interruptService.js';
 export { currentSession, sessions, messages, isExecuting, isLoading, error as playgroundError, currentWorkflow, lastPollTimestamp, sessionStatus, messageCount, chatMessages, logMessages, latestMessage, inputFields, hasChatInput, sessionCount, playgroundActions, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.js';
 export type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, PlaygroundMessageRequest, PlaygroundMessagesResult, PlaygroundConfig, PlaygroundMode, PlaygroundSessionStatus, PlaygroundMessageRole, PlaygroundMessageLevel, PlaygroundMessageMetadata, PlaygroundApiResponse, PlaygroundSessionsResponse, PlaygroundSessionResponse, PlaygroundMessageResponse, PlaygroundMessagesApiResponse } from '../types/playground.js';
 export { isChatInputNode, CHAT_INPUT_PATTERNS } from '../types/playground.js';
+export type { InterruptType, InterruptStatus, Interrupt, InterruptChoice, InterruptConfig, ConfirmationConfig, ChoiceConfig, TextConfig, FormConfig, InterruptResolution, InterruptApiResponse, InterruptListResponse, InterruptResponse, InterruptMessageMetadata, InterruptPollingConfig } from '../types/interrupt.js';
+export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, defaultInterruptPollingConfig } from '../types/interrupt.js';
+export { interrupts, submittingInterrupts, interruptErrors, pendingInterruptIds, pendingInterrupts, pendingInterruptCount, resolvedInterrupts, isAnySubmitting, interruptActions, getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId } from '../stores/interruptStore.js';
 export { mountPlayground, unmountPlayground, type PlaygroundMountOptions, type MountedPlayground } from './mount.js';
 export { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl, type EndpointConfig } from '../config/endpoints.js';

package/dist/playground/index.js

@@ -121,10 +121,18 @@ export { default as InputCollector } from '../components/playground/InputCollect
 export { default as ExecutionLogs } from '../components/playground/ExecutionLogs.svelte';
 export { default as MessageBubble } from '../components/playground/MessageBubble.svelte';
 // ============================================================================
+// Interrupt Components (Human-in-the-Loop)
+// ============================================================================
+export { InterruptBubble, ConfirmationPrompt, ChoicePrompt, TextInputPrompt, FormPrompt } from '../components/interrupt/index.js';
+// ============================================================================
 // Playground Service
 // ============================================================================
 export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
 // ============================================================================
+// Interrupt Service (Human-in-the-Loop)
+// ============================================================================
+export { InterruptService, interruptService } from '../services/interruptService.js';
+// ============================================================================
 // Playground Store
 // ============================================================================
 export { 
@@ -137,6 +145,19 @@ playgroundActions,
 // Utilities
 getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.js';
 export { isChatInputNode, CHAT_INPUT_PATTERNS } from '../types/playground.js';
+export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, defaultInterruptPollingConfig } from '../types/interrupt.js';
+// ============================================================================
+// Interrupt Store (Human-in-the-Loop)
+// ============================================================================
+export { 
+// Core stores
+interrupts, submittingInterrupts, interruptErrors, 
+// Derived stores
+pendingInterruptIds, pendingInterrupts, pendingInterruptCount, resolvedInterrupts, isAnySubmitting, 
+// Actions
+interruptActions, 
+// Utilities
+getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId } from '../stores/interruptStore.js';
 // ============================================================================
 // Playground Mount Functions (for vanilla JS / Drupal / IIFE integration)
 // ============================================================================

package/dist/playground/mount.d.ts

@@ -43,9 +43,9 @@
  * })(Drupal, window.FlowDrop);
  * ```
  */
-import type { Workflow } from "../types/index.js";
-import type { EndpointConfig } from "../config/endpoints.js";
-import type { PlaygroundMode, PlaygroundConfig, PlaygroundSession } from "../types/playground.js";
+import type { Workflow } from '../types/index.js';
+import type { EndpointConfig } from '../config/endpoints.js';
+import type { PlaygroundMode, PlaygroundConfig, PlaygroundSession } from '../types/playground.js';
 /**
  * Mount options for Playground component
  */

package/dist/playground/mount.js

@@ -43,13 +43,13 @@
  * })(Drupal, window.FlowDrop);
  * ```
  */
-import { mount, unmount } from "svelte";
-import Playground from "../components/playground/Playground.svelte";
-import PlaygroundModal from "../components/playground/PlaygroundModal.svelte";
-import { setEndpointConfig } from "../services/api.js";
-import { playgroundService } from "../services/playgroundService.js";
-import { currentSession, sessions, messages, playgroundActions } from "../stores/playgroundStore.js";
-import { get } from "svelte/store";
+import { mount, unmount } from 'svelte';
+import Playground from '../components/playground/Playground.svelte';
+import PlaygroundModal from '../components/playground/PlaygroundModal.svelte';
+import { setEndpointConfig } from '../services/api.js';
+import { playgroundService } from '../services/playgroundService.js';
+import { currentSession, sessions, messages, playgroundActions } from '../stores/playgroundStore.js';
+import { get } from 'svelte/store';
 /**
  * Mount the Playground component in a container
  *
@@ -80,23 +80,23 @@ import { get } from "svelte/store";
  * ```
  */
 export async function mountPlayground(container, options) {
-    const { workflowId, workflow, mode = "standalone", initialSessionId, endpointConfig, config = {}, height = "100%", width = "100%", onClose } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height = '100%', width = '100%', onClose } = options;
     // Validate required parameters
     if (!workflowId) {
-        throw new Error("workflowId is required for mountPlayground()");
+        throw new Error('workflowId is required for mountPlayground()');
     }
     if (!container) {
-        throw new Error("container element is required for mountPlayground()");
+        throw new Error('container element is required for mountPlayground()');
     }
     // Validate onClose for modal mode
-    if (mode === "modal" && !onClose) {
-        throw new Error("onClose callback is required for modal mode");
+    if (mode === 'modal' && !onClose) {
+        throw new Error('onClose callback is required for modal mode');
     }
     // Set endpoint configuration if provided
     let finalEndpointConfig;
     if (endpointConfig) {
         // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import("../config/endpoints.js");
+        const { defaultEndpointConfig } = await import('../config/endpoints.js');
         finalEndpointConfig = {
             ...defaultEndpointConfig,
             ...endpointConfig,
@@ -111,7 +111,7 @@ export async function mountPlayground(container, options) {
     // For modal mode, PlaygroundModal creates its own backdrop, so we mount directly to body
     // For other modes, use the provided container
     let targetContainer = container;
-    if (mode === "modal") {
+    if (mode === 'modal') {
         // For modal mode, create a container in the body
         // PlaygroundModal will handle the backdrop itself
         targetContainer = document.body;
@@ -122,10 +122,12 @@ export async function mountPlayground(container, options) {
         container.style.width = width;
     }
     // Mount the appropriate component
-    const svelteApp = mount(mode === "modal" ? PlaygroundModal : Playground, {
-        target: targetContainer,
-        props: mode === "modal"
-            ? {
+    // Separate the mount calls to avoid TypeScript inference issues with different props types
+    let svelteApp;
+    if (mode === 'modal') {
+        svelteApp = mount(PlaygroundModal, {
+            target: targetContainer,
+            props: {
                 isOpen: true,
                 workflowId,
                 workflow,
@@ -138,7 +140,12 @@ export async function mountPlayground(container, options) {
                     }
                 }
             }
-            : {
+        });
+    }
+    else {
+        svelteApp = mount(Playground, {
+            target: targetContainer,
+            props: {
                 workflowId,
                 workflow,
                 mode,
@@ -147,12 +154,13 @@ export async function mountPlayground(container, options) {
                 config,
                 onClose
             }
-    });
+        });
+    }
     // Store state for cleanup
     const state = {
         svelteApp,
         container: targetContainer,
-        originalContainer: mode === "modal" ? container : undefined,
+        originalContainer: mode === 'modal' ? container : undefined,
         workflowId
     };
     // Create the mounted playground interface
@@ -203,7 +211,7 @@ export async function mountPlayground(container, options) {
  * ```
  */
 export function unmountPlayground(app) {
-    if (app && typeof app.destroy === "function") {
+    if (app && typeof app.destroy === 'function') {
         app.destroy();
     }
 }