@widgetic/creator 0.3.59 → 0.3.61

package/dist/CreatorApp.svelte

@@ -28,6 +28,7 @@
 		ResponseError
 	} from '@widgetic/api-sdk';
 	import type { Middleware } from '@widgetic/api-sdk';
+	import { parseVersionPreviewError } from './utils/versionPreviewError.js';
 
 	/**
 	 * Idempotency middleware (Phase 2 hardening): the gateway rejects
@@ -147,18 +148,31 @@
 		const name = (widget.name || '').trim() || 'Untitled Widget';
 		// console.log('[CreatorApp] Notify host widget name:', widget.id, name);
 		onWidgetRenamed?.({ widgetId: widget.id, name });
+		// Also broadcast — mount props can be stale across embed remounts.
+		if (typeof window !== 'undefined') {
+			window.dispatchEvent(
+				new CustomEvent('widgetic:creator-primary-renamed', {
+					detail: { widgetId: widget.id, name },
+				}),
+			);
+		}
 	}
 
 	/**
 	 * Rewrite the embedded URL so a refresh resumes the current canvas instead of
 	 * re-running the new-widget bootstrap (which creates a blank canvas every time).
+	 *
+	 * The canvas id goes into the **path** (`/canvas/<canvasId>`), matching the host route.
 	 * Uses history.replaceState — no navigation, no host remount.
 	 */
 	function syncEmbeddedCanvasUrl(canvasIdToSync: string): void {
 		if (!embedded || !canvasIdToSync) return;
 		try {
 			const url = new URL(window.location.href);
-			url.searchParams.set('canvas_id', canvasIdToSync);
+			url.pathname = `/canvas/${encodeURIComponent(canvasIdToSync)}`;
+			url.searchParams.delete('canvas_id');
+			url.searchParams.delete('canvas-id');
+			url.searchParams.delete('widget_id');
 			url.searchParams.delete('new_widget');
 			window.history.replaceState(window.history.state, '', url.toString());
 			// console.log('[CreatorApp] URL synced to canvas:', canvasIdToSync);
@@ -200,8 +214,11 @@
 		if (selectedWidget?.id === targetId) {
 			selectedWidget = { ...selectedWidget, name: trimmed };
 		}
+		widgetNamesRevision += 1;
 		panelDisplayRevision += 1;
 		backfillWidgetShapeMetadata();
+		syncWidgetShapeLivePreviews();
+		emitCanvasWidgetsList('host-widget-renamed');
 		// console.log('[CreatorApp] Applied host widget rename:', targetId.substring(0, 8), trimmed);
 
 		if (!widgetsClient) return;
@@ -448,6 +465,8 @@
 	import SelectorDropdown from './components/SelectorDropdown.svelte';
 	import type { DropdownItem } from './components/SelectorDropdown.svelte';
 	import WidgetShapeLivePreviews from './components/WidgetShapeLivePreviews.svelte';
+	import HoverTooltip from './components/HoverTooltip.svelte';
+	import VersionDropdownRow from './components/VersionDropdownRow.svelte';
 
 	// WIDGET DETAILS COMPONENT — lazy-loaded to reduce peak build memory
 	let WidgetDetails: any;
@@ -558,6 +577,18 @@
 	// Delete canvas dialog
 	let showDeleteCanvasDialog = false;
 	let deleteCanvasTarget: { id: string; name: string } | null = null;
+	/**
+	 * Widgets the pending canvas deletion would remove, grouped by project.
+	 * A canvas can hold widgets from more than one project (moving a widget
+	 * rewrites `project_id` but leaves `canvas_id`), so the dialog states exactly
+	 * what is about to be lost instead of only reassuring that it is irreversible.
+	 */
+	let deleteCanvasPreview: {
+		widgetCount: number;
+		groups: Array<{ projectName: string; widgetNames: string[] }>;
+	} | null = null;
+	let deleteCanvasPreviewLoading = false;
+	let deleteCanvasError = '';
 
 	// Widgets state
 	interface WidgetSummary {
@@ -679,6 +710,21 @@
 			}
 			showToast('success', 'Widget deleted from database');
 		} catch (err) {
+			// A shape can outlive its widget row (deleted from the Projects page or
+			// another session). The canvas only needs the shape and local entry gone,
+			// so treat "already gone" as success instead of a blocking error — that
+			// left orphan shapes impossible to remove from the canvas.
+			if (err instanceof ResponseError && err.response?.status === 404) {
+				console.warn('[WidgetCreator] Widget already absent from DB — removing locally:', widgetId);
+				widgets = widgets.filter((w: any) => w.id !== widgetId);
+				if (selectedWidgetId === widgetId) {
+					selectedWidgetId = null;
+				}
+				showToast('info', 'Widget was already deleted', {
+					description: 'Removed the leftover shape from this canvas.',
+				});
+				return;
+			}
 			console.error('[WidgetCreator] Failed to delete widget from DB:', err);
 			showToast('error', 'Failed to delete widget from database');
 		}
@@ -890,7 +936,10 @@
 				contextType: options?.source === 'preview-screenshot' ? 'browser-ic' : 'widget-codegen',
 				source: options?.source || 'chat-upload',
 				widgetId: persistWidgetId && !isDraftConvertId(persistWidgetId) ? persistWidgetId : undefined,
-				conversationId: currentChatConversationId || undefined,
+				conversationId:
+					currentChatConversationId && !isLocalOnlyConversationId(currentChatConversationId)
+						? currentChatConversationId
+						: undefined,
 			},
 			{ onProgress: options?.onProgress },
 		);
@@ -1287,14 +1336,15 @@
 		return dataUrls.slice(0, 1);
 	}
 
-	async function persistWidgetListThumbnail(widgetId: string, imageDataUrl: string): Promise<void> {
-		if (!widgetsClient || !widgetId || !imageDataUrl) return;
+	async function persistWidgetListThumbnail(widgetId: string, imageDataUrl: string, isCurrent = () => true): Promise<void> {
+		if (!widgetsClient || !widgetId || !imageDataUrl || !isCurrent()) return;
 		try {
 			const compact = imageDataUrl.startsWith('data:image/')
 				? await compressImageDataUrlForCodegen(imageDataUrl, 384, 180000)
 				: imageDataUrl;
+			if (!isCurrent()) return;
 			const thumbnailUrl = await persistWidgetThumbnail(widgetsClient, widgetId, compact);
-			if (thumbnailUrl) {
+			if (thumbnailUrl && isCurrent()) {
 				widgets = widgets.map((w) =>
 					w.id === widgetId ? { ...w, thumbnailUrl, thumbnail_url: thumbnailUrl } : w
 				);
@@ -1485,40 +1535,205 @@
 		// console.log('[WidgetCreator] Cleared prompt draft for widget:', widgetId.substring(0, 8));
 	}
 
-	/** Screenshot: capture this panel's widget preview iframe and return data URL */
-	async function handleChatScreenshot(widgetId?: string | null): Promise<string | null> {
+	/** Live WidgetShape iframe only — never the hidden panel preview column. */
+	/**
+	 * Find the live preview iframe for a widget.
+	 *
+	 * When a widget id is given we must return *that* widget's iframe or nothing
+	 * at all. Falling back to "the first widget-shape iframe on the page" meant a
+	 * screenshot request for widget A could capture widget B's preview and store it
+	 * as A's thumbnail — which is how a gallery thumbnail ended up on an unrelated
+	 * widget in the Projects list.
+	 */
+	function resolveLiveWidgetShapeIframe(widgetId: string | null | undefined): HTMLIFrameElement | null {
 		const targetId = widgetId || focusedPanelWidgetId || selectedWidgetId;
-		const panelRef = getWidgetDetailsRef(targetId);
-		const iframe =
-			(panelRef?.getPreviewIframe?.() as HTMLIFrameElement | null) ||
-			(document.querySelector('iframe[title="Widget preview"]') as HTMLIFrameElement | null);
-
-		if (!iframe?.contentWindow) {
-			// console.log('[Chat→Screenshot] Preview iframe not ready', {
-				// targetId: targetId?.substring(0, 8),
-				// hasValidPreview: panelRef?.hasValidPreview?.() ?? false,
-			// });
-			return null;
+		if (targetId) {
+			const liveById = document.querySelector(
+				`iframe.widget-shape-live-preview-iframe[data-widget-id="${CSS.escape(targetId)}"]`,
+			) as HTMLIFrameElement | null;
+			return liveById?.contentWindow ? liveById : null;
+		}
+		// No id known: only unambiguous when exactly one shape is mounted.
+		const all = Array.from(
+			document.querySelectorAll('iframe.widget-shape-live-preview-iframe'),
+		) as HTMLIFrameElement[];
+		const withWindow = all.filter((frame) => !!frame.contentWindow);
+		return withWindow.length === 1 ? withWindow[0] : null;
+	}
+
+	function isWorkerPreviewUrl(url: string | null | undefined): boolean {
+		if (!url) return false;
+		try {
+			const u = new URL(url, window.location.origin);
+			return /\/preview\/[^/]+/i.test(u.pathname) || u.pathname.includes('/__widget_builder__/');
+		} catch {
+			return /\/preview\//i.test(url);
 		}
+	}
 
-		// console.log('[Chat→Screenshot] Requesting screenshot from preview iframe', targetId?.substring(0, 8));
-		return new Promise<string | null>((resolve) => {
+	function requestIframeScreenshot(
+		iframe: HTMLIFrameElement,
+		timeoutMs = 6000,
+	): Promise<{ data: string | null; error: string | null }> {
+		return new Promise((resolve) => {
+			if (!iframe.contentWindow) {
+				resolve({ data: null, error: 'no-content-window' });
+				return;
+			}
 			const timeout = setTimeout(() => {
 				window.removeEventListener('message', handler);
-				console.warn('[Chat→Screenshot] Timed out waiting for widgetic:screenshot');
-				resolve(null);
-			}, 8000);
+				resolve({ data: null, error: 'timeout' });
+			}, timeoutMs);
 
 			function handler(event: MessageEvent) {
 				if (event.data?.type !== 'widgetic:screenshot') return;
+				// Ignore other widgets and synthetic replies with no source window.
+				if (event.source !== iframe.contentWindow) return;
 				clearTimeout(timeout);
 				window.removeEventListener('message', handler);
-				resolve(event.data.data || null);
+				resolve({
+					data: typeof event.data.data === 'string' ? event.data.data : null,
+					error: typeof event.data.error === 'string' ? event.data.error : null,
+				});
 			}
 			window.addEventListener('message', handler);
-			iframe.contentWindow!.postMessage({ type: 'widgetic:request-screenshot' }, '*');
+			iframe.contentWindow.postMessage({ type: 'widgetic:request-screenshot' }, '*');
 		});
 	}
+
+	/**
+	 * Published CDN artifacts often lack the Worker screenshot script.
+	 * Capture via a temporary same-path Worker /preview iframe (has html2canvas handler).
+	 */
+	async function captureViaHiddenWorkerPreview(widgetId: string): Promise<string | null> {
+		const workerUrl = `${widgetBuilderPreviewBaseUrl()}/preview/${widgetId}`;
+		console.log('[Chat→Screenshot] Capturing via hidden Worker preview', {
+			widgetId: widgetId.substring(0, 8),
+			workerUrl,
+		});
+
+		const host = document.createElement('div');
+		host.className = 'wc-hidden-screenshot-host';
+		host.setAttribute(
+			'style',
+			'position:fixed;left:-10000px;top:0;width:800px;height:600px;opacity:0;pointer-events:none;z-index:-1;',
+		);
+		const iframe = document.createElement('iframe');
+		iframe.title = 'Hidden widget screenshot';
+		iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
+		iframe.style.cssText = 'width:800px;height:600px;border:0;';
+		host.appendChild(iframe);
+		document.body.appendChild(host);
+
+		try {
+			await new Promise<void>((resolve, reject) => {
+				const timeout = setTimeout(() => reject(new Error('worker-preview-load-timeout')), 12000);
+				iframe.onload = () => {
+					clearTimeout(timeout);
+					resolve();
+				};
+				iframe.onerror = () => {
+					clearTimeout(timeout);
+					reject(new Error('worker-preview-load-error'));
+				};
+				iframe.src = workerUrl;
+			});
+			// Give injected screenshot handler + images a beat to settle
+			await new Promise((r) => setTimeout(r, 800));
+			const result = await requestIframeScreenshot(iframe, 12000);
+			if (result.data) return result.data;
+			console.warn('[Chat→Screenshot] Hidden Worker capture failed:', result.error);
+			return null;
+		} catch (err) {
+			console.warn('[Chat→Screenshot] Hidden Worker preview error:', err);
+			return null;
+		} finally {
+			host.remove();
+		}
+	}
+
+	/** Explicit Refresh only: capture the loaded frame without opening a panel or publishing. */
+	async function handleWidgetShapeRefresh(widgetId, iframe, isCurrentFrame) {
+		const capturedCanvasId = getEffectiveCanvasId();
+		const capturedCanvas = canvasRef;
+		const capturedSource = shapePreviewSourceByWidgetId[widgetId] || 'live';
+		// Frame/intent identity owns this capture, not focused-panel HEAD hydration
+		// or another widget's global generation operation.
+		const isCurrent = () => isCurrentFrame() && !!getWidgetById(widgetId)
+			&& !isDraftConvertId(widgetId) && !generatingWidgetIds[widgetId]
+			&& capturedCanvasId === getEffectiveCanvasId() && capturedCanvas === canvasRef
+			&& capturedSource === (shapePreviewSourceByWidgetId[widgetId] || 'live')
+			&& resolveLiveWidgetShapeIframe(widgetId) === iframe;
+		if (!isCurrent()) return;
+		try {
+			const screenshot = await handleChatScreenshot(widgetId, iframe);
+			if (!screenshot || !isCurrent()) return;
+			// Persist before Fabric/autosave side effects can resync the live overlay.
+			await persistWidgetListThumbnail(widgetId, screenshot, isCurrent);
+			if (!isCurrent()) return;
+			capturedCanvas?.updateWidgetImage(widgetId, screenshot);
+			const canvasJson = capturedCanvas?.saveCanvas?.();
+			if (canvasJson) void handleCanvasAutoSave(canvasJson);
+		} catch (error) {
+			console.warn('[WidgetShape] Refresh thumbnail capture failed', widgetId, error);
+		}
+	}
+
+	/** Screenshot: capture the live WidgetShape iframe (CDN or Worker), not Fabric wireframe. */
+	async function handleChatScreenshot(widgetId?: string | null, requiredIframe: HTMLIFrameElement | null = null): Promise<string | null> {
+		const targetId = widgetId || focusedPanelWidgetId || selectedWidgetId;
+		if (!targetId) {
+			console.warn('[Chat→Screenshot] No widget id');
+			return null;
+		}
+
+		const liveIframe = requiredIframe ?? resolveLiveWidgetShapeIframe(targetId);
+		if (requiredIframe && (requiredIframe !== resolveLiveWidgetShapeIframe(targetId) || !requiredIframe.isConnected)) return null;
+		const liveSrc = liveIframe
+			? liveIframe.getAttribute('src') || liveIframe.src || ''
+			: '';
+
+		// 1) Always try the visible live iframe first (published HTML from Worker includes screenshot script)
+		if (liveIframe?.contentWindow) {
+			console.log('[Chat→Screenshot] Live WidgetShape iframe', {
+				targetId: targetId.substring(0, 8),
+				isWorker: isWorkerPreviewUrl(liveSrc),
+				src: liveSrc.slice(0, 120),
+			});
+			const fromLive = await requestIframeScreenshot(liveIframe, 12000);
+			if (fromLive.data && fromLive.data.length > 500) {
+				return fromLive.data;
+			}
+			console.warn('[Chat→Screenshot] Live iframe capture failed:', fromLive.error);
+		}
+
+		// Explicit refresh must not persist a different version or a stale Fabric image.
+		if (requiredIframe) return null;
+
+		// 2) Hidden Worker /preview (same capture script; wait for load)
+		const fromWorker = await captureViaHiddenWorkerPreview(targetId);
+		if (fromWorker && fromWorker.length > 500) return fromWorker;
+
+		// 3) Last resort: Fabric thumbnail (often stale / wireframe) — only if nothing else works
+		const shapeDataUrl =
+			typeof canvasRef?.getWidgetShapeDataUrl === 'function'
+				? canvasRef.getWidgetShapeDataUrl(targetId)
+				: null;
+		if (shapeDataUrl && shapeDataUrl.length > 100) {
+			console.warn(
+				'[Chat→Screenshot] Falling back to Fabric thumbnail (may be stale wireframe)',
+				targetId.substring(0, 8),
+			);
+			return shapeDataUrl;
+		}
+
+		console.warn('[Chat→Screenshot] All capture paths failed', {
+			targetId: targetId.substring(0, 8),
+			hadLiveIframe: !!liveIframe,
+			liveSrc: liveSrc.slice(0, 100),
+		});
+		return null;
+	}
 	
 	function normalizeConversationRecords(json: any): any[] {
 		const raw = json?.data ?? json?.conversations ?? json;
@@ -1606,6 +1821,8 @@
 	/** Load messages for a conversation from backend */
 	async function handleLoadMessages(conversationId: string, widgetIdForSync?: string | null): Promise<any[]> {
 		try {
+			// Client-only conversations (draft convert panels) have no DB row.
+			if (isLocalOnlyConversationId(conversationId)) return [];
 			if (!messagesClient) {
 				console.warn('[Chat→Backend] messagesClient not initialized');
 				return [];
@@ -1669,7 +1886,17 @@
 		try {
 			if (!conversationsClient) {
 				console.warn('[Chat→Backend] conversationsClient not initialized');
-				return { id: crypto.randomUUID(), title };
+				return null;
+			}
+			// Draft convert panels have no DB widget yet, so there is no table row to
+			// attach a conversation to. `@widgetic/chat` requires an object with an
+			// `id` here and treats anything else as a fatal init error, so hand it a
+			// clearly-marked client-only id. `finalizeDraftConversion` never migrates
+			// this id into the real widget's panel state, so messages sent before the
+			// widget exists can never be persisted against a phantom conversation.
+			if (!contextId || isDraftConvertId(contextId) || String(contextId).startsWith('draft')) {
+				const localConversationId = `local_${contextId || 'draft'}_${Date.now()}`;
+				return { id: localConversationId, title, isLocalOnly: true };
 			}
 			const response = await conversationsClient.createConversationForWidgetRaw({
 				createConversationForWidgetRequest: {
@@ -1693,7 +1920,8 @@
 			return conversationId ? { ...conversation, id: conversationId } : conversation;
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to create conversation:', error);
-			return { id: crypto.randomUUID(), title };
+			// Never invent a local UUID — saving messages against it yields 403 and stops codegen.
+			return null;
 		}
 	}
 
@@ -1810,6 +2038,11 @@
 		persistWidgetId?: string | null,
 	): Promise<any> {
 		try {
+			// Draft convert panels hold a client-only conversation until the widget
+			// exists; there is no `conversations` row to attach messages to yet.
+			if (isLocalOnlyConversationId(conversationId)) {
+				return { id: `local_msg_${Date.now()}`, attachments: attachments ?? [] };
+			}
 			if (!messagesClient) {
 				console.warn('[Chat→Backend] messagesClient not initialized');
 				return null;
@@ -1865,7 +2098,11 @@
 	}
 
 	/** Restore conversation to a checkpoint message via backend (deletes messages + git rollback) */
-	async function handleRestoreCheckpoint(conversationId: string, checkpointMessageId: string): Promise<any> {
+	async function handleRestoreCheckpoint(
+		conversationId: string,
+		checkpointMessageId: string,
+		restoreWidgetId?: string | null,
+	): Promise<any> {
 		try {
 			if (!messagesClient) {
 				console.warn('[Chat→Backend] messagesClient not initialized');
@@ -1882,16 +2119,39 @@
 			const data = json?.data || json;
 			// console.log('[Chat→Backend] Checkpoint restored:', data);
 
-			// Refresh the widget preview after restore — the backend rebuilds the widget
-			// from the reverted code, so we just need to reload the iframe.
-			// Check both camelCase (after responseTransformMiddleware) and snake_case paths.
 			const gitRollback = data?.gitRollback || data?.git_rollback || data?.data?.gitRollback || data?.data?.git_rollback;
 			const undoMode = data?.undoMode ?? data?.undo_mode ?? false;
 			const targetCommit = gitRollback?.targetCommit ?? gitRollback?.target_commit;
-			// console.log('[Chat→Backend] Git rollback result:', gitRollback, { undoMode, targetCommit });
+			const panelWidgetId =
+				restoreWidgetId ||
+				focusedPanelWidgetId ||
+				selectedWidgetId ||
+				null;
+			// console.log('[Chat→Backend] Git rollback result:', gitRollback, { undoMode, targetCommit, panelWidgetId });
 			if (gitRollback?.success) {
+				// Fast path: a recorded version at this commit has an immutable cached
+				// artifact — reuse it instead of the forced repo rebuild + retry ladder.
+				let previewFromVersionCache = false;
 				if (targetCommit) {
 					lastCommitId = targetCommit;
+					if (panelWidgetId) {
+						patchPanelSnapshot(panelWidgetId, { lastCommitId: targetCommit });
+						patchCodegenUiState(panelWidgetId, {});
+						// Message-extracted SHAs may be short (7+ chars); compare by prefix.
+						const targetSha = String(targetCommit).toLowerCase();
+						const matchedVersion = (resolveWidgetShapeVersionOptions(panelWidgetId) ?? [])
+							.find((option) => {
+								const optionSha = String(option.commitSha ?? '').toLowerCase();
+								return optionSha.length >= 7 && targetSha.length >= 7
+									&& (optionSha === targetSha || optionSha.startsWith(targetSha) || targetSha.startsWith(optionSha));
+							});
+						if (matchedVersion) {
+							shapeVersionPreviewErrorsByKey = { ...shapeVersionPreviewErrorsByKey, [`${panelWidgetId}:v:${matchedVersion.id.slice(2)}`]: null };
+							shapePreviewSourceByWidgetId = { ...shapePreviewSourceByWidgetId, [panelWidgetId]: matchedVersion.id };
+							handleWidgetShapeVersionChange(panelWidgetId, matchedVersion.id);
+							previewFromVersionCache = true;
+						}
+					}
 				}
 				showToast('success', undoMode ? 'Change undone' : 'Checkpoint restored', {
 					description: undoMode
@@ -1905,20 +2165,33 @@
 				compositionDesignSchema = null;
 				compositionContentSchema = null;
 				pendingCreatePreviewDefaultsWidgetId = null;
-				// Rollback commit may take a moment to be visible from the Worker's clone; retry
-				// build-from-repo with escalating delays to survive GitLab propagation lag.
-				_isRestoringCheckpoint = true;
+				_isRestoringCheckpoint = !previewFromVersionCache;
+				if (previewFromVersionCache) {
+					// Immutable artifact already serves the preview; no rebuild ladder.
+					syncWidgetShapeLivePreviews();
+					setTimeout(() => handleRefreshScreenshot(panelWidgetId, { quiet: true }), 2000);
+					return { ...data, previewFromVersionCache };
+				}
+				const panelRef = panelWidgetId ? getWidgetDetailsRef(panelWidgetId) : widgetDetails;
 				const scheduleBuildRetry = async () => {
 					const delays = [2500, 5000, 8000];
 					for (let i = 0; i < delays.length; i++) {
 						await new Promise((r) => setTimeout(r, delays[i]));
 						if (i === 0) suppressNextBuildFromRepoChatMessage = true;
 						try {
-							await widgetDetails?.triggerBuildFromRepo({ force: true });
-							const err = widgetDetails?.getPreviewError?.() ?? null;
+							const activeRef = panelWidgetId ? getWidgetDetailsRef(panelWidgetId) : panelRef;
+							await activeRef?.triggerBuildFromRepo({ force: true });
+							const err = activeRef?.getPreviewError?.() ?? null;
 							if (!err) {
-								// console.log('[Restore] triggerBuildFromRepo succeeded on attempt', i + 1);
 								_isRestoringCheckpoint = false;
+								if (panelWidgetId) {
+									shapePreviewSourceByWidgetId = {
+										...shapePreviewSourceByWidgetId,
+										[panelWidgetId]: 'preview',
+									};
+									syncWidgetShapeLivePreviews();
+									setTimeout(() => handleRefreshScreenshot(panelWidgetId, { quiet: true }), 2000);
+								}
 								return;
 							}
 							console.warn('[Restore] triggerBuildFromRepo attempt', i + 1, 'has error:', err);
@@ -1941,14 +2214,16 @@
 				pendingCreatePreviewDefaultsWidgetId = null;
 				setTimeout(() => {
 					suppressNextBuildFromRepoChatMessage = true;
-					widgetDetails?.triggerBuildFromRepo({ force: true });
+					const activeRef = panelWidgetId ? getWidgetDetailsRef(panelWidgetId) : widgetDetails;
+					void activeRef?.triggerBuildFromRepo({ force: true });
 				}, 1500);
 			}
-
 			return data;
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to restore checkpoint:', error);
-			_isRestoringCheckpoint = false;
+			showToast('error', 'Failed to restore checkpoint', {
+				description: error instanceof Error ? error.message : 'Unknown error',
+			});
 			return null;
 		}
 	}
@@ -1985,7 +2260,7 @@
 	let lastPublishedVersion: number | null = null;
 	let selectedWidgetJsPath: string | null = null;
 
-	// Publish History state — loaded when user expands the history panel
+	// Version history state — loaded when user expands the history panel
 	interface PublishHistoryRecord {
 		id: string;
 		version: number;
@@ -1994,10 +2269,23 @@
 		commit_sha?: string | null;
 		artifactUrl?: string;
 		artifact_url?: string;
-		publishedAt?: string;
-		published_at?: string;
+		/**
+		 * When this version went Live. Null/absent means it is a Draft — a version
+		 * that has been generated but never published. This is the single
+		 * discriminator between Draft and Live; there is no second version type.
+		 */
+		publishedAt?: string | null;
+		published_at?: string | null;
 		publishedBy?: string | null;
 		published_by?: string | null;
+		createdAt?: string | null;
+		created_at?: string | null;
+		/** Derived server-side so the client does not re-infer the Draft/Live split. */
+		isPublished?: boolean;
+		is_published?: boolean;
+		thumbnailUrl?: string | null;
+		thumbnail_url?: string | null;
+		prompt?: string | null;
 	}
 	let publishHistory: PublishHistoryRecord[] = [];
 	let isHistoryOpen = false;
@@ -2123,14 +2411,15 @@
 	let editingCompositionName = '';
 	let deletingCompositionId: string | null = null;
 
-	/** Explicit chat box height (px). Drag grows this and pushes Publish down. */
-	const CHAT_DEFAULT_HEIGHT = 550;
-	const CHAT_MIN_HEIGHT = 260;
+	/** Explicit chat box height (px). null/0 = fill available; user drag sets a fixed px. */
+	const CHAT_DEFAULT_HEIGHT = 400;
+	const CHAT_MIN_HEIGHT = 400;
 	const CHAT_MAX_HEIGHT = 2000;
 
-	function getChatContainerHeightForPanel(widgetId: string): number {
+	function getChatContainerHeightForPanel(widgetId: string): number | null {
 		const stored = getPanelState(widgetId).chatContainerHeight;
-		if (stored == null || stored <= 0) return CHAT_DEFAULT_HEIGHT;
+		// null/0 → fill available space (flex-grow). Explicit resize stores a px value.
+		if (stored == null || stored <= 0) return null;
 		return Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, stored));
 	}
 
@@ -2138,9 +2427,12 @@
 		const measured = document
 			.querySelector(`[data-widget-chat-height="${widgetId}"]`)
 			?.getBoundingClientRect().height;
-		const current = measured && measured > 0 ? measured : getChatContainerHeightForPanel(widgetId);
+		const current =
+			measured && measured > 0
+				? measured
+				: (getChatContainerHeightForPanel(widgetId) ?? CHAT_DEFAULT_HEIGHT);
 		const next = Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, current + deltaPx));
-		// console.log('[Chat] Resize container height:', widgetId?.substring(0, 8), current, '→', next);
+		console.log('[Chat] Resize container height:', widgetId?.substring(0, 8), current, '→', next);
 		patchPanelSnapshot(widgetId, { chatContainerHeight: next });
 	}
 
@@ -2293,6 +2585,11 @@
 	}
 
 	function scheduleWidgetSchemaLoad(widgetId: string): Promise<void> {
+		// Draft convert panels have no DB widget yet — `/widgets/:id/schema/*` validates
+		// a UUID, so calling it with a `draft_convert_*` id only produces a 400 and a
+		// console error. The real schemas are loaded once the panel migrates to the
+		// widget id after the first send.
+		if (isDraftConvertId(widgetId)) return Promise.resolve();
 		const cached = widgetSchemaCache.get(widgetId);
 		if (cached?.design || cached?.content) {
 			applyWidgetSchemaCacheToSnapshot(widgetId);
@@ -2462,6 +2759,9 @@
 	}
 
 	async function executeWidgetSchemaLoad(widgetId: string): Promise<void> {
+		// Defence in depth: callers already skip drafts, but any path that reaches
+		// here with a synthetic id would hit `/widgets/:id/schema/*` and get a 400.
+		if (isDraftConvertId(widgetId)) return;
 		schemaLoadInFlight.add(widgetId);
 
 		try {
@@ -2760,7 +3060,6 @@
 			// Only reuse js_path when it already points at this widget + this version.
 			// `/widgets/` alone used to win and keep Edit on the previous CDN version after publish.
 			if (!pointsAtOtherWidget && jsPathVersion === version) {
-				console.log('[Publish] Using js_path artifact URL', resolved);
 				return resolved;
 			}
 		}
@@ -3883,63 +4182,162 @@
 	}
 
 	function handleHostSaveCanvasEvent(): void {
-		canvasRef?.saveNow?.();
+		// Explicit Save must always persist — bypass soft load-cooldown / not-ready guards.
+		const json = canvasRef?.saveCanvas?.() ?? null;
+		if (!json) {
+			console.warn('[CreatorApp] Host Save ignored — saveCanvas returned null');
+			showToast('error', 'Nothing to save', { description: 'Canvas is not ready yet.' });
+			return;
+		}
+		void handleCanvasAutoSave(json, false, { force: true });
 	}
 
-	async function persistPrimaryWidgetId(widgetId: string) {
-		if (!widgetId) return;
+	async function persistPrimaryWidgetId(widgetId: string): Promise<boolean> {
+		if (!widgetId) return false;
+		const targetCanvasId =
+			(typeof canvasId === 'string' && canvasId.trim() ? canvasId.trim() : null) ||
+			(typeof sessionCanvasId === 'string' && sessionCanvasId.trim() ? sessionCanvasId.trim() : null);
+		const widget = getWidgetById(widgetId);
+		const widgetCanvasId =
+			(widget as { canvasId?: string | null; canvas_id?: string | null } | null)?.canvasId ??
+			(widget as { canvasId?: string | null; canvas_id?: string | null } | null)?.canvas_id ??
+			null;
+		const linkedIds = canvasRef?.getLinkedWidgetIds?.() ?? linkedWidgetIds ?? new Set<string>();
+		const shapeOnThisCanvas = linkedIds instanceof Set ? linkedIds.has(widgetId) : false;
+		// Explicit user intent (picking a primary) is the strongest ownership signal, so a
+		// shape the user drew / sees on THIS canvas always wins over a stale canvas_id.
+		// Legacy canvas duplication left the same shape spread across many canvases; refusing
+		// here made primary unsettable. Adopt (move) instead — never touch the shape itself.
+		const shouldAdoptToThisCanvas =
+			!!targetCanvasId && shapeOnThisCanvas && (!widgetCanvasId || widgetCanvasId !== targetCanvasId);
+		if (targetCanvasId && widgetCanvasId && widgetCanvasId !== targetCanvasId && !shapeOnThisCanvas) {
+			console.warn(
+				'[CreatorApp] Refusing primary_widget_id — widget belongs to another canvas and has no shape here',
+				widgetId.slice(0, 8),
+				'widgetCanvas',
+				String(widgetCanvasId).slice(0, 8),
+				'targetCanvas',
+				targetCanvasId.slice(0, 8),
+			);
+			emitCanvasWidgetsList('primary-refused');
+			return false;
+		}
 		canvasPrimaryWidgetId = widgetId;
+		saveSelectedWidgetId(widgetId);
 		// console.log('[CreatorApp] Set primary widget:', widgetId);
-		if (canvasId && canvasesClient) {
+		if (targetCanvasId && canvasesClient) {
 			try {
 				await canvasesClient.updateCanvas({
-					id: canvasId,
+					id: targetCanvasId,
 					updateCanvasRequest: { primaryWidgetId: widgetId }
 				});
 			} catch (err) {
 				console.warn('[CreatorApp] Failed to save primary_widget_id:', err);
 			}
 		}
-		const widget = getWidgetById(widgetId);
-		if (embedded && typeof window !== 'undefined') {
+		// Adopt orphans AND cross-canvas strays whose shape lives here (explicit user intent).
+		if (targetCanvasId && widgetsClient && shouldAdoptToThisCanvas) {
 			try {
-				const url = new URL(window.location.href);
-				if (url.searchParams.get('widget_id') !== widgetId) {
-					url.searchParams.set('widget_id', widgetId);
-					window.history.replaceState({}, '', url.pathname + url.search + url.hash);
-				}
+				await widgetsClient.updateWidget({
+					id: widgetId,
+					updateWidgetRequest: { canvasId: targetCanvasId },
+				});
+				widgets = widgets.map((w: any) =>
+					w.id === widgetId ? { ...w, canvasId: targetCanvasId, canvas_id: targetCanvasId } : w,
+				);
+				console.log(
+					'[CreatorApp] Adopted widget canvas_id to host canvas (primary pick)',
+					widgetId.slice(0, 8),
+					'from',
+					widgetCanvasId ? String(widgetCanvasId).slice(0, 8) : 'null',
+					'to',
+					targetCanvasId.slice(0, 8),
+				);
 			} catch (err) {
-				console.warn('[CreatorApp] Failed to sync primary widget_id in URL:', err);
+				console.warn('[CreatorApp] Failed to heal widget canvas_id:', err);
 			}
 		}
+		if (embedded) {
+			syncUrlWidgetId(widgetId);
+		}
 		if (widget) notifyHostWidgetName(widget);
 		emitCanvasWidgetsList('primary-changed');
+		const anyW = widget as { thumbnailUrl?: string | null; thumbnail_url?: string | null } | null;
+		const hasThumb = !!(anyW?.thumbnailUrl || anyW?.thumbnail_url);
+		if (!hasThumb) {
+			setTimeout(() => {
+				void handleRefreshScreenshot(widgetId, { quiet: true });
+			}, 1200);
+		}
+		return true;
 	}
 
 	function emitCanvasWidgetsList(reason: string) {
 		if (!embedded || typeof window === 'undefined') return;
+		const hostCanvasId = resolveHostCanvasId();
 		const ids = canvasRef?.getLinkedWidgetIds?.() ?? linkedWidgetIds ?? new Set<string>();
 		const items: { id: string; name: string }[] = [];
+		const seen = new Set<string>();
+		const pushItem = (id: string, name?: string | null) => {
+			if (!id || seen.has(id) || isDraftConvertId(id)) return;
+			seen.add(id);
+			items.push({ id, name: (name || '').trim() || 'Untitled Widget' });
+		};
+		// Canvas widgets are those whose DB canvas_id matches this canvas (shapes may lag behind).
+		if (hostCanvasId) {
+			for (const widget of widgets) {
+				const id = (widget as { id?: string }).id;
+				if (!id) continue;
+				const widgetCanvas = widgetCanvasIdOf(
+					widget as { canvasId?: string; canvas_id?: string } | null,
+				);
+				if (widgetCanvas !== hostCanvasId) continue;
+				pushItem(id, (widget as { name?: string }).name);
+			}
+		}
+		// Linked shapes that live on THIS canvas. An orphan (null canvas_id) drawn here is
+		// legitimately this canvas's widget — only foreign canvas_id ownership is excluded.
 		for (const id of ids) {
+			if (!id || isDraftConvertId(id)) continue;
 			const widget = getWidgetById(id);
-			items.push({
-				id,
-				name: (widget?.name || '').trim() || 'Untitled Widget'
-			});
-		}
-		if (canvasPrimaryWidgetId && !items.some((item) => item.id === canvasPrimaryWidgetId)) {
-			const primary = getWidgetById(canvasPrimaryWidgetId);
-			if (primary?.id) {
+			if (!widget?.id) continue;
+			const widgetCanvas = widgetCanvasIdOf(
+				widget as { canvasId?: string; canvas_id?: string } | null,
+			);
+			if (!hostCanvasId || (widgetCanvas && widgetCanvas !== hostCanvasId)) continue;
+			pushItem(id, widget.name);
+		}
+		let primaryWidgetId = (canvasPrimaryWidgetId || '').trim();
+		const primaryOnList = primaryWidgetId && items.some((item) => item.id === primaryWidgetId);
+		if (primaryWidgetId && !primaryOnList) {
+			const primary = getWidgetById(primaryWidgetId);
+			const primaryCanvas = widgetCanvasIdOf(
+				primary as { canvasId?: string; canvas_id?: string } | null,
+			);
+			if (hostCanvasId && primaryCanvas && primaryCanvas === hostCanvasId && primary?.id) {
 				items.unshift({
 					id: primary.id,
 					name: (primary.name || '').trim() || 'Untitled Widget'
 				});
+			} else {
+				console.warn(
+					'[CreatorApp] Dropping stale primary from canvas widgets emit',
+					reason,
+					primaryWidgetId.slice(0, 8),
+					'host',
+					hostCanvasId?.slice(0, 8) || 'none',
+				);
+				primaryWidgetId = items[0]?.id || '';
+				canvasPrimaryWidgetId = primaryWidgetId || null;
+				if (primaryWidgetId) syncUrlWidgetId(primaryWidgetId);
 			}
 		}
-		const primaryWidgetId = canvasPrimaryWidgetId || '';
+		if (!primaryWidgetId && items[0]?.id) {
+			primaryWidgetId = items[0].id;
+		}
 		// console.log('[CreatorApp] Emit canvas widgets for header', reason, items.length, primaryWidgetId);
 		window.dispatchEvent(new CustomEvent(CREATOR_CANVAS_WIDGETS_EVENT, {
-			detail: { widgets: items, primaryWidgetId }
+			detail: { widgets: items, primaryWidgetId: primaryWidgetId || '' }
 		}));
 	}
 
@@ -3953,10 +4351,19 @@
 			console.warn('[CreatorApp] Host set primary ignored — missing widgetId');
 			return;
 		}
+		const previousPrimary = canvasPrimaryWidgetId;
+		// Optimistic — so host-request emits during persist cannot resurrect the previous primary.
+		canvasPrimaryWidgetId = widgetId;
+		saveSelectedWidgetId(widgetId);
 		// console.log('[CreatorApp] Host set primary widget', widgetId.substring(0, 8));
 		canvasRef?.setPrimaryWidgetShape?.(widgetId);
 		canvasRef?.selectWidgetShape?.(widgetId);
-		void persistPrimaryWidgetId(widgetId);
+		void persistPrimaryWidgetId(widgetId).then((ok) => {
+			if (ok) return;
+			canvasPrimaryWidgetId = previousPrimary;
+			if (previousPrimary) saveSelectedWidgetId(previousPrimary);
+			emitCanvasWidgetsList('primary-reverted');
+		});
 	}
 
 	function handleSetPrimaryWidget(widgetId: string) {
@@ -3966,7 +4373,33 @@
 	async function hydrateCanvasPrimaryWidget(linkedIds?: string[]): Promise<string | null> {
 		const targetCanvasId = (typeof canvasId === 'string' && canvasId.trim()) ? canvasId.trim() : null;
 		if (!targetCanvasId) return canvasPrimaryWidgetId || null;
+
+		// NOTE: `?widget_id=` is deliberately NOT consulted here. The canvas's DB
+		// `primary_widget_id` is the single source of truth for what opens selected/red on
+		// this canvas. A widget_id coming from a link is treated as a one-time intent in
+		// ensureEmbeddedWidgetDeepLink(), which validates it and promotes it to primary —
+		// so a stale id from a previously opened canvas can never win on load again.
+
 		let primaryId = await resolvePrimaryWidgetIdForCanvas(targetCanvasId);
+		// Reject cross-canvas primary (stale DB rows mix project cards / header) unless the
+		// widget's shape actually lives on this canvas — then the shape wins over stale metadata.
+		if (primaryId) {
+			const primaryWidget = getWidgetById(primaryId);
+			const primaryCanvasId = widgetCanvasIdOf(
+				primaryWidget as { canvasId?: string | null; canvas_id?: string | null } | null,
+			);
+			const primaryShapeHere = !!canvasRef?.getLinkedWidgetIds?.()?.has(primaryId);
+			if (primaryCanvasId && primaryCanvasId !== targetCanvasId && !primaryShapeHere) {
+				console.warn(
+					'[CreatorApp] Ignoring cross-canvas primary_widget_id',
+					primaryId.slice(0, 8),
+					'on canvas',
+					targetCanvasId.slice(0, 8),
+				);
+				primaryId = null;
+				canvasPrimaryWidgetId = null;
+			}
+		}
 		if (!primaryId) {
 			const fromLinks = (linkedIds || []).filter((id) => id && !isDraftConvertId(id) && !String(id).startsWith('draft'));
 			const fromList = widgets
@@ -3975,7 +4408,11 @@
 					return cid === targetCanvasId && w.id && !isDraftConvertId(w.id);
 				})
 				.map((w: any) => w.id);
-			primaryId = fromLinks[0] || fromList[0] || null;
+			primaryId = fromLinks.find((id) => {
+				const w = getWidgetById(id);
+				const cid = (w as any)?.canvasId || (w as any)?.canvas_id;
+				return !cid || cid === targetCanvasId;
+			}) || fromList[0] || null;
 			if (primaryId) {
 				// console.log('[CreatorApp] Healing empty primary_widget_id →', primaryId.substring(0, 8));
 				await persistPrimaryWidgetId(primaryId);
@@ -3989,6 +4426,12 @@
 		return primaryId || canvasPrimaryWidgetId || null;
 	}
 
+	function applyPrimarySelectionOnCanvas(primaryId: string | null | undefined): void {
+		if (!primaryId || !canvasRef || isConvertOrDraftPanelOpen()) return;
+		canvasRef.setPrimaryWidgetShape?.(primaryId);
+		canvasRef.selectWidgetShape?.(primaryId);
+	}
+
 	async function handleHostMoveCanvasFolderEvent(event: Event) {
 		const folderId = (event as CustomEvent).detail?.folderId;
 		if (!folderId || typeof folderId !== 'string' || !widgetsClient) return;
@@ -4441,12 +4884,46 @@
 		}, delayMs);
 	}
 
+	/**
+	 * Read the canvas id from the address bar.
+	 *
+	 * The canvas id lives in the **path** (`/canvas/<canvasId>`), not in a query string.
+	 *
+	 * `loadCurrentCanvas()` is also triggered by a reactive auth effect, which can run BEFORE
+	 * the onMount route subscription populates `routeCanvasId`. In that race, `routeCanvasId`
+	 * was still null, so the loader fell through to `getSavedSelectedCanvasId()` and a canvas
+	 * remembered from a *previous* session silently replaced the canvas in the URL. Reading the
+	 * address bar synchronously here makes the opened canvas authoritative in every entry path.
+	 */
+	function readCanvasIdFromAddressBar(): string | null {
+		if (typeof window === 'undefined') return null;
+		try {
+			const pathParts = window.location.pathname.split('/');
+			const canvasIndex = pathParts.indexOf('canvas');
+			const fromPath = canvasIndex >= 0 ? (pathParts[canvasIndex + 1] || '').trim() : '';
+			if (fromPath) return decodeURIComponent(fromPath);
+			// Legacy query string — kept only so an old bookmark still resolves to its canvas.
+			const params = new URLSearchParams(window.location.search);
+			const fromQuery = params.get('canvas_id') || params.get('canvas-id');
+			return fromQuery && fromQuery.trim() ? fromQuery.trim() : null;
+		} catch {
+			return null;
+		}
+	}
+
 	async function loadCurrentCanvas() {
 		// console.log('Widget Creator: loadCurrentCanvas():', routeCanvasId, isLoadingCanvasOnce);
 		if (isLoadingCanvasOnce) return;
 		try {
 			isLoadingCanvasOnce = true;
 
+			// Resolve the canvas from the address bar before any localStorage fallback — see
+			// readCanvasIdFromAddressBar(). This must happen before initialCandidateCanvasId.
+			if (!routeCanvasId) {
+				const fromAddressBar = readCanvasIdFromAddressBar();
+				if (fromAddressBar) routeCanvasId = fromAddressBar;
+			}
+
 			// set widgets loading state
 			isLoadingWidgets = true;
 			widgetsError = null;
@@ -4479,6 +4956,16 @@
 			// Prefer canvasId from route (path or query)
 			if (routeCanvasId) {
 				canvasListResolved = true;
+				// The route is authoritative — keep the remembered canvas in step with it. Since the
+				// host now passes `canvasId` as a prop, the `!canvasId` guard above can skip the sync
+				// and leave localStorage pointing at the previously opened canvas, which then wins
+				// the next time a bare `/canvas` is opened.
+				if (sessionCanvasId !== routeCanvasId || canvasId !== routeCanvasId) {
+					rememberCanvasId(routeCanvasId);
+				}
+				// New canvas session — clear primary from previous canvas before hydrate.
+				canvasPrimaryWidgetId = null;
+				embeddedDeepLinkAutoOpenDone = false;
 				// console.log('WidgetCreator.loadCurrentCanvas: Loading data for route canvasId:', canvasId);
 			}
 			// Fallback: get latest canvas from current user's canvases
@@ -4582,10 +5069,16 @@
 					const { loaded, widgetIds: widgetIdsOnCanvas } = await parallelCanvasLoadPromise;
 					await maybeAutoRestoreWidgetShapes();
 					backfillWidgetShapeMetadata();
-					const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
-					if (loaded && canvasRef && primaryId && !isConvertOrDraftPanelOpen()) {
-						canvasRef.setPrimaryWidgetShape?.(primaryId);
-						canvasRef.selectWidgetShape(primaryId);
+					const linkedIds =
+						widgetIdsOnCanvas.length > 0
+							? widgetIdsOnCanvas
+							: [...(canvasRef?.getLinkedWidgetIds?.() ?? [])];
+					const primaryId = await hydrateCanvasPrimaryWidget(linkedIds);
+					if (loaded) {
+						applyPrimarySelectionOnCanvas(primaryId);
+						requestAnimationFrame(() => {
+							setTimeout(() => applyPrimarySelectionOnCanvas(primaryId), 80);
+						});
 					}
 					return;
 				}
@@ -4602,10 +5095,16 @@
 			await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 			await maybeAutoRestoreWidgetShapes();
 			backfillWidgetShapeMetadata();
-			const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
-			if (loaded && canvasRef && primaryId && !isConvertOrDraftPanelOpen()) {
-				canvasRef.setPrimaryWidgetShape?.(primaryId);
-				canvasRef.selectWidgetShape(primaryId);
+			const linkedIds =
+				widgetIdsOnCanvas.length > 0
+					? widgetIdsOnCanvas
+					: [...(canvasRef?.getLinkedWidgetIds?.() ?? [])];
+			const primaryId = await hydrateCanvasPrimaryWidget(linkedIds);
+			if (loaded || isCanvasStateLoaded) {
+				applyPrimarySelectionOnCanvas(primaryId);
+				requestAnimationFrame(() => {
+					setTimeout(() => applyPrimarySelectionOnCanvas(primaryId), 80);
+				});
 			}
 		} catch (error) {
 			console.error('Widget Creator: Load canvases error:', error);
@@ -4675,6 +5174,13 @@
 		sessionCanvasId = entry.id;
 		activeCanvasName = entry.name;
 		saveSelectedCanvasId(canvasId);
+		// The deferred cooldown save (if any) holds the previous canvas's shapes.
+		discardPendingCooldownAutosave();
+		// Address bar must track the canvas we actually switched to, and must not keep a
+		// widget_id belonging to the previous canvas.
+		routeCanvasId = entry.id;
+		canvasPrimaryWidgetId = null;
+		syncUrlCanvasId(entry.id);
 
 		// Clear existing widgets and canvas visually
 		widgets = [];
@@ -4692,6 +5198,21 @@
 		}
 	}
 
+	/**
+	 * Clear the cross-tab "generating"/"publishing" flags when the tab closes.
+	 *
+	 * Lives at component scope (not inside `onMount`) so `onDestroy` can pass the
+	 * same reference to `removeEventListener`. When it was declared inside
+	 * `onMount`, leaving the canvas threw `handleBeforeUnload is not defined`,
+	 * which aborted the rest of the cleanup and blocked the navigation.
+	 */
+	function handleBeforeUnload() {
+		for (const wId of Object.keys(generatingWidgetIds)) {
+			setCrossTabGenerating(false, wId);
+		}
+		if (isPublishing) setCrossTabPublishing(false);
+	}
+
 	/** Close canvas dropdown on outside click */
 	function handleCanvasDropdownOutsideClick(e: MouseEvent) {
 		const target = e.target as HTMLElement;
@@ -4796,6 +5317,7 @@
 	function beginBlankCanvasSession(reason: string): void {
 		ignoreIncomingCanvasLoads = true;
 		canvasLoadEpoch += 1;
+		discardPendingCooldownAutosave();
 		lastCommitId = null;
 		lastPublishedVersion = null;
 		selectedWidgetJsPath = null;
@@ -4806,6 +5328,19 @@
 		// console.log('[CreatorApp] Blank canvas session:', reason, 'epoch', canvasLoadEpoch);
 	}
 
+	/**
+	 * Drop a deferred cooldown autosave. Must run whenever the active canvas
+	 * changes: the captured JSON belongs to the previous canvas id, and flushing
+	 * it later would write one canvas's shapes into another.
+	 */
+	function discardPendingCooldownAutosave(): void {
+		if (cooldownAutosaveTimer) {
+			clearTimeout(cooldownAutosaveTimer);
+			cooldownAutosaveTimer = null;
+		}
+		pendingCooldownAutosaveJson = null;
+	}
+
 	function relinkSelectedWidgetShape(): void {
 		placeSelectedWidgetShapeOnCanvas();
 	}
@@ -4878,7 +5413,15 @@
 		}
 
 		try {
-			const newName = `Canvas ${userCanvases.length + 1}`;
+			// Names must be unique per user — duplicate keys ("Canvas 1" x N) made
+			// canvases indistinguishable and contributed to cross-canvas widget mix-ups.
+			const usedNames = new Set(userCanvases.map((c) => (c.name || '').trim()).filter(Boolean));
+			let canvasIndex = userCanvases.length + 1;
+			let newName = `Canvas ${canvasIndex}`;
+			while (usedNames.has(newName)) {
+				canvasIndex += 1;
+				newName = `Canvas ${canvasIndex}`;
+			}
 			const createdRaw = await canvasesClient.createCanvas({
 				createCanvasRequest: { persistenceKey: newName }
 			});
@@ -4887,6 +5430,7 @@
 
 			if (createdId) {
 				canvasLoadEpoch += 1;
+				discardPendingCooldownAutosave();
 				isCanvasStateLoaded = false;
 				userCanvases = [{ id: createdId, name: newName, hasContent: false }, ...userCanvases];
 				showCanvasDropdown = false;
@@ -4991,16 +5535,51 @@
 		deleteCanvasTarget = entry;
 		showDeleteCanvasDialog = true;
 		showCanvasDropdown = false;
+		deleteCanvasError = '';
+		void loadDeleteCanvasPreview(entry.id);
+	}
+
+	/**
+	 * Fetch what the deletion would remove so the dialog can name it.
+	 * Failure is non-fatal: the dialog still explains the action, just without
+	 * the per-project breakdown.
+	 */
+	async function loadDeleteCanvasPreview(canvasId: string): Promise<void> {
+		deleteCanvasPreview = null;
+		deleteCanvasPreviewLoading = true;
+		try {
+			const response = await canvasesClient?.previewDeleteCanvas?.({ id: canvasId });
+			const preview = response?.data;
+
+			if (!preview) {
+				// Older SDK build without the delete-preview method — no breakdown.
+				console.warn('[WidgetCreator] Canvas delete preview unavailable');
+				return;
+			}
+
+			deleteCanvasPreview = {
+				widgetCount: preview.widgetCount ?? 0,
+				groups: (preview.groups ?? []).map((group) => ({
+					projectName: group.projectName || 'Unknown project',
+					widgetNames: group.widgetNames ?? []
+				}))
+			};
+		} catch (err) {
+			console.warn('[WidgetCreator] Could not load canvas delete preview:', err);
+		} finally {
+			deleteCanvasPreviewLoading = false;
+		}
 	}
 
 	async function handleDeleteCanvasConfirm() {
 		if (!deleteCanvasTarget || !canvasesClient) return;
 		const targetId = deleteCanvasTarget.id;
 		const targetName = deleteCanvasTarget.name;
-		showDeleteCanvasDialog = false;
+		deleteCanvasError = '';
 		try {
 			await canvasesClient.deleteCanvas({ id: targetId });
 			// console.log('[WidgetCreator] Canvas deleted:', targetId, targetName);
+			showDeleteCanvasDialog = false;
 			userCanvases = userCanvases.filter(c => c.id !== targetId);
 			if (canvasId === targetId) {
 				const next = userCanvases[0] || null;
@@ -5016,6 +5595,10 @@
 			}
 		} catch (err) {
 			console.error('[WidgetCreator] Failed to delete canvas:', targetId, err);
+			// Keep the dialog open so the user can react; a partial failure leaves
+			// the canvas intact on purpose (the API refuses to orphan widgets).
+			deleteCanvasError = 'Could not delete this canvas. Some of its widgets could not be removed, so nothing was deleted.';
+			return;
 		}
 		deleteCanvasTarget = null;
 	}
@@ -5085,15 +5668,39 @@
 			// console.log('Widgets for canvas:', canvasId, ':', widgets);
 			syncOrphanedWidgetShapes();
 
-			// Auto-select: embedded deep-link > localStorage > latest
+			// Auto-select: embedded deep-link > localStorage > latest.
+			// Both sources must belong to THIS canvas — localStorage is shared across canvases,
+			// so a saved id from a previous canvas would otherwise leak in as primary.
 			if (embedded && forceCreateNewWidget && !initialWidgetId) {
 				// console.log('[WidgetCreator] Skipping auto-select of existing widgets (new widget from site)');
 			} else if (widgets.length > 0) {
-				const deepLinkedWidget = initialWidgetId
-					? getWidgetById(initialWidgetId)
+				const hostCanvasId = resolveHostCanvasId();
+				// A saved widget is only trustworthy when we can PROVE it belongs here: the
+				// canvas must be known and the widget's canvas_id must match (null canvas_id
+				// is only adopted via an explicit primary pick, not via localStorage).
+				const savedWidgetRaw = getSavedSelectedWidgetId()
+					? getWidgetById(getSavedSelectedWidgetId() as string)
 					: null;
-				const savedWidgetId = getSavedSelectedWidgetId();
-				const savedWidget = savedWidgetId ? getWidgetById(savedWidgetId) : null;
+				const savedWidget =
+					savedWidgetRaw &&
+					hostCanvasId &&
+					widgetCanvasIdOf(
+						savedWidgetRaw as { canvasId?: string | null; canvas_id?: string | null },
+					) === hostCanvasId
+						? savedWidgetRaw
+						: null;
+				if (savedWidgetRaw && !savedWidget) {
+					console.warn(
+						'[CreatorApp] Ignoring saved widget from another canvas',
+						savedWidgetRaw.id?.slice(0, 8),
+						'host',
+						hostCanvasId?.slice(0, 8) || 'unknown',
+					);
+					saveSelectedWidgetId(null);
+				}
+				// The explicit deep-link is validated by ensureEmbeddedWidgetDeepLink(); a stale
+				// URL id is never used to auto-select a widget from another canvas.
+				const deepLinkedWidget = initialWidgetId ? getWidgetById(initialWidgetId) : null;
 				const widgetToSelect = deepLinkedWidget ?? savedWidget ?? widgets[0];
 				if (deepLinkedWidget) {
 					// console.log('[WidgetCreator] Selecting widget from embedded deep-link:', deepLinkedWidget.name);
@@ -5360,6 +5967,17 @@
 
 		if (missingIds.length === 0) return;
 
+		// Scope merge to THIS canvas: a shape can linger on several canvases (legacy canvas
+		// duplication), but a widget belongs to exactly one. Merging foreign widgets is what
+		// made another canvas's widgets show up in this canvas's list/picker.
+		const hostCanvasId = resolveHostCanvasId();
+		const belongsHere = (widget: WidgetSummary): boolean => {
+			const widgetCanvas = widgetCanvasIdOf(
+				widget as { canvasId?: string | null; canvas_id?: string | null },
+			);
+			return !widgetCanvas || !hostCanvasId || widgetCanvas === hostCanvasId;
+		};
+
 		try {
 			// console.log(
 				// '[WidgetCreator] Merging',
@@ -5370,8 +5988,21 @@
 				getWidgetsBatchRequest: { widgetIds: missingIds }
 			});
 			const batch = response as { widgets?: WidgetSummary[]; data?: { widgets?: WidgetSummary[] } };
-			const fetched = batch?.widgets ?? batch?.data?.widgets ?? [];
-			if (!Array.isArray(fetched) || fetched.length === 0) return;
+			const fetchedRaw = batch?.widgets ?? batch?.data?.widgets ?? [];
+			if (!Array.isArray(fetchedRaw) || fetchedRaw.length === 0) return;
+			const fetched = fetchedRaw.filter(belongsHere);
+			const foreignCount = fetchedRaw.length - fetched.length;
+			if (foreignCount > 0) {
+				console.warn(
+					'[CreatorApp] Ignoring',
+					foreignCount,
+					'widget(s) linked by shape but owned by another canvas',
+				);
+				// Keep the stale shape but stop treating it as a widget of this canvas.
+				syncOrphanedWidgetShapes();
+				emitCanvasWidgetsList('foreign-shapes');
+			}
+			if (fetched.length === 0) return;
 
 			const previousById = new Map(
 				widgets.filter((w) => w.id).map((w) => [w.id as string, w]),
@@ -5393,9 +6024,26 @@
 				widgets.length > 0 &&
 				!(embedded && forceCreateNewWidget && !initialWidgetId)
 			) {
+				const hostCanvasId = resolveHostCanvasId();
+				const primaryOnCanvas =
+					(canvasPrimaryWidgetId && getWidgetById(canvasPrimaryWidgetId)) ||
+					widgets.find((w: any) => {
+						const cid = w.canvasId || w.canvas_id;
+						return hostCanvasId && cid === hostCanvasId && w.id === canvasPrimaryWidgetId;
+					}) ||
+					null;
 				const savedWidgetId = getSavedSelectedWidgetId();
 				const savedWidget = savedWidgetId ? getWidgetById(savedWidgetId) : null;
-				applyInitialWidgetSelectionFromList(savedWidget || widgets[0]);
+				const savedOnThisCanvas =
+					savedWidget &&
+					(!hostCanvasId ||
+						widgetCanvasIdOf(savedWidget as { canvasId?: string; canvas_id?: string }) ===
+							hostCanvasId)
+						? savedWidget
+						: null;
+				applyInitialWidgetSelectionFromList(
+					primaryOnCanvas || savedOnThisCanvas || widgets[0],
+				);
 			}
 		} catch (err) {
 			console.warn('[WidgetCreator] Failed to merge widgets linked on canvas:', err);
@@ -5404,8 +6052,8 @@
 
 	/**
 	 * Site embeds CreatorApp once; `initialWidgetId` props stay frozen in prod.
-	 * Always prefer the live `?widget_id=` from the address bar so deep-link
-	 * reopen / selection match the header (avoids Audio Player header + Image Slider panel).
+	 * Prefer live `?widget_id=` only when it belongs to the host canvas — otherwise
+	 * a stale widget_id from the previous canvas overwrites the header/primary.
 	 */
 	function resolveEmbeddedDeepLinkWidgetId(): string | null {
 		if (typeof window !== 'undefined') {
@@ -5419,6 +6067,84 @@
 		return initialWidgetId ?? null;
 	}
 
+	function resolveHostCanvasId(): string | null {
+		// Priority: the canvas id in the address bar is authoritative (it is what the user
+		// opened and what a refresh resumes). It lives in the route path (`/canvas/<id>`).
+		// `canvasId`/`sessionCanvasId` can still hold a stale value hydrated from
+		// localStorage on a previous canvas, which is what allowed another canvas's widgets
+		// to leak into this canvas's list/picker.
+		const fromUrl = readCanvasIdFromAddressBar();
+		return (
+			fromUrl ||
+			(typeof canvasId === 'string' && canvasId.trim() ? canvasId.trim() : null) ||
+			(typeof sessionCanvasId === 'string' && sessionCanvasId.trim() ? sessionCanvasId.trim() : null) ||
+			(typeof routeCanvasId === 'string' && routeCanvasId.trim() ? routeCanvasId.trim() : null)
+		);
+	}
+
+	function widgetCanvasIdOf(widget: {
+		canvasId?: string | null;
+		canvas_id?: string | null;
+	} | null | undefined): string | null {
+		if (!widget) return null;
+		const cid = widget.canvasId ?? widget.canvas_id ?? null;
+		return typeof cid === 'string' && cid.trim() ? cid.trim() : null;
+	}
+
+	async function fetchWidgetCanvasId(widgetId: string): Promise<string | null> {
+		const local = getWidgetById(widgetId);
+		const localCanvas = widgetCanvasIdOf(local as { canvasId?: string; canvas_id?: string } | null);
+		if (localCanvas) return localCanvas;
+		if (!widgetsClient) return null;
+		try {
+			const batch = await widgetsClient.getWidgetsBatch({
+				getWidgetsBatchRequest: { widgetIds: [widgetId] },
+			});
+			const row =
+				(batch as { widgets?: Array<{ canvasId?: string; canvas_id?: string }> })?.widgets?.[0] ??
+				(batch as { data?: { widgets?: Array<{ canvasId?: string; canvas_id?: string }> } })?.data
+					?.widgets?.[0];
+			return widgetCanvasIdOf(row);
+		} catch (err) {
+			console.warn('[CreatorApp] Failed to fetch widget canvas for deep-link', widgetId.slice(0, 8), err);
+			return null;
+		}
+	}
+
+	/**
+	 * `canvas_id` + the canvas's DB `primary_widget_id` are the source of truth for
+	 * "which widget is open on this canvas". A `widget_id` in the address bar is only a
+	 * transient intent read once at mount.
+	 *
+	 * IMPORTANT: this deliberately does NOT touch `widget_id` any more. Rewriting the URL
+	 * here used to (a) persist a stale id from a previously opened canvas as if it were the
+	 * current primary, and (b) trigger a host remount because the site keys CreatorApp's
+	 * mount on the URL params. Leaving the address bar untouched is what makes the primary
+	 * stable; the canvas's DB `primary_widget_id` decides what opens.
+	 */
+	function syncUrlWidgetId(_widgetId: string | null): void {
+		if (typeof window === 'undefined' || !embedded) return;
+		syncEmbeddedDeepLinkDismissTracking();
+	}
+
+	/** Ensure the address bar points at the canvas we actually loaded (refresh-safe). */
+	function syncUrlCanvasId(canvasIdToSync: string | null): void {
+		if (typeof window === 'undefined' || !embedded) return;
+		if (!canvasIdToSync || !canvasIdToSync.trim()) return;
+		try {
+			const url = new URL(window.location.href);
+			const nextPath = `/canvas/${encodeURIComponent(canvasIdToSync)}`;
+			if (url.pathname === nextPath && !url.searchParams.has('canvas_id')) return;
+			url.pathname = nextPath;
+			// The canvas id belongs in the path only — never duplicated into the query string.
+			url.searchParams.delete('canvas_id');
+			url.searchParams.delete('canvas-id');
+			window.history.replaceState({}, '', url.pathname + url.search + url.hash);
+		} catch (err) {
+			console.warn('[CreatorApp] Failed to sync canvas_id in URL:', err);
+		}
+	}
+
 	/**
 	 * Canvas-only embed deep-link (My widgets / canvas without widget_id):
 	 * read canvases.primary_widget_id so Creator can open that widget panel.
@@ -5435,20 +6161,44 @@
 				(record as { primary_widget_id?: unknown })?.primary_widget_id ??
 				null;
 			const primaryId = typeof raw === 'string' && raw.trim() ? raw.trim() : null;
-			if (primaryId) {
-				canvasPrimaryWidgetId = primaryId;
-				// console.log(
-					// '[CreatorApp] Resolved primary widget for canvas',
-					// targetCanvasId.substring(0, 8),
-					// '→',
-					// primaryId.substring(0, 8)
-				// );
-			} else {
-				// console.log(
-					// '[CreatorApp] No primary_widget_id on canvas',
-					// targetCanvasId.substring(0, 8)
-				// );
+			if (!primaryId) {
+				return null;
 			}
+			// Validate primary belongs to this canvas (DB has many cross-canvas orphans).
+			let widgetCanvasId: string | null = null;
+			const local = getWidgetById(primaryId);
+			if (local) {
+				widgetCanvasId =
+					(local as { canvasId?: string | null; canvas_id?: string | null }).canvasId ??
+					(local as { canvasId?: string | null; canvas_id?: string | null }).canvas_id ??
+					null;
+			} else if (widgetsClient) {
+				try {
+					const batch = await widgetsClient.getWidgetsBatch({
+						getWidgetsBatchRequest: { widgetIds: [primaryId] },
+					});
+					const row =
+						(batch as { widgets?: Array<{ canvasId?: string; canvas_id?: string }> })?.widgets?.[0] ??
+						(batch as { data?: { widgets?: Array<{ canvasId?: string; canvas_id?: string }> } })?.data
+							?.widgets?.[0];
+					widgetCanvasId = row?.canvasId ?? row?.canvas_id ?? null;
+				} catch (batchErr) {
+					console.warn('[CreatorApp] Failed to validate primary widget canvas', batchErr);
+				}
+			}
+			if (widgetCanvasId && widgetCanvasId !== targetCanvasId) {
+				console.warn(
+					'[CreatorApp] Canvas primary_widget_id points at another canvas — treating as empty',
+					primaryId.slice(0, 8),
+					'target',
+					targetCanvasId.slice(0, 8),
+					'widgetCanvas',
+					widgetCanvasId.slice(0, 8),
+				);
+				canvasPrimaryWidgetId = null;
+				return null;
+			}
+			canvasPrimaryWidgetId = primaryId;
 			return primaryId;
 		} catch (err) {
 			console.warn(
@@ -5465,11 +6215,6 @@
 		syncEmbeddedDeepLinkDismissTracking();
 		if (!embedded || !widgetsClient || !hasValidToken) return;
 		if (embeddedDeepLinkPanelDismissed) {
-			const dismissedId = resolveEmbeddedDeepLinkWidgetId();
-			// console.log(
-				// '[CreatorApp] Skip embedded deep-link select — user dismissed panel:',
-				// dismissedId ? dismissedId.substring(0, 8) : '(none)'
-			// );
 			return;
 		}
 		// Select primary widget once per Creator mount. Do not auto-open Widget Details.
@@ -5477,70 +6222,79 @@
 			return;
 		}
 		if (isConvertOrDraftPanelOpen()) {
-			// console.log('[CreatorApp] Skip embedded deep-link select — convert/draft panel is open');
 			embeddedDeepLinkAutoOpenDone = true;
 			return;
 		}
 
+		const hostCanvasId = resolveHostCanvasId();
 		let deepLinkWidgetId = resolveEmbeddedDeepLinkWidgetId();
-		// Canvas-only deep-link: no ?widget_id= / initialWidgetId — select canvases.primary_widget_id.
-		if (!deepLinkWidgetId && canvasesClient) {
-			const targetCanvasId =
-				(typeof canvasId === 'string' && canvasId.trim() ? canvasId.trim() : null) ||
-				(typeof sessionCanvasId === 'string' && sessionCanvasId.trim() ? sessionCanvasId.trim() : null) ||
-				(typeof routeCanvasId === 'string' && routeCanvasId.trim() ? routeCanvasId.trim() : null);
-			if (targetCanvasId) {
-				deepLinkWidgetId = await resolvePrimaryWidgetIdForCanvas(targetCanvasId);
-				if (embeddedDeepLinkPanelDismissed || embeddedDeepLinkAutoOpenDone) {
-					return;
-				}
-				// Align address-bar widget_id so header / dismiss tracking match the opened panel.
-				if (deepLinkWidgetId && typeof window !== 'undefined') {
-					try {
-						const url = new URL(window.location.href);
-						if (url.searchParams.get('widget_id') !== deepLinkWidgetId) {
-							url.searchParams.set('widget_id', deepLinkWidgetId);
-							window.history.replaceState({}, '', url.pathname + url.search + url.hash);
-							syncEmbeddedDeepLinkDismissTracking();
-						}
-					} catch (err) {
-						console.warn('[CreatorApp] Failed to sync primary widget_id in URL:', err);
-					}
-				}
+
+		// Stale ?widget_id= from a previous canvas must NOT win over this canvas's primary.
+		if (deepLinkWidgetId && hostCanvasId) {
+			const widgetCanvasId = await fetchWidgetCanvasId(deepLinkWidgetId);
+			if (widgetCanvasId && widgetCanvasId !== hostCanvasId) {
+				console.warn(
+					'[CreatorApp] Ignoring stale URL widget_id from another canvas',
+					deepLinkWidgetId.slice(0, 8),
+					'widgetCanvas',
+					widgetCanvasId.slice(0, 8),
+					'host',
+					hostCanvasId.slice(0, 8),
+				);
+				deepLinkWidgetId = null;
+				syncUrlWidgetId(null);
+				saveSelectedWidgetId(null);
 			}
 		}
-		if (!deepLinkWidgetId) return;
+
+		if (!deepLinkWidgetId && hostCanvasId && canvasesClient) {
+			deepLinkWidgetId = await resolvePrimaryWidgetIdForCanvas(hostCanvasId);
+			if (embeddedDeepLinkPanelDismissed || embeddedDeepLinkAutoOpenDone) {
+				return;
+			}
+		}
+
+		if (!deepLinkWidgetId) {
+			embeddedDeepLinkAutoOpenDone = true;
+			return;
+		}
+
+		// Keep URL + localStorage aligned to THIS canvas's primary only.
+		canvasPrimaryWidgetId = deepLinkWidgetId;
+		saveSelectedWidgetId(deepLinkWidgetId);
+		syncUrlWidgetId(deepLinkWidgetId);
 
 		const requestGen = ++embeddedDeepLinkRequestGen;
+		const expectedWidgetId = deepLinkWidgetId;
 
 		function deepLinkOpenStillValid(): boolean {
 			return (
 				requestGen === embeddedDeepLinkRequestGen &&
 				!embeddedDeepLinkPanelDismissed &&
-				resolveEmbeddedDeepLinkWidgetId() === deepLinkWidgetId
+				canvasPrimaryWidgetId === expectedWidgetId
 			);
 		}
 
 		const alreadyLinked =
-			selectedWidgetId === deepLinkWidgetId && !!getWidgetById(deepLinkWidgetId);
+			selectedWidgetId === expectedWidgetId && !!getWidgetById(expectedWidgetId);
 		if (alreadyLinked) {
 			if (embeddedInitialStepPending && initialStep) {
 				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			}
 			embeddedDeepLinkAutoOpenDone = true;
-			if (canvasRef && deepLinkWidgetId) {
-				canvasRef.selectWidgetShape(deepLinkWidgetId);
-			}
+			applyPrimarySelectionOnCanvas(expectedWidgetId);
+			const primaryWidget = getWidgetById(expectedWidgetId);
+			if (primaryWidget) notifyHostWidgetName(primaryWidget);
+			emitCanvasWidgetsList('deeplink-already-linked');
 			return;
 		}
 
 		try {
 			const response = await widgetsClient.getWidgetsBatch({
-				getWidgetsBatchRequest: { widgetIds: [deepLinkWidgetId] }
+				getWidgetsBatchRequest: { widgetIds: [expectedWidgetId] }
 			});
 			if (!deepLinkOpenStillValid()) {
-				// console.log('[CreatorApp] Stale embedded deep-link fetch — user changed selection or closed panel');
 				return;
 			}
 
@@ -5550,47 +6304,52 @@
 			};
 			const target = batch?.widgets?.[0] ?? batch?.data?.widgets?.[0];
 			if (!target?.id) {
-				console.warn('[CreatorApp] Embedded deep-link widget not found:', deepLinkWidgetId);
+				console.warn('[CreatorApp] Embedded deep-link widget not found:', expectedWidgetId);
 				embeddedDeepLinkAutoOpenDone = true;
 				return;
 			}
 
-			const targetCanvasId =
-				(target as { canvasId?: string | null; canvas_id?: string | null }).canvasId ??
-				(target as { canvasId?: string | null; canvas_id?: string | null }).canvas_id ??
-				null;
+			const targetCanvasId = widgetCanvasIdOf(
+				target as { canvasId?: string | null; canvas_id?: string | null },
+			);
+			if (hostCanvasId && targetCanvasId && targetCanvasId !== hostCanvasId) {
+				console.warn(
+					'[CreatorApp] Deep-link widget does not belong to host canvas — abort select',
+					target.id.slice(0, 8),
+					'target',
+					targetCanvasId.slice(0, 8),
+					'host',
+					hostCanvasId.slice(0, 8),
+				);
+				embeddedDeepLinkAutoOpenDone = true;
+				const healed = await hydrateCanvasPrimaryWidget(
+					[...(canvasRef?.getLinkedWidgetIds?.() ?? [])],
+				);
+				applyPrimarySelectionOnCanvas(healed);
+				return;
+			}
 
 			if (!getWidgetById(target.id)) {
 				widgets = sortWidgetSummaries([...widgets, target]);
 			}
 			if (!deepLinkOpenStillValid()) {
-				// console.log('[CreatorApp] Skip embedded deep-link open — stale after widget fetch');
 				return;
 			}
 
 			embeddedDeepLinkAutoOpenDone = true;
-			// Select the primary widget (and its canvas shape) — do not open Widget Details.
+			canvasPrimaryWidgetId = target.id;
 			await selectWidget(target, { skipLoadWidget: true, skipPlaceShape: true });
 			if (!deepLinkOpenStillValid()) return;
-			if (canvasRef) {
-				canvasRef.selectWidgetShape(target.id);
-			}
+			applyPrimarySelectionOnCanvas(target.id);
+			requestAnimationFrame(() => {
+				setTimeout(() => applyPrimarySelectionOnCanvas(target.id), 80);
+			});
+			notifyHostWidgetName(target);
+			emitCanvasWidgetsList('deeplink-primary');
 			if (embeddedInitialStepPending && initialStep) {
 				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			}
-
-			if (targetCanvasId && targetCanvasId !== canvasId) {
-				// console.log('[CreatorApp] Switching canvas for embedded deep-link:', targetCanvasId);
-				routeCanvasId = targetCanvasId;
-				canvasId = targetCanvasId;
-				saveSelectedCanvasId(canvasId);
-				isLoadingCanvasOnce = false;
-				isLoadingWidgetsOnce = false;
-				lastWidgetsCanvasId = null;
-				void loadCurrentCanvas();
-				return;
-			}
 		} catch (err) {
 			console.error('[CreatorApp] ensureEmbeddedWidgetDeepLink failed:', err);
 			embeddedDeepLinkAutoOpenDone = true;
@@ -5993,7 +6752,11 @@
 				...(lastCommitId ? { hasGeneratedCode: true } : {}),
 			});
 			if (lastCommitId) hasGeneratedCode = true;
-			if (lastPublishedVersion !== null) {
+			// Fetch history whenever the widget has code (generated or published).
+			// Gating on `lastPublishedVersion` alone meant a widget that had only
+			// ever been generated never loaded its history — so its version picker
+			// stayed empty even though generations were recorded server-side.
+			if (lastPublishedVersion !== null || lastCommitId || currentRepositoryId) {
 				// Load history against the specific widget id (not selectedWidgetId) so the
 				// panel snapshot is guaranteed to be marked publishHistoryResolved even if the
 				// user switches widget between hydrate and API response.
@@ -6143,6 +6906,11 @@
 			}
 
 			notifyHostWidgetName({ id: widgetId, name: newName });
+			emitCanvasWidgetsList('widget-renamed');
+			widgetNamesRevision += 1;
+			panelDisplayRevision += 1;
+			backfillWidgetShapeMetadata();
+			syncWidgetShapeLivePreviews();
 			// console.log('[WidgetRename] Successfully renamed widget:', widgetId, 'to:', newName);
 			showToast('success', `Widget renamed to "${newName}"`);
 		} catch (error) {
@@ -6337,26 +7105,37 @@
 	 * Aborts the polling and resets UI state
 	 */
 	function stopGeneration() {
-		// Abort the generation for the currently selected widget
-		if (selectedWidgetId) {
-			const controller = widgetAbortControllers.get(selectedWidgetId);
+		// Prefer the focused panel widget (Stop lives in that panel's Chat), then selected, then all in-flight.
+		const stopTargetIds = Array.from(
+			new Set(
+				[focusedPanelWidgetId, selectedWidgetId, ...Object.keys(generatingWidgetIds)].filter(
+					(id): id is string => typeof id === 'string' && id.length > 0,
+				),
+			),
+		);
+
+		for (const widgetId of stopTargetIds) {
+			const controller = widgetAbortControllers.get(widgetId);
 			if (controller) {
 				controller.abort();
-				widgetAbortControllers.delete(selectedWidgetId);
+				widgetAbortControllers.delete(widgetId);
 			}
-			const { [selectedWidgetId]: _, ...restStop } = generatingWidgetIds;
-			generatingWidgetIds = restStop;
+			clearActiveOperationId(widgetId);
 		}
+
+		generatingWidgetIds = {};
 		// Legacy fallback
 		if (codeGenerationAbortController) {
 			codeGenerationAbortController.abort();
 			codeGenerationAbortController = null;
 		}
-		
+
+		currentGenerationOperationId = null;
 		isGeneratingCode = false;
 		setCrossTabGenerating(false);
 		generateCodeStatus = '⏹ Generation stopped by user';
-		getChatMethodsForWidget(selectedWidgetId)?.updateLatestCodegenStatusMessage?.(
+		const statusWidgetId = focusedPanelWidgetId || selectedWidgetId || stopTargetIds[0] || null;
+		getChatMethodsForWidget(statusWidgetId)?.updateLatestCodegenStatusMessage?.(
 			'Generation stopped by user. You can Retry this prompt.',
 		);
 		showToast('info', 'Generation stopped', {
@@ -6863,12 +7642,44 @@
 			// Convert drafts capture from the canvas shape, never by opening a panel.
 			if (!openWidgetPanelIds.includes(widgetId)) {
 				if (quiet || isConvertOrDraftPanelOpen()) {
-					const shapeDataUrl = canvasRef?.getWidgetShapeDataUrl?.(widgetId);
-					if (shapeDataUrl && canvasRef) {
-						canvasRef.updateWidgetImage(widgetId, shapeDataUrl);
-						void persistWidgetListThumbnail(widgetId, shapeDataUrl);
-					} else {
-						// console.log('[handleRefreshScreenshot] Skip quiet capture — panel closed:', widgetId.substring(0, 8));
+					// A draft convert has no widget row and no live iframe yet — the
+					// Fabric sketch is genuinely all there is to show.
+					if (isDraftConvertId(widgetId)) {
+						const draftShapeDataUrl = canvasRef?.getWidgetShapeDataUrl?.(widgetId);
+						if (draftShapeDataUrl && canvasRef) {
+							canvasRef.updateWidgetImage(widgetId, draftShapeDataUrl);
+						}
+						return;
+					}
+
+					// Real widget with the details panel closed: the live shape iframe
+					// is still on the canvas. Capture from it so both the canvas image
+					// and the project-list thumbnail track the latest preview.
+					//
+					// Without this the Fabric `_imageElement` set at convert time wins
+					// forever — it is the sketch screenshot frozen at creation, so the
+					// Projects list kept showing the initial design after later
+					// generations and preview refreshes.
+					if (!shapeThumbnailCaptureInFlight.has(widgetId)) {
+						shapeThumbnailCaptureInFlight.add(widgetId);
+						try {
+							const freshCapture = await handleChatScreenshot(widgetId);
+							if (freshCapture) {
+								canvasRef?.updateWidgetImage(widgetId, freshCapture);
+								const freshJson = canvasRef?.saveCanvas?.();
+								if (freshJson) void handleCanvasAutoSave(freshJson);
+								void persistWidgetListThumbnail(widgetId, freshCapture);
+							} else {
+								// No live iframe/Worker preview reachable — leave the
+								// existing image alone rather than persisting a wireframe.
+								console.warn(
+									'[handleRefreshScreenshot] Quiet capture produced no image — keeping existing shape preview',
+									widgetId.substring(0, 8),
+								);
+							}
+						} finally {
+							shapeThumbnailCaptureInFlight.delete(widgetId);
+						}
 					}
 					return;
 				}
@@ -7522,6 +8333,18 @@ Requirements:
 						// );
 					}
 
+					// Refresh version history after every generation so the new commit shows
+					// up in the version menu immediately. Publishing is deliberately not
+					// automatic — the user previews and presses Publish themselves.
+					if (generationWidgetId) {
+						const { [generationWidgetId]: _resolved, ...restResolved } = shapeHistoryResolvedByWidgetId;
+						shapeHistoryResolvedByWidgetId = restResolved;
+						void loadPublishHistoryForPanel(generationWidgetId, { silent: true }).then(() => {
+							syncWidgetShapeLivePreviews();
+							if (isFocusedPanel) panelDisplayRevision += 1;
+						});
+					}
+
 					// Always reconcile GitLab HEAD after codegen (metadata.commitId can be missing/stale).
 					if (generationWidgetId) {
 						void (async () => {
@@ -7659,37 +8482,49 @@ Requirements:
 							// cache-busts the same URL and looks like an extra reload.
 							// console.log('[CreatorApp] Skipping extra preview remount — Worker iframe already showing');
 							activePanelRef?.setPreviewLoadingState(false);
+							// previewReady may not re-fire when we skip remount — clear stuck status.
+							patchCodegenUiState(generationWidgetId, {
+								generateCodeStatus: `Code generation completed!${commitShort ? ` Commit: ${commitShort}` : ''} Preview ready.`,
+							});
 						} else {
 							activePanelRef?.setPreviewLoadingState(true);
 							await activePanelRef?.refreshPreview?.({ withRetry: true, skipIfAlreadyShowing: true });
 						}
 						activePanelRef?.setPreviewBuildError(null);
+						// Show Worker preview on the canvas shape (not the previous Live CDN artifact).
+						shapePreviewSourceByWidgetId = {
+							...shapePreviewSourceByWidgetId,
+							[generationWidgetId]: 'preview',
+						};
+						syncWidgetShapeLivePreviews();
+						panelDisplayRevision += 1;
 						if (!completedPreviewBuildErr) {
 							await applyDesignSchemaDefaultsToPreview(generationWidgetId);
 							pendingCreatePreviewDefaultsWidgetId = null;
 							panelChat?.updateLatestCodegenStatusMessage?.(
 								`Code generation completed!${commitShort ? ` Commit: ${commitShort}` : ''}\nPreview ready.`,
 							);
+							patchCodegenUiState(generationWidgetId, {
+								generateCodeStatus: `Code generation completed!${commitShort ? ` Commit: ${commitShort}` : ''} Preview ready.`,
+							});
 							setTimeout(async () => {
 								await panelChat?.reloadConversationMessages?.();
 								panelChat?.markWidgetHeadAtLatestCommit?.();
 							}, 2500);
-							setTimeout(() => handleRefreshScreenshot(generationWidgetId, { quiet: true }), 3000);
-							void (async () => {
-								try {
-									console.log('[Publish] Auto-publishing after codegen', generationWidgetId.substring(0, 8));
-									await executePublishWidget(generationWidgetId, { silent: true, fromCodegen: true });
-									panelChat?.updateLatestCodegenStatusMessage?.(
-										`Code generation completed!${commitShort ? ` Commit: ${commitShort}` : ''}\nPreview ready. Live published.`,
-									);
-								} catch (autoPublishErr) {
-									console.warn('[Publish] Auto-publish after codegen failed:', autoPublishErr);
-								}
-							})();
+							setTimeout(() => {
+								void (async () => {
+									await handleRefreshScreenshot(generationWidgetId, { quiet: true });
+									// List thumb only from live iframe capture — never Fabric shape icon.
+								})();
+							}, 3000);
+							// Do NOT auto-publish — user previews first, then clicks Publish / Set live.
 						} else {
 							panelChat?.updateLatestCodegenStatusMessage?.(
 								`Code saved${commitShort ? ` (${commitShort})` : ''} — preview rebuilt from saved code.`,
 							);
+							patchCodegenUiState(generationWidgetId, {
+								generateCodeStatus: `Code saved${commitShort ? ` (${commitShort})` : ''} — preview rebuilt from saved code.`,
+							});
 						}
 					}, completedPreviewBuildErr ? 400 : 800);
 				} else {
@@ -7905,11 +8740,26 @@ Requirements:
 	 */
 	async function executePublishWidget(
 		publishForWidgetId?: string | null,
-		publishOpts: { silent?: boolean; fromCodegen?: boolean } = {},
+		publishOpts: { silent?: boolean; fromCodegen?: boolean; targetVersion?: number | null } = {},
 	) {
 		const capturedWidgetId = publishForWidgetId ?? focusedPanelWidgetId ?? selectedWidgetId;
 		const panelState = capturedWidgetId ? getPanelDisplayState(capturedWidgetId) : null;
 		const capturedCanvasId = getEffectiveCanvasId();
+		// An explicit version publishes *that* version — it is a Draft the user
+		// picked in the version list. Without one, the newest Draft / current
+		// commit is promoted, which is the "publish latest" flow.
+		// `Number(null)` is 0 (finite), so reject null/undefined/'' explicitly
+		// rather than letting them silently become version 0.
+		const rawTargetVersion = publishOpts.targetVersion;
+		const targetVersion =
+			rawTargetVersion == null || rawTargetVersion === ''
+				? null
+				: Number.isFinite(Number(rawTargetVersion))
+					? Number(rawTargetVersion)
+					: null;
+		// Recheck after async focus (and for direct callers), never substitute HEAD
+		// when a requested Draft is missing or no longer publishable.
+		if (rawTargetVersion != null && getPublishGateForPanel(capturedWidgetId, rawTargetVersion).disabled) return;
 		let capturedRepositoryId = resolveRepositoryIdForWidget(capturedWidgetId);
 		if (!capturedRepositoryId && capturedWidgetId) {
 			const widget = getWidgetById(capturedWidgetId) ?? selectedWidget;
@@ -7918,10 +8768,16 @@ Requirements:
 				if (capturedRepositoryId) stampWidgetRepositoryId(capturedWidgetId, capturedRepositoryId);
 			}
 		}
-		const commitShaForPublish =
-			panelState?.lastCommitId
-			|| (capturedWidgetId ? loadCommitIdForWidget(capturedWidgetId) : null)
-			|| lastCommitId;
+		// A targeted publish builds from that version's own commit, so the server
+		// must receive the version — sending HEAD's SHA would publish the wrong code.
+		const targetRecord = targetVersion !== null
+			? getShapePublishHistory(capturedWidgetId).find((row) => Number(row.version) === targetVersion)
+			: undefined;
+		const commitShaForPublish = targetVersion !== null
+			? (targetRecord?.commitSha ?? targetRecord?.commit_sha ?? null)
+			: (panelState?.lastCommitId
+				|| (capturedWidgetId ? loadCommitIdForWidget(capturedWidgetId) : null)
+				|| lastCommitId);
 
 		if (!capturedWidgetId || !capturedCanvasId || !capturedRepositoryId) {
 			showToast('error', 'Cannot publish', { description: 'Widget, canvas, and repository are required.' });
@@ -7990,7 +8846,10 @@ Requirements:
 				widgetId: capturedWidgetId,
 				agentWidgetBuilderPublishWidgetIdPostRequest: {
 					componentId,
-					commitSha: commitShaForPublish || undefined
+					commitSha: commitShaForPublish || undefined,
+					// Publishing a Draft the user chose: the server rebuilds from that
+					// version's commit and stamps it Live instead of minting a new one.
+					version: targetVersion ?? undefined
 				}
 			});
 			// console.log('[Publish] Widget Builder publish completed:', publishData);
@@ -8099,6 +8958,7 @@ Requirements:
 			selectedWidgetId = null;
 			ignoreIncomingCanvasLoads = true;
 			canvasLoadEpoch += 1;
+			discardPendingCooldownAutosave();
 			lastCommitId = null;
 			lastPublishedVersion = null;
 			widgetDetailsStep = 'create';
@@ -8132,22 +8992,21 @@ Requirements:
 		window.addEventListener('storage', handleCrossTabStorageEvent);
 		window.addEventListener('widgetic:session-extended', handleSiteSessionExtended);
 
-		// Clean up cross-tab flags when tab is closed/refreshed
-		const handleBeforeUnload = () => {
-			for (const wId of Object.keys(generatingWidgetIds)) {
-				setCrossTabGenerating(false, wId);
-			}
-			if (isPublishing) setCrossTabPublishing(false);
-		};
+		// Clean up cross-tab flags when tab is closed/refreshed. The handler lives at
+		// component scope so `onDestroy` can remove the same reference.
 		window.addEventListener('beforeunload', handleBeforeUnload);
 
-		// Read canvas id from route (supports /?canvasId=uuid). Skip in embedded when prop provided.
-		if (!canvasId) {
+		// Read canvas id from the route. The route path (`/canvas/<canvasId>`) is the
+		// AUTHORITATIVE canvas (site links, refresh, deep-links); localStorage is only a
+		// fallback and must never win over it.
+		if (!routeCanvasId) {
 			try {
 				const sub = pageStore.subscribe(($page) => {
-					const qId =
-						($page?.url?.searchParams?.get && $page.url.searchParams.get('canvas-id')) || null;
-					routeCanvasId = qId;
+					// `readCanvasIdFromAddressBar()` also covers the legacy query string, so an
+					// old bookmark `/canvas?canvas_id=…` still resolves to its canvas.
+					const nextCanvasId = readCanvasIdFromAddressBar();
+					// Never clobber an already-known canvas with null.
+					if (nextCanvasId) routeCanvasId = nextCanvasId;
 				});
 				setTimeout(() => {
 					if (sub && typeof sub === 'function') sub();
@@ -8439,6 +9298,10 @@ Requirements:
 	function formatCodegenProgressStatus(op: OperationStatus): string {
 		const stage = getOperationStageMessage(op.metadata as Record<string, unknown> | undefined);
 		const pct = typeof op.progress === 'number' ? op.progress : null;
+		// User mode: never expose model names / provider in the status line.
+		if (!debugMode) {
+			return pct != null && pct > 0 ? `Generating code... (${pct}%)` : 'Generating code...';
+		}
 		if (stage) {
 			return pct != null && pct > 0 ? `${stage} (${pct}%)` : stage;
 		}
@@ -8468,13 +9331,22 @@ Requirements:
 		>,
 	): void {
 		ensurePanelState(widgetId);
-		patchPanelSnapshot(widgetId, patch);
+		const nextPatch = { ...patch };
+		if (typeof nextPatch.generateCodeStatus === 'string' && !debugMode) {
+			nextPatch.generateCodeStatus = nextPatch.generateCodeStatus
+				.replace(/\s*Commit:\s*[a-f0-9]{7,40}/gi, '')
+				.replace(/\s*\(\s*Commit:\s*[a-f0-9]{7,40}\s*\)/gi, '')
+				.replace(/\s*\(\s*[a-f0-9]{7,40}\s*\)/g, '')
+				.replace(/\s{2,}/g, ' ')
+				.trim();
+		}
+		patchPanelSnapshot(widgetId, nextPatch);
 		if (widgetId === focusedPanelWidgetId) {
-			if (patch.generateCodeStatus !== undefined) generateCodeStatus = patch.generateCodeStatus;
-			if (patch.lastGenerationFailed !== undefined) lastGenerationFailed = patch.lastGenerationFailed;
-			if (patch.lastGenerationError !== undefined) lastGenerationError = patch.lastGenerationError;
-			if (patch.lastCommitId !== undefined) lastCommitId = patch.lastCommitId;
-			if (patch.hasGeneratedCode !== undefined) hasGeneratedCode = patch.hasGeneratedCode;
+			if (nextPatch.generateCodeStatus !== undefined) generateCodeStatus = nextPatch.generateCodeStatus;
+			if (nextPatch.lastGenerationFailed !== undefined) lastGenerationFailed = nextPatch.lastGenerationFailed;
+			if (nextPatch.lastGenerationError !== undefined) lastGenerationError = nextPatch.lastGenerationError;
+			if (nextPatch.lastCommitId !== undefined) lastCommitId = nextPatch.lastCommitId;
+			if (nextPatch.hasGeneratedCode !== undefined) hasGeneratedCode = nextPatch.hasGeneratedCode;
 		}
 	}
 
@@ -8614,13 +9486,15 @@ Requirements:
 		compositionSchemasLoading: boolean;
 		compositionSchemasError: string | null;
 		schemaLoadStartedAt: number | null;
-		chatContainerHeight: number;
+		chatContainerHeight: number; // 0 = fill available; >0 = user-resized fixed px
 		panelPreviewCompileError: string | null;
 	};
 
 	let widgetPanelSnapshots: Record<string, WidgetPanelSnapshot> = {};
 	/** Bumped on every panel snapshot write so {#each} panels re-read display state. */
 	let panelDisplayRevision = 0;
+	/** Bumped on rename so shape chrome / host title re-read widget names. */
+	let widgetNamesRevision = 0;
 	const schemaLoadInFlight = new Set<string>();
 	const schemaLoadPromises = new Map<string, Promise<void>>();
 	const compositionsLoadInFlight = new Set<string>();
@@ -8716,7 +9590,7 @@ Requirements:
 			compositionSchemasLoading,
 			compositionSchemasError,
 			schemaLoadStartedAt: focusedSnap?.schemaLoadStartedAt ?? null,
-			chatContainerHeight: focusedSnap?.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
+			chatContainerHeight: focusedSnap?.chatContainerHeight ?? 0,
 			panelPreviewCompileError: focusedSnap?.panelPreviewCompileError ?? null,
 		};
 	}
@@ -8782,7 +9656,7 @@ Requirements:
 			compositionSchemasLoading: false,
 			compositionSchemasError: null,
 			schemaLoadStartedAt: null,
-			chatContainerHeight: 550,
+			chatContainerHeight: 0,
 			panelPreviewCompileError: null,
 		};
 	}
@@ -8838,7 +9712,7 @@ Requirements:
 					: livePublishMatchesPanel
 						? live.publishHistoryResolvedForWidgetId
 						: snap.publishHistoryResolvedForWidgetId,
-				chatContainerHeight: snap.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
+				chatContainerHeight: snap.chatContainerHeight ?? 0,
 				compositionDesignSchema: resolvedDesignSchema,
 				compositionContentSchema: resolvedContentSchema,
 				compositionSchemasLoading: schemaLoading,
@@ -8856,7 +9730,7 @@ Requirements:
 			...snap,
 			lastCommitId: snap.lastCommitId || loadCommitIdForWidget(widgetId),
 			hasGeneratedCode: !!(snap.hasGeneratedCode || snap.lastCommitId || loadCommitIdForWidget(widgetId)),
-			chatContainerHeight: snap.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
+			chatContainerHeight: snap.chatContainerHeight ?? 0,
 			compositionDesignSchema: resolvedDesignSchema,
 			compositionContentSchema: resolvedContentSchema,
 			compositionSchemasError: resolvedSchemaError,
@@ -9001,43 +9875,391 @@ Requirements:
 		return resolvePublishedWidgetUrl(widgetId, version, jsPath);
 	}
 
-	/** Widget Builder origin for canvas shape iframes (mirrors WidgetDetails). */
+	/** Public display origin for shape/hidden capture iframes; keep WidgetDetails fetch proxy separate. */
 	function widgetBuilderPreviewBaseUrl(): string {
-		const publicBase = (
+		// Do not proxy sandboxed display frames onto the editor's origin.
+		return (
 			widgetBuilderUrl ||
 			import.meta.env.VITE_WIDGET_BUILDER_URL ||
 			import.meta.env.PUBLIC_WIDGET_BUILDER_URL ||
 			'https://wbuilder.widgetic.com'
 		).replace(/\/+$/, '');
-		if (import.meta.env.DEV && publicBase.includes('wbuilder.widgetic.com')) {
-			return '/__widget_builder__';
-		}
-		return publicBase;
 	}
 
 	/**
 	 * Live preview URL for a canvas WidgetShape overlay.
-	 * Prefer published CDN when available; else Worker /preview when code exists.
-	 * Returns null → screenshot-only fallback on the Fabric shape.
+	 * Source: 'live' | 'preview' | 'v:{N}' (historical published version).
+	 * Publish history is loaded without requiring chat to be open.
 	 */
+	let shapePreviewSourceByWidgetId: Record<string, string> = {};
+	// Historical previews are never interchangeable with the shared HEAD preview.
+	let shapeVersionPreviewByWidgetId: Record<string, {
+		versionId: string; requestId: number; loading: boolean; error: string | null; url: string | null;
+		errorDetails?: Awaited<ReturnType<typeof parseVersionPreviewError>> | null;
+	}> = {};
+	let shapeVersionPreviewRequestId = 0;
+	/** Remember failed versions after switching rows; unrelated versions stay publishable. */
+	let shapeVersionPreviewErrorsByKey = {};
+
+	function getVersionPreviewPublishBlockReason(widgetId, targetVersion = null) {
+		const selectedState = resolveWidgetShapeVersionPreviewState(widgetId);
+		const versionId = targetVersion == null
+			? shapePreviewSourceByWidgetId[widgetId]
+			: `v:${targetVersion}`;
+		const state = selectedState?.versionId === versionId ? selectedState : null;
+		if (state?.loading) return 'Wait for this version preview to finish building.';
+		return state?.error || shapeVersionPreviewErrorsByKey[`${widgetId}:${versionId}`] || null;
+	}
+	function resolveWidgetShapeVersionPreviewState(widgetId: string) {
+		const state = shapeVersionPreviewByWidgetId[widgetId];
+		return state?.versionId === shapePreviewSourceByWidgetId[widgetId] ? state : null;
+	}
+	let shapePublishHistoryByWidgetId: Record<string, any[]> = {};
+	let shapeHistoryLoadInFlight: Record<string, boolean> = {};
+	/**
+	 * Widgets whose shape publish history has already been fetched — *including*
+	 * widgets that came back with zero rows.
+	 *
+	 * Without this, an empty result is indistinguishable from "not fetched yet"
+	 * (see the `cached.length > 0` check below), so a widget that is published
+	 * (`js_path`/`version` set) but has no `widget_publish_history` rows re-issued
+	 * the request on every render. That thrashed the network and kept remounting
+	 * the live preview — the canvas looked like it constantly refreshed.
+	 */
+	let shapeHistoryResolvedByWidgetId: Record<string, boolean> = {};
+
+	async function ensureShapePublishHistory(widgetId: string): Promise<void> {
+		if (!widgetId || shapeHistoryLoadInFlight[widgetId]) return;
+		// Already fetched once — an empty history is a valid, final answer.
+		if (shapeHistoryResolvedByWidgetId[widgetId]) return;
+		const cached = shapePublishHistoryByWidgetId[widgetId];
+		if (cached && cached.length > 0) {
+			shapeHistoryResolvedByWidgetId = { ...shapeHistoryResolvedByWidgetId, [widgetId]: true };
+			return;
+		}
+		const fromPanel = getPanelDisplayState(widgetId).publishHistory;
+		if (fromPanel && fromPanel.length > 0) {
+			shapePublishHistoryByWidgetId = {
+				...shapePublishHistoryByWidgetId,
+				[widgetId]: [...fromPanel],
+			};
+			shapeHistoryResolvedByWidgetId = { ...shapeHistoryResolvedByWidgetId, [widgetId]: true };
+			return;
+		}
+		shapeHistoryLoadInFlight = { ...shapeHistoryLoadInFlight, [widgetId]: true };
+		try {
+			await loadPublishHistoryForPanel(widgetId, { silent: true });
+			const history = getPanelDisplayState(widgetId).publishHistory || [];
+			shapePublishHistoryByWidgetId = {
+				...shapePublishHistoryByWidgetId,
+				[widgetId]: [...history],
+			};
+			shapeHistoryResolvedByWidgetId = { ...shapeHistoryResolvedByWidgetId, [widgetId]: true };
+			syncWidgetShapeLivePreviews();
+		} finally {
+			const { [widgetId]: _, ...rest } = shapeHistoryLoadInFlight;
+			shapeHistoryLoadInFlight = rest;
+		}
+	}
+
+	function getShapePublishHistory(widgetId: string): any[] {
+		const cached = shapePublishHistoryByWidgetId[widgetId];
+		// Honour a cached empty array: it means the fetch already happened.
+		if (cached) return cached;
+		const fromPanel = getPanelDisplayState(widgetId).publishHistory;
+		return fromPanel?.length ? fromPanel : [];
+	}
+
 	function resolveWidgetShapeLivePreviewUrl(widgetId: string): string | null {
 		if (!widgetId) return null;
+		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
+		const ps = getPanelDisplayState(widgetId);
+		const hasCode = !!(ps.lastCommitId || loadCommitIdForWidget(widgetId));
+		const workerUrl = hasCode
+			? `${widgetBuilderPreviewBaseUrl()}/preview/${widgetId}`
+			: null;
+
+		if (source.startsWith('v:')) {
+			const version = parseInt(source.slice(2), 10);
+			if (Number.isFinite(version)) {
+				const record = getShapePublishHistory(widgetId).find(
+					(row) => Number(row.version) === version,
+				);
+				// Published versions use their stable artifact; drafts require an
+				// explicit commit-specific build. Never substitute shared HEAD.
+				const isPublished = !!(record?.publishedAt ?? record?.published_at);
+				const artifact =
+					record?.artifactUrl ||
+					record?.artifact_url ||
+					(version === ps.lastPublishedVersion ? ps.selectedWidgetJsPath : null);
+
+				if (isPublished && artifact) {
+					const url = resolvePublishedWidgetUrl(widgetId, version, artifact);
+					if (url) return url;
+				}
+				return resolveWidgetShapeVersionPreviewState(widgetId)?.url ?? null;
+			}
+			return null;
+		}
+
+		// After codegen (unpublished), prefer Worker preview over the Live CDN artifact.
+		if (source === 'preview' || ps.pendingPublishAfterCodegen) {
+			if (workerUrl) return workerUrl;
+		}
+
 		const published = getPanelEditPreviewUrl(widgetId);
-		if (published) return published;
+		if (published && source !== 'preview') return published;
+		return workerUrl;
+	}
 
-		const widget = getWidgetById(widgetId);
-		if (!widget) return null;
+	function resolveWidgetShapeVersionLabel(widgetId: string): string | null {
+		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
 		const ps = getPanelDisplayState(widgetId);
-		const hasCode = !!(ps.lastCommitId || loadCommitIdForWidget(widgetId));
-		if (!hasCode) return null;
+		const liveVersion =
+			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
+		if (source.startsWith('v:')) {
+			const version = parseInt(source.slice(2), 10);
+			if (!Number.isFinite(version)) return null;
+			return `v${version}`;
+		}
+		return liveVersion != null ? `v${liveVersion}` : null;
+	}
+
+	function formatPublishHistoryDate(record: {
+		publishedAt?: string;
+		published_at?: string;
+	}): string {
+		const d = new Date(record.publishedAt ?? record.published_at ?? '');
+		if (isNaN(d.getTime())) return '—';
+		const month = String(d.getMonth() + 1).padStart(2, '0');
+		const day = String(d.getDate()).padStart(2, '0');
+		const timePart = d.toLocaleTimeString(undefined, {
+			hour: '2-digit',
+			minute: '2-digit',
+			hour12: false,
+		});
+		return `${month}/${day}/${d.getFullYear()} ${timePart}`;
+	}
+
+	function resolveWidgetShapeVersionOptions(
+		widgetId: string,
+	): Array<{
+		id: string;
+		label: string;
+		shortLabel?: string;
+		dateLabel?: string;
+		isLive?: boolean;
+		isDraft?: boolean;
+		/** Immutable commit; Restore Checkpoint reuses this artifact when it matches. */
+		commitSha?: string;
+	}> | null {
+		const ps = getPanelDisplayState(widgetId);
+		const liveVersion =
+			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
+		// Newest first. Versions are one ascending sequence, so the number orders
+		// them correctly on its own; sorting by time is a stable tiebreak.
+		const history = [...getShapePublishHistory(widgetId)].sort(
+			(a, b) => Number(b.version) - Number(a.version),
+		);
+		const options: Array<{
+			id: string;
+			label: string;
+			shortLabel?: string;
+			dateLabel?: string;
+			isLive?: boolean;
+			isDraft?: boolean;
+		}> = [];
+		for (const record of history) {
+			const version = Number(record.version);
+			if (!Number.isFinite(version)) continue;
+			// One version sequence: a version is a Draft until it is published.
+			// `published_at` is the discriminator, so there is no second numbering
+			// scheme and no `gN` prefix — the history reads as plain `v1, v2, v3…`.
+			const isPublished = !!(record.publishedAt ?? record.published_at);
+			options.push({
+				id: `v:${version}`,
+				label: `Version ${version}`,
+				shortLabel: `v${version}`,
+				dateLabel: formatPublishHistoryDate(record),
+				// Only a published version can be what visitors see.
+				isLive: isPublished && version === liveVersion,
+				isDraft: !isPublished,
+				commitSha: record.commitSha ?? record.commit_sha,
+			});
+		}
+		if (options.length === 0 && liveVersion != null) {
+			options.push({
+				id: `v:${liveVersion}`,
+				label: `Version ${liveVersion}`,
+				shortLabel: `v${liveVersion}`,
+				dateLabel: '—',
+				isLive: true,
+			});
+		}
+		// Kick off history fetch so the dropdown fills even before chat opens.
+		// `ensureShapePublishHistory` is idempotent per widget (it records resolved
+		// widgets, including empty results), so calling it from render is safe.
+		if (history.length === 0) {
+			void ensureShapePublishHistory(widgetId);
+		}
+		return options.length > 0 ? options : null;
+	}
 
-		return `${widgetBuilderPreviewBaseUrl()}/preview/${widgetId}`;
+	function resolveWidgetShapeVersionSelectedId(widgetId: string): string | null {
+		const source = shapePreviewSourceByWidgetId[widgetId];
+		if (source?.startsWith('v:')) return source;
+		const ps = getPanelDisplayState(widgetId);
+		const liveVersion =
+			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
+		return liveVersion != null ? `v:${liveVersion}` : null;
+	}
+
+	function handleWidgetShapeVersionChange(widgetId: string, versionId: string, buildPreview = true): void {
+		if (!versionId) return;
+		// Re-selecting an already successful/in-flight preview must not reset its state.
+		const currentPreview = resolveWidgetShapeVersionPreviewState(widgetId);
+		if (shapePreviewSourceByWidgetId[widgetId] === versionId
+			&& (currentPreview?.loading || currentPreview?.url)) return;
+		shapePreviewSourceByWidgetId = {
+			...shapePreviewSourceByWidgetId,
+			[widgetId]: versionId,
+		};
+		shapeVersionPreviewRequestId += 1;
+		shapeVersionPreviewByWidgetId = {
+			...shapeVersionPreviewByWidgetId,
+			[widgetId]: {
+				versionId, requestId: shapeVersionPreviewRequestId,
+				loading: false, error: null, url: null,
+			},
+		};
+		syncWidgetShapeLivePreviews();
+		panelDisplayRevision += 1;
+		// Explicit Publish builds its own target; do not race it with a preview build.
+		if (!buildPreview) return;
+		// Published artifacts need no build. Drafts must never substitute HEAD.
+		if (versionId.startsWith('v:')) {
+			const version = Number(versionId.slice(2));
+			if (resolveWidgetShapeLivePreviewUrl(widgetId)) {
+				const record = getShapePublishHistory(widgetId).find((row) => Number(row.version) === version);
+				console.log('[VersionPreview] Selection', { widgetId, version, commitSha: record?.commitSha ?? record?.commit_sha ?? null, source: 'published' });
+			} else {
+				void ensureWidgetShapeVersionPreview(widgetId, version);
+			}
+		}
+	}
+
+	/** Explicit retry retains the selected version and its remembered publish block. */
+	async function retryWidgetShapeVersionPreview(widgetId) {
+		const state = resolveWidgetShapeVersionPreviewState(widgetId);
+		if (!state?.error || state.loading || !state.versionId.startsWith('v:')) return;
+		await ensureWidgetShapeVersionPreview(widgetId, Number(state.versionId.slice(2)), true);
+	}
+
+	async function ensureWidgetShapeVersionPreview(widgetId: string, version: number, retry = false): Promise<void> {
+		if (!widgetId || !Number.isSafeInteger(version) || version < 1) return;
+		const versionId = `v:${version}`;
+		if (shapePreviewSourceByWidgetId[widgetId] !== versionId) return;
+		const previous = shapeVersionPreviewByWidgetId[widgetId];
+		if (previous?.versionId === versionId && (previous.loading || (!retry && (previous.url || previous.error)))) return;
+		const requestId = ++shapeVersionPreviewRequestId;
+		shapeVersionPreviewByWidgetId = {
+			...shapeVersionPreviewByWidgetId,
+			[widgetId]: { versionId, requestId, loading: true, url: null,
+				error: retry ? previous?.error ?? null : null,
+				errorDetails: retry ? previous?.errorDetails ?? null : null },
+		};
+		syncWidgetShapeLivePreviews();
+		panelDisplayRevision += 1;
+		try {
+			const response = await agentClient.previewWidgetVersion({ widgetId, version });
+			const previewUrl = response?.data?.previewUrl ?? null;
+			const commitSha = response?.data?.commitSha ?? null;
+			// Drop stale responses: the selector may have moved on (or away) meanwhile.
+			if (
+				shapePreviewSourceByWidgetId[widgetId] !== versionId
+				|| shapeVersionPreviewByWidgetId[widgetId]?.requestId !== requestId
+			) {
+				return;
+			}
+			if (!previewUrl) {
+				throw new Error('Preview URL missing from response');
+			}
+			shapeVersionPreviewByWidgetId = {
+				...shapeVersionPreviewByWidgetId,
+				[widgetId]: { versionId, requestId, loading: false, error: null, url: previewUrl },
+			};
+			syncWidgetShapeLivePreviews();
+			panelDisplayRevision += 1;
+			shapeVersionPreviewErrorsByKey = { ...shapeVersionPreviewErrorsByKey, [`${widgetId}:${versionId}`]: null };
+			console.log('[VersionPreview] Selection', { widgetId, version, commitSha });
+		} catch (error: unknown) {
+			if (
+				shapePreviewSourceByWidgetId[widgetId] !== versionId
+				|| shapeVersionPreviewByWidgetId[widgetId]?.requestId !== requestId
+			) return;
+			const errorDetails = await parseVersionPreviewError(error);
+			if (shapePreviewSourceByWidgetId[widgetId] !== versionId
+				|| shapeVersionPreviewByWidgetId[widgetId]?.requestId !== requestId) return;
+			shapeVersionPreviewErrorsByKey = { ...shapeVersionPreviewErrorsByKey, [`${widgetId}:${versionId}`]: errorDetails.message };
+			// One diagnostic per failed request; raw server wording never reaches the overlay.
+			console.warn('[VersionPreview] Selection', { widgetId, version, ...errorDetails });
+			shapeVersionPreviewByWidgetId = {
+				...shapeVersionPreviewByWidgetId,
+				[widgetId]: { versionId, requestId, loading: false, error: errorDetails.message, errorDetails, url: null },
+			};
+			syncWidgetShapeLivePreviews();
+			panelDisplayRevision += 1;
+		}
+	}
+
+	/** Commit SHA for the version currently selected in the version menu (drives Head-at-commit badge). */
+	function resolveViewingCommitShaForPanel(widgetId: string): string | null {
+		const ps = getPanelDisplayState(widgetId);
+		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
+		if (source === 'preview') {
+			return normalizeCommitSha(ps.lastCommitId);
+		}
+		let version: number | null = null;
+		if (source.startsWith('v:')) {
+			const parsed = parseInt(source.slice(2), 10);
+			version = Number.isFinite(parsed) ? parsed : null;
+		} else {
+			version = ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
+		}
+		if (version == null) return normalizeCommitSha(ps.lastCommitId);
+		const history = ps.publishHistory?.length ? ps.publishHistory : publishHistory;
+		const record = history.find((r) => Number(r.version) === Number(version));
+		const fromHistory = normalizeCommitSha(record?.commitSha ?? record?.commit_sha);
+		if (fromHistory) return fromHistory;
+		// Live version with no history row yet — fall back to published SHA, then HEAD.
+		if (Number(version) === Number(ps.lastPublishedVersion)) {
+			return (
+				normalizeCommitSha(getLivePublishedCommitShaForPanel(widgetId))
+				?? normalizeCommitSha(ps.lastCommitId)
+			);
+		}
+		return normalizeCommitSha(ps.lastCommitId);
 	}
 
 	function syncWidgetShapeLivePreviews(): void {
 		try {
 			canvasSelectedWidgetShapeId = canvasRef?.getSelectedWidgetShapeId?.() ?? null;
 			widgetShapeLivePreviewsRef?.sync?.();
+			// Hide Fabric screenshots under live iframes (avoids ghost bleed in padding).
+			const rects = canvasRef?.listWidgetShapeScreenRects?.() ?? [];
+			const liveWidgetIds = new Set<string>();
+			for (const rect of rects) {
+				if (!rect?.widgetId) continue;
+				if (!resolveWidgetShapeLivePreviewUrl(rect.widgetId)) continue;
+				liveWidgetIds.add(rect.widgetId);
+				canvasRef?.setWidgetShapeLivePreviewHiddenImage?.(rect.widgetId, true);
+			}
+			const linkedIds = canvasRef?.getLinkedWidgetIds?.() ?? new Set<string>();
+			for (const widgetId of linkedIds) {
+				if (!liveWidgetIds.has(widgetId)) {
+					canvasRef?.setWidgetShapeLivePreviewHiddenImage?.(widgetId, false);
+				}
+			}
 		} catch (err) {
 			console.warn('[CreatorApp] WidgetShape live preview sync failed', err);
 		}
@@ -9380,6 +10602,9 @@ Requirements:
 		if (detailsSessionWidgetId === fromId) detailsSessionWidgetId = toId;
 		if (widgetDetailsOpenTargetId === fromId) widgetDetailsOpenTargetId = toId;
 		showWidgetDetails = openWidgetPanelIds.length > 0;
+		// Any *other* draft panel still registered would keep a real widget panel
+		// bound to a `draft_convert_*` context id — clear those too.
+		purgeDraftConvertPanels();
 		// console.log(
 			// '[CreatorApp] Migrated Widget Details panel',
 			// fromId.substring(0, 16),
@@ -9975,6 +11200,16 @@ Requirements:
 
 	function hasUnpublishedChangesForPanel(widgetId: string): boolean {
 		const ps = getPanelDisplayState(widgetId);
+		if (ps.pendingPublishAfterCodegen) return true;
+
+		// Never published but code exists: this is the first publishable version.
+		// Without this the panel showed a "Draft" badge that could not be acted on —
+		// there was no way to promote the first generation to Live.
+		if (ps.lastPublishedVersion === null) {
+			return panelHasPublishableCode(widgetId, ps);
+		}
+
+		const pendingSha = loadPendingPublishShaForWidget(widgetId);
 		const headSha = resolvePublishHeadCommitId(widgetId, ps);
 		if (!headSha || ps.lastPublishedVersion === null) return false;
 
@@ -9982,6 +11217,7 @@ Requirements:
 			getLivePublishedCommitShaForPanel(widgetId)
 			?? getWidgetLastPublishCommitSha(widgetId);
 		if (!liveSha) return false;
+		if (pendingSha && !commitsMatch(pendingSha, liveSha)) return true;
 
 		return !commitsMatch(headSha, liveSha);
 	}
@@ -10064,7 +11300,7 @@ Requirements:
 	 * Single source of truth for Publish button label / disabled / toast reason.
 	 * Prevents "Publish new vN" while click toasts "already live".
 	 */
-	function getPublishGateForPanel(widgetId: string): {
+	function getPublishGateForPanel(widgetId: string, targetVersion = null): {
 		disabled: boolean;
 		label: string;
 		reason: string | null;
@@ -10129,6 +11365,27 @@ Requirements:
 				showDisabledHint: true,
 			};
 		}
+		const previewBlockReason = getVersionPreviewPublishBlockReason(widgetId, targetVersion);
+		if (previewBlockReason) {
+			return { disabled: true, label: 'Publish', reason: previewBlockReason, showDisabledHint: true };
+		}
+		// An explicit Draft owns its commit: HEAD being Live must not block it.
+		// Keep all shared auth/canvas/repository/concurrency checks above this branch.
+		if (targetVersion !== null) {
+			const record = getShapePublishHistory(widgetId).find(
+				(row) => Number(row.version) === Number(targetVersion),
+			);
+			const validVersion = targetVersion !== '' && Number.isInteger(Number(targetVersion)) && Number(targetVersion) > 0;
+			const reason = !validVersion || !record
+				? 'The selected draft version was not found.'
+				: (record.publishedAt ?? record.published_at)
+					? 'This version is already published.'
+					: !(record.commitSha ?? record.commit_sha)
+						? 'This draft has no recorded commit to publish.'
+						: null;
+			return { disabled: !!reason, label: 'Publish', reason, showDisabledHint: !!reason };
+		}
+
 		if (!hasCode) {
 			return {
 				disabled: true,
@@ -10216,6 +11473,31 @@ Requirements:
 		return 'No new version to publish';
 	}
 
+	/**
+	 * Whether a specific Draft can be published.
+	 *
+	 * The main publish gate answers "is there newer code than Live?", which is
+	 * about HEAD. Selecting an older Draft in the version list is a different
+	 * question — that row has its own commit and can be promoted regardless of
+	 * where HEAD sits. Drafts with no recorded commit (a row that predates commit
+	 * tracking) cannot be rebuilt, so they are excluded rather than published
+	 * from whatever HEAD happens to contain.
+	 */
+	function canPublishDraftVersionForPanel(widgetId: string, version: number | null | undefined): boolean {
+		if (version == null || version === '' || !Number.isFinite(Number(version))) return false;
+		if (isPublishing && publishingWidgetId === widgetId) return false;
+		if (isPublishing && publishingWidgetId !== null && publishingWidgetId !== widgetId) return false;
+		if (generatingWidgetIds[widgetId]) return false;
+		if (!widgetId || !getEffectiveCanvasId()) return false;
+		if (!hasValidToken || !$userSession?.user) return false;
+		const record = getPanelDisplayState(widgetId).publishHistory.find(
+			(row) => Number(row.version) === Number(version),
+		);
+		if (!record) return false;
+		if (record.publishedAt ?? record.published_at) return false;
+		return !!(record.commitSha ?? record.commit_sha);
+	}
+
 	function isPublishDisabledForPanel(widgetId: string): boolean {
 		return getPublishGateForPanel(widgetId).disabled;
 	}
@@ -10250,7 +11532,12 @@ Requirements:
 		);
 	}
 
-	function runPublishForPanel(panelWidgetId: string): void {
+	/**
+	 * Publish for a panel. Pass `targetVersion` to publish a specific Draft the
+	 * user selected in the version list (built from that version's own commit);
+	 * omit it to publish the newest generated code.
+	 */
+	function runPublishForPanel(panelWidgetId: string, targetVersion?: number | null): void {
 		void (async () => {
 			if (isPublishing && !publishingWidgetId) {
 				console.warn('[Publish] Clearing stuck global isPublishing flag');
@@ -10263,7 +11550,7 @@ Requirements:
 
 			// Gate BEFORE focus/tick — focusing can reconcile HEAD/live SHA mid-click and
 			// used to toast "already live" after the button still said "Publish new vN".
-			const gateBefore = getPublishGateForPanel(panelWidgetId);
+			const gateBefore = getPublishGateForPanel(panelWidgetId, targetVersion ?? null);
 			if (gateBefore.disabled) {
 				if (gateBefore.reason) {
 					showToast('info', 'Cannot publish yet', { description: gateBefore.reason, duration: 5000 });
@@ -10276,7 +11563,7 @@ Requirements:
 				await tick();
 			}
 
-			const gateAfter = getPublishGateForPanel(panelWidgetId);
+			const gateAfter = getPublishGateForPanel(panelWidgetId, targetVersion ?? null);
 			if (gateAfter.disabled) {
 				if (gateAfter.reason) {
 					showToast('info', 'Cannot publish yet', { description: gateAfter.reason, duration: 5000 });
@@ -10284,7 +11571,7 @@ Requirements:
 				return;
 			}
 
-			await executePublishWidget(panelWidgetId);
+			await executePublishWidget(panelWidgetId, { targetVersion: targetVersion ?? null });
 		})();
 	}
 
@@ -10422,6 +11709,13 @@ async function loadPublishHistoryForPanel(widgetId: string, opts: { silent?: boo
 			publishHistoryResolved: true,
 			publishHistoryResolvedForWidgetId: widgetId,
 		});
+		shapePublishHistoryByWidgetId = {
+			...shapePublishHistoryByWidgetId,
+			[widgetId]: [...history],
+		};
+		// Mark resolved even when empty — an empty history is a final answer and
+		// must stop `ensureShapePublishHistory` from re-fetching on every render.
+		shapeHistoryResolvedByWidgetId = { ...shapeHistoryResolvedByWidgetId, [widgetId]: true };
 		if (widgetId === focusedPanelWidgetId) {
 			publishHistory = history;
 			publishHistoryResolved = true;
@@ -10461,11 +11755,26 @@ async function loadPublishHistory(opts: { silent?: boolean } = {}) {
 }
 
 /**
- * Sets a historical version as the current live version without rebuilding.
- * Updates widgets.js_path to point to the older version's artifact URL.
+ * Sets an already-published version as the current live version without rebuilding.
+ * Updates widgets.js_path to point to that version's artifact URL.
+ *
+ * Only published versions can be promoted — a Draft has never been built to a
+ * stable artifact. Publishing a Draft goes through the normal Publish flow, which
+ * is why the UI never offers "Set live" for one.
  */
-async function setLiveVersion(version: number) {
-	if (!selectedWidgetId || !$userSession?.jwt) return;
+async function setLiveVersionForWidget(widgetId: string, version: number) {
+	if (!widgetId || !$userSession?.jwt) return;
+	if (!Number.isFinite(version)) return;
+
+	const record = getPanelDisplayState(widgetId).publishHistory.find(
+		(row) => Number(row.version) === version,
+	);
+	if (record && !(record.publishedAt ?? record.published_at)) {
+		showToast('info', 'This is a draft version', {
+			description: 'Press Publish to make the latest generated code live.',
+		});
+		return;
+	}
 
 	isSettingLiveVersion = version;
 	if (!widgetsClient) {
@@ -10475,12 +11784,12 @@ async function setLiveVersion(version: number) {
 	}
 	try {
 		const liveRes = await widgetsClient.setWidgetPublishHistoryLive({
-			widgetId: selectedWidgetId,
+			widgetId,
 			version
 		});
 		const nested = liveRes?.data as { data?: Record<string, unknown>; artifactUrl?: string; artifact_url?: string; commitSha?: string; commit_sha?: string } | undefined;
 		const liveData = nested?.data ?? nested ?? {};
-		const history = getPanelDisplayState(selectedWidgetId).publishHistory;
+		const history = getPanelDisplayState(widgetId).publishHistory;
 		const record = history.find((row) => row.version === version);
 		const commitSha = (liveData as { commitSha?: string; commit_sha?: string }).commitSha
 			|| (liveData as { commit_sha?: string }).commit_sha
@@ -10488,15 +11797,23 @@ async function setLiveVersion(version: number) {
 		const artifactUrl = (liveData as { artifactUrl?: string; artifact_url?: string }).artifactUrl
 			|| (liveData as { artifact_url?: string }).artifact_url
 			|| record?.artifactUrl || record?.artifact_url || null;
-		applyPublishSuccessToWidgetState(selectedWidgetId, version, artifactUrl, commitSha);
+		applyPublishSuccessToWidgetState(widgetId, version, artifactUrl, commitSha);
+		shapePreviewSourceByWidgetId = {
+			...shapePreviewSourceByWidgetId,
+			[widgetId]: `v:${version}`,
+		};
+		syncWidgetShapeLivePreviews();
+		panelDisplayRevision += 1;
 		isHistoryOpen = false;
-		const liveUrl = resolvePublishedWidgetUrl(selectedWidgetId, version, artifactUrl);
-		const detailsRef = getWidgetDetailsRef(selectedWidgetId);
+		const liveUrl = resolvePublishedWidgetUrl(widgetId, version, artifactUrl);
+		const detailsRef = getWidgetDetailsRef(widgetId);
 		detailsRef?.showPublishedArtifact?.(liveUrl);
 		detailsRef?.beginCompositionHydration?.();
-		revealCompositionPreview();
-		showToast('success', `Reverted to v${version}`, {
-			description: 'Widget is now live at this version. No rebuild needed.',
+		if (widgetId === selectedWidgetId || widgetId === focusedPanelWidgetId) {
+			revealCompositionPreview();
+		}
+		showToast('success', `Live: v${version}`, {
+			description: 'This version is now what visitors see on your sites.',
 			duration: 5000
 		});
 	} catch (err: any) {
@@ -10507,12 +11824,22 @@ async function setLiveVersion(version: number) {
 	}
 }
 
-/** Toggle publish history panel — reloads data on every open */
+async function setLiveVersion(version: number) {
+	if (!selectedWidgetId) return;
+	await setLiveVersionForWidget(selectedWidgetId, version);
+}
+
+/** Toggle publish history panel — reloads data on every open.
+ *  Right-aligns the dropdown with the whole header cluster (vN trigger +
+ *  LIVE/PUBLISH badge), not just the trigger button, per UX request. */
 function togglePublishHistory(triggerEl?: HTMLElement | null) {
 	isHistoryOpen = !isHistoryOpen;
 	if (isHistoryOpen) {
 		if (triggerEl) {
-			const rect = triggerEl.getBoundingClientRect();
+			// The vN trigger sits left of the LIVE/PUBLISH badge inside the same
+			// header cluster; align the panel to that cluster's right edge.
+			const cluster = triggerEl.closest('.wc-version-history-ct') as HTMLElement | null;
+			const rect = (cluster ?? triggerEl).getBoundingClientRect();
 			liveHistoryPanelTop = Math.round(rect.bottom + 4);
 			liveHistoryPanelRight = Math.round(window.innerWidth - rect.right);
 		}
@@ -10999,6 +12326,13 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	let lastWidgetShapeClickId = '';
 	const WIDGET_SHAPE_CLICK_DEBOUNCE_MS = 450;
 
+	/**
+	 * Widgets whose live-iframe thumbnail capture is currently running.
+	 * Prevents overlapping captures when several generation/refresh events fire
+	 * close together for the same widget.
+	 */
+	const shapeThumbnailCaptureInFlight = new Set<string>();
+
 	/**
 	 * Called when a Widget Image shape is clicked on the canvas.
 	 * Selects the linked widget and opens WidgetDetails.
@@ -11065,18 +12399,10 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			}
 		}
 
-		// Keep address-bar widget_id on the canvas primary (duplicate/select must not steal it).
-		if (typeof window !== 'undefined' && embedded && canvasPrimaryWidgetId && widgetId === canvasPrimaryWidgetId) {
-			try {
-				const url = new URL(window.location.href);
-				if (url.searchParams.get('widget_id') !== widgetId) {
-					url.searchParams.set('widget_id', widgetId);
-					window.history.replaceState({}, '', url.pathname + url.search + url.hash);
-					syncEmbeddedDeepLinkDismissTracking();
-				}
-			} catch (err) {
-				console.warn('[WidgetCreator] Failed to sync widget_id in URL:', err);
-			}
+		// Clicking a widget shape means "open this widget" — make it the canvas primary so a
+		// refresh reopens it. The URL only carries canvas_id; widget_id is no longer written.
+		if (embedded && widgetId !== canvasPrimaryWidgetId) {
+			void persistPrimaryWidgetId(widgetId);
 		}
 		// Full select so commit/preview/header match the shape's linked widget (not a stale URL widget).
 		if (selectedWidgetId !== widgetId) {
@@ -11308,6 +12634,10 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			}
 			notifyHostWidgetName({ id: widgetId, name: newName });
 			emitCanvasWidgetsList('widget-renamed');
+			widgetNamesRevision += 1;
+			panelDisplayRevision += 1;
+			backfillWidgetShapeMetadata();
+			syncWidgetShapeLivePreviews();
 			showToast('success', `Widget renamed to "${newName}"`);
 		} catch (error) {
 			console.error('[WidgetCreator] Failed to rename widget:', error);
@@ -11359,14 +12689,15 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		}
 		await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 		await maybeAutoRestoreWidgetShapes();
-		const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
-		if (primaryId && canvasRef && !isConvertOrDraftPanelOpen()) {
-			canvasRef.setPrimaryWidgetShape?.(primaryId);
-			const found = canvasRef.selectWidgetShape(primaryId);
-			// console.log('[CreatorApp] Primary widget shape after canvas load:', primaryId, found);
-		} else if (isConvertOrDraftPanelOpen()) {
-			// console.log('[CreatorApp] Skip primary shape select — convert/draft panel is open');
-		}
+		const linkedIds =
+			widgetIdsOnCanvas.length > 0
+				? widgetIdsOnCanvas
+				: [...(canvasRef?.getLinkedWidgetIds?.() ?? [])];
+		const primaryId = await hydrateCanvasPrimaryWidget(linkedIds);
+		applyPrimarySelectionOnCanvas(primaryId);
+		requestAnimationFrame(() => {
+			setTimeout(() => applyPrimarySelectionOnCanvas(primaryId), 80);
+		});
 		syncWidgetShapeLivePreviews();
 	}
 
@@ -11640,15 +12971,29 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	 */
 	let autosaveSequence = 0;
 	let lastResolvedAutosaveSequence = 0;
-
-	async function handleCanvasAutoSave(json: string | null, isUnmountSave = false) {
+	/**
+	 * Trailing save deferred while `isLoadCooldownActive` is set.
+	 * See {@link handleCanvasAutoSave}: dropping cooldown saves lost user edits.
+	 */
+	let pendingCooldownAutosaveJson: string | null = null;
+	let cooldownAutosaveTimer: ReturnType<typeof setTimeout> | null = null;
+	/** How long after a canvas load we still defer (not drop) autosaves. */
+	const CANVAS_COOLDOWN_AUTOSAVE_DELAY_MS = 3000;
+
+	async function handleCanvasAutoSave(
+		json: string | null,
+		isUnmountSave = false,
+		opts: { force?: boolean } = {},
+	) {
 		if (!json) {
 			if (isUnmountSave) console.warn('[CanvasDebug] onBeforeUnmount: saveCanvas returned null — canvas not initialized');
 			return;
 		}
 
+		const force = opts.force === true;
+
 		// Guard: don't overwrite DB with an empty canvas if state hasn't loaded yet
-		if (!isCanvasStateLoaded) {
+		if (!force && !isCanvasStateLoaded) {
 			// console.log(
 				// '[CanvasDebug] Skipping autosave — canvas state not loaded yet (guard active, avoids overwrite with empty)'
 			// );
@@ -11656,8 +13001,21 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		}
 
 		// Guard: skip autosaves triggered by loadCanvas() object:added events
-		if (isLoadCooldownActive && !isUnmountSave) {
-			// console.log('[CanvasDebug] Skipping autosave — load cooldown active (prevents overwriting freshly loaded data)');
+		//
+		// Dropping the save outright loses any edit the user made during the cooldown
+		// (canvas hydration, shape restore, and `loadCanvas`'s object:added events all
+		// run inside it). Defer one trailing save instead: the load burst still cannot
+		// overwrite freshly painted state, but a real move/resize a moment later is
+		// persisted rather than silently discarded.
+		if (!force && isLoadCooldownActive && !isUnmountSave) {
+			pendingCooldownAutosaveJson = json;
+			if (cooldownAutosaveTimer) clearTimeout(cooldownAutosaveTimer);
+			cooldownAutosaveTimer = setTimeout(() => {
+				cooldownAutosaveTimer = null;
+				const deferred = pendingCooldownAutosaveJson;
+				pendingCooldownAutosaveJson = null;
+				if (deferred) void handleCanvasAutoSave(deferred);
+			}, CANVAS_COOLDOWN_AUTOSAVE_DELAY_MS);
 			return;
 		}
 
@@ -11679,11 +13037,17 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		// Unmount saves (HMR) are always blocked when going from N→0.
 		// Normal autosaves going from N→0 are allowed only if the drop is gradual
 		// (user deleted objects one by one) — a sudden jump from many to 0 is suspicious.
+		// Explicit Save (force) still blocks sudden N→0 to avoid wiping the canvas.
 		if (objectCount === 0 && lastSavedCanvasObjectCount > 0) {
 			if (isUnmountSave || lastSavedCanvasObjectCount > 1) {
 				console.warn(
-					`[CanvasDebug] BLOCKING save: would overwrite ${lastSavedCanvasObjectCount} shapes with 0 (isUnmount=${isUnmountSave})`
+					`[CanvasDebug] BLOCKING save: would overwrite ${lastSavedCanvasObjectCount} shapes with 0 (isUnmount=${isUnmountSave}, force=${force})`
 				);
+				if (force) {
+					showToast('error', 'Save blocked', {
+						description: 'Canvas snapshot looked empty — refresh and try again.',
+					});
+				}
 				return;
 			}
 			// lastSavedCanvasObjectCount === 1 → user deleted the last object, allow it
@@ -11720,12 +13084,25 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 					return;
 				}
 				lastResolvedAutosaveSequence = currentSeq;
+				if (force) {
+					showToast('success', 'Canvas saved', { duration: 2000 });
+				}
 				// console.log(
 					// `[CanvasDebug] Canvas ${canvasId} saved to API: ${objectCount} shapes (seq ${currentSeq})`
 				// );
 			} catch (err) {
 				console.warn('[WidgetCreator] Failed to save canvas to API:', err);
+				if (force) {
+					showToast('error', 'Canvas save failed', {
+						description: 'Kept a local copy — check your connection and retry.',
+					});
+				}
 			}
+		} else if (force) {
+			showToast('success', 'Canvas saved locally', {
+				description: canvasId ? 'API client unavailable.' : 'No canvas id yet.',
+				duration: 2500,
+			});
 		}
 
 		refreshLinkedWidgetIds();
@@ -12069,6 +13446,68 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		return !!widgetId && widgetId.startsWith(DRAFT_CONVERT_ID_PREFIX);
 	}
 
+	/**
+	 * True for conversations that exist only in the browser.
+	 *
+	 * Draft convert panels need a conversation object before the widget has a DB
+	 * row, so `handleCreateConversation` issues a `local_*` id. Message load/save
+	 * must treat those as local-only rather than querying the API with a key that
+	 * cannot exist there.
+	 */
+	function isLocalOnlyConversationId(conversationId: string | null | undefined): boolean {
+		return !!conversationId && conversationId.startsWith('local_');
+	}
+
+	/**
+	 * Drop synthetic draft ids from the panel registry.
+	 *
+	 * `migrateOpenPanelWidgetId` renames every map keyed by widget id, but the
+	 * `{#each openWidgetPanelIds}` block is keyed by `panelInstanceKeyByWidgetId`,
+	 * so a draft id that survives anywhere in that list can re-render a real
+	 * widget's panel while `context.id` still points at the draft. That panel then
+	 * asks the API for `draft_convert_*` conversations and schemas — 400s and
+	 * "Failed to initialize chat" for a widget whose history is perfectly fine.
+	 *
+	 * Draft panels are only ever opened through the convert flow, which re-creates
+	 * them from `draftConvertObjectIds`, so dropping them here is safe.
+	 */
+	function purgeDraftConvertPanels(): void {
+		if (!openWidgetPanelIds.some((id) => isDraftConvertId(id))) return;
+
+		const draftIds = openWidgetPanelIds.filter((id) => isDraftConvertId(id));
+		const remainingIds = openWidgetPanelIds.filter((id) => !isDraftConvertId(id));
+		const nextInstanceKeys = { ...panelInstanceKeyByWidgetId };
+		const nextZIndexes = { ...panelZIndexByWidgetId };
+		const nextRefs = { ...widgetDetailsRefs };
+		const nextChatMethods = { ...chatMethodsByWidgetId };
+		for (const draftId of draftIds) {
+			delete nextInstanceKeys[draftId];
+			delete nextZIndexes[draftId];
+			delete nextRefs[draftId];
+			delete nextChatMethods[draftId];
+		}
+		panelInstanceKeyByWidgetId = nextInstanceKeys;
+		panelZIndexByWidgetId = nextZIndexes;
+		widgetDetailsRefs = nextRefs;
+		chatMethodsByWidgetId = nextChatMethods;
+		openWidgetPanelIds = remainingIds;
+
+		if (focusedPanelWidgetId && isDraftConvertId(focusedPanelWidgetId)) {
+			focusedPanelWidgetId = remainingIds.at(-1) ?? null;
+		}
+		if (selectedWidgetId && isDraftConvertId(selectedWidgetId)) {
+			selectedWidgetId = focusedPanelWidgetId;
+		}
+		if (detailsSessionWidgetId && isDraftConvertId(detailsSessionWidgetId)) {
+			detailsSessionWidgetId = null;
+		}
+		if (widgetDetailsOpenTargetId && isDraftConvertId(widgetDetailsOpenTargetId)) {
+			widgetDetailsOpenTargetId = null;
+		}
+		showWidgetDetails = openWidgetPanelIds.length > 0;
+		console.warn('[CreatorApp] Purged draft convert panels:', draftIds.length);
+	}
+
 	function isConvertOrDraftPanelOpen(): boolean {
 		return (
 			isDraftConvertId(focusedPanelWidgetId)
@@ -12507,13 +13946,14 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		<!-- Right: Debug toggle + Auth info (2 lines) + Logout -->
 		<div class="wc-top-bar-right flex items-center gap-3 shrink-0">
 			{#if debugModeAvailable}
+				<HoverTooltip text={debugMode ? 'Debug mode ON — click to disable (hides console tab, widgets panel)' : 'Debug mode OFF — click to enable'}>
 				<button
 					onclick={toggleDebugMode}
 					class="wc-debug-toggle px-2.5 py-1 cursor-pointer text-xs font-medium rounded-lg border transition-colors {debugMode ? 'bg-red-50 border-red-400 text-red-600 hover:bg-red-100' : 'bg-gray-100 border-gray-300 text-gray-500 hover:bg-gray-200'}"
-					title={debugMode ? 'Debug mode ON — click to disable (hides console tab, widgets panel)' : 'Debug mode OFF — click to enable'}
 				>
 					🐛 Debug {debugMode ? 'ON' : 'OFF'}
 				</button>
+				</HoverTooltip>
 			{/if}
 			<div class="wc-auth-info flex flex-col gap-px items-start">
 				<div class="wc-auth-line1 flex items-center gap-2">
@@ -12581,6 +14021,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	<svelte:component this={WidgeticCanvas}
 		bind:this={canvasRef}
 		showContainerFrame={!embedded}
+		widgetSelectionLayerTarget="floating-panels-overlay"
 		bind:wireframeMode={canvasWireframeMode}
 		advancedFeatures={canvasAdvancedFeatures}
 		onReady={handleCanvasReady}
@@ -12598,10 +14039,11 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		onWidgetShapeDuplicated={handleWidgetShapeDuplicated}
 		onWidgetShapeDeleting={handleWidgetShapeDeleting}
 		onWidgetRename={handleWidgetRename}
-		onRefreshScreenshot={handleRefreshScreenshot}
+		onRefreshScreenshot={null}
 		onSetPrimaryWidget={handleSetPrimaryWidget}
 		onAfterRender={syncWidgetShapeLivePreviews}
 		getWidgetName={getWidgetNameById}
+		widgetNameRevision={widgetNamesRevision}
 		isWidgetKnown={isWidgetKnownById}
 		onNonWidgetSelected={() => {
 			if (suppressWidgetDetailsClose || isConvertOrDraftPanelOpen()) {
@@ -12630,17 +14072,43 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				bind:this={widgetShapeLivePreviewsRef}
 				getRects={() => canvasRef?.listWidgetShapeScreenRects?.() ?? []}
 				resolveUrl={resolveWidgetShapeLivePreviewUrl}
+				resolvePreviewState={resolveWidgetShapeVersionPreviewState}
+				onRetryPreview={retryWidgetShapeVersionPreview}
+				primaryWidgetId={canvasPrimaryWidgetId}
+				onSetPrimary={(widgetId) => handleHostSetPrimaryWidgetEvent(new CustomEvent(HOST_SET_PRIMARY_WIDGET_EVENT, { detail: { widgetId } }))}
+				resolvePublishDisabled={(widgetId, version) => getPublishGateForPanel(widgetId, version ?? null).disabled}
+				resolvePublishDisabledReason={(widgetId, version) => getPublishGateForPanel(widgetId, version ?? null).reason}
+				resolveTitle={getWidgetNameById}
+				titleRevision={widgetNamesRevision + panelDisplayRevision}
+				resolveVersionLabel={resolveWidgetShapeVersionLabel}
+				resolveVersionOptions={resolveWidgetShapeVersionOptions}
+				resolveVersionSelectedId={resolveWidgetShapeVersionSelectedId}
+				onVersionChange={handleWidgetShapeVersionChange}
+				onSetLive={(widgetId, version) => {
+					void setLiveVersionForWidget(widgetId, version);
+				}}
+				settingLiveVersion={isSettingLiveVersion}
+				resolveCanPublish={(widgetId) => hasUnpublishedChangesForPanel(widgetId)}
+				resolveCanPublishDraft={(widgetId, version) => canPublishDraftVersionForPanel(widgetId, version)}
+				resolveIsPublishing={(widgetId) => isPublishing && publishingWidgetId === widgetId}
+				onPublish={(widgetId) => runPublishForPanel(widgetId)}
+				onPublishDraft={(widgetId, version) => runPublishForPanel(widgetId, version)}
 				selectedWidgetId={canvasSelectedWidgetShapeId}
 				onTranslate={(widgetId, dx, dy) => {
 					canvasRef?.translateWidgetShapeByScreen?.(widgetId, dx, dy);
 				}}
+				onTranslateEnd={(widgetId) => {
+					canvasRef?.commitWidgetShapeTranslate?.(widgetId);
+				}}
 				onSelectShape={(widgetId) => {
 					canvasRef?.selectWidgetShapeById?.(widgetId);
 					canvasSelectedWidgetShapeId = widgetId;
+					void ensureShapePublishHistory(widgetId);
 				}}
 				onOpenChat={(widgetId) => {
 					void openWidgetDetailsPanel(widgetId);
 				}}
+				onRefresh={handleWidgetShapeRefresh}
 			/>
 
 			<!-- ═══ PANEL 2: Widgets Panel — debug + showWidgetsList (site passes false) ═══ -->
@@ -12934,6 +14402,16 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			{@const panelWidget = widgetsById.get(panelWidgetId) ?? null}
 			{@const isPanelFocused = focusedPanelWidgetId === panelWidgetId}
 			{@const ps = (panelDisplayRevision, getPanelDisplayState(panelWidgetId))}
+			<!--
+				Same published-version resolution the WidgetDetails instance below gets.
+				`ps.lastPublishedVersion` alone is only hydrated from the focused panel /
+				DB snapshot; a widget whose summary carries `jsPath` (/v<N>/) or `version`
+				can be published while `ps.lastPublishedVersion` is still null. The header
+				version menu must not disagree with the panel's own Publish/Live state.
+			-->
+			{@const panelPublishedVersion = isDraftConvertId(panelWidgetId)
+				? null
+				: (ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(panelWidget ?? null))}
 			{@const panelHasUnpublishedChanges = (panelDisplayRevision, widgets.length, hasUnpublishedChangesForPanel(panelWidgetId))}
 			{@const panelHasCompileErrorState = (panelDisplayRevision, panelHasCompileError(panelWidgetId))}
 			{@const panelHasInfraPreviewError = (panelDisplayRevision, panelHasInfrastructurePreviewError(panelWidgetId))}
@@ -13236,9 +14714,55 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 					hasAutoOpenedPreview = detail.hasAutoOpenedPreview;
 				}}
 			>
+				<svelte:fragment slot="header-meta">
+					{#if saveStatus === 'saving' && isPanelFocused}
+						<span class="wc-header-save-status text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 animate-pulse">Saving...</span>
+					{:else if saveStatus === 'saved' && isPanelFocused}
+						<span class="wc-header-save-status text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">Saved</span>
+					{:else if saveStatus === 'error' && isPanelFocused}
+						<span class="wc-header-save-status text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700">Save Error</span>
+					{/if}
+					{#if debugMode}
+						<span class="wc-header-commit text-[10px] text-gray-500 whitespace-nowrap">
+							Commit:
+							<span class="font-mono font-medium text-gray-600" title={ps.lastCommitId || ''}>
+								{ps.lastCommitId ? ps.lastCommitId.substring(0, 8) : '—'}
+							</span>
+						</span>
+					{/if}
+				</svelte:fragment>
 				<svelte:fragment slot="version-history">
-				{#if ps.lastPublishedVersion !== null}
-				<div class="wc-version-history-ct relative shrink-0">
+				<!--
+					A widget that has only ever been generated (never published) still
+					has versions to preview — the history holds them as Drafts. Gating
+					purely on `panelPublishedVersion` hid the picker for exactly those
+					widgets, which is why the dropdown looked missing.
+				-->
+				{#if panelPublishedVersion !== null || ps.publishHistory.length > 0}
+				{@const newestDraft = ps.publishHistory.find(
+					(row) => !(row.publishedAt ?? row.published_at),
+				)}
+				{@const defaultVersionSource = panelPublishedVersion !== null
+					? `v:${panelPublishedVersion}`
+					: (newestDraft ? `v:${newestDraft.version}` : null)}
+				{@const shapeSource = shapePreviewSourceByWidgetId[panelWidgetId] || defaultVersionSource}
+				{@const viewingVersion = shapeSource && shapeSource.startsWith('v:')
+					? parseInt(shapeSource.slice(2), 10)
+					: panelPublishedVersion}
+				{@const viewingIsLive = Number(viewingVersion) === Number(panelPublishedVersion)}
+				<!--
+					A version is a Draft until it is published. The history is one
+					sequence (`v1, v2, v3…`), so "draft" is read from the record's
+					`publishedAt`, not from any second numbering scheme.
+				-->
+				{@const viewingRecord = ps.publishHistory.find(
+					(row) => Number(row.version) === Number(viewingVersion),
+				)}
+				{@const viewingIsDraft = viewingRecord
+					? !(viewingRecord.publishedAt ?? viewingRecord.published_at)
+					: false}
+				<div class="wc-version-history-ct relative shrink-0 flex items-center gap-0.5">
+					<HoverTooltip text="Switch version" maxWidth={120}>
 					<button
 						type="button"
 						onclick={(e) => {
@@ -13246,11 +14770,66 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							togglePublishHistory(e.currentTarget);
 						}}
 						onmousedown={(e) => e.stopPropagation()}
-						class="wc-version-history-toggle flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 cursor-pointer whitespace-nowrap"
+						class="wc-version-history-toggle flex items-center gap-0.5 text-[10px] font-semibold tabular-nums px-1.5 py-0.5 rounded border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 cursor-pointer whitespace-nowrap"
 					>
-						Live: v{ps.lastPublishedVersion}
+						{`v${Number.isFinite(viewingVersion) ? viewingVersion : panelPublishedVersion}`}
 						<span class="text-emerald-500">{isHistoryOpen && isPanelFocused ? '▲' : '▼'}</span>
 					</button>
+					</HoverTooltip>
+					{#if panelHasUnpublishedChanges && !Number.isFinite(viewingVersion)}
+						<button
+							type="button"
+							onclick={(e) => {
+								e.stopPropagation();
+								if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
+								runPublishForPanel(panelWidgetId);
+							}}
+							disabled={isPublishDisabledForPanel(panelWidgetId) || (isPublishing && publishingWidgetId === panelWidgetId)}
+							title={getPublishDisabledReasonForPanel(panelWidgetId) ?? 'Publish the latest generated code as the Live version'}
+							class="wc-version-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+						>
+							{isPublishing && publishingWidgetId === panelWidgetId ? '...' : 'Publish'}
+						</button>
+					{:else if viewingIsLive}
+						<span
+							class="wc-version-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-600 opacity-80"
+							title="Live — generate new code to Publish a new version"
+						>Live</span>
+					{:else if viewingIsDraft}
+						{#if viewingIsDraft}
+							<button
+								type="button"
+								onclick={(e) => {
+									e.stopPropagation();
+									if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
+									if (getPublishGateForPanel(panelWidgetId, Number(viewingVersion)).disabled) return;
+									handleWidgetShapeVersionChange(panelWidgetId, `v:${viewingVersion}`, false);
+									runPublishForPanel(panelWidgetId, Number(viewingVersion));
+								}}
+								disabled={!canPublishDraftVersionForPanel(panelWidgetId, viewingVersion) || getPublishGateForPanel(panelWidgetId, Number(viewingVersion)).disabled}
+								title="Build this draft version and make it the Live version"
+								class="wc-version-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+							>
+								{isPublishing && publishingWidgetId === panelWidgetId ? '...' : 'Publish'}
+							</button>
+						{/if}
+					{:else}
+						<button
+							type="button"
+							onclick={(e) => {
+								e.stopPropagation();
+								if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
+								if (Number.isFinite(viewingVersion)) {
+									void setLiveVersionForWidget(panelWidgetId, Number(viewingVersion));
+								}
+							}}
+							disabled={isSettingLiveVersion === Number(viewingVersion)}
+							title="Publish this version so visitors see it on your website"
+							class="wc-version-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded border border-emerald-300 text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+						>
+							{isSettingLiveVersion === Number(viewingVersion) ? '...' : 'Set live'}
+						</button>
+					{/if}
 					{#if isHistoryOpen && isPanelFocused}
 						<Portal target="wc-live-history-portal-{panelWidgetId}">
 							<button
@@ -13260,49 +14839,44 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								onclick={() => { isHistoryOpen = false; }}
 							></button>
 							<div
-								class="wc-version-history-panel flex flex-col gap-1 max-h-48 overflow-y-auto rounded-md border border-emerald-200 bg-white shadow-lg p-1.5 z-[9999] w-max"
+								class="wc-version-history-panel flex flex-col gap-1 rounded-md border border-emerald-200 bg-white shadow-lg p-1.5 z-[9999] w-max"
 								style="position: fixed; top: {liveHistoryPanelTop}px; right: {liveHistoryPanelRight}px; max-width: min(22rem, calc(100vw - 16px));"
 							>
 							{#if isLoadingHistory}
 								<p class="text-xs text-emerald-500 animate-pulse text-center py-2">Loading history...</p>
 							{:else if ps.publishHistory.length === 0}
-								<p class="text-xs text-emerald-400 text-center py-2">No history records yet. Publish to start tracking.</p>
+								<p class="text-xs text-emerald-400 text-center py-2">No history records yet. Generate or publish to start tracking.</p>
 							{:else}
 								{#each ps.publishHistory as record (record.id)}
-									<div class="publish-history-row flex items-center gap-2 rounded border border-emerald-100 bg-white px-2 py-1.5 w-max">
-										<span class="text-xs font-mono font-bold text-emerald-700 shrink-0">v{record.version}</span>
-										{#if debugMode && (record.commitSha || record.commit_sha)}
-											<span class="text-xs font-mono text-slate-400 shrink-0" title={record.commitSha ?? record.commit_sha}>
-												{(record.commitSha ?? record.commit_sha).slice(0, 7)}
-											</span>
-										{/if}
-										<span class="wc-live-history-date text-xs text-slate-400 shrink-0 whitespace-nowrap tabular-nums" style="padding-right: 4px;">
-											{(() => {
-												const d = new Date(record.publishedAt ?? record.published_at ?? '');
-												if (isNaN(d.getTime())) return '—';
-												const month = String(d.getMonth() + 1).padStart(2, '0');
-												const day = String(d.getDate()).padStart(2, '0');
-												const timePart = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false });
-												return `${month}/${day}/${d.getFullYear()} ${timePart}`;
-											})()}
-										</span>
-										{#if record.version !== ps.lastPublishedVersion}
-											<button
-												onclick={() => { void setLiveVersion(record.version); }}
-												disabled={isSettingLiveVersion === record.version}
-												class="shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-xs px-1.5 py-0.5 rounded border border-emerald-300 text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-												title="Set this version as the live published widget"
-											>
-												{isSettingLiveVersion === record.version ? '...' : 'Set live'}
-											</button>
-										{:else}
-											<button
-												type="button"
-												class="shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-xs px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-600 font-medium cursor-pointer"
-												onclick={() => { isHistoryOpen = false; }}
-											>live</button>
-										{/if}
-									</div>
+									{@const rowVersion = Number(record.version)}
+									{@const rowIsDraft = !(record.publishedAt ?? record.published_at)}
+									{@const rowIsViewing = rowVersion === Number(viewingVersion)}
+									{@const rowIsLive = !rowIsDraft && rowVersion === Number(panelPublishedVersion)}
+									{@const rowDateLabel = formatPublishHistoryDate(record)}
+									{@const publishGate = getPublishGateForPanel(panelWidgetId, rowVersion)}
+									<VersionDropdownRow
+										versionLabel={'v' + rowVersion}
+										commitSha={record.commitSha ?? record.commit_sha ?? null}
+										showCommit={debugMode}
+										dateLabel={rowDateLabel}
+										isLive={rowIsLive}
+										isDraft={rowIsDraft}
+										selected={rowIsViewing}
+										busy={isPublishing && publishingWidgetId === panelWidgetId}
+										publishDisabled={!canPublishDraftVersionForPanel(panelWidgetId, rowVersion) || publishGate.disabled}
+										publishDisabledReason={publishGate.disabled ? publishGate.reason : null}
+										setLiveDisabled={isSettingLiveVersion === record.version}
+										onselect={() => {
+											handleWidgetShapeVersionChange(panelWidgetId, `v:${record.version}`);
+										}}
+										onpublish={() => {
+											handleWidgetShapeVersionChange(panelWidgetId, `v:${rowVersion}`, false);
+											runPublishForPanel(panelWidgetId, rowVersion);
+										}}
+										onsetlive={() => {
+											void setLiveVersionForWidget(panelWidgetId, record.version);
+										}}
+									/>
 								{/each}
 							{/if}
 							</div>
@@ -13338,7 +14912,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				</svelte:fragment>
 
 				<svelte:fragment slot="code-generation-status">
-					<div class="generate-code-status-ct flex flex-col gap-2 shrink-0" style="padding: 10px; margin: 0px;">
+					<div class="generate-code-status-ct flex flex-col gap-2 shrink-0 border-b border-gray-200 bg-gray-50" style="padding: 10px; margin: 0px; border-radius: 0;">
 						<div class="flex items-center justify-between gap-2 min-w-0">
 							<div class="generate-code-status-el text-xs flex-1 min-w-0 truncate {ps.lastGenerationFailed ? 'text-red-600' : 'text-gray-500'}">
 								{#if ps.lastGenerationFailed}
@@ -13349,7 +14923,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							</div>
 						</div>
 						{#if ps.lastGenerationFailed}
-							<div class="p-3 bg-red-50 border border-red-200 rounded-lg">
+							<div class="p-3 bg-red-50 border border-red-200" style="border-radius: 0;">
 								<p class="text-xs text-red-700 whitespace-pre-wrap">{ps.lastGenerationError}</p>
 								<div class="flex gap-2 mt-3 justify-center">
 									<Button
@@ -13387,20 +14961,22 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 
 				<svelte:fragment slot="code-generation">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				{@const chatUserHeight = (panelDisplayRevision, Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, (ps.chatContainerHeight > 0 ? ps.chatContainerHeight : CHAT_DEFAULT_HEIGHT))))}
+				{@const chatUserHeight = (panelDisplayRevision, getChatContainerHeightForPanel(panelWidgetId))}
 				<div
 					class="generation-scroll-ct flex flex-col h-full min-h-0 overflow-y-auto border-t border-gray-200"
-					style="padding: 10px;"
-					use:nativeScrollbarPadding={10}
+					style="padding: 0;"
+					use:nativeScrollbarPadding={0}
 					onmousedown={() => { if (!isPanelFocused) focusWidgetPanel(panelWidgetId); }}
 				>
 				{#key panelInstanceKey}
 						<div
-							class="code-generation-chat-host w-full min-h-0"
+							class="code-generation-chat-host w-full min-h-0 {chatUserHeight == null ? 'flex-1' : 'shrink-0'}"
 							data-widget-chat-height={panelWidgetId}
-							style="flex: 1 0 {chatUserHeight}px; min-height: {CHAT_MIN_HEIGHT}px; height: {chatUserHeight}px;"
+							style={chatUserHeight == null
+								? `flex: 1 1 auto; min-height: ${CHAT_MIN_HEIGHT}px;`
+								: `flex: 0 0 ${chatUserHeight}px; min-height: ${CHAT_MIN_HEIGHT}px; height: ${chatUserHeight}px;`}
 						>
-						<Chat class="code-generation-chat w-full h-full"
+						<Chat class="code-generation-chat w-full h-full rounded-none border-0"
 							style="height: 100%; min-height: {CHAT_MIN_HEIGHT}px;"
 							resizeExpandsContainer={true}
 							onMessagesResize={(deltaPx) => handleChatMessagesResize(panelWidgetId, deltaPx)}
@@ -13428,7 +15004,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									autoCodeDetection: false,
 								}
 							}}
-							widgetHeadCommitSha={ps.lastCommitId}
+							widgetHeadCommitSha={resolveViewingCommitShaForPanel(panelWidgetId) || ps.lastCommitId}
 							onSendMessage={(content, attachments) => handleChatSendMessage(content, attachments, panelWidgetId)}
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}
 							onUploadChatFile={handleChatUploadFile}
@@ -13441,7 +15017,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							onSaveMessage={(conversationId, content, messageType, attachments) =>
 								handleSaveMessage(conversationId, content, messageType, attachments, panelWidgetId)
 							}
-							onRestoreCheckpointBackend={handleRestoreCheckpoint}
+							onRestoreCheckpointBackend={(conversationId, checkpointMessageId) =>
+								handleRestoreCheckpoint(conversationId, checkpointMessageId, panelWidgetId)
+							}
 							onChatReady={(methods) => handleChatReady(methods, panelWidgetId)}
 							onDraftChange={() => handleChatDraftChange(panelWidgetId)}
 							onConversationChange={(conversationId) => handleChatConversationChange(conversationId, panelWidgetId)}
@@ -13503,7 +15081,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{#if isEditStepWithoutPublishForPanel(panelWidgetId)}
 				<div class="edit-not-published-banner-ct mx-3 mt-2 px-3 py-2 rounded-md border border-amber-200 bg-amber-50 text-amber-800 text-xs">
 					<strong class="font-semibold">Not published yet.</strong>
-					Generate on Create — the widget publishes automatically so you can edit the composition.
+					Generate on Create, preview the result, then Publish when you are ready.
 				</div>
 				{/if}
 
@@ -13993,11 +15571,46 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				Are you sure you want to delete <strong>"{deleteCanvasTarget?.name || ''}"</strong>? This action cannot be undone.
 			</Dialog.Description>
 		</Dialog.Header>
+
+		{#if deleteCanvasPreviewLoading}
+			<p class="confirm-delete-canvas-preview-loading text-sm text-gray-500 pt-2">
+				Checking what will be deleted…
+			</p>
+		{:else if deleteCanvasPreview && deleteCanvasPreview.widgetCount > 0}
+			<div class="confirm-delete-canvas-preview pt-2">
+				<p class="text-sm text-gray-700">
+					This will also delete
+					<strong>{deleteCanvasPreview.widgetCount}</strong>
+					{deleteCanvasPreview.widgetCount === 1 ? 'widget' : 'widgets'} on this canvas:
+				</p>
+				<ul class="confirm-delete-canvas-preview-groups mt-2 space-y-1.5 max-h-40 overflow-y-auto scrollbar-thin text-sm">
+					{#each deleteCanvasPreview.groups as group}
+						<li class="confirm-delete-canvas-preview-group">
+							<span class="font-medium text-gray-800">{group.projectName}</span>
+							<span class="text-gray-500"> — {group.widgetNames.length}</span>
+							<p class="text-gray-500 text-xs truncate" title={group.widgetNames.join(', ')}>
+								{group.widgetNames.join(', ')}
+							</p>
+						</li>
+					{/each}
+				</ul>
+				{#if deleteCanvasPreview.groups.length > 1}
+					<p class="confirm-delete-canvas-preview-warning text-xs text-amber-700 mt-2">
+						These widgets belong to more than one project.
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		{#if deleteCanvasError}
+			<p class="confirm-delete-canvas-error text-sm text-red-600 pt-2">{deleteCanvasError}</p>
+		{/if}
+
 		<div class="confirm-delete-canvas-dialog-actions flex justify-end gap-2 pt-2">
 			<button
 				type="button"
 				class="px-4 py-2 text-sm rounded-lg border border-gray-300 hover:bg-gray-100 cursor-pointer"
-				onclick={() => { showDeleteCanvasDialog = false; deleteCanvasTarget = null; }}
+				onclick={() => { showDeleteCanvasDialog = false; deleteCanvasTarget = null; deleteCanvasError = ''; }}
 			>Cancel</button>
 			<button
 				type="button"