diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/DevPanel.vue b/packages/frontend/editor-ui/src/app/dev/dev-panel/DevPanel.vue
new file mode 100644
index 0000000000000..b29b4f2cfdd16
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/DevPanel.vue
@@ -0,0 +1,957 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+
+import router from '@/app/router';
+import FlagPanel from './FlagPanel.vue';
+import PromptPopover from './PromptPopover.vue';
+import { loadAnnotations, resolveElementForContext, saveAnnotations } from './annotationStorage';
+import { collectElementContext } from './collectElementContext';
+import {
+	currentPagePath,
+	currentViewport,
+	formatAnnotationsForClipboard,
+	type Annotation,
+} from './formatPrompt';
+import { DEV_PANEL_ROOT_ATTR, useElementPicker } from './useElementPicker';
+
+type TrackedAnnotation = Annotation & { elements: Element[] };
+
+const MARKER_SIZE = 22;
+const VISIBILITY_STORAGE_KEY = 'n8n-dev-panel:visible';
+
+function loadVisibility(): boolean {
+	try {
+		return window.localStorage.getItem(VISIBILITY_STORAGE_KEY) === '1';
+	} catch {
+		return false;
+	}
+}
+
+function saveVisibility(value: boolean) {
+	try {
+		window.localStorage.setItem(VISIBILITY_STORAGE_KEY, value ? '1' : '0');
+	} catch {
+		// ignore
+	}
+}
+
+const { isPicking, hoveredElement, selectedElement, dragRect, start, stop, clearSelection } =
+	useElementPicker();
+const visible = ref(loadVisibility());
+const annotations = shallowRef<TrackedAnnotation[]>([]);
+const pendingMulti = shallowRef<Element[]>([]);
+const toast = ref<{ kind: 'error'; message: string } | null>(null);
+const justCopied = ref(false);
+let copiedResetTimer: ReturnType<typeof setTimeout> | null = null;
+const rectVersion = ref(0);
+const expanded = ref(false);
+const flagsOpen = ref(false);
+const editingId = ref<string | null>(null);
+const currentPath = ref(window.location.pathname);
+
+const editingPrompt = computed(() => {
+	const id = editingId.value;
+	if (!id) return '';
+	return annotations.value.find((a) => a.id === id)?.prompt ?? '';
+});
+
+const annotationCount = computed(() => annotations.value.length);
+const hasAnnotations = computed(() => annotationCount.value > 0);
+
+const hoverOverlayStyle = computed(() => {
+	const el = hoveredElement.value;
+	if (!el) return { display: 'none' };
+	const rect = el.getBoundingClientRect();
+	return {
+		top: `${rect.top}px`,
+		left: `${rect.left}px`,
+		width: `${rect.width}px`,
+		height: `${rect.height}px`,
+	};
+});
+
+type Marker = {
+	id: string;
+	index: number;
+	top: number;
+	left: number;
+	annotation: TrackedAnnotation;
+	isMulti: boolean;
+};
+
+const markers = computed<Marker[]>(() => {
+	void rectVersion.value;
+	const result: Marker[] = [];
+	annotations.value.forEach((annotation, idx) => {
+		const isMulti = annotation.contexts.length > 1;
+		annotation.contexts.forEach((context, ctxIdx) => {
+			let viewportTop: number;
+			let viewportLeft: number;
+			let width: number;
+			let height: number;
+
+			const live = annotation.elements[ctxIdx];
+			if (live?.isConnected) {
+				const r = live.getBoundingClientRect();
+				if (r.width === 0 || r.height === 0) return;
+				viewportTop = r.top;
+				viewportLeft = r.left;
+				width = r.width;
+				height = r.height;
+			} else {
+				const bbox = context.bbox;
+				if (!bbox) return;
+				if (bbox.width === 0 || bbox.height === 0) return;
+				viewportTop = bbox.isFixed ? bbox.y : bbox.y - window.scrollY;
+				viewportLeft = bbox.isFixed ? bbox.x : bbox.x - window.scrollX;
+				width = bbox.width;
+				height = bbox.height;
+			}
+
+			result.push({
+				id: `${annotation.id}-${ctxIdx}`,
+				index: idx + 1,
+				top: viewportTop + height / 2 - MARKER_SIZE / 2,
+				left: viewportLeft + width / 2 - MARKER_SIZE / 2,
+				annotation,
+				isMulti,
+			});
+		});
+	});
+	return result;
+});
+
+type PendingOutline = { top: number; left: number; width: number; height: number };
+
+const pendingOutlines = computed<PendingOutline[]>(() => {
+	void rectVersion.value;
+	const result: PendingOutline[] = [];
+	for (const el of pendingMulti.value) {
+		if (!el.isConnected) continue;
+		const rect = el.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) continue;
+		result.push({ top: rect.top, left: rect.left, width: rect.width, height: rect.height });
+	}
+	return result;
+});
+
+function bumpRects() {
+	rectVersion.value += 1;
+}
+
+let frameId: number | null = null;
+function scheduleBump() {
+	if (frameId !== null) return;
+	frameId = requestAnimationFrame(() => {
+		frameId = null;
+		bumpRects();
+	});
+}
+
+watch(selectedElement, (el) => {
+	if (!el) return;
+	if (!pendingMulti.value.includes(el)) {
+		pendingMulti.value = [];
+	}
+});
+
+function handleShiftKeyUp(event: KeyboardEvent) {
+	if (event.key !== 'Shift') return;
+	if (!isPicking.value) return;
+	if (pendingMulti.value.length === 0) return;
+	commitPendingMulti();
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+	return target.isContentEditable;
+}
+
+function handleToggleShortcut(event: KeyboardEvent) {
+	if (!event.ctrlKey || !event.shiftKey) return;
+	if (event.key.toLowerCase() !== 'd') return;
+	if (isEditableTarget(event.target)) return;
+	event.preventDefault();
+	visible.value = !visible.value;
+	if (!visible.value) {
+		expanded.value = false;
+		flagsOpen.value = false;
+		stop();
+		clearSelection();
+		pendingMulti.value = [];
+		editingId.value = null;
+	}
+}
+
+function loadForPath(path: string) {
+	const stored = loadAnnotations(path);
+	annotations.value = stored.map((a) => ({
+		...a,
+		elements: a.contexts
+			.map((c) => resolveElementForContext(c))
+			.filter((el): el is Element => el !== null),
+	}));
+	editingId.value = null;
+	bumpRects();
+}
+
+function reresolveIfNeeded() {
+	let changed = false;
+	const next = annotations.value.map((a) => {
+		const fullyConnected =
+			a.elements.length === a.contexts.length && a.elements.every((el) => el.isConnected);
+		if (fullyConnected) return a;
+		const resolved = a.contexts
+			.map((c) => resolveElementForContext(c))
+			.filter((el): el is Element => el !== null);
+		const unchanged =
+			resolved.length === a.elements.length && resolved.every((el, i) => el === a.elements[i]);
+		if (unchanged) return a;
+		changed = true;
+		return { ...a, elements: resolved };
+	});
+	if (changed) {
+		annotations.value = next;
+		bumpRects();
+	}
+}
+
+let resolveFrameId: number | null = null;
+function scheduleReresolve() {
+	if (resolveFrameId !== null) return;
+	resolveFrameId = requestAnimationFrame(() => {
+		resolveFrameId = null;
+		reresolveIfNeeded();
+	});
+}
+
+let activeCleanup: (() => void) | null = null;
+
+function activateObservers() {
+	if (activeCleanup) return;
+
+	window.addEventListener('scroll', scheduleBump, true);
+	window.addEventListener('resize', scheduleBump);
+	window.addEventListener('keyup', handleShiftKeyUp, true);
+
+	const unsubscribeRouter = router.afterEach((to) => {
+		currentPath.value = to.path;
+	});
+
+	const observer = new MutationObserver(scheduleReresolve);
+	observer.observe(document.body, { childList: true, subtree: true });
+
+	const livePath = router.currentRoute.value.path;
+	if (livePath === currentPath.value) {
+		loadForPath(livePath);
+	} else {
+		currentPath.value = livePath;
+	}
+
+	activeCleanup = () => {
+		window.removeEventListener('scroll', scheduleBump, true);
+		window.removeEventListener('resize', scheduleBump);
+		window.removeEventListener('keyup', handleShiftKeyUp, true);
+		unsubscribeRouter();
+		observer.disconnect();
+	};
+}
+
+function deactivateObservers() {
+	activeCleanup?.();
+	activeCleanup = null;
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', handleToggleShortcut, true);
+	if (visible.value) activateObservers();
+});
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleToggleShortcut, true);
+	deactivateObservers();
+	if (frameId !== null) cancelAnimationFrame(frameId);
+	if (resolveFrameId !== null) cancelAnimationFrame(resolveFrameId);
+});
+
+watch(visible, (v) => {
+	if (v) activateObservers();
+	else deactivateObservers();
+	saveVisibility(v);
+});
+
+watch(currentPath, (newPath, oldPath) => {
+	if (newPath === oldPath) return;
+	loadForPath(newPath);
+});
+
+watch(annotations, (current) => {
+	const serializable = current.map(({ elements: _elements, ...rest }) => rest);
+	saveAnnotations(currentPath.value, serializable);
+});
+
+function showErrorToast(message: string) {
+	toast.value = { kind: 'error', message };
+	setTimeout(() => {
+		toast.value = null;
+	}, 3000);
+}
+
+function generateId() {
+	if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID();
+	return `a-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function startPicker() {
+	start({ onShiftPick: handleShiftPick, onDragSelect: handleDragSelect });
+}
+
+function handleDragSelect(els: Element[]) {
+	if (els.length === 0) return;
+	pendingMulti.value = els;
+	commitPendingMulti();
+}
+
+function handleShiftPick(el: Element) {
+	const current = pendingMulti.value;
+	const idx = current.indexOf(el);
+	if (idx >= 0) {
+		pendingMulti.value = [...current.slice(0, idx), ...current.slice(idx + 1)];
+	} else {
+		pendingMulti.value = [...current, el];
+	}
+	bumpRects();
+}
+
+function commitPendingMulti() {
+	const pending = pendingMulti.value;
+	if (pending.length === 0) return;
+	stop();
+	selectedElement.value = pending[0];
+}
+
+function expandPanel() {
+	expanded.value = true;
+	toast.value = null;
+	clearSelection();
+	pendingMulti.value = [];
+	startPicker();
+}
+
+function collapsePanel() {
+	expanded.value = false;
+	flagsOpen.value = false;
+	stop();
+	clearSelection();
+	pendingMulti.value = [];
+}
+
+function toggleFlags() {
+	flagsOpen.value = !flagsOpen.value;
+}
+
+watch(flagsOpen, (open) => {
+	if (open) {
+		stop();
+		clearSelection();
+		pendingMulti.value = [];
+	} else if (expanded.value) {
+		startPicker();
+	}
+});
+
+function togglePicking() {
+	if (isPicking.value) {
+		stop();
+	} else {
+		clearSelection();
+		pendingMulti.value = [];
+		startPicker();
+	}
+}
+
+function currentTargets(): Element[] {
+	if (pendingMulti.value.length > 0) return pendingMulti.value;
+	const anchor = selectedElement.value;
+	return anchor ? [anchor] : [];
+}
+
+function handleAdd(prompt: string) {
+	const targets = currentTargets();
+	if (targets.length === 0) return;
+
+	const contexts = targets.map((el) => collectElementContext(el));
+
+	const id = editingId.value;
+	if (id) {
+		annotations.value = annotations.value.map((a) =>
+			a.id === id ? { ...a, prompt, contexts, elements: targets } : a,
+		);
+		editingId.value = null;
+		clearSelection();
+		pendingMulti.value = [];
+		bumpRects();
+		startPicker();
+		return;
+	}
+
+	annotations.value = [
+		...annotations.value,
+		{ id: generateId(), prompt, contexts, elements: targets },
+	];
+	clearSelection();
+	pendingMulti.value = [];
+	bumpRects();
+	startPicker();
+}
+
+function handleCancel() {
+	editingId.value = null;
+	clearSelection();
+	pendingMulti.value = [];
+	if (expanded.value) startPicker();
+}
+
+function startEditing(annotation: TrackedAnnotation) {
+	stop();
+	editingId.value = annotation.id;
+	pendingMulti.value = annotation.elements.length > 1 ? [...annotation.elements] : [];
+	selectedElement.value = annotation.elements[0] ?? null;
+}
+
+function clearAnnotations() {
+	annotations.value = [];
+}
+
+async function copyAllAnnotations() {
+	if (annotations.value.length === 0) return;
+	const text = formatAnnotationsForClipboard({
+		pagePath: currentPagePath(),
+		viewport: currentViewport(),
+		annotations: annotations.value.map(({ elements: _elements, ...rest }) => rest),
+	});
+	try {
+		await navigator.clipboard.writeText(text);
+		justCopied.value = true;
+		if (copiedResetTimer) clearTimeout(copiedResetTimer);
+		copiedResetTimer = setTimeout(() => {
+			justCopied.value = false;
+			copiedResetTimer = null;
+		}, 1500);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : 'Copy failed';
+		showErrorToast(message);
+	}
+}
+</script>
+
+<template>
+	<div v-if="visible" :[DEV_PANEL_ROOT_ATTR]="true" class="dev-panel-root">
+		<div v-if="isPicking && !dragRect" class="dev-panel-hover-overlay" :style="hoverOverlayStyle" />
+
+		<div
+			v-if="dragRect"
+			class="dev-panel-drag-rect"
+			:style="{
+				top: `${dragRect.y}px`,
+				left: `${dragRect.x}px`,
+				width: `${dragRect.width}px`,
+				height: `${dragRect.height}px`,
+			}"
+		/>
+
+		<div
+			v-for="(outline, idx) in pendingOutlines"
+			:key="`pending-${idx}`"
+			class="dev-panel-pending-outline"
+			:style="{
+				top: `${outline.top}px`,
+				left: `${outline.left}px`,
+				width: `${outline.width}px`,
+				height: `${outline.height}px`,
+			}"
+		/>
+
+		<template v-if="expanded">
+			<button
+				v-for="marker in markers"
+				:key="marker.id"
+				type="button"
+				class="dev-panel-marker"
+				:class="{ 'dev-panel-marker--multi': marker.isMulti }"
+				:style="{ top: `${marker.top}px`, left: `${marker.left}px` }"
+				:title="`Edit: ${marker.annotation.prompt}`"
+				@click.stop="startEditing(marker.annotation)"
+			>
+				<span class="dev-panel-marker-number">{{ marker.index }}</span>
+				<svg
+					class="dev-panel-marker-pen"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M12 20h9" />
+					<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z" />
+				</svg>
+			</button>
+		</template>
+
+		<PromptPopover
+			v-if="selectedElement"
+			:anchor="selectedElement"
+			:initial-prompt="editingPrompt"
+			:is-editing="!!editingId"
+			@add="handleAdd"
+			@cancel="handleCancel"
+		/>
+
+		<div v-if="toast" class="dev-panel-toast dev-panel-toast--error">
+			{{ toast.message }}
+		</div>
+
+		<FlagPanel v-if="expanded && flagsOpen" @close="flagsOpen = false" />
+
+		<div class="dev-panel-dock">
+			<button
+				v-if="!expanded"
+				type="button"
+				class="dev-panel-fab"
+				title="Open dev panel"
+				@click="expandPanel"
+			>
+				<svg
+					class="dev-panel-fab-icon"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<line x1="4" y1="8" x2="14" y2="8" />
+					<line x1="4" y1="14" x2="10" y2="14" />
+					<path d="M17 13l1.5 3 3 1.5-3 1.5L17 22l-1.5-3-3-1.5 3-1.5z" fill="currentColor" />
+				</svg>
+				<span v-if="hasAnnotations" class="dev-panel-fab-badge">{{ annotationCount }}</span>
+			</button>
+
+			<div v-else class="dev-panel-toolbar" role="toolbar" aria-label="Dev panel">
+				<button
+					type="button"
+					class="dev-panel-toolbar-button"
+					:class="{ 'dev-panel-toolbar-button--active': isPicking }"
+					:title="
+						isPicking
+							? 'Stop picking (Esc) — Shift+click to multi-select'
+							: 'Pick an element (Shift+click to multi-select)'
+					"
+					@click="togglePicking"
+				>
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<circle cx="12" cy="12" r="8" />
+						<line x1="12" y1="2" x2="12" y2="5" />
+						<line x1="12" y1="19" x2="12" y2="22" />
+						<line x1="2" y1="12" x2="5" y2="12" />
+						<line x1="19" y1="12" x2="22" y2="12" />
+						<circle cx="12" cy="12" r="1.5" fill="currentColor" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					class="dev-panel-toolbar-button"
+					:class="{ 'dev-panel-toolbar-button--active': flagsOpen }"
+					:title="flagsOpen ? 'Close feature flags' : 'Feature flag overrides'"
+					@click="toggleFlags"
+				>
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+						<line x1="4" y1="22" x2="4" y2="15" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					class="dev-panel-toolbar-button"
+					:class="{ 'dev-panel-toolbar-button--success': justCopied }"
+					:disabled="!hasAnnotations"
+					:title="justCopied ? 'Copied!' : 'Copy all annotations as markdown'"
+					@click="copyAllAnnotations"
+				>
+					<Transition name="dev-panel-icon-swap" mode="out-in">
+						<svg
+							v-if="justCopied"
+							key="check"
+							class="dev-panel-toolbar-icon"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<polyline points="5 12 10 17 19 7" />
+						</svg>
+						<svg
+							v-else
+							key="copy"
+							class="dev-panel-toolbar-icon"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<rect x="9" y="9" width="11" height="11" rx="2" />
+							<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+						</svg>
+					</Transition>
+					<Transition name="dev-panel-badge-fade">
+						<span v-if="hasAnnotations && !justCopied" class="dev-panel-toolbar-badge">
+							{{ annotationCount }}
+						</span>
+					</Transition>
+				</button>
+				<button
+					type="button"
+					class="dev-panel-toolbar-button"
+					:disabled="!hasAnnotations"
+					title="Clear annotations"
+					@click="clearAnnotations"
+				>
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<polyline points="3 6 5 6 21 6" />
+						<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+						<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+					</svg>
+				</button>
+				<span class="dev-panel-toolbar-divider" aria-hidden="true" />
+				<button
+					type="button"
+					class="dev-panel-toolbar-button"
+					title="Close dev panel"
+					@click="collapsePanel"
+				>
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<line x1="6" y1="6" x2="18" y2="18" />
+						<line x1="18" y1="6" x2="6" y2="18" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.dev-panel-root {
+	position: fixed;
+	z-index: 2147483645;
+	inset: 0;
+	pointer-events: none;
+	font-family: var(--font-family);
+}
+
+.dev-panel-root > * {
+	pointer-events: auto;
+}
+
+.dev-panel-hover-overlay {
+	position: fixed;
+	pointer-events: none;
+	background: color-mix(in srgb, var(--color--blue-500) 15%, transparent);
+	border: 2px solid var(--color--blue-500);
+	border-radius: var(--radius--sm);
+	transition: all 40ms linear;
+}
+
+.dev-panel-pending-outline {
+	position: fixed;
+	pointer-events: none;
+	background: color-mix(in srgb, var(--color--primary) 12%, transparent);
+	border: 2px dashed var(--color--primary);
+	border-radius: var(--radius--sm);
+	z-index: 2147483643;
+}
+
+.dev-panel-drag-rect {
+	position: fixed;
+	pointer-events: none;
+	background: color-mix(in srgb, var(--color--success) 15%, transparent);
+	border: 1px solid var(--color--success);
+	border-radius: var(--radius--sm);
+	z-index: 2147483645;
+}
+
+.dev-panel-marker {
+	position: fixed;
+	z-index: 2147483644;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	border-radius: 50%;
+	background: var(--color--primary);
+	color: var(--color--background);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--font-size--2xs);
+	font-weight: var(--font-weight--bold);
+	font-family: inherit;
+	line-height: 1;
+	box-shadow: 0 2px 6px var(--color--black-alpha-400);
+	border: 2px solid var(--color--background);
+	cursor: pointer;
+	user-select: none;
+	transition: transform 80ms ease;
+}
+
+.dev-panel-marker:hover {
+	transform: scale(1.1);
+}
+
+.dev-panel-marker--multi {
+	background: var(--color--success);
+}
+
+.dev-panel-marker-pen {
+	display: none;
+	width: 12px;
+	height: 12px;
+}
+
+.dev-panel-marker:hover .dev-panel-marker-number {
+	display: none;
+}
+
+.dev-panel-marker:hover .dev-panel-marker-pen {
+	display: block;
+}
+
+.dev-panel-toast {
+	position: fixed;
+	right: var(--spacing--sm);
+	bottom: 72px;
+	padding: var(--spacing--2xs) var(--spacing--xs);
+	border-radius: var(--radius);
+	font-size: var(--font-size--xs);
+	box-shadow: 0 4px 16px var(--color--black-alpha-300);
+}
+
+.dev-panel-toast--error {
+	background: var(--color--danger--tint-4);
+	color: var(--color--danger--shade-1);
+	border: var(--border-width) var(--border-style) var(--color--danger);
+}
+
+.dev-panel-dock {
+	position: fixed;
+	right: var(--spacing--sm);
+	bottom: var(--spacing--sm);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	align-items: flex-end;
+	max-width: min(420px, calc(100vw - var(--spacing--md)));
+}
+
+.dev-panel-fab {
+	position: relative;
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	background: var(--color--neutral-900);
+	color: var(--color--neutral-50);
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 6px 20px var(--color--black-alpha-400);
+	transition: transform 120ms ease;
+}
+
+.dev-panel-fab:hover {
+	transform: translateY(-1px);
+}
+
+.dev-panel-fab-icon {
+	width: 22px;
+	height: 22px;
+}
+
+.dev-panel-fab-badge {
+	position: absolute;
+	top: -4px;
+	right: -6px;
+	min-width: 22px;
+	height: 22px;
+	padding: 0 6px;
+	border-radius: 11px;
+	background: var(--color--blue-500);
+	color: var(--color--neutral-50);
+	font-size: var(--font-size--2xs);
+	font-weight: var(--font-weight--bold);
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid var(--color--neutral-900);
+	box-sizing: border-box;
+}
+
+.dev-panel-toolbar {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--3xs);
+	padding: var(--spacing--3xs);
+	background: var(--color--neutral-900);
+	border-radius: 999px;
+	box-shadow: 0 6px 20px var(--color--black-alpha-400);
+}
+
+.dev-panel-toolbar-button {
+	position: relative;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--color--neutral-50);
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition:
+		background-color 180ms ease,
+		color 180ms ease;
+}
+
+.dev-panel-toolbar-button svg {
+	width: 18px;
+	height: 18px;
+}
+
+.dev-panel-toolbar-icon {
+	transform-origin: center;
+}
+
+.dev-panel-icon-swap-enter-active,
+.dev-panel-icon-swap-leave-active {
+	transition:
+		opacity 160ms ease,
+		transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.dev-panel-icon-swap-enter-from {
+	opacity: 0;
+	transform: scale(0.5) rotate(-15deg);
+}
+
+.dev-panel-icon-swap-leave-to {
+	opacity: 0;
+	transform: scale(0.5) rotate(15deg);
+}
+
+.dev-panel-badge-fade-enter-active,
+.dev-panel-badge-fade-leave-active {
+	transition:
+		opacity 160ms ease,
+		transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.dev-panel-badge-fade-enter-from,
+.dev-panel-badge-fade-leave-to {
+	opacity: 0;
+	transform: scale(0.6);
+}
+
+.dev-panel-toolbar-button:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--color--neutral-50) 10%, transparent);
+}
+
+.dev-panel-toolbar-button:disabled {
+	opacity: 0.35;
+	cursor: not-allowed;
+}
+
+.dev-panel-toolbar-button--active {
+	background: var(--color--blue-500);
+}
+
+.dev-panel-toolbar-button--active:hover:not(:disabled) {
+	background: var(--color--blue-600);
+}
+
+.dev-panel-toolbar-button--success,
+.dev-panel-toolbar-button--success:hover:not(:disabled) {
+	background: var(--color--success);
+	color: var(--color--neutral-50);
+}
+
+.dev-panel-toolbar-badge {
+	position: absolute;
+	top: -2px;
+	right: -2px;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 5px;
+	border-radius: 10px;
+	background: var(--color--blue-500);
+	color: var(--color--neutral-50);
+	font-size: var(--font-size--2xs);
+	font-weight: var(--font-weight--bold);
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid var(--color--neutral-900);
+	box-sizing: border-box;
+}
+
+.dev-panel-toolbar-divider {
+	width: 1px;
+	height: 20px;
+	background: color-mix(in srgb, var(--color--neutral-50) 20%, transparent);
+	margin: 0 var(--spacing--5xs);
+}
+</style>
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/FlagPanel.vue b/packages/frontend/editor-ui/src/app/dev/dev-panel/FlagPanel.vue
new file mode 100644
index 0000000000000..1399db40eeb7a
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/FlagPanel.vue
@@ -0,0 +1,585 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { type Flag, type FlagValue, useFeatureFlags } from './useFeatureFlags';
+
+const emit = defineEmits<{
+	close: [];
+}>();
+
+const { flags, overrides, refresh, setOverride, removeOverride, clearAll } = useFeatureFlags();
+
+const filter = ref('');
+const searchInput = ref<HTMLInputElement | null>(null);
+const dropdown = ref<{ flag: string; top: number; left: number } | null>(null);
+const customValue = ref('');
+
+const filteredFlags = computed(() => {
+	const q = filter.value.trim().toLowerCase();
+	if (!q) return flags.value;
+	return flags.value.filter((f) => f.name.toLowerCase().includes(q));
+});
+
+const overrideCount = computed(() => Object.keys(overrides.value).length);
+const flagCount = computed(() => flags.value.length);
+const countLabel = computed(() => {
+	const o = overrideCount.value;
+	const f = flagCount.value;
+	return `${o} override${o === 1 ? '' : 's'} · ${f} flag${f === 1 ? '' : 's'}`;
+});
+
+const dropdownFlag = computed<Flag | null>(() => {
+	if (!dropdown.value) return null;
+	return flags.value.find((f) => f.name === dropdown.value?.flag) ?? null;
+});
+
+const variantOptions = computed<string[]>(() => {
+	const f = dropdownFlag.value;
+	if (!f) return [];
+	const detected = typeof f.phValue === 'string' ? f.phValue : 'variant';
+	const second = detected === 'control' ? 'variant' : detected;
+	return ['control', second];
+});
+
+function formatPhValue(value: FlagValue | undefined): string {
+	if (value === undefined) return '—';
+	if (typeof value === 'string') return `"${value}"`;
+	return String(value);
+}
+
+function openDropdown(flag: string, event: MouseEvent) {
+	const target = event.currentTarget;
+	if (!(target instanceof HTMLElement)) return;
+	if (dropdown.value?.flag === flag) {
+		dropdown.value = null;
+		return;
+	}
+	const rect = target.getBoundingClientRect();
+	dropdown.value = { flag, top: rect.bottom + 4, left: rect.right };
+	customValue.value = '';
+}
+
+function closeDropdown() {
+	dropdown.value = null;
+}
+
+function applyValue(flag: string, value: FlagValue) {
+	setOverride(flag, value);
+	closeDropdown();
+}
+
+function applyCustom(flag: string) {
+	const v = customValue.value.trim();
+	if (!v) return;
+	applyValue(flag, v);
+}
+
+function reload() {
+	window.location.reload();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		if (dropdown.value) {
+			event.stopPropagation();
+			closeDropdown();
+			return;
+		}
+		emit('close');
+	}
+}
+
+function handleDocumentClick(event: MouseEvent) {
+	if (!dropdown.value) return;
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	if (target.closest('[data-flag-dropdown]')) return;
+	if (target.closest('[data-override-trigger]')) return;
+	closeDropdown();
+}
+
+onMounted(() => {
+	refresh();
+	window.addEventListener('keydown', handleKeyDown, true);
+	document.addEventListener('click', handleDocumentClick, true);
+	void nextTick(() => searchInput.value?.focus());
+});
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeyDown, true);
+	document.removeEventListener('click', handleDocumentClick, true);
+});
+
+watch(filter, () => {
+	closeDropdown();
+});
+</script>
+
+<template>
+	<div class="flag-panel" role="dialog" aria-label="Feature flag overrides">
+		<header class="flag-panel-header">
+			<span class="flag-panel-title">Feature flags</span>
+			<div class="flag-panel-header-actions">
+				<button
+					type="button"
+					class="flag-panel-button"
+					:disabled="overrideCount === 0"
+					@click="clearAll"
+				>
+					Clear all
+				</button>
+				<button type="button" class="flag-panel-button" title="Close" @click="emit('close')">
+					&times;
+				</button>
+			</div>
+		</header>
+
+		<div class="flag-panel-search">
+			<input
+				ref="searchInput"
+				v-model="filter"
+				type="text"
+				placeholder="Filter flags..."
+				spellcheck="false"
+			/>
+		</div>
+
+		<div class="flag-panel-columns" aria-hidden="true">
+			<span class="flag-col-name">Flag</span>
+			<span class="flag-col-ph">PostHog</span>
+			<span class="flag-col-ovr">Override</span>
+		</div>
+
+		<div class="flag-panel-list">
+			<div v-if="filteredFlags.length === 0" class="flag-panel-empty">
+				{{ flagCount === 0 ? 'No flags found. Is PostHog loaded?' : 'No flags match filter.' }}
+			</div>
+
+			<div
+				v-for="flag in filteredFlags"
+				:key="flag.name"
+				class="flag-row"
+				:class="{ 'flag-row--overridden': flag.override !== undefined }"
+			>
+				<span class="flag-name" :title="flag.name">{{ flag.name }}</span>
+				<span class="flag-ph">
+					<span
+						class="flag-dot"
+						:class="{
+							'flag-dot--variant': flag.isVariant,
+							'flag-dot--on': !flag.isVariant && flag.phValue === true,
+							'flag-dot--off':
+								!flag.isVariant && (flag.phValue === false || flag.phValue === undefined),
+						}"
+					/>
+					<span class="flag-ph-value">{{ formatPhValue(flag.phValue) }}</span>
+				</span>
+				<button
+					v-if="flag.override === undefined"
+					type="button"
+					class="flag-override-add"
+					data-override-trigger
+					title="Set override"
+					@click="openDropdown(flag.name, $event)"
+				>
+					+
+				</button>
+				<button
+					v-else
+					type="button"
+					class="flag-override-chip"
+					:class="{ 'flag-override-chip--variant': flag.isVariant }"
+					data-override-trigger
+					:title="`Override: ${flag.override}`"
+					@click="openDropdown(flag.name, $event)"
+				>
+					{{ String(flag.override) }}
+				</button>
+			</div>
+		</div>
+
+		<footer class="flag-panel-footer">
+			<span class="flag-panel-count">{{ countLabel }}</span>
+			<button type="button" class="flag-panel-reload" @click="reload">Reload &amp; Apply</button>
+		</footer>
+
+		<div
+			v-if="dropdown && dropdownFlag"
+			class="flag-dropdown"
+			data-flag-dropdown
+			:style="{ top: `${dropdown.top}px`, left: `${dropdown.left}px` }"
+		>
+			<template v-if="!dropdownFlag.isVariant">
+				<button
+					type="button"
+					class="flag-dropdown-item"
+					@click="applyValue(dropdownFlag.name, true)"
+				>
+					true
+				</button>
+				<button
+					type="button"
+					class="flag-dropdown-item"
+					@click="applyValue(dropdownFlag.name, false)"
+				>
+					false
+				</button>
+			</template>
+			<template v-else>
+				<button
+					v-for="opt in variantOptions"
+					:key="opt"
+					type="button"
+					class="flag-dropdown-item"
+					@click="applyValue(dropdownFlag.name, opt)"
+				>
+					{{ opt }}
+				</button>
+				<div class="flag-dropdown-custom">
+					<input
+						v-model="customValue"
+						type="text"
+						placeholder="custom..."
+						spellcheck="false"
+						@keydown.enter.stop="applyCustom(dropdownFlag.name)"
+						@keydown.stop
+					/>
+					<button type="button" @click="applyCustom(dropdownFlag.name)">Set</button>
+				</div>
+			</template>
+			<button
+				v-if="dropdownFlag.override !== undefined"
+				type="button"
+				class="flag-dropdown-item flag-dropdown-item--remove"
+				@click="
+					removeOverride(dropdownFlag.name);
+					closeDropdown();
+				"
+			>
+				Remove
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.flag-panel {
+	position: fixed;
+	right: var(--spacing--sm);
+	bottom: calc(var(--spacing--sm) + 56px);
+	width: min(520px, calc(100vw - var(--spacing--md)));
+	height: min(480px, calc(100vh - 120px));
+	display: flex;
+	flex-direction: column;
+	background: var(--color--neutral-900);
+	color: var(--color--neutral-50);
+	border-radius: var(--radius--lg);
+	box-shadow: 0 6px 20px var(--color--black-alpha-400);
+	font-family: var(--font-family);
+	font-size: var(--font-size--sm);
+	overflow: visible;
+	z-index: 2147483645;
+	color-scheme: dark;
+	scrollbar-width: thin;
+	scrollbar-color: gray transparent;
+}
+
+.flag-panel-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing--2xs) var(--spacing--xs);
+	border-bottom: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 12%, transparent);
+}
+
+.flag-panel-title {
+	font-size: var(--font-size--xs);
+	font-weight: var(--font-weight--bold);
+}
+
+.flag-panel-header-actions {
+	display: flex;
+	gap: var(--spacing--3xs);
+}
+
+.flag-panel-button {
+	padding: var(--spacing--5xs) var(--spacing--2xs);
+	border-radius: var(--radius);
+	border: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 16%, transparent);
+	background: transparent;
+	color: var(--color--neutral-50);
+	font-family: inherit;
+	font-size: var(--font-size--2xs);
+	cursor: pointer;
+}
+
+.flag-panel-button:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--color--neutral-50) 10%, transparent);
+}
+
+.flag-panel-button:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.flag-panel-search input {
+	width: 100%;
+	padding: var(--spacing--2xs) var(--spacing--xs);
+	background: transparent;
+	border: none;
+	border-bottom: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 12%, transparent);
+	color: var(--color--neutral-50);
+	font-family: var(--font-family--monospace);
+	font-size: var(--font-size--2xs);
+	outline: none;
+}
+
+.flag-panel-search input::placeholder {
+	color: color-mix(in srgb, var(--color--neutral-50) 40%, transparent);
+}
+
+.flag-panel-columns {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	padding: var(--spacing--3xs) var(--spacing--xs);
+	font-size: var(--font-size--3xs);
+	font-weight: var(--font-weight--bold);
+	letter-spacing: 0.5px;
+	text-transform: uppercase;
+	color: color-mix(in srgb, var(--color--neutral-50) 50%, transparent);
+	border-bottom: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 8%, transparent);
+}
+
+.flag-col-name {
+	flex: 1;
+	min-width: 0;
+}
+
+.flag-col-ph {
+	flex: 0 0 90px;
+}
+
+.flag-col-ovr {
+	flex: 0 0 80px;
+}
+
+.flag-panel-list {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.flag-panel-empty {
+	padding: var(--spacing--md) var(--spacing--xs);
+	text-align: center;
+	font-size: var(--font-size--2xs);
+	color: color-mix(in srgb, var(--color--neutral-50) 40%, transparent);
+}
+
+.flag-row {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	padding: var(--spacing--3xs) var(--spacing--xs);
+}
+
+.flag-row:hover {
+	background: color-mix(in srgb, var(--color--neutral-50) 6%, transparent);
+}
+
+.flag-name {
+	flex: 1;
+	min-width: 0;
+	font-family: var(--font-family--monospace);
+	font-size: var(--font-size--2xs);
+	color: color-mix(in srgb, var(--color--neutral-50) 75%, transparent);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.flag-row--overridden .flag-name {
+	color: var(--color--warning);
+}
+
+.flag-ph {
+	flex: 0 0 90px;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--5xs);
+	font-family: var(--font-family--monospace);
+	font-size: var(--font-size--3xs);
+	color: color-mix(in srgb, var(--color--neutral-50) 55%, transparent);
+	overflow: hidden;
+}
+
+.flag-ph-value {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.flag-dot {
+	display: inline-block;
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.flag-dot--on {
+	background: var(--color--success);
+}
+
+.flag-dot--off {
+	background: color-mix(in srgb, var(--color--neutral-50) 30%, transparent);
+}
+
+.flag-dot--variant {
+	background: var(--color--secondary);
+}
+
+.flag-override-add,
+.flag-override-chip {
+	flex: 0 0 80px;
+	height: 22px;
+	padding: 0 var(--spacing--2xs);
+	border-radius: var(--radius);
+	font-family: var(--font-family--monospace);
+	font-size: var(--font-size--2xs);
+	cursor: pointer;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.flag-override-add {
+	border: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 16%, transparent);
+	background: transparent;
+	color: color-mix(in srgb, var(--color--neutral-50) 50%, transparent);
+}
+
+.flag-override-add:hover {
+	background: color-mix(in srgb, var(--color--neutral-50) 10%, transparent);
+	color: var(--color--neutral-50);
+}
+
+.flag-override-chip {
+	border: none;
+	background: color-mix(in srgb, var(--color--warning) 25%, transparent);
+	color: var(--color--warning);
+	font-weight: var(--font-weight--bold);
+}
+
+.flag-override-chip--variant {
+	background: color-mix(in srgb, var(--color--secondary) 25%, transparent);
+	color: var(--color--secondary);
+}
+
+.flag-panel-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing--2xs) var(--spacing--xs);
+	border-top: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 12%, transparent);
+}
+
+.flag-panel-count {
+	font-size: var(--font-size--2xs);
+	color: color-mix(in srgb, var(--color--neutral-50) 50%, transparent);
+}
+
+.flag-panel-reload {
+	padding: var(--spacing--3xs) var(--spacing--xs);
+	background: var(--color--blue-500);
+	color: var(--color--neutral-50);
+	border: none;
+	border-radius: var(--radius);
+	font-family: inherit;
+	font-size: var(--font-size--2xs);
+	font-weight: var(--font-weight--bold);
+	cursor: pointer;
+}
+
+.flag-panel-reload:hover {
+	background: var(--color--blue-600);
+}
+
+.flag-dropdown {
+	position: fixed;
+	transform: translateX(-100%);
+	min-width: 140px;
+	background: var(--color--neutral-900);
+	border: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 16%, transparent);
+	border-radius: var(--radius);
+	box-shadow: 0 4px 16px var(--color--black-alpha-400);
+	z-index: 2147483646;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.flag-dropdown-item {
+	padding: var(--spacing--3xs) var(--spacing--xs);
+	background: transparent;
+	border: none;
+	color: var(--color--neutral-50);
+	font-family: var(--font-family--monospace);
+	font-size: var(--font-size--2xs);
+	text-align: left;
+	cursor: pointer;
+}
+
+.flag-dropdown-item:hover {
+	background: color-mix(in srgb, var(--color--neutral-50) 10%, transparent);
+}
+
+.flag-dropdown-item--remove {
+	color: var(--color--danger);
+	border-top: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 12%, transparent);
+}
+
+.flag-dropdown-custom {
+	display: flex;
+	gap: var(--spacing--3xs);
+	padding: var(--spacing--3xs);
+	border-top: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 12%, transparent);
+}
+
+.flag-dropdown-custom input {
+	flex: 1;
+	min-width: 0;
+	padding: var(--spacing--5xs) var(--spacing--3xs);
+	background: color-mix(in srgb, var(--color--neutral-50) 6%, transparent);
+	border: var(--border-width) var(--border-style)
+		color-mix(in srgb, var(--color--neutral-50) 16%, transparent);
+	border-radius: var(--radius--sm);
+	color: var(--color--neutral-50);
+	font-family: var(--font-family--monospace);
+	font-size: var(--font-size--2xs);
+	outline: none;
+}
+
+.flag-dropdown-custom button {
+	padding: var(--spacing--5xs) var(--spacing--2xs);
+	background: var(--color--blue-500);
+	color: var(--color--neutral-50);
+	border: none;
+	border-radius: var(--radius--sm);
+	font-family: inherit;
+	font-size: var(--font-size--3xs);
+	font-weight: var(--font-weight--bold);
+	cursor: pointer;
+}
+</style>
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/PromptPopover.vue b/packages/frontend/editor-ui/src/app/dev/dev-panel/PromptPopover.vue
new file mode 100644
index 0000000000000..9ae5a7901cb17
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/PromptPopover.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { N8nButton, N8nInput } from '@n8n/design-system';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+const props = withDefaults(
+	defineProps<{
+		anchor: Element;
+		initialPrompt?: string;
+		isEditing?: boolean;
+	}>(),
+	{ initialPrompt: '', isEditing: false },
+);
+
+const emit = defineEmits<{
+	add: [prompt: string];
+	cancel: [];
+}>();
+
+const prompt = ref(props.initialPrompt);
+
+const anchorRect = ref<DOMRect>(props.anchor.getBoundingClientRect());
+
+function updateAnchorRect() {
+	anchorRect.value = props.anchor.getBoundingClientRect();
+}
+
+const popoverStyle = computed(() => {
+	const rect = anchorRect.value;
+	const popoverWidth = 360;
+	const popoverHeightGuess = 180;
+	const margin = 8;
+	const viewportWidth = window.innerWidth;
+	const viewportHeight = window.innerHeight;
+
+	let top = rect.bottom + margin;
+	if (top + popoverHeightGuess > viewportHeight) {
+		top = Math.max(margin, rect.top - popoverHeightGuess - margin);
+	}
+
+	let left = rect.left;
+	if (left + popoverWidth > viewportWidth - margin) {
+		left = Math.max(margin, viewportWidth - popoverWidth - margin);
+	}
+
+	return {
+		top: `${top}px`,
+		left: `${left}px`,
+		width: `${popoverWidth}px`,
+	};
+});
+
+function handleKeyDown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		event.preventDefault();
+		emit('cancel');
+		return;
+	}
+	if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+		event.preventDefault();
+		handleAdd();
+	}
+}
+
+function handleFocus(event: FocusEvent) {
+	const target = event.target as HTMLTextAreaElement | null;
+	if (!target) return;
+	const end = target.value.length;
+	target.setSelectionRange(end, end);
+}
+
+function handleAdd() {
+	const text = prompt.value.trim();
+	if (!text) return;
+	emit('add', text);
+}
+
+onMounted(() => {
+	window.addEventListener('resize', updateAnchorRect);
+	window.addEventListener('scroll', updateAnchorRect, true);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', updateAnchorRect);
+	window.removeEventListener('scroll', updateAnchorRect, true);
+});
+
+watch(
+	() => props.anchor,
+	() => updateAnchorRect(),
+);
+
+watch(
+	() => props.initialPrompt,
+	(value) => {
+		prompt.value = value;
+	},
+);
+</script>
+
+<template>
+	<div
+		class="dev-panel-popover"
+		:style="popoverStyle"
+		role="dialog"
+		aria-label="AI prompt"
+		@keydown="handleKeyDown"
+	>
+		<N8nInput
+			v-model="prompt"
+			type="textarea"
+			size="small"
+			autofocus
+			:rows="4"
+			:placeholder="
+				isEditing
+					? 'Edit the annotation. ⌘↵ to save, Esc to cancel.'
+					: 'Describe the change. ⌘↵ to add, Esc to cancel.'
+			"
+			@focus="handleFocus"
+		/>
+		<div class="dev-panel-actions">
+			<N8nButton variant="outline" size="small" @click="emit('cancel')"> Cancel </N8nButton>
+			<N8nButton
+				variant="solid"
+				size="small"
+				:disabled="!prompt.trim()"
+				:title="isEditing ? 'Save changes (⌘↵)' : 'Add to annotations list (⌘↵)'"
+				@click="handleAdd"
+			>
+				{{ isEditing ? 'Save' : 'Add' }}
+			</N8nButton>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.dev-panel-popover {
+	position: fixed;
+	z-index: 2147483646;
+	/* stylelint-disable-next-line @n8n/css-var-naming */
+	background: var(--background--surface);
+	border: var(--border);
+	border-radius: var(--radius--lg);
+	box-shadow: 0 10px 30px var(--color--black-alpha-300);
+	padding: var(--spacing--xs);
+	font-family: var(--font-family);
+	font-size: var(--font-size--sm);
+	color: var(--color--text--shade-1);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+}
+
+.dev-panel-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing--3xs);
+}
+</style>
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/annotationStorage.ts b/packages/frontend/editor-ui/src/app/dev/dev-panel/annotationStorage.ts
new file mode 100644
index 0000000000000..97932cca5dcc0
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/annotationStorage.ts
@@ -0,0 +1,80 @@
+import type { ElementContext } from './collectElementContext';
+import type { Annotation } from './formatPrompt';
+
+const STORAGE_KEY = 'n8n.devPanel.annotations';
+const TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+type StoredEntry = { updatedAt: number; annotations: Annotation[] };
+type StoredShape = Record<string, StoredEntry>;
+
+function read(): StoredShape {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return {};
+		const parsed: unknown = JSON.parse(raw);
+		return parsed && typeof parsed === 'object' ? (parsed as StoredShape) : {};
+	} catch {
+		return {};
+	}
+}
+
+function write(data: StoredShape) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+	} catch {
+		// storage quota exceeded or disabled — nothing we can do
+	}
+}
+
+function prune(data: StoredShape, now: number): { data: StoredShape; changed: boolean } {
+	const pruned: StoredShape = {};
+	let changed = false;
+	for (const [key, entry] of Object.entries(data)) {
+		if (!entry || typeof entry.updatedAt !== 'number' || now - entry.updatedAt > TTL_MS) {
+			changed = true;
+			continue;
+		}
+		pruned[key] = entry;
+	}
+	return { data: pruned, changed };
+}
+
+export function loadAnnotations(path: string): Annotation[] {
+	const { data, changed } = prune(read(), Date.now());
+	if (changed) write(data);
+	return data[path]?.annotations ?? [];
+}
+
+export function saveAnnotations(path: string, annotations: Annotation[]) {
+	const { data } = prune(read(), Date.now());
+	if (annotations.length === 0) {
+		delete data[path];
+	} else {
+		data[path] = { updatedAt: Date.now(), annotations };
+	}
+	write(data);
+}
+
+function escapeAttributeValue(value: string): string {
+	return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+export function resolveElementForContext(context: ElementContext): Element | null {
+	if (context.selector) {
+		try {
+			const el = document.querySelector(context.selector);
+			if (el) return el;
+		} catch {
+			// invalid selector — fall through to testid
+		}
+	}
+	if (context.testid) {
+		try {
+			const el = document.querySelector(`[data-testid="${escapeAttributeValue(context.testid)}"]`);
+			if (el) return el;
+		} catch {
+			// invalid selector — give up
+		}
+	}
+	return null;
+}
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/collectElementContext.ts b/packages/frontend/editor-ui/src/app/dev/dev-panel/collectElementContext.ts
new file mode 100644
index 0000000000000..b5791db3b83c2
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/collectElementContext.ts
@@ -0,0 +1,209 @@
+const INSPECTOR_ATTR = 'data-v-inspector';
+const OUTER_HTML_MAX = 500;
+const DOM_PATH_MAX_DEPTH = 6;
+const SUMMARY_TEXT_MAX = 60;
+const CSS_MODULE_HASH_RE = /^_(.+)_[a-z0-9]+_\d+$/;
+
+function normalizeClassName(name: string): string {
+	const match = CSS_MODULE_HASH_RE.exec(name);
+	return match ? match[1] : name;
+}
+
+function getReadableClasses(el: Element): string[] {
+	return Array.from(el.classList).map(normalizeClassName);
+}
+
+export type ElementBBox = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	isFixed: boolean;
+};
+
+export type ElementContext = {
+	file?: string;
+	line?: number;
+	col?: number;
+	testid?: string;
+	component?: string;
+	selector?: string;
+	classes?: string[];
+	outerHtmlSnippet?: string;
+	domPath?: string;
+	summary?: string;
+	bbox?: ElementBBox;
+};
+
+type VueAttachedElement = Element & {
+	__vueParentComponent?: { type?: { __name?: string; name?: string } };
+};
+
+function findInspectorPath(el: Element): string | undefined {
+	let current: Element | null = el;
+	while (current) {
+		const attr = current.getAttribute(INSPECTOR_ATTR);
+		if (attr) return attr;
+		current = current.parentElement;
+	}
+	return undefined;
+}
+
+function parseInspectorPath(path: string): { file: string; line?: number; col?: number } {
+	const parts = path.split(':');
+	if (parts.length >= 3) {
+		return {
+			file: parts.slice(0, -2).join(':'),
+			line: Number(parts.at(-2)),
+			col: Number(parts.at(-1)),
+		};
+	}
+	return { file: path };
+}
+
+function findTestId(el: Element): string | undefined {
+	let current: Element | null = el;
+	while (current) {
+		const attr = current.getAttribute('data-testid');
+		if (attr) return attr;
+		current = current.parentElement;
+	}
+	return undefined;
+}
+
+function findComponentName(el: Element): string | undefined {
+	let current: Element | null = el;
+	while (current) {
+		const component = (current as VueAttachedElement).__vueParentComponent;
+		const name = component?.type?.__name ?? component?.type?.name;
+		if (name) return name;
+		current = current.parentElement;
+	}
+	return undefined;
+}
+
+function escapeAttributeValue(value: string): string {
+	return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+function nthOfTypeSuffix(el: Element): string {
+	const parent = el.parentElement;
+	if (!parent) return '';
+	const sameTagSiblings = Array.from(parent.children).filter((c) => c.tagName === el.tagName);
+	if (sameTagSiblings.length <= 1) return '';
+	const index = sameTagSiblings.indexOf(el) + 1;
+	return `:nth-of-type(${index})`;
+}
+
+function buildSegment(el: Element): string {
+	if (el.id) return `#${CSS.escape(el.id)}`;
+	const testId = el.getAttribute('data-testid');
+	if (testId) return `[data-testid="${escapeAttributeValue(testId)}"]`;
+	const tag = el.tagName.toLowerCase();
+	const classes = Array.from(el.classList).slice(0, 3);
+	const classSelector = classes.map((c) => `.${CSS.escape(c)}`).join('');
+	return `${tag}${classSelector}${nthOfTypeSuffix(el)}`;
+}
+
+function buildSelector(el: Element): string {
+	const parts: string[] = [];
+	let current: Element | null = el;
+	let depth = 0;
+	while (current && depth < DOM_PATH_MAX_DEPTH) {
+		if (current.tagName === 'BODY' || current.tagName === 'HTML') break;
+		parts.unshift(buildSegment(current));
+		if (current.id) break;
+		current = current.parentElement;
+		depth += 1;
+	}
+	return parts.join(' > ');
+}
+
+function describeSegment(el: Element): string {
+	const tag = el.tagName.toLowerCase();
+	if (el.id) return `#${el.id}`;
+	const testid = el.getAttribute('data-testid');
+	if (testid) return `[data-testid="${testid}"]`;
+	const firstClass = getReadableClasses(el)[0];
+	if (firstClass) return `${tag}.${firstClass}`;
+	return tag;
+}
+
+function buildDomPath(el: Element): string {
+	const parts: string[] = [];
+	let current: Element | null = el;
+	let depth = 0;
+	while (current && depth < DOM_PATH_MAX_DEPTH) {
+		if (current.tagName === 'BODY' || current.tagName === 'HTML') break;
+		parts.unshift(describeSegment(current));
+		current = current.parentElement;
+		depth += 1;
+	}
+	return parts.join(' > ');
+}
+
+function extractText(el: Element): string | undefined {
+	const text = el.textContent?.replace(/\s+/g, ' ').trim();
+	if (!text) return undefined;
+	return text.length > SUMMARY_TEXT_MAX ? `${text.slice(0, SUMMARY_TEXT_MAX)}…` : text;
+}
+
+function hasFixedAncestor(el: Element): boolean {
+	let current: Element | null = el;
+	while (current) {
+		const position = window.getComputedStyle(current).position;
+		if (position === 'fixed' || position === 'sticky') return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+
+function captureBBox(el: Element): ElementBBox {
+	const rect = el.getBoundingClientRect();
+	const isFixed = hasFixedAncestor(el);
+	return {
+		x: isFixed ? rect.left : rect.left + window.scrollX,
+		y: isFixed ? rect.top : rect.top + window.scrollY,
+		width: rect.width,
+		height: rect.height,
+		isFixed,
+	};
+}
+
+function buildSummary(el: Element, component?: string): string {
+	const tag = el.tagName.toLowerCase();
+	const prefix = component ? `<${component}> ` : '';
+
+	if (tag === 'svg' || el.closest('svg') !== null) {
+		return `${prefix}icon`;
+	}
+	if (tag === 'img') {
+		const alt = el.getAttribute('alt');
+		return alt ? `${prefix}image "${alt}"` : `${prefix}image`;
+	}
+	if (tag === 'input' || tag === 'textarea' || tag === 'select') {
+		const label = el.getAttribute('aria-label') ?? el.getAttribute('placeholder');
+		return label ? `${prefix}${tag} "${label}"` : `${prefix}${tag}`;
+	}
+
+	const text = extractText(el);
+	return text ? `${prefix}${tag} "${text}"` : `${prefix}${tag}`;
+}
+
+export function collectElementContext(el: Element): ElementContext {
+	const inspector = findInspectorPath(el);
+	const parsed = inspector ? parseInspectorPath(inspector) : {};
+	const component = findComponentName(el);
+
+	return {
+		...parsed,
+		testid: findTestId(el),
+		component,
+		selector: buildSelector(el),
+		classes: getReadableClasses(el),
+		outerHtmlSnippet: el.outerHTML.slice(0, OUTER_HTML_MAX),
+		domPath: buildDomPath(el),
+		summary: buildSummary(el, component),
+		bbox: captureBBox(el),
+	};
+}
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/formatPrompt.ts b/packages/frontend/editor-ui/src/app/dev/dev-panel/formatPrompt.ts
new file mode 100644
index 0000000000000..5fb4b6b58d7f6
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/formatPrompt.ts
@@ -0,0 +1,90 @@
+import type { ElementContext } from './collectElementContext';
+
+export type Annotation = {
+	id: string;
+	prompt: string;
+	contexts: ElementContext[];
+};
+
+export type ClipboardPayload = {
+	pagePath: string;
+	viewport: { width: number; height: number };
+	annotations: Annotation[];
+};
+
+function stripProjectPrefix(file: string): string {
+	const packagesIdx = file.indexOf('/packages/');
+	if (packagesIdx !== -1) return file.slice(packagesIdx + 1);
+	const srcIdx = file.indexOf('/src/');
+	if (srcIdx !== -1) return file.slice(srcIdx + 1);
+	return file;
+}
+
+function formatSource(context: ElementContext): string | undefined {
+	if (!context.file) return undefined;
+	const rel = stripProjectPrefix(context.file);
+	if (!context.line) return rel;
+	return context.col ? `${rel}:${context.line}:${context.col}` : `${rel}:${context.line}`;
+}
+
+function buildMultiSummary(contexts: ElementContext[]): string {
+	const summaries = contexts.map((c) => c.summary ?? 'element');
+	const head = summaries.slice(0, 5).join(', ');
+	const extra = summaries.length > 5 ? ` +${summaries.length - 5} more` : '';
+	return `${contexts.length} elements: ${head}${extra}`;
+}
+
+function formatContextMeta(context: ElementContext, indent = ''): string[] {
+	const lines: string[] = [];
+	if (context.domPath) lines.push(`${indent}**Location:** ${context.domPath}`);
+	const source = formatSource(context);
+	if (source) lines.push(`${indent}**Source:** ${source}`);
+	if (context.component) lines.push(`${indent}**Vue:** <${context.component}>`);
+	if (context.testid) lines.push(`${indent}**Test ID:** ${context.testid}`);
+	return lines;
+}
+
+function formatAnnotation(annotation: Annotation, index: number): string[] {
+	const { contexts, prompt } = annotation;
+	const isMulti = contexts.length > 1;
+	const primary = contexts[0];
+	const summary = isMulti ? buildMultiSummary(contexts) : (primary?.summary ?? 'element');
+	const lines: string[] = [`### ${index + 1}. ${summary}`];
+
+	if (isMulti) {
+		contexts.forEach((context, i) => {
+			lines.push(`- Element ${i + 1}: ${context.summary ?? 'element'}`);
+			for (const metaLine of formatContextMeta(context, '  - ')) {
+				lines.push(metaLine);
+			}
+		});
+	} else if (primary) {
+		for (const metaLine of formatContextMeta(primary)) {
+			lines.push(metaLine);
+		}
+	}
+
+	lines.push(`**Feedback:** ${prompt.trim()}`);
+	return lines;
+}
+
+export function formatAnnotationsForClipboard(payload: ClipboardPayload): string {
+	const sections: string[] = [
+		`## Page Feedback: ${payload.pagePath}`,
+		`**Viewport:** ${payload.viewport.width}×${payload.viewport.height}`,
+	];
+
+	for (const [index, annotation] of payload.annotations.entries()) {
+		sections.push(formatAnnotation(annotation, index).join('\n'));
+	}
+
+	return `${sections.join('\n\n')}\n`;
+}
+
+export function currentPagePath(): string {
+	return window.location.pathname + window.location.hash;
+}
+
+export function currentViewport(): { width: number; height: number } {
+	return { width: window.innerWidth, height: window.innerHeight };
+}
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/index.ts b/packages/frontend/editor-ui/src/app/dev/dev-panel/index.ts
new file mode 100644
index 0000000000000..946bcb965fc1e
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/index.ts
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import DevPanel from './DevPanel.vue';
+
+const MOUNT_ID = 'n8n-dev-panel-root';
+
+export function mountDevPanel() {
+	if (document.getElementById(MOUNT_ID)) return;
+
+	const container = document.createElement('div');
+	container.id = MOUNT_ID;
+	document.body.appendChild(container);
+
+	const app = createApp(DevPanel);
+	app.mount(container);
+}
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/useElementPicker.ts b/packages/frontend/editor-ui/src/app/dev/dev-panel/useElementPicker.ts
new file mode 100644
index 0000000000000..82b15baf3a89f
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/useElementPicker.ts
@@ -0,0 +1,196 @@
+import { onUnmounted, ref, shallowRef } from 'vue';
+
+export const DEV_PANEL_ROOT_ATTR = 'data-dev-panel-root';
+const DRAG_THRESHOLD = 5;
+const MIN_ELEMENT_SIZE = 8;
+
+function isInsideDevPanel(el: Element | null): boolean {
+	let current = el;
+	while (current) {
+		if (current.hasAttribute(DEV_PANEL_ROOT_ATTR)) return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+
+export type DragRect = { x: number; y: number; width: number; height: number };
+
+export type PickOptions = {
+	onShiftPick?: (el: Element) => void;
+	onDragSelect?: (els: Element[]) => void;
+};
+
+function collectElementsInRect(rect: DragRect): Element[] {
+	const candidates: Element[] = [];
+	const set = new Set<Element>();
+	const all = document.body.querySelectorAll('*');
+	for (const el of all) {
+		if (isInsideDevPanel(el)) continue;
+		const tag = el.tagName;
+		if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'LINK' || tag === 'META') continue;
+		const r = el.getBoundingClientRect();
+		if (r.width < MIN_ELEMENT_SIZE || r.height < MIN_ELEMENT_SIZE) continue;
+		if (
+			r.left < rect.x ||
+			r.top < rect.y ||
+			r.right > rect.x + rect.width ||
+			r.bottom > rect.y + rect.height
+		) {
+			continue;
+		}
+		candidates.push(el);
+		set.add(el);
+	}
+	return candidates.filter((el) => {
+		let parent = el.parentElement;
+		while (parent) {
+			if (set.has(parent)) return false;
+			parent = parent.parentElement;
+		}
+		return true;
+	});
+}
+
+export function useElementPicker() {
+	const isPicking = ref(false);
+	const hoveredElement = shallowRef<Element | null>(null);
+	const selectedElement = shallowRef<Element | null>(null);
+	const dragRect = shallowRef<DragRect | null>(null);
+	let shiftPickHandler: ((el: Element) => void) | null = null;
+	let dragSelectHandler: ((els: Element[]) => void) | null = null;
+	let dragStart: { x: number; y: number } | null = null;
+	let dragging = false;
+
+	function suppressClickOnce() {
+		const handler = (event: MouseEvent) => {
+			event.preventDefault();
+			event.stopPropagation();
+			document.removeEventListener('click', handler, true);
+		};
+		document.addEventListener('click', handler, true);
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		if (event.button !== 0) return;
+		const target = document.elementFromPoint(event.clientX, event.clientY);
+		if (!target || isInsideDevPanel(target)) return;
+		event.preventDefault();
+		window.getSelection()?.removeAllRanges();
+		dragStart = { x: event.clientX, y: event.clientY };
+		dragging = false;
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (dragStart) {
+			const dx = event.clientX - dragStart.x;
+			const dy = event.clientY - dragStart.y;
+			if (!dragging && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)) {
+				dragging = true;
+				hoveredElement.value = null;
+			}
+			if (dragging) {
+				dragRect.value = {
+					x: Math.min(event.clientX, dragStart.x),
+					y: Math.min(event.clientY, dragStart.y),
+					width: Math.abs(dx),
+					height: Math.abs(dy),
+				};
+				event.preventDefault();
+				return;
+			}
+		}
+		const target = document.elementFromPoint(event.clientX, event.clientY);
+		if (!target || isInsideDevPanel(target)) {
+			hoveredElement.value = null;
+			return;
+		}
+		hoveredElement.value = target;
+	}
+
+	function handleMouseUp(event: MouseEvent) {
+		if (!dragStart) return;
+		const wasDrag = dragging;
+		const rect = dragRect.value;
+		dragStart = null;
+		dragging = false;
+		dragRect.value = null;
+		if (!wasDrag || !rect) return;
+		event.preventDefault();
+		event.stopPropagation();
+		suppressClickOnce();
+		if (!dragSelectHandler) return;
+		const els = collectElementsInRect(rect);
+		if (els.length > 0) dragSelectHandler(els);
+	}
+
+	function handleClick(event: MouseEvent) {
+		const target = document.elementFromPoint(event.clientX, event.clientY);
+		if (!target || isInsideDevPanel(target)) return;
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (event.shiftKey && shiftPickHandler) {
+			shiftPickHandler(target);
+			return;
+		}
+
+		selectedElement.value = target;
+		stop();
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			if (dragStart) {
+				dragStart = null;
+				dragging = false;
+				dragRect.value = null;
+				return;
+			}
+			stop();
+		}
+	}
+
+	let previousUserSelect = '';
+
+	function start(options?: PickOptions) {
+		if (isPicking.value) return;
+		shiftPickHandler = options?.onShiftPick ?? null;
+		dragSelectHandler = options?.onDragSelect ?? null;
+		isPicking.value = true;
+		hoveredElement.value = null;
+		dragRect.value = null;
+		previousUserSelect = document.body.style.userSelect;
+		document.body.style.userSelect = 'none';
+		document.addEventListener('mousedown', handleMouseDown, true);
+		document.addEventListener('mousemove', handleMouseMove, true);
+		document.addEventListener('mouseup', handleMouseUp, true);
+		document.addEventListener('click', handleClick, true);
+		document.addEventListener('keydown', handleKeyDown, true);
+	}
+
+	function stop() {
+		if (!isPicking.value) return;
+		isPicking.value = false;
+		hoveredElement.value = null;
+		dragRect.value = null;
+		dragStart = null;
+		dragging = false;
+		shiftPickHandler = null;
+		dragSelectHandler = null;
+		document.body.style.userSelect = previousUserSelect;
+		document.removeEventListener('mousedown', handleMouseDown, true);
+		document.removeEventListener('mousemove', handleMouseMove, true);
+		document.removeEventListener('mouseup', handleMouseUp, true);
+		document.removeEventListener('click', handleClick, true);
+		document.removeEventListener('keydown', handleKeyDown, true);
+	}
+
+	function clearSelection() {
+		selectedElement.value = null;
+	}
+
+	onUnmounted(stop);
+
+	return { isPicking, hoveredElement, selectedElement, dragRect, start, stop, clearSelection };
+}
diff --git a/packages/frontend/editor-ui/src/app/dev/dev-panel/useFeatureFlags.ts b/packages/frontend/editor-ui/src/app/dev/dev-panel/useFeatureFlags.ts
new file mode 100644
index 0000000000000..4f99761525128
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/dev/dev-panel/useFeatureFlags.ts
@@ -0,0 +1,151 @@
+import { ref } from 'vue';
+
+export const OVERRIDES_STORAGE_KEY = 'N8N_EXPERIMENT_OVERRIDES';
+
+export type FlagValue = boolean | string;
+
+export type Flag = {
+	name: string;
+	phValue: FlagValue | undefined;
+	override: FlagValue | undefined;
+	isVariant: boolean;
+};
+
+type PostHogBlob = {
+	$enabled_feature_flags?: Record<string, FlagValue>;
+	$active_feature_flags?: string[];
+	$override_feature_flags?: Record<string, FlagValue>;
+} & Record<string, unknown>;
+
+type PostHogSDK = {
+	getFeatureFlags?: () => Record<string, FlagValue> | null | undefined;
+};
+
+function readEvaluatedFlags(): Record<string, FlagValue> {
+	const out: Record<string, FlagValue> = {};
+	try {
+		const all = window.featureFlags?.getAll?.();
+		if (all) {
+			for (const key of Object.keys(all)) {
+				const value = all[key];
+				if (value !== undefined) out[key] = value;
+			}
+		}
+	} catch {
+		// store not initialised yet
+	}
+	return out;
+}
+
+function readSdkFlags(): Record<string, FlagValue> {
+	const out: Record<string, FlagValue> = {};
+	try {
+		const ph = (window as unknown as { posthog?: PostHogSDK }).posthog;
+		const flags = ph?.getFeatureFlags?.();
+		if (flags) {
+			for (const key of Object.keys(flags)) {
+				out[key] = flags[key];
+			}
+		}
+	} catch {
+		// PostHog not loaded
+	}
+	return out;
+}
+
+function readPersistedFlags(): Record<string, FlagValue> {
+	const out: Record<string, FlagValue> = {};
+	try {
+		for (const key of Object.keys(window.localStorage)) {
+			if (!key.startsWith('ph_') || !key.includes('_posthog')) continue;
+			const raw = window.localStorage.getItem(key);
+			if (!raw) continue;
+			const blob = JSON.parse(raw) as PostHogBlob | null;
+			if (!blob) continue;
+
+			const enabled = blob.$enabled_feature_flags ?? {};
+			for (const k of Object.keys(enabled)) out[k] = enabled[k];
+
+			const active = blob.$active_feature_flags ?? [];
+			for (const k of active) {
+				if (!(k in out)) out[k] = true;
+			}
+
+			const overrides = blob.$override_feature_flags ?? {};
+			for (const k of Object.keys(overrides)) out[k] = overrides[k];
+
+			for (const k of Object.keys(blob)) {
+				if (k.startsWith('$feature/')) {
+					out[k.slice('$feature/'.length)] = blob[k] as FlagValue;
+				}
+			}
+		}
+	} catch {
+		// malformed blob — skip
+	}
+	return out;
+}
+
+function readOverrides(): Record<string, FlagValue> {
+	try {
+		const raw = window.localStorage.getItem(OVERRIDES_STORAGE_KEY);
+		if (!raw) return {};
+		const parsed = JSON.parse(raw) as unknown;
+		if (parsed && typeof parsed === 'object') return parsed as Record<string, FlagValue>;
+		return {};
+	} catch {
+		return {};
+	}
+}
+
+function writeOverrides(overrides: Record<string, FlagValue>) {
+	window.localStorage.setItem(OVERRIDES_STORAGE_KEY, JSON.stringify(overrides));
+}
+
+function isVariantFlag(phValue: FlagValue | undefined, override: FlagValue | undefined): boolean {
+	if (typeof phValue === 'string' && phValue !== 'false') return true;
+	if (typeof override === 'string' && override !== 'false') return true;
+	return false;
+}
+
+export function useFeatureFlags() {
+	const flags = ref<Flag[]>([]);
+	const overrides = ref<Record<string, FlagValue>>({});
+
+	function refresh() {
+		const persisted = readPersistedFlags();
+		const sdk = readSdkFlags();
+		const evaluated = readEvaluatedFlags();
+		const ph: Record<string, FlagValue> = { ...persisted, ...sdk, ...evaluated };
+		const ovr = readOverrides();
+		const allNames = Array.from(new Set([...Object.keys(ph), ...Object.keys(ovr)])).sort();
+
+		overrides.value = ovr;
+		flags.value = allNames.map((name) => ({
+			name,
+			phValue: ph[name],
+			override: ovr[name],
+			isVariant: isVariantFlag(ph[name], ovr[name]),
+		}));
+	}
+
+	function setOverride(name: string, value: FlagValue) {
+		const next = { ...overrides.value, [name]: value };
+		writeOverrides(next);
+		refresh();
+	}
+
+	function removeOverride(name: string) {
+		const next = { ...overrides.value };
+		delete next[name];
+		writeOverrides(next);
+		refresh();
+	}
+
+	function clearAll() {
+		writeOverrides({});
+		refresh();
+	}
+
+	return { flags, overrides, refresh, setOverride, removeOverride, clearAll };
+}
diff --git a/packages/frontend/editor-ui/src/main.ts b/packages/frontend/editor-ui/src/main.ts
index 06c5e56938625..c63087cfc285a 100644
--- a/packages/frontend/editor-ui/src/main.ts
+++ b/packages/frontend/editor-ui/src/main.ts
@@ -59,6 +59,10 @@ if (import.meta.env.VUE_SCAN) {
 
 app.mount('#app');
 
+if (import.meta.env.DEV) {
+	void import('@/app/dev/dev-panel').then((m) => m.mountDevPanel());
+}
+
 if (!import.meta.env.PROD) {
 	// Make sure that we get all error messages properly displayed
 	// as long as we are not in production mode