samagotchi 0.75.0 → 0.77.0

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

@@ -60,9 +60,10 @@ export function routeSessionLine(prompt, { commands = [], images = 0, delivery =
 //   followWokenWorker()  the command woke the worker: follow its stream
 //   refreshHistory()
 //   failed(line, text)   a failed command's bubble
-//   failedElsewhere(line, text)   a command to a session no longer open failed
+//   failedElsewhere(line, text, id)   a command to session id, no longer open, failed
 //   ownedByTui()         a plain terminal holds the session
-//   composer: {busy(), clear(), done()}   the composer's send button and text
+//   composer: {busy(), text(), clear(), done()}   the composer's send button
+//                        and text (text(): what it holds now)
 export function createComposerCommands(deps) {
   const { session, clientId, sendCommand, followWokenWorker, refreshHistory, failed, failedElsewhere, ownedByTui,
           composer } = deps;
@@ -72,14 +73,17 @@ export function createComposerCommands(deps) {
   // worker, owner and history are left alone then.
   async function send(line) {
     const id = session();
+    // The composer is shared: a draft typed in a session opened meanwhile
+    // stays when the answer comes; only the text sent goes.
+    const sent = composer.text();
     composer.busy();
     try {
       await sendCommand(id, line, { clientId });
-      composer.clear();
+      if (composer.text() === sent) composer.clear();
       refreshHistory();
       if (session() === id) followWokenWorker();
     } catch (e) {
-      if (session() !== id) return failedElsewhere(line, e.message);
+      if (session() !== id) return failedElsewhere(line, e.message, id);
       if (e.code === "owned_by_tui") {
         ownedByTui();
         return;
@@ -103,7 +107,7 @@ export function createComposerCommands(deps) {
       return true;
     } catch (e) {
       if (session() === id) failed(line, e.message);
-      else failedElsewhere(line, e.message);
+      else failedElsewhere(line, e.message, id);
       return false;
     }
   }

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

@@ -133,14 +133,23 @@ export function ctxBarText(pct, windowSource = null) {
 }
 
 // The info bar's / the card's ctx tooltip: the window line under the title
-// when there's a number (tokensTipText), or why there's none — "No request
-// in this session yet" — when the page has no percent (before any request;
-// the page isn't told context.status is off, and the window always resolves,
-// so "?" never means 0).
-export function ctxBarTip(tokens, memoryIndex, window) {
-  if (num(window?.pct) === null) return "No request in this session yet";
+// when there's a number (tokensTipText), or why there's none when the page
+// has no percent: "No request in this session yet" before any request (the
+// page isn't told context.status is off, so "?" never means 0); after one,
+// "Context window unknown" over the session's tokens and per-model rows with
+// no window line (a window lookup that failed; a model list without a context
+// length still falls back to context.window_tokens or chi's default). +window.afterSwitch+ (the info
+// bar's; a /model whose new window didn't resolve, no request since:
+// Engine#announce_switched_context! sent usage null) adds "until the next
+// request", which asks for it again.
+export function ctxBarTip(tokens, memoryIndex, window, segments = null) {
+  if (num(window?.pct) === null) {
+    if (!num(tokens?.prompt_sum) && !num(tokens?.completion_sum)) return "No request in this session yet";
+    const why = window?.afterSwitch ? "Context window unknown until the next request" : "Context window unknown";
+    return tokensTipText(tokens, why, memoryIndex, null, segments);
+  }
 
-  return tokensTipText(tokens, undefined, memoryIndex, window);
+  return tokensTipText(tokens, undefined, memoryIndex, window, segments);
 }
 
 // The ctx tooltip's window line ({tokens:, source:, pct:, budget:} the
@@ -166,14 +175,78 @@ export function ctxWindowText(window) {
   return `context: ${used}${countK(tokens)} tokens${sourceText}`;
 }
 
+// ── A session's rows per model (the timing's modelSegments) ──────────────
+// The words /stats' models: block shares (Formatting#model_segment_*;
+// spec/shared/labels_matrix.json model_segments).
+
+// A row's model: its ref; the rows folded past the cap ("3 earlier
+// segments", told by folded_segments); a session's turns from before turns
+// named their model ("earlier turns").
+export function modelSegmentLabel(row) {
+  const folded = num(row?.folded_segments);
+  if (folded !== null && folded > 0) return `${folded} earlier segments`;
+  return row?.model_ref ? String(row.model_ref) : "earlier turns";
+}
+
+// "6.0k in / 40 out".
+export function modelSegmentTokensText(row) {
+  return `${countK(num(row?.prompt_sum) || 0)} in / ${countK(num(row?.completion_sum) || 0)} out`;
+}
+
+// "$0.42", "~$0.12", "$0.42 + ~$0.12"; "" for none.
+export function modelSegmentCostText(row) {
+  return [costText(row?.cost_sum), costText(row?.cost_estimate_sum, { estimate: true })].filter(Boolean).join(" + ");
+}
+
+// "switch prefill 3.0k uncached prompt ≈$0.0060": what the switch to the
+// row's model prefilled (its cost an estimate from the configured price,
+// left out without one); "" for none.
+export function modelSegmentPrefillText(row) {
+  const tokens = num(row?.prefill_tokens) || 0;
+  if (tokens <= 0) return "";
+  const cost = costText(row?.prefill_cost_estimate);
+  return `switch prefill ${countK(tokens)} uncached prompt${cost ? ` ≈${cost}` : ""}`;
+}
+
+// A ref past +max+ characters with its middle cut to one "…":
+// the tooltip is a native title, which grows as wide as its longest line.
+// The host's start and the model's end stay; the model chip has the full ref.
+const TIP_REF_MAX = 40;
+export function shortRef(text, max = TIP_REF_MAX) {
+  const chars = [...text];
+  if (chars.length <= max) return text;
+  const head = Math.floor((max - 1) / 3);
+  return `${chars.slice(0, head).join("")}…${chars.slice(chars.length - (max - 1 - head)).join("")}`;
+}
+
+// The tooltip's rows per model, with ≥ 2 (one model: none): "model ·
+// turns · in / out · cost", a switch's prefill under its row.
+function modelSegmentLines(segments) {
+  if (!Array.isArray(segments) || segments.length < 2) return [];
+  const lines = ["per model:"];
+  for (const row of segments) {
+    const turns = num(row.turns) || 0;
+    const parts = [shortRef(modelSegmentLabel(row)), `${turns} ${turns === 1 ? "turn" : "turns"}`, modelSegmentTokensText(row)];
+    const cost = modelSegmentCostText(row);
+    if (cost) parts.push(cost);
+    lines.push(`  ${parts.join(" · ")}`);
+    const prefill = modelSegmentPrefillText(row);
+    if (prefill) lines.push(`    └ ${prefill}`);
+  }
+  return lines;
+}
+
 // The ctx tooltip (info bar and card): +title+, then the session's tokens
 // (in summed over every request, cached with its share, out with the
 // reasoning part) and its cost, when it has any (an estimated part with
 // "~", costLine), and the memory indexes
 // its prompt holds (+memoryIndex+, the snapshot's memory_index); with
-// +window+ (ctxWindowText's) the window line under the title. A
-// delegated session keeps its own metrics, so these are this session's only.
-export function tokensTipText(tokens, title = "Context used after the last turn", memoryIndex = null, window = null) {
+// +window+ (ctxWindowText's) the window line under the title; with
+// +segments+ (the timing's modelSegments, ≥ 2) the rows per model above the
+// totals. A delegated session keeps its own metrics, so these are this
+// session's only.
+export function tokensTipText(tokens, title = "Context used after the last turn", memoryIndex = null, window = null,
+                              segments = null) {
   const memory = memoryIndexText(memoryIndex);
   const memoryLine = memory ? `\nmemory index: ${memory}` : "";
   const windowText = ctxWindowText(window);
@@ -186,7 +259,7 @@ export function tokensTipText(tokens, title = "Context used after the last turn"
   const parts = [`in ${count(prompt)}`];
   if (cached > 0 && prompt > 0) parts.push(`cached ${count(cached)} (${Math.round((cached * 100) / prompt)}%)`);
   parts.push(`out ${count(completion)}${reasoning > 0 ? ` (reasoning ${count(reasoning)})` : ""}`);
-  const lines = [title, `tokens: ${parts.join(" · ")}`];
+  const lines = [title, ...modelSegmentLines(segments), `tokens: ${parts.join(" · ")}`];
   const cost = costLine(tokens);
   if (cost) lines.push(cost);
   lines.push("this session only, all requests");

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

@@ -326,22 +326,35 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .bubble.question>summary .question-said{max-width:72ch;margin:2px 0 1px 1.05em;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--text-muted);white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
 .bubble.question[open]>summary .question-said{display:none}
 .question-said-full{margin:4px 0 6px;font-size:13px;line-height:1.55;color:var(--text-muted);white-space:pre-wrap;overflow-wrap:anywhere}
-/* Its markdown once the card is first opened (question_cards.js renderSaidOnOpen), as compact as the stage's. */
-.question-said-full.markdown{white-space:normal}
-.question-said-full.markdown :is(h1,h2,h3,h4,h5,h6){font-size:13.5px;font-weight:600;line-height:1.4;margin:8px 0 2px;color:var(--text-2)}
-.question-said-full.markdown :is(p,ul,ol,blockquote,table,pre){margin:0 0 6px}
-.question-said-full.markdown>:first-child{margin-top:0}
-.question-said-full.markdown>:last-child{margin-bottom:0}
-.question-said-full.markdown :is(ul,ol){padding-left:1.3em}
-.question-said-full.markdown li>:is(ul,ol){margin:0}
-.question-said-full.markdown hr{border:0;border-top:1px solid var(--border);margin:8px 0}
-.question-said-full.markdown blockquote{border-left:3px solid var(--border-strong);padding-left:10px}
-.question-said-full.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
-.question-said-full.markdown :not(pre)>code{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:0 4px}
-.question-said-full.markdown pre{overflow:auto;padding:6px 8px;border-radius:6px;background:var(--bg-inset);border:1px solid var(--border);font-size:12px;line-height:1.45;white-space:pre}
-.question-said-full.markdown table{border-collapse:collapse;display:block;max-width:100%;overflow:auto}
-.question-said-full.markdown :is(th,td){border:1px solid var(--border-strong);padding:3px 7px;font-size:12.5px}
-.question-said-full.markdown th{background:var(--bg-inset);font-weight:600}
+.question-said-full.md-compact{
+  --md-heading-size:13.5px;--md-heading-color:var(--text-2);
+  --md-subheading-size:13.5px;--md-subheading-color:var(--text-2);
+  --md-strong-color:currentColor;--md-blockquote-color:currentColor;--md-code-color:currentColor;
+  --md-pre-size:12px;--md-cell-size:12.5px
+}
+.ts-asking.md-compact{
+  --md-heading-size:14.5px;--md-heading-color:var(--text-bright);
+  --md-subheading-size:14px;--md-subheading-color:var(--text-2);
+  --md-strong-color:var(--text-bright);--md-blockquote-color:var(--text-muted);--md-code-color:var(--text);
+  --md-pre-size:12.5px;--md-cell-size:13px
+}
+.md-compact:is(.ts-asking,.question-said-full){white-space:normal}
+.md-compact :is(h1,h2,h3,h4,h5,h6){font-size:var(--md-heading-size);font-weight:600;line-height:1.4;margin:8px 0 2px;color:var(--md-heading-color)}
+.md-compact :is(h4,h5,h6){font-size:var(--md-subheading-size);color:var(--md-subheading-color)}
+.md-compact :is(p,ul,ol,blockquote,table,pre){margin:0 0 6px}
+.md-compact>:first-child{margin-top:0}
+.md-compact>:last-child{margin-bottom:0}
+.md-compact :is(ul,ol){padding-left:1.3em}
+.md-compact li>:is(ul,ol){margin:0}
+.md-compact hr{border:0;border-top:1px solid var(--border);margin:8px 0}
+.md-compact blockquote{border-left:3px solid var(--border-strong);padding-left:10px;color:var(--md-blockquote-color)}
+.md-compact code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
+.md-compact :not(pre)>code{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:0 4px;color:var(--md-code-color)}
+.md-compact strong{color:var(--md-strong-color)}
+.md-compact pre{overflow:auto;padding:6px 8px;border-radius:6px;background:var(--bg-inset);border:1px solid var(--border);font-size:var(--md-pre-size);line-height:1.45;white-space:pre}
+.md-compact table{border-collapse:collapse;display:block;max-width:100%;overflow:auto}
+.md-compact :is(th,td){border:1px solid var(--border-strong);padding:3px 7px;font-size:var(--md-cell-size)}
+.md-compact th{background:var(--bg-inset);font-weight:600}
 .bubble.command{border-left:3px solid var(--text-faint);background:var(--bg-panel);font-size:13px}
 .bubble.note{border-left:3px dotted var(--text-faint);background:transparent;font-size:12px;color:var(--text-muted);opacity:.85}
 .note-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-faint);margin-bottom:2px}
@@ -730,24 +743,6 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
    text, then its markdown when web.markdown is on (.markdown, stage_slots.js drawAsking); capped so the card keeps
    its room, read from the top. */
 .ts-asking{max-height:calc(var(--stage-max,60vh) * .35);overflow:auto;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--narr);border-left:2px solid var(--border-strong);padding-left:10px}
-/* Its markdown, compact: about the raw text's metrics, so the swap barely moves the slot. */
-.ts-asking.markdown{white-space:normal}
-.ts-asking.markdown :is(h1,h2,h3,h4,h5,h6){font-size:14.5px;font-weight:600;line-height:1.4;margin:8px 0 2px;color:var(--text-bright)}
-.ts-asking.markdown :is(h4,h5,h6){font-size:14px;color:var(--text-2)}
-.ts-asking.markdown :is(p,ul,ol,blockquote,table,pre){margin:0 0 6px}
-.ts-asking.markdown>:first-child{margin-top:0}
-.ts-asking.markdown>:last-child{margin-bottom:0}
-.ts-asking.markdown :is(ul,ol){padding-left:1.3em}
-.ts-asking.markdown li>:is(ul,ol){margin:0}
-.ts-asking.markdown strong{color:var(--text-bright)}
-.ts-asking.markdown hr{border:0;border-top:1px solid var(--border);margin:8px 0}
-.ts-asking.markdown blockquote{border-left:3px solid var(--border-strong);padding-left:10px;color:var(--text-muted)}
-.ts-asking.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
-.ts-asking.markdown :not(pre)>code{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:0 4px;color:var(--text)}
-.ts-asking.markdown pre{overflow:auto;padding:6px 8px;border-radius:6px;background:var(--bg-inset);border:1px solid var(--border);font-size:12.5px;line-height:1.45;white-space:pre}
-.ts-asking.markdown table{border-collapse:collapse;display:block;max-width:100%;overflow:auto}
-.ts-asking.markdown :is(th,td){border:1px solid var(--border-strong);padding:3px 7px;font-size:13px}
-.ts-asking.markdown th{background:var(--bg-inset);font-weight:600}
 .turn-stage.asking .ts-headline{display:none}
 @keyframes ts-fade{from{opacity:.35}}
 .ts-now{height:var(--ts-now-h);display:flex;align-items:center;gap:8px;min-width:0;padding:0 9px;border-radius:8px;background:var(--accent-tint);font-size:13px}
@@ -1031,7 +1026,7 @@ body.no-glass :is(#familyPop,#chainPop){background:var(--bg-panel);-webkit-backd
 .chain-chip .cc-arrow{display:inline-block;margin-right:4px}
 .chain-chip .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:3px;vertical-align:1px}
 .chain-chip .cc-waiting{font-family:system-ui,sans-serif;font-weight:600}
-.chain-row .cr-day{font-family:ui-monospace,monospace;font-size:11px;color:var(--accent);white-space:nowrap}
+.chain-row .cr-n{font-family:ui-monospace,monospace;font-size:11px;color:var(--accent);white-space:nowrap}
 .chain-row .cr-date{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
 /* A row with its time (chainStamp): every row's date as wide, so the previews line up. */
 .chain-rows:has(.cr-date.timed) .cr-date{min-width:16ch}
@@ -1126,8 +1121,9 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.archived:hover{opacity:.85}
 .card .archived-badge,.family-row .archived-badge{font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--border-strong);color:var(--text-muted)}
 /* bottom: above the session's composer card when one shows (--toast-bottom, app.js placeToast). */
-#toast{position:fixed;left:50%;bottom:var(--toast-bottom,24px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:50;display:flex;gap:12px;align-items:center;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--toast-shadow);font-size:13px}
+#toast{position:fixed;left:50%;bottom:var(--toast-bottom,24px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px}
 #toast[hidden]{display:none}
+#toast .toast-item{display:flex;gap:12px;align-items:center;width:max-content;max-width:100%;box-sizing:border-box;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--toast-shadow);font-size:13px}
 #toast .toast-action{background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:2px 4px}
 #toast .toast-close{background:transparent;border:0;color:var(--text-muted);cursor:pointer;padding:2px 4px;margin-left:-6px}
 #toast .toast-close:hover{color:var(--text)}

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

@@ -67,7 +67,8 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
   const tokens = state.timing.tokens;
   const ctxTip = ctxBarTip(tokens, state.timing.memoryIndex,
                            { tokens: state.ctxWindow, source: state.ctxWindowSource, pct: state.ctxPct,
-                             budget: state.llmContext?.budget_tokens });
+                             budget: state.llmContext?.budget_tokens, afterSwitch: state.ctxUnknownAfterSwitch },
+                           state.timing.modelSegments);
   const speedTextNow = lastSpeedText(tokens);
   const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);
   const sessionDuration = sessionDurationNow(state.timing, running);

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

@@ -0,0 +1,53 @@
+// Where the page's rendered markdown and its refs go (moved out of app.js):
+// a text as its markdown HTML, the `path:line` refs in one rendered text,
+// a final answer's rendering and refs, and the refs across the page. The
+// page's state comes in as getters (capabilities, roots, currentDir), read
+// at each call.
+export function createMarkdownPlace({
+  capabilities, renderText, roots, touchedFiles, currentDir, linkRefs, applyFinalAnswer, findInTurnRoots, normalize,
+  pairAnswerRefs,
+}) {
+  // A text the page already shows as its markdown HTML (POST /api/render,
+  // sanitised there), or null: markdown off here (no request), or a failed
+  // read (the raw text stays).
+  function renderMarkdown(text) {
+    if (capabilities().display !== true) return Promise.resolve(null);
+    return renderText(text)
+      .then((d) => (typeof d?.html === "string" && d.html ? d.html : null))
+      .catch(() => null);
+  }
+
+  // The `path:line` refs in one rendered text (the stage's asking slot, a
+  // kept reply), as linkTextRefs links the answers'.
+  function linkRefsIn(el) {
+    linkRefs(el, touchedFiles(roots()), currentDir());
+  }
+
+  // The turn's answer as its rendered markdown and with its plugin refs,
+  // once it is final (the turn-end read, an answer_display re-read:
+  // answer_refs.js applyFinalAnswer); then the refs.
+  function applyFinalMarkdown(messages) {
+    applyFinalAnswer(messages, findInTurnRoots(".bubble.output"), normalize);
+    linkTextRefs();
+  }
+
+  // The refs on the answers' and closed steps' texts, on this page: first
+  // each answer's own (a plugin's, answer_refs.js), then the `path:line`
+  // refs that name a file the session's rows (and cards) touched
+  // (ref_scan.js), which leave a plugin's alone. Not mid-stream: at a
+  // turn's end and after a reload's render. A ref already made stays as it
+  // is.
+  function linkTextRefs() {
+    const pageRoots = roots();
+    const touched = touchedFiles(pageRoots);
+    for (const root of pageRoots) {
+      for (const el of root.querySelectorAll(".bubble.output")) pairAnswerRefs(el);
+    }
+    if (!touched.size) return;
+    for (const root of pageRoots) {
+      for (const el of root.querySelectorAll(".bubble.output, .gen:not(.live) > .gen-text")) linkRefs(el, touched, currentDir());
+    }
+  }
+
+  return { renderMarkdown, linkRefsIn, applyFinalMarkdown, linkTextRefs };
+}

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

@@ -450,7 +450,7 @@ export function createQuestionCards({
           state = "done";
           // Sanitised on the server (POST /api/render).
           full.innerHTML = html;
-          full.classList.add("markdown");
+          full.classList.add("markdown", "md-compact");
           linkRefs(full);
         });
     };

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

@@ -31,6 +31,9 @@ export function emptySessionState() {
     ctxWindow: null,
     // Where it came from ("server", "config", … "default": chi's guess).
     ctxWindowSource: null,
+    // A /model's new window didn't resolve and no request has started since
+    // (stream_handlers.js context_status): the ctx tooltip says it waits.
+    ctxUnknownAfterSwitch: false,
     status: "",
     model: "",
     // What the worker's server said it served for a model name: [served, asked].

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

@@ -58,7 +58,7 @@ export function createStageSlots({
     asking.hidden = !text;
     if (shown.asking === text) return;
     shown.asking = text;
-    asking.classList.remove("markdown");
+    asking.classList.remove("markdown", "md-compact");
     asking.textContent = text;
     asking.scrollTop = 0;
     if (!text) return;
@@ -76,7 +76,7 @@ export function createStageSlots({
       if (!html || shown.asking !== text || asking.classList.contains("markdown")) return;
       // Sanitised on the server (POST /api/render), as an answer's HTML is.
       asking.innerHTML = html;
-      asking.classList.add("markdown");
+      asking.classList.add("markdown", "md-compact");
       asking.scrollTop = 0;
       linkRefs(asking);
     });
@@ -154,7 +154,7 @@ export function createStageSlots({
   function reset() {
     for (const slot of [headline, asking, now, trail, ticks]) slot.replaceChildren();
     asking.hidden = true;
-    asking.classList.remove("markdown");
+    asking.classList.remove("markdown", "md-compact");
     shown.headline = shown.now = shown.trail = shown.asking = null;
   }
 

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

@@ -73,11 +73,18 @@ export function createStreamHandlers(deps) {
       }
     },
     generation_started: (data) => {
+      // The request after a /model's unresolved window started: whatever it
+      // brings, the ctx tooltip no longer waits for it (ctxBarTip).
+      const current = state();
+      let contextChanged = current.ctxUnknownAfterSwitch !== false;
+      current.ctxUnknownAfterSwitch = false;
       if (data?.context_window_tokens) {
-        const current = state();
+        const source = data.context_window_source || null;
+        contextChanged ||= current.ctxWindow !== data.context_window_tokens || current.ctxWindowSource !== source;
         current.ctxWindow = data.context_window_tokens;
-        current.ctxWindowSource = data.context_window_source || null;
+        current.ctxWindowSource = source;
       }
+      if (contextChanged) updateInfoBar();
       liveTurn.timing.setNote("");
       // 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,
@@ -91,6 +98,10 @@ export function createStreamHandlers(deps) {
       if (data?.served_model) current.served = [data.served_model, data.requested_model, data.served_expected_by || null];
       // The generation's speed and the session's token totals, from the server.
       current.timing.tokens = generationTokens(current.timing.tokens, data);
+      // The rows per model, the server's whole list (the open one with this
+      // generation in); an event without them (a replay, an older worker)
+      // keeps the page's.
+      if (Array.isArray(data?.model_segments)) current.timing.modelSegments = data.model_segments;
       if (data?.served_model || data?.tokens) updateInfoBar();
       turnDom.generationCompleted();
     },
@@ -185,6 +196,7 @@ export function createStreamHandlers(deps) {
     // then show the prompt once more, marked failed (with why). This tab's own
     // prompt goes back into an empty composer.
     prompt_restored: async (data) => {
+      const id = selected();
       keepEarlyRestore(data, earlyRestores, { myId: clientId, sentIds });
       const { refill, label, images: restoredImages } = restoreAction(data, { myId: clientId, sentIds, composerEmpty: composer.empty() });
       if (refill) composer.refill(refill);
@@ -192,6 +204,9 @@ export function createStreamHandlers(deps) {
       const failedText = liveTurn.failedText;
       liveTurn.failedText = null;
       await resync();
+      // Another session was opened during the re-read: its history isn't
+      // this one's (the re-read drew nothing either).
+      if (selected() !== id) return;
       // The re-render drew it from the session (failed_turn): drawn again
       // below with this event's label and images.
       const drawn = historyEl.querySelector(".bubble.user[data-failed-turn]");
@@ -207,6 +222,7 @@ export function createStreamHandlers(deps) {
     // A session command ran in the worker (any client's). One that changed
     // the conversation (!rollback, !cmd, a continue answered no) re-reads it.
     command_ran: async (data) => {
+      const id = selected();
       const view = commandView(data, clientId);
       if (view.modelName && view.modelName !== state().model) {
         state().model = view.modelName;
@@ -240,7 +256,11 @@ export function createStreamHandlers(deps) {
         state().toolkit = data.toolkit || null;
         updateInfoBar();
       }
-      if (view.resync) await resync();
+      if (view.resync) {
+        await resync();
+        // Another session was opened during the re-read: the bubble isn't its.
+        if (selected() !== id) return;
+      }
       // A card's action that isn't anytime (the step-limit question's
       // /continue) has no bubble: nothing to remove. An anytime or queued
       // one's bubble was drawn at its command_queued: filled in here. One
@@ -286,6 +306,21 @@ export function createStreamHandlers(deps) {
     },
     context_status: (data) => {
       const current = state();
+      // After /model (Engine#announce_switched_context!): the new model's
+      // window, and usage null when it didn't resolve (the % clears, "ctx ?").
+      // Only that event carries the key: a null drops the old model's window,
+      // so the chunks before the next window count no % against it.
+      if (data && "context_window_tokens" in data) {
+        current.ctxWindow = data.context_window_tokens || null;
+        current.ctxWindowSource = data.context_window_tokens ? data.context_window_source || null : null;
+        // The ctx tooltip's "until the next request" (ctxBarTip).
+        current.ctxUnknownAfterSwitch = !data.context_window_tokens;
+      }
+      if (data && "usage" in data && data.usage === null) {
+        current.ctxPct = null;
+        updateInfoBar();
+        return;
+      }
       const pct = extractCtxPct(data, current.ctxWindow, current.llmContext?.budget_tokens);
       if (pct !== null) {
         current.ctxPct = pct;

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

@@ -81,6 +81,10 @@ export function normalizeTiming(data = {}) {
     // The memory indexes the session's prompt holds (SessionMetrics'
     // memory_index), for the ctx tooltip.
     memoryIndex: validRecord(data.memory_index) ? data.memory_index : null,
+    // The session's tokens, cost and speeds per model after a /model
+    // (SessionMetrics' model_segments; [] with one model), for the ctx
+    // tooltip.
+    modelSegments: Array.isArray(data.model_segments) ? data.model_segments.filter(validRecord) : [],
   };
 }
 
@@ -91,7 +95,7 @@ export function normalizeTiming(data = {}) {
 // dates keep arrival order), an unknown tool record at the end (they come
 // grouped by turn, in call order). startedAt, sessionDurationMs and
 // activeTurn are the reply's, and so are its tokens (a reply without them
-// keeps the page's). `short`: the reply's turn_count says the page
+// keeps the page's) and its model_segments (present: authoritative). `short`: the reply's turn_count says the page
 // misses a turn (it then reads the whole timing). A reply without
 // turn_count (an older server: the whole timing) replaces, as before; more
 // records than the count (a worker died before saving a turn the page saw)
@@ -117,7 +121,12 @@ export function mergeTiming(timing, data = {}) {
   });
   const tokens = fresh.tokens || timing?.tokens || null;
   const memoryIndex = fresh.memoryIndex || timing?.memoryIndex || null;
-  return { timing: { ...fresh, turnRecords, toolRecords, tokens, memoryIndex }, short: turnRecords.length < count };
+  // A reply that has the rows is the answer, an empty list too (one model
+  // now): a stale list never survives it; one without them (an older
+  // server) keeps the page's.
+  const modelSegments = data && "model_segments" in data ? fresh.modelSegments : (timing?.modelSegments || []);
+  return { timing: { ...fresh, turnRecords, toolRecords, tokens, memoryIndex, modelSegments },
+           short: turnRecords.length < count };
 }
 
 function replaceById(records, record) {

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

@@ -0,0 +1,69 @@
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+// The page's toasts (app.js showToast): a stack in #toast, newest last, at
+// most MAX_TOASTS. Each item has its own 6 s timer, or none when sticky: a
+// sticky one stays until its action, its ✕ or a link in it is clicked, so a
+// later notice can't hide an error. +text+: words, or a template
+// (chains.js openChildrenTemplate: a link in it opens that session and hides
+// the toast). The same text again while it shows reuses its item, moved to
+// the end with a fresh timer. When a 4th comes, the oldest non-sticky goes
+// (the oldest of all if every one is sticky).
+const TOAST_MS = 6000;
+const MAX_TOASTS = 3;
+
+export function createToasts({ el, onChange = () => {}, doc = globalThis.document }) {
+  const entries = [];
+
+  function sync() {
+    el.hidden = entries.length === 0;
+    onChange();
+  }
+
+  function remove(entry, notify = true) {
+    const index = entries.indexOf(entry);
+    if (index < 0) return;
+    if (entry.timer !== null) clearTimeout(entry.timer);
+    entry.timer = null;
+    entries.splice(index, 1);
+    entry.el.remove();
+    if (notify) sync();
+  }
+
+  function draw(entry, text, action, sticky) {
+    render(html`<span class="toast-message" @click=${(e) => { if (e.target.closest?.("a[href]")) remove(entry); }}>${text}</span>${action
+      ? html`<button type="button" class="toast-action" @click=${() => { remove(entry); action.run(); }}>${action.label}</button>`
+      : nothing}${sticky ? html`<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss" @click=${() => remove(entry)}>✕</button>` : nothing}`,
+    entry.el);
+  }
+
+  function show(text, action = null, { sticky = false } = {}) {
+    const candidate = { el: doc.createElement("div"), timer: null, sticky, key: null };
+    candidate.el.className = "toast-item";
+    draw(candidate, text, action, sticky);
+    candidate.key = candidate.el.querySelector(".toast-message").textContent;
+
+    const duplicate = entries.find((entry) => entry.key === candidate.key);
+    if (duplicate) {
+      if (duplicate.timer !== null) clearTimeout(duplicate.timer);
+      duplicate.timer = null;
+      duplicate.sticky = sticky;
+      duplicate.key = candidate.key;
+      draw(duplicate, text, action, sticky);
+      entries.push(...entries.splice(entries.indexOf(duplicate), 1));
+      el.appendChild(duplicate.el);
+      if (!sticky) duplicate.timer = setTimeout(() => remove(duplicate), TOAST_MS);
+      sync();
+      return;
+    }
+
+    if (entries.length === MAX_TOASTS) {
+      remove(entries.find((entry) => !entry.sticky) || entries[0], false);
+    }
+    entries.push(candidate);
+    el.appendChild(candidate.el);
+    if (!sticky) candidate.timer = setTimeout(() => remove(candidate), TOAST_MS);
+    sync();
+  }
+
+  return { show };
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.75.0
+  version: 0.77.0
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -393,6 +393,7 @@ files:
 - lib/samagotchi/memory_bundle/trash.rb
 - lib/samagotchi/memory_bundle/uninstaller.rb
 - lib/samagotchi/memory_paths.rb
+- lib/samagotchi/message_parts.rb
 - lib/samagotchi/model_catalog.rb
 - lib/samagotchi/model_list_store.rb
 - lib/samagotchi/model_match.rb
@@ -412,6 +413,7 @@ files:
 - lib/samagotchi/paths.rb
 - lib/samagotchi/peer_sources.rb
 - lib/samagotchi/pending_input_queue.rb
+- lib/samagotchi/pending_question.rb
 - lib/samagotchi/plugin/api.rb
 - lib/samagotchi/plugin/attached_context.rb
 - lib/samagotchi/plugin/context.rb
@@ -461,6 +463,8 @@ files:
 - lib/samagotchi/session_inbox.rb
 - lib/samagotchi/session_manager.rb
 - lib/samagotchi/session_metrics.rb
+- lib/samagotchi/session_metrics/model_segment.rb
+- lib/samagotchi/session_metrics/totals.rb
 - lib/samagotchi/session_model_settings.rb
 - lib/samagotchi/session_observer.rb
 - lib/samagotchi/session_retention.rb
@@ -483,6 +487,7 @@ files:
 - lib/samagotchi/terminal_ui/input_support.rb
 - lib/samagotchi/terminal_ui/line_reader.rb
 - lib/samagotchi/terminal_ui/live_region.rb
+- lib/samagotchi/terminal_ui/model_segments_text.rb
 - lib/samagotchi/terminal_ui/one_shot_sink.rb
 - lib/samagotchi/terminal_ui/plain_surface.rb
 - lib/samagotchi/terminal_ui/question_prompt.rb
@@ -571,7 +576,6 @@ files:
 - lib/samagotchi/web/info_probe.rb
 - lib/samagotchi/web/lan.rb
 - lib/samagotchi/web/markdown_renderer.rb
-- lib/samagotchi/web/message_parts.rb
 - lib/samagotchi/web/public/activity.js
 - lib/samagotchi/web/public/annotate_actions.js
 - lib/samagotchi/web/public/annotate_bar.js
@@ -613,6 +617,7 @@ files:
 - lib/samagotchi/web/public/live_timing.js
 - lib/samagotchi/web/public/live_turn.js
 - lib/samagotchi/web/public/llm_context_chip.js
+- lib/samagotchi/web/public/markdown_place.js
 - lib/samagotchi/web/public/model_pick.js
 - lib/samagotchi/web/public/model_picker.js
 - lib/samagotchi/web/public/notice_links.js
@@ -649,6 +654,7 @@ files:
 - lib/samagotchi/web/public/thinking_ticker.js
 - lib/samagotchi/web/public/timing.js
 - lib/samagotchi/web/public/toast_place.js
+- lib/samagotchi/web/public/toasts.js
 - lib/samagotchi/web/public/toolkit_chip.js
 - lib/samagotchi/web/public/turn_events.js
 - lib/samagotchi/web/public/turn_html.js