@oharness/server 0.7.1 → 0.8.0

package/dist/page/client/artifacts.js

@@ -0,0 +1,767 @@
+/**
+ * The two panes that hold a deliverable: the review pane for changed files,
+ * and the artifact shelf with its canvas bridge and publish flow.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const ARTIFACTS = String.raw `
+// --- review pane (the Codex-shaped part) ----------------------------------
+// The deliverable of a coding agent is the diff, so changed files get a pane
+// of their own rather than living inside a tool card the reader has to hunt
+// for. Activity collapses; the change stays.
+
+const review = document.getElementById("review");
+const filesEl = document.getElementById("files");
+const diffEl = document.getElementById("diff");
+const reviewSum = document.getElementById("review-sum");
+const changesBtn = document.getElementById("changes-btn");
+let changes = [];
+let selectedFile = null;
+
+function renderChanges(list) {
+  changes = list || [];
+  const totalAdd = changes.reduce((n, c) => n + (c.added || 0), 0);
+  const totalDel = changes.reduce((n, c) => n + (c.removed || 0), 0);
+
+  changesBtn.hidden = changes.length === 0;
+  changesBtn.replaceChildren();
+  if (changes.length) {
+    changesBtn.appendChild(el("b", null, changes.length + (changes.length === 1 ? " file" : " files")));
+    changesBtn.appendChild(document.createTextNode("  "));
+    changesBtn.appendChild(el("span", "plus", "+" + totalAdd));
+    changesBtn.appendChild(document.createTextNode(" "));
+    changesBtn.appendChild(el("span", "minus", "-" + totalDel));
+  }
+  reviewSum.textContent = changes.length
+    ? changes.length + " files  ·  +" + totalAdd + " -" + totalDel
+    : "nothing changed yet";
+
+  filesEl.replaceChildren();
+  for (const change of changes) {
+    const row = el("div", "file" + (change.path === selectedFile ? " active" : ""));
+    row.appendChild(el("span", "p", change.path));
+    if (change.before === undefined) row.appendChild(el("span", "tag", "new"));
+    else if (change.after === undefined) row.appendChild(el("span", "tag", "deleted"));
+    if (change.note) row.appendChild(el("span", "tag", change.note));
+    else {
+      row.appendChild(el("span", "n plus", "+" + change.added));
+      row.appendChild(el("span", "n minus", "-" + change.removed));
+    }
+    row.addEventListener("click", () => showDiff(change.path));
+    filesEl.appendChild(row);
+  }
+
+  if (changes.length && !changes.some((c) => c.path === selectedFile)) showDiff(changes[0].path);
+  else if (!changes.length) diffEl.replaceChildren();
+}
+
+function showDiff(file) {
+  selectedFile = file;
+  const change = changes.find((c) => c.path === file);
+  diffEl.replaceChildren();
+  if (!change) return;
+
+  if (change.note) {
+    diffEl.appendChild(el("div", "notice", change.note));
+  } else {
+    diffEl.appendChild(renderDiff(change.before || "", change.after || ""));
+  }
+  for (const row of filesEl.children) {
+    row.classList.toggle("active", row.firstChild.textContent === file);
+  }
+}
+
+changesBtn.addEventListener("click", () => review.classList.toggle("open"));
+
+async function loadChanges() {
+  const body = await getJson("/changes");
+  renderChanges(body.changes);
+}
+
+/**
+ * Everything session-scoped that lives beside the transcript.
+ *
+ * One function rather than a call per panel at each of the four places a
+ * session view gets established: the fourth of those already existed before
+ * artifacts did, and adding a second panel by hand to each of them is how the
+ * fifth site ends up with only one of them refreshed.
+ */
+async function loadSidePanels() {
+  await loadChanges();
+  await loadArtifacts();
+}
+
+// --- artifacts -------------------------------------------------------------
+
+/**
+ * The browser's half of the rendering contract in artifacts/store.ts.
+ *
+ * Every kind the engine can produce has an entry, and adding a kind without
+ * one fails test/artifacts.test.ts rather than showing a blank pane. "frame"
+ * means the body has to be executed by the browser and therefore goes through
+ * the sandboxed route; "source" means this page can render it into DOM nodes
+ * itself, which is always preferable — it is the same reason markdown is built
+ * as nodes rather than assigned as markup.
+ */
+const ARTIFACT_RENDERING = {
+  text: { mode: "source" },
+  markdown: { mode: "markdown" },
+  code: { mode: "source" },
+  vector: { mode: "frame" },
+  image: { mode: "frame" },
+  page: { mode: "frame" },
+};
+
+const shelf = document.getElementById("shelf");
+const shelfBody = document.getElementById("shelf-body");
+let artifacts = [];
+let artifactKey = null;
+let selectedArtifact = null;
+/** The strip currently above the body, so it can be redrawn on its own. */
+let shelfBar = null;
+/** Which version is being viewed, per artifact id. Absent means the latest. */
+const artifactVersion = new Map();
+
+function renderArtifacts(list) {
+  // No list and no counter: every artifact has a card in the conversation that
+  // made it, and that is the index. A second list beside the thing being shown
+  // was a row of chrome that repeated what the card already said.
+  artifacts = list || [];
+
+  if (artifacts.length && !artifacts.some((a) => a.id === selectedArtifact)) {
+    void showArtifact(artifacts[0].id);
+  } else if (!artifacts.length) {
+    selectedArtifact = null;
+    shelfBody.replaceChildren();
+  }
+}
+
+/**
+ * The URL an iframe loads. Built here rather than by the caller because it
+ * carries the artifact key, which is a different credential from the page's
+ * token and must never be swapped for it by accident.
+ */
+function artifactFrameUrl(id, version) {
+  const params = new URLSearchParams({ id, k: artifactKey || "" });
+  if (activeId) params.set("session", activeId);
+  if (version) params.set("version", String(version));
+  return "/artifact/view?" + params.toString();
+}
+
+/**
+ * The mime the engine gives a canvas. Repeated here rather than imported
+ * because this file is a string served to a browser, and kept next to
+ * kindFromMime so the two stay wrong together or not at all.
+ */
+const CANVAS_MIME = "text/canvas+html";
+
+/**
+ * The page's half of the canvas save protocol.
+ *
+ * A canvas frame is sandboxed without allow-same-origin and served under
+ * "connect-src 'none'", so it cannot call this server itself — which is the
+ * point, since what runs in there is model-authored markup. What it can do is
+ * postMessage, and this is the only thing listening.
+ *
+ * Two things make that safe to act on. The frame's origin is opaque, so
+ * event.origin is the string 'null' and proves nothing; identity comes from
+ * event.source being this exact frame's window instead. And the message
+ * carries content, never a destination — the id being revised is the one this
+ * page opened, not one the frame names, so a canvas cannot ask to overwrite
+ * some other artifact.
+ */
+let canvasBridge = null;
+
+function detachCanvasBridge() {
+  if (!canvasBridge) return;
+  window.removeEventListener("message", canvasBridge.handler);
+  canvasBridge = null;
+}
+
+function attachCanvasBridge(frame, meta, stale) {
+  detachCanvasBridge();
+
+  const tell = (message) => {
+    // "*" rather than location.origin: the recipient has an opaque origin, so
+    // there is no origin that would match, and the payload is the artifact the
+    // frame is already showing.
+    if (frame.contentWindow) frame.contentWindow.postMessage(
+      Object.assign({ source: "oharness-canvas-host" }, message), "*");
+  };
+
+  const handler = async (event) => {
+    if (!canvasBridge || event.source !== frame.contentWindow) return;
+    const message = event.data;
+    if (!message || message.source !== "oharness-canvas") return;
+
+    if (message.type === "ready") {
+      // Saving an older revision would write it back as the newest one and
+      // quietly discard everything since. The editor is told to stay read-only
+      // instead, which it shows by having no Save button at all.
+      tell({ type: "hello", canSave: !stale, version: meta.version });
+      return;
+    }
+
+    if (message.type === "save") {
+      if (stale || typeof message.content !== "string") return;
+      const path = activeId
+        ? "/artifact/edit?session=" + encodeURIComponent(activeId)
+        : "/artifact/edit";
+      const body = await api(path, { id: meta.id, content: message.content });
+      if (body.error) {
+        tell({ type: "error", message: body.error });
+        addNotice("could not save the canvas: " + body.error, "err");
+        return;
+      }
+      tell({ type: "saved", version: body.version });
+      // Nothing else to do: the server broadcasts an artifact event, and the
+      // handler for it patches the list and redraws the bar. What it must not
+      // do is rebuild the frame — see the author check there.
+    }
+  };
+
+  canvasBridge = { frame, handler };
+  window.addEventListener("message", handler);
+}
+
+/**
+ * Redraw the strip above the body without touching the body.
+ *
+ * The version picker and the publish state both go stale when a revision
+ * lands, and the usual answer is to re-run showArtifact — which is right for
+ * everything except a canvas being edited, where the body is a live editor and
+ * rebuilding it throws away what the user was doing.
+ */
+function refreshArtifactBar(meta) {
+  // Held as a reference rather than looked up by id: the strip is built in
+  // code, so there is no element in the static markup for a lookup to match,
+  // and test/web-page.test.ts is right to insist that every id the script
+  // reaches for is one the page actually ships.
+  if (!shelfBar || !shelfBar.isConnected) return;
+  const next = bar(meta, artifactVersion.get(meta.id));
+  shelfBar.replaceWith(next);
+  shelfBar = next;
+}
+
+async function showArtifact(id) {
+  selectedArtifact = id;
+  const meta = artifacts.find((a) => a.id === id);
+  if (!meta) return;
+  const wanted = artifactVersion.get(id);
+  // Whatever frame was listening is about to be replaced or navigated away
+  // from; a listener left behind would answer for a window that is gone.
+  detachCanvasBridge();
+  const rendering = ARTIFACT_RENDERING[meta.kind] || { mode: "source" };
+
+  shelfBar = bar(meta, wanted);
+  shelfBody.replaceChildren(shelfBar);
+
+  if (rendering.mode === "frame") {
+    const frame = el("iframe");
+    frame.id = "shelf-frame";
+    // allow-scripts and NOT allow-same-origin. The two together let the frame
+    // reach up and strip its own sandbox attribute, which is why every guide
+    // calls that combination equivalent to no sandbox at all.
+    frame.setAttribute("sandbox", "allow-scripts");
+    frame.setAttribute("referrerpolicy", "no-referrer");
+    // Deliberately not q(): that appends the session token, and this URL is
+    // readable by the document it loads. The whole point of the separate "k"
+    // credential is that the agent's token never reaches an artifact.
+    frame.src = artifactFrameUrl(id, wanted);
+    shelfBody.appendChild(frame);
+    // A canvas is a page like any other to the sandbox; the difference is that
+    // this one talks back. Attached before the frame can load so the "ready"
+    // it sends on startup is not sent into a page that is not listening yet.
+    if (String(meta.mime).split(";")[0].trim().toLowerCase() === CANVAS_MIME) {
+      attachCanvasBridge(frame, meta, Boolean(wanted) && Number(wanted) !== meta.version);
+    }
+    return;
+  }
+
+  const path =
+    "/artifact/raw?id=" + encodeURIComponent(id) + (wanted ? "&version=" + wanted : "");
+  const body = await getJson(activeId ? path + "&session=" + encodeURIComponent(activeId) : path);
+  if (body.error) {
+    shelfBody.appendChild(el("div", "notice", body.error));
+    return;
+  }
+  if (rendering.mode === "markdown") {
+    const host = el("div");
+    host.id = "shelf-source";
+    host.style.whiteSpace = "normal";
+    host.style.fontFamily = "inherit";
+    host.appendChild(renderMarkdown(body.content));
+    shelfBody.appendChild(host);
+    return;
+  }
+  const pre = el("pre");
+  pre.id = "shelf-source";
+  // textContent, not innerHTML: this is model-authored content and the whole
+  // reason the executable kinds go through an iframe instead of coming here.
+  pre.textContent = body.content;
+  shelfBody.appendChild(pre);
+}
+
+/**
+ * A card for an artifact_write found in the transcript.
+ *
+ * The descriptor a live card is built from does not exist here — there was no
+ * event — so the few fields it needs are read back off the call's arguments.
+ * Version is deliberately absent rather than guessed: the transcript knows how
+ * many times an id was written, but this loop sees one call at a time, and a
+ * wrong version number on a card that claims to open that version is worse
+ * than no number.
+ */
+function replayedArtifactCard(input) {
+  if (!input || typeof input !== "object") return null;
+  const { id, title, mime, content } = input;
+  if (typeof id !== "string" || typeof title !== "string") return null;
+  return artifactCard(
+    {
+      id,
+      title,
+      mime: typeof mime === "string" ? mime : "text/plain",
+      kind: kindFromMime(typeof mime === "string" ? mime : "text/plain"),
+      bytes: typeof content === "string" ? new Blob([content]).size : 0,
+      version: 1,
+    },
+    { attach: false },
+  );
+}
+
+/** The engine's kindForMime, for the handful of types the page has to label. */
+function kindFromMime(mime) {
+  const base = String(mime).split(";")[0].trim().toLowerCase();
+  if (base === "text/html" || base === CANVAS_MIME) return "page";
+  if (base === "image/svg+xml") return "vector";
+  if (base === "text/markdown") return "markdown";
+  if (base === "application/json") return "code";
+  if (base.startsWith("image/")) return "image";
+  return "text";
+}
+
+function formatBytes(bytes) {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+/**
+ * The inline card for one artifact event.
+ *
+ * One per event rather than one per artifact, updated in place: a revision is
+ * something that happened at a point in the conversation, and collapsing five
+ * of them into a single card that silently changes under the earlier text
+ * would make the transcript disagree with itself.
+ */
+function artifactCard(artifact, opts) {
+  const card = el("div", "art-card");
+  card.setAttribute("role", "button");
+  card.tabIndex = 0;
+
+  // A glyph per kind rather than one shape for everything: the card is scanned
+  // in a column of near-identical blocks, and the difference between a chart
+  // and a page is the first thing worth seeing.
+  const mark = el("span", "art-card-mark");
+  mark.appendChild(kindIcon(artifact.kind));
+  card.appendChild(mark);
+
+  const text = el("div", "art-card-text");
+  text.appendChild(el("div", "art-card-title", artifact.title));
+  const sub = artifact.version > 1
+    ? artifact.kind + " · v" + artifact.version
+    : artifact.kind + " · " + formatBytes(artifact.bytes);
+  text.appendChild(el("div", "art-card-sub", sub));
+  card.appendChild(text);
+
+  const openMark = el("span", "art-card-open");
+  openMark.title = "Open";
+  openMark.appendChild(iconChevron());
+  card.appendChild(openMark);
+
+  // The version this card is about, so clicking an older card shows what it
+  // was announcing rather than whatever the artifact has become since.
+  const at = artifact.version;
+  const show = () => {
+    shelf.classList.add("open");
+    const latest = artifacts.find((a) => a.id === artifact.id);
+    if (latest && at !== latest.version) artifactVersion.set(artifact.id, String(at));
+    else artifactVersion.delete(artifact.id);
+    void showArtifact(artifact.id);
+  };
+  card.addEventListener("click", show);
+  card.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") { event.preventDefault(); show(); }
+  });
+
+  if (opts && opts.attach === false) return card;
+  assistantTurn().appendChild(card);
+  follow();
+  return card;
+}
+
+/** The strip above a body: version picker and an escape hatch to a real tab. */
+/**
+ * The strip above an artifact.
+ *
+ * Left: what it is — its type, and which revision is on screen. Right: what
+ * you can do about it, and in two groups. The glyphs are the cheap, reversible
+ * moves — open it elsewhere, make it bigger, put it away. Publishing is the
+ * one act with a consequence off this machine, so it is the one thing spelled
+ * out, and it sits at the end where a deliberate step belongs.
+ */
+function bar(meta, wanted) {
+  const row = el("div");
+  row.id = "shelf-bar";
+  // The title, not the mime type. What this is called is what identifies it;
+  // "image/svg+xml" is a detail that was taking the most prominent slot in the
+  // panel and repeating what the card in the conversation already showed. It
+  // survives as the tooltip, where a detail belongs.
+  const name = el("span", "shelf-title", meta.title);
+  name.title = meta.mime;
+  row.appendChild(name);
+
+  if (meta.versionCount > 1) {
+    // Our own dropdown, not a native <select>: that one draws its popup and
+    // its focus ring with the operating system's chrome, which no stylesheet
+    // here reaches — the same reason makePicker exists. This borrows the
+    // popover the Publish menu uses rather than makePicker itself, which
+    // mandates a search box built for a list of a thousand models.
+    const shown = wanted ? Number(wanted) : meta.version;
+    const pick = el("button", "ver-btn");
+    pick.type = "button";
+    pick.appendChild(el("span", null, "v" + shown + (shown === meta.version ? " (latest)" : "")));
+    pick.appendChild(caret());
+    pick.addEventListener("click", () => {
+      const oldest = Math.max(1, meta.version - meta.versionCount + 1);
+      const choices = [];
+      for (let v = meta.version; v >= oldest; v--) {
+        choices.push({ label: "v" + v + (v === meta.version ? " (latest)" : ""), version: v });
+      }
+      showMenuNear(pick, choices, (choice) => {
+        // The latest is stored as "no preference", so a later revision does
+        // not leave the pane pinned to what is now an old version.
+        if (choice.version === meta.version) artifactVersion.delete(meta.id);
+        else artifactVersion.set(meta.id, String(choice.version));
+        void showArtifact(meta.id);
+      });
+    });
+    row.appendChild(pick);
+  }
+
+  row.appendChild(el("span", "shelf-gap"));
+
+  // --- the glyphs, as one group -------------------------------------------
+  const icons = el("div", "shelf-icons");
+
+  const open = el("a", "icon-link");
+  open.title = "Open in a new tab";
+  open.setAttribute("aria-label", "Open in a new tab");
+  open.appendChild(iconExternal());
+  // Deliberately not q(): that appends the session token, and this URL is
+  // readable by the document it loads.
+  open.href = artifactFrameUrl(meta.id, wanted);
+  open.target = "_blank";
+  open.rel = "noopener noreferrer";
+  icons.appendChild(open);
+
+  const expand = el("button", "pane-btn");
+  expand.type = "button";
+  const paintExpand = () => {
+    const full = shelf.classList.contains("full");
+    expand.replaceChildren(full ? iconCollapse() : iconExpand());
+    expand.title = full ? "Leave full screen" : "Full screen";
+  };
+  expand.addEventListener("click", () => {
+    shelf.classList.toggle("full");
+    document.body.classList.toggle("shelf-full", shelf.classList.contains("full"));
+    paintExpand();
+  });
+  paintExpand();
+  icons.appendChild(expand);
+
+  const close = el("button", "pane-btn");
+  close.type = "button";
+  close.title = "Close";
+  close.appendChild(iconClose());
+  close.addEventListener("click", () => {
+    // Leaving it full screen would hide the conversation the next time it is
+    // opened, with no obvious way back.
+    shelf.classList.remove("open", "full");
+    document.body.classList.remove("shelf-full");
+  });
+  icons.appendChild(close);
+  row.appendChild(icons);
+
+  // --- sharing, last ------------------------------------------------------
+  const pub = meta.publication;
+  if (pub) {
+    // A link serves the revision that was published, not the latest one. Said
+    // out loud, because the alternative is the author believing they shared
+    // something they did not.
+    const stale = pub.version !== meta.version;
+    if (stale) row.appendChild(el("span", "stale", "link shows v" + pub.version));
+
+    const copy = el("button", "share-btn", "copy link");
+    copy.type = "button";
+    copy.addEventListener("click", () => void copyLink(pub.url, copy));
+    row.appendChild(copy);
+
+    if (stale) {
+      const update = el("button", "share-btn", "update link");
+      update.type = "button";
+      update.addEventListener("click", () =>
+        void publish(meta, update, pub.visibility, pub.teamId));
+      row.appendChild(update);
+    }
+
+    const withdraw = el("button", "share-btn", "withdraw");
+    withdraw.type = "button";
+    withdraw.addEventListener("click", () => void unpublish(meta, withdraw));
+    row.appendChild(withdraw);
+  } else {
+    // Icon and word both. The ellipsis this used to carry was the "opens a
+    // chooser" convention, but at this size it read as a truncated label —
+    // which is a worse thing to say than nothing.
+    const share = el("button", "share-btn primary-action");
+    share.type = "button";
+    share.appendChild(iconShare());
+    share.appendChild(el("span", null, "Publish"));
+    share.addEventListener("click", () => void offerPublish(meta, share));
+    row.appendChild(share);
+  }
+
+  return row;
+}
+
+/** The three glyphs the panel controls use, drawn to match the SVG set. */
+function paneIcon(d) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  for (const segment of d) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", segment);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+/*
+ * Four corner brackets, out then in.
+ *
+ * The first attempt drew arrows with diagonals across the middle, which at
+ * this size collapsed into a smudge and made "leave full screen" unreadable —
+ * two marks that differ only by the direction of a 4px line are not two marks.
+ * Brackets differ by which way the corner opens, which survives being small.
+ */
+const iconExpand = () =>
+  paneIcon(["M6 3H3v3", "M10 3h3v3", "M6 13H3v-3", "M10 13h3v-3"]);
+const iconCollapse = () =>
+  paneIcon(["M3 6h3V3", "M13 6h-3V3", "M3 10h3v3", "M13 10h-3v3"]);
+const iconClose = () => paneIcon(["M4.5 4.5 11.5 11.5", "M11.5 4.5 4.5 11.5"]);
+/* An upload, because that is what publishing is: a copy leaves this machine. */
+const iconShare = () => paneIcon(["M8 10.5V3", "M5 6 8 3l3 3", "M3.5 10v2.5h9V10"]);
+const iconExternal = () =>
+  paneIcon(["M7 3.5H3.5v9h9V9", "M9.5 3h3.5v3.5", "M13 3 8 8"]);
+const iconChevron = () => paneIcon(["M6.5 3.5 11 8l-4.5 4.5"]);
+
+/**
+ * The glyph for each artifact kind.
+ *
+ * Every entry in ARTIFACT_KINDS has one, for the same reason the rendering
+ * tables do: a kind added to the engine without a shape here falls back to a
+ * generic box rather than drawing nothing, and the fallback is visible enough
+ * that somebody notices.
+ */
+function kindIcon(kind) {
+  switch (kind) {
+    case "page":
+      return paneIcon(["M2.5 3.5h11v9h-11z", "M2.5 6.5h11", "M4.5 5V5"]);
+    case "vector":
+      return paneIcon(["M2.5 12.5V3.5", "M2.5 12.5h11", "M5 10.5v-3", "M8 10.5v-5", "M11 10.5v-2"]);
+    case "image":
+      return paneIcon(["M2.5 3.5h11v9h-11z", "M2.5 10 6 7l3 2.5L11 8l2.5 2"]);
+    case "markdown":
+      return paneIcon(["M3.5 2.5h6l3 3v8h-9z", "M9.5 2.5v3h3", "M5.5 8.5h5", "M5.5 10.5h3"]);
+    case "code":
+      return paneIcon(["M6 5.5 3 8l3 2.5", "M10 5.5 13 8l-3 2.5"]);
+    case "text":
+      return paneIcon(["M3.5 2.5h6l3 3v8h-9z", "M9.5 2.5v3h3"]);
+    default:
+      return paneIcon(["M2.5 3.5h11v9h-11z"]);
+  }
+}
+
+
+/**
+ * A small chooser anchored to a button.
+ *
+ * Positioned from the viewport rather than from an offset parent: the button
+ * lives inside a panel that scrolls and clips, and an absolutely positioned
+ * menu inside it is either cut off or scrolls away from what it belongs to.
+ */
+function showMenuNear(anchor, choices, onPick) {
+  const menu = el("div", "menu pop");
+  const close = () => {
+    menu.remove();
+    document.removeEventListener("mousedown", onAway, true);
+    document.removeEventListener("keydown", onKey, true);
+  };
+  const onAway = (event) => { if (!menu.contains(event.target)) close(); };
+  const onKey = (event) => { if (event.key === "Escape") { event.stopPropagation(); close(); } };
+
+  for (const choice of choices) {
+    const item = el("button", "menu-item");
+    item.type = "button";
+    item.appendChild(el("span", "menu-label", choice.label));
+    item.addEventListener("click", () => { close(); onPick(choice); });
+    menu.appendChild(item);
+  }
+
+  document.body.appendChild(menu);
+  const box = anchor.getBoundingClientRect();
+  // Flip above when there is no room below, so the last team in a long list is
+  // not off the bottom of the window.
+  const below = window.innerHeight - box.bottom;
+  const height = menu.getBoundingClientRect().height;
+  menu.style.top = (below < height + 12 ? Math.max(8, box.top - height - 6) : box.bottom + 6) + "px";
+  menu.style.left = Math.max(8, Math.min(box.left, window.innerWidth - menu.offsetWidth - 8)) + "px";
+
+  document.addEventListener("mousedown", onAway, true);
+  document.addEventListener("keydown", onKey, true);
+}
+
+/** The chevron the composer's pickers draw, so this one is not a different shape. */
+function caret() {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "caret");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M4.5 6.5 8 10l3.5-3.5");
+  svg.appendChild(path);
+  return svg;
+}
+
+async function copyLink(url, button) {
+  await navigator.clipboard.writeText(url).catch(() => {});
+  button.textContent = "copied";
+  setTimeout(() => { button.textContent = "copy link"; }, 1500);
+}
+
+/**
+ * The teams the account is in, fetched once.
+ *
+ * Null while unknown, [] when signed out or when there are none — both of
+ * which mean the same thing to the menu below, which is why the failure path
+ * in the engine answers with a list rather than an error.
+ */
+let accountTeams = null;
+
+/**
+ * Publishing asks first when there is a choice to make.
+ *
+ * With no teams there is only one thing Publish can mean, and a menu offering
+ * one option is a click for nothing.
+ */
+async function offerPublish(meta, button) {
+  if (accountTeams === null) {
+    button.disabled = true;
+    // getJson, not api(): api() posts, and this route is a GET. Sending the
+    // wrong verb answered 404, which this function reads as "no teams" — so
+    // the menu silently never appeared and every publish went out unlisted.
+    const body = await getJson("/teams");
+    button.disabled = false;
+    accountTeams = body.error ? [] : (body.teams || []);
+  }
+  if (accountTeams.length === 0) {
+    void publish(meta, button, "unlisted");
+    return;
+  }
+
+  const choices = [{ label: "Anyone with the link", visibility: "unlisted" }].concat(
+    accountTeams.map((team) => ({
+      label: team.name + " (team only)",
+      visibility: "team",
+      teamId: team.id,
+    })),
+  );
+  showMenuNear(button, choices, (choice) =>
+    void publish(meta, button, choice.visibility, choice.teamId));
+}
+
+async function publish(meta, button, visibility, teamId) {
+  const was = button.textContent;
+  button.disabled = true;
+  button.textContent = "publishing…";
+  // The site is a real network hop away and may be signing a token on the way
+  // through, so this gets longer than the default before it gives up.
+  const body = await api(
+    "/artifact/publish",
+    { id: meta.id, visibility: visibility || "unlisted", teamId },
+    45000,
+  );
+  button.disabled = false;
+
+  if (body.error) {
+    button.textContent = was;
+    // Not signed in, offline, over the limit — all actionable, so the reason
+    // is shown rather than swallowed into a failed state with no explanation.
+    addNotice("could not publish: " + body.error, "err");
+    return;
+  }
+
+  // The row is redrawn from the artifact event the server broadcasts, so the
+  // button this click was on is about to be replaced. Only the clipboard and
+  // the notice are this function's to do.
+  await navigator.clipboard.writeText(body.url).catch(() => {});
+  addNotice((body.updated ? "updated " : "published ") + body.url);
+}
+
+async function unpublish(meta, button) {
+  button.disabled = true;
+  button.textContent = "withdrawing…";
+  const body = await api("/artifact/unpublish", { id: meta.id }, 30000);
+  button.disabled = false;
+  if (body.error) {
+    button.textContent = "withdraw";
+    addNotice("could not withdraw: " + body.error, "err");
+    return;
+  }
+  addNotice("withdrawn — the link no longer resolves");
+}
+
+async function loadArtifacts() {
+  const path = activeId ? "/artifacts?session=" + encodeURIComponent(activeId) : "/artifacts";
+  const body = await getJson(path);
+  if (body.error) return;
+  artifactKey = body.viewKey || artifactKey;
+  renderArtifacts(body.artifacts);
+  // Here rather than only on artifact events: opening a session replays the
+  // writes in its transcript, so artifacts can appear without an event ever
+  // being broadcast, and the sidebar would go on reading zero.
+  await refreshArtifactCount();
+}
+
+
+
+/**
+ * Providers and their models.
+ *
+ * The built-in catalog carries provider facts — endpoint, environment
+ * variables, protocol — because those are stable. Model ids are not: vendors
+ * rename them faster than a package ships, so the only list that can be right
+ * is the one the vendor answers with. Hence a refresh per provider rather than
+ * a bundled roster that quietly goes stale.
+ */`;
+//# sourceMappingURL=artifacts.js.map