kasaframe 0.1.1 → 0.1.4

package/app/web/main.ts

@@ -12,11 +12,24 @@ interface Plan {
   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[] }[];
+  // 돈이 들거나 없는 생성 능력만 — 보기 첫째가 권장. 고른 답은 일을 만들 때 answers 로
+  asks?: { id: string; ask: string; header: string; choices: { value: string; label: string; costUsd?: number; note?: string }[]; default: string; missing?: boolean }[];
+  // 물을 것 없이 정해진 답 — 쇼츠·설명은 분위기 맞는 곡 모음 곡이 여기 music 으로 온다
+  answers?: Record<string, string>;
 }
+type SceneState = "writing" | "written" | "assets" | "render" | "rendered" | "reused" | "check" | "done" | "failed";
 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 };
+  plan?: Plan; kf?: { width: number; height: number; scenes: Scene[]; captions?: string }; files: { video?: string; cover?: string; check?: string; alt?: string; captions?: string; videoAt?: number };
+  // 장면마다 따로 흐르는 상태(kf make·direct·render 의 「장면 <id>: <상태>」 줄) · 사람이 고쳐 다시 굽는 장면
+  scenes?: Record<string, { state: SceneState; note?: string; at: number }>; focus?: string;
+}
+// 장면 하나 고치는 자리 — 감독 프로젝트는 content.json 칸·패턴 후보·씨앗, 아니면 할 일과 다시 쓰는 모델
+interface SceneDetail {
+  scene: Scene; direct: boolean; model: string | null; content: Record<string, unknown> | null;
+  pattern: string | null; candidates: { id: string; score: number; why: string[] }[]; pinned: { pattern?: string; seed?: string } | null;
+  assets: { path: string; url: string; kind: "image" | "video" }[];
 }
 interface Template {
   id: Purpose; label: string; summary?: string; aspect: string; width?: number; height?: number;
@@ -92,8 +105,8 @@ const iconLabel = (name: IconName, text: string, size?: number) => [icon(name, s
 // 시험은 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") ?? "{}") };
+interface Draft { purpose: Choice | null; theme: string | null; themePick: string | null; request: string; music: string; model: string; modelPicked: boolean; assets: string[]; captions: "" | "on" | "off"; answers: Record<string, string> }
+const D: Draft = { purpose: null, theme: null, themePick: null, request: "", music: "", model: MODELS[0].id, modelPicked: false, assets: [], captions: "", answers: {}, ...JSON.parse(sessionStorage.getItem("kf-draft") ?? "{}") };
 if (!D.modelPicked) D.model = MODELS[0].id;
 const save = () => sessionStorage.setItem("kf-draft", JSON.stringify(D));
 
@@ -720,14 +733,15 @@ function viewPlan(): HTMLElement {
   }
   const p = plan;
   const t = tpl(p.purpose);
-  const musicMissing = needsMusic(p.purpose) && !D.music;
-  const hasSeam = p.gen.some((g) => g.kind === "vid");
+  // 곡을 안 골랐어도 계획이 곡 모음에서 정했거나(answers.music) 곡 질문(생성·없음)이 떠 있으면 막지 않는다
+  const musicMissing = needsMusic(p.purpose) && !D.music && !p.answers?.music && !(p.asks ?? []).some((q) => q.id === "music");
   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 unpicked = (p.asks ?? []).some((q) => !pick(q));
   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;
@@ -759,25 +773,32 @@ function viewPlan(): HTMLElement {
           : 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,
+        ...(p.asks ?? []).map((q) => h("section", { class: "gen-ask" }, h("h2", {}, q.header), h("p", { class: "dim" }, q.ask),
+          h("div", { class: "judged" }, ...q.choices.map((c) => h("button", {
+            type: "button", class: "chip", title: c.note ?? "", "aria-pressed": String(pick(q) === c.value),
+            onclick: () => { D.answers = { ...D.answers, [q.id]: c.value }; save(); render(); },
+          }, c.label, c.costUsd ? h("span", { class: "p" }, `$${c.costUsd.toFixed(2)}`) : null))),
+          ...q.choices.filter((c) => c.note && pick(q) === c.value).map((c) => h("p", { class: "dim" }, c.note!)))),
       ),
     ),
     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"))),
+      h("button", { type: "button", class: "primary", disabled: musicMissing || needPick || unpicked, onclick: start }, h("span", {}, musicMissing ? "곡이 필요하다" : needPick ? "테마를 고른다" : unpicked ? "없는 능력을 고른다" : "만들기"), icon("arrow"))),
   );
 }
 
+// 없는 능력은 미리 골라 두지 않는다 — 사람이 넣는 법·다른 엔진·빼기 중 하나를 눌러야 만들기가 열린다
+function pick(q: NonNullable<Plan["asks"]>[number]): string | undefined {
+  return D.answers[q.id] ?? (q.missing ? undefined : q.default);
+}
+
 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 }),
+      body: JSON.stringify({ request: D.request, purpose: D.purpose ?? "auto", theme: themeId(), music: D.music || undefined, model: D.model, assets: D.assets, captions: D.captions || undefined, answers: Object.fromEntries((plan?.asks ?? []).map((q) => [q.id, pick(q)]).filter(([, v]) => v)) }),
     });
     current = job;
     go("job", { job: job.id });
@@ -822,6 +843,9 @@ function follow(id: string): void {
 
 let shownPreview = "";
 let shownVideo = "";
+// 고르고 있는 장면과 그 고치기 자리
+// stale — 그 일이 돌았다: 끝나면 고른 패턴·내용이 바뀌었을 수 있어 다시 받는다
+let picked: { job: string; id: string; detail: SceneDetail | null; error: string; stale?: boolean } | null = null;
 // 결과 화면에서 자막을 반대로 구운 판(files.alt)을 틀고 있나
 let showAlt = false;
 
@@ -868,16 +892,23 @@ function renderJob(): void {
   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!;
+  // 장면 하나를 고쳐 다시 굽는 중이면 미리보기도 다 구운 영상도 그 장면 시각부터
+  const from = j.kf?.scenes.find((s) => s.id === j.focus)?.from;
+  const shownKey = `${shown}@${j.files.videoAt ?? j.createdAt}`;
+  if (done && shownVideo !== shownKey) {
+    shownVideo = shownKey;
     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;
+    const v = h("video", { src: `${file(shown!)}?v=${j.files.videoAt ?? j.createdAt}`, controls: true, playsInline: true, poster: from === undefined && j.files.cover ? file(j.files.cover) : undefined });
+    if (from !== undefined) v.addEventListener("loadedmetadata", () => { v.currentTime = from; }, { once: true });
+    f.screen.replaceChildren(v);
+  } else if (!done && j.previewUrl && shownPreview !== `${j.previewUrl}@${from}`) {
+    shownPreview = `${j.previewUrl}@${from}`;
     shownVideo = "";
     f.screen.classList.add("studio");
-    f.screen.replaceChildren(h("iframe", { src: j.previewUrl, title: "미리보기", allow: "autoplay" }));
+    const at = new URL(j.previewUrl);
+    if (from !== undefined) at.searchParams.set("t", from.toFixed(2));
+    f.screen.replaceChildren(h("iframe", { src: at.href, 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) {
@@ -938,29 +969,180 @@ function bar(p: number): HTMLElement {
   return fill;
 }
 
-// 장면 카드: 할 일·길이를 고치고 그 장면만 다시 쓴다
+// ---- 장면 타임라인과 고치기
+
+const STATE_LABEL: Record<SceneState, string> = { writing: "쓰는 중", written: "씀", assets: "재료", render: "렌더", rendered: "구움", reused: "그대로", check: "검사", done: "끝", failed: "실패" };
+const BUSY = new Set<SceneState>(["writing", "assets", "render", "check"]);
+
+// 장면마다 상태가 동시에 흐르는 타임라인 — 칸을 누르면 그 장면을 고치는 자리가 열린다
 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;
+  if (!box.querySelector(".timeline")) box.replaceChildren(h("h2", {}, "장면"), h("div", { class: "timeline", role: "group", "aria-label": "장면 타임라인" }), h("div", { class: "scene-edit" }));
   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 line = box.querySelector<HTMLElement>(".timeline")!;
+  const focused = line.contains(document.activeElement) ? (document.activeElement as HTMLElement).dataset.id : undefined;
+  line.replaceChildren(...scenes.map((s) => {
+    const st = j.scenes?.[s.id];
+    const cell = h("button", {
+      type: "button", class: `cell ${ROLE_TINT[s.role] ?? ""}`, "data-id": s.id, "data-state": st?.state ?? "", "aria-pressed": String(picked?.job === j.id && picked.id === s.id),
+      title: `${s.id} · ${sec(s.from)}–${sec(s.from + s.dur)}${st?.note ? ` · ${st.note}` : ""}`,
+      onclick: () => void pickScene(j, s.id),
+    }, h("b", {}, s.id), h("span", { class: "cs" }, st ? STATE_LABEL[st.state] : sec(s.dur)), BUSY.has(st?.state as SceneState) && j.running ? h("i", { class: "run", "aria-hidden": "true" }) : null);
+    cell.style.flexGrow = String(s.dur / total);
+    return cell;
+  }));
+  if (focused) line.querySelector<HTMLElement>(`[data-id="${focused}"]`)?.focus();
+  const edit = box.querySelector<HTMLElement>(".scene-edit")!;
+  const mine = picked?.job === j.id ? picked : null;
+  if (mine && j.running) mine.stale = true;
+  else if (mine?.stale) {
+    mine.stale = false;
+    void pickScene(j, mine.id, true);
+  }
+  // 진행 줄마다 새로 그리면 덜 저장한 글이 날아간다 — 고른 장면·받은 정보·그 장면 상태가 바뀔 때만
+  const key = mine ? `${mine.id}|${mine.detail ? "d" : mine.error}|${j.running}|${j.scenes?.[mine.id]?.state ?? ""}` : "none";
+  const typing = edit.contains(document.activeElement) && /^(INPUT|TEXTAREA)$/.test(document.activeElement!.tagName) && edit.dataset.id === mine?.id;
+  if (edit.dataset.key === key || typing) return;
+  edit.dataset.key = key;
+  edit.dataset.id = mine?.id ?? "";
+  edit.replaceChildren(mine ? sceneEditor(j) : h("p", { class: "dim hint" }, "장면을 누르면 그 장면만 고쳐 다시 굽는다 — 나머지 장면은 구운 조각을 그대로 잇는다"));
+}
+
+async function pickScene(j: Job, id: string, refresh = false): Promise<void> {
+  if (!refresh && picked?.job === j.id && picked.id === id) picked = null;
+  else {
+    picked = { job: j.id, id, detail: refresh && picked?.id === id ? picked.detail : null, error: "" };
+    try {
+      picked.detail = await api<SceneDetail>(`/api/jobs/${j.id}/scenes/${id}`);
+    } catch (e) {
+      if (picked?.id === id) picked.error = (e as Error).message;
+    }
+  }
+  if (current?.id !== j.id) return;
+  const box = jobFrame(j.id).scenes;
+  delete box.querySelector<HTMLElement>(".scene-edit")?.dataset.key;
+  renderScenes(box, current);
+}
+
+// 줄 글은 글 칸, 숫자는 숫자 칸, 목록·묶음은 JSON 칸 — content.json 의 그 장면 칸 그대로
+function contentFields(c: Record<string, unknown>): { el: HTMLElement; read: () => [string, unknown] }[] {
+  // 길이는 아래 「초」 칸 하나로 — content 의 dur 와 시간표 길이를 같이 고친다
+  return Object.entries(c).filter(([k]) => k !== "id" && k !== "type" && k !== "dur").map(([k, v]) => {
+    const label = k === "say" ? "들릴 말" : k;
+    if (typeof v === "number") {
+      const input = h("input", { type: "number", step: "any", value: String(v), "aria-label": label });
+      return { el: h("label", { class: "field" }, h("span", {}, label), input), read: () => [k, Number(input.value)] as [string, unknown] };
+    }
+    const text = typeof v === "string" ? v : JSON.stringify(v, null, 2);
+    const area = h("textarea", { rows: typeof v === "string" ? Math.min(4, Math.max(1, Math.ceil(text.length / 48))) : Math.min(10, text.split("\n").length), value: text, "aria-label": label, class: typeof v === "string" ? "" : "mono" });
+    return {
+      el: h("label", { class: "field" }, h("span", {}, label), area),
+      read: () => {
+        if (typeof v === "string") return [k, area.value];
+        try {
+          return [k, JSON.parse(area.value)];
+        } catch {
+          throw new Error(`${label}: JSON 이 아니다`);
+        }
+      },
+    };
+  });
+}
+
+function sceneEditor(j: Job): HTMLElement {
+  const p = picked!;
+  const s = j.kf?.scenes.find((x) => x.id === p.id);
+  if (!s) return h("p", { class: "err" }, `장면 ${p.id} 가 없다`);
+  const d = p.detail;
+  const st = j.scenes?.[s.id];
+  const last = j.kf!.scenes.at(-1)!.id === s.id;
+  const headRow = 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}${d?.pattern ? ` · ${d.pattern}` : ""}`),
+    st ? h("span", { class: "chip-state", "data-state": st.state }, STATE_LABEL[st.state]) : null,
+    h("button", { type: "button", class: "icon-btn", "aria-label": "닫기", onclick: () => { picked = null; renderScenes(jobFrame(j.id).scenes, j); } }, icon("close", 16)));
+  const redraw = () => {
+    const box = jobFrame(j.id).scenes;
+    delete box.querySelector<HTMLElement>(".scene-edit")?.dataset.key;
+    (document.activeElement as HTMLElement | null)?.blur();
+    renderScenes(box, j);
+  };
+  if (p.error) return h("article", { class: "scene" }, headRow, h("p", { class: "err" }, p.error));
+  if (!d) return h("article", { class: "scene" }, headRow, h("p", { class: "dim" }, "불러오는 중"));
+
+  const msg = h("p", { class: "err", hidden: true });
+  const fail = (e: unknown) => { msg.hidden = false; msg.textContent = (e as Error).message; };
+  const dur = h("input", { type: "number", step: "0.1", min: "0.5", value: s.dur.toFixed(2), disabled: last, "aria-label": `${s.id} 길이(초)` });
+  const fields = d.direct && d.content ? contentFields(d.content) : [];
+  const idea = d.direct ? null : h("textarea", { rows: 3, value: s.idea, "aria-label": `${s.id} 할 일` });
+  // 감독 후보 — 고른 패턴·씨앗은 director.json pinned 에 남아 다음 짓기도 지킨다
+  let pattern = d.pattern ?? "";
+  const seed = h("input", { type: "text", value: d.pinned?.seed ?? "", placeholder: "씨앗(비우면 감독 기본)", "aria-label": "장면 씨앗", class: "seed" });
+  const cands = d.candidates.length
+    ? h("div", { class: "chips", role: "radiogroup", "aria-label": "패턴 후보" }, ...d.candidates.map((c) => h("button", {
+        type: "button", class: "chip", "aria-pressed": String(c.id === pattern), title: c.why.join(" · "),
+        onclick: (e: Event) => { pattern = c.id; for (const b of (e.currentTarget as HTMLElement).parentElement!.children) b.setAttribute("aria-pressed", String(b === e.currentTarget)); },
+      }, h("span", {}, c.id), h("span", { class: "p" }, c.score.toFixed(2)))))
+    : null;
+
+  const save = async () => {
+    const keepDur = d.content?.dur !== undefined && !last ? [["dur", Number(dur.value)]] : d.content?.dur !== undefined ? [["dur", d.content.dur]] : [];
+    const content = fields.length ? Object.fromEntries([["type", d.content!.type], ...fields.map((f) => f.read()), ...keepDur]) : undefined;
+    await api(`/api/jobs/${j.id}/scenes/${s.id}`, { method: "PATCH", body: JSON.stringify({ ...(idea ? { idea: idea.value } : {}), ...(last ? {} : { dur: Number(dur.value) }), ...(content ? { content } : {}) }) });
+  };
+  const again = async () => {
+    msg.hidden = true;
+    try {
+      await save();
+      // 감독 프로젝트의 이음매는 content.json 에 없다 — 전환은 앞뒤 장면이 정하니 조각만 다시 굽는다
+      if (d.direct && d.content) {
+        const pin = pattern && pattern !== d.pattern ? { pattern: { [s.id]: pattern } } : {};
+        const sd = seed.value.trim() && seed.value.trim() !== (d.pinned?.seed ?? "") ? { seed: { [s.id]: seed.value.trim() } } : {};
+        await api(`/api/jobs/${j.id}/rewrite`, { method: "POST", body: JSON.stringify({ scenes: [s.id], ...pin, ...sd }) });
+      } else if (idea && idea.value !== s.idea && d.model && d.model !== "claude-code") {
+        await api(`/api/jobs/${j.id}/rewrite`, { method: "POST", body: JSON.stringify({ scenes: [s.id] }) });
+      } else await api(`/api/jobs/${j.id}/redo`, { method: "POST", body: JSON.stringify({ scenes: [s.id] }) });
+    } catch (e) {
+      fail(e);
+    }
+  };
+  const replace = async (path: string, fs: File[]) => {
+    msg.hidden = true;
+    try {
+      const up = await upload(fs[0]);
+      p.detail = await api<SceneDetail>(`/api/jobs/${j.id}/scenes/${s.id}/asset`, { method: "PUT", body: JSON.stringify({ path, upload: up.path }) });
+      redraw();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const how = d.direct && d.content
+    ? "감독이 이 장면만 다시 짓고 그 조각만 다시 굽는다"
+    : d.direct
+      ? "이음매 — 앞뒤 장면을 고치면 같이 다시 굽힌다. 여기서는 조각만 다시 굽는다"
+    : idea && d.model && d.model !== "claude-code"
+      ? `할 일을 바꾸면 ${d.model} 이 이 장면만 다시 쓴다 — 아니면 조각만 다시 굽는다`
+      : "장면 파일을 세션이 고친 뒤 — 바뀐 조각만 다시 굽는다";
+  return h("article", { class: "scene" },
+    headRow,
+    ...(fields.length ? [h("div", { class: "fields" }, ...fields.map((f) => f.el))] : []),
+    idea ? h("label", { class: "field" }, h("span", {}, "할 일"), idea) : null,
+    cands ? h("div", { class: "field" }, h("span", {}, "패턴 후보"), cands) : null,
+    d.direct && d.content ? h("div", { class: "field" }, h("span", {}, "씨앗 — 같은 패턴의 다른 그림"), h("div", { class: "seed-row" }, seed,
+      h("button", { type: "button", class: "ghost small", onclick: () => { seed.value = Math.random().toString(36).slice(2, 7); } }, ...iconLabel("redo", "다른 씨앗", 14)))) : null,
+    d.assets.length
+      ? h("div", { class: "field" }, h("span", {}, "재료"), h("div", { class: "scene-assets" }, ...d.assets.map((a) => h("figure", {},
+          a.kind === "video" ? h("video", { src: a.url, muted: true, playsInline: true, preload: "metadata" }) : h("img", { src: `${a.url}?v=${Date.now()}`, alt: a.path, loading: "lazy" }),
+          h("figcaption", {}, h("span", {}, a.path), filePicker("바꾸기", a.kind === "video" ? "video/*" : "image/*", false, (fs) => void replace(a.path, fs)))))))
+      : null,
+    msg,
+    h("div", { class: "scene-acts" },
+      h("label", { class: "dur" }, h("span", {}, "초"), dur),
+      h("button", { type: "button", class: "ghost small", disabled: j.running, onclick: () => void save().then(() => (msg.hidden = true)).catch(fail) }, "저장"),
+      h("button", { type: "button", class: "primary small", disabled: j.running, onclick: () => void again() }, ...iconLabel("redo", "이 장면만 다시", 14))),
+    h("p", { class: "dim hint" }, how),
   );
 }
 

package/app/web/style.css

@@ -265,9 +265,11 @@ input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; borde
 .gen li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
 .ask { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 213, 138, 0.25); background: rgba(255, 213, 138, 0.07); color: var(--warn); font-size: 14px; }
 .ask .ghost { margin-left: auto; color: var(--ink); }
-.approve { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; }
-.approve input { accent-color: var(--sky); width: 18px; height: 18px; margin: 0; }
-.approve .dim { margin-left: auto; font-size: 12px; }
+.gen-ask { display: grid; gap: 8px; }
+.gen-ask h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--dim); }
+.gen-ask p { margin: 0; font-size: 13px; }
+.gen-ask .judged { margin: 0; min-width: 0; }
+.gen-ask .chip { max-width: 100%; white-space: normal; text-align: left; }
 
 /* ---- 04 만들기 */
 .job-grid { display: grid; gap: 24px; align-items: start; }
@@ -303,7 +305,34 @@ input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; borde
 .job-acts .primary { flex: 1 1 100%; }
 .job-scenes:not(:empty) { margin-top: 32px; }
 .job-scenes h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--dim); }
-.job-scenes .scene-bar { margin-bottom: 12px; }
+/* 장면 타임라인 — 칸마다 상태가 따로 흐른다. 글자색이 상태를, 아래 띠가 도는 중을 말한다 */
+.timeline { display: flex; gap: 2px; height: 56px; margin-bottom: 12px; border-radius: 10px; overflow: hidden; }
+.timeline .cell { position: relative; min-height: 0; height: 100%; padding: 0 10px; border: 0; border-radius: 0; justify-content: stretch; text-align: left; font-size: 13px; color: var(--ink); }
+.timeline .cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sky); }
+@media (hover: hover) { .timeline .cell:hover { filter: brightness(1.25); } }
+.timeline .cs { font-family: var(--sans); font-size: 12px; color: var(--dim); }
+.timeline [data-state="done"] .cs, .timeline [data-state="reused"] .cs { color: var(--ok); }
+.timeline [data-state="failed"] .cs { color: var(--bad); }
+.timeline [data-state="writing"] .cs, .timeline [data-state="assets"] .cs, .timeline [data-state="render"] .cs, .timeline [data-state="check"] .cs { color: var(--sky); }
+.timeline .run { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--sky), transparent) 0 0 / 50% 100% no-repeat; animation: sweep 1.1s linear infinite; }
+@keyframes sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
+.scene-edit .hint { margin: 0; font-size: 13px; }
+.scene-edit .scene { animation: enter 200ms var(--ease); }
+.scene-edit .scene header .st { margin-left: 0; margin-right: auto; }
+.chip-state { padding: 2px 8px; border-radius: 999px; font-size: 12px; color: var(--dim); background: var(--raised); }
+.chip-state[data-state="done"], .chip-state[data-state="reused"] { color: var(--ok); }
+.chip-state[data-state="failed"] { color: var(--bad); }
+.scene-edit .fields { display: grid; gap: 10px; }
+.scene-edit .field { display: grid; gap: 6px; font-size: 12px; color: var(--dim); }
+.scene-edit .field textarea.mono { font-family: var(--mono); font-size: 13px; }
+.scene-edit input[type="number"]:not(.dur input), .scene-edit .seed { min-height: 38px; padding: 0 10px; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
+.seed-row { display: flex; gap: 8px; }
+.seed-row .seed { flex: 1; min-width: 0; font-family: var(--mono); }
+.scene-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
+.scene-assets figure { margin: 0; display: grid; gap: 6px; }
+.scene-assets img, .scene-assets video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: var(--stage); }
+.scene-assets figcaption { display: grid; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
+.scene-assets .pick { margin-top: 0; min-height: 34px; justify-content: center; }
 .scene-list { display: grid; gap: 12px; }
 .scene { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
 .scene header { display: flex; align-items: center; gap: 8px; }
@@ -383,6 +412,10 @@ input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; borde
   .plan-stage { height: 180px; }
   .scene textarea, .dur input { font-size: 16px; }
   .scene-bar.big { height: 52px; }
+  /* 장면이 많으면 폰 폭에 안 들어간다 — 칸 최소 폭을 두고 옆으로 민다 */
+  .timeline { overflow-x: auto; }
+  .timeline .cell { min-width: 64px; }
+  .scene-edit .seed, .scene-edit input[type="number"] { font-size: 16px; }
   .scene-rows li { grid-template-columns: 10px minmax(0, 1fr) auto; row-gap: 4px; }
   .scene-rows .si { grid-column: 2 / -1; }
   .foot {

package/bin/hooks.mjs

@@ -21,11 +21,24 @@ function packageExports(name) {
   return exportsCache.get(name);
 }
 
+// 「./*」 같은 무늬 키도 Node 의 exports 처럼 * 하나를 갈아 끼워 푼다 — 감독이 짓는 장면이 @kasaframe/patterns/<type>/<이름> 으로 부른다
+function exportTarget(exp, sub) {
+  if (typeof exp[sub] === "string") return exp[sub];
+  for (const [k, v] of Object.entries(exp)) {
+    const star = k.indexOf("*");
+    if (star < 0 || typeof v !== "string") continue;
+    const pre = k.slice(0, star);
+    const post = k.slice(star + 1);
+    if (sub.length > pre.length + post.length && sub.startsWith(pre) && sub.endsWith(post)) return v.replace("*", sub.slice(pre.length, sub.length - post.length));
+  }
+  return null;
+}
+
 function kasaframeUrl(specifier) {
   const m = /^@kasaframe\/([^/]+)(\/.+)?$/.exec(specifier);
   if (!m) return null;
   const pkg = packageExports(m[1]);
-  const target = pkg?.exp?.[m[2] ? `.${m[2]}` : "."];
+  const target = pkg?.exp && exportTarget(pkg.exp, m[2] ? `.${m[2]}` : ".");
   return typeof target === "string" ? new URL(target, pkg.dir).href : null;
 }
 

package/bin/kf.mjs

@@ -1,11 +1,29 @@
 #!/usr/bin/env node
 // 설치된 패키지의 kf 입구. 소스는 .ts 그대로 실려 있는데, Node 는 node_modules 안의 .ts 는 형을 지워 주지 않는다 — hooks.mjs 가 대신 지워 들인다.
+import { existsSync, mkdirSync, rmSync, symlinkSync } from "node:fs";
+import { homedir } from "node:os";
+import { delimiter, join } from "node:path";
+
+// 형 지우기는 esbuild 가 하고 Node 에선 module.registerHooks 만 빌린다 — 그게 22.15 에 들어왔다
 const [major, minor] = process.versions.node.split(".").map(Number);
-if (major < 22 || (major === 22 && minor < 18)) {
-  console.error(`kasaframe 은 Node 22.18 이상에서 돈다(지금 ${process.version}). https://nodejs.org 에서 22 LTS 이상을 깔고 다시.`);
+if (major < 22 || (major === 22 && minor < 15)) {
+  console.error(`kasaframe 은 Node 22.15 이상에서 돈다(지금 ${process.version}). https://nodejs.org 에서 22 LTS 이상을 깔고 다시.`);
   process.exit(1);
 }
 
+// ffmpeg 이 PATH 에 없고 다른 이름·자리(정적 빌드 등)에만 있는 환경 — 코드 곳곳이 "ffmpeg" 이름으로 부르니 이름 맞춘 링크를 PATH 앞에 둔다
+const tools = { ffmpeg: process.env.KF_FFMPEG ?? process.env.FFMPEG_PATH, ffprobe: process.env.KF_FFPROBE ?? process.env.FFPROBE_PATH };
+if (tools.ffmpeg || tools.ffprobe) {
+  const dir = join(homedir(), ".cache", "kasaframe", "bin");
+  mkdirSync(dir, { recursive: true });
+  for (const [name, target] of Object.entries(tools)) {
+    if (!target || !existsSync(target)) continue;
+    rmSync(join(dir, name), { force: true });
+    symlinkSync(target, join(dir, name));
+  }
+  if (!(process.env.PATH ?? "").split(delimiter).includes(dir)) process.env.PATH = `${dir}${delimiter}${process.env.PATH ?? ""}`;
+}
+
 const hooks = new URL("./hooks.mjs", import.meta.url).href;
 // kf 가 자식으로 띄우는 kf(make → new·render·check 따위)도 같은 훅을 타야 .ts 를 읽는다
 if (!(process.env.NODE_OPTIONS ?? "").includes(hooks)) process.env.NODE_OPTIONS = `${process.env.NODE_OPTIONS ?? ""} --import=${hooks}`.trim();