@widgetic/creator 0.3.70 → 0.3.72

package/dist/CreatorApp.svelte

@@ -891,6 +891,16 @@
 	let currentGenerationOperationId: string | null = null;
 	let generateCodeStatus: string | null = null;
 	let lastGenerationFailed = false; // Track if last generation failed for retry UI
+	let publishPlanMessageByWidgetId: Record<string, string> = {};
+
+	function isPlanLimitMessage(message: string | null | undefined): boolean {
+		if (!message) return false;
+		return /credit balance|free trial|not available in your plan|not available on the free plan|upgrade your plan|upgrade to a solo/i.test(message);
+	}
+
+	function openUpgradePlans() {
+		window.location.assign('/workspaces/personal/settings/billing');
+	}
 	let lastGenerationError: string | null = null; // Store the error message for display
 	let lastGenerationPrompt: string | null = null; // Last prompt used, for retrying failed generations
 	let pendingAutoGenerateWidgetId: string | null = null; // Widget created from canvas that needs auto code generation
@@ -1194,7 +1204,12 @@
 		// console.log('[Chat] Codegen failure bubble:', content.slice(0, 160));
 	}
 
-	/** Retry failed codegen without duplicating the user bubble in chat. */
+	/** A retry of a prompt that already produced a version opens a new message. A failed retry stays on the same bubble. */
+	function messageTextHasCommit(content: string | null | undefined): boolean {
+		return /(?:Commit:?\s+|Code saved\s*\()[a-f0-9]{7,40}/i.test(String(content || ''));
+	}
+
+	/** Retry failed codegen without duplicating the user bubble. A successful prompt forks a new message so each version can show "You are here". */
 	async function handleChatRetryMessage(content: string, sourceWidgetId?: string) {
 		const widgetId = sourceWidgetId ?? selectedWidgetId;
 		if (!widgetId) return;
@@ -1212,44 +1227,63 @@
 		const draftUploadIds = panelChat?.getAttachmentUploadIds?.() ?? [];
 		const draftImageUrls = panelChat?.getAttachmentDataUrls?.() ?? [];
 
-		// Re-use attachments from previous user messages in the conversation
-		// so that Retry doesn't lose PDFs/files that were uploaded with the original prompt.
+		// A prompt that already has a commit must not reuse that bubble: Version N and
+		// Version N+1 would share one message, and "You are here" could not mark the older one.
+		// The standing sketch is attached on the server for the model. It is not copied onto the chat row.
+		let forkUserMessage = false;
 		let retryFileAttachments: Array<{ url: string; file_type: string; file_name: string | null; file_size: number | null }> = [];
 		if (draftUploadIds.length === 0 && draftImageUrls.length === 0) {
 			try {
 				const panelState = getPanelState(widgetId);
 				const convId = panelChat?.getConversationId?.() ?? panelState.currentChatConversationId ?? null;
 				if (convId) {
-					const convMessages = await handleLoadMessages(convId, widgetId);
-					// Find most-recent user message that has persisted attachments
-					const userMsgsWithAtt = (convMessages || [])
-						.filter((m: any) => (m.messageType || m.message_type) === 'user' && (m.attachments || []).length > 0);
-					if (userMsgsWithAtt.length > 0) {
-						const latestWithAtt = userMsgsWithAtt[userMsgsWithAtt.length - 1];
-						retryFileAttachments = (latestWithAtt.attachments || [])
-							.filter((a: any) => a.url && /^https?:\/\//i.test(a.url))
-							.map((a: any) => ({
-								url: a.url,
-								file_type: a.file_type || 'application/octet-stream',
-								file_name: a.file_name || null,
-								file_size: a.file_size || null,
-							}));
-						// console.log('[Chat→Retry] Re-using', retryFileAttachments.length, 'attachment(s) from previous user message for retry');
+					const convMessages = await handleLoadMessages(convId, widgetId) || [];
+					const needle = content.trim();
+					let matchIndex = -1;
+					for (let i = convMessages.length - 1; i >= 0; i--) {
+						const message = convMessages[i];
+						const type = message.messageType || message.message_type;
+						const text = String(message.messageContent || message.message_content || '').trim();
+						if (type === 'user' && text === needle) {
+							matchIndex = i;
+							break;
+						}
+					}
+					if (matchIndex >= 0) {
+						forkUserMessage = convMessages.slice(matchIndex + 1).some((message) =>
+							(message.messageType || message.message_type) === 'assistant'
+							&& messageTextHasCommit(message.messageContent || message.message_content),
+						);
+						if (!forkUserMessage) {
+							retryFileAttachments = (convMessages[matchIndex].attachments || [])
+								.filter((attachment) => attachment.url && /^https?:\/\//i.test(attachment.url))
+								.filter((attachment) => !/design-screenshot/i.test(attachment.file_name || attachment.fileName || ''))
+								.map((attachment) => ({
+									url: attachment.url,
+									file_type: attachment.file_type || attachment.fileType || 'application/octet-stream',
+									file_name: attachment.file_name || attachment.fileName || null,
+									file_size: attachment.file_size || attachment.fileSize || null,
+								}));
+						}
 					}
 				}
 			} catch (retryAttErr) {
-				console.warn('[Chat→Retry] Could not load previous attachments for retry:', retryAttErr);
+				console.warn('[Chat→Retry] Could not load the prompt turn for retry:', retryAttErr);
 			}
 		}
+		if (forkUserMessage) {
+			panelChat?.addUserMessage?.(content);
+		}
 
 		await generateCode({
 			prompt: content,
 			fromChat: true,
 			widgetId,
 			forceRecreateRepo: true,
-			attachmentIds: draftUploadIds.length > 0 ? draftUploadIds : undefined,
-			promptImagesOverride: draftImageUrls.length > 0 ? draftImageUrls : undefined,
-			persistFileAttachments: retryFileAttachments.length > 0 ? retryFileAttachments : undefined,
+			forkUserMessage,
+			attachmentIds: forkUserMessage ? undefined : (draftUploadIds.length > 0 ? draftUploadIds : undefined),
+			promptImagesOverride: forkUserMessage ? [] : (draftImageUrls.length > 0 ? draftImageUrls : undefined),
+			persistFileAttachments: !forkUserMessage && retryFileAttachments.length > 0 ? retryFileAttachments : undefined,
 		});
 	}
 
@@ -1532,6 +1566,7 @@
 			file_size?: number | null;
 			display_order?: number;
 		}>,
+		forkUserMessage = false,
 	): Promise<void> {
 		if (!conversationsClient || !messagesClient) return;
 		try {
@@ -1552,6 +1587,8 @@
 				convId = conv?.id;
 			}
 			if (!convId) return;
+			// The new bubble was already saved by addUserMessage. Do not patch the previous turn with the sketch.
+			if (forkUserMessage) return;
 
 			const persistImages = uniquePersistImageUrls([
 				...(imageUrls || []),
@@ -8288,6 +8325,8 @@ Requirements:
 		skipIntentGate?: boolean;
 		/** The tapped chip's structured intent, declared so the server measures the chip conversion without matching copy. */
 		chipIntent?: ClarificationSuggestion['intent'];
+		/** Successful retry: a new user row already exists. Do not attach images to the previous turn. */
+		forkUserMessage?: boolean;
 		/** Chat files (PDF, video, images) to store on the user message before codegen. */
 		persistFileAttachments?: Array<{
 			url?: string;
@@ -8545,8 +8584,9 @@ Requirements:
 			}
 
 			// Prepare images for the request (if any) — prefer IDs/URLs captured before clearDraft
-			let panelPromptImages =
-				options.promptImagesOverride && options.promptImagesOverride.length > 0
+			let panelPromptImages = options.forkUserMessage
+				? []
+				: options.promptImagesOverride && options.promptImagesOverride.length > 0
 					? options.promptImagesOverride
 					: generationWidgetId === focusedPanelWidgetId
 						? promptImages
@@ -8556,12 +8596,14 @@ Requirements:
 			panelPromptImages = panelPromptImages.filter(
 				(url) => typeof url === 'string' && (url.startsWith('data:image/') || /^https?:\/\//i.test(url)) && url.length > 20,
 			);
-			const chatAttachmentUrls = panelChat?.getAttachmentDataUrls?.() ?? [];
-			const chatUploadIds = [
-				...(options.attachmentIds || []),
-				...(panelChat?.getAttachmentUploadIds?.() ?? []),
-			].filter((id, index, arr) => id && arr.indexOf(id) === index);
-			if (chatAttachmentUrls.length > 0 && !(options.promptImagesOverride?.length)) {
+			const chatAttachmentUrls = options.forkUserMessage ? [] : (panelChat?.getAttachmentDataUrls?.() ?? []);
+			const chatUploadIds = options.forkUserMessage
+				? []
+				: [
+					...(options.attachmentIds || []),
+					...(panelChat?.getAttachmentUploadIds?.() ?? []),
+				].filter((id, index, arr) => id && arr.indexOf(id) === index);
+			if (!options.forkUserMessage && chatAttachmentUrls.length > 0 && !(options.promptImagesOverride?.length)) {
 				const fromChat = chatAttachmentUrls.filter(
 					(url) => typeof url === 'string' && (url.startsWith('data:image/') || /^https?:\/\//i.test(url)) && url.length > 20,
 				);
@@ -8617,7 +8659,7 @@ Requirements:
 						duration: 8000
 					});
 				}
-			} else if (promptImpliesVisionReference(prompt)) {
+			} else if (promptImpliesVisionReference(prompt) && !options.forkUserMessage) {
 				showToast('warning', 'Generare fără imagine', {
 					description:
 						'Request-ul merge fără vision (DeepSeek etc.). Atașează PNG/JPEG în chat înainte de Send.',
@@ -8633,8 +8675,9 @@ Requirements:
 			await ensureCodegenUserMessagePersisted(
 				generationWidgetId,
 				prompt,
-				persistImageUrls,
-				options.persistFileAttachments,
+				options.forkUserMessage ? [] : persistImageUrls,
+				options.forkUserMessage ? undefined : options.persistFileAttachments,
+				!!options.forkUserMessage,
 			);
 
 			// Clear unsent draft/attachments once payload is captured — prevents restore on widget return
@@ -8885,14 +8928,63 @@ Requirements:
 					if (generationWidgetId) {
 						const { [generationWidgetId]: _resolved, ...restResolved } = shapeHistoryResolvedByWidgetId;
 						shapeHistoryResolvedByWidgetId = restResolved;
-						setTimeout(() => {
-							void loadPublishHistoryForPanel(generationWidgetId, { silent: true }).then(() => {
-								const newestDraft = getNewestDraftVersionId(generationWidgetId);
-								if (newestDraft != null) {
-									selectVersionInDropdowns(generationWidgetId, `v:${newestDraft}`);
+						const alignWidgetId = generationWidgetId;
+						const alignCommitSha = completedCommitSha;
+						const alignGeneratedVersion = (attempt: number) => {
+							void loadPublishHistoryForPanel(alignWidgetId, { silent: true }).then(() => {
+								const versionId = findVersionIdMatchingCommit(alignWidgetId, alignCommitSha);
+								const matchedByCommit = !!alignCommitSha
+									&& !!versionId
+									&& getShapePublishHistory(alignWidgetId).some((row) =>
+										versionId === `v:${Number(row.version)}`
+										&& commitsMatch(row?.commitSha ?? row?.commit_sha, alignCommitSha),
+									);
+								if (!matchedByCommit && alignCommitSha && attempt < 4) {
+									setTimeout(() => alignGeneratedVersion(attempt + 1), 1500);
+									return;
+								}
+								if (!versionId) return;
+								if (restoredViewingVersionByWidgetId[alignWidgetId] != null) {
+									const { [alignWidgetId]: _clearedRestore, ...restRestored } = restoredViewingVersionByWidgetId;
+									restoredViewingVersionByWidgetId = restRestored;
+								}
+								const menuNow = dropdownVersionByWidgetId[alignWidgetId];
+								const sourceNow = shapePreviewSourceByWidgetId[alignWidgetId];
+								const selectedRow = getShapePublishHistory(alignWidgetId)
+									.find((row) => `v:${Number(row.version)}` === menuNow);
+								if (
+									menuNow?.startsWith('v:')
+									&& menuNow === sourceNow
+									&& alignCommitSha
+									&& !commitsMatch(selectedRow?.commitSha ?? selectedRow?.commit_sha, alignCommitSha)
+								) {
+									return;
+								}
+								selectVersionInDropdowns(alignWidgetId, versionId);
+								shapePreviewSourceByWidgetId = {
+									...shapePreviewSourceByWidgetId,
+									[alignWidgetId]: versionId,
+								};
+								syncWidgetShapeLivePreviews();
+								panelDisplayRevision += 1;
+								if (versionUsesSharedHeadPreview(alignWidgetId, versionId)) {
+									const headUrl = resolveWidgetShapeLivePreviewUrl(alignWidgetId);
+									getWidgetDetailsRef(alignWidgetId)?.showLiveWorkerPreview?.(headUrl);
+									widgetShapeLivePreviewsRef?.requestReload?.(alignWidgetId);
+								} else {
+									const versionNumber = Number(versionId.slice(2));
+									if (Number.isFinite(versionNumber)) {
+										void ensureWidgetShapeVersionPreview(alignWidgetId, versionNumber);
+									}
 								}
+								console.log('[VersionPreview] Aligned dropdown with generated commit', {
+									widgetId: alignWidgetId.substring(0, 8),
+									versionId,
+									commit: alignCommitSha?.substring(0, 8) ?? null,
+								});
 							});
-						}, 1200);
+						};
+						setTimeout(() => alignGeneratedVersion(0), 1200);
 					}
 
 					// Always reconcile GitLab HEAD after codegen (metadata.commitId can be missing/stale).
@@ -9053,10 +9145,8 @@ 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).
+						// History alignment below moves the dropdown onto the commit this build belongs to.
 						shapePreviewSourceByWidgetId = {
 							...shapePreviewSourceByWidgetId,
 							[generationWidgetId]: 'preview',
@@ -9468,10 +9558,18 @@ Requirements:
 			isPublishing = false;
 			publishingWidgetId = null;
 			setCrossTabPublishing(false, capturedWidgetId);
-			showToast('error', 'Publish failed', {
-				description: normalizeErrorMessage(err) || 'An unexpected error occurred. Please try again.',
-				duration: 8000
-			});
+			const publishErrorText = normalizeErrorMessage(err) || 'An unexpected error occurred. Please try again.';
+			if (isPlanLimitMessage(publishErrorText) && capturedWidgetId) {
+				publishPlanMessageByWidgetId = {
+					...publishPlanMessageByWidgetId,
+					[capturedWidgetId]: publishErrorText,
+				};
+			} else {
+				showToast('error', 'Publish failed', {
+					description: publishErrorText,
+					duration: 8000
+				});
+			}
 		}
 		// isPublishing stays true until widget_publish_status WebSocket event arrives (success or failure)
 	}
@@ -10495,6 +10593,15 @@ Requirements:
 	function getPanelEditPreviewUrl(widgetId: string): string | null {
 		const ps = getPanelDisplayState(widgetId);
 		const source = shapePreviewSourceByWidgetId[widgetId];
+		// Head draft and the post-codegen 'preview' source are the Worker build.
+		// Falling through here used to hand the panel the last published CDN file
+		// while the dropdown already said the new draft.
+		if (source === 'preview' || (source && versionUsesSharedHeadPreview(widgetId, source))) {
+			const hasCode = !!(ps.lastCommitId || loadCommitIdForWidget(widgetId));
+			if (hasCode && source !== 'live') {
+				return `${widgetBuilderPreviewBaseUrl()}/preview/${widgetId}`;
+			}
+		}
 		if (source && source.startsWith('v:')) {
 			const version = parseInt(source.slice(2), 10);
 			if (Number.isFinite(version)) {
@@ -10631,6 +10738,45 @@ Requirements:
 		return draftVersions.length > 0 ? Math.max(...draftVersions) : null;
 	}
 
+	/** True when this draft row's commit is still the repo HEAD the shared Worker preview serves. */
+	function draftCommitMatchesRepoHead(widgetId: string, record: { commitSha?: string | null; commit_sha?: string | null } | null | undefined): boolean {
+		const draftCommitSha = normalizeCommitSha(record?.commitSha ?? record?.commit_sha ?? null);
+		const headCommitSha = normalizeCommitSha(
+			getPanelDisplayState(widgetId).lastCommitId ?? loadCommitIdForWidget(widgetId),
+		);
+		return !draftCommitSha || !headCommitSha || commitsMatch(draftCommitSha, headCommitSha);
+	}
+
+	/**
+	 * Shared `/preview/{widgetId}` is only the selected row when that row is the
+	 * newest draft and its commit is still HEAD. Every other version needs its
+	 * own build — otherwise the dropdown says vN while the iframe shows HEAD.
+	 */
+	function versionUsesSharedHeadPreview(widgetId: string, versionId: string | null | undefined): boolean {
+		if (!versionId || versionId === 'preview' || versionId === 'live') return versionId !== 'live';
+		if (!versionId.startsWith('v:')) return false;
+		const version = parseInt(versionId.slice(2), 10);
+		if (!Number.isFinite(version)) return false;
+		const record = getShapePublishHistory(widgetId).find((row) => Number(row.version) === version);
+		if (record?.publishedAt ?? record?.published_at) return false;
+		const newestDraft = getNewestDraftVersionId(widgetId);
+		if (newestDraft == null || version !== newestDraft) return false;
+		if (restoredViewingVersionByWidgetId[widgetId] != null) return false;
+		return draftCommitMatchesRepoHead(widgetId, record);
+	}
+
+	function findVersionIdMatchingCommit(widgetId: string, commitSha: string | null): string | null {
+		const target = normalizeCommitSha(commitSha);
+		const history = getShapePublishHistory(widgetId);
+		if (target) {
+			const match = history.find((row) => commitsMatch(row?.commitSha ?? row?.commit_sha, target));
+			const version = Number(match?.version);
+			if (Number.isFinite(version)) return `v:${version}`;
+		}
+		const newestDraft = getNewestDraftVersionId(widgetId);
+		return newestDraft != null ? `v:${newestDraft}` : null;
+	}
+
 	function resolveWidgetShapeLivePreviewUrl(widgetId: string): string | null {
 		if (!widgetId) return null;
 		const source = shapePreviewSourceByWidgetId[widgetId] || 'live';
@@ -10665,11 +10811,15 @@ Requirements:
 				// `/preview/{widgetId}` artifact then serves the restored code under the
 				// newest version's number — ask for a commit-specific build instead.
 				const newestDraft = getNewestDraftVersionId(widgetId);
-				const draftCommitSha = normalizeCommitSha(record?.commitSha ?? record?.commit_sha ?? null);
-				const headCommitSha = normalizeCommitSha(ps.lastCommitId ?? loadCommitIdForWidget(widgetId));
-				const draftIsRepoHead =
-					!draftCommitSha || !headCommitSha || commitsMatch(draftCommitSha, headCommitSha);
-				if (!isPublished && newestDraft != null && version === newestDraft && draftIsRepoHead && workerUrl) {
+				const draftIsRepoHead = draftCommitMatchesRepoHead(widgetId, record);
+				if (
+					!isPublished
+					&& newestDraft != null
+					&& version === newestDraft
+					&& draftIsRepoHead
+					&& workerUrl
+					&& restoredViewingVersionByWidgetId[widgetId] == null
+				) {
 					return workerUrl;
 				}
 				return resolveWidgetShapeVersionPreviewState(widgetId)?.url ?? null;
@@ -10852,10 +11002,18 @@ Requirements:
 			const isPublished = !!(record?.publishedAt ?? record?.published_at);
 			const newestDraft = getNewestDraftVersionId(widgetId);
 			const workerUrl = resolveWidgetShapeLivePreviewUrl(widgetId);
-			const viewingHeadDraft = !isPublished && newestDraft != null && version === newestDraft && workerUrl && !restoredViewingVersionByWidgetId[widgetId];
-			if (viewingHeadDraft) {
+			const viewingHeadDraft = !isPublished
+				&& newestDraft != null
+				&& version === newestDraft
+				&& draftCommitMatchesRepoHead(widgetId, record)
+				&& !!workerUrl
+				&& restoredViewingVersionByWidgetId[widgetId] == null;
+			if (viewingHeadDraft && workerUrl) {
 				const detailsRef = getWidgetDetailsRef(widgetId);
-				detailsRef?.showPublishedArtifact?.(workerUrl);
+				// Same Worker URL as the previous draft: the shape iframe does not
+				// remount unless the cache-bust token changes.
+				detailsRef?.showLiveWorkerPreview?.(workerUrl);
+				widgetShapeLivePreviewsRef?.requestReload?.(widgetId);
 			} else {
 				void ensureWidgetShapeVersionPreview(widgetId, version);
 			}
@@ -10992,6 +11150,7 @@ Requirements:
 	 */
 	let versionLabelsByWidgetId: Record<string, Record<string, string>> = {};
 	let versionPromptLabelsByWidgetId: Record<string, Record<string, string>> = {};
+	let versionTimelineByWidgetId: Record<string, Array<{ version: number; sha: string; prompt: string }>> = {};
 	let viewingVersionByWidgetId: Record<string, number | null> = {};
 	$: {
 		void shapePreviewSourceByWidgetId;
@@ -11002,16 +11161,19 @@ Requirements:
 		const nextHeads: Record<string, string | null> = {};
 		const nextLabels: Record<string, Record<string, string>> = {};
 		const nextPrompts: Record<string, Record<string, string>> = {};
+		const nextTimeline: Record<string, Array<{ version: number; sha: string; prompt: string }>> = {};
 		const nextViewing: Record<string, number | null> = {};
 		for (const widgetId of openWidgetPanelIds) {
 			nextHeads[widgetId] = resolveViewingCommitShaForPanel(widgetId);
 			nextLabels[widgetId] = buildVersionLabelsForPanel(widgetId);
 			nextPrompts[widgetId] = buildVersionPromptLabelsForPanel(widgetId);
+			nextTimeline[widgetId] = buildVersionTimelineForPanel(widgetId);
 			nextViewing[widgetId] = viewingVersionNumberForPanel(widgetId);
 		}
 		headCommitShaByWidgetId = nextHeads;
 		versionLabelsByWidgetId = nextLabels;
 		versionPromptLabelsByWidgetId = nextPrompts;
+		versionTimelineByWidgetId = nextTimeline;
 		viewingVersionByWidgetId = nextViewing;
 	}
 
@@ -11049,6 +11211,20 @@ Requirements:
 		return text || null;
 	}
 
+	function buildVersionTimelineForPanel(widgetId: string): Array<{ version: number; sha: string; prompt: string }> {
+		const ps = getPanelDisplayState(widgetId);
+		const history = ps.publishHistory?.length ? ps.publishHistory : publishHistory;
+		const timeline: Array<{ version: number; sha: string; prompt: string }> = [];
+		for (const record of history || []) {
+			if (record?.version == null) continue;
+			const sha = normalizeCommitSha(record?.commitSha ?? record?.commit_sha);
+			const prompt = versionPromptKey(record?.prompt);
+			if (!sha || !prompt) continue;
+			timeline.push({ version: Number(record.version), sha, prompt });
+		}
+		return timeline;
+	}
+
 	/** User prompt → "Version N", for turns whose commit line was never saved. */
 	function buildVersionPromptLabelsForPanel(widgetId: string): Record<string, string> {
 		const labels: Record<string, string> = {};
@@ -12521,15 +12697,24 @@ $: if ($dynamicWorkerPreviewStatus.widgetId && $dynamicWorkerPreviewStatus.previ
 	const wsEventKey = `${wsReadyWidgetId}:${$dynamicWorkerPreviewStatus.previewUrl}:${$dynamicWorkerPreviewStatus.timestamp ?? ''}`;
 	if (wsEventKey !== lastWsWorkerPreviewEventKey) {
 		lastWsWorkerPreviewEventKey = wsEventKey;
-		shapePreviewSourceByWidgetId = {
-			...shapePreviewSourceByWidgetId,
-			[wsReadyWidgetId]: 'preview',
-		};
-		if (codegenCaptureBlocked()) {
-			console.log('[CreatorApp] Defer canvas Worker preview reload until codegen finishes', wsReadyWidgetId.substring(0, 8));
+		const selectedVersion = dropdownVersionByWidgetId[wsReadyWidgetId]
+			|| shapePreviewSourceByWidgetId[wsReadyWidgetId];
+		const keepHistoricalSelection = !generatingWidgetIds[wsReadyWidgetId]
+			&& !!selectedVersion?.startsWith('v:')
+			&& !versionUsesSharedHeadPreview(wsReadyWidgetId, selectedVersion);
+		if (keepHistoricalSelection) {
+			console.log('[CreatorApp] Historical version stays selected; shared HEAD build ignored', wsReadyWidgetId.substring(0, 8));
 		} else {
-			syncWidgetShapeLivePreviews();
-			widgetShapeLivePreviewsRef?.requestReload?.(wsReadyWidgetId);
+			shapePreviewSourceByWidgetId = {
+				...shapePreviewSourceByWidgetId,
+				[wsReadyWidgetId]: 'preview',
+			};
+			if (codegenCaptureBlocked()) {
+				console.log('[CreatorApp] Defer canvas Worker preview reload until codegen finishes', wsReadyWidgetId.substring(0, 8));
+			} else {
+				syncWidgetShapeLivePreviews();
+				widgetShapeLivePreviewsRef?.requestReload?.(wsReadyWidgetId);
+			}
 		}
 	}
 }
@@ -15841,10 +16026,47 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								{/if}
 							</div>
 						</div>
+						{#if publishPlanMessageByWidgetId[panelWidgetId]}
+							<div class="publish-plan-notice p-3 bg-red-50 border border-red-200" style="border-radius: 0;">
+								<p class="text-xs text-red-700 whitespace-pre-wrap">{publishPlanMessageByWidgetId[panelWidgetId]}</p>
+								<div class="flex gap-2 mt-3 justify-center">
+									<Button
+										onclick={openUpgradePlans}
+										variant="default"
+										size="sm"
+										class="bg-red-600 hover:bg-red-700 text-white rounded-lg"
+									>
+										Upgrade
+									</Button>
+									<Button
+										onclick={() => {
+											const next = { ...publishPlanMessageByWidgetId };
+											delete next[panelWidgetId];
+											publishPlanMessageByWidgetId = next;
+										}}
+										variant="outline"
+										size="sm"
+										class="border-gray-300 text-gray-600 hover:bg-gray-50 rounded-lg"
+									>
+										Dismiss
+									</Button>
+								</div>
+							</div>
+						{/if}
 						{#if ps.lastGenerationFailed}
 							<div class="p-3 bg-red-50 border border-red-200" style="border-radius: 0;">
 								<p class="text-xs text-red-700 whitespace-pre-wrap">{ps.lastGenerationError}</p>
 								<div class="flex gap-2 mt-3 justify-center">
+									{#if isPlanLimitMessage(ps.lastGenerationError)}
+									<Button
+										onclick={openUpgradePlans}
+										variant="default"
+										size="sm"
+										class="bg-red-600 hover:bg-red-700 text-white rounded-lg"
+									>
+										Upgrade
+									</Button>
+									{:else}
 									<Button
 										onclick={() => {
 											if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
@@ -15859,6 +16081,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									>
 										Retry
 									</Button>
+									{/if}
 									<Button
 										onclick={() => {
 											if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
@@ -15934,6 +16157,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							widgetHeadCommitSha={headCommitShaByWidgetId[panelWidgetId] || ps.lastCommitId}
 							versionLabelByCommitSha={versionLabelsByWidgetId[panelWidgetId] || {}}
 							versionLabelByPrompt={versionPromptLabelsByWidgetId[panelWidgetId] || {}}
+							versionTimeline={versionTimelineByWidgetId[panelWidgetId] || []}
 							viewingVersion={viewingVersionByWidgetId[panelWidgetId] ?? null}
 							onSendMessage={(content, attachments) => handleChatSendMessage(content, attachments, panelWidgetId)}
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}

package/dist/components/WidgetDetails.svelte

@@ -497,6 +497,20 @@
 		void forceReloadPreviewIframe(url);
 	}
 
+	/**
+	 * Shared Worker HEAD (`/preview/{widgetId}`). Do not pin it: a pin blocks the
+	 * next build event, so the panel keeps the previous generation.
+	 */
+	export function showLiveWorkerPreview(url: string | null): void {
+		if (!url) return;
+		pinnedPublishedPreviewUrl = null;
+		lastWsPreviewSignature = null;
+		publishedArtifactReachable = true;
+		_lastEditPreviewBase = null;
+		_lastEmbedPreviewBase = null;
+		void forceReloadPreviewIframe(url);
+	}
+
 	export function finishCompositionHydration(): void {
 		if (compositionHydrationTimeout) {
 			clearTimeout(compositionHydrationTimeout);

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

@@ -106,6 +106,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
          */ showCompositionSteps?: boolean;
     beginCompositionHydration?: () => void;
     showPublishedArtifact?: (url: string | null) => void;
+    showLiveWorkerPreview?: (url: string | null) => void;
     finishCompositionHydration?: () => void;
     markCodegenPreviewFresh?: () => void;
     clearCodegenPreviewFresh?: () => void;
@@ -207,6 +208,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     debugModeAvailable: boolean;
     beginCompositionHydration: () => void;
     showPublishedArtifact: (url: string | null) => void;
+    showLiveWorkerPreview: (url: string | null) => void;
     finishCompositionHydration: () => void;
     markCodegenPreviewFresh: () => void;
     clearCodegenPreviewFresh: () => void;

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -205,19 +205,25 @@
 	const coalescedReloadTimers = new Map<string, ReturnType<typeof setTimeout>>();
 
 	export function requestReload(widgetId: string): void {
-		if (isGenerating) return;
 		const now = Date.now();
 		const sinceLast = now - (lastReloadAtByWidgetId[widgetId] || 0);
-		if (sinceLast < RELOAD_COALESCE_MS) {
-			if (!coalescedReloadTimers.has(widgetId)) {
-				coalescedReloadTimers.set(
-					widgetId,
-					setTimeout(() => {
-						coalescedReloadTimers.delete(widgetId);
-						requestReload(widgetId);
-					}, RELOAD_COALESCE_MS - sinceLast),
-				);
-			}
+		// A second call inside the window used to be dropped when a timer already
+		// existed, so the codegen reload (the one that matches the new commit)
+		// never ran and the shape kept the previous build. Replace the timer so
+		// the later request wins. While generating, wait and try again.
+		if (isGenerating || sinceLast < RELOAD_COALESCE_MS) {
+			const existing = coalescedReloadTimers.get(widgetId);
+			if (existing) clearTimeout(existing);
+			const wait = isGenerating
+				? RELOAD_COALESCE_MS
+				: Math.max(0, RELOAD_COALESCE_MS - sinceLast);
+			coalescedReloadTimers.set(
+				widgetId,
+				setTimeout(() => {
+					coalescedReloadTimers.delete(widgetId);
+					requestReload(widgetId);
+				}, wait),
+			);
 			return;
 		}
 		const coalesced = coalescedReloadTimers.get(widgetId);

package/package.json

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