cozyclay 3.0.3 → 3.1.0

package/src/workflow/TaskInline.jsx

@@ -0,0 +1,114 @@
+// Task mode inside the chat (task-board.js; the headless TaskBoard.jsx feeds taskView). A task is one quiet line
+// under the turn that dispatched it; a status line under the header counts them; a line opens the task's own view
+// (its steps, cost, cancel / undo, and an input that talks to that task only), and the chat is one click back.
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { FiChevronDown, FiChevronLeft } from "react-icons/fi";
+import { ko } from "../locale.js";
+import { ACTIVE_STATUSES, TASK_STATUS_COPY, boardGroups, compileState, costLabel, dispatchedTaskIds, progressLine, scopeLabel, taskLine, taskReason, taskView } from "./task-board.js";
+import "./task-board.css";
+export { readStoredTaskMode, storeTaskMode } from "./task-board.js";
+
+const useTaskView = () => useSyncExternalStore(taskView.subscribe, taskView.get, taskView.get);
+const openTask = taskId => taskView.set({ open: taskId });
+
+function TaskRow({ task, activity }) {
+	const line = task.status === "running" && compileState(activity, task.taskId).waiting > 0 ? ko("Compile waits for a free worker", "컴파일 차례 기다리는 중") : taskLine(task);
+	const status = TASK_STATUS_COPY[task.status] ?? task.status;
+	return <button type="button" className="task-row" data-status={task.status} data-task-id={task.taskId} onClick={() => openTask(task.taskId)}
+		title={`${task.title} — ${line}`} aria-label={`${task.title}, ${status}: ${line}`}>
+		<span className="task-dot" aria-hidden="true" />
+		<span className="task-row-title">{task.title}</span>
+		<span className="task-row-line">{line}</span>
+	</button>;
+}
+
+/** The tasks a turn dispatched (`steps`), or with `items` every task no turn in the chat dispatched (a restored chat). */
+export function TaskRows({ steps, items }) {
+	const { board, activity } = useTaskView();
+	const placed = items ? new Set(dispatchedTaskIds(items)) : null;
+	const ids = placed ? board.order.filter(id => !placed.has(id)) : [...new Set(dispatchedTaskIds(steps))].filter(id => board.tasks[id]);
+	if (!ids.length) return null;
+	return <div className="task-rows">{ids.map(id => <TaskRow key={id} task={board.tasks[id]} activity={activity} />)}</div>;
+}
+
+const GROUPS = [["failed", ko("need a look", "확인 필요")], ["running", ko("running", "실행 중")], ["waiting", ko("waiting", "대기")], ["done", ko("done", "완료")]];
+
+export function TaskStrip() {
+	const { board, activity } = useTaskView();
+	const [expanded, setExpanded] = useState(false);
+	if (!board.order.length) return null;
+	const groups = boardGroups(board);
+	const shown = GROUPS.filter(([key]) => groups[key].length);
+	return <div className="task-strip" data-expanded={expanded ? "true" : "false"}>
+		<button type="button" className="task-strip-head" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>
+			{shown.map(([key, label]) => <span key={key} className="task-strip-count" data-status={key}><span className="task-dot" aria-hidden="true" />{groups[key].length} {label}</span>)}
+			<FiChevronDown className="task-strip-caret" size={12} aria-hidden="true" />
+		</button>
+		{expanded && <div className="task-rows task-strip-list">{shown.flatMap(([key]) => groups[key]).map(task => <TaskRow key={task.taskId} task={task} activity={activity} />)}</div>}
+	</div>;
+}
+
+function TaskFrames({ client, turnId, labelOf }) {
+	const [lines, setLines] = useState([]);
+	useEffect(() => {
+		if (!turnId || !client) return undefined;
+		const controller = new AbortController();
+		let reply = "";
+		client.frames(turnId, frame => {
+			if (frame.type === "text.delta") { reply += frame.text ?? ""; setLines(list => [...list.filter(line => line.kind !== "reply"), { kind: "reply", text: reply }]); return; }
+			const label = frame.type === "tool.done" ? null : progressLine(frame, labelOf);
+			if (frame.type === "tool.start") reply = "";
+			if (label) setLines(list => [...list.filter(line => line.kind !== "reply"), ...(reply ? [{ kind: "said", text: reply }] : []), { kind: frame.type === "error" ? "error" : "tool", text: label }].slice(-40));
+		}, controller.signal).catch(() => {});
+		return () => controller.abort();
+	}, [client, turnId, labelOf]);
+	if (!lines.length) return <p className="task-frames-empty">{ko("No steps yet.", "아직 단계가 없어요.")}</p>;
+	return <ol className="task-frames">{lines.map((line, index) => <li key={index} data-kind={line.kind}>{line.text}</li>)}</ol>;
+}
+
+export function TaskDetail() {
+	const { board, open, client, undo, labelOf } = useTaskView();
+	const task = open ? board.tasks[open] : null;
+	return task ? <OpenTask key={task.taskId} task={task} client={client} undo={undo} labelOf={labelOf} /> : null;
+}
+
+function OpenTask({ task, client, undo, labelOf }) {
+	const [notice, setNotice] = useState("");
+	const [steering, setSteering] = useState("");
+	useEffect(() => {
+		const onKey = event => { if (event.key === "Escape") openTask(null); };
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, []);
+	const active = ACTIVE_STATUSES.has(task.status);
+	const cost = costLabel(task.usage);
+	const act = async (run, done) => { setNotice(""); try { await run(); setNotice(done); } catch (error) { setNotice(String(error?.message ?? error)); } };
+	const steer = event => {
+		event.preventDefault();
+		const text = steering.trim();
+		if (text) act(() => client.steer(task.taskId, text), ko("Sent to this task.", "이 작업에 전달함.")).then(() => setSteering(""));
+	};
+	return <section className="task-detail" data-status={task.status} data-task-id={task.taskId} aria-label={task.title}>
+		<header className="task-detail-head">
+			<button type="button" className="agent-ghost-button task-detail-back" onClick={() => openTask(null)} autoFocus><FiChevronLeft size={13} aria-hidden="true" />{ko("Chat", "대화")}</button>
+			<span className="task-detail-title">{task.title}</span>
+		</header>
+		<div className="task-detail-body">
+			<div className="task-detail-meta" data-status={task.status}>
+				<span className="task-dot" aria-hidden="true" />
+				<span>{TASK_STATUS_COPY[task.status] ?? task.status}{cost ? ` · ${cost}` : ""}</span>
+				{active && <button type="button" className="agent-ghost-button task-detail-cancel" onClick={() => act(() => client.cancel(task.taskId), ko("Cancelled; its changes go back.", "취소함: 바뀐 것은 되돌아가요."))}>{ko("Cancel", "취소")}</button>}
+				{task.status === "done" && !task.undone && <button type="button" className="agent-ghost-button task-detail-undo" onClick={() => act(() => undo(task.taskId), ko("Undone.", "되돌림."))}>{ko("Undo task", "작업 되돌리기")}</button>}
+			</div>
+			{task.scope?.length > 0 && <p className="task-detail-scope" title={task.scope.join(", ")}>{ko("Touches", "건드리는 것")}: {[...new Set(task.scope.map(scopeLabel))].join(" · ")}</p>}
+			{task.reason && task.status !== "done" && <p className="task-detail-reason">{taskReason(task.reason)}</p>}
+			{task.notes?.map((text, index) => <p key={index} className="task-detail-note">{text}</p>)}
+			{task.summary?.reply && !active && <p className="task-detail-summary">{task.summary.reply}</p>}
+			<TaskFrames key={task.turnId} client={client} turnId={task.turnId} labelOf={labelOf} />
+			{notice && <p className="task-detail-notice" role="status">{notice}</p>}
+		</div>
+		{task.status === "running" && <form className="task-detail-steer" onSubmit={steer}>
+			<input value={steering} onChange={event => setSteering(event.target.value)} placeholder={ko("Tell this task…", "이 작업에게 지시…")} aria-label={ko("Tell this task", "이 작업에게 지시")} />
+		</form>}
+	</section>;
+}

package/src/workflow/agent-client.js

@@ -266,27 +266,6 @@ export function storeModel(key, storage = globalThis.localStorage) {
 	}
 }
 
-/** The supervisor switch (#728): off unless the author turned it on. It rides
- * on every Studio turn as `supervisor: true|false`; the sidecar reviews only a
- * turn sent with `true`, and its own COZYCLAY_SUPERVISOR=off still wins. */
-const AGENT_SUPERVISOR_KEY = "cozyclay.agent.supervisor";
-
-export function readStoredSupervisor(storage = globalThis.localStorage) {
-	try {
-		return storage?.getItem(AGENT_SUPERVISOR_KEY) === "on";
-	} catch {
-		return false;
-	}
-}
-
-export function storeSupervisor(enabled, storage = globalThis.localStorage) {
-	try {
-		storage?.setItem(AGENT_SUPERVISOR_KEY, enabled ? "on" : "off");
-	} catch {
-		// Private-mode storage denial must never break the toggle.
-	}
-}
-
 /** The model to open with: the remembered key when it is still advertised,
  * otherwise the first model the sidecar listed. */
 export function preferredModel(models, stored = readStoredModel()) {
@@ -653,6 +632,10 @@ export function keyRefusedMessage(raw) {
 	return `The model provider refused the credentials${status || reason ? ` (${[status, reason].filter(Boolean).join(": ")})` : ""}.`;
 }
 
+/** True when the agent server itself did not answer: plain `vite` without the sidecar (503/502/404), a dead
+ * port (network error, no status), or an HTML fallback where JSON was expected. Any other status is the server's own answer. */
+export const agentServerUnavailable = (error) => !Number.isFinite(error?.status) || [404, 502, 503].includes(error.status);
+
 export function createHttpTransport({ fetchImpl = globalThis.fetch?.bind(globalThis), surface, capture = track, now = () => performance.now() } = {}) {
 	const activeTurns = new Map();
 	const request = (path, init) => sidecarRequest(fetchImpl, path, init);
@@ -744,7 +727,7 @@ export function createHttpTransport({ fetchImpl = globalThis.fetch?.bind(globalT
 		},
 		/** Streams sidecar events to `onEvent`. Resolves when the turn ends. */
 		async turn(turnRequest, onEvent, signal) {
-			const { sessionId, text, attachFrame, model, effort, attachments, supervisor } = turnRequest;
+			const { sessionId, text, attachFrame, model, effort, attachments, supervisor, tasks } = turnRequest;
 			const attached = Array.isArray(attachments) && attachments.length ? { attachments } : {};
 			const studio = turnRequest.surface === "studio";
 			const turnId = studio ? turnRequest.turnId : null;
@@ -803,9 +786,10 @@ export function createHttpTransport({ fetchImpl = globalThis.fetch?.bind(globalT
 				})
 				: JSON.stringify({ sessionId, text, attachFrame, model, ...(effort ? { effort } : {}), ...attached, ...(telemetry.turnId ? { turn_id: telemetry.turnId } : {}) });
 			try {
-				const response = await fetchImpl(sidecarUrl("/agent/turn"), {
+				// Task mode (the panel's Tasks switch): the turn goes to the main agent, which answers at once and runs tasks.
+				const response = await fetchImpl(sidecarUrl(studio && tasks ? "/agent/main" : "/agent/turn"), {
 					method: "POST",
-					headers: { "content-type": "application/json", accept: "text/event-stream" },
+					headers: { "content-type": "application/json", accept: "text/event-stream", ...(studio && tasks ? { "x-cozyclay-tasks": "on" } : {}) },
 					body,
 					signal,
 				});
@@ -1454,6 +1438,8 @@ export function createAgentChatStore({
 			return () => listeners.delete(listener);
 		},
 		setDraft: (draft) => set({ draft: String(draft ?? "") }),
+		/** A reply the main agent made on its own (task mode: a task ended while nobody was talking to it). */
+		note: (text) => { if (String(text ?? "").trim()) set({ items: [...state.items, { kind: "assistant", id: newId(), text: String(text) }] }); },
 		/** Pictures pasted or dropped into the composer. Returns what was taken and
 		 * what had to be refused, so the composer can say so instead of a picture
 		 * vanishing on its way in. */
@@ -1511,7 +1497,7 @@ export function createAgentChatStore({
 					attachFrame: Boolean(options.attachFrame),
 					model: options.model,
 					effort: options.effort ?? undefined,
-					...(typeof options.supervisor === "boolean" ? { supervisor: options.supervisor } : {}),
+					...(typeof options.supervisor === "boolean" ? { supervisor: options.supervisor } : {}), ...(options.tasks ? { tasks: true } : {}),
 				}, applyEvent, signal);
 			} catch (error) {
 				if (!signal.aborted) applyEvent({ type: "error", code: "upstream", message: String(error?.message || error) });

package/src/workflow/agent-panel.css

@@ -287,7 +287,8 @@
 	cursor: pointer;
 }
 
-.agent-menu button:hover { background: var(--agent-hover, #2b3040); color: var(--agent-text-strong, #f5f7ff); }
+.agent-menu button[disabled] { opacity: 0.45; cursor: not-allowed; }
+.agent-menu button:not([disabled]):hover { background: var(--agent-hover, #2b3040); color: var(--agent-text-strong, #f5f7ff); }
 
 /* --- account strip ----------------------------------------------------- */
 
@@ -869,6 +870,18 @@
 /* The second way in on the signed-out card: a key or a server of one's own. */
 .agent-state-card .agent-use-key { align-self: center; }
 
+/* No agent server behind the page: a quiet status (icon + words), not an alert. */
+.agent-offline-icon { align-self: center; color: var(--agent-text-muted); }
+.agent-offline-card code {
+	padding: 0 var(--agent-space-1);
+	border-radius: var(--agent-radius-sm);
+	background: var(--agent-bg-sunken);
+	color: var(--agent-text);
+	font-size: var(--agent-font-sm);
+}
+.agent-offline-retry { align-self: center; display: inline-flex; align-items: center; gap: var(--agent-space-2); }
+.agent-signin-error { align-self: center; max-width: 32ch; }
+
 .agent-primary-button {
 	align-self: center;
 	border: 1px solid var(--agent-accent-edge);

package/src/workflow/attachment-image.js

@@ -10,6 +10,7 @@
  * Anything under it is sent verbatim: no re-encode, no generation loss.
  */
 import { fileToDataUrl, imageFileFromTransfer } from "./clipboard-image.js";
+import { isVideoFile, videoContactSheet } from "./attachment-video.js";
 
 export const ATTACHMENT_MAX_COUNT = 4;
 export const ATTACHMENT_MAX_DIMENSION = 1600;
@@ -19,8 +20,9 @@ export const ATTACHMENT_JPEG_QUALITY = 0.85;
  * rest here rather than letting the sidecar reject a turn the author sent. */
 const ATTACHMENT_TYPES = Object.freeze(["image/png", "image/jpeg", "image/webp"]);
 export const ATTACHMENT_LIMIT_NOTICE = "Up to 4 images per message";
-export const ATTACHMENT_TYPE_NOTICE = "Attach a PNG, JPEG or WebP image";
-export const ATTACHMENT_FAILED_NOTICE = "That image could not be attached";
+export const ATTACHMENT_TYPE_NOTICE = "Attach a PNG, JPEG or WebP image, or a video";
+export const ATTACHMENT_FAILED_NOTICE = "That image or video could not be attached";
+export const ATTACHMENT_ACCEPT = [...ATTACHMENT_TYPES, "video/*"].join(",");
 
 const EXTENSION_TYPES = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", webp: "image/webp" };
 
@@ -57,7 +59,8 @@ export function attachmentFilesFromTransfer(transfer) {
 	const images = [];
 	let unsupported = 0;
 	for (const file of candidates) {
-		if (attachmentType(file)) images.push(file);
+		// A video travels as a contact sheet image (attachment-video.js).
+		if (attachmentType(file) || isVideoFile(file)) images.push(file);
 		else if (String(file?.type ?? "").startsWith("image/")) unsupported += 1;
 	}
 	return { images, unsupported };
@@ -155,6 +158,10 @@ export function attachmentName(file) {
  * media type is the resolved one: a file dragged in without a type would
  * otherwise be labelled PNG whatever its bytes are. */
 export async function attachmentFromFile(file, options = {}) {
+	if (isVideoFile(file)) {
+		const sheet = await videoContactSheet(file);
+		return { dataUrl: await blobToDataUrl(sheet.blob, "image/jpeg"), name: sheet.name };
+	}
 	const { readDataUrl = fileToDataUrl, ...shrink } = options;
 	const type = attachmentType(file) ?? "image/png";
 	const read = await readDataUrl(file);

package/src/workflow/attachment-video.js

@@ -0,0 +1,91 @@
+/**
+ * A video the author attaches to a turn. The turn envelope carries images
+ * only, and the models behind it read pictures, not clips, so the composer
+ * turns a video into one contact sheet: evenly spaced frames in a grid, each
+ * stamped with its time. It costs one attachment slot and keeps the order of
+ * the action legible to the model.
+ */
+
+const VIDEO_EXTENSIONS = new Set(["mp4", "m4v", "mov", "webm", "ogv", "mkv"]);
+const SHEET_FRAMES = 9;
+const SHEET_COLUMNS = 3;
+const SHEET_CELL_WIDTH = 480;
+const SHEET_JPEG_QUALITY = 0.85;
+
+export function isVideoFile(file) {
+	const declared = String(file?.type ?? "").toLowerCase();
+	if (declared) return declared.startsWith("video/");
+	const extension = String(file?.name ?? "").toLowerCase().match(/\.([a-z0-9]+)$/)?.[1];
+	return VIDEO_EXTENSIONS.has(extension);
+}
+
+function sheetTimes(duration, count) {
+	return Array.from({ length: count }, (_, index) => (index + 0.5) * duration / count);
+}
+
+function formatSheetTime(seconds) {
+	const minutes = Math.floor(seconds / 60);
+	return `${minutes}:${(seconds - minutes * 60).toFixed(1).padStart(4, "0")}`;
+}
+
+function nextEvent(target, name) {
+	return new Promise((resolve, reject) => {
+		const done = () => { target.removeEventListener(name, done); target.removeEventListener("error", failed); resolve(); };
+		const failed = () => { target.removeEventListener(name, done); target.removeEventListener("error", failed); reject(new Error("this browser cannot decode that video")); };
+		target.addEventListener(name, done);
+		target.addEventListener("error", failed);
+	});
+}
+
+/**
+ * One video file as a JPEG contact sheet `{ blob, name }`. Decoding happens in
+ * a detached <video>; a codec the browser cannot play rejects instead of
+ * producing a black sheet.
+ */
+export async function videoContactSheet(file, { doc = globalThis.document, frames = SHEET_FRAMES } = {}) {
+	const url = URL.createObjectURL(file);
+	const video = doc.createElement("video");
+	video.muted = true;
+	video.playsInline = true;
+	video.preload = "auto";
+	try {
+		const loaded = nextEvent(video, "loadeddata");
+		video.src = url;
+		await loaded;
+		const { duration, videoWidth, videoHeight } = video;
+		if (!Number.isFinite(duration) || duration <= 0 || !videoWidth || !videoHeight) throw new Error("that video has no usable length or size");
+		const cellWidth = Math.min(SHEET_CELL_WIDTH, videoWidth);
+		const cellHeight = Math.round(cellWidth * videoHeight / videoWidth);
+		const canvas = doc.createElement("canvas");
+		canvas.width = cellWidth * SHEET_COLUMNS;
+		canvas.height = cellHeight * Math.ceil(frames / SHEET_COLUMNS);
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("this browser cannot draw video frames — no 2D context");
+		context.fillStyle = "#000";
+		context.fillRect(0, 0, canvas.width, canvas.height);
+		context.font = `600 ${Math.max(12, Math.round(cellHeight / 12))}px system-ui, sans-serif`;
+		context.textBaseline = "top";
+		for (const [index, time] of sheetTimes(duration, frames).entries()) {
+			const seeked = nextEvent(video, "seeked");
+			video.currentTime = time;
+			await seeked;
+			const x = (index % SHEET_COLUMNS) * cellWidth;
+			const y = Math.floor(index / SHEET_COLUMNS) * cellHeight;
+			context.drawImage(video, x, y, cellWidth, cellHeight);
+			const stamp = `${index + 1} · ${formatSheetTime(time)}`;
+			const pad = 6;
+			const box = context.measureText(stamp).width + pad * 2;
+			context.fillStyle = "rgba(0, 0, 0, 0.6)";
+			context.fillRect(x + 4, y + 4, box, Math.round(cellHeight / 12) + pad * 2);
+			context.fillStyle = "#fff";
+			context.fillText(stamp, x + 4 + pad, y + 4 + pad);
+		}
+		const blob = await new Promise((resolve, reject) => canvas.toBlob((result) => result ? resolve(result) : reject(new Error("the contact sheet could not be encoded")), "image/jpeg", SHEET_JPEG_QUALITY));
+		const base = String(file?.name ?? "").trim() || "video";
+		return { blob, name: `${base.slice(0, 70)} (${frames} frames over ${duration.toFixed(1)}s)` };
+	} finally {
+		video.removeAttribute("src");
+		video.load();
+		URL.revokeObjectURL(url);
+	}
+}

package/src/workflow/task-board.css

@@ -0,0 +1,98 @@
+/* Task mode in the chat (TaskInline.jsx): one quiet line per task, a count line under the header, the open task's
+   view over the chat, and the outliner mark on rows inside a running task. Studio tokens first, agent tokens after. */
+.task-rows {
+	display: grid;
+	margin: 2px 0 2px 2px;
+	padding-left: 6px;
+	border-left: 2px solid var(--hairline, var(--agent-border, rgba(127, 127, 127, 0.25)));
+	min-width: 0;
+}
+.task-row {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+	height: 24px;
+	padding: 0 6px;
+	border: 0;
+	border-radius: 6px;
+	background: none;
+	color: inherit;
+	font: inherit;
+	font-size: 12px;
+	text-align: left;
+	cursor: pointer;
+}
+.task-row:hover, .task-row:focus-visible { background: var(--chip-fill, rgba(127, 127, 127, 0.1)); outline: none; }
+.task-row-title { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 550; }
+.task-row-line { flex: 1 1 0; min-width: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2, var(--agent-text-muted)); }
+.task-row[data-status="failed"] .task-row-line { color: var(--danger, var(--agent-alert)); }
+.task-row[data-status="cancelled"], .task-row[data-status="done"] .task-row-title { opacity: 0.8; }
+
+.task-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3, var(--agent-text-dim)); }
+[data-status="running"] > .task-dot, [data-status="starting"] > .task-dot { background: var(--select, var(--agent-accent)); animation: task-dot-pulse 1.2s ease-in-out infinite; }
+[data-status="waiting"] > .task-dot, [data-status="queued"] > .task-dot { background: none; box-shadow: inset 0 0 0 1.5px var(--text-3, var(--agent-text-dim)); }
+[data-status="done"] > .task-dot { background: var(--ok, var(--agent-ok)); }
+[data-status="failed"] > .task-dot, [data-status="paused"] > .task-dot { background: var(--danger, var(--agent-alert)); }
+@keyframes task-dot-pulse { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { [data-status] > .task-dot { animation: none; } }
+
+.task-strip { flex: none; border-bottom: 1px solid var(--hairline, var(--agent-border, rgba(127, 127, 127, 0.2))); padding: 0 8px; }
+.task-strip-head {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	height: 26px;
+	padding: 0 6px;
+	border: 0;
+	background: none;
+	color: var(--text-2, var(--agent-text-muted));
+	font: inherit;
+	font-size: 11.5px;
+	cursor: pointer;
+}
+.task-strip-count { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.task-strip-caret { margin-left: auto; transition: transform 0.15s; }
+.task-strip[data-expanded="true"] .task-strip-caret { transform: rotate(180deg); }
+.task-strip-list { margin: 0 0 6px; max-height: 168px; overflow-y: auto; }
+
+.task-detail {
+	position: absolute;
+	inset: 0;
+	z-index: 6;
+	display: flex;
+	flex-direction: column;
+	background: var(--surface-raised, var(--agent-bg));
+	border-radius: inherit;
+}
+.task-detail-head { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border-bottom: 1px solid var(--hairline, var(--agent-border)); }
+.task-detail-back { display: inline-flex; align-items: center; gap: 2px; flex: none; }
+.task-detail-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
+.task-detail-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding: 10px 14px; font-size: 12px; }
+.task-detail-meta { display: flex; align-items: center; gap: 6px; color: var(--text-2, var(--agent-text-muted)); }
+.task-detail-meta .agent-ghost-button { margin-left: auto; }
+.task-detail-scope, .task-detail-reason, .task-detail-note, .task-detail-summary, .task-detail-notice { margin: 0; overflow-wrap: anywhere; }
+.task-detail-scope, .task-detail-reason, .task-detail-note, .task-detail-notice { color: var(--text-2, var(--agent-text-muted)); }
+.task-detail-steer { padding: 8px 10px 10px; border-top: 1px solid var(--hairline, var(--agent-border)); }
+.task-detail-steer input {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 7px 10px;
+	border: 1px solid var(--hairline, var(--agent-border));
+	border-radius: 10px;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+}
+.task-frames { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
+.task-frames li[data-kind="error"] { color: var(--danger, var(--agent-alert)); }
+.task-frames li[data-kind="reply"], .task-frames li[data-kind="said"] { list-style: none; margin-left: -18px; }
+.task-frames-empty { margin: 0; color: var(--text-3, var(--agent-text-dim)); }
+
+[data-task-scope]::after {
+	content: "●";
+	margin-left: 6px;
+	color: var(--select, var(--agent-accent));
+	font-size: 9px;
+}

package/src/workflow/task-board.js

@@ -0,0 +1,169 @@
+// The Studio task board in the agent panel (parallel tasks, P3). Task mode is a per-browser switch (the panel's Tasks
+// toggle) or the server's COZYCLAY_STUDIO_TASKS flag: the chat then talks to the main agent (POST /agent/main), which
+// answers at once and dispatches tasks; this board shows them. Pure parts here (the reducer, labels, the switch's
+// storage); the network side is createTaskBoardClient; the view is TaskBoard.jsx.
+//   server events (GET /agent/main/<sessionId>/events): task.queued|waiting|started|resumed|paused|done|failed|cancelled
+//     carry the task's view { taskId, title, status, scope, reason?, turnId?, usage, summary? }; task.sceneChanged
+//     { taskId, keys, midCommand }; main.turn { turnId } (the main agent reporting on its own)
+//   editor events (the command bus): task.userEdit { taskId, keys } (the user changed something in its scope)
+//   compile activity (motion3-compile.js): { running, waiting } of { taskId, characterId }
+import { ko } from "../locale.js";
+import { sidecarUrl } from "../agent-image-client.js";
+import { parseSseChunk } from "./agent-client.js";
+
+const TASKS_KEY = "cozyclay.agent.tasks";
+export function readStoredTaskMode(storage = globalThis.localStorage) {
+	try { return storage?.getItem(TASKS_KEY) === "on"; } catch { return false; }
+}
+export function storeTaskMode(enabled, storage = globalThis.localStorage) {
+	try { storage?.setItem(TASKS_KEY, enabled ? "on" : "off"); } catch { /* storage may be unavailable */ }
+}
+
+export const TASK_STATUS_COPY = {
+	queued: ko("Queued", "대기열"),
+	waiting: ko("Waiting for scope", "영역 대기"),
+	starting: ko("Starting", "시작 중"),
+	running: ko("Running", "작업 중"),
+	paused: ko("Paused: Studio lost", "일시정지: Studio 연결 끊김"),
+	done: ko("Done", "완료"),
+	failed: ko("Failed", "실패"),
+	cancelled: ko("Cancelled", "취소됨"),
+};
+export const ACTIVE_STATUSES = new Set(["queued", "waiting", "starting", "running", "paused"]);
+
+export const emptyBoard = () => ({ order: [], tasks: {}, after: 0 });
+
+/** The board after one event (server, editor or compile). Unknown events leave it as it is. */
+export function reduceBoard(board, event) {
+	if (!event || typeof event !== "object") return board;
+	const after = Number.isFinite(event.eventSeq) ? Math.max(board.after, event.eventSeq) : board.after;
+	const patch = (taskId, change) => {
+		const known = board.tasks[taskId];
+		if (!known && !change.title) return { ...board, after };
+		const task = { notes: [], ...known, ...change, taskId };
+		return { ...board, after, order: known ? board.order : [...board.order, taskId], tasks: { ...board.tasks, [taskId]: task } };
+	};
+	const note = (taskId, text) => (board.tasks[taskId] ? patch(taskId, { notes: [...board.tasks[taskId].notes, text].slice(-4) }) : { ...board, after });
+	if (event.type === "task.sceneChanged") return note(event.taskId, ko(`The scene changed during a reload: ${event.keys.join(", ")}`, `새로고침 중에 장면이 바뀜: ${event.keys.join(", ")}`));
+	if (event.type === "task.userEdit") return note(event.taskId, ko(`You changed ${event.keys.join(", ")}; the task reads it again`, `${event.keys.join(", ")}을(를) 직접 바꿈: 작업이 다시 읽어요`));
+	if (event.type === "task.undone") return board.tasks[event.taskId] ? patch(event.taskId, { undone: true }) : board;
+	if (typeof event.type === "string" && event.type.startsWith("task.") && event.taskId && event.status) {
+		const { type, at, eventSeq, ...view } = event;
+		return patch(event.taskId, { ...view, ...(type === "task.started" || type === "task.resumed" ? { progress: "" } : {}) });
+	}
+	return { ...board, after };
+}
+
+/** A board read (GET .../board) merged under what the events already said. */
+export function seedBoard(board, tasks = []) {
+	return tasks.reduce((acc, view) => (acc.tasks[view.taskId] ? acc : reduceBoard(acc, { type: "task.seed", ...view })), board);
+}
+
+/** The line a running card shows: the last tool it started, or the compile it waits for. */
+export function progressLine(frame, labelOf = call => call.name) {
+	if (frame?.type === "tool.start") return labelOf(frame);
+	if (frame?.type === "error") return ko(`Error: ${frame.message ?? frame.code}`, `오류: ${frame.message ?? frame.code}`);
+	return null;
+}
+
+/** A task's wait or failure reason in the author's words: the server names the blocking task by id and title. */
+export function taskReason(reason) {
+	// Greedy to the last ")": a title may hold parentheses of its own.
+	const after = /(?:waits for|held by) task \S+ \((.+)\)/.exec(String(reason ?? ""))?.[1];
+	if (after) return ko(`Starts after "${after}"`, `'${after}' 끝나면 시작`);
+	if (/scope is held/.test(String(reason ?? ""))) return ko("Starts when another task frees its part", "다른 작업이 끝나면 시작");
+	return reason ?? "";
+}
+
+/** The one line a task row shows after its title. */
+export function taskLine(task) {
+	if (task.status === "running") return task.progress || ko("Working…", "작업 중…");
+	if (task.status === "done") return task.undone ? ko("Undone", "되돌림") : String(task.summary?.reply ?? "").split(/(?<=[.!?。])\s/)[0] || TASK_STATUS_COPY.done;
+	if (task.reason) return taskReason(task.reason);
+	return TASK_STATUS_COPY[task.status] ?? task.status;
+}
+
+const SCOPE_NAMES = { timeline: ko("timeline", "타임라인"), stage: ko("stage", "무대"), scene: ko("scene", "장면"), object: ko("object", "오브젝트"), character: ko("character", "캐릭터"), shot: ko("shot", "샷") };
+/** A scope key (object:<id>, timeline, ...) as a word; the raw key stays in the tooltip. */
+export const scopeLabel = key => SCOPE_NAMES[String(key).split(":")[0]] ?? String(key);
+
+/** Rows by state for the status line: what needs a look first, then what runs, waits and ended. */
+export function boardGroups(board) {
+	const groups = { failed: [], running: [], waiting: [], done: [] };
+	for (const id of board.order) {
+		const task = board.tasks[id];
+		const group = task.status === "failed" || task.status === "paused" ? "failed" : task.status === "running" || task.status === "starting" ? "running" : ACTIVE_STATUSES.has(task.status) ? "waiting" : "done";
+		groups[group].push(task);
+	}
+	return groups;
+}
+
+/** The task ids a turn's dispatch_task steps started, in order (a duplicate points at the task it repeats). */
+export const dispatchedTaskIds = steps => (steps ?? []).filter(step => step.kind === "tool" && step.name === "dispatch_task")
+	.map(step => step.result?.taskId ?? step.result?.duplicateOf).filter(Boolean);
+
+/** What the task view shares between the headless board (TaskBoard.jsx) and the rows in the chat (TaskInline.jsx). */
+function createTaskViewStore() {
+	let state = { board: emptyBoard(), activity: null, client: null, undo: null, open: null };
+	const listeners = new Set();
+	return {
+		get: () => state,
+		set: patch => { state = { ...state, ...patch }; for (const listener of listeners) listener(); },
+		subscribe: listener => { listeners.add(listener); return () => listeners.delete(listener); },
+	};
+}
+// One agent panel per page, so one view.
+export const taskView = createTaskViewStore();
+
+/** "$0.12" for a task's cost, or "" when nothing is known yet. */
+export const costLabel = usage => (Number.isFinite(usage?.cost) && usage.cost > 0 ? `$${usage.cost.toFixed(2)}` : "");
+
+/** The compile a task waits for: how many of its compiles wait and how many run. */
+export function compileState(activity, taskId) {
+	const mine = list => (list ?? []).filter(meta => meta?.taskId === taskId).length;
+	return { waiting: mine(activity?.waiting), running: mine(activity?.running) };
+}
+
+/** The open scopes the editor's bus reports: taskId -> keys (task.begun / task.scope / task.finished|cancelled). */
+export function reduceScopes(scopes, event) {
+	if (event?.type === "task.begun" || event?.type === "task.scope") return { ...scopes, [event.taskId]: event.scope ?? [] };
+	if (event?.type === "task.finished" || event?.type === "task.cancelled") { const { [event.taskId]: _gone, ...rest } = scopes; return rest; }
+	return scopes;
+}
+
+/**
+ * The sidecar side of the board. All requests are same-origin with the Studio session's owner cookie.
+ * fetchImpl(url, init) -> Response; url(path) -> the sidecar URL.
+ */
+export function createTaskBoardClient({ fetchImpl = globalThis.fetch?.bind(globalThis), url = sidecarUrl } = {}) {
+	const json = async (path, init) => {
+		const response = await fetchImpl(url(path), { credentials: "same-origin", headers: { accept: "application/json", "content-type": "application/json" }, ...init });
+		const body = await response.json().catch(() => ({}));
+		if (!response.ok) throw Object.assign(new Error(body?.error?.message ?? `${response.status}`), { status: response.status, code: body?.error?.code });
+		return body;
+	};
+	/** Streams an SSE route to onEvent until it ends or signal aborts. */
+	async function stream(path, onEvent, signal) {
+		const response = await fetchImpl(url(path), { credentials: "same-origin", headers: { accept: "text/event-stream" }, signal });
+		if (!response.ok || !response.body) throw Object.assign(new Error(`${response.status}`), { status: response.status });
+		const reader = response.body.getReader(), decoder = new TextDecoder();
+		let buffer = "";
+		try {
+			while (true) {
+				const { value, done } = await reader.read();
+				if (done) break;
+				const parsed = parseSseChunk(buffer + decoder.decode(value, { stream: true }));
+				buffer = parsed.tail;
+				for (const event of parsed.events) onEvent(event);
+			}
+		} finally { reader.releaseLock(); }
+	}
+	const id = value => encodeURIComponent(value);
+	return {
+		board: sessionId => json(`/agent/main/${id(sessionId)}/board`),
+		events: (sessionId, after, onEvent, signal) => stream(`/agent/main/${id(sessionId)}/events?after=${after}`, onEvent, signal),
+		frames: (turnId, onEvent, signal) => stream(`/agent/turn/${id(turnId)}/events?after=0`, onEvent, signal),
+		cancel: taskId => json(`/agent/task/${id(taskId)}/cancel`, { method: "POST", body: "{}" }),
+		steer: (taskId, text) => json(`/agent/task/${id(taskId)}/steer`, { method: "POST", body: JSON.stringify({ text }) }),
+	};
+}

package/tools/check-eslint.mjs

@@ -10,7 +10,8 @@ import { fileURLToPath } from "node:url";
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const baselinePath = join(root, "tools", "eslint-baseline.json");
 
-const run = spawnSync(join(root, "node_modules", ".bin", "eslint"), [".", "--format", "json"], {
+// Run the package's JS entry through node: the .bin shim is a .cmd on Windows, which spawnSync cannot start without a shell.
+const run = spawnSync(process.execPath, [join(root, "node_modules", "eslint", "bin", "eslint.js"), ".", "--format", "json"], {
 	cwd: root,
 	encoding: "utf8",
 	maxBuffer: 512 * 1024 * 1024,

package/tools/check-knip.mjs

@@ -11,7 +11,8 @@ const root = join(dirname(fileURLToPath(import.meta.url)), '..');
 const baselinePath = join(root, 'tools', 'knip-baseline.json');
 
 // knip exits 1 when it finds issues; only a missing/unparseable report is a failure.
-const run = spawnSync(join(root, 'node_modules', '.bin', 'knip'), ['--reporter', 'json', '--no-progress'], {
+// Run the package's JS entry through node: the .bin shim is a .cmd on Windows, which spawnSync cannot start without a shell.
+const run = spawnSync(process.execPath, [join(root, 'node_modules', 'knip', 'bin', 'knip.js'), '--reporter', 'json', '--no-progress'], {
 	cwd: root,
 	encoding: 'utf8',
 	maxBuffer: 256 * 1024 * 1024,