@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/composer.js

@@ -0,0 +1,1694 @@
+/**
+ * The composer and everything reachable from it: staged attachments, the +
+ * menu, connectors and plugins, the caret mirror, slash commands and @
+ * mentions, and the field's own height.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const COMPOSER = String.raw `
+// --- attachments -----------------------------------------------------------
+// Files are staged on the server and referenced by id, so the prompt request
+// stays small and a half-finished upload cannot start a turn.
+
+const attachEl = document.getElementById("attachments");
+const queuedEl = document.getElementById("queued");
+const fileInput = document.getElementById("file");
+const composerBox = document.getElementById("composer-box");
+let staged = [];
+/**
+ * Previews of images this tab just sent, keyed by session.
+ *
+ * Held only until the prompt event for that turn comes back, which is the
+ * moment the bubble is drawn. The object URLs are the ones the chips used, so
+ * showing them costs no request and no second copy.
+ */
+const sentPreviews = new Map();
+/**
+ * What this message points at: files and folders in the project, MCP
+ * connectors, plugins. Nothing is copied — the chip carries the name, and the
+ * server turns the list into a short block above the prompt.
+ */
+let refs = [];
+const REF_ICON = { file: "file", folder: "folder", connector: "plug", plugin: "plugin", skill: "skill" };
+const refKey = (ref) => ref.kind + ":" + ref.value;
+
+/**
+ * The messages waiting behind the running turn.
+ *
+ * Drawn from the pane rather than from a local list: the queue lives on the
+ * server, so a reload and a second tab show the same thing, and an entry that
+ * has just been sent disappears because the server said so.
+ */
+function renderQueued() {
+  queuedEl.replaceChildren();
+  // The active pane, not the event-scoped P: this row sits in the composer,
+  // and the composer belongs to the tab on screen even while a background
+  // tab is the one streaming.
+  const here = panes.get(activeId);
+  const waiting = (here && here.queued) || [];
+  for (const entry of waiting) {
+    const row = el("div", "q" + (entry.soon ? " soon" : ""));
+    // Two different promises: one joins the turn that is running, the other
+    // waits for it to end. Saying "Queued" for both would misdescribe half.
+    row.appendChild(el("span", "tag", t(entry.soon ? "queue.soon" : "queue.mark")));
+    const names = (entry.attachments || []).join(", ");
+    row.appendChild(el("span", "n", entry.text || names || t("queue.attachmentsOnly")));
+    // Only on the ones that are waiting. A message already handed to the
+    // running turn is as immediate as it gets, and a second button promising
+    // to hurry it would be promising nothing.
+    if (!entry.soon) {
+      // Words, not an arrow. An arrow beside a × on a row that is already
+      // about sending reads as "next" or "move"; the one thing it has to say
+      // is that this message goes now.
+      const now = el("button", "go", t("queue.sendNow"));
+      now.type = "button";
+      now.addEventListener("click", () => void api("/sendnow", { session: activeId, id: entry.id }));
+      row.appendChild(now);
+    }
+    const drop = el("button", "x", "×");
+    drop.type = "button";
+    drop.title = t("queue.drop");
+    drop.addEventListener("click", () => void api("/unqueue", { session: activeId, id: entry.id }));
+    row.appendChild(drop);
+    queuedEl.appendChild(row);
+  }
+  // Idle with something still waiting means the turn was stopped or failed —
+  // the server will not restart a queue on its own after either. The send
+  // button becomes the way to let it go.
+  sendBtn.classList.toggle("has-queue", waiting.length > 0 && !(here && here.busy));
+}
+
+function renderAttachments() {
+  attachEl.replaceChildren();
+
+  // References first: they were picked deliberately from the menu, while an
+  // upload is often a screenshot that was pasted without being thought about.
+  for (const ref of refs) {
+    const chip = el("div", "att");
+    chip.appendChild(svgIcon(REF_ICON[ref.kind]));
+    chip.appendChild(el("span", "n", ref.label));
+    if (ref.sub) chip.appendChild(el("span", "where", ref.sub));
+    const drop = el("button", "x", "×");
+    drop.type = "button";
+    drop.title = t("add.remove");
+    drop.addEventListener("click", () => {
+      refs = refs.filter((entry) => refKey(entry) !== refKey(ref));
+      renderAttachments();
+    });
+    chip.appendChild(drop);
+    attachEl.appendChild(chip);
+  }
+
+  for (const file of staged) {
+    const chip = el("div", "att");
+    if (file.preview) {
+      const img = document.createElement("img");
+      img.src = file.preview;
+      img.alt = "";
+      chip.appendChild(img);
+    }
+    chip.appendChild(el("span", "n", file.name));
+    chip.appendChild(el("span", "sz", (file.bytes / 1024).toFixed(0) + "KB"));
+    const remove = el("button", "x", "×");
+    remove.type = "button";
+    remove.addEventListener("click", () => {
+      staged = staged.filter((entry) => entry.id !== file.id);
+      // The server is holding these bytes for a prompt that is no longer
+      // going to name them, and it has no other way to learn that.
+      void api("/upload/drop", { id: file.id });
+      if (file.preview) URL.revokeObjectURL(file.preview);
+      renderAttachments();
+    });
+    chip.appendChild(remove);
+    attachEl.appendChild(chip);
+  }
+}
+
+async function upload(file) {
+  const response = await fetch(q("/upload?session=" + encodeURIComponent(activeId)), {
+    method: "POST",
+    headers: { "content-type": file.type || "application/octet-stream", "x-filename": file.name },
+    body: file,
+  });
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) return void addNotice(body.error || "upload failed", "err");
+
+  // A local preview rather than a round trip: the bytes are already here.
+  if (body.kind === "image") body.preview = URL.createObjectURL(file);
+  staged.push(body);
+  renderAttachments();
+}
+
+fileInput.addEventListener("change", async () => {
+  for (const file of fileInput.files) await upload(file);
+  fileInput.value = "";
+});
+
+for (const type of ["dragenter", "dragover"]) {
+  composerBox.addEventListener(type, (e) => {
+    e.preventDefault();
+    composerBox.classList.add("drag");
+  });
+}
+for (const type of ["dragleave", "drop"]) {
+  composerBox.addEventListener(type, (e) => {
+    e.preventDefault();
+    composerBox.classList.remove("drag");
+  });
+}
+composerBox.addEventListener("drop", async (e) => {
+  for (const file of e.dataTransfer.files) await upload(file);
+});
+
+input.addEventListener("paste", async (e) => {
+  // A pasted screenshot is the common case; without this it lands as nothing.
+  for (const item of e.clipboardData.items) {
+    if (item.kind !== "file") continue;
+    const file = item.getAsFile();
+    if (file) {
+      e.preventDefault();
+      await upload(file);
+    }
+  }
+});
+
+// --- the + menu, and @ mentions --------------------------------------------
+/**
+ * Two ways to point a message at something, split by where the something is.
+ *
+ * The + reaches this machine: a file or a folder chosen from the desktop, or
+ * an upload, plus the connectors and plugins the harness has. The dialog is
+ * the platform's own and it opens on the machine the agent runs on, which is
+ * the only machine whose absolute paths mean anything to it — the browser's
+ * own file input deliberately withholds the path, which is right for a pasted
+ * screenshot and useless for a log the agent could simply open.
+ *
+ * Typing @ reaches the project: the same fuzzy search the tree deserves, run
+ * from the caret, landing the path in the sentence at the point it was meant
+ * for. Codex and Claude Code both put file mentions there, and that is where
+ * they belong — "compare @a with @b" is a sentence, and two chips above the
+ * box are not. It is also why the + does not carry a project browser: the
+ * files someone names most are in the project, and @ already names them.
+ */
+
+const attachPicker = document.getElementById("attach-picker");
+const attachMenu = attachPicker.querySelector(".menu");
+const attachBody = el("div", "menu-body");
+
+// Focusable, so the arrow keys have somewhere to land: this menu has no search
+// box of its own, and the mention list is driven from the textarea.
+attachMenu.tabIndex = -1;
+attachMenu.replaceChildren(attachBody);
+
+/** Which screen the menu is on: root, connectors, plugins, or mention. */
+let attachView = "root";
+/** The last answer from /files, for the mention list. */
+let fileList = { entries: [] };
+/** Whether the context endpoint has answered once, for the mention list. */
+let offerLoaded = false;
+/** Connectors and plugins, refreshed each time the menu opens. */
+let offer = { connectors: [], plugins: [], skills: [] };
+/** The connectors on offer rather than the ones already here. */
+let market = [];
+/** The connector whose sign-in is open in a browser tab, if any. */
+let authorizing = null;
+/** The connector being added right now, so its row can say so. */
+let adding = null;
+let attachQuery = "";
+let attachCursor = 0;
+/** Guards against a slow answer to an old keystroke landing after a new one. */
+let attachSeq = 0;
+let attachTimer = null;
+/** Where the @ that opened a mention starts in the textarea; -1 when none. */
+let mentionAt = -1;
+
+const folderOf = (path) => (path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "");
+const nameOf = (path) => (path.includes("/") ? path.slice(path.lastIndexOf("/") + 1) : path);
+
+function referenced(ref) {
+  return refs.some((entry) => refKey(entry) === refKey(ref));
+}
+
+function toggleRef(ref) {
+  if (referenced(ref)) refs = refs.filter((entry) => refKey(entry) !== refKey(ref));
+  else refs.push(ref);
+  renderAttachments();
+  paintAttachMenu();
+}
+
+function addRef(kind, value) {
+  const ref = { kind: kind, value: value, label: nameOf(value), sub: folderOf(value) };
+  if (!referenced(ref)) refs.push(ref);
+  renderAttachments();
+}
+
+/** The rows on screen, in the order they are painted — what a key can land on. */
+function attachRows() {
+  /**
+   * What this project can reach, three or four deep, over the full catalogue.
+   *
+   * The menu used to hand every one of these straight to a dialog, which is
+   * the right home for eighty skills and the wrong one for the two somebody
+   * actually attaches. So the menu answers the common question itself — what
+   * is here, attach one — and the dialog keeps the uncommon ones: read all of
+   * them, install something new, take something off.
+   */
+  if (attachView === "skills" || attachView === "plugins" || attachView === "connectors") {
+    const kind = attachView;
+    const items =
+      kind === "skills" ? offer.skills || []
+      : kind === "plugins" ? offer.plugins || []
+      : offer.connectors || [];
+    const row = (entry) => ({
+      type: "offer-ref",
+      icon: kind === "skills" ? "skill" : kind === "plugins" ? "plugin" : "plug",
+      // A connector is known by its vendor's mark, the same one the dialog
+      // draws; a plug in front of three names is three rows told apart by
+      // reading.
+      mark: kind === "connectors" ? entry.name : undefined,
+      label: entry.title || entry.name,
+      note: entry.description || "",
+      ref: {
+        kind: kind === "skills" ? "skill" : kind === "plugins" ? "plugin" : "connector",
+        value: entry.name,
+        label: entry.name,
+      },
+    });
+    /**
+     * One list, with the project's own first.
+     *
+     * A skill checked into the repository is likelier to be the one wanted
+     * here, so it is not left to sort alphabetically among eighty that happen
+     * to be installed. That is an ordering, not a division: both are usable in
+     * this session and a heading between them would be drawing a line where
+     * the user does not have to act on one.
+     */
+    const local = kind === "connectors" ? [] : items.filter((entry) => entry.source === "project");
+    const shown = [...local, ...items.filter((entry) => !local.includes(entry))].slice(0, 6);
+    const rows = shown.map(row);
+    const empty = { skills: "add.noSkills", plugins: "add.noPlugins", connectors: "add.noConnectors" };
+    const hidden = items.length - shown.length;
+    return [
+      { type: "up", icon: "chevronLeft", label: t("add.back") },
+      ...rows,
+      ...(!items.length ? [{ type: "hint", label: t(empty[kind]) }] : []),
+      ...(hidden > 0 ? [{ type: "hint", label: t("add.andMore", { n: hidden }) }] : []),
+      // Browse is only a different question where there is somewhere to browse:
+      // connectors have a registry of ones not installed, skills and plugins
+      // are whatever is on this machine already. "More" only when the menu
+      // is holding some back; with everything in view it is the catalogue.
+      ...(kind === "connectors"
+        ? [{ type: "market", kind, icon: "search", label: t(hidden > 0 ? "add.browse" : "add.browseAll") }]
+        : []),
+      { type: "manage", kind, icon: "settings", label: t("add.manage") },
+    ];
+  }
+
+  if (attachView === "command") {
+    return COMMANDS.filter((one) => !attachQuery || one.name.startsWith(attachQuery)).map((one) => ({
+      type: "command",
+      icon: "command",
+      label: "/" + one.name + (one.arg ? " <" + one.arg + ">" : ""),
+      note: one.hint(),
+      command: one.name,
+    }));
+  }
+  if (attachView === "mention") {
+    /**
+     * Skills first, then files.
+     *
+     * The @ began as a way to name a file and files are still most of what it
+     * names, but a skill is the other thing worth pointing at from inside a
+     * sentence — and the only one where naming it does something: the model is
+     * told which skills exist, so naming one asks for it directly instead of
+     * leaving the choice to whether the task happened to match a description.
+     * There are a handful of them against thousands of files, so they go above
+     * rather than competing on rank.
+     */
+    const query = attachQuery.toLowerCase();
+    /**
+     * A skill matches on what it is for, not only on what it is called.
+     *
+     * Names are terse and chosen by whoever wrote the skill; the sentence
+     * under the name is the one a person would think of. Someone after the
+     * video tools types "video", and only the description contains it.
+     */
+    const skills = (offer.skills || [])
+      .filter((skill) =>
+        !query ||
+        skill.name.toLowerCase().includes(query) ||
+        (skill.description || "").toLowerCase().includes(query),
+      )
+      /**
+       * A few, not all of them.
+       *
+       * This list is mostly files and should stay that way: eighty skills
+       * answering a one-letter query push every file below a fold nobody
+       * scrolls, and @ was a way to name a file first. Four, because a skill
+       * row is two lines — six of them filled the menu exactly and the files
+       * began again just past its bottom edge, which is the same problem with
+       * a smaller number on it. The query narrows them as fast as anyone
+       * types, and the whole catalogue is a click away under the + menu.
+       */
+      .slice(0, 4)
+      .map((skill) => ({
+        type: "skill",
+        icon: "skill",
+        label: skill.name,
+        // Under the name rather than beside it. A file's sub is a folder and
+        // fits the right-hand slot; a skill's is the sentence it is chosen on,
+        // and in that slot it pushes the name it belongs to off the row.
+        note: skill.description || "",
+        ref: { kind: "skill", value: skill.name, label: skill.name },
+      }));
+    /**
+     * Plugins, on the same terms as skills and after them.
+     *
+     * A plugin is a bundle rather than a thing the model loads, so naming one
+     * is a weaker instruction than naming a skill — "use the ottoport plugin"
+     * steers which tools get reached for rather than pulling in a page of
+     * instructions. Worth offering, not worth offering first.
+     */
+    const plugins = (offer.plugins || [])
+      .filter((plugin) =>
+        !query ||
+        plugin.name.toLowerCase().includes(query) ||
+        (plugin.title || "").toLowerCase().includes(query) ||
+        (plugin.description || "").toLowerCase().includes(query),
+      )
+      .slice(0, 4)
+      .map((plugin) => ({
+        type: "plugin",
+        icon: "plugin",
+        label: plugin.title || plugin.name,
+        note: plugin.description || "",
+        ref: { kind: "plugin", value: plugin.name, label: plugin.name },
+      }));
+    const files = (fileList.entries || []).map((entry) => ({
+      type: entry.dir ? "folder" : "file",
+      icon: entry.dir ? "folder" : "file",
+      label: entry.name,
+      sub: folderOf(entry.path),
+      ref: { kind: entry.dir ? "folder" : "file", value: entry.path, label: entry.name },
+    }));
+    /**
+     * Headed, but only where a heading distinguishes something.
+     *
+     * Two kinds of thing share this list and they are not interchangeable —
+     * one is a file to read, the other is a way of working the model loads.
+     * A heading each says so. With only one kind present the heading is a
+     * label on a list of one kind, which is noise.
+     */
+    const sections = [
+      [t("add.skills"), skills],
+      [t("add.plugins"), plugins],
+      [t("mention.files"), files],
+    ].filter(([, rows]) => rows.length);
+    // One kind present is a list of one kind, and a heading over it labels
+    // nothing. Headings appear when there is something to tell apart.
+    if (sections.length < 2) return sections.flatMap(([, rows]) => rows);
+    return sections.flatMap(([label, rows]) => [{ type: "group", label }, ...rows]);
+  }
+
+  const connectors = (offer.connectors || []).length;
+  const plugins = (offer.plugins || []).length;
+  const skills = (offer.skills || []).length;
+  return [
+    // Two rows, because the dialogs behind them are two: only macOS has a
+    // panel that takes a file and a folder in one pass, and everywhere else a
+    // single row promising both could open only one of them. Saying which one
+    // opens before it opens is also how someone reaching for a screenshot
+    // stops reading at the first row.
+    { type: "pick", kind: "files", icon: "file", label: t("add.attachFiles") },
+    { type: "pick", kind: "folder", icon: "folder", label: t("add.attachFolders") },
+    // A count when there is one, and nothing when there is not: "none" is a
+    // word in the slot that otherwise holds a number, and it reads as a value
+    // rather than as an absence.
+    {
+      type: "into",
+      kind: "connectors",
+      icon: "plug",
+      label: t("add.connectors"),
+      sub: connectors ? String(connectors) : "",
+      into: true,
+    },
+    {
+      type: "into",
+      kind: "plugins",
+      icon: "plugin",
+      label: t("add.plugins"),
+      sub: plugins ? String(plugins) : "",
+      into: true,
+    },
+    {
+      type: "into",
+      kind: "skills",
+      icon: "skill",
+      label: t("add.skills"),
+      sub: skills ? String(skills) : "",
+      into: true,
+    },
+    { type: "upload", icon: "upload", label: t("add.upload") },
+  ];
+}
+
+function paintAttachMenu() {
+  const rows = attachRows();
+  if (attachCursor >= rows.length) attachCursor = Math.max(0, rows.length - 1);
+  // The list opens with the cursor at 0, and 0 is a heading whenever the list
+  // is grouped. Nudged here rather than at every call site that sets it.
+  while (rows[attachCursor] && rows[attachCursor].type === "group" && attachCursor < rows.length - 1) {
+    attachCursor++;
+  }
+  attachBody.replaceChildren();
+
+  rows.forEach((row, i) => {
+    if (row.type === "group") {
+      attachBody.appendChild(el("div", "menu-head", row.label));
+      return;
+    }
+    if (row.type === "hint") {
+      attachBody.appendChild(el("div", "menu-hint", row.label));
+      return;
+    }
+    const item = el(
+      "div",
+      "menu-item" + (row.ref && referenced(row.ref) ? " on" : "") + (i === attachCursor ? " cursor" : ""),
+    );
+    item.setAttribute("role", "button");
+    item.appendChild(row.mark ? connectorMark(row.mark, row.label) : svgIcon(row.icon));
+    if (row.note) {
+      item.classList.add("stacked");
+      const stack = el("span", "stack");
+      stack.appendChild(el("span", "menu-label", row.label));
+      stack.appendChild(el("span", "note", row.note));
+      item.appendChild(stack);
+    } else {
+      item.appendChild(el("span", "menu-label", row.label));
+    }
+    if (row.sub) item.appendChild(el("span", "sub", row.sub));
+    // At the end rather than the start. A tick that is invisible until a row
+    // is chosen still held a column open in front of every row that was not,
+    // which put the icons a third of the way into the menu and the words
+    // further still. On the right it costs nothing until there is one.
+    if (row.ref && referenced(row.ref)) item.appendChild(el("span", "tick", "✓"));
+    if (row.into) item.appendChild(el("span", "chev"));
+    // An installed connector is removed from the row that says it is
+    // installed, which is the row someone looking to remove it goes to.
+    if (row.type === "offer" && row.installed) {
+      const drop = el("button", "row-drop", "×");
+      drop.type = "button";
+      drop.title = t("add.remove");
+      drop.addEventListener("click", (e) => {
+        e.stopPropagation();
+        void installConnector(row.id, true);
+      });
+      item.appendChild(drop);
+    }
+    item.addEventListener("click", () => chooseAttachRow(row));
+    attachBody.appendChild(item);
+  });
+
+  // One line saying why a screen is empty, rather than an empty screen.
+  const listed = rows.filter((row) => row.type !== "up").length;
+  if (attachView === "connectors" && !listed) {
+    attachBody.appendChild(el("div", "menu-hint", t("add.noConnectors")));
+  } else if (attachView === "plugins" && !listed) {
+    attachBody.appendChild(el("div", "menu-hint", t("add.noPlugins")));
+  } else if (!listed) {
+    attachBody.appendChild(el("div", "menu-empty", t("menu.none")));
+  }
+  if (attachView === "mention" && fileList.truncated) {
+    attachBody.appendChild(el("div", "menu-hint", t("add.more")));
+  }
+}
+
+function chooseAttachRow(row) {
+  if (row.type === "hint") return;
+  if (row.type === "up") return void showAttachView("root");
+  if (row.type === "into") return void showAttachView(row.kind);
+  if (row.type === "offer-ref") {
+    /**
+     * The same thing, named the same way, whichever menu it was picked from.
+     *
+     * A skill picked with @ lands in the sentence; picked from here it used to
+     * become a chip floating above the box instead — two representations of
+     * one idea, and the user has to learn which menu produces which. A
+     * connector keeps the chip: it is not something anybody writes into a
+     * sentence, it is a capability this message is sent with.
+     */
+    if (row.ref.kind === "skill" || row.ref.kind === "plugin") return void mentionAtCaret(row.ref.value);
+    return void toggleRef(row.ref);
+  }
+  if (row.type === "manage") {
+    closeAttachMenu();
+    return void openMarket(row.kind);
+  }
+  if (row.type === "pick") return void pickFromDisk(row.kind);
+  if (row.type === "market") {
+    closeAttachMenu();
+    return void openMarket(row.kind);
+  }
+  if (row.type === "upload") {
+    closeAttachMenu();
+    return void fileInput.click();
+  }
+  if (row.type === "command") return void insertCommand(row.command);
+  if (attachView === "mention" && row.ref) {
+    return void insertMention(row.ref.value);
+  }
+  toggleRef(row.ref);
+}
+
+/**
+ * Files, or a folder, from this machine — chosen in the platform's own dialog.
+ *
+ * The server opens it, because the server is the process that runs on the
+ * machine whose absolute paths the agent can act on; the browser's own input
+ * hands over bytes and withholds the path.
+ *
+ * What comes back is a reference where the agent can open the file itself, and
+ * a copy where it cannot. The dialog reaches the whole machine while the
+ * agent's readable roots are the project, so a screenshot chosen from the
+ * desktop would otherwise become a path every read of it is refused — an
+ * attachment that looks attached and is not. Which one happened is visible in
+ * the chip: a reference carries its folder, a copy carries its size.
+ */
+async function pickFromDisk(kind) {
+  closeAttachMenu();
+  const picked = await api("/pick", kind === "folder" ? {} : { kind: "files" }, 5 * 60_000);
+  // A dismissed dialog is an answer, and the only one that says nothing.
+  if (picked.cancelled) return;
+  if (picked.unavailable || picked.error) return void addNotice(t("add.noDialog"), "err");
+
+  if (kind === "folder") {
+    // Relative when it is inside the project, which is shorter to read and is
+    // the form the agent's own tools take.
+    const path = picked.relative || picked.path;
+    if (!path) return;
+    // A folder has no bytes to carry in its place, so this is the one case
+    // left where all the page can do is say what will happen.
+    if (picked.unreachable) addNotice(t("add.outsideFolder", { name: path }), "err");
+    addRef("folder", path);
+    return;
+  }
+  // One dialog on macOS returns both kinds, so which it is comes from the
+  // disk rather than from the row that was clicked.
+  for (const entry of picked.entries || []) {
+    if (entry.staged) {
+      staged.push(await withPreview(entry.staged));
+      renderAttachments();
+      continue;
+    }
+    if (entry.unreachable) {
+      // Out of reach and too big to carry: both roads are closed, and the one
+      // thing worth doing is saying so before the turn is spent finding out.
+      addNotice(t(entry.dir ? "add.outsideFolder" : "add.outsideFile", { name: nameOf(entry.path) }), "err");
+    }
+    addRef(entry.dir ? "folder" : "file", entry.path);
+  }
+}
+
+/**
+ * A staged upload the browser never held the bytes of.
+ *
+ * Pulled down once and kept as an object URL rather than pointed at, because
+ * the staging map releases these the moment a prompt claims them — the bubble
+ * that draws the message is rendered just after that, and would be asking for
+ * something the server had already forgotten.
+ */
+async function withPreview(file) {
+  if (file.kind !== "image") return file;
+  try {
+    const response = await fetch(q("/upload/preview?id=" + encodeURIComponent(file.id)));
+    if (!response.ok) return file;
+    return { ...file, preview: URL.createObjectURL(await response.blob()) };
+  } catch {
+    // A chip without a thumbnail is still a chip; nothing here is worth a
+    // notice the person cannot act on.
+    return file;
+  }
+}
+
+function showAttachView(view) {
+  attachView = view;
+  // No row is under the keyboard until a key moves there. Opening onto a
+  // highlighted first row, with the pointer highlighting a second, made the
+  // menu look like it had two selections and no rhythm.
+  attachCursor = -1;
+  paintAttachMenu();
+  attachMenu.focus();
+}
+
+// --- browsing connectors and plugins ---------------------------------------
+/**
+ * What is on offer, in a dialog rather than in the menu.
+ *
+ * A connector is a name, a sentence about what it does, and a verb — that is a
+ * list with rows two lines tall, and the popup hanging off the + is 380px wide
+ * with room for one line. Squeezed in there the descriptions pushed the names
+ * out of their own rows. So the menu says which of the two lists you want, and
+ * the list gets a surface it fits on.
+ */
+
+const marketDialog = document.getElementById("market");
+const marketList = document.getElementById("mk-list");
+let marketKind = "connectors";
+
+const marketSearch = document.getElementById("mk-search");
+marketSearch.addEventListener("input", () => paintMarket());
+
+async function openMarket(kind) {
+  marketKind = kind;
+  // Cleared on open: a query left over from the last screen would hide most of
+  // this one and look like an empty catalogue.
+  marketSearch.value = "";
+  marketSearch.placeholder = t("menu.search");
+  const titles = { plugins: "add.plugins", skills: "add.skills", connectors: "add.connectors" };
+  const notes = { plugins: "market.pluginsNote", skills: "market.skillsNote", connectors: "market.connectorsNote" };
+  document.getElementById("mk-title").textContent = t(titles[kind] || titles.connectors);
+  document.getElementById("mk-note").textContent = t(notes[kind] || notes.connectors);
+  marketList.replaceChildren(el("div", "mk-desc", t("market.loading")));
+  marketDialog.showModal();
+
+  const context = await getJson("/context");
+  if (!context.error) offer = context;
+  if (kind === "connectors") {
+    const body = await getJson("/registry");
+    market = body.error ? [] : body.connectors || [];
+  }
+  paintMarket();
+}
+
+function paintMarket() {
+  marketList.replaceChildren();
+  const query = (marketSearch.value || "").trim().toLowerCase();
+  const hit = (entry) =>
+    !query ||
+    (entry.name || "").toLowerCase().includes(query) ||
+    (entry.title || "").toLowerCase().includes(query) ||
+    (entry.description || "").toLowerCase().includes(query) ||
+    (entry.label || "").toLowerCase().includes(query);
+  const installed = (
+    marketKind === "plugins" ? offer.plugins || []
+    : marketKind === "skills" ? offer.skills || []
+    : offer.connectors || []
+  ).filter(hit);
+
+  if (installed.length) {
+    marketList.appendChild(el("div", "mk-group", t("market.installed")));
+    const grid = el("div", "mk-grid");
+    for (const entry of installed) grid.appendChild(installedRow(entry));
+    marketList.appendChild(grid);
+  }
+
+  // Only connectors have somewhere to come from yet. Saying so beats an
+  // "Available" heading over an empty space that reads as a failed load.
+  const available = marketKind === "connectors" ? market.filter((one) => !one.installed && hit(one)) : [];
+  if (available.length) {
+    marketList.appendChild(el("div", "mk-group", t("market.available")));
+    const grid = el("div", "mk-grid");
+    for (const entry of available) grid.appendChild(offerRow(entry));
+    marketList.appendChild(grid);
+  }
+  if (!installed.length && !available.length) {
+    marketList.appendChild(el("div", "mk-desc", t("market.empty")));
+  }
+}
+
+/**
+ * The mark for one connector: the vendor's icon, or a lettered tile.
+ *
+ * The image is swapped in only once it has decoded. A broken <img> shows the
+ * browser's own placeholder, which is uglier than the fallback and arrives at
+ * a different moment in every browser.
+ */
+function connectorMark(id, label) {
+  const letter = (label || id || "?").trim().charAt(0).toUpperCase();
+  // A stable hue per connector, so the tile is the same colour every time
+  // rather than a different one each render.
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) % 360;
+  const mono = el("span", "mk-mono", letter);
+  mono.style.background = "hsl(" + hash + " 42% 42%)";
+
+  const img = new Image();
+  img.className = "mk-logo";
+  img.alt = "";
+  img.addEventListener("load", () => {
+    if (isDarkFlatGlyph(img)) img.classList.add("invert-dark");
+    mono.replaceWith(img);
+  });
+  img.src = q("/connector-icon?id=" + encodeURIComponent(id));
+  return mono;
+}
+
+/**
+ * What kind of mark an image is.
+ *
+ * Measured rather than guessed, because there is no way to tell from a URL or
+ * a content type which logos are the black-on-transparent kind. The image is
+ * already decoded and comes from this origin, so a 32px sample of it is a few
+ * hundred microseconds and taints nothing.
+ *
+ * Two answers come out of the one sample. Filled is whether the mark brought
+ * its own background — a tile with a glyph punched out of it, which owns every
+ * pixel of its box. Invert is whether it is a dark shape on nothing, which in
+ * the dark theme is a black shape on a black row.
+ */
+function markProfile(img) {
+  const unknown = { filled: false, invert: false };
+  try {
+    const size = 32;
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = size;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    ctx.drawImage(img, 0, 0, size, size);
+    const pixels = ctx.getImageData(0, 0, size, size).data;
+
+    let opaque = 0;
+    let dark = 0;
+    let coloured = 0;
+    for (let i = 0; i < pixels.length; i += 4) {
+      if (pixels[i + 3] < 40) continue;
+      opaque++;
+      const hi = Math.max(pixels[i], pixels[i + 1], pixels[i + 2]);
+      const lo = Math.min(pixels[i], pixels[i + 1], pixels[i + 2]);
+      if (hi - lo > 40) coloured++;
+      if (hi < 110) dark++;
+    }
+    if (!opaque) return unknown;
+
+    // A mark that fills its whole box brought its own background, and whatever
+    // it drew on that background is its business.
+    const filled = opaque / (size * size) > 0.75;
+    if (filled) return { filled: true, invert: false };
+    return { filled: false, invert: dark / opaque > 0.7 && coloured / opaque < 0.15 };
+  } catch {
+    // A canvas that will not read is not worth a broken icon.
+    return unknown;
+  }
+}
+
+/** The half of the profile the connector list asks for. */
+function isDarkFlatGlyph(img) {
+  return markProfile(img).invert;
+}
+
+/** One thing this harness already has: attachable, and removable if we added it. */
+function installedRow(entry) {
+  const row = el("div", "mk-item");
+  const isPlugin = marketKind === "plugins";
+  const isSkill = marketKind === "skills";
+  row.appendChild(isPlugin ? svgIcon("plugin") : isSkill ? svgIcon("skill") : connectorMark(entry.name, entry.name));
+
+  const naming = el("div", "mk-naming");
+  // A plugin may carry a display title over its id; the id is still what a
+  // reference resolves by, so it is the title that is painted and nothing else.
+  const heading = el("div", "mk-name", entry.title || entry.name);
+  /**
+   * Where it came from, when that is not "this machine".
+   *
+   * A list of eighty skills is mostly things somebody installed, and the four
+   * that ship here look exactly like them — which matters the moment one
+   * misbehaves and the question is whose it is. Runtime plugins get the same
+   * treatment for the same reason: memory and media are ours, and anything
+   * beside them was configured.
+   */
+  // A runtime plugin says so in its source; a skill carries its own flag. Reading
+  // only one of them is how the two that ship here — memory and the media
+  // plugin — ended up as the only rows in the panel with no provenance at all.
+  const tag =
+    entry.builtin || entry.source === "builtin" ? "built-in"
+    : entry.source === "runtime" ? "runtime"
+    : "";
+  if (tag) heading.appendChild(el("span", "mk-tag", tag));
+  naming.appendChild(heading);
+  // A skill has nothing to connect to and nothing to be offline from, so the
+  // slot that carries a connector's state carries what the skill is for —
+  // which is also the sentence the model decides on.
+  const detail = isSkill
+    ? entry.description || entry.source
+    : isPlugin
+    ? entry.description || entry.source
+    : entry.connected
+      ? t("add.tools", { n: entry.tools })
+      : entry.needsAuth
+        ? t("add.needsAuth")
+        : entry.error || t("add.offline");
+  if (detail) naming.appendChild(el("div", "mk-desc", detail));
+  row.appendChild(naming);
+
+  const acts = el("div", "mk-acts");
+  // Not where the plugin came from — the note above the list says that once,
+  // and repeating it on every row distinguishes nothing. What is worth saying
+  // per row is the part that would otherwise surprise someone: this plugin
+  // declares servers, and they are not running.
+  const idle = isPlugin && entry.source === "claude" ? (entry.servers || []).length : 0;
+  // Two keys rather than a plural engine: this is the only place in the page
+  // where the count is usually one, and "1 servers" is worth the extra string.
+  if (idle) {
+    const said = idle === 1 ? t("market.serverIdle") : t("market.serversIdle", { n: idle });
+    acts.appendChild(el("span", "mk-state", said));
+  }
+  const ref = { kind: isPlugin ? "plugin" : isSkill ? "skill" : "connector", value: entry.name, label: entry.name };
+  const attach = el("button", "mk-icon-btn", referenced(ref) ? "✓" : "+");
+  attach.type = "button";
+  attach.title = t("market.attach");
+  attach.addEventListener("click", () => {
+    toggleRef(ref);
+    attach.textContent = referenced(ref) ? "✓" : "+";
+  });
+  acts.appendChild(attach);
+
+  // A connector that asked to be signed in to gets the one button that moves
+  // it forward, in front of the one that removes it.
+  if (!isPlugin && !isSkill && entry.needsAuth) {
+    const go = el(
+      "button",
+      "mk-btn go",
+      t(entry.name === authorizing ? "market.authorizing" : "market.authorize"),
+    );
+    go.type = "button";
+    go.disabled = Boolean(authorizing);
+    go.addEventListener("click", () => void authorizeConnector(entry.name));
+    acts.appendChild(go);
+  }
+
+  // Removal is a connector's alone: a plugin is a directory on disk and a
+  // skill is a file in one, and neither is undone from a composer menu.
+  if (!isPlugin && !isSkill) {
+    const drop = el("button", "mk-icon-btn drop", "×");
+    drop.type = "button";
+    drop.title = t("add.remove");
+    drop.addEventListener("click", () => void installConnector(entry.name, true));
+    acts.appendChild(drop);
+  }
+  row.appendChild(acts);
+  return row;
+}
+
+/** One thing on offer that is not here yet. */
+function offerRow(entry) {
+  const row = el("div", "mk-item");
+  row.appendChild(connectorMark(entry.id, entry.label));
+
+  const naming = el("div", "mk-naming");
+  naming.appendChild(el("div", "mk-name", entry.label));
+  // What it needs takes the line, because it is the thing standing between
+  // this row and a working connector.
+  const missing = entry.missingEnv || [];
+  const desc = missing.length ? t("market.needsEnv", { names: missing.join(", ") }) : entry.description;
+  if (desc) naming.appendChild(el("div", missing.length ? "mk-desc warn" : "mk-desc", desc));
+  row.appendChild(naming);
+
+  const acts = el("div", "mk-acts");
+  const add = el("button", "mk-btn go", t(entry.id === adding ? "market.adding" : "market.add"));
+  add.type = "button";
+  add.disabled = Boolean(adding) || missing.length > 0;
+  add.addEventListener("click", () => void installConnector(entry.id, false));
+  acts.appendChild(add);
+  row.appendChild(acts);
+  return row;
+}
+
+/**
+ * Add a connector, or take one away.
+ *
+ * Both halves happen on the server — connected now, written to the config for
+ * next time — so the only thing left here is to say which row is waiting and
+ * to repaint from what came back rather than from what was hoped for.
+ */
+async function installConnector(id, remove) {
+  if (adding) return;
+  adding = remove ? null : id;
+  paintMarket();
+  const body = await api("/connector", { id: id, remove: remove === true }, 3 * 60_000);
+  adding = null;
+  if (body.error) {
+    addNotice(body.error, "err");
+    return void paintMarket();
+  }
+  if (body.connectors) offer = { connectors: body.connectors, plugins: body.plugins || [], skills: body.skills || [] };
+  for (const entry of market) if (entry.id === id) entry.installed = remove !== true;
+  paintMarket();
+}
+
+/**
+ * Sign in to a connector.
+ *
+ * The redirect does not come back here — it lands on a loopback listener the
+ * harness opened for the length of the flow — so there is nothing to poll and
+ * nothing to post back. The row goes quiet, the tab does the work, and the
+ * the connectors_changed broadcast repaints when it lands.
+ */
+async function authorizeConnector(id) {
+  if (authorizing) return;
+  authorizing = id;
+  paintMarket();
+  const body = await api("/connector/authorize", { id: id }, 60_000);
+  if (!body || body.error) {
+    authorizing = null;
+    paintMarket();
+    return void addNotice((body && body.error) || "could not start the sign-in", "err");
+  }
+  // Opened rather than linked, for the same reason the website sign-in is:
+  // in the desktop build a link would load the page inside the app.
+  window.open(body.url, "_blank", "noopener");
+  addNotice(t("market.authOpened", { name: id }));
+}
+
+document.getElementById("mk-close").appendChild(svgIcon("close"));
+document.getElementById("mk-close").setAttribute("aria-label", t("market.close"));
+document.getElementById("mk-close").addEventListener("click", () => marketDialog.close());
+
+async function loadMentionFiles() {
+  const seq = ++attachSeq;
+  const base = "/files?session=" + encodeURIComponent(activeId);
+  // A bare @ lists the project root, so the menu is useful before the first
+  // letter is typed.
+  const path = attachQuery ? base + "&q=" + encodeURIComponent(attachQuery) : base + "&dir=";
+  const body = await getJson(path);
+  if (seq !== attachSeq) return;
+  if (body.error) {
+    fileList = { entries: [] };
+    addNotice(body.error, "err");
+  } else {
+    fileList = body;
+  }
+  attachCursor = 0;
+  paintAttachMenu();
+}
+
+/** Debounced, because typing is faster than a walk of the tree. */
+function searchMentionFiles() {
+  clearTimeout(attachTimer);
+  attachTimer = setTimeout(() => void loadMentionFiles(), 120);
+}
+
+function closeAttachMenu() {
+  attachMenu.hidden = true;
+  attachPicker.classList.remove("open");
+  attachMenu.style.bottom = "";
+  mentionAt = -1;
+  // Back to the offers: the next + should not open onto whichever screen this
+  // one happened to close on.
+  attachView = "root";
+}
+
+function openAttachMenu() {
+  for (const other of document.querySelectorAll(".picker.open")) {
+    if (other !== attachPicker) {
+      other.classList.remove("open");
+      other.querySelector(".menu").hidden = true;
+    }
+  }
+  attachMenu.style.bottom = "";
+  mentionAt = -1;
+  attachMenu.hidden = false;
+  attachPicker.classList.add("open");
+  showAttachView("root");
+
+  // Refreshed on every open rather than cached for the page: switching
+  // projects changes what is connected, and a connector can drop between two
+  // messages.
+  void getJson("/context").then((body) => {
+    if (body.error) return;
+    offerLoaded = true;
+    if (attachMenu.hidden) return;
+    offer = body;
+    paintAttachMenu();
+  });
+}
+
+/**
+ * The same list, for a mention that was never opened from the + button.
+ *
+ * The + menu refreshes on every open because a connector can drop between two
+ * messages. A mention cannot do that: it reopens on every keystroke, and a
+ * fetch per character is a fetch per character. So it asks once, and a skill
+ * list that is a few minutes stale is the right trade against a skill list
+ * that is empty because nobody happened to click the +.
+ */
+function ensureOffer() {
+  if (offerLoaded) return;
+  offerLoaded = true;
+  void getJson("/context").then((body) => {
+    if (body.error) return;
+    offer = body;
+    if (attachView === "mention") paintAttachMenu();
+    });
+}
+
+/**
+ * Arrow keys and Enter over the rows, shared by the menu and the mention list.
+ *
+ * Returns whether the key was spent here, so the caller knows to leave the
+ * textarea's own handling alone.
+ */
+function moveAttachCursor(e) {
+  const rows = attachRows();
+  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+    e.preventDefault();
+    if (!rows.length) return true;
+    const step = e.key === "ArrowDown" ? 1 : -1;
+    // Past the headings rather than onto them: a heading is not a choice, and
+    // a cursor resting on one is a keypress that appears to do nothing.
+    let next = attachCursor;
+    for (let i = 0; i < rows.length; i++) {
+      next = (next + step + rows.length) % rows.length;
+      if (rows[next].type !== "group") break;
+    }
+    attachCursor = next;
+    paintAttachMenu();
+    const active = attachBody.querySelector(".cursor");
+    if (active) active.scrollIntoView({ block: "nearest" });
+    return true;
+  }
+  if (e.key === "Enter" || (e.key === "Tab" && (attachView === "mention" || attachView === "command"))) {
+    e.preventDefault();
+    const row = rows[attachCursor];
+    if (row) chooseAttachRow(row);
+    return true;
+  }
+  return false;
+}
+
+// --- the chip behind a mention ---------------------------------------------
+
+const inputMirror = document.getElementById("input-mirror");
+
+/** Every name an @ can stand for. */
+function mentionNames() {
+  return new Map([
+    ...(offer.skills || []).map((skill) => [skill.name, "skill"]),
+    ...(offer.plugins || []).map((plugin) => [plugin.name, "plugin"]),
+  ]);
+}
+
+/**
+ * Backspace takes the whole mention, not a letter of it.
+ *
+ * The chip is drawn as one object and behaves as one everywhere else — it is
+ * inserted whole and sent whole — so deleting it a character at a time leaves
+ * a trail of half-names that are no longer anything, each of them still
+ * looking like a word the harness understood until the wash disappears. Only
+ * when the caret is against it and nothing is selected: a selection is the
+ * user being specific, and editing inside a name is allowed, it just is not
+ * what a keystroke at the edge means.
+ */
+input.addEventListener("keydown", (e) => {
+  if (e.key !== "Backspace" && e.key !== "Delete") return;
+  if (input.selectionStart !== input.selectionEnd) return;
+  const caret = input.selectionStart;
+  const names = mentionNames();
+  if (!names.size) return;
+
+  let from = caret;
+  let to = caret;
+  if (e.key === "Backspace") {
+    const hit = /(^|\s)@([^\s@]+)$/.exec(input.value.slice(0, caret));
+    if (!hit || !names.has(hit[2])) return;
+    from = caret - hit[2].length - 1;
+  } else {
+    const after = input.value.slice(caret);
+    const hit = /^@([^\s@]+)/.exec(after);
+    // Forward-delete only from the start of one: mid-name it is an ordinary
+    // character, and the caret is visibly inside a word.
+    const start = caret === 0 || /\s/.test(input.value[caret - 1] ?? "");
+    if (!hit || !start || !names.has(hit[1])) return;
+    to = caret + hit[1].length + 1;
+  }
+
+  e.preventDefault();
+  input.value = input.value.slice(0, from) + input.value.slice(to);
+  input.setSelectionRange(from, from);
+  paintMirror();
+  // The box may now fit in fewer lines, and the grower only runs on input.
+  autosize();
+});
+
+/**
+ * Paint the backdrop: the same text, with the mentions in it marked.
+ *
+ * Only names that are actually a skill or a plugin are marked. Highlighting
+ * any @word would promise something about an email address and a typo, and
+ * the promise this makes — that the harness knows what was named — is exactly
+ * what a reader is checking when they glance at it.
+ */
+function paintMirror() {
+  if (!inputMirror) return;
+  // Typing an @ asks for the list, but text can also arrive whole — pasted, or
+  // restored as a draft — and that text has mentions in it too. Guarded, so
+  // this is one request in the life of the page rather than one per keystroke.
+  ensureOffer();
+  const names = mentionNames();
+  inputMirror.replaceChildren();
+  if (!names.size) return void (inputMirror.textContent = input.value);
+
+  const text = input.value;
+  let at = 0;
+  // Word-initial, matching what the mention parser accepts, so what lights up
+  // is what the menu would have offered.
+  const pattern = /(^|\s)@([^\s@]+)/g;
+  for (let hit = pattern.exec(text); hit; hit = pattern.exec(text)) {
+    const start = hit.index + hit[1].length;
+    if (!names.has(hit[2])) continue;
+    inputMirror.appendChild(document.createTextNode(text.slice(at, start)));
+    const mark = el("mark", "");
+    const slot = el("span", "at");
+    slot.appendChild(svgIcon(names.get(hit[2])));
+    mark.appendChild(slot);
+    mark.appendChild(document.createTextNode(hit[2]));
+    inputMirror.appendChild(mark);
+    at = start + hit[2].length + 1;
+  }
+  inputMirror.appendChild(document.createTextNode(text.slice(at)));
+  if (inputMirror.querySelector("mark")) inputMirror.style.setProperty("--at-w", atWidth() + "px");
+}
+
+// --- the caret ------------------------------------------------------------
+
+/**
+ * Draw the caret, because the field cannot draw one thick enough.
+ *
+ * A textarea's caret is one device pixel and the only thing CSS offers is its
+ * colour. On a pale field that bar is genuinely hard to find, so the native
+ * one is hidden and this one is put where it would have been.
+ *
+ * Where that is comes from a probe: the same box as the mirror, with the same
+ * font, width, padding and wrapping, holding the text up to the caret and
+ * then a zero-width marker. Whatever rectangle the marker lands in is where
+ * the field would have drawn the bar — including after a wrap, which is the
+ * case arithmetic on character widths always gets wrong.
+ */
+const caretEl = document.getElementById("caret");
+const caretProbe = document.getElementById("caret-probe");
+let caretRest;
+
+function placeCaret() {
+  // Only when the field has the caret and nothing is selected. A selection
+  // draws its own edges, and a bar inside one reads as a second insertion
+  // point.
+  const showing =
+    document.activeElement === input && input.selectionStart === input.selectionEnd;
+  caretEl.classList.toggle("on", showing);
+  if (!showing) return;
+
+  const head = input.value.slice(0, input.selectionStart);
+  caretProbe.textContent = head;
+  // A trailing newline collapses unless something follows it, which would put
+  // the caret at the end of the line above rather than on the empty one.
+  const marker = document.createElement("span");
+  marker.textContent = String.fromCharCode(0x200b);
+  caretProbe.appendChild(marker);
+
+  // The marker's offsets are inside the probe; the caret is placed against
+  // the wrapper they share. The probe is inset and padded so the mention chip
+  // has somewhere to bleed — read those numbers off it rather than repeating
+  // them here, or the caret drifts the day the padding changes. Scrolling is
+  // the field's, not the probe's.
+  // The line box, which is what the field's own caret fills. Nothing here is
+  // trying to improve on the native geometry — the only reason this caret
+  // exists is that CSS offers no way to make that one wider than a pixel.
+  caretEl.style.left = caretProbe.offsetLeft + marker.offsetLeft + "px";
+  caretEl.style.top = caretProbe.offsetTop + marker.offsetTop - input.scrollTop + "px";
+  caretEl.style.height = marker.offsetHeight + "px";
+
+  // Solid while it is moving, blinking once it settles.
+  caretEl.classList.add("moving");
+  clearTimeout(caretRest);
+  caretRest = setTimeout(() => caretEl.classList.remove("moving"), 420);
+}
+
+// Every way the caret can move. The selectionchange event covers the keyboard
+// and the mouse both, and fires for a textarea in every browser this ships to.
+for (const event of ["input", "focus", "blur", "scroll"]) {
+  input.addEventListener(event, placeCaret);
+}
+document.addEventListener("selectionchange", () => {
+  if (document.activeElement === input) placeCaret();
+});
+window.addEventListener("resize", placeCaret);
+
+/** How wide the field draws an @ sign: the slot the icon has to fit in. */
+function atWidth() {
+  const probe = document.createElement("canvas").getContext("2d");
+  probe.font = getComputedStyle(input).font;
+  return probe.measureText("@").width;
+}
+
+// The mirror has no scrollbar of its own; the text it holds is the text the
+// textarea is scrolling.
+input.addEventListener("scroll", () => {
+  if (inputMirror) inputMirror.scrollTop = input.scrollTop;
+});
+
+// --- / commands ------------------------------------------------------------
+
+/**
+ * What a slash does that the sidebar does not.
+ *
+ * The palette on Cmd-K is navigation: go somewhere, open something. These are
+ * the other half — act on the session in front of you — and they are here
+ * because that half had no surface at all. A command that only opens a panel
+ * belongs in the palette, not in this list; two ways to reach the same screen
+ * is how a user ends up unsure which one has the thing they want.
+ *
+ * Each takes the rest of the line as its argument, which is why the menu
+ * inserts a trailing space: the next thing typed is the argument, not a
+ * search for another command.
+ */
+const COMMANDS = [
+  {
+    name: "model",
+    arg: "id",
+    hint: () => t("cmd.model"),
+    run: (arg) => {
+      if (!arg) return void document.querySelector("#model-picker .picker-btn")?.click();
+      return void api("/model", { model: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "login",
+    arg: "",
+    hint: () => t("cmd.login"),
+    // The same dialog the sidebar's sign-in row opens, so every way in — the
+    // website and the emailed code — is on screen.
+    run: async () => {
+      const account = await getJson("/account");
+      openConnect((account && account.provider) || "official");
+    },
+  },
+  {
+    name: "mode",
+    arg: "mode",
+    hint: () => t("cmd.mode"),
+    run: (arg) => {
+      if (!arg) return void document.querySelector("#mode-picker .picker-btn")?.click();
+      return void api("/mode", { mode: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "rename",
+    arg: "title",
+    hint: () => t("cmd.rename"),
+    run: (arg) => {
+      if (!arg) return void addNotice(t("cmd.needsTitle"), "notice err");
+      return void api("/rename", { id: activeId, title: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "schedule",
+    arg: "name",
+    hint: () => t("cmd.schedule"),
+    run: (arg) => {
+      // The panel manages routines; this runs one without leaving the
+      // composer. Creating one from here would need somewhere to keep it,
+      // which is the panel's job and not a line of text's.
+      if (!arg) return void document.getElementById("nav-routines")?.click();
+      return void api("/routine", { name: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "new",
+    arg: "",
+    hint: () => t("cmd.new"),
+    run: () => void switchTo({ action: "new" }),
+  },
+];
+
+function pushNotice(body) {
+  if (body && body.error) addNotice(body.error, "notice err");
+}
+
+/** The /word being typed, or null. Only ever the first word of the box. */
+function commandUnderCaret() {
+  // Anchored at the start, and only while the first word is still being
+  // typed: a path is full of slashes and "and/or" is a word, and neither is
+  // an attempt to run something.
+  const before = input.value.slice(0, input.selectionStart);
+  const match = /^\/([a-z-]*)$/i.exec(before);
+  return match ? { query: match[1] } : null;
+}
+
+function openCommands(command) {
+  ensureOffer();
+  attachView = "command";
+  attachQuery = command.query.trim().toLowerCase();
+  attachCursor = 0;
+  attachMenu.hidden = false;
+  attachPicker.classList.add("open");
+  const bar = attachPicker.getBoundingClientRect().top;
+  const box = composerBox.getBoundingClientRect().top;
+  // On a phone the menu is positioned from the box itself by the stylesheet.
+  attachMenu.style.bottom = isPhone() ? "" : "calc(100% + " + Math.round(bar - box + 14) + "px)";
+  paintAttachMenu();
+}
+
+/** Insert the command, with the space its argument starts after. */
+function insertCommand(name) {
+  const rest = input.value.slice(input.selectionStart);
+  input.value = "/" + name + " " + rest.replace(/^\s+/, "");
+  paintMirror();
+  closeAttachMenu();
+  input.focus();
+  const at = name.length + 2;
+  input.setSelectionRange(at, at);
+}
+
+/**
+ * Run what was typed, or say it is not a command.
+ *
+ * Returns whether the line was handled, so the submit path can tell a command
+ * from a prompt. An unknown slash word is a prompt: people write /etc and
+ * and/or, and refusing to send those would be the feature getting in the way
+ * of the thing it was added to.
+ */
+function runCommand(text) {
+  const match = /^\/([a-z-]+)(?:\s+([\s\S]*))?$/i.exec(text);
+  if (!match) return false;
+  const command = COMMANDS.find((one) => one.name === match[1].toLowerCase());
+  if (!command) return false;
+  command.run((match[2] || "").trim());
+  return true;
+}
+
+// --- @ mentions ------------------------------------------------------------
+
+/** The @word being typed at the caret, or null. */
+function mentionUnderCaret() {
+  const caret = input.selectionStart;
+  const before = input.value.slice(0, caret);
+  // Only at the start of a word: an email address and a decorator are not
+  // attempts to name a file.
+  const match = /(^|\s)@([^\s@]*)$/.exec(before);
+  return match ? { at: caret - match[2].length - 1, query: match[2] } : null;
+}
+
+function openMention(mention) {
+  ensureOffer();
+  mentionAt = mention.at;
+  attachView = "mention";
+  attachQuery = mention.query.trim();
+  attachCursor = 0;
+  attachMenu.hidden = false;
+  attachPicker.classList.add("open");
+  // Clear of the whole composer, not just of the + it hangs from: the menu
+  // otherwise covers the line being typed, and a mention is chosen by reading
+  // the sentence it is going into.
+  const bar = attachPicker.getBoundingClientRect().top;
+  const box = composerBox.getBoundingClientRect().top;
+  // On a phone the menu is positioned from the box itself by the stylesheet.
+  attachMenu.style.bottom = isPhone() ? "" : "calc(100% + " + Math.round(bar - box + 14) + "px)";
+  paintAttachMenu();
+  searchMentionFiles();
+}
+
+/** Write an @name into the box at the caret, from a menu that is not the @ one. */
+function mentionAtCaret(name) {
+  const caret = input.selectionStart ?? input.value.length;
+  const before = input.value.slice(0, caret);
+  const head = roomBefore(before) + "@" + name + "  ";
+  input.value = head + input.value.slice(caret);
+  closeAttachMenu();
+  input.focus();
+  input.setSelectionRange(head.length, head.length);
+  paintMirror();
+}
+
+/**
+ * Two spaces on either side of a mention, not one.
+ *
+ * The chip's horizontal padding is taken out of the whitespace next to it,
+ * because the field decides where every glyph lands and the mirror cannot add
+ * width of its own. One space is four pixels: enough for the wash to clear
+ * the letters, not enough for the chip to read as an object with room around
+ * it. A second space gives four pixels of padding and four more between the
+ * chip and the next word; three between two chips, which each take four of
+ * them. The model sees the extra spaces, which it reads the same as one.
+ */
+function roomBefore(before) {
+  if (!before || /\n$/.test(before)) return before;
+  const bare = before.replace(/ +$/, "");
+  // Two chips in a row each take four pixels of the gap between them, so
+  // two spaces would leave them touching. A third keeps the same four pixels
+  // of daylight a chip has from a word.
+  const last = /@([^\s@]+)$/.exec(bare);
+  const afterChip = last && mentionNames().has(last[1]);
+  return bare + (afterChip ? "   " : "  ");
+}
+
+function insertMention(path) {
+  const caret = input.selectionStart;
+  const head = roomBefore(input.value.slice(0, mentionAt)) + "@" + path + "  ";
+  input.value = head + input.value.slice(caret);
+  paintMirror();
+  closeAttachMenu();
+  input.focus();
+  input.setSelectionRange(head.length, head.length);
+  // The trailing space closes the mention the next check would otherwise
+  // reopen, and the autosize handler needs the event either way.
+  input.dispatchEvent(new Event("input"));
+}
+
+input.addEventListener("input", () => {
+  const command = commandUnderCaret();
+  if (command) return void openCommands(command);
+  const mention = mentionUnderCaret();
+  if (mention) return void openMention(mention);
+  if (attachView === "mention" || attachView === "command") closeAttachMenu();
+});
+
+// Before the composer's own Enter handling, which would otherwise send the
+// message out from under a menu the user was choosing from.
+input.addEventListener("keydown", (e) => {
+  if (attachView !== "mention" || attachMenu.hidden) return;
+  if (e.key === "Escape") {
+    e.stopImmediatePropagation();
+    return void closeAttachMenu();
+  }
+  if (moveAttachCursor(e)) e.stopImmediatePropagation();
+});
+
+attachMenu.addEventListener("keydown", (e) => {
+  if (attachView === "mention") return;
+  if (e.key === "Escape") return void closeAttachMenu();
+  moveAttachCursor(e);
+});
+
+document.getElementById("attach").addEventListener("click", (e) => {
+  e.stopPropagation();
+  attachMenu.hidden ? openAttachMenu() : closeAttachMenu();
+});
+attachMenu.addEventListener("click", (e) => e.stopPropagation());
+document.addEventListener("click", closeAttachMenu);
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !attachMenu.hidden) closeAttachMenu();
+});
+
+
+// --- composer -------------------------------------------------------------
+
+document.getElementById("composer").addEventListener("submit", (e) => {
+  e.preventDefault();
+  const text = input.value.trim();
+  // A command runs instead of being sent. Unknown slash words fall through and
+  // are sent as prose, because /etc and and/or are things people write.
+  if (runCommand(text)) {
+    input.value = "";
+    autosize();
+    paintMirror();
+    closeAttachMenu();
+    return;
+  }
+  // A question waiting in this tab takes what is typed as its answer. People
+  // answer "none of these — I want..." in the composer, and a second turn could
+  // not start while this one waits anyway.
+  const waiting = openQuestion(activeId);
+  if (waiting && text && !staged.length) {
+    input.value = "";
+    autosize();
+    paintMirror();
+    void sendQuestion(waiting, { outcome: "dismissed", note: text });
+    return;
+  }
+  if (!text && !staged.length && !refs.length) {
+    // Send on an empty composer normally does nothing. With messages left
+    // waiting — the turn under them was stopped, or it failed — it is the
+    // release: the server does not restart a queue after either by itself.
+    const here = panes.get(activeId);
+    if (here && !here.busy && (here.queued || []).length) void api("/flush", { session: activeId });
+    return;
+  }
+  const ids = staged.map((file) => file.id);
+  const shots = staged
+    .filter((file) => file.preview)
+    .map((file) => ({ src: file.preview, name: file.name }));
+  if (shots.length) sentPreviews.set(activeId, shots);
+  const referenced = refs.map((ref) => ({ kind: ref.kind, value: ref.value }));
+  input.value = "";
+  autosize();
+  paintMirror();
+  staged = [];
+  refs = [];
+  renderAttachments();
+  // The counts, never the text, the file names or the paths.
+  track("prompt_sent", { attachments: ids.length, references: referenced.length });
+  void api("/prompt", {
+    session: activeId,
+    prompt: text,
+    attachments: ids,
+    references: referenced,
+  });
+});
+
+input.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    document.getElementById("composer").requestSubmit();
+  }
+});
+input.addEventListener("input", () => {
+  autosize();
+  paintMirror();
+  placeCaret();
+});
+
+// --- the field's height ---------------------------------------------------
+
+/**
+ * How tall the field is: grown to fit what is typed, or what it was dragged to.
+ *
+ * FIELD_MIN matches the CSS floor, so deleting a long paste cannot leave the
+ * box taller than an empty one. The ceilings are a share of the window rather
+ * than fixed numbers: the field must not swallow the conversation on a short
+ * screen. Growing on its own stops at a third of the window; a person dragging
+ * is allowed most of it, because they can see what they are giving up.
+ */
+const FIELD_MIN = 56;
+const fieldGrowMax = () => window.innerHeight * 0.32;
+const fieldDragMax = () => Math.max(FIELD_MIN, window.innerHeight * 0.7);
+const FIELD_KEY = "oharness.composerHeight";
+
+/** Set by dragging the grip; null means the field sizes itself. */
+let fieldHeight = null;
+try {
+  const saved = Number(localStorage.getItem(FIELD_KEY));
+  if (Number.isFinite(saved) && saved >= FIELD_MIN) fieldHeight = saved;
+} catch { /* private window, or storage turned off */ }
+
+function autosize() {
+  if (fieldHeight !== null) {
+    // A dragged height wins over the CSS ceiling, which is there to bound the
+    // field's own growing rather than to overrule the person.
+    input.style.maxHeight = "none";
+    input.style.height = Math.min(fieldHeight, fieldDragMax()) + "px";
+    return;
+  }
+  input.style.maxHeight = "";
+  // Reset first so the box can shrink as well as grow, then clamp.
+  input.style.height = "auto";
+  input.style.height = Math.min(Math.max(input.scrollHeight, FIELD_MIN), fieldGrowMax()) + "px";
+}
+
+function setFieldHeight(px) {
+  fieldHeight = px === null ? null : Math.round(Math.min(Math.max(px, FIELD_MIN), fieldDragMax()));
+  try {
+    if (fieldHeight === null) localStorage.removeItem(FIELD_KEY);
+    else localStorage.setItem(FIELD_KEY, String(fieldHeight));
+  } catch { /* nothing to do: the height still applies for this page */ }
+  autosize();
+}
+
+const grip = document.getElementById("grip");
+grip.addEventListener("pointerdown", (e) => {
+  // Only the primary button, and never a second drag inside the first.
+  if (e.button !== 0) return;
+  e.preventDefault();
+  const startY = e.clientY;
+  const startHeight = input.getBoundingClientRect().height;
+  // Capture is the nicety; the window listeners below are what make the drag
+  // work. The strip is twelve pixels tall, and a pointer moving faster than
+  // the box can follow leaves it within a frame.
+  try { grip.setPointerCapture(e.pointerId); } catch { /* no live pointer to capture */ }
+  grip.classList.add("dragging");
+  document.body.classList.add("resizing");
+
+  // Up is taller: the box grows from its top edge, which is the edge in hand.
+  const move = (ev) => setFieldHeight(startHeight + (startY - ev.clientY));
+  const done = () => {
+    window.removeEventListener("pointermove", move);
+    window.removeEventListener("pointerup", done);
+    window.removeEventListener("pointercancel", done);
+    grip.classList.remove("dragging");
+    document.body.classList.remove("resizing");
+  };
+  window.addEventListener("pointermove", move);
+  window.addEventListener("pointerup", done);
+  window.addEventListener("pointercancel", done);
+});
+// Back to sizing itself. A drag is easy to do by accident on a trackpad, and
+// without this the only way back is to guess the original height.
+grip.addEventListener("dblclick", () => setFieldHeight(null));
+// A dragged height is kept, but never past the ceiling of a window that has
+// since been made shorter.
+window.addEventListener("resize", () => autosize());
+autosize();
+
+// --- the mention chip under the text ------------------------------------
+
+
+stopBtn.addEventListener("click", () => void api("/interrupt", { session: activeId }));
+// Straight into a session, in the tree already open. Where it runs is asked on
+// the composer instead of on the way in: the project on screen is the answer
+// almost every time, and a dialog in front of every new session charges the
+// common case for the rare one.
+document.getElementById("new").addEventListener("click", () => void switchTo({ action: "new" }));
+/**
+ * The sidebar as a drawer, on a phone.
+ *
+ * Open from the burger, closed from the scrim, the mark in its own corner,
+ * Escape, or by choosing anything in it: a drawer that stayed over the
+ * transcript after a session was picked hid the very thing that was picked.
+ */
+const sidebar = document.querySelector("body > aside");
+function setNavOpen(open) {
+  sidebar.classList.toggle("open", open);
+  document.body.classList.toggle("nav-open", open);
+}
+function closeNav() {
+  if (sidebar.classList.contains("open")) setNavOpen(false);
+}
+document.getElementById("burger").addEventListener("click", () =>
+  setNavOpen(!sidebar.classList.contains("open")));
+document.getElementById("nav-close").addEventListener("click", () => setNavOpen(false));
+document.getElementById("scrim").addEventListener("click", () => setNavOpen(false));
+sidebar.addEventListener("click", (e) => {
+  if (!isPhone() || e.target.closest(".more")) return;
+  if (e.target.closest(".session, .nav-item, .project")) closeNav();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && sidebar.classList.contains("open")) closeNav();
+});
+document.getElementById("review-close").addEventListener("click", () =>
+  review.classList.remove("open"));
+
+// The keyboard takes the bottom of the screen and iOS does not shrink the
+// layout to match, so the composer would sit under it. The body follows the
+// visible viewport instead, on phones only.
+if (window.visualViewport) {
+  const followKeyboard = () => {
+    if (!isPhone()) {
+      document.body.style.height = "";
+      return;
+    }
+    document.body.style.height = Math.round(window.visualViewport.height) + "px";
+    window.scrollTo(0, 0);
+  };
+  window.visualViewport.addEventListener("resize", followKeyboard);
+  window.addEventListener("resize", followKeyboard);
+}
+
+`;
+//# sourceMappingURL=composer.js.map