@widgetic/creator 0.3.63 → 0.3.64

package/dist/CreatorApp.svelte

@@ -494,7 +494,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;
@@ -8230,6 +8233,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.',
@@ -8504,6 +8512,10 @@ Requirements:
 							[generationWidgetId]: 'preview',
 						};
 						syncWidgetShapeLivePreviews();
+						// The Worker serves the rebuilt code at the SAME /preview URL — sync()
+						// only reloads when src changes, so force a cache-busted iframe reload
+						// on the canvas shape overlay or it keeps showing the previous version.
+						widgetShapeLivePreviewsRef?.requestReload?.(generationWidgetId);
 						panelDisplayRevision += 1;
 						if (!completedPreviewBuildErr) {
 							await applyDesignSchemaDefaultsToPreview(generationWidgetId);
@@ -9318,10 +9330,43 @@ Requirements:
 
 	function pushCodegenProgressToUi(op: OperationStatus, widgetId: string | null | undefined) {
 		const line = formatCodegenProgressStatus(op);
+		// 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(
@@ -14755,7 +14800,10 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{@const shapeSource = shapePreviewSourceByWidgetId[panelWidgetId] || defaultVersionSource}
 				{@const viewingVersion = shapeSource && shapeSource.startsWith('v:')
 					? parseInt(shapeSource.slice(2), 10)
-					: panelPublishedVersion}
+					// A 'preview' source (Worker HEAD, unpublished) is not a published
+					// version — falling back to panelPublishedVersion produced `vnull`
+					// right after generation. The newest draft IS this HEAD's version.
+					: (newestDraft ? newestDraft.version : panelPublishedVersion)}
 				{@const viewingIsLive = Number(viewingVersion) === Number(panelPublishedVersion)}
 				<!--
 					A version is a Draft until it is published. The history is one

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

@@ -171,6 +171,19 @@
 		}
 		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`.
+	 */
+	export function requestReload(widgetId: string): void {
+		const token = Math.max(Date.now(), (reloadTokens[widgetId] || 0) + 1);
+		reloadTokens = { ...reloadTokens, [widgetId]: token };
+		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: false };
+	}
+
 	/** Which shape chrome version menu is open. */
 	let openVersionMenuWidgetId = $state<string | null>(null);
 	/** Hide Fabric placeholder flash — show loader until iframe fires load. */

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

@@ -90,6 +90,7 @@ interface Props {
     resolvePublishDisabledReason?: ((widgetId: string, version: number) => string | null) | null;
 }
 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/package.json

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