windmill/frontend/src/lib/components/CompareWorkspaces.svelte

<script lang="ts">
	import {
		AlertTriangle,
		ArrowDownRight,
		ArrowRight,
		ArrowUpRight,
		Building,
		CircleCheck,
		CircleX,
		DiffIcon,
		FileJson,
		FlaskConical,
		GitFork,
		Loader2,
		UserPlus
	} from 'lucide-svelte'
	import type { CiTestResult } from '$lib/gen'
	import { Alert, Badge } from './common'
	import {
		AppService,
		FlowService,
		FolderService,
		ScriptService,
		UserService,
		WorkspaceService,
		type WorkspaceComparison,
		type WorkspaceItemDiff
	} from '$lib/gen'
	import Button from './common/button/Button.svelte'
	import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
	import DiffDrawer from './DiffDrawer.svelte'
	import WorkspaceDeployItemSummary from './WorkspaceDeployItemSummary.svelte'
	import ParentWorkspaceProtectionAlert from './ParentWorkspaceProtectionAlert.svelte'
	import { userWorkspaces, workspaceStore } from '$lib/stores'

	import type { Kind } from '$lib/utils_deployable'
	import {
		deployItem,
		deleteItemInWorkspace,
		getItemValue,
		getOnBehalfOf,
		type DeployResult
	} from '$lib/utils_workspace_deploy'
	import { isTriggerOrScheduleKind } from 'windmill-utils-internal'
	import Tooltip from './Tooltip.svelte'
	import OnBehalfOfSelector, {
		needsOnBehalfOfSelection,
		type OnBehalfOfChoice,
		type OnBehalfOfDetails
	} from './OnBehalfOfSelector.svelte'
	import { sendUserToast } from '$lib/toast'
	import { deepEqual } from 'fast-equals'
	import WorkspaceDeployLayout from './WorkspaceDeployLayout.svelte'
	import DeploymentRequestPanel from './deploymentRequest/DeploymentRequestPanel.svelte'
	import { userStore } from '$lib/stores'
	import { base } from '$lib/base'
	import CompareModeToggle, { type CompareMode } from './CompareModeToggle.svelte'
	import { editUrlFor } from './sessions/forkEditUrl'
	import DatatableSchemaDiff from './DatatableSchemaDiff.svelte'

	interface Props {
		currentWorkspaceId: string
		parentWorkspaceId: string
		comparison: WorkspaceComparison | undefined
		/** Initial merge direction; lets the page restore the chosen direction when
		 * switching back from draft mode (deploy_to → true, update → false). */
		initialMergeIntoParent?: boolean
		/** Per-direction counts for the merged toggle badges (the page owns them). */
		deployCount?: number
		updateCount?: number
		/** Draft count for the merged toggle's badge (the page owns it). */
		draftCount?: number
		/** Keys (`kind:path`) of fork items that are deployed *and* have a pending
		 * draft (has_draft). Such rows get a "+Draft" warning badge and are left
		 * out of the default selection — deploying/updating moves the deployed
		 * version, not the draft. The page derives this from the fork drafts. */
		draftKeys?: Set<string>
		/** Selecting `draft` asks the page to swap us out for CompareDrafts;
		 * deploy_to/update are handled internally but reported so the page can
		 * remember the direction. */
		onModeSelected?: (v: CompareMode) => void
		/** Fired after a deploy/update so the page re-fetches the comparison and
		 * draft count, keeping the toggle badges in sync with the new state. */
		onChanged?: () => void
	}

	let {
		currentWorkspaceId,
		parentWorkspaceId,
		comparison,
		initialMergeIntoParent = true,
		deployCount = 0,
		updateCount = 0,
		draftCount = 0,
		draftKeys = new Set<string>(),
		onModeSelected,
		onChanged
	}: Props = $props()

	// A fork row has a pending draft when its key is in the page-provided set.
	function hasDraft(diff: WorkspaceItemDiff): boolean {
		return draftKeys.has(getItemKey(diff))
	}

	let currentWorkspaceInfo = $derived($userWorkspaces.find((w) => w.id == currentWorkspaceId))
	let parentWorkspaceInfo = $derived($userWorkspaces.find((w) => w.id == parentWorkspaceId))

	let mergeIntoParent = $state(initialMergeIntoParent)
	let deploying = $state(false)
	let hasAutoSelected = $state(false)
	let canDeployToParent = $state(true)
	let canPreserveInParent = $state(false)
	let canPreserveInCurrent = $state(false)
	let canPreserveOnBehalfOf = $derived(mergeIntoParent ? canPreserveInParent : canPreserveInCurrent)

	let selectableDiffs = $derived(
		comparison?.diffs.filter((diff) => {
			if (mergeIntoParent) {
				return diff.ahead > 0
			} else {
				return diff.behind > 0
			}
		}) ?? []
	)

	let selectedItems = $state<string[]>([])

	// Selected items that carry a pending draft. They're opt-in (excluded from the
	// default selection), so a non-empty list means the user explicitly picked an
	// item whose draft won't be included — confirm before deploying.
	let selectedDraftKeys = $derived(selectedItems.filter((k) => draftKeys.has(k)))
	let draftConfirmOpen = $state(false)

	function requestDeploy() {
		if (selectedDraftKeys.length > 0) {
			draftConfirmOpen = true
		} else {
			deployChanges()
		}
	}

	// Nothing actionable in the current direction (no items ahead to deploy, or
	// none behind to update). When so we show a message instead of a table of
	// greyed, non-actionable rows.
	let nothingToAct = $derived(selectableDiffs.length === 0)
	let emptyDeployMessage = $derived(
		(comparison?.diffs.length ?? 0) === 0
			? 'No changes between this fork and its parent.'
			: mergeIntoParent
				? `Nothing to deploy — ${parentWorkspaceId} already has every change from this fork.`
				: `Nothing to update — this fork is up to date with ${parentWorkspaceId}.`
	)

	let conflictingDiffs = $derived(
		comparison?.diffs.filter((diff) => diff.ahead > 0 && diff.behind > 0) ?? []
	)

	let itemsWithBehindChanges = $derived(
		comparison?.diffs.filter((diff) => {
			const status = deploymentStatus[getItemKey(diff)]?.status
			return diff && diff.behind > 0 && diff.ahead == 0 && !(status && status == 'deployed')
		}) ?? []
	)

	let itemsWithAheadChanges = $derived(
		comparison?.diffs.filter((diff) => {
			const status = deploymentStatus[getItemKey(diff)]?.status
			return diff && diff.ahead > 0 && !(status && status == 'deployed')
		}) ?? []
	)

	let hasBehindChanges = $derived(mergeIntoParent && itemsWithBehindChanges.length > 0)
	let hasAheadChanges = $derived(mergeIntoParent && itemsWithAheadChanges.length > 0)

	// Summary cache: stores summaries from both workspaces
	type SummaryCache = Record<string, { current?: string; parent?: string; loading?: boolean }>
	let summaryCache = $state<SummaryCache>({})

	// On-behalf-of tracking for flows and scripts
	// Source workspace on_behalf_of emails (keyed by workspace/kind:path)
	let onBehalfOfInfo = $state<Record<string, string | undefined>>({})
	let onBehalfOfChoice = $state<Record<string, OnBehalfOfChoice>>({})
	let customOnBehalfOf = $state<Record<string, OnBehalfOfDetails>>({})
	let deployTargetWorkspace = $derived(mergeIntoParent ? parentWorkspaceId : currentWorkspaceId)

	function getItemKey(diff: WorkspaceItemDiff): string {
		return `${diff.kind}:${diff.path}`
	}

	async function fetchSummary(
		kind: string,
		path: string,
		workspace: string
	): Promise<string | undefined> {
		try {
			if (kind === 'script') {
				const script = await ScriptService.getScriptByPath({ workspace, path })
				return script.summary
			} else if (kind === 'flow') {
				const flow = await FlowService.getFlowByPath({ workspace, path })
				return flow.summary
			} else if (kind === 'app' || kind === 'raw_app') {
				const app = await AppService.getAppByPath({ workspace, path })
				return app.summary
			} else if (kind === 'folder') {
				const folder = await FolderService.getFolder({ workspace, name: path.replace(/^f\//, '') })
				return folder.summary
			}
		} catch (error) {
			console.error(`Failed to fetch summary for ${kind}:${path}`, error)
		}
		return undefined
	}

	async function fetchSummaries(diffs: WorkspaceItemDiff[]) {
		// Only fetch summaries for scripts, flows, and apps
		const itemsToFetch = diffs.filter((diff) =>
			['script', 'flow', 'app', 'raw_app', 'folder'].includes(diff.kind)
		)

		for (const diff of itemsToFetch) {
			const key = getItemKey(diff)

			// Skip if already cached or loading
			if (summaryCache[key]) continue

			// Mark as loading
			summaryCache[key] = { loading: true }

			// Fetch from both workspaces in parallel
			const [currentSummary, parentSummary] = await Promise.all([
				fetchSummary(diff.kind, diff.path, currentWorkspaceId),
				fetchSummary(diff.kind, diff.path, parentWorkspaceId)
			])

			summaryCache[key] = {
				current: currentSummary,
				parent: parentSummary,
				loading: false
			}
		}
	}

	async function fetchOnBehalfOfInfo(diffs: WorkspaceItemDiff[]) {
		// Runnables carry an email; triggers/schedules carry `permissioned_as`.
		// `getOnBehalfOf` handles the dispatch — we just need to skip kinds that
		// have no on_behalf_of concept (resource, variable, folder, resource_type).
		const itemsWithOnBehalfOf = diffs.filter(
			(d) =>
				['flow', 'script', 'app', 'raw_app'].includes(d.kind) || isTriggerOrScheduleKind(d.kind)
		)
		for (const diff of itemsWithOnBehalfOf) {
			for (const workspace of [currentWorkspaceId, parentWorkspaceId]) {
				const workspacedKey = getWorkspacedKey(workspace, getItemKey(diff))
				if (onBehalfOfInfo[workspacedKey] !== undefined) continue

				try {
					onBehalfOfInfo[workspacedKey] = await getOnBehalfOf(
						diff.kind as Kind,
						diff.path,
						workspace
					)
				} catch {
					onBehalfOfInfo[workspacedKey] = undefined
				}
			}
		}
	}

	// Get source workspace on_behalf_of value for an item (email for runnables, permissioned_as for triggers)
	function getSourceOnBehalfOf(itemKey: string): string | undefined {
		const sourceWorkspace = mergeIntoParent ? currentWorkspaceId : parentWorkspaceId
		return onBehalfOfInfo[getWorkspacedKey(sourceWorkspace, itemKey)]
	}

	// Get target workspace on_behalf_of value for an item (existing item in destination)
	function getTargetOnBehalfOf(itemKey: string): string | undefined {
		const targetWorkspace = mergeIntoParent ? parentWorkspaceId : currentWorkspaceId
		return onBehalfOfInfo[getWorkspacedKey(targetWorkspace, itemKey)]
	}

	// Check if an item needs on_behalf_of selection
	function itemNeedsOnBehalfOfSelection(itemKey: string, kind: string): boolean {
		return needsOnBehalfOfSelection(kind, getSourceOnBehalfOf(itemKey))
	}

	// Check if all required on_behalf_of selections are made
	let hasUnselectedOnBehalfOf = $derived(
		selectedItems.some((itemKey) => {
			const diff = selectableDiffs.find((d) => getItemKey(d) === itemKey)
			if (!diff) return false
			return (
				itemNeedsOnBehalfOfSelection(itemKey, diff.kind) && onBehalfOfChoice[itemKey] === undefined
			)
		})
	)

	/**
	 * Get the on_behalf_of value for deployment based on user's choice.
	 * Returns an email for flows/scripts/apps, or permissioned_as (u/username, g/group) for triggers/schedules.
	 */
	function getOnBehalfOfForDeploy(itemKey: string, kind: Kind): string | undefined {
		const choice = onBehalfOfChoice[itemKey]
		if (choice === 'target') return getTargetOnBehalfOf(itemKey)
		if (choice === 'custom') {
			const details = customOnBehalfOf[itemKey]
			const wantsPermissionedAs = kind === 'trigger' || isTriggerOrScheduleKind(kind)
			return wantsPermissionedAs ? details?.permissionedAs : details?.email
		}
		// 'me' or undefined = don't pass, backend will use deploying user's identity
		return undefined
	}

	let diffDrawer: DiffDrawer | undefined = $state(undefined)
	let isFlow = $state(true)

	async function showDiff(kind: Kind, path: string) {
		const workspaceTo = mergeIntoParent ? parentWorkspaceId : currentWorkspaceId
		const workspaceFrom = mergeIntoParent ? currentWorkspaceId : parentWorkspaceId
		if (diffDrawer) {
			isFlow = kind == 'flow'
			diffDrawer?.openDrawer()
			let values = await Promise.all([
				getItemValue(kind, path, workspaceTo),
				getItemValue(kind, path, workspaceFrom)
			])
			diffDrawer?.setDiff({
				mode: 'simple',
				original: values?.[0] as any,
				current: values?.[1] as any,
				title: `${workspaceFrom} <> ${workspaceTo}`
			})
		}
	}

	// All *diff* items selected. Trigger items are opt-in and don't count
	// toward "all selected" — see item merge below in deployableItems.
	let allSelected = $derived(
		selectableDiffs.length > 0 &&
			selectableDiffs.every((d) => selectedItems.includes(getItemKey(d)))
	)

	async function selectAll() {
		selectedItems = selectableDiffs
			.map((d) => getItemKey(d))
			.filter((k) => !(deploymentStatus[k]?.status == 'deployed'))
	}

	function deselectAll() {
		selectedItems = []
	}

	const deploymentStatus: Record<
		string,
		{ status: 'loading' | 'deployed' | 'failed'; error?: string }
	> = $state({})

	function getWorkspacedKey(workspace: string, key: string): string {
		return `${workspace}/${key}`
	}

	async function deploy(
		kind: Kind,
		path: string,
		workspaceToDeployTo: string,
		workspaceFrom: string,
		statusKey: string
	) {
		deploymentStatus[statusKey] = { status: 'loading' }

		// Check if the item was deleted in the source workspace.
		// If so, archive/delete it in the target workspace instead of copying.
		const diff = comparison?.diffs.find((d) => getItemKey(d) === statusKey)
		const itemDeletedInSource = diff
			? mergeIntoParent
				? diff.exists_in_fork === false
				: diff.exists_in_source === false
			: false

		let result: DeployResult
		if (itemDeletedInSource) {
			result = await deleteItemInWorkspace(kind, path, workspaceToDeployTo)
		} else {
			result = await deployItem({
				kind,
				path,
				workspaceFrom,
				workspaceTo: workspaceToDeployTo,
				onBehalfOf: getOnBehalfOfForDeploy(statusKey, kind)
			})
		}

		if (result.success) {
			deploymentStatus[statusKey] = { status: 'deployed' }
		} else {
			deploymentStatus[statusKey] = { status: 'failed', error: result.error }
			sendUserToast(`Failed to deploy ${statusKey}: ${result.error}`)
		}
	}

	let deploymentErrorMessage = $state('')
	let allowBehindChangesOverride = $state(false)

	async function isComparisonUpToDate(): Promise<boolean> {
		if (!comparison) {
			return false
		}

		try {
			const result = await WorkspaceService.compareWorkspaces({
				workspace: parentWorkspaceId,
				targetWorkspaceId: currentWorkspaceId
			})

			const nonDeployedChanges = comparison.diffs.filter(
				(e) => !(deploymentStatus[getItemKey(e)]?.status == 'deployed')
			)

			if (!deepEqual(nonDeployedChanges, result.diffs)) {
				deploymentErrorMessage = `New changes detected. Please reload the page and review the new changes before ${mergeIntoParent ? 'deploying' : 'updating'}`
				return false
			}
		} catch (e) {
			deploymentErrorMessage = `Failed to check for new changes before deployment: ${e}`
			console.error('Failed to compare workspaces:', e)
			return false
		}
		return true
	}

	async function deployChanges() {
		deploying = true
		if (!(await isComparisonUpToDate())) {
			deploying = false
			return
		}

		const parent = parentWorkspaceId
		const current = currentWorkspaceId
		const sortedItems = [...selectedItems].sort((a, b) => {
			const aIsFolder = a.startsWith('folder:')
			const bIsFolder = b.startsWith('folder:')
			if (aIsFolder && !bIsFolder) return -1
			if (!aIsFolder && bIsFolder) return 1
			return 0
		})
		let anyFailed = false
		for (const itemKey of sortedItems) {
			const deployable = deployableItems.find((d) => d.key === itemKey)

			if (!deployable) {
				sendUserToast(`Undeployable item: ${itemKey}`, true)
				continue
			}

			const to = mergeIntoParent ? parent : current
			const from = mergeIntoParent ? current : parent
			await deploy(deployable.kind, deployable.path, to, from, itemKey)
			if (deploymentStatus[itemKey]?.status === 'failed') {
				anyFailed = true
			}
		}
		deploying = false
		deselectAll()

		// If every selected item deployed cleanly and the direction was
		// merge-into-parent, close any open deployment request for this fork.
		if (!anyFailed && mergeIntoParent) {
			try {
				const open = await WorkspaceService.getOpenDeploymentRequest({
					workspace: currentWorkspaceId
				})
				if (open) {
					await WorkspaceService.closeDeploymentRequestMerged({
						workspace: currentWorkspaceId,
						id: open.id
					})
					deploymentRequestPanel?.refresh()
				}
			} catch (e) {
				console.error('Failed to close open deployment request after merge', e)
			}
		}

		// Deployed items are now in sync and should drop off the comparison; ask
		// the page to re-fetch so the list and toggle badges reflect the new state.
		onChanged?.()
	}

	function toggleKey(key: string) {
		if (selectedItems.includes(key)) {
			selectedItems = selectedItems.filter((i) => i !== key)
		} else {
			selectedItems.push(key)
		}
	}

	function selectDefault() {
		// Triggers and schedules are opt-in: they often share runtime state with the
		// parent (kafka group_id, postgres replication slot, schedule firing time)
		// and pushing them by default would surprise users running a routine "Deploy
		// to parent" flow. The user picks them à la carte by clicking the row.
		// Items with a pending draft are also left out by default: the deployed
		// version (not the draft) is what moves, so we make the user opt in.
		const filtered = selectableDiffs.filter((d) => !isTriggerOrScheduleKind(d.kind) && !hasDraft(d))
		const conflictSafe = mergeIntoParent
			? filtered
			: filtered.filter((d) => !(d.ahead > 0 && d.behind > 0))
		selectedItems = conflictSafe
			.map((d) => getItemKey(d))
			.filter((k) => !(deploymentStatus[k]?.status == 'deployed'))
	}

	function toggleDeploymentDirection(v: string) {
		deselectAll()
		mergeIntoParent = v == 'deploy_to'
		selectDefault()
	}

	// Merged toggle: deploy_to/update flip the direction in place; draft asks the
	// page to swap us out for CompareDrafts. Either way report it up so the page
	// remembers the chosen direction across mode switches.
	function onToggleMode(v: CompareMode) {
		onModeSelected?.(v)
		if (v === 'draft') return
		toggleDeploymentDirection(v)
	}

	// Fetch user permissions for both workspaces
	$effect(() => {
		;[currentWorkspaceId, parentWorkspaceId]
		async function fetchPermissions() {
			try {
				const parentUser = await UserService.whoami({ workspace: parentWorkspaceId })
				canPreserveInParent =
					parentUser.is_admin || parentUser.groups?.includes('wm_deployers') || false
			} catch {
				canPreserveInParent = false
			}
			try {
				const currentUser = await UserService.whoami({ workspace: currentWorkspaceId })
				canPreserveInCurrent =
					currentUser.is_admin || currentUser.groups?.includes('wm_deployers') || false
			} catch {
				canPreserveInCurrent = false
			}
		}
		fetchPermissions()
	})

	// Fetch summaries and on_behalf_of_email when comparison data loads
	$effect(() => {
		if (comparison?.diffs) {
			fetchSummaries(comparison.diffs)
			fetchOnBehalfOfInfo(comparison.diffs)
		}
	})

	// Auto-select items on initial load
	$effect(() => {
		if (comparison?.diffs && !hasAutoSelected && selectableDiffs.length > 0) {
			selectDefault()
			hasAutoSelected = true
		}
	})

	// Reset override when selection or direction changes
	$effect(() => {
		;[selectedItems, mergeIntoParent]
		allowBehindChangesOverride = false
	})

	// Trigger and schedule rows now flow through `comparison.diffs` like every
	// other deployable kind — the backend's `compareWorkspaces` populates them
	// from `workspace_diff`, with runtime fields ignored by `compare_two_*`.
	let deployableItems = $derived.by(() => {
		return (comparison?.diffs ?? [])
			.filter((diff) => {
				const key = getItemKey(diff)
				const isSelectable = selectableDiffs.includes(diff)
				const isDeployedAndIrrelevant =
					deploymentStatus[key]?.status === 'deployed' && !isSelectable
				return !isDeployedAndIrrelevant
			})
			.map((diff) => ({
				key: getItemKey(diff),
				path: diff.path,
				kind: diff.kind as Kind,
				diff
			}))
	})

	let ciTestResults = $state<Record<string, CiTestResult[]>>({})

	async function fetchCiTests() {
		if (!comparison?.diffs || !currentWorkspaceId) return
		const items = comparison.diffs
			.filter((d) => d.kind === 'script' || d.kind === 'flow' || d.kind === 'resource')
			.map((d) => ({ path: d.path, kind: d.kind as 'script' | 'flow' | 'resource' }))
		if (items.length === 0) return
		try {
			ciTestResults = await ScriptService.getCiTestResultsBatch({
				workspace: currentWorkspaceId,
				requestBody: { items }
			})
		} catch (e) {
			console.error('Failed to fetch CI test results:', e)
		}
	}

	$effect(() => {
		if (comparison && comparison.diffs.length > 0) {
			fetchCiTests()
		}
	})

	function getCiTestStatus(diff: WorkspaceItemDiff): 'pass' | 'fail' | 'running' | null {
		const key = `${diff.kind}:${diff.path}`
		const results = ciTestResults[key]
		if (!results || results.length === 0) return null
		if (results.some((r) => r.status === 'failure' || r.status === 'canceled')) return 'fail'
		if (results.some((r) => r.status === 'running' || (r.job_id && !r.status))) return 'running'
		if (results.every((r) => r.status === 'success')) return 'pass'
		return null
	}

	// Deduplicated list of all CI tests across all items
	let allCiTests = $derived.by(() => {
		const seen = new Map<string, CiTestResult>()
		for (const results of Object.values(ciTestResults)) {
			for (const r of results) {
				const existing = seen.get(r.test_script_path)
				if (
					!existing ||
					(r.started_at && (!existing.started_at || r.started_at > existing.started_at))
				) {
					seen.set(r.test_script_path, r)
				}
			}
		}
		return [...seen.values()]
	})

	let deploymentRequestPanel: DeploymentRequestPanel | undefined = $state(undefined)
	let hasOpenDeploymentRequest = $state(false)

	/** Display labels for trigger/schedule kinds in the merge UI. */
	const KIND_DISPLAY_NAMES: Record<string, string> = {
		schedule: 'Schedule',
		http_trigger: 'HTTP route',
		websocket_trigger: 'Websocket trigger',
		kafka_trigger: 'Kafka trigger',
		nats_trigger: 'NATS trigger',
		postgres_trigger: 'Postgres trigger',
		mqtt_trigger: 'MQTT trigger',
		sqs_trigger: 'SQS trigger',
		gcp_trigger: 'GCP trigger',
		azure_trigger: 'Azure trigger',
		email_trigger: 'Email trigger'
	}
</script>

{#if $workspaceStore != currentWorkspaceId}
	<Alert title="Targetting different workspace" type="info" class="my-2">
		<span>
			You are currently seeing the deployement page of workspace <b
				>{currentWorkspaceInfo?.name} ({currentWorkspaceInfo?.id})</b
			> which is not your currently selected workspace.
		</span>
		<a href="/">Click here to go home ({$workspaceStore})</a>
	</Alert>
{/if}

{#if comparison}
	{@const selectedConflicts = conflictingDiffs.filter((e) =>
		selectedItems.includes(getItemKey(e))
	).length}
	<div class="flex flex-col gap-4">
		<div class="bg-surface-tertiary p-4 rounded-md border">
			<WorkspaceDeployLayout
				items={nothingToAct ? [] : deployableItems}
				{selectedItems}
				{deploymentStatus}
				selectablePredicate={(item) => selectableDiffs.some((d) => getItemKey(d) === item.key)}
				{allSelected}
				onToggleItem={(item) => toggleKey(item.key)}
				onSelectAll={selectAll}
				onDeselectAll={deselectAll}
				emptyMessage={emptyDeployMessage}
			>
				{#snippet header()}
					<div class="flex items-center justify-between bg-surface-tertiary">
						<div class="flex flex-col gap-2 w-full pb-4">
							<div class="flex flex-wrap gap-1 items-center">
								<CompareModeToggle
									selected={mergeIntoParent ? 'deploy_to' : 'update'}
									isFork={true}
									{parentWorkspaceId}
									{deployCount}
									{updateCount}
									{draftCount}
									disabled={deploying}
									onSelected={onToggleMode}
								/>
								{#if currentWorkspaceInfo && parentWorkspaceInfo}
									<div class="flex-1 flex gap-1 items-center">
										<Badge
											color="transparent"
											class="ml-5 font-semibold"
											title={mergeIntoParent ? currentWorkspaceInfo.name : parentWorkspaceInfo.name}
										>
											<span class="text-secondary">merge:</span>
											{#if mergeIntoParent}
												<GitFork size={14} />
												<span class="text-emphasis">{currentWorkspaceInfo.id}</span>
											{:else}
												<Building size={14} />
												<span class="text-emphasis">{parentWorkspaceInfo.id}</span>
											{/if}
										</Badge>
										<ArrowRight size={16} />
										<Badge
											color="transparent"
											class="font-semibold"
											title={!mergeIntoParent
												? currentWorkspaceInfo.name
												: parentWorkspaceInfo.name}
										>
											<span class="text-secondary">into:</span>
											{#if !mergeIntoParent}
												<GitFork size={14} />
												<span class="text-emphasis">{currentWorkspaceInfo.id}</span>
											{:else}
												<Building size={14} />
												<span class="text-emphasis">{parentWorkspaceInfo.id}</span>
											{/if}
										</Badge>
									</div>
								{/if}
								<div class="flex items-center gap-2 text-sm">
									<Badge color="transparent">
										{comparison.summary.total_diffs} total items
									</Badge>
									<Badge color="transparent">
										{selectableDiffs.length}
										{mergeIntoParent ? 'deployable' : 'updateable'}
									</Badge>
									{#if conflictingDiffs.length > 0}
										<Badge color="orange">
											<AlertTriangle class="w-3 h-3 inline mr-1" />
											{conflictingDiffs.length} conflicts
										</Badge>
									{/if}
								</div>
							</div>
						</div>
					</div>
				{/snippet}
				{#if allCiTests.length > 0}
					<div class="flex flex-col gap-1.5 mt-3 p-3 border bg-surface-secondary rounded text-xs">
						<div class="flex items-center gap-1.5 font-semibold text-secondary">
							<FlaskConical size={14} />
							CI tests
						</div>
						<div class="flex flex-col gap-1">
							{#each allCiTests as test (test.test_script_path)}
								<div class="flex items-center gap-2">
									{#if test.status === 'success'}
										<CircleCheck size={14} class="text-green-600" />
									{:else if test.status === 'failure' || test.status === 'canceled'}
										<CircleX size={14} class="text-red-600" />
									{:else if test.status === 'running'}
										<Loader2 size={14} class="text-yellow-600 animate-spin" />
									{:else}
										<div class="w-3.5 h-3.5 rounded-full border border-tertiary"></div>
									{/if}
									<span class="text-secondary">{test.test_script_path}</span>
									{#if test.job_id}
										<a
											href="{base}/run/{test.job_id}?workspace={currentWorkspaceId}"
											class="text-tertiary hover:text-secondary text-2xs"
										>
											view run
										</a>
									{/if}
								</div>
							{/each}
						</div>
					</div>
				{/if}

				{#snippet alerts()}
					{#if draftCount > 0}
						<Alert title="Undeployed drafts" type="warning" size="xs" class="my-2">
							<div class="flex items-center gap-2 flex-wrap">
								<span>
									{#if mergeIntoParent}
										This workspace has {draftCount} undeployed draft{draftCount !== 1 ? 's' : ''}.
										Only deployed versions in this fork can be sent to {parentWorkspaceId} — deploy
										{draftCount !== 1 ? 'them' : 'it'} first, otherwise those changes won't be included.
									{:else}
										This workspace has {draftCount} undeployed draft{draftCount !== 1 ? 's' : ''}.
									{/if}
								</span>
								<Button variant="subtle" unifiedSize="xs" onclick={() => onModeSelected?.('draft')}>
									See drafts
								</Button>
							</div>
						</Alert>
					{/if}
					{#if mergeIntoParent}
						<ParentWorkspaceProtectionAlert
							{parentWorkspaceId}
							onUpdateCanDeploy={(canDeploy) => {
								canDeployToParent = canDeploy
							}}
						/>
					{/if}
					{#if conflictingDiffs.length > 0}
						<Alert title="Conflicting changes detected" type="warning" class="mt-2">
							<span>
								{conflictingDiffs.length} item{conflictingDiffs.length !== 1 ? 's have' : ' has'} conflicting
								changes, it was modified on the original workspace while changes were made on this fork.
								Make sure to resolve these before merging.
							</span>
						</Alert>
					{/if}
					{#if hasBehindChanges && hasAheadChanges && !(mergeIntoParent && !canDeployToParent)}
						<Alert
							title="This fork is behind {parentWorkspaceId} and needs to be up to date before deploying"
							type="warning"
							class="my-2"
						>
							You have items behind '{parentWorkspaceId}'. You need to update and test your changes
							before being able to deploy.
							<span class="font-medium flex flex-row gap-1 text-red-500">
								<input
									type="checkbox"
									bind:checked={allowBehindChangesOverride}
									class="rounded max-w-4"
								/>
								Override: Deploy despite {itemsWithBehindChanges.length} outdated item{itemsWithBehindChanges.length !==
								1
									? 's'
									: ''}
							</span>
						</Alert>
					{/if}
					{#if !comparison.all_ahead_items_visible || !comparison.all_behind_items_visible}
						<Alert
							title="This fork has changes not visible to your user"
							type="warning"
							class="my-2"
						>
							{#if !comparison.all_ahead_items_visible && !comparison.all_behind_items_visible}
								This fork is ahead and behind its parent
							{:else if !comparison.all_behind_items_visible}
								This fork is behind of its parent
							{:else if !comparison.all_ahead_items_visible}
								This fork is ahead of its parent
							{/if}
							and some of the changes are not visible by you. Only a user with access to the whole context
							may deploy or update this fork. You can share the link to this page to someone with proper
							permissions to get it deployed.
						</Alert>
					{/if}
				{/snippet}

				{#snippet itemSummary(item)}
					{@const diff = item.diff as WorkspaceItemDiff}
					{@const key = item.key}
					<!-- Point the edit link at the workspace the item actually lives in:
					     a parent-only row (deleted/absent in the fork) would 404 if linked
					     into the fork, so link it into the parent instead. -->
					{@const editUrl = editUrlFor(
						diff,
						diff.exists_in_fork ? currentWorkspaceId : parentWorkspaceId
					)}
					{#if isTriggerOrScheduleKind(diff.kind)}
						<span class="text-emphasis">
							{KIND_DISPLAY_NAMES[diff.kind as string] ?? diff.kind}
						</span>
						<span class="text-tertiary mx-1">&rarr;</span>
						<span class="text-secondary">{diff.path}</span>
					{:else}
						{@const isSelectable = selectableDiffs.includes(diff)}
						{@const oldSummary = mergeIntoParent
							? summaryCache[key]?.parent
							: summaryCache[key]?.current}
						{@const newSummary = mergeIntoParent
							? summaryCache[key]?.current
							: summaryCache[key]?.parent}
						{@const existsInBothWorkspaces = !(
							(diff.exists_in_fork && !diff.exists_in_source) ||
							(!diff.exists_in_fork && diff.exists_in_source)
						)}
						<WorkspaceDeployItemSummary
							path={diff.path}
							{editUrl}
							{oldSummary}
							{newSummary}
							renamed={oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
						/>
					{/if}
				{/snippet}

				{#snippet itemActions(item)}
					{@const diff = item.diff as WorkspaceItemDiff}
					{@const key = item.key}
					{@const targetOnBehalfOf = getTargetOnBehalfOf(key)}
					{@const isConflict = diff.ahead > 0 && diff.behind > 0}
					{@const existsInBothWorkspaces = !(
						(diff.exists_in_fork && !diff.exists_in_source) ||
						(!diff.exists_in_fork && diff.exists_in_source)
					)}
					<!-- On-behalf-of selector -->
					{#if itemNeedsOnBehalfOfSelection(key, diff.kind)}
						<OnBehalfOfSelector
							targetWorkspace={deployTargetWorkspace}
							targetValue={targetOnBehalfOf}
							selected={onBehalfOfChoice[key]}
							onSelect={(choice, details) => {
								onBehalfOfChoice[key] = choice
								if (details) customOnBehalfOf[key] = details
							}}
							kind={diff.kind}
							canPreserve={canPreserveOnBehalfOf}
							customValue={customOnBehalfOf[key]?.permissionedAs}
						/>
					{/if}
					{#if diff.kind === 'raw_app'}
						<Badge small icon={{ icon: FileJson }}>Raw</Badge>
					{/if}
					{#if hasDraft(diff)}
						<!-- This deployed fork item also has a pending draft. Deploying/updating
						     moves the deployed version, not the draft — so we warn (yellow, ahead
						     of the New/status badges) and leave it out of the default selection
						     (see selectDefault). -->
						<Badge
							title={mergeIntoParent
								? 'This item has a draft — deploying sends the deployed version, not the draft.'
								: 'This item has a draft — updating replaces the deployed version your draft is based on.'}
							color="yellow"
							size="xs"
						>
							<AlertTriangle class="w-3 h-3 inline mr-0.5" />+Draft
						</Badge>
					{/if}
					<!-- Status badges -->
					{#if !diff.exists_in_fork && diff.exists_in_source && diff.ahead == 0 && diff.behind > 0}
						<Badge
							title="This item was newly created in the parent workspace '{parentWorkspaceId}'"
							color="indigo"
							size="xs">New</Badge
						>
					{/if}
					{#if !diff.exists_in_fork && diff.exists_in_source && diff.ahead > 0}
						<Badge title="This item was deleted in '{currentWorkspaceId}'" color="red" size="xs"
							>Deleted</Badge
						>
					{/if}
					{#if diff.exists_in_fork && !diff.exists_in_source && diff.behind > 0}
						<Badge
							title="This item was deleted in the parent workspace '{parentWorkspaceId}'"
							color="red"
							size="xs">Deleted</Badge
						>
					{/if}
					{#if diff.exists_in_fork && !diff.exists_in_source && diff.ahead > 0 && diff.behind == 0}
						<Badge
							title="This item was newly created in '{currentWorkspaceId}'"
							color="indigo"
							size="xs">New</Badge
						>
					{/if}
					{@const ciStatus = getCiTestStatus(diff)}
					{#if ciStatus === 'pass'}
						<Badge color="green" size="xs"><CircleCheck size={10} class="mr-0.5" />CI pass</Badge>
					{:else if ciStatus === 'fail'}
						<Badge color="red" size="xs"><CircleX size={10} class="mr-0.5" />CI fail</Badge>
					{:else if ciStatus === 'running'}
						<Badge color="yellow" size="xs"
							><Loader2 size={10} class="mr-0.5 animate-spin" />CI</Badge
						>
					{/if}
					{#if !deploymentStatus[key] || deploymentStatus[key].status != 'deployed'}
						<div class="flex items-center gap-2">
							{#if isConflict || existsInBothWorkspaces}
								{#if diff.ahead > 0}
									<Badge color="green" size="xs">
										<ArrowUpRight class="w-3 h-3 inline" />
										{diff.ahead} ahead
									</Badge>
								{/if}
								{#if diff.behind > 0}
									<Badge color="blue" size="xs">
										<ArrowDownRight class="w-3 h-3 inline" />
										{diff.behind} behind
									</Badge>
								{/if}
								{#if isConflict}
									<Badge color="orange" size="xs">
										<AlertTriangle class="w-3 h-3 inline" />
										Conflict
									</Badge>
								{/if}
							{/if}
						</div>
						<div class:invisible={!existsInBothWorkspaces}>
							<Button
								unifiedSize="xs"
								variant="subtle"
								startIcon={{ icon: DiffIcon }}
								onClick={() => showDiff(diff.kind as Kind, diff.path)}
							>
								Show diff
							</Button>
						</div>
					{/if}
				{/snippet}

				{#snippet footer()}
					{#if !nothingToAct}
						<div class="flex items-center justify-between">
							<div></div>

							<div class="flex flex-col items-end gap-2">
								{#if comparison.all_behind_items_visible && comparison.all_ahead_items_visible}
									<div class="flex items-center gap-2">
										{#if mergeIntoParent && !hasOpenDeploymentRequest && !deploymentRequestPanel?.isDialogOpen()}
											<Button
												variant="default"
												startIcon={{ icon: UserPlus }}
												on:click={() => deploymentRequestPanel?.openRequestDialog()}
											>
												Request deployment
											</Button>
										{/if}
										<Button
											variant="accent"
											disabled={selectedItems.length === 0 ||
												deploying ||
												(hasBehindChanges && !allowBehindChangesOverride) ||
												(mergeIntoParent && !canDeployToParent) ||
												hasUnselectedOnBehalfOf}
											loading={deploying}
											on:click={requestDeploy}
										>
											{mergeIntoParent ? 'Deploy' : 'Update'}
											{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
											{#if selectedConflicts != 0}
												({selectedConflicts} conflicts)
											{/if}
										</Button>
									</div>
									{#if !(mergeIntoParent && !canDeployToParent) && hasUnselectedOnBehalfOf}
										<span class="text-xs text-yellow-600">
											You must set the "on behalf of" user for all items before deploying
											<Tooltip class="text-yellow-600">
												The "run on behalf of" field defines which user's permissions will be
												applied during execution. Make sure this is set to an appropriate user
												before deploying.
											</Tooltip>
										</span>
									{/if}
								{/if}

								{#if deploymentErrorMessage != ''}
									<Alert
										title="Cannot {mergeIntoParent ? 'deploy these changes' : 'update these items'}"
										type="error"
										class="my-2 max-w-80"
									>
										<span>
											{deploymentErrorMessage}
										</span>
									</Alert>
								{/if}
							</div>
						</div>
					{/if}
				{/snippet}
			</WorkspaceDeployLayout>

			<DeploymentRequestPanel
				bind:this={deploymentRequestPanel}
				forkWorkspaceId={currentWorkspaceId}
				{parentWorkspaceId}
				currentUsername={$userStore?.username ?? ''}
				isAdmin={$userStore?.is_admin ?? false}
				onStateChange={(open) => {
					hasOpenDeploymentRequest = open
				}}
			/>
		</div>

		<div class="bg-surface-tertiary p-4 rounded-md border">
			<DatatableSchemaDiff {currentWorkspaceId} {parentWorkspaceId} />
		</div>
	</div>

	<DiffDrawer bind:this={diffDrawer} {isFlow} />

	<ConfirmationModal
		open={draftConfirmOpen}
		title={mergeIntoParent ? 'Deploy items with a draft?' : 'Update items with a draft?'}
		confirmationText={mergeIntoParent ? 'Deploy anyway' : 'Update anyway'}
		onConfirmed={() => {
			draftConfirmOpen = false
			deployChanges()
		}}
		onCanceled={() => (draftConfirmOpen = false)}
	>
		<div class="flex flex-col gap-2">
			<p>
				{selectedDraftKeys.length} selected item{selectedDraftKeys.length !== 1 ? 's' : ''}
				{selectedDraftKeys.length !== 1 ? 'have' : 'has'} an undeployed draft.
				{#if mergeIntoParent}
					Deploying sends the deployed version, not the draft — those draft changes won't be
					included.
				{:else}
					Updating replaces the deployed version your draft is based on.
				{/if}
			</p>
			<ul class="list-disc pl-5 text-sm font-mono text-secondary">
				{#each selectedDraftKeys as k (k)}
					<li>{k.split(':').slice(1).join(':')}</li>
				{/each}
			</ul>
		</div>
	</ConfirmationModal>
{:else}
	<div class="flex items-center justify-center h-full">
		<div class="text-gray-500">No comparison data available</div>
	</div>
{/if}