cozyclay 3.0.3 → 3.1.1

package/src/text/text-object.jsx

@@ -8,7 +8,7 @@ import { useEffect, useMemo, useState } from "react";
 import * as THREE from "three";
 import { Font } from "three/examples/jsm/loaders/FontLoader.js";
 import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
-import { autoFlat } from "../set-pieces.jsx";
+import { autoFlat } from "../auto-flat.js";
 import { textIsSolid, textLayout } from "./text-record.js";
 
 // The app's own sans first, then the system's, which carries Hangul and CJK.

package/src/ui.jsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { createScrubGesture } from "./ui-scrub.js";
 import { isImeComposing } from "./ime.js";
+import { usePopover } from "./popover.js";
 
 // Custom dropdown, structurally matched to the reference (`.dropdown`,
 // `dd-caret`, `dropdown-menu`, `dropdown-item`, `dd-check`) with the keyboard
@@ -13,7 +14,7 @@ import { isImeComposing } from "./ime.js";
 // scroll pane, so an in-place absolute menu gets clipped to the card's
 // height (the pose foldout is ~70 px tall against a ~290 px menu). Scrolling
 // or resizing while open closes the menu instead of chasing the trigger.
-export function Dropdown({ value, options, onChange, ariaLabel }) {
+export function Dropdown({ value, options, onChange, ariaLabel, menuClassName = "" }) {
 	const [open, setOpen] = useState(false);
 	const [highlight, setHighlight] = useState(-1);
 	const rootRef = useRef(null);
@@ -25,19 +26,10 @@ export function Dropdown({ value, options, onChange, ariaLabel }) {
 	const selectedIndex = options.findIndex((o) => o.value === value);
 	const selected = selectedIndex >= 0 ? options[selectedIndex] : null;
 
-	// Close on any mousedown outside the dropdown; the portaled menu is not
-	// inside rootRef, so it is checked separately. Effect cleanup also covers
-	// unmounting while open.
-	useEffect(() => {
-		if (!open) return;
-		const onDocMouseDown = (e) => {
-			if (rootRef.current?.contains(e.target)) return;
-			if (menuRef.current?.contains(e.target)) return;
-			setOpen(false);
-		};
-		document.addEventListener("mousedown", onDocMouseDown);
-		return () => document.removeEventListener("mousedown", onDocMouseDown);
-	}, [open]);
+	// Close on any mousedown outside the dropdown (the portaled menu is not
+	// inside rootRef, so it is checked separately) and when another shell
+	// popover opens. Effect cleanup also covers unmounting while open.
+	usePopover(open, () => setOpen(false), [rootRef, menuRef]);
 
 	// Position the portaled menu from the trigger: below when it fits, above
 	// otherwise, height capped to the free space. Scroll and resize close the
@@ -136,12 +128,12 @@ export function Dropdown({ value, options, onChange, ariaLabel }) {
 			</button>
 			{open && menuBox && createPortal(
 				<div
-					className="dropdown-menu"
+					className={"dropdown-menu " + menuClassName}
 					ref={menuRef}
 					id={listId}
 					role="listbox"
 					aria-activedescendant={highlight >= 0 && highlight < options.length ? `${uid}-opt-${highlight}` : undefined}
-					style={{ position: "fixed", zIndex: 80, ...menuBox, overflowY: "auto" }}
+					style={{ position: "fixed", zIndex: "var(--z-popover, 90)", ...menuBox, overflowY: "auto" }}
 					onKeyDown={onKeyDown}
 				>
 					{options.map((opt, i) => (

package/src/use-embed-bridge.js

@@ -1,12 +1,9 @@
-import { useRef, useState } from "react";
 import { isPlaygroundEmbed } from "./playground.js";
 
 export function useEmbedBridge() {
 	const embedMode = ["scene", "playview"].includes(new URLSearchParams(globalThis.location?.search || "").get("embed"));
-	// The landing page's try-it iframe: full studio interaction on a preset
-	// scene with the project chrome hidden and saving off (see playground.js).
+	// The landing page's try-it iframe: full studio interaction with the
+	// project chrome hidden and saving off (see playground.js).
 	const playgroundMode = isPlaygroundEmbed(globalThis.location?.search);
-	const [playgroundHint, setPlaygroundHint] = useState(null);
-	const playgroundExportRef = useRef(null);
-	return { embedMode, playgroundMode, playgroundHint, setPlaygroundHint, playgroundExportRef };
+	return { embedMode, playgroundMode };
 }

package/src/use-render-activity.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { usePlaybackEffects } from "./motion/playback-frame-store.js";
 
 export const RENDER_ACTIVITY_KEYS = new Set([
 	"KeyW",
@@ -31,7 +32,8 @@ export function shouldRefreshIkExposure({ cameraGesture, cameraGestureEnded, exp
  * this hook covers direct ref mutations such as IK drags, camera look/dolly,
  * plan puck drags, scrubbing, and held WASD/QE movement.
  */
-export function useRenderActivity(alwaysActive) {
+export function useRenderActivity(alwaysActive, playback = {}) {
+	usePlaybackEffects(playback);
 	const [interactive, setInteractive] = useState(false);
 
 	useEffect(() => {

package/src/view-ghosts.jsx

@@ -7,6 +7,7 @@ import { useFrame, useThree } from "@react-three/fiber";
 import { GIZMO_LAYER } from "./dualview.jsx";
 import { GhostSet } from "./ghost-set.js";
 import { isTakeV3 } from "./motion3/playback.js";
+import { playbackFrame, usePlaybackSnapshot } from "./motion/playback-frame-store.js";
 import { ghostFrames, takeKeyFrames, useGhostSettings } from "./view-ghosts.js";
 
 // Kit parts mount in the same commit as a take or record change, sometimes a frame later: the
@@ -17,14 +18,15 @@ const SOURCE_PASSES = 3;
  * rig: the active character's live rig; take: its installed motion; frame: the playhead;
  * objects: the authored records; propTake: { frameCount, fps, objectTracks } as SetProps gets it.
  */
-export function ViewGhosts({ rig, take, frame, objects, propTake }) {
+export function ViewGhosts({ rig, take, objects, propTake }) {
+	const liveFrame = usePlaybackSnapshot(playbackFrame);
 	const settings = useGhostSettings();
 	const scene = useThree((state) => state.scene), gl = useThree((state) => state.gl), invalidate = useThree((state) => state.invalidate);
 	const set = useMemo(() => new GhostSet({ layer: GIZMO_LAYER }), []);
 	const on = settings.mode !== "off" && !!rig && isTakeV3(take);
 	const keyFrames = useMemo(() => (on && settings.mode === "keys" ? takeKeyFrames(take, objects) : []), [on, settings.mode, take, objects]);
-	const entries = useMemo(() => (on ? ghostFrames({ frame, last: take.frameCount - 1, ...settings, keyFrames }) : []),
-		[on, frame, take, settings, keyFrames]);
+	const entries = useMemo(() => (on ? ghostFrames({ frame: liveFrame, last: take.frameCount - 1, ...settings, keyFrames }) : []),
+		[on, liveFrame, take, settings, keyFrames]);
 	useEffect(() => {
 		if (!on) return undefined;
 		scene.add(set.object);

package/src/viewport-visible-rect.js

@@ -0,0 +1,37 @@
+/** Return the centred aspect rectangle in the canvas not covered by chrome. */
+export function visibleViewOffset({ canvas, leftColumn, rightColumn, topbar, dock }, aspect) {
+	if (!canvas || !Number.isFinite(aspect) || aspect <= 0) return null;
+	const edge = (rect, side, fallback) => rect?.width > 0 && rect?.height > 0 ? rect[side] : fallback;
+	const left = Math.max(canvas.left, edge(leftColumn, "right", canvas.left));
+	const right = Math.min(canvas.right, edge(rightColumn, "left", canvas.right));
+	const top = Math.max(canvas.top, edge(topbar, "bottom", canvas.top));
+	const bottom = Math.min(canvas.bottom, edge(dock, "top", canvas.bottom));
+	if (right - left < 50 || bottom - top < 50) return null;
+	const centerX = (left + right) / 2;
+	const centerY = (top + bottom) / 2;
+	return {
+		fullWidth: canvas.width,
+		fullHeight: canvas.height,
+		x: canvas.left + canvas.width / 2 - centerX,
+		y: canvas.top + canvas.height / 2 - centerY,
+		width: canvas.width,
+		height: canvas.height,
+	};
+}
+
+export function updateVisibleViewOffsets({ editorCam, poserCam, canvas, aspect }) {
+	const offset = visibleViewOffset({
+		canvas,
+		leftColumn: document.querySelector(".studio-left-column")?.getBoundingClientRect(),
+		rightColumn: document.querySelector(".studio-right-column")?.getBoundingClientRect(),
+		topbar: document.querySelector(".topbar")?.getBoundingClientRect(),
+		dock: document.querySelector(".studio-dock-slot")?.getBoundingClientRect(),
+	}, aspect);
+	for (const camera of [editorCam, poserCam]) if (camera) {
+		camera.aspect = offset?.fullWidth / offset?.fullHeight || aspect;
+		offset
+			? camera.setViewOffset(offset.fullWidth, offset.fullHeight, offset.x, offset.y, offset.width, offset.height)
+			: camera.clearViewOffset();
+		camera.updateProjectionMatrix();
+	}
+}

package/src/workflow/AgentPanel.jsx

@@ -1,15 +1,15 @@
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { FiAlertTriangle, FiArrowUp, FiCheck, FiChevronRight, FiClock, FiDownload, FiImage, FiMoreHorizontal, FiPaperclip, FiPlus, FiRotateCw, FiX } from "react-icons/fi";
-import { ATTACHMENT_FAILED_NOTICE, ATTACHMENT_LIMIT_NOTICE, ATTACHMENT_TYPE_NOTICE, attachmentFilesFromTransfer, attachmentFromFile, transferCarriesFiles } from "./attachment-image.js";
+import { Fragment, Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { FiAlertTriangle, FiArrowUp, FiCamera, FiCheck, FiChevronRight, FiClock, FiDownload, FiImage, FiMoreHorizontal, FiPaperclip, FiPlus, FiPower, FiRotateCw, FiX } from "react-icons/fi";
+import { ATTACHMENT_ACCEPT, ATTACHMENT_FAILED_NOTICE, ATTACHMENT_LIMIT_NOTICE, ATTACHMENT_TYPE_NOTICE, attachmentFilesFromTransfer, attachmentFromFile, transferCarriesFiles } from "./attachment-image.js";
 import { isImeComposing } from "../ime.js";
 import { useStudioShell } from "../shell/studio-shell-context.js";
 import { ko } from "../locale.js";
 import {
 	AGENT_PANEL_OVERLAY_BREAKPOINT,
 	AGENT_PANEL_RAIL_WIDTH,
-	AGENT_PANEL_WIDTH_MAX,
-	AGENT_PANEL_WIDTH_MIN,
+	AGENT_PANEL_WIDTH_MAX, AGENT_PANEL_WIDTH_MIN,
 	AGENT_STATES,
+	agentServerUnavailable,
 	describeActivity,
 	JOB_STATE_COPY,
 	createAgentChatStore,
@@ -28,19 +28,20 @@ import {
 	formatTurnClock,
 	formatResetIn,
 	readStoredPanelWidth,
-	readStoredSupervisor,
-	storeModel,
-	storePanelWidth,
-	storeSupervisor,
+	storeModel, storePanelWidth,
 	STUDIO_SESSION_STORAGE_KEY,
 	selectedModelRoles,
 	shortModelId,
 	supervisorFollowUp,
 } from "./agent-client.js";
+import { TaskDetail, TaskRows, TaskStrip, readStoredTaskMode, storeTaskMode } from "./TaskInline.jsx";
 import "./agent-panel.css";
+// The task board (task mode, parallel Studio tasks) loads only where it is used: the Studio, never the workflow page.
+const TaskBoard = lazy(() => import("./TaskBoard.jsx"));
 import { AgentProgressCard } from "./AgentProgressCard.jsx";
 import { LoginPanel } from "./LoginPanel.jsx";
 import { TurnSteps } from "./AgentTurnSteps.jsx";
+import { PlanCard } from "./AgentPlanCard.jsx";
 import { ReplyText } from "./AgentReplyText.jsx";
 import { stepLabel, turnLayout } from "./agent-turn.js";
 
@@ -81,6 +82,20 @@ function ImageResultCard({ image, onUse, onUndo, onRegenerate, onOpen }) {
 	</div>;
 }
 
+// Plain `vite` serves the Studio without the agent server, so there is nothing to sign in to. The card says
+// so and how to start it, in place of sign-in buttons that could only fail.
+function OfflineCard({ probing, onRetry }) {
+	return <div className="agent-state-card agent-offline-card" data-agent-card="offline" role="status" aria-live="polite">
+		<FiPower className="agent-offline-icon" size={18} aria-hidden="true" />
+		<h3>{ko("Agent server is not running", "에이전트 서버가 실행 중이 아니에요")}</h3>
+		<p>{ko(<>Start CozyClay with <code>npx cozyclay</code> (or <code>npm run dev</code> in a checkout) to sign in.</>,
+			<>로그인하려면 <code>npx cozyclay</code>(체크아웃에서는 <code>npm run dev</code>)로 CozyClay를 시작하세요.</>)}</p>
+		<button type="button" className="agent-ghost-button agent-offline-retry" onClick={onRetry} disabled={probing} aria-busy={probing}>
+			<FiRotateCw size={11} aria-hidden="true" /> {probing ? ko("Checking…", "확인 중…") : ko("Retry", "다시 확인")}
+		</button>
+	</div>;
+}
+
 function PausedCard({ resetAt, onRetry, onSwitchModel }) {
 	const [now, setNow] = useState(() => Date.now());
 	useEffect(() => {
@@ -275,6 +290,11 @@ export default function AgentPanel({
 	const [menuOpen, setMenuOpen] = useState(false);
 	const [account, setAccount] = useState(null);
 	const [authState, setAuthState] = useState("loading");
+	// "offline" is its own auth state: no agent server answered /agent/models. Retry bumps `probe`.
+	const [probe, setProbe] = useState(0);
+	const [probing, setProbing] = useState(false);
+	// Why the last ChatGPT sign-in click did not start, under its button; a click never fails silently.
+	const [signInError, setSignInError] = useState("");
 	// No model is assumed. Sending a guessed id is how a turn fails upstream with
 	// nothing the panel can explain, so the composer waits for /agent/models.
 	const [models, setModels] = useState([]);
@@ -292,10 +312,9 @@ export default function AgentPanel({
 	// remembered so a reload does not quietly move the next turn to another
 	// provider's model.
 	const chooseModel = useCallback((id) => { setModel(id); setEffort(null); storeModel(id); }, []);
-	// The supervisor switch (#728): a preference like the model pick. Off skips
-	// the post-turn review for every turn sent from this panel.
-	const [supervisorOn, setSupervisorOn] = useState(() => readStoredSupervisor());
-	const toggleSupervisor = useCallback(() => setSupervisorOn((current) => { storeSupervisor(!current); return !current; }), []);
+	// Task mode (parallel Studio tasks): the chat talks to the main agent, which answers at once and runs tasks on the board.
+	const [taskMode, setTaskMode] = useState(() => surface === "studio" && readStoredTaskMode());
+	const toggleTaskMode = useCallback(() => setTaskMode((current) => { storeTaskMode(!current); return !current; }), []);
 	// One place takes `{ providers, models }` from the sidecar: the grouped list
 	// the dropdown draws, the flat key-addressed list every lookup uses, and the
 	// model to open with. Returns false when nothing was advertised.
@@ -331,6 +350,7 @@ export default function AgentPanel({
 	const [restoreReady, setRestoreReady] = useState(surface !== "studio");
 
 	const composerRef = useRef(null);
+	const fileInputRef = useRef(null);
 	const focusPendingRef = useRef(false);
 	const transcriptRef = useRef(null);
 
@@ -371,8 +391,8 @@ export default function AgentPanel({
 				if (!cancelled) {
 					store.newSession();
 					// A session id with no record behind it (the pane opened, nothing
-					// was ever sent) is nothing to restore, not a failure.
-					if (error?.status !== 404) setRestoreNotice("Previous conversation could not be restored");
+					// was ever sent) is nothing to restore, not a failure; with no agent server the offline card says why.
+					if (![404, 502, 503].includes(error?.status) && !(error instanceof TypeError || error instanceof SyntaxError)) setRestoreNotice("Previous conversation could not be restored");
 				}
 			} finally {
 				if (!cancelled) setRestoreReady(true);
@@ -445,25 +465,18 @@ export default function AgentPanel({
 	useEffect(() => {
 		let cancelled = false;
 		(async () => {
-			try {
-				const status = await transport.status();
-				if (cancelled) return;
-				setAccount(status);
-				setAuthState(sessionState(status));
-			} catch {
-				if (!cancelled) setAuthState("signed-out");
-			}
-			try {
-				const advertised = await transport.models();
-				if (cancelled) return;
-				if (!applyModelList(advertised)) { setModelsState("failed"); return; }
-			} catch {
-				// An unanswered model list is a visible state, not a silent guess.
-				if (!cancelled) setModelsState("failed");
-			}
+			const [status, advertised] = await Promise.allSettled([transport.status(), transport.models()]);
+			if (cancelled) return;
+			setProbing(false);
+			// No agent server behind the page: the panel says so instead of offering sign-ins that cannot work.
+			if (advertised.status === "rejected" && agentServerUnavailable(advertised.reason)) { setAuthState("offline"); setModelsState("failed"); return; }
+			if (status.status === "fulfilled") { setAccount(status.value); setAuthState(sessionState(status.value)); } else setAuthState("signed-out");
+			// An unanswered model list is a visible state, not a silent guess.
+			if (advertised.status === "rejected" || !applyModelList(advertised.value)) setModelsState("failed");
 		})();
 		return () => { cancelled = true; };
-	}, [applyModelList, sessionState, transport]);
+	}, [applyModelList, probe, sessionState, transport]);
+	const retryServer = useCallback(() => { setProbing(true); setProbe((count) => count + 1); }, []);
 
 	// Sign-in finishes in another window. The panel picks the session up when
 	// this document is looked at again, or when the host announces the return —
@@ -601,6 +614,11 @@ export default function AgentPanel({
 		attachFiles(images);
 		return true;
 	}, [attachFiles]);
+	// The paperclip opens the file picker; what it returns goes through the same rules as a drop.
+	const onPickFiles = useCallback((event) => {
+		takeTransfer({ files: event.target.files });
+		event.target.value = "";
+	}, [takeTransfer]);
 	const onComposerPaste = useCallback((event) => {
 		if (takeTransfer(event.clipboardData)) event.preventDefault();
 	}, [takeTransfer]);
@@ -617,14 +635,16 @@ export default function AgentPanel({
 	}, []);
 	const onComposerDrop = useCallback((event) => {
 		setDropping(false);
-		if (takeTransfer(event.dataTransfer)) event.preventDefault();
+		// The textarea and the composer both listen; the drop bubbles, so only the first one takes it.
+		if (!event.defaultPrevented && takeTransfer(event.dataTransfer)) event.preventDefault();
 	}, [takeTransfer]);
 
 	const runTurn = useCallback((text) => {
 		setAttachNotice(null);
 		setSteerNotice("");
-		return store.send(text, { attachFrame, model, effort: effort ?? undefined, supervisor: supervisorOn });
-	}, [attachFrame, effort, model, store, supervisorOn]);
+		return store.send(text, { attachFrame, model, effort: effort ?? undefined, tasks: taskMode });
+	}, [attachFrame, effort, model, store, taskMode]);
+	const taskStepLabel = useCallback((call) => stepLabel(call, presentation.toolLabels), [presentation.toolLabels]);
 	const stopTurn = useCallback(() => store.stop(), [store]);
 	// Steering the turn that is already running: the composer's text joins THAT
 	// turn instead of starting a second one. A refusal (the turn ended while the
@@ -645,10 +665,13 @@ export default function AgentPanel({
 	// "ready" with nothing it may send (#379).
 	const signIn = useCallback(async () => {
 		setAuthState("signing-in");
+		setSignInError("");
 		try {
 			await transport.signIn();
 			await refreshProviderState();
-		} catch {
+		} catch (error) {
+			if (agentServerUnavailable(error)) { setAuthState("offline"); return; }
+			setSignInError(error?.message || ko("Sign-in could not start.", "로그인을 시작하지 못했어요."));
 			setAuthState("signed-out");
 		}
 	}, [refreshProviderState, transport]);
@@ -819,7 +842,8 @@ export default function AgentPanel({
 						{resetLabel && <span className="agent-account-reset">resets in {resetLabel}</span>}
 					</div>}
 					<button type="button" role="menuitem" onClick={clearContext}>Clear context</button>
-					<button type="button" role="menuitem" className="agent-menu-keys" aria-expanded={keysOpen} onClick={toggleProviderKeys}>Connect a model…</button>
+					<button type="button" role="menuitem" className="agent-menu-keys" aria-expanded={keysOpen} onClick={toggleProviderKeys}
+						disabled={authState === "offline"} title={authState === "offline" ? ko("The agent server is not running", "에이전트 서버가 실행 중이 아니에요") : undefined}>Connect a model…</button>
 					{account?.signedIn && <button type="button" role="menuitem" onClick={signOut}>Sign out</button>}
 				</div>}
 			</span>
@@ -827,20 +851,23 @@ export default function AgentPanel({
 		</header>
 
 		{restoreNotice && <div className="agent-toast" role="status">{restoreNotice}</div>}
-		{steerNotice && <div className="agent-toast alert agent-steer-notice" role="alert">{steerNotice}</div>}
+		{steerNotice && <div className="agent-toast alert agent-steer-notice" role="alert">{steerNotice}</div>}{surface === "studio" && taskMode && authenticated && <TaskStrip />}
 
 		{/* An inline section, not a modal: the panel stays the one place the
 		    conversation and the credentials it runs on are managed. */}
-		{keysOpen && <LoginPanel onClose={() => setKeysOpen(false)} onChatGPT={signIn} onChanged={refreshProviderState} />}
+		{keysOpen && authState !== "offline" && <LoginPanel onClose={() => setKeysOpen(false)} onChatGPT={signIn} onChanged={refreshProviderState} />}
 
 		<div className="agent-transcript" ref={transcriptRef} aria-live="polite" aria-label="Conversation" data-agent-transcript="true">
 			{authState === "signed-out" && <div className="agent-state-card" data-agent-card="signed-out">
 				<h3>Connect a model</h3>
 				<p>Sign in with ChatGPT, or log in to another provider with a subscription, an API key, or your own proxy server. Sign-in happens in your browser — no token is ever stored in this page.</p>
 				<button type="button" className="agent-primary-button agent-signin" onClick={signIn}>Sign in with ChatGPT</button>
+				{signInError && <p className="agent-key-error agent-signin-error" role="alert">{signInError}</p>}
 				<button type="button" className="agent-ghost-button agent-use-key" onClick={openProviderKeys}>Log in with another provider</button>
 			</div>}
 
+			{authState === "offline" && <OfflineCard probing={probing} onRetry={retryServer} />}
+
 			{authState === "signing-in" && <div className="agent-state-card" data-agent-card="signing-in">
 				<span className="agent-spinner" aria-hidden="true" />
 				<h3>Waiting for your browser…</h3>
@@ -863,10 +890,10 @@ export default function AgentPanel({
 			</div>}
 
 			{/* One step list per turn (AgentTurnSteps.jsx); the motion progress card sits just above the latest one. */}
-			{layout.map((entry) => {
+			{layout.map((entry, index) => {
 				if (entry.type === "steps") return <Fragment key={entry.id}>
 					{entry.last && progressCard}
-					<div className="agent-row"><TurnSteps block={entry} now={activityNow} toolLabels={presentation.toolLabels} formatClock={formatTurnClock} onRetry={() => runTurn(chat.lastPrompt)} /></div>
+					<div className="agent-row"><TurnSteps block={entry} now={activityNow} toolLabels={presentation.toolLabels} formatClock={formatTurnClock} onRetry={() => runTurn(chat.lastPrompt)} /></div>{taskMode && layout[index + 1]?.item?.kind !== "assistant" && <TaskRows steps={entry.steps} />}
 				</Fragment>;
 				const { item } = entry;
 				if (item.kind === "user") return <div className="agent-row user" key={item.id}>
@@ -875,17 +902,19 @@ export default function AgentPanel({
 					</div>}
 					<div className="agent-bubble">{item.text}</div>
 				</div>;
-				if (item.kind === "assistant") return <div className="agent-row assistant" key={item.id}><div className="agent-assistant-text"><ReplyText text={item.text} tail={streaming && <span className="agent-caret">▌</span>} /></div></div>;
+				if (item.kind === "assistant") return <Fragment key={item.id}><div className="agent-row assistant"><div className="agent-assistant-text"><ReplyText text={item.text} tail={streaming && <span className="agent-caret">▌</span>} /></div></div>{taskMode && layout[index - 1]?.type === "steps" && <TaskRows steps={layout[index - 1].steps} />}</Fragment>;
 				if (item.kind === "job") return <div className="agent-row" key={item.id}><JobCard job={item} onStop={stopTurn} onAccept={(job) => store.acceptJob(job.jobId)} /></div>;
 				if (item.kind === "receipt") return <div className="agent-row" key={item.id}><ReceiptCard item={item} /></div>;
 				if (item.kind === "failure") return <div className="agent-row" key={item.id}><FailureCard failure={item.failure} onRetry={() => runTurn(chat.lastPrompt)} onFixKey={openProviderKeys} /></div>;
 				if (item.kind === "supervisor") return <div className="agent-row" key={item.id}><SupervisorCard note={item} onSend={(text) => { store.setDraft(text); runTurn(text); }} /></div>;
+				if (item.kind === "plan") return <PlanCard key={item.id} plan={item} live={streaming && !item.outcome} />;
 				return <div className="agent-row" key={item.id}><ImageResultCard image={item} onUse={(image) => store.applyImage(image.id)} onUndo={(image) => store.undoImage(image.id)} onRegenerate={() => runTurn(chat.lastPrompt)} onOpen={setLightbox} /></div>;
 			})}
 
-			{!layout.some((entry) => entry.type === "steps" && entry.last) && progressCard}
+			{!layout.some((entry) => entry.type === "steps" && entry.last) && progressCard}{taskMode && <TaskRows items={items} />}
 			{rateLimit && <PausedCard resetAt={rateLimit.resetAt} onRetry={() => { store.clearRateLimit(); runTurn(chat.lastPrompt); }} onSwitchModel={switchModel} />}
 		</div>
+		{surface === "studio" && taskMode && authenticated && <><Suspense fallback={null}><TaskBoard sessionId={chat.sessionId} pulse={chat.lastTurn?.endedAt ?? 0} labelOf={taskStepLabel} onMainNote={store.note} /></Suspense><TaskDetail /></>}
 
 		{/* Never a blank panel: busy states name the phase and tick, a finished
 		    turn states how it ended, and idle says so in as many words. */}
@@ -925,8 +954,12 @@ export default function AgentPanel({
 				/>
 				<div className="agent-composer-controls">
 					<button type="button" className="agent-attach-chip" aria-pressed={attachFrame} aria-label="Attach current frame" title="Attach current frame" onClick={() => setAttachFrame((value) => !value)}>
-						{attachFrame ? <span className="agent-attach-thumb" aria-hidden="true" /> : <FiPaperclip size={13} aria-hidden="true" />}
+						{attachFrame ? <span className="agent-attach-thumb" aria-hidden="true" /> : <FiCamera size={13} aria-hidden="true" />}
+					</button>
+					<button type="button" className="agent-attach-chip agent-attach-file" aria-label="Attach image or video" title="Attach image or video" disabled={composerDisabled} onClick={() => fileInputRef.current?.click()}>
+						<FiPaperclip size={13} aria-hidden="true" />
 					</button>
+					<input ref={fileInputRef} type="file" accept={ATTACHMENT_ACCEPT} multiple hidden onChange={onPickFiles} />
 					{/* Five providers in one dropdown: grouped by the provider that serves
 					    them, and a provider without a credential still lists its models —
 					    unpickable, and saying what they are waiting for. */}
@@ -949,8 +982,8 @@ export default function AgentPanel({
 						</select>
 					)}
 					{surface === "studio" && (
-						<button type="button" className={`agent-supervisor-toggle${supervisorOn ? " is-on" : ""}`} role="switch" aria-checked={supervisorOn} aria-label={ko("Supervisor review", "감독 검토")} title={ko(supervisorOn ? "Supervisor review is on: a note arrives after each editing turn" : "Supervisor review is off", supervisorOn ? "감독 검토 켜짐: 편집 턴이 끝나면 메모가 옵니다" : "감독 검토 꺼짐")} onClick={toggleSupervisor}>
-							{ko("Supervisor", "감독")} {supervisorOn ? "ON" : "OFF"}
+						<button type="button" className={`agent-supervisor-toggle agent-tasks-toggle${taskMode ? " is-on" : ""}`} role="switch" aria-checked={taskMode} aria-label={ko("Task mode", "작업 모드")} title={ko(taskMode ? "Task mode is on: the agent answers at once and runs your requests as parallel tasks" : "Task mode is off: one request at a time", taskMode ? "작업 모드 켜짐: 에이전트가 바로 답하고 요청을 병렬 작업으로 돌려요" : "작업 모드 꺼짐: 한 번에 요청 하나")} onClick={toggleTaskMode} disabled={streaming}>
+							{ko("Tasks", "작업")} {taskMode ? "ON" : "OFF"}
 						</button>
 					)}
 					<span className="agent-composer-spacer" aria-hidden="true" />

package/src/workflow/AgentPlanCard.jsx

@@ -0,0 +1,41 @@
+// A turn's step checklist in the agent panel (agent-plan.js keeps it): a header that says how far the plan is ("2/5")
+// beside a thin progress bar, and one row per step: done steps checked, the step under way highlighted with a soft
+// pulse, the rest waiting. While the turn runs the card stays pinned to the top of the transcript, so what is happening
+// and what comes next stay in view however long the step list below grows. Once the turn ends nothing pulses, and a
+// step a failed or stopped turn left unfinished reads muted.
+import { FiCheck, FiMinus } from "react-icons/fi";
+import { ko } from "../locale.js";
+import "./agent-plan.css";
+
+const STATUS_WORDS = {
+	done: ko("done", "완료"),
+	active: ko("in progress", "진행 중"),
+	pending: ko("next", "대기"),
+	unfinished: ko("not finished", "미완료"),
+};
+
+function PlanMark({ status }) {
+	if (status === "done") return <FiCheck className="agent-plan-mark done" size={11} aria-hidden="true" />;
+	if (status === "unfinished") return <FiMinus className="agent-plan-mark unfinished" size={11} aria-hidden="true" />;
+	return <span className={`agent-plan-mark ${status}`} aria-hidden="true" />;
+}
+
+export function PlanCard({ plan, live }) {
+	const total = plan.steps.length, done = plan.steps.filter(step => step.status === "done").length;
+	const state = live ? "live" : plan.outcome ?? "done";
+	return <div className="agent-row agent-plan-row" data-plan-live={live ? "true" : "false"}>
+		<section className="agent-card agent-plan" data-agent-card="plan" data-plan-state={state} aria-label={ko(`Plan, ${done} of ${total} done`, `계획, ${total}단계 중 ${done}단계 완료`)}>
+			<div className="agent-plan-head">
+				<span className="agent-plan-title">{ko("Plan", "계획")}</span>
+				<span className="agent-plan-bar" aria-hidden="true"><span className="agent-plan-fill" style={{ "--agent-plan-done": total ? done / total : 0 }} /></span>
+				<span className="agent-plan-count">{done}/{total}</span>
+			</div>
+			<ol className="agent-plan-steps">
+				{plan.steps.map((step, index) => <li key={index} className={`agent-plan-step ${step.status}`} data-plan-status={step.status} aria-current={step.status === "active" ? "step" : undefined} aria-label={`${step.text}: ${STATUS_WORDS[step.status] ?? step.status}`}>
+					<PlanMark status={step.status} />
+					<span className="agent-plan-text">{step.text}</span>
+				</li>)}
+			</ol>
+		</section>
+	</div>;
+}

package/src/workflow/AgentProgressCard.jsx

@@ -45,7 +45,7 @@ function SheetViewer({ sheet, onClose }) {
 }
 
 /** `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. */
+ * work, such as a take compiled at startup. `live`: that turn is still running. */
 export function AgentProgressCard({ items, since = null, live = false }) {
 	useSyncExternalStore(subscribeProgress, progressVersion);
 	const [open, setOpen] = useState(null);

package/src/workflow/TaskBoard.jsx

@@ -0,0 +1,102 @@
+// Task mode's board, headless (task-board.js): it follows the main session's task events, each running task's
+// progress and the compile pool, and publishes them to taskView; TaskInline.jsx draws them in the chat. It also marks
+// the outliner rows inside a running task's scope, and carries the main agent's own reports (main.turn) into the chat.
+// Loaded lazily: the compile pool it watches belongs to the Studio, never the workflow page.
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { ko } from "../locale.js";
+import { useBus } from "../app-context.js";
+import { compileActivity, watchCompileActivity } from "../commands/motion3-compile.js";
+import { createTaskBoardClient, emptyBoard, progressLine, reduceBoard, reduceScopes, seedBoard, taskView } from "./task-board.js";
+
+const RETRY_MS = 2000;
+const sleep = (ms, signal) => new Promise(resolve => { const timer = setTimeout(resolve, ms); signal.addEventListener("abort", () => { clearTimeout(timer); resolve(); }, { once: true }); });
+
+/** Marks outliner rows (data-node-id is the scope key: object:<id>, character:<id>) inside running tasks' scopes. */
+function useScopeBadges(scopes, titles) {
+	useEffect(() => {
+		const owner = new Map();
+		for (const [taskId, keys] of Object.entries(scopes)) for (const key of keys) owner.set(key, titles[taskId] ?? taskId);
+		const paint = () => {
+			for (const row of document.querySelectorAll("[data-node-id]")) {
+				const title = owner.get(row.getAttribute("data-node-id"));
+				if (title) { row.setAttribute("data-task-scope", title); row.setAttribute("title", ko(`In task: ${title}`, `작업 중: ${title}`)); }
+				else if (row.hasAttribute("data-task-scope")) { row.removeAttribute("data-task-scope"); row.removeAttribute("title"); }
+			}
+		};
+		paint();
+		const observer = new MutationObserver(paint);
+		observer.observe(document.body, { childList: true, subtree: true });
+		return () => { observer.disconnect(); owner.clear(); paint(); };
+	}, [scopes, titles]);
+}
+
+export default function TaskBoard({ sessionId, pulse, labelOf, onMainNote }) {
+	const client = useMemo(() => createTaskBoardClient(), []);
+	const bus = useBus();
+	const [board, dispatch] = useReducer((state, action) => (action.seed ? seedBoard(state, action.seed) : action.reset ? emptyBoard() : reduceBoard(state, action.event)), undefined, emptyBoard);
+	const [scopes, setScopes] = useState({});
+	const [activity, setActivity] = useState(compileActivity);
+	const afterRef = useRef(0);
+	const noteRef = useRef(onMainNote);
+	useEffect(() => { afterRef.current = board.after; noteRef.current = onMainNote; }, [board.after, onMainNote]);
+
+	useEffect(() => { dispatch({ reset: true }); afterRef.current = 0; }, [sessionId]);
+	useEffect(() => watchCompileActivity(setActivity), []);
+	useEffect(() => bus.subscribe(event => {
+		if (typeof event?.type !== "string" || !event.type.startsWith("task.")) return;
+		setScopes(current => reduceScopes(current, event));
+		if (event.type === "task.userEdit" || event.type === "task.undone") dispatch({ event });
+	}), [bus]);
+
+	// The board's live events; the main session exists only after its first turn, so a refusal retries (pulse: a turn ended).
+	useEffect(() => {
+		if (!sessionId) return undefined;
+		const controller = new AbortController();
+		(async () => {
+			while (!controller.signal.aborted) {
+				try {
+					const { tasks } = await client.board(sessionId);
+					dispatch({ seed: tasks });
+					await client.events(sessionId, afterRef.current, event => {
+						if (event.type === "main.turn" && event.turnId) {
+							let text = "";
+							client.frames(event.turnId, frame => { if (frame.type === "text.delta") text += frame.text ?? ""; if (frame.type === "tool.start") text = ""; }, controller.signal)
+								.then(() => noteRef.current?.(text), () => {});
+						}
+						dispatch({ event });
+					}, controller.signal);
+				} catch { /* not there yet, or the stream dropped: try again */ }
+				await sleep(RETRY_MS, controller.signal);
+			}
+		})();
+		return () => controller.abort();
+	}, [client, sessionId, pulse]);
+
+	// A running card's progress line: its own frames, the last tool it started.
+	const running = board.order.filter(id => board.tasks[id]?.status === "running" && board.tasks[id]?.turnId);
+	const runningKey = running.map(id => `${id}:${board.tasks[id].turnId}`).join();
+	useEffect(() => {
+		const controllers = running.map(id => {
+			const controller = new AbortController(), { turnId } = board.tasks[id];
+			client.frames(turnId, frame => { const line = progressLine(frame, labelOf); if (line) dispatch({ event: { type: "task.progress", taskId: id, status: "running", progress: line } }); }, controller.signal).catch(() => {});
+			return controller;
+		});
+		return () => controllers.forEach(controller => controller.abort());
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [client, runningKey, labelOf]);
+
+	const titles = useMemo(() => Object.fromEntries(board.order.map(id => [id, board.tasks[id].title])), [board]);
+	useScopeBadges(scopes, titles);
+
+	useEffect(() => {
+		taskView.set({ client, labelOf, undo: async taskId => {
+			const receipt = await bus.run("task.undo", { taskId });
+			if (receipt?.ok === false) throw new Error(receipt.message ?? receipt.code);
+			dispatch({ event: { type: "task.undone", taskId } });
+		} });
+	}, [bus, client, labelOf]);
+	useEffect(() => { taskView.set({ board, activity }); }, [board, activity]);
+	// Task mode off or another session: nothing of this board is shown any more.
+	useEffect(() => () => taskView.set({ board: emptyBoard(), open: null }), [sessionId]);
+	return null;
+}