cozyclay 2.1.1 → 3.0.0

package/src/workflow/AgentProgressCard.jsx

@@ -0,0 +1,107 @@
+// The live progress card in the agent panel (agent-progress.js). While the agent works on motion it shows what
+// the agent actually produced so far: how many drafts it compiled and their QA trend, the latest draft's goals
+// (met or not, value against need) and heaviest issues, whether that draft is installed, and the images the
+// agent asked to see (click to enlarge, over the whole window). Nothing here is invented progress. A new turn
+// starts it over.
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { FiCheck, FiX } from "react-icons/fi";
+import { clearProgress, draftsOf, latestDraft, progressSheets, progressVersion, subscribeProgress } from "../agent-progress.js";
+import { ko } from "../locale.js";
+import { goalRows, issueRows, trendPoints, turnCount } from "./agent-progress-view.js";
+import "./agent-progress-card.css";
+
+const W = 220, H = 40;
+
+function Trend({ totals }) {
+	const { points, first, last } = trendPoints(totals, { width: W, height: H });
+	if (!points.length) return null;
+	const [lx, ly] = points[points.length - 1];
+	const label = ko(`QA issues by draft: ${totals.join(", ")}`, `초안별 QA 문제 수: ${totals.join(", ")}`);
+	return <div className="agent-progress-trend">
+		<svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={label} preserveAspectRatio="none">
+			<line className="base" x1={4} y1={H - 4} x2={W - 4} y2={H - 4} />
+			{points.length > 1 && <polyline className="line" points={points.map(p => p.join(",")).join(" ")} />}
+			{points.slice(0, -1).map(([x, y], i) => <circle key={i} className="dot" cx={x} cy={y} r={1.8} />)}
+			<circle className={`end ${last === 0 ? "ok" : "issue"}`} cx={lx} cy={ly} r={3.4} />
+		</svg>
+		<span className="agent-progress-trend-text">{totals.length > 1 ? `${first} → ${last}` : `${last}`}</span>
+	</div>;
+}
+
+// The panel's own lightbox stays inside the panel; a contact sheet needs the window.
+function SheetViewer({ sheet, onClose }) {
+	useEffect(() => {
+		const onKey = event => { if (event.key === "Escape") onClose(); };
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onClose]);
+	return createPortal(<button type="button" className="agent-progress-viewer" aria-label={ko("Close image", "이미지 닫기")} onClick={onClose}>
+		<img src={sheet.dataUrl} alt={sheet.caption || ko("Image the agent checked", "에이전트가 확인한 이미지")} />
+		{sheet.caption && <span className="agent-progress-viewer-caption">{sheet.caption}</span>}
+	</button>, document.body);
+}
+
+/** `since`: when the latest turn started (null: no turn yet). Drafts and images from before it are not this turn's
+ * work, such as the take the camera tutorial compiles at startup. `live`: that turn is still running. */
+export function AgentProgressCard({ items, since = null, live = false }) {
+	useSyncExternalStore(subscribeProgress, progressVersion);
+	const [open, setOpen] = useState(null);
+	// The goal and issue lists fold to one line each: the panel is short and the live steps sit below the card.
+	const [shown, setShown] = useState({});
+	const toggle = key => setShown(now => ({ ...now, [key]: !now[key] }));
+	// a new turn (not a steer of the running one) starts the card over
+	const turns = turnCount(items), seen = useRef(turns);
+	useEffect(() => {
+		if (turns > seen.current) clearProgress();
+		seen.current = turns;
+	}, [turns]);
+	const ours = record => since !== null && record.at >= since;
+	const newest = latestDraft(), latest = newest && ours(newest) ? newest : null, sheets = progressSheets().filter(ours);
+	const viewing = open && sheets.find(sheet => sheet.seq === open);
+	if (!latest && !sheets.length) return null;
+	const drafts = latest ? draftsOf(latest.characterId).filter(ours) : [];
+	const goals = goalRows(latest?.qa.goals), issues = latest && !latest.qa.ok ? issueRows(latest.qa.groups) : [];
+	return <div className="agent-row">
+		<div className="agent-card agent-progress-card" data-agent-card="progress" data-drafts={drafts.length} data-installed={latest?.installed ? "true" : "false"} role="status" aria-live="polite">
+			{latest && <div className="agent-progress-head">
+				<span className="agent-progress-title">{ko("Draft", "초안")} {latest.n} · QA {latest.qa.total}</span>
+				<span className={`agent-progress-chip ${latest.installed ? "installed" : "draft"}`}>{latest.installed ? ko("Installed", "설치됨") : live ? ko("Not installed yet", "아직 설치 전") : ko("Not installed", "설치 안 됨")}</span>
+			</div>}
+			{latest?.label && <p className="agent-progress-label">{latest.label}</p>}
+			{drafts.length > 0 && <section className="agent-progress-section">
+				<h4>{ko(`QA issues across ${drafts.length} draft${drafts.length === 1 ? "" : "s"}`, `초안 ${drafts.length}개의 QA 문제 수`)}</h4>
+				<Trend totals={drafts.map(d => d.qa.total)} />
+			</section>}
+			{goals.length > 0 && <section className="agent-progress-section">
+				<button type="button" className="agent-progress-fold" aria-expanded={!!shown.goals} onClick={() => toggle("goals")}>
+					<h4>{ko("Goals", "목표")}</h4><span>{ko(`${goals.filter(g => g.ok).length} of ${goals.length} met`, `${goals.length}개 중 ${goals.filter(g => g.ok).length}개 충족`)}</span>
+				</button>
+				{shown.goals && <ul className="agent-progress-goals">
+					{goals.map((g, i) => <li key={i} data-goal-ok={g.ok ? "true" : "false"}>
+						<span className={`agent-progress-mark ${g.ok ? "ok" : "miss"}`} aria-label={g.ok ? ko("met", "충족") : ko("missed", "미충족")}>{g.ok ? <FiCheck size={11} /> : <FiX size={11} />}</span>
+						<span className="agent-progress-goal-name">{g.name}</span>
+						<span className="agent-progress-goal-value">{g.value}{g.need && <span className="need"> / {g.need}</span>}</span>
+					</li>)}
+				</ul>}
+			</section>}
+			{issues.length > 0 && <section className="agent-progress-section">
+				<button type="button" className="agent-progress-fold" aria-expanded={!!shown.issues} onClick={() => toggle("issues")}>
+					<h4>{ko("Largest issues", "가장 큰 문제")}</h4><span>{issues[0].kind} {issues[0].subject}</span>
+				</button>
+				{shown.issues && <ul className="agent-progress-issues">
+					{issues.map((row, i) => <li key={i}><span className="kind">{row.kind}</span> {row.subject} <span className="meta">×{row.count}{row.frames && ` · ${row.frames}`}</span></li>)}
+				</ul>}
+			</section>}
+			{sheets.length > 0 && <section className="agent-progress-section">
+				<h4>{ko("What the agent looked at", "에이전트가 본 화면")}</h4>
+				<div className="agent-progress-sheets">
+					{sheets.map(sheet => <button type="button" key={sheet.seq} className="agent-progress-sheet" title={sheet.caption} onClick={() => setOpen(sheet.seq)}>
+						<img src={sheet.dataUrl} alt={sheet.caption || ko("Image the agent checked", "에이전트가 확인한 이미지")} />
+					</button>)}
+				</div>
+			</section>}
+		</div>
+		{viewing && <SheetViewer sheet={viewing} onClose={() => setOpen(null)} />}
+	</div>;
+}

package/src/workflow/AgentReplyText.jsx

@@ -0,0 +1,37 @@
+// The agent's reply as formatted text (reply-markdown.js): paragraphs, headings, lists, bold, code and tables,
+// never the raw marks. `tail` (the streaming caret) sits at the end of the last line.
+import { Fragment, useMemo } from "react";
+import { replyBlocks } from "./reply-markdown.js";
+
+function Spans({ spans }) {
+	return spans.map((span, index) => {
+		if (span.code) return <code key={index}>{span.text}</code>;
+		if (span.bold) return <strong key={index}>{span.text}</strong>;
+		return <Fragment key={index}>{span.text}</Fragment>;
+	});
+}
+
+function Block({ block, tail }) {
+	if (block.type === "h") return <p className="agent-reply-heading"><Spans spans={block.spans} />{tail}</p>;
+	if (block.type === "code") return <pre><code>{block.text}</code>{tail}</pre>;
+	if (block.type === "ul" || block.type === "ol") {
+		const List = block.type;
+		return <List start={block.start}>
+			{block.items.map((spans, index) => <li key={index}><Spans spans={spans} />{index === block.items.length - 1 && tail}</li>)}
+		</List>;
+	}
+	if (block.type === "table") return <>
+		<div className="agent-reply-table"><table>
+			<thead><tr>{block.head.map((spans, index) => <th key={index}><Spans spans={spans} /></th>)}</tr></thead>
+			<tbody>{block.rows.map((row, rowIndex) => <tr key={rowIndex}>{row.map((spans, index) => <td key={index}><Spans spans={spans} /></td>)}</tr>)}</tbody>
+		</table></div>
+		{tail}
+	</>;
+	return <p><Spans spans={block.spans} />{tail}</p>;
+}
+
+export function ReplyText({ text, tail = null }) {
+	const blocks = useMemo(() => replyBlocks(text), [text]);
+	if (!blocks.length) return tail || null;
+	return blocks.map((block, index) => <Block key={index} block={block} tail={index === blocks.length - 1 ? tail : null} />);
+}

package/src/workflow/AgentTurnSteps.jsx

@@ -0,0 +1,84 @@
+// One turn's work in the agent panel (agent-turn.js turnLayout): a header that says how the turn stands (working,
+// done, stopped, failed), how many steps and how long, and one compact row per step: the tool call with a plain
+// label, what it was about and its one-line result; the reasoning the model streamed between calls; the call it is
+// writing now. Open while the turn runs, folded to its header when the turn ends (a failed or stopped turn stays
+// open, and a stopped one says what it left in the scene).
+import { useState } from "react";
+import { FiCheck, FiChevronRight, FiSquare, FiX } from "react-icons/fi";
+import { ko } from "../locale.js";
+import { scriptNow, stepLabel, stepResult, stepsHeader, stoppedNote, thinkingLine } from "./agent-turn.js";
+import "./agent-turn-steps.css";
+
+/** Step time: "0.6 s", "12 s", "1 m 05 s". */
+function stepClock(ms) {
+	if (!Number.isFinite(ms) || ms < 0) return "";
+	const s = ms / 1000;
+	if (s < 10) return `${s.toFixed(1)} s`;
+	if (s < 60) return `${Math.round(s)} s`;
+	return `${Math.floor(s / 60)} m ${String(Math.round(s % 60)).padStart(2, "0")} s`;
+}
+
+function StepIcon({ state }) {
+	if (state === "running") return <span className="agent-step-spin" aria-label={ko("running", "진행 중")} />;
+	if (state === "failed") return <FiX className="agent-step-icon alert" size={11} aria-label={ko("failed", "실패")} />;
+	if (state === "cancelled") return <FiSquare className="agent-step-icon warn" size={9} aria-label={ko("stopped", "중지됨")} />;
+	if (state === "note") return <span className="agent-step-dot" aria-hidden="true" />;
+	return <FiCheck className="agent-step-icon ok" size={11} aria-label={ko("done", "완료")} />;
+}
+
+function Step({ step, live, isLast, now, toolLabels }) {
+	const [open, setOpen] = useState(false);
+	if (step.kind === "narration") return <li className="agent-step narration" data-step-kind="narration"><StepIcon state="note" /><span className="agent-step-text">{step.text}</span></li>;
+	if (step.kind === "thinking") {
+		const running = live && isLast;
+		const line = thinkingLine(step.text);
+		// from its first words until the next step began; a thought that arrived at once shows no time
+		const took = (running ? now : step.endedAt ?? step.updatedAt) - step.startedAt;
+		return <li className="agent-step thinking" data-step-kind="thinking">
+			<button type="button" className="agent-step-row" aria-expanded={open} onClick={() => setOpen(value => !value)}>
+				<StepIcon state={running ? "running" : "note"} />
+				<span className="agent-step-label">{ko("Thinking", "생각")}</span>
+				<span className="agent-step-subject">{open ? "" : line}</span>
+				<span className="agent-step-time">{took >= 1000 ? stepClock(took) : ""}</span>
+			</button>
+			{open && <p className="agent-step-thought">{step.text}</p>}
+		</li>;
+	}
+	const running = step.kind === "compose" || step.status === "running";
+	const label = step.kind === "compose" ? ko(`Preparing ${stepLabel(step, toolLabels)}`, `${stepLabel(step, toolLabels)} 준비 중`) : stepLabel(step, toolLabels);
+	const result = running ? (step.progress ? `${scriptNow(step)}${step.progress.summary ? ` — ${step.progress.summary}` : ""}` : "") : stepResult(step);
+	const time = running ? now - (step.startedAt ?? now) : step.elapsedMs;
+	return <li className={`agent-step ${step.kind}${step.status === "failed" ? " failed" : ""}`} data-step-kind={step.kind} data-tool-name={step.name} data-tool-status={step.kind === "compose" ? "composing" : step.status} data-action={step.action}>
+		<div className="agent-step-row">
+			<StepIcon state={running ? "running" : step.status} />
+			<span className="agent-step-label">{label}</span>
+			{step.subject && <span className="agent-step-subject">{step.subject}</span>}
+			<span className="agent-step-time">{stepClock(time)}</span>
+		</div>
+		{result && <p className="agent-step-result">{result}</p>}
+	</li>;
+}
+
+export function TurnSteps({ block, now, toolLabels, formatClock, onRetry }) {
+	const [chosen, setChosen] = useState(null);
+	const failed = block.end?.status === "failed" || block.steps.some(step => step.failure);
+	const stopped = block.end?.status === "stopped";
+	const open = chosen ?? (block.live || failed || stopped);
+	const header = stepsHeader(block, now, formatClock);
+	const failure = block.steps.find(step => step.failure)?.failure;
+	return <div className="agent-card agent-steps" data-agent-card="steps" data-steps-state={block.live ? "live" : block.end?.status ?? "done"} data-open={open ? "true" : "false"}>
+		<button type="button" className="agent-steps-head" aria-expanded={open} onClick={() => setChosen(!open)}>
+			<span className={`agent-status-dot ${header.tone}`} aria-hidden="true" />
+			<span className="agent-steps-title">{header.text}</span>
+			<FiChevronRight className="agent-steps-chevron" size={12} aria-hidden="true" />
+		</button>
+		{open && <ol className="agent-steps-list">
+			{block.steps.map((step, index) => <Step key={step.id} step={step} live={block.live} isLast={index === block.steps.length - 1} now={now} toolLabels={toolLabels} />)}
+		</ol>}
+		{stopped && <p className="agent-steps-note">{stoppedNote(block)}</p>}
+		{failure && <div className="agent-error" role="alert">
+			<span>{failure.message || ko("The turn failed.", "턴이 실패했어요.")}</span>
+			<div className="agent-error-actions"><button type="button" className="agent-ghost-button agent-error-retry" onClick={onRetry}>{ko("Retry", "다시 시도")}</button></div>
+		</div>}
+	</div>;
+}

package/src/workflow/LoginPanel.jsx

@@ -0,0 +1,140 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FiX } from "react-icons/fi";
+import { answerLogin, cancelLogin, fetchLogins, logoutProvider, readLogin, startLogin } from "./login-client.js";
+
+// "Connect a model": pi's own login (the coding agent's /login) inside the agent panel (#pi-login). The list
+// is what pi ships: each provider with its subscription sign-in and/or api-key login; picking one runs pi's
+// flow in the sidecar and this panel only shows what pi asks (a key, a server address, a pasted code, a
+// choice) and tells (a sign-in page to open, a device code, progress). ChatGPT keeps CozyClay's own sign-in.
+
+const GROUPS = [
+	["Connected", (entry) => entry.connected],
+	["Subscriptions", (entry) => !entry.connected && entry.methods.some((method) => method.subscription)],
+	["API keys", (entry) => !entry.connected && !entry.methods.some((method) => method.subscription)],
+];
+
+function PromptForm({ prompt, onSubmit }) {
+	const [value, setValue] = useState("");
+	const ask = prompt.prompt;
+	if (ask.type === "select") {
+		return <div className="agent-login-choices" role="group" aria-label={ask.message}>
+			<p className="agent-login-ask">{ask.message}</p>
+			{(ask.options ?? []).map((option) => <button key={option.id} type="button" className="agent-ghost-button" onClick={() => onSubmit(option.id)}>{option.label}</button>)}
+		</div>;
+	}
+	const inputId = `agent-login-${prompt.promptId}`;
+	return <form className="agent-login-form" onSubmit={(event) => { event.preventDefault(); onSubmit(value); setValue(""); }}>
+		<label className="agent-login-ask" htmlFor={inputId}>{ask.message}</label>
+		<div className="agent-key-controls">
+			<input id={inputId} className="agent-key-input" type={ask.type === "secret" ? "password" : "text"} autoComplete="off" spellCheck="false"
+				placeholder={ask.placeholder ?? ""} value={value} autoFocus onChange={(event) => setValue(event.target.value)} />
+			<button type="submit" className="agent-key-save" disabled={ask.type === "secret" && !value.trim()}>Continue</button>
+		</div>
+	</form>;
+}
+
+function FlowLog({ entries }) {
+	return <ul className="agent-login-log">
+		{entries.map((entry, index) => {
+			const event = entry.event;
+			if (event.type === "auth_url") return <li key={index}><a className="agent-primary-button agent-login-open" href={event.url} target="_blank" rel="noopener noreferrer">Open the sign-in page</a>{event.instructions && <span className="agent-key-note">{event.instructions}</span>}</li>;
+			if (event.type === "device_code") return <li key={index}><span className="agent-key-note">Enter this code at </span><a href={event.verificationUri} target="_blank" rel="noopener noreferrer">{event.verificationUri}</a><code className="agent-login-code">{event.userCode}</code></li>;
+			return <li key={index} className="agent-key-note">{event.message}{(event.links ?? []).map((link) => <a key={link.url} href={link.url} target="_blank" rel="noopener noreferrer"> {link.label || link.url}</a>)}</li>;
+		})}
+	</ul>;
+}
+
+export function LoginPanel({ onClose, onChatGPT, onChanged }) {
+	const [providers, setProviders] = useState(null);
+	const [error, setError] = useState("");
+	const [query, setQuery] = useState("");
+	const [flow, setFlow] = useState(null);
+	const live = useRef(true);
+	const load = useCallback(async () => {
+		try { setProviders(await fetchLogins()); setError(""); } catch (failure) { setError(failure?.message || "The login list is unavailable."); }
+	}, []);
+	useEffect(() => { live.current = true; load(); return () => { live.current = false; }; }, [load]);
+	// Read the running flow until pi finishes it.
+	useEffect(() => {
+		if (!flow?.flowId || flow.done) return undefined;
+		let stopped = false;
+		(async () => {
+			let after = 0;
+			while (!stopped && live.current) {
+				let page;
+				try { page = await readLogin(flow.flowId, after); } catch (failure) { if (!stopped) setFlow((current) => current && { ...current, done: true, ok: false, message: failure?.message || "The login stopped." }); return; }
+				if (stopped) return;
+				after = page.next;
+				for (const entry of page.events) {
+					setFlow((current) => {
+						if (!current || current.flowId !== flow.flowId) return current;
+						if (entry.type === "prompt") return { ...current, prompt: entry };
+						if (entry.type === "prompt_closed") return current.prompt?.promptId === entry.promptId ? { ...current, prompt: null } : current;
+						if (entry.type === "event") return { ...current, log: [...current.log, entry] };
+						return { ...current, prompt: null, done: true, ok: entry.ok, message: entry.message ?? "" };
+					});
+					if (entry.type === "done" && entry.ok) { await onChanged?.(); load(); }
+				}
+				if (page.done) return;
+			}
+		})();
+		return () => { stopped = true; };
+	}, [flow?.flowId, flow?.done, load, onChanged]);
+
+	const begin = async (provider, method) => {
+		setError("");
+		// ChatGPT's own sign-in shows its waiting card in the panel body, so the list steps aside.
+		if (method.type === "chatgpt") { onChatGPT?.(); onClose?.(); return; }
+		try {
+			const flowId = await startLogin(provider.id, method.type);
+			setFlow({ flowId, name: provider.name, label: method.label, log: [], prompt: null, done: false });
+		} catch (failure) { setError(failure?.message || "That login could not start."); }
+	};
+	const answer = async (value) => {
+		const prompt = flow?.prompt;
+		if (!prompt) return;
+		setFlow((current) => current && { ...current, prompt: null });
+		try { await answerLogin(flow.flowId, prompt.promptId, value); } catch (failure) { setError(failure?.message || "That answer was not taken."); }
+	};
+	const cancel = async () => {
+		if (flow && !flow.done) await cancelLogin(flow.flowId).catch(() => {});
+		setFlow(null);
+	};
+	const logout = async (provider) => {
+		try { await logoutProvider(provider.id); await onChanged?.(); load(); } catch (failure) { setError(failure?.message || "Logout failed."); }
+	};
+
+	const shown = (providers ?? []).filter((entry) => !query.trim() || entry.name.toLowerCase().includes(query.trim().toLowerCase()));
+	return <section className="agent-keys agent-login" aria-label="Connect a model" data-agent-keys="true">
+		<div className="agent-keys-head">
+			<h3 className="agent-keys-title">Connect a model</h3>
+			<button type="button" className="agent-icon-button agent-keys-close" aria-label="Close" onClick={async () => { await cancel(); onClose?.(); }}><FiX size={11} aria-hidden="true" /></button>
+		</div>
+		{error && <p className="agent-key-error" role="alert">{error}</p>}
+		{flow ? <div className="agent-login-flow" data-login-flow={flow.done ? (flow.ok ? "connected" : "failed") : "running"}>
+			<p className="agent-key-label">{flow.name} · {flow.label}</p>
+			<FlowLog entries={flow.log} />
+			{flow.prompt && <PromptForm key={flow.prompt.promptId} prompt={flow.prompt} onSubmit={answer} />}
+			{!flow.done && !flow.prompt && <p className="agent-key-note">Waiting for {flow.name}…</p>}
+			{flow.done && <p className={flow.ok ? "agent-key-note" : "agent-key-error"} role={flow.ok ? "status" : "alert"}>{flow.ok ? `Connected to ${flow.name}.` : flow.message}</p>}
+			<div className="agent-key-controls"><button type="button" className="agent-ghost-button" onClick={cancel}>{flow.done ? "Back to the list" : "Cancel"}</button></div>
+		</div> : <>
+			<p className="agent-keys-hint">A subscription signs in on its own page. A key or server address you type stays with the local CozyClay service and is never shown again.</p>
+			<input className="agent-key-input" type="search" aria-label="Search providers" placeholder="Search providers" value={query} onChange={(event) => setQuery(event.target.value)} />
+			{providers === null && !error && <p className="agent-keys-note">Loading providers…</p>}
+			{GROUPS.map(([title, test]) => {
+				const rows = shown.filter(test);
+				return rows.length ? <div key={title} className="agent-login-group"><p className="agent-key-endpoint-label">{title}</p>
+					{rows.map((provider) => <div key={provider.id} className="agent-key-row" data-provider={provider.id} data-provider-signed-in={provider.connected ? "true" : "false"}>
+						<div className="agent-key-head"><span className="agent-key-label">{provider.name}</span><span className="agent-key-source">{provider.connected ? (provider.via === "oauth" ? "signed in" : provider.source || "key") : ""}</span></div>
+						<div className="agent-key-controls">
+							{provider.connected && provider.id !== "openai-codex"
+								? <button type="button" className="agent-ghost-button agent-key-remove" onClick={() => logout(provider)}>Log out</button>
+								: provider.methods.map((method) => <button key={method.type} type="button" className={method.subscription ? "agent-key-save" : "agent-ghost-button"} onClick={() => begin(provider, method)}>{method.label}</button>)}
+						</div>
+					</div>)}
+				</div> : null;
+			})}
+		</>}
+	</section>;
+}

package/src/workflow/WorkflowBuilder.jsx

@@ -15,7 +15,7 @@ import { loadWorkflowGraph, normalizeWorkflowGraph, storeWorkflowGraph, WORKFLOW
 import AgentPanel from "./AgentPanel.jsx";
 import CozySceneNode from "./CozySceneNode.jsx";
 import { applyCozyScenePatch, normalizeCozySceneData, sceneConnectionAllowed } from "./cozy-scene-node.js";
-import { activeSceneCharacters, characterHandleId, characterIdFromHandle, normalizeMotionInputData, motionInputOutput } from "./motion-input.js";
+import { activeSceneCharacters, characterHandleId, characterIdFromHandle, normalizeMotionInputData, motionInputOutput, parseMotionSpec } from "./motion-input.js";
 import { DEFAULT_NODE_SCHEMAS, defaultFormValues, schemaCategoryForType, schemaModelEntries, schemaProperties } from "./node-schema.js";
 import { executeLocalWorkflowGraph } from "./local-workflow.js";
 import { createLiveControl } from "../live-control.js";
@@ -24,7 +24,6 @@ import { startWorkflowExecution } from "../execution-telemetry.js";
 import { createCanvasCommands } from "./canvas-commands.js";
 import { applyMotionToActiveScene, importImageIntoActiveScene, readStoredSceneDocument } from "./scene-asset-sync.js";
 import { createHttpTransport } from "./agent-client.js";
-import { fetchVideoOutputBlob, requestBridgeExtract } from "../multimodel-ingest.js";
 import { canvasTakesPaste, fileToDataUrl, imageFileFromTransfer, pastedImageNodeData } from "./clipboard-image.js";
 import { appendVersion, compareIndex, pinnedInputs, selectVersion, versionLabel, versionState } from "./image-versions.js";
 import { normalizeVideoForm, videoFormContract } from "./video-contract.js";
@@ -214,10 +213,8 @@ function VideoNode({ id, data }) {
 			<label>Motion prompt</label><textarea className="workflow-textarea" value={form.prompt ?? data.prompt ?? ""} onChange={(event) => update("prompt", event.target.value)} placeholder="Motion prompt" />
 			<label>Duration (seconds)</label><input type="number" min={contract.minDuration} max={contract.maxDuration} value={form.duration_seconds} onChange={(event) => update("duration_seconds", Number(event.target.value))} />
 			<label>Aspect</label>{contract.aspectFromImage ? <><div className="workflow-hint" data-testid="video-source-aspect">Matches input image · frame the full body in the source image</div><div className="workflow-warning" role="status" data-testid="mocap-framing-warning">Before generating: confirm the captured frame shows the head, hands, feet, and any needed objects. Cropped parts can break mocap alignment.</div></> : <select value={form.aspect} onChange={(event) => update("aspect", event.target.value)}>{contract.aspects.map((aspect) => <option key={aspect}>{aspect}</option>)}</select>}
-			<label className="workflow-schema-check"><input type="checkbox" checked={Boolean(form.extract_mocap)} onChange={(event) => update("extract_mocap", event.target.checked)} />Extract GVHMR motion into connected Motion Input</label>
 		</>}
 		{data.videoUrl && <video controls className="workflow-video-preview" src={data.videoUrl} />}
-		{generated && data.motionExtraction?.motionUrl && <div className="workflow-hint" data-testid="mocap-extraction-receipt">✓ GVHMR motion extracted{Number.isFinite(data.motionExtraction.frames) ? ` · ${data.motionExtraction.frames} frames` : ""}</div>}
 		{generated && data.preservation?.pass && <div className="workflow-hint workflow-preservation-ok" data-testid="h3-preservation-receipt">✓ H3 scene/camera lock verified{h3VerificationMetrics(data.preservation)}</div>}
 		{generated && data.preservation && !data.preservation.pass && <div className="workflow-error workflow-preservation-failed" data-testid="h3-preservation-failed">✕ H3 output rejected: background/camera drift{h3VerificationMetrics(data.preservation)}</div>}
 		{generated && data.isLoading && <div className="workflow-hint">Generating video…</div>}{generated && data.errorMsg && <div className="workflow-error">{data.errorMsg}</div>}
@@ -246,9 +243,8 @@ function MotionInputNode({ id, data }) {
 			{options.map((character) => <option key={character.id} value={character.id}>{character.name || character.subject || character.id}</option>)}
 		</select>
 		<input aria-label="Character id" value={normalized.characterId} onChange={(event) => update({ characterId: event.target.value.trim() })} placeholder="character id (e.g. char-a)" />
-		<label>Same-origin motion URL</label>
-		<input aria-label="Motion URL" value={normalized.objectUrl ? "" : normalized.url} onChange={(event) => update({ url: event.target.value, objectUrl: null, status: event.target.value ? "ready" : "idle" })} placeholder="/ardy/motions/take.npz" />
-		<label className="workflow-upload workflow-motion-upload"><FiUpload size={18} /><span>{normalized.fileName || "Choose local .npz motion"}</span><input type="file" accept=".npz,application/octet-stream,.json" onChange={(event) => { const file = event.target.files?.[0]; if (!file) return; const objectUrl = URL.createObjectURL(file); update({ objectUrl, url: objectUrl, fileName: file.name, mimeType: file.type || "application/octet-stream", status: "ready" }); }} /></label>
+		<label>Motion spec (cozyclay.motion-spec.v1)</label>
+		<label className="workflow-upload workflow-motion-upload"><FiUpload size={18} /><span>{normalized.fileName || "Choose a motion spec .json"}</span><input type="file" accept=".json,application/json" onChange={(event) => { const file = event.target.files?.[0]; if (!file) return; file.text().then((body) => { const spec = parseMotionSpec(body); if (!spec) toast.error("Not a cozyclay.motion-spec.v1 file"); update(spec ? { spec, fileName: file.name, status: "ready" } : { spec: null, fileName: file.name, status: "error" }); }); }} /></label>
 		<div className="workflow-node-foot"><span>{normalized.status === "ready" ? `${handleId} ready` : "Connect to a character handle"}</span><span>{motionInputOutput(normalized).frames ? `${motionInputOutput(normalized).frames}f` : ""}</span></div>
 	</NodeShell>;
 }
@@ -539,20 +535,8 @@ export default function WorkflowBuilder() {
 						const videoForm = normalizeVideoForm(provider, { ...form, duration_seconds: form.duration_seconds ?? current.data.duration_seconds, aspect: form.aspect || current.data.aspect }, falModel);
 						const output = await createHttpTransport().video({ provider, prompt: motionPrompt, imageDataUrl: frame, ...(lastFrameDataUrl ? { lastFrameDataUrl } : {}), durationSeconds: videoForm.duration_seconds, aspect: videoForm.aspect });
 						const videoUrl = output.dataUrl || output.url;
-						let motionExtraction = null;
-						const motionTargets = graph.edges.filter((edge) => edge.source === id).map((edge) => result.nodes.find((node) => node.id === edge.target)).filter((node) => node?.type === "motion-input");
-						if (videoForm.extract_mocap && motionTargets.length) {
-							const done = await requestBridgeExtract(await fetchVideoOutputBlob(videoUrl));
-							motionExtraction = done;
-							for (const target of motionTargets) {
-								const motionData = normalizeMotionInputData({ ...target.data, url: done.motionUrl, objectUrl: null, status: "ready", frames: done.frames, fps: done.fps, motionRef: done.motionRef || null });
-								const motionOutput = motionInputOutput(motionData);
-								values.set(target.id, motionOutput);
-								patchNode(target.id, { ...motionData, outputs: [{ value: motionOutput }] });
-							}
-						}
 						values.set(id, videoUrl);
-						patchNode(id, { isLoading: false, status: "complete", videoUrl, resultUrl: videoUrl, outputs: [{ value: videoUrl }], preservation: output.preservation || null, motionExtraction, errorMsg: null });
+						patchNode(id, { isLoading: false, status: "complete", videoUrl, resultUrl: videoUrl, outputs: [{ value: videoUrl }], preservation: output.preservation || null, errorMsg: null });
 						if (videoUrl) execution.apply();
 					}
 					catch (error) {
@@ -592,7 +576,7 @@ export default function WorkflowBuilder() {
 					const source = resultById.get(assignment.source);
 					if (source?.type !== "motion-input" || !assignment.characterId) continue;
 					const motion = motionInputOutput({ ...source.data, ...(patches.get(source.id) || {}) });
-					if (motion.url) applyMotionToActiveScene(assignment.characterId, motion);
+					if (motion.spec) applyMotionToActiveScene(assignment.characterId, motion);
 				}
 			}
 			setRunState("complete");
@@ -672,8 +656,8 @@ export default function WorkflowBuilder() {
 	const onConnect = useCallback((params) => {
 		const target = nodes.find((node) => node.id === params.target);
 		const source = nodes.find((node) => node.id === params.source);
-		if (target?.type === "motion-input" && source?.type !== "video") {
-			toast.error("Motion Input accepts generated Video nodes only");
+		if (target?.type === "motion-input") {
+			toast.error("Motion Input takes a motion spec file, not a node");
 			return;
 		}
 		if (target?.type === "scene" && !sceneConnectionAllowed(source, params.targetHandle, source?.data)) {