feat: final tweaks v2

Author: jumski

apps/demo/src/lib/components/DAGVisualization.svelte

@@ -194,6 +194,9 @@
 		return '';
 	}
 
+	// Define the actual DAG step slugs
+	const DAG_STEPS = ['fetchArticle', 'summarize', 'extractKeywords', 'publish'];
+
 	function getNodeClass(stepSlug: string): string {
 		const classes = ['dag-node'];
 
@@ -207,8 +210,9 @@
 			classes.push('node-created');
 		}
 
-		// Dimming: dim nodes that aren't selected when something is selected
-		if (selectedStep && stepSlug !== selectedStep) {
+		// Dimming: Only dim nodes when a DAG step is selected (not flow_config)
+		// If selectedStep is not a DAG step, don't dim anything
+		if (selectedStep && DAG_STEPS.includes(selectedStep) && stepSlug !== selectedStep) {
 			classes.push('node-dimmed');
 		}
 

apps/demo/src/lib/components/EventsPanel.svelte

@@ -12,6 +12,21 @@
 
 	let expandedEventIdx = $state<number | null>(null);
 	let highlightedEventJson = $state<Record<number, string>>({});
+	let isMobile = $state(false);
+
+	// Detect mobile viewport
+	if (typeof window !== 'undefined') {
+		const mediaQuery = window.matchMedia('(max-width: 767px)');
+		isMobile = mediaQuery.matches;
+
+		const updateMobile = (e: MediaQueryListEvent) => {
+			isMobile = e.matches;
+			// Clear cache when switching to force regeneration with new truncation
+			highlightedEventJson = {};
+		};
+
+		mediaQuery.addEventListener('change', updateMobile);
+	}
 
 	// Helper to get short step name
 	function getShortStepName(stepSlug: string): string {
@@ -81,7 +96,9 @@
 		} else {
 			// Generate syntax-highlighted JSON if not already cached
 			if (!highlightedEventJson[idx]) {
-				const truncated = truncateDeep(event);
+				// Mobile: 50 chars, Desktop: 500 chars
+				const maxLength = isMobile ? 50 : 500;
+				const truncated = truncateDeep(event, maxLength);
 				const jsonString = JSON.stringify(truncated, null, 2);
 				const html = await codeToHtml(jsonString, {
 					lang: 'json',

apps/demo/src/lib/components/ExplanationPanel.svelte

@@ -45,7 +45,7 @@
 			'Demonstrates parallel execution, automatic retries, and dependency management—all core pgflow features.',
 		reliabilityFeatures: [
 			{
-				setting: 'maxAttempts: 3',
+				setting: 'maxAttempts: 2',
 				explanation: 'Automatically retries failed steps up to 3 times before giving up'
 			}
 		],
@@ -157,6 +157,19 @@
 	let panelElement: HTMLElement | undefined = $state(undefined);
 	let highlightedInput = $state<string>('');
 	let highlightedOutput = $state<string>('');
+	let isMobile = $state(false);
+
+	// Detect mobile viewport
+	if (typeof window !== 'undefined') {
+		const mediaQuery = window.matchMedia('(max-width: 767px)');
+		isMobile = mediaQuery.matches;
+
+		const updateMobile = (e: MediaQueryListEvent) => {
+			isMobile = e.matches;
+		};
+
+		mediaQuery.addEventListener('change', updateMobile);
+	}
 
 	// Replace long strings with placeholders for mobile display
 	function truncateDeep(obj: unknown, maxLength = 80): unknown {
@@ -183,7 +196,9 @@
 	$effect(() => {
 		const input = stepInput;
 		if (input) {
-			const truncated = truncateDeep(input);
+			// Mobile: 50 chars, Desktop: 500 chars
+			const maxLength = isMobile ? 50 : 500;
+			const truncated = truncateDeep(input, maxLength);
 			const jsonString = JSON.stringify(truncated, null, 2);
 			codeToHtml(jsonString, {
 				lang: 'json',
@@ -200,7 +215,9 @@
 	$effect(() => {
 		const output = stepOutput;
 		if (output) {
-			const truncated = truncateDeep(output);
+			// Mobile: 50 chars, Desktop: 500 chars
+			const maxLength = isMobile ? 50 : 500;
+			const truncated = truncateDeep(output, maxLength);
 			const jsonString = JSON.stringify(truncated, null, 2);
 			codeToHtml(jsonString, {
 				lang: 'json',
@@ -338,7 +355,7 @@
 			</div>
 		{/if}
 
-		<div class="explanation-content text-sm p-4 space-y-3">
+		<div class="explanation-content text-sm p-4 pb-24 md:pb-4 space-y-3">
 			{#if currentStepInfo}
 				{#key selectedStep}
 					<div in:fade={{ duration: 300, delay: 150 }} out:fade={{ duration: 150 }}>
@@ -523,47 +540,53 @@
 				{/key}
 			{:else}
 				<!-- Flow-level view -->
-				<div class="space-y-3">
+				<div class="space-y-4">
 					<!-- What it does -->
-					<div class="bg-accent/30 rounded-lg p-3 border border-accent">
-						<p class="text-sm text-foreground leading-relaxed mb-2">{flowInfo.description}</p>
-						<p class="text-xs text-muted-foreground">{flowInfo.whatItDoes}</p>
-					</div>
+					<p class="text-foreground leading-relaxed">
+						Processes web articles by fetching content, generating summaries and keywords in
+						parallel, then publishing the results. Demonstrates parallel execution, automatic
+						retries, and dependency management.
+					</p>
 
 					<!-- How orchestration works (collapsible) -->
-					<details class="flow-orchestration-explainer">
+					<details
+						class="concept-explainer bg-background/50 border border-border rounded-lg"
+						open
+					>
 						<summary
-							class="font-semibold text-sm text-primary cursor-pointer hover:text-primary/80 flex items-center gap-2 mb-2"
+							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>⚙️</span> How SQL Core orchestrates this flow
+							<span class="concept-caret">▸</span>
+							<span class="flex-1">How pgflow orchestrates this flow</span>
 						</summary>
-						<div
-							class="text-xs text-muted-foreground leading-relaxed bg-secondary/30 rounded p-3 space-y-2"
-						>
+						<div class="text-xs text-muted-foreground leading-relaxed px-3 pb-3 space-y-2">
 							<p>
-								When you call <code class="bg-muted px-1 rounded font-mono"
-									>start_flow('article_flow', {'{url}'})</code
-								>, SQL Core creates a run and initializes state rows for each step. Root steps (no
-								dependencies) get messages pushed to the queue immediately.
+								<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.
 							</p>
 							<p>
-								As Workers execute handlers and call <code class="bg-muted px-1 rounded font-mono"
-									>complete_task()</code
-								>, SQL Core acknowledges completion, saves outputs, checks dependent steps, and
-								starts those with all dependencies satisfied. The run completes when
+								<strong>Edge Function worker</strong> polls the queue, calls
+								<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">remaining_steps = 0</code>.
 							</p>
-							<p class="text-muted-foreground/80 italic">
-								This demo uses Supabase Realtime to broadcast graph state changes from SQL Core back
-								to the browser in real-time.
+							<p>
+								<strong>Supabase Realtime</strong> broadcasts state changes back to this UI for live
+								updates.
 							</p>
 						</div>
 					</details>
 
 					<!-- Reliability Features -->
 					<div>
-						<div class="font-semibold text-muted-foreground mb-1.5 text-sm flex items-center gap-2">
-							<span>🛡️</span> Reliability Configuration
+						<div class="font-semibold text-muted-foreground mb-1.5 text-sm">
+							Reliability Configuration
 						</div>
 						<div class="space-y-2">
 							{#each flowInfo.reliabilityFeatures as feature (feature.setting)}

apps/demo/src/lib/data/flow-code.ts

@@ -19,7 +19,7 @@ export const FLOW_SECTIONS: Record<string, CodeSection> = {
 	flow_config: {
 		code: `new Flow<{ url: string }>({
   slug: 'article_flow',
-  maxAttempts: 3
+  maxAttempts: 2
 })`
 	},
 	fetchArticle: {

apps/demo/src/routes/+page.svelte

@@ -174,6 +174,7 @@
 	let eventsScrollContainer: HTMLDivElement | undefined;
 	let expandedEventIdx = $state<number | null>(null);
 	let highlightedEventJson = $state<Record<number, string>>({});
+	let isMobile = $state(false);
 
 	function toggleMobileEvents() {
 		if (!mobileEventsVisible) {
@@ -200,7 +201,9 @@
 		} else {
 			// Generate syntax-highlighted JSON if not already cached
 			if (!highlightedEventJson[idx]) {
-				const truncated = truncateDeep(event);
+				// Mobile: 50 chars, Desktop: 500 chars
+				const maxLength = isMobile ? 50 : 500;
+				const truncated = truncateDeep(event, maxLength);
 				const jsonString = JSON.stringify(truncated, null, 2);
 				const html = await codeToHtml(jsonString, {
 					lang: 'json',
@@ -297,6 +300,18 @@
 	if (typeof window !== 'undefined') {
 		setViewportHeight();
 
+		// Detect mobile viewport for truncation
+		const mediaQuery = window.matchMedia('(max-width: 767px)');
+		isMobile = mediaQuery.matches;
+
+		const updateMobile = (e: MediaQueryListEvent) => {
+			isMobile = e.matches;
+			// Clear cache when switching to force regeneration with new truncation
+			highlightedEventJson = {};
+		};
+
+		mediaQuery.addEventListener('change', updateMobile);
+
 		// Listen to visualViewport resize if available (better for mobile)
 		if (window.visualViewport) {
 			window.visualViewport.addEventListener('resize', setViewportHeight);
@@ -307,6 +322,7 @@
 
 		// Clean up on destroy
 		onDestroy(() => {
+			mediaQuery.removeEventListener('change', updateMobile);
 			if (window.visualViewport) {
 				window.visualViewport.removeEventListener('resize', setViewportHeight);
 			} else {

apps/demo/supabase/functions/article_flow_worker/article_flow.ts

@@ -14,7 +14,8 @@ function sleep(ms: number) {
 // Flow definition - clean and minimal
 export default new Flow<{ url: string }>({
 	slug: 'article_flow',
-	maxAttempts: 3
+	baseDelay: 1,
+	maxAttempts: 2
 })
 	.step({ slug: 'fetchArticle' }, async (input) => {
 		await sleep(SLEEP_MS);

apps/demo/supabase/migrations/20251031234352_create_article_flow_flow.sql

@@ -1,5 +1,5 @@
-select pgflow.create_flow('article_flow', max_attempts => 3);
+select pgflow.create_flow('article_flow', max_attempts => 2, base_delay => 1);
 select pgflow.add_step('article_flow', 'fetchArticle');
-select pgflow.add_step('article_flow', 'summarize', array['fetchArticle'], base_delay => 1);
+select pgflow.add_step('article_flow', 'summarize', array['fetchArticle']);
 select pgflow.add_step('article_flow', 'extractKeywords', array['fetchArticle']);
 select pgflow.add_step('article_flow', 'publish', array['summarize', 'extractKeywords']);