cozyclay 1.10.0 → 2.0.2

package/src/theme.js

@@ -0,0 +1,44 @@
+// Studio colour theme (#570). The choice lives on <html data-theme>, so the
+// shell, its regions and body-level popovers all read the same token set.
+export const THEMES = ["dark", "light"];
+export const THEME_KEY = "cozyclay.theme.v1";
+export const DEFAULT_THEME = "light";
+
+import { useEffect, useState } from "react";
+
+/** The theme on <html data-theme>, following Preferences' live switch. */
+export function useUiTheme() {
+	const [theme, setTheme] = useState(() => globalThis.document?.documentElement.dataset.theme ?? readTheme());
+	useEffect(() => {
+		const onChange = (event) => setTheme(event.detail);
+		globalThis.addEventListener("cozyclay:theme-change", onChange);
+		return () => globalThis.removeEventListener("cozyclay:theme-change", onChange);
+	}, []);
+	return theme;
+}
+
+export function readTheme() {
+	try {
+		const stored = globalThis.localStorage?.getItem(THEME_KEY);
+		return THEMES.includes(stored) ? stored : DEFAULT_THEME;
+	} catch {
+		return DEFAULT_THEME;
+	}
+}
+
+export function applyTheme(theme) {
+	const next = THEMES.includes(theme) ? theme : DEFAULT_THEME;
+	document.documentElement.dataset.theme = next;
+	return next;
+}
+
+export function saveTheme(theme) {
+	const next = applyTheme(theme);
+	try {
+		globalThis.localStorage?.setItem(THEME_KEY, next);
+	} catch (error) {
+		console.warn("[cozyclay] theme not saved:", error?.name ?? error);
+	}
+	globalThis.dispatchEvent?.(new CustomEvent("cozyclay:theme-change", { detail: next }));
+	return next;
+}

package/src/timeline-extent.js

@@ -37,3 +37,19 @@ export function timelineContentExtent(
 		? authoredExtent
 		: Number.isFinite(extraFrames) ? extraFrames : 0;
 }
+
+/**
+ * Return the frame count the shared timeline shows for a content `extent`.
+ *
+ * It never ends under an authored shot: a shot outside the timeline is an
+ * invalid scene for the Studio agent and for playback, so the count is at
+ * least every shot's inclusive `endFrame + 1`. A zero extent keeps
+ * `currentCount` (the existing authored duration), raised only by a shot.
+ */
+export function timelineSpan(extent, shots = [], currentCount = 0) {
+	const shotEnd = shots.reduce(
+		(max, shot) => Math.max(max, Number.isFinite(shot?.endFrame) ? shot.endFrame + 1 : 0),
+		0,
+	);
+	return Math.max(extent > 0 ? extent : currentCount, shotEnd);
+}

package/src/timeline-fps.js

@@ -0,0 +1,13 @@
+// The timeline clock, on its own so the agent sidecar (bin/agent) can read it
+// without importing scenes.js, whose scene-object and motion-trail imports pull
+// in `three` — a devDependency the npm package does not ship
+// (test/verify-package-agent-imports.mjs).
+
+/** v3 and older authored every frame number on ARDY's 20 fps clock; v4 reads
+ * them on the 24 fps production clock. The numbers are MULTIPLIED, never
+ * reinterpreted: a waypoint at frame 40 meant 2.0 s and must still mean 2.0 s,
+ * which is frame 48 — reinterpreting it would silently speed the scene up. */
+export const LEGACY_FRAME_FPS = 20;
+export const TIMELINE_FRAME_FPS = 24;
+export const toTimelineFrame = (frame) =>
+	Math.round((frame * TIMELINE_FRAME_FPS) / LEGACY_FRAME_FPS);

package/src/trail-key-conflicts.js

@@ -0,0 +1,39 @@
+const CHAIN_BY_EFFECTOR = Object.freeze({
+	LeftHand: "leftHand",
+	RightHand: "rightHand",
+	LeftFoot: "leftFoot",
+	RightFoot: "rightFoot",
+});
+const EFFECTOR_BY_CHAIN = Object.freeze({
+	leftHand: "LeftHand",
+	rightHand: "RightHand",
+	leftFoot: "LeftFoot",
+	rightFoot: "RightFoot",
+});
+
+function trackIds(track) {
+	const id = typeof track === "string" ? track : track?.id ?? track?.joint ?? track?.effector;
+	const chain = typeof track === "object" ? track?.chain : null;
+	return new Set([id, chain, CHAIN_BY_EFFECTOR[id], EFFECTOR_BY_CHAIN[id]].filter(Boolean));
+}
+
+function entryFor(entries, id) {
+	return typeof entries?.get === "function" ? entries.get(id) : entries?.[id];
+}
+
+/** Return absolute IK-key frames that can override a trail edit. */
+export function findAbsoluteIkKeyConflicts({ keys, track, startFrame, endFrame }) {
+	const ids = trackIds(track);
+	const frames = [];
+	for (const [frame, entries] of keys ?? []) {
+		if (frame < startFrame || frame >= endFrame) continue;
+		for (const id of ids) {
+			const key = entryFor(entries, id);
+			if (key && key.baseQ == null) {
+				frames.push(frame);
+				break;
+			}
+		}
+	}
+	return [...new Set(frames)].sort((a, b) => a - b);
+}

package/src/trail-pick.js

@@ -0,0 +1,59 @@
+/** Pure picking for motion-trail pointer rays. */
+
+const FRAME_PENALTY = 0.001;
+const TIE_DISTANCE = 0.01;
+const MIN_FRAME_WINDOW = 12;
+
+/** Pick the trail track/frame intended by a ray near the current playhead. */
+export function pickTrailPoint({
+	tracks,
+	playheadFrame,
+	falloffFrames,
+	rayOrigin,
+	rayDirection,
+	maxDistance,
+}) {
+	if (!Array.isArray(tracks) || !rayOrigin || !rayDirection) return null;
+	const directionLength = Math.hypot(rayDirection.x, rayDirection.y, rayDirection.z);
+	if (!Number.isFinite(directionLength) || directionLength === 0) return null;
+	const dx = rayDirection.x / directionLength;
+	const dy = rayDirection.y / directionLength;
+	const dz = rayDirection.z / directionLength;
+	const center = Number.isFinite(playheadFrame) ? playheadFrame : 0;
+	const radius = Math.max(2 * (Number.isFinite(falloffFrames) ? falloffFrames : 0), MIN_FRAME_WINDOW);
+	const limit = Number.isFinite(maxDistance) ? maxDistance : 0;
+	let best = null;
+
+	for (const track of tracks) {
+		const points = track?.flat;
+		if (!track?.id || !points || points.length < 3) continue;
+		const firstFrame = Math.max(0, Math.ceil(center - radius));
+		const lastFrame = Math.min(Math.floor(points.length / 3) - 1, Math.floor(center + radius));
+		for (let frame = firstFrame; frame <= lastFrame; frame += 1) {
+			const offset = frame * 3;
+			const px = points[offset] - rayOrigin.x;
+			const py = points[offset + 1] - rayOrigin.y;
+			const pz = points[offset + 2] - rayOrigin.z;
+			const depth = px * dx + py * dy + pz * dz;
+			if (depth < 0) continue;
+			const ox = px - depth * dx;
+			const oy = py - depth * dy;
+			const oz = pz - depth * dz;
+			const distance = Math.hypot(ox, oy, oz);
+			if (distance > limit) continue;
+			const score = distance + Math.abs(frame - center) * FRAME_PENALTY;
+			const scoreDelta = score - (best?.score ?? Infinity);
+			if (
+				!best
+				|| scoreDelta < -TIE_DISTANCE
+				|| (Math.abs(scoreDelta) <= TIE_DISTANCE && (
+					depth < best.depth
+					|| (depth === best.depth && score < best.score)
+				))
+			) {
+				best = { track: track.id, grabFrame: frame, score, depth };
+			}
+		}
+	}
+	return best ? { track: best.track, grabFrame: best.grabFrame } : null;
+}

package/src/ui.jsx

@@ -247,7 +247,7 @@ export function Slider({ label, min, max, step, value, unit = "", onChange, comp
 	);
 	if (compact) {
 		return (
-			<div className="cslider">
+			<div className="cslider v2-details-compact-slider">
 				<div className={"cslider-head" + (softMax ? " scrub" : "")} {...scrubProps}>
 					<span>{label}</span>
 					<span className="val">
@@ -260,8 +260,8 @@ export function Slider({ label, min, max, step, value, unit = "", onChange, comp
 		);
 	}
 	return (
-		<div className="row">
-			<span>{label}</span>
+		<div className="row v2-details-row">
+			<span className="v2-details-row-label">{label}</span>
 			{input}
 			<span className="val">
 				{text}
@@ -273,7 +273,7 @@ export function Slider({ label, min, max, step, value, unit = "", onChange, comp
 
 export function Field({ label, children }) {
 	return (
-		<div className="field">
+		<div className="field v2-details-field">
 			<label>{label}</label>
 			{children}
 		</div>
@@ -460,13 +460,13 @@ export function NumberField({ label, value, step, precision = 2, scrubRange, onC
 
 	return (
 		<span
-			className={`number-field${focused ? " editing" : ""}`}
+			className={`number-field v2-details-number-field${focused ? " editing" : ""}`}
 			title={title}
 			onPointerDown={onFieldPointerDown}
 			onPointerUp={endFieldDrag}
 			onPointerCancel={endFieldDrag}
 		>
-			<span className="axis">{label}</span>
+			<span className="axis" data-axis={label}>{label}</span>
 			<input
 				ref={inputRef}
 				type="text"
@@ -485,8 +485,8 @@ export function NumberField({ label, value, step, precision = 2, scrubRange, onC
 // per axis. `fields` entries are `{ axis, value, step, precision, onChange }`.
 export function Vector3Row({ label, fields }) {
 	return (
-		<div className="vec3-row">
-			<span className="vec3-label">{label}</span>
+		<div className="vec3-row v2-details-transform-row">
+			<span className="vec3-label v2-details-transform-label">{label}</span>
 			{fields.map((field) => (
 				<NumberField
 					key={field.axis}

package/src/use-case-question.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+
+// Closed choices only (analytics USE_CASE_VALUES / TEAM_VALUES): no free text
+// ever leaves the browser from this card.
+const USE_CASES = Object.freeze([
+	["animation", "Animation", "애니메이션"],
+	["film", "Film / drama", "영화·드라마"],
+	["game", "Game", "게임"],
+	["ad_mv", "Ad / music video", "광고·뮤비"],
+	["personal", "Personal project", "개인 작업"],
+	["other", "Something else", "기타"],
+]);
+const TEAMS = Object.freeze([
+	["team", "With a team or company", "팀·회사에서"],
+	["solo", "On my own", "혼자"],
+]);
+
+/**
+ * One optional question after the first successful export (#466). Two taps:
+ * what the export is for, then team or solo. Closing it at any point counts as
+ * a skip, and the card never comes back on this browser profile.
+ */
+export default function UseCaseQuestion({ open, isKo, onAnswer }) {
+	const [useCase, setUseCase] = useState(null);
+	const label = (en, ko) => (isKo ? ko : en);
+	useEffect(() => {
+		if (!open) setUseCase(null);
+	}, [open]);
+	if (!open) return null;
+	const close = () => onAnswer(useCase ?? "skip", "skip");
+	return (
+		<section
+			className="use-case-ask"
+			role="dialog"
+			aria-modal="false"
+			aria-labelledby="use-case-ask-title"
+			onKeyDown={(event) => {
+				if (event.key === "Escape") close();
+			}}
+		>
+			<div className="use-case-ask-head">
+				<strong id="use-case-ask-title">{label("Quick question (optional)", "짧은 질문 (선택)")}</strong>
+				<button type="button" className="use-case-ask-close" aria-label={label("Close", "닫기")} onClick={close}>
+					×
+				</button>
+			</div>
+			<p className="use-case-ask-prompt">
+				{useCase
+					? label("Who are you making it with?", "누구와 작업하나요?")
+					: label("What are you making with CozyClay?", "CozyClay로 뭘 만들고 있나요?")}
+			</p>
+			<div className="use-case-ask-choices" role="group" aria-label={useCase ? label("Team or solo", "팀 또는 혼자") : label("Use case", "용도")}>
+				{(useCase ? TEAMS : USE_CASES).map(([value, en, ko]) => (
+					<button
+						key={value}
+						type="button"
+						onClick={() => (useCase ? onAnswer(useCase, value) : setUseCase(value))}
+					>
+						{label(en, ko)}
+					</button>
+				))}
+			</div>
+			<p className="use-case-ask-note">{label("Anonymous. Only the choice is sent.", "익명이에요. 고른 항목만 전송돼요.")}</p>
+		</section>
+	);
+}

package/src/workflow/AgentPanel.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { FiAlertTriangle, FiCheck, FiChevronRight, FiClock, FiDownload, FiImage, FiMoreHorizontal, FiPaperclip, FiPlus, FiRotateCw, FiX } from "react-icons/fi";
+import { FiAlertTriangle, FiArrowUp, FiCheck, FiChevronRight, FiClock, FiDownload, FiFilm, FiImage, FiMoreHorizontal, FiPaperclip, FiPlus, FiRotateCw, FiX } from "react-icons/fi";
 import {
 	ATTACHMENT_FAILED_NOTICE,
 	ATTACHMENT_LIMIT_NOTICE,
@@ -132,10 +132,12 @@ function JobCard({ job, onStop, onAccept }) {
 	const phase = job.state === "installed" ? null : job.phase;
 	const unverified = job.state === "review_required" || job.verification?.status === "unverified";
 	const limitations = job.verification?.limitations ?? [];
+	// An unverified take is installed all the same; the label says both.
+	const label = job.state === "installed" && unverified ? "Installed with warnings" : JOB_STATE_COPY[job.state] || job.state;
 	return <div className="agent-card agent-job-card" data-job-id={job.jobId} data-job-state={job.state}>
 		<div className="agent-job-head">
 			<StatusDot tone={jobStateTone(job.state)} title={job.state} />
-			<span className="agent-job-label">{JOB_STATE_COPY[job.state] || job.state}</span>
+			<span className="agent-job-label">{label}</span>
 			{unverified && <span className="agent-job-badge">Unverified</span>}
 			{percent !== null && <span className="agent-job-progress">{formatJobProgress(job.progress)}</span>}
 		</div>
@@ -163,15 +165,20 @@ function ReceiptCard({ item }) {
 	const unverified = receipt.verification?.status === "unverified";
 	const limitations = receipt.verification?.limitations ?? [];
 	const warnings = receipt.warnings ?? [];
+	const installedWithWarnings = receipt.status === "installed" && unverified;
 	return <div className="agent-card agent-receipt-card" data-receipt-id={item.receiptId} data-receipt-status={receipt.status}>
 		<div className="agent-receipt-head">
 			<StatusDot tone={unverified ? "warn" : "ok"} title={receipt.status} />
+			{installedWithWarnings && <span className="agent-job-label">Installed with warnings</span>}
 			<span className="agent-receipt-summary">{summary}</span>
 		</div>
 		{(warnings.length > 0 || limitations.length > 0) && <ul className="agent-receipt-notes">
 			{warnings.map((warning) => <li key={warning.code}>{warning.message || warning.code}</li>)}
 			{limitations.map((limit) => <li key={limit}>{limit}</li>)}
 		</ul>}
+		{/* The pane has no direct Undo into the Studio editor; it names the two
+		    paths that do exist rather than drawing a button it cannot honour. */}
+		{installedWithWarnings && <p className="agent-job-note">Undo with Cmd+Z or ask the agent.</p>}
 	</div>;
 }
 
@@ -268,7 +275,7 @@ export default function AgentPanel({
 	surface = "workflow",
 	buildContext = null,
 	onImageAction = null,
-	onFalAction = null,
+	onI2vAction = null,
 	onReceipt = null,
 }) {
 	// What this host shows around the shared conversation: labels, chips, the
@@ -346,8 +353,8 @@ export default function AgentPanel({
 	buildContextRef.current = buildContext;
 	const imageActionRef = useRef(onImageAction);
 	imageActionRef.current = onImageAction;
-	const falActionRef = useRef(onFalAction);
-	falActionRef.current = onFalAction;
+	const i2vActionRef = useRef(onI2vAction);
+	i2vActionRef.current = onI2vAction;
 	const receiptRef = useRef(onReceipt);
 	receiptRef.current = onReceipt;
 
@@ -375,10 +382,12 @@ export default function AgentPanel({
 				const payload = await transport.loadSession(stored);
 				if (!Array.isArray(payload?.transcript)) throw new Error("missing transcript");
 				if (!cancelled) store.restore(payload.transcript, payload.sessionId || stored);
-			} catch {
+			} catch (error) {
 				if (!cancelled) {
 					store.newSession();
-					setRestoreNotice("Previous conversation could not be restored");
+					// A session id with no record behind it (the pane opened, nothing
+					// was ever sent) is nothing to restore, not a failure.
+					if (error?.status !== 404) setRestoreNotice("Previous conversation could not be restored");
 				}
 			} finally {
 				if (!cancelled) setRestoreReady(true);
@@ -814,9 +823,9 @@ export default function AgentPanel({
 			<StatusDot tone={statusTone} title={panelState} />
 			<h2 className="agent-title">Agent</h2>
 			<span className="agent-header-spacer" />
-			<button type="button" className="agent-ghost-button agent-new" onClick={newSession}><FiPlus size={11} /> New</button>
+			<button type="button" className="agent-icon-button agent-new" aria-label="New conversation" title="New conversation" onClick={newSession}><FiPlus size={14} aria-hidden="true" /></button>
 			{presentation.history && <span className="agent-history-wrap">
-				<button type="button" className="agent-ghost-button agent-history" aria-haspopup="listbox" aria-expanded={surface === "studio" ? historyOpen : undefined} onClick={surface === "studio" ? openHistory : undefined} disabled={surface !== "studio"}>History</button>
+				<button type="button" className="agent-icon-button agent-history" aria-label="History" title="History" aria-haspopup="listbox" aria-expanded={surface === "studio" ? historyOpen : undefined} onClick={surface === "studio" ? openHistory : undefined} disabled={surface !== "studio"}><FiClock size={13} aria-hidden="true" /></button>
 				{surface === "studio" && historyOpen && <div className="agent-history-popover" role="listbox" aria-label="Agent history">
 					{historySessions.length ? historySessions.map((entry) => <button type="button" role="option" className="agent-history-item" key={entry.sessionId} onClick={() => restoreHistorySession(entry.sessionId)}>
 						<span className="agent-history-time">{relativeTime(entry.updatedAt)}</span>
@@ -827,6 +836,13 @@ export default function AgentPanel({
 			<span className="agent-overflow">
 				<button type="button" className="agent-icon-button agent-overflow-toggle" aria-haspopup="menu" aria-expanded={menuOpen} aria-label="More agent actions" onClick={() => setMenuOpen((value) => !value)}><FiMoreHorizontal size={13} /></button>
 				{menuOpen && <div className="agent-menu" role="menu">
+					{/* Who the session is lives with the actions that change it, not
+					    as a standing strip over the conversation. */}
+					{account?.signedIn && <div className="agent-account" role="presentation">
+						<span className="agent-account-email">{account.email}</span>
+						<span className="agent-plan-badge">{quota?.plan || account.plan || "Free"}</span>
+						{resetLabel && <span className="agent-account-reset">resets in {resetLabel}</span>}
+					</div>}
 					<button type="button" role="menuitem" onClick={clearContext}>Clear context</button>
 					<button type="button" role="menuitem" className="agent-menu-keys" aria-expanded={keysOpen} onClick={toggleProviderKeys}>Provider keys…</button>
 					<button type="button" role="menuitem" onClick={signOut}>Sign out</button>
@@ -838,12 +854,6 @@ export default function AgentPanel({
 		{restoreNotice && <div className="agent-toast" role="status">{restoreNotice}</div>}
 		{steerNotice && <div className="agent-toast alert agent-steer-notice" role="alert">{steerNotice}</div>}
 
-		{account?.signedIn && <div className="agent-account">
-			<span className="agent-account-email">{account.email}</span>
-			<span className="agent-plan-badge">{quota?.plan || account.plan || "Free"}</span>
-			{resetLabel && <span className="agent-account-reset">resets in {resetLabel}</span>}
-		</div>}
-
 		{/* An inline section, not a modal: the panel stays the one place the
 		    conversation and the credentials it runs on are managed. */}
 		{keysOpen && <section className="agent-keys" aria-label="Provider keys" data-agent-keys="true">
@@ -923,63 +933,68 @@ export default function AgentPanel({
 				</li>)}
 			</ul>}
 			{attachNotice && <p className="agent-attachment-notice" role="status">{attachNotice}</p>}
-			<textarea
-				ref={composerRef}
-				className="agent-input"
-				aria-label="Message the agent"
-				placeholder={panelState === "rate-limited" ? "Composer is paused" : model ? presentation.composerPlaceholder : "Waiting for the model list…"}
-				value={draft}
-				disabled={composerDisabled}
-				onChange={(event) => store.setDraft(event.target.value)}
-				onKeyDown={onComposerKeyDown}
-				onPaste={onComposerPaste}
-				onDragOver={onComposerDragOver}
-				onDrop={onComposerDrop}
-			/>
-			<div className="agent-composer-controls agent-composer-picks">
-				{/* Five providers in one dropdown: grouped by the provider that serves
-				    them, and a provider without a credential still lists its models —
-				    unpickable, and saying what they are waiting for. */}
-				<select className="agent-model-select" aria-label="Model" value={model} disabled={!models.length} onChange={(event) => chooseModel(event.target.value)}>
-					{modelProviders.length
-						? modelProviders.map((provider) => <optgroup key={provider.id} label={provider.label}>
-							{provider.models.length
-								? provider.models.map((entry) => <option key={entry.key} value={entry.key} disabled={!provider.signedIn}>{provider.signedIn ? entry.label : `${entry.label} — add key`}</option>)
-								: <option value={`${provider.id}/`} disabled>{provider.signedIn ? "No models" : "No models — add key"}</option>}
-						</optgroup>)
-						: models.length
-							? models.map((entry) => <option key={entry.id} value={entry.id}>{entry.label}</option>)
-							: <option value="">{modelsState === "failed" ? "No model available" : "Loading models…"}</option>}
-				</select>
-				{efforts.length > 0 && (
-					<select className="agent-model-select agent-effort-select" aria-label="Reasoning effort" title="Reasoning effort" value={effort ?? efforts[0]} onChange={(event) => setEffort(event.target.value)}>
-						{efforts.map((value, index) => <option key={value} value={value}>{index === 0 ? `${value} · default` : value}</option>)}
+			{/* One field: the message, and under it on the same surface the
+			    frame toggle, the model and effort picks, and Send. */}
+			<div className="agent-field">
+				<textarea
+					ref={composerRef}
+					className="agent-input"
+					aria-label="Message the agent"
+					placeholder={panelState === "rate-limited" ? "Composer is paused" : model ? presentation.composerPlaceholder : "Waiting for the model list…"}
+					value={draft}
+					disabled={composerDisabled}
+					onChange={(event) => store.setDraft(event.target.value)}
+					onKeyDown={onComposerKeyDown}
+					onPaste={onComposerPaste}
+					onDragOver={onComposerDragOver}
+					onDrop={onComposerDrop}
+				/>
+				<div className="agent-composer-controls">
+					<button type="button" className="agent-attach-chip" aria-pressed={attachFrame} aria-label="Attach current frame" title="Attach current frame" onClick={() => setAttachFrame((value) => !value)}>
+						{attachFrame ? <span className="agent-attach-thumb" aria-hidden="true" /> : <FiPaperclip size={13} aria-hidden="true" />}
+					</button>
+					{/* Five providers in one dropdown: grouped by the provider that serves
+					    them, and a provider without a credential still lists its models —
+					    unpickable, and saying what they are waiting for. */}
+					<select className="agent-model-select" aria-label="Model" title="Model" value={model} disabled={!models.length} onChange={(event) => chooseModel(event.target.value)}>
+						{modelProviders.length
+							? modelProviders.map((provider) => <optgroup key={provider.id} label={provider.label}>
+								{provider.models.length
+									? provider.models.map((entry) => <option key={entry.key} value={entry.key} disabled={!provider.signedIn}>{provider.signedIn ? entry.label : `${entry.label} — add key`}</option>)
+									: <option value={`${provider.id}/`} disabled>{provider.signedIn ? "No models" : "No models — add key"}</option>}
+							</optgroup>)
+							: models.length
+								? models.map((entry) => <option key={entry.id} value={entry.id}>{entry.label}</option>)
+								: <option value="">{modelsState === "failed" ? "No model available" : "Loading models…"}</option>}
 					</select>
-				)}
-			</div>
-			<div className="agent-composer-controls">
-				<button type="button" className="agent-attach-chip" aria-pressed={attachFrame} onClick={() => setAttachFrame((value) => !value)}>
-					{attachFrame ? <span className="agent-attach-thumb" aria-hidden="true" /> : <FiPaperclip size={11} aria-hidden="true" />}
-					Attach current frame
-				</button>
-				{surface === "studio" && falActionRef.current && <button
-					type="button"
-					className="agent-attach-chip agent-fal-action"
-					data-testid="fal-agent-action"
-					disabled={composerDisabled || !draft.trim() || streaming}
-					onClick={() => { const instruction = draft.trim(); store.setDraft(""); falActionRef.current?.(instruction); }}
-				>
-					Generate motion
-				</button>}
-				<span className="agent-composer-spacer" aria-hidden="true" />
-				{/* While a turn runs, Stop is still the way out of it; on a surface
-				    that can be steered, Send becomes the way INTO it. */}
-				{streaming
-					? <>
-						<button type="button" className="agent-send stop agent-stop" onClick={stopTurn}>Stop</button>
-						{presentation.steer && <button type="button" className="agent-send agent-steer" disabled={!draft.trim()} onClick={() => steerTurn(draft)}>Steer</button>}
-					</>
-					: <button type="button" className="agent-send" disabled={composerDisabled || !draft.trim()} onClick={() => runTurn(draft)}>Send</button>}
+					{efforts.length > 0 && (
+						<select className="agent-model-select agent-effort-select" aria-label="Reasoning effort" title="Reasoning effort" value={effort ?? efforts[0]} onChange={(event) => setEffort(event.target.value)}>
+							{/* The closed select shows only the word; "default" rides in the
+							    option's tooltip so the composer row stays one line. */}
+							{efforts.map((value, index) => <option key={value} value={value} title={index === 0 ? "Default for this model" : undefined}>{value}</option>)}
+						</select>
+					)}
+					<span className="agent-composer-spacer" aria-hidden="true" />
+					{surface === "studio" && i2vActionRef.current && <button
+						type="button"
+						className="agent-attach-chip agent-i2v-action"
+						data-testid="i2v-agent-action"
+						aria-label="Generate motion"
+						title="Generate motion from this message"
+						disabled={composerDisabled || !draft.trim() || streaming}
+						onClick={() => { const instruction = draft.trim(); store.setDraft(""); i2vActionRef.current?.(instruction); }}
+					>
+						<FiFilm size={13} aria-hidden="true" />
+					</button>}
+					{/* While a turn runs, Stop is still the way out of it; on a surface
+					    that can be steered, Send becomes the way INTO it. */}
+					{streaming
+						? <>
+							<button type="button" className="agent-send stop agent-stop" onClick={stopTurn}>Stop</button>
+							{presentation.steer && <button type="button" className="agent-send agent-steer" disabled={!draft.trim()} onClick={() => steerTurn(draft)}>Steer</button>}
+						</>
+						: <button type="button" className="agent-send" aria-label="Send" title="Send (Enter)" disabled={composerDisabled || !draft.trim()} onClick={() => runTurn(draft)}><FiArrowUp size={14} aria-hidden="true" /></button>}
+				</div>
 			</div>
 		</div>}
 		{/* The hint exists to warn about image spend; a surface that cannot

package/src/workflow/agent-client.js

@@ -148,7 +148,7 @@ const CANVAS_TOOL_LABELS = {
 	add_reference_node: "Add reference image",
 };
 
-/** The nine Studio families, named for what they do to the scene. The Studio
+/** The Studio families, named for what they do to the scene. The Studio
  * is bilingual, so these go through ko() like every other Studio label. */
 const STUDIO_TOOL_LABELS = {
 	inspect_studio: ko("Read the scene", "\uC7A5\uBA74 \uC77D\uAE30"),
@@ -160,6 +160,7 @@ const STUDIO_TOOL_LABELS = {
 	generate_motion: ko("Generate motion", "\uBAA8\uC158 \uC0DD\uC131"),
 	verify_result: ko("Verify the result", "\uACB0\uACFC \uAC80\uC99D"),
 	undo_edit: ko("Undo an edit", "\uD3B8\uC9D1 \uB418\uB3CC\uB9AC\uAE30"),
+	run_action: ko("Run an editor action", "\uD3B8\uC9D1\uAE30 \uB3D9\uC791 \uC2E4\uD589"),
 };
 
 /**
@@ -1349,13 +1350,22 @@ export function createAgentChatStore({
 	const restore = (transcript, sessionId = state.sessionId) => {
 		seenReceipts.clear();
 		settledActions.clear();
+		const restoredReceiptIds = new Set();
 		const restored = (Array.isArray(transcript) ? transcript : []).flatMap((item) => {
 			if (item?.kind === "user" || item?.kind === "assistant") {
 				const attachments = Array.isArray(item.attachments) ? item.attachments.filter((entry) => typeof entry?.dataUrl === "string") : [];
 				return [{ kind: item.kind, id: newId(), text: String(item.text ?? ""), ...(attachments.length ? { attachments } : {}) }];
 			}
 			if (item?.kind === "tool") return [{ kind: "tool", id: newId(), callId: newId(), name: item.name || "tool", label: item.label, ok: item.ok, elapsedMs: item.elapsedMs, status: item.ok === false ? "failed" : "done" }];
-			if (item?.kind === "receipt") return [{ kind: "receipt", id: `receipt:${item.receiptId || newId()}`, receiptId: item.receiptId, summary: item.summary || "Receipt", receipt: { status: "applied", warnings: [], verification: { status: "verified" } } }];
+			if (item?.kind === "receipt") {
+				if (item.receiptId && restoredReceiptIds.has(item.receiptId)) return [];
+				if (item.receiptId) {
+					restoredReceiptIds.add(item.receiptId);
+					seenReceipts.add(item.receiptId);
+				}
+				return [{ kind: "receipt", id: `receipt:${item.receiptId || newId()}`, receiptId: item.receiptId, summary: item.summary || "Receipt", receipt: { status: "applied", warnings: [], verification: { status: "verified" } } }];
+			}
+			if (item?.kind === "failure") return [{ kind: "failure", id: newId(), failure: { code: item.code || "upstream", message: String(item.message || "The turn failed."), recovery: { action: "retry", retryAllowed: true } } }];
 			return [];
 		});
 		const lastPrompt = [...restored].reverse().find((item) => item.kind === "user")?.text || "";