@d34dman/flowdrop 0.0.31 → 0.0.33

package/dist/components/playground/ChatPanel.svelte

@@ -35,6 +35,8 @@
 		onStopExecution?: () => void;
 		/** Whether to show log messages inline (false = hide them) */
 		showLogsInline?: boolean;
+		/** Whether to enable markdown rendering in messages */
+		enableMarkdown?: boolean;
 	}
 
 	let {
@@ -43,7 +45,8 @@
 		placeholder = 'Type your message...',
 		onSendMessage,
 		onStopExecution,
-		showLogsInline = false
+		showLogsInline = false,
+		enableMarkdown = true
 	}: Props = $props();
 
 	/** Input field value */
@@ -206,6 +209,7 @@
 					{message}
 					showTimestamp={showTimestamps}
 					isLast={index === displayMessages.length - 1}
+					{enableMarkdown}
 				/>
 			{/each}
 

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

@@ -14,6 +14,8 @@ interface Props {
     onStopExecution?: () => void;
     /** Whether to show log messages inline (false = hide them) */
     showLogsInline?: boolean;
+    /** Whether to enable markdown rendering in messages */
+    enableMarkdown?: boolean;
 }
 declare const ChatPanel: import("svelte").Component<Props, {}, "">;
 type ChatPanel = ReturnType<typeof ChatPanel>;

package/dist/components/playground/MessageBubble.svelte

@@ -3,11 +3,13 @@
   
   Renders individual messages in the playground chat interface.
   Supports different message roles with distinct styling.
+  Supports markdown rendering for message content.
   Styled with BEM syntax.
 -->
 
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import { marked } from 'marked';
 	import type { PlaygroundMessage, PlaygroundMessageRole } from '../../types/playground.js';
 
 	/**
@@ -20,9 +22,20 @@
 		showTimestamp?: boolean;
 		/** Whether this is the last message (affects styling) */
 		isLast?: boolean;
+		/** Whether to render markdown content */
+		enableMarkdown?: boolean;
 	}
 
-	let { message, showTimestamp = true, isLast = false }: Props = $props();
+	let { message, showTimestamp = true, isLast = false, enableMarkdown = true }: Props = $props();
+
+	/**
+	 * Render content as markdown or plain text
+	 */
+	const renderedContent = $derived(
+		enableMarkdown && message.role !== 'log'
+			? marked.parse(message.content || '')
+			: message.content
+	);
 
 	/**
 	 * Get the icon for the message role
@@ -144,7 +157,13 @@
 
 		<!-- Message Text -->
 		<div class="message-bubble__text">
-			{message.content}
+			{#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 -->
@@ -188,32 +207,33 @@
 		}
 	}
 
-	/* Role-specific styling */
+	/* Role-specific styling - Neutral theme */
 	.message-bubble--user {
-		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-		color: #ffffff;
+		background-color: #f1f5f9;
+		border: 1px solid #e2e8f0;
+		color: #1e293b;
 		margin-left: 2rem;
 		flex-direction: row-reverse;
 	}
 
 	.message-bubble--assistant {
-		background-color: #f8fafc;
-		border: 1px solid #e2e8f0;
-		color: #1e293b;
+		background-color: #ffffff;
+		border: 1px solid #e5e7eb;
+		color: #1f2937;
 		margin-right: 2rem;
 	}
 
 	.message-bubble--system {
-		background-color: #fef3c7;
-		border: 1px solid #fcd34d;
-		color: #92400e;
+		background-color: #f9fafb;
+		border: 1px solid #e5e7eb;
+		color: #6b7280;
 		margin: 0 1rem;
 		font-size: 0.875rem;
 	}
 
 	.message-bubble--log {
-		background-color: #f1f5f9;
-		border: 1px solid #cbd5e1;
+		background-color: #f8fafc;
+		border: 1px solid #e2e8f0;
 		color: #475569;
 		margin: 0 1rem;
 		font-size: 0.8125rem;
@@ -249,18 +269,18 @@
 	}
 
 	.message-bubble--user .message-bubble__avatar {
-		background-color: rgba(255, 255, 255, 0.2);
-		color: #ffffff;
+		background-color: #e2e8f0;
+		color: #475569;
 	}
 
 	.message-bubble--assistant .message-bubble__avatar {
-		background-color: #dbeafe;
-		color: #2563eb;
+		background-color: #e5e7eb;
+		color: #374151;
 	}
 
 	.message-bubble--system .message-bubble__avatar {
-		background-color: #fde68a;
-		color: #92400e;
+		background-color: #f3f4f6;
+		color: #6b7280;
 	}
 
 	.message-bubble--log .message-bubble__avatar {
@@ -292,14 +312,15 @@
 	.message-bubble__role {
 		font-weight: 600;
 		font-size: 0.8125rem;
+		color: #374151;
 	}
 
 	.message-bubble--user .message-bubble__role {
-		color: rgba(255, 255, 255, 0.9);
+		color: #475569;
 	}
 
 	.message-bubble--assistant .message-bubble__role {
-		color: #3b82f6;
+		color: #374151;
 	}
 
 	.message-bubble--log .message-bubble__role {
@@ -319,8 +340,8 @@
 	}
 
 	.message-bubble__log-level--info {
-		background-color: #dbeafe;
-		color: #1d4ed8;
+		background-color: #e0f2fe;
+		color: #0369a1;
 	}
 
 	.message-bubble__log-level--warning {
@@ -340,24 +361,152 @@
 
 	.message-bubble__timestamp {
 		font-size: 0.6875rem;
-		opacity: 0.7;
+		color: #9ca3af;
 		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
 	}
 
 	.message-bubble--user .message-bubble__timestamp {
-		color: rgba(255, 255, 255, 0.7);
+		color: #9ca3af;
 	}
 
 	/* Message text */
 	.message-bubble__text {
-		line-height: 1.5;
-		white-space: pre-wrap;
+		line-height: 1.6;
 		word-break: break-word;
 	}
 
 	.message-bubble--log .message-bubble__text {
 		font-size: 0.8125rem;
 		line-height: 1.4;
+		white-space: pre-wrap;
+	}
+
+	/* Markdown styling for message content */
+	.message-bubble__text :global(p) {
+		margin: 0 0 0.75rem 0;
+	}
+
+	.message-bubble__text :global(p:last-child) {
+		margin-bottom: 0;
+	}
+
+	.message-bubble__text :global(h1),
+	.message-bubble__text :global(h2),
+	.message-bubble__text :global(h3),
+	.message-bubble__text :global(h4),
+	.message-bubble__text :global(h5),
+	.message-bubble__text :global(h6) {
+		margin: 1rem 0 0.5rem 0;
+		font-weight: 600;
+		line-height: 1.3;
+	}
+
+	.message-bubble__text :global(h1:first-child),
+	.message-bubble__text :global(h2:first-child),
+	.message-bubble__text :global(h3:first-child),
+	.message-bubble__text :global(h4:first-child),
+	.message-bubble__text :global(h5:first-child),
+	.message-bubble__text :global(h6:first-child) {
+		margin-top: 0;
+	}
+
+	.message-bubble__text :global(h1) {
+		font-size: 1.25rem;
+	}
+
+	.message-bubble__text :global(h2) {
+		font-size: 1.125rem;
+	}
+
+	.message-bubble__text :global(h3) {
+		font-size: 1rem;
+	}
+
+	.message-bubble__text :global(ul),
+	.message-bubble__text :global(ol) {
+		margin: 0.5rem 0;
+		padding-left: 1.5rem;
+	}
+
+	.message-bubble__text :global(li) {
+		margin: 0.25rem 0;
+	}
+
+	.message-bubble__text :global(code) {
+		background-color: rgba(0, 0, 0, 0.06);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-size: 0.875em;
+	}
+
+	.message-bubble__text :global(pre) {
+		background-color: #1e293b;
+		color: #e2e8f0;
+		padding: 0.75rem 1rem;
+		border-radius: 0.5rem;
+		overflow-x: auto;
+		margin: 0.75rem 0;
+		font-size: 0.8125rem;
+		line-height: 1.5;
+	}
+
+	.message-bubble__text :global(pre code) {
+		background-color: transparent;
+		padding: 0;
+		border-radius: 0;
+		color: inherit;
+		font-size: inherit;
+	}
+
+	.message-bubble__text :global(blockquote) {
+		border-left: 3px solid #d1d5db;
+		padding-left: 1rem;
+		margin: 0.75rem 0;
+		color: #6b7280;
+		font-style: italic;
+	}
+
+	.message-bubble__text :global(a) {
+		color: #2563eb;
+		text-decoration: none;
+	}
+
+	.message-bubble__text :global(a:hover) {
+		text-decoration: underline;
+	}
+
+	.message-bubble__text :global(hr) {
+		border: none;
+		border-top: 1px solid #e5e7eb;
+		margin: 1rem 0;
+	}
+
+	.message-bubble__text :global(table) {
+		border-collapse: collapse;
+		width: 100%;
+		margin: 0.75rem 0;
+		font-size: 0.875rem;
+	}
+
+	.message-bubble__text :global(th),
+	.message-bubble__text :global(td) {
+		border: 1px solid #e5e7eb;
+		padding: 0.5rem 0.75rem;
+		text-align: left;
+	}
+
+	.message-bubble__text :global(th) {
+		background-color: #f9fafb;
+		font-weight: 600;
+	}
+
+	.message-bubble__text :global(strong) {
+		font-weight: 600;
+	}
+
+	.message-bubble__text :global(em) {
+		font-style: italic;
 	}
 
 	/* Footer */
@@ -367,7 +516,7 @@
 		gap: 0.75rem;
 		margin-top: 0.5rem;
 		font-size: 0.6875rem;
-		opacity: 0.7;
+		color: #9ca3af;
 	}
 
 	.message-bubble--user .message-bubble__footer {

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

@@ -9,6 +9,8 @@ interface Props {
     showTimestamp?: boolean;
     /** Whether this is the last message (affects styling) */
     isLast?: boolean;
+    /** Whether to render markdown content */
+    enableMarkdown?: boolean;
 }
 declare const MessageBubble: import("svelte").Component<Props, {}, "">;
 type MessageBubble = ReturnType<typeof MessageBubble>;

package/dist/components/playground/Playground.svelte

@@ -335,15 +335,20 @@
 					playgroundActions.addMessages(response.data);
 				}
 
-				// Update session status
-				if (response.sessionStatus) {
-					playgroundActions.updateSessionStatus(response.sessionStatus);
-
-					// Stop executing if completed or failed
-					if (response.sessionStatus === 'completed' || response.sessionStatus === 'failed') {
-						playgroundActions.setExecuting(false);
-					}
+			// 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
 		);
@@ -383,6 +388,7 @@
 	class="playground"
 	class:playground--embedded={mode === 'embedded'}
 	class:playground--standalone={mode === 'standalone'}
+	class:playground--modal={mode === 'modal'}
 >
 	<div class="playground__container">
 		<!-- Sidebar -->
@@ -393,14 +399,18 @@
 					<Icon icon="mdi:play-circle-outline" />
 					<span>Playground</span>
 				</div>
-				{#if mode === 'embedded' && onClose}
+				{#if (mode === 'embedded' || mode === 'modal') && onClose}
 					<button
 						type="button"
 						class="playground__sidebar-close"
 						onclick={onClose}
 						title="Close playground"
 					>
-						<Icon icon="mdi:dock-right" />
+						{#if mode === 'modal'}
+							<Icon icon="mdi:close" />
+						{:else}
+							<Icon icon="mdi:dock-right" />
+						{/if}
 					</button>
 				{/if}
 			</div>
@@ -508,6 +518,7 @@
 						showTimestamps={config.showTimestamps ?? true}
 						autoScroll={config.autoScroll ?? true}
 						showLogsInline={config.logDisplayMode === 'inline'}
+						enableMarkdown={config.enableMarkdown ?? true}
 						onSendMessage={handleSendMessage}
 						onStopExecution={handleStopExecution}
 					/>
@@ -536,6 +547,11 @@
 		height: 100vh;
 	}
 
+	.playground--modal {
+		height: 100%;
+		width: 100%;
+	}
+
 	/* Container */
 	.playground__container {
 		display: flex;

package/dist/components/playground/PlaygroundModal.svelte

@@ -0,0 +1,220 @@
+<!--
+  PlaygroundModal Component
+  
+  Modal wrapper for the Playground component.
+  Provides a centered modal dialog with backdrop, similar to Langflow's implementation.
+  Supports closing via backdrop click, Escape key, or close button.
+-->
+
+<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";
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** Whether the modal is open */
+		isOpen: boolean;
+		/** Target workflow ID */
+		workflowId: string;
+		/** Pre-loaded workflow (optional, will be fetched if not provided) */
+		workflow?: Workflow;
+		/** Resume a specific session */
+		initialSessionId?: string;
+		/** API endpoint configuration */
+		endpointConfig?: EndpointConfig;
+		/** Playground configuration options */
+		config?: PlaygroundConfig;
+		/** Callback when modal is closed */
+		onClose: () => void;
+	}
+
+	let {
+		isOpen,
+		workflowId,
+		workflow,
+		initialSessionId,
+		endpointConfig,
+		config = {},
+		onClose
+	}: Props = $props();
+
+	/**
+	 * Close modal on Escape key
+	 */
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === "Escape") {
+			onClose();
+		}
+	}
+
+	/**
+	 * Close modal when clicking outside (on backdrop)
+	 */
+	function handleBackdropClick(event: MouseEvent): void {
+		if (event.target === event.currentTarget) {
+			onClose();
+		}
+	}
+</script>
+
+{#if isOpen}
+	<!-- Modal Backdrop -->
+	<div
+		class="playground-modal-backdrop"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="playground-modal-title"
+		tabindex="-1"
+	>
+		<!-- Modal Container -->
+		<div class="playground-modal" onclick={(e) => e.stopPropagation()}>
+			<!-- Modal Header -->
+			<div class="playground-modal__header">
+				<div class="playground-modal__title" id="playground-modal-title">
+					<Icon icon="mdi:play-circle-outline" />
+					<span>Playground</span>
+				</div>
+				<button
+					type="button"
+					class="playground-modal__close-btn"
+					onclick={onClose}
+					aria-label="Close playground modal"
+				>
+					<Icon icon="mdi:close" />
+				</button>
+			</div>
+
+			<!-- Modal Content -->
+			<div class="playground-modal__content">
+				<Playground
+					{workflowId}
+					{workflow}
+					mode="modal"
+					{initialSessionId}
+					{endpointConfig}
+					{config}
+					{onClose}
+				/>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.playground-modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1100;
+		padding: 1rem;
+	}
+
+	.playground-modal {
+		background: white;
+		border-radius: 0.75rem;
+		box-shadow:
+			0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.04);
+		width: 100%;
+		max-width: 90vw;
+		min-width: 800px;
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.playground-modal__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1.25rem;
+		border-bottom: 1px solid #e5e7eb;
+		background-color: #fafbfc;
+		flex-shrink: 0;
+	}
+
+	.playground-modal__title {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 1rem;
+		font-weight: 600;
+		color: #1f2937;
+		margin: 0;
+	}
+
+	.playground-modal__close-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		background: transparent;
+		border-radius: 0.375rem;
+		color: #6b7280;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.playground-modal__close-btn:hover {
+		background-color: #f3f4f6;
+		color: #374151;
+	}
+
+	.playground-modal__content {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 1024px) {
+		.playground-modal {
+			max-width: 95vw;
+			min-width: 600px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.playground-modal {
+			max-width: 100%;
+			min-width: auto;
+			max-height: 100vh;
+			border-radius: 0;
+			margin: 0;
+		}
+
+		.playground-modal-backdrop {
+			padding: 0;
+		}
+
+		.playground-modal__header {
+			padding: 0.875rem 1rem;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.playground-modal {
+			max-width: 100%;
+			max-height: 100vh;
+		}
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import type { Workflow } from "../../types/index.js";
+import type { EndpointConfig } from "../../config/endpoints.js";
+import type { PlaygroundConfig } from "../../types/playground.js";
+/**
+ * Component props
+ */
+interface Props {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Target workflow ID */
+    workflowId: string;
+    /** Pre-loaded workflow (optional, will be fetched if not provided) */
+    workflow?: Workflow;
+    /** Resume a specific session */
+    initialSessionId?: string;
+    /** API endpoint configuration */
+    endpointConfig?: EndpointConfig;
+    /** Playground configuration options */
+    config?: PlaygroundConfig;
+    /** Callback when modal is closed */
+    onClose: () => void;
+}
+declare const PlaygroundModal: import("svelte").Component<Props, {}, "">;
+type PlaygroundModal = ReturnType<typeof PlaygroundModal>;
+export default PlaygroundModal;

package/dist/editor/index.d.ts

@@ -54,6 +54,7 @@ export { default as PipelineStatus } from '../components/PipelineStatus.svelte';
 export { default as Navbar } from '../components/Navbar.svelte';
 export { default as Logo } from '../components/Logo.svelte';
 export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';

package/dist/editor/index.js

@@ -69,6 +69,7 @@ export { default as Navbar } from '../components/Navbar.svelte';
 export { default as Logo } from '../components/Logo.svelte';
 // Playground Components
 export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';

package/dist/playground/index.d.ts

@@ -77,8 +77,41 @@
  *   />
  * {/if}
  * ```
+ *
+ * @example In Svelte (Modal mode):
+ * ```svelte
+ * <script>
+ *   import { PlaygroundModal } from "@d34dman/flowdrop/playground";
+ *   let showPlayground = false;
+ * </script>
+ *
+ * <PlaygroundModal
+ *   isOpen={showPlayground}
+ *   workflowId="wf-123"
+ *   workflow={myWorkflow}
+ *   onClose={() => showPlayground = false}
+ * />
+ * ```
+ *
+ * @example Using mountPlayground with modal mode:
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@d34dman/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "modal",
+ *     onClose: () => {
+ *       app.destroy();
+ *     }
+ *   }
+ * );
+ * ```
  */
 export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';

package/dist/playground/index.js

@@ -77,11 +77,44 @@
  *   />
  * {/if}
  * ```
+ *
+ * @example In Svelte (Modal mode):
+ * ```svelte
+ * <script>
+ *   import { PlaygroundModal } from "@d34dman/flowdrop/playground";
+ *   let showPlayground = false;
+ * </script>
+ *
+ * <PlaygroundModal
+ *   isOpen={showPlayground}
+ *   workflowId="wf-123"
+ *   workflow={myWorkflow}
+ *   onClose={() => showPlayground = false}
+ * />
+ * ```
+ *
+ * @example Using mountPlayground with modal mode:
+ * ```typescript
+ * import { mountPlayground, createEndpointConfig } from "@d34dman/flowdrop/playground";
+ *
+ * const app = await mountPlayground(
+ *   document.getElementById("playground-container"),
+ *   {
+ *     workflowId: "wf-123",
+ *     endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *     mode: "modal",
+ *     onClose: () => {
+ *       app.destroy();
+ *     }
+ *   }
+ * );
+ * ```
  */
 // ============================================================================
 // Playground Components
 // ============================================================================
 export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
 export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
 export { default as SessionManager } from '../components/playground/SessionManager.svelte';
 export { default as InputCollector } from '../components/playground/InputCollector.svelte';

package/dist/playground/mount.d.ts

@@ -64,6 +64,7 @@ export interface PlaygroundMountOptions {
      * Display mode
      * - "standalone": Full-page playground experience
      * - "embedded": Panel mode for embedding alongside other content
+     * - "modal": Modal dialog mode with backdrop
      * @default "standalone"
      */
     mode?: PlaygroundMode;
@@ -92,7 +93,7 @@ export interface PlaygroundMountOptions {
      */
     width?: string;
     /**
-     * Callback when playground is closed (for embedded mode)
+     * Callback when playground is closed (required for embedded and modal modes)
      */
     onClose?: () => void;
 }

package/dist/playground/mount.js

@@ -45,6 +45,7 @@
  */
 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";
@@ -87,6 +88,10 @@ export async function mountPlayground(container, options) {
     if (!container) {
         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");
+    }
     // Set endpoint configuration if provided
     let finalEndpointConfig;
     if (endpointConfig) {
@@ -102,26 +107,52 @@ export async function mountPlayground(container, options) {
         };
         setEndpointConfig(finalEndpointConfig);
     }
-    // Apply container styling
-    container.style.height = height;
-    container.style.width = width;
-    // Mount the Svelte Playground component
-    const svelteApp = mount(Playground, {
-        target: container,
-        props: {
-            workflowId,
-            workflow,
-            mode,
-            initialSessionId,
-            endpointConfig: finalEndpointConfig,
-            config,
-            onClose
-        }
+    // Handle modal mode differently
+    // 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") {
+        // For modal mode, create a container in the body
+        // PlaygroundModal will handle the backdrop itself
+        targetContainer = document.body;
+    }
+    else {
+        // Apply container styling for non-modal modes
+        container.style.height = height;
+        container.style.width = width;
+    }
+    // Mount the appropriate component
+    const svelteApp = mount(mode === "modal" ? PlaygroundModal : Playground, {
+        target: targetContainer,
+        props: mode === "modal"
+            ? {
+                isOpen: true,
+                workflowId,
+                workflow,
+                initialSessionId,
+                endpointConfig: finalEndpointConfig,
+                config,
+                onClose: () => {
+                    if (onClose) {
+                        onClose();
+                    }
+                }
+            }
+            : {
+                workflowId,
+                workflow,
+                mode,
+                initialSessionId,
+                endpointConfig: finalEndpointConfig,
+                config,
+                onClose
+            }
     });
     // Store state for cleanup
     const state = {
         svelteApp,
-        container,
+        container: targetContainer,
+        originalContainer: mode === "modal" ? container : undefined,
         workflowId
     };
     // Create the mounted playground interface

package/dist/services/playgroundService.js

@@ -263,8 +263,11 @@ export class PlaygroundService {
                 this.currentBackoff = interval;
                 // Call the callback with new messages
                 callback(response);
-                // Stop polling if session is completed or failed
-                if (response.sessionStatus === 'completed' || response.sessionStatus === 'failed') {
+                // Stop polling if session is idle, completed, or failed
+                // "idle" means no processing is happening (execution finished)
+                if (response.sessionStatus === 'idle' ||
+                    response.sessionStatus === 'completed' ||
+                    response.sessionStatus === 'failed') {
                     this.stopPolling();
                     return;
                 }

package/dist/types/playground.d.ts

@@ -178,11 +178,13 @@ export interface PlaygroundConfig {
     showTimestamps?: boolean;
     /** Show log messages inline or in collapsible section (default: "collapsible") */
     logDisplayMode?: 'inline' | 'collapsible';
+    /** Enable markdown rendering in messages (default: true) */
+    enableMarkdown?: boolean;
 }
 /**
  * Display mode for the Playground component
  */
-export type PlaygroundMode = 'embedded' | 'standalone';
+export type PlaygroundMode = 'embedded' | 'standalone' | 'modal';
 /**
  * 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.31",
+	"version": "0.0.33",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",