samagotchi 0.33.0 → 0.35.0

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

@@ -9,15 +9,13 @@
 // A block that holds one gen with no thinking and no tool rows hides its
 // chrome (CSS :has), so a plain answer streams like today's bubble, and is
 // removed at the end: the answer bubble takes its place.
-import { toolName } from "./activity.js";
 import { leavesBlock } from "./card.js";
 import { copySourceAttr } from "./copy.js";
-import { commandBlockHtml, rowHover } from "./command_view.js";
-import { activityDiffHtml } from "./diff_view.js";
 import { escapeHtml, messageBodyHtml, noteHtml, normalize, sourceLabel, steerRowHtml } from "./format.js";
 import { thumbsHtml } from "./images.js";
 import { shouldFollowScroll } from "./scroll.js";
-import { emptyAnswerLine, hookNoticeLabel } from "./turn_events.js";
+import { hookNoticeLabel } from "./turn_events.js";
+import { emptyAnswerHtml, htmlElement, toolRowHtml, toolRowInnerHtml, userBubbleHtml } from "./turn_html.js";
 import { cancelLineHtml, formatDuration, turnGroups, turnTimingText } from "./timing.js";
 import { createSentenceFeed } from "./sentences.js";
 import { createTicker } from "./thinking_ticker.js";
@@ -25,81 +23,31 @@ import * as model from "./turn_model.js";
 import { createHold } from "./hold.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
 
-// A row's status (live, or a saved tool record's on reload): running,
-// error, stopped (a task_wait the user's Stop ended), blocked (a guardrail
-// denied it), else ok ("done").
-const NAMED_STATUSES = ["running", "error", "stopped", "blocked"];
-
-// A row's status as its parts: the mark's class (CSS draws the glyph), its
-// label (aria-label and title) and the word an exception shows after the
-// title (empty for done and running). Live and reload share it.
-export function statusParts(status) {
-  const named = NAMED_STATUSES.includes(status);
-  const cls = named ? status : "ok";
-  const label = named ? status : "done";
-  return { cls, label, word: cls === "ok" || cls === "running" ? "" : label };
+// The parts of a drawn tool row a user may have changed (the command's
+// raw toggle, an opened diff) or that never change once there (the
+// thumbs): a redraw keeps them as they are.
+const KEPT_PARTS = ["activity-command", "activity-diff", "thumbs"];
+
+const childWith = (el, cls) => [...el.children].find((c) => c.classList.contains(cls));
+
+// A live tool row drawn again from its activity row (status, title,
+// output): the reloaded row's markup (toolRowInnerHtml), the kept parts
+// and the stop-task button carried over. +html+ is that markup.
+function redrawRow(el, html) {
+  const fresh = htmlElement(`<div>${html}</div>`);
+  for (const cls of KEPT_PARTS) {
+    const old = childWith(el, cls);
+    const drawn = childWith(fresh, cls);
+    if (old && drawn) drawn.replaceWith(old);
+  }
+  const stop = childWith(el, "task-stop");
+  el.replaceChildren(...fresh.childNodes);
+  if (stop) rowAnchor(el).after(stop);
 }
 
-function statusMarkHtml({ cls, label }) {
-  return `<span class="activity-status ${cls}" role="img" aria-label="${label}" title="${label}"></span>`;
-}
-
-function statusWordHtml({ cls, word }) {
-  return word ? `<span class="activity-state ${cls}">${word}</span>` : "";
-}
-
-// A live tool row filled from its activity row (status, title, output).
-function fillActivityRow(el, row, sessionId) {
-  const parts = statusParts(row.status);
-  const statusEl = el.querySelector(".activity-status");
-  statusEl.className = `activity-status ${parts.cls}`;
-  statusEl.setAttribute("role", "img");
-  statusEl.setAttribute("aria-label", parts.label);
-  statusEl.title = parts.label;
-  // The exception's word after the title (reloadRowHtml's place); never
-  // beside a running task_wait's stop button, which needs "running".
-  let wordEl = el.querySelector(":scope > .activity-state");
-  if (!parts.word) wordEl?.remove();
-  else {
-    if (!wordEl) {
-      wordEl = document.createElement("span");
-      (el.querySelector(":scope > .activity-params") || el.querySelector(":scope > .activity-tool")).after(wordEl);
-    }
-    wordEl.className = `activity-state ${parts.cls}`;
-    wordEl.textContent = parts.word;
-  }
-  const toolEl = el.querySelector(".activity-tool");
-  if (toolEl) toolEl.textContent = toolName(row);
-  const paramsEl = el.querySelector(".activity-params");
-  if (paramsEl) {
-    // The title in place of the params; the full command (else the full
-    // params line) on hover.
-    paramsEl.textContent = row.title || row.params || "";
-    paramsEl.title = rowHover(row);
-  }
-  const outEl = el.querySelector(".activity-output");
-  // The call's full command, above its output (running too).
-  if (row.view?.command && !el.querySelector(".activity-command")) {
-    if (outEl) outEl.insertAdjacentHTML("beforebegin", commandBlockHtml(row.view, row.title));
-    else el.insertAdjacentHTML("beforeend", commandBlockHtml(row.view, row.title));
-  }
-  if (outEl) {
-    if (row.status === "running") {
-      outEl.style.display = "none";
-      outEl.textContent = "";
-      outEl.title = "";
-    } else {
-      // dispatch prefixes output with "[tool]"; strip that noise for display.
-      const full = (row.output || "").replace(/^\[[^\]]*\]\s*/, "");
-      outEl.title = full;
-      outEl.textContent = full.length > 300 ? `${full.slice(0, 300)}…` : full;
-      outEl.style.display = full ? "" : "none";
-    }
-  }
-  // The images a tool returned (a reloaded row has them too, reloadRowHtml).
-  if (row.images?.length && !el.querySelector(".thumbs")) el.insertAdjacentHTML("beforeend", thumbsHtml(sessionId, row.images));
-  // An edit/write's change, collapsed: "diff +3 −1".
-  if (row.diff && !el.querySelector(".activity-diff")) el.insertAdjacentHTML("beforeend", activityDiffHtml(row.diff));
+// Where a row's stop-task button goes: after its title (else its tool).
+function rowAnchor(el) {
+  return childWith(el, "activity-params") || childWith(el, "activity-tool");
 }
 
 // The container seams (the stage view composes this view, stage_view.js):
@@ -423,6 +371,11 @@ export function createTurnView({
     onChange();
   }
 
+  // A tool row is the reloaded row's markup (turn_html.js toolRowHtml),
+  // drawn again when an event changed it.
+  const rowHtml = new WeakMap();
+  const rowThumbs = (images) => thumbsHtml(sessionId(), images);
+
   function toolEvent(r) {
     apply(r);
     const entry = genEls.get(r.gen);
@@ -430,24 +383,18 @@ export function createTurnView({
     if (!r.gen.text) entry.text.textContent = "";
     const body = activityEl(r.gen);
     let el = entry.rows.get(r.row.key);
+    const html = toolRowInnerHtml(r.row, { thumbs: rowThumbs });
     if (!el) {
-      el = document.createElement("div");
-      el.className = "activity-row";
-      el.dataset.key = r.row.key;
-      for (const [tag, cls] of [["span", "activity-status"], ["span", "activity-tool"], ["span", "activity-params"], ["div", "activity-output"]]) {
-        const part = document.createElement(tag);
-        part.className = cls;
-        el.appendChild(part);
-      }
-      el.querySelector(".activity-output").style.display = "none";
+      el = htmlElement(toolRowHtml(r.row, { thumbs: rowThumbs }));
+      rowHtml.set(el, html);
       entry.rows.set(r.row.key, el);
       const stick = isNearBottom();
       body.appendChild(el);
-      fillActivityRow(el, r.row, sessionId());
       syncTaskStop(el, r.row);
       if (stick) follow();
     } else {
-      fillActivityRow(el, r.row, sessionId());
+      if (rowHtml.get(el) !== html) redrawRow(el, html);
+      rowHtml.set(el, html);
       syncTaskStop(el, r.row);
     }
     if (!entry.el.classList.contains("live")) writeClosedLabel(entry, r.gen);
@@ -469,7 +416,7 @@ export function createTurnView({
       return;
     }
     const command = () => taskCommand(turn?.gens, taskId);
-    el.querySelector(".activity-params").after(taskStopButton(taskStop, taskId, { command }));
+    rowAnchor(el).after(taskStopButton(taskStop, taskId, { command }));
   }
 
   // A hook's line (hook_notice) as a row of the current step, above the row
@@ -680,11 +627,11 @@ export function createTurnView({
     },
     toolStarted(data) {
       if (!turn) this.turnStarted({});
-      toolEvent(model.toolStarted(turn, data));
+      toolEvent(model.toolStarted(turn, data, Date.now()));
     },
     toolCompleted(data) {
       if (!turn) this.turnStarted({});
-      toolEvent(model.toolCompleted(turn, data));
+      toolEvent(model.toolCompleted(turn, data, Date.now()));
     },
     turnEnded,
     notice,
@@ -754,35 +701,6 @@ function setLabel(summary, gen) {
   summary.innerHTML = html;
 }
 
-// A reloaded tool row, the live row's markup (fillActivityRow): status, tool, params, the full command (an
-// execute/task_create's view), output (its "[tool]" tag dropped, 300 chars, the rest on hover), plus the call's
-// duration from its record.
-// Params, output and the call's images come from the saved messages'
-// parts; without them the row has the record's name, status and duration
-// only. +thumbs(images)+ draws the images, as the live row does.
-function reloadRowHtml(r, thumbs) {
-  const shown = r.title || r.params;
-  const hover = rowHover(r) ? ` title="${escapeHtml(rowHover(r))}"` : "";
-  const params = shown ? `<span class="activity-params"${hover}>${escapeHtml(shown)}</span>` : "";
-  const duration = formatDuration(r.duration_ms);
-  const full = String(r.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(r.status);
-  return `<div class="activity-row" data-key="${escapeHtml(r.key)}">${statusMarkHtml(status)}` +
-    `<span class="activity-tool">${escapeHtml(toolName(r))}</span>${params}${statusWordHtml(status)}${duration ? `<span class="activity-duration">${escapeHtml(duration)}</span>` : ""}` +
-    `${commandBlockHtml(r.view, r.title)}${output}` +
-    `${r.images?.length ? thumbs(r.images) : ""}${r.diff ? activityDiffHtml(r.diff) : ""}</div>`;
-}
-
-// The notice of a turn that ended with no answer: a muted row like the
-// loop's retry row, where the answer would be (live: promote()).
-export const EMPTY_ANSWER_CLASS = "bubble hook-notice empty-answer";
-function emptyAnswerHtml(item) {
-  return `<div class="${EMPTY_ANSWER_CLASS}">${escapeHtml(emptyAnswerLine(item))}</div>`;
-}
-
 // A reloaded history in the turn view (renderHistory's object path): per
 // turn the prompt, a collapsed block of its steps when it had any (texts,
 // and with the server's parts the thinking, params and output, from the
@@ -805,12 +723,8 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     const { body, renderedMarkdown } = messageBodyHtml(m);
     return `<div class="bubble output${renderedMarkdown ? " markdown" : ""}"${copySourceAttr(m, renderedMarkdown)}>${body}</div>${timing}`;
   };
-  // The live bubble's origin label (app.js makeUserBubble), for a line
-  // chi brought in: a delegate report.
-  const originLabelHtml = (m) => {
-    const label = sourceLabel(m?.source);
-    return label ? `<span class="origin-label">${escapeHtml(label)}</span>` : "";
-  };
+  // A user's line, labelled when chi brought it in (a delegate report).
+  const userHtml = (m, opts = {}) => userBubbleHtml(m, { label: sourceLabel(m?.source), thumbs: thumbs(m.images), ...opts });
   // The first text after a delegate report merged mid-turn, unless it is
   // the turn's answer (shown anyway).
   const reportReplyHtml = (i, group) => {
@@ -829,7 +743,7 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     // A context wake turn starts with its note.
     const parts = [prompt.role === "note"
       ? `<div class="bubble note">${noteHtml(prompt)}</div>`
-      : `<div class="bubble user"${copySourceAttr(prompt, false)}>${originLabelHtml(prompt)}<div class="user-message">${messageBodyHtml(prompt).body}${thumbs(prompt.images)}</div></div>`];
+      : userHtml(prompt)];
     const [only] = group.steps;
     const ended = group.answer !== null || group.emptyAnswer != null;
     const textless = only && (only.i === null || !String(items[only.i].content ?? ""));
@@ -850,7 +764,7 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
         const text = gen.text ? `<div class="gen-text">${escapeHtml(gen.text)}</div>` : "";
         // The steers the step answered first, where the live rows went.
         const steers = (group.steps[k].steers || []).map((i) => steerHtml(i, false)).join("");
-        const tools = gen.tools.length ? `<div class="activity-body">${gen.tools.map((r) => reloadRowHtml(r, thumbs)).join("")}</div>` : "";
+        const tools = gen.tools.length ? `<div class="activity-body">${gen.tools.map((r) => toolRowHtml(r, { thumbs })).join("")}</div>` : "";
         const failed = model.failedCount(gen.tools) ? " has-failed" : "";
         return `<details class="gen${failed}">${labelHtml(gen)}${steers}${thinking}${text}${tools}</details>`;
       });
@@ -866,7 +780,7 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     // small model tells its user about a report before its next tool call,
     // and that step's text would stay folded in the block.
     parts.push((group.merged || []).map((i) =>
-      `<div class="bubble user steered" data-user-state="steered"${items[i].step ? ` data-step="${Number(items[i].step)}"` : ""}${copySourceAttr(items[i], false)}>${originLabelHtml(items[i])}<div class="user-message">${messageBodyHtml(items[i]).body}${thumbs(items[i].images)}</div><span class="state-badge">steered</span></div>` +
+      userHtml(items[i], { state: "steered", step: items[i].step }) +
       reportReplyHtml(i, group)).join(""));
     // A turn that ended with no answer: chi's muted notice where the answer
     // would be, before the timing, as live.

data/lib/samagotchi/web/session_summary.rb

@@ -49,6 +49,10 @@ module Samagotchi
           muted_memory_names: Array(session.muted_memory_names),
           # The session that delegated this one (the `delegate` tool), else nil.
           parent_id: session.parent_id,
+          # Started by the delegate tool (Session#delegate?); a fork has a
+          # parent_id too but isn't one. The parent's children chip counts
+          # delegates only, as the TUI's segment and /children do.
+          delegate: session.delegate?,
           first_preview: first_preview_for(session),
           owner: owner&.kind,
           # The saved recap's first sentence, for the session card.