samagotchi 0.64.0 → 0.66.0

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

@@ -480,6 +480,15 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 #annotateBar{position:fixed;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100vw - 16px)}
 #annotateBar[hidden]{display:none}
 #annotateBar button{font-size:12px;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px var(--shadow-strong)}
+/* A bundle's pills (chi.annotation) after a thin separator; beyond 3, "⋯" opens the rest in a list under it. */
+#annotateBar .annotate-actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center;position:relative}
+#annotateBar .annotate-actions[hidden]{display:none}
+#annotateBar .annotate-sep{width:1px;align-self:stretch;margin:3px 2px;background:var(--border-strong)}
+#annotateBar .annotate-action,#annotateBar .annotate-more{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);padding:3px 10px;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#annotateBar .annotate-action:disabled{opacity:.5;cursor:not-allowed}
+#annotateBar .annotate-action[data-sends]::after{content:"↗";margin-left:4px;opacity:.75}
+#annotateBar .annotate-more-list{position:absolute;top:calc(100% + 4px);right:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
+#annotateBar .annotate-more-list[hidden]{display:none}
 #annotateBar .annotate-preset{background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong);padding:3px 10px;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Copy buttons (copy.js): top-right in an answer and a code block, left of a prompt (its right edge is the page's); shown on hover or focus, always (dim) on touch. They hold no text: "copied ✓" is CSS content. */
 .bubble.output,.bubble.user{position:relative}
@@ -511,6 +520,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 +751,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 +786,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 +1169,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/info_bar.js

@@ -1,6 +1,6 @@
 // The session bar's info line (#infoText): the open session's id, its copy
 // chi --attach button, status, model, chain links, parent and delegates,
-// llm ctx, thinking and reasoning history chips, model notes, memories, folder, ctx, speed,
+// llm ctx, thinking, reasoning history and tools chips, model notes, memories, folder, ctx, speed,
 // session clock and the worker's version badge. A lit-html template over a
 // plain model app.js builds (updateInfoBar), so the markup lives here and
 // runs under node --test (spec/web/public/info_bar.test.js).
@@ -16,6 +16,7 @@ import { ALL_SESSIONS_HASH, sessionHash } from "./route.js";
 import { chipTemplate as llmContextChip } from "./llm_context_chip.js";
 import { chipTemplate as thinkingChip } from "./thinking_chip.js";
 import { chipTemplate as reasoningHistoryChip } from "./reasoning_history_chip.js";
+import { chipTemplate as toolkitChip } from "./toolkit_chip.js";
 
 export const PREV = "←";
 export const NEXT = "→";
@@ -62,7 +63,8 @@ function kidsTemplate(kids) {
 //   mismatch}: format.js modelLabel), chain ({prev, next}: chainLinkTemplate's
 //   links or null), parent ({id, title} or null), kids (format.js
 //   childrenSummary), llmContext, thinking and reasoningHistory (the chips'
-//   summaries; reasoningHistory null on a native host: no chip), notes
+//   summaries; reasoningHistory null on a native host: no chip), toolkit
+//   (the tools chip's summary, null on full: no chip), notes
 //   ({text, title} or null), memories (the used names), dir, ctx ({text,
 //   tip}), speed ({text, tip} or null), clock (the session time's text, ""
 //   for none), worker ({badge, busy} or null).
@@ -70,7 +72,7 @@ export function infoBarHtml(bar) {
   if (!bar) return nothing;
   const attach = `chi --attach ${bar.id}`;
   const memories = bar.memories || [];
-  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${llmContextChip(bar.llmContext)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
+  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${llmContextChip(bar.llmContext)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${toolkitChip(bar.toolkit)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
 }
 
 // Draws +bar+ into +el+ (#infoText), with the memories in its tooltip.

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/session_state.js

@@ -48,6 +48,7 @@ export function emptySessionState() {
     // Which of its reasoning the model gets back from the next turn on, with
     // its source (the reasoning history chip), or null (a native host).
     reasoningHistory: null,
+    toolkit: null,
     timing: normalizeTiming(),
   };
 }
@@ -83,6 +84,8 @@ export function sessionStateFrom(data) {
   state.thinking = s.thinking || null;
   // null on a native host (it ignores the level) and from an older worker.
   state.reasoningHistory = s.reasoning_history || null;
+  // The tools chip's (null on full).
+  state.toolkit = s.toolkit || null;
   state.parentId = s.parent_id || null;
   state.continues = s.continues || null;
   state.commands = Array.isArray(data.commands) ? data.commands : [];

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();
@@ -223,6 +229,11 @@ export function createStreamHandlers(deps) {
         updateInfoBar();
         reasoningHistoryControl.refresh();
       }
+      // /toolkit changed what the next turn declares; null: full (no chip).
+      if ("toolkit" in data) {
+        state().toolkit = data.toolkit || null;
+        updateInfoBar();
+      }
       if (view.resync) await resync();
       // A card's action that isn't anytime (the step-limit question's
       // /continue) has no bubble: nothing to remove. An anytime or queued
@@ -240,6 +251,9 @@ export function createStreamHandlers(deps) {
       // message renders as one) — no second bubble, or the output shows twice.
       else if (view.resync && historyHasCommandBubble(findInTurnRoots(".bubble.command"), view.line)) { /* drawn by the resync */ }
       else addCommandBubble(view);
+      // This tab's command refused as busy (a plugin's command mid-turn): the
+      // composer was cleared when it went; its line comes back to send later.
+      if (view.own && view.busy && composer.empty()) composer.refill(view.line);
     },
     // An anytime command (/help, a plugin's /btw) runs at once, beside a
     // turn: its bubble goes here, so the cards it shows come after it. One
@@ -295,6 +309,11 @@ export function createStreamHandlers(deps) {
     // shows elsewhere (a hook's links in the rendered answer) isn't drawn,
     // not even in the stage trail; a joined turn's notices come here too.
     hook_notice: (data) => {
+      // A plugin put the session on another toolkit (ctx.use_toolkit).
+      if ("toolkit" in data) {
+        state().toolkit = data.toolkit || null;
+        updateInfoBar();
+      }
       if (shownElsewhere(data, capabilities())) return;
       if (!turnDom.notice(data)) showHookNotice(data);
     },

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

@@ -0,0 +1,29 @@
+// The session bar's tools chip: the session's toolkit when it isn't full
+// ("tools lean"), with the tools it leaves out and how to change them in
+// its tooltip. The summary is the session's toolkit ({name, label,
+// left_out, fallback}: Toolkit::Explained#summary; the worker's snapshot or
+// a command_ran; the server's own reading of the session file has no
+// left_out). Changing it is /toolkit (no popover yet).
+
+import { html, nothing } from "./vendor/lit-html.js";
+
+// The chip's text and tooltip; null without a summary (full).
+export function chipModel(summary) {
+  if (!summary) return null;
+  const label = summary.label || summary.name;
+  const parts = [`Toolkit: ${label}, the tools this session declares.`];
+  if (summary.fallback) parts.push(`${summary.fallback}: every tool is declared (full) until it resolves.`);
+  if (Array.isArray(summary.left_out)) {
+    parts.push(summary.left_out.length ? `Not loaded: ${summary.left_out.join(", ")}.` : "Nothing left out.");
+  }
+  parts.push("/toolkit lists them; /toolkit NAME, add TOOL or remove TOOL changes them from the next turn.");
+  return { text: `tools ${label}${summary.fallback ? " ?" : ""}`, title: parts.join(" ") };
+}
+
+// The session bar's chip (a lit-html template; info_bar.js), nothing on
+// full.
+export function chipTemplate(summary) {
+  const chip = chipModel(summary);
+  if (!chip) return nothing;
+  return html`<span class="model tools-chip" title=${chip.title}>${chip.text}</span>`;
+}

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

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

@@ -7,7 +7,8 @@
 // Rules:
 // - turn_started opens the first gen (no iteration yet).
 // - generation_started(n) opens a new gen unless the current one is still
-//   empty (then it takes n).
+//   empty (then it takes n); either way the gen's startedAt is the page's
+//   clock at it (null for a replay).
 // - a chunk goes to the gen of its iteration (opening one when none has it);
 //   a chunk with no iteration goes to the current gen, unless that one is
 //   textDone or already has tool rows (an older server's replay), which
@@ -45,7 +46,7 @@ function isEmpty(gen) {
 
 function openGen(turn, iteration) {
   const closed = closeCurrent(turn);
-  const gen = { iteration: iteration ?? null, thinking: "", text: "", activity: newActivity(), textDone: false, closed: false, notices: [] };
+  const gen = { iteration: iteration ?? null, thinking: "", text: "", activity: newActivity(), textDone: false, closed: false, notices: [], startedAt: null, thinkingAt: null };
   gen.tools = gen.activity.rows;
   turn.gens.push(gen);
   return { gen, opened: true, closed };
@@ -81,16 +82,21 @@ export function turnStarted(turn) {
   return openGen(turn, null);
 }
 
-export function generationStarted(turn, iteration = null) {
+// +now+ (ms): when the page saw the generation start, its startedAt (the
+// composer's delivery line clocks the step from it); null for a replayed
+// start (a join: the snapshot's generation age stands in).
+export function generationStarted(turn, iteration = null, now = null) {
   const current = currentGen(turn);
-  if (current && isEmpty(current)) {
-    current.iteration = iteration ?? current.iteration;
-    return { gen: current, opened: false, closed: null };
-  }
-  return openGen(turn, iteration);
+  const r = current && isEmpty(current) ? { gen: current, opened: false, closed: null } : openGen(turn, iteration);
+  if (!r.opened) r.gen.iteration = iteration ?? r.gen.iteration;
+  r.gen.startedAt = now;
+  return r;
 }
 
-export function chunk(turn, { text = "", thinking = "", iteration = null } = {}) {
+// +now+ (ms): when the page got the chunk (null for a replay): a gen's
+// first thinking delta stamps its thinkingAt, the clock the worker's cut
+// counts from too (GenerationPhase).
+export function chunk(turn, { text = "", thinking = "", iteration = null, now = null } = {}) {
   let r;
   if (iteration == null) {
     const current = currentGen(turn);
@@ -102,6 +108,7 @@ export function chunk(turn, { text = "", thinking = "", iteration = null } = {})
   // Leading whitespace (the "\n" after <think>, or after a closed
   // think/tool_call block) would render as an empty first line; trim it at
   // the start of a gen's thinking and text only.
+  if (thinking && !gen.thinking && now != null) gen.thinkingAt = now;
   if (thinking) gen.thinking += leadTrimmed(gen.thinking, thinking);
   if (text) gen.text += leadTrimmed(gen.text, text);
   return r;

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

@@ -700,14 +700,16 @@ export function createTurnView({
         draw(entry);
       }
     },
-    generationStarted(data) {
+    // +now+: the page's clock at a live start (stream_handlers.js), null
+    // for a replayed one.
+    generationStarted(data, now = null) {
       if (!turn) this.turnStarted({});
-      apply(model.generationStarted(turn, data.iteration ?? null));
+      apply(model.generationStarted(turn, data.iteration ?? null, now));
     },
-    chunk({ text, thinking, iteration }) {
+    chunk({ text, thinking, iteration, now = null }) {
       if (!text && !thinking) return;
       if (!turn) this.turnStarted({});
-      const r = model.chunk(turn, { text, thinking, iteration });
+      const r = model.chunk(turn, { text, thinking, iteration, now });
       apply(r);
       scheduleFlush(r.gen);
     },

data/lib/samagotchi/worker.rb

@@ -878,6 +878,8 @@ module Samagotchi
       # /reasoning-history or /model: the level the next turn runs under
       # (the web's chip); nil on a native host, which ignores it.
       event[:reasoning_history] = @engine.reasoning_history_explained&.summary if changed.intersect?(%i[reasoning_history model])
+      # /toolkit: what the next turn declares (the web's chip; nil on full).
+      event[:toolkit] = @engine.toolkit_summary if changed.include?(:toolkit)
       event[:confirm] = confirm.to_h if confirm
       event[:output_truncated] = true if text.length > COMMAND_OUTPUT_LIMIT
       @engine.announce(event)