cozyclay 2.1.1 → 3.0.1

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

package/src/workflow/AgentProgressCard.jsx

@@ -0,0 +1,109 @@
+// The live progress card in the agent panel (agent-progress.js). While the agent works on motion it shows what
+// the agent actually produced so far: how many drafts it compiled and their QA trend, the latest draft's goals
+// (met or not, value against need) and heaviest issues, whether that draft is installed, and the images the
+// agent asked to see (click to enlarge, over the whole window). Nothing here is invented progress. A new turn
+// starts it over.
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { FiCheck, FiX } from "react-icons/fi";
+import { clearProgress, draftsOf, latestDraft, progressSheets, progressVersion, subscribeProgress } from "../agent-progress.js";
+import { ko } from "../locale.js";
+import { draftLabel } from "../draft-ghost.js";
+import { qaProblems } from "../qa-label.js";
+import { goalRows, issueRows, trendPoints, turnCount } from "./agent-progress-view.js";
+import "./agent-progress-card.css";
+
+const W = 220, H = 40;
+
+function Trend({ totals }) {
+	const { points, first, last } = trendPoints(totals, { width: W, height: H });
+	if (!points.length) return null;
+	const [lx, ly] = points[points.length - 1];
+	const label = ko(`Problems by draft: ${totals.join(", ")}`, `초안별 문제 수: ${totals.join(", ")}`);
+	return <div className="agent-progress-trend">
+		<svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={label} preserveAspectRatio="none">
+			<line className="base" x1={4} y1={H - 4} x2={W - 4} y2={H - 4} />
+			{points.length > 1 && <polyline className="line" points={points.map(p => p.join(",")).join(" ")} />}
+			{points.slice(0, -1).map(([x, y], i) => <circle key={i} className="dot" cx={x} cy={y} r={1.8} />)}
+			<circle className={`end ${last === 0 ? "ok" : "issue"}`} cx={lx} cy={ly} r={3.4} />
+		</svg>
+		<span className="agent-progress-trend-text">{totals.length > 1 ? `${first} → ${last}` : `${last}`}</span>
+	</div>;
+}
+
+// The panel's own lightbox stays inside the panel; a contact sheet needs the window.
+function SheetViewer({ sheet, onClose }) {
+	useEffect(() => {
+		const onKey = event => { if (event.key === "Escape") onClose(); };
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onClose]);
+	return createPortal(<button type="button" className="agent-progress-viewer" aria-label={ko("Close image", "이미지 닫기")} onClick={onClose}>
+		<img src={sheet.dataUrl} alt={sheet.caption || ko("Image the agent checked", "에이전트가 확인한 이미지")} />
+		{sheet.caption && <span className="agent-progress-viewer-caption">{sheet.caption}</span>}
+	</button>, document.body);
+}
+
+/** `since`: when the latest turn started (null: no turn yet). Drafts and images from before it are not this turn's
+ * work, such as the take the camera tutorial compiles at startup. `live`: that turn is still running. */
+export function AgentProgressCard({ items, since = null, live = false }) {
+	useSyncExternalStore(subscribeProgress, progressVersion);
+	const [open, setOpen] = useState(null);
+	// The goal and issue lists fold to one line each: the panel is short and the live steps sit below the card.
+	const [shown, setShown] = useState({});
+	const toggle = key => setShown(now => ({ ...now, [key]: !now[key] }));
+	// a new turn (not a steer of the running one) starts the card over
+	const turns = turnCount(items), seen = useRef(turns);
+	useEffect(() => {
+		if (turns > seen.current) clearProgress();
+		seen.current = turns;
+	}, [turns]);
+	const ours = record => since !== null && record.at >= since;
+	const newest = latestDraft(), latest = newest && ours(newest) ? newest : null, sheets = progressSheets().filter(ours);
+	const viewing = open && sheets.find(sheet => sheet.seq === open);
+	if (!latest && !sheets.length) return null;
+	const drafts = latest ? draftsOf(latest.characterId).filter(ours) : [];
+	const goals = goalRows(latest?.qa.goals), issues = latest && !latest.qa.ok ? issueRows(latest.qa.groups) : [];
+	return <div className="agent-row">
+		<div className="agent-card agent-progress-card" data-agent-card="progress" data-drafts={drafts.length} data-installed={latest?.installed ? "true" : "false"} role="status" aria-live="polite">
+			{latest && <div className="agent-progress-head">
+				<span className="agent-progress-title" title={ko(`${latest.qa.total} frame-level issues`, `프레임 단위 문제 ${latest.qa.total}건`)}>{draftLabel(latest)}</span>
+				<span className={`agent-progress-chip ${latest.installed ? "installed" : "draft"}`}>{latest.installed ? ko("Installed", "설치됨") : live ? ko("Not installed yet", "아직 설치 전") : ko("Not installed", "설치 안 됨")}</span>
+			</div>}
+			{latest?.label && <p className="agent-progress-label">{latest.label}</p>}
+			{drafts.length > 0 && <section className="agent-progress-section">
+				<h4>{ko(`Problems across ${drafts.length} draft${drafts.length === 1 ? "" : "s"}`, `초안 ${drafts.length}개의 문제 수`)}</h4>
+				<Trend totals={drafts.map(d => qaProblems(d.qa))} />
+			</section>}
+			{goals.length > 0 && <section className="agent-progress-section">
+				<button type="button" className="agent-progress-fold" aria-expanded={!!shown.goals} onClick={() => toggle("goals")}>
+					<h4>{ko("Goals", "목표")}</h4><span>{ko(`${goals.filter(g => g.ok).length} of ${goals.length} met`, `${goals.length}개 중 ${goals.filter(g => g.ok).length}개 충족`)}</span>
+				</button>
+				{shown.goals && <ul className="agent-progress-goals">
+					{goals.map((g, i) => <li key={i} data-goal-ok={g.ok ? "true" : "false"}>
+						<span className={`agent-progress-mark ${g.ok ? "ok" : "miss"}`} aria-label={g.ok ? ko("met", "충족") : ko("missed", "미충족")}>{g.ok ? <FiCheck size={11} /> : <FiX size={11} />}</span>
+						<span className="agent-progress-goal-name">{g.name}</span>
+						<span className="agent-progress-goal-value">{g.value}{g.need && <span className="need"> / {g.need}</span>}</span>
+					</li>)}
+				</ul>}
+			</section>}
+			{issues.length > 0 && <section className="agent-progress-section">
+				<button type="button" className="agent-progress-fold" aria-expanded={!!shown.issues} onClick={() => toggle("issues")}>
+					<h4>{ko("Largest issues", "가장 큰 문제")}</h4><span>{issues[0].kind} {issues[0].subject}</span>
+				</button>
+				{shown.issues && <ul className="agent-progress-issues">
+					{issues.map((row, i) => <li key={i}><span className="kind">{row.kind}</span> {row.subject} <span className="meta">×{row.count}{row.frames && ` · ${row.frames}`}</span></li>)}
+				</ul>}
+			</section>}
+			{sheets.length > 0 && <section className="agent-progress-section">
+				<h4>{ko("What the agent looked at", "에이전트가 본 화면")}</h4>
+				<div className="agent-progress-sheets">
+					{sheets.map(sheet => <button type="button" key={sheet.seq} className="agent-progress-sheet" title={sheet.caption} onClick={() => setOpen(sheet.seq)}>
+						<img src={sheet.dataUrl} alt={sheet.caption || ko("Image the agent checked", "에이전트가 확인한 이미지")} />
+					</button>)}
+				</div>
+			</section>}
+		</div>
+		{viewing && <SheetViewer sheet={viewing} onClose={() => setOpen(null)} />}
+	</div>;
+}

package/src/workflow/AgentReplyText.jsx

@@ -0,0 +1,37 @@
+// The agent's reply as formatted text (reply-markdown.js): paragraphs, headings, lists, bold, code and tables,
+// never the raw marks. `tail` (the streaming caret) sits at the end of the last line.
+import { Fragment, useMemo } from "react";
+import { replyBlocks } from "./reply-markdown.js";
+
+function Spans({ spans }) {
+	return spans.map((span, index) => {
+		if (span.code) return <code key={index}>{span.text}</code>;
+		if (span.bold) return <strong key={index}>{span.text}</strong>;
+		return <Fragment key={index}>{span.text}</Fragment>;
+	});
+}
+
+function Block({ block, tail }) {
+	if (block.type === "h") return <p className="agent-reply-heading"><Spans spans={block.spans} />{tail}</p>;
+	if (block.type === "code") return <pre><code>{block.text}</code>{tail}</pre>;
+	if (block.type === "ul" || block.type === "ol") {
+		const List = block.type;
+		return <List start={block.start}>
+			{block.items.map((spans, index) => <li key={index}><Spans spans={spans} />{index === block.items.length - 1 && tail}</li>)}
+		</List>;
+	}
+	if (block.type === "table") return <>
+		<div className="agent-reply-table"><table>
+			<thead><tr>{block.head.map((spans, index) => <th key={index}><Spans spans={spans} /></th>)}</tr></thead>
+			<tbody>{block.rows.map((row, rowIndex) => <tr key={rowIndex}>{row.map((spans, index) => <td key={index}><Spans spans={spans} /></td>)}</tr>)}</tbody>
+		</table></div>
+		{tail}
+	</>;
+	return <p><Spans spans={block.spans} />{tail}</p>;
+}
+
+export function ReplyText({ text, tail = null }) {
+	const blocks = useMemo(() => replyBlocks(text), [text]);
+	if (!blocks.length) return tail || null;
+	return blocks.map((block, index) => <Block key={index} block={block} tail={index === blocks.length - 1 ? tail : null} />);
+}

package/src/workflow/AgentTurnSteps.jsx

@@ -0,0 +1,84 @@
+// One turn's work in the agent panel (agent-turn.js turnLayout): a header that says how the turn stands (working,
+// done, stopped, failed), how many steps and how long, and one compact row per step: the tool call with a plain
+// label, what it was about and its one-line result; the reasoning the model streamed between calls; the call it is
+// writing now. Open while the turn runs, folded to its header when the turn ends (a failed or stopped turn stays
+// open, and a stopped one says what it left in the scene).
+import { useState } from "react";
+import { FiCheck, FiChevronRight, FiSquare, FiX } from "react-icons/fi";
+import { ko } from "../locale.js";
+import { scriptNow, stepLabel, stepResult, stepsHeader, stoppedNote, thinkingLine } from "./agent-turn.js";
+import "./agent-turn-steps.css";
+
+/** Step time: "0.6 s", "12 s", "1 m 05 s". */
+function stepClock(ms) {
+	if (!Number.isFinite(ms) || ms < 0) return "";
+	const s = ms / 1000;
+	if (s < 10) return `${s.toFixed(1)} s`;
+	if (s < 60) return `${Math.round(s)} s`;
+	return `${Math.floor(s / 60)} m ${String(Math.round(s % 60)).padStart(2, "0")} s`;
+}
+
+function StepIcon({ state }) {
+	if (state === "running") return <span className="agent-step-spin" aria-label={ko("running", "진행 중")} />;
+	if (state === "failed") return <FiX className="agent-step-icon alert" size={11} aria-label={ko("failed", "실패")} />;
+	if (state === "cancelled") return <FiSquare className="agent-step-icon warn" size={9} aria-label={ko("stopped", "중지됨")} />;
+	if (state === "note") return <span className="agent-step-dot" aria-hidden="true" />;
+	return <FiCheck className="agent-step-icon ok" size={11} aria-label={ko("done", "완료")} />;
+}
+
+function Step({ step, live, isLast, now, toolLabels }) {
+	const [open, setOpen] = useState(false);
+	if (step.kind === "narration") return <li className="agent-step narration" data-step-kind="narration"><StepIcon state="note" /><span className="agent-step-text">{step.text}</span></li>;
+	if (step.kind === "thinking") {
+		const running = live && isLast;
+		const line = thinkingLine(step.text);
+		// from its first words until the next step began; a thought that arrived at once shows no time
+		const took = (running ? now : step.endedAt ?? step.updatedAt) - step.startedAt;
+		return <li className="agent-step thinking" data-step-kind="thinking">
+			<button type="button" className="agent-step-row" aria-expanded={open} onClick={() => setOpen(value => !value)}>
+				<StepIcon state={running ? "running" : "note"} />
+				<span className="agent-step-label">{ko("Thinking", "생각")}</span>
+				<span className="agent-step-subject">{open ? "" : line}</span>
+				<span className="agent-step-time">{took >= 1000 ? stepClock(took) : ""}</span>
+			</button>
+			{open && <p className="agent-step-thought">{step.text}</p>}
+		</li>;
+	}
+	const running = step.kind === "compose" || step.status === "running";
+	const label = step.kind === "compose" ? ko(`Preparing ${stepLabel(step, toolLabels)}`, `${stepLabel(step, toolLabels)} 준비 중`) : stepLabel(step, toolLabels);
+	const result = running ? (step.progress ? `${scriptNow(step)}${step.progress.summary ? ` — ${step.progress.summary}` : ""}` : "") : stepResult(step);
+	const time = running ? now - (step.startedAt ?? now) : step.elapsedMs;
+	return <li className={`agent-step ${step.kind}${step.status === "failed" ? " failed" : ""}`} data-step-kind={step.kind} data-tool-name={step.name} data-tool-status={step.kind === "compose" ? "composing" : step.status} data-action={step.action}>
+		<div className="agent-step-row">
+			<StepIcon state={running ? "running" : step.status} />
+			<span className="agent-step-label">{label}</span>
+			{step.subject && <span className="agent-step-subject">{step.subject}</span>}
+			<span className="agent-step-time">{stepClock(time)}</span>
+		</div>
+		{result && <p className="agent-step-result">{result}</p>}
+	</li>;
+}
+
+export function TurnSteps({ block, now, toolLabels, formatClock, onRetry }) {
+	const [chosen, setChosen] = useState(null);
+	const failed = block.end?.status === "failed" || block.steps.some(step => step.failure);
+	const stopped = block.end?.status === "stopped";
+	const open = chosen ?? (block.live || failed || stopped);
+	const header = stepsHeader(block, now, formatClock);
+	const failure = block.steps.find(step => step.failure)?.failure;
+	return <div className="agent-card agent-steps" data-agent-card="steps" data-steps-state={block.live ? "live" : block.end?.status ?? "done"} data-open={open ? "true" : "false"}>
+		<button type="button" className="agent-steps-head" aria-expanded={open} onClick={() => setChosen(!open)}>
+			<span className={`agent-status-dot ${header.tone}`} aria-hidden="true" />
+			<span className="agent-steps-title">{header.text}</span>
+			<FiChevronRight className="agent-steps-chevron" size={12} aria-hidden="true" />
+		</button>
+		{open && <ol className="agent-steps-list">
+			{block.steps.map((step, index) => <Step key={step.id} step={step} live={block.live} isLast={index === block.steps.length - 1} now={now} toolLabels={toolLabels} />)}
+		</ol>}
+		{stopped && <p className="agent-steps-note">{stoppedNote(block)}</p>}
+		{failure && <div className="agent-error" role="alert">
+			<span>{failure.message || ko("The turn failed.", "턴이 실패했어요.")}</span>
+			<div className="agent-error-actions"><button type="button" className="agent-ghost-button agent-error-retry" onClick={onRetry}>{ko("Retry", "다시 시도")}</button></div>
+		</div>}
+	</div>;
+}