cozyclay 2.1.0 → 3.0.0

package/src/workflow/LoginPanel.jsx

@@ -0,0 +1,140 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FiX } from "react-icons/fi";
+import { answerLogin, cancelLogin, fetchLogins, logoutProvider, readLogin, startLogin } from "./login-client.js";
+
+// "Connect a model": pi's own login (the coding agent's /login) inside the agent panel (#pi-login). The list
+// is what pi ships: each provider with its subscription sign-in and/or api-key login; picking one runs pi's
+// flow in the sidecar and this panel only shows what pi asks (a key, a server address, a pasted code, a
+// choice) and tells (a sign-in page to open, a device code, progress). ChatGPT keeps CozyClay's own sign-in.
+
+const GROUPS = [
+	["Connected", (entry) => entry.connected],
+	["Subscriptions", (entry) => !entry.connected && entry.methods.some((method) => method.subscription)],
+	["API keys", (entry) => !entry.connected && !entry.methods.some((method) => method.subscription)],
+];
+
+function PromptForm({ prompt, onSubmit }) {
+	const [value, setValue] = useState("");
+	const ask = prompt.prompt;
+	if (ask.type === "select") {
+		return <div className="agent-login-choices" role="group" aria-label={ask.message}>
+			<p className="agent-login-ask">{ask.message}</p>
+			{(ask.options ?? []).map((option) => <button key={option.id} type="button" className="agent-ghost-button" onClick={() => onSubmit(option.id)}>{option.label}</button>)}
+		</div>;
+	}
+	const inputId = `agent-login-${prompt.promptId}`;
+	return <form className="agent-login-form" onSubmit={(event) => { event.preventDefault(); onSubmit(value); setValue(""); }}>
+		<label className="agent-login-ask" htmlFor={inputId}>{ask.message}</label>
+		<div className="agent-key-controls">
+			<input id={inputId} className="agent-key-input" type={ask.type === "secret" ? "password" : "text"} autoComplete="off" spellCheck="false"
+				placeholder={ask.placeholder ?? ""} value={value} autoFocus onChange={(event) => setValue(event.target.value)} />
+			<button type="submit" className="agent-key-save" disabled={ask.type === "secret" && !value.trim()}>Continue</button>
+		</div>
+	</form>;
+}
+
+function FlowLog({ entries }) {
+	return <ul className="agent-login-log">
+		{entries.map((entry, index) => {
+			const event = entry.event;
+			if (event.type === "auth_url") return <li key={index}><a className="agent-primary-button agent-login-open" href={event.url} target="_blank" rel="noopener noreferrer">Open the sign-in page</a>{event.instructions && <span className="agent-key-note">{event.instructions}</span>}</li>;
+			if (event.type === "device_code") return <li key={index}><span className="agent-key-note">Enter this code at </span><a href={event.verificationUri} target="_blank" rel="noopener noreferrer">{event.verificationUri}</a><code className="agent-login-code">{event.userCode}</code></li>;
+			return <li key={index} className="agent-key-note">{event.message}{(event.links ?? []).map((link) => <a key={link.url} href={link.url} target="_blank" rel="noopener noreferrer"> {link.label || link.url}</a>)}</li>;
+		})}
+	</ul>;
+}
+
+export function LoginPanel({ onClose, onChatGPT, onChanged }) {
+	const [providers, setProviders] = useState(null);
+	const [error, setError] = useState("");
+	const [query, setQuery] = useState("");
+	const [flow, setFlow] = useState(null);
+	const live = useRef(true);
+	const load = useCallback(async () => {
+		try { setProviders(await fetchLogins()); setError(""); } catch (failure) { setError(failure?.message || "The login list is unavailable."); }
+	}, []);
+	useEffect(() => { live.current = true; load(); return () => { live.current = false; }; }, [load]);
+	// Read the running flow until pi finishes it.
+	useEffect(() => {
+		if (!flow?.flowId || flow.done) return undefined;
+		let stopped = false;
+		(async () => {
+			let after = 0;
+			while (!stopped && live.current) {
+				let page;
+				try { page = await readLogin(flow.flowId, after); } catch (failure) { if (!stopped) setFlow((current) => current && { ...current, done: true, ok: false, message: failure?.message || "The login stopped." }); return; }
+				if (stopped) return;
+				after = page.next;
+				for (const entry of page.events) {
+					setFlow((current) => {
+						if (!current || current.flowId !== flow.flowId) return current;
+						if (entry.type === "prompt") return { ...current, prompt: entry };
+						if (entry.type === "prompt_closed") return current.prompt?.promptId === entry.promptId ? { ...current, prompt: null } : current;
+						if (entry.type === "event") return { ...current, log: [...current.log, entry] };
+						return { ...current, prompt: null, done: true, ok: entry.ok, message: entry.message ?? "" };
+					});
+					if (entry.type === "done" && entry.ok) { await onChanged?.(); load(); }
+				}
+				if (page.done) return;
+			}
+		})();
+		return () => { stopped = true; };
+	}, [flow?.flowId, flow?.done, load, onChanged]);
+
+	const begin = async (provider, method) => {
+		setError("");
+		// ChatGPT's own sign-in shows its waiting card in the panel body, so the list steps aside.
+		if (method.type === "chatgpt") { onChatGPT?.(); onClose?.(); return; }
+		try {
+			const flowId = await startLogin(provider.id, method.type);
+			setFlow({ flowId, name: provider.name, label: method.label, log: [], prompt: null, done: false });
+		} catch (failure) { setError(failure?.message || "That login could not start."); }
+	};
+	const answer = async (value) => {
+		const prompt = flow?.prompt;
+		if (!prompt) return;
+		setFlow((current) => current && { ...current, prompt: null });
+		try { await answerLogin(flow.flowId, prompt.promptId, value); } catch (failure) { setError(failure?.message || "That answer was not taken."); }
+	};
+	const cancel = async () => {
+		if (flow && !flow.done) await cancelLogin(flow.flowId).catch(() => {});
+		setFlow(null);
+	};
+	const logout = async (provider) => {
+		try { await logoutProvider(provider.id); await onChanged?.(); load(); } catch (failure) { setError(failure?.message || "Logout failed."); }
+	};
+
+	const shown = (providers ?? []).filter((entry) => !query.trim() || entry.name.toLowerCase().includes(query.trim().toLowerCase()));
+	return <section className="agent-keys agent-login" aria-label="Connect a model" data-agent-keys="true">
+		<div className="agent-keys-head">
+			<h3 className="agent-keys-title">Connect a model</h3>
+			<button type="button" className="agent-icon-button agent-keys-close" aria-label="Close" onClick={async () => { await cancel(); onClose?.(); }}><FiX size={11} aria-hidden="true" /></button>
+		</div>
+		{error && <p className="agent-key-error" role="alert">{error}</p>}
+		{flow ? <div className="agent-login-flow" data-login-flow={flow.done ? (flow.ok ? "connected" : "failed") : "running"}>
+			<p className="agent-key-label">{flow.name} · {flow.label}</p>
+			<FlowLog entries={flow.log} />
+			{flow.prompt && <PromptForm key={flow.prompt.promptId} prompt={flow.prompt} onSubmit={answer} />}
+			{!flow.done && !flow.prompt && <p className="agent-key-note">Waiting for {flow.name}…</p>}
+			{flow.done && <p className={flow.ok ? "agent-key-note" : "agent-key-error"} role={flow.ok ? "status" : "alert"}>{flow.ok ? `Connected to ${flow.name}.` : flow.message}</p>}
+			<div className="agent-key-controls"><button type="button" className="agent-ghost-button" onClick={cancel}>{flow.done ? "Back to the list" : "Cancel"}</button></div>
+		</div> : <>
+			<p className="agent-keys-hint">A subscription signs in on its own page. A key or server address you type stays with the local CozyClay service and is never shown again.</p>
+			<input className="agent-key-input" type="search" aria-label="Search providers" placeholder="Search providers" value={query} onChange={(event) => setQuery(event.target.value)} />
+			{providers === null && !error && <p className="agent-keys-note">Loading providers…</p>}
+			{GROUPS.map(([title, test]) => {
+				const rows = shown.filter(test);
+				return rows.length ? <div key={title} className="agent-login-group"><p className="agent-key-endpoint-label">{title}</p>
+					{rows.map((provider) => <div key={provider.id} className="agent-key-row" data-provider={provider.id} data-provider-signed-in={provider.connected ? "true" : "false"}>
+						<div className="agent-key-head"><span className="agent-key-label">{provider.name}</span><span className="agent-key-source">{provider.connected ? (provider.via === "oauth" ? "signed in" : provider.source || "key") : ""}</span></div>
+						<div className="agent-key-controls">
+							{provider.connected && provider.id !== "openai-codex"
+								? <button type="button" className="agent-ghost-button agent-key-remove" onClick={() => logout(provider)}>Log out</button>
+								: provider.methods.map((method) => <button key={method.type} type="button" className={method.subscription ? "agent-key-save" : "agent-ghost-button"} onClick={() => begin(provider, method)}>{method.label}</button>)}
+						</div>
+					</div>)}
+				</div> : null;
+			})}
+		</>}
+	</section>;
+}

package/src/workflow/WorkflowBuilder.jsx

@@ -15,7 +15,7 @@ import { loadWorkflowGraph, normalizeWorkflowGraph, storeWorkflowGraph, WORKFLOW
 import AgentPanel from "./AgentPanel.jsx";
 import CozySceneNode from "./CozySceneNode.jsx";
 import { applyCozyScenePatch, normalizeCozySceneData, sceneConnectionAllowed } from "./cozy-scene-node.js";
-import { activeSceneCharacters, characterHandleId, characterIdFromHandle, normalizeMotionInputData, motionInputOutput } from "./motion-input.js";
+import { activeSceneCharacters, characterHandleId, characterIdFromHandle, normalizeMotionInputData, motionInputOutput, parseMotionSpec } from "./motion-input.js";
 import { DEFAULT_NODE_SCHEMAS, defaultFormValues, schemaCategoryForType, schemaModelEntries, schemaProperties } from "./node-schema.js";
 import { executeLocalWorkflowGraph } from "./local-workflow.js";
 import { createLiveControl } from "../live-control.js";
@@ -24,7 +24,6 @@ import { startWorkflowExecution } from "../execution-telemetry.js";
 import { createCanvasCommands } from "./canvas-commands.js";
 import { applyMotionToActiveScene, importImageIntoActiveScene, readStoredSceneDocument } from "./scene-asset-sync.js";
 import { createHttpTransport } from "./agent-client.js";
-import { fetchVideoOutputBlob, requestBridgeExtract } from "../multimodel-ingest.js";
 import { canvasTakesPaste, fileToDataUrl, imageFileFromTransfer, pastedImageNodeData } from "./clipboard-image.js";
 import { appendVersion, compareIndex, pinnedInputs, selectVersion, versionLabel, versionState } from "./image-versions.js";
 import { normalizeVideoForm, videoFormContract } from "./video-contract.js";
@@ -214,10 +213,8 @@ function VideoNode({ id, data }) {
 			<label>Motion prompt</label><textarea className="workflow-textarea" value={form.prompt ?? data.prompt ?? ""} onChange={(event) => update("prompt", event.target.value)} placeholder="Motion prompt" />
 			<label>Duration (seconds)</label><input type="number" min={contract.minDuration} max={contract.maxDuration} value={form.duration_seconds} onChange={(event) => update("duration_seconds", Number(event.target.value))} />
 			<label>Aspect</label>{contract.aspectFromImage ? <><div className="workflow-hint" data-testid="video-source-aspect">Matches input image · frame the full body in the source image</div><div className="workflow-warning" role="status" data-testid="mocap-framing-warning">Before generating: confirm the captured frame shows the head, hands, feet, and any needed objects. Cropped parts can break mocap alignment.</div></> : <select value={form.aspect} onChange={(event) => update("aspect", event.target.value)}>{contract.aspects.map((aspect) => <option key={aspect}>{aspect}</option>)}</select>}
-			<label className="workflow-schema-check"><input type="checkbox" checked={Boolean(form.extract_mocap)} onChange={(event) => update("extract_mocap", event.target.checked)} />Extract GVHMR motion into connected Motion Input</label>
 		</>}
 		{data.videoUrl && <video controls className="workflow-video-preview" src={data.videoUrl} />}
-		{generated && data.motionExtraction?.motionUrl && <div className="workflow-hint" data-testid="mocap-extraction-receipt">✓ GVHMR motion extracted{Number.isFinite(data.motionExtraction.frames) ? ` · ${data.motionExtraction.frames} frames` : ""}</div>}
 		{generated && data.preservation?.pass && <div className="workflow-hint workflow-preservation-ok" data-testid="h3-preservation-receipt">✓ H3 scene/camera lock verified{h3VerificationMetrics(data.preservation)}</div>}
 		{generated && data.preservation && !data.preservation.pass && <div className="workflow-error workflow-preservation-failed" data-testid="h3-preservation-failed">✕ H3 output rejected: background/camera drift{h3VerificationMetrics(data.preservation)}</div>}
 		{generated && data.isLoading && <div className="workflow-hint">Generating video…</div>}{generated && data.errorMsg && <div className="workflow-error">{data.errorMsg}</div>}
@@ -246,9 +243,8 @@ function MotionInputNode({ id, data }) {
 			{options.map((character) => <option key={character.id} value={character.id}>{character.name || character.subject || character.id}</option>)}
 		</select>
 		<input aria-label="Character id" value={normalized.characterId} onChange={(event) => update({ characterId: event.target.value.trim() })} placeholder="character id (e.g. char-a)" />
-		<label>Same-origin motion URL</label>
-		<input aria-label="Motion URL" value={normalized.objectUrl ? "" : normalized.url} onChange={(event) => update({ url: event.target.value, objectUrl: null, status: event.target.value ? "ready" : "idle" })} placeholder="/ardy/motions/take.npz" />
-		<label className="workflow-upload workflow-motion-upload"><FiUpload size={18} /><span>{normalized.fileName || "Choose local .npz motion"}</span><input type="file" accept=".npz,application/octet-stream,.json" onChange={(event) => { const file = event.target.files?.[0]; if (!file) return; const objectUrl = URL.createObjectURL(file); update({ objectUrl, url: objectUrl, fileName: file.name, mimeType: file.type || "application/octet-stream", status: "ready" }); }} /></label>
+		<label>Motion spec (cozyclay.motion-spec.v1)</label>
+		<label className="workflow-upload workflow-motion-upload"><FiUpload size={18} /><span>{normalized.fileName || "Choose a motion spec .json"}</span><input type="file" accept=".json,application/json" onChange={(event) => { const file = event.target.files?.[0]; if (!file) return; file.text().then((body) => { const spec = parseMotionSpec(body); if (!spec) toast.error("Not a cozyclay.motion-spec.v1 file"); update(spec ? { spec, fileName: file.name, status: "ready" } : { spec: null, fileName: file.name, status: "error" }); }); }} /></label>
 		<div className="workflow-node-foot"><span>{normalized.status === "ready" ? `${handleId} ready` : "Connect to a character handle"}</span><span>{motionInputOutput(normalized).frames ? `${motionInputOutput(normalized).frames}f` : ""}</span></div>
 	</NodeShell>;
 }
@@ -539,20 +535,8 @@ export default function WorkflowBuilder() {
 						const videoForm = normalizeVideoForm(provider, { ...form, duration_seconds: form.duration_seconds ?? current.data.duration_seconds, aspect: form.aspect || current.data.aspect }, falModel);
 						const output = await createHttpTransport().video({ provider, prompt: motionPrompt, imageDataUrl: frame, ...(lastFrameDataUrl ? { lastFrameDataUrl } : {}), durationSeconds: videoForm.duration_seconds, aspect: videoForm.aspect });
 						const videoUrl = output.dataUrl || output.url;
-						let motionExtraction = null;
-						const motionTargets = graph.edges.filter((edge) => edge.source === id).map((edge) => result.nodes.find((node) => node.id === edge.target)).filter((node) => node?.type === "motion-input");
-						if (videoForm.extract_mocap && motionTargets.length) {
-							const done = await requestBridgeExtract(await fetchVideoOutputBlob(videoUrl));
-							motionExtraction = done;
-							for (const target of motionTargets) {
-								const motionData = normalizeMotionInputData({ ...target.data, url: done.motionUrl, objectUrl: null, status: "ready", frames: done.frames, fps: done.fps, motionRef: done.motionRef || null });
-								const motionOutput = motionInputOutput(motionData);
-								values.set(target.id, motionOutput);
-								patchNode(target.id, { ...motionData, outputs: [{ value: motionOutput }] });
-							}
-						}
 						values.set(id, videoUrl);
-						patchNode(id, { isLoading: false, status: "complete", videoUrl, resultUrl: videoUrl, outputs: [{ value: videoUrl }], preservation: output.preservation || null, motionExtraction, errorMsg: null });
+						patchNode(id, { isLoading: false, status: "complete", videoUrl, resultUrl: videoUrl, outputs: [{ value: videoUrl }], preservation: output.preservation || null, errorMsg: null });
 						if (videoUrl) execution.apply();
 					}
 					catch (error) {
@@ -592,7 +576,7 @@ export default function WorkflowBuilder() {
 					const source = resultById.get(assignment.source);
 					if (source?.type !== "motion-input" || !assignment.characterId) continue;
 					const motion = motionInputOutput({ ...source.data, ...(patches.get(source.id) || {}) });
-					if (motion.url) applyMotionToActiveScene(assignment.characterId, motion);
+					if (motion.spec) applyMotionToActiveScene(assignment.characterId, motion);
 				}
 			}
 			setRunState("complete");
@@ -672,8 +656,8 @@ export default function WorkflowBuilder() {
 	const onConnect = useCallback((params) => {
 		const target = nodes.find((node) => node.id === params.target);
 		const source = nodes.find((node) => node.id === params.source);
-		if (target?.type === "motion-input" && source?.type !== "video") {
-			toast.error("Motion Input accepts generated Video nodes only");
+		if (target?.type === "motion-input") {
+			toast.error("Motion Input takes a motion spec file, not a node");
 			return;
 		}
 		if (target?.type === "scene" && !sceneConnectionAllowed(source, params.targetHandle, source?.data)) {

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);