@widgetic/creator 0.3.54 → 0.3.56

package/dist/components/WidgetDetails.svelte

@@ -32,6 +32,13 @@
 	import { userSession as userSessionStore } from '../stores/userSession.js';
 
 	import { WidgetPreview } from '@widgetic/editor';
+	import HoverTooltip from './HoverTooltip.svelte';
+	import EditableName from './EditableName.svelte';
+
+	const HEADER_ELEMENTS_GAP_PX = 6;
+	const HEADER_PADDING_PX = HEADER_ELEMENTS_GAP_PX + 2;
+	const HEADER_NAME_MIN_WIDTH_PX = 22;
+	const DETAILS_DRAG_THRESHOLD_PX = 5;
 
 	const dispatch = createEventDispatcher();
 
@@ -278,6 +285,14 @@
 	// ═══════════════════════════════════════════════════════════════════════
 	type WidgetStep = 'create' | 'edit' | 'embed';
 	export let currentStep: WidgetStep = 'create';
+	/**
+	 * Canvas Creator is code-only (chat + preview). Edit/Embed header steps stay
+	 * off until composition editing lives on /composition. Keep the Edit/Embed
+	 * panels mounted (CSS-hidden) so we can turn this back on without ripping slots.
+	 */
+	export let showCompositionSteps: boolean = false;
+	/** After Set live, Create preview stays on that published artifact until the next Worker build. */
+	let pinnedPublishedPreviewUrl: string | null = null;
 
 	const STEPS: { id: WidgetStep; label: string; number: number }[] = [
 		{ id: 'create', label: 'Create', number: 1 },
@@ -299,8 +314,15 @@
 		previewError = null;
 		if (!iframeSrc) previewLoading = true;
 	}
-	$: canEditStep = lastPublishedVersion !== null && !isGeneratingCode;
-	$: canEmbedStep = lastPublishedVersion !== null && !isGeneratingCode;
+	$: canEditStep = showCompositionSteps && lastPublishedVersion !== null && !isGeneratingCode;
+	$: canEmbedStep = showCompositionSteps && lastPublishedVersion !== null && !isGeneratingCode;
+	$: activeWorkflowStep = showCompositionSteps ? currentStep : 'create';
+
+	$: if (!showCompositionSteps && currentStep !== 'create') {
+		currentStep = 'create';
+		dispatch('stepChange', { step: 'create' });
+		switchPreviewUrlForStep('create');
+	}
 
 	// Auto-switch back to Create when code generation starts
 	let _justFinishedGenerating = false;
@@ -314,6 +336,7 @@
 		previewError = null;
 		previewHasRuntimeError = false;
 		previewRuntimeErrorStatus = null;
+		pinnedPublishedPreviewUrl = null;
 	}
 
 	// Default step on widget switch: always open on Create
@@ -326,6 +349,7 @@
 		}
 		currentStep = 'create';
 		dispatch('stepChange', { step: 'create' });
+		pinnedPublishedPreviewUrl = null;
 		const createBase = normalizePreviewBaseUrl(
 			toPreviewFetchUrl(resolvePreviewUrlForStep('create') ?? '')
 		);
@@ -347,6 +371,7 @@
 
 	function canNavigateToStep(step: WidgetStep): boolean {
 		if (step === 'create') return true;
+		if (!showCompositionSteps) return false;
 		if (step === 'edit') return canEditStep;
 		if (step === 'embed') return canEmbedStep;
 		return false;
@@ -399,6 +424,10 @@
 				dynamicWorkerPreviewUrl = workerUrl;
 				syncPreviewDisplayUrlForStep('create');
 				void forceReloadPreviewIframe(workerUrl);
+			} else if ((step === 'edit' || step === 'embed') && nextResolved) {
+				// Always remount Edit/Embed on the published URL — skip-reload left the previous
+				// live version in the iframe after auto-publish on Create.
+				void forceReloadPreviewIframe(nextResolved);
 			} else {
 				switchPreviewUrlForStep(step, { forceReload: crossingPreviewFamily });
 			}
@@ -422,7 +451,7 @@
 	/** Resolve the canonical preview URL for a workflow step (without cache buster). */
 	function resolvePreviewUrlForStep(step: WidgetStep): string | null {
 		if (step === 'create') {
-			return dynamicWorkerPreviewUrl;
+			return pinnedPublishedPreviewUrl || dynamicWorkerPreviewUrl;
 		}
 		// Use published URL unless probe already confirmed it missing.
 		// Waiting for publishedArtifactReachable === true left Edit/Embed on the idle
@@ -454,6 +483,16 @@
 		}, 3000);
 	}
 
+	/** Load a published CDN artifact (Set live) even on Create — pin until next Worker build. */
+	export function showPublishedArtifact(url: string | null): void {
+		if (!url) return;
+		pinnedPublishedPreviewUrl = url;
+		publishedArtifactReachable = true;
+		_lastEditPreviewBase = null;
+		_lastEmbedPreviewBase = null;
+		void forceReloadPreviewIframe(url);
+	}
+
 	export function finishCompositionHydration(): void {
 		if (compositionHydrationTimeout) {
 			clearTimeout(compositionHydrationTimeout);
@@ -532,9 +571,12 @@
 		}
 		directPreviewUrl = toPreviewDisplayUrl(fetchUrl);
 		let nextFull = fetchUrl;
+		const isImmutableCdnUrl = /cdn\.widgetic\.com/i.test(fetchUrl) && /\/v\d+\//i.test(fetchUrl);
 		try {
 			const parsed = new URL(fetchUrl, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
-			parsed.searchParams.set('_t', (cacheBuster ?? Date.now()).toString());
+			if (!isImmutableCdnUrl || cacheBuster !== undefined) {
+				parsed.searchParams.set('_t', (cacheBuster ?? Date.now()).toString());
+			}
 			nextFull = parsed.toString();
 		} catch {
 			nextFull = fetchUrl;
@@ -666,8 +708,7 @@
 		const editBase = editSource ? normalizePreviewBaseUrl(toPreviewFetchUrl(editSource)) : null;
 		if (editBase && editBase !== _lastEditPreviewBase) {
 			_lastEditPreviewBase = editBase;
-			// Prop-driven URL changes must apply even right after step switch (parallel panels)
-			switchPreviewUrlForStep('edit', { forceReload: !_stepSwitchInProgress });
+			void forceReloadPreviewIframe(editSource);
 		}
 	}
 
@@ -753,7 +794,7 @@
 	export function markCodegenPreviewFresh(): void {
 		codegenPreviewFreshUntil = Date.now() + 30_000;
 		widgetNotFoundAutoRebuildAttempts = 1;
-		console.log('[WidgetDetails] Codegen preview marked fresh — skipping GitLab rebuilds for 30s');
+		// console.log('[WidgetDetails] Codegen preview marked fresh — skipping GitLab rebuilds for 30s');
 	}
 
 	/** True when the iframe is already showing this widget's Worker preview (not about:blank / error). */
@@ -812,6 +853,8 @@
 
 	function handleWidgetConsoleMessage(event: MessageEvent) {
 		if (!event.data || typeof event.data !== 'object') return;
+		const activeWin = previewIframe?.contentWindow;
+		if (!activeWin || event.source !== activeWin) return;
 		const { type, level, message, args } = event.data;
 		if (type !== 'widgetic:console') return;
 		const entry: ConsoleLogEntry = {
@@ -869,19 +912,19 @@
 	$: detailsPanelTopOffset = panelTopOffset ?? legacyTopOffset;
 	$: detailsPanelBottomMargin = panelBottomMargin ?? legacyBottomMargin;
 
-	const DETAILS_PANEL_DEFAULT_WIDTH = 800;
-	const DETAILS_PANEL_MAX_WIDTH = 800;
+	const DETAILS_PANEL_DEFAULT_WIDTH = 1000;
+	const DETAILS_PANEL_MAX_WIDTH = 1200;
 	const DETAILS_PANEL_MAX_HEIGHT = 800;
-	const DETAILS_PANEL_MIN_WIDTH = 320;
+	const DETAILS_PANEL_MIN_WIDTH = 480;
 	const DETAILS_PANEL_MIN_HEIGHT = 400;
 	const DETAILS_PANEL_FILL_INSET = 16;
 	const DETAILS_PANEL_SHAPE_GAP = 12;
-	/** Left column share of the two-col layout (chat / PropsEditor). */
-	const LEFT_COL_DEFAULT_PERCENT = 58;
+	/** Left column share of the two-col layout (chat / PropsEditor). Preview gets the rest. */
+	const LEFT_COL_DEFAULT_PERCENT = 50;
 	const LEFT_COL_MIN_PERCENT = 32;
-	const LEFT_COL_MAX_PERCENT = 72;
+	const LEFT_COL_MAX_PERCENT = 62;
 	const COL_RESIZER_PX = 10;
-	const PREVIEW_COL_MIN_PX = 240;
+	const PREVIEW_COL_MIN_PX = 420;
 	/** Chat-first layout: preview column starts collapsed and opens on generate. */
 	let previewColumnCollapsed = true;
 	let lastAutoExpandForGenerating = false;
@@ -924,36 +967,33 @@
 
 	function collapsePreviewColumn() {
 		previewColumnCollapsed = true;
-		if (widthBeforePreviewExpand > 0) {
-			detailsPanelWidth = widthBeforePreviewExpand;
-			widthBeforePreviewExpand = 0;
-			leftColPercent = LEFT_COL_DEFAULT_PERCENT;
-		}
-		console.log('[WidgetDetails] Preview column minimized, restored width', detailsPanelWidth);
+		widthBeforePreviewExpand = 0;
+		leftColPercent = LEFT_COL_DEFAULT_PERCENT;
+		detailsPanelWidth = DETAILS_PANEL_MIN_WIDTH;
+		console.log('[WidgetDetails] Close Preview — panel width', detailsPanelWidth);
 	}
 
 	function expandPreviewColumn() {
 		if (!previewColumnCollapsed) return;
-		widthBeforePreviewExpand = detailsPanelWidth;
 		previewColumnCollapsed = false;
-		const extraWidth = 420;
-		const maxRight = typeof window !== 'undefined' ? window.innerWidth - 8 : detailsPanelWidth;
-		const expandedWidth = widthBeforePreviewExpand + extraWidth;
-		const fittedWidth = Math.min(expandedWidth, Math.max(widthBeforePreviewExpand, maxRight - detailsPanelX));
-		detailsPanelWidth = Math.max(widthBeforePreviewExpand, fittedWidth);
-		const usable = Math.max(1, detailsPanelWidth);
-		leftColPercent = clampLeftColPercent((widthBeforePreviewExpand / usable) * 100);
-		console.log('[WidgetDetails] Preview column expanded', {
-			from: widthBeforePreviewExpand,
-			to: detailsPanelWidth,
-			leftColPercent,
-		});
+		leftColPercent = clampLeftColPercent(LEFT_COL_DEFAULT_PERCENT);
+		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
+		if (typeof window !== 'undefined' && detailsPanelX + detailsPanelWidth > window.innerWidth - 8) {
+			detailsPanelX = Math.max(8, window.innerWidth - 8 - detailsPanelWidth);
+		}
+		console.log('[WidgetDetails] Open Preview — panel width', detailsPanelWidth);
 		tick().then(() => requestAnimationFrame(() => fitPreviewToArea()));
 	}
 
 	let detailsPanelX = -1;
 	let detailsPanelY = -1;
 	let isDraggingDetails = false;
+	let pendingDetailsDrag = false;
+	let detailsDragBarEl: HTMLElement | null = null;
+	let widgetDetailsNameCtEl: HTMLElement | null = null;
+	let widgetDetailsStepsRowEl: HTMLElement | null = null;
+	let widgetDetailsDebugButtonsEl: HTMLElement | null = null;
+	let headerNameMaxWidthPx = 96;
 	let detailsDragStartX = 0;
 	let detailsDragStartY = 0;
 	let detailsInitialX = 0;
@@ -998,7 +1038,7 @@
 			const pageOrigin = typeof window !== 'undefined' ? window.location.origin : '';
 			const isApiProxy = !!(apiBaseUrl && fetchUrl.startsWith(apiBaseUrl));
 			if (pageOrigin && absolute.origin !== pageOrigin && !isApiProxy) {
-				console.log('[WidgetDetails] Skipping cross-origin HEAD probe (CORS); loading in iframe:', absolute.origin);
+				// console.log('[WidgetDetails] Skipping cross-origin HEAD probe (CORS); loading in iframe:', absolute.origin);
 				return true;
 			}
 		} catch {
@@ -1057,11 +1097,11 @@
 		if (iframeSrc && previewLoadedForWidgetId === widgetId) {
 			previewBuildDeferred = false;
 			previewLoading = false;
-			console.log('[WidgetDetails] Preview already loaded, skipping pipeline:', widgetId.substring(0, 8));
+			// console.log('[WidgetDetails] Preview already loaded, skipping pipeline:', widgetId.substring(0, 8));
 			return;
 		}
 		if (shouldDeferPreviewNetworkWork()) {
-			console.log('[WidgetDetails] Deferring preview load (background panel):', widgetId.substring(0, 8));
+			// console.log('[WidgetDetails] Deferring preview load (background panel):', widgetId.substring(0, 8));
 			previewBuildDeferred = true;
 			previewLoading = false;
 			previewError = null;
@@ -1092,10 +1132,10 @@
 		}
 
 		if (probeResult === 'not-found') {
-			console.log('[WidgetDetails] Widget not on Worker — published artifact or build-from-repo', {
-				widgetId: capturedWidgetId.substring(0, 8),
-				hasJwt: !!getAuthJwt(),
-			});
+			// console.log('[WidgetDetails] Widget not on Worker — published artifact or build-from-repo', {
+				// widgetId: capturedWidgetId.substring(0, 8),
+				// hasJwt: !!getAuthJwt(),
+			// });
 			if (isGeneratingCode) {
 				previewLoading = true;
 				previewError = null;
@@ -1108,13 +1148,13 @@
 			if (!hasRepo) {
 				const fallbackUrl = publishedHtmlUrlFromJsPath(widgetJsPath);
 				if (fallbackUrl) {
-					console.log('[WidgetDetails] No repo yet — loading js_path artifact', fallbackUrl);
+					// console.log('[WidgetDetails] No repo yet — loading js_path artifact', fallbackUrl);
 					previewError = null;
 					applyPreviewUrlToIframe(fallbackUrl);
 					previewLoading = false;
 					return;
 				}
-				console.log('[WidgetDetails] No repository yet — skipping build-from-repo');
+				// console.log('[WidgetDetails] No repository yet — skipping build-from-repo');
 				previewLoading = false;
 				previewError = 'NO_CODE_YET';
 				return;
@@ -1127,7 +1167,7 @@
 		directPreviewUrl = workerPreviewUrl;
 		previewLoading = true;
 		switchPreviewUrlForStep(currentStep);
-		console.log('[WidgetDetails] Loading preview iframe:', workerPreviewUrl, 'step:', currentStep);
+		// console.log('[WidgetDetails] Loading preview iframe:', workerPreviewUrl, 'step:', currentStep);
 		requestAnimationFrame(() => {
 			setTimeout(fitPreviewToArea, 150);
 		});
@@ -1139,7 +1179,7 @@
 		if (!previewBuildDeferred || !selectedWidgetId) return;
 		if (iframeSrc && previewLoadedForWidgetId === selectedWidgetId) {
 			previewBuildDeferred = false;
-			console.log('[WidgetDetails] Skip deferred preview — already loaded for', selectedWidgetId.substring(0, 8));
+			// console.log('[WidgetDetails] Skip deferred preview — already loaded for', selectedWidgetId.substring(0, 8));
 			return;
 		}
 		previewBuildDeferred = false;
@@ -1199,18 +1239,18 @@
 
 		await tick();
 
-		console.log('WidgetDetails: loadWidget completed:', {
-			widgetId,
-			name: selectedWidget?.name,
-			currentRepositoryId,
-		});
+		// console.log('WidgetDetails: loadWidget completed:', {
+			// widgetId,
+			// name: selectedWidget?.name,
+			// currentRepositoryId,
+		// });
 
 		dispatch('widgetReady', { widgetId: selectedWidgetId });
 
 		// If skipBasePreview is set, the caller will handle compiling via triggerBuildFromRepo
 		// (e.g. duplicates waiting for GitLab fork, or converts waiting for code generation)
 		if (skipBasePreview) {
-			console.log('[WidgetDetails] skipBasePreview is set — deferring preview load to caller');
+			// console.log('[WidgetDetails] skipBasePreview is set — deferring preview load to caller');
 			previewLoading = true;
 			previewError = null;
 			return;
@@ -1222,11 +1262,11 @@
 
 		const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
 		if (!lastCommitId && lastPublishedVersion === null && !widgetJsPath && !hasRepo) {
-			console.log('[WidgetDetails] No code yet — skipping Worker probe/build-from-repo', {
-				widgetId: widgetId?.substring(0, 8),
-				hasRepo,
-				repositorySetupStatus,
-			});
+			// console.log('[WidgetDetails] No code yet — skipping Worker probe/build-from-repo', {
+				// widgetId: widgetId?.substring(0, 8),
+				// hasRepo,
+				// repositorySetupStatus,
+			// });
 			previewLoading = false;
 			previewError = 'NO_CODE_YET';
 			return;
@@ -1251,7 +1291,7 @@
 
 	export async function refreshPreview(opts: { withRetry?: boolean; skipIfAlreadyShowing?: boolean } = {}): Promise<void> {
 		if (opts.skipIfAlreadyShowing && hasLiveWorkerPreview()) {
-			console.log('[WidgetDetails] refreshPreview skipped — Worker preview already showing');
+			// console.log('[WidgetDetails] refreshPreview skipped — Worker preview already showing');
 			previewLoading = false;
 			previewHydrating = false;
 			return;
@@ -1275,11 +1315,11 @@
 			middleware: cfg.middleware,
 			headers: cfg.headers,
 		});
-		console.log('[WidgetDetails] buildWidgetFromRepo', {
-			widgetId: widgetId.substring(0, 8),
-			builderBasePath,
-			sdkPath: '/v1/agent/widget-builder/build-from-repo/{widgetId}',
-		});
+		// console.log('[WidgetDetails] buildWidgetFromRepo', {
+			// widgetId: widgetId.substring(0, 8),
+			// builderBasePath,
+			// sdkPath: '/v1/agent/widget-builder/build-from-repo/{widgetId}',
+		// });
 		return builder.buildWidgetFromRepo({ widgetId });
 	}
 
@@ -1287,13 +1327,13 @@
 		const forceRebuild = options?.force === true;
 		if (!selectedWidgetId) return;
 		if (shouldDeferPreviewNetworkWork(forceRebuild)) {
-			console.log('[WidgetDetails] triggerBuildFromRepo deferred (background panel)');
+			// console.log('[WidgetDetails] triggerBuildFromRepo deferred (background panel)');
 			previewBuildDeferred = true;
 			return;
 		}
 		const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
 		if (!hasRepo) {
-			console.log('[WidgetDetails] triggerBuildFromRepo skipped — widget has no repository yet');
+			// console.log('[WidgetDetails] triggerBuildFromRepo skipped — widget has no repository yet');
 			previewLoading = false;
 			previewError = 'NO_CODE_YET';
 			return;
@@ -1301,6 +1341,7 @@
 		const capturedWidgetId = selectedWidgetId;
 		const runId = ++buildFromRepoRunId;
 		if (forceRebuild) isRebuildingPreview = true;
+		pinnedPublishedPreviewUrl = null;
 		try {
 		const workerPreviewUrl = buildWorkerPreviewUrl(capturedWidgetId);
 		const workerPreviewDisplayUrl = buildWorkerPreviewUrl(capturedWidgetId, { forDisplay: true });
@@ -1309,7 +1350,7 @@
 			const freshProbe = await probeWorkerReachable(workerPreviewUrl);
 			if (selectedWidgetId !== capturedWidgetId || runId !== buildFromRepoRunId) return;
 			if (freshProbe === 'ok') {
-				console.log('[WidgetDetails] triggerBuildFromRepo: skipping GitLab rebuild — codegen preview is fresh');
+				// console.log('[WidgetDetails] triggerBuildFromRepo: skipping GitLab rebuild — codegen preview is fresh');
 				dynamicWorkerPreviewUrl = workerPreviewUrl;
 				directPreviewUrl = workerPreviewDisplayUrl;
 				inlinePanelView = 'preview';
@@ -1349,7 +1390,7 @@
 		const probeResult = await probeWorkerReachable(workerPreviewUrl);
 		if (isStaleRun()) return;
 		if (!forceRebuild && probeResult === 'ok') {
-			console.log('[WidgetDetails] triggerBuildFromRepo: Worker already has widget, loading preview directly');
+			// console.log('[WidgetDetails] triggerBuildFromRepo: Worker already has widget, loading preview directly');
 			dispatch('buildFromRepoSuccess', { widgetId: capturedWidgetId });
 			loadPreviewFromWorker();
 			return;
@@ -1363,7 +1404,7 @@
 
 		// Skip build-from-repo while codegen is running — WS / refreshPreview will load when ready
 		if (isGeneratingCode) {
-			console.log('[WidgetDetails] triggerBuildFromRepo: codegen in progress — deferring build-from-repo');
+			// console.log('[WidgetDetails] triggerBuildFromRepo: codegen in progress — deferring build-from-repo');
 			previewLoading = true;
 			previewError = null;
 			return;
@@ -1381,7 +1422,7 @@
 					const buildData = await requestBuildFromRepo(capturedWidgetId);
 					if (isStaleRun()) return;
 
-					console.log('[WidgetDetails] triggerBuildFromRepo succeeded', { buildTimeMs: buildData?.data?.buildTimeMs ?? buildData?.buildTimeMs, attempt });
+					// console.log('[WidgetDetails] triggerBuildFromRepo succeeded', { buildTimeMs: buildData?.data?.buildTimeMs ?? buildData?.buildTimeMs, attempt });
 					previewError = null;
 					previewLoading = false;
 					dispatch('widgetDataChanged', { widgetId: capturedWidgetId });
@@ -1409,7 +1450,7 @@
 					lastBuildErrorMsg = sanitizePreviewBuildError(lastBuildErrorMsg);
 
 					if (buildErrorCode === 'NO_CODE_YET') {
-						console.log('[WidgetDetails] triggerBuildFromRepo: repo exists but has no code yet — skipping retries');
+						// console.log('[WidgetDetails] triggerBuildFromRepo: repo exists but has no code yet — skipping retries');
 						lastBuildErrorMsg = 'NO_CODE_YET';
 						break;
 					}
@@ -1417,7 +1458,7 @@
 					const status = buildErr?.response?.status ?? buildErr?.status;
 					const isRetryable = status === 404 || status === 500 || !status;
 					if (isRetryable && attempt < maxRetries) {
-						console.log(`[WidgetDetails] triggerBuildFromRepo attempt ${attempt}/${maxRetries} failed (${lastBuildErrorMsg}), retrying in ${retryDelayMs}ms...`);
+						// console.log(`[WidgetDetails] triggerBuildFromRepo attempt ${attempt}/${maxRetries} failed (${lastBuildErrorMsg}), retrying in ${retryDelayMs}ms...`);
 						await new Promise(r => setTimeout(r, retryDelayMs));
 						continue;
 					}
@@ -1439,14 +1480,14 @@
 
 		// Preview may have loaded via codegen/WS while build-from-repo was in flight
 		if (allowStalePreviewRecovery && iframeSrc && !previewHasRuntimeError) {
-			console.log('[WidgetDetails] triggerBuildFromRepo: build failed but preview iframe already loaded — keeping preview');
+			// console.log('[WidgetDetails] triggerBuildFromRepo: build failed but preview iframe already loaded — keeping preview');
 			previewError = null;
 			previewLoading = false;
 			return;
 		}
 
 		if (allowStalePreviewRecovery && (await tryRecoverPreviewFromWorker())) {
-			console.log('[WidgetDetails] triggerBuildFromRepo: recovered preview from Worker after build-from-repo failure');
+			// console.log('[WidgetDetails] triggerBuildFromRepo: recovered preview from Worker after build-from-repo failure');
 			return;
 		}
 
@@ -1454,7 +1495,7 @@
 			// For published widgets, try loading via API proxy (handles both R2 and CDN)
 			const sourceArtifactUrl = publishedHtmlUrlFromJsPath(widgetJsPath);
 			if (sourceArtifactUrl) {
-				console.log('[WidgetDetails] triggerBuildFromRepo: using js_path artifact (not new-id proxy)', sourceArtifactUrl);
+				// console.log('[WidgetDetails] triggerBuildFromRepo: using js_path artifact (not new-id proxy)', sourceArtifactUrl);
 				const reachable = await probePublishedArtifactUrl(sourceArtifactUrl);
 				if (reachable) {
 					previewError = null;
@@ -1586,7 +1627,7 @@
 	/** Duplicate/fork fallback: keep published iframe if it loaded; otherwise compile from repo. */
 	export async function retryPreviewIfEmpty(): Promise<void> {
 		if (iframeSrc && !previewError) {
-			console.log('[WidgetDetails] retryPreviewIfEmpty skipped — preview already loaded');
+			// console.log('[WidgetDetails] retryPreviewIfEmpty skipped — preview already loaded');
 			return;
 		}
 		previewLoading = true;
@@ -1595,7 +1636,7 @@
 			if (await loadPublishedPreviewForCurrentStep()) return;
 			const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
 			if (hasRepo) {
-				console.log('[WidgetDetails] retryPreviewIfEmpty — compiling from repository');
+				// console.log('[WidgetDetails] retryPreviewIfEmpty — compiling from repository');
 				await triggerBuildFromRepo();
 				return;
 			}
@@ -1664,10 +1705,9 @@
 		// Widget is alive — never keep a runtime-error overlay over a working preview.
 		clearPendingRuntimeErrorOverlay();
 		if (previewHasRuntimeError) {
-			console.log('[WidgetDetails] Clearing runtime error overlay — widgetic:ready');
 			previewHasRuntimeError = false;
 			previewRuntimeErrorStatus = null;
-			if (previewError && /runtime error|HTTP 500|compilation/i.test(previewError)) {
+			if (previewError && /did not start|runtime error|HTTP 500|compilation/i.test(previewError)) {
 				previewError = null;
 			}
 			notifyPreviewCompileErrorChanged();
@@ -1684,6 +1724,17 @@
 		return typeof value === 'string' && /<[a-z][\s\S]*>/i.test(value);
 	}
 
+	function contentOverlaySelectors(key: string): string {
+		const exact = `[data-content="${CSS.escape(key)}"]`;
+		if (/subtitle/i.test(key)) {
+			return `${exact}, [data-content="widgetSubtitle"], [data-content="gallerySubtitle"], [data-content="subtitle"], .widget-subtitle, .gallery-subtitle`;
+		}
+		if (/^(widgetTitle|galleryTitle|title|heading)$/i.test(key)) {
+			return `${exact}, [data-content="widgetTitle"], [data-content="galleryTitle"], h1, .widget-title`;
+		}
+		return exact;
+	}
+
 	/** Same-origin preview iframes (Vite /__widget_builder__ proxy): restore bold/italic after widgets set textContent. */
 	function applyRichTextInPreviewIframe(message: Record<string, unknown>): void {
 		if (message.type !== 'widgetic:update') return;
@@ -1694,10 +1745,16 @@
 				const content = message.content as Record<string, unknown> | undefined;
 				if (content) {
 					for (const [key, value] of Object.entries(content)) {
-						if (!looksLikeHtmlMarkup(value)) continue;
-						doc.querySelectorAll(`[data-content="${CSS.escape(key)}"]`).forEach((el) => {
-							if (el instanceof HTMLImageElement || el instanceof HTMLInputElement) return;
-							el.innerHTML = value;
+						if (typeof value !== 'string') continue;
+						const selectors = contentOverlaySelectors(key);
+						doc.querySelectorAll(selectors).forEach((el) => {
+							if (el instanceof HTMLImageElement) {
+								el.src = value;
+								return;
+							}
+							if (el instanceof HTMLInputElement || el instanceof HTMLAnchorElement) return;
+							if (looksLikeHtmlMarkup(value)) el.innerHTML = value;
+							else el.textContent = value;
 						});
 					}
 				}
@@ -1737,25 +1794,63 @@
 	}
 
 	function ensureGoogleFontInPreviewDoc(doc: Document, family: string): void {
-		if (!family || /^(Inter|system-ui|sans-serif|serif)$/i.test(family)) return;
+		if (!family || /^(system-ui|sans-serif|serif)$/i.test(family)) return;
 		const id = `widgetic-gf-${family.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`;
 		if (doc.getElementById(id)) return;
 		const link = doc.createElement('link');
 		link.id = id;
 		link.rel = 'stylesheet';
-		link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap`;
+		link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap`;
 		doc.head?.appendChild(link);
-		console.log('[WidgetDetails] Loaded Google Font in preview iframe:', family);
+		// console.log('[WidgetDetails] Loaded Google Font in preview iframe:', family);
+	}
+
+	function parseOverlayFontFace(weight: string | undefined): { cssWeight: string; cssStyle: string } {
+		const raw = String(weight || 'Regular');
+		const cssStyle = /italic|oblique/i.test(raw) ? 'italic' : 'normal';
+		const name = raw.toLowerCase().replace(/italic|oblique/g, '').replace(/[\s_-]/g, '');
+		const table: Record<string, string> = {
+			thin: '100', hairline: '100',
+			extralight: '200', ultralight: '200',
+			light: '300',
+			regular: '400', normal: '400', '': '400',
+			medium: '500',
+			semibold: '600', demibold: '600',
+			bold: '700',
+			extrabold: '800', ultrabold: '800',
+			black: '900', heavy: '900',
+		};
+		if (/^\d{3}$/.test(name)) return { cssWeight: name, cssStyle };
+		return { cssWeight: table[name] || '400', cssStyle };
+	}
+
+	function flattenDesignOverlay(raw: Record<string, unknown> | undefined): Record<string, string> | null {
+		if (!raw) return null;
+		const out: Record<string, string> = {};
+		for (const [key, value] of Object.entries(raw)) {
+			if (value && typeof value === 'object' && 'family' in (value as Record<string, unknown>)) {
+				const font = value as { family?: string; weight?: string };
+				const family = String(font.family || 'Inter');
+				const face = parseOverlayFontFace(font.weight);
+				out[key] = `"${family}", sans-serif`;
+				out[`${key}Family`] = family;
+				out[`${key}Weight`] = face.cssWeight;
+				out[`${key}Style`] = face.cssStyle;
+				continue;
+			}
+			if (typeof value === 'string' && value) out[key] = value;
+		}
+		return Object.keys(out).length ? out : null;
 	}
 
 	/** Same-origin preview: apply CSS vars, Google Fonts, title/subtitle, tile aspect-ratio. */
 	function applyDesignOverlayInPreviewIframe(message: Record<string, unknown>): void {
 		if (message.type !== 'widgetic:update') return;
-		const design = message.design as Record<string, string> | undefined;
+		const design = flattenDesignOverlay(message.design as Record<string, unknown> | undefined);
 		if (!design) return;
 		const doc = previewIframe?.contentDocument;
 		if (!doc?.documentElement) {
-			console.log('[WidgetDetails] Design overlay skipped — preview iframe not same-origin');
+			// console.log('[WidgetDetails] Design overlay skipped — preview iframe not same-origin');
 			return;
 		}
 		const apply = () => {
@@ -1776,46 +1871,69 @@
 				}
 				families.forEach((family) => ensureGoogleFontInPreviewDoc(doc, family));
 
-				const titleFamily =
-					design.titleFontFamily ||
-					extractCssFontFamily(design.titleFont) ||
-					design.headingFontFamily ||
-					extractCssFontFamily(design.headingFont);
-				const titleWeight = design.titleFontWeight || design.headingFontWeight || '';
-				const subtitleFamily =
-					design.subtitleFontFamily ||
-					extractCssFontFamily(design.subtitleFont) ||
-					design.descriptionFontFamily ||
-					extractCssFontFamily(design.descriptionFont);
-				const subtitleWeight = design.subtitleFontWeight || design.descriptionFontWeight || '';
-
-				if (titleFamily || titleWeight) {
-					const titleStack = titleFamily ? `"${titleFamily}", sans-serif` : '';
-					doc.querySelectorAll(
-						'h1, h2, h3, .widget-title, [data-content="title"], [data-content="widgetTitle"], [data-content="heading"]'
-					).forEach((el) => {
-						if (!(el instanceof HTMLElement)) return;
-						if (titleStack) el.style.setProperty('font-family', titleStack, 'important');
-						if (titleWeight) el.style.setProperty('font-weight', titleWeight, 'important');
+				const applyFace = (family: string, weight: string, style: string, selectors: string) => {
+					if (!family && !weight && !style) return;
+					const stack = family ? `"${family}", sans-serif` : '';
+					doc.querySelectorAll(selectors).forEach((node) => {
+						if (!(node instanceof HTMLElement)) return;
+						if (stack) node.style.setProperty('font-family', stack, 'important');
+						if (weight) node.style.setProperty('font-weight', weight, 'important');
+						if (style) node.style.setProperty('font-style', style, 'important');
 					});
+				};
+
+				const cssChunks: string[] = [];
+				const fontPrefixes = new Set<string>();
+				for (const key of Object.keys(design)) {
+					const match = key.match(/^(.*)Font(?:Family|Weight|Style)?$/i);
+					if (match) fontPrefixes.add(match[1] || '');
 				}
-				if (subtitleFamily || subtitleWeight) {
-					const subStack = subtitleFamily ? `"${subtitleFamily}", sans-serif` : '';
-					const subtitleEls = doc.querySelectorAll(
-						'.widget-subtitle, .gallery-subtitle, [data-content="subtitle"], [data-content="description"], [data-content="widgetSubtitle"]'
-					);
-					const applySub = (el: HTMLElement) => {
-						if (subStack) el.style.setProperty('font-family', subStack, 'important');
-						if (subtitleWeight) el.style.setProperty('font-weight', subtitleWeight, 'important');
-					};
-					if (subtitleEls.length > 0) {
-						subtitleEls.forEach((el) => {
-							if (el instanceof HTMLElement) applySub(el);
-						});
-					} else {
-						const firstParagraph = doc.querySelector('p');
-						if (firstParagraph instanceof HTMLElement) applySub(firstParagraph);
+
+				for (const prefix of fontPrefixes) {
+					const family =
+						design[`${prefix}FontFamily`] ||
+						extractCssFontFamily(design[`${prefix}Font`]) ||
+						'';
+					const weight = design[`${prefix}FontWeight`] || '';
+					const style = design[`${prefix}FontStyle`] || '';
+					const isTitleLike =
+						/^(title|heading|tite)?$/i.test(prefix) ||
+						/title|heading|tite/i.test(prefix);
+					const isSubtitleLike = /subtitle|description|caption|label/i.test(prefix);
+					const varFamily = `--${prefix}Font`;
+					const varWeight = `--${prefix}FontWeight`;
+					const varStyle = `--${prefix}FontStyle`;
+					if (isSubtitleLike) {
+						cssChunks.push(
+							`[data-content="caption"], [data-content="subtitle"], [data-content="description"], [data-content="widgetSubtitle"], .caption-bottom p, [class*="caption"], [class*="subtitle"] { font-family: var(${varFamily}, inherit) !important; font-weight: var(${varWeight}, inherit) !important; font-style: var(${varStyle}, normal) !important; }`
+						);
+						applyFace(
+							family,
+							weight,
+							style,
+							'.widget-subtitle, .gallery-subtitle, .gallery-caption, .caption-bottom p, [data-content="subtitle"], [data-content="description"], [data-content="widgetSubtitle"], [data-content="caption"], [class*="caption"], [class*="subtitle"]'
+						);
+					} else if (isTitleLike || fontPrefixes.size === 1) {
+						cssChunks.push(
+							`h1, h2, h3, [data-content="widgetTitle"], [data-content="title"], [data-content="heading"], .widget-title, .gallery-title, [class*="title"] { font-family: var(${varFamily}, inherit) !important; font-weight: var(${varWeight}, inherit) !important; font-style: var(${varStyle}, normal) !important; }`
+						);
+						applyFace(
+							family,
+							weight,
+							style,
+							'h1, h2, h3, .widget-title, .gallery-title, [data-content="title"], [data-content="widgetTitle"], [data-content="heading"], [class*="title"]'
+						);
+					}
+				}
+
+				if (cssChunks.length) {
+					let sheet = doc.getElementById('widgetic-font-overlay') as HTMLStyleElement | null;
+					if (!sheet) {
+						sheet = doc.createElement('style');
+						sheet.id = 'widgetic-font-overlay';
+						doc.head.appendChild(sheet);
 					}
+					sheet.textContent = cssChunks.join('\n');
 				}
 
 				const aspectEntry = Object.entries(design).find(([key, value]) =>
@@ -1832,7 +1950,7 @@
 							el.style.height = 'auto';
 						}
 					});
-					console.log('[WidgetDetails] Applied tile aspect-ratio overlay:', cssRatio);
+					// console.log('[WidgetDetails] Applied tile aspect-ratio overlay:', cssRatio);
 				}
 			} catch (error) {
 				console.warn('[WidgetDetails] Design overlay skipped:', error);
@@ -1899,7 +2017,7 @@
 
 	function startPreviewTokenAutoRefresh() {
 		stopPreviewTokenAutoRefresh();
-		console.log('[TokenAutoRefresh] Started - checking every', TOKEN_CHECK_INTERVAL_MS / 1000, 'seconds');
+		// console.log('[TokenAutoRefresh] Started - checking every', TOKEN_CHECK_INTERVAL_MS / 1000, 'seconds');
 		previewTokenRefreshInterval = setInterval(async () => {
 			const isPreviewVisible = showPreviewModal || (showWidgetDetails && inlinePanelView === 'preview');
 			if (!isPreviewVisible || !lastPreviewUrlFetchTime || !directPreviewUrl) return;
@@ -2008,7 +2126,7 @@
 		const retryCount = opts._retryCount || 0;
 		const withRetry = opts.withRetry || false;
 
-		console.log('WidgetDetails: Triggering preview refresh via src manipulation', retryCount > 0 ? `(retry ${retryCount})` : '');
+		// console.log('WidgetDetails: Triggering preview refresh via src manipulation', retryCount > 0 ? `(retry ${retryCount})` : '');
 		const newCacheBuster = Date.now();
 		previewCacheBuster = newCacheBuster;
 
@@ -2018,7 +2136,7 @@
 			const workerPreviewDisplayUrl = buildWorkerPreviewUrl(selectedWidgetId, { forDisplay: true });
 			dynamicWorkerPreviewUrl = workerPreviewUrl;
 			directPreviewUrl = workerPreviewDisplayUrl;
-			console.log('[WidgetDetails] refreshPreview: initialized worker preview URL');
+			// console.log('[WidgetDetails] refreshPreview: initialized worker preview URL');
 		}
 
 		// After publish (or any time the CDN artifact may have changed), edit/embed steps must
@@ -2044,7 +2162,7 @@
 				// If not reachable and we have retry budget, retry after a short delay (CDN propagation).
 				if (withRetry && retryCount < 3) {
 					const delay = (retryCount + 1) * 2000;
-					console.log(`[WidgetDetails] Published artifact not reachable yet, retrying in ${delay}ms (attempt ${retryCount + 1}/3)`);
+					// console.log(`[WidgetDetails] Published artifact not reachable yet, retrying in ${delay}ms (attempt ${retryCount + 1}/3)`);
 					setTimeout(() => refreshPreviewIframe({ withRetry: true, _retryCount: retryCount + 1 }), delay);
 					return;
 				}
@@ -2073,14 +2191,14 @@
 			if (probeResult === 'not-found') {
 				if (withRetry && retryCount < 3) {
 					const delay = (retryCount + 1) * 2000;
-					console.log(`[WidgetDetails] Preview not found, retrying in ${delay}ms (attempt ${retryCount + 1}/3)`);
+					// console.log(`[WidgetDetails] Preview not found, retrying in ${delay}ms (attempt ${retryCount + 1}/3)`);
 					previewLoading = true;
 					setTimeout(() => refreshPreviewIframe({ withRetry: true, _retryCount: retryCount + 1 }), delay);
 					return;
 				}
 				// Worker cache miss after codegen — compile from GitLab repo
 				if (lastCommitId && !isGeneratingCode && !shouldDeferPreviewNetworkWork()) {
-					console.log('[WidgetDetails] Preview not on Worker after retries — trying build-from-repo');
+					// console.log('[WidgetDetails] Preview not on Worker after retries — trying build-from-repo');
 					await triggerBuildFromRepo();
 					if (iframeSrc) return;
 				}
@@ -2196,9 +2314,16 @@
 			if (!previewWidgetReady) {
 				if (previewReadyFallbackTimeout) clearTimeout(previewReadyFallbackTimeout);
 				previewReadyFallbackTimeout = setTimeout(() => {
-					console.warn('[WidgetDetails] Create step widgetic:ready fallback — applying overlay');
-					markPreviewWidgetReady();
-				}, 1500);
+					if (previewWidgetReady) return;
+					console.warn('[WidgetDetails] Create step: iframe loaded but widget did not signal ready');
+					previewLoading = false;
+					previewHydrating = false;
+					previewHasRuntimeError = true;
+					previewRuntimeErrorStatus = 500;
+					previewError =
+						'Preview loaded but the widget did not start. Open in a new tab or tap Rebuild. If the new tab is also blank, the generated code likely failed at runtime.';
+					notifyPreviewCompileErrorChanged();
+				}, 4000);
 			}
 			scheduleFitPreviewToArea();
 		}
@@ -2376,8 +2501,13 @@
 		return Math.max(DETAILS_PANEL_MIN_HEIGHT, Math.min(DETAILS_PANEL_MAX_HEIGHT, available));
 	}
 
+	function getDetailsPanelMinWidth(): number {
+		if (previewColumnCollapsed) return DETAILS_PANEL_MIN_WIDTH;
+		return DETAILS_PANEL_MIN_WIDTH + COL_RESIZER_PX + 240;
+	}
+
 	function clampPanelWidth(w: number): number {
-		return Math.max(DETAILS_PANEL_MIN_WIDTH, Math.min(w, DETAILS_PANEL_MAX_WIDTH));
+		return Math.max(getDetailsPanelMinWidth(), Math.min(w, DETAILS_PANEL_MAX_WIDTH));
 	}
 
 	function clampPanelHeight(h: number): number {
@@ -2420,7 +2550,14 @@
 		}
 		const cascade = panelCascadeIndex * 32;
 		detailsPanelX = Math.max(8, Math.round((window.innerWidth - detailsPanelWidth) / 2) + cascade);
-		detailsPanelY = detailsPanelTopOffset + cascade;
+		const availableTop = detailsPanelTopOffset;
+		detailsPanelY = Math.max(
+			availableTop,
+			Math.round(availableTop + (window.innerHeight - availableTop - detailsPanelHeight) / 2) + cascade,
+		);
+		if (detailsPanelY + detailsPanelHeight > window.innerHeight - 8) {
+			detailsPanelY = Math.max(availableTop, window.innerHeight - detailsPanelHeight - 8);
+		}
 	}
 
 	/** Keep the panel on-screen after a browser resize. Does not reset to default 600×800. */
@@ -2446,8 +2583,7 @@
 	}
 
 	/**
-	 * Park the panel to the right of a canvas widget shape. May overlay the
-	 * shape Props panel. Can hang halfway outside the viewport.
+	 * Center Widget Details in the canvas viewport (X and Y), clamped on-screen.
 	 */
 	export function positionBesideShape(shapeRect: {
 		left: number;
@@ -2464,24 +2600,28 @@
 		_hasBeenOpenedOnce = true;
 		if (!shapeRect) {
 			centerDetailsPanel();
-			console.log('[WidgetDetails] No shape rect — centered floating panel', detailsPanelWidth, detailsPanelHeight);
+			// console.log('[WidgetDetails] No shape rect — centered floating panel', detailsPanelWidth, detailsPanelHeight);
 			return;
 		}
 
-		const gap = DETAILS_PANEL_SHAPE_GAP;
-		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_MAX_WIDTH);
+		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
 		detailsPanelHeight = clampPanelHeight(DETAILS_PANEL_MAX_HEIGHT);
 
-		const x = shapeRect.left + shapeRect.width + gap;
-		const pos = clampDetailsPanelPosition(x, Math.max(detailsPanelTopOffset, shapeRect.top));
+		const viewportLeft = shapeRect.viewportLeft ?? 0;
+		const viewportWidth = shapeRect.viewportWidth || window.innerWidth;
+		const viewportTop = shapeRect.viewportTop ?? detailsPanelTopOffset;
+		const viewportHeight = shapeRect.viewportHeight || (window.innerHeight - viewportTop);
+
+		const x = Math.round(viewportLeft + (viewportWidth - detailsPanelWidth) / 2);
+		const y = Math.round(viewportTop + Math.max(0, (viewportHeight - detailsPanelHeight) / 2));
+		const pos = clampDetailsPanelPosition(x, y);
 		detailsPanelX = pos.x;
 		detailsPanelY = pos.y;
-		console.log('[WidgetDetails] Positioned beside shape', {
+		console.log('[WidgetDetails] Centered in canvas viewport', {
 			x: Math.round(detailsPanelX),
 			y: Math.round(detailsPanelY),
 			w: detailsPanelWidth,
 			h: detailsPanelHeight,
-			shapeLeft: Math.round(shapeRect.left),
 		});
 	}
 
@@ -2546,7 +2686,7 @@
 
 		if (selectedWidgetId) {
 			if (iframeSrc && previewLoadedForWidgetId === selectedWidgetId) {
-				console.log('[WidgetDetails] Reopened with existing preview, no reload needed');
+				// console.log('[WidgetDetails] Reopened with existing preview, no reload needed');
 				return;
 			}
 			loadWidget(selectedWidgetId);
@@ -2570,7 +2710,7 @@
 	function handleCloseButtonClick(e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-		console.log('[WidgetDetails] Close button clicked');
+		// console.log('[WidgetDetails] Close button clicked');
 		closeWidgetDetails();
 	}
 
@@ -2620,7 +2760,7 @@
 		if (!isResizingDetails) return;
 		const deltaX = e.clientX - detailsResizeStartX;
 		const deltaY = e.clientY - detailsResizeStartY;
-		const minW = DETAILS_PANEL_MIN_WIDTH;
+		const minW = getDetailsPanelMinWidth();
 		const minH = DETAILS_PANEL_MIN_HEIGHT;
 		const maxRight = window.innerWidth - 8;
 		const maxBottom = window.innerHeight - 8;
@@ -2692,23 +2832,83 @@
 		};
 	}
 
+	function updateHeaderNameMaxWidth() {
+		if (!widgetDetailsNameCtEl) return;
+		const nameRect = widgetDetailsNameCtEl.getBoundingClientRect();
+		const rightEl = showCompositionSteps && widgetDetailsStepsRowEl
+			? widgetDetailsStepsRowEl
+			: widgetDetailsDebugButtonsEl;
+		if (!rightEl) return;
+		const rightRect = rightEl.getBoundingClientRect();
+		const available = Math.floor(rightRect.left - nameRect.left - HEADER_ELEMENTS_GAP_PX);
+		const next = Math.max(HEADER_NAME_MIN_WIDTH_PX, available);
+		if (next !== headerNameMaxWidthPx) {
+			headerNameMaxWidthPx = next;
+		}
+	}
+
+	function trackHeaderNameMaxWidth(node: HTMLElement) {
+		detailsDragBarEl = node;
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(updateHeaderNameMaxWidth);
+		});
+		resizeObserver.observe(node);
+		requestAnimationFrame(updateHeaderNameMaxWidth);
+		return {
+			destroy() {
+				resizeObserver.disconnect();
+			}
+		};
+	}
+
 	function startDetailsDrag(e: PointerEvent) {
 		const target = e.target as HTMLElement | null;
 		if (target?.closest('.step-button, .widget-details-close-bt, .widget-details-debug-buttons, button, a, input, select, textarea')) {
 			return;
 		}
-		handlePanelFocusRequest();
-		e.preventDefault();
-		e.stopPropagation();
-		isDraggingDetails = true;
 		detailsDragStartX = e.clientX;
 		detailsDragStartY = e.clientY;
 		detailsInitialX = detailsPanelX < 0 ? 0 : detailsPanelX;
 		detailsInitialY = detailsPanelY < 0 ? detailsPanelTopOffset : detailsPanelY;
+		detailsDragBarEl = e.currentTarget as HTMLElement | null;
+		const fromName = !!target?.closest('.widget-details-name-ct');
+		if (fromName) {
+			pendingDetailsDrag = true;
+			window.addEventListener('pointermove', onPendingDetailsDrag);
+			window.addEventListener('pointerup', cancelPendingDetailsDrag);
+			window.addEventListener('pointercancel', cancelPendingDetailsDrag);
+			return;
+		}
+		beginDetailsDrag(e);
+	}
+
+	function onPendingDetailsDrag(e: PointerEvent) {
+		if (!pendingDetailsDrag) return;
+		const moved = Math.hypot(e.clientX - detailsDragStartX, e.clientY - detailsDragStartY);
+		if (moved < DETAILS_DRAG_THRESHOLD_PX) return;
+		pendingDetailsDrag = false;
+		window.removeEventListener('pointermove', onPendingDetailsDrag);
+		window.removeEventListener('pointerup', cancelPendingDetailsDrag);
+		window.removeEventListener('pointercancel', cancelPendingDetailsDrag);
+		beginDetailsDrag(e);
+	}
+
+	function cancelPendingDetailsDrag() {
+		pendingDetailsDrag = false;
+		window.removeEventListener('pointermove', onPendingDetailsDrag);
+		window.removeEventListener('pointerup', cancelPendingDetailsDrag);
+		window.removeEventListener('pointercancel', cancelPendingDetailsDrag);
+	}
+
+	function beginDetailsDrag(e: PointerEvent) {
+		handlePanelFocusRequest();
+		e.preventDefault();
+		e.stopPropagation();
+		isDraggingDetails = true;
 		document.body.style.cursor = 'grabbing';
 		document.body.style.userSelect = 'none';
 		try {
-			(e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId);
+			detailsDragBarEl?.setPointerCapture?.(e.pointerId);
 		} catch {
 			/* ignore capture failures */
 		}
@@ -2735,6 +2935,7 @@
 	}
 
 	function stopDetailsDrag() {
+		cancelPendingDetailsDrag();
 		if (!isDraggingDetails) return;
 		isDraggingDetails = false;
 		document.body.style.cursor = '';
@@ -2883,7 +3084,7 @@
 		if (currentToken) setWsAuthToken(currentToken);
 		const userId = userSession?.user?.id;
 		if (userId) {
-			console.log('[WidgetDetails] Connecting WebSocket for user events');
+			// console.log('[WidgetDetails] Connecting WebSocket for user events');
 			connectWebSocket(userId);
 		}
 	}
@@ -2891,17 +3092,18 @@
 	let lastWsPreviewSignature: string | null = null;
 
 	async function applyWorkerPreviewFromEvent(workerUrl: string, buildTimeMs?: number | null): Promise<void> {
+		if (pinnedPublishedPreviewUrl) return;
 		const fetchUrl = toWorkerPreviewFetchUrl(workerUrl);
 		const signature = `${fetchUrl}:${buildTimeMs ?? 'na'}:${selectedWidgetId ?? ''}`;
 		if (signature === lastWsPreviewSignature) return;
 		lastWsPreviewSignature = signature;
 
-		console.log('[WidgetDetails] Worker preview ready — force reloading iframe', {
-			widgetId: selectedWidgetId,
-			previewUrl: fetchUrl,
-			displayUrl: toWorkerPreviewDisplayUrl(fetchUrl),
-			buildTimeMs,
-		});
+		// console.log('[WidgetDetails] Worker preview ready — force reloading iframe', {
+			// widgetId: selectedWidgetId,
+			// previewUrl: fetchUrl,
+			// displayUrl: toWorkerPreviewDisplayUrl(fetchUrl),
+			// buildTimeMs,
+		// });
 
 		dynamicWorkerPreviewUrl = fetchUrl;
 		directPreviewUrl = toWorkerPreviewDisplayUrl(fetchUrl);
@@ -2947,25 +3149,29 @@
 		// Worker-built widgets signal readiness via widgetic:ready (not sveltekit-hydration-complete)
 		const handleWidgeticReady = (event: MessageEvent) => {
 			if (event.data?.type !== 'widgetic:ready') return;
-			console.log('[WidgetDetails] widgetic:ready received — applying queued composition updates');
+			const activeWin = previewIframe?.contentWindow;
+			if (!activeWin || event.source !== activeWin) return;
+			// console.log('[WidgetDetails] widgetic:ready received — applying queued composition updates');
 			markPreviewWidgetReady();
 		};
 		window.addEventListener('message', handleWidgeticReady);
 
 		// Listen for SvelteKit hydration completion signal (legacy VM / published SvelteKit artifacts)
 		const handleHydrationSignal = (event: MessageEvent) => {
-			if (event.data?.type === 'sveltekit-hydration-complete') {
-				previewHydrating = false;
-				hydrationRetryCount = 0;
-				if (hydrationSafetyTimeout) { clearTimeout(hydrationSafetyTimeout); hydrationSafetyTimeout = null; }
-				markPreviewWidgetReady();
-			}
+			if (event.data?.type !== 'sveltekit-hydration-complete') return;
+			const activeWin = previewIframe?.contentWindow;
+			if (!activeWin || event.source !== activeWin) return;
+			previewHydrating = false;
+			if (hydrationSafetyTimeout) { clearTimeout(hydrationSafetyTimeout); hydrationSafetyTimeout = null; }
+			markPreviewWidgetReady();
 		};
 		window.addEventListener('message', handleHydrationSignal);
 
 		// Listen for runtime error signals from the preview iframe
 		const handleIframeRuntimeError = (event: MessageEvent) => {
 			if (event.data?.type !== 'sveltekit-runtime-error') return;
+			const activeWin = previewIframe?.contentWindow;
+			if (!activeWin || event.source !== activeWin) return;
 
 			const runtimeMsg = String(event.data?.message || event.data?.error || '').trim();
 			const runtimeSource = event.data?.source ? String(event.data.source) : '';
@@ -2976,16 +3182,10 @@
 				console.warn('[WidgetDetails] Ignoring runtime error during code generation:', runtimeMsg);
 				return;
 			}
-			if (isCodegenPreviewFresh()) {
+			if (isCodegenPreviewFresh() && !looksLikeHardCompileFailure(runtimeMsg)) {
 				console.warn('[WidgetDetails] Ignoring runtime error during codegen preview window:', runtimeMsg);
 				return;
 			}
-			// Stale iframe (previous build) must not poison the active preview
-			const activeWin = previewIframe?.contentWindow;
-			if (activeWin && event.source && event.source !== activeWin) {
-				console.warn('[WidgetDetails] Ignoring runtime error from inactive iframe');
-				return;
-			}
 			if (isBenignPreviewRuntimeError(runtimeMsg)) {
 				console.warn('[WidgetDetails] Ignoring benign preview runtime error:', runtimeMsg);
 				return;
@@ -3036,20 +3236,21 @@
 
 		// Listen for expired preview token signal
 		const handleTokenExpired = async (event: MessageEvent) => {
-			if (event.data?.type === 'preview-token-expired') {
-				directPreviewUrl = null;
-				lastPreviewUrlFetchTime = 0;
-				try {
-					const freshUrl = await fetchDirectPreviewUrl();
-					if (freshUrl) {
-						const cacheBuster = Date.now();
-						const url = new URL(freshUrl);
-						url.searchParams.set('_t', cacheBuster.toString());
-						iframeSrc = url.toString();
-						previewCacheBuster = cacheBuster;
-					}
-				} catch (err) { console.error('Error refreshing preview token:', err); }
-			}
+			if (event.data?.type !== 'preview-token-expired') return;
+			const activeWin = previewIframe?.contentWindow;
+			if (!activeWin || event.source !== activeWin) return;
+			directPreviewUrl = null;
+			lastPreviewUrlFetchTime = 0;
+			try {
+				const freshUrl = await fetchDirectPreviewUrl();
+				if (freshUrl) {
+					const cacheBuster = Date.now();
+					const url = new URL(freshUrl);
+					url.searchParams.set('_t', cacheBuster.toString());
+					iframeSrc = url.toString();
+					previewCacheBuster = cacheBuster;
+				}
+			} catch (err) { console.error('Error refreshing preview token:', err); }
 		};
 		window.addEventListener('message', handleTokenExpired);
 
@@ -3059,12 +3260,14 @@
 		// "Rebuild" whenever we lose the L1/L2 cache. (Reset happens on widget switch.)
 		const handleWidgetNotFound = async (event: MessageEvent) => {
 			if (event.data?.type !== 'widgetic:widget-not-found') return;
+			const activeWin = previewIframe?.contentWindow;
+			if (!activeWin || event.source !== activeWin) return;
 			if (isCodegenPreviewFresh()) {
-				console.log('[WidgetDetails] Ignoring widget-not-found during codegen preview window');
+				// console.log('[WidgetDetails] Ignoring widget-not-found during codegen preview window');
 				return;
 			}
 			if (dwLoadTimeoutHandle) { clearTimeout(dwLoadTimeoutHandle); dwLoadTimeoutHandle = null; }
-			console.log('[WidgetDetails] Worker reports widget not found — checking if repo has code');
+			// console.log('[WidgetDetails] Worker reports widget not found — checking if repo has code');
 			dynamicWorkerPreviewUrl = null;
 			directPreviewUrl = null;
 			iframeSrc = null;
@@ -3075,7 +3278,7 @@
 			const hasRepo = !!currentRepositoryId;
 			if (hasRepo && capturedWidgetId && widgetNotFoundAutoRebuildAttempts === 0) {
 				widgetNotFoundAutoRebuildAttempts = 1;
-				console.log('[WidgetDetails] Widget missing from Worker — auto-triggering build-from-repo');
+				// console.log('[WidgetDetails] Widget missing from Worker — auto-triggering build-from-repo');
 				previewLoading = true;
 				try {
 					await triggerBuildFromRepo({ force: true });
@@ -3105,6 +3308,7 @@
 		if (contentContainerEl) {
 			hasScrollbar = contentContainerEl.scrollHeight > contentContainerEl.clientHeight;
 		}
+		updateHeaderNameMaxWidth();
 	});
 
 	onDestroy(() => {
@@ -3133,13 +3337,13 @@
 		onclick={handleCloseButtonClick}
 		onmousedown={(e) => e.stopPropagation()}
 		onpointerdown={(e) => e.stopPropagation()}
-		class="widget-details-close-bt pointer-events-auto absolute -top-2.5 -right-2.5 z-30 w-7 h-7 flex items-center justify-center rounded-full bg-white border border-gray-300 shadow-md hover:bg-red-50 hover:border-red-300 hover:text-red-600 text-gray-500 cursor-pointer transition-colors text-sm"
+		class="widget-details-close-bt pointer-events-auto absolute -top-3 -right-3 z-40 w-7 h-7 flex items-center justify-center rounded-full bg-white border border-gray-300 shadow-md hover:bg-red-50 hover:border-red-300 hover:text-red-600 text-gray-500 cursor-pointer transition-colors text-sm"
 		title="Close widget details"
 	>
 		✕
 	</button>
 <div
-	class="widget-details-floating-panel pointer-events-auto relative flex flex-col h-full w-full
+		class="widget-details-floating-panel pointer-events-auto relative flex flex-col h-full w-full min-w-[480px]
 		{fillViewport
 			? 'bg-white rounded-none border-x border-b border-t-0 ring-0 shadow-none overflow-hidden'
 			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border overflow-hidden'}
@@ -3151,23 +3355,44 @@
 	<!-- Widget Details Top Bar — title, steps, and close on one row -->
 	<div class="widget-details-header-ct flex flex-col shrink-0 bg-gray-100 border-b border-gray-200">
 		<div
-			class="widget-details-drag-bar relative flex items-center justify-end gap-2 px-3 py-1.5 cursor-grab active:cursor-grabbing select-none min-h-[40px] touch-none flex-nowrap overflow-hidden"
+			class="widget-details-drag-bar relative flex items-center py-1.5 cursor-grab active:cursor-grabbing select-none min-h-[40px] touch-none flex-nowrap min-w-0"
+			style="--header-elements-gap: {HEADER_ELEMENTS_GAP_PX}px; gap: {HEADER_ELEMENTS_GAP_PX}px; padding-left: {HEADER_PADDING_PX}px; padding-right: {HEADER_PADDING_PX}px;"
+			bind:this={detailsDragBarEl}
+			use:trackHeaderNameMaxWidth
 			onpointerdown={startDetailsDrag}
 		>
-			<span
-				class="widget-details-name pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 max-w-[28%] truncate text-sm font-bold text-gray-800"
-				title={selectedWidget?.name || ''}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="widget-details-name-ct relative z-[1] min-w-0 w-fit overflow-hidden"
+				bind:this={widgetDetailsNameCtEl}
+				style="min-width: {HEADER_NAME_MIN_WIDTH_PX}px; max-width: {headerNameMaxWidthPx}px;"
 			>
-				{selectedWidget?.name || (isDraftConvertPanel ? 'Widget Draft' : 'Widget')}
-			</span>
-			<!-- Step Indicator — centered; name is compact on the left (read-only, no rename) -->
-			<div class="widget-details-step-indicator-row pointer-events-none absolute left-1/2 -translate-x-1/2 flex justify-center px-1">
-				<div class="widget-details-step-indicator pointer-events-auto flex items-center gap-1 flex-nowrap justify-center whitespace-nowrap">
+				<EditableName
+					class="widget-details-name min-w-0 truncate text-sm font-bold text-gray-800"
+					name={selectedWidget?.name || ''}
+					placeholder={isDraftConvertPanel ? 'Widget Draft' : 'Widget'}
+					tooltipText="Double-click to rename"
+					on:rename={(e) => {
+						if (!selectedWidgetId) return;
+						dispatch('widgetRename', { widgetId: selectedWidgetId, newName: e.detail.newName });
+					}}
+				/>
+			</div>
+			{#if showCompositionSteps}
+			<div
+				class="widget-details-step-indicator-row pointer-events-none absolute left-1/2 top-1/2 z-0 flex -translate-x-1/2 -translate-y-1/2 justify-center"
+				bind:this={widgetDetailsStepsRowEl}
+			>
+				<div
+					class="widget-details-step-indicator pointer-events-auto flex items-center flex-nowrap justify-center whitespace-nowrap"
+					style="gap: {HEADER_ELEMENTS_GAP_PX}px;"
+				>
+				<HoverTooltip text="Create widget code" class="inline-flex shrink-0">
 				<!-- svelte-ignore a11y_consider_explicit_label -->
 				<button
 					type="button"
 					onclick={() => goToStep('create')}
-					class="step-button step-button-create flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium transition-all
+					class="step-button step-button-create flex items-center gap-0.5 px-1 py-0.5 rounded-md text-xs font-medium transition-all
 						{currentStep === 'create'
 							? 'bg-blue-100 text-blue-700 border border-blue-300 cursor-pointer'
 							: 'text-gray-600 hover:bg-gray-200 border border-transparent cursor-pointer'}"
@@ -3175,15 +3400,16 @@
 					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold leading-none {currentStep === 'create' ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-700'}">1</span>
 					<span class="step-label">Create</span>
 				</button>
-				<div class="step-connector w-4 h-px {canEditStep ? 'bg-gray-400' : 'bg-gray-200'}"></div>
+				</HoverTooltip>
+				<span class="step-connector text-sm font-semibold leading-none {canEditStep ? 'text-gray-500' : 'text-gray-300'}" aria-hidden="true">→</span>
+				<HoverTooltip text={canEditStep ? 'Edit composition' : 'Publish the widget to edit composition'} class="inline-flex shrink-0">
 				<!-- svelte-ignore a11y_consider_explicit_label -->
 				<button
 					type="button"
 					onclick={() => goToStep('edit')}
 					tabindex={canEditStep ? 0 : -1}
 					aria-disabled={!canEditStep}
-					title={canEditStep ? 'Edit composition' : 'Publish the widget to edit composition'}
-					class="step-button step-button-edit flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium transition-all
+					class="step-button step-button-edit flex items-center gap-0.5 px-1 py-0.5 rounded-md text-xs font-medium transition-all
 						{currentStep === 'edit'
 							? 'bg-blue-100 text-blue-700 border border-blue-300 cursor-pointer'
 							: canEditStep
@@ -3193,15 +3419,16 @@
 					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold leading-none {currentStep === 'edit' ? 'bg-blue-600 text-white' : canEditStep ? 'bg-gray-300 text-gray-700' : 'bg-gray-200 text-gray-400'}">2</span>
 					<span class="step-label">Edit</span>
 				</button>
-				<div class="step-connector w-4 h-px {canEmbedStep ? 'bg-gray-400' : 'bg-gray-200'}"></div>
+				</HoverTooltip>
+				<span class="step-connector text-sm font-semibold leading-none {canEmbedStep ? 'text-gray-500' : 'text-gray-300'}" aria-hidden="true">→</span>
+				<HoverTooltip text={canEmbedStep ? 'Embed the published widget' : 'Publish the widget to get embed code'} class="inline-flex shrink-0">
 				<!-- svelte-ignore a11y_consider_explicit_label -->
 				<button
 					type="button"
 					onclick={() => goToStep('embed')}
 					tabindex={canEmbedStep ? 0 : -1}
 					aria-disabled={!canEmbedStep}
-					title={canEmbedStep ? 'Embed the published widget' : 'Publish the widget to get embed code'}
-					class="step-button step-button-embed flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium transition-all
+					class="step-button step-button-embed flex items-center gap-0.5 px-1 py-0.5 rounded-md text-xs font-medium transition-all
 						{currentStep === 'embed'
 							? 'bg-blue-100 text-blue-700 border border-blue-300 cursor-pointer'
 							: canEmbedStep
@@ -3211,41 +3438,61 @@
 					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold leading-none {currentStep === 'embed' ? 'bg-blue-600 text-white' : canEmbedStep ? 'bg-gray-300 text-gray-700' : 'bg-gray-200 text-gray-400'}">3</span>
 					<span class="step-label">Embed</span>
 				</button>
+				</HoverTooltip>
 				</div>
 			</div>
+			{/if}
 
-			<div class="widget-details-debug-buttons flex items-center gap-1.5 shrink-0 pr-1">
+			<div
+				class="widget-details-debug-buttons relative z-[1] ml-auto flex items-center shrink-0"
+				bind:this={widgetDetailsDebugButtonsEl}
+			>
+				<HoverTooltip text={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}>
 				<button
 					type="button"
 					onclick={() => previewColumnCollapsed ? expandPreviewColumn() : collapsePreviewColumn()}
 					onmousedown={(e) => e.stopPropagation()}
 					onpointerdown={(e) => e.stopPropagation()}
-					class="widget-details-preview-toggle-bt h-6 min-w-[6.75rem] px-2 flex items-center justify-center rounded-lg text-[11px] font-medium cursor-pointer transition-colors whitespace-nowrap
+					aria-label={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}
+					class="widget-details-preview-toggle-bt h-6 w-6 flex items-center justify-center rounded-lg cursor-pointer transition-colors
 						{previewColumnCollapsed
 							? 'bg-white border border-gray-300 text-gray-600 hover:bg-gray-100'
 							: 'bg-blue-50 border border-blue-300 text-blue-700 hover:bg-blue-100'}"
-					title={previewColumnCollapsed ? 'Open live preview column' : 'Close live preview column'}
 				>
-					{previewColumnCollapsed ? 'Open Preview' : 'Close Preview'}
+					{#if previewColumnCollapsed}
+						<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+							<rect x="3" y="4" width="18" height="16" rx="2"/>
+							<path d="M14 4v16"/>
+							<path d="M17 9l3 3-3 3"/>
+						</svg>
+					{:else}
+						<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+							<rect x="3" y="4" width="18" height="16" rx="2"/>
+							<path d="M14 4v16"/>
+							<path d="M10 15L7 12l3-3"/>
+						</svg>
+					{/if}
 				</button>
+				</HoverTooltip>
 			</div>
 		</div>
 	</div>
 
 	<!-- Widget Details Content: Two-column layout -->
-	<div class="widget-details-content-wrapper relative m-2.5 min-w-0 min-h-0 flex-1 overflow-x-hidden">
-	<div class="widget-details-two-col flex h-full min-h-0 min-w-0 gap-0 overflow-x-hidden">
+	<div class="widget-details-content-wrapper relative m-2.5 min-w-[460px] min-h-0 flex-1 overflow-hidden">
+	<div class="widget-details-two-col flex h-full min-h-0 min-w-[460px] gap-0 overflow-hidden">
 
 	<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
 	<div
-		class="widget-details-left-col flex flex-col min-w-0 min-h-0 relative"
+		class="widget-details-left-col flex flex-col min-w-[460px] min-h-0 overflow-hidden relative"
 		style="width: {previewColumnCollapsed ? 100 : leftColPercent}%; flex: 0 0 {previewColumnCollapsed ? 100 : leftColPercent}%;"
 	>
 	<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-lg pointer-events-none z-10"></div>
 
 	{#if selectedWidgetId}
+	<div class="widget-details-left-stack relative z-0 flex flex-col h-full min-h-0 min-w-[460px] overflow-hidden">
 	<!-- Sticky Widget Info Bar (always visible above scrollable content) -->
-	<div class="widget-info-sticky-bar flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 rounded-t-lg shrink-0 gap-2 min-w-0 z-5">
+	<div class="widget-info-sticky-bar relative flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 rounded-t-lg shrink-0 gap-2 min-w-0 z-20 overflow-visible">
 		<div class="widget-info-name flex items-center min-w-0 gap-1 text-sm text-gray-700">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -3263,12 +3510,14 @@
 			{:else if saveStatus === 'error'}
 				<span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700">Save Error</span>
 			{/if}
+			{#if debugMode}
 			<span class="text-[10px] text-gray-500">
 				Commit: <span class="font-mono font-medium text-gray-600" title={lastCommitId || ''}>{lastCommitId ? lastCommitId.substring(0, 8) : '—'}</span>
 			</span>
-			{#if lastPublishedVersion !== null}
-				<a href="/test-widget?widgetId={selectedWidgetId}&version={lastPublishedVersion}" target="_blank" rel="noopener noreferrer" class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-600 border border-emerald-700 text-white hover:bg-emerald-700 transition-colors whitespace-nowrap cursor-pointer" title="Open published widget v{lastPublishedVersion}">Live: v{lastPublishedVersion} ↗</a>
 			{/if}
+			<div class="widget-info-version-history-slot relative z-20 shrink-0">
+				<slot name="version-history" />
+			</div>
 		</div>
 	</div>
 
@@ -3280,23 +3529,34 @@
 	<div class="actions-panel widget-details-actions-panel relative flex flex-col flex-1 min-h-0">
 
 		<!-- Keep all steps mounted — switching tabs must not destroy chat / PropsEditor state -->
-		<div class="widget-details-create-step flex flex-col flex-1 min-h-0 overflow-hidden overflow-x-hidden {currentStep === 'create' ? '' : 'hidden'}">
-			<div class="widget-details-create-chat-ct flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin gap-2 p-2">
-				<slot name="code-generation" />
+		<div class="widget-details-create-step flex flex-col flex-1 min-h-0 overflow-hidden overflow-x-hidden {activeWorkflowStep === 'create' ? '' : 'hidden'}">
+			<div class="widget-details-create-models-ct shrink-0 empty:hidden">
+				<slot name="code-generation-models" />
+			</div>
+			<div
+				class="widget-details-create-chat-ct flex flex-col flex-1 min-h-0 overflow-hidden overflow-x-hidden"
+			>
+				<div class="widget-details-create-status-slot shrink-0 empty:hidden">
+					<slot name="code-generation-status" />
+				</div>
+				<div class="widget-details-create-chat-body flex flex-col flex-1 min-h-0 overflow-hidden">
+					<slot name="code-generation" />
+				</div>
 			</div>
-			<div class="widget-details-create-publish-ct shrink-0 px-2 pb-2">
+			<div class="widget-details-create-publish-ct shrink-0 empty:hidden">
 				<slot name="publish-widget" />
 			</div>
 		</div>
-		<div class="widget-details-edit-step flex flex-col h-full min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin {currentStep === 'edit' ? '' : 'hidden'}">
+		<div class="widget-details-edit-step flex flex-col flex-1 min-h-0 overflow-hidden {activeWorkflowStep === 'edit' ? '' : 'hidden'}">
 			<slot name="composition-editor" />
 		</div>
-		<div class="widget-details-embed-step flex flex-col gap-2 p-2 {currentStep === 'embed' ? '' : 'hidden'}">
+		<div class="widget-details-embed-step flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin gap-2 p-2 {activeWorkflowStep === 'embed' ? '' : 'hidden'}">
 			<slot name="embed-section" />
 		</div>
 
 	</div> <!-- end of actions-panel -->
 	</div> <!-- end of widget-details-left-content -->
+	</div> <!-- end of widget-details-left-stack -->
 	{/if}
 
 	</div> <!-- end of widget-details-left-col -->
@@ -3581,14 +3841,38 @@
 {/if}
 
 <style>
-	.widget-details-left-content {
-		overflow: hidden;
-		overflow-x: hidden;
+	.widget-details-drag-bar button:focus,
+	.widget-details-drag-bar button:focus-visible,
+	.widget-details-drag-bar a:focus,
+	.widget-details-drag-bar a:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+	.widget-details-create-models-ct :global(button:focus),
+	.widget-details-create-models-ct :global(button:focus-visible),
+	.widget-details-create-models-ct :global(select:focus),
+	.widget-details-create-models-ct :global(select:focus-visible) {
+		outline: none;
+		box-shadow: none;
+	}
+	.widget-details-create-chat-ct :global(.prompt-chat-messages) {
+		overflow-y: auto;
 		scrollbar-width: thin;
-		scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+		scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
+	}
+	.widget-details-create-chat-ct :global(.prompt-chat-messages::-webkit-scrollbar) {
+		width: 6px;
+		background: transparent;
+	}
+	.widget-details-create-chat-ct :global(.prompt-chat-messages::-webkit-scrollbar-track) {
+		background: transparent;
+	}
+	.widget-details-create-chat-ct :global(.prompt-chat-messages::-webkit-scrollbar-thumb) {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 4px;
 	}
 	.widget-details-left-content::-webkit-scrollbar {
-		width: 10px;
+		width: 6px;
 		background: transparent;
 	}
 	.widget-details-left-content::-webkit-scrollbar-track {