samagotchi 0.55.0 → 0.57.0

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

@@ -178,6 +178,17 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .activity-diff>summary{cursor:pointer;font-size:12px;color:var(--text-muted);width:max-content;font-variant-numeric:tabular-nums}
 .activity-diff>summary:hover{color:var(--text-2)}
 .activity-diff[open]>summary{margin-bottom:4px}
+/* A read of the file as-is: its numbered lines, closed under the preview (read_view.js); open, they stand for it. */
+.activity-read{flex:1 1 100%;min-width:0;margin:2px 0 2px var(--row-gutter)}
+.activity-read>summary{cursor:pointer;font-size:12px;color:var(--text-muted);width:max-content;font-variant-numeric:tabular-nums}
+.activity-read>summary:hover{color:var(--text-2)}
+.activity-read[open]>summary{margin-bottom:4px}
+.activity-row:has(>.activity-read[open])>.activity-output{display:none}
+.read-lines{margin:0;padding:4px 0;background:var(--bg-inset);border:1px solid var(--border);border-radius:6px;font-size:12px;line-height:1.45;overflow:auto;max-height:420px}
+.read-lines code{display:block;min-width:max-content}
+.read-line{display:block;padding:0 10px 0 0;white-space:pre;color:var(--text-2)}
+.read-line::before{content:attr(data-line);display:inline-block;width:5ch;margin-right:10px;padding-right:6px;text-align:right;color:var(--text-faint);user-select:none;font-variant-numeric:tabular-nums}
+.read-meta{color:var(--text-faint)}
 /* An execute/task_create's full command, above its output and lined up with it: as written, its own scroll. */
 .activity-row>.activity-command{flex:1 1 100%;min-width:0;margin:4px 0 2px var(--row-gutter)}
 .activity-command pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.45;color:var(--text-2);background:var(--bg-inset);border:1px solid var(--border);border-radius:6px;padding:6px 34px 6px 8px}
@@ -215,6 +226,7 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
   .activity-params{flex:1 1 0}
   .activity-output{margin-left:0}
   .activity-diff{margin-left:0}
+  .activity-read{margin-left:0}
   .activity-edit{margin-left:0}
   .activity-row>.activity-command{margin-left:0}
 }
@@ -307,6 +319,9 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .bubble.command.queued .command-output{color:var(--text-faint)}
 .command-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-3)}
 .command-output{margin:6px 0 0;white-space:pre-wrap;font-size:12px;color:var(--text-2)}
+.bubble.command .command-confirm{margin-top:8px;padding:3px 10px;border-radius:6px;font:inherit;font-size:12px;cursor:pointer;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}
+.bubble.command .command-confirm:hover:not(:disabled){border-color:var(--accent)}
+.bubble.command .command-confirm:disabled{opacity:.55;cursor:default}
 .bubble.continue{border-left:3px solid var(--accent);background:var(--bg-panel);padding:10px 12px}
 .bubble.continue.resolved{border-left-color:var(--text-muted);opacity:.8}
 .continue-text{font-size:14px;color:var(--text);margin-bottom:6px}
@@ -368,8 +383,10 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 /* Refs (refs.js): text until hovered, and only for a kind this viewer has an action for (body.refs-file). */
 .refs-file .ref[data-ref-kind="file"]:hover{color:var(--accent);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
 .refs-file .ref[data-ref-kind="file"]:hover::after{content:"\2197";margin-left:.3em;color:var(--text-faint);display:inline-block}
-.refs-file .activity-row:has(.ref[data-ref-kind="file"]) .diff-line[data-line]:hover{cursor:pointer;box-shadow:inset 2px 0 var(--accent)}
-.refs-file .activity-row:has(.ref[data-ref-kind="file"]) .diff-line[data-line]:hover::after{content:"\2197  " attr(data-line);float:right;padding-left:12px;color:var(--text-faint)}
+.refs-file :is(.activity-row,.bubble.approval):has(.ref[data-ref-kind="file"]) .diff-line[data-line]:hover{cursor:pointer;box-shadow:inset 2px 0 var(--accent)}
+.refs-file :is(.activity-row,.bubble.approval):has(.ref[data-ref-kind="file"]) .diff-line[data-line]:hover::after{content:"\2197  " attr(data-line);float:right;padding-left:12px;color:var(--text-faint)}
+.refs-file .activity-row:has(.ref[data-ref-kind="file"]) .read-line[data-line]:hover{cursor:pointer;box-shadow:inset 2px 0 var(--accent)}
+.refs-file .activity-row:has(.ref[data-ref-kind="file"]) .read-line[data-line]:hover::before{color:var(--accent)}
 .diff-add{background:var(--diff-add-bg);color:var(--diff-add-text)}
 .diff-del{background:var(--diff-del-bg);color:var(--diff-del-text)}
 .diff-hunk{color:var(--text-faint)}
@@ -704,9 +721,9 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #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 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)}
+#infoBar .meta .llmctx-chip,#infoBar .meta .think-chip,#infoBar .meta .rh-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,#infoBar .meta .rh-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .llmctx-chip.own,#infoBar .meta .think-chip.own,#infoBar .meta .rh-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}

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

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

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

@@ -0,0 +1,174 @@
+// A level chip in the session bar and its popover: the level the next turn
+// runs at ("think low", "reasoning all"; "· session" when the session set
+// its own) and a form with a level select that runs the setting's command
+// in the session's worker (the reply shows in the conversation, like a
+// typed one). The summary is the setting's SettingExplained#summary
+// ({level, source, own}: the worker's snapshot, a command_ran, or the
+// server's own reading of the session file).
+//
+// A config names the setting (thinking_chip.js, reasoning_history_chip.js):
+//   name     the popover's heading ("Thinking")
+//   prefix   the chip's word ("think")
+//   command  the command ("/thinking")
+//   levels   the settable levels (the select's options after "follow")
+//   anchor   the chip's selector (its data attribute: each config's
+//            chipTemplate draws it; clicks are delegated on the same
+//            element as the other chips')
+//   formClass, popoverClass, nowClass   the form's, popover's and "Now:"
+//            line's own classes
+//   when(fresh)   the form's note on when it applies (fresh: the start
+//            page's new chat, thinking only)
+//
+// The start page's new chat (kind NEW_CHAT) has a thinking chip only
+// (thinking_chip.js keeps its choice): the form shows the model's level and
+// takes a choice for the next create.
+
+import { NEW_CHAT, SESSION, popoverPlace } from "./llm_context_chip.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+export const DEFAULT = "default";
+
+// The chip: its text, tooltip and whether the session (or the new chat)
+// set its own; null without a summary (an older worker, or a host the
+// setting means nothing on).
+export function chipModel(cfg, 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 = `${cfg.name}: ${summary.level} (${from}). Click to change it for ${what}.`;
+  return { text: `${cfg.prefix} ${summary.level}${own ? ` · ${kind}` : ""}`, title, own };
+}
+
+// The command line for a select value ("default" unsets the session's own),
+// with --yes: picking a level in the form is the choice, and the form
+// names the cost (CacheConfirm asks nothing then); null when it is what
+// the form opened with.
+export function commandLine(cfg, level, initial = null) {
+  if (initial !== null && level === initial) return null;
+  return `${cfg.command} ${level} --yes`;
+}
+
+// "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(cfg, 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})`;
+  return html`<form class=${`${cfg.formClass} llmctx-form`}><div class="ctx-pop-head"><strong>${cfg.name}</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 ${cfg.nowClass}`}>${nowText(now)}</div
+    ><label class="llmctx-field"><span>Level</span><select name="level">${option(DEFAULT, follow, chosen)}${
+      cfg.levels.map((level) => option(level, level, chosen))}</select></label
+    ><div class="ctx-pop-meta">${cfg.when(fresh)}${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, info_bar.js);
+// summary(): the open session's summary; 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, by default its data attribute) keep it
+// apart from the other controls on the same element (the anchor defaults
+// to the config's).
+export function createLevelControl({ cfg, el, summary, session = () => null, running = () => false, run,
+                                     kind = SESSION, choice = () => null, choose = null,
+                                     id, anchor: anchorSel = cfg.anchor,
+                                     doc = document, win = window }) {
+  const fresh = kind === NEW_CHAT;
+  const pop = doc.createElement("div");
+  pop.id = id;
+  pop.className = `ctx-popover ${cfg.popoverClass}`;
+  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(cfg, 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(cfg, 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/model_pick.js

@@ -22,7 +22,7 @@ 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, thinking (the level it starts at, Thinking::Explained#summary),
+// the model has some, thinking (the level it starts at, SettingExplained#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

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

@@ -49,9 +49,10 @@ export function relayView(pq) {
   };
 }
 
-// @return {null | {tool, what, isCommand, where, why, preview?, delegate?}};
-// preview is an edit/write's dry-run diff (diff_view.js draws it); delegate
-// is relayView's, for a delegate's approval
+// @return {null | {tool, what, isCommand, where, why, paths?, preview?, delegate?}};
+// paths are what +what+ joins when it shows paths (the card draws a ref
+// for each); preview is an edit/write's dry-run diff (diff_view.js draws
+// it); delegate is relayView's, for a delegate's approval
 export function approvalView(pq) {
   if (!isApproval(pq)) return null;
   const a = pq.approval || {};
@@ -74,6 +75,7 @@ export function approvalView(pq) {
     // A tool without a command or path (an MCP tool): its compact args.
     what: command || paths.join("\n") || a.args || "",
     isCommand: !!command,
+    ...(!command && paths.length ? { paths } : {}),
     where,
     why: `${reason} (${who})`,
     ...(a.preview && typeof a.preview === "object" ? { preview: a.preview } : {}),

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

@@ -254,7 +254,8 @@ export function createQuestionCards({
       const what = doc.createElement("pre");
       what.className = view.isCommand ? "approval-what command" : "approval-what paths";
       const code = doc.createElement("code");
-      code.textContent = view.what;
+      if (view.paths) appendPathRefs(code, view.paths);
+      else code.textContent = view.what;
       what.appendChild(code);
       box.appendChild(what);
     }
@@ -279,6 +280,25 @@ export function createQuestionCards({
     return box;
   }
 
+  // One file ref per path, a line each (refs.js: the card's path opens
+  // the current file at the dry run's first change). A directory (a
+  // plugin's path ending in /) stays plain text.
+  function appendPathRefs(code, paths) {
+    paths.forEach((path, i) => {
+      if (i) code.appendChild(doc.createTextNode("\n"));
+      if (String(path).endsWith("/")) {
+        code.appendChild(doc.createTextNode(String(path)));
+        return;
+      }
+      const ref = doc.createElement("span");
+      ref.className = "ref";
+      ref.dataset.refKind = "file";
+      ref.dataset.refPath = String(path);
+      ref.textContent = String(path);
+      code.appendChild(ref);
+    });
+  }
+
   // "Waiting for approval in parent ab12: answering here works too", or
   // an empty (hidden) line while the question isn't relayed.
   function renderRelayedTo(pq) {

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

@@ -0,0 +1,74 @@
+// A read row's output as the file's lines, numbered, apart from the DOM.
+// Only when the output is the file text as-is: each numbered line is a
+// ref's line (refs.js opens the row's file there). The row's preview
+// (turn_html.js) strips any "[tag] " and cuts at 300 chars; numbering
+// needs the text exactly as read, so it is drawn on its own, closed.
+
+import { escapeHtml } from "./format.js";
+
+// What follows one of these isn't the file's next line: a ToolRunner cap
+// ("[cut: …]"), a head/tail preview's gap ("[... omitted …]") or the note
+// of a range clamped at the end of the file ("[read: end_line …]"). They
+// are appended at the end (a clamp note, then a cut), so only the last
+// MARKER_LINES lines can be one: such a line earlier is the file's own.
+const MARKER_LINES = 2;
+const MARKER = /^(?:\[cut: |\[\.\.\. omitted |\[read: end_line \d+ exceeds )/;
+
+// An image's line instead of its text: attached, or why not (ToolRunner).
+const IMAGE = /\((?:\d+×\d+ )?[A-Z]+\)(?: attached\.| is an image; | is not attached: )/;
+
+// The file text of a read row's output, or null when it isn't the file
+// as-is: an error, the head/tail preview of a big file, an image's line.
+function fileText(row) {
+  if (row?.tool !== "read" || row.status !== "ok" || row.ref?.kind !== "file" || row.images?.length) return null;
+  let text = String(row.output || "");
+  // The call the gate replaced says so on a line before the tag.
+  if (text.startsWith("ran as: ")) text = text.slice(text.indexOf("\n") + 1);
+  if (!text.startsWith("[read]\n")) return null;
+  text = text.slice("[read]\n".length);
+  if (!text || text.startsWith("Error: ") || text.startsWith("truncated=true\n")) return null;
+  if (!text.includes("\n") && IMAGE.test(text)) return null;
+  return text;
+}
+
+// @return {null | Array<{text, line}>} the output's lines, line null for
+// one that isn't the file's: a marker and all after it, and the "…" of a
+// reload's capped output (output_truncated; a cut line already says so
+// for a live one). The first line is the range's start_line (the ref's
+// line), else 1.
+export function readLines(row) {
+  const text = fileText(row);
+  if (text === null) return null;
+  const lines = text.split("\n");
+  // The file's last newline ends a line, it doesn't start one.
+  if (lines.at(-1) === "") lines.pop();
+  let next = Number(row.ref.line) || 1;
+  let numbering = true;
+  const out = [];
+  lines.forEach((line, i) => {
+    if (numbering && i >= lines.length - MARKER_LINES && MARKER.test(line)) {
+      numbering = false;
+      // The newline before a marker is the marker's: the blank it leaves
+      // isn't a line of the file.
+      if (i > 0 && lines[i - 1] === "" && out.at(-1)?.line !== null) out.pop();
+    }
+    out.push({ text: line, line: numbering ? next++ : null });
+  });
+  if (row.output_truncated && numbering) out.push({ text: "…", line: null });
+  return out;
+}
+
+// A read row's numbered lines behind a closed toggle ("lines 40–60"); ""
+// when its output isn't the file as-is.
+export function readLinesHtml(row) {
+  const lines = readLines(row);
+  const numbered = lines?.filter((l) => l.line !== null) || [];
+  if (!numbered.length) return "";
+  const first = numbered[0].line;
+  const last = numbered.at(-1).line;
+  const label = first === last ? `line ${first}` : `lines ${first}–${last}`;
+  const spans = lines.map(({ text, line }) => line === null
+    ? `<span class="read-line read-meta">${escapeHtml(text)}</span>`
+    : `<span class="read-line" data-line="${line}">${escapeHtml(text) || " "}</span>`).join("");
+  return `<details class="activity-read"><summary>${label}</summary><pre class="read-lines"><code>${spans}</code></pre></details>`;
+}

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

@@ -0,0 +1,49 @@
+// The session bar's reasoning history chip: which of its own reasoning the
+// session's model gets back from the next turn on ("reasoning all";
+// "· session" when the session set its own), and a popover with a level
+// select that runs /reasoning-history in the session's worker. The summary
+// is the session's reasoning_history (SettingExplained#summary; null on a
+// native host, which ignores it, or from an older worker: no chip then).
+// A config on level_chip.js.
+
+import * as level from "./level_chip.js";
+import { html, nothing } from "./vendor/lit-html.js";
+
+export const LEVELS = ["drop", "turn", "all"];
+
+export const CONFIG = Object.freeze({
+  name: "Reasoning history",
+  prefix: "reasoning",
+  command: "/reasoning-history",
+  levels: LEVELS,
+  anchor: "[data-rh-chip]",
+  formClass: "rh-form",
+  popoverClass: "rh-popover",
+  nowClass: "rh-now",
+  when: () => "From the next turn's start. A change to or from all makes the server read the conversation again.",
+});
+
+export function chipModel(summary) {
+  return level.chipModel(CONFIG, summary);
+}
+
+// The session bar's chip (a lit-html template; info_bar.js), nothing
+// without a summary.
+export function chipTemplate(summary) {
+  const chip = chipModel(summary);
+  if (!chip) return nothing;
+  return html`<button type="button" class=${`model rh-chip${chip.own ? " own" : ""}`} title=${chip.title} data-rh-chip aria-haspopup="dialog">${chip.text}</button>`;
+}
+
+export function commandLine(choice, initial = null) {
+  return level.commandLine(CONFIG, choice, initial);
+}
+
+export function formTemplate(summary, opts) {
+  return level.formTemplate(CONFIG, summary, opts);
+}
+
+// The chip's popover in the session bar (level_chip.js createLevelControl).
+export function createReasoningHistoryControl({ id = "reasoningHistoryPopover", ...opts }) {
+  return level.createLevelControl({ cfg: CONFIG, id, ...opts });
+}