diff --git a/frontend/src/lib/components/CompareDrafts.svelte b/frontend/src/lib/components/CompareDrafts.svelte
new file mode 100644
index 0000000000..386007317c
--- /dev/null
+++ b/frontend/src/lib/components/CompareDrafts.svelte
@@ -0,0 +1,399 @@
+<script lang="ts">
+	import WorkspaceDeployLayout from './WorkspaceDeployLayout.svelte'
+	import DiffDrawer from './DiffDrawer.svelte'
+	import WorkspaceDeployItemSummary from './WorkspaceDeployItemSummary.svelte'
+	import { Badge } from './common'
+	import Button from './common/button/Button.svelte'
+	import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
+	import { ArrowRight, DiffIcon, GitFork, Pencil, Undo2 } from 'lucide-svelte'
+	import { untrack } from 'svelte'
+	import CompareModeToggle, { type CompareMode } from './CompareModeToggle.svelte'
+	import { editUrlFor } from './sessions/forkEditUrl'
+	import { AppService, FlowService, ScriptService, type WorkspaceItemDiff } from '$lib/gen'
+	import { sendUserToast } from '$lib/toast'
+	import { getDraftDiffValues, deployDraft, discardDraft } from '$lib/utils_draft_deploy'
+	import { type DraftItem } from '$lib/workspaceDrafts.svelte'
+
+	interface Props {
+		currentWorkspaceId: string
+		/** The Draft Items to review, owned by the page's Workspace Drafts resource
+		 * and passed down so we don't mount a second resource (which would double
+		 * the list fetches). Deploy/discard here invalidate that resource, so the
+		 * list refetches upstream and the new `draftItems` flow back in. */
+		draftItems: DraftItem[]
+		/** True while the page's Workspace Drafts resource is loading. */
+		draftsLoading?: boolean
+		/** Fork context drives the merged toggle: only a fork offers the
+		 * deploy_to/update directions, so the toggle is hidden otherwise. */
+		isFork?: boolean
+		parentWorkspaceId?: string
+		deployCount?: number
+		updateCount?: number
+		draftCount?: number
+		/** Selecting deploy_to/update asks the page to swap to CompareWorkspaces. */
+		onModeSelected?: (v: CompareMode) => void
+		/** Fired after a deploy/discard so the page can refresh the *fork*
+		 * comparison (ahead/behind). The Draft Count refreshes itself — deploy/
+		 * discard invalidate the Workspace Drafts resource. */
+		onChanged?: () => void
+	}
+
+	let {
+		currentWorkspaceId,
+		draftItems,
+		draftsLoading = false,
+		isFork = false,
+		parentWorkspaceId,
+		deployCount = 0,
+		updateCount = 0,
+		draftCount = 0,
+		onModeSelected,
+		onChanged
+	}: Props = $props()
+
+	type Row = {
+		kind: DraftItem['kind']
+		path: string
+		summary?: string
+		draft_only: boolean
+		raw_app: boolean
+		key: string
+	}
+	function getItemKey(kind: string, path: string): string {
+		return `${kind}:${path}`
+	}
+
+	// The list (and the Draft Count) come from the shared Workspace Drafts module,
+	// owned by the page and passed in via `draftItems`; deploy/discard invalidate
+	// that resource, so the list refetches and deployed items drop off without a
+	// manual reload here.
+	const items: Row[] = $derived(draftItems.map((d) => ({ ...d, key: getItemKey(d.kind, d.path) })))
+
+	// The Draft Items list only carries the *deployed* summary, so the draft's
+	// (new) display name isn't known yet. Fetch each item's draft blob once and
+	// cache both names — mirrors CompareWorkspaces' fetchSummaries (eager on load,
+	// keyed by row key) so the rename rendering is shared and consistent. Only
+	// non-`draft_only` items can show a rename: a `draft_only` item has no deployed
+	// side to diff the name against. Raw apps live on a separate route and aren't
+	// fetchable here, so they're skipped (no rename shown, same as before).
+	const summaryCache = $state<
+		Record<string, { deployed?: string; draft?: string; loading?: boolean }>
+	>({})
+
+	async function fetchDraftSummary(item: Row) {
+		if (summaryCache[item.key]) return
+		summaryCache[item.key] = { loading: true }
+		try {
+			const r = (await (item.kind === 'script'
+				? ScriptService.getScriptByPathWithDraft({ workspace: currentWorkspaceId, path: item.path })
+				: item.kind === 'flow'
+					? FlowService.getFlowByPathWithDraft({ workspace: currentWorkspaceId, path: item.path })
+					: AppService.getAppByPathWithDraft({
+							workspace: currentWorkspaceId,
+							path: item.path
+						}))) as any
+			summaryCache[item.key] = {
+				deployed: r.summary,
+				draft: (r.draft as any)?.summary,
+				loading: false
+			}
+		} catch (error) {
+			console.error(`Failed to fetch draft summary for ${item.kind}:${item.path}`, error)
+			summaryCache[item.key] = { loading: false }
+		}
+	}
+
+	$effect(() => {
+		const current = items
+		untrack(() => {
+			for (const item of current) {
+				if (!item.draft_only && !item.raw_app && !summaryCache[item.key]) {
+					void fetchDraftSummary(item)
+				}
+			}
+		})
+	})
+
+	let selectedItems = $state<string[]>([])
+	let deploying = $state(false)
+	// Select all on the first non-empty load (deploy-all is the common intent);
+	// only once, so a refetch after a deploy doesn't re-select the leftovers.
+	let hasAutoSelected = $state(false)
+
+	const deploymentStatus: Record<
+		string,
+		{ status: 'loading' | 'deployed' | 'failed'; error?: string }
+	> = $state({})
+
+	// Prune transient deploy status for items no longer in the list (a deployed
+	// item drops off after the resource refetches). Keeps the map from growing
+	// unbounded and avoids a stale 'deployed' entry suppressing a row if the same
+	// kind:path is re-drafted within this mount.
+	$effect(() => {
+		const live = new Set(items.map((i) => i.key))
+		untrack(() => {
+			for (const key of Object.keys(deploymentStatus)) {
+				if (!live.has(key)) delete deploymentStatus[key]
+			}
+		})
+	})
+
+	$effect(() => {
+		if (!hasAutoSelected && items.length > 0) {
+			selectedItems = items
+				.filter((i) => deploymentStatus[i.key]?.status !== 'deployed')
+				.map((i) => i.key)
+			hasAutoSelected = true
+		}
+	})
+
+	// Selected items still in the live list and deployable. Derived (not a pruning
+	// effect) so the "Deploy N drafts" button stays reactive to the Workspace
+	// Drafts resource: deploy/discard drop items, and stale keys left in
+	// selectedItems are simply ignored here (and by deploySelected).
+	let selectedCount = $derived(
+		items.filter(
+			(i) => selectedItems.includes(i.key) && deploymentStatus[i.key]?.status !== 'deployed'
+		).length
+	)
+
+	let allSelected = $derived(
+		items.length > 0 &&
+			items
+				.filter((i) => deploymentStatus[i.key]?.status !== 'deployed')
+				.every((i) => selectedItems.includes(i.key))
+	)
+
+	function toggleItem(item: { key: string }) {
+		if (selectedItems.includes(item.key)) {
+			selectedItems = selectedItems.filter((k) => k !== item.key)
+		} else {
+			selectedItems = [...selectedItems, item.key]
+		}
+	}
+
+	function selectAll() {
+		selectedItems = items
+			.filter((i) => deploymentStatus[i.key]?.status !== 'deployed')
+			.map((i) => i.key)
+	}
+
+	function deselectAll() {
+		selectedItems = []
+	}
+
+	// --- Diff ---
+	let diffDrawer: DiffDrawer | undefined = $state(undefined)
+	let isFlow = $state(false)
+	// Monotonic token so that two quick "Show diff" clicks don't race: a slower
+	// earlier fetch must not overwrite a faster later one in the (single) drawer.
+	let diffRequestId = 0
+
+	async function showDiff(item: Row) {
+		if (!diffDrawer) return
+		const reqId = ++diffRequestId
+		isFlow = item.kind === 'flow'
+		diffDrawer.openDrawer()
+		const { deployed, draft } = await getDraftDiffValues(
+			item.kind,
+			item.path,
+			currentWorkspaceId,
+			item.draft_only
+		)
+		// A newer Show-diff click superseded this one — drop the stale result.
+		if (reqId !== diffRequestId) return
+		diffDrawer.setDiff({
+			mode: 'simple',
+			original: deployed as any,
+			current: draft as any,
+			title: 'Deployed → Draft'
+		})
+	}
+
+	// --- Deploy ---
+	async function deploySelected() {
+		deploying = true
+		// Snapshot the items to deploy: deployDraft invalidates the Workspace Drafts
+		// resource, so `items` can change mid-loop — iterate a stable copy.
+		const toDeploy = items.filter((i) => selectedItems.includes(i.key))
+		let deployedAny = false
+		for (const item of toDeploy) {
+			deploymentStatus[item.key] = { status: 'loading' }
+			const res = await deployDraft(
+				item.kind,
+				item.path,
+				currentWorkspaceId,
+				item.draft_only,
+				item.raw_app
+			)
+			if (res.success) {
+				deploymentStatus[item.key] = { status: 'deployed' }
+				deployedAny = true
+			} else {
+				deploymentStatus[item.key] = { status: 'failed', error: res.error }
+				sendUserToast(`Failed to deploy ${item.path}: ${res.error}`, true)
+			}
+		}
+		deploying = false
+		selectedItems = []
+		// The Draft list refetches itself (deployDraft invalidated it). Deploying
+		// also changes the fork comparison (ahead/behind) — ask the page to refresh
+		// that.
+		if (deployedAny) onChanged?.()
+	}
+
+	// --- Discard ---
+	let discardTarget = $state<Row | undefined>(undefined)
+
+	async function confirmDiscard() {
+		const item = discardTarget
+		discardTarget = undefined
+		if (!item) return
+		const res = await discardDraft(item.kind, item.path, currentWorkspaceId, item.draft_only)
+		if (res.success) {
+			sendUserToast(item.draft_only ? `Deleted ${item.path}` : `Discarded draft of ${item.path}`)
+			// discardDraft invalidated the Draft list; refresh the fork comparison.
+			onChanged?.()
+		} else {
+			sendUserToast(`Failed to discard ${item.path}: ${res.error}`, true)
+		}
+	}
+
+	// Editor URL for a draft item, scoped to the current workspace. Raw apps live
+	// under a different editor route, so map their kind accordingly.
+	function draftEditUrl(d: Row): string | undefined {
+		return editUrlFor(
+			{ kind: d.raw_app ? 'raw_app' : d.kind, path: d.path } as unknown as WorkspaceItemDiff,
+			currentWorkspaceId
+		)
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="bg-surface-tertiary p-4 rounded-md border">
+		<WorkspaceDeployLayout
+			{items}
+			{selectedItems}
+			{deploymentStatus}
+			{allSelected}
+			selectablePredicate={(item) => deploymentStatus[item.key]?.status !== 'deployed'}
+			onToggleItem={toggleItem}
+			onSelectAll={selectAll}
+			onDeselectAll={deselectAll}
+			emptyMessage={draftsLoading ? 'Loading drafts…' : 'No drafts in this workspace'}
+		>
+			{#snippet header()}
+				{#if isFork}
+					<div class="flex flex-wrap gap-1 items-center bg-surface-tertiary pb-4">
+						<CompareModeToggle
+							selected="draft"
+							{isFork}
+							{parentWorkspaceId}
+							{deployCount}
+							{updateCount}
+							{draftCount}
+							disabled={deploying}
+							onSelected={(v) => onModeSelected?.(v)}
+						/>
+						<!-- Direction badge, mirroring the fork compare header: make it explicit
+						     that deploying a draft promotes it *within this fork* (deployed↔draft),
+						     not up to the parent. -->
+						<div class="flex-1 flex gap-1 items-center">
+							<Badge color="transparent" class="ml-5 font-semibold">
+								<span class="text-secondary">deploy:</span>
+								<Pencil size={14} />
+								<span class="text-emphasis">draft</span>
+							</Badge>
+							<ArrowRight size={16} />
+							<Badge color="transparent" class="font-semibold" title={currentWorkspaceId}>
+								<span class="text-secondary">into:</span>
+								<GitFork size={14} />
+								<span class="text-emphasis">{currentWorkspaceId}</span>
+							</Badge>
+						</div>
+					</div>
+				{/if}
+			{/snippet}
+
+			{#snippet itemSummary(item)}
+				{@const draftItem = item as unknown as Row}
+				{@const editUrl = draftEditUrl(draftItem)}
+				{@const cache = summaryCache[draftItem.key]}
+				{@const oldSummary = cache?.deployed ?? draftItem.summary}
+				{@const newSummary = cache?.draft ?? draftItem.summary}
+				<WorkspaceDeployItemSummary
+					path={draftItem.path}
+					{editUrl}
+					{oldSummary}
+					{newSummary}
+					renamed={!draftItem.draft_only &&
+						oldSummary != null &&
+						newSummary != null &&
+						oldSummary !== newSummary}
+				/>
+			{/snippet}
+
+			{#snippet itemActions(item)}
+				{@const draftItem = item as unknown as Row}
+				{#if draftItem.draft_only}
+					<Badge color="indigo" size="xs">New</Badge>
+				{/if}
+				{#if deploymentStatus[draftItem.key]?.status !== 'deployed'}
+					<Button
+						unifiedSize="xs"
+						variant="subtle"
+						startIcon={{ icon: DiffIcon }}
+						onClick={() => showDiff(draftItem)}
+					>
+						Show diff
+					</Button>
+					<Button
+						unifiedSize="xs"
+						variant="subtle"
+						destructive
+						startIcon={{ icon: Undo2 }}
+						onClick={() => (discardTarget = draftItem)}
+					>
+						Discard draft
+					</Button>
+				{/if}
+			{/snippet}
+
+			{#snippet footer()}
+				<div class="flex items-center justify-end">
+					<Button
+						variant="accent"
+						disabled={selectedCount === 0 || deploying}
+						loading={deploying}
+						onClick={deploySelected}
+					>
+						Deploy {selectedCount} draft{selectedCount !== 1 ? 's' : ''}
+					</Button>
+				</div>
+			{/snippet}
+		</WorkspaceDeployLayout>
+	</div>
+
+	<DiffDrawer bind:this={diffDrawer} {isFlow} />
+</div>
+
+<ConfirmationModal
+	open={discardTarget !== undefined}
+	title={discardTarget?.draft_only ? 'Delete item' : 'Discard draft'}
+	confirmationText={discardTarget?.draft_only ? 'Delete' : 'Discard'}
+	onConfirmed={confirmDiscard}
+	onCanceled={() => (discardTarget = undefined)}
+>
+	{#if discardTarget?.draft_only}
+		<p>
+			<span class="font-mono font-medium text-primary">{discardTarget?.path}</span> exists only as a
+			draft. Discarding it will permanently delete the item. This cannot be undone.
+		</p>
+	{:else}
+		<p>
+			Discard the draft of
+			<span class="font-mono font-medium text-primary">{discardTarget?.path}</span>? The deployed
+			version is unaffected.
+		</p>
+	{/if}
+</ConfirmationModal>
diff --git a/frontend/src/lib/components/CompareModeToggle.svelte b/frontend/src/lib/components/CompareModeToggle.svelte
new file mode 100644
index 0000000000..c7728ba090
--- /dev/null
+++ b/frontend/src/lib/components/CompareModeToggle.svelte
@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	// The merged compare control: fork direction (deploy_to / update) and the
+	// deployed↔draft comparison live in one toggle. `deploy_to`/`update` only
+	// apply in a fork; a non-fork workspace has draft as the sole option (the
+	// caller hides the toggle entirely in that case).
+	export type CompareMode = 'deploy_to' | 'update' | 'draft'
+</script>
+
+<script lang="ts">
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import { ArrowUp, ArrowDown, Pencil } from 'lucide-svelte'
+
+	interface Props {
+		selected: CompareMode
+		isFork: boolean
+		parentWorkspaceId?: string
+		deployCount?: number
+		updateCount?: number
+		draftCount?: number
+		disabled?: boolean
+		onSelected: (v: CompareMode) => void
+	}
+
+	let {
+		selected,
+		isFork,
+		parentWorkspaceId,
+		deployCount = 0,
+		updateCount = 0,
+		draftCount = 0,
+		disabled = false,
+		onSelected
+	}: Props = $props()
+
+	// Append a count suffix only when there is something to act on, mirroring the
+	// draft toggle (no "(0)" noise).
+	function withCount(label: string, count: number): string {
+		return count > 0 ? `${label} (${count})` : label
+	}
+</script>
+
+<ToggleButtonGroup {disabled} {selected} onSelected={(v) => onSelected(v as CompareMode)} noWFull>
+	{#snippet children({ item })}
+		{#if isFork}
+			<ToggleButton
+				value="deploy_to"
+				label={withCount(`Deploy to ${parentWorkspaceId}`, deployCount)}
+				icon={ArrowUp}
+				{item}
+			/>
+			<ToggleButton
+				value="update"
+				label={withCount('Update current', updateCount)}
+				icon={ArrowDown}
+				{item}
+			/>
+		{/if}
+		<ToggleButton value="draft" label={`Deploy draft (${draftCount})`} icon={Pencil} {item} />
+	{/snippet}
+</ToggleButtonGroup>
diff --git a/frontend/src/lib/components/CompareWorkspaces.svelte b/frontend/src/lib/components/CompareWorkspaces.svelte
index 95d36c4551..06d787095e 100644
--- a/frontend/src/lib/components/CompareWorkspaces.svelte
+++ b/frontend/src/lib/components/CompareWorkspaces.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 	import {
 		AlertTriangle,
-		ArrowDown,
 		ArrowDownRight,
 		ArrowRight,
-		ArrowUp,
 		ArrowUpRight,
 		Building,
 		CircleCheck,
@@ -29,7 +27,9 @@
 		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'
 
@@ -54,22 +54,58 @@
 	import DeploymentRequestPanel from './deploymentRequest/DeploymentRequestPanel.svelte'
 	import { userStore } from '$lib/stores'
 	import { base } from '$lib/base'
-	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	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 }: Props = $props()
+	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(true)
+	let mergeIntoParent = $state(initialMergeIntoParent)
 	let deploying = $state(false)
 	let hasAutoSelected = $state(false)
 	let canDeployToParent = $state(true)
@@ -89,6 +125,32 @@
 
 	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) ?? []
 	)
@@ -419,6 +481,10 @@
 				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) {
@@ -434,7 +500,9 @@
 		// 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.
-		const filtered = selectableDiffs.filter((d) => !isTriggerOrScheduleKind(d.kind))
+		// 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))
@@ -449,6 +517,15 @@
 		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]
@@ -601,7 +678,7 @@
 	<div class="flex flex-col gap-4">
 		<div class="bg-surface-tertiary p-4 rounded-md border">
 			<WorkspaceDeployLayout
-				items={deployableItems}
+				items={nothingToAct ? [] : deployableItems}
 				{selectedItems}
 				{deploymentStatus}
 				selectablePredicate={(item) => selectableDiffs.some((d) => getItemKey(d) === item.key)}
@@ -609,28 +686,22 @@
 				onToggleItem={(item) => toggleKey(item.key)}
 				onSelectAll={selectAll}
 				onDeselectAll={deselectAll}
-				emptyMessage="No comparison data available"
+				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 border-b">
+						<div class="flex flex-col gap-2 w-full pb-4">
 							<div class="flex flex-wrap gap-1 items-center">
-								<ToggleButtonGroup
+								<CompareModeToggle
+									selected={mergeIntoParent ? 'deploy_to' : 'update'}
+									isFork={true}
+									{parentWorkspaceId}
+									{deployCount}
+									{updateCount}
+									{draftCount}
 									disabled={deploying}
-									selected="deploy_to"
-									onSelected={toggleDeploymentDirection}
-									noWFull
-								>
-									{#snippet children({ item })}
-										<ToggleButton
-											value="deploy_to"
-											label="Deploy to {parentWorkspaceId}"
-											icon={ArrowUp}
-											{item}
-										/>
-										<ToggleButton value="update" label="Update current" icon={ArrowDown} {item} />
-									{/snippet}
-								</ToggleButtonGroup>
+									onSelected={onToggleMode}
+								/>
 								{#if currentWorkspaceInfo && parentWorkspaceInfo}
 									<div class="flex-1 flex gap-1 items-center">
 										<Badge
@@ -719,6 +790,24 @@
 				{/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}
@@ -780,6 +869,13 @@
 				{#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}
@@ -798,14 +894,13 @@
 							(diff.exists_in_fork && !diff.exists_in_source) ||
 							(!diff.exists_in_fork && diff.exists_in_source)
 						)}
-						{#if oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
-							<span class="line-through text-secondary">{oldSummary || diff.path}</span>
-							{newSummary || diff.path}
-						{:else if !existsInBothWorkspaces}
-							{newSummary || oldSummary || diff.path}
-						{:else}
-							{newSummary || diff.path}
-						{/if}
+						<WorkspaceDeployItemSummary
+							path={diff.path}
+							{editUrl}
+							{oldSummary}
+							{newSummary}
+							renamed={oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
+						/>
 					{/if}
 				{/snippet}
 
@@ -836,6 +931,21 @@
 					{#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
@@ -898,11 +1008,11 @@
 						</div>
 						<div class:invisible={!existsInBothWorkspaces}>
 							<Button
-								size="xs"
+								unifiedSize="xs"
 								variant="subtle"
-								onclick={() => showDiff(diff.kind as Kind, diff.path)}
+								startIcon={{ icon: DiffIcon }}
+								onClick={() => showDiff(diff.kind as Kind, diff.path)}
 							>
-								<DiffIcon class="w-3 h-3" />
 								Show diff
 							</Button>
 						</div>
@@ -910,63 +1020,65 @@
 				{/snippet}
 
 				{#snippet footer()}
-					<div class="flex items-center justify-between">
-						<div></div>
+					{#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={deployChanges}
-									>
-										{mergeIntoParent ? 'Deploy' : 'Update'}
-										{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
-										{#if selectedConflicts != 0}
-											({selectedConflicts} conflicts)
+							<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>
-								</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>
+										<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}
 
-							{#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}
+								{#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>
-					</div>
+					{/if}
 				{/snippet}
 			</WorkspaceDeployLayout>
 
@@ -988,6 +1100,35 @@
 	</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>
diff --git a/frontend/src/lib/components/ExternalEditLink.svelte b/frontend/src/lib/components/ExternalEditLink.svelte
new file mode 100644
index 0000000000..e38fa658fc
--- /dev/null
+++ b/frontend/src/lib/components/ExternalEditLink.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ExternalLink } from 'lucide-svelte'
+	import type { Snippet } from 'svelte'
+
+	// Shared "open in a new tab" link used by the compare/diff row titles
+	// (CompareDrafts, CompareWorkspaces, WorkspaceDiffDrawer). Wraps the common
+	// boilerplate — target/rel, the click-through stopPropagation (so following
+	// the link doesn't toggle row selection), and the hover-revealed external
+	// icon. Each caller supplies its own title text, extra classes, and inner
+	// label content via the `children` snippet.
+	let {
+		href,
+		title,
+		class: klass = '',
+		children
+	}: {
+		href: string
+		title?: string
+		class?: string
+		children: Snippet
+	} = $props()
+</script>
+
+<a
+	{href}
+	{title}
+	target="_blank"
+	rel="noopener noreferrer"
+	onclick={(e) => e.stopPropagation()}
+	class="group inline-flex items-center gap-1 max-w-full hover:underline {klass}"
+>
+	{@render children()}
+	<ExternalLink class="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-60 transition-opacity" />
+</a>
diff --git a/frontend/src/lib/components/ForkWorkspaceBanner.svelte b/frontend/src/lib/components/ForkWorkspaceBanner.svelte
index 7ce36b8e11..56418c1988 100644
--- a/frontend/src/lib/components/ForkWorkspaceBanner.svelte
+++ b/frontend/src/lib/components/ForkWorkspaceBanner.svelte
@@ -6,6 +6,7 @@
 	import { AlertTriangle, GitFork, CircleCheck, CircleX, Loader2 } from 'lucide-svelte'
 	import { goto } from '$app/navigation'
 	import { onMount, untrack } from 'svelte'
+	import { useWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
 
 	let loading = $state(false)
 	let comparison: WorkspaceComparison | undefined = $state(undefined)
@@ -16,6 +17,23 @@
 	let parentWorkspaceId = $derived(currentWorkspaceData?.parent_workspace_id)
 	let parentWorkspaceData = $derived($userWorkspaces.find((w) => w.id === parentWorkspaceId))
 
+	// Drafts in this fork. When the fork is otherwise in sync with its parent, a
+	// user with only pending drafts should still get the draft CTA (mirrors the
+	// non-fork WorkspaceDraftsBanner). Pass undefined when not a fork so it doesn't
+	// fetch.
+	const drafts = useWorkspaceDrafts(() => (isFork ? ($workspaceStore ?? undefined) : undefined))
+	const draftCount = $derived(drafts.count)
+
+	// Fork is fully in sync with its parent (comparison ran, no ahead/behind diffs).
+	// Typed helper avoids the $state `never`-inference quirk on `comparison` in $derived.
+	function isUpToDate(c: WorkspaceComparison | undefined): boolean {
+		return !!c && !c.skipped_comparison && c.summary.total_diffs === 0
+	}
+	let upToDate = $derived(isUpToDate(comparison))
+	// Up to date with the parent but local drafts are pending — show the draft
+	// state (same text + CTA as the draft banner) instead of "Everything is up to date".
+	let showDraftsOnly = $derived(upToDate && draftCount > 0)
+
 	$effect(() => {
 		;[$workspaceStore, parentWorkspaceId]
 		untrack(() => {
@@ -68,6 +86,14 @@
 		}
 	}
 
+	function openDraftCompare() {
+		if ($workspaceStore) {
+			goto('/forks/compare?workspace_id=' + encodeURIComponent($workspaceStore) + '&mode=draft', {
+				replaceState: true
+			})
+		}
+	}
+
 	let ciTestPassing = $state(0)
 	let ciTestFailing = $state(0)
 	let ciTestRunning = $state(0)
@@ -270,6 +296,10 @@
 									This fork was created before the addition of certain windmill features, and
 									therefore the changes with its parent workspace cannot be displayed.</span
 								>
+							{:else if showDraftsOnly}
+								<span class="text-blue-700 dark:text-blue-100">
+									This workspace has {draftCount} draft{draftCount !== 1 ? 's' : ''}
+								</span>
 							{:else}
 								<span class="text-blue-600 dark:text-blue-200"> Everything is up to date </span>
 							{/if}
@@ -278,8 +308,14 @@
 				</div>
 
 				<div class="flex items-center gap-2">
-					<Button size="xs" color="blue" on:click={openComparisonDrawer}>
-						{#if (comparison?.summary.total_ahead ?? 0) > 0}
+					<Button
+						variant="default"
+						unifiedSize="sm"
+						onclick={showDraftsOnly ? openDraftCompare : openComparisonDrawer}
+					>
+						{#if showDraftsOnly}
+							Review & deploy drafts
+						{:else if (comparison?.summary.total_ahead ?? 0) > 0}
 							Review & Deploy Changes
 						{:else}
 							Review & Update fork
diff --git a/frontend/src/lib/components/WorkspaceDeployItemSummary.svelte b/frontend/src/lib/components/WorkspaceDeployItemSummary.svelte
new file mode 100644
index 0000000000..437550ae6f
--- /dev/null
+++ b/frontend/src/lib/components/WorkspaceDeployItemSummary.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import ExternalEditLink from './ExternalEditLink.svelte'
+
+	interface Props {
+		/** Path of the item, used as the fallback label and link title. */
+		path: string
+		/** Editor URL; when set the summary becomes a new-tab link. */
+		editUrl?: string
+		/** Deployed/source-side display name (struck through when renamed). */
+		oldSummary?: string
+		/** Draft/target-side display name (the surviving name when renamed). */
+		newSummary?: string
+		/** Render `~~oldSummary~~ newSummary`. The caller decides this from its
+		 * own concepts (fork: exists-in-both & selectable; draft: !draft_only),
+		 * keeping page-specific logic out of this presentational component. */
+		renamed: boolean
+	}
+
+	let { path, editUrl, oldSummary, newSummary, renamed }: Props = $props()
+</script>
+
+{#snippet label()}
+	{#if renamed}
+		<!-- Two names side by side: don't truncate, mirror the fork compare page. -->
+		<span class="line-through text-secondary">{oldSummary || path}</span>
+		{newSummary || path}
+	{:else}
+		<span class="truncate">{newSummary || oldSummary || path}</span>
+	{/if}
+{/snippet}
+
+{#if editUrl}
+	<!-- Truncate the single-name case; let a rename pair render full-width. -->
+	<ExternalEditLink
+		href={editUrl}
+		title="Open {path} in a new tab"
+		class={renamed ? 'text-emphasis' : 'text-emphasis truncate'}
+	>
+		{@render label()}
+	</ExternalEditLink>
+{:else}
+	{@render label()}
+{/if}
diff --git a/frontend/src/lib/components/WorkspaceDeployLayout.svelte b/frontend/src/lib/components/WorkspaceDeployLayout.svelte
index b6c45b01d0..b6753dfbe9 100644
--- a/frontend/src/lib/components/WorkspaceDeployLayout.svelte
+++ b/frontend/src/lib/components/WorkspaceDeployLayout.svelte
@@ -55,6 +55,12 @@
 
 	let selectableItems = $derived(items.filter(selectablePredicate))
 	let hasSelectableItems = $derived(selectableItems.length > 0)
+
+	// Plain row click and the checkbox both toggle this row in/out — multi-select
+	// is the default, no modifier needed.
+	function handleSelect(item: DeployableItem) {
+		onToggleItem?.(item)
+	}
 </script>
 
 <div class="flex flex-col h-full">
@@ -73,9 +79,10 @@
 	{#if items.length > 0}
 		<!-- Select all row -->
 		<div class="px-4 py-2 flex items-center justify-between">
-			<div
+			<label
 				class="flex items-center gap-2 text-secondary text-xs"
 				class:opacity-50={!hasSelectableItems}
+				class:cursor-pointer={hasSelectableItems}
 			>
 				<input
 					type="checkbox"
@@ -84,7 +91,7 @@
 					onchange={allSelected ? onDeselectAll : onSelectAll}
 					class="rounded max-w-4 w-full"
 				/> Select all
-			</div>
+			</label>
 		</div>
 
 		<!-- Items list -->
@@ -98,10 +105,11 @@
 
 					<Row
 						isSelectable={isSelectable && !isDeployed}
+						selectOnRowClick={true}
 						alignWithSelectable={true}
 						disabled={!isSelectable}
 						selected={isSelected && !isDeployed}
-						onSelect={() => onToggleItem?.(item)}
+						onSelect={() => handleSelect(item)}
 						path={item.kind !== 'resource' &&
 						item.kind !== 'variable' &&
 						item.kind !== 'resource_type'
diff --git a/frontend/src/lib/components/WorkspaceDraftsBanner.svelte b/frontend/src/lib/components/WorkspaceDraftsBanner.svelte
new file mode 100644
index 0000000000..6a75a574de
--- /dev/null
+++ b/frontend/src/lib/components/WorkspaceDraftsBanner.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { workspaceStore } from '$lib/stores'
+	import { Button } from './common'
+	import { Pencil } from 'lucide-svelte'
+	import { goto } from '$app/navigation'
+	import { useWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
+
+	// Surfaces pending drafts (scripts/flows/apps) for the current workspace and
+	// links to the compare page in draft mode. Mutually exclusive with
+	// ForkWorkspaceBanner: that one self-gates on `isFork`, this one on `!isFork`,
+	// so a fork workspace never shows both. In a fork, drafts are discovered via
+	// the on-page "Deployed ↔ draft (N)" toggle badge instead.
+	let isFork = $derived($workspaceStore?.startsWith('wm-fork-') ?? false)
+
+	// Count comes from the shared Workspace Drafts resource (count ≡ the draft
+	// list; refreshes itself on deploy/discard). Pass undefined in a fork or with
+	// no workspace so it doesn't fetch and the banner stays hidden.
+	const drafts = useWorkspaceDrafts(() => (!isFork ? ($workspaceStore ?? undefined) : undefined))
+	const draftCount = $derived(drafts.count)
+
+	function openDraftCompare() {
+		if ($workspaceStore) {
+			goto('/forks/compare?workspace_id=' + encodeURIComponent($workspaceStore) + '&mode=draft', {
+				replaceState: true
+			})
+		}
+	}
+</script>
+
+{#if !isFork && draftCount > 0}
+	<div class="w-full bg-blue-50 dark:bg-blue-900 text-xs rounded-b-md max-w-7xl mx-auto">
+		<div class="px-4 py-2">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<Pencil class="w-4 h-4 text-accent" />
+					<span class="text-sm font-medium text-blue-900 dark:text-blue-100">
+						This workspace has {draftCount} draft{draftCount !== 1 ? 's' : ''}
+					</span>
+				</div>
+				<!-- Same button as the sibling ForkWorkspaceBanner CTA (they sit on the
+				     same home page), kept visually identical on purpose. -->
+				<Button variant="default" unifiedSize="sm" onclick={openDraftCompare}>
+					Review & deploy drafts
+				</Button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index 939519522f..b90fb385d8 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -14,6 +14,10 @@
 		disabled?: boolean
 		canFavorite?: boolean
 		isSelectable?: boolean
+		/** When true, clicking anywhere on the row card (except interactive
+		 * children — checkbox, buttons, links) toggles selection. Opt-in so
+		 * existing tables that don't want it are unaffected. */
+		selectOnRowClick?: boolean
 		alignWithSelectable?: boolean
 		errorHandlerMuted?: boolean
 		aiId?: string | undefined
@@ -62,6 +66,7 @@
 		disabled = false,
 		canFavorite = true,
 		isSelectable = false,
+		selectOnRowClick = false,
 		alignWithSelectable = false,
 		errorHandlerMuted = false,
 		aiId = undefined,
@@ -92,6 +97,32 @@
 			rowEl?.scrollIntoView({ block: 'nearest' })
 		}
 	})
+
+	const clickToSelect = $derived(selectOnRowClick && isSelectable && !disabled)
+
+	// Interactive children that handle their own activation — selecting the row on
+	// top of them would double-fire (mouse) or hijack their keyboard activation.
+	function fromInteractiveChild(e: Event): boolean {
+		return !!(e.target as HTMLElement | null)?.closest('a, button, input, [data-row-actions]')
+	}
+
+	function handleRowClick(e: MouseEvent) {
+		if (!clickToSelect) return
+		// Don't double-toggle when the click originated from an interactive child
+		// (the checkbox itself, action buttons, or the title link).
+		if (fromInteractiveChild(e)) return
+		onSelect?.(e as unknown as Event & { currentTarget: EventTarget & HTMLInputElement })
+	}
+
+	function handleRowKeydown(e: KeyboardEvent) {
+		if (!clickToSelect) return
+		if (e.key !== 'Enter' && e.key !== ' ') return
+		// Same guard as the click path: activating a child (checkbox / action button
+		// / title link) via Enter/Space must not also toggle the row's selection.
+		if (fromInteractiveChild(e)) return
+		e.preventDefault()
+		onSelect?.(e as unknown as Event & { currentTarget: EventTarget & HTMLInputElement })
+	}
 </script>
 
 {#if href}
@@ -112,9 +143,14 @@
 		'w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-3 border-b last:border-b-0',
 		depth > 0 ? '!rounded-none' : '',
 		disabled ? 'opacity-25' : 'hover:bg-surface-hover',
+		clickToSelect ? 'cursor-pointer select-none' : '',
 		selected ? 'bg-surface-accent-selected' : keyboardSelected ? 'bg-gray-200 dark:bg-gray-700' : ''
 	)}
 	style={depth > 0 ? `padding-left: ${depth * 32}px;` : ''}
+	role={clickToSelect ? 'button' : undefined}
+	tabindex={clickToSelect ? 0 : undefined}
+	onclick={handleRowClick}
+	onkeydown={clickToSelect ? handleRowKeydown : undefined}
 >
 	{#if isSelectable}
 		<input type="checkbox" checked={selected} onchange={onSelect} class="rounded max-w-4 w-full" />
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
index 8121ca8b70..63f7a42453 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
@@ -69,6 +69,9 @@
 		onNavigate?: (item: import('$lib/components/workspacePicker').WorkspaceItem) => void
 		/** Fired after a successful deploy; the session preview reloads on it. */
 		onDeploy?: (e: { path: string }) => void
+		/** Fired after a successful server-draft save; the session refreshes its
+		 * draft-bar count on it (parity with the script/flow editors). */
+		onSaveDraft?: (e: { path: string }) => void
 		/** Initial collapsed state for the file/runnable sidebar. The user's
 		 * toggled preference is persisted under `sidebarStorageKey`; this prop
 		 * only seeds the very first open. */
@@ -101,6 +104,7 @@
 		diffDrawer = undefined,
 		onNavigate,
 		onDeploy = undefined,
+		onSaveDraft = undefined,
 		defaultSidebarCollapsed = false,
 		sidebarStorageKey = 'raw-app-sidebar-collapsed',
 		liveEditorDraftStoragePath = undefined,
@@ -1371,6 +1375,7 @@
 		{getBundle}
 		{onNavigate}
 		{onDeploy}
+		{onSaveDraft}
 		canUndo={historyManager.canUndo}
 		canRedo={historyManager.canRedo}
 		onUndo={handleUndo}
@@ -1637,8 +1642,9 @@
 											title="Build failed"
 											class="relative before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-surface before:content-['']"
 										>
-											<pre
-												class="overflow-auto whitespace-pre-wrap text-xs max-h-60">{buildError}</pre>
+											<pre class="overflow-auto whitespace-pre-wrap text-xs max-h-60"
+												>{buildError}</pre
+											>
 										</Alert>
 									</div>
 								{/if}
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
index dedb7b5d11..46dec152f7 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
@@ -136,6 +136,9 @@
 		liveEditorDraftStoragePath?: string
 		// Fired after a successful deploy; lets the session preview reload.
 		onDeploy?: (e: { path: string }) => void
+		// Fired after a successful server-draft save; lets the session refresh the
+		// draft-bar count (the script/flow editors do the same on save-draft).
+		onSaveDraft?: (e: { path: string }) => void
 	}
 
 	let {
@@ -162,7 +165,8 @@
 		onToggleSidebar = undefined,
 		onNavigate = undefined,
 		liveEditorDraftStoragePath = undefined,
-		onDeploy = undefined
+		onDeploy = undefined,
+		onSaveDraft = undefined
 	}: Props = $props()
 
 	let newEditedPath = $state(
@@ -517,6 +521,8 @@
 			// a future "+ App" click opens on a clean slate.
 			if (!inSessionPane) UserDraft.remove('raw_app', appPath)
 			dispatch('savedNewAppPath', newEditedPath)
+			sendUserToast('Draft saved')
+			onSaveDraft?.({ path: newEditedPath })
 		} catch (e) {
 			sendUserToast(`Error saving initial draft: ${e.body ?? e.message}`, true)
 		}
@@ -529,8 +535,15 @@
 			return
 		}
 		if (newApp) {
-			// initial draft
-			draftDrawerOpen = true
+			if (appPath === '') {
+				// Standalone "+ App" with no path chosen yet — pick one via the drawer.
+				draftDrawerOpen = true
+				return
+			}
+			// Path already known (e.g. an AI-created raw app in the session preview).
+			// The path-picker drawer is gated on `appPath == ''`, so opening it here
+			// renders nothing — save the initial draft directly instead.
+			await saveInitialDraft()
 			return
 		}
 		if (!savedApp) {
@@ -621,6 +634,7 @@
 			if (newApp || savedApp.draft_only) {
 				dispatch('savedNewAppPath', newEditedPath || path)
 			}
+			onSaveDraft?.({ path: newEditedPath || path })
 		} catch (e) {
 			loading.saveDraft = false
 			throw e
diff --git a/frontend/src/lib/components/sessions/DraftDiffDrawer.svelte b/frontend/src/lib/components/sessions/DraftDiffDrawer.svelte
new file mode 100644
index 0000000000..9fa83be7fc
--- /dev/null
+++ b/frontend/src/lib/components/sessions/DraftDiffDrawer.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import WorkspaceDiffDrawer, { type DiffRow } from './WorkspaceDiffDrawer.svelte'
+	import { Pencil } from 'lucide-svelte'
+	import { type WorkspaceItemDiff } from '$lib/gen'
+	import { userWorkspaces } from '$lib/stores'
+	import { editUrlFor as buildEditUrl } from './forkEditUrl'
+	import { getDraftDiffValues, type DraftKind } from '$lib/utils_draft_deploy'
+	import { getDraftItems } from '$lib/workspaceDrafts.svelte'
+
+	// Thin wrapper: supplies the deployed ↔ draft data source (server `draft`
+	// table, same as the compare page) to the generic WorkspaceDiffDrawer.
+	// Read-only, mirroring ForkDiffDrawer; deploy/discard live on the Review page.
+	let { workspaceId }: { workspaceId: string } = $props()
+
+	let inner: WorkspaceDiffDrawer | undefined = $state(undefined)
+	let rows: DiffRow[] = $state([])
+	let loading = $state(false)
+	let error: string | undefined = $state(undefined)
+	// draft_only per item — drives the "added" rendering (empty before).
+	let draftOnlyByKey: Record<string, boolean> = $state({})
+
+	const ws = $derived($userWorkspaces.find((w) => w.id === workspaceId))
+
+	export function open() {
+		void fetchDrafts()
+		inner?.open()
+	}
+
+	async function fetchDrafts() {
+		loading = true
+		error = undefined
+		try {
+			// One source of truth (Workspace Drafts) — same list the compare page and
+			// the count use.
+			const items = await getDraftItems(workspaceId)
+			const donly: Record<string, boolean> = {}
+			rows = items.map((it) => {
+				// Raw apps must surface as `raw_app` so the row's edit link points at the
+				// raw-app editor (mirrors CompareDrafts); `getDraftItems` carries the flag.
+				const kind = it.raw_app ? 'raw_app' : it.kind
+				donly[`${kind}/${it.path}`] = it.draft_only
+				return { kind, path: it.path, status: it.draft_only ? 'added' : 'modified' }
+			})
+			draftOnlyByKey = donly
+		} catch (e) {
+			console.error('Draft diff: list failed', e)
+			error = `Failed to load drafts: ${e}`
+			rows = []
+		} finally {
+			loading = false
+		}
+	}
+
+	async function loadValues(d: DiffRow): Promise<{ before: unknown; after: unknown }> {
+		const draftOnly = draftOnlyByKey[`${d.kind}/${d.path}`] ?? false
+		// getDraftDiffValues works on the draft_type kind ('app' for raw apps too).
+		const kind: DraftKind = d.kind === 'raw_app' ? 'app' : (d.kind as DraftKind)
+		const { deployed, draft } = await getDraftDiffValues(kind, d.path, workspaceId, draftOnly)
+		// draft_only items have never been deployed → render as "added" (empty
+		// before), matching how the fork drawer renders added items.
+		return { before: draftOnly ? undefined : deployed, after: draft }
+	}
+</script>
+
+<WorkspaceDiffDrawer
+	bind:this={inner}
+	diffs={rows}
+	{loadValues}
+	{loading}
+	{error}
+	emptyMessage="No drafts in this workspace."
+	title="Drafts"
+	reviewHref={`/forks/compare?workspace_id=${encodeURIComponent(workspaceId)}&mode=draft`}
+	editUrlFor={(d) => buildEditUrl(d as unknown as WorkspaceItemDiff, workspaceId)}
+>
+	{#snippet titleExtra()}
+		<div class="flex items-center gap-2 text-xs text-secondary">
+			<Pencil class="w-3.5 h-3.5 shrink-0" />
+			<span class="font-medium truncate">{ws?.name ?? workspaceId}</span>
+		</div>
+	{/snippet}
+</WorkspaceDiffDrawer>
diff --git a/frontend/src/lib/components/sessions/FlowEditorView.svelte b/frontend/src/lib/components/sessions/FlowEditorView.svelte
index dfa928f08c..9613b4c25a 100644
--- a/frontend/src/lib/components/sessions/FlowEditorView.svelte
+++ b/frontend/src/lib/components/sessions/FlowEditorView.svelte
@@ -5,6 +5,7 @@
 	import type { SessionRuntime } from './sessionRuntime.svelte'
 	import SessionEditorTarget from './SessionEditorTarget.svelte'
 	import { sendUserToast } from '$lib/toast'
+	import { invalidateWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
 
 	let {
 		runtime,
@@ -65,12 +66,18 @@
 			{diffDrawer}
 			{onNavigate}
 			customUi={{ topBar: { aiBuilder: false } }}
-			onSaveDraft={() => runtime.scheduleForkComparisonRefresh()}
+			onSaveDraft={() => {
+				runtime.scheduleForkComparisonRefresh()
+				// Saving a draft adds/keeps a pending draft — refresh the Draft Count.
+				invalidateWorkspaceDrafts(workspaceId)
+			}}
 			onDeploy={() => {
 				// FlowBuilder has no deploy toast and the session stays put, so toast
 				// here, then sync the preview to deployed (pulls the new locks + version_id).
 				sendUserToast('Deployed')
 				runtime.syncPreviewWithDeployed(workspaceId, 'flow', path)
+				// Deploying clears the item's pending draft — refresh the Draft Count.
+				invalidateWorkspaceDrafts(workspaceId)
 			}}
 		/>
 	{/snippet}
diff --git a/frontend/src/lib/components/sessions/ForkDiffDrawer.svelte b/frontend/src/lib/components/sessions/ForkDiffDrawer.svelte
index acfac1f03f..e03fc5a49c 100644
--- a/frontend/src/lib/components/sessions/ForkDiffDrawer.svelte
+++ b/frontend/src/lib/components/sessions/ForkDiffDrawer.svelte
@@ -1,84 +1,71 @@
 <script lang="ts">
-	import { parentFolderKey } from './forkDiffNav'
-	import { Button, Drawer, DrawerContent } from '$lib/components/common'
+	import WorkspaceDiffDrawer, { type DiffRow } from './WorkspaceDiffDrawer.svelte'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
-	import {
-		AlertTriangle,
-		ArrowRight,
-		ChevronDown,
-		ChevronRight,
-		Folder,
-		GitFork,
-		GitMerge,
-		Loader2,
-		Minus,
-		Pencil,
-		Plus,
-		User
-	} from 'lucide-svelte'
-	import { goto } from '$lib/navigation'
-	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
-	import WorkspaceItemRow from '$lib/components/WorkspaceItemRow.svelte'
-	import WorkspaceItemDiffViewer from '$lib/components/WorkspaceItemDiffViewer.svelte'
-	import SearchItems from '$lib/components/SearchItems.svelte'
-	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
-	import { DiffIcon, ExternalLink, SquareSplitHorizontal } from 'lucide-svelte'
+	import { AlertTriangle, ArrowRight, GitFork } from 'lucide-svelte'
 	import { WorkspaceService, type WorkspaceComparison, type WorkspaceItemDiff } from '$lib/gen'
 	import { getItemValue } from '$lib/utils_workspace_deploy'
 	import { userWorkspaces } from '$lib/stores'
 	import { editUrlFor as buildEditUrl } from './forkEditUrl'
 
+	// Thin wrapper: supplies the deployed-parent ↔ deployed-fork data source to
+	// the generic WorkspaceDiffDrawer. Display/behavior unchanged from before.
 	let {
 		forkWorkspaceId,
 		parentWorkspaceId
 	}: { forkWorkspaceId: string; parentWorkspaceId: string } = $props()
 
-	let drawer: Drawer | undefined = $state(undefined)
+	let inner: WorkspaceDiffDrawer | undefined = $state(undefined)
 	let comparison: WorkspaceComparison | undefined = $state(undefined)
 	let loading = $state(false)
 	let error: string | undefined = $state(undefined)
-	let searchQuery = $state('')
-	let diffStyle = $state<'sbs' | 'inline'>('sbs')
-	const inlineDiff = $derived(diffStyle === 'inline')
 
 	const forkWs = $derived($userWorkspaces.find((w) => w.id === forkWorkspaceId))
 	const parentWs = $derived($userWorkspaces.find((w) => w.id === parentWorkspaceId))
 
-	export function open() {
-		drawer?.openDrawer()
-		void fetchComparison()
-		// Pull focus into the filter input so keyboard nav works without an
-		// extra click — drawer transition needs a tick first.
-		setTimeout(() => searchInputEl?.focus(), 50)
+	function statusOf(d: WorkspaceItemDiff): DiffRow['status'] {
+		if (d.exists_in_fork && !d.exists_in_source) return 'added'
+		if (!d.exists_in_fork && d.exists_in_source) return 'removed'
+		if (d.ahead > 0 && d.behind > 0) return 'conflict'
+		return 'modified'
 	}
 
-	function openReview() {
-		goto(`/forks/compare?workspace_id=${encodeURIComponent(forkWorkspaceId)}`)
+	// Keep the original diffs by key so loadValues can honor exists flags
+	// (skip the non-existent side for added/removed items).
+	let diffByKey: Record<string, WorkspaceItemDiff> = $state({})
+
+	const rows = $derived.by<DiffRow[]>(() =>
+		(comparison?.diffs ?? []).map((d) => ({
+			kind: d.kind,
+			path: d.path,
+			status: statusOf(d),
+			ahead: d.ahead,
+			behind: d.behind
+		}))
+	)
+
+	function skipNotice(c: WorkspaceComparison | undefined): string | undefined {
+		return c?.skipped_comparison
+			? 'This fork was created before change tracking was added — diffs are not available.'
+			: undefined
+	}
+	const notice = $derived(skipNotice(comparison))
+
+	export function open() {
+		void fetchComparison()
+		inner?.open()
 	}
 
 	async function fetchComparison() {
 		loading = true
 		error = undefined
-		// Per-item raw diffs are cached for the lifetime of the drawer.
-		// `loadDiffFor` early-returns on cache hit, so without this reset an
-		// edit-then-reopen would show fresh summary/counts but stale expanded
-		// raw content for any item the user had already drilled into.
-		loadedDiffs = {}
-		summaries = {}
 		try {
 			comparison = await WorkspaceService.compareWorkspaces({
 				workspace: parentWorkspaceId,
 				targetWorkspaceId: forkWorkspaceId
 			})
-			// Diffs are expanded by default, so eagerly populate each row's
-			// content. Each loadDiffFor is idempotent and per-item, so
-			// rendering proceeds as values arrive.
-			if (comparison) {
-				for (const d of comparison.diffs) {
-					void loadDiffFor(d)
-				}
-			}
+			diffByKey = Object.fromEntries(
+				(comparison?.diffs ?? []).map((d) => [`${d.kind}/${d.path}`, d])
+			)
 		} catch (e) {
 			console.error('Fork diff: comparison failed', e)
 			error = `Failed to load comparison: ${e}`
@@ -88,645 +75,51 @@
 		}
 	}
 
-	type DiffStatus = 'added' | 'removed' | 'modified' | 'conflict'
-
-	function statusOf(d: WorkspaceItemDiff): DiffStatus {
-		if (d.exists_in_fork && !d.exists_in_source) return 'added'
-		if (!d.exists_in_fork && d.exists_in_source) return 'removed'
-		if (d.ahead > 0 && d.behind > 0) return 'conflict'
-		return 'modified'
-	}
-
-	function itemKey(d: WorkspaceItemDiff): string {
-		return `${d.kind}/${d.path}`
-	}
-
-	// Editor URL for a diff row, scoped to the fork workspace.
-	function editUrlFor(d: WorkspaceItemDiff): string | undefined {
-		return buildEditUrl(d, forkWorkspaceId)
-	}
-
-	const KIND_LABELS: Record<string, string> = {
-		script: 'Script',
-		flow: 'Flow',
-		app: 'App',
-		raw_app: 'Raw app',
-		resource: 'Resource',
-		variable: 'Variable',
-		resource_type: 'Resource type',
-		folder: 'Folder',
-		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'
-	}
-
-	// Lazily-loaded raw values per item, keyed by itemKey. Shaping (content
-	// vs metadata, YAML, lang detection) is owned by WorkspaceItemDiffViewer.
-	type LoadedDiff = {
-		state: 'loading' | 'ready' | 'error'
-		error?: string
-		parentRaw?: unknown
-		forkRaw?: unknown
-	}
-	let loadedDiffs: Record<string, LoadedDiff> = $state({})
-	// Per-item summary, derived from the fetched raw value so the tree on
-	// the left can show summary above the mono path (matches the picker).
-	let summaries: Record<string, string | undefined> = $state({})
-
-	async function loadDiffFor(d: WorkspaceItemDiff) {
-		const key = itemKey(d)
-		if (loadedDiffs[key]) return
-		loadedDiffs[key] = { state: 'loading' }
-
-		try {
-			// Source (parent) — empty for items only in fork. Fork — empty for
-			// items only in source. We swallow per-side errors so an "added"
-			// item still renders cleanly against an empty original.
-			const [parentRaw, forkRaw] = await Promise.all([
-				d.exists_in_source
-					? getItemValue(d.kind, d.path, parentWorkspaceId).catch(() => undefined)
-					: Promise.resolve(undefined),
-				d.exists_in_fork
-					? getItemValue(d.kind, d.path, forkWorkspaceId).catch(() => undefined)
-					: Promise.resolve(undefined)
-			])
-			loadedDiffs[key] = { state: 'ready', parentRaw, forkRaw }
-			// Prefer the fork's summary (the "current" side); fall back to parent.
-			const summary =
-				(forkRaw && typeof forkRaw === 'object' && (forkRaw as any).summary) ||
-				(parentRaw && typeof parentRaw === 'object' && (parentRaw as any).summary) ||
-				undefined
-			if (typeof summary === 'string' && summary.trim().length > 0) {
-				summaries[key] = summary
-			}
-		} catch (e) {
-			console.error('Fork diff: loadDiff failed', d, e)
-			loadedDiffs[key] = {
-				state: 'error',
-				error: String(e)
-			}
-		}
-	}
-
-	function onDetailsToggle(d: WorkspaceItemDiff, e: Event) {
-		const target = e.currentTarget as HTMLDetailsElement | null
-		if (target?.open) {
-			void loadDiffFor(d)
-		}
-	}
-
-	function statusBadgeColor(s: DiffStatus): 'green' | 'red' | 'orange' | 'blue' {
-		if (s === 'added') return 'green'
-		if (s === 'removed') return 'red'
-		if (s === 'conflict') return 'orange'
-		return 'blue'
-	}
-
-	const statusIcons = {
-		added: Plus,
-		removed: Minus,
-		modified: Pencil,
-		conflict: AlertTriangle
-	}
-
-	// File tree built from the diff paths. Top-level rows mirror
-	// WorkspaceItemDrillPicker: `f/foo` and `u/alice` collapse to a single
-	// "scope" row, then deeper segments split per `/`. Leaves carry their
-	// diff entry.
-	type FolderNode = {
-		type: 'folder'
-		name: string
-		fullPath: string
-		isScope: boolean
-		children: TreeNode[]
-	}
-	type FileNode = { type: 'file'; name: string; diff: WorkspaceItemDiff }
-	type TreeNode = FolderNode | FileNode
-
-	function buildTree(diffs: WorkspaceItemDiff[]): FolderNode {
-		const root: FolderNode = {
-			type: 'folder',
-			name: '',
-			fullPath: '',
-			isScope: false,
-			children: []
-		}
-		const folderCache = new Map<string, FolderNode>()
-
-		for (const d of diffs) {
-			const parts = d.path.split('/')
-			if (parts.length < 2) {
-				root.children.push({ type: 'file', name: d.path, diff: d })
-				continue
-			}
-			const scopeKey = parts.slice(0, 2).join('/')
-			let scope = folderCache.get(scopeKey)
-			if (!scope) {
-				scope = {
-					type: 'folder',
-					name: scopeKey,
-					fullPath: scopeKey,
-					isScope: true,
-					children: []
-				}
-				folderCache.set(scopeKey, scope)
-				root.children.push(scope)
-			}
-			if (parts.length === 2) {
-				scope.children.push({ type: 'file', name: scopeKey, diff: d })
-				continue
-			}
-			const rest = parts.slice(2)
-			let parent = scope
-			let folderKey = scopeKey
-			for (let i = 0; i < rest.length - 1; i++) {
-				folderKey = `${folderKey}/${rest[i]}`
-				let folder = folderCache.get(folderKey)
-				if (!folder) {
-					folder = {
-						type: 'folder',
-						name: rest[i],
-						fullPath: folderKey,
-						isScope: false,
-						children: []
-					}
-					folderCache.set(folderKey, folder)
-					parent.children.push(folder)
-				}
-				parent = folder
-			}
-			parent.children.push({ type: 'file', name: rest[rest.length - 1], diff: d })
-		}
-
-		const sortRec = (n: FolderNode) => {
-			n.children.sort((a, b) => {
-				if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
-				return a.name.localeCompare(b.name)
-			})
-			for (const c of n.children) if (c.type === 'folder') sortRec(c)
-		}
-		sortRec(root)
-		return root
-	}
-
-	// Searchable string per diff: path + summary (when loaded) + kind label.
-	// SearchItems' uFuzzy runs fuzzy matching over these. Reads `summaries`
-	// directly so the index re-derives as summaries trickle in from
-	// loadDiffFor.
-	function searchableText(d: WorkspaceItemDiff): string {
-		const parts = [d.path, KIND_LABELS[d.kind] ?? d.kind]
-		const s = summaries[itemKey(d)]
-		if (s) parts.push(s)
-		return parts.join(' ')
-	}
-	let searchedDiffs: (WorkspaceItemDiff & { marked?: string })[] | undefined = $state(undefined)
-
-	// Empty query bypasses SearchItems entirely so we don't wait a tick for
-	// the async filter to run after open.
-	const filteredDiffs = $derived.by(() => {
-		const c = comparison
-		if (!c) return [] as WorkspaceItemDiff[]
-		const q = searchQuery.trim()
-		if (!q) return c.diffs
-		return (searchedDiffs ?? []) as WorkspaceItemDiff[]
-	})
-
-	const tree = $derived.by(() => {
-		const c = comparison
-		return c ? buildTree(filteredDiffs) : undefined
-	})
-
-	function rowId(d: WorkspaceItemDiff): string {
-		return `fork-diff-${itemKey(d)}`
-	}
-
-	function scrollToDiff(d: WorkspaceItemDiff) {
-		const el = document.getElementById(rowId(d)) as HTMLDetailsElement | null
-		if (!el) return
-		el.open = true
-		el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-	}
-
-	// ── Keyboard nav (matches WorkspaceItemDrillPicker) ─────────────────────
-	// Per-folder open/closed state. Defaults to open; user toggles via the
-	// <details> summary or via Enter when a folder row is highlighted.
-	let folderOpen: Record<string, boolean> = $state({})
-	function isFolderOpen(key: string): boolean {
-		return folderOpen[key] ?? true
-	}
-	function folderKey(node: FolderNode): string {
-		return `folder:${node.fullPath}`
-	}
-
-	type NavEntry =
-		| { type: 'folder'; key: string; node: FolderNode }
-		| { type: 'file'; key: string; diff: WorkspaceItemDiff }
-
-	function flattenVisible(node: FolderNode): NavEntry[] {
-		const out: NavEntry[] = []
-		const walk = (n: TreeNode) => {
-			if (n.type === 'file') {
-				out.push({ type: 'file', key: itemKey(n.diff), diff: n.diff })
-				return
-			}
-			const fkey = folderKey(n)
-			out.push({ type: 'folder', key: fkey, node: n })
-			if (isFolderOpen(fkey)) for (const c of n.children) walk(c)
-		}
-		for (const c of node.children) walk(c)
-		return out
-	}
-	const navEntries = $derived(tree ? flattenVisible(tree) : [])
-	const navKeys = $derived(navEntries.map((e) => e.key))
-	const entryByKey = $derived(new Map(navEntries.map((e) => [e.key, e])))
-
-	let highlightedKey: string | undefined = $state(undefined)
-	let mouseActive = $state(false)
-	let searchInputEl: HTMLInputElement | undefined = $state()
-	let sidebarRoot: HTMLElement | undefined = $state()
-
-	$effect(() => {
-		if (navKeys.length === 0) return
-		if (!highlightedKey || !navKeys.includes(highlightedKey)) {
-			highlightedKey = navKeys[0]
-		}
-	})
-
-	function scrollHighlightIntoView() {
-		if (!sidebarRoot || !highlightedKey) return
-		const el = sidebarRoot.querySelector<HTMLElement>(
-			`[data-nav-key="${CSS.escape(highlightedKey)}"]`
-		)
-		el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-	}
-
-	function moveHighlight(delta: 1 | -1) {
-		if (navKeys.length === 0) return
-		const cur = navKeys.indexOf(highlightedKey ?? '')
-		const next = cur < 0 ? 0 : (cur + delta + navKeys.length) % navKeys.length
-		highlightedKey = navKeys[next]
-		mouseActive = false
-		requestAnimationFrame(scrollHighlightIntoView)
-	}
-
-	function setHoverHighlight(key: string) {
-		// Same defense as the picker: ignore until the user actually moves the
-		// mouse, so a cursor parked over a row doesn't clobber the keyboard
-		// highlight when the layout shifts.
-		if (mouseActive) highlightedKey = key
-	}
-
-	function activateHighlighted() {
-		if (!highlightedKey) return
-		const entry = entryByKey.get(highlightedKey)
-		if (!entry) return
-		if (entry.type === 'file') {
-			scrollToDiff(entry.diff)
-		} else {
-			folderOpen[entry.key] = !isFolderOpen(entry.key)
-		}
-	}
-
-	// The folder containing an entry, as a folder key (or undefined if the
-	// entry is at the top scope and has no parent folder). Pure logic lives in
-	// forkDiffNav.parentFolderKey (unit-tested).
-	function parentFolderKeyFor(entry: NavEntry): string | undefined {
-		const path = entry.type === 'folder' ? entry.node.fullPath : entry.diff.path
-		return parentFolderKey(entry.type, path)
-	}
-
-	function firstChildKey(node: FolderNode): string | undefined {
-		const c = node.children[0]
-		if (!c) return undefined
-		return c.type === 'folder' ? folderKey(c) : itemKey(c.diff)
-	}
-
-	function selectKey(key: string) {
-		highlightedKey = key
-		mouseActive = false
-		requestAnimationFrame(scrollHighlightIntoView)
-	}
-
-	function handleSearchKeydown(e: KeyboardEvent) {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault()
-			moveHighlight(1)
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault()
-			moveHighlight(-1)
-		} else if (e.key === 'Enter') {
-			e.preventDefault()
-			activateHighlighted()
-		} else if (e.key === 'ArrowRight') {
-			// On a closed folder: open it. On an open folder: jump to its first
-			// child (folder or file). On a file: no-op.
-			const entry = highlightedKey ? entryByKey.get(highlightedKey) : undefined
-			if (!entry || entry.type !== 'folder') return
-			if (!isFolderOpen(entry.key)) {
-				e.preventDefault()
-				folderOpen[entry.key] = true
-				return
-			}
-			const child = firstChildKey(entry.node)
-			if (child) {
-				e.preventDefault()
-				selectKey(child)
-			}
-		} else if (e.key === 'ArrowLeft') {
-			// On an open folder: collapse it. On a closed folder (or a file):
-			// jump to the parent folder.
-			const entry = highlightedKey ? entryByKey.get(highlightedKey) : undefined
-			if (!entry) return
-			if (entry.type === 'folder' && isFolderOpen(entry.key)) {
-				e.preventDefault()
-				folderOpen[entry.key] = false
-				return
-			}
-			const parent = parentFolderKeyFor(entry)
-			if (parent && entryByKey.has(parent)) {
-				e.preventDefault()
-				selectKey(parent)
-			}
-		}
+	async function loadValues(d: DiffRow): Promise<{ before: unknown; after: unknown }> {
+		const od = diffByKey[`${d.kind}/${d.path}`]
+		const existsSource = od ? od.exists_in_source !== false : true
+		const existsFork = od ? od.exists_in_fork !== false : true
+		const [before, after] = await Promise.all([
+			existsSource
+				? getItemValue(d.kind as any, d.path, parentWorkspaceId).catch(() => undefined)
+				: Promise.resolve(undefined),
+			existsFork
+				? getItemValue(d.kind as any, d.path, forkWorkspaceId).catch(() => undefined)
+				: Promise.resolve(undefined)
+		])
+		return { before, after }
 	}
 </script>
 
-<SearchItems
-	filter={searchQuery}
-	items={comparison?.diffs ?? []}
-	bind:filteredItems={searchedDiffs}
-	f={(d: WorkspaceItemDiff) => searchableText(d)}
-/>
-
-{#snippet renderTreeNode(node: TreeNode, depth: number)}
-	{#if node.type === 'folder'}
-		{@const isUserScope = node.isScope && node.name.startsWith('u/')}
-		{@const fkey = folderKey(node)}
-		{@const open = isFolderOpen(fkey)}
-		{@const isHl = fkey === highlightedKey}
-		<details
-			{open}
-			ontoggle={(e) => (folderOpen[fkey] = (e.currentTarget as HTMLDetailsElement).open)}
-			class="select-none"
-		>
-			<summary
-				role="option"
-				aria-selected={isHl}
-				data-nav-key={fkey}
-				onmouseenter={() => setHoverHighlight(fkey)}
-				class="flex items-center gap-1.5 px-3 py-1 cursor-pointer text-xs font-medium font-mono text-emphasis hover:bg-surface-hover list-none [&::-webkit-details-marker]:hidden tree-summary {isHl
-					? 'bg-surface-hover'
-					: ''}"
-				style="padding-left: {depth * 12 + 8}px"
-			>
-				<ChevronDown class="w-3 h-3 shrink-0 text-tertiary tree-chevron-open" />
-				<ChevronRight class="w-3 h-3 shrink-0 text-tertiary tree-chevron-closed" />
-				{#if isUserScope}
-					<User size={12} class="shrink-0 text-tertiary" />
-				{:else}
-					<Folder size={12} class="shrink-0 text-tertiary" />
-				{/if}
-				<span class="truncate" title={node.name}>{node.name}</span>
-			</summary>
-			<div>
-				{#each node.children as child}
-					{@render renderTreeNode(child, depth + 1)}
-				{/each}
-			</div>
-		</details>
-	{:else}
-		{@const status = statusOf(node.diff)}
-		{@const key = itemKey(node.diff)}
-		<WorkspaceItemRow
-			kind={node.diff.kind}
-			summary={summaries[key]}
-			secondary={node.name}
-			highlighted={key === highlightedKey}
-			navKey={key}
-			indent={depth * 12 + 20}
-			title={node.diff.path}
-			onclick={() => {
-				highlightedKey = key
-				scrollToDiff(node.diff)
-			}}
-			onmouseenter={() => setHoverHighlight(key)}
-		>
-			{#snippet extras()}
-				<span
-					class="w-1.5 h-1.5 rounded-full shrink-0 {status === 'added'
-						? 'bg-green-500'
-						: status === 'removed'
-							? 'bg-red-500'
-							: status === 'conflict'
-								? 'bg-orange-500'
-								: 'bg-blue-500'}"
-				></span>
-			{/snippet}
-		</WorkspaceItemRow>
-	{/if}
-{/snippet}
-
-<Drawer bind:this={drawer} size="1200px">
-	<DrawerContent
-		title="Fork changes"
-		on:close={() => drawer?.closeDrawer()}
-		documentationLink={undefined}
-		noPadding
-		overflow_y={false}
-	>
-		{#snippet titleExtra()}
-			<div class="flex items-center gap-2 text-xs text-secondary">
-				<GitFork class="w-3.5 h-3.5 shrink-0" />
-				<span class="font-medium truncate">{forkWs?.name ?? forkWorkspaceId}</span>
-				<ArrowRight class="w-3 h-3 shrink-0 text-tertiary" />
-				<span class="font-medium truncate">{parentWs?.name ?? parentWorkspaceId}</span>
-				{#if comparison}
-					<Badge color="transparent" class="ml-2">
-						{comparison.summary.total_diffs} item{comparison.summary.total_diffs !== 1 ? 's' : ''}
+<WorkspaceDiffDrawer
+	bind:this={inner}
+	diffs={rows}
+	{loadValues}
+	{loading}
+	{error}
+	{notice}
+	emptyMessage="No changes between this fork and its parent."
+	title="Fork changes"
+	reviewHref={`/forks/compare?workspace_id=${encodeURIComponent(forkWorkspaceId)}`}
+	editUrlFor={(d) => buildEditUrl(d as unknown as WorkspaceItemDiff, forkWorkspaceId)}
+>
+	{#snippet titleExtra()}
+		<div class="flex items-center gap-2 text-xs text-secondary">
+			<GitFork class="w-3.5 h-3.5 shrink-0" />
+			<span class="font-medium truncate">{forkWs?.name ?? forkWorkspaceId}</span>
+			<ArrowRight class="w-3 h-3 shrink-0 text-tertiary" />
+			<span class="font-medium truncate">{parentWs?.name ?? parentWorkspaceId}</span>
+			{#if comparison}
+				<Badge color="transparent" class="ml-2">
+					{comparison.summary.total_diffs} item{comparison.summary.total_diffs !== 1 ? 's' : ''}
+				</Badge>
+				{#if comparison.summary.conflicts > 0}
+					<Badge color="orange">
+						<AlertTriangle class="w-3 h-3 inline mr-1" />
+						{comparison.summary.conflicts} conflict{comparison.summary.conflicts !== 1 ? 's' : ''}
 					</Badge>
-					{#if comparison.summary.conflicts > 0}
-						<Badge color="orange">
-							<AlertTriangle class="w-3 h-3 inline mr-1" />
-							{comparison.summary.conflicts} conflict{comparison.summary.conflicts !== 1 ? 's' : ''}
-						</Badge>
-					{/if}
 				{/if}
-			</div>
-		{/snippet}
-		{#snippet actions()}
-			<ToggleButtonGroup bind:selected={diffStyle} noWFull>
-				{#snippet children({ item })}
-					<ToggleButton
-						value="sbs"
-						label="Side-by-side"
-						icon={SquareSplitHorizontal}
-						tooltip="Side-by-side diff"
-						iconOnly
-						{item}
-					/>
-					<ToggleButton
-						value="inline"
-						label="Unified"
-						icon={DiffIcon}
-						tooltip="Unified diff"
-						iconOnly
-						{item}
-					/>
-				{/snippet}
-			</ToggleButtonGroup>
-			<Button variant="accent" unifiedSize="sm" startIcon={{ icon: GitMerge }} onclick={openReview}>
-				Review
-			</Button>
-		{/snippet}
-		<div class="flex flex-row h-full min-h-0">
-			{#if comparison && comparison.diffs.length > 0}
-				<aside
-					bind:this={sidebarRoot}
-					onmousemove={() => (mouseActive = true)}
-					class="flex-none w-56 border-r border-light flex flex-col min-h-0"
-				>
-					<div class="px-3 pt-3 pb-2 shrink-0">
-						<input
-							bind:this={searchInputEl}
-							type="search"
-							bind:value={searchQuery}
-							placeholder="Filter files..."
-							onkeydown={handleSearchKeydown}
-							class="w-full text-xs px-2 py-1 rounded border border-light bg-surface focus:outline-none focus:border-accent"
-						/>
-					</div>
-					<div class="flex-1 min-h-0 overflow-y-auto pb-3 flex flex-col gap-1">
-						{#if tree && tree.children.length > 0}
-							{#each tree.children as child}
-								{@render renderTreeNode(child, 0)}
-							{/each}
-						{:else}
-							<div class="text-2xs text-tertiary px-3 py-2">No matches</div>
-						{/if}
-					</div>
-				</aside>
 			{/if}
-			<main class="flex-1 min-w-0 overflow-y-auto">
-				<div class="px-3 pt-3 pb-4 flex flex-col gap-3">
-					{#if loading && !comparison}
-						<div class="flex items-center gap-2 text-sm text-secondary py-8 self-center">
-							<Loader2 class="w-4 h-4 animate-spin" />
-							Loading comparison...
-						</div>
-					{:else if error}
-						<div class="text-sm text-red-600 dark:text-red-400 py-4">{error}</div>
-					{:else if comparison?.skipped_comparison}
-						<div class="text-sm text-secondary py-4">
-							This fork was created before change tracking was added — diffs are not available.
-						</div>
-					{:else if comparison && comparison.diffs.length === 0}
-						<div class="text-sm text-secondary py-4"
-							>No changes between this fork and its parent.</div
-						>
-					{:else if comparison && filteredDiffs.length === 0}
-						<div class="text-sm text-secondary py-4">No files match "{searchQuery}".</div>
-					{:else if comparison}
-						<div class="flex flex-col gap-2">
-							{#each filteredDiffs as d (itemKey(d))}
-								{@const key = itemKey(d)}
-								{@const status = statusOf(d)}
-								{@const StatusIcon = statusIcons[status]}
-								{@const loaded = loadedDiffs[key]}
-								{@const editUrl = editUrlFor(d)}
-								<details
-									open
-									id={rowId(d)}
-									class="border border-light rounded-md bg-surface scroll-mt-2"
-									ontoggle={(e) => onDetailsToggle(d, e)}
-								>
-									<summary
-										class="sticky top-0 z-30 bg-surface flex items-center gap-2 px-3 py-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden border-b border-transparent rounded-md relative before:content-[''] before:absolute before:inset-0 before:bg-surface-hover before:opacity-0 before:pointer-events-none before:transition-opacity hover:before:opacity-100"
-									>
-										<ChevronDown
-											class="w-3.5 h-3.5 shrink-0 text-tertiary transition-transform chevron"
-										/>
-										<RowIcon kind={d.kind} size={14} />
-										<div class="min-w-0 flex-1">
-											{#if editUrl}
-												<a
-													href={editUrl}
-													target="_blank"
-													rel="noopener noreferrer"
-													title={d.path}
-													onclick={(e) => e.stopPropagation()}
-													class="group inline-flex items-center gap-1 max-w-full text-xs text-primary font-mono truncate hover:underline"
-												>
-													<span class="truncate">{d.path}</span>
-													<ExternalLink
-														class="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-60 transition-opacity"
-													/>
-												</a>
-											{:else}
-												<div class="text-xs text-primary font-mono truncate" title={d.path}>
-													{d.path}
-												</div>
-											{/if}
-										</div>
-										<div class="shrink-0 flex items-center gap-2">
-											{#if d.ahead > 0}
-												<span class="text-2xs text-secondary">{d.ahead} ahead</span>
-											{/if}
-											{#if d.behind > 0}
-												<span class="text-2xs text-secondary">{d.behind} behind</span>
-											{/if}
-											<Badge color={statusBadgeColor(status)}>
-												<StatusIcon class="w-3 h-3 inline mr-0.5" />
-												{status}
-											</Badge>
-										</div>
-									</summary>
-									<div
-										class="border-t border-light bg-surface-tertiary rounded-b-md overflow-hidden"
-									>
-										{#if !loaded || loaded.state === 'loading'}
-											<div class="flex items-center gap-2 text-xs text-secondary p-3">
-												<Loader2 class="w-3.5 h-3.5 animate-spin" />
-												Loading diff…
-											</div>
-										{:else if loaded.state === 'error'}
-											<div class="text-xs text-red-600 dark:text-red-400">{loaded.error}</div>
-										{:else if loaded.state === 'ready'}
-											<WorkspaceItemDiffViewer
-												kind={d.kind}
-												originalRaw={loaded.parentRaw}
-												currentRaw={loaded.forkRaw}
-												{inlineDiff}
-											/>
-										{/if}
-									</div>
-								</details>
-							{/each}
-						</div>
-					{/if}
-				</div></main
-			></div
-		>
-	</DrawerContent>
-</Drawer>
-
-<style>
-	/* Diff rows use a ChevronDown; rotate it back when collapsed. */
-	details:not([open]) :global(.chevron) {
-		transform: rotate(-90deg);
-	}
-	/* Tree folder rows: swap chevrons based on the folder's open state. */
-	details:not([open]) > .tree-summary :global(.tree-chevron-open) {
-		display: none;
-	}
-	details[open] > .tree-summary :global(.tree-chevron-closed) {
-		display: none;
-	}
-</style>
+		</div>
+	{/snippet}
+</WorkspaceDiffDrawer>
diff --git a/frontend/src/lib/components/sessions/RawAppEditorView.svelte b/frontend/src/lib/components/sessions/RawAppEditorView.svelte
index 9ed75f9702..683d32a31f 100644
--- a/frontend/src/lib/components/sessions/RawAppEditorView.svelte
+++ b/frontend/src/lib/components/sessions/RawAppEditorView.svelte
@@ -4,6 +4,7 @@
 	import type { WorkspaceItem } from '$lib/components/workspacePicker'
 	import type { SessionRuntime } from './sessionRuntime.svelte'
 	import SessionEditorTarget from './SessionEditorTarget.svelte'
+	import { invalidateWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
 
 	let {
 		runtime,
@@ -62,6 +63,13 @@
 				onDeploy={(e) => {
 					// Sync the preview to deployed (raw apps deploy only from this editor).
 					runtime.syncPreviewWithDeployed(workspaceId, 'raw_app', e.path)
+					// Deploying clears the item's pending draft — refresh the Draft Count.
+					invalidateWorkspaceDrafts(workspaceId)
+				}}
+				onSaveDraft={() => {
+					// Saving a server draft adds/updates a draft — refresh the Draft Count so
+					// the session draft bar appears/updates immediately (parity with script/flow).
+					invalidateWorkspaceDrafts(workspaceId)
 				}}
 				defaultSidebarCollapsed
 				sidebarStorageKey="raw-app-sidebar-collapsed-preview"
diff --git a/frontend/src/lib/components/sessions/ScriptEditorView.svelte b/frontend/src/lib/components/sessions/ScriptEditorView.svelte
index bebd6d3cce..2e6fc4210f 100644
--- a/frontend/src/lib/components/sessions/ScriptEditorView.svelte
+++ b/frontend/src/lib/components/sessions/ScriptEditorView.svelte
@@ -7,6 +7,7 @@
 	import { UserDraft } from '$lib/userDraft.svelte'
 	import SessionEditorTarget from './SessionEditorTarget.svelte'
 	import { sendUserToast } from '$lib/toast'
+	import { invalidateWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
 
 	let {
 		runtime,
@@ -45,6 +46,9 @@
 			try {
 				await DraftService.deleteDraft({ workspace: workspaceId, kind: 'script', path: saved.path })
 				saved.draft = undefined
+				// Server draft gone — refresh the session draft-bar count immediately
+				// instead of waiting for an AI turn-end / tab-refocus signal.
+				invalidateWorkspaceDrafts(workspaceId)
 			} catch (e: any) {
 				sendUserToast(`Could not delete draft: ${e?.body ?? e}`, true)
 				return
@@ -103,6 +107,8 @@
 				{initialTestPanelCollapsed}
 				onSaveDraft={async (e) => {
 					runtime.scheduleForkComparisonRefresh()
+					// Saving a draft adds/keeps a pending draft — refresh the Draft Count.
+					invalidateWorkspaceDrafts(workspaceId)
 					// Re-pin parent_hash to the latest version so the next Deploy's conflict
 					// check (which runs before deploy, while the session stays mounted)
 					// doesn't misfire.
@@ -123,6 +129,9 @@
 					// preview to the deployed version.
 					sendUserToast('Deployed')
 					runtime.syncPreviewWithDeployed(workspaceId, 'script', e.path)
+					// Deploying clears the item's pending draft — refresh the workspace
+					// Draft Count so the session bar / compare page drop it immediately.
+					invalidateWorkspaceDrafts(workspaceId)
 				}}
 			/>
 		{/if}
diff --git a/frontend/src/lib/components/sessions/SessionDiffButton.svelte b/frontend/src/lib/components/sessions/SessionDiffButton.svelte
new file mode 100644
index 0000000000..77dd16d156
--- /dev/null
+++ b/frontend/src/lib/components/sessions/SessionDiffButton.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Button } from '$lib/components/common'
+	import { DiffIcon } from 'lucide-svelte'
+
+	// Shared diff-drawer trigger used by both the fork bar and the draft bar: a
+	// default button showing the ± diff icon and the item count.
+	let {
+		count,
+		onclick,
+		title = 'Open diff',
+		disabled = false
+	}: { count: number; onclick: () => void; title?: string; disabled?: boolean } = $props()
+</script>
+
+<Button
+	variant="default"
+	unifiedSize="xs"
+	startIcon={{ icon: DiffIcon }}
+	{disabled}
+	{title}
+	{onclick}
+>
+	{count}
+</Button>
diff --git a/frontend/src/lib/components/sessions/SessionDraftBar.svelte b/frontend/src/lib/components/sessions/SessionDraftBar.svelte
new file mode 100644
index 0000000000..dcc5640f2c
--- /dev/null
+++ b/frontend/src/lib/components/sessions/SessionDraftBar.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { Pencil } from 'lucide-svelte'
+	import { Button } from '$lib/components/common'
+	import { goto } from '$lib/navigation'
+	import { sessionState, type Session } from './sessionState.svelte'
+	import { getRuntime } from './sessionRuntime.svelte'
+	import DraftDiffDrawer from './DraftDiffDrawer.svelte'
+	import SessionDiffButton from './SessionDiffButton.svelte'
+	import { useWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
+
+	let { session }: { session: Session } = $props()
+
+	// Only meaningful once the session committed to a workspace (post first send).
+	// The Draft Count comes from the shared Workspace Drafts resource: it fetches
+	// on mount and whenever a Server-Draft mutation invalidates the workspace, so
+	// the count is fresh on every (re)open with no per-session caching.
+	const committedId = $derived(session.workspace_id)
+	const drafts = useWorkspaceDrafts(() => committedId)
+	const count = $derived(drafts.count)
+
+	// Deploys/saves from the Preview editor invalidate the workspace directly
+	// (ScriptEditorView / FlowEditorView / RawAppEditorView call
+	// invalidateWorkspaceDrafts). The chat itself can also deploy items, but
+	// those happen server-side and the frontend never sees the individual calls —
+	// so refresh on the same coarse signals the fork bar uses: the AI turn ending
+	// and the tab regaining visibility.
+	const runtime = $derived(getRuntime(session.id))
+
+	let wasLoading = $state(false)
+	$effect(() => {
+		const isLoading = runtime?.manager.loading ?? false
+		if (wasLoading && !isLoading) drafts.refresh()
+		wasLoading = isLoading
+	})
+
+	$effect(() => {
+		if (!committedId) return
+		function onVisibilityChange() {
+			if (document.visibilityState !== 'visible') return
+			if (sessionState.currentSessionId !== session.id) return
+			drafts.refresh()
+		}
+		document.addEventListener('visibilitychange', onVisibilityChange)
+		return () => document.removeEventListener('visibilitychange', onVisibilityChange)
+	})
+
+	let drawer: DraftDiffDrawer | undefined = $state(undefined)
+
+	function openReview() {
+		if (!committedId) return
+		goto(`/forks/compare?workspace_id=${encodeURIComponent(committedId)}&mode=draft`)
+	}
+</script>
+
+{#if committedId && count > 0}
+	<div
+		class="flex flex-row items-center justify-between gap-2 py-2 px-3 text-xs border rounded-md bg-surface-tertiary"
+	>
+		<div class="flex items-center gap-1.5 min-w-0">
+			<span class="inline-flex shrink-0"><Pencil class="w-3.5 h-3.5 text-secondary" /></span>
+			<span class="truncate text-secondary">{count} draft{count === 1 ? '' : 's'}</span>
+		</div>
+		<div class="flex items-center gap-1 shrink-0">
+			<SessionDiffButton {count} onclick={() => drawer?.open()} />
+			<Button variant="default" unifiedSize="xs" onclick={openReview}>Review</Button>
+		</div>
+	</div>
+
+	<DraftDiffDrawer bind:this={drawer} workspaceId={committedId} />
+{/if}
diff --git a/frontend/src/lib/components/sessions/SessionForkBar.svelte b/frontend/src/lib/components/sessions/SessionForkBar.svelte
index 22b41a7a00..b1e74b43eb 100644
--- a/frontend/src/lib/components/sessions/SessionForkBar.svelte
+++ b/frontend/src/lib/components/sessions/SessionForkBar.svelte
@@ -2,10 +2,8 @@
 	import {
 		Archive,
 		ArrowRight,
-		Diff,
 		GitCompareArrows,
 		GitFork,
-		GitMerge,
 		GitPullRequestArrow,
 		GitPullRequestClosed,
 		MoveRight,
@@ -20,6 +18,7 @@
 	import { deriveForkStatus, sessionState, type Session } from './sessionState.svelte'
 	import { getRuntime } from './sessionRuntime.svelte'
 	import ForkDiffDrawer from './ForkDiffDrawer.svelte'
+	import SessionDiffButton from './SessionDiffButton.svelte'
 
 	let {
 		session,
@@ -189,24 +188,12 @@
 			</span>
 		</div>
 		<div class="flex items-center gap-1 shrink-0">
-			<Button
-				variant="default"
-				unifiedSize="xs"
-				startIcon={{ icon: Diff }}
+			<SessionDiffButton
+				count={totalDiffs}
 				disabled={totalDiffs === 0}
-				title="{totalDiffs} modified item{totalDiffs === 1 ? '' : 's'}"
 				onclick={() => diffDrawer?.open()}
-			>
-				{totalDiffs}
-			</Button>
-			<Button
-				variant="default"
-				unifiedSize="xs"
-				startIcon={{ icon: GitMerge }}
-				onclick={openReview}
-			>
-				Review
-			</Button>
+			/>
+			<Button variant="default" unifiedSize="xs" onclick={openReview}>Review</Button>
 		</div>
 	</div>
 
diff --git a/frontend/src/lib/components/sessions/SessionWrapper.svelte b/frontend/src/lib/components/sessions/SessionWrapper.svelte
index 81b6f06aa0..830cf1d2bd 100644
--- a/frontend/src/lib/components/sessions/SessionWrapper.svelte
+++ b/frontend/src/lib/components/sessions/SessionWrapper.svelte
@@ -29,6 +29,7 @@
 	import RawAppEditorView from './RawAppEditorView.svelte'
 	import SessionWorkspaceBar from './SessionWorkspaceBar.svelte'
 	import SessionForkBar from './SessionForkBar.svelte'
+	import SessionDraftBar from './SessionDraftBar.svelte'
 	import {
 		createSession,
 		getEffectiveWorkspaceId,
@@ -274,13 +275,20 @@
 		{#if !hasFirstUserMessage}
 			<SessionWorkspaceBar {session} />
 		{/if}
-		<SessionForkBar
-			{session}
-			onMove={(workspaceId) => moveAndActivate(workspaceId)}
-			onCreateForkAndMove={(fork) => createForkAndMove(fork)}
-			onArchive={() => archiveAndReset()}
-			onDelete={() => (deleteConfirmOpen = true)}
-		/>
+		<!-- gap-1 (4px) spaces the fork bar and draft bar when both are visible.
+		     Each bar renders a single in-flow root (or nothing); the draft drawer
+		     is position:fixed, so it doesn't count as a flex item — no stray gap
+		     when only one bar shows. -->
+		<div class="flex flex-col gap-1">
+			<SessionForkBar
+				{session}
+				onMove={(workspaceId) => moveAndActivate(workspaceId)}
+				onCreateForkAndMove={(fork) => createForkAndMove(fork)}
+				onArchive={() => archiveAndReset()}
+				onDelete={() => (deleteConfirmOpen = true)}
+			/>
+			<SessionDraftBar {session} />
+		</div>
 	{/snippet}
 
 	<!-- Override the chat's default keyboard-shortcut hint with nothing —
diff --git a/frontend/src/lib/components/sessions/WorkspaceDiffDrawer.svelte b/frontend/src/lib/components/sessions/WorkspaceDiffDrawer.svelte
new file mode 100644
index 0000000000..e503ee8635
--- /dev/null
+++ b/frontend/src/lib/components/sessions/WorkspaceDiffDrawer.svelte
@@ -0,0 +1,638 @@
+<script lang="ts" module>
+	export type DiffStatus = 'added' | 'removed' | 'modified' | 'conflict'
+	// One changed item. `status` drives the dot/badge; `ahead`/`behind` are
+	// optional (fork-only) and only render when present.
+	export type DiffRow = {
+		kind: string
+		path: string
+		status: DiffStatus
+		ahead?: number
+		behind?: number
+	}
+</script>
+
+<script lang="ts">
+	import { parentFolderKey } from './forkDiffNav'
+	import { Button, Drawer, DrawerContent } from '$lib/components/common'
+	import Badge from '$lib/components/common/badge/Badge.svelte'
+	import {
+		AlertTriangle,
+		ChevronDown,
+		ChevronRight,
+		Folder,
+		GitMerge,
+		Loader2,
+		Minus,
+		Pencil,
+		Plus,
+		User
+	} from 'lucide-svelte'
+	import { goto } from '$lib/navigation'
+	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
+	import WorkspaceItemRow from '$lib/components/WorkspaceItemRow.svelte'
+	import WorkspaceItemDiffViewer from '$lib/components/WorkspaceItemDiffViewer.svelte'
+	import SearchItems from '$lib/components/SearchItems.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import { DiffIcon, SquareSplitHorizontal } from 'lucide-svelte'
+	import { untrack, type Snippet } from 'svelte'
+	import ExternalEditLink from '../ExternalEditLink.svelte'
+
+	// Read-only, multi-item before/after diff viewer with a file tree. The data
+	// source (fork comparison vs deployed-vs-draft) is supplied by the parent
+	// wrapper via `diffs` + `loadValues`; everything here is generic rendering.
+	let {
+		diffs,
+		loadValues,
+		loading = false,
+		error = undefined,
+		notice = undefined,
+		emptyMessage = 'No changes.',
+		title,
+		reviewHref,
+		reviewLabel = 'Review',
+		editUrlFor = undefined,
+		titleExtra
+	}: {
+		diffs: DiffRow[]
+		loadValues: (d: DiffRow) => Promise<{ before: unknown; after: unknown }>
+		loading?: boolean
+		error?: string | undefined
+		/** Replaces the diff list with an informational message (e.g. fork
+		 * created before change tracking). */
+		notice?: string | undefined
+		emptyMessage?: string
+		title: string
+		reviewHref: string
+		reviewLabel?: string
+		editUrlFor?: (d: DiffRow) => string | undefined
+		titleExtra?: Snippet
+	} = $props()
+
+	let drawer: Drawer | undefined = $state(undefined)
+	let searchQuery = $state('')
+	let diffStyle = $state<'sbs' | 'inline'>('sbs')
+	const inlineDiff = $derived(diffStyle === 'inline')
+
+	export function open() {
+		// Reset per-item caches so an edit-then-reopen doesn't show stale
+		// expanded content. The wrapper re-fetches `diffs`, which re-triggers
+		// the eager-load effect below.
+		loadedDiffs = {}
+		summaries = {}
+		drawer?.openDrawer()
+		setTimeout(() => searchInputEl?.focus(), 50)
+	}
+
+	function itemKey(d: DiffRow): string {
+		return `${d.kind}/${d.path}`
+	}
+
+	const KIND_LABELS: Record<string, string> = {
+		script: 'Script',
+		flow: 'Flow',
+		app: 'App',
+		raw_app: 'Raw app',
+		resource: 'Resource',
+		variable: 'Variable',
+		resource_type: 'Resource type',
+		folder: 'Folder',
+		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'
+	}
+
+	type LoadedDiff = {
+		state: 'loading' | 'ready' | 'error'
+		error?: string
+		before?: unknown
+		after?: unknown
+	}
+	let loadedDiffs: Record<string, LoadedDiff> = $state({})
+	let summaries: Record<string, string | undefined> = $state({})
+
+	async function loadDiffFor(d: DiffRow) {
+		const key = itemKey(d)
+		if (loadedDiffs[key]) return
+		loadedDiffs[key] = { state: 'loading' }
+		try {
+			const { before, after } = await loadValues(d)
+			loadedDiffs[key] = { state: 'ready', before, after }
+			const summary =
+				(after && typeof after === 'object' && (after as any).summary) ||
+				(before && typeof before === 'object' && (before as any).summary) ||
+				undefined
+			if (typeof summary === 'string' && summary.trim().length > 0) {
+				summaries[key] = summary
+			}
+		} catch (e) {
+			console.error('WorkspaceDiffDrawer: loadValues failed', d, e)
+			loadedDiffs[key] = { state: 'error', error: String(e) }
+		}
+	}
+
+	// Eagerly load each row (diffs render expanded). Tracks `diffs` only; the
+	// cache reads/writes are untracked so this doesn't loop on itself.
+	$effect(() => {
+		const ds = diffs
+		untrack(() => {
+			for (const d of ds) void loadDiffFor(d)
+		})
+	})
+
+	function onDetailsToggle(d: DiffRow, e: Event) {
+		const target = e.currentTarget as HTMLDetailsElement | null
+		if (target?.open) void loadDiffFor(d)
+	}
+
+	function statusBadgeColor(s: DiffStatus): 'green' | 'red' | 'orange' | 'blue' {
+		if (s === 'added') return 'green'
+		if (s === 'removed') return 'red'
+		if (s === 'conflict') return 'orange'
+		return 'blue'
+	}
+
+	const statusIcons = { added: Plus, removed: Minus, modified: Pencil, conflict: AlertTriangle }
+
+	// ── File tree ───────────────────────────────────────────────────────────
+	type FolderNode = {
+		type: 'folder'
+		name: string
+		fullPath: string
+		isScope: boolean
+		children: TreeNode[]
+	}
+	type FileNode = { type: 'file'; name: string; diff: DiffRow }
+	type TreeNode = FolderNode | FileNode
+
+	function buildTree(rows: DiffRow[]): FolderNode {
+		const root: FolderNode = {
+			type: 'folder',
+			name: '',
+			fullPath: '',
+			isScope: false,
+			children: []
+		}
+		const folderCache = new Map<string, FolderNode>()
+		for (const d of rows) {
+			const parts = d.path.split('/')
+			if (parts.length < 2) {
+				root.children.push({ type: 'file', name: d.path, diff: d })
+				continue
+			}
+			const scopeKey = parts.slice(0, 2).join('/')
+			let scope = folderCache.get(scopeKey)
+			if (!scope) {
+				scope = { type: 'folder', name: scopeKey, fullPath: scopeKey, isScope: true, children: [] }
+				folderCache.set(scopeKey, scope)
+				root.children.push(scope)
+			}
+			if (parts.length === 2) {
+				scope.children.push({ type: 'file', name: parts[1], diff: d })
+				continue
+			}
+			const rest = parts.slice(2)
+			let parent = scope
+			let fkey = scopeKey
+			for (let i = 0; i < rest.length - 1; i++) {
+				fkey = `${fkey}/${rest[i]}`
+				let folder = folderCache.get(fkey)
+				if (!folder) {
+					folder = { type: 'folder', name: rest[i], fullPath: fkey, isScope: false, children: [] }
+					folderCache.set(fkey, folder)
+					parent.children.push(folder)
+				}
+				parent = folder
+			}
+			parent.children.push({ type: 'file', name: rest[rest.length - 1], diff: d })
+		}
+		const sortRec = (n: FolderNode) => {
+			n.children.sort((a, b) => {
+				if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
+				return a.name.localeCompare(b.name)
+			})
+			for (const c of n.children) if (c.type === 'folder') sortRec(c)
+		}
+		sortRec(root)
+		return root
+	}
+
+	function searchableText(d: DiffRow): string {
+		const parts = [d.path, KIND_LABELS[d.kind] ?? d.kind]
+		const s = summaries[itemKey(d)]
+		if (s) parts.push(s)
+		return parts.join(' ')
+	}
+	let searchedDiffs: (DiffRow & { marked?: string })[] | undefined = $state(undefined)
+
+	const filteredDiffs = $derived.by(() => {
+		const q = searchQuery.trim()
+		if (!q) return diffs
+		return (searchedDiffs ?? []) as DiffRow[]
+	})
+
+	const tree = $derived(buildTree(filteredDiffs))
+
+	function rowId(d: DiffRow): string {
+		return `ws-diff-${itemKey(d)}`
+	}
+
+	function scrollToDiff(d: DiffRow) {
+		const el = document.getElementById(rowId(d)) as HTMLDetailsElement | null
+		if (!el) return
+		el.open = true
+		el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+	}
+
+	// ── Keyboard nav (matches WorkspaceItemDrillPicker) ─────────────────────
+	let folderOpen: Record<string, boolean> = $state({})
+	function isFolderOpen(key: string): boolean {
+		return folderOpen[key] ?? true
+	}
+	function folderKey(node: FolderNode): string {
+		return `folder:${node.fullPath}`
+	}
+
+	type NavEntry =
+		| { type: 'folder'; key: string; node: FolderNode }
+		| { type: 'file'; key: string; diff: DiffRow }
+
+	function flattenVisible(node: FolderNode): NavEntry[] {
+		const out: NavEntry[] = []
+		const walk = (n: TreeNode) => {
+			if (n.type === 'file') {
+				out.push({ type: 'file', key: itemKey(n.diff), diff: n.diff })
+				return
+			}
+			const fkey = folderKey(n)
+			out.push({ type: 'folder', key: fkey, node: n })
+			if (isFolderOpen(fkey)) for (const c of n.children) walk(c)
+		}
+		for (const c of node.children) walk(c)
+		return out
+	}
+	const navEntries = $derived(flattenVisible(tree))
+	const navKeys = $derived(navEntries.map((e) => e.key))
+	const entryByKey = $derived(new Map(navEntries.map((e) => [e.key, e])))
+
+	let highlightedKey: string | undefined = $state(undefined)
+	let mouseActive = $state(false)
+	let searchInputEl: HTMLInputElement | undefined = $state()
+	let sidebarRoot: HTMLElement | undefined = $state()
+
+	$effect(() => {
+		if (navKeys.length === 0) return
+		if (!highlightedKey || !navKeys.includes(highlightedKey)) {
+			highlightedKey = navKeys[0]
+		}
+	})
+
+	function scrollHighlightIntoView() {
+		if (!sidebarRoot || !highlightedKey) return
+		const el = sidebarRoot.querySelector<HTMLElement>(
+			`[data-nav-key="${CSS.escape(highlightedKey)}"]`
+		)
+		el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+	}
+
+	function moveHighlight(delta: 1 | -1) {
+		if (navKeys.length === 0) return
+		const cur = navKeys.indexOf(highlightedKey ?? '')
+		const next = cur < 0 ? 0 : (cur + delta + navKeys.length) % navKeys.length
+		highlightedKey = navKeys[next]
+		mouseActive = false
+		requestAnimationFrame(scrollHighlightIntoView)
+	}
+
+	function setHoverHighlight(key: string) {
+		if (mouseActive) highlightedKey = key
+	}
+
+	function activateHighlighted() {
+		if (!highlightedKey) return
+		const entry = entryByKey.get(highlightedKey)
+		if (!entry) return
+		if (entry.type === 'file') {
+			scrollToDiff(entry.diff)
+		} else {
+			folderOpen[entry.key] = !isFolderOpen(entry.key)
+		}
+	}
+
+	function parentFolderKeyFor(entry: NavEntry): string | undefined {
+		const path = entry.type === 'folder' ? entry.node.fullPath : entry.diff.path
+		return parentFolderKey(entry.type, path)
+	}
+
+	function firstChildKey(node: FolderNode): string | undefined {
+		const c = node.children[0]
+		if (!c) return undefined
+		return c.type === 'folder' ? folderKey(c) : itemKey(c.diff)
+	}
+
+	function selectKey(key: string) {
+		highlightedKey = key
+		mouseActive = false
+		requestAnimationFrame(scrollHighlightIntoView)
+	}
+
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault()
+			moveHighlight(1)
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault()
+			moveHighlight(-1)
+		} else if (e.key === 'Enter') {
+			e.preventDefault()
+			activateHighlighted()
+		} else if (e.key === 'ArrowRight') {
+			const entry = highlightedKey ? entryByKey.get(highlightedKey) : undefined
+			if (!entry || entry.type !== 'folder') return
+			if (!isFolderOpen(entry.key)) {
+				e.preventDefault()
+				folderOpen[entry.key] = true
+				return
+			}
+			const child = firstChildKey(entry.node)
+			if (child) {
+				e.preventDefault()
+				selectKey(child)
+			}
+		} else if (e.key === 'ArrowLeft') {
+			const entry = highlightedKey ? entryByKey.get(highlightedKey) : undefined
+			if (!entry) return
+			if (entry.type === 'folder' && isFolderOpen(entry.key)) {
+				e.preventDefault()
+				folderOpen[entry.key] = false
+				return
+			}
+			const parent = parentFolderKeyFor(entry)
+			if (parent && entryByKey.has(parent)) {
+				e.preventDefault()
+				selectKey(parent)
+			}
+		}
+	}
+</script>
+
+<SearchItems
+	filter={searchQuery}
+	items={diffs}
+	bind:filteredItems={searchedDiffs}
+	f={(d: DiffRow) => searchableText(d)}
+/>
+
+{#snippet renderTreeNode(node: TreeNode, depth: number)}
+	{#if node.type === 'folder'}
+		{@const isUserScope = node.isScope && node.name.startsWith('u/')}
+		{@const fkey = folderKey(node)}
+		{@const open = isFolderOpen(fkey)}
+		{@const isHl = fkey === highlightedKey}
+		<details
+			{open}
+			ontoggle={(e) => (folderOpen[fkey] = (e.currentTarget as HTMLDetailsElement).open)}
+			class="select-none"
+		>
+			<summary
+				role="option"
+				aria-selected={isHl}
+				data-nav-key={fkey}
+				onmouseenter={() => setHoverHighlight(fkey)}
+				class="flex items-center gap-1.5 px-3 py-1 cursor-pointer text-xs font-medium font-mono text-emphasis hover:bg-surface-hover list-none [&::-webkit-details-marker]:hidden tree-summary {isHl
+					? 'bg-surface-hover'
+					: ''}"
+				style="padding-left: {depth * 12 + 8}px"
+			>
+				<ChevronDown class="w-3 h-3 shrink-0 text-tertiary tree-chevron-open" />
+				<ChevronRight class="w-3 h-3 shrink-0 text-tertiary tree-chevron-closed" />
+				{#if isUserScope}
+					<User size={12} class="shrink-0 text-tertiary" />
+				{:else}
+					<Folder size={12} class="shrink-0 text-tertiary" />
+				{/if}
+				<span class="truncate" title={node.name}>{node.name}</span>
+			</summary>
+			<div>
+				{#each node.children as child}
+					{@render renderTreeNode(child, depth + 1)}
+				{/each}
+			</div>
+		</details>
+	{:else}
+		{@const status = node.diff.status}
+		{@const key = itemKey(node.diff)}
+		<WorkspaceItemRow
+			kind={node.diff.kind as any}
+			summary={summaries[key]}
+			secondary={node.name}
+			highlighted={key === highlightedKey}
+			navKey={key}
+			indent={depth * 12 + 20}
+			title={node.diff.path}
+			onclick={() => {
+				highlightedKey = key
+				scrollToDiff(node.diff)
+			}}
+			onmouseenter={() => setHoverHighlight(key)}
+		>
+			{#snippet extras()}
+				<span
+					class="w-1.5 h-1.5 rounded-full shrink-0 {status === 'added'
+						? 'bg-green-500'
+						: status === 'removed'
+							? 'bg-red-500'
+							: status === 'conflict'
+								? 'bg-orange-500'
+								: 'bg-blue-500'}"
+				></span>
+			{/snippet}
+		</WorkspaceItemRow>
+	{/if}
+{/snippet}
+
+<Drawer bind:this={drawer} size="1200px">
+	<DrawerContent
+		{title}
+		{titleExtra}
+		on:close={() => drawer?.closeDrawer()}
+		documentationLink={undefined}
+		noPadding
+		overflow_y={false}
+	>
+		{#snippet actions()}
+			<ToggleButtonGroup bind:selected={diffStyle} noWFull>
+				{#snippet children({ item })}
+					<ToggleButton
+						value="sbs"
+						label="Side-by-side"
+						icon={SquareSplitHorizontal}
+						tooltip="Side-by-side diff"
+						iconOnly
+						{item}
+					/>
+					<ToggleButton
+						value="inline"
+						label="Unified"
+						icon={DiffIcon}
+						tooltip="Unified diff"
+						iconOnly
+						{item}
+					/>
+				{/snippet}
+			</ToggleButtonGroup>
+			<Button
+				variant="accent"
+				unifiedSize="sm"
+				startIcon={{ icon: GitMerge }}
+				onclick={() => goto(reviewHref)}
+			>
+				{reviewLabel}
+			</Button>
+		{/snippet}
+		<div class="flex flex-row h-full min-h-0">
+			{#if diffs.length > 0}
+				<aside
+					bind:this={sidebarRoot}
+					onmousemove={() => (mouseActive = true)}
+					class="flex-none w-56 border-r border-light flex flex-col min-h-0"
+				>
+					<div class="px-3 pt-3 pb-2 shrink-0">
+						<!-- Raw input (not the design-system TextInput) on purpose: this is a
+						     bespoke filter wired to the file tree's keyboard navigation — it
+						     needs a direct element ref to focus (the `/` shortcut) and a
+						     keydown handler that hands ArrowDown/Enter off to the tree.
+						     TextInput/ClearableInput swallow/rebubble those and don't expose
+						     the element ref. -->
+						<input
+							bind:this={searchInputEl}
+							type="search"
+							bind:value={searchQuery}
+							placeholder="Filter files..."
+							onkeydown={handleSearchKeydown}
+							class="w-full text-xs px-2 py-1 rounded border border-light bg-surface focus:outline-none focus:border-accent"
+						/>
+					</div>
+					<div class="flex-1 min-h-0 overflow-y-auto pb-3 flex flex-col gap-1">
+						{#if tree.children.length > 0}
+							{#each tree.children as child}
+								{@render renderTreeNode(child, 0)}
+							{/each}
+						{:else}
+							<div class="text-2xs text-tertiary px-3 py-2">No matches</div>
+						{/if}
+					</div>
+				</aside>
+			{/if}
+			<main class="flex-1 min-w-0 overflow-y-auto">
+				<div class="px-3 pt-3 pb-4 flex flex-col gap-3">
+					{#if loading && diffs.length === 0}
+						<div class="flex items-center gap-2 text-sm text-secondary py-8 self-center">
+							<Loader2 class="w-4 h-4 animate-spin" />
+							Loading comparison...
+						</div>
+					{:else if error}
+						<div class="text-sm text-red-600 dark:text-red-400 py-4">{error}</div>
+					{:else if notice}
+						<div class="text-sm text-secondary py-4">{notice}</div>
+					{:else if diffs.length === 0}
+						<div class="text-sm text-secondary py-4">{emptyMessage}</div>
+					{:else if filteredDiffs.length === 0}
+						<div class="text-sm text-secondary py-4">No files match "{searchQuery}".</div>
+					{:else}
+						<div class="flex flex-col gap-2">
+							{#each filteredDiffs as d (itemKey(d))}
+								{@const key = itemKey(d)}
+								{@const status = d.status}
+								{@const StatusIcon = statusIcons[status]}
+								{@const loaded = loadedDiffs[key]}
+								{@const editUrl = editUrlFor?.(d)}
+								<details
+									open
+									id={rowId(d)}
+									class="border border-light rounded-md bg-surface scroll-mt-2"
+									ontoggle={(e) => onDetailsToggle(d, e)}
+								>
+									<summary
+										class="sticky top-0 z-30 bg-surface flex items-center gap-2 px-3 py-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden border-b border-transparent rounded-md relative before:content-[''] before:absolute before:inset-0 before:bg-surface-hover before:opacity-0 before:pointer-events-none before:transition-opacity hover:before:opacity-100"
+									>
+										<ChevronDown
+											class="w-3.5 h-3.5 shrink-0 text-tertiary transition-transform chevron"
+										/>
+										<RowIcon kind={d.kind as any} size={14} />
+										<div class="min-w-0 flex-1">
+											{#if editUrl}
+												<ExternalEditLink
+													href={editUrl}
+													title={d.path}
+													class="text-xs text-primary font-mono truncate"
+												>
+													<span class="truncate">{d.path}</span>
+												</ExternalEditLink>
+											{:else}
+												<div class="text-xs text-primary font-mono truncate" title={d.path}>
+													{d.path}
+												</div>
+											{/if}
+										</div>
+										<div class="shrink-0 flex items-center gap-2">
+											{#if d.ahead && d.ahead > 0}
+												<span class="text-2xs text-secondary">{d.ahead} ahead</span>
+											{/if}
+											{#if d.behind && d.behind > 0}
+												<span class="text-2xs text-secondary">{d.behind} behind</span>
+											{/if}
+											<Badge color={statusBadgeColor(status)}>
+												<StatusIcon class="w-3 h-3 inline mr-0.5" />
+												{status}
+											</Badge>
+										</div>
+									</summary>
+									<div
+										class="border-t border-light bg-surface-tertiary rounded-b-md overflow-hidden"
+									>
+										{#if !loaded || loaded.state === 'loading'}
+											<div class="flex items-center gap-2 text-xs text-secondary p-3">
+												<Loader2 class="w-3.5 h-3.5 animate-spin" />
+												Loading diff…
+											</div>
+										{:else if loaded.state === 'error'}
+											<div class="text-xs text-red-600 dark:text-red-400">{loaded.error}</div>
+										{:else if loaded.state === 'ready'}
+											<WorkspaceItemDiffViewer
+												kind={d.kind}
+												originalRaw={loaded.before}
+												currentRaw={loaded.after}
+												{inlineDiff}
+											/>
+										{/if}
+									</div>
+								</details>
+							{/each}
+						</div>
+					{/if}
+				</div></main
+			>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<style>
+	details:not([open]) :global(.chevron) {
+		transform: rotate(-90deg);
+	}
+	details:not([open]) > .tree-summary :global(.tree-chevron-open) {
+		display: none;
+	}
+	details[open] > .tree-summary :global(.tree-chevron-closed) {
+		display: none;
+	}
+</style>
diff --git a/frontend/src/lib/rawAppDeploy.ts b/frontend/src/lib/rawAppDeploy.ts
new file mode 100644
index 0000000000..0ed87a1b09
--- /dev/null
+++ b/frontend/src/lib/rawAppDeploy.ts
@@ -0,0 +1,122 @@
+/**
+ * Deploy a raw app (code-based app) from its server-side draft. Raw apps can't
+ * be deployed through the normal AppService.updateApp/createApp path: their
+ * source `files` must be bundled to js/css and saved via the raw-app endpoints.
+ *
+ * This mirrors how the global AI chat deploys raw apps
+ * (`copilot/chat/global/core.ts` → deployDraft, case 'app'): read the item with
+ * its draft, normalise to an AppDraftValue, recompute the policy, bundle the
+ * files, then createAppRaw/updateAppRaw. The two pure transforms
+ * (appSourceToDraftValue / normalizeRawAppData) are re-implemented here to avoid
+ * importing the heavy chat module.
+ */
+import { get } from 'svelte/store'
+import { AppService } from '$lib/gen'
+import type { Policy } from '$lib/gen'
+import { userStore } from '$lib/stores'
+import { bundleRawAppDraft } from '$lib/components/copilot/chat/global/rawAppBundlerBridge'
+import type { AppDraftValue } from '$lib/components/copilot/chat/global/workspaceItems'
+import { updateRawAppPolicy } from '$lib/components/raw_apps/rawAppPolicy'
+import { DEFAULT_DATA as DEFAULT_RAW_APP_DATA } from '$lib/components/raw_apps/dataTableRefUtils'
+
+function normalizeRawAppData(value: Record<string, any>): AppDraftValue['data'] {
+	if (value.data?.creation) {
+		return {
+			tables: value.data.tables ?? [],
+			datatable: value.data.creation.datatable,
+			schema: value.data.creation.schema
+		}
+	}
+	if (value.data) return value.data
+	if (value.datatables) return { ...DEFAULT_RAW_APP_DATA, tables: value.datatables }
+	if (value.dataTableRefs) return { ...DEFAULT_RAW_APP_DATA, tables: value.dataTableRefs }
+	return { ...DEFAULT_RAW_APP_DATA }
+}
+
+function appSourceToDraftValue(app: any, fallback?: any): AppDraftValue {
+	const value = (app.value ?? {}) as Record<string, any>
+	return {
+		summary: app.summary ?? '',
+		files: { ...(value.files ?? {}) },
+		runnables: { ...(value.runnables ?? {}) },
+		data: normalizeRawAppData(value),
+		policy: app.policy ?? fallback?.policy,
+		custom_path: app.custom_path ?? fallback?.custom_path
+	}
+}
+
+/**
+ * Promote a raw app's draft to deployed. Throws on failure (caller wraps into a
+ * DeployResult). The matching draft row is deleted server-side by the raw-app
+ * create/update handler, like the other deploy paths.
+ */
+export async function deployRawAppDraft(
+	workspace: string,
+	path: string,
+	deploymentMessage?: string
+): Promise<void> {
+	const app = await AppService.getAppByPathWithDraft({ workspace, path })
+	const draft = (app as any).draft
+	// Honor a renamed draft path; the URL `path` below stays the existing item key.
+	const targetPath = draft?.path ?? path
+	const value = appSourceToDraftValue(draft ?? app, app)
+
+	const policy = (await updateRawAppPolicy(
+		value.runnables as any,
+		value.policy as any
+	)) as NonNullable<AppDraftValue['policy']> & Policy
+	if (!policy.execution_mode) {
+		policy.execution_mode = 'publisher'
+	}
+
+	const bundle = await bundleRawAppDraft({ workspace, files: value.files })
+
+	const rawAppValue = {
+		files: value.files,
+		runnables: value.runnables,
+		data: value.data ?? { ...DEFAULT_RAW_APP_DATA }
+	}
+	const summary = value.summary ?? ''
+
+	if (await AppService.existsApp({ workspace, path })) {
+		// custom_path changes require admin. Mirror RawAppEditorHeader's update path:
+		// admins send the draft's value (`''` to clear), non-admins send undefined so
+		// the backend ignores it and preserves the existing route — otherwise a
+		// non-admin deploying a draft for an app that has a custom route would hit
+		// RequireAdmin (the deployed custom_path is sent via the appSourceToDraftValue
+		// fallback even when unchanged).
+		const isAdmin = !!(get(userStore)?.is_admin || get(userStore)?.is_super_admin)
+		await AppService.updateAppRaw({
+			workspace,
+			path,
+			formData: {
+				app: {
+					path: targetPath,
+					value: rawAppValue,
+					summary,
+					policy,
+					deployment_message: deploymentMessage,
+					custom_path: isAdmin ? (value.custom_path ?? '') : undefined
+				},
+				js: bundle.js,
+				css: bundle.css
+			}
+		})
+	} else {
+		await AppService.createAppRaw({
+			workspace,
+			formData: {
+				app: {
+					path: targetPath,
+					value: rawAppValue,
+					summary,
+					policy,
+					deployment_message: deploymentMessage,
+					custom_path: value.custom_path
+				},
+				js: bundle.js,
+				css: bundle.css
+			}
+		})
+	}
+}
diff --git a/frontend/src/lib/utils_draft_deploy.ts b/frontend/src/lib/utils_draft_deploy.ts
new file mode 100644
index 0000000000..8ce4624fc1
--- /dev/null
+++ b/frontend/src/lib/utils_draft_deploy.ts
@@ -0,0 +1,219 @@
+/**
+ * Draft deploy/discard orchestration for the compare page's "draft" mode.
+ *
+ * Drafts only exist for scripts, flows and apps (the `draft_type` enum). A draft
+ * is the editor's serialized state stored in the `draft` table; deploying it is
+ * the same create/update call the editor makes on "Deploy", which auto-deletes
+ * the matching draft server-side (unless `skip_draft_deletion`) — so we never
+ * call `deleteDraft` after a successful deploy. The lock/dependency job runs
+ * async, exactly as in the editor.
+ *
+ * Discarding branches on `draft_only`: a `draft_only` item exists only as a
+ * draft, so discarding deletes the whole item (mirrors `common/table/*Row.svelte`);
+ * a draft on an already-deployed item just deletes the draft row.
+ */
+import { get, writable } from 'svelte/store'
+import { ScriptService, FlowService, AppService, DraftService } from '$lib/gen'
+import type { DeployResult } from '$lib/utils_workspace_deploy'
+import { deployRawAppDraft } from '$lib/rawAppDeploy'
+import { invalidateWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
+import { userStore } from '$lib/stores'
+import { deployTriggers, type Trigger } from '$lib/components/triggers/utils'
+
+export type DraftKind = 'script' | 'flow' | 'app'
+
+export interface DraftDiffValues {
+	deployed: unknown
+	draft: unknown
+}
+
+// Empty-but-valid "deployed" shapes for draft_only items (which have never been
+// deployed). Using a fully-empty `{}` breaks the flow graph diff (it needs
+// `value.modules`) and leaves the drawer spinning — so each kind gets a minimal
+// valid shape, making the whole draft show as "all new".
+const EMPTY_DEPLOYED: Record<DraftKind, (draft: any) => unknown> = {
+	script: (draft) => ({ content: '', language: draft?.language, schema: {} }),
+	flow: () => ({ summary: '', value: { modules: [] }, schema: {} }),
+	app: () => ({ summary: '', value: {}, policy: {} })
+}
+
+/**
+ * Fetch the deployed value and the draft value for an item, for the DiffDrawer
+ * (`mode: 'simple'`, original = deployed, current = draft). For a `draft_only`
+ * item there is no real deployed value, so the deployed side is a minimal
+ * empty-but-valid shape and the draft shows as entirely new. DiffDrawer cleans
+ * both sides via `cleanValueProperties`, so raw objects are fine here.
+ */
+export async function getDraftDiffValues(
+	kind: DraftKind,
+	path: string,
+	workspace: string,
+	draftOnly = false
+): Promise<DraftDiffValues> {
+	// A `draft_only` item can keep its content in the row itself with no separate
+	// draft-table row (e.g. a flow created via createFlow(draft_only: true), like
+	// `u/admin/new`). There `draft` is null, so the draft side must fall back to
+	// the row's own value — otherwise the diff "after" is empty and nothing shows.
+	if (kind === 'script') {
+		const r = (await ScriptService.getScriptByPathWithDraft({ workspace, path })) as any
+		const { draft, draft_created_at: _c, hash: _h, ...deployed } = r
+		const draftValue = draft ?? deployed
+		return { deployed: draftOnly ? EMPTY_DEPLOYED.script(draftValue) : deployed, draft: draftValue }
+	} else if (kind === 'flow') {
+		const r = (await FlowService.getFlowByPathWithDraft({ workspace, path })) as any
+		const { draft, draft_created_at: _c, ...deployed } = r
+		const draftValue = draft ?? deployed
+		return { deployed: draftOnly ? EMPTY_DEPLOYED.flow(draftValue) : deployed, draft: draftValue }
+	} else {
+		const r = (await AppService.getAppByPathWithDraft({ workspace, path })) as any
+		const deployed = {
+			summary: r.summary,
+			value: r.value,
+			policy: r.policy,
+			path: r.path,
+			custom_path: r.custom_path
+		}
+		const draftValue = r.draft ?? deployed
+		return { deployed: draftOnly ? EMPTY_DEPLOYED.app(draftValue) : deployed, draft: draftValue }
+	}
+}
+
+/**
+ * Deploy a script/flow draft's trigger changes the same way the editors do.
+ * Scripts and flows can carry `draft_triggers`; the create/update call below
+ * deletes the draft row, so without this the saved trigger edits would be
+ * silently lost. Uses the shared `deployTriggers` (a throwaway `usedTriggerKinds`
+ * store is fine — it only tracks kinds for the editor UI). `isNew` forces each
+ * trigger's `script_path` to the deployed path (matches the editors' new path).
+ */
+async function deployDraftTriggers(
+	draftTriggers: Trigger[] | undefined,
+	workspace: string,
+	path: string,
+	isNew: boolean
+): Promise<void> {
+	const triggers = (draftTriggers ?? []).filter((t) => t?.draftConfig)
+	if (triggers.length === 0) return
+	const isAdmin = !!(get(userStore)?.is_admin || get(userStore)?.is_super_admin)
+	await deployTriggers(triggers, workspace, isAdmin, writable<string[]>([]), path, isNew)
+}
+
+/**
+ * Promote a draft to deployed by replaying the editor's create/update call with
+ * the stored draft value. The matching draft row is deleted server-side by the
+ * create/update handler. Returns the same `{ success, error? }` shape as the
+ * fork-merge `deployItem`, so callers can reuse the `deploymentStatus` pattern.
+ */
+export async function deployDraft(
+	kind: DraftKind,
+	path: string,
+	workspace: string,
+	draftOnly = false,
+	rawApp = false
+): Promise<DeployResult> {
+	try {
+		if (kind === 'app' && rawApp) {
+			// Raw apps bundle their source files to js/css and deploy via the
+			// raw-app endpoints — same as the global AI chat's deploy.
+			await deployRawAppDraft(workspace, path)
+		} else if (kind === 'script') {
+			const r = (await ScriptService.getScriptByPathWithDraft({ workspace, path })) as any
+			const d = r.draft ?? r
+			// Drop editor-only / server-managed keys; deploy as a real (non-draft) version.
+			const { draft_triggers: draftTriggers, draft_only: _o, ...rest } = d
+			const scriptPath = d.path ?? path
+			// Deploy at the draft's path so a rename in the draft is honored (same as
+			// the editor: createScript at the new path with parent_hash links lineage).
+			await ScriptService.createScript({
+				workspace,
+				requestBody: { ...rest, path: scriptPath, parent_hash: r.hash }
+			})
+			// Then deploy any draft trigger edits, so they aren't dropped with the draft.
+			await deployDraftTriggers(draftTriggers, workspace, scriptPath, true)
+		} else if (kind === 'flow') {
+			const r = (await FlowService.getFlowByPathWithDraft({ workspace, path })) as any
+			const d = r.draft ?? r
+			const requestBody = {
+				// Honor a renamed draft path; the URL `path` stays the existing item key.
+				path: d.path ?? path,
+				summary: d.summary ?? '',
+				description: d.description ?? '',
+				value: d.value,
+				schema: d.schema,
+				tag: d.tag,
+				dedicated_worker: d.dedicated_worker,
+				ws_error_handler_muted: d.ws_error_handler_muted,
+				visible_to_runner_only: d.visible_to_runner_only,
+				on_behalf_of_email: d.on_behalf_of_email,
+				labels: d.labels
+			}
+			// A draft (draft_only or on a deployed flow) always has a flow row, so
+			// updateFlow is correct in both cases — it promotes a draft_only flow to
+			// a real deployed version (clearing the flag). createFlow would 400
+			// "Flow already exists".
+			await FlowService.updateFlow({ workspace, path, requestBody })
+			// Then deploy any draft trigger edits, so they aren't dropped with the draft.
+			await deployDraftTriggers(d.draft_triggers, workspace, d.path ?? path, draftOnly)
+		} else {
+			const r = (await AppService.getAppByPathWithDraft({ workspace, path })) as any
+			const d = r.draft ?? {
+				value: r.value,
+				summary: r.summary,
+				policy: r.policy,
+				path: r.path,
+				custom_path: r.custom_path
+			}
+			// custom_path requires admin on app update. Non-admins send undefined so
+			// the backend preserves the existing route (no RequireAdmin 403). For
+			// admins, fall back to the *deployed* route (`r.custom_path`) when the
+			// draft doesn't carry one — the visual-app draft value usually omits
+			// custom_path, and sending `''` would clear the existing route. An
+			// explicit '' in the draft still clears (`'' ?? x === ''`).
+			const isAdmin = !!(get(userStore)?.is_admin || get(userStore)?.is_super_admin)
+			const requestBody = {
+				value: d.value,
+				summary: d.summary ?? '',
+				policy: d.policy,
+				path: d.path ?? path,
+				custom_path: isAdmin ? (d.custom_path ?? r.custom_path) : undefined
+			}
+			// Same as flows: a draft always has an app row, so updateApp promotes a
+			// draft_only app (clearing the flag); createApp would 400 "already exists".
+			await AppService.updateApp({ workspace, path, requestBody })
+		}
+		// Mutated the workspace's Server Drafts — refresh every mounted reader.
+		invalidateWorkspaceDrafts(workspace)
+		return { success: true }
+	} catch (e: any) {
+		return { success: false, error: e?.body ?? e?.message ?? String(e) }
+	}
+}
+
+/**
+ * Discard a draft. For `draft_only` items the item exists only as a draft, so
+ * delete the whole item; otherwise delete just the draft row.
+ */
+export async function discardDraft(
+	kind: DraftKind,
+	path: string,
+	workspace: string,
+	draftOnly = false
+): Promise<DeployResult> {
+	try {
+		if (draftOnly) {
+			if (kind === 'script') {
+				await ScriptService.deleteScriptByPath({ workspace, path })
+			} else if (kind === 'flow') {
+				await FlowService.deleteFlowByPath({ workspace, path })
+			} else {
+				await AppService.deleteApp({ workspace, path })
+			}
+		} else {
+			await DraftService.deleteDraft({ workspace, path, kind })
+		}
+		invalidateWorkspaceDrafts(workspace)
+		return { success: true }
+	} catch (e: any) {
+		return { success: false, error: e?.body ?? e?.message ?? String(e) }
+	}
+}
diff --git a/frontend/src/lib/workspaceDrafts.svelte.ts b/frontend/src/lib/workspaceDrafts.svelte.ts
new file mode 100644
index 0000000000..475fbb9894
--- /dev/null
+++ b/frontend/src/lib/workspaceDrafts.svelte.ts
@@ -0,0 +1,143 @@
+/**
+ * Workspace Drafts — the single source of truth for "which Server Drafts exist
+ * in a workspace". Lists the deployable Draft Items once; the Draft Count is
+ * simply that list's length — never a separate query. This is what makes the
+ * count reliable: count ≡ list, by construction.
+ *
+ * Behind this seam the list is currently assembled from the three version-aware
+ * list endpoints (scripts/flows/apps with `include_draft_only`). A single
+ * `GET /w/{ws}/drafts/items` endpoint can replace `getDraftItems` later without
+ * touching any consumer.
+ *
+ * Reactivity: `useWorkspaceDrafts(() => ws)` is a component-scoped `runed`
+ * resource — it fetches on mount and when `ws` changes, and is disposed on
+ * unmount, so a re-opened view always shows a fresh count (no persistent cache
+ * to go stale). `invalidateWorkspaceDrafts(ws)` bumps a per-workspace version so
+ * every *mounted* consumer re-fetches after a Server-Draft mutation.
+ */
+import { resource } from 'runed'
+import { ScriptService, FlowService, AppService } from '$lib/gen'
+
+export type DraftKind = 'script' | 'flow' | 'app'
+
+export interface DraftItem {
+	kind: DraftKind
+	path: string
+	summary?: string
+	/** Never deployed — exists only as a draft. */
+	draft_only: boolean
+	/** App is a raw app (deploys via the raw-app endpoints). Always false for non-apps. */
+	raw_app: boolean
+}
+
+/** The one place the "is this a deployable Draft Item?" rule lives on the
+ * frontend: a pending draft on a deployed item (`has_draft`) OR a never-deployed
+ * `draft_only` item. Mirrors the backend `count_drafts` predicate. */
+/** The list-endpoint fields this module reads. Kept as a narrow local interface
+ * (rather than `any`) so the count predicate isn't typed against `any`. NOTE:
+ * `openapi.yaml`'s `ListableApp` still omits `has_draft`/`draft_only` (the backend
+ * struct returns them) — the proper fix is to add them to the spec and regenerate
+ * the client; until then this interface documents the contract relied on. */
+interface DraftListEntry {
+	path: string
+	summary?: string
+	has_draft?: boolean
+	draft_only?: boolean
+	raw_app?: boolean
+}
+
+// The list endpoints are paginated; without paging, drafts past the first page
+// would be silently missing from the count/list (and "Deploy all"). Page through
+// with a generous page size until a short page signals the end.
+const DRAFT_LIST_PER_PAGE = 100
+
+async function listAllPages(
+	fetchPage: (page: number, perPage: number) => Promise<DraftListEntry[]>
+): Promise<DraftListEntry[]> {
+	const all: DraftListEntry[] = []
+	for (let page = 1; ; page++) {
+		const batch = await fetchPage(page, DRAFT_LIST_PER_PAGE)
+		all.push(...batch)
+		if (batch.length < DRAFT_LIST_PER_PAGE) break
+	}
+	return all
+}
+
+export async function getDraftItems(workspace: string): Promise<DraftItem[]> {
+	const [scripts, flows, apps] = await Promise.all([
+		listAllPages((page, perPage) =>
+			ScriptService.listScripts({ workspace, includeDraftOnly: true, page, perPage })
+		),
+		listAllPages((page, perPage) =>
+			FlowService.listFlows({ workspace, includeDraftOnly: true, page, perPage })
+		),
+		listAllPages((page, perPage) =>
+			AppService.listApps({ workspace, includeDraftOnly: true, page, perPage })
+		)
+	])
+	const items: DraftItem[] = []
+	const push = (kind: DraftKind, list: DraftListEntry[]) => {
+		for (const it of list) {
+			if (it.has_draft || it.draft_only) {
+				items.push({
+					kind,
+					path: it.path,
+					summary: it.summary,
+					draft_only: !!it.draft_only,
+					raw_app: !!it.raw_app
+				})
+			}
+		}
+	}
+	push('script', scripts)
+	push('flow', flows)
+	push('app', apps)
+	items.sort((a, b) => a.path.localeCompare(b.path))
+	return items
+}
+
+// Per-workspace invalidation version. Bumping it changes the resource key for
+// that workspace, so mounted consumers re-fetch. Plain $state record.
+const versions: Record<string, number> = $state({})
+
+export function invalidateWorkspaceDrafts(workspace: string | undefined): void {
+	if (!workspace) return
+	versions[workspace] = (versions[workspace] ?? 0) + 1
+}
+
+export interface WorkspaceDraftsHandle {
+	readonly items: DraftItem[]
+	readonly count: number
+	readonly loading: boolean
+	/** Imperative re-fetch (e.g. right after a mutation in the same component). */
+	refresh: () => void
+}
+
+/**
+ * Reactive Workspace Drafts for the given workspace. Call at component init.
+ * Re-fetches on mount, when `workspace` changes, and when
+ * `invalidateWorkspaceDrafts(workspace)` is called while mounted.
+ */
+export function useWorkspaceDrafts(workspace: () => string | undefined): WorkspaceDraftsHandle {
+	const res = resource(
+		() => {
+			const ws = workspace()
+			return { ws, v: ws ? (versions[ws] ?? 0) : 0 }
+		},
+		async ({ ws }) => (ws ? getDraftItems(ws) : [])
+	)
+	return {
+		get items() {
+			return res.current ?? []
+		},
+		get count() {
+			return (res.current ?? []).length
+		},
+		get loading() {
+			return res.loading
+		},
+		refresh() {
+			void res.refetch()
+		}
+	}
+}
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index e15719694a..b070bd5fef 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -37,6 +37,7 @@
 	import { page } from '$app/state'
 	import { goto, replaceState } from '$app/navigation'
 	import ForkWorkspaceBanner from '$lib/components/ForkWorkspaceBanner.svelte'
+	import WorkspaceDraftsBanner from '$lib/components/WorkspaceDraftsBanner.svelte'
 	import WorkspaceTutorials from '$lib/components/WorkspaceTutorials.svelte'
 	import { onMount, setContext } from 'svelte'
 	import { tutorialsToDo } from '$lib/stores'
@@ -278,6 +279,7 @@
 	style="scrollbar-gutter: stable both-edges;"
 >
 	<ForkWorkspaceBanner />
+	<WorkspaceDraftsBanner />
 	<div class="max-w-7xl px-4 sm:px-8 md:px-8 h-fit w-full">
 		{#if $workspaceStore == 'admins'}
 			<div class="my-4"></div>
diff --git a/frontend/src/routes/(root)/(logged)/forks/compare/+page.js b/frontend/src/routes/(root)/(logged)/forks/compare/+page.js
index 712d677d68..2e9ca0e335 100644
--- a/frontend/src/routes/(root)/(logged)/forks/compare/+page.js
+++ b/frontend/src/routes/(root)/(logged)/forks/compare/+page.js
@@ -1,5 +1,5 @@
 export function load() {
 	return {
-		stuff: { title: 'Compare / Deploy to main workspace' }
+		stuff: { title: 'Compare & Deploy' }
 	}
 }
diff --git a/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte b/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte
index a6be7b1044..7c32b6a6af 100644
--- a/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import CompareWorkspaces from '$lib/components/CompareWorkspaces.svelte'
+	import CompareDrafts from '$lib/components/CompareDrafts.svelte'
 	import { WorkspaceService, type WorkspaceComparison } from '$lib/gen'
+	import { useWorkspaceDrafts } from '$lib/workspaceDrafts.svelte'
 	import { page } from '$app/state'
-	import { userWorkspaces, usersWorkspaceStore } from '$lib/stores'
-	import { untrack } from 'svelte'
+	import { userWorkspaces, usersWorkspaceStore, workspaceStore } from '$lib/stores'
+	import { onDestroy, untrack } from 'svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
@@ -13,14 +15,82 @@
 	import { switchWorkspace } from '$lib/storeUtils'
 	import { goto } from '$lib/navigation'
 
+	type CompareMode = 'fork' | 'draft'
+
 	let comparison: WorkspaceComparison | undefined = $state(undefined)
 
 	let currentWorkspaceId: string | undefined = $state(
-		page.url.searchParams.get('workspace_id') ?? undefined
+		page.url.searchParams.get('workspace_id') ?? $workspaceStore ?? undefined
 	)
 
 	let currentWorkspaceData = $derived($userWorkspaces.find((w) => w.id === currentWorkspaceId))
 	let parentWorkspaceId = $derived(currentWorkspaceData?.parent_workspace_id)
+	const isFork = $derived(!!parentWorkspaceId && currentWorkspaceId?.startsWith('wm-fork-'))
+
+	// Mode is seeded from the URL (?mode=draft|fork). `draft` is valid for any
+	// workspace, so it resolves immediately. `fork` is only valid for an actual
+	// fork, so it (like an absent mode) defers to the effect below, which falls
+	// back to draft for a non-fork once the workspace list has loaded (so `isFork`
+	// is known) — otherwise `?mode=fork` on a non-fork would strand the page on the
+	// fork UI, which can't render without a parent.
+	const urlMode = page.url.searchParams.get('mode')
+	let mode = $state<CompareMode>(urlMode === 'draft' ? 'draft' : 'fork')
+	let modeResolved = $state(urlMode === 'draft')
+
+	// Which fork direction to restore when switching back from draft mode. The
+	// merged toggle (CompareModeToggle, rendered inside each card) reports its
+	// selection here; the page only swaps which comparison component is shown.
+	let forkDirection = $state<'deploy_to' | 'update'>('deploy_to')
+
+	function selectMode(v: 'deploy_to' | 'update' | 'draft') {
+		if (v === 'draft') {
+			mode = 'draft'
+		} else {
+			forkDirection = v
+			mode = 'fork'
+		}
+	}
+
+	// Draft count drives the "Deployed ↔ draft" toggle badge. Reads the shared
+	// Workspace Drafts resource — count ≡ the draft list, and it refreshes itself
+	// when a deploy/discard invalidates the workspace.
+	const drafts = useWorkspaceDrafts(() => currentWorkspaceId)
+	const draftCount = $derived(drafts.count)
+
+	// Keys (`kind:path`) of fork items that are deployed *and* carry a pending
+	// draft (has_draft, i.e. not draft_only). CompareWorkspaces uses this to flag
+	// those rows — deploying/updating moves the deployed version, not the draft —
+	// and to leave them out of the default selection. Raw apps map to the
+	// `raw_app:` diff kind. draft_only items (never deployed) are excluded: they
+	// don't appear in the fork comparison as deployed rows.
+	const draftKeys = $derived(
+		new Set(
+			drafts.items
+				.filter((d) => !d.draft_only)
+				.map((d) => `${d.raw_app ? 'raw_app' : d.kind}:${d.path}`)
+		)
+	)
+
+	// Per-direction counts for the merged toggle badges. Deployable = items ahead
+	// (fork has changes the parent lacks); updateable = items behind. Computed
+	// here so they show on the toggle in draft mode too (where CompareDrafts has
+	// no comparison data of its own). Typed helpers avoid a $state `never`
+	// inference quirk on `comparison` inside $derived. A conflict (ahead AND
+	// behind) is intentionally counted in both directions — it's actionable either
+	// way.
+	function countDir(c: WorkspaceComparison | undefined, dir: 'ahead' | 'behind'): number {
+		return c?.diffs.filter((d) => d[dir] > 0).length ?? 0
+	}
+	const deployCount = $derived(countDir(comparison, 'ahead'))
+	const updateCount = $derived(countDir(comparison, 'behind'))
+
+	$effect(() => {
+		if (modeResolved || !currentWorkspaceData) return
+		untrack(() => {
+			mode = isFork ? 'fork' : 'draft'
+			modeResolved = true
+		})
+	})
 
 	async function checkForChanges() {
 		if (!currentWorkspaceId || !parentWorkspaceId) {
@@ -45,6 +115,25 @@
 		untrack(() => checkForChanges())
 	})
 
+	// Refresh the *fork comparison* after a child mutates state (deploy / update /
+	// discard). The Draft Count refreshes itself (the mutation invalidates the
+	// Workspace Drafts resource). The fork comparison (workspace_diff) is
+	// recomputed *asynchronously* (~hundreds of ms after the action), so an
+	// immediate re-fetch returns the pre-change diff — re-poll a few times to let
+	// the tally catch up.
+	let comparisonPollTimers: ReturnType<typeof setTimeout>[] = []
+	function refreshCounts() {
+		checkForChanges()
+		comparisonPollTimers.forEach(clearTimeout)
+		comparisonPollTimers = [800, 1800, 3500].map((delay) =>
+			setTimeout(() => checkForChanges(), delay)
+		)
+	}
+
+	// Don't let the catch-up timers fire after navigating away (network call +
+	// $state write on a gone component).
+	onDestroy(() => comparisonPollTimers.forEach(clearTimeout))
+
 	// Fork lifecycle actions — placed in the page header so they're available
 	// regardless of merge state. Both go through a confirmation modal because
 	// archive is reversible-ish but delete is irreversible, and either way the
@@ -99,14 +188,15 @@
 			acting = false
 		}
 	}
-
-	const isFork = $derived(!!parentWorkspaceId && currentWorkspaceId?.startsWith('wm-fork-'))
 </script>
 
 <CenteredPage>
-	<PageHeader title="Merge workspaces">
-		{#if isFork}
-			<div class="flex flex-row gap-2 items-center">
+	<PageHeader title="Compare & Deploy">
+		<div class="flex flex-row gap-2 items-center">
+			<!-- The merged compare toggle (fork direction + deployed↔draft) now lives
+			     inside each comparison card; only the fork lifecycle actions remain
+			     in the page header. -->
+			{#if isFork}
 				<Button
 					variant="default"
 					color="light"
@@ -127,15 +217,38 @@
 				>
 					Delete fork
 				</Button>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</PageHeader>
-	{#if currentWorkspaceId && parentWorkspaceId}
-		<CompareWorkspaces {currentWorkspaceId} {parentWorkspaceId} {comparison} />
-	{/if}
 	{#if !currentWorkspaceId}
 		No workspace selected
-	{:else if !parentWorkspaceId}
+	{:else if mode === 'draft'}
+		<CompareDrafts
+			{currentWorkspaceId}
+			draftItems={drafts.items}
+			draftsLoading={drafts.loading}
+			onChanged={refreshCounts}
+			{isFork}
+			parentWorkspaceId={parentWorkspaceId ?? undefined}
+			{deployCount}
+			{updateCount}
+			{draftCount}
+			onModeSelected={selectMode}
+		/>
+	{:else if parentWorkspaceId}
+		<CompareWorkspaces
+			{currentWorkspaceId}
+			{parentWorkspaceId}
+			{comparison}
+			initialMergeIntoParent={forkDirection === 'deploy_to'}
+			{deployCount}
+			{updateCount}
+			{draftCount}
+			{draftKeys}
+			onChanged={refreshCounts}
+			onModeSelected={selectMode}
+		/>
+	{:else}
 		workspace {currentWorkspaceId} has no parent workspace
 	{/if}
 </CenteredPage>