bitpull 0.1.23 → 0.1.25

package/ui/ide.js

@@ -0,0 +1,1336 @@
+// BitPull projects: an editor and an AI agent on a folder of this computer, laid out like a modern code editor.
+// 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; icons are built element by element (a test checks it).
+"use strict";
+(function () {
+  const BP = window.__BITPULL__ || {};
+  const token = BP.token || "";
+  const $ = (id) => document.getElementById(id);
+  // Where the page's files are: /ui/~<build>/, which the webview keeps without asking again.
+  const BASE = ((document.currentScript && document.currentScript.src) || "/ui/ide.js").replace(/ide\.js(\?.*)?$/, "");
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  const MOD = isMac ? "⌘" : "Ctrl+";
+  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; };
+
+  // ---- icons: BitPull's own, drawn as lines ------------------------------------------------------------
+  const NS = "http://www.w3.org/2000/svg";
+  const ICONS = {
+    back: ["M10 4 6 8l4 4"], folder: ["M2 4.5h4.5l1.5 1.5h6v7H2z"], "chevron-down": ["M4 6l4 4 4-4"], "chevron-right": ["M6 4l4 4-4 4"],
+    search: ["M7 3a4 4 0 1 1 0 8a4 4 0 1 1 0-8z", "M10 10l3.5 3.5"], "layout-left": ["M2 3h12v10H2z", "M6 3v10", "M2.5 3.5h3v9h-3z"],
+    "layout-bottom": ["M2 3h12v10H2z", "M2 9.5h12", "M2.5 10h11v2.5h-11z"], "layout-right": ["M2 3h12v10H2z", "M10 3v10", "M10.5 3.5h3v9h-3z"],
+    gear: ["M8 5.5a2.5 2.5 0 1 1 0 5a2.5 2.5 0 1 1 0-5z", "M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.4 3.4l1.4 1.4M11.2 11.2l1.4 1.4M3.4 12.6l1.4-1.4M11.2 4.8l1.4-1.4"],
+    files: ["M4 2h5l3 3v9H4z", "M9 2v3h3", "M2 4v11h8"], git: ["M5 3a1.5 1.5 0 1 1 0 3a1.5 1.5 0 1 1 0-3z", "M5 10a1.5 1.5 0 1 1 0 3a1.5 1.5 0 1 1 0-3z", "M11 5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 1 1 0-3z", "M5 6v4M11 8c0 2-6 1-6 2"],
+    "new-file": ["M4 2h5l3 3v9H4z", "M9 2v3h3", "M8 8v4M6 10h4"], "new-folder": ["M2 4.5h4.5l1.5 1.5h6v7H2z", "M8 8v3.5M6.25 9.75h3.5"],
+    refresh: ["M13 8a5 5 0 1 1-1.5-3.5", "M13 3v2.5h-2.5"], collapse: ["M3 3h10v10H3z", "M5.5 8h5"], split: ["M2 3h12v10H2z", "M8 3v10"],
+    more: ["M3.5 8h.01M8 8h.01M12.5 8h.01"], problems: ["M8 2a6 6 0 1 1 0 12a6 6 0 1 1 0-12z", "M8 5v3.5M8 11h.01"], output: ["M3 4h10M3 7h10M3 10h7M3 13h5"],
+    terminal: ["M2 3h12v10H2z", "M4.5 6.5 6.5 8l-2 1.5M8 10h3"], ports: ["M8 2a6 6 0 1 1 0 12a6 6 0 1 1 0-12z", "M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12"],
+    play: ["M5 3.5v9l7-4.5z"], maximize: ["M3 10l5-5 5 5"], restore: ["M3 6l5 5 5-5"], close: ["M4 4l8 8M12 4l-8 8"], plus: ["M8 3v10M3 8h10"],
+    undo: ["M5 4 2.5 6.5 5 9", "M3 6.5h6.5a3.5 3.5 0 0 1 0 7H6"], stop: ["M4 4h8v8H4z"], send: ["M8 13V3M4 7l4-4 4 4"],
+    error: ["M8 2a6 6 0 1 1 0 12a6 6 0 1 1 0-12z", "M6 6l4 4M10 6l-4 4"], warning: ["M8 2.5 14 13H2z", "M8 6.5v3M8 11.3h.01"],
+    rename: ["M3 13l1-3 7-7 2 2-7 7z"], trash: ["M3 4.5h10M6 4.5V3h4v1.5M4.5 4.5l.7 9h5.6l.7-9"], check: ["M3.5 8.5l3 3 6-7"],
+    logo: ["M8 1.5 14 5v6l-6 3.5L2 11V5z", "M8 8v6.5M8 8l6-3M8 8 2 5"],
+  };
+  function icon(name) {
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("viewBox", "0 0 16 16");
+    svg.setAttribute("class", "i");
+    svg.setAttribute("aria-hidden", "true");
+    for (const d of ICONS[name] || []) { const p = document.createElementNS(NS, "path"); p.setAttribute("d", d); svg.appendChild(p); }
+    return svg;
+  }
+  const drawIcons = (root) => { for (const n of root.querySelectorAll("[data-icon]")) if (!n.querySelector("svg")) n.prepend(icon(n.dataset.icon)); };
+
+  /** File icons: a coloured mark per kind of file, BitPull's own. */
+  const FILE_KINDS = [
+    [/\.(ts|tsx|mts|cts)$/i, "#3178c6", "TS"], [/\.(js|mjs|cjs|jsx)$/i, "#d8bc2c", "JS"], [/\.json$/i, "#cbcb41", "{}"], [/\.(md|markdown)$/i, "#519aba", "M"],
+    [/\.(html?|vue|svelte)$/i, "#e44d26", "<>"], [/\.(css|scss|sass|less)$/i, "#42a5f5", "#"], [/\.py$/i, "#3572a5", "Py"], [/\.go$/i, "#00add8", "Go"],
+    [/\.rs$/i, "#dea584", "Rs"], [/\.(java|kt|kts)$/i, "#b07219", "J"], [/\.(rb)$/i, "#cc342d", "Rb"], [/\.(php)$/i, "#777bb4", "P"], [/\.(c|h|cpp|hpp|cc)$/i, "#659ad2", "C"],
+    [/\.(cs)$/i, "#68217a", "C#"], [/\.(sh|bash|zsh|ps1|bat|cmd)$/i, "#89e051", "$"], [/\.(ya?ml|toml|ini|conf|cfg)$/i, "#cb171e", "≡"], [/\.(sql|db|sqlite)$/i, "#e38c00", "Db"],
+    [/\.(png|jpe?g|gif|webp|svg|ico|bmp)$/i, "#a074c4", "▣"], [/\.(lock)$/i, "#8c8c8c", "🔒"], [/\.(txt|log)$/i, "#8c8c8c", "≡"], [/\.(xml|plist)$/i, "#e37933", "<>"],
+  ];
+  const SPECIAL = { dockerfile: ["#2496ed", "D"], "docker-compose.yml": ["#2496ed", "D"], "compose.yaml": ["#2496ed", "D"], ".gitignore": ["#f14e32", "G"], ".gitattributes": ["#f14e32", "G"], ".env": ["#e5c07b", "$"], ".env.example": ["#e5c07b", "$"], license: ["#d0bf41", "©"], makefile: ["#6d8086", "M"], "package.json": ["#cb3837", "N"], "package-lock.json": ["#cb3837", "N"] };
+  function fileIcon(name, dir, open) {
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("viewBox", "0 0 16 16");
+    svg.setAttribute("class", "f");
+    svg.setAttribute("aria-hidden", "true");
+    const add = (tag, attrs) => { const n = document.createElementNS(NS, tag); for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, v); svg.appendChild(n); return n; };
+    if (dir) {
+      const muted = /^(node_modules|\.git|dist|build|\.next|\.cache|coverage|target|out)$/.test(name);
+      const color = muted ? "#7a7a7a" : name === "src" ? "#42a5f5" : /^(test|tests|__tests__|spec)$/.test(name) ? "#4caf50" : /^\./.test(name) ? "#8a8a8a" : "#dcb67a";
+      add("path", { d: open ? "M1.5 4h4l1.3 1.3H14v1.2H4.2L2.5 12.5h-1z M4.2 6.5H15l-2 6H2.5z" : "M1.5 3.5h4.3l1.4 1.4h7.3v8.6h-13z", fill: color });
+      return svg;
+    }
+    const low = name.toLowerCase();
+    const k = SPECIAL[low] || (low.startsWith(".env") ? SPECIAL[".env"] : null) || (FILE_KINDS.find(([re]) => re.test(name)) || []).slice(1);
+    const [color, mark] = k && k.length ? k : ["#8c8c8c", "≡"];
+    if (mark.length <= 2 && /[A-Za-z#${<©▣≡]/.test(mark)) {
+      add("rect", { x: "1.5", y: "2.5", width: "13", height: "11", rx: "2", fill: color, opacity: ".18" });
+      const tx = add("text", { x: "8", y: "11.2", "text-anchor": "middle", "font-size": mark.length > 1 ? "6.6" : "8.5", "font-weight": "700", "font-family": "system-ui, sans-serif", fill: color });
+      tx.textContent = mark;
+    } else add("path", { d: "M4 1.5h5l3 3v10H4z", fill: color, opacity: ".7" });
+    return svg;
+  }
+
+  // ---- 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; });
+
+  // ---- menus -----------------------------------------------------------------------------------------
+  /** items: { label, keys, check, run, sep, head, sub } */
+  function menu(anchor, items, at) {
+    const box = clear($("menu"));
+    const ul = el("ul");
+    for (const it of items) {
+      if (it.sep) { ul.append(el("li", { class: "sep" })); continue; }
+      if (it.head) { ul.append(el("li", { class: "head", text: it.head })); continue; }
+      ul.append(el("li", { role: "menuitem", onclick: (e) => { e.stopPropagation(); if (it.sub) return menu(e.currentTarget, it.sub, "side"); closeMenu(); it.run && it.run(); } },
+        el("span", { class: "check" }, it.check ? icon("check") : null), el("span", { text: it.label }), it.keys ? el("span", { class: "keys", text: it.keys }) : it.sub ? el("span", { class: "keys" }, icon("chevron-right")) : null));
+    }
+    box.append(ul);
+    box.hidden = false;
+    const r = anchor.getBoundingClientRect();
+    const w = box.offsetWidth, h = box.offsetHeight;
+    let x = at === "side" ? r.right + 2 : r.left, y = at === "side" ? r.top : r.bottom + 2;
+    if (document.documentElement.dir === "rtl" && at !== "side") x = r.right - w;
+    box.style.left = `${Math.max(4, Math.min(x, innerWidth - w - 4))}px`;
+    box.style.top = `${Math.max(4, y + h > innerHeight ? r.top - h - 2 : y)}px`;
+  }
+  const closeMenu = () => { $("menu").hidden = true; };
+  document.addEventListener("click", (e) => { if (!e.target.closest || !e.target.closest("#menu")) closeMenu(); }, true);
+  document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeMenu(); });
+
+  // ---- 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" : "primary", 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 editorLoaded = () => {};
+  const editorReady = new Promise((r) => { editorLoaded = r; });
+  let monaco = null, editor = null, editor2 = null, diffEditor = null, focused = null;
+  let folder = "";
+  const tabs = []; // { path, model, mtime, saved, view, secret }
+  let active = null;
+  let models = [];
+  let session = null; // the agent shown on the right
+  let cursor = 0;
+  let review = null;
+  let terminal = null;
+  let gitInfo = { branch: "", status: new Map(), ignored: [] };
+  let problemCounts = { errors: 0, warnings: 0 };
+
+  // ---- 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 panel, once;
+   *   open()  shows it and focuses it;  close()  hides it;  newTab()  opens another shell in the folder;
+   *   runVisible(command)  shows a command the agent runs, read-only (it runs only on this computer, through
+   *   the Projects path with its approvals; models never reach it);  folderChanged(folder)  optional.
+   */
+  window.BitPullIDE = {
+    terminal: {
+      register(impl) {
+        terminal = impl;
+        clear($("terminal-host"));
+        impl.mount($("terminal-host"), { token, folder, lang, t });
+        // Its buttons become icons, like the rest of the panel; the words stay as their name.
+        const TERM_ICONS = { "term.new": "plus", "term.split": "split", "term.close": "trash" };
+        const iconize = () => {
+          for (const b of $("terminal-host").querySelectorAll(".bp-term-bar button[data-action]")) {
+            const name = TERM_ICONS[b.dataset.action];
+            if (!name || b.classList.contains("ib")) continue;
+            b.setAttribute("aria-label", b.textContent);
+            b.textContent = "";
+            b.classList.add("ib");
+            b.append(icon(name));
+          }
+        };
+        new MutationObserver(iconize).observe($("terminal-host"), { childList: true, subtree: true });
+        if (layoutState.panelOpen && 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 pad", text: t("ide.terminal.missing") }));
+  }
+
+  // ---- layout: a grid whose parts can be shown, hidden, moved and resized, and are remembered --------------
+  const layoutState = Object.assign(
+    { side: 260, agent: 380, panel: 240, panelWide: 420, sideOpen: true, agentOpen: true, panelOpen: true, panelPos: "bottom", panelAlign: "center", panelMax: false, icons: false, sideView: "files", panes: { tree: true, outline: false, history: false } },
+    store.get("layout", {}),
+  );
+  const narrow = () => innerWidth < 900;
+  function layout() {
+    const L = layoutState;
+    const ws = $("workbench");
+    $("ide").classList.toggle("narrow", narrow());
+    $("side").hidden = !L.sideOpen;
+    $("agent").hidden = !L.agentOpen;
+    $("panel").hidden = !L.panelOpen;
+    for (const [id, on] of [["toggle-side", L.sideOpen], ["toggle-panel", L.panelOpen], ["toggle-agent", L.agentOpen]]) $(id).classList.toggle("on", on);
+    $("panel").className = `at-${L.panelPos}${L.icons ? " icons" : ""}`;
+    const sashes = { side: ws.querySelector('[data-split="side"]'), panel: ws.querySelector('[data-split="panel"]'), agent: ws.querySelector('[data-split="agent"]') };
+    sashes.side.hidden = !L.sideOpen;
+    sashes.agent.hidden = !L.agentOpen;
+    sashes.panel.hidden = !L.panelOpen || L.panelMax;
+    sashes.side.className = "sash v";
+    sashes.agent.className = "sash v";
+    sashes.panel.className = `sash ${L.panelPos === "left" || L.panelPos === "right" ? "v" : "h"}`;
+    $("editor-area").hidden = L.panelOpen && L.panelMax;
+    $("panel-max").replaceChildren(icon(L.panelMax ? "restore" : "maximize"));
+    if (narrow()) {
+      ws.style.gridTemplateColumns = "minmax(0, 1fr)";
+      const rows = ["act"];
+      const heights = ["auto"];
+      if (L.sideOpen) { rows.push("side"); heights.push("34vh"); }
+      if (!(L.panelOpen && L.panelMax)) { rows.push("edit"); heights.push("62vh"); }
+      if (L.panelOpen) { rows.push("panel"); heights.push(L.panelMax ? "70vh" : "34vh"); }
+      if (L.agentOpen) { rows.push("agent"); heights.push("80vh"); }
+      ws.style.gridTemplateAreas = rows.map((r) => `"${r}"`).join(" ");
+      ws.style.gridTemplateRows = heights.join(" ");
+    } else {
+      const side = L.sideOpen ? `${L.side}px` : "0px";
+      const agent = L.agentOpen ? `${L.agent}px` : "0px";
+      const s1 = L.sideOpen ? "4px" : "0px", s3 = L.agentOpen ? "4px" : "0px";
+      const panelOn = L.panelOpen;
+      const max = panelOn && L.panelMax;
+      if (!panelOn || L.panelPos === "bottom" || L.panelPos === "top") {
+        const ph = !panelOn ? "0px" : max ? "minmax(0, 1fr)" : `${L.panel}px`;
+        const eh = max ? "0px" : "minmax(0, 1fr)";
+        const s2 = panelOn && !max ? "4px" : "0px";
+        const justify = L.panelAlign === "justify";
+        const top = L.panelPos === "top";
+        const editRow = `act side s1 edit s3 agent`;
+        const panelRow = justify ? `act panel panel panel panel panel` : `act side s1 panel s3 agent`;
+        const sashRow = justify ? `act s2 s2 s2 s2 s2` : `act side s1 s2 s3 agent`;
+        const areas = top ? [panelRow, sashRow, editRow] : [editRow, sashRow, panelRow];
+        ws.style.gridTemplateAreas = areas.map((r) => `"${r}"`).join(" ");
+        ws.style.gridTemplateColumns = `48px ${side} ${s1} minmax(0, 1fr) ${s3} ${agent}`;
+        ws.style.gridTemplateRows = top ? `${ph} ${s2} ${eh}` : `${eh} ${s2} ${ph}`;
+      } else {
+        const pw = max ? "minmax(0, 1fr)" : `${L.panelWide}px`;
+        const ew = max ? "0px" : "minmax(0, 1fr)";
+        const s2 = max ? "0px" : "4px";
+        const left = L.panelPos === "left";
+        ws.style.gridTemplateAreas = left ? `"act side s1 panel s2 edit s3 agent"` : `"act side s1 edit s2 panel s3 agent"`;
+        ws.style.gridTemplateColumns = left ? `48px ${side} ${s1} ${pw} ${s2} ${ew} ${s3} ${agent}` : `48px ${side} ${s1} ${ew} ${s2} ${pw} ${s3} ${agent}`;
+        ws.style.gridTemplateRows = "minmax(0, 1fr)";
+      }
+    }
+    for (const p of document.querySelectorAll(".pane")) p.classList.toggle("open", !!L.panes[p.dataset.pane]);
+    store.set("layout", L);
+    relayout();
+  }
+  /** Monaco and the terminal measure themselves after the grid has settled. */
+  function relayout() {
+    requestAnimationFrame(() => {
+      for (const ed of [editor, editor2, diffEditor]) if (ed) ed.layout();
+      if (terminal && terminal.fit) terminal.fit();
+    });
+  }
+  addEventListener("resize", () => layout());
+  for (const s of document.querySelectorAll(".sash")) {
+    s.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      const which = s.dataset.split;
+      const L = layoutState;
+      const rtl = document.documentElement.dir === "rtl";
+      const vertical = s.classList.contains("v");
+      const start = { x: e.clientX, y: e.clientY, side: L.side, agent: L.agent, panel: L.panel, panelWide: L.panelWide };
+      s.classList.add("drag");
+      const move = (m) => {
+        const dx = (m.clientX - start.x) * (rtl ? -1 : 1), dy = m.clientY - start.y;
+        if (which === "side") L.side = Math.min(700, Math.max(170, start.side + dx));
+        if (which === "agent") L.agent = Math.min(900, Math.max(280, start.agent - dx));
+        if (which === "panel" && !vertical) L.panel = Math.min(innerHeight - 140, Math.max(90, start.panel + (L.panelPos === "top" ? dy : -dy)));
+        if (which === "panel" && vertical) L.panelWide = Math.min(innerWidth - 400, Math.max(220, start.panelWide + (L.panelPos === "left" ? dx : -dx)));
+        layout();
+      };
+      const up = () => { s.classList.remove("drag"); removeEventListener("mousemove", move); removeEventListener("mouseup", up); };
+      addEventListener("mousemove", move);
+      addEventListener("mouseup", up);
+    });
+    s.addEventListener("dblclick", () => {
+      const which = s.dataset.split;
+      Object.assign(layoutState, which === "side" ? { side: 260 } : which === "agent" ? { agent: 380 } : { panel: 240, panelWide: 420 });
+      layout();
+    });
+  }
+  const toggle = (k) => { layoutState[k] = !layoutState[k]; if (k === "panelOpen" && !layoutState.panelOpen) layoutState.panelMax = false; layout(); };
+  $("toggle-side").addEventListener("click", () => toggle("sideOpen"));
+  $("toggle-panel").addEventListener("click", () => { if (!layoutState.panelOpen) showBottom(currentBottom()); else toggle("panelOpen"); });
+  $("toggle-agent").addEventListener("click", () => toggle("agentOpen"));
+  $("panel-max").addEventListener("click", () => toggle("panelMax"));
+
+  function showSide(name) {
+    layoutState.sideOpen = true;
+    layoutState.sideView = name;
+    for (const b of document.querySelectorAll("#activity button[data-side]")) b.classList.toggle("on", b.dataset.side === name);
+    for (const p of document.querySelectorAll("#side > section")) p.hidden = p.dataset.panel !== name;
+    layout();
+    if (name === "git") gitRefresh();
+    if (name === "outline" || name === "files") renderOutline();
+    if (name === "history" || name === "files") renderHistory();
+    if (name === "search") $("search-q").focus();
+  }
+  for (const b of document.querySelectorAll("#activity button[data-side]")) b.addEventListener("click", () => {
+    if (b.classList.contains("on") && layoutState.sideOpen) { layoutState.sideOpen = false; layout(); } else showSide(b.dataset.side);
+  });
+  $("views-more").addEventListener("click", (e) => menu(e.currentTarget, [
+    { label: t("ide.explorer"), keys: `${MOD}⇧E`, run: () => showSide("files") },
+    { label: t("ide.search"), keys: `${MOD}⇧F`, run: () => showSide("search") },
+    { label: t("ide.git"), keys: isMac ? "⌃⇧G" : "Ctrl+Shift+G", run: () => showSide("git") },
+    { label: t("ide.outline"), run: () => showSide("outline") },
+    { label: t("ide.history"), run: () => showSide("history") },
+  ], "side"));
+  for (const p of document.querySelectorAll(".pane")) p.querySelector(".pane-head").addEventListener("click", (e) => {
+    if (e.target.closest(".pane-acts")) return;
+    layoutState.panes[p.dataset.pane] = !layoutState.panes[p.dataset.pane];
+    layout();
+    if (p.dataset.pane === "outline") renderOutline();
+    if (p.dataset.pane === "history") renderHistory();
+  });
+
+  const currentBottom = () => (document.querySelector("[data-bottom].on") || {}).dataset?.bottom || "problems";
+  function showBottom(name) {
+    layoutState.panelOpen = 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;
+    if (name === "ports") { document.querySelector('[data-bottom="ports"]').hidden = false; refreshPorts(); }
+    $("problems-run").hidden = name !== "problems";
+    layout();
+  }
+  for (const b of document.querySelectorAll("[data-bottom]")) b.addEventListener("click", () => (b.dataset.bottom === "terminal" ? showTerminal() : showBottom(b.dataset.bottom)));
+  $("bottom-close").addEventListener("click", () => { layoutState.panelOpen = false; layoutState.panelMax = false; layout(); if (terminal) terminal.close(); });
+  $("panel-more").addEventListener("click", (e) => {
+    const L = layoutState;
+    const pos = (p) => ({ label: t(`ide.panel.pos.${p}`), check: L.panelPos === p, run: () => { L.panelPos = p; layout(); } });
+    menu(e.currentTarget, [
+      { label: t("ide.ports"), run: () => showBottom("ports") },
+      { sep: true },
+      { label: t("ide.panel.position"), sub: ["bottom", "top", "left", "right"].map(pos) },
+      { label: t("ide.panel.align"), sub: ["center", "justify"].map((a) => ({ label: t(`ide.panel.align.${a}`), check: L.panelAlign === a, run: () => { L.panelAlign = a; layout(); } })) },
+      { label: t("ide.panel.icons"), check: L.icons, run: () => { L.icons = !L.icons; layout(); } },
+      { label: t("ide.panel.hide"), keys: `${MOD}J`, run: () => $("bottom-close").click() },
+    ]);
+  });
+  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; };
+
+  // ---- ports: servers started from the app --------------------------------------------------------
+  async function refreshPorts() {
+    const body = $("ports").tBodies[0];
+    try {
+      const r = await api("/api/ws/ports");
+      clear(body);
+      for (const p of r.ports) body.append(el("tr", {}, el("td", { text: String(p.port) }), el("td", { text: p.address }), el("td", { text: `${p.command} (${p.pid})` }),
+        el("td", {}, el("button", { class: "ghost", text: t("ide.ports.open"), "data-tip": "tip.ide.ports.open", onclick: () => api("/api/ws/preview", { url: p.url }).catch((err) => output(explain(err))) }))));
+      $("ports-empty").hidden = r.ports.length > 0;
+      $("ports-count").hidden = !r.ports.length;
+      $("ports-count").textContent = String(r.ports.length);
+      if (r.ports.length) document.querySelector('[data-bottom="ports"]').hidden = false;
+    } catch (err) { $("ports-empty").hidden = false; $("ports-empty").textContent = explain(err); }
+  }
+
+  // ---- 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 = `${BASE}monaco/vs/loader.js`;
+      s.onerror = () => reject(new Error("editor_missing"));
+      s.onload = () => {
+        window.require.config({ paths: { vs: `${BASE}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 > 400))) { clearInterval(wait); resolve(m); }
+          else if (Date.now() - started > 30000) { clearInterval(wait); reject(new Error("editor_missing")); }
+        }, 25);
+      };
+      document.body.appendChild(s);
+    });
+  }
+  const dark = () => matchMedia("(prefers-color-scheme: dark)").matches;
+  function defineThemes() {
+    monaco.editor.defineTheme("bitpull-dark", { base: "vs-dark", inherit: true, rules: [], colors: { "editor.background": "#1f1f1f", "editorGutter.background": "#1f1f1f", "minimap.background": "#1f1f1f", "editorLineNumber.foreground": "#6e7681", "editorLineNumber.activeForeground": "#cccccc", "editor.lineHighlightBorder": "#282828", "editorIndentGuide.background1": "#404040", "editorWidget.background": "#202020" } });
+    monaco.editor.defineTheme("bitpull-light", { base: "vs", inherit: true, rules: [], colors: { "editor.background": "#ffffff", "editorLineNumber.foreground": "#6e7681" } });
+  }
+  const theme = () => (dark() ? "bitpull-dark" : "bitpull-light");
+  const EDITOR_OPTS = () => ({ automaticLayout: false, theme: theme(), minimap: { enabled: true, renderCharacters: false, scale: 1 }, fontSize: 13, lineHeight: 20, fontFamily: 'Menlo, Monaco, "Cascadia Code", Consolas, "Courier New", monospace', tabSize: 2, renderWhitespace: "selection", smoothScrolling: true, scrollBeyondLastLine: false, fixedOverflowWidgets: true, padding: { top: 4 }, stickyScroll: { enabled: true }, bracketPairColorization: { enabled: true }, guides: { bracketPairs: "active", indentation: true } });
+  function wireEditor(ed) {
+    ed.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => saveActive());
+    ed.addAction({ id: "bitpull.inline", label: t("ide.inline"), keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK], contextMenuGroupId: "1_modification", run: () => inlineEdit() });
+    ed.onDidFocusEditorText(() => { focused = ed; const m = ed.getModel(); const tab = m && tabs.find((x) => x.model === m); if (tab && tab !== active) { active = tab; renderTabs(); renderCrumbs(); } });
+    ed.onDidChangeModelContent(() => { renderTabs(); clearTimeout(outlineTimer); outlineTimer = setTimeout(renderOutline, 600); });
+    ed.onDidChangeCursorPosition(() => { markOutline(); renderPos(); });
+  }
+  function setupEditor() {
+    defineThemes();
+    editor = monaco.editor.create($("editor"), { ...EDITOR_OPTS(), model: null });
+    diffEditor = monaco.editor.createDiffEditor($("diff"), { ...EDITOR_OPTS(), renderSideBySide: true, originalEditable: false });
+    focused = editor;
+    wireEditor(editor);
+    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => monaco.editor.setTheme(theme()));
+    // The editors follow their boxes: one observer, not a timer per editor.
+    new ResizeObserver(() => relayout()).observe($("editor-wrap"));
+  }
+  let outlineTimer = null;
+
+  // ---- files --------------------------------------------------------------------------------------
+  const opened = new Set(["."]);
+  const treeCache = new Map(); // path → entries, so that reopening a folder draws at once
+  const gitLetter = (path) => gitInfo.status.get(path) || null;
+  const isIgnored = (path, dir) => gitInfo.ignored.some((p) => (p.endsWith("/") ? `${path}/`.startsWith(p) || path === p.slice(0, -1) : path === p));
+  const dirChanged = (path) => { for (const [p, l] of gitInfo.status) if (p.startsWith(`${path}/`) && l !== "D") return l === "U" || l === "A" ? "U" : "M"; return null; };
+  async function loadTree(path, into, depth) {
+    let entries = treeCache.get(path);
+    const fresh = api("/api/ws/tree", { folder, path }).then((r) => { treeCache.set(path, r.entries); return r.entries; });
+    if (!entries) entries = await fresh; else fresh.then((e) => { if (JSON.stringify(e) !== JSON.stringify(entries)) drawTree(path, into, depth, e); }).catch(() => {});
+    drawTree(path, into, depth, entries);
+  }
+  function drawTree(path, into, depth, entries) {
+    clear(into);
+    for (const e of entries) {
+      const li = el("li", { role: "treeitem" });
+      const open = e.dir && opened.has(e.path);
+      const letter = e.dir ? dirChanged(e.path) : gitLetter(e.path);
+      const cls = ["item", open ? "open" : "", e.name.startsWith(".") ? "dot" : "", isIgnored(e.path, e.dir) ? "ignored" : "", letter ? `git-${letter}` : "", active && active.path === e.path ? "on" : ""].filter(Boolean).join(" ");
+      const item = el("div", { class: cls, title: e.path, tabindex: "-1", style: `padding-inline-start:${8 + depth * 8}px` },
+        el("span", { class: "twist" }, e.dir ? icon("chevron-right") : null),
+        e.secret ? icon("warning") : fileIcon(e.name, e.dir, open),
+        el("span", { class: "name", text: e.name }),
+        letter && !e.dir ? el("span", { class: "git", text: letter }) : letter ? el("span", { class: "git", text: "•" }) : null,
+        el("span", { class: "acts" },
+          el("button", { class: "ib", "data-tip": "tip.ide.rename", onclick: (ev) => { ev.stopPropagation(); renamePath(e.path); } }, icon("rename")),
+          el("button", { class: "ib", "data-tip": "tip.ide.delete", onclick: (ev) => { ev.stopPropagation(); deletePath(e.path, e.dir); } }, icon("trash"))));
+      for (let d = 0; d < depth; d++) item.append(el("span", { class: "guide", style: `inset-inline-start:${16 + d * 8}px` }));
+      li.append(item);
+      if (e.dir) {
+        const sub = el("ul", { role: "group" });
+        li.append(sub);
+        if (open) loadTree(e.path, sub, depth + 1).catch(() => {});
+        item.addEventListener("click", () => {
+          if (opened.has(e.path)) { opened.delete(e.path); clear(sub); item.classList.remove("open"); item.replaceChild(fileIcon(e.name, true, false), item.children[1]); }
+          else { opened.add(e.path); item.classList.add("open"); item.replaceChild(fileIcon(e.name, true, true), item.children[1]); loadTree(e.path, sub, depth + 1).catch((err) => output(explain(err))); }
+        });
+      } else item.addEventListener("click", () => openFile(e.path));
+      into.append(li);
+    }
+  }
+  const refreshTree = () => { if (!folder) return; treeCache.clear(); loadTree(".", $("tree"), 0).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(); refreshGit(); });
+  $("collapse-all").addEventListener("click", () => { opened.clear(); opened.add("."); refreshTree(); });
+
+  // ---- tabs, breadcrumbs, 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" : ""}${isDirty(tab) ? " dirty" : ""}`, role: "tab", title: tab.path, onclick: () => activate(tab), onauxclick: (e) => { if (e.button === 1) closeTab(tab); } },
+        fileIcon(name, false), el("span", { text: name }),
+        el("button", { class: "x", "data-tip": "tip.ide.close", onclick: (e) => { e.stopPropagation(); closeTab(tab); } }, icon("close"))));
+    }
+    const on = bar.querySelector(".tab.on");
+    if (on) on.scrollIntoView({ block: "nearest", inline: "nearest" });
+    $("welcome").hidden = !!active || !!review;
+    $("editor").hidden = !active || !!review;
+    $("editor2").hidden = !splitOn || !active || !!review;
+    $("crumbs").hidden = !active || !!review;
+  }
+  function renderCrumbs() {
+    const c = clear($("crumbs"));
+    if (!active) return;
+    const parts = active.path.split("/");
+    parts.forEach((p, i) => {
+      if (i) c.append(el("span", { class: "sep" }, icon("chevron-right")));
+      c.append(el("span", { class: "c" }, i === parts.length - 1 ? fileIcon(p, false) : null, el("span", { text: p })));
+    });
+    renderPos();
+  }
+  function renderPos() {
+    const ed = focused || editor;
+    const pos = ed && ed.getPosition();
+    $("sb-pos").hidden = !active || !pos;
+    if (pos) $("sb-pos").textContent = t("ide.status.pos", { line: pos.lineNumber, col: pos.column });
+    const m = active && active.model;
+    $("sb-lang").hidden = !m;
+    $("sb-enc").hidden = !m;
+    if (m) { const id = m.getLanguageId(); const l = monaco.languages.getLanguages().find((x) => x.id === id); $("sb-lang").textContent = (l && l.aliases && l.aliases[0]) || id; }
+  }
+  async function openFile(path, line) {
+    let tab = tabs.find((x) => x.path === path);
+    let r;
+    if (!tab) {
+      // The file is read while the editor may still be loading: a click right after opening the page counts.
+      try { [r] = await Promise.all([api("/api/ws/read", { folder, path }), editorReady]); } catch (err) { output(explain(err)); return; }
+      if (!monaco) return;
+      tab = tabs.find((x) => x.path === path);
+    }
+    if (!tab) {
+      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);
+    const ed = focused || editor;
+    if (line) { ed.revealLineInCenter(line); ed.setPosition({ lineNumber: line, column: 1 }); ed.focus(); }
+  }
+  function activate(tab) {
+    const ed = focused || editor;
+    if (active && active.model && ed.getModel() === active.model) active.view = ed.saveViewState();
+    active = tab;
+    if (review) closeReview();
+    if (ed.getModel() !== tab.model) ed.setModel(tab.model);
+    if (tab.view) ed.restoreViewState(tab.view);
+    renderTabs();
+    renderCrumbs();
+    relayout();
+    clearTimeout(outlineTimer);
+    outlineTimer = setTimeout(() => { renderOutline(); if (layoutState.panes.history || layoutState.sideView === "history") renderHistory(); }, 120);
+    for (const n of document.querySelectorAll("#tree .item")) n.classList.toggle("on", n.title === tab.path);
+    ed.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);
+    for (const ed of [editor, editor2]) if (ed && ed.getModel() === tab.model) ed.setModel(null);
+    if (active === tab) { active = null; if (tabs.length) activate(tabs[tabs.length - 1]); }
+    tab.model.dispose();
+    renderTabs();
+    renderCrumbs();
+  }
+  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();
+      refreshGit();
+    } 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();
+  }
+  // Split editor: a second editor beside the first, on the same file; each keeps its own position.
+  let splitOn = false;
+  function toggleSplit() {
+    splitOn = !splitOn;
+    if (splitOn && !editor2) { editor2 = monaco.editor.create($("editor2"), { ...EDITOR_OPTS(), model: null }); wireEditor(editor2); }
+    if (editor2) editor2.setModel(splitOn && active ? active.model : null);
+    if (!splitOn) focused = editor;
+    renderTabs();
+    relayout();
+  }
+  $("split-editor").addEventListener("click", () => { if (active) toggleSplit(); });
+  $("editor-more").addEventListener("click", (e) => menu(e.currentTarget, [
+    { label: t("ide.save"), keys: `${MOD}S`, run: () => saveActive() },
+    { label: t("ide.split"), check: splitOn, run: () => { if (active) toggleSplit(); } },
+    { label: t("ide.close.all"), run: async () => { for (const tab of [...tabs]) await closeTab(tab); } },
+  ]));
+
+  // ---- 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 langUri = 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(langUri) ? monaco.editor.getModel(langUri).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;
+    $("editor2").hidden = true;
+    $("welcome").hidden = true;
+    $("crumbs").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", "data-tip": "tip.ide.review.piece", text: t("ide.review.piece", { n: i + 1 }), onclick: () => revertPiece(c, original, modified) })));
+      };
+      diffEditor.onDidUpdateDiff(draw);
+    }
+    relayout();
+  }
+  /** 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, the command palette, search -------------------------------------------------------
+  function picker(title, placeholder, source, onPick) {
+    const input = el("input", { type: "text", 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" : "", onclick: () => pick(r) }, r.icon || null, el("span", { class: "name", text: r.label }), r.keys ? el("span", { class: "keys", text: r.keys }) : null))); const on = list.querySelector("li.on"); if (on) on.scrollIntoView({ block: "nearest" }); };
+    const pick = (r) => { $("modal").hidden = true; onPick(r); };
+    let timer = null;
+    const update = () => { clearTimeout(timer); timer = setTimeout(async () => { try { results = await source(input.value.trim()); sel = 0; draw(); } catch { results = []; draw(); } }, 80); };
+    input.addEventListener("input", update);
+    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]);
+    });
+    update();
+    modal(title, [input, list], [{ label: t("ide.close"), ghost: true, value: null }]);
+  }
+  function quickOpen() {
+    if (!folder) return;
+    picker(t("ide.quick"), t("ide.quick.placeholder"), async (q) => {
+      if (!q) return tabs.map((x) => ({ label: x.path, path: x.path, icon: fileIcon(x.path.split("/").pop(), false) }));
+      return (await api("/api/ws/search", { folder, query: q, names: true })).results.slice(0, 60).map((r) => ({ label: r.path, path: r.path, icon: fileIcon(r.path.split("/").pop(), false) }));
+    }, (r) => openFile(r.path));
+  }
+  const COMMANDS = () => [
+    { label: t("ide.quick"), keys: `${MOD}P`, run: quickOpen },
+    { label: t("ide.save"), keys: `${MOD}S`, run: () => saveActive() },
+    { label: t("ide.agent.new"), keys: `${MOD}L`, run: () => newAgent() },
+    { label: t("ide.inline"), keys: `${MOD}K`, run: () => inlineEdit() },
+    { label: t("ide.cmd.mode"), keys: "⇧Tab", run: () => cycleMode() },
+    { label: t("ide.cmd.toggle.side"), keys: `${MOD}B`, run: () => toggle("sideOpen") },
+    { label: t("ide.cmd.toggle.panel"), keys: `${MOD}J`, run: () => $("toggle-panel").click() },
+    { label: t("ide.cmd.toggle.agent"), keys: `${MOD}⌥B`, run: () => toggle("agentOpen") },
+    { label: t("ide.cmd.terminal"), keys: isMac ? "⌃`" : "Ctrl+`", run: showTerminal },
+    { label: t("ide.explorer"), keys: `${MOD}⇧E`, run: () => showSide("files") },
+    { label: t("ide.search"), keys: `${MOD}⇧F`, run: () => showSide("search") },
+    { label: t("ide.git"), run: () => showSide("git") },
+    { label: t("ide.problems.run"), run: () => $("problems-run").click() },
+    { label: t("ide.ports"), run: () => showBottom("ports") },
+    { label: t("ide.split"), run: () => { if (active) toggleSplit(); } },
+    { label: t("ide.preview"), run: () => openPreview() },
+    { label: t("pj.limits"), run: () => editLimits() },
+    { label: t("pj.folder.add"), run: () => addFolder() },
+    ...["bottom", "top", "left", "right"].map((p) => ({ label: `${t("ide.panel.position")}: ${t(`ide.panel.pos.${p}`)}`, run: () => { layoutState.panelPos = p; layout(); } })),
+  ];
+  function palette() {
+    picker(t("ide.palette"), t("ide.palette.placeholder"), async (q) => COMMANDS().filter((c) => !q || c.label.toLowerCase().includes(q.toLowerCase())), (c) => c.run());
+  }
+  $("palette-btn").addEventListener("click", palette);
+  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) }, fileIcon(hit.path.split("/").pop(), false), el("span", { class: "name", text: hit.text.trim() }), el("span", { class: "muted small", text: `${hit.path.split("/").pop()}:${hit.line}` })));
+    } 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 -------------------------------------------------------------------
+  /** Branch and colours in the tree, quietly: a folder without git simply shows none. */
+  async function refreshGit() {
+    if (!folder) return;
+    try {
+      const r = await api("/api/ws/git/status", { folder });
+      const status = new Map();
+      for (const f of r.files) status.set(f.path.replace(/\/$/, ""), f.unstaged === "?" ? "U" : f.staged === "A" ? "A" : f.unstaged === "D" || f.staged === "D" ? "D" : "M");
+      gitInfo = { branch: (r.branch || "").split("...")[0], status, ignored: r.ignored || [] };
+    } catch { gitInfo = { branch: "", status: new Map(), ignored: [] }; }
+    $("sb-branch").hidden = !gitInfo.branch;
+    $("sb-branch").lastChild.textContent = gitInfo.branch;
+    if (treeCache.size) loadTree(".", $("tree"), 0).catch(() => {});
+  }
+  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 = (letter, stage) => el("li", { title: f.path, onclick: () => gitDiff(f.path, stage === false) },
+          fileIcon(f.path.split("/").pop(), false), el("span", { class: "name", text: f.path.split("/").pop() }), el("span", { class: "muted small name", text: f.path.includes("/") ? f.path.replace(/\/[^/]*$/, "") : "" }), el("span", { class: "grow" }),
+          el("button", { class: "ib", "data-tip": stage ? "tip.ide.git.stage" : "tip.ide.git.unstage", 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); } } }, icon(stage ? "plus" : "undo")),
+          el("span", { class: `badge ${letter === "U" || letter === "A" ? "good" : letter === "D" ? "bad" : "warn"}`, text: letter }));
+        if (f.staged) staged.append(row(f.staged, false));
+        if (f.unstaged) changes.append(row(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); }
+    refreshGit();
+  }
+  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);
+  $("sb-branch").addEventListener("click", () => showSide("git"));
+  $("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 --------------------------------------------------------------
+  function renderProblemCounts() {
+    $("sb-errors").textContent = String(problemCounts.errors);
+    $("sb-warnings").textContent = String(problemCounts.warnings);
+    const n = problemCounts.errors + problemCounts.warnings;
+    $("problems-count").hidden = !n;
+    $("problems-count").textContent = String(n);
+  }
+  $("sb-problems").addEventListener("click", () => showBottom("problems"));
+  $("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 = {};
+      problemCounts = { errors: 0, warnings: 0 };
+      for (const p of r.problems) {
+        (byFile[p.file] = byFile[p.file] || []).push(p);
+        problemCounts[p.severity === "error" ? "errors" : "warnings"]++;
+        list.append(el("li", { title: p.message, onclick: () => openFile(p.file, p.line) }, icon(p.severity === "error" ? "error" : "warning"), el("span", { class: "name", text: p.message }), el("span", { class: "muted small", text: `${p.file}:${p.line} · ${p.source}` })));
+      }
+      renderProblemCounts();
+      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+(.+)$/,
+  ];
+  const outlineLists = () => [$("outline"), $("outline-view")];
+  function renderOutline() {
+    const want = layoutState.panes.outline || layoutState.sideView === "outline";
+    for (const list of outlineLists()) clear(list);
+    if (!want || !active || !active.model) return;
+    const lines = active.model.getValue().split("\n");
+    if (lines.length > 20000) return;
+    const items = [];
+    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) items.push([i + 1, name]);
+        break;
+      }
+    });
+    for (const list of outlineLists()) for (const [line, name] of items) list.append(el("li", { "data-line": line, onclick: () => openFile(active.path, line) }, el("span", { class: "name", text: name }), el("span", { class: "muted small", text: String(line) })));
+    markOutline();
+  }
+  function markOutline() {
+    const ed = focused || editor;
+    if (!ed || !ed.getPosition()) return;
+    const line = ed.getPosition().lineNumber;
+    for (const list of outlineLists()) {
+      let best = null;
+      for (const li of list.children) if (Number(li.dataset.line) <= line) best = li;
+      for (const li of list.children) li.classList.toggle("on", li === best);
+    }
+  }
+  async function renderHistory() {
+    const lists = [$("history"), $("history-view")];
+    for (const l of lists) clear(l);
+    if (!(layoutState.panes.history || layoutState.sideView === "history")) return;
+    if (!active) { for (const l of lists) l.append(el("li", { class: "muted", text: t("ide.history.none") })); return; }
+    try {
+      const r = await api("/api/ws/history", { folder, path: active.path });
+      for (const l of lists) {
+        if (!r.versions.length) l.append(el("li", { class: "muted", text: t("ide.history.none") }));
+        for (const v of r.versions) l.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) { for (const l of lists) l.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)); }
+  }
+  async function openPreview() {
+    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)); }
+  }
+
+  // ---- settings, folder ---------------------------------------------------------------------------------
+  $("settings-btn").addEventListener("click", (e) => menu(e.currentTarget, [
+    { label: t("ide.palette"), keys: `${MOD}⇧P`, run: palette },
+    { label: t("pj.limits"), run: () => editLimits() },
+    { label: t("ide.preview"), run: openPreview },
+    { label: t("ide.terminal.settings"), run: terminalSettings },
+    { sep: true },
+    { label: t("ide.panel.position"), sub: ["bottom", "top", "left", "right"].map((p) => ({ label: t(`ide.panel.pos.${p}`), check: layoutState.panelPos === p, run: () => { layoutState.panelPos = p; layout(); } })) },
+    { label: t("ide.layout.reset"), run: () => { Object.assign(layoutState, { side: 260, agent: 380, panel: 240, panelWide: 420, sideOpen: true, agentOpen: true, panelOpen: true, panelPos: "bottom", panelAlign: "center", panelMax: false }); layout(); } },
+  ]));
+  async function terminalSettings() {
+    const box = el("div");
+    try { const mod = await import(`${BASE}terminal.js`); mod.mountTerminalSetting(box, { token, t }); } catch { box.append(el("p", { class: "muted", text: t("ide.terminal.missing") })); }
+    await modal(t("ide.terminal.settings"), box, [{ label: t("ide.ok"), value: null }]);
+  }
+  const folderLabel = (f) => f.split(/[\\/]/).filter(Boolean).pop() || f;
+  $("folder-btn").addEventListener("click", (e) => {
+    const sel = $("folder");
+    menu(e.currentTarget, [
+      ...[...sel.options].filter((o) => o.value).map((o) => ({ label: folderLabel(o.value), keys: o.value.length > 40 ? `…${o.value.slice(-38)}` : o.value, check: o.value === folder, run: () => { sel.value = o.value; setFolder(o.value); } })),
+      { sep: true },
+      { label: t("pj.folder.add"), run: addFolder },
+    ]);
+  });
+  async function addFolder() {
+    const path = await askText(t("pj.folder.add"), t("pj.folder.confirm"), "");
+    if (!path) return;
+    try { await api("/api/folders", { path }); await loadFolders(); const last = (await api("/api/projects")).folders.slice(-1)[0]; $("folder").value = last; setFolder(last); } 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 === false, text: m.available === false ? `${m.label} · ${t("ide.model.unavailable")}` : m.label }));
+      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 !== false && m.key === keep) || models.find((m) => m.available !== false && m.own) || models.find((m) => m.available !== false);
+    if (first) sel.value = first.key;
+    renderStatusModel();
+  }
+  const chosenModel = () => models.find((m) => m.key === $("model").value && m.available !== false) || null;
+  function renderStatusModel() { const m = chosenModel(); $("sb-model").textContent = m ? m.label : t("ide.model.none"); }
+  $("model").addEventListener("change", () => { store.set("model", $("model").value); renderStatusModel(); });
+  $("sb-model").addEventListener("click", () => { layoutState.agentOpen = true; layout(); $("model").focus(); });
+  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);
+    $("folder-name").textContent = f ? folderLabel(f) : t("ide.folder.none");
+    $("tree-title").textContent = f ? folderLabel(f) : "";
+    $("palette-label").textContent = f ? `${folderLabel(f)} — ${t("ide.palette.hint", { keys: `${MOD}⇧P` })}` : t("ide.palette");
+    session = null;
+    cursor = 0;
+    clear($("agent-log"));
+    opened.clear();
+    opened.add(".");
+    treeCache.clear();
+    await refreshGit();
+    refreshTree();
+    if (terminal && terminal.folderChanged) terminal.folderChanged(f);
+    await refreshAgents();
+  }
+  $("folder").addEventListener("change", () => setFolder($("folder").value));
+  const MODES = ["ask", "edits", "auto"];
+  function renderModeHint() {
+    const mode = $("mode").value;
+    $("mode-hint").textContent = mode === "auto" ? t("ide.mode.auto.on", { keys: "⇧Tab" }) : t(`pj.mode.${mode}.hint`);
+    $("mode-hint").classList.toggle("auto", mode === "auto");
+    $("sb-mode").textContent = t(`pj.mode.${mode}`);
+    $("sb-mode").classList.toggle("auto", mode === "auto");
+  }
+  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)); }
+  }
+  const cycleMode = () => setMode(MODES[(MODES.indexOf($("mode").value) + 1) % MODES.length]);
+  $("mode").addEventListener("change", () => setMode($("mode").value));
+  $("sb-mode").addEventListener("click", cycleMode);
+  /** 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)); }
+  }
+  $("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") : "";
+  }
+  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" : "", title: a.title || "", onclick: () => selectAgent(a.id) },
+        el("span", { class: "name grow", text: a.title || t("ide.agent.untitled") }), el("span", { class: "muted small", text: t(`pj.status.${a.status}`).replace(/[.…]$/, "") })));
+    }
+  }
+  $("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);
+    drawAgents();
+  }
+  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();
+      layoutState.agentOpen = true;
+      layout();
+      $("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); setTimeout(refreshPorts, 2500); }
+      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: "sub-head", text: t("pj.tab.changes") }));
+      for (const c of v.changes) ch.append(el("div", { class: "row" }, fileIcon(c.path.split("/").pop(), false), 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" }, icon(e.action === "run" ? "terminal" : e.action === "search" ? "search" : "files"), el("span", { 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", { class: "primary", "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" : "", onmousedown: (e) => { e.preventDefault(); insertMention(p); } }, fileIcon(p.split("/").pop(), false), el("span", { class: "name", text: 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);
+  setInterval(() => { if (!document.hidden && folder) refreshGit(); }, 15000);
+
+  /** Rewrites the selected text with the agent's model, shown as a change to accept. */
+  async function inlineEdit() {
+    if (!active) return;
+    const ed = focused || editor;
+    const sel = ed.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.palette"], ["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 table = clear($("keys"));
+    const keys = (s) => el("td", {}, ...s.split(/(?=⇧)|(?<=⇧)/).map((k) => el("kbd", { text: k })));
+    for (const [k, label] of KEYS) table.append(el("tr", {}, el("td", { text: t(label) }), keys(`${MOD}${k}`)));
+    table.append(el("tr", {}, el("td", { text: t("ide.key.mode") }), keys("⇧Tab")));
+  }
+  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(); cycleMode(); return; }
+    if (e.ctrlKey && e.key === "`") { e.preventDefault(); showTerminal(); return; }
+    if (!mod) return;
+    const k = e.key.toLowerCase();
+    if (k === "p" && e.shiftKey) { e.preventDefault(); palette(); }
+    else if (k === "p") { e.preventDefault(); quickOpen(); }
+    else if (k === "f" && e.shiftKey) { e.preventDefault(); showSide("search"); }
+    else if (k === "e" && e.shiftKey) { e.preventDefault(); showSide("files"); }
+    else if (k === "b" && e.altKey) { e.preventDefault(); toggle("agentOpen"); }
+    else if (k === "b" && !e.shiftKey) { e.preventDefault(); toggle("sideOpen"); }
+    else if (k === "j") { e.preventDefault(); if (layoutState.panelOpen && currentBottom() === "terminal") { layoutState.panelOpen = false; layout(); if (terminal) terminal.close(); } else showTerminal(); }
+    else if (k === "l") { e.preventDefault(); newAgent(); }
+    else if (k === "s" && !inEditor) { e.preventDefault(); saveActive(); }
+    else if (k === "\\") { e.preventDefault(); if (active) toggleSplit(); }
+  }, true);
+  addEventListener("beforeunload", (e) => { if (tabs.some(isDirty)) { e.preventDefault(); e.returnValue = ""; } });
+
+  // ---- start ------------------------------------------------------------------------------------------
+  (async () => {
+    drawIcons(document);
+    await loadWords();
+    $("ide").hidden = false;
+    $("back").addEventListener("click", () => { location.href = `/#token=${encodeURIComponent(token)}&lang=${encodeURIComponent(lang)}`; });
+    for (const b of document.querySelectorAll("#activity button[data-side]")) b.classList.toggle("on", b.dataset.side === layoutState.sideView && layoutState.sideOpen);
+    for (const p of document.querySelectorAll("#side > section")) p.hidden = p.dataset.panel !== layoutState.sideView;
+    layout();
+    drawKeys();
+    renderModeHint();
+    renderProblemCounts();
+    showBottom(store.get("bottom", "problems") === "terminal" ? "problems" : store.get("bottom", "problems"));
+    // Folders and models while the editor loads: the tree shows before Monaco is ready.
+    const lists = Promise.all([loadModels().catch((err) => output(explain(err))), loadFolders().catch((err) => output(explain(err)))]).then(() => ($("folder").value ? setFolder($("folder").value) : null));
+    try { monaco = await loadMonaco(); setupEditor(); } catch (err) { output(t("ide.err.editor_missing")); }
+    editorLoaded();
+    renderTabs();
+    await lists;
+    for (const b of document.querySelectorAll("[data-bottom]")) b.addEventListener("click", () => store.set("bottom", b.dataset.bottom));
+  })();
+})();