@d34dman/flowdrop 0.0.61 → 0.0.62

package/dist/components/interrupt/InterruptBubble.svelte

@@ -13,13 +13,16 @@
 	import ChoicePrompt from './ChoicePrompt.svelte';
 	import TextInputPrompt from './TextInputPrompt.svelte';
 	import FormPrompt from './FormPrompt.svelte';
+	import ReviewPrompt from './ReviewPrompt.svelte';
 	import type {
 		Interrupt,
 		InterruptType,
 		ConfirmationConfig,
 		ChoiceConfig,
 		TextConfig,
-		FormConfig
+		FormConfig,
+		ReviewConfig,
+		ReviewResolution
 	} from '../../types/interrupt.js';
 	import {
 		isTerminalState,
@@ -28,11 +31,12 @@
 		getResolvedValue
 	} from '../../types/interruptState.js';
 	import {
-		interrupts,
+		getInterruptsMap,
 		interruptActions,
 		type InterruptWithState
-	} from '../../stores/interruptStore.js';
+	} from '../../stores/interruptStore.svelte.js';
 	import { interruptService } from '../../services/interruptService.js';
+	import { logger } from '../../utils/logger.js';
 
 	/**
 	 * Component props
@@ -53,7 +57,7 @@
 	 * This ensures we react to store updates (like status changes).
 	 */
 	const currentInterrupt = $derived(
-		$interrupts.get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
+		getInterruptsMap().get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
 	);
 
 	/**
@@ -94,6 +98,8 @@
 				return 'mdi:text-box';
 			case 'form':
 				return 'mdi:form-select';
+			case 'review':
+				return 'mdi:file-compare';
 			default:
 				return 'mdi:bell';
 		}
@@ -112,6 +118,8 @@
 				return 'Input Required';
 			case 'form':
 				return 'Form Required';
+			case 'review':
+				return 'Review Required';
 			default:
 				return 'Action Required';
 		}
@@ -128,6 +136,8 @@
 				return 'Input Submitted';
 			case 'form':
 				return 'Form Submitted';
+			case 'review':
+				return 'Review Submitted';
 			default:
 				return 'Response Submitted';
 		}
@@ -153,7 +163,7 @@
 		// Start the submission - state machine validates this transition
 		const startResult = interruptActions.startSubmit(currentInterrupt.id, value);
 		if (!startResult.valid) {
-			console.warn('[InterruptBubble] Cannot submit:', startResult.error);
+			logger.warn('[InterruptBubble] Cannot submit:', startResult.error);
 			return;
 		}
 
@@ -172,7 +182,7 @@
 			// Mark as failed - transitions to error state (can retry)
 			const errorMessage = err instanceof Error ? err.message : 'Failed to submit response';
 			interruptActions.submitFailure(currentInterrupt.id, errorMessage);
-			console.error('[InterruptBubble] Resolve error:', err);
+			logger.error('[InterruptBubble] Resolve error:', err);
 		}
 	}
 
@@ -183,7 +193,7 @@
 		// Start the cancel - state machine validates this transition
 		const startResult = interruptActions.startCancel(currentInterrupt.id);
 		if (!startResult.valid) {
-			console.warn('[InterruptBubble] Cannot cancel:', startResult.error);
+			logger.warn('[InterruptBubble] Cannot cancel:', startResult.error);
 			return;
 		}
 
@@ -202,7 +212,7 @@
 			// Mark as failed - transitions to error state (can retry)
 			const errorMessage = err instanceof Error ? err.message : 'Failed to cancel';
 			interruptActions.submitFailure(currentInterrupt.id, errorMessage);
-			console.error('[InterruptBubble] Cancel error:', err);
+			logger.error('[InterruptBubble] Cancel error:', err);
 		}
 	}
 
@@ -218,6 +228,7 @@
 	const choiceConfig = $derived(currentInterrupt.config as ChoiceConfig);
 	const textConfig = $derived(currentInterrupt.config as TextConfig);
 	const formConfig = $derived(currentInterrupt.config as FormConfig);
+	const reviewConfig = $derived(currentInterrupt.config as ReviewConfig);
 
 	// Determine the actual resolved value to pass to prompt components
 	const displayResolvedValue = $derived(resolvedValue ?? currentInterrupt.responseValue);
@@ -240,103 +251,105 @@
 	class:interrupt-bubble--submitting={isSubmitting}
 	class:interrupt-bubble--error={currentInterrupt.machineState.status === 'error'}
 >
-	<!-- Avatar / Icon -->
-	<div class="interrupt-bubble__avatar">
-		{#if currentInterrupt.machineState.status === 'cancelled'}
-			<Icon icon="mdi:close-circle" />
-		{:else if currentInterrupt.machineState.status === 'resolved'}
-			<Icon icon="mdi:check-circle" />
-		{:else if currentInterrupt.machineState.status === 'error'}
-			<Icon icon="mdi:alert-circle" />
-		{:else}
-			<Icon icon="mdi:bell-ring" />
+	<!-- Header -->
+	<div class="interrupt-bubble__header">
+		<span class="interrupt-bubble__type">
+			<Icon icon={getTypeIcon(currentInterrupt.type)} />
+			{#if isResolved}
+				{currentInterrupt.machineState.status === 'cancelled'
+					? 'Cancelled'
+					: getResolvedLabel(currentInterrupt.type)}
+			{:else if currentInterrupt.machineState.status === 'error'}
+				Error - Click to Retry
+			{:else}
+				{getTypeLabel(currentInterrupt.type)}
+			{/if}
+		</span>
+		{#if showTimestamp}
+			<span class="interrupt-bubble__timestamp">
+				{formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
+			</span>
 		{/if}
 	</div>
 
-	<!-- Content -->
-	<div class="interrupt-bubble__content">
-		<!-- Header -->
-		<div class="interrupt-bubble__header">
-			<span class="interrupt-bubble__type">
-				<Icon icon={getTypeIcon(currentInterrupt.type)} />
-				{#if isResolved}
-					{currentInterrupt.machineState.status === 'cancelled'
-						? 'Cancelled'
-						: getResolvedLabel(currentInterrupt.type)}
-				{:else if currentInterrupt.machineState.status === 'error'}
-					Error - Click to Retry
-				{:else}
-					{getTypeLabel(currentInterrupt.type)}
-				{/if}
-			</span>
-			{#if showTimestamp}
-				<span class="interrupt-bubble__timestamp">
-					{formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
-				</span>
-			{/if}
+	<!-- Error message with retry button -->
+	{#if currentInterrupt.machineState.status === 'error'}
+		<div class="interrupt-bubble__error">
+			<Icon icon="mdi:alert-circle" />
+			<span>{error}</span>
+			<button type="button" class="interrupt-bubble__retry-btn" onclick={handleRetry}>
+				<Icon icon="mdi:refresh" />
+				Retry
+			</button>
 		</div>
-
-		<!-- Error message with retry button -->
-		{#if currentInterrupt.machineState.status === 'error'}
-			<div class="interrupt-bubble__error">
-				<Icon icon="mdi:alert-circle" />
-				<span>{error}</span>
-				<button type="button" class="interrupt-bubble__retry-btn" onclick={handleRetry}>
-					<Icon icon="mdi:refresh" />
-					Retry
-				</button>
-			</div>
+	{/if}
+
+	<!-- Prompt content based on type -->
+	<div class="interrupt-bubble__body">
+		{#if currentInterrupt.type === 'confirmation'}
+			<ConfirmationPrompt
+				config={confirmationConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as boolean | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onConfirm={() => handleResolve(true)}
+				onDecline={() => handleResolve(false)}
+			/>
+		{:else if currentInterrupt.type === 'choice'}
+			<ChoicePrompt
+				config={choiceConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as string | string[] | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{:else if currentInterrupt.type === 'text'}
+			<TextInputPrompt
+				config={textConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as string | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{:else if currentInterrupt.type === 'form'}
+			<FormPrompt
+				config={formConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as Record<string, unknown> | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{:else if currentInterrupt.type === 'review'}
+			<ReviewPrompt
+				config={reviewConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as ReviewResolution | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
 		{/if}
+	</div>
 
-		<!-- Prompt content based on type -->
-		<div class="interrupt-bubble__prompt">
-			{#if currentInterrupt.type === 'confirmation'}
-				<ConfirmationPrompt
-					config={confirmationConfig}
-					{isResolved}
-					resolvedValue={displayResolvedValue as boolean | undefined}
-					{isSubmitting}
-					{error}
-					{resolvedByUserName}
-					onConfirm={() => handleResolve(true)}
-					onDecline={() => handleResolve(false)}
-				/>
-			{:else if currentInterrupt.type === 'choice'}
-				<ChoicePrompt
-					config={choiceConfig}
-					{isResolved}
-					resolvedValue={displayResolvedValue as string | string[] | undefined}
-					{isSubmitting}
-					{error}
-					{resolvedByUserName}
-					onSubmit={(value) => handleResolve(value)}
-				/>
-			{:else if currentInterrupt.type === 'text'}
-				<TextInputPrompt
-					config={textConfig}
-					{isResolved}
-					resolvedValue={displayResolvedValue as string | undefined}
-					{isSubmitting}
-					{error}
-					{resolvedByUserName}
-					onSubmit={(value) => handleResolve(value)}
-				/>
-			{:else if currentInterrupt.type === 'form'}
-				<FormPrompt
-					config={formConfig}
-					{isResolved}
-					resolvedValue={displayResolvedValue as Record<string, unknown> | undefined}
-					{isSubmitting}
-					{error}
-					{resolvedByUserName}
-					onSubmit={(value) => handleResolve(value)}
-				/>
+	<!-- Footer -->
+	{#if currentInterrupt.nodeId || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
+		<div class="interrupt-bubble__footer">
+			{#if currentInterrupt.nodeId}
+				<span class="interrupt-bubble__node" title="Node ID: {currentInterrupt.nodeId}">
+					<Icon icon="mdi:graph" />
+					<span>From workflow node</span>
+				</span>
 			{/if}
-		</div>
-
-		<!-- Cancel button (if allowed and not in terminal state) -->
-		{#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
-			<div class="interrupt-bubble__cancel-wrapper">
+			{#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
 				<button
 					type="button"
 					class="interrupt-bubble__cancel-btn"
@@ -346,33 +359,23 @@
 					<Icon icon="mdi:close" />
 					<span>Cancel</span>
 				</button>
-			</div>
-		{/if}
-
-		<!-- Node info footer -->
-		{#if currentInterrupt.nodeId}
-			<div class="interrupt-bubble__footer">
-				<span class="interrupt-bubble__node" title="Node ID: {currentInterrupt.nodeId}">
-					<Icon icon="mdi:graph" />
-					<span>From workflow node</span>
-				</span>
-			</div>
-		{/if}
-	</div>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
 	/* Uses design tokens from base.css: --fd-interrupt-* */
 	.interrupt-bubble {
 		display: flex;
-		gap: 0.75rem;
-		padding: 1rem 1.25rem;
-		margin: 0.75rem 1rem;
-		border-radius: 0.75rem;
-		background: var(--fd-interrupt-pending-bg);
-		border: 1px solid var(--fd-interrupt-pending-border);
+		flex-direction: column;
+		margin: var(--fd-space-md) var(--fd-space-xl);
+		border-radius: var(--fd-radius-xl);
+		background-color: var(--fd-interrupt-prompt-bg);
+		border: 1px solid var(--fd-interrupt-prompt-border-pending);
 		box-shadow: 0 2px 8px var(--fd-interrupt-pending-shadow);
 		animation: interruptSlideIn 0.3s ease-out;
+		overflow: hidden;
 	}
 
 	@keyframes interruptSlideIn {
@@ -386,22 +389,19 @@
 		}
 	}
 
-	/* Completed state - neutral blue to indicate response received without implying good/bad */
+	/* State border colors */
 	.interrupt-bubble--completed {
-		background: var(--fd-interrupt-completed-bg);
-		border-color: var(--fd-interrupt-completed-border);
+		border-color: var(--fd-interrupt-prompt-border-completed);
 		box-shadow: 0 2px 8px var(--fd-interrupt-completed-shadow);
 	}
 
 	.interrupt-bubble--cancelled {
-		background: var(--fd-interrupt-cancelled-bg);
-		border-color: var(--fd-interrupt-cancelled-border);
+		border-color: var(--fd-interrupt-prompt-border-cancelled);
 		box-shadow: 0 2px 8px var(--fd-interrupt-cancelled-shadow);
 	}
 
 	.interrupt-bubble--error {
-		background: var(--fd-interrupt-error-bg);
-		border-color: var(--fd-interrupt-error-border);
+		border-color: var(--fd-interrupt-prompt-border-error);
 		box-shadow: 0 2px 8px var(--fd-interrupt-error-shadow);
 	}
 
@@ -409,55 +409,38 @@
 		opacity: 0.9;
 	}
 
-	/* Avatar */
-	.interrupt-bubble__avatar {
-		flex-shrink: 0;
-		width: 2.25rem;
-		height: 2.25rem;
+	/* Header */
+	.interrupt-bubble__header {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background-color: var(--fd-interrupt-pending-avatar);
-		color: #ffffff;
-		font-size: 1.125rem;
-	}
-
-	.interrupt-bubble--completed .interrupt-bubble__avatar {
-		background-color: var(--fd-interrupt-completed-avatar);
-	}
-
-	.interrupt-bubble--cancelled .interrupt-bubble__avatar {
-		background-color: var(--fd-interrupt-cancelled-avatar);
+		justify-content: space-between;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		background: var(--fd-interrupt-pending-bg);
+		border-bottom: 1px solid var(--fd-interrupt-prompt-border-pending);
 	}
 
-	.interrupt-bubble--error .interrupt-bubble__avatar {
-		background-color: var(--fd-interrupt-error-avatar);
+	.interrupt-bubble--completed .interrupt-bubble__header {
+		background: var(--fd-interrupt-completed-bg);
+		border-bottom-color: var(--fd-interrupt-prompt-border-completed);
 	}
 
-	/* Content */
-	.interrupt-bubble__content {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
+	.interrupt-bubble--cancelled .interrupt-bubble__header {
+		background: var(--fd-interrupt-cancelled-bg);
+		border-bottom-color: var(--fd-interrupt-prompt-border-cancelled);
 	}
 
-	/* Header */
-	.interrupt-bubble__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.5rem;
+	.interrupt-bubble--error .interrupt-bubble__header {
+		background: var(--fd-interrupt-error-bg);
+		border-bottom-color: var(--fd-interrupt-prompt-border-error);
 	}
 
 	.interrupt-bubble__type {
 		display: flex;
 		align-items: center;
-		gap: 0.375rem;
+		gap: var(--fd-space-2xs);
 		font-weight: 600;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		color: var(--fd-interrupt-pending-text);
 	}
 
@@ -474,9 +457,9 @@
 	}
 
 	.interrupt-bubble__timestamp {
-		font-size: 0.6875rem;
+		font-size: var(--fd-text-2xs);
 		color: var(--fd-interrupt-pending-text-light);
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-family: var(--fd-font-mono);
 	}
 
 	.interrupt-bubble--completed .interrupt-bubble__timestamp {
@@ -495,68 +478,92 @@
 	.interrupt-bubble__error {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
+		gap: var(--fd-space-xs);
+		margin: var(--fd-space-md) var(--fd-space-xl) 0;
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		background-color: var(--fd-error-muted);
 		border-radius: var(--fd-radius-md);
 		color: var(--fd-interrupt-error-text);
-		font-size: 0.8125rem;
+		font-size: var(--fd-interrupt-font-error);
 	}
 
 	.interrupt-bubble__retry-btn {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.25rem;
+		gap: var(--fd-space-3xs);
 		margin-left: auto;
-		padding: 0.25rem 0.5rem;
-		font-size: 0.75rem;
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 		font-family: inherit;
-		color: #ffffff;
+		color: var(--fd-error-foreground);
 		background-color: var(--fd-interrupt-error-avatar);
 		border: none;
-		border-radius: 0.25rem;
+		border-radius: var(--fd-radius-sm);
 		cursor: pointer;
-		transition: background-color 0.15s ease;
+		transition: background-color var(--fd-transition-fast);
 	}
 
 	.interrupt-bubble__retry-btn:hover {
 		background-color: var(--fd-error-hover);
 	}
 
-	/* Prompt */
-	.interrupt-bubble__prompt {
-		background-color: var(--fd-interrupt-prompt-bg);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		border: 1px solid var(--fd-interrupt-prompt-border-pending);
+	/* Body - prompt content area, full width */
+	.interrupt-bubble__body {
+		padding: var(--fd-space-xl);
 	}
 
-	.interrupt-bubble--completed .interrupt-bubble__prompt {
-		border-color: var(--fd-interrupt-prompt-border-completed);
+	.interrupt-bubble--cancelled .interrupt-bubble__body {
+		opacity: 0.75;
 	}
 
-	.interrupt-bubble--cancelled .interrupt-bubble__prompt {
-		border-color: var(--fd-interrupt-prompt-border-cancelled);
-		opacity: 0.75;
+	/* Desaturate body content in error state to reduce visual noise from green/red colors */
+	.interrupt-bubble--error .interrupt-bubble__body {
+		filter: saturate(0.2);
+		opacity: 0.7;
 	}
 
-	.interrupt-bubble--error .interrupt-bubble__prompt {
-		border-color: var(--fd-interrupt-prompt-border-error);
+	/* Footer */
+	.interrupt-bubble__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		background: var(--fd-interrupt-pending-bg);
+		border-top: 1px solid var(--fd-interrupt-prompt-border-pending);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__footer {
+		background: var(--fd-interrupt-completed-bg);
+		border-top-color: var(--fd-interrupt-prompt-border-completed);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__footer {
+		background: var(--fd-interrupt-cancelled-bg);
+		border-top-color: var(--fd-interrupt-prompt-border-cancelled);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__footer {
+		background: var(--fd-interrupt-error-bg);
+		border-top-color: var(--fd-interrupt-prompt-border-error);
 	}
 
-	/* Cancel button wrapper */
-	.interrupt-bubble__cancel-wrapper {
+	.interrupt-bubble__node {
 		display: flex;
-		justify-content: flex-end;
+		align-items: center;
+		gap: var(--fd-space-3xs);
+		font-size: var(--fd-text-2xs);
+		color: var(--fd-muted-foreground);
 	}
 
 	.interrupt-bubble__cancel-btn {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.75rem;
+		gap: var(--fd-space-2xs);
+		margin-left: auto;
+		padding: var(--fd-space-2xs) var(--fd-space-md);
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 		font-family: inherit;
 		color: var(--fd-muted-foreground);
@@ -578,58 +585,17 @@
 		cursor: not-allowed;
 	}
 
-	/* Footer */
-	.interrupt-bubble__footer {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding-top: 0.5rem;
-		border-top: 1px solid var(--fd-interrupt-prompt-border-pending);
-	}
-
-	.interrupt-bubble--completed .interrupt-bubble__footer {
-		border-color: var(--fd-interrupt-prompt-border-completed);
-	}
-
-	.interrupt-bubble--cancelled .interrupt-bubble__footer {
-		border-color: var(--fd-interrupt-prompt-border-cancelled);
-	}
-
-	.interrupt-bubble--error .interrupt-bubble__footer {
-		border-color: var(--fd-interrupt-prompt-border-error);
-	}
-
-	.interrupt-bubble__node {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		font-size: 0.6875rem;
-		color: var(--fd-interrupt-pending-text);
-	}
-
-	.interrupt-bubble--completed .interrupt-bubble__node {
-		color: var(--fd-interrupt-completed-text);
-	}
-
-	.interrupt-bubble--cancelled .interrupt-bubble__node {
-		color: var(--fd-interrupt-cancelled-text);
-	}
-
-	.interrupt-bubble--error .interrupt-bubble__node {
-		color: var(--fd-interrupt-error-text);
-	}
-
 	/* Responsive */
 	@media (max-width: 640px) {
 		.interrupt-bubble {
-			margin: 0.5rem;
-			padding: 0.875rem 1rem;
+			margin: var(--fd-space-xs);
 		}
 
-		.interrupt-bubble__avatar {
-			width: 2rem;
-			height: 2rem;
-			font-size: 1rem;
+		.interrupt-bubble__header,
+		.interrupt-bubble__body,
+		.interrupt-bubble__footer {
+			padding-left: var(--fd-space-lg);
+			padding-right: var(--fd-space-lg);
 		}
 	}
 </style>

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

@@ -1,5 +1,5 @@
 import type { Interrupt } from '../../types/interrupt.js';
-import { type InterruptWithState } from '../../stores/interruptStore.js';
+import { type InterruptWithState } from '../../stores/interruptStore.svelte.js';
 /**
  * Component props
  */