samagotchi 0.64.0 → 0.65.0

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,
+  };
+}

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

@@ -511,6 +511,30 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #composer{display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px}
 #composer .compose-col{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
 #composer.dropping{outline:2px dashed var(--accent);outline-offset:-4px}
+/* The delivery line (delivery_line.js): a session's row above the text field, always there so the composer never changes height: the key hint while idle; while a turn runs, where a message typed now goes in, then the cut and queue links. One quiet row, ellipsised; a phone gets the short text and chips. */
+#deliveryLine{display:flex;align-items:center;gap:10px;min-width:0;flex:1 0 100%;height:20px;padding:0 2px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-muted);user-select:none}
+#deliveryLine[hidden]{display:none}
+#deliveryLine .delivery-where{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#deliveryLine .delivery-where.idle{color:var(--text-faint)}
+#deliveryLine .short{display:none}
+#deliveryLine .delivery-links{flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
+#deliveryLine .delivery-sep{color:var(--text-faint)}
+#deliveryLine .delivery-link{background:transparent;border:0;padding:0 2px;min-height:0;height:18px;font:inherit;line-height:18px;color:var(--accent);cursor:pointer;border-radius:4px}
+#deliveryLine .delivery-link:hover:not(:disabled):not(.armed){text-decoration:underline;filter:none}
+#deliveryLine .delivery-link:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
+#deliveryLine .delivery-link:disabled{color:var(--text-faint);opacity:1;cursor:default}
+#deliveryLine .delivery-link.armed{color:var(--on-solid);background:var(--accent-strong);padding:0 6px}
+/* In a session the composer is a row: the line's row wraps above the text field and the buttons. */
+body.has-session #composer{flex-wrap:wrap;row-gap:6px}
+@media(max-width:600px){
+  #deliveryLine .long,#deliveryLine .delivery-sep{display:none}
+  #deliveryLine .short{display:inline}
+  #deliveryLine .delivery-link{padding:0 8px;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-bg);line-height:16px}
+  #deliveryLine .delivery-link:disabled{border-color:var(--border);background:transparent}
+  #deliveryLine .delivery-link.armed{border-color:var(--accent-strong);background:var(--accent-strong)}
+}
+/* A line queued for after the running turn: a dashed bubble, a turn of its own to come. */
+.bubble.user.queued[data-delivery="queue"]{border:1px dashed var(--accent-border);border-left:3px dashed var(--accent);background:transparent}
 #chips{display:flex;flex-wrap:wrap;gap:6px}
 #chips[hidden]{display:none}
 .chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-bg);border:1px solid var(--border-strong);border-radius:8px;padding:3px 4px 3px 3px;font-size:12px;max-width:220px}
@@ -718,6 +742,9 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 /* The cloud: one chip (steps, calls, a tick per call), the turn view's block behind it. */
 /* The footer: the chip at the stage's bottom edge (the cloud's steps open above it, the scroller's last slot). */
 .ts-foot{flex:none;padding:0 14px 10px}
+/* Below the turn's card: the lines queued for after it (each a turn of its own), apart from the turn by a dashed rule. */
+.ts-queued{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px 14px 10px;border-top:1px dashed var(--border-strong);max-height:calc(var(--stage-max,60vh) * .3);overflow:auto;scrollbar-width:thin}
+.ts-queued:empty{display:none}
 .ts-foot[hidden],.turn-stage.collapsed .ts-foot{display:none}
 .ts-chip{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text-muted);text-align:left}
 .ts-chip:hover:not(:disabled){filter:none;background:var(--bg-hover)}
@@ -750,6 +777,7 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
   .ts-status{padding-left:10px}
   .ts-scroll{padding:8px 10px 10px}
   .ts-foot{padding:0 10px 10px}
+  .ts-queued{padding:8px 10px 10px}
   .ts-defer{display:none}
   .ts-trail-item{max-width:24ch}
 }
@@ -1132,6 +1160,7 @@ a{color:var(--accent)}
           <div id="modelList" role="listbox" aria-label="Models"></div>
         </div>
         <div id="composeGrip" title="Drag to make the message box taller (double-click resets)"></div>
+        <div id="deliveryLine" aria-live="off" hidden></div>
         <div class="compose-col">
           <div id="chips" hidden></div>
           <textarea id="prompt" placeholder="Ask chi anything…" aria-controls="commandList" aria-autocomplete="list" aria-expanded="false"></textarea>

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

@@ -26,6 +26,12 @@ export function createLiveTurn(timingDeps) {
     displayPending: null,
     // The last turn_failed's line, shown again after prompt_restored's resync.
     failedText: null,
+    // The run's cut wait in seconds (turn_started / the snapshot's
+    // cut_after; null: unknown, an older worker) and, on a join
+    // mid-generation, the snapshot's generation {thinking_only, age, at}
+    // until the next generation starts: the composer's delivery line.
+    cutAfter: null,
+    serverGen: null,
 
     releaseDisplay() {
       this.displayPending?.finish();
@@ -39,6 +45,8 @@ export function createLiveTurn(timingDeps) {
       this.unmatchedMerge = false;
       this.wakeStart = false;
       this.failedText = null;
+      this.cutAfter = null;
+      this.serverGen = null;
       this.releaseDisplay();
     },
   };

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

@@ -222,14 +222,30 @@ export function handOffDue({ ended, pending, inUse, quietSinceMs, nowMs }) {
 // A handed-off turn's nodes in the order the turn view leaves them: the
 // prompt bubble (none for a reminder turn), the block, the extras in
 // arrival order, the answer's pieces, the timing line, the end line, the
-// kept cards.
-export function handOffOrder({ prompt = null, block = null, extras = [], answer = [], timing = null, end = null, kept = [] }) {
-  return [prompt, block, ...extras, ...answer, timing, end, ...kept].filter(Boolean);
+// kept cards, then the lines queued for after the turn (they run next).
+export function handOffOrder({ prompt = null, block = null, extras = [], answer = [], timing = null, end = null, kept = [], queued = [] }) {
+  return [prompt, block, ...extras, ...answer, timing, end, ...kept, ...queued].filter(Boolean);
 }
 
-// Where a row app.js would append goes: the stage's extras while a turn is
-// live (and not handing off), else the history; the recap always the
-// history (it is idle-only).
+// The rows that wait for the running turn's end to run as their own: a
+// prompt queued for after the turn (its delivery queue: the composer's
+// queue, /queue, chi send --queue, an image line) and a command queued
+// for the turn's end (commands.js drawCommandBubble's queued).
+export const QUEUED_ROWS = '.bubble.user.queued[data-delivery="queue"], .bubble.command.queued';
+
+// QUEUED_ROWS among +parent+'s own children (querySelectorAll on it).
+export const QUEUED_CHILDREN = QUEUED_ROWS.split(", ").map((sel) => `:scope > ${sel}`).join(", ");
+
+// The kind placeFor reads off an element app.js places.
+export function placeKind(el) {
+  if (el.matches?.(".bubble.recap")) return "recap";
+  if (el.matches?.(QUEUED_ROWS)) return "queued";
+  return "row";
+}
+
+// Where a row app.js would append goes (placeFor, at the end of this
+// file): the stage's extras while a turn is live (and not handing off),
+// else the history; the recap always the history (it is idle-only).
 // What flashes in the trail for a few seconds while the turn runs (the
 // rows themselves go into their step inside the closed cloud): a hook's
 // notice, warn or info, as its row reads, the ✂ row of an applied LLM
@@ -258,7 +274,11 @@ export function flashOf(what, data = {}) {
   return { kind: data.level === "warn" ? "warn" : "info", text: data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}` };
 }
 
+// A queued row ("queued", placeKind) goes after the running turn, not
+// into it: the stage's queued slot below the turn's card while one is
+// live, else the history's end (after the turn there too).
 export function placeFor({ live, handingOff, kind }) {
   if (kind === "recap") return "history";
-  return live && !handingOff ? "stage" : "history";
+  if (!live || handingOff) return "history";
+  return kind === "queued" ? "queued" : "stage";
 }

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

@@ -13,7 +13,7 @@
 // reload. Slots are patched in place, never rebuilt from HTML: a selection
 // and annotate survive. The rules are pure in stage_model.js.
 import { createTurnView } from "./turn_view.js";
-import { flashOf, frameTarget, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
+import { flashOf, frameTarget, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, placeKind, QUEUED_CHILDREN, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
 import { formatDuration } from "./timing.js";
 import { easeScrollTo } from "./scroll.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
@@ -124,6 +124,9 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   chip.type = "button";
   const chipLabel = node("span", "ts-chip-label", chip);
   const ticks = node("span", "ts-ticks", chip);
+  // Below the turn's card: the lines queued for after it (placeKind
+  // "queued"), each to run as a turn of its own; they hand off last.
+  const queuedSlot = node("div", "ts-queued", stage);
 
   // The turn in the stage, from turnStarted until the hand-off (or a reset).
   let holding = false;
@@ -600,13 +603,14 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     maxContent = holds ? Math.max(maxContent, content) : 0;
     const mark = `${Math.max(0, Math.round(maxContent) - 1)}px`;
     if (holdEl.style.top !== mark) holdEl.style.top = mark;
-    const natural = (stage.offsetHeight - stage.clientHeight) + status.offsetHeight + content + (cloud.hidden || collapsed ? 0 : cloud.offsetHeight);
+    const natural = (stage.offsetHeight - stage.clientHeight) + status.offsetHeight + content + (cloud.hidden || collapsed ? 0 : cloud.offsetHeight)
+      + queuedSlot.offsetHeight;
     held = frameTarget({ natural, held, cap: capPx(), holding, collapsed });
     if (held === null) frameFree();
     else frameTo(held, { animate: true });
   }
   const frameObserver = new ResizeObserver(() => fitFrame());
-  for (const el of [status, promptSlot, live, extras, answer, tail, cloudBody, cloud]) frameObserver.observe(el);
+  for (const el of [status, promptSlot, live, extras, answer, tail, cloudBody, cloud, queuedSlot]) frameObserver.observe(el);
 
   // ── in use: pointer over it (tracked on the stage itself: :hover goes
   // stale when children change), a touch or wheel in the last 4 s (phones
@@ -677,7 +681,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   }
 
   function emptySlots() {
-    for (const slot of [promptSlot, extras, answer, tail, cloudBody, timingSlot, headline, asking, now, trail, ticks]) slot.replaceChildren();
+    for (const slot of [promptSlot, extras, answer, tail, cloudBody, queuedSlot, timingSlot, headline, asking, now, trail, ticks]) slot.replaceChildren();
     promptSlot.classList.remove("full");
     asking.hidden = true;
     shown.headline = shown.now = shown.trail = shown.asking = null;
@@ -744,6 +748,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       answer: [...answer.children],
       timing: timingSlot.firstElementChild,
       kept: [...tail.children],
+      queued: [...queuedSlot.children],
     });
     const animate = !immediate && !reducedMotion() && !document.hidden && !collapsed;
     folding = { pieces, block: blockEl, wasAtEnd: historyNearBottom(), animate };
@@ -779,6 +784,9 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   return {
     turnStarted(data) {
       if (folding) finishFold();
+      // A turn that never ended (released, not handed off) leaves its queued
+      // lines waiting still: they stay.
+      const waiting = [...queuedSlot.children].filter((el) => el !== data?.promptBubble);
       if (holding) {
         if (endKind) handOff({ immediate: true });
         else release();
@@ -794,15 +802,19 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       // The turn's prompt bubble (app.js found or drew it) sits in the prompt
       // line until the hand-off takes it back first.
       if (data?.promptBubble) promptSlot.appendChild(data.promptBubble);
+      // The lines still queued behind this turn went into the history with
+      // the turn before (the hand-off at this turn_started, or an earlier
+      // one): back below this turn's card, as a reload places them.
+      queuedSlot.append(...waiting.filter((el) => !el.isConnected), ...historyEl.querySelectorAll(QUEUED_CHILDREN));
       view.turnStarted(data || {});
       show();
       refresh();
     },
-    generationStarted(data) {
+    generationStarted(data, now = null) {
       // The next step: the live slots' waiting height is let go.
       stage.classList.remove("held-wait");
       stage.style.removeProperty("--live-held");
-      view.generationStarted(data);
+      view.generationStarted(data, now);
     },
     chunk: (data) => view.chunk(data),
     generationRestarted: (data) => view.generationRestarted(data),
@@ -853,18 +865,28 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     },
     containsLive: (el) => view.containsLive(el),
     askingText: () => view.askingText(),
+    // The turn model and its live phase as the status row reads it (the
+    // composer's delivery line).
+    current: () => view.current(),
+    phase: () => liveSlots(view.current().turn, { pending: pendingCard() || asksCard() }).phase,
     reset() {
       if (folding) finishFold();
       release();
     },
-    // The stage's extras while it holds a turn (a card, a queued prompt, a
-    // command, a note, the end line); false: the history takes it.
+    // The stage's extras while it holds a turn (a card, a prompt for its
+    // next step, a command, a note, the end line), its queued slot for a
+    // line queued for after it; false: the history takes it.
     place(el) {
       // A turn still sliding away goes into the history first: what comes
       // now comes after it.
       if (folding) finishFold();
-      const kind = el.matches?.(".bubble.recap") ? "recap" : "row";
-      if (placeFor({ live: holding, handingOff: false, kind }) !== "stage") return false;
+      const where = placeFor({ live: holding, handingOff: false, kind: placeKind(el) });
+      if (where === "history") return false;
+      if (where === "queued") {
+        queuedSlot.appendChild(el);
+        scheduleRefresh();
+        return true;
+      }
       const slot = endKind ? tail : extras;
       const stick = slot.scrollHeight - slot.scrollTop - slot.clientHeight < 24;
       slot.appendChild(el);

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

@@ -64,7 +64,7 @@ export function createStreamHandlers(deps) {
       // chunk_router.js). Raw `content` is only a fallback for an older server.
       const { text, thinking } = routeChunk(data);
       liveTurn.timing.setNote("");
-      turnDom.chunk({ text, thinking, iteration: data.iteration ?? null });
+      turnDom.chunk({ text, thinking, iteration: data.iteration ?? null, now: data.replayed ? null : Date.now() });
       const current = state();
       const pct = extractCtxPct(data, current.ctxWindow, current.llmContext?.budget_tokens);
       if (pct !== null && !Number.isNaN(pct)) {
@@ -79,7 +79,11 @@ export function createStreamHandlers(deps) {
         current.ctxWindowSource = data.context_window_source || null;
       }
       liveTurn.timing.setNote("");
-      turnDom.generationStarted(data || {});
+      // The step's clock (the composer's delivery line): the page's own at a
+      // live start; a replay's comes from the snapshot's generation age,
+      // which a live start makes stale.
+      if (!data?.replayed) liveTurn.serverGen = null;
+      turnDom.generationStarted(data || {}, data?.replayed ? null : Date.now());
     },
     generation_completed: (data) => {
       liveTurn.timing.setNote("");
@@ -115,6 +119,8 @@ export function createStreamHandlers(deps) {
       markRecapStale();
       shownTexts.turnStarted();
       const promptBubble = applyPromptOps(data);
+      liveTurn.cutAfter = data.cut_after ?? null;
+      liveTurn.serverGen = null;
       setTurnRunning(true);
       setLiveStatus("running");
       liveTurn.timing.detach();

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

@@ -197,9 +197,14 @@ export function llmContextNotice(data) {
 }
 
 // The one muted line for a turn that ended with no answer (turn_completed's
-// turn_summary.empty_answer, or a reloaded turn's marker): the TUI words
-// it the same (TurnNote.empty_answer_line; spec/shared/labels_matrix.json).
-export function emptyAnswerLine({ retries = 0 } = {}) {
+// turn_summary.empty_answer, or a reloaded turn's marker), or one the
+// provider refused (its `refusal`, with the category when named): the TUI
+// words it the same (TurnNote.empty_answer_line; spec/shared/labels_matrix.json).
+export function emptyAnswerLine({ retries = 0, refusal = null } = {}) {
+  if (refusal) {
+    const category = String(refusal.category ?? "").trim();
+    return `no answer: refused by the provider${category ? ` (${category})` : ""}`;
+  }
   const count = Number(retries) || 0;
   const after = count > 0 ? ` (after ${count} ${count === 1 ? "retry" : "retries"})` : "";
   return `no answer: the model returned nothing${after}`;
@@ -254,9 +259,11 @@ export function promptOps(event, { myId, known, unmatchedMerge = false, wakeStar
   switch (event.type) {
     case "turn_enqueued": {
       const id = event.enqueued_id;
-      if (isOwn(event.client_id, myId)) return [withImages({ op: "tag", enqueuedId: id, prompt: event.prompt }, event.images)];
+      // Queued for after the running turn (delivery queue): its bubble says so.
+      const delivery = event.delivery ? { delivery: event.delivery } : {};
+      if (isOwn(event.client_id, myId)) return [withImages({ op: "tag", enqueuedId: id, prompt: event.prompt, ...delivery }, event.images)];
       if (id && known(id)) return [];
-      return [withImages({ op: "add", enqueuedId: id, prompt: event.prompt, state: "queued", label: clientLabel(event.client_id) }, event.images)];
+      return [withImages({ op: "add", enqueuedId: id, prompt: event.prompt, state: "queued", label: clientLabel(event.client_id), ...delivery }, event.images)];
     }
     case "turn_started": {
       if (event.continue || !event.prompt) return [];
@@ -308,7 +315,10 @@ export function replaysDrawnTurn(event, turnRecords = []) {
 export function snapshotEvents({ current_turn: turn = null, queued = [], queued_commands: commands = [], started_at = undefined } = {}) {
   const events = [];
   if (turn) {
-    events.push(withImages({ type: "turn_started", prompt: turn.prompt, origin: turn.origin, continue: !!turn.continue, started_at }, turn.images));
+    // The run's cut wait (TurnAccumulator, as turn_started carried it): the
+    // composer's delivery line reads it.
+    const cutAfter = turn.cut_after != null ? { cut_after: turn.cut_after } : {};
+    events.push(withImages({ type: "turn_started", prompt: turn.prompt, origin: turn.origin, continue: !!turn.continue, started_at, ...cutAfter }, turn.images));
     let textIteration = null; // a text bubble is open for this iteration
     const closeText = () => {
       if (textIteration !== null) events.push({ type: "generation_completed" });
@@ -340,7 +350,10 @@ export function snapshotEvents({ current_turn: turn = null, queued = [], queued_
           // EVENT_FIELDS), as the live events carry them.
           const title = pickFields(part, ACTIVITY_FIELDS);
           const fields = pickFields(part, EVENT_FIELDS);
-          events.push({ type: "tool_call_started", ...call, params: part.params, ...title, ...fields });
+          // A running call's time so far (TurnAccumulator elapsed_ms): a join
+          // clocks it from its start (activity.js markStart).
+          const elapsed = part.status === "running" && part.elapsed_ms != null ? { elapsed_ms: part.elapsed_ms } : {};
+          events.push({ type: "tool_call_started", ...call, params: part.params, ...title, ...fields, ...elapsed });
           if (part.status !== "running") {
             // The activity as the live event had it; action and duration_ms
             // only in snapshots from a worker that keeps them (the TUI's
@@ -385,7 +398,8 @@ export function snapshotEvents({ current_turn: turn = null, queued = [], queued_
     }
   }
   for (const entry of queued || []) {
-    events.push(withImages({ type: "turn_enqueued", enqueued_id: entry.enqueued_id, client_id: entry.client_id, prompt: entry.prompt }, entry.images));
+    const delivery = entry.delivery ? { delivery: entry.delivery } : {};
+    events.push(withImages({ type: "turn_enqueued", enqueued_id: entry.enqueued_id, client_id: entry.client_id, prompt: entry.prompt, ...delivery }, entry.images));
   }
   // Commands waiting for the turn's end: their bubbles, as live.
   for (const entry of commands || []) {

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

@@ -116,8 +116,22 @@ export function toolRowInnerTemplate(row, { thumbs = () => nothing, stop = nothi
 // gave it back). Any other state ("started", none) is a plain bubble.
 export const BADGES = { queued: "queued", steered: "steered", failed: "failed" };
 
-export function stateBadgeTemplate(state) {
-  return BADGES[state] ? html`<span class="state-badge">${BADGES[state]}</span>` : nothing;
+// A queued line's badge by its delivery (the composer's choice, the
+// turn_enqueued's): what it waits for. next_step: the running turn's next
+// step; cut: the cut (the ack may say it waits); queue: a turn of its own
+// after this one.
+const QUEUED_BADGES = { next_step: "waits for the next step", cut: "cutting in\u2026", queue: "after this turn" };
+
+// A bubble's badge words for +state+ (and +delivery+ while queued); null
+// for a plain bubble.
+export function badgeText(state, delivery = null) {
+  if (!BADGES[state]) return null;
+  return (state === "queued" && QUEUED_BADGES[delivery]) || BADGES[state];
+}
+
+export function stateBadgeTemplate(state, delivery = null) {
+  const text = badgeText(state, delivery);
+  return text ? html`<span class="state-badge">${text}</span>` : nothing;
 }
 
 // A `!cmd`'s saved user message (the worker appends "!(<command>)\n<output>"
@@ -203,10 +217,12 @@ export function steerRowTemplate({ source, text } = {}, { bubble = false } = {})
 // merged mid-turn (a reload's; a resolved question goes before it).
 // The live page's own: +own+ (this tab sent it), +enqueuedId+ and +key+
 // (its normalized text: an echo waiting for its id is matched by it).
-export function userBubbleTemplate(message, { label = null, state = null, step = null, thumbs = nothing, own = false, enqueuedId = null, key = null } = {}) {
+// +delivery+: how it was sent into a running turn (next_step, cut, queue):
+// its data-delivery and its queued badge's words.
+export function userBubbleTemplate(message, { label = null, state = null, step = null, thumbs = nothing, own = false, enqueuedId = null, key = null, delivery = null } = {}) {
   const named = BADGES[state] ? state : null;
   const from = label ? html`<span class="origin-label">${label}</span>` : nothing;
-  return html`<div class=${`bubble user${named ? ` ${named}` : ""}`} data-user-state=${named || nothing} data-step=${step ? Number(step) : nothing} data-copy-source=${copySource({ ...message, role: "user" })} data-user-content=${key !== null ? key : nothing} data-own=${own ? "1" : nothing} data-enqueued-id=${enqueuedId || nothing}>${from}<div class="user-message">${userBodyTemplate(message?.content)}${thumbs}</div>${stateBadgeTemplate(named)}</div>`;
+  return html`<div class=${`bubble user${named ? ` ${named}` : ""}`} data-user-state=${named || nothing} data-step=${step ? Number(step) : nothing} data-copy-source=${copySource({ ...message, role: "user" })} data-user-content=${key !== null ? key : nothing} data-own=${own ? "1" : nothing} data-enqueued-id=${enqueuedId || nothing} data-delivery=${delivery || nothing}>${from}<div class="user-message">${userBodyTemplate(message?.content)}${thumbs}</div>${stateBadgeTemplate(named, delivery)}</div>`;
 }
 
 // The notice of a turn that ended with no answer (the server's