@d34dman/flowdrop 0.0.40 → 0.0.42

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -25,11 +25,14 @@
 		isSubmitting: boolean;
 		/** Error message if submission failed */
 		error?: string;
+		/** Username of the person who resolved the interrupt */
+		resolvedByUserName?: string;
 		/** Callback when user submits selection */
 		onSubmit: (value: string | string[]) => void;
 	}
 
-	let { config, isResolved, resolvedValue, isSubmitting, error, onSubmit }: Props = $props();
+	let { config, isResolved, resolvedValue, isSubmitting, error, resolvedByUserName, onSubmit }: Props =
+		$props();
 
 	/** Local state for selected values */
 	let selectedValues = $state<Set<string>>(new Set());
@@ -189,7 +192,9 @@
 	{#if isResolved}
 		<div class="choice-prompt__resolved-badge">
 			<Icon icon="mdi:check-circle" />
-			<span>Response submitted</span>
+			<span>
+				{resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+			</span>
 		</div>
 	{/if}
 </div>

package/dist/components/interrupt/ChoicePrompt.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     isSubmitting: boolean;
     /** Error message if submission failed */
     error?: string;
+    /** Username of the person who resolved the interrupt */
+    resolvedByUserName?: string;
     /** Callback when user submits selection */
     onSubmit: (value: string | string[]) => void;
 }

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -25,14 +25,24 @@
 		isSubmitting: boolean;
 		/** Error message if submission failed */
 		error?: string;
+		/** Username of the person who resolved the interrupt */
+		resolvedByUserName?: string;
 		/** Callback when user confirms (Yes) */
 		onConfirm: () => void;
 		/** Callback when user declines (No) */
 		onDecline: () => void;
 	}
 
-	let { config, isResolved, resolvedValue, isSubmitting, error, onConfirm, onDecline }: Props =
-		$props();
+	let {
+		config,
+		isResolved,
+		resolvedValue,
+		isSubmitting,
+		error,
+		resolvedByUserName,
+		onConfirm,
+		onDecline
+	}: Props = $props();
 
 	/** Computed label for confirm button */
 	const confirmLabel = $derived(config.confirmLabel ?? 'Yes');
@@ -108,7 +118,9 @@
 	{#if isResolved}
 		<div class="confirmation-prompt__resolved-badge">
 			<Icon icon="mdi:check-circle" />
-			<span>Response submitted</span>
+			<span>
+				{resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+			</span>
 		</div>
 	{/if}
 </div>

package/dist/components/interrupt/ConfirmationPrompt.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     isSubmitting: boolean;
     /** Error message if submission failed */
     error?: string;
+    /** Username of the person who resolved the interrupt */
+    resolvedByUserName?: string;
     /** Callback when user confirms (Yes) */
     onConfirm: () => void;
     /** Callback when user declines (No) */

package/dist/components/interrupt/FormPrompt.svelte

@@ -26,11 +26,14 @@
 		isSubmitting: boolean;
 		/** Error message if submission failed */
 		error?: string;
+		/** Username of the person who resolved the interrupt */
+		resolvedByUserName?: string;
 		/** Callback when user submits form */
 		onSubmit: (value: Record<string, unknown>) => void;
 	}
 
-	let { config, isResolved, resolvedValue, isSubmitting, error, onSubmit }: Props = $props();
+	let { config, isResolved, resolvedValue, isSubmitting, error, resolvedByUserName, onSubmit }: Props =
+		$props();
 
 	/** Local state for form values */
 	let formValues = $state<Record<string, unknown>>(config.defaultValues ?? {});
@@ -119,7 +122,9 @@
 	{#if isResolved}
 		<div class="form-prompt__resolved-badge">
 			<Icon icon="mdi:check-circle" />
-			<span>Response submitted</span>
+			<span>
+				{resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+			</span>
 		</div>
 	{/if}
 </div>

package/dist/components/interrupt/FormPrompt.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     isSubmitting: boolean;
     /** Error message if submission failed */
     error?: string;
+    /** Username of the person who resolved the interrupt */
+    resolvedByUserName?: string;
     /** Callback when user submits form */
     onSubmit: (value: Record<string, unknown>) => void;
 }

package/dist/components/interrupt/InterruptBubble.svelte

@@ -221,6 +221,16 @@
 
 	// Determine the actual resolved value to pass to prompt components
 	const displayResolvedValue = $derived(resolvedValue ?? currentInterrupt.responseValue);
+
+	/**
+	 * Extract the username of who resolved the interrupt from metadata.
+	 * This is provided by the backend when the interrupt is resolved.
+	 */
+	const resolvedByUserName = $derived(
+		typeof currentInterrupt.metadata?.resolvedByUserName === 'string'
+			? currentInterrupt.metadata.resolvedByUserName
+			: undefined
+	);
 </script>
 
 <div
@@ -287,6 +297,7 @@
 					resolvedValue={displayResolvedValue as boolean | undefined}
 					{isSubmitting}
 					{error}
+					{resolvedByUserName}
 					onConfirm={() => handleResolve(true)}
 					onDecline={() => handleResolve(false)}
 				/>
@@ -297,6 +308,7 @@
 					resolvedValue={displayResolvedValue as string | string[] | undefined}
 					{isSubmitting}
 					{error}
+					{resolvedByUserName}
 					onSubmit={(value) => handleResolve(value)}
 				/>
 			{:else if currentInterrupt.type === 'text'}
@@ -306,6 +318,7 @@
 					resolvedValue={displayResolvedValue as string | undefined}
 					{isSubmitting}
 					{error}
+					{resolvedByUserName}
 					onSubmit={(value) => handleResolve(value)}
 				/>
 			{:else if currentInterrupt.type === 'form'}
@@ -315,6 +328,7 @@
 					resolvedValue={displayResolvedValue as Record<string, unknown> | undefined}
 					{isSubmitting}
 					{error}
+					{resolvedByUserName}
 					onSubmit={(value) => handleResolve(value)}
 				/>
 			{/if}

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -25,11 +25,14 @@
 		isSubmitting: boolean;
 		/** Error message if submission failed */
 		error?: string;
+		/** Username of the person who resolved the interrupt */
+		resolvedByUserName?: string;
 		/** Callback when user submits text */
 		onSubmit: (value: string) => void;
 	}
 
-	let { config, isResolved, resolvedValue, isSubmitting, error, onSubmit }: Props = $props();
+	let { config, isResolved, resolvedValue, isSubmitting, error, resolvedByUserName, onSubmit }: Props =
+		$props();
 
 	/** Local state for input value */
 	let inputValue = $state(config.defaultValue ?? '');
@@ -166,7 +169,9 @@
 	{#if isResolved}
 		<div class="text-prompt__resolved-badge">
 			<Icon icon="mdi:check-circle" />
-			<span>Response submitted</span>
+			<span>
+				{resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+			</span>
 		</div>
 	{/if}
 </div>

package/dist/components/interrupt/TextInputPrompt.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     isSubmitting: boolean;
     /** Error message if submission failed */
     error?: string;
+    /** Username of the person who resolved the interrupt */
+    resolvedByUserName?: string;
     /** Callback when user submits text */
     onSubmit: (value: string) => void;
 }

package/dist/components/playground/ChatPanel.svelte

@@ -66,6 +66,13 @@
 		 * 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 {
@@ -79,7 +86,8 @@
 		onInterruptResolved,
 		showChatInput = true,
 		showRunButton = true,
-		predefinedMessage = 'Run workflow'
+		predefinedMessage = 'Run workflow',
+		compactSystemMessages = true
 	}: Props = $props();
 
 	/**
@@ -109,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
 	 */
@@ -280,16 +328,55 @@
 	});
 
 	/**
-	 * Auto-scroll to bottom when messages change
+	 * 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(() => {
-		if (autoScroll && messagesContainer && displayMessages.length > 0) {
-			tick().then(() => {
-				if (messagesContainer) {
-					messagesContainer.scrollTop = messagesContainer.scrollHeight;
-				}
-			});
+		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;
+			}
+		});
 	});
 
 	/**
@@ -453,6 +540,7 @@
 						showTimestamp={showTimestamps}
 						isLast={index === displayMessages.length - 1}
 						{enableMarkdown}
+						{compactSystemMessages}
 					/>
 				{/if}
 			{/each}

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

@@ -33,6 +33,13 @@ interface Props {
      * 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/types/interrupt.d.ts

@@ -264,6 +264,8 @@ export interface InterruptMessageMetadata {
     multiple?: boolean;
     min_selections?: number;
     max_selections?: number;
+    /** Username of the person who resolved the interrupt */
+    resolvedByUserName?: string;
 }
 /**
  * Type guard to check if message metadata indicates an interrupt

package/dist/types/interrupt.js

@@ -48,7 +48,8 @@ export function extractInterruptMetadata(metadata) {
         max_length: metadata.max_length,
         multiple: metadata.multiple,
         min_selections: metadata.min_selections,
-        max_selections: metadata.max_selections
+        max_selections: metadata.max_selections,
+        resolvedByUserName: metadata.resolvedByUserName
     };
 }
 /**

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;
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.40",
+	"version": "0.0.42",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",