reel-studio 0.2.0 → 0.2.3

package/desk/app.js

@@ -0,0 +1,332 @@
+// Reel Studio desk page. Drives a composition through the same functions the renderer uses
+// (window.__ready, __meta, __seek): the desk never runs its own clock inside the composition.
+const $ = (id) => document.getElementById(id);
+const api = async (url, opts = {}) => {
+  const r = await fetch(url, { headers: { "content-type": "application/json" }, ...opts,
+    body: opts.body && JSON.stringify(opts.body) });
+  const data = r.headers.get("content-type")?.includes("json") ? await r.json() : await r.text();
+  if (!r.ok) throw new Error(data.error || r.statusText);
+  return data;
+};
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+const store = { get: (k) => { try { return localStorage.getItem(k); } catch { return null; } },
+  set: (k, v) => { try { localStorage.setItem(k, v); } catch {} } };
+
+const S = { list: [], prod: null, meta: null, win: null, t: 0, playing: false, busy: false, review: null, noteFilter: "open" };
+
+// ---------- productions ----------
+async function loadList() {
+  S.list = await api("/api/productions");
+  renderList();
+}
+function renderList() {
+  const f = $("filter").value.toLowerCase();
+  const items = S.list.filter((p) => !f || (p.id + p.title).toLowerCase().includes(f));
+  let brand = "", html = "";
+  for (const p of items) {
+    if (p.brand !== brand) { brand = p.brand; html += `<li class="brandname">${esc(brand)}</li>`; }
+    const ok = p.approvals.some((a) => a.stage === "final") ? `<span class="pill ok">✓ final</span>` : "";
+    html += `<li><button data-id="${esc(p.id)}" class="${S.prod?.id === p.id ? "on" : ""}">
+      <span class="t">${esc(p.title.replace(/^[A-Z]+-\d+\s+[—-]\s+/, ""))}</span>
+      <span class="s">${esc(p.id.split("/")[1].split("-").slice(0, 2).join("-"))} · ${esc(p.status.split("(")[0].trim() || "—")}
+        ${p.openNotes ? `<span class="pill notes">${p.openNotes}</span>` : ""} ${ok} ${p.composition ? "" : `<span class="pill">no comp</span>`}</span>
+    </button></li>`;
+  }
+  $("productions").innerHTML = html || `<li class="muted small">No productions yet. Ask Claude: “make a reel for &lt;brand&gt;”.</li>`;
+}
+$("productions").onclick = (e) => {
+  const b = e.target.closest("button[data-id]");
+  if (b) open(b.dataset.id);
+};
+$("filter").oninput = renderList;
+
+async function open(id, keepT = false) {
+  const p = S.list.find((x) => x.id === id);
+  if (!p) return;
+  S.prod = p; store.set("desk.prod", id);
+  history.replaceState(null, "", `#${id}`);
+  $("crumb").textContent = p.title;
+  $("panel").hidden = false;
+  renderList();
+  pause();
+  await Promise.all([loadReview(), loadReadme()]);
+  renderExports();
+  const frame = $("comp");
+  if (!p.composition) {
+    frame.hidden = true; frame.removeAttribute("src"); $("transport").hidden = true; $("empty").hidden = false;
+    $("empty").innerHTML = `No composition yet.<br><span class="muted">Read the storyboard on the right. After you approve it, Claude builds <code>composition/index.html</code>.</span>`;
+    return;
+  }
+  const t = keepT ? S.t : 0;
+  $("empty").hidden = false; $("empty").textContent = "Loading…";
+  // Load exactly as core/render.mjs does: laid out (never display:none) in a 1080×1920 viewport, then resized to
+  // the composition's size. Code that measures layout at load (line splitting, fitting) runs the same way as in a render.
+  frame.hidden = false; frame.classList.add("loading");
+  frame.style.width = "1080px"; frame.style.height = "1920px";
+  frame.src = `${p.composition}?render=1&desk=${Date.now()}`;
+  frame.onload = async () => {
+    try {
+      S.win = frame.contentWindow;
+      await S.win.__ready;
+      S.meta = S.win.__meta();
+      frame.style.width = S.meta.width + "px"; frame.style.height = S.meta.height + "px";
+      fit(); frame.classList.remove("loading"); $("empty").hidden = true; $("transport").hidden = false;
+      setSafe($("safe").checked);
+      renderNotes();
+      await seek(Math.min(t, S.meta.duration - 1 / S.meta.fps));
+    } catch (e) {
+      $("empty").hidden = false; $("empty").innerHTML = `Composition failed to load.<br><span class="muted">${esc(e.message || e)}</span>`;
+    }
+  };
+}
+
+function fit() {
+  if (!S.meta) return;
+  const box = $("stageWrap").getBoundingClientRect();
+  const k = Math.min((box.width - 32) / S.meta.width, (box.height - 32) / S.meta.height);
+  $("comp").style.transform = `scale(${k}) translate(-50%, -50%)`;
+}
+addEventListener("resize", fit);
+
+// ---------- clock ----------
+const frameOf = (t) => Math.round(t * S.meta.fps);
+async function seek(t) {
+  if (!S.win || !S.meta) return;
+  S.t = Math.max(0, Math.min(t, S.meta.duration));
+  drawHead();
+  if (S.busy) return; // the next tick or the trailing seek below catches up
+  S.busy = true;
+  let done;
+  do { done = S.t; await S.win.__seek(done); } while (done !== S.t && !S.playing);
+  S.busy = false;
+  reportState();
+}
+function drawHead() {
+  const k = S.t / S.meta.duration;
+  $("head").style.left = k * 100 + "%";
+  $("fill").style.width = k * 100 + "%";
+  $("time").textContent = `${S.t.toFixed(2)} s · f${frameOf(S.t)}`;
+  $("noteAt").textContent = `at ${S.t.toFixed(2)} s (frame ${frameOf(S.t)})`;
+}
+let t0 = 0;
+function play() {
+  if (!S.meta) return;
+  S.playing = true; $("play").textContent = "❚❚";
+  if (S.t >= S.meta.duration - 1 / S.meta.fps) S.t = 0;
+  t0 = performance.now() - S.t * 1000;
+  const tick = async () => {
+    if (!S.playing) return;
+    if (!S.busy) await seek(((performance.now() - t0) / 1000) % S.meta.duration);
+    requestAnimationFrame(tick);
+  };
+  tick();
+}
+function pause() { S.playing = false; $("play").textContent = "▶"; }
+const step = (n) => { pause(); seek((frameOf(S.t) + n) / S.meta.fps); };
+$("play").onclick = () => (S.playing ? pause() : play());
+$("prev").onclick = () => step(-1);
+$("next").onclick = () => step(1);
+
+const scrub = $("scrub");
+const scrubTo = (e) => { const r = scrub.getBoundingClientRect(); seek(((e.clientX - r.left) / r.width) * S.meta.duration); };
+scrub.onpointerdown = (e) => {
+  if (e.target.classList.contains("m")) return;
+  pause(); scrub.setPointerCapture(e.pointerId); scrubTo(e);
+  scrub.onpointermove = scrubTo;
+  scrub.onpointerup = () => { scrub.onpointermove = null; };
+};
+
+function setSafe(on) { S.win?.document.documentElement.classList.toggle("show-safe", on); }
+$("safe").onchange = (e) => setSafe(e.target.checked);
+
+addEventListener("keydown", (e) => {
+  if (e.target.matches("input, textarea") || !S.meta) return;
+  if (e.key === " ") { e.preventDefault(); S.playing ? pause() : play(); }
+  else if (e.key === "ArrowLeft") step(e.shiftKey ? -S.meta.fps : -1);
+  else if (e.key === "ArrowRight") step(e.shiftKey ? S.meta.fps : 1);
+  else if (e.key === "Home") { pause(); seek(0); }
+  else if (e.key.toLowerCase() === "s") { $("safe").checked = !$("safe").checked; setSafe($("safe").checked); }
+  else if (e.key.toLowerCase() === "n") { e.preventDefault(); tab("notes"); pause(); $("noteText").focus(); }
+});
+
+let stateTimer;
+function reportState() {
+  clearTimeout(stateTimer);
+  stateTimer = setTimeout(() => api("/api/state", { method: "POST",
+    body: { production: S.prod?.id, t: +S.t.toFixed(3), frame: S.meta ? frameOf(S.t) : 0, playing: S.playing } }).catch(() => {}), 400);
+}
+
+// ---------- tabs ----------
+function tab(name) {
+  document.querySelectorAll(".tabs button").forEach((b) => b.classList.toggle("on", b.dataset.tab === name));
+  document.querySelectorAll(".tab").forEach((t) => (t.hidden = t.dataset.tab !== name));
+}
+document.querySelector(".tabs").onclick = (e) => { const b = e.target.closest("button"); if (b) tab(b.dataset.tab); };
+
+// ---------- notes ----------
+async function loadReview() {
+  S.review = await api(`/api/review?p=${encodeURIComponent(S.prod.id)}`);
+  renderNotes();
+}
+function renderNotes() {
+  const notes = S.review.notes.slice().sort((a, b) => a.t - b.t);
+  const open = notes.filter((n) => n.status === "open");
+  $("noteCount").textContent = open.length || "";
+  const shown = notes.filter((n) => S.noteFilter === "all" || n.status === S.noteFilter);
+  $("notes").innerHTML = shown.map((n) => `<li class="note ${n.status}" data-id="${n.id}">
+    <div class="h"><a data-t="${n.t}">${n.t.toFixed(2)} s</a> #${n.id} · ${n.by}<span class="sp"></span>
+      ${n.status === "open" ? `<button data-act="closed" title="Close without a change">Close</button>` : ""}
+      ${n.status === "fixed" ? `<button data-act="closed" title="Checked, looks right">✓ OK</button><button data-act="open">Reopen</button>` : ""}
+      ${n.status === "closed" ? `<button data-act="open">Reopen</button>` : ""}
+      <button data-act="delete" title="Delete">✕</button></div>
+    <p>${esc(n.text)}</p>${n.reply ? `<div class="reply">Claude: ${esc(n.reply)}</div>` : ""}</li>`).join("")
+    || `<li class="muted small">${S.noteFilter === "open" ? "No open notes. Scrub to a frame and pin one." : "Nothing here."}</li>`;
+  $("marks").innerHTML = S.meta ? notes.filter((n) => n.status !== "closed").map((n) =>
+    `<span class="m ${n.status}" style="left:${(n.t / S.meta.duration) * 100}%" data-t="${n.t}" title="#${n.id} ${esc(n.text)}"></span>`).join("") : "";
+  $("sendNotes").disabled = !open.length;
+}
+$("marks").onclick = (e) => { if (e.target.dataset.t) { pause(); seek(+e.target.dataset.t); } };
+$("noteFilter").onclick = (e) => {
+  const b = e.target.closest("button"); if (!b) return;
+  S.noteFilter = b.dataset.f;
+  $("noteFilter").querySelectorAll("button").forEach((x) => x.classList.toggle("on", x === b));
+  renderNotes();
+};
+$("notes").onclick = async (e) => {
+  if (e.target.dataset.t) { pause(); return seek(+e.target.dataset.t); }
+  const act = e.target.dataset.act; if (!act) return;
+  const id = e.target.closest(".note").dataset.id;
+  const p = encodeURIComponent(S.prod.id);
+  if (act === "delete") await api(`/api/notes/${id}?p=${p}`, { method: "DELETE" });
+  else await api(`/api/notes/${id}?p=${p}`, { method: "PATCH", body: { status: act } });
+  await refreshCounts();
+};
+$("noteForm").onsubmit = async (e) => {
+  e.preventDefault();
+  const text = $("noteText").value.trim(); if (!text) return;
+  await api(`/api/notes?p=${encodeURIComponent(S.prod.id)}`, { method: "POST", body: { t: S.t, text } });
+  $("noteText").value = "";
+  await refreshCounts();
+};
+$("noteText").onkeydown = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); $("noteForm").requestSubmit(); } };
+async function refreshCounts() {
+  await loadReview();
+  S.list = await api("/api/productions");
+  S.prod = S.list.find((x) => x.id === S.prod.id);
+  renderList(); renderApprovals();
+}
+
+// ---------- jobs (renders, Claude) ----------
+function follow(job, logEl, onDone) {
+  logEl.textContent = "";
+  const es = new EventSource(`/api/jobs/${job.id}/events`);
+  es.onmessage = (m) => {
+    const ev = JSON.parse(m.data);
+    if (ev.line !== undefined) { logEl.textContent += ev.line + "\n"; logEl.scrollTop = logEl.scrollHeight; }
+    if (ev.done) { es.close(); onDone(ev); }
+  };
+  es.onerror = () => { es.close(); onDone({ code: -1 }); };
+}
+function busy(on, text = "") { $("status").textContent = text; document.body.classList.toggle("busy", on); }
+
+async function sendToClaude(request, withNotes) {
+  const openIds = S.review.notes.filter((n) => n.status === "open").map((n) => n.id);
+  tab("claude");
+  try {
+    const job = await api(`/api/claude?p=${encodeURIComponent(S.prod.id)}`, { method: "POST",
+      body: { notes: withNotes ? openIds : [-1], request } });
+    $("sendAsk").disabled = $("sendNotes").disabled = true; $("stopClaude").hidden = false;
+    busy(true, "Claude is working…");
+    $("stopClaude").onclick = () => api(`/api/jobs/${job.id}/stop`, { method: "POST" });
+    follow(job, $("claudeLog"), async (ev) => {
+      $("sendAsk").disabled = false; $("stopClaude").hidden = true;
+      busy(false, ev.code === 0 ? "Claude finished. Reloaded the composition." : `Claude stopped (exit ${ev.code}).`);
+      await refreshCounts();
+      await open(S.prod.id, true);
+    });
+  } catch (e) { $("claudeLog").textContent = e.message; }
+}
+$("sendNotes").onclick = () => sendToClaude("", true);
+$("sendAsk").onclick = () => sendToClaude($("ask").value, $("withNotes").checked);
+
+async function render(kind) {
+  const out = $("renderOut");
+  out.innerHTML = "";
+  try {
+    const job = await api(`/api/render?p=${encodeURIComponent(S.prod.id)}`, { method: "POST",
+      body: { kind, t: +S.t.toFixed(3), safe: $("safe").checked } });
+    ["rStill", "rVideo", "rQa"].forEach((id) => ($(id).disabled = true));
+    busy(true, `Rendering ${kind}…`);
+    follow(job, $("renderLog"), (ev) => {
+      ["rStill", "rVideo", "rQa"].forEach((id) => ($(id).disabled = false));
+      busy(false, ev.code === 0 ? `${kind} done` : `${kind} failed (exit ${ev.code})`);
+      if (ev.code !== 0) return;
+      const url = `${ev.file}?v=${Date.now()}`;
+      if (kind === "still") out.innerHTML = `<a href="${url}" target="_blank"><img src="${url}" alt="Rendered still"></a>`;
+      if (kind === "video") out.innerHTML = `<video src="${url}" controls muted></video>`;
+      if (kind === "qa") out.innerHTML = `<a href="${url}" target="_blank">Open the QA report</a>`;
+    });
+  } catch (e) { $("renderLog").textContent = e.message; }
+}
+$("rStill").onclick = () => render("still");
+$("rVideo").onclick = () => render("video");
+$("rQa").onclick = () => render("qa");
+
+function renderExports() {
+  $("exports").innerHTML = S.prod.exports.map((u) => `<li><a href="${esc(u)}" target="_blank">${esc(u.split("/").pop())}</a></li>`).join("")
+    || `<li class="muted small">No exports yet.</li>`;
+  renderApprovals();
+}
+
+// ---------- approvals (people only) ----------
+$("approver").value = store.get("desk.name") || "";
+$("approver").onchange = (e) => store.set("desk.name", e.target.value);
+function renderApprovals() {
+  $("approvals").innerHTML = (S.review?.approvals || []).map((a) =>
+    `<li>✓ ${a.stage === "final" ? "Final cut" : "Storyboard"} approved by ${esc(a.by)}, ${a.at.slice(0, 10)}</li>`).join("");
+}
+async function approveStage(stage) {
+  const by = $("approver").value.trim();
+  if (!by) { $("approver").focus(); return; }
+  if (!confirm(`Approve the ${stage === "final" ? "final cut" : "storyboard"} of ${S.prod.title} as ${by}? This ticks the box in its README.`)) return;
+  await api(`/api/approve?p=${encodeURIComponent(S.prod.id)}`, { method: "POST", body: { stage, by } });
+  await refreshCounts(); await loadReadme();
+}
+$("okBoard").onclick = () => approveStage("storyboard");
+$("okFinal").onclick = () => approveStage("final");
+
+// ---------- storyboard (README) ----------
+async function loadReadme() {
+  $("readme").innerHTML = md(await api(`/api/readme?p=${encodeURIComponent(S.prod.id)}`));
+}
+function inline(s) {
+  return esc(s).replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
+    .replace(/\*([^*]+)\*/g, "<i>$1</i>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1");
+}
+function md(src) {
+  const out = [], lines = src.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const l = lines[i];
+    if (/^```/.test(l)) { const buf = []; while (++i < lines.length && !/^```/.test(lines[i])) buf.push(esc(lines[i])); out.push(`<pre>${buf.join("\n")}</pre>`); }
+    else if (/^#{1,4} /.test(l)) { const n = l.match(/^#+/)[0].length; out.push(`<h${n}>${inline(l.slice(n + 1))}</h${n}>`); }
+    else if (/^\|/.test(l)) {
+      const rows = []; for (; i < lines.length && /^\|/.test(lines[i]); i++) rows.push(lines[i]); i--;
+      const cells = (r) => r.replace(/^\||\|$/g, "").split("|").map((c) => inline(c.trim()));
+      const body = rows.filter((r) => !/^\|[\s:|-]+\|$/.test(r));
+      out.push(`<table>${body.map((r, k) => `<tr>${cells(r).map((c) => (k ? `<td>${c}</td>` : `<th>${c}</th>`)).join("")}</tr>`).join("")}</table>`);
+    }
+    else if (/^> ?/.test(l)) out.push(`<blockquote>${inline(l.replace(/^> ?/, ""))}</blockquote>`);
+    else if (/^\s*- /.test(l)) out.push(`<div>• ${inline(l.replace(/^\s*- /, "").replace(/^\[x\]/, "☑").replace(/^\[ \]/, "☐"))}</div>`);
+    else if (l.trim()) out.push(`<p>${inline(l)}</p>`);
+  }
+  return out.join("\n");
+}
+
+// ---------- start ----------
+await loadList();
+const want = decodeURIComponent(location.hash.slice(1)) || store.get("desk.prod");
+if (want && S.list.some((p) => p.id === want)) open(want);
+addEventListener("hashchange", () => {
+  const id = decodeURIComponent(location.hash.slice(1));
+  if (id !== S.prod?.id && S.list.some((p) => p.id === id)) open(id);
+});

package/desk/desk.css

@@ -0,0 +1,120 @@
+:root {
+  --bg: #f4f3ef; --surface: #ffffff; --sunk: #eceae4; --line: #dcd9d1; --ink: #1d1c1a; --muted: #6f6c65;
+  --accent: #d9481f; --accent-ink: #fff; --ok: #2f7d4f; --warn: #a86a00; --stage: #16161a;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #121214; --surface: #1b1b1f; --sunk: #232328; --line: #303036; --ink: #ecebe8; --muted: #9a978f;
+    --accent: #ff6a3d; --accent-ink: #160a05; --ok: #59c184; --warn: #e0a640; --stage: #0a0a0c;
+    color-scheme: dark;
+  }
+}
+:root[data-theme="dark"] {
+  --bg: #121214; --surface: #1b1b1f; --sunk: #232328; --line: #303036; --ink: #ecebe8; --muted: #9a978f;
+  --accent: #ff6a3d; --accent-ink: #160a05; --ok: #59c184; --warn: #e0a640; --stage: #0a0a0c;
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { margin: 0; height: 100%; }
+body { background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; }
+button, input, textarea { font: inherit; color: inherit; }
+button { background: var(--sunk); border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px; cursor: pointer; }
+button:hover { border-color: var(--muted); }
+button:disabled { opacity: .5; cursor: default; }
+button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
+button.wide { width: 100%; margin-top: 10px; }
+input, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; width: 100%; }
+textarea { resize: vertical; }
+code, .mono { font-family: var(--mono); font-size: 12px; }
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
+.wrap { flex-wrap: wrap; }
+h4 { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+
+.top { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
+.brand { font-weight: 700; white-space: nowrap; }
+.logo { color: var(--accent); }
+.crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.status { font-size: 12px; color: var(--muted); white-space: nowrap; }
+
+.shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr 360px; }
+.side { border-right: 1px solid var(--line); padding: 12px; overflow: auto; }
+.filter { margin-bottom: 10px; }
+.plist { list-style: none; margin: 0; padding: 0; }
+.plist .brandname { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 4px 4px; }
+.plist button { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; padding: 7px 8px; }
+.plist button.on { background: var(--surface); border-color: var(--line); }
+.plist .t { display: block; font-weight: 600; font-size: 13px; }
+.plist .s { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
+.pill { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--sunk); color: var(--muted); }
+.pill.notes { background: var(--accent); color: var(--accent-ink); }
+.pill.ok { color: var(--ok); }
+
+.viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--stage); }
+.stage-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
+.stage-wrap iframe { position: absolute; left: 50%; top: 50%; border: 0; transform-origin: 0 0; background: #000; box-shadow: 0 6px 30px rgba(0,0,0,.4); }
+.stage-wrap iframe.loading { visibility: hidden; }
+.empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #cfcdc7; padding: 24px; }
+.empty .muted { color: #8c8a84; }
+.transport { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); }
+.icon { width: 34px; padding: 6px 0; }
+.time { width: 110px; text-align: right; color: var(--muted); }
+.toggle { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }
+.toggle input { width: auto; }
+.scrub { flex: 1; position: relative; height: 28px; cursor: pointer; touch-action: none; }
+.track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
+.fill { height: 100%; background: var(--muted); width: 0; }
+.head { position: absolute; top: 5px; width: 2px; height: 18px; background: var(--ink); transform: translateX(-1px); pointer-events: none; }
+.marks .m { position: absolute; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translateX(-4px); border: 2px solid var(--surface); }
+.marks .m.fixed { background: var(--ok); }
+
+.panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
+.tabs { display: flex; border-bottom: 1px solid var(--line); }
+.tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 4px; color: var(--muted); }
+.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
+.count { font-size: 10px; background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 0 6px; }
+.count:empty { display: none; }
+.tab { padding: 12px; overflow: auto; flex: 1; }
+.noteform { display: grid; gap: 6px; }
+.at { color: var(--accent); }
+.seg { display: flex; margin: 12px 0 8px; }
+.seg button { flex: 1; border-radius: 0; font-size: 12px; padding: 4px; }
+.seg button:first-child { border-radius: 7px 0 0 7px; }
+.seg button:last-child { border-radius: 0 7px 7px 0; }
+.seg button.on { background: var(--ink); color: var(--surface); }
+.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.note { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
+.note .h { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
+.note .h a { color: var(--accent); cursor: pointer; font-family: var(--mono); }
+.note .h .sp { flex: 1; }
+.note .h button { padding: 1px 6px; font-size: 11px; }
+.note p { margin: 4px 0 0; }
+.note .reply { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--ok); color: var(--muted); font-size: 13px; }
+.note.fixed { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
+.note.closed { opacity: .6; }
+.log { background: var(--sunk); border-radius: 8px; padding: 10px; font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; margin: 10px 0 0; }
+.log:empty { display: none; }
+.renderout img { max-width: 100%; border-radius: 6px; margin-top: 8px; }
+.renderout video { max-width: 100%; margin-top: 8px; }
+.exports, .approvals { list-style: none; padding: 0; margin: 0; font-size: 13px; }
+.exports a { color: var(--accent); }
+.approvals li { color: var(--ok); }
+
+.md { font-size: 13px; }
+.md h1 { font-size: 17px; } .md h2 { font-size: 15px; margin-top: 18px; } .md h3 { font-size: 14px; }
+.md table { border-collapse: collapse; width: 100%; font-size: 12px; display: block; overflow-x: auto; }
+.md td, .md th { border: 1px solid var(--line); padding: 4px 6px; vertical-align: top; }
+.md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
+.md pre { background: var(--sunk); padding: 8px; border-radius: 6px; overflow: auto; }
+
+@media (max-width: 1000px) {
+  .shell { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; }
+  .side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 30vh; }
+  .panel { border-left: 0; border-top: 1px solid var(--line); }
+  .crumb { display: none; }
+}

package/desk/index.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Reel Studio Desk</title>
+<link rel="stylesheet" href="/desk/desk.css">
+</head>
+<body>
+<header class="top">
+  <div class="brand"><span class="logo">●</span> Reel Studio <span class="muted">desk</span></div>
+  <div class="crumb" id="crumb">Pick a production</div>
+  <div class="status" id="status"></div>
+</header>
+
+<main class="shell">
+  <nav class="side">
+    <input id="filter" class="filter" placeholder="Filter productions" autocomplete="off">
+    <ul id="productions" class="plist"></ul>
+  </nav>
+
+  <section class="viewer">
+    <div class="stage-wrap" id="stageWrap">
+      <div class="empty" id="empty">Pick a production on the left.<br><span class="muted">Compositions play here, frame-exact, through the same clock the renderer uses.</span></div>
+      <iframe id="comp" title="Composition" hidden></iframe>
+    </div>
+    <div class="transport" id="transport" hidden>
+      <button id="play" class="icon" title="Play / pause (space)">▶</button>
+      <button id="prev" class="icon" title="Previous frame (←)">‹</button>
+      <button id="next" class="icon" title="Next frame (→)">›</button>
+      <div class="scrub" id="scrub">
+        <div class="track"><div class="fill" id="fill"></div></div>
+        <div class="marks" id="marks"></div>
+        <div class="head" id="head"></div>
+      </div>
+      <div class="time mono" id="time">0.00 s · f0</div>
+      <label class="toggle" title="Safe zones (S)"><input type="checkbox" id="safe"> Safe</label>
+    </div>
+  </section>
+
+  <aside class="panel" id="panel" hidden>
+    <div class="tabs" role="tablist">
+      <button role="tab" data-tab="notes" class="on">Notes <span class="count" id="noteCount"></span></button>
+      <button role="tab" data-tab="claude">Claude</button>
+      <button role="tab" data-tab="render">Render</button>
+      <button role="tab" data-tab="board">Storyboard</button>
+    </div>
+
+    <div class="tab" data-tab="notes">
+      <form id="noteForm" class="noteform">
+        <div class="at mono" id="noteAt">at 0.00 s</div>
+        <textarea id="noteText" rows="2" placeholder="What should change on this frame? (N)"></textarea>
+        <button class="primary">Pin note</button>
+      </form>
+      <div class="seg" id="noteFilter">
+        <button data-f="open" class="on">Open</button><button data-f="fixed">Fixed</button><button data-f="all">All</button>
+      </div>
+      <ul class="notes" id="notes"></ul>
+      <button class="primary wide" id="sendNotes">Send open notes to Claude</button>
+    </div>
+
+    <div class="tab" data-tab="claude" hidden>
+      <p class="muted small">Runs your local Claude Code (<code>claude -p</code>) on this production with your existing login, no API key.
+        It may read and edit files, render stills and run QA, nothing else. It keeps one session per production.</p>
+      <textarea id="ask" rows="3" placeholder="Ask for a change, e.g. “make the end card hold 0.5 s longer”"></textarea>
+      <label class="small"><input type="checkbox" id="withNotes" checked> Include open notes</label>
+      <div class="row">
+        <button class="primary" id="sendAsk">Send to Claude</button>
+        <button id="stopClaude" hidden>Stop</button>
+      </div>
+      <pre class="log" id="claudeLog"></pre>
+    </div>
+
+    <div class="tab" data-tab="render" hidden>
+      <p class="muted small">Desk renders go to <code>qa/desk/</code> so a delivered export is never overwritten.</p>
+      <div class="row wrap">
+        <button id="rStill">Still at this frame</button>
+        <button id="rVideo">Preview video</button>
+        <button id="rQa">QA the preview</button>
+      </div>
+      <div id="renderOut" class="renderout"></div>
+      <pre class="log" id="renderLog"></pre>
+      <h4>Exports</h4>
+      <ul class="exports" id="exports"></ul>
+      <h4>Approve</h4>
+      <p class="muted small">Approvals are yours alone. Claude can't record them.</p>
+      <input id="approver" placeholder="Your name" autocomplete="name">
+      <div class="row wrap">
+        <button id="okBoard">Approve storyboard</button>
+        <button id="okFinal">Approve final cut</button>
+      </div>
+      <ul class="approvals" id="approvals"></ul>
+    </div>
+
+    <div class="tab board" data-tab="board" hidden>
+      <div id="readme" class="md"></div>
+    </div>
+  </aside>
+</main>
+<script type="module" src="/desk/app.js"></script>
+</body>
+</html>