@widgetic/creator 0.3.50 → 0.3.53

package/dist/CreatorApp.svelte

@@ -85,6 +85,7 @@
 	export let apiUrl: CreatorAppProps['apiUrl'] = null;
 	export let widgetBuilderUrl: CreatorAppProps['widgetBuilderUrl'] = null;
 	export let initialDebugMode: CreatorAppProps['initialDebugMode'] = undefined;
+	export let initialAdvancedFeatures: CreatorAppProps['initialAdvancedFeatures'] = false;
 	export let defaultCoderModelId: CreatorAppProps['defaultCoderModelId'] = undefined;
 	export let defaultPlannerModelId: CreatorAppProps['defaultPlannerModelId'] = undefined;
 	export let showWidgetsList: CreatorAppProps['showWidgetsList'] = true;
@@ -97,6 +98,11 @@
 	// Opt-in Dexie owner — reactive to prop changes without $effect (would force runes mode).
 	$: setEnableLocalCache(!!enableLocalCache);
 
+	function getRealTokenExpUnix(token: string): number | null {
+		const decoded = decodeJWT(token);
+		return decoded?.exp ?? null;
+	}
+
 	let didForceCreateNewWidget = false;
 	/** Site "+ New widget": never hydrate ConvertedW / last-canvas JSON onto this session. */
 	let ignoreIncomingCanvasLoads = !!(forceCreateNewWidget && !initialWidgetId);
@@ -105,6 +111,21 @@
 
 	function notifyHostWidgetName(widget: { id?: string | null; name?: string | null } | null | undefined): void {
 		if (!embedded || !widget?.id) return;
+		const primaryId = (canvasPrimaryWidgetId || '').trim();
+		if (!primaryId) {
+			console.log('[CreatorApp] Skip host title — primary widget unknown');
+			emitCanvasWidgetsList('skip-host-title');
+			return;
+		}
+		if (widget.id !== primaryId) {
+			console.log(
+				'[CreatorApp] Skip host title — not primary',
+				widget.id.substring(0, 8),
+				primaryId.substring(0, 8)
+			);
+			emitCanvasWidgetsList('skip-host-title');
+			return;
+		}
 		const name = (widget.name || '').trim() || 'Untitled Widget';
 		console.log('[CreatorApp] Notify host widget name:', widget.id, name);
 		onWidgetRenamed?.({ widgetId: widget.id, name });
@@ -132,11 +153,18 @@
 	const HOST_REQUEST_PUBLISH_EVENT = 'widgetic:host-request-publish';
 	const HOST_TOGGLE_DEBUG_EVENT = 'widgetic:host-toggle-debug';
 	const HOST_TOGGLE_WIREFRAME_EVENT = 'widgetic:host-toggle-wireframe';
+	const HOST_TOGGLE_ADVANCED_EVENT = 'widgetic:host-toggle-advanced';
 	const HOST_OPEN_WIDGET_DETAILS_EVENT = 'widgetic:host-open-widget-details';
 	const HOST_DUPLICATE_WIDGET_EVENT = 'widgetic:host-duplicate-widget';
 	const HOST_DELETE_WIDGET_EVENT = 'widgetic:host-delete-widget';
+	const HOST_SAVE_CANVAS_EVENT = 'widgetic:host-save-canvas';
+	const HOST_SET_PRIMARY_WIDGET_EVENT = 'widgetic:host-set-primary-widget';
+	const HOST_REQUEST_CANVAS_WIDGETS_EVENT = 'widgetic:host-request-canvas-widgets';
+	const HOST_MOVE_CANVAS_FOLDER_EVENT = 'widgetic:host-move-canvas-folder';
 	const CREATOR_DEBUG_CHANGED_EVENT = 'widgetic:creator-debug-changed';
 	const CREATOR_WIREFRAME_CHANGED_EVENT = 'widgetic:creator-wireframe-changed';
+	const CREATOR_ADVANCED_CHANGED_EVENT = 'widgetic:creator-advanced-changed';
+	const CREATOR_CANVAS_WIDGETS_EVENT = 'widgetic:creator-canvas-widgets';
 
 	/** Site AppHeader rename — embed is a second Svelte runtime, so mount props do not update. */
 	async function applyHostWidgetName(widgetId: string | null | undefined, newName: string): Promise<void> {
@@ -238,7 +266,7 @@
 	/**
 	 * WIDGETIC EDITOR — PropsEditor for design/content property editing
 	 */
-	import { PropsEditor, setFileBrowserUploadConfig } from '@widgetic/editor';
+	import { PropsEditor, setFileBrowserUploadConfig, setGoogleFontsApiKey } from '@widgetic/editor';
 
 	// API root: embedded hosts pass apiUrl; standalone uses VITE_API_URL / PUBLIC_API_URL.
 	// If unset, @widgetic/api-sdk falls back to BASE_PATH = dev-api.widgetic.com (OpenAPI default).
@@ -316,9 +344,41 @@
 			: new UploadsApi({ accessToken: token, middleware: [idempotencyKeyMiddleware] });
 
 		authenticatedClientsToken = token;
+		try {
+			setWsAuthToken(token);
+		} catch {
+			/* websocket store may not be ready yet */
+		}
 		syncFileBrowserUploadConfigForCreator();
 	}
 
+	function applySiteSessionToCreator(): boolean {
+		const synced = syncSessionFromSiteAuth();
+		if (!synced) return false;
+		try {
+			const sessionStr = localStorage.getItem('session');
+			const session = sessionStr ? JSON.parse(sessionStr) : null;
+			currentUserToken =
+				session?.accessToken ||
+				session?.access_token ||
+				localStorage.getItem('jwt') ||
+				currentUserToken;
+		} catch {
+			currentUserToken = localStorage.getItem('jwt') || currentUserToken;
+		}
+		if (currentUserToken) {
+			authenticatedClientsToken = null;
+			initializeAuthenticatedClients(currentUserToken);
+		}
+		updateTokenStatus();
+		console.log('[Auth] Creator SDK clients re-bound from site session');
+		return hasValidToken;
+	}
+
+	function handleSiteSessionExtended(): void {
+		applySiteSessionToCreator();
+	}
+
 	function syncFileBrowserUploadConfigForCreator() {
 		if (!authenticatedClientsToken) {
 			setFileBrowserUploadConfig(null);
@@ -509,6 +569,7 @@
 	let linkedWidgetIds: Set<string> = new Set();
 	function refreshLinkedWidgetIds() {
 		linkedWidgetIds = canvasRef?.getLinkedWidgetIds?.() ?? new Set();
+		emitCanvasWidgetsList('linked-ids');
 	}
 
 	// Delete Widget Shape confirmation dialog state
@@ -517,6 +578,8 @@
 	let deleteDialogWidgetId = '';
 	let deleteDialogStep: 'confirm-remove' | 'confirm-delete-db' = 'confirm-remove';
 	let deleteDialogResolve: ((result: { proceed: boolean; deleteFromDb: boolean }) => void) | null = null;
+	/** Keep second-step UI/code; MVP deletes the DB widget after the first confirm. */
+	const ASK_DELETE_FROM_DB_CONFIRM = false;
 
 	function showDeleteWidgetDialog(widgetId: string, widgetName: string): Promise<{ proceed: boolean; deleteFromDb: boolean }> {
 		return new Promise((resolve) => {
@@ -535,10 +598,15 @@
 				if (deleteDialogResolve) deleteDialogResolve({ proceed: false, deleteFromDb: false });
 				break;
 			case 'remove-and-ask-db':
-				if (deleteDialogResolve) deleteDialogResolve({ proceed: true, deleteFromDb: false });
-				deleteDialogResolve = null;
-				deleteDialogStep = 'confirm-delete-db';
-				return;
+				if (ASK_DELETE_FROM_DB_CONFIRM) {
+					if (deleteDialogResolve) deleteDialogResolve({ proceed: true, deleteFromDb: false });
+					deleteDialogResolve = null;
+					deleteDialogStep = 'confirm-delete-db';
+					return;
+				}
+				deleteDialogOpen = false;
+				if (deleteDialogResolve) deleteDialogResolve({ proceed: true, deleteFromDb: true });
+				break;
 			case 'keep-in-db':
 				deleteDialogOpen = false;
 				showToast('info', 'Shape removed', { description: 'Widget kept in database' });
@@ -559,6 +627,7 @@
 		if (!widgetsClient || !hasValidToken) return;
 		try {
 			console.log('[WidgetCreator] Deleting widget from DB:', widgetId);
+			closeWidgetDetailsPanel(widgetId);
 			await widgetsClient.deleteWidget({ id: widgetId });
 			widgets = widgets.filter((w: any) => w.id !== widgetId);
 			if (selectedWidgetId === widgetId) {
@@ -663,6 +732,8 @@
 	const draftConvertScreenshots = new Map<string, string>();
 	/** True while a draft conversion is being finalized (widget creation + shape replace). */
 	const finalizingDraftConversions = new Set<string>();
+	/** Keep Widget Details on this convert/draft widget until the user closes the panel. */
+	let detailsSessionWidgetId: string | null = null;
 
 	// Chat component reference and context (focused panel)
 	let chatMethods: {
@@ -681,10 +752,13 @@
 		markWidgetHeadAtLatestCommit?: () => void;
 		updateLatestCodegenStatusMessage?: (content: string) => void;
 		reloadConversationMessages?: () => Promise<void>;
-		/** Select an existing conversation in the chat UI (keep DB thread and visible chat in sync). */
-		selectConversation?: (conversationId: string) => void;
+		selectConversation?: (conversationId: string) => void | Promise<void>;
+		updateLastUserMessageAttachments?: (attachments: Array<{ id?: string; url: string; file_type?: string; file_name?: string | null }>) => void;
 	} | null = null;
 	let chatMethodsByWidgetId: Record<string, NonNullable<typeof chatMethods>> = {};
+	/** Conversation `completed` flag per widget — ActionBar Complete / Completed. */
+	let conversationCompletedByWidgetId: Record<string, boolean> = {};
+	let conversationsByWidgetId: Record<string, any[]> = {};
 	let pendingChatDraftText = '';
 	let chatDraftRestoredForWidgetId: string | null = null;
 	/**
@@ -704,7 +778,7 @@
 
 	/** Prompt mentions a reference image but chat has no attachment (common UX mistake). */
 	function promptImpliesVisionReference(prompt: string): boolean {
-		return /\b(attached|attachment|reference\s+image|screenshot|see\s+image|cu\s+imagine|atașat|atasat)\b/i.test(
+		return /(attached\s+image|image\s+attached|screenshot|reference\s+image|see\s+(the\s+)?image|cu\s+imagine|imagine[aă]?\s+ata[sș]|ata[sș]at[ăa]?\s+imagine)/i.test(
 			prompt,
 		);
 	}
@@ -713,6 +787,9 @@
 		file?: File,
 		uploadedUrl?: string,
 	): Promise<string | null> {
+		if (file && !file.type.startsWith('image/')) {
+			return null;
+		}
 		if (uploadedUrl && /^https?:\/\//i.test(uploadedUrl)) {
 			try {
 				const response = await fetch(uploadedUrl);
@@ -740,7 +817,7 @@
 
 	async function handleChatUploadFile(
 		file: File,
-		options?: { onProgress?: (percentage: number) => void; source?: string },
+		options?: { onProgress?: (percentage: number) => void; source?: string; widgetId?: string },
 	) {
 		if (!authenticatedClientsToken) {
 			throw new Error('Upload client not initialized');
@@ -750,6 +827,7 @@
 		const uploadBasePath =
 			apiBasePath ||
 			`${(apiRoot || import.meta.env.VITE_API_URL || 'http://localhost:3000').replace(/\/+$/, '')}/v1`;
+		const persistWidgetId = options?.widgetId || selectedWidgetId || undefined;
 		const result = await uploadChatFileToWidgeticApi(
 			file,
 			{
@@ -757,7 +835,7 @@
 				accessToken: authenticatedClientsToken,
 				contextType: options?.source === 'preview-screenshot' ? 'browser-ic' : 'widget-codegen',
 				source: options?.source || 'chat-upload',
-				widgetId: selectedWidgetId || undefined,
+				widgetId: persistWidgetId && !isDraftConvertId(persistWidgetId) ? persistWidgetId : undefined,
 				conversationId: currentChatConversationId || undefined,
 			},
 			{ onProgress: options?.onProgress },
@@ -816,6 +894,7 @@
 
 		const panelChat = getChatMethodsForWidget(codegenWidgetId);
 		const cdnUploadIds = (attachments || [])
+			.filter((attachment) => attachment.uploadId && attachment.fileType.startsWith('image/'))
 			.map((attachment) => attachment.uploadId)
 			.filter((id): id is string => Boolean(id));
 
@@ -866,24 +945,58 @@
 					? promptImages
 					: getPanelState(codegenWidgetId).promptImages;
 		const hasImages = effectivePromptImages.length > 0 || cdnUploadIds.length > 0;
-		if (!hasImages && promptImpliesVisionReference(content)) {
+		const hasNonImageFiles = (attachments || []).some(
+			(attachment) => attachment.fileType && !attachment.fileType.startsWith('image/'),
+		);
+		if (!hasImages && !hasNonImageFiles && promptImpliesVisionReference(content)) {
+			const missingImageError =
+				'Promptul menționează o imagine atașată, dar în chat nu e niciun attachment. Folosește butonul Upload.';
 			showToast('warning', 'Lipsește imaginea de referință', {
-				description:
-					'Promptul menționează o imagine atașată, dar în chat nu e niciun attachment. Folosește butonul Upload sau ?attachStairsRef=1.',
+				description: missingImageError,
 				duration: 10000,
 			});
+			patchCodegenUiState(codegenWidgetId, {
+				lastGenerationFailed: true,
+				lastGenerationError: missingImageError,
+				generateCodeStatus: '❌ Missing reference image',
+			});
+			pushCodegenFailureToChat(codegenWidgetId, missingImageError);
 			return;
 		}
-		// Pass upload IDs / images explicitly — clearDraft already wiped Chat's local attachments.
+		const persistFileAttachments = (attachments || [])
+			.filter((attachment) =>
+				!!attachment.file
+				|| (attachment.url && (attachment.url.startsWith('blob:') || attachment.url.startsWith('data:') || /^https?:\/\//i.test(attachment.url))),
+			)
+			.map((attachment, i) => ({
+				url: attachment.url,
+				file: attachment.file,
+				file_type: guessAttachmentFileType(attachment.url || '', attachment.fileName, attachment.fileType),
+				file_name: attachment.fileName,
+				file_size: attachment.fileSize,
+				display_order: i + 1,
+			}));
+		// Chat.onSaveMessage already persisted this turn. generateCode keeps one
+		// ensureCodegenUserMessagePersisted after imagesToSend is finalized.
 		await generateCode({
 			prompt: content,
 			fromChat: true,
 			widgetId: codegenWidgetId,
 			attachmentIds: cdnUploadIds.length > 0 ? cdnUploadIds : undefined,
 			promptImagesOverride: effectivePromptImages.length > 0 ? effectivePromptImages : undefined,
+			persistFileAttachments: persistFileAttachments.length > 0 ? persistFileAttachments : undefined,
 		});
 	}
 
+	function pushCodegenFailureToChat(widgetId: string, errorText: string) {
+		const panelChat = getChatMethodsForWidget(widgetId);
+		const content = /^Code generation failed/i.test(errorText)
+			? errorText
+			: `Code generation failed: ${errorText}`;
+		panelChat?.addAssistantMessage?.(content);
+		console.log('[Chat] Codegen failure bubble:', content.slice(0, 160));
+	}
+
 	/** Retry failed codegen without duplicating the user bubble in chat. */
 	async function handleChatRetryMessage(content: string, sourceWidgetId?: string) {
 		const widgetId = sourceWidgetId ?? selectedWidgetId;
@@ -894,7 +1007,53 @@
 			':',
 			content.substring(0, 80),
 		);
-		await generateCode({ prompt: content, fromChat: true, widgetId });
+		const widget = getWidgetById(widgetId) || (selectedWidget?.id === widgetId ? selectedWidget : null);
+		if (widget) {
+			await ensureWidgetRepository(widget, { forceRecreate: true, silent: true });
+		}
+		const panelChat = getChatMethodsForWidget(widgetId);
+		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.
+		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');
+					}
+				}
+			} catch (retryAttErr) {
+				console.warn('[Chat→Retry] Could not load previous attachments for retry:', retryAttErr);
+			}
+		}
+
+		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,
+		});
 	}
 
 	function handleChatConversationChange(conversationId: string | null, sourceWidgetId?: string) {
@@ -905,6 +1064,86 @@
 			currentChatConversationId = conversationId;
 		}
 		console.log('[Chat] Active conversation changed for', widgetId.substring(0, 8), ':', conversationId || 'none');
+		const conv = (conversationsByWidgetId[widgetId] || []).find((c) => c.id === conversationId);
+		if (conv) {
+			const completed = !!(conv.completed ?? conv.is_completed ?? conv.isCompleted);
+			conversationCompletedByWidgetId = { ...conversationCompletedByWidgetId, [widgetId]: completed };
+		}
+	}
+
+	function isConversationRecordCompleted(conversation: any): boolean {
+		return !!(conversation?.completed ?? conversation?.is_completed ?? conversation?.isCompleted);
+	}
+
+	function isUuid(value: string | null | undefined): value is string {
+		return !!value && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value);
+	}
+
+	function resolvePersistableConversationId(widgetId: string, preferredId?: string | null): string | null {
+		const knownIds = (conversationsByWidgetId[widgetId] || [])
+			.map((c) => c.id)
+			.filter((id) => isUuid(id));
+		const fromChat = getChatMethodsForWidget(widgetId)?.getConversationId?.();
+		const fromFocus = widgetId === focusedPanelWidgetId ? currentChatConversationId : null;
+		const preferredKnown = [preferredId, fromChat, fromFocus].find((id) => id && knownIds.includes(id));
+		if (preferredKnown) return preferredKnown;
+		if (knownIds[0]) return knownIds[0];
+		if (isUuid(preferredId)) return preferredId;
+		if (isUuid(fromChat)) return fromChat;
+		return isUuid(fromFocus) ? fromFocus : null;
+	}
+
+	async function handleChatCompletionToggle(
+		widgetId: string,
+		detail?: { conversationId?: string | null; completed?: boolean },
+	) {
+		const next = typeof detail?.completed === 'boolean'
+			? detail.completed
+			: !conversationCompletedByWidgetId[widgetId];
+		conversationCompletedByWidgetId = { ...conversationCompletedByWidgetId, [widgetId]: next };
+		let conversationId = resolvePersistableConversationId(widgetId, detail?.conversationId);
+		console.log('[Chat] Complete toggle', widgetId.substring(0, 8), next ? 'completed' : 'active', conversationId);
+		if (!conversationsClient) {
+			console.warn('[Chat] Complete toggle skipped persist — missing conversations client');
+			return;
+		}
+		try {
+			if (!conversationId) {
+				const created = await handleCreateConversation(widgetId, 'Widget conversation');
+				conversationId = created?.id || null;
+				console.log('[Chat] Complete created conversation for persist', conversationId);
+			}
+			if (!conversationId || !isUuid(conversationId)) {
+				throw new Error('No persistable conversation id');
+			}
+			try {
+				await conversationsClient.updateConversation({
+					conversationId,
+					updateConversationRequest: { completed: next },
+				});
+			} catch (updateError) {
+				const listed = await handleLoadConversations(widgetId);
+				const fallbackId = (listed || []).map((c) => c.id).find((id) => isUuid(id) && id !== conversationId);
+				if (!fallbackId) throw updateError;
+				console.warn('[Chat] Complete retry with loaded conversation', fallbackId);
+				conversationId = fallbackId;
+				await conversationsClient.updateConversation({
+					conversationId,
+					updateConversationRequest: { completed: next },
+				});
+			}
+			conversationsByWidgetId = {
+				...conversationsByWidgetId,
+				[widgetId]: (conversationsByWidgetId[widgetId] || []).map((c) =>
+					c.id === conversationId ? { ...c, completed: next } : c,
+				),
+			};
+			console.log('[Chat] Conversation marked', next ? 'completed' : 'active', conversationId);
+		} catch (error) {
+			console.error('[Chat] Failed to persist conversation completed:', error);
+			showToast('error', 'Could not update conversation status');
+			conversationCompletedByWidgetId = { ...conversationCompletedByWidgetId, [widgetId]: !next };
+		}
 	}
 
 	/** Sync unsent chat draft + attachments to the durable per-widget draft (or clear when empty). */
@@ -970,7 +1209,43 @@
 	 * picked, which may differ from convos[0] when several empty conversations
 	 * exist (feedback c: chat looked empty while messages went elsewhere).
 	 */
-	async function ensureCodegenUserMessagePersisted(widgetId: string, prompt: string): Promise<void> {
+	function guessAttachmentFileType(url: string, fileName?: string | null, fallback?: string | null): string {
+		if (fallback && String(fallback).includes('/')) return String(fallback);
+		const hint = `${url || ''} ${fileName || ''}`;
+		if (/\.pdf(\?|$)/i.test(hint)) return 'application/pdf';
+		if (/\.(mp4|webm|mov)(\?|$)/i.test(hint)) return 'video/mp4';
+		if (/\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(hint)) return 'image/png';
+		if (fallback) return String(fallback);
+		return 'application/octet-stream';
+	}
+
+	function uniquePersistImageUrls(urls: string[]): string[] {
+		const seen = new Set<string>();
+		const httpsUrls: string[] = [];
+		const dataUrls: string[] = [];
+		for (const url of urls) {
+			if (typeof url !== 'string' || url.length < 20 || seen.has(url)) continue;
+			seen.add(url);
+			if (/^https?:\/\//i.test(url)) httpsUrls.push(url);
+			else if (url.startsWith('data:image/')) dataUrls.push(url);
+		}
+		// Same screenshot often exists as CDN URL + compressed data URL — keep HTTPS only.
+		return httpsUrls.length > 0 ? httpsUrls : dataUrls;
+	}
+
+	async function ensureCodegenUserMessagePersisted(
+		widgetId: string,
+		prompt: string,
+		imageUrls?: string[],
+		fileAttachments?: Array<{
+			url?: string;
+			file?: File;
+			file_type?: string;
+			file_name?: string | null;
+			file_size?: number | null;
+			display_order?: number;
+		}>,
+	): Promise<void> {
 		if (!conversationsClient || !messagesClient) return;
 		try {
 			const panelChat = getChatMethodsForWidget(widgetId);
@@ -990,20 +1265,123 @@
 				convId = conv?.id;
 			}
 			if (!convId) return;
-			if (convId !== visibleConversationId) {
-				// Point the panel chat at the conversation that will hold the messages
-				// so a later reopen shows the same thread the codegen used.
-				panelChat?.selectConversation?.(convId);
-				patchPanelSnapshot(widgetId, { currentChatConversationId: convId });
-			}
 
-			const messages = await handleLoadMessages(convId);
-			const hasUserMessage = messages?.some(
+			const persistImages = uniquePersistImageUrls([
+				...(imageUrls || []),
+				...(getPanelState(widgetId).promptImages ?? []),
+			]);
+			const compressedPersistImages: string[] = [];
+			for (const url of persistImages) {
+				if (typeof url === 'string' && url.startsWith('data:image/')) {
+					compressedPersistImages.push(await compressImageDataUrlForCodegen(url));
+				} else if (typeof url === 'string' && /^https?:\/\//i.test(url)) {
+					compressedPersistImages.push(url);
+				}
+			}
+			const persistFileItems = (fileAttachments || [])
+				.filter((att) =>
+					(typeof att.url === 'string' && (att.url.startsWith('blob:') || att.url.startsWith('data:') || /^https?:\/\//i.test(att.url)))
+					|| !!(att as { file?: File }).file,
+				)
+				.map((att, i) => ({
+					url: att.url || '',
+					file: (att as { file?: File }).file,
+					file_type: guessAttachmentFileType(att.url || '', att.file_name, att.file_type),
+					file_name: att.file_name || (att as { file?: File }).file?.name || `attachment-${i + 1}`,
+					file_size: att.file_size && att.file_size > 0 ? att.file_size : (att as { file?: File }).file?.size,
+					display_order: att.display_order ?? i + 1,
+				}));
+			if (compressedPersistImages.length === 0 && persistFileItems.length === 0) {
+				console.warn('[Codegen] Persist user message has no attachment URLs for widget', widgetId?.substring(0, 8));
+			}
+			const fileHasImage = persistFileItems.some((att) => {
+				const type = String(att.file_type || '');
+				const url = String(att.url || '');
+				return type.startsWith('image/') || url.startsWith('data:image/') || /\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(url);
+			});
+			const imagePersistItems = fileHasImage
+				? []
+				: compressedPersistImages.map((url, i) => ({
+					url,
+					file_type: guessAttachmentFileType(url, 'design-screenshot.png', 'image/png'),
+					file_name: 'design-screenshot.png',
+					display_order: i + 1,
+				}));
+			const persistAttachments = [...persistFileItems, ...imagePersistItems].map((att, i) => ({
+				...att,
+				display_order: i + 1,
+			}));
+			const convMessages = await handleLoadMessages(convId, widgetId);
+			const userMessages = (convMessages || []).filter(
 				(m) => (m.messageType || (m as any).message_type) === 'user'
 			);
-			if (!hasUserMessage) {
-				await handleSaveMessage(convId, buildUserPromptMessageContent(prompt), 'user');
-				console.log('[Codegen] Persisted initial user prompt on generate:', convId);
+			const promptNeedle = (prompt || '').trim();
+			const targetUser =
+				(promptNeedle
+					? [...userMessages].reverse().find((m) => {
+							const text = String(m.messageContent || (m as any).message_content || '').trim();
+							return (
+								text === promptNeedle ||
+								text.endsWith(promptNeedle) ||
+								(promptNeedle.length >= 12 && text.includes(promptNeedle.slice(0, 80)))
+							);
+						})
+					: null) || userMessages[userMessages.length - 1] || null;
+			const existingUrls = new Set(
+				(targetUser?.attachments || [])
+					.map((a: { url?: string }) => a.url)
+					.filter((url: string | undefined): url is string => !!url),
+			);
+			const existingHasRemoteImage = [...existingUrls].some((url) => /^https?:\/\//i.test(url));
+			const missingPersist = persistAttachments.filter((att) => {
+				if (att.url && existingUrls.has(att.url)) return false;
+				if (existingHasRemoteImage && typeof att.url === 'string' && att.url.startsWith('data:')) return false;
+				if (existingHasRemoteImage && String(att.file_type || '').startsWith('image/')) return false;
+				return true;
+			});
+			let savedAttachmentCount = targetUser?.attachments?.length || 0;
+			if (!targetUser) {
+				const saved = await handleSaveMessage(
+					convId,
+					buildUserPromptMessageContent(prompt),
+					'user',
+					persistAttachments.length > 0 ? persistAttachments : undefined,
+					widgetId,
+				);
+				const savedAtt = saved?.attachments || saved?.data?.attachments || [];
+				savedAttachmentCount = Array.isArray(savedAtt) ? savedAtt.length : 0;
+				console.log('[Codegen] Persisted initial user prompt on generate:', convId, 'attachments:', persistAttachments.length, 'saved:', savedAttachmentCount);
+				if (Array.isArray(savedAtt) && savedAtt.length > 0) {
+					panelChat?.updateLastUserMessageAttachments?.(savedAtt);
+				}
+			} else if (missingPersist.length > 0) {
+				const merged = [...(targetUser.attachments || []), ...missingPersist];
+				const apiAtt = await mapChatAttachmentsForApi(merged, widgetId);
+				if (apiAtt.length > 0) {
+					try {
+						await messagesClient.updateMessageRaw({
+							conversationId: convId,
+							messageId: targetUser.id,
+							updateMessageRequest: { attachments: apiAtt },
+						});
+						savedAttachmentCount = apiAtt.length;
+						console.log('[Codegen] Saved missing attachments on user message:', targetUser.id, apiAtt.length);
+					} catch (updateErr) {
+						console.warn('[Codegen] Failed to PATCH user message attachments:', updateErr);
+					}
+					panelChat?.updateLastUserMessageAttachments?.(apiAtt);
+				} else {
+					console.warn('[Codegen] mapChatAttachmentsForApi returned 0 items — attachments not stored');
+				}
+			}
+			if (persistAttachments.length > 0 && savedAttachmentCount === 0) {
+				console.error('[Codegen] User prompt saved without attachments — chat reopen will show placeholder');
+			}
+			if (convId !== visibleConversationId) {
+				await panelChat?.selectConversation?.(convId);
+				patchPanelSnapshot(widgetId, { currentChatConversationId: convId });
+			} else {
+				console.log('[Codegen] Keep local chat attachments after persist; skip reload wipe');
 			}
 		} catch (err) {
 			console.warn('[Codegen] Could not persist user prompt before generation:', err);
@@ -1028,18 +1406,27 @@
 		console.log('[WidgetCreator] Cleared prompt draft for widget:', widgetId.substring(0, 8));
 	}
 
-	/** Screenshot: capture widget preview iframe and return data URL */
-	async function handleChatScreenshot(): Promise<string | null> {
-		if (!widgetDetails?.hasValidPreview()) {
-			console.log('[Chat→Screenshot] Preview not ready');
+	/** Screenshot: capture this panel's widget preview iframe and return data URL */
+	async function handleChatScreenshot(widgetId?: string | null): Promise<string | null> {
+		const targetId = widgetId || focusedPanelWidgetId || selectedWidgetId;
+		const panelRef = getWidgetDetailsRef(targetId);
+		const iframe =
+			(panelRef?.getPreviewIframe?.() as HTMLIFrameElement | null) ||
+			(document.querySelector('iframe[title="Widget preview"]') as HTMLIFrameElement | null);
+
+		if (!iframe?.contentWindow) {
+			console.log('[Chat→Screenshot] Preview iframe not ready', {
+				targetId: targetId?.substring(0, 8),
+				hasValidPreview: panelRef?.hasValidPreview?.() ?? false,
+			});
 			return null;
 		}
-		const iframe = document.querySelector('iframe[title="Widget preview"]') as HTMLIFrameElement;
-		if (!iframe?.contentWindow) return null;
 
+		console.log('[Chat→Screenshot] Requesting screenshot from preview iframe', targetId?.substring(0, 8));
 		return new Promise<string | null>((resolve) => {
 			const timeout = setTimeout(() => {
 				window.removeEventListener('message', handler);
+				console.warn('[Chat→Screenshot] Timed out waiting for widgetic:screenshot');
 				resolve(null);
 			}, 8000);
 
@@ -1087,6 +1474,13 @@
 			});
 			const json = await response.raw.json();
 			const conversations = normalizeConversationRecords(json);
+			conversationsByWidgetId = { ...conversationsByWidgetId, [contextId]: conversations };
+			if (conversations[0]) {
+				conversationCompletedByWidgetId = {
+					...conversationCompletedByWidgetId,
+					[contextId]: isConversationRecordCompleted(conversations[0]),
+				};
+			}
 			console.log('[Chat→Backend] Loaded conversations for widget:', contextId, conversations.length);
 			return conversations;
 		} catch (error) {
@@ -1139,26 +1533,40 @@
 			const json = await response.raw.json();
 			const messages = json?.data || [];
 			console.log('[Chat→Backend] Loaded messages for conversation:', conversationId, messages.length);
-			const mappedMessages = messages.map((m: any) => ({
+			const mappedMessages = messages.map((m: any) => {
+				const rawAttachments = m.attachments || m.message_contents || m.messageContents || [];
+				const attachments = (Array.isArray(rawAttachments) ? rawAttachments : []).map((a: any, idx: number) => {
+					const nested = a?.contents || a?.content;
+					const content = Array.isArray(nested) ? (nested[0] || {}) : (nested || a || {});
+					const url = content.url || content.public_url || content.publicUrl || content.file_url || a.url || '';
+					let fileType = content.file_type || content.fileType || a.file_type || a.fileType || '';
+					const fileName = content.file_name || content.fileName || a.file_name || a.fileName || null;
+					if (!fileType || !String(fileType).includes('/')) {
+						fileType = guessAttachmentFileType(url, fileName, fileType);
+					}
+					return {
+						id: content.id || a.id || `att_${idx}`,
+						url,
+						file_type: fileType,
+						file_name: fileName,
+						file_size: content.file_size ?? content.fileSize ?? a.file_size ?? a.fileSize ?? null,
+						display_order: a.display_order ?? a.displayOrder ?? content.display_order ?? idx + 1,
+						created_at: content.created_at || content.createdAt || a.created_at || a.createdAt || new Date().toISOString(),
+					};
+				}).filter((a: { url: string }) => !!a.url);
+				return {
 				id: m.id,
 				conversationId: m.conversation_id || m.conversationId || conversationId,
 				messageContent: m.message_content || m.messageContent || '',
 				messageType: m.message_type || m.messageType || 'user',
-				attachments: (m.attachments || []).map((a: any, idx: number) => ({
-					id: a.id || `att_${idx}`,
-					url: a.url || '',
-					file_type: a.file_type || a.fileType || 'image/png',
-					file_name: a.file_name || a.fileName || null,
-					file_size: a.file_size ?? a.fileSize ?? null,
-					display_order: a.display_order ?? a.displayOrder ?? idx + 1,
-					created_at: a.created_at || a.createdAt || new Date().toISOString(),
-				})),
+				attachments,
 				isCommit: m.is_commit || m.isCommit || false,
 				userId: m.user_id || m.userId || '',
 				createdAt: new Date(m.created_at || m.createdAt),
 				updatedAt: new Date(m.updated_at || m.updatedAt || m.created_at || m.createdAt),
 				rolledBackAt: m.rolled_back_at || m.rolledBackAt || null,
-			}));
+			};
+			});
 			const withHead = markWidgetHeadOnLoadedMessages(mappedMessages);
 			const syncWidgetId = widgetIdForSync ?? selectedWidgetId;
 			if (syncWidgetId) {
@@ -1188,6 +1596,15 @@
 			const conversation = json?.data || json;
 			const conversationId = conversation?.id || conversation?.conversation_id || conversation?.conversationId;
 			console.log('[Chat→Backend] Created conversation:', conversationId);
+			if (conversationId && contextId) {
+				conversationsByWidgetId = {
+					...conversationsByWidgetId,
+					[contextId]: [
+						{ ...conversation, id: conversationId },
+						...(conversationsByWidgetId[contextId] || []).filter((c) => c.id !== conversationId),
+					],
+				};
+			}
 			return conversationId ? { ...conversation, id: conversationId } : conversation;
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to create conversation:', error);
@@ -1195,48 +1612,96 @@
 		}
 	}
 
-	/** Map chat attachment objects to API content items (compressed data URLs for images). */
+	function dataUrlToUploadFile(dataUrl: string, fileName: string): File | null {
+		try {
+			const comma = dataUrl.indexOf(',');
+			if (comma < 0) return null;
+			const header = dataUrl.slice(0, comma);
+			const mimeMatch = header.match(/data:([^;,]+)/);
+			const mimeType = mimeMatch?.[1] || 'application/octet-stream';
+			const binary = atob(dataUrl.slice(comma + 1));
+			const bytes = new Uint8Array(binary.length);
+			for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+			return new File([bytes], fileName, { type: mimeType });
+		} catch (err) {
+			console.warn('[Chat→Backend] Could not convert data URL to File:', err);
+			return null;
+		}
+	}
+
+	/** Map chat attachments to API items. Inline data/blob files are uploaded to user storage (CDN URL). */
 	async function mapChatAttachmentsForApi(
 		attachments?: Array<{
 			url?: string;
+			file?: File;
 			file_type?: string;
 			file_name?: string | null;
 			file_size?: number | null;
 			display_order?: number;
 		}>,
+		persistWidgetId?: string | null,
 	): Promise<Array<{ url: string; file_type: string; file_name?: string; file_size?: number; display_order?: number }>> {
 		if (!attachments?.length) return [];
 		const items: Array<{ url: string; file_type: string; file_name?: string; file_size?: number; display_order?: number }> = [];
 		for (let i = 0; i < attachments.length; i++) {
 			const att = attachments[i];
 			let url = att.url || '';
-			if (!url) continue;
-			if (url.startsWith('blob:')) {
+			const fileName = att.file_name || att.file?.name || `attachment-${i + 1}`;
+			if (att.file instanceof File && (!url || url.startsWith('blob:') || url.startsWith('data:'))) {
 				try {
-					const blob = await fetch(url).then((r) => r.blob());
-					url = await new Promise<string>((resolve, reject) => {
-						const reader = new FileReader();
-						reader.onload = () => resolve(String(reader.result));
-						reader.onerror = () => reject(reader.error);
-						reader.readAsDataURL(blob);
+					const uploaded = await handleChatUploadFile(att.file, {
+						source: 'chat-message-persist',
+						widgetId: persistWidgetId || undefined,
+					});
+					url = uploaded.url;
+					console.log('[Chat→Backend] Uploaded chat File to user storage:', uploaded.id, url.slice(0, 80));
+					items.push({
+						url,
+						file_type: guessAttachmentFileType(url, uploaded.fileName || fileName, uploaded.fileType || att.file_type || att.file.type),
+						file_name: uploaded.fileName || fileName,
+						file_size: uploaded.fileSize,
+						display_order: att.display_order ?? i + 1,
 					});
+					continue;
 				} catch (err) {
-					console.warn('[Chat→Backend] Could not convert blob attachment to data URL:', err);
+					console.warn('[Chat→Backend] Chat File upload failed, skipping attachment:', err);
 					continue;
 				}
 			}
-			if (url.startsWith('data:image/')) {
-				url = await compressImageDataUrlForCodegen(url, 960, 80_000);
-				// Oversized inline payloads often 500 on remote create_message RPC — skip attachment.
-				if (url.length > 100_000) {
-					console.warn('[Chat→Backend] Skipping oversized data-URL attachment for message save');
+			if (!url) continue;
+			if (url.startsWith('blob:') || url.startsWith('data:')) {
+				try {
+					let file: File | null = null;
+					if (url.startsWith('blob:')) {
+						const blob = await fetch(url).then((r) => r.blob());
+						file = new File([blob], fileName, { type: blob.type || att.file_type || 'application/octet-stream' });
+					} else {
+						file = dataUrlToUploadFile(url, fileName);
+					}
+					if (!file) continue;
+					const uploaded = await handleChatUploadFile(file, {
+						source: 'chat-message-persist',
+						widgetId: persistWidgetId || undefined,
+					});
+					url = uploaded.url;
+					console.log('[Chat→Backend] Uploaded chat file to user storage:', uploaded.id, url.slice(0, 80));
+					items.push({
+						url,
+						file_type: guessAttachmentFileType(url, uploaded.fileName || fileName, uploaded.fileType || att.file_type),
+						file_name: uploaded.fileName || fileName,
+						file_size: uploaded.fileSize,
+						display_order: att.display_order ?? i + 1,
+					});
+					continue;
+				} catch (err) {
+					console.warn('[Chat→Backend] Chat file upload failed, skipping attachment:', err);
 					continue;
 				}
 			}
 			items.push({
 				url,
-				file_type: att.file_type || 'image/png',
-				file_name: att.file_name || `attachment-${i + 1}.png`,
+				file_type: guessAttachmentFileType(url, fileName, att.file_type),
+				file_name: fileName,
 				file_size: att.file_size ?? undefined,
 				display_order: att.display_order ?? i + 1,
 			});
@@ -1251,11 +1716,13 @@
 		messageType: string,
 		attachments?: Array<{
 			url?: string;
+			file?: File;
 			file_type?: string;
 			file_name?: string | null;
 			file_size?: number | null;
 			display_order?: number;
 		}>,
+		persistWidgetId?: string | null,
 	): Promise<any> {
 		try {
 			if (!messagesClient) {
@@ -1268,7 +1735,17 @@
 				return null;
 			}
 			const apiAttachments =
-				messageType === 'user' ? await mapChatAttachmentsForApi(attachments) : [];
+				messageType === 'user' ? await mapChatAttachmentsForApi(
+					(attachments || []).map((att, i) => ({
+						url: att.url,
+						file: att.file,
+						file_type: guessAttachmentFileType(att.url || '', att.file_name, att.file_type),
+						file_name: att.file_name || att.file?.name || `attachment-${i + 1}`,
+						file_size: att.file_size && att.file_size > 0 ? att.file_size : att.file?.size,
+						display_order: att.display_order ?? i + 1,
+					})),
+					persistWidgetId,
+				) : [];
 			const createPayload = {
 				message_content: content,
 				message_type: messageType as 'user' | 'assistant',
@@ -1283,25 +1760,18 @@
 				});
 				const json = await response.raw.json();
 				console.log('[Chat→Backend] Saved message to conversation:', conversationId);
-				return json?.data || json;
+				const saved = json?.data || json;
+				const savedAtt = saved?.attachments;
+				return {
+					...saved,
+					attachments: (Array.isArray(savedAtt) && savedAtt.length > 0) ? savedAtt : apiAttachments,
+				};
 			} catch (withAttachmentsError) {
-				// Remote RPC sometimes 500s on large/strict attachment payloads — retry text-only
-				// so codegen can continue (vision uses attachmentIds separately).
-				if (apiAttachments.length === 0) throw withAttachmentsError;
-				console.warn(
-					'[Chat→Backend] Save with attachments failed, retrying text-only:',
+				console.error(
+					'[Chat→Backend] Save with attachments failed — not falling back to text-only:',
 					withAttachmentsError,
 				);
-				const response = await messagesClient.createMessageRaw({
-					conversationId,
-					createMessageRequest: {
-						...createPayload,
-						attachments: undefined,
-					},
-				});
-				const json = await response.raw.json();
-				console.log('[Chat→Backend] Saved message (text-only fallback):', conversationId);
-				return json?.data || json;
+				throw withAttachmentsError;
 			}
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to save message:', error);
@@ -1417,6 +1887,11 @@
 	let publishingWidgetId: string | null = null;
 	let publishWidgetStatus: string | null = null;
 
+	$: if (isPublishing && !publishingWidgetId) {
+		console.warn('[Publish] Clearing stuck isPublishing without publishingWidgetId');
+		isPublishing = false;
+	}
+
 	// Cross-tab operation guards — detect when another tab is generating/publishing on the same widget
 	let isGeneratingInOtherTab = false;
 	let isPublishingInOtherTab = false;
@@ -1496,6 +1971,9 @@
 			);
 			const sessionAhead = sessionOrdered.find((candidate) => !commitsMatch(candidate, liveSha));
 			if (sessionAhead) return sessionAhead;
+			// localStorage HEAD written at codegen complete — must win over live SHA
+			// even before snap/live.lastCommitId propagate (reopen currently "fixed" this).
+			if (stored && !commitsMatch(stored, liveSha)) return stored;
 			const sessionMatch = sessionOrdered.find((candidate) => commitsMatch(candidate, liveSha));
 			if (sessionMatch) return sessionMatch;
 			if (stored && commitsMatch(stored, liveSha)) return stored;
@@ -1554,18 +2032,21 @@
 	let editingCompositionName = '';
 	let deletingCompositionId: string | null = null;
 
-	/** Minimum chat height; flex-1 grows to fill leftover space above Publish. */
-	const DEFAULT_CHAT_CONTAINER_HEIGHT = 280;
+	/** Explicit chat box height (px). Drag grows this and pushes Publish down. */
+	const CHAT_DEFAULT_HEIGHT = 550;
 	const CHAT_MIN_HEIGHT = 260;
-	const CHAT_MAX_HEIGHT = 1400;
+	const CHAT_MAX_HEIGHT = 2000;
 
 	function getChatContainerHeightForPanel(widgetId: string): number {
-		return getPanelState(widgetId).chatContainerHeight ?? DEFAULT_CHAT_CONTAINER_HEIGHT;
+		const stored = getPanelState(widgetId).chatContainerHeight;
+		if (stored == null || stored <= 0) return CHAT_DEFAULT_HEIGHT;
+		return Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, stored));
 	}
 
 	function handleChatMessagesResize(widgetId: string, deltaPx: number): void {
 		const current = getChatContainerHeightForPanel(widgetId);
 		const next = Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, current + deltaPx));
+		console.log('[Chat] Resize container height:', widgetId?.substring(0, 8), current, '→', next);
 		patchPanelSnapshot(widgetId, { chatContainerHeight: next });
 	}
 
@@ -1627,6 +2108,50 @@
 		return null;
 	}
 
+	/** If the widget only has titleFont, expose subtitleFont in Edit (same FontIC). */
+	function ensureSubtitleFontInDesignSchema(schema: unknown): unknown {
+		if (!schema) return schema;
+		try {
+			const clone = JSON.parse(JSON.stringify(schema));
+			const groups = Array.isArray(clone) ? clone : clone.componentGroups;
+			if (!Array.isArray(groups) || groups.length === 0) return schema;
+			const allProps = groups.flatMap((group: { components?: Array<{ properties?: unknown[] }> }) =>
+				(group.components || []).flatMap((component) => component.properties || [])
+			);
+			const hasSubtitle = allProps.some((prop: { name?: string; id?: string }) =>
+				/subtitleFont/i.test(String(prop?.name || prop?.id || ''))
+			);
+			if (hasSubtitle) return clone;
+			const titleProp = allProps.find((prop: { name?: string; id?: string; inputController?: { type?: string } }) => {
+				const key = String(prop?.name || prop?.id || '');
+				const type = String(prop?.inputController?.type || '').toLowerCase();
+				return type === 'font' && /titleFont|^font$/i.test(key);
+			});
+			if (!titleProp || typeof titleProp !== 'object') return clone;
+			const firstComponent = groups[0]?.components?.[0];
+			if (!firstComponent) return clone;
+			firstComponent.properties = Array.isArray(firstComponent.properties) ? firstComponent.properties : [];
+			const subtitleProp = {
+				...JSON.parse(JSON.stringify(titleProp)),
+				id: 'subtitleFont',
+				name: 'subtitleFont',
+				description: 'Subtitle Font',
+			};
+			const titleIndex = firstComponent.properties.findIndex(
+				(prop: { name?: string; id?: string }) =>
+					(prop?.name || prop?.id) === ((titleProp as { name?: string; id?: string }).name
+						|| (titleProp as { name?: string; id?: string }).id)
+			);
+			if (titleIndex >= 0) firstComponent.properties.splice(titleIndex + 1, 0, subtitleProp);
+			else firstComponent.properties.push(subtitleProp);
+			console.log('[CompositionEditor] Added subtitleFont FontIC next to titleFont');
+			return Array.isArray(schema) ? clone : clone;
+		} catch (error) {
+			console.warn('[CompositionEditor] subtitleFont schema inject skipped:', error);
+			return schema;
+		}
+	}
+
 	function normalizeContentSchemaFromApiResponse(contentRes: unknown): any {
 		if (!contentRes) return null;
 		const payload = (contentRes as { data?: unknown })?.data ?? contentRes;
@@ -1756,14 +2281,20 @@
 	}
 
 	/** Load design & content schemas for a widget — per-panel; never wipes other panels. */
-	async function loadWidgetSchemas(widgetId: string): Promise<void> {
+	async function loadWidgetSchemas(widgetId: string, options?: { force?: boolean }): Promise<void> {
 		if (!widgetsClient || !hasValidToken) {
 			patchPanelSnapshot(widgetId, { compositionSchemasLoading: false, schemaLoadStartedAt: null });
 			return;
 		}
 
+		if (options?.force) {
+			widgetSchemaCache.delete(widgetId);
+			cancelPanelSchemaLoad(widgetId);
+			abandonSchemaLoadAttempt(widgetId);
+		}
+
 		const existingLoad = schemaLoadPromises.get(widgetId);
-		if (existingLoad) {
+		if (existingLoad && !options?.force) {
 			const snap = getPanelState(widgetId);
 			if (!isStalePanelSchemaLoading(widgetId, snap)) return existingLoad;
 			cancelPanelSchemaLoad(widgetId);
@@ -1779,7 +2310,7 @@
 			|| existing.compositionContentSchema
 		);
 
-		if (hasCachedSchemas) {
+		if (hasCachedSchemas && !options?.force) {
 			const designSchema = cached?.design ?? existing.compositionDesignSchema;
 			const contentSchema = cached?.content ?? existing.compositionContentSchema;
 			const schemaError = cached?.error ?? existing.compositionSchemasError;
@@ -1874,7 +2405,9 @@
 					'Content schema',
 				);
 
-				designSchema = normalizeDesignSchemaFromApiResponse(designRes);
+				designSchema = ensureSubtitleFontInDesignSchema(
+					normalizeDesignSchemaFromApiResponse(designRes)
+				);
 				contentSchema = normalizeContentSchemaFromApiResponse(contentRes);
 
 				if (!designSchema && !contentSchema) {
@@ -1924,7 +2457,11 @@
 				compositionSchemasError = schemaError;
 			}
 			if (designSchema || contentSchema) {
-				queueMicrotask(() => loadCompositionsForPanel(widgetId));
+				queueMicrotask(() => {
+					void loadCompositionsForPanel(widgetId).then(() => {
+						applyPanelCompositionToPreview(widgetId);
+					});
+				});
 			}
 		} finally {
 			schemaLoadInFlight.delete(widgetId);
@@ -1962,20 +2499,32 @@
 		return values;
 	}
 
-	/** After codegen, push design.json defaults into Create preview (Worker HTML uses var() fallbacks only). */
+	/** After codegen, push design.json + content.json defaults into Create preview. */
 	async function applyDesignSchemaDefaultsToPreview(widgetId: string) {
 		if (!widgetId || !widgetsClient) return;
 		await scheduleWidgetSchemaLoad(widgetId);
 		const schema = getPanelDisplayState(widgetId).compositionDesignSchema;
 		const defaults = extractDesignDefaultsFromSchema(schema);
-		if (Object.keys(defaults).length === 0) return;
-		if (widgetId === focusedPanelWidgetId) {
-			liveDesignValues = defaults;
-		} else {
-			patchPanelSnapshot(widgetId, { liveDesignValues: defaults });
+		if (Object.keys(defaults).length > 0) {
+			if (widgetId === focusedPanelWidgetId) {
+				liveDesignValues = defaults;
+			} else {
+				patchPanelSnapshot(widgetId, { liveDesignValues: defaults });
+			}
+			getWidgetDetailsRef(widgetId)?.sendMessageToPreview({ type: 'widgetic:update', design: flattenDesignValuesForPreview(defaults) });
+			console.log('[Create Preview] Applied design schema defaults:', Object.keys(defaults));
+		}
+		const contentSchema = getPanelDisplayState(widgetId).compositionContentSchema;
+		const schemaItems = contentSchema?.contentItems ?? contentSchema?.data?.contentItems;
+		if (Array.isArray(schemaItems) && schemaItems.length > 0) {
+			const existing = getPanelDisplayState(widgetId).liveContentItems || [];
+			const merged = mergeContentItemsWithSchema(existing, schemaItems);
+			patchPanelSnapshot(widgetId, { liveContentItems: merged });
+			if (widgetId === focusedPanelWidgetId) liveContentItems = merged;
 		}
-		getWidgetDetailsRef(widgetId)?.sendMessageToPreview({ type: 'widgetic:update', design: defaults });
-		console.log('[Create Preview] Applied design schema defaults:', Object.keys(defaults));
+		applyPanelCompositionToPreview(widgetId);
+		setTimeout(() => applyPanelCompositionToPreview(widgetId), 250);
+		setTimeout(() => applyPanelCompositionToPreview(widgetId), 800);
 	}
 
 	/** Toggle composition editor panel open/closed */
@@ -2045,9 +2594,20 @@
 			});
 		}
 		if (event.detail.step === 'create') {
-			if (Object.keys(ps.liveDesignValues).length > 0) {
-				panelRef?.sendMessageToPreview({ type: 'widgetic:update', design: ps.liveDesignValues });
+			let psCreate = getPanelDisplayState(panelWidgetId);
+			if (!psCreate.compositionContentSchema && !psCreate.compositionSchemasLoading) {
+				void scheduleWidgetSchemaLoad(panelWidgetId);
 			}
+			if (!psCreate.liveContentItems || psCreate.liveContentItems.length === 0) {
+				const schemaItems = psCreate.compositionContentSchema?.contentItems
+					?? psCreate.compositionContentSchema?.data?.contentItems;
+				if (Array.isArray(schemaItems) && schemaItems.length > 0) {
+					const seeded = JSON.parse(JSON.stringify(schemaItems));
+					patchPanelSnapshot(panelWidgetId, { liveContentItems: seeded });
+					if (panelWidgetId === focusedPanelWidgetId) liveContentItems = seeded;
+				}
+			}
+			applyPanelCompositionToPreview(panelWidgetId);
 			if (panelWidgetId && pendingCreatePreviewDefaultsWidgetId === panelWidgetId) {
 				pendingCreatePreviewDefaultsWidgetId = null;
 				if (panelWidgetId === focusedPanelWidgetId) {
@@ -2089,15 +2649,22 @@
 		const versionedUrl = `${cdnBase}/widgets/${widgetId}/v${version}/widget.html`;
 
 		if (jsPath) {
+			const trimmed = jsPath.replace(/\/+$/, '');
+			let resolved = trimmed
+				.replace(/\/widget\.js$/i, '/widget.html')
+				.replace(/\.js$/i, '.html');
+			if (!/\.html$/i.test(resolved)) {
+				resolved = `${resolved}/widget.html`;
+			}
+			if (resolved.startsWith('/')) {
+				resolved = `${cdnBase}${resolved}`;
+			}
 			const jsPathVersionMatch = jsPath.match(/\/v(\d+)(?:\/|$)/);
 			const jsPathVersion = jsPathVersionMatch ? parseInt(jsPathVersionMatch[1], 10) : null;
-			if (jsPathVersion === version) {
-				const trimmed = jsPath.replace(/\/+$/, '');
-				let resolved = /\.html$/i.test(trimmed) ? trimmed : `${trimmed}/widget.html`;
-				// Bare pathname (e.g. from older saves) must be resolved against CDN, not localhost
-				if (resolved.startsWith('/')) {
-					resolved = `${cdnBase}${resolved}`;
-				}
+			const jsPathWidgetId = (resolved.match(/\/widgets\/([^/]+)\//i) || [])[1] || null;
+			const pointsAtOtherWidget = !!(jsPathWidgetId && jsPathWidgetId !== widgetId);
+			if (pointsAtOtherWidget || jsPathVersion === version || /\/widgets\//i.test(resolved)) {
+				console.log('[Publish] Using js_path artifact URL', resolved, pointsAtOtherWidget ? '(source widget)' : '');
 				return resolved;
 			}
 		}
@@ -2128,6 +2695,68 @@
 	let suppressNextBuildFromRepoChatMessage = false;
 	let _isRestoringCheckpoint = false;
 
+	function mapFontWeightToCss(weight: string | undefined): string {
+		const name = String(weight || 'Regular').toLowerCase().replace(/[\s_-]/g, '');
+		const table: Record<string, string> = {
+			thin: '100', hairline: '100',
+			extralight: '200', ultralight: '200',
+			light: '300',
+			regular: '400', normal: '400',
+			medium: '500',
+			semibold: '600', demibold: '600',
+			bold: '700',
+			extrabold: '800', ultrabold: '800',
+			black: '900', heavy: '900',
+		};
+		if (/^\d{3}$/.test(name)) return name;
+		return table[name] || '400';
+	}
+
+	function mapAspectRatioToCss(raw: string): string {
+		const key = raw.trim().toLowerCase();
+		const table: Record<string, string> = {
+			square: '1/1',
+			'1:1': '1/1',
+			'1/1': '1/1',
+			landscape: '4/3',
+			'4:3': '4/3',
+			'4/3': '4/3',
+			wide: '16/9',
+			'16:9': '16/9',
+			'16/9': '16/9',
+			portrait: '3/4',
+			'3:4': '3/4',
+			'3/4': '3/4',
+		};
+		return table[key] || raw;
+	}
+
+	/** CSS custom properties for widgetic:update — FontIC objects and dropdown {value} become strings. */
+	function flattenDesignValuesForPreview(design: Record<string, unknown>): Record<string, string> {
+		const out: Record<string, string> = {};
+		for (const [key, value] of Object.entries(design || {})) {
+			if (value && typeof value === 'object' && 'family' in (value as Record<string, unknown>)) {
+				const font = value as { family?: string; weight?: string };
+				const family = String(font.family || 'Inter');
+				out[key] = `"${family}", sans-serif`;
+				out[`${key}Family`] = family;
+				out[`${key}Weight`] = mapFontWeightToCss(font.weight);
+				continue;
+			}
+			if (value && typeof value === 'object' && 'value' in (value as Record<string, unknown>)) {
+				out[key] = mapAspectRatioToCss(String((value as { value?: unknown }).value ?? ''));
+				continue;
+			}
+			if (typeof value === 'string') {
+				out[key] = /aspect/i.test(key) ? mapAspectRatioToCss(value) : value;
+				continue;
+			}
+			if (value == null) continue;
+			out[key] = String(value);
+		}
+		return out;
+	}
+
 	/** Handle property change from PropsEditor — send to widget preview iframe */
 	function handleEditorPropertyChange(event: CustomEvent<{ schema: string; propertyId: string; value: unknown; opacity?: number; itemId?: string }>) {
 		const { schema, propertyId, value, itemId } = event.detail;
@@ -2137,7 +2766,7 @@
 			liveDesignValues = { ...liveDesignValues, [propertyId]: value };
 			getWidgetDetailsRef(focusedPanelWidgetId)?.sendMessageToPreview({
 				type: 'widgetic:update',
-				design: liveDesignValues
+				design: flattenDesignValuesForPreview(liveDesignValues)
 			});
 		} else if (schema === 'content') {
 			if (itemId) {
@@ -2320,11 +2949,16 @@
 
 	/** Push composition overlay to a specific panel preview iframe. */
 	function applyPanelCompositionToPreview(widgetId: string): void {
-		const ps = getPanelDisplayState(widgetId);
 		const panelRef = getWidgetDetailsRef(widgetId);
 		if (!panelRef) return;
+		const step = widgetId === focusedPanelWidgetId ? widgetDetailsStep : 'create';
+		if (step === 'create') {
+			console.log('[Preview] Skip composition overlay on Create step', widgetId?.substring(0, 8));
+			return;
+		}
+		const ps = getPanelDisplayState(widgetId);
 		if (Object.keys(ps.liveDesignValues).length > 0) {
-			panelRef.sendMessageToPreview({ type: 'widgetic:update', design: ps.liveDesignValues });
+			panelRef.sendMessageToPreview({ type: 'widgetic:update', design: flattenDesignValuesForPreview(ps.liveDesignValues as Record<string, unknown>) });
 		}
 		if (Object.keys(ps.liveContentValues).length > 0) {
 			panelRef.sendMessageToPreview({ type: 'widgetic:update', content: ps.liveContentValues });
@@ -2586,6 +3220,10 @@
 	/** Send current composition design/content values to the preview iframe via postMessage.
 	 *  Called on: composition select, iframe ready, and step switch to Edit/Embed. */
 	function applyCompositionToPreview() {
+		if (widgetDetailsStep === 'create') {
+			console.log('[Preview] Skip composition overlay on Create step');
+			return;
+		}
 		if (Object.keys(liveDesignValues).length > 0) {
 			widgetDetails?.sendMessageToPreview({ type: 'widgetic:update', design: liveDesignValues });
 		}
@@ -2593,7 +3231,10 @@
 			widgetDetails?.sendMessageToPreview({ type: 'widgetic:update', content: liveContentValues });
 		}
 		if (liveContentItems.length > 0) {
-			widgetDetails?.sendMessageToPreview({ type: 'widgetic:update', contentItems: liveContentItems });
+			widgetDetails?.sendMessageToPreview({
+				type: 'widgetic:update',
+				contentItems: flattenContentItemsForPreview(liveContentItems)
+			});
 		}
 	}
 
@@ -3003,6 +3644,8 @@
 	}
 
 	let canvasWireframeMode = true;
+	/** Extra canvas chrome — default off. Not tied to debugMode. */
+	let canvasAdvancedFeatures = !!initialAdvancedFeatures;
 	let canvasPrimaryWidgetId: string | null = null;
 
 	function emitCreatorWireframeChanged() {
@@ -3020,6 +3663,21 @@
 		emitCreatorWireframeChanged();
 	}
 
+	function emitCreatorAdvancedChanged() {
+		if (typeof window === 'undefined') return;
+		window.dispatchEvent(
+			new CustomEvent(CREATOR_ADVANCED_CHANGED_EVENT, {
+				detail: { advancedFeatures: canvasAdvancedFeatures }
+			})
+		);
+	}
+
+	function handleHostToggleAdvancedEvent() {
+		canvasAdvancedFeatures = !canvasAdvancedFeatures;
+		console.log('[CreatorApp] Advanced canvas features:', canvasAdvancedFeatures ? 'ON' : 'OFF');
+		emitCreatorAdvancedChanged();
+	}
+
 	function resolveHostTargetWidgetId(): string | null {
 		const id = focusedPanelWidgetId || selectedWidgetId;
 		if (!id || isDraftConvertId(id)) return null;
@@ -3039,19 +3697,21 @@
 	}
 
 	async function handleHostDuplicateWidgetEvent(): Promise<void> {
-		const widgetId = resolveHostTargetWidgetId();
-		if (!widgetId || !canvasRef) {
+		const widgetId = canvasPrimaryWidgetId || resolveHostTargetWidgetId();
+		if (!widgetId || isDraftConvertId(widgetId)) {
 			showToast('warning', 'Select a widget first', {
-				description: 'Click the widget on the canvas, then Duplicate.',
+				description: 'Duplicate from the header copies the widget in the title.',
 			});
 			return;
 		}
-		canvasRef.selectWidgetShape?.(widgetId);
-		if (typeof canvasRef.duplicateSelectedObjects === 'function') {
-			await canvasRef.duplicateSelectedObjects();
-			return;
+		console.log('[CreatorApp] Host Duplicate — primary widget', widgetId.substring(0, 8));
+		if (canvasRef?.selectWidgetShape && typeof canvasRef.duplicateSelectedObjects === 'function') {
+			if (canvasRef.selectWidgetShape(widgetId)) {
+				await canvasRef.duplicateSelectedObjects();
+				return;
+			}
 		}
-		showToast('error', 'Cannot duplicate widget', { description: 'Canvas duplicate is not available' });
+		await handleWidgetShapeDuplicated(widgetId, null);
 	}
 
 	async function handleHostDeleteWidgetEvent(): Promise<void> {
@@ -3071,6 +3731,15 @@
 		}
 	}
 
+	function emitCreatorSaveState(dirty: boolean): void {
+		if (typeof window === 'undefined' || !embedded) return;
+		window.dispatchEvent(new CustomEvent('widgetic:creator-save-state', { detail: { dirty } }));
+	}
+
+	function handleHostSaveCanvasEvent(): void {
+		canvasRef?.saveNow?.();
+	}
+
 	async function persistPrimaryWidgetId(widgetId: string) {
 		if (!widgetId) return;
 		canvasPrimaryWidgetId = widgetId;
@@ -3086,7 +3755,6 @@
 			}
 		}
 		const widget = getWidgetById(widgetId);
-		if (widget) notifyHostWidgetName(widget);
 		if (embedded && typeof window !== 'undefined') {
 			try {
 				const url = new URL(window.location.href);
@@ -3098,12 +3766,110 @@
 				console.warn('[CreatorApp] Failed to sync primary widget_id in URL:', err);
 			}
 		}
+		if (widget) notifyHostWidgetName(widget);
+		emitCanvasWidgetsList('primary-changed');
+	}
+
+	function emitCanvasWidgetsList(reason: string) {
+		if (!embedded || typeof window === 'undefined') return;
+		const ids = canvasRef?.getLinkedWidgetIds?.() ?? linkedWidgetIds ?? new Set<string>();
+		const items: { id: string; name: string }[] = [];
+		for (const id of ids) {
+			const widget = getWidgetById(id);
+			items.push({
+				id,
+				name: (widget?.name || '').trim() || 'Untitled Widget'
+			});
+		}
+		if (canvasPrimaryWidgetId && !items.some((item) => item.id === canvasPrimaryWidgetId)) {
+			const primary = getWidgetById(canvasPrimaryWidgetId);
+			if (primary?.id) {
+				items.unshift({
+					id: primary.id,
+					name: (primary.name || '').trim() || 'Untitled Widget'
+				});
+			}
+		}
+		const primaryWidgetId = canvasPrimaryWidgetId || '';
+		console.log('[CreatorApp] Emit canvas widgets for header', reason, items.length, primaryWidgetId);
+		window.dispatchEvent(new CustomEvent(CREATOR_CANVAS_WIDGETS_EVENT, {
+			detail: { widgets: items, primaryWidgetId }
+		}));
+	}
+
+	function handleHostRequestCanvasWidgetsEvent() {
+		emitCanvasWidgetsList('host-request');
+	}
+
+	function handleHostSetPrimaryWidgetEvent(event: Event) {
+		const widgetId = (event as CustomEvent).detail?.widgetId;
+		if (!widgetId || typeof widgetId !== 'string') {
+			console.warn('[CreatorApp] Host set primary ignored — missing widgetId');
+			return;
+		}
+		console.log('[CreatorApp] Host set primary widget', widgetId.substring(0, 8));
+		canvasRef?.setPrimaryWidgetShape?.(widgetId);
+		canvasRef?.selectWidgetShape?.(widgetId);
+		void persistPrimaryWidgetId(widgetId);
 	}
 
 	function handleSetPrimaryWidget(widgetId: string) {
 		void persistPrimaryWidgetId(widgetId);
 	}
 
+	async function hydrateCanvasPrimaryWidget(linkedIds?: string[]): Promise<string | null> {
+		const targetCanvasId = (typeof canvasId === 'string' && canvasId.trim()) ? canvasId.trim() : null;
+		if (!targetCanvasId) return canvasPrimaryWidgetId || null;
+		let primaryId = await resolvePrimaryWidgetIdForCanvas(targetCanvasId);
+		if (!primaryId) {
+			const fromLinks = (linkedIds || []).filter((id) => id && !isDraftConvertId(id) && !String(id).startsWith('draft'));
+			const fromList = widgets
+				.filter((w: any) => {
+					const cid = w.canvasId || w.canvas_id;
+					return cid === targetCanvasId && w.id && !isDraftConvertId(w.id);
+				})
+				.map((w: any) => w.id);
+			primaryId = fromLinks[0] || fromList[0] || null;
+			if (primaryId) {
+				console.log('[CreatorApp] Healing empty primary_widget_id →', primaryId.substring(0, 8));
+				await persistPrimaryWidgetId(primaryId);
+			}
+		}
+		if (primaryId) {
+			const widget = getWidgetById(primaryId);
+			if (widget) notifyHostWidgetName(widget);
+			emitCanvasWidgetsList('hydrate-primary');
+		}
+		return primaryId || canvasPrimaryWidgetId || null;
+	}
+
+	async function handleHostMoveCanvasFolderEvent(event: Event) {
+		const folderId = (event as CustomEvent).detail?.folderId;
+		if (!folderId || typeof folderId !== 'string' || !widgetsClient) return;
+		const targetCanvasId = (typeof canvasId === 'string' && canvasId.trim()) ? canvasId.trim() : null;
+		let primaryId = canvasPrimaryWidgetId || (targetCanvasId ? await resolvePrimaryWidgetIdForCanvas(targetCanvasId) : null);
+		if (!primaryId) {
+			primaryId = await hydrateCanvasPrimaryWidget();
+		}
+		const ids = new Set<string>();
+		if (primaryId) ids.add(primaryId);
+		for (const w of widgets) {
+			const cid = (w as any).canvasId || (w as any).canvas_id;
+			if (targetCanvasId && cid === targetCanvasId && w.id) ids.add(w.id);
+		}
+		console.log('[CreatorApp] Move canvas widgets to folder', folderId, [...ids].map((id) => id.substring(0, 8)));
+		for (const id of ids) {
+			try {
+				await widgetsClient.updateWidget({
+					id,
+					updateWidgetRequest: { projectId: folderId, projectFolder: folderId }
+				});
+			} catch (err) {
+				console.warn('[CreatorApp] Failed to move widget to folder', id.substring(0, 8), err);
+			}
+		}
+	}
+
 	// Preview Modal State Variables
 	let previewIframe: HTMLIFrameElement | null = null;
 	const { DEV: isDevMode } = import.meta.env;
@@ -3608,18 +4374,11 @@
 			const { loaded, widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
 			await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 			await maybeAutoRestoreWidgetShapes();
-			// Backfill widget name + thumbnail on shapes that were saved before those
-			// fields existed on WidgetShape (fixes "Widget" placeholder on old canvases).
 			backfillWidgetShapeMetadata();
-			if (loaded && canvasRef) {
-				const primaryId =
-					canvasPrimaryWidgetId ||
-					canvasRef.getPrimaryWidgetId?.() ||
-					selectedWidgetId;
-				if (primaryId) {
-					canvasRef.setPrimaryWidgetShape?.(primaryId);
-					canvasRef.selectWidgetShape(primaryId);
-				}
+			const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
+			if (loaded && canvasRef && primaryId && !isConvertOrDraftPanelOpen()) {
+				canvasRef.setPrimaryWidgetShape?.(primaryId);
+				canvasRef.selectWidgetShape(primaryId);
 			}
 		} catch (error) {
 			console.error('Widget Creator: Load canvases error:', error);
@@ -4481,6 +5240,11 @@
 		if (embeddedDeepLinkAutoOpenDone) {
 			return;
 		}
+		if (isConvertOrDraftPanelOpen()) {
+			console.log('[CreatorApp] Skip embedded deep-link select — convert/draft panel is open');
+			embeddedDeepLinkAutoOpenDone = true;
+			return;
+		}
 
 		let deepLinkWidgetId = resolveEmbeddedDeepLinkWidgetId();
 		// Canvas-only deep-link: no ?widget_id= / initialWidgetId — select canvases.primary_widget_id.
@@ -4878,20 +5642,19 @@
 		}
 	}
 
-	/** After hydrate, cross-check GitLab HEAD if we don't have a fresh local commit.
-	 *  Widget: if HEAD sha differs from the local lastCommitId, promote it so the Edit banner
-	 *  ("Newer code than Live") can detect unpublished code even without recent codegen locally. */
+	/** After hydrate, probe GitLab HEAD only when this widget has no codegen commit yet.
+	 *  Do not promote HEAD over lastCommitId — that marks a new publish version on every Details open. */
 	async function reconcileWidgetHeadCommit(widgetId: string): Promise<void> {
 		const currentPanelLastCommit = getPanelState(widgetId).lastCommitId;
-		const publishSha = getWidgetLastPublishCommitSha(widgetId);
-		// If we already have a lastCommitId that differs from the publish SHA, no probe needed.
-		if (currentPanelLastCommit && publishSha && !commitsMatch(currentPanelLastCommit, publishSha)) {
+		if (currentPanelLastCommit) {
+			console.log(
+				`[Version] Skip HEAD probe for "${widgetId}": lastCommitId already ${currentPanelLastCommit.substring(0, 8)}`
+			);
 			return;
 		}
 		const headSha = await fetchRepoHeadCommitSha(widgetId);
 		if (!headSha) return;
-		if (currentPanelLastCommit && commitsMatch(currentPanelLastCommit, headSha)) return;
-		console.log(`[Version] Repo HEAD probe for "${widgetId}": ${headSha.substring(0, 8)} (was ${currentPanelLastCommit?.substring(0, 8) ?? 'null'})`);
+		console.log(`[Version] Repo HEAD probe for "${widgetId}": ${headSha.substring(0, 8)} (was null)`);
 		patchPanelSnapshot(widgetId, { lastCommitId: headSha, hasGeneratedCode: true });
 		saveCommitIdForWidget(widgetId, headSha);
 		if (widgetId === focusedPanelWidgetId) {
@@ -5164,9 +5927,11 @@
 			// Ensure we have an id
 			const newWidget = response.data || response; // handle envelope or direct
 			if (newWidget?.id) {
-				// Optimistically add to list and select
 				widgets = [{ ...newWidget }, ...widgets];
 				selectWidget(newWidget);
+				if (!canvasPrimaryWidgetId) {
+					void persistPrimaryWidgetId(newWidget.id);
+				}
 				authStatus = 'Widget created.';
 			} else {
 				authStatus = 'Widget created but response missing id.';
@@ -5247,11 +6012,7 @@
 
 						const status = (op?.status || '').toLowerCase();
 						if (status === 'completed' || status === 'failed' || status === 'cancelled') {
-							if (status === 'failed') {
-								settle('reject', new Error(op?.error || 'Operation failed.'));
-							} else {
-								settle('resolve', op);
-							}
+							settle('resolve', op);
 							return;
 						}
 
@@ -5290,11 +6051,7 @@
 				signal
 			})
 				.then((finalOp) => {
-					if (String(finalOp?.status || '').toLowerCase() === 'failed') {
-						settle('reject', new Error(finalOp?.error || 'Operation failed.'));
-					} else {
-						settle('resolve', finalOp as OperationStatus);
-					}
+					settle('resolve', finalOp as OperationStatus);
 				})
 				.catch((streamError) => {
 					if (settled || signal?.aborted) return;
@@ -5822,11 +6579,22 @@
 		const quiet = !!options.quiet;
 		console.log('[handleRefreshScreenshot] Capturing screenshot via postMessage for widget:', widgetId, quiet ? '(quiet)' : '');
 
+			if (isConvertOrDraftPanelOpen() && !isDraftConvertId(widgetId)) {
+				console.log('[handleRefreshScreenshot] Skip iframe capture — convert/draft panel is open:', widgetId.substring(0, 8));
+				return;
+			}
+
 			// Quiet canvas-thumbnail sync must never force-open Widget Details.
-			// Manual refresh may open the panel so the preview iframe exists.
+			// Convert drafts capture from the canvas shape, never by opening a panel.
 			if (!openWidgetPanelIds.includes(widgetId)) {
-				if (quiet) {
-					console.log('[handleRefreshScreenshot] Skip quiet capture — panel closed:', widgetId.substring(0, 8));
+				if (quiet || isConvertOrDraftPanelOpen()) {
+					const shapeDataUrl = canvasRef?.getWidgetShapeDataUrl?.(widgetId);
+					if (shapeDataUrl && canvasRef) {
+						console.log('[handleRefreshScreenshot] Using canvas shape screenshot (panel closed):', widgetId.substring(0, 8));
+						canvasRef.updateWidgetImage(widgetId, shapeDataUrl);
+					} else {
+						console.log('[handleRefreshScreenshot] Skip quiet capture — panel closed:', widgetId.substring(0, 8));
+					}
 					return;
 				}
 				// Manual "Refresh Widget Preview" always opens the panel so the iframe exists.
@@ -5836,8 +6604,9 @@
 			}
 
 			const panelRef = getWidgetDetailsRef(widgetId);
-			if (!panelRef?.hasValidPreview()) {
-				console.log('[handleRefreshScreenshot] Preview not ready or has error — skipping empty screenshot capture');
+			const iframe = panelRef?.getPreviewIframe?.() as HTMLIFrameElement | null;
+			if (!iframe?.contentWindow) {
+				console.log('[handleRefreshScreenshot] Preview iframe not ready — skipping capture');
 				if (!quiet) {
 					showToast('error', 'No valid preview available', { description: 'Generate code first to capture a screenshot.', duration: 5000 });
 				}
@@ -5848,14 +6617,6 @@
 				showToast('info', 'Capturing widget screenshot...', { duration: 3000 });
 			}
 
-			const iframe = panelRef?.getPreviewIframe?.() as HTMLIFrameElement | null;
-			if (!iframe?.contentWindow) {
-				if (!quiet) {
-					showToast('error', 'No preview iframe available', { description: 'Generate code first to capture a screenshot.', duration: 5000 });
-				}
-				return;
-			}
-
 			try {
 				const result = await new Promise<{ data: string | null; error: string | null }>((resolve) => {
 					const timeout = setTimeout(() => {
@@ -5982,10 +6743,21 @@ Requirements:
 		fromChat?: boolean;
 		widgetId?: string;
 		compileFixOnly?: boolean;
+		/** Recreate GitLab repo when the previous turn failed with missing repository. */
+		forceRecreateRepo?: boolean;
 		/** CDN upload row IDs captured before chat clearDraft. */
 		attachmentIds?: string[];
 		/** Image URLs / data URLs captured before chat clearDraft. */
 		promptImagesOverride?: string[];
+		/** Chat files (PDF, video, images) to store on the user message before codegen. */
+		persistFileAttachments?: Array<{
+			url?: string;
+			file?: File;
+			file_type?: string;
+			file_name?: string | null;
+			file_size?: number | null;
+			display_order?: number;
+		}>;
 	} = {}) {
 		const targetWidgetId = options.widgetId ?? selectedWidgetId;
 		if (!targetWidgetId) return;
@@ -6062,8 +6834,10 @@ Requirements:
 			fromChat: options.fromChat,
 			widgetId: codegenTargetWidgetId,
 			compileFixOnly: options.compileFixOnly,
+			forceRecreateRepo: options.forceRecreateRepo,
 			attachmentIds: options.attachmentIds,
 			promptImagesOverride: options.promptImagesOverride,
+			persistFileAttachments: options.persistFileAttachments,
 		});
 	}
 
@@ -6082,8 +6856,17 @@ Requirements:
 			fromChat?: boolean;
 			widgetId?: string;
 			compileFixOnly?: boolean;
+			forceRecreateRepo?: boolean;
 			attachmentIds?: string[];
 			promptImagesOverride?: string[];
+			persistFileAttachments?: Array<{
+				url?: string;
+				file?: File;
+				file_type?: string;
+				file_name?: string | null;
+				file_size?: number | null;
+				display_order?: number;
+			}>;
 		} = {},
 	) {
 		const generationWidgetId = options.widgetId ?? selectedWidgetId;
@@ -6106,7 +6889,6 @@ Requirements:
 		lastHarnessChatLine = '';
 		
 		// Show user prompt in chat when triggered outside Chat (confirm dialog / Generate Now).
-		// DB write happens here too — not on widget select (so "Edit Prompt First" stays editable).
 		if (panelChat && !options.fromChat) {
 			const snapImages =
 				generationWidgetId === focusedPanelWidgetId ? promptImages : panelSnap.promptImages;
@@ -6120,8 +6902,7 @@ Requirements:
 				: undefined;
 			panelChat.addUserMessage(prompt, codegenImageAttachments);
 		}
-		await ensureCodegenUserMessagePersisted(generationWidgetId, prompt);
-		
+
 		isGeneratingCode = generationWidgetId === focusedPanelWidgetId;
 		setCrossTabGenerating(true, generationWidgetId);
 		lastGenerationPrompt = prompt;
@@ -6132,7 +6913,7 @@ Requirements:
 				? 'Processing queued code generation request...'
 				: 'Preparing code generation...',
 		});
-		
+
 		// Keep preview tab active so user sees the "Generating..." overlay.
 		// Console logs are still accessible via the Console tab button.
 		getWidgetDetailsRef(generationWidgetId)?.setInlinePanelView('preview');
@@ -6141,22 +6922,52 @@ Requirements:
 		console.log('Widget Creator: Starting code generation for widget:', generationWidgetId);
 
 		try {
-			const generationWidget = getWidgetById(generationWidgetId);
-			const repoId = generationWidget
-				? await ensureWidgetRepository(generationWidget)
-				: panelSnap.currentRepositoryId;
+			const generationWidget =
+				getWidgetById(generationWidgetId) ||
+				(selectedWidget?.id === generationWidgetId ? selectedWidget : null);
+			let repoId: string | null = null;
+			try {
+				repoId = generationWidget
+					? await ensureWidgetRepository(generationWidget, {
+							forceRecreate: !!options.forceRecreateRepo,
+							silent: true,
+						})
+					: panelSnap.currentRepositoryId;
+				if (!repoId && generationWidget) {
+					console.warn('[CodeGen] Repository missing — retrying create for widget', generationWidgetId.substring(0, 8));
+					repoId = await ensureWidgetRepository(generationWidget, { forceRecreate: true, silent: true });
+				}
+			} catch (repoError) {
+				if (repoError instanceof ResponseError && repoError.response?.status === 401) {
+					const sessionError = 'Session expired. Sign in again, then retry.';
+					patchCodegenUiState(generationWidgetId, {
+						generateCodeStatus: '❌ Session expired.',
+						lastGenerationFailed: true,
+						lastGenerationError: sessionError,
+					});
+					showToast('error', 'Session expired', {
+						description: sessionError,
+						duration: 5000
+					});
+					pushCodegenFailureToChat(generationWidgetId, sessionError);
+					return;
+				}
+				throw repoError;
+			}
 			console.log('Widget Creator: Repository resolved for code generation:', repoId);
 
 			if (!repoId) {
+				const missingRepoError = 'Unable to resolve repository for this widget.';
 				patchCodegenUiState(generationWidgetId, {
 					generateCodeStatus: '❌ Repository is required to generate code.',
 					lastGenerationFailed: true,
-					lastGenerationError: 'Unable to resolve repository for this widget.',
+					lastGenerationError: missingRepoError,
 				});
 				showToast('error', 'Missing repository', {
-					description: 'Unable to resolve repository for this widget.',
+					description: missingRepoError,
 					duration: 5000
 				});
+				pushCodegenFailureToChat(generationWidgetId, missingRepoError);
 				return;
 			}
 
@@ -6182,7 +6993,7 @@ Requirements:
 			// Drop invalid entries (empty strings, non-data-URLs) so a failed capture
 			// can never silently become a vision-less generation request.
 			panelPromptImages = panelPromptImages.filter(
-				(url) => typeof url === 'string' && url.startsWith('data:image/') && url.length > 100,
+				(url) => typeof url === 'string' && (url.startsWith('data:image/') || /^https?:\/\//i.test(url)) && url.length > 20,
 			);
 			const chatAttachmentUrls = panelChat?.getAttachmentDataUrls?.() ?? [];
 			const chatUploadIds = [
@@ -6190,9 +7001,12 @@ Requirements:
 				...(panelChat?.getAttachmentUploadIds?.() ?? []),
 			].filter((id, index, arr) => id && arr.indexOf(id) === index);
 			if (chatAttachmentUrls.length > 0 && !(options.promptImagesOverride?.length)) {
-				panelPromptImages = chatAttachmentUrls.filter(
-					(url) => typeof url === 'string' && url.startsWith('data:image/') && url.length > 100,
+				const fromChat = chatAttachmentUrls.filter(
+					(url) => typeof url === 'string' && (url.startsWith('data:image/') || /^https?:\/\//i.test(url)) && url.length > 20,
 				);
+				if (fromChat.length > 0) {
+					panelPromptImages = fromChat;
+				}
 			}
 			let imagesToSend: string[] | undefined;
 			let attachmentIdsToSend: string[] | undefined;
@@ -6250,6 +7064,18 @@ Requirements:
 				});
 			}
 
+			const persistImageUrls = uniquePersistImageUrls([
+				...(imagesToSend || []),
+				...(panelPromptImages || []),
+				...(options.promptImagesOverride || []),
+			]);
+			await ensureCodegenUserMessagePersisted(
+				generationWidgetId,
+				prompt,
+				persistImageUrls,
+				options.persistFileAttachments,
+			);
+
 			// Clear unsent draft/attachments once payload is captured — prevents restore on widget return
 			clearPromptDraftForWidget(generationWidgetId);
 			
@@ -6405,6 +7231,11 @@ Requirements:
 							hasGeneratedCode: true,
 							...(completedCommitSha ? { lastCommitId: completedCommitSha } : {}),
 						});
+						if (isFocusedPanel && completedCommitSha) {
+							lastCommitId = completedCommitSha;
+							hasGeneratedCode = true;
+						}
+						panelDisplayRevision += 1;
 						console.log(
 							'[Publish] Codegen completed — pendingPublishAfterCodegen=true',
 							generationWidgetId.substring(0, 8),
@@ -6449,6 +7280,11 @@ Requirements:
 							}
 						})();
 					}
+					if (generationWidgetId) {
+						console.log('[CompositionEditor] Reloading schemas after codegen', generationWidgetId.substring(0, 8));
+						void loadWidgetSchemas(generationWidgetId, { force: true });
+					}
+
 					const completedRepoId = resolveRepositoryIdForWidget(generationWidgetId);
 					if (completedRepoId) {
 						stampWidgetRepositoryId(generationWidgetId, completedRepoId);
@@ -6548,8 +7384,9 @@ Requirements:
 							);
 							setTimeout(async () => {
 								await panelChat?.reloadConversationMessages?.();
-							}, 1500);
-							setTimeout(() => handleRefreshScreenshot(generationWidgetId), 3000);
+								panelChat?.markWidgetHeadAtLatestCommit?.();
+							}, 2500);
+							setTimeout(() => handleRefreshScreenshot(generationWidgetId, { quiet: true }), 3000);
 						} else {
 							panelChat?.updateLatestCodegenStatusMessage?.(
 								`Code saved${commitShort ? ` (${commitShort})` : ''} — preview rebuilt from saved code.`,
@@ -6621,6 +7458,7 @@ Requirements:
 			});
 			clearActiveOperationId(); // Clear persisted operationId on error
 			showToast('error', 'Code generation error', { description: message, duration: 6000 });
+			pushCodegenFailureToChat(generationWidgetId, message);
 		} finally {
 			const { [generationWidgetId]: _done, ...restFinally } = generatingWidgetIds;
 			generatingWidgetIds = restFinally;
@@ -6678,7 +7516,11 @@ Requirements:
 		commitSha?: string | null
 	): void {
 		const jsPath = resolvePublishedJsPath(widgetId, version, artifactUrl);
-		const normalizedCommit = commitSha ? normalizeCommitSha(commitSha) : null;
+		const prevSnap = getPanelState(widgetId);
+		const normalizedCommit =
+			normalizeCommitSha(commitSha)
+			|| normalizeCommitSha(prevSnap.lastCommitId)
+			|| normalizeCommitSha(loadCommitIdForWidget(widgetId));
 
 		widgets = widgets.map((w) =>
 			w.id === widgetId
@@ -6695,7 +7537,6 @@ Requirements:
 				: w
 		);
 
-		const prevSnap = getPanelState(widgetId);
 		const optimisticHistoryEntry = normalizedCommit
 			? {
 				version,
@@ -6726,6 +7567,9 @@ Requirements:
 			saveCommitIdForWidget(widgetId, normalizedCommit);
 		}
 
+		console.log('[CompositionEditor] Reloading schemas after publish', widgetId.substring(0, 8));
+		void loadWidgetSchemas(widgetId, { force: true });
+
 		if (selectedWidgetId === widgetId) {
 			lastPublishedVersion = version;
 			selectedWidgetJsPath = jsPath;
@@ -6920,6 +7764,16 @@ Requirements:
 
 	// Restore session on mount with expiration check
 	onMount(() => {
+		const googleFontsKey =
+			(typeof import.meta !== 'undefined' &&
+				(import.meta.env?.PUBLIC_GOOGLE_FONTS_API_KEY || import.meta.env?.VITE_GOOGLE_FONTS_API_KEY)) ||
+			'';
+		if (googleFontsKey) {
+			setGoogleFontsApiKey(String(googleFontsKey));
+			console.log('[CreatorApp] Google Fonts API key set for FontIC');
+		} else {
+			console.warn('[CreatorApp] No PUBLIC_GOOGLE_FONTS_API_KEY / VITE_GOOGLE_FONTS_API_KEY — FontIC uses fallback catalog');
+		}
 		setWebsocketApiUrl(apiRoot ?? null);
 		if (embedded) {
 			syncSessionFromSiteAuth();
@@ -6965,6 +7819,7 @@ Requirements:
 
 		// Cross-tab operation sync: listen for localStorage changes from other tabs
 		window.addEventListener('storage', handleCrossTabStorageEvent);
+		window.addEventListener('widgetic:session-extended', handleSiteSessionExtended);
 
 		// Clean up cross-tab flags when tab is closed/refreshed
 		window.addEventListener('beforeunload', () => {
@@ -7058,14 +7913,20 @@ Requirements:
 		// Cross-tab cleanup: remove flags so other tabs don't stay blocked
 		if (typeof window !== 'undefined') {
 			window.removeEventListener('storage', handleCrossTabStorageEvent);
+			window.removeEventListener('widgetic:session-extended', handleSiteSessionExtended);
 			window.removeEventListener('click', handleCanvasDropdownOutsideClick);
 			window.removeEventListener(HOST_WIDGET_RENAMED_EVENT, handleHostWidgetRenamedEvent);
 			window.removeEventListener(HOST_REQUEST_PUBLISH_EVENT, handleHostRequestPublishEvent);
 			window.removeEventListener(HOST_TOGGLE_DEBUG_EVENT, handleHostToggleDebugEvent);
 			window.removeEventListener(HOST_TOGGLE_WIREFRAME_EVENT, handleHostToggleWireframeEvent);
+			window.removeEventListener(HOST_TOGGLE_ADVANCED_EVENT, handleHostToggleAdvancedEvent);
 			window.removeEventListener(HOST_OPEN_WIDGET_DETAILS_EVENT, handleHostOpenWidgetDetailsEvent);
 			window.removeEventListener(HOST_DUPLICATE_WIDGET_EVENT, handleHostDuplicateWidgetEvent);
 			window.removeEventListener(HOST_DELETE_WIDGET_EVENT, handleHostDeleteWidgetEvent);
+			window.removeEventListener(HOST_SAVE_CANVAS_EVENT, handleHostSaveCanvasEvent);
+			window.removeEventListener(HOST_SET_PRIMARY_WIDGET_EVENT, handleHostSetPrimaryWidgetEvent);
+			window.removeEventListener(HOST_REQUEST_CANVAS_WIDGETS_EVENT, handleHostRequestCanvasWidgetsEvent);
+			window.removeEventListener(HOST_MOVE_CANVAS_FOLDER_EVENT, handleHostMoveCanvasFolderEvent);
 			for (const wId of Object.keys(generatingWidgetIds)) {
 				setCrossTabGenerating(false, wId);
 			}
@@ -7091,11 +7952,18 @@ Requirements:
 		window.addEventListener(HOST_REQUEST_PUBLISH_EVENT, handleHostRequestPublishEvent);
 		window.addEventListener(HOST_TOGGLE_DEBUG_EVENT, handleHostToggleDebugEvent);
 		window.addEventListener(HOST_TOGGLE_WIREFRAME_EVENT, handleHostToggleWireframeEvent);
+		window.addEventListener(HOST_TOGGLE_ADVANCED_EVENT, handleHostToggleAdvancedEvent);
 		window.addEventListener(HOST_OPEN_WIDGET_DETAILS_EVENT, handleHostOpenWidgetDetailsEvent);
 		window.addEventListener(HOST_DUPLICATE_WIDGET_EVENT, handleHostDuplicateWidgetEvent);
 		window.addEventListener(HOST_DELETE_WIDGET_EVENT, handleHostDeleteWidgetEvent);
+		window.addEventListener(HOST_SAVE_CANVAS_EVENT, handleHostSaveCanvasEvent);
+		window.addEventListener(HOST_SET_PRIMARY_WIDGET_EVENT, handleHostSetPrimaryWidgetEvent);
+		window.addEventListener(HOST_REQUEST_CANVAS_WIDGETS_EVENT, handleHostRequestCanvasWidgetsEvent);
+		window.addEventListener(HOST_MOVE_CANVAS_FOLDER_EVENT, handleHostMoveCanvasFolderEvent);
 		emitCreatorDebugChanged();
 		emitCreatorWireframeChanged();
+		emitCreatorAdvancedChanged();
+		emitCreatorSaveState(false);
 	});
 
 	// Capture-phase Escape: close lightbox before Canvas can deselect → close WidgetDetails
@@ -7133,8 +8001,6 @@ Requirements:
 					if (file) {
 						const base64 = await processImageFile(file);
 						if (base64) {
-							promptImages = [...promptImages, base64];
-							savePromptImagesToSession();
 							chatMethods?.addImageAttachment?.(base64, file.name || 'pasted-image.png');
 							showToast('success', 'Image pasted to prompt', { duration: 2000 });
 						}
@@ -7488,7 +8354,7 @@ Requirements:
 			compositionSchemasLoading,
 			compositionSchemasError,
 			schemaLoadStartedAt: focusedSnap?.schemaLoadStartedAt ?? null,
-			chatContainerHeight: focusedSnap?.chatContainerHeight ?? DEFAULT_CHAT_CONTAINER_HEIGHT,
+			chatContainerHeight: focusedSnap?.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
 			panelPreviewCompileError: focusedSnap?.panelPreviewCompileError ?? null,
 		};
 	}
@@ -7541,7 +8407,7 @@ Requirements:
 			compositionSchemasLoading: false,
 			compositionSchemasError: null,
 			schemaLoadStartedAt: null,
-			chatContainerHeight: DEFAULT_CHAT_CONTAINER_HEIGHT,
+			chatContainerHeight: 550,
 			panelPreviewCompileError: null,
 		};
 	}
@@ -7567,16 +8433,18 @@ Requirements:
 			const snapPublishReady =
 				snap.publishHistoryResolved && snap.publishHistoryResolvedForWidgetId === widgetId;
 			const livePublishMatchesPanel = live.publishHistoryResolvedForWidgetId === widgetId;
-			const resolvedHead = resolvePanelHeadCommitId(widgetId, snap, live);
+			const resolvedHead = isDraftConvertId(widgetId) ? null : resolvePanelHeadCommitId(widgetId, snap, live);
 			return {
 				...snap,
 				...live,
-				// Prefer HEAD ahead of live publish SHA (localStorage may be newer than stale publish globals).
-				lastCommitId: resolvedHead,
-				// Never let focused globals wipe a true flag already on the panel snapshot / storage.
-				hasGeneratedCode: !!(live.hasGeneratedCode || snap.hasGeneratedCode || resolvedHead),
+				lastCommitId: isDraftConvertId(widgetId) ? null : resolvedHead,
+				hasGeneratedCode: isDraftConvertId(widgetId)
+					? false
+					: !!(live.hasGeneratedCode || snap.hasGeneratedCode || resolvedHead),
 				pendingPublishAfterCodegen: !!(snap.pendingPublishAfterCodegen || live.pendingPublishAfterCodegen),
-				lastPublishedVersion: live.lastPublishedVersion ?? snap.lastPublishedVersion,
+				lastPublishedVersion: isDraftConvertId(widgetId)
+					? null
+					: (live.lastPublishedVersion ?? snap.lastPublishedVersion),
 				currentRepositoryId: live.currentRepositoryId ?? snap.currentRepositoryId,
 				selectedWidgetJsPath: live.selectedWidgetJsPath ?? snap.selectedWidgetJsPath,
 				// Once publish history loaded into this panel's snapshot, prefer it over stale globals.
@@ -7595,7 +8463,7 @@ Requirements:
 					: livePublishMatchesPanel
 						? live.publishHistoryResolvedForWidgetId
 						: snap.publishHistoryResolvedForWidgetId,
-				chatContainerHeight: snap.chatContainerHeight ?? DEFAULT_CHAT_CONTAINER_HEIGHT,
+				chatContainerHeight: snap.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
 				compositionDesignSchema: resolvedDesignSchema,
 				compositionContentSchema: resolvedContentSchema,
 				compositionSchemasLoading: schemaLoading,
@@ -7613,7 +8481,7 @@ Requirements:
 			...snap,
 			lastCommitId: snap.lastCommitId || loadCommitIdForWidget(widgetId),
 			hasGeneratedCode: !!(snap.hasGeneratedCode || snap.lastCommitId || loadCommitIdForWidget(widgetId)),
-			chatContainerHeight: snap.chatContainerHeight ?? DEFAULT_CHAT_CONTAINER_HEIGHT,
+			chatContainerHeight: snap.chatContainerHeight ?? CHAT_DEFAULT_HEIGHT,
 			compositionDesignSchema: resolvedDesignSchema,
 			compositionContentSchema: resolvedContentSchema,
 			compositionSchemasError: resolvedSchemaError,
@@ -7903,6 +8771,22 @@ Requirements:
 		selectedWidget = widget;
 		saveSelectedWidgetId(widgetId);
 		notifyHostWidgetName(widget);
+		if (isDraftConvertId(widgetId)) {
+			lastPublishedVersion = null;
+			lastCommitId = null;
+			hasGeneratedCode = false;
+			publishHistory = [];
+			publishHistoryResolved = true;
+			publishHistoryResolvedForWidgetId = widgetId;
+			widgetDetailsStep = 'create';
+			patchPanelSnapshot(widgetId, {
+				lastPublishedVersion: null,
+				lastCommitId: null,
+				hasGeneratedCode: false,
+				publishHistory: [],
+				widgetDetailsStep: 'create',
+			});
+		}
 		if (widget?.id && canvasRef) {
 			canvasRef.selectWidgetShape(widget.id);
 		}
@@ -7920,8 +8804,20 @@ Requirements:
 	}
 
 	function positionOpenDetailsPanel(widgetId: string): void {
-		const rect = canvasRef?.getWidgetShapeScreenRect?.(widgetId) ?? null;
-		getWidgetDetailsRef(widgetId)?.positionBesideShape?.(rect);
+		const apply = () => {
+			let rect = canvasRef?.getWidgetShapeScreenRect?.(widgetId) ?? null;
+			if (!rect) {
+				const objectId = draftConvertObjectIds.get(widgetId);
+				if (objectId && canvasRef?.getObjectScreenRect) {
+					rect = canvasRef.getObjectScreenRect(objectId);
+				}
+			}
+			getWidgetDetailsRef(widgetId)?.positionBesideShape?.(rect);
+		};
+		apply();
+		if (typeof requestAnimationFrame === 'function') {
+			requestAnimationFrame(apply);
+		}
 	}
 
 	async function openWidgetDetailsPanel(widgetId: string): Promise<void> {
@@ -7952,6 +8848,14 @@ Requirements:
 			openWidgetPanelIds = [...openWidgetPanelIds, widgetId];
 		}
 		focusWidgetPanel(widgetId);
+		if (isDraftConvertId(widgetId)) {
+			detailsSessionWidgetId = widgetId;
+		}
+		const alreadyMounted = getWidgetDetailsRef(widgetId);
+		if (alreadyMounted && !alreadyMounted.getShowWidgetDetails?.()) {
+			alreadyMounted.openWidgetDetails();
+			positionOpenDetailsPanel(widgetId);
+		}
 		if (openGen !== widgetDetailsOpenGen || widgetDetailsOpenTargetId !== widgetId) {
 			console.log('[CreatorApp] Skip stale Widget Details open:', widgetId?.substring(0, 8));
 			return;
@@ -8048,6 +8952,8 @@ Requirements:
 		openWidgetPanelIds = replaced.includes(toId) ? replaced : [...replaced, toId];
 		if (focusedPanelWidgetId === fromId) focusedPanelWidgetId = toId;
 		if (selectedWidgetId === fromId) selectedWidgetId = toId;
+		if (detailsSessionWidgetId === fromId) detailsSessionWidgetId = toId;
+		if (widgetDetailsOpenTargetId === fromId) widgetDetailsOpenTargetId = toId;
 		showWidgetDetails = openWidgetPanelIds.length > 0;
 		console.log(
 			'[CreatorApp] Migrated Widget Details panel',
@@ -8074,6 +8980,9 @@ Requirements:
 		if (!options.fromShapeSwitch && widgetDetailsOpenTargetId === widgetId) {
 			widgetDetailsOpenTargetId = null;
 		}
+		if (detailsSessionWidgetId === widgetId) {
+			detailsSessionWidgetId = null;
+		}
 		getWidgetDetailsRef(widgetId)?.closeWidgetDetails({ silent: true });
 		openWidgetPanelIds = openWidgetPanelIds.filter((id) => id !== widgetId);
 		const { [widgetId]: _z, ...restZ } = panelZIndexByWidgetId;
@@ -8106,6 +9015,8 @@ Requirements:
 		panelInstanceKeyByWidgetId = {};
 		focusedPanelWidgetId = null;
 		panelZIndexByWidgetId = {};
+		detailsSessionWidgetId = null;
+		widgetDetailsOpenTargetId = null;
 		showWidgetDetails = false;
 	}
 
@@ -8378,11 +9289,10 @@ Requirements:
 	// If the token expired during generation, we delayed logout to avoid disrupting the operation.
 	// Now that the operation is done, proceed with logout.
 	$: if (pendingTokenExpiryLogout && !isGeneratingCode && Object.keys(generatingWidgetIds).length === 0) {
-		console.log('WidgetCreator: Deferred logout — active operations completed, proceeding with logout');
+		console.log('WidgetCreator: Token expired after operations — keeping canvas, prompting re-auth');
 		pendingTokenExpiryLogout = false;
 		tokenExpiryWarningShown = false;
-		handleLogout();
-		authStatus = 'Token expired. Please login again.';
+		authStatus = 'Session expired. Sign in again to keep saving.';
 	}
 
 
@@ -8464,35 +9374,56 @@ Requirements:
 		return [];
 	}
 
+	function unwrapContentMediaValue(raw: unknown): unknown {
+		if (raw && typeof raw === 'object' && 'url' in (raw as Record<string, unknown>)) {
+			return (raw as { url?: string }).url ?? '';
+		}
+		return raw;
+	}
+
+	function pickLiveContentValue(...candidates: unknown[]): unknown {
+		for (const candidate of candidates) {
+			const unwrapped = unwrapContentMediaValue(candidate);
+			if (unwrapped === undefined || unwrapped === null || unwrapped === '') continue;
+			return unwrapped;
+		}
+		return '';
+	}
+
 	/** Flatten schema-shaped content items to runtime values for preview postMessage. */
 	function flattenContentItemsForPreview(items: any[]): any[] {
 		return items.map((item) => {
 			if (!item || typeof item !== 'object') return item;
 			const flat: Record<string, unknown> = { id: item.id, title: item.title };
-			if (item.imageUrl) flat.imageUrl = item.imageUrl;
-			if (item.description) flat.description = item.description;
+			for (const [key, value] of Object.entries(item)) {
+				if (key === 'properties' || key === 'inputController' || key === 'id' || key === 'title') continue;
+				const unwrapped = unwrapContentMediaValue(value);
+				if (unwrapped === undefined) continue;
+				flat[key] = unwrapped;
+			}
 			const props = item.properties;
 			if (Array.isArray(props)) {
 				for (const prop of props) {
 					const name = prop?.name || prop?.id;
 					if (!name) continue;
-					const raw = prop.value !== undefined ? prop.value : prop.defaultValue;
-					if (raw === undefined || flat[name] !== undefined) continue;
-					if (raw && typeof raw === 'object' && 'url' in raw) {
-						flat[name] = (raw as { url?: string }).url ?? '';
-					} else {
-						flat[name] = raw;
-					}
+					if (flat[name] !== undefined && flat[name] !== '') continue;
+					const picked = pickLiveContentValue(prop.value, prop.defaultValue);
+					if (picked !== '') flat[name] = picked;
 				}
 			}
-			for (const [key, value] of Object.entries(item)) {
-				if (key === 'properties' || key === 'inputController') continue;
-				if (flat[key] === undefined && value !== undefined) flat[key] = value;
-			}
 			return flat;
 		});
 	}
 
+	function contentItemsToEditorValueMap(items: any[]): Record<string, Record<string, unknown>> {
+		const map: Record<string, Record<string, unknown>> = {};
+		for (const item of flattenContentItemsForPreview(items || [])) {
+			if (!item?.id) continue;
+			map[String(item.id)] = item as Record<string, unknown>;
+		}
+		return map;
+	}
+
 	function contentItemHasProperties(item: any): boolean {
 		return Array.isArray(item?.properties) && item.properties.length > 0;
 	}
@@ -8500,22 +9431,28 @@ Requirements:
 	/** New items from the editor arrive flat ({id, caption, image}) — reattach schema fields so the form stays editable. */
 	function attachSchemaProperties(item: any, template: any): any {
 		if (!item || typeof item !== 'object') return item;
-		if (contentItemHasProperties(item)) return item;
-		if (!contentItemHasProperties(template)) return item;
-		const clonedTemplate = JSON.parse(JSON.stringify(template));
-		const nextProperties = clonedTemplate.properties.map((prop: any) => {
+		const templateHasProps = contentItemHasProperties(template);
+		if (!contentItemHasProperties(item) && !templateHasProps) return item;
+		const sourceProperties = contentItemHasProperties(item)
+			? item.properties
+			: JSON.parse(JSON.stringify(template.properties));
+		const nextProperties = sourceProperties.map((prop: any) => {
 			const key = prop.id || prop.name;
-			const incoming = key != null ? item[key] : undefined;
+			const hasOwn = key != null && Object.prototype.hasOwnProperty.call(item, key);
+			const incoming = hasOwn ? item[key] : undefined;
+			const picked = hasOwn
+				? (unwrapContentMediaValue(incoming) ?? '')
+				: pickLiveContentValue(prop.value, prop.defaultValue);
 			return {
 				...prop,
-				value: incoming !== undefined ? incoming : (prop.defaultValue ?? prop.value)
+				value: picked
 			};
 		});
 		return {
-			...clonedTemplate,
+			...(templateHasProps ? JSON.parse(JSON.stringify(template)) : {}),
 			...item,
 			id: item.id,
-			title: item.title || clonedTemplate.title,
+			title: item.title || template?.title,
 			properties: nextProperties
 		};
 	}
@@ -8683,20 +9620,11 @@ Requirements:
 		const effectiveCanvasId = getEffectiveCanvasId();
 		const panelIsPublishing = isPublishing && publishingWidgetId === widgetId;
 		const anotherPanelIsPublishing = isPublishing && publishingWidgetId !== null && publishingWidgetId !== widgetId;
-		const stuckGlobalPublishing = isPublishing && !publishingWidgetId;
 		const nextVersion = (ps.lastPublishedVersion ?? 0) + 1;
 
 		if (panelIsPublishing) {
 			return { disabled: true, label: 'Publishing...', reason: 'Publishing in progress…', showDisabledHint: false };
 		}
-		if (stuckGlobalPublishing) {
-			return {
-				disabled: true,
-				label: getPublishButtonLabelFallback(ps),
-				reason: 'Publish state is busy — try again in a moment.',
-				showDisabledHint: true,
-			};
-		}
 		if (anotherPanelIsPublishing) {
 			return {
 				disabled: true,
@@ -8705,7 +9633,7 @@ Requirements:
 				showDisabledHint: true,
 			};
 		}
-		if (isPublishingInOtherTab) {
+		if (checkCrossTabPublishing(widgetId)) {
 			return {
 				disabled: true,
 				label: getPublishButtonLabelFallback(ps),
@@ -8764,8 +9692,10 @@ Requirements:
 			getLivePublishedCommitShaForPanel(widgetId)
 			?? getWidgetLastPublishCommitSha(widgetId);
 		const pendingPublish = !!ps.pendingPublishAfterCodegen;
+		const unpublishedAhead = hasUnpublishedChangesForPanel(widgetId)
+			|| !!(ps.lastCommitId && liveSha && !commitsMatch(ps.lastCommitId, liveSha));
 
-		// Known up-to-date: HEAD matches live (pending flag ignored when proven equal).
+		// Known up-to-date: HEAD matches live. Must win over leftover pendingPublish flags.
 		if (headSha && liveSha && commitsMatch(headSha, liveSha)) {
 			return {
 				disabled: true,
@@ -8775,10 +9705,24 @@ Requirements:
 			};
 		}
 
-		// After a live version exists, enable vN+1 only when codegen just finished
-		// or HEAD is proven different from the live SHA. Do not enable just because
-		// live SHA is still hydrating (that looked like "always publish v2").
-		if (pendingPublish || (headSha && liveSha && !commitsMatch(headSha, liveSha))) {
+		if (pendingPublish || unpublishedAhead) {
+			console.log('[Publish] Gate: unpublished HEAD — enable', widgetId.substring(0, 8), {
+				pendingPublish,
+				unpublishedAhead,
+				headSha: headSha?.substring(0, 8),
+				displayHead: ps.lastCommitId?.substring(0, 8),
+				liveSha: liveSha?.substring(0, 8),
+			});
+			return {
+				disabled: false,
+				label: `Publish new v${nextVersion}`,
+				reason: null,
+				showDisabledHint: false,
+			};
+		}
+
+		// After a live version exists, enable vN+1 when HEAD is proven different.
+		if (headSha && liveSha && !commitsMatch(headSha, liveSha)) {
 			return {
 				disabled: false,
 				label: `Publish new v${nextVersion}`,
@@ -8920,7 +9864,7 @@ $: if ($widgetPublishStatus.timestamp && $widgetPublishStatus.widgetId) {
 			}
 			if (publishWidgetId) {
 				console.log('[Publish] Refreshing canvas widget screenshot after successful publish');
-				setTimeout(() => handleRefreshScreenshot(publishWidgetId), 2000);
+				setTimeout(() => handleRefreshScreenshot(publishWidgetId, { quiet: true }), 2000);
 			}
 			if (embedded && onPublishComplete && publishWidgetId) {
 				onPublishComplete({
@@ -9316,6 +10260,9 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		hasValidToken = false;
 		inlinePanelView = null;
 		selectedWidget = null;
+		if (typeof window !== 'undefined') {
+			window.location.href = '/login';
+		}
 	}
 
 	// decodeJWT imported from ./pageHelpers.ts
@@ -9332,11 +10279,12 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 			// if the decoded token has an expiration field, update the token status
 			if (decoded && decoded.exp) {
-				// calculate the token time left
 				const currentTime = Math.floor(Date.now() / 1000);
-				tokenTimeLeft = decoded.exp - currentTime;
+				const expUnix = decoded.exp;
+				tokenTimeLeft = expUnix - currentTime;
 				tokenExpired = tokenTimeLeft <= 0;
-				hasValidToken = !tokenExpired;
+				// API calls must follow the real JWT, never the sessionBannerTest clock.
+				hasValidToken = decoded.exp - currentTime > 0;
 
 				// log the token expiration status
 				if (tokenExpired) {
@@ -9384,33 +10332,26 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	// If there are active operations (generating, loading preview), defer logout
 	// and show a warning instead of abruptly cutting off the operation
 	function checkTokenExpiration() {
+		updateTokenStatus();
 		if (currentUserToken) {
-			if (isTokenExpired(currentUserToken)) {
-				// Check if there are active operations that would be disrupted by logout
+			if (tokenExpired || tokenTimeLeft <= 0) {
 				const hasActiveOperations = isGeneratingCode || (showPreviewModal && previewLoading);
 
 				if (hasActiveOperations) {
-					// Don't logout yet — defer until operations complete
 					pendingTokenExpiryLogout = true;
-
 					if (!tokenExpiryWarningShown) {
 						tokenExpiryWarningShown = true;
-						console.warn('WidgetCreator.checkTokenExpiration: Token expired but active operations in progress — deferring logout');
-						authStatus = 'Token expired — finishing current operation before logout...';
-						showToast('warning', 'Session expiring', {
-							description: 'Your login token has expired. You will be logged out after the current operation completes.',
-							duration: 8000
-						});
+						console.warn('WidgetCreator.checkTokenExpiration: Token expired but active operations in progress — keeping the workspace open');
+						authStatus = 'Session expired — finish this operation, then sign in again to save.';
 					}
 					return false;
 				}
 
-				// No active operations (or deferred logout is now safe) — proceed with logout
-				console.log('WidgetCreator.checkTokenExpiration: Token expired, logging out automatically');
-				pendingTokenExpiryLogout = false;
-				tokenExpiryWarningShown = false;
-				handleLogout();
-				authStatus = 'Token expired. Please login again.';
+				if (!tokenExpiryWarningShown) {
+					tokenExpiryWarningShown = true;
+					console.log('WidgetCreator.checkTokenExpiration: Token expired — waiting for site session handler');
+					authStatus = 'Session expired.';
+				}
 				return false;
 			}
 		}
@@ -9582,6 +10523,24 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			});
 			return;
 		}
+		const lockedPanelVisible = !!(
+			detailsSessionWidgetId
+			&& openWidgetPanelIds.includes(detailsSessionWidgetId)
+			&& (getWidgetDetailsRef(detailsSessionWidgetId)?.getShowWidgetDetails?.() ?? false)
+		);
+		if (
+			detailsSessionWidgetId
+			&& detailsSessionWidgetId !== widgetId
+			&& lockedPanelVisible
+		) {
+			console.log('[WidgetCreator] Skip widget-shape click — convert session locked to', detailsSessionWidgetId.substring(0, 8));
+			return;
+		}
+		if (lockedPanelVisible && isConvertOrDraftPanelOpen() && !isDraftConvertId(widgetId)) {
+			console.log('[WidgetCreator] Skip widget-shape click — convert/draft panel is open:', widgetId.substring(0, 8));
+			return;
+		}
+
 		console.log('[WidgetCreator] Widget Image clicked, opening widget details panel:', widgetId);
 
 		// Explicit user intent — cancel any in-flight deep-link auto-open and allow this panel.
@@ -9595,8 +10554,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			}
 		}
 
-		// Keep address-bar widget_id aligned with the shape (prod embed props are frozen at mount).
-		if (typeof window !== 'undefined' && embedded) {
+		// Keep address-bar widget_id on the canvas primary (duplicate/select must not steal it).
+		if (typeof window !== 'undefined' && embedded && canvasPrimaryWidgetId && widgetId === canvasPrimaryWidgetId) {
 			try {
 				const url = new URL(window.location.href);
 				if (url.searchParams.get('widget_id') !== widgetId) {
@@ -9646,7 +10605,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				id: sourceWidgetId,
 				duplicateWidgetRequest: { canvas_id: canvasId } as any
 			});
-			const newWidget = response?.data;
+			let newWidget = response?.data;
 
 			if (!newWidget?.id) {
 				console.error('[WidgetCreator] duplicateWidget returned no data', response);
@@ -9672,37 +10631,94 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			}
 
 			// Re-link the cloned canvas shape to the new widget (also clears _isDuplicating on clone)
-			canvasRef?.linkObjectToWidget(clonedObject, newWidget.id, newWidget.name ?? null);
+			if (clonedObject) {
+				canvasRef?.linkObjectToWidget(clonedObject, newWidget.id, newWidget.name ?? null);
+			} else if (canvasRef?.addWidgetShape) {
+				canvasRef.addWidgetShape(newWidget.id, newWidget.name, 0, 1, null);
+			}
 			setTimeout(() => {
 				const json = canvasRef?.saveCanvas();
 				if (json) handleCanvasAutoSave(json);
 			}, 500);
 
-			// Add to beginning of list (newest first) and auto-select
 			widgets = [{ ...newWidget }, ...widgets];
 
-			// Set flag BEFORE selectWidget so loadWidget skips the build-from-repo attempt
-			// (the fork isn't ready yet — we handle it below after a delay)
-			pendingDuplicateBuildWidgetId = newWidget.id;
-			selectWidget(newWidget);
+			const sourceWidget = getWidgetById(sourceWidgetId);
+			const sourceJsPath =
+				((sourceWidget as { jsPath?: string | null; js_path?: string | null } | null)?.jsPath
+					?? (sourceWidget as { js_path?: string | null } | null)?.js_path)
+				?? null;
+			const duplicateJsPath =
+				sourceJsPath
+				?? ((newWidget as { jsPath?: string | null; js_path?: string | null }).jsPath
+					?? (newWidget as { js_path?: string | null }).js_path);
+			if (sourceWidget && duplicateJsPath) {
+				Object.assign(newWidget, {
+					jsPath: duplicateJsPath,
+					js_path: duplicateJsPath,
+					version: (newWidget as { version?: number }).version ?? (sourceWidget as { version?: number }).version,
+					isDraft: (newWidget as { isDraft?: boolean }).isDraft
+						?? (sourceWidget as { isDraft?: boolean; is_draft?: boolean }).isDraft
+						?? (sourceWidget as { is_draft?: boolean }).is_draft,
+					lastCpgCommitSha:
+						(newWidget as { lastCpgCommitSha?: string | null }).lastCpgCommitSha
+						?? (sourceWidget as { lastCpgCommitSha?: string | null }).lastCpgCommitSha,
+					lastPublishCommitSha:
+						(newWidget as { lastPublishCommitSha?: string | null }).lastPublishCommitSha
+						?? (sourceWidget as { lastPublishCommitSha?: string | null; last_publish_commit_sha?: string | null }).lastPublishCommitSha
+						?? (sourceWidget as { last_publish_commit_sha?: string | null }).last_publish_commit_sha,
+				});
+				widgets = widgets.map((w) => (w.id === newWidget.id ? { ...newWidget } : w));
+			}
+
+			const sourceCommit = loadCommitIdForWidget(sourceWidgetId);
+			if (sourceCommit) {
+				saveCommitIdForWidget(newWidget.id, sourceCommit);
+			}
+
+			const sourceHasCode =
+				!!normalizeRepositoryId(newWidget)
+				|| !!((newWidget as { jsPath?: string | null; js_path?: string | null }).jsPath
+					?? (newWidget as { js_path?: string | null }).js_path)
+				|| resolvePublishedVersionFromWidget(newWidget) !== null
+				|| !!sourceCommit;
+
+			if (!canvasPrimaryWidgetId) {
+				canvasPrimaryWidgetId = sourceWidgetId;
+			}
+
+			// Duplicate stays a sibling on the canvas — do not make it the primary widget.
+			await selectWidget(newWidget, { skipPlaceShape: true });
+			notifyHostWidgetName(getWidgetById(canvasPrimaryWidgetId) ?? getWidgetById(sourceWidgetId));
 
-			const newRepoId = normalizeRepositoryId(newWidget);
 			showToast('success', 'Widget duplicated', {
-				description: `"${newWidget.name}" created — compiling code…`
+				description: sourceHasCode
+					? `"${newWidget.name}" created with existing code`
+					: `"${newWidget.name}" created`
 			});
 
-			// Re-fetch widget from API to ensure repo_id and other fields are current
 			setTimeout(() => handleWidgetDataChanged(newWidget.id), 1500);
 
-			// Wait for GitLab fork to complete, then compile from repo
-			// GitLab forks are async — files need time to be copied
+			if (sourceHasCode) {
+				await openWidgetDetailsPanel(newWidget.id);
+				await tick();
+				getWidgetDetailsRef(newWidget.id)?.startPreviewLoadingPublic();
+				try {
+					await getWidgetDetailsRef(newWidget.id)?.retryPreviewIfEmpty?.();
+				} catch (previewErr) {
+					console.warn('[WidgetCreator] Duplicate preview fallback failed:', previewErr);
+				}
+				return;
+			}
+
+			pendingDuplicateBuildWidgetId = newWidget.id;
 			setTimeout(async () => {
 				if (selectedWidgetId !== newWidget.id) return;
 				pendingDuplicateBuildWidgetId = null;
 				try {
 					await handleWidgetDataChanged(newWidget.id);
 					const freshWidget = getWidgetById(newWidget.id);
-					let repoId = freshWidget ? normalizeRepositoryId(freshWidget) : newRepoId;
+					let repoId = freshWidget ? normalizeRepositoryId(freshWidget) : normalizeRepositoryId(newWidget);
 
 					if (!repoId) {
 						console.log('[WidgetCreator] Duplicate has no repo after re-fetch, creating one...');
@@ -9736,7 +10752,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	/**
 	 * Called when a widget shape is about to be deleted from canvas.
 	 * Step 1: Confirm removing the shape from canvas.
-	 * Step 2: Ask if user also wants to delete the widget from DB.
+	 * Step 2 (ASK_DELETE_FROM_DB_CONFIRM): Ask if user also wants to delete the widget from DB.
+	 * MVP: first confirm also deletes the associated widget from the database.
 	 * Returns true to proceed with canvas shape deletion, false to cancel.
 	 */
 	async function handleWidgetShapeDeleting(widgetId: string): Promise<boolean> {
@@ -9749,7 +10766,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		if (!result.proceed) return false;
 
-		showToast('info', 'Shape removed from canvas', { description: `Widget "${widgetName}" — check dialog for DB deletion` });
+		closeWidgetDetailsPanel(widgetId);
+
+		if (result.deleteFromDb) {
+			await deleteWidgetFromDb(widgetId);
+		} else {
+			showToast('info', 'Shape removed from canvas', { description: `Widget "${widgetName}" kept in database` });
+		}
 		return true;
 	}
 
@@ -9772,7 +10795,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			if (selectedWidget?.id === widgetId) {
 				selectedWidget = { ...selectedWidget, name: newName };
 			}
-			onWidgetRenamed?.({ widgetId, name: newName });
+			notifyHostWidgetName({ id: widgetId, name: newName });
+			emitCanvasWidgetsList('widget-renamed');
 			showToast('success', `Widget renamed to "${newName}"`);
 		} catch (error) {
 			console.error('[WidgetCreator] Failed to rename widget:', error);
@@ -9819,14 +10843,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		}
 		await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 		await maybeAutoRestoreWidgetShapes();
-		const primaryId =
-			canvasPrimaryWidgetId ||
-			canvasRef.getPrimaryWidgetId?.() ||
-			selectedWidgetId;
-		if (primaryId && canvasRef) {
+		const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
+		if (primaryId && canvasRef && !isConvertOrDraftPanelOpen()) {
 			canvasRef.setPrimaryWidgetShape?.(primaryId);
 			const found = canvasRef.selectWidgetShape(primaryId);
 			console.log('[CreatorApp] Primary widget shape after canvas load:', primaryId, found);
+		} else if (isConvertOrDraftPanelOpen()) {
+			console.log('[CreatorApp] Skip primary shape select — convert/draft panel is open');
 		}
 	}
 
@@ -10017,6 +11040,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				const widgetIdsOnCanvas = extractWidgetIdsFromCanvasContent(parsed);
 				await canvasRef.loadCanvas(saved);
 				markCanvasStateLoaded();
+				canvasApiLoadError = null;
 				isLoadCooldownActive = true;
 				setTimeout(() => { isLoadCooldownActive = false; }, 3000);
 				lastSavedCanvasObjectCount = objectCount;
@@ -10100,6 +11124,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		lastSavedCanvasObjectCount = objectCount;
 		try { sessionStorage.setItem(CANVAS_OBJ_COUNT_KEY, String(objectCount)); } catch {}
+		emitCreatorSaveState(false);
 
 		// Save to durable L1 fallback (always, even with 0 objects for legitimate clears)
 		saveCanvasState(canvasId, json);
@@ -10173,6 +11198,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			: `ConvertedW-${Date.now()}`;
 		draftConvertScreenshots.set(draftId, payload.screenshot);
 		draftConvertObjectIds.set(draftId, payload.frameId);
+		// Grouping deselects the sketch; that must not close the draft or open the primary widget.
+		suppressWidgetDetailsClose = true;
 
 		// Group the sketch into one editable object and keep it on canvas — the
 		// user may keep editing it (ungroup, move, restyle) and re-convert later.
@@ -10200,6 +11227,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			// Refresh the stored screenshot so finalize uses the latest sketch look
 			draftConvertScreenshots.set(existingDraftId, payload.screenshot);
 			authStatus = 'Widget draft ready — send the prompt to generate.';
+			setTimeout(() => {
+				if (!finalizingDraftConversions.size) {
+					suppressWidgetDetailsClose = false;
+				}
+			}, 1500);
 			return;
 		}
 
@@ -10210,6 +11242,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			// Draft panel snapshot (no widget record in DB). WidgetDetails is
 			// null-safe for a missing widget — the panel shows the draft name.
 			await openWidgetDetailsPanel(draftId);
+			embeddedDeepLinkAutoOpenDone = true;
 			patchPanelSnapshot(draftId, {
 				codeGenerationPrompt: CONVERT_PROMPT,
 				promptImages: [payload.screenshot],
@@ -10251,6 +11284,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			showToast('error', 'Failed to prepare widget draft');
 		} finally {
 			isWidgetOperationInProgress = false;
+			setTimeout(() => {
+				if (!finalizingDraftConversions.size) {
+					suppressWidgetDetailsClose = false;
+				}
+			}, 1500);
 		}
 	}
 
@@ -10325,6 +11363,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			// Add to widgets list so getWidgetById resolves the real widget from now on.
 			widgets = [{ ...newWidget }, ...widgets.filter((w) => w.id !== draftId)];
 
+			if (canvasId) {
+				const existingPrimary = await resolvePrimaryWidgetIdForCanvas(canvasId);
+				if (!existingPrimary) {
+					await persistPrimaryWidgetId(widgetId);
+				}
+			}
+
 			// Replace the grouped sketch with a WidgetShape screenshot. On failure
 			// fall back to linking the sketch object to the widget id.
 			if (canvasRef && canvasObjectId) {
@@ -10364,7 +11409,10 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			// panel remounts: the freshly mounted Chat then activates this
 			// conversation (best-conversation = one with messages) instead of
 			// starting empty after a close/reopen.
-			await ensureCodegenUserMessagePersisted(widgetId, prompt);
+			await ensureCodegenUserMessagePersisted(widgetId, prompt, [
+				...(draftPanelState.promptImages ?? []),
+				screenshot,
+			].filter(Boolean));
 			// NOTE: never copy currentChatConversationId from the draft — the draft
 			// chat's conversation is a local UUID that doesn't exist in the DB, and
 			// migrating it would point codegen/summaries at a phantom conversation.
@@ -10372,6 +11420,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				draftPanelState as Record<string, unknown>;
 			patchPanelSnapshot(widgetId, {
 				...draftPanelStateClean,
+				lastPublishedVersion: null,
+				lastCommitId: null,
+				hasGeneratedCode: false,
+				publishHistory: [],
+				widgetDetailsStep: 'create',
 			} as Partial<WidgetPanelSnapshot>);
 			migrateOpenPanelWidgetId(draftId, widgetId);
 			widgetPanelSnapshots = Object.fromEntries(
@@ -10387,8 +11440,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			await tick();
 			const migratedRef = getWidgetDetailsRef(widgetId);
 			if (migratedRef?.getShowWidgetDetails?.()) {
-				console.log('[CreatorApp] Draft→widget: Widget Details stayed open, updating in place');
-				positionOpenDetailsPanel(widgetId);
+				console.log('[CreatorApp] Draft→widget: Widget Details stayed open — keep current position');
 			} else {
 				await openWidgetDetailsPanel(widgetId);
 			}
@@ -10425,6 +11477,16 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		return !!widgetId && widgetId.startsWith(DRAFT_CONVERT_ID_PREFIX);
 	}
 
+	function isConvertOrDraftPanelOpen(): boolean {
+		return (
+			isDraftConvertId(focusedPanelWidgetId)
+			|| isDraftConvertId(widgetDetailsOpenTargetId)
+			|| isDraftConvertId(selectedWidgetId)
+			|| openWidgetPanelIds.some((id) => isDraftConvertId(id))
+			|| (!!detailsSessionWidgetId && openWidgetPanelIds.includes(detailsSessionWidgetId))
+		);
+	}
+
 
 	/**
 	 * Creates or recreates a repository for a specific widget.
@@ -10525,6 +11587,30 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		} catch (error) {
 			if (error instanceof ResponseError) {
 				const status = error.response?.status;
+				if (status === 401) {
+					console.warn('[Auth] Repository verify got 401 — rebinding session and retrying once', {
+						repoId
+					});
+					applySiteSessionToCreator();
+					try {
+						const retryDetails = await agentClient.agentRepositoriesRepoIdGet({ repoId });
+						if (retryDetails?.id) return true;
+					} catch (retryError) {
+						if (retryError instanceof ResponseError && retryError.response?.status === 401) {
+							if (!silent) {
+								showToast('warning', 'Session expired', {
+									description: 'Sign in again, then retry. The widget repository is still linked.',
+									duration: 6000
+								});
+							}
+							if (typeof window !== 'undefined') {
+								window.dispatchEvent(new CustomEvent('widgetic:session-needs-reauth'));
+							}
+							throw retryError;
+						}
+					}
+					return false;
+				}
 				if (status === 404 || status === 403) {
 					console.warn('Repository reference is stale or forbidden; it will be recreated.', {
 						repoId,
@@ -10873,6 +11959,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	</div>
 	{/if}
 
+
 	<!-- Widgetic Canvas Editor - Full width background (lazy-loaded) -->
 	<div class="wc-canvas-area flex-1 min-h-0 relative">
 	<!-- Embedded: Debug toggle lives in site AppHeader (avoids overlapping Props Panel). -->
@@ -10903,6 +11990,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		bind:this={canvasRef}
 		showContainerFrame={!embedded}
 		bind:wireframeMode={canvasWireframeMode}
+		advancedFeatures={canvasAdvancedFeatures}
 		onReady={handleCanvasReady}
 		onAutoSave={handleCanvasAutoSave}
 		onBeforeUnmount={(json) => {
@@ -10914,6 +12002,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		}}
 		onConvertToWidget={handleConvertToWidget}
 		onWidgetImageClick={handleWidgetImageClick}
+		onCanvasDirty={() => emitCreatorSaveState(true)}
 		onWidgetShapeDuplicated={handleWidgetShapeDuplicated}
 		onWidgetShapeDeleting={handleWidgetShapeDeleting}
 		onWidgetRename={handleWidgetRename}
@@ -10922,8 +12011,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		getWidgetName={getWidgetNameById}
 		isWidgetKnown={isWidgetKnownById}
 		onNonWidgetSelected={() => {
-			if (suppressWidgetDetailsClose) {
-				console.log('[CreatorApp] Skip Widget Details close — canvas selection changed during draft finalize');
+			if (suppressWidgetDetailsClose || isConvertOrDraftPanelOpen()) {
+				console.log('[CreatorApp] Skip Widget Details close — convert/draft panel is open');
 				return;
 			}
 			const active = canvasRef?.getSelectedObject?.() ?? canvasRef?.selectedObject;
@@ -11259,7 +12348,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				{isPublishing}
 				{publishWidgetStatus}
 				publishNeedsSaveFirst={publishNeedsSaveFirstForPanel(panelWidgetId)}
-				lastPublishedVersion={ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(panelWidget ?? null)}
+				lastPublishedVersion={isDraftConvertId(panelWidgetId) ? null : (ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(panelWidget ?? null))}
 				widgetJsPath={ps.selectedWidgetJsPath ?? panelWidget?.jsPath ?? null}
 				{isGeneratingInOtherTab}
 				{isPublishingInOtherTab}
@@ -11335,6 +12424,9 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 					}
 					// Keep canvas WidgetShape thumbnail aligned with the live Worker preview.
 					scheduleCanvasShapePreviewSync(previewWidgetId);
+					if (detail?.step === 'create' || ps.widgetDetailsStep === 'create') {
+						applyPanelCompositionToPreview(previewWidgetId);
+					}
 				}}
 				on:widgetReady={({ detail }) => {
 					if (detail.widgetId !== panelWidgetId) return;
@@ -11349,21 +12441,15 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 						detail.repoHeadCommitSha ||
 						detail.repo_head_commit_sha ||
 						null;
-					const hasSha = typeof repoHead === 'string' && repoHead.length > 0;
-					if (hasSha) {
-						saveCommitIdForWidget(detail.widgetId, repoHead);
-					}
-					// Always persist hasGeneratedCode on the snapshot so Publish re-renders
-					// even when Worker cache hits without a SHA and the panel is unfocused.
+					// Rebuild is the same saved tree — do not promote GitLab HEAD into lastCommitId
+					// or Publish will offer vN+1 without a new codegen commit.
 					patchPanelSnapshot(detail.widgetId, {
 						panelPreviewCompileError: null,
 						hasGeneratedCode: true,
-						...(hasSha ? { lastCommitId: repoHead } : {}),
 					});
 					if (detail.widgetId === panelWidgetId) {
 						hasGeneratedCode = true;
-						if (hasSha) lastCommitId = repoHead;
-						if (!hasSha) {
+						if (!getPanelState(detail.widgetId).lastCommitId && !loadCommitIdForWidget(detail.widgetId)) {
 							void reconcileWidgetHeadCommit(detail.widgetId);
 						}
 						if (isPanelFocused && generateCodeStatus?.includes('preview build failed')) {
@@ -11485,6 +12571,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 					console.log('[WidgetCreator] Generate Now clicked for widget:', detail.widgetId);
 					const widgetId = detail.widgetId;
 					const ps = getPanelDisplayState(widgetId);
+					if (ps.lastGenerationFailed) {
+						void handleChatRetryMessage(
+							lastGenerationPrompt || ps.codeGenerationPrompt,
+							widgetId,
+						);
+						return;
+					}
 					const hasCode = !!(ps.lastCommitId || ps.lastPublishedVersion !== null);
 					const compileErr = getPanelPreviewCompileError(widgetId);
 					if (hasCode && compileErr) {
@@ -11501,10 +12594,9 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							console.log('[CreatorApp] Ignoring Widget Details close during draft→widget migrate');
 							return;
 						}
-						if (widgetDetailsOpenTargetId && widgetDetailsOpenTargetId !== panelWidgetId) {
-							console.log('[CreatorApp] Ignoring close from previous details panel:', panelWidgetId?.substring(0, 8));
-							return;
-						}
+						// After convert, the panel id changes but the X is still the visible
+						// panel — always close it. Stale-target ignore left the child hidden
+						// while openWidgetPanelIds stayed set, so nothing would reopen.
 						if (isPanelFocused && selectedWidgetId) {
 							savePromptForWidget(selectedWidgetId);
 							captureFocusedPanelSnapshot();
@@ -11534,8 +12626,9 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			>
 				<svelte:fragment slot="code-generation">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				{@const chatUserHeight = (panelDisplayRevision, Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, (ps.chatContainerHeight > 0 ? ps.chatContainerHeight : CHAT_DEFAULT_HEIGHT))))}
 				<div
-					class="parallel-panel-left-slot-ct flex flex-col flex-1 min-h-0 overflow-hidden h-full"
+					class="parallel-panel-left-slot-ct flex flex-col shrink-0 overflow-visible"
 					onmousedown={() => { if (!isPanelFocused) focusWidgetPanel(panelWidgetId); }}
 				>
 				<!-- Sticky header: title + model selectors (debug mode).
@@ -11582,11 +12675,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				</div>
 				{/if}
 
-				<div class="generation-scroll-ct flex flex-col flex-1 min-h-0 overflow-y-auto scrollbar-thin">
+				<div class="generation-scroll-ct flex flex-col shrink-0 overflow-visible">
 				<!-- Chat-based Code Generation Panel -->
 				{#key panelInstanceKey}
-						<Chat class="code-generation-chat flex-1 w-full shrink-0"
-							style="min-height: {ps.chatContainerHeight}px;"
+						<Chat class="code-generation-chat w-full shrink-0"
+							style="height: {chatUserHeight}px; min-height: {CHAT_MIN_HEIGHT}px; flex: 0 0 {chatUserHeight}px;"
 							resizeExpandsContainer={true}
 							onMessagesResize={(deltaPx) => handleChatMessagesResize(panelWidgetId, deltaPx)}
 							showLogs={debugMode}
@@ -11616,11 +12709,15 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							onSendMessage={(content, attachments) => handleChatSendMessage(content, attachments, panelWidgetId)}
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}
 							onUploadChatFile={handleChatUploadFile}
-							onTakeScreenshot={handleChatScreenshot}
+							onTakeScreenshot={() => handleChatScreenshot(panelWidgetId)}
+							isCompleted={!!conversationCompletedByWidgetId[panelWidgetId]}
+							onCompletionToggle={(detail) => handleChatCompletionToggle(panelWidgetId, detail)}
 							onLoadConversations={handleLoadConversations}
 							onLoadMessages={(conversationId) => handleLoadMessages(conversationId, panelWidgetId)}
 							onCreateConversation={handleCreateConversation}
-							onSaveMessage={handleSaveMessage}
+							onSaveMessage={(conversationId, content, messageType, attachments) =>
+								handleSaveMessage(conversationId, content, messageType, attachments, panelWidgetId)
+							}
 							onRestoreCheckpointBackend={handleRestoreCheckpoint}
 							onChatReady={(methods) => handleChatReady(methods, panelWidgetId)}
 							onDraftChange={() => handleChatDraftChange(panelWidgetId)}
@@ -11695,42 +12792,39 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							</div>
 						{/if}
 					</div>
+				</div> <!-- generation-scroll-ct -->
+				</div> <!-- parallel-panel-left-slot-ct -->
+				</svelte:fragment>
+
+				<svelte:fragment slot="publish-widget">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="parallel-panel-publish-slot-ct shrink-0 mt-2"
+					class="parallel-panel-publish-slot-ct shrink-0"
 					onmousedown={() => { if (!isPanelFocused) focusWidgetPanel(panelWidgetId); }}
 				>
 		<!-- ===== Publish Widget Section ===== -->
-			<div class="publish-widget-section flex flex-col gap-3 rounded border border-emerald-200 bg-emerald-50 p-3 mt-1">
-			<!-- Section Header -->
+			<div class="publish-widget-section flex flex-col gap-1 rounded border border-emerald-200 bg-emerald-50 px-2 py-1.5 mt-1 shrink-0">
 			<div class="publish-widget-section-header flex items-center justify-between gap-2">
-				<span class="text-sm font-semibold text-emerald-800">🚀 Publish Widget</span>
-				<!-- Current published version badge — shown when widget has been published -->
+				<span class="text-xs font-semibold text-emerald-800">🚀 Publish</span>
 				{#if ps.lastPublishedVersion !== null}
-					<span class="text-xs font-mono bg-emerald-700 text-white px-1.5 py-0.5 rounded">
+					<span class="text-[10px] font-mono bg-emerald-700 text-white px-1.5 py-0.5 rounded">
 						live: v{ps.lastPublishedVersion}
 					</span>
 				{/if}
 			</div>
 
-				<!-- Description -->
-				<p class="text-xs text-emerald-700 leading-relaxed">
-					Publish when you’re happy with the preview. You’ll get a stable embed URL for your site.
-				</p>
-
-				<!-- Publish Button + Build Status -->
-				<div class="publish-widget-section-actions flex flex-col gap-2 items-center">
-					<!-- Publish Widget Button — triggers production build via Trigger.dev -->
+				<div class="publish-widget-section-actions flex flex-col gap-1 items-center">
 					<Button
 						onclick={() => runPublishForPanel(panelWidgetId)}
-						disabled={isPublishDisabledForPanel(panelWidgetId)}
+						disabled={(panelDisplayRevision, isPublishDisabledForPanel(panelWidgetId))}
 						title={getPublishDisabledReasonForPanel(panelWidgetId) ?? undefined}
-class={`publish-widget-btn flex justify-center items-center border text-white w-full
+						size="sm"
+class={`publish-widget-btn flex justify-center items-center border text-white w-full h-8 text-xs
 						${isPublishing && publishingWidgetId === panelWidgetId
 							? 'bg-emerald-500 border-emerald-500 opacity-80 cursor-not-allowed'
 							: isPublishDisabledForPanel(panelWidgetId)
-								? 'bg-emerald-600 border-emerald-600 opacity-35 cursor-not-allowed'
-								: 'bg-emerald-600 border-emerald-600 hover:bg-emerald-700 hover:border-emerald-700 cursor-pointer'
+								? 'bg-emerald-600 border-emerald-600 opacity-40 cursor-not-allowed'
+								: '!opacity-100 bg-emerald-600 border-emerald-600 hover:bg-emerald-700 hover:border-emerald-700 cursor-pointer'
 						} rounded-lg`}
 					>
 					{#if isPublishing && publishingWidgetId === panelWidgetId && publishWidgetStatus === 'Building...'}
@@ -11740,7 +12834,7 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 						<span class="mr-1 inline-block">⏳</span>
 						<span>Publishing...</span>
 					{:else}
-						<span>{getPublishButtonLabelForPanel(panelWidgetId)}</span>
+						<span>{(panelDisplayRevision, getPublishButtonLabelForPanel(panelWidgetId))}</span>
 						{#if isPublishingInOtherTab}
 							<!-- svelte-ignore a11y-missing-attribute -->
 							<span class="text-xs opacity-70 ml-1" title="Publish is running in another tab">⏳</span>
@@ -11753,25 +12847,24 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 					{/if}
 					</Button>
 
-					{#if isPublishDisabledForPanel(panelWidgetId) && shouldShowPublishDisabledHintForPanel(panelWidgetId)}
-						<p class="publish-widget-disabled-hint text-xs text-center text-emerald-800/80 leading-relaxed px-1">
-							{getPublishDisabledReasonForPanel(panelWidgetId)}
+					{#if isPublishDisabledForPanel(panelWidgetId)}
+						<p class="publish-widget-disabled-hint text-[10px] text-center text-emerald-800/80 leading-snug px-1">
+							{getPublishDisabledReasonForPanel(panelWidgetId) || getPublishButtonLabelForPanel(panelWidgetId)}
 						</p>
 					{/if}
 
 					{#if ps.lastPublishedVersion !== null}
-						<a href="/test-widget?widgetId={panelWidgetId}&version={ps.lastPublishedVersion}&url={encodeURIComponent(publishedWidgetHtmlUrl(panelWidgetId, ps.lastPublishedVersion))}" target="_blank" rel="noopener noreferrer" class="flex justify-center items-center gap-1.5 w-full text-sm px-3 py-2 rounded-lg border border-emerald-200 bg-white text-emerald-700 hover:bg-emerald-50 transition-colors">
-							Open Published Widget (v{ps.lastPublishedVersion}) ↗
+						<a href="/test-widget?widgetId={panelWidgetId}&version={ps.lastPublishedVersion}&url={encodeURIComponent(publishedWidgetHtmlUrl(panelWidgetId, ps.lastPublishedVersion))}" target="_blank" rel="noopener noreferrer" class="text-[11px] text-emerald-700 hover:underline">
+							Open published v{ps.lastPublishedVersion} ↗
 						</a>
 					{/if}
 
-					<!-- Save-first hint — shown when changes aren't saved yet -->
 					{#if publishNeedsSaveFirstForPanel(panelWidgetId)}
-						<p class="text-xs text-center text-amber-700">
+						<p class="text-[10px] text-center text-amber-700">
 							{#if !resolvePublishHeadCommitId(panelWidgetId, ps)}
-								💾 Generate &amp; save the widget before publishing.
+								Save the widget before publishing.
 							{:else}
-								💾 Save your changes before publishing.
+								Save your changes before publishing.
 							{/if}
 						</p>
 					{/if}
@@ -11784,7 +12877,7 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 						if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
 						togglePublishHistory();
 					}}
-					class="publish-history-toggle flex items-center justify-between w-full text-xs text-emerald-700 hover:text-emerald-900 py-1 px-0.5 rounded transition-colors"
+					class="publish-history-toggle flex items-center justify-between w-full text-[10px] text-emerald-700 hover:text-emerald-900 py-0.5 px-0.5 rounded transition-colors"
 				>
 					<span class="font-medium">📋 Version History</span>
 					<span class="text-emerald-400">{isHistoryOpen && isPanelFocused ? '▲' : '▼'}</span>
@@ -11842,53 +12935,41 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 
 		</div> <!-- end of publish-widget-section -->
 				</div>
-				</div> <!-- generation-scroll-ct -->
-				</div> <!-- parallel-panel-left-slot-ct -->
 				</svelte:fragment>
 
-				<svelte:fragment slot="publish-widget"></svelte:fragment>
-
 				<svelte:fragment slot="composition-editor">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="parallel-panel-composition-slot-ct flex flex-col h-full min-h-0"
+					class="parallel-panel-composition-slot-ct flex flex-col h-full min-h-0 min-w-0 overflow-y-auto overflow-x-hidden scrollbar-thin"
 					onmousedown={() => { if (!isPanelFocused) focusWidgetPanel(panelWidgetId); }}
 				>
 		<!-- ===== Composition Editor (Step 2: Edit) ===== -->
 		{#if ps.lastCommitId || ps.lastPublishedVersion !== null}
-			<div class="composition-editor-section flex flex-col h-full min-h-0">
+			<div class="composition-editor-section flex flex-col flex-1 min-h-0 h-full">
 
 				{#if panelHasUnpublishedChanges}
-				<div class="edit-unpublished-banner-ct mx-3 mt-2 px-3 py-2 rounded-md border border-amber-200 bg-amber-50 text-amber-800 text-xs flex flex-col gap-2">
-					<p class="edit-unpublished-banner-text leading-relaxed">
-						<strong class="font-semibold">Newer code than Live v{ps.lastPublishedVersion ?? '—'}.</strong>
-						Widget is published, but latest commit
+				<div class="edit-unpublished-banner-ct mx-3 mt-2 px-2 py-1.5 rounded-md border border-amber-200 bg-amber-50 text-amber-800 text-xs flex items-center gap-2 shrink-0">
+					<p class="edit-unpublished-banner-text leading-snug min-w-0 flex-1 truncate" title="Newer code than Live v{ps.lastPublishedVersion ?? '—'}. Publish to promote commit {formatCommitShaShort(ps.lastCommitId)}.">
+						<strong class="font-semibold">Newer than Live v{ps.lastPublishedVersion ?? '—'}</strong>
 						<span class="font-mono">{formatCommitShaShort(ps.lastCommitId)}</span>
-						is ahead of the live artifact
-						(<span class="font-mono">{formatCommitShaShort(getLivePublishedCommitShaForPanel(panelWidgetId))}</span>).
-						Edit preview shows <strong>Live v{ps.lastPublishedVersion ?? '—'}</strong> with your composition settings.
-						Publish to promote the latest code to Live — this preview will refresh automatically.
+						ahead of
+						<span class="font-mono">{formatCommitShaShort(getLivePublishedCommitShaForPanel(panelWidgetId))}</span>
 					</p>
-					<div class="edit-unpublished-banner-actions flex items-center gap-2 flex-wrap">
-						<Button
-							onclick={() => runPublishForPanel(panelWidgetId)}
-							disabled={isPublishDisabledForPanel(panelWidgetId)}
-							title={getPublishDisabledReasonForPanel(panelWidgetId) ?? undefined}
-							class="edit-banner-publish-btn flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md border transition-colors
-								{isPublishDisabledForPanel(panelWidgetId)
-									? 'bg-emerald-600/40 border-emerald-600/40 text-white cursor-not-allowed'
-									: 'bg-emerald-600 border-emerald-600 text-white hover:bg-emerald-700 hover:border-emerald-700 cursor-pointer'}"
-						>
-							{#if isPublishing && publishingWidgetId === panelWidgetId}
-								<span>⏳ Publishing…</span>
-							{:else}
-								<span>🚀 Publish to Live</span>
-							{/if}
-						</Button>
-						{#if publishNeedsSaveFirstForPanel(panelWidgetId)}
-							<span class="text-amber-700">Generate &amp; save code before publishing.</span>
+					<Button
+						onclick={() => runPublishForPanel(panelWidgetId)}
+						disabled={isPublishDisabledForPanel(panelWidgetId)}
+						title={getPublishDisabledReasonForPanel(panelWidgetId) ?? undefined}
+						class="edit-banner-publish-btn shrink-0 flex items-center justify-center gap-1 px-2 py-1 text-xs font-semibold rounded-md border transition-colors
+							{isPublishDisabledForPanel(panelWidgetId)
+								? 'bg-emerald-600/40 border-emerald-600/40 text-white cursor-not-allowed'
+								: 'bg-emerald-600 border-emerald-600 text-white hover:bg-emerald-700 hover:border-emerald-700 cursor-pointer'}"
+					>
+						{#if isPublishing && publishingWidgetId === panelWidgetId}
+							<span>⏳</span>
+						{:else}
+							<span>🚀 Publish</span>
 						{/if}
-					</div>
+					</Button>
 				</div>
 				{/if}
 
@@ -12050,14 +13131,17 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 						</button>
 					</div>
 				{:else if ps.compositionDesignSchema || ps.compositionContentSchema}
-					<div class="composition-editor-props-ct flex flex-1 min-h-0 flex-col overflow-hidden p-2">
+					<div class="composition-editor-props-ct flex flex-col flex-1 min-h-[550px] max-h-[800px] overflow-y-auto overflow-x-hidden p-2">
 						{#key `${panelWidgetId}-${ps.selectedComposition?.id ?? 'new'}`}
 						<PropsEditor
 							class="composition-props-editor flex-1 min-h-0 min-w-0"
 							designSchema={ps.compositionDesignSchema}
 							contentSchema={buildPropsEditorContentSchema(ps.compositionContentSchema, ps.liveContentItems)}
 							initialDesignValues={ps.liveDesignValues}
-							initialContentValues={ps.liveContentValues}
+							initialContentValues={{
+								...ps.liveContentValues,
+								items: contentItemsToEditorValueMap(ps.liveContentItems)
+							}}
 							width="100%"
 							height="100%"
 							showDragHandle={false}
@@ -12336,7 +13420,7 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 			<Dialog.Title>Delete Widget Shape</Dialog.Title>
 			<Dialog.Description>
 				{#if deleteDialogStep === 'confirm-remove'}
-					Remove <strong>"{deleteDialogWidgetName}"</strong> shape from the canvas?
+					Remove <strong>"{deleteDialogWidgetName}"</strong> from the canvas? This also deletes the associated widget.
 				{:else}
 					Also delete the widget <strong>"{deleteDialogWidgetName}"</strong> from the database?
 				{/if}
@@ -12354,8 +13438,8 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 					type="button"
 					class="px-4 py-2 text-sm rounded-lg bg-red-600 hover:bg-red-700 text-white cursor-pointer"
 					onclick={() => handleDeleteDialogResponse('remove-and-ask-db')}
-				>Remove from Canvas</button>
-			{:else}
+				>Delete</button>
+			{:else if ASK_DELETE_FROM_DB_CONFIRM}
 				<button
 					type="button"
 					class="px-4 py-2 text-sm rounded-lg border border-gray-300 hover:bg-gray-100 cursor-pointer"