@oharness/server 0.9.3 → 0.11.0

package/dist/page/client/composer.js

@@ -11,6 +11,7 @@ export const COMPOSER = String.raw `
 // stays small and a half-finished upload cannot start a turn.
 
 const attachEl = document.getElementById("attachments");
+const trayEl = document.getElementById("tray");
 const queuedEl = document.getElementById("queued");
 const fileInput = document.getElementById("file");
 const composerBox = document.getElementById("composer-box");
@@ -30,6 +31,158 @@ const sentPreviews = new Map();
  */
 let refs = [];
 const REF_ICON = { file: "file", folder: "folder", connector: "plug", plugin: "plugin", skill: "skill" };
+/**
+ * Whether the next message is sent as a goal.
+ *
+ * Switched on from the + menu or a bare /goal, and off again once a message
+ * goes: a goal is one objective, and every message after it staying a goal
+ * would replace the one being worked on.
+ */
+let goalMode = false;
+/**
+ * Whether the next message starts a new session in a new worktree beside the
+ * project, instead of going to this one. Off again once it is sent, like a
+ * goal: it describes one message, not the conversation.
+ */
+let worktreeMode = false;
+const inputPlaceholder = () =>
+  t(goalMode ? "goal.placeholder" : worktreeMode ? "worktree.placeholder" : "composer.placeholder");
+
+function setGoalMode(on) {
+  goalMode = on;
+  renderAttachments();
+}
+
+function setWorktreeMode(on) {
+  worktreeMode = on;
+  renderAttachments();
+}
+
+/**
+ * Make the worktree, open the session in it, and send it the message.
+ *
+ * The server does all three in one call so the first turn cannot start in the
+ * wrong tree; the page then moves to the new tab the way any switch does.
+ */
+async function startInWorktree(body) {
+  const state = await api("/worktree", body, 5 * 60_000);
+  if (!state || state.error) return void addNotice((state && state.error) || t("worktree.failed"), "notice err");
+  await openState(state);
+  await loadProjects();
+  const wt = state.worktree || {};
+  addNotice(
+    wt.branch
+      ? t("worktree.startedBranch", { name: projectName(wt.root || wt.path), branch: wt.branch })
+      : t("worktree.started", { name: projectName(wt.root || wt.path) }),
+  );
+}
+
+/**
+ * Computer use for the conversation on screen: off, or on with what the OS
+ * currently lets it do. Kept on the pane, from the server's state, because it
+ * belongs to the conversation rather than to the next message the way goal
+ * mode does.
+ */
+const computerHere = () => {
+  const here = panes.get(activeId);
+  return (here && here.computer) || null;
+};
+
+function setComputerUse(on) {
+  track("computer_use", { on });
+  void api("/computer-use", { session: activeId, on }).then((s) => {
+    if (s && s.error) return void addNotice(s.error, "notice err");
+    applyState(s);
+  });
+}
+
+/** While the permission card is up, look again every two seconds. */
+let computerPoll = null;
+function watchComputerGrants(missing) {
+  if (missing && !computerPoll) {
+    computerPoll = setInterval(() => void api("/computer-use/permissions", {}), 2000);
+  } else if (!missing && computerPoll) {
+    clearInterval(computerPoll);
+    computerPoll = null;
+  }
+}
+
+/**
+ * The macOS grants, asked for in place.
+ *
+ * Only on macOS and only for what is missing. Each row asks for one grant, so
+ * the system prompt that follows is about exactly the thing the row names.
+ */
+function computerPermissionCard(computer) {
+  const perms = computer.permissions;
+  const card = el("div", "att computer-perm");
+  const head = el("div", "cp-head");
+  head.appendChild(svgIcon("computer"));
+  // The app whose switch it is: OHarness, or Electron for a development run.
+  const grantee = computer.grantee || "OHarness";
+  head.appendChild(el("span", "cp-title", t("computer.permTitle", { app: grantee })));
+  card.appendChild(head);
+  card.appendChild(el("div", "cp-body", t(grantee === "OHarness" ? "computer.permBody" : "computer.permBodyDev", { app: grantee })));
+  for (const [grant, label] of [["screen", "computer.permScreen"], ["accessibility", "computer.permAx"]]) {
+    const row = el("div", "cp-row");
+    row.appendChild(el("span", "cp-label", t(label)));
+    if (perms[grant]) {
+      // A tick, not a word in green: done is the quiet state, and the row's
+      // own label already says what was allowed.
+      const ok = el("span", "cp-ok", "\u2713");
+      ok.title = t("computer.granted");
+      ok.setAttribute("aria-label", t("computer.granted"));
+      row.appendChild(ok);
+    } else {
+      const allow = el("button", "cp-btn", t("computer.allow"));
+      allow.type = "button";
+      allow.addEventListener("click", () => void api("/computer-use/permissions", { request: true, grant }));
+      row.appendChild(allow);
+    }
+    card.appendChild(row);
+  }
+  const foot = el("div", "cp-foot");
+  const again = el("button", "cp-link", t("computer.recheck"));
+  again.type = "button";
+  again.addEventListener("click", () => void api("/computer-use/permissions", {}));
+  foot.appendChild(again);
+  if (computer.relaunch) {
+    const relaunch = el("button", "cp-link", t("computer.relaunch"));
+    relaunch.type = "button";
+    relaunch.title = t("computer.relaunchHint");
+    relaunch.addEventListener("click", () => void api("/computer-use/relaunch", {}));
+    foot.appendChild(relaunch);
+  }
+  card.appendChild(foot);
+  return card;
+}
+
+/** The tab's permission mode, as its state last said. */
+function currentMode() {
+  const here = panes.get(activeId);
+  return (here && here.mode) || "default";
+}
+
+/**
+ * Into plan mode, and back to whatever it was before — not to Manual, which
+ * would quietly undo an Accept edits or Auto somebody had chosen.
+ */
+function togglePlanMode() {
+  const here = panes.get(activeId);
+  if (!here) return;
+  const leaving = currentMode() === "plan";
+  const next = leaving ? here.beforePlan || "default" : "plan";
+  if (!leaving) here.beforePlan = currentMode();
+  track("plan_mode", { on: !leaving });
+  void api("/mode", { session: activeId, mode: next }).then(applyState);
+}
+
+/** Send text as the session's goal: the first message, and the finish line. */
+function sendGoal(text) {
+  if (!text) return void addNotice(t("goal.needsText"), "notice err");
+  track("goal_set", {});
+  void api("/prompt", { session: activeId, prompt: text, attachments: [], references: [], goal: true }).then(pushNotice);
+}
 const refKey = (ref) => ref.kind + ":" + ref.value;
 
 /**
@@ -46,6 +199,22 @@ function renderQueued() {
   // tab is the one streaming.
   const here = panes.get(activeId);
   const waiting = (here && here.queued) || [];
+  // The goal being worked toward sits over the queue: it is the reason the
+  // turn below it keeps going, and the × is the way to let it stop.
+  if (here && here.goal) {
+    const row = el("div", "q goal");
+    row.appendChild(el("span", "tag", t("goal.tag")));
+    row.appendChild(el("span", "n", here.goal));
+    const stop = el("button", "x", "×");
+    stop.type = "button";
+    stop.title = t("goal.stop");
+    stop.addEventListener("click", () => void api("/goal", { session: activeId }).then(applyState));
+    row.appendChild(stop);
+    queuedEl.appendChild(row);
+  }
+  // Background tasks next: work this conversation set going, still part of
+  // what is happening around the message being written.
+  appendTaskRows(queuedEl, here);
   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
@@ -80,48 +249,222 @@ function renderQueued() {
 
 function renderAttachments() {
   attachEl.replaceChildren();
+  // What is staged decides whether the guess still fits, and the goal and
+  // worktree modes repaint through here with their own placeholder.
+  paintSuggestion();
+
+  if (goalMode) {
+    const chip = el("div", "att goal");
+    chip.appendChild(svgIcon("goal"));
+    chip.appendChild(el("span", "n", t("goal.chip")));
+    const drop = el("button", "x", "×");
+    drop.type = "button";
+    drop.title = t("add.remove");
+    drop.addEventListener("click", () => setGoalMode(false));
+    chip.appendChild(drop);
+    attachEl.appendChild(chip);
+  }
 
-  // References first: they were picked deliberately from the menu, while an
-  // upload is often a screenshot that was pasted without being thought about.
+  if (worktreeMode) {
+    const chip = el("div", "att goal");
+    chip.appendChild(svgIcon("worktree"));
+    chip.appendChild(el("span", "n", t("worktree.chip")));
+    const drop = el("button", "x", "×");
+    drop.type = "button";
+    drop.title = t("add.remove");
+    drop.addEventListener("click", () => setWorktreeMode(false));
+    chip.appendChild(drop);
+    attachEl.appendChild(chip);
+  }
+
+  // Computer use is a state of the conversation, so its chip stays until it is
+  // switched off, and says what is missing when the OS has not allowed it yet.
+  const computer = computerHere();
+  let missing = false;
+  if (computer && computer.on) {
+    const chip = el("div", "att computer");
+    chip.appendChild(svgIcon("computer"));
+    const label = el("span", "n", t("computer.chip"));
+    // The chip is also the way back to the live card once it was folded.
+    label.classList.add("clickable");
+    label.title = t("computer.showPane");
+    label.addEventListener("click", computerShow);
+    chip.appendChild(label);
+    const drop = el("button", "x", "×");
+    drop.type = "button";
+    drop.title = t("computer.off");
+    drop.addEventListener("click", () => setComputerUse(false));
+    chip.appendChild(drop);
+    attachEl.appendChild(chip);
+    const perms = computer.permissions;
+    missing = Boolean(computer.platform === "darwin" && perms && (!perms.screen || !perms.accessibility));
+    if (missing) attachEl.appendChild(computerPermissionCard(computer));
+    else if (computer.error) attachEl.appendChild(el("div", "att computer-perm cp-body", t("computer.unavailable", { error: computer.error })));
+  }
+  watchComputerGrants(missing);
+
+  // Capabilities named for this message — a connector, a plugin, a skill —
+  // stay in the box beside the goal and Computer use: they are how it is
+  // sent. What it carries goes in the tray above.
   for (const ref of refs) {
+    if (ref.kind === "file" || ref.kind === "folder") continue;
     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", () => {
+    chip.appendChild(dropButton(() => {
       refs = refs.filter((entry) => refKey(entry) !== refKey(ref));
       renderAttachments();
-    });
-    chip.appendChild(drop);
+    }));
     attachEl.appendChild(chip);
   }
+  renderTray();
+}
 
+/**
+ * What the message carries, above the box rather than in it.
+ *
+ * Inside, a screenshot was a 26px square beside its file name, and a row of
+ * them pushed the text being written down the box. Out here each is a card
+ * of its own: an image or a video as a picture of itself, a file or a folder
+ * as its name and where it is. Files and folders picked from the disk first —
+ * picked on purpose — then what was pasted or dropped.
+ */
+function renderTray() {
+  trayEl.replaceChildren();
+  for (const ref of refs) {
+    if (ref.kind !== "file" && ref.kind !== "folder") continue;
+    const media = ref.kind === "file" ? mediaKindOf(ref.value) : "";
+    const cwd = P && P.cwd;
+    // Inside the project the file browser serves it; outside, only a file
+    // picked in the dialog can be shown, from the server's list of those.
+    const outside = /^(\/|[A-Za-z]:[\\/])/.test(ref.value);
+    const src = !media ? "" : outside
+      ? q("/pick/preview?path=" + encodeURIComponent(ref.value))
+      : cwd ? q("/files/raw?cwd=" + encodeURIComponent(cwd) + "&path=" + encodeURIComponent(ref.value)) : "";
+    trayEl.appendChild(trayCard({
+      media: src ? media : "",
+      src,
+      icon: REF_ICON[ref.kind],
+      name: ref.label,
+      sub: ref.sub || "",
+      remove: () => {
+        refs = refs.filter((entry) => refKey(entry) !== refKey(ref));
+        renderAttachments();
+      },
+    }));
+  }
   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();
+    const media = file.preview ? file.previewKind || "image" : "";
+    trayEl.appendChild(trayCard({
+      media,
+      src: file.preview || "",
+      icon: "file",
+      name: file.name,
+      sub: formatBytes(file.bytes),
+      remove: () => {
+        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();
+      },
+    }));
+  }
+}
+
+/** An image or a video can be shown as itself; anything else is a name. */
+function mediaKindOf(name) {
+  const ext = (String(name).split(".").pop() || "").toLowerCase();
+  if (["png", "jpg", "jpeg", "gif", "webp", "avif"].includes(ext)) return "image";
+  if (["mp4", "webm", "mov", "m4v"].includes(ext)) return "video";
+  return "";
+}
+
+function formatBytes(bytes) {
+  if (!bytes && bytes !== 0) return "";
+  if (bytes < 1024 * 1024) return Math.max(1, Math.round(bytes / 1024)) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+function dropButton(onDrop) {
+  const drop = el("button", "x", "×");
+  drop.type = "button";
+  drop.title = t("add.remove");
+  drop.setAttribute("aria-label", t("add.remove"));
+  drop.addEventListener("click", (e) => {
+    e.stopPropagation();
+    onDrop();
+  });
+  return drop;
+}
+
+/**
+ * One card in the tray. A picture is the card — click it for the full size,
+ * the same preview the conversation uses — and a video plays muted on hover,
+ * so which clip it is can be told without opening it. A file is its icon, its
+ * name and a line under it.
+ */
+function trayCard({ media, src, icon, name, sub, remove }) {
+  const card = el("div", "tray-card" + (media === "image" ? " tray-media image" : media === "video" ? " video" : ""));
+  card.title = name;
+  if (media === "image") {
+    const img = document.createElement("img");
+    img.src = src;
+    img.alt = name;
+    img.addEventListener("click", () => previewImage(img));
+    // A preview that will not load is a file card, not a broken picture.
+    img.addEventListener("error", () => card.replaceWith(trayCard({ media: "", src: "", icon, name, sub, remove })));
+    card.appendChild(img);
+  } else if (media === "video") {
+    // A clip keeps its name and size beside it: one frame of a video says
+    // less about which file it is than a photo does.
+    const thumb = el("span", "tray-thumb");
+    const video = document.createElement("video");
+    video.src = src;
+    video.muted = true;
+    video.preload = "metadata";
+    video.playsInline = true;
+    video.loop = true;
+    // The first frame rather than black, which is what a clip shows before it plays.
+    video.addEventListener("loadedmetadata", () => {
+      try {
+        video.currentTime = Math.min(0.1, video.duration || 0);
+      } catch {
+        // Not seekable: its poster frame is whatever it shows.
+      }
+      if (Number.isFinite(video.duration) && video.duration > 0) {
+        const s = Math.round(video.duration);
+        duration.textContent = Math.floor(s / 60) + ":" + String(s % 60).padStart(2, "0");
+      }
     });
-    chip.appendChild(remove);
-    attachEl.appendChild(chip);
+    card.addEventListener("mouseenter", () => void video.play().catch(() => {}));
+    card.addEventListener("mouseleave", () => video.pause());
+    video.addEventListener("error", () => card.replaceWith(trayCard({ media: "", src: "", icon, name, sub, remove })));
+    thumb.appendChild(video);
+    const play = el("span", "tray-play");
+    play.innerHTML = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5.5 3.8v8.4L12 8z" fill="currentColor"/></svg>';
+    thumb.appendChild(play);
+    card.appendChild(thumb);
+    const text = el("span", "tray-text");
+    text.appendChild(el("span", "tray-name", name));
+    const line = el("span", "tray-sub");
+    const duration = el("span", "tray-duration");
+    line.append(duration, document.createTextNode(sub ? (sub) : ""));
+    text.appendChild(line);
+    card.appendChild(text);
+  } else {
+    const mark = el("span", "tray-icon");
+    mark.appendChild(svgIcon(icon));
+    card.appendChild(mark);
+    const text = el("span", "tray-text");
+    text.appendChild(el("span", "tray-name", name));
+    if (sub) text.appendChild(el("span", "tray-sub", sub));
+    card.appendChild(text);
   }
+  card.appendChild(dropButton(remove));
+  return card;
 }
 
 async function upload(file) {
@@ -135,6 +478,10 @@ async function upload(file) {
 
   // A local preview rather than a round trip: the bytes are already here.
   if (body.kind === "image") body.preview = URL.createObjectURL(file);
+  else if ((file.type || "").startsWith("video/")) {
+    body.preview = URL.createObjectURL(file);
+    body.previewKind = "video";
+  }
   staged.push(body);
   renderAttachments();
 }
@@ -207,7 +554,7 @@ 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: [] };
+let offer = { connectors: [], plugins: [], skills: [], agents: [] };
 /** 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. */
@@ -384,6 +731,25 @@ function attachRows() {
         note: plugin.description || "",
         ref: { kind: "plugin", value: plugin.name, label: plugin.name },
       }));
+    /**
+     * External agents first: naming one at the start of a message hands the
+     * whole message to it — Claude Code on the user's own account — so it is
+     * the one mention that changes who answers, and worth seeing before the
+     * rest. Offered only while the @ opens the message, the one place it
+     * routes; mid-sentence it would only be a word.
+     */
+    const atStart = mentionAt >= 0 && !input.value.slice(0, mentionAt).trim();
+    const agents = atStart
+      ? (offer.agents || [])
+          .filter((agent) => !query || agent.name.toLowerCase().includes(query))
+          .map((agent) => ({
+            type: "agent",
+            icon: "command",
+            label: "@" + agent.name,
+            note: t("mention.agentNote"),
+            ref: { kind: "agent", value: agent.name, label: agent.name },
+          }))
+      : [];
     const files = (fileList.entries || []).map((entry) => ({
       type: entry.dir ? "folder" : "file",
       icon: entry.dir ? "folder" : "file",
@@ -400,6 +766,7 @@ function attachRows() {
      * label on a list of one kind, which is noise.
      */
     const sections = [
+      [t("mention.agents"), agents],
       [t("add.skills"), skills],
       [t("add.plugins"), plugins],
       [t("mention.files"), files],
@@ -414,16 +781,35 @@ function attachRows() {
   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") },
+    // What goes with the message: from this machine, first. Two rows for
+    // files and folders, 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: "group", label: t("add.sectionAttach") },
+    { type: "pick", kind: "files", icon: "attach", 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: "group", label: t("add.sectionMode") },
+    // The permission mode of the same name, from the place people look for a
+    // way of working. The picker by the send button still holds all five.
+    { type: "plan", icon: "modePlan", label: t("add.planMode"), on: currentMode() === "plan" },
+    // How the agent works on it: a way of sending, and a capability of the
+    // conversation, rather than things sent.
+    { type: "goal", icon: "goal", label: t("add.goal"), on: goalMode },
+    // Where it happens: a tree of its own beside this one, for work that
+    // should not touch what is being edited here.
+    { type: "worktree", icon: "worktree", label: t("add.worktree"), on: worktreeMode },
+    // Only where there is a computer to use: the desktop app, whose server
+    // reports the feature in the conversation's state.
+    ...(IS_DESKTOP && computerHere()
+      ? [{ type: "computer", icon: "computer", label: t("add.computerUse"), on: Boolean(computerHere().on) }]
+      : []),
+    { type: "group", label: t("add.sectionReach") },
+    // What it can reach, each a list of its own. 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",
@@ -448,21 +834,29 @@ function attachRows() {
       sub: skills ? String(skills) : "",
       into: true,
     },
-    { type: "upload", icon: "upload", label: t("add.upload") },
   ];
 }
 
+/** Headings and dividers: in the list, but not something to pick. */
+function notChoice(row) {
+  return row.type === "group" || row.type === "sep";
+}
+
 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) {
+  while (rows[attachCursor] && notChoice(rows[attachCursor]) && attachCursor < rows.length - 1) {
     attachCursor++;
   }
   attachBody.replaceChildren();
 
   rows.forEach((row, i) => {
+    if (row.type === "sep") {
+      attachBody.appendChild(el("div", "menu-sep"));
+      return;
+    }
     if (row.type === "group") {
       attachBody.appendChild(el("div", "menu-head", row.label));
       return;
@@ -473,7 +867,7 @@ function paintAttachMenu() {
     }
     const item = el(
       "div",
-      "menu-item" + (row.ref && referenced(row.ref) ? " on" : "") + (i === attachCursor ? " cursor" : ""),
+      "menu-item" + ((row.ref && referenced(row.ref)) || row.on ? " on" : "") + (i === attachCursor ? " cursor" : ""),
     );
     item.setAttribute("role", "button");
     item.appendChild(row.mark ? connectorMark(row.mark, row.label) : svgIcon(row.icon));
@@ -491,7 +885,7 @@ function paintAttachMenu() {
     // 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.ref && referenced(row.ref)) || row.on) 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.
@@ -510,7 +904,7 @@ function paintAttachMenu() {
   });
 
   // One line saying why a screen is empty, rather than an empty screen.
-  const listed = rows.filter((row) => row.type !== "up").length;
+  const listed = rows.filter((row) => row.type !== "up" && row.type !== "sep").length;
   if (attachView === "connectors" && !listed) {
     attachBody.appendChild(el("div", "menu-hint", t("add.noConnectors")));
   } else if (attachView === "plugins" && !listed) {
@@ -524,7 +918,7 @@ function paintAttachMenu() {
 }
 
 function chooseAttachRow(row) {
-  if (row.type === "hint") return;
+  if (row.type === "hint" || notChoice(row)) return;
   if (row.type === "up") return void showAttachView("root");
   if (row.type === "into") return void showAttachView(row.kind);
   if (row.type === "offer-ref") {
@@ -549,11 +943,27 @@ function chooseAttachRow(row) {
     closeAttachMenu();
     return void openMarket(row.kind);
   }
-  if (row.type === "upload") {
+  if (row.type === "command") return void pickCommand(row.command);
+  if (row.type === "goal") {
     closeAttachMenu();
-    return void fileInput.click();
+    setGoalMode(!goalMode);
+    return void input.focus();
+  }
+  if (row.type === "worktree") {
+    closeAttachMenu();
+    setWorktreeMode(!worktreeMode);
+    return void input.focus();
+  }
+  if (row.type === "plan") {
+    closeAttachMenu();
+    togglePlanMode();
+    return void input.focus();
+  }
+  if (row.type === "computer") {
+    closeAttachMenu();
+    setComputerUse(!row.on);
+    return void input.focus();
   }
-  if (row.type === "command") return void insertCommand(row.command);
   if (attachView === "mention" && row.ref) {
     return void insertMention(row.ref.value);
   }
@@ -579,7 +989,14 @@ async function pickFromDisk(kind) {
   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");
+  // No dialog on this machine (a browser on another device, a desktop with no
+  // picker): the browser's own file chooser, which carries the bytes. It was a
+  // row of its own, "Upload from computer", beside this one — two rows for
+  // one thing, told apart only by what happened afterwards.
+  if (picked.unavailable || picked.error) {
+    if (kind === "folder") return void addNotice(t("add.noDialog"), "err");
+    return void fileInput.click();
+  }
 
   if (kind === "folder") {
     // Relative when it is inside the project, which is shorter to read and is
@@ -618,11 +1035,12 @@ async function pickFromDisk(kind) {
  * something the server had already forgotten.
  */
 async function withPreview(file) {
-  if (file.kind !== "image") return file;
+  const video = String(file.mediaType || "").startsWith("video/");
+  if (file.kind !== "image" && !video) 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()) };
+    return { ...file, preview: URL.createObjectURL(await response.blob()), ...(video ? { previewKind: "video" } : {}) };
   } catch {
     // A chip without a thumbnail is still a chip; nothing here is worth a
     // notice the person cannot act on.
@@ -929,7 +1347,7 @@ async function installConnector(id, remove) {
     addNotice(body.error, "err");
     return void paintMarket();
   }
-  if (body.connectors) offer = { connectors: body.connectors, plugins: body.plugins || [], skills: body.skills || [] };
+  if (body.connectors) offer = { connectors: body.connectors, plugins: body.plugins || [], skills: body.skills || [], agents: body.agents || [] };
   for (const entry of market) if (entry.id === id) entry.installed = remove !== true;
   paintMarket();
 }
@@ -1057,7 +1475,7 @@ function moveAttachCursor(e) {
     let next = attachCursor;
     for (let i = 0; i < rows.length; i++) {
       next = (next + step + rows.length) % rows.length;
-      if (rows[next].type !== "group") break;
+      if (!notChoice(rows[next])) break;
     }
     attachCursor = next;
     paintAttachMenu();
@@ -1137,6 +1555,14 @@ input.addEventListener("keydown", (e) => {
  * what a reader is checking when they glance at it.
  */
 function paintMirror() {
+  paintMarks();
+  // Every caller has just rewritten the text, and a rewrite from code — the
+  // box emptied on send, a command inserted — fires no input event, so the
+  // drawn caret would stay where the old text put it.
+  placeCaret();
+}
+
+function paintMarks() {
   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
@@ -1144,7 +1570,10 @@ function paintMirror() {
   ensureOffer();
   const names = mentionNames();
   inputMirror.replaceChildren();
-  if (!names.size) return void (inputMirror.textContent = input.value);
+  if (!names.size) {
+    inputMirror.textContent = input.value;
+    return void paintGhost();
+  }
 
   const text = input.value;
   let at = 0;
@@ -1165,6 +1594,7 @@ function paintMirror() {
   }
   inputMirror.appendChild(document.createTextNode(text.slice(at)));
   if (inputMirror.querySelector("mark")) inputMirror.style.setProperty("--at-w", atWidth() + "px");
+  paintGhost();
 }
 
 // --- the caret ------------------------------------------------------------
@@ -1227,7 +1657,10 @@ for (const event of ["input", "focus", "blur", "scroll"]) {
   input.addEventListener(event, placeCaret);
 }
 document.addEventListener("selectionchange", () => {
-  if (document.activeElement === input) placeCaret();
+  if (document.activeElement !== input) return;
+  placeCaret();
+  // The rest of a guess is only offered from the end of the text.
+  paintGhost();
 });
 window.addEventListener("resize", placeCaret);
 
@@ -1310,6 +1743,24 @@ const COMMANDS = [
       return void api("/routine", { name: arg }).then(pushNotice);
     },
   },
+  {
+    name: "goal",
+    arg: "goal",
+    hint: () => t("cmd.goal"),
+    run: (arg) => {
+      // Bare, it switches the composer into goal mode for the next message;
+      // "clear" lets go of the one being worked toward.
+      if (!arg) return void setGoalMode(true);
+      if (/^(clear|off|stop)$/i.test(arg)) return void api("/goal", { session: activeId }).then(applyState);
+      sendGoal(arg);
+    },
+  },
+  {
+    name: "compact",
+    arg: "",
+    hint: () => t("cmd.compact"),
+    run: () => compactConversation(),
+  },
   {
     name: "new",
     arg: "",
@@ -1318,6 +1769,18 @@ const COMMANDS = [
   },
 ];
 
+/** /compact, and the context panel's button: summarize the conversation now. */
+function compactConversation() {
+  addNotice(t("cmd.compacting"), "notice");
+  // A summary is a model call over the whole conversation, well past the
+  // half-minute a settings toggle is given.
+  api("/compact", { session: activeId }, 180000).then((body) => {
+    if (body && body.error) return addNotice(body.error, "notice err");
+    // A compaction posts its own notice; only the nothing-to-do case needs one.
+    if (body && body.compacted === false) addNotice(t("cmd.nothingToCompact"), "notice");
+  });
+}
+
 function pushNotice(body) {
   if (body && body.error) addNotice(body.error, "notice err");
 }
@@ -1346,6 +1809,23 @@ function openCommands(command) {
   paintAttachMenu();
 }
 
+/**
+ * A command chosen from the menu.
+ *
+ * One that takes nothing runs at once: inserting "/new " only to need a second
+ * Enter is a step that decides nothing. One that takes an argument is written
+ * into the box, ready for it.
+ */
+function pickCommand(name) {
+  const command = COMMANDS.find((one) => one.name === name);
+  if (!command || command.arg) return void insertCommand(name);
+  input.value = "";
+  autosize();
+  paintMirror();
+  closeAttachMenu();
+  command.run("");
+}
+
 /** Insert the command, with the space its argument starts after. */
 function insertCommand(name) {
   const rest = input.value.slice(input.selectionStart);
@@ -1463,7 +1943,12 @@ input.addEventListener("input", () => {
 // 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 ((attachView !== "mention" && attachView !== "command") || attachMenu.hidden) return;
+  // A slash word no command starts with is prose — /etc, and/or — so with
+  // nothing to pick, Enter goes on to send it rather than choosing nothing.
+  if (attachView === "command" && (e.key === "Enter" || e.key === "Tab") && !attachRows().length) {
+    return void closeAttachMenu();
+  }
   if (e.key === "Escape") {
     e.stopImmediatePropagation();
     return void closeAttachMenu();
@@ -1524,23 +2009,43 @@ document.getElementById("composer").addEventListener("submit", (e) => {
   const ids = staged.map((file) => file.id);
   const shots = staged
     .filter((file) => file.preview)
-    .map((file) => ({ src: file.preview, name: file.name }));
+    .map((file) => ({ src: file.preview, name: file.name, kind: file.previewKind || "image" }));
   if (shots.length) sentPreviews.set(activeId, shots);
   const referenced = refs.map((ref) => ({ kind: ref.kind, value: ref.value }));
+  const asGoal = goalMode;
+  const asWorktree = worktreeMode;
+  if (asGoal && !text) return void addNotice(t("goal.needsText"), "notice err");
+  if (asWorktree && !text) return void addNotice(t("worktree.placeholder"), "notice err");
   input.value = "";
   autosize();
   paintMirror();
   staged = [];
   refs = [];
+  if (asGoal) setGoalMode(false);
+  if (asWorktree) setWorktreeMode(false);
   renderAttachments();
   // The counts, never the text, the file names or the paths.
-  track("prompt_sent", { attachments: ids.length, references: referenced.length });
+  track("prompt_sent", { attachments: ids.length, references: referenced.length, goal: asGoal, worktree: asWorktree });
+  if (asWorktree) {
+    // From the project the tab on screen is in, named after the first line.
+    const here = panes.get(activeId);
+    const task = text.split("\n")[0].trim().slice(0, 80);
+    return void startInWorktree({
+      ...(here && here.cwd ? { cwd: here.cwd } : {}),
+      task,
+      prompt: text,
+      attachments: ids,
+      references: referenced,
+      ...(asGoal ? { goal: true } : {}),
+    });
+  }
   void api("/prompt", {
     session: activeId,
     prompt: text,
     attachments: ids,
     references: referenced,
-  });
+    ...(asGoal ? { goal: true } : {}),
+  }).then(pushNotice);
 });
 
 input.addEventListener("keydown", (e) => {
@@ -1552,7 +2057,82 @@ input.addEventListener("keydown", (e) => {
 input.addEventListener("input", () => {
   autosize();
   paintMirror();
-  placeCaret();
+  paintSuggestion();
+});
+
+// --- the next-message guess -----------------------------------------------
+
+/**
+ * The server's guess at what this conversation's user types next, drawn as
+ * the empty box's placeholder and taken whole with Tab.
+ *
+ * Held per pane, so a guess written for a background tab waits there rather
+ * than showing on the one on screen. Shown only where it can be acted on: an
+ * idle conversation, nothing typed, and no goal or worktree mode, whose own
+ * placeholder says what the next message will be sent as.
+ */
+function suggestionNow() {
+  const here = panes.get(activeId);
+  if (!here || here.busy || staged.length || refs.length || goalMode || worktreeMode) return "";
+  return here.suggestion || "";
+}
+
+/** The whole guess, while the box is empty. */
+function suggestionHere() {
+  return input.value ? "" : suggestionNow();
+}
+
+/**
+ * What is left of the guess once some of it has been typed: the text so far
+ * has to be its start, letter for letter, and the caret at the end with
+ * nothing selected — anywhere else, Tab finishing a sentence the caret is not
+ * at would put words somewhere the user is not looking.
+ */
+function ghostTail() {
+  const typed = input.value;
+  const guess = suggestionNow();
+  if (!typed || !guess || guess.length <= typed.length || !guess.startsWith(typed)) return "";
+  if (input.selectionStart !== typed.length || input.selectionEnd !== typed.length) return "";
+  return guess.slice(typed.length);
+}
+
+/**
+ * Draw the rest of the guess after the text, on the mirror under the field.
+ * The mirror lays out exactly as the field does, so the tail starts where the
+ * last typed glyph ends.
+ */
+function paintGhost() {
+  if (!inputMirror) return;
+  const old = inputMirror.querySelector(".ghost");
+  if (old) old.remove();
+  const tail = ghostTail();
+  if (tail) inputMirror.appendChild(el("span", "ghost", tail));
+}
+
+function paintSuggestion() {
+  const guess = suggestionHere();
+  input.placeholder = guess || inputPlaceholder();
+  input.classList.toggle("suggesting", !!guess);
+  paintGhost();
+}
+
+input.addEventListener("keydown", (e) => {
+  if ((e.key !== "Tab" && e.key !== "Escape") || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey || e.isComposing) return;
+  const tail = ghostTail();
+  const guess = tail ? input.value + tail : suggestionHere();
+  if (!guess) return;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  if (e.key === "Escape") {
+    panes.get(activeId).suggestion = null;
+    paintGhost();
+    return void paintSuggestion();
+  }
+  input.value = guess;
+  input.setSelectionRange(guess.length, guess.length);
+  autosize();
+  paintMirror();
+  paintSuggestion();
 });
 
 // --- the field's height ---------------------------------------------------
@@ -1722,5 +2302,168 @@ if (window.visualViewport) {
   window.addEventListener("resize", followKeyboard);
 }
 
+// ── Dictation ────────────────────────────────────────────────────────────
+// The mic records in the browser (MediaRecorder), the server turns it into
+// text (POST /voice/transcribe: the account's gateway, or the user's own
+// OpenAI key), and the words go into the box at the end of what is there.
+// Then POST /voice/tidy cleans them up — on a paid plan, or with the user's
+// own small model — and swaps the clean version in, unless the box was
+// touched meanwhile. Five minutes at most.
+//
+// What is going on shows in a panel floating above the box by the mic:
+// listening (the voice as bars, the time, cancel and done), working
+// (transcribing, tidying), or what went wrong. Esc cancels, Enter finishes.
+const micBtn = document.getElementById("mic");
+const pop = document.getElementById("dictate-pop");
+const popText = pop.querySelector(".dp-text");
+const popTime = pop.querySelector(".dp-time");
+const popWave = pop.querySelector(".dp-wave");
+let dictation = null;
+let popTimer = 0;
+
+function dictateShow(state, text) {
+  clearTimeout(popTimer);
+  if (!state) { pop.hidden = true; pop.removeAttribute("data-state"); return; }
+  pop.dataset.state = state;
+  popText.textContent = text || "";
+  pop.hidden = false;
+  if (state === "error") popTimer = setTimeout(() => dictateShow(""), 8000);
+}
+
+/** The voice, as bars: an analyser on the microphone, drawn every frame. */
+function drawWave(session) {
+  const ctx = popWave.getContext("2d");
+  const ratio = window.devicePixelRatio || 1;
+  popWave.width = 168 * ratio; popWave.height = 32 * ratio;
+  const bins = new Uint8Array(session.analyser.fftSize);
+  const bars = 28;
+  const history = new Array(bars).fill(0);
+  const color = getComputedStyle(popWave).color;
+  const frame = () => {
+    if (dictation !== session) return;
+    session.analyser.getByteTimeDomainData(bins);
+    let peak = 0;
+    for (const value of bins) peak = Math.max(peak, Math.abs(value - 128) / 128);
+    history.shift(); history.push(Math.min(1, peak * 2.4));
+    ctx.clearRect(0, 0, popWave.width, popWave.height);
+    ctx.fillStyle = color;
+    const step = popWave.width / bars, width = Math.max(2 * ratio, step * 0.45);
+    history.forEach((level, index) => {
+      const height = Math.max(3 * ratio, level * popWave.height);
+      ctx.globalAlpha = 0.35 + 0.65 * (index / bars);
+      ctx.fillRect(index * step + (step - width) / 2, (popWave.height - height) / 2, width, height);
+    });
+    session.frame = requestAnimationFrame(frame);
+  };
+  frame();
+}
+
+async function startDictation() {
+  // The first time, macOS asks before the browser answers, and the mic would
+  // sit there looking dead until someone clicks Allow: say so meanwhile.
+  dictateShow("working", t("dictate.opening"));
+  micBtn.disabled = true;
+  let stream;
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  } catch {
+    micBtn.disabled = false;
+    return dictateShow("error", t("dictate.denied"));
+  }
+  micBtn.disabled = false;
+  const mimeType = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4", "audio/ogg;codecs=opus"]
+    .find((type) => MediaRecorder.isTypeSupported(type));
+  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+  const chunks = [];
+  recorder.ondataavailable = (event) => { if (event.data.size) chunks.push(event.data); };
+  const audio = new AudioContext();
+  const analyser = audio.createAnalyser();
+  analyser.fftSize = 512;
+  audio.createMediaStreamSource(stream).connect(analyser);
+  const session = { recorder, stream, chunks, audio, analyser, startedAt: Date.now(), timer: 0, frame: 0, cancelled: false };
+  recorder.onstop = () => finishDictation(session);
+  dictation = session;
+  recorder.start(1000);
+  micBtn.classList.add("is-recording");
+  micBtn.setAttribute("aria-pressed", "true");
+  micBtn.title = t("composer.dictateStop");
+  dictateShow("listening", t("dictate.listening"));
+  const tick = () => {
+    const seconds = Math.floor((Date.now() - session.startedAt) / 1000);
+    popTime.textContent = Math.floor(seconds / 60) + ":" + String(seconds % 60).padStart(2, "0");
+    if (seconds >= 300) stopDictation(false);
+  };
+  tick();
+  session.timer = setInterval(tick, 500);
+  drawWave(session);
+}
+
+/** Done (keep what was said) or cancelled (throw it away). */
+function stopDictation(cancel) {
+  const session = dictation;
+  if (!session) return;
+  dictation = null;
+  session.cancelled = cancel;
+  clearInterval(session.timer);
+  cancelAnimationFrame(session.frame);
+  if (session.recorder.state !== "inactive") session.recorder.stop();
+  session.stream.getTracks().forEach((track) => track.stop());
+  session.audio.close().catch(() => {});
+  micBtn.classList.remove("is-recording");
+  micBtn.setAttribute("aria-pressed", "false");
+  micBtn.title = t("composer.dictate");
+  if (cancel) dictateShow("");
+}
+
+async function finishDictation(session) {
+  if (session.cancelled) return;
+  const duration = (Date.now() - session.startedAt) / 1000;
+  const blob = new Blob(session.chunks, { type: session.recorder.mimeType || "audio/webm" });
+  if (duration < 0.6 || !blob.size) return dictateShow("");
+  const format = /mp4/.test(blob.type) ? "m4a" : /ogg/.test(blob.type) ? "ogg" : "webm";
+  const audio = await new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).replace(/^data:[^,]*,/, ""));
+    reader.readAsDataURL(blob);
+  });
+  micBtn.disabled = true;
+  dictateShow("working", t("dictate.transcribing"));
+  const heard = await api("/voice/transcribe", { audio, format, duration, language: navigator.language || "" }, 90_000);
+  micBtn.disabled = false;
+  const words = heard && typeof heard.text === "string" ? heard.text.trim() : "";
+  if (!words) {
+    if (heard && heard.code === "sign_in_required") return dictateShow("error", t("dictate.signIn"));
+    return heard && heard.error ? dictateShow("error", t("dictate.failed", { error: heard.error })) : dictateShow("");
+  }
+  const before = input.value;
+  const lead = before && !/\s$/.test(before) ? " " : "";
+  const placed = before + lead + words;
+  input.value = placed;
+  input.dispatchEvent(new Event("input"));
+  input.focus();
+  input.setSelectionRange(placed.length, placed.length);
+  dictateShow("working", t("dictate.tidying"));
+  const tidy = await api("/voice/tidy", { text: words, language: navigator.language || "" }, 20_000);
+  dictateShow("");
+  if (tidy && tidy.tidied === true && typeof tidy.text === "string" && input.value === placed) {
+    input.value = before + lead + tidy.text;
+    input.dispatchEvent(new Event("input"));
+    input.setSelectionRange(input.value.length, input.value.length);
+  }
+}
+
+if (micBtn) {
+  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia || !window.MediaRecorder) micBtn.hidden = true;
+  micBtn.addEventListener("click", () => (dictation ? stopDictation(false) : startDictation()));
+  pop.querySelector(".dp-cancel").addEventListener("click", () => stopDictation(true));
+  pop.querySelector(".dp-done").addEventListener("click", () => stopDictation(false));
+  pop.querySelector(".dp-close").addEventListener("click", () => dictateShow(""));
+  // While listening, the keyboard ends it: Esc throws it away, Enter keeps it.
+  document.addEventListener("keydown", (event) => {
+    if (!dictation) return;
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); stopDictation(true); }
+    else if (event.key === "Enter" && !event.shiftKey && !event.isComposing) { event.preventDefault(); event.stopPropagation(); stopDictation(false); }
+  }, true);
+}
 `;
 //# sourceMappingURL=composer.js.map