cozyclay 2.0.2 → 2.1.1

package/src/workflow/AgentPanel.jsx

@@ -8,6 +8,9 @@ import {
 	attachmentFromFile,
 	transferCarriesFiles,
 } from "./attachment-image.js";
+import { isImeComposing } from "../ime.js";
+import { useStudioShell } from "../shell/studio-shell-context.js";
+import { ko } from "../locale.js";
 import {
 	AGENT_PANEL_OVERLAY_BREAKPOINT,
 	AGENT_PANEL_RAIL_WIDTH,
@@ -34,9 +37,14 @@ import {
 	formatElapsed,
 	formatResetIn,
 	readStoredPanelWidth,
+	readStoredSupervisor,
 	storeModel,
 	storePanelWidth,
+	storeSupervisor,
 	STUDIO_SESSION_STORAGE_KEY,
+	selectedModelRoles,
+	shortModelId,
+	supervisorFollowUp,
 } from "./agent-client.js";
 import "./agent-panel.css";
 
@@ -122,6 +130,18 @@ function PausedCard({ resetAt, onRetry, onSwitchModel }) {
 	</div>;
 }
 
+// The lineup the sidecar derived for the selected model (#717), read-only:
+// what a turn may lean on beside it. Vision is named only when it is not the
+// selected model itself.
+function ModelRolesLine({ model, roles }) {
+	if (!roles) return null;
+	const parts = [[ko("helper", "보조"), roles.helper], [ko("advisor", "자문"), roles.advisor]];
+	if (roles.vision !== model) parts.push([ko("vision", "비전"), roles.vision]);
+	return <p className="agent-model-roles" data-agent-model-roles="true">
+		{parts.map(([label, key]) => `${label} · ${shortModelId(key)}`).join(" · ")}
+	</p>;
+}
+
 // A generation is a server-owned job. The card shows the state the runtime
 // reported, the phase it named and only a progress value it actually sent.
 function JobCard({ job, onStop, onAccept }) {
@@ -182,6 +202,47 @@ function ReceiptCard({ item }) {
 	</div>;
 }
 
+const SUPERVISOR_SEVERITY_COPY = { blocker: ko("blocker", "차단"), concern: ko("concern", "우려"), note: ko("note", "참고") };
+const SUPERVISOR_STATUS_COPY = { done: ko("done", "완료"), partial: ko("partial", "일부"), refused: ko("refused", "거부됨"), missing: ko("missing", "누락") };
+
+// The supervisor's note on a finished Studio turn (#728): muted, collapsed to
+// its summary and counts, and never acted on by itself. Its one action puts
+// the blockers and concerns into the composer as the author's next turn.
+function SupervisorCard({ note, onSend, defaultOpen = false }) {
+	const [open, setOpen] = useState(defaultOpen);
+	if (note.verdict !== "reviewed") return <div className="agent-card agent-supervisor-card" data-supervisor-verdict="unavailable">
+		<p className="agent-supervisor-summary">{ko("Supervisor review unavailable", "감독 검토를 할 수 없었어요")}{note.reason ? ` — ${note.reason}` : ""}</p>
+	</div>;
+	const followUp = supervisorFollowUp(note);
+	// Validated run_action drafts (#743), shown under the issue each one fixes.
+	const fixes = Array.isArray(note.fixes) ? note.fixes : [];
+	return <div className="agent-card agent-supervisor-card" data-supervisor-verdict="reviewed" data-open={open ? "true" : "false"}>
+		<div className="agent-supervisor-head">
+			<span className="agent-job-label">{ko("Supervisor", "감독")}</span>
+			{["blocker", "concern", "note"].filter((severity) => note.counts?.[severity] > 0).map((severity) => <span key={severity} className={`agent-job-badge agent-supervisor-badge ${severity}`} data-severity={severity}>{note.counts[severity]} {SUPERVISOR_SEVERITY_COPY[severity]}</span>)}
+			<button type="button" className="agent-ghost-button agent-supervisor-toggle" aria-expanded={open} onClick={() => setOpen((value) => !value)}>{open ? ko("Less", "접기") : ko("Details", "자세히")}</button>
+		</div>
+		<p className="agent-supervisor-summary">{note.summary}</p>
+		{open && note.items?.length > 0 && <ul className="agent-receipt-notes agent-supervisor-items">
+			{note.items.map((item, index) => <li key={index} data-status={item.status}>{SUPERVISOR_STATUS_COPY[item.status] ?? item.status} · {item.text}{item.evidence ? ` — ${item.evidence}` : ""}</li>)}
+		</ul>}
+		{open && note.issues?.length > 0 && <ul className="agent-receipt-notes agent-supervisor-issues">
+			{note.issues.map((issue, index) => {
+				const fix = fixes.find((entry) => entry.issueIndex === index);
+				return <li key={index} data-severity={issue.severity}>{SUPERVISOR_SEVERITY_COPY[issue.severity] ?? issue.severity} · {issue.text}{issue.evidence ? ` — ${issue.evidence}` : ""}
+					{fix && <code className="agent-supervisor-fix" data-fix-action={fix.action}>{`run_action ${JSON.stringify({ action: fix.action, args: fix.args })}`}</code>}
+				</li>;
+			})}
+		</ul>}
+		{followUp && <div className="agent-job-actions">
+			<button type="button" className="agent-ghost-button agent-supervisor-send" onClick={() => onSend(followUp)}
+				title={note.autofix?.eligible ? ko("Autofix is on: the blocker fixes would be applied as written", "자동 수정 켜짐: 차단 수정안을 적힌 그대로 적용합니다") : undefined}>
+				{fixes.length ? ko("Apply fixes as next prompt", "수정안 다음 턴으로 보내기") : ko("Send as next prompt", "다음 턴으로 보내기")}
+			</button>
+		</div>}
+	</div>;
+}
+
 const RECOVERY_COPY = {
 	none: "No recovery is available for this command.",
 	inspect: "Ask the agent to inspect the target before trying again.",
@@ -286,6 +347,11 @@ export default function AgentPanel({
 	const transport = useMemo(() => injectedTransport || createAgentTransport({ surface }), [injectedTransport, surface]);
 	const mockState = transport.mock ? transport.state : null;
 
+	// Inside the studio the title names the project's previs mode (#650).
+	const previsMode = useStudioShell()?.previsMode;
+	const titleMode = surface === "studio" && previsMode
+		? (previsMode === "storyboard" ? ko("Storyboard", "스토리보드") : ko("Animation", "애니메이션"))
+		: null;
 	const [collapsed, setCollapsed] = useState(defaultCollapsed);
 	// Only the dock owns a width; an embedded host sizes the panel itself and
 	// never reads the dock's stored key.
@@ -302,6 +368,8 @@ export default function AgentPanel({
 	const [modelProviders, setModelProviders] = useState([]);
 	const [model, setModel] = useState("");
 	const [modelsState, setModelsState] = useState("loading");
+	// The roles derived per main model (#717); shown, never sent or stored.
+	const [modelRoles, setModelRoles] = useState(null);
 	// null = the model's backend default; picking a model resets it.
 	const [effort, setEffort] = useState(null);
 	const efforts = useMemo(() => effortOptions(models.find((entry) => entry.id === model)), [models, model]);
@@ -309,6 +377,10 @@ export default function AgentPanel({
 	// remembered so a reload does not quietly move the next turn to another
 	// provider's model.
 	const chooseModel = useCallback((id) => { setModel(id); setEffort(null); storeModel(id); }, []);
+	// The supervisor switch (#728): a preference like the model pick. Off skips
+	// the post-turn review for every turn sent from this panel.
+	const [supervisorOn, setSupervisorOn] = useState(() => readStoredSupervisor());
+	const toggleSupervisor = useCallback(() => setSupervisorOn((current) => { storeSupervisor(!current); return !current; }), []);
 	// One place takes `{ providers, models }` from the sidecar: the grouped list
 	// the dropdown draws, the flat key-addressed list every lookup uses, and the
 	// model to open with. Returns false when nothing was advertised.
@@ -318,6 +390,7 @@ export default function AgentPanel({
 		const providers = Array.isArray(advertised?.providers) ? advertised.providers : [];
 		setModelProviders(providers);
 		setModels(list);
+		setModelRoles(advertised?.roles?.byMain ?? null);
 		// A saved or removed key arrives through this same path, so a selection the
 		// panel opened with is dropped here the moment its provider cannot run it.
 		setModel((current) => nextSelectedModel(providers, list, current));
@@ -345,6 +418,7 @@ export default function AgentPanel({
 	const [restoreReady, setRestoreReady] = useState(surface !== "studio");
 
 	const composerRef = useRef(null);
+	const focusPendingRef = useRef(false);
 	const transcriptRef = useRef(null);
 
 	// The host's context builder and image-action handler are read through refs
@@ -401,7 +475,6 @@ export default function AgentPanel({
 		try { globalThis.localStorage?.setItem(STUDIO_SESSION_STORAGE_KEY, chat.sessionId); } catch { /* storage may be unavailable */ }
 	}, [chat.sessionId, restoreReady, surface]);
 
-	// --- activity line -----------------------------------------------------
 	// One line that always states what the panel is doing, ticking while a turn
 	// is live and holding the turn's outcome for a few seconds after it ends.
 	const [activityNow, setActivityNow] = useState(() => Date.now());
@@ -416,7 +489,6 @@ export default function AgentPanel({
 		return () => clearInterval(timer);
 	}, [activity.ticking]);
 
-	// --- session bootstrap -------------------------------------------------
 	// Two ways in (#379): the ChatGPT sign-in, or a provider key the sidecar
 	// already holds. `providersConfigured` counts the second, so a session that
 	// never signed in to ChatGPT still gets a composer instead of a sign-in wall
@@ -520,7 +592,6 @@ export default function AgentPanel({
 		store.send("Give me a wide two-shot of this scene", { attachFrame: false, model });
 	}, [authState, items.length, mockState, model, store]);
 
-	// --- layout ------------------------------------------------------------
 	useEffect(() => {
 		if (embedded) return;
 		const onResize = () => setOverlay((globalThis.innerWidth || 1440) < AGENT_PANEL_OVERLAY_BREAKPOINT);
@@ -557,7 +628,10 @@ export default function AgentPanel({
 	// Focus moves to the composer whenever the panel opens. The composer only
 	// mounts once the session resolves, so authState is a dependency too:
 	// otherwise this fires against a composer that does not exist yet. A hidden
-	// embedded panel never pulls focus out of the host's own surface.
+	// embedded panel never pulls focus out of the host's own surface. An
+	// embedded panel never collapses itself (its host hides it), so shown means
+	// open there: without that the Studio composer opened unfocused and the
+	// next Cmd+V landed on the stage.
 	useEffect(() => {
 		if (hidden) {
 			// Chrome blurs a hidden focused field only on its next lifecycle step;
@@ -565,8 +639,12 @@ export default function AgentPanel({
 			if (composerRef.current && composerRef.current === document.activeElement) composerRef.current.blur();
 			return;
 		}
-		if (!collapsed) composerRef.current?.focus();
-	}, [authState, collapsed, hidden]);
+		if (!(embedded || !collapsed)) return;
+		composerRef.current?.focus();
+		// A composer still waiting on the model list is disabled and refuses
+		// focus; the open is remembered so it lands once the composer enables.
+		focusPendingRef.current = document.activeElement !== composerRef.current;
+	}, [authState, collapsed, embedded, hidden]);
 
 	useEffect(() => {
 		const node = transcriptRef.current;
@@ -597,12 +675,13 @@ export default function AgentPanel({
 		});
 	}, []);
 
-	// --- pasted and dropped pictures ---------------------------------------
 	// A screenshot is the fastest thing an author can show the agent, so the
 	// composer takes one from the clipboard or the desktop. Only a transfer that
 	// actually carries a picture is intercepted: a text paste still lands in the
 	// caret, which is the whole reason the studio's document handler steps aside
-	// for a textarea in the first place.
+	// for a textarea in the first place. The paste is taken on the composer
+	// block, not the textarea, so the Send and model buttons a click just left
+	// focus on do not hand the picture to the stage.
 	const attachFiles = useCallback(async (files) => {
 		const prepared = [];
 		let failed = 0;
@@ -612,7 +691,6 @@ export default function AgentPanel({
 		const rejected = prepared.length ? store.addAttachments(prepared).rejected : 0;
 		setAttachNotice(rejected ? ATTACHMENT_LIMIT_NOTICE : failed ? ATTACHMENT_FAILED_NOTICE : null);
 	}, [store]);
-	/** Whether this transfer belongs to the composer. */
 	const takeTransfer = useCallback((transfer) => {
 		const { images, unsupported } = attachmentFilesFromTransfer(transfer);
 		if (!images.length) {
@@ -643,12 +721,11 @@ export default function AgentPanel({
 		if (takeTransfer(event.dataTransfer)) event.preventDefault();
 	}, [takeTransfer]);
 
-	// --- turn --------------------------------------------------------------
 	const runTurn = useCallback((text) => {
 		setAttachNotice(null);
 		setSteerNotice("");
-		return store.send(text, { attachFrame, model, effort: effort ?? undefined });
-	}, [attachFrame, effort, model, store]);
+		return store.send(text, { attachFrame, model, effort: effort ?? undefined, supervisor: supervisorOn });
+	}, [attachFrame, effort, model, store, supervisorOn]);
 	const stopTurn = useCallback(() => store.stop(), [store]);
 	// Steering the turn that is already running: the composer's text joins THAT
 	// turn instead of starting a second one. A refusal (the turn ended while the
@@ -717,7 +794,6 @@ export default function AgentPanel({
 		}
 	}, [store, transport]);
 
-	// --- provider keys -----------------------------------------------------
 	// The section is read when it opens; every write goes back through the
 	// refresh above, because a key changes the session, not just a row.
 	const toggleProviderKeys = useCallback(() => {
@@ -761,7 +837,7 @@ export default function AgentPanel({
 			stopTurn();
 			return;
 		}
-		if (event.key === "Enter" && !event.shiftKey) {
+		if (event.key === "Enter" && !isImeComposing(event) && !event.shiftKey) {
 			event.preventDefault();
 			// Enter does what the button under it says: Send, or Steer while a turn
 			// on a steerable surface is still running.
@@ -784,6 +860,13 @@ export default function AgentPanel({
 	// can send to: the composer stays shut instead of submitting a turn the
 	// provider would refuse.
 	const composerDisabled = panelState === "rate-limited" || !model || !modelIsSelectable(modelProviders, model);
+	useEffect(() => {
+		if (hidden) focusPendingRef.current = false;
+		if (hidden || composerDisabled || !focusPendingRef.current) return;
+		focusPendingRef.current = false;
+		// Only claim focus nobody else has taken in the meantime.
+		if (!document.activeElement || document.activeElement === document.body) composerRef.current?.focus();
+	}, [composerDisabled, hidden]);
 
 	if (collapsed && !embedded) {
 		return <aside className="agent-panel collapsed" data-agent-state={panelState} data-agent-collapsed="true" aria-label="Agent panel, collapsed">
@@ -821,7 +904,7 @@ export default function AgentPanel({
 
 		<header className="agent-header">
 			<StatusDot tone={statusTone} title={panelState} />
-			<h2 className="agent-title">Agent</h2>
+			<h2 className="agent-title" data-previs-mode={titleMode ? previsMode : undefined}>{titleMode ? `Agent · ${titleMode}` : "Agent"}</h2>
 			<span className="agent-header-spacer" />
 			<button type="button" className="agent-icon-button agent-new" aria-label="New conversation" title="New conversation" onClick={newSession}><FiPlus size={14} aria-hidden="true" /></button>
 			{presentation.history && <span className="agent-history-wrap">
@@ -906,6 +989,7 @@ export default function AgentPanel({
 				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 === "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>;
 			})}
 
@@ -925,6 +1009,7 @@ export default function AgentPanel({
 			onDragOver={composerDisabled ? undefined : onComposerDragOver}
 			onDragLeave={composerDisabled ? undefined : onComposerDragLeave}
 			onDrop={composerDisabled ? undefined : onComposerDrop}
+			onPaste={composerDisabled ? undefined : onComposerPaste}
 		>
 			{pendingAttachments.length > 0 && <ul className="agent-attachments" aria-label="Attached images">
 				{pendingAttachments.map((attachment) => <li key={attachment.id} className="agent-attachment">
@@ -933,8 +1018,6 @@ export default function AgentPanel({
 				</li>)}
 			</ul>}
 			{attachNotice && <p className="agent-attachment-notice" role="status">{attachNotice}</p>}
-			{/* One field: the message, and under it on the same surface the
-			    frame toggle, the model and effort picks, and Send. */}
 			<div className="agent-field">
 				<textarea
 					ref={composerRef}
@@ -945,7 +1028,6 @@ export default function AgentPanel({
 					disabled={composerDisabled}
 					onChange={(event) => store.setDraft(event.target.value)}
 					onKeyDown={onComposerKeyDown}
-					onPaste={onComposerPaste}
 					onDragOver={onComposerDragOver}
 					onDrop={onComposerDrop}
 				/>
@@ -974,6 +1056,11 @@ export default function AgentPanel({
 							{efforts.map((value, index) => <option key={value} value={value} title={index === 0 ? "Default for this model" : undefined}>{value}</option>)}
 						</select>
 					)}
+					{surface === "studio" && (
+						<button type="button" className={`agent-supervisor-toggle${supervisorOn ? " is-on" : ""}`} role="switch" aria-checked={supervisorOn} aria-label={ko("Supervisor review", "감독 검토")} title={ko(supervisorOn ? "Supervisor review is on: a note arrives after each editing turn" : "Supervisor review is off", supervisorOn ? "감독 검토 켜짐: 편집 턴이 끝나면 메모가 옵니다" : "감독 검토 꺼짐")} onClick={toggleSupervisor}>
+							{ko("Supervisor", "감독")} {supervisorOn ? "ON" : "OFF"}
+						</button>
+					)}
 					<span className="agent-composer-spacer" aria-hidden="true" />
 					{surface === "studio" && i2vActionRef.current && <button
 						type="button"
@@ -995,6 +1082,7 @@ export default function AgentPanel({
 						</>
 						: <button type="button" className="agent-send" aria-label="Send" title="Send (Enter)" disabled={composerDisabled || !draft.trim()} onClick={() => runTurn(draft)}><FiArrowUp size={14} aria-hidden="true" /></button>}
 				</div>
+				<ModelRolesLine model={model} roles={selectedModelRoles(modelRoles, model)} />
 			</div>
 		</div>}
 		{/* The hint exists to warn about image spend; a surface that cannot

package/src/workflow/WorkflowBuilder.jsx

@@ -14,7 +14,7 @@ import { Toaster, toast } from "react-hot-toast";
 import { loadWorkflowGraph, normalizeWorkflowGraph, storeWorkflowGraph, WORKFLOW_STORAGE_KEY } from "../project.js";
 import AgentPanel from "./AgentPanel.jsx";
 import CozySceneNode from "./CozySceneNode.jsx";
-import { applyCozyScenePatch, normalizeCozySceneData, sceneConnectionAllowed, toCozySceneRunRequest } from "./cozy-scene-node.js";
+import { applyCozyScenePatch, normalizeCozySceneData, sceneConnectionAllowed } from "./cozy-scene-node.js";
 import { activeSceneCharacters, characterHandleId, characterIdFromHandle, normalizeMotionInputData, motionInputOutput } from "./motion-input.js";
 import { DEFAULT_NODE_SCHEMAS, defaultFormValues, schemaCategoryForType, schemaModelEntries, schemaProperties } from "./node-schema.js";
 import { executeLocalWorkflowGraph } from "./local-workflow.js";