@widgetic/creator 0.3.49

package/dist/components/WidgetDetails.svelte

@@ -0,0 +1,3127 @@
+<script lang="ts">
+	/**
+	 * WidgetDetails.svelte
+	 * 
+	 * Encapsulates Cloudflare Worker preview/iframe, code generation,
+	 * publishing, and the inline panel (preview tab).
+	 * 
+	 * Exported interface:
+	 *   Props: userSession, hasValidToken, selectedWidgetId, selectedWidget, etc.
+	 *   Events: generateCode, widgetReady, previewReady, widgetDetailsToggle, widgetDataChanged
+	 *   Functions: loadWidget(), refreshPreview(), enqueueAction(), openWidgetDetails(), closeWidgetDetails()
+	 */
+	import { onMount, onDestroy, afterUpdate, tick, createEventDispatcher } from 'svelte';
+	import { get } from 'svelte/store';
+	import { Button, showToast, GenerateLoader } from '@widgetic/design-system/components';
+	import {
+		AgentApi
+	} from '@widgetic/api-sdk';
+	import { maxCharsFromId } from '../constants.js';
+	import {
+		sanitizePreviewBuildError,
+		isInfrastructurePreviewError
+	} from '../pageHelpers.js';
+	import {
+		widgetPublishStatus,
+		codeGenerationStatus,
+		connectWebSocket,
+		setAuthToken as setWsAuthToken,
+		dynamicWorkerPreviewStatus
+	} from '../stores/websocketStore.js';
+	import { userSession as userSessionStore } from '../stores/userSession.js';
+
+	import { WidgetPreview } from '@widgetic/editor';
+	import EditableName from './EditableName.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function getAuthJwt(): string | undefined {
+		return userSession?.jwt ?? get(userSessionStore)?.jwt ?? undefined;
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// PROPS (from parent)
+	// ═══════════════════════════════════════════════════════════════════════
+
+	interface WidgetSummary {
+		id?: string;
+		created_at?: string | Date;
+		createdAt?: string | Date;
+		updated_at?: string | Date;
+		updatedAt?: string | Date;
+		repositoryId?: string | null;
+		repository_id?: string | null;
+		repoId?: string | null;
+		name?: string;
+		lastCpgCommitSha?: string | null;
+		[extra: string]: unknown;
+	}
+
+	type QueuedAction =
+		| { type: 'generate'; prompt: string }
+		| { type: 'save' };
+
+	export let userSession: { jwt?: string; user?: { id?: string } } | null = null;
+	export let hasValidToken: boolean = false;
+	export let selectedWidgetId: string | null = null;
+	export let selectedWidget: WidgetSummary | null = null;
+	export let isGeneratingCode: boolean = false;
+	
+	// When true, suppresses auto-opening the base preview iframe on VM ready.
+	// Used for canvas-converted widgets where we want to skip the default Widget.html
+	// and jump straight to code generation.
+	export let skipBasePreview: boolean = false;
+	/** 'pending' = repo being created (show loader); 'failed' = show Create Repository; 'ready' = normal. */
+	export let repositorySetupStatus: 'pending' | 'ready' | 'failed' = 'ready';
+	export let generateCodeStatus: string | null = null;
+	export let isCheckingActiveGeneration: boolean = false;
+	export let lastCommitId: string | null = null;
+	export let debugMode: boolean = false;
+	export let forceMockReady: boolean = false;
+	export let debugModeAvailable: boolean = false;
+
+	// Code gen / save / publish state — passed through to parent's slot content.
+	// svelte-ignore export_let_unused — these are consumed by <svelte:fragment> slots in the parent.
+	export let lastGenerationFailed: boolean = false;
+	export let lastGenerationError: string | null = null;
+	export let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
+	export let hasChangesToSave: boolean = false;
+	export let isSaveDisabled: boolean = true;
+	export let isGenerateDisabled: boolean = true;
+	export let isPublishDisabled: boolean = true;
+	export let isPublishing: boolean = false;
+	export let publishWidgetStatus: string | null = null;
+	export let publishNeedsSaveFirst: boolean = false;
+	export let lastPublishedVersion: number | null = null;
+	export let widgetJsPath: string | null = null;
+	export let isGeneratingInOtherTab: boolean = false;
+	export let isPublishingInOtherTab: boolean = false;
+	export let isSettingLiveVersion: number | null = null;
+	export let isHistoryOpen: boolean = false;
+	export let isLoadingHistory: boolean = false;
+	export let publishHistory: any[] = [];
+
+	// API client passed from parent (already authenticated)
+	export let agentClient: AgentApi;
+
+	// Prompt state — passed through to parent's slot content.
+	export let codeGenerationPrompt: string = '';
+	export let promptImages: string[] = [];
+	export let imageInputRef: HTMLInputElement | null = null;
+	export let isDraggingImage: boolean = false;
+	export let MAX_PROMPT_IMAGES: number = 5;
+	export let selectedModel: { id: string; name: string; provider: string; description: string } | null = null;
+	export let availableModels: { id: string; name: string; provider: string; description: string }[] = [];
+	export let userSelectedModelId: string = '';
+	export let modelsLoading: boolean = false;
+
+	/** Published widget URL for Embed step (may include compositionId). Set by parent. */
+	export let embedPreviewUrl: string | null = null;
+	/** Published widget base URL for Edit step when live matches latest commit. Null → Worker preview. */
+	export let editPreviewUrl: string | null = null;
+	/** True when generated code is ahead of the live published artifact. */
+	export let hasUnpublishedChanges: boolean = false;
+	/** Host API root (embedded site passes PUBLIC_API_URL). Used for published artifact proxy URLs. */
+	export let apiUrl: string | null = null;
+	/** Host Widget Builder origin (site PUBLIC_WIDGET_BUILDER_URL). */
+	export let widgetBuilderUrl: string | null = null;
+	/**
+	 * Viewport top inset for centering/clamping the floating panel (site header / creator top bar).
+	 * Parent should pass the embedded-aware value; null keeps the legacy auth-panel estimate.
+	 */
+	export let panelTopOffset: number | null = null;
+	/** Viewport bottom inset when sizing the default panel height. */
+	export let panelBottomMargin: number | null = null;
+	/**
+	 * When true (site embed), open the panel nearly full-viewport so Create/Edit
+	 * chat + preview have room — not a narrow floating card over the canvas.
+	 */
+	export let fillViewport: boolean = false;
+
+	/** Stacking order when multiple Widget Details panels are open. */
+	export let panelZIndex = 100;
+	/** Cascade offset index (0 = centered, 1+ = shifted down-right). */
+	export let panelCascadeIndex = 0;
+	/** False when another panel has keyboard/chat focus. */
+	export let isFocusedPanel = true;
+
+	// Reference slot-only props so Svelte doesn't warn about unused exports
+	$: void [generateCodeStatus, lastGenerationFailed, lastGenerationError, saveStatus,
+		hasChangesToSave, isSaveDisabled, isGenerateDisabled, isPublishDisabled,
+		isPublishing, publishWidgetStatus, publishNeedsSaveFirst, lastPublishedVersion,
+		isGeneratingInOtherTab, isPublishingInOtherTab, isSettingLiveVersion,
+		isHistoryOpen, isLoadingHistory, publishHistory,
+		codeGenerationPrompt, promptImages, imageInputRef, isDraggingImage,
+		MAX_PROMPT_IMAGES, selectedModel, availableModels, userSelectedModelId, modelsLoading,
+		embedPreviewUrl, editPreviewUrl, hasUnpublishedChanges, apiUrl, panelTopOffset, panelBottomMargin];
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// CLOUDFLARE WORKER CONFIG
+	// ═══════════════════════════════════════════════════════════════════════
+	// Prefer host-passed Widget Builder URL (site PUBLIC_WIDGET_BUILDER_URL) over package VITE_*.
+	$: widgetBuilderPublicBaseUrl = (
+		widgetBuilderUrl ||
+		import.meta.env.VITE_WIDGET_BUILDER_URL ||
+		import.meta.env.PUBLIC_WIDGET_BUILDER_URL ||
+		'https://wbuilder.widgetic.com'
+	).replace(/\/+$/, '');
+	/**
+	 * In embedded site DEV, same-origin `/__widget_builder__` proxies to the remote Worker
+	 * (see site vite.config). That is intentional — not a local wrangler instance.
+	 * Direct public URL is used when the host is not the Vite app (or when URL is non-wbuilder).
+	 */
+	$: widgetBuilderFetchBaseUrl = (import.meta.env.DEV && widgetBuilderPublicBaseUrl.includes('wbuilder.widgetic.com'))
+		? '/__widget_builder__'
+		: widgetBuilderPublicBaseUrl;
+	const cdnPublicBaseUrl = (import.meta.env.VITE_CDN_URL || 'https://cdn.widgetic.com').replace(/\/+$/, '');
+	const cdnFetchBaseUrl = (import.meta.env.DEV && cdnPublicBaseUrl.includes('cdn.widgetic.com'))
+		? '/__cdn_widgets__'
+		: cdnPublicBaseUrl;
+
+	function buildWorkerPreviewUrl(widgetId: string, opts: { forDisplay?: boolean } = {}): string {
+		const base = opts.forDisplay ? widgetBuilderPublicBaseUrl : widgetBuilderFetchBaseUrl;
+		return `${base}/preview/${widgetId}`;
+	}
+
+	/** Map public preview URLs to same-origin fetch paths in dev (iframe embed). */
+	function toPreviewFetchUrl(url: string): string {
+		if (!import.meta.env.DEV) return url;
+		if (url.startsWith('/__widget_builder__') || url.startsWith('/__cdn_widgets__')) return url;
+		// Published artifact path without host — route through Vite CDN proxy in dev
+		if (url.startsWith('/widgets/')) {
+			return `${cdnFetchBaseUrl}${url}`;
+		}
+		try {
+			const parsed = new URL(url, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+			// Dev iframe src is often absolute same-origin proxy (localhost:5174/__cdn_widgets__/...)
+			if (parsed.pathname.startsWith('/__cdn_widgets__/')) {
+				return `${cdnFetchBaseUrl}${parsed.pathname.replace('/__cdn_widgets__', '')}${parsed.search}`;
+			}
+			if (parsed.pathname.startsWith('/__widget_builder__/')) {
+				return `${widgetBuilderFetchBaseUrl}${parsed.pathname.replace('/__widget_builder__', '')}${parsed.search}`;
+			}
+			const workerOrigin = new URL(widgetBuilderPublicBaseUrl).origin;
+			if (parsed.origin === workerOrigin && parsed.pathname.startsWith('/preview/')) {
+				return `${widgetBuilderFetchBaseUrl}${parsed.pathname}${parsed.search}`;
+			}
+			const cdnOrigin = new URL(cdnPublicBaseUrl).origin;
+			if (parsed.origin === cdnOrigin && parsed.pathname.startsWith('/widgets/')) {
+				return `${cdnFetchBaseUrl}${parsed.pathname}${parsed.search}`;
+			}
+		} catch {
+			// keep as-is
+		}
+		return url;
+	}
+
+	function toPreviewDisplayUrl(fetchUrl: string): string {
+		if (fetchUrl.startsWith('/__widget_builder__')) {
+			return `${widgetBuilderPublicBaseUrl}${fetchUrl.replace('/__widget_builder__', '')}`;
+		}
+		if (fetchUrl.startsWith('/__cdn_widgets__')) {
+			return `${cdnPublicBaseUrl}${fetchUrl.replace('/__cdn_widgets__', '')}`;
+		}
+		try {
+			const parsed = new URL(fetchUrl, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+			if (parsed.pathname.startsWith('/__cdn_widgets__/')) {
+				return `${cdnPublicBaseUrl}${parsed.pathname.replace('/__cdn_widgets__', '')}${parsed.search}`;
+			}
+			if (parsed.pathname.startsWith('/__widget_builder__/')) {
+				return `${widgetBuilderPublicBaseUrl}${parsed.pathname.replace('/__widget_builder__', '')}${parsed.search}`;
+			}
+		} catch {
+			// keep as-is
+		}
+		return fetchUrl;
+	}
+
+	function toWorkerPreviewFetchUrl(url: string): string {
+		return toPreviewFetchUrl(url);
+	}
+
+	function toWorkerPreviewDisplayUrl(fetchUrl: string): string {
+		return toPreviewDisplayUrl(fetchUrl);
+	}
+	$: apiBaseUrl = (
+		apiUrl ||
+		import.meta.env.VITE_API_URL ||
+		import.meta.env.PUBLIC_API_URL ||
+		(import.meta.env.DEV ? 'http://localhost:3000' : '')
+	).replace(/\/+$/, '');
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Widget Session
+	// ═══════════════════════════════════════════════════════════════════════
+
+	let currentRepositoryId: string | null = null;
+	let queuedActions: QueuedAction[] = [];
+	let isProcessingQueuedActions = false;
+	let previewLoadedForWidgetId: string | null = null;
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Step Navigation
+	// ═══════════════════════════════════════════════════════════════════════
+	type WidgetStep = 'create' | 'edit' | 'embed';
+	export let currentStep: WidgetStep = 'create';
+
+	const STEPS: { id: WidgetStep; label: string; number: number }[] = [
+		{ id: 'create', label: 'Create', number: 1 },
+		{ id: 'edit', label: 'Edit', number: 2 },
+		{ id: 'embed', label: 'Embed', number: 3 },
+	];
+
+	$: hasWidgetCode = !!lastCommitId || lastPublishedVersion !== null;
+
+	/** Published widgets must never show the draft "No Code Yet" empty state. */
+	$: if (hasWidgetCode && previewError === 'NO_CODE_YET') {
+		previewError = lastPublishedVersion !== null
+			? 'Published version is not available. Use Rebuild code or republish.'
+			: 'Failed to compile widget code from repository.';
+		if (lastPublishedVersion !== null) {
+			publishedArtifactReachable = false;
+		}
+	}
+	$: canEditStep = lastPublishedVersion !== null && !isGeneratingCode;
+	$: canEmbedStep = lastPublishedVersion !== null && !isGeneratingCode;
+
+	// Auto-switch back to Create when code generation starts
+	let _justFinishedGenerating = false;
+	$: if (isGeneratingCode && currentStep !== 'create') {
+		currentStep = 'create';
+		switchPreviewUrlForStep('create');
+	}
+	// Track when generation finishes so we DON'T auto-switch to Edit
+	$: if (isGeneratingCode) {
+		_justFinishedGenerating = true;
+		previewError = null;
+		previewHasRuntimeError = false;
+		previewRuntimeErrorStatus = null;
+	}
+
+	// Default step on widget switch: always open on Create
+	let _lastAutoStepWidgetId: string | null = null;
+	$: if (selectedWidgetId && selectedWidgetId !== _lastAutoStepWidgetId && !isGeneratingCode) {
+		_lastAutoStepWidgetId = selectedWidgetId;
+		_lastGoToStepTimestamp = Date.now();
+		if (_justFinishedGenerating) {
+			_justFinishedGenerating = false;
+		}
+		currentStep = 'create';
+		dispatch('stepChange', { step: 'create' });
+		const createBase = normalizePreviewBaseUrl(
+			toPreviewFetchUrl(resolvePreviewUrlForStep('create') ?? '')
+		);
+		if (createBase) _lastEditPreviewBase = createBase;
+		switchPreviewUrlForStep('create');
+	}
+
+	// New / unpublished widgets: keep Edit & Embed visible as progress, but stay on Create.
+	$: if (!isGeneratingCode && !canEditStep && currentStep === 'edit') {
+		currentStep = 'create';
+		dispatch('stepChange', { step: 'create' });
+		switchPreviewUrlForStep('create');
+	}
+	$: if (!isGeneratingCode && !canEmbedStep && currentStep === 'embed') {
+		currentStep = canEditStep ? 'edit' : 'create';
+		dispatch('stepChange', { step: currentStep });
+		switchPreviewUrlForStep(currentStep);
+	}
+
+	function canNavigateToStep(step: WidgetStep): boolean {
+		if (step === 'create') return true;
+		if (step === 'edit') return canEditStep;
+		if (step === 'embed') return canEmbedStep;
+		return false;
+	}
+
+	function syncPreviewDisplayUrlForStep(step: WidgetStep): void {
+		const resolved = resolvePreviewUrlForStep(step);
+		if (!resolved) return;
+		directPreviewUrl = toPreviewDisplayUrl(toPreviewFetchUrl(resolved));
+	}
+
+	function isWorkerPreviewStep(step: WidgetStep): boolean {
+		return step === 'create';
+	}
+
+	function goToStep(step: WidgetStep) {
+		if (!canNavigateToStep(step)) return;
+
+		const previousStep = currentStep;
+		_lastGoToStepTimestamp = Date.now();
+		_stepSwitchInProgress = true;
+
+		const prevBase = normalizePreviewBaseUrl(iframeSrc);
+		const nextResolved = resolvePreviewUrlForStep(step);
+		const nextBase = nextResolved
+			? normalizePreviewBaseUrl(toPreviewFetchUrl(nextResolved))
+			: null;
+		const samePreviewArtifact =
+			!!prevBase && !!nextBase && prevBase === nextBase && !!iframeSrc;
+		const crossingPreviewFamily =
+			(isWorkerPreviewStep(previousStep) && !isWorkerPreviewStep(step))
+			|| (!isWorkerPreviewStep(previousStep) && isWorkerPreviewStep(step));
+
+		currentStep = step;
+		dispatch('stepChange', { step });
+
+		// URL bar always reflects the active step (Worker on Create, CDN on Edit/Embed)
+		syncPreviewDisplayUrlForStep(step);
+
+		// Update base trackers so reactive blocks don't re-trigger on this step change
+		if (nextBase) {
+			if (step === 'embed') _lastEmbedPreviewBase = nextBase;
+			if (step === 'edit') _lastEditPreviewBase = nextBase;
+			if (step === 'create') _lastEditPreviewBase = nextBase;
+		}
+
+		if (!samePreviewArtifact || crossingPreviewFamily) {
+			if (step === 'create' && crossingPreviewFamily && selectedWidgetId) {
+				const workerUrl = buildWorkerPreviewUrl(selectedWidgetId);
+				dynamicWorkerPreviewUrl = workerUrl;
+				syncPreviewDisplayUrlForStep('create');
+				void forceReloadPreviewIframe(workerUrl);
+			} else {
+				switchPreviewUrlForStep(step, { forceReload: crossingPreviewFamily });
+			}
+		} else {
+			previewLoading = false;
+			previewHydrating = false;
+			if (step === 'edit' || step === 'embed') {
+				if (previewWidgetReady) {
+					dispatch('previewLoaded', { step });
+				} else {
+					syncPreviewLoadingWithIframe();
+				}
+			}
+		}
+
+		void tick().then(() => {
+			_stepSwitchInProgress = false;
+		});
+	}
+
+	/** Resolve the canonical preview URL for a workflow step (without cache buster). */
+	function resolvePreviewUrlForStep(step: WidgetStep): string | null {
+		if (step === 'create') {
+			return dynamicWorkerPreviewUrl;
+		}
+		// Use published URL unless probe already confirmed it missing.
+		// Waiting for publishedArtifactReachable === true left Edit/Embed on the idle
+		// "Preview will appear after code generation" state when the probe never ran.
+		if (step === 'edit') {
+			if (editPreviewUrl && publishedArtifactReachable !== false) {
+				return editPreviewUrl;
+			}
+			return dynamicWorkerPreviewUrl;
+		}
+		if (step === 'embed') {
+			if (embedPreviewUrl && publishedArtifactReachable !== false) {
+				return embedPreviewUrl;
+			}
+			return dynamicWorkerPreviewUrl;
+		}
+		return dynamicWorkerPreviewUrl;
+	}
+
+	let compositionHydrationTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	export function beginCompositionHydration(): void {
+		previewHydrating = true;
+		previewLoading = true;
+		if (compositionHydrationTimeout) clearTimeout(compositionHydrationTimeout);
+		compositionHydrationTimeout = setTimeout(() => {
+			console.warn('[WidgetDetails] Composition hydration safety timeout — revealing preview');
+			finishCompositionHydration();
+		}, 3000);
+	}
+
+	export function finishCompositionHydration(): void {
+		if (compositionHydrationTimeout) {
+			clearTimeout(compositionHydrationTimeout);
+			compositionHydrationTimeout = null;
+		}
+		previewHydrating = false;
+		previewLoading = false;
+	}
+
+	/** Canonical published/worker URL for equality checks (dev proxy vs CDN public URL must match). */
+	function normalizePreviewBaseUrl(url: string | null): string | null {
+		if (!url) return null;
+		try {
+			const fetchUrl = toPreviewFetchUrl(url);
+			const displayUrl = toPreviewDisplayUrl(fetchUrl);
+			const parsed = new URL(displayUrl);
+			parsed.searchParams.delete('_t');
+			// Edit + Embed load the same published widget.html; composition is applied via postMessage
+			parsed.searchParams.delete('compositionId');
+			return parsed.toString();
+		} catch {
+			return url;
+		}
+	}
+
+	let lastAppliedPreviewFullUrl: string | null = null;
+	let lastAppliedPreviewAt = 0;
+
+	function previewFullUrlsMatch(a: string | null, b: string | null): boolean {
+		if (!a || !b) return false;
+		try {
+			return new URL(a, typeof window !== 'undefined' ? window.location.origin : 'http://localhost').href
+				=== new URL(b, typeof window !== 'undefined' ? window.location.origin : 'http://localhost').href;
+		} catch {
+			return a === b;
+		}
+	}
+
+	function applyPreviewUrlToIframe(
+		url: string | null,
+		cacheBuster?: number,
+		opts: { forceReload?: boolean; skipHydration?: boolean } = {}
+	) {
+		if (!url) return;
+
+		const fetchUrl = toPreviewFetchUrl(url);
+		const nextBase = normalizePreviewBaseUrl(fetchUrl);
+		const currentBase = normalizePreviewBaseUrl(iframeSrc);
+		if (!opts.forceReload && nextBase && currentBase && nextBase === currentBase && iframeSrc) {
+			directPreviewUrl = toPreviewDisplayUrl(fetchUrl);
+			lastPreviewUrlFetchTime = Date.now();
+			if (currentStep === 'edit' || currentStep === 'embed') {
+				// Same published artifact — never remount iframe; sync composition when already ready
+				if (previewWidgetReady) {
+					previewLoading = false;
+					previewHydrating = false;
+					dispatch('previewLoaded', { step: currentStep });
+				} else {
+					beginCompositionHydration();
+					setupPreviewFallbackTimeout();
+					syncPreviewLoadingWithIframe();
+				}
+			} else {
+				previewLoading = false;
+				previewHydrating = false;
+				setupPreviewFallbackTimeout();
+				syncPreviewLoadingWithIframe();
+			}
+			return;
+		}
+
+		resetPreviewMessageBridge();
+		resetConsoleLogsForNewPreviewRun();
+		if (!opts.skipHydration && (currentStep === 'edit' || currentStep === 'embed')) {
+			beginCompositionHydration();
+		}
+		directPreviewUrl = toPreviewDisplayUrl(fetchUrl);
+		let nextFull = fetchUrl;
+		try {
+			const parsed = new URL(fetchUrl, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+			parsed.searchParams.set('_t', (cacheBuster ?? Date.now()).toString());
+			nextFull = parsed.toString();
+		} catch {
+			nextFull = fetchUrl;
+		}
+
+		const now = Date.now();
+		if (
+			previewFullUrlsMatch(nextFull, lastAppliedPreviewFullUrl)
+			&& now - lastAppliedPreviewAt < 200
+		) {
+			directPreviewUrl = toPreviewDisplayUrl(fetchUrl);
+			return;
+		}
+		lastAppliedPreviewFullUrl = nextFull;
+		lastAppliedPreviewAt = now;
+
+		// Single navigation via WidgetPreview src binding — do not also set previewIframe.src directly
+		iframeSrc = nextFull;
+		lastPreviewUrlFetchTime = Date.now();
+		if (currentStep === 'create') {
+			previewLoading = true;
+		}
+		setupPreviewFallbackTimeout();
+		syncPreviewLoadingWithIframe();
+	}
+
+	/** If iframe already loaded before onload handler attached, clear the loading overlay immediately. */
+	function syncPreviewLoadingWithIframe(): void {
+		requestAnimationFrame(() => {
+			if (!previewLoading || !previewIframe || !iframeSrc) return;
+			// Must match the exact target URL (incl. _t) — base-only match caused a false load on stale iframe content
+			if (!previewFullUrlsMatch(iframeSrc, previewIframe.src)) {
+				return;
+			}
+			if (!previewIframe.contentWindow) return;
+			try {
+				const loc = previewIframe.contentWindow.location.href;
+				if (loc && loc !== 'about:blank' && previewFullUrlsMatch(iframeSrc, loc)) {
+					handlePreviewIframeLoad();
+				}
+			} catch {
+				handlePreviewIframeLoad();
+			}
+		});
+	}
+
+	/** Single-navigation cache-bust reload (refresh button, step switch). */
+	async function reloadPreviewIframeCacheBust(url: string): Promise<void> {
+		const fetchUrl = toPreviewFetchUrl(url);
+		const nextBase = normalizePreviewBaseUrl(fetchUrl);
+		const currentBase = normalizePreviewBaseUrl(iframeSrc);
+		const sameArtifact = !!nextBase && !!currentBase && nextBase === currentBase && !!iframeSrc;
+
+		previewError = null;
+		resetPreviewMessageBridge();
+		resetConsoleLogsForNewPreviewRun();
+		previewIframeGeneration += 1;
+
+		if (sameArtifact) {
+			// Soft refresh — one navigation, no hydration overlay flash
+			if (currentStep === 'create') {
+				previewLoading = true;
+			} else {
+				previewLoading = false;
+				previewHydrating = false;
+			}
+			applyPreviewUrlToIframe(fetchUrl, Date.now(), { forceReload: true, skipHydration: true });
+			setupPreviewFallbackTimeout();
+			return;
+		}
+
+		previewLoading = true;
+		if (currentStep === 'edit' || currentStep === 'embed') {
+			beginCompositionHydration();
+		}
+		applyPreviewUrlToIframe(fetchUrl, Date.now(), { forceReload: true, skipHydration: false });
+		setupPreviewFallbackTimeout();
+	}
+
+	/** Force iframe remount + cache-bust after Worker rebuild (avoids stale cached document). */
+	async function forceReloadPreviewIframe(url: string): Promise<void> {
+		const fetchUrl = toPreviewFetchUrl(url);
+		previewError = null;
+		previewLoading = true;
+		resetConsoleLogsForNewPreviewRun();
+		directPreviewUrl = toPreviewDisplayUrl(fetchUrl);
+		iframeSrc = 'about:blank';
+		previewIframeGeneration++;
+		await tick();
+		applyPreviewUrlToIframe(fetchUrl, Date.now(), { forceReload: true });
+		setupPreviewFallbackTimeout();
+	}
+
+	function switchPreviewUrlForStep(step: WidgetStep, opts: { forceReload?: boolean } = {}) {
+		const url = resolvePreviewUrlForStep(step);
+		if (url) {
+			applyPreviewUrlToIframe(url, Date.now(), {
+				forceReload: opts.forceReload,
+				skipHydration: opts.forceReload && step === 'create',
+			});
+		}
+	}
+
+	// Track last step-switch timestamp to prevent reactive blocks from re-triggering immediately after goToStep
+	let _lastGoToStepTimestamp = 0;
+	let _stepSwitchInProgress = false;
+
+	// Embed step only: reload iframe when published base URL genuinely changes (not on step switch — goToStep handles that)
+	let _lastEmbedPreviewBase: string | null = null;
+	$: if (currentStep === 'embed' && embedPreviewUrl) {
+		const embedBase = normalizePreviewBaseUrl(toPreviewFetchUrl(embedPreviewUrl));
+		if (embedBase && embedBase !== _lastEmbedPreviewBase) {
+			_lastEmbedPreviewBase = embedBase;
+			applyPreviewUrlToIframe(embedPreviewUrl);
+		}
+	}
+
+	// Edit step only: reload iframe when published base URL genuinely changes
+	let _lastEditPreviewBase: string | null = null;
+	/** False when HEAD probe shows published CDN artifact is missing (Edit/Embed fallback to Worker). */
+	let publishedArtifactReachable: boolean | null = null;
+
+	function isCdnArtifactMissingError(message: string | null): boolean {
+		if (!message) return false;
+		return /artifact not found|artifact missing|not available|CDN|404 Object not found|not publicly accessible/i.test(message);
+	}
+	$: if (currentStep === 'edit') {
+		const editSource = resolvePreviewUrlForStep('edit') ?? '';
+		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 });
+		}
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Preview / iframe
+	// ═══════════════════════════════════════════════════════════════════════
+
+	let directPreviewUrl: string | null = null;
+	let iframeSrc: string | null = null;
+	let previewCacheBuster = Date.now();
+	/** Incremented on forced reload — remounts preview iframe to bust browser cache. */
+	let previewIframeGeneration = 0;
+	let previewLoading = false;
+	let previewHydrating = false;
+	/** True after iframe sends widgetic:ready — postMessage updates must wait for this. */
+	let previewWidgetReady = false;
+	let pendingPreviewMessages: Record<string, unknown>[] = [];
+	let previewReadyFallbackTimeout: ReturnType<typeof setTimeout> | null = null;
+	let hydrationSafetyTimeout: ReturnType<typeof setTimeout> | null = null;
+	let previewError: string | null = null;
+	let previewRetryCount = 0;
+	let previewHasRuntimeError = false;
+	let previewRuntimeErrorStatus: number | null = null;
+	/** Delay overlay so a subsequent widgetic:ready can cancel false positives. */
+	let pendingRuntimeErrorTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clearPendingRuntimeErrorOverlay(): void {
+		if (pendingRuntimeErrorTimer) {
+			clearTimeout(pendingRuntimeErrorTimer);
+			pendingRuntimeErrorTimer = null;
+		}
+	}
+
+	function isBenignPreviewRuntimeError(message: string): boolean {
+		const msg = (message || '').trim();
+		if (!msg) return true;
+		return (
+			/NotAllowedError/i.test(msg) ||
+			/AbortError/i.test(msg) ||
+			/play\(\) (request was interrupted|failed)/i.test(msg) ||
+			/The play\(\) request was interrupted/i.test(msg) ||
+			/ResizeObserver loop/i.test(msg) ||
+			/^Script error\.?$/i.test(msg) ||
+			/user didn't interact|autoplay/i.test(msg)
+		);
+	}
+
+	function looksLikeHardCompileFailure(message: string): boolean {
+		return /syntax|compile|parse error|Unexpected token|is not defined|Cannot find module|Failed to fetch dynamically imported|CSS|svelte/i.test(
+			message || '',
+		);
+	}
+	let showPreviewModal = false;
+	let previewModalRef: HTMLDivElement | null = null;
+	let widgetPreviewComponentRef: { getResizeLimits?: () => { maxWidth: number; maxHeight: number }; fitToContainer?: () => void } | undefined;
+	let previewIframe: HTMLIFrameElement | null = null;
+	let isLoadingDirectPreviewUrl = false;
+	let previewFetchRetryCount = 0;
+	let dwLoadTimeoutHandle: ReturnType<typeof setTimeout> | null = null;
+	let lastPreviewUrlFetchTime = 0;
+	let previewSilentRetryCount = 0;
+	/** Monotonic counter — stale triggerBuildFromRepo runs must not overwrite a good preview. */
+	let buildFromRepoRunId = 0;
+	/** Background panels skip preview compile until the user focuses them. */
+	let previewBuildDeferred = false;
+	let wasFocusedPanel = isFocusedPanel;
+	let isRebuildingPreview = false;
+
+	/** Auto-rebuild attempt counter — reset each widget selection to guard against loops. */
+	let widgetNotFoundAutoRebuildAttempts = 0;
+	/**
+	 * After a successful codegen Worker build, GitLab rebuilds overwrite the new HTML with
+	 * a stale repo tree (commit not visible yet) and the iframe flashes new → old.
+	 * Ignore force rebuild / widget-not-found auto-rebuild during this window.
+	 */
+	let codegenPreviewFreshUntil = 0;
+
+	function isCodegenPreviewFresh(): boolean {
+		return Date.now() < codegenPreviewFreshUntil;
+	}
+
+	/** Call when codegen already compiled the Worker preview — do not rebuild from GitLab. */
+	export function markCodegenPreviewFresh(): void {
+		codegenPreviewFreshUntil = Date.now() + 30_000;
+		widgetNotFoundAutoRebuildAttempts = 1;
+		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). */
+	export function hasLiveWorkerPreview(): boolean {
+		if (!selectedWidgetId) return false;
+		if (!iframeSrc || iframeSrc === 'about:blank') return false;
+		if (previewError || previewHasRuntimeError) return false;
+		const workerUrl = dynamicWorkerPreviewUrl || buildWorkerPreviewUrl(selectedWidgetId);
+		const currentBase = normalizePreviewBaseUrl(iframeSrc);
+		const workerBase = normalizePreviewBaseUrl(toPreviewFetchUrl(workerUrl));
+		return !!currentBase && !!workerBase && currentBase === workerBase;
+	}
+
+	// Preview resize
+	const PREVIEW_MIN_WIDTH = 120;
+	const PREVIEW_MIN_HEIGHT = 80;
+	const PREVIEW_DEFAULT_WIDTH = 600;
+	const PREVIEW_DEFAULT_HEIGHT = 480;
+	let previewResizeWidth: number | null = PREVIEW_DEFAULT_WIDTH;
+	let previewResizeHeight: number | null = PREVIEW_DEFAULT_HEIGHT;
+	let previewAreaEl: HTMLElement | null = null;
+	let isResizingPreview = false;
+
+	$: isPreviewContentReady = !previewLoading && !previewHydrating && !previewError && !previewHasRuntimeError && (!!iframeSrc || !!getFallbackPreviewUrl());
+
+	const { DEV: isDevMode } = import.meta.env;
+	const shouldLogPreviewWarnings = Boolean(isDevMode);
+
+	// Cloudflare Dynamic Workers — preview URL from Worker (set via WebSocket event)
+	let dynamicWorkerPreviewUrl: string | null = null;
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Preview Readiness
+	// ═══════════════════════════════════════════════════════════════════════
+
+	let hasConnectedForDevServerCheck = false;
+	let hasAutoOpenedPreview = false;
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Inline Panel
+	// ═══════════════════════════════════════════════════════════════════════
+
+	let inlinePanelView: 'preview' | 'console' | null = 'preview';
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Console logs from widget iframe
+	// ═══════════════════════════════════════════════════════════════════════
+
+	interface ConsoleLogEntry {
+		timestamp: Date;
+		level: 'log' | 'warn' | 'error' | 'info';
+		message: string;
+	}
+	let consoleLogs: ConsoleLogEntry[] = [];
+	let consoleScrollEl: HTMLElement | null = null;
+
+	function handleWidgetConsoleMessage(event: MessageEvent) {
+		if (!event.data || typeof event.data !== 'object') return;
+		const { type, level, message, args } = event.data;
+		if (type !== 'widgetic:console') return;
+		const entry: ConsoleLogEntry = {
+			timestamp: new Date(),
+			level: level || 'log',
+			message: typeof message === 'string' ? message : JSON.stringify(args || message),
+		};
+		consoleLogs = [...consoleLogs, entry];
+		// Auto-scroll to bottom
+		requestAnimationFrame(() => {
+			if (consoleScrollEl) consoleScrollEl.scrollTop = consoleScrollEl.scrollHeight;
+		});
+	}
+
+	function resetConsoleLogsForNewPreviewRun(): void {
+		consoleLogs = [];
+	}
+
+	function formatRuntimeLogLine(entry: ConsoleLogEntry): string {
+		const time = entry.timestamp.toISOString().slice(11, 23);
+		return `[${time}] [${entry.level}] ${entry.message}`;
+	}
+
+	/** Latest preview console lines for codegen iteration (capped). */
+	export function getLatestRuntimeLogs(maxLines = 80): string[] {
+		if (consoleLogs.length === 0) return [];
+		return consoleLogs.slice(-maxLines).map(formatRuntimeLogLine);
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Token auto-refresh for preview
+	// ═══════════════════════════════════════════════════════════════════════
+
+	const PREVIEW_TOKEN_REFRESH_MS = 25 * 60 * 1000;
+	let previewTokenRefreshInterval: ReturnType<typeof setInterval> | null = null;
+	const TOKEN_CHECK_INTERVAL_MS = 15 * 1000;
+
+	// Preview iframe timeout
+	const PREVIEW_FIRST_LOAD_TIMEOUT_MS = 90000;
+	let previewTimeoutHandle: ReturnType<typeof setTimeout> | null = null;
+	let previewFallbackHandle: ReturnType<typeof setTimeout> | null = null;
+	let previewHealthCheckHandle: ReturnType<typeof setInterval> | null = null;
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INTERNAL STATE — Panel positioning (floating panel)
+	// ═══════════════════════════════════════════════════════════════════════
+
+	let showWidgetDetails = false;
+	let contentContainerEl: HTMLDivElement | null = null;
+	let hasScrollbar = false;
+
+	const authStatusEstimatedHeight = 140;
+	const legacyTopOffset = authStatusEstimatedHeight + 20;
+	const legacyBottomMargin = 24;
+	$: detailsPanelTopOffset = panelTopOffset ?? legacyTopOffset;
+	$: detailsPanelBottomMargin = panelBottomMargin ?? legacyBottomMargin;
+
+	const DETAILS_PANEL_DEFAULT_WIDTH = 1100;
+	const DETAILS_PANEL_MIN_WIDTH = 720;
+	const DETAILS_PANEL_MIN_HEIGHT = 500;
+	const DETAILS_PANEL_FILL_INSET = 16;
+	/** Left column share of the two-col layout (chat / PropsEditor). */
+	const LEFT_COL_DEFAULT_PERCENT = 58;
+	const LEFT_COL_MIN_PERCENT = 32;
+	const LEFT_COL_MAX_PERCENT = 72;
+
+	let detailsPanelX = -1;
+	let detailsPanelY = -1;
+	let isDraggingDetails = false;
+	let detailsDragStartX = 0;
+	let detailsDragStartY = 0;
+	let detailsInitialX = 0;
+	let detailsInitialY = 0;
+
+	let detailsPanelWidth = DETAILS_PANEL_DEFAULT_WIDTH;
+	let detailsPanelHeight = 0;
+	let isResizingDetails = false;
+	let detailsResizeStartX = 0;
+	let detailsResizeStartY = 0;
+	let detailsResizeStartWidth = 0;
+	let detailsResizeStartHeight = 0;
+
+	let leftColPercent = LEFT_COL_DEFAULT_PERCENT;
+	let isResizingColumns = false;
+	let columnResizeStartX = 0;
+	let columnResizeStartPercent = LEFT_COL_DEFAULT_PERCENT;
+
+	// Admin Delete Modal State — kept in this component since it's inside the panel template
+	let showAdminDeleteModal = false;
+	let adminDeleteWidget: WidgetSummary | null = null;
+	let adminKeyInput = '';
+	let adminDeleteLoading = false;
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// EXPORTED FUNCTIONS (parent calls via bind:this)
+	// ═══════════════════════════════════════════════════════════════════════
+
+	function shouldDeferPreviewNetworkWork(force = false): boolean {
+		return !isFocusedPanel && !force;
+	}
+
+	/** Probe whether a published artifact URL is reachable before loading it in the iframe. */
+	async function probePublishedArtifactUrl(url: string): Promise<boolean> {
+		const fetchUrl = toPreviewFetchUrl(url);
+		if (!fetchUrl) return false;
+
+		// Cross-origin CDN HEAD is blocked by CORS from the site origin; the iframe can still
+		// load the artifact. Skip the probe and let iframe onError report real failures.
+		try {
+			const absolute = new URL(fetchUrl, typeof window !== 'undefined' ? window.location.href : 'https://cdn.widgetic.com');
+			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);
+				return true;
+			}
+		} catch {
+			/* fall through to HEAD probe */
+		}
+
+		try {
+			const probeRes = await fetch(fetchUrl, { method: 'HEAD' });
+			if (probeRes.ok) return true;
+			console.warn('[WidgetDetails] Published artifact probe failed:', probeRes.status, fetchUrl);
+		} catch (probeErr) {
+			console.warn('[WidgetDetails] Published artifact probe error:', probeErr);
+		}
+		return false;
+	}
+
+	/** Load published CDN preview without Worker probe (safe for background panels). */
+	async function loadPublishedPreviewForCurrentStep(): Promise<boolean> {
+		if (currentStep === 'edit' && editPreviewUrl) {
+			const reachable = await probePublishedArtifactUrl(editPreviewUrl);
+			publishedArtifactReachable = reachable;
+			if (!reachable) {
+				previewError = 'Published version is not available. Use Rebuild code.';
+				previewLoading = false;
+				return false;
+			}
+			_lastEditPreviewBase = null;
+			switchPreviewUrlForStep('edit', { forceReload: true });
+			previewBuildDeferred = false;
+			previewError = null;
+			return true;
+		}
+		if (currentStep === 'embed' && embedPreviewUrl) {
+			const reachable = await probePublishedArtifactUrl(embedPreviewUrl);
+			publishedArtifactReachable = reachable;
+			if (!reachable) {
+				previewError = 'Published version is not available. Use Rebuild code.';
+				previewLoading = false;
+				return false;
+			}
+			_lastEmbedPreviewBase = null;
+			applyPreviewUrlToIframe(embedPreviewUrl);
+			previewBuildDeferred = false;
+			previewError = null;
+			return true;
+		}
+		return false;
+	}
+
+	/** Probe Worker / build-from-repo pipeline without resetting panel state. */
+	async function runPreviewLoadPipeline(widgetId: string): Promise<void> {
+		if (shouldDeferPreviewNetworkWork()) {
+			console.log('[WidgetDetails] Deferring preview load (background panel):', widgetId.substring(0, 8));
+			previewBuildDeferred = true;
+			previewLoading = false;
+			previewError = null;
+			const publishedLoaded = await loadPublishedPreviewForCurrentStep();
+			if (!publishedLoaded) {
+				previewBuildDeferred = true;
+			}
+			return;
+		}
+		previewBuildDeferred = false;
+
+		const workerPreviewUrl = buildWorkerPreviewUrl(widgetId);
+		const workerPreviewDisplayUrl = buildWorkerPreviewUrl(widgetId, { forDisplay: true });
+		dynamicWorkerPreviewUrl = workerPreviewUrl;
+		directPreviewUrl = workerPreviewDisplayUrl;
+		previewError = null;
+		previewLoading = true;
+
+		const capturedWidgetId = widgetId;
+		const probeResult = await probeWorkerReachable(workerPreviewUrl);
+		if (selectedWidgetId !== capturedWidgetId) return;
+
+		if (probeResult === 'unreachable') {
+			console.warn('[WidgetDetails] Worker unreachable at:', workerPreviewUrl);
+			previewLoading = false;
+			previewError = 'Widget Builder is not reachable. Make sure the Worker is running.';
+			return;
+		}
+
+		if (probeResult === 'not-found') {
+			console.log('[WidgetDetails] Widget not on Worker — build-from-repo', {
+				widgetId: capturedWidgetId.substring(0, 8),
+				hasJwt: !!getAuthJwt(),
+			});
+			if (isGeneratingCode) {
+				previewLoading = true;
+				previewError = null;
+				return;
+			}
+			const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
+			if (!hasRepo) {
+				// New widget: repo is still being created — do not call build-from-repo (400 noise).
+				console.log('[WidgetDetails] No repository yet — skipping build-from-repo');
+				previewLoading = false;
+				previewError = 'NO_CODE_YET';
+				return;
+			}
+			await triggerBuildFromRepo();
+			return;
+		}
+
+		dynamicWorkerPreviewUrl = workerPreviewUrl;
+		directPreviewUrl = workerPreviewUrl;
+		previewLoading = true;
+		switchPreviewUrlForStep(currentStep);
+		console.log('[WidgetDetails] Loading preview iframe:', workerPreviewUrl, 'step:', currentStep);
+		requestAnimationFrame(() => {
+			setTimeout(fitPreviewToArea, 150);
+		});
+		dispatch('buildFromRepoSuccess', { widgetId: capturedWidgetId, source: 'worker-cache' });
+	}
+
+	/** Resume preview after a background panel receives focus. */
+	export async function resumeDeferredPreviewLoad(): Promise<void> {
+		if (!previewBuildDeferred || !selectedWidgetId) return;
+		previewBuildDeferred = false;
+		await runPreviewLoadPipeline(selectedWidgetId);
+	}
+
+	/**
+	 * Single entry point for loading/switching widgets.
+	 * Atomically resets ALL internal state and loads Worker preview for the new widget.
+	 */
+	export async function loadWidget(widgetId: string | null): Promise<void> {
+		try {
+			// === Full reset of all widget-scoped state ===
+			consoleLogs = [];
+			// Preview / iframe
+			directPreviewUrl = null;
+			dynamicWorkerPreviewUrl = null;
+			iframeSrc = null;
+			_lastEditPreviewBase = null;
+			_lastEmbedPreviewBase = null;
+			isLoadingDirectPreviewUrl = false;
+			previewHasRuntimeError = false;
+			previewRuntimeErrorStatus = null;
+			previewHydrating = false;
+			resetPreviewMessageBridge();
+			clearPendingRuntimeErrorOverlay();
+			// Keep previewLoading=true if it was set by widget selection (isWidgetLoading)
+			if (!isWidgetLoading) {
+				previewLoading = false;
+			}
+			isWidgetLoading = false;
+			previewError = null;
+			previewRetryCount = 0;
+			lastWsPreviewSignature = null;
+			previewIframeGeneration = 0;
+			publishedArtifactReachable = null;
+			previewLoadedForWidgetId = null;
+			resetPreviewResizeSize();
+			showPreviewModal = false;
+			if (dwLoadTimeoutHandle) { clearTimeout(dwLoadTimeoutHandle); dwLoadTimeoutHandle = null; }
+
+			hasConnectedForDevServerCheck = false;
+			hasAutoOpenedPreview = false;
+
+			// Inline panel — default to preview tab
+			inlinePanelView = 'preview';
+
+			// Token auto-refresh
+			stopPreviewTokenAutoRefresh();
+
+			// Read repository ID from the widget
+			const widgetRepoId = normalizeRepositoryId(selectedWidget);
+			if (widgetRepoId) currentRepositoryId = widgetRepoId;
+
+			// Do not auto-open here — parent owns panel visibility via openWidgetDetailsPanel / close.
+			// Auto-open used to fight the close button (loadWidget after close reopened the panel).
+			if (!widgetId) {
+				closeWidgetDetails({ silent: true });
+			}
+
+		await tick();
+
+		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');
+			previewLoading = true;
+			previewError = null;
+			return;
+		}
+
+		if (await loadPublishedPreviewForCurrentStep()) {
+			return;
+		}
+
+		// Brand-new widget (no commit, not published): skip Worker HEAD / build-from-repo.
+		// Probing localhost:5173/__widget_builder__/preview/... only produces expected 404 noise.
+		const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
+		if (!lastCommitId && lastPublishedVersion === null) {
+			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;
+		}
+
+		previewLoading = true;
+		await runPreviewLoadPipeline(widgetId);
+		if (widgetId) previewLoadedForWidgetId = widgetId;
+		} catch (e) {
+			console.warn('WidgetDetails.loadWidget error:', e);
+		}
+	}
+
+	/** Refresh the preview iframe — called by parent after code generation/restore completes */
+	/** Called by the parent right before refreshPreview after a successful publish, so that the
+	 *  next preview load probes the CDN artifact instead of reusing the stale Worker URL. */
+	export function invalidatePublishedArtifactCache(): void {
+		publishedArtifactReachable = null;
+		_lastEditPreviewBase = null;
+		_lastEmbedPreviewBase = null;
+	}
+
+	export async function refreshPreview(opts: { withRetry?: boolean; skipIfAlreadyShowing?: boolean } = {}): Promise<void> {
+		if (opts.skipIfAlreadyShowing && hasLiveWorkerPreview()) {
+			console.log('[WidgetDetails] refreshPreview skipped — Worker preview already showing');
+			previewLoading = false;
+			previewHydrating = false;
+			return;
+		}
+		await refreshPreviewIframe(opts);
+	}
+
+	/** Trigger build-from-repo with retries — for duplicate/returning widgets.
+	 *  Unlike loadWidget, this doesn't reset state. Just builds and updates preview.
+	 *  When force is true, always recompiles from GitLab (evicts Worker cache) even if preview exists. */
+	export async function triggerBuildFromRepo(options?: { force?: boolean }): Promise<void> {
+		const forceRebuild = options?.force === true;
+		if (!selectedWidgetId) return;
+		if (shouldDeferPreviewNetworkWork(forceRebuild)) {
+			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');
+			previewLoading = false;
+			previewError = 'NO_CODE_YET';
+			return;
+		}
+		const capturedWidgetId = selectedWidgetId;
+		const runId = ++buildFromRepoRunId;
+		if (forceRebuild) isRebuildingPreview = true;
+		try {
+		const workerPreviewUrl = buildWorkerPreviewUrl(capturedWidgetId);
+		const workerPreviewDisplayUrl = buildWorkerPreviewUrl(capturedWidgetId, { forDisplay: true });
+
+		if (forceRebuild && isCodegenPreviewFresh()) {
+			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');
+				dynamicWorkerPreviewUrl = workerPreviewUrl;
+				directPreviewUrl = workerPreviewDisplayUrl;
+				inlinePanelView = 'preview';
+				await forceReloadPreviewIframe(workerPreviewUrl);
+				dispatch('buildFromRepoSuccess', { widgetId: capturedWidgetId, source: 'codegen-fresh' });
+				return;
+			}
+		}
+
+		const isStaleRun = () =>
+			!isFocusedPanel || selectedWidgetId !== capturedWidgetId || runId !== buildFromRepoRunId;
+
+		/** If Worker already has a preview (e.g. codegen finished while build-from-repo ran), load it. */
+		const tryRecoverPreviewFromWorker = async (): Promise<boolean> => {
+			if (isStaleRun()) return false;
+			const probeResult = await probeWorkerReachable(workerPreviewUrl);
+			if (isStaleRun()) return false;
+			if (probeResult === 'ok') {
+				dynamicWorkerPreviewUrl = workerPreviewUrl;
+				directPreviewUrl = workerPreviewDisplayUrl;
+				inlinePanelView = 'preview';
+				await forceReloadPreviewIframe(workerPreviewUrl);
+				return true;
+			}
+			return false;
+		};
+
+		// Helper to load preview from Worker URL (always remount iframe — rebuild may change HTML at same URL)
+		const loadPreviewFromWorker = async () => {
+			dynamicWorkerPreviewUrl = workerPreviewUrl;
+			directPreviewUrl = workerPreviewDisplayUrl;
+			inlinePanelView = 'preview';
+			await forceReloadPreviewIframe(workerPreviewUrl);
+		};
+
+		// Step 1: Probe Worker — if widget is already compiled, just show preview (unless forced rebuild)
+		const probeResult = await probeWorkerReachable(workerPreviewUrl);
+		if (isStaleRun()) return;
+		if (!forceRebuild && probeResult === 'ok') {
+			console.log('[WidgetDetails] triggerBuildFromRepo: Worker already has widget, loading preview directly');
+			dispatch('buildFromRepoSuccess', { widgetId: capturedWidgetId });
+			loadPreviewFromWorker();
+			return;
+		}
+		if (probeResult === 'unreachable') {
+			console.warn('[WidgetDetails] triggerBuildFromRepo: Worker unreachable at', workerPreviewUrl);
+			previewLoading = false;
+			previewError = 'Widget Builder is not reachable. Make sure the Worker is running.';
+			return;
+		}
+
+		// 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');
+			previewLoading = true;
+			previewError = null;
+			return;
+		}
+
+		// Step 2: Try build-from-repo with retries
+		let lastBuildErrorMsg = '';
+		const authJwt = getAuthJwt();
+		if (authJwt && agentClient) {
+			const maxRetries = 3;
+			const retryDelayMs = 3000;
+			for (let attempt = 1; attempt <= maxRetries; attempt++) {
+				if (isStaleRun()) return;
+				try {
+					const buildData = await agentClient.agentWidgetBuilderBuildFromRepoWidgetIdPost({
+						widgetId: capturedWidgetId
+					});
+					if (isStaleRun()) return;
+
+					console.log('[WidgetDetails] triggerBuildFromRepo succeeded', { buildTimeMs: buildData?.data?.buildTimeMs ?? buildData?.buildTimeMs, attempt });
+					previewError = null;
+					previewLoading = false;
+					dispatch('widgetDataChanged', { widgetId: capturedWidgetId });
+					dispatch('buildFromRepoSuccess', {
+						widgetId: capturedWidgetId,
+						buildTimeMs: buildData?.data?.buildTimeMs ?? buildData?.buildTimeMs,
+						repoHeadCommitSha:
+							buildData?.data?.repoHeadCommitSha ??
+							buildData?.data?.repo_head_commit_sha ??
+							buildData?.repoHeadCommitSha,
+					});
+					if (isStaleRun()) return;
+					loadPreviewFromWorker();
+					return;
+				} catch (buildErr: any) {
+					let buildErrorCode = '';
+					lastBuildErrorMsg = buildErr?.message || 'Build request failed';
+
+					// SDK ResponseError may carry API error payload
+					const errBody = buildErr?.response?.value?.() ?? buildErr?.body ?? null;
+					if (errBody && typeof errBody === 'object') {
+						lastBuildErrorMsg = errBody?.error?.message || errBody?.message || lastBuildErrorMsg;
+						buildErrorCode = errBody?.error?.code || errBody?.code || '';
+					}
+					lastBuildErrorMsg = sanitizePreviewBuildError(lastBuildErrorMsg);
+
+					if (buildErrorCode === 'NO_CODE_YET') {
+						console.log('[WidgetDetails] triggerBuildFromRepo: repo exists but has no code yet — skipping retries');
+						lastBuildErrorMsg = 'NO_CODE_YET';
+						break;
+					}
+
+					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...`);
+						await new Promise(r => setTimeout(r, retryDelayMs));
+						continue;
+					}
+					console.warn('[WidgetDetails] triggerBuildFromRepo giving up:', { status, error: lastBuildErrorMsg, attempts: attempt });
+					break;
+				}
+			}
+		} else {
+			lastBuildErrorMsg = agentClient
+				? 'Not authenticated'
+				: 'API client is not configured';
+		}
+
+		// Step 3: All builds failed — decide what to show
+		if (isStaleRun()) return;
+
+		// Forced rebuild (user clicked Rebuild) must surface compile errors — never keep a stale iframe.
+		const allowStalePreviewRecovery = !forceRebuild;
+
+		// 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');
+			previewError = null;
+			previewLoading = false;
+			return;
+		}
+
+		if (allowStalePreviewRecovery && (await tryRecoverPreviewFromWorker())) {
+			console.log('[WidgetDetails] triggerBuildFromRepo: recovered preview from Worker after build-from-repo failure');
+			return;
+		}
+
+		if (selectedWidgetId === capturedWidgetId) {
+			// For published widgets, try loading via API proxy (handles both R2 and CDN)
+			if (lastPublishedVersion && widgetJsPath && apiBaseUrl) {
+				const proxyUrl = `${apiBaseUrl}/widgets/${capturedWidgetId}/v${lastPublishedVersion}/widget.html`;
+				console.log('[WidgetDetails] triggerBuildFromRepo: build failed but widget is published — checking API proxy:', proxyUrl);
+				try {
+					const probeRes = await fetch(proxyUrl, { method: 'HEAD' });
+					if (probeRes.ok) {
+						console.log('[WidgetDetails] API proxy returned OK — loading published widget');
+						previewError = null;
+						previewLoading = true;
+						iframeSrc = proxyUrl;
+						setupPreviewFallbackTimeout();
+						syncPreviewLoadingWithIframe();
+						return;
+					}
+					console.warn('[WidgetDetails] API proxy returned', probeRes.status, '— artifact not on R2, showing generate button');
+				} catch (probeErr) {
+					console.warn('[WidgetDetails] API proxy probe failed:', probeErr);
+				}
+			}
+			
+			previewLoading = false;
+			if (forceRebuild && iframeSrc) {
+				iframeSrc = null;
+				directPreviewUrl = null;
+			}
+			if (lastBuildErrorMsg === 'NO_CODE_YET') {
+				if (lastPublishedVersion !== null) {
+					previewError =
+						'Published version is not available and source code could not be compiled. Use Rebuild code or republish.';
+					publishedArtifactReachable = false;
+				} else {
+					previewError = 'NO_CODE_YET';
+				}
+			} else if (!lastCommitId && !lastPublishedVersion) {
+				previewError = 'NO_CODE_YET';
+			} else {
+				previewError = sanitizePreviewBuildError(lastBuildErrorMsg || 'Failed to compile widget code from repository.');
+			}
+			notifyPreviewCompileErrorChanged();
+			dispatch('buildFromRepoFailed', { widgetId: capturedWidgetId });
+			console.warn('[WidgetDetails] triggerBuildFromRepo: all build attempts failed for widget', capturedWidgetId);
+		}
+		} finally {
+			if (forceRebuild) isRebuildingPreview = false;
+		}
+	}
+
+	export function enqueueAction(action: QueuedAction): void {
+		enqueueQueuedAction(action);
+	}
+
+	export function getShowWidgetDetails(): boolean {
+		return showWidgetDetails;
+	}
+
+	export function getInlinePanelView(): 'preview' | 'console' | null {
+		return inlinePanelView;
+	}
+
+	export function setInlinePanelView(view: 'preview' | 'console' | null): void {
+		inlinePanelView = view;
+	}
+
+	export function hasValidPreview(): boolean {
+		return !!iframeSrc && !previewError && !previewLoading;
+	}
+
+	export function getPreviewIframe(): HTMLIFrameElement | null {
+		return previewIframe;
+	}
+
+	export function getCurrentRepositoryId(): string | null {
+		return currentRepositoryId;
+	}
+
+	export function setCurrentRepositoryId(repoId: string | null): void {
+		currentRepositoryId = repoId;
+	}
+
+	export function setDirectPreviewUrl(url: string | null): void {
+		directPreviewUrl = url;
+	}
+
+	export function setIframeSrc(src: string | null): void {
+		iframeSrc = src;
+	}
+
+	export function setPreviewHasRuntimeError(val: boolean): void {
+		previewHasRuntimeError = val;
+	}
+
+	export function setPreviewRuntimeErrorStatus(val: number | null): void {
+		previewRuntimeErrorStatus = val;
+	}
+
+	export function setHasAutoOpenedPreview(val: boolean): void {
+		hasAutoOpenedPreview = val;
+	}
+
+	export function setPreviewLoadingState(val: boolean): void {
+		previewLoading = val;
+	}
+
+	/** Surface Worker compile failures after codegen (code may still be committed). Pass null to clear. */
+	export function getPreviewError(): string | null {
+		if (previewError) return previewError;
+		if (previewHasRuntimeError) {
+			return previewRuntimeErrorStatus
+				? `Widget preview error (HTTP ${previewRuntimeErrorStatus})`
+				: 'Widget preview compilation/runtime error';
+		}
+		return null;
+	}
+
+	function notifyPreviewCompileErrorChanged(): void {
+		if (!selectedWidgetId) return;
+		dispatch('previewCompileErrorChanged', {
+			widgetId: selectedWidgetId,
+			error: getPreviewError(),
+		});
+	}
+
+	export function setPreviewBuildError(message: string | null): void {
+		if (!message) {
+			previewError = null;
+			notifyPreviewCompileErrorChanged();
+			return;
+		}
+		previewLoading = false;
+		const sanitized = sanitizePreviewBuildError(message);
+		previewError = sanitized.length > 280 ? `${sanitized.slice(0, 280)}…` : sanitized;
+		inlinePanelView = 'preview';
+		console.warn('[WidgetDetails] Preview build failed after codegen:', sanitized);
+		notifyPreviewCompileErrorChanged();
+	}
+
+	export function showNoCodeYetState(): void {
+		previewLoading = false;
+		previewError = 'NO_CODE_YET';
+	}
+
+	export function startPreviewLoadingPublic(): void {
+		startPreviewLoading();
+	}
+
+	function resetPreviewMessageBridge(): void {
+		previewWidgetReady = false;
+		pendingPreviewMessages = [];
+		if (previewReadyFallbackTimeout) {
+			clearTimeout(previewReadyFallbackTimeout);
+			previewReadyFallbackTimeout = null;
+		}
+	}
+
+	function flushPendingPreviewMessages(): void {
+		const target = previewIframe?.contentWindow;
+		if (!target || pendingPreviewMessages.length === 0) return;
+		for (const message of pendingPreviewMessages) {
+			target.postMessage(message, '*');
+		}
+		pendingPreviewMessages = [];
+	}
+
+	function scheduleFitPreviewToArea(): void {
+		requestAnimationFrame(() => {
+			fitPreviewToArea();
+			widgetPreviewComponentRef?.nudgeIframePaint?.();
+			setTimeout(fitPreviewToArea, 100);
+			setTimeout(fitPreviewToArea, 350);
+			setTimeout(fitPreviewToArea, 800);
+			setTimeout(() => widgetPreviewComponentRef?.nudgeIframePaint?.(), 350);
+		});
+	}
+
+	function markPreviewWidgetReady(): void {
+		if (previewWidgetReady) return;
+		previewWidgetReady = true;
+		if (previewReadyFallbackTimeout) {
+			clearTimeout(previewReadyFallbackTimeout);
+			previewReadyFallbackTimeout = null;
+		}
+		// 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)) {
+				previewError = null;
+			}
+			notifyPreviewCompileErrorChanged();
+		}
+		flushPendingPreviewMessages();
+		if (currentStep === 'edit' || currentStep === 'embed') {
+			dispatch('previewLoaded', { step: currentStep });
+		}
+		// Emit previewReady so the parent app can clear the "…loading preview…" status.
+		dispatch('previewReady', { widgetId: selectedWidgetId, step: currentStep });
+		// Fill available preview area once the widget confirms it is ready.
+		scheduleFitPreviewToArea();
+	}
+
+	/** Send a postMessage to the widget preview iframe (for live property editing) */
+	export function sendMessageToPreview(message: Record<string, unknown>): void {
+		if (previewWidgetReady && previewIframe?.contentWindow) {
+			previewIframe.contentWindow.postMessage(message, '*');
+			return;
+		}
+		pendingPreviewMessages.push(message);
+	}
+
+	/** Set preview container dimensions from the compositions top bar W×H inputs */
+	export function setPreviewDimensions(width: number, height: number): void {
+		const w = Math.max(PREVIEW_MIN_WIDTH, width);
+		const h = Math.max(PREVIEW_MIN_HEIGHT, height);
+		previewResizeWidth = w;
+		previewResizeHeight = h;
+		clampPreviewToArea();
+	}
+
+	/** Get current preview dimensions */
+	export function getPreviewDimensions(): { width: number; height: number } {
+		return {
+			width: previewResizeWidth ?? PREVIEW_DEFAULT_WIDTH,
+			height: previewResizeHeight ?? PREVIEW_DEFAULT_HEIGHT,
+		};
+	}
+
+	export function setupPreviewFallbackTimeoutPublic(): void {
+		setupPreviewFallbackTimeout();
+	}
+
+	export function startTokenAutoRefreshPublic(): void {
+		startPreviewTokenAutoRefresh();
+	}
+
+	export function fetchDirectPreviewUrlPublic(): Promise<string | null> {
+		return fetchDirectPreviewUrl();
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// HELPER FUNCTIONS
+	// ═══════════════════════════════════════════════════════════════════════
+
+	function normalizeRepositoryId(source: WidgetSummary | null): string | null {
+		if (!source) return null;
+		return source.repositoryId || source.repo_id || source.repoId || null;
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// PREVIEW TOKEN AUTO-REFRESH
+	// ═══════════════════════════════════════════════════════════════════════
+
+	function startPreviewTokenAutoRefresh() {
+		stopPreviewTokenAutoRefresh();
+		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;
+			const tokenAge = Date.now() - lastPreviewUrlFetchTime;
+			if (tokenAge >= PREVIEW_TOKEN_REFRESH_MS) {
+				console.warn(`[TokenAutoRefresh] Token EXPIRED — refreshing automatically...`);
+				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: any) {
+					if (err?.response?.status === 429) {
+						console.warn('[TokenAutoRefresh] Rate limited (429) — skipping');
+					} else {
+						console.error('[TokenAutoRefresh] Error refreshing token:', err);
+					}
+				}
+			}
+		}, TOKEN_CHECK_INTERVAL_MS);
+	}
+
+	function stopPreviewTokenAutoRefresh() {
+		if (previewTokenRefreshInterval) {
+			clearInterval(previewTokenRefreshInterval);
+			previewTokenRefreshInterval = null;
+		}
+	}
+
+	function isPreviewUrlValid(): boolean {
+		if (!directPreviewUrl || !lastPreviewUrlFetchTime) return false;
+		const age = Date.now() - lastPreviewUrlFetchTime;
+		return age < PREVIEW_TOKEN_REFRESH_MS;
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// WORKER HEALTH PROBE
+	// ═══════════════════════════════════════════════════════════════════════
+
+	async function probeWorkerReachable(url: string): Promise<'ok' | 'not-found' | 'unreachable'> {
+		try {
+			const controller = new AbortController();
+			const timeout = setTimeout(() => controller.abort(), 15000);
+			const resp = await fetch(url, { method: 'HEAD', signal: controller.signal });
+			clearTimeout(timeout);
+			if (resp.ok) return 'ok';
+			if (resp.status === 404) return 'not-found';
+			// 5xx often means stale/broken Worker cache — rebuild from GitLab instead of showing unreachable.
+			if (resp.status >= 500) {
+				console.warn('[WidgetDetails] Worker preview probe server error — will rebuild from repo:', resp.status, url);
+				return 'not-found';
+			}
+			console.warn('[WidgetDetails] Worker preview probe non-OK status:', resp.status, url);
+			return 'unreachable';
+		} catch {
+			return 'unreachable';
+		}
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// FETCH DIRECT PREVIEW URL
+	// ═══════════════════════════════════════════════════════════════════════
+
+	async function fetchDirectPreviewUrl(): Promise<string | null> {
+		isLoadingDirectPreviewUrl = false;
+		const stepUrl = resolvePreviewUrlForStep(currentStep);
+		if (stepUrl) {
+			directPreviewUrl = stepUrl;
+			return stepUrl;
+		}
+		return null;
+	}
+
+	function getFallbackPreviewUrl(): string | null {
+		if (forceMockReady) return 'about:blank';
+		const stepUrl = resolvePreviewUrlForStep(currentStep);
+		if (stepUrl) {
+			try {
+				const url = new URL(stepUrl);
+				url.searchParams.set('_t', previewCacheBuster.toString());
+				return url.toString();
+			} catch {
+				return stepUrl;
+			}
+		}
+		if (directPreviewUrl && isPreviewUrlValid()) {
+			const url = new URL(directPreviewUrl);
+			url.searchParams.set('_t', previewCacheBuster.toString());
+			return url.toString();
+		}
+		return null;
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// PREVIEW IFRAME HELPERS
+	// ═══════════════════════════════════════════════════════════════════════
+
+	/** @param opts.withRetry — enable auto-retry on not-found (use after restore/generate) */
+	async function refreshPreviewIframe(opts: { withRetry?: boolean; _retryCount?: number } = {}) {
+		const retryCount = opts._retryCount || 0;
+		const withRetry = opts.withRetry || false;
+
+		console.log('WidgetDetails: Triggering preview refresh via src manipulation', retryCount > 0 ? `(retry ${retryCount})` : '');
+		const newCacheBuster = Date.now();
+		previewCacheBuster = newCacheBuster;
+
+		// Converted widgets may use skipBasePreview — worker URL is never set until we build it here.
+		if (!dynamicWorkerPreviewUrl && selectedWidgetId) {
+			const workerPreviewUrl = buildWorkerPreviewUrl(selectedWidgetId);
+			const workerPreviewDisplayUrl = buildWorkerPreviewUrl(selectedWidgetId, { forDisplay: true });
+			dynamicWorkerPreviewUrl = workerPreviewUrl;
+			directPreviewUrl = workerPreviewDisplayUrl;
+			console.log('[WidgetDetails] refreshPreview: initialized worker preview URL');
+		}
+
+		// After publish (or any time the CDN artifact may have changed), edit/embed steps must
+		// probe the published URL before falling back to the Worker preview. Otherwise the iframe
+		// keeps the pre-publish Worker artifact and the user never sees the new published version.
+		if (
+			(currentStep === 'edit' || currentStep === 'embed')
+			&& (editPreviewUrl || embedPreviewUrl)
+			&& publishedArtifactReachable !== true
+		) {
+			const targetUrl = currentStep === 'edit' ? editPreviewUrl : embedPreviewUrl;
+			if (targetUrl) {
+				previewLoading = true;
+				const reachable = await probePublishedArtifactUrl(targetUrl);
+				publishedArtifactReachable = reachable;
+				if (reachable) {
+					_lastEditPreviewBase = null;
+					_lastEmbedPreviewBase = null;
+					previewError = null;
+					await reloadPreviewIframeCacheBust(targetUrl);
+					return;
+				}
+				// 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)`);
+					setTimeout(() => refreshPreviewIframe({ withRetry: true, _retryCount: retryCount + 1 }), delay);
+					return;
+				}
+				// Fall through to worker preview logic below
+			}
+		}
+
+		const stepUrl = resolvePreviewUrlForStep(currentStep);
+		if (stepUrl) {
+			previewError = null;
+			previewLoading = true;
+			await reloadPreviewIframeCacheBust(stepUrl);
+			return;
+		}
+
+		if (dynamicWorkerPreviewUrl) {
+			previewError = null;
+
+			const probeResult = await probeWorkerReachable(dynamicWorkerPreviewUrl);
+			if (probeResult === 'unreachable') {
+				previewLoading = false;
+				previewError = 'Widget Builder is not reachable. Make sure the Worker is running.';
+				iframeSrc = null;
+				return;
+			}
+			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)`);
+					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');
+					await triggerBuildFromRepo();
+					if (iframeSrc) return;
+				}
+				previewLoading = false;
+				iframeSrc = null;
+				if (lastCommitId) {
+					previewError = previewError || 'Preview not ready yet. Click Rebuild or wait a moment.';
+				}
+				return;
+			}
+
+			try {
+				await reloadPreviewIframeCacheBust(dynamicWorkerPreviewUrl);
+			} catch {
+				previewLoading = false;
+			}
+			return;
+		}
+
+		previewLoading = false;
+		if (lastCommitId && !iframeSrc && !shouldDeferPreviewNetworkWork()) {
+			previewError = previewError || 'Preview not ready yet. Click Rebuild to compile from GitLab.';
+			await triggerBuildFromRepo();
+		} else if (lastCommitId && !iframeSrc && shouldDeferPreviewNetworkWork()) {
+			previewBuildDeferred = true;
+		}
+	}
+
+	$: if (wasFocusedPanel && !isFocusedPanel) {
+		buildFromRepoRunId++;
+	}
+	$: if (!wasFocusedPanel && isFocusedPanel && previewBuildDeferred && selectedWidgetId && showWidgetDetails) {
+		void resumeDeferredPreviewLoad();
+	}
+	$: wasFocusedPanel = isFocusedPanel;
+
+	function resetPreviewResizeSize() {
+		previewResizeWidth = PREVIEW_DEFAULT_WIDTH;
+		previewResizeHeight = PREVIEW_DEFAULT_HEIGHT;
+		requestAnimationFrame(fitPreviewToArea);
+	}
+
+	function startConcentricResize(event: PointerEvent, signX: number, signY: number) {
+		event.preventDefault();
+		event.stopPropagation();
+		isResizingPreview = true;
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const target = event.currentTarget as HTMLElement;
+		target.setPointerCapture(event.pointerId);
+		const containerEl = target.closest('.widget-preview-modal-content-container') as HTMLElement | null;
+		const maxWidth = containerEl?.clientWidth ?? 720;
+		const maxHeight = containerEl?.clientHeight ?? 420;
+		const startWidth = previewResizeWidth ?? maxWidth;
+		const startHeight = previewResizeHeight ?? maxHeight;
+
+		function onPointerMove(e: PointerEvent) {
+			const deltaX = (e.clientX - startX) * signX * 2;
+			const deltaY = (e.clientY - startY) * signY * 2;
+			previewResizeWidth = Math.max(PREVIEW_MIN_WIDTH, Math.min(maxWidth, startWidth + deltaX));
+			previewResizeHeight = Math.max(PREVIEW_MIN_HEIGHT, Math.min(maxHeight, startHeight + deltaY));
+		}
+		function onPointerUp() {
+			isResizingPreview = false;
+			target.removeEventListener('pointermove', onPointerMove);
+			target.removeEventListener('pointerup', onPointerUp);
+		}
+		target.addEventListener('pointermove', onPointerMove);
+		target.addEventListener('pointerup', onPointerUp);
+	}
+
+	let lastPreviewIframeLoadAt = 0;
+	let lastPreviewIframeLoadSrc: string | null = null;
+
+	function handlePreviewIframeLoad(): void {
+		if (iframeSrc === 'about:blank' || previewIframe?.src?.includes('about:blank')) {
+			return;
+		}
+		const loadedSrc = previewIframe?.src ?? iframeSrc;
+		const now = Date.now();
+		if (
+			loadedSrc
+			&& previewFullUrlsMatch(loadedSrc, lastPreviewIframeLoadSrc)
+			&& now - lastPreviewIframeLoadAt < 200
+		) {
+			return;
+		}
+		lastPreviewIframeLoadSrc = loadedSrc;
+		lastPreviewIframeLoadAt = now;
+		if (previewTimeoutHandle) { clearTimeout(previewTimeoutHandle); previewTimeoutHandle = null; }
+		clearPreviewHealthCheck();
+
+		previewLoading = false;
+		if (dwLoadTimeoutHandle) clearTimeout(dwLoadTimeoutHandle);
+
+		if (currentStep === 'edit' || currentStep === 'embed') {
+			// Only show hydration overlay when a step transition requested it — not on soft cache-bust refresh
+			if (previewHydrating || previewLoading) {
+				previewHydrating = true;
+				previewWidgetReady = false;
+				if (previewReadyFallbackTimeout) clearTimeout(previewReadyFallbackTimeout);
+				previewReadyFallbackTimeout = setTimeout(() => {
+					if (debugMode) {
+						console.warn('[WidgetDetails] widgetic:ready fallback — applying composition anyway');
+					}
+					markPreviewWidgetReady();
+				}, 2000);
+			}
+		} else {
+			previewHydrating = false;
+			previewWidgetReady = true;
+			dispatch('previewReady', { widgetId: selectedWidgetId, step: currentStep });
+			// Create step: iframe load does not go through markPreviewWidgetReady — still fit-to-area.
+			scheduleFitPreviewToArea();
+		}
+	}
+
+	function handlePreviewIframeError(): void {
+		if (dwLoadTimeoutHandle) { clearTimeout(dwLoadTimeoutHandle); dwLoadTimeoutHandle = null; }
+		previewLoading = false;
+		previewError = 'Widget Builder is not reachable. Make sure the Worker is running.';
+		iframeSrc = null;
+	}
+
+	function setupPreviewFallbackTimeout(): void {
+		if (previewFallbackHandle) { clearTimeout(previewFallbackHandle); previewFallbackHandle = null; }
+		if (previewHealthCheckHandle) { clearInterval(previewHealthCheckHandle); previewHealthCheckHandle = null; }
+		previewFallbackHandle = setTimeout(() => {
+			if ((previewLoading || previewHydrating) && (directPreviewUrl || iframeSrc)) {
+				console.warn('[WidgetDetails] Preview fallback timeout — revealing iframe');
+				previewLoading = false;
+				previewError = null;
+				if (previewHydrating) {
+					previewHydrating = false;
+					markPreviewWidgetReady();
+				}
+				if (previewTimeoutHandle) { clearTimeout(previewTimeoutHandle); previewTimeoutHandle = null; }
+				clearPreviewHealthCheck();
+			}
+		}, 3000);
+		previewHealthCheckHandle = setInterval(() => {
+			if (!previewLoading && !previewHydrating) { clearPreviewHealthCheck(); return; }
+			try {
+				const iframe = previewIframe ?? document.querySelector('iframe[title="Widget preview"]') as HTMLIFrameElement;
+				if (!iframe || !iframeSrc) return;
+				if (!previewFullUrlsMatch(iframeSrc, iframe.src)) return;
+				if (iframe.contentWindow) {
+					try {
+						const _loc = iframe.contentWindow.location.href;
+						if (_loc && _loc !== 'about:blank' && previewFullUrlsMatch(iframeSrc, _loc)) {
+							handlePreviewIframeLoad();
+						}
+					} catch (_crossOriginErr) {
+						// Cross-origin = document loaded at target URL
+						handlePreviewIframeLoad();
+					}
+				}
+			} catch (err) { /* non-critical */ }
+		}, 2000);
+	}
+
+	function clearPreviewHealthCheck(): void {
+		if (previewFallbackHandle) { clearTimeout(previewFallbackHandle); previewFallbackHandle = null; }
+		if (previewHealthCheckHandle) { clearInterval(previewHealthCheckHandle); previewHealthCheckHandle = null; }
+	}
+
+	function startPreviewLoading(): void {
+		previewLoading = true;
+		previewHydrating = false;
+		previewError = null;
+		previewSilentRetryCount = 0;
+		resetPreviewResizeSize();
+		if (hydrationSafetyTimeout) { clearTimeout(hydrationSafetyTimeout); hydrationSafetyTimeout = null; }
+		if (previewTimeoutHandle) clearTimeout(previewTimeoutHandle);
+		previewTimeoutHandle = setTimeout(() => {
+			if (!previewLoading) return;
+			previewLoading = false;
+			previewError = 'Preview timed out. The dev server may still be initializing.\nPlease wait a moment and click Retry.';
+		}, PREVIEW_FIRST_LOAD_TIMEOUT_MS);
+	}
+
+	/** Recompile widget from GitLab repo via Worker (Create step) or reload published preview (Edit/Embed). */
+	async function retryPreview(): Promise<void> {
+		previewRetryCount++;
+		directPreviewUrl = null;
+		iframeSrc = null;
+		previewError = null;
+		previewHasRuntimeError = false;
+		previewRuntimeErrorStatus = null;
+		startPreviewLoading();
+
+		if (currentStep !== 'create') {
+			if (publishedArtifactReachable === false) {
+				await triggerBuildFromRepo({ force: true });
+				if (iframeSrc) return;
+			}
+			await refreshPreviewIframe();
+			if (iframeSrc) return;
+			previewLoading = false;
+			return;
+		}
+
+		// Create step: full rebuild from repo (sanitized) — not just iframe cache-bust
+		await triggerBuildFromRepo({ force: true });
+		if (iframeSrc) return;
+
+		// Fallback: try fetching direct preview URL
+		const freshUrl = await fetchDirectPreviewUrl();
+		if (freshUrl) {
+			try {
+				const url = new URL(freshUrl, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+				url.searchParams.set('_t', Date.now().toString());
+				iframeSrc = url.toString();
+				setupPreviewFallbackTimeout();
+				syncPreviewLoadingWithIframe();
+			} catch (urlErr) {
+				console.warn('[WidgetDetails] retryPreview: invalid preview URL', freshUrl, urlErr);
+				previewLoading = false;
+				previewError = 'Could not open preview URL. Try Rebuild again.';
+			}
+		} else if (!previewError) {
+			previewLoading = false;
+			previewError = 'Could not fetch the preview URL. The Worker may be unavailable.';
+		}
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// QUEUED ACTIONS
+	// ═══════════════════════════════════════════════════════════════════════
+
+	function enqueueQueuedAction(action: QueuedAction): void {
+		queuedActions = [...queuedActions, action];
+		const description = action.type === 'generate'
+			? 'Code generation will start shortly.'
+			: 'Save will execute shortly.';
+		showToast('info', action.type === 'generate' ? 'Code generation queued' : 'Save queued', { description, duration: 5000 });
+	}
+
+	async function processQueuedActions(): Promise<void> {
+		if (isProcessingQueuedActions || queuedActions.length === 0) return;
+		isProcessingQueuedActions = true;
+		try {
+			while (queuedActions.length > 0) {
+				const currentAction = queuedActions[0];
+				try {
+					if (currentAction?.type === 'generate') {
+						dispatch('generateCode', { prompt: currentAction.prompt, queued: true });
+					} else if (currentAction?.type === 'save') {
+						dispatch('saveWidget', { queued: true });
+					}
+				} catch (queueError) {
+					console.error('Queued action failed', queueError);
+				} finally {
+					queuedActions = queuedActions.slice(1);
+				}
+			}
+		} finally {
+			isProcessingQueuedActions = false;
+		}
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// INLINE PANEL VIEW
+	// ═══════════════════════════════════════════════════════════════════════
+
+	function toggleInlinePanelView(view: 'preview' | 'console'): void {
+		if (inlinePanelView === view) return;
+		inlinePanelView = view;
+		if (view === 'preview' && !iframeSrc && directPreviewUrl) {
+			try {
+				const url = new URL(directPreviewUrl);
+				url.searchParams.set('_t', Date.now().toString());
+				iframeSrc = url.toString();
+			} catch (e) {
+				console.error('toggleInlinePanelView: Failed to build iframe URL from directPreviewUrl', e);
+			}
+		}
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// PANEL POSITIONING & DRAG/RESIZE
+	// ═══════════════════════════════════════════════════════════════════════
+
+	function getDefaultDetailsPanelHeight(): number {
+		if (typeof window === 'undefined') return 600;
+		return window.innerHeight - detailsPanelTopOffset - detailsPanelBottomMargin;
+	}
+
+	function clampPanelWidth(w: number): number {
+		if (typeof window === 'undefined') return w;
+		const maxWidth = window.innerWidth - 40;
+		return Math.max(DETAILS_PANEL_MIN_WIDTH, Math.min(w, maxWidth));
+	}
+
+	function resetDetailsPanelSize() {
+		if (typeof window === 'undefined') {
+			detailsPanelWidth = DETAILS_PANEL_DEFAULT_WIDTH;
+			detailsPanelHeight = 0;
+			return;
+		}
+		if (fillViewport) {
+			detailsPanelWidth = Math.max(
+				DETAILS_PANEL_MIN_WIDTH,
+				window.innerWidth - DETAILS_PANEL_FILL_INSET * 2
+			);
+			detailsPanelHeight = Math.max(
+				DETAILS_PANEL_MIN_HEIGHT,
+				window.innerHeight - detailsPanelTopOffset - detailsPanelBottomMargin
+			);
+			return;
+		}
+		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
+		detailsPanelHeight = 0;
+	}
+
+	export function centerDetailsPanel() {
+		if (typeof window === 'undefined') return;
+		resetDetailsPanelSize();
+		if (fillViewport) {
+			detailsPanelX = DETAILS_PANEL_FILL_INSET;
+			detailsPanelY = detailsPanelTopOffset;
+			return;
+		}
+		const cascade = panelCascadeIndex * 32;
+		detailsPanelX = Math.max(0, Math.round((window.innerWidth - detailsPanelWidth) / 2) + cascade);
+		detailsPanelY = detailsPanelTopOffset + cascade;
+	}
+
+	function startColumnResize(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		isResizingColumns = true;
+		columnResizeStartX = e.clientX;
+		columnResizeStartPercent = leftColPercent;
+		document.body.style.cursor = 'col-resize';
+		document.body.style.userSelect = 'none';
+		window.addEventListener('mousemove', onColumnResizeMove);
+		addGlobalStopListeners(stopColumnResize);
+	}
+
+	function onColumnResizeMove(e: MouseEvent) {
+		if (!isResizingColumns) return;
+		const twoCol = document.querySelector('.widget-details-two-col') as HTMLElement | null;
+		const width = twoCol?.clientWidth || detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
+		if (width <= 0) return;
+		const deltaPercent = ((e.clientX - columnResizeStartX) / width) * 100;
+		leftColPercent = Math.min(
+			LEFT_COL_MAX_PERCENT,
+			Math.max(LEFT_COL_MIN_PERCENT, columnResizeStartPercent + deltaPercent)
+		);
+		// Keep preview iframe inside the shrinking right column (avoid clipped "cut off" widgets).
+		requestAnimationFrame(() => {
+			clampPreviewToArea();
+			fitPreviewToArea();
+		});
+	}
+
+	function stopColumnResize() {
+		if (!isResizingColumns) return;
+		isResizingColumns = false;
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+		window.removeEventListener('mousemove', onColumnResizeMove);
+		window.removeEventListener('mouseup', stopColumnResize);
+		window.removeEventListener('pointerup', stopColumnResize);
+		window.removeEventListener('pointercancel', stopColumnResize);
+		document.documentElement.removeEventListener('mouseleave', stopColumnResize);
+		window.removeEventListener('blur', stopColumnResize);
+		tick().then(() => requestAnimationFrame(() => fitPreviewToArea()));
+	}
+
+	let _hasBeenOpenedOnce = false;
+	export function openWidgetDetails() {
+		if (showWidgetDetails) return;
+		resetDetailsPanelSize();
+		if (fillViewport || !_hasBeenOpenedOnce || detailsPanelX < 0 || detailsPanelY < 0) {
+			centerDetailsPanel();
+			_hasBeenOpenedOnce = true;
+		}
+		showWidgetDetails = true;
+		dispatch('widgetDetailsToggle', { open: true });
+
+		// Clamp preview after DOM is laid out
+		tick().then(() => {
+			requestAnimationFrame(() => {
+				fitPreviewToArea();
+				setTimeout(fitPreviewToArea, 200);
+			});
+		});
+
+		if (selectedWidgetId) {
+			if (iframeSrc && previewLoadedForWidgetId === selectedWidgetId) {
+				console.log('[WidgetDetails] Reopened with existing preview, no reload needed');
+				dispatch('buildFromRepoSuccess', { widgetId: selectedWidgetId, source: 'cached-preview' });
+				return;
+			}
+			loadWidget(selectedWidgetId);
+		}
+	}
+
+	export function closeWidgetDetails(options?: { silent?: boolean }) {
+		showWidgetDetails = false;
+		showPreviewModal = false;
+		if (!options?.silent) {
+			dispatch('widgetDetailsToggle', { open: false, showWidgetDetails: false });
+		}
+		// Keep iframeSrc, directPreviewUrl, previewLoading, previewError intact
+		// so reopening the same widget shows the preview instantly without re-probing
+	}
+
+	function handleCloseButtonClick(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		console.log('[WidgetDetails] Close button clicked');
+		closeWidgetDetails();
+	}
+
+	function addGlobalStopListeners(stopFn: () => void) {
+		window.addEventListener('mouseup', stopFn);
+		window.addEventListener('pointerup', stopFn);
+		window.addEventListener('pointercancel', stopFn);
+		document.documentElement.addEventListener('mouseleave', stopFn);
+		window.addEventListener('blur', stopFn);
+	}
+
+	function removeGlobalStopListeners(stopFn: () => void) {
+		window.removeEventListener('mouseup', stopFn);
+		window.removeEventListener('pointerup', stopFn);
+		window.removeEventListener('pointercancel', stopFn);
+		document.documentElement.removeEventListener('mouseleave', stopFn);
+		window.removeEventListener('blur', stopFn);
+	}
+
+	function startDetailsResize(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		isResizingDetails = true;
+		detailsResizeStartX = e.clientX;
+		detailsResizeStartY = e.clientY;
+		detailsResizeStartWidth = detailsPanelWidth;
+		detailsResizeStartHeight = detailsPanelHeight || getDefaultDetailsPanelHeight();
+		document.body.style.cursor = 'nwse-resize';
+		document.body.style.userSelect = 'none';
+		window.addEventListener('mousemove', onDetailsResize);
+		addGlobalStopListeners(stopDetailsResize);
+	}
+
+	function onDetailsResize(e: MouseEvent) {
+		if (!isResizingDetails) return;
+		const deltaX = e.clientX - detailsResizeStartX;
+		const deltaY = e.clientY - detailsResizeStartY;
+		const maxWidth = window.innerWidth - detailsPanelX - 20;
+		const maxHeight = window.innerHeight - detailsPanelY - 20;
+		detailsPanelWidth = Math.min(maxWidth, Math.max(DETAILS_PANEL_MIN_WIDTH, detailsResizeStartWidth + deltaX));
+		detailsPanelHeight = Math.min(maxHeight, Math.max(DETAILS_PANEL_MIN_HEIGHT, detailsResizeStartHeight + deltaY));
+	}
+
+	function stopDetailsResize() {
+		if (!isResizingDetails) return;
+		isResizingDetails = false;
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+		window.removeEventListener('mousemove', onDetailsResize);
+		removeGlobalStopListeners(stopDetailsResize);
+	}
+
+	function handlePanelFocusRequest() {
+		// Always notify parent — raises z-index even when this panel is already the focused widget.
+		dispatch('focusPanel');
+	}
+
+	function clampDetailsPanelPosition(x: number, y: number): { x: number; y: number } {
+		if (typeof window === 'undefined') return { x, y };
+		const pad = 8;
+		const panelH = detailsPanelHeight || getDefaultDetailsPanelHeight();
+		const panelW = detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
+		const minTop = detailsPanelTopOffset;
+		const maxTop = Math.max(minTop, window.innerHeight - Math.min(panelH, window.innerHeight - pad) - pad);
+		const maxLeft = Math.max(pad, window.innerWidth - Math.min(panelW, window.innerWidth - pad) - pad);
+		return {
+			x: Math.min(maxLeft, Math.max(pad, x)),
+			y: Math.min(maxTop, Math.max(minTop, y)),
+		};
+	}
+
+	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;
+		document.body.style.cursor = 'grabbing';
+		document.body.style.userSelect = 'none';
+		try {
+			(e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId);
+		} catch {
+			/* ignore capture failures */
+		}
+		window.addEventListener('pointermove', onDetailsDrag);
+		window.addEventListener('pointerup', stopDetailsDrag);
+		window.addEventListener('pointercancel', stopDetailsDrag);
+		window.addEventListener('mousemove', onDetailsMouseDrag);
+		addGlobalStopListeners(stopDetailsDrag);
+	}
+
+	function onDetailsDrag(e: PointerEvent) {
+		if (!isDraggingDetails) return;
+		const next = clampDetailsPanelPosition(
+			detailsInitialX + (e.clientX - detailsDragStartX),
+			detailsInitialY + (e.clientY - detailsDragStartY),
+		);
+		detailsPanelX = next.x;
+		detailsPanelY = next.y;
+	}
+
+	function onDetailsMouseDrag(e: MouseEvent) {
+		if (!isDraggingDetails) return;
+		onDetailsDrag(e as unknown as PointerEvent);
+	}
+
+	function stopDetailsDrag() {
+		if (!isDraggingDetails) return;
+		isDraggingDetails = false;
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+		window.removeEventListener('pointermove', onDetailsDrag);
+		window.removeEventListener('pointerup', stopDetailsDrag);
+		window.removeEventListener('pointercancel', stopDetailsDrag);
+		window.removeEventListener('mousemove', onDetailsMouseDrag);
+		removeGlobalStopListeners(stopDetailsDrag);
+	}
+
+	// Svelte action: auto-focus element when mounted (for ESC key to work in modal)
+	function focusOnMount(node: HTMLElement) {
+		requestAnimationFrame(() => node.focus());
+	}
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// REACTIVE BLOCKS
+	// ═══════════════════════════════════════════════════════════════════════
+
+	/** Expand preview to fill the available panel (fit-to-area). */
+	function fitPreviewToArea() {
+		widgetPreviewComponentRef?.fitToContainer?.();
+	}
+
+	// Clamp preview to available stage inside WidgetPreview (handles + dimension badge padding)
+	function clampPreviewToArea() {
+		const limits = widgetPreviewComponentRef?.getResizeLimits?.();
+		if (limits) {
+			if (previewResizeWidth && previewResizeWidth > limits.maxWidth) {
+				previewResizeWidth = limits.maxWidth;
+			}
+			if (previewResizeHeight && previewResizeHeight > limits.maxHeight) {
+				previewResizeHeight = limits.maxHeight;
+			}
+			return;
+		}
+		if (!previewAreaEl) return;
+		const chromePadX = 16;
+		const chromePadY = 30;
+		let areaW = previewAreaEl.clientWidth;
+		let areaH = previewAreaEl.clientHeight;
+		if (areaW === 0 && detailsPanelWidth > 0) {
+			areaW = Math.round(detailsPanelWidth * 0.5 - 24);
+		}
+		if (areaH === 0 && detailsPanelHeight > 0) {
+			areaH = Math.round(detailsPanelHeight - 120);
+		} else if (areaH === 0) {
+			areaH = Math.round((typeof window !== 'undefined' ? window.innerHeight : 600) - detailsPanelTopOffset - detailsPanelBottomMargin - 120);
+		}
+		const maxW = Math.max(PREVIEW_MIN_WIDTH, areaW - chromePadX);
+		const maxH = Math.max(PREVIEW_MIN_HEIGHT, areaH - chromePadY);
+		if (previewResizeWidth && previewResizeWidth > maxW) previewResizeWidth = maxW;
+		if (previewResizeHeight && previewResizeHeight > maxH) previewResizeHeight = maxH;
+	}
+
+	async function openDesktopPreview() {
+		showPreviewModal = true;
+		await tick();
+		requestAnimationFrame(() => {
+			widgetPreviewComponentRef?.fitToContainer?.();
+		});
+	}
+
+	// Clamp when preview size changes
+	$: if (previewAreaEl && (previewResizeWidth || previewResizeHeight)) {
+		clampPreviewToArea();
+	}
+
+	// Clamp when panel dimensions change
+	$: void detailsPanelWidth, detailsPanelHeight, (() => {
+		requestAnimationFrame(clampPreviewToArea);
+	})();
+
+	// ResizeObserver: clamp on initial render and whenever the container resizes
+	let previewAreaObserver: ResizeObserver | null = null;
+	$: if (previewAreaEl) {
+		previewAreaObserver?.disconnect();
+		previewAreaObserver = new ResizeObserver(() => {
+			requestAnimationFrame(fitPreviewToArea);
+		});
+		previewAreaObserver.observe(previewAreaEl);
+		// Fit after layout settles (panel open, widget load)
+		setTimeout(fitPreviewToArea, 100);
+		setTimeout(fitPreviewToArea, 400);
+	}
+
+	let prevShowWidgetDetails = false;
+	$: if (showWidgetDetails && !prevShowWidgetDetails) {
+		prevShowWidgetDetails = true;
+		void tick().then(() => {
+			requestAnimationFrame(() => {
+				fitPreviewToArea();
+				widgetPreviewComponentRef?.nudgeIframePaint?.();
+				setTimeout(() => {
+					fitPreviewToArea();
+					widgetPreviewComponentRef?.nudgeIframePaint?.();
+				}, 200);
+			});
+		});
+	} else if (!showWidgetDetails) {
+		prevShowWidgetDetails = false;
+	}
+
+	// Show loader immediately when a new widget is selected (before loadWidget is called)
+	let prevSelectedWidgetId: string | null = null;
+	let isWidgetLoading = false;
+	$: if (selectedWidgetId && selectedWidgetId !== prevSelectedWidgetId) {
+		prevSelectedWidgetId = selectedWidgetId;
+		widgetNotFoundAutoRebuildAttempts = 0;
+		codegenPreviewFreshUntil = 0;
+		if (!iframeSrc) {
+			previewLoading = true;
+			isWidgetLoading = true;
+		}
+	}
+
+	// When debug mode is OFF, force preview (no console tab access)
+	$: if (!debugMode && inlinePanelView !== 'preview') {
+		inlinePanelView = 'preview';
+	}
+
+	// When generation finishes without a preview URL, stop the loading spinner
+	// But not during initial widget loading (loadWidget sets its own previewLoading flow)
+	$: if (!isGeneratingCode && previewLoading && !iframeSrc && !isWidgetLoading) {
+		previewLoading = false;
+	}
+
+	// Stop token auto-refresh when no preview is visible
+	$: if (!showPreviewModal && !(showWidgetDetails && inlinePanelView === 'preview')) {
+		stopPreviewTokenAutoRefresh();
+	}
+
+	// Focus preview modal when opened; fit preview to modal stage
+	$: if (showPreviewModal && previewModalRef) {
+		requestAnimationFrame(() => {
+			previewModalRef?.focus();
+			widgetPreviewComponentRef?.fitToContainer?.();
+		});
+	}
+
+	// Connect WebSocket as soon as widget is selected
+	$: if (selectedWidgetId && !hasConnectedForDevServerCheck) {
+		hasConnectedForDevServerCheck = true;
+		const currentToken = getAuthJwt();
+		if (currentToken) setWsAuthToken(currentToken);
+		const userId = userSession?.user?.id;
+		if (userId) {
+			console.log('[WidgetDetails] Connecting WebSocket for user events');
+			connectWebSocket(userId);
+		}
+	}
+
+	let lastWsPreviewSignature: string | null = null;
+
+	async function applyWorkerPreviewFromEvent(workerUrl: string, buildTimeMs?: number | null): Promise<void> {
+		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,
+		});
+
+		dynamicWorkerPreviewUrl = fetchUrl;
+		directPreviewUrl = toWorkerPreviewDisplayUrl(fetchUrl);
+		inlinePanelView = 'preview';
+		await forceReloadPreviewIframe(fetchUrl);
+		previewHydrating = false;
+		previewError = null;
+		previewHasRuntimeError = false;
+		previewRuntimeErrorStatus = null;
+		dispatch('widgetReady', { widgetId: selectedWidgetId });
+	}
+
+	// Worker preview ready via WebSocket event (after codegen / Worker build)
+	$: if ($dynamicWorkerPreviewStatus.widgetId === selectedWidgetId && $dynamicWorkerPreviewStatus.previewUrl) {
+		void applyWorkerPreviewFromEvent(
+			$dynamicWorkerPreviewStatus.previewUrl,
+			$dynamicWorkerPreviewStatus.buildTimeMs,
+		);
+	}
+
+	// Process queued actions
+	$: if (queuedActions.length > 0) {
+		void processQueuedActions();
+	}
+
+	// Sync key state back to parent so reactive blocks (isGenerateDisabled, etc.) stay correct
+	$: dispatch('stateSync', {
+		widgetId: selectedWidgetId,
+		directPreviewUrl,
+		iframeSrc,
+		previewLoading,
+		showPreviewModal,
+		showWidgetDetails,
+		inlinePanelView,
+		hasAutoOpenedPreview,
+	});
+
+	// ═══════════════════════════════════════════════════════════════════════
+	// LIFECYCLE
+	// ═══════════════════════════════════════════════════════════════════════
+
+	onMount(() => {
+		// 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');
+			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();
+			}
+		};
+		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 runtimeMsg = String(event.data?.message || event.data?.error || '').trim();
+			const runtimeSource = event.data?.source ? String(event.data.source) : '';
+			const runtimeLine = event.data?.line != null ? Number(event.data.line) : null;
+
+			// Do not surface mid-generation / post-codegen races over a loading or good preview
+			if (isGeneratingCode) {
+				console.warn('[WidgetDetails] Ignoring runtime error during code generation:', runtimeMsg);
+				return;
+			}
+			if (isCodegenPreviewFresh()) {
+				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;
+			}
+			// Widget already running — only overlay for hard compile/syntax failures
+			if (previewWidgetReady && !looksLikeHardCompileFailure(runtimeMsg)) {
+				console.warn(
+					'[WidgetDetails] Ignoring non-fatal runtime error after widget ready (preview stays visible):',
+					runtimeMsg,
+				);
+				return;
+			}
+
+			clearPendingRuntimeErrorOverlay();
+			const applyOverlay = () => {
+				pendingRuntimeErrorTimer = null;
+				// Ready arrived while we waited — keep the working preview.
+				if (previewWidgetReady && !looksLikeHardCompileFailure(runtimeMsg)) {
+					console.warn('[WidgetDetails] Cancelled runtime error overlay — widget became ready');
+					return;
+				}
+				previewHasRuntimeError = true;
+				previewRuntimeErrorStatus = 500;
+				previewHydrating = false;
+				previewLoading = false;
+				if (runtimeMsg) {
+					const locationSuffix =
+						runtimeSource && runtimeLine
+							? ` (${runtimeSource}:${runtimeLine})`
+							: runtimeSource
+								? ` (${runtimeSource})`
+								: '';
+					previewError = `${runtimeMsg}${locationSuffix}`;
+				} else if (!previewError) {
+					previewError = 'Widget preview runtime error (HTTP 500)';
+				}
+				notifyPreviewCompileErrorChanged();
+				if (hydrationSafetyTimeout) {
+					clearTimeout(hydrationSafetyTimeout);
+					hydrationSafetyTimeout = null;
+				}
+			};
+
+			// Brief delay: successful widgetic:ready often arrives right after a transient error.
+			pendingRuntimeErrorTimer = setTimeout(applyOverlay, 1600);
+		};
+		window.addEventListener('message', handleIframeRuntimeError);
+
+		// 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); }
+			}
+		};
+		window.addEventListener('message', handleTokenExpired);
+
+		// Worker 404 page notifies parent when widget is not built yet.
+		// If the widget already has a GitLab repo with committed code, kick off a rebuild
+		// automatically — Worker cache is transient, we should not require the user to press
+		// "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;
+			if (isCodegenPreviewFresh()) {
+				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');
+			dynamicWorkerPreviewUrl = null;
+			directPreviewUrl = null;
+			iframeSrc = null;
+			previewError = null;
+			isPreviewContentReady = false;
+
+			const capturedWidgetId = selectedWidgetId;
+			const hasRepo = !!currentRepositoryId;
+			if (hasRepo && capturedWidgetId && widgetNotFoundAutoRebuildAttempts === 0) {
+				widgetNotFoundAutoRebuildAttempts = 1;
+				console.log('[WidgetDetails] Widget missing from Worker — auto-triggering build-from-repo');
+				previewLoading = true;
+				try {
+					await triggerBuildFromRepo({ force: true });
+				} catch (err) {
+					console.warn('[WidgetDetails] Auto rebuild after widget-not-found failed:', err);
+				}
+			} else {
+				previewLoading = false;
+			}
+		};
+		window.addEventListener('message', handleWidgetNotFound);
+		window.addEventListener('message', handleWidgetConsoleMessage);
+
+		return () => {
+			window.removeEventListener('message', handleWidgeticReady);
+			window.removeEventListener('message', handleHydrationSignal);
+			window.removeEventListener('message', handleIframeRuntimeError);
+			window.removeEventListener('message', handleTokenExpired);
+			window.removeEventListener('message', handleWidgetNotFound);
+			window.removeEventListener('message', handleWidgetConsoleMessage);
+			clearPendingRuntimeErrorOverlay();
+			resetPreviewMessageBridge();
+		};
+	});
+
+	afterUpdate(() => {
+		if (contentContainerEl) {
+			hasScrollbar = contentContainerEl.scrollHeight > contentContainerEl.clientHeight;
+		}
+	});
+
+	onDestroy(() => {
+		previewAreaObserver?.disconnect();
+		if (hydrationSafetyTimeout) clearTimeout(hydrationSafetyTimeout);
+		if (dwLoadTimeoutHandle) clearTimeout(dwLoadTimeoutHandle);
+		clearPendingRuntimeErrorOverlay();
+		stopPreviewTokenAutoRefresh();
+		clearPreviewHealthCheck();
+	});
+</script>
+
+<!-- ═══════════════════════════════════════════════════════════════════════ -->
+<!-- TEMPLATE: Widget Details Floating Panel                               -->
+<!-- ═══════════════════════════════════════════════════════════════════════ -->
+
+{#if selectedWidgetId}
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="widget-details-floating-panel pointer-events-auto fixed overflow-hidden
+		{showWidgetDetails ? 'flex flex-col' : 'hidden'}
+		{fillViewport
+			? 'bg-white rounded-none border-x border-b border-t-0 ring-0 shadow-none'
+			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border'}
+		{isFocusedPanel
+			? (fillViewport ? 'border-blue-400' : 'border-blue-400 ring-2 ring-blue-200/80')
+			: 'border-gray-300 opacity-[0.97]'}"
+	style="left: {detailsPanelX}px; top: {detailsPanelY}px; width: {detailsPanelWidth}px; z-index: {panelZIndex};
+			height: {detailsPanelHeight ? detailsPanelHeight + 'px' : `calc(100vh - ${detailsPanelTopOffset + detailsPanelBottomMargin}px)`};"
+	onmousedown={handlePanelFocusRequest}
+>
+	<!-- 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 gap-2 px-3 py-1.5 cursor-grab active:cursor-grabbing select-none min-h-[40px] touch-none"
+			onpointerdown={startDetailsDrag}
+		>
+			<h3 class="widget-details-title text-sm font-semibold text-gray-700 truncate min-w-0 max-w-[28%] shrink" title={selectedWidget?.name || 'Widget Details'}>
+				{selectedWidget?.name || 'Widget Details'}
+				{#if !isFocusedPanel}
+					<span class="text-gray-400 font-normal"> · bg</span>
+				{/if}
+			</h3>
+
+			<!-- Step Indicator (inline — same row as title) -->
+			<div class="widget-details-step-indicator-row flex flex-1 justify-center min-w-0 px-1">
+				<div class="widget-details-step-indicator flex items-center gap-1 flex-wrap justify-center">
+				<!-- 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
+						{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'}"
+				>
+					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold {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>
+				<!-- 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
+						{currentStep === 'edit'
+							? 'bg-blue-100 text-blue-700 border border-blue-300 cursor-pointer'
+							: canEditStep
+								? 'text-gray-600 hover:bg-gray-200 border border-transparent cursor-pointer'
+								: 'text-gray-300 border border-transparent cursor-default pointer-events-none'}"
+				>
+					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold {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>
+				<!-- 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
+						{currentStep === 'embed'
+							? 'bg-blue-100 text-blue-700 border border-blue-300 cursor-pointer'
+							: canEmbedStep
+								? 'text-gray-600 hover:bg-gray-200 border border-transparent cursor-pointer'
+								: 'text-gray-300 border border-transparent cursor-default pointer-events-none'}"
+				>
+					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold {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>
+				</div>
+			</div>
+
+			<div class="widget-details-debug-buttons flex items-center gap-1.5 shrink-0">
+				<button
+					type="button"
+					onclick={handleCloseButtonClick}
+					onmousedown={(e) => e.stopPropagation()}
+					onpointerdown={(e) => e.stopPropagation()}
+					class="widget-details-close-bt w-6 h-6 flex items-center justify-center rounded-lg hover:bg-gray-200 text-gray-500 hover:text-gray-700 cursor-pointer transition-colors text-sm"
+					title="Close widget details"
+				>
+					✕
+				</button>
+			</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">
+	<div class="widget-details-two-col flex h-full min-h-0 gap-0">
+
+	<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
+	<div
+		class="widget-details-left-col flex flex-col min-w-0 min-h-0 relative"
+		style="width: {leftColPercent}%; flex: 0 0 {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}
+	<!-- 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-name flex items-center min-w-0 gap-1 text-sm text-gray-700">
+			<EditableName
+				name={selectedWidget?.name || ''}
+				placeholder="Unnamed"
+				tooltipText="Double-click to rename"
+				class="flex-1 min-w-0"
+				on:rename={({ detail }) => dispatch('widgetRename', { widgetId: selectedWidgetId, newName: detail.newName })}
+			/>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<span class="ml-1 text-[10px] font-mono text-gray-400 cursor-pointer hover:text-gray-600 shrink-0" title="Click to copy widget ID" onclick={() => { navigator.clipboard.writeText(selectedWidgetId); showToast('success', 'Widget ID copied', { duration: 2000 }); }}>(id: {selectedWidgetId.substring(0, 8)}…)</span>
+		</div>
+		<div class="widget-info-meta flex items-center gap-2 shrink-0">
+			{#if saveStatus === 'saving'}
+				<span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 animate-pulse">Saving...</span>
+			{:else if saveStatus === 'saved'}
+				<span class="text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">Saved</span>
+			{: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}
+			<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-50 border border-emerald-200 text-emerald-600 hover:bg-emerald-100 transition-colors whitespace-nowrap" title="Open published widget v{lastPublishedVersion}">Live: v{lastPublishedVersion} ↗</a>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Scrollable step content -->
+	<div
+		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg {currentStep === 'edit' ? 'overflow-hidden' : 'overflow-y-auto'}"
+		bind:this={contentContainerEl}
+	>
+	<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 gap-2 p-2 {currentStep === 'create' ? '' : 'hidden'}">
+			<slot name="code-generation" />
+			<slot name="publish-widget" />
+		</div>
+		<div class="widget-details-edit-step flex flex-col h-full min-h-0 overflow-hidden {currentStep === 'edit' ? '' : 'hidden'}">
+			<slot name="composition-editor" />
+		</div>
+		<div class="widget-details-embed-step flex flex-col gap-2 p-2 {currentStep === 'embed' ? '' : 'hidden'}">
+			<slot name="embed-section" />
+		</div>
+
+	</div> <!-- end of actions-panel -->
+	</div> <!-- end of widget-details-left-content -->
+	{/if}
+
+	</div> <!-- end of widget-details-left-col -->
+
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="widget-details-col-resizer w-2.5 shrink-0 cursor-col-resize relative z-20 group"
+		title="Drag to resize chat / preview"
+		onmousedown={startColumnResize}
+	>
+		<div class="widget-details-col-resizer-line absolute inset-y-3 left-1/2 w-0.5 -translate-x-1/2 rounded-full bg-gray-300 group-hover:bg-forest-green transition-colors"></div>
+	</div>
+
+	<!-- ═══ RIGHT COLUMN: Widget Preview (always visible) ═══ -->
+	<div
+		class="widget-details-right-col flex flex-col min-w-[240px] min-h-0 relative flex-1"
+		onmousedown={handlePanelFocusRequest}
+	>
+	<div class="widget-details-right-border absolute inset-0 border border-gray-300 rounded-lg pointer-events-none z-10"></div>
+	<div class="widget-details-right-content flex flex-col h-full rounded-lg overflow-hidden bg-white">
+
+		<!-- Preview Header -->
+		<div class="preview-header relative flex items-center justify-center px-3 py-1.5 border-b border-gray-200 shrink-0">
+			<!-- Center: title + optional debug tabs -->
+			<div class="preview-header-center flex items-center gap-2">
+				<span class="text-xs font-semibold text-gray-600">Live Preview</span>
+				{#if debugMode}
+				<div class="preview-header-tabs flex items-center gap-1 ml-1">
+					<button type="button" onclick={() => toggleInlinePanelView('preview')} title="Switch to preview" class="px-2 py-0.5 text-[10px] rounded border transition-colors cursor-pointer {inlinePanelView === 'preview' ? 'border-blue-400 bg-blue-50 text-blue-700 font-medium' : 'border-gray-200 text-gray-500 hover:bg-gray-50'}">Preview</button>
+					<button type="button" onclick={() => toggleInlinePanelView('console')} title="Switch to console" class="px-2 py-0.5 text-[10px] rounded border transition-colors cursor-pointer {inlinePanelView === 'console' ? 'border-green-400 bg-green-50 text-green-700 font-medium' : 'border-gray-200 text-gray-500 hover:bg-gray-50'}">Console</button>
+				</div>
+				{/if}
+			</div>
+			<!-- Right: action buttons (Rebuild on Create step only — refresh lives in URL bar) -->
+			<div class="preview-header-buttons absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1">
+				{#if selectedWidgetId && !previewLoading && !isGeneratingCode && inlinePanelView !== 'console' && (currentStep === 'create' || previewError || publishedArtifactReachable === false)}
+					<button
+						type="button"
+						onclick={() => retryPreview()}
+						class="preview-rebuild-btn px-2 py-0.5 text-[10px] rounded border border-gray-200 text-gray-600 bg-white hover:bg-gray-50 cursor-pointer {previewError || previewHasRuntimeError || publishedArtifactReachable === false ? 'border-blue-400 bg-blue-50 text-blue-700' : ''}"
+						title="Recompile widget code for preview"
+					>{isRebuildingPreview ? '⏳ Rebuilding…' : '🔄 Rebuild'}</button>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Preview Content -->
+		<div class="preview-content-ct flex flex-col flex-1 min-h-0 relative px-3 pt-3 pb-7 overflow-hidden" bind:this={previewAreaEl}>
+			{#if !isFocusedPanel}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="widget-details-preview-focus-overlay absolute inset-0 z-20 cursor-pointer"
+				onmousedown={handlePanelFocusRequest}
+				title="Click to focus this widget panel"
+			></div>
+			{/if}
+			{#if iframeSrc || directPreviewUrl || showPreviewModal || ((isGeneratingCode || previewLoading) && inlinePanelView === 'preview')}
+				<div class="widget-preview-wrapper flex-1 min-h-0 {showPreviewModal ? 'widget-preview-in-modal' : ''}{inlinePanelView === 'preview' || showPreviewModal ? '' : ' hidden'}">
+					{#if showPreviewModal}
+						<div class="widget-preview-modal-chrome">
+							<div class="flex items-start justify-between gap-3 mb-2">
+								<div class="min-w-0 flex-1 flex flex-col gap-1">
+									{#if selectedWidget?.name}
+										<span class="text-base font-semibold text-gray-800 truncate">{selectedWidget.name}</span>
+									{/if}
+									<p class="text-xs text-gray-500">Live preview below.</p>
+								</div>
+								<Button onclick={() => { showPreviewModal = false; }} variant="outline" size="sm" class="close-preview-modal-btn shrink-0 w-6 h-6 p-[3px] cursor-pointer border border-black text-md bg-white text-black hover:bg-gray-100 rounded-lg">X</Button>
+							</div>
+						</div>
+					{/if}
+					<WidgetPreview
+						bind:this={widgetPreviewComponentRef}
+						mode="controlled"
+						enableResize={true}
+						autoFitStage={showPreviewModal}
+						src={iframeSrc || getFallbackPreviewUrl()}
+						displayUrl={directPreviewUrl || iframeSrc}
+						bind:resizeWidth={previewResizeWidth}
+						bind:resizeHeight={previewResizeHeight}
+						bind:iframeEl={previewIframe}
+						iframeReloadKey={previewIframeGeneration}
+						{previewLoading}
+						{previewHydrating}
+						{previewError}
+						{previewRetryCount}
+						{previewHasRuntimeError}
+						{previewRuntimeErrorStatus}
+						isContentReady={isPreviewContentReady}
+						isLoadingUrl={isLoadingDirectPreviewUrl}
+						{forceMockReady}
+						{isGeneratingCode}
+						{debugMode}
+						contentHeight={showPreviewModal ? '100%' : '100%'}
+						showUrlBar={true}
+						showUrlBarButtons={true}
+						on:refresh={() => { refreshPreviewIframe(); }}
+						on:fitToArea={fitPreviewToArea}
+						on:openInTab={() => { const url = directPreviewUrl || iframeSrc; if (url) window.open(url, '_blank'); }}
+						on:desktopViewport={openDesktopPreview}
+						on:iframeLoad={handlePreviewIframeLoad}
+						on:iframeError={handlePreviewIframeError}
+						on:retry={retryPreview}
+						on:fixErrors={() => { if (showPreviewModal) showPreviewModal = false; dispatch('fixErrors'); }}
+						on:viewErrors={() => { if (showPreviewModal) showPreviewModal = false; inlinePanelView = 'console'; }}
+						on:retryPreview={() => { previewHasRuntimeError = false; previewRuntimeErrorStatus = null; refreshPreviewIframe(); }}
+					/>
+				</div>
+			{:else}
+				<div class="widget-preview-fallback relative flex items-center justify-center h-full rounded-lg bg-gray-50 overflow-hidden">
+					{#if isGeneratingCode || previewLoading}
+						<GenerateLoader
+							title={isGeneratingCode ? 'Generating code…' : 'Building preview…'}
+							size="md"
+						/>
+					{:else if previewError === 'NO_CODE_YET' && !hasWidgetCode}
+						<div class="widget-preview-no-code flex flex-col items-center justify-center text-center p-4">
+							{#if !normalizeRepositoryId(selectedWidget) && repositorySetupStatus !== 'failed'}
+								<GenerateLoader
+									title="Preparing widget…"
+									subtitle="Setting up repository…"
+									size="md"
+								/>
+							{:else if !normalizeRepositoryId(selectedWidget)}
+								<div class="text-3xl mb-2">🖼️</div>
+								<div class="font-medium text-sm text-red-600 mb-1">Widget has no repository</div>
+								<div class="text-xs max-w-[200px] text-gray-500 mb-3">Repository creation failed previously. Click below to retry.</div>
+								<button type="button" onclick={() => { dispatch('retryRepository', { widgetId: selectedWidgetId }); }} class="px-3 py-1.5 text-xs rounded border border-blue-400 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer font-medium">🔧 Create Repository</button>
+							{:else}
+								<div class="text-3xl mb-2">🖼️</div>
+								<div class="font-medium text-sm text-gray-700 mb-1">No Code Yet</div>
+								<div class="text-xs max-w-[200px] text-gray-500 mb-3">Write a prompt and generate code to see preview here.</div>
+								<button type="button" onclick={() => { dispatch('generateNow', { widgetId: selectedWidgetId }); }} class="generate-now-btn px-3 py-1.5 text-xs rounded border border-green-500 text-green-700 bg-white hover:bg-green-50 cursor-pointer font-medium">▶ Generate Now</button>
+							{/if}
+						</div>
+					{:else if previewError && (lastPublishedVersion !== null || previewError !== 'NO_CODE_YET')}
+						<div class="widget-preview-error-indicator flex flex-col items-center justify-center text-center p-4">
+							<div class="text-3xl mb-2">⚠️</div>
+							<div class="font-medium text-sm text-red-600 mb-1">Preview Unavailable</div>
+							<div class="text-xs max-w-[200px] text-gray-600 mb-3">{previewError}</div>
+							{#if !normalizeRepositoryId(selectedWidget)}
+								<button type="button" onclick={() => { previewError = null; dispatch('retryRepository', { widgetId: selectedWidgetId }); }} class="px-3 py-1.5 text-xs rounded border border-blue-400 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer font-medium">🔧 Create Repository</button>
+							{:else}
+								<div class="preview-error-actions flex flex-col gap-2 items-center">
+									{#if isCdnArtifactMissingError(previewError) || isInfrastructurePreviewError(previewError)}
+										<button type="button" onclick={() => { previewError = null; previewRetryCount++; void triggerBuildFromRepo({ force: true }); }} class="px-3 py-1.5 text-xs rounded border border-blue-400 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer font-medium">🔄 Rebuild code</button>
+									{:else if lastCommitId || lastPublishedVersion !== null}
+										<button type="button" onclick={() => { dispatch('fixCompileError', { widgetId: selectedWidgetId, error: previewError }); }} class="fix-compile-error-btn px-3 py-1.5 text-xs rounded border border-amber-500 text-amber-800 bg-white hover:bg-amber-50 cursor-pointer font-medium">🔧 Fix Compile Error</button>
+									{:else}
+										<button type="button" onclick={() => { dispatch('generateNow', { widgetId: selectedWidgetId }); }} class="generate-now-btn px-3 py-1.5 text-xs rounded border border-green-500 text-green-700 bg-white hover:bg-green-50 cursor-pointer font-medium">▶ Generate Now</button>
+									{/if}
+									{#if !isCdnArtifactMissingError(previewError) && !isInfrastructurePreviewError(previewError)}
+									<button type="button" onclick={() => { previewError = null; previewRetryCount++; triggerBuildFromRepo(); }} class="px-2 py-1 text-[10px] rounded border border-gray-300 text-gray-500 bg-white hover:bg-gray-50 cursor-pointer">🔄 Retry Build</button>
+									{/if}
+								</div>
+							{/if}
+						</div>
+					{:else if isLoadingDirectPreviewUrl || previewLoading}
+						<GenerateLoader title="Building Preview…" subtitle="Compiling widget code…" size="md" />
+					{:else}
+						<GenerateLoader
+							class="widget-preview-idle-indicator text-gray-400"
+							title=""
+							subtitle="Preview will appear after code generation."
+							size="md"
+						/>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- Console Panel -->
+			{#if inlinePanelView === 'console'}
+				<div class="console-panel-ct flex flex-col h-full bg-gray-900 rounded-lg overflow-hidden">
+					<div class="console-panel-header flex items-center justify-between px-3 py-1.5 bg-gray-800 border-b border-gray-700">
+						<span class="text-[10px] font-mono text-gray-400">{consoleLogs.length} message{consoleLogs.length !== 1 ? 's' : ''}</span>
+						<button type="button" onclick={() => { consoleLogs = []; }} class="text-[10px] text-gray-500 hover:text-gray-300 cursor-pointer">Clear</button>
+					</div>
+					<div class="console-panel-logs flex-1 overflow-y-auto p-2 font-mono text-[11px] leading-relaxed" bind:this={consoleScrollEl}>
+						{#if consoleLogs.length === 0}
+							<div class="console-panel-empty flex items-center justify-center h-full text-gray-600 text-xs">
+								No console output yet. Widget logs will appear here.
+							</div>
+						{:else}
+							{#each consoleLogs as entry}
+								<div class="console-entry py-0.5 border-b border-gray-800 {entry.level === 'error' ? 'text-red-400' : entry.level === 'warn' ? 'text-yellow-400' : 'text-gray-300'}">
+									<span class="text-gray-600 mr-2">{entry.timestamp.toLocaleTimeString()}</span>
+									<span>{entry.message}</span>
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+
+	</div> <!-- end of widget-details-right-content -->
+	</div> <!-- end of widget-details-right-col -->
+
+	</div> <!-- end of widget-details-two-col -->
+
+	<!-- Modal backdrop — clicking outside closes -->
+	{#if showPreviewModal}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			bind:this={previewModalRef}
+			class="widget-preview-modal-backdrop fixed inset-0 z-99998 bg-black/70"
+			onclick={() => { showPreviewModal = false; }}
+			onkeydown={(e) => { if (e.key === 'Escape') showPreviewModal = false; }}
+			role="dialog"
+			aria-modal="true"
+			tabindex="-1"
+			use:focusOnMount
+		></div>
+	{/if}
+
+	</div> <!-- end of widget-details-content-wrapper -->
+
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-10 group" onmousedown={startDetailsResize} title="Resize panel">
+		<svg class="w-3 h-3 absolute bottom-0.5 right-0.5 text-gray-400 group-hover:text-gray-600 transition-colors" viewBox="0 0 6 6" fill="currentColor">
+			<circle cx="5" cy="1" r="0.7"/>
+			<circle cx="3" cy="3" r="0.7"/>
+			<circle cx="5" cy="3" r="0.7"/>
+			<circle cx="1" cy="5" r="0.7"/>
+			<circle cx="3" cy="5" r="0.7"/>
+			<circle cx="5" cy="5" r="0.7"/>
+		</svg>
+	</div>
+</div>
+{/if}
+
+<style>
+	.widget-details-left-content {
+		overflow-y: auto;
+		overflow-x: hidden;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+	}
+	.widget-details-left-content::-webkit-scrollbar {
+		width: 10px;
+		background: transparent;
+	}
+	.widget-details-left-content::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	.widget-details-left-content::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.12);
+		border-radius: 10px;
+		border: 3px solid transparent;
+		background-clip: content-box;
+	}
+	.widget-details-left-content::-webkit-scrollbar-thumb:hover {
+		background: rgba(0, 0, 0, 0.22);
+		border: 3px solid transparent;
+		background-clip: content-box;
+	}
+
+	/* CSS-teleport: lift preview wrapper into a full-window modal overlay */
+	:global(.widget-preview-in-modal) {
+		position: fixed !important;
+		z-index: 99999 !important;
+		inset: 2rem !important;
+		transform: none !important;
+		width: auto !important;
+		height: auto !important;
+		background: white !important;
+		border-radius: 0.75rem !important;
+		border: 1px solid black !important;
+		padding: 1rem 1.5rem 1.5rem !important;
+		box-shadow: 0 25px 50px rgba(0,0,0,0.25) !important;
+		display: flex !important;
+		flex-direction: column !important;
+		overflow: hidden !important;
+	}
+	:global(.widget-preview-in-modal .widget-preview-modal-chrome) {
+		flex-shrink: 0 !important;
+	}
+	:global(.widget-preview-in-modal .preview-content-url-bar) {
+		flex-shrink: 0 !important;
+	}
+	:global(.widget-preview-in-modal .preview-content-container) {
+		flex: 1 !important;
+		height: auto !important;
+		min-height: 0 !important;
+		overflow: visible !important;
+	}
+
+	:global(.widget-details-right-content .widget-preview-wrapper) {
+		overflow: visible !important;
+	}
+</style>