@widgetic/creator 0.3.71 → 0.3.73

package/dist/CreatorApp.svelte

@@ -25,7 +25,9 @@
 		MessagesApi,
 		CompositionsApi,
 		UploadsApi,
-		ResponseError
+		UsersApi,
+		ResponseError,
+		isRetiredSurfaceError
 	} from '@widgetic/api-sdk';
 	import type {
 		Middleware,
@@ -33,6 +35,7 @@
 		AgentModelsGet200ResponseModelsInner
 	} from '@widgetic/api-sdk';
 	import { parseVersionPreviewError } from './utils/versionPreviewError.js';
+	import BrandKitPanel from './components/BrandKitPanel.svelte';
 
 	/**
 	 * Idempotency middleware (Phase 2 hardening): the gateway rejects
@@ -345,6 +348,9 @@
 	let messagesClient: MessagesApi;
 	let compositionsClient: CompositionsApi;
 	let uploadsClient: UploadsApi;
+	let usersClient: UsersApi;
+	/** Credits, and days left while the account is still on the free trial. */
+	let trialCounter: { credits: number; days: number | null; trialEnded: boolean } | null = null;
 	
 	// Track which token the authenticated clients were built with
 	let authenticatedClientsToken: string | null = null;
@@ -390,6 +396,9 @@
 		uploadsClient = apiBasePath
 			? new UploadsApi({ basePath: apiBasePath, accessToken: token, middleware: [idempotencyKeyMiddleware] })
 			: new UploadsApi({ accessToken: token, middleware: [idempotencyKeyMiddleware] });
+		usersClient = apiBasePath
+			? new UsersApi({ basePath: apiBasePath, accessToken: token })
+			: new UsersApi({ accessToken: token });
 
 		authenticatedClientsToken = token;
 		try {
@@ -398,6 +407,41 @@
 			/* websocket store may not be ready yet */
 		}
 		syncFileBrowserUploadConfigForCreator();
+		void refreshTrialCounter();
+	}
+
+	/** Credits left and days left, from the same billing status the publish gate uses. */
+	async function refreshTrialCounter() {
+		if (!usersClient) return;
+		try {
+			const accepted = await usersClient.usersMeBillingGetRaw();
+			const body = await accepted.raw.json();
+			const data = (body && typeof body === 'object' && 'data' in body ? body.data : body) as {
+				trialActive?: boolean;
+				creditsAvailable?: number;
+				creditBalance?: number;
+				trialDaysLeft?: number | null;
+				subscription?: { plan_type?: string | null; planType?: string | null } | null;
+			} | null;
+			if (!data || (data.creditsAvailable == null && data.creditBalance == null && !data.trialActive)) {
+				trialCounter = null;
+				return;
+			}
+			const credits = Number(data.creditsAvailable ?? data.creditBalance ?? 0);
+			const planType = String(data.subscription?.plan_type || data.subscription?.planType || '').toLowerCase();
+			const paidPlan = planType === 'solo' || planType === 'teams' || planType === 'team';
+			const days = data.trialDaysLeft == null ? null : Number(data.trialDaysLeft);
+			trialCounter = {
+				credits: Number.isFinite(credits) ? Math.max(0, Math.round(credits)) : 0,
+				days: paidPlan || days == null || !Number.isFinite(days) ? null : Math.max(0, Math.round(days)),
+				trialEnded: !paidPlan && days === 0,
+			};
+			if (typeof window !== 'undefined') {
+				window.dispatchEvent(new CustomEvent('widgetic:trial-counter'));
+			}
+		} catch (error) {
+			console.warn('[Trial] Could not load the credit counter', error);
+		}
 	}
 
 	function applySiteSessionToCreator(): boolean {
@@ -476,9 +520,35 @@
 	import WidgetShapeLivePreviews from './components/WidgetShapeLivePreviews.svelte';
 	import HoverTooltip from './components/HoverTooltip.svelte';
 	import VersionDropdownRow from './components/VersionDropdownRow.svelte';
+	// Type-only: erased at compile time, so the component's code is still
+	// dynamically imported below — this line exists so the ref types below can
+	// derive from the component's REAL class instead of the `any` a dynamic
+	// `import('./components/WidgetDetails.svelte')` resolves to (its module
+	// type carries no instance shape, which silently re-opens the any-ref hole
+	// this block exists to close).
+	import type WidgetDetailsComponent from './components/WidgetDetails.svelte';
 
 	// WIDGET DETAILS COMPONENT — lazy-loaded to reduce peak build memory
-	let WidgetDetails: any;
+	//
+	// The component value and its module promise are **derived types**, not
+	// hand-written mirrors — the same contract canvasRef and
+	// widgetShapeLivePreviewsRef below carry. WidgetDetails.svelte is classic
+	// Svelte 4, so the instance type is `InstanceType` of its component class
+	// (imported type-only above — see the note there for why the dynamic import
+	// cannot supply this type). `WithoutIndexKeys` (declared with the canvas ref
+	// below) strips the string index signature the base plumbing inherits,
+	// which the falsification probe for this very file proved lets unknown-member
+	// calls compile. A renamed or removed `export function` on
+	// WidgetDetails.svelte is now a compile error at every stale CreatorApp call
+	// site instead of a silent runtime `undefined`; a new export appears here
+	// without any edit to this file. The values stay
+	// `| null`/`| undefined` because the module loads lazily — the
+	// optionality lives at the assignment, not in the type.
+	type WidgetDetailsInstance = WithoutIndexKeys<InstanceType<typeof WidgetDetailsComponent>>;
+	// The lazily-assigned value is the COMPONENT (constructor) — what
+	// `<svelte:component this={…}>` consumes — while the refs and
+	// `getWidgetDetailsRef` hand out INSTANCES. Two shapes, two types.
+	let WidgetDetails: typeof WidgetDetailsComponent | undefined = undefined;
 	let widgetDetailsRefs: Record<string, any> = {};
 	let openWidgetPanelIds: string[] = [];
 	/** Stable {#each} keys so draft → real widget does not remount Widget Details. */
@@ -495,27 +565,76 @@
 	// WidgetConversionPayload lives on the canvas root export (re-exported from
 	// ./canvas); the components barrel only carries the input controls. Type-only
 	// import, so the 10K-line Canvas.svelte still never loads.
-	import type { WidgetConversionPayload } from '@widgetic/canvas';
+	import type {
+		WidgetConversionPayload,
+		StrokeRecognitionRequest,
+		StrokeRecognitionResult
+	} from '@widgetic/canvas';
 
 	// Chat module for code generation conversation UI
 	import { Chat, ContextType } from '@widgetic/chat';
 	import type { ClarificationSuggestion } from '@widgetic/chat';
+	import DesignQuickEdit from './components/DesignQuickEdit.svelte';
+	import { collectDesignProperties, resolveDesignIntent, toDesignControlRequest, type DesignControlRequest } from './utils/designIntentResolver';
+	import { isDesignCardAttached } from './utils/designQuickEditValues';
+	import { resolveDesignIntentViaJev } from './utils/designIntentJevClient';
+	import { recognizeStrokeViaJev } from './utils/canvasShapeSnapClient';
+	import {
+		recordDesignIntentTelemetry,
+		recordDesignIntentJevOutcome,
+		isJevCandidateBucket,
+		type DesignIntentClassification
+	} from './utils/designIntentTelemetry';
 
 	// Eagerly initiate canvas chunk fetching at script evaluation (parallel with DOM parsing)
 	const canvasModulePromise = typeof window !== 'undefined' ? import('@widgetic/canvas') : null;
 
-	let WidgeticCanvas: any;
-	let canvasRef: any;
-	/** HTML iframe overlays over Fabric WidgetShapes (W3). */
-	let widgetShapeLivePreviewsRef: {
-		sync?: () => void;
-		requestReload?: (widgetId: string) => void;
-	} | null = null;
+	let WidgeticCanvas: typeof import('@widgetic/canvas').Canvas | null = null;
+	/**
+	 * Pattern reference: `__docs/15-svelte4-component-ref-typing.md`.
+	 *
+	 * Drops the string-index keys a Svelte 4 component's instance type inherits
+	 * from its prop plumbing, keeping only the class's own members. Without
+	 * this, `canvasRef.anythingAtAll` type-checks and a mistyped method name
+	 * slips through as a silent runtime `undefined`.
+	 */
+	type WithoutIndexKeys<T> = { [K in keyof T as string extends K ? never : K]: T[K] };
+	/**
+	 * The canvas component instance, **derived from the component's own type**
+	 * (`InstanceType` of the `@widgetic/canvas` `Canvas` class), not a
+	 * hand-written mirror. This component is classic Svelte 4 — a
+	 * `SvelteComponentTyped` subclass whose instance members are compiled
+	 * `export function` getters — so the instance type is `InstanceType<…>`
+	 * (the Svelte 5 call-signature components elsewhere in this file use
+	 * `ReturnType<…>`; same idea, different component authoring era). A new
+	 * `export function` on Canvas.svelte appears here after a dist rebuild,
+	 * and a renamed or removed one is a compile error at the stale call site
+	 * instead of a silent `undefined` at runtime. The ref is still `| null`
+	 * and the calls keep their `?.` because the canvas mounts lazily — the
+	 * optionality lives at the binding, not in the type.
+	 */
+	let canvasRef: WithoutIndexKeys<InstanceType<typeof import('@widgetic/canvas').Canvas>> | null = null;
+	/**
+	 * HTML iframe overlays over Fabric WidgetShapes (W3).
+	 *
+	 * Typed as the component's **own instance type**, not a hand-written
+	 * mirror: a Svelte 5 component is a call-signature type whose return is
+	 * the exported instance surface, so `ReturnType` of the imported component
+	 * is exactly what `bind:this` delivers. The previous literal shape
+	 * (`sync`/`requestReload`/`cancelReloads`/`setSelectedVersion`, all
+	 * optional) had to be edited in lockstep with the component's `export
+	 * function` block — a new export left every call site type-unchecked
+	 * against it, a signature change drifted silently. Derived, both
+	 * directions are compile errors at the stale site instead. The ref is
+	 * still `| null` and the calls keep their `?.` because the canvas mounts
+	 * lazily — the optionality lives at the binding, not in the type.
+	 */
+	let widgetShapeLivePreviewsRef: ReturnType<typeof WidgetShapeLivePreviews> | null = null;
 	/** Selected WidgetShape id for chrome highlight (from Fabric selection). */
 	let canvasSelectedWidgetShapeId: string | null = null;
-	let widgetDetailsModulePromise: Promise<any> | null = null;
+	let widgetDetailsModulePromise: Promise<typeof WidgetDetailsComponent> | null = null;
 
-	function loadWidgetDetailsModule(): Promise<any> {
+	function loadWidgetDetailsModule(): Promise<typeof WidgetDetailsComponent> {
 		if (!widgetDetailsModulePromise) {
 			widgetDetailsModulePromise = import('./components/WidgetDetails.svelte').then((wdModule) => {
 				WidgetDetails = wdModule.default;
@@ -891,6 +1010,16 @@
 	let currentGenerationOperationId: string | null = null;
 	let generateCodeStatus: string | null = null;
 	let lastGenerationFailed = false; // Track if last generation failed for retry UI
+	let publishPlanMessageByWidgetId: Record<string, string> = {};
+
+	function isPlanLimitMessage(message: string | null | undefined): boolean {
+		if (!message) return false;
+		return /credit balance|free trial|not available in your plan|not available on the free plan|upgrade your plan|upgrade to a solo/i.test(message);
+	}
+
+	function openUpgradePlans() {
+		window.location.assign('/workspaces/personal/settings/billing');
+	}
 	let lastGenerationError: string | null = null; // Store the error message for display
 	let lastGenerationPrompt: string | null = null; // Last prompt used, for retrying failed generations
 	let pendingAutoGenerateWidgetId: string | null = null; // Widget created from canvas that needs auto code generation
@@ -922,6 +1051,7 @@
 	let chatMethods: {
 		sendMessage: (content: string, attachments?: File[]) => Promise<void>;
 		addAssistantMessage: (content: string, skipPersist?: boolean, suggestions?: ClarificationSuggestion[]) => void;
+		addDesignControlsMessage?: (content: string, designControls: DesignControlRequest) => void;
 		addUserMessage: (content: string, attachments?: Array<{ id: string; url: string; file_type: string; file_name: string }>) => void;
 		getConversationId: () => string | null;
 		addImageAttachment?: (dataUrl: string, fileName?: string) => void;
@@ -960,6 +1090,45 @@
 	// Populated via Chat's onConversationChange callback and passed to generateCode()
 	// so the backend can load multi-turn LLM history (Aider-style incremental edits).
 	let currentChatConversationId: string | null = null;
+	let brandKitEnabled = false;
+	let widgetLanguage = 'svelte';
+	let librariesEnabled = false;
+	let brandPrimary = '#314F2F';
+	let brandSecondary = '#7BA668';
+	let brandTitle = '#0F2010';
+	let brandSub = '#5C6B58';
+	let brandFonts = ['Inter'];
+	let brandKitLibraries: string[] = [];
+	let libraryGitUrl = '';
+	let libraryFileName = '';
+	let libraryUploads: { name: string; content: string; encoding: string }[] = [];
+	let fontUploads: { name: string; content: string; encoding: string }[] = [];
+
+	function brandKitForRequest() {
+		const kit: {
+			colors?: { primary: string; secondary: string; title: string; sub: string };
+			fonts?: string[];
+			libraries?: string[];
+			uploads?: { name: string; content: string; encoding: string }[];
+			fontFiles?: { name: string; content: string; encoding: string }[];
+		} = {};
+		if (brandKitEnabled) {
+			kit.colors = {
+				primary: brandPrimary,
+				secondary: brandSecondary,
+				title: brandTitle,
+				sub: brandSub,
+			};
+			const families = brandFonts.map((family) => family.trim()).filter(Boolean).slice(0, 3);
+			if (families.length > 0) kit.fonts = families;
+		}
+		// Preset libraries are a debug test. An empty list is an explicit ban.
+		if (librariesEnabled && debugMode) kit.libraries = [...brandKitLibraries];
+		if (brandKitEnabled && fontUploads.length > 0) kit.fontFiles = fontUploads.map((file) => ({ ...file }));
+		if (libraryUploads.length > 0) kit.uploads = libraryUploads.map((file) => ({ ...file }));
+		if (!kit.colors && !kit.fonts && !kit.libraries && !kit.uploads && !kit.fontFiles) return undefined;
+		return kit;
+	}
 
 	/** Prompt mentions a reference image but chat has no attachment (common UX mistake). */
 	function promptImpliesVisionReference(prompt: string): boolean {
@@ -1133,6 +1302,40 @@
 			}
 		});
 
+		// Shadow-mode measurement: bucket every send by how it could be resolved
+		// (literal/arithmetic, bounded-set semantic, free text, new property, or
+		// not a design ask). Records + logs only — it never changes behavior.
+		// The bucket also decides whether the Jev fallback is worth a dial.
+		// Inspect from the console: `__widgeticDesignIntentTelemetry.report()`.
+		// The whole classification is kept, not just the bucket: the Jev dial below is
+		// attributed to the *ask shape* inside that bucket (a property was named, or
+		// only a value was), which is what makes its fall-through reasons actionable.
+		let designIntentClassification: DesignIntentClassification | null = null;
+		try {
+			designIntentClassification = recordDesignIntentTelemetry(
+				content,
+				getPanelDisplayState(codegenWidgetId).compositionDesignSchema
+			);
+		} catch {
+			/* telemetry must never break a send */
+		}
+
+		// Deterministic design-tweak fast path: explicit values and arithmetic
+		// resolve against the loaded design schema in code, so an unambiguous
+		// property change never pays for a 30–300s codegen turn.
+		if (!attachments?.length && !sendOptions?.skipIntentGate) {
+			if (tryApplyDesignIntent(codegenWidgetId, content)) return;
+			// Jev takes over ONLY the bounded-set-semantic bucket — the residual
+			// where the property or value needs judgment but the value space is
+			// closed. Free text and new properties can only fall through (Jev cannot
+			// generate) and a non-design ask is not ours at all, so none of them is
+			// ever dialed.
+			const dialJev = isJevCandidateBucket(designIntentClassification?.bucket);
+			if (dialJev && (await tryApplyDesignIntentViaJev(codegenWidgetId, content, designIntentClassification))) {
+				return;
+			}
+		}
+
 		const effectivePromptImages =
 			panelPromptImages.length > 0
 				? panelPromptImages
@@ -2116,6 +2319,12 @@
 				// Suggestion chips from a persisted clarification card — restored
 				// on reload exactly as they were served.
 				suggestions: Array.isArray(m.suggestions) && m.suggestions.length > 0 ? m.suggestions : undefined,
+				// The inline design-control card this turn carried, restored on
+				// reload so the reply keeps its controls. The server has already
+				// normalized the payload to a renderable shape (see the messages
+				// service); `compositionId` on it decides whether the card can still
+				// read this composition's live values.
+				designControls: m.design_controls ?? m.designControls ?? undefined,
 				isCommit: m.is_commit || m.isCommit || false,
 				// What the turn shipped, in the commit's own words — persisted beside
 				// is_commit by the codegen pipeline and rendered on the turn's commit
@@ -2295,6 +2504,10 @@
 		}>,
 		suggestions?: ClarificationSuggestion[],
 		persistWidgetId?: string | null,
+		/** The inline design-control card this reply carries, when a directed
+		 *  design tweak was applied with no codegen. Persisted with the reply so
+		 *  the card survives a reload and re-attaches to its composition. */
+		designControls?: DesignControlRequest | null,
 	): Promise<any> {
 		try {
 			// Draft convert panels hold a client-only conversation until the widget
@@ -2332,6 +2545,9 @@
 				// Clarification-card suggestions ride the same write as the reply
 				// they belong to, so a reload re-renders the card with its chips.
 				...(suggestions && suggestions.length > 0 ? { suggestions } : {}),
+				// Same for the inline design-control card: one write, so a reload
+				// re-renders the reply and its controls — not half a turn.
+				...(designControls ? { design_controls: designControls } : {}),
 			};
 			const persistMessage = async (payload: typeof createPayload) => {
 				const response = await messagesClient.createMessageRaw({
@@ -2549,6 +2765,10 @@
 		// API returns camelCase (via responseTransformMiddleware), fallback to snake_case
 		commitSha?: string | null;
 		commit_sha?: string | null;
+		/** What the change shipped, in the pipeline's own words — the same title
+		 *  the chat turn's commit chrome shows. Null on pre-title versions. */
+		commitTitle?: string | null;
+		commit_title?: string | null;
 		artifactUrl?: string;
 		artifact_url?: string;
 		/**
@@ -2573,6 +2793,8 @@
 	let isHistoryOpen = false;
 	let isLoadingHistory = false;
 	let isSettingLiveVersion: number | null = null; // track which version is being set live
+	/** The version whose title rename is in flight, as `widgetId:version`. */
+	let renamingTitleFor: string | null = null;
 	let liveHistoryPanelTop = 0;
 	let liveHistoryPanelRight = 0;
 	/** True once publish history fetch completed for the current widget (or widget was never published). */
@@ -2677,8 +2899,8 @@
 	// COMPOSITION EDITOR STATE
 	// =============================================================================
 	let compositionEditorOpen = false;
-	let compositionDesignSchema: any = null;
-	let compositionContentSchema: any = null;
+	let compositionDesignSchema: DesignSchemaView | null = null;
+	let compositionContentSchema: ContentSchemaView | null = null;
 	let compositionSchemasLoading = false;
 	let compositionSchemasError: string | null = null;
 
@@ -2712,6 +2934,9 @@
 	}
 
 	function handleChatMessagesResize(widgetId: string, deltaPx: number): void {
+		// Sub-pixel footer jitter was rewriting the chat height every frame and
+		// re-rendering the whole creator while code generation streamed.
+		if (!Number.isFinite(deltaPx) || Math.abs(deltaPx) < 2) return;
 		const measured = document
 			.querySelector(`[data-widget-chat-height="${widgetId}"]`)
 			?.getBoundingClientRect().height;
@@ -2719,8 +2944,8 @@
 			measured && measured > 0
 				? measured
 				: (getChatContainerHeightForPanel(widgetId) ?? CHAT_DEFAULT_HEIGHT);
-		const next = Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, current + deltaPx));
-		console.log('[Chat] Resize container height:', widgetId?.substring(0, 8), current, '→', next);
+		const next = Math.max(CHAT_MIN_HEIGHT, Math.min(CHAT_MAX_HEIGHT, Math.round(current + deltaPx)));
+		if (Math.abs(next - current) < 2) return;
 		patchPanelSnapshot(widgetId, { chatContainerHeight: next });
 	}
 
@@ -2763,19 +2988,77 @@
 		});
 	}
 
-	function normalizeDesignSchemaFromApiResponse(designRes: unknown): any {
+	/** A component property as the design schema carries it. Field set is open —
+	 * consumers read known keys and every schema shape is producer-defined — but
+	 * the keys the editor itself reads are named. */
+	interface DesignSchemaPropertyView {
+		id?: string;
+		name?: string;
+		description?: string;
+		inputController?: { type?: string } & Record<string, unknown>;
+		[key: string]: unknown;
+	}
+
+	/** One component group of the design schema (the `componentGroups` array's
+	 * members). Open to extra keys; the editor reads `name` and `components`. */
+	interface DesignSchemaGroupView {
+		name?: string;
+		components?: Array<{
+			properties?: DesignSchemaPropertyView[];
+			[key: string]: unknown;
+		}>;
+		[key: string]: unknown;
+	}
+
+	/**
+	 * The design schema as this file's pipeline actually carries it: after
+	 * `normalizeDesignSchemaFromApiResponse` it is **either a group array (the
+	 * merged single-group form) or null** — the envelope variants
+	 * (`componentGroups` on an object, legacy `theme`-only payloads) are
+	 * collapsed upstream of this type. The API's generated model
+	 * (`GetCompositionDesignSchema200Response`) types `componentGroups` only as
+	 * `Array<object>`, so these views encode the shape the normalizer
+	 * guarantees, not the shape the OpenAPI spec guesses.
+	 */
+	type DesignSchemaView = DesignSchemaGroupView[];
+
+	/** One content-item entry of the content schema (the `contentItems` array's
+	 * members). `id` and `properties` are what the merge/preview helpers read. */
+	interface ContentSchemaItemView {
+		id?: string;
+		properties?: unknown[];
+		[key: string]: unknown;
+	}
+
+	/**
+	 * The content schema as this file's pipeline carries it: the raw 200
+	 * payload's object form (may arrive wrapped as `{ data: … }` from the
+	 * response envelope), with the two keys the editor reads named —
+	 * `contentItems` (array form; the legacy object form is tolerated at the
+	 * read sites and Array-guarded before use) plus the open remainder.
+	 */
+	interface ContentSchemaView {
+		/** Response-envelope artifact of the upstream API; tolerated, never authored here. */
+		data?: { contentItems?: ContentSchemaItemView[] | Record<string, unknown> };
+		contentItems?: ContentSchemaItemView[] | Record<string, unknown>;
+		[key: string]: unknown;
+	}
+
+	function normalizeDesignSchemaFromApiResponse(designRes: unknown): DesignSchemaView | null {
 		if (!designRes) return null;
 		const payload = (designRes as { data?: unknown })?.data ?? designRes;
 		if (!payload || typeof payload !== 'object') return null;
-		if (Array.isArray(payload)) return payload;
+		if (Array.isArray(payload)) return payload as DesignSchemaView;
 		const record = payload as Record<string, unknown>;
 		const groups = record.componentGroups ?? record.component_groups;
 		if (Array.isArray(groups)) {
 			if (groups.length > 1) {
-				const mergedComponents = groups.flatMap((g: { components?: unknown[] }) => g.components || []);
+				// The view-shape coercion happens here, at the normalizer — the one
+				// place raw API JSON is pronounced to be the editor's schema view.
+				const mergedComponents = groups.flatMap((g: { components?: DesignSchemaPropertyView[] }) => g.components || []);
 				return [{ name: (groups[0] as { name?: string })?.name || 'Design', components: mergedComponents }];
 			}
-			return groups;
+			return groups as DesignSchemaView;
 		}
 		// Legacy VM default schema: { theme: { colors: ... } } — not editable via PropsEditor
 		if (record.theme && !groups) return null;
@@ -2826,10 +3109,10 @@
 		}
 	}
 
-	function normalizeContentSchemaFromApiResponse(contentRes: unknown): any {
+	function normalizeContentSchemaFromApiResponse(contentRes: unknown): ContentSchemaView | null {
 		if (!contentRes) return null;
 		const payload = (contentRes as { data?: unknown })?.data ?? contentRes;
-		return payload && typeof payload === 'object' ? payload : null;
+		return payload && typeof payload === 'object' ? (payload as ContentSchemaView) : null;
 	}
 
 	const SCHEMA_LOAD_TIMEOUT_MS = 20000;
@@ -2839,8 +3122,8 @@
 	const schemaLoadWaitQueue: string[] = [];
 	/** Per-widget schema cache — survives focus switches and snapshot merges. */
 	const widgetSchemaCache = new Map<string, {
-		design: any;
-		content: any;
+		design: DesignSchemaView | null;
+		content: ContentSchemaView | null;
 		error: string | null;
 	}>();
 
@@ -3065,8 +3348,8 @@
 				compositionSchemasError = null;
 			}
 
-			let designSchema: any = null;
-			let contentSchema: any = null;
+			let designSchema: DesignSchemaView | null = null;
+			let contentSchema: ContentSchemaView | null = null;
 			let schemaError: string | null = null;
 
 			try {
@@ -3089,7 +3372,7 @@
 
 				designSchema = ensureSubtitleFontInDesignSchema(
 					normalizeDesignSchemaFromApiResponse(designRes)
-				);
+				) as DesignSchemaView | null;
 				contentSchema = normalizeContentSchemaFromApiResponse(contentRes);
 
 				if (!designSchema && !contentSchema) {
@@ -3452,6 +3735,206 @@
 		return out;
 	}
 
+	/**
+	 * Deterministic design-tweak fast path for the canvas chat.
+	 *
+	 * `off`     — never resolve; every message goes to codegen (shipped behavior).
+	 * `shadow`  — resolve + log, but still send to codegen (measure the flip rate).
+	 * `enforce` — apply the resolved change to the live preview, persist it like
+	 *             any other design edit, render the inline controller in chat, and
+	 *             skip codegen entirely — no LLM call.
+	 */
+	const DESIGN_INTENT_RESOLVER = (
+		(import.meta.env as unknown as Record<string, string | undefined>).VITE_DESIGN_INTENT_RESOLVER ??
+		'enforce'
+	) as 'off' | 'shadow' | 'enforce';
+
+	/** Apply design values to the live preview + persist, mirroring the editor path. */
+	function applyDesignValuesToPreview(widgetId: string, changes: Record<string, unknown>): void {
+		const ps = getPanelDisplayState(widgetId);
+		const base = ps.liveDesignValues ?? {};
+		const next = { ...base, ...changes };
+		if (widgetId === focusedPanelWidgetId) {
+			liveDesignValues = next;
+		} else {
+			patchPanelSnapshot(widgetId, { liveDesignValues: next });
+		}
+		getWidgetDetailsRef(widgetId)?.sendMessageToPreview({
+			type: 'widgetic:update',
+			design: flattenDesignValuesForPreview(next)
+		});
+		compositionDirty = true;
+		if (widgetId === focusedPanelWidgetId) {
+			syncFocusedPanelEditorSnapshot();
+			// Design edits are committed as soon as they are made, so the next codegen
+			// turn already sees the updated values.
+			if (selectedComposition && selectedWidgetId === widgetId) {
+				void updateCompositionValues();
+			}
+		}
+	}
+
+	/**
+	 * Property ids present in a design schema, memoized by schema identity.
+	 *
+	 * The chat design card asks whether the property it controls still exists so
+	 * it can disable a control whose property a regeneration dropped instead of
+	 * writing a dead value. That question is asked for every open panel on every
+	 * display revision (i.e. on every slider tick), so re-walking the schema each
+	 * time is wasteful. `undefined` means there is no schema to judge by yet —
+	 * the card then leaves its controls live rather than disabling them.
+	 */
+	let designPropertyIdsCache: { schema: unknown; ids: Set<string> } | null = null;
+	function designPropertyIdsFor(schema: unknown): Set<string> | undefined {
+		if (!schema) return undefined;
+		if (designPropertyIdsCache?.schema === schema) return designPropertyIdsCache.ids;
+		const ids = new Set(collectDesignProperties(schema).map((property) => property.id));
+		designPropertyIdsCache = { schema, ids };
+		return ids;
+	}
+
+	/**
+	 * Try to satisfy a chat message as a deterministic design tweak (no LLM).
+	 * Returns true when the message was handled and codegen must be skipped.
+	 */
+	function tryApplyDesignIntent(widgetId: string, message: string): boolean {
+		if (DESIGN_INTENT_RESOLVER === 'off') return false;
+		const ps = getPanelDisplayState(widgetId);
+		const schema = ps.compositionDesignSchema;
+		if (!schema) return false;
+
+		const liveValues = ps.liveDesignValues ?? {};
+		const resolution = resolveDesignIntent(message, schema, liveValues);
+		if (!resolution) return false;
+
+		if (DESIGN_INTENT_RESOLVER === 'shadow') {
+			console.log('[DesignIntent] shadow', resolution);
+			return false;
+		}
+
+		const changes: Record<string, unknown> = {};
+		for (const change of resolution.changes) changes[change.propertyId] = change.value;
+		applyDesignValuesToPreview(widgetId, changes);
+		// The card records the composition the change landed in, so a reload can
+		// re-attach it to that composition's live values instead of whatever
+		// composition happens to be selected when the conversation is reopened.
+		const card = toDesignControlRequest(
+			resolution,
+			schema,
+			{ ...liveValues, ...changes },
+			ps.selectedComposition?.id ?? null
+		);
+		getChatMethodsForWidget(widgetId)?.addDesignControlsMessage?.(resolution.summary, card);
+		return true;
+	}
+
+	/**
+	 * Jev-backed fallback for the deterministic resolver: when the message names
+	 * a design property semantically and no literal value can be parsed, ask the
+	 * gateway to classify the property and a bounded value. Acts only when the
+	 * gateway says `acted` (enforce mode + confident verdict); otherwise the
+	 * caller generates exactly as before. Never throws, never blocks a send.
+	 *
+	 * The send's own classification rides along so the shadow telemetry can split
+	 * every dial's outcome by the ask shape that produced it — a fall-through where
+	 * the property was named indicts the value option strings, one where it wasn't
+	 * indicts the property strings or the confidence floor.
+	 */
+	async function tryApplyDesignIntentViaJev(
+		widgetId: string,
+		message: string,
+		classification: DesignIntentClassification | null
+	): Promise<boolean> {
+		const ps = getPanelDisplayState(widgetId);
+		const schema = ps.compositionDesignSchema;
+		if (!schema || !apiBasePath) return false;
+
+		const result = await resolveDesignIntentViaJev({
+			apiBasePath,
+			token: authenticatedClientsToken,
+			message,
+			designSchema: schema,
+			currentValues: ps.liveDesignValues ?? {}
+		});
+		if (!result) {
+			recordDesignIntentJevOutcome({
+				source: 'client_unavailable',
+				acted: false,
+				reason: 'no_response',
+				classification
+			});
+			return false;
+		}
+
+		recordDesignIntentJevOutcome({
+			source: result.source,
+			acted: result.acted,
+			reason: result.reason,
+			classification
+		});
+
+		if (!result.acted || !result.property) {
+			if (debugMode || result.source === 'jev') {
+				console.log('[DesignIntentJev] fall through:', result.reason, result.property ?? '');
+			}
+			return false;
+		}
+
+		const property = collectDesignProperties(schema).find((p) => p.id === result.property);
+		const label = property?.label ?? result.property;
+		applyDesignValuesToPreview(widgetId, { [result.property]: result.value });
+		const card: DesignControlRequest = {
+			summary: `Set ${label} to ${String(result.value)}.`,
+			properties: [
+				{
+					id: result.property,
+					label,
+					controllerType: property?.controllerType ?? '',
+					value: result.value,
+					options: property?.options,
+					min: property?.min,
+					max: property?.max,
+					step: property?.step,
+					helpText: property?.helpText
+				}
+			],
+			// Same attribution as the deterministic path: the card is persisted
+			// with the composition it was authored against (see `toDesignControlRequest`).
+			compositionId: ps.selectedComposition?.id ?? null
+		};
+		getChatMethodsForWidget(widgetId)?.addDesignControlsMessage?.(card.summary, card);
+		return true;
+	}
+
+	/**
+	 * Classify a hand-drawn canvas stroke the Canvas's own geometry engine could
+	 * not decide.
+	 *
+	 * The Canvas measures the stroke and gates out every shape the measurements
+	 * rule out, then asks here only when several shapes remain. The gateway owns
+	 * the JEV decision and its confidence gate; this returns its shape, or null
+	 * (leave the stroke exactly as drawn) when it declines, degrades, or is not
+	 * configured. Null is always a valid answer, so nothing here can block a draw.
+	 */
+	async function handleRecognizeStroke(
+		request: StrokeRecognitionRequest
+	): Promise<StrokeRecognitionResult | null> {
+		const reply = await recognizeStrokeViaJev({
+			apiBasePath,
+			token: authenticatedClientsToken,
+			request
+		});
+		if (debugMode) {
+			console.log(
+				'[CanvasShapeSnap]',
+				`candidates: ${request.candidates.map((candidate) => candidate.shape).join(', ')}`,
+				`→ ${reply?.shape ?? 'as drawn'}`,
+				`(${reply?.source ?? 'client_unavailable'} / ${reply?.reason ?? 'no_response'})`
+			);
+		}
+		return reply;
+	}
+
 	/** Handle property change from PropsEditor — send to widget preview iframe */
 	function handleEditorPropertyChange(event: CustomEvent<{ schema: string; propertyId: string; value: unknown; opacity?: number; itemId?: string }>) {
 		const { schema, propertyId, value, itemId } = event.detail;
@@ -3496,10 +3979,12 @@
 	/** Handle content items reorder/add/delete from PropsEditor */
 	function handleEditorContentItemsChanged(event: CustomEvent<{ items: unknown[] }>) {
 		const incoming = Array.isArray(event.detail.items) ? event.detail.items : [];
-		const schemaItems = compositionContentSchema?.contentItems
-			?? compositionContentSchema?.data?.contentItems
-			?? [];
-		liveContentItems = mergeContentItemsWithSchema(incoming, schemaItems);
+			const schemaItems = compositionContentSchema?.contentItems
+			?? compositionContentSchema?.data?.contentItems;
+		liveContentItems = mergeContentItemsWithSchema(
+			incoming,
+			Array.isArray(schemaItems) ? schemaItems : []
+		);
 		// console.log('[PropsEditor→Preview] Content items changed:', liveContentItems.length, 'items');
 		getWidgetDetailsRef(focusedPanelWidgetId)?.sendMessageToPreview({
 			type: 'widgetic:update',
@@ -4711,8 +5196,7 @@
 				return !cid || cid === targetCanvasId;
 			}) || fromList[0] || null;
 			if (primaryId) {
-				// console.log('[CreatorApp] Healing empty primary_widget_id →', primaryId.substring(0, 8));
-				await persistPrimaryWidgetId(primaryId);
+				console.warn('[CreatorApp] Canvas has no saved primary — showing', primaryId.slice(0, 8), 'without replacing the saved one');
 			}
 		}
 		if (primaryId) {
@@ -8618,11 +9102,22 @@ Requirements:
 					promptImages = imagesToSend;
 					savePromptImagesToSession();
 				}
-			} else if (promptImpliesVisionReference(prompt)) {
-				console.warn(
-					'[WidgetCreator] Codegen proceeding WITHOUT image although prompt references one — widget',
-					generationWidgetId,
-				);
+			} else if (promptImpliesVisionReference(prompt) && !options.forkUserMessage) {
+				const shapeDataUrl =
+					typeof canvasRef?.getWidgetShapeDataUrl === 'function'
+						? canvasRef.getWidgetShapeDataUrl(generationWidgetId)
+						: null;
+				if (typeof shapeDataUrl === 'string' && shapeDataUrl.startsWith('data:image/') && shapeDataUrl.length > 100) {
+					const compressedShape = await compressImageDataUrlForCodegen(shapeDataUrl);
+					if (compressedShape.startsWith('data:image/') && compressedShape.length > 100) {
+						imagesToSend = [compressedShape];
+					}
+				} else {
+					console.warn(
+						'[WidgetCreator] Codegen proceeding WITHOUT image although prompt references one — widget',
+						generationWidgetId,
+					);
+				}
 			}
 			let coderModelForRequest = selectedModelId || defaultModelId;
 			if (imagesToSend?.length || attachmentIdsToSend?.length) {
@@ -8649,7 +9144,7 @@ Requirements:
 						duration: 8000
 					});
 				}
-			} else if (promptImpliesVisionReference(prompt)) {
+			} else if (promptImpliesVisionReference(prompt) && !options.forkUserMessage) {
 				showToast('warning', 'Generare fără imagine', {
 					description:
 						'Request-ul merge fără vision (DeepSeek etc.). Atașează PNG/JPEG în chat înainte de Send.',
@@ -8681,7 +9176,9 @@ Requirements:
 				? undefined
 				: resolvePlannerModelIdForGeneration(prompt, coderModelForRequest);
 			const runtimeLogsForRequest = collectRuntimeLogsForCodegen(generationWidgetId);
-			const response = await agentClient.agentCodeGeneratePost({
+			// The generated client types this call as void and drops the 202 body.
+			// Read the raw JSON so operationId and the intent-gate payload survive.
+			const accepted = await agentClient.agentCodeGeneratePostRaw({
 				generateCodeRequest: {
 					repositoryId: repoId,
 					prompt,
@@ -8694,8 +9191,15 @@ Requirements:
 					compileFixOnly: options.compileFixOnly === true,
 					skipIntentGate: options.skipIntentGate === true,
 					chipIntent: options.chipIntent,
+					brandKit: brandKitForRequest(),
 				} as GenerateCodeRequest
 			});
+			let response: { data?: Record<string, unknown>; error?: string; message?: string } | null = null;
+			try {
+				response = await accepted.raw.json();
+			} catch (parseError) {
+				console.warn('[WidgetCreator] Code generation response was not JSON', parseError);
+			}
 			// console.log('[WidgetCreator] Code generation request sent for widget', generationWidgetId.substring(0, 8), 'with model:', coderModelForRequest, 'planner:', plannerModelIdForRequest || 'none', 'conversationId:', activeConversationId || 'none', 'images:', imagesToSend?.length || 0, 'attachmentIds:', attachmentIdsToSend?.length || 0, 'runtimeLogs:', runtimeLogsForRequest?.length ?? 0);
 			// console.log('Widget Creator: Code generation response:', response);
 
@@ -8749,7 +9253,8 @@ Requirements:
 				return;
 			}
 
-			if (response && (response as { error?: string }).error === 'TOKEN_EXPIRED') {
+			const tokenEnvelope = response as unknown as { error?: string } | undefined;
+			if (tokenEnvelope?.error === 'TOKEN_EXPIRED') {
 				patchCodegenUiState(generationWidgetId, {
 					generateCodeStatus: '❌ Authentication expired. Please login again.',
 					lastGenerationFailed: true,
@@ -8779,9 +9284,9 @@ Requirements:
 				return;
 			}
 
-			const generateData = ((response as { data?: unknown }).data ?? response) as {
+			const generateData = (response?.data ?? response) as {
 				operationId?: string;
-			};
+			} | null;
 			const operationId = generateData?.operationId;
 
 			// The Worker serves rebuilt code at the same preview URL, so the panel
@@ -8864,6 +9369,7 @@ Requirements:
 					clearActiveOperationId();
 					
 					const completedCommitSha = getOperationCommitId(op.metadata);
+					const completedCommitTitle = getOperationCommitTitle(op.metadata);
 					const completedPreviewBuildErr = getOperationPreviewBuildError(op.metadata);
 					const completedCached = getOperationCached(op.metadata);
 					const completedCachedFiles = getOperationCachedFiles(op.metadata);
@@ -8884,6 +9390,11 @@ Requirements:
 
 					if (completedCommitSha && generationWidgetId) {
 						saveCommitIdForWidget(generationWidgetId, completedCommitSha);
+						// The publish path stamps its optimistic row from the publish
+						// response; a generation stamps this turn's draft row from the
+						// operation, so the version menu shows what the turn shipped
+						// without waiting for the history refetch below.
+						stampCodegenTitleIntoPanelHistory(generationWidgetId, completedCommitSha, completedCommitTitle);
 					}
 
 					// Mark pending publish when this widget already has a live version.
@@ -8922,6 +9433,10 @@ Requirements:
 						const alignCommitSha = completedCommitSha;
 						const alignGeneratedVersion = (attempt: number) => {
 							void loadPublishHistoryForPanel(alignWidgetId, { silent: true }).then(() => {
+								// The refetch is authoritative, but a snapshot that raced the
+								// row's title (or an API row still missing it) gets the
+								// operation's label — the guard inside keeps a user rename.
+								stampCodegenTitleIntoPanelHistory(generationWidgetId, completedCommitSha, completedCommitTitle);
 								const versionId = findVersionIdMatchingCommit(alignWidgetId, alignCommitSha);
 								const matchedByCommit = !!alignCommitSha
 									&& !!versionId
@@ -9108,6 +9623,17 @@ Requirements:
 						);
 					}
 
+					// Design-contract violations mean some design controls will silently
+					// do nothing (the property isn't wired, or the widget never applies
+					// design updates). Say which, right where the user is looking — a
+					// control that looks live but is dead is the worst failure mode here.
+					// Served from the operation metadata; the server also embeds it in the
+					// persisted reply, so it survives a reload.
+					const designContractWarning = getOperationDesignContractWarning(op.metadata);
+					if (designContractWarning) {
+						panelChat?.addAssistantMessage(designContractWarning, true);
+					}
+
 					setTimeout(async () => {
 						if (!getWidgetDetailsRef(generationWidgetId)) return;
 						const activePanelRef = getWidgetDetailsRef(generationWidgetId);
@@ -9154,6 +9680,7 @@ Requirements:
 							patchCodegenUiState(generationWidgetId, {
 								generateCodeStatus: `Code generation completed!${commitShort ? ` Commit: ${commitShort}` : ''} Preview ready.`,
 							});
+							void refreshTrialCounter();
 							setTimeout(async () => {
 								await panelChat?.reloadConversationMessages?.();
 								panelChat?.markWidgetHeadAtLatestCommit?.();
@@ -9203,6 +9730,26 @@ Requirements:
 				return;
 			}
 
+			// Handle retired-surface 410 (PLANNER_REMOVED / VM_REMOVED): the server
+			// says this running bundle predates a removal — no retry can fix it.
+			if (isRetiredSurfaceError(error)) {
+				console.warn('Widget Creator: retired surface answered 410', { code: error.code, message: error.message });
+				patchCodegenUiState(generationWidgetId, {
+					generateCodeStatus: '⚠️ This app needs a refresh to continue.',
+					lastGenerationFailed: true,
+					lastGenerationError: error.message,
+				});
+				showToast('warning', 'This app needs a refresh', {
+					description: error.message,
+					duration: 12000,
+					action: {
+						label: 'Reload',
+						onClick: () => window.location.reload()
+					}
+				});
+				return;
+			}
+
 			// Handle rate limiting (429) — too many API requests in the time window
 			if (httpStatus === 429) {
 				console.warn('Widget Creator: Rate limited (429) during code generation');
@@ -9293,7 +9840,8 @@ Requirements:
 		widgetId: string,
 		version: number,
 		artifactUrl?: string | null,
-		commitSha?: string | null
+		commitSha?: string | null,
+		commitTitle?: string | null
 	): void {
 		const jsPath = resolvePublishedJsPath(widgetId, version, artifactUrl);
 		const prevSnap = getPanelState(widgetId);
@@ -9317,13 +9865,36 @@ Requirements:
 				: w
 		);
 
+		// The optimistic row replaces the refetch the publish flow used to wait
+		// for, so it must carry every field the dropdown renders — not just the
+		// sha/artifact pair. The title comes from the publish response (or the
+		// WebSocket payload for cross-tab/background publishes); when the caller
+		// had none, an already-known row for this version keeps its title rather
+		// than being downgraded to untitled (the set-live path re-merges a row the
+		// panel already displayed).
+		const previousRow = prevSnap.publishHistory.find((r) => r.version === version);
+		const titleFromCaller = typeof commitTitle === 'string' && commitTitle.trim() !== ''
+			? commitTitle
+			: null;
+		const titleForEntry = titleFromCaller
+			?? (previousRow?.commitTitle ?? previousRow?.commit_title ?? null);
 		const optimisticHistoryEntry = normalizedCommit
 			? {
 				version,
 				commitSha: normalizedCommit,
 				commit_sha: normalizedCommit,
+				commitTitle: titleForEntry,
+				commit_title: titleForEntry,
 				artifactUrl: artifactUrl ?? jsPath,
 				artifact_url: artifactUrl ?? jsPath,
+				// Draft/Live split and timestamps: publishing this version is what
+				// made it live, and a re-merge must not erase the original dates.
+				publishedAt: previousRow?.publishedAt ?? previousRow?.published_at ?? new Date().toISOString(),
+				published_at: previousRow?.publishedAt ?? previousRow?.published_at ?? new Date().toISOString(),
+				createdAt: previousRow?.createdAt ?? previousRow?.created_at ?? new Date().toISOString(),
+				created_at: previousRow?.createdAt ?? previousRow?.created_at ?? new Date().toISOString(),
+				isPublished: true,
+				is_published: true,
 			}
 			: null;
 		const mergedHistory = optimisticHistoryEntry
@@ -9379,6 +9950,44 @@ Requirements:
 		void loadPublishHistoryForPanel(widgetId, { silent: true });
 	}
 
+	/**
+	 * Stamp the version title a codegen turn shipped onto that turn's history row.
+	 *
+	 * The publish path does this for its optimistic entry (the title rides the
+	 * publish response into `applyPublishSuccessToWidgetState`); a generation
+	 * only refetched the history, so the fresh draft row kept whatever title the
+	 * refetch returned — the operation's own label never reached the panel.
+	 *
+	 * Same discipline as the publish optimistic entry: the row the server already
+	 * wrote keeps its title (a user rename must not be reverted), and only the
+	 * row this turn *created* is stamped. Best-effort and synchronous — the
+	 * authoritative refetch that follows corrects anything this gets wrong.
+	 */
+	function stampCodegenTitleIntoPanelHistory(widgetId: string, commitSha: string | null, commitTitle: string | null): void {
+		if (!commitSha || !commitTitle) return;
+
+		const snap = getPanelState(widgetId);
+		const row = snap.publishHistory.find(
+			(r) => (r.commitSha ?? r.commit_sha) === commitSha && !(r.publishedAt ?? r.published_at)
+		);
+		// The server's recordGeneration wrote this row with the same title; only a
+		// stale snapshot makes the stamp a visible change. Never overwrite an
+		// existing title (a user rename) with the pipeline's wording.
+		const currentTitle = row?.commitTitle ?? row?.commit_title ?? null;
+		if (!row || (currentTitle && currentTitle !== commitTitle)) return;
+
+		const history = snap.publishHistory.map((r) =>
+			r === row
+				? { ...r, commitTitle: commitTitle, commit_title: commitTitle }
+				: r
+		);
+		patchPanelSnapshot(widgetId, { publishHistory: history });
+		shapePublishHistoryByWidgetId = {
+			...shapePublishHistoryByWidgetId,
+			[widgetId]: [...history],
+		};
+	}
+
 	/**
 	 * Publish the current widget: saves first, then triggers the production build job.
 	 * Flow: Save → fetch latest component → POST /canvases/{id}/components/{id}/publish
@@ -9506,10 +10115,11 @@ Requirements:
 			setCrossTabPublishing(false, capturedWidgetId);
 
 			const publishEnvelope = publishData as unknown as {
-				data?: { version?: number; artifactUrl?: string | null; commitSha?: string | null };
+				data?: { version?: number; artifactUrl?: string | null; commitSha?: string | null; commitTitle?: string | null };
 				version?: number;
 				artifactUrl?: string | null;
 				commitSha?: string | null;
+				commitTitle?: string | null;
 			};
 			const version = publishEnvelope?.data?.version || publishEnvelope?.version || 1;
 			const artifactUrl = publishEnvelope?.data?.artifactUrl || publishEnvelope?.artifactUrl || null;
@@ -9518,7 +10128,13 @@ Requirements:
 				?? publishEnvelope?.commitSha
 				?? commitShaForPublish
 				?? null;
-			applyPublishSuccessToWidgetState(capturedWidgetId, version, artifactUrl, commitSha);
+			// The version row's title, returned so the optimistic history entry can
+			// show the real label instead of waiting for the history refetch.
+			const commitTitle =
+				publishEnvelope?.data?.commitTitle
+				?? publishEnvelope?.commitTitle
+				?? null;
+			applyPublishSuccessToWidgetState(capturedWidgetId, version, artifactUrl, commitSha, commitTitle);
 
 			if (!publishOpts.silent) {
 				showToast('success', 'Widget published!', {
@@ -9537,10 +10153,8 @@ Requirements:
 			publishedPanelRef?.invalidatePublishedArtifactCache?.();
 			await publishedPanelRef?.refreshPreview({ withRetry: true });
 
-			if (!publishOpts.silent) {
-				isHistoryOpen = true;
-			}
 			await loadPublishHistory();
+			void refreshTrialCounter();
 
 		} catch (err: any) {
 			console.error('[Publish] Error publishing widget:', err);
@@ -9548,10 +10162,18 @@ Requirements:
 			isPublishing = false;
 			publishingWidgetId = null;
 			setCrossTabPublishing(false, capturedWidgetId);
-			showToast('error', 'Publish failed', {
-				description: normalizeErrorMessage(err) || 'An unexpected error occurred. Please try again.',
-				duration: 8000
-			});
+			const publishErrorText = normalizeErrorMessage(err) || 'An unexpected error occurred. Please try again.';
+			if (isPlanLimitMessage(publishErrorText) && capturedWidgetId) {
+				publishPlanMessageByWidgetId = {
+					...publishPlanMessageByWidgetId,
+					[capturedWidgetId]: publishErrorText,
+				};
+			} else {
+				showToast('error', 'Publish failed', {
+					description: publishErrorText,
+					duration: 8000
+				});
+			}
 		}
 		// isPublishing stays true until widget_publish_status WebSocket event arrives (success or failure)
 	}
@@ -9930,6 +10552,13 @@ Requirements:
 		return typeof raw === 'string' && /^[a-f0-9]{7,40}$/i.test(raw) ? raw : null;
 	}
 
+	/** The version title a completed codegen operation shipped ("Update header styles"), from operation metadata. */
+	function getOperationCommitTitle(metadata?: Record<string, unknown>): string | null {
+		if (!metadata) return null;
+		const raw = metadata.commitTitle ?? metadata.commit_title;
+		return typeof raw === 'string' && raw.trim().length > 0 ? raw.trim() : null;
+	}
+
 	function getOperationPreviewBuildError(metadata?: Record<string, unknown>): string | null {
 		if (!metadata) return null;
 		const raw = metadata.previewBuildError ?? metadata.preview_build_error;
@@ -9937,6 +10566,17 @@ Requirements:
 		return sanitizePreviewBuildError(raw);
 	}
 
+	/**
+	 * The short design-contract warning the codegen service attached to a
+	 * completed operation, naming the design properties that will silently do
+	 * nothing. Null when the contract was clean (or nothing checked it).
+	 */
+	function getOperationDesignContractWarning(metadata?: Record<string, unknown>): string | null {
+		if (!metadata) return null;
+		const raw = metadata.designContractWarning ?? metadata.design_contract_warning;
+		return typeof raw === 'string' && raw.trim().length > 0 ? raw.trim() : null;
+	}
+
 	/** True when the operation completed from the semantic cache (no new generation ran). */
 	function getOperationCached(metadata?: Record<string, unknown>): boolean {
 		return metadata?.cached === true;
@@ -10185,8 +10825,8 @@ Requirements:
 		liveDesignValues: Record<string, unknown>;
 		liveContentValues: Record<string, unknown>;
 		liveContentItems: any[];
-		compositionDesignSchema: any;
-		compositionContentSchema: any;
+		compositionDesignSchema: DesignSchemaView | null;
+		compositionContentSchema: ContentSchemaView | null;
 		compositions: any[];
 		selectedComposition: any;
 		compositionDirty: boolean;
@@ -10809,8 +11449,10 @@ Requirements:
 			return null;
 		}
 
-		// After codegen (unpublished), prefer Worker preview over the Live CDN artifact.
-		if (source === 'preview' || ps.pendingPublishAfterCodegen) {
+		// 'preview' is the explicit post-codegen source. An unpublished commit must
+		// not replace Live: on open the dropdown stays on the published version,
+		// and this URL has to be that same artifact.
+		if (source === 'preview') {
 			if (workerUrl) return workerUrl;
 		}
 
@@ -10838,7 +11480,9 @@ Requirements:
 			if (newestDraft != null) return `v${newestDraft}`;
 			return null;
 		}
-		return liveVersion != null ? `v${liveVersion}` : null;
+		if (liveVersion != null) return `v${liveVersion}`;
+		const newestDraft = getNewestDraftVersionId(widgetId);
+		return newestDraft != null ? `v${newestDraft}` : null;
 	}
 
 	function formatPublishHistoryDate(record: {
@@ -10939,7 +11583,9 @@ Requirements:
 		const ps = getPanelDisplayState(widgetId);
 		const liveVersion =
 			ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(getWidgetById(widgetId));
-		return liveVersion != null ? `v:${liveVersion}` : null;
+		if (liveVersion != null) return `v:${liveVersion}`;
+		const newestDraft = getNewestDraftVersionId(widgetId);
+		return newestDraft != null ? `v:${newestDraft}` : null;
 	}
 
 	function selectVersionInDropdowns(widgetId: string, versionId: string): void {
@@ -11669,7 +12315,7 @@ Requirements:
 			? getWidgetDetailsRef(selectedWidgetId)
 			: null;
 
-	function getWidgetDetailsRef(widgetId?: string | null): any {
+	function getWidgetDetailsRef(widgetId?: string | null): WidgetDetailsInstance | null {
 		const id = widgetId ?? focusedPanelWidgetId ?? selectedWidgetId;
 		if (!id) return null;
 		const instanceKey = panelInstanceKeyByWidgetId[id] ?? id;
@@ -12592,7 +13238,9 @@ $: if ($widgetPublishStatus.timestamp && $widgetPublishStatus.widgetId) {
 			applyPublishSuccessToWidgetState(
 				publishWidgetId,
 				publishedVersion,
-				publishResult.artifactUrl ?? null
+				publishResult.artifactUrl ?? null,
+				publishResult.commitSha ?? null,
+				publishResult.commitTitle ?? null
 			);
 			const publishedName = getWidgetById(publishWidgetId)?.name || 'Widget';
 			showToast('success', `"${publishedName}" published!`, {
@@ -12810,7 +13458,7 @@ async function setLiveVersionForWidget(widgetId: string, version: number) {
 			widgetId,
 			version
 		});
-		const nested = liveRes?.data as { data?: Record<string, unknown>; artifactUrl?: string; artifact_url?: string; commitSha?: string; commit_sha?: string } | undefined;
+		const nested = liveRes?.data as { data?: Record<string, unknown>; artifactUrl?: string; artifact_url?: string; commitSha?: string; commit_sha?: string; commitTitle?: string; commit_title?: string } | undefined;
 		const liveData = nested?.data ?? nested ?? {};
 		const history = getPanelDisplayState(widgetId).publishHistory;
 		const record = history.find((row) => row.version === version);
@@ -12820,7 +13468,12 @@ async function setLiveVersionForWidget(widgetId: string, version: number) {
 		const artifactUrl = (liveData as { artifactUrl?: string; artifact_url?: string }).artifactUrl
 			|| (liveData as { artifact_url?: string }).artifact_url
 			|| record?.artifactUrl || record?.artifact_url || null;
-		applyPublishSuccessToWidgetState(widgetId, version, artifactUrl, commitSha);
+		// The row's current title — set-live re-merges a row the panel already
+		// showed, so the response value keeps the label without a refetch.
+		const commitTitle = (liveData as { commitTitle?: string; commit_title?: string }).commitTitle
+			|| (liveData as { commit_title?: string }).commit_title
+			|| record?.commitTitle || record?.commit_title || null;
+		applyPublishSuccessToWidgetState(widgetId, version, artifactUrl, commitSha, commitTitle);
 		shapePreviewSourceByWidgetId = {
 			...shapePreviewSourceByWidgetId,
 			[widgetId]: `v:${version}`,
@@ -12847,6 +13500,63 @@ async function setLiveVersionForWidget(widgetId: string, version: number) {
 	}
 }
 
+/**
+ * Renames one version's title — the owner's correction of the wording the
+ * pipeline authored. Optimistic on the row; a failure rolls the row back
+ * and says so in a toast.
+ */
+async function renameVersionTitleForWidget(widgetId: string, version: number, title: string) {
+	if (!widgetId || !$userSession?.jwt) return;
+	if (!widgetsClient) {
+		showToast('error', 'Widgets API client is not configured');
+		return;
+	}
+
+	const renameKey = `${widgetId}:${version}`;
+	renamingTitleFor = renameKey;
+
+	// Optimistic: write the trimmed title into the row immediately so the
+	// dropdown does not flicker while the PATCH is in flight.
+	const history = getPanelDisplayState(widgetId).publishHistory;
+	const record = history.find((row) => Number(row.version) === version);
+	const previousTitle = record
+		? (record.commitTitle ?? record.commit_title ?? null)
+		: null;
+	if (record) {
+		record.commitTitle = title === '' ? null : title;
+		record.commit_title = title === '' ? null : title;
+	}
+	panelDisplayRevision += 1;
+
+	try {
+		const res = await widgetsClient.renameWidgetPublishHistoryTitle({
+			widgetId,
+			version,
+			renameWidgetPublishHistoryTitleRequest: { commitTitle: title },
+		});
+		const stored = (res as { data?: { commitTitle?: string | null } }).data?.commitTitle;
+		// The stored value is authoritative (server trims and bounds).
+		if (record) {
+			record.commitTitle = stored ?? null;
+			record.commit_title = stored ?? null;
+		}
+		panelDisplayRevision += 1;
+		showToast('success', stored ? 'Version renamed' : 'Version title cleared');
+	} catch (err) {
+		// Roll the row back; nothing else needs reloading — the write did not land.
+		if (record) {
+			record.commitTitle = previousTitle;
+			record.commit_title = previousTitle;
+		}
+		panelDisplayRevision += 1;
+		showToast('error', 'Could not rename the version', {
+			description: err instanceof ResponseError ? 'The server refused the rename.' : 'Check your connection and try again.',
+		});
+	} finally {
+		renamingTitleFor = null;
+	}
+}
+
 async function setLiveVersion(version: number) {
 	if (!selectedWidgetId) return;
 	await setLiveVersionForWidget(selectedWidgetId, version);
@@ -12962,8 +13672,12 @@ $: if (selectedWidgetId && autoGenDialogCheckedForWidgetId !== selectedWidgetId)
 		}
 		if (isGeneratingCode || confirmGenerateDialogOpen) return;
 		const widgetForDialog = getWidgetById(capturedWidgetId);
+		const panelSnap = getPanelState(capturedWidgetId);
 		const hasRepo = !!normalizeRepositoryId(widgetForDialog);
-		const hasNoCode = !lastCommitId && !lastPublishedVersion;
+		const publishedVersion = panelSnap.lastPublishedVersion ?? resolvePublishedVersionFromWidget(widgetForDialog);
+		const hasNoCode = !panelSnap.lastCommitId
+			&& publishedVersion == null
+			&& (panelSnap.publishHistory?.length ?? 0) === 0;
 		const hasPrompt = codeGenerationPrompt !== DEFAULT_PROMPT || promptImages.length > 0;
 		const hasPreview = widgetDetails?.hasValidPreview() ?? false;
 		if (hasRepo && hasNoCode && !hasPreview && hasPrompt) {
@@ -15014,6 +15728,18 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 
 		<!-- Right: Debug toggle + Auth info (2 lines) + Logout -->
 		<div class="wc-top-bar-right flex items-center gap-3 shrink-0">
+			{#if trialCounter}
+				<span
+					class="wc-trial-counter shrink-0 whitespace-nowrap rounded-md border border-[#314F2F]/20 bg-[#f4f7f4] px-2 py-1 text-[11px] font-medium text-[#314F2F]"
+					title={trialCounter.days == null ? 'Credits left on this account' : 'Free trial: credits left and days left'}
+				>
+					{trialCounter.credits} credits{trialCounter.trialEnded
+						? ' · trial ended'
+						: trialCounter.days == null
+							? ''
+							: ` · ${trialCounter.days} ${trialCounter.days === 1 ? 'day' : 'days'}`}
+				</span>
+			{/if}
 			{#if debugModeAvailable}
 				<HoverTooltip text={debugMode ? 'Debug mode ON — click to disable (hides console tab, widgets panel)' : 'Debug mode OFF — click to enable'}>
 				<button
@@ -15103,6 +15829,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			canvasComponentReady = false;
 		}}
 		onConvertToWidget={handleConvertToWidget}
+		onRecognizeStroke={handleRecognizeStroke}
 		onWidgetImageClick={handleWidgetImageClick}
 		onCanvasDirty={() => emitCreatorSaveState(true)}
 		onWidgetShapeDuplicated={handleWidgetShapeDuplicated}
@@ -15118,8 +15845,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			if (suppressWidgetDetailsClose || isConvertOrDraftPanelOpen()) {
 				// console.log('[CreatorApp] Skip Widget Details close — convert/draft panel is open');
 				return;
-			}
-			const active = canvasRef?.getSelectedObject?.() ?? canvasRef?.selectedObject;
+			}				const active = canvasRef?.getSelectedObject?.();
 			if (active?._isWidgetImage && active?._widgetId) {
 				return;
 			}
@@ -15511,7 +16237,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				{publishWidgetStatus}
 				publishNeedsSaveFirst={publishNeedsSaveFirstForPanel(panelWidgetId)}
 				lastPublishedVersion={isDraftConvertId(panelWidgetId) ? null : (ps.lastPublishedVersion ?? resolvePublishedVersionFromWidget(panelWidget ?? null))}
-				widgetJsPath={ps.selectedWidgetJsPath ?? panelWidget?.jsPath ?? null}
+				widgetJsPath={ps.selectedWidgetJsPath ?? (typeof panelWidget?.jsPath === 'string' ? panelWidget.jsPath : null)}
 				{isGeneratingInOtherTab}
 				{isPublishingInOtherTab}
 				{isSettingLiveVersion}
@@ -15913,7 +16639,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 						<Portal target="wc-live-history-portal-{panelWidgetId}">
 							<button
 								type="button"
-								class="wc-live-history-backdrop fixed inset-0 z-[9998] cursor-default bg-transparent"
+								class="wc-live-history-backdrop fixed left-0 right-0 bottom-0 top-14 z-[9998] cursor-default bg-transparent"
 								aria-label="Close version history"
 								onclick={() => { isHistoryOpen = false; }}
 							></button>
@@ -15937,12 +16663,11 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									{@const rowIsViewing = rowVersion === Number(viewingVersion)}
 									{@const rowIsLive = !rowIsDraft && rowVersion === Number(panelPublishedVersion)}
 									{@const rowDateLabel = formatPublishHistoryDate(record)}
-									{@const publishGate = getPublishGateForPanel(panelWidgetId, rowVersion)}
-									<VersionDropdownRow
-										versionLabel={'v' + rowVersion}
-										commitSha={record.commitSha ?? record.commit_sha ?? null}
-										showCommit={debugMode}
-										dateLabel={rowDateLabel}
+									{@const publishGate = getPublishGateForPanel(panelWidgetId, rowVersion)}										<VersionDropdownRow
+											versionLabel={'v' + rowVersion}
+											commitSha={record.commitSha ?? record.commit_sha ?? null}
+											showCommit={debugMode}
+											dateLabel={rowDateLabel}
 										isLive={rowIsLive}
 										isDraft={rowIsDraft}
 										selected={rowIsViewing}
@@ -16008,10 +16733,47 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								{/if}
 							</div>
 						</div>
+						{#if publishPlanMessageByWidgetId[panelWidgetId]}
+							<div class="publish-plan-notice p-3 bg-red-50 border border-red-200" style="border-radius: 0;">
+								<p class="text-xs text-red-700 whitespace-pre-wrap">{publishPlanMessageByWidgetId[panelWidgetId]}</p>
+								<div class="flex gap-2 mt-3 justify-center">
+									<Button
+										onclick={openUpgradePlans}
+										variant="default"
+										size="sm"
+										class="bg-red-600 hover:bg-red-700 text-white rounded-lg"
+									>
+										Upgrade
+									</Button>
+									<Button
+										onclick={() => {
+											const next = { ...publishPlanMessageByWidgetId };
+											delete next[panelWidgetId];
+											publishPlanMessageByWidgetId = next;
+										}}
+										variant="outline"
+										size="sm"
+										class="border-gray-300 text-gray-600 hover:bg-gray-50 rounded-lg"
+									>
+										Dismiss
+									</Button>
+								</div>
+							</div>
+						{/if}
 						{#if ps.lastGenerationFailed}
 							<div class="p-3 bg-red-50 border border-red-200" style="border-radius: 0;">
 								<p class="text-xs text-red-700 whitespace-pre-wrap">{ps.lastGenerationError}</p>
 								<div class="flex gap-2 mt-3 justify-center">
+									{#if isPlanLimitMessage(ps.lastGenerationError)}
+									<Button
+										onclick={openUpgradePlans}
+										variant="default"
+										size="sm"
+										class="bg-red-600 hover:bg-red-700 text-white rounded-lg"
+									>
+										Upgrade
+									</Button>
+									{:else}
 									<Button
 										onclick={() => {
 											if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
@@ -16026,6 +16788,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									>
 										Retry
 									</Button>
+									{/if}
 									<Button
 										onclick={() => {
 											if (!isPanelFocused) focusWidgetPanel(panelWidgetId);
@@ -16070,9 +16833,50 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 								? `flex: 1 1 auto; min-height: ${CHAT_AUTO_MIN_HEIGHT}px;`
 								: `flex: 0 0 ${chatUserHeight}px; min-height: ${CHAT_MIN_HEIGHT}px; height: ${chatUserHeight}px;`}
 						>
+						<!-- Cast to any below: @widgetic/chat is type-checked against its own
+						     Svelte install, so its Snippet type is nominally distinct from this
+						     package's. renderDesignControls is a real snippet either way. -->
+						{#snippet renderDesignControls(spec)}
+							<!-- `ps` is rebuilt on every panel display revision, so an attached
+							     card re-reads `liveValues` and follows a drag made in the
+							     PropsEditor panel; the card's own edits come back through the
+							     same live state via `onChange`. A persisted card only gets that
+							     live state while its own composition is the one loaded. -->
+							{@const cardAttached = isDesignCardAttached(spec, ps.selectedComposition?.id ?? null)}
+							<DesignQuickEdit
+								{spec}
+								liveValues={cardAttached ? ps.liveDesignValues : undefined}
+								knownPropertyIds={cardAttached ? designPropertyIdsFor(ps.compositionDesignSchema) : undefined}
+								detached={!cardAttached}
+								onChange={(id, value) => applyDesignValuesToPreview(panelWidgetId, { [id]: value })}
+							/>
+						{/snippet}
+						{#snippet generationOptionChecks()}
+							<BrandKitPanel
+								part="checks"
+								showPresetLibraries={debugMode}
+								suspendPickers={!!generatingWidgetIds[panelWidgetId]}
+								bind:brandKitEnabled
+								bind:librariesEnabled
+								bind:libraries={brandKitLibraries}
+								bind:libraryGitUrl
+								bind:libraryFileName
+								bind:libraryUploads
+								bind:fontUploads
+								bind:primary={brandPrimary}
+								bind:secondary={brandSecondary}
+								bind:title={brandTitle}
+								bind:sub={brandSub}
+								bind:fonts={brandFonts}
+								showLanguage={debugMode}
+								bind:language={widgetLanguage}
+							/>
+						{/snippet}
 						<Chat class="code-generation-chat w-full h-full rounded-none border-0"
+							actionBarExtras={generationOptionChecks}
 							style="height: 100%; min-height: {chatUserHeight == null ? CHAT_AUTO_MIN_HEIGHT : CHAT_MIN_HEIGHT}px;"
 							resizeExpandsContainer={true}
+							renderDesignControls={renderDesignControls as any}
 							onMessagesResize={(deltaPx) => handleChatMessagesResize(panelWidgetId, deltaPx)}
 							showLogs={debugMode}
 							showHeader={false}
@@ -16094,6 +16898,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 									// Debug-only surfaces: assistant "Updated N files: ..." summaries
 									// and heuristic code-block auto-detection. Hidden in production.
 									showGenerationSummaries: debugMode,
+									markComplete: false,
 									// Keep false — debug autoCodeDetection mislabels "Code generation failed: …" as JavaScript.
 									autoCodeDetection: false,
 								}
@@ -16111,10 +16916,9 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 							onCompletionToggle={(detail) => handleChatCompletionToggle(panelWidgetId, detail)}
 							onLoadConversations={handleLoadConversations}
 							onLoadMessages={(conversationId) => handleLoadMessages(conversationId, panelWidgetId)}
-							onCreateConversation={handleCreateConversation}
-							onSaveMessage={(conversationId, content, messageType, attachments, suggestions) =>
-								handleSaveMessage(conversationId, content, messageType, attachments, suggestions, panelWidgetId)
-							}
+							onCreateConversation={handleCreateConversation}								onSaveMessage={(conversationId, content, messageType, attachments, suggestions, designControls) =>
+									handleSaveMessage(conversationId, content, messageType, attachments, suggestions, panelWidgetId, designControls)
+								}
 							onRestoreCheckpointBackend={(conversationId, checkpointMessageId) =>
 								handleRestoreCheckpoint(conversationId, checkpointMessageId, panelWidgetId)
 							}