diff --git a/frontend/src/lib/components/DrillPicker.svelte b/frontend/src/lib/components/DrillPicker.svelte
new file mode 100644
index 0000000000..1b6a161d02
--- /dev/null
+++ b/frontend/src/lib/components/DrillPicker.svelte
@@ -0,0 +1,532 @@
+<!--
+@component
+Generic drill-through picker. Renders a tree of branches and leaves; one
+level is shown at a time. The host supplies the tree shape — workspace
+items, chat context elements, etc. all map to the same component.
+
+  - **Root** (no scope): the tree's top-level entries.
+  - **Branch** (scope = `[...keys]`): the children of the branch resolved
+    by walking the tree along the scope chain.
+
+Clicking a row drills *down*; the chevron-left in the header walks one
+level *up*. Filter (internal or `externalFilter`) is global across all
+leaves and ignores the current scope.
+-->
+<script lang="ts" generics="L">
+	import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
+	import SearchItems from '$lib/components/SearchItems.svelte'
+	import { generateRandomString } from '$lib/utils'
+	import { onMount, untrack, type Snippet } from 'svelte'
+	import {
+		collectLeavesGrouped,
+		leafHaystack,
+		resolveScope,
+		scopeChain,
+		type DrillBranch,
+		type DrillLeaf,
+		type DrillNode
+	} from './drillPicker'
+
+	interface Props {
+		tree: DrillNode<L>[]
+		onPick: (leaf: DrillLeaf<L>) => void
+		/** Drill path to land on initially. Empty = root. */
+		initialScope?: string[]
+		/** Composite key of the row to highlight initially. */
+		initialHighlight?: string
+		/** When set (any string, incl. ''), the host owns search input.
+		 * The internal search field is hidden and the host is expected to
+		 * forward keydown events via `handleKeydown`. */
+		externalFilter?: string
+		autoFocus?: boolean
+		/** Drop the outer fixed width / max height wrapper. */
+		flush?: boolean
+		/** Custom renderer for the icon column of a leaf. */
+		leafIcon?: Snippet<[DrillLeaf<L>]>
+		/** Custom renderer for the icon column of a branch (used inside
+		 * the entry row AND as the leading icon in the breadcrumb header). */
+		branchIcon?: Snippet<[DrillBranch<L>]>
+		/** Override for a leaf row's secondary text in the **drilled view**
+		 * (search results always show `leaf.secondary` to keep absolute
+		 * paths visible globally). Returns `undefined` to defer to
+		 * `leaf.secondary`. Used by the workspace adapter to render
+		 * scope-relative paths once the user has drilled into a folder. */
+		leafSecondary?: (leaf: DrillLeaf<L>, scope: string[]) => string | undefined
+		/** Fires whenever the scope changes. Lets the host trigger lazy
+		 * data loading for the branch the user drilled into. */
+		onScopeChange?: (scope: string[]) => void
+		/** Fires whenever the EFFECTIVE filter changes (internal OR external).
+		 * Lets the host trigger global preloads when the user starts searching
+		 * — needed in internal-filter mode where the host can't observe the
+		 * picker's own search box otherwise. */
+		onFilterChange?: (filter: string) => void
+	}
+
+	let {
+		tree,
+		onPick,
+		initialScope,
+		initialHighlight,
+		externalFilter,
+		autoFocus = true,
+		flush = false,
+		leafIcon,
+		branchIcon,
+		leafSecondary,
+		onScopeChange,
+		onFilterChange
+	}: Props = $props()
+
+	let searchInput: TextInput | undefined = $state()
+	let pickerRoot: HTMLElement | undefined = $state()
+	const instanceId = generateRandomString(8)
+	const listboxId = `dpkr-list-${instanceId}`
+	const idFor = (key: string) => `dpkr-${instanceId}-${key.replace(/[^a-zA-Z0-9-]/g, '_')}`
+
+	export function focus() {
+		searchInput?.focus()
+	}
+
+	// Sibling-popover open: melt-ui's `openFocus` runs once during the
+	// close→open transition; the picker may not be mounted yet. Retry
+	// after settle. Skipped when `autoFocus` is false (host keeps focus)
+	// or when the search input is not rendered (external filter mode).
+	onMount(() => {
+		if (!autoFocus || externalFilter !== undefined) return
+		const t = setTimeout(focus, 50)
+		return () => clearTimeout(t)
+	})
+
+	let scope = $state<string[]>(untrack(() => initialScope ?? []))
+	let internalFilter = $state('')
+	const filter = $derived(externalFilter ?? internalFilter)
+	const isSearching = $derived(filter.trim() !== '')
+
+	$effect(() => {
+		void scope
+		onScopeChange?.(scope)
+	})
+
+	$effect(() => {
+		void filter
+		onFilterChange?.(filter)
+	})
+
+	/** Tracks whether the last user action was mouse movement (true) or
+	 * keyboard nav (false). When false, row `mouseenter` events are
+	 * ignored — prevents the cursor from stealing the keyboard-driven
+	 * highlight as rows shift under it during scope changes. Re-enabled
+	 * on `mousemove`. Starts `false` so the synthetic `mouseenter` fired
+	 * when the popover mounts under a stationary cursor doesn't clobber
+	 * `initialHighlight`. */
+	let mouseActive = $state(false)
+
+	const currentBranch = $derived(resolveScope(tree, scope))
+	const entries = $derived<DrillNode<L>[]>(
+		scope.length === 0 ? tree : (currentBranch?.children ?? [])
+	)
+
+	// Flat leaf pool for global search. Skips branches flagged
+	// `omitFromSearch` (e.g. workspace cross-kind 'all' branch).
+	const searchPool = $derived(collectLeavesGrouped(tree))
+	type SearchEntry = { leaf: DrillLeaf<L>; group: DrillBranch<L> | null; _key: string }
+	const searchItems = $derived<SearchEntry[]>(
+		searchPool.map(({ leaf, group }) => ({ leaf, group, _key: leaf.key }))
+	)
+	let searchedItems: (SearchEntry & { marked: string })[] | undefined = $state(undefined)
+
+	// Group filtered results by their nearest-branch ancestor for display.
+	const searchResultsByGroup = $derived.by(() => {
+		const groups = new Map<
+			string,
+			{ group: DrillBranch<L> | null; items: (SearchEntry & { marked: string })[] }
+		>()
+		if (!searchedItems) return [] as { group: DrillBranch<L> | null; items: SearchEntry[] }[]
+		for (const r of searchedItems) {
+			const gkey = r.group?.key ?? '__none'
+			const existing = groups.get(gkey)
+			if (existing) existing.items.push(r)
+			else groups.set(gkey, { group: r.group, items: [r] })
+		}
+		return Array.from(groups.values())
+	})
+
+	type Entry =
+		| { type: 'branch'; key: string; node: DrillBranch<L> }
+		| { type: 'leaf'; key: string; node: DrillLeaf<L> }
+
+	const entryList = $derived<Entry[]>(
+		entries.map((n) =>
+			n.type === 'branch'
+				? { type: 'branch' as const, key: n.key, node: n }
+				: { type: 'leaf' as const, key: n.key, node: n }
+		)
+	)
+
+	const navKeys = $derived(
+		isSearching
+			? (searchedItems ?? ([] as typeof searchItems)).map((r) => r.leaf.key)
+			: entryList.map((e) => e.key)
+	)
+
+	let highlightedKey = $state<string | undefined>(untrack(() => initialHighlight))
+	let highlightedId = $derived(highlightedKey ? idFor(highlightedKey) : undefined)
+
+	$effect(() => {
+		if (navKeys.length === 0) return
+		if (!highlightedKey || !navKeys.includes(highlightedKey)) {
+			highlightedKey = navKeys[0]
+		}
+	})
+
+	$effect(() => {
+		if (highlightedKey && navKeys.includes(highlightedKey)) {
+			requestAnimationFrame(scrollHighlightIntoView)
+		}
+	})
+
+	function scrollHighlightIntoView() {
+		if (!pickerRoot || !highlightedKey) return
+		const el = pickerRoot.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) {
+		// Ignored until the user actually moves the mouse. Prevents the
+		// cursor (parked over a row) from clobbering keyboard-driven
+		// selection when the layout shifts beneath it.
+		if (mouseActive) highlightedKey = key
+	}
+
+	function pick(leaf: DrillLeaf<L>) {
+		if (leaf.current || leaf.disabled) return
+		onPick(leaf)
+	}
+
+	function activate(key: string | undefined) {
+		if (!key) return
+		if (isSearching) {
+			const found = (searchedItems ?? []).find((r) => r.leaf.key === key)
+			if (found) pick(found.leaf)
+			return
+		}
+		const entry = entryList.find((e) => e.key === key)
+		if (!entry) return
+		drill(entry)
+	}
+
+	function drill(entry: Entry) {
+		if (entry.type === 'branch') {
+			scope = [...scope, entry.key]
+		} else {
+			pick(entry.node)
+		}
+	}
+
+	function goUp() {
+		if (scope.length === 0) return
+		const leaving = scope[scope.length - 1]
+		scope = scope.slice(0, -1)
+		highlightedKey = leaving
+	}
+
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault()
+			e.stopPropagation()
+			moveHighlight(1)
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault()
+			e.stopPropagation()
+			moveHighlight(-1)
+		} else if (e.key === 'Enter' || e.key === 'Tab') {
+			// Tab mirrors Enter so the inline `@<word>` mention completes
+			// without losing focus to the next form control (matches the
+			// previous `AvailableContextList` behavior). Guard on a
+			// highlighted row so an unrelated Tab in an empty picker still
+			// falls through to natural focus movement.
+			if (e.key === 'Tab' && !highlightedKey) return
+			e.preventDefault()
+			e.stopPropagation()
+			mouseActive = false
+			activate(highlightedKey)
+		} else if (
+			(e.key === 'ArrowLeft' || e.key === 'Backspace') &&
+			filter === '' &&
+			scope.length > 0
+		) {
+			// Walk up the tree. Only when search is empty — otherwise these
+			// keys would hijack cursor movement / character deletion.
+			e.preventDefault()
+			e.stopPropagation()
+			mouseActive = false
+			goUp()
+		} else if (e.key === 'ArrowRight' && filter === '' && !isSearching) {
+			// Drill into the highlighted branch. Leaves are reserved for
+			// Enter (more deliberate, since picking navigates away).
+			const entry = entryList.find((en) => en.key === highlightedKey)
+			if (entry && entry.type === 'branch') {
+				e.preventDefault()
+				e.stopPropagation()
+				mouseActive = false
+				drill(entry)
+			}
+		}
+	}
+
+	export function handleKeydown(e: KeyboardEvent) {
+		handleSearchKeydown(e)
+	}
+
+	export function pickHighlighted() {
+		activate(highlightedKey)
+	}
+
+	// Breadcrumb header — labels of branches along the scope chain.
+	const headerChain = $derived(scopeChain(tree, scope))
+	const headerSegments = $derived(headerChain.map((b) => b.label))
+	const headerLabel = $derived(headerSegments.join(' › '))
+
+	/** Number of intermediate segments to hide behind a `…`. Always keep
+	 * the first segment (kind / category) and the deepest. Bumped up by
+	 * the measurement effect below. */
+	let hiddenCount = $state(0)
+
+	const headerLabelDisplay = $derived.by(() => {
+		if (headerSegments.length <= 2 || hiddenCount === 0) return headerLabel
+		return [headerSegments[0], '…', ...headerSegments.slice(1 + hiddenCount)].join(' › ')
+	})
+
+	let breadcrumbSpan: HTMLElement | undefined = $state()
+	let lastSegmentsKey = ''
+
+	/** Measurement loop: each pass reads `scrollWidth > clientWidth` on
+	 * the truncated span; if overflowing and there's still an intermediate
+	 * segment to drop, increment `hiddenCount`. Mutating `hiddenCount`
+	 * re-renders and re-fires this effect, so the loop self-terminates
+	 * either when the text fits or when only [first, …, leaf] remain
+	 * (`truncate-start` then polishes any final overflow). When the
+	 * breadcrumb itself changes (new scope), reset to 0 first. */
+	$effect(() => {
+		const key = headerSegments.join('|')
+		const segmentsChanged = key !== lastSegmentsKey
+		if (segmentsChanged) {
+			lastSegmentsKey = key
+			if (hiddenCount !== 0) {
+				hiddenCount = 0
+				return
+			}
+		}
+		void hiddenCount
+		if (!breadcrumbSpan) return
+		const maxHide = Math.max(0, headerSegments.length - 2)
+		if (hiddenCount >= maxHide) return
+		queueMicrotask(() => {
+			if (!breadcrumbSpan) return
+			if (breadcrumbSpan.scrollWidth > breadcrumbSpan.clientWidth + 1) {
+				hiddenCount = hiddenCount + 1
+			}
+		})
+	})
+
+	const branchLoading = $derived(currentBranch?.loading ?? false)
+</script>
+
+<SearchItems
+	{filter}
+	items={isSearching ? searchItems : []}
+	bind:filteredItems={searchedItems}
+	f={(x: SearchEntry) => leafHaystack(x.leaf)}
+	opts={{}}
+/>
+
+{#snippet defaultLeafIcon(leaf: DrillLeaf<L>)}
+	{#if leafIcon}
+		{@render leafIcon(leaf)}
+	{:else if leaf.icon}
+		{@const Icon = leaf.icon}
+		<Icon size={12} class="shrink-0" />
+	{/if}
+{/snippet}
+
+{#snippet defaultBranchIcon(branch: DrillBranch<L>)}
+	{#if branchIcon}
+		{@render branchIcon(branch)}
+	{:else if branch.icon}
+		{@const Icon = branch.icon}
+		<Icon size={12} class="shrink-0 text-tertiary" />
+	{/if}
+{/snippet}
+
+{#snippet leafRow(leaf: DrillLeaf<L>, secondary: string | undefined, baseClass: string)}
+	{@const key = leaf.key}
+	{@const isHl = key === highlightedKey}
+	{@const isCur = !!leaf.current}
+	<button
+		type="button"
+		id={idFor(key)}
+		role="option"
+		aria-selected={isHl}
+		data-nav-key={key}
+		aria-current={isCur ? 'true' : undefined}
+		class="w-full text-left flex items-center gap-2 px-3 transition-colors {baseClass} {isHl
+			? 'bg-surface-hover'
+			: ''} {isCur ? 'cursor-default text-emphasis font-medium' : ''} {leaf.disabled
+			? 'opacity-50 cursor-not-allowed'
+			: ''}"
+		disabled={leaf.disabled}
+		onmousedown={(e) => e.preventDefault()}
+		onclick={() => pick(leaf)}
+		onmouseenter={() => setHoverHighlight(key)}
+	>
+		{@render defaultLeafIcon(leaf)}
+		<div class="min-w-0 flex-1">
+			{#if leaf.secondary}
+				<div class="text-xs text-primary font-normal truncate">{leaf.label}</div>
+				<div class="text-2xs text-hint font-normal font-mono truncate">
+					{secondary ?? leaf.secondary}
+				</div>
+			{:else}
+				<div class="text-xs text-primary font-normal font-mono truncate">
+					{secondary ?? leaf.label}
+				</div>
+			{/if}
+		</div>
+	</button>
+{/snippet}
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={pickerRoot}
+	class={flush
+		? 'flex flex-col w-full h-full'
+		: 'flex flex-col w-[min(420px,calc(100vw-20px))] max-h-[60vh]'}
+	onkeydown={handleSearchKeydown}
+	onmousemove={() => (mouseActive = true)}
+>
+	{#if externalFilter === undefined}
+		<div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700">
+			<TextInput
+				bind:this={searchInput}
+				bind:value={internalFilter}
+				size="sm"
+				inputProps={{
+					placeholder: 'Search by name or summary...',
+					'data-workspace-picker-search': '',
+					role: 'combobox',
+					'aria-controls': listboxId,
+					'aria-expanded': 'true',
+					'aria-autocomplete': 'list',
+					'aria-activedescendant': highlightedId
+				}}
+			/>
+		</div>
+	{/if}
+
+	{#if scope.length > 0 && !isSearching}
+		<button
+			type="button"
+			class="flex items-center gap-1.5 w-full text-left px-3 py-1 text-xs font-medium font-mono text-secondary bg-surface-secondary/20 hover:bg-surface-hover transition-colors"
+			onmousedown={(e) => e.preventDefault()}
+			onclick={goUp}
+			title={headerLabel}
+		>
+			<ChevronLeft size={12} class="shrink-0 text-secondary" />
+			{#if headerChain[0]}
+				{@render defaultBranchIcon(headerChain[0])}
+			{/if}
+			<span bind:this={breadcrumbSpan} class="flex-1 min-w-0 truncate truncate-start">
+				{headerLabelDisplay}
+			</span>
+		</button>
+	{/if}
+
+	<div class="flex-1 overflow-y-auto" role="listbox" id={listboxId}>
+		{#if isSearching}
+			{@const total = (searchedItems ?? []).length}
+			{#if !searchedItems}
+				<div role="status" class="px-3 py-2 text-xs text-tertiary flex items-center gap-2">
+					<Loader2 size={14} class="animate-spin" /> Searching…
+				</div>
+			{:else if total === 0}
+				<div role="status" class="px-3 py-2 text-xs text-tertiary">No matches</div>
+			{:else}
+				{#each searchResultsByGroup as { group, items } (group?.key ?? '__none')}
+					{#if group}
+						<div class="px-3 pt-3 pb-1 text-2xs uppercase tracking-wide text-tertiary font-medium">
+							{group.label}
+						</div>
+					{/if}
+					<ul class="pb-1">
+						{#each items as r (r.leaf.key)}
+							<li>{@render leafRow(r.leaf, r.leaf.secondary ?? r.leaf.label, 'py-1.5')}</li>
+						{/each}
+					</ul>
+				{/each}
+			{/if}
+		{:else if branchLoading && entryList.length === 0}
+			<div role="status" class="px-3 py-2 text-xs text-tertiary flex items-center gap-2">
+				<Loader2 size={14} class="animate-spin" /> Loading…
+			</div>
+		{:else if entryList.length === 0}
+			<div role="status" class="px-3 py-2 text-xs text-tertiary">Empty</div>
+		{:else}
+			<div class="flex flex-col py-1">
+				{#each entryList as entry (entry.key)}
+					{@const isHl = entry.key === highlightedKey}
+					{#if entry.type === 'leaf'}
+						{@render leafRow(
+							entry.node,
+							leafSecondary?.(entry.node, scope) ?? entry.node.secondary,
+							'py-1.5'
+						)}
+					{:else}
+						<button
+							type="button"
+							id={idFor(entry.key)}
+							role="option"
+							aria-selected={isHl}
+							data-nav-key={entry.key}
+							class="flex items-center gap-1.5 w-full text-left px-3 py-1.5 text-xs font-medium font-mono text-emphasis transition-colors {isHl
+								? 'bg-surface-hover'
+								: ''}"
+							onmousedown={(e) => e.preventDefault()}
+							onclick={() => drill(entry)}
+							onmouseenter={() => setHoverHighlight(entry.key)}
+						>
+							{@render defaultBranchIcon(entry.node)}
+							<span class="flex-1 truncate">{entry.node.label}</span>
+							{#if entry.node.loading}
+								<Loader2 size={12} class="animate-spin text-tertiary" />
+							{/if}
+							<ChevronRight size={10} class="shrink-0 text-secondary" />
+						</button>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Path truncates from the start (left ellipsis) so the deepest
+	 * (rightmost) folder stays visible. `unicode-bidi: plaintext` keeps
+	 * each path segment laid out per its own direction. */
+	.truncate-start {
+		direction: rtl;
+		text-align: left;
+		unicode-bidi: plaintext;
+	}
+</style>
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 8c36de8b11..24459967ab 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -735,7 +735,18 @@
 		flowStore.val = redo(history)
 	}
 
+	let flowBuilderRoot: HTMLDivElement | undefined = $state()
+
 	function onKeyDown(event: KeyboardEvent) {
+		// Defer to anything that has explicitly grabbed focus — menus, modals,
+		// drawers etc. live outside the flow root. Flow nodes aren't focusable,
+		// so the unfocused default (activeElement === body) means "flow is the
+		// canvas" and we should react.
+		const active = document.activeElement
+		if (active && active !== document.body && !flowBuilderRoot?.contains(active)) {
+			return
+		}
+
 		let classes = event.target?.['className']
 		if (
 			(typeof classes === 'string' && classes.includes('inputarea')) ||
@@ -1175,7 +1186,7 @@
 		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 		<FlowEditorDrawer bind:this={$flowEditorDrawer} />
 
-		<div class="flex flex-col flex-1 h-screen">
+		<div bind:this={flowBuilderRoot} class="flex flex-col flex-1 h-screen">
 			<!-- Nav between steps-->
 			<div
 				bind:clientWidth={topbarWidth}
diff --git a/frontend/src/lib/components/WorkspaceItemDrillPicker.svelte b/frontend/src/lib/components/WorkspaceItemDrillPicker.svelte
index dda620dad5..9df993e4f3 100644
--- a/frontend/src/lib/components/WorkspaceItemDrillPicker.svelte
+++ b/frontend/src/lib/components/WorkspaceItemDrillPicker.svelte
@@ -1,44 +1,30 @@
 <!--
 @component
-Drill-through workspace item picker. One level is shown at a time:
+Workspace drill picker — adapter over the generic `DrillPicker`. Preserves
+the workspace-specific public API (kinds, scope = `{ kind, dir? }`,
+currentItem, leaf/branch icons) so callers (BreadcrumbSegment, EditorHeader)
+don't need to know about the generic tree model underneath.
 
-  - **Root** (no scope): All + kinds (Flows / Scripts / Apps). "All" is a
-    cross-kind row — drilling in shows folders/items merged across every kind.
-  - **Kind** (`{ kind }`): top-level scopes for that kind (e.g. `f/demo`, `u/alice`).
-    `kind: 'all'` is the cross-kind variant — folders contain items from
-    every kind, leaves still belong to a real kind.
-  - **Dir** (`{ kind, dir }`): immediate children of `dir` — subdirs + leaves.
-
-Clicking a row drills *down*; the chevron-left in the header walks one level
-*up*. Search is global across all kinds and ignores the current scope.
+Surfaces AI-created localStorage drafts (via `listGlobalDrafts`) as extra
+items alongside the backend-loaded list, so chat-scaffolded scripts/flows/
+apps that haven't been deployed yet are still navigable. Gated on
+`isGlobalAiEnabled()` — without sessions, the only UserDrafts present are
+standalone editor autosaves and surfacing those in the breadcrumb picker
+would be surprising.
 -->
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
-	import { ChevronLeft, ChevronRight, Folder, Layers, Loader2, User } from 'lucide-svelte'
-	import TextInput from '$lib/components/text_input/TextInput.svelte'
 	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
-	import WorkspaceItemRow from '$lib/components/WorkspaceItemRow.svelte'
-	import SearchItems from '$lib/components/SearchItems.svelte'
-	import { onMount, untrack } from 'svelte'
-	import { generateRandomString } from '$lib/utils'
-	import {
-		dirKey,
-		getCachedItems,
-		KIND_LABEL,
-		KIND_LABEL_LOWER,
-		kindKey,
-		leafKeyFor,
-		loadKind,
-		type WorkspaceItem,
-		type WorkspaceItemKind
-	} from './workspacePicker'
+	import { untrack } from 'svelte'
+	import { type WorkspaceItem, type WorkspaceItemKind } from './workspacePicker'
+	import { useWorkspaceItemsLoader } from './workspaceItemsLoader.svelte'
+	import DrillPicker from './DrillPicker.svelte'
+	import type { DrillBranch, DrillLeaf } from './drillPicker'
+	import { buildWorkspaceTree, legacyScopeToPath, relativizeWorkspacePath } from './workspaceTree'
 	import { listGlobalDrafts } from '$lib/components/copilot/chat/global/userDraftAdapter'
 	import { isGlobalAiEnabled } from '$lib/components/copilot/chat/global/gate'
 
 	type Kind = WorkspaceItemKind
-	type Item = WorkspaceItem
-	/** `'all'` is a virtual cross-kind scope — items still belong to a real
-	 * kind, but folders and the root row group items from every kind. */
 	type ScopeKind = Kind | 'all'
 
 	export type Scope = { kind: ScopeKind; dir?: string } | undefined
@@ -46,14 +32,12 @@ Clicking a row drills *down*; the chevron-left in the header walks one level
 	interface Props {
 		onPick: (item: WorkspaceItem) => void
 		kinds?: Kind[]
-		/** Where the picker lands when first opened. `undefined` = root (kinds list). */
 		initialScope?: Scope
-		/** Composite key of the row to highlight (e.g. `dir:flow:f/demo`). */
 		initialHighlight?: string
-		/** Currently-edited item — gets `aria-current` and a no-op click. If
-		 * `savedPath` differs from `path` (draft rename), the saved entry is
-		 * suppressed so only the live one shows. */
 		currentItem?: WorkspaceItem & { savedPath?: string }
+		externalFilter?: string
+		autoFocus?: boolean
+		flush?: boolean
 	}
 
 	let {
@@ -61,112 +45,39 @@ Clicking a row drills *down*; the chevron-left in the header walks one level
 		kinds = ['flow', 'script', 'app'],
 		initialScope,
 		initialHighlight,
-		currentItem
+		currentItem,
+		externalFilter,
+		autoFocus = true,
+		flush = false
 	}: Props = $props()
 
-	let searchInput: TextInput | undefined = $state()
-	let pickerRoot: HTMLElement | undefined = $state()
-	const instanceId = generateRandomString(8)
-	const listboxId = `pkr-list-${instanceId}`
-	const idFor = (key: string) => `pkr-${instanceId}-${key.replace(/[^a-zA-Z0-9-]/g, '_')}`
+	let inner = $state<DrillPicker<WorkspaceItem> | undefined>(undefined)
 
 	export function focus() {
-		searchInput?.focus()
+		inner?.focus()
+	}
+	export function handleKeydown(e: KeyboardEvent) {
+		inner?.handleKeydown(e)
+	}
+	export function pickHighlighted() {
+		inner?.pickHighlighted()
 	}
 
-	// Sibling-popover open: melt-ui's `openFocus` runs once during the close→open
-	// transition; the picker may not be mounted yet. Retry after settle.
-	// Also kicks off the initial scope's fetch — drill/goUp do the same from
-	// their respective branches, so `ensureLoaded` is always a callback
-	// reaction to user navigation, never a reactive consequence.
-	onMount(() => {
-		const t = setTimeout(focus, 50)
-		const initial = untrack(() => scope)
-		if (initial) {
-			if (initial.kind === 'all') for (const k of kinds) ensureLoaded(k)
-			else ensureLoaded(initial.kind)
-		}
-		return () => clearTimeout(t)
-	})
-
-	const leafKey = (it: Item) => leafKeyFor(it.kind, it.path)
-
-	let scope = $state<Scope>(untrack(() => initialScope))
-	let filter = $state('')
-
-	/**
-	 * Canonical entry point for changing the picker's scope. Triggers the
-	 * fetch for the kind(s) the new scope needs at the same point in time.
-	 * Replaces the older "react to `scope` change via `$effect`" wiring,
-	 * which had a subtle bug: `ensureLoaded` reads `loaded[kind]`, so the
-	 * effect ended up subscribed to the signal it fills — every fetch
-	 * result re-fired it. With explicit callbacks the fetch is tied to
-	 * the user's action, never to a reactive consequence of that action.
-	 */
-	function setScope(next: Scope) {
-		scope = next
-		if (!next) return
-		if (next.kind === 'all') for (const k of kinds) ensureLoaded(k)
-		else ensureLoaded(next.kind)
-	}
-
-	/** Tracks whether the last user action was mouse movement (true) or
-	 * keyboard nav (false). When false, row `mouseenter` events are ignored
-	 * — prevents the cursor from stealing the keyboard-driven highlight as
-	 * rows shift under it during scope changes. Re-enabled on `mousemove`.
-	 * Starts `false` so the synthetic `mouseenter` fired when the popover
-	 * mounts under a stationary cursor doesn't clobber `initialHighlight`. */
-	let mouseActive = $state(false)
-
-	// Seed from the last fetched snapshot so kinds already fetched in this
-	// session render on the first frame. Each entry is replaced once
-	// `loadKind` returns fresh data — stale-while-revalidate, so deploys and
-	// AI-created drafts surface on the next open without explicit cache
-	// busting.
-	let loaded = $state<Partial<Record<Kind, Item[]>>>(
-		(() => {
-			if (!$workspaceStore) return {}
-			const out: Partial<Record<Kind, Item[]>> = {}
-			for (const k of kinds) {
-				const cached = getCachedItems($workspaceStore, k)
-				if (cached) out[k] = cached
-			}
-			return out
-		})()
+	const loader = useWorkspaceItemsLoader(
+		() => $workspaceStore,
+		() => kinds
 	)
-	let loadingKind = $state<Partial<Record<Kind, boolean>>>({})
 
-	async function ensureLoaded(kind: Kind) {
-		if (!$workspaceStore) return
-		// Always re-fetch. If we have nothing cached, show a spinner; if we do,
-		// keep displaying it and quietly swap to fresh data when it lands.
-		// `loaded[kind]` is read inside `untrack(...)` because this function is
-		// reachable from the search `$effect` below — without the untrack,
-		// that effect would subscribe to the signal `ensureLoaded` fills, and
-		// each `loaded[kind] = items` (proxy `set` notifies even when the ref
-		// is unchanged from cache) would refire it → runaway loop. Drill
-		// navigation goes through `setScope` directly so it isn't affected.
-		if (!untrack(() => loaded[kind])) loadingKind[kind] = true
-		try {
-			const items = await loadKind($workspaceStore, kind)
-			loaded[kind] = items
-		} finally {
-			loadingKind[kind] = false
-		}
-	}
-
-	// Chat tools and session editor previews write drafts through
-	// `UserDraft` (workspace-scoped, localStorage-backed). Merge those into
-	// the picker so users can navigate to in-flight items that haven't been
-	// deployed yet. Filter to kinds the picker actually displays.
-	//
-	// Gated on the same dev flag as the rest of the sessions feature: without
-	// it there are no sessions, so the only UserDrafts present are the
-	// standalone editors' autosaves — surfacing those in the breadcrumb picker
-	// would be surprising (they'd appear as navigable items that 404 on the
-	// backend draft fetch). When the flag is off this is a no-op.
+	// Chat tools and session editor previews write drafts through `UserDraft`
+	// (workspace-scoped, localStorage-backed). Merge those into the picker so
+	// users can navigate to in-flight items that haven't been deployed yet.
+	// Filter to kinds the picker actually displays. Gated on the global-AI
+	// flag — without sessions, the only UserDrafts present are the standalone
+	// editors' autosaves and surfacing those in the breadcrumb picker would
+	// be surprising (they'd appear as navigable items that 404 on the backend
+	// draft fetch).
 	const KIND_TO_DRAFT_TYPE = { flow: 'flow', script: 'script', app: 'app' } as const
-	function aiDraftsForKind(k: Kind): Item[] {
+	function aiDraftsForKind(k: Kind): WorkspaceItem[] {
 		if (!isGlobalAiEnabled()) return []
 		if (!$workspaceStore) return []
 		const targetType = KIND_TO_DRAFT_TYPE[k]
@@ -181,573 +92,58 @@ Clicking a row drills *down*; the chevron-left in the header walks one level
 			}))
 	}
 
-	// Searching is global → load every kind.
-	$effect(() => {
-		if (filter.trim() !== '') for (const k of kinds) ensureLoaded(k)
-	})
-
-	type DirNode = {
-		fullPath: string
-		name: string
-		isScope: boolean
-		children: DirNode[]
-		leaves: Item[]
-	}
-
-	/** Merge AI-created in-memory drafts into a kind's list. The AI may have
-	 * scaffolded a script/flow/app via chat tools without the user saving
-	 * yet — those drafts should be navigable from the picker. Existing items
-	 * (same path) win to keep the backend's metadata (summary etc.). */
-	function withAiDrafts(items: Item[], k: Kind): Item[] {
-		const ai = aiDraftsForKind(k)
-		if (ai.length === 0) return items
-		const known = new Set(items.map((it) => it.path))
-		return items.concat(ai.filter((d) => !known.has(d.path)))
-	}
-
-	/** Inject the currently-edited item into a kind's list at its live path,
-	 * dropping the saved entry when a draft rename is in progress. Other kinds
-	 * pass through untouched. */
-	function withCurrent(items: Item[], k: Kind): Item[] {
-		if (!currentItem || currentItem.kind !== k) return items
-		const drafted =
-			currentItem.savedPath && currentItem.savedPath !== currentItem.path
-				? items.filter((it) => it.path !== currentItem.savedPath)
-				: items
-		if (drafted.some((it) => it.path === currentItem.path)) return drafted
-		return [
-			...drafted,
-			{
-				path: currentItem.path,
-				summary: currentItem.summary,
-				kind: k,
-				raw_app: currentItem.raw_app
-			}
-		]
-	}
-
-	function buildTreeFromItems(items: Item[]): DirNode[] {
-		const scopeRoots = new Map<string, DirNode>()
-		for (const it of items) {
-			const parts = it.path.split('/')
-			if (parts.length < 3) continue
-			const scopeFp = parts.slice(0, 2).join('/')
-			let node = scopeRoots.get(scopeFp)
-			if (!node) {
-				node = { fullPath: scopeFp, name: scopeFp, isScope: true, children: [], leaves: [] }
-				scopeRoots.set(scopeFp, node)
-			}
-			const slug = parts.slice(2)
-			let cur = node
-			for (let i = 0; i < slug.length - 1; i++) {
-				const seg = slug[i]
-				const fullPath = cur.fullPath + '/' + seg
-				let next = cur.children.find((c) => c.name === seg)
-				if (!next) {
-					next = { fullPath, name: seg, isScope: false, children: [], leaves: [] }
-					cur.children.push(next)
-				}
-				cur = next
-			}
-			cur.leaves.push(it)
-		}
-		const scopes = Array.from(scopeRoots.values()).sort((a, b) => {
-			const af = a.fullPath.startsWith('f/') ? 0 : 1
-			const bf = b.fullPath.startsWith('f/') ? 0 : 1
-			if (af !== bf) return af - bf
-			return a.fullPath.localeCompare(b.fullPath)
-		})
-		const sortNode = (n: DirNode) => {
-			n.children.sort((a, b) => a.name.localeCompare(b.name))
-			n.leaves.sort((a, b) => a.path.localeCompare(b.path))
-			n.children.forEach(sortNode)
-		}
-		scopes.forEach(sortNode)
-		return scopes
-	}
-
-	/** Per-kind tree deriveds. Each only re-evaluates `buildTreeFromItems`
-	 * when its own `loaded[k]` changes or when the user is mid-rename on
-	 * that kind — typing in a flow's path edit leaves script/app trees
-	 * cached. */
-	function buildIfActive(k: Kind, list: Item[] | undefined): DirNode[] {
-		if (!kinds.includes(k)) return []
-		const items = withAiDrafts(withCurrent(list ?? [], k), k)
-		if (items.length === 0) return []
-		return buildTreeFromItems(items)
-	}
-
-	const flowTree = $derived(buildIfActive('flow', loaded.flow))
-	const scriptTree = $derived(buildIfActive('script', loaded.script))
-	const appTree = $derived(buildIfActive('app', loaded.app))
-	/** Cross-kind tree: every loaded item from every active kind, merged into
-	 * one folder hierarchy. Each leaf still carries its real kind, so the row
-	 * icon and `editPathFor` routing still work; folders contain a mix. */
-	const allTree = $derived.by(() => {
-		const merged = kinds.flatMap((k) => withAiDrafts(withCurrent(loaded[k] ?? [], k), k))
-		return merged.length === 0 ? [] : buildTreeFromItems(merged)
-	})
-
-	function treeFor(k: ScopeKind): DirNode[] {
-		if (k === 'all') return allTree
-		if (k === 'flow') return flowTree
-		if (k === 'script') return scriptTree
-		return appTree
-	}
-
-	function findDirInList(list: DirNode[], fullPath: string): DirNode | undefined {
-		for (const n of list) {
-			if (n.fullPath === fullPath) return n
-			const sub = findDirInList(n.children, fullPath)
-			if (sub) return sub
-		}
-		return undefined
-	}
-
-	function parentDirPath(p: string): string | undefined {
-		const parts = p.split('/')
-		if (parts.length <= 2) return undefined
-		return parts.slice(0, -1).join('/')
-	}
-
-	type Entry =
-		| { type: 'kind'; key: string; kind: ScopeKind }
-		| { type: 'dir'; key: string; kind: ScopeKind; node: DirNode }
-		| { type: 'leaf'; key: string; item: Item }
-
-	type DisplayItem = Item & { marked?: string }
-	type SearchInput = Item & { _key: string }
-
-	let allItems = $derived<SearchInput[]>(
-		kinds.flatMap((k) =>
-			withAiDrafts(withCurrent(loaded[k] ?? [], k), k).map((it) => ({
-				...it,
-				_key: `${k}:${it.path}`
-			}))
-		)
+	const extraItemsByKind = $derived<Partial<Record<Kind, WorkspaceItem[]>>>(
+		Object.fromEntries(kinds.map((k) => [k, aiDraftsForKind(k)]))
 	)
 
-	let searchedItems: DisplayItem[] | undefined = $state(undefined)
-
-	let isSearching = $derived(filter.trim() !== '')
-
-	let searchResultsByKind = $derived.by(() => {
-		const out: Record<Kind, DisplayItem[]> = { flow: [], script: [], app: [] }
-		if (!searchedItems) return out
-		for (const it of searchedItems) out[it.kind].push(it)
-		return out
-	})
-
-	/** Rows currently shown — drives both rendering and keyboard nav. Not used
-	 * while `isSearching` (search renders its own grouped layout). */
-	let entries = $derived.by<Entry[]>(() => {
-		const s = scope
-		if (!s) {
-			const kindEntries = kinds.map((k) => ({
-				type: 'kind' as const,
-				key: kindKey(k),
-				kind: k
-			}))
-			// "All" only makes sense across multiple kinds — with a single kind
-			// it would duplicate that kind's own root row.
-			if (kinds.length <= 1) return kindEntries
-			return [
-				{ type: 'kind' as const, key: kindKey('all'), kind: 'all' as ScopeKind },
-				...kindEntries
-			]
-		}
-		const tree = treeFor(s.kind)
-		if (!s.dir) {
-			return tree.map((node) => ({
-				type: 'dir',
-				key: dirKey(s.kind, node.fullPath),
-				kind: s.kind,
-				node
-			}))
-		}
-		const node = findDirInList(tree, s.dir)
-		if (!node) return []
-		return [
-			...node.children.map(
-				(c): Entry => ({
-					type: 'dir',
-					key: dirKey(s.kind, c.fullPath),
-					kind: s.kind,
-					node: c
-				})
-			),
-			...node.leaves.map((l): Entry => ({ type: 'leaf', key: leafKey(l), item: l }))
-		]
-	})
-
-	let navKeys = $derived.by(() => {
-		if (isSearching) {
-			return kinds.flatMap((k) => searchResultsByKind[k].map((it) => leafKey(it)))
-		}
-		return entries.map((e) => e.key)
-	})
-
-	let highlightedKey = $state<string | undefined>(untrack(() => initialHighlight))
-	let highlightedId = $derived(highlightedKey ? idFor(highlightedKey) : undefined)
-
-	$effect(() => {
-		if (navKeys.length === 0) return
-		if (!highlightedKey || !navKeys.includes(highlightedKey)) {
-			highlightedKey = navKeys[0]
-		}
-	})
-
-	$effect(() => {
-		if (highlightedKey && navKeys.includes(highlightedKey)) {
-			requestAnimationFrame(scrollHighlightIntoView)
-		}
-	})
-
-	function scrollHighlightIntoView() {
-		if (!pickerRoot || !highlightedKey) return
-		const el = pickerRoot.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) {
-		// Ignored until the user actually moves the mouse. Prevents the cursor
-		// (parked over a row) from clobbering keyboard-driven selection when
-		// the layout shifts beneath it.
-		if (mouseActive) highlightedKey = key
-	}
-
-	function isCurrent(it: Item): boolean {
-		return !!currentItem && currentItem.kind === it.kind && currentItem.path === it.path
-	}
-
-	function pick(it: Item) {
-		if (isCurrent(it)) return
-		onPick({ path: it.path, summary: it.summary, kind: it.kind, raw_app: it.raw_app })
-	}
-
-	function activate(key: string | undefined) {
-		if (!key) return
-		if (isSearching) {
-			const flat = kinds.flatMap((k) => searchResultsByKind[k])
-			const it = flat.find((x) => leafKey(x) === key)
-			if (it) pick(it)
-			return
-		}
-		const entry = entries.find((e) => e.key === key)
-		if (!entry) return
-		drill(entry)
-	}
-
-	function drill(entry: Entry) {
-		if (entry.type === 'kind') {
-			setScope({ kind: entry.kind })
-		} else if (entry.type === 'dir') {
-			setScope({ kind: entry.kind, dir: entry.node.fullPath })
-		} else {
-			pick(entry.item)
-		}
-	}
-
-	function goUp() {
-		if (!scope) return
-		// Highlight the row in the parent view that represents the scope we
-		// just left, so the user sees where they came from.
-		if (!scope.dir) {
-			const leaving = kindKey(scope.kind)
-			setScope(undefined)
-			highlightedKey = leaving
-			return
-		}
-		const leaving = dirKey(scope.kind, scope.dir)
-		const parent = parentDirPath(scope.dir)
-		setScope(parent ? { kind: scope.kind, dir: parent } : { kind: scope.kind })
-		highlightedKey = leaving
-	}
-
-	function handleSearchKeydown(e: KeyboardEvent) {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault()
-			e.stopPropagation()
-			moveHighlight(1)
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault()
-			e.stopPropagation()
-			moveHighlight(-1)
-		} else if (e.key === 'Enter') {
-			e.preventDefault()
-			e.stopPropagation()
-			mouseActive = false
-			activate(highlightedKey)
-		} else if ((e.key === 'ArrowLeft' || e.key === 'Backspace') && filter === '' && scope) {
-			// Walk up the tree. Only when search is empty — otherwise these
-			// keys would hijack cursor movement / character deletion.
-			e.preventDefault()
-			e.stopPropagation()
-			mouseActive = false
-			goUp()
-		} else if (e.key === 'ArrowRight' && filter === '' && !isSearching) {
-			// Drill into the highlighted folder/kind. Leaves are reserved for
-			// Enter (more deliberate, since picking navigates away).
-			const entry = entries.find((en) => en.key === highlightedKey)
-			if (entry && entry.type !== 'leaf') {
-				e.preventDefault()
-				e.stopPropagation()
-				mouseActive = false
-				drill(entry)
-			}
-		}
-	}
-
-	/** Breadcrumb segments for the header — kind name first, then the scope
-	 * (`f/<folder>` or `u/<user>`) as one chunk, then any nested subdirs. */
-	let headerSegments = $derived.by<string[]>(() => {
-		if (!scope) return []
-		const out = [scope.kind === 'all' ? 'all' : KIND_LABEL_LOWER[scope.kind]]
-		if (scope.dir) {
-			const parts = scope.dir.split('/')
-			out.push(parts.slice(0, 2).join('/'))
-			for (let i = 2; i < parts.length; i++) out.push(parts[i])
-		}
-		return out
-	})
-
-	/** Full breadcrumb (used for the hover tooltip). */
-	let headerLabel = $derived(headerSegments.join(' › '))
-
-	/** Number of intermediate segments to hide behind a `…`. The collapsed
-	 * window is segments[2 .. 2 + hiddenCount); we always keep the first
-	 * two (kind, top-level scope) and the deepest segment. Bumped up by an
-	 * effect that measures actual overflow — see below. */
-	let hiddenCount = $state(0)
-
-	/** Breadcrumb shown to the user. Hides intermediate segments first, then
-	 * relies on `truncate-start` for any remaining overflow on the deepest
-	 * segment. Hover reveals the full path via `title`. */
-	let headerLabelDisplay = $derived.by(() => {
-		if (headerSegments.length <= 3 || hiddenCount === 0) return headerLabel
-		return [
-			headerSegments[0],
-			headerSegments[1],
-			'…',
-			...headerSegments.slice(2 + hiddenCount)
-		].join(' › ')
-	})
-
-	let breadcrumbSpan: HTMLElement | undefined = $state()
-	let lastSegmentsKey = ''
-
-	/** Measurement loop: each pass reads `scrollWidth > clientWidth` on the
-	 * truncated span; if overflowing and there's still an intermediate segment
-	 * to drop, increment `hiddenCount`. Mutating `hiddenCount` re-renders and
-	 * re-fires this effect, so the loop self-terminates either when the text
-	 * fits or when only [kind, scope, …, leaf] remain (`truncate-start` then
-	 * polishes any final overflow). When the breadcrumb itself changes (new
-	 * scope), reset to 0 first so a shorter path can re-expand. */
-	$effect(() => {
-		const key = headerSegments.join('|')
-		const segmentsChanged = key !== lastSegmentsKey
-		if (segmentsChanged) {
-			lastSegmentsKey = key
-			if (hiddenCount !== 0) {
-				hiddenCount = 0
-				return
-			}
-		}
-		// Track hiddenCount so each collapse step re-measures.
-		void hiddenCount
-		if (!breadcrumbSpan) return
-		const maxHide = Math.max(0, headerSegments.length - 3)
-		if (hiddenCount >= maxHide) return
-		queueMicrotask(() => {
-			if (!breadcrumbSpan) return
-			if (breadcrumbSpan.scrollWidth > breadcrumbSpan.clientWidth + 1) {
-				hiddenCount = hiddenCount + 1
-			}
+	const tree = $derived(
+		buildWorkspaceTree({
+			loaded: loader.loaded,
+			kinds,
+			currentItem,
+			loadingKind: loader.loadingKind,
+			extraItemsByKind
 		})
-	})
+	)
 
-	let scopeLoading = $derived.by(() => {
-		if (!scope) return false
-		if (scope.kind === 'all') {
-			return kinds.some((k) => !loaded[k] && !!loadingKind[k])
-		}
-		return !loaded[scope.kind] && !!loadingKind[scope.kind]
-	})
+	// Mount-time only: callers (BreadcrumbSegment, EditorHeader) snapshot the
+	// scope when the popover opens, so re-evaluating on prop changes would
+	// fight the user's drilling.
+	const computedInitialScope = untrack(() => legacyScopeToPath(initialScope, kinds))
 </script>
 
-<SearchItems
-	{filter}
-	items={isSearching ? allItems : []}
-	bind:filteredItems={searchedItems}
-	f={(x: SearchInput) => (x.summary ? `${x.summary} (${x.path})` : x.path)}
-	opts={{}}
-/>
-
-{#snippet leafRow(it: Item, secondary: string, baseClass: string)}
-	{@const key = leafKey(it)}
-	<WorkspaceItemRow
-		kind={it.kind}
-		summary={it.summary}
-		{secondary}
-		highlighted={key === highlightedKey}
-		current={isCurrent(it)}
-		id={idFor(key)}
-		navKey={key}
-		{baseClass}
-		onclick={() => pick(it)}
-		onmouseenter={() => setHoverHighlight(key)}
-	/>
+{#snippet leafIcon(leaf: DrillLeaf<WorkspaceItem>)}
+	<RowIcon kind={leaf.data.kind} size={12} />
 {/snippet}
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	bind:this={pickerRoot}
-	class="flex flex-col w-[420px] max-h-[60vh]"
-	onkeydown={handleSearchKeydown}
-	onmousemove={() => (mouseActive = true)}
->
-	<div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700">
-		<TextInput
-			bind:this={searchInput}
-			bind:value={filter}
-			size="sm"
-			inputProps={{
-				placeholder: 'Search by name or summary...',
-				'data-workspace-picker-search': '',
-				role: 'combobox',
-				'aria-controls': listboxId,
-				'aria-expanded': 'true',
-				'aria-autocomplete': 'list',
-				'aria-activedescendant': highlightedId
-			}}
-		/>
-	</div>
-
-	{#if scope}
-		{@const s = scope}
-		<button
-			type="button"
-			class="flex items-center gap-1.5 w-full text-left px-3 py-1 text-xs font-medium font-mono text-secondary bg-surface-secondary/20 hover:bg-surface-hover transition-colors"
-			onmousedown={(e) => e.preventDefault()}
-			onclick={goUp}
-			title={headerLabel}
-		>
-			<ChevronLeft size={12} class="shrink-0 text-secondary" />
-			{#if s.kind === 'all'}
-				<Layers size={12} class="shrink-0 text-tertiary" />
-			{:else}
-				<RowIcon kind={s.kind} size={12} />
-			{/if}
-			<span bind:this={breadcrumbSpan} class="flex-1 min-w-0 truncate truncate-start"
-				>{headerLabelDisplay}</span
-			>
-		</button>
+{#snippet branchIcon(branch: DrillBranch<WorkspaceItem>)}
+	{#if branch.key === 'kind:flow' || branch.key === 'kind:script' || branch.key === 'kind:app'}
+		{@const k = branch.key.slice(5) as Kind}
+		<RowIcon kind={k} size={12} />
+	{:else if branch.icon}
+		{@const Icon = branch.icon}
+		<Icon size={12} class="shrink-0 text-tertiary" />
 	{/if}
+{/snippet}
 
-	<div class="flex-1 overflow-y-auto" role="listbox" id={listboxId}>
-		{#if isSearching}
-			{@const total = (searchedItems ?? []).length}
-			{@const anyKindLoading = kinds.some((k) => loadingKind[k])}
-			{#if !searchedItems || anyKindLoading}
-				<!-- "Searching…" while any active kind is still loading, otherwise
-				     `SearchItems` would briefly write `filteredItems=[]` from the
-				     partial set and flash "No matches" before results trickle in. -->
-				<div role="status" class="px-3 py-2 text-xs text-tertiary flex items-center gap-2">
-					<Loader2 size={14} class="animate-spin" /> Searching…
-				</div>
-			{:else if total === 0}
-				<div role="status" class="px-3 py-2 text-xs text-tertiary">No matches</div>
-			{:else}
-				{#each kinds as k (k)}
-					{@const results = searchResultsByKind[k]}
-					{#if results.length > 0}
-						<div class="px-3 pt-3 pb-1 text-2xs uppercase tracking-wide text-tertiary font-medium">
-							{KIND_LABEL[k]}
-						</div>
-						<ul class="pb-1">
-							{#each results as it (leafKey(it))}
-								<li>{@render leafRow(it, it.path, 'py-1.5')}</li>
-							{/each}
-						</ul>
-					{/if}
-				{/each}
-			{/if}
-		{:else if scopeLoading && entries.length === 0}
-			<div role="status" class="px-3 py-2 text-xs text-tertiary flex items-center gap-2">
-				<Loader2 size={14} class="animate-spin" /> Loading…
-			</div>
-		{:else if entries.length === 0}
-			<div role="status" class="px-3 py-2 text-xs text-tertiary">Empty</div>
-		{:else}
-			<div class="flex flex-col py-1">
-				{#each entries as entry (entry.key)}
-					{@const isHl = entry.key === highlightedKey}
-					{#if entry.type === 'leaf'}
-						{@render leafRow(
-							entry.item,
-							scope?.dir ? entry.item.path.slice(scope.dir.length + 1) : entry.item.path,
-							'py-1.5'
-						)}
-					{:else}
-						<button
-							type="button"
-							id={idFor(entry.key)}
-							role="option"
-							aria-selected={isHl}
-							data-nav-key={entry.key}
-							class="flex items-center gap-1.5 w-full text-left px-3 py-1.5 text-xs font-medium font-mono text-emphasis transition-colors {isHl
-								? 'bg-surface-hover'
-								: ''}"
-							onmousedown={(e) => e.preventDefault()}
-							onclick={() => drill(entry)}
-							onmouseenter={() => setHoverHighlight(entry.key)}
-						>
-							{#if entry.type === 'kind'}
-								{#if entry.kind === 'all'}
-									<Layers size={12} class="shrink-0 text-tertiary" />
-									<span class="flex-1">All</span>
-								{:else}
-									<RowIcon kind={entry.kind} size={12} />
-									<span class="flex-1">{KIND_LABEL[entry.kind]}</span>
-								{/if}
-							{:else if entry.node.isScope && entry.node.fullPath.startsWith('u/')}
-								<User size={12} class="shrink-0 text-tertiary" />
-								<span class="flex-1 truncate">{entry.node.name}</span>
-							{:else}
-								<Folder size={12} class="shrink-0 text-tertiary" />
-								<span class="flex-1 truncate">{entry.node.name}</span>
-							{/if}
-							{#if entry.type === 'kind' && entry.kind !== 'all' && loadingKind[entry.kind]}
-								<Loader2 size={12} class="animate-spin text-tertiary" />
-							{/if}
-							<ChevronRight size={10} class="shrink-0 text-secondary" />
-						</button>
-					{/if}
-				{/each}
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	/* Path truncates from the start (left ellipsis) so the deepest (rightmost)
-	 * folder stays visible. `unicode-bidi: plaintext` keeps each path segment
-	 * laid out per its own direction — defends against any future RTL char
-	 * appearing in a workspace path. */
-	.truncate-start {
-		direction: rtl;
-		text-align: left;
-		unicode-bidi: plaintext;
-	}
-</style>
+<DrillPicker
+	bind:this={inner}
+	{tree}
+	onPick={(leaf) => onPick(leaf.data)}
+	initialScope={computedInitialScope}
+	{initialHighlight}
+	{externalFilter}
+	{autoFocus}
+	{flush}
+	{leafIcon}
+	{branchIcon}
+	leafSecondary={(leaf, scope) => relativizeWorkspacePath(leaf.data.path, scope)}
+	onScopeChange={(scope) => {
+		if (scope.length > 0) loader.ensureForScopeSegment(scope[0])
+		// Single-kind layout has no kind branch at root — `buildWorkspaceTree`
+		// collapses to the kind's children. The picker mounts with scope=[],
+		// so without this fallback nothing fires until the user searches.
+		else if (kinds.length === 1) loader.ensureLoaded(kinds[0])
+	}}
+	onFilterChange={loader.onFilterChange}
+/>
diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index 1252b999d7..e86ce913c7 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import AIChatMessage from './AIChatMessage.svelte'
 	import AppAvailableContextList from './AppAvailableContextList.svelte'
-	import AvailableContextList from './AvailableContextList.svelte'
+	import ChatContextPicker from './ChatContextPicker.svelte'
 	import { type Snippet } from 'svelte'
 	import {
 		AlertTriangle,
@@ -518,7 +518,7 @@
 				{#if showFooterLeftControls}
 					<div class="flex flex-row items-center gap-x-1.5 min-w-0 flex-wrap">
 						{#if showContextPicker && !disabled}
-							<Popover>
+							<Popover placement="bottom-start">
 								{#snippet trigger()}
 									<Button
 										nonCaptureEvent
@@ -540,16 +540,23 @@
 											}}
 										/>
 									{:else}
-										<AvailableContextList
+										<ChatContextPicker
 											{availableContext}
 											{selectedContext}
 											onSelect={(element) => {
 												void aiChatInput?.addContextToSelection(element)
+												aiChatInput?.insertMention(element.title)
 												close()
+												aiChatInput?.focusInput()
 											}}
 											onSelectWorkspaceItem={(element) => {
 												void aiChatInput?.addContextToSelection(element)
+												aiChatInput?.insertMention(element.title)
 												close()
+												aiChatInput?.focusInput()
+											}}
+											setShowing={(showing) => {
+												if (!showing) close()
 											}}
 										/>
 									{/if}
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index 7626b42380..2780930b79 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -129,6 +129,42 @@
 			aiChatManager.mode === AIMode.GLOBAL
 	)
 
+	/** Append `@title` to the textarea so the button-picker path stays in
+	 * sync with the inline `@<word>` mention path — both leave a visible
+	 * token tied to the selectedContext entry, which the textarea diffs on
+	 * to auto-remove items when the user deletes them. No-op when the
+	 * mention is already present so re-picking the same item doesn't
+	 * leave duplicate tokens. */
+	export function insertMention(title: string) {
+		const target = `@${title}`
+		if (instructions.split(/\s+/).includes(target)) return
+		const sep = instructions.length === 0 || /\s$/.test(instructions) ? '' : ' '
+		instructions = `${instructions}${sep}${target} `
+	}
+
+	/** Strip every `@title` token from the textarea — used when the user
+	 * deletes the corresponding badge so the badge X-button mirrors the
+	 * inverse (text-delete-to-badge-remove) sync. Only matches `@title` as a
+	 * standalone token (boundary on both sides) so substring matches don't
+	 * bleed into other words; only the whitespace adjacent to the removed
+	 * mention is collapsed so unrelated double-spaces stay intact. */
+	export function removeMention(title: string) {
+		// Pre-zap the textarea's mention diff snapshot so the upcoming strip
+		// doesn't refire the removal effect on a same-title sibling — the host
+		// has already mutated `selectedContext` to drop the targeted entry.
+		contextTextareaComponent?.unsyncMention(title)
+		const escaped = title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+		const re = new RegExp(`(^|\\s)@${escaped}(\\s|$)`, 'g')
+		instructions = instructions.replace(re, (_m, lead, trail) => {
+			// Boundary on at least one side → drop the mention entirely.
+			if (!lead || !trail) return ''
+			// Middle of text: keep ONE of the bracketing whitespace chars so
+			// the surviving tokens are still separated; preserve the leading
+			// one verbatim so newlines/tabs aren't downgraded to spaces.
+			return lead
+		})
+	}
+
 	export function focusInput() {
 		if (isContextEnabledMode) {
 			contextTextareaComponent?.focus()
@@ -226,6 +262,12 @@
 			onEditEnd()
 		} else {
 			aiChatManager.sendRequest({ instructions })
+			// clearForSend() pre-zaps the textarea's mention-sync so the wipe
+			// doesn't drop `selectedContext` before `AIChatManager.beforeSend`
+			// snapshots it. Only mounted in SCRIPT/FLOW/GLOBAL — APP and the
+			// fallback textarea still rely on the plain `instructions = ''`
+			// reset (no `@`-mention state to coordinate).
+			contextTextareaComponent?.clearForSend()
 			instructions = ''
 		}
 	}
@@ -460,6 +502,7 @@
 						selectedContext = selectedContext?.filter(
 							(c) => c.type !== element.type || c.title !== element.title
 						)
+						removeMention(element.title)
 					}}
 				/>
 			{/each}
@@ -488,9 +531,13 @@
 				bind:value={instructions}
 				{availableContext}
 				{selectedContext}
-				{isFirstMessage}
 				placeholder={modePlaceholder}
 				onAddContext={(contextElement) => void addContextToSelection(contextElement)}
+				onRemoveContext={(element) => {
+					selectedContext = selectedContext?.filter(
+						(c) => c.type !== element.type || c.title !== element.title
+					)
+				}}
 				onSendRequest={() => {
 					if (disabled) {
 						return
diff --git a/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte b/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
deleted file mode 100644
index fb914ecd0b..0000000000
--- a/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
+++ /dev/null
@@ -1,482 +0,0 @@
-<script lang="ts">
-	import FlowModuleIcon from '$lib/components/flows/FlowModuleIcon.svelte'
-	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
-	import type { FlowModule } from '$lib/gen/types.gen'
-	import { workspaceStore } from '$lib/stores'
-	import { workspaceRunnablesSearch } from './shared'
-	import {
-		ContextIconMap,
-		type ContextElement,
-		type WorkspaceScriptElement,
-		type WorkspaceFlowElement
-	} from './context'
-	import {
-		ArrowLeft,
-		Diff,
-		Database,
-		ChevronRight,
-		Code2,
-		Loader2
-	} from 'lucide-svelte'
-
-	interface Props {
-		availableContext: ContextElement[]
-		selectedContext: ContextElement[]
-		onSelect: (element: ContextElement) => void
-		onSelectWorkspaceItem?: (element: ContextElement) => void
-		setShowing?: (showing: boolean) => void
-		showAllAvailable?: boolean
-		stringSearch?: string
-		onViewChange?: (newNumber: number) => void
-	}
-
-	const {
-		availableContext,
-		selectedContext,
-		onSelect,
-		onSelectWorkspaceItem,
-		setShowing,
-		showAllAvailable = false,
-		stringSearch = '',
-		onViewChange
-	}: Props = $props()
-
-	// Current view state: 'categories' or specific category type
-	let currentView = $state<
-		'categories' | 'diffs' | 'modules' | 'databases' | 'scripts' | 'flows'
-	>('categories')
-
-	// Selected index for keyboard navigation
-	let itemSelectedIndex = $state(0)
-	let categorySelectedIndex = $state(0)
-
-	// Workspace search state
-	let workspaceSearchQuery = $state('')
-	let workspaceSearchResults = $state<{ path: string; summary: string }[]>([])
-	let workspaceSearchLoading = $state(false)
-	let searchInputElement = $state<HTMLInputElement | undefined>(undefined)
-	let searchDebounceTimer: ReturnType<typeof setTimeout> | undefined = undefined
-
-	// Category definitions
-	const categories = [
-		{ id: 'diffs' as const, label: 'Diffs', icon: Diff, searchable: false },
-		{ id: 'modules' as const, label: 'Modules', icon: BarsStaggered, searchable: false },
-		{ id: 'databases' as const, label: 'Databases', icon: Database, searchable: false },
-		{ id: 'scripts' as const, label: 'Scripts', icon: Code2, searchable: true },
-		{ id: 'flows' as const, label: 'Flows', icon: BarsStaggered, searchable: true }
-	]
-
-	const isSearchableView = $derived(
-		currentView === 'scripts' || currentView === 'flows'
-	)
-
-	const filteredAvailableContext = $derived(
-		availableContext.filter((context) => {
-			const filtered =
-				(showAllAvailable ||
-					!selectedContext.some((sc) => sc.type === context.type && sc.title === context.title)) &&
-				(!stringSearch || context.title.toLowerCase().includes(stringSearch.toLowerCase()))
-
-			return filtered
-		})
-	)
-
-	// Group context by category
-	const contextByCategory = $derived.by(() => {
-		const grouped: Record<string, ContextElement[]> = {
-			diffs: [],
-			modules: [],
-			databases: []
-		}
-
-		filteredAvailableContext.forEach((context) => {
-			if (context.type === 'diff') grouped.diffs.push(context)
-			else if (context.type === 'flow_module') grouped.modules.push(context)
-			else if (context.type === 'db') grouped.databases.push(context)
-		})
-
-		return grouped
-	})
-
-	const currentCategoryItems = $derived(
-		currentView !== 'categories' && !isSearchableView ? contextByCategory[currentView] : []
-	)
-
-	// Filter to only show categories with items (non-searchable) or always show (searchable)
-	const availableCategories = $derived(
-		categories.filter(
-			(cat) => cat.searchable || contextByCategory[cat.id]?.length > 0
-		)
-	)
-
-	// Report view changes
-	$effect(() => {
-		if (onViewChange) {
-			if (currentView === 'categories') {
-				onViewChange(availableCategories.length)
-			} else if (isSearchableView) {
-				onViewChange(workspaceSearchResults.length + 2) // +2 for back button and search input
-			} else {
-				onViewChange(currentCategoryItems.length + 1)
-			}
-		}
-	})
-
-	function handleCategoryClick(categoryId: string) {
-		currentView = categoryId as typeof currentView
-		itemSelectedIndex = 0
-		if (categoryId === 'scripts' || categoryId === 'flows') {
-			workspaceSearchQuery = ''
-			workspaceSearchResults = []
-			searchWorkspaceItems('')
-			setTimeout(() => searchInputElement?.focus(), 0)
-		}
-	}
-
-	function handleBackClick() {
-		currentView = 'categories'
-		itemSelectedIndex = 0
-		workspaceSearchQuery = ''
-		workspaceSearchResults = []
-	}
-
-	async function searchWorkspaceItems(query: string) {
-		const workspace = $workspaceStore
-		if (!workspace) return
-
-		workspaceSearchLoading = true
-		try {
-			const type = currentView === 'scripts' ? 'scripts' : 'flows'
-			const results = await workspaceRunnablesSearch.search(query, workspace, type)
-			workspaceSearchResults = results.map((r) => ({
-				path: r.path,
-				summary: r.summary
-			}))
-		} catch (err) {
-			console.error('Error searching workspace items', err)
-			workspaceSearchResults = []
-		} finally {
-			workspaceSearchLoading = false
-		}
-	}
-
-	function handleSearchInput() {
-		if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
-		searchDebounceTimer = setTimeout(() => {
-			searchWorkspaceItems(workspaceSearchQuery)
-		}, 300)
-	}
-
-	function handleWorkspaceItemSelect(item: { path: string; summary?: string }) {
-		if (!onSelectWorkspaceItem) return
-
-		if (currentView === 'scripts') {
-			const element: WorkspaceScriptElement & { deletable: boolean } = {
-				type: 'workspace_script',
-				path: item.path,
-				title: item.path,
-				summary: item.summary,
-				deletable: true
-			}
-			onSelectWorkspaceItem(element)
-		} else if (currentView === 'flows') {
-			const element: WorkspaceFlowElement & { deletable: boolean } = {
-				type: 'workspace_flow',
-				path: item.path,
-				title: item.path,
-				summary: item.summary,
-				deletable: true
-			}
-			onSelectWorkspaceItem(element)
-		}
-		currentView = 'categories'
-		workspaceSearchQuery = ''
-		workspaceSearchResults = []
-	}
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (isSearchableView) {
-			// Navigation in workspace search view
-			if (e.key === 'ArrowDown') {
-				e.preventDefault()
-				e.stopPropagation()
-				if (workspaceSearchResults.length > 0) {
-					itemSelectedIndex = (itemSelectedIndex + 1) % workspaceSearchResults.length
-				}
-			} else if (e.key === 'ArrowUp') {
-				e.preventDefault()
-				e.stopPropagation()
-				if (workspaceSearchResults.length > 0) {
-					itemSelectedIndex =
-						(itemSelectedIndex - 1 + workspaceSearchResults.length) %
-						workspaceSearchResults.length
-				}
-			} else if (e.key === 'Enter') {
-				// Only select if not typing in the search input, or if results exist
-				if (workspaceSearchResults.length > 0) {
-					e.preventDefault()
-					e.stopPropagation()
-					const selectedItem = workspaceSearchResults[itemSelectedIndex]
-					if (selectedItem) {
-						handleWorkspaceItemSelect(selectedItem)
-					}
-				}
-			} else if (e.key === 'Escape') {
-				e.preventDefault()
-				e.stopPropagation()
-				handleBackClick()
-			}
-		} else if (stringSearch.length > 0) {
-			// Navigation in search view (flat list)
-			if (e.key === 'ArrowDown') {
-				e.preventDefault()
-				e.stopPropagation()
-				if (filteredAvailableContext.length > 0) {
-					itemSelectedIndex = (itemSelectedIndex + 1) % filteredAvailableContext.length
-				}
-			} else if (e.key === 'ArrowUp') {
-				e.preventDefault()
-				e.stopPropagation()
-				if (filteredAvailableContext.length > 0) {
-					itemSelectedIndex =
-						(itemSelectedIndex - 1 + filteredAvailableContext.length) %
-						filteredAvailableContext.length
-				}
-			} else if (e.key === 'Enter' || e.key === 'Tab') {
-				if (e.key === 'Tab') e.preventDefault()
-				e.stopPropagation()
-				const selectedItem = filteredAvailableContext[itemSelectedIndex]
-				if (selectedItem) {
-					onSelect(selectedItem)
-				}
-			}
-		} else if (currentView === 'categories') {
-			// Navigation in categories view
-			if (e.key === 'ArrowDown') {
-				e.preventDefault()
-				e.stopPropagation()
-				categorySelectedIndex = (categorySelectedIndex + 1) % availableCategories.length
-			} else if (e.key === 'ArrowUp') {
-				e.preventDefault()
-				e.stopPropagation()
-				categorySelectedIndex =
-					(categorySelectedIndex - 1 + availableCategories.length) % availableCategories.length
-			} else if (e.key === 'Enter' || e.key === 'ArrowRight' || e.key === 'Tab') {
-				e.preventDefault()
-				e.stopPropagation()
-				const selectedCategory = availableCategories[categorySelectedIndex]
-				if (selectedCategory) {
-					handleCategoryClick(selectedCategory.id)
-				}
-			} else if (e.key === 'Escape' || e.key === 'ArrowLeft') {
-				e.preventDefault()
-				e.stopPropagation()
-				setShowing?.(false)
-			}
-		} else {
-			// Navigation in category items view
-			if (e.key === 'ArrowDown') {
-				e.preventDefault()
-				e.stopPropagation()
-				if (currentCategoryItems.length > 0) {
-					itemSelectedIndex = (itemSelectedIndex + 1) % currentCategoryItems.length
-				}
-			} else if (e.key === 'ArrowUp') {
-				e.preventDefault()
-				e.stopPropagation()
-				if (currentCategoryItems.length > 0) {
-					itemSelectedIndex =
-						(itemSelectedIndex - 1 + currentCategoryItems.length) % currentCategoryItems.length
-				}
-			} else if (e.key === 'Enter' || e.key === 'Tab') {
-				if (e.key === 'Tab') e.preventDefault()
-				e.stopPropagation()
-				const selectedItem = currentCategoryItems[itemSelectedIndex]
-				if (selectedItem) {
-					onSelect(selectedItem)
-					currentView = 'categories' // Go back to categories after selection
-				}
-			} else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-				e.preventDefault()
-				e.stopPropagation()
-				handleBackClick()
-			}
-		}
-	}
-
-	// Listen for keyboard events + clean up debounce timer
-	$effect(() => {
-		document.addEventListener('keydown', handleKeyDown)
-		return () => {
-			document.removeEventListener('keydown', handleKeyDown)
-			if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
-		}
-	})
-
-	$effect(() => {
-		if (stringSearch.length > 0) {
-			itemSelectedIndex = 0
-		}
-	})
-
-</script>
-
-<div
-	class="flex flex-col gap-1 text-primary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
-	onmousedown={(e) => {
-		// avoids triggering onblur on the textinput and closing the tooltip
-		// but allow input elements to receive focus for the search input
-		if (!(e.target instanceof HTMLInputElement)) {
-			e.preventDefault()
-		}
-	}}
-	role="listbox"
-	tabindex={0}
->
-	{#if stringSearch.length > 0}
-		<!-- Search view - show flat list -->
-		{#each filteredAvailableContext as element, i (element.type + '-' + element.title)}
-			{@const Icon = ContextIconMap[element.type]}
-			<button
-				class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
-				itemSelectedIndex
-					? 'bg-surface-hover'
-					: ''}"
-				onclick={() => {
-					onSelect(element)
-				}}
-			>
-				{#if element.type === 'flow_module'}
-					<FlowModuleIcon module={element as FlowModule} size={16} />
-				{:else if Icon}
-					<Icon size={16} />
-				{/if}
-				<span class="truncate">
-					{element.type === 'diff' || element.type === 'flow_module'
-						? element.title.replace(/_/g, ' ')
-						: element.title}
-				</span>
-			</button>
-		{/each}
-		{#if filteredAvailableContext.length === 0}
-			<div class="text-center text-primary text-xs py-2">No matching context</div>
-		{/if}
-	{:else if currentView === 'categories'}
-		<!-- Categories view -->
-		{#each availableCategories as category, i (category.id)}
-			{@const Icon = category.icon}
-			<button
-				class="hover:bg-surface-hover rounded-md p-1 pr-0 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
-				categorySelectedIndex
-					? 'bg-surface-hover'
-					: ''}"
-				onclick={() => handleCategoryClick(category.id)}
-			>
-				<Icon size={16} />
-				<span class="flex-1">{category.label}</span>
-				<ChevronRight size={16} />
-			</button>
-		{/each}
-		{#if availableCategories.length === 0}
-			<div class="text-center text-primary text-xs py-2">No available context</div>
-		{/if}
-	{:else if isSearchableView}
-		<!-- Workspace search view (scripts/flows) -->
-		<button
-			class="hover:bg-surface-hover rounded-md text-left flex flex-row gap-1 items-center font-normal transition-colors mb-1"
-			onclick={handleBackClick}
-		>
-			<ArrowLeft size={12} />
-			<span class="text-xs">Go back</span>
-		</button>
-
-		<input
-			bind:this={searchInputElement}
-			bind:value={workspaceSearchQuery}
-			oninput={handleSearchInput}
-			type="text"
-			placeholder="Search {currentView}..."
-			class="w-full text-xs px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700 bg-surface mb-1 outline-none focus:border-blue-500"
-		/>
-
-		{#if workspaceSearchLoading}
-			<div class="flex items-center justify-center py-2 gap-1">
-				<Loader2 size={14} class="animate-spin" />
-				<span class="text-xs text-secondary">Searching...</span>
-			</div>
-		{:else if workspaceSearchResults.length === 0}
-			<div class="text-center text-secondary text-xs py-2">
-				No results found
-			</div>
-		{:else}
-			{#each workspaceSearchResults as item, i (currentView + '-' + item.path)}
-				{@const isAlreadySelected = selectedContext.some(
-					(c) =>
-						((c.type === 'workspace_script' && currentView === 'scripts') ||
-							(c.type === 'workspace_flow' && currentView === 'flows')) &&
-						c.title === item.path
-				)}
-				<button
-					class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-col font-normal transition-colors {i ===
-					itemSelectedIndex
-						? 'bg-surface-hover'
-						: ''} {isAlreadySelected ? 'opacity-50' : ''}"
-					onclick={() => {
-						if (!isAlreadySelected) {
-							handleWorkspaceItemSelect(item)
-						}
-					}}
-					disabled={isAlreadySelected}
-				>
-					<div class="flex flex-row gap-1 items-center">
-						{#if currentView === 'scripts'}
-							<Code2 size={14} class="shrink-0" />
-						{:else}
-							<BarsStaggered size={14} class="shrink-0" />
-						{/if}
-						<span class="truncate">{item.path}</span>
-					</div>
-					{#if item.summary}
-						<span class="truncate text-secondary pl-5">{item.summary}</span>
-					{/if}
-				</button>
-			{/each}
-		{/if}
-	{:else}
-		<!-- Category items view -->
-		<button
-			class="hover:bg-surface-hover rounded-md text-left flex flex-row gap-1 items-center font-normal transition-colors mb-1"
-			onclick={handleBackClick}
-		>
-			<ArrowLeft size={12} />
-			<span class="text-xs">Go back</span>
-		</button>
-
-		{#if currentCategoryItems.length === 0}
-			<div class="text-center text-primary text-xs py-2">No items in this category</div>
-		{:else}
-			{#each currentCategoryItems as element, i (element.type + '-' + element.title)}
-				{@const Icon = ContextIconMap[element.type]}
-				<button
-					class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
-					itemSelectedIndex
-						? 'bg-surface-hover'
-						: ''}"
-					onclick={() => {
-						onSelect(element)
-						currentView = 'categories' // Go back to categories after selection
-					}}
-				>
-					{#if element.type === 'flow_module'}
-						<FlowModuleIcon module={element as FlowModule} size={16} />
-					{:else if Icon}
-						<Icon size={16} />
-					{/if}
-					<span class="truncate">
-						{element.type === 'diff' ? element.title.replace(/_/g, ' ') : element.title}
-					</span>
-				</button>
-			{/each}
-		{/if}
-	{/if}
-</div>
diff --git a/frontend/src/lib/components/copilot/chat/ChatContextPicker.svelte b/frontend/src/lib/components/copilot/chat/ChatContextPicker.svelte
new file mode 100644
index 0000000000..def6ea737b
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/ChatContextPicker.svelte
@@ -0,0 +1,273 @@
+<!--
+@component
+AI chat `@`-mention dropdown. Mounts the generic `DrillPicker` with a
+unified tree:
+
+  Diffs / Modules / Databases / Workspace
+                                     ├── All / Flows / Scripts
+                                     │       └── f/scope/sub/leaf …
+
+The Diffs / Modules / Databases branches are synthesized from the chat's
+in-memory `availableContext`. The Workspace branch delegates to
+`buildWorkspaceTree` so the picker shares the workspace caching machinery
+with the standalone picker used by `EditorHeader`.
+
+On a workspace-leaf pick, emits a reference-only `WorkspaceScriptElement` /
+`WorkspaceFlowElement` (path + title + summary). Content is materialized
+at message-prep time by `AIChatManager` — see PR #9216.
+-->
+<script lang="ts">
+	import { workspaceStore } from '$lib/stores'
+	import { Database, Diff, Layers } from 'lucide-svelte'
+	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
+	import FlowModuleIcon from '$lib/components/flows/FlowModuleIcon.svelte'
+	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
+	import type { FlowModule } from '$lib/gen/types.gen'
+	import DrillPicker from '$lib/components/DrillPicker.svelte'
+	import type { DrillBranch, DrillIcon, DrillLeaf, DrillNode } from '$lib/components/drillPicker'
+	import { type WorkspaceItem, type WorkspaceItemKind } from '$lib/components/workspacePicker'
+	import { useWorkspaceItemsLoader } from '$lib/components/workspaceItemsLoader.svelte'
+	import { buildWorkspaceTree, relativizeWorkspacePath } from '$lib/components/workspaceTree'
+	import {
+		ContextIconMap,
+		type ContextElement,
+		type WorkspaceFlowElement,
+		type WorkspaceScriptElement
+	} from './context'
+
+	interface Props {
+		availableContext: ContextElement[]
+		selectedContext: ContextElement[]
+		onSelect: (element: ContextElement) => void
+		onSelectWorkspaceItem?: (element: ContextElement) => void
+		setShowing?: (showing: boolean) => void
+		externalFilter?: string
+		autoFocus?: boolean
+	}
+
+	let {
+		availableContext,
+		selectedContext,
+		onSelect,
+		onSelectWorkspaceItem,
+		setShowing,
+		externalFilter,
+		autoFocus = true
+	}: Props = $props()
+
+	// Chat tree leaves carry either a workspace path (resolved to content
+	// at pick time) or a runtime ContextElement (added directly).
+	type ChatLeafData = WorkspaceItem | ContextElement
+
+	let inner = $state<DrillPicker<ChatLeafData> | undefined>(undefined)
+
+	export function handleKeydown(e: KeyboardEvent) {
+		inner?.handleKeydown(e)
+	}
+
+	// Hide already-selected runtime context in the badge popover (no
+	// external filter). Keep them in the inline-search view so a re-match
+	// isn't suppressed (matches the prior `showAllAvailable={true}` path).
+	const hideSelected = $derived(externalFilter === undefined)
+
+	function isSelected(c: ContextElement): boolean {
+		return selectedContext.some((s) => s.type === c.type && s.title === c.title)
+	}
+
+	// Workspace state shared with WorkspaceItemDrillPicker via the loader.
+	// Chat surfaces flows and scripts only — apps aren't useful as @-mention
+	// context because they're frontends, not callable units.
+	const WORKSPACE_KINDS: WorkspaceItemKind[] = ['flow', 'script']
+	const loader = useWorkspaceItemsLoader(
+		() => $workspaceStore,
+		() => WORKSPACE_KINDS
+	)
+
+	function contextLeaf(c: ContextElement): DrillLeaf<ChatLeafData> {
+		const displayLabel =
+			c.type === 'diff' || c.type === 'flow_module' ? c.title.replace(/_/g, ' ') : c.title
+		return {
+			type: 'leaf',
+			key: `${c.type}:${c.title}`,
+			label: displayLabel,
+			// Keep the raw title (with underscores) in the search haystack so
+			// `@my_module` matches as well as the display form `my module`.
+			// Skip the join when the display form is the raw title itself
+			// (e.g. `db` elements) to avoid `"x x"` haystacks.
+			searchableText: displayLabel === c.title ? c.title : `${displayLabel} ${c.title}`,
+			data: c
+		}
+	}
+
+	function buildContextBranch(
+		id: 'diffs' | 'modules' | 'databases',
+		label: string,
+		icon: DrillIcon,
+		type: 'diff' | 'flow_module' | 'db'
+	): DrillBranch<ChatLeafData> | null {
+		const filtered = availableContext.filter(
+			(c) => c.type === type && (!hideSelected || !isSelected(c))
+		)
+		if (filtered.length === 0) return null
+		return {
+			type: 'branch',
+			key: id,
+			label,
+			icon,
+			searchGroup: true,
+			children: filtered.map(contextLeaf)
+		}
+	}
+
+	// True when the chat root collapses to the workspace subtree (no Diffs /
+	// Modules / Databases branches present). Drives handleScopeChange's
+	// at-root preload — only fires when scope `[]` literally IS the workspace
+	// root; otherwise we wait until the user enters the Workspace branch.
+	const isWorkspaceOnly = $derived(
+		!availableContext.some(
+			(c) =>
+				(c.type === 'diff' || c.type === 'flow_module' || c.type === 'db') &&
+				(!hideSelected || !isSelected(c))
+		)
+	)
+
+	const tree = $derived<DrillNode<ChatLeafData>[]>(
+		(() => {
+			const branches: DrillNode<ChatLeafData>[] = []
+			const diffs = buildContextBranch('diffs', 'Diffs', Diff, 'diff')
+			const modules = buildContextBranch('modules', 'Modules', BarsStaggered, 'flow_module')
+			const dbs = buildContextBranch('databases', 'Databases', Database, 'db')
+			if (diffs) branches.push(diffs)
+			if (modules) branches.push(modules)
+			if (dbs) branches.push(dbs)
+			const wsChildren = buildWorkspaceTree({
+				loaded: loader.loaded,
+				kinds: WORKSPACE_KINDS,
+				loadingKind: loader.loadingKind
+			}) as DrillNode<ChatLeafData>[]
+			// Workspace-only (e.g. global chat with no diffs/modules/dbs): skip
+			// the redundant 'Workspace' row and surface its children at the root.
+			if (branches.length === 0) return wsChildren
+			branches.push({
+				type: 'branch',
+				key: 'workspace',
+				label: 'Workspace',
+				icon: Layers,
+				children: wsChildren
+			})
+			return branches
+		})()
+	)
+
+	function handlePick(leaf: DrillLeaf<ChatLeafData>) {
+		const d = leaf.data
+		if ('kind' in d) {
+			// Workspace item — emit a reference-only workspace_* element.
+			// Content is fetched at message-prep time by the chat manager
+			// (see PR #9216 which switched workspace context to references).
+			if (!onSelectWorkspaceItem) return
+			if (d.kind === 'script') {
+				const element: WorkspaceScriptElement & { deletable: boolean } = {
+					type: 'workspace_script',
+					path: d.path,
+					title: d.path,
+					summary: d.summary,
+					deletable: true
+				}
+				onSelectWorkspaceItem(element)
+			} else if (d.kind === 'flow') {
+				const element: WorkspaceFlowElement & { deletable: boolean } = {
+					type: 'workspace_flow',
+					path: d.path,
+					title: d.path,
+					summary: d.summary,
+					deletable: true
+				}
+				onSelectWorkspaceItem(element)
+			}
+			// Apps are filtered out via kinds=['flow','script']; ignore.
+		} else {
+			// Runtime context element — added directly.
+			onSelect(d)
+		}
+	}
+
+	function handleScopeChange(scope: string[]) {
+		// Two possible layouts:
+		//   (a) WRAPPED   — `['workspace', 'kind:all', ...]` — chat with Diffs /
+		//       Modules / Databases branches alongside Workspace.
+		//   (b) UNWRAPPED — `['kind:all', ...]` or `['dir:flow:...']` — chat
+		//       with only the workspace branch (global chat). The redundant
+		//       'workspace' wrapper is collapsed in the tree builder.
+		// Empty scope `[]` is the picker root: in (a) it's the chat root
+		// (don't preload — user hasn't entered Workspace yet), in (b) it's
+		// the workspace root itself (preload so kind branches don't render
+		// empty-without-spinner).
+		if (scope.length === 0) {
+			if (isWorkspaceOnly) loader.ensureAll()
+			return
+		}
+		const inWorkspace = scope[0] === 'workspace' || isWorkspaceOnly
+		if (!inWorkspace) return // diffs / modules / databases — synthesised, no fetch
+		const path = scope[0] === 'workspace' ? scope.slice(1) : scope
+		// Entering Workspace (wrapped: scope=['workspace']) or its 'All' sub-
+		// branch: preload every kind so the kind branches each show their
+		// spinner/items without a per-drill delay.
+		if (path.length === 0 || path[0] === 'kind:all') {
+			loader.ensureAll()
+			return
+		}
+		loader.ensureForScopeSegment(path[0])
+	}
+
+	// Close the picker on Escape. The badge popover's melt-ui handles Esc
+	// itself; for the inline-mention case (Portal-rendered, no melt) we
+	// listen at the document level. Skip when an upstream handler already
+	// claimed the event (defensive — melt-ui doesn't currently
+	// preventDefault on Esc, but a future host might).
+	function onDocumentKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && !e.defaultPrevented) {
+			setShowing?.(false)
+		}
+	}
+	$effect(() => {
+		document.addEventListener('keydown', onDocumentKeydown)
+		return () => document.removeEventListener('keydown', onDocumentKeydown)
+	})
+</script>
+
+{#snippet leafIcon(leaf: DrillLeaf<ChatLeafData>)}
+	{@const d = leaf.data}
+	{#if 'kind' in d}
+		<RowIcon kind={d.kind} size={12} />
+	{:else if d.type === 'flow_module'}
+		<FlowModuleIcon module={d as unknown as FlowModule} size={14} />
+	{:else}
+		{@const Icon = ContextIconMap[d.type]}
+		{#if Icon}<Icon size={12} class="shrink-0" />{/if}
+	{/if}
+{/snippet}
+
+{#snippet branchIcon(branch: DrillBranch<ChatLeafData>)}
+	{#if branch.key === 'kind:flow' || branch.key === 'kind:script' || branch.key === 'kind:app'}
+		{@const k = branch.key.slice(5) as WorkspaceItemKind}
+		<RowIcon kind={k} size={12} />
+	{:else if branch.icon}
+		{@const Icon = branch.icon}
+		<Icon size={12} class="shrink-0 text-tertiary" />
+	{/if}
+{/snippet}
+
+<DrillPicker
+	bind:this={inner}
+	{tree}
+	onPick={handlePick}
+	{externalFilter}
+	{autoFocus}
+	{leafIcon}
+	{branchIcon}
+	leafSecondary={(leaf, scope) =>
+		'kind' in leaf.data ? relativizeWorkspacePath(leaf.data.path, scope) : undefined}
+	onScopeChange={handleScopeChange}
+	onFilterChange={loader.onFilterChange}
+/>
diff --git a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
index ae58552055..b42eae4835 100644
--- a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
@@ -30,9 +30,13 @@
 
 <Popover>
 	{#snippet trigger()}
+		{@const label =
+			contextElement.type === 'diff'
+				? contextElement.title.replace(/_/g, ' ')
+				: contextElement.title}
 		<div
 			class={twMerge(
-				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-primary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
+				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-primary text-xs font-normal cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
 			)}
 			onmouseenter={() => (showDelete = true)}
 			onmouseleave={() => (showDelete = false)}
@@ -50,11 +54,7 @@
 					<SvelteComponent size={16} />
 				{/if}
 			</button>
-			<span class="truncate">
-				{contextElement.type === 'diff'
-					? contextElement.title.replace(/_/g, ' ')
-					: contextElement.title}
-			</span>
+			<span class="truncate" title={label}>{label}</span>
 		</div>
 	{/snippet}
 	{#snippet content()}
@@ -127,11 +127,7 @@
 				<div class="text-tertiary text-xs mb-1 px-2 pt-1">
 					{contextElement.source} (L{contextElement.startLine}-L{contextElement.endLine})
 				</div>
-				<HighlightCode
-					language="bun"
-					code={contextElement.content}
-					className="w-full p-2"
-				/>
+				<HighlightCode language="bun" code={contextElement.content} className="w-full p-2" />
 			</div>
 		{:else if contextElement.type === 'app_datatable'}
 			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
diff --git a/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts b/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts
index be993f312e..a69d6670b4 100644
--- a/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts
+++ b/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts
@@ -149,9 +149,17 @@ export default class ContextManager {
 
 			let newSelectedContext: ContextElement[] = [...currentlySelectedContext]
 
-			// Filter selected context to only include available items
+			// Filter selected context to only include available items. Workspace
+			// references (workspace_script / workspace_flow) are user-picked via
+			// the @-mention picker and intentionally aren't in availableContext —
+			// preserve them unconditionally so the badge survives editor refreshes.
 			newSelectedContext = newSelectedContext
-				.filter((c) => newAvailableContext.some((ac) => ac.type === c.type && ac.title === c.title))
+				.filter(
+					(c) =>
+						c.type === 'workspace_script' ||
+						c.type === 'workspace_flow' ||
+						newAvailableContext.some((ac) => ac.type === c.type && ac.title === c.title)
+				)
 				.map((c) =>
 					c.type === 'db' && dbSchemas[c.title]
 						? {
@@ -232,16 +240,22 @@ export default class ContextManager {
 				]
 			}
 
-			let newSelectedContext: ContextElement[] = [...currentlySelectedContext]
-
-			newSelectedContext = [
+			// Seed with the (refreshed) code block + everything else previously
+			// selected. The filter further down validates each entry against
+			// newAvailableContext (and the per-type allowlist for code_piece /
+			// workspace_*); types that are auto-derived (diff/error/db) survive
+			// when they're still in availableContext, user-picked workspace refs
+			// survive unconditionally, and `code` is excluded from the carryover
+			// because we just rebuilt it.
+			let newSelectedContext: ContextElement[] = [
 				{
 					type: 'code',
 					title: this.getContextCodePath(scriptOptions) ?? '',
 					content: scriptOptions.code,
 					lang: scriptOptions.lang,
 					deletable: false
-				}
+				},
+				...currentlySelectedContext.filter((c) => c.type !== 'code')
 			]
 
 			const db = this.getSelectedDBSchema(scriptOptions, dbSchemas)
@@ -265,22 +279,33 @@ export default class ContextManager {
 					(c) =>
 						(c.type === 'code_piece' && scriptOptions.code.includes(c.content)) ||
 						c.type === 'code' ||
+						// Workspace references are user-picked via @-mention and not in
+						// availableContext; preserve so badges survive editor refreshes.
+						c.type === 'workspace_script' ||
+						c.type === 'workspace_flow' ||
 						newAvailableContext.some((ac) => ac.type === c.type && ac.title === c.title)
 				)
-				.map((c) =>
-					c.type === 'code'
-						? {
-								...c,
-								content: scriptOptions.code,
-								title: this.getContextCodePath(scriptOptions)
-							}
-						: c.type === 'db' && dbSchemas[c.title]
-							? {
-									...c,
-									schema: dbSchemas[c.title]
-								}
-							: c
-				)
+				.map((c) => {
+					if (c.type === 'code') {
+						return {
+							...c,
+							content: scriptOptions.code,
+							title: this.getContextCodePath(scriptOptions)
+						}
+					}
+					if (c.type === 'db' && dbSchemas[c.title]) {
+						return { ...c, schema: dbSchemas[c.title] }
+					}
+					// For other auto-derived types (diff, error), rehydrate from the
+					// freshly-built newAvailableContext so the carryover doesn't keep
+					// stale `content` / `diff` payloads — preserve the user-set
+					// `deletable` flag on top of the fresh entry.
+					const fresh = newAvailableContext.find((ac) => ac.type === c.type && ac.title === c.title)
+					if (fresh && 'deletable' in c) {
+						return { ...fresh, deletable: c.deletable } as ContextElement
+					}
+					return fresh ?? c
+				})
 
 			this.availableContext = newAvailableContext
 			this.selectedContext = newSelectedContext
diff --git a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
index 6f924de457..b89e7954cb 100644
--- a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
@@ -1,22 +1,26 @@
 <script lang="ts">
 	import autosize from '$lib/autosize'
-	import { tick } from 'svelte'
 	import type { ContextElement } from './context'
-	import AvailableContextList from './AvailableContextList.svelte'
+	import ChatContextPicker from './ChatContextPicker.svelte'
 	import Portal from '$lib/components/Portal.svelte'
 	import { zIndexes } from '$lib/zIndexes'
 	import { twMerge } from 'tailwind-merge'
 	import { CHAT_INPUT_PADDING } from './aiChatManagerContext'
+	import { createFloatingActions, createVirtualElement } from 'svelte-floating-ui'
+	import { flip, offset, shift } from 'svelte-floating-ui/dom'
 
 	interface Props {
 		value: string
 		availableContext: ContextElement[]
 		selectedContext: ContextElement[]
-		isFirstMessage: boolean
 		placeholder: string
 		disabled: boolean
 		onSendRequest: () => void
 		onAddContext: (contextElement: ContextElement) => void
+		/** Called when the user deletes a previously-inserted `@title` mention
+		 * from the textarea. The host should drop the matching entry from
+		 * selectedContext (only items with `deletable !== false` are reported). */
+		onRemoveContext?: (contextElement: ContextElement) => void
 		className?: string
 		onKeyDown?: (e: KeyboardEvent) => void
 	}
@@ -25,21 +29,58 @@
 		value = $bindable(''),
 		availableContext,
 		selectedContext,
-		isFirstMessage,
 		placeholder,
 		disabled,
 		onSendRequest,
 		onAddContext,
+		onRemoveContext,
 		className = '',
 		onKeyDown = undefined
 	}: Props = $props()
 
+	const MENTION_RE = /@[\w/.\-\[\]]+/g
+	function extractMentions(text: string): Set<string> {
+		const out = new Set<string>()
+		for (const m of text.matchAll(MENTION_RE)) out.add(m[0].slice(1))
+		return out
+	}
+
+	// Titles currently appearing as `@title` mentions in the textarea. Compared
+	// against the previous snapshot in a $effect (NOT inside handleInput —
+	// the picker mutates `value` programmatically via `updateInstructionsWithContext`,
+	// which doesn't fire `oninput`, so a handleInput-only diff goes stale).
+	const mentionedTitles = $derived(extractMentions(value))
+	let prevMentionedTitles = $state<Set<string>>(new Set())
+
 	let showContextTooltip = $state(false)
 	let contextTooltipWord = $state('')
-	let tooltipPosition = $state({ x: 0, y: 0 })
 	let textarea = $state<HTMLTextAreaElement | undefined>(undefined)
 	let tooltipElement = $state<HTMLDivElement | undefined>(undefined)
-	let tooltipCurrentViewNumber = $state(0)
+	let chatContextPicker: ChatContextPicker | undefined = $state()
+
+	// Virtual reference anchored at the `@` that opened the mention (not the
+	// caret), so the picker stays put while the user types the query.
+	// svelte-floating-ui's `createVirtualElement` takes a raw ClientRect and
+	// wraps it in a function internally — re-`update()` on each anchor move.
+	let anchorRect: DOMRect = new DOMRect(0, 0, 1, 16)
+	const anchorRef = createVirtualElement({ getBoundingClientRect: anchorRect })
+
+	const [floatingRef, floatingContent, updateFloating] = createFloatingActions({
+		strategy: 'fixed',
+		placement: 'bottom-start',
+		// flip handles above/below only; horizontal overflow is solved by shift
+		// (picker slides left to fit) instead of flipping to `bottom-end` which
+		// would re-anchor the picker's right edge to the `@`.
+		middleware: [offset(6), flip({ crossAxis: false }), shift({ padding: 10 })],
+		autoUpdate: true
+	})
+
+	// Calling the reference action as a function (instead of `use:floatingRef`
+	// on a DOM node): svelte-floating-ui's `referenceAction` detects
+	// `'subscribe' in node` and subscribes to the virtual-element store. This
+	// is the supported path for virtual references — see the library's
+	// `referenceAction` / `setupVirtualElementObserver` in dist/index.js.
+	floatingRef(anchorRef)
 
 	// Properties to copy for caret position calculation
 	const properties = [
@@ -162,7 +203,7 @@
 				availableContext.find((c) => c.title === title) ||
 				selectedContext.find((c) => c.title === title)
 			if (inContext) {
-				return `<span class="bg-black dark:bg-white text-white dark:text-black z-10">${match}</span>`
+				return `<span class="bg-surface-accent-selected text-primary rounded box-decoration-clone z-10">${match}</span>`
 			}
 			return match
 		})
@@ -186,73 +227,30 @@
 		showContextTooltip = false
 	}
 
-	async function updateTooltipPosition(currentViewItemsNumber: number) {
+	function updateAnchorRect() {
 		if (!textarea) return
-
 		try {
-			const coords = getCaretCoordinates(textarea, textarea.selectionEnd)
+			// Index of the `@` that started the current mention. handleInput
+			// only opens the picker when `contextTooltipWord` (= `@xxx`) is the
+			// LAST whitespace-separated word in `value`, so the `@` always sits
+			// at `value.length - contextTooltipWord.length`.
+			const atIndex = value.length - contextTooltipWord.length
+			const coords = getCaretCoordinates(textarea, atIndex)
 			const rect = textarea.getBoundingClientRect()
-
-			const itemHeight = 28 // Estimated height of one item + gap (Button: p-1(8px) + text-xs(16px) = 24px; Parent: gap-1(4px) = 28px)
-			const containerPadding = 8 // p-1 top + p-1 bottom = 4px + 4px = 8px
-			const maxHeight = 192 + containerPadding // max-h-48 (192px) + containerPadding (8px)
-
-			// Calculate uncapped height, subtract gap from last item as it's not needed
-			const numItems = currentViewItemsNumber
-			let uncappedHeight =
-				numItems > 0 ? numItems * itemHeight - 4 + containerPadding : containerPadding
-			// Ensure height is at least containerPadding even if no items
-			uncappedHeight = Math.max(uncappedHeight, containerPadding)
-
-			const estimatedTooltipHeight = Math.min(uncappedHeight, maxHeight)
-			const margin = 6 // Small margin between caret and tooltip
-
-			// Initial position calculation
-			let finalX = rect.left + coords.left - 70
-			let finalY: number
-
-			if (isFirstMessage) {
-				// Position below the caret line
-				finalY = rect.top + coords.top + coords.height - 3
-			} else {
-				// Position above the caret line
-				finalY = rect.top + coords.top - estimatedTooltipHeight - margin
-			}
-
-			// Set initial position
-			tooltipPosition = {
-				x: finalX,
-				y: finalY
-			}
-
-			// Wait for tooltip to render with initial position
-			await tick()
-
-			// Get actual tooltip width if tooltip is rendered
-			if (tooltipElement) {
-				const tooltipRect = tooltipElement.getBoundingClientRect()
-				const tooltipWidth = tooltipRect.width
-
-				// Adjust position if tooltip would overflow right edge
-				if (finalX + tooltipWidth > window.innerWidth) {
-					finalX = Math.max(10, window.innerWidth - tooltipWidth - 10)
-
-					// Update position after measuring actual width
-					tooltipPosition = {
-						x: finalX,
-						y: finalY
-					}
-				}
-			}
+			anchorRect = new DOMRect(rect.left + coords.left, rect.top + coords.top, 1, coords.height)
+			// Re-prime the virtual ref then kick floating-ui (autoUpdate only fires
+			// on scroll/resize, not on text changes inside the textarea).
+			anchorRef.update({ getBoundingClientRect: anchorRect })
+			updateFloating()
 		} catch (error) {
-			// Hide tooltip on any error related to position calculation
-			console.error('Error updating tooltip position', error)
+			console.error('Error computing anchor rect', error)
 			showContextTooltip = false
 		}
 	}
 
 	function handleInput(e: Event) {
 		textarea = e.target as HTMLTextAreaElement
+
 		const words = value.split(/\s+/)
 		const lastWord = words[words.length - 1]
 
@@ -276,7 +274,24 @@
 		}
 
 		if (showContextTooltip) {
-			// avoid new line after Enter in the tooltip
+			// Forward navigation keys to the picker so the textarea-focused
+			// user can drive it. The picker preventDefault/stopPropagation's
+			// the ones it handles; we still preventDefault Enter so it never
+			// inserts a newline even if no item is highlighted. ArrowLeft /
+			// ArrowRight forward too but the picker only consumes them when
+			// the search query is empty — so cursor movement within `@xxx`
+			// still works once the user has typed past the `@`.
+			if (
+				e.key === 'ArrowDown' ||
+				e.key === 'ArrowUp' ||
+				e.key === 'ArrowLeft' ||
+				e.key === 'ArrowRight' ||
+				e.key === 'Enter' ||
+				e.key === 'Tab' ||
+				e.key === 'Escape'
+			) {
+				chatContextPicker?.handleKeydown(e)
+			}
 			if (e.key === 'Enter') {
 				e.preventDefault()
 			}
@@ -290,14 +305,54 @@
 	}
 
 	$effect(() => {
-		if (showContextTooltip) {
-			updateTooltipPosition(tooltipCurrentViewNumber)
+		// Re-track on every value change. The `@` position can shift when the
+		// user adds/deletes text BEFORE it (line wrap, etc.); the picker should
+		// follow. floating-ui's autoUpdate only fires on scroll/resize.
+		void value
+		if (showContextTooltip) updateAnchorRect()
+	})
+
+	$effect(() => {
+		// Mention-removal sync: any title that was a `@mention` last frame and
+		// is gone now → drop the matching selectedContext entry. Reactive (not
+		// inside handleInput) so it catches both keystroke deletions AND any
+		// programmatic value changes from the picker insertion path.
+		const prev = prevMentionedTitles
+		const cur = mentionedTitles
+		for (const title of prev) {
+			if (cur.has(title)) continue
+			const entry = selectedContext.find((c) => c.title === title && c.deletable !== false)
+			if (entry) onRemoveContext?.(entry)
 		}
+		prevMentionedTitles = cur
 	})
 
 	export function focus() {
 		textarea?.focus()
 	}
+
+	// Wipe after dispatching a send: pre-zero `prevMentionedTitles` so the
+	// effect above sees no diff when `value` clears, leaving `selectedContext`
+	// untouched until `AIChatManager.beforeSend` snapshots it. A manual
+	// textarea clear by the user keeps the old behaviour (badges drop).
+	export function clearForSend() {
+		prevMentionedTitles = new Set()
+		value = ''
+	}
+
+	// Called by the host BEFORE it strips a mention token from `value`
+	// (badge-delete path). Drops the title from `prevMentionedTitles` so when
+	// the strip lands, the effect sees no diff and doesn't dispatch another
+	// `onRemoveContext` — the host has already mutated `selectedContext`.
+	// Critical when two `selectedContext` entries share a title (workspace
+	// script + flow with same path): without this, the effect would find the
+	// surviving sibling by title and remove it too.
+	export function unsyncMention(title: string) {
+		if (!prevMentionedTitles.has(title)) return
+		const next = new Set(prevMentionedTitles)
+		next.delete(title)
+		prevMentionedTitles = next
+	}
 </script>
 
 <div class="relative w-full scroll-pb-2 bg-surface">
@@ -343,10 +398,12 @@
 	<Portal target="body">
 		<div
 			bind:this={tooltipElement}
-			class="absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg"
-			style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px; z-index: {zIndexes.tooltip};"
+			use:floatingContent
+			class="bg-surface border border-gray-200 dark:border-gray-700 rounded-md shadow-lg overflow-hidden"
+			style="z-index: {zIndexes.tooltip};"
 		>
-			<AvailableContextList
+			<ChatContextPicker
+				bind:this={chatContextPicker}
 				{availableContext}
 				{selectedContext}
 				onSelect={(element) => {
@@ -356,14 +413,10 @@
 					onAddContext(element)
 					updateInstructionsWithContext(element)
 					showContextTooltip = false
-					// Refocus the textarea since focus may have been on the search input
 					setTimeout(() => textarea?.focus(), 0)
 				}}
-				showAllAvailable={true}
-				stringSearch={contextTooltipWord.slice(1)}
-				onViewChange={(newNumber) => {
-					tooltipCurrentViewNumber = newNumber
-				}}
+				externalFilter={contextTooltipWord.slice(1)}
+				autoFocus={false}
 				setShowing={(showing) => {
 					showContextTooltip = showing
 				}}
diff --git a/frontend/src/lib/components/drillPicker.test.ts b/frontend/src/lib/components/drillPicker.test.ts
new file mode 100644
index 0000000000..41abab1281
--- /dev/null
+++ b/frontend/src/lib/components/drillPicker.test.ts
@@ -0,0 +1,183 @@
+import { describe, it, expect } from 'vitest'
+import {
+	collectLeavesGrouped,
+	leafHaystack,
+	resolveScope,
+	scopeChain,
+	type DrillBranch,
+	type DrillLeaf,
+	type DrillNode
+} from './drillPicker'
+
+const leaf = (key: string, label = key, secondary?: string): DrillLeaf<string> => ({
+	type: 'leaf',
+	key,
+	label,
+	secondary,
+	data: key
+})
+
+const branch = (
+	key: string,
+	children: DrillNode<string>[],
+	opts: { label?: string; omitFromSearch?: boolean; searchGroup?: boolean } = {}
+): DrillBranch<string> => ({
+	type: 'branch',
+	key,
+	label: opts.label ?? key,
+	children,
+	omitFromSearch: opts.omitFromSearch,
+	searchGroup: opts.searchGroup
+})
+
+describe('resolveScope', () => {
+	const tree: DrillNode<string>[] = [
+		branch('a', [branch('a.x', [leaf('a.x.1')]), leaf('a.2')]),
+		branch('b', [leaf('b.1')]),
+		leaf('top')
+	]
+
+	it('returns null at the root (empty scope)', () => {
+		expect(resolveScope(tree, [])).toBeNull()
+	})
+
+	it('returns the branch at a one-level scope', () => {
+		expect(resolveScope(tree, ['a'])?.key).toBe('a')
+	})
+
+	it('returns the branch at a nested scope', () => {
+		expect(resolveScope(tree, ['a', 'a.x'])?.key).toBe('a.x')
+	})
+
+	it('returns null when any segment is missing', () => {
+		expect(resolveScope(tree, ['a', 'missing'])).toBeNull()
+		expect(resolveScope(tree, ['nope'])).toBeNull()
+	})
+
+	it('returns null when a segment resolves to a leaf (not a branch)', () => {
+		expect(resolveScope(tree, ['top'])).toBeNull()
+		expect(resolveScope(tree, ['a', 'a.2'])).toBeNull()
+	})
+})
+
+describe('scopeChain', () => {
+	const tree: DrillNode<string>[] = [
+		branch('a', [branch('a.x', [leaf('a.x.1')]), leaf('a.2')]),
+		branch('b', [leaf('b.1')])
+	]
+
+	it('returns [] at the root', () => {
+		expect(scopeChain(tree, [])).toEqual([])
+	})
+
+	it('returns one branch for a one-level scope', () => {
+		const chain = scopeChain(tree, ['a'])
+		expect(chain.map((b) => b.key)).toEqual(['a'])
+	})
+
+	it('returns each branch along the path for a nested scope', () => {
+		const chain = scopeChain(tree, ['a', 'a.x'])
+		expect(chain.map((b) => b.key)).toEqual(['a', 'a.x'])
+	})
+
+	it('stops at the first missing/non-branch segment', () => {
+		const chain = scopeChain(tree, ['a', 'a.2', 'never-reached'])
+		expect(chain.map((b) => b.key)).toEqual(['a'])
+	})
+})
+
+describe('collectLeavesGrouped', () => {
+	it('flattens all leaves with null group when no branch has searchGroup', () => {
+		const tree: DrillNode<string>[] = [branch('a', [leaf('a.1')]), leaf('top')]
+		const result = collectLeavesGrouped(tree)
+		expect(result.map((r) => [r.leaf.key, r.group?.key])).toEqual([
+			['a.1', undefined],
+			['top', undefined]
+		])
+	})
+
+	it('groups leaves under their nearest searchGroup ancestor', () => {
+		const tree: DrillNode<string>[] = [
+			branch('flows', [branch('flows-folder', [leaf('flows-folder.1')]), leaf('flows.root')], {
+				searchGroup: true
+			})
+		]
+		const result = collectLeavesGrouped(tree)
+		expect(result.map((r) => [r.leaf.key, r.group?.key])).toEqual([
+			['flows-folder.1', 'flows'],
+			['flows.root', 'flows']
+		])
+	})
+
+	it('the DEEPEST searchGroup wins when nested', () => {
+		const tree: DrillNode<string>[] = [
+			branch('outer', [branch('inner', [leaf('deep')], { searchGroup: true })], {
+				searchGroup: true
+			})
+		]
+		const result = collectLeavesGrouped(tree)
+		expect(result[0].group?.key).toBe('inner')
+	})
+
+	it('skips branches marked omitFromSearch entirely', () => {
+		const tree: DrillNode<string>[] = [
+			branch('all', [leaf('shared')], { omitFromSearch: true }),
+			branch('flows', [leaf('shared'), leaf('uniq')], { searchGroup: true })
+		]
+		const result = collectLeavesGrouped(tree)
+		// `all` branch is skipped, so `shared` is only seen once and grouped under `flows`.
+		expect(result.map((r) => [r.leaf.key, r.group?.key])).toEqual([
+			['shared', 'flows'],
+			['uniq', 'flows']
+		])
+	})
+
+	it('deduplicates leaves by key (first occurrence wins)', () => {
+		// Simulate the workspace 'All' branch (omitFromSearch=true) plus per-kind
+		// branches having the same leaf — even without omitFromSearch the dedup
+		// would still guarantee no double-counting if the search tree changes.
+		const tree: DrillNode<string>[] = [
+			branch('flows', [leaf('a')], { searchGroup: true }),
+			branch('scripts', [leaf('a')], { searchGroup: true })
+		]
+		const result = collectLeavesGrouped(tree)
+		expect(result.length).toBe(1)
+		expect(result[0].group?.key).toBe('flows')
+	})
+
+	it('handles a mix of top-level leaves and branches', () => {
+		const tree: DrillNode<string>[] = [
+			leaf('root-leaf'),
+			branch('b', [leaf('b.1')], { searchGroup: true })
+		]
+		const result = collectLeavesGrouped(tree)
+		expect(result.map((r) => [r.leaf.key, r.group?.key])).toEqual([
+			['root-leaf', undefined],
+			['b.1', 'b']
+		])
+	})
+})
+
+describe('leafHaystack', () => {
+	it('uses searchableText when present (overrides label/secondary)', () => {
+		expect(leafHaystack({ ...leaf('k', 'Label'), searchableText: 'custom' })).toBe('custom')
+	})
+
+	it('joins label and secondary with parens when both are present', () => {
+		expect(leafHaystack(leaf('k', 'My Flow', 'f/demo/my_flow'))).toBe('My Flow (f/demo/my_flow)')
+	})
+
+	it('uses just label when secondary is absent', () => {
+		expect(leafHaystack(leaf('k', 'just label'))).toBe('just label')
+	})
+
+	it('falls back to secondary when label is empty', () => {
+		expect(leafHaystack({ type: 'leaf', key: 'k', label: '', secondary: 'sec', data: 'd' })).toBe(
+			'sec'
+		)
+	})
+
+	it('returns the empty string when nothing is set', () => {
+		expect(leafHaystack({ type: 'leaf', key: 'k', label: '', data: 'd' })).toBe('')
+	})
+})
diff --git a/frontend/src/lib/components/drillPicker.ts b/frontend/src/lib/components/drillPicker.ts
new file mode 100644
index 0000000000..5f3b5d6a25
--- /dev/null
+++ b/frontend/src/lib/components/drillPicker.ts
@@ -0,0 +1,116 @@
+import type { Component, ComponentType } from 'svelte'
+
+/** Icon constructor accepted by the picker — covers Svelte-5 `Component` and
+ * legacy `ComponentType` (lucide icons resolve to the former, but other
+ * callers in the repo still hand in the latter, see `TriggersBadge.svelte`). */
+export type DrillIcon = ComponentType | Component<any, {}, ''>
+
+/** Leaf node — terminal entry the user picks. The picker emits the leaf
+ * back via `onPick` so callers can react with the original `data` payload. */
+export type DrillLeaf<L> = {
+	type: 'leaf'
+	key: string
+	/** Primary line. */
+	label: string
+	/** Optional secondary line (e.g. full path). */
+	secondary?: string
+	/** Lucide-style component rendered with `size={12}`. The picker also
+	 * accepts a `leafIcon` snippet override that gets the whole leaf. */
+	icon?: DrillIcon
+	data: L
+	/** Optional override for the fuzzy-search haystack. Defaults to
+	 * `label` (or `secondary` when label is empty). */
+	searchableText?: string
+	/** Marks this leaf as the user's current location — gets `aria-current`
+	 * and a styled, no-op click. */
+	current?: boolean
+	/** When true, leaf is rendered but disabled (greyed + no-op click). */
+	disabled?: boolean
+}
+
+/** Branch node — interior entry the user drills into. */
+export type DrillBranch<L> = {
+	type: 'branch'
+	key: string
+	label: string
+	icon?: DrillIcon
+	children: DrillNode<L>[]
+	/** Show a spinner alongside the branch (async loading in progress). */
+	loading?: boolean
+	/** Hide from search index traversal. Used by the workspace adapter to
+	 * keep the cross-kind 'all' branch out of search (its leaves are
+	 * duplicates of the per-kind branches' leaves). */
+	omitFromSearch?: boolean
+	/** When true, leaves under this branch are grouped under its label in
+	 * the search-results display. The DEEPEST such ancestor wins. Used to
+	 * collapse folder hierarchies into kind/section headers — e.g. a leaf
+	 * at `Workspace > Flows > f/demo > foo` groups under "Flows" (not
+	 * "f/demo"). */
+	searchGroup?: boolean
+}
+
+export type DrillNode<L> = DrillBranch<L> | DrillLeaf<L>
+
+/** Walk the tree to the branch at the given scope path. Returns null at
+ * root (empty scope) or when any segment doesn't resolve to a branch. */
+export function resolveScope<L>(tree: DrillNode<L>[], scope: string[]): DrillBranch<L> | null {
+	if (scope.length === 0) return null
+	let level: DrillNode<L>[] = tree
+	let current: DrillBranch<L> | null = null
+	for (const key of scope) {
+		const node = level.find((n) => n.key === key)
+		if (!node || node.type !== 'branch') return null
+		current = node
+		level = node.children
+	}
+	return current
+}
+
+/** Walk the tree to the branch at scope, returning ALL branches along the
+ * path (for breadcrumb rendering). The root is implicit and not returned. */
+export function scopeChain<L>(tree: DrillNode<L>[], scope: string[]): DrillBranch<L>[] {
+	const chain: DrillBranch<L>[] = []
+	let level: DrillNode<L>[] = tree
+	for (const key of scope) {
+		const node = level.find((n) => n.key === key)
+		if (!node || node.type !== 'branch') break
+		chain.push(node)
+		level = node.children
+	}
+	return chain
+}
+
+/** Flatten the tree into a leaf list with each leaf's deepest
+ * `searchGroup`-anchor ancestor (or null if none). Skips branches marked
+ * `omitFromSearch`. Deduplicates leaves by `key` (first occurrence wins). */
+export function collectLeavesGrouped<L>(
+	tree: DrillNode<L>[]
+): { leaf: DrillLeaf<L>; group: DrillBranch<L> | null }[] {
+	const out: { leaf: DrillLeaf<L>; group: DrillBranch<L> | null }[] = []
+	const seen = new Set<string>()
+
+	function walk(nodes: DrillNode<L>[], group: DrillBranch<L> | null) {
+		for (const n of nodes) {
+			if (n.type === 'leaf') {
+				if (!seen.has(n.key)) {
+					seen.add(n.key)
+					out.push({ leaf: n, group })
+				}
+			} else {
+				if (n.omitFromSearch) continue
+				// Deeper `searchGroup` anchors override shallower ones.
+				const nextGroup = n.searchGroup ? n : group
+				walk(n.children, nextGroup)
+			}
+		}
+	}
+	walk(tree, null)
+	return out
+}
+
+/** Fuzzy-search haystack string for a leaf. */
+export function leafHaystack<L>(leaf: DrillLeaf<L>): string {
+	if (leaf.searchableText) return leaf.searchableText
+	if (leaf.label && leaf.secondary) return `${leaf.label} (${leaf.secondary})`
+	return leaf.label || leaf.secondary || ''
+}
diff --git a/frontend/src/lib/components/workspaceItemsLoader.svelte.ts b/frontend/src/lib/components/workspaceItemsLoader.svelte.ts
new file mode 100644
index 0000000000..45d64bd01b
--- /dev/null
+++ b/frontend/src/lib/components/workspaceItemsLoader.svelte.ts
@@ -0,0 +1,109 @@
+import { untrack } from 'svelte'
+import {
+	getCachedItems,
+	loadKind,
+	type WorkspaceItem,
+	type WorkspaceItemKind
+} from './workspacePicker'
+
+/**
+ * Shared loader for workspace items in drill pickers. Owns the
+ * `loaded` / `loadingKind` state, the stale-while-revalidate `ensureLoaded`
+ * coroutine, the `kind:` / `dir:` scope-segment decoder, and the
+ * "load every kind on first search" filter callback.
+ *
+ * Both `WorkspaceItemDrillPicker` and `ChatContextPicker` mount a
+ * `DrillPicker` over a workspace tree built from these maps. They each
+ * keep their own scope-walking policy (chat collapses an optional
+ * `'workspace'` wrapper segment; workspace handles single-kind mode at
+ * the top), but the kind decoding and lazy fetch live here.
+ *
+ * Both getters are read inside the returned closures so changing
+ * workspace or kinds after mount Just Works.
+ */
+export function useWorkspaceItemsLoader(
+	workspace: () => string | undefined,
+	kinds: () => readonly WorkspaceItemKind[]
+) {
+	// Seed from the module-level cache so kinds already fetched in this
+	// session render on the first frame. Re-fetching `ensureLoaded` later
+	// quietly swaps in fresh data (stale-while-revalidate).
+	let loaded = $state<Partial<Record<WorkspaceItemKind, WorkspaceItem[]>>>(
+		(() => {
+			const ws = untrack(workspace)
+			if (!ws) return {}
+			const out: Partial<Record<WorkspaceItemKind, WorkspaceItem[]>> = {}
+			for (const k of untrack(kinds)) {
+				const cached = getCachedItems(ws, k)
+				if (cached) out[k] = cached
+			}
+			return out
+		})()
+	)
+	let loadingKind = $state<Partial<Record<WorkspaceItemKind, boolean>>>({})
+
+	async function ensureLoaded(kind: WorkspaceItemKind) {
+		const ws = workspace()
+		if (!ws) return
+		// `loaded[kind]` read inside `untrack` so callers wiring this into
+		// a reactive context (DrillPicker's onFilterChange effect) don't
+		// subscribe to a signal `ensureLoaded` itself writes — that would
+		// re-fire the effect on every assignment and busy-loop.
+		if (!untrack(() => loaded[kind])) loadingKind[kind] = true
+		try {
+			const items = await loadKind(ws, kind)
+			loaded[kind] = items
+		} finally {
+			loadingKind[kind] = false
+		}
+	}
+
+	function ensureAll() {
+		for (const k of kinds()) ensureLoaded(k)
+	}
+
+	/** Decode one scope segment and trigger loads for the kind(s) it refers to.
+	 * Accepts:
+	 *  - `kind:<k>` (or `kind:all` — loads everything)
+	 *  - `dir:<k>:<path>` (the single-kind layout where there's no `kind:`
+	 *    wrapper at the top of the path)
+	 * Unknown segments and kinds outside the current `kinds()` set are
+	 * ignored — the caller has already filtered scope chains it cares about.
+	 */
+	function ensureForScopeSegment(segment: string) {
+		const ks = kinds()
+		const triggerKind = (k: string) => {
+			if (k === 'all') return ensureAll()
+			if ((ks as readonly string[]).includes(k)) ensureLoaded(k as WorkspaceItemKind)
+		}
+		if (segment.startsWith('kind:')) {
+			triggerKind(segment.slice(5))
+			return
+		}
+		if (segment.startsWith('dir:')) {
+			const rest = segment.slice(4)
+			const colon = rest.indexOf(':')
+			if (colon > 0) triggerKind(rest.slice(0, colon))
+		}
+	}
+
+	/** Global search → load every kind so results appear across the tree.
+	 * Skip on the empty filter so a bare mount doesn't cold-load anything. */
+	function onFilterChange(filter: string) {
+		if (filter.trim() === '') return
+		ensureAll()
+	}
+
+	return {
+		get loaded() {
+			return loaded
+		},
+		get loadingKind() {
+			return loadingKind
+		},
+		ensureLoaded,
+		ensureAll,
+		ensureForScopeSegment,
+		onFilterChange
+	}
+}
diff --git a/frontend/src/lib/components/workspaceTree.test.ts b/frontend/src/lib/components/workspaceTree.test.ts
new file mode 100644
index 0000000000..9698da9f71
--- /dev/null
+++ b/frontend/src/lib/components/workspaceTree.test.ts
@@ -0,0 +1,358 @@
+import { describe, it, expect } from 'vitest'
+import { buildWorkspaceTree, legacyScopeToPath, relativizeWorkspacePath } from './workspaceTree'
+import {
+	dirKey,
+	kindKey,
+	leafKeyFor,
+	type WorkspaceItem,
+	type WorkspaceItemKind
+} from './workspacePicker'
+import type { DrillBranch, DrillLeaf, DrillNode } from './drillPicker'
+
+const item = (
+	kind: WorkspaceItemKind,
+	path: string,
+	summary?: string,
+	raw_app?: boolean
+): WorkspaceItem => ({ kind, path, summary: summary ?? '', raw_app })
+
+const isBranch = <L>(n: DrillNode<L> | undefined): n is DrillBranch<L> => !!n && n.type === 'branch'
+const isLeaf = <L>(n: DrillNode<L> | undefined): n is DrillLeaf<L> => !!n && n.type === 'leaf'
+
+const childKeys = <L>(b: DrillBranch<L>) => b.children.map((c) => c.key)
+const findBranch = <L>(nodes: DrillNode<L>[], key: string): DrillBranch<L> => {
+	const n = nodes.find((x) => x.key === key)
+	if (!isBranch(n)) throw new Error(`expected branch ${key} in [${nodes.map((x) => x.key)}]`)
+	return n
+}
+
+describe('buildWorkspaceTree', () => {
+	describe('shape', () => {
+		it('returns an empty tree when kinds is empty', () => {
+			expect(buildWorkspaceTree({ loaded: {}, kinds: [], loadingKind: {} })).toEqual([])
+		})
+
+		it('multi-kind: prepends an All branch then per-kind branches', () => {
+			const tree = buildWorkspaceTree({
+				loaded: {
+					flow: [item('flow', 'f/demo/a')],
+					script: [item('script', 'f/demo/b')]
+				},
+				kinds: ['flow', 'script'],
+				loadingKind: {}
+			})
+			expect(tree.map((n) => n.key)).toEqual([kindKey('all'), kindKey('flow'), kindKey('script')])
+		})
+
+		it('All branch is omitFromSearch and labeled "All"', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')], script: [] },
+				kinds: ['flow', 'script'],
+				loadingKind: {}
+			})
+			const all = findBranch(tree, kindKey('all'))
+			expect(all.omitFromSearch).toBe(true)
+			expect(all.label).toBe('All')
+		})
+
+		it('per-kind branches are searchGroup anchors', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')], script: [] },
+				kinds: ['flow', 'script'],
+				loadingKind: {}
+			})
+			const flow = findBranch(tree, kindKey('flow'))
+			expect(flow.searchGroup).toBe(true)
+		})
+
+		it("single-kind: returns that kind branch's children directly (no kind-level)", () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a'), item('flow', 'u/alice/b')] },
+				kinds: ['flow'],
+				loadingKind: {}
+			})
+			// At the top we should see the scope dirs (f/demo, u/alice) directly,
+			// not a single 'kind:flow' branch wrapping them.
+			expect(tree.every((n) => isBranch(n) && n.key.startsWith('dir:flow:'))).toBe(true)
+			// f-scopes come before u-scopes
+			expect(tree.map((n) => n.key)).toEqual([dirKey('flow', 'f/demo'), dirKey('flow', 'u/alice')])
+		})
+	})
+
+	describe('loading state', () => {
+		it('per-kind branch is loading=true when loaded[k] is undefined and loadingKind[k] is true', () => {
+			const tree = buildWorkspaceTree({
+				loaded: {},
+				kinds: ['flow', 'script'],
+				loadingKind: { flow: true }
+			})
+			const flow = findBranch(tree, kindKey('flow'))
+			expect(flow.loading).toBe(true)
+		})
+
+		it('per-kind branch is not loading once loaded[k] is set, even mid-refetch', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [] },
+				kinds: ['flow', 'script'],
+				loadingKind: { flow: true }
+			})
+			const flow = findBranch(tree, kindKey('flow'))
+			expect(flow.loading).toBeFalsy()
+		})
+
+		it('All branch is loading when any kind is loading', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [] },
+				kinds: ['flow', 'script'],
+				loadingKind: { script: true }
+			})
+			const all = findBranch(tree, kindKey('all'))
+			expect(all.loading).toBe(true)
+		})
+	})
+
+	describe('dir forest', () => {
+		it('groups leaves under their scope, then nested folders', () => {
+			const tree = buildWorkspaceTree({
+				loaded: {
+					flow: [
+						item('flow', 'f/demo/a'),
+						item('flow', 'f/demo/sub/b'),
+						item('flow', 'f/demo/sub/c'),
+						item('flow', 'u/alice/d')
+					]
+				},
+				kinds: ['flow'],
+				loadingKind: {}
+			})
+			// Top-level: f/demo (folder scope), u/alice (user scope)
+			expect(tree.map((n) => n.key)).toEqual([dirKey('flow', 'f/demo'), dirKey('flow', 'u/alice')])
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			// Children: nested folder `sub` first, then leaf `a`
+			expect(childKeys(demo)).toEqual([
+				dirKey('flow', 'f/demo/sub'),
+				leafKeyFor('flow', 'f/demo/a')
+			])
+			const sub = findBranch(demo.children, dirKey('flow', 'f/demo/sub'))
+			expect(childKeys(sub)).toEqual([
+				leafKeyFor('flow', 'f/demo/sub/b'),
+				leafKeyFor('flow', 'f/demo/sub/c')
+			])
+		})
+
+		it('skips items with paths shorter than 3 segments', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo'), item('flow', 'f/demo/a')] },
+				kinds: ['flow'],
+				loadingKind: {}
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			expect(childKeys(demo)).toEqual([leafKeyFor('flow', 'f/demo/a')])
+		})
+	})
+
+	describe('leaf shape', () => {
+		it('uses summary as label and path as secondary when summary is present', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a', 'Hello')] },
+				kinds: ['flow'],
+				loadingKind: {}
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			const leaf = demo.children[0]
+			if (!isLeaf(leaf)) throw new Error('expected leaf')
+			expect(leaf.label).toBe('Hello')
+			expect(leaf.secondary).toBe('f/demo/a')
+		})
+
+		it('falls back to path as label when summary is empty', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')] },
+				kinds: ['flow'],
+				loadingKind: {}
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			const leaf = demo.children[0]
+			if (!isLeaf(leaf)) throw new Error('expected leaf')
+			expect(leaf.label).toBe('f/demo/a')
+			expect(leaf.secondary).toBeUndefined()
+		})
+
+		it('marks the currentItem leaf with current=true', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a'), item('flow', 'f/demo/b')] },
+				kinds: ['flow'],
+				loadingKind: {},
+				currentItem: item('flow', 'f/demo/a')
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			const [a, b] = demo.children
+			if (!isLeaf(a) || !isLeaf(b)) throw new Error('expected leaves')
+			expect(a.current).toBe(true)
+			expect(b.current).toBeFalsy()
+		})
+	})
+
+	describe('withCurrent: rename suppression', () => {
+		it('injects currentItem at its live path when not already in the list', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [] },
+				kinds: ['flow'],
+				loadingKind: {},
+				currentItem: { ...item('flow', 'f/demo/new'), summary: 'My Flow' }
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			expect(demo.children.map((c) => c.key)).toEqual([leafKeyFor('flow', 'f/demo/new')])
+		})
+
+		it('drops the savedPath entry during a mid-rename so only the live one shows', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/old', 'My Flow')] },
+				kinds: ['flow'],
+				loadingKind: {},
+				currentItem: { ...item('flow', 'f/demo/new', 'My Flow'), savedPath: 'f/demo/old' }
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			const paths = demo.children.map((c) => c.key)
+			expect(paths).toContain(leafKeyFor('flow', 'f/demo/new'))
+			expect(paths).not.toContain(leafKeyFor('flow', 'f/demo/old'))
+		})
+
+		it('does not re-inject when the live entry already exists in loaded', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a', 'Original')] },
+				kinds: ['flow'],
+				loadingKind: {},
+				currentItem: item('flow', 'f/demo/a', 'Original')
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			expect(demo.children.length).toBe(1)
+		})
+
+		it('passes other-kind items through untouched', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')], script: [item('script', 'f/demo/b')] },
+				kinds: ['flow', 'script'],
+				loadingKind: {},
+				currentItem: { ...item('flow', 'f/demo/new'), savedPath: 'f/demo/old' }
+			})
+			const script = findBranch(tree, kindKey('script'))
+			const demo = findBranch(script.children, dirKey('script', 'f/demo'))
+			expect(demo.children.map((c) => c.key)).toEqual([leafKeyFor('script', 'f/demo/b')])
+		})
+	})
+
+	describe('extraItemsByKind (drafts)', () => {
+		it('merges extras alongside loaded items', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')] },
+				kinds: ['flow'],
+				loadingKind: {},
+				extraItemsByKind: { flow: [item('flow', 'f/demo/draft')] }
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			expect(demo.children.map((c) => c.key).sort()).toEqual(
+				[leafKeyFor('flow', 'f/demo/a'), leafKeyFor('flow', 'f/demo/draft')].sort()
+			)
+		})
+
+		it('drops extras whose path collides with a loaded item (loaded wins)', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a', 'Backend summary')] },
+				kinds: ['flow'],
+				loadingKind: {},
+				extraItemsByKind: { flow: [item('flow', 'f/demo/a', 'Draft summary')] }
+			})
+			const demo = findBranch(tree, dirKey('flow', 'f/demo'))
+			expect(demo.children.length).toBe(1)
+			const leaf = demo.children[0]
+			if (!isLeaf(leaf)) throw new Error('expected leaf')
+			expect(leaf.label).toBe('Backend summary')
+		})
+
+		it('extras flow into the cross-kind All branch too', () => {
+			const tree = buildWorkspaceTree({
+				loaded: { flow: [], script: [item('script', 'f/demo/b')] },
+				kinds: ['flow', 'script'],
+				loadingKind: {},
+				extraItemsByKind: { flow: [item('flow', 'f/demo/draft')] }
+			})
+			const all = findBranch(tree, kindKey('all'))
+			const demo = findBranch(all.children, dirKey('all', 'f/demo'))
+			const keys = demo.children.map((c) => c.key)
+			expect(keys).toContain(leafKeyFor('flow', 'f/demo/draft'))
+			expect(keys).toContain(leafKeyFor('script', 'f/demo/b'))
+		})
+
+		it('is a no-op when extras are absent or empty', () => {
+			const noOpts = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')] },
+				kinds: ['flow'],
+				loadingKind: {}
+			})
+			const emptyExtras = buildWorkspaceTree({
+				loaded: { flow: [item('flow', 'f/demo/a')] },
+				kinds: ['flow'],
+				loadingKind: {},
+				extraItemsByKind: { flow: [] }
+			})
+			expect(JSON.stringify(noOpts)).toEqual(JSON.stringify(emptyExtras))
+		})
+	})
+})
+
+describe('legacyScopeToPath', () => {
+	it('returns [] for undefined scope', () => {
+		expect(legacyScopeToPath(undefined, ['flow', 'script'])).toEqual([])
+	})
+
+	it('multi-kind: returns [kindKey] for a kind-only scope', () => {
+		expect(legacyScopeToPath({ kind: 'flow' }, ['flow', 'script'])).toEqual([kindKey('flow')])
+	})
+
+	it('multi-kind: returns [kindKey, dirKey] for a kind+dir scope', () => {
+		expect(legacyScopeToPath({ kind: 'flow', dir: 'f/demo' }, ['flow', 'script'])).toEqual([
+			kindKey('flow'),
+			dirKey('flow', 'f/demo')
+		])
+	})
+
+	it('multi-kind: handles `all` as a kind', () => {
+		expect(legacyScopeToPath({ kind: 'all', dir: 'f/demo' }, ['flow', 'script'])).toEqual([
+			kindKey('all'),
+			dirKey('all', 'f/demo')
+		])
+	})
+
+	it('single-kind: returns [] for a kind-only scope (no kind level in tree)', () => {
+		expect(legacyScopeToPath({ kind: 'flow' }, ['flow'])).toEqual([])
+	})
+
+	it('single-kind: returns [dirKey] for a kind+dir scope', () => {
+		expect(legacyScopeToPath({ kind: 'flow', dir: 'f/demo' }, ['flow'])).toEqual([
+			dirKey('flow', 'f/demo')
+		])
+	})
+})
+
+describe('relativizeWorkspacePath', () => {
+	it('returns the absolute path when scope has no dir segment', () => {
+		expect(relativizeWorkspacePath('f/demo/a', [])).toBe('f/demo/a')
+		expect(relativizeWorkspacePath('f/demo/a', [kindKey('flow')])).toBe('f/demo/a')
+	})
+
+	it('shortens to the path relative to the deepest dir scope', () => {
+		const scope = [kindKey('flow'), dirKey('flow', 'f/demo')]
+		expect(relativizeWorkspacePath('f/demo/a', scope)).toBe('a')
+	})
+
+	it('uses the DEEPEST dir scope when there are nested ones', () => {
+		const scope = [kindKey('flow'), dirKey('flow', 'f/demo'), dirKey('flow', 'f/demo/sub')]
+		expect(relativizeWorkspacePath('f/demo/sub/b', scope)).toBe('b')
+	})
+
+	it('falls back to absolute path when the leaf is not under the dir scope', () => {
+		const scope = [kindKey('flow'), dirKey('flow', 'f/demo')]
+		expect(relativizeWorkspacePath('f/other/a', scope)).toBe('f/other/a')
+	})
+})
diff --git a/frontend/src/lib/components/workspaceTree.ts b/frontend/src/lib/components/workspaceTree.ts
new file mode 100644
index 0000000000..e7da20b62d
--- /dev/null
+++ b/frontend/src/lib/components/workspaceTree.ts
@@ -0,0 +1,244 @@
+import { Folder, Layers, User } from 'lucide-svelte'
+import {
+	dirKey,
+	KIND_LABEL,
+	kindKey,
+	leafKeyFor,
+	type WorkspaceItem,
+	type WorkspaceItemKind
+} from './workspacePicker'
+import type { DrillBranch, DrillLeaf, DrillNode } from './drillPicker'
+
+/** Intermediate path-hierarchy node — same shape as the previous
+ * `buildTreeFromItems` output, kept internal because the DrillPicker
+ * consumes `DrillNode`s instead. */
+type DirNode = {
+	fullPath: string
+	name: string
+	/** True for the top-level `f/<folder>` or `u/<user>` directories. */
+	isScope: boolean
+	children: DirNode[]
+	leaves: WorkspaceItem[]
+}
+
+/** Build the path-hierarchy from a flat list of workspace items. */
+function buildDirForest(items: WorkspaceItem[]): DirNode[] {
+	const scopeRoots = new Map<string, DirNode>()
+	for (const it of items) {
+		const parts = it.path.split('/')
+		if (parts.length < 3) continue
+		const scopeFp = parts.slice(0, 2).join('/')
+		let node = scopeRoots.get(scopeFp)
+		if (!node) {
+			node = { fullPath: scopeFp, name: scopeFp, isScope: true, children: [], leaves: [] }
+			scopeRoots.set(scopeFp, node)
+		}
+		const slug = parts.slice(2)
+		let cur = node
+		for (let i = 0; i < slug.length - 1; i++) {
+			const seg = slug[i]
+			const fullPath = cur.fullPath + '/' + seg
+			let next = cur.children.find((c) => c.name === seg)
+			if (!next) {
+				next = { fullPath, name: seg, isScope: false, children: [], leaves: [] }
+				cur.children.push(next)
+			}
+			cur = next
+		}
+		cur.leaves.push(it)
+	}
+	const scopes = Array.from(scopeRoots.values()).sort((a, b) => {
+		// `f/` (folder) scopes before `u/` (user) scopes; alphabetical within.
+		const af = a.fullPath.startsWith('f/') ? 0 : 1
+		const bf = b.fullPath.startsWith('f/') ? 0 : 1
+		if (af !== bf) return af - bf
+		return a.fullPath.localeCompare(b.fullPath)
+	})
+	const sortNode = (n: DirNode) => {
+		n.children.sort((a, b) => a.name.localeCompare(b.name))
+		n.leaves.sort((a, b) => a.path.localeCompare(b.path))
+		n.children.forEach(sortNode)
+	}
+	scopes.forEach(sortNode)
+	return scopes
+}
+
+/** Inject the currently-edited item at its live path, dropping the saved
+ * entry when a draft rename is mid-flight. Only applies to items of the
+ * same kind. */
+function withCurrent(
+	items: WorkspaceItem[],
+	k: WorkspaceItemKind,
+	currentItem: (WorkspaceItem & { savedPath?: string }) | undefined
+): WorkspaceItem[] {
+	if (!currentItem || currentItem.kind !== k) return items
+	const drafted =
+		currentItem.savedPath && currentItem.savedPath !== currentItem.path
+			? items.filter((it) => it.path !== currentItem.savedPath)
+			: items
+	if (drafted.some((it) => it.path === currentItem.path)) return drafted
+	return [
+		...drafted,
+		{
+			path: currentItem.path,
+			summary: currentItem.summary,
+			kind: k,
+			raw_app: currentItem.raw_app
+		}
+	]
+}
+
+function itemToLeaf(
+	it: WorkspaceItem,
+	currentItem: (WorkspaceItem & { savedPath?: string }) | undefined
+): DrillLeaf<WorkspaceItem> {
+	const isCurrent = !!currentItem && currentItem.kind === it.kind && currentItem.path === it.path
+	return {
+		type: 'leaf',
+		key: leafKeyFor(it.kind, it.path),
+		label: it.summary || it.path,
+		secondary: it.summary ? it.path : undefined,
+		data: it,
+		current: isCurrent
+	}
+}
+
+function dirToBranch(
+	d: DirNode,
+	scopeKind: WorkspaceItemKind | 'all',
+	currentItem: (WorkspaceItem & { savedPath?: string }) | undefined
+): DrillBranch<WorkspaceItem> {
+	// Top-level user scope (`u/<user>`) gets a person icon. Everything
+	// else (top-level `f/<folder>` or any deeper folder) is a folder.
+	const isUserScope = d.isScope && d.fullPath.startsWith('u/')
+	return {
+		type: 'branch',
+		key: dirKey(scopeKind, d.fullPath),
+		label: d.name,
+		icon: isUserScope ? User : Folder,
+		children: [
+			...d.children.map((c) => dirToBranch(c, scopeKind, currentItem)),
+			...d.leaves.map((l) => itemToLeaf(l, currentItem))
+		]
+	}
+}
+
+/** Merge AI-created in-memory drafts (or any caller-provided extras) into a
+ * kind's loaded list. The chat tools / session previews scaffold items via
+ * `UserDraft` before the user deploys; those should be navigable from the
+ * picker. Existing items (same path) win so backend metadata (summary etc.)
+ * isn't clobbered. */
+function withExtras(
+	items: WorkspaceItem[],
+	k: WorkspaceItemKind,
+	extraItemsByKind: Partial<Record<WorkspaceItemKind, WorkspaceItem[]>> | undefined
+): WorkspaceItem[] {
+	const extras = extraItemsByKind?.[k]
+	if (!extras || extras.length === 0) return items
+	const known = new Set(items.map((it) => it.path))
+	return items.concat(extras.filter((d) => !known.has(d.path)))
+}
+
+/** Build the workspace drill tree.
+ *
+ *  - One branch per kind in `kinds` (`Flows` / `Scripts` / `Apps`),
+ *    each containing the kind's path hierarchy.
+ *  - When `kinds.length > 1`, prepend an `All` branch that merges items
+ *    across kinds. The `All` branch is flagged `omitFromSearch` so its
+ *    leaves don't appear twice in global-search results.
+ *  - When `kinds.length === 1`, return the single kind branch's children
+ *    directly so the user lands on folders without a redundant level.
+ */
+export function buildWorkspaceTree(opts: {
+	loaded: Partial<Record<WorkspaceItemKind, WorkspaceItem[]>>
+	kinds: WorkspaceItemKind[]
+	currentItem?: WorkspaceItem & { savedPath?: string }
+	/** Per-kind spinner flag. Defaults to `{}` — callers that don't track
+	 * loading state (e.g. chat picker, which preloads eagerly) can omit it. */
+	loadingKind?: Partial<Record<WorkspaceItemKind, boolean>>
+	/** Per-kind extras to merge into the loaded list before tree-building
+	 * (e.g. AI-created localStorage drafts surfaced by the workspace adapter).
+	 * Extras whose path matches an already-loaded item are dropped. */
+	extraItemsByKind?: Partial<Record<WorkspaceItemKind, WorkspaceItem[]>>
+}): DrillNode<WorkspaceItem>[] {
+	const { loaded, kinds, currentItem, extraItemsByKind } = opts
+	const loadingKind = opts.loadingKind ?? {}
+
+	function kindBranch(k: WorkspaceItemKind): DrillBranch<WorkspaceItem> {
+		const raw = withExtras(loaded[k] ?? [], k, extraItemsByKind)
+		const items = withCurrent(raw, k, currentItem)
+		const dirs = items.length > 0 ? buildDirForest(items) : []
+		return {
+			type: 'branch',
+			key: kindKey(k),
+			label: KIND_LABEL[k],
+			children: dirs.map((d) => dirToBranch(d, k, currentItem)),
+			loading: !loaded[k] && !!loadingKind[k],
+			// Search results from this kind group under its label (collapses
+			// the folder hierarchy in the search view).
+			searchGroup: true
+		}
+	}
+
+	if (kinds.length === 0) return []
+
+	if (kinds.length === 1) {
+		return kindBranch(kinds[0]).children
+	}
+
+	// Cross-kind 'all' branch — flagged so search doesn't double-count leaves.
+	const allItems = kinds.flatMap((k) =>
+		withCurrent(withExtras(loaded[k] ?? [], k, extraItemsByKind), k, currentItem)
+	)
+	const allDirs = allItems.length > 0 ? buildDirForest(allItems) : []
+	const allBranch: DrillBranch<WorkspaceItem> = {
+		type: 'branch',
+		key: kindKey('all'),
+		label: 'All',
+		icon: Layers,
+		children: allDirs.map((d) => dirToBranch(d, 'all', currentItem)),
+		omitFromSearch: true,
+		loading: kinds.some((k) => !loaded[k] && !!loadingKind[k])
+	}
+
+	return [allBranch, ...kinds.map((k) => kindBranch(k))]
+}
+
+/** Map the legacy `{ kind, dir? }` initial-scope shape used by callers
+ * (BreadcrumbSegment / EditorHeader) onto the new generic `string[]` path. */
+export function legacyScopeToPath(
+	scope: { kind: WorkspaceItemKind | 'all'; dir?: string } | undefined,
+	kinds: WorkspaceItemKind[]
+): string[] {
+	if (!scope) return []
+	// Single-kind mode: there's no kind branch at root; scope's `kind` is
+	// implicit. Only the dir (if any) makes it to the path.
+	if (kinds.length === 1) {
+		return scope.dir ? [dirKey(scope.kind, scope.dir)] : []
+	}
+	const path: string[] = [kindKey(scope.kind)]
+	if (scope.dir) path.push(dirKey(scope.kind, scope.dir))
+	return path
+}
+
+/** Return `absolutePath` shortened to its segment relative to the deepest
+ * `dir:<kind>:<path>` segment in `scope`. Used to render leaf rows like
+ * `parquet_etl` instead of `f/examples/parquet_etl` once the user has
+ * drilled into `f/examples`. Falls back to the absolute path when no dir
+ * scope matches (e.g. at the kind level, or when the leaf isn't actually
+ * under the scoped dir). */
+export function relativizeWorkspacePath(absolutePath: string, scope: string[]): string {
+	for (let i = scope.length - 1; i >= 0; i--) {
+		const k = scope[i]
+		if (!k.startsWith('dir:')) continue
+		const rest = k.slice(4) // '<kind>:<path>'
+		const colon = rest.indexOf(':')
+		if (colon < 0) continue
+		const dirPath = rest.slice(colon + 1)
+		if (absolutePath.startsWith(dirPath + '/')) {
+			return absolutePath.slice(dirPath.length + 1)
+		}
+		return absolutePath
+	}
+	return absolutePath
+}