samagotchi 0.51.0 → 0.53.0

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

@@ -35,10 +35,11 @@ export function listSessions(sort, order, { dir, ...opts } = {}) {
 // it); either left out means the server's default. preview: that message,
 // which names the session until its turn is saved. llm_context: the
 // session's own LLM context words ({strategy, apply, budget}), when the
-// start page's chip set some.
-export function createIdleSession({ dir, model, preview, llm_context: llmContext, ...opts } = {}) {
+// start page's chip set some; thinking: its own level ("low"), when the
+// start page's think chip set one.
+export function createIdleSession({ dir, model, preview, llm_context: llmContext, thinking, ...opts } = {}) {
   const body = { idle: true, ...(dir ? { dir } : {}), ...(model ? { model } : {}), ...(preview ? { preview } : {}),
-                 ...(llmContext ? { llm_context: llmContext } : {}) };
+                 ...(llmContext ? { llm_context: llmContext } : {}), ...(thinking ? { thinking } : {}) };
   return api("/api/sessions", { method: "POST", body: JSON.stringify(body), ...opts });
 }
 
@@ -90,9 +91,12 @@ export function getSession(id, { tail, recent, turnId, timing, parts, cards, ...
 // opts.images: refs ({file, name}) to images uploaded into the session.
 // history: false keeps the prompt out of the shared prompt history (an
 // image-only send, whose text is only its [image: …] placeholders).
-export function sendTurn(id, prompt, { clientId, images, history = true, ...opts } = {}) {
+// delivery: what the message does to a running turn ("cut": /cut TEXT);
+// none = the server's default (the next step).
+export function sendTurn(id, prompt, { clientId, images, history = true, delivery = null, ...opts } = {}) {
   const body = clientId ? { prompt, client_id: clientId } : { prompt };
   if (images?.length) body.images = images;
+  if (delivery) body.delivery = delivery;
   if (history === false) body.history = false;
   return api(`/api/sessions/${id}/turn`, {
     method: "POST",

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

@@ -94,13 +94,17 @@ export function previewOf(lastPrompt) {
   return normalized;
 }
 
+// A session's first message as the info bar's title: whitespace collapsed,
+// cut at FIRST_PREVIEW_CHARS with an ellipsis ("" for none).
+export function firstPreview(text) {
+  const n = normalize(text);
+  return n.length > FIRST_PREVIEW_CHARS ? `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026` : n;
+}
+
 export function previewForCard(session) {
   // Unified card preview: first message (80) else previewOf(last_prompt)
   const raw = session.first_preview || session.last_prompt || "";
-  const n = normalize(raw);
-  if (!n) return "\u2014";
-  if (n.length > FIRST_PREVIEW_CHARS) return `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026`;
-  return n;
+  return firstPreview(raw) || "\u2014";
 }
 
 const DELETE_PREVIEW_CHARS = 40;

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

@@ -502,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
@@ -694,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}
@@ -1046,6 +1048,7 @@ 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">Stop turn</button>
           <div class="split">

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

@@ -0,0 +1,179 @@
+// 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";
+import { html, nothing, render } from "./vendor/lit-html.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 };
+}
+
+// The session bar's chip, as a string: the info bar is still built as one
+// (app.js); it becomes a template when the info bar moves to lit.
+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}`;
+}
+
+// "Now: low (session)", "Now: default (the model's own)".
+export function nowText(summary) {
+  return `Now: ${summary.level} (${summary.source || "the model's own"})`;
+}
+
+const option = (value, label, chosen) => html`<option value=${value} ?selected=${value === chosen}>${label}</option>`;
+
+// The popover's form (a lit-html template). For the new chat (kind
+// NEW_CHAT), +summary+ is the model's and +choice+ the level the form
+// shows; +now+ is the summary its "Now:" line reads (refresh passes a
+// newer one, the rest stays as the form opened).
+export function formTemplate(summary, { running = false, kind = SESSION, choice = null, now = summary } = {}) {
+  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 html`<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">${nowText(now)}</div
+    ><label class="llmctx-field"><span>Level</span><select name="level">${option(DEFAULT, follow, chosen)}${
+      LEVELS.map((level) => option(level, level, chosen))}</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, 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;
+  // What the open form was drawn from: the model's or session's summary
+  // and the form's options. A closed popover is empty, so each open draws
+  // a fresh form (an unsent pick is gone).
+  let shown = null;
+  const draw = (now) => render(formTemplate(shown.data, { ...shown.opts, now }), pop);
+
+  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();
+    shown = { data, opts: { running: running(), kind, choice: choice() } };
+    draw(data);
+    pop.hidden = false;
+    place(anchor);
+  }
+
+  function close() {
+    pop.hidden = true;
+    initial = null;
+    openFor = null;
+    shown = null;
+    render(nothing, pop);
+  }
+
+  function isOpen() { return !pop.hidden; }
+
+  // A new summary: an open form keeps the user's pick; only "Now:" follows
+  // (the same template again: lit writes that line alone).
+  function refresh() {
+    if (!isOpen()) return;
+    const data = summary();
+    if (!data || session() !== openFor) return close();
+    draw(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).