bitpull 0.1.21 → 0.1.24

package/ui/ide.js

@@ -0,0 +1,910 @@
+// BitPull projects: an editor and an AI agent on a folder of this computer.
+// Rule of this file: nothing from a file, a model or the network is ever turned into HTML. Text goes in
+// with textContent or into the editor's models; there is no innerHTML here (a test checks it).
+"use strict";
+(function () {
+  const BP = window.__BITPULL__ || {};
+  const token = BP.token || "";
+  const $ = (id) => document.getElementById(id);
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  const store = {
+    get(k, d) { try { const v = localStorage.getItem(`bitpull.ide.${k}`); return v === null ? d : JSON.parse(v); } catch { return d; } },
+    set(k, v) { try { localStorage.setItem(`bitpull.ide.${k}`, JSON.stringify(v)); } catch { /* private mode */ } },
+  };
+
+  /** Builds an element: attributes, then children (strings become text). */
+  function el(tag, attrs, ...kids) {
+    const n = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs || {})) {
+      if (v === undefined || v === null || v === false) continue;
+      if (k === "class") n.className = v;
+      else if (k === "text") n.textContent = v;
+      else if (k.startsWith("on")) n.addEventListener(k.slice(2), v);
+      else n.setAttribute(k, v === true ? "" : String(v));
+    }
+    for (const k of kids.flat()) if (k !== null && k !== undefined && k !== false) n.append(typeof k === "string" || typeof k === "number" ? String(k) : k);
+    return n;
+  }
+  const clear = (n) => { while (n.firstChild) n.removeChild(n.firstChild); return n; };
+
+  // ---- words ------------------------------------------------------------------------------------
+  let dict = {}, fallback = {};
+  const t = (key, vars) => String(dict[key] ?? fallback[key] ?? key).replace(/\{(\w+)\}/g, (_, k) => (vars && vars[k] !== undefined ? vars[k] : `{${k}}`));
+  const LANGS = ["en", "zh", "hi", "es", "ar", "fr", "bn", "pt", "ru", "id", "de", "it"];
+  let lang = LANGS.includes(BP.lang) ? BP.lang : "en";
+  async function loadWords() {
+    const get = (l) => fetch(`/i18n/${l}.json`).then((r) => (r.ok ? r.json() : {})).catch(() => ({}));
+    [dict, fallback] = await Promise.all([get(lang), lang === "en" ? Promise.resolve({}) : get("en")]);
+    document.documentElement.lang = lang;
+    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
+    document.title = `${t("ide.title")} · BitPull`;
+    for (const n of document.querySelectorAll("[data-i18n]")) n.textContent = t(n.dataset.i18n);
+    for (const n of document.querySelectorAll("[data-i18n-placeholder]")) n.placeholder = t(n.dataset.i18nPlaceholder);
+    for (const n of document.querySelectorAll("[data-tip]")) n.setAttribute("aria-label", t(n.dataset.tip));
+  }
+  /** A known error's words, or the error as it came. */
+  function explain(err) {
+    const m = String((err && err.message) || err).replace(/^Error:\s*/, "");
+    for (const p of ["ide.err.", "pj.err."]) if (dict[p + m] !== undefined || fallback[p + m] !== undefined) return t(p + m);
+    if (/Failed to fetch|NetworkError|Load failed/.test(m)) return t("ide.err.app_down");
+    return m;
+  }
+
+  // ---- the app's local API ------------------------------------------------------------------------
+  async function api(path, body) {
+    const res = await fetch(path, { method: body ? "POST" : "GET", headers: { "content-type": "application/json", "x-bitpull-token": token }, body: body ? JSON.stringify(body) : undefined });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.error || res.status);
+    return data;
+  }
+
+  // ---- tooltips: after a short pause over anything with data-tip ------------------------------------
+  let tipTimer = null;
+  document.addEventListener("mouseover", (e) => {
+    const n = e.target.closest && e.target.closest("[data-tip]");
+    clearTimeout(tipTimer);
+    if (!n) return;
+    tipTimer = setTimeout(() => {
+      const box = $("tip");
+      box.textContent = t(n.dataset.tip);
+      box.hidden = false;
+      const r = n.getBoundingClientRect();
+      box.style.left = `${Math.max(8, Math.min(r.left, innerWidth - box.offsetWidth - 8))}px`;
+      box.style.top = `${r.bottom + 6 + box.offsetHeight > innerHeight ? r.top - box.offsetHeight - 6 : r.bottom + 6}px`;
+    }, 700);
+  });
+  document.addEventListener("mouseout", () => { clearTimeout(tipTimer); $("tip").hidden = true; });
+  document.addEventListener("mousedown", () => { clearTimeout(tipTimer); $("tip").hidden = true; });
+
+  // ---- a modal of our own (the app's window has no native dialogs everywhere) -------------------------
+  function modal(title, body, buttons) {
+    return new Promise((resolve) => {
+      $("modal-title").textContent = title;
+      clear($("modal-body")).append(...[].concat(body || []));
+      const bar = clear($("modal-buttons"));
+      const close = (v) => { $("modal").hidden = true; document.removeEventListener("keydown", onKey, true); resolve(v); };
+      const onKey = (e) => { if (e.key === "Escape") { e.preventDefault(); close(null); } };
+      document.addEventListener("keydown", onKey, true);
+      for (const b of buttons) bar.append(el("button", { class: b.ghost ? "ghost" : b.danger ? "danger" : "", text: b.label, onclick: () => close(b.value === undefined ? true : typeof b.value === "function" ? b.value() : b.value) }));
+      $("modal").hidden = false;
+      const first = $("modal-body").querySelector("input,textarea");
+      (first || bar.lastChild).focus();
+    });
+  }
+  const askText = async (title, label, value) => {
+    const input = el("input", { type: "text", value: value || "" });
+    input.addEventListener("keydown", (e) => { if (e.key === "Enter") $("modal-buttons").lastChild.click(); });
+    return modal(title, [el("p", { class: "muted small", text: label }), input], [{ label: t("pj.no"), ghost: true, value: null }, { label: t("ide.ok"), value: () => input.value.trim() || null }]);
+  };
+  const confirmBox = (title, text, yes, danger) => modal(title, el("p", { text }), [{ label: t("pj.no"), ghost: true, value: false }, { label: yes, danger, value: true }]);
+
+  // ---- state ------------------------------------------------------------------------------------
+  let monaco = null, editor = null, diffEditor = null;
+  let folder = "";
+  const tabs = []; // { path, model, mtime, saved, view, binary, secret }
+  let active = null;
+  let models = [];
+  let session = null; // the agent shown on the right
+  let cursor = 0;
+  let review = null; // { kind, path, onAccept, onReject }
+  let terminal = null;
+
+  // ---- the terminal is another part of the app, which plugs in here -----------------------------
+  /**
+   * Terminal hook. The terminal registers itself with BitPullIDE.terminal.register(impl), where impl has:
+   *   mount(container, { token, folder, lang, t })  draws itself into the bottom panel, once;
+   *   open()  shows it and focuses it;  close()  hides it;  newTab()  opens another shell in the folder;
+   *   runVisible(command)  types a command in a visible tab, for the person to see (it still runs only on
+   *   this computer, in this page; models never reach it).
+   *   folderChanged(folder)  optional: the project's folder changed.
+   */
+  window.BitPullIDE = {
+    terminal: {
+      register(impl) {
+        terminal = impl;
+        clear($("terminal-host"));
+        impl.mount($("terminal-host"), { token, folder, lang, t });
+        // The terminal tab may already be the one showing: then it starts at once, as if it had been opened.
+        if (sizes.bottomOpen && document.querySelector('[data-bottom="terminal"]').classList.contains("on")) impl.open();
+      },
+    },
+    get folder() { return folder; },
+  };
+  function showTerminal() {
+    showBottom("terminal");
+    if (terminal) terminal.open();
+    else clear($("terminal-host")).append(el("p", { class: "muted", text: t("ide.terminal.missing") }));
+  }
+
+  // ---- layout: panels that can be resized, and are remembered --------------------------------------
+  const sizes = Object.assign({ side: 260, agent: 360, bottom: 200, sideOpen: true, bottomOpen: true }, store.get("sizes", {}));
+  function applySizes() {
+    const root = document.documentElement.style;
+    root.setProperty("--side", `${sizes.sideOpen ? sizes.side : 0}px`);
+    root.setProperty("--agent", `${sizes.agent}px`);
+    root.setProperty("--bottom", `${sizes.bottom}px`);
+    $("side").hidden = !sizes.sideOpen;
+    $("bottom").hidden = !sizes.bottomOpen;
+    store.set("sizes", sizes);
+    if (editor) editor.layout();
+    if (diffEditor) diffEditor.layout();
+  }
+  for (const s of document.querySelectorAll(".split")) {
+    s.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      const which = s.dataset.split;
+      const start = { x: e.clientX, y: e.clientY, v: sizes[which] };
+      const rtl = document.documentElement.dir === "rtl";
+      const move = (m) => {
+        const dx = (m.clientX - start.x) * (rtl ? -1 : 1);
+        if (which === "side") sizes.side = Math.min(600, Math.max(160, start.v + dx));
+        if (which === "agent") sizes.agent = Math.min(800, Math.max(260, start.v - dx));
+        if (which === "bottom") sizes.bottom = Math.min(innerHeight - 160, Math.max(80, start.v - (m.clientY - start.y)));
+        applySizes();
+      };
+      const up = () => { removeEventListener("mousemove", move); removeEventListener("mouseup", up); };
+      addEventListener("mousemove", move);
+      addEventListener("mouseup", up);
+    });
+  }
+  function showSide(name) {
+    sizes.sideOpen = true;
+    for (const b of document.querySelectorAll("#activity button")) b.classList.toggle("on", b.dataset.side === name);
+    for (const p of document.querySelectorAll("#side section")) p.hidden = p.dataset.panel !== name;
+    applySizes();
+    if (name === "git") gitRefresh();
+    if (name === "outline") renderOutline();
+    if (name === "history") renderHistory();
+    if (name === "search") $("search-q").focus();
+  }
+  for (const b of document.querySelectorAll("#activity button")) b.addEventListener("click", () => {
+    if (b.classList.contains("on") && sizes.sideOpen) { sizes.sideOpen = false; applySizes(); } else showSide(b.dataset.side);
+  });
+  function showBottom(name) {
+    sizes.bottomOpen = true;
+    for (const b of document.querySelectorAll("[data-bottom]")) b.classList.toggle("on", b.dataset.bottom === name);
+    for (const p of document.querySelectorAll("[data-bpanel]")) p.hidden = p.dataset.bpanel !== name;
+    applySizes();
+  }
+  for (const b of document.querySelectorAll("[data-bottom]")) b.addEventListener("click", () => (b.dataset.bottom === "terminal" ? showTerminal() : showBottom(b.dataset.bottom)));
+  $("bottom-close").addEventListener("click", () => { sizes.bottomOpen = false; applySizes(); if (terminal) terminal.close(); });
+  const output = (line) => { const o = $("output"); o.textContent += `${line}\n`; if (o.textContent.length > 400_000) o.textContent = o.textContent.slice(-300_000); o.scrollTop = o.scrollHeight; };
+
+  // ---- Monaco, served by the app itself -------------------------------------------------------------
+  const MONACO_LANG = { de: "de", es: "es", fr: "fr", it: "it", ru: "ru", zh: "zh-cn", pt: "pt-br" };
+  function loadMonaco() {
+    return new Promise((resolve, reject) => {
+      const s = document.createElement("script");
+      s.src = "/ui/monaco/vs/loader.js";
+      s.onerror = () => reject(new Error("editor_missing"));
+      s.onload = () => {
+        window.require.config({ paths: { vs: "/ui/monaco/vs" }, "vs/nls": { availableLanguages: { "*": MONACO_LANG[lang] || "en" } } });
+        // This version of the loader does not always call back. The global appears early, as soon as the
+        // core is loaded; the editor is complete (stylesheet, languages, all its services) only when the
+        // main module has run, which registers the JSON language: creating an editor before fails.
+        window.require(["vs/editor/editor.main"], () => {}, reject);
+        // With the editor translated (Italian, German…) the JSON language never shows up as a global: there the
+        // sign is that the languages are registered and have stayed so for a moment.
+        const started = Date.now();
+        let langsSince = 0;
+        const wait = setInterval(() => {
+          const m = window.monaco;
+          const langs = m && m.editor && m.languages && m.languages.getLanguages ? m.languages.getLanguages().length : 0;
+          if (langs > 50 && !langsSince) langsSince = Date.now();
+          if (m && m.editor && m.languages && (m.languages.json || (langsSince && Date.now() - langsSince > 1500))) { clearInterval(wait); resolve(m); }
+          else if (Date.now() - started > 30000) { clearInterval(wait); reject(new Error("editor_missing")); }
+        }, 50);
+      };
+      document.body.appendChild(s);
+    });
+  }
+  const dark = () => matchMedia("(prefers-color-scheme: dark)").matches;
+  function setupEditor() {
+    const opts = { automaticLayout: true, theme: dark() ? "vs-dark" : "vs", minimap: { enabled: true }, fontSize: 13, tabSize: 2, renderWhitespace: "selection", smoothScrolling: true, scrollBeyondLastLine: false };
+    editor = monaco.editor.create($("editor"), { ...opts, model: null });
+    diffEditor = monaco.editor.createDiffEditor($("diff"), { ...opts, renderSideBySide: true, originalEditable: false });
+    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => monaco.editor.setTheme(dark() ? "vs-dark" : "vs"));
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => saveActive());
+    editor.addAction({ id: "bitpull.inline", label: t("ide.inline"), keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK], contextMenuGroupId: "1_modification", run: () => inlineEdit() });
+    editor.onDidChangeModelContent(() => { renderTabs(); clearTimeout(outlineTimer); outlineTimer = setTimeout(renderOutline, 600); });
+    editor.onDidChangeCursorPosition(() => markOutline());
+  }
+  let outlineTimer = null;
+
+  // ---- files --------------------------------------------------------------------------------------
+  const opened = new Set(["."]);
+  async function loadTree(path, into) {
+    const r = await api("/api/ws/tree", { folder, path });
+    clear(into);
+    for (const e of r.entries) {
+      const li = el("li", { role: "treeitem" });
+      const item = el("div", { class: "item", title: e.path },
+        el("span", { text: e.dir ? (opened.has(e.path) ? "▾" : "▸") : e.secret ? "🔒" : "·", class: "muted" }),
+        el("span", { class: "name", text: e.name }),
+        el("span", { class: "acts" },
+          el("button", { class: "icon", "data-tip": "tip.ide.rename", text: "✎", onclick: (ev) => { ev.stopPropagation(); renamePath(e.path); } }),
+          el("button", { class: "icon", "data-tip": "tip.ide.delete", text: "🗑", onclick: (ev) => { ev.stopPropagation(); deletePath(e.path, e.dir); } })));
+      if (active && active.path === e.path) item.classList.add("on");
+      li.append(item);
+      if (e.dir) {
+        const sub = el("ul", { role: "group" });
+        li.append(sub);
+        if (opened.has(e.path)) loadTree(e.path, sub).catch(() => {});
+        item.addEventListener("click", () => {
+          if (opened.has(e.path)) { opened.delete(e.path); clear(sub); } else { opened.add(e.path); loadTree(e.path, sub).catch((err) => output(explain(err))); }
+          item.firstChild.textContent = opened.has(e.path) ? "▾" : "▸";
+        });
+      } else item.addEventListener("click", () => openFile(e.path));
+      into.append(li);
+    }
+  }
+  const refreshTree = () => folder && loadTree(".", $("tree")).catch((err) => output(explain(err)));
+  async function newPath(dir) {
+    const name = await askText(t(dir ? "ide.new_dir" : "ide.new_file"), t("ide.new.hint"), active && !dir ? active.path.replace(/[^/]*$/, "") : "");
+    if (!name) return;
+    try { await api("/api/ws/create", { folder, path: name, dir }); refreshTree(); if (!dir) openFile(name); } catch (err) { output(explain(err)); }
+  }
+  async function renamePath(path) {
+    const to = await askText(t("ide.rename"), path, path);
+    if (!to || to === path) return;
+    try {
+      await api("/api/ws/rename", { folder, from: path, to });
+      const tab = tabs.find((x) => x.path === path);
+      if (tab) closeTab(tab, true);
+      refreshTree();
+    } catch (err) { output(explain(err)); }
+  }
+  async function deletePath(path, dir) {
+    if (!(await confirmBox(t("ide.delete"), t(dir ? "ide.delete.dir" : "ide.delete.file", { path }), t("ide.delete"), true))) return;
+    try { await api("/api/ws/delete", { folder, path }); const tab = tabs.find((x) => x.path === path); if (tab) closeTab(tab, true); refreshTree(); } catch (err) { output(explain(err)); }
+  }
+  $("new-file").addEventListener("click", () => newPath(false));
+  $("new-dir").addEventListener("click", () => newPath(true));
+  $("refresh").addEventListener("click", refreshTree);
+
+  // ---- tabs and the editor --------------------------------------------------------------------------
+  const isDirty = (tab) => tab.model && tab.model.getAlternativeVersionId() !== tab.saved;
+  function renderTabs() {
+    const bar = clear($("tabs"));
+    for (const tab of tabs) {
+      const name = tab.path.split("/").pop();
+      bar.append(el("div", { class: `tab${tab === active ? " on" : ""}`, role: "tab", title: tab.path, onclick: () => activate(tab) },
+        el("span", { text: name }), isDirty(tab) ? el("span", { class: "dirty", text: "●" }) : null,
+        el("button", { "data-tip": "tip.ide.close", text: "×", onclick: (e) => { e.stopPropagation(); closeTab(tab); } })));
+    }
+    $("welcome").hidden = !!active || !!review;
+    $("editor").hidden = !active || !!review;
+  }
+  async function openFile(path, line) {
+    if (!monaco) return;
+    let tab = tabs.find((x) => x.path === path);
+    if (!tab) {
+      let r;
+      try { r = await api("/api/ws/read", { folder, path }); } catch (err) { output(explain(err)); return; }
+      if (r.binary) { output(t("ide.binary", { path })); return; }
+      const uri = monaco.Uri.from({ scheme: "file", path: `/${path}` });
+      const model = monaco.editor.getModel(uri) || monaco.editor.createModel(r.text, undefined, uri);
+      tab = { path, model, mtime: r.mtime, saved: model.getAlternativeVersionId(), secret: r.secret };
+      tabs.push(tab);
+      if (r.secret) output(t("ide.secret_open", { path }));
+    }
+    activate(tab);
+    if (line) { editor.revealLineInCenter(line); editor.setPosition({ lineNumber: line, column: 1 }); editor.focus(); }
+  }
+  function activate(tab) {
+    if (active && active.model) active.view = editor.saveViewState();
+    active = tab;
+    closeReview();
+    editor.setModel(tab.model);
+    if (tab.view) editor.restoreViewState(tab.view);
+    renderTabs();
+    renderOutline();
+    if (!$("side").hidden && !document.querySelector('#side section[data-panel="history"]').hidden) renderHistory();
+    for (const n of document.querySelectorAll("#tree .item")) n.classList.toggle("on", n.title === tab.path);
+    editor.focus();
+  }
+  async function closeTab(tab, force) {
+    if (!force && isDirty(tab) && !(await confirmBox(t("ide.unsaved"), t("ide.unsaved.text", { path: tab.path }), t("ide.discard"), true))) return;
+    tabs.splice(tabs.indexOf(tab), 1);
+    if (active === tab) { active = null; editor.setModel(null); if (tabs.length) activate(tabs[tabs.length - 1]); }
+    tab.model.dispose();
+    renderTabs();
+  }
+  async function saveActive(force) {
+    const tab = active;
+    if (!tab) return;
+    try {
+      const r = await api("/api/ws/write", { folder, path: tab.path, content: tab.model.getValue(), mtime: tab.mtime, force: !!force });
+      tab.mtime = r.mtime;
+      tab.saved = tab.model.getAlternativeVersionId();
+      renderTabs();
+    } catch (err) {
+      if (String(err.message) !== "file_changed_on_disk") return output(explain(err));
+      const choice = await modal(t("ide.conflict"), el("p", { text: t("ide.conflict.text", { path: tab.path }) }), [{ label: t("pj.no"), ghost: true, value: null }, { label: t("ide.conflict.reload"), ghost: true, value: "reload" }, { label: t("ide.conflict.overwrite"), danger: true, value: "overwrite" }]);
+      if (choice === "overwrite") return saveActive(true);
+      if (choice === "reload") reloadTab(tab);
+    }
+  }
+  async function reloadTab(tab) {
+    const r = await api("/api/ws/read", { folder, path: tab.path });
+    if (r.binary) return;
+    tab.model.setValue(r.text);
+    tab.mtime = r.mtime;
+    tab.saved = tab.model.getAlternativeVersionId();
+    renderTabs();
+  }
+
+  // ---- reviewing a change in the editor, piece by piece ---------------------------------------------
+  function closeReview() {
+    // The diff editor lets go of its models first, then they can go.
+    if (diffEditor) diffEditor.setModel(null);
+    if (review) { review.original.dispose(); review.modified.dispose(); }
+    review = null;
+    $("review").hidden = true;
+    $("diff").hidden = true;
+    renderTabs();
+  }
+  /**
+   * Shows `before` against `after` side by side. With pieces = true each changed piece can be put back
+   * one by one (it is changed in the right-hand side, which the person then keeps or saves).
+   */
+  function showReview({ title, before, after, path, pieces, accept, reject, acceptLabel, rejectLabel }) {
+    const lang = monaco.Uri.from({ scheme: "file", path: `/${path || "x.txt"}` });
+    const original = monaco.editor.createModel(before ?? "", undefined, monaco.Uri.from({ scheme: "bp-before", path: `/${Date.now()}/${path || "x"}` }));
+    const modified = monaco.editor.createModel(after ?? "", undefined, monaco.Uri.from({ scheme: "bp-after", path: `/${Date.now()}/${path || "x"}` }));
+    const language = monaco.editor.getModel(lang) ? monaco.editor.getModel(lang).getLanguageId() : null;
+    if (language) { monaco.editor.setModelLanguage(original, language); monaco.editor.setModelLanguage(modified, language); }
+    if (review) { diffEditor.setModel(null); review.original.dispose(); review.modified.dispose(); }
+    diffEditor.setModel({ original, modified });
+    review = { path, original, modified };
+    $("review").hidden = false;
+    $("diff").hidden = false;
+    $("editor").hidden = true;
+    $("welcome").hidden = true;
+    $("review-title").textContent = title;
+    $("review-accept").textContent = acceptLabel || t("ide.review.keep");
+    $("review-reject").textContent = rejectLabel || t("ide.review.revert_all");
+    $("review-accept").onclick = async () => { const keep = modified.getValue(); closeReview(); if (accept) await accept(keep); };
+    $("review-reject").onclick = async () => { closeReview(); if (reject) await reject(); };
+    const hunks = clear($("review-hunks"));
+    if (pieces) {
+      const draw = () => {
+        clear(hunks);
+        const changes = diffEditor.getLineChanges() || [];
+        changes.forEach((c, i) => hunks.append(el("button", { class: "ghost small", "data-tip": "tip.ide.review.piece", text: t("ide.review.piece", { n: i + 1 }), onclick: () => revertPiece(c, original, modified) })));
+      };
+      diffEditor.onDidUpdateDiff(draw);
+    }
+  }
+  /** Puts one changed piece back as it was. */
+  function revertPiece(c, original, modified) {
+    const origLines = c.originalEndLineNumber === 0 ? [] : original.getValue().split("\n").slice(c.originalStartLineNumber - 1, c.originalEndLineNumber);
+    let range;
+    if (c.modifiedEndLineNumber === 0) range = new monaco.Range(c.modifiedStartLineNumber + 1, 1, c.modifiedStartLineNumber + 1, 1);
+    else range = new monaco.Range(c.modifiedStartLineNumber, 1, c.modifiedEndLineNumber, modified.getLineMaxColumn(c.modifiedEndLineNumber));
+    let text = origLines.join("\n");
+    if (c.modifiedEndLineNumber === 0) text += "\n";
+    else if (!origLines.length) {
+      // The piece only added lines: remove them, with their line ending.
+      const end = c.modifiedEndLineNumber < modified.getLineCount() ? new monaco.Range(c.modifiedStartLineNumber, 1, c.modifiedEndLineNumber + 1, 1) : new monaco.Range(Math.max(1, c.modifiedStartLineNumber - 1), modified.getLineMaxColumn(Math.max(1, c.modifiedStartLineNumber - 1)), c.modifiedEndLineNumber, modified.getLineMaxColumn(c.modifiedEndLineNumber));
+      modified.pushEditOperations([], [{ range: end, text: "" }], () => null);
+      return;
+    }
+    modified.pushEditOperations([], [{ range, text }], () => null);
+  }
+  $("review-close").addEventListener("click", closeReview);
+
+  /** The agent's change to a file: compared with the file as it was before the agent started. */
+  async function reviewAgentChange(path) {
+    if (!session) return;
+    try {
+      const r = await api("/api/projects/original", { id: session.id, path });
+      showReview({
+        title: t("ide.review.agent", { path }), before: r.before ?? "", after: r.now ?? "", path, pieces: true,
+        acceptLabel: t("ide.review.keep"), rejectLabel: t("ide.review.revert_all"),
+        accept: async (text) => { if (text !== r.now) await writeFrom(path, text); },
+        reject: async () => { await writeFrom(path, r.before ?? ""); },
+      });
+    } catch (err) { output(explain(err)); }
+  }
+  async function writeFrom(path, text) {
+    try {
+      await api("/api/ws/write", { folder, path, content: text, force: true });
+      const tab = tabs.find((x) => x.path === path);
+      if (tab) await reloadTab(tab);
+    } catch (err) { output(explain(err)); }
+  }
+
+  // ---- quick open, search -----------------------------------------------------------------------
+  async function quickOpen() {
+    if (!folder) return;
+    const input = el("input", { type: "text", placeholder: t("ide.quick.placeholder") });
+    const list = el("ul", { class: "list" });
+    let results = [], sel = 0;
+    const draw = () => { clear(list); results.forEach((r, i) => list.append(el("li", { class: i === sel ? "on" : "", text: r.path, onclick: () => pick(r) }))); };
+    const pick = (r) => { $("modal").hidden = true; openFile(r.path); };
+    let timer = null;
+    input.addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(async () => { const q = input.value.trim(); if (!q) { results = []; draw(); return; } try { results = (await api("/api/ws/search", { folder, query: q, names: true })).results.slice(0, 50); sel = 0; draw(); } catch {} }, 150); });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown") { sel = Math.min(results.length - 1, sel + 1); draw(); e.preventDefault(); }
+      if (e.key === "ArrowUp") { sel = Math.max(0, sel - 1); draw(); e.preventDefault(); }
+      if (e.key === "Enter" && results[sel]) pick(results[sel]);
+    });
+    modal(t("ide.quick"), [input, list], [{ label: t("ide.close"), ghost: true, value: null }]);
+  }
+  $("quick-open").addEventListener("click", quickOpen);
+  let searchTimer = null;
+  async function runSearch() {
+    const q = $("search-q").value.trim();
+    const out = clear($("search-results"));
+    $("search-info").textContent = "";
+    if (!q || !folder) return;
+    try {
+      const r = await api("/api/ws/search", { folder, query: q, caseSensitive: $("search-case").checked, regex: $("search-regex").checked });
+      $("search-info").textContent = t(r.truncated ? "ide.search.many" : "ide.search.count", { n: r.results.length });
+      for (const hit of r.results) out.append(el("li", { title: `${hit.path}:${hit.line}`, onclick: () => openFile(hit.path, hit.line) }, el("span", { class: "badge", text: `${hit.path.split("/").pop()}:${hit.line}` }), el("span", { class: "name", text: hit.text.trim() })));
+    } catch (err) { $("search-info").textContent = explain(err); }
+  }
+  for (const id of ["search-q", "search-case", "search-regex"]) $(id).addEventListener("input", () => { clearTimeout(searchTimer); searchTimer = setTimeout(runSearch, 250); });
+
+  // ---- git: the person's own actions -------------------------------------------------------------------
+  async function gitRefresh() {
+    if (!folder) return;
+    const staged = clear($("git-staged")), changes = clear($("git-changes"));
+    $("git-msg").textContent = "";
+    try {
+      const r = await api("/api/ws/git/status", { folder });
+      $("git-branch").textContent = r.branch ? t("ide.git.branch", { branch: r.branch }) : "";
+      for (const f of r.files) {
+        const row = (where, letter, stage) => el("li", { title: f.path, onclick: () => gitDiff(f.path, stage === false) },
+          el("span", { class: "badge", text: letter }), el("span", { class: "name", text: f.path }),
+          el("button", { class: "icon", "data-tip": stage ? "tip.ide.git.stage" : "tip.ide.git.unstage", text: stage ? "+" : "−", onclick: async (e) => { e.stopPropagation(); try { await api(stage ? "/api/ws/git/stage" : "/api/ws/git/unstage", { folder, paths: [f.path] }); gitRefresh(); } catch (err) { $("git-msg").textContent = explain(err); } } }));
+        if (f.staged) staged.append(row("staged", f.staged, false));
+        if (f.unstaged) changes.append(row("changes", f.unstaged === "?" ? "U" : f.unstaged, true));
+      }
+      if (!r.files.length) $("git-msg").textContent = t("ide.git.clean");
+    } catch (err) { $("git-branch").textContent = ""; $("git-msg").textContent = explain(err); }
+  }
+  async function gitDiff(path, staged) {
+    try {
+      const [d, now] = await Promise.all([api("/api/ws/git/diff", { folder, path, staged }), api("/api/ws/read", { folder, path }).catch(() => ({ text: "" }))]);
+      showReview({ title: t("ide.git.diff", { path }), before: d.base, after: now.text || "", path, pieces: false, acceptLabel: t("ide.close"), rejectLabel: t("ide.git.discard"),
+        reject: async () => { if (await confirmBox(t("ide.git.discard"), t("ide.git.discard.text", { path }), t("ide.git.discard"), true)) await writeFrom(path, d.base); gitRefresh(); } });
+    } catch (err) { $("git-msg").textContent = explain(err); }
+  }
+  $("git-refresh").addEventListener("click", gitRefresh);
+  $("git-commit").addEventListener("click", async () => {
+    try { const r = await api("/api/ws/git/commit", { folder, message: $("git-message").value }); $("git-message").value = ""; output(r.output); gitRefresh(); } catch (err) { $("git-msg").textContent = explain(err); }
+  });
+  $("git-push").addEventListener("click", async () => {
+    if (!(await confirmBox(t("ide.git.push"), t("ide.git.push.confirm"), t("ide.git.push")))) return;
+    try { const r = await api("/api/ws/git/push", { folder, confirmed: true }); output(r.output || t("ide.git.pushed")); } catch (err) { $("git-msg").textContent = explain(err); }
+  });
+
+  // ---- problems, outline, history, preview --------------------------------------------------------------
+  $("problems-run").addEventListener("click", async () => {
+    if (!folder) return;
+    const list = clear($("problems"));
+    showBottom("problems");
+    list.append(el("li", { class: "muted", text: t("ide.problems.running") }));
+    try {
+      const r = await api("/api/ws/problems", { folder });
+      clear(list);
+      if (!r.ran.length) list.append(el("li", { class: "muted", text: t("ide.problems.none_setup") }));
+      else if (!r.problems.length) list.append(el("li", { class: "muted", text: t("ide.problems.clean", { tools: r.ran.join(", ") }) }));
+      const byFile = {};
+      for (const p of r.problems) {
+        (byFile[p.file] = byFile[p.file] || []).push(p);
+        list.append(el("li", { title: p.message, onclick: () => openFile(p.file, p.line) }, el("span", { class: `badge ${p.severity === "error" ? "bad" : "warn"}`, text: p.source }), el("span", { class: "name", text: `${p.file}:${p.line}  ${p.message}` })));
+      }
+      for (const m of monaco.editor.getModels()) {
+        if (m.uri.scheme !== "file") continue;
+        const ps = byFile[m.uri.path.slice(1)] || [];
+        monaco.editor.setModelMarkers(m, "bitpull", ps.map((p) => ({ startLineNumber: p.line, startColumn: p.column, endLineNumber: p.line, endColumn: p.column + 1, message: `${p.source}: ${p.message}`, severity: p.severity === "error" ? monaco.MarkerSeverity.Error : monaco.MarkerSeverity.Warning })));
+      }
+    } catch (err) { clear(list).append(el("li", { class: "muted", text: explain(err) })); }
+  });
+
+  /** A simple outline from the text: classes, functions and headings, for every language. */
+  const OUTLINE = [
+    /^\s*(?:export\s+)?(?:default\s+)?(?:async\s+)?(?:function\*?|class|interface|type|enum)\s+([A-Za-z_$][\w$]*)/,
+    /^\s*(?:export\s+)?(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[A-Za-z_$][\w$]*)\s*=>/,
+    /^\s*(?:async\s+)?def\s+(\w+)|^\s*class\s+(\w+)/,
+    /^\s*func\s+(?:\([^)]*\)\s*)?(\w+)|^\s*(?:pub\s+)?(?:fn|struct|enum|trait|impl)\s+(\w+)/,
+    /^\s*(?:public|private|protected|static|\s)+[\w<>[\],\s]+\s+(\w+)\s*\([^;]*$/,
+    /^(#{1,6})\s+(.+)$/,
+  ];
+  function renderOutline() {
+    const list = clear($("outline"));
+    if (!active || !active.model) return;
+    const lines = active.model.getValue().split("\n");
+    if (lines.length > 20000) return;
+    lines.forEach((text, i) => {
+      for (const re of OUTLINE) {
+        const m = re.exec(text);
+        if (!m) continue;
+        const name = re === OUTLINE[5] ? `${"  ".repeat(m[1].length - 1)}${m[2]}` : m.slice(1).find(Boolean);
+        if (name) list.append(el("li", { "data-line": i + 1, onclick: () => openFile(active.path, i + 1) }, el("span", { class: "muted small", text: String(i + 1) }), el("span", { class: "name", text: name })));
+        break;
+      }
+    });
+    markOutline();
+  }
+  function markOutline() {
+    if (!editor || !editor.getPosition()) return;
+    const line = editor.getPosition().lineNumber;
+    let best = null;
+    for (const li of $("outline").children) if (Number(li.dataset.line) <= line) best = li;
+    for (const li of $("outline").children) li.classList.toggle("on", li === best);
+  }
+  async function renderHistory() {
+    const list = clear($("history"));
+    if (!active) return list.append(el("li", { class: "muted", text: t("ide.history.none") }));
+    try {
+      const r = await api("/api/ws/history", { folder, path: active.path });
+      if (!r.versions.length) list.append(el("li", { class: "muted", text: t("ide.history.none") }));
+      for (const v of r.versions) list.append(el("li", { onclick: () => showVersion(active.path, v.id) }, el("span", { class: "badge", text: t(`ide.history.${v.why}`) }), el("span", { class: "name", text: new Date(v.at).toLocaleString(lang) })));
+    } catch (err) { list.append(el("li", { class: "muted", text: explain(err) })); }
+  }
+  async function showVersion(path, id) {
+    try {
+      const v = await api("/api/ws/version", { folder, path, id });
+      const tab = tabs.find((x) => x.path === path);
+      const now = tab ? tab.model.getValue() : (await api("/api/ws/read", { folder, path })).text;
+      showReview({ title: t("ide.history.compare", { path }), before: v.text, after: now, path, pieces: false, acceptLabel: t("ide.close"), rejectLabel: t("ide.history.restore"),
+        reject: async () => { if (tab) { tab.model.setValue(v.text); activate(tab); } else await writeFrom(path, v.text); } });
+    } catch (err) { output(explain(err)); }
+  }
+  $("preview").addEventListener("click", async () => {
+    const url = await askText(t("ide.preview"), t("ide.preview.hint"), store.get("preview", "http://localhost:3000"));
+    if (!url) return;
+    store.set("preview", url);
+    try { await api("/api/ws/preview", { url }); } catch (err) { output(explain(err)); }
+  });
+
+  // ---- models, folder, mode, limits ---------------------------------------------------------------------
+  async function loadModels() {
+    const r = await api("/api/chat/models");
+    models = [
+      ...r.own.map((m) => ({ ...m, key: `own:${m.model}`, label: m.name, own: true, paid: false })),
+      ...r.network.map((m) => ({ ...m, key: `net:${m.model}`, label: m.name, own: false, paid: false })),
+      ...r.paid.map((m) => ({ ...m, model: m.id, key: `paid:${m.id}`, label: m.name, own: false, paid: true })),
+    ].filter((m) => (m.tasks || ["chat"]).includes("chat") || m.paid);
+    const sel = clear($("model"));
+    const groups = [["chat.group.own", models.filter((m) => m.own)], ["chat.group.network", models.filter((m) => !m.own && !m.paid)], ["chat.group.paid", models.filter((m) => m.paid)]];
+    for (const [label, list] of groups) {
+      if (!list.length) continue;
+      const g = el("optgroup", { label: t(label) });
+      for (const m of list) g.append(el("option", { value: m.key, disabled: !m.available, text: m.available ? m.label : `${m.label} · ${t("ide.model.unavailable")}` }));
+      sel.append(g);
+    }
+    if (!models.length) sel.append(el("option", { value: "", text: t("ide.model.none") }));
+    const keep = store.get("model", "");
+    const first = models.find((m) => m.available && m.key === keep) || models.find((m) => m.available && m.own) || models.find((m) => m.available);
+    if (first) sel.value = first.key;
+  }
+  const chosenModel = () => models.find((m) => m.key === $("model").value && m.available) || null;
+  $("model").addEventListener("change", () => store.set("model", $("model").value));
+  async function loadFolders() {
+    const r = await api("/api/projects");
+    const sel = clear($("folder"));
+    for (const f of r.folders) sel.append(el("option", { value: f, text: f }));
+    if (!r.folders.length) sel.append(el("option", { value: "", text: t("ide.folder.none") }));
+    const want = BP.folder || store.get("folder", "");
+    sel.value = r.folders.includes(want) ? want : r.folders[0] || "";
+    return r;
+  }
+  async function setFolder(f) {
+    if (tabs.some(isDirty) && !(await confirmBox(t("ide.unsaved"), t("ide.unsaved.all"), t("ide.discard"), true))) { $("folder").value = folder; return; }
+    for (const tab of [...tabs]) closeTab(tab, true);
+    folder = f;
+    store.set("folder", f);
+    session = null;
+    cursor = 0;
+    clear($("agent-log"));
+    opened.clear();
+    opened.add(".");
+    refreshTree();
+    if (terminal && terminal.folderChanged) terminal.folderChanged(f);
+    await refreshAgents();
+  }
+  $("folder").addEventListener("change", () => setFolder($("folder").value));
+  $("folder-add").addEventListener("click", async () => {
+    const path = await askText(t("pj.folder.add"), t("pj.folder.confirm"), "");
+    if (!path) return;
+    try { await api("/api/folders", { path }); await loadFolders(); $("folder").value = (await api("/api/projects")).folders.slice(-1)[0]; setFolder($("folder").value); } catch (err) { output(explain(err)); }
+  });
+  const MODES = ["ask", "edits", "auto"];
+  function renderModeHint() { $("mode-hint").textContent = t(`pj.mode.${$("mode").value}.hint`); }
+  async function setMode(mode) {
+    const prev = $("mode").value;
+    $("mode").value = mode;
+    renderModeHint();
+    if (!session) return;
+    try { await api("/api/projects/mode", { id: session.id, mode, remoteConfirmed: mode === "auto" && session.leaves ? await remoteOk(true) : undefined }); }
+    catch (err) { $("mode").value = prev; renderModeHint(); output(explain(err)); }
+  }
+  $("mode").addEventListener("change", () => setMode($("mode").value));
+  /** Content that leaves this computer: the person says yes once, knowing it. */
+  async function remoteOk(auto) {
+    return !!(await confirmBox(t("ide.remote.title"), t(auto ? "pj.auto.confirm" : "pj.remote"), t("pj.yes")));
+  }
+  const limitsExplained = () => el("dl", {}, el("dt", { text: t("ide.limits.why.title") }), el("dd", { text: t("ide.limits.why") }), el("dt", { text: t("ide.limits.not.title") }), el("dd", { text: t("ide.limits.not") }), el("dt", { text: t("ide.limits.auto.title") }), el("dd", { text: t("ide.limits.auto") }));
+  async function editLimits() {
+    // Before an agent exists there is nothing to change yet, but the explanation is useful already.
+    if (!session) {
+      await modal(t("pj.limits"), [el("p", { text: t("ide.limits.intro") }), ...["steps", "minutes", "credits"].map((k) => el("p", { class: "muted small", text: t(`ide.limits.${k}.what`) })), limitsExplained(), el("p", { class: "muted small", text: t("ide.agent.none") })], [{ label: t("ide.ok"), value: null }]);
+      return;
+    }
+    const field = (k) => {
+      const input = el("input", { type: "number", min: k === "credits" ? 0 : 1, step: "1", value: session.limits[k] });
+      return { k, input, block: el("div", {}, el("label", { class: "row" }, el("strong", { text: t(`pj.limit.${k}`) }), input, el("span", { class: "muted small", text: t("ide.limits.auto_value", { n: session.autoLimits[k] }) })), el("p", { class: "muted small", text: t(`ide.limits.${k}.what`) })) };
+    };
+    const fields = ["steps", "minutes", "credits"].map(field);
+    const body = [
+      el("p", { text: t("ide.limits.intro") }), ...fields.map((f) => f.block),
+      limitsExplained(),
+    ];
+    const choice = await modal(t("pj.limits"), body, [{ label: t("pj.no"), ghost: true, value: null }, { label: t("ide.limits.reset"), ghost: true, value: "auto" }, { label: t("pj.limits.save"), value: "save" }]);
+    try {
+      if (choice === "auto") session = await api("/api/projects/limits", { id: session.id, auto: true });
+      if (choice === "save") session = await api("/api/projects/limits", { id: session.id, limits: Object.fromEntries(fields.map((f) => [f.k, Number(f.input.value)])) });
+      renderAgent(session);
+    } catch (err) { output(explain(err)); }
+  }
+  $("limits-open").addEventListener("click", editLimits);
+  $("limit-edit").addEventListener("click", editLimits);
+
+  // ---- agents ---------------------------------------------------------------------------------------
+  let agentList = [];
+  async function refreshAgents() {
+    const r = await api("/api/projects");
+    agentList = (r.sessions || []).filter((s) => s.folder === folder).sort((x, y) => y.updated - x.updated);
+    drawAgents();
+    if (!session && agentList.length) selectAgent(agentList[0].id);
+    $("agents-toggle").textContent = session ? session.title || t("ide.agent.untitled") : t("ide.agents");
+  }
+  function drawAgents() {
+    const q = $("agents-q").value.trim().toLowerCase();
+    const list = clear($("agents-list"));
+    for (const a of agentList.filter((x) => !q || (x.title || "").toLowerCase().includes(q))) {
+      list.append(el("li", { class: session && a.id === session.id ? "on" : "", onclick: () => { selectAgent(a.id); $("agents").hidden = true; } },
+        el("span", { class: "badge", text: t(`pj.status.${a.status}`).replace(/[.…]$/, "") }), el("span", { class: "name", text: a.title || t("ide.agent.untitled") })));
+    }
+    if (!agentList.length) list.append(el("li", { class: "muted", text: t("ide.agent.none") }));
+  }
+  $("agents-toggle").addEventListener("click", () => { $("agents").hidden = !$("agents").hidden; drawAgents(); });
+  $("agents-q").addEventListener("input", drawAgents);
+  async function selectAgent(id) {
+    session = await api("/api/projects/state", { id, after: 0 });
+    cursor = 0;
+    clear($("agent-log"));
+    $("mode").value = session.mode;
+    renderModeHint();
+    renderAgent(session);
+  }
+  async function newAgent() {
+    const m = chosenModel();
+    if (!folder) return output(t("pj.err.project_folder_not_authorised"));
+    if (!m) return output(t("pj.err.project_needs_model"));
+    const leaves = !m.own;
+    let remoteConfirmed;
+    if (leaves) { remoteConfirmed = await remoteOk($("mode").value === "auto"); if (!remoteConfirmed) return null; }
+    try {
+      session = await api("/api/projects/open", { folder, model: m.model, modelName: m.label, paid: m.paid, placement: m.own ? "mine" : "auto", mode: $("mode").value, remoteConfirmed });
+      cursor = 0;
+      clear($("agent-log"));
+      renderAgent(session);
+      await refreshAgents();
+      $("prompt").focus();
+      return session;
+    } catch (err) { output(explain(err)); return null; }
+  }
+  $("agent-new").addEventListener("click", newAgent);
+
+  const STATUS_BUSY = new Set(["running", "waiting", "paused", "limit"]);
+  function renderAgent(v) {
+    if (!v) return;
+    session = { ...session, ...v };
+    const log = $("agent-log");
+    for (const e of v.events || []) {
+      if (e.n < cursor) continue;
+      cursor = e.n + 1;
+      log.append(eventNode(e));
+      if (e.kind === "output") { output(e.text); if (terminal && terminal.agentOutput) terminal.agentOutput(e.text); }
+      if (e.kind === "action" && e.action === "run") { output(`$ ${e.text}`); if (terminal && terminal.runVisible) terminal.runVisible(e.text); }
+      if (e.kind === "notice" && (e.code === "command_ended" || e.code === "command_timeout") && terminal && terminal.agentDone) terminal.agentDone(e.text);
+    }
+    log.scrollTop = log.scrollHeight;
+    $("agent-status").textContent = `${t(`pj.status.${v.status}`)}  ·  ${t("pj.used", { steps: v.used.steps, minutes: v.used.minutes, credits: Math.round(v.used.credits * 100) / 100 })}  ·  ${t("ide.limits.short", { steps: v.limits.steps, minutes: v.limits.minutes, credits: v.limits.credits || "—" })}`;
+    $("agent-stop").hidden = !STATUS_BUSY.has(v.status);
+    $("agent-send").hidden = STATUS_BUSY.has(v.status);
+    $("agent-undo").hidden = !v.canUndo;
+    $("agent-limit").hidden = v.status !== "limit";
+    if (v.status === "limit") $("agent-limit-text").textContent = t("ide.limit.text", { steps: v.limits.steps, minutes: v.limits.minutes, credits: v.limits.credits || "—" });
+    renderPending(v.pending);
+    const ch = clear($("agent-changes"));
+    if (v.changes && v.changes.length) {
+      ch.append(el("div", { class: "panel-sub", text: t("pj.tab.changes") }));
+      for (const c of v.changes) ch.append(el("div", {}, el("a", { href: "#", text: c.path, onclick: (e) => { e.preventDefault(); reviewAgentChange(c.path); } })));
+    }
+    $("agents-toggle").textContent = v.title || t("ide.agent.untitled");
+    for (const tab of tabs) if (!isDirty(tab) && v.changes && v.changes.some((c) => c.path === tab.path)) reloadTab(tab).catch(() => {});
+  }
+  function eventNode(e) {
+    if (e.kind === "user") return el("div", { class: "ev user", text: e.text });
+    if (e.kind === "assistant") return el("div", { class: "ev", text: e.text });
+    if (e.kind === "output") return el("div", { class: "ev output", text: e.text });
+    if (e.kind === "action") return el("div", { class: "ev action", text: `${t(`pj.act.${e.action}`)} ${e.path || e.text || ""}` });
+    if (e.kind === "error") return el("div", { class: "ev error", text: `${explain(e.code)}${e.text ? `\n${e.text}` : ""}` });
+    const key = `pj.note.${e.code}`;
+    return el("div", { class: "ev notice", text: t(key, { code: e.text }) });
+  }
+  let shownPending = null;
+  function renderPending(p) {
+    const box = $("agent-pending");
+    if (!p) { box.hidden = true; shownPending = null; return; }
+    if (shownPending === p.id) return;
+    shownPending = p.id;
+    clear(box);
+    box.hidden = false;
+    const answer = async (approved) => { try { renderAgent(await api("/api/projects/approve", { id: session.id, action: p.id, approved })); } catch (err) { output(explain(err)); } closeReview(); };
+    if (p.type === "write") {
+      box.append(el("strong", { text: t("pj.ask.write", { path: p.path }) }));
+      box.append(el("div", { class: "row" }, el("button", { class: "ghost", "data-tip": "tip.ide.review.open", text: t("ide.review.open"), onclick: () => showReview({ title: t("pj.ask.write", { path: p.path }), before: p.before, after: p.after, path: p.path, pieces: false, acceptLabel: t("pj.approve"), rejectLabel: t("pj.refuse"), accept: () => answer(true), reject: () => answer(false) }) })));
+      if (monaco && p.before !== undefined) showReview({ title: t("pj.ask.write", { path: p.path }), before: p.before, after: p.after, path: p.path, pieces: false, acceptLabel: t("pj.approve"), rejectLabel: t("pj.refuse"), accept: () => answer(true), reject: () => answer(false) });
+    } else {
+      box.append(el("strong", { text: t("pj.ask.command") }), el("code", { text: p.command }), el("p", { class: "muted small", text: `${t("pj.ask.cwd", { cwd: p.cwd })} · ${t("pj.where.computer")}` }));
+      if (p.risk) box.append(el("p", { class: "small", text: t(`pj.risk.${p.risk}`) }));
+    }
+    box.append(el("div", { class: "row" }, el("button", { "data-tip": "tip.pj.approve", text: t("pj.approve"), onclick: () => answer(true) }), el("button", { class: "ghost", "data-tip": "tip.pj.refuse", text: t("pj.refuse"), onclick: () => answer(false) })));
+  }
+
+  /** @-mentions: typing @ suggests files of the folder. */
+  let mentionTimer = null, mentionSel = 0, mentionItems = [];
+  function mentionQuery() {
+    const ta = $("prompt");
+    const before = ta.value.slice(0, ta.selectionStart);
+    const m = /(?:^|\s)@([^\s@]*)$/.exec(before);
+    return m ? m[1] : null;
+  }
+  function drawMentions() {
+    const box = clear($("mention"));
+    box.hidden = !mentionItems.length;
+    mentionItems.forEach((p, i) => box.append(el("li", { class: i === mentionSel ? "on" : "", text: p, onmousedown: (e) => { e.preventDefault(); insertMention(p); } })));
+  }
+  function insertMention(path) {
+    const ta = $("prompt");
+    const before = ta.value.slice(0, ta.selectionStart).replace(/@([^\s@]*)$/, `@${path} `);
+    ta.value = before + ta.value.slice(ta.selectionStart);
+    ta.selectionStart = ta.selectionEnd = before.length;
+    mentionItems = [];
+    drawMentions();
+    ta.focus();
+  }
+  $("prompt").addEventListener("input", () => {
+    const q = mentionQuery();
+    clearTimeout(mentionTimer);
+    if (q === null || !folder) { mentionItems = []; drawMentions(); return; }
+    mentionTimer = setTimeout(async () => {
+      try { mentionItems = q ? (await api("/api/ws/search", { folder, query: q, names: true })).results.slice(0, 12).map((r) => r.path) : tabs.map((x) => x.path).slice(0, 12); } catch { mentionItems = []; }
+      mentionSel = 0;
+      drawMentions();
+    }, 120);
+  });
+  $("prompt").addEventListener("keydown", (e) => {
+    if (mentionItems.length) {
+      if (e.key === "ArrowDown") { mentionSel = Math.min(mentionItems.length - 1, mentionSel + 1); drawMentions(); e.preventDefault(); return; }
+      if (e.key === "ArrowUp") { mentionSel = Math.max(0, mentionSel - 1); drawMentions(); e.preventDefault(); return; }
+      if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); insertMention(mentionItems[mentionSel]); return; }
+      if (e.key === "Escape") { mentionItems = []; drawMentions(); return; }
+    }
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); send(); }
+  });
+  async function send() {
+    const text = $("prompt").value.trim();
+    if (!text) return;
+    if (!session && !(await newAgent())) return;
+    try {
+      $("prompt").value = "";
+      renderAgent(await api("/api/projects/send", { id: session.id, text }));
+    } catch (err) { $("prompt").value = text; output(explain(err)); }
+  }
+  $("agent-send").addEventListener("click", send);
+  $("agent-stop").addEventListener("click", async () => { try { renderAgent(await api("/api/projects/stop", { id: session.id })); } catch (err) { output(explain(err)); } });
+  $("limit-stop").addEventListener("click", async () => { try { renderAgent(await api("/api/projects/stop", { id: session.id })); } catch (err) { output(explain(err)); } });
+  $("limit-go").addEventListener("click", async () => { try { renderAgent(await api("/api/projects/continue", { id: session.id })); } catch (err) { output(explain(err)); } });
+  $("agent-undo").addEventListener("click", async () => {
+    if (!(await confirmBox(t("pj.undo"), t("ide.undo.confirm"), t("pj.undo"), true))) return;
+    try { renderAgent(await api("/api/projects/undo", { id: session.id })); for (const tab of tabs) if (!isDirty(tab)) reloadTab(tab).catch(() => {}); refreshTree(); } catch (err) { output(explain(err)); }
+  });
+  // The app works only while a page asks for news: this is also how it knows someone is watching.
+  setInterval(async () => {
+    if (!session || document.hidden) return;
+    try { renderAgent(await api("/api/projects/state", { id: session.id, after: cursor })); } catch (err) { if (/project_not_found/.test(err.message)) { session = null; refreshAgents(); } }
+  }, 800);
+
+  /** Rewrites the selected text with the agent's model, shown as a change to accept. */
+  async function inlineEdit() {
+    if (!active) return;
+    const sel = editor.getSelection();
+    const model = active.model;
+    const range = sel && !sel.isEmpty() ? sel : new monaco.Range(sel.startLineNumber, 1, sel.startLineNumber, model.getLineMaxColumn(sel.startLineNumber));
+    const instruction = await askText(t("ide.inline"), t("ide.inline.hint"), "");
+    if (!instruction) return;
+    if (!session && !(await newAgent())) return;
+    const selection = model.getValueInRange(range);
+    const ctxStart = Math.max(1, range.startLineNumber - 40), ctxEnd = Math.min(model.getLineCount(), range.endLineNumber + 40);
+    const context = model.getValueInRange(new monaco.Range(ctxStart, 1, ctxEnd, model.getLineMaxColumn(ctxEnd)));
+    output(t("ide.inline.working"));
+    try {
+      const r = await api("/api/projects/edit-selection", { id: session.id, path: active.path, selection, instruction, context });
+      const before = model.getValue();
+      const after = before.slice(0, model.getOffsetAt(range.getStartPosition())) + r.replacement + before.slice(model.getOffsetAt(range.getEndPosition()));
+      const tab = active;
+      showReview({ title: t("ide.inline.review", { path: tab.path }), before, after, path: tab.path, pieces: true, acceptLabel: t("ide.inline.accept"), rejectLabel: t("pj.refuse"),
+        accept: (text) => { tab.model.pushEditOperations([], [{ range: tab.model.getFullModelRange(), text }], () => null); activate(tab); }, reject: () => activate(tab) });
+    } catch (err) { output(explain(err)); }
+  }
+
+  // ---- keys ------------------------------------------------------------------------------------------
+  const KEYS = [["P", "ide.key.quick"], ["⇧F", "ide.key.search"], ["B", "ide.key.side"], ["J", "ide.key.terminal"], ["L", "ide.key.agent"], ["K", "ide.key.inline"], ["S", "ide.key.save"]];
+  function drawKeys() {
+    const list = clear($("keys"));
+    const mod = isMac ? "⌘" : "Ctrl+";
+    for (const [k, label] of KEYS) list.append(el("li", { text: `${mod}${k}  ${t(label)}` }));
+    list.append(el("li", { text: `⇧Tab  ${t("ide.key.mode")}` }));
+  }
+  document.addEventListener("keydown", (e) => {
+    const mod = isMac ? e.metaKey : e.ctrlKey;
+    const inEditor = e.target && e.target.closest && e.target.closest(".monaco-editor");
+    if (e.key === "Tab" && e.shiftKey && !inEditor && !mentionItems.length) {
+      e.preventDefault();
+      setMode(MODES[(MODES.indexOf($("mode").value) + 1) % MODES.length]);
+      return;
+    }
+    if (!mod) return;
+    const k = e.key.toLowerCase();
+    if (k === "p" && !e.shiftKey) { e.preventDefault(); quickOpen(); }
+    else if (k === "f" && e.shiftKey) { e.preventDefault(); showSide("search"); }
+    else if (k === "b" && !e.shiftKey) { e.preventDefault(); sizes.sideOpen = !sizes.sideOpen; applySizes(); }
+    else if (k === "j") { e.preventDefault(); if (sizes.bottomOpen && document.querySelector('[data-bottom="terminal"]').classList.contains("on") && $("terminal-host").querySelector(".bp-term")) { sizes.bottomOpen = false; applySizes(); if (terminal) terminal.close(); } else showTerminal(); }
+    else if (k === "l") { e.preventDefault(); newAgent(); }
+    else if (k === "s" && !inEditor) { e.preventDefault(); saveActive(); }
+  }, true);
+  addEventListener("beforeunload", (e) => { if (tabs.some(isDirty)) { e.preventDefault(); e.returnValue = ""; } });
+
+  // ---- start ------------------------------------------------------------------------------------------
+  (async () => {
+    await loadWords();
+    $("ide").hidden = false;
+    $("back").href = `/#token=${encodeURIComponent(token)}&lang=${encodeURIComponent(lang)}`;
+    applySizes();
+    drawKeys();
+    renderModeHint();
+    try { monaco = await loadMonaco(); setupEditor(); } catch (err) { output(t("ide.err.editor_missing")); }
+    renderTabs();
+    await Promise.all([loadModels().catch((err) => output(explain(err))), loadFolders().catch((err) => output(explain(err)))]);
+    if ($("folder").value) await setFolder($("folder").value);
+  })();
+})();