@widgetic/creator 0.3.64 → 0.3.66

package/dist/CreatorApp.svelte

@@ -27,7 +27,12 @@
 		UploadsApi,
 		ResponseError
 	} from '@widgetic/api-sdk';
-	import type { Middleware } from '@widgetic/api-sdk';
+	import type {
+		Middleware,
+		UpdateComposition,
+		GenerateCodeRequest,
+		AgentModelsGet200ResponseModelsInner
+	} from '@widgetic/api-sdk';
 	import { parseVersionPreviewError } from './utils/versionPreviewError.js';
 
 	/**
@@ -70,6 +75,8 @@
 	import { uploadChatFileToWidgeticApi } from './utils/widgeticChatUpload.js';
 	import { persistWidgetThumbnail } from './utils/persistWidgetThumbnail.js';
 	import { nativeScrollbarPadding } from './utils/nativeScrollbarPadding.js';
+	import { pinScrollToBottom } from './utils/pinScrollToBottom.js';
+	import { installFreezeWatchdog, measureSync } from './utils/freezeWatchdog.js';
 	import { streamOperationUpdates } from './utils/operationStream.js';
 	import { generateEmbedCode, EMBED_FORMATS, EMBED_FORMAT_LABELS, type EmbedFormat } from './utils/embedCode.js';
 
@@ -111,7 +118,9 @@
 	/** Opt-in Dexie L1 — host (site / standalone) passes true. */
 	export let enableLocalCache: CreatorAppProps['enableLocalCache'] = false;
 	export let onPublishComplete: CreatorAppProps['onPublishComplete'] = undefined;
-	export let onBack: CreatorAppProps['onBack'] = undefined;
+	// Passed by the site host but never read here — export const keeps the
+	// init-set contract without the unused-reactive warning.
+	export const onBack: CreatorAppProps['onBack'] = undefined;
 	export let onWidgetRenamed: CreatorAppProps['onWidgetRenamed'] = undefined;
 
 	// Opt-in Dexie owner — reactive to prop changes without $effect (would force runes mode).
@@ -119,7 +128,8 @@
 
 	function getRealTokenExpUnix(token: string): number | null {
 		const decoded = decodeJWT(token);
-		return decoded?.exp ?? null;
+		const exp = decoded?.exp;
+		return typeof exp === 'number' && Number.isFinite(exp) ? exp : null;
 	}
 
 	let didForceCreateNewWidget = false;
@@ -483,7 +493,10 @@
 
 	// Lightweight static imports from canvas (excludes Canvas.svelte — 10K+ lines)
 	import { Tooltip } from '@widgetic/canvas/components';
-	import type { WidgetConversionPayload } from '@widgetic/canvas/components';
+	// WidgetConversionPayload lives on the canvas root export (re-exported from
+	// ./canvas); the components barrel only carries the input controls. Type-only
+	// import, so the 10K-line Canvas.svelte still never loads.
+	import type { WidgetConversionPayload } from '@widgetic/canvas';
 
 	// Chat module for code generation conversation UI
 	import { Chat, ContextType } from '@widgetic/chat';
@@ -518,8 +531,40 @@
 			const canvasModule = await canvasModulePromise;
 			WidgeticCanvas = canvasModule.Canvas;
 		}
+		installLongTaskFreezeReporter();
+		installFreezeWatchdog();
 	});
 
+	/**
+	 * Freeze attribution: while a code generation is tracked, any main-thread
+	 * block ≥ LONG_TASK_FREEZE_MS is reported with its most likely culprit (the
+	 * last status line + open panels). This gives a concrete answer to "why does
+	 * the site freeze during generation" instead of a silent stuck progress bar.
+	 */
+	const LONG_TASK_FREEZE_MS = 250;
+	let freezeObserver: PerformanceObserver | null = null;
+	function installLongTaskFreezeReporter(): void {
+		if (typeof window === 'undefined' || !('PerformanceObserver' in window)) return;
+		if (freezeObserver) return;
+		try {
+			freezeObserver = new PerformanceObserver((list) => {
+				if (!Object.keys(generatingWidgetIds).some((id) => generatingWidgetIds[id])) return;
+				for (const entry of list.getEntries()) {
+					if (entry.duration < LONG_TASK_FREEZE_MS) continue;
+					console.warn(
+						`[FreezeReport] Main thread blocked ${Math.round(entry.duration)}ms during generation.`
+						+ ` Status: "${generateCodeStatus ?? '—'}".`
+						+ ` Open panels: ${openWidgetPanelIds.length}.`
+						+ ` Start: ${Math.round(entry.startTime)}ms after nav.`,
+					);
+				}
+			});
+			freezeObserver.observe({ entryTypes: ['longtask'] });
+		} catch (err) {
+			console.warn('[FreezeReport] longtask observer unavailable', err);
+		}
+	}
+
 	// Trigger WidgetDetails load as soon as a panel is opened or requested
 	$: if (openWidgetPanelIds.length > 0 && !WidgetDetails) {
 		void loadWidgetDetailsModule();
@@ -601,10 +646,31 @@
 		repositoryId?: string | null;
 		repository_id?: string | null;
 		repoId?: string | null;
+		repo_id?: string | null;
 		name?: string;
 		[extra: string]: unknown;
 	}
 
+	/**
+	 * View any API payload as the app's open WidgetSummary shape. The SDK's
+	 * generated models (Widget, CreateWidget201Response, …) lack the index
+	 * signature callers rely on for snake_case/extra fields, so direct
+	 * assignments fail structurally; this documents the deliberate widening.
+	 */
+	function asWidgetSummary(payload: unknown): WidgetSummary {
+		return (payload ?? {}) as WidgetSummary;
+	}
+
+	/**
+	 * Reactivity marker for template {@const}s: a Svelte 4 {@const} only re-runs
+	 * when a value referenced in its expression changes, so the panel-revision
+	 * counter is passed explicitly. The bare comma idiom this replaces
+	 * (`(revision, value)`) is a TS unused-expression error.
+	 */
+	function rev<T>(revision: number, value: T, ..._alsoTracked: unknown[]): T {
+		return value;
+	}
+
 	// LocalStorage keys for persisting selection across refresh
 	const SELECTED_WIDGET_STORAGE_KEY = 'widgetCreator_selectedWidgetId';
 	const SELECTED_CANVAS_STORAGE_KEY = 'widgetCreator_selectedCanvasId';
@@ -797,6 +863,9 @@
 	let codeGenerationPrompt = DEFAULT_PROMPT;
 	let isGeneratingCode = false;
 	let generatingWidgetIds: Record<string, boolean> = {};
+	function isAnyWidgetGenerating(): boolean {
+		return isGeneratingCode || Object.keys(generatingWidgetIds).some((id) => generatingWidgetIds[id]);
+	}
 	const widgetAbortControllers = new Map<string, AbortController>();
 	let currentGenerationOperationId: string | null = null;
 	let generateCodeStatus: string | null = null;
@@ -831,7 +900,7 @@
 	// Chat component reference and context (focused panel)
 	let chatMethods: {
 		sendMessage: (content: string, attachments?: File[]) => Promise<void>;
-		addAssistantMessage: (content: string, skipPersist?: boolean) => void;
+		addAssistantMessage: (content: string, skipPersist?: boolean, suggestions?: string[]) => 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;
@@ -967,6 +1036,7 @@
 			fileSize?: number;
 		}>,
 		sourceWidgetId?: string,
+		sendOptions?: { skipIntentGate?: boolean },
 	) {
 		const widgetId = sourceWidgetId ?? selectedWidgetId;
 		if (!widgetId) return;
@@ -1089,6 +1159,7 @@
 			attachmentIds: cdnUploadIds.length > 0 ? cdnUploadIds : undefined,
 			promptImagesOverride: effectivePromptImages.length > 0 ? effectivePromptImages : undefined,
 			persistFileAttachments: persistFileAttachments.length > 0 ? persistFileAttachments : undefined,
+			skipIntentGate: sendOptions?.skipIntentGate === true,
 		});
 	}
 
@@ -1453,10 +1524,12 @@
 					: null) || userMessages[userMessages.length - 1] || null;
 			const existingUrls = new Set(
 				(targetUser?.attachments || [])
-					.map((a: { url?: string }) => a.url)
-					.filter((url: string | undefined): url is string => !!url),
+					.map((a: { url?: unknown }) => a.url)
+					.filter((url): url is string => typeof url === 'string' && url.length > 0),
+			);
+			const existingHasRemoteImage = [...existingUrls].some(
+				(url) => typeof url === 'string' && /^https?:\/\//i.test(url)
 			);
-			const existingHasRemoteImage = [...existingUrls].some((url) => /^https?:\/\//i.test(url));
 			// Chat already persisted CDN attachments for this turn — do not merge data URLs/canvas shots.
 			if (targetUser && existingHasRemoteImage) {
 				if (convId !== visibleConversationId) {
@@ -1578,6 +1651,9 @@
 		iframe: HTMLIFrameElement,
 		timeoutMs = 6000,
 	): Promise<{ data: string | null; error: string | null }> {
+		if (isAnyWidgetGenerating()) {
+			return Promise.resolve({ data: null, error: 'generation in progress' });
+		}
 		return new Promise((resolve) => {
 			if (!iframe.contentWindow) {
 				resolve({ data: null, error: 'no-content-window' });
@@ -1609,6 +1685,14 @@
 	 * Capture via a temporary same-path Worker /preview iframe (has html2canvas handler).
 	 */
 	async function captureViaHiddenWorkerPreview(widgetId: string): Promise<string | null> {
+		// Loading a widget in a hidden iframe costs a full Svelte + Tailwind CDN
+		// 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()) {
+			console.log('[Chat→Screenshot] Skip hidden Worker capture — codegen in progress', widgetId?.substring(0, 8));
+			return null;
+		}
 		const workerUrl = `${widgetBuilderPreviewBaseUrl()}/preview/${widgetId}`;
 		console.log('[Chat→Screenshot] Capturing via hidden Worker preview', {
 			widgetId: widgetId.substring(0, 8),
@@ -1657,25 +1741,29 @@
 
 	/** Explicit Refresh only: capture the loaded frame without opening a panel or publishing. */
 	async function handleWidgetShapeRefresh(widgetId, iframe, isCurrentFrame) {
+		if (isAnyWidgetGenerating()) 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]
+			&& !isDraftConvertId(widgetId) && !generatingWidgetIds[widgetId] && !isAnyWidgetGenerating()
 			&& capturedCanvasId === getEffectiveCanvasId() && capturedCanvas === canvasRef
 			&& capturedSource === (shapePreviewSourceByWidgetId[widgetId] || 'live')
 			&& resolveLiveWidgetShapeIframe(widgetId) === iframe;
 		if (!isCurrent()) return;
 		try {
-			const screenshot = await handleChatScreenshot(widgetId, iframe);
+			const screenshot = await handleChatScreenshot(widgetId, iframe, true);
 			if (!screenshot || !isCurrent()) return;
 			// Persist before Fabric/autosave side effects can resync the live overlay.
 			await persistWidgetListThumbnail(widgetId, screenshot, isCurrent);
 			if (!isCurrent()) return;
 			capturedCanvas?.updateWidgetImage(widgetId, screenshot);
-			const canvasJson = capturedCanvas?.saveCanvas?.();
+			const canvasJson = measureSync(
+				'canvas-serialize:shape-refresh-thumbnail',
+				() => capturedCanvas?.saveCanvas?.() ?? null,
+			);
 			if (canvasJson) void handleCanvasAutoSave(canvasJson);
 		} catch (error) {
 			console.warn('[WidgetShape] Refresh thumbnail capture failed', widgetId, error);
@@ -1683,13 +1771,34 @@
 	}
 
 	/** Screenshot: capture the live WidgetShape iframe (CDN or Worker), not Fabric wireframe. */
-	async function handleChatScreenshot(widgetId?: string | null, requiredIframe: HTMLIFrameElement | null = null): Promise<string | null> {
+	async function handleChatScreenshot(widgetId?: string | null, requiredIframe: HTMLIFrameElement | null = null, quiet = false): Promise<string | null> {
 		const targetId = widgetId || focusedPanelWidgetId || selectedWidgetId;
 		if (!targetId) {
 			console.warn('[Chat→Screenshot] No widget id');
 			return null;
 		}
+		// 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()) {
+			console.log('[Chat→Screenshot] Skip capture — generation in progress');
+			return null;
+		}
+		// Same single-flight as handleRefreshScreenshot: both paths run html2canvas
+		// inside preview iframes that share the page main thread. Overlapping
+		// captures during generation were a major freeze source.
+		if (screenshotCaptureInFlight.has(targetId)) {
+			console.log('[Chat→Screenshot] Capture already in flight — skipping', targetId.substring(0, 8));
+			return null;
+		}
+		screenshotCaptureInFlight.add(targetId);
+		try {
+			return await performChatScreenshot(targetId, requiredIframe, quiet);
+		} finally {
+			screenshotCaptureInFlight.delete(targetId);
+		}
+	}
 
+	async function performChatScreenshot(targetId: string, requiredIframe: HTMLIFrameElement | null, quiet = false): Promise<string | null> {
 		const liveIframe = requiredIframe ?? resolveLiveWidgetShapeIframe(targetId);
 		if (requiredIframe && (requiredIframe !== resolveLiveWidgetShapeIframe(targetId) || !requiredIframe.isConnected)) return null;
 		const liveSrc = liveIframe
@@ -1712,6 +1821,8 @@
 
 		// Explicit refresh must not persist a different version or a stale Fabric image.
 		if (requiredIframe) return null;
+		// Quiet thumbnail sync must NEVER construct a temporary hidden iframe and compile worker preview.
+		if (quiet) return null;
 
 		// 2) Hidden Worker /preview (same capture script; wait for load)
 		const fromWorker = await captureViaHiddenWorkerPreview(targetId);
@@ -1737,7 +1848,6 @@
 		});
 		return null;
 	}
-	
 	function normalizeConversationRecords(json: any): any[] {
 		const raw = json?.data ?? json?.conversations ?? json;
 		const list = Array.isArray(raw)
@@ -2416,8 +2526,14 @@
 
 	/** 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_MIN_HEIGHT = 260;
 	const CHAT_MAX_HEIGHT = 2000;
+	/**
+	 * Floor applied to the chat box while it auto-fills the create step. A floor
+	 * taller than the available area makes the surrounding scroll container
+	 * scroll, which puts the chat input below the fold on open.
+	 */
+	const CHAT_AUTO_MIN_HEIGHT = 0;
 
 	function getChatContainerHeightForPanel(widgetId: string): number | null {
 		const stored = getPanelState(widgetId).chatContainerHeight;
@@ -2502,7 +2618,7 @@
 		if (!schema) return schema;
 		try {
 			const clone = structuredClone(schema);
-			const groups = Array.isArray(clone) ? clone : clone.componentGroups;
+			const groups = Array.isArray(clone) ? clone : (clone as { componentGroups?: unknown }).componentGroups;
 			if (!Array.isArray(groups) || groups.length === 0) return schema;
 			const allProps = groups.flatMap((group: { components?: Array<{ properties?: unknown[] }> }) =>
 				(group.components || []).flatMap((component) => component.properties || [])
@@ -3594,7 +3710,7 @@
 				!compositionRecordProjectId(selectedComposition as Record<string, unknown>);
 			const res = await compositionsClient.updateComposition({
 				id: selectedComposition.id,
-				updateCompositionRequest: {
+				updateComposition: {
 					content: buildCompositionContentPayload(),
 					...(needsProjectBackfill ? projectBackfill : {}),
 				}
@@ -3686,7 +3802,7 @@
 		try {
 			await compositionsClient.updateComposition({
 				id: compositionId,
-				updateCompositionRequest: { name: trimmed }
+				updateComposition: { name: trimmed }
 			});
 			showToast('success', 'Composition renamed');
 			await loadCompositions();
@@ -3747,7 +3863,9 @@
 			};
 			await compositionsClient.updateComposition({
 				id: selectedComposition.id,
-				updateCompositionRequest: { embedSettings }
+				// The gateway accepts embedSettings (compositionSchemas update schema);
+				// the generated UpdateComposition model predates that field.
+				updateComposition: { embedSettings } as unknown as UpdateComposition
 			});
 			selectedComposition = { ...selectedComposition, embedSettings };
 			embedDimensionsChanged = false;
@@ -3943,11 +4061,11 @@
 			// SDK returns { success, models } directly (not nested under data)
 			if (response.success && Array.isArray(response.models)) {
 				// Transform API response to match our interface
-				availableModels = response.models.map((m: { id: string; displayName: string; provider: string; description: string; supportsVision?: boolean }) => ({
-					id: m.id,
-					name: m.displayName,
-					provider: m.provider.charAt(0).toUpperCase() + m.provider.slice(1), // Capitalize provider
-					description: m.description,
+				availableModels = response.models.map((m: AgentModelsGet200ResponseModelsInner) => ({
+					id: m.id ?? '',
+					name: m.displayName ?? '',
+					provider: (m.provider ?? '').charAt(0).toUpperCase() + (m.provider ?? '').slice(1), // Capitalize provider
+					description: m.description ?? '',
 					supportsVision: m.supportsVision === true,
 				}));
 				
@@ -4687,7 +4805,12 @@
 
 		// Step 3: Check operation status
 		try {
-			const op = await operationsClient.operationsIdGet({ id: operationId });
+			const op = (await operationsClient.operationsIdGet({ id: operationId })) as {
+				status?: string;
+				error?: string;
+				progress?: number;
+				metadata?: Record<string, unknown>;
+			};
 			const status = (op?.status || '').toLowerCase();
 
 			if (status === 'completed') {
@@ -5635,22 +5758,29 @@
 			const res = await widgetsClient.getWidgets({ canvasId: canvasId ?? undefined });
 
 			// normalize error shape from apiRequest
-			if (res && (res.error || res.message)) {
+			const envelope = res as unknown as {
+				error?: string;
+				message?: string;
+				data?: unknown;
+			};
+			if (envelope && (envelope.error || envelope.message)) {
 				// console.error('Widget Creator: loadWidgetsForCanvas: response not ok:', res);
 				widgets = [];
 				selectedWidgetId = null;
 				isLoadingWidgets = false;
-				widgetsError = res.message || res.error || 'Failed to load widgets';
+				widgetsError = envelope.message || envelope.error || 'Failed to load widgets';
 				throw new Error(widgetsError);
 			}
 
-			// if the response is ok, parse the data
+			// if the response is ok, parse the data (bare list, {data: list} or {data: {data: list}})
+			const envelopeData = envelope?.data;
+			const envelopeNestedData = (envelopeData as { data?: unknown } | undefined)?.data;
 			const fetched = Array.isArray(res)
-				? (res as WidgetSummary[])
-				: Array.isArray(res?.data?.data)
-					? (res.data.data as WidgetSummary[])
-					: Array.isArray(res?.data)
-						? (res.data as WidgetSummary[])
+				? (res as unknown as WidgetSummary[])
+				: Array.isArray(envelopeNestedData)
+					? (envelopeNestedData as unknown as WidgetSummary[])
+					: Array.isArray(envelopeData)
+						? (envelopeData as unknown as WidgetSummary[])
 						: [];
 
 			const previousById = new Map(
@@ -5747,9 +5877,13 @@
 	}
 
 	function getWidgetCreatedAtMs(widget: WidgetSummary): number {
-		const raw = widget.createdAt ?? widget.created_at;
-		if (!raw) return 0;
-		const ms = new Date(raw).getTime();
+		const rawCreated = widget.createdAt ?? widget.created_at;
+		if (!rawCreated) return 0;
+		const ms = new Date(
+			typeof rawCreated === 'string' || typeof rawCreated === 'number' || rawCreated instanceof Date
+				? rawCreated
+				: String(rawCreated)
+		).getTime();
 		return Number.isFinite(ms) ? ms : 0;
 	}
 
@@ -6155,10 +6289,10 @@
 	async function resolvePrimaryWidgetIdForCanvas(targetCanvasId: string): Promise<string | null> {
 		if (!canvasesClient || !targetCanvasId?.trim()) return null;
 		try {
-			const canvasRecord = await canvasesClient.getCanvas({ id: targetCanvasId });
-			const record =
-				(canvasRecord as { data?: Record<string, unknown> })?.data ??
-				(canvasRecord as Record<string, unknown>);
+		const canvasRecord = await canvasesClient.getCanvas({ id: targetCanvasId });
+		const record =
+			(canvasRecord as { data?: Record<string, unknown> })?.data ??
+			(canvasRecord as unknown as Record<string, unknown>);
 			const raw =
 				(record as { primaryWidgetId?: unknown })?.primaryWidgetId ??
 				(record as { primary_widget_id?: unknown })?.primary_widget_id ??
@@ -6640,7 +6774,12 @@
 		if (!widgetId || !agentClient) return null;
 		try {
 			const json = await agentClient.agentWidgetBuilderRepoHeadWidgetIdGet({ widgetId });
-			const data = json?.data ?? json;
+			const repoHeadEnvelope = json as unknown as {
+				data?: { repoHeadCommitSha?: string | null; repo_head_commit_sha?: string | null };
+				repoHeadCommitSha?: string | null;
+				repo_head_commit_sha?: string | null;
+			};
+			const data = repoHeadEnvelope?.data ?? repoHeadEnvelope;
 			const sha = data?.repoHeadCommitSha ?? data?.repo_head_commit_sha ?? null;
 			return typeof sha === 'string' && sha.length > 0 ? sha : null;
 		} catch (err) {
@@ -6958,13 +7097,14 @@
 					}
 				}
 			);
-			if (!response || response.error || response.message) {
+			const createEnvelope = response as unknown as { error?: string; message?: string };
+			if (!response || createEnvelope.error || createEnvelope.message) {
 				console.error('Widget create failed:', response);
-				authStatus = `Create widget failed: ${response?.message || response?.error || 'Unknown error'}`;
+				authStatus = `Create widget failed: ${createEnvelope.message || createEnvelope.error || 'Unknown error'}`;
 				return;
 			}
 			// Ensure we have an id
-			const newWidget = response.data || response; // handle envelope or direct
+			const newWidget = asWidgetSummary((response as { data?: unknown }).data ?? response); // handle envelope or direct
 			if (newWidget?.id) {
 				widgets = [{ ...newWidget }, ...widgets];
 				selectWidget(newWidget);
@@ -7619,12 +7759,12 @@
 		canvasShapePreviewSyncTimers.clear();
 	}
 	function scheduleCanvasShapePreviewSync(widgetId: string, delayMs = 1800): void {
-		if (!widgetId) return;
+		if (!widgetId || isAnyWidgetGenerating()) return;
 		const existing = canvasShapePreviewSyncTimers.get(widgetId);
 		if (existing) clearTimeout(existing);
 		const timer = setTimeout(() => {
 			canvasShapePreviewSyncTimers.delete(widgetId);
-			if (generatingWidgetIds[widgetId]) {
+			if (isAnyWidgetGenerating() || generatingWidgetIds[widgetId]) {
 				// console.log('[CreatorApp] Skip shape preview sync — codegen in progress:', widgetId.substring(0, 8));
 				return;
 			}
@@ -7639,10 +7779,38 @@
 		canvasShapePreviewSyncTimers.set(widgetId, timer);
 	}
 
+	/**
+	 * Serializing the canvas stringifies every shape's embedded image, so it is
+	 * megabytes of synchronous work on a busy canvas. The thumbnail paths run it
+	 * immediately after a capture, which is exactly where the freeze reports land,
+	 * so each call is measured and named.
+	 */
+	function serializeCanvasJson(reason: string): string | null {
+		return measureSync(`canvas-serialize:${reason}`, () => canvasRef?.saveCanvas?.() ?? null);
+	}
+
 	async function handleRefreshScreenshot(widgetId: string, options: { quiet?: boolean } = {}) {
 		const quiet = !!options.quiet;
 		// console.log('[handleRefreshScreenshot] Capturing screenshot via postMessage for widget:', widgetId, quiet ? '(quiet)' : '');
 
+		// 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));
+			return;
+		}
+
+		// Single-flight per widget: overlapping captures stack html2canvas runs in
+		// the preview iframe — same-origin iframes share this page's main thread,
+		// and stacked captures blocked the whole site during generation (no
+		// [FreezeReport] because the long task is attributed to the iframe).
+		if (screenshotCaptureInFlight.has(widgetId)) {
+			console.log('[handleRefreshScreenshot] Capture already in flight — skipping', widgetId?.substring(0, 8));
+			return;
+		}
+		screenshotCaptureInFlight.add(widgetId);
+
+		try {
 			if (isConvertOrDraftPanelOpen() && !isDraftConvertId(widgetId)) {
 				// console.log('[handleRefreshScreenshot] Skip iframe capture — convert/draft panel is open:', widgetId.substring(0, 8));
 				return;
@@ -7673,10 +7841,10 @@
 					if (!shapeThumbnailCaptureInFlight.has(widgetId)) {
 						shapeThumbnailCaptureInFlight.add(widgetId);
 						try {
-							const freshCapture = await handleChatScreenshot(widgetId);
+							const freshCapture = await handleChatScreenshot(widgetId, null, quiet);
 							if (freshCapture) {
 								canvasRef?.updateWidgetImage(widgetId, freshCapture);
-								const freshJson = canvasRef?.saveCanvas?.();
+								const freshJson = serializeCanvasJson('quiet-shape-thumbnail');
 								if (freshJson) void handleCanvasAutoSave(freshJson);
 								void persistWidgetListThumbnail(widgetId, freshCapture);
 							} else {
@@ -7713,8 +7881,7 @@
 				showToast('info', 'Capturing widget screenshot...', { duration: 3000 });
 			}
 
-			try {
-				const result = await new Promise<{ data: string | null; error: string | null }>((resolve) => {
+			const result = await new Promise<{ data: string | null; error: string | null }>((resolve) => {
 					const timeout = setTimeout(() => {
 						window.removeEventListener('message', handler);
 						resolve({ data: null, error: 'timeout' });
@@ -7736,7 +7903,7 @@
 				if (result.data && canvasRef) {
 					canvasRef.updateWidgetImage(widgetId, result.data);
 					setTimeout(() => {
-						const json = canvasRef?.saveCanvas();
+						const json = serializeCanvasJson('screenshot-refresh');
 						if (json) handleCanvasAutoSave(json);
 					}, 500);
 					void persistWidgetListThumbnail(widgetId, result.data);
@@ -7765,6 +7932,8 @@
 				if (!quiet) {
 					showToast('error', 'Screenshot capture failed', { duration: 3000 });
 				}
+			} finally {
+				screenshotCaptureInFlight.delete(widgetId);
 			}
 	}
 
@@ -7846,6 +8015,8 @@ Requirements:
 		attachmentIds?: string[];
 		/** Image URLs / data URLs captured before chat clearDraft. */
 		promptImagesOverride?: string[];
+		/** Skip the server's intent gate — the clarification card's explicit "generate anyway" choice. */
+		skipIntentGate?: boolean;
 		/** Chat files (PDF, video, images) to store on the user message before codegen. */
 		persistFileAttachments?: Array<{
 			url?: string;
@@ -7935,6 +8106,7 @@ Requirements:
 			attachmentIds: options.attachmentIds,
 			promptImagesOverride: options.promptImagesOverride,
 			persistFileAttachments: options.persistFileAttachments,
+			skipIntentGate: options.skipIntentGate,
 		});
 	}
 
@@ -7956,6 +8128,8 @@ Requirements:
 			forceRecreateRepo?: boolean;
 			attachmentIds?: string[];
 			promptImagesOverride?: string[];
+			/** Skip the server's intent gate — the clarification card's explicit "generate anyway" choice. */
+			skipIntentGate?: boolean;
 			persistFileAttachments?: Array<{
 				url?: string;
 				file?: File;
@@ -7971,6 +8145,7 @@ 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);
@@ -8191,17 +8366,67 @@ Requirements:
 					modelId: coderModelForRequest || undefined,
 					plannerModelId: plannerModelIdForRequest,
 					widgetId: generationWidgetId,
-					conversationId: activeConversationId ?? undefined,
-					images: imagesToSend,
+					conversationId: activeConversationId ?? undefined,					images: imagesToSend,
 					attachmentIds: attachmentIdsToSend,
 					runtimeLogs: runtimeLogsForRequest,
 					compileFixOnly: options.compileFixOnly === true,
-				}
+					skipIntentGate: options.skipIntentGate === true,
+				} 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);
 			// console.log('Widget Creator: Code generation response:', response);
 
-			if (response && response.error === 'TOKEN_EXPIRED') {
+			// --- Intent gate: the server answered instead of generating ---
+			// A question got a meta answer, an ambiguous ask got a clarification
+			// card, or a publish/settings ask was redirected. None of these spent
+			// a generation slot. Anything unexpected here falls through to the
+			// normal path (operation tracking), never blocks a real build.
+			const gatedData = (response as any)?.data;
+			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 : [];
+
+				clearActiveOperationId();
+				patchCodegenUiState(generationWidgetId, {
+					lastGenerationFailed: false,
+					lastGenerationError: null,
+					generateCodeStatus:
+						gatedAction === 'answer'
+							? 'Answered from widget details — no generation needed.'
+							: gatedAction === 'clarify'
+								? 'Need a bit more detail before generating.'
+								: 'No generation needed — use the publish or settings control.',
+				});
+
+				const chatMethods = getChatMethodsForWidget(generationWidgetId);
+				if (gatedAction === 'clarify' && suggestions.length > 0 && chatMethods?.addAssistantMessage) {
+					// Suggestions travel as message data, not flattened text — the chat
+					// renders them as clickable chips that send the next user message.
+					chatMethods.addAssistantMessage(gatedReply, false, suggestions);
+				} else if (chatMethods?.addAssistantMessage) {
+					chatMethods.addAssistantMessage(gatedReply);
+				}
+
+				showToast(
+					gatedAction === 'answer' ? 'info' : 'warning',
+					gatedAction === 'answer' ? 'Answered without generating' : 'No generation started',
+					{
+						description: gatedReply.slice(0, 140),
+						duration: 8000,
+					},
+				);
+				generatingWidgetIds = (() => {
+					const { [generationWidgetId]: _gated, ...rest } = generatingWidgetIds;
+					return rest;
+				})();
+				isGeneratingCode = !!(focusedPanelWidgetId && generatingWidgetIds[focusedPanelWidgetId]);
+				setCrossTabGenerating(false, generationWidgetId);
+				widgetAbortControllers.delete(generationWidgetId);
+				return;
+			}
+
+			if (response && (response as { error?: string }).error === 'TOKEN_EXPIRED') {
 				patchCodegenUiState(generationWidgetId, {
 					generateCodeStatus: '❌ Authentication expired. Please login again.',
 					lastGenerationFailed: true,
@@ -8214,7 +8439,8 @@ Requirements:
 				return;
 			}
 
-			const generateErrorMessage = response && (response.error || response.message);
+			const generateEnvelope = response as unknown as { error?: string; message?: string };
+			const generateErrorMessage = generateEnvelope && (generateEnvelope.error || generateEnvelope.message);
 			if (generateErrorMessage) {
 				const normalizedMessage = normalizeErrorMessage(generateErrorMessage);
 				patchCodegenUiState(generationWidgetId, {
@@ -8230,8 +8456,10 @@ Requirements:
 				return;
 			}
 
-			const responseData = response?.data || response;
-			const operationId = responseData?.operationId;
+			const generateData = ((response as { data?: unknown }).data ?? response) as {
+				operationId?: string;
+			};
+			const operationId = generateData?.operationId;
 
 			// The Worker serves rebuilt code at the same preview URL, so the panel
 			// must know when the current generation started — hasLiveWorkerPreview()
@@ -8314,6 +8542,16 @@ Requirements:
 					
 					const completedCommitSha = getOperationCommitId(op.metadata);
 					const completedPreviewBuildErr = getOperationPreviewBuildError(op.metadata);
+					const completedCached = getOperationCached(op.metadata);
+					const completedCachedFiles = getOperationCachedFiles(op.metadata);
+					const cachedChatSummary = completedCached
+						? `Already done — the widget is in the state you asked for.` +
+							(completedCommitSha ? ` (Commit: ${completedCommitSha.substring(0, 7)})` : '') +
+							'\nThat change was made earlier in this conversation, so no new generation was needed' +
+							(completedCachedFiles.length > 0
+								? ':\n' + completedCachedFiles.map((p) => `- ${p}`).join('\n')
+								: '.')
+						: null;
 					const generationPanelRef = getWidgetDetailsRef(generationWidgetId);
 					const isFocusedPanel = generationWidgetId === focusedPanelWidgetId;
 					const completedWidgetName = getWidgetById(generationWidgetId)?.name || 'widget';
@@ -8351,18 +8589,25 @@ Requirements:
 					// Refresh version history after every generation so the new commit shows
 					// up in the version menu immediately. Publishing is deliberately not
 					// automatic — the user previews and presses Publish themselves.
+					// Deferred past the preview remount: running this synchronously against
+					// `dynamic_worker_preview_ready` stacked three heavy re-renders on the
+					// main thread in the same 800ms window — the "frozen at 80%" report.
 					if (generationWidgetId) {
 						const { [generationWidgetId]: _resolved, ...restResolved } = shapeHistoryResolvedByWidgetId;
 						shapeHistoryResolvedByWidgetId = restResolved;
-						void loadPublishHistoryForPanel(generationWidgetId, { silent: true }).then(() => {
-							syncWidgetShapeLivePreviews();
-							if (isFocusedPanel) panelDisplayRevision += 1;
-						});
+						setTimeout(() => {
+							void loadPublishHistoryForPanel(generationWidgetId, { silent: true }).then(() => {
+								syncWidgetShapeLivePreviews();
+								if (isFocusedPanel) panelDisplayRevision += 1;
+							});
+						}, 1200);
 					}
 
 					// Always reconcile GitLab HEAD after codegen (metadata.commitId can be missing/stale).
+					// Deferred — same window as the schema/history reloads above.
 					if (generationWidgetId) {
-						void (async () => {
+						setTimeout(() => {
+							void (async () => {
 							try {
 								const fetchedHead = await fetchRepoHeadCommitSha(generationWidgetId);
 								// Prefer the codegen commit from the operation. GitLab HEAD can still
@@ -8404,11 +8649,15 @@ Requirements:
 							} catch (err) {
 								console.warn('[Version] Failed to reconcile HEAD after codegen:', err);
 							}
-						})();
+							})();
+						}, 1000);
 					}
 					if (generationWidgetId) {
 						// console.log('[CompositionEditor] Reloading schemas after codegen', generationWidgetId.substring(0, 8));
-						void loadWidgetSchemas(generationWidgetId, { force: true });
+						// Deferred with the publish-history reload — see comment above.
+						setTimeout(() => {
+							void loadWidgetSchemas(generationWidgetId, { force: true });
+						}, 1600);
 					}
 
 					const completedRepoId = resolveRepositoryIdForWidget(generationWidgetId);
@@ -8427,11 +8676,13 @@ Requirements:
 					});
 
 					const commitShort = completedCommitSha ? completedCommitSha.substring(0, 7) : '';
-					panelChat?.updateLatestCodegenStatusMessage?.(
-						completedPreviewBuildErr
-							? `Code saved${commitShort ? ` (${commitShort})` : ''} — building preview…`
-							: `Code saved${commitShort ? ` (${commitShort})` : ''} — loading preview…`,
-					);
+					if (!completedCached) {
+						panelChat?.updateLatestCodegenStatusMessage?.(
+							completedPreviewBuildErr
+								? `Code saved${commitShort ? ` (${commitShort})` : ''} — building preview…`
+								: `Code saved${commitShort ? ` (${commitShort})` : ''} — loading preview…`,
+						);
+					}
 
 					// console.log('Widget Creator: Code generation operation completed for widget', generationWidgetId.substring(0, 8), ':', op);
 
@@ -8467,13 +8718,17 @@ Requirements:
 					// Final chat message regardless of panel focus — without this, a
 					// closed/unfocused panel never receives the terminal update and the
 					// chat stays on the last progress line (e.g. stuck at 80%).
+					// A cache-served completion gets the "already done" affordance:
+					// it names the earlier change (and files) instead of claiming a
+					// generation just happened.
 					panelChat?.addAssistantMessage(
-						completedPreviewBuildErr
-							? `Code saved${completedCommitSha ? ` (Commit: ${completedCommitSha.substring(0, 7)})` : ''}, but preview build failed:\n${completedPreviewBuildErr}\n\nRebuilding preview…`
-							: `Code generation completed!${completedCommitSha ? ` Commit: ${completedCommitSha.substring(0, 7)}` : ''}\nPreview is loading…`,
+						cachedChatSummary ??
+							(completedPreviewBuildErr
+								? `Code saved${completedCommitSha ? ` (Commit: ${completedCommitSha.substring(0, 7)})` : ''}, but preview build failed:\n${completedPreviewBuildErr}\n\nRebuilding preview…`
+								: `Code generation completed!${completedCommitSha ? ` Commit: ${completedCommitSha.substring(0, 7)}` : ''}\nPreview is loading…`),
 						true
 					);
-					if (!completedPreviewBuildErr) {
+					if (!completedPreviewBuildErr && !completedCached) {
 						panelChat?.updateLatestCodegenStatusMessage?.(
 							`Code generation completed!${completedCommitSha ? ` Commit: ${completedCommitSha.substring(0, 7)}` : ''}\nPreview is loading…`,
 						);
@@ -8506,6 +8761,9 @@ Requirements:
 							await activePanelRef?.refreshPreview?.({ withRetry: true, skipIfAlreadyShowing: true });
 						}
 						activePanelRef?.setPreviewBuildError(null);
+						// TODO(tomorrow): Dupa o generare noua, sincronizarea versiunii in dropdown si istoric se desincronizeaza.
+						// Trebuie armonizata selectia automata a noii versiuni draft (vN) create in istoric,
+						// actualizat trigger-ul pe canvas si in chat la noul numar de versiune si pastrata coerenta intre preview si dropdown.
 						// Show Worker preview on the canvas shape (not the previous Live CDN artifact).
 						shapePreviewSourceByWidgetId = {
 							...shapePreviewSourceByWidgetId,
@@ -8531,10 +8789,13 @@ Requirements:
 								panelChat?.markWidgetHeadAtLatestCommit?.();
 							}, 2500);
 							setTimeout(() => {
-								void (async () => {
-									await handleRefreshScreenshot(generationWidgetId, { quiet: true });
-									// List thumb only from live iframe capture — never Fabric shape icon.
-								})();
+								// 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);
 							// Do NOT auto-publish — user previews first, then clicks Publish / Set live.
 						} else {
@@ -8878,11 +9139,17 @@ Requirements:
 			publishingWidgetId = null;
 			setCrossTabPublishing(false, capturedWidgetId);
 
-			const version = publishData?.data?.version || publishData?.version || 1;
-			const artifactUrl = publishData?.data?.artifactUrl || publishData?.artifactUrl || null;
+			const publishEnvelope = publishData as unknown as {
+				data?: { version?: number; artifactUrl?: string | null; commitSha?: string | null };
+				version?: number;
+				artifactUrl?: string | null;
+				commitSha?: string | null;
+			};
+			const version = publishEnvelope?.data?.version || publishEnvelope?.version || 1;
+			const artifactUrl = publishEnvelope?.data?.artifactUrl || publishEnvelope?.artifactUrl || null;
 			const commitSha =
-				publishData?.data?.commitSha
-				?? publishData?.commitSha
+				publishEnvelope?.data?.commitSha
+				?? publishEnvelope?.commitSha
 				?? commitShaForPublish
 				?? null;
 			applyPublishSuccessToWidgetState(capturedWidgetId, version, artifactUrl, commitSha);
@@ -8930,9 +9197,9 @@ Requirements:
 
 
 	// Token expiration check interval
-	let tokenCheckInterval: number;
+	let tokenCheckInterval: ReturnType<typeof setInterval>;
 	let tokenCheckIntervalTime: number = 10; // seconds — check frequently so logout is prompt
-	let tokenDisplayInterval: number;
+	let tokenDisplayInterval: ReturnType<typeof setInterval>;
 
 	// Reactive variables for real-time token status
 	let tokenTimeLeft: number = 0;
@@ -8944,6 +9211,7 @@ Requirements:
 		widgetPublishStatus,
 		codeGenerationStatus,
 		agentHarnessOutput,
+		dynamicWorkerPreviewStatus,
 		setAuthToken as setWsAuthToken,
 		setWebsocketApiUrl
 	} from './stores/websocketStore.js';
@@ -9014,6 +9282,9 @@ Requirements:
 		// 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);
+		// Keep a component-scope binding so onDestroy can remove the listener —
+		// the arrow itself is scoped to this onMount callback.
+		handleBeforeUnloadRef = handleBeforeUnload;
 
 		// Read canvas id from the route. The route path (`/canvas/<canvasId>`) is the
 		// AUTHORITATIVE canvas (site links, refresh, deep-links); localStorage is only a
@@ -9095,6 +9366,8 @@ Requirements:
 		};
 	});
 
+	let handleBeforeUnloadRef: (() => void) | null = null;
+
 	// Clean up interval on component destroy
 	onDestroy(() => {
 		clearCanvasLoadFailsafe();
@@ -9107,7 +9380,7 @@ Requirements:
 		}
 		// Cross-tab cleanup: remove flags so other tabs don't stay blocked
 		if (typeof window !== 'undefined') {
-			window.removeEventListener('beforeunload', handleBeforeUnload);
+			window.removeEventListener('beforeunload', handleBeforeUnloadRef);
 			window.removeEventListener('storage', handleCrossTabStorageEvent);
 			window.removeEventListener('widgetic:session-extended', handleSiteSessionExtended);
 			window.removeEventListener('click', handleCanvasDropdownOutsideClick);
@@ -9298,6 +9571,19 @@ Requirements:
 		return sanitizePreviewBuildError(raw);
 	}
 
+	/** True when the operation completed from the semantic cache (no new generation ran). */
+	function getOperationCached(metadata?: Record<string, unknown>): boolean {
+		return metadata?.cached === true;
+	}
+
+	/** Changed-file paths reported by a semantic-cache-served operation. */
+	function getOperationCachedFiles(metadata?: Record<string, unknown>): string[] {
+		if (!metadata) return [];
+		const raw = metadata.generatedFiles;
+		if (!Array.isArray(raw)) return [];
+		return raw.filter((p): p is string => typeof p === 'string');
+	}
+
 	function getChatMethodsForWidget(widgetId: string | null | undefined) {
 		if (!widgetId) return chatMethods ?? null;
 		const instanceKey = panelInstanceKeyByWidgetId[widgetId] ?? widgetId;
@@ -9330,6 +9616,9 @@ Requirements:
 
 	function pushCodegenProgressToUi(op: OperationStatus, widgetId: string | null | undefined) {
 		const line = formatCodegenProgressStatus(op);
+		// Feed the freeze watchdog the latest status so a [FreezeReport] names the
+		// stage the UI was showing when the main thread stopped responding.
+		(window as any).__widgeticFreezeWatchdog?.setStatus?.(line);
 		// SSE progress frames can arrive many times per second while the LLM
 		// streams. Each one re-renders every open panel — coalesce them.
 		if (widgetId) {
@@ -9684,8 +9973,7 @@ Requirements:
 			codeGenerationPrompt: storedPrompt,
 			promptImages: [],
 			lastCommitId: hydratedHead,
-			lastPublishedVersion: publishedVersion,
-			selectedWidgetJsPath: widget?.jsPath ?? null,
+			lastPublishedVersion: publishedVersion,				selectedWidgetJsPath: (widget as { jsPath?: string | null } | undefined)?.jsPath ?? null,
 			currentRepositoryId: normalizeRepositoryId(widget),
 			widgetDetailsStep: resolveCreatorWorkflowStep(publishedVersion !== null ? 'edit' : 'create'),
 			generateCodeStatus: null,
@@ -9920,10 +10208,30 @@ Requirements:
 
 	function getPanelEditPreviewUrl(widgetId: string): string | null {
 		const ps = getPanelDisplayState(widgetId);
+		const source = shapePreviewSourceByWidgetId[widgetId];
+		if (source && 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 isPublished = !!(record?.publishedAt ?? record?.published_at);
+				const artifact =
+					record?.artifactUrl ||
+					record?.artifact_url ||
+					(version === ps.lastPublishedVersion ? ps.selectedWidgetJsPath : null);
+				if (isPublished && artifact) {
+					const url = resolvePublishedWidgetUrl(widgetId, version, artifact);
+					if (url) return url;
+				}
+				const previewState = resolveWidgetShapeVersionPreviewState(widgetId);
+				if (previewState?.url) return previewState.url;
+			}
+		}
 		const widget = getWidgetById(widgetId);
 		const version = ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(widget);
 		if (version == null) return null;
-		const jsPath = ps.selectedWidgetJsPath ?? widget?.jsPath ?? null;
+		const jsPath = ps.selectedWidgetJsPath ?? (widget as { jsPath?: string | null } | undefined)?.jsPath ?? null;
 		return resolvePublishedWidgetUrl(widgetId, version, jsPath);
 	}
 
@@ -9947,6 +10255,8 @@ Requirements:
 	// 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;
+		/** Commit the selected version was built from — drives the chat's Head-at-commit badge. */
+		commitSha?: string | null;
 		errorDetails?: Awaited<ReturnType<typeof parseVersionPreviewError>> | null;
 	}> = {};
 	let shapeVersionPreviewRequestId = 0;
@@ -10022,6 +10332,15 @@ Requirements:
 		return fromPanel?.length ? fromPanel : [];
 	}
 
+	/** Newest unpublished version — Worker `/preview` (repo HEAD) shows this version's code. */
+	function getNewestDraftVersionId(widgetId: string): number | null {
+		const draftVersions = getShapePublishHistory(widgetId)
+			.filter((row) => !(row.publishedAt ?? row.published_at))
+			.map((row) => Number(row.version))
+			.filter((v) => Number.isFinite(v));
+		return draftVersions.length > 0 ? Math.max(...draftVersions) : null;
+	}
+
 	function resolveWidgetShapeLivePreviewUrl(widgetId: string): string | null {
 		if (!widgetId) return null;
 		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
@@ -10049,6 +10368,11 @@ Requirements:
 					const url = resolvePublishedWidgetUrl(widgetId, version, artifact);
 					if (url) return url;
 				}
+				// The newest draft IS repo HEAD — Worker `/preview/{widgetId}` already serves this code!
+				const newestDraft = getNewestDraftVersionId(widgetId);
+				if (!isPublished && newestDraft != null && version === newestDraft && workerUrl) {
+					return workerUrl;
+				}
 				return resolveWidgetShapeVersionPreviewState(widgetId)?.url ?? null;
 			}
 			return null;
@@ -10074,6 +10398,13 @@ Requirements:
 			if (!Number.isFinite(version)) return null;
 			return `v${version}`;
 		}
+		// 'preview' = Worker HEAD = newest generated (draft) version. Showing the
+		// Live version here hid every fresh generation behind the old artifact.
+		if (source === 'preview') {
+			const newestDraft = getNewestDraftVersionId(widgetId);
+			if (newestDraft != null) return `v${newestDraft}`;
+			return null;
+		}
 		return liveVersion != null ? `v${liveVersion}` : null;
 	}
 
@@ -10160,6 +10491,13 @@ Requirements:
 	function resolveWidgetShapeVersionSelectedId(widgetId: string): string | null {
 		const source = shapePreviewSourceByWidgetId[widgetId];
 		if (source?.startsWith('v:')) return source;
+		if (source === 'preview') {
+			// Worker HEAD preview = the newest draft — keep the dropdown selection
+			// on it, otherwise the picker kept pointing at the stale Live version.
+			const newestDraft = getNewestDraftVersionId(widgetId);
+			if (newestDraft != null) return `v:${newestDraft}`;
+			return null;
+		}
 		const ps = getPanelDisplayState(widgetId);
 		const liveVersion =
 			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
@@ -10191,9 +10529,12 @@ Requirements:
 		// Published artifacts need no build. Drafts must never substitute HEAD.
 		if (versionId.startsWith('v:')) {
 			const version = Number(versionId.slice(2));
-			if (resolveWidgetShapeLivePreviewUrl(widgetId)) {
+			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 detailsRef = getWidgetDetailsRef(widgetId);
+				detailsRef?.showPublishedArtifact?.(directUrl);
 			} else {
 				void ensureWidgetShapeVersionPreview(widgetId, version);
 			}
@@ -10238,12 +10579,17 @@ Requirements:
 			}
 			shapeVersionPreviewByWidgetId = {
 				...shapeVersionPreviewByWidgetId,
-				[widgetId]: { versionId, requestId, loading: false, error: null, url: previewUrl },
+				[widgetId]: {
+					versionId, requestId, loading: false, error: null, url: previewUrl,
+					commitSha: normalizeCommitSha(commitSha),
+				},
 			};
 			syncWidgetShapeLivePreviews();
 			panelDisplayRevision += 1;
 			shapeVersionPreviewErrorsByKey = { ...shapeVersionPreviewErrorsByKey, [`${widgetId}:${versionId}`]: null };
 			console.log('[VersionPreview] Selection', { widgetId, version, commitSha });
+			const detailsRef = getWidgetDetailsRef(widgetId);
+			detailsRef?.showPublishedArtifact?.(previewUrl);
 		} catch (error: unknown) {
 			if (
 				shapePreviewSourceByWidgetId[widgetId] !== versionId
@@ -10275,6 +10621,14 @@ Requirements:
 		if (source.startsWith('v:')) {
 			const parsed = parseInt(source.slice(2), 10);
 			version = Number.isFinite(parsed) ? parsed : null;
+			// A draft version has no publish-history row to read a commit from, so
+			// without the sha the version preview reported we fell back to repo HEAD
+			// and the badge stayed on the newest turn instead of moving to the
+			// selected version's own turn.
+			const previewState = shapeVersionPreviewByWidgetId[widgetId];
+			if (previewState?.versionId === source && previewState.commitSha) {
+				return normalizeCommitSha(previewState.commitSha);
+			}
 		} else {
 			version = ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
 		}
@@ -10293,28 +10647,84 @@ Requirements:
 		return normalizeCommitSha(ps.lastCommitId);
 	}
 
+	/**
+	 * Head commit per open panel, for the chat's Head-at-commit badge.
+	 *
+	 * The resolver reads the selected version and its preview state out of records
+	 * the compiler cannot follow through the call, so calling it straight from the
+	 * template never re-ran on a version switch: the chat kept the previous
+	 * commit and the badge stayed on the newest turn. Naming the records here is
+	 * what makes the switch reach the chat.
+	 */
+	let headCommitShaByWidgetId: Record<string, string | null> = {};
+	/**
+	 * Short commit sha → "Version N" per panel, so a chat turn reads as the version
+	 * it produced. A hash is meaningless to a non-developer, so it stays behind
+	 * debug mode and this label is what the turn shows.
+	 */
+	let versionLabelsByWidgetId: Record<string, Record<string, string>> = {};
+	$: {
+		void shapePreviewSourceByWidgetId;
+		void shapeVersionPreviewByWidgetId;
+		void panelDisplayRevision;
+		const nextHeads: Record<string, string | null> = {};
+		const nextLabels: Record<string, Record<string, string>> = {};
+		for (const widgetId of openWidgetPanelIds) {
+			nextHeads[widgetId] = resolveViewingCommitShaForPanel(widgetId);
+			nextLabels[widgetId] = buildVersionLabelsForPanel(widgetId);
+		}
+		headCommitShaByWidgetId = nextHeads;
+		versionLabelsByWidgetId = nextLabels;
+	}
+
+	/** Commit shas are keyed on 7 chars — that is what the chat summaries carry. */
+	function versionLabelKey(sha: string | null | undefined): string | null {
+		const normalized = normalizeCommitSha(sha);
+		return normalized ? normalized.slice(0, 7) : null;
+	}
+
+	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}`;
+		}
+		// 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)}`;
+		}
+		return labels;
+	}
+
 	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);
+		measureSync('sync-widget-shape-previews', () => {
+			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);
 			}
-		} catch (err) {
-			console.warn('[CreatorApp] WidgetShape live preview sync failed', err);
-		}
+		});
 	}
 
 	function getPanelEmbedPreviewUrl(widgetId: string): string | null {
@@ -11729,6 +12139,17 @@ $: if ($agentHarnessOutput?.timestamp) {
 	}
 }
 
+// Worker preview ready via WebSocket event — reload canvas shape preview immediately
+$: if ($dynamicWorkerPreviewStatus.widgetId && $dynamicWorkerPreviewStatus.previewUrl) {
+	const wsReadyWidgetId = $dynamicWorkerPreviewStatus.widgetId;
+	shapePreviewSourceByWidgetId = {
+		...shapePreviewSourceByWidgetId,
+		[wsReadyWidgetId]: 'preview',
+	};
+	syncWidgetShapeLivePreviews();
+	widgetShapeLivePreviewsRef?.requestReload?.(wsReadyWidgetId);
+}
+
 // ===================== Publish History =====================
 
 /**
@@ -11749,13 +12170,12 @@ async function loadPublishHistoryForPanel(widgetId: string, opts: { silent?: boo
 		});
 		return;
 	}
-	try {
-		const historyRes = await widgetsClient.getWidgetPublishHistory({ widgetId });
-		const history = Array.isArray(historyRes)
-			? historyRes
-			: (Array.isArray((historyRes as { data?: unknown })?.data)
-				? (historyRes as { data: unknown[] }).data
-				: []);
+	try {			const historyRes = await widgetsClient.getWidgetPublishHistory({ widgetId });
+			const historyEnvelope = historyRes as unknown as { data?: unknown };
+			// SDK types the envelope ({ success, data }); a response-transform middleware
+			// may unwrap it, so a bare array stays tolerated.
+			const historyData = Array.isArray(historyRes) ? historyRes : historyEnvelope?.data;
+			const history = (Array.isArray(historyData) ? historyData : []) as PublishHistoryRecord[];
 		patchPanelSnapshot(widgetId, {
 			publishHistory: history,
 			publishHistoryResolved: true,
@@ -11893,7 +12313,9 @@ function togglePublishHistory(triggerEl?: HTMLElement | null) {
 			const cluster = triggerEl.closest('.wc-version-history-ct') as HTMLElement | null;
 			const rect = (cluster ?? triggerEl).getBoundingClientRect();
 			liveHistoryPanelTop = Math.round(rect.bottom + 4);
-			liveHistoryPanelRight = Math.round(window.innerWidth - rect.right);
+			// Rows inset their action button 12px from the panel edge (panel p-1 4px + row px-2 8px).
+			// Shift right by 12px so the per-row action buttons line up under the header action button.
+			liveHistoryPanelRight = Math.round(window.innerWidth - rect.right) - 12;
 		}
 		loadPublishHistory();
 	}
@@ -12053,8 +12475,12 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				// console.log('Signup response:', signupResponse);
 
 				// show error signup status
-				if (!signupResponse || !signupResponse.user) {
-					authStatus = signupResponse?.message ?? 'Signup failed.';
+				// signupUser is typed Promise<void>; it resolves to undefined on the
+				// success path, so a falsy response IS the success signal. Error details
+				// arrive via the thrown ResponseError caught below.
+				const signupEnvelope = signupResponse as unknown as { user?: unknown; message?: string } | undefined;
+				if (!signupEnvelope || !signupEnvelope.user) {
+					authStatus = signupEnvelope?.message ?? 'Signup failed.';
 					return;
 				}
 
@@ -12076,7 +12502,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			// console.log('Login response:', loginResponse);
 
 			// show success login status
-			const payload = loginResponse?.data;
+			// The generated loginUser return type is mis-derived (a billing endpoint's
+			// shape); the real /auth/login payload is a session envelope. Cast honestly.
+			const payload = (loginResponse as unknown as { data?: { accessToken?: string; user?: Record<string, unknown> } })?.data;
 			if (payload?.accessToken) {
 				currentUserToken = payload.accessToken;
 
@@ -12142,7 +12570,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			// console.log('WidgetCreator.updateTokenStatus: Decoded token:', decoded);
 
 			// if the decoded token has an expiration field, update the token status
-			if (decoded && decoded.exp) {
+			if (decoded && typeof decoded.exp === 'number') {
 				const currentTime = Math.floor(Date.now() / 1000);
 				const expUnix = decoded.exp;
 				tokenTimeLeft = expUnix - currentTime;
@@ -12316,17 +12744,20 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			// console.log('Available fields:', Object.keys(decodedToken));
 
 			// Extract user info from Supabase JWT structure
+			// user_metadata is an untyped JWT claim blob — index it explicitly so the
+			// accesses below are checked reads, not property probes on `unknown`.
+			const userMetadata = (decodedToken.user_metadata ?? {}) as Record<string, unknown>;
 			user = {
 				id: decodedToken.sub || decodedToken.user_id || decodedToken.id || 'token-user',
-				email: decodedToken.email || decodedToken.user_metadata?.email || 'user@token-auth.com',
+				email: userMetadata.email || 'user@token-auth.com',
 				name:
-					decodedToken.user_metadata?.name ||
-					decodedToken.user_metadata?.full_name ||
+					userMetadata.name ||
+					userMetadata.full_name ||
 					decodedToken.name ||
 					decodedToken.full_name ||
 					'Token User',
 				role: decodedToken.role || 'user',
-				avatar: decodedToken.user_metadata?.avatar_url || decodedToken.user_metadata?.picture
+				avatar: userMetadata.avatar_url || userMetadata.picture
 			};
 
 			// Show more detailed status with actual extracted info
@@ -12385,6 +12816,14 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	 */
 	const shapeThumbnailCaptureInFlight = new Set<string>();
 
+	/**
+	 * Whole-function single-flight guard for handleRefreshScreenshot.
+	 * Stacked html2canvas captures run inside the preview iframe, which shares
+	 * the page main thread — a capture storm froze the entire site with no
+	 * parent-page [FreezeReport] (long tasks attributed to the iframe).
+	 */
+	const screenshotCaptureInFlight = new Set<string>();
+
 	/**
 	 * Called when a Widget Image shape is clicked on the canvas.
 	 * Selects the linked widget and opens WidgetDetails.
@@ -12463,7 +12902,6 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			notifyHostWidgetName(widget);
 		}
 		await openWidgetDetailsPanel(widgetId);
-		scheduleCanvasShapePreviewSync(widgetId);
 	}
 
 	/**
@@ -12566,10 +13004,10 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			}
 
 			const sourceHasCode =
-				!!normalizeRepositoryId(newWidget)
+				!!normalizeRepositoryId(asWidgetSummary(newWidget))
 				|| !!((newWidget as { jsPath?: string | null; js_path?: string | null }).jsPath
 					?? (newWidget as { js_path?: string | null }).js_path)
-				|| resolvePublishedVersionFromWidget(newWidget) !== null
+				|| resolvePublishedVersionFromWidget(asWidgetSummary(newWidget)) !== null
 				|| !!sourceCommit;
 
 			if (!canvasPrimaryWidgetId) {
@@ -12577,7 +13015,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			}
 
 			// Duplicate stays a sibling on the canvas — do not make it the primary widget.
-			await selectWidget(newWidget, { skipPlaceShape: true });
+			await selectWidget(asWidgetSummary(newWidget), { skipPlaceShape: true });
 			notifyHostWidgetName(getWidgetById(canvasPrimaryWidgetId) ?? getWidgetById(sourceWidgetId));
 
 			showToast('success', 'Widget duplicated', {
@@ -12607,11 +13045,11 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				try {
 					await handleWidgetDataChanged(newWidget.id);
 					const freshWidget = getWidgetById(newWidget.id);
-					let repoId = freshWidget ? normalizeRepositoryId(freshWidget) : normalizeRepositoryId(newWidget);
+				let repoId = freshWidget ? normalizeRepositoryId(freshWidget) : normalizeRepositoryId(asWidgetSummary(newWidget));
 
 					if (!repoId) {
 						// console.log('[WidgetCreator] Duplicate has no repo after re-fetch, creating one...');
-						repoId = await ensureWidgetRepository(freshWidget || newWidget, { silent: true });
+						repoId = await ensureWidgetRepository(freshWidget || asWidgetSummary(newWidget), { silent: true });
 						if (repoId) {
 							widgets = widgets.map((w) => w.id === newWidget.id ? { ...w, repositoryId: repoId } : w);
 							// console.log('[WidgetCreator] Repository created for duplicate:', repoId);
@@ -13072,14 +13510,20 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		}
 
 		let objectCount = 0;
-		try {
-			const parsed = JSON.parse(json);
-			// saveCanvas() wraps as { version, savedAt, viewport, canvas: { objects: [...] } }
-			const objects = parsed?.canvas?.objects ?? parsed?.objects ?? [];
-			objectCount = Array.isArray(objects) ? objects.length : 0;
-		} catch {
-			// ignore parse errors for debug
-		}
+		// Canvas JSON carries the shapes' embedded images, so it reaches megabytes on
+		// a busy canvas and every parse of it blocks the main thread. Parse once and
+		// reuse it for the API payload below.
+		let parsedCanvas: any = null;
+		measureSync('canvas-autosave:parse', () => {
+			try {
+				parsedCanvas = JSON.parse(json);
+				// saveCanvas() wraps as { version, savedAt, viewport, canvas: { objects: [...] } }
+				const objects = parsedCanvas?.canvas?.objects ?? parsedCanvas?.objects ?? [];
+				objectCount = Array.isArray(objects) ? objects.length : 0;
+			} catch {
+				// ignore parse errors for debug
+			}
+		});
 
 		if (isUnmountSave) {
 			// console.log(`[CanvasDebug] Unmount save: objectCount=${objectCount}, lastSavedCount=${lastSavedCanvasObjectCount}`);
@@ -13112,11 +13556,18 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 
 		// Save to durable L1 fallback (always, even with 0 objects for legitimate clears)
 		saveCanvasState(canvasId, json);
-		// Keep the legacy localStorage copy in sync for downgrade safety.
-		try {
-			localStorage.setItem(getCanvasStorageKey(), json);
-		} catch (err) {
-			console.warn('[WidgetCreator] Failed to save canvas to localStorage:', err);
+		// Keep the legacy localStorage copy in sync for downgrade safety. `setItem` is
+		// a synchronous disk write of the whole canvas, so during a generation it is
+		// deferred to the end: the durable IndexedDB copy above is already written,
+		// and the mirror exists only for a downgrade.
+		if (!isAnyWidgetGenerating() || force || isUnmountSave) {
+			measureSync('canvas-autosave:localStorage-mirror', () => {
+				try {
+					localStorage.setItem(getCanvasStorageKey(), json);
+				} catch (err) {
+					console.warn('[WidgetCreator] Failed to save canvas to localStorage:', err);
+				}
+			});
 		}
 
 		// Save to API via SDK with sequence race protection
@@ -13126,7 +13577,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				await canvasesClient.updateCanvas({
 					id: canvasId,
 					updateCanvasRequest: {
-						canvasContent: JSON.parse(json)
+						canvasContent: parsedCanvas ?? JSON.parse(json)
 					}
 				});
 				if (currentSeq < lastResolvedAutosaveSequence) {
@@ -13336,13 +13787,14 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{ headers: { 'Idempotency-Key': idempotencyKey } }
 			);
 
-			if (!response || response.error || response.message) {
+			const createEnvelope = response as unknown as { error?: string; message?: string };
+			if (!response || createEnvelope.error || createEnvelope.message) {
 				console.error('[WidgetCreator] Widget create on first send failed:', response);
 				showToast('error', 'Failed to create widget from design');
 				return null;
 			}
 
-			const newWidget = response.data || response;
+			const newWidget = asWidgetSummary((response as { data?: unknown }).data ?? response);
 			if (!newWidget?.id) {
 				showToast('warning', 'Widget created but no ID returned');
 				return null;
@@ -13613,7 +14065,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	}
 
 	async function ensureWidgetRepository(
-		widget: WidgetSummary,
+		widget: WidgetSummary | null | undefined,
 		options: { forceRecreate?: boolean; silent?: boolean } = {}
 	): Promise<string | null> {
 		const { forceRecreate = false, silent = false } = options;
@@ -13738,8 +14190,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			});
 			// console.log('Widget Creator: Repository creation response:', response);
 
-			const repoData = response?.data || response;
-			const repoId = repoData?.id || repoData?.repoId || repoData?.repo_id || null;
+			const repoData = ((response as unknown as { data?: Record<string, unknown> }).data ?? response) as Record<string, unknown>;
+			const repoId = (repoData?.id || repoData?.repoId || repoData?.repo_id || null) as string | null;
 
 			if (!repoId) {
 				showToast('error', 'Repository creation failed', {
@@ -13826,7 +14278,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			const response = await widgetsClient.deleteWidget(
 				{
 					id: adminDeleteWidget.id,
-					reason: 'admin_delete'
+					deleteWidgetRequest: { reason: 'admin_delete' }
 				},
 				{
 					headers: {
@@ -13835,10 +14287,14 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				}
 			);
 
-			if (response?.error || response?.message) {
+			// deleteWidget resolves void; only a thrown ResponseError (caught below)
+			// carries a failure. The defensive envelope check is kept for the response-
+			// transform middleware, but must go through an honest cast.
+			const deleteEnvelope = response as unknown as { error?: string; message?: string } | undefined;
+			if (deleteEnvelope && (deleteEnvelope.error || deleteEnvelope.message)) {
 				console.error('Admin widget deletion failed:', response);
 				showToast('error', 'Delete failed', {
-					description: response?.message || response?.error || 'Unknown error'
+					description: deleteEnvelope?.message || deleteEnvelope?.error || 'Unknown error'
 				});
 				adminDeleteLoading = false;
 				return;
@@ -14152,6 +14608,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				onTranslateEnd={(widgetId) => {
 					canvasRef?.commitWidgetShapeTranslate?.(widgetId);
 				}}
+				onOverlayDragChange={(active) => {
+					canvasRef?.setWidgetShapeOverlayDragActive?.(active);
+				}}
 				onSelectShape={(widgetId) => {
 					canvasRef?.selectWidgetShapeById?.(widgetId);
 					canvasSelectedWidgetShapeId = widgetId;
@@ -14161,6 +14620,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 					void openWidgetDetailsPanel(widgetId);
 				}}
 				onRefresh={handleWidgetShapeRefresh}
+				isGenerating={isAnyWidgetGenerating()}
 			/>
 
 			<!-- ═══ PANEL 2: Widgets Panel — debug + showWidgetsList (site passes false) ═══ -->
@@ -14564,8 +15024,6 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 					if (isPanelFocused && previewWidgetId === panelWidgetId) {
 						chatMethods?.clearStalePreviewBuildFailures?.();
 					}
-					// Keep canvas WidgetShape thumbnail aligned with the live Worker preview.
-					scheduleCanvasShapePreviewSync(previewWidgetId);
 					if (detail?.step === 'create' || ps.widgetDetailsStep === 'create') {
 						applyPanelCompositionToPreview(previewWidgetId);
 					}
@@ -14800,10 +15258,13 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{@const shapeSource = shapePreviewSourceByWidgetId[panelWidgetId] || defaultVersionSource}
 				{@const viewingVersion = shapeSource && shapeSource.startsWith('v:')
 					? parseInt(shapeSource.slice(2), 10)
-					// A 'preview' source (Worker HEAD, unpublished) is not a published
-					// version — falling back to panelPublishedVersion produced `vnull`
-					// right after generation. The newest draft IS this HEAD's version.
-					: (newestDraft ? newestDraft.version : panelPublishedVersion)}
+					: 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)
+						: panelPublishedVersion}
 				{@const viewingIsLive = Number(viewingVersion) === Number(panelPublishedVersion)}
 				<!--
 					A version is a Draft until it is published. The history is one
@@ -14841,13 +15302,13 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							}}
 							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"
+							class="wc-version-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] 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"
+							class="wc-version-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-600 opacity-80"
 							title="Live — generate new code to Publish a new version"
 						>Live</span>
 					{:else if viewingIsDraft}
@@ -14863,7 +15324,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								}}
 								disabled={!canPublishDraftVersionForPanel(panelWidgetId, viewingVersion) || getPublishGateForPanel(panelWidgetId, Number(viewingVersion)).disabled}
 								title="Build this draft version and make it the Live version"
-								class="wc-version-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+								class="wc-version-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] 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>
@@ -14880,7 +15341,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							}}
 							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"
+							class="wc-version-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] 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>
@@ -14893,15 +15354,20 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								aria-label="Close version history"
 								onclick={() => { isHistoryOpen = false; }}
 							></button>
+							{@const hasChatScroll = ps.publishHistory.length > 5}
 							<div
-								class="wc-version-history-panel flex flex-col gap-1 rounded-md border border-emerald-200 bg-white shadow-lg p-1.5 z-[9999] w-max"
-								style="position: fixed; top: {liveHistoryPanelTop}px; right: {liveHistoryPanelRight}px; max-width: min(22rem, calc(100vw - 16px));"
+								class="wc-version-history-panel rounded-md border border-emerald-200 bg-white shadow-lg p-1 z-[9999] w-max"
+								style="position: fixed; top: {liveHistoryPanelTop}px; right: {liveHistoryPanelRight}px;"
 							>
 							{#if isLoadingHistory}
 								<p class="text-xs text-emerald-500 animate-pulse text-center py-2">Loading history...</p>
 							{:else if ps.publishHistory.length === 0}
 								<p class="text-xs text-emerald-400 text-center py-2">No history records yet. Generate or publish to start tracking.</p>
 							{:else}
+								<div
+									class="wc-version-history-scroll flex flex-col gap-1 overflow-x-hidden {hasChatScroll ? 'overflow-y-auto' : 'overflow-y-visible'}"
+									style="{hasChatScroll ? 'max-height: 185px; margin-right: -4px; padding-right: 4px;' : 'max-height: none;'} scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;"
+								>
 								{#each ps.publishHistory as record (record.id)}
 									{@const rowVersion = Number(record.version)}
 									{@const rowIsDraft = !(record.publishedAt ?? record.published_at)}
@@ -14922,6 +15388,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 										publishDisabledReason={publishGate.disabled ? publishGate.reason : null}
 										setLiveDisabled={isSettingLiveVersion === record.version}
 										onselect={() => {
+											isHistoryOpen = false;
 											handleWidgetShapeVersionChange(panelWidgetId, `v:${record.version}`);
 										}}
 										onpublish={() => {
@@ -14933,6 +15400,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 										}}
 									/>
 								{/each}
+								</div>
 							{/if}
 							</div>
 						</Portal>
@@ -15021,6 +15489,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 					class="generation-scroll-ct flex flex-col h-full min-h-0 overflow-y-auto border-t border-gray-200"
 					style="padding: 0;"
 					use:nativeScrollbarPadding={0}
+					use:pinScrollToBottom
 					onmousedown={() => { if (!isPanelFocused) focusWidgetPanel(panelWidgetId); }}
 				>
 				{#key panelInstanceKey}
@@ -15028,11 +15497,11 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							class="code-generation-chat-host w-full min-h-0 {chatUserHeight == null ? 'flex-1' : 'shrink-0'}"
 							data-widget-chat-height={panelWidgetId}
 							style={chatUserHeight == null
-								? `flex: 1 1 auto; min-height: ${CHAT_MIN_HEIGHT}px;`
+								? `flex: 1 1 auto; min-height: ${CHAT_AUTO_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 rounded-none border-0"
-							style="height: 100%; min-height: {CHAT_MIN_HEIGHT}px;"
+							style="height: 100%; min-height: {chatUserHeight == null ? CHAT_AUTO_MIN_HEIGHT : CHAT_MIN_HEIGHT}px;"
 							resizeExpandsContainer={true}
 							onMessagesResize={(deltaPx) => handleChatMessagesResize(panelWidgetId, deltaPx)}
 							showLogs={debugMode}
@@ -15059,7 +15528,8 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									autoCodeDetection: false,
 								}
 							}}
-							widgetHeadCommitSha={resolveViewingCommitShaForPanel(panelWidgetId) || ps.lastCommitId}
+							widgetHeadCommitSha={headCommitShaByWidgetId[panelWidgetId] || ps.lastCommitId}
+							versionLabelByCommitSha={versionLabelsByWidgetId[panelWidgetId] || {}}
 							onSendMessage={(content, attachments) => handleChatSendMessage(content, attachments, panelWidgetId)}
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}
 							onUploadChatFile={handleChatUploadFile}
@@ -15271,7 +15741,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{/if}
 
 				<!-- ─── Schema loading / error / PropsEditor ─── -->
-				{@const panelSchemasLoading = (panelDisplayRevision, ps.compositionSchemasLoading)}
+				{@const panelSchemasLoading = rev(panelDisplayRevision, ps.compositionSchemasLoading)}
 				{@const panelSchemaLoadLabel = getPanelSchemaLoadLabel(panelWidgetId)}
 				{#if panelSchemasLoading}
 					<div class="composition-editor-loading flex flex-col items-center justify-center py-8">
@@ -15576,7 +16046,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 {/if}
 
 <!-- Delete Widget Shape Confirmation Dialog -->
-<Dialog.Root class="confirm-delete-dialog-root" bind:open={deleteDialogOpen} onOpenChange={(open) => { if (!open) handleDeleteDialogResponse('cancel'); }}>
+<!-- Dialog.Root (bits-ui AlertDialogRoot) exposes no class prop — styling hooks
+     live on Content/Header below. -->
+<Dialog.Root bind:open={deleteDialogOpen} onOpenChange={(open) => { if (!open) handleDeleteDialogResponse('cancel'); }}>
 	<Dialog.Content class="confirm-delete-dialog-content max-w-md bg-white z-9999">
 		<Dialog.Header class="confirm-delete-dialog-header">
 			<Dialog.Title>Delete Widget Shape</Dialog.Title>
@@ -15618,7 +16090,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 </Dialog.Root>
 
 <!-- Delete Canvas Confirmation Dialog -->
-<Dialog.Root class="confirm-delete-canvas-dialog-root" bind:open={showDeleteCanvasDialog} onOpenChange={(open) => { if (!open) { showDeleteCanvasDialog = false; deleteCanvasTarget = null; } }}>
+<Dialog.Root bind:open={showDeleteCanvasDialog} onOpenChange={(open) => { if (!open) { showDeleteCanvasDialog = false; deleteCanvasTarget = null; } }}>
 	<Dialog.Content class="confirm-delete-canvas-dialog-content max-w-sm bg-white z-9999">
 		<Dialog.Header class="confirm-delete-canvas-dialog-header">
 			<Dialog.Title>Delete Canvas</Dialog.Title>
@@ -15678,7 +16150,6 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 
 <!-- Confirm Generation Dialog (shown on convert-to-widget before auto-generating) -->
 <Dialog.Root
-	class="confirm-generate-dialog-root"
 	open={confirmGenerateDialogOpen}
 	onOpenChange={(open) => {
 		confirmGenerateDialogOpen = open;
@@ -15821,21 +16292,24 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		outline: none;
 		box-shadow: none;
 	}
-	.wc-version-history-panel {
+	.wc-version-history-scroll {
 		scrollbar-width: thin;
 		scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 	}
-	.wc-version-history-panel::-webkit-scrollbar {
-		width: 8px;
+	.wc-version-history-scroll::-webkit-scrollbar {
+		width: 4px;
 		background: transparent;
 	}
-	.wc-version-history-panel::-webkit-scrollbar-track {
+	.wc-version-history-scroll::-webkit-scrollbar-track {
 		background: transparent;
 	}
-	.wc-version-history-panel::-webkit-scrollbar-thumb {
+	.wc-version-history-scroll::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.2);
 		border-radius: 4px;
 	}
+	.wc-version-history-scroll::-webkit-scrollbar-thumb:hover {
+		background: rgba(0, 0, 0, 0.35);
+	}
 	.generation-scroll-ct {
 		scrollbar-width: thin;
 		scrollbar-color: rgba(0, 0, 0, 0.22) transparent;