cozyclay 2.1.1 → 3.0.0

package/src/timeline-extent.js

@@ -2,8 +2,8 @@
  * Return the current content-driven length of the shared production clock.
  *
  * The active character is represented by the editing-buffer motion; inactive
- * characters keep their committed sessionMotion. Prompt block endFrame values
- * are already expressed as an exclusive timeline count, matching motion.frames.
+ * characters keep their committed sessionMotion (motion.frames is an exclusive
+ * timeline count).
  *
  * A zero result is intentional: an empty scene keeps its existing authored
  * duration instead of collapsing the pre-generation clock to one frame.
@@ -11,28 +11,16 @@
 export function timelineContentExtent(
 	characters = [],
 	activeCharacterId = null,
-	activeMotion = null,
-	promptClips = [],
+		activeMotion = null,
 	extraFrames = 0,
 ) {
-	const longestMotion = characters.reduce((max, entry) => {
+	const authoredExtent = characters.reduce((max, entry) => {
 		const clip = entry.id === activeCharacterId ? activeMotion : entry.sessionMotion;
-		const layerPromptEnd = entry.id === activeCharacterId
-			? 0
-			: (entry.layer?.promptClips ?? []).reduce(
-				(layerMax, clip) => Math.max(layerMax, Number.isFinite(clip?.endFrame) ? clip.endFrame : 0),
-				0,
-			);
-		return Math.max(max, Number.isFinite(clip?.frames) ? clip.frames : 0, layerPromptEnd);
+		return Math.max(max, Number.isFinite(clip?.frames) ? clip.frames : 0);
 	}, 0);
-	const promptEnd = promptClips.reduce(
-		(max, clip) => Math.max(max, Number.isFinite(clip?.endFrame) ? clip.endFrame : 0),
-		0,
-	);
-	const authoredExtent = Math.max(longestMotion, promptEnd);
-	// Ingested footage owns the clock only before a cast take or prompt
-	// schedule exists. Once a 136-frame take is installed, an older 192-frame
-	// source video must not recreate the frozen tail this helper prevents.
+	// Ingested footage owns the clock only before a cast take exists. Once a
+	// 136-frame take is installed, an older 192-frame source video must not
+	// recreate the frozen tail this helper prevents.
 	return authoredExtent > 0
 		? authoredExtent
 		: Number.isFinite(extraFrames) ? extraFrames : 0;

package/src/tutorial-walk.js

@@ -0,0 +1,17 @@
+// The camera tutorial's set dressing: a short compiled walk (take v3) for the starter scene's
+// character, so the Shot / Rail / Play steps have somebody moving through the set. Built from
+// the character's own bind skeleton and placement; null for a body motion3 cannot drive.
+import { skeletonFor } from "./motion3/rigs/index.js";
+import { add, apply, ry } from "./motion3/compiler/math.js";
+
+const TUTORIAL_WALK_LABEL = "A person walks forward and stops.";
+
+export function tutorialWalkSpec(character) {
+	const sk = skeletonFor(character?.model);
+	if (!sk) return null;
+	const I = sk.index, P = sk.restWorldPos, ank = P[I.LeftFoot][1], yaw = character.rot ?? 0;
+	const at = (offset, y) => add([character.x ?? 0, character.y ?? 0, character.z ?? 0], apply(ry(yaw), [offset[0], y, offset[1]]));
+	return { schema: "cozyclay.motion-spec.v1", fps: 24, frames: 216, label: TUTORIAL_WALK_LABEL,
+		keys: [{ f: 0, set: { root: at([0, 0], P[I.Hips][1] - 0.01), yaw, foot_l: at([0.09, -0.03], ank), foot_r: at([-0.09, 0.03], ank), fyaw_l: yaw, fyaw_r: yaw } }],
+		generators: [{ type: "walk", f0: 6, steps: 8, heading: [yaw, yaw] }] };
+}

package/src/ui-scrub.js

@@ -7,7 +7,7 @@
  * a pixel buy?". They live here so a Node test can prove them without a DOM.
  *
  * Sensitivity is a RATE over a fixed travel, the same rule the timeline's
- * curve editors follow (src/ardy/timeline.jsx DRAG_TRAVEL_PX): dragging the
+ * curve editors follow (src/motion/timeline.jsx DRAG_TRAVEL_PX): dragging the
  * hand across `SCRUB_TRAVEL_PX` sweeps one meaningful span of the field. The
  * old `pixels * step` mapping tied the feel to the field's precision, so a
  * step 0.05 field needed 100 px to move 5 units while a step 1 field bolted.

package/src/use-shot-camera-tracks.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { buildShotCameraTracks, castAimPoint, followSubjectTrack } from "./camera-direction.js";
+
+/** The per-frame follow/rail camera of every shot (camera-direction.js), rebuilt
+ * when the shots, the subject's path or the cast a rail aims at change. */
+export function useShotCameraTracks({ shots, subjectTrack, subjectId, fps, yawDeg, filmback, characters, objects, frameCount, activeId, motion }) {
+	return useMemo(() => {
+		if (!subjectTrack) return null;
+		const cast = { characters, objects, shots, frameCount, fps, clipOf: (entry) => (entry.id === activeId ? motion : entry.sessionMotion) };
+		return buildShotCameraTracks({ shots, subjectTrack: followSubjectTrack(subjectTrack, subjectId, cast), fps, yawDeg, filmback, aimAt: (id, frame) => castAimPoint(id, frame, cast) });
+	}, [shots, subjectTrack, subjectId, fps, yawDeg, filmback, characters, objects, frameCount, activeId, motion]);
+}

package/src/view-ghosts.js

@@ -0,0 +1,97 @@
+// Onion-skin ghosts: translucent poses of the active character's take before and after the
+// playhead, an editor overlay (ghost-set.js draws them on GIZMO_LAYER). This module holds the
+// viewer setting (transient like the View menu: never saved, never undone) and the pure choices:
+// which frames get a ghost and how each one looks.
+import { useSyncExternalStore } from "react";
+import { expandUse } from "./motion3/skills/index.js";
+import { skeletonFor } from "./motion3/rigs/index.js";
+import { motionScene } from "./motion3/scene.js";
+
+/** off; step: every `step` frames; keys: the take spec's key frames nearest the playhead. */
+export const GHOST_MODES = Object.freeze(["off", "step", "keys"]);
+export const GHOST_COUNT = Object.freeze({ min: 1, max: 6 });
+export const GHOST_STEP = Object.freeze({ min: 1, max: 24 });
+const GHOST_DEFAULTS = Object.freeze({ mode: "off", count: 3, step: 4 });
+/** Past poses cool, future poses warm. */
+export const GHOST_COLORS = Object.freeze({ before: "#4d9cff", after: "#ff8a3d" });
+const NEAR_OPACITY = 0.46, FAR_OPACITY = 0.14;
+
+const clampInt = (value, { min, max }, fallback) => (Number.isFinite(value) ? Math.max(min, Math.min(max, Math.round(value))) : fallback);
+
+/** A full, valid setting from a partial one (unknown modes keep the current mode). */
+export function normalizeGhostSettings(patch = {}, base = GHOST_DEFAULTS) {
+	return Object.freeze({
+		mode: GHOST_MODES.includes(patch.mode) ? patch.mode : base.mode,
+		count: clampInt(patch.count, GHOST_COUNT, base.count),
+		step: clampInt(patch.step, GHOST_STEP, base.step),
+	});
+}
+
+let current = GHOST_DEFAULTS;
+const listeners = new Set();
+export const ghostSettings = () => current;
+export function setGhostSettings(patch) {
+	const next = normalizeGhostSettings(patch, current);
+	if (next.mode === current.mode && next.count === current.count && next.step === current.step) return current;
+	current = next;
+	for (const listener of listeners) listener();
+	return current;
+}
+/** What a views contact sheet draws (verify_result ghosts): the viewport's setting while it is on, else 3 each side every 4 frames. */
+export const sheetGhostSettings = () => (current.mode === "off" ? { ...GHOST_DEFAULTS, mode: "step" } : current);
+const subscribe = (listener) => { listeners.add(listener); return () => listeners.delete(listener); };
+export const useGhostSettings = () => useSyncExternalStore(subscribe, ghostSettings, ghostSettings);
+
+/** One sentence for receipts and tooltips. */
+export function describeGhosts({ mode, count, step }) {
+	if (mode === "off") return "Ghosts off.";
+	return `Ghosts: ${count} before and ${count} after the playhead, ${mode === "keys" ? "at the spec's key frames" : `every ${step} frame${step === 1 ? "" : "s"}`}.`;
+}
+
+/**
+ * The frames that get a ghost around `frame` within 0..last: `count` on each side, every `step`
+ * frames, or the nearest of `keyFrames` (mode keys). rank 1 is the nearest; the playhead's own
+ * frame never gets one.
+ */
+export function ghostFrames({ frame, last, mode, count, step, keyFrames = [] }) {
+	if (mode === "off" || !(last >= 0)) return [];
+	const at = Math.max(0, Math.min(last, Math.round(frame) || 0)), out = [];
+	const keys = mode === "keys" ? [...new Set(keyFrames.map(Math.round))].filter((f) => f >= 0 && f <= last).sort((x, y) => x - y) : null;
+	const before = keys ? keys.filter((f) => f < at).reverse() : null, after = keys ? keys.filter((f) => f > at) : null;
+	for (let rank = 1; rank <= count; rank++) {
+		const early = keys ? before[rank - 1] : at - rank * step, late = keys ? after[rank - 1] : at + rank * step;
+		if (early >= 0) out.push({ f: early, side: "before", rank });
+		if (late <= last) out.push({ f: late, side: "after", rank });
+	}
+	return out;
+}
+
+/** Colour and opacity of a ghost: its side's hue, fading with its distance in time. */
+export function ghostLook(side, rank, count) {
+	const t = count > 1 ? (rank - 1) / (count - 1) : 0;
+	return { color: GHOST_COLORS[side], opacity: +(NEAR_OPACITY + (FAR_OPACITY - NEAR_OPACITY) * t).toFixed(3) };
+}
+
+const keyCache = new WeakMap();
+/**
+ * The key frames of an installed take v3: its spec's keys with the skills it uses expanded
+ * (expandUse, lenient), the held-object keys and each generator's start, ascending. A retimed
+ * take (fix.retime) is not remapped: these are the spec's frames. [] for anything else.
+ */
+export function takeKeyFrames(take, objects = []) {
+	if (take?.schema !== "cozyclay.take.v3" || !take.spec) return [];
+	if (keyCache.has(take)) return keyCache.get(take);
+	let spec = take.spec;
+	try {
+		const sk = skeletonFor(take.rig);
+		if (sk && spec.use?.length) spec = expandUse(spec, { sk, scene: motionScene(objects), lenient: true }).spec;
+	} catch { spec = take.spec; }
+	const frames = [
+		...(spec.keys ?? []).map((k) => k?.f),
+		...Object.values(spec.objects ?? {}).flatMap((o) => (Array.isArray(o?.keys) ? o.keys.map((k) => k?.f) : [])),
+		...(spec.generators ?? []).map((g) => g?.f0),
+	].filter(Number.isFinite);
+	const keys = [...new Set(frames.map(Math.round))].sort((a, b) => a - b);
+	keyCache.set(take, keys);
+	return keys;
+}

package/src/view-ghosts.jsx

@@ -0,0 +1,49 @@
+// The viewport's onion-skin ghosts (ghost-set.js) of the active character's take v3. They live on
+// GIZMO_LAYER: the working views draw them, while the shot preview card, PlayView, captures,
+// contact sheets and exports never do. Off by default; view.setGhosts and the View menu's Ghosts
+// group turn them on (view-ghosts.js holds that setting).
+import { useEffect, useMemo } from "react";
+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 { 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
+// carried meshes are collected again on the next frames too.
+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 }) {
+	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]);
+	useEffect(() => {
+		if (!on) return undefined;
+		scene.add(set.object);
+		return () => { scene.remove(set.object); };
+	}, [on, scene, set]);
+	useEffect(() => () => set.dispose(), [set]);
+	// The canvas may render on demand: a new ghost frame set is a reason to draw.
+	useEffect(() => { invalidate(); }, [invalidate, on, entries]);
+	useEffect(() => {
+		// QA hook (test/qa-view-ghosts-browser.mjs): the live set and the renderer it draws with.
+		if (typeof window !== "undefined") window.__cozyclayGhosts = { set, gl, scene, entries };
+	}, [set, gl, scene, entries]);
+	useFrame(() => {
+		// A rig that left the stage (a hidden cast member) keeps no ghosts on it.
+		if (!set.show(on && !!rig.parent)) return;
+		set.setRig(rig);
+		set.syncSources(scene, objects, take, SOURCE_PASSES);
+		rig.parent.updateWorldMatrix(true, false);
+		set.update({ entries, take, placement: rig.parent.matrixWorld, propTake, objects, count: settings.count });
+	});
+	return null;
+}

package/src/workflow/AgentPanel.jsx

@@ -1,13 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { FiAlertTriangle, FiArrowUp, FiCheck, FiChevronRight, FiClock, FiDownload, FiFilm, 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, 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 { isImeComposing } from "../ime.js";
 import { useStudioShell } from "../shell/studio-shell-context.js";
 import { ko } from "../locale.js";
@@ -31,10 +24,8 @@ import {
 	clampPanelWidth,
 	createAgentTransport,
 	panelPresentation,
-	providerEnvLabel,
 	requestHostImageAction,
-	resolveToolLabel,
-	formatElapsed,
+	formatTurnClock,
 	formatResetIn,
 	readStoredPanelWidth,
 	readStoredSupervisor,
@@ -47,6 +38,11 @@ import {
 	supervisorFollowUp,
 } from "./agent-client.js";
 import "./agent-panel.css";
+import { AgentProgressCard } from "./AgentProgressCard.jsx";
+import { LoginPanel } from "./LoginPanel.jsx";
+import { TurnSteps } from "./AgentTurnSteps.jsx";
+import { ReplyText } from "./AgentReplyText.jsx";
+import { stepLabel, turnLayout } from "./agent-turn.js";
 
 function relativeTime(value, now = Date.now()) {
 	const at = Date.parse(value || "");
@@ -65,32 +61,6 @@ function StatusDot({ tone, title }) {
 	return <span className={`agent-status-dot ${tone}`} title={title} aria-hidden="true" />;
 }
 
-function ToolCallCard({ call, presentation, onRetry }) {
-	const tone = call.status === "running" ? "busy" : ["failed", "cancelled"].includes(call.status) ? "alert" : "ok";
-	// The badge marks a call that edits the host surface, so it is drawn exactly
-	// for the families that surface names.
-	const hostTool = Object.hasOwn(presentation.toolLabels, call.name);
-	const detail = call.error ? `error: ${call.error}` : JSON.stringify(call.result ?? call.args ?? {}, null, 2);
-	return <div className={`agent-card agent-tool-card${call.status === "failed" ? " failed" : ""}`} data-tool-status={call.status} data-tool-name={call.name}>
-		<details>
-			<summary>
-				<StatusDot tone={tone} title={call.status} />
-				<span className="agent-tool-label">{resolveToolLabel(call, presentation.toolLabels)}</span>{hostTool && <span className="agent-tool-badge">{presentation.toolBadge}</span>}
-				<span className="agent-tool-elapsed">{call.status === "running" ? "running…" : call.status === "cancelled" ? (call.result?.status === "not_applied" ? "not applied" : "result unknown") : formatElapsed(call.elapsedMs)}</span>
-				<FiChevronRight size={12} aria-hidden="true" />
-			</summary>
-			<pre className="agent-tool-detail">{detail}</pre>
-		</details>
-		{call.failure && <div className="agent-error" role="alert">
-			<span>{call.failure.message || ERROR_COPY[call.failure.code] || "The turn failed."}</span>
-			<div className="agent-error-actions">
-				<button type="button" className="agent-ghost-button agent-error-retry" onClick={onRetry}>Retry</button>
-				<button type="button" className="agent-ghost-button agent-error-details" onClick={(event) => { const card = event.currentTarget.closest(".agent-tool-card"); const details = card?.querySelector("details"); if (details) details.open = !details.open; }}>Details</button>
-			</div>
-		</div>}
-	</div>;
-}
-
 function ImageResultCard({ image, onUse, onUndo, onRegenerate, onOpen }) {
 	const applying = image.apply?.status === "applying";
 	const failed = image.apply?.status === "failed";
@@ -250,69 +220,15 @@ const RECOVERY_COPY = {
 	new_intent: "Tell the agent what to do with the changed target.",
 	reconcile: "The result is unknown; reconcile before changing this target.",
 	sign_in: "Sign in again to continue.",
+	fix_key: "Log in again under Connect a model, then retry.",
 };
 
-function FailureCard({ failure, onRetry }) {
+function FailureCard({ failure, onRetry, onFixKey }) {
 	return <div className="agent-card agent-failure-card" data-failure-code={failure.code} role="alert">
 		<div className="agent-failure-head"><FiAlertTriangle size={12} aria-hidden="true" /><span className="agent-failure-code">{failure.code}</span></div>
 		<p className="agent-failure-message">{failure.message || "The command did not complete."}</p>
 		<p className="agent-failure-recovery">{RECOVERY_COPY[failure.recovery?.action] || RECOVERY_COPY.none}{failure.preserved?.authoredState === "unchanged" ? " Nothing in the scene changed." : failure.preserved?.authoredState === "unknown" ? " Whether the scene changed is unknown." : ""}</p>
-		{failure.recovery?.retryAllowed && <div className="agent-error-actions"><button type="button" className="agent-ghost-button agent-error-retry" onClick={onRetry}>Retry</button></div>}
-	</div>;
-}
-
-// One provider's credential row. The key lives in this component and nowhere
-// else: it is typed into a password field, handed to the transport once and
-// dropped the moment the sidecar accepts it, so no store, no transcript and no
-// screenshot can ever carry it. The sidecar answers with the SOURCE of a key
-// (env / file), never with a key, which is what the row reports.
-function ProviderKeyRow({ provider, onSave, onRemove }) {
-	const [draft, setDraft] = useState("");
-	const [busy, setBusy] = useState(false);
-	const [error, setError] = useState("");
-	const fromEnv = provider.authSource === "env";
-	const fromFile = provider.authSource === "file";
-	const envLabel = `set by ${providerEnvLabel(provider.id)}`;
-	const inputId = `agent-key-${provider.id}`;
-	const run = async (action) => {
-		setBusy(true);
-		setError("");
-		try {
-			await action();
-			// The key is gone from the page the instant it is stored.
-			setDraft("");
-		} catch (failure) {
-			// The sidecar's own refusal, which never quotes key material.
-			setError(failure?.message || "The sidecar refused that key.");
-		} finally {
-			setBusy(false);
-		}
-	};
-	return <div className="agent-key-row" data-provider={provider.id} data-provider-source={provider.authSource || "none"} data-provider-signed-in={provider.signedIn ? "true" : "false"}>
-		<div className="agent-key-head">
-			<StatusDot tone={provider.signedIn ? "ok" : ""} title={provider.signedIn ? "key configured" : "no key"} />
-			<label className="agent-key-label" htmlFor={inputId}>{provider.label}</label>
-			{/* The head states WHERE the key lives in two words; the variable's own
-			    name belongs on the input it replaces, where there is room for it. */}
-			<span className="agent-key-source">{fromEnv ? "environment" : fromFile ? "saved on this machine" : "no key"}</span>
-		</div>
-		<div className="agent-key-controls">
-			<input
-				id={inputId}
-				className="agent-key-input"
-				type="password"
-				autoComplete="off"
-				spellCheck="false"
-				aria-label={`${provider.label} API key`}
-				placeholder={fromEnv ? envLabel : provider.signedIn ? "Replace key" : "Paste API key"}
-				disabled={fromEnv || busy}
-				value={draft}
-				onChange={(event) => { setDraft(event.target.value); setError(""); }}
-			/>
-			<button type="button" className="agent-key-save" disabled={fromEnv || busy || !draft.trim()} onClick={() => run(() => onSave(provider.id, draft))}>Save</button>
-			{fromFile && <button type="button" className="agent-ghost-button agent-key-remove" disabled={busy} onClick={() => run(() => onRemove(provider.id))}>Remove</button>}
-		</div>
-		{error && <p className="agent-key-error" role="alert">{error}</p>}
+		{failure.recovery?.retryAllowed && <div className="agent-error-actions">{failure.recovery.action === "fix_key" && onFixKey && <button type="button" className="agent-ghost-button agent-error-keys" onClick={onFixKey}>Log in again</button>}<button type="button" className="agent-ghost-button agent-error-retry" onClick={onRetry}>Retry</button></div>}
 	</div>;
 }
 
@@ -336,7 +252,6 @@ export default function AgentPanel({
 	surface = "workflow",
 	buildContext = null,
 	onImageAction = null,
-	onI2vAction = null,
 	onReceipt = null,
 }) {
 	// What this host shows around the shared conversation: labels, chips, the
@@ -405,10 +320,8 @@ export default function AgentPanel({
 	const [lightbox, setLightbox] = useState(null);
 	const [overlay, setOverlay] = useState(() => !embedded && (globalThis.innerWidth || 1440) < AGENT_PANEL_OVERLAY_BREAKPOINT);
 	const [historyOpen, setHistoryOpen] = useState(false);
-	// Provider credentials, read from the sidecar only while the section is open.
+	// Connect a model (pi's login list, LoginPanel.jsx) reads its own list from the sidecar while it is open.
 	const [keysOpen, setKeysOpen] = useState(false);
-	const [providers, setProviders] = useState([]);
-	const [providersState, setProvidersState] = useState("loading");
 	const [historySessions, setHistorySessions] = useState([]);
 	const [restoreNotice, setRestoreNotice] = useState("");
 	// Why the last steer did not reach the running turn. It reads in the same
@@ -427,8 +340,6 @@ export default function AgentPanel({
 	buildContextRef.current = buildContext;
 	const imageActionRef = useRef(onImageAction);
 	imageActionRef.current = onImageAction;
-	const i2vActionRef = useRef(onI2vAction);
-	i2vActionRef.current = onI2vAction;
 	const receiptRef = useRef(onReceipt);
 	receiptRef.current = onReceipt;
 
@@ -479,10 +390,15 @@ export default function AgentPanel({
 	// is live and holding the turn's outcome for a few seconds after it ends.
 	const [activityNow, setActivityNow] = useState(() => Date.now());
 	const activity = model
-		? describeActivity(chat, { now: activityNow, toolLabel: (call) => resolveToolLabel(call, presentation.toolLabels) })
+		? describeActivity(chat, { now: activityNow, toolLabel: (call) => stepLabel(call, presentation.toolLabels) })
 		: modelsState === "failed"
 			? { phase: "no-model", kind: "terminal", tone: "alert", text: "No model available — the agent service did not answer with one", ticking: false }
 			: { phase: "models", kind: "live", tone: "busy", text: "Loading models…", ticking: false };
+	// The transcript grouped per turn, and the motion progress card (above the latest turn's steps, so the live
+	// step stays at the bottom where the transcript scrolls) limited to that turn's drafts.
+	const layout = useMemo(() => turnLayout(items, { streaming }), [items, streaming]);
+	const turnSince = streaming ? chat.turnStartedAt : chat.lastTurn ? chat.lastTurn.endedAt - chat.lastTurn.durationMs : null;
+	const progressCard = <AgentProgressCard items={items} since={turnSince} live={streaming} />;
 	useEffect(() => {
 		if (!activity.ticking) return;
 		const timer = setInterval(() => setActivityNow(Date.now()), 500);
@@ -510,21 +426,6 @@ export default function AgentPanel({
 			return null;
 		}
 	}, [sessionState, transport]);
-	// The sidecar owns the credentials; this reads which providers have one and
-	// where it came from. The list is read when the keys section opens and again
-	// after every write — a key that just landed (or left) changes which models
-	// the composer may offer, so the model list is re-read with it.
-	const readProviders = useCallback(async () => {
-		try {
-			const list = await transport.providers?.();
-			if (!Array.isArray(list)) throw new Error("no provider list");
-			setProviders(list);
-			setProvidersState("ready");
-		} catch {
-			setProviders([]);
-			setProvidersState("failed");
-		}
-	}, [transport]);
 	// Everything an authentication change moves, read back once: WHO the session
 	// is (readiness is `signedIn || providersConfigured > 0`), which providers
 	// hold a credential, and WHICH models this session may therefore send to. A
@@ -535,13 +436,11 @@ export default function AgentPanel({
 	// into a composer without reloading the page, and what takes it away again
 	// when the last way in goes. No timer is involved.
 	const refreshProviderState = useCallback(async () => {
-		const session = readAccount();
-		await readProviders();
-		await session;
+		await readAccount();
 		try {
 			applyModelList(await transport.models());
 		} catch { /* the composer keeps the list it was last advertised */ }
-	}, [applyModelList, readAccount, readProviders, transport]);
+	}, [applyModelList, readAccount, transport]);
 
 	useEffect(() => {
 		let cancelled = false;
@@ -798,20 +697,13 @@ export default function AgentPanel({
 	// refresh above, because a key changes the session, not just a row.
 	const toggleProviderKeys = useCallback(() => {
 		setMenuOpen(false);
-		const next = !keysOpen;
-		setKeysOpen(next);
-		if (!next) return;
-		setProvidersState("loading");
-		readProviders();
-	}, [keysOpen, readProviders]);
-	const saveProviderKey = useCallback(async (id, key) => {
-		await transport.setProviderKey(id, key);
-		await refreshProviderState();
-	}, [refreshProviderState, transport]);
-	const removeProviderKey = useCallback(async (id) => {
-		await transport.removeProviderKey(id);
-		await refreshProviderState();
-	}, [refreshProviderState, transport]);
+		setKeysOpen(!keysOpen);
+	}, [keysOpen]);
+	// Opens (never toggles) Connect a model, pi's login list: the signed-out card and a refused key both lead here.
+	const openProviderKeys = useCallback(() => {
+		setMenuOpen(false);
+		setKeysOpen(true);
+	}, []);
 
 	// Clearing the transcript also retires the session, so what the author sees
 	// and what the model remembers cannot diverge.
@@ -927,8 +819,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}>Provider keys…</button>
-					<button type="button" role="menuitem" onClick={signOut}>Sign out</button>
+					<button type="button" role="menuitem" className="agent-menu-keys" aria-expanded={keysOpen} onClick={toggleProviderKeys}>Connect a model…</button>
+					{account?.signedIn && <button type="button" role="menuitem" onClick={signOut}>Sign out</button>}
 				</div>}
 			</span>
 			{!embedded && <button type="button" className="agent-icon-button agent-collapse" onClick={() => setCollapsed(true)} aria-label="Collapse agent panel" title="Collapse agent panel (Cmd/Ctrl+B)"><FiChevronRight size={13} /></button>}
@@ -939,28 +831,21 @@ export default function AgentPanel({
 
 		{/* An inline section, not a modal: the panel stays the one place the
 		    conversation and the credentials it runs on are managed. */}
-		{keysOpen && <section className="agent-keys" aria-label="Provider keys" data-agent-keys="true">
-			<div className="agent-keys-head">
-				<h3 className="agent-keys-title">Provider keys</h3>
-				<button type="button" className="agent-icon-button agent-keys-close" aria-label="Close provider keys" onClick={() => setKeysOpen(false)}><FiX size={11} aria-hidden="true" /></button>
-			</div>
-			<p className="agent-keys-hint">Keys are stored by the local CozyClay service and are never shown again.</p>
-			{providersState === "loading" && <p className="agent-keys-note">Loading providers…</p>}
-			{providersState === "failed" && <p className="agent-keys-note alert" role="alert">The provider list is unavailable.</p>}
-			{providers.filter((entry) => entry.id !== "openai-codex").map((entry) => <ProviderKeyRow key={entry.id} provider={entry} onSave={saveProviderKey} onRemove={removeProviderKey} />)}
-		</section>}
+		{keysOpen && <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>Sign in with ChatGPT</h3>
-				<p>The agent runs against your ChatGPT plan. Sign-in happens in your browser — no token is ever stored in this page.</p>
+				<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>
+				<button type="button" className="agent-ghost-button agent-use-key" onClick={openProviderKeys}>Log in with another provider</button>
 			</div>}
 
 			{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>
-				<p>Finish the ChatGPT sign-in in the tab that just opened. This panel picks up the session when you come back.</p>
+				<p>Finish the ChatGPT sign-in in the browser page that just opened. This panel picks up the session when you come back.</p>
+				{account?.authorizeUrl && <a className="agent-ghost-button agent-signin-link" href={account.authorizeUrl} target="_blank" rel="noopener noreferrer">Open the sign-in page again</a>}
 			</div>}
 
 			{authState === "no-entitlement" && <div className="agent-state-card" data-agent-card="no-entitlement">
@@ -977,22 +862,28 @@ export default function AgentPanel({
 				</div>
 			</div>}
 
-			{items.map((item) => {
+			{/* One step list per turn (AgentTurnSteps.jsx); the motion progress card sits just above the latest one. */}
+			{layout.map((entry) => {
+				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>
+				</Fragment>;
+				const { item } = entry;
 				if (item.kind === "user") return <div className="agent-row user" key={item.id}>
 					{item.attachments?.length > 0 && <div className="agent-bubble-attachments">
 						{item.attachments.map((attachment, index) => <img key={`${item.id}-${index}`} src={attachment.dataUrl} alt={attachment.name || "Attached image"} onClick={() => setLightbox({ dataUrl: attachment.dataUrl, prompt: attachment.name })} />)}
 					</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">{item.text}{streaming && <span className="agent-caret">▌</span>}</div></div>;
-				if (item.kind === "tool") return <div className="agent-row" key={item.id}><ToolCallCard call={item} presentation={presentation} onRetry={() => runTurn(chat.lastPrompt)} /></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 === "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)} /></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>;
 				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}
 			{rateLimit && <PausedCard resetAt={rateLimit.resetAt} onRetry={() => { store.clearRateLimit(); runTurn(chat.lastPrompt); }} onSwitchModel={switchModel} />}
 		</div>
 
@@ -1001,6 +892,7 @@ export default function AgentPanel({
 		{authenticated && <div className="agent-activity" data-agent-activity={activity.phase} data-agent-activity-kind={activity.kind} role="status" aria-live="polite">
 			<span className={`agent-activity-indicator ${activity.tone}`} aria-hidden="true" />
 			<span className="agent-activity-text">{activity.text}</span>
+			{activity.detail && <span className="agent-activity-detail">{activity.detail}</span>}
 		</div>}
 
 		{authenticated && <div
@@ -1062,17 +954,6 @@ export default function AgentPanel({
 						</button>
 					)}
 					<span className="agent-composer-spacer" aria-hidden="true" />
-					{surface === "studio" && i2vActionRef.current && <button
-						type="button"
-						className="agent-attach-chip agent-i2v-action"
-						data-testid="i2v-agent-action"
-						aria-label="Generate motion"
-						title="Generate motion from this message"
-						disabled={composerDisabled || !draft.trim() || streaming}
-						onClick={() => { const instruction = draft.trim(); store.setDraft(""); i2vActionRef.current?.(instruction); }}
-					>
-						<FiFilm size={13} aria-hidden="true" />
-					</button>}
 					{/* While a turn runs, Stop is still the way out of it; on a surface
 					    that can be steered, Send becomes the way INTO it. */}
 					{streaming