cozyclay 1.9.0 → 2.0.0

package/src/workflow/agent-panel.css

@@ -1,3 +1,4 @@
+@layer legacy {
 /* Agent panel (#126).
  *
  * workflow.css is shipped minified on one line, so the panel keeps its own
@@ -215,14 +216,14 @@
 	height: 58px;
 	padding: 0 var(--agent-space-4);
 	border-bottom: 1px solid var(--agent-border);
-	background: #171921;
+	background: var(--agent-chrome, #171921);
 }
 
 .agent-title {
 	margin: 0;
 	font-size: var(--agent-font-xl);
 	font-weight: 700;
-	color: #f5f7ff;
+	color: var(--agent-text-strong, #f5f7ff);
 }
 
 .agent-header-spacer { flex: 1; }
@@ -234,8 +235,8 @@
 	gap: var(--agent-space-1);
 	border: 1px solid var(--agent-border-strong);
 	border-radius: var(--agent-radius-md);
-	background: #20232d;
-	color: #c8ccdb;
+	background: var(--agent-panel, #20232d);
+	color: var(--agent-text-soft, #c8ccdb);
 	padding: var(--agent-space-2) var(--agent-space-3);
 	font: inherit;
 	font-size: var(--agent-font-md);
@@ -246,9 +247,9 @@
 
 .agent-icon-button:hover,
 .agent-ghost-button:hover {
-	border-color: #606b9a;
-	background: #2b3040;
-	color: #f5f7ff;
+	border-color: var(--agent-border-strong, #606b9a);
+	background: var(--agent-hover, #2b3040);
+	color: var(--agent-text-strong, #f5f7ff);
 }
 
 .agent-ghost-button[disabled],
@@ -278,7 +279,7 @@
 	border: 0;
 	border-radius: var(--agent-radius-sm);
 	background: transparent;
-	color: #c8ccdb;
+	color: var(--agent-text-soft, #c8ccdb);
 	padding: var(--agent-space-2) var(--agent-space-3);
 	font: inherit;
 	font-size: var(--agent-font-md);
@@ -286,7 +287,7 @@
 	cursor: pointer;
 }
 
-.agent-menu button:hover { background: #2b3040; color: #f5f7ff; }
+.agent-menu button:hover { background: var(--agent-hover, #2b3040); color: var(--agent-text-strong, #f5f7ff); }
 
 /* --- account strip ----------------------------------------------------- */
 
@@ -313,7 +314,7 @@
 	padding: 2px var(--agent-space-2);
 	border: 1px solid var(--agent-accent-edge);
 	border-radius: var(--agent-radius-pill);
-	color: #cfd5ff;
+	color: var(--agent-text-strong, #cfd5ff);
 	font-size: var(--agent-font-xs);
 	letter-spacing: 0.06em;
 	text-transform: uppercase;
@@ -462,7 +463,7 @@
 .agent-bubble {
 	max-width: 86%;
 	padding: var(--agent-space-3) var(--agent-space-4);
-	border: 1px solid #343b58;
+	border: 1px solid var(--agent-border-strong, #343b58);
 	border-radius: var(--agent-radius-lg);
 	background: var(--agent-bubble);
 	color: var(--agent-text);
@@ -473,7 +474,7 @@
 }
 
 .agent-assistant-text {
-	color: #dfe3f2;
+	color: var(--agent-text-soft, #dfe3f2);
 	font-size: var(--agent-font-lg);
 	line-height: 1.6;
 	white-space: pre-wrap;
@@ -495,7 +496,7 @@
 .agent-card {
 	border: 1px solid var(--agent-border-strong);
 	border-radius: var(--agent-radius-lg);
-	background: #20232d;
+	background: var(--agent-panel, #20232d);
 	overflow: hidden;
 }
 
@@ -504,7 +505,7 @@
 	align-items: center;
 	gap: var(--agent-space-3);
 	padding: var(--agent-space-3) var(--agent-space-4);
-	color: #ccd1e2;
+	color: var(--agent-text-soft, #ccd1e2);
 	font-size: var(--agent-font-md);
 	cursor: pointer;
 	list-style: none;
@@ -518,9 +519,9 @@
 .agent-tool-detail {
 	margin: 0;
 	padding: var(--agent-space-3) var(--agent-space-4);
-	border-top: 1px solid #2c3140;
+	border-top: 1px solid var(--agent-border, #2c3140);
 	background: var(--agent-bg-sunken);
-	color: #98a0b8;
+	color: var(--agent-text-muted, #98a0b8);
 	font: var(--agent-font-sm) ui-monospace, monospace;
 	white-space: pre-wrap;
 	word-break: break-all;
@@ -556,7 +557,7 @@
 	flex-wrap: wrap;
 	gap: var(--agent-space-2);
 	padding: var(--agent-space-3);
-	border-top: 1px solid #2c3140;
+	border-top: 1px solid var(--agent-border, #2c3140);
 }
 
 .agent-image-actions button,
@@ -566,8 +567,8 @@
 	gap: var(--agent-space-1);
 	border: 1px solid var(--agent-border-strong);
 	border-radius: var(--agent-radius-sm);
-	background: #292d39;
-	color: #ccd1e2;
+	background: var(--agent-hover, #292d39);
+	color: var(--agent-text-soft, #ccd1e2);
 	padding: var(--agent-space-2) var(--agent-space-3);
 	font: inherit;
 	font-size: var(--agent-font-sm);
@@ -578,18 +579,18 @@
 .agent-image-actions button.primary {
 	border-color: var(--agent-accent-edge);
 	background: var(--agent-accent-deep);
-	color: #e6e9ff;
+	color: var(--agent-text-strong, #e6e9ff);
 }
 
 .agent-image-actions button:hover,
-.agent-image-actions a:hover { border-color: #606b9a; }
+.agent-image-actions a:hover { border-color: var(--agent-border-strong, #606b9a); }
 
 .agent-placed {
 	display: flex;
 	align-items: center;
 	gap: var(--agent-space-2);
 	padding: var(--agent-space-3);
-	border-top: 1px solid #2c3140;
+	border-top: 1px solid var(--agent-border, #2c3140);
 	color: var(--agent-ok);
 	font-size: var(--agent-font-md);
 }
@@ -598,8 +599,8 @@
 	margin-left: auto;
 	border: 1px solid var(--agent-border-strong);
 	border-radius: var(--agent-radius-sm);
-	background: #292d39;
-	color: #ccd1e2;
+	background: var(--agent-hover, #292d39);
+	color: var(--agent-text-soft, #ccd1e2);
 	padding: var(--agent-space-1) var(--agent-space-3);
 	font: inherit;
 	font-size: var(--agent-font-sm);
@@ -644,7 +645,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--agent-space-2);
-	color: #ccd1e2;
+	color: var(--agent-text-soft, #ccd1e2);
 }
 
 .agent-job-label { font-weight: 600; }
@@ -778,7 +779,7 @@
 	margin: 0;
 	font-size: var(--agent-font-xl);
 	font-weight: 700;
-	color: #f5f7ff;
+	color: var(--agent-text-strong, #f5f7ff);
 }
 
 .agent-state-card p {
@@ -793,7 +794,7 @@
 	border: 1px solid var(--agent-accent-edge);
 	border-radius: var(--agent-radius-md);
 	background: var(--agent-accent-deep);
-	color: #e6e9ff;
+	color: var(--agent-text-strong, #e6e9ff);
 	padding: var(--agent-space-3) var(--agent-space-5);
 	font: inherit;
 	font-size: var(--agent-font-lg);
@@ -856,7 +857,7 @@
 .agent-chip {
 	border: 1px solid var(--agent-border-strong);
 	border-radius: var(--agent-radius-pill);
-	background: #20232d;
+	background: var(--agent-panel, #20232d);
 	color: #bcc2d4;
 	padding: var(--agent-space-2) var(--agent-space-4);
 	font: inherit;
@@ -865,7 +866,7 @@
 	cursor: pointer;
 }
 
-.agent-chip:hover { border-color: #606b9a; background: #2b3040; color: #f5f7ff; }
+.agent-chip:hover { border-color: var(--agent-border-strong, #606b9a); background: var(--agent-hover, #2b3040); color: var(--agent-text-strong, #f5f7ff); }
 
 /* --- activity line ------------------------------------------------------ */
 
@@ -1048,7 +1049,7 @@
 	gap: var(--agent-space-2);
 	border: 1px solid var(--agent-border-strong);
 	border-radius: var(--agent-radius-pill);
-	background: #20232d;
+	background: var(--agent-panel, #20232d);
 	color: #b6bcd0;
 	padding: var(--agent-space-1) var(--agent-space-3);
 	font: inherit;
@@ -1059,7 +1060,7 @@
 .agent-attach-chip[aria-pressed="true"] {
 	border-color: var(--agent-accent-edge);
 	background: var(--agent-accent-deep);
-	color: #e6e9ff;
+	color: var(--agent-text-strong, #e6e9ff);
 }
 
 .agent-attach-thumb {
@@ -1105,7 +1106,7 @@
 	border: 1px solid var(--agent-accent-edge);
 	border-radius: var(--agent-radius-md);
 	background: var(--agent-accent-deep);
-	color: #e6e9ff;
+	color: var(--agent-text-strong, #e6e9ff);
 	padding: var(--agent-space-2) var(--agent-space-5);
 	font: inherit;
 	font-size: var(--agent-font-md);
@@ -1169,3 +1170,4 @@
 
 	.agent-resize { display: none; }
 }
+}

package/src/workflow/cozy-scene-node.css

@@ -1,3 +1,4 @@
+@layer legacy {
 .cozy-scene-node {
 	position: relative;
 	width: 318px;
@@ -61,3 +62,4 @@
 .cozy-scene-reactflow-handle-motion { top: 115px !important; }
 .cozy-scene-reactflow-handle-render { top: 108px !important; }
 .cozy-scene-reactflow-handle-scene { top: 140px !important; }
+}

package/src/workflow/workflow.css

@@ -1,3 +1,4 @@
+@layer legacy {
 :root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#edf0fb;background:#101116;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:900px;background:#101116}#workflow-root{height:100vh}.workflow-app{height:100vh;display:flex;flex-direction:column;background:#101116;color:#edf0fb}.workflow-topbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #292d38;background:#171921}.workflow-brand{display:flex;align-items:center;gap:9px;font-size:14px;color:#afb4c6}.workflow-brand strong{font-size:14px;color:#f5f7ff}.workflow-brand-mark{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:linear-gradient(135deg,#ef759d,#6c7cff);font-size:12px;font-weight:800;color:white}.workflow-divider{color:#555b70;margin-left:3px}.workflow-top-actions{display:flex;align-items:center;gap:9px}.workflow-top-actions button,.workflow-sidebar-bottom button,.workflow-sidebar-bottom a{border:1px solid #353a4a;border-radius:6px;background:#20232d;color:#c8ccdb;padding:7px 12px;font:inherit;font-size:12px;cursor:pointer;text-decoration:none}.workflow-top-actions button:hover,.workflow-sidebar-bottom button:hover,.workflow-sidebar-bottom a:hover{border-color:#606b9a;background:#2b3040}.workflow-status{display:flex;align-items:center;gap:7px;margin-right:8px;color:#7f879e;font-size:11px}.workflow-status i{width:6px;height:6px;border-radius:50%;background:#4dcda4;box-shadow:0 0 8px #4dcda4}.workflow-main{display:flex;flex:1;min-height:0}.workflow-sidebar{width:232px;display:flex;flex-direction:column;flex:none;padding:22px 14px;border-right:1px solid #292d38;background:#171921}.workflow-sidebar-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f3f5fd}.workflow-sidebar-copy{margin:8px 6px 18px 0;color:#737b92;line-height:1.5;font-size:11px}.workflow-node-menu{display:flex;flex-direction:column;gap:5px}.workflow-add-node{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#bcc2d4;font:inherit;font-size:12px;text-align:left;cursor:pointer}.workflow-add-node:hover{border-color:#373d50;background:#222631;color:#f5f7ff}.workflow-add-node span:nth-child(2){flex:1}.workflow-sidebar-bottom{display:flex;flex-direction:column;gap:8px;margin-top:auto}.workflow-sidebar-bottom button,.workflow-sidebar-bottom a{text-align:center;font-size:11px}.workflow-canvas{position:relative;flex:1;min-width:0}.workflow-canvas .react-flow{background:#11141c}.workflow-canvas .react-flow__controls{bottom:22px;left:20px;box-shadow:0 5px 18px #0005}.workflow-canvas .react-flow__controls-button{width:28px;height:28px;border-bottom:1px solid #323744;background:#20242e;fill:#aeb5c9;color:#aeb5c9}.workflow-canvas .react-flow__minimap{right:20px;bottom:20px;border:1px solid #353a49;border-radius:7px;overflow:hidden}.workflow-canvas-panel{margin:14px}.workflow-canvas-panel button{display:flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #454d70;border-radius:6px;background:#27304a;color:#e7eaff;font:inherit;font-size:11px;cursor:pointer}.workflow-node{position:relative;width:230px;overflow:visible;border:1px solid #3c4152;border-radius:9px;background:#20232d;box-shadow:0 10px 30px #0004;color:#e5e8f5}.workflow-node:hover{border-color:#6877bd}.workflow-node-header{display:flex;align-items:center;gap:8px;padding:10px 11px;border-bottom:1px solid #343946;background:#252935;border-radius:9px 9px 0 0;font-size:12px}.workflow-node-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:#303648;color:#aeb8ff}.workflow-node-image .workflow-node-icon{color:#67d8b6}.workflow-node-video .workflow-node-icon{color:#eca56e}.workflow-node-upload .workflow-node-icon{color:#c4a8ef}.workflow-node-concat .workflow-node-icon{color:#e3c969}.workflow-node-scene .workflow-node-icon{color:#ef82a7}.workflow-node-id{margin-left:auto;color:#6c7389;font:10px ui-monospace,monospace}.workflow-node-body{display:flex;flex-direction:column;gap:7px;padding:11px}.workflow-node label{color:#8d95ab;font-size:10px}.workflow-node input,.workflow-node textarea,.workflow-node select{width:100%;border:1px solid #3a3f4e;border-radius:5px;background:#171a21;color:#e5e8f5;padding:7px 8px;outline:0;font:inherit;font-size:11px;resize:vertical}.workflow-node input:focus,.workflow-node textarea:focus,.workflow-node select:focus{border-color:#707dce}.workflow-textarea{height:65px}.workflow-node-foot{display:flex;align-items:center;justify-content:space-between;margin-top:3px;color:#737b92;font-size:10px}.workflow-mini-button,.workflow-run-button{display:flex;align-items:center;gap:4px;border:1px solid #4c5aab;border-radius:5px;background:#303b71;color:#e6e9ff;padding:5px 8px;font:inherit;font-size:10px;cursor:pointer}.workflow-dropzone{display:flex;align-items:center;justify-content:center;gap:7px;height:74px;border:1px dashed #49516a;border-radius:6px;color:#78819c;font-size:10px;text-align:center}.workflow-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:90px;border:1px dashed #525b79;border-radius:6px;color:#a89ce4;cursor:pointer}.workflow-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.workflow-schema-fields{display:flex;flex-direction:column;gap:6px;padding-top:4px;border-top:1px solid #323746}.workflow-schema-title{color:#8d95ab;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.workflow-schema-fields label{display:flex;flex-direction:column;gap:4px}.workflow-schema-check{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important}.workflow-schema-check input{width:auto}.workflow-node-cost{margin-left:4px;color:#78d9b0}.workflow-hint{margin:0;color:#666e83;font-size:9px;line-height:1.35}.workflow-scene-preview{position:relative;display:flex;align-items:center;justify-content:center;height:80px;overflow:hidden;border:1px solid #3d4357;border-radius:6px;background:#171a23;color:#7b849e;font-size:10px}.workflow-scene-grid{position:absolute;inset:0;opacity:.32;background:linear-gradient(135deg,transparent 46%,#687090 47%,transparent 49%),linear-gradient(45deg,transparent 46%,#687090 47%,transparent 49%);background-size:22px 22px}.workflow-scene-preview span{position:relative}.workflow-scene-controls{display:flex;gap:4px}.workflow-scene-controls button{flex:1;border:1px solid #3b4050;border-radius:4px;background:#292d39;color:#9da5ba;padding:5px 2px;font:inherit;font-size:9px;cursor:pointer}.workflow-handle{width:9px;height:9px;border:2px solid #20232d;background:#8994ff}.workflow-handle.target{background:#4c566f}.workflow-node-image .workflow-handle{background:#44c2a4}.workflow-node-video .workflow-handle{background:#d9955b}.workflow-node-scene .workflow-handle{background:#ef759d}.workflow-node-upload .workflow-handle{background:#a88cdb}.workflow-video-preview{display:block;width:100%;max-height:150px;border:1px solid #3d4357;border-radius:6px;background:#11141c}.workflow-provider-hint{margin-top:-3px;color:#737b92;font-size:9px}
 .workflow-node-search{width:100%;margin:0 0 8px;padding:8px 9px;border:1px solid #353a4a;border-radius:6px;background:#11141b;color:#e5e8f5;font:inherit;font-size:11px;outline:0}.workflow-node-search:focus{border-color:#707dce}.workflow-model-results{display:flex;flex-direction:column;gap:2px;margin:0 0 7px;padding:4px;border:1px solid #303545;border-radius:6px;background:#12151d}.workflow-model-results .workflow-hint{padding:6px}
 .workflow-node-motion-input .workflow-node-icon{color:#79b5ed}.workflow-motion-upload{height:70px}.workflow-node-motion-input .workflow-handle{background:#79b5ed}
@@ -9,3 +10,4 @@
 .workflow-node-shot-prompt .workflow-node-icon{color:#8fd4b0}.workflow-node-shot-prompt .workflow-handle{background:#8fd4b0}.workflow-shot-prompt-text{height:92px;font:11px ui-monospace,monospace;color:#cfe6da}.workflow-shot-prompt-copy{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #4c8f7c;border-radius:5px;background:#25443c;color:#a9e6c8;padding:5px 8px;font:inherit;font-size:10px;cursor:pointer}.workflow-shot-prompt-copy:hover{border-color:#6fc0a2;background:#2e564b}
 
 .workflow-warning{margin:0;padding:6px 7px;border:1px solid #8d6b3d;border-radius:5px;background:#2b2419;color:#e8c78c;font-size:9px;line-height:1.35}
+}

package/tools/ardy/bridge.mjs

@@ -37,9 +37,9 @@
 import { createServer } from "node:http";
 import { spawn } from "node:child_process";
 import { randomBytes } from "node:crypto";
-import { createReadStream, existsSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { createReadStream, existsSync, readFileSync, realpathSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, resolve, sep } from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { decodeMotionNpz } from "../../src/ardy/npz.js";
 import { motionArraysToNpzMembers, replaceMotionSegment, writeNpz } from "./npz.mjs";
 import { globalChildren, killGroup, runStreaming, track } from "./runners/proc.mjs";
@@ -781,6 +781,16 @@ function registerMotion(runId, absPath) {
 	}
 }
 
+// The Studio agent runtime pins the artifact URL to this bridge's own origin
+// (bin/agent/motion-runtime.mjs), so the editor page on the dev/launcher port
+// fetches it cross-origin. Only loopback pages are granted read access.
+const LOOPBACK_ORIGIN = /^http:\/\/(127\.0\.0\.1|localhost|\[::1\]):\d{1,5}$/;
+
+/** CORS headers for a generated-motion download requested from `origin`. */
+export function motionCorsHeaders(origin) {
+	return LOOPBACK_ORIGIN.test(origin ?? "") ? { "Access-Control-Allow-Origin": origin } : {};
+}
+
 // Serves /ardy/motions/<run-id>; returns the HTTP status to log.
 function serveMotion(req, res, pathname) {
 	const match = /^\/ardy\/motions\/([^/]+)$/.exec(pathname);
@@ -813,6 +823,8 @@ function serveMotion(req, res, pathname) {
 		"Content-Length": size,
 		"Content-Disposition": `attachment; filename="${basename(absPath)}"`,
 		"Cache-Control": "no-store",
+		Vary: "Origin",
+		...motionCorsHeaders(req.headers.origin),
 	});
 	createReadStream(absPath)
 		.on("error", (err) => {
@@ -1559,156 +1571,162 @@ if (process.env.COZYCLAY_BRIDGE_PORT !== undefined) {
 	return DEFAULT_PORT;
 }
 
-const port = resolvePort(process.argv.slice(2));
-try {
-	runner = createRunner();
-} catch (err) {
-	die(err.message);
-}
-// Beside the selected backend, never instead of it. A missing ProjFlow
-// configuration is NOT fatal — the bridge's other run modes do not need it —
-// so the failure is reported once at startup and the capability stays off.
-try {
-	projflowRunner = createProjflowRunner();
-} catch (err) {
-	console.error(`[bridge] line editing is unavailable: ${err.message}`);
-}
+// Importing the module (tests) must not bind a port or pick a runner.
+function startBridge() {
+	const port = resolvePort(process.argv.slice(2));
+	try {
+		runner = createRunner();
+	} catch (err) {
+		die(err.message);
+	}
+	// Beside the selected backend, never instead of it. A missing ProjFlow
+	// configuration is NOT fatal — the bridge's other run modes do not need it —
+	// so the failure is reported once at startup and the capability stays off.
+	try {
+		projflowRunner = createProjflowRunner();
+	} catch (err) {
+		console.error(`[bridge] line editing is unavailable: ${err.message}`);
+	}
 
-const server = createServer((req, res) => {
-	const started = Date.now();
-	const pathname = (req.url || "/").split("?")[0];
-	const log = (status) => {
-		console.log(`[bridge] ${req.method} ${pathname} -> ${status} (${Date.now() - started} ms)`);
-	};
+	const server = createServer((req, res) => {
+		const started = Date.now();
+		const pathname = (req.url || "/").split("?")[0];
+		const log = (status) => {
+			console.log(`[bridge] ${req.method} ${pathname} -> ${status} (${Date.now() - started} ms)`);
+		};
 
-	if (req.method === "OPTIONS") {
-		// 204 with NO CORS headers on purpose: a cross-origin browser
-		// preflight must fail, and the same-origin Vite proxy never
-		// preflights the bridge (it forwards server-side).
-		res.writeHead(204);
-		res.end();
-		log(204);
-		return;
-	}
-	if (pathname === "/ardy/health" && req.method === "GET") {
-		// `capabilities` is how the app learns that an OPTIONAL run mode is wired
-		// on this box. The draw-a-line affordance is gated on capabilities.lineEdit
-		// (App.jsx accepts the object or an array spelling), so a bridge whose
-		// ProjFlow env is missing keeps the feature dark instead of letting the
-		// artist draw a stroke that would 503. Probed, never assumed.
-		Promise.all([getHealth(), getLineEditCapability()])
-			.then(([value, lineEdit]) => {
-				sendJson(res, 200, {
-					...value,
-					extractionBackend: EXTRACT_BACKEND_SUPPORTED ? EXTRACT_BACKEND : "unsupported",
-					capabilities: { lineEdit, extractionBackend: EXTRACT_BACKEND_SUPPORTED ? EXTRACT_BACKEND : "unsupported" },
+		if (req.method === "OPTIONS") {
+			// 204 with NO CORS headers on purpose: a cross-origin browser
+			// preflight must fail, and the same-origin Vite proxy never
+			// preflights the bridge (it forwards server-side).
+			res.writeHead(204);
+			res.end();
+			log(204);
+			return;
+		}
+		if (pathname === "/ardy/health" && req.method === "GET") {
+			// `capabilities` is how the app learns that an OPTIONAL run mode is wired
+			// on this box. The draw-a-line affordance is gated on capabilities.lineEdit
+			// (App.jsx accepts the object or an array spelling), so a bridge whose
+			// ProjFlow env is missing keeps the feature dark instead of letting the
+			// artist draw a stroke that would 503. Probed, never assumed.
+			Promise.all([getHealth(), getLineEditCapability()])
+				.then(([value, lineEdit]) => {
+					sendJson(res, 200, {
+						...value,
+						extractionBackend: EXTRACT_BACKEND_SUPPORTED ? EXTRACT_BACKEND : "unsupported",
+						capabilities: { lineEdit, extractionBackend: EXTRACT_BACKEND_SUPPORTED ? EXTRACT_BACKEND : "unsupported" },
+					});
+					log(200);
+				})
+				.catch((err) => {
+					// The selected Kimodo route is configured even when its probe fails;
+					// expose only the safe backend bucket and boolean configuration state.
+					sendJson(res, 503, {
+						ok: false,
+						backend: "local_kimodo",
+						host_configured: Boolean(process.env.CCLAY_KIMODO_HOST?.trim()),
+						reason: err.message,
+					});
+					log(503);
 				});
-				log(200);
-			})
-			.catch((err) => {
-				// The selected Kimodo route is configured even when its probe fails;
-				// expose only the safe backend bucket and boolean configuration state.
-				sendJson(res, 503, {
-					ok: false,
-					backend: "local_kimodo",
-					host_configured: Boolean(process.env.CCLAY_KIMODO_HOST?.trim()),
-					reason: err.message,
+			return;
+		}
+		if (pathname === "/ardy/bases" && req.method === "GET") {
+			getBases()
+				.then((value) => {
+					sendJson(res, 200, value);
+					log(200);
+				})
+				.catch((err) => {
+					sendJson(res, 503, { ok: false, reason: err.message });
+					log(503);
 				});
-				log(503);
-			});
-		return;
-	}
-	if (pathname === "/ardy/bases" && req.method === "GET") {
-		getBases()
-			.then((value) => {
-				sendJson(res, 200, value);
-				log(200);
-			})
-			.catch((err) => {
-				sendJson(res, 503, { ok: false, reason: err.message });
-				log(503);
-			});
-		return;
-	}
-	if (pathname === "/ardy/generate" && req.method === "POST") {
-		handleGenerate(req, res).catch((err) => respondInternalError(res, err, `${req.method} ${pathname}`));
-		return;
-	}
-	if (/^\/ardy\/motions\//.test(pathname) && req.method === "GET") {
-		log(serveMotion(req, res, pathname));
-		return;
-	}
-	if (pathname === "/ardy/footage" && req.method === "POST") {
-		handleFootage(req, res, (request) => readBody(request, MAX_BODY_BYTES)).catch((err) =>
-			respondInternalError(res, err, `${req.method} ${pathname}`),
-		);
-		return;
-	}
-	if (/^\/ardy\/footage\//.test(pathname) && req.method === "GET") {
-		log(serveFootage(req, res, pathname));
-		return;
-	}
-	if (pathname === "/ardy/extract" && req.method === "POST") {
-		handleExtract(req, res, {
-			readBody: (request) => readBody(request, MAX_BODY_BYTES),
-			footagePath,
-			registerMotion,
-			artifactRoot: OUT_DIR,
-		}).catch((err) => respondInternalError(res, err, `${req.method} ${pathname}`));
-		return;
-	}
-	if (
-		pathname === "/ardy/health" ||
-		pathname === "/ardy/bases" ||
-		pathname === "/ardy/generate" ||
-		pathname === "/ardy/footage" ||
-		pathname === "/ardy/extract" ||
-		/^\/ardy\/motions\//.test(pathname) ||
-		/^\/ardy\/footage\//.test(pathname)
-	) {
-		sendJson(res, 405, { ok: false, reason: `method ${req.method} not allowed on ${pathname}` });
-		log(405);
-		return;
-	}
-	sendJson(res, 404, { ok: false, reason: `not found: ${req.method} ${pathname}` });
-	log(404);
-});
-
-server.on("clientError", (err, socket) => {
-	if (socket.writable) {
-		socket.end("HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n");
-	}
-	console.error(`[bridge] client error: ${err.message}`);
-});
+			return;
+		}
+		if (pathname === "/ardy/generate" && req.method === "POST") {
+			handleGenerate(req, res).catch((err) => respondInternalError(res, err, `${req.method} ${pathname}`));
+			return;
+		}
+		if (/^\/ardy\/motions\//.test(pathname) && req.method === "GET") {
+			log(serveMotion(req, res, pathname));
+			return;
+		}
+		if (pathname === "/ardy/footage" && req.method === "POST") {
+			handleFootage(req, res, (request) => readBody(request, MAX_BODY_BYTES)).catch((err) =>
+				respondInternalError(res, err, `${req.method} ${pathname}`),
+			);
+			return;
+		}
+		if (/^\/ardy\/footage\//.test(pathname) && req.method === "GET") {
+			log(serveFootage(req, res, pathname));
+			return;
+		}
+		if (pathname === "/ardy/extract" && req.method === "POST") {
+			handleExtract(req, res, {
+				readBody: (request) => readBody(request, MAX_BODY_BYTES),
+				footagePath,
+				registerMotion,
+				artifactRoot: OUT_DIR,
+			}).catch((err) => respondInternalError(res, err, `${req.method} ${pathname}`));
+			return;
+		}
+		if (
+			pathname === "/ardy/health" ||
+			pathname === "/ardy/bases" ||
+			pathname === "/ardy/generate" ||
+			pathname === "/ardy/footage" ||
+			pathname === "/ardy/extract" ||
+			/^\/ardy\/motions\//.test(pathname) ||
+			/^\/ardy\/footage\//.test(pathname)
+		) {
+			sendJson(res, 405, { ok: false, reason: `method ${req.method} not allowed on ${pathname}` });
+			log(405);
+			return;
+		}
+		sendJson(res, 404, { ok: false, reason: `not found: ${req.method} ${pathname}` });
+		log(404);
+	});
 
-server.listen(port, BIND_HOST, () => {
-	const address = server.address();
-	const boundPort = typeof address === "object" && address ? address.port : port;
-	process.send?.({ type: "cozyclay-bridge-ready", port: boundPort });
-	console.log(`[bridge] motion dev bridge listening on http://${BIND_HOST}:${boundPort}`);
-	console.log("[bridge] dev-only sidecar: the static dist/ build does not need it; stop with Ctrl-C");
-	console.log(`[bridge] ${runner.mode} backend: ${runner.describe()}`);
-});
+	server.on("clientError", (err, socket) => {
+		if (socket.writable) {
+			socket.end("HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n");
+		}
+		console.error(`[bridge] client error: ${err.message}`);
+	});
 
-server.on("error", (err) => {
-	const override = "set COZYCLAY_BRIDGE_PORT to a free port or pass --port <n>";
-	console.error(
-		`[bridge] cannot listen on ${BIND_HOST}:${port}: ${err.message}` +
-			(err?.code === "EADDRINUSE" ? `; ${override}` : ""),
-	);
-	if (process.send && process.connected) {
-		process.send({ type: "cozyclay-bridge-listen-error", port, code: err?.code }, () => process.exit(1));
-	} else {
-		process.exit(1);
-	}
-});
+	server.listen(port, BIND_HOST, () => {
+		const address = server.address();
+		const boundPort = typeof address === "object" && address ? address.port : port;
+		process.send?.({ type: "cozyclay-bridge-ready", port: boundPort });
+		console.log(`[bridge] motion dev bridge listening on http://${BIND_HOST}:${boundPort}`);
+		console.log("[bridge] dev-only sidecar: the static dist/ build does not need it; stop with Ctrl-C");
+		console.log(`[bridge] ${runner.mode} backend: ${runner.describe()}`);
+	});
 
-// Ctrl-C / SIGTERM: take the in-flight process groups down with us; ssh dies,
-// sshd closes the session, and the remote generation is not orphaned.
-for (const signal of ["SIGINT", "SIGTERM"]) {
-	process.on(signal, () => {
-		console.error(`[bridge] received ${signal}; killing ${globalChildren.size} in-flight child process group(s)`);
-		for (const child of globalChildren) killGroup(child);
-		process.exit(signal === "SIGINT" ? 130 : 143);
+	server.on("error", (err) => {
+		const override = "set COZYCLAY_BRIDGE_PORT to a free port or pass --port <n>";
+		console.error(
+			`[bridge] cannot listen on ${BIND_HOST}:${port}: ${err.message}` +
+				(err?.code === "EADDRINUSE" ? `; ${override}` : ""),
+		);
+		if (process.send && process.connected) {
+			process.send({ type: "cozyclay-bridge-listen-error", port, code: err?.code }, () => process.exit(1));
+		} else {
+			process.exit(1);
+		}
 	});
+
+	// Ctrl-C / SIGTERM: take the in-flight process groups down with us; ssh dies,
+	// sshd closes the session, and the remote generation is not orphaned.
+	for (const signal of ["SIGINT", "SIGTERM"]) {
+		process.on(signal, () => {
+			console.error(`[bridge] received ${signal}; killing ${globalChildren.size} in-flight child process group(s)`);
+			for (const child of globalChildren) killGroup(child);
+			process.exit(signal === "SIGINT" ? 130 : 143);
+		});
+	}
 }
+
+const isEntry = Boolean(process.argv[1]) && import.meta.url === pathToFileURL(realpathSync(process.argv[1])).href;
+if (isEntry) startBridge();

package/tools/ardy/visual-qa.mjs

@@ -78,7 +78,7 @@ await sleep(6000);
 
 // Prompt Blocks replaced the old single "Generate motion" field. Select the
 // first character, open the Prompt Blocks foldout, then add a block before
-// looking for its prompt input and batch Generate action.
+// looking for its prompt input and the top-bar Generate Motion action.
 await evaluate(tab, `(() => {
 	const character = [...document.querySelectorAll('.hierarchy-row')].find((row) => /Character 1|Subject 1|인물 1/.test(row.textContent));
 	character?.click();
@@ -92,8 +92,8 @@ await sleep(400);
 const state0 = await evaluate(tab, `(() => {
 	const seed = document.querySelector('input[placeholder="empty = random"]');
 	const promptEl = document.querySelector('input[placeholder*="motion block"], input[placeholder*="모션 블록"]');
-	const gen = document.querySelector('button.prompt-block-generate');
-	return { seedValue: seed?.value ?? null, hasGenerate: !!gen, generateDisabled: !!gen?.disabled, hasPrompt: !!promptEl };
+	const gen = document.querySelector('[data-testid=topbar-generate]');
+	return { seedValue: seed?.value ?? null, hasGenerate: !!gen, generateDisabled: gen?.getAttribute('aria-disabled') === 'true', hasPrompt: !!promptEl };
 })()`);
 console.log("initial:", JSON.stringify(state0));
 
@@ -119,8 +119,8 @@ for (const key of ["a", " ", "p", "e", "r", "s", "o", "n", " ", "w", "a", "l", "
 await sleep(300);
 await shot(tab, "01-before-generate");
 const clicked = await evaluate(tab, `(() => {
-const gen = document.querySelector('button.prompt-block-generate');
-	if (!gen || gen.disabled) return false;
+const gen = document.querySelector('[data-testid=topbar-generate]');
+	if (!gen || gen.getAttribute('aria-disabled') === 'true') return false;
 	gen.click();
 	return true;
 })()`);