feat(flow): add diff viewer in deployment history (#7575)

frontend/src/lib/components/DiffDrawer.svelte

@@ -20,7 +20,6 @@
 	}
 
 	let diffType: 'draft' | 'deployed' | 'custom' | undefined = $state(undefined)
-	let flowdiffMode: 'yaml' | 'graph' = $state('yaml')
 
 	let contentType = $derived.by(() => {
 		if (!data || !diffType) return undefined
@@ -232,34 +231,14 @@
 									{/await}
 								{:else if contentType === 'metadata'}
 									{#if isFlow}
-										<Tabs bind:selected={flowdiffMode}>
-											<Tab value="yaml" label={`YAML`} />
-											<Tab value="graph" label={`Graph`} />
-										</Tabs>
-										{#if flowdiffMode === 'yaml'}
-											{#await import('$lib/components/DiffEditor.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													open={true}
-													automaticLayout
-													className="h-full"
-													defaultLang="yaml"
-													defaultOriginal={metadata}
-													defaultModified={data.current.metadata}
-													readOnly
-												/>
-											{/await}
-										{:else if flowdiffMode === 'graph'}
-											{#await import('$lib/components/FlowGraphDiffViewer.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													beforeYaml={metadata ?? ''}
-													afterYaml={data.current.metadata}
-												/>
-											{/await}
-										{/if}
+										{#await import('$lib/components/FlowDiffViewer.svelte')}
+											<Loader2 class="animate-spin" />
+										{:then Module}
+											<Module.default
+												beforeYaml={metadata ?? ''}
+												afterYaml={data.current.metadata}
+											/>
+										{/await}
 									{:else}
 										{#await import('$lib/components/DiffEditor.svelte')}
 											<Loader2 class="animate-spin" />

frontend/src/lib/components/DiffEditor.svelte

@@ -106,7 +106,6 @@
 			})
 		}
 
-		console.log('defaultModified', defaultModified)
 		if (defaultLang !== undefined) {
 			setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang)
 		}

frontend/src/lib/components/FlowDiffViewer.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
+	import Tabs from './common/tabs/Tabs.svelte'
+	import Tab from './common/tabs/Tab.svelte'
+
+	interface Props {
+		beforeYaml: string
+		afterYaml: string
+	}
+
+	let { beforeYaml, afterYaml }: Props = $props()
+	let diffMode: 'yaml' | 'graph' = $state('graph')
+</script>
+
+<div class="flex flex-col h-full min-h-[500px] gap-2">
+	<Tabs bind:selected={diffMode}>
+		<Tab value="graph" label="Graph" />
+		<Tab value="yaml" label="YAML" />
+	</Tabs>
+
+	<div class="flex-1 min-h-0">
+		{#if diffMode === 'yaml'}
+			{#await import('$lib/components/DiffEditor.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					open={true}
+					automaticLayout
+					className="h-full min-h-[400px]"
+					defaultLang="yaml"
+					defaultOriginal={beforeYaml}
+					defaultModified={afterYaml}
+					readOnly
+				/>
+			{/await}
+		{:else}
+			{#await import('$lib/components/FlowGraphDiffViewer.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default {beforeYaml} {afterYaml} />
+			{/await}
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/FlowViewer.svelte

@@ -1,13 +1,26 @@
 <script lang="ts">
-	import type { FlowValue } from '$lib/gen'
+	import { type FlowValue, FlowService } from '$lib/gen'
 	import { Tab, Tabs, TabContent } from './common'
 	import SchemaViewer from './SchemaViewer.svelte'
 	import FlowGraphViewer from './FlowGraphViewer.svelte'
+	import { Loader2 } from 'lucide-svelte'
+	import { orderedYamlStringify, cleanValueProperties, replaceFalseWithUndefined } from '$lib/utils'
+	import { workspaceStore } from '$lib/stores'
+	import { watch } from 'runed'
 
 	import HighlightTheme from './HighlightTheme.svelte'
 	import FlowViewerInner from './FlowViewerInner.svelte'
 	import FlowInputViewer from './FlowInputViewer.svelte'
 
+	interface PreviousFlow {
+		summary: string
+		description?: string
+		value: FlowValue
+		schema?: any
+	}
+
+	type TabValue = 'ui' | 'raw' | 'schema' | 'diff'
+
 	interface Props {
 		flow: {
 			summary: string
@@ -18,9 +31,11 @@
 		initialOpen?: number | undefined
 		noSide?: boolean
 		noGraph?: boolean
-		tab?: 'ui' | 'raw' | 'schema'
+		initTab?: TabValue
 		noSummary?: boolean
 		noGraphDownload?: boolean
+		availableVersions?: Array<{ id: number; deployment_msg?: string }>
+		selectedVersionId?: number
 	}
 
 	let {
@@ -28,20 +43,92 @@
 		initialOpen = undefined,
 		noSide = false,
 		noGraph = false,
-		tab = $bindable(noGraph ? 'schema' : 'ui'),
+		availableVersions = undefined,
+		initTab = undefined,
 		noSummary = false,
-		noGraphDownload = false
+		noGraphDownload = false,
+		selectedVersionId = undefined
 	}: Props = $props()
 
 	let open: { [id: number]: boolean } = {}
 	if (initialOpen) {
 		open[initialOpen] = true
 	}
+
+	let previousVersionId: number | undefined = $state(undefined)
+	let previousFlow: PreviousFlow | undefined = $state(undefined)
+	let tab: TabValue = $state(initTab ?? 'diff')
+
+	let previousFlowCache: Record<number, PreviousFlow> = {}
+
+	async function loadPreviousFlow(version: number) {
+		try {
+			if (previousFlowCache[version]) {
+				previousFlow = previousFlowCache[version]
+				return
+			}
+			previousFlow = await FlowService.getFlowVersion({
+				workspace: $workspaceStore!,
+				version
+			})
+			previousFlowCache[version] = previousFlow
+		} catch (e) {
+			console.error(e)
+			previousFlow = undefined
+		}
+	}
+
+	// Load previous flow when previousVersionId changes
+	$effect.pre(() => {
+		if (previousVersionId !== undefined) {
+			loadPreviousFlow(previousVersionId)
+		} else {
+			previousFlow = undefined
+		}
+	})
+
+	$effect.pre(() => {
+		if (initTab) {
+			return
+		}
+		if (availableVersions && availableVersions.length > 0) {
+			tab = 'diff'
+		} else {
+			if (noGraph) {
+				tab = 'schema'
+			} else {
+				tab = 'ui'
+			}
+		}
+	})
+
+	// Auto-select first available version and validate current selection
+	watch([() => availableVersions, () => selectedVersionId], () => {
+		if (availableVersions && availableVersions.length > 0) {
+			previousVersionId = availableVersions[0].id
+		} else {
+			previousVersionId = undefined
+		}
+	})
+
+	let currentFlowYaml = $derived.by(() => {
+		const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(flow)))
+		return orderedYamlStringify(metadata)
+	})
+
+	let previousFlowYaml = $derived.by(() => {
+		if (!previousFlow) return undefined
+		const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(previousFlow)))
+		return orderedYamlStringify(metadata)
+	})
 </script>
 
 <HighlightTheme />
 
 <Tabs bind:selected={tab}>
+	{#if availableVersions && availableVersions.length > 0}
+		<Tab value="diff" label="Diff" />
+	{/if}
 	{#if !noGraph}
 		<Tab value="ui" label="Graph" />
 	{/if}
@@ -49,6 +136,34 @@
 	<Tab value="schema" label="Input Schema" />
 
 	{#snippet content()}
+		{#if availableVersions && availableVersions.length > 0}
+			<TabContent value="diff">
+				<div class="flex flex-col gap-2 h-full">
+					<div class="flex flex-row items-center gap-2 py-2">
+						<div class="text-xs">Compare with:</div>
+						<select bind:value={previousVersionId} class="!text-xs !w-40">
+							{#each availableVersions as version (version.id)}
+								<option value={version.id} class="!text-xs">
+									{version.deployment_msg ?? `Version ${version.id}`}
+								</option>
+							{/each}
+						</select>
+					</div>
+
+					{#if previousFlowYaml}
+						<div class="h-[calc(100vh-150px)] min-h-[400px]">
+							{#await import('$lib/components/FlowDiffViewer.svelte')}
+								<Loader2 class="animate-spin" />
+							{:then Module}
+								<Module.default beforeYaml={previousFlowYaml} afterYaml={currentFlowYaml} />
+							{/await}
+						</div>
+					{:else}
+						<Loader2 class="animate-spin" />
+					{/if}
+				</div>
+			</TabContent>
+		{/if}
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
 				{#if !noSummary}

frontend/src/lib/components/flows/FlowHistoryInner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run, stopPropagation, createBubbler } from 'svelte/legacy'
+	import { stopPropagation, createBubbler } from 'svelte/legacy'
 
 	const bubble = createBubbler()
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -25,6 +25,7 @@
 	let selected: Flow | undefined = $state(undefined)
 	let deploymentMsgUpdateMode = $state(false)
 	let deploymentMsgUpdate: string | undefined = $state(undefined)
+	let selectedVersionIndex: number | undefined = $state(undefined)
 
 	async function loadFlow(version: number) {
 		selected = await FlowService.getFlowVersion({
@@ -78,9 +79,14 @@
 
 	loadVersions()
 
-	run(() => {
+	$effect.pre(() => {
 		selectedVersion !== undefined && loadFlow(selectedVersion.id)
 	})
+
+	// Get available versions for comparison (versions after selected one)
+	let availableVersions = $derived(
+		selectedVersionIndex !== undefined ? versions.slice(selectedVersionIndex + 1) : []
+	)
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -89,7 +95,7 @@
 			{#if !loading}
 				{#if versions.length > 0}
 					<div class="flex gap-2 flex-col">
-						{#each versions ?? [] as version}
+						{#each versions ?? [] as version (version.id)}
 							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<div
 								class={classNames(
@@ -99,7 +105,11 @@
 								role="button"
 								tabindex="0"
 								onclick={() => {
+									const versionIndex = versions.findIndex((v) => v.id === version.id)
 									selectedVersion = version
+									selectedVersionIndex = versionIndex
+									deploymentMsgUpdate = undefined
+									deploymentMsgUpdateMode = false
 								}}
 							>
 								<span class="text-xs truncate">
@@ -208,7 +218,11 @@
 						{#await import('$lib/components/FlowViewer.svelte')}
 							<Loader2 class="animate-spin" />
 						{:then Module}
-							<Module.default flow={selected} />
+							<Module.default
+								flow={selected}
+								{availableVersions}
+								selectedVersionId={selectedVersion?.id}
+							/>
 						{/await}
 					</div>
 				{:else}

frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte

@@ -20,7 +20,7 @@
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#if flow}
-			<FlowViewer flow={cleanFlow(flow)} tab="raw" />
+			<FlowViewer flow={cleanFlow(flow)} initTab="raw" />
 		{/if}
 	</DrawerContent>
 </Drawer>