cozyclay 2.1.1 → 3.0.1

package/src/workflow/agent-progress-card.css

@@ -0,0 +1,167 @@
+/* The live progress card in the agent panel (AgentProgressCard.jsx); colours come from agent-panel.css. */
+.agent-progress-card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--agent-space-3, 6px);
+	padding: var(--agent-space-3, 6px) var(--agent-space-4, 8px);
+	border-color: var(--agent-accent-edge);
+}
+
+.agent-progress-head {
+	display: flex;
+	align-items: center;
+	gap: var(--agent-space-3, 6px);
+}
+
+.agent-progress-title {
+	flex: 1;
+	color: var(--agent-text);
+	font-size: var(--agent-font-lg);
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+}
+
+.agent-progress-chip {
+	border: 1px solid currentColor;
+	border-radius: var(--agent-radius-pill);
+	padding: 1px 7px;
+	font-size: var(--agent-font-sm);
+	line-height: 1.4;
+	white-space: nowrap;
+}
+.agent-progress-chip.installed { color: var(--agent-ok); }
+.agent-progress-chip.draft { color: var(--agent-warn); }
+
+.agent-progress-label {
+	margin: 0;
+	color: var(--agent-text-muted);
+	font-size: var(--agent-font-md);
+	overflow-wrap: anywhere;
+}
+
+.agent-progress-section {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.agent-progress-section h4 {
+	margin: 0;
+	color: var(--agent-text-dim);
+	font-size: var(--agent-font-sm);
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.agent-progress-trend {
+	display: flex;
+	align-items: center;
+	gap: var(--agent-space-3, 6px);
+}
+.agent-progress-trend svg { flex: 1; min-width: 0; height: 40px; }
+.agent-progress-trend .base { stroke: var(--agent-border-strong); stroke-width: 1; }
+.agent-progress-trend .line { fill: none; stroke: var(--agent-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
+.agent-progress-trend .dot { fill: var(--agent-accent); }
+.agent-progress-trend .end.ok { fill: var(--agent-ok); }
+.agent-progress-trend .end.issue { fill: var(--agent-warn); }
+.agent-progress-trend-text {
+	color: var(--agent-text);
+	font-size: var(--agent-font-md);
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+}
+
+.agent-progress-goals,
+.agent-progress-issues {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	font-size: var(--agent-font-md);
+}
+
+.agent-progress-goals li {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	align-items: baseline;
+	gap: 6px;
+}
+.agent-progress-mark { display: inline-flex; }
+.agent-progress-mark.ok { color: var(--agent-ok); }
+.agent-progress-mark.miss { color: var(--agent-alert); }
+.agent-progress-goal-name { color: var(--agent-text); overflow-wrap: anywhere; }
+.agent-progress-goal-value { color: var(--agent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.agent-progress-goal-value .need { color: var(--agent-text-dim); }
+
+.agent-progress-issues li { color: var(--agent-text-muted); overflow-wrap: anywhere; }
+.agent-progress-issues .kind { color: var(--agent-warn); font-weight: 600; }
+.agent-progress-issues .meta { color: var(--agent-text-dim); font-variant-numeric: tabular-nums; }
+
+.agent-progress-sheets {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+	gap: 4px;
+}
+.agent-progress-sheet {
+	padding: 0;
+	border: 1px solid var(--agent-border-strong);
+	border-radius: var(--agent-radius-sm);
+	background: var(--agent-bg-sunken);
+	cursor: zoom-in;
+	overflow: hidden;
+}
+.agent-progress-sheet:hover { border-color: var(--agent-accent-edge); }
+.agent-progress-sheet:focus-visible { outline: 2px solid var(--agent-border-focus); outline-offset: 1px; }
+.agent-progress-sheet img { display: block; width: 100%; height: 56px; object-fit: cover; }
+
+/* Outside the panel (a portal), so its colours are its own. */
+.agent-progress-viewer {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	padding: 32px;
+	border: 0;
+	background: rgba(12, 14, 20, 0.86);
+	cursor: zoom-out;
+}
+.agent-progress-viewer img {
+	max-width: 100%;
+	max-height: calc(100% - 40px);
+	object-fit: contain;
+	border-radius: 6px;
+	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+	background: #f4f5f7;
+}
+.agent-progress-viewer-caption {
+	color: #e6e9f2;
+	font: 12px/1.4 system-ui, sans-serif;
+}
+.agent-progress-viewer:focus-visible { outline: 2px solid #8994ff; outline-offset: -4px; }
+
+/* A folded goal or issue list: its heading and a one-line summary, the list on click. */
+.agent-progress-fold {
+	display: flex;
+	align-items: baseline;
+	gap: var(--agent-space-3, 6px);
+	min-width: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--agent-text-muted);
+	font: inherit;
+	font-size: var(--agent-font-md);
+	text-align: left;
+	cursor: pointer;
+}
+.agent-progress-fold h4 { flex: none; }
+.agent-progress-fold span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-progress-fold[aria-expanded="true"] span { display: none; }

package/src/workflow/agent-progress-view.js

@@ -0,0 +1,47 @@
+// The agent panel's progress card as plain data (AgentProgressCard.jsx draws it): the QA trend across the
+// drafts, the latest draft's goals as checklist rows, its heaviest issue groups, and when a new turn starts.
+// Goal values are metres (near: a distance, above: a height difference, moved: a distance); the card shows cm.
+
+const round = v => Math.round(v * 10) / 10;
+const cm = v => `${(v * 100).toFixed(1)} cm`;
+const signedCm = v => `${v < 0 ? "−" : "+"}${(Math.abs(v) * 100).toFixed(1)} cm`;
+
+/** QA totals across the drafts inside a width x height box: { points: [[x, y], ...], max, first, last }. */
+export function trendPoints(totals, { width = 220, height = 40, pad = 4 } = {}) {
+	if (!totals.length) return { points: [], max: 0, first: null, last: null };
+	const max = Math.max(1, ...totals), n = totals.length;
+	const x = i => (n === 1 ? width / 2 : pad + (i * (width - 2 * pad)) / (n - 1));
+	const y = v => pad + (1 - v / max) * (height - 2 * pad);
+	return { points: totals.map((v, i) => [round(x(i)), round(y(v))]), max, first: totals[0], last: totals[n - 1] };
+}
+
+/**
+ * Checklist rows of a draft's goals: { name, ok, value, need, at }. near passes at value <= need; above and moved
+ * at value >= need. A goal without a measured value reads "—".
+ */
+export function goalRows(goals = []) {
+	return goals.map(g => {
+		const show = g.kind === "above" ? signedCm : g.kind === "speed" ? v => `${Math.round(v * 100) / 100} m/s` : cm;
+		const value = Number.isFinite(g.value) ? show(g.value) : "—";
+		const need = Number.isFinite(g.need) ? `${g.kind === "near" || g.kind === "still" ? "≤" : "≥"} ${show(g.need)}` : "";
+		return { name: g.name ?? g.kind ?? "goal", ok: !!g.ok, value, need, at: Number.isFinite(g.at) ? `f${g.at}` : "" };
+	});
+}
+
+/** The first `limit` issue groups by severity, as QA ordered them: { kind, subject, count, frames }. GOAL groups are left
+ * out: the goals checklist already shows them. */
+export function issueRows(groups = [], limit = 3) {
+	return groups.filter(g => g.kind !== "GOAL").slice(0, limit).map(g => ({
+		kind: g.kind ?? "", subject: g.subject ?? "", count: g.count ?? 0,
+		frames: !Number.isFinite(g.first) ? "" : Number.isFinite(g.last) && g.last !== g.first ? `f${g.first}–${g.last}` : `f${g.first}`,
+	}));
+}
+
+/** The number of turns the user started: messages that are not steers of a running turn. */
+export const turnCount = items => items.filter(item => item.kind === "user" && !item.steered).length;
+
+/** A short caption for an image the agent asked to see: its kind and, for a sheet, its views and frames. */
+export function sheetCaption({ kind, views = [], frames = [] } = {}) {
+	const span = frames.length ? (frames.length > 1 ? `f${frames[0]}–${frames[frames.length - 1]}` : `f${frames[0]}`) : "";
+	return [kind, views.join(", "), span].filter(Boolean).join(" · ");
+}

package/src/workflow/agent-turn-steps.css

@@ -0,0 +1,113 @@
+/* One turn's step list in the agent panel (AgentTurnSteps.jsx); colours and sizes come from agent-panel.css. */
+.agent-steps {
+	--agent-step-icon: 11px;
+	display: flex;
+	flex-direction: column;
+}
+
+.agent-steps-head {
+	display: flex;
+	align-items: center;
+	gap: var(--agent-space-3);
+	width: 100%;
+	padding: var(--agent-space-2) var(--agent-space-4);
+	border: 0;
+	background: none;
+	color: var(--agent-text-soft, var(--agent-text));
+	font: inherit;
+	font-size: var(--agent-font-md);
+	text-align: left;
+	cursor: pointer;
+}
+
+.agent-steps-title { flex: 1; font-variant-numeric: tabular-nums; }
+.agent-steps-chevron { color: var(--agent-text-dim); transition: transform var(--agent-motion); }
+.agent-steps[data-open="true"] .agent-steps-chevron { transform: rotate(90deg); }
+
+.agent-steps-list {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0 0 var(--agent-space-2);
+	border-top: 1px solid var(--agent-border);
+	list-style: none;
+}
+
+.agent-step { padding: 0 var(--agent-space-4); }
+.agent-step.narration { display: flex; gap: var(--agent-space-3); padding-top: var(--agent-space-1); color: var(--agent-text-muted); font-size: var(--agent-font-md); }
+
+.agent-step-row {
+	display: flex;
+	align-items: center;
+	gap: var(--agent-space-3);
+	width: 100%;
+	min-width: 0;
+	padding: var(--agent-space-1) 0 0;
+	border: 0;
+	background: none;
+	color: var(--agent-text);
+	font: inherit;
+	font-size: var(--agent-font-md);
+	text-align: left;
+}
+
+button.agent-step-row { cursor: pointer; }
+.agent-step-label { flex: none; white-space: nowrap; }
+.agent-step.thinking .agent-step-label { color: var(--agent-text-muted); }
+.agent-step-subject { flex: 1; min-width: 0; overflow: hidden; color: var(--agent-text-muted); text-overflow: ellipsis; white-space: nowrap; }
+.agent-step-label + .agent-step-time { margin-left: auto; }
+.agent-step-time { flex: none; color: var(--agent-text-dim); font: var(--agent-font-sm) ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+
+.agent-step-result,
+.agent-step-thought {
+	margin: 0;
+	padding-left: calc(var(--agent-step-icon) + var(--agent-space-3));
+	color: var(--agent-text-muted);
+	font-size: var(--agent-font-sm);
+	line-height: 1.45;
+	overflow-wrap: anywhere;
+}
+
+.agent-step-thought { white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
+.agent-step.failed .agent-step-result { color: var(--agent-alert); }
+
+.agent-step-icon { flex: none; width: var(--agent-step-icon); }
+.agent-step-icon.ok { color: var(--agent-ok); }
+.agent-step-icon.alert { color: var(--agent-alert); }
+.agent-step-icon.warn { color: var(--agent-warn); }
+
+.agent-step-dot {
+	flex: none;
+	width: var(--agent-step-icon);
+	height: var(--agent-step-icon);
+	background: radial-gradient(circle, var(--agent-text-dim) 0 2px, transparent 2.5px);
+}
+
+.agent-step-spin {
+	flex: none;
+	width: var(--agent-step-icon);
+	height: var(--agent-step-icon);
+	border: 1.5px solid var(--agent-border-strong);
+	border-top-color: var(--agent-accent);
+	border-radius: var(--agent-radius-pill);
+	animation: agent-spin 700ms linear infinite;
+}
+
+.agent-steps-note {
+	margin: 0;
+	padding: var(--agent-space-2) var(--agent-space-4);
+	border-top: 1px solid var(--agent-border);
+	color: var(--agent-warn);
+	font-size: var(--agent-font-sm);
+	line-height: 1.45;
+}
+
+/* The activity line's second part: what the current step is about. */
+.agent-activity-detail {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	color: var(--agent-text-dim);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/workflow/agent-turn.js

@@ -0,0 +1,191 @@
+// A running agent turn as the panel shows it (AgentTurnSteps.jsx draws it): every tool call, the reasoning the
+// model streamed between them and the call it is writing, as one compact step list per turn with plain labels,
+// a one-line result each and the time each took; the turn's end state; and what the activity line says now.
+// Pure data: the chat store (agent-client.js) feeds it the sidecar's frames, the component only adds a clock.
+import { ko } from "../locale.js";
+import { STUDIO_TOOL_LABELS } from "../studio-agent-protocol.js";
+
+const LINE_MAX = 140;
+const clip = (text, max = LINE_MAX) => { const line = String(text ?? "").replace(/\s+/g, " ").trim(); return line.length > max ? `${line.slice(0, max - 1)}…` : line; };
+
+/** Words for an action id the turn's action index did not label: "motion.compile" -> "Motion compile". */
+const actionWords = action => { const words = String(action).replace(/([a-z])([A-Z])/g, "$1 $2").split(/[._\s-]+/).filter(Boolean).join(" ").toLowerCase(); return words ? words[0].toUpperCase() + words.slice(1) : "Editor action"; };
+
+/** The labels the editor gave its actions (the context's actionIndex), by id. */
+export const actionLabelsOf = context => new Map((context?.actionIndex ?? []).filter(row => row?.id && row.label).map(row => [row.id, row.label]));
+
+/** What a script's code calls, by name, each once in order: "Add shot, Frame the shot, Verify the result". */
+function scriptCalls(code, actionLabels) {
+	const names = [...String(code ?? "").matchAll(/tools\.(\w+)\(\s*\{?\s*(?:action\s*:\s*["'`]([\w.]+)["'`])?/g)]
+		.map(([, tool, action]) => action ? actionLabels?.get(action) ?? actionWords(action) : STUDIO_TOOL_LABELS[tool] ?? actionWords(tool));
+	const distinct = [...new Set(names)];
+	return distinct.length > 3 ? `${distinct.slice(0, 3).join(", ")}…` : distinct.join(", ");
+}
+
+/** The fields a tool.start frame adds to its step: the action it runs and what it is about (a script: its title
+ * comment, else what it calls). */
+export function stepFields(name, args, actionLabels) {
+	const action = name === "run_action" && typeof args?.action === "string" ? args.action : null;
+	const inner = action ? args.args : args;
+	const subject = name === "script" ? /^\s*\/\/\s*(.+)/.exec(String(args?.code ?? ""))?.[1] ?? scriptCalls(args?.code, actionLabels)
+		: inner?.spec?.label ?? inner?.caption ?? inner?.label ?? (action ? null : inner?.visual && inner.visual !== "none" ? inner.visual.replace("_", " ") : null);
+	return { ...(action ? { action, actionLabel: actionLabels?.get(action) ?? actionWords(action) } : {}), ...(subject ? { subject: clip(subject, 80) } : {}) };
+}
+
+/** A step's name: the action's label for run_action, the panel's label for a tool family, else the tool's words. */
+export function stepLabel(step, toolLabels = {}) {
+	if (step.kind === "compose" || step.kind === "tool") {
+		if (step.actionLabel) return step.actionLabel;
+		if (step.action) return actionWords(step.action);
+		if (step.name === "script") return ko("Script", "스크립트");
+		if (Object.hasOwn(toolLabels, step.name)) return toolLabels[step.name];
+		return step.label || actionWords(step.name || "tool");
+	}
+	return "";
+}
+
+/** One line of what a verify_result measured: the framing size, motion verification, the image it looked at. */
+function verifySummary(result, args) {
+	const parts = [];
+	const size = result?.checks?.framing?.derivedSize;
+	if (size) parts.push(size);
+	if (result?.geometry?.axisConsistent === false) parts.push(ko("cameras cross the line", "카메라가 축을 넘음"));
+	if (result?.verification?.status) parts.push(result.verification.status === "verified" ? ko("motion checked", "모션 확인") : ko("motion unverified", "모션 미확인"));
+	if (result?.visualStatus === "attached") parts.push(args?.visual === "contact_sheet" ? ko("looked at a contact sheet", "컨택트 시트 확인") : ko("looked at the frame", "화면 확인"));
+	if (result?.stale) parts.push(ko("stale evidence", "이전 상태 기준"));
+	return parts.join(" · ");
+}
+
+/** One line for a finished step: the receipt's own summary, what a check measured, a script's calls, or the error. */
+export function stepResult(step) {
+	if (step.kind !== "tool") return "";
+	if (step.status === "failed") return clip(String(step.error ?? step.failure?.message ?? ko("Failed", "실패")).replace(/^Error:\s*/, ""));
+	if (step.status === "cancelled") return step.result?.status === "not_applied" ? ko("not applied", "적용 안 됨") : ko("result unknown", "결과 불명");
+	const result = step.result;
+	if (!result || typeof result !== "object") return "";
+	if (step.name === "script") {
+		const calls = Array.isArray(result.calls) ? result.calls : [];
+		const refused = calls.filter(call => call?.ok === false);
+		const head = ko(`${calls.length} call${calls.length === 1 ? "" : "s"}`, `호출 ${calls.length}회`);
+		if (result.ok === false) return clip(`${head} · ${result.error?.message ?? ko("failed", "실패")}${result.rollback ? ko(" · its edits were rolled back", " · 편집 되돌림") : ""}`);
+		return clip(refused.length ? `${head} · ${ko(`${refused.length} refused`, `${refused.length}회 거부`)}: ${refused[0].code ?? refused[0].message ?? ""}` : head);
+	}
+	if (step.name === "verify_result") return clip(verifySummary(result, step.args));
+	if (typeof result.summary === "string" && result.summary) return clip(result.summary.replace(/\.$/, ""));
+	if (result.status === "started") return ko("started", "시작됨");
+	return "";
+}
+
+/** What a script is running right now, from its last tool.progress frame: "Compile motion (call 4)". */
+export function scriptNow(step) {
+	const now = step.progress;
+	if (!now) return "";
+	const label = now.label ?? (now.action ? actionWords(now.action) : actionWords(now.name ?? "call"));
+	return ko(`${label} (call ${now.index})`, `${label} (${now.index}번째 호출)`);
+}
+
+/** The reasoning text so far as one line: its latest paragraph, or the one before while the latest has only begun. */
+export function thinkingLine(text) {
+	const lines = String(text ?? "").split(/\n+/).map(line => line.replace(/^[#*\s-]+|\*+$/g, "").trim()).filter(Boolean);
+	const last = lines.at(-1) ?? "";
+	return clip(last.length < 24 && lines.length > 1 ? lines.at(-2) : last);
+}
+
+/** items after a thinking.delta frame: the open reasoning step grows, or a new one starts after other output. */
+export function withThinking(items, text, now, newId) {
+	const last = items.at(-1);
+	if (last?.kind === "thinking") return [...items.slice(0, -1), { ...last, text: last.text + text, updatedAt: now }];
+	return [...items, { kind: "thinking", id: newId(), text, startedAt: now, updatedAt: now }];
+}
+
+/** The reasoning step that just ended (the next call began): it keeps when, so its row shows how long it ran. */
+const closeThinking = (items, now) => items.at(-1)?.kind === "thinking" && !items.at(-1).endedAt ? [...items.slice(0, -1), { ...items.at(-1), endedAt: now }] : items;
+
+/** items after a tool.compose frame: the call being written (one per index) names what it has named so far. */
+export function withCompose(list, frame, now, newId, actionLabels) {
+	const items = closeThinking(list, now);
+	const index = Number.isInteger(frame.index) ? frame.index : 0;
+	const at = items.findLastIndex(item => item.kind === "compose" && item.index === index);
+	const fields = { name: frame.name, ...(frame.action ? { action: frame.action, actionLabel: actionLabels?.get(frame.action) ?? actionWords(frame.action) } : {}), ...(frame.subject ? { subject: clip(frame.subject, 80) } : {}) };
+	if (at !== -1 && items[at].name === frame.name) return items.map((item, i) => i === at ? { ...item, ...fields } : item);
+	return [...items, { kind: "compose", id: newId(), index, startedAt: now, ...fields }];
+}
+
+/** items after a tool.start frame: the call takes the place of the compose step that wrote it. */
+export function withToolStart(list, step) {
+	const items = closeThinking(list, step.startedAt);
+	const at = items.findIndex(item => item.kind === "compose" && item.name === step.name);
+	return at === -1 ? [...items, step] : items.map((item, i) => i === at ? { ...step, subject: step.subject ?? item.subject } : item);
+}
+
+/** items at the end of a turn: compose steps that never ran go, a call still open ends with the turn (its result
+ * unknown), and the turn's end state is recorded. */
+export const withTurnEnd = (items, end, newId) => [...items.filter(item => item.kind !== "compose")
+	.map(item => item.kind === "tool" && item.status === "running" ? { ...item, status: "cancelled" } : item), { kind: "turn-end", id: newId(), ...end }];
+
+const STEP_KINDS = new Set(["tool", "thinking", "compose"]);
+
+/**
+ * The transcript as render entries: { type: "item", item } for every card, and per turn one
+ * { type: "steps", id, steps, end, live, last } at the place of its first step, holding its tool calls, reasoning
+ * and the calls being written, plus the assistant text written between steps (narration). The text after the
+ * last step is the reply and stays a card. The turn's end state ({ status, durationMs }) rides on its block.
+ */
+export function turnLayout(items, { streaming = false } = {}) {
+	const turns = [];
+	for (const item of items) {
+		if ((item.kind === "user" && !item.steered) || !turns.length) turns.push([]);
+		turns.at(-1).push(item);
+	}
+	const entries = [];
+	turns.forEach((turn, t) => {
+		const lastStep = turn.findLastIndex(item => STEP_KINDS.has(item.kind));
+		const end = turn.find(item => item.kind === "turn-end") ?? null;
+		const last = t === turns.length - 1;
+		let block = null;
+		turn.forEach((item, i) => {
+			if (item.kind === "turn-end") return;
+			const step = STEP_KINDS.has(item.kind) || (item.kind === "assistant" && i < lastStep && block);
+			if (!step) { entries.push({ type: "item", item }); return; }
+			if (!block) { block = { type: "steps", id: `steps:${item.id}`, steps: [], end, live: last && streaming, last }; entries.push(block); }
+			block.steps.push(item.kind === "assistant" ? { ...item, kind: "narration" } : item);
+		});
+	});
+	return entries;
+}
+
+/** The header of a turn's step list: how many steps, how it ended and how long it took. */
+export function stepsHeader(block, now, formatClock) {
+	const count = block.steps.filter(step => step.kind === "tool").length;
+	const steps = count ? ` · ${ko(`${count} step${count === 1 ? "" : "s"}`, `${count}단계`)}` : "";
+	if (block.live) {
+		const started = block.steps[0]?.startedAt;
+		return { tone: "busy", text: `${ko("Working", "작업 중")}${steps}${Number.isFinite(started) ? ` · ${formatClock(now - started)}` : ""}` };
+	}
+	const end = block.end;
+	const took = end && Number.isFinite(end.durationMs) ? ` · ${formatClock(end.durationMs)}` : "";
+	if (end?.status === "stopped") return { tone: "warn", text: `${ko("Stopped", "중지됨")}${steps}${took}` };
+	if (end?.status === "failed") return { tone: "alert", text: `${ko("Failed", "실패")}${steps}${took}` };
+	return { tone: "ok", text: `${ko("Done", "완료")}${steps}${took}` };
+}
+
+/**
+ * One line for a receipt the turn earned, naming what it changed instead of listing ids: names from the editor's
+ * context (characters, objects, shots), the rest counted.
+ */
+export function changedLine(ids, context) {
+	const names = new Map([...(context?.entityIndex ?? []), ...(context?.shots ?? [])].filter(row => row?.id && row.name).map(row => [row.id, row.name]));
+	const named = [...new Set(ids.map(id => names.get(id)).filter(Boolean))];
+	const rest = ids.filter(id => !names.has(id)).length;
+	if (!named.length && !rest) return ko("Changed the scene", "장면을 바꿈");
+	const shown = named.slice(0, 4).join(", "), more = Math.max(0, named.length - 4) + rest;
+	return ko(`Changed ${shown || "the scene"}${more > 0 ? ` and ${more} more` : ""}`, `${shown || "장면"}${more > 0 ? ` 외 ${more}개` : ""} 변경`);
+}
+
+/** What a stopped turn left behind, as far as its steps tell: their edits stay (one undo entry), or none landed. */
+export function stoppedNote(block) {
+	const authored = block.steps.some(step => step.result?.authored === true || (step.result?.calls ?? []).some(call => call?.revision && call.revision.after !== call.revision.before));
+	if (authored) return ko("Stopped by you. What already ran stays in the scene; Cmd+Z undoes this turn.", "직접 중지했어요. 이미 실행된 편집은 장면에 남아 있고, Cmd+Z로 이번 턴을 되돌릴 수 있어요.");
+	if (block.steps.some(step => step.kind === "tool" && step.status === "cancelled")) return ko("Stopped by you while a step was running; its result is unknown.", "단계 실행 중에 직접 중지했어요. 그 단계의 결과는 알 수 없어요.");
+	return ko("Stopped by you before anything changed in the scene.", "장면이 바뀌기 전에 직접 중지했어요.");
+}

package/src/workflow/login-client.js

@@ -0,0 +1,34 @@
+// The panel's side of pi's provider login (#pi-login, bin/agent/provider-routes.mjs): list the login methods,
+// start one, read its prompts and events (long poll), answer a prompt, cancel, log out. The sidecar runs pi's
+// own login flow; a typed secret goes to the sidecar once, in the answer body, and is never read back.
+import { sidecarRequest } from "../agent-image-client.js";
+
+const request = (path, init) => sidecarRequest(globalThis.fetch.bind(globalThis), path, init);
+const flowPath = (flowId) => `/agent/logins/${encodeURIComponent(flowId)}`;
+
+/** [{ id, name, methods: [{ type: oauth|api_key|chatgpt, label, subscription }], connected, via, source }] */
+export async function fetchLogins() {
+	const result = await request("/agent/logins");
+	return Array.isArray(result?.providers) ? result.providers : [];
+}
+
+export async function startLogin(providerId, type) {
+	return (await request("/agent/logins", { method: "POST", body: JSON.stringify({ providerId, type }) })).flowId;
+}
+
+/** { events, next, done } after `after` entries; waits on the sidecar for the next one. */
+export async function readLogin(flowId, after) {
+	return request(`${flowPath(flowId)}?after=${after}`);
+}
+
+export async function answerLogin(flowId, promptId, value) {
+	return request(`${flowPath(flowId)}/answer`, { method: "POST", body: JSON.stringify({ promptId, value }) });
+}
+
+export async function cancelLogin(flowId) {
+	return request(flowPath(flowId), { method: "DELETE" });
+}
+
+export async function logoutProvider(providerId) {
+	return request(`/agent/logout/${encodeURIComponent(providerId)}`, { method: "POST" });
+}

package/src/workflow/motion-input.js

@@ -1,7 +1,7 @@
 import { SCENES_STORAGE_KEY, readSceneDocument } from "../scenes.js";
 
 const MOTION_INPUT_NODE_TYPE = "motion-input";
-const MOTION_INPUT_NODE_VERSION = 1;
+const MOTION_INPUT_NODE_VERSION = 2;
 
 function text(value, fallback = "") {
 	return typeof value === "string" ? value : fallback;
@@ -13,29 +13,33 @@ function clone(value) {
 	return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, clone(item)]));
 }
 
-/** Normalize a Motion Input node's serializable state. Object URLs are kept
- * in `objectUrl` for this tab only; `url` remains the durable same-origin ref. */
+const SPEC_SCHEMA = "cozyclay.motion-spec.v1";
+const specOf = value => value && typeof value === "object" && !Array.isArray(value) && value.schema === SPEC_SCHEMA && Number.isFinite(value.frames) ? value : null;
+
+/** Normalize a Motion Input node's serializable state: a CozyClay 3 motion spec (the JSON an
+ * agent writes for motion.compile) and the character it drives. */
 export function normalizeMotionInputData(input = {}) {
 	const source = input && typeof input === "object" ? input : {};
-	const url = text(source.url || source.motionUrl);
-	const objectUrl = text(source.objectUrl);
+	const spec = specOf(source.spec);
 	const characterId = text(source.characterId || source.targetCharacterId, "");
 	return {
 		type: MOTION_INPUT_NODE_TYPE,
 		version: MOTION_INPUT_NODE_VERSION,
 		label: text(source.label, "Motion Input"),
-		url: url || objectUrl,
-		objectUrl: objectUrl || null,
 		fileName: text(source.fileName),
-		mimeType: text(source.mimeType, "application/octet-stream"),
 		characterId,
-		status: text(source.status, url || objectUrl ? "ready" : "idle"),
-		frames: Number.isFinite(Number(source.frames)) ? Math.max(0, Math.round(Number(source.frames))) : null,
-		fps: Number.isFinite(Number(source.fps)) ? Number(source.fps) : null,
-		motionRef: source.motionRef && typeof source.motionRef === "object" ? clone(source.motionRef) : null,
+		status: spec ? "ready" : text(source.status) === "error" ? "error" : "idle",
+		spec: spec ? clone(spec) : null,
+		frames: spec ? Math.round(spec.frames) : null,
+		fps: spec ? 24 : null,
 	};
 }
 
+/** Parse a motion spec file's text; null when it is not a cozyclay.motion-spec.v1. */
+export function parseMotionSpec(textValue) {
+	try { return specOf(JSON.parse(textValue)); } catch { return null; }
+}
+
 export function characterHandleId(characterId) {
 	const id = text(characterId).trim();
 	return id ? `character:${id}` : "character";
@@ -51,29 +55,12 @@ export function motionInputOutput(input = {}) {
 	return {
 		type: MOTION_INPUT_NODE_TYPE,
 		version: MOTION_INPUT_NODE_VERSION,
-		url: data.url || null,
-		objectUrl: data.objectUrl,
 		fileName: data.fileName || null,
-		mimeType: data.mimeType,
 		characterId: data.characterId || null,
 		handle: data.characterId ? characterHandleId(data.characterId) : null,
 		frames: data.frames,
 		fps: data.fps,
-		motionRef: data.motionRef,
-	};
-}
-
-/** Build the Scene patch for a connected Motion Input output. */
-export function characterMotionPatch(characterId, input = {}) {
-	const data = normalizeMotionInputData({ ...input, characterId });
-	return {
-		characterId: data.characterId || null,
-		motionRef: {
-			...(data.motionRef ? clone(data.motionRef) : {}),
-			url: data.url || data.objectUrl || null,
-			fileName: data.fileName || null,
-			mimeType: data.mimeType,
-		},
+		spec: data.spec,
 	};
 }
 
@@ -84,7 +71,7 @@ export function activeSceneCharacters(storage = globalThis.localStorage) {
 		const result = readSceneDocument(raw);
 		const scene = result.document?.scenes?.find((entry) => entry.id === result.document.activeSceneId) || result.document?.scenes?.[0];
 		return Array.isArray(scene?.stage?.characters)
-			? scene.stage.characters.filter((entry) => entry && typeof entry.id === "string" && entry.id).map((entry, index) => ({ id: entry.id, name: entry.subject || `Character ${index + 1}`, model: entry.model || null, motionRef: entry.motionRef || null }))
+			? scene.stage.characters.filter((entry) => entry && typeof entry.id === "string" && entry.id).map((entry, index) => ({ id: entry.id, name: entry.subject || `Character ${index + 1}`, model: entry.model || null }))
 			: [];
 	} catch {
 		return [];

package/src/workflow/node-schema.js

@@ -17,7 +17,7 @@ export const DEFAULT_NODE_SCHEMAS = {
 		} },
 		video: { models: {
 			"video-passthrough": { name: "Input Video", input_schema: { schemas: { input_data: { properties: { video_url: field("string", "Video URL", { format: "uri" }) } } } } },
-			"video-generation": { name: "Video Generation", input_schema: { schemas: { input_data: { properties: { provider: field("string", "Provider", { enum: ["comfy", "fal"], default: "comfy" }), prompt: field("string", "Motion prompt"), duration_seconds: field("number", "Duration", { default: 5, minimum: 1, maximum: 15, step: 1 }), aspect: field("string", "Aspect ratio", { enum: ["16:9", "9:16", "1:1", "21:9", "12:7"], default: "16:9" }), extract_mocap: field("boolean", "Extract GVHMR motion", { default: false }) } } } } },
+			"video-generation": { name: "Video Generation", input_schema: { schemas: { input_data: { properties: { provider: field("string", "Provider", { enum: ["comfy", "fal"], default: "comfy" }), prompt: field("string", "Motion prompt"), duration_seconds: field("number", "Duration", { default: 5, minimum: 1, maximum: 15, step: 1 }), aspect: field("string", "Aspect ratio", { enum: ["16:9", "9:16", "1:1", "21:9", "12:7"], default: "16:9" }) } } } } },
 		} },
 		audio: { models: {
 			"audio-passthrough": { name: "Input Audio", input_schema: { schemas: { input_data: { properties: { audio_url: field("string", "Audio URL", { format: "uri" }) } } } } },