samagotchi 0.60.0 → 0.62.0

data/lib/samagotchi/web/app.rb

@@ -13,6 +13,7 @@ require_relative "../analytics_file"
 require_relative "../client_id"
 require_relative "../delivery"
 require_relative "../answer_tail"
+require_relative "../answer_refs"
 require_relative "../bridge_client"
 require_relative "../bridge/bounded_queue"
 require_relative "../bridge/card_store"
@@ -1695,7 +1696,8 @@ module Samagotchi
         source = if live
                    persisted.merge(live_metrics).merge(
                      "started_at" => persisted["started_at"] || live_metrics["started_at"],
-                     "turn_records" => merge_timing_records(persisted["turn_records"], live_metrics["turn_records"]),
+                     "turn_records" => merge_timing_records(without_running_turn(persisted["turn_records"], live_metrics),
+                                                            live_metrics["turn_records"]),
                      "tool_records" => merge_timing_records(persisted["tool_records"], live_metrics["tool_records"])
                    )
                  else
@@ -1776,6 +1778,18 @@ module Samagotchi
         AnalyticsFile.read(@session_class.session_dir(session_id, state_dir: default_state_dir)) || {}
       end
 
+      # The saved turn records without the one the live worker is running:
+      # its turn checkpoint saves that turn's record so far as a killed
+      # turn's (canceled, worker_stopped, SessionMetrics#persist's
+      # running_turn), which is only true once the worker is gone.
+      def without_running_turn(records, live_metrics)
+        active = live_metrics["active_turn"]
+        id = active.is_a?(Hash) ? active["id"] || active[:id] : nil
+        return records if id.nil?
+
+        Array(records).reject { |record| record.is_a?(Hash) && (record["id"] || record[:id]) == id }
+      end
+
       def merge_timing_records(persisted, live)
         (Array(persisted) + Array(live)).each_with_object({}) do |record, records|
           next unless record.is_a?(Hash)
@@ -1907,6 +1921,10 @@ module Samagotchi
             message[:display] = shown unless shown.strip.empty?
             rendered = message[:display] || stripped
             message[:html] = @markdown_renderer.render(rendered) if !rendered.empty? && @markdown_renderer.available?
+            # The refs after_turn hooks attached (AnswerRefs), checked again:
+            # a stored file is never trusted. Never raises.
+            refs = Samagotchi::AnswerRefs.for_display(m[:display_refs] || m["display_refs"])
+            message[:display_refs] = refs unless refs.empty?
           end
           message[:parts] = did if did
           filtered << message

data/lib/samagotchi/web/message_parts.rb

@@ -9,6 +9,7 @@ require_relative "../tools/builtins"
 require_relative "../image_store"
 require_relative "../llm_context_edit"
 require_relative "../token_usage"
+require_relative "../row_refs"
 
 module Samagotchi
   module Web
@@ -37,7 +38,8 @@ module Samagotchi
     # A plugin tool's params are what its live row showed (its preview),
     # saved with the result as tool_params (native: one per call, chat: one
     # per result); its label ("chrome: screenshot") likewise as tool_labels,
-    # the part's label:. The web server has no Engine and runs no plugins, so a
+    # the part's label:, and its row refs as tool_refs (RowRefs, checked
+    # again here), the part's refs:. The web server has no Engine and runs no plugins, so a
     # result without them (older sessions) falls back to the given
     # registry: the built-ins', and a plugin tool's arguments as key="value"
     # from the parsers' args:, as the live row shows them for a tool
@@ -106,11 +108,12 @@ module Samagotchi
         shown = saved_list(responses, :tool_params, calls.length)
         labels = saved_list(responses, :tool_labels, calls.length)
         diffs = saved_list(responses, :tool_diffs, calls.length)
+        refs = saved_list(responses, :tool_refs, calls.length)
         ids = saved_list(responses, :tool_ids, 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], cwd: cwd,
-                                                                     tool_id: ids[i], marks: marks)
+          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i], refs: refs[i],
+                                                                     cwd: cwd, tool_id: ids[i], marks: marks)
         end
       end
 
@@ -144,7 +147,8 @@ module Samagotchi
           response = by_id[field(raw, :id).to_s] || (responses[i] && !unique.call(ids[i]) ? 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), cwd: cwd,
+                                                          diff: field(response, :tool_diffs),
+                                                          refs: field(response, :tool_refs), cwd: cwd,
                                                           tool_id: Array(field(response, :tool_ids)).first, marks: marks)
         end
       end
@@ -224,10 +228,12 @@ 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. +cwd+: the session's working directory, for the title.
+      # tool_diffs. +refs+: a plugin tool's row refs, saved as tool_refs
+      # (RowRefs.for_display checks them again against +cwd+). +cwd+: the
+      # session's working directory, for the title.
       # +tool_id+: its output's ToolIds id, with its ✂ mark in +marks+.
-      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, cwd: nil, tool_id: nil,
-                    marks: {})
+      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, refs: nil, cwd: nil,
+                    tool_id: nil, marks: {})
         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 }
@@ -240,9 +246,11 @@ module Samagotchi
           part[:output] = output.length > OUTPUT_MAX ? output[0, OUTPUT_MAX] : output
           part[:output_truncated] = true if output.length > OUTPUT_MAX
         end
-        refs = Array(images).select { |ref| ref.is_a?(Hash) }
-        part[:images] = refs.map { |ref| ImageStore.symbolize(ref).slice(:file, :name, :width, :height) } unless refs.empty?
+        shots = Array(images).select { |image| image.is_a?(Hash) }
+        part[:images] = shots.map { |image| ImageStore.symbolize(image).slice(:file, :name, :width, :height) } unless shots.empty?
         part[:diff] = diff if diff.is_a?(Hash)
+        row_refs = RowRefs.for_display(refs, cwd: cwd)
+        part[:refs] = row_refs unless row_refs.empty?
         if tool_id
           part[:tool_id] = tool_id.to_s
           mark = mark_of(tool_id.to_s, marks, output)

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

@@ -45,8 +45,11 @@ export function newActivity() {
 //   ref: what the row traces to (the server's FileRef: {kind: "file",
 //     path, line?, end_line?}, the file a file tool touched), which
 //     refs.js makes the row's title and diff lines open.
+//   refs: a plugin tool's refs (the server's RowRefs: [{kind, target,
+//     label?, actions}]): the first on the row's title, the others in its
+//     menu (refs.js bindRowRefs).
 export const ACTIVITY_FIELDS = Object.freeze(["title", "called_as"]);
-export const EVENT_FIELDS = Object.freeze(["view", "ref"]);
+export const EVENT_FIELDS = Object.freeze(["view", "ref", "refs"]);
 const ROW_FIELDS = Object.freeze([...ACTIVITY_FIELDS, ...EVENT_FIELDS]);
 
 // The +fields+ of +source+ that are set, as an object (for a spread).

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

@@ -0,0 +1,217 @@
+// The refs a plugin attached to an answer (the message's display_refs,
+// traceable refs P5b): each {match, kind, target, label?, actions} is
+// paired with the answer's bubble, then bound to what it stands for
+// (refs.js bindRef), so its actions join the ref's menu.
+//
+// A bubble knows its message's refs through setAnswerRefs (a reload's
+// render, a turn-end read's re-render); pairAnswerRefs pairs them once per
+// setAnswerRefs. Three passes over all the refs, strongest evidence
+// first, so a weak text match of one ref never takes another's link:
+//   1. a link whose href is one of the ref's action URLs;
+//   2. a link whose text is the match;
+//   3. the match as a whole token inside one plain text node (not in pre,
+//      a link, inline code or another ref), or an inline code that is the
+//      match alone.
+// A ref binds every occurrence its first finding pass finds; a ref no
+// pass finds is dropped. A label that differs from the element's text is
+// its hover title (unless the element has one: a markdown link's).
+// The match and label are a plugin's text: they only ever go through
+// textContent, setAttribute and bindRef, never markup or a RegExp.
+
+import { COPY_SOURCE_ATTR, copySource, showsAnswer } from "./copy.js";
+import { bindRef, boundRef, httpUrl, refKindOk } from "./refs.js";
+
+// bubble → {refs, paired}. A WeakMap: a dropped bubble takes its refs with
+// it; the stage hand-off moves the bubble, so they move along.
+const ANSWER_REFS = new WeakMap();
+
+// Text never paired: code blocks, links (passes 1 and 2 are theirs), a ref
+// already made, inline code (only as the match alone).
+const SKIP = "pre, a, [data-ref-kind]";
+
+// A token boundary, as the `path:line` scanner's (ref_scan.js REF): not
+// after a path-ish character, not before a word character or a slash.
+const BEFORE = /[\w./@+~-]/;
+const AFTER = /[\w/]/;
+
+// +bubble+'s refs are +refs+ (a message's display_refs: entries with a
+// match and a kind bindRef binds); a non-array or one without a usable
+// entry clears them. They pair on the next
+// pairAnswerRefs, even when the same ones were paired before.
+export function setAnswerRefs(bubble, refs) {
+  if (!bubble) return;
+  const list = (Array.isArray(refs) ? refs : []).filter(
+    (ref) => ref && typeof ref === "object" && refKindOk(ref.kind) && typeof ref.match === "string" && ref.match.trim(),
+  );
+  if (list.length) ANSWER_REFS.set(bubble, { refs: list, paired: false });
+  else ANSWER_REFS.delete(bubble);
+}
+
+// +bubble+'s refs (setAnswerRefs'), or null.
+export function answerRefsOf(bubble) {
+  return ANSWER_REFS.get(bubble)?.refs || null;
+}
+
+// The turn's final answer on its bubble (a turn-end read's +messages+):
+// the last assistant message with text, its bubble the last of +bubbles+
+// that shows it (copy.js showsAnswer, with +normalize+). Its rendered html
+// replaces the bubble's when it has one (not with web.markdown off or no
+// renderer: the text stays); its refs are the bubble's either way (a
+// later read without any clears them). The bubble, or null.
+export function applyFinalAnswer(messages, bubbles, normalize) {
+  const message = [...(Array.isArray(messages) ? messages : [])].reverse().find(
+    (item) => item?.role === "assistant" && (typeof item.html === "string" || String(item.content ?? "").trim()),
+  );
+  const bubble = message && [...bubbles].reverse().find((item) => showsAnswer(item, message, normalize));
+  if (!bubble) return null;
+  if (typeof message.html === "string") {
+    bubble.classList.add("markdown");
+    bubble.setAttribute(COPY_SOURCE_ATTR, copySource(message));
+    bubble.innerHTML = message.html;
+  }
+  setAnswerRefs(bubble, message.display_refs);
+  return bubble;
+}
+
+// Pairs +bubble+'s refs with its links and text and binds them (once per
+// setAnswerRefs; again a no-op).
+export function pairAnswerRefs(bubble) {
+  const entry = bubble && ANSWER_REFS.get(bubble);
+  if (!entry || entry.paired) return;
+  entry.paired = true;
+  let left = entry.refs;
+  left = left.filter((ref) => !pairByHref(bubble, ref));
+  left = left.filter((ref) => !pairByLinkText(bubble, ref));
+  pairByText(bubble, left);
+}
+
+// The links a ref may take: not inside a code block or another ref, not
+// bound by a plugin's ref already (a link the regex scanner adopted has
+// attributes only: it may be bound).
+function freeLinks(bubble) {
+  return [...bubble.querySelectorAll("a[href]")].filter((a) => !boundRef(a) && !a.parentElement?.closest("pre, [data-ref-kind]"));
+}
+
+// Pass 1: true when +ref+ took a link to one of its action URLs.
+function pairByHref(bubble, ref) {
+  const urls = new Set((Array.isArray(ref.actions) ? ref.actions : []).map((action) => httpUrl(action?.url)).filter(Boolean));
+  if (!urls.size) return false;
+  const links = freeLinks(bubble).filter((a) => urls.has(httpUrl(a.getAttribute("href"))));
+  return bindAll(links, ref);
+}
+
+// Pass 2: true when +ref+ took a link whose text is its match. The link
+// goes somewhere the ref doesn't name (the model's URL): the ref's actions
+// join its menu, but its label isn't the link's title.
+function pairByLinkText(bubble, ref) {
+  const match = ref.match.trim();
+  return bindAll(freeLinks(bubble).filter((a) => a.textContent.trim() === match), ref, { label: false });
+}
+
+// Pass 3, for all the +refs+ left at once: a ref the path:line scan made
+// (attributes only, no plugin data) whose text is a match is bound in
+// place (the scan ran first on a bubble that wasn't re-rendered: an answer
+// without html); an inline code that is a match alone is wrapped whole;
+// then each text node's hits (refs in list order, a hit overlapping an
+// earlier one dropped) are wrapped in one go.
+function pairByText(bubble, refs) {
+  if (!refs.length) return;
+  const doc = bubble.ownerDocument;
+  const matching = (el) => {
+    const text = el.textContent.trim();
+    return refs.find((candidate) => candidate.match.trim() === text);
+  };
+  for (const scanned of [...bubble.querySelectorAll("[data-ref-kind]:not(a)")]) {
+    if (boundRef(scanned) || scanned.parentElement?.closest("pre, a, [data-ref-kind]")) continue;
+    const ref = matching(scanned);
+    if (ref) bindAll([scanned], ref);
+  }
+  for (const code of [...bubble.querySelectorAll("code")]) {
+    if (code.closest(SKIP)) continue;
+    const ref = matching(code);
+    if (!ref) continue;
+    const span = refSpan(doc, ref);
+    if (!span) continue;
+    code.replaceWith(span);
+    span.append(code);
+    labelOn(span, ref);
+  }
+  const walker = doc.createTreeWalker(bubble, 4 /* NodeFilter.SHOW_TEXT */);
+  const nodes = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const skip = node.parentElement?.closest(`${SKIP}, code`);
+    if (!skip || !bubble.contains(skip)) nodes.push(node);
+  }
+  const hits = new Map();
+  for (const ref of refs) {
+    const match = ref.match.trim();
+    for (const node of nodes) {
+      for (const [start, end] of tokenHits(node.data, match)) {
+        const list = hits.get(node) || [];
+        if (list.some(([s, e]) => start < e && end > s)) continue;
+        list.push([start, end, ref]);
+        hits.set(node, list);
+      }
+    }
+  }
+  for (const [node, list] of hits) wrap(node, list.sort((a, b) => a[0] - b[0]));
+}
+
+// [start, end] of each whole-token +match+ in +text+ (indexOf: the match
+// is a plugin's text, never a pattern).
+function tokenHits(text, match) {
+  const found = [];
+  for (let at = text.indexOf(match); at >= 0; at = text.indexOf(match, at + 1)) {
+    const end = at + match.length;
+    if (at > 0 && BEFORE.test(text[at - 1])) continue;
+    if (end < text.length && AFTER.test(text[end])) continue;
+    found.push([at, end]);
+    at = end - 1;
+  }
+  return found;
+}
+
+function wrap(node, hits) {
+  const doc = node.ownerDocument;
+  const frag = doc.createDocumentFragment();
+  let pos = 0;
+  for (const [start, end, ref] of hits) {
+    const span = refSpan(doc, ref);
+    if (!span) continue;
+    if (start > pos) frag.append(node.data.slice(pos, start));
+    span.textContent = node.data.slice(start, end);
+    labelOn(span, ref);
+    frag.append(span);
+    pos = end;
+  }
+  if (!pos) return;
+  if (pos < node.data.length) frag.append(node.data.slice(pos));
+  node.replaceWith(frag);
+}
+
+// A span bound to +ref+, or null when bindRef refuses it (a bad kind).
+function refSpan(doc, ref) {
+  const span = doc.createElement("span");
+  bindRef(span, ref);
+  return boundRef(span) ? span : null;
+}
+
+// Binds each of +els+ to +ref+; true when one took it.
+function bindAll(els, ref, { label = true } = {}) {
+  let bound = false;
+  for (const el of els) {
+    bindRef(el, ref);
+    if (!boundRef(el)) continue;
+    if (label) labelOn(el, ref);
+    bound = true;
+  }
+  return bound;
+}
+
+// The ref's label as the element's hover title, when it says more than
+// the element's text and the element has no title of its own.
+function labelOn(el, ref) {
+  const label = typeof ref.label === "string" ? ref.label.trim() : "";
+  if (!label || label === el.textContent.trim() || el.hasAttribute("title")) return;
+  el.setAttribute("title", label);
+}

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

@@ -38,15 +38,15 @@ import { emptySessionState, sessionStateFrom } from "./session_state.js";
 import { createModelPicker } from "./model_picker.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
 import { escapeHtml, noteHtml, normalize, steerRowHtml, firstPreview, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
-import { createTurnView, turnHistoryNodes } from "./turn_view.js";
+import { createTurnView, stepText, turnHistoryNodes } from "./turn_view.js";
 import { BADGES, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.js";
-import { createStageView } from "./stage_view.js";
+import { createStageView, FOLD_MS } from "./stage_view.js";
 import { CONTINUE_OPENER, isOpener, chainDate, chainNeighbours, continueRefusal, continuedText, openChildrenHtml } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
 import { createAnnotateBar } from "./annotate_bar.js";
-import { COPY_SOURCE_ATTR, copySource, copyText, installCopy, showsAnswer } from "./copy.js";
+import { copyText, installCopy } from "./copy.js";
 import { ctxBarText, ctxBarTip, lastSpeedText, speedText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
 import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, splitSnapshotCards, turnNoticePlace } from "./card.js";
@@ -55,7 +55,7 @@ import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { allScopeHref, projectScopeHref, scopeDir } from "./scope.js";
-import { shouldFollowScroll, keepFollowing } from "./scroll.js";
+import { easeScrollTo, FOLLOW_MS, shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
 import { applySessionEvent, flattenFamilies, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
@@ -65,6 +65,7 @@ import {
   appendAboveLiveTiming, formatDuration, mergeTiming, normalizeTiming, sessionDurationNow, STOPPED_LINE_CLASS,
 } from "./timing.js";
 import { createLiveTurn } from "./live_turn.js";
+import { applyFinalAnswer, pairAnswerRefs } from "./answer_refs.js";
 import { installRefClicks } from "./refs.js";
 import { linkRefs, touchedFiles } from "./ref_scan.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
@@ -263,6 +264,7 @@ const questionCards = createQuestionCards({
   isNearBottom: () => isNearBottom(),
   scrollToEnd: () => { historyEl.scrollTop = historyEl.scrollHeight; },
   removeHintIfEmpty: () => removeHintIfEmpty(),
+  askingText: () => turnDom.askingText(),
 });
 // The event id (or, from an older worker, the event_seq) the selected session
 // was rendered at (null: no live worker then), where a stream opened later
@@ -904,30 +906,26 @@ async function readTurnEnd() {
   } catch(_){}
 }
 
-// The turn's answer as its rendered markdown, once it is final (the
-// turn-end read, an answer_display re-read); then its refs.
+// The turn's answer as its rendered markdown and with its plugin refs,
+// once it is final (the turn-end read, an answer_display re-read:
+// answer_refs.js applyFinalAnswer); then the refs.
 function applyFinalMarkdown(messages) {
-  const message = [...messages].reverse().find(
-    (item) => item?.role === "assistant" && typeof item.html === "string",
-  );
-  const bubble = message && findInTurnRoots(".bubble.output")
-    .reverse()
-    .find((item) => showsAnswer(item, message, normalize));
-  if (bubble) {
-    bubble.classList.add("markdown");
-    bubble.setAttribute(COPY_SOURCE_ATTR, copySource(message));
-    bubble.innerHTML = message.html;
-  }
+  applyFinalAnswer(messages, findInTurnRoots(".bubble.output"), normalize);
   linkTextRefs();
 }
 
-// The `path:line` refs in the answers' and closed steps' texts that name a
-// file the session's rows (and cards) touched, on this page (ref_scan.js).
-// Not mid-stream: at a turn's end and after a reload's render. A ref
-// already made stays as it is.
+// The refs on the answers' and closed steps' texts, on this page: first
+// each answer's own (a plugin's, answer_refs.js), then the `path:line`
+// refs that name a file the session's rows (and cards) touched
+// (ref_scan.js), which leave a plugin's alone. Not mid-stream: at a
+// turn's end and after a reload's render. A ref already made stays as it
+// is.
 function linkTextRefs() {
   const roots = turnRoots();
   const touched = touchedFiles(roots);
+  for (const root of roots) {
+    for (const el of root.querySelectorAll(".bubble.output")) pairAnswerRefs(el);
+  }
   if (!touched.size) return;
   for (const root of roots) {
     for (const el of root.querySelectorAll(".bubble.output, .gen:not(.live) > .gen-text")) linkRefs(el, touched, current.dir);
@@ -1104,6 +1102,7 @@ function showRecap(text, turnsSince = 0) {
   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.
+  turnDom.settleFold?.();
   const before = recapPlace(turnPromptBubbles(), turnsSince);
   keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurn.timing.el)));
 }
@@ -1302,12 +1301,15 @@ function turnAnswerEl(turnEls) {
 function placeResolvedQuestion(entry, before) {
   const pq = entry.pending_question;
   if (!pq?.id || !(entry.answer || entry.cancelled)) return;
-  questionCards.renderQuestion(pq);
+  const turnEls = reloadedTurnEls(before);
+  const asked = Number(entry.iteration) || 1;
+  // The reply that asked: its step's text in the reloaded block (the card
+  // keeps it, as live), never the running turn's.
+  const said = stepText(turnEls.find((el) => el.matches(".turn-work")), asked);
+  questionCards.renderQuestion(pq, { said });
   const card = questionCards.questionCard();
   if (!card || card.dataset.qid !== String(pq.id)) return;
   questionCards.resolveQuestion(pq.id, { answer: entry.answer || null, cancelled: !!entry.cancelled, reason: entry.reason || "" });
-  const turnEls = reloadedTurnEls(before);
-  const asked = Number(entry.iteration) || 1;
   const later = turnEls.find((el) => el.matches(".bubble.user.steered") && Number(el.dataset.step) > asked);
   historyEl.insertBefore(card, later || turnAnswerEl(turnEls) || before);
 }
@@ -1512,6 +1514,7 @@ function currentSessionDuration() {
 
 // The stage takes a running turn's rows (its extras); else the history.
 function appendToHistory(el) {
+  // (The stage's place first moves a turn still sliding away into the history.)
   if (turnDom.place?.(el)) return;
   appendAboveLiveTiming(historyEl, el, liveTurn.timing.el);
 }
@@ -2042,15 +2045,51 @@ fitPrompt();
 // The card floats over the history: keep the history's bottom padding at the
 // card's height, and stay pinned to the end if the reader was there, since the
 // card grows (text, chips, Cancel, a wrapping footer) under a reader at the end.
+// In the stage view the stage floats above the card, out of the dock's flow
+// (stage_view.js): the reserve counts it too, with its 10 px gap, while it
+// shows.
 const dockEl = $("#dock");
 const centerEl = $("#center");
-new ResizeObserver(() => {
-  // 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;
+// A leaving stage (the hand-off's slide) no longer counts: the reserve eases
+// down over the slide (index.html, #center.reserve-easing).
+const stageEl = view === "stage" ? turnDom.root : null;
+const STAGE_GAP = 10;
+function dockReserve() {
+  const shown = stageEl && !stageEl.hidden && !stageEl.classList.contains("leaving");
+  return dockEl.offsetHeight + (shown ? stageEl.offsetHeight + STAGE_GAP : 0);
+}
+const historyEnd = () => historyEl.scrollHeight - historyEl.clientHeight;
+// A reader at the end stays there when the reserve changes: at once for the
+// composer card, eased for the stage (+fromStage+: it appeared, grew or
+// leaves), so the history glides rather than jumps. An eased follow running
+// counts as at the end.
+function updateReserve({ fromStage = false } = {}) {
+  const follow = atHistoryEnd() || historyEl.dataset.following !== undefined;
+  const leaving = !!stageEl?.classList.contains("leaving");
+  centerEl.classList.toggle("reserve-easing", leaving);
+  const reserve = `${dockReserve()}px`;
+  const changed = centerEl.style.getPropertyValue("--dock-h") !== reserve;
+  if (changed) centerEl.style.setProperty("--dock-h", reserve);
+  if (changed && follow) {
+    if (fromStage) easeScrollTo(historyEl, historyEnd, { ms: leaving ? FOLD_MS : FOLLOW_MS, reduce: matchMedia("(prefers-reduced-motion: reduce)").matches });
+    else if (historyEl.dataset.following === undefined) historyEl.scrollTop = historyEl.scrollHeight;
+  }
   placeToast();
-}).observe(dockEl);
+}
+const dockObserver = new ResizeObserver((entries) => updateReserve({ fromStage: entries.some((e) => e.target === stageEl) }));
+dockObserver.observe(dockEl);
+if (stageEl) {
+  dockObserver.observe(stageEl);
+  // Only showing, hiding and leaving change the reserve (not the stage's
+  // other classes: waiting, in-use…).
+  let stageShown = "";
+  new MutationObserver(() => {
+    const shown = `${stageEl.hidden}|${stageEl.classList.contains("leaving")}`;
+    if (shown === stageShown) return;
+    stageShown = shown;
+    updateReserve({ fromStage: true });
+  }).observe(stageEl, { attributes: true, attributeFilter: ["class", "hidden"] });
+}
 window.addEventListener("resize", () => placeToast());
 
 promptEl.addEventListener("paste", (e) => {
@@ -2263,14 +2302,16 @@ async function setArchived(id, archive, { undo = true } = {}) {
 
 // The toast sits above the session's composer card (measured: it grows with
 // a wrapping footer or a taller box), so it never covers the card's
-// controls; with no card in sight (the start page, all sessions) the CSS's
-// 24 px from the bottom.
+// controls, and above the stage while it shows; with no card in sight (the
+// start page, all sessions) the CSS's 24 px from the bottom.
 function placeToast() {
   const gap = 12;
   const dock = document.getElementById("dock");
   const r = dock.getBoundingClientRect();
   const over = document.body.classList.contains("has-session") && r.height > 0;
-  const bottom = over ? `${Math.round(window.innerHeight - r.top + gap)}px` : "";
+  const stage = document.getElementById("turnStage");
+  const top = stage && !stage.hidden ? Math.min(r.top, stage.getBoundingClientRect().top) : r.top;
+  const bottom = over ? `${Math.round(window.innerHeight - top + gap)}px` : "";
   const root = document.documentElement.style;
   if (root.getPropertyValue("--toast-bottom") !== bottom) {
     if (bottom) root.setProperty("--toast-bottom", bottom);

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

@@ -4,10 +4,13 @@
 // through `continues`, forward through the session whose `continues` names
 // this one. The lists fold a chain into its latest listed link's card (a
 // `day N` chip, its earlier links in a popover); the session page links the
-// previous and the next link. Pure: app.js places the markup and binds it.
+// previous and the next link. Pure: lists_view.js places the chip and rows
+// (lit-html templates) and app.js the toast's markup, and they bind them.
 import { escapeHtml, normalize, previewForCard, relativeTime } from "./format.js";
 import { stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { waitingOn } from "./notify.js";
+import { archivedBadge, rowBadgesTemplate, rowDotTemplate } from "./families_view.js";
+import { html, nothing } from "./vendor/lit-html.js";
 
 // The opener a new link's composer is filled with (never sent: the user
 // edits or sends it). The same for every chain.
@@ -148,10 +151,11 @@ export function chainOthers(f) {
 // The chip in a chain's card: "day 3" (the head's place; "day 2 of 3" when
 // later links aren't listed), with a live dot / "waiting" when one of the
 // other links has a worker / waits on the user (typing in an archived link
-// brings it back, but it stays folded here). "" for a family in no chain.
+// brings it back, but it stays folded here). nothing for a family in no
+// chain. A lit-html template, as families_view.js's chip.
 // @param open whether the list is open (aria-expanded)
-export function chainChipHtml(f, { open = false } = {}) {
-  if (!f?.chain) return "";
+export function chainChipTemplate(f, { open = false } = {}) {
+  if (!f?.chain) return nothing;
   const { links, at } = f.chain;
   const others = chainOthers(f);
   const live = others.filter(({ session: s }) => s.owner === "worker").length;
@@ -162,9 +166,10 @@ export function chainChipHtml(f, { open = false } = {}) {
   const later = links.length - 1 - at;
   const parts = [earlier ? `${earlier} earlier ${earlier === 1 ? "link" : "links"}` : "", later ? `${later} later` : ""].filter(Boolean);
   const title = `Session chain: day ${day} of ${links.length} (${parts.join(", ")}); open the list`;
-  const liveHtml = live ? `<span class="cc-live"> · <span class="live-dot" aria-hidden="true"></span>${live} live</span>` : "";
-  const waitingHtml = waiting ? ` · <span class="cc-waiting">${waiting} waiting</span>` : "";
-  return `<button type="button" class="chain-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(title)}"><span class="cc-arrow" aria-hidden="true">↩</span>${escapeHtml(text)}${liveHtml}${waitingHtml}</button>`;
+  const liveT = live ? html`<span class="cc-live"> · <span class="live-dot" aria-hidden="true"></span>${live} live</span>` : nothing;
+  const waitingT = waiting ? html` · <span class="cc-waiting">${waiting} waiting</span>` : nothing;
+  return html`<button type="button" class=${`chain-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
+    title=${title}><span class="cc-arrow" aria-hidden="true">↩</span>${text}${liveT}${waitingT}</button>`;
 }
 
 // The chain's list (the chip's popover): one row per other link, newest
@@ -172,7 +177,7 @@ export function chainChipHtml(f, { open = false } = {}) {
 // its preview), the waiting / stopped badge, archived. A row's click opens
 // that link (families_view.js's popover binds .family-row[data-id]).
 // @param activeId the open session's id (its row is .active)
-export function chainRowsHtml(f, { activeId = null, now = Date.now() } = {}) {
+export function chainRowsTemplate(f, { activeId = null, now = Date.now() } = {}) {
   const byId = new Map((f?.chain?.links || []).map((s) => [s.id, s]));
   const rows = chainOthers(f).map(({ session: s, day }) => {
     const cls = ["family-row", "chain-row"];
@@ -180,22 +185,15 @@ export function chainRowsHtml(f, { activeId = null, now = Date.now() } = {}) {
     if (s.archived) cls.push("archived");
     const waiting = waitingBadge(s, { inFamily: true });
     const stopped = waiting ? null : stoppedBadge(s);
-    const dotWord = waiting ? waiting.title : s.status;
     const date = chainDate(s.created_at);
     const ago = relativeTime(s.updated_at || s.created_at || "", now);
-    const parts = [
-      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
-      `<span class="cr-day">day ${day}</span>`,
-      date ? `<span class="cr-date">${escapeHtml(date)}</span>` : "",
-      `<span class="fr-preview">${escapeHtml(s.recap || chainTitle(s, byId))}</span>`,
-      waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "",
-      stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "",
-      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
-    ].join("");
     const tip = `${s.id} · ${s.status || ""}${ago ? ` · updated ${ago}` : ""}`;
-    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:1" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(tip)}">${parts}</button></div>`;
+    return html`<div class=${cls.join(" ")} data-id=${s.id} style=${"--depth:1"} role=${"listitem"}><button type="button" class="fr-open"
+      title=${tip}>${rowDotTemplate(s, waiting)}<span class="cr-day">day ${day}</span>${
+      date ? html`<span class="cr-date">${date}</span>` : nothing}<span class="fr-preview">${s.recap || chainTitle(s, byId)}</span>${
+      rowBadgesTemplate(waiting, stopped)}${s.archived ? archivedBadge : nothing}</button></div>`;
   });
-  return `<div class="family-rows chain-rows" role="list">${rows.join("")}</div>`;
+  return html`<div class="family-rows chain-rows" role="list">${rows}</div>`;
 }
 
 // What the page does with a refused continue (POST /api/sessions