@oharness/server 0.9.3 → 0.10.0

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

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

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

@@ -0,0 +1,27 @@
+/**
+ * The Computer card: the window the agent is working in, live, floating over
+ * the conversation with the agent's cursor on it.
+ *
+ * Computer use works in the background, in windows behind the one the person
+ * is using or on another Space. The cursor overlay on screen can only point at
+ * what is visible, so without this the work is invisible.
+ *
+ * A card rather than a column. It used to be a side pane, and a pane that
+ * takes a third of the window the moment the agent touches an app is one
+ * people close — after which nothing showed the work at all. The card sits in
+ * the corner of the conversation while a turn is working in a window, can be
+ * enlarged, dragged, or folded to a pill, and goes when the turn ends: the
+ * picture of where it ended is under the reply by then (see turnShots).
+ *
+ * The picture is a live capture of that one window, straight from Chromium
+ * (the desktop app's getUserMedia on a window source), not screenshots from
+ * the computer tools: each of those replaces the snapshot the agent's element
+ * references belong to, so polling them would keep invalidating the agent's
+ * work. It uses the Screen Recording grant OHarness already has.
+ *
+ * Presentation only. Nothing here is model input, and the card never drives
+ * the window; the person's own mouse does that.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export declare const COMPUTER: string;

package/dist/page/client/computer.js

@@ -0,0 +1,358 @@
+/**
+ * The Computer card: the window the agent is working in, live, floating over
+ * the conversation with the agent's cursor on it.
+ *
+ * Computer use works in the background, in windows behind the one the person
+ * is using or on another Space. The cursor overlay on screen can only point at
+ * what is visible, so without this the work is invisible.
+ *
+ * A card rather than a column. It used to be a side pane, and a pane that
+ * takes a third of the window the moment the agent touches an app is one
+ * people close — after which nothing showed the work at all. The card sits in
+ * the corner of the conversation while a turn is working in a window, can be
+ * enlarged, dragged, or folded to a pill, and goes when the turn ends: the
+ * picture of where it ended is under the reply by then (see turnShots).
+ *
+ * The picture is a live capture of that one window, straight from Chromium
+ * (the desktop app's getUserMedia on a window source), not screenshots from
+ * the computer tools: each of those replaces the snapshot the agent's element
+ * references belong to, so polling them would keep invalidating the agent's
+ * work. It uses the Screen Recording grant OHarness already has.
+ *
+ * Presentation only. Nothing here is model input, and the card never drives
+ * the window; the person's own mouse does that.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const COMPUTER = String.raw `
+const computerFloat = document.getElementById("computer-float");
+const computerBody = document.getElementById("computer-body");
+const computerWhere = document.getElementById("computer-where");
+const computerLive = document.getElementById("computer-live");
+const computerStopBtn = document.getElementById("computer-stop");
+const computerGrowBtn = document.getElementById("computer-grow");
+const computerHideBtn = document.getElementById("computer-hide");
+const computerPill = document.getElementById("computer-pill");
+const computerPillWhere = document.getElementById("computer-pill-where");
+
+/**
+ * Per conversation: its last action, whether its turn is working in a window
+ * right now, and whether the person folded the card to a pill for it.
+ */
+const computerViews = new Map();
+let computerStream = null;
+let computerStreamWindow = "";
+let computerVideo = null;
+let computerCursor = null;
+let computerEmpty = null;
+let computerLiveTimer = null;
+
+function computerView(id) {
+  let view = computerViews.get(id);
+  if (!view) {
+    view = { event: null, live: false, folded: false };
+    computerViews.set(id, view);
+  }
+  return view;
+}
+
+function computerIsOpen() {
+  return !computerFloat.hidden;
+}
+
+/**
+ * Show the active conversation's card, its pill, or neither.
+ *
+ * The card is for a turn that is working in a window now. Folded, it is a
+ * pill that says where, one click from the card again. Anything else — no
+ * window yet, the turn over, another conversation — and both are gone.
+ */
+function computerSync() {
+  const view = activeId && computerViews.get(activeId);
+  const hasWindow = Boolean(view && view.event && view.event.window);
+  const show = Boolean(IS_DESKTOP && !IS_EMBED && view && view.live && hasWindow);
+  const card = show && !view.folded;
+  computerFloat.hidden = !card;
+  computerPill.hidden = !(show && view.folded);
+  if (card) computerPaint();
+  else computerStopStream();
+  if (show) computerPillWhere.textContent = computerWhereText(view.event);
+}
+
+function computerWhereText(event) {
+  return (event.app || "") + (event.title ? " — " + event.title : "");
+}
+
+function computerStopStream() {
+  if (computerStream) for (const track of computerStream.getTracks()) track.stop();
+  computerStream = null;
+  computerStreamWindow = "";
+  if (computerVideo) computerVideo.srcObject = null;
+}
+
+function computerEnsureBody() {
+  if (computerVideo) return;
+  computerVideo = el("video", "computer-video");
+  computerVideo.muted = true;
+  computerVideo.autoplay = true;
+  computerVideo.playsInline = true;
+  computerCursor = el("div", "computer-cursor");
+  computerCursor.innerHTML = '<svg viewBox="0 0 22 22" aria-hidden="true"><path d="M3 2l15 7-6.5 2L9 18z"/></svg>';
+  computerEmpty = el("div", "computer-empty");
+  computerBody.replaceChildren(computerVideo, computerCursor, computerEmpty);
+  computerVideo.addEventListener("loadedmetadata", () => {
+    // The card takes the window's own shape, so there are no bands beside a
+    // tall window or above a wide one.
+    if (computerVideo.videoWidth && computerVideo.videoHeight) {
+      computerBody.style.aspectRatio = computerVideo.videoWidth + " / " + computerVideo.videoHeight;
+    }
+    computerPlaceCursor();
+  });
+  new ResizeObserver(() => computerPlaceCursor()).observe(computerBody);
+}
+
+/**
+ * Capture one window as a video. Electron takes the same source ids its
+ * desktopCapturer lists, and a window's is its native id: the CGWindowID on
+ * macOS and the HWND on Windows, which is what the computer tools report.
+ */
+async function computerAttach(windowId) {
+  if (computerStreamWindow === windowId && computerStream) return;
+  computerStopStream();
+  computerStreamWindow = windowId;
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: "desktop",
+          chromeMediaSourceId: "window:" + windowId + ":0",
+          maxWidth: 1600,
+          maxHeight: 1200,
+          maxFrameRate: 12,
+        },
+      },
+    });
+    // The agent moved to another window, or the card went, while this one was being opened.
+    if (computerStreamWindow !== windowId || !computerIsOpen()) {
+      for (const track of stream.getTracks()) track.stop();
+      return;
+    }
+    computerStream = stream;
+    computerVideo.srcObject = stream;
+    computerEmpty.textContent = "";
+    computerEmpty.hidden = true;
+    // A closed or minimised window ends its track; say so instead of freezing.
+    for (const track of stream.getVideoTracks()) {
+      track.addEventListener("ended", () => {
+        if (computerStreamWindow !== windowId) return;
+        computerStream = null;
+        computerStreamWindow = "";
+        computerShowEmpty(t("computer.windowGone"));
+      });
+    }
+  } catch (err) {
+    computerStream = null;
+    computerShowEmpty(t("computer.noStream"));
+  }
+}
+
+function computerShowEmpty(text) {
+  computerEnsureBody();
+  computerEmpty.textContent = text;
+  computerEmpty.hidden = false;
+  computerCursor.classList.remove("on");
+}
+
+/**
+ * Put the agent's cursor where it acted, on the picture.
+ *
+ * The event carries a screen point and where the window was on screen; the
+ * video is that window, drawn letterboxed inside the card. Two proportions
+ * and an offset, and no need to know the display's scale on either side.
+ */
+function computerPlaceCursor(ripple) {
+  const view = activeId && computerViews.get(activeId);
+  const event = view && view.event;
+  if (!computerVideo || !event || !event.windowFrame || !computerVideo.videoWidth) {
+    if (computerCursor) computerCursor.classList.remove("on");
+    return;
+  }
+  const point = event.point || (event.frame ? { x: event.frame.x + event.frame.w / 2, y: event.frame.y + event.frame.h / 2 } : null);
+  if (!point) return void computerCursor.classList.remove("on");
+  const wf = event.windowFrame;
+  const box = computerBody.getBoundingClientRect();
+  const scale = Math.min(box.width / computerVideo.videoWidth, box.height / computerVideo.videoHeight);
+  const drawnW = computerVideo.videoWidth * scale;
+  const drawnH = computerVideo.videoHeight * scale;
+  const left = (box.width - drawnW) / 2 + ((point.x - wf.x) / wf.w) * drawnW;
+  const top = (box.height - drawnH) / 2 + ((point.y - wf.y) / wf.h) * drawnH;
+  computerCursor.style.transform = "translate(" + left + "px," + top + "px)";
+  computerCursor.classList.add("on");
+  if (ripple) {
+    const ring = el("div", "computer-ring");
+    ring.style.left = left + "px";
+    ring.style.top = top + "px";
+    computerBody.appendChild(ring);
+    setTimeout(() => ring.remove(), 600);
+  }
+}
+
+function computerPaint() {
+  computerEnsureBody();
+  const view = activeId && computerViews.get(activeId);
+  const event = view && view.event;
+  if (!event || !event.window) return void computerShowEmpty("");
+  computerWhere.textContent = computerWhereText(event);
+  computerWhere.title = computerWhere.textContent;
+  void computerAttach(event.window);
+  computerPlaceCursor(false);
+}
+
+/**
+ * One action by one conversation.
+ *
+ * The first action in a window brings the card up; the end of the turn (idle)
+ * or the person stopping it (release) takes it away. Taking control is a
+ * banner on screen, not a change of window, so it moves nothing here.
+ */
+function computerEvent(session, event) {
+  const view = computerView(session);
+  if (event.kind === "idle" || event.kind === "release") {
+    view.live = false;
+    if (session === activeId) computerSync();
+    return;
+  }
+  if (event.kind === "control") return;
+  const previous = view.event;
+  view.event = { ...event, window: event.window || (previous && previous.window), windowFrame: event.windowFrame || (previous && previous.windowFrame), title: event.title || (event.window && previous && previous.window === event.window ? previous.title : undefined) };
+  view.live = true;
+  if (session !== activeId) return;
+  computerSync();
+  if (!computerIsOpen()) return;
+  computerPlaceCursor(event.kind === "click" || event.kind === "type" || event.kind === "key");
+  computerLive.hidden = false;
+  if (computerLiveTimer) clearTimeout(computerLiveTimer);
+  computerLiveTimer = setTimeout(() => { computerLive.hidden = true; }, 6000);
+}
+
+/** Follow the active tab: its card if its turn is working in a window, else nothing. */
+async function computerActivateSession() {
+  if (!activeId) return computerSync();
+  const view = computerView(activeId);
+  if (!view.event) {
+    const answer = await getJson("/computer-use/view?session=" + encodeURIComponent(activeId)).catch(() => null);
+    // The last thing it did, as the server kept it: a turn still working in a
+    // window was left mid-action, one that finished was left idle.
+    if (answer && answer.event) {
+      view.event = answer.event;
+      view.live = answer.event.kind !== "idle" && answer.event.kind !== "release";
+    }
+  }
+  computerSync();
+}
+
+/** From the composer's Computer use chip: the card again, if a turn is working in a window. */
+function computerShow() {
+  if (!activeId) return;
+  computerView(activeId).folded = false;
+  computerSync();
+}
+
+// --- the card's own controls ------------------------------------------------
+
+computerStopBtn.addEventListener("click", () => {
+  if (!activeId) return;
+  track("computer_stop", {});
+  void api("/computer-use/stop", { session: activeId });
+});
+
+// Fold to the pill, for this conversation. The pill brings it back.
+computerHideBtn.addEventListener("click", () => {
+  if (!activeId) return;
+  computerView(activeId).folded = true;
+  computerSync();
+});
+computerPill.addEventListener("click", computerShow);
+
+// Larger, for reading the window rather than glancing at it; the same button
+// brings it back to the corner.
+computerGrowBtn.addEventListener("click", () => {
+  const big = computerFloat.classList.toggle("big");
+  computerGrowBtn.setAttribute("aria-pressed", String(big));
+  computerKeepInside();
+  computerPlaceCursor(false);
+});
+
+/**
+ * Dragged from anywhere on it — it is all picture now, with no bar to hold —
+ * over the conversation, and remembered for the next time it comes up, in
+ * this browser only, which is where a corner that suits this screen belongs.
+ * Double-clicking it puts it back.
+ */
+const COMPUTER_SPOT_KEY = "oh.computerSpot";
+function computerKeepInside() {
+  const area = computerFloat.parentElement.getBoundingClientRect();
+  const box = computerFloat.getBoundingClientRect();
+  if (!computerFloat.style.left) return;
+  const left = Math.max(8, Math.min(parseFloat(computerFloat.style.left), area.width - box.width - 8));
+  const top = Math.max(8, Math.min(parseFloat(computerFloat.style.top), area.height - box.height - 8));
+  computerFloat.style.left = left + "px";
+  computerFloat.style.top = top + "px";
+}
+function computerPlace(spot) {
+  if (spot && typeof spot.left === "number" && typeof spot.top === "number") {
+    computerFloat.style.left = spot.left + "px";
+    computerFloat.style.top = spot.top + "px";
+    computerFloat.style.right = "auto";
+  } else {
+    computerFloat.style.left = "";
+    computerFloat.style.top = "";
+    computerFloat.style.right = "";
+  }
+}
+try {
+  computerPlace(JSON.parse(localStorage.getItem(COMPUTER_SPOT_KEY) || "null"));
+} catch {
+  // No storage here: it starts in the corner.
+}
+computerFloat.addEventListener("pointerdown", (event) => {
+  if (event.button !== 0 || event.target.closest("button")) return;
+  const area = computerFloat.parentElement.getBoundingClientRect();
+  const box = computerFloat.getBoundingClientRect();
+  const dx = event.clientX - box.left;
+  const dy = event.clientY - box.top;
+  computerFloat.setPointerCapture(event.pointerId);
+  computerFloat.classList.add("dragging");
+  const move = (e) => {
+    const left = Math.max(8, Math.min(e.clientX - area.left - dx, area.width - box.width - 8));
+    const top = Math.max(8, Math.min(e.clientY - area.top - dy, area.height - box.height - 8));
+    computerPlace({ left, top });
+  };
+  const up = () => {
+    computerFloat.removeEventListener("pointermove", move);
+    computerFloat.removeEventListener("pointerup", up);
+    computerFloat.classList.remove("dragging");
+    try {
+      localStorage.setItem(COMPUTER_SPOT_KEY, JSON.stringify({ left: parseFloat(computerFloat.style.left), top: parseFloat(computerFloat.style.top) }));
+    } catch {
+      // Remembering is a convenience.
+    }
+  };
+  computerFloat.addEventListener("pointermove", move);
+  computerFloat.addEventListener("pointerup", up);
+});
+computerFloat.addEventListener("dblclick", (event) => {
+  if (event.target.closest("button")) return;
+  computerPlace(null);
+  try {
+    localStorage.removeItem(COMPUTER_SPOT_KEY);
+  } catch {
+    // Nothing was kept.
+  }
+});
+window.addEventListener("resize", () => {
+  if (computerIsOpen()) computerKeepInside();
+});
+`;
+//# sourceMappingURL=computer.js.map

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

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

package/dist/page/client/dialogs.js

@@ -180,7 +180,10 @@ function paintAskHead(view, request) {
   // Which rule made the harness ask belongs with the other metadata, and in
   // the page's own language rather than the engine's English sentence.
   const rule = request.rule ? t("ask.rule", { rule: request.rule }) : request.reason;
-  meta.textContent = view.meta.concat(rule ? [rule] : []).filter(Boolean).join(" · ");
+  // A subagent's card is shown in the conversation that started it; this is
+  // what says the call is the subagent's and not that conversation's own.
+  const from = request.from ? [t("ask.from", { from: request.from })] : [];
+  meta.textContent = from.concat(view.meta, rule ? [rule] : []).filter(Boolean).join(" · ");
   meta.hidden = meta.textContent === "";
 }
 
@@ -235,7 +238,29 @@ function renderAskBody() {
   askMore.hidden = askExpand.hidden && askRaw.hidden;
 }
 
+/**
+ * Close events still owed for closes this page made itself.
+ *
+ * A dialog's close event arrives after close() — and not at all while the
+ * page is hidden, which is exactly when a background task's card tends to
+ * come in. So a close made here does its own clean-up at once and moves on to
+ * the next card, and its event, whenever it comes, is only counted off: taken
+ * for a dismissal it would refuse whichever card is up by then.
+ */
+let askOwnCloses = 0;
+/** Answered here; a replay of one from a reconnecting stream is not asked again. */
+const askAnswered = new Set();
+
+function closeAsk() {
+  if (!ask.open) return;
+  askOwnCloses++;
+  ask.close();
+  askState = null;
+  setTimeout(nextAsk, 0);
+}
+
 function showAsk(event) {
+  if (!event.id || askAnswered.has(event.id)) return;
   if (pendingId === event.id || askQueue.some((queued) => queued.id === event.id)) return;
   if (pendingId) return void askQueue.push(event);
   pendingId = event.id;
@@ -258,7 +283,13 @@ function showAsk(event) {
   // The palette is a convenience; this is a turn waiting on an answer. Two
   // stacked modals would leave the deeper one unreachable behind the newer.
   if (paletteDialog.open) paletteDialog.close();
-  if (!ask.open) ask.showModal();
+  // A dialog closed a moment ago may not be ready to open again; one more try
+  // shortly after rather than a card that never appears.
+  try {
+    if (!ask.open) ask.showModal();
+  } catch {
+    setTimeout(() => { if (!ask.open && pendingId) ask.showModal(); }, 50);
+  }
   ask.querySelector('[data-answer="once"]').focus();
 }
 
@@ -273,7 +304,7 @@ function withdrawAsk(id) {
   if (queued >= 0) askQueue.splice(queued, 1);
   if (pendingId !== id) return;
   pendingId = null;
-  ask.close();
+  closeAsk();
 }
 
 askExpand.addEventListener("click", () => {
@@ -286,9 +317,18 @@ askRaw.addEventListener("click", () => {
   renderAskBody();
 });
 
+// Escape: a dismissal is a refusal, decided at the key rather than when the
+// close event gets round to it. Approval has to be an explicit act.
+ask.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  if (pendingId) answer(false, null);
+  closeAsk();
+});
+
 ask.addEventListener("close", () => {
-  // Escape, the backdrop, anything other than a button: a dismissal is a
-  // refusal. Approval has to be an explicit act.
+  // One this page made: already dealt with in closeAsk.
+  if (askOwnCloses > 0) return void askOwnCloses--;
+  // Closed some other way: still a refusal.
   if (pendingId) answer(false, null);
   askState = null;
   // After the close has finished: showModal on a dialog still closing throws.
@@ -308,7 +348,7 @@ for (const button of ask.querySelectorAll("[data-answer]")) {
   button.addEventListener("click", () => {
     const choice = button.dataset.answer;
     answer(choice !== "no", choice === "session" || choice === "project" ? choice : null);
-    ask.close();
+    closeAsk();
   });
 
   // What a scope actually costs, spelled out before it is chosen rather than
@@ -331,6 +371,7 @@ function answer(allow, remember) {
   const id = pendingId;
   pendingId = null;
   if (!id) return;
+  askAnswered.add(id);
   // Which way the answer went and how far it was remembered — never what was
   // being asked about, which is a command line or a path.
   track("permission_answered", { allow: allow, remember: remember || "once" });
@@ -720,5 +761,51 @@ function questionSettled(entry) {
   return nodes;
 }
 
+
+/**
+ * A phone asking to drive this machine (remote.ts). Built on demand rather
+ * than declared in the page: most windows never see one. Both screens show
+ * the same six digits; the person compares them before allowing.
+ */
+const pairDialogs = new Map();
+
+function showPairing(event) {
+  if (pairDialogs.has(event.id)) return;
+  const dialog = el("dialog", "pair-dialog");
+  dialog.appendChild(el("div", "pair-title", t("remote.pair.title", { name: event.device && event.device.name || "" })));
+  dialog.appendChild(el("div", "pair-body", t("remote.pair.body")));
+  const code = String(event.code || "");
+  dialog.appendChild(el("div", "pair-code mono", code.slice(0, 3) + " " + code.slice(3)));
+  const actions = el("div", "dlg-actions");
+  const deny = el("button", "quiet", t("remote.pair.deny"));
+  const allow = el("button", "approve", t("remote.pair.allow"));
+  deny.type = allow.type = "button";
+  const answer = (value) => {
+    deny.disabled = allow.disabled = true;
+    void api("/remote/pair", { id: event.id, allow: value }).then(() => closePairing(event.id));
+  };
+  deny.onclick = () => answer(false);
+  allow.onclick = () => answer(true);
+  // Escape is a no, never a silent dismissal that leaves the phone waiting.
+  dialog.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    answer(false);
+  });
+  actions.append(deny, allow);
+  dialog.appendChild(actions);
+  document.body.appendChild(dialog);
+  pairDialogs.set(event.id, dialog);
+  dialog.showModal();
+  deny.focus();
+}
+
+function closePairing(id) {
+  const dialog = pairDialogs.get(id);
+  if (!dialog) return;
+  pairDialogs.delete(id);
+  if (dialog.open) dialog.close();
+  dialog.remove();
+}
+
 `;
 //# sourceMappingURL=dialogs.js.map

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

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