@oharness/server 0.7.1 → 0.9.0

package/dist/page/client/state.js

@@ -0,0 +1,1283 @@
+/**
+ * Session state: what the server says is true, the sidebar list it paints,
+ * and the row menu.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const STATE = String.raw `
+// --- state ----------------------------------------------------------------
+
+let currentCwd = "";
+
+/**
+ * A token count at the precision anyone reads one at.
+ *
+ * Exact below a thousand, because early in a session the difference between
+ * 300 and 900 is the whole story. Rounded after that: nobody is checking the
+ * hundreds column of a number that changes every turn, and a line under the
+ * composer that grows a digit every message is a line that moves.
+ */
+function formatTokens(n) {
+  if (n < 1000) return String(n);
+  if (n < 1000000) return (n / 1000).toFixed(n < 10000 ? 1 : 0) + "k";
+  return (n / 1000000).toFixed(1) + "M";
+}
+
+/**
+ * How many tokens this session has moved, and how many of them were free.
+ *
+ * The cache figure is a share of what went *in* — reads over reads plus
+ * writes plus fresh input — because that is the number someone can act on: a
+ * low one means the prompt is being rebuilt every turn and the bill says so.
+ * Output is not in that denominator; nothing generated can be cached.
+ *
+ * Both stay empty until there is something to say. A session that has not
+ * sent a message yet showing "0 tokens · 0% cached" reads as a failure.
+ */
+function paintTokens(usage) {
+  const u = usage || {};
+  const sent = (u.input || 0) + (u.cacheRead || 0) + (u.cacheWrite || 0);
+  const all = sent + (u.output || 0);
+  tokensEl.textContent = all ? t("usage.tokens", { n: formatTokens(all) }) : "";
+  cacheEl.textContent = u.cacheRead
+    ? t("usage.cached", { pct: Math.round((u.cacheRead / sent) * 100) })
+    : "";
+}
+
+function applyState(s) {
+  if (!s) return;
+  if (s.model) modelPicker.set(modelPicker.options || [], s.model);
+  if (s.mode) modePicker.set(MODES, s.mode);
+  effortPicker.set(s);
+  if (s.cwd) {
+    // Kept so the approval dialog can show a path the way the user thinks of
+    // it — src/web/page.ts, not the whole absolute path they already know.
+    currentCwd = s.cwd.replace(/\/+$/, "");
+    // The transcript is drawn before the state arrives, so a chip painted then
+    // still names the tree of the tab this one replaced.
+    refreshWorkspace();
+  }
+  metaEl.textContent = s.costUsd > 0 ? "$" + s.costUsd.toFixed(4) : "";
+  paintTokens(s.usage);
+  const meta = document.getElementById("meta");
+  // A meter reading 0% is noise: it says nothing and takes the eye.
+  // Shown from half a window on, not from half a percent. Below that there is
+  // nothing to act on, and a bar sitting at 2% all day is a permanent piece of
+  // furniture that says the same thing every time you look at it.
+  meta.classList.toggle("has-ctx", typeof s.contextUsed === "number" && s.contextUsed >= 0.5);
+  if (typeof s.contextUsed === "number") {
+    const pct = Math.round(s.contextUsed * 100);
+    ctxBar.style.width = pct + "%";
+    ctxBar.style.background = pct >= 90 ? "var(--err)" : pct >= 70 ? "var(--warn)" : "var(--ok)";
+    ctxText.textContent = pct + "%";
+  }
+  setBusy(Boolean(s.busy));
+  // Addressed by session: a reload and a tab switch both land here, and the
+  // pane this state describes is not always the one an event last touched.
+  if (s.sessionId) pane(s.sessionId).queued = s.queued || [];
+  renderQueued();
+  // The state knows the session's name; a tab opened before it had one would
+  // otherwise keep the placeholder until the page reloaded.
+  if (s.sessionId && s.title && pane(s.sessionId).title !== s.title) {
+    pane(s.sessionId).title = s.title;
+    paintTabs();
+  }
+  // The side panel keeps the conversation it shows in step with the person's
+  // tab groups, so it needs to know which one that is.
+  if (s.sessionId && s.sessionId === activeId) embedTell({ type: "session", id: s.sessionId, cwd: currentCwd });
+}
+
+let workingNode = null;
+let workingSince = 0;
+let workingTimer = null;
+let workingLabel = "Thinking";
+
+/**
+ * The gap between sending and the first token.
+ *
+ * A model can spend twenty seconds reasoning before it emits anything, and
+ * until now the page showed nothing at all in that window — indistinguishable
+ * from a request that never left. The row appears immediately and reports what
+ * the agent is doing and for how long.
+ */
+function startWorking(label) {
+  workingLabel = label || t("work.thinking");
+  if (workingNode) return void paintWorking();
+  workingSince = Date.now();
+
+  workingNode = el("div", "working");
+  workingNode.appendChild(el("span", "spinner"));
+  workingNode.appendChild(el("span", "working-label"));
+  workingNode.appendChild(el("span", "working-time"));
+  assistantTurn().appendChild(workingNode);
+
+  workingTimer = setInterval(paintWorking, 1000);
+  paintWorking();
+  follow();
+}
+
+function paintWorking() {
+  if (!workingNode) return;
+  const seconds = Math.round((Date.now() - workingSince) / 1000);
+  workingNode.querySelector(".working-label").textContent = workingLabel + "…";
+  // Elapsed time, because "is it stuck?" is the question this row answers.
+  workingNode.querySelector(".working-time").textContent = seconds >= 2 ? seconds + "s" : "";
+}
+
+function stopWorking() {
+  if (workingTimer) clearInterval(workingTimer);
+  workingTimer = null;
+  if (workingNode && workingNode.parentNode) workingNode.remove();
+  workingNode = null;
+}
+
+function setBusy(busy) {
+  if (P) P.busy = busy;
+  paintTabs();
+  // While a turn runs, the send arrow becomes a stop square in the same spot.
+  sendBtn.disabled = busy;
+  sendBtn.hidden = busy;
+  stopBtn.hidden = !busy;
+  if (!busy) stopWorking();
+  // The row itself does not change, but whether the queue can be released by
+  // hand does, and that is drawn on the send button.
+  renderQueued();
+}
+
+/** "just now", "12m", "3h", "yesterday", "6 Aug" — scannable at a glance. */
+function ago(ms) {
+  const seconds = Math.max(0, (Date.now() - ms) / 1000);
+  if (seconds < 60) return t("time.now");
+  if (seconds < 3600) return Math.floor(seconds / 60) + "m";
+  if (seconds < 86400) return Math.floor(seconds / 3600) + "h";
+  if (seconds < 172800) return t("time.yesterday");
+  return new Date(ms).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+/**
+ * Which projects the user opened or closed, remembered across reloads.
+ *
+ * Only what was actually clicked is stored, so a project nobody touched keeps
+ * following the default — the one being worked in is open, the rest are shut.
+ * A sidebar that reopens with every tree expanded makes closing one pointless,
+ * and one that reopens fully collapsed hides the sessions it exists to show.
+ */
+const projectOpen = readProjectOpen();
+
+function readProjectOpen() {
+  try {
+    const raw = JSON.parse(localStorage.getItem("oharness.projects") || "{}");
+    return raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
+  } catch {
+    return {};
+  }
+}
+
+function toggleProject(cwd, open) {
+  projectOpen[cwd] = !open;
+  try {
+    localStorage.setItem("oharness.projects", JSON.stringify(projectOpen));
+  } catch {
+    // Private browsing, a full quota: opening still works for this page load.
+  }
+  paintSessions();
+}
+
+/** The key the routine group's open state is kept under, beside the projects'. */
+const ROUTINE_GROUP = "\u0000routines";
+
+/**
+ * The header over routine runs. A fold like a project's, with the clock the
+ * Routines page uses, and none of a project's actions: there is no new session
+ * to start in it, and deleting runs is done row by row.
+ */
+function routineHead(count, open) {
+  const head = el("button", "fold" + (open ? " open" : ""));
+  head.type = "button";
+  head.appendChild(navIcon("nav-routines"));
+  head.appendChild(el("span", "fold-name", t("session.routines")));
+  head.appendChild(el("span", "count", String(count)));
+  head.addEventListener("click", () => toggleProject(ROUTINE_GROUP, open));
+  return head;
+}
+
+/** A project header: a folder, a name, and how many sessions it holds. */
+function projectHead(cwd, name, count, open) {
+  const head = el("button", "fold" + (open ? " open" : ""));
+  head.type = "button";
+  // The folder itself says which state it is in — it is the only thing on the
+  // row that can, now that there is no arrow beside it.
+  head.appendChild(svgIcon(open ? "folderOpen" : "folder"));
+  head.appendChild(el("span", "fold-name", name));
+  if ((projects.find((project) => project.path === cwd) || {}).pinned) {
+    head.appendChild(svgIcon("pin", "pin-mark"));
+  }
+  head.addEventListener("click", () => toggleProject(cwd, open));
+
+  // A fresh session in this project without switching to it first. Where the
+  // count used to sit: the count said how much was there, and this is the one
+  // thing people came to the header to do about it.
+  const add = el("button", "more fold-new");
+  add.type = "button";
+  add.title = t("nav.new");
+  add.setAttribute("aria-label", t("nav.new"));
+  add.appendChild(navIcon("new"));
+  add.addEventListener("click", (e) => {
+    e.stopPropagation();
+    void switchTo({ action: "new", cwd });
+  });
+
+  /*
+   * Deleting a project is deleting its transcripts, and it lives here rather
+   * than beside "remove from list" in the picker because this header is the
+   * only place the two can be told apart. The sidebar groups by the tree a
+   * session was recorded in, not by the list of projects — so forgetting a
+   * path leaves this header exactly where it was, and somebody who reached
+   * for "delete" and watched nothing happen would be right to think the app
+   * was broken. What removes a project from here is removing its sessions.
+   */
+  const more = el("button", "more");
+  more.type = "button";
+  more.title = t("session.more");
+  more.setAttribute("aria-label", t("projects.delete", { n: count }));
+  more.appendChild(svgIcon("more"));
+  more.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuRow === head) return closeRowMenu();
+    openMenu(more);
+  });
+  // The same menu under the pointer: a right-click on a project is asking for
+  // it, and the browser's own (Back, Reload, View Source) is about the page.
+  head.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openMenu(pointAnchor(e));
+  });
+
+  function openMenu(anchor) {
+    // Armed once before it fires, like the session row it borrows from: this
+    // is a modal's worth of consequence reached from a list row, and the
+    // consequence is spelled out where a dialog would put it.
+    const del = menuItem(t("projects.delete", { n: count }), { key: "d", danger: true, run: () => {
+      if (!del.classList.contains("armed")) {
+        del.classList.add("armed");
+        del.querySelector(".menu-label").textContent = t("projects.deleteConfirm");
+        rowMenu.replaceChildren(el("div", "menu-note", t("projects.deleteNote")), del);
+        placeRowMenu(anchor);
+        return;
+      }
+      closeRowMenu();
+      void deleteProject(cwd, name);
+    } });
+
+    const pinned = (projects.find((project) => project.path === cwd) || {}).pinned === true;
+    const items = [
+      menuItem(t("projects.open"), { key: "o", run: () => {
+        closeRowMenu();
+        void chooseProject(cwd);
+      } }),
+      menuItem(t(pinned ? "projects.unpin" : "projects.pin"), { key: "p", run: () => {
+        closeRowMenu();
+        void togglePin("project", cwd, !pinned);
+      } }),
+      menuItem(t("projects.files"), { key: "i", run: () => {
+        closeRowMenu();
+        void openExplorer(cwd, true);
+      } }),
+      menuItem(t("projects.terminal"), { key: "t", run: () => {
+        closeRowMenu();
+        void openTerminalIn(cwd, true);
+      } }),
+      menuItem(t(IS_MAC ? "projects.revealMac" : IS_WIN ? "projects.revealWin" : "projects.reveal"), { key: "f", run: () => {
+        closeRowMenu();
+        void api("/reveal", { path: cwd }).then((body) => {
+          if (body && body.error) addNotice(body.error, "err");
+        });
+      } }),
+      menuItem(t("projects.export"), { key: "e", run: () => {
+        closeRowMenu();
+        exportProjectUi(cwd);
+      } }),
+      menuItem(t("projects.rename"), { key: "n", run: () => {
+        closeRowMenu();
+        void renameProjectUi(cwd, name);
+      } }),
+    ];
+    // Forgetting a path is only offered where it can do something: this row
+    // stays on screen either way, because the sidebar groups by the tree a
+    // transcript was recorded in — but the switcher's list is the one place
+    // this project would stop appearing, and reaching that from here saves
+    // opening the switcher to find it.
+    if (projects.some((project) => project.path === cwd && !project.current)) {
+      items.push(menuItem(t("projects.forget"), { key: "r", run: () => {
+        closeRowMenu();
+        void api("/project", { path: cwd, remove: true }).then((body) => {
+          if (body && body.error) return void addNotice(body.error, "err");
+          addNotice(t("projects.forgot", { name }));
+          return loadProjects();
+        });
+      } }));
+    }
+    items.push(menuSep(), del);
+    openRowMenu(anchor, head, items);
+  }
+
+  // The header is a button, so the menu control cannot live inside it.
+  const wrap = el("div", "fold-row");
+  wrap.appendChild(head);
+  wrap.appendChild(add);
+  wrap.appendChild(more);
+
+  draggable(wrap, {
+    kind: "project",
+    key: cwd,
+    group: (projects.find((project) => project.path === cwd) || {}).pinned ? "pinned" : "",
+    siblings: () => [...sessionList.querySelectorAll(".fold-row")].map((row) => row.dataset.cwd),
+    commit: (paths) => {
+      projectOrder = paths;
+      paintSessions();
+      void api("/order", { kind: "project", ids: paths }).then((body) => {
+        if (body && body.error) addNotice(body.error, "err");
+      });
+    },
+  });
+  wrap.dataset.cwd = cwd;
+  return wrap;
+}
+
+/**
+ * Pin or unpin, and repaint from what the server confirms.
+ *
+ * The row is not moved optimistically: a pin changes where something sits in
+ * a list, and a row that jumped and then jumped back because the write failed
+ * is worse than one that waits for the answer it is about to reflect.
+ */
+async function togglePin(kind, id, pinned) {
+  const body = await api("/pin", { kind, id, pinned });
+  if (body && body.error) return void addNotice(body.error, "err");
+  if (kind === "project") await loadProjects();
+  else await loadSessions();
+}
+
+/**
+ * Delete everything recorded about one tree.
+ *
+ * The tabs go with it for the same reason a deleted session's does: a pane
+ * pointing at a transcript that is gone accepts a prompt and fails on the
+ * first write. The server decides where the window lands afterwards and says
+ * so; the page follows rather than guessing, because only the server knows
+ * whether anywhere else was left to go.
+ */
+async function deleteProject(cwd, name) {
+  const body = await api("/project", { path: cwd, purge: true });
+  // Said, but not returned on: deletion happens before the window is moved, so
+  // a failure here can still have thrown transcripts away. Leaving the stale
+  // rows on screen would be the one outcome worse than the error itself.
+  if (body.error) {
+    addNotice(body.error, "err");
+    sessionRows = sessionRows.filter((s) => s.cwd !== cwd);
+    paintSessions();
+    await loadSessions();
+    return void (await loadProjects());
+  }
+
+  const open = new Set(body.open || []);
+  for (const [id, pane] of [...panes]) {
+    if (open.has(id)) continue;
+    pane.node.remove();
+    panes.delete(id);
+  }
+  paintTabs();
+
+  if (body.state) await adoptSession(body.state);
+  addNotice(t("projects.deleted", { name, n: body.deleted }));
+
+  sessionRows = sessionRows.filter((s) => s.cwd !== cwd);
+  paintSessions();
+  await loadSessions();
+  await loadProjects();
+}
+
+let sessionRows = [];
+
+async function loadSessions() {
+  const body = await getJson("/sessions");
+  sessionRows = body.sessions || [];
+  sessionOrder = body.order || {};
+  paintSessions();
+}
+
+/**
+ * How many sessions a project shows before it says there are more.
+ *
+ * Enough to recognise the work in progress, few enough that the project under
+ * it is still on screen — the sidebar is how every *other* project is reached,
+ * and one busy tree can hold dozens of transcripts.
+ */
+const PREVIEW = 5;
+
+/** Projects the user asked to see in full, for this page load. */
+const showingAll = new Set();
+
+/**
+ * Order somebody arranged by hand, and what they kept at the top.
+ *
+ * Read from the server with the lists themselves rather than kept only here:
+ * a sidebar that remembered an arrangement until the next reload would be
+ * offering a control that does not work, and the two windows a desktop app
+ * can have open would each hold their own idea of the order.
+ */
+let sessionOrder = {};
+let projectOrder = [];
+
+/**
+ * Sort one list by pin, then by hand, then by whatever it came in as.
+ *
+ * The hand-made order is partial on purpose: it holds what was dragged, and a
+ * row nobody has touched keeps arriving where it belongs — which for sessions
+ * is the top, because the newest one is almost always the one being looked
+ * for. Ordering by an index taken once would send tomorrow's session to the
+ * bottom of a list arranged today.
+ */
+function arrange(rows, keyOf, order, pinnedOf) {
+  const rank = new Map((order || []).map((key, i) => [key, i]));
+  const placed = (row) => (rank.has(keyOf(row)) ? rank.get(keyOf(row)) : Infinity);
+  return rows
+    .map((row, i) => ({ row, i }))
+    .sort((a, b) => {
+      const pin = Number(pinnedOf(b.row)) - Number(pinnedOf(a.row));
+      if (pin) return pin;
+      const hand = placed(a.row) - placed(b.row);
+      if (hand) return hand;
+      // Both untouched, or both dragged to the same place: whatever order the
+      // list already had, which is recency for sessions.
+      return a.i - b.i;
+    })
+    .map((entry) => entry.row);
+}
+
+/**
+ * The session list: by project, and by nothing else.
+ *
+ * Sessions are stored per user directory, not per project, so this list spans
+ * every tree opened here, and flat it reads another project's transcripts as
+ * this one's history. Age is not a second cut: the rows already carry their
+ * age, they arrive newest first, and date headings split one project's work
+ * across four of them to say what "2h" says on the row itself.
+ */
+function paintSessions() {
+  // The rows are rebuilt, so the row an open menu points at is about to be
+  // replaced by a different node in a different place.
+  closeRowMenu();
+  sessionList.replaceChildren();
+
+  const active = sessionRows.find((s) => s.current);
+  const here = active ? active.cwd : (projects.find((p) => p.current) || {}).path;
+
+  // A routine's runs are kept together rather than mixed into the project's
+  // own work: they arrive on their own, often overnight, and the question
+  // someone opens them with is "what did my routines do", not "what was I
+  // doing in this project". Claude Code's desktop app draws the same line.
+  const scheduled = sessionRows.filter((s) => s.routine);
+  const byProject = new Map();
+  for (const s of sessionRows) {
+    if (s.routine) continue;
+    const key = s.cwd || "";
+    if (!byProject.has(key)) byProject.set(key, []);
+    byProject.get(key).push(s);
+  }
+
+  // The project being worked in comes first whether or not it holds the most
+  // recent session; the rest follow by how recently they were touched — and
+  // then a pin or a drag overrides both, because those were said out loud.
+  const pinnedProject = (cwd) => (projects.find((p) => p.path === cwd) || {}).pinned === true;
+  const order = arrange(
+    [...byProject.keys()].sort((a, b) => {
+      if (a === here) return -1;
+      if (b === here) return 1;
+      return byProject.get(b)[0].updatedAt - byProject.get(a)[0].updatedAt;
+    }),
+    (cwd) => cwd,
+    projectOrder,
+    pinnedProject,
+  );
+
+  // Everything here belongs to the project already named at the top of the
+  // sidebar: a header repeating it is noise, and the rows do not need
+  // indenting under a heading that is not there.
+  const named = !(order.length === 1 && order[0] === here) || scheduled.length > 0;
+
+  if (scheduled.length) {
+    const open = ROUTINE_GROUP in projectOpen ? projectOpen[ROUTINE_GROUP] === true : true;
+    sessionList.appendChild(routineHead(scheduled.length, open));
+    if (open) {
+      const all = showingAll.has(ROUTINE_GROUP) || scheduled.length <= PREVIEW + 1;
+      for (const s of all ? scheduled : scheduled.slice(0, PREVIEW)) {
+        sessionList.appendChild(sessionRow(s, true));
+      }
+      if (!all) sessionList.appendChild(showMore(ROUTINE_GROUP, true));
+    }
+  }
+
+  for (const cwd of order) {
+    const list = arrange(byProject.get(cwd), (s) => s.id, sessionOrder[cwd], (s) => s.pinned);
+    let open = true;
+    if (named) {
+      open = cwd in projectOpen ? projectOpen[cwd] === true : cwd === here;
+      sessionList.appendChild(projectHead(cwd, projectName(cwd), list.length, open));
+    }
+    if (!open) continue;
+
+    // A "Show more" that reveals one row costs a click to say what it already
+    // took a row to say, so the last one comes along rather than hiding.
+    // Pinned rows are never in the hidden tail: a pin that can be scrolled
+    // out of existence is not a pin.
+    const all = showingAll.has(cwd) || list.length <= PREVIEW + 1;
+    const shown = all
+      ? list
+      : list.filter((s, i) => i < PREVIEW || s.pinned);
+    for (const s of shown) sessionList.appendChild(sessionRow(s, named));
+    if (!all) sessionList.appendChild(showMore(cwd, named));
+  }
+}
+
+/**
+ * Dragging a row to a new place in its list.
+ *
+ * One helper for both lists, because the two differ only in what a row is
+ * keyed by and where the new order is sent. A row can only be dropped among
+ * its own kind — and a session only within its own project, since a
+ * transcript belongs to the tree it was recorded in and moving it to another
+ * project's list would be claiming something untrue about where it ran.
+ *
+ * Pinned and unpinned are separate groups for the same reason: pinned rows
+ * sort first no matter what order they were given, so a drop that crossed the
+ * line would be recorded and then ignored. Nothing lights up there now, which
+ * is the truth — to move a row past the pinned ones, unpin them or pin it.
+ *
+ * The insertion point is drawn on the row being hovered rather than as a
+ * floating line: the list is rebuilt constantly, and a separate indicator
+ * element would have to be found and removed on every repaint.
+ */
+let dragging = null;
+
+function draggable(node, { kind, key, group, siblings, commit }) {
+  node.draggable = true;
+
+  node.addEventListener("dragstart", (e) => {
+    dragging = { kind, key, group };
+    node.classList.add("dragging");
+    // Firefox refuses to start a drag without data on the transfer.
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", key);
+    }
+    closeRowMenu();
+  });
+
+  node.addEventListener("dragend", () => {
+    dragging = null;
+    node.classList.remove("dragging");
+    for (const other of sessionList.querySelectorAll(".drop-before,.drop-after")) {
+      other.classList.remove("drop-before", "drop-after");
+    }
+  });
+
+  node.addEventListener("dragover", (e) => {
+    if (!dragging || dragging.kind !== kind || dragging.group !== group) return;
+    if (dragging.key === key) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    const box = node.getBoundingClientRect();
+    const after = e.clientY > box.top + box.height / 2;
+    node.classList.toggle("drop-before", !after);
+    node.classList.toggle("drop-after", after);
+  });
+
+  node.addEventListener("dragleave", () => {
+    node.classList.remove("drop-before", "drop-after");
+  });
+
+  node.addEventListener("drop", (e) => {
+    if (!dragging || dragging.kind !== kind || dragging.group !== group) return;
+    e.preventDefault();
+    const after = node.classList.contains("drop-after");
+    node.classList.remove("drop-before", "drop-after");
+    const moved = dragging.key;
+    if (moved === key) return;
+
+    // The whole list, not just the rows on screen: a hidden tail that
+    // reordered itself the moment it was revealed would be the same bug as
+    // not recording the order at all.
+    const next = siblings().filter((one) => one !== moved);
+    const at = next.indexOf(key);
+    next.splice(after ? at + 1 : at, 0, moved);
+    commit(next);
+  });
+}
+
+/** The row that unfolds the rest of a project's sessions. */
+function showMore(cwd, nested) {
+  const more = el("button", "show-more" + (nested ? " nested" : ""), t("session.showMore"));
+  more.type = "button";
+  more.addEventListener("click", () => {
+    showingAll.add(cwd);
+    paintSessions();
+  });
+  return more;
+}
+
+/**
+ * The overflow menu, one node reused by every row.
+ *
+ * A menu per row would put hundreds of hidden popups in the sidebar, and each
+ * repaint of the list would rebuild them all.
+ */
+const rowMenu = el("div", "row-menu");
+rowMenu.hidden = true;
+document.body.appendChild(rowMenu);
+/** The row the menu currently belongs to, so it can be un-highlighted. */
+let menuRow = null;
+
+function closeRowMenu() {
+  if (menuRow) menuRow.classList.remove("menu-open");
+  menuRow = null;
+  rowMenu.hidden = true;
+  rowMenu.replaceChildren();
+  rowMenu.classList.remove("fit-anchor", "account-menu");
+  rowMenu.style.width = "";
+}
+
+/**
+ * Anchored under its button, nudged back inside the viewport if it overflows.
+ *
+ * Called again whenever the contents change: confirming grows the menu, and a
+ * menu near the bottom of the list would otherwise grow off the screen.
+ */
+function placeRowMenu(button) {
+  const anchor = button.getBoundingClientRect();
+  const box = rowMenu.getBoundingClientRect();
+  const left = Math.min(anchor.left, window.innerWidth - box.width - 8);
+  const gap = rowMenu.classList.contains("account-menu") ? 8 : 4;
+  const below = anchor.bottom + gap;
+  const top = below + box.height > window.innerHeight - 8 ? anchor.top - box.height - gap : below;
+  rowMenu.style.left = Math.max(8, left) + "px";
+  rowMenu.style.top = Math.max(8, top) + "px";
+}
+
+/**
+ * One line of a row menu: what it does, and the letter that does it.
+ *
+ * The letter is not a second way to reach a rare action — it is how the menu
+ * stops being a mouse-only detour for the three things done most often to a
+ * session. Held on the element rather than in a table, so the key handler
+ * reads the menu that is actually open instead of a list that has to be kept
+ * in step with it.
+ */
+/**
+ * The three themes, side by side and pressed rather than cycled.
+ *
+ * A cycling entry made the reader click twice to reach dark and told them the
+ * current state only by reading a word. Three targets say what the options are
+ * and which one is on, in one glance and one click — and it is the control the
+ * site already uses in the same menu, so the two are recognisably the same
+ * thing rather than two designs for one preference.
+ *
+ * Not a menuItem: this row is not a command, and closing the menu on click
+ * would hide the change the click was for.
+ */
+function themeRow() {
+  const row = el("div", "menu-theme");
+  row.appendChild(el("span", "menu-label", t("theme.label")));
+  const group = el("div", "theme-group");
+  group.setAttribute("role", "group");
+  group.setAttribute("aria-label", t("theme.label"));
+  THEMES.forEach((option) => {
+    const button = el("button", "theme-btn");
+    button.type = "button";
+    button.title = t("theme." + option);
+    button.setAttribute("aria-label", t("theme." + option));
+    button.setAttribute("aria-pressed", String(option === theme));
+    button.appendChild(svgIcon("theme" + option[0].toUpperCase() + option.slice(1)));
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      theme = option;
+      applyTheme();
+      // The menu stays open and repaints its own pressed states: the point of
+      // three buttons is that the next one is one click away.
+      [...group.children].forEach((node, i) => {
+        node.setAttribute("aria-pressed", String(THEMES[i] === theme));
+      });
+    });
+    group.appendChild(button);
+  });
+  row.appendChild(group);
+  return row;
+}
+
+function menuItem(label, opts) {
+  const item = el("button", "menu-item" + (opts.danger ? " danger" : "") + (opts.cls ? " " + opts.cls : ""));
+  item.type = "button";
+  item.appendChild(el("span", "menu-label", label));
+  if (opts.key) {
+    item.appendChild(el("kbd", "menu-key", opts.key.toUpperCase()));
+    item.dataset.key = opts.key.toLowerCase();
+  }
+  item.addEventListener("click", opts.run);
+  return item;
+}
+
+/** The rule between what a menu does and what it destroys. */
+function menuSep() {
+  return el("div", "menu-sep");
+}
+
+/**
+ * Something placeRowMenu can hang a menu from when there is no button: the
+ * point a right-click landed on, as a rectangle with no size.
+ */
+function pointAnchor(e) {
+  const rect = { left: e.clientX, right: e.clientX, top: e.clientY, bottom: e.clientY, width: 0, height: 0 };
+  return { getBoundingClientRect: () => rect };
+}
+
+function openRowMenu(button, row, items) {
+  closeRowMenu();
+  rowMenu.replaceChildren(...items);
+  rowMenu.hidden = false;
+  menuRow = row;
+  row.classList.add("menu-open");
+  placeRowMenu(button);
+}
+
+// The menu is positioned in viewport coordinates, so anything that moves the
+// row it points at — scrolling the list, resizing — leaves it stranded.
+document.addEventListener("click", (e) => {
+  if (!rowMenu.hidden && !rowMenu.contains(e.target)) closeRowMenu();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") return void closeRowMenu();
+  if (rowMenu.hidden || e.metaKey || e.ctrlKey || e.altKey) return;
+  // Not while something is being typed — a menu open behind a rename field
+  // would eat the letters going into it.
+  const on = document.activeElement;
+  if (on && (on.tagName === "INPUT" || on.tagName === "TEXTAREA" || on.isContentEditable)) return;
+  const item = rowMenu.querySelector('[data-key="' + e.key.toLowerCase() + '"]');
+  if (!item) return;
+  e.preventDefault();
+  item.click();
+});
+window.addEventListener("resize", closeRowMenu);
+sessionList.addEventListener("scroll", closeRowMenu);
+// Nowhere in the sidebar is the browser's menu the one meant: a row answers
+// with its own above, and the space between rows answers with nothing rather
+// than with Back, Reload and View Source. Text fields keep theirs — paste.
+sidebarEl.addEventListener("contextmenu", (e) => {
+  if (e.target.closest("input, textarea, [contenteditable]")) return;
+  e.preventDefault();
+});
+
+function sessionRow(s, nested) {
+  const item = el("div", "session" + (s.current ? " active" : "") + (nested ? " nested" : ""));
+  // The id is a timestamp and a hash: true, and useless for picking one out
+  // of a list. The first thing asked is what a person remembers.
+  item.appendChild(el("div", "title", s.title || t("session.untitled")));
+  // Outside the title rather than in it: that line ellipsises, and a mark that
+  // vanishes with the end of a long name is not a mark.
+  if (s.pinned) item.appendChild(svgIcon("pin", "pin-mark"));
+
+  draggable(item, {
+    kind: "session",
+    key: s.id,
+    group: (s.cwd || "") + (s.pinned ? " pinned" : ""),
+    // Every session in this project, in the order they are currently shown —
+    // including the ones folded away, which are still in the list this order
+    // is about.
+    siblings: () =>
+      arrange(
+        sessionRows.filter((one) => (one.cwd || "") === (s.cwd || "")),
+        (one) => one.id,
+        sessionOrder[s.cwd || ""],
+        (one) => one.pinned,
+      ).map((one) => one.id),
+    commit: (ids) => {
+      sessionOrder = { ...sessionOrder, [s.cwd || ""]: ids };
+      paintSessions();
+      void api("/order", { kind: "session", cwd: s.cwd || "", ids }).then((body) => {
+        if (body && body.error) addNotice(body.error, "err");
+      });
+    },
+  });
+
+  // When it was, how long it ran, and where it came from — what picks a
+  // session out of a list. What it cost is not: it is the same three cents on
+  // every row, it answers a question nobody asks while looking for a
+  // transcript, and it now has a page and a line under the composer of its
+  // own, which is where a number worth comparing belongs.
+  //
+  // The turn count went the same way, and for a plainer reason: it is not how
+  // anybody picks a session out of a list. It says how long a conversation ran,
+  // not what it was about or whether this is the one being looked for.
+  const bits = [ago(s.updatedAt)];
+  if (s.forkedFrom) bits.push("fork");
+  item.appendChild(el("div", "sub", bits.join(" · ")));
+
+  const more = el("button", "more");
+  more.type = "button";
+  more.title = t("session.more");
+  more.setAttribute("aria-label", t("session.more"));
+  more.appendChild(svgIcon("more"));
+  more.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuRow === item) return closeRowMenu();
+    openMenu(more);
+  });
+  // Right-click opens the row's own menu where the pointer is, instead of the
+  // browser's, which has nothing to say about a session.
+  item.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openMenu(pointAnchor(e));
+  });
+
+  function openMenu(anchor) {
+    // A transcript cannot be recovered, so the item asks once rather than
+    // deleting on the click that opened the menu — but a modal for something
+    // reached from a list row is heavier than what it protects against. The
+    // consequence is spelled out above the button, the way a dialog would.
+    const del = menuItem(t("session.delete"), { key: "d", danger: true, run: () => {
+      if (!del.classList.contains("armed")) {
+        del.classList.add("armed");
+        del.querySelector(".menu-label").textContent = t("session.deleteConfirm");
+        rowMenu.replaceChildren(el("div", "menu-note", t("session.deleteNote")), del);
+        placeRowMenu(anchor);
+        return;
+      }
+      closeRowMenu();
+      void deleteSession(s.id);
+    } });
+
+    openRowMenu(anchor, item, [
+      menuItem(t(s.pinned ? "session.unpin" : "session.pin"), { key: "p", run: () => {
+        closeRowMenu();
+        void togglePin("session", s.id, !s.pinned);
+      } }),
+      menuItem(t("session.rename"), { key: "r", run: () => {
+        closeRowMenu();
+        renameInPlace(item, s);
+      } }),
+      // From where it stands, unlike the fork on a turn, which branches at
+      // that turn. Same verb, and the difference is which point it keeps.
+      menuItem(t("session.fork"), { key: "f", run: () => {
+        closeRowMenu();
+        void openSession(s.id, s.cwd).then(() => switchTo({ action: "fork" }));
+      } }),
+      menuSep(),
+      del,
+    ]);
+  }
+  item.appendChild(more);
+
+  item.addEventListener("click", () => {
+    setNav(null);
+    if (s.current) return;
+    // A session belongs to the tree it was recorded in — resuming it under
+    // another project's harness would point its tools at files the transcript
+    // never mentions — so the row hands over the tree it names and the session
+    // opens on that one.
+    void openSession(s.id, s.cwd);
+  });
+  return item;
+}
+
+/**
+ * Rename a session where it sits.
+ *
+ * In the row rather than in a dialog, because the thing being edited is one
+ * short line that is already on screen and a modal would ask somebody to
+ * retype it while covering it up. The list is rebuilt on every repaint, so the
+ * field commits or cancels before anything else can pull the row out from
+ * under it.
+ */
+function renameInPlace(row, s) {
+  const title = row.querySelector(".title");
+  if (!title) return;
+  const field = el("input", "title-edit");
+  field.value = s.title || "";
+  field.placeholder = t("session.untitled");
+
+  let done = false;
+  const finish = async (save) => {
+    if (done) return;
+    done = true;
+    const next = field.value.trim();
+    field.replaceWith(title);
+    if (!save || !next || next === s.title) return;
+    const body = await api("/rename", { id: s.id, title: next });
+    if (body && body.error) return void addNotice(body.error, "err");
+    s.title = next;
+    title.textContent = next;
+    // The tab carries the title too, and the sidebar is not the only place
+    // this name appears.
+    paintTabs();
+    await loadSessions();
+  };
+
+  field.addEventListener("keydown", (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") void finish(true);
+    if (e.key === "Escape") void finish(false);
+  });
+  // Clicking away is a commit, not a cancel: the field looks like the row it
+  // replaced, and losing what was typed to a click elsewhere reads as a bug.
+  field.addEventListener("blur", () => void finish(true));
+  field.addEventListener("click", (e) => e.stopPropagation());
+
+  title.replaceWith(field);
+  field.focus();
+  field.select();
+}
+
+/**
+ * Delete a session for good: transcript, archive and metadata.
+ *
+ * If it is open as a tab the tab has to go with it — a pane pointing at a
+ * deleted session would accept a prompt and fail on the first write.
+ */
+async function deleteSession(id) {
+  const body = await api("/session", { action: "delete", id });
+  if (body.error) return void addNotice(body.error, "err");
+
+  if (panes.has(id)) {
+    panes.get(id).node.remove();
+    panes.delete(id);
+    if (activeId === id) {
+      const next = (body.open || []).find((other) => panes.has(other)) || [...panes.keys()][0];
+      if (next) await focusTab(next);
+      else await switchTo({ action: "new" });
+    }
+    paintTabs();
+  }
+
+  // Lineage is recorded on the branches, not the parent, so deleting a parent
+  // leaves them pointing at nothing. Said once, rather than blocked.
+  if (body.forks) addNotice(t("session.deletedForks", { n: body.forks }), "notice");
+
+  sessionRows = sessionRows.filter((s) => s.id !== id);
+  paintSessions();
+  await loadSessions();
+}
+
+/** Reopen a session, on the harness for the tree it was recorded in. */
+async function openSession(id, cwd) {
+  await switchTo({ action: "resume", id, ...(cwd ? { cwd } : {}) });
+  await loadProjects();
+}
+
+// The side panel asks for a conversation when the person moves to one of its
+// tab groups. Only the extension page this one is framed in may ask, and all
+// it can ask for is a conversation this page could open anyway.
+if (IS_EMBED) {
+  window.addEventListener("message", (event) => {
+    if (event.source !== window.parent || !/^chrome-extension:/.test(event.origin)) return;
+    const data = event.data || {};
+    if (data.type === "open-session" && typeof data.id === "string" && data.id !== activeId) {
+      if (panes.has(data.id)) void focusTab(data.id);
+      else void openSession(data.id, typeof data.cwd === "string" ? data.cwd : undefined);
+      return;
+    }
+    // "Use this tab": the person pressed it in the panel, on the tab they
+    // are looking at, for the conversation the panel shows.
+    if (data.type === "adopt-tab" && (typeof data.tabId === "number" || typeof data.tabId === "string") && activeId) {
+      void api("/browser/adopt", { session: activeId, tabId: data.tabId }).then((result) => {
+        if (result && result.error) addNotice(result.error, "err");
+        else if (result && result.url) addNotice(t("embed.adopted", { url: result.url }));
+        embedTell({ type: "adopted", ok: !(result && result.error) });
+      });
+    }
+  });
+}
+
+let modelOptions = [];
+let providers = [];
+
+async function loadModels() {
+  const body = await getJson("/models");
+  if (body.error) return void addNotice(body.error, "err");
+  const models = body.models || [];
+  providers = body.providers || [];
+  // Kept for the connect dialog, which needs somewhere to send a person for a
+  // key and is opened from places that have no response of their own to read.
+  modelsSite = body.site || modelsSite;
+
+  // Grouped by vendor. Three things decide the order, in this order:
+  //
+  //   the recommended vendor, which leads even unconnected — for someone with
+  //     nothing set up it is the answer to the question the list poses, and
+  //     burying it under the vendors they happen to hold keys for hides the
+  //     one row that would have saved them the trouble;
+  //   whether the vendor has anything to list, because a local server nobody
+  //     is running counts as connected — no key is needed to reach it — and
+  //     three empty stubs above Anthropic is not a ranking anyone asked for;
+  //   whether it is connected, so an unauthenticated model is still shown —
+  //     it explains why the list is short — but not above one that will
+  //     actually answer.
+  //
+  // Catalog order breaks the ties, which is where the head of the list is set.
+  const populated = new Set(models.map((m) => m.provider));
+  const order = new Map(
+    providers.map((p, i) => [
+      p.id,
+      (p.recommended ? 0 : (populated.has(p.id) ? 0 : 2000) + (p.configured ? 0 : 1000)) + i,
+    ]),
+  );
+  // One closure per vendor, not one per model: four hundred rows repaint on
+  // every keystroke in the search field.
+  const vendorLabels = new Map(providers.map((p) => [p.id, p.label || p.id]));
+  const markers = new Map(
+    providers.map((p) => [
+      p.id,
+      (extra) => providerMark(p.id, vendorLabels.get(p.id) || p.id, extra),
+    ]),
+  );
+  const markFor = (id) =>
+    markers.get(id) || ((extra) => providerMark(id, id, extra));
+
+  // No context window here. It is a number you consult when choosing a model
+  // once, not every time you pick one off a list you already know, and printed
+  // down the right of four hundred rows it competes with the only thing the
+  // row is for — the name. The panel and the provider dialog still carry it,
+  // where a model is being chosen rather than switched to.
+  const listed = models.map((m) => ({
+    value: m.id,
+    // Without the provider: the group header above the row already names it,
+    // and "official/" repeated down every row pushes the part that differs to
+    // the right. An aggregator's own namespace stays — "~anthropic/…" under
+    // OpenRouter is what tells its rows apart. The whole id is still what
+    // search matches, so typing it as /model takes it works here too.
+    label: m.id.indexOf(m.provider + "/") === 0 ? m.id.slice(m.provider.length + 1) : m.id,
+    keywords: m.id,
+    group: m.provider,
+    mark: markFor(m.provider),
+    // The id is left whole even where it already ends in ":free". That suffix
+    // is OpenRouter's routing variant and part of the string somebody types
+    // into /model, and trimming it to save the repetition would render
+    // minimax-m2.7 and minimax-m2.7:free as the same row — two models that
+    // differ in what they cost, told apart by a badge alone. A vendor whose
+    // free models are not named for it gets the badge and nothing else, which
+    // is the case this exists for.
+    ...(m.free ? { tag: t("models.free") } : {}),
+  }));
+
+  // A vendor with nothing to list is still an answer. Local servers and the
+  // gateways nobody bundles model names for only have a roster once they are
+  // asked for one, and leaving them out of the picker entirely reads as "not
+  // supported" rather than "not connected yet" — so each gets one row that
+  // goes where that is fixed.
+  const stubs = providers
+    .filter((p) => !populated.has(p.id))
+    .map((p) => ({
+      value: "setup:" + p.id,
+      label: t(p.configured ? "menu.discover" : "menu.setUp"),
+      group: p.id,
+      mark: markFor(p.id),
+      sub: "",
+    }));
+
+  // Sorted as one list rather than models-then-stubs. Appended, a vendor with
+  // nothing discovered yet landed under four hundred rows of the vendors that
+  // had — which put the recommended plan, whose whole roster arrives only
+  // after signing in, at the very bottom of the menu meant to sell it.
+  // Within a vendor, the server's order: newest first by family, variants
+  // after their model (model-order.ts). A string sort here put claude-opus-4-5
+  // above claude-opus-5 and scattered :batch rows through the list.
+  const rank = new Map(models.map((m, i) => [m.id, i]));
+  modelOptions = listed.concat(stubs).sort(
+    (a, b) =>
+      (order.get(a.group) ?? 9999) - (order.get(b.group) ?? 9999) ||
+      (rank.get(a.value) ?? 0) - (rank.get(b.value) ?? 0),
+  );
+
+  const current = models.find((m) => m.current);
+  const recommended = new Set(providers.filter((p) => p.recommended).map((p) => p.id));
+  modelPicker.groupTag = (group) => (recommended.has(group) ? t("models.recommended") : null);
+  modelPicker.groupMark = (group) => markFor(group)();
+  modelPicker.options = modelOptions;
+  modelPicker.set(modelOptions, current ? current.id : null);
+}
+
+const connectionCards = new Map();
+
+function connectionCard(card) {
+  connectionCards.set(card.id, card);
+  learnCloudApp(card.app, card.label, card.logo);
+  const target = pane(card.session);
+  let box = target.node.querySelector('[data-connection-id="' + card.id + '"]');
+  if (!box) {
+    box = el("section", "row-card column connection-card");
+    box.dataset.connectionId = card.id;
+    box.setAttribute("aria-live", "polite");
+    target.node.appendChild(box);
+  }
+  box.replaceChildren();
+  const head = el("div", "connection-head");
+  /*
+   * The app's own mark, when Cloud sent one and it is https. A logo is the
+   * fastest way to tell Gmail from a page pretending to be Gmail, which is
+   * exactly why the URL is not taken on trust: it arrives from a vendor
+   * catalogue, and an http or javascript: src would be a hole opened for
+   * decoration. A card without one is a card with a blank square, never a
+   * broken image.
+   */
+  if (card.logo) {
+    let safe;
+    try { const parsed = new URL(card.logo); if (parsed.protocol === "https:") safe = parsed.href; } catch { safe = undefined; }
+    if (safe) {
+      const logo = el("img", "connection-logo");
+      logo.src = safe; logo.alt = ""; logo.loading = "lazy"; logo.referrerPolicy = "no-referrer";
+      logo.onerror = () => logo.remove();
+      head.appendChild(logo);
+    }
+  }
+  head.appendChild(el("span", "connection-name", card.label));
+  box.appendChild(head);
+  /*
+   * The key when there is one, the text when there is not. The engine writes
+   * both because the same card also reaches surfaces with no translation
+   * table; here, where there is one, a card that spoke a different language
+   * from the window around it was the bug.
+   */
+  box.appendChild(el("p", "", card.messageKey ? t(card.messageKey) : card.message));
+  if (card.state !== "required" && card.state !== "authorizing") return;
+  const actions = el("div", "connection-actions");
+  const start = el("button", "ghost", card.state === "authorizing" ? t("connect.open") : t("connect.action", { app: card.label }));
+  const cancel = el("button", "ghost", t("connect.cancel"));
+  actions.appendChild(start);
+  actions.appendChild(cancel);
+  box.appendChild(actions);
+  start.onclick = async () => {
+    start.disabled = true;
+    // Reserve a window in the click gesture; credentials never enter its URL.
+    const popup = window.open("about:blank", "_blank");
+    if (popup) popup.opener = null;
+    try {
+      const result = await api("/cloud-connection", { id: card.id, action: "start" }, 60000);
+      if (result.error) throw new Error(result.error);
+      if (result.redirectUrl) {
+        const url = new URL(result.redirectUrl);
+        if (url.protocol !== "https:" || url.username || url.password) throw new Error("无效授权链接");
+        if (popup && !popup.closed) popup.location.replace(url.href);
+        else {
+          const currentBox = target.node.querySelector('[data-connection-id="' + card.id + '"]');
+          if (currentBox && connectionCards.get(card.id)?.state === "authorizing") {
+            const link = el("a", "", t("connect.openLink"));
+            link.href = url.href; link.target = "_blank"; link.rel = "noopener noreferrer";
+            currentBox.appendChild(link);
+          }
+        }
+      } else if (popup) popup.close();
+    } catch (error) {
+      if (popup) popup.close();
+      box.appendChild(el("p", "err", error.message || t("connect.failed")));
+    } finally { start.disabled = false; }
+  };
+  cancel.onclick = async () => {
+    cancel.disabled = true;
+    try {
+      const result = await api("/cloud-connection", { id: card.id, action: "cancel" });
+      if (result.error) throw new Error(result.error);
+    } catch { box.appendChild(el("p", "err", t("connect.cancelFailed"))); }
+    finally { cancel.disabled = false; }
+  };
+}
+
+function renderHistory(entries, into) {
+  P = into || P;
+  const hasHistory = (entries || []).length > 0;
+  P.node.replaceChildren();
+  // A resumed session with nothing in it should still show the invitation
+  // rather than a blank rectangle — and, since nothing has been said in it
+  // yet, the choice of where it runs.
+  if (!hasHistory && emptyEl) P.node.appendChild(emptyEl);
+  if (P === panes.get(activeId)) paintWorkspace(!hasHistory);
+  P.tools.clear();
+  P.turn = null;
+  P.streaming = null;
+  for (const entry of entries || []) {
+    if (entry.role === "user") {
+      if (entry.text || (entry.images && entry.images.length)) {
+        addUser(entry.text || "", entry.images);
+      }
+      continue;
+    }
+    P.turn = null;
+    // Folded shut and without a duration: the seconds are a property of the
+    // stream, not of the message, so a reload has no honest number to show.
+    if (entry.thinking) {
+      const block = el("details", "thinking");
+      const summary = el("summary");
+      summary.appendChild(el("span", "t-label", t("work.thoughtAbout")));
+      block.appendChild(summary);
+      block.appendChild(el("div", "thinking-body", entry.thinking));
+      assistantTurn().appendChild(block);
+    }
+    if (entry.text) assistantTurn().appendChild(renderMarkdown(entry.text));
+    for (const call of entry.tools || []) toolCard(call.id, call.name, call.name, call.input);
+    for (const result of entry.results || []) {
+      finishTool(result.id, [{ type: "text", text: result.text }], 0, result.isError);
+    }
+    // The cards, again. Live, these come from the "artifact" event, which a
+    // replay does not produce — so a resumed conversation had every message and
+    // no way back to the things they made. The engine rebuilds the store from
+    // the same tool calls; this rebuilds their cards from them.
+    for (const call of entry.tools || []) {
+      if (call.name !== "artifact_write") continue;
+      const failed = (entry.results || []).some((r) => r.id === call.id && r.isError);
+      if (failed) continue;
+      const card = replayedArtifactCard(call.input);
+      if (card) assistantTurn().appendChild(card);
+    }
+    if (P.turn) turnActions(P.turn, entry.keepMessages);
+  }
+  for (const card of connectionCards.values()) {
+    if (pane(card.session) === P) connectionCard(card);
+  }
+  // A question still waiting, drawn again under the history that just
+  // replaced the pane. Settled ones are already in it, as their tool card.
+  for (const entry of questionCards.values()) {
+    if (entry.status === "open" && pane(entry.session) === P) paintQuestion(entry);
+  }
+  atBottom = true;
+  log.scrollTop = log.scrollHeight;
+}
+
+async function switchTo(body) {
+  const state = await api("/session", body);
+  if (state.error) return void addNotice(state.error, "err");
+
+  // A tab per session, focused on arrival.
+  const record = pane(state.sessionId);
+  record.title = state.title || "";
+  record.cwd = state.cwd || "";
+  activeId = state.sessionId;
+  P = record;
+  for (const [id, entry] of panes) entry.node.hidden = id !== activeId;
+  paintTabs();
+
+  const { entries } = await getJson("/history?session=" + encodeURIComponent(state.sessionId));
+  renderHistory(entries, record);
+  applyState(state);
+  setNav(null);
+  await loadSessions();
+  await loadSidePanels();
+}
+
+function addNotice(text, cls) {
+  // Connecting a provider reports back while a panel is up; that answer has to
+  // land where the user is looking, not in the transcript hidden behind it.
+  if (!panelView.hidden) return void panelNotes.appendChild(el("div", cls || "notice", text));
+  assistantTurn().appendChild(el("div", cls || "notice", text));
+  follow();
+}
+`;
+//# sourceMappingURL=state.js.map