@widgetic/creator 0.3.49 → 0.3.50

package/dist/CreatorApp.svelte

@@ -110,10 +110,33 @@
 		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_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';
 
 	/** 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> {
@@ -347,7 +370,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';
@@ -600,6 +630,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 +654,16 @@
 	/** 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>();
+
 	// Chat component reference and context (focused panel)
 	let chatMethods: {
 		sendMessage: (content: string, attachments?: File[]) => Promise<void>;
@@ -639,10 +681,19 @@
 		markWidgetHeadAtLatestCommit?: () => void;
 		updateLatestCodegenStatusMessage?: (content: string) => void;
 		reloadConversationMessages?: () => Promise<void>;
+		/** Select an existing conversation in the chat UI (keep DB thread and visible chat in sync). */
+		selectConversation?: (conversationId: string) => void;
 	} | 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;
 
@@ -743,7 +794,27 @@
 			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 || [])
 			.map((attachment) => attachment.uploadId)
 			.filter((id): id is string => Boolean(id));
@@ -768,20 +839,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,9 +862,9 @@
 		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)) {
 			showToast('warning', 'Lipsește imaginea de referință', {
@@ -807,7 +878,7 @@
 		await generateCode({
 			prompt: content,
 			fromChat: true,
-			widgetId,
+			widgetId: codegenWidgetId,
 			attachmentIds: cdnUploadIds.length > 0 ? cdnUploadIds : undefined,
 			promptImagesOverride: effectivePromptImages.length > 0 ? effectivePromptImages : undefined,
 		});
@@ -891,12 +962,27 @@
 			: prompt;
 	}
 
-	/** Persist the user prompt to DB only when generation actually starts. */
+	/**
+	 * 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).
+	 */
 	async function ensureCodegenUserMessagePersisted(widgetId: string, prompt: string): 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';
@@ -904,6 +990,12 @@
 				convId = conv?.id;
 			}
 			if (!convId) return;
+			if (convId !== visibleConversationId) {
+				// Point the panel chat at the conversation that will hold the messages
+				// so a later reopen shows the same thread the codegen used.
+				panelChat?.selectConversation?.(convId);
+				patchPanelSnapshot(widgetId, { currentChatConversationId: convId });
+			}
 
 			const messages = await handleLoadMessages(convId);
 			const hasUserMessage = messages?.some(
@@ -962,8 +1054,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 +1082,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;
@@ -1066,13 +1179,16 @@
 				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 };
@@ -1358,10 +1474,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 +1491,15 @@
 		}
 
 		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;
+			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,8 +1554,8 @@
 	let editingCompositionName = '';
 	let deletingCompositionId: string | null = null;
 
-	/** Default chat container height (px) per Widget Details panel. */
-	const DEFAULT_CHAT_CONTAINER_HEIGHT = 550;
+	/** Minimum chat height; flex-1 grows to fill leftover space above Publish. */
+	const DEFAULT_CHAT_CONTAINER_HEIGHT = 280;
 	const CHAT_MIN_HEIGHT = 260;
 	const CHAT_MAX_HEIGHT = 1400;
 
@@ -2052,11 +2171,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();
@@ -2708,7 +2831,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 +2839,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 +2869,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 +2913,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 +2927,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 +3002,108 @@
 		toggleDebugMode();
 	}
 
+	let canvasWireframeMode = true;
+	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 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 +3563,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 +3605,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) {
+					canvasRef.setPrimaryWidgetShape?.(primaryId);
+					canvasRef.selectWidgetShape(primaryId);
+				}
+			}
 		} catch (error) {
 			console.error('Widget Creator: Load canvases error:', error);
 			const defaultError = 'Failed to load canvases';
@@ -3714,34 +3962,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 +4173,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,23 +4424,93 @@
 		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;
 		}
 
+		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;
 
 		function deepLinkOpenStillValid(): boolean {
@@ -4205,8 +4529,8 @@
 				embeddedInitialStepPending = false;
 			}
 			embeddedDeepLinkAutoOpenDone = true;
-			if (!openWidgetPanelIds.includes(deepLinkWidgetId) && deepLinkOpenStillValid()) {
-				await openWidgetDetailsPanel(deepLinkWidgetId);
+			if (canvasRef && deepLinkWidgetId) {
+				canvasRef.selectWidgetShape(deepLinkWidgetId);
 			}
 			return;
 		}
@@ -4245,11 +4569,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 +4603,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 +4617,7 @@
 		if (shapeWidgetIds.length > 0) {
 			await mergeWidgetsLinkedOnCanvas(shapeWidgetIds);
 		}
-		if (embedded && resolveEmbeddedDeepLinkWidgetId()) {
+		if (embedded) {
 			await ensureEmbeddedWidgetDeepLink();
 		}
 	}
@@ -4312,7 +4638,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 +4693,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 +4892,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 +4959,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 +4975,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);
 			}
 		}
@@ -5238,9 +5566,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 +5725,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-')
 		);
 	}
 
@@ -5481,6 +5829,8 @@
 					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));
 			}
@@ -5640,11 +5990,27 @@ Requirements:
 		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 +6030,7 @@ Requirements:
 					: 'panel prompt';
 		console.log(
 			'[generateCode] Widget',
-			targetWidgetId.substring(0, 8),
+			codegenTargetWidgetId.substring(0, 8),
 			'| prompt source:',
 			promptSourceLabel,
 			'| Length:',
@@ -5672,17 +6038,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,7 +6060,7 @@ Requirements:
 		await performCodeGeneration(trimmedPrompt, {
 			queued: false,
 			fromChat: options.fromChat,
-			widgetId: targetWidgetId,
+			widgetId: codegenTargetWidgetId,
 			compileFixOnly: options.compileFixOnly,
 			attachmentIds: options.attachmentIds,
 			promptImagesOverride: options.promptImagesOverride,
@@ -5813,13 +6179,20 @@ 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/') && url.length > 100,
+			);
 			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;
+				panelPromptImages = chatAttachmentUrls.filter(
+					(url) => typeof url === 'string' && url.startsWith('data:image/') && url.length > 100,
+				);
 			}
 			let imagesToSend: string[] | undefined;
 			let attachmentIdsToSend: string[] | undefined;
@@ -5830,11 +6203,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 +6231,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.',
@@ -5875,7 +6259,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: {
@@ -6118,6 +6502,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);
@@ -6238,6 +6637,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();
@@ -6654,6 +7062,10 @@ Requirements:
 			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_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 +7090,12 @@ 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_OPEN_WIDGET_DETAILS_EVENT, handleHostOpenWidgetDetailsEvent);
+		window.addEventListener(HOST_DUPLICATE_WIDGET_EVENT, handleHostDuplicateWidgetEvent);
+		window.addEventListener(HOST_DELETE_WIDGET_EVENT, handleHostDeleteWidgetEvent);
 		emitCreatorDebugChanged();
+		emitCreatorWireframeChanged();
 	});
 
 	// Capture-phase Escape: close lightbox before Canvas can deselect → close WidgetDetails
@@ -6794,7 +7210,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 {
@@ -7108,7 +7529,7 @@ Requirements:
 			publishHistoryResolved: false,
 			publishHistoryResolvedForWidgetId: null,
 			pendingPublishAfterCodegen: false,
-			hasGeneratedCode: false,
+			hasGeneratedCode: !!loadCommitIdForWidget(widgetId),
 			liveDesignValues: {},
 			liveContentValues: {},
 			liveContentItems: [],
@@ -7498,20 +7919,43 @@ Requirements:
 		retryStalePanelSchemaLoads();
 	}
 
+	function positionOpenDetailsPanel(widgetId: string): void {
+		const rect = canvasRef?.getWidgetShapeScreenRect?.(widgetId) ?? null;
+		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 (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 +7966,10 @@ Requirements:
 				continue;
 			}
 			const ref = getWidgetDetailsRef(widgetId);
+			if (openGen !== widgetDetailsOpenGen || widgetDetailsOpenTargetId !== widgetId) return;
 			if (ref) {
 				ref.openWidgetDetails();
+				positionOpenDetailsPanel(widgetId);
 				ensurePanelEditorData(widgetId);
 				break;
 			}
@@ -7532,20 +7978,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 +7995,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 +8014,49 @@ 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;
+		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 +8071,17 @@ Requirements:
 			embeddedDeepLinkPanelDismissed = true;
 			embeddedDeepLinkRequestGen++;
 		}
+		if (!options.fromShapeSwitch && widgetDetailsOpenTargetId === widgetId) {
+			widgetDetailsOpenTargetId = 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,6 +8103,7 @@ Requirements:
 		}
 		openWidgetPanelIds = [];
 		widgetDetailsRefs = {};
+		panelInstanceKeyByWidgetId = {};
 		focusedPanelWidgetId = null;
 		panelZIndexByWidgetId = {};
 		showWidgetDetails = false;
@@ -7627,14 +8111,16 @@ Requirements:
 
 	/** 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
@@ -7990,8 +8476,12 @@ Requirements:
 				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;
+					const raw = prop.value !== undefined ? prop.value : prop.defaultValue;
+					if (raw === undefined || flat[name] !== undefined) continue;
+					if (raw && typeof raw === 'object' && 'url' in raw) {
+						flat[name] = (raw as { url?: string }).url ?? '';
+					} else {
+						flat[name] = raw;
 					}
 				}
 			}
@@ -8003,6 +8493,33 @@ Requirements:
 		});
 	}
 
+	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;
+		if (contentItemHasProperties(item)) return item;
+		if (!contentItemHasProperties(template)) return item;
+		const clonedTemplate = JSON.parse(JSON.stringify(template));
+		const nextProperties = clonedTemplate.properties.map((prop: any) => {
+			const key = prop.id || prop.name;
+			const incoming = key != null ? item[key] : undefined;
+			return {
+				...prop,
+				value: incoming !== undefined ? incoming : (prop.defaultValue ?? prop.value)
+			};
+		});
+		return {
+			...clonedTemplate,
+			...item,
+			id: item.id,
+			title: item.title || clonedTemplate.title,
+			properties: nextProperties
+		};
+	}
+
 	function mergeContentItemsWithSchema(savedItems: any[], schemaItems: any[]): any[] {
 		if (!Array.isArray(schemaItems) || schemaItems.length === 0) {
 			return Array.isArray(savedItems) ? [...savedItems] : [];
@@ -8010,14 +8527,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;
@@ -8255,12 +8775,10 @@ 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 only when codegen just finished
+		// or HEAD is proven different from the live SHA. Do not enable just because
+		// live SHA is still hydrating (that looked like "always publish v2").
+		if (pendingPublish || (headSha && liveSha && !commitsMatch(headSha, liveSha))) {
 			return {
 				disabled: false,
 				label: `Publish new v${nextVersion}`,
@@ -8311,6 +8829,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] &&
@@ -8586,6 +9107,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 +9160,7 @@ $: if (selectedWidgetId && canvasRef && conversationsClient && messagesClient &&
 			}
 		}).catch(() => {});
 	}
+	}
 }
 
 // Show "Confirm Generation" dialog for converted widgets that have a prompt + repo
@@ -8642,6 +9169,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 +9196,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)
@@ -9032,8 +9565,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);
@@ -9269,14 +9805,29 @@ $: 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) {
+			canvasRef.setPrimaryWidgetShape?.(primaryId);
+			const found = canvasRef.selectWidgetShape(primaryId);
+			console.log('[CreatorApp] Primary widget shape after canvas load:', primaryId, found);
+		}
 	}
 
 	/**
@@ -9364,12 +9915,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 +9973,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				}
 				markCanvasStateLoaded();
 				if (canvasShapesLoaded) canvasApiLoadError = null;
+				if (objectCount > 0) canvasShapesMissingWarning = false;
 				isLoadCooldownActive = true;
 				setTimeout(() => { isLoadCooldownActive = false; }, 3000);
 				lastSavedCanvasObjectCount = objectCount;
@@ -9569,179 +10131,300 @@ $: 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);
+
+		// 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.';
+			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);
+			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;
+		}
+	}
+
+	/**
+	 * 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);
+			// 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,
+			} 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, updating in place');
+				positionOpenDetailsPanel(widgetId);
 			} 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);
+	}
+
 
 	/**
 	 * Creates or recreates a repository for a specific widget.
@@ -10033,7 +10716,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	}}
 	onresize={() => {
 		if (focusedPanelWidgetId) {
-			getWidgetDetailsRef(focusedPanelWidgetId)?.centerDetailsPanel();
+			getWidgetDetailsRef(focusedPanelWidgetId)?.keepPanelInViewport?.();
 		}
 	}}
 />
@@ -10219,6 +10902,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 	<svelte:component this={WidgeticCanvas}
 		bind:this={canvasRef}
 		showContainerFrame={!embedded}
+		bind:wireframeMode={canvasWireframeMode}
 		onReady={handleCanvasReady}
 		onAutoSave={handleCanvasAutoSave}
 		onBeforeUnmount={(json) => {
@@ -10234,9 +10918,20 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		onWidgetShapeDeleting={handleWidgetShapeDeleting}
 		onWidgetRename={handleWidgetRename}
 		onRefreshScreenshot={handleRefreshScreenshot}
+		onSetPrimaryWidget={handleSetPrimaryWidget}
 		getWidgetName={getWidgetNameById}
 		isWidgetKnown={isWidgetKnownById}
-		onNonWidgetSelected={() => { widgetDetails?.closeWidgetDetails(); }}
+		onNonWidgetSelected={() => {
+			if (suppressWidgetDetailsClose) {
+				console.log('[CreatorApp] Skip Widget Details close — canvas selection changed during draft finalize');
+				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 +11229,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 +11238,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}
@@ -10591,7 +11287,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 }) => {
@@ -10649,17 +11345,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.';
@@ -10792,6 +11497,14 @@ $: 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;
+						}
+						if (widgetDetailsOpenTargetId && widgetDetailsOpenTargetId !== panelWidgetId) {
+							console.log('[CreatorApp] Ignoring close from previous details panel:', panelWidgetId?.substring(0, 8));
+							return;
+						}
 						if (isPanelFocused && selectedWidgetId) {
 							savePromptForWidget(selectedWidgetId);
 							captureFocusedPanelSnapshot();
@@ -10822,20 +11535,17 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				<svelte:fragment slot="code-generation">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="parallel-panel-left-slot-ct flex flex-col min-h-0"
+					class="parallel-panel-left-slot-ct flex flex-col flex-1 min-h-0 overflow-hidden h-full"
 					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 +11579,14 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							</select>
 						</div>
 					</div>
-					{/if}
 				</div>
+				{/if}
 
+				<div class="generation-scroll-ct flex flex-col flex-1 min-h-0 overflow-y-auto scrollbar-thin">
 				<!-- Chat-based Code Generation Panel -->
-				{#key panelWidgetId}
-						<Chat class="code-generation-chat"
-							style="height: {ps.chatContainerHeight}px;"
+				{#key panelInstanceKey}
+						<Chat class="code-generation-chat flex-1 w-full shrink-0"
+							style="min-height: {ps.chatContainerHeight}px;"
 							resizeExpandsContainer={true}
 							onMessagesResize={(deltaPx) => handleChatMessagesResize(panelWidgetId, deltaPx)}
 							showLogs={debugMode}
@@ -10984,13 +11695,9 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							</div>
 						{/if}
 					</div>
-				</div>
-				</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 mt-2"
 					onmousedown={() => { if (!isPanelFocused) focusWidgetPanel(panelWidgetId); }}
 				>
 		<!-- ===== Publish Widget Section ===== -->
@@ -11053,7 +11760,7 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 					{/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">
+						<a href="/test-widget?widgetId={panelWidgetId}&version={ps.lastPublishedVersion}&url={encodeURIComponent(publishedWidgetHtmlUrl(panelWidgetId, ps.lastPublishedVersion))}" target="_blank" rel="noopener noreferrer" class="flex justify-center items-center gap-1.5 w-full text-sm px-3 py-2 rounded-lg border border-emerald-200 bg-white text-emerald-700 hover:bg-emerald-50 transition-colors">
 							Open Published Widget (v{ps.lastPublishedVersion}) ↗
 						</a>
 					{/if}
@@ -11135,8 +11842,12 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 
 		</div> <!-- end of publish-widget-section -->
 				</div>
+				</div> <!-- generation-scroll-ct -->
+				</div> <!-- parallel-panel-left-slot-ct -->
 				</svelte:fragment>
 
+				<svelte:fragment slot="publish-widget"></svelte:fragment>
+
 				<svelte:fragment slot="composition-editor">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
@@ -11453,9 +12164,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,