@oharness/server 0.7.1 → 0.9.0

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.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The client script, assembled.
+ *
+ * It was one template literal of eleven thousand lines, and it is split here
+ * along the section dividers it already carried. The parts are plain text and
+ * nothing interpolates into them, so the only thing that matters is that they
+ * join back exactly: each opens with the newline after its backtick and closes
+ * flush against its last line, which leaves one newline between neighbours and
+ * none doubled. The newline the closing delimiter used to contribute is added
+ * back at the end.
+ *
+ * Order is the whole contract. The script is one scope — a helper declared in
+ * an earlier part is what a later one calls — so this list is the file, and
+ * rearranging it rearranges the program.
+ */
+export declare const APP_SCRIPT: string;

package/dist/page/client/index.js

@@ -0,0 +1,50 @@
+import { BASE } from "./base.js";
+import { PICKERS } from "./pickers.js";
+import { TRANSCRIPT } from "./transcript.js";
+import { STATE } from "./state.js";
+import { EVENTS } from "./events.js";
+import { DIALOGS } from "./dialogs.js";
+import { COMPOSER } from "./composer.js";
+import { ARTIFACTS } from "./artifacts.js";
+import { ACCOUNT } from "./account.js";
+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.
+ *
+ * It was one template literal of eleven thousand lines, and it is split here
+ * along the section dividers it already carried. The parts are plain text and
+ * nothing interpolates into them, so the only thing that matters is that they
+ * join back exactly: each opens with the newline after its backtick and closes
+ * flush against its last line, which leaves one newline between neighbours and
+ * none doubled. The newline the closing delimiter used to contribute is added
+ * back at the end.
+ *
+ * Order is the whole contract. The script is one scope — a helper declared in
+ * an earlier part is what a later one calls — so this list is the file, and
+ * rearranging it rearranges the program.
+ */
+export const APP_SCRIPT = [
+    BASE,
+    PICKERS,
+    TRANSCRIPT,
+    STATE,
+    EVENTS,
+    DIALOGS,
+    COMPOSER,
+    ARTIFACTS,
+    ACCOUNT,
+    ROUTINES,
+    USAGE,
+    PANELS,
+    FILES,
+    TERMINAL,
+    BROWSER,
+    SHELL,
+].join("") + "\n";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;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.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The remaining side panels — every artifact, the counts in the sidebar,
+ * plugin pages and the memory page — and the navigation between them.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export declare const PANELS: string;