@lalalic/markcut 1.2.0 → 2.1.0

package/src/player/server.mjs

@@ -17,6 +17,8 @@ import { fileURLToPath } from "node:url";
 import { isDescriptiveRoot, resolveAndCompile, resolveAndCompileMarkdown, parseImportsBlock, extractDependencySpecs } from "./pipeline.mjs";
 import { bundleFromEntries } from "./bundler.mjs";
 import { extractScenes, MIME, serveFile, handleShutdown } from "./server-shared.mjs";
+import { DEFAULT_AGENT_CLI } from "../config.mjs";
+
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = resolve(__dirname, "..", "..");
@@ -76,6 +78,180 @@ let shutdownTimer = null;
 // ─── Label store for label mode ───────────────────────────────────────────
 let labels = [];
 
+// ─── Agent process (rpc mode) for --edit mode ─────────────────────────────
+// A persistent `pi --mode rpc` subprocess: ONE cold start, MANY edit turns.
+// The agent keeps conversation memory across edits (fast, no re-spawn).
+//
+// JSON-lines protocol over stdio:
+//   request:  {"id":N,"type":"prompt","message":"..."}
+//   response: {"id":N,"type":"response","command":"prompt","success":true}  (accepted)
+//   events:   streamed; a turn ENDS at {"type":"agent_settled"}
+// We collect assistant text from {"type":"message_end", message:{role:"assistant"}}
+// events and resolve the pending /api/edit call on agent_settled.
+let agentProcess = null;
+let agentBusy = false;
+let agentLineBuf = "";          // partial stdout line buffer
+let agentTurnText = "";         // accumulated assistant text for the current turn
+let agentTurnTimer = null;
+/** Resolve/reject for the pending edit API call */
+let pendingEditResolver = null;
+const AGENT_TURN_TIMEOUT = 300000; // 5min safety net per turn
+
+/** Pull text out of an assistant message_end event's content blocks. */
+function extractAssistantText(message) {
+  if (!message || message.role !== "assistant") return "";
+  const content = Array.isArray(message.content) ? message.content : [];
+  return content
+    .filter((b) => b && b.type === "text" && typeof b.text === "string")
+    .map((b) => b.text)
+    .join("");
+}
+
+/** Resolve the pending edit call and reset per-turn state. */
+function finishAgentTurn(result) {
+  if (agentTurnTimer) { clearTimeout(agentTurnTimer); agentTurnTimer = null; }
+  agentBusy = false;
+  const turnText = agentTurnText;
+  agentTurnText = "";
+  const resolver = pendingEditResolver;
+  pendingEditResolver = null;
+  if (resolver) resolver({ ...result, output: result.output != null ? result.output : turnText });
+}
+
+/** Dispatch one parsed JSON line emitted on the agent's stdout. */
+function handleAgentLine(obj) {
+  if (!obj || typeof obj !== "object") return;
+  const t = obj.type;
+  if (t === "message_end") {
+    const txt = extractAssistantText(obj.message);
+    if (txt) agentTurnText += (agentTurnText ? "\n" : "") + txt;
+    return;
+  }
+  if (t === "agent_settled" && pendingEditResolver) {
+    finishAgentTurn({ ok: true });
+    return;
+  }
+  if (t === "response" && obj.command === "prompt" && pendingEditResolver) {
+    // Preflight result: success means "accepted, events incoming"; failure aborts.
+    if (obj.success === false) finishAgentTurn({ ok: false, error: obj.error || "prompt rejected" });
+    return;
+  }
+  if (t === "extension_error" && obj.error) {
+    console.warn(`  ⚠ agent extension error: ${String(obj.error).substring(0, 120)}`);
+  }
+}
+
+/**
+ * Start the persistent agent subprocess in rpc mode.
+ * The system prompt is fixed for the server lifetime (it only references the
+ * constant file path); per-edit context rides on each prompt's message.
+ */
+function startAgentProcess() {
+  if (!MODE_EDIT) return;
+
+  const agentCli = process.env.MARKCUT_AGENT_CLI || DEFAULT_AGENT_CLI;
+
+  const fileLabel = VIDEO_JSON.split("/").pop();
+  const sessionId = VIDEO_JSON.replace(/[^a-zA-Z0-9\-_.]/g, "_").replace(/^[^a-zA-Z0-9]+/, "").replace(/[^a-zA-Z0-9]+$/, "");
+  const promptTemplate = readFileSync(join(ROOT, "docs", "system-prompt-edit.md"), "utf-8");
+  const systemPrompt = promptTemplate
+    .replace(/@\{([^}]+)\}/g, (_, refPath) => {
+      try { return readFileSync(resolve(ROOT, refPath.trim()), "utf-8"); }
+      catch { console.warn(`  ⚠ could not read @{${refPath}}`); return `[Missing: ${refPath}]`; }
+    })
+    .replace(/\$\{fileName\}/g, fileLabel)
+    .replace(/\$\{filePath\}/g, VIDEO_JSON);
+
+  // Build the CLI command — strip -p/--prompt (rpc takes prompts via stdin) and
+  // force --mode rpc. e.g.
+  //   "npx pi --session-id {sessionid} --system-prompt {systemprompt} -p {prompt}"
+  //   → "npx pi --session-id SID --system-prompt SP --mode rpc"
+  const parts = agentCli.split(/\s+/).filter(Boolean);
+  const resolvedParts = [];
+  for (let i = 0; i < parts.length; i++) {
+    const p = parts[i];
+    if (p === "-p" || p === "--prompt") { i++; continue; } // drop prompt flag + value
+    const resolved = p
+      .replace(/\{sessionid\}/g, sessionId)
+      .replace(/\{systemprompt\}/g, systemPrompt)
+      .replace(/\{prompt\}/g, "");
+    if (resolved) resolvedParts.push(resolved);
+  }
+  if (!resolvedParts.includes("--mode")) resolvedParts.push("--mode", "rpc");
+  const cmd = resolvedParts[0];
+  const cmdArgs = resolvedParts.slice(1);
+
+  console.log(`  🎬 starting persistent agent (rpc): ${cmd} ${cmdArgs.slice(0, -1).join(" ")} --system-prompt <${systemPrompt.length} chars>`);
+
+  const child = spawn(cmd, cmdArgs, { cwd: ROOT, stdio: ["pipe", "pipe", "pipe"] });
+  agentProcess = child;
+  agentLineBuf = "";
+
+  // stdout is pure JSON-lines in rpc mode (it takes over stdout). Parse line by line.
+  child.stdout.on("data", (chunk) => {
+    agentLineBuf += chunk.toString();
+    let nl;
+    while ((nl = agentLineBuf.indexOf("\n")) >= 0) {
+      const line = agentLineBuf.slice(0, nl).trim();
+      agentLineBuf = agentLineBuf.slice(nl + 1);
+      if (!line) continue;
+      let obj;
+      try { obj = JSON.parse(line); } catch { continue; } // not JSON — ignore
+      handleAgentLine(obj);
+    }
+  });
+
+  child.stderr.on("data", (chunk) => { process.stderr.write(chunk); });
+
+  child.on("exit", (code) => {
+    console.log(`  ⚫ agent process exited (code ${code})`);
+    agentProcess = null;
+    if (pendingEditResolver) finishAgentTurn({ ok: false, error: `agent exited (code ${code})` });
+    agentBusy = false;
+    // Keep the session warm: restart on any exit while in edit mode.
+    // The --session-id resumes conversation history from disk.
+    if (MODE_EDIT) {
+      console.log(`  🔄 restarting agent in 1s...`);
+      setTimeout(() => startAgentProcess(), 1000);
+    }
+  });
+}
+
+/**
+ * Send an edit prompt to the persistent rpc agent and resolve when the turn
+ * settles. Completion is signalled authoritatively by the `agent_settled`
+ * event — no idle-timeout guessing.
+ * @param {string} prompt
+ * @returns {Promise<{ok: boolean, output: string, error?: string}>}
+ */
+function sendToAgent(prompt) {
+  return new Promise((resolve) => {
+    if (!agentProcess || agentProcess.killed) {
+      resolve({ ok: false, output: "", error: "agent process not running" });
+      return;
+    }
+    if (agentBusy) {
+      resolve({ ok: false, output: "", error: "agent is busy" });
+      return;
+    }
+
+    agentBusy = true;
+    agentTurnText = "";
+    pendingEditResolver = resolve;
+
+    // Safety net — the agent_settled event is the real completion signal.
+    agentTurnTimer = setTimeout(() => {
+      console.warn(`  ⏰ agent turn timed out after ${AGENT_TURN_TIMEOUT / 1000}s`);
+      finishAgentTurn({ ok: false, output: agentTurnText + "\n[TIMEOUT]", error: "agent turn timed out" });
+    }, AGENT_TURN_TIMEOUT);
+
+    const id = Date.now();
+    const req = JSON.stringify({ id, type: "prompt", message: prompt }) + "\n";
+    console.log(`  📤 rpc prompt (id=${id}): ${prompt.substring(0, 80).replace(/\n/g, " ")}`);
+    agentProcess.stdin.write(req);
+  });
+}
+
 // ─── Edit history for context ─────────────────────────────────────────────
 let editHistory = [];
 
@@ -448,6 +624,29 @@ async function compileAndExtractScenes() {
       console.error(`  ⚠ Could not extract scenes for "${config.label}":`, e.message);
     }
   }
+
+  // Merge existing labels from labels.json into the compiled root (label mode)
+  if (MODE_LABEL) {
+    const labelsPath = join(dirname(VIDEO_JSON), "labels.json");
+    try {
+      const labelsRaw = readFileSync(labelsPath, "utf-8");
+      const labelsData = JSON.parse(labelsRaw);
+      const labelsRoot = labelsData.root || labelsData;
+      const root = compiledRootCache.get("default");
+      if (labelsRoot.children && root?.children) {
+        for (let i = 0; i < Math.min(labelsRoot.children.length, root.children.length); i++) {
+          const labelMedia = labelsRoot.children[i]?.children?.[0];
+          const targetMedia = root.children[i]?.children?.[0];
+          if (labelMedia && targetMedia && labelMedia.description) {
+            targetMedia.description = labelMedia.description;
+          }
+        }
+      }
+      console.log(`  🏷️  Merged ${Object.keys(labelsRoot.children || {}).length} existing labels from labels.json`);
+    } catch {
+      // No existing labels file — that's fine
+    }
+  }
 }
 
 function getScenes(label) {
@@ -536,29 +735,25 @@ function resolveAsset(urlPath, variantLabel) {
 }
 
 // ─── HTML page ───────────────────────────────────────────────────────────
+// Minimal HTML shell. All UI is rendered by React (player.js bundle).
+// Mode-specific controls are in src/player/components/.
 function getHtml(variantLabel) {
   const label = variantLabel || "default";
-  const hasLabel = MODE_LABEL ? "true" : "false";
-  const hasWatch = MODE_EDIT ? "true" : "false";
-  const title = label !== "default" ? ` — ${label}` : MODE_LABEL ? " — Label" : MODE_EDIT ? " — Edit" : "";
-
-  // Build variant switcher links
-  const variantLinks = VARIANT_CONFIGS.map(c =>
-    `<a href="/${c.label === "default" ? "" : c.label}" class="variant-link${c.label === label ? " active" : ""}">${c.label}</a>`
-  ).join("");
+  const mode = MODE_LABEL ? "label" : MODE_EDIT ? "edit" : "preview";
 
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Remotion Player${title}</title>
+<title>Remotion Player${mode !== "preview" ? " — " + mode.charAt(0).toUpperCase() + mode.slice(1) : ""}</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
   body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; align-items: center; }
   #header { display: flex; align-items: center; justify-content: flex-end; width: 100%; max-width: 500px; padding: 8px 12px; flex-shrink: 0; gap: 8px; }
-  #header-status { font-size: 11px; color: rgba(255,255,255,.4); flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  #header-status, #edit-status { font-size: 11px; color: rgba(255,255,255,.4); flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  #scene-info { font-size: 11px; color: rgba(255,255,255,.4); flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   #header-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
   #close-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); color: rgba(255,255,255,.4); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
   #close-btn:hover { background: rgba(255,60,60,.4); border-color: rgba(255,60,60,.5); color: #fff; }
@@ -571,90 +766,44 @@ function getHtml(variantLabel) {
   #reload-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(74,158,255,.9); color: #fff; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 200; backdrop-filter: blur(8px); }
   #reload-toast.show { opacity: 1; }
   #bottom-bar { display: flex; gap: 6px; align-items: center; width: 100%; max-width: 500px; padding: 8px 12px; flex-shrink: 0; }
-  #edit-input { flex: 1; padding: 8px 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #eee; border-radius: 8px; font-size: 13px; outline: none; transition: border-color .15s; }
-  #edit-input:focus { border-color: rgba(74,158,255,.5); }
-  #edit-input::placeholder { color: rgba(255,255,255,.25); }
-  #edit-btn { width: 32px; height: 32px; padding: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
-  #edit-btn:hover { background: rgba(74,158,255,.2); border-color: rgba(74,158,255,.4); color: #4a9eff; }
-  #edit-btn:disabled { opacity: 0.3; cursor: wait; }
+  #edit-input, #label-input { flex: 1; padding: 8px 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #eee; border-radius: 8px; font-size: 13px; outline: none; transition: border-color .15s; }
+  #edit-input:focus, #label-input:focus { border-color: rgba(74,158,255,.5); }
+  #edit-input::placeholder, #label-input::placeholder { color: rgba(255,255,255,.25); }
+  #edit-btn, #label-btn { width: 32px; height: 32px; padding: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
+  #edit-btn:hover, #label-btn:hover { background: rgba(74,158,255,.2); border-color: rgba(74,158,255,.4); color: #4a9eff; }
+  #edit-btn:disabled, #label-btn:disabled { opacity: 0.3; cursor: wait; }
+  #thumbnails { display: flex; gap: 6px; width: 100%; max-width: 500px; padding: 4px 12px; flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; }
+  #thumbnails::-webkit-scrollbar { height: 4px; }
+  #thumbnails::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
+  .thumb-item { flex-shrink: 0; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all .15s; position: relative; background: rgba(255,255,255,.05); }
+  .thumb-item:hover { border-color: rgba(74,158,255,.4); }
+  .thumb-item.active { border-color: #4a9eff; box-shadow: 0 0 8px rgba(74,158,255,.3); }
+  .thumb-item img { width: 100%; height: 100%; object-fit: cover; }
+  .thumb-badge { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; border: 1px solid rgba(0,0,0,.4); display: none; }
+  .thumb-badge.has-label { display: block; }
+  #timed-labels { width: 100%; max-width: 500px; padding: 2px 12px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; max-height: 80px; overflow-y: auto; }
+  .timed-label { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.04); font-size: 11px; color: rgba(255,255,255,.6); }
+  .timed-label .tl-time { flex-shrink: 0; font-family: monospace; font-size: 10px; color: rgba(74,158,255,.7); min-width: 32px; }
+  .timed-label .tl-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .timed-label .tl-del { width: 16px; height: 16px; border: none; background: rgba(255,60,60,.15); color: rgba(255,60,60,.5); border-radius: 3px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; line-height: 1; }
+  .timed-label .tl-del:hover { background: rgba(255,60,60,.3); color: #fff; }
+  #saved-toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: rgba(74,222,128,.9); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 500; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 200; backdrop-filter: blur(8px); }
+  #saved-toast.show { opacity: 1; }
+  #scene-thumbnails { display: flex; gap: 6px; width: 100%; max-width: 500px; padding: 4px 12px; flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; }
+  #scene-thumbnails::-webkit-scrollbar { height: 4px; }
+  #scene-thumbnails::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
+  .scene-pill { flex-shrink: 0; padding: 4px 12px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: all .15s; background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); font-size: 11px; white-space: nowrap; }
+  .scene-pill:hover { border-color: rgba(74,158,255,.4); color: rgba(255,255,255,.7); }
+  .scene-pill.active { background: rgba(74,158,255,.2); border-color: #4a9eff; color: #4a9eff; }
 </style>
 </head>
 <body>
-<script>window.VARIANT = "${label}";</script>
-${MODE_EDIT ? `<div id="header">
-  <span id="header-status"></span>
-  <div id="header-actions">
-    <button id="close-btn" title="Close player and return to terminal">✕</button>
-  </div>
-</div>` : ""}
-<div id="variant-bar">${variantLinks}</div>
-<div id="player-frame">
-  <div id="root"></div>
-</div>
-<div id="reload-toast">🔄 JSON changed — reloading...</div>
-${MODE_EDIT ? `<div id="bottom-bar">
-  <input id="edit-input" placeholder="What should change? e.g. make text bigger" />
-  <button id="edit-btn" title="Apply edit">&#x2728;</button>
-</div>` : ""}
+<script>
+  window.VARIANT = "${label}";
+  window.MODE = "${mode}";
+</script>
+<div id="root"></div>
 <script src="/player.js" type="module"></script>
-${MODE_EDIT ? `<script>
-// ─── SSE reload ───────────────────────────────────────────────────────
-const evtSource = new EventSource("/api/events");
-evtSource.onmessage = (e) => {
-  const msg = JSON.parse(e.data);
-  if (msg.type === "reload" && !suppressReload) {
-    window.dispatchEvent(new Event("refresh-player"));
-  }
-};
-
-// ─── Close button ─────────────────────────────────────────────────────
-document.getElementById("close-btn")?.addEventListener("click", () => {
-  navigator.sendBeacon("/api/shutdown", "{}");
-  document.body.innerHTML = "<div style='display:flex;align-items:center;justify-content:center;height:100vh;background:#0a0a0a;color:#555;font-family:sans-serif;font-size:16px'>\u2B61 player closed \u2014 return to terminal</div>";
-});
-
-// ─── Edit input ───────────────────────────────────────────────────────
-const editInput = document.getElementById("edit-input");
-const editBtn = document.getElementById("edit-btn");
-const headerStatus = document.getElementById("header-status");
-
-let suppressReload = false;
-
-async function applyEdit() {
-  const text = editInput.value.trim();
-  if (!text) return;
-  editBtn.disabled = true;
-  headerStatus.textContent = "\u231B editing...";
-  editInput.value = "";
-  suppressReload = true;
-  try {
-    const res = await fetch("/api/edit", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text }),
-    });
-    const data = await res.json();
-    if (res.ok) {
-      const summary = (data.output || "done").split("\\n")[0].slice(0, 65);
-      headerStatus.textContent = summary;
-      setTimeout(() => { suppressReload = false; window.dispatchEvent(new Event("refresh-player")); }, 4000);
-    } else {
-      headerStatus.textContent = "\u274C " + (data.error || "failed");
-      suppressReload = false;
-    }
-  } catch (e) {
-    headerStatus.textContent = "\u274C error";
-    suppressReload = false;
-  }
-  editBtn.disabled = false;
-}
-
-editBtn?.addEventListener("click", applyEdit);
-editInput?.addEventListener("keydown", (e) => {
-  if (e.key === "Enter") { e.preventDefault(); applyEdit(); }
-});
-</script>` : ""}
-
 </body>
 </html>`;
 }
@@ -684,13 +833,25 @@ const server = createServer(async (req, res) => {
     if (path === "/api/labels") {
       const labelsPath = join(dirname(VIDEO_JSON), "labels.json");
       if (req.method === "GET") {
+        // Return the stream tree — descriptions on children are the labels
         try {
           const data = readFileSync(labelsPath, "utf-8");
+          const parsed = JSON.parse(data);
+          if (parsed.type || parsed.root) {
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(data);
+            return;
+          }
+        } catch { /* labels.json missing or invalid — fall through */ }
+        // Fall back to compiled root for the default variant
+        try {
+          const root = await loadCompiledRoot("default");
+          const tree = resolveAssetPaths(root);
           res.writeHead(200, { "Content-Type": "application/json" });
-          res.end(data);
-        } catch (e) {
+          res.end(JSON.stringify(tree));
+        } catch {
           res.writeHead(200, { "Content-Type": "application/json" });
-          res.end(JSON.stringify({ labels: [], scenes: [] }));
+          res.end(JSON.stringify({ type: "root", children: [] }));
         }
         return;
       }
@@ -699,7 +860,38 @@ const server = createServer(async (req, res) => {
         req.on("data", c => body += c);
         req.on("end", () => {
           try {
-            writeFileSync(labelsPath, body, "utf-8");
+            const data = JSON.parse(body);
+
+            // Granular label update: { sceneIndex, description, time, overall, removeTimed }
+            if (typeof data.sceneIndex === "number") {
+              // Load the compiled root to apply labels to the live tree
+              loadCompiledRoot("default").then((root) => {
+                const child = root?.children?.[data.sceneIndex];
+                const media = child?.children?.[0];
+                if (media) {
+                  media.userHints = media.userHints || { overall: "", timed: {} };
+                  if (data.removeTimed) {
+                    delete media.userHints.timed[data.removeTimed];
+                  } else if (typeof data.description === "string") {
+                    if (data.overall) {
+                      media.userHints.overall = data.description;
+                    } else {
+                      const timeMs = Math.round((data.time || 0) * 1000);
+                      media.userHints.timed["at_" + timeMs] = data.description;
+                    }
+                  }
+                  media.description = media.userHints.overall || Object.values(media.userHints.timed)[0] || undefined;
+                }
+                // Save the full tree to labels.json
+                writeFileSync(labelsPath, JSON.stringify(root, null, 2), "utf-8");
+              }).catch(() => {
+                // If no compiled root, save the update as minimal labels.json
+                writeFileSync(labelsPath, body, "utf-8");
+              });
+            } else {
+              // Full labels.json body — save directly
+              writeFileSync(labelsPath, body, "utf-8");
+            }
             res.writeHead(200, { "Content-Type": "application/json" });
             res.end(JSON.stringify({ saved: true, path: labelsPath }));
           } catch (e) {
@@ -737,163 +929,60 @@ const server = createServer(async (req, res) => {
       return;
     }
 
-    // API: Edit — call pi one-shot to edit the JSON, player auto-reloads
+    // API: Edit — spawn agent CLI to edit the .md source file
+    // Uses the configured agent CLI (DEFAULT_AGENT_CLI) in one-shot mode.
+    // The agent receives the system prompt + edit request and outputs JSON.
     if (path === "/api/edit" && req.method === "POST") {
       let body = "";
       req.on("data", c => body += c);
-      req.on("end", () => {
+      req.on("end", async () => {
         try {
-          const { text } = JSON.parse(body);
+          const { text, currentTime, activeScene } = JSON.parse(body);
           if (!text) { res.writeHead(400); res.end(JSON.stringify({ error: "empty text" })); return; }
 
           editHistory.push(text);
 
-          // Build tree structure description from current JSON (recursive, any depth)
-          let treeInfo = "";
-          try {
-            const raw = readFileSync(VIDEO_JSON, "utf-8");
-            const parsed = JSON.parse(raw);
-            const root = parsed.root || parsed;
-
-            function describeNode(node, depth) {
-              const indent = "  ".repeat(depth);
-              const id = node.id || "";
-              const name = node.name || "";
-              const label = name || id;
-              const type = node.type || "unknown";
-              const dur = node.durationInSeconds !== undefined ? `, ${node.durationInSeconds}s` : "";
-
-              let line = `${indent}${type} "${label}"`;
-
-              if (type === "root") {
-                line += ` (${node.width}x${node.height}, ${node.fps}fps${node.isSeries ? ", series" : ""}${node.transition ? `, transition:${node.transition}` : ""}${node.theme ? `, theme:${node.theme}` : ""})`;
-              } else if (type === "folder") {
-                line += ` (${node.isSeries ? "series" : "parallel"}${node.transition ? `, transition:${node.transition}` : ""}${dur})`;
-              } else if (type === "component") {
-                const props = node.props ? JSON.stringify(Object.fromEntries(Object.entries(node.props).filter(([k]) => !k.startsWith("_")))) : "{}";
-                line += ` ${node.componentName}(${props.slice(0, 100)})${dur}`;
-              } else if (type === "subtitle") {
-                const txt = (node.src || "").slice(0, 60);
-                line += ` "${txt}"${dur}`;
-              } else if (type === "video" || type === "audio" || type === "image") {
-                const src = (node.src || "").slice(0, 50);
-                line += ` "${src}"${dur}`;
-              } else if (type === "effect") {
-                line += ` animation:${node.animation || "custom"}${dur}`;
-              } else if (type === "rhythm") {
-                line += ` src:"${(node.src || "").slice(0, 40)}"${dur}`;
-              } else if (type === "map") {
-                line += ` waypoints:${(node.waypoints || []).length}${dur}`;
-              } else if (type === "include") {
-                line += ` src:"${(node.src || "").slice(0, 50)}"${dur}`;
-              }
-
-              // Add timing info for leaf actions
-              if (node.actions && node.actions.length > 0) {
-                const act = node.actions[0];
-                line += ` [${act.start}→${act.end}s`;
-                if (node.isBackground) line += ", bg";
-                if (act.volume !== undefined) line += `, vol:${act.volume}`;
-                if (act.style) line += `, style:"${act.style.slice(0, 40)}"`;
-                if (act.loop) line += `, loop:${act.loop}`;
-                line += `]`;
-              } else if (node.isBackground) {
-                line += ` [bg]`;
-              }
-
-              // Add notable fields
-              const extras = [];
-              if (node.componentName) extras.push(node.componentName);
-              if (node.fit) extras.push(`fit:${node.fit}`);
-              if (node.fontSize) extras.push(`fontSize:${node.fontSize}`);
-              if (node.volume !== undefined && type !== "root") extras.push(`vol:${node.volume}`);
-              if (node.playbackRate) extras.push(`rate:${node.playbackRate}`);
-              if (node.style) extras.push(`style:"${node.style.slice(0, 40)}"`);
-              if (node.transitionTime !== undefined) extras.push(`transTime:${node.transitionTime}`);
-              if (node.visible === false) extras.push("hidden");
-              if (extras.length > 0) line += ` {${extras.join(", ")}}`;
-
-              return line;
-            }
-
-            function walkTree(node, depth = 0) {
-              const lines = [describeNode(node, depth)];
-              if (node.children && node.children.length > 0) {
-                const shown = node.children.filter(c => c.visible !== false || c.visible === undefined);
-                for (const child of shown) {
-                  lines.push(...walkTree(child, depth + 1));
-                }
-              }
-              return lines;
-            }
-
-            treeInfo = walkTree(root).join("\n");
-          } catch {}
-
+          // Build user prompt with context (system prompt is fixed at agent startup)
+          const timeStr = currentTime !== undefined ? `Current playback time: ${Number(currentTime).toFixed(1)}s` : "";
+          const sceneStr = activeScene ? `Active scene: ${activeScene}` : "";
+          const contextBlock = [timeStr, sceneStr].filter(Boolean).join("\n");
           const historyStr = editHistory.length > 1
-            ? "\nPrevious edits on this file (in order):\n" + editHistory.slice(0, -1).map((e, i) => `${i+1}. ${e}`).join("\n") + "\n"
+            ? "Previous edits (in order):\n" + editHistory.slice(0, -1).map((e, i) => `${i+1}. ${e}`).join("\n") + "\n"
             : "";
-
-          const prompt = `You are editing ${VIDEO_JSON.split("/").pop()}, a Remotion stream tree JSON.
-
-The stream tree (indentation shows nesting; timing in seconds):
-${treeInfo || "(could not read tree)"}
+          const userPrompt = `${contextBlock}
 ${historyStr}
-Edit request: ${text}
-
---- Knowledge ---
-You can edit ANY field on ANY node in the JSON. Common fields across all types:
-  - id, name, type, style (inline CSS string), visible (boolean)
-
-Stream types:
-  root: {width, height, fps, isSeries, transition, transitionTime, theme, stylesheet, children}
-  folder: {isSeries (parallel if false), transition, transitionTime, children}
-  video: {src, volume, playbackRate, width, height, actions}
-  audio: {src, volume, foreground (ducks parent video), actions}
-  image: {src, fit (contain/cover/fill), actions}
-  subtitle: {src (text or VTT), cues[], fontSize, fontStyle, style, actions}
-  component: {componentName, props:{}, src (remote URL), actions}
-  effect: {animation (builtin name or "custom"), animationTimingFunction, animationIterationCount, customKeyframes, children, actions}
-  rhythm: {src (audio), volume, spots[] (beat timestamps), children, actions}
-  map: {waypoints[{lat,lng,label?,media?}], routeColor, routeWeight, markerSrc, zoom, actions}
-  include: src (video JSON file path/URL), volume, actions — embeds an external video composition referenced by src. Falls back to inline children (legacy).
-
-Actions (on leaf types): [{start, end, style?, volume?, effectId?, loop?}] — start/end in seconds, relative to parent container
-
-Composition rules:
-  - isSeries=true → children play sequentially (one after another), with optional transition between them
-  - isSeries=false → children play in parallel, max duration wins (default)
-  - isBackground=true → node loops for the full duration of its parent, excluded from duration calc
-  - transition can be: "fade"|"slide"|"wipe"|"flip"|"clockWipe"
-
-Subtitle styling: style field supports CSS (e.g. "color:#fff;font-size:48px"). fontSize field for quick sizing. Supports HTML in src for rich text. For word-highlight karaoke: set className:"karaoke" on cue, or provide words[{text,start,end}] array.
-
-Themes: set root.theme = "cinematic"|"minimal"|"neon"|"corporate" or an inline theme JSON object. Default is "cinematic".
-Global stylesheet: root.stylesheet = "CSS string" — selectors use .type and .name class names on each node.
-
-IMPORTANT: Read the full existing JSON file before editing. Only edit the JSON file. You can change, add, or remove any field on any node. Output ONLY a one-line summary of what specific change you made. Do not add explanations.`;
-
-          console.log(`  🤖 pi edit: ${text}`);
-          const child = spawn("pi", ["-p", prompt], {
-            cwd: ROOT,
-            stdio: ["ignore", "pipe", "pipe"],
-          });
-
-          let output = "";
-          child.stdout.on("data", d => output += d);
-          child.stderr.on("data", d => output += d);
-
-          child.on("exit", (code) => {
-            if (code === 0) {
-              console.log(`  ✅ pi edit complete`);
-              res.writeHead(200, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ done: true, output: output.trim() }));
+Edit request: ${text}`;
+
+          console.log(`  🤖 edit: ${text}  (${currentTime !== undefined ? currentTime.toFixed(1) + "s" : ""} ${activeScene || ""})`);
+
+          // Send to the persistent rpc agent (one cold start; conversation kept in memory)
+          const result = await sendToAgent(userPrompt);
+
+          if (result.ok) {
+            // Parse JSON summary from the agent's final assistant text
+            let summary = "";
+            let fileChanged = false;
+            const raw = (result.output || "").trim();
+            const jsonMatch = raw.match(/\{[\s\S]*"summary"[\s\S]*\}/);
+            if (jsonMatch) {
+              try {
+                const parsed = JSON.parse(jsonMatch[0]);
+                summary = parsed.summary || raw.substring(0, 120);
+                fileChanged = parsed.fileChanged === true;
+              } catch { summary = raw.substring(0, 120); }
             } else {
-              console.error(`  ❌ pi edit failed (exit ${code}): ${output.trim()}`);
-              res.writeHead(500, { "Content-Type": "application/json" });
-              res.end(JSON.stringify({ error: `pi exited with code ${code}`, output: output.trim() }));
+              summary = raw.substring(0, 120) || "done";
             }
-          });
+            console.log(`  ✅ ${fileChanged ? "edited" : "no change"}: ${summary}`);
+            console.log(`  📤 response summary="${summary}" fileChanged=${fileChanged}`);
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ done: true, summary, fileChanged, output: "" }));
+          } else {
+            const msg = result.error || "failed";
+            console.error(`  ❌ edit ${msg}: ${(result.output || "").trim().substring(0, 100)}`);
+            res.writeHead(500, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: msg, output: (result.output || "").trim().substring(0, 200) }));
+          }
         } catch (e) {
           res.writeHead(500, { "Content-Type": "application/json" });
           res.end(JSON.stringify({ error: e.message }));
@@ -902,7 +991,7 @@ IMPORTANT: Read the full existing JSON file before editing. Only edit the JSON f
       return;
     }
 
-    // API: SSE stream for reload notifications
+    // API: SSE stream for reload notifications + server-liveness monitor
     // When the browser tab closes, this connection drops → server shuts down
     // Grace period: wait 3s for reconnection (page reload), then exit
     if (path === "/api/events") {
@@ -911,6 +1000,8 @@ IMPORTANT: Read the full existing JSON file before editing. Only edit the JSON f
         "Cache-Control": "no-cache",
         "Connection": "keep-alive",
       });
+      // Flush headers to client so EventSource.onopen fires
+      res.write(":ok\n\n");
       sseClients.add(res);
       if (shutdownTimer) {
         clearTimeout(shutdownTimer);
@@ -993,6 +1084,12 @@ server.listen(PORT, async () => {
   } catch {
     // Pipeline failed — still announce ready so the player can show an error state
   }
+
+  // Start persistent agent process for edit mode (after initial compilation)
+  if (MODE_EDIT) {
+    startAgentProcess();
+  }
+
   const mode = MODE_LABEL ? " --label" : MODE_EDIT ? " --edit" : "";
   console.log(`\n🎬 Player ready at http://localhost:${PORT}${mode}`);
   if (VARIANT_CONFIGS.length > 1) {