@oharness/server 0.10.0 → 0.11.0

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

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

package/dist/page/client/terminal.js

@@ -84,7 +84,7 @@ function terminalActive() {
  * Asked again for the project already on show it hides, which is what the
  * tab's button wants; force keeps it open, for the menus.
  */
-async function openTerminalIn(cwd, force) {
+async function openTerminalIn(cwd, force, opts) {
   if (!cwd) return;
   if (terminalShownFor(cwd) && !force) return hideTerminal();
   track("panel_opened", { panel: "terminal" });
@@ -115,12 +115,28 @@ async function openTerminalIn(cwd, force) {
       const entry = terminalCreate(lib, cwd);
       void terminalAttach(entry, found, true);
     }
-    if (!group.tabs.length) await terminalNew(cwd);
-    else group.active = group.tabs[group.tabs.length - 1];
-  } else if (!group.tabs.length) {
+    if (!group.tabs.length && !(opts && opts.bare)) await terminalNew(cwd);
+    else if (group.tabs.length) group.active = group.tabs[group.tabs.length - 1];
+  } else if (!group.tabs.length && !(opts && opts.bare)) {
     await terminalNew(cwd);
   }
-  if (terminalCwd === cwd) terminalSelect(group.active);
+  if (terminalCwd === cwd && group.active) terminalSelect(group.active);
+}
+
+/**
+ * Hand the project to Claude Code: a new terminal tab running the user's own
+ * claude, signed in however they signed it in. OHarness starts it and stays
+ * out of the way — no login of ours, no token read — which is what keeps a
+ * Claude plan usable from here at all.
+ */
+async function openClaudeCode(cwd, resume) {
+  if (!cwd) return;
+  track("panel_opened", { panel: "claude-code" });
+  // bare: the panel without the plain shell it would otherwise start, since
+  // the tab being opened is the one that was asked for.
+  await openTerminalIn(cwd, true, { bare: true });
+  // resume: a session an @claude reply ran in, opened in Claude Code itself.
+  if (terminalCwd === cwd) await terminalNew(cwd, "claude", resume);
 }
 
 function hideTerminal() {
@@ -135,9 +151,13 @@ function terminalFollow(cwd) {
 }
 
 /** Another shell in the project on show, as a new tab in front. */
-async function terminalNew(cwd) {
+async function terminalNew(cwd, run, resume) {
   const lib = await loadTerminalLib();
   const entry = terminalCreate(lib, cwd);
+  // Only the first shell runs it: a tab restarted by typing after an exit is
+  // an ordinary shell, not a second Claude Code the user did not ask for.
+  if (run) entry.run = run;
+  if (run && resume) entry.resume = resume;
   terminalGroup(cwd).active = entry;
   terminalSelect(entry);
   await terminalStart(entry);
@@ -266,8 +286,15 @@ async function terminalStart(entry) {
   entry.id = null;
   if (replace) entry.term.reset();
   terminalFit(entry);
+  const run = entry.run;
+  const resume = entry.resume;
+  entry.run = undefined;
+  entry.resume = undefined;
   const body = await api("/term/open", {
-    cwd: entry.cwd, cols: entry.term.cols, rows: entry.term.rows, ...(replace ? { replace } : {}),
+    cwd: entry.cwd, cols: entry.term.cols, rows: entry.term.rows,
+    ...(replace ? { replace } : {}),
+    ...(run ? { run } : {}),
+    ...(resume ? { resume } : {}),
   });
   entry.starting = false;
   if (!body || body.error) {

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * 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 declare const THEME: string;

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

@@ -190,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", () => {
@@ -212,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);
 }
 
 /**
@@ -646,14 +667,20 @@ function toolShots(body, result) {
   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 a Computer use turn ended on, under its reply.
+ * 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;
@@ -666,21 +693,49 @@ function turnShots(wrap, shots) {
   }
   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());
-    figure.appendChild(img);
-    const caption = el("figcaption", "", shot.title ? shot.app + " — " + shot.title : shot.app);
+    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.
  *
@@ -996,6 +1051,7 @@ async function focusTab(id) {
   setNav(null);
   paintEmpty(panes.get(id));
   paintTabs();
+  paintSuggestion();
   browserActivateSession();
   void computerActivateSession();
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAigCnC,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"}