@widgetic/creator 0.3.50 → 0.3.51

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);
@@ -132,11 +138,13 @@
 	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 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';
 
 	/** 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> {
@@ -316,9 +324,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);
@@ -517,6 +557,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 +577,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' });
@@ -663,6 +710,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,8 +730,8 @@
 		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>> = {};
 	let pendingChatDraftText = '';
@@ -704,7 +753,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 +762,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 +792,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 +802,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 +810,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 +869,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,14 +920,45 @@
 					? 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;
 		}
+		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,
+			}));
+		if (persistFileAttachments.length > 0) {
+			await ensureCodegenUserMessagePersisted(
+				codegenWidgetId,
+				content,
+				undefined,
+				persistFileAttachments,
+			);
+		}
 		// Pass upload IDs / images explicitly — clearDraft already wiped Chat's local attachments.
 		await generateCode({
 			prompt: content,
@@ -881,9 +966,19 @@
 			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 +989,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) {
@@ -970,7 +1111,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 +1167,113 @@
 				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 imagePersistItems = 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 missingPersist = persistAttachments.filter((att) => {
+				if (att.url && existingUrls.has(att.url)) 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 +1298,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);
 
@@ -1139,26 +1418,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) {
@@ -1195,48 +1488,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 +1592,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 +1611,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 +1636,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);
@@ -1496,6 +1842,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 +1903,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 });
 	}
 
@@ -1924,7 +2276,11 @@
 				compositionSchemasError = schemaError;
 			}
 			if (designSchema || contentSchema) {
-				queueMicrotask(() => loadCompositionsForPanel(widgetId));
+				queueMicrotask(() => {
+					void loadCompositionsForPanel(widgetId).then(() => {
+						applyPanelCompositionToPreview(widgetId);
+					});
+				});
 			}
 		} finally {
 			schemaLoadInFlight.delete(widgetId);
@@ -1962,20 +2318,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: 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 +2413,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) {
@@ -2593,7 +2972,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 +3385,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 +3404,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;
@@ -3616,7 +4015,7 @@
 					canvasPrimaryWidgetId ||
 					canvasRef.getPrimaryWidgetId?.() ||
 					selectedWidgetId;
-				if (primaryId) {
+				if (primaryId && !isConvertOrDraftPanelOpen()) {
 					canvasRef.setPrimaryWidgetShape?.(primaryId);
 					canvasRef.selectWidgetShape(primaryId);
 				}
@@ -4481,6 +4880,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.
@@ -5247,11 +5651,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 +5690,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 +6218,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 +6243,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 +6256,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 +6382,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 +6473,10 @@ Requirements:
 			fromChat: options.fromChat,
 			widgetId: codegenTargetWidgetId,
 			compileFixOnly: options.compileFixOnly,
+			forceRecreateRepo: options.forceRecreateRepo,
 			attachmentIds: options.attachmentIds,
 			promptImagesOverride: options.promptImagesOverride,
+			persistFileAttachments: options.persistFileAttachments,
 		});
 	}
 
@@ -6082,8 +6495,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 +6528,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 +6541,7 @@ Requirements:
 				: undefined;
 			panelChat.addUserMessage(prompt, codegenImageAttachments);
 		}
-		await ensureCodegenUserMessagePersisted(generationWidgetId, prompt);
-		
+
 		isGeneratingCode = generationWidgetId === focusedPanelWidgetId;
 		setCrossTabGenerating(true, generationWidgetId);
 		lastGenerationPrompt = prompt;
@@ -6132,6 +6552,16 @@ Requirements:
 				? 'Processing queued code generation request...'
 				: 'Preparing code generation...',
 		});
+
+		// Persist chat attachments before repo/codegen so reopen + failed GLM still show the file.
+		if (!options.compileFixOnly) {
+			await ensureCodegenUserMessagePersisted(
+				generationWidgetId,
+				prompt,
+				options.promptImagesOverride,
+				options.persistFileAttachments,
+			);
+		}
 		
 		// Keep preview tab active so user sees the "Generating..." overlay.
 		// Console logs are still accessible via the Console tab button.
@@ -6141,22 +6571,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 +6642,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 +6650,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 +6713,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 +6880,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),
@@ -6548,8 +7028,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 +7102,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;
@@ -6965,6 +7447,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,11 +7541,13 @@ 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);
@@ -7091,11 +7576,13 @@ 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);
 		emitCreatorDebugChanged();
 		emitCreatorWireframeChanged();
+		emitCreatorAdvancedChanged();
 	});
 
 	// Capture-phase Escape: close lightbox before Canvas can deselect → close WidgetDetails
@@ -7488,7 +7975,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 +8028,7 @@ Requirements:
 			compositionSchemasLoading: false,
 			compositionSchemasError: null,
 			schemaLoadStartedAt: null,
-			chatContainerHeight: DEFAULT_CHAT_CONTAINER_HEIGHT,
+			chatContainerHeight: 550,
 			panelPreviewCompileError: null,
 		};
 	}
@@ -7567,16 +8054,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 +8084,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 +8102,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 +8392,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,7 +8425,13 @@ Requirements:
 	}
 
 	function positionOpenDetailsPanel(widgetId: string): void {
-		const rect = canvasRef?.getWidgetShapeScreenRect?.(widgetId) ?? null;
+		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);
 	}
 
@@ -7952,6 +8463,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 +8567,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 +8595,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 +8630,8 @@ Requirements:
 		panelInstanceKeyByWidgetId = {};
 		focusedPanelWidgetId = null;
 		panelZIndexByWidgetId = {};
+		detailsSessionWidgetId = null;
+		widgetDetailsOpenTargetId = null;
 		showWidgetDetails = false;
 	}
 
@@ -8378,11 +8904,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 +8989,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 +9046,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
 		};
 	}
@@ -8764,8 +9316,26 @@ Requirements:
 			getLivePublishedCommitShaForPanel(widgetId)
 			?? getWidgetLastPublishCommitSha(widgetId);
 		const pendingPublish = !!ps.pendingPublishAfterCodegen;
+		const unpublishedAhead = hasUnpublishedChangesForPanel(widgetId)
+			|| !!(ps.lastCommitId && liveSha && !commitsMatch(ps.lastCommitId, 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,
+			};
+		}
 
-		// Known up-to-date: HEAD matches live (pending flag ignored when proven equal).
+		// Known up-to-date: HEAD matches live.
 		if (headSha && liveSha && commitsMatch(headSha, liveSha)) {
 			return {
 				disabled: true,
@@ -8775,10 +9345,8 @@ 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))) {
+		// 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 +9488,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 +9884,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 +9903,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 +9956,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 +10147,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.
@@ -9736,7 +10319,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 +10333,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		if (!result.proceed) return false;
 
-		showToast('info', 'Shape removed from canvas', { description: `Widget "${widgetName}" — check dialog for DB deletion` });
+		if (result.deleteFromDb) {
+			await deleteWidgetFromDb(widgetId);
+		} else {
+			showToast('info', 'Shape removed from canvas', { description: `Widget "${widgetName}" kept in database` });
+		}
 		return true;
 	}
 
@@ -9823,10 +10411,12 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			canvasPrimaryWidgetId ||
 			canvasRef.getPrimaryWidgetId?.() ||
 			selectedWidgetId;
-		if (primaryId && canvasRef) {
+		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');
 		}
 	}
 
@@ -10173,6 +10763,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 +10792,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 +10807,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 +10849,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			showToast('error', 'Failed to prepare widget draft');
 		} finally {
 			isWidgetOperationInProgress = false;
+			setTimeout(() => {
+				if (!finalizingDraftConversions.size) {
+					suppressWidgetDetailsClose = false;
+				}
+			}, 1500);
 		}
 	}
 
@@ -10364,7 +10967,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 +10978,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 +10998,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 +11035,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 +11145,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 +11517,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 +11548,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		bind:this={canvasRef}
 		showContainerFrame={!embedded}
 		bind:wireframeMode={canvasWireframeMode}
+		advancedFeatures={canvasAdvancedFeatures}
 		onReady={handleCanvasReady}
 		onAutoSave={handleCanvasAutoSave}
 		onBeforeUnmount={(json) => {
@@ -10922,8 +11568,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 +11905,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 +11981,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;
@@ -11485,6 +12134,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 +12157,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 +12189,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 +12238,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 +12272,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							onSendMessage={(content, attachments) => handleChatSendMessage(content, attachments, panelWidgetId)}
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}
 							onUploadChatFile={handleChatUploadFile}
-							onTakeScreenshot={handleChatScreenshot}
+							onTakeScreenshot={() => handleChatScreenshot(panelWidgetId)}
 							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,37 +12353,34 @@ $: 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)
@@ -11740,7 +12395,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>
@@ -11754,24 +12409,23 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 					</Button>
 
 					{#if isPublishDisabledForPanel(panelWidgetId) && shouldShowPublishDisabledHintForPanel(panelWidgetId)}
-						<p class="publish-widget-disabled-hint text-xs text-center text-emerald-800/80 leading-relaxed px-1">
+						<p class="publish-widget-disabled-hint text-[10px] text-center text-emerald-800/80 leading-snug px-1">
 							{getPublishDisabledReasonForPanel(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 +12438,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 +12496,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 +12692,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 +12981,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 +12999,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"