cozyclay 3.1.0 → 3.1.1

package/src/workflow/AgentPanel.jsx

@@ -7,8 +7,7 @@ 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,
@@ -29,8 +28,7 @@ import {
 	formatTurnClock,
 	formatResetIn,
 	readStoredPanelWidth,
-	storeModel,
-	storePanelWidth,
+	storeModel, storePanelWidth,
 	STUDIO_SESSION_STORAGE_KEY,
 	selectedModelRoles,
 	shortModelId,
@@ -43,6 +41,7 @@ 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";
 
@@ -908,6 +907,7 @@ export default function AgentPanel({
 				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>;
 			})}
 

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/agent-client.js

@@ -28,8 +28,9 @@ import { appendAttachments, ATTACHMENT_MAX_COUNT } from "./attachment-image.js";
 import { ko } from "../locale.js";
 import { AGENT_TOOL_CATEGORIES, EXECUTION_TELEMETRY_VALUES } from "../execution-telemetry.js";
 import { STUDIO_VARIANTS, validateReceipt } from "../studio-agent-protocol.js";
-import { requestAgentImage, sidecarRequest, sidecarUrl } from "../agent-image-client.js";
+import { requestAgentImage, sidecarRequest, sidecarUrl } from "../agent-image-client.js"; import { clearSculptSketch, sculptSketchFrame } from "../sculpt-sketch-state.js";
 import { actionLabelsOf, changedLine, scriptNow, stepFields, thinkingLine, withCompose, withThinking, withToolStart, withTurnEnd } from "./agent-turn.js";
+import { isPlanFrame, restoredPlans, withPlanEnd, withPlanFrame } from "./agent-plan.js";
 
 const AGENT_PANEL_WIDTH_KEY = "cozyclay.workflow.agentPanel.width";
 export const AGENT_PANEL_WIDTH_DEFAULT = 360;
@@ -1325,6 +1326,8 @@ export function createAgentChatStore({
 			});
 			return;
 		}
+		// The turn's step checklist (bin/agent/plan-tool.mjs): one card under the prompt; the plan call itself is no step.
+		if (isPlanFrame(event)) { setItems((items) => withPlanFrame(items, event, newId)); return; }
 		if (event?.type === "tool.start") {
 			setItems((items) => withToolStart(items, { kind: "tool", id: event.callId || newId(), callId: event.callId, name: event.name, label: event.label, args: event.args, status: "running", startedAt: clock(), ...stepFields(event.name, event.args, actionLabels) }));
 			return;
@@ -1406,11 +1409,10 @@ export function createAgentChatStore({
 		set({ sessionId: newId(), turnId: null, items: [], pendingAttachments: [], rateLimit: null, lastPrompt: "", turnStartedAt: null, lastTurn: null });
 	};
 	const restore = (transcript, sessionId = state.sessionId) => {
-		abandonSupervisorNotes();
-		seenReceipts.clear();
-		settledActions.clear();
+		abandonSupervisorNotes(); seenReceipts.clear(); settledActions.clear();
 		const restoredReceiptIds = new Set();
-		const restored = (Array.isArray(transcript) ? transcript : []).flatMap((item) => {
+		// Each turn's plan card comes back under its prompt, settled by how the turn ended (agent-plan.js).
+		const restored = restoredPlans((Array.isArray(transcript) ? transcript : []).flatMap((item) => {
 			if (item?.kind === "user" || item?.kind === "assistant") {
 				const attachments = Array.isArray(item.attachments) ? item.attachments.filter((entry) => typeof entry?.dataUrl === "string") : [];
 				return [{ kind: item.kind, id: newId(), text: String(item.text ?? ""), ...(attachments.length ? { attachments } : {}) }];
@@ -1425,8 +1427,8 @@ export function createAgentChatStore({
 				return [{ kind: "receipt", id: `receipt:${item.receiptId || newId()}`, receiptId: item.receiptId, summary: item.summary || "Receipt", receipt: { status: "applied", warnings: [], verification: { status: "verified" } } }];
 			}
 			if (item?.kind === "failure") return [{ kind: "failure", id: newId(), failure: { code: item.code || "upstream", message: String(item.message || "The turn failed."), recovery: { action: "retry", retryAllowed: true } } }];
-			return [];
-		});
+			return item?.kind === "plan" ? [{ kind: "plan", id: newId(), steps: item.steps }] : [];
+		}));
 		const lastPrompt = [...restored].reverse().find((item) => item.kind === "user")?.text || "";
 		set({ sessionId, turnId: null, items: restored, rateLimit: null, lastPrompt, turnStartedAt: null, lastTurn: null, streaming: false });
 		return restored;
@@ -1498,14 +1500,15 @@ export function createAgentChatStore({
 					model: options.model,
 					effort: options.effort ?? undefined,
 					...(typeof options.supervisor === "boolean" ? { supervisor: options.supervisor } : {}), ...(options.tasks ? { tasks: true } : {}),
-				}, applyEvent, signal);
+				}, (event) => { sculptSketchFrame(event); applyEvent(event); }, signal);
 			} catch (error) {
 				if (!signal.aborted) applyEvent({ type: "error", code: "upstream", message: String(error?.message || error) });
 			} finally {
 				if (controller?.signal === signal) controller = null;
-				// A turn the author already replaced owns none of this state.
+				// A turn the author already replaced owns none of this state. Its live sculpt sketch
+				// (the ghost clay of a call still being written) ends with it, whatever ended it.
 				if (activeTurn === turn) {
-					wireTurnId = null;
+					wireTurnId = null; clearSculptSketch();
 					// Ending with nothing on screen is a failure, not a result.
 					if (!turn.produced && !turn.failure && !signal.aborted) {
 						turn.failure = { code: "no_output", message: "The turn ended without a response.", recovery: { action: "retry", retryAllowed: true } };
@@ -1515,7 +1518,7 @@ export function createAgentChatStore({
 					activeTurn = null;
 					// The end state stays in the transcript with the turn's steps (agent-turn.js withTurnEnd).
 					const lastTurn = { status: signal.aborted ? "stopped" : turn.failure ? "failed" : "done", endedAt, durationMs: endedAt - startedAt, failure: turn.failure };
-					set({ streaming: false, turnStartedAt: null, lastTurn, items: withTurnEnd(state.items, lastTurn, newId) });
+					set({ streaming: false, turnStartedAt: null, lastTurn, items: withPlanEnd(withTurnEnd(state.items, lastTurn, newId), lastTurn.status) });
 					if (studio && turn.reviewable && options.supervisor === true && !signal.aborted) requestSupervisorNote(turnId);
 				}
 			}

package/src/workflow/agent-plan.css

@@ -0,0 +1,93 @@
+/* A turn's step checklist (AgentPlanCard.jsx); colours, sizes and motion come from agent-panel.css. */
+.agent-plan-row[data-plan-live="true"] {
+	position: sticky;
+	top: calc(-1 * var(--agent-space-5));
+	z-index: 1;
+	/* the transcript's own colour above the card, so steps scrolling under it never show through the gap */
+	padding-top: var(--agent-space-2);
+	margin-top: calc(-1 * var(--agent-space-2));
+	background: var(--agent-bg);
+}
+
+.agent-plan {
+	--agent-plan-mark: 11px;
+	display: flex;
+	flex-direction: column;
+}
+
+.agent-plan-row[data-plan-live="true"] .agent-plan { box-shadow: 0 6px 14px -8px #000c; }
+
+.agent-plan-head {
+	display: flex;
+	align-items: center;
+	gap: var(--agent-space-3);
+	padding: var(--agent-space-2) var(--agent-space-4);
+	color: var(--agent-text-soft, var(--agent-text));
+	font-size: var(--agent-font-md);
+}
+
+.agent-plan-title { flex: none; font-weight: 600; }
+
+.agent-plan-bar {
+	flex: 1;
+	height: 3px;
+	overflow: hidden;
+	border-radius: var(--agent-radius-pill);
+	background: var(--agent-track);
+}
+
+.agent-plan-fill {
+	display: block;
+	height: 100%;
+	background: var(--agent-ok);
+	transform: scaleX(var(--agent-plan-done, 0));
+	transform-origin: left;
+	transition: transform var(--agent-motion);
+}
+
+.agent-plan-count { flex: none; color: var(--agent-text-dim); font: var(--agent-font-sm) ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+
+.agent-plan-steps {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	margin: 0;
+	padding: var(--agent-space-1) 0 var(--agent-space-2);
+	border-top: 1px solid var(--agent-border);
+	list-style: none;
+}
+
+.agent-plan-step {
+	display: flex;
+	align-items: center;
+	gap: var(--agent-space-3);
+	min-width: 0;
+	padding: 2px var(--agent-space-4);
+	color: var(--agent-text-muted);
+	font-size: var(--agent-font-md);
+	line-height: 1.4;
+}
+
+.agent-plan-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-plan-step.done { color: var(--agent-text-dim); }
+.agent-plan-step.active { background: color-mix(in srgb, var(--agent-accent) 12%, transparent); color: var(--agent-text); }
+.agent-plan-step.unfinished { color: var(--agent-text-dim); }
+.agent-plan-step.unfinished .agent-plan-text { font-style: italic; }
+
+.agent-plan-mark { flex: none; width: var(--agent-plan-mark); height: var(--agent-plan-mark); }
+.agent-plan-mark.done { color: var(--agent-ok); }
+.agent-plan-mark.unfinished { color: var(--agent-warn); }
+.agent-plan-mark.pending { border: 1.5px solid var(--agent-border-strong); border-radius: var(--agent-radius-pill); }
+/* the step under way: an accent ring whose centre breathes while the turn runs */
+.agent-plan-mark.active { position: relative; border: 1.5px solid var(--agent-accent); border-radius: var(--agent-radius-pill); }
+.agent-plan-mark.active::after { content: ""; position: absolute; inset: 2px; border-radius: var(--agent-radius-pill); background: var(--agent-accent); }
+.agent-plan[data-plan-state="live"] .agent-plan-mark.active::after { animation: agent-pulse 1.4s ease-in-out infinite; }
+
+/* A finished turn's card is a record: it keeps its rows but no longer pulls the eye. */
+.agent-plan:not([data-plan-state="live"]) .agent-plan-fill { background: var(--agent-text-dim); }
+.agent-plan[data-plan-state="done"] .agent-plan-fill { background: var(--agent-ok); }
+
+@media (prefers-reduced-motion: reduce) {
+	.agent-plan[data-plan-state="live"] .agent-plan-mark.active::after { animation: none; }
+	.agent-plan-fill { transition: none; }
+}

package/src/workflow/agent-plan.js

@@ -0,0 +1,59 @@
+// A turn's step checklist as the agent panel keeps it (AgentPlanCard.jsx draws it): the sidecar's plan tool
+// (bin/agent/plan-tool.mjs) sends the whole list in every plan.update frame, and the chat store (agent-client.js) keeps
+// one plan card per turn, right under the turn's prompt. The card never claims more than happened: when the turn ends,
+// the step still under way counts as done only if the turn succeeded, and is left unfinished when it failed or stopped.
+// Pure data, like agent-turn.js.
+
+const STATUSES = new Set(["pending", "active", "done"]);
+const MAX_STEPS = 12, TEXT_MAX = 80;
+
+/** A frame's steps as the card keeps them, or null when they are not a plan. */
+function planSteps(steps) {
+	if (!Array.isArray(steps) || !steps.length || steps.length > MAX_STEPS) return null;
+	const kept = steps.map(step => ({ text: String(step?.text ?? "").replace(/\s+/g, " ").trim().slice(0, TEXT_MAX), status: step?.status }));
+	return kept.every(step => step.text && STATUSES.has(step.status)) ? kept : null;
+}
+
+/** Whether a frame belongs to the plan: its update, or the plan tool's own call (the card shows it, never a step row). */
+export const isPlanFrame = event => event?.type === "plan.update" || (event?.name === "plan" && ["tool.compose", "tool.start", "tool.progress"].includes(event?.type));
+
+/** items after a plan frame: the turn's one plan card, under its prompt, takes the frame's list whole. */
+export function withPlanFrame(items, event, newId) {
+	const steps = event?.type === "plan.update" ? planSteps(event.steps) : null;
+	if (!steps) return items;
+	const prompt = items.findLastIndex(item => item.kind === "user" && !item.steered);
+	const at = items.findIndex((item, i) => i > prompt && item.kind === "plan");
+	if (at !== -1) return items.map((item, i) => i === at ? { ...item, steps } : item);
+	return [...items.slice(0, prompt + 1), { kind: "plan", id: newId(), steps }, ...items.slice(prompt + 1)];
+}
+
+/** A plan whose turn ended ("done", "failed" or "stopped"): the step under way is done only when the turn succeeded. */
+export function settledPlan(plan, status) {
+	const outcome = status === "done" || status === "stopped" ? status : "failed";
+	return { ...plan, outcome, steps: plan.steps.map(step => step.status === "active" ? { ...step, status: outcome === "done" ? "done" : "unfinished" } : step) };
+}
+
+/** items at the end of a turn: its plan card settles (settledPlan); earlier turns' cards already have. */
+export const withPlanEnd = (items, status) => items.map(item => item.kind === "plan" && !item.outcome ? settledPlan(item, status) : item);
+
+/**
+ * A restored transcript's plans (session-store.mjs lists one per change): each turn keeps its last list, under its
+ * prompt; the plan tool's own calls go; and the card settles by how the turn ended: failed when a failure follows, done
+ * when the turn ends on the reply, else stopped (the history ends mid-turn: the panel reloaded while it ran).
+ */
+export function restoredPlans(items) {
+	const turns = [];
+	for (const item of items) {
+		if (item.kind === "tool" && item.name === "plan") continue;
+		if (item.kind === "user" || !turns.length) turns.push([]);
+		turns.at(-1).push(item);
+	}
+	return turns.flatMap(turn => {
+		const rest = turn.filter(item => item.kind !== "plan"), plan = turn.findLast(item => item.kind === "plan");
+		const steps = plan ? planSteps(plan.steps) : null;
+		if (!steps) return rest;
+		const status = rest.some(item => item.kind === "failure") ? "failed" : rest.at(-1)?.kind === "assistant" ? "done" : "stopped";
+		const prompt = rest[0]?.kind === "user" ? 1 : 0;
+		return [...rest.slice(0, prompt), settledPlan({ ...plan, steps }, status), ...rest.slice(prompt)];
+	});
+}

package/tools/run-tests.mjs

@@ -49,7 +49,7 @@ const NODE_FILES = [
 	"test/process/verify-package-telemetry.mjs",
 	"test/process/verify-agent-deps.mjs",
 	"test/verify-agent-image-references.mjs",
-	"test/verify-agent-panel.mjs", "test/verify-agent-turn-view.mjs", "test/verify-agent-reply-text.mjs",
+	"test/verify-agent-panel.mjs", "test/verify-agent-turn-view.mjs", "test/verify-agent-plan.mjs", "test/verify-agent-reply-text.mjs", "test/verify-agent-sculpt-sketch.mjs",
 	"test/verify-agent-host.mjs",
 	"test/verify-agent-routes.mjs",
 	"test/verify-studio-owner-restart.mjs",
@@ -81,14 +81,14 @@ const NODE_FILES = [
 	"test/verify-auto-color.mjs",
 	"test/verify-coplanar-depth.mjs",
 	"test/verify-empty-object.mjs",
-	"test/verify-sculpt-recipe.mjs",
+	"test/verify-sculpt-recipe.mjs", "test/verify-sculpt-shapes.mjs", "test/verify-sculpt-loft-convex.mjs", "test/verify-sculpt-detail.mjs",
 	"test/verify-sculpt-object.mjs",
 	"test/verify-sculpt-compare.mjs",
 	"test/verify-sculpt-run.mjs",
 	"test/verify-sculpt-compare-command.mjs",
 	"test/verify-sculpt-panel.mjs",
 	"test/verify-sculpt-blueprint.mjs",
-	"test/verify-sculpt-mode.mjs",
+	"test/verify-sculpt-mode.mjs", "test/verify-sculpt-csg.mjs", "test/verify-material-presets.mjs",
 	"test/verify-route-owner.mjs",
 	"test/verify-part-colours.mjs",
 	"test/verify-asset-shelf.mjs",

package/dist/assets/TaskBoard-DdDXMgZm.js

@@ -1 +0,0 @@
-import{r as e}from"./rolldown-runtime-hePW80VL.js";import{Pr as t,c as n,d as r,f as i,l as a,m as o,o as s,v as c,xi as l}from"./task-board-BKaM7d-9.js";import{o as u,r as d,t as f}from"./motion3-compile-B887n77J.js";var p=e(l(),1),m=2e3,h=(e,t)=>new Promise(n=>{let r=setTimeout(n,e);t.addEventListener(`abort`,()=>{clearTimeout(r),n()},{once:!0})});function g(e,n){(0,p.useEffect)(()=>{let r=new Map;for(let[t,i]of Object.entries(e))for(let e of i)r.set(e,n[t]??t);let i=()=>{for(let e of document.querySelectorAll(`[data-node-id]`)){let n=r.get(e.getAttribute(`data-node-id`));n?(e.setAttribute(`data-task-scope`,n),e.setAttribute(`title`,t(`In task: ${n}`,`작업 중: ${n}`))):e.hasAttribute(`data-task-scope`)&&(e.removeAttribute(`data-task-scope`),e.removeAttribute(`title`))}};i();let a=new MutationObserver(i);return a.observe(document.body,{childList:!0,subtree:!0}),()=>{a.disconnect(),r.clear(),i()}},[e,n])}function _({sessionId:e,pulse:t,labelOf:l,onMainNote:_}){let v=(0,p.useMemo)(()=>s(),[]),y=u(),[b,x]=(0,p.useReducer)((e,t)=>t.seed?o(e,t.seed):t.reset?n():r(e,t.event),void 0,n),[S,C]=(0,p.useState)({}),[w,T]=(0,p.useState)(f),E=(0,p.useRef)(0),D=(0,p.useRef)(_);(0,p.useEffect)(()=>{E.current=b.after,D.current=_},[b.after,_]),(0,p.useEffect)(()=>{x({reset:!0}),E.current=0},[e]),(0,p.useEffect)(()=>d(T),[]),(0,p.useEffect)(()=>y.subscribe(e=>{typeof e?.type!=`string`||!e.type.startsWith(`task.`)||(C(t=>i(t,e)),(e.type===`task.userEdit`||e.type===`task.undone`)&&x({event:e}))}),[y]),(0,p.useEffect)(()=>{if(!e)return;let t=new AbortController;return(async()=>{for(;!t.signal.aborted;){try{let{tasks:n}=await v.board(e);x({seed:n}),await v.events(e,E.current,e=>{if(e.type===`main.turn`&&e.turnId){let n=``;v.frames(e.turnId,e=>{e.type===`text.delta`&&(n+=e.text??``),e.type===`tool.start`&&(n=``)},t.signal).then(()=>D.current?.(n),()=>{})}x({event:e})},t.signal)}catch{}await h(m,t.signal)}})(),()=>t.abort()},[v,e,t]);let O=b.order.filter(e=>b.tasks[e]?.status===`running`&&b.tasks[e]?.turnId),k=O.map(e=>`${e}:${b.tasks[e].turnId}`).join();return(0,p.useEffect)(()=>{let e=O.map(e=>{let t=new AbortController,{turnId:n}=b.tasks[e];return v.frames(n,t=>{let n=a(t,l);n&&x({event:{type:`task.progress`,taskId:e,status:`running`,progress:n}})},t.signal).catch(()=>{}),t});return()=>e.forEach(e=>e.abort())},[v,k,l]),g(S,(0,p.useMemo)(()=>Object.fromEntries(b.order.map(e=>[e,b.tasks[e].title])),[b])),(0,p.useEffect)(()=>{c.set({client:v,labelOf:l,undo:async e=>{let t=await y.run(`task.undo`,{taskId:e});if(t?.ok===!1)throw Error(t.message??t.code);x({event:{type:`task.undone`,taskId:e}})}})},[y,v,l]),(0,p.useEffect)(()=>{c.set({board:b,activity:w})},[b,w]),(0,p.useEffect)(()=>()=>c.set({board:n(),open:null}),[e]),null}export{_ as default};