samagotchi 0.4.0 → 0.5.0

data/lib/samagotchi/web/message_parts.rb

@@ -55,15 +55,17 @@ module Samagotchi
       # @param message [Hash] a saved model message (symbol or string keys)
       # @param responses [Array<Hash>] the tool_response messages after it
       # @param registry [Tools::Registry] the session's tools
-      # @return [Hash, nil] { thinking:, tools: [{ tool:, params:, output:,
-      #   output_truncated:, images: }] } with only what it found; nil for nothing
-      def for_message(message, responses, registry: Tools::Builtins.default)
+      # @param cwd [String, nil] the session's working directory (a file
+      #   tool's title is relative to it)
+      # @return [Hash, nil] { thinking:, tools: [{ tool:, params:, title:,
+      #   output:, output_truncated:, images: }] } with only what it found; nil for nothing
+      def for_message(message, responses, registry: Tools::Builtins.default, cwd: nil)
         content = field(message, :content).to_s
         calls = field(message, :tool_calls)
         tools = if calls.is_a?(Array) && !calls.empty?
-                  native_tools(calls, responses, registry)
+                  native_tools(calls, responses, registry, cwd)
                 else
-                  markup_tools(content, responses, registry)
+                  markup_tools(content, responses, registry, cwd)
                 end
         parts = {}
         thinking = [field(message, :thinking).to_s.strip, thinking_of(content)].reject(&:empty?).join("\n\n")
@@ -83,7 +85,7 @@ module Samagotchi
         blocks.map(&:strip).reject(&:empty?).join("\n\n")
       end
 
-      def markup_tools(content, responses, registry)
+      def markup_tools(content, responses, registry, cwd = nil)
         calls = []
         calls.concat(ToolCallParser::Qwen.new(ModelProfile.qwen36).parse(content)) if content.include?("<tool_call>")
         calls.concat(ToolCallParser::Gemma.new(ModelProfile.gemma4).parse(content)) if content.include?("<|tool_call>")
@@ -96,7 +98,7 @@ module Samagotchi
         diffs = saved_list(responses, :tool_diffs, calls.length)
         images = split_images(responses, calls.length)
         calls.each_with_index.map do |call, i|
-          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i])
+          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i], cwd: cwd)
         end
       end
 
@@ -118,7 +120,7 @@ module Samagotchi
         counts.map { |n| images.shift(n) }
       end
 
-      def native_tools(calls, responses, registry)
+      def native_tools(calls, responses, registry, cwd = nil)
         by_id = responses.to_h { |r| [field(r, :tool_call_id), r] }
         calls.each_with_index.map do |raw, i|
           ref = CallRef.new(field(raw, :name).to_s, field(raw, :arguments))
@@ -126,7 +128,7 @@ module Samagotchi
           response = by_id[field(raw, :id)] || (field(responses[i], :tool_call_id).nil? ? responses[i] : nil)
           tool_part(call, response && field(response, :content).to_s, registry, field(response, :tool_params),
                     response && field(response, :images), label: field(response, :tool_labels),
-                                                          diff: field(response, :tool_diffs))
+                                                          diff: field(response, :tool_diffs), cwd: cwd)
         end
       end
 
@@ -148,11 +150,13 @@ module Samagotchi
 
       # +shown+ is the saved params line, when it is a String.
       # +diff+ is what an edit/write changed (EditPreview.change), saved as
-      # tool_diffs.
-      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil)
+      # tool_diffs. +cwd+: the session's working directory, for the title.
+      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, cwd: nil)
         name = call[:name].to_s
         params = shown.is_a?(String) ? shown : ToolActivity.tool_activity_params(name, call, registry: registry)
         part = { tool: name, params: params.to_s }
+        title = ToolActivity.tool_title(name, call, cwd: cwd)
+        part[:title] = title if title
         part[:label] = label if label.is_a?(String) && !label.empty?
         unless output.nil?
           part[:output] = output.length > OUTPUT_MAX ? output[0, OUTPUT_MAX] : output

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

@@ -46,6 +46,7 @@ export function addStarted(model, event = {}) {
     row.tool = event.tool || row.tool;
     row.label = event.label || row.label;
     row.params = event.params || row.params;
+    row.title = event.title || row.title;
     return { row, created: false };
   }
   row = {
@@ -55,6 +56,10 @@ export function addStarted(model, event = {}) {
     tool: event.tool || "tool",
     label: event.label || null,
     params: event.params || "",
+    // What the call did in a few words (the server's tool title: a
+    // project-relative path, a command without its "cd … &&"); rows show it
+    // in place of the params when there is one.
+    title: event.title || null,
     status: ROW_STATUS.RUNNING,
     output: "",
     output_truncated: false,
@@ -78,6 +83,7 @@ export function addCompleted(model, event = {}) {
       tool: event.tool,
       label: event.label,
       params: event.activity?.params || "",
+      title: event.activity?.title,
     });
     row = synthesized.row;
   }
@@ -85,6 +91,7 @@ export function addCompleted(model, event = {}) {
   row.output = event.output || "";
   row.output_truncated = !!event.output_truncated;
   if (event.activity?.params) row.params = event.activity.params;
+  if (event.activity?.title) row.title = event.activity.title;
   // The images the tool returned (a reload in the turn view draws them from
   // the saved parts, turn_view.js reloadRowHtml).
   if (event.images?.length) row.images = event.images;

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

@@ -17,11 +17,13 @@ import {
   uploadImage,
   listModels,
 } from "./data.js";
-import { MODEL_KEY, modelNames, pickModel } from "./model_pick.js";
+import { MODEL_KEY } from "./model_pick.js";
+import { createModelPicker } from "./model_picker.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
 import { escapeHtml, messageBodyHtml, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, firstMessageOf, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
 import { chatHistoryHtml, createChatView } from "./chat_view.js";
 import { createTurnView, turnHistoryHtml } from "./turn_view.js";
+import { createStageView } from "./stage_view.js";
 import { annotateBarLeft, annotationSource, appendQuote, quoteBlock } from "./annotations.js";
 import { parsePresets, presetNote } from "./annotate_presets.js";
 import { COPY_SOURCE_ATTR, copySource, copySourceAttr, copyText, installCopy, showsAnswer } from "./copy.js";
@@ -37,7 +39,7 @@ import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { stripColumns, stripShowParts } from "./strip.js";
 import { applySessionEvent, listedSessions, sortedByUpdated, withChildrenAfterParents } from "./sessions_list.js";
-import { NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, trackAttention } from "./notify.js";
+import { NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, notifyState as bellState, trackAttention } from "./notify.js";
 import {
   appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, normalizeTiming, turnTimingText,
 } from "./timing.js";
@@ -58,7 +60,6 @@ const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
 const cancelBtn = $("#cancelBtn");
 const modelPickEl = $("#modelPick");
-const modelSelectEl = $("#modelSelect");
 const composeHintEl = $("#composeHint");
 
 let selected = null;
@@ -72,18 +73,32 @@ let resyncsInFlight = 0;
 let resyncAgain = false;
 let allSessions = [];
 let seenContent = new Set();
-// The per-turn view (web.turn_view, or ?view=turn|chat): one block per turn
-// with its steps (turn_view.js), instead of a row of bubbles (chat_view.js).
-const turnView = document.body.dataset.turnView === "1";
+// The page's view of a turn (web.view, or ?view=turn|stage|chat): one block
+// per turn with its steps (turn_view.js), the running turn pinned above the
+// composer (the stage), or a row of bubbles (chat_view.js).
+const view = ["turn", "stage", "chat"].includes(document.body.dataset.view) ? document.body.dataset.view : "turn";
+// The turn and stage views draw a turn as steps (a reload asks for parts).
+const turnView = view !== "chat";
 // The running turn's DOM: the streaming bubbles, the thinking block and the
-// activity panel, or the turn block.
-const turnDom = (turnView ? createTurnView : createChatView)({
+// activity panel, the turn block, or the stage (the turn block in its cloud).
+const viewArgs = {
   historyEl,
   appendToHistory: (el) => appendToHistory(el),
   isNearBottom: () => isNearBottom(),
   sawText: (k) => seenContent.add(k),
   sessionId: () => selected,
-});
+};
+const turnDom = view === "stage"
+  ? createStageView({ ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl })
+  : (turnView ? createTurnView : createChatView)(viewArgs);
+// Where a running turn's rows can be: the history, and the stage while it
+// holds a turn (lookups by id, copy, annotate, card actions).
+function turnRoots() {
+  return turnDom.root ? [historyEl, turnDom.root] : [historyEl];
+}
+function findInTurnRoots(selector) {
+  return turnRoots().flatMap((root) => [...root.querySelectorAll(selector)]);
+}
 let currentFirstPreview = "";
 let currentUsedMemories = [];
 // The session's --memory and --mute lists (from the session card; shown in
@@ -482,6 +497,7 @@ const SEND_HINT = "Enter to send · Shift+Enter for a newline";
 // its next step (steering). Cancel is its own button then.
 function updateComposerMode() {
   document.body.classList.toggle("has-session", !!selected);
+  if (selected) modelPicker.close();
   const running = turnRunning && !!selected;
   cancelBtn.style.display = running ? "" : "none";
   if (running) {
@@ -829,7 +845,7 @@ function applyFinalMarkdown(messages) {
   );
   if (!message) return;
 
-  const bubble = [...historyEl.querySelectorAll(".bubble.output")]
+  const bubble = findInTurnRoots(".bubble.output")
     .reverse()
     .find((item) => showsAnswer(item, message, normalize));
   if (!bubble) return;
@@ -841,7 +857,7 @@ function applyFinalMarkdown(messages) {
 
 function seedSeenFromDom() {
   seenContent = new Set();
-  historyEl.querySelectorAll(".bubble").forEach((b) => {
+  findInTurnRoots(".bubble").forEach((b) => {
     const k = normalize(b.textContent);
     if (k) seenContent.add(k);
   });
@@ -850,8 +866,13 @@ function seedSeenFromDom() {
 // Sticky-follow scroll: only auto-scroll to the bottom while the user is
 // already near it; never yank them back down mid-read. Capture the decision
 // BEFORE any DOM mutation that grows the content (new chunk / row / thinking
-// delta), so the gap measured is the one the user was sitting at.
+// delta), so the gap measured is the one the user was sitting at. While the
+// stage holds a turn its rows go there: nothing it does moves the history.
 function isNearBottom() {
+  return !turnDom.holds?.() && atHistoryEnd();
+}
+
+function atHistoryEnd() {
   const { scrollHeight, scrollTop, clientHeight } = historyEl;
   return shouldFollowScroll({ scrollHeight, scrollTop, clientHeight });
 }
@@ -875,7 +896,7 @@ function addEndBubble(text) {
   div.className = "bubble cancel";
   div.textContent = text;
   appendToHistory(div);
-  historyEl.scrollTop = historyEl.scrollHeight;
+  if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
 }
 
 // Everything a turn's end (completed, canceled, failed) closes: then its
@@ -888,7 +909,7 @@ function endTurnView(kind, endText = null) {
   if (endText) addEndBubble(endText);
   if (kept.length) {
     kept.forEach((el) => appendToHistory(el));
-    historyEl.scrollTop = historyEl.scrollHeight;
+    if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
   }
   // The question dies with its turn (the worker stopped waiting).
   if (pendingQuestion) resolveQuestionCard(pendingQuestion.id, { cancelled: true, reason: "turn ended" });
@@ -944,25 +965,29 @@ function setBubbleState(bubble, state) {
 
 function bubbleById(enqueuedId) {
   if (!enqueuedId) return null;
-  return [...historyEl.querySelectorAll(".bubble.user[data-enqueued-id]")].find(
+  return findInTurnRoots(".bubble.user[data-enqueued-id]").find(
     (el) => el.dataset.enqueuedId === enqueuedId,
   ) || null;
 }
 
 // This tab's oldest untagged echo, preferring one with the same text.
 function untaggedOwnBubble(prompt) {
-  const echoes = [...historyEl.querySelectorAll(".bubble.user[data-own]:not([data-enqueued-id])")];
+  const echoes = findInTurnRoots(".bubble.user[data-own]:not([data-enqueued-id])");
   const text = normalize(prompt || "");
   return echoes.find((el) => el.dataset.userContent === text) || echoes[0] || null;
 }
 
+// Returns the bubble of the turn a turn_started starts (the stage takes it
+// into its prompt line), else null.
 function applyPromptOps(event) {
   const ops = promptOps(event, { myId: clientId, known: (id) => !!bubbleById(id), unmatchedMerge });
   if (event.type === "input_merged") unmatchedMerge = false;
   if (event.type === "pending_input_merged") unmatchedMerge = false;
+  let started = null;
   for (const op of ops) {
     if (op.op === "add") {
-      makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images });
+      const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images });
+      if (op.state === "started") started = bubble;
     } else if (op.op === "tag") {
       if (bubbleById(op.enqueuedId)) continue;
       const echo = untaggedOwnBubble(op.prompt);
@@ -973,10 +998,11 @@ function applyPromptOps(event) {
       const bubble = bubbleById(op.enqueuedId) || untaggedOwnBubble(op.prompt);
       // A resync (a new worker woken by this page's send) re-rendered the
       // history and took the echo with it: draw the prompt again.
-      if (!bubble) makeUserBubble(op.prompt, { own: true, enqueuedId: op.enqueuedId, images: op.images });
+      if (!bubble) started = makeUserBubble(op.prompt, { own: true, enqueuedId: op.enqueuedId, images: op.images });
       else {
         if (op.enqueuedId) bubble.dataset.enqueuedId = op.enqueuedId;
         setBubbleState(bubble, null);
+        started = bubble;
       }
     } else if (op.op === "steer") {
       const bubble = bubbleById(op.enqueuedId);
@@ -984,6 +1010,7 @@ function applyPromptOps(event) {
       else unmatchedMerge = true;
     }
   }
+  return started;
 }
 
 // ── Idle recap ─────────────────────────────────────────────────────────────
@@ -1006,8 +1033,9 @@ function showRecap(text, turnsSince = 0) {
   details.appendChild(summary);
   details.appendChild(body);
   // A stale one sits where it was written, above the turns it doesn't cover.
+  // Never in the stage: a recap is between turns.
   const before = recapPlace([...historyEl.querySelectorAll(":scope > .bubble.user")], turnsSince);
-  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendToHistory(details)));
+  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurnTimingEl)));
 }
 
 // A turn started: the recap describes the chat before it.
@@ -1067,7 +1095,7 @@ function showHookNotice(data, { before = null } = {}) {
 
 function cardElement(id) {
   if (!id) return null;
-  return [...historyEl.querySelectorAll(".plugin-card")].find((el) => el.dataset.cardId === String(id)) || null;
+  return findInTurnRoots(".plugin-card").find((el) => el.dataset.cardId === String(id)) || null;
 }
 
 function drawCard(el, card) {
@@ -1175,7 +1203,7 @@ function refreshCardBodies() {
   }, 150);
 }
 
-historyEl.addEventListener("click", (e) => {
+function onCardAction(e) {
   const button = e.target.closest(".plugin-card .card-action");
   if (!button || !selected) return;
   const card = button.closest(".plugin-card");
@@ -1192,7 +1220,8 @@ historyEl.addEventListener("click", (e) => {
       err.classList.remove("hidden");
     })
     .finally(() => { button.disabled = false; });
-});
+}
+turnRoots().forEach((root) => root.addEventListener("click", onCardAction));
 
 function removeRecap() {
   historyEl.querySelectorAll(".bubble.recap").forEach((el) => el.remove());
@@ -1280,12 +1309,16 @@ function startLiveTurnTiming(startedAt = new Date().toISOString()) {
   liveTurnNote = "";
   liveTurnTimingEl = document.createElement("div");
   liveTurnTimingEl.className = "turn-timing live";
-  historyEl.appendChild(liveTurnTimingEl);
+  // The stage's status row while it holds the turn: the line moves into the
+  // history with it.
+  (turnDom.timingHost?.() || historyEl).appendChild(liveTurnTimingEl);
   updateLiveTiming();
   timingInterval = setInterval(updateLiveTiming, 1000);
 }
 
+// The stage takes a running turn's rows (its extras); else the history.
 function appendToHistory(el) {
+  if (turnDom.place?.(el)) return;
   appendAboveLiveTiming(historyEl, el, liveTurnTimingEl);
 }
 
@@ -1438,13 +1471,16 @@ const streamHandlers = {
   },
   turn_enqueued: (data) => applyPromptOps(data),
   turn_started: (data) => keepFollowing(historyEl, () => {
+    // A finished turn still in the stage goes first: the start op looks
+    // for a queued prompt among its rows.
+    turnDom.handOff?.({ immediate: true });
     markRecapStale();
-    applyPromptOps(data);
+    const promptBubble = applyPromptOps(data);
     setTurnRunning(true);
     setLiveStatus("running");
     clearTimingInterval();
     liveTurnTimingEl = null;
-    turnDom.turnStarted(data);
+    turnDom.turnStarted({ ...data, promptBubble });
     startLiveTurnTiming(data.started_at);
   }),
   turn_completed: async (data) => {
@@ -1569,7 +1605,11 @@ const streamHandlers = {
     resolveQuestionCard(data.id, { cancelled: true, reason: data.reason });
   },
   // One collected just as a turn started describes the chat before it.
-  recap_ready: (data) => { if (!turnRunning) showRecap(data.recap); },
+  recap_ready: (data) => {
+    // After the turn it covers, never above it.
+    turnDom.handOff?.({ immediate: true });
+    if (!turnRunning) showRecap(data.recap);
+  },
   guardrail_warning: (data) => showGuardrailWarning(data.message, data.label || "guardrails"),
   // In the turn view, a notice during a turn is a row of its current step.
   hook_notice: (data) => { if (!turnDom.notice(data)) showHookNotice(data); },
@@ -1898,9 +1938,12 @@ async function handleSendTurn() {
   }
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
+  // Sending moves a finished turn out of the stage at once (else the echo
+  // would land among its rows); into a running one it is a queued row there.
+  turnDom.handOff?.({ immediate: true });
   const sending = chips.slice();
   const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending });
-  historyEl.scrollTop = historyEl.scrollHeight;
+  if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
   if (!currentFirstPreview || currentFirstPreview==="—") {
     currentFirstPreview = normalize(prompt).slice(0,80) + (normalize(prompt).length>80?"…":"");
     updateInfoBar();
@@ -2008,7 +2051,7 @@ function drawCommandBubble(div, { label, line, text, busy = false, failed = fals
 
 function commandBubble(commandId) {
   if (!commandId) return null;
-  return [...historyEl.querySelectorAll(".bubble.command")].find((el) => el.dataset.commandId === String(commandId)) || null;
+  return findInTurnRoots(".bubble.command").find((el) => el.dataset.commandId === String(commandId)) || null;
 }
 
 function addNoteBubble(note) {
@@ -2131,7 +2174,17 @@ $("#newBtn").addEventListener("click", () => {
 // preselected while it is still offered (else the server's default). Hidden
 // until the list is in, and in a session (its model is in the info bar). A
 // host that failed is the picker's tooltip; a route that fails leaves the
-// picker hidden and the server's default in charge.
+// picker hidden and the server's default in charge. The search list itself
+// is model_picker.js'; a pick sends the focus to the message box.
+const modelPicker = createModelPicker({
+  button: modelPickEl,
+  panel: $("#modelPanel"),
+  input: $("#modelSearch"),
+  list: $("#modelList"),
+  composer: $("#composer"),
+  center: $("#center"),
+  onPick: () => promptEl.focus(),
+});
 async function loadModels() {
   let payload;
   try {
@@ -2139,26 +2192,16 @@ async function loadModels() {
   } catch (_) {
     return;
   }
-  const names = modelNames(payload);
-  if (!names.length) return;
   let stored = null;
   try { stored = localStorage.getItem(MODEL_KEY); } catch (_) {}
-  const chosen = pickModel(names, payload.default, stored || modelSelectEl.value);
-  modelSelectEl.innerHTML = names
-    .map((n) => `<option value="${escapeHtml(n)}"${n === chosen ? " selected" : ""}>${escapeHtml(n)}</option>`)
-    .join("");
+  if (!modelPicker.setModels(payload, stored)) return;
   modelPickEl.title = payload.warning ? `The model the new chat starts on · ${payload.warning}` : "The model the new chat starts on";
-  modelPickEl.dataset.value = chosen; // sizes the select to the chosen name (CSS)
   modelPickEl.hidden = false;
 }
-modelSelectEl.addEventListener("change", () => {
-  modelPickEl.dataset.value = modelSelectEl.value;
-  try { localStorage.setItem(MODEL_KEY, modelSelectEl.value); } catch (_) {}
-});
 // The picker's choice for a create request; nothing (the server's default)
 // while the list is not in.
 function chosenModel() {
-  return modelPickEl.hidden ? undefined : modelSelectEl.value || undefined;
+  return modelPickEl.hidden ? undefined : modelPicker.chosen() || undefined;
 }
 actionBtn.addEventListener("click", () => {
   if (!selected) handleCreate();
@@ -2250,7 +2293,8 @@ fitPrompt();
 const dockEl = $("#dock");
 const centerEl = $("#center");
 new ResizeObserver(() => {
-  const follow = isNearBottom();
+  // The stage's height too: a reader at the end stays there.
+  const follow = atHistoryEnd();
   centerEl.style.setProperty("--dock-h", `${dockEl.offsetHeight}px`);
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
 }).observe(dockEl);
@@ -2273,12 +2317,12 @@ composerEl.addEventListener("drop", (e) => {
   e.preventDefault();
   addImageFiles(files);
 });
-historyEl.addEventListener("click", (e) => {
+turnRoots().forEach((root) => root.addEventListener("click", (e) => {
   const img = e.target.closest("img.thumb");
   if (!img) return;
   lightboxEl.querySelector("img").src = img.src;
   lightboxEl.hidden = false;
-});
+}));
 lightboxEl.addEventListener("click", () => { lightboxEl.hidden = true; });
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !lightboxEl.hidden) lightboxEl.hidden = true;
@@ -2511,7 +2555,7 @@ function updateAnnotate() {
   const sel = window.getSelection();
   if (!selected || currentOwner === "tui" || !sel || sel.isCollapsed || !sel.rangeCount) return hideAnnotate();
   const range = sel.getRangeAt(0);
-  if (!historyEl.contains(range.startContainer)) return hideAnnotate();
+  if (!turnRoots().some((root) => root.contains(range.startContainer))) return hideAnnotate();
   const source = annotationSource(range.startContainer);
   // A running turn's narration box shows complete sentences and its thinking
   // is appended by delta; a selection in either is refused while the step is
@@ -2557,8 +2601,9 @@ function scheduleAnnotate() {
 }
 document.addEventListener("selectionchange", scheduleAnnotate);
 historyEl.addEventListener("scroll", scheduleAnnotate);
+turnDom.scrollEl?.addEventListener("scroll", scheduleAnnotate, true);
 window.addEventListener("resize", scheduleAnnotate);
-installCopy(historyEl);
+turnRoots().forEach((root) => installCopy(root));
 // Keep the selection when a button is pressed.
 annotateBar.addEventListener("mousedown", (e) => e.preventDefault());
 annotateBar.addEventListener("click", (e) => {
@@ -2595,19 +2640,19 @@ function tabInFront() {
   return document.visibilityState === "visible" && document.hasFocus();
 }
 
-function notifySupported() {
-  return typeof globalThis.Notification === "function";
-}
-
 function notifyWanted() {
   try { return localStorage.getItem(NOTIFY_KEY) === "1"; } catch (_) { return false; }
 }
 
-// "on" | "off" | "denied" | "unsupported"
+// "on" | "off" | "denied" | "unsupported" (notify.js)
 function notifyState() {
-  if (!notifySupported()) return "unsupported";
-  if (Notification.permission === "denied") return "denied";
-  return notifyWanted() && Notification.permission === "granted" ? "on" : "off";
+  const hasNotification = typeof globalThis.Notification === "function";
+  return bellState({
+    hasNotification,
+    secureContext: globalThis.isSecureContext !== false,
+    permission: hasNotification ? Notification.permission : "default",
+    wanted: notifyWanted(),
+  });
 }
 
 const NOTIFY_TITLES = {

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

@@ -349,7 +349,11 @@ export function fillActivityRow(el, row, sessionId) {
   const toolEl = el.querySelector(".activity-tool");
   if (toolEl) toolEl.textContent = toolName(row);
   const paramsEl = el.querySelector(".activity-params");
-  if (paramsEl) paramsEl.textContent = row.params || "";
+  if (paramsEl) {
+    // The title in place of the params; the full params line on hover.
+    paramsEl.textContent = row.title || row.params || "";
+    paramsEl.title = row.title && row.params ? row.params : "";
+  }
   const outEl = el.querySelector(".activity-output");
   if (outEl) {
     if (row.status === "running") {