samagotchi 0.50.0 → 0.52.0

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

@@ -45,8 +45,6 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 #topStrip:empty{display:grid}
 #center{flex:1;display:flex;flex-direction:column;min-height:45vh;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
 #stage{flex:1;display:flex;flex-direction:column;position:relative;min-height:160px;background:var(--bg);overflow:hidden}
-#firstPeek{display:none;padding:8px 12px;background:var(--accent-bg);color:var(--text);border-bottom:1px solid var(--border);font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-#firstPeek.visible{display:block}
 #composer #cancelBtn{order:2;background:var(--danger-bg)}
 #history{flex:1;overflow:auto;padding:16px max(16px,calc((100% - 960px)/2));display:flex;flex-direction:column;gap:12px;background:var(--bg);min-height:160px}
 /* No child shrinks to fit: a held (overflow:hidden) answer bubble would, clipped under the dock with nothing to scroll. */
@@ -158,6 +156,7 @@ button.task-stop{flex:none;margin-left:auto;padding:1px 8px;border:1px solid col
 button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:none}
 .ts-now button.task-stop{align-self:center}
 .activity-params{color:var(--text-muted);overflow-wrap:anywhere}
+.activity-alias{color:var(--text-faint);white-space:nowrap}
 .activity-duration{color:var(--text-faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
 .activity-output{margin:4px 0 2px var(--row-gutter);font-size:12px;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;background:var(--bg);border-radius:6px;padding:6px 8px;max-height:160px;overflow:auto}
 /* A row's status and tool name never wrap (a phone broke them letter by
@@ -503,8 +502,10 @@ body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 #composer .actions-col .llmctx-new:hover{filter:none;color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
 #composer .actions-col .llmctx-new.own{color:var(--accent);border-color:var(--accent-border)}
 #composer .actions-col .llmctx-new[hidden],body.has-session #composer .actions-col .llmctx-new{display:none}
+/* The new chat's thinking chip, after it: shorter text, so a smaller share of the row. */
+#composer .actions-col .think-new{max-width:min(25%,140px)}
 /* Phones: picker · chip · Start on one row (the key hint is gone there); names cut short rather than wrapping, the chip first. */
-@media(max-width:600px){#composer .actions-col:has(.llmctx-new:not([hidden])){flex-wrap:nowrap}#composer .actions-col .model-pick{flex:0 1 auto;min-width:0}#composer .actions-col .llmctx-new{max-width:45%;flex-shrink:4}}
+@media(max-width:600px){#composer .actions-col:has(.llmctx-new:not([hidden])){flex-wrap:nowrap}#composer .actions-col .model-pick{flex:0 1 auto;min-width:0}#composer .actions-col .llmctx-new{max-width:45%;flex-shrink:4}#composer .actions-col .think-new{max-width:30%}}
 /* The model search: opaque like #commandList (a list over the conversation
    must stay readable), above the composer, or below it (.down) when the
    start page leaves no room above, or over the composer (.over) when
@@ -681,8 +682,6 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .dir{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-muted);max-width:48ch;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
 /* The footer sits on the card's glass: its chips are tinted, not solid, so the glass reads through them. */
 #infoBar .meta .model{font-size:11px;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--bg-hover) 55%,transparent);color:var(--text-3)}
-/* The memory chip ("mem 2", when the session used some): phones only, where the "mem: …" line is hidden. */
-#infoBar .meta .mem-chip{display:none}
 #infoBar .meta .model.served-mismatch{background:var(--warn-bg);color:var(--warn-bright);border:1px solid var(--warn-border)}
 /* The open session's worker runs an older chi: its version, and Restart when it can. */
 #infoBar .meta .worker-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:2px 2px 2px 6px;border-radius:6px;background:var(--warn-bg);color:var(--warn-bright);border:1px solid var(--warn-border);white-space:nowrap}
@@ -690,9 +689,6 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .worker-restart{padding:1px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--warn-bright);border:1px solid var(--warn-border)}
 #infoBar .meta .worker-restart:hover:not(:disabled){background:var(--warn-border);color:var(--on-warn)}
 #infoBar .meta .worker-restart:disabled{opacity:.7;cursor:default}
-#infoBar .preview-line{font-size:13px;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;line-height:1.4;max-height:1.4em}
-#infoBar .preview-line .preview, #infoBar .preview-line .mem{word-break:break-word}
-#infoBar .mem{font-size:12px;color:var(--text-muted)}
 #infoBar button{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600}
 #infoBar #infoStopBtn{background:var(--bg-raised);color:var(--warn-text);border:1px solid var(--border-strong)}
 #infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}
@@ -700,10 +696,10 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
-/* The LLM context chip (llm_context_chip.js): a model-like chip that opens the strategy popover; accent when the session set its own. */
-#infoBar .meta .llmctx-chip{padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
-#infoBar .meta .llmctx-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
-#infoBar .meta .llmctx-chip.own{color:var(--accent);border-color:var(--accent-border)}
+/* The LLM context and thinking chips (llm_context_chip.js, thinking_chip.js): model-like chips that open their popovers; accent when the session set its own. */
+#infoBar .meta .llmctx-chip,#infoBar .meta .think-chip{padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
+#infoBar .meta .llmctx-chip:hover,#infoBar .meta .think-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .llmctx-chip.own,#infoBar .meta .think-chip.own{color:var(--accent);border-color:var(--accent-border)}
 .llmctx-form{display:flex;flex-direction:column;gap:8px;margin:0}
 .llmctx-form .ctx-pop-head strong{font-family:inherit}
 .llmctx-field{display:flex;align-items:center;gap:8px}
@@ -744,12 +740,11 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .ctx-pop-actions button:hover{color:var(--text-hover)}
 .ctx-pop-actions .ctx-pop-detach{color:var(--text-muted);background:transparent}
 .ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
-/* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable) and the first-message line, the strip card's title, goes. */
+/* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable). */
 @media(max-width:600px){
   /* The key hint: cut off at this width, and phones have no Shift+Enter. */
   #composeHint{display:none}
   #infoBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 10px 8px}
-  #infoBar .preview-line{display:none}
   /* No terminal on a phone to attach from. */
   #infoBar .meta .copy-attach{display:none}
   #infoBar .meta{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
@@ -757,8 +752,8 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
   #infoBar .meta>*{flex-shrink:0}
   #infoBar .meta .id{order:-2}
   #infoBar .meta .status{order:-1}
-  /* After the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
-  #infoBar .meta .mem-chip{display:inline;order:-1}
+  /* The memory chip right after the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
+  #infoBar .meta .mem-chip{order:-1}
   /* A parent's children chip too: its waiting part is what to see. */
   #infoBar .meta .children-chip{order:-1}
   /* A chain's ← → links too: the way to the other days. */
@@ -825,6 +820,14 @@ body.has-session #scope .scope-where{display:none}
 /* The ▾ glyph draws tiny at the pill's 11 px: at 20 px it is about as tall
    as the pill text's capitals (phone and desktop alike). */
 /* The bell (notifications): quiet at the top bar's right end; filled in the accent when on, struck through when the browser blocks it. */
+/* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip. */
+#sessionTitle{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+#sessionTitle[hidden]{display:none}
+/* A phone: the title is its own row under the bar, so "chi + · pill · bell" stay one line. */
+@media(max-width:600px){
+  #topBar{flex-wrap:wrap;row-gap:2px}
+  #sessionTitle{flex-basis:100%;order:10;font-size:12px}
+}
 #notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
 #notifyBtn[hidden]{display:none}
 #notifyBtn:hover{color:var(--text-2);border-color:var(--border)}
@@ -947,7 +950,8 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.archived{opacity:.6}
 .card.archived:hover{opacity:.85}
 .card .archived-badge,.family-row .archived-badge{font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--border-strong);color:var(--text-muted)}
-#toast{position:fixed;left:50%;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}
+/* 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[hidden]{display:none}
 #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}
@@ -1016,11 +1020,11 @@ a{color:var(--accent)}
     <div id="scope" hidden></div>
     <button type="button" class="strip-toggle" id="stripShow" title="Show the latest sessions"><span class="pill-arrow" aria-hidden="true">▾</span> sessions</button>
     <button type="button" class="strip-toggle" id="stripHideTop" title="Hide the latest sessions"><span class="pill-arrow" aria-hidden="true">▴</span> hide</button>
+    <span id="sessionTitle" hidden></span>
     <button type="button" id="notifyBtn" aria-label="Notifications" aria-pressed="false" hidden><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path class="bell" d="M8 1.75a4 4 0 0 0-4 4v2.6L2.75 10.6v.9h10.5v-.9L12 8.35v-2.6a4 4 0 0 0-4-4Z"/><path class="clapper" d="M6.5 13a1.5 1.5 0 0 0 3 0"/><path class="slash" d="M2.5 2.5l11 11"/></svg></button>
   </div>
   <section id="topStrip" aria-label="Latest sessions" class="loading"><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div></section>
   <section id="center">
-    <div id="firstPeek"></div>
     <div id="stage">
       <div id="markdownWarning" class="markdown-warning" hidden></div>
       <div id="history"></div>
@@ -1044,8 +1048,9 @@ a{color:var(--accent)}
         <div class="actions-col">
           <button type="button" id="modelPick" class="model-pick" title="The model the new chat starts on" aria-label="Model for the new chat" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
           <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" hidden></button>
+          <button type="button" id="thinkingNew" class="llmctx-new think-new" aria-haspopup="dialog" hidden></button>
           <div id="composeHint">Enter to start · Shift+Enter for a newline</div>
-          <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Cancel</button>
+          <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>
           <div class="split">
             <button id="actionBtn">Start</button>
           </div>
@@ -1056,7 +1061,7 @@ a{color:var(--accent)}
         <div id="contextChips" aria-label="Attached context" hidden></div>
         <button class="ghost" id="infoContinueBtn" title="Continue: start the next link of this session's chain from its recap (this one is archived)" style="display:none">continue →</button>
         <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
-        <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop</button>
+        <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>
         <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>
       </div>
     </div>

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

@@ -0,0 +1,52 @@
+// Command bubbles (/help, /model, /stats, /llm-context …) live only in the
+// page: the session saves just a `!cmd`'s output (a message, redrawn as its
+// command bubble). A resync (a `!cmd`, a `!rollback`, a dropped stream)
+// redraws the history from the server, so the page keeps its own command
+// bubbles across it: each one's anchor is the prompts and saved shell
+// commands before it, and it goes back after them in the redrawn history.
+// A reload still drops them.
+//
+// +kinds+: the history's children in order, each "user" (a prompt bubble),
+// "shell" (a `!cmd`'s bubble, which the redrawn history has too) or
+// anything else.
+
+// @return {{users: number, shells: number}} the anchor of kinds[index]
+export function commandAnchor(kinds, index) {
+  const before = kinds.slice(0, index);
+  return {
+    users: before.filter((k) => k === "user").length,
+    shells: before.filter((k) => k === "shell").length,
+  };
+}
+
+// The index to insert a kept bubble at: before the first prompt or shell
+// command past its anchor (it ran after its turn), else at the end (a
+// history a !rollback made shorter too).
+export function anchorInsertIndex(kinds, { users = 0, shells = 0 } = {}) {
+  let seenUsers = 0;
+  let seenShells = 0;
+  for (let i = 0; i < kinds.length; i += 1) {
+    if (kinds[i] === "user") {
+      if (seenUsers >= users) return i;
+      seenUsers += 1;
+    } else if (kinds[i] === "shell") {
+      if (seenShells >= shells) return i;
+      seenShells += 1;
+    }
+  }
+  return kinds.length;
+}
+
+const SHELL_LINE = /^!\s*\S/;
+const ROLLBACK_LINE = /^!rollback(\s|$)/;
+
+// Whether a command bubble's line is kept across a resync: a `!cmd`'s is
+// redrawn from its saved message (keeping it too would show it twice).
+export function isShellCommandLine(line) {
+  const text = String(line ?? "");
+  return SHELL_LINE.test(text) && !ROLLBACK_LINE.test(text);
+}
+
+export function keepsCommandBubble(line) {
+  return !isShellCommandLine(line);
+}

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

@@ -22,7 +22,8 @@ export const RECENT_KEY = "chi_model_recent";
 
 // The payload's models as rows: {name, host, id, isDefaultHost}, and
 // sampling (the configured request parameters as /model words them) when
-// the model has some, and llm_context (the LLM context it starts under,
+// the model has some, thinking (the level it starts at, Thinking::Explained#summary),
+// and llm_context (the LLM context it starts under,
 // LLMContextStrategy::Explained#summary) when the server sent one, and
 // configured when the host declares the id (hosts.<name>.models), and
 // unavailable when that host failed to list its models. The
@@ -42,6 +43,7 @@ export function modelRows(payload) {
       if (m.configured === true) row.configured = true;
       if (m.unavailable === true) row.unavailable = true;
       if (m.llm_context && typeof m.llm_context === "object") row.llm_context = m.llm_context;
+      if (m.thinking && typeof m.thinking === "object") row.thinking = m.thinking;
       return row;
     });
 }

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

@@ -0,0 +1,26 @@
+import { normalize } from "./format.js";
+
+// Where the open session's title shows: once on screen. Its strip card says
+// it when the strip is shown and has an `.active` card for it; otherwise
+// (strip hidden, an older session without a card, a delegate folded into its
+// parent's card) the top bar does. The All sessions view shows none.
+// Plain rules, no DOM; app.js wires them (updateSessionTitle).
+
+const TAB_TITLE_CHARS = 40;
+
+// The top bar's text, or "" when it shows no title.
+export function topBarTitle({ title, cardShown, stripHidden, allView }) {
+  const text = normalize(title);
+  if (!text || allView) return "";
+  if (cardShown && !stripHidden) return "";
+  return text;
+}
+
+// The browser tab: "<title, cut at 40> · <base>", the base alone without a
+// session title (base = "Chi · <project>" or "Chi").
+export function tabTitle({ title, base }) {
+  const text = normalize(title);
+  if (!text) return base;
+  const cut = text.length > TAB_TITLE_CHARS ? `${text.slice(0, TAB_TITLE_CHARS)}…` : text;
+  return `${cut} · ${base}`;
+}

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

@@ -18,13 +18,11 @@ export function stripColumns(width) {
 // And how many wait on the user (notify.js waitingOn: a question, an
 // approval, a card), so a hidden strip still says one needs an answer.
 // Plain text parts; live and waiting are "" when none. Zero sessions keep
-// the bare label.
-// @param cards how many cards the list makes (a parent's delegates fold
-//   into its card: one), the count's number; live and waiting count every
-//   session, a waiting delegate is still one thing waiting on the user
-export function stripShowParts(sessions, { cards = null } = {}) {
+// the bare label. The count is sessions (a folded delegate counts), the
+// number the "All sessions" tile shows.
+export function stripShowParts(sessions) {
   const list = sessions || [];
-  const n = cards ?? list.length;
+  const n = list.length;
   const liveN = list.filter((s) => s && s.owner === "worker").length;
   const waitingN = list.filter((s) => waitingOn(s)).length;
   return {

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

@@ -0,0 +1,169 @@
+// The session bar's thinking chip: the level the next turn runs at ("think
+// low"; "· session" when the session set its own), and a popover with a
+// level select that runs /thinking in the session's worker (the command's
+// reply shows in the conversation, like a typed one). The level and where
+// it came from are the session's thinking (Thinking::Explained#summary:
+// {level, source, own}; the worker's snapshot, a command_ran, or the
+// server's own reading of the session file).
+//
+// The start page has one too (kind "new chat"): it shows the picked
+// model's level (GET /api/models' thinking) and keeps a choice for the
+// next create only (POST /api/sessions' thinking), never remembered:
+// nothing is sent unless the user sets one.
+
+import { NEW_CHAT, SESSION, popoverPlace } from "./llm_context_chip.js";
+
+export const LEVELS = ["off", "low", "medium", "high"];
+const DEFAULT = "default";
+
+// The new chat's choice (a level, or null) laid over the model's summary:
+// what the chip shows. The model's own summary without a choice.
+export function withChoice(summary, choice) {
+  if (!summary || !choice) return summary;
+  return { ...summary, level: choice, source: SESSION, own: choice };
+}
+
+// The chip: its text, tooltip and whether the session (or the new chat)
+// set its own; null without a summary (an older worker). The default with
+// nothing set anywhere shows too ("think default"): the chip is where the
+// level is set.
+export function chipModel(summary, { kind = SESSION } = {}) {
+  if (!summary || !summary.level) return null;
+  const own = !!summary.own;
+  const what = kind === NEW_CHAT ? "the new chat" : "this session";
+  const from = own ? what : summary.source || "the model's own";
+  const title = `Thinking: ${summary.level} (${from}). Click to change it for ${what}.`;
+  return { text: `think ${summary.level}${own ? ` · ${kind}` : ""}`, title, own };
+}
+
+export function chipHtml(summary, escapeHtml) {
+  const chip = chipModel(summary);
+  if (!chip) return "";
+  return `<button type="button" class="model think-chip${chip.own ? " own" : ""}" title="${escapeHtml(chip.title)}" ` +
+    `data-think-chip aria-haspopup="dialog">${escapeHtml(chip.text)}</button>`;
+}
+
+// The /thinking line for a select value ("default" unsets the session's
+// own); null when it is what the form opened with.
+export function commandLine(level, initial = null) {
+  if (initial !== null && level === initial) return null;
+  return `/thinking ${level}`;
+}
+
+function option(value, label, chosen, escapeHtml) {
+  return `<option value="${escapeHtml(value)}"${value === chosen ? " selected" : ""}>${escapeHtml(label)}</option>`;
+}
+
+// "Now: low (session)", "Now: default (the model's own)".
+export function nowText(summary) {
+  return `Now: ${summary.level} (${summary.source || "the model's own"})`;
+}
+
+// The popover's form. For the new chat (kind NEW_CHAT), +summary+ is the
+// model's and +choice+ the level the form shows.
+export function formHtml(summary, escapeHtml, { running = false, kind = SESSION, choice = null } = {}) {
+  const fresh = kind === NEW_CHAT;
+  const chosen = (fresh ? choice : summary.own) || DEFAULT;
+  const follow = summary.own && !fresh ? "follow the model" : `follow the model (${summary.level})`;
+  const when = fresh ? "For the new chat's first turn on; not remembered for the next one."
+    : "From the next turn's start. On Gemma the whole prompt is read again; a hosted API may restart its cache.";
+  return `<form class="think-form llmctx-form"><div class="ctx-pop-head"><strong>Thinking</strong>` +
+    `<span class="ctx-pop-kind">${fresh ? NEW_CHAT : "this session"}</span>` +
+    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
+    `<div class="ctx-pop-meta think-now">${escapeHtml(nowText(summary))}</div>` +
+    `<label class="llmctx-field"><span>Level</span><select name="level">` +
+    option(DEFAULT, follow, chosen, escapeHtml) +
+    LEVELS.map((level) => option(level, level, chosen, escapeHtml)).join("") + `</select></label>` +
+    `<div class="ctx-pop-meta">${when}${running ? " A turn is running: it applies after this turn." : ""}</div>` +
+    `<div class="ctx-pop-actions"><button type="submit" class="llmctx-set">Set</button></div></form>`;
+}
+
+// The chip's popover, as createLlmContextControl's: el is where the chip
+// is drawn (clicks are delegated: #infoText is redrawn every tick);
+// summary(): the open session's thinking; session(): its id; running():
+// a turn runs; run(line): sends the command. The start page's (kind
+// NEW_CHAT): summary() is the picked model's, choice() the pending level
+// and choose(next) takes a Set's (null for "follow the model"). id and
+// anchor (the chip's selector) keep it apart from the llm ctx control on
+// the same element.
+export function createThinkingControl({ el, escapeHtml, summary, session = () => null, running = () => false, run,
+                                        kind = SESSION, choice = () => null, choose = null,
+                                        id = "thinkingPopover", anchor: anchorSel = "[data-think-chip]",
+                                        doc = document, win = window }) {
+  const fresh = kind === NEW_CHAT;
+  const pop = doc.createElement("div");
+  pop.id = id;
+  pop.className = "ctx-popover think-popover";
+  pop.setAttribute("role", "dialog");
+  pop.hidden = true;
+  doc.body.appendChild(pop);
+  let initial = null;
+  let openFor = null;
+
+  function place(anchor) {
+    const width = Math.min(320, win.innerWidth - 32);
+    pop.style.width = `${width}px`;
+    pop.style.maxHeight = "";
+    const at = popoverPlace(anchor.getBoundingClientRect(), { width, height: pop.offsetHeight,
+                                                              innerWidth: win.innerWidth, innerHeight: win.innerHeight });
+    pop.style.left = `${at.left}px`;
+    pop.style.top = at.top === undefined ? "" : `${at.top}px`;
+    pop.style.bottom = at.bottom === undefined ? "" : `${at.bottom}px`;
+    if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
+  }
+
+  function open(anchor) {
+    const data = summary();
+    if (!data) return;
+    initial = (fresh ? choice() : data.own) || DEFAULT;
+    openFor = session();
+    pop.innerHTML = formHtml(data, escapeHtml, { running: running(), kind, choice: choice() });
+    pop.hidden = false;
+    place(anchor);
+  }
+
+  function close() {
+    pop.hidden = true;
+    initial = null;
+    openFor = null;
+  }
+
+  function isOpen() { return !pop.hidden; }
+
+  // A new summary: an open form keeps the user's pick; only "Now:" follows.
+  function refresh() {
+    if (!isOpen()) return;
+    const data = summary();
+    if (!data || session() !== openFor) return close();
+    const now = pop.querySelector(".think-now");
+    if (now) now.textContent = nowText(data);
+  }
+
+  el.addEventListener("click", (e) => {
+    const anchor = e.target.closest(anchorSel);
+    if (!anchor) return;
+    e.stopPropagation();
+    if (isOpen()) close();
+    else open(anchor);
+  });
+  pop.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const level = e.target.elements.level.value;
+    const was = initial;
+    close();
+    if (fresh) return choose(level === DEFAULT ? null : level);
+    const line = commandLine(level, was);
+    if (line) run(line);
+  });
+  pop.addEventListener("click", (e) => {
+    if (e.target.closest("[data-act]")?.dataset.act === "close") close();
+  });
+  doc.addEventListener("click", (e) => {
+    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(anchorSel)) close();
+  });
+  doc.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && isOpen()) close();
+  });
+
+  return { close, refresh, get open() { return isOpen(); } };
+}

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

@@ -63,6 +63,18 @@ export function elapsedSince(startedAt, now = Date.now()) {
   return Math.max(0, current - started);
 }
 
+// The info bar's session clock: while a turn runs it counts from the
+// session's start (+timing.startedAt+), or, on a session's first turn (its
+// snapshot came before any turn, so no start), from the running turn's;
+// otherwise the server's session_duration_ms (null when unknown).
+export function sessionDurationNow(timing, running, now = Date.now()) {
+  if (running) {
+    const since = elapsedSince(timing?.startedAt ?? timing?.activeTurn?.started_at, now);
+    if (since !== null) return since;
+  }
+  return timing?.sessionDurationMs ?? null;
+}
+
 export function normalizeTiming(data = {}) {
   return {
     startedAt: typeof data.started_at === "string" ? data.started_at : null,
@@ -251,9 +263,12 @@ function canceledSteps(g, record, tools) {
   return record?.status === "canceled" && (g.texts.length > 1 || tools.length > 0);
 }
 
+// A call's row from its tool record alone (no saved parts): the record's
+// called_as too, so "(called as bash)" shows after a reload, as live.
 function recordRows(tools, iteration) {
   return tools.filter((r) => Number(r.iteration) === iteration).map((r) => ({
     key: `${iteration}:${r.call_index ?? 0}`, tool: r.tool, status: r.status, duration_ms: r.duration_ms,
+    ...(r.called_as ? { called_as: r.called_as } : {}),
   }));
 }
 

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

@@ -244,6 +244,29 @@ export function sessionCommandLine(text, commands) {
     .some((c) => c && typeof c.name === "string" && (line === c.name || line.startsWith(`${c.name} `)));
 }
 
+// /cut TEXT and /queue TEXT: the UIs' own words for a delivery (listed
+// for Tab and /help, never run as commands; TerminalUI::Formatting's
+// STEER_CHOICE: the word, then any whitespace and the text). During a
+// turn /cut TEXT is the text sent as a cut (POST /turn, delivery "cut"),
+// as chi send --cut does; /queue isn't in the web yet (the page says so,
+// as the attached TUI does). With no running turn both are the text as a
+// normal turn. The bare word gets the usage line.
+// @return {{send: string, delivery?: string} | {reply: string} | null}
+//   null: not a delivery line
+export const STEER_CHOICE_USAGE = "(/cut and /queue need a message: /cut TEXT, /queue TEXT)";
+export const QUEUE_UNAVAILABLE_WEB = "(/queue isn't available in the web yet; a plain message goes in at the running turn's next step, and /cut TEXT cuts in)";
+const STEER_CHOICE = /^\/(cut|queue)(?:\s+([\s\S]*))?$/;
+
+export function steerChoiceRoute(text, { running = false } = {}) {
+  const match = STEER_CHOICE.exec(String(text || "").trim());
+  if (!match) return null;
+  const message = (match[2] || "").trim();
+  if (!message) return { reply: STEER_CHOICE_USAGE };
+  if (!running) return { send: message };
+  if (match[1] === "queue") return { reply: QUEUE_UNAVAILABLE_WEB };
+  return { send: message, delivery: "cut" };
+}
+
 // A line that is one word: a slash and a name, no spaces, no second slash
 // (Commands::Registry#unknown_command_word?). `/modle` is one; `/foo bar`
 // and `/usr/bin/env` are not (they are prompts).
@@ -558,8 +581,9 @@ export function snapshotEvents({ current_turn: turn = null, queued = [], queued_
           const call = { iteration: part.iteration, call_index: part.call_index, tool: part.tool };
           if (part.label) call.label = part.label;
           const title = part.title ? { title: part.title } : {};
+          const alias = part.called_as ? { called_as: part.called_as } : {};
           const view = part.view ? { view: part.view } : {};
-          events.push({ type: "tool_call_started", ...call, params: part.params, ...title, ...view });
+          events.push({ type: "tool_call_started", ...call, params: part.params, ...title, ...alias, ...view });
           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
@@ -567,7 +591,7 @@ export function snapshotEvents({ current_turn: turn = null, queued = [], queued_
             const action = part.action ? { action: part.action } : {};
             const completed = {
               type: "tool_call_completed", ...call, output: part.output, output_truncated: !!part.output_truncated,
-              activity: { ...action, tool: part.tool, status: part.status, params: part.params, ...title },
+              activity: { ...action, tool: part.tool, status: part.status, params: part.params, ...title, ...alias },
             };
             if (part.duration_ms != null) completed.duration_ms = part.duration_ms;
             if (part.diff) completed.diff = part.diff;

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

@@ -78,13 +78,15 @@ export function toolRowInnerHtml(row, { thumbs = () => "" } = {}) {
   const shown = row.title || row.params;
   const hover = rowHover(row) ? ` title="${escapeHtml(rowHover(row))}"` : "";
   const params = shown ? `<span class="activity-params"${hover}>${escapeHtml(shown)}</span>` : "";
+  // The name the model called the tool by when it was an alias's, dim.
+  const alias = row.called_as ? `<span class="activity-alias">(called as ${escapeHtml(row.called_as)})</span>` : "";
   const duration = formatDuration(row.duration_ms);
   const full = row.status === "running" ? "" : String(row.output || "").replace(/^\[[^\]]*\]\s*/, "");
   const output = full
     ? `<div class="activity-output" title="${escapeHtml(full)}">${escapeHtml(full.length > 300 ? `${full.slice(0, 300)}…` : full)}</div>`
     : "";
   const status = statusParts(row.status);
-  return `${statusMarkHtml(status)}<span class="activity-tool">${escapeHtml(toolName(row))}</span>${params}${statusWordHtml(status)}` +
+  return `${statusMarkHtml(status)}<span class="activity-tool">${escapeHtml(toolName(row))}</span>${params}${alias}${statusWordHtml(status)}` +
     `${duration ? `<span class="activity-duration">${escapeHtml(duration)}</span>` : ""}` +
     `${commandBlockHtml(row.view, row.title)}${llmEditHtml(row)}${output}` +
     `${row.images?.length ? thumbs(row.images) : ""}${row.diff ? activityDiffHtml(row.diff) : ""}`;