@widgetic/creator 0.3.49 → 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);
@@ -110,10 +116,35 @@
 		onWidgetRenamed?.({ widgetId: widget.id, name });
 	}
 
+	/**
+	 * Rewrite the embedded URL so a refresh resumes the current canvas instead of
+	 * re-running the new-widget bootstrap (which creates a blank canvas every time).
+	 * Uses history.replaceState — no navigation, no host remount.
+	 */
+	function syncEmbeddedCanvasUrl(canvasIdToSync: string): void {
+		if (!embedded || !canvasIdToSync) return;
+		try {
+			const url = new URL(window.location.href);
+			url.searchParams.set('canvas_id', canvasIdToSync);
+			url.searchParams.delete('new_widget');
+			window.history.replaceState(window.history.state, '', url.toString());
+			console.log('[CreatorApp] URL synced to canvas:', canvasIdToSync);
+		} catch (err) {
+			console.warn('[CreatorApp] Failed to sync canvas URL:', err);
+		}
+	}
+
 	const HOST_WIDGET_RENAMED_EVENT = 'widgetic:host-widget-renamed';
 	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> {
@@ -293,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);
@@ -347,7 +410,14 @@
 	let WidgetDetails: any;
 	let widgetDetailsRefs: Record<string, any> = {};
 	let openWidgetPanelIds: string[] = [];
+	/** Stable {#each} keys so draft → real widget does not remount Widget Details. */
+	let panelInstanceKeyByWidgetId: Record<string, string> = {};
 	let focusedPanelWidgetId: string | null = null;
+	/** Ignore WidgetDetails close events while swapping draft → real widget id. */
+	let suppressWidgetDetailsClose = false;
+	/** Latest user-requested details panel — delayed screenshot/deep-link must not reopen another widget. */
+	let widgetDetailsOpenGen = 0;
+	let widgetDetailsOpenTargetId: string | null = null;
 
 	// Lightweight static imports from canvas (excludes Canvas.svelte — 10K+ lines)
 	import { Tooltip } from '@widgetic/canvas/components';
@@ -487,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) => {
@@ -505,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' });
@@ -600,6 +677,8 @@
 	const DEFAULT_PROMPT = 'Create a simple widget.';
 	const IMAGE_WIDGET_PROMPT =
 		'Create a widget from the attached image (short description inside).';
+	/** Prefilled prompt for Convert-to-Widget — user edits or presses Send to start. */
+	const CONVERT_PROMPT = 'Create a widget starting from the attached image';
 	let codeGenerationPrompt = DEFAULT_PROMPT;
 	let isGeneratingCode = false;
 	let generatingWidgetIds: Record<string, boolean> = {};
@@ -622,6 +701,18 @@
 	/** Widget targeted by the open confirm-generate dialog (may differ from focused panel). */
 	let confirmGenerateWidgetId: string | null = null;
 
+	// ─── Convert UX v2: draft panel state (no widget record until first Send) ────
+	/** Synthetic id for the draft convert panel — NOT a widget id in the DB. */
+	const DRAFT_CONVERT_ID_PREFIX = 'draft_convert_';
+	/** Canvas object ids (group or selection id) captured at convert time, per draft id. */
+	const draftConvertObjectIds = new Map<string, string>();
+	/** Captured sketch screenshot (data URL) per draft id — reused on first Send. */
+	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: {
 		sendMessage: (content: string, attachments?: File[]) => Promise<void>;
@@ -639,10 +730,19 @@
 		markWidgetHeadAtLatestCommit?: () => void;
 		updateLatestCodegenStatusMessage?: (content: string) => void;
 		reloadConversationMessages?: () => Promise<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 = '';
 	let chatDraftRestoredForWidgetId: string | null = null;
+	/**
+	 * Monotonic generation counter for loadPromptForWidget. Each load increments it;
+	 * when the async draft read resolves, a changed counter means another load or an
+	 * explicit prompt set (e.g. convert flow) happened meanwhile — the stale result
+	 * must NOT clobber the newer prompt state (race behind feedback b).
+	 */
+	let loadPromptGeneration = 0;
 	/** Skip draft→prompt sync while restoring chat draft (avoids clearing promptImages). */
 	let suppressChatDraftSync = false;
 
@@ -653,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,
 		);
 	}
@@ -662,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);
@@ -689,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');
@@ -699,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,
 			{
@@ -706,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 },
@@ -743,8 +847,29 @@
 			content.substring(0, 80),
 		);
 
-		const panelChat = getChatMethodsForWidget(widgetId);
+		// Convert UX v2: the first prompt send of a draft panel creates the widget
+		// (DB + component + repo), replaces the sketch with a WidgetShape, and
+		// repoints the panel to the real widget id. Generation continues below.
+		let codegenWidgetId = widgetId;
+		if (isDraftConvertId(widgetId)) {
+			const finalizedWidgetId = await finalizeDraftConversion(widgetId, content);
+			if (!finalizedWidgetId) {
+				console.warn('[Chat→CodeGen] Draft conversion failed — message not sent to codegen');
+				return;
+			}
+			codegenWidgetId = finalizedWidgetId;
+			// Re-point the chat draft the user just typed onto the real widget panel.
+			const newPanelChat = getChatMethodsForWidget(finalizedWidgetId);
+			newPanelChat?.setDraftText?.(content);
+			const newPanelChatAttach = getPanelState(finalizedWidgetId).promptImages ?? [];
+			for (const imageDataUrl of newPanelChatAttach) {
+				newPanelChat?.addImageAttachment?.(imageDataUrl, 'design-screenshot.png');
+			}
+		}
+
+		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));
 
@@ -768,20 +893,20 @@
 		}
 
 		if (panelPromptImages.length > 0) {
-			patchPanelSnapshot(widgetId, { promptImages: panelPromptImages });
-			if (widgetId === focusedPanelWidgetId) {
+			patchPanelSnapshot(codegenWidgetId, { promptImages: panelPromptImages });
+			if (codegenWidgetId === focusedPanelWidgetId) {
 				promptImages = panelPromptImages;
 			}
 		}
 
 		// Clear chat input immediately so thumbnails do not linger after Send
 		panelChat?.clearDraft?.();
-		void deleteWidgetDraft(widgetId).catch(() => {
+		void deleteWidgetDraft(codegenWidgetId).catch(() => {
 			// Also drop the legacy localStorage copies if the durable clear fails.
 			try {
-				localStorage.removeItem(PROMPT_IMAGES_STORAGE_PREFIX + widgetId);
-				localStorage.removeItem(CHAT_DRAFT_STORAGE_PREFIX + widgetId);
-				localStorage.removeItem(PROMPT_TEXT_STORAGE_PREFIX + widgetId);
+				localStorage.removeItem(PROMPT_IMAGES_STORAGE_PREFIX + codegenWidgetId);
+				localStorage.removeItem(CHAT_DRAFT_STORAGE_PREFIX + codegenWidgetId);
+				localStorage.removeItem(PROMPT_TEXT_STORAGE_PREFIX + codegenWidgetId);
 				localStorage.removeItem(PROMPT_IMAGES_STORAGE_KEY);
 			} catch {
 				/* ignore */
@@ -791,28 +916,69 @@
 		const effectivePromptImages =
 			panelPromptImages.length > 0
 				? panelPromptImages
-				: widgetId === focusedPanelWidgetId
+				: codegenWidgetId === focusedPanelWidgetId
 					? promptImages
-					: getPanelState(widgetId).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,
 			fromChat: true,
-			widgetId,
+			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;
@@ -823,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) {
@@ -891,12 +1103,63 @@
 			: prompt;
 	}
 
-	/** Persist the user prompt to DB only when generation actually starts. */
-	async function ensureCodegenUserMessagePersisted(widgetId: string, prompt: string): Promise<void> {
+	/**
+	 * Persist the user prompt to DB only when generation actually starts.
+	 * Writes into the conversation the panel Chat is currently showing (or the
+	 * newest one) so the visible chat and the codegen context never diverge —
+	 * a remounted Chat shows whatever conversation activateBestConversation
+	 * picked, which may differ from convos[0] when several empty conversations
+	 * exist (feedback c: chat looked empty while messages went elsewhere).
+	 */
+	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 {
-			let convos = await handleLoadConversations(widgetId);
-			let convId = convos?.[0]?.id;
+			const panelChat = getChatMethodsForWidget(widgetId);
+			const visibleConversationId =
+				panelChat?.getConversationId?.() ??
+				getPanelState(widgetId).currentChatConversationId ??
+				null;
+			const convos = await handleLoadConversations(widgetId);
+			let convId =
+				(visibleConversationId && convos?.some((c) => c.id === visibleConversationId))
+					? visibleConversationId
+					: convos?.[0]?.id;
 			if (!convId) {
 				const widget = getWidgetById(widgetId);
 				const convTitle = widget?.name ? `Convert: ${widget.name}` : 'Widget conversion';
@@ -905,13 +1168,112 @@
 			}
 			if (!convId) return;
 
-			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);
@@ -936,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);
 
@@ -962,8 +1333,27 @@
 		});
 	}
 	
+	function normalizeConversationRecords(json: any): any[] {
+		const raw = json?.data ?? json?.conversations ?? json;
+		const list = Array.isArray(raw)
+			? raw
+			: Array.isArray(raw?.data)
+				? raw.data
+				: [];
+		return list
+			.map((c: any) => ({
+				...c,
+				id: c?.id || c?.conversation_id || c?.conversationId,
+			}))
+			.filter((c: any) => !!c.id);
+	}
+
 	/** Load conversations for a widget from backend. Returns null when client/API is unavailable (not an empty list). */
 	async function handleLoadConversations(contextId: string): Promise<any[] | null> {
+		// Draft convert panels have no DB widget — return an empty list so the
+		// Chat initializes cleanly (creates a local conversation) instead of
+		// showing the "Could not load chat history" error after 4 retries.
+		if (isDraftConvertId(contextId)) return [];
 		try {
 			if (!conversationsClient) {
 				console.warn('[Chat→Backend] conversationsClient not initialized');
@@ -971,11 +1361,13 @@
 			}
 			const response = await conversationsClient.getConversationsByWidgetIdRaw({
 				widgetId: contextId,
-				sort: 'created_at:desc'
+				sort: 'created_at:desc',
+				size: 100,
 			});
 			const json = await response.raw.json();
-			console.log('[Chat→Backend] Loaded conversations for widget:', contextId, json?.data?.length || 0);
-			return json?.data || [];
+			const conversations = normalizeConversationRecords(json);
+			console.log('[Chat→Backend] Loaded conversations for widget:', contextId, conversations.length);
+			return conversations;
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to load conversations:', error);
 			return null;
@@ -1026,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) {
@@ -1066,61 +1472,112 @@
 				return { id: crypto.randomUUID(), title };
 			}
 			const response = await conversationsClient.createConversationForWidgetRaw({
-				widgetId: contextId,
-				title
+				createConversationForWidgetRequest: {
+					widget_id: contextId,
+					title,
+				},
 			});
 			const json = await response.raw.json();
 			const conversation = json?.data || json;
-			console.log('[Chat→Backend] Created conversation:', conversation?.id);
-			return conversation;
+			const conversationId = conversation?.id || conversation?.conversation_id || conversation?.conversationId;
+			console.log('[Chat→Backend] Created conversation:', conversationId);
+			return conversationId ? { ...conversation, id: conversationId } : conversation;
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to create conversation:', error);
 			return { id: crypto.randomUUID(), title };
 		}
 	}
 
-	/** 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,
 			});
@@ -1135,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) {
@@ -1152,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',
@@ -1167,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);
@@ -1358,10 +1820,6 @@
 		live: Partial<WidgetPanelSnapshot>
 	): string | null {
 		const stored = loadCommitIdForWidget(widgetId);
-		// Prefer in-session sources first; localStorage last (often stale after publish).
-		const ordered = [live.lastCommitId, snap.lastCommitId, stored].filter(
-			(sha): sha is string => typeof sha === 'string' && sha.length > 0
-		);
 
 		const publishedVersion = live.lastPublishedVersion ?? snap.lastPublishedVersion ?? null;
 		let liveSha: string | null = null;
@@ -1379,8 +1837,18 @@
 		}
 
 		if (liveSha) {
-			const ahead = ordered.find((candidate) => !commitsMatch(candidate, liveSha));
-			if (ahead) return ahead;
+			const sessionOrdered = [live.lastCommitId, snap.lastCommitId].filter(
+				(sha): sha is string => typeof sha === 'string' && sha.length > 0
+			);
+			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;
+			return liveSha;
 		}
 
 		return live.lastCommitId ?? snap.lastCommitId ?? stored ?? null;
@@ -1435,18 +1903,21 @@
 	let editingCompositionName = '';
 	let deletingCompositionId: string | null = null;
 
-	/** Default chat container height (px) per Widget Details panel. */
-	const DEFAULT_CHAT_CONTAINER_HEIGHT = 550;
+	/** 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 });
 	}
 
@@ -1805,7 +2276,11 @@
 				compositionSchemasError = schemaError;
 			}
 			if (designSchema || contentSchema) {
-				queueMicrotask(() => loadCompositionsForPanel(widgetId));
+				queueMicrotask(() => {
+					void loadCompositionsForPanel(widgetId).then(() => {
+						applyPanelCompositionToPreview(widgetId);
+					});
+				});
 			}
 		} finally {
 			schemaLoadInFlight.delete(widgetId);
@@ -1843,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 */
@@ -1926,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) {
@@ -2052,11 +2550,15 @@
 
 	/** Handle content items reorder/add/delete from PropsEditor */
 	function handleEditorContentItemsChanged(event: CustomEvent<{ items: unknown[] }>) {
-		liveContentItems = event.detail.items;
+		const incoming = Array.isArray(event.detail.items) ? event.detail.items : [];
+		const schemaItems = compositionContentSchema?.contentItems
+			?? compositionContentSchema?.data?.contentItems
+			?? [];
+		liveContentItems = mergeContentItemsWithSchema(incoming, schemaItems);
 		console.log('[PropsEditor→Preview] Content items changed:', liveContentItems.length, 'items');
 		getWidgetDetailsRef(focusedPanelWidgetId)?.sendMessageToPreview({
 			type: 'widgetic:update',
-			contentItems: liveContentItems
+			contentItems: flattenContentItemsForPreview(liveContentItems)
 		});
 		compositionDirty = true;
 		syncFocusedPanelEditorSnapshot();
@@ -2470,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)
+			});
 		}
 	}
 
@@ -2708,7 +3213,7 @@
 	// Default coder: host prop (site embed) wins. Fallback Flash for speed.
 	const hostCoderModelId = (defaultCoderModelId || '').trim() || null;
 	const hostPlannerModelId = (defaultPlannerModelId || '').trim() || null;
-	let defaultModelId = hostCoderModelId || 'deepseek-v4-flash';
+	let defaultModelId = hostCoderModelId || 'zhipu-glm-5.3-flash';
 	
 	// Available LLM models for code generation
 	interface LLMModelOption {
@@ -2716,17 +3221,19 @@
 		name: string;
 		provider: string;
 		description: string;
+		supportsVision?: boolean;
 	}
 	
 	// Default fallback models in case API fails (one from each provider)
 	const fallbackModels: LLMModelOption[] = [
-		{ id: 'deepseek-v4-pro', name: 'DeepSeek V4 Pro', provider: 'DeepSeek', description: 'Frontier coding model, 1M context' },
-		{ id: 'deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'DeepSeek', description: 'Fast and cost-efficient' },
-		{ id: 'openai-gpt-5.4', name: 'GPT-5.4 (OpenAI)', provider: 'OpenAI', description: 'Affordable model for coding' },
-		{ id: 'openai-gpt-5.5', name: 'GPT-5.5 (OpenAI)', provider: 'OpenAI', description: 'Frontier model for complex work' },
-		{ id: 'openai-codex-3.2', name: 'Codex 3.2 (OpenAI)', provider: 'OpenAI', description: 'Coding-specialized model' },
-		{ id: 'gemini-3-flash', name: 'Gemini 3 Flash (Google)', provider: 'Google', description: 'Google\'s fast Gemini model' },
-		{ id: 'anthropic-claude-sonnet-4.6', name: 'Claude Sonnet 4.6 (Anthropic)', provider: 'Anthropic', description: 'Best balance of intelligence, speed, and cost' },
+		{ id: 'zhipu-glm-5.3-flash', name: 'GLM 5.3 Flash (Z.ai)', provider: 'Zhipu', description: 'Cheapest vision + coding model', supportsVision: true },
+		{ id: 'deepseek-v4-pro', name: 'DeepSeek V4 Pro', provider: 'DeepSeek', description: 'Frontier coding model, 1M context', supportsVision: false },
+		{ id: 'deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'DeepSeek', description: 'Fast and cost-efficient', supportsVision: false },
+		{ id: 'openai-gpt-5.4', name: 'GPT-5.4 (OpenAI)', provider: 'OpenAI', description: 'Affordable model for coding', supportsVision: true },
+		{ id: 'openai-gpt-5.5', name: 'GPT-5.5 (OpenAI)', provider: 'OpenAI', description: 'Frontier model for complex work', supportsVision: true },
+		{ id: 'openai-codex-3.2', name: 'Codex 3.2 (OpenAI)', provider: 'OpenAI', description: 'Coding-specialized model', supportsVision: false },
+		{ id: 'gemini-3-flash', name: 'Gemini 3 Flash (Google)', provider: 'Google', description: 'Google\'s fast Gemini model', supportsVision: true },
+		{ id: 'anthropic-claude-sonnet-4.6', name: 'Claude Sonnet 4.6 (Anthropic)', provider: 'Anthropic', description: 'Best balance of intelligence, speed, and cost', supportsVision: true },
 	];
 	
 	// Models loaded from API (single source of truth)
@@ -2744,11 +3251,12 @@
 			// SDK returns { success, models } directly (not nested under data)
 			if (response.success && Array.isArray(response.models)) {
 				// Transform API response to match our interface
-				availableModels = response.models.map((m: { id: string; displayName: string; provider: string; description: string }) => ({
+				availableModels = response.models.map((m: { id: string; displayName: string; provider: string; description: string; supportsVision?: boolean }) => ({
 					id: m.id,
 					name: m.displayName,
 					provider: m.provider.charAt(0).toUpperCase() + m.provider.slice(1), // Capitalize provider
-					description: m.description
+					description: m.description,
+					supportsVision: m.supportsVision === true,
 				}));
 				
 				// Model LIST comes from API. UI defaults come from host props when provided.
@@ -2787,7 +3295,7 @@
 	
 	// Planner model — separate model for prompt enhancement pre-call (debug mode only)
 	// Empty string = user chose "None (always skip)". Non-empty = preferred planner when auto-heuristics enable it.
-	defaultPlannerModelId = hostPlannerModelId || 'openai-gpt-5.5';
+	defaultPlannerModelId = hostPlannerModelId || 'zhipu-glm-5.3-flash';
 	let userSelectedPlannerModelId = defaultPlannerModelId;
 	
 	// Debug ON → dropdown (starts at host default). Debug OFF → host/fallback default.
@@ -2801,14 +3309,24 @@
 		return false;
 	}
 
-	function resolvePlannerModelIdForGeneration(prompt: string): string | undefined {
-		if (isProduction || !debugMode) return undefined;
-		if (userSelectedPlannerModelId === '') {
+	function resolvePlannerModelIdForGeneration(prompt: string, coderIdForRequest?: string): string | undefined {
+		if (debugMode && userSelectedPlannerModelId === '') {
 			console.log('[WidgetCreator] Planner skipped (manual None)');
 			return undefined;
 		}
 
-		const preferredPlannerId = userSelectedPlannerModelId || defaultPlannerModelId;
+		const preferredPlannerId = debugMode
+			? (userSelectedPlannerModelId || defaultPlannerModelId)
+			: defaultPlannerModelId;
+		const selectedCoderId = debugMode ? (userSelectedModelId || defaultModelId) : defaultModelId;
+		const coderId = coderIdForRequest || selectedCoderId;
+		if (!preferredPlannerId || preferredPlannerId === selectedCoderId || preferredPlannerId === coderId) {
+			console.log('[WidgetCreator] Planner skipped (same model as coder — one LLM call)', {
+				planner: preferredPlannerId,
+				coder: coderId,
+			});
+			return undefined;
+		}
 		const widgetHasCode = !!(lastCommitId || lastPublishedVersion);
 
 		if (!widgetHasCode) {
@@ -2866,6 +3384,125 @@
 		toggleDebugMode();
 	}
 
+	let canvasWireframeMode = true;
+	/** Extra canvas chrome — default off. Not tied to debugMode. */
+	let canvasAdvancedFeatures = !!initialAdvancedFeatures;
+	let canvasPrimaryWidgetId: string | null = null;
+
+	function emitCreatorWireframeChanged() {
+		if (typeof window === 'undefined') return;
+		window.dispatchEvent(
+			new CustomEvent(CREATOR_WIREFRAME_CHANGED_EVENT, {
+				detail: { wireframeMode: canvasWireframeMode }
+			})
+		);
+	}
+
+	function handleHostToggleWireframeEvent() {
+		canvasWireframeMode = !canvasWireframeMode;
+		console.log('[CreatorApp] Wireframe mode:', canvasWireframeMode ? 'ON' : 'OFF');
+		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;
+		return id;
+	}
+
+	function handleHostOpenWidgetDetailsEvent(): void {
+		const widgetId = resolveHostTargetWidgetId();
+		if (!widgetId) {
+			showToast('warning', 'Select a widget first', {
+				description: 'Click a widget on the canvas, then use Edit to open Widget Details.',
+			});
+			return;
+		}
+		console.log('[CreatorApp] Host Edit — opening Widget Details', widgetId.substring(0, 8));
+		void openWidgetDetailsPanel(widgetId);
+	}
+
+	async function handleHostDuplicateWidgetEvent(): Promise<void> {
+		const widgetId = resolveHostTargetWidgetId();
+		if (!widgetId || !canvasRef) {
+			showToast('warning', 'Select a widget first', {
+				description: 'Click the widget on the canvas, then Duplicate.',
+			});
+			return;
+		}
+		canvasRef.selectWidgetShape?.(widgetId);
+		if (typeof canvasRef.duplicateSelectedObjects === 'function') {
+			await canvasRef.duplicateSelectedObjects();
+			return;
+		}
+		showToast('error', 'Cannot duplicate widget', { description: 'Canvas duplicate is not available' });
+	}
+
+	async function handleHostDeleteWidgetEvent(): Promise<void> {
+		const widgetId = resolveHostTargetWidgetId();
+		if (!widgetId) {
+			showToast('warning', 'Select a widget first');
+			return;
+		}
+		if (canvasRef?.selectWidgetShape?.(widgetId) && typeof canvasRef.deleteSelectedObjects === 'function') {
+			await canvasRef.deleteSelectedObjects();
+			return;
+		}
+		const widgetName = getWidgetById(widgetId)?.name || 'Widget';
+		const result = await showDeleteWidgetDialog(widgetId, widgetName);
+		if (result.proceed) {
+			await deleteWidgetFromDb(widgetId);
+		}
+	}
+
+	async function persistPrimaryWidgetId(widgetId: string) {
+		if (!widgetId) return;
+		canvasPrimaryWidgetId = widgetId;
+		console.log('[CreatorApp] Set primary widget:', widgetId);
+		if (canvasId && canvasesClient) {
+			try {
+				await canvasesClient.updateCanvas({
+					id: canvasId,
+					updateCanvasRequest: { primaryWidgetId: widgetId }
+				});
+			} catch (err) {
+				console.warn('[CreatorApp] Failed to save primary_widget_id:', err);
+			}
+		}
+		const widget = getWidgetById(widgetId);
+		if (widget) notifyHostWidgetName(widget);
+		if (embedded && typeof window !== 'undefined') {
+			try {
+				const url = new URL(window.location.href);
+				if (url.searchParams.get('widget_id') !== widgetId) {
+					url.searchParams.set('widget_id', widgetId);
+					window.history.replaceState({}, '', url.pathname + url.search + url.hash);
+				}
+			} catch (err) {
+				console.warn('[CreatorApp] Failed to sync primary widget_id in URL:', err);
+			}
+		}
+	}
+
+	function handleSetPrimaryWidget(widgetId: string) {
+		void persistPrimaryWidgetId(widgetId);
+	}
+
 	// Preview Modal State Variables
 	let previewIframe: HTMLIFrameElement | null = null;
 	const { DEV: isDevMode } = import.meta.env;
@@ -3325,7 +3962,7 @@
 				const getCanvasName = (c: any): string =>
 					c.persistenceKey || c.name || c.id?.substring(0, 8) || 'Untitled';
 				const hasCanvasContent = (c: any): boolean =>
-					!!c.canvasContent;
+					!!(c.canvasContent || c.canvas_content);
 
 				userCanvases = rows
 					.map((c: any) => ({
@@ -3367,12 +4004,22 @@
 			}
 
 			// Load canvas shapes first, then hydrate widget metadata from shapes + canvas_id
-			const { widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
+			const { loaded, widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
 			await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 			await maybeAutoRestoreWidgetShapes();
 			// Backfill widget name + thumbnail on shapes that were saved before those
 			// fields existed on WidgetShape (fixes "Widget" placeholder on old canvases).
 			backfillWidgetShapeMetadata();
+			if (loaded && canvasRef) {
+				const primaryId =
+					canvasPrimaryWidgetId ||
+					canvasRef.getPrimaryWidgetId?.() ||
+					selectedWidgetId;
+				if (primaryId && !isConvertOrDraftPanelOpen()) {
+					canvasRef.setPrimaryWidgetShape?.(primaryId);
+					canvasRef.selectWidgetShape(primaryId);
+				}
+			}
 		} catch (error) {
 			console.error('Widget Creator: Load canvases error:', error);
 			const defaultError = 'Failed to load canvases';
@@ -3714,34 +4361,30 @@
 		selectedWidgetId = null;
 		selectedWidget = null;
 		beginBlankCanvasSession('site New widget');
-		console.log('[CreatorApp] Creating empty canvas + Untitled widget for site New widget');
+		console.log('[CreatorApp] New widget: blank canvas only — widget record is created on Convert (F3)');
 		const clientsReady = await waitForAuthenticatedCanvasClient();
 		if (!clientsReady) {
-			console.error('[CreatorApp] Auth/clients not ready — Untitled widget without new canvas row');
+			console.error('[CreatorApp] Auth/clients not ready — blank canvas without new canvas row');
 		} else {
 			const newCanvasId = await createNewCanvas({ skipSaveCurrent: true });
 			if (!newCanvasId) {
 				showToast('error', 'Could not create a blank canvas', {
-					description: 'The Untitled widget was still created. Avoid using the previous canvas shapes.',
+					description: 'Try reloading the page to get a fresh canvas.',
 					duration: 8000
 				});
+			} else {
+				// Replace `new_widget=1` with the concrete canvas_id so a page refresh
+				// reloads THIS canvas (and its sketch) instead of re-running the
+				// new-widget bootstrap and creating yet another blank canvas row.
+				syncEmbeddedCanvasUrl(newCanvasId);
 			}
 		}
-		await createNewWidgetRecord();
-		const canvasReady = await waitForCanvasReadyToPlaceShape();
-		if (canvasReady) {
-			placeSelectedWidgetShapeOnCanvas();
-		} else {
-			canvasRef?.onClearAllObjects();
-			relinkSelectedWidgetShape();
-		}
-		lastSavedCanvasObjectCount = canvasRef ? 1 : 0;
+		// F3: New-widget flow starts with an EMPTY canvas — no widget record, no
+		// WidgetShape, no auto-opened Widget Details. The widget record is created
+		// only when the user sketches something and clicks "Convert to Widget".
+		lastSavedCanvasObjectCount = 0;
 		markCanvasStateLoaded();
 		isLoadingWidgets = false;
-		if (selectedWidgetId) {
-			console.log('[CreatorApp] Opening Widget Details for new Untitled widget');
-			await openWidgetDetailsPanel(selectedWidgetId);
-		}
 		setTimeout(() => {
 			ignoreIncomingCanvasLoads = false;
 			console.log('[CreatorApp] New-widget canvas lock released');
@@ -3929,6 +4572,16 @@
 
 	/** Re-create widget shapes when canvas_content is empty but widgets exist for canvas_id. */
 	async function maybeAutoRestoreWidgetShapes(): Promise<void> {
+		// F3: New-widget sessions start intentionally empty — never auto-restore
+		// shapes for the freshly created Untitled widget.
+		if (didForceCreateNewWidget) {
+			canvasShapesMissingWarning = false;
+			return;
+		}
+		if (!isCanvasStateLoaded) {
+			console.log('[CanvasDebug] maybeAutoRestore skipped — canvas JSON not loaded yet');
+			return;
+		}
 		if (lastSavedCanvasObjectCount !== 0 || widgets.length === 0) {
 			canvasShapesMissingWarning = false;
 			return;
@@ -4170,22 +4823,97 @@
 		return initialWidgetId ?? null;
 	}
 
+	/**
+	 * Canvas-only embed deep-link (My widgets / canvas without widget_id):
+	 * read canvases.primary_widget_id so Creator can open that widget panel.
+	 */
+	async function resolvePrimaryWidgetIdForCanvas(targetCanvasId: string): Promise<string | null> {
+		if (!canvasesClient || !targetCanvasId?.trim()) return null;
+		try {
+			const canvasRecord = await canvasesClient.getCanvas({ id: targetCanvasId });
+			const record =
+				(canvasRecord as { data?: Record<string, unknown> })?.data ??
+				(canvasRecord as Record<string, unknown>);
+			const raw =
+				(record as { primaryWidgetId?: unknown })?.primaryWidgetId ??
+				(record as { primary_widget_id?: unknown })?.primary_widget_id ??
+				null;
+			const primaryId = typeof raw === 'string' && raw.trim() ? raw.trim() : null;
+			if (primaryId) {
+				canvasPrimaryWidgetId = primaryId;
+				console.log(
+					'[CreatorApp] Resolved primary widget for canvas',
+					targetCanvasId.substring(0, 8),
+					'→',
+					primaryId.substring(0, 8)
+				);
+			} else {
+				console.log(
+					'[CreatorApp] No primary_widget_id on canvas',
+					targetCanvasId.substring(0, 8)
+				);
+			}
+			return primaryId;
+		} catch (err) {
+			console.warn(
+				'[CreatorApp] Failed to resolve primary_widget_id for canvas',
+				targetCanvasId.substring(0, 8),
+				err
+			);
+			return null;
+		}
+	}
+
 	/** Fetch widget by id from site deep-link (My widgets → Edit / New Composition). */
 	async function ensureEmbeddedWidgetDeepLink(): Promise<void> {
 		syncEmbeddedDeepLinkDismissTracking();
-		const deepLinkWidgetId = resolveEmbeddedDeepLinkWidgetId();
-		if (!embedded || !deepLinkWidgetId || !widgetsClient || !hasValidToken) return;
+		if (!embedded || !widgetsClient || !hasValidToken) return;
 		if (embeddedDeepLinkPanelDismissed) {
+			const dismissedId = resolveEmbeddedDeepLinkWidgetId();
 			console.log(
-				'[CreatorApp] Skip embedded deep-link open — user dismissed panel:',
-				deepLinkWidgetId.substring(0, 8)
+				'[CreatorApp] Skip embedded deep-link select — user dismissed panel:',
+				dismissedId ? dismissedId.substring(0, 8) : '(none)'
 			);
 			return;
 		}
-		// Auto-open only once per Creator mount (initial My widgets → Edit). Shape/sidebar clicks open explicitly.
+		// Select primary widget once per Creator mount. Do not auto-open Widget Details.
 		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.
+		if (!deepLinkWidgetId && canvasesClient) {
+			const targetCanvasId =
+				(typeof canvasId === 'string' && canvasId.trim() ? canvasId.trim() : null) ||
+				(typeof sessionCanvasId === 'string' && sessionCanvasId.trim() ? sessionCanvasId.trim() : null) ||
+				(typeof routeCanvasId === 'string' && routeCanvasId.trim() ? routeCanvasId.trim() : null);
+			if (targetCanvasId) {
+				deepLinkWidgetId = await resolvePrimaryWidgetIdForCanvas(targetCanvasId);
+				if (embeddedDeepLinkPanelDismissed || embeddedDeepLinkAutoOpenDone) {
+					return;
+				}
+				// Align address-bar widget_id so header / dismiss tracking match the opened panel.
+				if (deepLinkWidgetId && typeof window !== 'undefined') {
+					try {
+						const url = new URL(window.location.href);
+						if (url.searchParams.get('widget_id') !== deepLinkWidgetId) {
+							url.searchParams.set('widget_id', deepLinkWidgetId);
+							window.history.replaceState({}, '', url.pathname + url.search + url.hash);
+							syncEmbeddedDeepLinkDismissTracking();
+						}
+					} catch (err) {
+						console.warn('[CreatorApp] Failed to sync primary widget_id in URL:', err);
+					}
+				}
+			}
+		}
+		if (!deepLinkWidgetId) return;
 
 		const requestGen = ++embeddedDeepLinkRequestGen;
 
@@ -4205,8 +4933,8 @@
 				embeddedInitialStepPending = false;
 			}
 			embeddedDeepLinkAutoOpenDone = true;
-			if (!openWidgetPanelIds.includes(deepLinkWidgetId) && deepLinkOpenStillValid()) {
-				await openWidgetDetailsPanel(deepLinkWidgetId);
+			if (canvasRef && deepLinkWidgetId) {
+				canvasRef.selectWidgetShape(deepLinkWidgetId);
 			}
 			return;
 		}
@@ -4245,11 +4973,12 @@
 			}
 
 			embeddedDeepLinkAutoOpenDone = true;
-			// Open Widget Details immediately — do not wait on canvas JSON load
-			// (large canvases can keep "Loading canvas…" up and leave the panel hidden).
-			await selectWidget(target);
+			// Select the primary widget (and its canvas shape) — do not open Widget Details.
+			await selectWidget(target, { skipLoadWidget: true, skipPlaceShape: true });
 			if (!deepLinkOpenStillValid()) return;
-			await openWidgetDetailsPanel(target.id);
+			if (canvasRef) {
+				canvasRef.selectWidgetShape(target.id);
+			}
 			if (embeddedInitialStepPending && initialStep) {
 				widgetDetailsStep = initialStep;
 				embeddedInitialStepPending = false;
@@ -4278,7 +5007,8 @@
 	 */
 	async function syncWidgetsWithCanvas(widgetIdsFromCanvasContent: string[] = []) {
 		if (!canvasId) {
-			if (embedded && resolveEmbeddedDeepLinkWidgetId()) {
+			// Widget-only or canvas-primary deep-link (ensure resolves primary when widget_id absent).
+			if (embedded) {
 				await ensureEmbeddedWidgetDeepLink();
 			}
 			return;
@@ -4291,7 +5021,7 @@
 		if (shapeWidgetIds.length > 0) {
 			await mergeWidgetsLinkedOnCanvas(shapeWidgetIds);
 		}
-		if (embedded && resolveEmbeddedDeepLinkWidgetId()) {
+		if (embedded) {
 			await ensureEmbeddedWidgetDeepLink();
 		}
 	}
@@ -4312,7 +5042,7 @@
 		loadCurrentCanvas();
 	}
 
-	async function selectWidget(widget: WidgetSummary | null, options: { skipLoadWidget?: boolean; skipEditorContextReset?: boolean } = {}) {
+	async function selectWidget(widget: WidgetSummary | null, options: { skipLoadWidget?: boolean; skipEditorContextReset?: boolean; skipPlaceShape?: boolean } = {}) {
 		try {
 			// Save the current widget's prompt before switching away
 			if (selectedWidgetId) {
@@ -4367,7 +5097,7 @@
 			syncFileBrowserUploadConfigForCreator();
 
 			// Select the linked canvas shape; if none exists, create one (empty canvas + Untitled).
-			if (widget?.id && canvasRef) {
+			if (widget?.id && canvasRef && !options.skipPlaceShape) {
 				const found = canvasRef.selectWidgetShape(widget.id);
 				if (!found) {
 					const anyW = widget as unknown as { thumbnail_url?: string | null; thumbnailUrl?: string | null };
@@ -4566,10 +5296,11 @@
 		if (!headSha) return;
 		if (currentPanelLastCommit && commitsMatch(currentPanelLastCommit, headSha)) return;
 		console.log(`[Version] Repo HEAD probe for "${widgetId}": ${headSha.substring(0, 8)} (was ${currentPanelLastCommit?.substring(0, 8) ?? 'null'})`);
-		patchPanelSnapshot(widgetId, { lastCommitId: headSha });
+		patchPanelSnapshot(widgetId, { lastCommitId: headSha, hasGeneratedCode: true });
 		saveCommitIdForWidget(widgetId, headSha);
 		if (widgetId === focusedPanelWidgetId) {
 			lastCommitId = headSha;
+			hasGeneratedCode = true;
 		}
 	}
 
@@ -4632,7 +5363,9 @@
 				lastPublishedVersion,
 				currentRepositoryId,
 				selectedWidgetJsPath,
+				...(lastCommitId ? { hasGeneratedCode: true } : {}),
 			});
+			if (lastCommitId) hasGeneratedCode = true;
 			if (lastPublishedVersion !== null) {
 				// Load history against the specific widget id (not selectedWidgetId) so the
 				// panel snapshot is guaranteed to be marked publishHistoryResolved even if the
@@ -4646,10 +5379,9 @@
 					publishHistoryResolvedForWidgetId: widget.id,
 				});
 			}
-			// Background probe: reconcile local lastCommitId with GitLab HEAD so the Edit banner
-			// ("Newer code than Live") is accurate even when the client has no cached commit SHA
-			// (fresh session, different machine, or codegen happened outside this tab).
-			if (lastPublishedVersion !== null) {
+			// Reconcile GitLab HEAD whenever we have a repo — unpublished widgets
+			// also need lastCommitId so Create preview is not stuck on "No Code Yet".
+			if (currentRepositoryId) {
 				void reconcileWidgetHeadCommit(widget.id);
 			}
 		}
@@ -4919,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;
 						}
 
@@ -4962,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;
@@ -5238,9 +5962,23 @@
 	 * Returns the default prompt if no stored prompt is found.
 	 */
 	async function loadPromptForWidget(widgetId: string) {
+		// Draft convert panels keep their prefilled prompt — nothing stored to load.
+		if (isDraftConvertId(widgetId)) return;
 		try {
+			// Guard against the convert-flow race: selectWidget fires this loader
+			// without awaiting it; the convert flow then sets the real prompt +
+			// screenshot right after `await selectWidget(...)` returns. The draft
+			// read below resolves LATER and would clobber the fresh prompt with
+			// DEFAULT_PROMPT (feedback b). Skip when a newer load for this widget
+			// has already been superseded by an explicit prompt set.
+			loadPromptGeneration += 1;
+			const loadGeneration = loadPromptGeneration;
 			// Restore from the durable L1 draft store (legacy localStorage fallback)
 			const draft = await readWidgetDraft(widgetId);
+			if (loadGeneration !== loadPromptGeneration) {
+				console.log('[Prompt] Skipped stale load for widget', widgetId.substring(0, 8), '— a newer prompt state was applied');
+				return;
+			}
 			codeGenerationPrompt = draft?.promptText ?? DEFAULT_PROMPT;
 			pendingChatDraftText = draft?.chatDraft ?? '';
 
@@ -5383,14 +6121,20 @@
 		}
 	}
 
-	/** Models that accept image_url parts in codegen (DeepSeek = false on API). */
+	/** Vision capability comes from GET /models (`supportsVision`), not from provider-name prefixes. */
 	function modelSupportsVisionClient(modelId: string): boolean {
 		if (!modelId) return false;
+		const listed = availableModels.find((m) => m.id === modelId);
+		if (listed && typeof listed.supportsVision === 'boolean') {
+			return listed.supportsVision;
+		}
 		if (modelId.startsWith('deepseek-')) return false;
 		return (
 			modelId.startsWith('openai-') ||
 			modelId.startsWith('gemini-') ||
-			modelId.startsWith('anthropic-')
+			modelId.startsWith('anthropic-') ||
+			modelId.startsWith('zhipu-') ||
+			modelId.startsWith('glm-')
 		);
 	}
 
@@ -5474,20 +6218,34 @@
 		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.
+				console.log('[handleRefreshScreenshot] Opening Widget Details for manual preview refresh:', widgetId.substring(0, 8));
 				await openWidgetDetailsPanel(widgetId);
 				await new Promise(r => setTimeout(r, 300));
 			}
 
 			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 });
 				}
@@ -5498,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(() => {
@@ -5632,19 +6382,46 @@ 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;
 
+		// Convert UX v2: a draft panel's first Generate (button / confirm dialog)
+		// finalizes the conversion — creates widget + repo, replaces the sketch,
+		// and repoints this call at the real widget id. Chat sends are finalized
+		// in handleChatSendMessage before reaching this point.
+		let codegenTargetWidgetId = targetWidgetId;
+		if (isDraftConvertId(targetWidgetId)) {
+			const panelPromptForDraft =
+				targetWidgetId === focusedPanelWidgetId
+					? codeGenerationPrompt
+					: getPanelState(targetWidgetId).codeGenerationPrompt;
+			const draftPrompt = options.prompt || panelPromptForDraft;
+			const finalizedWidgetId = await finalizeDraftConversion(targetWidgetId, draftPrompt);
+			if (!finalizedWidgetId) return;
+			codegenTargetWidgetId = finalizedWidgetId;
+		}
+
 		// Use override prompt if provided (e.g. from Fix Errors button), otherwise use panel prompt
 		const panelPrompt =
-			targetWidgetId === focusedPanelWidgetId
+			codegenTargetWidgetId === focusedPanelWidgetId
 				? codeGenerationPrompt
-				: getPanelState(targetWidgetId).codeGenerationPrompt;
+				: getPanelState(codegenTargetWidgetId).codeGenerationPrompt;
 		const promptSource = options.prompt || panelPrompt;
 		const trimmedPrompt = promptSource.trim();
 		if (trimmedPrompt.length < 10) {
@@ -5664,7 +6441,7 @@ Requirements:
 					: 'panel prompt';
 		console.log(
 			'[generateCode] Widget',
-			targetWidgetId.substring(0, 8),
+			codegenTargetWidgetId.substring(0, 8),
 			'| prompt source:',
 			promptSourceLabel,
 			'| Length:',
@@ -5672,17 +6449,17 @@ Requirements:
 		);
 
 		if (forceMockReady) {
-			generatingWidgetIds = { ...generatingWidgetIds, [targetWidgetId]: true };
-			isGeneratingCode = targetWidgetId === focusedPanelWidgetId;
-			setCrossTabGenerating(true, targetWidgetId);
-			patchCodegenUiState(targetWidgetId, { generateCodeStatus: 'Generating mock code...' });
+			generatingWidgetIds = { ...generatingWidgetIds, [codegenTargetWidgetId]: true };
+			isGeneratingCode = codegenTargetWidgetId === focusedPanelWidgetId;
+			setCrossTabGenerating(true, codegenTargetWidgetId);
+			patchCodegenUiState(codegenTargetWidgetId, { generateCodeStatus: 'Generating mock code...' });
 			setTimeout(() => {
-				const { [targetWidgetId]: _done, ...rest } = generatingWidgetIds;
+				const { [codegenTargetWidgetId]: _done, ...rest } = generatingWidgetIds;
 				generatingWidgetIds = rest;
 				isGeneratingCode = !!(focusedPanelWidgetId && generatingWidgetIds[focusedPanelWidgetId]);
-				setCrossTabGenerating(false, targetWidgetId);
-				patchCodegenUiState(targetWidgetId, { generateCodeStatus: 'Mock code generation complete!' });
-				if (targetWidgetId === focusedPanelWidgetId) hasChangesToSave = true;
+				setCrossTabGenerating(false, codegenTargetWidgetId);
+				patchCodegenUiState(codegenTargetWidgetId, { generateCodeStatus: 'Mock code generation complete!' });
+				if (codegenTargetWidgetId === focusedPanelWidgetId) hasChangesToSave = true;
 				showToast('success', 'Mock Code Generated', {
 					description: 'This is a simulation. No actual code was generated.',
 					duration: 3000
@@ -5694,10 +6471,12 @@ Requirements:
 		await performCodeGeneration(trimmedPrompt, {
 			queued: false,
 			fromChat: options.fromChat,
-			widgetId: targetWidgetId,
+			widgetId: codegenTargetWidgetId,
 			compileFixOnly: options.compileFixOnly,
+			forceRecreateRepo: options.forceRecreateRepo,
 			attachmentIds: options.attachmentIds,
 			promptImagesOverride: options.promptImagesOverride,
+			persistFileAttachments: options.persistFileAttachments,
 		});
 	}
 
@@ -5716,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;
@@ -5740,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;
@@ -5754,8 +6541,7 @@ Requirements:
 				: undefined;
 			panelChat.addUserMessage(prompt, codegenImageAttachments);
 		}
-		await ensureCodegenUserMessagePersisted(generationWidgetId, prompt);
-		
+
 		isGeneratingCode = generationWidgetId === focusedPanelWidgetId;
 		setCrossTabGenerating(true, generationWidgetId);
 		lastGenerationPrompt = prompt;
@@ -5766,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.
@@ -5775,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;
 			}
 
@@ -5813,13 +6639,23 @@ Requirements:
 					: generationWidgetId === focusedPanelWidgetId
 						? promptImages
 						: panelSnap.promptImages;
+			// 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/') || /^https?:\/\//i.test(url)) && url.length > 20,
+			);
 			const chatAttachmentUrls = panelChat?.getAttachmentDataUrls?.() ?? [];
 			const chatUploadIds = [
 				...(options.attachmentIds || []),
 				...(panelChat?.getAttachmentUploadIds?.() ?? []),
 			].filter((id, index, arr) => id && arr.indexOf(id) === index);
 			if (chatAttachmentUrls.length > 0 && !(options.promptImagesOverride?.length)) {
-				panelPromptImages = chatAttachmentUrls;
+				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;
@@ -5830,11 +6666,19 @@ Requirements:
 				imagesToSend = await Promise.all(
 					panelPromptImages.map((url) => compressImageDataUrlForCodegen(url)),
 				);
+				imagesToSend = imagesToSend.filter(
+					(url) => url.startsWith('data:image/') && url.length > 100,
+				);
 				patchPanelSnapshot(generationWidgetId, { promptImages: imagesToSend });
 				if (generationWidgetId === focusedPanelWidgetId) {
 					promptImages = imagesToSend;
 					savePromptImagesToSession();
 				}
+			} else if (promptImpliesVisionReference(prompt)) {
+				console.warn(
+					'[WidgetCreator] Codegen proceeding WITHOUT image although prompt references one — widget',
+					generationWidgetId,
+				);
 			}
 			let coderModelForRequest = selectedModelId || defaultModelId;
 			if (imagesToSend?.length || attachmentIdsToSend?.length) {
@@ -5850,8 +6694,11 @@ Requirements:
 					const visionFallback = modelSupportsVisionClient(defaultModelId)
 						? defaultModelId
 						: 'openai-gpt-5.4';
+					console.log('[WidgetCreator] Coder vision fallback (request only, dropdown unchanged)', {
+						from: coderModelForRequest,
+						to: visionFallback,
+					});
 					coderModelForRequest = visionFallback;
-					userSelectedModelId = visionFallback;
 					const visionModel = availableModels.find((m) => m.id === visionFallback);
 					showToast('info', `Coder: ${visionModel?.name ?? visionFallback} (vision)`, {
 						description: 'Cu imagini atașate folosim automat un model vision — același ca pe server.',
@@ -5866,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);
 			
@@ -5875,7 +6734,7 @@ Requirements:
 				panelChat?.getConversationId?.() ?? panelSnap.currentChatConversationId ?? currentChatConversationId;
 			const plannerModelIdForRequest = options.compileFixOnly
 				? undefined
-				: resolvePlannerModelIdForGeneration(prompt);
+				: resolvePlannerModelIdForGeneration(prompt, coderModelForRequest);
 			const runtimeLogsForRequest = collectRuntimeLogsForCodegen(generationWidgetId);
 			const response = await agentClient.agentCodeGeneratePost({
 				generateCodeRequest: {
@@ -6021,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),
@@ -6118,6 +6982,21 @@ Requirements:
 						liveContentValues = {};
 					}
 
+					// Final chat message regardless of panel focus — without this, a
+					// closed/unfocused panel never receives the terminal update and the
+					// chat stays on the last progress line (e.g. stuck at 80%).
+					panelChat?.addAssistantMessage(
+						completedPreviewBuildErr
+							? `Code saved${completedCommitSha ? ` (Commit: ${completedCommitSha.substring(0, 7)})` : ''}, but preview build failed:\n${completedPreviewBuildErr}\n\nRebuilding preview…`
+							: `Code generation completed!${completedCommitSha ? ` Commit: ${completedCommitSha.substring(0, 7)}` : ''}\nPreview is loading…`,
+						true
+					);
+					if (!completedPreviewBuildErr) {
+						panelChat?.updateLatestCodegenStatusMessage?.(
+							`Code generation completed!${completedCommitSha ? ` Commit: ${completedCommitSha.substring(0, 7)}` : ''}\nPreview is loading…`,
+						);
+					}
+
 					setTimeout(async () => {
 						if (!getWidgetDetailsRef(generationWidgetId)) return;
 						const activePanelRef = getWidgetDetailsRef(generationWidgetId);
@@ -6149,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.`,
@@ -6222,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;
@@ -6238,6 +7119,15 @@ Requirements:
 		return (import.meta.env.VITE_CDN_URL || 'https://cdn.widgetic.com').replace(/\/+$/, '');
 	}
 
+	/** Published artifact URL for embed/test page — CDN, never the API gateway origin. */
+	function publishedWidgetHtmlUrl(widgetId: string, version: number, compositionId?: string | null): string {
+		const base = `${publishedCdnBase()}/widgets/${widgetId}/v${version}/widget.html`;
+		if (compositionId) {
+			return `${base}?compositionId=${compositionId}`;
+		}
+		return base;
+	}
+
 	/** Canonical full CDN URL for a published widget artifact (never a bare pathname). */
 	function resolvePublishedJsPath(widgetId: string, version: number, artifactUrl?: string | null): string {
 		const cdnBase = publishedCdnBase();
@@ -6557,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', () => {
@@ -6650,10 +7541,16 @@ 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);
 			for (const wId of Object.keys(generatingWidgetIds)) {
 				setCrossTabGenerating(false, wId);
 			}
@@ -6678,8 +7575,14 @@ Requirements:
 		window.addEventListener(HOST_WIDGET_RENAMED_EVENT, handleHostWidgetRenamedEvent);
 		window.addEventListener(HOST_REQUEST_PUBLISH_EVENT, handleHostRequestPublishEvent);
 		window.addEventListener(HOST_TOGGLE_DEBUG_EVENT, handleHostToggleDebugEvent);
-		// Site header Debug button needs initial ON/OFF state (embed is a separate Svelte tree).
+		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
@@ -6794,7 +7697,12 @@ Requirements:
 
 	function getChatMethodsForWidget(widgetId: string | null | undefined) {
 		if (!widgetId) return chatMethods ?? null;
-		return chatMethodsByWidgetId[widgetId] ?? (widgetId === selectedWidgetId ? chatMethods ?? null : null);
+		const instanceKey = panelInstanceKeyByWidgetId[widgetId] ?? widgetId;
+		return (
+			chatMethodsByWidgetId[widgetId] ??
+			chatMethodsByWidgetId[instanceKey] ??
+			(widgetId === selectedWidgetId ? chatMethods ?? null : null)
+		);
 	}
 
 	function getOperationStageMessage(metadata?: Record<string, unknown>): string | null {
@@ -7067,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,
 		};
 	}
@@ -7108,7 +8016,7 @@ Requirements:
 			publishHistoryResolved: false,
 			publishHistoryResolvedForWidgetId: null,
 			pendingPublishAfterCodegen: false,
-			hasGeneratedCode: false,
+			hasGeneratedCode: !!loadCommitIdForWidget(widgetId),
 			liveDesignValues: {},
 			liveContentValues: {},
 			liveContentItems: [],
@@ -7120,7 +8028,7 @@ Requirements:
 			compositionSchemasLoading: false,
 			compositionSchemasError: null,
 			schemaLoadStartedAt: null,
-			chatContainerHeight: DEFAULT_CHAT_CONTAINER_HEIGHT,
+			chatContainerHeight: 550,
 			panelPreviewCompileError: null,
 		};
 	}
@@ -7146,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.
@@ -7174,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,
@@ -7192,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,
@@ -7482,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);
 		}
@@ -7498,20 +8424,57 @@ Requirements:
 		retryStalePanelSchemaLoads();
 	}
 
+	function positionOpenDetailsPanel(widgetId: string): void {
+		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);
+	}
+
 	async function openWidgetDetailsPanel(widgetId: string): Promise<void> {
+		const openGen = ++widgetDetailsOpenGen;
+		widgetDetailsOpenTargetId = widgetId;
 		const deepLinkId = resolveEmbeddedDeepLinkWidgetId();
 		if (embedded && deepLinkId && widgetId === deepLinkId) {
 			embeddedDeepLinkPanelDismissed = false;
 		}
+		// One details panel at a time — close any other open widget first.
+		for (const openId of [...openWidgetPanelIds]) {
+			if (openId !== widgetId) {
+				closeWidgetDetailsPanel(openId, { fromShapeSwitch: true });
+			}
+		}
 		const isNewPanel = !openWidgetPanelIds.includes(widgetId);
 		if (isNewPanel) {
 			ensurePanelState(widgetId);
 			if (focusedPanelWidgetId) {
 				captureFocusedPanelSnapshot();
 			}
+			if (!panelInstanceKeyByWidgetId[widgetId]) {
+				panelInstanceKeyByWidgetId = {
+					...panelInstanceKeyByWidgetId,
+					[widgetId]: widgetId,
+				};
+			}
 			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;
+		}
 		showWidgetDetails = openWidgetPanelIds.length > 0;
 		// WidgetDetails is dynamically imported — wait for the module, then for bind:this refs.
 		// Only force-open the requested panel; other open panels keep their own show state.
@@ -7522,8 +8485,10 @@ Requirements:
 				continue;
 			}
 			const ref = getWidgetDetailsRef(widgetId);
+			if (openGen !== widgetDetailsOpenGen || widgetDetailsOpenTargetId !== widgetId) return;
 			if (ref) {
 				ref.openWidgetDetails();
+				positionOpenDetailsPanel(widgetId);
 				ensurePanelEditorData(widgetId);
 				break;
 			}
@@ -7532,20 +8497,8 @@ Requirements:
 		if (!getWidgetDetailsRef(widgetId)) {
 			console.warn('[CreatorApp] WidgetDetails ref not ready after open retries:', widgetId?.substring(0, 8));
 		}
-		// After {#each} remount, other panels may have lost open state — re-open without stacking extras.
-		for (const openId of openWidgetPanelIds) {
-			if (openId === widgetId) continue;
-			const other = getWidgetDetailsRef(openId);
-			if (other && !other.getShowWidgetDetails?.()) {
-				other.openWidgetDetails();
-				ensurePanelEditorData(openId);
-			}
-		}
-		openWidgetPanelIds.forEach((id, index) => {
-			setTimeout(() => {
-				void scheduleWidgetSchemaLoad(id);
-			}, index * 150);
-		});
+		void scheduleWidgetSchemaLoad(widgetId);
+		ensurePanelEditorData(widgetId);
 		ensureAllOpenPanelSchemasLoaded();
 		healStuckPanelSchemaLoadingFlags();
 		retryStalePanelSchemaLoads();
@@ -7561,6 +8514,7 @@ Requirements:
 				for (let attempt = 0; attempt < 20; attempt++) {
 					let missing = false;
 					for (const openId of openWidgetPanelIds) {
+						if (focusedPanelWidgetId && openId !== focusedPanelWidgetId) continue;
 						const ref = getWidgetDetailsRef(openId);
 						if (ref) {
 							ref.openWidgetDetails();
@@ -7579,6 +8533,51 @@ Requirements:
 		}
 	}
 
+	/**
+	 * Convert UX: first Generate creates the DB widget. Keep Widget Details mounted
+	 * by swapping the panel id in place (same {#each} key) instead of close → open.
+	 */
+	function migrateOpenPanelWidgetId(fromId: string, toId: string): void {
+		if (!fromId || !toId || fromId === toId) return;
+		const instanceKey = panelInstanceKeyByWidgetId[fromId] ?? fromId;
+		const nextKeys = { ...panelInstanceKeyByWidgetId };
+		delete nextKeys[fromId];
+		nextKeys[toId] = instanceKey;
+		panelInstanceKeyByWidgetId = nextKeys;
+
+		const draftZ = panelZIndexByWidgetId[fromId];
+		const { [fromId]: _z, ...restZ } = panelZIndexByWidgetId;
+		panelZIndexByWidgetId =
+			draftZ !== undefined ? { ...restZ, [toId]: draftZ } : restZ;
+
+		const draftRef = widgetDetailsRefs[fromId];
+		const { [fromId]: _r, ...restRefs } = widgetDetailsRefs;
+		widgetDetailsRefs = draftRef ? { ...restRefs, [toId]: draftRef } : restRefs;
+
+		const draftChat = chatMethodsByWidgetId[fromId];
+		if (draftChat) {
+			const { [fromId]: _c, ...restChat } = chatMethodsByWidgetId;
+			chatMethodsByWidgetId = { ...restChat, [toId]: draftChat };
+			if (focusedPanelWidgetId === toId || selectedWidgetId === toId) {
+				chatMethods = draftChat;
+			}
+		}
+
+		const replaced = openWidgetPanelIds.map((id) => (id === fromId ? toId : id));
+		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',
+			fromId.substring(0, 16),
+			'→',
+			toId.substring(0, 8),
+		);
+	}
+
 	function closeWidgetDetailsPanel(
 		widgetId: string,
 		options: { fromShapeSwitch?: boolean } = {},
@@ -7593,12 +8592,20 @@ Requirements:
 			embeddedDeepLinkPanelDismissed = true;
 			embeddedDeepLinkRequestGen++;
 		}
+		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;
 		panelZIndexByWidgetId = restZ;
 		const { [widgetId]: _removedRef, ...remainingRefs } = widgetDetailsRefs;
 		widgetDetailsRefs = remainingRefs;
+		const { [widgetId]: _k, ...restKeys } = panelInstanceKeyByWidgetId;
+		panelInstanceKeyByWidgetId = restKeys;
 		if (focusedPanelWidgetId === widgetId) {
 			const nextId = openWidgetPanelIds.at(-1) ?? null;
 			if (nextId) {
@@ -7620,21 +8627,26 @@ Requirements:
 		}
 		openWidgetPanelIds = [];
 		widgetDetailsRefs = {};
+		panelInstanceKeyByWidgetId = {};
 		focusedPanelWidgetId = null;
 		panelZIndexByWidgetId = {};
+		detailsSessionWidgetId = null;
+		widgetDetailsOpenTargetId = null;
 		showWidgetDetails = false;
 	}
 
 	/** Active panel for chat/codegen — falls back to selected widget's ref. */
 	$: widgetDetails = focusedPanelWidgetId
-		? widgetDetailsRefs[focusedPanelWidgetId]
+		? getWidgetDetailsRef(focusedPanelWidgetId)
 		: selectedWidgetId
-			? widgetDetailsRefs[selectedWidgetId]
+			? getWidgetDetailsRef(selectedWidgetId)
 			: null;
 
 	function getWidgetDetailsRef(widgetId?: string | null): any {
 		const id = widgetId ?? focusedPanelWidgetId ?? selectedWidgetId;
-		return id ? widgetDetailsRefs[id] : null;
+		if (!id) return null;
+		const instanceKey = panelInstanceKeyByWidgetId[id] ?? id;
+		return widgetDetailsRefs[instanceKey] ?? widgetDetailsRefs[id] ?? null;
 	}
 
 	// Widgets Panel sizing — dynamically adapts to auth panel height
@@ -7892,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.';
 	}
 
 
@@ -7978,31 +8989,89 @@ 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;
-					if (prop.defaultValue !== undefined && flat[name] === undefined) {
-						flat[name] = prop.defaultValue;
-					}
+					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;
+	}
+
+	/** 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;
+		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 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: picked
+			};
+		});
+		return {
+			...(templateHasProps ? JSON.parse(JSON.stringify(template)) : {}),
+			...item,
+			id: item.id,
+			title: item.title || template?.title,
+			properties: nextProperties
+		};
+	}
+
 	function mergeContentItemsWithSchema(savedItems: any[], schemaItems: any[]): any[] {
 		if (!Array.isArray(schemaItems) || schemaItems.length === 0) {
 			return Array.isArray(savedItems) ? [...savedItems] : [];
@@ -8010,14 +9079,17 @@ Requirements:
 		if (!Array.isArray(savedItems) || savedItems.length === 0) {
 			return JSON.parse(JSON.stringify(schemaItems));
 		}
+		const template = schemaItems.find(contentItemHasProperties) || schemaItems[0];
 		const byId = new Map(savedItems.map((item) => [item.id, item]));
 		const merged = schemaItems.map((schemaItem) => {
 			const saved = byId.get(schemaItem.id);
-			return saved ? { ...JSON.parse(JSON.stringify(schemaItem)), ...saved } : JSON.parse(JSON.stringify(schemaItem));
+			const clonedSchema = JSON.parse(JSON.stringify(schemaItem));
+			if (!saved) return clonedSchema;
+			return attachSchemaProperties({ ...clonedSchema, ...saved }, clonedSchema);
 		});
 		for (const savedItem of savedItems) {
 			if (!schemaItems.some((schemaItem) => schemaItem.id === savedItem.id)) {
-				merged.push(savedItem);
+				merged.push(attachSchemaProperties(savedItem, template));
 			}
 		}
 		return merged;
@@ -8244,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,
@@ -8255,12 +9345,8 @@ Requirements:
 			};
 		}
 
-		// Newer than live, OR codegen just finished (pending) — enable Publish new.
-		if (
-			pendingPublish
-			|| (headSha && liveSha && !commitsMatch(headSha, liveSha))
-			|| (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}`,
@@ -8311,6 +9397,9 @@ Requirements:
 	function publishNeedsSaveFirstForPanel(widgetId: string): boolean {
 		const ps = getPanelDisplayState(widgetId);
 		const headSha = resolvePublishHeadCommitId(widgetId, ps);
+		// Compiled preview / known code means Publish is allowed — don't nag "save first"
+		// just because GitLab HEAD hasn't been probed yet.
+		if (panelHasPublishableCode(widgetId, ps)) return false;
 		return (
 			!isPublishing &&
 			!generatingWidgetIds[widgetId] &&
@@ -8399,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({
@@ -8586,6 +9675,11 @@ $: if (lastPublishedVersion !== null && isHistoryOpen) {
 // Runs reactively when selectedWidgetId + canvasRef + conversationsClient are ready.
 let autoPromptSyncedForWidgetId: string | null = null;
 $: if (selectedWidgetId && canvasRef && conversationsClient && messagesClient && autoPromptSyncedForWidgetId !== selectedWidgetId) {
+	// Draft convert panels have no DB widget — the prompt sync (and any DB
+	// conversation shell) happens in finalizeDraftConversion on first send.
+	if (isDraftConvertId(selectedWidgetId)) {
+		autoPromptSyncedForWidgetId = selectedWidgetId;
+	} else {
 	autoPromptSyncedForWidgetId = selectedWidgetId;
 	const widgetIdSync = selectedWidgetId;
 	const widgetSync = getWidgetById(widgetIdSync);
@@ -8634,6 +9728,7 @@ $: if (selectedWidgetId && canvasRef && conversationsClient && messagesClient &&
 			}
 		}).catch(() => {});
 	}
+	}
 }
 
 // Show "Confirm Generation" dialog for converted widgets that have a prompt + repo
@@ -8642,6 +9737,11 @@ $: if (selectedWidgetId && canvasRef && conversationsClient && messagesClient &&
 // Uses setTimeout to allow async prompt loading to finish before evaluating.
 let autoGenDialogCheckedForWidgetId: string | null = null;
 $: if (selectedWidgetId && autoGenDialogCheckedForWidgetId !== selectedWidgetId) {
+	// Draft convert panels: chat is already prefilled with the convert prompt —
+	// the confirm dialog would be redundant and targets a non-existent widget.
+	if (isDraftConvertId(selectedWidgetId)) {
+		autoGenDialogCheckedForWidgetId = selectedWidgetId;
+	} else {
 	autoGenDialogCheckedForWidgetId = selectedWidgetId;
 	const capturedWidgetId = selectedWidgetId;
 	setTimeout(() => {
@@ -8664,6 +9764,7 @@ $: if (selectedWidgetId && autoGenDialogCheckedForWidgetId !== selectedWidgetId)
 			console.log('[AutoGenDialog] Conditions not met:', { hasRepo, hasNoCode, hasPreview, hasPrompt, lastCommitId, lastPublishedVersion });
 		}
 	}, 1500);
+	}
 }
 
 // Auto-save prompt text to the durable draft when it changes (debounced 500ms)
@@ -8783,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
@@ -8799,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) {
@@ -8851,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;
 			}
 		}
@@ -9032,8 +10130,11 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		const panelRef = getWidgetDetailsRef(widgetId);
 		const isDetailsOpen = openWidgetPanelIds.includes(widgetId) && (panelRef?.getShowWidgetDetails() ?? false);
-		if (isDetailsOpen && focusedPanelWidgetId === widgetId) {
-			console.log('[WidgetCreator] Same widget shape re-clicked and panel focused, skipping reload:', widgetId);
+		if (isDetailsOpen) {
+			if (focusedPanelWidgetId !== widgetId) {
+				focusWidgetPanel(widgetId);
+			}
+			console.log('[WidgetCreator] Same widget details already open, skipping reload:', widgetId.substring(0, 8));
 			return;
 		}
 		const widget = getWidgetById(widgetId);
@@ -9046,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.
@@ -9200,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> {
@@ -9213,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;
 	}
 
@@ -9269,14 +10393,31 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			console.log('[WidgetCreator] Canvas ready — skipping JSON hydrate (new widget)');
 			lastSavedCanvasObjectCount = 0;
 			markCanvasStateLoaded();
-			if (selectedWidget?.id) {
+			// F3: New-widget sessions stay EMPTY — the WidgetShape is created only
+			// by "Convert to Widget", never auto-placed on canvas ready.
+			if (selectedWidget?.id && !didForceCreateNewWidget) {
 				placeSelectedWidgetShapeOnCanvas();
 			}
 			return;
 		}
-		const { widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
+		const { loaded, widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
+		if (!loaded) {
+			console.log('[WidgetCreator] Canvas ready — JSON load deferred until canvasId is resolved');
+			return;
+		}
 		await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 		await maybeAutoRestoreWidgetShapes();
+		const primaryId =
+			canvasPrimaryWidgetId ||
+			canvasRef.getPrimaryWidgetId?.() ||
+			selectedWidgetId;
+		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');
+		}
 	}
 
 	/**
@@ -9364,12 +10505,22 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		try {
 			if (canvasesClient) {
-				const canvasRecord = await canvasesClient.getCanvas({ id: canvasId });
-				if (loadEpoch !== canvasLoadEpoch || ignoreIncomingCanvasLoads) {
-					console.log('[CanvasDebug] Ignoring stale getCanvas result', { loadEpoch, canvasLoadEpoch });
-					return emptyResult;
+				let canvasContent: any = null;
+				for (let attempt = 0; attempt < 3; attempt++) {
+					const canvasResponse = await canvasesClient.getCanvasRaw({ id: canvasId });
+					const canvasJson = await canvasResponse.raw.json();
+					const canvasRecord = canvasJson?.data || canvasJson;
+					if (loadEpoch !== canvasLoadEpoch || ignoreIncomingCanvasLoads) {
+						console.log('[CanvasDebug] Ignoring stale getCanvas result', { loadEpoch, canvasLoadEpoch });
+						return emptyResult;
+					}
+					canvasContent = canvasRecord?.canvasContent ?? canvasRecord?.canvas_content ?? null;
+					if (canvasContent) break;
+					console.log('[CanvasDebug] getCanvas returned no canvasContent, retry', attempt + 1);
+					if (attempt < 2) {
+						await new Promise((resolve) => setTimeout(resolve, 400 * (attempt + 1)));
+					}
 				}
-				const canvasContent = canvasRecord?.canvasContent;
 
 				if (canvasContent) {
 					const parsed =
@@ -9412,6 +10563,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				}
 				markCanvasStateLoaded();
 				if (canvasShapesLoaded) canvasApiLoadError = null;
+				if (objectCount > 0) canvasShapesMissingWarning = false;
 				isLoadCooldownActive = true;
 				setTimeout(() => { isLoadCooldownActive = false; }, 3000);
 				lastSavedCanvasObjectCount = objectCount;
@@ -9569,179 +10721,330 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	}
 
 	/**
-	 * Called when user clicks "Convert to Widget" on a canvas shape.
-	 * 1. Creates a widget record via API
-	 * 2. Creates a component record linking canvas → widget
-	 * 3. Replaces the original shape with a Widget Image (screenshot)
-	 * 4. Pre-fills promptImages + codeGenerationPrompt for WidgetDetails
-	 * 5. Opens WidgetDetails panel
+	 * Convert UX v2 — clicking "Convert to Widget" no longer creates anything in
+	 * the DB. It only:
+	 *  1. keeps the sketch on the canvas (the caller groups it via onGroupSelection),
+	 *  2. opens a DRAFT WidgetDetails panel under a synthetic id,
+	 *  3. prefills the panel chat with the captured screenshot + CONVERT_PROMPT.
+	 * The widget record, component, repository, and shape replacement all happen
+	 * in finalizeDraftConversion() when the user sends the first prompt.
 	 */
 	async function handleConvertToWidget(payload: WidgetConversionPayload) {
-		console.log('[WidgetCreator] Convert to widget:', payload);
+		console.log('[WidgetCreator] Convert to widget (draft, v2):', payload);
 
 		if (!$userSession.user || !hasValidToken) {
 			showToast('error', 'Please login first');
 			return;
 		}
-
 		if (isWidgetOperationInProgress) {
 			console.warn('[WidgetCreator] Another widget operation in progress, skipping convert');
 			showToast('warning', 'Please wait for the current operation to finish');
 			return;
 		}
 
+		const screenshotValid =
+			!!payload.screenshot && payload.screenshot.startsWith('data:image/');
+		if (!screenshotValid) {
+			console.error(
+				'[WidgetCreator] Convert screenshot capture FAILED (length:',
+				payload.screenshot?.length ?? 0,
+				') — keeping original shapes so the sketch is not lost'
+			);
+			showToast('warning', 'Screenshot could not be captured', {
+				description: 'Fix the selection (zoom out / deselect) and try Convert again.',
+				duration: 10000
+			});
+			return;
+		}
+
+		const draftId = `${DRAFT_CONVERT_ID_PREFIX}${Date.now()}`;
+		const draftName = payload.frameName && payload.frameName !== 'image'
+			? `Converted ${payload.frameName}`
+			: `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.
+		// The returned id identifies the group for the later shape replacement.
+		if (canvasRef?.onGroupSelection) {
+			try {
+				const groupId = await canvasRef.onGroupSelection();
+				if (groupId) draftConvertObjectIds.set(draftId, groupId);
+			} catch (groupErr) {
+				console.warn('[WidgetCreator] Group selection failed — continuing with raw selection:', groupErr);
+			}
+		}
+
+		// Re-convert of a group that already has a draft: reopen that draft
+		// panel instead of piling up duplicate drafts for the same sketch.
+		const canvasObjectId = draftConvertObjectIds.get(draftId);
+		const existingDraftId = canvasObjectId
+			? [...draftConvertObjectIds.entries()].find(([id, objId]) => id !== draftId && objId === canvasObjectId)?.[0]
+			: undefined;
+		if (existingDraftId) {
+			draftConvertObjectIds.delete(draftId);
+			draftConvertScreenshots.delete(draftId);
+			console.log('[WidgetCreator] Convert re-opened existing draft for group:', existingDraftId);
+			await openWidgetDetailsPanel(existingDraftId);
+			// 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;
+		}
+
 		try {
 			isWidgetOperationInProgress = true;
+			authStatus = 'Preparing widget draft...';
+
+			// 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],
+			});
+
+			// Prefill the chat draft — sending the message starts the real conversion.
+			// Set the globals too: if the Chat component registers later (async mount),
+			// restoreChatDraftFromStorage reapplies this exact draft to the input.
+			loadPromptGeneration += 1;
+			promptImages = [payload.screenshot];
+			codeGenerationPrompt = CONVERT_PROMPT;
+			pendingChatDraftText = CONVERT_PROMPT;
+			chatDraftRestoredForWidgetId = null;
+			savePromptForWidget(draftId);
+			const panelChat = getChatMethodsForWidget(draftId);
+			if (panelChat) {
+				panelChat.setDraftText?.(CONVERT_PROMPT);
+				panelChat.addImageAttachment?.(payload.screenshot, 'design-screenshot.png');
+				console.log(
+					'[Convert] Draft chat prefilled (no auto-start):',
+					draftId,
+					'| prompt:',
+					CONVERT_PROMPT,
+					'| screenshot attached: true'
+				);
+			} else {
+				console.warn('[Convert] Chat methods not ready — draft stays in panel snapshot for restore:', draftId);
+			}
+
+			authStatus = 'Widget draft ready — send the prompt to generate.';
+			showToast('info', 'Widget draft created', {
+				description: 'Edit the sketch freely. Sending the prompt creates the widget.'
+			});
+		} catch (error) {
+			console.error('[WidgetCreator] Convert to widget (draft) error:', error);
+			draftConvertObjectIds.delete(draftId);
+			draftConvertScreenshots.delete(draftId);
+			authStatus = toErrorMessage(error, 'Failed to prepare widget draft.');
+			showToast('error', 'Failed to prepare widget draft');
+		} finally {
+			isWidgetOperationInProgress = false;
+			setTimeout(() => {
+				if (!finalizingDraftConversions.size) {
+					suppressWidgetDetailsClose = false;
+				}
+			}, 1500);
+		}
+	}
+
+	/**
+	 * Runs on the FIRST prompt send of a draft conversion: creates the widget
+	 * record + component + repository, replaces the grouped sketch on canvas with
+	 * a WidgetShape screenshot, and repoints panel state from draftId → widgetId.
+	 */
+	async function finalizeDraftConversion(draftId: string, prompt: string): Promise<string | null> {
+		if (!draftId.startsWith(DRAFT_CONVERT_ID_PREFIX)) return null;
+		if (finalizingDraftConversions.has(draftId)) return null;
+		finalizingDraftConversions.add(draftId);
+		// Keep Widget Details open while the canvas sketch is replaced (selection
+		// change would otherwise close the panel, then we'd remount it).
+		suppressWidgetDetailsClose = true;
+
+		try {
+			const screenshot = draftConvertScreenshots.get(draftId) ?? '';
+			const canvasObjectId = draftConvertObjectIds.get(draftId) ?? '';
+			const draftPanelState = getPanelState(draftId);
+			const draftName = getWidgetById(draftId)?.name
+				?? `ConvertedW-${Date.now()}`;
+
 			authStatus = 'Creating widget from design...';
 			const idempotencyKey = crypto?.randomUUID?.() ?? `${Date.now()}-convert`;
-
-			// 1. Create widget record
-			const convertedName = payload.frameName && payload.frameName !== 'image'
-				? `Converted ${payload.frameName}`
-				: `ConvertedW-${Date.now()}`;
 			const response = await widgetsClient.createWidget(
 				{
 					newWidget: {
-						name: convertedName,
+						name: draftName,
 						type: 'widget',
-						content: payload.canvasData,
+						// Canvas sketch snapshot is stored on the widget for future reference
+						content: { source: 'canvas_convert', prompt },
 						isDraft: true,
-						...(payload.frameName ? { description: payload.frameName } : {}),
+						description: draftName,
 						...(canvasId ? { canvasId } : {}),
 						...embeddedWidgetProjectContext()
 					}
 				},
-				{
-					headers: { 'Idempotency-Key': idempotencyKey }
-				}
+				{ headers: { 'Idempotency-Key': idempotencyKey } }
 			);
 
 			if (!response || response.error || response.message) {
-				console.error('[WidgetCreator] Widget create from frame failed:', response);
-				authStatus = `Create widget failed: ${response?.message || response?.error || 'Unknown error'}`;
+				console.error('[WidgetCreator] Widget create on first send failed:', response);
 				showToast('error', 'Failed to create widget from design');
-				return;
+				return null;
 			}
 
 			const newWidget = response.data || response;
-			if (newWidget?.id) {
-				// 2. Create component record (canvas → widget bridge)
-				if (canvasId && componentsClient) {
-					try {
-						await componentsClient.createComponent({
-							canvasId,
-							createComponentRequest: {
-								name: payload.frameName || 'Untitled Component',
-								widget_id: newWidget.id,
-								is_widget: true,
-							}
-						});
-						console.log('[WidgetCreator] Component record created for widget', newWidget.id);
-					} catch (compErr) {
-						console.warn('[WidgetCreator] Failed to create component record (non-blocking):', compErr);
-					}
-				}
-
-				// 3. Add to widgets list FIRST so PropsPanel can resolve the name
-				widgets = [{ ...newWidget }, ...widgets];
-
-				// 4. Replace original shape with Widget Image on canvas
-				if (canvasRef) {
-					try {
-						await canvasRef.replaceObjectWithWidgetImage(
-							payload.frameId,
-							newWidget.id,
-							payload.screenshot
-						);
-						console.log('[WidgetCreator] Shape replaced with Widget Image');
-						setTimeout(() => {
-							const json = canvasRef?.saveCanvas();
-							if (json) handleCanvasAutoSave(json);
-						}, 500);
-					} catch (replaceErr) {
-						console.warn('[WidgetCreator] Failed to replace shape (falling back to link):', replaceErr);
-						canvasRef.linkFrameToWidget(payload.frameId, newWidget.id);
-					}
-				}
+			if (!newWidget?.id) {
+				showToast('warning', 'Widget created but no ID returned');
+				return null;
+			}
+			const widgetId: string = newWidget.id;
 
-				// 5. Auto-create repository so the widget is ready for code generation
+			// Component record (canvas → widget bridge) — non-blocking.
+			if (canvasId && componentsClient) {
 				try {
-					const repoId = await ensureWidgetRepository(newWidget, { silent: true });
-					if (repoId) {
-						newWidget.repositoryId = repoId;
-						widgets = widgets.map((w) => w.id === newWidget.id ? { ...w, repositoryId: repoId } : w);
-						console.log('[WidgetCreator] Repository auto-created for converted widget:', repoId);
-					}
-				} catch (repoErr) {
-					console.warn('[WidgetCreator] Auto-create repo failed (non-blocking):', repoErr);
+					await componentsClient.createComponent({
+						canvasId,
+						createComponentRequest: {
+							name: draftName,
+							widget_id: widgetId,
+							is_widget: true,
+						}
+					});
+					console.log('[WidgetCreator] Component record created for widget', widgetId);
+				} catch (compErr) {
+					console.warn('[WidgetCreator] Failed to create component record (non-blocking):', compErr);
 				}
+			}
 
-				// 6. Mark for auto code generation BEFORE selectWidget
-				pendingAutoGenerateWidgetId = newWidget.id;
-				console.log('[WidgetCreator] Canvas widget marked for auto code generation:', newWidget.id);
-
-				await selectWidget(newWidget);
-
-				// 7. Override prompt with screenshot AFTER selectWidget (which resets prompt)
-				promptImages = [payload.screenshot];
-				codeGenerationPrompt = payload.frameName
-					? `Design: "${payload.frameName}"\n\n${IMAGE_WIDGET_PROMPT}`
-					: IMAGE_WIDGET_PROMPT;
-				savePromptForWidget(newWidget.id);
+			// Add to widgets list so getWidgetById resolves the real widget from now on.
+			widgets = [{ ...newWidget }, ...widgets.filter((w) => w.id !== draftId)];
 
-				// 7b. Persist the initial prompt as first message in a DB conversation
+			// Replace the grouped sketch with a WidgetShape screenshot. On failure
+			// fall back to linking the sketch object to the widget id.
+			if (canvasRef && canvasObjectId) {
 				try {
-					if (conversationsClient && messagesClient) {
-						const convTitle = payload.frameName
-							? `Convert: ${payload.frameName}`
-							: 'Widget conversion';
-						const conv = await handleCreateConversation(newWidget.id, convTitle);
-						if (conv?.id) {
-							const promptContent = promptImages.length > 0
-								? `[image:design-screenshot]\n\n${codeGenerationPrompt}`
-								: codeGenerationPrompt;
-							await handleSaveMessage(conv.id, promptContent, 'user');
-							console.log('[WidgetCreator] Saved initial conversion prompt to DB conversation:', conv.id);
-						}
-					}
-				} catch (convErr) {
-					console.warn('[WidgetCreator] Failed to save conversion prompt to DB (non-blocking):', convErr);
+					await canvasRef.replaceObjectWithWidgetImage(canvasObjectId, widgetId, screenshot);
+					console.log('[WidgetCreator] Sketch replaced with WidgetShape screenshot');
+					// Flush the canvas AFTER the WidgetShape image fields are set
+					// (synchronous in replaceObjectWithWidgetImage). saveNow bypasses
+					// the autosave debounce so a quick refresh can't lose the replace.
+					setTimeout(() => {
+						canvasRef?.saveNow?.();
+					}, 800);
+				} catch (replaceErr) {
+					console.warn('[WidgetCreator] Sketch replace failed (falling back to link):', replaceErr);
+					canvasRef.linkFrameToWidget(canvasObjectId, widgetId);
+					setTimeout(() => {
+						canvasRef?.saveNow?.();
+					}, 800);
 				}
+			}
 
-				// 8. Open WidgetDetails panel
-				await openWidgetDetailsPanel(newWidget.id);
-
-				// 9. Auto-start codegen (convert flow — no confirm dialog)
-				if (pendingAutoGenerateWidgetId && pendingAutoGenerateWidgetId === newWidget.id) {
-					const autoGenWidgetId = pendingAutoGenerateWidgetId;
-					pendingAutoGenerateWidgetId = null;
-					skipAutoGenConfirmWidgetIds.add(autoGenWidgetId);
-					patchPanelSnapshot(autoGenWidgetId, {
-						promptImages: [payload.screenshot],
-						codeGenerationPrompt: codeGenerationPrompt,
-					});
-					await tick();
-					console.log('[AutoGenerate] Convert flow — starting codegen immediately:', autoGenWidgetId);
-					void generateCode({ widgetId: autoGenWidgetId });
+			// Auto-create repository so generation can start right away.
+			try {
+				const repoId = await ensureWidgetRepository(newWidget, { silent: true });
+				if (repoId) {
+					newWidget.repositoryId = repoId;
+					widgets = widgets.map((w) => w.id === widgetId ? { ...w, repositoryId: repoId } : w);
+					console.log('[WidgetCreator] Repository auto-created for converted widget:', repoId);
 				}
-
-				authStatus = 'Widget created from design.';
-				showToast('success', 'Widget created', {
-					description: `"${payload.frameName}" converted to widget`
-				});
+			} catch (repoErr) {
+				console.warn('[WidgetCreator] Auto-create repo failed (non-blocking):', repoErr);
+			}
+
+			// Migrate draft panel state → real widget panel state, then reopen the
+			// panel under the real id so Chat binds to the widget's conversation.
+			// Persist the real widget's first conversation + user message BEFORE the
+			// 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, [
+				...(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.
+			const { currentChatConversationId: _draftConvId, ...draftPanelStateClean } =
+				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(
+				Object.entries(widgetPanelSnapshots).filter(([key]) => key !== draftId),
+			);
+			draftConvertObjectIds.delete(draftId);
+			draftConvertScreenshots.delete(draftId);
+			await selectWidget(getWidgetById(widgetId) ?? newWidget, {
+				skipEditorContextReset: true,
+				skipPlaceShape: true,
+			});
+			focusWidgetPanel(widgetId);
+			await tick();
+			const migratedRef = getWidgetDetailsRef(widgetId);
+			if (migratedRef?.getShowWidgetDetails?.()) {
+				console.log('[CreatorApp] Draft→widget: Widget Details stayed open — keep current position');
 			} else {
-				authStatus = 'Widget created but response missing id.';
-				showToast('warning', 'Widget created but no ID returned');
+				await openWidgetDetailsPanel(widgetId);
 			}
+			loadPromptGeneration += 1;
+			const migrationPrompt = draftPanelState.codeGenerationPrompt || prompt;
+			const migrationImages = draftPanelState.promptImages?.length
+				? draftPanelState.promptImages
+				: (screenshot ? [screenshot] : []);
+			codeGenerationPrompt = migrationPrompt;
+			promptImages = migrationImages;
+			// Carry the user's typed text + sketch attachment into the real widget's
+			// chat draft (restoreChatDraftFromStorage consumes these on Chat ready).
+			pendingChatDraftText = prompt;
+			chatDraftRestoredForWidgetId = null;
+			savePromptForWidget(widgetId);
+
+			authStatus = 'Widget created from design.';
+			showToast('success', 'Widget created', {
+				description: `"${draftName}" is ready — generation started`
+			});
+			return widgetId;
 		} catch (error) {
-			console.error('[WidgetCreator] Convert to widget error:', error);
-			authStatus = toErrorMessage(error, 'Failed to convert frame to widget.');
-			showToast('error', 'Failed to convert frame to widget');
+			console.error('[WidgetCreator] finalizeDraftConversion error:', error);
+			showToast('error', 'Failed to finalize widget conversion');
+			return null;
 		} finally {
-			isWidgetOperationInProgress = false;
+			suppressWidgetDetailsClose = false;
+			finalizingDraftConversions.delete(draftId);
 		}
 	}
 
+	/** Draft panel id helper — true when the id is a synthetic convert draft. */
+	function isDraftConvertId(widgetId: string | null | undefined): boolean {
+		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.
@@ -9842,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,
@@ -10033,7 +11360,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	}}
 	onresize={() => {
 		if (focusedPanelWidgetId) {
-			getWidgetDetailsRef(focusedPanelWidgetId)?.centerDetailsPanel();
+			getWidgetDetailsRef(focusedPanelWidgetId)?.keepPanelInViewport?.();
 		}
 	}}
 />
@@ -10190,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). -->
@@ -10219,6 +11547,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	<svelte:component this={WidgeticCanvas}
 		bind:this={canvasRef}
 		showContainerFrame={!embedded}
+		bind:wireframeMode={canvasWireframeMode}
+		advancedFeatures={canvasAdvancedFeatures}
 		onReady={handleCanvasReady}
 		onAutoSave={handleCanvasAutoSave}
 		onBeforeUnmount={(json) => {
@@ -10234,9 +11564,20 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		onWidgetShapeDeleting={handleWidgetShapeDeleting}
 		onWidgetRename={handleWidgetRename}
 		onRefreshScreenshot={handleRefreshScreenshot}
+		onSetPrimaryWidget={handleSetPrimaryWidget}
 		getWidgetName={getWidgetNameById}
 		isWidgetKnown={isWidgetKnownById}
-		onNonWidgetSelected={() => { widgetDetails?.closeWidgetDetails(); }}
+		onNonWidgetSelected={() => {
+			if (suppressWidgetDetailsClose || isConvertOrDraftPanelOpen()) {
+				console.log('[CreatorApp] Skip Widget Details close — convert/draft panel is open');
+				return;
+			}
+			const active = canvasRef?.getSelectedObject?.() ?? canvasRef?.selectedObject;
+			if (active?._isWidgetImage && active?._widgetId) {
+				return;
+			}
+			widgetDetails?.closeWidgetDetails();
+		}}
 		panZoomPosition="TC"
 		showSaveButton={true}
 		autosaveDelayMs={import.meta.env.DEV ? 15000 : 5000}
@@ -10534,7 +11875,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 			<!-- ═══ PANEL 3: Widget Details — one floating panel per opened widget ═══ -->
 			{#if WidgetDetails}
-			{#each openWidgetPanelIds as panelWidgetId, panelIndex (panelWidgetId)}
+			{#each openWidgetPanelIds as panelWidgetId, panelIndex (panelInstanceKeyByWidgetId[panelWidgetId] ?? panelWidgetId)}
+			{@const panelInstanceKey = panelInstanceKeyByWidgetId[panelWidgetId] ?? panelWidgetId}
 			{@const panelWidget = widgetsById.get(panelWidgetId) ?? null}
 			{@const isPanelFocused = focusedPanelWidgetId === panelWidgetId}
 			{@const ps = (panelDisplayRevision, getPanelDisplayState(panelWidgetId))}
@@ -10542,7 +11884,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			{@const panelHasCompileErrorState = (panelDisplayRevision, panelHasCompileError(panelWidgetId))}
 			{@const panelHasInfraPreviewError = (panelDisplayRevision, panelHasInfrastructurePreviewError(panelWidgetId))}
 			<svelte:component this={WidgetDetails}
-				bind:this={widgetDetailsRefs[panelWidgetId]}
+				bind:this={widgetDetailsRefs[panelInstanceKey]}
 				userSession={$userSession}
 				{hasValidToken}
 				selectedWidgetId={panelWidgetId}
@@ -10563,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}
@@ -10591,7 +11933,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				isFocusedPanel={isPanelFocused}
 				panelTopOffset={widgetsPanelTopOffset}
 				panelBottomMargin={embedded ? 24 : widgetsPanelBottomMargin}
-				fillViewport={embedded}
+				fillViewport={false}
 				currentStep={ps.widgetDetailsStep}
 				on:focusPanel={() => focusWidgetPanel(panelWidgetId)}
 				on:stepChange={({ detail }) => {
@@ -10639,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;
@@ -10649,17 +11994,26 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				on:buildFromRepoSuccess={({ detail }) => {
 					console.log('[WidgetCreator] Build from repo succeeded for widget:', detail.widgetId);
 					if (detail.widgetId !== panelWidgetId) return;
-					patchPanelSnapshot(detail.widgetId, { panelPreviewCompileError: null });
+					const repoHead =
+						detail.repoHeadCommitSha ||
+						detail.repo_head_commit_sha ||
+						null;
+					const hasSha = typeof repoHead === 'string' && repoHead.length > 0;
+					if (hasSha) {
+						saveCommitIdForWidget(detail.widgetId, repoHead);
+					}
+					// Always persist hasGeneratedCode on the snapshot so Publish re-renders
+					// even when Worker cache hits without a SHA and the panel is unfocused.
+					patchPanelSnapshot(detail.widgetId, {
+						panelPreviewCompileError: null,
+						hasGeneratedCode: true,
+						...(hasSha ? { lastCommitId: repoHead } : {}),
+					});
 					if (detail.widgetId === panelWidgetId) {
-						if (isPanelFocused) hasGeneratedCode = true;
-						const repoHead =
-							detail.repoHeadCommitSha ||
-							detail.repo_head_commit_sha ||
-							null;
-						if (repoHead && typeof repoHead === 'string') {
-							saveCommitIdForWidget(detail.widgetId, repoHead);
-							patchPanelSnapshot(detail.widgetId, { lastCommitId: repoHead, hasGeneratedCode: true });
-							if (isPanelFocused) lastCommitId = repoHead;
+						hasGeneratedCode = true;
+						if (hasSha) lastCommitId = repoHead;
+						if (!hasSha) {
+							void reconcileWidgetHeadCommit(detail.widgetId);
 						}
 						if (isPanelFocused && generateCodeStatus?.includes('preview build failed')) {
 							generateCodeStatus = 'Code generation completed! Preview ready.';
@@ -10780,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) {
@@ -10792,6 +12153,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				on:widgetDetailsToggle={({ detail }) => {
 					const isClosing = detail?.open === false || detail?.showWidgetDetails === false;
 					if (isClosing) {
+						if (suppressWidgetDetailsClose) {
+							console.log('[CreatorApp] Ignoring Widget Details close during draft→widget migrate');
+							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();
@@ -10821,21 +12189,19 @@ $: 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 min-h-0"
+					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) -->
-				<div class="generation-chat-sticky-header sticky top-0 z-10 bg-white border-b border-gray-200">
-					<div class="generation-chat-title flex items-center gap-2 px-3 py-1.5 bg-gray-50">
-						<h4 class="text-xs font-semibold text-gray-700">Widget Generation Chat</h4>
-					</div>
-					{#if debugMode}
+				<!-- Sticky header: title + model selectors (debug mode).
+				     z-20 keeps it above Chat's inline error banner (z-10) so the
+				     banner scrolls under the dropdowns instead of covering them. -->
+				{#if debugMode}
+				<div class="generation-chat-sticky-header shrink-0 z-20 bg-white border-b border-gray-200">
 					<!-- svelte-ignore a11y_label_has_associated_control -->
-					<div class="generation-models-header flex items-center gap-2 px-2 py-0.5 bg-gray-100 border-t border-gray-200">
-						<span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide">Models</span>
-					</div>
-					<div class="model-selectors-bar flex items-center gap-3 px-2 py-1.5 bg-gray-50">
+					<div class="generation-models-header flex items-center gap-2 px-2 py-1.5 bg-gray-50">
+						<span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide shrink-0">Models</span>
 						<div class="planner-model-selector flex items-center gap-1.5 flex-1 min-w-0">
 							<label class="text-[10px] text-gray-500 font-medium whitespace-nowrap">Planner:</label>
 							<select
@@ -10869,13 +12235,14 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							</select>
 						</div>
 					</div>
-					{/if}
 				</div>
+				{/if}
 
+				<div class="generation-scroll-ct flex flex-col shrink-0 overflow-visible">
 				<!-- Chat-based Code Generation Panel -->
-				{#key panelWidgetId}
-						<Chat class="code-generation-chat"
-							style="height: {ps.chatContainerHeight}px;"
+				{#key panelInstanceKey}
+						<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}
@@ -10905,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)}
@@ -10984,41 +12353,34 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							</div>
 						{/if}
 					</div>
-				</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"
+					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)
@@ -11033,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>
@@ -11047,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}" 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}
@@ -11077,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>
@@ -11140,44 +12501,36 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 				<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}
 
@@ -11339,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}
@@ -11453,9 +12809,11 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 				</div>
 
 			{#if lastPublishedVersion !== null}
-			{@const embedSrc = selectedComposition
-				? `${apiRoot ?? ''}/widgets/${selectedWidgetId}/v${lastPublishedVersion}/widget.html?compositionId=${selectedComposition.id}`
-				: `${apiRoot ?? ''}/widgets/${selectedWidgetId}/v${lastPublishedVersion}/widget.html`}
+			{@const embedSrc = publishedWidgetHtmlUrl(
+				selectedWidgetId,
+				lastPublishedVersion,
+				selectedComposition?.id
+			)}
 			{@const embedCodeResult = generateEmbedCode(embedFormat, {
 				embedSrc,
 				compositionId: selectedComposition?.id ?? null,
@@ -11623,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}
@@ -11641,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"