cozyclay 1.10.0 → 2.0.0

package/src/shell/StatusBar.jsx

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from "react";
+import SourceOffer from "../source-offer.jsx";
+import { useStudioShell } from "./studio-shell-context.js";
+import { ko } from "../locale.js";
+import "./topbar.css";
+
+const BUSY = ["preparing", "encoding", "finalizing"];
+
+// 2a status bar: status text on the left (export progress, retry and cancel
+// take that slot while an export runs, G7); fps and the source offer on the
+// right. #570: the save state sits under the project name (ProjectHead).
+// In the studio shell there is no standing row: a fixed "Ready", the fps the
+// Sequencer already shows and a source link Help › About already carries were
+// a band of noise under the dock. Only a live status (an export, or a status
+// message) shows, as a capsule floating in the viewport's bottom-left corner.
+// Embeds have no menu bar, so they keep the full row and its source offer.
+export default function StatusBar({ embedded = false }) {
+	const { statusText, exportStatus, exportPhaseLabel, resultOpen, recState, tlFps } = useStudioShell();
+	// A frame export's status is already shown inside its result dialog.
+	const exportShown = exportStatus && !(resultOpen && exportStatus.kind === "frame");
+	if (!embedded) {
+		if (!exportShown && !statusText) return null;
+		return (
+			<footer className="brandbar v2-statusbar statusbar-float">
+				{exportShown
+					? <ExportStatus status={exportStatus} label={exportPhaseLabel} recording={recState === "recording"} />
+					: <span className="statusbar-text">{statusText}</span>}
+			</footer>
+		);
+	}
+	return (
+		<footer className="brandbar v2-statusbar">
+			<div className="statusbar-left">
+				{exportShown
+					? <ExportStatus status={exportStatus} label={exportPhaseLabel} recording={recState === "recording"} />
+					: <span className="statusbar-text">{statusText || ko("Ready", "준비")}</span>}
+			</div>
+			<span className="statusbar-fps" title={ko("Timeline frame rate", "타임라인 프레임 레이트")}>{tlFps} fps</span>
+			<SourceOffer />
+		</footer>
+	);
+}
+
+function ExportStatus({ status, label, recording }) {
+	const { phase, kind, message, completedFrames, frameCount, stage, cancellable, retryable, handedOff, cancel, retry } = status;
+	const busy = BUSY.includes(phase);
+	const detail = [
+		message,
+		retryable && ko("Retry keeps the original shot, camera, range and settings; it does not change your edits.", "다시 시도하면 원래 샷·카메라·범위·설정을 사용하며 편집 내용은 바꾸지 않아요."),
+		handedOff > 0 && ko(`${handedOff} file(s) already handed off. Retry skips those downloads.`, `파일 ${handedOff}개는 이미 전달했어요. 다시 시도할 때 해당 다운로드는 건너뛰어요.`),
+		busy && stage === "mux" && ko("Finalizing MP4; this stage cannot be interrupted.", "MP4 마무리 중이에요. 이 단계는 중단할 수 없어요."),
+	].filter(Boolean).join(" ");
+	return (
+		<section
+			className="export-status statusbar-export"
+			data-testid="export-status"
+			data-phase={phase}
+			data-kind={kind}
+			role="status"
+			aria-live="polite"
+			aria-atomic="true"
+			title={detail || undefined}
+		>
+			<strong className="statusbar-export-phase">{label(phase)}{status.label ? ` · ${status.label}` : ""}</strong>
+			{busy && frameCount > 0 && (
+				<>
+					<progress aria-label={label(phase)} max={frameCount} value={completedFrames} />
+					<span className="statusbar-export-count">{completedFrames}/{frameCount}</span>
+				</>
+			)}
+			{!busy && message && <span className="statusbar-export-message">{message}</span>}
+			{busy && cancellable && (
+				<button type="button" className="statusbar-action" data-testid="export-cancel" onClick={cancel}>
+					{ko("Cancel", "취소")}
+				</button>
+			)}
+			{retryable && (
+				<button type="button" className="statusbar-action" data-testid="export-retry" disabled={recording} onClick={() => void retry()}>
+					{ko("Retry", "재시도")}
+				</button>
+			)}
+		</section>
+	);
+}
+
+function relativeTime(ms) {
+	const minutes = Math.floor(ms / 60000);
+	if (minutes < 1) return ko("just now", "방금");
+	if (minutes < 60) return ko(`${minutes} min ago`, `${minutes}분 전`);
+	const hours = Math.floor(minutes / 60);
+	return ko(`${hours} h ago`, `${hours}시간 전`);
+}
+
+// "Saved 2 min ago" once a save completes in this session; otherwise the
+// project's own save state (Unsaved changes, Saving…, Save failed, Not saved).
+export function SaveState({ status }) {
+	const [savedAt, setSavedAt] = useState(null);
+	const [now, setNow] = useState(() => Date.now());
+	const previous = useRef(status.state);
+	useEffect(() => {
+		if (previous.current === "saving" && status.state === "saved") setSavedAt(Date.now());
+		if (status.dirty) setSavedAt(null);
+		previous.current = status.state;
+	}, [status.state, status.dirty]);
+	useEffect(() => {
+		if (savedAt === null) return undefined;
+		setNow(Date.now());
+		const timer = setInterval(() => setNow(Date.now()), 30000);
+		return () => clearInterval(timer);
+	}, [savedAt]);
+	const text = savedAt !== null && status.state === "saved" && !status.dirty
+		? ko(`Saved ${relativeTime(now - savedAt)}`, `저장됨 · ${relativeTime(now - savedAt)}`)
+		: status.text;
+	return (
+		<span
+			className={"project-save-status status-" + status.state}
+			data-testid="project-save-status"
+			data-dirty={status.dirty ? "true" : undefined}
+			role="status"
+			aria-live="polite"
+		>
+			{text}
+		</span>
+	);
+}

package/src/shell/StudioShell.jsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { ko } from "../locale.js";
+import { useStudioShell } from "./studio-shell-context.js";
+import TopBar, { ProjectHead } from "./TopBar.jsx";
+import OutlinerSlot from "./OutlinerSlot.jsx";
+import DetailsSlot from "./DetailsSlot.jsx";
+import BottomDock from "./BottomDock.jsx";
+import StatusBar from "./StatusBar.jsx";
+import PreferencesSlot from "./PreferencesSlot.jsx";
+import "./shell.css";
+import "./glass.css";
+import "./glass-regions.css";
+import "./agent-glass.css";
+
+const DOCK_TAB_KEY = "cozyclay.dock.tab.v1";
+
+function readDockTab() {
+	try {
+		return globalThis.localStorage?.getItem(DOCK_TAB_KEY) === "assets" ? "assets" : "animation";
+	} catch {
+		return "animation";
+	}
+}
+
+// #570 floating-glass shell: the viewport fills the window and every region
+// floats over it. Left: the Outliner. Right: Details over Agent. Bottom, from
+// the left edge to the right column: the dock, switching between Animation
+// (the Sequencer with the shot preview at its right end) and Assets.
+export default function StudioShell({ viewport, children, ...props }) {
+	const { beginWorkspaceResize } = useStudioShell();
+	const [dockTab, setDockTab] = useState(readDockTab);
+	// Embeds (playview, playground) keep the Sequencer-only dock.
+	const embedded = Boolean(props["data-embed-mode"]);
+	const shownTab = embedded ? "animation" : dockTab;
+	function changeDockTab(next) {
+		setDockTab(next);
+		try {
+			globalThis.localStorage?.setItem(DOCK_TAB_KEY, next);
+		} catch (error) {
+			console.warn(`[cozyclay] could not store ${DOCK_TAB_KEY}`, error);
+		}
+	}
+	return (
+		<div {...props} data-shell="glass" data-dock-tab={shownTab}>
+			<TopBar preferences={<PreferencesSlot />} />
+			<div className="main">
+				<div className="workspace">
+					{viewport}
+					<div className="studio-left-column">
+						<ProjectHead />
+						<OutlinerSlot />
+					</div>
+					<div
+						className="workspace-splitter shell-splitter shell-left-splitter"
+						role="separator"
+						aria-orientation="vertical"
+						aria-label={ko("Resize hierarchy panel", "계층 패널 크기 조절")}
+						onPointerDown={(event) => beginWorkspaceResize("left", event)}
+					/>
+					<div className="studio-right-column">
+						<DetailsSlot />
+					</div>
+					<div
+						className="workspace-splitter workspace-splitter-vertical shell-splitter shell-sidebar-splitter"
+						role="separator"
+						aria-orientation="vertical"
+						aria-label={ko("Resize hierarchy and inspector panel", "계층 및 속성 패널 크기 조절")}
+						onPointerDown={(event) => beginWorkspaceResize("sidebar", event)}
+					/>
+				</div>
+				<div className="studio-dock-slot">
+					<div
+						className="workspace-splitter timeline-splitter"
+						role="separator"
+						aria-label={ko("Resize frame monitor", "프레임 모니터 크기 조절")}
+						onPointerDown={(event) => beginWorkspaceResize("timeline", event)}
+					/>
+					<BottomDock tab={shownTab} onTabChange={changeDockTab} embedded={embedded} />
+					<div
+						className="workspace-splitter shell-splitter shell-camera-splitter"
+						role="separator"
+						aria-orientation="vertical"
+						aria-label={ko("Resize shot preview", "샷 미리보기 크기 조절")}
+						onPointerDown={(event) => beginWorkspaceResize("camera", event)}
+					/>
+				</div>
+			</div>
+			<StatusBar embedded={embedded} />
+			{children}
+		</div>
+	);
+}

package/src/shell/TopBar.jsx

@@ -0,0 +1,129 @@
+import { useRef, useState } from "react";
+import { useStudioShell } from "./studio-shell-context.js";
+import ProjectPanel from "../panels/ProjectPanel.jsx";
+import MenuBar, { MenuPopover } from "./MenuBar.jsx";
+import { SaveState } from "./StatusBar.jsx";
+import { ko, isKo } from "../locale.js";
+import "./topbar.css";
+
+// 2a top bar: File/Edit/Window/Help, then only the MCP state and the one
+// primary action. Save and Export live in File (G7). #570: the project name
+// and its save state head the left column (ProjectHead below).
+export default function TopBar({ preferences }) {
+	const { recState, liveHubStatus, liveWorkspaceHandle } = useStudioShell();
+	const connected = liveHubStatus === "connected";
+	return (
+		<header className="topbar v2-topbar" data-rec-state={recState}>
+			<MenuBar preferences={preferences} />
+			<div className="topbar-spacer" />
+			<span
+				className={"topbar-mcp" + (liveWorkspaceHandle ? " live-workspace-handle" : "")}
+				data-state={connected ? "connected" : "disconnected"}
+				data-live-workspace={liveWorkspaceHandle || undefined}
+				title={liveWorkspaceHandle || ko("No MCP client is attached to this studio", "이 스튜디오에 연결된 MCP 클라이언트가 없어요")}
+			>
+				<i className="topbar-mcp-dot" aria-hidden="true" />
+				<span className="topbar-mcp-text">{connected ? ko("MCP connected", "MCP 연결됨") : ko("MCP offline", "MCP 꺼짐")}</span>
+			</span>
+			<GenerateMotion />
+		</header>
+	);
+}
+
+// #570: the project heads the left column — its name opens the project menu,
+// the line under it is the save state.
+export function ProjectHead() {
+	const {
+		projectMenuOpen, setProjectMenuOpen, projectDirty, projectName, projectStartupOpen,
+		projectManifest, saveStatus,
+	} = useStudioShell();
+	return (
+		<div className="topbar-project studio-project-head">
+			<ProjectPanel
+				projectMenuOpen={projectMenuOpen}
+				setProjectMenuOpen={setProjectMenuOpen}
+				projectDirty={projectDirty}
+				projectName={projectName}
+				projectStartupOpen={projectStartupOpen}
+				projectManifest={projectManifest}
+			/>
+			<SaveState status={saveStatus} />
+		</div>
+	);
+}
+
+// "Generate Motion" is today's Scene generate (G6) and the one home for
+// generation (IS-2): with authored prompt blocks it runs them all, as the
+// removed Details "Generate all blocks" did; otherwise it runs the prompt.
+// The caret holds the take bar's Scene actions; a refused action says why in
+// place and in a toast (R3).
+function GenerateMotion() {
+	const {
+		runArdy, sceneGenerateDisabledReason, sceneAgainDisabledReason, runSceneAgain,
+		addSceneBlock, tlFrame, setToast, ardyRunning, promptClips, runStudioAction,
+	} = useStudioShell();
+	const hasBlocks = promptClips.some((clip) => clip.text.trim());
+	const [open, setOpen] = useState(false);
+	const caretRef = useRef(null);
+	const reason = sceneGenerateDisabledReason();
+	const actions = [
+		{ id: "new", label: ko("Start over", "새로 만들기"), reason, run: () => runArdy({ fresh: true }) },
+		{ id: "again", label: ko("Take it again", "다시 뽑기"), reason: sceneAgainDisabledReason(), run: runSceneAgain },
+		{ id: "block", label: isKo ? `프레임 ${tlFrame}에 블록 추가` : `Add block at frame ${tlFrame}`, reason: "", run: addSceneBlock },
+	];
+	return (
+		<div className="topbar-generate" role="group" aria-label={ko("Generate Motion", "모션 생성")}>
+			<button
+				type="button"
+				className="topbar-generate-main"
+				data-testid="topbar-generate"
+				aria-disabled={reason ? "true" : undefined}
+				data-disabled-reason={reason || undefined}
+				title={reason || ko("Generate motion from the prompt and blocks", "프롬프트와 블록으로 모션을 생성합니다")}
+				onClick={() => (reason ? setToast(reason) : hasBlocks ? runStudioAction("motion.generateAllBlocks") : runArdy())}
+			>
+				{ardyRunning ? ko("Generating…", "생성 중…") : (
+					<>
+						<span className="topbar-generate-full">{ko("Generate Motion", "모션 생성")}</span>
+						<span className="topbar-generate-short">{ko("Generate", "생성")}</span>
+					</>
+				)}
+			</button>
+			<button
+				type="button"
+				className="topbar-generate-caret"
+				data-testid="topbar-generate-menu"
+				ref={caretRef}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				aria-label={ko("More generate actions", "생성 작업 더 보기")}
+				onClick={() => setOpen((value) => !value)}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>
+			</button>
+			{open && (
+				<MenuPopover anchorRef={caretRef} align="end" onClose={() => setOpen(false)} label={ko("Generate actions", "생성 작업")}>
+					{actions.map((action) => (
+						<button
+							type="button"
+							role="menuitem"
+							key={action.id}
+							className="menubar-item"
+							data-generate-action={action.id}
+							aria-disabled={action.reason ? "true" : undefined}
+							data-disabled-reason={action.reason || undefined}
+							onClick={() => {
+								setOpen(false);
+								if (action.reason) setToast(action.reason);
+								else action.run();
+							}}
+						>
+							<span className="menubar-item-label">{action.label}</span>
+							{action.reason && <small className="menubar-item-reason">{action.reason}</small>}
+						</button>
+					))}
+				</MenuPopover>
+			)}
+		</div>
+	);
+}