@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/browser.js

@@ -0,0 +1,904 @@
+/**
+ * The browser pane: what the agent's browser is looking at, live, and a way to
+ * take the mouse off it.
+ *
+ * A column beside the transcript, not a panel over it. Watching what the model
+ * does is only useful next to what it is saying, and the layout already had the
+ * shape for that — the diff pane is a sibling of the main column and slides in
+ * the same way, so this is built the same way rather than inventing a second
+ * kind of side surface.
+ *
+ * The picture is an img pointed at an MJPEG stream, so the browser decodes the
+ * frames and this file never touches one. The element is created once and kept:
+ * the pane closes by collapsing to zero width, which leaves the stream running
+ * rather than tearing it down and reconnecting on the next toggle.
+ *
+ * Taking over sends the same input events the tools send, through the same
+ * call, so a person and the model reach the page identically.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const BROWSER = String.raw `
+const browserPane = document.getElementById("browser-pane");
+const browserBody = document.getElementById("browser-body");
+const browserWhere = document.getElementById("browser-where");
+const browserStatus = document.getElementById("browser-status");
+const browserHint = document.getElementById("browser-hint");
+const browserTabs = document.getElementById("browser-tabs");
+const browserResizer = document.getElementById("browser-resizer");
+const browserReloadBtn = document.getElementById("browser-reload");
+const browserStopBtn = document.getElementById("browser-stop");
+const browserTakeoverBtn = document.getElementById("browser-takeover");
+const browserTakeoverLabel = browserTakeoverBtn.querySelector("span");
+const browserImportBtn = document.getElementById("browser-import");
+const browserTitle = document.getElementById("browser-title");
+const browserExt = document.getElementById("browser-ext");
+const browserExtGet = document.getElementById("browser-ext-get");
+/**
+ * Whether the pane, once open, is the whole window rather than a column beside
+ * the conversation — the stylesheet's breakpoint. There it only ever opens
+ * because someone asked: opening itself would take the conversation away.
+ */
+const BROWSER_NARROW = window.matchMedia("(max-width:900px)");
+/** Which browsers the active conversation may use, from its last state. */
+let browserPolicy = null;
+let browserExtConnected = true;
+let browserExtPoll = null;
+const BROWSER_EXT_HIDDEN = "oharness.browserExtHidden";
+const browserSuggest = document.getElementById("browser-suggest");
+const browserSuggestText = document.getElementById("browser-suggest-text");
+let browserSuggestion = null;
+let browserFrame = null;
+let browserStatePoll = null;
+let browserTakeover = false;
+let browserViewport = null;
+let browserCurrentUrl = "";
+let browserActiveTabId = "";
+let browserStreamRetry = null;
+const BROWSER_STREAM_QUALITY = 85;
+const browserNativeBridge = window.oharness && window.oharness.browser;
+let browserNativeSurface = null;
+const BROWSER_WIDTH_KEY = "oharness.browserPaneWidth";
+const BROWSER_WIDTH_MIN = 320;
+const BROWSER_MAIN_MIN = 360;
+let browserPaneWidth = null;
+let browserResizing = false;
+
+try {
+  const saved = Number(localStorage.getItem(BROWSER_WIDTH_KEY));
+  if (Number.isFinite(saved) && saved >= BROWSER_WIDTH_MIN) browserPaneWidth = saved;
+} catch { /* the width can still work for this page without persistence */ }
+
+function browserWidthLimits() {
+  const split = document.getElementById("split").getBoundingClientRect().width;
+  const review = document.getElementById("review").getBoundingClientRect().width;
+  const max = Math.max(BROWSER_WIDTH_MIN, split - review - BROWSER_MAIN_MIN);
+  return { min: Math.min(BROWSER_WIDTH_MIN, max), max };
+}
+
+function browserSetPaneWidth(px, persist) {
+  const limits = browserWidthLimits();
+  browserPaneWidth = Math.round(Math.min(Math.max(px, limits.min), limits.max));
+  browserPane.style.setProperty("--browser-pane-width", browserPaneWidth + "px");
+  if (!persist) return;
+  try { localStorage.setItem(BROWSER_WIDTH_KEY, String(browserPaneWidth)); } catch { /* keep the live width */ }
+}
+
+function browserRestorePaneWidth() {
+  if (browserPaneWidth !== null && window.innerWidth > 900) browserSetPaneWidth(browserPaneWidth, false);
+}
+
+browserRestorePaneWidth();
+browserResizer.addEventListener("pointerdown", (event) => {
+  if (event.button !== 0 || window.innerWidth <= 900) return;
+  event.preventDefault();
+  const startX = event.clientX;
+  const startWidth = browserPane.getBoundingClientRect().width;
+  try { browserResizer.setPointerCapture(event.pointerId); } catch { /* window listeners keep the drag alive */ }
+  document.body.classList.add("browser-resizing");
+  // A native page takes the mouse the moment the pointer crosses it, pointer
+  // capture or not, and the drag would stop there. Put it away until release.
+  browserResizing = true;
+  browserPresentNative(null, null);
+
+  const move = (next) => browserSetPaneWidth(startWidth + startX - next.clientX, false);
+  const done = () => {
+    window.removeEventListener("pointermove", move);
+    window.removeEventListener("pointerup", done);
+    window.removeEventListener("pointercancel", done);
+    document.body.classList.remove("browser-resizing");
+    if (browserPaneWidth !== null) browserSetPaneWidth(browserPaneWidth, true);
+    browserResizing = false;
+    if (browserNativeSurface) browserPresentNative(activeId, browserNativeSurface);
+  };
+  window.addEventListener("pointermove", move);
+  window.addEventListener("pointerup", done);
+  window.addEventListener("pointercancel", done);
+});
+browserResizer.addEventListener("dblclick", () => {
+  browserPaneWidth = null;
+  browserPane.style.removeProperty("--browser-pane-width");
+  try { localStorage.removeItem(BROWSER_WIDTH_KEY); } catch { /* default still applies */ }
+});
+browserResizer.addEventListener("keydown", (event) => {
+  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+  event.preventDefault();
+  const current = browserPane.getBoundingClientRect().width;
+  browserSetPaneWidth(current + (event.key === "ArrowLeft" ? 16 : -16), true);
+});
+window.addEventListener("resize", browserRestorePaneWidth);
+
+function browserPresentNative(session, surface) {
+  if (!browserNativeBridge) return;
+  // A WebContentsView is a native sibling above the renderer, so no CSS
+  // z-index can put a DOM modal over it. Detach for every modal and restore
+  // after its open attribute goes away.
+  if (!session || !surface || browserResizing || !browserPane.classList.contains("open") || document.querySelector("dialog[open]")) {
+    browserNativeBridge.present(null, null);
+    return;
+  }
+  const rect = surface.getBoundingClientRect();
+  // The resize handle is a DOM strip on the pane's left edge; the native view
+  // sits above all DOM, so it has to stop short of the handle to leave it
+  // grabbable.
+  const inset = Math.max(0, browserResizer.getBoundingClientRect().right - rect.left);
+  browserNativeBridge.present(session, {
+    x: rect.left + inset, y: rect.top, width: Math.max(1, rect.width - inset), height: rect.height,
+  });
+}
+
+const browserNativeObserver = browserNativeBridge ? new ResizeObserver(() => {
+  if (browserNativeSurface) browserPresentNative(activeId, browserNativeSurface);
+}) : null;
+const browserDialogObserver = browserNativeBridge ? new MutationObserver(() => {
+  if (browserNativeSurface) browserPresentNative(activeId, browserNativeSurface);
+}) : null;
+if (browserDialogObserver) {
+  for (const dialog of document.querySelectorAll("dialog")) {
+    browserDialogObserver.observe(dialog, { attributes: true, attributeFilter: ["open"] });
+  }
+}
+
+function browserStreamUrl(id) {
+  return q("/browser/stream?session=" + encodeURIComponent(id || "") + "&quality=" + BROWSER_STREAM_QUALITY);
+}
+const browserViews = new Map();
+
+function browserView(id) {
+  let view = browserViews.get(id);
+  if (!view) {
+    view = { open: false, running: false };
+    browserViews.set(id, view);
+  }
+  return view;
+}
+
+/** The session-owned restore button drawn in each conversation tab. */
+function browserTabButton(id) {
+  const button = el("button", "tab-browser");
+  button.type = "button";
+  button.title = t("browser.open");
+  button.setAttribute("aria-label", t("browser.open"));
+  button.classList.toggle("on", id === activeId && browserPane.classList.contains("open"));
+  button.classList.toggle("running", Boolean(browserViews.get(id)?.running));
+  button.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1.75" y="2.5" width="12.5" height="11" rx="2"/><path d="M1.75 6h12.5"/><circle cx="4.25" cy="4.25" r=".55" fill="currentColor" stroke="none"/></svg><i></i>';
+  button.addEventListener("click", async (event) => {
+    event.stopPropagation();
+    if (id !== activeId) await focusTab(id);
+    const open = !browserPane.classList.contains("open");
+    track("panel_opened", { panel: "session-browser" });
+    browserOpen(open);
+  });
+  return button;
+}
+
+/**
+ * Where a point in the drawn image lands in the page's own coordinates.
+ *
+ * Two conversions, not one. The first is the obvious one, from however large
+ * the pane happens to draw the picture to the picture's own pixels. The second
+ * is the one that is easy to miss: Chrome scales a screencast frame down, so
+ * those pixels are not the page's either. Skipping it puts every click a
+ * consistent fraction short of where it was aimed, which looks like a flaky
+ * browser rather than a unit error.
+ */
+function browserPoint(event) {
+  const rect = browserFrame.getBoundingClientRect();
+  if (!rect.width || !rect.height) return { x: 0, y: 0 };
+  // Straight from where it was clicked in the drawn rectangle to the same
+  // fraction of the page. The frame's own pixel size is deliberately not in
+  // this: it is a scaled copy of the page rather than the page, and it reads
+  // as zero for an instant while a new part of the stream arrives — which
+  // would put a click at the origin, or nowhere at all.
+  const width = (browserViewport && browserViewport.width) || browserFrame.naturalWidth || rect.width;
+  const height = (browserViewport && browserViewport.height) || browserFrame.naturalHeight || rect.height;
+  return {
+    x: Math.round(((event.clientX - rect.left) / rect.width) * width),
+    y: Math.round(((event.clientY - rect.top) / rect.height) * height),
+  };
+}
+
+function browserModifiers(event) {
+  return (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0) | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
+}
+
+async function browserSend(event) {
+  if (!activeId) return;
+  await fetch(q("/browser/input"), {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ session: activeId, event }),
+  }).catch(() => {});
+}
+
+/**
+ * Hand the pane the keyboard as well as the mouse.
+ *
+ * On the document rather than the image, because an image cannot hold focus,
+ * and removed the moment takeover ends: a listener left behind would quietly
+ * steal typing from the composer.
+ */
+function browserKeyHandler(event) {
+  if (!browserTakeover) return;
+  if (event.key === "Escape") return void browserSetTakeover(false);
+  event.preventDefault();
+  const modifiers = browserModifiers(event);
+  if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+    void browserSend({ type: "text", text: event.key });
+    return;
+  }
+  void browserSend({ type: "key", action: "down", key: event.key, code: event.code, modifiers });
+  void browserSend({ type: "key", action: "up", key: event.key, code: event.code, modifiers });
+}
+
+function browserSetTakeover(on) {
+  browserTakeover = on && Boolean(browserFrame);
+  browserTakeoverBtn.classList.toggle("on", browserTakeover);
+  browserTakeoverBtn.setAttribute("aria-pressed", String(browserTakeover));
+  browserTakeoverLabel.textContent = t(browserTakeover ? "browser.release" : "browser.takeover");
+  browserHint.hidden = !browserTakeover;
+  browserPane.classList.toggle("live", browserTakeover);
+  if (browserTakeover) document.addEventListener("keydown", browserKeyHandler);
+  else document.removeEventListener("keydown", browserKeyHandler);
+}
+
+/** Build the image once; later state changes only swap what the body shows. */
+function browserEnsureFrame() {
+  if (browserFrame) return browserFrame;
+  const img = el("img");
+  img.id = "browser-frame";
+  img.alt = t("nav.browser");
+  img.draggable = false;
+  img.addEventListener("error", () => {
+    if (browserStreamRetry || !activeId || !browserPane.classList.contains("open")) return;
+    browserStreamRetry = setTimeout(() => {
+      browserStreamRetry = null;
+      if (!browserFrame || !browserView(activeId).running) return;
+      browserFrame.src = browserStreamUrl(activeId) + "&retry=" + Date.now();
+    }, 500);
+  });
+  img.addEventListener("mousedown", (event) => {
+    if (!browserTakeover) return;
+    event.preventDefault();
+    const point = browserPoint(event);
+    const button = event.button === 2 ? "right" : event.button === 1 ? "middle" : "left";
+    const modifiers = browserModifiers(event);
+    void browserSend({ type: "mouse", action: "move", x: point.x, y: point.y, modifiers });
+    void browserSend({ type: "mouse", action: "down", x: point.x, y: point.y, button, clickCount: event.detail || 1, modifiers });
+  });
+  img.addEventListener("mouseup", (event) => {
+    if (!browserTakeover) return;
+    event.preventDefault();
+    const point = browserPoint(event);
+    const button = event.button === 2 ? "right" : event.button === 1 ? "middle" : "left";
+    void browserSend({ type: "mouse", action: "up", x: point.x, y: point.y, button, clickCount: event.detail || 1, modifiers: browserModifiers(event) });
+  });
+  img.addEventListener("contextmenu", (event) => { if (browserTakeover) event.preventDefault(); });
+  img.addEventListener("wheel", (event) => {
+    if (!browserTakeover) return;
+    event.preventDefault();
+    const point = browserPoint(event);
+    void browserSend({ type: "mouse", action: "wheel", x: point.x, y: point.y, deltaX: -event.deltaX, deltaY: -event.deltaY, modifiers: browserModifiers(event) });
+  }, { passive: false });
+  browserFrame = img;
+  return img;
+}
+
+function browserShowIdle() {
+  browserPresentNative(null, null);
+  browserNativeObserver?.disconnect();
+  browserNativeSurface = null;
+  browserSetTakeover(false);
+  if (browserFrame) { browserFrame.src = ""; browserFrame = null; }
+  browserViewport = null;
+  browserTakeoverBtn.hidden = true;
+  browserReloadBtn.disabled = true;
+  browserStopBtn.disabled = true;
+  browserStatus.hidden = true;
+  browserHint.hidden = true;
+  browserCurrentUrl = "";
+  browserActiveTabId = "";
+  browserTabs.hidden = true;
+  browserTabs.replaceChildren();
+  if (document.activeElement !== browserWhere) browserWhere.value = "";
+  const idle = el("div", "browser-idle");
+  idle.appendChild(el("p", "muted", t("browser.idle")));
+  idle.appendChild(el("p", "muted small", t("browser.idleHow")));
+  browserBody.replaceChildren(idle);
+}
+
+function browserTabLabel(tab, index) {
+  if (tab.title) return tab.title;
+  try {
+    const parsed = new URL(tab.url);
+    return parsed.hostname || parsed.href;
+  } catch {
+    return tab.url || "Tab " + (index + 1);
+  }
+}
+
+function browserPaintPageTabs(tabs) {
+  const list = Array.isArray(tabs) ? tabs : [];
+  browserTabs.hidden = list.length === 0;
+  browserTabs.replaceChildren(...list.map((tab, index) => {
+    const item = el("div", "browser-page-tab" + (tab.active ? " active" : ""));
+    item.dataset.id = tab.id;
+    item.setAttribute("role", "tab");
+    item.setAttribute("aria-selected", String(Boolean(tab.active)));
+
+    const select = el("button", "browser-page-tab-select");
+    select.type = "button";
+    select.title = tab.title ? tab.title + "\n" + tab.url : tab.url;
+    select.appendChild(el("i"));
+    select.appendChild(el("span", "", browserTabLabel(tab, index)));
+    select.addEventListener("click", () => void browserSelectTab(tab.id));
+
+    const close = el("button", "browser-page-tab-close");
+    close.type = "button";
+    // A tab the person had open before the agent was pointed at it is only let
+    // go of, never closed, so its button says that instead.
+    const closeLabel = t(tab.mine === false ? "browser.releaseTab" : "browser.closeTab");
+    close.title = closeLabel;
+    close.setAttribute("aria-label", closeLabel);
+    close.textContent = "×";
+    close.addEventListener("click", () => void browserCloseTab(tab.id));
+    item.append(select, close);
+    return item;
+  }));
+  const active = browserTabs.querySelector(".browser-page-tab.active");
+  if (active && active.dataset.id !== browserTabs.dataset.shown) {
+    browserTabs.dataset.shown = active.dataset.id;
+    browserTabsReveal();
+  }
+  browserTabsEdges();
+}
+
+/** Scroll the active tab clear of the edge fades, touching nothing if it already is. */
+function browserTabsReveal() {
+  const active = browserTabs.querySelector(".browser-page-tab.active");
+  if (!active) return;
+  const fade = 28;
+  const max = browserTabs.scrollWidth - browserTabs.clientWidth;
+  const left = active.offsetLeft - fade;
+  const right = active.offsetLeft + active.offsetWidth + fade;
+  let next = browserTabs.scrollLeft;
+  if (left < next) next = left;
+  else if (right > next + browserTabs.clientWidth) next = right - browserTabs.clientWidth;
+  browserTabs.scrollLeft = Math.max(0, Math.min(max, next));
+}
+
+/** Mark which sides have tabs scrolled out of sight, for the edge fades. */
+function browserTabsEdges() {
+  const max = browserTabs.scrollWidth - browserTabs.clientWidth;
+  browserTabs.classList.toggle("more-left", browserTabs.scrollLeft > 1);
+  browserTabs.classList.toggle("more-right", max - browserTabs.scrollLeft > 1);
+}
+
+browserTabs.addEventListener("scroll", browserTabsEdges, { passive: true });
+// A mouse wheel only scrolls vertically, and this strip only scrolls sideways.
+browserTabs.addEventListener("wheel", (event) => {
+  if (browserTabs.scrollWidth <= browserTabs.clientWidth) return;
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+  event.preventDefault();
+  browserTabs.scrollLeft += event.deltaY;
+}, { passive: false });
+// Resizes include the pane's opening animation, when the strip is briefly a
+// few pixels wide: reveal against the settled width, not that one.
+new ResizeObserver(() => { browserTabsReveal(); browserTabsEdges(); }).observe(browserTabs);
+
+async function browserSelectTab(id) {
+  if (!activeId || !id || id === browserActiveTabId) return;
+  const result = await api("/browser/tab", { session: activeId, id });
+  if (result.error) return void addNotice(result.error, "err");
+  // An MJPEG response is bound to the page that was active when it started.
+  // Reconnect it after a switch; native presentation is remounted by its host.
+  if (browserFrame) { browserFrame.src = ""; browserFrame = null; }
+  browserActiveTabId = result.id || id;
+  browserCurrentUrl = result.url || "";
+  void browserRefresh(activeId);
+}
+
+async function browserCloseTab(id) {
+  if (!activeId || !id) return;
+  const result = await api("/browser/tab", { session: activeId, id, action: "close" });
+  if (result.error) return void addNotice(result.error, "err");
+  if (!result.running) {
+    browserView(activeId).running = false;
+    paintTabs();
+    browserShowIdle();
+    return;
+  }
+  if (browserFrame) { browserFrame.src = ""; browserFrame = null; }
+  browserActiveTabId = result.active || "";
+  void browserRefresh(activeId);
+}
+
+function browserShowLive(origin, viewport, presentation) {
+  browserViewport = viewport || null;
+  browserCurrentUrl = origin || "";
+  if (document.activeElement !== browserWhere) browserWhere.value = browserCurrentUrl;
+  browserWhere.title = origin || "";
+  browserStatus.hidden = false;
+  const native = presentation === "native" && Boolean(browserNativeBridge);
+  browserTakeoverBtn.hidden = native;
+  browserReloadBtn.disabled = false;
+  browserStopBtn.disabled = false;
+  if (native) {
+    browserSetTakeover(false);
+    if (browserFrame) { browserFrame.src = ""; browserFrame = null; }
+    if (!browserNativeSurface) {
+      browserNativeSurface = el("div", "browser-native-surface");
+      browserNativeObserver?.observe(browserNativeSurface);
+    }
+    if (browserNativeSurface.parentElement !== browserBody) browserBody.replaceChildren(browserNativeSurface);
+    requestAnimationFrame(() => browserPresentNative(activeId, browserNativeSurface));
+    return;
+  }
+  browserPresentNative(null, null);
+  browserNativeObserver?.disconnect();
+  browserNativeSurface = null;
+  const img = browserEnsureFrame();
+  if (!img.src) img.src = browserStreamUrl(activeId);
+  if (img.parentElement !== browserBody) {
+    browserBody.replaceChildren(img);
+  }
+}
+
+async function browserRefresh(id = activeId) {
+  if (!id) return;
+  const state = await getJson("/browser/state?session=" + encodeURIComponent(id));
+  if (state.error) return;
+  const view = browserView(id);
+  const changed = view.running !== Boolean(state.running);
+  view.running = Boolean(state.running);
+  if (changed) paintTabs();
+  if (id !== activeId || !browserPane.classList.contains("open")) return;
+  const nextActiveTabId = Array.isArray(state.tabs) ? (state.tabs.find((tab) => tab.active)?.id || "") : "";
+  const tabChanged = Boolean(browserActiveTabId && nextActiveTabId && browserActiveTabId !== nextActiveTabId);
+  if (tabChanged && browserFrame) { browserFrame.src = ""; browserFrame = null; }
+  browserActiveTabId = nextActiveTabId;
+  browserImportBtn.hidden = !state.mode;
+  // With two browsers to work in, the pane says which one this is.
+  browserTitle.textContent = t(
+    state.policy !== "auto" ? "nav.browser" : state.mode === "extension" ? "browser.titleYours" : "browser.titleBuiltin",
+  );
+  browserPolicy = state.policy || null;
+  browserPaintExt();
+  browserPaintSuggestion(state.importSuggestion);
+  browserPaintPageTabs(state.tabs);
+  if (state.running) browserShowLive(state.url || state.origin, state.viewport, state.presentation);
+  else browserShowIdle();
+}
+
+function browserOpen(on) {
+  // In the extension's side panel the person's own browser is right there.
+  if (!activeId || IS_EMBED) on = false;
+  if (activeId) browserView(activeId).open = on;
+  browserPane.classList.toggle("open", on);
+  browserScrim.hidden = !(on && BROWSER_NARROW.matches);
+  if (!on) browserPresentNative(null, null);
+  paintTabs();
+  if (browserStatePoll) { clearInterval(browserStatePoll); browserStatePoll = null; }
+  if (!on) {
+    if (browserExtPoll) { clearInterval(browserExtPoll); browserExtPoll = null; }
+    return void browserSetTakeover(false);
+  }
+  void browserRefresh(activeId);
+  // Polled rather than pushed: the answer is session state the server already
+  // holds, and asking must never be what starts a browser.
+  browserStatePoll = setInterval(() => void browserRefresh(activeId), 2000);
+  // Whether the extension is there changes rarely, and asking opens a socket,
+  // so it is checked when the pane opens and then now and again.
+  void browserCheckExt();
+  if (!browserExtPoll) browserExtPoll = setInterval(() => void browserCheckExt(), 30000);
+}
+
+/** Follow the active tab without carrying another session's stream with it. */
+function browserActivateSession() {
+  browserPresentNative(null, null);
+  browserSetTakeover(false);
+  if (browserStreamRetry) { clearTimeout(browserStreamRetry); browserStreamRetry = null; }
+  if (browserFrame) {
+    browserFrame.src = "";
+    browserFrame = null;
+  }
+  browserViewport = null;
+  browserNativeObserver?.disconnect();
+  browserNativeSurface = null;
+  browserPaintSuggestion(null);
+  browserOpen(Boolean(activeId && browserView(activeId).open && !BROWSER_NARROW.matches));
+  if (activeId) void browserRefresh(activeId);
+}
+
+/** A browser tool is the primary entry: reveal its session automatically. */
+function browserToolStarted(session, toolName) {
+  if (!session || typeof toolName !== "string" || !toolName.startsWith("browser_")) return;
+  const view = browserView(session);
+  view.running = true;
+  // On a narrow screen the tab's browser button lights up instead; the
+  // conversation stays in view and the page is one tap away.
+  if (BROWSER_NARROW.matches) return void paintTabs();
+  view.open = true;
+  if (session === activeId) browserOpen(true);
+  else paintTabs();
+}
+
+function browserForgetSession(id) {
+  browserViews.delete(id);
+}
+
+async function browserNavigateFromAddress() {
+  const url = browserWhere.value.trim();
+  if (!activeId || !url) return;
+  const result = await api("/browser/navigate", { session: activeId, url });
+  if (result.error) {
+    addNotice(result.error, "err");
+    browserWhere.value = browserCurrentUrl;
+    return;
+  }
+  browserCurrentUrl = result.url || url;
+  browserWhere.value = browserCurrentUrl;
+  browserView(activeId).running = true;
+  paintTabs();
+  void browserRefresh(activeId);
+}
+
+async function browserReload() {
+  if (!activeId || !browserView(activeId).running) return;
+  browserReloadBtn.disabled = true;
+  const result = await api("/browser/navigate", { session: activeId, action: "reload" });
+  browserReloadBtn.disabled = false;
+  if (result.error) return void addNotice(result.error, "err");
+  browserCurrentUrl = result.url || browserCurrentUrl;
+  if (document.activeElement !== browserWhere) browserWhere.value = browserCurrentUrl;
+  void browserRefresh(activeId);
+}
+
+async function browserStop() {
+  if (!activeId || !browserView(activeId).running) return;
+  if (!confirm(t("browser.stopConfirm"))) return;
+  browserStopBtn.disabled = true;
+  const result = await api("/browser/close", { session: activeId });
+  if (result.error) {
+    browserStopBtn.disabled = false;
+    return void addNotice(result.error, "err");
+  }
+  browserView(activeId).running = false;
+  paintTabs();
+  browserShowIdle();
+  addNotice(t("browser.stopped"));
+}
+
+/**
+ * Importing a sign-in from the person's own browser.
+ *
+ * Two ways in, one way through. The header button is always there; the bar
+ * under the tabs appears when the built-in browser reaches a site the person
+ * has open in their own browser. Both only open the dialog — the dialog's
+ * Import button is the one thing that reads anything out of that browser.
+ */
+/**
+ * What a detected site does besides showing the bar, chosen in the dialog:
+ * "bar" waits to be clicked, "idle" opens the dialog once the agent's turn is
+ * over, "now" opens it straight away. Per viewer, like the pane's width.
+ */
+const BROWSER_IMPORT_PROMPT_KEY = "oharness.browserImportPrompt";
+const browserAutoPrompted = new Set();
+
+function browserImportPrompt() {
+  try {
+    const value = localStorage.getItem(BROWSER_IMPORT_PROMPT_KEY);
+    return value === "bar" || value === "now" ? value : "idle";
+  } catch {
+    return "idle";
+  }
+}
+
+function browserPaintSuggestion(suggestion) {
+  browserSuggestion = suggestion && suggestion.site ? suggestion : null;
+  browserSuggest.hidden = !browserSuggestion;
+  if (!browserSuggestion) return;
+  browserSuggestText.textContent = t("browser.importSuggest", { site: browserSuggestion.site, browser: browserSuggestion.browser });
+
+  // Once per site per conversation: Cancel is an answer, and the bar stays for
+  // anyone who changes their mind.
+  const mode = browserImportPrompt();
+  const key = activeId + "|" + browserSuggestion.site;
+  if (mode === "bar" || !activeId || browserAutoPrompted.has(key)) return;
+  // Waiting is only a skipped poll: the first one after the turn ends opens it.
+  if (mode === "idle" && P && P.busy) return;
+  if (document.querySelector("dialog[open]")) return;
+  browserAutoPrompted.add(key);
+  void browserOpenImport(browserSuggestion.site);
+}
+
+/**
+ * How to get the browser extension: its page, and — where this app ships its
+ * files — the folder to load it from and the three steps that takes. Shared by
+ * the settings row, the import dialog and the fallback bar's setup.
+ */
+function extensionHelp(info) {
+  const box = el("div", "ext-help");
+  const actions = el("div", "row-actions");
+  if (info.folder && !info.connected) {
+    const show = el("button", "ghost", t("settings.extensionShowFolder"));
+    show.type = "button";
+    show.addEventListener("click", () => void api("/browser/extension/reveal", {}));
+    actions.appendChild(show);
+  }
+  if (info.installUrl) {
+    const get = el("a", "ghost ext-get", t("settings.extensionGet"));
+    get.prepend(chromeLogo());
+    get.href = info.installUrl;
+    get.target = "_blank";
+    get.rel = "noopener";
+    actions.appendChild(get);
+  }
+  box.appendChild(actions);
+  if (info.folder && !info.connected) {
+    const steps = el("ol");
+    const one = el("li");
+    one.append(t("settings.extensionStep1a") + " ", el("code", null, "chrome://extensions"), " " + t("settings.extensionStep1b"));
+    steps.append(one, el("li", null, t("settings.extensionStep2")));
+    // The desktop app registers the host itself; a server run from npm needs
+    // the one command that does it.
+    if (!IS_DESKTOP) {
+      const install = el("li");
+      install.append(t("settings.extensionStepCli") + " ", el("code", null, "oharness-browser-host install"));
+      steps.appendChild(install);
+    }
+    steps.appendChild(el("li", null, t("settings.extensionStep3")));
+    box.appendChild(steps);
+  }
+  return box;
+}
+
+/**
+ * The pane's way to the extension: shown while it is missing and the agent
+ * may use the person's browser, until the person closes it. Once closed, or
+ * where the agent keeps to the built-in browser, a plain icon stays in its
+ * place — importing sign-ins still needs the extension.
+ */
+function browserPaintExt() {
+  let hidden = false;
+  try { hidden = localStorage.getItem(BROWSER_EXT_HIDDEN) === "1"; } catch {}
+  browserExt.hidden = hidden || browserExtConnected || !browserPolicy || browserPolicy === "builtin";
+  browserExtGet.hidden = browserExtConnected || !browserExt.hidden;
+}
+
+async function browserCheckExt() {
+  const info = await getJson("/browser/extension");
+  if (info.error) return;
+  browserExtConnected = Boolean(info.connected);
+  browserPaintExt();
+}
+
+/**
+ * Chrome's own mark, in its colours: on the button that gets the Chrome
+ * extension it is the thing a person looks for, so it is not redrawn in the
+ * icons' grey line. Three segments, each the same shape turned a third of the
+ * way round, bounded by lines tangent to the hub, around a ringed blue hub.
+ */
+function chromeLogo() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", "0 0 48 48");
+  svg.setAttribute("aria-hidden", "true");
+  const segment = "M6.68 14A20 20 0 0 1 41.32 14L24 14A10 10 0 0 0 15.34 29Z";
+  for (const [fill, turn] of [["#ea4335", 0], ["#fbbc04", 120], ["#34a853", 240]]) {
+    const path = document.createElementNS(NS, "path");
+    path.setAttribute("d", segment);
+    path.setAttribute("fill", fill);
+    path.setAttribute("transform", "rotate(" + turn + " 24 24)");
+    svg.appendChild(path);
+  }
+  for (const [r, fill] of [[10, "#fff"], [8, "#4285f4"]]) {
+    const circle = document.createElementNS(NS, "circle");
+    circle.setAttribute("cx", "24");
+    circle.setAttribute("cy", "24");
+    circle.setAttribute("r", String(r));
+    circle.setAttribute("fill", fill);
+    svg.appendChild(circle);
+  }
+  return svg;
+}
+
+/** Settings, opened on the browser row: where getting the extension lives. */
+async function openBrowserSettings() {
+  document.getElementById("nav-settings").click();
+  for (let tries = 0; tries < 40; tries++) {
+    const row = document.querySelector(".setting-seg")?.closest("details");
+    if (row) {
+      row.open = true;
+      row.scrollIntoView({ block: "center" });
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+}
+
+async function browserOpenImport(preselect) {
+  if (!activeId) return;
+  const session = activeId;
+  const dialog = document.getElementById("browser-import-dialog");
+  const desc = document.getElementById("bi-desc");
+  const body = document.getElementById("bi-body");
+  const confirmBtn = document.getElementById("bi-confirm");
+  const cancelBtn = document.getElementById("bi-cancel");
+  desc.textContent = "";
+  body.replaceChildren(el("p", "muted small", t("browser.importLoading")));
+  confirmBtn.disabled = true;
+  confirmBtn.textContent = t("browser.importAction");
+  cancelBtn.onclick = () => dialog.close();
+  if (!dialog.open) dialog.showModal();
+
+  const [sources, state] = await Promise.all([
+    getJson("/browser/import?session=" + encodeURIComponent(session)),
+    getJson("/browser/state?session=" + encodeURIComponent(session)),
+  ]);
+  if (!dialog.open || session !== activeId) return;
+  if (sources.error) {
+    body.replaceChildren(el("p", "bi-note", t("browser.importNoExtension")), el("p", "muted small mono", sources.error));
+    // Without the extension there is nothing to import from, so the way to
+    // get it is the useful thing this dialog can offer.
+    void getJson("/browser/extension").then((info) => {
+      if (dialog.open && !info.error) body.appendChild(extensionHelp(info));
+    });
+    return;
+  }
+
+  const browser = sources.browser || "Chrome";
+  desc.textContent = t("browser.importFrom", { browser });
+  const wanted = new Set([preselect, sources.current].filter(Boolean));
+  const sites = Array.isArray(sources.sites) ? sources.sites : [];
+  const boxes = [];
+  const list = el("div", "bi-sites");
+  for (const site of sites) {
+    const row = el("label", "bi-site");
+    const box = el("input");
+    box.type = "checkbox";
+    box.value = site.site;
+    box.checked = [...wanted].some((want) => want === site.site || want.endsWith("." + site.site) || site.site.endsWith("." + want));
+    row.classList.toggle("on", box.checked);
+    box.addEventListener("change", () => row.classList.toggle("on", box.checked));
+    const text = el("span", "bi-site-text");
+    text.appendChild(el("span", "bi-site-name", site.site));
+    if (site.title) text.appendChild(el("span", "bi-site-title", site.title));
+    row.append(box, text);
+    if (site.tabs > 1) row.appendChild(el("span", "bi-site-tabs", t("browser.importTabs", { n: site.tabs })));
+    boxes.push(box);
+    list.appendChild(row);
+  }
+  const other = el("input");
+  other.type = "text";
+  other.autocomplete = "off";
+  other.spellcheck = false;
+  other.placeholder = t("browser.importOther");
+  // A suggested site with no tab of its own still deserves to be pre-filled.
+  const unlisted = [...wanted].find((want) => !boxes.some((box) => box.checked && (want === box.value || want.endsWith("." + box.value))));
+  if (unlisted && !boxes.some((box) => box.checked)) other.value = unlisted;
+
+  const parts = [el("div", "bi-label", t(sites.length ? "browser.importSites" : "browser.importNoSites", { browser }))];
+  if (sites.length) parts.push(list);
+  parts.push(other, el("p", "bi-note", t("browser.importWhat")), el("p", "bi-note bi-warn", t("browser.importWarn", { browser })));
+  if (state.mode === "extension") parts.push(el("p", "bi-note", t("browser.importMigrate", { browser })));
+  parts.push(browserImportPromptPicker());
+  body.replaceChildren(...parts);
+  confirmBtn.disabled = false;
+
+  confirmBtn.onclick = async () => {
+    const chosen = boxes.filter((box) => box.checked).map((box) => box.value);
+    for (const typed of other.value.split(/[\s,]+/)) if (typed.trim()) chosen.push(typed.trim());
+    if (!chosen.length) return void addNotice(t("browser.importPick"), "err");
+    // The import moves the page the agent is working on; the server refuses
+    // it mid-turn, so say so here rather than relay its 409.
+    if (session === activeId && P && P.busy) return void addNotice(t("browser.importWaitTurn"), "err");
+    confirmBtn.disabled = true;
+    confirmBtn.textContent = t("browser.importBusy");
+    // Reading several sites and loading each one can take a while.
+    const result = await api("/browser/import", { session, action: "import", sites: chosen }, 120000);
+    confirmBtn.disabled = false;
+    confirmBtn.textContent = t("browser.importAction");
+    if (result.error) return void addNotice(result.error, "err");
+    dialog.close();
+    for (const entry of result.imported || []) {
+      addNotice(t("browser.importDone", { site: entry.site, browser: result.browser || browser, cookies: entry.cookies, storage: entry.localStorage }));
+    }
+    browserPaintSuggestion(null);
+    browserView(session).running = true;
+    if (session === activeId) browserOpen(true);
+    paintTabs();
+  };
+  other.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") { event.preventDefault(); confirmBtn.click(); }
+  });
+}
+
+function browserImportPromptPicker() {
+  const row = el("label", "bi-prompt");
+  row.appendChild(el("span", "", t("browser.importPrompt")));
+  const select = el("select");
+  for (const value of ["bar", "idle", "now"]) {
+    const option = el("option", "", t("browser.importPrompt." + value));
+    option.value = value;
+    select.appendChild(option);
+  }
+  select.value = browserImportPrompt();
+  select.addEventListener("change", () => {
+    try { localStorage.setItem(BROWSER_IMPORT_PROMPT_KEY, select.value); } catch { /* this page keeps the default */ }
+  });
+  row.appendChild(select);
+  return row;
+}
+
+browserImportBtn.addEventListener("click", () => void browserOpenImport(browserSuggestion && browserSuggestion.site));
+document.getElementById("browser-ext-open").addEventListener("click", () => void openBrowserSettings());
+// The Chrome mark is what someone looking for the extension recognises.
+browserExtGet.appendChild(chromeLogo());
+browserExtGet.addEventListener("click", () => void openBrowserSettings());
+document.getElementById("browser-ext-hide").addEventListener("click", () => {
+  try { localStorage.setItem(BROWSER_EXT_HIDDEN, "1"); } catch {}
+  browserPaintExt();
+});
+document.getElementById("browser-suggest-import").addEventListener("click", () => void browserOpenImport(browserSuggestion && browserSuggestion.site));
+document.getElementById("browser-suggest-dismiss").addEventListener("click", async () => {
+  if (!activeId || !browserSuggestion) return;
+  const site = browserSuggestion.site;
+  browserPaintSuggestion(null);
+  const result = await api("/browser/import", { session: activeId, action: "dismiss", site });
+  if (result.error) addNotice(result.error, "err");
+});
+
+document.getElementById("browser-hide").addEventListener("click", () => browserOpen(false));
+const browserScrim = document.getElementById("browser-scrim");
+browserScrim.addEventListener("click", () => browserOpen(false));
+// A window widened past the breakpoint turns the drawer back into a column,
+// which has no scrim.
+BROWSER_NARROW.addEventListener("change", () => {
+  browserScrim.hidden = !(browserPane.classList.contains("open") && BROWSER_NARROW.matches);
+});
+// The drawer slides with a transform, which moves the pane without resizing
+// it; the desktop app's native page follows the pane's box, so it is placed
+// again once the slide has finished.
+browserPane.addEventListener("transitionend", (event) => {
+  if (event.target === browserPane && browserNativeSurface) browserPresentNative(activeId, browserNativeSurface);
+});
+browserStopBtn.addEventListener("click", () => void browserStop());
+browserTakeoverBtn.addEventListener("click", () => browserSetTakeover(!browserTakeover));
+browserReloadBtn.addEventListener("click", () => void browserReload());
+browserWhere.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    void browserNavigateFromAddress();
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    browserWhere.value = browserCurrentUrl;
+    browserWhere.blur();
+  }
+});
+browserSetTakeover(false);
+browserTakeoverBtn.hidden = true;
+browserReloadBtn.disabled = true;
+browserStopBtn.disabled = true;
+`;
+//# sourceMappingURL=browser.js.map