@oharness/server 0.8.0 → 0.9.1

package/dist/page/client/files.js

@@ -0,0 +1,412 @@
+/**
+ * The files pane — a project's tree beside the file picked from it — and the
+ * terminal that opens in the same folder.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const FILES = String.raw `
+// --- files pane --------------------------------------------------------------
+// Opened from a project's menu in the sidebar or from a session's tab, and
+// always about one folder: the tree is fetched a directory at a time as it is
+// unfolded, so a repository with a node_modules costs nothing until somebody
+// actually walks into it.
+
+const explorer = document.getElementById("explorer");
+const explorerTitle = document.getElementById("explorer-title");
+const explorerTree = document.getElementById("explorer-tree");
+const explorerView = document.getElementById("explorer-view");
+
+/** The project folder on show, absolute; null while the pane has never opened. */
+let explorerCwd = null;
+/** Each listed folder's children, keyed by path relative to the project. */
+let explorerChildren = new Map();
+/** Unfolded folders, remembered per project so a return finds them as left. */
+const explorerOpenDirs = new Map();
+/** The file on the right, relative to the project. */
+let explorerSelected = null;
+/** Markdown shows rendered unless somebody asked for the source. */
+let explorerSource = false;
+
+/** Past this a file is shown as plain text: the highlighter is one regex pass. */
+const EXPLORER_HIGHLIGHT_MAX = 200 * 1024;
+const EXPLORER_MARKDOWN = /\.(md|markdown|mdx)$/i;
+
+function explorerIsOpen() {
+  return explorer.classList.contains("open");
+}
+
+function explorerDirs() {
+  let dirs = explorerOpenDirs.get(explorerCwd);
+  if (!dirs) explorerOpenDirs.set(explorerCwd, (dirs = new Set()));
+  return dirs;
+}
+
+/**
+ * Show one project's files.
+ *
+ * The same project asked for twice is a toggle, which is what the tab's button
+ * wants; the project menu passes force so that choosing "Files" never closes
+ * the thing it just asked to see.
+ */
+async function openExplorer(cwd, force) {
+  if (!cwd) return;
+  if (explorerIsOpen() && explorerCwd === cwd && !force) return closeExplorer();
+  track("panel_opened", { panel: "files" });
+
+  // One column beside the transcript at a time: the review pane, the artifact
+  // drawer and the browser are all the same shape, and two of them open at
+  // once leaves the conversation a strip down the middle.
+  review.classList.remove("open");
+  shelf.classList.remove("open");
+  if (browserPane.classList.contains("open")) browserOpen(false);
+
+  if (explorerCwd !== cwd) {
+    explorerCwd = cwd;
+    explorerChildren = new Map();
+    explorerSelected = null;
+    explorerSource = false;
+  }
+  explorerTitle.textContent = projectName(cwd);
+  explorerTitle.title = cwd;
+  explorer.classList.add("open");
+  paintTabs();
+  await explorerLoad();
+}
+
+function closeExplorer() {
+  explorer.classList.remove("open");
+  paintTabs();
+}
+
+/** Keep the pane on the project of whichever tab is in front. */
+function explorerFollow(cwd) {
+  if (explorerIsOpen() && cwd && cwd !== explorerCwd) void openExplorer(cwd, true);
+}
+
+/** Every folder on screen, fetched again: what the refresh button does. */
+async function explorerLoad() {
+  const cwd = explorerCwd;
+  const dirs = ["", ...explorerDirs()];
+  const bodies = await Promise.all(dirs.map((dir) => explorerFetch(dir)));
+  if (cwd !== explorerCwd) return;
+  explorerChildren = new Map();
+  dirs.forEach((dir, index) => {
+    const body = bodies[index];
+    if (body.error) explorerDirs().delete(dir);
+    else explorerChildren.set(dir, body.entries || []);
+  });
+  paintExplorerTree();
+  if (explorerSelected) await explorerShow(explorerSelected);
+  else explorerView.replaceChildren(el("p", "muted explorer-hint", t("files.pick")));
+}
+
+function explorerFetch(dir) {
+  return getJson("/files/tree?cwd=" + encodeURIComponent(explorerCwd) + "&dir=" + encodeURIComponent(dir));
+}
+
+async function explorerToggleDir(dir) {
+  const dirs = explorerDirs();
+  if (dirs.has(dir)) {
+    dirs.delete(dir);
+    return paintExplorerTree();
+  }
+  dirs.add(dir);
+  if (!explorerChildren.has(dir)) {
+    const cwd = explorerCwd;
+    const body = await explorerFetch(dir);
+    if (cwd !== explorerCwd) return;
+    if (body.error) {
+      dirs.delete(dir);
+      return void addNotice(body.error, "err");
+    }
+    explorerChildren.set(dir, body.entries || []);
+  }
+  paintExplorerTree();
+}
+
+function paintExplorerTree() {
+  const scroll = explorerTree.scrollTop;
+  explorerTree.replaceChildren();
+  const root = explorerChildren.get("") || [];
+  if (!root.length) explorerTree.appendChild(el("p", "muted explorer-hint", t("files.empty")));
+  const dirs = explorerDirs();
+
+  const walk = (entries, depth) => {
+    for (const entry of entries) {
+      const row = el("button", "explorer-row" + (entry.path === explorerSelected ? " on" : ""));
+      row.type = "button";
+      row.setAttribute("role", "treeitem");
+      row.style.paddingLeft = 8 + depth * 14 + "px";
+      row.title = entry.path;
+      const open = entry.dir && dirs.has(entry.path);
+      if (entry.dir) row.setAttribute("aria-expanded", String(open));
+      const caret = el("span", "explorer-caret");
+      if (entry.dir) caret.appendChild(svgIcon(open ? "caret" : "chevronRight"));
+      row.appendChild(caret);
+      row.appendChild(svgIcon(entry.dir ? (open ? "folderOpen" : "folder") : "file"));
+      row.appendChild(el("span", "explorer-name", entry.name));
+      row.addEventListener("click", () => {
+        if (entry.dir) void explorerToggleDir(entry.path);
+        else void explorerShow(entry.path);
+      });
+      explorerTree.appendChild(row);
+      if (open) walk(explorerChildren.get(entry.path) || [], depth + 1);
+    }
+  };
+  walk(root, 0);
+  explorerTree.scrollTop = scroll;
+}
+
+function explorerSize(bytes) {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / 1024 / 1024).toFixed(1) + " MB";
+}
+
+async function explorerShow(file) {
+  const cwd = explorerCwd;
+  if (explorerSelected !== file) explorerSource = false;
+  explorerSelected = file;
+  for (const row of explorerTree.children) row.classList.toggle("on", row.title === file);
+
+  const body = await getJson("/files/read?cwd=" + encodeURIComponent(cwd) + "&path=" + encodeURIComponent(file));
+  if (cwd !== explorerCwd || file !== explorerSelected) return;
+  explorerView.replaceChildren();
+  if (body.error) return void explorerView.appendChild(el("p", "muted explorer-hint", body.error));
+
+  const bar = el("div", "explorer-bar");
+  bar.appendChild(el("span", "explorer-path mono", body.path));
+  bar.appendChild(el("span", "explorer-size", explorerSize(body.size)));
+
+  const markdown = body.kind === "text" && EXPLORER_MARKDOWN.test(body.path);
+  if (markdown) {
+    const flip = el("button", "explorer-btn", t(explorerSource ? "files.rendered" : "files.source"));
+    flip.type = "button";
+    flip.addEventListener("click", () => {
+      explorerSource = !explorerSource;
+      void explorerShow(file);
+    });
+    bar.appendChild(flip);
+  }
+  // A reference is a path relative to the session's own tree, so it is only
+  // offered when the tree on show is that one.
+  const active = activeId && panes.get(activeId);
+  if (active && active.cwd === cwd) {
+    const mention = el("button", "explorer-btn", t("files.mention"));
+    mention.type = "button";
+    mention.addEventListener("click", () => {
+      addRef("file", body.path);
+      input.focus();
+    });
+    bar.appendChild(mention);
+  }
+  explorerView.appendChild(bar);
+
+  const content = el("div", "explorer-content");
+  const raw = q("/files/raw?cwd=" + encodeURIComponent(cwd) + "&path=" + encodeURIComponent(body.path));
+  if (body.kind === "image") {
+    const img = el("img", "explorer-img");
+    img.alt = body.path;
+    img.src = raw;
+    content.appendChild(img);
+  } else if (body.kind === "video" || body.kind === "audio") {
+    const media = el(body.kind, "explorer-" + body.kind);
+    media.controls = true;
+    media.preload = "metadata";
+    media.src = raw;
+    content.appendChild(media);
+  } else if (body.kind === "pdf") {
+    content.classList.add("explorer-fill");
+    const frame = el("iframe", "explorer-pdf");
+    frame.title = body.path;
+    frame.src = raw;
+    content.appendChild(frame);
+  } else if (body.kind === "text" && markdown && !explorerSource) {
+    const md = renderMarkdown(body.content);
+    md.classList.add("explorer-md");
+    content.appendChild(md);
+  } else if (body.kind === "text") {
+    content.appendChild(explorerCode(body.content, body.path));
+  } else {
+    content.appendChild(el("p", "muted explorer-hint",
+      body.kind === "large" ? t("files.large", { size: explorerSize(body.size) }) : t("files.binary")));
+  }
+  explorerView.appendChild(content);
+}
+
+/** Source with a line-number gutter; the numbers are not part of a selection. */
+function explorerCode(source, file) {
+  const text = source.replace(/\r\n?/g, "\n");
+  const lines = text.endsWith("\n") ? text.slice(0, -1).split("\n") : text.split("\n");
+  const wrap = el("div", "explorer-code");
+  const gutter = el("pre", "explorer-gutter");
+  gutter.setAttribute("aria-hidden", "true");
+  gutter.textContent = lines.map((_, index) => index + 1).join("\n");
+  const pre = el("pre", "code explorer-src");
+  const ext = (file.match(/\.([^./]+)$/) || [])[1] || "";
+  if (text.length > EXPLORER_HIGHLIGHT_MAX) pre.textContent = text;
+  else pre.appendChild(highlight(text, ext));
+  wrap.appendChild(gutter);
+  wrap.appendChild(pre);
+  return wrap;
+}
+
+/** The tab's two ways into its tree: the files pane and a terminal. */
+function tabProjectButtons(id, cwd) {
+  const files = el("button", "tab-tool");
+  files.type = "button";
+  files.title = t("files.open");
+  files.setAttribute("aria-label", t("files.open"));
+  files.classList.toggle("on", id === activeId && explorerIsOpen() && explorerCwd === cwd);
+  files.appendChild(svgIcon("folder"));
+  files.addEventListener("click", async (event) => {
+    event.stopPropagation();
+    if (id !== activeId) {
+      await focusTab(id);
+      return void openExplorer(cwd, true);
+    }
+    void openExplorer(cwd);
+  });
+
+  const term = el("button", "tab-tool");
+  term.type = "button";
+  term.title = t("files.terminalTab");
+  term.setAttribute("aria-label", t("files.terminalTab"));
+  term.appendChild(svgIcon("command"));
+  term.classList.toggle("on", id === activeId && terminalShownFor(cwd));
+  term.addEventListener("click", async (event) => {
+    event.stopPropagation();
+    if (id !== activeId) {
+      await focusTab(id);
+      return void openTerminalIn(cwd, true);
+    }
+    void openTerminalIn(cwd);
+  });
+  return [files, term];
+}
+
+document.getElementById("explorer-close").addEventListener("click", closeExplorer);
+document.getElementById("explorer-refresh").addEventListener("click", () => void explorerLoad());
+document.getElementById("explorer-terminal").addEventListener("click", () => void openTerminalIn(explorerCwd, true));
+
+// --- dragging a size -----------------------------------------------------------
+
+/**
+ * A handle that resizes something while it is dragged.
+ *
+ * Pointer events, so a finger drags it as well as a mouse; the move handler is
+ * given the distance from where the drag started and does its own clamping.
+ * Arrow keys nudge it for anyone not using a pointer at all.
+ */
+function dragHandle(handle, opts) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || (opts.enabled && !opts.enabled())) return;
+    event.preventDefault();
+    const x0 = event.clientX;
+    const y0 = event.clientY;
+    const state = opts.start();
+    try { handle.setPointerCapture(event.pointerId); } catch { /* the window listeners keep it going */ }
+    document.body.classList.add("dragging", opts.axis === "x" ? "dragging-x" : "dragging-y");
+    const move = (next) => opts.move(next.clientX - x0, next.clientY - y0, state);
+    const done = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", done);
+      window.removeEventListener("pointercancel", done);
+      document.body.classList.remove("dragging", "dragging-x", "dragging-y");
+      if (opts.end) opts.end();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", done);
+    window.addEventListener("pointercancel", done);
+  });
+  handle.addEventListener("keydown", (event) => {
+    const keys = opts.axis === "x" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+    if (!keys.includes(event.key) || (opts.enabled && !opts.enabled())) return;
+    event.preventDefault();
+    const state = opts.start();
+    const step = event.key === keys[0] ? -16 : 16;
+    opts.move(opts.axis === "x" ? step : 0, opts.axis === "x" ? 0 : step, state);
+    if (opts.end) opts.end();
+  });
+  if (opts.reset) handle.addEventListener("dblclick", opts.reset);
+}
+
+/** A remembered number, or undefined; storage can be missing or refuse. */
+function storedSize(key) {
+  try {
+    const n = Number(localStorage.getItem(key));
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+  } catch {
+    return undefined;
+  }
+}
+function storeSize(key, value) {
+  try {
+    if (value === undefined) localStorage.removeItem(key);
+    else localStorage.setItem(key, String(Math.round(value)));
+  } catch { /* the size still holds for this page */ }
+}
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+
+// The pane's width, from its left edge. Desktop only: on a phone it is the
+// whole screen.
+const EXPLORER_WIDTH_KEY = "oharness.explorerWidth";
+const EXPLORER_TREE_KEY = "oharness.explorerTreeWidth";
+const EXPLORER_TREE_H_KEY = "oharness.explorerTreeHeight";
+
+function explorerSetWidth(px) {
+  const split = document.getElementById("split").getBoundingClientRect().width;
+  const width = clamp(px, 360, split - 360);
+  explorer.style.setProperty("--explorer-width", width + "px");
+  return width;
+}
+function explorerSetTree(px) {
+  const body = document.getElementById("explorer-body").getBoundingClientRect();
+  if (isPhone()) {
+    const height = clamp(px, 80, body.height - 120);
+    explorer.style.setProperty("--explorer-tree-height", height + "px");
+    return height;
+  }
+  const width = clamp(px, 140, body.width - 200);
+  explorer.style.setProperty("--explorer-tree-width", width + "px");
+  return width;
+}
+{
+  const width = storedSize(EXPLORER_WIDTH_KEY);
+  if (width) explorer.style.setProperty("--explorer-width", width + "px");
+  const tree = storedSize(EXPLORER_TREE_KEY);
+  if (tree) explorer.style.setProperty("--explorer-tree-width", tree + "px");
+  const treeH = storedSize(EXPLORER_TREE_H_KEY);
+  if (treeH) explorer.style.setProperty("--explorer-tree-height", treeH + "px");
+}
+
+let explorerDragged;
+dragHandle(document.getElementById("explorer-resizer"), {
+  axis: "x",
+  enabled: () => !isPhone(),
+  start: () => explorer.getBoundingClientRect().width,
+  move: (dx, dy, start) => { explorerDragged = explorerSetWidth(start - dx); },
+  end: () => storeSize(EXPLORER_WIDTH_KEY, explorerDragged),
+  reset: () => { explorer.style.removeProperty("--explorer-width"); storeSize(EXPLORER_WIDTH_KEY); },
+});
+
+const explorerSplit = document.getElementById("explorer-split");
+let explorerTreeDragged;
+// Beside the file on a desktop, above it on a phone: the same handle drags
+// whichever way the two are stacked.
+dragHandle(explorerSplit, {
+  get axis() { return isPhone() ? "y" : "x"; },
+  start: () => {
+    const rect = explorerTree.getBoundingClientRect();
+    return isPhone() ? rect.height : rect.width;
+  },
+  move: (dx, dy, start) => { explorerTreeDragged = explorerSetTree(start + (isPhone() ? dy : dx)); },
+  end: () => storeSize(isPhone() ? EXPLORER_TREE_H_KEY : EXPLORER_TREE_KEY, explorerTreeDragged),
+  reset: () => {
+    explorer.style.removeProperty(isPhone() ? "--explorer-tree-height" : "--explorer-tree-width");
+    storeSize(isPhone() ? EXPLORER_TREE_H_KEY : EXPLORER_TREE_KEY);
+  },
+});
+`;
+//# sourceMappingURL=files.js.map

package/dist/page/client/files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.js","sourceRoot":"","sources":["../../../src/page/client/files.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoZ9B,CAAC"}

package/dist/page/client/index.js

@@ -11,6 +11,8 @@ import { ROUTINES } from "./routines.js";
 import { USAGE } from "./usage.js";
 import { PANELS } from "./panels.js";
 import { BROWSER } from "./browser.js";
+import { FILES } from "./files.js";
+import { TERMINAL } from "./terminal.js";
 import { SHELL } from "./shell.js";
 /**
  * The client script, assembled.
@@ -40,6 +42,8 @@ export const APP_SCRIPT = [
     ROUTINES,
     USAGE,
     PANELS,
+    FILES,
+    TERMINAL,
     BROWSER,
     SHELL,
 ].join("") + "\n";

package/dist/page/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/page/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,UAAU,GACrB;IACA,IAAI;IACJ,OAAO;IACP,UAAU;IACV,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,SAAS;IACT,OAAO;IACP,QAAQ;IACR,KAAK;IACL,MAAM;IACN,OAAO;IACP,KAAK;CACJ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/page/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,UAAU,GACrB;IACA,IAAI;IACJ,OAAO;IACP,UAAU;IACV,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,SAAS;IACT,OAAO;IACP,QAAQ;IACR,KAAK;IACL,MAAM;IACN,KAAK;IACL,QAAQ;IACR,OAAO;IACP,KAAK;CACJ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC"}

package/dist/page/client/panels.js

@@ -604,7 +604,7 @@ async function showMemoryPage(id) {
  * sessions have no reason to open. It keeps the row it came from lit, so the
  * sidebar still says where in the app this is.
  */
-const SUB_PANELS = { usage: "nav-settings", audit: "nav-settings", permissions: "nav-settings" };
+const SUB_PANELS = { usage: "nav-settings", "usage-sessions": "nav-settings", audit: "nav-settings", permissions: "nav-settings" };
 
 /** Which panel the panel view is currently showing, sub-panels included. */
 let shownPanel = null;

package/dist/page/client/routines.js

@@ -197,7 +197,7 @@ async function showSettings() {
 
   // Rows are grouped by what they are about. Each group is filled as the page
   // is built and drawn at the end under its heading, and only when it has rows.
-  const groups = { workspace: el("div"), sync: el("div"), memory: el("div"), activity: el("div"), advanced: el("div") };
+  const groups = { workspace: el("div"), sync: el("div"), memory: el("div"), activity: el("div"), advanced: el("div"), about: el("div") };
   let target = groups.workspace;
 
   // A click on a button inside a summary toggles the disclosure as well as
@@ -707,11 +707,29 @@ async function showSettings() {
     body.appendChild(status);
     body.appendChild(extensionHelp(ext));
   }
+  // The desktop app's version, with its release notes beside it. A row that
+  // is always there, because the menu bar is not where people look and the
+  // post-update hint is gone after one click.
+  const desktopApp = IS_DESKTOP && window.oharness.app;
+  if (desktopApp && desktopApp.version) {
+    target = groups.about;
+    const notes = el("button", "ghost", t("settings.releaseNotes"));
+    notes.type = "button";
+    notes.addEventListener("click", () => desktopApp.releaseNotes());
+    let check = null;
+    if (desktopApp.checkForUpdates) {
+      check = el("button", "ghost", t("settings.checkUpdates"));
+      check.type = "button";
+      check.addEventListener("click", () => desktopApp.checkForUpdates());
+    }
+    field(t("settings.version"), desktopApp.version, t("settings.releaseNotesHint"), check, notes);
+  }
   const sections = [
     ["settings.section.workspace", [groups.workspace]],
     ["settings.section.sync", [groups.sync, groups.memory]],
     ["settings.section.activity", [groups.activity]],
     ["settings.section.advanced", [groups.advanced]],
+    ["settings.section.about", [groups.about]],
   ];
   for (const [title, parts] of sections) {
     if (!parts.some((part) => part.childNodes.length)) continue;

package/dist/page/client/routines.js.map

@@ -1 +1 @@
-{"version":3,"file":"routines.js","sourceRoot":"","sources":["../../../src/page/client/routines.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAu4BgD,CAAC"}
+{"version":3,"file":"routines.js","sourceRoot":"","sources":["../../../src/page/client/routines.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAy5BgD,CAAC"}

package/dist/page/client/shell.js

@@ -41,6 +41,7 @@ function repaintPanel() {
   else if (shownPanel === "nav-routines") void showRoutines();
   else if (shownPanel === "nav-settings") void showSettings();
   else if (shownPanel === "usage") void showUsage();
+  else if (shownPanel === "usage-sessions") void showUsageSessions();
   else if (shownPanel === "audit") void showAudit();
   else if (shownPanel === "permissions") void showPermissions();
   else if (shownPanel?.startsWith("nav-plugin-")) void showMemoryPage(shownPanel.slice("nav-plugin-".length));
@@ -648,7 +649,13 @@ void (async () => {
   // Reopen whatever the server still has running, so a reload does not silently
   // abandon turns that are still streaming in other tabs.
   const opened = await getJson("/open");
-  const list = (opened.open || []).length ? opened.open : [{ id: state.sessionId, current: true }];
+  // With nothing open yet — a server just started — the one tab is the
+  // current session, and it needs its tree like any other: without it the tab
+  // lost its project name, its files and terminal buttons, and anything that
+  // reads a file from the project.
+  const list = (opened.open || []).length
+    ? opened.open
+    : [{ id: state.sessionId, title: state.title, cwd: state.cwd, current: true }];
   for (const entry of list) {
     const record = pane(entry.id);
     record.title = entry.title || record.title;
@@ -662,6 +669,10 @@ void (async () => {
   P = pane(activeId);
   await loadModels();
   applyState(state);
+  if (!P.cwd && state.cwd && state.sessionId === activeId) {
+    P.cwd = state.cwd;
+    paintTabs();
+  }
   const cwdEl = document.getElementById("empty-cwd");
   if (cwdEl) cwdEl.textContent = projectName(state.cwd || "");
 

package/dist/page/client/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../src/page/client/shell.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2qBzB,CAAC"}
+{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../src/page/client/shell.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsrBzB,CAAC"}

package/dist/page/client/state.js

@@ -276,9 +276,17 @@ function projectHead(cwd, name, count, open) {
         closeRowMenu();
         void chooseProject(cwd);
       } }),
-      menuItem(t("projects.rename"), { key: "n", run: () => {
+      menuItem(t(pinned ? "projects.unpin" : "projects.pin"), { key: "p", run: () => {
         closeRowMenu();
-        void renameProjectUi(cwd, name);
+        void togglePin("project", cwd, !pinned);
+      } }),
+      menuItem(t("projects.files"), { key: "i", run: () => {
+        closeRowMenu();
+        void openExplorer(cwd, true);
+      } }),
+      menuItem(t("projects.terminal"), { key: "t", run: () => {
+        closeRowMenu();
+        void openTerminalIn(cwd, true);
       } }),
       menuItem(t(IS_MAC ? "projects.revealMac" : IS_WIN ? "projects.revealWin" : "projects.reveal"), { key: "f", run: () => {
         closeRowMenu();
@@ -290,9 +298,9 @@ function projectHead(cwd, name, count, open) {
         closeRowMenu();
         exportProjectUi(cwd);
       } }),
-      menuItem(t(pinned ? "projects.unpin" : "projects.pin"), { key: "p", run: () => {
+      menuItem(t("projects.rename"), { key: "n", run: () => {
         closeRowMenu();
-        void togglePin("project", cwd, !pinned);
+        void renameProjectUi(cwd, name);
       } }),
     ];
     // Forgetting a path is only offered where it can do something: this row

package/dist/page/client/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../src/page/client/state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmvC9B,CAAC"}
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../src/page/client/state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2vC9B,CAAC"}

package/dist/page/client/terminal.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The embedded terminal: a real shell per project, drawn by xterm.js in a
+ * panel under the conversation.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export declare const TERMINAL: string;