@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/components/playground/Playground.svelte

@@ -15,24 +15,23 @@
 	import type { EndpointConfig } from '../../config/endpoints.js';
 	import type {
 		PlaygroundMode,
-		PlaygroundConfig,
-		PlaygroundMessagesApiResponse
+		PlaygroundConfig
 	} from '../../types/playground.js';
 	import { playgroundService } from '../../services/playgroundService.js';
 	import { interruptService } from '../../services/interruptService.js';
 	import { setEndpointConfig } from '../../services/api.js';
 	import {
-		currentSession,
-		sessions,
-		messages,
-		isExecuting,
-		isLoading,
-		error,
+		getCurrentSession,
+		getSessions,
+		getIsExecuting,
+		getIsLoading,
+		getError,
 		playgroundActions,
-		inputFields
-	} from '../../stores/playgroundStore.js';
-	import { interruptActions } from '../../stores/interruptStore.js';
-	import { get } from 'svelte/store';
+		getInputFields,
+		createPollingCallback
+	} from '../../stores/playgroundStore.svelte.js';
+	import { interruptActions } from '../../stores/interruptStore.svelte.js';
+	import { logger } from '../../utils/logger.js';
 
 	/**
 	 * Component props
@@ -70,8 +69,8 @@
 	/** Track session being edited for rename */
 	let editingSessionId = $state<string | null>(null);
 
-	/** Track session pending delete */
-	let pendingDeleteId = $state<string | null>(null);
+	/** Track which session's dropdown menu is open */
+	let openMenuId = $state<string | null>(null);
 
 	/** Track if initial session has been loaded to prevent duplicate loads */
 	let initialSessionLoaded = $state(false);
@@ -111,11 +110,11 @@
 				if (config.autoRun && !autoRunTriggered) {
 					autoRunTriggered = true;
 					const predefinedMessage = config.predefinedMessage ?? 'Run workflow';
-					console.log('[Playground] Auto-run triggered with message:', predefinedMessage);
+					logger.debug('[Playground] Auto-run triggered with message:', predefinedMessage);
 					await handleSendMessage(predefinedMessage);
 				}
 			} catch (err) {
-				console.error('[Playground] Initialization error:', err);
+				logger.error('[Playground] Initialization error:', err);
 			}
 		};
 
@@ -139,8 +138,8 @@
 		}
 
 		// Skip if sessions haven't been loaded yet (will be handled by onMount)
-		const sessionList = get(sessions);
-		if (sessionList.length === 0 && get(isLoading)) {
+		const sessionList = getSessions();
+		if (sessionList.length === 0 && getIsLoading()) {
 			return;
 		}
 
@@ -157,11 +156,11 @@
 	 */
 	async function loadInitialSession(sessionId: string): Promise<void> {
 		// Validate session exists in loaded sessions
-		const sessionList = get(sessions);
+		const sessionList = getSessions();
 		const sessionExists = sessionList.some((s) => s.id === sessionId);
 
 		if (!sessionExists) {
-			console.warn(
+			logger.warn(
 				`[Playground] Initial session "${sessionId}" not found in available sessions. ` +
 					`Available sessions: ${sessionList.map((s) => s.id).join(', ') || 'none'}`
 			);
@@ -176,7 +175,7 @@
 			initialSessionLoaded = true;
 			loadedInitialSessionId = sessionId;
 		} catch (err) {
-			console.error('[Playground] Failed to load initial session:', err);
+			logger.error('[Playground] Failed to load initial session:', err);
 			// Mark as attempted to prevent retry loops
 			initialSessionLoaded = true;
 			loadedInitialSessionId = sessionId;
@@ -193,6 +192,20 @@
 		interruptActions.reset();
 	});
 
+	/**
+	 * Close dropdown menu when clicking outside
+	 */
+	$effect(() => {
+		if (!openMenuId) return;
+
+		function onDocumentClick() {
+			openMenuId = null;
+		}
+
+		document.addEventListener('click', onDocumentClick);
+		return () => document.removeEventListener('click', onDocumentClick);
+	});
+
 	/**
 	 * Load sessions for the workflow
 	 */
@@ -206,7 +219,7 @@
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : 'Failed to load sessions';
 			playgroundActions.setError(errorMessage);
-			console.error('Failed to load sessions:', err);
+			logger.error('Failed to load sessions:', err);
 		} finally {
 			playgroundActions.setLoading(false);
 		}
@@ -235,7 +248,7 @@
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : 'Failed to load session';
 			playgroundActions.setError(errorMessage);
-			console.error('Failed to load session:', err);
+			logger.error('Failed to load session:', err);
 		} finally {
 			playgroundActions.setLoading(false);
 		}
@@ -249,7 +262,7 @@
 		playgroundActions.setError(null);
 
 		try {
-			const sessionName = `Session ${get(sessions).length + 1}`;
+			const sessionName = `Session ${getSessions().length + 1}`;
 			const session = await playgroundService.createSession(workflowId, sessionName);
 			playgroundActions.addSession(session);
 			playgroundActions.setCurrentSession(session);
@@ -257,7 +270,7 @@
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : 'Failed to create session';
 			playgroundActions.setError(errorMessage);
-			console.error('Failed to create session:', err);
+			logger.error('Failed to create session:', err);
 		} finally {
 			playgroundActions.setLoading(false);
 		}
@@ -267,7 +280,7 @@
 	 * Select a session
 	 */
 	async function handleSelectSession(sessionId: string): Promise<void> {
-		const currentSessionId = get(currentSession)?.id;
+		const currentSessionId = getCurrentSession()?.id;
 		if (currentSessionId === sessionId) {
 			return;
 		}
@@ -287,34 +300,31 @@
 			playgroundActions.removeSession(sessionId);
 
 			// If we deleted the current session, clear it
-			if (get(currentSession)?.id === sessionId) {
+			if (getCurrentSession()?.id === sessionId) {
 				playgroundService.stopPolling();
 			}
-			pendingDeleteId = null;
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : 'Failed to delete session';
 			playgroundActions.setError(errorMessage);
-			console.error('Failed to delete session:', err);
+			logger.error('Failed to delete session:', err);
 		}
 	}
 
 	/**
-	 * Handle delete click - show confirmation or execute
+	 * Toggle session dropdown menu
 	 */
-	function handleDeleteClick(event: Event, sessionId: string): void {
+	function handleMenuToggle(event: Event, sessionId: string): void {
 		event.stopPropagation();
-		if (pendingDeleteId === sessionId) {
-			// Confirm deletion
-			void handleDeleteSession(sessionId);
-		} else {
-			pendingDeleteId = sessionId;
-			// Auto-reset after 3 seconds
-			setTimeout(() => {
-				if (pendingDeleteId === sessionId) {
-					pendingDeleteId = null;
-				}
-			}, 3000);
-		}
+		openMenuId = openMenuId === sessionId ? null : sessionId;
+	}
+
+	/**
+	 * Handle delete from dropdown menu
+	 */
+	function handleMenuDelete(event: Event, sessionId: string): void {
+		event.stopPropagation();
+		openMenuId = null;
+		void handleDeleteSession(sessionId);
 	}
 
 	/**
@@ -326,7 +336,7 @@
 		playgroundActions.setCurrentSession(null);
 		playgroundActions.clearMessages();
 		// Clear interrupts for this session
-		const sessionId = get(currentSession)?.id;
+		const sessionId = getCurrentSession()?.id;
 		if (sessionId) {
 			interruptActions.clearSessionInterrupts(sessionId);
 		}
@@ -336,17 +346,17 @@
 	 * Send a message
 	 */
 	async function handleSendMessage(content: string): Promise<void> {
-		const session = get(currentSession);
+		const session = getCurrentSession();
 		if (!session) {
 			// Create a session first if none exists
 			await handleCreateSession();
-			const newSession = get(currentSession);
+			const newSession = getCurrentSession();
 			if (!newSession) {
 				return;
 			}
 		}
 
-		const sessionId = get(currentSession)?.id;
+		const sessionId = getCurrentSession()?.id;
 		if (!sessionId) {
 			return;
 		}
@@ -357,7 +367,7 @@
 		try {
 			// Prepare inputs from the input collector
 			const inputs: Record<string, unknown> = {};
-			const fields = get(inputFields);
+			const fields = getInputFields();
 
 			fields.forEach((field) => {
 				const key = `${field.nodeId}:${field.fieldId}`;
@@ -383,7 +393,7 @@
 			const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
 			playgroundActions.setError(errorMessage);
 			playgroundActions.setExecuting(false);
-			console.error('Failed to send message:', err);
+			logger.error('Failed to send message:', err);
 		}
 	}
 
@@ -391,7 +401,7 @@
 	 * Stop execution
 	 */
 	async function handleStopExecution(): Promise<void> {
-		const sessionId = get(currentSession)?.id;
+		const sessionId = getCurrentSession()?.id;
 		if (!sessionId) {
 			return;
 		}
@@ -404,10 +414,13 @@
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : 'Failed to stop execution';
 			playgroundActions.setError(errorMessage);
-			console.error('Failed to stop execution:', err);
+			logger.error('Failed to stop execution:', err);
 		}
 	}
 
+	/** Shared polling callback created from config lifecycle hooks */
+	const pollingCallback = createPollingCallback(config.isTerminalStatus);
+
 	/**
 	 * Start polling for messages
 	 */
@@ -416,28 +429,9 @@
 
 		playgroundService.startPolling(
 			sessionId,
-			(response: PlaygroundMessagesApiResponse) => {
-				// Add new messages
-				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)
-					if (
-						response.sessionStatus === 'idle' ||
-						response.sessionStatus === 'completed' ||
-						response.sessionStatus === 'failed'
-					) {
-						playgroundActions.setExecuting(false);
-					}
-				}
-			},
-			pollingInterval
+			pollingCallback,
+			pollingInterval,
+			config.shouldStopPolling
 		);
 	}
 
@@ -446,32 +440,14 @@
 	 * Called after interrupt resolution when polling has stopped
 	 */
 	async function handleInterruptResolved(): Promise<void> {
-		const sessionId = get(currentSession)?.id;
+		const sessionId = getCurrentSession()?.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);
-
-				// Update executing state based on session status
-				if (
-					response.sessionStatus === 'idle' ||
-					response.sessionStatus === 'completed' ||
-					response.sessionStatus === 'failed'
-				) {
-					playgroundActions.setExecuting(false);
-				}
-			}
+			pollingCallback(response);
 		} catch (err) {
-			console.error('[Playground] Failed to refresh messages after interrupt:', err);
+			logger.error('[Playground] Failed to refresh messages after interrupt:', err);
 		}
 	}
 
@@ -515,7 +491,10 @@
 	<div class="playground__container">
 		<!-- Sidebar (conditionally rendered based on config.showSidebar) -->
 		{#if config.showSidebar !== false}
-			<aside class="playground__sidebar">
+			<aside
+				class="playground__sidebar"
+				style={config.sidebarWidth ? `--fd-playground-sidebar-width: ${config.sidebarWidth}` : ''}
+			>
 				<!-- Sidebar Header -->
 				<div class="playground__sidebar-header">
 					<div class="playground__sidebar-title">
@@ -543,7 +522,7 @@
 						type="button"
 						class="playground__new-session-btn"
 						onclick={handleCreateSession}
-						disabled={$isLoading}
+						disabled={getIsLoading()}
 						title="Start a new session"
 					>
 						<Icon icon="mdi:plus" />
@@ -552,19 +531,19 @@
 
 					<!-- Sessions List - click a session to load it -->
 					<div class="playground__sessions-wrap">
-						{#if $sessions.length > 0}
+						{#if getSessions().length > 0}
 							<p class="playground__sessions-hint">Click a session to load it</p>
 						{/if}
 						<div class="playground__sessions">
-							{#if $sessions.length === 0 && !$isLoading}
+							{#if getSessions().length === 0 && !getIsLoading()}
 								<div class="playground__sessions-empty">
 									<span>No sessions yet</span>
 								</div>
 							{:else}
-								{#each $sessions as session (session.id)}
+								{#each getSessions() as session (session.id)}
 									<div
 										class="playground__session"
-										class:playground__session--active={$currentSession?.id === session.id}
+										class:playground__session--active={getCurrentSession()?.id === session.id}
 										role="button"
 										tabindex="0"
 										title="Click to load this session"
@@ -575,21 +554,29 @@
 										<span class="playground__session-name" title={session.name}>
 											{session.name}
 										</span>
-										<button
-											type="button"
-											class="playground__session-menu"
-											class:playground__session-menu--delete={pendingDeleteId === session.id}
-											onclick={(e) => handleDeleteClick(e, session.id)}
-											title={pendingDeleteId === session.id
-												? 'Click to confirm delete'
-												: 'Delete session'}
-										>
-											{#if pendingDeleteId === session.id}
-												<Icon icon="mdi:check" />
-											{:else}
-												<Icon icon="mdi:dots-horizontal" />
+										<div class="playground__session-actions">
+											<button
+												type="button"
+												class="playground__session-menu"
+												class:playground__session-menu--open={openMenuId === session.id}
+												onclick={(e) => handleMenuToggle(e, session.id)}
+												title="Session options"
+											>
+												<Icon icon="mdi:dots-vertical" />
+											</button>
+											{#if openMenuId === session.id}
+												<div class="playground__session-dropdown">
+													<button
+														type="button"
+														class="playground__session-dropdown-item playground__session-dropdown-item--danger"
+														onclick={(e) => handleMenuDelete(e, session.id)}
+													>
+														<Icon icon="mdi:delete-outline" />
+														<span>Delete</span>
+													</button>
+												</div>
 											{/if}
-										</button>
+										</div>
 									</div>
 								{/each}
 							{/if}
@@ -602,9 +589,9 @@
 		<!-- Main Content -->
 		<main class="playground__main">
 			<!-- Session Header (conditionally rendered based on config.showSessionHeader) -->
-			{#if $currentSession && config.showSessionHeader !== false}
+			{#if getCurrentSession() && config.showSessionHeader !== false}
 				<header class="playground__header">
-					<h2 class="playground__header-title">{$currentSession.name}</h2>
+					<h2 class="playground__header-title">{getCurrentSession()?.name}</h2>
 					<button
 						type="button"
 						class="playground__header-close"
@@ -617,10 +604,10 @@
 			{/if}
 
 			<!-- Error Banner -->
-			{#if $error}
+			{#if getError()}
 				<div class="playground__error">
 					<Icon icon="mdi:alert-circle" />
-					<span>{$error}</span>
+					<span>{getError()}</span>
 					<button
 						type="button"
 						class="playground__error-dismiss"
@@ -633,7 +620,7 @@
 
 			<!-- Chat Content -->
 			<div class="playground__content">
-				{#if $isLoading && !$currentSession}
+				{#if getIsLoading() && !getCurrentSession()}
 					<div class="playground__loading">
 						<Icon icon="mdi:loading" class="playground__loading-icon" />
 						<span>Loading...</span>
@@ -702,7 +689,7 @@
 
 	/* Sidebar */
 	.playground__sidebar {
-		width: 220px;
+		width: var(--fd-playground-sidebar-width);
 		background-color: var(--fd-background);
 		border-right: 1px solid var(--fd-border);
 		display: flex;
@@ -714,8 +701,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 3.25rem;
-		padding: 0 1rem;
+		height: var(--fd-playground-header-height);
+		padding: 0 var(--fd-space-xl);
 		border-bottom: 1px solid var(--fd-border);
 		box-sizing: border-box;
 		flex-shrink: 0;
@@ -724,8 +711,8 @@
 	.playground__sidebar-title {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.9375rem;
+		gap: var(--fd-space-xs);
+		font-size: var(--fd-text-md);
 		font-weight: 600;
 		line-height: 1.25;
 		color: var(--fd-foreground);
@@ -735,14 +722,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.75rem;
-		height: 1.75rem;
+		width: var(--fd-playground-icon-btn-size);
+		height: var(--fd-playground-icon-btn-size);
 		border: none;
-		border-radius: 0.375rem;
+		border-radius: var(--fd-radius-md);
 		background: transparent;
 		color: var(--fd-muted-foreground);
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.playground__sidebar-close:hover {
@@ -756,7 +743,7 @@
 		display: flex;
 		flex-direction: column;
 		min-height: 0;
-		padding: 0.75rem 0.5rem 0;
+		padding: var(--fd-space-md) var(--fd-space-xs) 0;
 	}
 
 	/* New Session – neutral full-width button with icon */
@@ -764,19 +751,19 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
+		gap: var(--fd-space-xs);
 		width: 100%;
-		padding: 0.625rem 1rem;
+		padding: var(--fd-space-sm) var(--fd-space-xl);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-md);
 		background-color: var(--fd-background);
 		color: var(--fd-foreground);
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		font-weight: 500;
 		cursor: pointer;
 		transition:
-			background-color 0.15s ease,
-			border-color 0.15s ease,
+			background-color var(--fd-transition-fast),
+			border-color var(--fd-transition-fast),
 			transform 0.1s ease;
 		box-sizing: border-box;
 	}
@@ -812,23 +799,23 @@
 	}
 
 	.playground__sessions-hint {
-		font-size: 0.6875rem;
+		font-size: var(--fd-text-2xs);
 		color: var(--fd-muted-foreground);
-		margin: 0.75rem 0 0.375rem 0.75rem;
+		margin: var(--fd-space-md) 0 var(--fd-space-2xs) var(--fd-space-md);
 		line-height: 1.3;
 	}
 
 	.playground__sessions {
 		flex: 1;
 		overflow-y: auto;
-		padding: 0 0.5rem 1rem;
+		padding: 0 var(--fd-space-xs) var(--fd-space-xl);
 		min-height: 0;
 	}
 
 	.playground__sessions-empty {
-		padding: 1rem;
+		padding: var(--fd-space-xl);
 		text-align: center;
-		font-size: 0.8125rem;
+		font-size: var(--fd-text-xsm);
 		color: var(--fd-muted-foreground);
 	}
 
@@ -837,14 +824,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.625rem 0.75rem;
-		margin-bottom: 0.25rem;
+		padding: var(--fd-space-sm) var(--fd-space-md);
+		margin-bottom: var(--fd-space-3xs);
 		border-radius: var(--fd-radius-md);
 		border-left: 3px solid transparent;
 		cursor: pointer;
 		transition:
-			background-color 0.15s ease,
-			border-left-color 0.15s ease;
+			background-color var(--fd-transition-fast),
+			border-left-color var(--fd-transition-fast);
 	}
 
 	.playground__session:hover {
@@ -864,7 +851,7 @@
 
 	.playground__session-name {
 		flex: 1;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		color: var(--fd-foreground);
 		white-space: nowrap;
 		overflow: hidden;
@@ -880,15 +867,15 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.5rem;
-		height: 1.5rem;
+		width: var(--fd-space-3xl);
+		height: var(--fd-space-3xl);
 		border: none;
-		border-radius: 0.25rem;
+		border-radius: var(--fd-radius-sm);
 		background: transparent;
 		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		opacity: 0;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.playground__session:hover .playground__session-menu {
@@ -896,19 +883,63 @@
 	}
 
 	.playground__session-menu:hover {
-		background-color: var(--fd-error-muted);
-		color: var(--fd-error);
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
-	.playground__session-menu--delete {
+	.playground__session-menu--open {
 		opacity: 1;
-		background-color: var(--fd-success-muted);
-		color: var(--fd-success);
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
+	}
+
+	.playground__session-actions {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
 	}
 
-	.playground__session-menu--delete:hover {
-		background-color: var(--fd-success-muted);
-		color: var(--fd-success-hover);
+	.playground__session-dropdown {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		z-index: 50;
+		min-width: 140px;
+		padding: var(--fd-space-xs);
+		background-color: var(--fd-background);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
+		box-shadow: var(--fd-shadow-lg);
+	}
+
+	.playground__session-dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-sm);
+		width: 100%;
+		padding: var(--fd-space-sm) var(--fd-space-md);
+		border: none;
+		border-radius: var(--fd-radius-sm);
+		background: transparent;
+		color: var(--fd-foreground);
+		font-size: var(--fd-text-sm);
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+		white-space: nowrap;
+	}
+
+	.playground__session-dropdown-item:hover {
+		background-color: var(--fd-muted);
+	}
+
+	.playground__session-dropdown-item--danger {
+		color: var(--fd-error);
+	}
+
+	.playground__session-dropdown-item--danger:hover {
+		background-color: var(--fd-error-muted);
+		color: var(--fd-error);
 	}
 
 	/* Main Content */
@@ -927,8 +958,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 3.25rem;
-		padding: 0 1.25rem;
+		height: var(--fd-playground-header-height);
+		padding: 0 var(--fd-space-2xl);
 		border-bottom: 1px solid var(--fd-border);
 		background-color: var(--fd-background);
 		box-sizing: border-box;
@@ -936,7 +967,7 @@
 	}
 
 	.playground__header-title {
-		font-size: 0.9375rem;
+		font-size: var(--fd-text-md);
 		font-weight: 600;
 		line-height: 1.25;
 		color: var(--fd-foreground);
@@ -947,14 +978,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.75rem;
-		height: 1.75rem;
+		width: var(--fd-playground-icon-btn-size);
+		height: var(--fd-playground-icon-btn-size);
 		border: none;
-		border-radius: 0.375rem;
+		border-radius: var(--fd-radius-md);
 		background: transparent;
 		color: var(--fd-muted-foreground);
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.playground__header-close:hover {
@@ -966,12 +997,12 @@
 	.playground__error {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem 1rem;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		background-color: var(--fd-error-muted);
 		border-bottom: 1px solid var(--fd-error);
 		color: var(--fd-error);
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 	}
 
 	.playground__error-dismiss {
@@ -979,14 +1010,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.5rem;
-		height: 1.5rem;
+		width: var(--fd-space-3xl);
+		height: var(--fd-space-3xl);
 		border: none;
-		border-radius: 0.25rem;
+		border-radius: var(--fd-radius-sm);
 		background: transparent;
 		color: var(--fd-error);
 		cursor: pointer;
-		transition: background-color 0.15s ease;
+		transition: background-color var(--fd-transition-fast);
 	}
 
 	.playground__error-dismiss:hover {
@@ -1008,12 +1039,12 @@
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		gap: 1rem;
+		gap: var(--fd-space-xl);
 		color: var(--fd-muted-foreground);
 	}
 
 	:global(.playground__loading-icon) {
-		font-size: 2rem;
+		font-size: var(--fd-text-2xl);
 		animation: spin 1s linear infinite;
 	}