samagotchi 0.92.0 → 0.94.0

data/lib/samagotchi/web/public/dock_reserve.js

@@ -0,0 +1,103 @@
+import { easeScrollTo, FOLLOW_MS } from "./scroll.js";
+import { FOLD_MS } from "./stage_view.js";
+import { reducedMotion, STAGE_GAP } from "./stage_frame.js";
+import { toastBottom } from "./toast_place.js";
+
+// What floats over the history (used by app.js): the composer card, and in
+// the stage view the stage above it. Two measures follow it.
+//
+// The reserve: the card floats over the history, so the history's bottom
+// padding (--dock-h on #center, index.html) is kept at the card's height,
+// and a reader at the end stays pinned there, since the card grows (text,
+// chips, Cancel, a wrapping footer) under a reader at the end. In the stage
+// view the stage floats above the card, out of the dock's flow
+// (stage_view.js): the reserve counts it too, with its STAGE_GAP, while it
+// shows. A leaving stage (the hand-off's slide) no longer counts: the
+// reserve eases down over the slide (#center.reserve-easing).
+//
+// The toast: it sits above the session's composer card (measured: it grows
+// with a wrapping footer or a taller box), so it never covers the card's
+// controls, and above the stage while it shows and a fresh link's open
+// model panel (toast_place.js); with no card in sight (the start page, all
+// sessions) the CSS's 24 px from the bottom (--toast-bottom unset).
+//
+// +stageEl+: the stage (stage view) or null (turn view). +atHistoryEnd()+:
+// the reader is at the history's end (app.js, scroll.js's threshold).
+// +reduce()+ / +ease+: prefers-reduced-motion and the eased follow
+// (scroll.js), defaults the page's.
+// The observers that call these are installed here: the dock's and the
+// stage's size, the stage showing, hiding or leaving, the window's size and
+// the model panel's. app.js calls placeToast() when the page enters or
+// leaves a session and when a toast shows or goes (toasts.js onChange).
+export function createDockReserve({
+  dockEl, centerEl, stageEl, historyEl, toastEl, modelPanelEl, atHistoryEnd,
+  reduce = reducedMotion, ease = easeScrollTo,
+}) {
+  const doc = dockEl.ownerDocument;
+  const win = doc.defaultView;
+
+  function dockReserve() {
+    const shown = stageEl && !stageEl.hidden && !stageEl.classList.contains("leaving");
+    return dockEl.offsetHeight + (shown ? stageEl.offsetHeight + STAGE_GAP : 0);
+  }
+  const historyEnd = () => historyEl.scrollHeight - historyEl.clientHeight;
+
+  // A reader at the end stays there when the reserve changes: at once for the
+  // composer card, eased for the stage (+fromStage+: it appeared, grew or
+  // leaves), so the history glides rather than jumps. An eased follow running
+  // counts as at the end.
+  function updateReserve({ fromStage = false } = {}) {
+    const follow = atHistoryEnd() || historyEl.dataset.following !== undefined;
+    const leaving = !!stageEl?.classList.contains("leaving");
+    centerEl.classList.toggle("reserve-easing", leaving);
+    const reserve = `${dockReserve()}px`;
+    const changed = centerEl.style.getPropertyValue("--dock-h") !== reserve;
+    if (changed) centerEl.style.setProperty("--dock-h", reserve);
+    if (changed && follow) {
+      if (fromStage) ease(historyEl, historyEnd, { ms: leaving ? FOLD_MS : FOLLOW_MS, reduce: reduce() });
+      else if (historyEl.dataset.following === undefined) historyEl.scrollTop = historyEl.scrollHeight;
+    }
+    placeToast();
+  }
+
+  function placeToast() {
+    const r = dockEl.getBoundingClientRect();
+    const shownTop = (el) => {
+      const box = el && !el.hidden ? el.getBoundingClientRect() : null;
+      return box && box.height > 0 ? box.top : null;
+    };
+    const px = toastBottom({
+      inSession: doc.body.classList.contains("has-session") && r.height > 0,
+      viewportHeight: win.innerHeight,
+      dockTop: r.top,
+      tops: [shownTop(stageEl), shownTop(modelPanelEl)],
+      toastHeight: toastEl.offsetHeight,
+    });
+    const bottom = px === null ? "" : `${px}px`;
+    const root = doc.documentElement.style;
+    if (root.getPropertyValue("--toast-bottom") !== bottom) {
+      if (bottom) root.setProperty("--toast-bottom", bottom);
+      else root.removeProperty("--toast-bottom");
+    }
+  }
+
+  const dockObserver = new win.ResizeObserver((entries) => updateReserve({ fromStage: entries.some((e) => e.target === stageEl) }));
+  dockObserver.observe(dockEl);
+  if (stageEl) {
+    dockObserver.observe(stageEl);
+    // Only showing, hiding and leaving change the reserve (not the stage's
+    // other classes: waiting, in-use…).
+    let stageShown = "";
+    new win.MutationObserver(() => {
+      const shown = `${stageEl.hidden}|${stageEl.classList.contains("leaving")}`;
+      if (shown === stageShown) return;
+      stageShown = shown;
+      updateReserve({ fromStage: true });
+    }).observe(stageEl, { attributes: true, attributeFilter: ["class", "hidden"] });
+  }
+  win.addEventListener("resize", () => placeToast());
+  // The model panel opening, closing or changing height (its list filters).
+  new win.ResizeObserver(() => placeToast()).observe(modelPanelEl);
+
+  return { updateReserve, placeToast };
+}

data/lib/samagotchi/web/public/index.html

@@ -547,7 +547,7 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 @media (hover:none){.copy-btn{opacity:.55}}
 /* The dock is the composer card: the text field, a toolbar row, the info bar as its footer. */
 #dock{display:flex;flex-direction:column;flex-shrink:0;margin:0 12px 12px;border-radius:16px;position:relative;transition:border-color .12s ease,box-shadow .12s ease}
-/* In a session the card floats over the history, so the glass blurs it; the history's bottom padding follows the card (--dock-h, set from app.js). */
+/* In a session the card floats over the history, so the glass blurs it; the history's bottom padding follows the card (--dock-h, set from dock_reserve.js). */
 /* The session panel lets the page's glow through (the history's own layers go clear), so the card and its footer read as glass over it, not as a flat box on black. */
 body.has-session #center{background:color-mix(in srgb,var(--bg) 35%,transparent);border-color:var(--glass-border);position:relative}
 body.has-session #stage,body.has-session #history{background:transparent}
@@ -646,7 +646,7 @@ body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
 body.has-session #composer textarea{min-height:0}
 body.has-session #composeHint{display:none}
 body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
-/* The model picker (the start page, and a fresh chain link: app.js syncModelPick): reads as a label, "host:model ▾", left of Start; a button under a drawn caret that opens a searchable list (model_picker.js). Its name ellipsizes within max-width. */
+/* The model picker (the start page, and a fresh chain link: start_page.js syncModelPick): reads as a label, "host:model ▾", left of Start; a button under a drawn caret that opens a searchable list (model_picker.js). Its name ellipsizes within max-width. */
 #composer .actions-col .model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;min-height:28px;padding:0 22px 0 8px;border-radius:8px;overflow:hidden;background:transparent;color:var(--text-muted);font-size:12px;line-height:28px;text-align:left;text-overflow:ellipsis;transition:background .12s ease,color .12s ease}
 #composer .actions-col .model-pick:hover,#composer .actions-col .model-pick[aria-expanded="true"]{filter:none;background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
 #composer .actions-col .model-pick[hidden],body.has-session #composer .actions-col .model-pick{display:none}
@@ -719,7 +719,7 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .turn-stage{display:flex;flex-direction:column;min-height:0;max-height:var(--stage-max,60vh);border-left:3px solid var(--accent);border-radius:14px;overflow:hidden}
 /* Out of the dock's flow: it floats 10 px above the composer card, so its rise, growth and leaving never move #dock (a
    bottom-pinned box changing height is a layout shift, animated or not). Painted before .dock-card (no z-index): the command
-   list (z-index 20 inside .dock-card) opens over its lower edge. The history's bottom reserve counts it (app.js, --dock-h). */
+   list (z-index 20 inside .dock-card) opens over its lower edge. The history's bottom reserve counts it (dock_reserve.js, --dock-h). */
 body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-bottom:10px}
 .turn-stage[hidden]{display:none}
 .turn-stage.ended{border-left-color:var(--border-strong)}
@@ -1183,7 +1183,7 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.archived{opacity:.6}
 .card.archived:hover{opacity:.85}
 .card .archived-badge,.family-row .archived-badge{font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--border-strong);color:var(--text-muted)}
-/* bottom: above the session's composer card when one shows (--toast-bottom, app.js placeToast). */
+/* bottom: above the session's composer card when one shows (--toast-bottom, dock_reserve.js placeToast). */
 #toast{position:fixed;left:50%;bottom:var(--toast-bottom,24px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px}
 #toast[hidden]{display:none}
 #toast .toast-item{display:flex;gap:12px;align-items:center;width:max-content;max-width:100%;box-sizing:border-box;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--toast-shadow);font-size:13px}

data/lib/samagotchi/web/public/send_turn.js

@@ -0,0 +1,173 @@
+import { routeComposerLine, routeSessionLine } from "./composer.js";
+import { chipsAfterSend, restoredChips, turnRefs, turnText, uploadChips } from "./images.js";
+import { cantText, firstPreview } from "./format.js";
+import { setBubbleDelivery } from "./bubbles.js";
+import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js";
+
+// The composer's send (used by app.js): a line into the open session, or
+// on the start page a new session first (an idle one, then the line as for
+// any later one, so a failed first turn's prompt comes back into the
+// composer too). The route (composer.js), the echo, the images' upload, the
+// /turn and its ack, a fast failure's restore (restore.js) and the error's
+// words.
+//
+// Hooks: +session()+ the open session's id or null; +state()+ its fields
+// (session_state.js: owner, commands, firstPreview); +running()+ a turn
+// runs; +clientId+; +sentIds+ / +earlyRestores+ (restore.js' bookkeeping);
+// +api+: {createIdleSession, uploadImage, sendTurn} (data.js); +dir+: the
+// page's scope folder (new sessions start there); +startPage+
+// (start_page.js: pendingPick(), chosenModel(), newChoices(),
+// clearChoices()); +takeDelivery()+ the delivery line's armed choice;
+// +composer+: {el (the text box), button (Send/Start), chips(),
+// setChips(list), fit(), clear(), openForVisit(), focus()}; +historyEl+,
+// +turnDom+; +makeUserBubble(prompt, opts)+, +bubbleById(id)+,
+// +addCommandBubble(view)+; +addCreatedSession(created)+, +select(id)+,
+// +showNotice(text)+, +updateInfoBar()+, +updateComposerMode()+,
+// +followWokenWorker()+, +refreshHistory()+, +leaveGoneSession(id, why)+,
+// +runCommand(command)+ (composer.js send), +toast(text, action, options)+;
+// +alert+: the browser's.
+export function createSendTurn({
+  session, state, running, clientId, sentIds, earlyRestores, api, dir, startPage, takeDelivery, composer,
+  historyEl, turnDom, makeUserBubble, bubbleById, addCommandBubble,
+  addCreatedSession, select, showNotice, updateInfoBar, updateComposerMode, followWokenWorker, refreshHistory,
+  leaveGoneSession, runCommand, toast, alert = (text) => globalThis.alert(text),
+}) {
+  const promptEl = composer.el;
+  const actionBtn = composer.button;
+
+  // +delivery+: the composer's choice for a running turn (Alt+Enter: queue;
+  // a delivery-line link: cut or queue); else the armed one; a typed /cut or
+  // /queue wins over both.
+  async function send({ delivery: chosen = null } = {}) {
+    if (state().owner === "tui") return;
+    // A fresh link's pick first: its /model is queued in the worker once
+    // acked, and the worker runs queued commands before a turn's input.
+    const pick = startPage.pendingPick();
+    if (pick) await pick;
+    let prompt = turnText(promptEl.value, composer.chips());
+    if (!prompt) return;
+    const armed = takeDelivery();
+    // An image-only send's text is its placeholders: not for ↑.
+    const typed = promptEl.value.trim() !== "";
+    // The composer holds the line as typed until the ack (composerAfterAck).
+    const line = prompt;
+    // Where the line goes (composer.js): the page's own reply, a session to
+    // make first (the start page), a command, or a turn.
+    let route = routeComposerLine(prompt, {
+      session: !!session(), running: running(), commands: state().commands, images: composer.chips().length,
+    });
+    if (route.create) {
+      actionBtn.disabled = true;
+      try {
+        const s = await api.createIdleSession({ dir, model: startPage.chosenModel(), preview: route.send,
+                                                ...startPage.newChoices() });
+        // The choice was for this chat only.
+        startPage.clearChoices();
+        addCreatedSession(s);
+        await select(s.id);
+      } catch (e) {
+        alert(e.message);
+        return;
+      } finally {
+        actionBtn.disabled = false;
+      }
+      // In the new session, by its command list (select read it).
+      route = routeSessionLine(route.send, { commands: state().commands, images: composer.chips().length, delivery: route.delivery });
+    }
+    if (route.reply) {
+      // The start page's reply is a notice: no session is made for it (2.29).
+      if (session()) addCommandBubble({ label: null, line: route.line, text: route.reply });
+      else showNotice(route.reply);
+      composer.clear();
+      return;
+    }
+    if (route.command) return runCommand(route.command);
+    prompt = route.send;
+    const isRunning = running() && !!session();
+    const delivery = route.delivery || (isRunning ? chosen || armed : null);
+    const hint = historyEl.querySelector(".hint");
+    if (hint) hint.remove();
+    // Sending moves a finished turn out of the stage at once (else the echo
+    // would land among its rows); into a running one it is a queued row there.
+    turnDom.handOff?.({ immediate: true });
+    const sending = composer.chips().slice();
+    // Into a running turn the echo says what it waits for (its delivery); a
+    // line with images always waits for the turn's end (the worker queues it).
+    const shownDelivery = isRunning ? (sending.length ? "queue" : delivery || "next_step") : null;
+    const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending, delivery: shownDelivery });
+    if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
+    if (!state().firstPreview || state().firstPreview === "—") {
+      state().firstPreview = firstPreview(prompt);
+      updateInfoBar();
+    }
+    actionBtn.disabled = true;
+    // The session the line goes to: the page may switch to another while an
+    // image uploads or the turn is sent, and what follows stays with this one.
+    const sentTo = session();
+    try {
+      await uploadChips(sending, sentTo, { upload: api.uploadImage });
+      const ack = await api.sendTurn(sentTo, prompt, { clientId, images: turnRefs(sending), history: typed, delivery });
+      if (ack?.command_id) {
+        // The worker knew it as a command (its list was newer than ours):
+        // its command_ran shows it, not a prompt bubble.
+        echo.remove();
+        composer.clear();
+        if (sentTo === session()) followWokenWorker();
+        return;
+      }
+      if (ack?.enqueued_id) sentIds.add(ack.enqueued_id);
+      // A cut the worker didn't take (no thinking-only step: cut off) goes in
+      // at the next step; a queue whose turn ended meanwhile is the next turn.
+      if (ack?.cut === "off" || (ack?.delivery === "next_step" && echo.dataset.delivery === "queue")) {
+        setBubbleDelivery(echo, ack.cut === "off" ? "next_step" : null);
+      }
+      refreshHistory();
+      // A turn that failed fast was restored before this ack: its prompt
+      // (and images) go back into the composer, without replacing text typed
+      // since (4.13). The composer still holds the text just sent: it goes.
+      const restored = restoreOnAck(ack?.enqueued_id, earlyRestores, { myId: clientId, sentIds });
+      // A restored line must be seen: the composer opens for this visit.
+      if (restored?.refill && sentTo === session()) composer.openForVisit();
+      promptEl.value = composerAfterAck({ sent: line, current: promptEl.value, refill: restored?.refill || "" });
+      composer.fit();
+      // Only the sent chips go: images added since stay (they go up at their own send).
+      const kept = chipsAfterSend(composer.chips(), sending);
+      composer.setChips(restored?.images?.length ? kept.concat(restoredChips(sentTo, restored.images)) : kept);
+      // Its turn_enqueued usually tagged the echo already; the ack covers a
+      // worker that wasn't live (no turn_enqueued then).
+      if (ack?.enqueued_id && !echo.dataset.enqueuedId && !bubbleById(ack.enqueued_id)) {
+        echo.dataset.enqueuedId = ack.enqueued_id;
+      }
+      // A live stream carries this turn already; restarting it would drop the
+      // events in between. Without one, POST /turn just woke a worker: its
+      // events start after the seq the session was rendered at (0 for a new
+      // worker process). A switch since then opened the other session's own.
+      if (sentTo === session()) followWokenWorker();
+    } catch (e) {
+      echo.remove();
+      // The turn never reached the worker's queue: an early restore waiting
+      // for its ack is never taken back (4.13), so drop it here. The prompt
+      // is still in the composer, as the echo was removed.
+      dropEarlyRestores(earlyRestores);
+      // The chips stay (uploaded ones keep their ref, to sentTo) for another try: an
+      // image refused (bad_image, too_large, bad_images) says why below.
+      if (e.code === "owned_by_tui") {
+        if (sentTo !== session()) return toast(cantText(`send to ${sentTo.slice(0, 8)}`, e), null, { sticky: true });
+        state().owner = "tui";
+        updateComposerMode();
+        return;
+      }
+      // A stale tab sent into a session deleted meanwhile: the start page
+      // says so, and the line stays in the composer.
+      if (e.code === "not_found") return leaveGoneSession(sentTo, "not_found");
+      // A /queue to a worker that can't queue (it would steer): its words, the text kept.
+      if (e.code === "delivery_unavailable" && sentTo === session()) return addCommandBubble({ label: null, line, text: e.body?.detail || e.message, failed: true });
+      toast(cantText("send", e), null, { sticky: true });
+    } finally {
+      actionBtn.disabled = state().owner === "tui";
+      composer.focus();
+    }
+  }
+
+  return { send };
+}

data/lib/samagotchi/web/public/session_actions.js

@@ -0,0 +1,203 @@
+import { continueRefusal, continuedText, openChildrenTemplate } from "./chains.js";
+import { cantText, deleteConfirmText, goneSessionNotice } from "./format.js";
+import { sessionHash } from "./route.js";
+import { inTree } from "./sessions_list.js";
+
+// What the page does to a whole session (used by app.js): Continue, Archive
+// and Unarchive, Delete and Stop, from the info bar's buttons, a card's or a
+// batch; and the start page when the open session is gone.
+//
+// Hooks: +selected()+ the open session's id or null; +state()+ its fields
+// (session_state.js); +sessions()+ / +setSessions(list)+ the page's list;
+// +api+: {continueSession, archiveSession, unarchiveSession, deleteSession,
+// stopSession} (data.js); +eventsLive()+ the hub's stream is open (else
+// +refresh()+ fetches the list); +lists+ (lists_view.js: render);
+// +select(id)+, +clearSelection()+, +showNotice(text)+, +updateInfoBar()+,
+// +toast(text, action, options)+, +addCreatedSession(created)+,
+// +fillOpener(created)+ (the new link's composer), +closeLiveStream()+ (the live
+// stream's close, the stream left as it is) and +workerGone(id)+ the page's.
+// +alert+ / +confirm+: the browser's.
+export function createSessionActions({
+  selected, state, sessions, setSessions, api, eventsLive, refresh, lists,
+  select, clearSelection, showNotice, updateInfoBar, toast, addCreatedSession, fillOpener, closeLiveStream, workerGone,
+  alert = (text) => globalThis.alert(text), confirm = (text) => globalThis.confirm(text),
+}) {
+  // The session this tab is stopping: its stream may close before the stop
+  // request returns (workerGone reads it).
+  let stoppingId = null;
+
+  // Delete a session (the info bar's button, an all-sessions card's ✕) after
+  // a confirm; the list drops it without a reload. The server stops a live
+  // worker first and refuses a session a terminal chi has open.
+  async function confirmDelete(id) {
+    const sess = sessions().find((s) => s.id === id) || { id };
+    if (sess.owner === "tui") {
+      alert(`Session ${id.slice(0, 8)} is open in a terminal chi; close it there first.`);
+      return;
+    }
+    if (!confirm(deleteConfirmText(sess))) return;
+    try {
+      await api.deleteSession(id);
+    } catch (e) {
+      alert(`Could not delete session ${id.slice(0, 8)}: ${e.message}`);
+      if (!eventsLive()) refresh();
+      return;
+    }
+    setSessions(sessions().filter((s) => s.id !== id));
+    if (selected() === id) clearSelection();
+    lists.render();
+  }
+
+  // The open session no longer exists: back to the start page, saying why.
+  function leaveGoneSession(id, why) {
+    if (selected() !== id) return;
+    clearSelection();
+    showNotice(goneSessionNotice(id, why));
+  }
+
+  // The info bar's Stop: the open session's worker, after a confirm.
+  async function stopSelected() {
+    if (!selected()) return;
+    if (!confirm(`Stop session ${selected()}?`)) return;
+    const id = selected();
+    stoppingId = id;
+    try {
+      await api.stopSession(id);
+      if (id === selected()) stoppedWorker(id);
+    } catch (e) {
+      // A refusal (a terminal holds it) or a worker that won't stop: said, as
+      // a failed restart is.
+      toast(cantText(`stop ${id.slice(0, 8)}`, e), null, { sticky: true });
+    } finally {
+      stoppingId = null;
+    }
+    // The list hears of the stop from the hub (the stop route rescans it).
+    if (!eventsLive()) refresh();
+  }
+
+  // ── Continue (session chains) ─────────────────────────────────────────────
+  // Continue → starts the next link of the open session's chain (the server
+  // waits up to 30 s for its recap, archives it, starts the new one with the
+  // recap as a note) and opens it with the opener in the composer, not sent
+  // (fillOpener: the previous link's own first message when it continues one).
+  // A link continued already opens that next link; its open delegates move
+  // to the new link (the toast counts them); a refusal for open delegates
+  // that can't move names them, each a link.
+  // One continue per session at a time (the server locks it too); another
+  // session's continue may run beside it.
+  const continuingIds = new Set();
+
+  async function continueSelected() {
+    if (!selected() || continuingIds.has(selected())) return;
+    const id = selected();
+    const short = id.slice(0, 8);
+    continuingIds.add(id);
+    updateInfoBar();
+    try {
+      const created = await api.continueSession(id);
+      markArchived([id], true);
+      addCreatedSession(created);
+      const next = created.id;
+      // A model fallback's warning stays until closed.
+      const sticky = !!created.model_warning;
+      if (selected() !== id) {
+        toast(continuedText(id, created, { opened: false }), { label: "Open", run: () => select(next) }, { sticky });
+        return;
+      }
+      await select(next);
+      if (selected() === next) fillOpener(created);
+      toast(continuedText(id, created), null, { sticky });
+    } catch (e) {
+      const refusal = continueRefusal(e, sessions());
+      if (refusal.kind === "open") {
+        if (selected() === id) await select(refusal.id);
+        toast(`${short} is continued already: ${selected() === refusal.id ? "opened" : "see"} ${refusal.id.slice(0, 8)}`);
+      } else if (refusal.kind === "children") {
+        toast(openChildrenTemplate(id, refusal.children, sessionHash), null, { sticky: true });
+      } else {
+        toast(`Can't continue ${short}: ${refusal.text}`, null, { sticky: true });
+      }
+    } finally {
+      continuingIds.delete(id);
+      updateInfoBar();
+    }
+  }
+
+  // ── Archive ───────────────────────────────────────────────────────────────
+  // Archive hides a session (and its delegates) from the strip and the list,
+  // kept for good; "include archived" in all sessions finds it. No confirm:
+  // the toast's Undo takes it back. Archiving the open session stays on it
+  // (the button flips to unarchive); its worker was stopped by the server.
+
+  function selectedArchived() {
+    return !!sessions().find((s) => s.id === selected())?.archived;
+  }
+
+  // The ids in the server's answer flip here at once; the hub's events
+  // follow with the same.
+  function markArchived(ids, archived) {
+    const set = new Set(ids);
+    setSessions(sessions().map((s) => (set.has(s.id) ? { ...s, archived } : s)));
+  }
+
+  // The open session's worker was stopped from here (the stop button, an
+  // archive): don't wait for its stream to notice.
+  function stoppedWorker(id) {
+    closeLiveStream();
+    state().status = "stopped";
+    workerGone(id);
+  }
+
+  // One archive / unarchive request, the core the info bar, a card's button
+  // and a batch share. The ids in the answer flip in the list at once. When
+  // the open session's worker was stopped (it, or a delegate of the archived
+  // one), its stream ending is a stop, not a lost worker.
+  // @return {ok: true, result} | {ok: false, error}
+  async function archiveOne(id, archive) {
+    // A live worker in the tree is stopped by the archive: the open
+    // session's stream ending then is a stop.
+    const open = selected();
+    const mine = archive && open && inTree(sessions(), id, open) ? open : null;
+    if (mine) stoppingId = mine;
+    try {
+      const result = archive ? await api.archiveSession(id) : await api.unarchiveSession(id);
+      markArchived(archive ? result.archived : result.unarchived, archive);
+      if (mine && mine === selected() && (result.stopped || []).includes(mine)) stoppedWorker(mine);
+      return { ok: true, result };
+    } catch (error) {
+      return { ok: false, error };
+    } finally {
+      // Another call may have taken it meanwhile: clear only our own.
+      if (mine && stoppingId === mine) stoppingId = null;
+    }
+  }
+
+  async function setArchived(id, archive, { undo = true } = {}) {
+    const short = id.slice(0, 8);
+    const answer = await archiveOne(id, archive);
+    if (!answer.ok) {
+      alert(`Could not ${archive ? "archive" : "unarchive"} session ${short}: ${answer.error.message}`);
+      return;
+    }
+    lists.render();
+    updateInfoBar();
+    if (!eventsLive()) refresh();
+    const what = archive ? "Archived" : "Unarchived";
+    toast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
+  }
+
+  // The info bar's Archive / Unarchive: the open session's, by its state.
+  function toggleArchiveSelected() {
+    if (!selected()) return;
+    if (selectedArchived()) setArchived(selected(), false);
+    else setArchived(selected(), true);
+  }
+
+  return {
+    confirmDelete, leaveGoneSession, stopSelected, continueSelected, archiveOne, setArchived, toggleArchiveSelected,
+    // The sessions whose Continue is under way (the info bar's button).
+    continuing: continuingIds,
+    // The session this tab is stopping, or null.
+    stoppingId: () => stoppingId,
+  };
+}