@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/transcript.js

@@ -0,0 +1,699 @@
+/**
+ * The transcript itself, the tool cards it is made of, and the session tabs
+ * above it. Tool presentation is shared with the approval dialog, so a call
+ * reads the same whether it is waiting on an answer or already done.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const TRANSCRIPT = String.raw `
+// --- transcript -----------------------------------------------------------
+
+const emptyEl = document.getElementById("empty");
+
+function hideEmpty() {
+  if (emptyEl && emptyEl.parentNode) emptyEl.remove();
+  // The workspace goes with it: the first message is what roots a transcript
+  // in a tree, and after that there is nothing left to choose.
+  paintWorkspace(false);
+}
+
+/**
+ * The invitation belongs to whichever transcript is empty.
+ *
+ * It is one node that moves into the pane it is for, so a tab switch has to
+ * carry it: dropping it on every focus left a session nobody had typed in yet
+ * showing a blank rectangle, which is easy to reach now that a session can be
+ * started in another project while this one is mid-thought.
+ *
+ * The workspace chip answers the same question — has anything been said here
+ * yet — so it is painted from the same place rather than from a second guess
+ * about what is on screen.
+ */
+function paintEmpty(record) {
+  const bare = Boolean(
+    record && (record.node.childElementCount === 0 || record.node.contains(emptyEl)),
+  );
+  if (bare && emptyEl) record.node.appendChild(emptyEl);
+  else if (!bare) hideEmpty();
+  paintWorkspace(bare);
+}
+
+/** Keep the chip current without deciding again whether it belongs on screen. */
+function refreshWorkspace() {
+  if (workspaceRow && !workspaceRow.hidden) paintWorkspace(true);
+}
+
+/** The chip, and what it currently says. */
+function paintWorkspace(show) {
+  if (!workspaceRow) return;
+  workspaceRow.hidden = !show;
+  if (!show) return;
+  // The project on screen leads, and a directory that is no longer there is
+  // left out: it cannot host a session, and offering it only produces an
+  // error one click later.
+  const here = (project) => (project.path === currentCwd ? 0 : 1);
+  workspacePicker.set(
+    projects
+      .filter((project) => !project.missing)
+      .sort((a, b) => here(a) - here(b))
+      .map((project) => ({ value: project.path, label: project.name, sub: project.path })),
+    currentCwd,
+  );
+}
+
+/**
+ * The pane events are currently being rendered into.
+ *
+ * Set per event from its session id rather than read from the visible tab: a
+ * background tab keeps streaming, and rendering by what is on screen would
+ * pour its reply into whichever transcript the user happens to be reading.
+ */
+let P = null;
+
+function turn(role) {
+  hideEmpty();
+  const wrap = el("div", "turn column " + role);
+  wrap.appendChild(el("div", "who", role === "user" ? "you" : "assistant"));
+  P.node.appendChild(wrap);
+  follow();
+  return wrap;
+}
+
+function follow() {
+  if (atBottom) log.scrollTop = log.scrollHeight;
+}
+
+log.addEventListener("scroll", () => {
+  atBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 60;
+  jumpBtn.hidden = atBottom;
+});
+
+jumpBtn.addEventListener("click", () => {
+  atBottom = true;
+  jumpBtn.hidden = true;
+  log.scrollTop = log.scrollHeight;
+});
+
+/**
+ * A message as it was sent, pictures included.
+ *
+ * The images are sources, not bytes: a replayed transcript points at
+ * /attachment, and a message just sent from this tab points at the object
+ * URL the composer already made for its chip. Either way the bubble shows
+ * what was attached, instead of a line of text claiming something was.
+ */
+function addUser(text, images) {
+  const wrap = turn("user");
+  const bubble = el("div", "bubble", text);
+  if (images && images.length) {
+    const strip = el("div", "shots");
+    for (const image of images) {
+      const img = document.createElement("img");
+      img.src = image.src.startsWith("blob:") ? image.src : q(image.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"));
+      strip.appendChild(img);
+    }
+    bubble.appendChild(strip);
+  }
+  wrap.appendChild(bubble);
+  P.turn = null;
+  P.streaming = null;
+}
+
+function assistantTurn() {
+  if (!P.turn) P.turn = turn("assistant");
+  return P.turn;
+}
+
+/**
+ * The actions that belong to one reply.
+ *
+ * Forking is a point in a conversation, and the only place a point exists is a
+ * message — so the control lives at the end of the reply it would branch from,
+ * not in a sidebar where it can only ever mean "from the end".
+ */
+/**
+ * Close the reasoning block once the answer starts.
+ *
+ * Left open it pushes the reply off the screen, and the reasoning is rarely
+ * what the reader came for — but the time it took is worth keeping visible.
+ *
+ * The handle is dropped along with the spinner: a reply that reasons, calls a
+ * tool and reasons again is two bursts, and folding the second one into a block
+ * already labelled "Thought for 3s" hides it behind a stale summary.
+ */
+function sealThinking() {
+  const block = P.turn && P.turn.__thinking;
+  if (!block || block.__sealed) return;
+  block.__sealed = true;
+  block.open = false;
+  const seconds = Math.round((Date.now() - (P.turn.__thinkingStart || Date.now())) / 1000);
+  block.querySelector(".spinner").remove();
+  block.querySelector(".t-label").textContent =
+    seconds >= 1 ? t("work.thoughtFor", { n: seconds }) : t("work.thoughtAbout");
+  P.turn.__thinking = null;
+  P.turn.__thinkingStart = 0;
+}
+
+/** A turn's action: an icon, then what it does. */
+function actButton(icon, label) {
+  const button = el("button", "act");
+  button.type = "button";
+  button.appendChild(svgIcon(icon));
+  button.appendChild(el("span", "act-label", label));
+  return button;
+}
+
+function turnActions(wrap, keepMessages) {
+  if (!keepMessages || wrap.querySelector(":scope > .actions")) return;
+  const bar = el("div", "actions");
+
+  const fork = actButton("fork", t("turn.fork"));
+  fork.addEventListener("click", () => {
+    setNav(null);
+    void switchTo({ action: "fork", keepMessages });
+  });
+  bar.appendChild(fork);
+
+  const copy = actButton("copy", t("turn.copy"));
+  const copyLabel = copy.querySelector(".act-label");
+  copy.addEventListener("click", () => {
+    const md = wrap.querySelector(".md");
+    navigator.clipboard?.writeText(md ? md.textContent : wrap.textContent);
+    // The label alone, so the confirmation does not take the icon with it and
+    // leave the button jumping a notch narrower for a second.
+    copyLabel.textContent = t("turn.copied");
+    setTimeout(() => (copyLabel.textContent = t("turn.copy")), 1200);
+  });
+  bar.appendChild(copy);
+
+  wrap.appendChild(bar);
+}
+
+/**
+ * The collapsible activity log for the current turn.
+ *
+ * Tool calls are how the work got done, not what the work is — so they fold
+ * away by default and the reply and the diff stay in view. A failure opens the
+ * group, because then the activity *is* the thing to read.
+ */
+function workGroup() {
+  const parent = assistantTurn();
+  let group = parent.querySelector(":scope > details.work:last-of-type");
+  if (!group) {
+    group = el("details", "work");
+    const summary = el("summary");
+    summary.appendChild(el("span", "work-label", t("work.working")));
+    group.appendChild(summary);
+    group.appendChild(el("div", "work-body"));
+    parent.appendChild(group);
+  }
+  return group;
+}
+
+/**
+ * A run of tool calls, said in a line: what was done, not how many steps it
+ * took.
+ *
+ * "3 steps" was true and told nobody anything; the reason to look at a folded
+ * group is to know whether it is the part worth opening. So the line is built
+ * from the calls themselves. A call that says what it is for — a command's
+ * description, a subagent's task — is quoted; the rest are named by what they
+ * do, and neighbours of one kind are counted rather than listed ("Read 3
+ * files"). While a call is running its phrase is in the present ("Running a
+ * command"), and a failure leads, in red, because that is the one thing
+ * nobody should have to open the group to find. Two phrases are shown and the
+ * rest counted, which is how Claude Code's desktop app reads.
+ */
+function bumpWorkLabel(group) {
+  const cards = [...group.querySelectorAll(":scope > .work-body > details.tool")];
+  const phrases = [];
+  let failed = false;
+  let failures = 0;
+  for (const card of cards) {
+    const info = card.toolInfo || {};
+    const state = card.classList.contains("failed") ? "failed" : card.classList.contains("done") ? "done" : "running";
+    const input = info.input && typeof info.input === "object" ? info.input : {};
+    const described = typeof input.description === "string" ? input.description.trim() : "";
+    if (state === "failed") {
+      failed = true;
+      // First, not in sequence: counted into a "+2" it would be the one
+      // phrase the red line is about and the one it does not show.
+      phrases.splice(failures++, 0, { text: failedPhrase(info.name, input, described) });
+      continue;
+    }
+    if (described) {
+      phrases.push({ text: described });
+      continue;
+    }
+    const kind = workKind(info.name);
+    const last = phrases.at(-1);
+    if (last && last.kind === kind && last.state === state) {
+      last.count += 1;
+      continue;
+    }
+    phrases.push({ kind, state, count: 1, name: info.name, input });
+  }
+
+  const texts = phrases.map((phrase) => phrase.text || kindPhrase(phrase));
+  const shown = texts.slice(0, 2).map((text, i) => (i ? lowerFirst(text) : text));
+  let label = shown.join(t("work.sep"));
+  if (texts.length > 2) label += " +" + (texts.length - 2);
+  group.querySelector(".work-label").textContent = label || t("work.working");
+  group.classList.toggle("failed", failed);
+}
+
+/** Which verb a tool gets when it did not say what it was for. */
+function workKind(name) {
+  if (name === "bash") return "command";
+  if (name === "read" || name === "artifact_read" || name === "mcp_read_resource") return "read";
+  if (name === "write" || name === "artifact_write") return "write";
+  if (name === "edit") return "edit";
+  if (name === "list" || name === "mcp_list_resources") return "list";
+  if (name === "glob" || name === "grep") return "search";
+  if (name === "recall" || name === "memory") return "recall";
+  if (name === "todo_write") return "plan";
+  if (name === "skill") return "skill";
+  if (name === "ask_user") return "ask";
+  return "other";
+}
+
+/** The last segment of a path, which is what a person recognises. */
+function baseName(value) {
+  if (typeof value !== "string" || !value) return "";
+  return value.replace(/\/+$/, "").split("/").pop() || value;
+}
+
+function kindPhrase(phrase) {
+  const now = phrase.state === "running";
+  const many = phrase.count > 1;
+  const file = baseName(phrase.input.path);
+  switch (phrase.kind) {
+    case "command":
+      return now ? t("work.commandNow") : many ? t("work.commandN", { n: phrase.count }) : t("work.command");
+    case "read":
+    case "write":
+    case "edit":
+      if (now) return t("work." + phrase.kind + "Now", { file: file || "…" });
+      if (many) return t("work." + phrase.kind + "N", { n: phrase.count });
+      return t("work." + phrase.kind, { file: file || "…" });
+    case "list":
+      // No path is the working directory, and "Listed ." reads as a typo.
+      if (!file || file === ".") return t(now ? "work.listHereNow" : "work.listHere");
+      return t(now ? "work.listNow" : "work.list", { dir: file });
+    case "search":
+      return now ? t("work.searchNow") : many ? t("work.searchN", { n: phrase.count }) : t("work.search");
+    case "recall":
+    case "plan":
+    case "ask":
+      return t("work." + phrase.kind + (now ? "Now" : ""));
+    case "skill":
+      return t(now ? "work.skillNow" : "work.skill", { name: String(phrase.input.name || "") });
+    default:
+      return t(now ? "work.otherNow" : "work.other", { tool: toolTitle(phrase.name, phrase.input) });
+  }
+}
+
+function failedPhrase(name, input, described) {
+  if (name === "bash") {
+    const command = typeof input.command === "string" ? input.command.trim().split("\n")[0] : "";
+    const what = described || (command.length > 32 ? command.slice(0, 32) + "…" : command);
+    return t("work.failedRun", { what: what || t("work.aCommand") });
+  }
+  return t("work.failed", { tool: described || toolTitle(name, input) });
+}
+
+/**
+ * The second phrase continues a sentence, so it starts lower-case — unless it
+ * opens with a name or an acronym, which keeps its capital.
+ */
+function lowerFirst(text) {
+  if (text.length > 1 && text[1] === text[1].toLowerCase() && /^[A-Z]/.test(text)) {
+    return text[0].toLowerCase() + text.slice(1);
+  }
+  return text;
+}
+
+// --- tool presentation -----------------------------------------------------
+// Shared by the tool cards and the approval dialog, so a call reads the same
+// whether it is waiting on an answer or already done.
+
+/** Display names and marks for Cloud apps, learned from catalog answers and connection cards. */
+const cloudApps = new Map();
+
+function learnCloudApp(slug, label, logo) {
+  if (typeof slug !== "string" || !slug) return;
+  const known = cloudApps.get(slug) || {};
+  cloudApps.set(slug, {
+    label: typeof label === "string" && label ? label : known.label,
+    logo: typeof logo === "string" && logo ? logo : known.logo,
+  });
+}
+
+function cloudAppName(slug) {
+  const known = cloudApps.get(slug);
+  if (known && known.label) return known.label;
+  const words = String(slug || "").replace(/_/g, " ");
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+/** The app's mark, only when it is https — see connectionCard for why. */
+function cloudAppLogo(slug) {
+  const known = cloudApps.get(slug);
+  if (!known || !known.logo) return undefined;
+  try {
+    const parsed = new URL(known.logo);
+    return parsed.protocol === "https:" ? parsed.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function isEmptyInput(value) {
+  return value === undefined || value === null ||
+    (typeof value === "object" && !Array.isArray(value) && Object.keys(value).length === 0);
+}
+
+/** mcp__github__create_issue reads as "github · create_issue". */
+function friendlyToolName(name) {
+  const match = /^mcp__(.+?)__(.+)$/.exec(name || "");
+  return match ? match[1] + " · " + match[2] : name || "";
+}
+
+/**
+ * A call's one-line name, worked out here rather than taken from the engine:
+ * the engine's titles are English, and a replayed transcript only carries the
+ * tool's name — which is how a reload used to turn "Gmail · send_email" back
+ * into cloud_app_execute.
+ */
+function toolTitle(name, input, fallback) {
+  const args = input && typeof input === "object" ? input : {};
+  if (name === "cloud_app_tools") {
+    return typeof args.app === "string" ? t("tool.cloudAppTools", { app: cloudAppName(args.app) }) : t("tool.cloudApps");
+  }
+  if (name === "cloud_app_execute" && typeof args.app === "string") {
+    return cloudAppName(args.app) + (typeof args.tool === "string" ? " · " + args.tool : "");
+  }
+  if (name === "ask_user" && Array.isArray(args.questions)) {
+    return t("tool.ask", { header: args.questions.map((q) => q && q.header).filter(Boolean).join(" · ") });
+  }
+  // The engine's own title when a tool wrote one, like Bash(npm test). Its
+  // default is the bare name followed by a JSON preview, which says less than
+  // the readable name does and is cut off mid-string.
+  if (fallback && fallback !== name && !fallback.startsWith(name + "(")) return fallback;
+  return friendlyToolName(name);
+}
+
+/** Parameters as a table: text keeps its line breaks, short lists become chips. */
+function paramTable(params) {
+  const table = el("div", "kv");
+  for (const [key, value] of Object.entries(params)) {
+    const cell = el("div", "kv-v");
+    if (value === null || value === undefined || value === "") {
+      cell.textContent = "—";
+      cell.classList.add("empty");
+    } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      cell.textContent = String(value);
+    } else if (Array.isArray(value) && value.length && value.every((item) => typeof item === "string" || typeof item === "number")) {
+      for (const item of value) cell.appendChild(el("span", "kv-chip", String(item)));
+    } else {
+      const pre = el("pre", "mono");
+      pre.textContent = JSON.stringify(value, null, 2);
+      cell.appendChild(pre);
+    }
+    table.append(el("div", "kv-k", key), cell);
+  }
+  return table;
+}
+
+/**
+ * One line for a catalog answer, which is otherwise a single line of JSON.
+ * Written against the fields rather than a schema: a shape it does not
+ * recognise falls back to showing the raw answer, never to a wrong sentence.
+ */
+function catalogSummary(text) {
+  let data;
+  try { data = JSON.parse(text); } catch { return ""; }
+  if (!data || typeof data !== "object") return "";
+  if (typeof data.app === "string") learnCloudApp(data.app, data.label, data.logo);
+  if (Array.isArray(data.apps)) {
+    const names = data.apps.map((app) => {
+      if (typeof app === "string") return cloudAppName(app);
+      if (!app || typeof app !== "object") return "";
+      const slug = app.slug || app.app || app.id;
+      learnCloudApp(slug, app.label || app.name, app.logo);
+      return app.label || app.name || (slug ? cloudAppName(slug) : "");
+    }).filter(Boolean);
+    return names.length ? t("tool.catalogApps", { n: names.length, names: names.join(", ") }) : "";
+  }
+  if (Array.isArray(data.tools) && typeof data.app === "string") {
+    return t("tool.catalogTools", { app: cloudAppName(data.app), n: data.tools.length });
+  }
+  return "";
+}
+
+/**
+ * A card for a call the model is still writing: the name is known, the
+ * arguments are not. Without it a long file write was a reply that said "now
+ * writing the file" and then showed nothing until the whole file had streamed.
+ */
+function pendingToolCard(id, name) {
+  if (P.tools.has(id)) return;
+  const card = el("details", "tool");
+  const summary = el("summary");
+  summary.appendChild(el("span", "dot"));
+  summary.appendChild(el("span", "name", toolTitle(name)));
+  summary.appendChild(el("span", "ms", ""));
+  card.appendChild(summary);
+  const body = el("div", "tool-body");
+  card.appendChild(body);
+
+  card.toolInfo = { name };
+  const group = workGroup();
+  group.querySelector(".work-body").appendChild(card);
+  bumpWorkLabel(group);
+  P.tools.set(id, { card, body, name, input: undefined, group, pending: true });
+  P.streaming = null;
+  follow();
+}
+
+/**
+ * Drop the cards for calls that were announced and never ran — an unknown tool
+ * or bad input is answered without a tool_start, and a retried request gets
+ * fresh ids. Left alone they would pulse forever.
+ */
+function dropPendingTools() {
+  for (const [id, entry] of P.tools) {
+    if (!entry.pending) continue;
+    entry.card.remove();
+    P.tools.delete(id);
+    const count = entry.group.querySelector(".work-body").children.length;
+    if (count) bumpWorkLabel(entry.group);
+    else entry.group.remove();
+  }
+}
+
+function toolCard(id, title, name, input) {
+  const announced = P.tools.get(id);
+  const card = announced ? announced.card : el("details", "tool");
+  if (announced) {
+    card.querySelector(".name").textContent = toolTitle(name, input, title);
+  } else {
+    const summary = el("summary");
+    summary.appendChild(el("span", "dot"));
+    summary.appendChild(el("span", "name", toolTitle(name, input, title)));
+    summary.appendChild(el("span", "ms", ""));
+    card.appendChild(summary);
+  }
+
+  const body = announced ? announced.body : el("div", "tool-body");
+  // An app call is its arguments; the app, tool and version are already the
+  // title or plumbing. A call with nothing to show gets no "input" label over
+  // an empty {} — which was most of what a catalog lookup used to draw. A
+  // question has its own card.
+  const shown = name === "cloud_app_execute" && input && typeof input === "object" ? input.arguments : input;
+  if (name !== "ask_user" && !isEmptyInput(shown)) {
+    body.appendChild(el("div", "label", "input"));
+    const tabular = shown && typeof shown === "object" && !Array.isArray(shown) &&
+      (name.startsWith("cloud_app_") || name.startsWith("mcp__"));
+    if (tabular) body.appendChild(paramTable(shown));
+    else {
+      const pre = el("pre", "mono");
+      pre.textContent = JSON.stringify(shown, null, 2);
+      body.appendChild(pre);
+    }
+  }
+  card.toolInfo = { name, input };
+  if (announced) {
+    P.tools.set(id, { card, body, name, input, group: announced.group });
+    // The arguments have arrived, and with them the description or the path
+    // the line was waiting for.
+    bumpWorkLabel(announced.group);
+    follow();
+    return;
+  }
+  card.appendChild(body);
+
+  const group = workGroup();
+  group.querySelector(".work-body").appendChild(card);
+  bumpWorkLabel(group);
+  P.tools.set(id, { card, body, name, input, group });
+  P.streaming = null;
+  follow();
+}
+
+function finishTool(id, result, ms, isError) {
+  const entry = P.tools.get(id);
+  if (!entry) return;
+  entry.card.classList.add(isError ? "failed" : "done");
+  entry.card.querySelector(".ms").textContent = ms + "ms";
+  // Running becomes ran, or the group turns red.
+  if (entry.group) bumpWorkLabel(entry.group);
+
+  const text = (result || []).map((part) => (part.type === "text" ? part.text : "")).join("");
+  entry.body.appendChild(el("div", "label", isError ? "error" : "result"));
+
+  // An edit is much easier to check as a diff than as two blobs of text.
+  // The edit tool's parameters are oldString/newString. An earlier version of
+  // this read oldText/newText, so the diff branch never once ran.
+  const before = entry.input && entry.input.oldString;
+  const after = entry.input && entry.input.newString;
+  if (entry.name === "edit" && typeof before === "string" && typeof after === "string") {
+    entry.body.appendChild(renderDiff(before, after));
+  } else {
+    const pre = el("pre", "mono");
+    pre.textContent = text.length > 4000 ? text.slice(0, 4000) + "\n… truncated" : text;
+    const summary = entry.name === "cloud_app_tools" && !isError ? catalogSummary(text) : "";
+    if (summary) {
+      entry.body.appendChild(el("div", "tool-summary", summary));
+      const raw = el("details", "tool-raw");
+      raw.appendChild(el("summary", "", t("tool.rawResult")));
+      raw.appendChild(pre);
+      entry.body.appendChild(raw);
+      // The answer may have named the app better than its slug did.
+      entry.card.querySelector(".name").textContent = toolTitle(entry.name, entry.input);
+    } else {
+      entry.body.appendChild(pre);
+    }
+  }
+  if (isError) {
+    // A failed step is the one thing worth surfacing without a click.
+    entry.card.open = true;
+    if (entry.group) entry.group.open = true;
+  }
+  follow();
+}
+
+
+// --- tabs ------------------------------------------------------------------
+
+/**
+ * One transcript per session, kept in the DOM rather than re-fetched.
+ *
+ * A background tab keeps streaming, so its nodes have to stay live: rebuilding
+ * from history on every switch would drop whatever arrived while it was hidden
+ * and restart any in-flight reply from the top.
+ */
+const tabsEl = document.getElementById("tabs");
+const panes = new Map();
+let activeId = null;
+
+function pane(id) {
+  let entry = panes.get(id);
+  if (!entry) {
+    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 };
+    panes.set(id, entry);
+  }
+  return entry;
+}
+
+function paintTabs() {
+  tabsEl.replaceChildren();
+
+  // Every tab says which project it is in, as "project / session": the
+  // native title bar is gone, so the strip is the only place that names what
+  // is on screen, and a tab should read the same whether or not its
+  // neighbours share its tree.
+  for (const [id, entry] of panes) {
+    const tab = el("button", "tab" + (id === activeId ? " on" : ""));
+    tab.type = "button";
+    if (entry.busy) tab.appendChild(el("span", "dot"));
+    if (entry.cwd) tab.appendChild(el("span", "where", projectName(entry.cwd)));
+    tab.appendChild(el("span", "label", entry.title || t("session.untitled")));
+    tab.appendChild(browserTabButton(id));
+
+    // Icons rather than the × and + characters: a glyph sits where its font
+    // puts it, below the middle of the line, while the tab's other controls
+    // are icons centred in their boxes.
+    const close = el("button", "x");
+    close.appendChild(svgIcon("close"));
+    close.type = "button";
+    close.title = t("tabs.close");
+    close.setAttribute("aria-label", t("tabs.close"));
+    close.addEventListener("click", (e) => {
+      e.stopPropagation();
+      void closeTab(id);
+    });
+    tab.appendChild(close);
+
+    tab.addEventListener("click", () => void focusTab(id));
+    tabsEl.appendChild(tab);
+  }
+
+  const add = el("button");
+  add.appendChild(svgIcon("plus"));
+  add.id = "tab-add";
+  add.type = "button";
+  add.title = t("tabs.new");
+  add.setAttribute("aria-label", t("tabs.new"));
+  add.addEventListener("click", () => void switchTo({ action: "new" }));
+  tabsEl.appendChild(add);
+}
+
+async function focusTab(id) {
+  if (!panes.has(id)) return;
+  activeId = id;
+  for (const [key, entry] of panes) entry.node.hidden = key !== id;
+  setNav(null);
+  paintEmpty(panes.get(id));
+  paintTabs();
+  browserActivateSession();
+
+  const state = await getJson("/state?session=" + encodeURIComponent(id));
+  if (!state.error) applyState(state);
+  await api("/session", { action: "focus", id });
+  await loadSidePanels();
+  // A tab carries its tree with it: the header, the folder dialog and @ all
+  // follow the session being looked at rather than the last one started. The
+  // sidebar comes with them — it groups by project and marks the session in
+  // hand, and both of those just changed.
+  if (panes.get(id)) panes.get(id).cwd = state.cwd || panes.get(id).cwd;
+  await loadProjects();
+  await loadSessions();
+}
+
+async function closeTab(id) {
+  const body = await api("/session", { action: "close", id });
+  const entry = panes.get(id);
+  if (entry) entry.node.remove();
+  panes.delete(id);
+  browserForgetSession(id);
+
+  // Never leave the page with no transcript: fall back to whatever is left, or
+  // open a fresh session if that was the last one.
+  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();
+}
+`;
+//# sourceMappingURL=transcript.js.map