kasaframe 0.0.0-stage → 0.1.1

package/app/web/main.ts

@@ -0,0 +1,1013 @@
+// 작업실 화면 — 엔진 서버의 /api 만 쓴다. 상태는 서버가 갖고, 여기는 받은 것을 그린다.
+// <link> 로 걸면 Vite 가 고친 CSS 를 옛것으로 내준다 — 모듈로 가져와야 감시·HMR 을 탄다
+import "./style.css";
+import { icon, type IconName } from "./icons.ts";
+
+type Purpose = "promo" | "shorts" | "explainer" | "launch" | "demo" | "ad" | "square" | "mv";
+type Choice = Purpose | "auto";
+type Step = "purpose" | "theme" | "input" | "plan" | "job";
+interface Scene { id: string; role: string; from: number; dur: number; idea: string; assets?: string[] }
+interface Plan {
+  request: string; purpose: Purpose; confidence: number; alternatives: { purpose: Purpose; p: number }[]; reasons: string[];
+  title: string; aspect: string; width: number; height: number; duration: number; style: string; music: string | null;
+  captions: string; deliverables: string[]; scenes: Scene[]; gen: { id: string; kind: string; scene?: string; seam?: boolean }[];
+  questions?: { id: string; ask: string; choices: string[] }[];
+}
+interface Job {
+  id: string; input: { request: string; purpose?: Choice; music?: string; model?: string; assets?: string[] }; dir: string; phase: string; progress: number;
+  running: boolean; createdAt: number; previewUrl?: string; error?: string; checkPassed?: boolean;
+  plan?: Plan; kf?: { width: number; height: number; scenes: Scene[]; captions?: string }; files: { video?: string; cover?: string; check?: string; alt?: string; captions?: string };
+}
+interface Template {
+  id: Purpose; label: string; summary?: string; aspect: string; width?: number; height?: number;
+  duration: { min: number; max: number; default: number; allowed?: number[] };
+  music: "required" | "optional" | "none"; captions?: string; deliverables?: string[]; still?: string | null;
+}
+interface Track { name: string; path: string; url?: string }
+// SPEC 9번 테마 팩. aspect 는 배열이면 첫째가 견본 화면비
+interface Theme { id: string; name: string; metaphor?: string; status: string; still?: string | null; sample?: string | null; purposes?: string[]; aspect?: string | string[] }
+interface Asset { name: string; path: string; kind: "image" | "video"; size?: number; url?: string }
+
+const MODELS = [
+  { id: "anthropic/claude-opus-5-5", name: "Claude Opus 5.5", by: "Anthropic" },
+  { id: "anthropic/claude-sonnet-5-5", name: "Claude Sonnet 5.5", by: "Anthropic" },
+  { id: "deepseek/deepseek-v4-pro", name: "DeepSeek V4 Pro", by: "DeepSeek" },
+  { id: "openai/gpt-5.6", name: "GPT-5.6", by: "OpenAI" },
+  { id: "z-ai/glm-5.3", name: "GLM 5.3", by: "Z.ai" },
+];
+const EXAMPLES: Partial<Record<Choice, string>> = {
+  auto: "카사텀 홍보 영상 1분, 카와이 퓨처베이스",
+  promo: "카사텀 홍보 영상 1분, 카와이 퓨처베이스",
+  shorts: "OG 쇼츠 — MLA 가 뭔지 45초",
+  explainer: "어텐션이 어떻게 도는지 90초",
+  launch: "kasaframe 공개 영상 45초",
+  demo: "kf new 부터 렌더까지 시연 1분",
+  ad: "카사텀 범퍼 광고 15초",
+  square: "카사텀 기능 셋 피드 30초",
+  mv: "카와이 퓨처베이스 뮤비 3분",
+};
+const STEPS: [Step, string][] = [["purpose", "용도"], ["theme", "테마"], ["input", "재료"], ["plan", "계획"], ["job", "만들기"]];
+const PHASES: [string, string][] = [["plan", "판별"], ["scaffold", "뼈대"], ["gen", "생성"], ["scenes", "장면"], ["render", "렌더"], ["check", "검사"], ["done", "끝"]];
+const CAPTIONS: Record<string, string> = { off: "트랙만(srt·vtt)", on: "화면 자막 + 트랙", none: "자막 없음", track: "트랙만(srt·vtt)", burned: "화면 자막 + 트랙" };
+// 옛 이름(track·burned)까지 — @kasaframe/motion/captions 의 captionMode 와 같은 뜻
+const capMode = (v?: string) => (v === "on" || v === "fit" || v === "burned" ? "on" : v === "off" || v === "track" ? "off" : "none");
+// 길이 막대는 모든 틀이 같은 눈금이어야 서로 견줘진다. 6초 범퍼와 5분 뮤비가 한 줄에 서도록 로그 눈금
+const RANGE_MIN = 5;
+let rangeMax = 300;
+const rangePos = (v: number) => Math.log(Math.max(v, RANGE_MIN) / RANGE_MIN) / Math.log(rangeMax / RANGE_MIN);
+const span = (min: number, max: number) =>
+  min >= 60 && min % 60 === 0 && max % 60 === 0 ? `${min / 60}–${max / 60}분` : `${min}–${max}초`;
+
+type Kid = Node | string | null | undefined | false;
+function h<K extends keyof HTMLElementTagNameMap>(tag: K, props: Record<string, unknown> = {}, ...kids: Kid[]): HTMLElementTagNameMap[K] {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(props)) {
+    if (v === undefined || v === null || v === false) continue;
+    if (k.startsWith("on") && typeof v === "function") el.addEventListener(k.slice(2), v as EventListener);
+    else if (k === "class") el.className = String(v);
+    else if (k in el && k !== "list" && k !== "style") (el as unknown as Record<string, unknown>)[k] = v;
+    else el.setAttribute(k, String(v));
+  }
+  for (const c of kids) if (c !== null && c !== undefined && c !== false) el.append(c);
+  return el;
+}
+const $ = <T extends HTMLElement>(sel: string) => document.querySelector(sel) as T;
+
+async function api<T>(path: string, init?: RequestInit): Promise<T> {
+  const r = await fetch(path, { ...init, headers: { "content-type": "application/json", ...(init?.headers ?? {}) } });
+  const j = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error((j as { error?: string }).error ?? r.statusText);
+  return j as T;
+}
+
+const sec = (x: number) => `${+x.toFixed(x < 10 ? 2 : 1)}초`;
+const ratio = (aspect: string) => {
+  const [w, hh] = aspect.split(":").map(Number);
+  return { w: w || 16, h: hh || 9 };
+};
+const iconLabel = (name: IconName, text: string, size?: number) => [icon(name, size), h("span", {}, text)];
+
+// ---- 고른 것 — 새로 고쳐도 남게 세션에 둔다
+
+// 시험은 Opus 로 하고 만족하면 DeepSeek 로 내린다 — 사람이 직접 고르기 전에는 기본값을 따른다
+// theme 은 테마 id 거나 "auto". auto 면 계획 단계에서 모델이 낸 후보 셋 중 하나를 themePick 에 고른다
+// captions 가 "" 면 틀 기본을 따른다
+interface Draft { purpose: Choice | null; theme: string | null; themePick: string | null; request: string; music: string; model: string; modelPicked: boolean; assets: string[]; approve: boolean; captions: "" | "on" | "off" }
+const D: Draft = { purpose: null, theme: null, themePick: null, request: "", music: "", model: MODELS[0].id, modelPicked: false, assets: [], approve: false, captions: "", ...JSON.parse(sessionStorage.getItem("kf-draft") ?? "{}") };
+if (!D.modelPicked) D.model = MODELS[0].id;
+const save = () => sessionStorage.setItem("kf-draft", JSON.stringify(D));
+
+let templates: Template[] = [];
+// null 이면 서버에 테마 목록이 아직 없다 — 테마 단계는 「자동」만 낸다
+let themes: Theme[] | null = null;
+// draft 까지 — 테마 늘리기 칸에서만 쓴다(만드는 중인 테마의 견본 굽기)
+let themesAll: Theme[] = [];
+let suggest: { key: string; ids: string[]; loading: boolean } | null = null;
+let tracks: Track[] = [];
+let assets: Asset[] = [];
+let plan: Plan | null = null;
+let planKey = "";
+let current: Job | null = null;
+let stream: EventSource | null = null;
+let logLines: string[] = [];
+let error = "";
+
+const tpl = (id: Choice | null | undefined) => templates.find((t) => t.id === id);
+
+// ---- 길
+
+function readUrl(): { step: Step; job: string | null } {
+  const q = new URLSearchParams(location.search);
+  const job = q.get("job");
+  if (job) return { step: "job", job };
+  const step = q.get("step") as Step | null;
+  return { step: step && STEPS.some(([s]) => s === step) && step !== "job" ? step : "purpose", job: null };
+}
+
+function go(step: Step, o: { job?: string; replace?: boolean } = {}): void {
+  const q = new URLSearchParams();
+  if (step === "job" && o.job) q.set("job", o.job);
+  else if (step !== "purpose") q.set("step", step);
+  const url = q.size ? `/?${q}` : "/";
+  if (url !== location.pathname + location.search) history[o.replace ? "replaceState" : "pushState"](null, "", url);
+  error = "";
+  render();
+  window.scrollTo({ top: 0 });
+}
+window.addEventListener("popstate", () => render());
+
+function reachable(step: Step): boolean {
+  if (step === "purpose") return true;
+  if (step === "theme") return !!D.purpose;
+  if (step === "input") return !!D.purpose && !!D.theme;
+  if (step === "plan") return !!D.purpose && !!D.theme && !!D.request.trim();
+  return !!current;
+}
+
+function render(): void {
+  const { step, job } = readUrl();
+  if (step !== "job" && !reachable(step)) {
+    const back = (["input", "theme", "purpose"] as Step[]).find((s) => reachable(s)) ?? "purpose";
+    return go(back, { replace: true });
+  }
+  renderRail(step);
+  const view = $<HTMLElement>("#view");
+  if (step === "job") {
+    if (job && current?.id !== job) follow(job);
+    renderJob();
+    return;
+  }
+  stream?.close();
+  stream = null;
+  const pane = step === "purpose" ? viewPurpose() : step === "theme" ? viewTheme() : step === "input" ? viewInput() : viewPlan();
+  view.replaceChildren(...(error ? [h("p", { class: "banner", role: "alert" }, icon("warn"), error)] : []), pane);
+}
+
+function renderRail(step: Step): void {
+  const at = STEPS.findIndex(([s]) => s === step);
+  $<HTMLElement>("#rail").replaceChildren(
+    ...STEPS.map(([s, label], i) =>
+      h("button", {
+        type: "button", class: "rail-step", disabled: !reachable(s) || s === step,
+        "aria-current": s === step ? "step" : undefined, "data-done": String(i < at),
+        onclick: () => (s === "job" && current ? go("job", { job: current.id }) : go(s)),
+      }, h("span", { class: "n" }, String(i + 1).padStart(2, "0")), h("span", { class: "t" }, label)),
+    ),
+  );
+}
+
+const head = (n: number, title: string, ...extra: Kid[]) =>
+  h("header", { class: "pane-head" }, h("span", { class: "n" }, String(n).padStart(2, "0")), h("h1", {}, title), ...extra);
+const pane = (step: Step, ...kids: Kid[]) => h("section", { class: "pane", "data-step": step }, ...kids);
+
+// ---- 01 용도
+
+function frame(t: Template | undefined, aspect: string): HTMLElement {
+  const { w, h: hh } = ratio(aspect);
+  const box = h("div", { class: "frame" });
+  box.style.aspectRatio = `${w} / ${hh}`;
+  box.dataset.shape = w > hh ? "wide" : w < hh ? "tall" : "square";
+  if (t?.still) {
+    const img = h("img", { src: t.still, alt: "", loading: "lazy", decoding: "async", width: w * 40, height: hh * 40 });
+    img.addEventListener("error", () => img.replaceWith(h("span", { class: "frame-ratio" }, aspect)));
+    box.append(img);
+  } else box.append(h("span", { class: "frame-ratio" }, aspect));
+  return box;
+}
+
+function autoFrame(): HTMLElement {
+  const t = document.createElement("template");
+  // 어느 화면비든 받는다는 뜻 — 세 틀을 겹쳐 그린다
+  t.innerHTML = `<svg class="auto-shapes" viewBox="0 0 120 96" aria-hidden="true">
+    <rect x="16" y="26" width="88" height="49.5" rx="3"/><rect x="42" y="12" width="36" height="64" rx="3"/><rect x="36" y="22" width="48" height="48" rx="3"/></svg>`;
+  return h("div", { class: "frame auto" }, t.content.firstChild as SVGElement);
+}
+
+function rangeBar(d: Template["duration"]): HTMLElement {
+  const pct = (v: number) => `${Math.min(1, rangePos(v)) * 100}%`;
+  const fill = h("span", { class: "fill" });
+  fill.style.left = pct(d.min);
+  fill.style.width = `calc(${pct(d.max)} - ${pct(d.min)})`;
+  return h("span", { class: "range", role: "img", "aria-label": span(d.min, d.max) }, fill,
+    ...(d.allowed ?? [d.default]).map((v) => {
+      const tick = h("span", { class: "tick" });
+      tick.style.left = pct(v);
+      return tick;
+    }));
+}
+
+function badges(t: Template): HTMLElement | null {
+  const out: Node[] = [];
+  if (t.music === "required") out.push(h("span", { class: "badge", title: "곡 필요", "aria-label": "곡 필요" }, icon("music", 14)));
+  if (capMode(t.captions) !== "none") out.push(h("span", { class: "badge", title: CAPTIONS[t.captions!], "aria-label": CAPTIONS[t.captions!] }, icon("caption", 14)));
+  return out.length ? h("span", { class: "badges" }, ...out) : null;
+}
+
+function kindCard(id: Choice, label: string, stage: HTMLElement, meta: string, range: HTMLElement, tags: Kid, title?: string): HTMLElement {
+  return h("button", {
+    class: "kind", type: "button", "aria-pressed": String(D.purpose === id), title,
+    onclick: () => {
+      D.purpose = id;
+      plan = null;
+      save();
+      go("theme");
+    },
+  },
+    h("span", { class: "kind-stage" }, stage, tags),
+    h("span", { class: "kind-body" },
+      h("span", { class: "kind-top" }, h("span", { class: "kind-name" }, label), h("span", { class: "kind-meta" }, meta)),
+      range),
+  );
+}
+
+function viewPurpose(): HTMLElement {
+  if (!templates.length) {
+    return pane("purpose", head(1, "용도"), h("div", { class: "kinds" }, ...Array.from({ length: 8 }, () => h("div", { class: "kind skeleton", "aria-hidden": "true" }))));
+  }
+  const all = { min: Math.min(...templates.map((t) => t.duration.min)), max: Math.max(...templates.map((t) => t.duration.max)), default: 0, allowed: [] };
+  return pane("purpose",
+    head(1, "용도"),
+    h("div", { class: "kinds" },
+      kindCard("auto", "자동", autoFrame(), "요청 글로", rangeBar(all), null),
+      ...templates.map((t) => kindCard(t.id, t.label, frame(t, t.aspect), `${t.aspect} · ${span(t.duration.min, t.duration.max)}`, rangeBar(t.duration), badges(t), t.summary)),
+    ),
+  );
+}
+
+// ---- 02 테마
+
+const themeOf = (id: string | null | undefined) => (id && id !== "auto" ? themes?.find((t) => t.id === id) : undefined);
+
+function autoSwatch(): SVGElement {
+  const t = document.createElement("template");
+  // 후보 셋을 겹쳐 그린다 — 「모델이 셋을 낸다」를 그림으로
+  t.innerHTML = `<svg class="auto-swatch" viewBox="0 0 160 90" aria-hidden="true">
+    <rect class="a" x="18" y="22" width="72" height="44" rx="5"/><rect class="b" x="44" y="14" width="72" height="44" rx="5"/><rect class="c" x="70" y="30" width="72" height="44" rx="5"/></svg>`;
+  return t.content.firstChild as SVGElement;
+}
+
+let sampleOn: HTMLElement | null = null;
+
+function stopSample(): void {
+  sampleOn?.querySelector("video")?.remove();
+  sampleOn?.querySelector(".theme-play")?.replaceChildren(icon("play", 16));
+  sampleOn = null;
+}
+
+function playSample(stage: HTMLElement, url: string): void {
+  if (sampleOn === stage) return;
+  stopSample();
+  const v = h("video", { src: url, muted: true, loop: true, playsInline: true, autoplay: true, preload: "auto" });
+  stage.append(v);
+  void v.play().catch(() => undefined);
+  stage.querySelector(".theme-play")?.replaceChildren(icon("pause", 16));
+  sampleOn = stage;
+}
+
+function pickTheme(id: string): void {
+  D.theme = id;
+  D.themePick = null;
+  plan = null;
+  save();
+  stopSample();
+  go("input");
+}
+
+function themeCard(t: Theme, onPick: () => void, pressed: boolean): HTMLElement {
+  const first = Array.isArray(t.aspect) ? t.aspect[0] : t.aspect;
+  const { w, h: hh } = ratio(first ?? "16:9");
+  const stage = h("span", { class: "theme-stage", "data-tall": String(hh > w) }, t.still ? h("img", { src: t.still, alt: "", loading: "lazy", decoding: "async", width: 320, height: 180 }) : h("span", { class: "frame-ratio" }, t.name));
+  if (t.sample) {
+    const url = t.sample;
+    stage.append(h("button", {
+      type: "button", class: "theme-play icon-btn", "aria-label": `${t.name} 견본 재생`,
+      onclick: (e: Event) => { e.stopPropagation(); sampleOn === stage ? stopSample() : playSample(stage, url); },
+    }, icon("play", 16)));
+  }
+  const card = h("article", { class: "theme" },
+    stage,
+    h("span", { class: "theme-body" },
+      h("button", { type: "button", class: "theme-pick", "aria-pressed": String(pressed), onclick: onPick },
+        h("span", { class: "theme-name" }, t.name), t.status !== "approved" ? h("span", { class: "review-tag" }, "검토 중") : null),
+      t.metaphor ? h("span", { class: "theme-meta" }, t.metaphor) : null),
+  );
+  // 마우스가 있는 기기는 올리기만 해도 견본이 돈다 — 폰은 재생 단추로
+  if (t.sample && matchMedia("(hover: hover)").matches) {
+    card.addEventListener("pointerenter", () => playSample(stage, t.sample!));
+    card.addEventListener("pointerleave", () => { if (sampleOn === stage) stopSample(); });
+  }
+  return card;
+}
+
+function autoThemeCard(): HTMLElement {
+  return h("article", { class: "theme" },
+    h("span", { class: "theme-stage auto" }, autoSwatch()),
+    h("span", { class: "theme-body" },
+      h("button", { type: "button", class: "theme-pick", "aria-pressed": String(D.theme === "auto"), onclick: () => pickTheme("auto") }, h("span", { class: "theme-name" }, "자동")),
+      h("span", { class: "theme-meta" }, "요청 글을 읽고 후보 셋")),
+  );
+}
+
+function viewTheme(): HTMLElement {
+  const fits = (t: Theme) => !t.purposes?.length || D.purpose === "auto" || t.purposes.includes(D.purpose ?? "");
+  // 지금 용도에 맞는 테마를 앞에 — 안 맞는 것도 지우지는 않는다
+  const order = (xs: Theme[]) => [...xs.filter(fits), ...xs.filter((t) => !fits(t))];
+  const approved = order((themes ?? []).filter((t) => t.status === "approved"));
+  const review = order((themes ?? []).filter((t) => t.status !== "approved"));
+  return pane("theme",
+    head(2, "테마", chosen(false)),
+    h("div", { class: "themes" }, autoThemeCard(), ...approved.map((t) => themeCard(t, () => pickTheme(t.id), D.theme === t.id))),
+    review.length
+      ? h("section", { class: "review" },
+          h("h2", {}, "검토 중", h("span", { class: "count" }, String(review.length))),
+          h("div", { class: "themes" }, ...review.map((t) => themeCard(t, () => pickTheme(t.id), D.theme === t.id))))
+      : null,
+    themeFactory(),
+    h("footer", { class: "foot" },
+      h("button", { type: "button", class: "ghost", onclick: () => go("purpose") }, ...iconLabel("back", "용도")),
+      D.theme ? h("button", { type: "button", class: "primary", onclick: () => go("input") }, h("span", {}, "재료"), icon("arrow")) : null),
+  );
+}
+
+// ---- 테마 늘리기 — 참고 자료로 뼈대·지시서를 만들고 그 지시서를 받을 세션 명령을 보여 준다(테마는 그 세션이 만든다).
+// 견본이 나오면 「검토 중」으로 올라오고, 승인은 사람이 견본을 보고 OK 할 때만
+
+interface Made { ok: boolean; command: string | null; log: string[] }
+const F = { id: "", name: "", like: "", threeD: false, refs: [] as { name: string; path: string }[], urls: "", made: null as Made | null, busy: false, error: "" };
+
+async function refreshThemes(): Promise<void> {
+  const th = await api<Theme[]>("/api/themes?all=1").catch(() => null);
+  themes = th?.filter((x) => x.status !== "draft") ?? null;
+  themesAll = th ?? [];
+  render();
+}
+
+async function makeTheme(): Promise<void> {
+  F.busy = true;
+  F.error = "";
+  render();
+  try {
+    const refs = [...F.refs.map((r) => r.path), ...F.urls.split(/\s+/).filter((u) => /^https?:\/\//.test(u))];
+    F.made = await api<Made>("/api/themes/new", { method: "POST", body: JSON.stringify({ id: F.id.trim(), name: F.name.trim() || undefined, like: F.like || undefined, threeD: F.threeD, refs }) });
+    if (!F.made.ok) F.error = F.made.log.slice(-4).join("\n");
+    await refreshThemes();
+  } catch (e) {
+    F.error = (e as Error).message;
+  } finally {
+    F.busy = false;
+    render();
+  }
+}
+
+const reviewing = new Set<string>();
+
+async function bakeSample(id: string): Promise<void> {
+  reviewing.add(id);
+  render();
+  await api(`/api/themes/${id}/review`, { method: "POST" }).catch((e: Error) => alert(e.message));
+  // 굽기는 몇 분 걸린다 — 끝날 때까지 몇 초마다 본다
+  for (;;) {
+    await new Promise((r) => setTimeout(r, 4000));
+    const st = await api<{ running: boolean; code: number | null; log: string[] }>(`/api/themes/${id}/review`).catch(() => null);
+    if (!st?.running) {
+      if (st && st.code !== 0) alert(`${id} 견본 굽기가 실패했다:\n${st.log.slice(-5).join("\n")}`);
+      break;
+    }
+  }
+  reviewing.delete(id);
+  await refreshThemes();
+}
+
+async function approveTheme(t: Theme): Promise<void> {
+  if (!confirm(`${t.name} — 사람이 견본을 보고 OK 했을 때만 승인한다. 승인할까?`)) return;
+  const r = await api<{ code: number; log: string[] }>(`/api/themes/${t.id}/approve`, { method: "POST" }).catch((e: Error) => ({ code: 1, log: [e.message] }));
+  if (r.code !== 0) alert(r.log.slice(-4).join("\n"));
+  await refreshThemes();
+}
+
+// 글을 칠 때마다 다시 그리면 입력 칸이 초점을 잃는다 — 만들기 단추만 바로 켜고 끈다
+function canMakeTheme(): boolean {
+  return /^[a-z0-9][a-z0-9-]*$/.test(F.id.trim()) && (F.refs.length > 0 || /https?:\/\//.test(F.urls)) && !F.busy;
+}
+function syncMake(): void {
+  const b = document.querySelector<HTMLButtonElement>(".factory .make");
+  if (b) b.disabled = !canMakeTheme();
+}
+
+function themeFactory(): HTMLElement {
+  const drafts = themesAll.filter((t) => t.status === "draft");
+  const review = themesAll.filter((t) => t.status === "review");
+  const row = (t: Theme, act: HTMLElement) => h("li", { class: "factory-row" }, h("span", { class: "theme-name" }, t.name), h("span", { class: "dim" }, t.id), act);
+  return h("details", { class: "factory", open: !!F.made || F.busy || undefined },
+    h("summary", {}, ...iconLabel("plus", "테마 늘리기", 16)),
+    h("p", { class: "dim" }, "참고 그림·영상·주소로 테마 뼈대와 지시서를 만든다. 테마는 아래 명령으로 연 세션이 만들고, 견본을 구우면 「검토 중」에 올라온다."),
+    h("div", { class: "factory-form" },
+      h("label", { class: "field" }, h("span", {}, "테마 id(영문 소문자·숫자·-)"), h("input", { value: F.id, placeholder: "glass-light", oninput: (e: Event) => { F.id = (e.target as HTMLInputElement).value; syncMake(); } })),
+      h("label", { class: "field" }, h("span", {}, "이름"), h("input", { value: F.name, placeholder: "유리·빛", oninput: (e: Event) => { F.name = (e.target as HTMLInputElement).value; } })),
+      h("label", { class: "field" }, h("span", {}, "비슷한 테마"),
+        h("select", { onchange: (e: Event) => { F.like = (e.target as HTMLSelectElement).value; } },
+          h("option", { value: "" }, "없음"), ...themesAll.map((t) => h("option", { value: t.id, selected: F.like === t.id }, t.name)))),
+      h("label", { class: "check" }, h("input", { type: "checkbox", checked: F.threeD, onchange: (e: Event) => { F.threeD = (e.target as HTMLInputElement).checked; } }), h("span", {}, "입체(3D)")),
+      h("label", { class: "field wide" }, h("span", {}, "참고 주소(줄마다 하나)"), h("textarea", { rows: 2, value: F.urls, placeholder: "https://…", oninput: (e: Event) => { F.urls = (e.target as HTMLTextAreaElement).value; syncMake(); } })),
+      h("div", { class: "wide" },
+        filePicker("참고 그림·영상 올리기", "image/*,video/*", true, async (fs) => {
+          for (const f of fs) F.refs.push(await upload(f));
+          render();
+        }),
+        F.refs.length ? h("p", { class: "dim" }, F.refs.map((r) => r.name).join(" · ")) : null),
+    ),
+    h("button", { type: "button", class: "primary make", disabled: !canMakeTheme(), onclick: makeTheme }, F.busy ? "만드는 중…" : "뼈대·지시서 만들기"),
+    F.error ? h("pre", { class: "factory-log" }, F.error) : null,
+    F.made?.command
+      ? h("div", { class: "factory-cmd" },
+          h("p", {}, "레포 뿌리에서 이 명령으로 세션을 연다:"),
+          h("code", {}, F.made.command),
+          h("button", { type: "button", class: "ghost", onclick: () => navigator.clipboard.writeText(F.made!.command!) }, ...iconLabel("copy", "복사", 16)))
+      : null,
+    drafts.length
+      ? h("section", {}, h("h3", {}, "만드는 중"), h("ul", { class: "factory-list" }, ...drafts.map((t) => row(t, h("button", { type: "button", class: "ghost", disabled: reviewing.has(t.id), onclick: () => bakeSample(t.id) }, reviewing.has(t.id) ? "굽는 중…" : "견본 굽기")))))
+      : null,
+    review.length
+      ? h("section", {}, h("h3", {}, "검토 중 — 승인은 사람만"), h("ul", { class: "factory-list" }, ...review.map((t) => row(t, h("button", { type: "button", class: "ghost", onclick: () => approveTheme(t) }, "승인")))))
+      : null,
+  );
+}
+
+// ---- 03 재료
+
+function chosen(withTheme = true): HTMLElement {
+  const t = tpl(D.purpose);
+  const th = themeOf(D.theme);
+  return h("div", { class: "chosen" },
+    h("button", { type: "button", class: "chosen-part", "aria-label": "용도 바꾸기", onclick: () => go("purpose") },
+      h("span", { class: "chosen-frame" }, t ? frame(t, t.aspect) : autoFrame()),
+      h("span", { class: "chosen-text" }, h("b", {}, t?.label ?? "자동"), h("span", {}, t ? `${t.aspect} · ${span(t.duration.min, t.duration.max)}` : "요청 글로"))),
+    withTheme && D.theme
+      ? h("button", { type: "button", class: "chosen-part", "aria-label": "테마 바꾸기", onclick: () => go("theme") },
+          h("span", { class: "chosen-swatch" }, th?.still ? h("img", { src: th.still, alt: "", width: 56, height: 32 }) : autoSwatch()),
+          h("span", { class: "chosen-text" }, h("b", {}, th?.name ?? "자동"), h("span", {}, th ? (th.status === "approved" ? "테마" : "검토 중") : "후보 셋")))
+      : null,
+  );
+}
+
+const block = (title: string, kids: Kid[], aside?: Kid) => h("section", { class: "block" }, h("h2", {}, title, aside), ...kids);
+
+let player: HTMLAudioElement | null = null;
+let playing = "";
+
+function trackList(): HTMLElement {
+  const box = h("div", { class: "tracks", role: "radiogroup", "aria-label": "곡" });
+  const row = (path: string, name: string, url?: string) => {
+    const radio = h("input", { type: "radio", name: "music", value: path, checked: D.music === path, onchange: () => { D.music = path; save(); renderInputFoot(); } });
+    const play: HTMLElement = url
+      ? h("button", { type: "button", class: "icon-btn", "aria-label": `${name} 미리 듣기`, onclick: () => toggle(url, play as HTMLButtonElement) }, icon(playing === url ? "pause" : "play", 16))
+      : h("span", { class: "icon-btn placeholder", "aria-hidden": "true" }, icon(path ? "music" : "close", 16));
+    return h("div", { class: "track" }, play, h("label", {}, radio, h("span", { class: "track-name" }, name)));
+  };
+  box.append(row("", "없음"), ...tracks.map((t) => row(t.path, t.name, trackUrl(t))));
+  return box;
+}
+
+// 서버가 곡 주소를 주면 그걸, 아니면 올린 곡만 /api/uploads 로 들을 수 있다
+const trackUrl = (t: Track) => t.url ?? (/\/uploads\/[^/]+$/.test(t.path) ? `/api/uploads/${encodeURIComponent(t.path.split("/").pop()!)}` : undefined);
+
+function toggle(url: string, btn: HTMLButtonElement): void {
+  player ??= new Audio();
+  document.querySelectorAll("button.icon-btn svg").forEach((s) => s.replaceWith(icon("play", 16)));
+  if (playing === url) {
+    player.pause();
+    playing = "";
+    return;
+  }
+  player.src = url;
+  void player.play().catch(() => (playing = ""));
+  playing = url;
+  btn.replaceChildren(icon("pause", 16));
+  player.onended = () => {
+    playing = "";
+    btn.replaceChildren(icon("play", 16));
+  };
+}
+
+async function upload(file: File): Promise<{ name: string; path: string }> {
+  const r = await fetch(`/api/upload?name=${encodeURIComponent(file.name)}`, { method: "POST", body: file });
+  if (!r.ok) throw new Error(`올리기 실패: ${file.name}`);
+  return (await r.json()) as { name: string; path: string };
+}
+
+function filePicker(label: string, accept: string, multiple: boolean, onFiles: (fs: File[]) => void): HTMLElement {
+  const input = h("input", { type: "file", accept, multiple, class: "sr", onchange: () => onFiles(Array.from(input.files ?? [])) });
+  return h("label", { class: "pick" }, input, ...iconLabel("upload", label, 16));
+}
+
+async function addTracks(files: File[]): Promise<void> {
+  for (const f of files) {
+    const r = await upload(f);
+    D.music = r.path;
+  }
+  save();
+  tracks = await api<Track[]>("/api/music").catch(() => tracks);
+  render();
+}
+
+async function addAssets(files: File[]): Promise<void> {
+  try {
+    for (const f of files) D.assets.push((await upload(f)).path);
+    save();
+    assets = await api<Asset[]>("/api/assets").catch(() => assets);
+  } catch (e) {
+    error = (e as Error).message;
+  }
+  render();
+}
+
+function assetBox(): HTMLElement {
+  const drop = h("div", { class: "dropzone", tabindex: "-1" },
+    h("span", { class: "drop-icons" }, icon("image", 22), icon("video", 22), icon("caption", 22)),
+    filePicker("올리기", "image/*,video/*,.txt,.json,.lrc", true, (fs) => void addAssets(fs)),
+  );
+  drop.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    drop.classList.add("over");
+  });
+  drop.addEventListener("dragleave", () => drop.classList.remove("over"));
+  drop.addEventListener("drop", (e) => {
+    e.preventDefault();
+    drop.classList.remove("over");
+    void addAssets(Array.from(e.dataTransfer?.files ?? []).filter((f) => /^(image|video)\//.test(f.type) || /\.(txt|json|lrc)$/i.test(f.name)));
+  });
+  const list = assets.length
+    ? h("div", { class: "asset-grid" }, ...assets.map((a) => {
+        const on = D.assets.includes(a.path);
+        const thumb = a.kind === "video"
+          ? h("video", { src: a.url ? `${a.url}#t=0.5` : undefined, muted: true, preload: "metadata", playsInline: true })
+          : h("img", { src: a.url, alt: a.name, loading: "lazy", width: 160, height: 120 });
+        return h("button", {
+          type: "button", class: "asset", "aria-pressed": String(on), title: a.name,
+          onclick: () => {
+            D.assets = on ? D.assets.filter((p) => p !== a.path) : [...D.assets, a.path];
+            save();
+            render();
+          },
+        }, thumb, h("span", { class: "asset-mark" }, icon(on ? "check" : a.kind === "video" ? "video" : "image", 14)), h("span", { class: "asset-name" }, a.name));
+      }))
+    : null;
+  // 가사(lyrics.txt·json) 같은 글 파일은 그림 목록에 안 나온다 — 고른 것만 이름표로
+  const others = D.assets.filter((p) => !assets.some((a) => a.path === p));
+  const files = others.length
+    ? h("div", { class: "file-chips" }, ...others.map((p) => h("span", { class: "file-chip" }, icon("caption", 14), h("span", {}, p.split("/").pop()!.replace(/^[a-z0-9]+-/, "")),
+        h("button", { type: "button", class: "icon-btn", "aria-label": "빼기", onclick: () => { D.assets = D.assets.filter((x) => x !== p); save(); render(); } }, icon("close", 14)))))
+    : null;
+  return h("div", { class: "assets" }, drop, files, list);
+}
+
+function modelPicker(): HTMLElement {
+  return h("div", { class: "models", role: "radiogroup", "aria-label": "장면 쓰는 모델" },
+    ...MODELS.map((m) => h("label", { class: "model" },
+      h("input", { type: "radio", name: "model", value: m.id, checked: D.model === m.id, onchange: () => { D.model = m.id; D.modelPicked = true; save(); } }),
+      h("span", { class: "model-name" }, m.name), h("span", { class: "model-by" }, m.by))));
+}
+
+// 화면 자막 켜고 끄기 — 들릴 말(내레이션)은 꺼도 srt·vtt 트랙으로 나간다. 다시 만들지 않고 결과 단계에서 반대 판을 또 구울 수 있다
+function captionPicker(): HTMLElement {
+  const base = capMode(tpl(D.purpose)?.captions);
+  const now = D.captions || (base === "on" ? "on" : "off");
+  const pick = (v: "on" | "off") => () => { D.captions = v === (base === "on" ? "on" : "off") ? "" : v; save(); render(); };
+  const hint = base === "none" && !D.captions ? "이 용도는 기본으로 자막이 없다 — 켜면 내레이션을 써서 화면에 얹는다" : now === "on" ? "들릴 말을 화면 아래 판에 얹는다(두 줄까지) · srt·vtt 도 같이" : "화면엔 없이 srt·vtt 트랙만";
+  return h("div", { class: "cap-pick" },
+    h("div", { class: "chips", role: "radiogroup", "aria-label": "화면 자막" },
+      h("button", { type: "button", class: "chip", role: "radio", "aria-pressed": String(now === "on"), "aria-checked": String(now === "on"), onclick: pick("on") }, icon("caption", 16), h("span", {}, "켜기")),
+      h("button", { type: "button", class: "chip", role: "radio", "aria-pressed": String(now === "off"), "aria-checked": String(now === "off"), onclick: pick("off") }, h("span", {}, "끄기"))),
+    h("p", { class: "dim cap-hint" }, hint));
+}
+
+function needsMusic(purpose: Choice | null | undefined): boolean {
+  return tpl(purpose)?.music === "required";
+}
+
+function renderInputFoot(): void {
+  const foot = document.getElementById("input-foot");
+  if (foot) foot.replaceWith(inputFoot());
+}
+
+function inputFoot(): HTMLElement {
+  const ok = !!D.request.trim();
+  return h("footer", { class: "foot", id: "input-foot" },
+    h("button", { type: "button", class: "ghost", onclick: () => go("theme") }, ...iconLabel("back", "테마")),
+    h("button", { type: "button", class: "primary", disabled: !ok, onclick: () => go("plan") }, h("span", {}, "계획 보기"), icon("arrow")),
+  );
+}
+
+function viewInput(): HTMLElement {
+  const req = h("textarea", {
+    id: "request", rows: 4, value: D.request, placeholder: EXAMPLES[D.purpose ?? "auto"] ?? "", "aria-label": "요청",
+    oninput: () => { D.request = req.value; save(); renderInputFoot(); renderRail("input"); },
+    onkeydown: (e: KeyboardEvent) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && D.request.trim()) go("plan"); },
+  });
+  queueMicrotask(() => { if (!D.request) req.focus(); });
+  const musicNeed = needsMusic(D.purpose) ? h("span", { class: "need" }, "필요") : null;
+  return pane("input",
+    head(3, "재료", chosen()),
+    h("div", { class: "input-grid" },
+      h("div", { class: "col" },
+        block("요청", [req]),
+        block("모델", [modelPicker()]),
+        block("화면 자막", [captionPicker()])),
+      h("div", { class: "col" },
+        block("곡", [trackList(), filePicker("곡 올리기", "audio/*", false, (fs) => void addTracks(fs))], musicNeed),
+        block("자산", [assetBox()], D.assets.length ? h("span", { class: "count" }, `${D.assets.length}`) : null)),
+    ),
+    inputFoot(),
+  );
+}
+
+// ---- 04 계획
+
+const ROLE_TINT: Record<string, string> = { drop: "t-drop", hook: "t-edge", end: "t-edge", brand: "t-edge", seam: "t-seam" };
+
+function sceneBar(scenes: Scene[], total: number, big = false): HTMLElement {
+  const bar = h("div", { class: `scene-bar${big ? " big" : ""}` }, ...scenes.map((s) => {
+    const cell = h("div", { class: `cell ${ROLE_TINT[s.role] ?? ""}`, title: `${s.id} · ${sec(s.from)}–${sec(s.from + s.dur)}` },
+      h("b", {}, s.id), big ? h("span", {}, sec(s.dur)) : null);
+    cell.style.flexGrow = String(s.dur / total);
+    return cell;
+  }));
+  if (!big) return bar;
+  const step = total > 90 ? 30 : total > 40 ? 15 : total > 20 ? 5 : 2;
+  const axis = h("div", { class: "axis", "aria-hidden": "true" });
+  for (let t = 0; t <= total + 1e-6; t += step) {
+    const tick = h("span", {}, `${t}`);
+    tick.style.left = `${(t / total) * 100}%`;
+    axis.append(tick);
+  }
+  return h("div", { class: "scene-chart" }, bar, axis);
+}
+
+function facts(p: Plan): HTMLElement {
+  const track = tracks.find((t) => t.path === D.music);
+  const model = MODELS.find((m) => m.id === D.model);
+  const rows: [string, string][] = [
+    ["화면", `${p.aspect} · ${p.width}×${p.height}`],
+    ["길이", sec(p.duration)],
+    ["스타일", p.style],
+    ["자막", CAPTIONS[D.captions || p.captions] ?? p.captions],
+    ["결과", p.deliverables.join(" · ")],
+    ["곡", track?.name ?? "없음"],
+    ["자산", D.assets.length ? `${D.assets.length}개` : "없음"],
+    ["테마", themeOf(themeId())?.name ?? "자동"],
+    ["모델", model?.name ?? D.model],
+  ];
+  return h("dl", { class: "facts" }, ...rows.flatMap(([k, v]) => [h("dt", {}, k), h("dd", {}, v)]));
+}
+
+const themeId = () => (D.theme === "auto" ? (D.themePick ?? "auto") : (D.theme ?? "auto"));
+
+async function loadSuggest(): Promise<void> {
+  const key = `${D.purpose}\u0000${D.request}`;
+  if (D.theme !== "auto" || suggest?.key === key) return;
+  suggest = { key, ids: [], loading: true };
+  try {
+    const r = await api<{ candidates: { id: string }[] }>("/api/themes/suggest", { method: "POST", body: JSON.stringify({ request: D.request, purpose: D.purpose ?? "auto" }) });
+    if (suggest.key === key) suggest.ids = r.candidates.map((c) => c.id).filter((id) => themeOf(id)).slice(0, 3);
+  } catch {
+    // 서버에 아직 후보 길이 없으면 테마는 "auto" 로 넘기고 서버가 정한다
+  }
+  if (suggest.key === key) suggest.loading = false;
+  if (D.themePick && !suggest.ids.includes(D.themePick)) D.themePick = null;
+  if (readUrl().step === "plan") render();
+}
+
+async function loadPlan(purpose: Choice): Promise<void> {
+  const key = `${purpose}\u0000${themeId()}\u0000${D.request}`;
+  if (plan && planKey === key) return;
+  planKey = key;
+  plan = null;
+  try {
+    const p = await api<Plan>("/api/plan", { method: "POST", body: JSON.stringify({ request: D.request, purpose, theme: themeId() }) });
+    if (planKey === key) plan = p;
+  } catch (e) {
+    error = (e as Error).message;
+  }
+  if (readUrl().step === "plan") render();
+}
+
+function viewPlan(): HTMLElement {
+  const purpose = D.purpose ?? "auto";
+  void loadPlan(purpose);
+  void loadSuggest();
+  if (!plan) {
+    return pane("plan", head(4, "계획"), h("div", { class: "plan-grid" }, h("div", { class: "skeleton block-skel" }), h("div", { class: "skeleton block-skel short" })));
+  }
+  const p = plan;
+  const t = tpl(p.purpose);
+  const musicMissing = needsMusic(p.purpose) && !D.music;
+  const hasSeam = p.gen.some((g) => g.kind === "vid");
+  const judged = purpose === "auto"
+    ? h("div", { class: "judged" }, ...[{ purpose: p.purpose, p: p.confidence }, ...p.alternatives].slice(0, 4).map((a, i) =>
+        h("button", { type: "button", class: "chip", "aria-pressed": String(i === 0), onclick: () => { D.purpose = a.purpose; save(); plan = null; render(); } },
+          tpl(a.purpose)?.label ?? a.purpose, h("span", { class: "p" }, `${Math.round(a.p * 100)}%`))))
+    : null;
+  const asks = (p.questions ?? []).filter((q) => q.id !== "music" || !D.music);
+  const auto = D.theme === "auto";
+  const cands = auto ? (suggest?.ids ?? []).map((id) => themeOf(id)).filter((t): t is Theme => !!t) : [];
+  const needPick = cands.length > 0 && !D.themePick;
+  const candBox = !auto
+    ? null
+    : suggest?.loading
+      ? h("section", { class: "cands" }, h("h2", {}, "테마 후보"), h("div", { class: "themes three" }, ...[0, 1, 2].map(() => h("div", { class: "theme skeleton", "aria-hidden": "true" }))))
+      : cands.length
+        ? h("section", { class: "cands" }, h("h2", {}, "테마 후보"),
+            h("div", { class: "themes three" }, ...cands.map((t) => themeCard(t, () => { D.themePick = t.id; save(); plan = null; render(); }, D.themePick === t.id))))
+        : null;
+  return pane("plan",
+    head(4, "계획", h("span", { class: "plan-title" }, p.title || D.request)),
+    judged,
+    candBox,
+    h("div", { class: "plan-grid" },
+      h("div", { class: "plan-main" },
+        h("div", { class: "plan-stage" }, frame(t, p.aspect)),
+        sceneBar(p.scenes, p.duration, true),
+        h("ol", { class: "scene-rows" }, ...p.scenes.map((s) => h("li", {},
+          h("span", { class: `dot ${ROLE_TINT[s.role] ?? ""}` }),
+          h("span", { class: "sid" }, s.id),
+          h("span", { class: "st" }, `${sec(s.from)}–${sec(s.from + s.dur)}`),
+          h("span", { class: "si" }, s.idea))))),
+      h("aside", { class: "plan-side" },
+        facts(p),
+        p.gen.length
+          ? h("section", { class: "gen" }, h("h2", {}, "만들 그림·영상"), h("ul", {}, ...p.gen.map((g) => h("li", {}, icon(g.kind === "vid" ? "video" : "image", 16), h("span", {}, g.id), g.scene ? h("span", { class: "dim" }, g.scene) : null))))
+          : null,
+        ...asks.map((q) => h("p", { class: "ask" }, icon("warn", 16), h("span", {}, q.ask))),
+        musicMissing ? h("p", { class: "ask" }, icon("music", 16), h("span", {}, "곡 필요"), h("button", { type: "button", class: "ghost small", onclick: () => go("input") }, "고르기")) : null,
+        hasSeam
+          ? h("label", { class: "approve" }, h("input", { type: "checkbox", checked: D.approve, onchange: (e: Event) => { D.approve = (e.target as HTMLInputElement).checked; save(); } }),
+              h("span", {}, "영상 생성 승인"), h("span", { class: "dim" }, "유료 · 끄면 대체 화면"))
+          : null,
+      ),
+    ),
+    h("footer", { class: "foot" },
+      h("button", { type: "button", class: "ghost", onclick: () => go("input") }, ...iconLabel("back", "재료")),
+      h("button", { type: "button", class: "primary", disabled: musicMissing || needPick, onclick: start }, h("span", {}, musicMissing ? "곡이 필요하다" : needPick ? "테마를 고른다" : "만들기"), icon("arrow"))),
+  );
+}
+
+async function start(e: Event): Promise<void> {
+  const btn = e.currentTarget as HTMLButtonElement;
+  btn.disabled = true;
+  try {
+    const job = await api<Job>("/api/jobs", {
+      method: "POST",
+      body: JSON.stringify({ request: D.request, purpose: D.purpose ?? "auto", theme: themeId(), music: D.music || undefined, model: D.model, approve: D.approve, assets: D.assets, captions: D.captions || undefined }),
+    });
+    current = job;
+    go("job", { job: job.id });
+  } catch (err) {
+    error = (err as Error).message;
+    btn.disabled = false;
+    render();
+  }
+}
+
+// ---- 05 만들기
+
+function follow(id: string): void {
+  stream?.close();
+  logLines = [];
+  current = null;
+  stream = new EventSource(`/api/jobs/${id}/events`);
+  stream.addEventListener("state", (e) => {
+    current = JSON.parse((e as MessageEvent).data) as Job;
+    if (readUrl().job === current.id) {
+      renderRail("job");
+      renderJob();
+    }
+  });
+  stream.addEventListener("log", (e) => {
+    logLines.push(JSON.parse((e as MessageEvent).data) as string);
+    if (logLines.length > 400) logLines.splice(0, logLines.length - 400);
+    const pre = document.getElementById("log");
+    if (pre) {
+      const stick = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 20;
+      pre.textContent = logLines.join("\n");
+      if (stick) pre.scrollTop = pre.scrollHeight;
+    }
+  });
+  stream.addEventListener("error", () => {
+    if (!current) {
+      error = "이 작업을 찾지 못했다";
+      renderJob();
+    }
+  });
+}
+
+let shownPreview = "";
+let shownVideo = "";
+// 결과 화면에서 자막을 반대로 구운 판(files.alt)을 틀고 있나
+let showAlt = false;
+
+// iframe 을 DOM 에서 떼었다 붙이면 다시 읽혀 보던 시각이 날아간다 — 틀은 일마다 한 번 짓고 칸만 갈아 끼운다
+function jobFrame(id: string) {
+  const view = $<HTMLElement>("#view");
+  let root = view.querySelector<HTMLElement>(`.pane[data-step="job"]`);
+  if (!root || root.dataset.job !== id) {
+    shownPreview = shownVideo = "";
+    showAlt = false;
+    root = pane("job",
+      head(5, "만들기", h("span", { class: "plan-title job-title" })),
+      h("div", { class: "job-grid" },
+        h("div", { class: "job-stage" }, h("div", { class: "screen" })),
+        h("aside", { class: "job-side" }, h("ol", { class: "phases" }), h("div", { class: "job-status" }), h("div", { class: "job-acts" }))),
+      h("section", { class: "job-scenes" }),
+      h("details", { class: "job-log" }, h("summary", {}, "기록"), h("pre", { class: "log", id: "log" })),
+    );
+    root.dataset.job = id;
+    view.replaceChildren(root);
+    if (matchMedia("(min-width: 1024px)").matches) (root.querySelector(".job-log") as HTMLDetailsElement).open = true;
+  }
+  const q = <T extends HTMLElement>(s: string) => root!.querySelector(s) as T;
+  return { title: q(".job-title"), screen: q(".screen"), phases: q(".phases"), status: q(".job-status"), acts: q(".job-acts"), scenes: q(".job-scenes"), log: q(".job-log") as HTMLDetailsElement };
+}
+
+function renderJob(): void {
+  const id = readUrl().job;
+  if (!id) return;
+  if (!current || current.id !== id) {
+    const f = jobFrame(id);
+    f.status.replaceChildren(error ? h("p", { class: "err" }, error) : h("p", { class: "dim" }, "불러오는 중"));
+    return;
+  }
+  const j = current;
+  const f = jobFrame(j.id);
+  const w = j.kf?.width ?? j.plan?.width ?? 1920;
+  const ht = j.kf?.height ?? j.plan?.height ?? 1080;
+  const file = (p: string) => `/api/jobs/${j.id}/files/${p}`;
+  const done = j.phase === "done" && !!j.files.video;
+  const at = PHASES.findIndex(([k]) => k === j.phase);
+
+  f.title.textContent = j.input.request;
+  f.screen.style.aspectRatio = `${w} / ${ht}`;
+  f.screen.style.setProperty("--ar", String(w / ht));
+  const shown = showAlt && j.files.alt ? j.files.alt : j.files.video;
+  if (done && shownVideo !== shown) {
+    shownVideo = shown!;
+    shownPreview = "";
+    f.screen.classList.remove("studio");
+    f.screen.replaceChildren(h("video", { src: `${file(shown!)}?v=${j.createdAt}`, controls: true, playsInline: true, poster: j.files.cover ? file(j.files.cover) : undefined }));
+  } else if (!done && j.previewUrl && shownPreview !== j.previewUrl) {
+    shownPreview = j.previewUrl;
+    shownVideo = "";
+    f.screen.classList.add("studio");
+    f.screen.replaceChildren(h("iframe", { src: j.previewUrl, title: "미리보기", allow: "autoplay" }));
+  } else if (!done && !j.previewUrl && !shownPreview) {
+    const want = j.running ? "run" : j.files.cover ? "cover" : "idle";
+    if (f.screen.dataset.empty !== want) {
+      f.screen.dataset.empty = want;
+      f.screen.replaceChildren(want === "cover"
+        ? h("img", { src: file(j.files.cover!), alt: "" })
+        : h("div", { class: "screen-wait" }, want === "run" ? h("span", { class: "pulse" }) : icon(j.phase === "failed" ? "warn" : "video", 28)));
+    }
+  }
+
+  f.phases.replaceChildren(...PHASES.map(([k, label], i) => {
+    const state = j.phase === "done" || i < at ? "done" : k === j.phase ? (j.running ? "now" : "stop") : "todo";
+    const pct = k === "render" && state === "now" ? h("span", { class: "pct" }, `${Math.round(j.progress * 100)}%`) : null;
+    return h("li", { "data-state": state },
+      h("span", { class: "pm" }, state === "done" ? icon("check", 14) : null),
+      h("span", { class: "label" }, label), pct,
+      k === "render" && state === "now" ? h("span", { class: "progress" }, bar(j.progress)) : null);
+  }));
+
+  f.status.replaceChildren(
+    ...(j.phase === "done" ? [h("p", { class: `verdict ${j.checkPassed ? "ok" : "bad"}` }, icon(j.checkPassed ? "check" : "warn", 16), j.checkPassed ? "검사 통과" : "검사에 걸림")] : []),
+    ...(j.phase === "waiting" ? [h("p", { class: "verdict bad" }, icon("warn", 16), "정할 것이 있다 · 기록")] : []),
+    ...(j.phase === "failed" && j.error ? [h("p", { class: "err" }, j.error)] : []),
+  );
+
+  // 자막은 다시 만들지 않고 켜고 끈다 — 장면은 그대로, 반대 판을 옆 파일로 굽는다
+  const projOn = capMode(j.kf?.captions) === "on";
+  const altLabel = projOn ? "자막 없음" : "자막";
+  const doneActs: (HTMLElement | null)[] = done
+    ? [
+        j.files.alt
+          ? h("div", { class: "chips", role: "radiogroup", "aria-label": "볼 판" },
+              h("button", { type: "button", class: "chip", "aria-pressed": String(!showAlt), onclick: () => { showAlt = false; renderJob(); } }, "원본"),
+              h("button", { type: "button", class: "chip", "aria-pressed": String(showAlt), onclick: () => { showAlt = true; renderJob(); } }, icon("caption", 16), h("span", {}, altLabel)))
+          : null,
+        h("a", { class: "primary link", href: `${file(j.files.video!)}?download`, download: "" }, icon("download"), h("span", {}, "MP4")),
+        j.files.alt ? h("a", { class: "ghost link", href: `${file(j.files.alt)}?download`, download: "" }, icon("download"), h("span", {}, `MP4 · ${altLabel}`)) : null,
+        j.files.cover ? h("a", { class: "ghost link", href: `${file(j.files.cover)}?download`, download: "" }, icon("image"), h("span", {}, "표지")) : null,
+        j.files.check ? h("a", { class: "ghost link", href: file(j.files.check), target: "_blank", rel: "noopener" }, h("span", {}, "검사 JSON")) : null,
+        h("button", { type: "button", class: "ghost", disabled: j.running, onclick: () => api(`/api/jobs/${j.id}/render`, { method: "POST" }) }, ...iconLabel("redo", "다시 렌더")),
+        h("button", {
+          type: "button", class: "ghost", disabled: j.running || !j.files.captions,
+          title: j.files.captions ? undefined : "들릴 말(captions.json)이 없다",
+          onclick: () => { showAlt = true; void api(`/api/jobs/${j.id}/render`, { method: "POST", body: JSON.stringify({ captions: projOn ? "off" : "on" }) }); },
+        }, ...iconLabel("caption", projOn ? "자막 빼고 다시 굽기" : "자막 넣어 다시 굽기")),
+      ]
+    : j.running
+      ? [h("button", { type: "button", class: "ghost", onclick: () => api(`/api/jobs/${j.id}/stop`, { method: "POST" }) }, ...iconLabel("stop", "멈추기"))]
+      : [];
+  f.acts.replaceChildren(...doneActs.filter((x): x is HTMLElement => !!x));
+  if (done) f.log.open = false;
+  renderScenes(f.scenes, j);
+}
+
+function bar(p: number): HTMLElement {
+  const fill = h("span");
+  fill.style.transform = `scaleX(${Math.min(1, Math.max(0, p))})`;
+  return fill;
+}
+
+// 장면 카드: 할 일·길이를 고치고 그 장면만 다시 쓴다
+function renderScenes(box: HTMLElement, j: Job): void {
+  const scenes = j.kf?.scenes;
+  if (!scenes?.length) return void box.replaceChildren();
+  if (box.contains(document.activeElement) && document.activeElement !== document.body) return;
+  const total = scenes.at(-1)!.from + scenes.at(-1)!.dur;
+  box.replaceChildren(
+    h("h2", {}, "장면"),
+    sceneBar(scenes, total),
+    h("div", { class: "scene-list" }, ...scenes.map((s, i) => {
+      const idea = h("textarea", { rows: 2, value: s.idea, "aria-label": `${s.id} 할 일` });
+      const dur = h("input", { type: "number", step: "0.1", min: "0.5", value: s.dur.toFixed(2), disabled: i === scenes.length - 1, "aria-label": `${s.id} 길이(초)` });
+      const patch = () => api(`/api/jobs/${j.id}/scenes/${s.id}`, { method: "PATCH", body: JSON.stringify({ idea: idea.value, dur: Number(dur.value) }) });
+      return h("article", { class: "scene" },
+        h("header", {}, h("span", { class: `dot ${ROLE_TINT[s.role] ?? ""}` }), h("b", {}, s.id), h("span", { class: "st" }, `${sec(s.from)}–${sec(s.from + s.dur)} · ${s.role}`)),
+        idea,
+        h("div", { class: "scene-acts" },
+          h("label", { class: "dur" }, h("span", {}, "초"), dur),
+          h("button", { type: "button", class: "ghost small", disabled: j.running, onclick: patch }, "저장"),
+          h("button", { type: "button", class: "ghost small", disabled: j.running, onclick: async () => { await patch(); await api(`/api/jobs/${j.id}/rewrite`, { method: "POST", body: JSON.stringify({ scenes: [s.id] }) }); } }, ...iconLabel("edit", "다시 쓰기", 14)),
+        ),
+      );
+    })),
+  );
+}
+
+// ---- 지난 작업
+
+const jobsBox = $<HTMLElement>("#jobs");
+const jobsBtn = $<HTMLButtonElement>("#jobs-toggle");
+jobsBtn.replaceChildren(...iconLabel("history", "지난 작업"));
+jobsBtn.addEventListener("click", async () => {
+  const open = jobsBox.hidden;
+  jobsBox.hidden = !open;
+  jobsBtn.setAttribute("aria-expanded", String(open));
+  if (!open) return;
+  const jobs = await api<Job[]>("/api/jobs").catch(() => [] as Job[]);
+  const label = (j: Job) => PHASES.find(([k]) => k === j.phase)?.[1] ?? (j.phase === "failed" ? "실패" : j.phase === "waiting" ? "정할 것" : j.phase);
+  jobsBox.replaceChildren(...(jobs.length
+    ? jobs.map((j) => {
+        const shape = (j.plan?.height ?? 9) > (j.plan?.width ?? 16) ? "tall" : "wide";
+        return h("a", {
+          class: "job-row", href: `/?job=${j.id}`,
+          onclick: (ev: Event) => { ev.preventDefault(); jobsBox.hidden = true; jobsBtn.setAttribute("aria-expanded", "false"); go("job", { job: j.id }); },
+        },
+          h("span", { class: "job-thumb", "data-shape": shape }, j.files.cover ? h("img", { src: `/api/jobs/${j.id}/files/${j.files.cover}`, alt: "", loading: "lazy", width: 96, height: 54 }) : null),
+          h("span", { class: "job-text" }, h("span", { class: "r" }, j.input.request), h("span", { class: "s" }, `${tpl(j.plan?.purpose)?.label ?? ""} · ${label(j)} · ${new Date(j.createdAt).toLocaleString("ko-KR", { month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" })}`)));
+      })
+    : [h("p", { class: "dim" }, "없음")]));
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !jobsBox.hidden) jobsBtn.click();
+});
+
+async function boot(): Promise<void> {
+  render();
+  const [t, m, a, th] = await Promise.all([
+    api<Template[]>("/api/templates").catch((e: Error) => ((error = e.message), [] as Template[])),
+    api<Track[]>("/api/music").catch(() => [] as Track[]),
+    api<Asset[]>("/api/assets").catch(() => [] as Asset[]),
+    // 기본은 승인된 것만 온다 — 검토 중 묶음까지 그리려고 all=1 로 받고 draft 는 아래에서 거른다
+    api<Theme[]>("/api/themes?all=1").catch(() => null),
+  ]);
+  // draft 는 테마 폴더 안 견본에서만 쓴다 — 작업실에는 승인·검토 중만
+  themes = th?.filter((x) => x.status !== "draft") ?? null;
+  themesAll = th ?? [];
+  templates = t;
+  rangeMax = Math.max(60, ...t.map((x) => x.duration.max));
+  tracks = m;
+  assets = a;
+  render();
+}
+void boot();