@orangeworks/orangetree 0.4.0

package/dist/public/chat.js

@@ -0,0 +1,890 @@
+import { esc, md } from "./md.js";
+import { toast } from "./api.js";
+import { copyText } from "./ui.js";
+import { t, t as tr, currentLocale } from "./i18n.js";
+import { nodeOwnDocs, baseName } from "./insight.js";
+import { SlashMenu } from "./slash.js";
+const STATUS_VIEW = {
+  preparing: { icon: "\u23F3", labelKey: "chat.st.preparing" },
+  in_progress: { icon: "\u{1F343}", labelKey: "chat.st.in_progress" },
+  blocked: { icon: "\u{1FAA8}", labelKey: "chat.st.blocked" },
+  waiting_handoff: { icon: "\u{1F338}", labelKey: "chat.st.waiting_handoff" },
+  review: { icon: "\u{1F33A}", labelKey: "chat.st.review" },
+  done: { icon: "\u{1F34A}", labelKey: "chat.st.done" }
+};
+function relTime(ms) {
+  const diff = Date.now() - ms;
+  if (diff < 6e4) return t("chat.time.now");
+  if (diff < 36e5) return t("chat.time.min", { n: Math.floor(diff / 6e4) });
+  if (diff < 864e5) return t("chat.time.hour", { n: Math.floor(diff / 36e5) });
+  return new Date(ms).toLocaleDateString(currentLocale(), { month: "numeric", day: "numeric" });
+}
+class Chat {
+  api;
+  onNewConversation;
+  onFork;
+  onDone;
+  onGoto;
+  onOpenDoc;
+  purposeOpen = false;
+  loadSeq = 0;
+  // setNode load-epoch guard (out-of-order history resolution)
+  node = null;
+  turn = null;
+  lastAssistant = "";
+  // most recent rendered assistant answer text (bug-report prefill)
+  busyNodes = /* @__PURE__ */ new Set();
+  lastPrompt = "";
+  $log;
+  $form;
+  $input;
+  $send;
+  $stop;
+  $title;
+  $meta;
+  $purpose;
+  $done;
+  $busyNotice = null;
+  commands = [];
+  slash;
+  $att;
+  $file;
+  attachments = [];
+  uploads = [];
+  // in-flight uploads (awaited on send so none is dropped)
+  constructor(pane, { api, onNewConversation, onFork, onDone, onGoto, onOpenDoc }) {
+    this.api = api;
+    this.onNewConversation = onNewConversation;
+    this.onFork = onFork;
+    this.onDone = onDone;
+    this.onGoto = onGoto;
+    this.onOpenDoc = onOpenDoc;
+    pane.innerHTML = `
+      <div class="pane-title"><span id="chat-title" data-i18n="chat.paneTitle">\uB300\uD654</span></div>
+      <div id="chat-meta" hidden></div>
+      <div id="chat-purpose" hidden></div>
+      <div id="chat-log"><div class="pane-empty" data-i18n="chat.selectNode">\uB178\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694</div></div>
+      <form id="chat-form" hidden>
+        <div id="chat-att" hidden></div>
+        <textarea id="chat-input" rows="2" data-i18n-ph="chat.input.ph" placeholder="\uBA54\uC2DC\uC9C0\u2026 (Enter \uC804\uC1A1, Shift+Enter \uC904\uBC14\uAFC8)"></textarea>
+        <div id="chat-bar">
+          <button type="button" id="chat-attach" data-i18n-title="chat.attach.titleFull" title="\uD30C\uC77C \uCCA8\uBD80 (\uC774\uBBF8\uC9C0\uB294 \uBD99\uC5EC\uB123\uAE30 \uAC00\uB2A5)">\u{1F4CE}</button>
+          <select id="chat-model" data-i18n-title="chat.model.title" title="\uBAA8\uB378 (\uC804\uC5ED \uC124\uC815)"><option value="" data-i18n="chat.model.default">\uBAA8\uB378 \uAE30\uBCF8</option><option value="opus">Opus</option><option value="sonnet">Sonnet</option><option value="haiku">Haiku</option></select>
+          <select id="chat-effort" data-i18n-title="chat.effort.title" title="\uB178\uB825\uAC15\uB3C4 (\uC804\uC5ED \uC124\uC815)"><option value="" data-i18n="chat.effort.default">\uB178\uB825 \uAE30\uBCF8</option><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option><option value="xhigh">XHigh</option><option value="max">Max</option></select>
+          <select id="chat-perm" data-i18n-title="chat.perm.title" title="\uAD8C\uD55C \uBAA8\uB4DC (\uC804\uC5ED \uC124\uC815)"><option value="bypass" data-i18n="chat.perm.bypass">\uC790\uB3D9 \uD5C8\uC6A9</option><option value="ask" data-i18n="chat.perm.askOpt">\uC2B9\uC778 \uC694\uCCAD</option></select>
+          <span class="bar-space"></span>
+          <button type="button" id="chat-stop" hidden data-i18n-title="chat.stop.title" title="\uC9C4\uD589 \uC911\uC778 \uD134 \uC911\uB2E8" data-i18n="chat.stopBtn">\u23F9 \uC911\uB2E8</button>
+          <button type="button" id="chat-done" hidden data-i18n-title="chat.done.title" title="\uC774 \uB178\uB4DC\uB97C \uC644\uB8CC \uCC98\uB9AC" data-i18n="chat.doneBtn">\u{1F34A} \uC644\uB8CC</button>
+          <button type="submit" id="chat-send" data-i18n="chat.send">\uC804\uC1A1</button>
+        </div>
+        <input type="file" id="chat-file" multiple hidden>
+      </form>`;
+    this.$log = pane.querySelector("#chat-log");
+    this.$form = pane.querySelector("#chat-form");
+    this.$input = pane.querySelector("#chat-input");
+    this.$send = pane.querySelector("#chat-send");
+    this.$stop = pane.querySelector("#chat-stop");
+    this.$title = pane.querySelector("#chat-title");
+    this.$meta = pane.querySelector("#chat-meta");
+    this.$purpose = pane.querySelector("#chat-purpose");
+    this.$done = pane.querySelector("#chat-done");
+    this.$done.onclick = () => {
+      if (this.node) void this.onDone?.(this.node.id);
+    };
+    this.slash = new SlashMenu(this.$input, { getCommands: () => this.commands });
+    this.$form.onsubmit = (e) => {
+      e.preventDefault();
+      void this.send();
+    };
+    this.$input.onkeydown = (e) => {
+      if (this.slash.handleKeydown(e)) return;
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        void this.send();
+      }
+    };
+    this.$input.addEventListener("input", () => {
+      this.autosize();
+      this.slash.update();
+    });
+    this.$stop.onclick = async () => {
+      if (!this.node) return;
+      try {
+        await this.api("POST", `/nodes/${this.node.id}/interrupt`);
+      } catch {
+      }
+    };
+    this.$att = pane.querySelector("#chat-att");
+    this.$file = pane.querySelector("#chat-file");
+    pane.querySelector("#chat-attach").onclick = () => this.$file.click();
+    this.$file.onchange = () => {
+      for (const f of Array.from(this.$file.files ?? [])) this.uploads.push(this.upload(f));
+      this.$file.value = "";
+    };
+    this.$input.addEventListener("paste", (e) => {
+      const files = [...e.clipboardData?.items ?? []].filter((i) => i.kind === "file").map((i) => i.getAsFile()).filter((f) => !!f);
+      if (!files.length) return;
+      e.preventDefault();
+      for (const f of files) this.uploads.push(this.upload(f));
+    });
+    const patchSetting = (key) => (e) => {
+      void this.api("PATCH", "/settings", { [key]: e.target.value });
+    };
+    pane.querySelector("#chat-model").onchange = patchSetting("model");
+    pane.querySelector("#chat-effort").onchange = patchSetting("effort");
+    pane.querySelector("#chat-perm").onchange = patchSetting("permission");
+    void this.setNode(null);
+  }
+  async setNode(node) {
+    this.node = node;
+    this.turn = null;
+    this.purposeOpen = false;
+    this.clearAttachments();
+    if (!node) {
+      this.$title.textContent = t("chat.newConversation");
+      this.$form.hidden = false;
+      this.$log.innerHTML = `<div class="pane-empty">${esc(t("chat.empty.title"))}<br>${esc(t("chat.empty.sub"))}</div>`;
+      this.updateButtons();
+      this.renderMeta();
+      this.renderPurpose(null);
+      return;
+    }
+    this.$title.textContent = `${node.id} \xB7 ${node.title}`;
+    this.$form.hidden = false;
+    this.updateButtons();
+    this.renderMeta();
+    this.renderPurpose(node);
+    const seq = ++this.loadSeq;
+    this.$log.innerHTML = `<div class="pane-empty">${esc(t("chat.historyLoading"))}</div>`;
+    try {
+      const history = await this.api("GET", `/nodes/${node.id}/history`);
+      if (seq !== this.loadSeq) return;
+      const liveCards = [...this.$log.querySelectorAll(".fork-card, .perm-card, .return-card, .notice-line")];
+      this.$log.replaceChildren();
+      if (!history.length) this.$log.innerHTML = `<div class="pane-empty">${esc(t("chat.firstMsg"))}</div>`;
+      else this.renderHistory(history);
+      this.renderNotices(node);
+      this.renderConflict(node);
+      for (const c of liveCards) this.$log.append(c);
+      if (this.busyNodes.has(node.id) && !this.turn) this.renderBusyNotice();
+      this.scroll();
+    } catch {
+      if (seq === this.loadSeq) this.$log.innerHTML = `<div class="pane-empty">${esc(t("chat.historyFail"))}</div>`;
+    }
+  }
+  // SSE tree refresh: keep the live node reference current (title etc.) without disturbing the log.
+  updateNode(node) {
+    if (!node || !this.node || node.id !== this.node.id) return;
+    const enteredConflict = node.mergeState === "conflict" && this.node.mergeState !== "conflict";
+    this.node = node;
+    this.$title.textContent = `${node.id} \xB7 ${node.title}`;
+    this.renderMeta();
+    this.renderPurpose(node);
+    if (enteredConflict && !this.$log.querySelector(".conflict-card")) this.renderConflict(node);
+  }
+  // History render: group by turn — user bubble, then assistant run (proc chevron + final answer).
+  renderHistory(history) {
+    let i = 0;
+    while (i < history.length) {
+      if (history[i].role === "user") {
+        this.bubble("user", history[i].text);
+        i++;
+        continue;
+      }
+      const run = [];
+      while (i < history.length && history[i].role === "assistant") {
+        run.push(history[i]);
+        i++;
+      }
+      this.renderAssistantRun(run);
+    }
+  }
+  renderAssistantRun(run) {
+    const parts = [];
+    for (const m of run) {
+      const th = (m.thinking || "").trim();
+      if (th) parts.push({ type: "thinking", text: th });
+      const tx = (m.text || "").trim();
+      if (tx) parts.push({ type: "text", text: tx });
+      for (const name of m.tools ?? []) parts.push({ type: "tool", name });
+    }
+    let lastTextIdx = -1;
+    parts.forEach((p, idx) => {
+      if (p.type === "text" && p.text.trim()) lastTextIdx = idx;
+    });
+    const procParts = parts.filter((_, idx) => idx !== lastTextIdx);
+    const answerPart = lastTextIdx >= 0 ? parts[lastTextIdx] : null;
+    const answer = answerPart && answerPart.type === "text" ? answerPart.text : "";
+    const el = document.createElement("div");
+    el.className = "turn";
+    if (procParts.length) el.append(this.renderProcSteps(procParts, false));
+    if (answer) this.renderAnswerSegments(answer, el);
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(el);
+  }
+  // Strip <fork-proposal> blocks (and an unterminated mid-stream opener) from raw delta text.
+  stripProposal(text) {
+    return text.replace(/<fork-proposal>[\s\S]*?<\/fork-proposal>/g, "").replace(/<fork-proposal>[\s\S]*$/, "").trim();
+  }
+  // Split a final answer at md section boundaries only (H2/H3 kept; ---/***/___ dropped). No paragraph split.
+  segment(text) {
+    const segs = [];
+    let cur = [];
+    let inCode = false;
+    const flush = () => {
+      const s = cur.join("\n").trim();
+      if (s) segs.push(s);
+      cur = [];
+    };
+    for (const line of String(text).split("\n")) {
+      if (/^\s*(```|~~~)/.test(line)) {
+        inCode = !inCode;
+        cur.push(line);
+        continue;
+      }
+      if (!inCode && /^#{2,3}\s+/.test(line)) {
+        flush();
+        cur.push(line);
+      } else if (!inCode && /^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+        flush();
+      } else cur.push(line);
+    }
+    flush();
+    return segs.length ? segs : [String(text).trim()];
+  }
+  // One .msg.assistant per answer segment; each gets a hover ⑂ fork (seeding that segment's text)
+  // and a 📋 copy button (copies the segment text, e.g. to seed a bug report).
+  renderAnswerSegments(text, container) {
+    this.lastAssistant = String(text).trim();
+    for (const seg of this.segment(text)) {
+      if (!seg) continue;
+      const b = document.createElement("div");
+      b.className = "msg assistant";
+      b.innerHTML = md(seg);
+      const c = document.createElement("button");
+      c.type = "button";
+      c.className = "seg-copy";
+      c.title = t("chat.segCopy.title");
+      c.textContent = "\u{1F4CB}";
+      c.onclick = () => {
+        void copyText(seg);
+      };
+      b.append(c);
+      if (this.node && this.onFork) {
+        const f = document.createElement("button");
+        f.type = "button";
+        f.className = "seg-fork";
+        f.title = t("chat.segFork.title");
+        f.textContent = "\u2442";
+        f.onclick = () => {
+          void this.onFork(this.node.id, { seedText: seg });
+        };
+        b.append(f);
+      }
+      container.append(b);
+    }
+  }
+  /** Most recent rendered assistant answer text (bug-report prefill source). Empty if none. */
+  lastAssistantText() {
+    return this.lastAssistant;
+  }
+  // Time-ordered process chevron: thinking | text | tool rows in occurrence order. open=true => live block.
+  renderProcSteps(parts, open = false) {
+    const det = document.createElement("details");
+    det.className = open ? "proc-steps live" : "proc-steps";
+    det.open = open;
+    const sum = document.createElement("summary");
+    sum.textContent = t("chat.procSteps", { n: parts.length });
+    const body = document.createElement("div");
+    body.className = "proc-body";
+    for (const p of parts) {
+      const row = document.createElement("div");
+      row.className = "proc-step";
+      if (p.type === "thinking") {
+        row.classList.add("step-think");
+        const lines = p.text.split("\n").filter((l) => l.trim());
+        const first = lines[0] ?? "";
+        if (lines.length > 1) {
+          const d = document.createElement("details");
+          d.className = "proc-think";
+          const s = document.createElement("summary");
+          s.textContent = first;
+          const full = document.createElement("div");
+          full.textContent = p.text;
+          d.append(s, full);
+          row.append(d);
+        } else {
+          row.textContent = first;
+        }
+      } else if (p.type === "text") {
+        row.classList.add("step-text");
+        row.innerHTML = md(p.text);
+      } else {
+        row.classList.add("step-tool");
+        const arg = (p.detail ?? "").replace(/\s+/g, " ").trim().slice(0, 40);
+        const label = `\u{1F527} ${p.name}(${arg})`;
+        if (p.detail) {
+          const d = document.createElement("details");
+          d.className = "proc-tool-detail";
+          const s = document.createElement("summary");
+          s.textContent = label;
+          const full = document.createElement("div");
+          full.textContent = p.detail;
+          d.append(s, full);
+          row.append(d);
+        } else {
+          row.textContent = label;
+        }
+      }
+      body.append(row);
+    }
+    det.append(sum, body);
+    return det;
+  }
+  bubble(role, text, tools = []) {
+    const div = document.createElement("div");
+    div.className = `msg ${role}`;
+    div.innerHTML = (text ? md(text) : "") + (tools.length ? `<div class="tools">\u{1F527} ${tools.map(esc).join(", ")}</div>` : "");
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(div);
+    return div;
+  }
+  scroll() {
+    this.$log.scrollTop = this.$log.scrollHeight;
+  }
+  // Grow the textarea with content (CSS caps it at 15 lines then scrolls).
+  autosize() {
+    const el = this.$input;
+    el.style.height = "auto";
+    const max = parseFloat(getComputedStyle(el).maxHeight) || Infinity;
+    el.style.height = `${Math.min(el.scrollHeight, max)}px`;
+    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
+  }
+  async send() {
+    const text = this.$input.value.trim();
+    if (this.uploads.length) await Promise.all(this.uploads.splice(0));
+    const atts = this.attachments;
+    if (!text && !atts.length) return;
+    this.slash.close();
+    if (!this.node) {
+      const seed = text || (atts.length > 1 ? t("chat.attachSeed", { name: atts[0].name, n: atts.length - 1 }) : atts[0]?.name ?? "");
+      const node = await this.onNewConversation(seed);
+      if (!node) return;
+      await this.setNode(node);
+    }
+    if (!this.node) return;
+    if (this.busyNodes.has(this.node.id)) return;
+    let prompt = text;
+    if (atts.length) prompt += `${prompt ? "\n\n" : ""}${t("chat.attachPrompt")}
+${atts.map((a) => `- ${a.path}`).join("\n")}`;
+    for (const a of atts) if (a.url) URL.revokeObjectURL(a.url);
+    this.attachments = [];
+    this.renderAttachments();
+    this.$input.value = "";
+    this.autosize();
+    this.lastPrompt = prompt;
+    this.bubble("user", text + (atts.length ? `
+\u{1F4CE} ${atts.map((a) => a.name).join(", ")}` : ""));
+    this.openStream();
+    try {
+      await this.api("POST", `/nodes/${this.node.id}/messages`, { text: prompt });
+    } catch (err) {
+      this.closeStream(`\u26A0 ${err.message}`);
+    }
+    this.$input.focus();
+  }
+  // Upload one file as a raw body to /api/uploads (bypasses api(), which forces JSON), then chip it.
+  async upload(file) {
+    try {
+      const res = await fetch(`/api/uploads?nodeId=${encodeURIComponent(this.node?.id ?? "")}&name=${encodeURIComponent(file.name || "clipboard.png")}`, { method: "POST", body: file });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "upload failed");
+      const isImage = /^image\//.test(file.type) || /\.(png|jpe?g|gif|webp|svg)$/i.test(data.name);
+      this.attachments.push({ path: data.path, name: data.name, size: data.size, isImage, url: isImage ? URL.createObjectURL(file) : null });
+      this.renderAttachments();
+    } catch (err) {
+      toast(t("chat.uploadFail", { msg: err.message }), "error");
+    }
+  }
+  // Drop all pending attachments + revoke their object URLs (called on send-clear and node switch).
+  clearAttachments() {
+    for (const a of this.attachments) if (a.url) URL.revokeObjectURL(a.url);
+    this.attachments = [];
+    if (this.$att) this.renderAttachments();
+  }
+  renderAttachments() {
+    this.$att.replaceChildren();
+    this.$att.hidden = !this.attachments.length;
+    this.attachments.forEach((a, i) => {
+      const chip = document.createElement("div");
+      chip.className = "att-chip";
+      if (a.isImage && a.url) {
+        const img = document.createElement("img");
+        img.src = a.url;
+        chip.append(img);
+      }
+      const name = document.createElement("span");
+      name.className = "att-name";
+      name.textContent = a.name;
+      const x = document.createElement("button");
+      x.type = "button";
+      x.className = "att-x";
+      x.textContent = "\u2715";
+      x.onclick = () => {
+        if (a.url) URL.revokeObjectURL(a.url);
+        this.attachments.splice(i, 1);
+        this.renderAttachments();
+      };
+      chip.append(name, x);
+      this.$att.append(chip);
+    });
+  }
+  renderBusyNotice() {
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$busyNotice?.remove();
+    const div = document.createElement("div");
+    div.className = "busy-notice";
+    div.textContent = t("chat.busyNotice");
+    this.$log.append(div);
+    this.$busyNotice = div;
+  }
+  openStream() {
+    this.$busyNotice?.remove();
+    this.$busyNotice = null;
+    const el = document.createElement("div");
+    el.className = "turn streaming";
+    this.turn = { parts: [], live: "", el };
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(el);
+    this.scroll();
+  }
+  ensureTurn() {
+    if (!this.turn) this.openStream();
+  }
+  closeStream(errText = null) {
+    if (!this.turn) return;
+    if (errText) {
+      this.turn.el.replaceChildren();
+      const b = document.createElement("div");
+      b.className = "msg assistant";
+      b.innerHTML = `<span class="err">${esc(errText)}</span>`;
+      this.turn.el.append(b);
+    }
+    this.turn.el.classList.remove("streaming");
+    this.turn = null;
+  }
+  // Streaming: ONLY an open proc block (parts + transient live). Done: closed proc block + segment bubbles (once).
+  renderTurn(final = false) {
+    const t2 = this.turn;
+    if (!t2) return;
+    if (!final) {
+      const live = t2.parts.slice();
+      const liveText = this.stripProposal(t2.live);
+      if (liveText) live.push({ type: "text", text: liveText });
+      t2.el.replaceChildren();
+      if (live.length) t2.el.append(this.renderProcSteps(live, true));
+      return;
+    }
+    let lastTextIdx = -1;
+    t2.parts.forEach((p, idx) => {
+      if (p.type === "text" && p.text.trim()) lastTextIdx = idx;
+    });
+    let procParts = t2.parts.slice();
+    let answer = "";
+    if (lastTextIdx >= 0) {
+      const ap = t2.parts[lastTextIdx];
+      answer = ap.type === "text" ? ap.text : "";
+      procParts = t2.parts.filter((_, idx) => idx !== lastTextIdx);
+    } else {
+      answer = this.stripProposal(t2.live);
+    }
+    t2.el.replaceChildren();
+    if (procParts.length) t2.el.append(this.renderProcSteps(procParts, false));
+    if (answer) this.renderAnswerSegments(answer, t2.el);
+  }
+  // Empty turn (model finished with no answer text): placeholder + retry button.
+  renderEmptyTurn(el, subtype) {
+    if (!el.querySelector(".msg.assistant")) {
+      const b = document.createElement("div");
+      b.className = "msg assistant empty-turn";
+      const reason = subtype && subtype !== "success" ? t("chat.emptyTurn.reason", { reason: esc(subtype) }) : "";
+      b.innerHTML = `<span class="empty-note">${esc(t("chat.emptyTurn.note"))}${reason}.</span>`;
+      el.append(b);
+    }
+    if (el.querySelector(".empty-retry")) return;
+    const bar = document.createElement("div");
+    bar.className = "empty-retry";
+    const btn = document.createElement("button");
+    btn.className = "retry-btn";
+    btn.textContent = t("chat.retry");
+    btn.onclick = () => void this.retryLast(btn);
+    bar.append(btn);
+    el.append(bar);
+  }
+  async retryLast(btn) {
+    if (!this.node || !this.lastPrompt) return;
+    if (this.busyNodes.has(this.node.id)) return;
+    btn.disabled = true;
+    this.openStream();
+    try {
+      await this.api("POST", `/nodes/${this.node.id}/messages`, { text: this.lastPrompt });
+    } catch (err) {
+      this.closeStream(`\u26A0 ${err.message}`);
+    }
+  }
+  // Persisted notices replayed on setNode (no scroll during history replay).
+  renderNotices(node) {
+    for (const n of node.notices ?? []) this.renderNotice(n, false);
+  }
+  // A returnsTo detour result (DES-COLLAB-017) renders as a "▶ 이어받아 진행" card until consumed
+  // (a parent turn injects it -> delivered) or read (ack); everything else is a plain child-done line.
+  renderNotice(notice, scroll = true) {
+    if (notice.returns && !notice.delivered && !notice.ack) this.appendReturnCard(notice, scroll);
+    else if (notice.kind === "code-change" && !notice.delivered && !notice.ack) this.appendChangeCard(notice, scroll);
+    else this.appendNotice(notice, scroll);
+  }
+  // Overlapping code change from another node (DES-COLLAB-007) — reflect now (turn injects <related-updates>),
+  // read (ack), or jump to the source node. Persists as a line once delivered/acked.
+  // Merge-conflict resolution card (DES-COLLAB-016) — kicks off an AI turn that merges main into the
+  // worktree and resolves the conflicts; the user re-completes the node afterward to finish the merge.
+  renderConflict(node) {
+    if (node.mergeState !== "conflict") return;
+    const card = document.createElement("div");
+    card.className = "return-card conflict-card";
+    card.innerHTML = `<div class="return-head">${esc(t("chat.conflict.head"))}</div><div class="return-body">${esc(t("chat.conflict.body"))}</div><div class="return-actions"><button type="button" class="return-go">${esc(t("chat.conflict.start"))}</button></div>`;
+    const btn = card.querySelector(".return-go");
+    btn.onclick = async () => {
+      btn.disabled = true;
+      btn.textContent = t("chat.conflict.starting");
+      try {
+        await this.api("POST", `/nodes/${node.id}/resolve-conflict`);
+      } catch {
+        btn.disabled = false;
+        btn.textContent = t("chat.conflict.start");
+      }
+    };
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(card);
+  }
+  appendChangeCard(notice, scroll = true) {
+    const card = document.createElement("div");
+    card.className = "return-card change-card";
+    const from = notice.fromNodeId ?? "";
+    const files = (notice.files ?? []).slice(0, 8).join(", ");
+    card.innerHTML = `<div class="return-head">${esc(t("chat.changeCard.head"))}</div><div class="return-body"><b class="return-from">${esc(from)}</b> "${esc(notice.fromTitle ?? "")}" \u2014 ${esc(notice.summary ?? "")}${files ? ` <span class="change-files">[${esc(files)}]</span>` : ""}</div><div class="return-actions"><button type="button" class="return-go">${esc(t("chat.reflect"))}</button><button type="button" class="return-later">${esc(t("common.later"))}</button><button type="button" class="return-view">${esc(t("chat.viewChange"))}</button></div>`;
+    card.querySelector(".return-go").onclick = () => {
+      card.remove();
+      this.$input.value = t("chat.reflectPrompt");
+      void this.send();
+    };
+    card.querySelector(".return-later").onclick = () => {
+      card.remove();
+      if (this.node) void this.api("POST", `/nodes/${this.node.id}/notices/ack`);
+    };
+    card.querySelector(".return-view").onclick = () => {
+      if (from) this.onGoto?.(from);
+    };
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(card);
+    if (scroll) this.scroll();
+  }
+  appendReturnCard(notice, scroll = true) {
+    const card = document.createElement("div");
+    card.className = "return-card";
+    const from = notice.fromNodeId ?? "";
+    card.innerHTML = `<div class="return-head">${esc(t("chat.returnCard.head"))}</div><div class="return-body"><b class="return-from">${esc(from)}</b> "${esc(notice.fromTitle ?? "")}" \u2014 ${esc(notice.summary ?? "")}</div><div class="return-actions"><button type="button" class="return-go">${esc(t("chat.resume"))}</button><button type="button" class="return-later">${esc(t("common.later"))}</button></div>`;
+    if (from && this.onGoto) {
+      const f = card.querySelector(".return-from");
+      f.style.cursor = "pointer";
+      f.title = t("chat.gotoChild");
+      f.onclick = () => this.onGoto?.(f.textContent || from);
+    }
+    card.querySelector(".return-go").onclick = () => {
+      card.remove();
+      this.$input.value = t("chat.resumePrompt");
+      void this.send();
+    };
+    card.querySelector(".return-later").onclick = () => {
+      card.remove();
+      if (this.node) void this.api("POST", `/nodes/${this.node.id}/notices/ack`);
+    };
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(card);
+    if (scroll) this.scroll();
+  }
+  appendNotice(notice, scroll = true) {
+    const div = document.createElement("div");
+    div.className = "notice-line";
+    div.textContent = `\u{1F514} ${notice.text ?? ""}`;
+    if (notice.fromNodeId && this.onGoto) {
+      const from = notice.fromNodeId;
+      div.classList.add("clickable");
+      div.title = t("chat.gotoNode");
+      div.onclick = () => this.onGoto?.(from);
+    }
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(div);
+    if (scroll) this.scroll();
+  }
+  // Live node-notice SSE (routed from app) — append to the open node's log.
+  onNotice(data) {
+    if (!this.node || data.nodeId !== this.node.id || !data.notice) return;
+    this.renderNotice(data.notice);
+  }
+  // Fixed header: 🎯 purpose (branchSummary or first request, collapsible) + related-doc chips. Always visible.
+  renderPurpose(node) {
+    const purpose = node?.branchSummary || node?.activity?.[0]?.request || "";
+    const docs = node ? nodeOwnDocs(node) : [];
+    if (!purpose && !docs.length) {
+      this.$purpose.hidden = true;
+      this.$purpose.replaceChildren();
+      return;
+    }
+    this.$purpose.hidden = false;
+    this.$purpose.replaceChildren();
+    if (purpose) {
+      const row = document.createElement("div");
+      row.className = "purpose-row";
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "purpose-toggle";
+      toggle.title = t("chat.purpose.toggle");
+      const text = document.createElement("div");
+      text.className = "purpose-text";
+      text.innerHTML = md(purpose);
+      const sync = () => {
+        text.classList.toggle("open", this.purposeOpen);
+        toggle.textContent = this.purposeOpen ? "\u25B4" : "\u25BE";
+      };
+      sync();
+      toggle.onclick = () => {
+        this.purposeOpen = !this.purposeOpen;
+        sync();
+      };
+      const label = document.createElement("span");
+      label.className = "purpose-label";
+      label.textContent = t("chat.purpose.label");
+      const head = document.createElement("div");
+      head.className = "purpose-head";
+      head.append(label, toggle);
+      row.append(head, text);
+      this.$purpose.append(row);
+    }
+    if (docs.length) {
+      const docRow = document.createElement("div");
+      docRow.className = "purpose-docs";
+      const label = document.createElement("span");
+      label.className = "purpose-docs-label";
+      label.textContent = t("chat.relatedDocs");
+      docRow.append(label);
+      for (const path of docs) {
+        const chip = document.createElement("button");
+        chip.type = "button";
+        chip.className = "purpose-doc";
+        chip.title = path;
+        chip.textContent = baseName(path);
+        chip.onclick = () => this.onOpenDoc?.(path);
+        docRow.append(chip);
+      }
+      this.$purpose.append(docRow);
+    }
+  }
+  // Fixed header: status emoji + last-active relative time + a collapsible activity log. Always visible.
+  renderMeta() {
+    const node = this.node;
+    if (!node) {
+      this.$meta.hidden = true;
+      return;
+    }
+    const st = STATUS_VIEW[node.status] ? { icon: STATUS_VIEW[node.status].icon, label: t(STATUS_VIEW[node.status].labelKey) } : { icon: "\xB7", label: node.status };
+    const acts = (node.activity ?? []).slice().reverse();
+    const last = node.lastActiveAt ? `\xB7 ${t("chat.lastActive", { time: relTime(node.lastActiveAt) })}` : "";
+    const rows = acts.map((a) => {
+      const sub = a.error ? `<span class="act-err">\u26A0 ${esc(a.error)}</span>` : a.doneAt ? `${t("chat.act.done", { time: relTime(a.doneAt) })}${a.costUsd != null ? ` \xB7 $${a.costUsd.toFixed(4)}` : ""}` : `<span class="act-run">${t("chat.act.running")}</span>`;
+      return `<div class="act-row"><div class="act-req">${esc(a.request || t("chat.act.emptyReq"))}</div><div class="act-sub">${sub}</div></div>`;
+    }).join("");
+    const open = this.$meta.querySelector(".act-log")?.open ? " open" : "";
+    this.$meta.hidden = false;
+    this.$meta.innerHTML = `
+      <div class="meta-head">
+        <span class="meta-status">${st.icon} ${esc(st.label)}</span>
+        <span class="meta-last">${esc(last)}</span>
+      </div>
+      ${acts.length ? `<details class="act-log"${open}><summary>${t("chat.actLog", { n: acts.length })}</summary><div class="act-list">${rows}</div></details>` : ""}`;
+  }
+  // SSE fork-proposal — approval card (per-item checkbox + editable title); 'go' POSTs the fork route per pick.
+  onForkProposal({ nodeId, context, items }) {
+    if (!this.node || nodeId !== this.node.id) return;
+    if (!Array.isArray(items) || items.length < 1) return;
+    const card = document.createElement("div");
+    card.className = "fork-card";
+    card.innerHTML = `
+      <div class="fork-head">${esc(t("chat.fork.head"))} <span class="fork-n">${esc(t("chat.fork.candidates", { n: items.length }))}</span></div>
+      ${context ? '<div class="fork-ctx"></div>' : ""}
+      <div class="fork-items"></div>
+      <div class="fork-actions">
+        <button type="button" class="fork-go">${esc(t("chat.fork.go"))}</button>
+        <button type="button" class="fork-ignore">${esc(t("chat.fork.ignore"))}</button>
+      </div>`;
+    if (context) card.querySelector(".fork-ctx").textContent = context;
+    const itemsEl = card.querySelector(".fork-items");
+    for (const it of items) {
+      const row = document.createElement("div");
+      row.className = "fork-item";
+      row.innerHTML = '<input type="checkbox" class="fork-cb" checked><input type="text" class="fork-title"><div class="fork-sum"></div>';
+      row.querySelector(".fork-title").value = it.title;
+      row.querySelector(".fork-sum").textContent = it.summary ?? "";
+      row.dataset.summary = it.summary ?? "";
+      itemsEl.append(row);
+    }
+    const close = () => card.remove();
+    card.querySelector(".fork-ignore").onclick = close;
+    card.querySelector(".fork-go").onclick = async () => {
+      const picks = [...itemsEl.querySelectorAll(".fork-item")].filter((r) => r.querySelector(".fork-cb").checked).map((r) => ({ title: r.querySelector(".fork-title").value.trim(), summary: r.dataset.summary ?? "" })).filter((p) => p.title);
+      if (!picks.length) {
+        toast(t("chat.fork.selectPrompt"), "error");
+        return;
+      }
+      card.querySelectorAll("button, input").forEach((el) => {
+        el.disabled = true;
+      });
+      let ok = 0;
+      for (const p of picks) {
+        try {
+          await this.api("POST", `/nodes/${nodeId}/fork`, { title: p.title, summary: p.summary });
+          ok++;
+        } catch {
+        }
+      }
+      close();
+      if (ok) toast(t("chat.fork.done", { n: ok }), "success");
+    };
+    this.$log.append(card);
+    this.scroll();
+  }
+  // SSE permission-request — ask-mode approval card, keyed by requestId.
+  onPermissionRequest({ nodeId, requestId, tool, summary, reason, canAlwaysAllow }) {
+    if (!this.node || nodeId !== this.node.id) return;
+    const card = document.createElement("div");
+    card.className = "perm-card";
+    card.dataset.requestId = requestId;
+    card.innerHTML = `
+      <div class="perm-head">${esc(t("chat.perm.reqHead"))} <b></b></div>
+      <pre class="perm-input"></pre>
+      ${reason ? '<div class="perm-reason"></div>' : ""}
+      <div class="perm-actions">
+        <button type="button" class="perm-allow">${esc(t("chat.perm.allow"))}</button>
+        ${canAlwaysAllow ? `<button type="button" class="perm-always">${esc(t("chat.perm.always"))}</button>` : ""}
+        <button type="button" class="perm-deny">${esc(t("chat.perm.deny"))}</button>
+      </div>`;
+    card.querySelector(".perm-head b").textContent = tool;
+    card.querySelector(".perm-input").textContent = summary;
+    if (reason) card.querySelector(".perm-reason").textContent = reason;
+    const respond = async (decision) => {
+      card.querySelectorAll("button").forEach((b) => {
+        b.disabled = true;
+      });
+      try {
+        await this.api("POST", `/permissions/${requestId}`, { decision });
+      } catch {
+      }
+    };
+    card.querySelector(".perm-allow").onclick = () => void respond("allow");
+    const always = card.querySelector(".perm-always");
+    if (always) always.onclick = () => void respond("always");
+    card.querySelector(".perm-deny").onclick = () => void respond("deny");
+    this.$log.append(card);
+    this.scroll();
+  }
+  onPermissionClosed({ requestId }) {
+    this.$log.querySelector(`.perm-card[data-request-id="${requestId}"]`)?.remove();
+  }
+  appendSystem(text) {
+    const div = document.createElement("div");
+    div.className = "sys-line";
+    div.textContent = text;
+    this.$log.querySelector(".pane-empty")?.remove();
+    this.$log.append(div);
+    this.scroll();
+  }
+  // SSE busy event (routed from app) — per-node working state.
+  setBusy(ids) {
+    this.busyNodes = new Set(ids);
+    if (this.node && !this.busyNodes.has(this.node.id)) {
+      this.$busyNotice?.remove();
+      this.$busyNotice = null;
+    }
+    this.updateButtons();
+  }
+  // Slash-command list (from /api/commands + the 'commands' SSE) — read lazily by the slash menu.
+  setCommands(list) {
+    this.commands = Array.isArray(list) ? list : [];
+    if (this.slash.isOpen) this.slash.update();
+  }
+  updateButtons() {
+    const busy = this.node ? this.busyNodes.has(this.node.id) : false;
+    this.$send.disabled = busy;
+    this.$send.hidden = busy;
+    this.$stop.hidden = !busy;
+    this.$done.hidden = !this.node || busy;
+  }
+  // SSE node-stream event (routed from app). init ignored; rest drives the turn.
+  onStream(ev) {
+    if (!this.node || ev.nodeId !== this.node.id) return;
+    if (ev.kind === "error") {
+      this.ensureTurn();
+      this.closeStream(`\u26A0 ${ev.text}`);
+      return;
+    }
+    if (ev.kind === "done") {
+      if (this.turn) {
+        if (ev.empty) {
+          let lastTextIdx = -1;
+          this.turn.parts.forEach((p, idx) => {
+            if (p.type === "text" && p.text.trim()) lastTextIdx = idx;
+          });
+          if (lastTextIdx >= 0) this.turn.parts.splice(lastTextIdx, 1);
+        }
+        this.renderTurn(true);
+        this.turn.el.classList.remove("streaming");
+        if (ev.empty) this.renderEmptyTurn(this.turn.el, ev.subtype);
+        if (ev.costUsd != null) {
+          const cost = document.createElement("div");
+          cost.className = "cost";
+          cost.textContent = `$${ev.costUsd.toFixed(4)}`;
+          const lastMsg = [...this.turn.el.querySelectorAll(".msg.assistant")].pop();
+          (lastMsg ?? this.turn.el).append(cost);
+        }
+        this.turn = null;
+      } else if (this.node) {
+        void this.setNode(this.node);
+      }
+      return;
+    }
+    if (ev.kind === "system") {
+      this.appendSystem(ev.text);
+      return;
+    }
+    if (ev.kind === "init") return;
+    this.ensureTurn();
+    const t2 = this.turn;
+    if (!t2) return;
+    if (ev.kind === "delta") t2.live += ev.text;
+    else if (ev.kind === "thinking") {
+      if (ev.text) t2.parts.push({ type: "thinking", text: ev.text });
+    } else if (ev.kind === "tool") {
+      const pending = this.stripProposal(t2.live);
+      if (pending) t2.parts.push({ type: "text", text: pending });
+      t2.live = "";
+      t2.parts.push({ type: "tool", name: ev.name ?? tr("chat.toolFallback"), detail: ev.detail });
+    } else if (ev.kind === "message") {
+      t2.parts.push({ type: "text", text: ev.text });
+      t2.live = "";
+    }
+    this.renderTurn(false);
+    this.scroll();
+  }
+}
+export {
+  Chat
+};