@widgetic/creator 0.3.63 → 0.3.65

package/dist/CreatorApp.svelte

@@ -70,6 +70,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 } from './utils/freezeWatchdog.js';
 	import { streamOperationUpdates } from './utils/operationStream.js';
 	import { generateEmbedCode, EMBED_FORMATS, EMBED_FORMAT_LABELS, type EmbedFormat } from './utils/embedCode.js';
 
@@ -494,7 +496,10 @@
 	let WidgeticCanvas: any;
 	let canvasRef: any;
 	/** HTML iframe overlays over Fabric WidgetShapes (W3). */
-	let widgetShapeLivePreviewsRef: { sync?: () => void } | null = null;
+	let widgetShapeLivePreviewsRef: {
+		sync?: () => void;
+		requestReload?: (widgetId: string) => void;
+	} | null = null;
 	/** Selected WidgetShape id for chrome highlight (from Fabric selection). */
 	let canvasSelectedWidgetShapeId: string | null = null;
 	let widgetDetailsModulePromise: Promise<any> | null = null;
@@ -515,8 +520,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();
@@ -794,6 +831,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;
@@ -1575,6 +1615,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' });
@@ -1654,19 +1697,20 @@
 
 	/** 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);
@@ -1680,13 +1724,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
@@ -1709,6 +1774,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);
@@ -1734,7 +1801,6 @@
 		});
 		return null;
 	}
-	
 	function normalizeConversationRecords(json: any): any[] {
 		const raw = json?.data ?? json?.conversations ?? json;
 		const list = Array.isArray(raw)
@@ -7616,12 +7682,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;
 			}
@@ -7640,6 +7706,24 @@
 		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;
@@ -7670,7 +7754,7 @@
 					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?.();
@@ -7710,8 +7794,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' });
@@ -7762,6 +7845,8 @@
 				if (!quiet) {
 					showToast('error', 'Screenshot capture failed', { duration: 3000 });
 				}
+			} finally {
+				screenshotCaptureInFlight.delete(widgetId);
 			}
 	}
 
@@ -7968,6 +8053,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);
@@ -8230,6 +8316,11 @@ Requirements:
 			const responseData = response?.data || response;
 			const operationId = responseData?.operationId;
 
+			// The Worker serves rebuilt code at the same preview URL, so the panel
+			// must know when the current generation started — hasLiveWorkerPreview()
+			// only counts frames loaded after this moment as "fresh".
+			getWidgetDetailsRef(generationWidgetId)?.markCodegenStarted?.();
+
 			if (!operationId) {
 				patchCodegenUiState(generationWidgetId, {
 					generateCodeStatus: '❌ Code generation started, but no operation ID was returned.',
@@ -8343,18 +8434,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
@@ -8396,11 +8494,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);
@@ -8498,12 +8600,19 @@ 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,
 							[generationWidgetId]: 'preview',
 						};
 						syncWidgetShapeLivePreviews();
+						// The Worker serves the rebuilt code at the SAME /preview URL — sync()
+						// only reloads when src changes, so force a cache-busted iframe reload
+						// on the canvas shape overlay or it keeps showing the previous version.
+						widgetShapeLivePreviewsRef?.requestReload?.(generationWidgetId);
 						panelDisplayRevision += 1;
 						if (!completedPreviewBuildErr) {
 							await applyDesignSchemaDefaultsToPreview(generationWidgetId);
@@ -8519,10 +8628,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 {
@@ -8932,6 +9044,7 @@ Requirements:
 		widgetPublishStatus,
 		codeGenerationStatus,
 		agentHarnessOutput,
+		dynamicWorkerPreviewStatus,
 		setAuthToken as setWsAuthToken,
 		setWebsocketApiUrl
 	} from './stores/websocketStore.js';
@@ -9318,10 +9431,46 @@ 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) {
-			patchCodegenUiState(widgetId, { generateCodeStatus: line });
-		}
-		getChatMethodsForWidget(widgetId)?.updateLatestCodegenStatusMessage?.(line);
+			scheduleCodegenStatusPush(widgetId, line);
+		}
+		scheduleCodegenChatStatusPush(widgetId, line);
+	}
+
+	const CODEGEN_STATUS_THROTTLE_MS = 400;
+	const codegenStatusTimers: Record<string, ReturnType<typeof setTimeout>> = {};
+	const codegenStatusPendingLine: Record<string, string> = {};
+	const codegenChatStatusTimers: Record<string, ReturnType<typeof setTimeout>> = {};
+	const codegenChatStatusPendingLine: Record<string, string> = {};
+
+	/** At most one panel status write per widget per interval; trailing line always lands. */
+	function scheduleCodegenStatusPush(widgetId: string, line: string): void {
+		codegenStatusPendingLine[widgetId] = line;
+		if (codegenStatusTimers[widgetId]) return;
+		codegenStatusTimers[widgetId] = setTimeout(() => {
+			delete codegenStatusTimers[widgetId];
+			const pending = codegenStatusPendingLine[widgetId];
+			delete codegenStatusPendingLine[widgetId];
+			if (pending) patchCodegenUiState(widgetId, { generateCodeStatus: pending });
+		}, CODEGEN_STATUS_THROTTLE_MS);
+	}
+
+	/** Same throttle for the in-chat status bubble (updateLatestCodegenStatusMessage). */
+	function scheduleCodegenChatStatusPush(widgetId: string | null | undefined, line: string): void {
+		const key = widgetId || '_focused';
+		codegenChatStatusPendingLine[key] = line;
+		if (codegenChatStatusTimers[key]) return;
+		codegenChatStatusTimers[key] = setTimeout(() => {
+			delete codegenChatStatusTimers[key];
+			const pending = codegenChatStatusPendingLine[key];
+			delete codegenChatStatusPendingLine[key];
+			if (pending) getChatMethodsForWidget(widgetId)?.updateLatestCodegenStatusMessage?.(pending);
+		}, CODEGEN_STATUS_THROTTLE_MS);
 	}
 
 	function patchCodegenUiState(
@@ -9875,6 +10024,26 @@ 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;
@@ -9977,6 +10146,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';
@@ -10004,6 +10182,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;
@@ -10029,6 +10212,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;
 	}
 
@@ -10115,6 +10305,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));
@@ -10146,9 +10343,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);
 			}
@@ -10199,6 +10399,8 @@ Requirements:
 			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
@@ -11684,6 +11886,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 =====================
 
 /**
@@ -11848,7 +12061,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();
 	}
@@ -12340,6 +12555,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.
@@ -12418,7 +12641,6 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			notifyHostWidgetName(widget);
 		}
 		await openWidgetDetailsPanel(widgetId);
-		scheduleCanvasShapePreviewSync(widgetId);
 	}
 
 	/**
@@ -14107,6 +14329,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				onTranslateEnd={(widgetId) => {
 					canvasRef?.commitWidgetShapeTranslate?.(widgetId);
 				}}
+				onOverlayDragChange={(active) => {
+					canvasRef?.setWidgetShapeOverlayDragActive?.(active);
+				}}
 				onSelectShape={(widgetId) => {
 					canvasRef?.selectWidgetShapeById?.(widgetId);
 					canvasSelectedWidgetShapeId = widgetId;
@@ -14116,6 +14341,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 					void openWidgetDetailsPanel(widgetId);
 				}}
 				onRefresh={handleWidgetShapeRefresh}
+				isGenerating={isAnyWidgetGenerating()}
 			/>
 
 			<!-- ═══ PANEL 2: Widgets Panel — debug + showWidgetsList (site passes false) ═══ -->
@@ -14519,8 +14745,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);
 					}
@@ -14755,7 +14979,13 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{@const shapeSource = shapePreviewSourceByWidgetId[panelWidgetId] || defaultVersionSource}
 				{@const viewingVersion = shapeSource && shapeSource.startsWith('v:')
 					? parseInt(shapeSource.slice(2), 10)
-					: 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
@@ -14793,13 +15023,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}
@@ -14815,7 +15045,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>
@@ -14832,7 +15062,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>
@@ -14845,15 +15075,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)}
@@ -14874,6 +15109,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={() => {
@@ -14885,6 +15121,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 										}}
 									/>
 								{/each}
+								</div>
 							{/if}
 							</div>
 						</Portal>
@@ -14973,6 +15210,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}
@@ -15773,21 +16011,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;

package/dist/components/VersionDropdownRow.svelte

@@ -42,14 +42,16 @@
 	// One fixed width per column — identical on every row and in both dropdowns.
 	// Explicit PIXEL widths that hug the content (vN, 7-char SHA, dd/mm/yyyy
 	// hh:mm) — no rem sizing, no floating side padding.
-	const COL_VERSION = 'w-[16px] justify-end';
+	const COL_VERSION = 'w-[20px] justify-end';
 	const COL_COMMIT = 'w-[44px] justify-end';
 	const COL_DATE = 'w-[88px]';
-	const COL_ACTION = 'w-[60px]';
+	// Same width as the header Publish/Live button (min-w-[4.75rem] / w-[4.75rem]) so every
+	// action button lines up in one column across rows, header and overlay.
+	const COL_ACTION = 'w-[4.75rem]';
 </script>
 
 <div
-	class="version-dropdown-row flex items-center gap-2 rounded px-2 py-1.5 w-max text-[10px] cursor-pointer {selected ? 'bg-emerald-50 text-emerald-800' : 'text-gray-700 hover:bg-gray-50'}"
+	class="version-dropdown-row flex items-center justify-between gap-2 rounded px-2 py-1.5 w-full text-[10px] cursor-pointer {selected ? 'bg-emerald-50 text-emerald-800' : 'text-gray-700 hover:bg-gray-50'}"
 	role="option"
 	aria-selected={selected}
 	tabindex="0"

package/dist/components/WidgetDetails.svelte

@@ -801,7 +801,20 @@
 		// console.log('[WidgetDetails] Codegen preview marked fresh — skipping GitLab rebuilds for 30s');
 	}
 
-	/** True when the iframe is already showing this widget's Worker preview (not about:blank / error). */
+	/** Timestamp of generation start — set by the parent when the operation begins. */
+	let codegenStartedAt: number | null = null;
+	/** Parent calls this when a generation starts for THIS widget's panel. */
+	export function markCodegenStarted(): void {
+		codegenStartedAt = Date.now();
+	}
+
+	/**
+	 * True when the iframe is already showing this widget's Worker preview AND was
+	 * reloaded after the current generation started. The Worker serves new code at
+	 * the same `/preview/{id}` URL, so URL equality alone cannot tell a stale frame
+	 * (pre-codegen) from a fresh one — that mismatch left the old version on screen
+	 * after generation.
+	 */
 	export function hasLiveWorkerPreview(): boolean {
 		if (!selectedWidgetId) return false;
 		if (!iframeSrc || iframeSrc === 'about:blank') return false;
@@ -809,7 +822,10 @@
 		const workerUrl = dynamicWorkerPreviewUrl || buildWorkerPreviewUrl(selectedWidgetId);
 		const currentBase = normalizePreviewBaseUrl(iframeSrc);
 		const workerBase = normalizePreviewBaseUrl(toPreviewFetchUrl(workerUrl));
-		return !!currentBase && !!workerBase && currentBase === workerBase;
+		if (!currentBase || !workerBase || currentBase !== workerBase) return false;
+		// During/after a generation, only a frame (re)loaded after it started counts.
+		if (codegenStartedAt !== null && lastPreviewIframeLoadAt < codegenStartedAt) return false;
+		return true;
 	}
 
 	// Preview resize

package/dist/components/WidgetDetails.svelte.d.ts

@@ -108,6 +108,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     showPublishedArtifact?: (url: string | null) => void;
     finishCompositionHydration?: () => void;
     markCodegenPreviewFresh?: () => void;
+    markCodegenStarted?: () => void;
     hasLiveWorkerPreview?: () => boolean;
     getLatestRuntimeLogs?: (maxLines?: number) => string[];
     resumeDeferredPreviewLoad?: () => Promise<void>;
@@ -204,6 +205,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     showPublishedArtifact: (url: string | null) => void;
     finishCompositionHydration: () => void;
     markCodegenPreviewFresh: () => void;
+    markCodegenStarted: () => void;
     hasLiveWorkerPreview: () => boolean;
     getLatestRuntimeLogs: (maxLines?: number) => string[];
     resumeDeferredPreviewLoad: () => Promise<void>;

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -49,6 +49,8 @@
 		onTranslate?: ((widgetId: string, dxScreen: number, dyScreen: number) => void) | null;
 		/** Fired once when a chrome drag ends (mark canvas dirty / history). */
 		onTranslateEnd?: ((widgetId: string) => void) | null;
+		/** Tell the canvas a chrome drag started/ended (suppresses hover-select). */
+		onOverlayDragChange?: ((active: boolean) => void) | null;
 		/** Select the Fabric WidgetShape (e.g. when pressing the drag bar). */
 		onSelectShape?: ((widgetId: string) => void) | null;
 		/** Open Widget Details / chat for this widget. */
@@ -86,6 +88,8 @@
 		resolveIsPublishing?: ((widgetId: string) => boolean) | null;
 		/** Publish-disabled reason for a specific Draft row (null = enabled). */
 		resolvePublishDisabledReason?: ((widgetId: string, version: number) => string | null) | null;
+		/** Whether code generation is running (suppresses background captures / reloads). */
+		isGenerating?: boolean;
 	}
 
 	let {
@@ -103,6 +107,7 @@
 		resolvePublishDisabled = null,
 		onTranslate = null,
 		onTranslateEnd = null,
+		onOverlayDragChange = null,
 		onSelectShape = null,
 		onOpenChat = null,
 		resolveTitle = null,
@@ -121,6 +126,7 @@
 		resolveIsPublishing = null,
 		/** Per-widget publish-gate reason for a Draft row (tooltip on Publish). */
 		resolvePublishDisabledReason = null,
+		isGenerating = false,
 	}: Props = $props();
 
 	const DRAG_BAR_H = 30;
@@ -130,7 +136,11 @@
 	const MIN_EXPANDED_CHROME_WIDTH = 220;
 	const IFRAME_INSET_PX = 2;
 	/** ~5 version rows before the menu scrolls (matches chat history panel). */
-	const VERSION_MENU_MAX_H = '12.5rem';
+	/** Row height ≈2.1rem (py-1.5 + text) + 0.6rem vertical padding for the menu box. */
+	const VERSION_MENU_ROW_REM = 2.1;
+	const VERSION_MENU_PAD_REM = 0.6;
+	/** Menu shows at most 5 rows before scrolling. */
+	const VERSION_MENU_MAX_ROWS = 5;
 
 	type ShapeRect = {
 		widgetId: string;
@@ -171,8 +181,33 @@
 		}
 		pendingRefreshTokens.delete(widgetId);
 	}
+
+	/**
+	 * Parent-driven forced reload for widgets whose Worker preview content changed
+	 * at the same URL (codegen rebuild). `sync()` only reloads when `src` changes,
+	 * so without a cache-bust token the overlay keeps showing pre-codegen content.
+	 * Bumps the reload token → `{#key}` remounts the iframe with a fresh `_t`.
+	 * Debounced by 1200ms to avoid double-refresh flicker when WS and completed SSE both fire.
+	 */
+	let lastReloadAtByWidgetId: Record<string, number> = {};
+	export function requestReload(widgetId: string): void {
+		const now = Date.now();
+		if (now - (lastReloadAtByWidgetId[widgetId] || 0) < 1200) {
+			return;
+		}
+		lastReloadAtByWidgetId[widgetId] = now;
+		cancelPendingRefresh(widgetId);
+		const token = Math.max(now, (reloadTokens[widgetId] || 0) + 1);
+		pendingRefreshTokens.set(widgetId, token);
+		reloadTokens = { ...reloadTokens, [widgetId]: token };
+		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: false };
+		sync();
+	}
+
 	/** Which shape chrome version menu is open. */
 	let openVersionMenuWidgetId = $state<string | null>(null);
+	/** Local manual version selection override per widget (ensures trigger updates immediately). */
+	let localSelectedVersionByWidgetId = $state<Record<string, string>>({});
 	/** Hide Fabric placeholder flash — show loader until iframe fires load. */
 	let iframeLoadedByWidgetId = $state<Record<string, boolean>>({});
 
@@ -250,11 +285,13 @@
 			document.body.style.removeProperty('user-select');
 			document.body.style.removeProperty('cursor');
 			onTranslateEnd?.(widgetId);
+			onOverlayDragChange?.(false);
 			console.log('[WidgetShapeLivePreviews] Drag end', widgetId.substring(0, 8));
 		}
 
 		document.body.style.userSelect = 'none';
 		document.body.style.cursor = 'grabbing';
+		onOverlayDragChange?.(true);
 		document.addEventListener('pointermove', onMove);
 		document.addEventListener('pointerup', endDrag);
 		document.addEventListener('pointercancel', endDrag);
@@ -290,6 +327,11 @@
 		// An old load event must not mark the replacement loaded or claim its timer.
 		if (!matchesFrame()) return;
 		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: true };
+		// Suppress auto-refresh / screenshot capture when code generation is running.
+		if (isGenerating) {
+			cancelPendingRefresh(widgetId);
+			return;
+		}
 		const token = pendingRefreshTokens.get(widgetId);
 		if (!token || refreshSettleTimers.has(widgetId)) return;
 		const isCurrent = () => matchesFrame()
@@ -319,6 +361,8 @@
 	}
 
 	function resolveSelectedVersionId(widgetId: string, options: VersionOption[]): string {
+		const local = localSelectedVersionByWidgetId[widgetId];
+		if (local && options.some((o) => o.id === local)) return local;
 		const fromParent = resolveVersionSelectedId?.(widgetId)?.trim();
 		if (fromParent && options.some((o) => o.id === fromParent)) return fromParent;
 		const liveOpt = options.find((o) => o.isLive);
@@ -391,6 +435,7 @@
 	function selectVersionFromMenu(widgetId: string, versionId: string) {
 		openVersionMenuWidgetId = null;
 		if (!versionId) return;
+		localSelectedVersionByWidgetId = { ...localSelectedVersionByWidgetId, [widgetId]: versionId };
 		onVersionChange?.(widgetId, versionId);
 	}
 
@@ -425,8 +470,15 @@
 	 */
 	function trackIframeSelection(iframe, widgetId) {
 		let focusTimer;
+		let pointerIsDown = false;
+		const onWindowPointerDown = () => { pointerIsDown = true; };
+		const onWindowPointerUp = () => { pointerIsDown = false; };
 		function select() {
 			if (!enabled || draggingWidgetId || resizingWidgetId || !iframe.isConnected) return;
+			// A drag in progress anywhere (Fabric shape drag or overlay chrome drag)
+			// must not let hover over this iframe steal the selection — the pointer
+			// merely passes over other shapes while carrying the dragged one.
+			if (pointerIsDown) return;
 			// Keep the menu owner selected while its dropdown is being used.
 			if (openVersionMenuWidgetId && openVersionMenuWidgetId !== widgetId) return;
 			if (selectedWidgetId !== widgetId) onSelectShape?.(widgetId);
@@ -437,6 +489,8 @@
 				if (document.activeElement === iframe) select();
 			}, 0);
 		}
+		window.addEventListener('pointerdown', onWindowPointerDown, true);
+		window.addEventListener('pointerup', onWindowPointerUp, true);
 		iframe.addEventListener('pointerenter', select);
 		iframe.addEventListener('focus', select);
 		window.addEventListener('blur', checkFocus);
@@ -444,6 +498,8 @@
 			update(nextWidgetId) { widgetId = nextWidgetId; },
 			destroy() {
 				clearTimeout(focusTimer);
+				window.removeEventListener('pointerdown', onWindowPointerDown, true);
+				window.removeEventListener('pointerup', onWindowPointerUp, true);
 				iframe.removeEventListener('pointerenter', select);
 				iframe.removeEventListener('focus', select);
 				window.removeEventListener('blur', checkFocus);
@@ -591,7 +647,7 @@
 									>
 										<button
 											type="button"
-											class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
+											class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
 											disabled={isPublishing || selectedPreviewBlocked || !!resolvePublishDisabled?.(overlay.widgetId, selectedVersion ? Number(selectedVersion.id.slice(2)) : null)}
 											onclick={(e) => {
 												e.stopPropagation();
@@ -607,7 +663,7 @@
 										class="inline-flex shrink-0"
 									>
 										<span
-											class="widget-shape-live-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded bg-emerald-100 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-emerald-600 opacity-80"
+											class="widget-shape-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded bg-emerald-100 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-600 opacity-80"
 										>Live</span>
 									</HoverTooltip>
 								{:else if selectedVersion && onSetLive && !isDraftVersion(selectedVersion)}
@@ -618,7 +674,7 @@
 									>
 										<button
 											type="button"
-											class="widget-shape-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded border border-emerald-300 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 cursor-pointer"
+											class="widget-shape-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded border border-emerald-300 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 cursor-pointer"
 											disabled={settingLiveVersion === Number(selectedVersion.id.slice(2))}
 											onclick={(e) => handleSetLiveClick(e, overlay.widgetId, selectedVersion.id)}
 											onpointerdown={(e) => e.stopPropagation()}
@@ -633,7 +689,7 @@
 										>
 											<button
 												type="button"
-												class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
+												class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
 												disabled={isPublishing || selectedPreviewBlocked || !resolveCanPublishDraft?.(overlay.widgetId, Number(selectedVersion.id.slice(2))) || !!resolvePublishDisabled?.(overlay.widgetId, Number(selectedVersion.id.slice(2)))}
 												onclick={(e) => handlePublishDraftClick(e, overlay.widgetId, selectedVersion.id)}
 												onpointerdown={(e) => e.stopPropagation()}
@@ -646,39 +702,45 @@
 											class="inline-flex shrink-0"
 										>
 											<span
-												class="widget-shape-draft-badge shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded bg-amber-100 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-amber-700"
+												class="widget-shape-draft-badge shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded bg-amber-100 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700"
 											>Draft</span>
 										</HoverTooltip>
 									{/if}
 								{/if}
 								{#if versionMenuOpen}
+									{@const hasScroll = versionOptions.length > 5}
 									<div
-										class="widget-shape-version-menu absolute right-0 top-full z-30 mt-0.5 w-max max-w-[min(22rem,calc(100vw-16px))] overflow-y-auto overflow-x-hidden rounded-md border border-emerald-200 bg-white py-0.5 shadow-lg"
-										style="max-height: {VERSION_MENU_MAX_H}; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;"
+										class="widget-shape-version-menu absolute top-full z-30 mt-0.5 w-max rounded-md border border-emerald-200 bg-white p-1 shadow-lg"
+										style="right: -12px;"
 										role="listbox"
 									>
-										{#each versionOptions as option (option.id)}
-											{@const optionVersion = Number(option.id.slice(2))}
-											{@const optionBusy = (void titleRevision, !!resolveIsPublishing?.(overlay.widgetId))}
-											{@const optionPublishDisabled = !resolveCanPublishDraft?.(overlay.widgetId, optionVersion)
-												|| !!resolvePublishDisabled?.(overlay.widgetId, optionVersion)
-												|| (selectedVersion?.id === option.id && selectedPreviewBlocked)}
-											{@const optionPublishReason = (void titleRevision, resolvePublishDisabledReason?.(overlay.widgetId, optionVersion))}
-											<VersionDropdownRow
-												versionLabel={option.shortLabel || option.label}
-												dateLabel={option.dateLabel}
-												isLive={option.isLive === true}
-												isDraft={isDraftVersion(option)}
-												selected={selectedVersion?.id === option.id}
-												busy={optionBusy}
-												publishDisabled={optionPublishDisabled}
-												publishDisabledReason={optionPublishReason || 'Build this draft version and make it the Live version'}
-												setLiveDisabled={settingLiveVersion === optionVersion}
-												onselect={() => selectVersionFromMenu(overlay.widgetId, option.id)}
-												onpublish={() => handlePublishDraftClickFromMenu(overlay.widgetId, option.id)}
-												onsetlive={() => handleSetLiveClickFromMenu(overlay.widgetId, option.id)}
-											/>
-										{/each}
+										<div
+											class="widget-shape-version-scroll flex flex-col gap-1 overflow-x-hidden {hasScroll ? 'overflow-y-auto' : 'overflow-y-visible'}"
+											style="{hasScroll ? '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 versionOptions as option (option.id)}
+												{@const optionVersion = Number(option.id.slice(2))}
+												{@const optionBusy = (void titleRevision, !!resolveIsPublishing?.(overlay.widgetId))}
+												{@const optionPublishDisabled = !resolveCanPublishDraft?.(overlay.widgetId, optionVersion)
+													|| !!resolvePublishDisabled?.(overlay.widgetId, optionVersion)
+													|| (selectedVersion?.id === option.id && selectedPreviewBlocked)}
+												{@const optionPublishReason = (void titleRevision, resolvePublishDisabledReason?.(overlay.widgetId, optionVersion))}
+												<VersionDropdownRow
+													versionLabel={option.shortLabel || option.label}
+													dateLabel={option.dateLabel}
+													isLive={option.isLive === true}
+													isDraft={isDraftVersion(option)}
+													selected={selectedVersion?.id === option.id}
+													busy={optionBusy}
+													publishDisabled={optionPublishDisabled}
+													publishDisabledReason={optionPublishReason || 'Build this draft version and make it the Live version'}
+													setLiveDisabled={settingLiveVersion === optionVersion}
+													onselect={() => selectVersionFromMenu(overlay.widgetId, option.id)}
+													onpublish={() => handlePublishDraftClickFromMenu(overlay.widgetId, option.id)}
+													onsetlive={() => handleSetLiveClickFromMenu(overlay.widgetId, option.id)}
+												/>
+											{/each}
+										</div>
 									</div>
 								{/if}
 							</div>
@@ -799,16 +861,19 @@
 {/if}
 
 <style>
-	.widget-shape-version-menu::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
+	.widget-shape-version-scroll::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
 		background: transparent;
 	}
-	.widget-shape-version-menu::-webkit-scrollbar-track {
+	.widget-shape-version-scroll::-webkit-scrollbar-track {
 		background: transparent;
 	}
-	.widget-shape-version-menu::-webkit-scrollbar-thumb {
+	.widget-shape-version-scroll::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.2);
 		border-radius: 4px;
 	}
+	.widget-shape-version-scroll::-webkit-scrollbar-thumb:hover {
+		background: rgba(0, 0, 0, 0.35);
+	}
 </style>

package/dist/components/WidgetShapeLivePreviews.svelte.d.ts

@@ -51,6 +51,8 @@ interface Props {
     onTranslate?: ((widgetId: string, dxScreen: number, dyScreen: number) => void) | null;
     /** Fired once when a chrome drag ends (mark canvas dirty / history). */
     onTranslateEnd?: ((widgetId: string) => void) | null;
+    /** Tell the canvas a chrome drag started/ended (suppresses hover-select). */
+    onOverlayDragChange?: ((active: boolean) => void) | null;
     /** Select the Fabric WidgetShape (e.g. when pressing the drag bar). */
     onSelectShape?: ((widgetId: string) => void) | null;
     /** Open Widget Details / chat for this widget. */
@@ -88,8 +90,11 @@ interface Props {
     resolveIsPublishing?: ((widgetId: string) => boolean) | null;
     /** Publish-disabled reason for a specific Draft row (null = enabled). */
     resolvePublishDisabledReason?: ((widgetId: string, version: number) => string | null) | null;
+    /** Whether code generation is running (suppresses background captures / reloads). */
+    isGenerating?: boolean;
 }
 declare const WidgetShapeLivePreviews: import("svelte").Component<Props, {
+    requestReload: (widgetId: string) => void;
     sync: () => void;
 }, "">;
 type WidgetShapeLivePreviews = ReturnType<typeof WidgetShapeLivePreviews>;

package/dist/stores/websocketStore.js

@@ -39,6 +39,30 @@ export const codeGenerationStatus = writable({
     timestamp: null
 });
 export const agentHarnessOutput = writable(null);
+/**
+ * Throttle for high-frequency agent harness frames. The stream used to emit one
+ * WS event per LLM token (plus one SSE progress frame every 10 tokens), and each
+ * frame re-rendered every open panel — with `structuredClone` on schemas per
+ * render. That saturated the browser main thread and froze the whole site during
+ * generation. Frames now coalesce into one store write per interval; the final
+ * frame always flushes so the last line is never lost.
+ */
+const AGENT_HARNESS_FLUSH_MS = 300;
+let agentHarnessPending = null;
+let agentHarnessFlushTimer = null;
+function flushAgentHarnessOutput() {
+    agentHarnessFlushTimer = null;
+    if (!agentHarnessPending)
+        return;
+    agentHarnessOutput.set(agentHarnessPending);
+    agentHarnessPending = null;
+}
+function pushAgentHarnessOutput(output) {
+    agentHarnessPending = { output, timestamp: new Date().toISOString() };
+    if (!agentHarnessFlushTimer) {
+        agentHarnessFlushTimer = setTimeout(flushAgentHarnessOutput, AGENT_HARNESS_FLUSH_MS);
+    }
+}
 // =============================================================================
 // Socket.IO Connection
 // =============================================================================
@@ -204,10 +228,8 @@ function setupSocketListeners(sock) {
             return;
         if (showLogs)
             console.log('[WsStore] Agent harness output:', output.slice(0, 120));
-        agentHarnessOutput.set({
-            output,
-            timestamp: new Date().toISOString()
-        });
+        // Coalesced write — see AGENT_HARNESS_FLUSH_MS above.
+        pushAgentHarnessOutput(output);
     });
     sock.on('dynamic_worker_preview_ready', (data) => {
         if (showLogs)

package/dist/utils/freezeWatchdog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Main-thread responsiveness watchdog.
+ *
+ * PerformanceObserver('longtask') only fires AFTER a blocking task completes —
+ * an infinite reactive loop, or heavy work running inside a same-origin iframe
+ * (html2canvas screenshot captures in the widget preview share the parent's main
+ * thread), is never attributed to the page. The result was a frozen site with no
+ * [FreezeReport] in the console.
+ *
+ * This watchdog flips the model: a Web Worker (own thread, unaffected by the
+ * blocked main thread) pings every 500ms and the main thread answers. When pongs
+ * stop arriving, the worker logs a [FreezeReport] straight to the page console
+ * (worker console output shows in DevTools) with the block duration and the last
+ * codegen status the main thread reported. It also reports recovery, so each
+ * freeze episode produces exactly two lines: block start + recovery.
+ */
+export interface FreezeWatchdog {
+    /** Main thread reports the current codegen status; included in freeze reports. */
+    setStatus(status: string): void;
+    dispose(): void;
+}
+export declare function installFreezeWatchdog(): FreezeWatchdog | null;

package/dist/utils/freezeWatchdog.js

@@ -0,0 +1,76 @@
+/**
+ * Main-thread responsiveness watchdog.
+ *
+ * PerformanceObserver('longtask') only fires AFTER a blocking task completes —
+ * an infinite reactive loop, or heavy work running inside a same-origin iframe
+ * (html2canvas screenshot captures in the widget preview share the parent's main
+ * thread), is never attributed to the page. The result was a frozen site with no
+ * [FreezeReport] in the console.
+ *
+ * This watchdog flips the model: a Web Worker (own thread, unaffected by the
+ * blocked main thread) pings every 500ms and the main thread answers. When pongs
+ * stop arriving, the worker logs a [FreezeReport] straight to the page console
+ * (worker console output shows in DevTools) with the block duration and the last
+ * codegen status the main thread reported. It also reports recovery, so each
+ * freeze episode produces exactly two lines: block start + recovery.
+ */
+const WATCHDOG_SOURCE = `
+let lastPongAt = performance.now();
+let freezeStartedAt = null;
+let reported = false;
+let lastStatus = '';
+const PING_MS = 500;
+const STALL_MS = 4000;
+setInterval(() => {
+  postMessage({ type: 'ping' });
+  const now = performance.now();
+  if (now - lastPongAt >= STALL_MS) {
+    if (!freezeStartedAt) freezeStartedAt = now - STALL_MS;
+    if (!reported) {
+      reported = true;
+      console.warn('[FreezeReport] Main thread unresponsive ' + Math.round(now - freezeStartedAt) +
+        'ms. Last status: "' + (lastStatus || '—') + '"');
+    }
+  } else if (freezeStartedAt) {
+    console.warn('[FreezeReport] Main thread recovered after ' + Math.round(now - freezeStartedAt) +
+      'ms. Last status: "' + (lastStatus || '—') + '"');
+    freezeStartedAt = null;
+    reported = false;
+  }
+}, PING_MS);
+onmessage = (e) => {
+  if (e.data && e.data.type === 'pong') {
+    lastPongAt = performance.now();
+    if (e.data.status) lastStatus = e.data.status;
+  }
+};
+`;
+export function installFreezeWatchdog() {
+    if (typeof window === 'undefined' || typeof Worker === 'undefined' || typeof Blob === 'undefined') {
+        return null;
+    }
+    const existing = window.__widgeticFreezeWatchdog;
+    if (existing)
+        return existing;
+    const blob = new Blob([WATCHDOG_SOURCE], { type: 'text/javascript' });
+    const url = URL.createObjectURL(blob);
+    const worker = new Worker(url);
+    URL.revokeObjectURL(url);
+    let lastStatus = '';
+    worker.onmessage = (event) => {
+        if (event.data?.type === 'ping') {
+            worker.postMessage({ type: 'pong', status: lastStatus });
+        }
+    };
+    const watchdog = {
+        setStatus(status) {
+            lastStatus = status;
+        },
+        dispose() {
+            worker.terminate();
+            delete window.__widgeticFreezeWatchdog;
+        },
+    };
+    window.__widgeticFreezeWatchdog = watchdog;
+    return watchdog;
+}

package/dist/utils/pinScrollToBottom.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Keeps a scrollable container pinned to its bottom edge until the user scrolls
+ * up. Opening the widget-details panel on a small screen lays the panel out
+ * after mount, which can leave the outer scroll area (status bar + chat +
+ * footer) resting above its bottom — clipping the chat input. The observer
+ * re-pins to bottom whenever the content height or the box changes, so the
+ * input is always visible on open. Any manual upward scroll un-pins until the
+ * user returns to the bottom, preserving normal reading behavior.
+ */
+export declare function pinScrollToBottom(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/utils/pinScrollToBottom.js

@@ -0,0 +1,43 @@
+/**
+ * Keeps a scrollable container pinned to its bottom edge until the user scrolls
+ * up. Opening the widget-details panel on a small screen lays the panel out
+ * after mount, which can leave the outer scroll area (status bar + chat +
+ * footer) resting above its bottom — clipping the chat input. The observer
+ * re-pins to bottom whenever the content height or the box changes, so the
+ * input is always visible on open. Any manual upward scroll un-pins until the
+ * user returns to the bottom, preserving normal reading behavior.
+ */
+export function pinScrollToBottom(node) {
+    let pinned = true;
+    let rafId = null;
+    const scrollToBottom = () => {
+        if (!pinned)
+            return;
+        // rAF so the layout pass has settled before reading scrollHeight.
+        rafId = requestAnimationFrame(() => {
+            node.scrollTo({ top: node.scrollHeight, behavior: 'instant' });
+        });
+    };
+    const onScroll = () => {
+        const atBottom = node.scrollTop + node.clientHeight >= node.scrollHeight - 8;
+        pinned = atBottom;
+    };
+    const observer = new ResizeObserver(scrollToBottom);
+    observer.observe(node);
+    // Content growing also needs re-pinning; observe children changes.
+    const contentObserver = new MutationObserver(scrollToBottom);
+    contentObserver.observe(node, { childList: true, subtree: true, characterData: true });
+    node.addEventListener('scroll', onScroll, { passive: true });
+    // Initial pin after the first layout pass.
+    const initialRaf = requestAnimationFrame(scrollToBottom);
+    return {
+        destroy() {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            cancelAnimationFrame(initialRaf);
+            observer.disconnect();
+            contentObserver.disconnect();
+            node.removeEventListener('scroll', onScroll);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.63",
+	"version": "0.3.65",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",