cozyclay 2.0.2 → 2.1.1

package/src/panels/RigControlPanel.jsx

@@ -3,22 +3,23 @@ import Foldout from "./Foldout.jsx";
 import { useStudioShell } from "../shell/studio-shell-context.js";
 import { useMotionCommands } from "../domains/motion.js";
 import { ko, isKo } from "../locale.js";
-import { HIERARCHY_INSPECTOR_TITLES } from "../app-stage.jsx";
+import { HIERARCHY_INSPECTOR_TITLES, lineTrackLabel } from "../app-stage.jsx";
 import { PhysicsPanel } from "../ardy/physics-panel.jsx";
 import { Field } from "../ui.jsx";
 import { MotionReadiness } from "../motion-readiness-ui.jsx";
 import { RangePinPanel } from "../range-pin-panel.jsx";
+import { TRAIL_TRACKS } from "../motion-trail.js";
 import { PlatformFitPanel } from "../ardy/platform-fit-panel.jsx";
 import "../ardy/auto-fix-panel.css";
 import "./pose.css";
 
 export default function RigControlPanel({
- isRigSelection, rigSelection, ikChains, ikFocus, footSnap, ikMode,
+ isRigSelection, rigSelection, ikChains, ikFocus, footSnap, ikMode, poseObjectOpacity = 0.2, setPoseObjectOpacity,
  collisionCleanupSupported, motion, autoPhysicsRunning, physicsProgress, physicsPreview,
  physicsShow, physicsOptions, tlFrame, changePhysicsOptions, runAutoPhysics, showPhysicsPreview,
  applyPhysicsPreview, cancelPhysicsPreview, setTlFrame, platformFitRunning, platformFitProgress,
  platformFitLast, platformFitApplied, ikEditTool, setIkEditTool, showTrails, setShowTrails,
- trailFalloffS, setTrailFalloffS, trailEdit, generationBusy, bridgeChecking, bridge,
+ trailFalloffS, setTrailFalloffS, trailEdit, trailTrackFocus = null, selectTrailTrack, clearTrailTrackFocus, pendingIkEdit = null, applyPendingIkEdit, cancelPendingIkEdit, generationBusy, bridgeChecking, bridge,
  runTrailRegeneration, trailReadinessState, openMotionSetup, recheckMotionHealth,
  rangePins = [], rangePinResiduals = new Map(), rangePinSelection = null, rangePinPartPick = null,
  rangePinPreview = null, objects = [], setRangePinSelection, setRangePinPartPick,
@@ -49,6 +50,13 @@ export default function RigControlPanel({
     <div className="pose-row"><span>{ko("Foot lock", "발 고정")}</span><b>{footSnap ? ko("On", "켜짐") : ko("Off", "꺼짐")}</b></div>
     <div className="pose-row"><span>{ko("Body contact", "몸 접촉")}</span><b>{ikChains ? ko("Ready", "준비됨") : ko("Unavailable", "사용 불가")}</b></div>
     <div className="pose-row"><span>{ko("Influence", "영향")}</span><b>{ikFocus ?? ko("All", "전체")}</b></div>
+    {setPoseObjectOpacity && <div className="pose-row pose-object-opacity">
+     <span>{ko("Object opacity", "오브젝트 투명도")}</span>
+     <input type="range" min={0} max={100} step={5} value={Math.round(poseObjectOpacity * 100)}
+      data-testid="pose-object-opacity" aria-label={ko("Scene object opacity while posing", "포즈 편집 중 오브젝트 불투명도")}
+      onChange={(event) => setPoseObjectOpacity(Number(event.target.value) / 100)} />
+     <b>{Math.round(poseObjectOpacity * 100)}%</b>
+    </div>}
     <p className="inspector-hint">{rigSelection && rigSelection.token !== "rig" ? (isKo ? `${HIERARCHY_INSPECTOR_TITLES[rigSelection.token]}이 활성 제어 그룹입니다.` : `${HIERARCHY_INSPECTOR_TITLES[rigSelection.token]} is the active control group.`) : ko("Select a body group to pose it in the viewport.", "몸 그룹을 선택해 뷰포트에서 포즈를 잡으세요.")}</p>
    </section>
    {ikMode && <section className="pose-section" data-testid="pose-active-tool">
@@ -58,9 +66,22 @@ export default function RigControlPanel({
      <button type="button" className={"btn" + (ikEditTool === "trail" ? " primary" : "")} aria-pressed={ikEditTool === "trail"} disabled={!showTrails} onClick={() => setIkEditTool("trail")}>{ko("Path fix", "경로 수정")}</button>
      <button type="button" data-testid="range-pin-tool" className={"btn" + (ikEditTool === "pin" ? " primary" : "")} aria-pressed={ikEditTool === "pin"} disabled={!motion} onClick={() => { setIkEditTool("pin"); setRangePinPartPick?.(null); }}>{ko("Pin", "고정")}</button>
     </div>
+    {pendingIkEdit && <div className="pose-section" data-testid="ik-pending-edit">
+     <div className="pose-row"><span>{ko("IK preview", "IK 미리보기")}</span><b>{pendingIkEdit.startFrame}–{pendingIkEdit.endFrame}</b></div>
+     <p className="inspector-hint">{ko("The drag is previewed. Apply it to the selected motion block or cancel it.", "드래그를 미리 보고 있어요. 선택한 모션 블록에 적용하거나 취소하세요.")}</p>
+     <div className="pose-actions">
+      <button type="button" className="btn primary" data-testid="ik-apply-range" onClick={applyPendingIkEdit}>{ko("Apply range", "구간 적용")}</button>
+      <button type="button" className="btn" data-testid="ik-cancel-preview" onClick={cancelPendingIkEdit}>{ko("Cancel", "취소")}</button>
+     </div>
+    </div>}
     {ikEditTool === "pin" && <RangePinPanel active motion={motion} frame={tlFrame} frameCount={motion?.frames ?? 1} fps={motion?.fps ?? 24} pins={rangePins} residuals={rangePinResiduals} objects={objects} selectedPinId={rangePinSelection} partPick={rangePinPartPick} conflictFrames={rangePinPreview?.conflictFrames ?? []} overlapError={rangePinPreview?.overlapError ?? ""} onSelectPin={(id) => { setRangePinSelection?.(id); if (id) setIkEditTool("pin"); }} onApply={applyRangePinDraft} onCancel={() => { setRangePinSelection?.(null); setIkEditTool("ik"); }} onDelete={deleteRangePin} onPreviewTarget={previewRangePinDraft} />}
     {ikEditTool === "trail" && <>
      <button type="button" className="btn full" aria-pressed={showTrails} onClick={() => setShowTrails((value) => !value)}>{ko(`Trails ${showTrails ? "on" : "off"}`, `궤적선 ${showTrails ? "표시" : "숨김"}`)}</button>
+     <label className="pose-row" data-testid="trail-selection"><span>{ko("Shown line", "표시 라인")}</span><select data-testid="trail-track-select" value={trailTrackFocus ?? ""} onChange={(event) => selectTrailTrack(event.target.value)}>
+      <option value="" disabled>{ko("All lines", "모든 라인")}</option>
+      {TRAIL_TRACKS.map((track) => <option key={track.id} value={track.id}>{lineTrackLabel(track.id)}</option>)}
+     </select></label>
+     {trailTrackFocus && <button type="button" className="btn full" data-testid="trail-show-all" onClick={clearTrailTrackFocus}>{ko("Show all lines", "모든 라인 보기")}</button>}
      <Field label={ko("Falloff", "영향 범위")}><div className="trail-falloff-row"><input type="range" min={0.1} max={2} step={0.1} value={trailFalloffS} onChange={(event) => setTrailFalloffS(Number(event.target.value))} /><span className="trail-falloff-value">{trailFalloffS.toFixed(1)}s</span></div></Field>
      <button type="button" className="btn primary full" disabled={!trailEdit || !motion?.url || generationBusy || bridgeChecking || bridge === null} onClick={runTrailRegeneration}>{ko("Regenerate", "재생성")}</button>
      <MotionReadiness state={trailReadinessState} checking={bridgeChecking} onSetup={() => openMotionSetup("trail")} onRetry={recheckMotionHealth} />

package/src/panels/RigPanel.jsx

@@ -1,6 +1,6 @@
 import Foldout from "./Foldout.jsx";
 import { ko } from "../locale.js";
-import { CHARACTER_MODEL_IDS } from "../scenes.js";
+import { CHARACTER_MODEL_IDS, isProxyFigure } from "../scenes.js";
 import { PoseThumbPreview } from "../posestudio.jsx";
 import { DEFAULT_POSE } from "../poses.js";
 import { CHARACTER_MODEL_LABELS } from "../app-stage.jsx";
@@ -8,6 +8,7 @@ import { useBus } from '../app-context.js';
 
 export default function RigPanel({ isCharacterSelection, activeChar }) {
 	const { run } = useBus();
+	if (isProxyFigure(activeChar)) return null;
 	return (
 <Foldout hidden={!isCharacterSelection} defaultOpen={false} title={ko("Rig", "리그")}>
 					{/* The rig is a property of the character, and swapping it is a

package/src/panels/SculptPanel.jsx

@@ -0,0 +1,405 @@
+import { useEffect, useRef, useState } from "react";
+import Foldout from "./Foldout.jsx";
+import { ko, isKo } from "../locale.js";
+import { effortOptions } from "../workflow/agent-client.js";
+import "./sculpt.css";
+
+// Sculpt mode side panel (#739). Pure view: the run controller owns the run state and the
+// reference; this panel only renders it and reports the operator's intent through callbacks.
+
+const STAGES = [
+	["measure", ko("Measure", "측정")],
+	["draft", ko("Draft", "초안")],
+	["score", ko("Score", "채점")],
+	["refine", ko("Refine", "다듬기")],
+];
+const RUNNING = new Set(["measure", "draft", "score", "refine"]);
+const IMAGE_TYPES = new Set(["image/png", "image/jpeg", "image/webp"]);
+
+function pickImage(files) {
+	return [...(files ?? [])].find((file) => IMAGE_TYPES.has(file.type)) ?? null;
+}
+
+function formatElapsed(ms) {
+	const seconds = Math.max(0, Math.round((ms || 0) / 1000));
+	const minutes = Math.floor(seconds / 60);
+	return minutes ? `${minutes}:${String(seconds % 60).padStart(2, "0")}` : `${seconds}s`;
+}
+
+function formatIou(iou) {
+	return Number.isFinite(iou) ? iou.toFixed(3) : "—";
+}
+
+
+function formatClock(ms) {
+	const seconds = Math.max(0, Math.floor((ms || 0) / 1000));
+	return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+
+/** Re-render every half second while something is awaited, so the wait counts up live. */
+function useTicking(active) {
+	const [, setTick] = useState(0);
+	useEffect(() => {
+		if (!active) return undefined;
+		const timer = setInterval(() => setTick((value) => value + 1), 500);
+		return () => clearInterval(timer);
+	}, [active]);
+}
+
+/** What the run is waiting on right now, how long it has waited and how long that usually takes. */
+function NowLine({ waiting, now = Date.now() }) {
+	if (!waiting) return null;
+	const waited = Math.max(0, now - (waiting.since ?? now));
+	const expect = Number.isFinite(waiting.expectMs) && waiting.expectMs > 0 ? waiting.expectMs : null;
+	const over = expect !== null && waited > expect * 1.5;
+	return (
+		<div className="sculpt-now" data-testid="sculpt-now" data-what={waiting.what} data-over={over ? "true" : undefined} role="status" aria-live="polite">
+			<span className="sculpt-clay" aria-hidden="true" />
+			<span className="sculpt-now-label">{waiting.label}</span>
+			<span className="sculpt-now-time" data-testid="sculpt-now-time">{Math.floor(waited / 1000)}s</span>
+			{expect !== null && (
+				<span className="sculpt-now-expect">
+					{over ? ko("taking longer than usual", "평소보다 오래 걸려요") : isKo ? `보통 ~${Math.round(expect / 1000)}초` : `usually ~${Math.round(expect / 1000)}s`}
+				</span>
+			)}
+			{expect !== null && <span className="sculpt-now-bar" aria-hidden="true"><span style={{ "--sculpt-wait": Math.min(1, waited / expect) }} /></span>}
+		</div>
+	);
+}
+
+/** IoU after each scored round, against the target line; the newest point pulses. */
+function IouTrail({ history, target }) {
+	if (!history?.length) return null;
+	const values = history.map((row) => row.iou);
+	const low = Math.max(0, Math.min(...values, target ?? 1) - 0.05);
+	const y = (iou) => 30 - ((iou - low) / Math.max(0.01, 1 - low)) * 26;
+	const x = (index) => (history.length === 1 ? 50 : 6 + (index / (history.length - 1)) * 88);
+	const last = history.at(-1).iou;
+	const delta = history.length > 1 ? last - history.at(-2).iou : null;
+	return (
+		<div className="sculpt-trail" data-testid="sculpt-trail">
+			<svg viewBox="0 0 100 34" preserveAspectRatio="none" aria-label={isKo ? `라운드별 IoU: ${values.map((v) => v.toFixed(3)).join(", ")}` : `IoU by round: ${values.map((v) => v.toFixed(3)).join(", ")}`} role="img">
+				{target !== null && <line className="sculpt-trail-target" x1="0" x2="100" y1={y(target)} y2={y(target)} />}
+				{history.length > 1 && <polyline className="sculpt-trail-line" points={history.map((row, index) => `${x(index)},${y(row.iou)}`).join(" ")} />}
+				{history.map((row, index) => <circle key={index} className="sculpt-trail-dot" data-last={index === history.length - 1 ? "true" : undefined} cx={x(index)} cy={y(row.iou)} r="2.2" />)}
+			</svg>
+			{delta !== null && <span className="sculpt-delta" key={history.length} data-testid="sculpt-delta" data-sign={delta >= 0 ? "up" : "down"}>{delta >= 0 ? "+" : ""}{delta.toFixed(3)}</span>}
+		</div>
+	);
+}
+
+/** The latest candidate ranking as a race: each fix's IoU as a bar that grows in, the leader marked. */
+function CandidateRace({ candidates }) {
+	if (!candidates?.length) return null;
+	const scored = candidates.filter((row) => Number.isFinite(row.iou));
+	const lo = scored.length ? Math.min(...scored.map((row) => row.iou)) - 0.02 : 0;
+	const hi = scored.length ? Math.max(...scored.map((row) => row.iou)) + 0.01 : 1;
+	const leader = candidates.find((row) => !row.refused && Number.isFinite(row.iou));
+	return (
+		<ol className="sculpt-race" data-testid="sculpt-race" aria-label={ko("Candidate fixes, best first", "후보 수정안 (좋은 순)")}>
+			{candidates.map((row, index) => (
+				<li key={`${row.label}-${index}`} className="sculpt-race-row" data-leader={row === leader ? "true" : undefined} data-refused={row.refused ? "true" : undefined}
+					style={{ "--sculpt-race": Number.isFinite(row.iou) ? Math.max(0.04, (row.iou - lo) / Math.max(0.001, hi - lo)) : 0, "--sculpt-race-delay": `${index * 90}ms` }}>
+					<span className="sculpt-race-label" title={row.label}>{row.label}</span>
+					<span className="sculpt-race-bar" aria-hidden="true"><span /></span>
+					<span className="sculpt-race-score">{row.refused ? ko("refused", "거부") : Number.isFinite(row.delta) ? `${row.delta >= 0 ? "+" : ""}${row.delta.toFixed(3)}` : formatIou(row.iou)}</span>
+				</li>
+			))}
+		</ol>
+	);
+}
+
+/** The run's own account of itself, newest at the bottom and kept in view. */
+function ActivityLog({ activity }) {
+	const logRef = useRef(null);
+	useEffect(() => {
+		const logList = logRef.current;
+		if (logList) logList.scrollTop = logList.scrollHeight;
+	}, [activity?.length]);
+	if (!activity?.length) return null;
+	return (
+		<ol className="sculpt-log" data-testid="sculpt-log" ref={logRef} aria-label={ko("Sculpt activity", "조형 진행 기록")}>
+			{activity.map((row) => (
+				<li key={row.id} className="sculpt-log-row" data-kind={row.kind}>
+					<span className="sculpt-log-time">{formatClock(row.atMs)}</span>
+					<span className="sculpt-log-dot" aria-hidden="true" />
+					<span className="sculpt-log-text">{row.text}</span>
+				</li>
+			))}
+		</ol>
+	);
+}
+
+/** The measured slices drawn over the reference: a scan line while measuring, then each slice's spans. */
+function OutlineScan({ outline, scanning }) {
+	const box = outline?.box;
+	return (
+		<>
+			{scanning && <span className="sculpt-scanline" data-testid="sculpt-scanline" aria-hidden="true" />}
+			{box && (
+				<svg className="sculpt-scan" data-testid="sculpt-scan" viewBox="0 0 1 1" preserveAspectRatio="none" aria-hidden="true">
+					{outline.rows.flatMap((row, index) => row.spans.map(([from, to], spanIndex) => {
+						const centre = box.left + box.width / 2;
+						const scale = box.height * (box.aspect ?? 1);
+						return (
+							<rect key={`${index}-${spanIndex}`} className="sculpt-scan-span" style={{ animationDelay: `${index * 70}ms` }}
+								x={centre + from * scale} width={Math.max(0.004, (to - from) * scale)} y={box.top + row.y * box.height - 0.006} height="0.012" />
+						);
+					}))}
+				</svg>
+			)}
+		</>
+	);
+}
+
+/**
+ * Which model the run uses, and its effort. The list is the Agent panel's
+ * (/agent/models): grouped by provider, a provider without a credential lists
+ * its models disabled. Locked while a run is out, since every turn of one run
+ * uses the same model.
+ */
+function ModelPicker({ picker, locked }) {
+	if (!picker) return null;
+	const { state, providers = [], models = [], model, effort, onModel, onEffort } = picker;
+	const efforts = effortOptions(models.find((entry) => entry.id === model));
+	const disabled = locked || !models.length;
+	return (
+		<div className="sculpt-model" data-testid="sculpt-model">
+			<div className="sculpt-label"><span>{ko("Model", "모델")}</span>{locked && <small>{ko("locked while running", "실행 중엔 고정")}</small>}</div>
+			<div className="sculpt-model-row">
+				<select className="sculpt-select" data-testid="sculpt-model-select" aria-label={ko("Sculpt model", "조형 모델")} value={model || ""} disabled={disabled}
+					onChange={(event) => onModel?.(event.target.value)}>
+					{providers.length
+						? providers.map((provider) => (
+							<optgroup key={provider.id} label={provider.label ?? provider.id}>
+								{(provider.models ?? []).map((entry) => {
+									const key = entry.key ?? `${provider.id}/${entry.id}`;
+									const label = models.find((row) => row.id === key)?.label ?? entry.label ?? key;
+									return <option key={key} value={key} disabled={!provider.signedIn}>{provider.signedIn ? label : `${label} — ${ko("add key", "키 필요")}`}</option>;
+								})}
+							</optgroup>
+						))
+						: models.length
+							? models.map((entry) => <option key={entry.id} value={entry.id}>{entry.label ?? entry.id}</option>)
+							: <option value="">{state === "failed" ? ko("No model available", "사용할 모델 없음") : ko("Loading models…", "모델 불러오는 중…")}</option>}
+				</select>
+				{efforts.length > 0 && (
+					<select className="sculpt-select sculpt-effort" data-testid="sculpt-effort-select" aria-label={ko("Effort", "추론 강도")} value={effort ?? ""} disabled={locked}
+						onChange={(event) => onEffort?.(event.target.value || null)}>
+						<option value="">{isKo ? `기본 (${efforts[0]})` : `Default (${efforts[0]})`}</option>
+						{efforts.map((value) => <option key={value} value={value}>{value}</option>)}
+					</select>
+				)}
+			</div>
+		</div>
+	);
+}
+
+/**
+ * The blueprint step: one image request turns the reference into a four-view
+ * orthographic model sheet. Pure view: App owns the request and its result.
+ */
+function BlueprintSection({ blueprint, disabled }) {
+	if (!blueprint) return null;
+	const { state = "idle", pose = "keep", notes = "", prompt = "", sheet = null, error = null, startedAt = null, refusal = null, onPose, onNotes, onGenerate, onCancel, layout = [] } = blueprint;
+	const busy = state === "generating";
+	const waited = busy && startedAt ? Math.floor((Date.now() - startedAt) / 1000) : 0;
+	return (
+		<div className="sculpt-blueprint" data-testid="sculpt-blueprint" data-state={state}>
+			<div className="sculpt-label"><span>{ko("Blueprint (model sheet)", "도면 (모델 시트)")}</span><small>{ko("front · side · back · top", "정면 · 측면 · 뒷면 · 윗면")}</small></div>
+			<div className="sculpt-blueprint-row">
+				<select className="sculpt-select" data-testid="sculpt-blueprint-pose" aria-label={ko("Pose on the sheet", "도면 포즈")} value={pose} disabled={busy || disabled} onChange={(event) => onPose?.(event.target.value)}>
+					<option value="keep">{ko("Pose: as in the reference", "포즈: 원본 그대로")}</option>
+					<option value="neutral">{ko("Pose: neutral rest pose", "포즈: 중립 자세")}</option>
+				</select>
+			</div>
+			<textarea className="sculpt-notes" data-testid="sculpt-blueprint-notes" rows={2} maxLength={600} disabled={busy || disabled}
+				placeholder={ko("Notes (optional): what it is, what to keep or fix", "메모 (선택): 무엇인지, 유지하거나 고칠 점")}
+				aria-label={ko("Blueprint notes", "도면 메모")} value={notes} onChange={(event) => onNotes?.(event.target.value)} />
+			{busy ? (
+				<div className="sculpt-now" data-testid="sculpt-blueprint-wait" role="status" aria-live="polite">
+					<span className="sculpt-clay" aria-hidden="true" />
+					<span className="sculpt-now-label">{ko("Drawing the four-view sheet", "4면 도면 그리는 중")}</span>
+					<span className="sculpt-now-time">{waited}s</span>
+					<span className="sculpt-now-expect">{ko("usually ~40–90s", "보통 ~40–90초")}</span>
+					<button type="button" className="btn ghost small" data-testid="sculpt-blueprint-cancel" onClick={() => onCancel?.()}>{ko("Cancel", "취소")}</button>
+				</div>
+			) : (
+				<button type="button" className="btn full" data-testid="sculpt-blueprint-generate" disabled={disabled || Boolean(refusal)} onClick={() => onGenerate?.()}>
+					{sheet ? ko("Generate again", "다시 생성") : ko("Generate blueprint", "도면 생성")}
+				</button>
+			)}
+			{refusal && !busy && <p className="inspector-hint" role="status" data-testid="sculpt-blueprint-refusal">{refusal}</p>}
+			{error && !busy && <p className="inspector-hint sculpt-error" role="alert" data-testid="sculpt-blueprint-error">{error}</p>}
+			{sheet && (
+				<figure className="sculpt-sheet-figure" data-testid="sculpt-blueprint-sheet">
+					<a href={sheet.dataUrl} target="_blank" rel="noreferrer" title={ko("Open full size", "원본 크기로 열기")}>
+						<img src={sheet.dataUrl} alt={ko("Generated four-view model sheet", "생성된 4면 도면")} />
+						{layout.map((panel) => (
+							<span key={panel.view} className="sculpt-sheet-tag" style={{ left: `${panel.x * 100}%`, top: `${panel.y * 100}%` }}>{panel.label}</span>
+						))}
+					</a>
+					<figcaption>
+						<span>{sheet.width}×{sheet.height}{Number.isFinite(sheet.ms) ? ` · ${Math.round(sheet.ms / 1000)}s` : ""}</span>
+						<a href={sheet.dataUrl} download="sculpt-blueprint.png" data-testid="sculpt-blueprint-download">{ko("Download", "내려받기")}</a>
+					</figcaption>
+				</figure>
+			)}
+			{prompt && (
+				<details className="sculpt-prompt" data-testid="sculpt-blueprint-prompt">
+					<summary>{ko("Request sent to the image model", "이미지 모델에 보내는 요청")}</summary>
+					<pre>{prompt}</pre>
+				</details>
+			)}
+		</div>
+	);
+}
+
+export default function SculptPanel({ run, reference, onReference, onStart, onCancel, onPlaceInScene, canStart, startRefusal, sculptName, hidden, modelPicker = null, blueprint = null }) {
+	const fileRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	// The sheet is the clearest picture of what is off, so it starts open.
+	const [showSheet, setShowSheet] = useState(true);
+
+	const stage = run?.stage ?? "idle";
+	const running = RUNNING.has(stage);
+	const stageIndex = STAGES.findIndex(([id]) => id === stage);
+	const iou = Number.isFinite(run?.iou) ? run.iou : null;
+	const target = Number.isFinite(run?.targetIou) ? run.targetIou : null;
+	const showProgress = stage !== "idle";
+	const startDisabled = !canStart || Boolean(startRefusal);
+	const hasLog = Boolean(run?.activity?.length);
+	useTicking((running && Boolean(run?.waiting)) || blueprint?.state === "generating");
+
+	const take = (files) => {
+		const file = pickImage(files);
+		if (file) onReference?.(file);
+	};
+	const openPicker = () => fileRef.current?.click();
+
+	return (
+		<Foldout hidden={hidden} title={ko("Sculpt from image", "이미지로 조형")}>
+			<div className="sculpt-panel" data-testid="sculpt-panel" data-stage={stage}
+				onPaste={(event) => {
+					const file = pickImage(event.clipboardData?.files);
+					if (!file) return;
+					event.preventDefault();
+					onReference?.(file);
+				}}>
+
+				<div className="sculpt-label"><span>{ko("Reference", "참조 이미지")}</span>{reference?.name && <small title={reference.name}>{reference.name}</small>}</div>
+				{reference ? (
+					<div className="sculpt-well sculpt-well-filled" data-testid="sculpt-reference"
+						onDragOver={(event) => { if (event.dataTransfer?.types?.includes("Files")) event.preventDefault(); }}
+						onDrop={(event) => { event.preventDefault(); take(event.dataTransfer?.files); }}>
+						<div className="sculpt-ref-frame">
+							<img src={reference.dataUrl} alt={isKo ? `참조 이미지: ${reference.name}` : `Reference: ${reference.name}`} />
+							<OutlineScan outline={run?.outline} scanning={stage === "measure" && !run?.outline} />
+						</div>
+						<button type="button" className="btn ghost small sculpt-well-replace" data-testid="sculpt-reference-replace"
+							disabled={running} aria-label={ko("Replace reference image", "참조 이미지 바꾸기")} onClick={openPicker}>
+							{ko("Replace", "바꾸기")}
+						</button>
+					</div>
+				) : (
+					<div className="sculpt-well sculpt-well-empty" data-testid="sculpt-dropzone" data-dragging={dragging ? "true" : undefined}
+						role="button" tabIndex={0} aria-label={ko("Drop or paste a reference image, or press Enter to choose a file", "참조 이미지를 끌어놓거나 붙여넣기, 또는 Enter로 파일 선택")}
+						onClick={openPicker}
+						onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); openPicker(); } }}
+						onDragOver={(event) => { if (event.dataTransfer?.types?.includes("Files")) { event.preventDefault(); setDragging(true); } }}
+						onDragLeave={() => setDragging(false)}
+						onDrop={(event) => { event.preventDefault(); setDragging(false); take(event.dataTransfer?.files); }}>
+						<span className="sculpt-well-title">{ko("Drop or paste a reference image", "참조 이미지를 끌어놓거나 붙여넣으세요")}</span>
+						<span className="sculpt-well-sub">PNG · JPEG · WebP</span>
+						<span className="btn ghost small" aria-hidden="true">{ko("Choose file", "파일 선택")}</span>
+					</div>
+				)}
+				<input ref={fileRef} type="file" accept="image/png,image/jpeg,image/webp" className="multimodel-file-input" data-testid="sculpt-reference-input"
+					aria-label={ko("Reference image file", "참조 이미지 파일")}
+					onChange={(event) => { const files = [...(event.target.files ?? [])]; event.target.value = ""; take(files); }} />
+
+				{reference && <BlueprintSection blueprint={blueprint} disabled={running} />}
+
+				<ModelPicker picker={modelPicker} locked={running} />
+
+				{running ? (
+					<button type="button" className="btn full sculpt-cancel" data-testid="sculpt-cancel" onClick={() => onCancel?.()}>
+						{ko("Cancel", "취소")}
+					</button>
+				) : (
+					<button type="button" className="btn primary full" data-testid="sculpt-start" disabled={startDisabled}
+						aria-describedby={startRefusal ? "sculpt-start-refusal" : undefined} onClick={() => onStart?.()}>
+						{ko("Start (fast draft)", "시작 (빠른 초안)")}
+					</button>
+				)}
+				{!running && startRefusal && <p className="inspector-hint sculpt-refusal" id="sculpt-start-refusal" role="status" data-testid="sculpt-start-refusal">{startRefusal}</p>}
+
+				{showProgress && (
+					<div className="sculpt-progress" data-testid="sculpt-progress">
+						<ol className="sculpt-stepper" aria-label={ko("Sculpt stages", "조형 단계")}>
+							{STAGES.map(([id, label], index) => {
+								const state = stage === "done" || (stageIndex >= 0 && index < stageIndex) ? "complete" : index === stageIndex ? "current" : "pending";
+								return (
+									<li key={id} className="sculpt-step" data-state={state} data-stage={id} aria-current={state === "current" ? "step" : undefined}>
+										<span className="sculpt-step-dot" aria-hidden="true" />
+										<span className="sculpt-step-label">{label}</span>
+									</li>
+								);
+							})}
+						</ol>
+
+						{running && <NowLine waiting={run.waiting} />}
+
+						<div className="sculpt-stats">
+							<span data-testid="sculpt-round">{isKo ? `라운드 ${run.round} / ${run.maxRounds}` : `Round ${run.round} / ${run.maxRounds}`}</span>
+							<span data-testid="sculpt-elapsed">{formatElapsed(run.elapsedMs)}</span>
+						</div>
+
+						<div className="sculpt-iou">
+							<div className="sculpt-label">
+								<span>{stage === "done" ? ko("Final IoU", "최종 IoU") : "IoU"}</span>
+								<small data-testid="sculpt-iou">{formatIou(iou)}{target !== null && <span className="sculpt-iou-target"> / {formatIou(target)}</span>}</small>
+							</div>
+							<div className="sculpt-iou-bar" role="meter" aria-label={ko("Silhouette match (IoU)", "실루엣 일치도 (IoU)")}
+								aria-valuemin={0} aria-valuemax={1} aria-valuenow={iou ?? undefined}
+								data-reached={iou !== null && target !== null && iou >= target ? "true" : undefined}
+								style={{ "--sculpt-iou": iou ?? 0, "--sculpt-target": target ?? 0 }}>
+								<span className="sculpt-iou-fill" />
+								{target !== null && <span className="sculpt-iou-marker" data-testid="sculpt-iou-target" title={isKo ? `목표 ${formatIou(target)}` : `Target ${formatIou(target)}`} />}
+							</div>
+							<IouTrail history={run.history} target={target} />
+						</div>
+
+						<CandidateRace candidates={run.candidates} />
+						<ActivityLog activity={run.activity} />
+
+						{run.message && !hasLog && <p className="inspector-hint sculpt-message" role="status">{run.message}</p>}
+						{stage === "done" && <p className="inspector-hint sculpt-done" role="status" data-testid="sculpt-done">{isKo ? `완료 — IoU ${formatIou(iou)}` : `Done — IoU ${formatIou(iou)}`}</p>}
+						{stage === "cancelled" && <p className="inspector-hint" role="status" data-testid="sculpt-cancelled">{ko("Cancelled.", "취소했어요.")}</p>}
+						{stage === "failed" && <p className="inspector-hint sculpt-error" role="alert" data-testid="sculpt-error">{run.error || ko("The sculpt run failed.", "조형에 실패했어요.")}</p>}
+					</div>
+				)}
+
+				{run?.sheetDataUrl && (
+					<div className="sculpt-sheet">
+						<button type="button" className="btn ghost small full" data-testid="sculpt-sheet-toggle" aria-pressed={showSheet}
+							onClick={() => setShowSheet((value) => !value)}>
+							{showSheet ? ko("Hide overlay sheet", "오버레이 시트 숨기기") : ko("Show overlay sheet", "오버레이 시트 보기")}
+						</button>
+						{showSheet && <img className="sculpt-sheet-image" data-testid="sculpt-sheet" src={run.sheetDataUrl} alt={ko("Reference beside the sculpt overlay", "참조 이미지와 조형 오버레이")} />}
+					</div>
+				)}
+
+				<button type="button" className="btn full" data-testid="sculpt-place" disabled={!sculptName || running}
+					aria-label={sculptName ? (isKo ? `${sculptName} 장면에 배치` : `Place ${sculptName} in scene`) : ko("Place in scene", "장면에 배치")}
+					onClick={() => onPlaceInScene?.()}>
+					{ko("Place in scene", "장면에 배치")}
+				</button>
+
+				<p className="inspector-hint sculpt-hint" data-testid="sculpt-hint">
+					{ko("Fix details by chatting with the Agent (⌘B) while the sculpt is selected.", "조형물을 선택한 채 에이전트(⌘B)와 대화해 디테일을 고치세요.")}
+				</p>
+			</div>
+		</Foldout>
+	);
+}

package/src/panels/SubjectBox.jsx

@@ -1,6 +1,6 @@
 import { ko, isKo } from "../locale.js";
 
-export default function SubjectBox({ label, value, onChange, onRemove, onPose, posing, color, onColorChange, onColorEditStart }) {
+export default function SubjectBox({ label, onRemove, onPose, posing, color, onColorChange, onColorEditStart }) {
 	return (
 		<div className="subject-box v2-subject-box">
 			<div className="subject-box-head">

package/src/panels/SubjectsPanel.jsx

@@ -15,8 +15,6 @@ export default function SubjectsPanel({
 								<SubjectBox
 									key={entry.id}
 									label={ko(`Subject ${index + 1}`, `인물 ${index + 1}`)}
-									value={entry}
-									onChange={(patch) => run('character.update', { characterId: entry.id, patch })}
 									onPose={() => openStudio(entry.id)}
 									posing={posing === entry.id}
 									onRemove={index > 0 ? () => run('character.remove', { characterId: entry.id }) : undefined}

package/src/panels/VideoCapturePanel.jsx

@@ -1,6 +1,7 @@
 import Foldout from "./Foldout.jsx";
 import { ko, isKo } from "../locale.js";
 import { footageSummary, trajectoryReceipt, segmentationReceipt } from "../multimodel-ingest.js";
+import { isImeComposing } from "../ime.js";
 
 export default function VideoCapturePanel({
 	isCharacterSelection, multiModelStatus, multiModelStage, multiModelFileRef, chooseMultiModelFile,
@@ -49,7 +50,7 @@ export default function VideoCapturePanel({
 								type="text"
 								value={multiModelUrl}
 								onChange={(event) => setMultiModelUrl(event.target.value)}
-								onKeyDown={(event) => { if (event.key === "Enter") useMultiModelUrl(); }}
+								onKeyDown={(event) => { if (event.key === "Enter" && !isImeComposing(event)) useMultiModelUrl(); }}
 								placeholder={ko("https://…/boxing.mp4", "https://…/boxing.mp4")}
 								aria-label={ko("Multi-Model video URL", "멀티 모델 영상 URL")}
 								spellCheck={false}

package/src/panels/pose-image.css

@@ -0,0 +1,42 @@
+@layer regions {
+.pose-image { display: grid; gap: 8px; padding: 4px 12px 12px; }
+.pose-image-label { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2, #9b9ba1); font-size: 11px; font-weight: 500; }
+.pose-image-label small { font-size: 11px; font-variant-numeric: tabular-nums; }
+.pose-image-frame { display: grid; gap: 6px; }
+.pose-image-source { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; gap: 2px; border-radius: 8px; background: var(--surface-raised, #1e1e21); border: 1px solid var(--row-divider, #2a2a2e); }
+.pose-image-source button { padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--text-2, #9b9ba1); font: inherit; font-size: 12px; cursor: pointer; }
+.pose-image-source button[data-active="true"] { background: var(--surface, #fff); color: var(--text-1, #18181b); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); font-weight: 600; }
+.pose-image-shot { display: block; width: 100%; border-radius: var(--r-1, 4px); border: 1px solid var(--row-divider, #2a2a2e); background: #000; }
+.pose-image-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
+.pose-image-ref { position: relative; aspect-ratio: 1; border-radius: var(--r-1, 4px); overflow: hidden; border: 1px solid var(--row-divider, #2a2a2e); background: var(--surface-raised, #1e1e21); }
+.pose-image-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.pose-image-ref-add { display: grid; place-items: center; padding: 0; color: var(--text-2, #9b9ba1); font-size: 18px; cursor: pointer; border-style: dashed; }
+.pose-image-ref-add:hover { color: var(--text-1, #e4e4e7); border-color: var(--text-2, #9b9ba1); }
+.pose-image-ref-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms; }
+.pose-image-ref:hover .pose-image-ref-remove, .pose-image-ref-remove:focus-visible { opacity: 1; }
+.pose-image-prompt { width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--text-1, #e4e4e7); background: var(--surface-raised, #1e1e21); border: 1px solid var(--row-divider, #2a2a2e); border-radius: var(--r-1, 4px); }
+.pose-image-prompt:focus { outline: none; border-color: var(--select, #e8a33d); }
+.pose-image .pose-image-error { color: var(--danger, #e5484d); margin: 0; }
+.pose-image-result { display: grid; gap: 6px; }
+.pose-image-result-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
+.pose-image-result-open img { display: block; width: 100%; border-radius: var(--r-1, 4px); border: 1px solid var(--row-divider, #2a2a2e); }
+.pose-image-result-open:hover img { border-color: var(--select, #e8a33d); }
+.pose-image-result-actions { display: flex; gap: 4px; }
+.pose-image-result-actions > * { flex: 1; justify-content: center; text-align: center; text-decoration: none; }
+.pose-image-history { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
+.pose-image-history button { padding: 0; aspect-ratio: 16 / 9; border: 1px solid var(--row-divider, #2a2a2e); border-radius: var(--r-1, 4px); overflow: hidden; background: none; cursor: pointer; opacity: 0.6; }
+.pose-image-history button[data-active="true"] { opacity: 1; border-color: var(--select, #e8a33d); }
+.pose-image-history img { width: 100%; height: 100%; object-fit: cover; display: block; }
+}
+
+.pose-image-viewer { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 32px 72px; background: rgba(8, 8, 10, 0.82); backdrop-filter: blur(6px); cursor: zoom-out; }
+.pose-image-viewer-body { margin: 0; display: grid; gap: 10px; max-width: 100%; max-height: 100%; cursor: default; }
+.pose-image-viewer-body img { display: block; max-width: calc(100vw - 144px); max-height: calc(100vh - 120px); object-fit: contain; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); }
+.pose-image-viewer-body figcaption { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.8); font-size: 12px; }
+.pose-image-viewer-prompt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pose-image-viewer-count { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55); }
+.pose-image-viewer-body .btn { flex: none; width: auto; color: #fff; background: rgba(255, 255, 255, 0.12); border-color: transparent; text-decoration: none; }
+.pose-image-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
+.pose-image-viewer-nav:hover { background: rgba(255, 255, 255, 0.22); }
+.pose-image-viewer-nav.prev { left: 16px; }
+.pose-image-viewer-nav.next { right: 16px; }

package/src/panels/pose.css

@@ -21,6 +21,9 @@
 }
 .pose-details .pose-row { min-height: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
 .pose-details .pose-row + .pose-row { border-top: 1px solid var(--row-divider, #2a2a2e); }
+.pose-details .pose-object-opacity { grid-template-columns: auto 1fr 3.5em; }
+.pose-details .pose-object-opacity input { width: 100%; min-width: 0; }
+.pose-details .pose-object-opacity b { text-align: right; }
 .pose-details .pose-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
 .pose-details .pose-preview {
   display: grid;