feat: add interactive code panel with step explanations (Phase 4)

Implement code visualization with syntax highlighting and interactive step exploration.

New Components:
- CodePanel: Shiki-highlighted flow code with clickable lines
- ExplanationPanel: Shows step dependencies, inputs, and returns on click
- flow-code.ts: Simplified educational code snippet with line-to-step mapping

Enhanced Components:
- DAGVisualization: Added click handling and selection states
- DebugPanel: Auto-scroll to selected step with smooth animations
- Page layout: 55/45 split, all panels synchronized via step-selected events

Interactions:
- Click code line or DAG node → shows explanation + scrolls debug panel
- Visual states: active (executing) vs selected (clicked)
- ESC or outside click dismisses explanation panel

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: jumski

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

@@ -0,0 +1,331 @@
+<script lang="ts">
+	import { onMount, createEventDispatcher } from 'svelte';
+	import { codeToHtml } from 'shiki';
+	import { FLOW_CODE, getStepFromLine, LINE_TO_STEP_MAP } from '$lib/data/flow-code';
+	import type { createFlowState } from '$lib/stores/pgflow-state-improved.svelte';
+	import { Badge } from '$lib/components/ui/badge';
+
+	interface Props {
+		flowState: ReturnType<typeof createFlowState>;
+		selectedStep: string | null;
+		hoveredStep: string | null;
+	}
+
+	let { flowState, selectedStep, hoveredStep }: Props = $props();
+
+	const dispatch = createEventDispatcher<{
+		'step-selected': { stepSlug: string };
+		'step-hovered': { stepSlug: string | null };
+	}>();
+
+	let highlightedCode = $state('');
+	let codeContainer: HTMLElement | undefined = $state(undefined);
+
+	// Calculate step blocks (groups of lines) for badge positioning
+	const stepBlocks = $derived.by(() => {
+		const blocks: Array<{ stepSlug: string; startLine: number; endLine: number }> = [];
+
+		for (const [range, stepSlug] of Object.entries(LINE_TO_STEP_MAP)) {
+			if (stepSlug === 'flow_config') continue; // Skip flow config
+			const [start, end] = range.split('-').map(Number);
+			blocks.push({ stepSlug, startLine: start, endLine: end });
+		}
+
+		return blocks;
+	});
+
+	// Helper to get badge label and color for a step
+	// Colors match DAG node colors from DAGVisualization.svelte
+	function getStepBadgeInfo(stepSlug: string) {
+		const status = flowState.stepStatuses[stepSlug];
+		const hasFlowStarted = flowState.status !== 'idle';
+
+		// Don't show badge if flow hasn't started yet
+		if (!hasFlowStarted) {
+			return null;
+		}
+
+		// If flow has started but this step has no status yet, show as queued/pending
+		if (!status) {
+			return {
+				label: 'queued',
+				shouldPulse: false,
+				customClass: 'bg-[#3d524d] hover:bg-[#3d524d] border-[#607b75]'
+			};
+		}
+
+		switch (status) {
+			case 'started':
+			case 'in_progress':
+				return {
+					label: 'running',
+					shouldPulse: true,
+					customClass: 'bg-[#3b5bdb] hover:bg-[#3b5bdb] border-[#5b8def]'
+				};
+			case 'completed':
+				return {
+					label: 'completed',
+					shouldPulse: false,
+					customClass: 'bg-[#177a51] hover:bg-[#177a51] border-[#20a56f]'
+				};
+			case 'failed':
+				return {
+					label: 'failed',
+					shouldPulse: false,
+					customClass: 'bg-[#c94a2e] hover:bg-[#c94a2e] border-[#f08060]'
+				};
+			default:
+				return {
+					label: status,
+					shouldPulse: false,
+					customClass: 'bg-[#3d524d] hover:bg-[#3d524d] border-[#607b75]'
+				};
+		}
+	}
+
+	onMount(async () => {
+		// Generate syntax highlighted HTML using Shiki
+		highlightedCode = await codeToHtml(FLOW_CODE, {
+			lang: 'typescript',
+			theme: 'github-dark',
+			transformers: [
+				{
+					line(node, line) {
+						// Add .line class to each line for click handling
+						node.properties.class = 'line';
+					}
+				}
+			]
+		});
+
+		// Add click handlers to lines after rendering - need small delay
+		setTimeout(() => {
+			if (codeContainer) {
+				setupClickHandlers();
+			}
+		}, 50);
+	});
+
+	function setupClickHandlers() {
+		if (!codeContainer) return;
+
+		// Find all line elements
+		const lines = codeContainer.querySelectorAll('.line');
+		lines.forEach((line, index) => {
+			const lineNumber = index + 1;
+			const stepSlug = getStepFromLine(lineNumber);
+
+			// Set data-step attribute for all lines (including flow_config)
+			if (stepSlug) {
+				(line as HTMLElement).setAttribute('data-step', stepSlug);
+				(line as HTMLElement).setAttribute('data-line', String(lineNumber));
+			}
+
+			// Only make step lines clickable (not flow_config)
+			if (stepSlug && stepSlug !== 'flow_config') {
+				(line as HTMLElement).style.cursor = 'pointer';
+
+				// Click handler
+				line.addEventListener('click', () => {
+					console.log('CodePanel: Line clicked, stepSlug:', stepSlug);
+					dispatch('step-selected', { stepSlug });
+				});
+
+				// Hover handlers - dispatch hover events
+				line.addEventListener('mouseenter', () => {
+					dispatch('step-hovered', { stepSlug });
+				});
+
+				line.addEventListener('mouseleave', () => {
+					dispatch('step-hovered', { stepSlug: null });
+				});
+			}
+		});
+	}
+
+	// Update line highlighting and borders based on step status, selected, and hovered steps
+	$effect(() => {
+		// Explicitly track these dependencies
+		const currentSelectedStep = selectedStep;
+		const currentHoveredStep = hoveredStep;
+		const currentStepStatuses = flowState.stepStatuses;
+
+		if (!codeContainer) return;
+
+		const lines = codeContainer.querySelectorAll('.line');
+		lines.forEach((line) => {
+			const stepSlug = (line as HTMLElement).getAttribute('data-step');
+			(line as HTMLElement).classList.remove(
+				'line-selected',
+				'line-hovered',
+				'line-dimmed',
+				'line-status-queued',
+				'line-status-running',
+				'line-status-completed',
+				'line-status-failed'
+			);
+
+			if (stepSlug && stepSlug !== 'flow_config') {
+				// Add status-based border classes
+				const status = currentStepStatuses[stepSlug];
+				if (status === 'started' || status === 'in_progress') {
+					(line as HTMLElement).classList.add('line-status-running');
+				} else if (status === 'completed') {
+					(line as HTMLElement).classList.add('line-status-completed');
+				} else if (status === 'failed') {
+					(line as HTMLElement).classList.add('line-status-failed');
+				} else if (!status && flowState.status !== 'idle') {
+					// Flow has started but this step hasn't - show as queued
+					(line as HTMLElement).classList.add('line-status-queued');
+				}
+
+				// Dimming: dim all lines except hovered when hovering
+				if (currentHoveredStep && stepSlug !== currentHoveredStep) {
+					(line as HTMLElement).classList.add('line-dimmed');
+				}
+
+				// Selected state (clicked) - blue background
+				if (currentSelectedStep && stepSlug === currentSelectedStep) {
+					(line as HTMLElement).classList.add('line-selected');
+				}
+				// Hovered state (hovering) - lighter highlight, overrides dimmed
+				if (currentHoveredStep && stepSlug === currentHoveredStep) {
+					(line as HTMLElement).classList.add('line-hovered');
+				}
+			}
+		});
+	});
+</script>
+
+<div class="code-panel-wrapper">
+	<div class="code-panel" bind:this={codeContainer}>
+		{@html highlightedCode}
+
+		<!-- Step status badges overlaid on code blocks -->
+		{#each stepBlocks as block}
+			{@const badgeInfo = getStepBadgeInfo(block.stepSlug)}
+			{#if badgeInfo}
+				<div
+					class="step-badge"
+					data-step={block.stepSlug}
+					data-start-line={block.startLine}
+					style="top: calc({(block.startLine - 1) * 1.5}em + 20px);"
+					class:badge-pulse={badgeInfo.shouldPulse}
+				>
+					<Badge class="text-xs text-white font-bold rounded-sm {badgeInfo.customClass}">
+						{badgeInfo.label}
+					</Badge>
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>
+	.code-panel-wrapper {
+		position: relative;
+	}
+
+	.code-panel {
+		overflow-x: auto;
+		border-radius: 5px;
+		font-size: 15px;
+		background: #0d1117;
+		position: relative;
+	}
+
+	/* Override Shiki's default pre styling */
+	.code-panel :global(pre) {
+		margin: 0;
+		padding: 12px 0;
+		background: #0d1117 !important;
+		border-radius: 5px;
+		line-height: 1.5;
+	}
+
+	.code-panel :global(code) {
+		font-family: 'Fira Code', 'Monaco', 'Menlo', 'Courier New', monospace;
+	}
+
+	/* Line styling */
+	.code-panel :global(.line) {
+		display: inline-block;
+		width: 100%;
+		padding: 0 12px;
+		transition: background-color 0.2s ease;
+	}
+
+	/* Clickable lines */
+	.code-panel :global(.line[data-step]) {
+		cursor: pointer;
+	}
+
+	/* Dimmed (when another step is selected) - lowest priority */
+	.code-panel :global(.line-dimmed) {
+		opacity: 0.4;
+		transition: opacity 200ms ease;
+	}
+
+	/* Ensure non-dimmed lines also transition smoothly */
+	.code-panel :global(.line) {
+		transition: opacity 200ms ease, background-color 200ms ease;
+	}
+
+	/* Status-based left borders (matches DAG node colors) - NO background color */
+	.code-panel :global(.line-status-queued) {
+		border-left: 4px solid #607b75;
+		padding-left: 8px !important;
+	}
+
+	.code-panel :global(.line-status-running) {
+		border-left: 4px solid #5b8def;
+		padding-left: 8px !important;
+	}
+
+	.code-panel :global(.line-status-completed) {
+		border-left: 4px solid #20a56f;
+		padding-left: 8px !important;
+	}
+
+	.code-panel :global(.line-status-failed) {
+		border-left: 4px solid #f08060;
+		padding-left: 8px !important;
+	}
+
+	/* Hover state - subtle light blue highlight - overrides dimmed */
+	.code-panel :global(.line-hovered) {
+		background-color: rgba(88, 166, 255, 0.08) !important;
+		opacity: 1 !important;
+	}
+
+	/* Selected step (clicked by user) - blue background, no border (border reserved for status) */
+	.code-panel :global(.line-selected) {
+		background-color: rgba(88, 166, 255, 0.18) !important;
+	}
+
+	/* Step status badges */
+	.step-badge {
+		position: absolute;
+		right: 12px;
+		z-index: 10;
+		pointer-events: none;
+		transition: all 0.3s ease;
+	}
+
+	/* Pulsing animation for active/running badges */
+	.badge-pulse {
+		animation: badge-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes badge-pulse {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.7;
+			transform: scale(1.05);
+		}
+	}
+</style>