From c5266e079b2d84d2deb5e71f4c8b70d4f1bbf93a Mon Sep 17 00:00:00 2001
From: Wojtek Majewski <wojciech.majewski@pm.me>
Date: Tue, 11 Nov 2025 18:29:54 +0100
Subject: [PATCH] chore: fix demo code review commends

---
 .../src/lib/components/EventsPanel.svelte     |  5 +++
 .../lib/components/ExplanationPanel.svelte    | 35 ++++++++++++-------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/demo/src/lib/components/EventsPanel.svelte b/apps/demo/src/lib/components/EventsPanel.svelte
index 87aaf6016..5c9c92dbc 100644
--- a/apps/demo/src/lib/components/EventsPanel.svelte
+++ b/apps/demo/src/lib/components/EventsPanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { createFlowState } from '$lib/stores/pgflow-state.svelte';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import { Play, CheckCircle2, XCircle } from '@lucide/svelte';
@@ -26,6 +27,10 @@
 		};
 
 		mediaQuery.addEventListener('change', updateMobile);
+
+		onDestroy(() => {
+			mediaQuery.removeEventListener('change', updateMobile);
+		});
 	}
 
 	// Helper to get short step name
diff --git a/apps/demo/src/lib/components/ExplanationPanel.svelte b/apps/demo/src/lib/components/ExplanationPanel.svelte
index 272f9366c..4d031502d 100644
--- a/apps/demo/src/lib/components/ExplanationPanel.svelte
+++ b/apps/demo/src/lib/components/ExplanationPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { Button } from '$lib/components/ui/button';
 	import { codeToHtml } from 'shiki';
@@ -46,7 +46,11 @@
 		reliabilityFeatures: [
 			{
 				setting: 'maxAttempts: 2',
-				explanation: 'Automatically retries failed steps up to 3 times before giving up'
+				explanation: 'Automatically retries failed steps up to 2 times before giving up'
+			},
+			{
+				setting: 'baseDelay: 1',
+				explanation: 'Initial retry delay of 1 second, doubling with each retry (1s, 2s, 4s...)'
 			}
 		],
 		inputType: `{
@@ -169,6 +173,10 @@
 		};
 
 		mediaQuery.addEventListener('change', updateMobile);
+
+		onDestroy(() => {
+			mediaQuery.removeEventListener('change', updateMobile);
+		});
 	}
 
 	// Replace long strings with placeholders for mobile display
@@ -596,20 +604,23 @@
 						</div>
 					</details>
 
-					<!-- Reliability Features -->
-					<div>
-						<div class="font-semibold text-muted-foreground mb-1.5 text-sm">
-							Reliability Configuration
-						</div>
-						<div class="space-y-2">
+					<!-- Reliability Configuration (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>
+						</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="bg-secondary/50 rounded p-2.5">
-									<code class="text-xs font-mono text-primary">{feature.setting}</code>
-									<p class="text-xs text-muted-foreground mt-1">{feature.explanation}</p>
+								<div>
+									<code class="bg-muted px-1 rounded font-mono text-primary">{feature.setting}</code>
+									- {feature.explanation}
 								</div>
 							{/each}
 						</div>
-					</div>
+					</details>
 
 					<!-- Steps -->
 					<div>