scripttrace 0.1.0__py3-none-any.whl

scripttrace/static/app.js

@@ -0,0 +1,971 @@
+const $ = (id) => document.getElementById(id);
+
+const appEl = $("app");
+const projectList = $("projectList");
+const uploadHint = $("uploadHint");
+const dropLabel = $("dropLabel");
+const paneBody = $("paneBody");
+const titleInput = $("titleInput");
+const fileMeta = $("fileMeta");
+const saveState = $("saveState");
+const panes = $("panes");
+const emptyState = $("emptyState");
+const btnSidebar = $("btnSidebar");
+
+const SIDEBAR_KEY = "scripttrace.sidebarCollapsed";
+const CHUNK = 48;
+const KIND_LABEL = {
+  dialogue: "对白",
+  action: "动作",
+  scene: "场次",
+  episode: "集数",
+  heading: "标题",
+  other: "其他",
+};
+
+let project = null;
+let saveTimer = null;
+let activeBlockId = null;
+let renamingId = null;
+let renderGen = 0;
+let editingEl = null;
+
+function setSaveState(text) {
+  saveState.textContent = text;
+  saveState.className = "status";
+  if (text === "未保存") saveState.classList.add("dirty");
+  else if (text.startsWith("保存失败")) saveState.classList.add("err");
+  else if (text.startsWith("加载") || text === "保存中…" || text === "正在导入…") saveState.classList.add("busy");
+  else saveState.classList.add("ok");
+}
+
+function isDirty() {
+  return saveState.textContent === "未保存";
+}
+
+function showWorkspace(on) {
+  panes.hidden = !on;
+  emptyState.hidden = on;
+  titleInput.disabled = !on;
+  $("editorActions").hidden = !on;
+  if (!on) {
+    titleInput.value = "";
+    fileMeta.textContent = "";
+    titleInput.placeholder = "从左侧导入或选择一个剧本";
+  }
+}
+
+function isSidebarCollapsed() {
+  return appEl.classList.contains("sidebar-collapsed");
+}
+
+function applySidebar(collapsed) {
+  appEl.classList.toggle("sidebar-collapsed", collapsed);
+  btnSidebar.textContent = collapsed ? "›" : "‹";
+  btnSidebar.title = collapsed ? "展开项目栏" : "折叠项目栏";
+  btnSidebar.setAttribute("aria-expanded", String(!collapsed));
+  const emptyBtn = $("btnEmptySidebar");
+  if (emptyBtn) emptyBtn.hidden = !collapsed;
+  try {
+    localStorage.setItem(SIDEBAR_KEY, collapsed ? "1" : "0");
+  } catch {
+    /* ignore */
+  }
+}
+
+function toggleSidebar() {
+  applySidebar(!isSidebarCollapsed());
+}
+
+function initSidebar() {
+  let collapsed = false;
+  try {
+    collapsed = localStorage.getItem(SIDEBAR_KEY) === "1";
+  } catch {
+    collapsed = false;
+  }
+  applySidebar(collapsed);
+}
+
+async function showEditor(data) {
+  project = data;
+  renamingId = null;
+  activeBlockId = null;
+  editingEl = null;
+  showWorkspace(true);
+  titleInput.value = data.title || "";
+  const src = data.source || {};
+  fileMeta.textContent = src.filename
+    ? `来源 ${src.filename} · ${data.blocks.length} 段 · 原文已锁定`
+    : "原文已锁定";
+  setSaveState("加载中…");
+  await renderPanes();
+  applyPairFilter();
+  setSaveState("已保存");
+  loadProjects();
+}
+
+async function errorText(res) {
+  const t = await res.text();
+  try {
+    const j = JSON.parse(t);
+    return j.detail || t;
+  } catch {
+    return t;
+  }
+}
+
+function defaultTitleFromFilename(filename) {
+  if (!filename) return "未命名";
+  const base = filename.replace(/^.*[\\/]/, "");
+  return base.replace(/\.[^.]+$/, "") || base;
+}
+
+async function loadProjects() {
+  const items = await (await fetch("/api/projects")).json();
+  projectList.innerHTML = "";
+  if (!items.length) {
+    const li = document.createElement("li");
+    li.className = "empty";
+    li.textContent = "还没有项目";
+    projectList.append(li);
+    return;
+  }
+  for (const item of items) {
+    const li = document.createElement("li");
+    li.className = "project-item";
+    if (project && project.id === item.id) li.classList.add("active");
+    li.dataset.id = item.id;
+
+    if (renamingId === item.id) {
+      const input = document.createElement("input");
+      input.className = "name-input";
+      input.value = item.title || "";
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commitRename(item.id, input.value);
+        }
+        if (e.key === "Escape") {
+          renamingId = null;
+          loadProjects();
+        }
+      });
+      const actions = document.createElement("div");
+      actions.className = "rename-actions";
+      const save = document.createElement("button");
+      save.type = "button";
+      save.className = "save-name";
+      save.textContent = "确定";
+      save.addEventListener("click", () => commitRename(item.id, input.value));
+      const cancel = document.createElement("button");
+      cancel.type = "button";
+      cancel.className = "cancel-name";
+      cancel.textContent = "取消";
+      cancel.addEventListener("click", () => {
+        renamingId = null;
+        loadProjects();
+      });
+      actions.append(save, cancel);
+      const meta = document.createElement("span");
+      meta.className = "meta";
+      meta.textContent = `${item.block_count} 段`;
+      li.append(input, actions, meta);
+      projectList.append(li);
+      input.focus();
+      input.select();
+      continue;
+    }
+
+    const name = document.createElement("button");
+    name.type = "button";
+    name.className = "name";
+    name.textContent = item.title || defaultTitleFromFilename(item.source_filename);
+    name.title = "打开";
+    name.addEventListener("click", (e) => {
+      e.stopPropagation();
+      openProject(item.id);
+    });
+    name.addEventListener("dblclick", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startRename(item.id);
+    });
+
+    const ops = document.createElement("div");
+    ops.className = "item-ops";
+    const rename = document.createElement("button");
+    rename.type = "button";
+    rename.className = "rename";
+    rename.textContent = "改名";
+    rename.addEventListener("click", (e) => {
+      e.stopPropagation();
+      startRename(item.id);
+    });
+    const del = document.createElement("button");
+    del.type = "button";
+    del.className = "delete";
+    del.textContent = "删除";
+    del.addEventListener("click", (e) => {
+      e.stopPropagation();
+      deleteProject(item.id, item.title || defaultTitleFromFilename(item.source_filename));
+    });
+    ops.append(rename, del);
+
+    const meta = document.createElement("span");
+    meta.className = "meta";
+    const src = item.source_filename ? ` · ${item.source_filename}` : "";
+    meta.textContent = `${item.block_count} 段${src}`;
+
+    li.addEventListener("click", () => openProject(item.id));
+    li.append(name, ops, meta);
+    projectList.append(li);
+  }
+}
+
+function startRename(id) {
+  renamingId = id;
+  loadProjects();
+}
+
+async function deleteProject(id, title) {
+  const ok = window.confirm(`确定删除「${title}」？\n原文和改稿都会从本机删掉，不可恢复。`);
+  if (!ok) return;
+  const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
+  if (!res.ok) {
+    uploadHint.textContent = await errorText(res);
+    return;
+  }
+  if (project && project.id === id) {
+    project = null;
+    renderGen += 1;
+    paneBody.innerHTML = "";
+    showWorkspace(false);
+  }
+  loadProjects();
+}
+
+async function commitRename(id, raw) {
+  const title = (raw || "").trim() || "未命名";
+  const res = await fetch(`/api/projects/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ title }),
+  });
+  renamingId = null;
+  if (!res.ok) {
+    uploadHint.textContent = await errorText(res);
+    loadProjects();
+    return;
+  }
+  const data = await res.json();
+  if (project && project.id === id) {
+    project.title = data.title;
+    titleInput.value = data.title;
+  }
+  loadProjects();
+}
+
+async function openProject(id) {
+  if (project && project.id !== id) await saveNow();
+  const res = await fetch(`/api/projects/${id}`);
+  if (!res.ok) {
+    uploadHint.textContent = await errorText(res);
+    return;
+  }
+  showEditor(await res.json());
+}
+
+function escapeHtml(text) {
+  return text
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function renderOps(ops, side) {
+  return ops
+    .map((op) => {
+      const t = escapeHtml(op.text);
+      if (op.op === "equal") return t;
+      if (side === "left" && op.op === "delete") return `<del>${t}</del>`;
+      if (side === "right" && op.op === "insert") return `<ins>${t}</ins>`;
+      if (side === "left" && op.op === "insert") return "";
+      if (side === "right" && op.op === "delete") return "";
+      return t;
+    })
+    .join("");
+}
+
+function fillText(el, ops, side) {
+  if (ops.length === 1 && ops[0].op === "equal") {
+    el.textContent = ops[0].text;
+    return;
+  }
+  el.innerHTML = renderOps(ops, side);
+}
+
+async function fetchOps(original, revised) {
+  if (original === revised) {
+    return [{ op: "equal", text: original }];
+  }
+  const res = await fetch("/api/diff", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ original, revised }),
+  });
+  const data = await res.json();
+  return data.ops || [{ op: "equal", text: original }];
+}
+
+function blockTag(block) {
+  const kind = KIND_LABEL[block.kind] || block.kind;
+  return [kind, block.speaker, block.episode ? `${block.episode}集` : "", block.scene]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+function setEditable(el, on) {
+  if (!on) {
+    el.contentEditable = "false";
+    return;
+  }
+  el.contentEditable = "plaintext-only";
+  if (el.contentEditable !== "plaintext-only") el.contentEditable = "true";
+}
+
+function isAnnotated(block) {
+  return Boolean(String(block.note || "").trim() || block.score);
+}
+
+function makeAnnotate(block) {
+  if (block.note == null) block.note = "";
+  if (block.score == null) block.score = null;
+  const wrap = document.createElement("div");
+  wrap.className = "annotate";
+  if (isAnnotated(block)) wrap.classList.add("has-note");
+  const head = document.createElement("div");
+  head.className = "annotate-head";
+  head.innerHTML = "<span>批注</span><span>不是改台词</span>";
+  const scoreRow = document.createElement("div");
+  scoreRow.className = "score-row";
+  const label = document.createElement("span");
+  label.className = "score-label";
+  label.textContent = "打分";
+  const stars = document.createElement("div");
+  stars.className = "stars";
+  stars.title = "给这句话打分（再点一次取消）";
+  for (let n = 1; n <= 5; n += 1) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "star";
+    btn.textContent = "★";
+    if (block.score && n <= Number(block.score)) btn.classList.add("on");
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      highlightBlock(block.id);
+      const next = block.score === n ? null : n;
+      block.score = next;
+      [...stars.children].forEach((el, i) => el.classList.toggle("on", next != null && i < next));
+      wrap.classList.toggle("has-note", isAnnotated(block));
+      wrap.closest(".pair")?.classList.toggle("annotated", isAnnotated(block));
+      setSaveState("未保存");
+      scheduleSave();
+      applyPairFilter();
+    });
+    stars.append(btn);
+  }
+  const ta = document.createElement("textarea");
+  ta.rows = 3;
+  ta.placeholder = "为什么要改？例如：太文言 / 情绪直给 / 不像这个人说话";
+  ta.value = block.note || "";
+  ta.addEventListener("input", () => {
+    block.note = ta.value;
+    wrap.classList.toggle("has-note", isAnnotated(block));
+    wrap.closest(".pair")?.classList.toggle("annotated", isAnnotated(block));
+    setSaveState("未保存");
+    scheduleSave();
+  });
+  ta.addEventListener("focus", () => highlightBlock(block.id));
+  scoreRow.append(label, stars);
+  wrap.append(head, scoreRow, ta);
+  return wrap;
+}
+
+function makePair(block, ops, index) {
+  const pair = document.createElement("div");
+  pair.className = `pair kind-${block.kind}`;
+  pair.dataset.id = block.id;
+  pair.dataset.line = String(index + 1);
+  if (block.original !== block.revised) pair.classList.add("changed");
+  if (isAnnotated(block)) pair.classList.add("annotated");
+  const tag = blockTag(block);
+
+  const num = document.createElement("div");
+  num.className = "line-no";
+  num.textContent = String(index + 1);
+  num.title = `第 ${index + 1} 行`;
+
+  const left = document.createElement("article");
+  left.className = `block kind-${block.kind} block-orig`;
+  const leftTag = document.createElement("div");
+  leftTag.className = "tag";
+  leftTag.textContent = tag;
+  const orig = document.createElement("div");
+  orig.className = "orig";
+  orig.contentEditable = "false";
+  fillText(orig, ops, "left");
+  left.append(leftTag, orig);
+
+  const right = document.createElement("article");
+  right.className = `block kind-${block.kind} block-rev`;
+  const rightTag = document.createElement("div");
+  rightTag.className = "tag";
+  rightTag.textContent = tag;
+  const rev = document.createElement("div");
+  rev.className = "rev";
+  rev.contentEditable = "false";
+  rev.spellcheck = false;
+  rev.dataset.id = block.id;
+  rev.setAttribute("role", "textbox");
+  fillText(rev, ops, "right");
+  rev.addEventListener("input", () => onEdit(block.id, rev));
+  rev.addEventListener("focus", () => highlightBlock(block.id));
+  right.append(rightTag, rev);
+
+  pair.addEventListener("mousedown", (e) => {
+    highlightBlock(block.id);
+    if (e.target.closest(".annotate")) return;
+    if (e.target.closest(".rev")) {
+      if (editingEl && editingEl !== rev) setEditable(editingEl, false);
+      setEditable(rev, true);
+      editingEl = rev;
+    }
+  });
+  pair.append(num, left, right, makeAnnotate(block));
+  return pair;
+}
+
+async function renderPanes() {
+  const gen = ++renderGen;
+  paneBody.innerHTML = "";
+  const blocks = project.blocks;
+  const total = blocks.length;
+  for (let i = 0; i < total; i += CHUNK) {
+    if (gen !== renderGen) return;
+    const frag = document.createDocumentFragment();
+    const slice = blocks.slice(i, i + CHUNK);
+    for (let j = 0; j < slice.length; j += 1) {
+      const block = slice[j];
+      const ops =
+        block.original === block.revised
+          ? [{ op: "equal", text: block.original }]
+          : await fetchOps(block.original, block.revised);
+      if (gen !== renderGen) return;
+      frag.append(makePair(block, ops, i + j));
+    }
+    paneBody.append(frag);
+    setSaveState(`加载中 ${Math.min(i + CHUNK, total)}/${total}`);
+    await new Promise((r) => requestAnimationFrame(r));
+  }
+  if (activeBlockId) highlightBlock(activeBlockId);
+}
+
+function highlightBlock(id) {
+  if (activeBlockId && activeBlockId !== id) {
+    const prev = paneBody.querySelector(".pair.active");
+    if (prev) prev.classList.remove("active");
+  }
+  const next = paneBody.querySelector(`[data-id="${CSS.escape(id)}"].pair`);
+  if (next) next.classList.add("active");
+  activeBlockId = id;
+}
+
+function onEdit(id, el) {
+  const block = project.blocks.find((b) => b.id === id);
+  if (!block) return;
+  highlightBlock(id);
+  block.revised = el.innerText.replace(/\u00a0/g, " ");
+  const pair = el.closest(".pair");
+  if (pair) pair.classList.toggle("changed", block.original !== block.revised);
+  setSaveState("未保存");
+  clearTimeout(saveTimer);
+  saveTimer = setTimeout(() => refreshBlock(id, el), 280);
+  scheduleSave();
+}
+
+async function refreshBlock(id, el) {
+  const block = project.blocks.find((b) => b.id === id);
+  if (!block) return;
+  const ops = await fetchOps(block.original, block.revised);
+  const pair = el.closest(".pair");
+  const orig = pair ? pair.querySelector(".orig") : null;
+  if (orig) fillText(orig, ops, "left");
+  const pos = saveCaret(el);
+  fillText(el, ops, "right");
+  restoreCaret(el, pos);
+  if (pair) pair.classList.toggle("changed", block.original !== block.revised);
+  applyPairFilter();
+}
+
+function saveCaret(el) {
+  const sel = window.getSelection();
+  if (!sel.rangeCount) return el.innerText.length;
+  const range = sel.getRangeAt(0);
+  const pre = range.cloneRange();
+  pre.selectNodeContents(el);
+  pre.setEnd(range.endContainer, range.endOffset);
+  return pre.toString().length;
+}
+
+function restoreCaret(el, index) {
+  const sel = window.getSelection();
+  const range = document.createRange();
+  let remaining = index;
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  let node = walk.nextNode();
+  while (node) {
+    const len = node.textContent.length;
+    if (remaining <= len) {
+      range.setStart(node, remaining);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      return;
+    }
+    remaining -= len;
+    node = walk.nextNode();
+  }
+}
+
+function scheduleSave() {
+  clearTimeout(scheduleSave.t);
+  scheduleSave.t = setTimeout(saveNow, 1200);
+}
+
+async function saveNow() {
+  if (!project) return;
+  setSaveState("保存中…");
+  const res = await fetch(`/api/projects/${project.id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      title: titleInput.value,
+      blocks: project.blocks.map((b) => ({
+        id: b.id,
+        revised: b.revised,
+        note: b.note || "",
+        score: b.score ?? null,
+      })),
+    }),
+  });
+  if (!res.ok) {
+    setSaveState("保存失败");
+    return;
+  }
+  const data = await res.json();
+  project.title = data.title;
+  titleInput.value = data.title;
+  setSaveState("已保存");
+  if (!renamingId) loadProjects();
+}
+
+async function uploadFile(file) {
+  uploadHint.textContent = "";
+  dropLabel.textContent = "正在导入…";
+  $("dropZone").classList.add("busy");
+  setSaveState("正在导入…");
+  const body = new FormData();
+  body.append("file", file);
+  try {
+    const res = await fetch("/api/projects", { method: "POST", body });
+    if (!res.ok) {
+      uploadHint.textContent = await errorText(res);
+      return;
+    }
+    await showEditor(await res.json());
+  } catch (err) {
+    uploadHint.textContent = err && err.message ? err.message : "导入失败";
+  } finally {
+    dropLabel.textContent = "拖入或点击上传";
+    $("dropZone").classList.remove("busy");
+  }
+}
+
+function pairAtViewport(scroller) {
+  const top = scroller.scrollTop;
+  const anchor = top + Math.min(120, scroller.clientHeight * 0.25);
+  let best = null;
+  let bestDist = Infinity;
+  for (const el of scroller.children) {
+    if (el.classList.contains("is-hidden")) continue;
+    const mid = el.offsetTop + el.offsetHeight / 2;
+    const dist = Math.abs(mid - anchor);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = el;
+    }
+  }
+  return best;
+}
+
+function editFilter() {
+  const on = document.querySelector(".seg-btn.on");
+  return (on && on.dataset.filter) || "all";
+}
+
+function applyPairFilter() {
+  const q = ($("searchInput").value || "").trim().toLowerCase();
+  const edit = editFilter();
+  const noted = $("onlyAnnotated").checked;
+  let shown = 0;
+  let changed = 0;
+  let annotated = 0;
+  for (const el of paneBody.children) {
+    if (el.classList.contains("changed")) changed += 1;
+    if (el.classList.contains("annotated")) annotated += 1;
+    const text = el.innerText.toLowerCase();
+    const isChanged = el.classList.contains("changed");
+    const visible =
+      (edit === "all" || (edit === "changed" && isChanged) || (edit === "unchanged" && !isChanged)) &&
+      (!noted || el.classList.contains("annotated")) &&
+      (!q || text.includes(q));
+    el.classList.toggle("is-hidden", !visible);
+    if (visible) shown += 1;
+  }
+  const total = paneBody.children.length;
+  $("changeCount").textContent = `显示 ${shown}/${total} · 已改 ${changed} · 未改 ${total - changed} · 批注 ${annotated}`;
+}
+
+function gotoChanged(dir) {
+  const nodes = [...paneBody.querySelectorAll(".pair")].filter((el) => !el.classList.contains("is-hidden"));
+  if (!nodes.length) return;
+  const current = paneBody.querySelector(".pair.active");
+  let idx = current ? nodes.indexOf(current) : -1;
+  idx = dir > 0 ? idx + 1 : idx - 1;
+  if (idx < 0) idx = nodes.length - 1;
+  if (idx >= nodes.length) idx = 0;
+  const el = nodes[idx];
+  el.scrollIntoView({ block: "center" });
+  highlightBlock(el.dataset.id);
+  const rev = el.querySelector(".rev");
+  if (rev) {
+    if (editingEl && editingEl !== rev) setEditable(editingEl, false);
+    setEditable(rev, true);
+    editingEl = rev;
+    rev.focus();
+  }
+}
+
+function bindDropTarget(el) {
+  if (!el) return;
+  ["dragenter", "dragover"].forEach((ev) => {
+    el.addEventListener(ev, (e) => {
+      e.preventDefault();
+      $("dropZone").classList.add("over");
+    });
+  });
+  ["dragleave", "drop"].forEach((ev) => {
+    el.addEventListener(ev, (e) => {
+      e.preventDefault();
+      $("dropZone").classList.remove("over");
+    });
+  });
+  el.addEventListener("drop", (e) => {
+    const file = e.dataTransfer.files[0];
+    if (file) uploadFile(file);
+  });
+}
+
+let previewKind = "full";
+let previewData = null;
+
+const PREVIEW_META = {
+  full: {
+    hint: "现有完整 JSON：全部段落、字级 ops、SFT。预览只显示前 40 段，下载为完整文件。",
+    href: (id) => `/api/projects/${id}/export.json`,
+  },
+  trace: {
+    hint: "修改轨迹：只含改过的句子，记录删除/新增、批注和打分。",
+    href: (id) => `/api/projects/${id}/export.trace.json`,
+  },
+  sft: {
+    hint: "SFT JSONL：只含改过的对白，每行一条训练样本（含批注与分数）。",
+    href: (id) => `/api/projects/${id}/export.sft.jsonl`,
+  },
+};
+
+function closePreview() {
+  $("exportModal").hidden = true;
+}
+
+function buildLocalPreview() {
+  const blocks = project.blocks || [];
+  const fullBlocks = [];
+  const traces = [];
+  const sft = [];
+  let annotated = 0;
+  let scored = 0;
+  for (const b of blocks) {
+    const original = b.original || "";
+    const revised = b.revised ?? original;
+    const isChanged = original !== revised;
+    const note = b.note || "";
+    const score = b.score ?? null;
+    if (String(note).trim()) annotated += 1;
+    if (score) scored += 1;
+    const item = { ...b, original, revised, changed: isChanged, note, score, ops: [] };
+    fullBlocks.push(item);
+    if (!isChanged) continue;
+    traces.push({
+      block_id: b.id,
+      kind: b.kind,
+      speaker: b.speaker,
+      episode: b.episode,
+      scene: b.scene,
+      original,
+      revised,
+      ops: [],
+      deleted: [],
+      inserted: [],
+      note,
+      score,
+    });
+    if (b.kind !== "dialogue") continue;
+    const meta = [];
+    if (b.episode) meta.push(`第${b.episode}集`);
+    if (b.scene) meta.push(`场次 ${b.scene}`);
+    if (b.speaker) meta.push(`角色 ${b.speaker}`);
+    sft.push({
+      input: `${meta.join(" ")}\n【原文台词】\n${original}`.trim(),
+      output: revised,
+      block_id: b.id,
+      kind: b.kind,
+      speaker: b.speaker,
+      episode: b.episode,
+      scene: b.scene,
+      note,
+      score,
+    });
+  }
+  return {
+    stats: {
+      blocks: blocks.length,
+      changed: traces.length,
+      annotated,
+      scored,
+      sft: sft.length,
+    },
+    full: {
+      schema: "scripttrace.v1",
+      id: project.id,
+      title: project.title,
+      source: project.source,
+      blocks: fullBlocks,
+      sft,
+    },
+    sft,
+    trace: {
+      schema: "scripttrace.trace.v1",
+      id: project.id,
+      title: project.title,
+      changed_count: traces.length,
+      traces,
+    },
+  };
+}
+
+function extraPreviewNote(shown, total, unit) {
+  const rest = Math.max(0, (total ?? shown) - shown);
+  return rest > 0 ? `\n\n… 另有 ${rest} ${unit}，请下载完整文件` : "";
+}
+
+function renderPreview() {
+  if (!previewData || !project) return;
+  const stats = previewData.stats || {};
+  $("previewStats").innerHTML = [
+    ["总段数", stats.blocks],
+    ["已修改", stats.changed],
+    ["已批注", stats.annotated],
+    ["已打分", stats.scored],
+    ["SFT 条数", stats.sft],
+  ]
+    .map(([label, value]) => `<div class="stat"><b>${value ?? 0}</b><span>${label}</span></div>`)
+    .join("");
+
+  document.querySelectorAll("#previewTabs .tab").forEach((el) => {
+    el.classList.toggle("on", el.dataset.kind === previewKind);
+  });
+  $("previewHint").textContent = PREVIEW_META[previewKind].hint;
+  $("btnDownload").href = PREVIEW_META[previewKind].href(project.id);
+
+  const limit = 40;
+  let text = "";
+  if (previewKind === "sft") {
+    const rows = previewData.sft || [];
+    const shown = rows.slice(0, limit);
+    text = shown.map((row) => JSON.stringify(row, null, 2)).join("\n\n");
+    text += extraPreviewNote(shown.length, stats.sft ?? rows.length, "条");
+  } else if (previewKind === "trace") {
+    const traces = previewData.trace?.traces || [];
+    const shown = traces.slice(0, limit);
+    text = JSON.stringify({ ...previewData.trace, traces: shown }, null, 2);
+    text += extraPreviewNote(shown.length, stats.changed ?? traces.length, "条轨迹");
+  } else {
+    const full = previewData.full || {};
+    const blocks = full.blocks || [];
+    const shown = blocks.slice(0, limit);
+    text = JSON.stringify(
+      { ...full, blocks: shown, sft: (full.sft || []).slice(0, 20) },
+      null,
+      2,
+    );
+    text += extraPreviewNote(shown.length, stats.blocks ?? blocks.length, "段");
+  }
+  $("previewBody").textContent = text || "（暂无数据）";
+}
+
+async function openPreview() {
+  if (!project) return;
+  previewKind = "full";
+  previewData = buildLocalPreview();
+  $("exportModal").hidden = false;
+  renderPreview();
+  try {
+    await saveNow();
+    const res = await fetch(`/api/projects/${project.id}/preview`);
+    if (!res.ok) {
+      $("previewHint").textContent =
+        `${PREVIEW_META[previewKind].hint} 服务端预览暂不可用（${await errorText(res)}），当前为本地预览。下载前请确认已重启服务。`;
+      return;
+    }
+    previewData = await res.json();
+    renderPreview();
+  } catch (err) {
+    $("previewHint").textContent =
+      `${PREVIEW_META[previewKind].hint} 预览刷新失败：${err && err.message ? err.message : err}`;
+  }
+}
+
+paneBody.addEventListener(
+  "scroll",
+  () => {
+    const focused = document.activeElement;
+    if (focused && focused.classList.contains("rev")) return;
+    const el = pairAtViewport(paneBody);
+    if (el) highlightBlock(el.dataset.id);
+  },
+  { passive: true },
+);
+
+paneBody.addEventListener("beforeinput", (e) => {
+  if (e.target.closest(".orig")) e.preventDefault();
+});
+paneBody.addEventListener("paste", (e) => {
+  if (e.target.closest(".orig")) e.preventDefault();
+});
+paneBody.addEventListener("drop", (e) => {
+  if (e.target.closest(".orig")) e.preventDefault();
+});
+
+function on(id, ev, fn) {
+  const el = typeof id === "string" ? $(id) : id;
+  if (el) el.addEventListener(ev, fn);
+}
+
+btnSidebar.addEventListener("click", (e) => {
+  e.stopPropagation();
+  toggleSidebar();
+});
+on("btnSidebarBar", "click", toggleSidebar);
+on("btnEmptySidebar", "click", (e) => {
+  e.stopPropagation();
+  applySidebar(false);
+});
+on("btnEmptyImport", "click", (e) => {
+  e.stopPropagation();
+  $("fileInput").click();
+});
+on("emptyState", "click", (e) => {
+  if (e.target.closest("button")) return;
+  $("fileInput").click();
+});
+on("sidebar", "click", () => {
+  if (isSidebarCollapsed()) applySidebar(false);
+});
+on("btnSave", "click", saveNow);
+titleInput.addEventListener("input", () => {
+  setSaveState("未保存");
+  scheduleSave();
+});
+titleInput.addEventListener("change", () => saveNow());
+on("searchInput", "input", applyPairFilter);
+on("onlyAnnotated", "change", applyPairFilter);
+on(document.querySelector(".seg"), "click", (e) => {
+  const btn = e.target.closest(".seg-btn");
+  if (!btn) return;
+  document.querySelectorAll(".seg-btn").forEach((el) => el.classList.toggle("on", el === btn));
+  applyPairFilter();
+});
+on("btnPrevChange", "click", () => gotoChanged(-1));
+on("btnNextChange", "click", () => gotoChanged(1));
+on("btnPreview", "click", openPreview);
+on("btnClosePreview", "click", closePreview);
+on("exportModal", "click", (e) => {
+  if (e.target.id === "exportModal") closePreview();
+});
+on("previewTabs", "click", (e) => {
+  const tab = e.target.closest(".tab");
+  if (!tab) return;
+  previewKind = tab.dataset.kind;
+  renderPreview();
+});
+on("btnDownload", "click", async (e) => {
+  if (!project) return;
+  e.preventDefault();
+  const href = PREVIEW_META[previewKind].href(project.id);
+  try {
+    await saveNow();
+  } catch {
+    /* still download current server copy */
+  }
+  window.location.href = href;
+});
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !$("exportModal").hidden) {
+    e.preventDefault();
+    closePreview();
+    return;
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
+    e.preventDefault();
+    saveNow();
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key === "ArrowDown") {
+    e.preventDefault();
+    gotoChanged(1);
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key === "ArrowUp") {
+    e.preventDefault();
+    gotoChanged(-1);
+  }
+});
+window.addEventListener("beforeunload", (e) => {
+  if (!isDirty()) return;
+  e.preventDefault();
+  e.returnValue = "";
+});
+
+const dropZone = $("dropZone");
+const fileInput = $("fileInput");
+fileInput.addEventListener("change", () => {
+  if (fileInput.files[0]) uploadFile(fileInput.files[0]);
+  fileInput.value = "";
+});
+bindDropTarget(dropZone);
+bindDropTarget($("emptyState"));
+bindDropTarget($("workspace"));
+
+initSidebar();
+loadProjects();