@widgetic/creator 0.3.66 → 0.3.68

package/dist/CreatorApp.svelte

@@ -29,7 +29,6 @@
 	} from '@widgetic/api-sdk';
 	import type {
 		Middleware,
-		UpdateComposition,
 		GenerateCodeRequest,
 		AgentModelsGet200ResponseModelsInner
 	} from '@widgetic/api-sdk';
@@ -500,6 +499,7 @@
 
 	// Chat module for code generation conversation UI
 	import { Chat, ContextType } from '@widgetic/chat';
+	import type { ClarificationSuggestion } from '@widgetic/chat';
 
 	// Eagerly initiate canvas chunk fetching at script evaluation (parallel with DOM parsing)
 	const canvasModulePromise = typeof window !== 'undefined' ? import('@widgetic/canvas') : null;
@@ -529,10 +529,13 @@
 	onMount(async () => {
 		if (canvasModulePromise) {
 			const canvasModule = await canvasModulePromise;
+			// Installed before the canvas mounts so the first save already externalizes
+			installCanvasThumbnailStore(canvasModule);
 			WidgeticCanvas = canvasModule.Canvas;
 		}
 		installLongTaskFreezeReporter();
 		installFreezeWatchdog();
+		console.info('[FreezeWatchdog] Freeze reports log on this page. In DevTools, pick the top frame — not a widget iframe.');
 	});
 
 	/**
@@ -590,7 +593,10 @@
 		saveWidgetDraft,
 		readWidgetDraft,
 		deleteWidgetDraft,
-		copyWidgetDraft
+		copyWidgetDraft,
+		saveShapeThumbnail,
+		readShapeThumbnail,
+		canPersistShapeThumbnails
 	} from './utils/creatorDraftStorage';
 
 	/**
@@ -866,6 +872,21 @@
 	function isAnyWidgetGenerating(): boolean {
 		return isGeneratingCode || Object.keys(generatingWidgetIds).some((id) => generatingWidgetIds[id]);
 	}
+
+	/** Synchronous hold so a screenshot cannot postMessage after codegen has started. */
+	function noteCodegenActive(active: boolean): void {
+		if (typeof window === 'undefined') return;
+		const holder = window as Window & { __widgeticCodegenCount?: number };
+		holder.__widgeticCodegenCount = Math.max(0, (holder.__widgeticCodegenCount || 0) + (active ? 1 : -1));
+	}
+
+	function codegenCaptureBlocked(): boolean {
+		if (typeof window !== 'undefined' && ((window as Window & { __widgeticCodegenCount?: number }).__widgeticCodegenCount || 0) > 0) {
+			return true;
+		}
+		if (isAnyWidgetGenerating()) return true;
+		return /generating code|saving to repository/i.test(generateCodeStatus || '');
+	}
 	const widgetAbortControllers = new Map<string, AbortController>();
 	let currentGenerationOperationId: string | null = null;
 	let generateCodeStatus: string | null = null;
@@ -900,7 +921,7 @@
 	// Chat component reference and context (focused panel)
 	let chatMethods: {
 		sendMessage: (content: string, attachments?: File[]) => Promise<void>;
-		addAssistantMessage: (content: string, skipPersist?: boolean, suggestions?: string[]) => void;
+		addAssistantMessage: (content: string, skipPersist?: boolean, suggestions?: ClarificationSuggestion[]) => void;
 		addUserMessage: (content: string, attachments?: Array<{ id: string; url: string; file_type: string; file_name: string }>) => void;
 		getConversationId: () => string | null;
 		addImageAttachment?: (dataUrl: string, fileName?: string) => void;
@@ -1036,7 +1057,7 @@
 			fileSize?: number;
 		}>,
 		sourceWidgetId?: string,
-		sendOptions?: { skipIntentGate?: boolean },
+		sendOptions?: { skipIntentGate?: boolean; chipIntent?: ClarificationSuggestion['intent'] },
 	) {
 		const widgetId = sourceWidgetId ?? selectedWidgetId;
 		if (!widgetId) return;
@@ -1160,6 +1181,7 @@
 			promptImagesOverride: effectivePromptImages.length > 0 ? effectivePromptImages : undefined,
 			persistFileAttachments: persistFileAttachments.length > 0 ? persistFileAttachments : undefined,
 			skipIntentGate: sendOptions?.skipIntentGate === true,
+			chipIntent: sendOptions?.chipIntent,
 		});
 	}
 
@@ -1410,6 +1432,76 @@
 		return dataUrls.slice(0, 1);
 	}
 
+	/**
+	 * Keeps widget screenshots out of the canvas JSON.
+	 *
+	 * Fabric serialized each widget shape's screenshot inline as base64, so an
+	 * autosave stringified megabytes of image data and wrote it three times over —
+	 * the main-thread block the freeze reports kept naming. The canvas now stores a
+	 * reference and asks for the bytes back through this store: the local copy
+	 * first, then the widget's persisted thumbnail so a fresh browser still paints
+	 * the shape.
+	 */
+	function installCanvasThumbnailStore(canvasModule: any): void {
+		if (typeof canvasModule?.setShapeImageStore !== 'function') return;
+		canvasModule.setShapeImageStore({
+			save(ref: string, dataUrl: string) {
+				// Refusing here tells the canvas to keep the bytes inline, so a save
+				// before the owner is known cannot drop a screenshot on the floor.
+				if (!canPersistShapeThumbnails()) throw new Error('No cache owner yet');
+				saveShapeThumbnail(ref, dataUrl);
+			},
+			async load(ref: string): Promise<string | null> {
+				const local = await readShapeThumbnail(ref);
+				if (local) return local;
+				const widgetId = ref.startsWith('widget:') ? ref.slice('widget:'.length) : null;
+				if (!widgetId) return null;
+				return await waitForWidgetThumbnailUrl(widgetId);
+			}
+		});
+	}
+
+	/**
+	 * The canvas often loads before the widget list does, so a reference with no
+	 * local copy has nothing to resolve to yet. Give the list a few seconds to
+	 * arrive rather than leaving the shape blank until the next screenshot.
+	 */
+	async function waitForWidgetThumbnailUrl(widgetId: string): Promise<string | null> {
+		for (let attempt = 0; attempt < 12; attempt++) {
+			const widget = getWidgetById(widgetId) as any;
+			const url = widget?.thumbnailUrl || widget?.thumbnail_url;
+			if (url) return url;
+			// The canvas widget list is slim and often omits the thumbnail, so ask the
+			// API for this one widget rather than leaving the shape blank.
+			if (widget) return await fetchWidgetThumbnailUrl(widgetId);
+			await new Promise((resolve) => setTimeout(resolve, 500));
+		}
+		return null;
+	}
+
+	/** One-widget lookup for the persisted thumbnail, cached per widget. */
+	const thumbnailUrlRequests = new Map<string, Promise<string | null>>();
+
+	function fetchWidgetThumbnailUrl(widgetId: string): Promise<string | null> {
+		const pending = thumbnailUrlRequests.get(widgetId);
+		if (pending) return pending;
+		const request = (async () => {
+			if (!widgetsClient) return null;
+			try {
+				const response = (await widgetsClient.getWidgetsBatch({
+					getWidgetsBatchRequest: { widgetIds: [widgetId] }
+				})) as { widgets?: any[]; data?: { widgets?: any[] } };
+				const fetched = (response?.widgets ?? response?.data?.widgets ?? [])[0];
+				return fetched?.thumbnailUrl ?? fetched?.thumbnail_url ?? null;
+			} catch (error) {
+				console.warn('[CreatorApp] thumbnail lookup failed', widgetId.slice(0, 8), error);
+				return null;
+			}
+		})();
+		thumbnailUrlRequests.set(widgetId, request);
+		return request;
+	}
+
 	async function persistWidgetListThumbnail(widgetId: string, imageDataUrl: string, isCurrent = () => true): Promise<void> {
 		if (!widgetsClient || !widgetId || !imageDataUrl || !isCurrent()) return;
 		try {
@@ -1551,6 +1643,7 @@
 					buildUserPromptMessageContent(prompt),
 					'user',
 					persistAttachments.length > 0 ? persistAttachments : undefined,
+					undefined,
 					widgetId,
 				);
 				const savedAtt = saved?.attachments || saved?.data?.attachments || [];
@@ -1651,32 +1744,46 @@
 		iframe: HTMLIFrameElement,
 		timeoutMs = 6000,
 	): Promise<{ data: string | null; error: string | null }> {
-		if (isAnyWidgetGenerating()) {
+		if (codegenCaptureBlocked()) {
 			return Promise.resolve({ data: null, error: 'generation in progress' });
 		}
+		const captureEpoch = screenshotGenerationEpoch;
 		return new Promise((resolve) => {
 			if (!iframe.contentWindow) {
 				resolve({ data: null, error: 'no-content-window' });
 				return;
 			}
-			const timeout = setTimeout(() => {
+			const finish = (result: { data: string | null; error: string | null }) => {
 				window.removeEventListener('message', handler);
-				resolve({ data: null, error: 'timeout' });
+				clearTimeout(timeout);
+				if (captureEpoch !== screenshotGenerationEpoch || isAnyWidgetGenerating()) {
+					resolve({ data: null, error: 'generation in progress' });
+					return;
+				}
+				resolve(result);
+			};
+			const timeout = setTimeout(() => {
+				finish({ data: null, error: 'timeout' });
 			}, timeoutMs);
 
 			function handler(event: MessageEvent) {
 				if (event.data?.type !== 'widgetic:screenshot') return;
-				// Ignore other widgets and synthetic replies with no source window.
 				if (event.source !== iframe.contentWindow) return;
-				clearTimeout(timeout);
-				window.removeEventListener('message', handler);
-				resolve({
+				finish({
 					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' }, '*');
+			try {
+				if (codegenCaptureBlocked()) {
+					finish({ data: null, error: 'generation in progress' });
+					return;
+				}
+				iframe.contentWindow.postMessage({ type: 'widgetic:request-screenshot' }, '*');
+			} catch (err) {
+				finish({ data: null, error: err instanceof Error ? err.message : 'postMessage failed' });
+			}
 		});
 	}
 
@@ -1689,7 +1796,7 @@
 		// startup on the main thread this page shares with it, and the capture that
 		// follows is refused during a generation anyway (`requestIframeScreenshot`),
 		// so the whole path is skipped rather than paying the load for nothing.
-		if (isAnyWidgetGenerating()) {
+		if (codegenCaptureBlocked()) {
 			console.log('[Chat→Screenshot] Skip hidden Worker capture — codegen in progress', widgetId?.substring(0, 8));
 			return null;
 		}
@@ -1741,14 +1848,14 @@
 
 	/** Explicit Refresh only: capture the loaded frame without opening a panel or publishing. */
 	async function handleWidgetShapeRefresh(widgetId, iframe, isCurrentFrame) {
-		if (isAnyWidgetGenerating()) return;
+		if (codegenCaptureBlocked()) return;
 		const capturedCanvasId = getEffectiveCanvasId();
 		const capturedCanvas = canvasRef;
 		const capturedSource = shapePreviewSourceByWidgetId[widgetId] || 'live';
 		// Frame/intent identity owns this capture, not focused-panel HEAD hydration
 		// or another widget's global generation operation.
 		const isCurrent = () => isCurrentFrame() && !!getWidgetById(widgetId)
-			&& !isDraftConvertId(widgetId) && !generatingWidgetIds[widgetId] && !isAnyWidgetGenerating()
+			&& !isDraftConvertId(widgetId) && !generatingWidgetIds[widgetId] && !codegenCaptureBlocked()
 			&& capturedCanvasId === getEffectiveCanvasId() && capturedCanvas === canvasRef
 			&& capturedSource === (shapePreviewSourceByWidgetId[widgetId] || 'live')
 			&& resolveLiveWidgetShapeIframe(widgetId) === iframe;
@@ -1779,7 +1886,7 @@
 		}
 		// Never run background / refresh screenshot captures while code generation is running —
 		// html2canvas inside any same-origin iframe freezes the browser main thread.
-		if ((quiet || requiredIframe != null) && isAnyWidgetGenerating()) {
+		if (codegenCaptureBlocked()) {
 			console.log('[Chat→Screenshot] Skip capture — generation in progress');
 			return null;
 		}
@@ -1807,6 +1914,10 @@
 
 		// 1) Always try the visible live iframe first (published HTML from Worker includes screenshot script)
 		if (liveIframe?.contentWindow) {
+			if (codegenCaptureBlocked()) {
+				console.log('[Chat→Screenshot] Skip live capture — codegen in progress', targetId.substring(0, 8));
+				return null;
+			}
 			console.log('[Chat→Screenshot] Live WidgetShape iframe', {
 				targetId: targetId.substring(0, 8),
 				isWorker: isWorkerPreviewUrl(liveSrc),
@@ -1975,7 +2086,14 @@
 				messageContent: m.message_content || m.messageContent || '',
 				messageType: m.message_type || m.messageType || 'user',
 				attachments,
+				// Suggestion chips from a persisted clarification card — restored
+				// on reload exactly as they were served.
+				suggestions: Array.isArray(m.suggestions) && m.suggestions.length > 0 ? m.suggestions : undefined,
 				isCommit: m.is_commit || m.isCommit || false,
+				// What the turn shipped, in the commit's own words — persisted beside
+				// is_commit by the codegen pipeline and rendered on the turn's commit
+				// chrome (the surface that survives a reload).
+				commitTitle: m.commit_title || m.commitTitle || undefined,
 				userId: m.user_id || m.userId || '',
 				createdAt: new Date(m.created_at || m.createdAt),
 				updatedAt: new Date(m.updated_at || m.updatedAt || m.created_at || m.createdAt),
@@ -2148,6 +2266,7 @@
 			file_size?: number | null;
 			display_order?: number;
 		}>,
+		suggestions?: ClarificationSuggestion[],
 		persistWidgetId?: string | null,
 	): Promise<any> {
 		try {
@@ -2183,25 +2302,39 @@
 				user_id: userId,
 				is_commit: false,
 				attachments: apiAttachments.length > 0 ? apiAttachments : undefined,
+				// Clarification-card suggestions ride the same write as the reply
+				// they belong to, so a reload re-renders the card with its chips.
+				...(suggestions && suggestions.length > 0 ? { suggestions } : {}),
 			};
-			try {
+			const persistMessage = async (payload: typeof createPayload) => {
 				const response = await messagesClient.createMessageRaw({
 					conversationId,
-					createMessageRequest: createPayload,
+					createMessageRequest: payload,
 				});
 				const json = await response.raw.json();
-				// console.log('[Chat→Backend] Saved message to conversation:', conversationId);
 				const saved = json?.data || json;
 				const savedAtt = saved?.attachments;
 				return {
 					...saved,
-					attachments: (Array.isArray(savedAtt) && savedAtt.length > 0) ? savedAtt : apiAttachments,
+					attachments: (Array.isArray(savedAtt) && savedAtt.length > 0) ? savedAtt : (payload.attachments || []),
 				};
+			};
+			try {
+				return await persistMessage(createPayload);
 			} catch (withAttachmentsError) {
-				console.error(
-					'[Chat→Backend] Save with attachments failed — not falling back to text-only:',
-					withAttachmentsError,
-				);
+				if (apiAttachments.length > 0) {
+					console.warn(
+						'[Chat-Backend] Save with attachments failed — retrying text-only so the turn is not lost:',
+						withAttachmentsError,
+					);
+					try {
+						return await persistMessage({ ...createPayload, attachments: undefined });
+					} catch (textOnlyError) {
+						console.error('[Chat-Backend] Text-only message save also failed:', textOnlyError);
+						throw textOnlyError;
+					}
+				}
+				console.error('[Chat-Backend] Message save failed:', withAttachmentsError);
 				throw withAttachmentsError;
 			}
 		} catch (error) {
@@ -2242,34 +2375,47 @@
 				null;
 			// console.log('[Chat→Backend] Git rollback result:', gitRollback, { undoMode, targetCommit, panelWidgetId });
 			if (gitRollback?.success) {
-				// Fast path: a recorded version at this commit has an immutable cached
-				// artifact — reuse it instead of the forced repo rebuild + retry ladder.
-				let previewFromVersionCache = false;
-				if (targetCommit) {
-					lastCommitId = targetCommit;
-					if (panelWidgetId) {
-						patchPanelSnapshot(panelWidgetId, { lastCommitId: targetCommit });
-						patchCodegenUiState(panelWidgetId, {});
-						// Message-extracted SHAs may be short (7+ chars); compare by prefix.
-						const targetSha = String(targetCommit).toLowerCase();
-						const matchedVersion = (resolveWidgetShapeVersionOptions(panelWidgetId) ?? [])
-							.find((option) => {
-								const optionSha = String(option.commitSha ?? '').toLowerCase();
-								return optionSha.length >= 7 && targetSha.length >= 7
-									&& (optionSha === targetSha || optionSha.startsWith(targetSha) || targetSha.startsWith(optionSha));
-							});
-						if (matchedVersion) {
-							shapeVersionPreviewErrorsByKey = { ...shapeVersionPreviewErrorsByKey, [`${panelWidgetId}:v:${matchedVersion.id.slice(2)}`]: null };
-							shapePreviewSourceByWidgetId = { ...shapePreviewSourceByWidgetId, [panelWidgetId]: matchedVersion.id };
-							handleWidgetShapeVersionChange(panelWidgetId, matchedVersion.id);
-							previewFromVersionCache = true;
+				// Restore changes Git HEAD (often a new rollback commit). Never reuse a
+				// published CDN artifact — that is Switch Version, and it hid the rebuild.
+				const rollbackHeadSha =
+					gitRollback.commitId ?? gitRollback.commit_id ?? targetCommit ?? null;
+				const historicalSha = targetCommit || rollbackHeadSha;
+				if (panelWidgetId) {
+					if (rollbackHeadSha) {
+						lastCommitId = rollbackHeadSha;
+						saveCommitIdForWidget(panelWidgetId, rollbackHeadSha);
+						patchPanelSnapshot(panelWidgetId, { lastCommitId: rollbackHeadSha });
+						patchCodegenUiState(panelWidgetId, { lastCommitId: rollbackHeadSha });
+					}
+					const targetSha = String(historicalSha || '').toLowerCase();
+					const matchedVersion = (resolveWidgetShapeVersionOptions(panelWidgetId) ?? [])
+						.find((option) => {
+							const optionSha = String(option.commitSha ?? '').toLowerCase();
+							return optionSha.length >= 7 && targetSha.length >= 7
+								&& (optionSha === targetSha || optionSha.startsWith(targetSha) || targetSha.startsWith(optionSha));
+						});
+					if (matchedVersion?.id?.startsWith('v:')) {
+						const restoredVersion = parseInt(matchedVersion.id.slice(2), 10);
+						if (Number.isFinite(restoredVersion)) {
+							restoredViewingVersionByWidgetId = {
+								...restoredViewingVersionByWidgetId,
+								[panelWidgetId]: restoredVersion,
+							};
+							widgetShapeLivePreviewsRef?.setSelectedVersion?.(panelWidgetId, `v:${restoredVersion}`);
 						}
 					}
+					shapePreviewSourceByWidgetId = {
+						...shapePreviewSourceByWidgetId,
+						[panelWidgetId]: 'preview',
+					};
+					getWidgetDetailsRef(panelWidgetId)?.clearCodegenPreviewFresh?.();
+					syncWidgetShapeLivePreviews();
+					panelDisplayRevision += 1;
 				}
 				showToast('success', undoMode ? 'Change undone' : 'Checkpoint restored', {
 					description: undoMode
-						? `Code reverted to commit ${formatCommitShaShort(targetCommit)}. Refreshing preview…`
-						: `Widget code at commit ${formatCommitShaShort(targetCommit)}. Refreshing preview…`,
+						? `Code reverted to commit ${formatCommitShaShort(historicalSha)}. Refreshing preview…`
+						: `Widget code at commit ${formatCommitShaShort(historicalSha)}. Refreshing preview…`,
 					duration: 6000,
 				});
 				liveDesignValues = {};
@@ -2278,18 +2424,12 @@
 				compositionDesignSchema = null;
 				compositionContentSchema = null;
 				pendingCreatePreviewDefaultsWidgetId = null;
-				_isRestoringCheckpoint = !previewFromVersionCache;
-				if (previewFromVersionCache) {
-					// Immutable artifact already serves the preview; no rebuild ladder.
-					syncWidgetShapeLivePreviews();
-					setTimeout(() => handleRefreshScreenshot(panelWidgetId, { quiet: true }), 2000);
-					return { ...data, previewFromVersionCache };
-				}
+				_isRestoringCheckpoint = true;
 				const panelRef = panelWidgetId ? getWidgetDetailsRef(panelWidgetId) : widgetDetails;
 				const scheduleBuildRetry = async () => {
-					const delays = [2500, 5000, 8000];
+					const delays = [400, 2500, 5000, 8000];
 					for (let i = 0; i < delays.length; i++) {
-						await new Promise((r) => setTimeout(r, delays[i]));
+						if (i > 0) await new Promise((r) => setTimeout(r, delays[i]));
 						if (i === 0) suppressNextBuildFromRepoChatMessage = true;
 						try {
 							const activeRef = panelWidgetId ? getWidgetDetailsRef(panelWidgetId) : panelRef;
@@ -2303,7 +2443,9 @@
 										[panelWidgetId]: 'preview',
 									};
 									syncWidgetShapeLivePreviews();
-									setTimeout(() => handleRefreshScreenshot(panelWidgetId, { quiet: true }), 2000);
+									widgetShapeLivePreviewsRef?.requestReload?.(panelWidgetId);
+									panelDisplayRevision += 1;
+									scheduleIdleThumbnailPersist(panelWidgetId);
 								}
 								return;
 							}
@@ -3863,9 +4005,7 @@
 			};
 			await compositionsClient.updateComposition({
 				id: selectedComposition.id,
-				// The gateway accepts embedSettings (compositionSchemas update schema);
-				// the generated UpdateComposition model predates that field.
-				updateComposition: { embedSettings } as unknown as UpdateComposition
+				updateComposition: { embedSettings }
 			});
 			selectedComposition = { ...selectedComposition, embedSettings };
 			embedDimensionsChanged = false;
@@ -4004,6 +4144,11 @@
 
 	// debugMode — current ON/OFF state. User can still toggle when the UI is available.
 	let debugMode = debugModeAvailable;
+	if (typeof localStorage !== 'undefined' && debugModeAvailable) {
+		const storedDebugMode = localStorage.getItem('widgetic:site-debug-on');
+		if (storedDebugMode === '1' || storedDebugMode === 'true') debugMode = true;
+		if (storedDebugMode === '0' || storedDebugMode === 'false') debugMode = false;
+	}
 	// console.log('[WidgetCreator] Debug from host/env', {
 		// hostProvidedDebug,
 		// initialDebugMode,
@@ -4188,6 +4333,11 @@
 	function toggleDebugMode() {
 		if (!debugModeAvailable) return;
 		debugMode = !debugMode;
+		try {
+			localStorage.setItem('widgetic:site-debug-on', debugMode ? '1' : '0');
+		} catch (err) {
+			console.warn('[WidgetCreator] Could not persist debug mode', err);
+		}
 		// When turning OFF: switches to default model (from API config), mock console
 		// When turning ON: enables model selector, real-time console
 		const effectiveModel = debugMode ? userSelectedModelId : defaultModelId;
@@ -4386,9 +4536,8 @@
 		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);
+			// A capture 1s after open runs html2canvas on the shared main thread.
+			scheduleIdleThumbnailPersist(widgetId);
 		}
 		return true;
 	}
@@ -7665,11 +7814,18 @@
 			const ctx = canvas.getContext('2d');
 			if (!ctx) return dataUrl;
 			ctx.drawImage(img, 0, 0, width, height);
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			const encode = (quality: number) =>
+				new Promise<string>((resolve) => {
+					setTimeout(() => {
+						resolve(canvas.toDataURL('image/jpeg', quality));
+					}, 0);
+				});
 			let quality = 0.82;
-			let out = canvas.toDataURL('image/jpeg', quality);
+			let out = await encode(quality);
 			while (out.length > maxPayloadChars && quality > 0.45) {
 				quality -= 0.08;
-				out = canvas.toDataURL('image/jpeg', quality);
+				out = await encode(quality);
 			}
 			// console.log('[WidgetCreator] Compressed reference image for codegen', {
 				// fromChars: dataUrl.length,
@@ -7748,6 +7904,7 @@
 	 */
 	/** Debounced quiet sync: live Worker preview → canvas WidgetShape thumbnail. */
 	const canvasShapePreviewSyncTimers = new Map<string, ReturnType<typeof setTimeout>>();
+	const quietScreenshotTimers = new Map<string, ReturnType<typeof setTimeout>>();
 	function cancelCanvasShapePreviewSync(widgetId?: string | null): void {
 		if (widgetId) {
 			const existing = canvasShapePreviewSyncTimers.get(widgetId);
@@ -7758,13 +7915,86 @@
 		for (const timer of canvasShapePreviewSyncTimers.values()) clearTimeout(timer);
 		canvasShapePreviewSyncTimers.clear();
 	}
+	function cancelQuietScreenshots(widgetId?: string | null): void {
+		if (widgetId) {
+			const existing = quietScreenshotTimers.get(widgetId);
+			if (existing) clearTimeout(existing);
+			quietScreenshotTimers.delete(widgetId);
+			cancelCanvasShapePreviewSync(widgetId);
+			return;
+		}
+		for (const timer of quietScreenshotTimers.values()) clearTimeout(timer);
+		quietScreenshotTimers.clear();
+		cancelCanvasShapePreviewSync();
+	}
+	function scheduleQuietScreenshot(widgetId: string, delayMs = 2000): void {
+		if (!widgetId || codegenCaptureBlocked()) return;
+		const existing = quietScreenshotTimers.get(widgetId);
+		if (existing) clearTimeout(existing);
+		const timer = setTimeout(() => {
+			quietScreenshotTimers.delete(widgetId);
+			if (codegenCaptureBlocked() || generatingWidgetIds[widgetId]) return;
+			void handleRefreshScreenshot(widgetId, { quiet: true });
+		}, delayMs);
+		quietScreenshotTimers.set(widgetId, timer);
+	}
+	/**
+	 * Latest widget capture for the next LLM turn, without freezing a generation.
+	 * html2canvas shares the page main thread, so this waits until codegen has
+	 * been idle, then persists thumbnail_url only (no canvas JSON serialize).
+	 */
+	const idleThumbnailTimers = new Map<string, ReturnType<typeof setTimeout>>();
+	const IDLE_THUMBNAIL_DELAY_MS = 12000;
+	function cancelIdleThumbnailPersist(widgetId?: string | null): void {
+		if (widgetId) {
+			const existing = idleThumbnailTimers.get(widgetId);
+			if (existing) clearTimeout(existing);
+			idleThumbnailTimers.delete(widgetId);
+			return;
+		}
+		for (const timer of idleThumbnailTimers.values()) clearTimeout(timer);
+		idleThumbnailTimers.clear();
+	}
+	function scheduleIdleThumbnailPersist(widgetId: string): void {
+		if (!widgetId) return;
+		cancelIdleThumbnailPersist(widgetId);
+		const timer = setTimeout(() => {
+			idleThumbnailTimers.delete(widgetId);
+			const run = () => {
+				if (codegenCaptureBlocked() || generatingWidgetIds[widgetId]) {
+					scheduleIdleThumbnailPersist(widgetId);
+					return;
+				}
+				void persistIdleWidgetThumbnail(widgetId);
+			};
+			if (typeof requestIdleCallback === 'function') {
+				requestIdleCallback(() => run(), { timeout: 8000 });
+			} else {
+				run();
+			}
+		}, IDLE_THUMBNAIL_DELAY_MS);
+		idleThumbnailTimers.set(widgetId, timer);
+	}
+	async function persistIdleWidgetThumbnail(widgetId: string): Promise<void> {
+		if (codegenCaptureBlocked() || generatingWidgetIds[widgetId]) return;
+		const iframe = resolveLiveWidgetShapeIframe(widgetId);
+		if (!iframe?.contentWindow) return;
+		try {
+			const screenshot = await handleChatScreenshot(widgetId, iframe, true);
+			if (!screenshot || codegenCaptureBlocked() || generatingWidgetIds[widgetId]) return;
+			await persistWidgetListThumbnail(widgetId, screenshot);
+			console.log('[Chat→Screenshot] Idle thumbnail persisted', widgetId.substring(0, 8));
+		} catch (error) {
+			console.warn('[Chat→Screenshot] Idle thumbnail persist failed', widgetId, error);
+		}
+	}
 	function scheduleCanvasShapePreviewSync(widgetId: string, delayMs = 1800): void {
-		if (!widgetId || isAnyWidgetGenerating()) return;
+		if (!widgetId || codegenCaptureBlocked()) return;
 		const existing = canvasShapePreviewSyncTimers.get(widgetId);
 		if (existing) clearTimeout(existing);
 		const timer = setTimeout(() => {
 			canvasShapePreviewSyncTimers.delete(widgetId);
-			if (isAnyWidgetGenerating() || generatingWidgetIds[widgetId]) {
+			if (codegenCaptureBlocked() || generatingWidgetIds[widgetId]) {
 				// console.log('[CreatorApp] Skip shape preview sync — codegen in progress:', widgetId.substring(0, 8));
 				return;
 			}
@@ -7795,8 +8025,8 @@
 
 		// Never run quiet background screenshot captures while ANY code generation is running —
 		// html2canvas execution inside any preview iframe blocks the single shared main thread.
-		if (quiet && isAnyWidgetGenerating()) {
-			console.log('[handleRefreshScreenshot] Skip quiet capture — codegen in progress', widgetId?.substring(0, 8));
+		if (codegenCaptureBlocked()) {
+			console.log('[handleRefreshScreenshot] Skip capture — codegen in progress', widgetId?.substring(0, 8));
 			return;
 		}
 
@@ -7897,6 +8127,12 @@
 						});
 					}
 					window.addEventListener('message', handler);
+					if (codegenCaptureBlocked()) {
+						clearTimeout(timeout);
+						window.removeEventListener('message', handler);
+						resolve({ data: null, error: 'generation in progress' });
+						return;
+					}
 					iframe.contentWindow!.postMessage({ type: 'widgetic:request-screenshot' }, '*');
 				});
 
@@ -8017,6 +8253,8 @@ Requirements:
 		promptImagesOverride?: string[];
 		/** Skip the server's intent gate — the clarification card's explicit "generate anyway" choice. */
 		skipIntentGate?: boolean;
+		/** The tapped chip's structured intent, declared so the server measures the chip conversion without matching copy. */
+		chipIntent?: ClarificationSuggestion['intent'];
 		/** Chat files (PDF, video, images) to store on the user message before codegen. */
 		persistFileAttachments?: Array<{
 			url?: string;
@@ -8107,6 +8345,7 @@ Requirements:
 			promptImagesOverride: options.promptImagesOverride,
 			persistFileAttachments: options.persistFileAttachments,
 			skipIntentGate: options.skipIntentGate,
+			chipIntent: options.chipIntent,
 		});
 	}
 
@@ -8130,6 +8369,8 @@ Requirements:
 			promptImagesOverride?: string[];
 			/** Skip the server's intent gate — the clarification card's explicit "generate anyway" choice. */
 			skipIntentGate?: boolean;
+			/** The tapped chip's structured intent, declared so the server measures the chip conversion without matching copy. */
+			chipIntent?: ClarificationSuggestion['intent'];
 			persistFileAttachments?: Array<{
 				url?: string;
 				file?: File;
@@ -8145,7 +8386,6 @@ Requirements:
 
 		const panelChat = getChatMethodsForWidget(generationWidgetId);
 		const panelSnap = getPanelState(generationWidgetId);
-		const hadCodeBeforeGeneration = !!(panelSnap?.hasGeneratedCode || panelSnap?.lastCommitId);
 
 		// Per-widget abort: only abort if the SAME widget already has a running generation
 		const existingController = widgetAbortControllers.get(generationWidgetId);
@@ -8158,6 +8398,22 @@ Requirements:
 		const signal = abortController.signal;
 
 		generatingWidgetIds = { ...generatingWidgetIds, [generationWidgetId]: true };
+		noteCodegenActive(true);
+		screenshotGenerationEpoch += 1;
+		document.querySelectorAll('iframe').forEach((frame) => {
+			try {
+				frame.contentWindow?.postMessage({ type: 'widgetic:abort-screenshot' }, '*');
+			} catch (err) {
+				console.warn('[WidgetCreator] Could not abort in-flight screenshot', err);
+			}
+		});
+		cancelQuietScreenshots();
+		cancelIdleThumbnailPersist();
+		widgetShapeLivePreviewsRef?.cancelReloads?.();
+		if (restoredViewingVersionByWidgetId[generationWidgetId] != null) {
+			const { [generationWidgetId]: _droppedRestore, ...restRestored } = restoredViewingVersionByWidgetId;
+			restoredViewingVersionByWidgetId = restRestored;
+		}
 		lastHarnessChatLine = '';
 		
 		// Show user prompt in chat when triggered outside Chat (confirm dialog / Generate Now).
@@ -8371,6 +8627,7 @@ Requirements:
 					runtimeLogs: runtimeLogsForRequest,
 					compileFixOnly: options.compileFixOnly === true,
 					skipIntentGate: options.skipIntentGate === true,
+					chipIntent: options.chipIntent,
 				} as GenerateCodeRequest
 			});
 			// console.log('[WidgetCreator] Code generation request sent for widget', generationWidgetId.substring(0, 8), 'with model:', coderModelForRequest, 'planner:', plannerModelIdForRequest || 'none', 'conversationId:', activeConversationId || 'none', 'images:', imagesToSend?.length || 0, 'attachmentIds:', attachmentIdsToSend?.length || 0, 'runtimeLogs:', runtimeLogsForRequest?.length ?? 0);
@@ -8385,7 +8642,7 @@ Requirements:
 			if (gatedData?.gated === true && typeof gatedData.action === 'string' && gatedData.action !== 'generate') {
 				const gatedAction = gatedData.action as 'answer' | 'redirect' | 'clarify';
 				const gatedReply: string = gatedData.reply ?? '';
-				const suggestions: string[] = Array.isArray(gatedData.suggestions) ? gatedData.suggestions : [];
+				const suggestions: ClarificationSuggestion[] = Array.isArray(gatedData.suggestions) ? gatedData.suggestions : [];
 
 				clearActiveOperationId();
 				patchCodegenUiState(generationWidgetId, {
@@ -8597,8 +8854,10 @@ Requirements:
 						shapeHistoryResolvedByWidgetId = restResolved;
 						setTimeout(() => {
 							void loadPublishHistoryForPanel(generationWidgetId, { silent: true }).then(() => {
-								syncWidgetShapeLivePreviews();
-								if (isFocusedPanel) panelDisplayRevision += 1;
+								const newestDraft = getNewestDraftVersionId(generationWidgetId);
+								if (newestDraft != null) {
+									selectVersionInDropdowns(generationWidgetId, `v:${newestDraft}`);
+								}
 							});
 						}, 1200);
 					}
@@ -8770,11 +9029,9 @@ Requirements:
 							[generationWidgetId]: 'preview',
 						};
 						syncWidgetShapeLivePreviews();
-						// The Worker serves the rebuilt code at the SAME /preview URL — sync()
-						// only reloads when src changes, so force a cache-busted iframe reload
-						// on the canvas shape overlay or it keeps showing the previous version.
+						// WS preview-ready was deferred during codegen so the Worker
+						// iframe does not boot on the shared main thread at 80%.
 						widgetShapeLivePreviewsRef?.requestReload?.(generationWidgetId);
-						panelDisplayRevision += 1;
 						if (!completedPreviewBuildErr) {
 							await applyDesignSchemaDefaultsToPreview(generationWidgetId);
 							pendingCreatePreviewDefaultsWidgetId = null;
@@ -8788,15 +9045,10 @@ Requirements:
 								await panelChat?.reloadConversationMessages?.();
 								panelChat?.markWidgetHeadAtLatestCommit?.();
 							}, 2500);
-							setTimeout(() => {
-								// Only capture screenshot after the very first generation or at publish
-								// Subsequent generations skip this heavy operation to keep the main thread smooth.
-								if (!hadCodeBeforeGeneration) {
-									void (async () => {
-										await handleRefreshScreenshot(generationWidgetId, { quiet: true });
-									})();
-								}
-							}, 3000);
+							scheduleIdleThumbnailPersist(generationWidgetId);
+							// Do not html2canvas here. Capture during/after generation freezes
+							// the tab (iframe shares the main thread). Thumb for the next prompt
+							// is persisted later, only while the tab is idle.
 							// Do NOT auto-publish — user previews first, then clicks Publish / Set live.
 						} else {
 							panelChat?.updateLatestCodegenStatusMessage?.(
@@ -8874,6 +9126,7 @@ Requirements:
 			showToast('error', 'Code generation error', { description: message, duration: 6000 });
 			pushCodegenFailureToChat(generationWidgetId, message);
 		} finally {
+			noteCodegenActive(false);
 			const { [generationWidgetId]: _done, ...restFinally } = generatingWidgetIds;
 			generatingWidgetIds = restFinally;
 			widgetAbortControllers.delete(generationWidgetId);
@@ -9032,7 +9285,7 @@ Requirements:
 		// rather than letting them silently become version 0.
 		const rawTargetVersion = publishOpts.targetVersion;
 		const targetVersion =
-			rawTargetVersion == null || rawTargetVersion === ''
+			rawTargetVersion == null || (typeof rawTargetVersion === 'string' && rawTargetVersion === '')
 				? null
 				: Number.isFinite(Number(rawTargetVersion))
 					? Number(rawTargetVersion)
@@ -10221,8 +10474,8 @@ Requirements:
 					record?.artifact_url ||
 					(version === ps.lastPublishedVersion ? ps.selectedWidgetJsPath : null);
 				if (isPublished && artifact) {
-					const url = resolvePublishedWidgetUrl(widgetId, version, artifact);
-					if (url) return url;
+					const isolated = resolveWidgetShapeVersionPreviewState(widgetId);
+					if (isolated?.url) return isolated.url;
 				}
 				const previewState = resolveWidgetShapeVersionPreviewState(widgetId);
 				if (previewState?.url) return previewState.url;
@@ -10252,6 +10505,10 @@ Requirements:
 	 * Publish history is loaded without requiring chat to be open.
 	 */
 	let shapePreviewSourceByWidgetId: Record<string, string> = {};
+	/** Dropdown label only. Changing it must not reload the shape iframe. */
+	let dropdownVersionByWidgetId: Record<string, string> = {};
+	/** After Restore Checkpoint, dropdowns stay on the restored version number while preview is Worker HEAD. */
+	let restoredViewingVersionByWidgetId: Record<string, number> = {};
 	// Historical previews are never interchangeable with the shared HEAD preview.
 	let shapeVersionPreviewByWidgetId: Record<string, {
 		versionId: string; requestId: number; loading: boolean; error: string | null; url: string | null;
@@ -10365,12 +10622,21 @@ Requirements:
 					(version === ps.lastPublishedVersion ? ps.selectedWidgetJsPath : null);
 
 				if (isPublished && artifact) {
-					const url = resolvePublishedWidgetUrl(widgetId, version, artifact);
-					if (url) return url;
+					const isolated = resolveWidgetShapeVersionPreviewState(widgetId);
+					if (isolated?.url && isolated.versionId === `v:${version}`) return isolated.url;
+					// Do not return Live CDN here — Switch Version must wait for the
+					// commit-specific build, otherwise the iframe stays on the last publish.
 				}
-				// The newest draft IS repo HEAD — Worker `/preview/{widgetId}` already serves this code!
+				// The newest draft is repo HEAD only while HEAD still points at its commit.
+				// A Restore Checkpoint writes a rollback commit on top, so the shared
+				// `/preview/{widgetId}` artifact then serves the restored code under the
+				// newest version's number — ask for a commit-specific build instead.
 				const newestDraft = getNewestDraftVersionId(widgetId);
-				if (!isPublished && newestDraft != null && version === newestDraft && workerUrl) {
+				const draftCommitSha = normalizeCommitSha(record?.commitSha ?? record?.commit_sha ?? null);
+				const headCommitSha = normalizeCommitSha(ps.lastCommitId ?? loadCommitIdForWidget(widgetId));
+				const draftIsRepoHead =
+					!draftCommitSha || !headCommitSha || commitsMatch(draftCommitSha, headCommitSha);
+				if (!isPublished && newestDraft != null && version === newestDraft && draftIsRepoHead && workerUrl) {
 					return workerUrl;
 				}
 				return resolveWidgetShapeVersionPreviewState(widgetId)?.url ?? null;
@@ -10389,6 +10655,8 @@ Requirements:
 	}
 
 	function resolveWidgetShapeVersionLabel(widgetId: string): string | null {
+		const restored = restoredViewingVersionByWidgetId[widgetId];
+		if (Number.isFinite(restored)) return `v${restored}`;
 		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
 		const ps = getPanelDisplayState(widgetId);
 		const liveVersion =
@@ -10451,6 +10719,7 @@ Requirements:
 			dateLabel?: string;
 			isLive?: boolean;
 			isDraft?: boolean;
+			commitSha?: string;
 		}> = [];
 		for (const record of history) {
 			const version = Number(record.version);
@@ -10489,6 +10758,10 @@ Requirements:
 	}
 
 	function resolveWidgetShapeVersionSelectedId(widgetId: string): string | null {
+		const menuVersion = dropdownVersionByWidgetId[widgetId];
+		if (menuVersion) return menuVersion;
+		const restored = restoredViewingVersionByWidgetId[widgetId];
+		if (Number.isFinite(restored)) return `v:${restored}`;
 		const source = shapePreviewSourceByWidgetId[widgetId];
 		if (source?.startsWith('v:')) return source;
 		if (source === 'preview') {
@@ -10504,8 +10777,21 @@ Requirements:
 		return liveVersion != null ? `v:${liveVersion}` : null;
 	}
 
+	function selectVersionInDropdowns(widgetId: string, versionId: string): void {
+		dropdownVersionByWidgetId = { ...dropdownVersionByWidgetId, [widgetId]: versionId };
+		widgetShapeLivePreviewsRef?.setSelectedVersion?.(widgetId, versionId);
+		panelDisplayRevision += 1;
+	}
+
 	function handleWidgetShapeVersionChange(widgetId: string, versionId: string, buildPreview = true): void {
 		if (!versionId) return;
+		// Both dropdowns show the pick. Only the dropdown the user clicked reloads the preview.
+		selectVersionInDropdowns(widgetId, versionId);
+		if (!buildPreview) return;
+		if (restoredViewingVersionByWidgetId[widgetId] != null) {
+			const { [widgetId]: _dropped, ...restRestored } = restoredViewingVersionByWidgetId;
+			restoredViewingVersionByWidgetId = restRestored;
+		}
 		// Re-selecting an already successful/in-flight preview must not reset its state.
 		const currentPreview = resolveWidgetShapeVersionPreviewState(widgetId);
 		if (shapePreviewSourceByWidgetId[widgetId] === versionId
@@ -10524,17 +10810,19 @@ Requirements:
 		};
 		syncWidgetShapeLivePreviews();
 		panelDisplayRevision += 1;
-		// Explicit Publish builds its own target; do not race it with a preview build.
-		if (!buildPreview) return;
-		// Published artifacts need no build. Drafts must never substitute HEAD.
+		// Always compile the selected commit into an isolated Worker preview.
+		// Published CDN artifacts are Live only — using them on Switch made
+		// draft/restore look like the last publish even when git had moved.
 		if (versionId.startsWith('v:')) {
 			const version = Number(versionId.slice(2));
-			const directUrl = resolveWidgetShapeLivePreviewUrl(widgetId);
-			if (directUrl) {
-				const record = getShapePublishHistory(widgetId).find((row) => Number(row.version) === version);
-				console.log('[VersionPreview] Selection', { widgetId, version, commitSha: record?.commitSha ?? record?.commit_sha ?? null, source: 'published' });
+			const record = getShapePublishHistory(widgetId).find((row) => Number(row.version) === version);
+			const isPublished = !!(record?.publishedAt ?? record?.published_at);
+			const newestDraft = getNewestDraftVersionId(widgetId);
+			const workerUrl = resolveWidgetShapeLivePreviewUrl(widgetId);
+			const viewingHeadDraft = !isPublished && newestDraft != null && version === newestDraft && workerUrl && !restoredViewingVersionByWidgetId[widgetId];
+			if (viewingHeadDraft) {
 				const detailsRef = getWidgetDetailsRef(widgetId);
-				detailsRef?.showPublishedArtifact?.(directUrl);
+				detailsRef?.showPublishedArtifact?.(workerUrl);
 			} else {
 				void ensureWidgetShapeVersionPreview(widgetId, version);
 			}
@@ -10613,6 +10901,13 @@ Requirements:
 	/** 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 restored = restoredViewingVersionByWidgetId[widgetId];
+		if (Number.isFinite(restored)) {
+			const history = ps.publishHistory?.length ? ps.publishHistory : publishHistory;
+			const record = history.find((r) => Number(r.version) === Number(restored));
+			const fromRestored = normalizeCommitSha(record?.commitSha ?? record?.commit_sha);
+			if (fromRestored) return fromRestored;
+		}
 		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
 		if (source === 'preview') {
 			return normalizeCommitSha(ps.lastCommitId);
@@ -10663,18 +10958,28 @@ Requirements:
 	 * debug mode and this label is what the turn shows.
 	 */
 	let versionLabelsByWidgetId: Record<string, Record<string, string>> = {};
+	let versionPromptLabelsByWidgetId: Record<string, Record<string, string>> = {};
+	let viewingVersionByWidgetId: Record<string, number | null> = {};
 	$: {
 		void shapePreviewSourceByWidgetId;
 		void shapeVersionPreviewByWidgetId;
+		void restoredViewingVersionByWidgetId;
+		void dropdownVersionByWidgetId;
 		void panelDisplayRevision;
 		const nextHeads: Record<string, string | null> = {};
 		const nextLabels: Record<string, Record<string, string>> = {};
+		const nextPrompts: Record<string, Record<string, string>> = {};
+		const nextViewing: Record<string, number | null> = {};
 		for (const widgetId of openWidgetPanelIds) {
 			nextHeads[widgetId] = resolveViewingCommitShaForPanel(widgetId);
 			nextLabels[widgetId] = buildVersionLabelsForPanel(widgetId);
+			nextPrompts[widgetId] = buildVersionPromptLabelsForPanel(widgetId);
+			nextViewing[widgetId] = viewingVersionNumberForPanel(widgetId);
 		}
 		headCommitShaByWidgetId = nextHeads;
 		versionLabelsByWidgetId = nextLabels;
+		versionPromptLabelsByWidgetId = nextPrompts;
+		viewingVersionByWidgetId = nextViewing;
 	}
 
 	/** Commit shas are keyed on 7 chars — that is what the chat summaries carry. */
@@ -10683,24 +10988,55 @@ Requirements:
 		return normalized ? normalized.slice(0, 7) : null;
 	}
 
+	function assignVersionLabelKeys(labels: Record<string, string>, sha: string | null | undefined, label: string): void {
+		const normalized = normalizeCommitSha(sha);
+		if (!normalized) return;
+		labels[normalized] = label;
+		labels[normalized.slice(0, 7)] = label;
+		labels[normalized.slice(0, 8)] = label;
+	}
+
 	function buildVersionLabelsForPanel(widgetId: string): Record<string, string> {
 		const labels: Record<string, string> = {};
 		const ps = getPanelDisplayState(widgetId);
 		const history = ps.publishHistory?.length ? ps.publishHistory : publishHistory;
 		for (const record of history || []) {
-			const key = versionLabelKey(record?.commitSha ?? record?.commit_sha);
-			if (key && record?.version != null) labels[key] = `Version ${record.version}`;
+			if (record?.version == null) continue;
+			assignVersionLabelKeys(labels, record?.commitSha ?? record?.commit_sha, `Version ${record.version}`);
 		}
-		// The version the user is previewing right now may have been fetched rather
-		// than read from history, and it is the one whose label matters most.
 		const previewState = shapeVersionPreviewByWidgetId[widgetId];
-		const previewKey = versionLabelKey(previewState?.commitSha);
-		if (previewKey && previewState?.versionId?.startsWith('v:')) {
-			labels[previewKey] = `Version ${previewState.versionId.slice(2)}`;
+		if (previewState?.versionId?.startsWith('v:')) {
+			assignVersionLabelKeys(labels, previewState?.commitSha, `Version ${previewState.versionId.slice(2)}`);
+		}
+		return labels;
+	}
+
+	function versionPromptKey(prompt: string | null | undefined): string | null {
+		const text = String(prompt || '').replace(/\s+/g, ' ').trim();
+		return text || null;
+	}
+
+	/** User prompt → "Version N", for turns whose commit line was never saved. */
+	function buildVersionPromptLabelsForPanel(widgetId: string): Record<string, string> {
+		const labels: Record<string, string> = {};
+		const ps = getPanelDisplayState(widgetId);
+		const history = ps.publishHistory?.length ? ps.publishHistory : publishHistory;
+		for (const record of history || []) {
+			if (record?.version == null) continue;
+			const key = versionPromptKey(record?.prompt);
+			if (!key) continue;
+			labels[key] = `Version ${record.version}`;
 		}
 		return labels;
 	}
 
+	function viewingVersionNumberForPanel(widgetId: string): number | null {
+		const selected = resolveWidgetShapeVersionSelectedId(widgetId);
+		if (!selected?.startsWith('v:')) return null;
+		const version = parseInt(selected.slice(2), 10);
+		return Number.isFinite(version) ? version : null;
+	}
+
 	function syncWidgetShapeLivePreviews(): void {
 		measureSync('sync-widget-shape-previews', () => {
 			try {
@@ -10935,10 +11271,13 @@ Requirements:
 		if (embedded && deepLinkId && widgetId === deepLinkId) {
 			embeddedDeepLinkPanelDismissed = false;
 		}
-		// One details panel at a time — close any other open widget first.
-		for (const openId of [...openWidgetPanelIds]) {
-			if (openId !== widgetId) {
-				closeWidgetDetailsPanel(openId, { fromShapeSwitch: true });
+		// At most two chats. Opening a third closes the oldest one.
+		const maxOpenWidgetChats = 2;
+		if (!openWidgetPanelIds.includes(widgetId)) {
+			while (openWidgetPanelIds.length >= maxOpenWidgetChats) {
+				const oldestId = openWidgetPanelIds[0];
+				if (!oldestId) break;
+				closeWidgetDetailsPanel(oldestId, { fromShapeSwitch: true });
 			}
 		}
 		const isNewPanel = !openWidgetPanelIds.includes(widgetId);
@@ -11946,7 +12285,7 @@ Requirements:
 	 * from whatever HEAD happens to contain.
 	 */
 	function canPublishDraftVersionForPanel(widgetId: string, version: number | null | undefined): boolean {
-		if (version == null || version === '' || !Number.isFinite(Number(version))) return false;
+		if (version == null || (typeof version === 'string' && version === '') || !Number.isFinite(Number(version))) return false;
 		if (isPublishing && publishingWidgetId === widgetId) return false;
 		if (isPublishing && publishingWidgetId !== null && publishingWidgetId !== widgetId) return false;
 		if (generatingWidgetIds[widgetId]) return false;
@@ -12075,7 +12414,7 @@ $: if ($widgetPublishStatus.timestamp && $widgetPublishStatus.widgetId) {
 			}
 			if (publishWidgetId) {
 				// console.log('[Publish] Refreshing canvas widget screenshot after successful publish');
-				setTimeout(() => handleRefreshScreenshot(publishWidgetId, { quiet: true }), 2000);
+				scheduleQuietScreenshot(publishWidgetId, 2000);
 			}
 			if (embedded && onPublishComplete && publishWidgetId) {
 				onPublishComplete({
@@ -12123,7 +12462,7 @@ $: if ($widgetPublishStatus.widgetId === selectedWidgetId && $widgetPublishStatu
 	// console.log('[CrossTab/WS] Publish building status from WebSocket — disabling Publish button');
 }
 
-// Agent harness repair status (DW Phase 2) — real-time via vmConsole:aiderOutput WebSocket.
+// Agent harness repair status (DW Phase 2) — real-time via codegen:output WebSocket.
 $: if ($agentHarnessOutput?.timestamp) {
 	const raw = ($agentHarnessOutput.output || '').trim();
 	const line = raw.replace(/^🔧\s*/, '').trim();
@@ -12139,15 +12478,27 @@ $: if ($agentHarnessOutput?.timestamp) {
 	}
 }
 
-// Worker preview ready via WebSocket event — reload canvas shape preview immediately
+// Worker preview ready via WebSocket event — reload canvas shape preview immediately.
+// The store keeps the last event forever, and this block writes state it also reads,
+// so without the event key it re-ran on every unrelated update: each re-run snapped the
+// version selector back to HEAD and cancelled an in-flight version preview.
+let lastWsWorkerPreviewEventKey: string | null = null;
 $: if ($dynamicWorkerPreviewStatus.widgetId && $dynamicWorkerPreviewStatus.previewUrl) {
 	const wsReadyWidgetId = $dynamicWorkerPreviewStatus.widgetId;
-	shapePreviewSourceByWidgetId = {
-		...shapePreviewSourceByWidgetId,
-		[wsReadyWidgetId]: 'preview',
-	};
-	syncWidgetShapeLivePreviews();
-	widgetShapeLivePreviewsRef?.requestReload?.(wsReadyWidgetId);
+	const wsEventKey = `${wsReadyWidgetId}:${$dynamicWorkerPreviewStatus.previewUrl}:${$dynamicWorkerPreviewStatus.timestamp ?? ''}`;
+	if (wsEventKey !== lastWsWorkerPreviewEventKey) {
+		lastWsWorkerPreviewEventKey = wsEventKey;
+		shapePreviewSourceByWidgetId = {
+			...shapePreviewSourceByWidgetId,
+			[wsReadyWidgetId]: 'preview',
+		};
+		if (codegenCaptureBlocked()) {
+			console.log('[CreatorApp] Defer canvas Worker preview reload until codegen finishes', wsReadyWidgetId.substring(0, 8));
+		} else {
+			syncWidgetShapeLivePreviews();
+			widgetShapeLivePreviewsRef?.requestReload?.(wsReadyWidgetId);
+		}
+	}
 }
 
 // ===================== Publish History =====================
@@ -12823,6 +13174,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	 * parent-page [FreezeReport] (long tasks attributed to the iframe).
 	 */
 	const screenshotCaptureInFlight = new Set<string>();
+	/** Bumped when a generation starts so in-flight html2canvas results are dropped. */
+	let screenshotGenerationEpoch = 0;
 
 	/**
 	 * Called when a Widget Image shape is clicked on the canvas.
@@ -14913,7 +15266,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			{@const panelInstanceKey = panelInstanceKeyByWidgetId[panelWidgetId] ?? panelWidgetId}
 			{@const panelWidget = widgetsById.get(panelWidgetId) ?? null}
 			{@const isPanelFocused = focusedPanelWidgetId === panelWidgetId}
-			{@const ps = (panelDisplayRevision, getPanelDisplayState(panelWidgetId))}
+			{@const ps = rev(panelDisplayRevision, getPanelDisplayState(panelWidgetId))}
 			<!--
 				Same published-version resolution the WidgetDetails instance below gets.
 				`ps.lastPublishedVersion` alone is only hydrated from the focused panel /
@@ -14924,9 +15277,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			{@const panelPublishedVersion = isDraftConvertId(panelWidgetId)
 				? null
 				: (ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(panelWidget ?? null))}
-			{@const panelHasUnpublishedChanges = (panelDisplayRevision, widgets.length, hasUnpublishedChangesForPanel(panelWidgetId))}
-			{@const panelHasCompileErrorState = (panelDisplayRevision, panelHasCompileError(panelWidgetId))}
-			{@const panelHasInfraPreviewError = (panelDisplayRevision, panelHasInfrastructurePreviewError(panelWidgetId))}
+			{@const panelHasUnpublishedChanges = rev(panelDisplayRevision, hasUnpublishedChangesForPanel(panelWidgetId), widgets.length)}
+			{@const panelHasCompileErrorState = rev(panelDisplayRevision, panelHasCompileError(panelWidgetId))}
+			{@const panelHasInfraPreviewError = rev(panelDisplayRevision, panelHasInfrastructurePreviewError(panelWidgetId))}
 			<svelte:component this={WidgetDetails}
 				bind:this={widgetDetailsRefs[panelInstanceKey]}
 				userSession={$userSession}
@@ -15255,17 +15608,19 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{@const defaultVersionSource = panelPublishedVersion !== null
 					? `v:${panelPublishedVersion}`
 					: (newestDraft ? `v:${newestDraft.version}` : null)}
-				{@const shapeSource = shapePreviewSourceByWidgetId[panelWidgetId] || defaultVersionSource}
-				{@const viewingVersion = shapeSource && shapeSource.startsWith('v:')
+				{@const restoredVersion = restoredViewingVersionByWidgetId[panelWidgetId]}
+				{@const menuVersion = dropdownVersionByWidgetId[panelWidgetId]}
+				{@const shapeSource = menuVersion || shapePreviewSourceByWidgetId[panelWidgetId] || defaultVersionSource}
+				{@const viewingVersion = Number.isFinite(restoredVersion)
+					? restoredVersion
+					: shapeSource && shapeSource.startsWith('v:')
 					? parseInt(shapeSource.slice(2), 10)
 					: shapeSource === 'preview'
-						// A 'preview' source (Worker HEAD, unpublished) is not a published
-						// version — falling back to panelPublishedVersion produced `vnull`
-						// right after generation AND showed the stale Live version when a
-						// draft existed. The newest draft IS this HEAD's version.
-						? (newestDraft ? newestDraft.version : panelPublishedVersion)
+						? (getNewestDraftVersionId(panelWidgetId) ?? panelPublishedVersion)
 						: panelPublishedVersion}
-				{@const viewingIsLive = Number(viewingVersion) === Number(panelPublishedVersion)}
+				{@const viewingIsLive = !Number.isFinite(restoredVersion)
+					&& shapeSource !== 'preview'
+					&& Number(viewingVersion) === Number(panelPublishedVersion)}
 				<!--
 					A version is a Draft until it is published. The history is one
 					sequence (`v1, v2, v3…`), so "draft" is read from the record's
@@ -15466,9 +15821,16 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									<Button
 										onclick={() => {
 											if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
-											lastGenerationFailed = false;
-											lastGenerationError = null;
-											generateCodeStatus = null;
+											patchPanelSnapshot(panelWidgetId, {
+												lastGenerationFailed: false,
+												lastGenerationError: null,
+												generateCodeStatus: 'Ready',
+											});
+											if (isPanelFocused || focusedPanelWidgetId === panelWidgetId) {
+												lastGenerationFailed = false;
+												lastGenerationError = null;
+												generateCodeStatus = 'Ready';
+											}
 										}}
 										variant="outline"
 										size="sm"
@@ -15483,8 +15845,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				</svelte:fragment>
 
 				<svelte:fragment slot="code-generation">
+				{@const chatUserHeight = rev(panelDisplayRevision, getChatContainerHeightForPanel(panelWidgetId))}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				{@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: 0;"
@@ -15530,6 +15892,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							}}
 							widgetHeadCommitSha={headCommitShaByWidgetId[panelWidgetId] || ps.lastCommitId}
 							versionLabelByCommitSha={versionLabelsByWidgetId[panelWidgetId] || {}}
+							versionLabelByPrompt={versionPromptLabelsByWidgetId[panelWidgetId] || {}}
+							viewingVersion={viewingVersionByWidgetId[panelWidgetId] ?? null}
 							onSendMessage={(content, attachments) => handleChatSendMessage(content, attachments, panelWidgetId)}
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}
 							onUploadChatFile={handleChatUploadFile}
@@ -15539,8 +15903,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							onLoadConversations={handleLoadConversations}
 							onLoadMessages={(conversationId) => handleLoadMessages(conversationId, panelWidgetId)}
 							onCreateConversation={handleCreateConversation}
-							onSaveMessage={(conversationId, content, messageType, attachments) =>
-								handleSaveMessage(conversationId, content, messageType, attachments, panelWidgetId)
+							onSaveMessage={(conversationId, content, messageType, attachments, suggestions) =>
+								handleSaveMessage(conversationId, content, messageType, attachments, suggestions, panelWidgetId)
 							}
 							onRestoreCheckpointBackend={(conversationId, checkpointMessageId) =>
 								handleRestoreCheckpoint(conversationId, checkpointMessageId, panelWidgetId)
@@ -15831,11 +16195,13 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 
 				<!-- Embed Dimensions -->
 				<div class="embed-dimensions-ct flex flex-col gap-2">
-					<label class="text-xs font-medium text-gray-600">Dimensions</label>
+					<label class="text-xs font-medium text-gray-600" for="embed-width-input">Dimensions</label>
 					<div class="embed-dimensions-row flex items-center gap-2">
 						<div class="embed-dim-input flex items-center gap-1">
 							<span class="text-[10px] text-gray-400 font-medium">W</span>
 							<input
+								id="embed-width-input"
+								aria-label="Embed width"
 								type="number"
 								min="100"
 								max="4000"
@@ -15854,6 +16220,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 						<div class="embed-dim-input flex items-center gap-1">
 							<span class="text-[10px] text-gray-400 font-medium">H</span>
 							<input
+								id="embed-height-input"
+								aria-label="Embed height"
 								type="number"
 								min="50"
 								max="4000"
@@ -15899,6 +16267,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			<!-- Embed Code Block -->
 			<div class="embed-code-ct flex flex-col gap-2">
 				<div class="embed-code-header flex items-center justify-between">
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label class="text-xs font-medium text-gray-600">Embed Code ({EMBED_FORMAT_LABELS[effectiveFormat]})</label>
 					<!-- svelte-ignore a11y_consider_explicit_label -->
 					<button
@@ -16020,8 +16389,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			<p class="text-sm text-gray-600 mb-4">
 				Permanently delete <strong>{adminDeleteWidget?.name || adminDeleteWidget?.id?.slice(0, 8)}</strong>? This action cannot be undone.
 			</p>
-			<label class="block text-sm font-medium text-gray-700 mb-1">Admin API Key</label>
+			<label class="block text-sm font-medium text-gray-700 mb-1" for="admin-delete-api-key">Admin API Key</label>
 			<input
+				id="admin-delete-api-key"
 				type="password"
 				class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
 				placeholder="Enter admin key..."
@@ -16280,11 +16650,6 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	:global([data-dialog-overlay]) {
 		z-index: 9998 !important;
 	}
-	.generation-models-header select:focus,
-	.generation-models-header select:focus-visible {
-		outline: none;
-		box-shadow: none;
-	}
 	.wc-version-history-toggle:focus,
 	.wc-version-history-toggle:focus-visible,
 	.wc-live-history-backdrop:focus,