feat: demo add synth events (#332)

Author: jumski

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

@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition';
 	import { codeToHtml } from 'shiki';
 	import { FLOW_CODE, getStepFromLine, FLOW_SECTIONS } from '$lib/data/flow-code';
-	import type { createFlowState } from '$lib/stores/pgflow-state-improved.svelte';
+	import type { createFlowState } from '$lib/stores/pgflow-state.svelte';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import PulseDot from '$lib/components/PulseDot.svelte';
 
@@ -61,7 +61,8 @@
 
 	// Helper to get status for a step badge
 	function getStepStatus(stepSlug: string): string | null {
-		const status = flowState.stepStatuses[stepSlug];
+		// Use reactive step() method from runState
+		const status = flowState.step(stepSlug).status;
 		const hasFlowStarted = flowState.status !== 'idle';
 
 		// Don't show badge if flow hasn't started yet
@@ -70,7 +71,7 @@
 		}
 
 		// If flow has started but this step has no status yet, don't show indicator
-		if (!status) {
+		if (!status || status === 'created') {
 			return null;
 		}
 
@@ -210,8 +211,8 @@
 		// Explicitly track these dependencies
 		const currentSelectedStep = selectedStep;
 		const currentHoveredStep = hoveredStep;
-		// Ensure reactivity to step status changes by accessing it
-		void flowState.stepStatuses;
+		// Ensure reactivity to step status changes by accessing flowState.run
+		void flowState.run;
 
 		if (!codeContainer) return;
 

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

@@ -2,7 +2,7 @@
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { SvelteFlow } from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
-	import type { createFlowState } from '$lib/stores/pgflow-state-improved.svelte';
+	import type { createFlowState } from '$lib/stores/pgflow-state.svelte';
 	import DAGNode from './DAGNode.svelte';
 
 	interface Props {
@@ -163,16 +163,18 @@
 	]);
 
 	function isStepActive(stepSlug: string): boolean {
-		const status = flowState.stepStatuses[stepSlug];
-		return status === 'started';
+		// Use reactive step() method from runState
+		return flowState.step(stepSlug).status === 'started';
 	}
 
 	function isStepCompleted(stepSlug: string): boolean {
-		return flowState.stepStatuses[stepSlug] === 'completed';
+		// Use reactive step() method from runState
+		return flowState.step(stepSlug).status === 'completed';
 	}
 
 	function isStepFailed(stepSlug: string): boolean {
-		return flowState.stepStatuses[stepSlug] === 'failed';
+		// Use reactive step() method from runState
+		return flowState.step(stepSlug).status === 'failed';
 	}
 
 	function isEdgeActive(source: string, target: string): boolean {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { createFlowState } from '$lib/stores/pgflow-state-improved.svelte';
+	import type { createFlowState } from '$lib/stores/pgflow-state.svelte';
 	import { codeToHtml } from 'shiki';
 	import { SvelteMap } from 'svelte/reactivity';
 
@@ -45,7 +45,7 @@
 	// Clear cache when flow resets (events list becomes empty or significantly changes)
 	let lastEventCount = $state(0);
 	$effect(() => {
-		const currentEventCount = flowState.events.length;
+		const currentEventCount = flowState.timeline.length;
 		// If events list was cleared or reduced significantly, clear the cache
 		if (currentEventCount === 0 || currentEventCount < lastEventCount - 5) {
 			highlightedEvents = new SvelteMap();
@@ -54,23 +54,11 @@
 		lastEventCount = currentEventCount;
 	});
 
-	// Get relative time from flow start
-	function formatRelativeTime(timestamp: Date, firstEventTimestamp: Date): string {
-		const diffMs = timestamp.getTime() - firstEventTimestamp.getTime();
-		const seconds = (diffMs / 1000).toFixed(3);
-		return `+${seconds}s`;
-	}
-
 	// Get display status from event_type (use the status part for badge coloring)
 	function getEventStatus(eventType: string): string {
 		return eventType.split(':')[1] || 'unknown';
 	}
 
-	// Get full event name for display
-	function getEventDisplayName(eventType: string): string {
-		return eventType;
-	}
-
 	// Get color class for event name based on status
 	function getEventColor(eventType: string): string {
 		const status = getEventStatus(eventType);
@@ -87,15 +75,16 @@
 				return 'text-muted-foreground';
 		}
 	}
+
 </script>
 
 <div class="flex flex-col h-full min-w-0">
-	{#if flowState.events.length > 0}
+	{#if flowState.timeline.length > 0}
 		<!-- Table-like headers -->
 		<div
 			class="flex items-center gap-2 px-3 py-1 border-b border-muted text-xs font-semibold text-muted-foreground"
 		>
-			<div class="w-[80px] text-left">TIME</div>
+			<div class="w-[120px] text-left">TIME</div>
 			<div class="w-[140px] text-left">EVENT</div>
 			<div class="flex-1 text-left">STEP</div>
 			<div class="w-[32px]"></div>
@@ -104,16 +93,14 @@
 	{/if}
 
 	<div class="flex-1 overflow-y-auto overflow-x-hidden space-y-1 min-w-0">
-		{#if flowState.events.length === 0}
+		{#if flowState.timeline.length === 0}
 			<p class="text-sm text-muted-foreground text-center py-8">
 				No events yet. Start a flow to see events.
 			</p>
 		{:else}
-			{@const firstEventTimestamp = flowState.events[0]?.timestamp}
-			{#each flowState.events as event, index (index)}
+			{#each flowState.timeline as event, index (index)}
 				{@const eventType = event.event_type}
-				{@const stepSlug = event.data?.step_slug}
-				{@const eventDisplayName = getEventDisplayName(eventType)}
+				{@const stepSlug = event.step_slug}
 				{@const eventColor = getEventColor(eventType)}
 				{@const isExpanded = expandedEventIndices.has(index)}
 				{@const isHighlighted = stepSlug && hoveredStep === stepSlug}
@@ -127,11 +114,18 @@
 						class="flex items-center gap-2 w-full text-left px-1 rounded transition-colors hover:bg-muted/20"
 						onclick={(e) => toggleEvent(index, e)}
 					>
-						<code class="w-[80px] text-base text-muted-foreground font-mono text-left"
-							>{formatRelativeTime(event.timestamp, firstEventTimestamp)}</code
-						>
+						<div class="w-[120px] flex flex-col text-left">
+							<code class="text-base text-muted-foreground font-mono"
+								>{event.cumulativeDisplay}</code
+							>
+							{#if event.deltaMs > 0}
+								<code class="text-xs text-muted-foreground/70 font-mono"
+									>{event.deltaDisplay}</code
+								>
+							{/if}
+						</div>
 						<code class="w-[140px] text-base font-semibold font-mono {eventColor}">
-							{eventDisplayName}
+							{eventType}
 						</code>
 						{#if stepSlug}
 							<code

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

@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition';
 	import { Button } from '$lib/components/ui/button';
 	import { codeToHtml } from 'shiki';
-	import type { createFlowState } from '$lib/stores/pgflow-state-improved.svelte';
+	import type { createFlowState } from '$lib/stores/pgflow-state.svelte';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import MiniDAG from '$lib/components/MiniDAG.svelte';
 	import { Clock, Workflow, Play, Hourglass } from '@lucide/svelte';
@@ -232,50 +232,37 @@
 		selectedStep && stepInfo[selectedStep] ? stepInfo[selectedStep] : null
 	);
 
-	// Build step outputs map from events
-	const stepOutputs = $derived.by(() => {
-		const outputs: Record<string, unknown> = {};
-		flowState.events.forEach((event) => {
-			if (
-				event.event_type === 'step:completed' &&
-				event.data?.step_slug &&
-				event.data?.output !== undefined
-			) {
-				outputs[event.data.step_slug as string] = event.data.output;
-			}
-		});
-		return outputs;
-	});
-
-	// Get step output
-	const stepOutput = $derived(selectedStep ? stepOutputs[selectedStep] : null);
+	// Get step output from reactive step() method
+	const stepOutput = $derived(selectedStep ? flowState.step(selectedStep).output : null);
 
 	// Get actual input for the selected step
 	const stepInput = $derived.by(() => {
-		if (!selectedStep || !currentStepInfo) return null;
+		if (!selectedStep || !currentStepInfo || !flowState.run) return null;
 
 		// Only show input if step is started or completed
-		const stepStatus = flowState.stepStatuses[selectedStep];
+		// Use reactive step() method from runState
+		const stepStatus = flowState.step(selectedStep).status;
 		if (stepStatus !== 'started' && stepStatus !== 'completed') return null;
 
 		// For steps with dependencies, check if all dependencies are completed
 		if (currentStepInfo.dependsOn.length > 0) {
 			const allDepsCompleted = currentStepInfo.dependsOn.every((dep) => {
-				return flowState.stepStatuses[dep] === 'completed';
+				// Use reactive step() method from runState
+				return flowState.step(dep).status === 'completed';
 			});
 			if (!allDepsCompleted) return null;
 		}
 
 		const input: Record<string, unknown> = {};
 
 		// Always add run input (URL) from flowState.run if available
-		if (flowState.run?.input) {
+		if (flowState.run.input) {
 			input.run = flowState.run.input;
 		}
 
-		// Add outputs from dependencies
+		// Add outputs from dependencies using reactive step() method
 		for (const dep of currentStepInfo.dependsOn) {
-			const depOutput = stepOutputs[dep];
+			const depOutput = flowState.step(dep).output;
 			if (depOutput !== undefined) {
 				input[dep] = depOutput;
 			}
@@ -286,7 +273,8 @@
 
 	// Get current step status
 	function getStepStatus(stepSlug: string): string | null {
-		const status = flowState.stepStatuses[stepSlug];
+		// Use reactive step() method from runState
+		const status = flowState.step(stepSlug).status;
 		const hasFlowStarted = flowState.status !== 'idle';
 
 		// Don't show badge if flow hasn't started yet

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { createFlowState } from '$lib/stores/pgflow-state-improved.svelte';
+	import type { createFlowState } from '$lib/stores/pgflow-state.svelte';
 
 	/**
 	 * Minimal DAG visualization for showing flow context
@@ -14,16 +14,18 @@
 	let { selectedStep, flowState }: Props = $props();
 
 	function isStepActive(stepSlug: string): boolean {
-		const status = flowState.stepStatuses[stepSlug];
-		return status === 'started';
+		// Use reactive step() method from runState
+		return flowState.step(stepSlug).status === 'started';
 	}
 
 	function isStepCompleted(stepSlug: string): boolean {
-		return flowState.stepStatuses[stepSlug] === 'completed';
+		// Use reactive step() method from runState
+		return flowState.step(stepSlug).status === 'completed';
 	}
 
 	function isStepFailed(stepSlug: string): boolean {
-		return flowState.stepStatuses[stepSlug] === 'failed';
+		// Use reactive step() method from runState
+		return flowState.step(stepSlug).status === 'failed';
 	}
 
 	// Node dimensions (smaller for mini view)