@widgetic/creator 0.3.58 → 0.3.60

package/dist/CreatorApp.svelte

@@ -147,18 +147,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 +213,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;
@@ -447,6 +463,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';
 
 	// WIDGET DETAILS COMPONENT — lazy-loaded to reduce peak build memory
 	let WidgetDetails: any;
@@ -473,6 +491,10 @@
 
 	let WidgeticCanvas: any;
 	let canvasRef: any;
+	/** HTML iframe overlays over Fabric WidgetShapes (W3). */
+	let widgetShapeLivePreviewsRef: { sync?: () => void } | null = null;
+	/** Selected WidgetShape id for chrome highlight (from Fabric selection). */
+	let canvasSelectedWidgetShapeId: string | null = null;
 	let widgetDetailsModulePromise: Promise<any> | null = null;
 
 	function loadWidgetDetailsModule(): Promise<any> {
@@ -553,6 +575,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 {
@@ -885,7 +919,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 },
 		);
@@ -1480,39 +1517,163 @@
 		// 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. */
+	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;
+			if (liveById?.contentWindow) return liveById;
+		}
+		return (
+			(document.querySelector(
+				'iframe.widget-shape-live-preview-iframe',
+			) as HTMLIFrameElement | null) || 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;
+				// Prefer replies from this iframe when source is available
+				if (event.source && 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();
+		}
+	}
+
+	/** Screenshot: capture the live WidgetShape iframe (CDN or Worker), not Fabric wireframe. */
+	async function handleChatScreenshot(widgetId?: string | null): Promise<string | null> {
+		const targetId = widgetId || focusedPanelWidgetId || selectedWidgetId;
+		if (!targetId) {
+			console.warn('[Chat→Screenshot] No widget id');
+			return null;
+		}
+
+		const liveIframe = resolveLiveWidgetShapeIframe(targetId);
+		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);
+		}
+
+		// 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[] {
@@ -1601,6 +1762,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 [];
@@ -1664,7 +1827,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: {
@@ -1688,7 +1861,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;
 		}
 	}
 
@@ -1805,6 +1979,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;
@@ -1860,7 +2039,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');
@@ -1877,16 +2060,22 @@
 			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) {
 				if (targetCommit) {
 					lastCommitId = targetCommit;
+					if (panelWidgetId) {
+						patchPanelSnapshot(panelWidgetId, { lastCommitId: targetCommit });
+						patchCodegenUiState(panelWidgetId, {});
+					}
 				}
 				showToast('success', undoMode ? 'Change undone' : 'Checkpoint restored', {
 					description: undoMode
@@ -1900,20 +2089,27 @@
 				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;
+				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);
@@ -1936,14 +2132,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;
 		}
 	}
@@ -2118,14 +2316,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));
 	}
 
@@ -2133,9 +2332,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 });
 	}
 
@@ -2288,6 +2490,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);
@@ -2457,6 +2664,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 {
@@ -2755,7 +2965,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;
 			}
 		}
@@ -3878,63 +4087,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 || '' }
 		}));
 	}
 
@@ -3948,10 +4256,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) {
@@ -3961,7 +4278,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
@@ -3970,7 +4313,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);
@@ -3984,6 +4331,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;
@@ -4436,12 +4789,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;
@@ -4474,6 +4861,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
@@ -4577,10 +4974,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;
 				}
@@ -4597,10 +5000,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);
@@ -4670,6 +5079,11 @@
 		sessionCanvasId = entry.id;
 		activeCanvasName = entry.name;
 		saveSelectedCanvasId(canvasId);
+		// 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 = [];
@@ -4687,6 +5101,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;
@@ -4873,7 +5302,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 }
 			});
@@ -4986,16 +5423,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;
@@ -5011,6 +5483,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;
 	}
@@ -5080,15 +5556,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);
@@ -5355,6 +5855,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',
@@ -5365,8 +5876,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]),
@@ -5388,9 +5912,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);
@@ -5399,8 +5940,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') {
@@ -5414,6 +5955,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.
@@ -5430,20 +6049,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(
@@ -5460,11 +6103,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.
@@ -5472,70 +6110,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;
 			}
 
@@ -5545,47 +6192,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;
@@ -6138,6 +6790,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) {
@@ -6332,26 +6989,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', {
@@ -6861,7 +7529,8 @@
 					const shapeDataUrl = canvasRef?.getWidgetShapeDataUrl?.(widgetId);
 					if (shapeDataUrl && canvasRef) {
 						canvasRef.updateWidgetImage(widgetId, shapeDataUrl);
-						void persistWidgetListThumbnail(widgetId, shapeDataUrl);
+						// Do NOT persist Fabric placeholder/icon as project-list thumbnail —
+						// only iframe screenshots (below) represent the real widget.
 					} else {
 						// console.log('[handleRefreshScreenshot] Skip quiet capture — panel closed:', widgetId.substring(0, 8));
 					}
@@ -7654,37 +8323,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 {
@@ -8127,22 +8808,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();
@@ -8434,6 +9114,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;
 		}
@@ -8463,13 +9147,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;
 		}
 	}
 
@@ -8609,13 +9302,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>();
@@ -8711,7 +9406,7 @@ Requirements:
 			compositionSchemasLoading,
 			compositionSchemasError,
 			schemaLoadStartedAt: focusedSnap?.schemaLoadStartedAt ?? null,
-			chatContainerHeight: focusedSnap?.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
+			chatContainerHeight: focusedSnap?.chatContainerHeight ?? 0,
 			panelPreviewCompileError: focusedSnap?.panelPreviewCompileError ?? null,
 		};
 	}
@@ -8777,7 +9472,7 @@ Requirements:
 			compositionSchemasLoading: false,
 			compositionSchemasError: null,
 			schemaLoadStartedAt: null,
-			chatContainerHeight: 550,
+			chatContainerHeight: 0,
 			panelPreviewCompileError: null,
 		};
 	}
@@ -8833,7 +9528,7 @@ Requirements:
 					: livePublishMatchesPanel
 						? live.publishHistoryResolvedForWidgetId
 						: snap.publishHistoryResolvedForWidgetId,
-				chatContainerHeight: snap.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
+				chatContainerHeight: snap.chatContainerHeight ?? 0,
 				compositionDesignSchema: resolvedDesignSchema,
 				compositionContentSchema: resolvedContentSchema,
 				compositionSchemasLoading: schemaLoading,
@@ -8851,7 +9546,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,
@@ -8996,6 +9691,247 @@ Requirements:
 		return resolvePublishedWidgetUrl(widgetId, version, jsPath);
 	}
 
+	/** Widget Builder origin for canvas shape iframes (mirrors WidgetDetails). */
+	function widgetBuilderPreviewBaseUrl(): string {
+		const publicBase = (
+			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.
+	 * Source: 'live' | 'preview' | 'v:{N}' (historical published version).
+	 * Publish history is loaded without requiring chat to be open.
+	 */
+	let shapePreviewSourceByWidgetId: Record<string, string> = {};
+	let shapePublishHistoryByWidgetId: Record<string, any[]> = {};
+	let shapeHistoryLoadInFlight: Record<string, boolean> = {};
+
+	async function ensureShapePublishHistory(widgetId: string): Promise<void> {
+		if (!widgetId || shapeHistoryLoadInFlight[widgetId]) return;
+		const cached = shapePublishHistoryByWidgetId[widgetId];
+		if (cached && cached.length > 0) return;
+		const fromPanel = getPanelDisplayState(widgetId).publishHistory;
+		if (fromPanel && fromPanel.length > 0) {
+			shapePublishHistoryByWidgetId = {
+				...shapePublishHistoryByWidgetId,
+				[widgetId]: [...fromPanel],
+			};
+			return;
+		}
+		shapeHistoryLoadInFlight = { ...shapeHistoryLoadInFlight, [widgetId]: true };
+		try {
+			await loadPublishHistoryForPanel(widgetId, { silent: true });
+			const history = getPanelDisplayState(widgetId).publishHistory || [];
+			shapePublishHistoryByWidgetId = {
+				...shapePublishHistoryByWidgetId,
+				[widgetId]: [...history],
+			};
+			syncWidgetShapeLivePreviews();
+		} finally {
+			const { [widgetId]: _, ...rest } = shapeHistoryLoadInFlight;
+			shapeHistoryLoadInFlight = rest;
+		}
+	}
+
+	function getShapePublishHistory(widgetId: string): any[] {
+		const cached = shapePublishHistoryByWidgetId[widgetId];
+		if (cached?.length) 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,
+				);
+				const artifact =
+					record?.artifactUrl ||
+					record?.artifact_url ||
+					(version === ps.lastPublishedVersion ? ps.selectedWidgetJsPath : null);
+				const url = resolvePublishedWidgetUrl(widgetId, version, artifact ?? null);
+				if (url) return url;
+			}
+		}
+
+		// 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 && source !== 'preview') return published;
+		return workerUrl;
+	}
+
+	function resolveWidgetShapeVersionLabel(widgetId: string): string | null {
+		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
+		const ps = getPanelDisplayState(widgetId);
+		const liveVersion =
+			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
+		if (source.startsWith('v:')) {
+			const version = source.slice(2);
+			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;
+	}> | null {
+		const ps = getPanelDisplayState(widgetId);
+		const liveVersion =
+			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
+		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;
+		}> = [];
+		for (const record of history) {
+			const version = Number(record.version);
+			if (!Number.isFinite(version)) continue;
+			options.push({
+				id: `v:${version}`,
+				label: `Version ${version}`,
+				shortLabel: `v${version}`,
+				dateLabel: formatPublishHistoryDate(record),
+				isLive: version === liveVersion,
+			});
+		}
+		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
+		if (history.length === 0 && liveVersion != null) {
+			void ensureShapePublishHistory(widgetId);
+		}
+		return options.length > 0 ? options : null;
+	}
+
+	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): void {
+		if (!versionId) return;
+		shapePreviewSourceByWidgetId = {
+			...shapePreviewSourceByWidgetId,
+			[widgetId]: versionId,
+		};
+		syncWidgetShapeLivePreviews();
+		panelDisplayRevision += 1;
+		console.log('[WidgetShape] Preview source →', versionId, widgetId.substring(0, 8));
+	}
+
+	/** 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);
+		}
+	}
+
 	function getPanelEmbedPreviewUrl(widgetId: string): string | null {
 		const base = getPanelEditPreviewUrl(widgetId);
 		if (!base) return null;
@@ -9333,6 +10269,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),
@@ -9928,6 +10867,8 @@ Requirements:
 
 	function hasUnpublishedChangesForPanel(widgetId: string): boolean {
 		const ps = getPanelDisplayState(widgetId);
+		if (ps.pendingPublishAfterCodegen) return true;
+		const pendingSha = loadPendingPublishShaForWidget(widgetId);
 		const headSha = resolvePublishHeadCommitId(widgetId, ps);
 		if (!headSha || ps.lastPublishedVersion === null) return false;
 
@@ -9935,6 +10876,7 @@ Requirements:
 			getLivePublishedCommitShaForPanel(widgetId)
 			?? getWidgetLastPublishCommitSha(widgetId);
 		if (!liveSha) return false;
+		if (pendingSha && !commitsMatch(pendingSha, liveSha)) return true;
 
 		return !commitsMatch(headSha, liveSha);
 	}
@@ -10375,6 +11317,10 @@ async function loadPublishHistoryForPanel(widgetId: string, opts: { silent?: boo
 			publishHistoryResolved: true,
 			publishHistoryResolvedForWidgetId: widgetId,
 		});
+		shapePublishHistoryByWidgetId = {
+			...shapePublishHistoryByWidgetId,
+			[widgetId]: [...history],
+		};
 		if (widgetId === focusedPanelWidgetId) {
 			publishHistory = history;
 			publishHistoryResolved = true;
@@ -10417,8 +11363,8 @@ 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.
  */
-async function setLiveVersion(version: number) {
-	if (!selectedWidgetId || !$userSession?.jwt) return;
+async function setLiveVersionForWidget(widgetId: string, version: number) {
+	if (!widgetId || !$userSession?.jwt) return;
 
 	isSettingLiveVersion = version;
 	if (!widgetsClient) {
@@ -10428,12 +11374,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
@@ -10441,15 +11387,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) {
@@ -10460,6 +11414,11 @@ async function setLiveVersion(version: number) {
 	}
 }
 
+async function setLiveVersion(version: number) {
+	if (!selectedWidgetId) return;
+	await setLiveVersionForWidget(selectedWidgetId, version);
+}
+
 /** Toggle publish history panel — reloads data on every open */
 function togglePublishHistory(triggerEl?: HTMLElement | null) {
 	isHistoryOpen = !isHistoryOpen;
@@ -11018,18 +11977,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) {
@@ -11261,6 +12212,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);
@@ -11298,6 +12253,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			if (selectedWidget?.id && !didForceCreateNewWidget) {
 				placeSelectedWidgetShapeOnCanvas();
 			}
+			syncWidgetShapeLivePreviews();
 			return;
 		}
 		const { loaded, widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
@@ -11306,18 +12262,21 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			if (!isCanvasStateLoaded) {
 				scheduleCanvasHydrateRetry('canvas ready before canvasId');
 			}
+			syncWidgetShapeLivePreviews();
 			return;
 		}
 		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();
 	}
 
 	/**
@@ -11591,14 +12550,20 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	let autosaveSequence = 0;
 	let lastResolvedAutosaveSequence = 0;
 
-	async function handleCanvasAutoSave(json: string | null, isUnmountSave = false) {
+	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)'
 			// );
@@ -11606,7 +12571,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		}
 
 		// Guard: skip autosaves triggered by loadCanvas() object:added events
-		if (isLoadCooldownActive && !isUnmountSave) {
+		if (!force && isLoadCooldownActive && !isUnmountSave) {
 			// console.log('[CanvasDebug] Skipping autosave — load cooldown active (prevents overwriting freshly loaded data)');
 			return;
 		}
@@ -11629,11 +12594,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
@@ -11670,12 +12641,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();
@@ -12019,6 +13003,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)
@@ -12457,13 +13503,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">
@@ -12548,9 +13595,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()) {
@@ -12574,6 +13623,44 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	<!-- FLOATING PANELS OVERLAY (pointer-events-none container, each panel is pointer-events-auto) -->
 		<div class="floating-panels-overlay absolute inset-0 z-2003 pointer-events-none">
 
+			<!-- W3: live iframe + drag bar on WidgetShapes (iframe interactive; body drag locked) -->
+			<WidgetShapeLivePreviews
+				bind:this={widgetShapeLivePreviewsRef}
+				getRects={() => canvasRef?.listWidgetShapeScreenRects?.() ?? []}
+				resolveUrl={resolveWidgetShapeLivePreviewUrl}
+				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)}
+				resolveIsPublishing={(widgetId) => isPublishing && publishingWidgetId === widgetId}
+				onPublish={(widgetId) => runPublishForPanel(widgetId)}
+				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={(widgetId) => {
+					console.log('[WidgetShape] Iframe refreshed', widgetId.substring(0, 8));
+				}}
+			/>
+
 			<!-- ═══ PANEL 2: Widgets Panel — debug + showWidgetsList (site passes false) ═══ -->
 			{#if debugMode && showWidgetsList}
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -13167,9 +14254,32 @@ $: 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">
+				{@const shapeSource = shapePreviewSourceByWidgetId[panelWidgetId] || `v:${ps.lastPublishedVersion}`}
+				{@const viewingVersion = shapeSource.startsWith('v:')
+					? parseInt(shapeSource.slice(2), 10)
+					: ps.lastPublishedVersion}
+				{@const viewingIsLive = Number(viewingVersion) === Number(ps.lastPublishedVersion)}
+				<div class="wc-version-history-ct relative shrink-0 flex items-center gap-0.5">
+					<HoverTooltip text="Live is the version visitors see on your website. Open the list to preview another version, or Set live to publish it.">
 					<button
 						type="button"
 						onclick={(e) => {
@@ -13177,11 +14287,48 @@ $: 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 : ps.lastPublishedVersion}
 						<span class="text-emerald-500">{isHistoryOpen && isPanelFocused ? '▲' : '▼'}</span>
 					</button>
+					</HoverTooltip>
+					{#if panelHasUnpublishedChanges}
+						<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}
+						<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
@@ -13200,38 +14347,49 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								<p class="text-xs text-emerald-400 text-center py-2">No history records yet. 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>
+									{@const rowIsViewing = Number(record.version) === Number(viewingVersion)}
+									{@const rowIsLive = Number(record.version) === Number(ps.lastPublishedVersion)}
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
+									<div
+										class="publish-history-row flex items-center gap-2 rounded border px-2 py-1.5 w-max cursor-pointer
+											{rowIsViewing ? 'border-emerald-400 bg-emerald-50' : 'border-emerald-100 bg-white hover:bg-emerald-50/60'}"
+										role="option"
+										aria-selected={rowIsViewing}
+										tabindex="0"
+										onclick={() => {
+											handleWidgetShapeVersionChange(panelWidgetId, `v:${record.version}`);
+										}}
+										onkeydown={(e) => {
+											if (e.key === 'Enter' || e.key === ' ') {
+												e.preventDefault();
+												handleWidgetShapeVersionChange(panelWidgetId, `v:${record.version}`);
+											}
+										}}
+									>
+										<span class="publish-history-version-label 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}`;
-											})()}
+											{formatPublishHistoryDate(record)}
 										</span>
-										{#if record.version !== ps.lastPublishedVersion}
+										{#if !rowIsLive}
 											<button
-												onclick={() => { void setLiveVersion(record.version); }}
+												type="button"
+												onclick={(e) => {
+													e.stopPropagation();
+													void setLiveVersionForWidget(panelWidgetId, 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"
+												title="Publish this version so visitors see it on your website"
 											>
 												{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>
+											<span 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">live</span>
 										{/if}
 									</div>
 								{/each}
@@ -13269,7 +14427,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}
@@ -13280,7 +14438,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
@@ -13318,20 +14476,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)}
@@ -13359,7 +14519,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}
@@ -13372,7 +14532,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)}
@@ -13434,7 +14596,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}
 
@@ -13924,11 +15086,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"