bitpull 0.1.24 → 0.1.26

package/ui/ide.js

@@ -1,12 +1,15 @@
-// BitPull projects: an editor and an AI agent on a folder of this computer.
+// 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; there is no innerHTML here (a test checks it).
+// 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 */ } },
@@ -27,6 +30,66 @@
   }
   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}}`));
@@ -76,6 +139,30 @@
   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) => {
@@ -85,7 +172,7 @@
       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) }));
+      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();
@@ -99,24 +186,27 @@
   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 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, binary, secret }
+  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; // { kind, path, onAccept, onReject }
+  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 bottom panel, once;
+   *   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)  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.
+   *   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: {
@@ -124,8 +214,20 @@
         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();
+        // 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; },
@@ -133,72 +235,195 @@
   function showTerminal() {
     showBottom("terminal");
     if (terminal) terminal.open();
-    else clear($("terminal-host")).append(el("p", { class: "muted", text: t("ide.terminal.missing") }));
+    else clear($("terminal-host")).append(el("p", { class: "muted pad", 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")) {
+  // ---- 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 start = { x: e.clientX, y: e.clientY, v: sizes[which] };
+      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);
-        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 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 = () => { removeEventListener("mousemove", move); removeEventListener("mouseup", up); };
+      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) {
-    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();
+    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") renderOutline();
-    if (name === "history") renderHistory();
+    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")) b.addEventListener("click", () => {
-    if (b.classList.contains("on") && sizes.sideOpen) { sizes.sideOpen = false; applySizes(); } else showSide(b.dataset.side);
+  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) {
-    sizes.bottomOpen = true;
+    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;
-    applySizes();
+    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", () => { sizes.bottomOpen = false; applySizes(); if (terminal) terminal.close(); });
+  $("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 = "/ui/monaco/vs/loader.js";
+      s.src = `${BASE}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" } } });
+        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.
@@ -211,54 +436,81 @@
           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); }
+          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")); }
-        }, 50);
+        }, 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() {
-    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());
+    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(["."]);
-  async function loadTree(path, into) {
-    const r = await api("/api/ws/tree", { folder, path });
+  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 r.entries) {
+    for (const e of 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" }),
+      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: "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");
+          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 (opened.has(e.path)) loadTree(e.path, sub).catch(() => {});
+        if (open) loadTree(e.path, sub, depth + 1).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) ? "▾" : "▸";
+          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 = () => folder && loadTree(".", $("tree")).catch((err) => output(explain(err)));
+  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;
@@ -280,27 +532,56 @@
   }
   $("new-file").addEventListener("click", () => newPath(false));
   $("new-dir").addEventListener("click", () => newPath(true));
-  $("refresh").addEventListener("click", refreshTree);
+  $("refresh").addEventListener("click", () => { refreshTree(); refreshGit(); });
+  $("collapse-all").addEventListener("click", () => { opened.clear(); opened.add("."); refreshTree(); });
 
-  // ---- tabs and the editor --------------------------------------------------------------------------
+  // ---- 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" : ""}`, 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); } })));
+      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) {
-    if (!monaco) return;
     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) {
-      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);
@@ -309,26 +590,32 @@
       if (r.secret) output(t("ide.secret_open", { path }));
     }
     activate(tab);
-    if (line) { editor.revealLineInCenter(line); editor.setPosition({ lineNumber: line, column: 1 }); editor.focus(); }
+    const ed = focused || editor;
+    if (line) { ed.revealLineInCenter(line); ed.setPosition({ lineNumber: line, column: 1 }); ed.focus(); }
   }
   function activate(tab) {
-    if (active && active.model) active.view = editor.saveViewState();
+    const ed = focused || editor;
+    if (active && active.model && ed.getModel() === active.model) active.view = ed.saveViewState();
     active = tab;
-    closeReview();
-    editor.setModel(tab.model);
-    if (tab.view) editor.restoreViewState(tab.view);
+    if (review) closeReview();
+    if (ed.getModel() !== tab.model) ed.setModel(tab.model);
+    if (tab.view) ed.restoreViewState(tab.view);
     renderTabs();
-    renderOutline();
-    if (!$("side").hidden && !document.querySelector('#side section[data-panel="history"]').hidden) renderHistory();
+    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);
-    editor.focus();
+    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);
-    if (active === tab) { active = null; editor.setModel(null); if (tabs.length) activate(tabs[tabs.length - 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;
@@ -338,6 +625,7 @@
       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" }]);
@@ -353,6 +641,22 @@
     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() {
@@ -369,10 +673,10 @@
    * 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 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(lang) ? monaco.editor.getModel(lang).getLanguageId() : null;
+    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 });
@@ -380,7 +684,9 @@
     $("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");
@@ -391,10 +697,11 @@
       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) })));
+        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) {
@@ -435,24 +742,56 @@
     } 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") });
+  // ---- 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" : "", text: r.path, onclick: () => pick(r) }))); };
-    const pick = (r) => { $("modal").hidden = true; openFile(r.path); };
+    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;
-    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); });
+    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]);
     });
-    modal(t("ide.quick"), [input, list], [{ label: t("ide.close"), ghost: true, value: null }]);
+    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());
   }
-  $("quick-open").addEventListener("click", quickOpen);
+  $("palette-btn").addEventListener("click", palette);
   let searchTimer = null;
   async function runSearch() {
     const q = $("search-q").value.trim();
@@ -462,12 +801,25 @@
     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() })));
+      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"));
@@ -476,14 +828,16 @@
       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));
+        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 {
@@ -493,6 +847,7 @@
     } 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); }
   });
@@ -502,6 +857,14 @@
   });
 
   // ---- 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"));
@@ -513,10 +876,13 @@
       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);
-        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}` })));
+        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)] || [];
@@ -534,37 +900,48 @@
     /^\s*(?:public|private|protected|static|\s)+[\w<>[\],\s]+\s+(\w+)\s*\([^;]*$/,
     /^(#{1,6})\s+(.+)$/,
   ];
+  const outlineLists = () => [$("outline"), $("outline-view")];
   function renderOutline() {
-    const list = clear($("outline"));
-    if (!active || !active.model) return;
+    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) 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 })));
+        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() {
-    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);
+    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 list = clear($("history"));
-    if (!active) return list.append(el("li", { class: "muted", text: t("ide.history.none") }));
+    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 });
-      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) })); }
+      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 {
@@ -575,12 +952,42 @@
         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 () => {
+  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() {
@@ -595,16 +1002,19 @@
     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")}` }));
+      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 && m.key === keep) || models.find((m) => m.available && m.own) || models.find((m) => m.available);
+    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) || null;
-  $("model").addEventListener("change", () => store.set("model", $("model").value));
+  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"));
@@ -619,23 +1029,29 @@
     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));
-  $("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`); }
+  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;
@@ -644,7 +1060,9 @@
     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")));
@@ -661,10 +1079,7 @@
       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 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 });
@@ -672,7 +1087,6 @@
       renderAgent(session);
     } catch (err) { output(explain(err)); }
   }
-  $("limits-open").addEventListener("click", editLimits);
   $("limit-edit").addEventListener("click", editLimits);
 
   // ---- agents ---------------------------------------------------------------------------------------
@@ -682,18 +1096,16 @@
     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");
+    $("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" : "", 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") })));
+      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(/[.…]$/, "") })));
     }
-    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 });
@@ -702,6 +1114,7 @@
     $("mode").value = session.mode;
     renderModeHint();
     renderAgent(session);
+    drawAgents();
   }
   async function newAgent() {
     const m = chosenModel();
@@ -716,6 +1129,8 @@
       clear($("agent-log"));
       renderAgent(session);
       await refreshAgents();
+      layoutState.agentOpen = true;
+      layout();
       $("prompt").focus();
       return session;
     } catch (err) { output(explain(err)); return null; }
@@ -730,9 +1145,12 @@
     for (const e of v.events || []) {
       if (e.n < cursor) continue;
       cursor = e.n + 1;
-      log.append(eventNode(e));
+      // Pieces of output of the same command go into one block: thousands of small blocks slow the page.
+      const last = log.lastElementChild;
+      if (e.kind === "output" && last && last.classList.contains("output") && last.textContent.length < 200000) last.textContent += e.text;
+      else 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 === "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;
@@ -745,8 +1163,8 @@
     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); } })));
+      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(() => {});
@@ -755,7 +1173,7 @@
     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 === "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 }) });
@@ -777,7 +1195,7 @@
       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) })));
+    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. */
@@ -791,7 +1209,7 @@
   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); } })));
+    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");
@@ -839,15 +1257,28 @@
     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);
+  // Each request waits on the app until something happens, so a command's output shows while it is written.
+  (async function follow() {
+    for (;;) {
+      if (!session || document.hidden) { await new Promise((r) => setTimeout(r, 400)); continue; }
+      const id = session.id;
+      try {
+        const v = await api("/api/projects/state", { id, after: cursor, wait: 15000 });
+        // The person may have switched agent meanwhile: news of another one are not mixed in.
+        if (session && session.id === id && v.id === id) renderAgent(v);
+      } catch (err) {
+        if (/project_not_found/.test(err.message)) { if (session && session.id === id) { session = null; refreshAgents(); } }
+        else await new Promise((r) => setTimeout(r, 1000));
+      }
+    }
+  })();
+  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 sel = editor.getSelection();
+    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"), "");
@@ -868,43 +1299,52 @@
   }
 
   // ---- 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"]];
+  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 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")}` }));
+    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();
-      setMode(MODES[(MODES.indexOf($("mode").value) + 1) % MODES.length]);
-      return;
-    }
+    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(); quickOpen(); }
+    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 === "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 === "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").href = `/#token=${encodeURIComponent(token)}&lang=${encodeURIComponent(lang)}`;
-    applySizes();
+    $("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 Promise.all([loadModels().catch((err) => output(explain(err))), loadFolders().catch((err) => output(explain(err)))]);
-    if ($("folder").value) await setFolder($("folder").value);
+    await lists;
+    for (const b of document.querySelectorAll("[data-bottom]")) b.addEventListener("click", () => store.set("bottom", b.dataset.bottom));
   })();
 })();