diff --git a/apps/demo/src/lib/components/EventsPanel.svelte b/apps/demo/src/lib/components/EventsPanel.svelte
index 5c9c92dbc..9ecb55cc2 100644
--- a/apps/demo/src/lib/components/EventsPanel.svelte
+++ b/apps/demo/src/lib/components/EventsPanel.svelte
@@ -4,6 +4,7 @@
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import { Play, CheckCircle2, XCircle } from '@lucide/svelte';
 	import { codeToHtml } from 'shiki';
+	import PulseDot from '$lib/components/PulseDot.svelte';
 
 	interface Props {
 		flowState: ReturnType<typeof createFlowState>;
@@ -137,13 +138,17 @@
 	});
 </script>
 
-<Card class="h-full flex flex-col">
+<Card class="h-full flex flex-col relative">
+	<!-- PulseDot in center for desktop/tablet view -->
+	<div class="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+		<PulseDot />
+	</div>
 	<CardHeader class="pb-0 pt-2 px-3 flex-shrink-0 relative">
 		<div class="flex items-center justify-between">
 			<CardTitle class="text-sm">Event Stream ({displayableEvents.length})</CardTitle>
 		</div>
 	</CardHeader>
-	<CardContent class="flex-1 overflow-auto pt-1 pb-2 px-3 min-h-0">
+	<CardContent class="flex-1 overflow-auto pt-1 pb-2 px-3 min-h-0 relative">
 		<div class="space-y-1">
 			{#if displayableEvents.length === 0}
 				<p class="text-sm text-muted-foreground text-center py-8">
diff --git a/apps/demo/src/lib/components/ExplanationPanel.svelte b/apps/demo/src/lib/components/ExplanationPanel.svelte
index 4d031502d..6a4984e22 100644
--- a/apps/demo/src/lib/components/ExplanationPanel.svelte
+++ b/apps/demo/src/lib/components/ExplanationPanel.svelte
@@ -43,14 +43,24 @@
 			'This flow processes web articles by fetching content, generating summaries and keywords, then publishing the results.',
 		whatItDoes:
 			'Demonstrates parallel execution, automatic retries, and dependency management—all core pgflow features.',
-		reliabilityFeatures: [
+		options: [
 			{
-				setting: 'maxAttempts: 2',
-				explanation: 'Automatically retries failed steps up to 2 times before giving up'
+				name: 'slug',
+				value: '"article_flow"',
+				explanation:
+					'Unique identifier for this flow. Must be ≤128 characters, containing only letters, numbers, and underscores.'
 			},
 			{
-				setting: 'baseDelay: 1',
-				explanation: 'Initial retry delay of 1 second, doubling with each retry (1s, 2s, 4s...)'
+				name: 'maxAttempts',
+				value: '2',
+				explanation:
+					'Maximum total attempts allowed. With 2 attempts: 1 initial try + 1 retry on failure.'
+			},
+			{
+				name: 'baseDelay',
+				value: '1',
+				explanation:
+					'Base delay for retries in seconds. With exponential backoff, first retry waits 1s (subsequent retries would wait 2s, 4s, etc).'
 			}
 		],
 		inputType: `{
@@ -62,26 +72,27 @@
 	// Step-level concept explanations (how pgflow works internally)
 	const stepConcepts: Record<string, string> = {
 		fetchArticle:
-			'Root step with no dependencies. start_flow() creates a task and queues a message containing the task ID. ' +
-			'Worker polls the queue, calls start_tasks() with the task ID to reserve the task and get its input, ' +
-			'executes the handler, calls complete_task() to save the output. Tasks exist independently from queue messages, ' +
-			'enabling both automated polling and manual reservation (future: human approval steps).',
+			'Root step (no dependencies) - starts immediately when flow begins. ' +
+			'pgflow creates a task and queues it. Worker polls the queue, reserves the task, ' +
+			'executes your handler with the initial flow input, and saves the output. ' +
+			'<strong>KEY INSIGHT:</strong> The output becomes available to dependent steps under the key <strong>"fetchArticle"</strong>.',
 
 		summarize:
-			'Depends on fetchArticle. When fetchArticle completes, SQL Core checks dependencies, creates a task, and queues a message. ' +
-			"Worker polls, calls start_tasks() which assembles input from both fetchArticle's output and the original run input, " +
-			'executes the handler, calls complete_task().',
+			'Waits for <strong>fetchArticle</strong> to complete. Once ready, pgflow creates a task and queues it. ' +
+			"When the worker calls <strong>start_tasks()</strong>, the SQL function assembles the input by combining the original flow input with <strong>fetchArticle's</strong> output. " +
+			'<strong>KEY INSIGHT:</strong> Dependencies automatically contribute their outputs to your input object.',
 
 		extractKeywords:
-			'Also depends on fetchArticle, so becomes ready alongside summarize. ' +
-			'Both messages hit the queue simultaneously—parallel execution happens naturally as workers ' +
-			'independently poll and start whichever task they receive first.',
+			'Also depends on <strong>fetchArticle</strong> - becomes ready at the same time as <strong>summarize</strong>. ' +
+			'Both tasks queue simultaneously. Workers poll for batches, ' +
+			'enabling true parallel execution when multiple workers or async handlers are involved. ' +
+			'<strong>KEY INSIGHT:</strong> Steps with the same dependencies run in parallel automatically.',
 
 		publish:
-			'Depends on both summarize AND extractKeywords—blocked until both complete. ' +
-			'After the second finishes, SQL Core finds publish ready, creates a task and queues a message. ' +
-			'start_tasks() assembles input from both dependency outputs. After completion, no dependents remain ' +
-			'and the run is marked completed.'
+			'Requires BOTH <strong>summarize</strong> AND <strong>extractKeywords</strong> to complete. pgflow waits for all dependencies, ' +
+			'then creates and queues a task. When the worker calls <strong>start_tasks()</strong>, the SQL function assembles the input ' +
+			'by combining outputs from both dependencies. After <strong>publish</strong> completes, the flow finishes. ' +
+			'<strong>KEY INSIGHT:</strong> Multiple dependencies create synchronization points in your workflow.'
 	};
 
 	// Step metadata for explanation
@@ -91,6 +102,11 @@
 			name: string;
 			displayName: string;
 			whatItDoes: string;
+			options: Array<{
+				name: string;
+				value: string;
+				explanation: string;
+			}>;
 			dependsOn: string[];
 			dependents: string[];
 			inputType: string;
@@ -102,6 +118,20 @@
 			displayName: 'Fetch Article',
 			whatItDoes:
 				'Fetches article content from the provided URL using Jina Reader API. Returns structured content with title and text for downstream processing.',
+			options: [
+				{
+					name: 'slug',
+					value: '"fetchArticle"',
+					explanation:
+						'Step identifier within the flow. Must be unique per flow, ≤128 chars, and contain only letters, numbers, and underscores.'
+				},
+				{
+					name: 'dependsOn',
+					value: '[]',
+					explanation:
+						'No dependencies - this is a root step that starts immediately when the flow begins. Only receives the initial flow input.'
+				}
+			],
 			dependsOn: [],
 			dependents: ['summarize', 'extractKeywords'],
 			inputType: `{
@@ -119,6 +149,19 @@
 			displayName: 'Summarize',
 			whatItDoes:
 				'Generates a concise summary of the article content using an LLM. Runs in parallel with keyword extraction.',
+			options: [
+				{
+					name: 'slug',
+					value: '"summarize"',
+					explanation: 'Step identifier within the flow.'
+				},
+				{
+					name: 'dependsOn',
+					value: '["fetchArticle"]',
+					explanation:
+						'Waits for fetchArticle to complete. IMPORTANT: The output from fetchArticle will be available in this step\'s input object under the key "fetchArticle".'
+				}
+			],
 			dependsOn: ['fetchArticle'],
 			dependents: ['publish'],
 			inputType: `{
@@ -134,6 +177,19 @@
 			displayName: 'Extract Keywords',
 			whatItDoes:
 				'Extracts key terms and topics from the article using an LLM. Runs in parallel with summarization.',
+			options: [
+				{
+					name: 'slug',
+					value: '"extractKeywords"',
+					explanation: 'Step identifier within the flow.'
+				},
+				{
+					name: 'dependsOn',
+					value: '["fetchArticle"]',
+					explanation:
+						'Waits for fetchArticle to complete. IMPORTANT: The output from fetchArticle will be available in this step\'s input object under the key "fetchArticle".'
+				}
+			],
 			dependsOn: ['fetchArticle'],
 			dependents: ['publish'],
 			inputType: `{
@@ -148,6 +204,19 @@
 			displayName: 'Publish',
 			whatItDoes:
 				'Combines the summary and keywords and publishes the processed article. In this demo, returns a mock article ID—in production, this would insert into a database.',
+			options: [
+				{
+					name: 'slug',
+					value: '"publish"',
+					explanation: 'Step identifier within the flow.'
+				},
+				{
+					name: 'dependsOn',
+					value: '["summarize", "extractKeywords"]',
+					explanation:
+						'Waits for BOTH summarize AND extractKeywords to complete. IMPORTANT: The outputs from both steps will be available in this step\'s input object under their respective keys: "summarize" and "extractKeywords".'
+				}
+			],
 			dependsOn: ['summarize', 'extractKeywords'],
 			dependents: [],
 			inputType: `{
@@ -389,6 +458,29 @@
 							{/if}
 						</div>
 
+						<!-- Configuration Options (collapsible) -->
+						<details
+							class="concept-explainer mt-2 bg-background/50 border border-border rounded-lg"
+						>
+							<summary
+								class="font-semibold text-sm text-foreground cursor-pointer hover:bg-background/80 flex items-center gap-2 p-3 rounded-lg transition-colors"
+							>
+								<span class="concept-caret">▸</span>
+								<span class="flex-1">Configuration options</span>
+							</summary>
+							<div class="text-sm text-foreground/90 leading-relaxed px-3 pb-3 space-y-2.5">
+								{#each currentStepInfo.options as option (option.name)}
+									<div>
+										<div class="font-mono text-sm mb-0.5">
+											<span class="font-bold text-foreground">{option.name}:</span>
+											<span class="text-foreground ml-1">{option.value}</span>
+										</div>
+										<div class="text-sm text-foreground/80 ml-4">{option.explanation}</div>
+									</div>
+								{/each}
+							</div>
+						</details>
+
 						<!-- Concept explainer (collapsible) -->
 						<details
 							class="concept-explainer mt-3 mb-3 bg-background/50 border border-border rounded-lg"
@@ -399,8 +491,9 @@
 								<span class="concept-caret">▸</span>
 								<span class="flex-1">How this step works in pgflow</span>
 							</summary>
-							<div class="text-xs text-muted-foreground leading-relaxed px-3 pb-3">
-								{stepConcepts[currentStepInfo.name]}
+							<div class="text-sm text-foreground/80 leading-relaxed px-3 pb-3">
+								<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+								{@html stepConcepts[currentStepInfo.name]}
 							</div>
 						</details>
 
@@ -579,44 +672,52 @@
 							class="font-semibold text-sm text-foreground cursor-pointer hover:bg-background/80 flex items-center gap-2 p-3 rounded-lg transition-colors"
 						>
 							<span class="concept-caret">▸</span>
-							<span class="flex-1">How pgflow orchestrates this flow</span>
+							<span class="flex-1">Orchestration in Postgres</span>
 						</summary>
-						<div class="text-xs text-muted-foreground leading-relaxed px-3 pb-3 space-y-2">
+						<div class="text-sm text-foreground/80 leading-relaxed px-3 pb-3 space-y-2.5">
 							<p>
-								<code class="bg-muted px-1 rounded font-mono">start_flow()</code> creates a run and initializes
-								state for each step. Root steps (no dependencies) get tasks queued immediately.
+								The <strong>pgflow client</strong> calls SQL function
+								<code class="bg-muted px-1 rounded font-mono">start_flow()</code> via Supabase RPC, which
+								creates a run and initializes state for each step. Root steps (no dependencies) get tasks
+								queued immediately.
 							</p>
 							<p>
-								<strong>Edge Function worker</strong> polls the queue, calls
+								<strong>Edge Function worker</strong> polls the queue, calls SQL function
 								<code class="bg-muted px-1 rounded font-mono">start_tasks()</code> to reserve tasks,
 								executes handlers, then calls
 								<code class="bg-muted px-1 rounded font-mono">complete_task()</code> to save outputs.
 							</p>
 							<p>
-								<strong>SQL Core</strong> checks dependencies after each completion, creates tasks
-								for steps with all dependencies met, and marks the run complete when
+								<code class="bg-muted px-1 rounded font-mono">complete_task()</code> checks
+								dependencies after each completion, creates tasks for steps with all dependencies
+								met, and marks the run complete when
 								<code class="bg-muted px-1 rounded font-mono">remaining_steps = 0</code>.
 							</p>
 							<p>
-								<strong>Supabase Realtime</strong> broadcasts state changes back to this UI for live
-								updates.
+								<strong>Supabase Realtime</strong> streams database events. The
+								<strong>pgflow client</strong>
+								transforms these into a developer-friendly API with promises for completion and reactive
+								state updates.
 							</p>
 						</div>
 					</details>
 
-					<!-- Reliability Configuration (collapsible) -->
+					<!-- Configuration Options (collapsible) -->
 					<details class="concept-explainer bg-background/50 border border-border rounded-lg">
 						<summary
 							class="font-semibold text-sm text-foreground cursor-pointer hover:bg-background/80 flex items-center gap-2 p-3 rounded-lg transition-colors"
 						>
 							<span class="concept-caret">▸</span>
-							<span class="flex-1">Reliability configuration</span>
+							<span class="flex-1">Configuration options</span>
 						</summary>
-						<div class="text-xs text-muted-foreground leading-relaxed px-3 pb-3 space-y-2">
-							{#each flowInfo.reliabilityFeatures as feature (feature.setting)}
+						<div class="text-sm text-foreground/90 leading-relaxed px-3 pb-3 space-y-2.5">
+							{#each flowInfo.options as option (option.name)}
 								<div>
-									<code class="bg-muted px-1 rounded font-mono text-primary">{feature.setting}</code>
-									- {feature.explanation}
+									<div class="font-mono text-sm mb-0.5">
+										<span class="font-bold text-foreground">{option.name}:</span>
+										<span class="text-foreground ml-1">{option.value}</span>
+									</div>
+									<div class="text-sm text-foreground/80 ml-4">{option.explanation}</div>
 								</div>
 							{/each}
 						</div>
@@ -673,6 +774,11 @@
 		scroll-behavior: smooth;
 	}
 
+	/* Make inline code elements slightly bolder */
+	.explanation-content :global(code) {
+		font-weight: 500;
+	}
+
 	/* Custom scrollbar styling */
 	.explanation-content::-webkit-scrollbar {
 		width: 8px;
diff --git a/apps/demo/src/lib/components/PulseDot.svelte b/apps/demo/src/lib/components/PulseDot.svelte
index cee97429f..0111f6475 100644
--- a/apps/demo/src/lib/components/PulseDot.svelte
+++ b/apps/demo/src/lib/components/PulseDot.svelte
@@ -1,16 +1,36 @@
 <script lang="ts">
 	import { pulseDots } from '$lib/stores/pulse-dots.svelte';
 
+	interface Props {
+		scale?: number; // Optional scale factor for DAG nodes
+	}
+
+	let { scale = 1 }: Props = $props();
+
 	// Component shows/hides based on global pulsing state
 	const visible = $derived(pulseDots.pulsing);
 	const exploding = $derived(pulseDots.exploding);
+
+	// Calculate container scale style
+	const containerStyle = $derived(scale !== 1 ? `transform: scale(${scale})` : '');
 </script>
 
 {#if visible}
-	<div class="pulse-dot" class:exploding></div>
+	<div class="pulse-dot-container" style={containerStyle}>
+		<div class="pulse-dot" class:exploding></div>
+	</div>
 {/if}
 
 <style>
+	.pulse-dot-container {
+		/* Position container in center of parent */
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+	}
+
 	.pulse-dot {
 		width: 10px;
 		height: 10px;
@@ -20,11 +40,11 @@
 		pointer-events: none;
 		box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
 
-		/* Center in parent container */
-		position: absolute;
+		/* Center in container */
+		position: relative;
+		transform: translate(-50%, -50%);
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%);
 
 		/* Normal pulsing while visible */
 		animation: pulse-normal 1s ease-out infinite;
@@ -45,9 +65,9 @@
 		}
 		50% {
 			box-shadow:
-				0 0 12px rgba(255, 255, 255, 0.8),
-				0 0 0 16px rgba(255, 255, 255, 0.4);
-			transform: translate(-50%, -50%) scale(1.1);
+				0 0 10px rgba(255, 255, 255, 0.8),
+				0 0 0 10px rgba(255, 255, 255, 0.4);
+			transform: translate(-50%, -50%) scale(1.05);
 		}
 		100% {
 			box-shadow:
@@ -68,23 +88,23 @@
 		}
 		30% {
 			box-shadow:
-				0 0 16px rgba(255, 255, 255, 0.6),
-				0 0 0 16px rgba(255, 255, 255, 0.4);
-			transform: translate(-50%, -50%) scale(1.15);
+				0 0 12px rgba(255, 255, 255, 0.6),
+				0 0 0 12px rgba(255, 255, 255, 0.4);
+			transform: translate(-50%, -50%) scale(1.1);
 			opacity: 0.2;
 		}
 		60% {
 			box-shadow:
-				0 0 20px rgba(255, 255, 255, 0.4),
-				0 0 0 24px rgba(255, 255, 255, 0.2);
-			transform: translate(-50%, -50%) scale(1.35);
+				0 0 14px rgba(255, 255, 255, 0.4),
+				0 0 0 16px rgba(255, 255, 255, 0.2);
+			transform: translate(-50%, -50%) scale(1.2);
 			opacity: 0.1;
 		}
 		100% {
 			box-shadow:
-				0 0 24px rgba(255, 255, 255, 0),
-				0 0 0 32px rgba(255, 255, 255, 0);
-			transform: translate(-50%, -50%) scale(1.5);
+				0 0 16px rgba(255, 255, 255, 0),
+				0 0 0 20px rgba(255, 255, 255, 0);
+			transform: translate(-50%, -50%) scale(1.3);
 			opacity: 0;
 		}
 	}
diff --git a/apps/demo/src/lib/data/flow-code.ts b/apps/demo/src/lib/data/flow-code.ts
index 8ab128ecd..22b3c12fe 100644
--- a/apps/demo/src/lib/data/flow-code.ts
+++ b/apps/demo/src/lib/data/flow-code.ts
@@ -19,6 +19,7 @@ export const FLOW_SECTIONS: Record<string, CodeSection> = {
 	flow_config: {
 		code: `new Flow<{ url: string }>({
   slug: 'article_flow',
+  baseDelay:1,
   maxAttempts: 2
 })`
 	},
diff --git a/apps/demo/src/routes/+page.svelte b/apps/demo/src/routes/+page.svelte
index 2a434c351..fc3973cf2 100644
--- a/apps/demo/src/routes/+page.svelte
+++ b/apps/demo/src/routes/+page.svelte
@@ -12,7 +12,16 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Card } from '$lib/components/ui/card';
-	import { Play, CheckCircle2, XCircle, Code, GitBranch, Radio, Loader2 } from '@lucide/svelte';
+	import {
+		Play,
+		CheckCircle2,
+		XCircle,
+		Code,
+		GitBranch,
+		Radio,
+		Loader2,
+		Lightbulb
+	} from '@lucide/svelte';
 	import { codeToHtml } from 'shiki';
 	import type ArticleFlow from '../../supabase/functions/article_flow_worker/article_flow';
 	import { track } from '$lib/analytics';
@@ -84,6 +93,9 @@
 			hasRunOnce = true;
 			// Don't show modal on completion - it breaks the flow of viewing results
 
+			// Show pulse dots to guide user to explore the completed flow
+			showPulseDots();
+
 			// Track Flow Completed
 			if (flowStartTime) {
 				const duration = Math.round((Date.now() - flowStartTime) / 1000);
@@ -697,50 +709,57 @@
 			{:else}
 				<!-- Placeholder cheat sheet -->
 				<div
-					class="overflow-auto min-h-0 hidden md:flex flex-col items-center justify-center bg-card rounded-lg border border-border p-8 gap-6"
+					class="overflow-auto min-h-0 hidden md:flex flex-col items-center justify-center bg-card rounded-lg border border-border p-4 gap-4"
 					style="grid-area: explanation"
 				>
-					<div class="text-center max-w-2xl">
-						<h2 class="text-2xl font-bold mb-2 text-foreground">Interactive Flow Explorer</h2>
-						<p class="text-muted-foreground mb-8">
-							Click on any code block or DAG node to explore how steps work
-						</p>
-					</div>
-
-					<div class="grid grid-cols-3 gap-6 max-w-3xl">
+					<!-- Interaction icons (smaller, moved up) -->
+					<div class="grid grid-cols-3 gap-4 max-w-2xl">
 						<!-- Code interaction -->
-						<div class="flex flex-col items-center text-center gap-3">
-							<div class="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center">
-								<Code class="w-8 h-8 text-blue-400" />
+						<div class="flex flex-col items-center text-center gap-2">
+							<div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
+								<Code class="w-6 h-6 text-blue-400" />
 							</div>
 							<div>
-								<h3 class="font-semibold text-sm mb-1">Click Code</h3>
-								<p class="text-xs text-muted-foreground">Select a step to see its details</p>
+								<h3 class="font-semibold text-xs mb-0.5">Click Code</h3>
+								<p class="text-xs text-muted-foreground">Select a step to see details</p>
 							</div>
 						</div>
 
 						<!-- DAG interaction -->
-						<div class="flex flex-col items-center text-center gap-3">
-							<div class="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center">
-								<GitBranch class="w-8 h-8 text-green-400" />
+						<div class="flex flex-col items-center text-center gap-2">
+							<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
+								<GitBranch class="w-6 h-6 text-green-400" />
 							</div>
 							<div>
-								<h3 class="font-semibold text-sm mb-1">Explore DAG</h3>
+								<h3 class="font-semibold text-xs mb-0.5">Explore DAG</h3>
 								<p class="text-xs text-muted-foreground">Click nodes to see dependencies</p>
 							</div>
 						</div>
 
 						<!-- Watch execution -->
-						<div class="flex flex-col items-center text-center gap-3">
-							<div class="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center">
-								<Radio class="w-8 h-8 text-purple-400" />
+						<div class="flex flex-col items-center text-center gap-2">
+							<div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
+								<Radio class="w-6 h-6 text-purple-400" />
 							</div>
 							<div>
-								<h3 class="font-semibold text-sm mb-1">Watch Events</h3>
+								<h3 class="font-semibold text-xs mb-0.5">Watch Events</h3>
 								<p class="text-xs text-muted-foreground">Track execution in real-time</p>
 							</div>
 						</div>
 					</div>
+
+					<!-- Key Architecture Insight Box (moved down) -->
+					<div class="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4 max-w-2xl">
+						<h3 class="font-bold text-base text-foreground mb-2 flex items-center gap-2">
+							<Lightbulb class="w-5 h-5 text-blue-400" />
+							How pgflow Works
+						</h3>
+						<p class="text-sm text-foreground/90 leading-relaxed">
+							<strong>Postgres is the source of truth.</strong> It exposes a SQL API to manage state.
+							Client starts flows → API queues tasks → Workers poll and execute → API propagates state
+							through the DAG. Simple and modular.
+						</p>
+					</div>
 				</div>
 			{/if}
 		</div>
@@ -790,60 +809,68 @@
 </div>
 
 <!-- Mobile: Sticky bottom events bar -->
-{#if flowState.timeline.length > 0}
-	<!-- Backdrop for expanded state -->
-	<div
-		class="fixed inset-0 bg-black/50 z-40 md:hidden mobile-events-backdrop"
-		class:mobile-visible={mobileEventsVisible}
-		onclick={toggleMobileEvents}
-	></div>
+<!-- Backdrop for expanded state -->
+<div
+	class="fixed inset-0 bg-black/50 z-40 md:hidden mobile-events-backdrop"
+	class:mobile-visible={mobileEventsVisible}
+	onclick={toggleMobileEvents}
+></div>
 
-	<!-- Events bar container - transitions between collapsed and expanded -->
-	<div
-		class="fixed inset-x-0 bottom-0 z-50 md:hidden border-t border-border mobile-events-bar-container"
-		class:expanded={mobileEventsVisible}
+<!-- Events bar container - transitions between collapsed and expanded -->
+<div
+	class="fixed inset-x-0 bottom-0 z-50 md:hidden border-t border-border mobile-events-bar-container"
+	class:expanded={mobileEventsVisible}
+>
+	<!-- Collapsed view: Horizontal event badges (whole bar is clickable) -->
+	<button
+		onclick={toggleMobileEvents}
+		class="flex items-center gap-2 px-3 py-2 h-12 w-full bg-card hover:bg-accent/30 transition-colors cursor-pointer relative"
+		style="display: {mobileEventsContentVisible ? 'none' : 'flex'}"
 	>
-		<!-- Collapsed view: Horizontal event badges (whole bar is clickable) -->
-		<button
-			onclick={toggleMobileEvents}
-			class="flex items-center gap-2 px-3 py-2 h-12 w-full bg-card hover:bg-accent/30 transition-colors cursor-pointer"
-			style="display: {mobileEventsContentVisible ? 'none' : 'flex'}"
-		>
-			<div class="text-xs text-muted-foreground flex items-center gap-1 flex-shrink-0">
-				<span class="font-semibold">Events</span>
-				<span>({displayableEvents.length})</span>
-				<span class="text-[10px]">▲</span>
-			</div>
-			<div
-				class="flex-1 overflow-x-auto flex gap-1.5 event-badges-scroll pointer-events-none"
-				bind:this={eventsScrollContainer}
-			>
-				{#each displayableEvents as { badge, idx } (idx)}
-					{#if badge}
-						<div
-							class="flex items-center gap-1 px-2 py-1 rounded text-xs font-medium flex-shrink-0 event-badge event-badge-{badge.color}"
-						>
-							<svelte:component this={badge.icon} class="w-3 h-3" />
-							<span>{badge.text}</span>
-						</div>
-					{/if}
-				{/each}
+		<div class="text-xs text-muted-foreground flex items-center gap-1 flex-shrink-0">
+			<span class="font-semibold">Events</span>
+			<span>({displayableEvents.length})</span>
+			<span class="text-[10px]">▲</span>
+			<!-- PulseDot for mobile events footer -->
+			<div class="ml-1">
+				<PulseDot />
 			</div>
-		</button>
+		</div>
+		<div
+			class="flex-1 overflow-x-auto flex gap-1.5 event-badges-scroll pointer-events-none"
+			bind:this={eventsScrollContainer}
+		>
+			{#each displayableEvents as { badge, idx } (idx)}
+				{#if badge}
+					<div
+						class="flex items-center gap-1 px-2 py-1 rounded text-xs font-medium flex-shrink-0 event-badge event-badge-{badge.color}"
+					>
+						<svelte:component this={badge.icon} class="w-3 h-3" />
+						<span>{badge.text}</span>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</button>
 
-		<!-- Expanded view: Full event list with badges -->
+	<!-- Expanded view: Full event list with badges -->
+	<div
+		class="h-full flex flex-col bg-[#252928]"
+		style="display: {mobileEventsContentVisible ? 'flex' : 'none'}"
+	>
 		<div
-			class="h-full flex flex-col bg-[#252928]"
-			style="display: {mobileEventsContentVisible ? 'flex' : 'none'}"
+			class="flex items-center justify-between px-3 py-2.5 border-b border-border/50 flex-shrink-0"
 		>
-			<div
-				class="flex items-center justify-between px-3 py-2.5 border-b border-border/50 flex-shrink-0"
-			>
-				<h3 class="font-semibold text-sm">Event Stream ({displayableEvents.length})</h3>
-				<button onclick={toggleMobileEvents} class="text-muted-foreground text-lg">✕</button>
-			</div>
-			<div class="overflow-auto flex-1 py-2">
-				<div class="space-y-1.5 px-3">
+			<h3 class="font-semibold text-sm">Event Stream ({displayableEvents.length})</h3>
+			<button onclick={toggleMobileEvents} class="text-muted-foreground text-lg">✕</button>
+		</div>
+		<div class="overflow-auto flex-1 py-2">
+			<div class="space-y-1.5 px-3">
+				{#if displayableEvents.length === 0}
+					<p class="text-sm text-muted-foreground text-center py-8">
+						No events yet. Start a flow to see events.
+					</p>
+				{:else}
 					{#each displayableEvents as { badge, event, idx } (idx)}
 						{#if badge}
 							<button
@@ -879,11 +906,11 @@
 							</button>
 						{/if}
 					{/each}
-				</div>
+				{/if}
 			</div>
 		</div>
 	</div>
-{/if}
+</div>
 
 <style>
 	.page-container {