@widgetic/creator 0.3.65 → 0.3.67

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';
 
 	/**
@@ -71,7 +76,7 @@
 	import { persistWidgetThumbnail } from './utils/persistWidgetThumbnail.js';
 	import { nativeScrollbarPadding } from './utils/nativeScrollbarPadding.js';
 	import { pinScrollToBottom } from './utils/pinScrollToBottom.js';
-	import { installFreezeWatchdog } from './utils/freezeWatchdog.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';
 
@@ -113,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).
@@ -121,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;
@@ -485,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,6 +529,8 @@
 	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();
@@ -579,7 +592,10 @@
 		saveWidgetDraft,
 		readWidgetDraft,
 		deleteWidgetDraft,
-		copyWidgetDraft
+		copyWidgetDraft,
+		saveShapeThumbnail,
+		readShapeThumbnail,
+		canPersistShapeThumbnails
 	} from './utils/creatorDraftStorage';
 
 	/**
@@ -635,10 +651,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';
@@ -868,7 +905,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;
@@ -1004,6 +1041,7 @@
 			fileSize?: number;
 		}>,
 		sourceWidgetId?: string,
+		sendOptions?: { skipIntentGate?: boolean },
 	) {
 		const widgetId = sourceWidgetId ?? selectedWidgetId;
 		if (!widgetId) return;
@@ -1126,6 +1164,7 @@
 			attachmentIds: cdnUploadIds.length > 0 ? cdnUploadIds : undefined,
 			promptImagesOverride: effectivePromptImages.length > 0 ? effectivePromptImages : undefined,
 			persistFileAttachments: persistFileAttachments.length > 0 ? persistFileAttachments : undefined,
+			skipIntentGate: sendOptions?.skipIntentGate === true,
 		});
 	}
 
@@ -1376,6 +1415,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 {
@@ -1490,10 +1599,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) {
@@ -1649,6 +1760,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),
@@ -1716,7 +1835,10 @@
 			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);
@@ -2479,8 +2601,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;
@@ -2565,7 +2693,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 || [])
@@ -3657,7 +3785,7 @@
 				!compositionRecordProjectId(selectedComposition as Record<string, unknown>);
 			const res = await compositionsClient.updateComposition({
 				id: selectedComposition.id,
-				updateCompositionRequest: {
+				updateComposition: {
 					content: buildCompositionContentPayload(),
 					...(needsProjectBackfill ? projectBackfill : {}),
 				}
@@ -3749,7 +3877,7 @@
 		try {
 			await compositionsClient.updateComposition({
 				id: compositionId,
-				updateCompositionRequest: { name: trimmed }
+				updateComposition: { name: trimmed }
 			});
 			showToast('success', 'Composition renamed');
 			await loadCompositions();
@@ -3810,7 +3938,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;
@@ -4006,11 +4136,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,
 				}));
 				
@@ -4750,7 +4880,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') {
@@ -5698,22 +5833,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(
@@ -5810,9 +5952,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;
 	}
 
@@ -6218,10 +6364,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 ??
@@ -6703,7 +6849,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) {
@@ -7021,13 +7172,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);
@@ -7702,6 +7854,16 @@
 		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)' : '');
@@ -7757,7 +7919,7 @@
 							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 {
@@ -7816,7 +7978,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);
@@ -7928,6 +8090,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;
@@ -8017,6 +8181,7 @@ Requirements:
 			attachmentIds: options.attachmentIds,
 			promptImagesOverride: options.promptImagesOverride,
 			persistFileAttachments: options.persistFileAttachments,
+			skipIntentGate: options.skipIntentGate,
 		});
 	}
 
@@ -8038,6 +8203,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;
@@ -8274,17 +8441,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,
@@ -8297,7 +8514,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, {
@@ -8313,8 +8531,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()
@@ -8397,6 +8617,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';
@@ -8521,11 +8751,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);
 
@@ -8561,13 +8793,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…`,
 						);
@@ -8978,11 +9214,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);
@@ -9030,9 +9272,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;
@@ -9115,6 +9357,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
@@ -9196,6 +9441,8 @@ Requirements:
 		};
 	});
 
+	let handleBeforeUnloadRef: (() => void) | null = null;
+
 	// Clean up interval on component destroy
 	onDestroy(() => {
 		clearCanvasLoadFailsafe();
@@ -9208,7 +9455,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);
@@ -9399,6 +9646,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;
@@ -9788,8 +10048,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,
@@ -10047,7 +10306,7 @@ Requirements:
 		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);
 	}
 
@@ -10071,6 +10330,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;
@@ -10393,7 +10654,10 @@ 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;
@@ -10432,6 +10696,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));
 		}
@@ -10450,28 +10722,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 {
@@ -11917,13 +12245,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,
@@ -12223,8 +12550,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;
 				}
 
@@ -12246,7 +12577,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;
 
@@ -12312,7 +12645,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;
@@ -12486,17 +12819,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
@@ -12743,10 +13079,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) {
@@ -12754,7 +13090,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', {
@@ -12784,11 +13120,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);
@@ -13249,14 +13585,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}`);
@@ -13289,11 +13631,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
@@ -13303,7 +13652,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				await canvasesClient.updateCanvas({
 					id: canvasId,
 					updateCanvasRequest: {
-						canvasContent: JSON.parse(json)
+						canvasContent: parsedCanvas ?? JSON.parse(json)
 					}
 				});
 				if (currentSeq < lastResolvedAutosaveSequence) {
@@ -13513,13 +13862,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;
@@ -13790,7 +14140,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;
@@ -13915,8 +14265,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', {
@@ -14003,7 +14353,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			const response = await widgetsClient.deleteWidget(
 				{
 					id: adminDeleteWidget.id,
-					reason: 'admin_delete'
+					deleteWidgetRequest: { reason: 'admin_delete' }
 				},
 				{
 					headers: {
@@ -14012,10 +14362,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;
@@ -15218,11 +15572,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}
@@ -15249,7 +15603,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}
@@ -15461,7 +15816,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">
@@ -15766,7 +16121,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>
@@ -15808,7 +16165,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>
@@ -15868,7 +16225,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;