@oharness/server 0.9.3 → 0.11.0

package/dist/page/client/theme.js

@@ -0,0 +1,365 @@
+/**
+ * Themes the agent proposes, and the one in use.
+ *
+ * A proposal arrives as a card in the conversation that asked for it. Nothing
+ * changes until the person acts on the card: Preview tries it on this page
+ * only, Apply makes it the theme everywhere, Discard drops it. The applied
+ * theme is printed into the page by the server and replaced here when another
+ * window changes it.
+ *
+ * Safe mode is the way out of a theme that made the page unreadable, so it is
+ * the one thing here that needs no theme, no card and no conversation: the
+ * page loaded with ?theme=default, or the shortcut below, and custom colours
+ * are off in this window until it is pressed again.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const THEME = String.raw `
+// --- theme ----------------------------------------------------------------
+
+const themeCards = new Map();
+let themeState = null;
+let themePreviewing = null;
+const THEME_SAFE_KEY = "oharness-theme-safe";
+const themeSafeKey = IS_MAC ? "⌘⇧0" : "Ctrl+Shift+0";
+
+function themeSafe() {
+  if (new URLSearchParams(location.search).get("theme") === "default") return true;
+  try { return sessionStorage.getItem(THEME_SAFE_KEY) === "1"; } catch { return false; }
+}
+
+function themeTag(id) {
+  let tag = document.getElementById(id);
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = id;
+    document.head.appendChild(tag);
+  }
+  return tag;
+}
+
+/** Put the applied theme and any preview on the page, unless safe mode is on. */
+function paintTheme() {
+  const safe = themeSafe();
+  themeTag("oh-user-theme").textContent = safe || !themeState ? "" : themeState.css;
+  const preview = themePreviewing ? themeCards.get(themePreviewing) : null;
+  // After the applied theme in the document, so a preview wins on order.
+  themeTag("oh-theme-preview").textContent = safe || !preview ? "" : preview.preview.css;
+  void measureWall();
+}
+
+/**
+ * How much of the page colour has to cover the conversation background for
+ * its text to stay readable, measured from the image itself.
+ *
+ * The image is drawn small, so each pixel is the average of a region, and its
+ * darkest and lightest are taken as the worst cases text could land on. The
+ * scrim is then raised until body text and secondary text both clear 4.5:1
+ * over both, with the scrim mixed in the way the stylesheet mixes it. The
+ * result is a floor: the stylesheet uses it or the theme's own scrim,
+ * whichever is more, so a theme can be calmer than this but never busier.
+ */
+let wallMeasured = "";
+async function measureWall() {
+  const logEl = document.getElementById("log");
+  const root = getComputedStyle(document.documentElement);
+  const image = getComputedStyle(logEl).getPropertyValue("--wall-image").trim();
+  const match = /url\(["']?(\/theme-asset\/[0-9a-f]{64}\.(?:png|jpg|webp))["']?\)/.exec(image);
+  // Read from the root: #log may carry a lifted --dim of its own from last time.
+  const colours = ["--bg", "--fg", "--dim"].map((name) => root.getPropertyValue(name).trim());
+  const key = (match ? match[1] : "") + "|" + colours.join(",");
+  if (key === wallMeasured) return;
+  wallMeasured = key;
+  if (!match) {
+    logEl.style.removeProperty("--wall-scrim-min");
+    logEl.style.removeProperty("--dim");
+    return;
+  }
+
+  const img = new Image();
+  img.src = match[1];
+  try { await img.decode(); } catch { return; }
+  if (wallMeasured !== key) return;
+  const canvas = document.createElement("canvas");
+  canvas.width = 48; canvas.height = 32;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+
+  const rgb = (hex) => {
+    const m = /^#([0-9a-f]{6})/i.exec(hex);
+    if (!m) return null;
+    const n = parseInt(m[1], 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  };
+  const [bg, fg, dim] = colours.map(rgb);
+  if (!bg || !fg || !dim) return;
+  const lin = (v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+  const lum = (c) => 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+  const ratio = (a, b) => { const x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); };
+
+  let darkest = null, lightest = null;
+  for (let i = 0; i < data.length; i += 4) {
+    const px = [data[i], data[i + 1], data[i + 2]];
+    if (!darkest || lum(px) < lum(darkest)) darkest = px;
+    if (!lightest || lum(px) > lum(lightest)) lightest = px;
+  }
+  // Two levers, used in this order: how far secondary text may be lifted
+  // toward body text (up to 60%, so it still reads as secondary), and how much
+  // of the page colour covers the image. Without the first, a theme whose dim
+  // only just passes on its own background would need the image covered
+  // completely, and the background would be there and invisible.
+  const lift = (t) => dim.map((v, i) => v * (1 - t) + fg[i] * t);
+  let cover = 100, lifted = 0;
+  search: for (let pct = 0; pct <= 100; pct += 2) {
+    const a = pct / 100;
+    const unders = [darkest, lightest].map((px) => px.map((v, i) => bg[i] * a + v * (1 - a)));
+    if (!unders.every((under) => ratio(fg, under) >= 4.5)) continue;
+    for (let step = 0; step <= 12; step++) {
+      const t = step * 0.05;
+      if (unders.every((under) => ratio(lift(t), under) >= 4.5)) { cover = pct; lifted = t; break search; }
+    }
+  }
+  logEl.style.setProperty("--wall-scrim-min", cover + "%");
+  // The theme's own scrim may be heavier than the floor; secondary text then
+  // needs less lift, or none, and keeps more of its own colour.
+  const themed = parseFloat(getComputedStyle(logEl).getPropertyValue("--wall-scrim")) || 0;
+  if (themed > cover) {
+    const a = themed / 100;
+    const unders = [darkest, lightest].map((px) => px.map((v, i) => bg[i] * a + v * (1 - a)));
+    for (let step = 0; step <= 12; step++) {
+      if (unders.every((under) => ratio(lift(step * 0.05), under) >= 4.5)) { lifted = step * 0.05; break; }
+    }
+  }
+  if (lifted > 0) {
+    const hex = "#" + lift(lifted).map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
+    logEl.style.setProperty("--dim", hex);
+  } else {
+    logEl.style.removeProperty("--dim");
+  }
+}
+
+// The colours the floor was measured against change with the system theme
+// and with the light/dark switch; measure again when they do.
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => void measureWall());
+new MutationObserver(() => void measureWall())
+  .observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+
+function themeSwatchRow(label, colours) {
+  const row = el("div", "theme-swatch-row");
+  row.appendChild(el("span", "theme-swatch-label", label));
+  for (const colour of colours) {
+    const swatch = el("span", "theme-swatch");
+    // Validated hex from the server; set as a property, never as markup.
+    swatch.style.background = colour;
+    swatch.title = colour;
+    row.appendChild(swatch);
+  }
+  return row;
+}
+
+function themeReportList(title, lines) {
+  if (!lines || !lines.length) return null;
+  const box = el("div", "theme-report");
+  box.appendChild(el("div", "theme-report-title", title));
+  for (const line of lines) box.appendChild(el("div", "theme-report-line", line));
+  return box;
+}
+
+async function themeAction(path, body, box) {
+  const result = await api(path, body);
+  if (result.error) {
+    const note = el("p", "err", t("theme.failed", { error: result.error }));
+    box.appendChild(note);
+    return null;
+  }
+  if (result.state) setThemeState(result.state);
+  return result;
+}
+
+function renderThemeCard(entry) {
+  const { box, preview } = entry;
+  box.replaceChildren();
+  const head = el("div", "theme-card-head");
+  head.appendChild(el("span", "theme-card-name", t("theme.previewTitle", { name: preview.name })));
+  const statusKey = themePreviewing === preview.id ? "theme.status.previewing" : "theme.status." + entry.status;
+  head.appendChild(el("span", "theme-card-status " + entry.status, t(statusKey)));
+  box.appendChild(head);
+
+  const swatches = el("div", "theme-swatches");
+  if (preview.swatches.light) swatches.appendChild(themeSwatchRow(t("theme.light"), preview.swatches.light));
+  if (preview.swatches.dark) swatches.appendChild(themeSwatchRow(t("theme.dark"), preview.swatches.dark));
+  box.appendChild(swatches);
+
+  if (preview.images && preview.images.length) {
+    const images = el("div", "theme-images");
+    for (const image of preview.images) {
+      const figure = el("div", "theme-image");
+      const thumb = el("img");
+      // Only our own asset route, as the server printed it.
+      if (/^\/theme-asset\/[0-9a-f]{64}\.(png|jpg|webp)$/.test(image.url)) thumb.src = image.url;
+      thumb.alt = "";
+      figure.appendChild(thumb);
+      figure.appendChild(el("span", "", t("theme.slot." + image.slot)));
+      images.appendChild(figure);
+    }
+    box.appendChild(images);
+  }
+
+  for (const part of [
+    themeReportList(t("theme.fixed"), preview.report.fixed),
+    themeReportList(t("theme.dropped"), preview.report.dropped),
+    themeReportList(t("theme.notes"), preview.report.notes),
+  ]) if (part) box.appendChild(part);
+
+  const actions = el("div", "connection-actions theme-actions");
+  if (entry.status === "pending") {
+    const previewing = themePreviewing === preview.id;
+    const tryOn = el("button", "ghost", t(previewing ? "theme.stopPreview" : "theme.preview"));
+    tryOn.type = "button";
+    tryOn.setAttribute("aria-pressed", previewing ? "true" : "false");
+    tryOn.onclick = () => {
+      themePreviewing = previewing ? null : preview.id;
+      paintTheme();
+      for (const other of themeCards.values()) renderThemeCard(other);
+    };
+    const discard = el("button", "ghost", t("theme.discard"));
+    discard.type = "button";
+    discard.onclick = async () => {
+      discard.disabled = true;
+      await themeAction("/theme/discard", { preview: preview.id }, box);
+      closeThemePreview(preview.id, "discarded");
+    };
+    const apply = el("button", "ghost theme-apply", t("theme.apply"));
+    apply.type = "button";
+    apply.onclick = async () => {
+      apply.disabled = true;
+      const done = await themeAction("/theme/apply", { preview: preview.id }, box);
+      if (done) closeThemePreview(preview.id, "applied");
+      else apply.disabled = false;
+    };
+    actions.appendChild(tryOn);
+    actions.appendChild(discard);
+    actions.appendChild(apply);
+  } else if (entry.status === "applied") {
+    const undo = el("button", "ghost", t("theme.undo"));
+    undo.type = "button";
+    undo.disabled = !(themeState && themeState.canUndo);
+    undo.onclick = async () => { undo.disabled = true; await themeAction("/theme/undo", {}, box); };
+    const reset = el("button", "ghost", t("theme.reset"));
+    reset.type = "button";
+    reset.disabled = !(themeState && themeState.active);
+    reset.onclick = async () => { reset.disabled = true; await themeAction("/theme/reset", {}, box); };
+    actions.appendChild(undo);
+    actions.appendChild(reset);
+  }
+  if (actions.childNodes.length) box.appendChild(actions);
+  box.appendChild(el("p", "theme-safe-hint", t("theme.safeHint", { key: themeSafeKey })));
+}
+
+/**
+ * The way back that does not depend on a card.
+ *
+ * A card lives in the conversation that proposed the theme and in this
+ * server's memory, so after a restart or in another session there is no card
+ * to press Reset on. This row sits under the light/dark switch in the account
+ * menu, and is there only while a custom theme is in use.
+ */
+function customThemeRows() {
+  if (!themeState || !themeState.active) return [];
+  const row = el("div", "menu-theme menu-custom-theme");
+  // The name alone: the row sits under "Theme", so what it is goes without
+  // saying, and every character spent saying it was one the name lost.
+  const label = el("span", "menu-label", themeState.active.name);
+  label.title = t("theme.custom", { name: themeState.active.name });
+  row.appendChild(label);
+  const group = el("div", "custom-theme-actions");
+  const act = (key, path, enabled, longKey) => {
+    const button = el("button", "custom-theme-btn", t(key));
+    button.type = "button";
+    button.title = t(longKey || key);
+    button.setAttribute("aria-label", t(longKey || key));
+    button.disabled = !enabled;
+    button.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      button.disabled = true;
+      const result = await api(path, {});
+      if (result.state) setThemeState(result.state);
+      closeRowMenu();
+      if (result.error) addNotice(t("theme.failed", { error: result.error }), "err");
+    });
+    group.appendChild(button);
+  };
+  act("theme.undo", "/theme/undo", themeState.canUndo);
+  act("theme.resetShort", "/theme/reset", true, "theme.reset");
+  row.appendChild(group);
+  return [row];
+}
+
+/** A proposal from set_theme, drawn in the conversation that asked for it. */
+function themePreviewCard(preview) {
+  let entry = themeCards.get(preview.id);
+  if (!entry) {
+    const target = pane(preview.session);
+    const box = el("section", "row-card column connection-card theme-card");
+    box.dataset.themePreview = preview.id;
+    box.setAttribute("aria-live", "polite");
+    target.node.appendChild(box);
+    entry = { box, preview, status: "pending" };
+    themeCards.set(preview.id, entry);
+  } else {
+    entry.preview = preview;
+  }
+  renderThemeCard(entry);
+  if (preview.session === activeId) follow();
+}
+
+function closeThemePreview(id, outcome) {
+  const entry = themeCards.get(id);
+  if (themePreviewing === id) themePreviewing = null;
+  if (entry && entry.status === "pending") entry.status = outcome;
+  paintTheme();
+  for (const other of themeCards.values()) renderThemeCard(other);
+}
+
+function setThemeState(state) {
+  themeState = state;
+  paintTheme();
+  for (const entry of themeCards.values()) renderThemeCard(entry);
+}
+
+async function loadThemes() {
+  try {
+    const result = await fetch(q("/theme")).then((r) => r.json());
+    setThemeState(result.state);
+    for (const preview of result.previews || []) themePreviewCard(preview);
+  } catch {
+    // The theme the server printed into the page is already showing; a card
+    // that could not be fetched again is not worth an error on screen.
+  }
+}
+
+document.addEventListener("keydown", (e) => {
+  if (e.code !== "Digit0") return;
+  if (!e.shiftKey || e.altKey) return;
+  if (IS_MAC ? !e.metaKey || e.ctrlKey : !e.ctrlKey || e.metaKey) return;
+  e.preventDefault();
+  const on = !themeSafe();
+  try {
+    if (on) sessionStorage.setItem(THEME_SAFE_KEY, "1");
+    else sessionStorage.removeItem(THEME_SAFE_KEY);
+  } catch { /* storage refused: the URL form of safe mode still works */ }
+  if (!on && new URLSearchParams(location.search).get("theme") === "default") {
+    // Loaded in safe mode by URL: the way back on is a load without it.
+    const url = new URL(location.href);
+    url.searchParams.delete("theme");
+    location.replace(url.href);
+    return;
+  }
+  paintTheme();
+  addNotice(t(on ? "theme.safeOn" : "theme.safeOff", { key: themeSafeKey }));
+});
+
+setTimeout(() => { void loadThemes(); }, 0);
+`;
+//# sourceMappingURL=theme.js.map

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

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

package/dist/page/client/transcript.js

@@ -88,6 +88,14 @@ log.addEventListener("scroll", () => {
   jumpBtn.hidden = atBottom;
 });
 
+// The form's height, for the jump button to sit above (see #jump in style.ts).
+{
+  const form = document.getElementById("composer");
+  new ResizeObserver(() => {
+    document.documentElement.style.setProperty("--form-h", form.offsetHeight + "px");
+  }).observe(form);
+}
+
 jumpBtn.addEventListener("click", () => {
   atBottom = true;
   jumpBtn.hidden = true;
@@ -108,13 +116,26 @@ function addUser(text, images) {
   if (images && images.length) {
     const strip = el("div", "shots");
     for (const image of images) {
+      const src = image.src.startsWith("blob:") ? image.src : q(image.src);
+      if (image.kind === "video") {
+        // A clip plays where it was sent, with its own controls: an <img>
+        // pointed at a video drew a broken-image icon beside its name.
+        const video = document.createElement("video");
+        video.src = src;
+        video.controls = true;
+        video.preload = "metadata";
+        video.playsInline = true;
+        video.title = image.name || "";
+        strip.appendChild(video);
+        continue;
+      }
       const img = document.createElement("img");
-      img.src = image.src.startsWith("blob:") ? image.src : q(image.src);
+      img.src = src;
       img.alt = image.name || "";
       img.loading = "lazy";
-      // A full-size screenshot in a chat bubble is unreadable; the tab it
-      // opens is the same bytes at whatever size the screen allows.
-      img.addEventListener("click", () => window.open(img.src, "_blank", "noopener"));
+      // A full-size screenshot in a chat bubble is unreadable; the preview is
+      // the same bytes at whatever size the window allows.
+      img.addEventListener("click", () => previewImage(img));
       strip.appendChild(img);
     }
     bubble.appendChild(strip);
@@ -169,8 +190,10 @@ function actButton(icon, label) {
 }
 
 function turnActions(wrap, keepMessages) {
-  if (!keepMessages || wrap.querySelector(":scope > .actions")) return;
-  const bar = el("div", "actions");
+  if (!keepMessages || wrap.querySelector(":scope > .actions[data-turn]")) return;
+  // One bar per reply: an @claude reply already has one, holding its button.
+  const bar = wrap.querySelector(":scope > .actions") || el("div", "actions");
+  bar.dataset.turn = "1";
 
   const fork = actButton("fork", t("turn.fork"));
   fork.addEventListener("click", () => {
@@ -191,7 +214,26 @@ function turnActions(wrap, keepMessages) {
   });
   bar.appendChild(copy);
 
-  wrap.appendChild(bar);
+  if (!bar.parentNode) wrap.appendChild(bar);
+}
+
+/**
+ * A reply an external agent wrote (@claude): named for it rather than
+ * "assistant", and, when the agent's session is known, a button that opens
+ * that session in Claude Code itself — where the whole of it can be read,
+ * every tool call and result, and carried on.
+ */
+function agentReply(wrap, agent) {
+  if (!wrap || !agent || !agent.name) return;
+  const who = wrap.querySelector(":scope > .who");
+  if (who) who.textContent = agent.name;
+  if (!agent.session || wrap.querySelector(":scope > .actions [data-agent-open]")) return;
+  const bar = wrap.querySelector(":scope > .actions") || el("div", "actions");
+  const open = actButton("command", t("projects.claudeCode"));
+  open.dataset.agentOpen = "1";
+  open.addEventListener("click", () => void openClaudeCode(agent.cwd || currentCwd, agent.session));
+  bar.prepend(open);
+  if (!bar.parentNode) wrap.appendChild(bar);
 }
 
 /**
@@ -580,6 +622,7 @@ function finishTool(id, result, ms, isError) {
       entry.body.appendChild(pre);
     }
   }
+  toolShots(entry.body, result);
   if (isError) {
     // A failed step is the one thing worth surfacing without a click.
     entry.card.open = true;
@@ -590,6 +633,149 @@ function finishTool(id, result, ms, isError) {
   follow();
 }
 
+/**
+ * What a tool saw: the screenshots it returned, as thumbnails in its card.
+ *
+ * The live pane shows the window as it is now; this is the record of what the
+ * agent looked at, for reading a turn back afterwards. It stays inside the
+ * folded card — a turn that takes twenty screenshots would otherwise bury its
+ * own reply — and a closed card fetches nothing.
+ *
+ * Live, the bytes arrive in the event and become a blob URL, which a click can
+ * open in a tab where a data: URL cannot. Replayed, each is an /attachment
+ * position, the same as a user's pasted image.
+ */
+function toolShots(body, result) {
+  const shots = (result || []).filter((part) => part.type === "image");
+  if (!shots.length) return;
+  const strip = el("div", "tool-shots");
+  for (const shot of shots) {
+    const img = document.createElement("img");
+    if (shot.src) {
+      img.src = q(shot.src);
+    } else if (shot.data) {
+      const bytes = Uint8Array.from(atob(shot.data), (c) => c.charCodeAt(0));
+      img.src = URL.createObjectURL(new Blob([bytes], { type: shot.mimeType || "image/jpeg" }));
+    } else {
+      continue;
+    }
+    img.alt = "";
+    img.loading = "lazy";
+    img.addEventListener("click", () => previewImage(img));
+    strip.appendChild(img);
+  }
+  if (strip.childElementCount) body.appendChild(strip);
+}
+
+/** Pictures a turn shows in its row; the rest open from the last of them. */
+const TURN_SHOTS_SHOWN = 5;
+
+/**
+ * The windows and browser tabs a turn ended on, under its reply.
+ *
+ * The agent reads the accessibility tree rather than looking, so a turn in a
+ * native app often has no picture of its own; the host takes one of each
+ * window when the turn ends (see turn-shots.ts). Out in the turn rather than
+ * folded into a step, because it is the result — what the work left behind —
+ * and one per window at most. Above the fork and copy bar, which belongs last.
+ *
+ * One row however many there are: a turn through six windows and six tabs
+ * would otherwise stack four rows of pictures under a two-line reply.
+ */
+function turnShots(wrap, shots) {
+  if (!wrap || !shots || !shots.length) return;
+  let strip = wrap.querySelector(":scope > .turn-shots");
+  if (!strip) {
+    strip = el("div", "turn-shots");
+    const bar = wrap.querySelector(":scope > .actions");
+    if (bar) wrap.insertBefore(strip, bar);
+    else wrap.appendChild(strip);
+  }
+  for (const shot of shots) {
+    const figure = el("figure", "turn-shot");
+    const frame = el("div", "turn-shot-frame");
+    const img = document.createElement("img");
+    img.src = q(shot.src);
+    img.alt = shot.app || "";
+    img.loading = "lazy";
+    img.addEventListener("click", () => previewImage(img));
+    img.addEventListener("error", () => { figure.remove(); fitTurnShots(strip); });
+    frame.appendChild(img);
+    figure.appendChild(frame);
+    // A browser tab is captioned by the browser and the page; its title says
+    // more than its host, which is the fallback.
+    const label = shot.kind === "browser"
+      ? t("turnShots.browser") + " — " + (shot.title || shot.app)
+      : shot.title ? shot.app + " — " + shot.title : shot.app;
+    const caption = el("figcaption", "", label);
+    caption.title = caption.textContent;
+    figure.appendChild(caption);
+    strip.appendChild(figure);
+  }
+  fitTurnShots(strip);
+  follow();
+}
+
+/**
+ * Show the first pictures of a row and fold the rest behind a "+N" on the last
+ * one shown. Run again whenever the row changes: Computer use and the browser
+ * each add theirs, and a picture that fails to load takes itself out.
+ */
+function fitTurnShots(strip) {
+  const figures = [...strip.querySelectorAll(":scope > .turn-shot")];
+  const more = figures.length - TURN_SHOTS_SHOWN;
+  strip.querySelectorAll(".turn-shot-more").forEach((badge) => badge.remove());
+  figures.forEach((figure, index) => { figure.hidden = index >= TURN_SHOTS_SHOWN; });
+  if (more <= 0) return;
+  const last = figures[TURN_SHOTS_SHOWN - 1];
+  const img = last.querySelector("img");
+  const badge = el("button", "turn-shot-more", "+" + more);
+  badge.type = "button";
+  badge.setAttribute("aria-label", t("turnShots.more", { n: more }));
+  badge.addEventListener("click", () => previewImage(img));
+  last.querySelector(".turn-shot-frame").appendChild(badge);
+}
+
+/**
+ * An image at full size, over the page.
+ *
+ * It used to open in a new tab, which in the desktop app is a new window with
+ * no way back but closing it — and a blob URL there is a blank page. This
+ * stays in the conversation: Esc or a click anywhere closes it, and the arrow
+ * keys step through the other images in the same row, which for a turn of
+ * screenshots is the order the agent saw them in.
+ */
+function previewImage(img) {
+  const strip = img.closest(".turn-shots, .tool-shots, .shots, #tray") || img.parentElement;
+  const row = [...strip.querySelectorAll("img")];
+  let at = Math.max(0, row.indexOf(img));
+  const scrim = el("div", "img-preview");
+  const big = document.createElement("img");
+  big.alt = "";
+  const count = el("div", "img-preview-count");
+  scrim.append(big, count);
+  const show = () => {
+    big.src = row[at].src;
+    count.textContent = row.length > 1 ? at + 1 + " / " + row.length : "";
+  };
+  const close = () => {
+    scrim.remove();
+    document.removeEventListener("keydown", onKey, true);
+  };
+  const onKey = (event) => {
+    if (event.key === "Escape") close();
+    else if (event.key === "ArrowRight" && at < row.length - 1) { at++; show(); }
+    else if (event.key === "ArrowLeft" && at > 0) { at--; show(); }
+    else return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  scrim.addEventListener("click", close);
+  document.addEventListener("keydown", onKey, true);
+  show();
+  document.body.appendChild(scrim);
+}
+
 /**
  * A clip as a card rather than the browser's player.
  *
@@ -772,7 +958,7 @@ function pane(id) {
     const node = el("div", "pane");
     node.hidden = true;
     log.appendChild(node);
-    entry = { node, title: "", cwd: "", busy: false, queued: [], turn: null, streaming: null, tools: new Map(), thinking: null };
+    entry = { id, node, title: "", cwd: "", busy: false, queued: [], turn: null, streaming: null, tools: new Map(), thinking: null };
     panes.set(id, entry);
   }
   return entry;
@@ -865,7 +1051,9 @@ async function focusTab(id) {
   setNav(null);
   paintEmpty(panes.get(id));
   paintTabs();
+  paintSuggestion();
   browserActivateSession();
+  void computerActivateSession();
 
   const state = await getJson("/state?session=" + encodeURIComponent(id));
   if (!state.error) applyState(state);

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

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

package/dist/page/client/usage.js

@@ -770,19 +770,10 @@ function usageQuery(path) {
     : path + "?range=" + encodeURIComponent(usageRange);
 }
 
-/** The page's heading, its way back, and — for an account — whose figures these are. */
+/** The page's heading and, for an account, whose figures these are. */
 function usageHead(panel) {
   const head = el("div", "row-head");
   head.appendChild(el("h2", null, t("usage.title")));
-  // Back to where this was opened from, because it was opened from a row in
-  // Settings and the sidebar row it lit is already showing as active — with
-  // no way out, the only exit is a sidebar click that looks like a no-op.
-  const back = el("button", "ghost", t("usage.back"));
-  back.type = "button";
-  back.addEventListener("click", () => {
-    setNav("nav-settings");
-    void showSettings();
-  });
   /*
    * Whose figures these are, as a small switch in the heading rather than a
    * third row of tabs.
@@ -807,7 +798,6 @@ function usageHead(panel) {
     }
     actions.appendChild(box);
   }
-  actions.appendChild(back);
   head.appendChild(actions);
   panel.appendChild(head);
 }

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

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