samagotchi 0.64.0 → 0.66.0

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

@@ -7,10 +7,15 @@
 // bubble rewrites its text every frame, which would collapse it by the time
 // a button is clicked.
 //
+// A bundle's pills (chi.annotation) come after the presets: each prepares
+// its command line with the selection (annotate_actions.js), at most 3
+// inline, the rest behind "⋯".
+//
 // The quoting rules are annotations.js'; this is the bar.
 
 import { annotateBarLeft, annotationSource, quoteBlock } from "./annotations.js";
 import { presetNote } from "./annotate_presets.js";
+import { actionEnabled, actionTitle, sameActions, selectionFields, splitInline } from "./annotate_actions.js";
 
 // @param presets the preset texts (annotate_presets.js parsePresets)
 // @param canAnnotate () => whether the open session takes annotations (one
@@ -21,11 +26,18 @@ import { presetNote } from "./annotate_presets.js";
 //   until its step closes)
 // @param onQuote (text) runs with the quote (and a preset's note) to append
 //   to the composer; the selection is cleared and the bar hidden first
+// @param actions () => the open session's annotation actions
+//   (annotate_actions.js annotationActions), read on every selection
+// @param running () => whether a turn runs (a send pill may wait for it)
+// @param onAction (action, fields) runs with a clicked pill's action and the
+//   selection's {quote, text, source}; the selection is cleared and the bar
+//   hidden first
 // @param doc, win the page's document and window
 // @return {schedule(), hide(), el}; schedule() re-reads the selection on the
 //   next frame (call it on scroll)
 export function createAnnotateBar({
-  presets, canAnnotate, roots, isLive, onQuote, doc = globalThis.document, win = globalThis.window,
+  presets, canAnnotate, roots, isLive, onQuote, actions = () => [], running = () => false, onAction = () => {},
+  doc = globalThis.document, win = globalThis.window,
 }) {
   const bar = doc.createElement("div");
   bar.id = "annotateBar";
@@ -46,11 +58,63 @@ export function createAnnotateBar({
     btn.title = text;
     bar.appendChild(btn);
   });
+  // The plugin pills: a separator, the inline ones, then ⋯ and the list
+  // it opens. Redrawn only when the session's actions change.
+  const group = doc.createElement("span");
+  group.className = "annotate-actions";
+  group.hidden = true;
+  bar.appendChild(group);
   doc.body.appendChild(bar);
   let pendingQuote = null;
+  let pendingFields = null;
+  let drawn = [];
+  let moreList = null;
+
+  function drawActions(list) {
+    drawn = list;
+    moreList = null;
+    group.hidden = !list.length;
+    if (!list.length) return group.replaceChildren();
+    const sep = doc.createElement("span");
+    sep.className = "annotate-sep";
+    sep.setAttribute("aria-hidden", "true");
+    const pill = (action, i) => {
+      const btn = button(action.label, "annotate-action");
+      btn.dataset.action = String(i);
+      if (action.send) btn.dataset.sends = "";
+      return btn;
+    };
+    const { inline, more } = splitInline(list);
+    const nodes = [sep, ...inline.map(pill)];
+    if (more.length) {
+      const toggle = button("⋯", "annotate-more");
+      toggle.title = "More actions";
+      toggle.setAttribute("aria-label", "More actions");
+      moreList = doc.createElement("div");
+      moreList.className = "annotate-more-list";
+      moreList.hidden = true;
+      more.forEach((action, j) => moreList.appendChild(pill(action, inline.length + j)));
+      nodes.push(toggle, moreList);
+    }
+    group.replaceChildren(...nodes);
+  }
+
+  // Each pill's state for whether a turn runs (a send pill may wait).
+  function markActions() {
+    const now = running();
+    const all = [...group.children, ...(moreList ? moreList.children : [])];
+    for (const btn of all) {
+      if (btn.dataset?.action === undefined) continue;
+      const action = drawn[Number(btn.dataset.action)];
+      btn.disabled = !actionEnabled(action, now);
+      btn.title = actionTitle(action, now);
+    }
+  }
 
   function hide() {
     pendingQuote = null;
+    pendingFields = null;
+    if (moreList) moreList.hidden = true;
     bar.hidden = true;
   }
 
@@ -67,9 +131,14 @@ export function createAnnotateBar({
     // Clip to where the selection starts: one tool row, one bubble.
     const clipped = range.cloneRange();
     if (!source.root.contains(range.endContainer)) clipped.setEnd(source.root, source.root.childNodes.length);
-    const block = quoteBlock(clipped.toString(), source);
+    const raw = clipped.toString();
+    const block = quoteBlock(raw, source);
     if (!block) return hide();
     pendingQuote = block;
+    pendingFields = selectionFields(raw, source);
+    const list = actions() || [];
+    if (!sameActions(list, drawn)) drawActions(list);
+    markActions();
     const rects = clipped.getClientRects();
     const rect = rects.length ? rects[rects.length - 1] : clipped.getBoundingClientRect();
     bar.hidden = false;
@@ -109,6 +178,19 @@ export function createAnnotateBar({
   bar.addEventListener("click", (e) => {
     const btn = e.target.closest("button");
     if (!btn || !pendingQuote) return;
+    if (btn.className === "annotate-more") {
+      moreList.hidden = !moreList.hidden;
+      return;
+    }
+    if (btn.dataset.action !== undefined) {
+      const action = drawn[Number(btn.dataset.action)];
+      if (!action || btn.disabled) return;
+      const fields = pendingFields;
+      win.getSelection()?.removeAllRanges();
+      hide();
+      onAction(action, fields);
+      return;
+    }
     const preset = btn.dataset.index === undefined ? null : presets[Number(btn.dataset.index)];
     const text = preset ? presetNote(pendingQuote, preset) : pendingQuote;
     win.getSelection()?.removeAllRanges();

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

@@ -46,6 +46,7 @@ import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
 import { createAnnotateBar } from "./annotate_bar.js";
+import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { copyText, installCopy } from "./copy.js";
 import { ctxBarText, ctxBarTip, lastSpeedText, speedText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
@@ -76,6 +77,10 @@ import { createComposerCommands, routeComposerLine, routeSessionLine } from "./c
 import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js";
 import { createStreamHandlers } from "./stream_handlers.js";
 import { createListsView } from "./lists_view.js";
+import { createDeliveryControl, QUEUE_NEEDS_WORKER } from "./delivery_line.js";
+import { liveSlots } from "./stage_model.js";
+import { currentGen } from "./turn_model.js";
+import { toolName } from "./activity.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -251,6 +256,28 @@ const liveTurn = createLiveTurn({
   onTick: () => updateInfoBar(),
 });
 
+// The composer's delivery line while the open session's turn runs
+// (delivery_line.js): where a message typed now goes in, and the cut and
+// queue links.
+const deliveryControl = createDeliveryControl({
+  el: $("#deliveryLine"),
+  read: () => {
+    const turn = turnDom.current?.().turn || null;
+    const running = turn ? turn.gens.flatMap((g) => g.tools).reverse().find((r) => r.status === "running") : null;
+    return {
+      phase: turnDom.phase?.() || liveSlots(turn).phase,
+      gen: turn ? currentGen(turn) : null,
+      tool: running ? { name: toolName(running), startedAt: running.startedAt ?? null } : null,
+      cutAfter: liveTurn.cutAfter,
+      serverGen: liveTurn.serverGen,
+      canQueue: current.workerFeatures.includes("delivery"),
+      model: current.model,
+    };
+  },
+  composerEmpty: () => !promptEl.value.trim() && !chips.length,
+  send: (delivery) => handleSendTurn({ delivery }),
+});
+
 // This tab's id in the session's events: tells its own prompts from the
 // ones other clients (an attached TUI, another tab, reminders) sent.
 const clientId = newClientId();
@@ -552,8 +579,9 @@ function updateComposerMode() {
   }
   const running = liveTurn.running && !!selected;
   cancelBtn.style.display = running ? "" : "none";
+  syncDeliveryLine();
   if (running) {
-    setPlaceholder("Running… a message now steers this turn · Enter to send · Shift+Enter newline", "Steer the turn…");
+    setPlaceholder("Running… a message goes in at the next step · Enter to send · Alt+Enter queues", "Steer the turn…");
     composeHintEl.textContent = SEND_HINT;
     actionBtn.textContent = "Send";
     emptyEl.classList.add("hidden");
@@ -574,7 +602,8 @@ function updateComposerMode() {
     actionBtn.disabled = true;
     emptyEl.classList.add("hidden");
   } else {
-    setPlaceholder("Message chi… · Enter to send · Shift+Enter newline · ↑ history", "Message chi…");
+    // The keys are in the delivery line's row above.
+    setPlaceholder("Message chi…", "Message chi…");
     composeHintEl.textContent = SEND_HINT;
     actionBtn.textContent = "Send";
     actionBtn.disabled = false;
@@ -582,6 +611,14 @@ function updateComposerMode() {
   }
 }
 
+// The delivery line's row in a session (delivery_line.js): the key hint
+// while idle, where a message goes in while the turn runs.
+function syncDeliveryLine() {
+  // A terminal owns the session: the composer is off, so is its row.
+  if (!selected || current.owner === "tui") deliveryControl.show("off");
+  else deliveryControl.show(liveTurn.running && current.owner !== "tui" ? "running" : "idle");
+}
+
 function setTurnRunning(running) {
   liveTurn.running = !!running;
   updateComposerMode();
@@ -790,6 +827,9 @@ function renderSessionView(data, { kept = [] } = {}) {
   });
   // Marked replayed: a call's duration isn't timed from the replay's clock.
   replay.forEach((event) => streamHandlers[event.type]?.({ ...event, replayed: true }));
+  // A join mid-generation: the worker's word on it clocks the delivery line.
+  const gen = data.current_turn?.generation;
+  liveTurn.serverGen = gen ? { ...gen, at: Date.now() } : null;
   if (!data.current_turn) {
     setTurnRunning(current.status === "running");
     if (liveTurn.running && current.timing.activeTurn?.started_at) liveTurn.timing.start(current.timing.activeTurn.started_at, activeTurnId);
@@ -997,11 +1037,13 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
 // prompts are echoed at send (data-own) and tagged by their turn_enqueued.
 
 // The bubble a reload draws (turn_html.js), with this page's own fields.
-function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null } = {}) {
+// +delivery+: how it went into a running turn (next_step, cut, queue): its
+// queued badge says what it waits for.
+function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null, delivery = null } = {}) {
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
   const div = elementOf(userBubbleTemplate({ content: prompt }, {
-    label, state, own, enqueuedId, key: normalize(prompt), thumbs: thumbsTemplate(selected, images),
+    label, state, own, enqueuedId, delivery, key: normalize(prompt), thumbs: thumbsTemplate(selected, images),
   }));
   const follow = isNearBottom();
   appendToHistory(div);
@@ -1018,7 +1060,17 @@ function setBubbleState(bubble, state) {
   }
   bubble.classList.add(state);
   bubble.dataset.userState = state;
-  bubble.append(elementOf(stateBadgeTemplate(state)));
+  bubble.append(elementOf(stateBadgeTemplate(state, bubble.dataset.delivery || null)));
+}
+
+// A bubble's delivery changed (the ack's cut: off goes in at the next
+// step; a queue to a turn that ended meanwhile is just the next turn): its
+// badge follows.
+function setBubbleDelivery(bubble, delivery) {
+  if ((bubble.dataset.delivery || null) === (delivery || null)) return;
+  if (delivery) bubble.dataset.delivery = delivery;
+  else delete bubble.dataset.delivery;
+  if (bubble.dataset.userState) setBubbleState(bubble, bubble.dataset.userState);
 }
 
 function bubbleById(enqueuedId) {
@@ -1047,15 +1099,18 @@ function applyPromptOps(event) {
     if (op.op === "report") {
       liveTurn.unmatchedMerge = "report";
     } else if (op.op === "add") {
-      const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images });
+      const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery });
       if (op.state === "started") started = bubble;
       if (event.type === "pending_input_merged") liveTurn.wakeStart = false;
     } else if (op.op === "tag") {
       if (bubbleById(op.enqueuedId)) continue;
       const echo = untaggedOwnBubble(op.prompt);
-      if (echo) echo.dataset.enqueuedId = op.enqueuedId;
+      if (echo) {
+        echo.dataset.enqueuedId = op.enqueuedId;
+        if (op.delivery) setBubbleDelivery(echo, op.delivery);
+      }
       // Re-rendered from a snapshot: the echo is gone, the prompt still queued.
-      else makeUserBubble(op.prompt, { state: "queued", own: true, enqueuedId: op.enqueuedId, images: op.images });
+      else makeUserBubble(op.prompt, { state: "queued", own: true, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery });
     } else if (op.op === "start") {
       const bubble = bubbleById(op.enqueuedId) || untaggedOwnBubble(op.prompt);
       // A resync (a new worker woken by this page's send) re-rendered the
@@ -1422,6 +1477,8 @@ function updateInfoBar() {
     llmContext: current.llmContext,
     thinking: current.thinking,
     reasoningHistory: current.reasoningHistory,
+    // The tools chip (toolkit_chip.js): null on full.
+    toolkit: current.toolkit,
     // The model notes the session's prompt carried.
     notes: promptNotesChip(current.promptNotes),
     memories: current.usedMemories,
@@ -1683,10 +1740,14 @@ function handleCreate() {
   return handleSendTurn();
 }
 
-async function handleSendTurn() {
+// +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 handleSendTurn({ delivery: chosen = null } = {}) {
   if (current.owner === "tui") return;
   let prompt = turnText(promptEl.value, chips);
   if (!prompt) return;
+  const armed = deliveryControl.take();
   // 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).
@@ -1727,14 +1788,18 @@ async function handleSendTurn() {
   }
   if (route.command) return composerCommands.send(route.command);
   prompt = route.send;
-  const delivery = route.delivery;
+  const running = liveTurn.running && !!selected;
+  const delivery = route.delivery || (running ? 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 = chips.slice();
-  const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending });
+  // 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 = running ? (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 (!current.firstPreview || current.firstPreview==="—") {
     current.firstPreview = firstPreview(prompt);
@@ -1756,6 +1821,11 @@ async function handleSendTurn() {
       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
@@ -2118,10 +2188,20 @@ function historyKey(e) {
 promptEl.addEventListener("keydown", (e) => {
   if (commandList.handleKey(e)) return;
   if (historyKey(e)) return;
-  if (e.key === "Enter" && !e.shiftKey) {
+  // Esc lets go of a choice armed on the delivery line.
+  if (e.key === "Escape" && deliveryControl.disarm()) {
+    e.preventDefault();
+    return;
+  }
+  // An IME's Enter picks the composition, it doesn't send.
+  if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
     e.preventDefault();
     if (!selected) handleCreate();
-    else handleSendTurn();
+    // Alt/Option+Enter: queued for after the running turn (D6), only to a
+    // worker that queues (else it would steer): the text stays, a note says why.
+    else if (e.altKey && liveTurn.running && !current.workerFeatures.includes("delivery")) {
+      addCommandBubble({ label: null, line: promptEl.value.trim(), text: QUEUE_NEEDS_WORKER, failed: true });
+    } else handleSendTurn(e.altKey ? { delivery: "queue" } : {});
   }
 });
 $("#infoStopBtn").addEventListener("click", async () => {
@@ -2302,18 +2382,29 @@ function showToast(text, action = null, { sticky = false } = {}) {
 }
 
 // Annotate (annotate_bar.js): a selection in the conversation offers
-// "Annotate" and the presets, which append a quote to the composer.
+// "Annotate" and the presets, which append a quote to the composer, and the
+// session's plugins' pills (chi.annotation, annotate_actions.js), which fill
+// the composer with their command line and the quote, or send it at once.
+function fillComposer(text) {
+  promptEl.value = text;
+  fitPrompt();
+  promptEl.focus();
+  promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
+  promptEl.scrollTop = promptEl.scrollHeight;
+}
+
 const annotateBar = createAnnotateBar({
   presets: parsePresets(document.body.dataset.annotatePresets),
   canAnnotate: () => !!selected && current.owner !== "tui",
   roots: turnRoots,
   isLive: (root) => liveTurn.running && turnDom.containsLive(root),
-  onQuote: (text) => {
-    promptEl.value = appendQuote(promptEl.value, text);
-    fitPrompt();
-    promptEl.focus();
-    promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
-    promptEl.scrollTop = promptEl.scrollHeight;
+  onQuote: (text) => fillComposer(appendQuote(promptEl.value, text)),
+  actions: () => annotationActions(current.commands),
+  running: () => liveTurn.running,
+  onAction: (action, fields) => {
+    const line = actionLine(action, fields);
+    if (action.send) runSessionCommand(line);
+    else fillComposer(composerWithAction(promptEl.value, action, line));
   },
 });
 historyEl.addEventListener("scroll", annotateBar.schedule);

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

@@ -10,7 +10,8 @@ import { anchorInsertIndex, commandAnchor, isShellCommandLine, keepsCommandBubbl
 // Whether a composer line in an open session is one of its commands
 // (+commands+: the session GET's listing), as the terminals decide
 // (Commands::Registry#lookup): a "!" line with something after the "!", or
-// a listed name alone or followed by a space; a terminal's own (/stats,
+// a listed name alone or followed by whitespace (a newline too: an
+// annotation action's line puts the quote under the name); a terminal's own (/stats,
 // /exit) too, which the page answers itself (webLocalReply). An unknown
 // "/word" (a path, a typo) goes to the model as a prompt, as in a terminal.
 export function sessionCommandLine(text, commands) {
@@ -19,7 +20,8 @@ export function sessionCommandLine(text, commands) {
   if (!line.startsWith("/")) return false;
   if (webLocalReply(line)) return true;
   return (Array.isArray(commands) ? commands : [])
-    .some((c) => c && typeof c.name === "string" && (line === c.name || line.startsWith(`${c.name} `)));
+    .some((c) => c && typeof c.name === "string"
+      && (line === c.name || (line.startsWith(c.name) && /\s/.test(line[c.name.length]))));
 }
 
 // /cut TEXT and /queue TEXT: the UIs' own words for a delivery (listed

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

@@ -0,0 +1,228 @@
+// The composer's delivery line (web, steer delivery P4w): a row above the
+// text field in a session, always there so the composer never changes
+// height (the stage above it would jump). Idle it holds the key hint; while
+// the open session's turn runs it says where a message typed now goes in,
+// and offers the other two deliveries as links:
+//
+//   ↳ goes in after this thinking step · 2:31 · 31k chars    cut in now · queue for after the turn
+//   ↳ goes in after this tool call (execute · 0:12)           queue for after the turn
+//
+// Send (Enter, the button) is next_step; "queue for after the turn" (or
+// Alt/Option+Enter) runs the message as a turn of its own after this one;
+// "cut in now" (a click only: it throws the thinking away) cuts a
+// thinking-only generation (the worker's SteerCut rule: once it has
+// thought for the model's cut_after seconds). A link clicked with an empty
+// composer arms its choice for the next Enter; Esc or a second click
+// disarms it.
+//
+// deliveryLine is pure (node tests); deliveryLineTemplate is its lit view.
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+export const QUEUE_LABEL = "queue for after the turn";
+export const CUT_LABEL = "cut in now";
+// A phone's row (≤ 600 px) is short: its text and chips.
+export const QUEUE_SHORT = "queue";
+export const CUT_SHORT = "cut in";
+// Alt+Enter to a worker without the delivery feature: not sent (a queue
+// would steer it), the text kept, this said.
+export const QUEUE_NEEDS_WORKER = "Not sent: queueing needs a newer worker (it would steer the running turn). "
+  + "Restart it (chi sessions restart ID, or the update badge), then send again.";
+// The idle row: the keys (the placeholder's hint before the row existed).
+export const IDLE_HINT = "Enter to send · Shift+Enter newline · ↑ history";
+
+// m:ss (h:mm:ss past an hour) of +seconds+; "" when unknown.
+export function clockText(seconds) {
+  if (seconds == null || !Number.isFinite(seconds) || seconds < 0) return "";
+  const total = Math.floor(seconds);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = String(total % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
+}
+
+// "812 chars", "31k chars"; "" for none.
+export function charsText(count) {
+  if (!count) return "";
+  return count < 1000 ? `${count} chars` : `${Math.round(count / 1000)}k chars`;
+}
+
+// Seconds the current generation has run: from the page's own clock (its
+// first thinking delta, thinkingAt, as the worker's cut counts; else its
+// startedAt, set at generation_started), else from the worker's snapshot
+// (+serverGen+: {thinking_only, age, at}; a page that joined mid-generation
+// has no start of its own: age as of +at+, the page's clock when the
+// snapshot came); null when neither.
+export function genAge(gen, serverGen, now) {
+  const since = gen?.thinkingAt ?? gen?.startedAt;
+  if (since != null) return Math.max(0, (now - since) / 1000);
+  if (serverGen?.age != null && serverGen.at != null) return serverGen.age + Math.max(0, (now - serverGen.at) / 1000);
+  return null;
+}
+
+// Whether the generation has streamed only thinking: thinking, no visible
+// text, no tool call (the worker's GenerationPhase, freshness aside: a
+// stale cut is the worker's to refuse or hold, its ack says which). The
+// worker's own word (+serverGen+) wins: it also sees tool-call chunks.
+function thinkingOnly(gen, serverGen) {
+  if (!gen?.thinking || gen.text?.trim() || gen.tools?.length) return false;
+  return serverGen?.thinking_only !== false;
+}
+
+// What the line shows for the running turn:
+//   phase      stage_model.js liveSlots(turn).phase
+//   gen        the current gen (turn_model.js: thinking, text, tools, startedAt)
+//   tool       the running call: {name, startedAt} (activity.js row), or null
+//   cutAfter   the run's cut wait in seconds (turn_started / current_turn
+//              cut_after): 0 is cutting off, null unknown (an older worker)
+//   serverGen  the snapshot's current_turn.generation with `at`, or null
+//   now        the page's clock (ms)
+//   armed      "cut" | "queue" | null: the choice the next Enter sends
+//   canQueue   the worker takes delivery: queue (its "delivery" feature)
+//   model      the session's model, for the cut-off reason
+// → {text, short, cut: {enabled, shown, reason, label, short}, queue:
+//    {enabled, shown, label, short}, armed}: short is the phone's text;
+//    armed is what is still armed (a cut no longer possible disarms). With
+//    cutting off the cut link goes (the text says why); without the
+//    feature the queue link goes.
+export function deliveryLine({ phase = "thinking", gen = null, tool = null, cutAfter = null, serverGen = null, now = Date.now(),
+  armed = null, canQueue = true, model = "" } = {}) {
+  const cutOff = cutAfter === 0 || (cutAfter != null && cutAfter < 0);
+  const thinking = phase === "thinking" && thinkingOnly(gen, serverGen);
+  const age = genAge(gen, serverGen, now);
+  let where;
+  let short;
+  let reason = "";
+  if (phase === "running a tool") {
+    const clock = clockText(tool?.startedAt != null ? (now - tool.startedAt) / 1000 : null);
+    where = `goes in after this tool call (${[tool?.name || "tool", clock].filter(Boolean).join(" · ")})`;
+    short = ["after this tool call", clock].filter(Boolean).join(" · ");
+    reason = "a tool is running: only a thinking step can be cut";
+  } else if (phase === "waiting for you") {
+    where = "goes in once the card above is answered";
+    short = "after the card's answer";
+    reason = "the turn waits for you";
+  } else if (phase === "writing" || phase === "writing the answer") {
+    where = "goes in after this answer; the turn may go on";
+    short = "after this answer";
+    reason = "the model is writing: only a thinking step can be cut";
+  } else if (thinking) {
+    where = ["goes in after this thinking step", clockText(age), charsText(gen.thinking.length)].filter(Boolean).join(" · ");
+    short = ["after this thinking", clockText(age)].filter(Boolean).join(" · ");
+  } else {
+    where = "goes in after this step";
+    short = "after this step";
+    reason = "nothing to cut until the model thinks";
+  }
+  if (cutOff) reason = `cutting is off for ${model || "this model"}`;
+  const cutEnabled = !cutOff && thinking;
+  let wait = "";
+  if (cutEnabled && cutAfter > 0 && age != null && age < cutAfter) wait = `cuts at about ${clockText(cutAfter)} if you choose ${CUT_LABEL}`;
+  const effective = (armed === "cut" && cutEnabled) || (armed === "queue" && canQueue) ? armed : null;
+  const parts = [cutOff ? reason : "", where, wait].filter(Boolean);
+  // A phone's short row leaves it out: its ticked chip says it.
+  if (effective) parts.push("Enter sends");
+  const tick = (label, which) => (effective === which ? `${label} \u2713` : label);
+  return {
+    text: `\u21B3 ${parts.join(" · ")}`,
+    short: `\u21B3 ${short}`,
+    cut: { enabled: cutEnabled, shown: !cutOff, reason: cutEnabled ? "" : reason, label: tick(CUT_LABEL, "cut"), short: tick(CUT_SHORT, "cut") },
+    queue: { enabled: canQueue, shown: canQueue, label: tick(QUEUE_LABEL, "queue"), short: tick(QUEUE_SHORT, "queue") },
+    armed: effective,
+  };
+}
+
+// The line's view: +line+ is deliveryLine's; +onCut+ / +onQueue+ the
+// links' clicks. A disabled cut stays in place, its reason on hover.
+export function deliveryLineTemplate(line, { onCut, onQueue } = {}) {
+  const link = (which, part, onClick) => html`<button type="button" class="delivery-link ${which}${line.armed === which ? " armed" : ""}"
+    ?disabled=${!part.enabled} title=${part.reason || nothing} aria-label=${part.label} aria-pressed=${line.armed === which ? "true" : "false"}
+    @mousedown=${(e) => e.preventDefault()} @click=${onClick}><span class="long">${part.label}</span><span class="short">${part.short}</span></button>`;
+  const links = [line.cut.shown ? link("cut", line.cut, onCut) : null, line.queue.shown ? link("queue", line.queue, onQueue) : null]
+    .filter(Boolean);
+  return html`<span class="delivery-where" title=${line.text}><span class="long">${line.text}</span><span class="short">${line.short}</span></span><span class="delivery-links">${links.map((l, i) =>
+    (i ? html`<span class="delivery-sep" aria-hidden="true">·</span>${l}` : l))}</span>`;
+}
+
+// The idle row: the key hint (none on a phone: no keyboard keys there).
+export function idleTemplate() {
+  return html`<span class="delivery-where idle"><span class="long">${IDLE_HINT}</span><span class="short"></span></span>`;
+}
+
+// The row on the page: the key hint while idle, the line while the turn
+// runs (its clock ticking every TICK_MS), nothing outside a session; the
+// armed choice is kept here. No page globals: the page passes its hooks.
+//   read()           deliveryLine's inputs but now and armed (the turn's
+//                    phase, gen, tool, cutAfter, serverGen, canQueue, model)
+//   composerEmpty()  nothing typed and no image chips: a link arms
+//   send(delivery)   send the composer's line with +delivery+ ("cut", "queue")
+export const TICK_MS = 500;
+
+export function createDeliveryControl({ el, read, composerEmpty, send, now = () => Date.now(),
+  setTimer = (fn, ms) => setInterval(fn, ms), clearTimer = (t) => clearInterval(t) }) {
+  // "off" (no session: the row is gone), "idle" or "running".
+  let mode = "off";
+  let armed = null;
+  let timer = null;
+  let line = null;
+
+  const click = (which) => {
+    if (mode !== "running" || !line?.[which]?.enabled) return;
+    if (!composerEmpty()) {
+      armed = null;
+      send(which);
+      return;
+    }
+    armed = armed === which ? null : which;
+    refresh();
+  };
+
+  function refresh() {
+    if (mode === "off") return;
+    if (mode === "idle") {
+      render(idleTemplate(), el);
+      return;
+    }
+    line = deliveryLine({ ...read(), now: now(), armed });
+    // A choice no longer possible (a tool started) disarms.
+    armed = line.armed;
+    render(deliveryLineTemplate(line, { onCut: () => click("cut"), onQueue: () => click("queue") }), el);
+  }
+
+  return {
+    // +next+: "off", "idle" or "running".
+    show(next) {
+      if (next !== mode) {
+        mode = next;
+        el.hidden = mode === "off";
+        el.classList.toggle("running", mode === "running");
+        if (mode === "running") timer ??= setTimer(refresh, TICK_MS);
+        else {
+          clearTimer(timer);
+          timer = null;
+          armed = null;
+          line = null;
+        }
+      }
+      refresh();
+    },
+    refresh,
+    click,
+    armed: () => armed,
+    // The armed choice for this send, and disarmed.
+    take() {
+      const was = armed;
+      if (was) {
+        armed = null;
+        refresh();
+      }
+      return was;
+    },
+    disarm() {
+      if (!armed) return false;
+      armed = null;
+      refresh();
+      return true;
+    },
+    line: () => line,
+  };
+}