cozyclay 2.1.1 → 3.0.0

package/src/workflow/agent-client.js

@@ -29,6 +29,7 @@ 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 { actionLabelsOf, changedLine, scriptNow, stepFields, thinkingLine, withCompose, withThinking, withToolStart, withTurnEnd } from "./agent-turn.js";
 
 const AGENT_PANEL_WIDTH_KEY = "cozyclay.workflow.agentPanel.width";
 export const AGENT_PANEL_WIDTH_DEFAULT = 360;
@@ -92,7 +93,7 @@ export const jobStateTone = (state) => {
 export const formatJobProgress = (progress) => Number.isFinite(progress) ? `${Math.round(progress * 100)}%` : "";
 
 /** One line of plain product copy for a validated receipt. */
-export function receiptSummary(receipt) {
+export function receiptSummary(receipt, context = null) {
 	if (receipt?.status === "installed") {
 		const { installed, verification } = receipt;
 		const coverage = verification.status === "verified"
@@ -103,7 +104,7 @@ export function receiptSummary(receipt) {
 	if (receipt?.status === "undone") return `Undid ${receipt.undoneReceiptId}`;
 	if (receipt?.status === "noop") return "Nothing to change";
 	if (receipt?.status === "transient") return "Changed the view only";
-	return `Applied to ${receipt?.affectedIds?.join(", ") || "the scene"}`;
+	return context ? changedLine(receipt?.affectedIds ?? [], context) : `Applied to ${receipt?.affectedIds?.join(", ") || "the scene"}`;
 }
 
 /** Effort options for a model entry from /agent/models; the backend default comes first. */
@@ -265,16 +266,16 @@ export function storeModel(key, storage = globalThis.localStorage) {
 	}
 }
 
-/** The supervisor switch (#728): on unless the author turned it off. It rides
- * on every Studio turn as `supervisor: false` so the sidecar skips the review
- * for that turn; the sidecar's own COZYCLAY_SUPERVISOR=off still wins. */
+/** 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) !== "off";
+		return storage?.getItem(AGENT_SUPERVISOR_KEY) === "on";
 	} catch {
-		return true;
+		return false;
 	}
 }
 
@@ -442,12 +443,14 @@ export function formatTurnClock(ms) {
 	return `${Math.floor(total / 60)} m ${String(total % 60).padStart(2, "0")} s`;
 }
 
-const liveActivity = (phase, label, elapsedMs) => ({
+// `detail`: what the step is about (a spec's label, the script's current call, the latest line of reasoning).
+const liveActivity = (phase, label, elapsedMs, detail = "") => ({
 	phase,
 	kind: "live",
 	tone: "busy",
 	text: `${label} · ${formatTurnClock(elapsedMs)}`,
 	ticking: true,
+	...(detail ? { detail } : {}),
 });
 
 /** What the panel says it is doing, in plain words. Pure: the component only
@@ -466,11 +469,15 @@ export function describeActivity(state, { now = Date.now(), toolLabel = toolCall
 			return liveActivity("job", `${JOB_STATE_COPY[job.state] || job.state} motion${percent ? ` ${percent}` : ""}`, elapsed);
 		}
 		const tool = items.findLast((item) => item.kind === "tool" && item.status === "running");
-		if (tool) return liveActivity("tool", `Running ${toolLabel(tool)}…`, elapsed);
-		// Nothing has come back yet: the request itself is the only thing happening.
-		const prompt = items.findLastIndex((item) => item.kind === "user");
-		return prompt === items.length - 1
-			? liveActivity("sending", "Sending…", elapsed)
+		if (tool) return liveActivity("tool", `Running ${toolLabel(tool)}…`, elapsed, tool.progress ? scriptNow(tool) : tool.subject);
+		// The newest frame says what the model is doing now: writing a call, its reply, or reasoning.
+		const latest = items.at(-1);
+		if (latest?.kind === "compose") return liveActivity("compose", `Preparing ${toolLabel(latest)}…`, elapsed, latest.subject);
+		if (latest?.kind === "thinking") return liveActivity("thinking", "Thinking…", elapsed, thinkingLine(latest.text));
+		if (latest?.kind === "assistant") return liveActivity("reply", "Writing the reply…", elapsed);
+		// Nothing has come back yet: the request, then the model's first token, is all that is happening.
+		return latest?.kind === "user"
+			? liveActivity("sending", elapsed < 2000 ? "Sending…" : "Waiting for the model…", elapsed)
 			: liveActivity("thinking", "Thinking…", elapsed);
 	}
 	const last = state?.lastTurn;
@@ -637,6 +644,15 @@ export function providerEnvLabel(id) {
 	return names?.length ? names.join(" or ") : "an environment variable";
 }
 
+/** The failure a provider's 401/403 turns into: the refusal, plus the provider's own reason when the raw
+ * error carries one ("invalid x-api-key"), instead of the raw status and JSON body. */
+export function keyRefusedMessage(raw) {
+	const reason = /"message"\s*:\s*"([^"]{1,160})"/.exec(String(raw || ""))?.[1];
+	const status = /\b(401|403)\b/.exec(String(raw || ""))?.[1];
+	// What to do next is the failure card's recovery line, said once there.
+	return `The model provider refused the credentials${status || reason ? ` (${[status, reason].filter(Boolean).join(": ")})` : ""}.`;
+}
+
 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);
@@ -646,10 +662,9 @@ export function createHttpTransport({ fetchImpl = globalThis.fetch?.bind(globalT
 			return request("/oauth/status");
 		},
 		async signIn() {
-			const result = await request("/oauth/start", { method: "POST", body: "{}" });
-			// The sidecar owns the code exchange; the browser only opens the page.
-			if (result?.authorizeUrl) globalThis.open?.(result.authorizeUrl, "_blank", "noopener,noreferrer");
-			return result;
+			// The sidecar owns the code exchange and opens the sign-in page itself; opening it here
+			// too showed the page twice. The waiting card links the page from /oauth/status.
+			return request("/oauth/start", { method: "POST", body: "{}" });
 		},
 		async signOut() {
 			return request("/oauth/logout", { method: "POST", body: "{}" });
@@ -680,16 +695,9 @@ export function createHttpTransport({ fetchImpl = globalThis.fetch?.bind(globalT
 		// Provider credentials live in the sidecar's 0600 store. The browser sends
 		// a key once and never reads one back: the status route answers with the
 		// source of a key, never with key material.
-		async providers() {
-			const result = await request("/agent/providers");
-			return Array.isArray(result?.providers) ? result.providers : [];
-		},
-		async setProviderKey(id, key) {
-			return request(`/agent/providers/${encodeURIComponent(id)}`, { method: "PUT", body: JSON.stringify({ key }) });
-		},
-		async removeProviderKey(id) {
-			return request(`/agent/providers/${encodeURIComponent(id)}`, { method: "DELETE" });
-		},
+		async providers() { const result = await request("/agent/providers"); return Array.isArray(result?.providers) ? result.providers : []; },
+		async setProviderKey(id, key) { return request(`/agent/providers/${encodeURIComponent(id)}`, { method: "PUT", body: JSON.stringify({ key }) }); },
+		async removeProviderKey(id) { return request(`/agent/providers/${encodeURIComponent(id)}`, { method: "DELETE" }); },
 		async listSessions() {
 			const result = await request(`/agent/sessions?surface=${encodeURIComponent(surface || "studio")}`);
 			return Array.isArray(result?.sessions) ? result.sessions : [];
@@ -791,7 +799,7 @@ export function createHttpTransport({ fetchImpl = globalThis.fetch?.bind(globalT
 			const body = studio
 				? JSON.stringify({
 					surface: "studio", sessionId, turnId, text, context: turnRequest.context,
-					...(model ? { model } : {}), ...(effort ? { effort } : {}), ...(attachFrame === undefined ? {} : { attachFrame: Boolean(attachFrame) }), ...(supervisor === false ? { supervisor: false } : {}), ...attached,
+					...(model ? { model } : {}), ...(effort ? { effort } : {}), ...(attachFrame === undefined ? {} : { attachFrame: Boolean(attachFrame) }), ...(typeof supervisor === "boolean" ? { supervisor } : {}), ...attached,
 				})
 				: JSON.stringify({ sessionId, text, attachFrame, model, ...(effort ? { effort } : {}), ...attached, ...(telemetry.turnId ? { turn_id: telemetry.turnId } : {}) });
 			try {
@@ -1018,9 +1026,7 @@ export function createMockTransport(config = { state: "ready" }) {
 			});
 			return { providers, models: providers.flatMap((provider) => provider.models.map((model) => ({ ...model, id: model.key }))) };
 		},
-		async providers() {
-			return providerStatus();
-		},
+		async providers() { return providerStatus(); },
 		async setProviderKey(id, key) {
 			if (id === "openai-codex") throw Object.assign(new Error("Use ChatGPT sign-in for OpenAI Codex."), { status: 400 });
 			if (typeof key !== "string" || key.trim().length < MOCK_PROVIDER_KEY_MIN) {
@@ -1030,10 +1036,7 @@ export function createMockTransport(config = { state: "ready" }) {
 			storedProviders.add(id);
 			return { ok: true };
 		},
-		async removeProviderKey(id) {
-			storedProviders.delete(id);
-			return { ok: true };
-		},
+		async removeProviderKey(id) { storedProviders.delete(id); return { ok: true }; },
 		async stop() {
 			liveTurn = null;
 			return { ok: true };
@@ -1214,6 +1217,8 @@ export function createAgentChatStore({
 	// Supervisor note requests still waiting on the sidecar; a cleared or
 	// replaced conversation abandons them.
 	const supervisorRequests = new Set();
+	// The running turn's action labels (its context's actionIndex), for the step list (agent-turn.js).
+	let actionLabels = new Map();
 	let state = {
 		sessionId: newId(),
 		turnId: null,
@@ -1298,7 +1303,7 @@ export function createAgentChatStore({
 					acceptance: receipt.explicitUnverifiedAcceptance ? { status: "accepted" } : null,
 				}
 				: item),
-			{ kind: "receipt", id: `receipt:${receipt.receiptId}`, receiptId: receipt.receiptId, receipt, summary: receiptSummary(receipt) },
+			{ kind: "receipt", id: `receipt:${receipt.receiptId}`, receiptId: receipt.receiptId, receipt, summary: receiptSummary(receipt, studio ? advisory(() => buildContext?.() ?? null, null) : null) },
 		]);
 		// A host that throws (or has nowhere to put the highlight) cannot cost the
 		// author the receipt they already earned.
@@ -1337,9 +1342,13 @@ export function createAgentChatStore({
 			return;
 		}
 		if (event?.type === "tool.start") {
-			setItems((items) => [...items, { kind: "tool", id: event.callId || newId(), callId: event.callId, name: event.name, label: event.label, args: event.args, status: "running" }]);
+			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;
 		}
+		// What the model does between calls and what a script runs inside one (bin/agent/turn-frames.mjs, script-tool.mjs).
+		if (event?.type === "thinking.delta") { setItems((items) => withThinking(items, String(event.text ?? ""), clock(), newId)); return; }
+		if (event?.type === "tool.compose") { setItems((items) => withCompose(items, event, clock(), newId, actionLabels)); return; }
+		if (event?.type === "tool.progress") { patchItem((item) => item.kind === "tool" && item.callId === event.callId && item.status === "running", { progress: { index: event.index, name: event.name, label: actionLabels.get(event.action), action: event.action, status: event.status, summary: event.summary } }); return; }
 		if (event?.type === "tool.done") {
 			patchItem((item) => item.kind === "tool" && item.callId === event.callId, { status: event.ok ? "done" : "failed", elapsedMs: event.elapsedMs, result: event.result, error: event.error });
 			// Synchronous Studio families (arrange_*, frame_shot, patch_elements,
@@ -1363,7 +1372,7 @@ export function createAgentChatStore({
 			return;
 		}
 		if (event?.type !== "error") return;
-		const failure = { code: event.code || "upstream", message: event.message || ERROR_COPY[event.code] || "The turn failed.", ...(Number.isFinite(event.status) ? { status: event.status } : {}) };
+		const failure = { code: event.code || "upstream", message: event.code === "unauthorized" ? keyRefusedMessage(event.message) : event.message || ERROR_COPY[event.code] || "The turn failed.", ...(Number.isFinite(event.status) ? { status: event.status } : {}) };
 		if (activeTurn) activeTurn.failure = failure;
 		if (event.code === "rate_limit") { set({ rateLimit: { resetAt: event.resetAt || null, message: event.message || ERROR_COPY.rate_limit } }); return; }
 		if (event.code === "auth") { onAuthLost?.(); return; }
@@ -1372,7 +1381,7 @@ export function createAgentChatStore({
 			// an older card would hide the new failure inside finished history.
 			const prompt = items.findLastIndex((item) => item.kind === "user");
 			const position = items.findLastIndex((item, at) => at > prompt && item.kind === "tool" && item.status === "failed");
-			if (position === -1) return [...items, { kind: "failure", id: newId(), failure: { ...failure, recovery: { action: "retry", retryAllowed: true } } }];
+			if (position === -1) return [...items, { kind: "failure", id: newId(), failure: { ...failure, recovery: { action: failure.code === "unauthorized" ? "fix_key" : "retry", retryAllowed: true } } }];
 			return items.map((item, at) => at === position ? { ...item, failure } : item);
 		});
 	}
@@ -1465,6 +1474,7 @@ export function createAgentChatStore({
 			const turnId = newId();
 			// Context is read at Send, from the host's current authoritative refs.
 			const context = studio ? buildContext?.() ?? null : null;
+			actionLabels = actionLabelsOf(context);
 			if (studio && !context) {
 				applyEvent({ type: "error", code: "upstream", message: "The editor is not ready to describe the scene yet." });
 				return;
@@ -1501,7 +1511,7 @@ export function createAgentChatStore({
 					attachFrame: Boolean(options.attachFrame),
 					model: options.model,
 					effort: options.effort ?? undefined,
-					...(options.supervisor === false ? { supervisor: false } : {}),
+					...(typeof options.supervisor === "boolean" ? { supervisor: options.supervisor } : {}),
 				}, applyEvent, signal);
 			} catch (error) {
 				if (!signal.aborted) applyEvent({ type: "error", code: "upstream", message: String(error?.message || error) });
@@ -1517,17 +1527,10 @@ export function createAgentChatStore({
 					}
 					const endedAt = clock();
 					activeTurn = null;
-					set({
-						streaming: false,
-						turnStartedAt: null,
-						lastTurn: {
-							status: signal.aborted ? "stopped" : turn.failure ? "failed" : "done",
-							endedAt,
-							durationMs: endedAt - startedAt,
-							failure: turn.failure,
-						},
-					});
-					if (studio && turn.reviewable && options.supervisor !== false && !signal.aborted) requestSupervisorNote(turnId);
+					// 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) });
+					if (studio && turn.reviewable && options.supervisor === true && !signal.aborted) requestSupervisorNote(turnId);
 				}
 			}
 		},

package/src/workflow/agent-panel.css

@@ -338,7 +338,7 @@
 	flex-direction: column;
 	gap: var(--agent-space-3);
 	flex: none;
-	max-height: 46%;
+	max-height: 70%;
 	overflow-y: auto;
 	padding: var(--agent-space-4);
 	border-bottom: 1px solid var(--agent-border);
@@ -445,6 +445,59 @@
 	font-size: var(--agent-font-sm);
 }
 
+/* A quiet line under a row or a flow: progress, instructions, a result. */
+.agent-key-note {
+	margin: 0;
+	color: var(--agent-text-dim);
+	font-size: var(--agent-font-sm);
+}
+
+/* Connect a model (pi's login list): group labels, a running flow, what pi asks and tells. */
+.agent-login-group,
+.agent-login-flow,
+.agent-login-form,
+.agent-login-choices {
+	display: flex;
+	flex-direction: column;
+	gap: var(--agent-space-2);
+}
+
+.agent-login-ask {
+	color: var(--agent-text);
+	font-size: var(--agent-font-sm);
+}
+
+.agent-login-log {
+	display: flex;
+	flex-direction: column;
+	gap: var(--agent-space-2);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.agent-login-log li {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--agent-space-1);
+}
+
+.agent-login-code {
+	display: block;
+	margin-top: var(--agent-space-1);
+	font-size: var(--agent-font-xl);
+	letter-spacing: 0.12em;
+}
+
+.agent-login-open { display: inline-block; text-decoration: none; }
+
+.agent-key-endpoint-label {
+	color: var(--agent-text-dim);
+	font-size: var(--agent-font-xs);
+	letter-spacing: 0.04em;
+}
+
 /* --- transcript -------------------------------------------------------- */
 
 .agent-transcript {
@@ -481,6 +534,20 @@
 	word-break: break-word;
 }
 
+/* The reply's Markdown, rendered (AgentReplyText.jsx): tight blocks, lists indented, code and tables tinted from the text colour. */
+.agent-assistant-text > * { margin: 0; }
+.agent-assistant-text > * + * { margin-top: 6px; }
+.agent-assistant-text ul, .agent-assistant-text ol { padding-left: 18px; white-space: normal; }
+.agent-assistant-text li + li { margin-top: 2px; }
+.agent-assistant-text .agent-reply-heading { font-weight: 600; }
+.agent-assistant-text code { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 10%, transparent); font: 0.92em ui-monospace, monospace; }
+.agent-assistant-text pre { padding: 6px 8px; border-radius: var(--agent-radius-sm); background: color-mix(in srgb, currentColor 8%, transparent); overflow-x: auto; white-space: pre; }
+.agent-assistant-text pre code { padding: 0; background: none; }
+.agent-reply-table { overflow-x: auto; white-space: normal; }
+.agent-reply-table table { border-collapse: collapse; font-size: 0.92em; font-variant-numeric: tabular-nums; }
+.agent-reply-table th, .agent-reply-table td { padding: 2px 10px 2px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); text-align: left; vertical-align: top; }
+.agent-reply-table th { font-weight: 600; }
+
 .agent-caret {
 	display: inline-block;
 	width: 6px;
@@ -799,6 +866,9 @@
 	line-height: 1.55;
 }
 
+/* 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; }
+
 .agent-primary-button {
 	align-self: center;
 	border: 1px solid var(--agent-accent-edge);

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

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

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

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