samagotchi 0.133.0 → 0.134.0

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

@@ -0,0 +1,262 @@
+// Folding a long answer by hand (per viewer). A completed answer bubble
+// longer than FOLD_LINES lines or FOLD_CHARS characters of its message text
+// gets a fold row: a sibling just before the bubble, never inside it (the
+// bubble's copy text, its claims and a live end's innerHTML stay the
+// bubble's own). Folded, the bubble has the class `.folded` (CSS hides it;
+// no inline style: hold.js strips that) and the row reads its first line
+// and its size, "‹first line› · N lines ▸"; unfolded, the row stays as a
+// slim "▾ N lines" header.
+//
+// Which answers are folded is this browser's choice (localStorage through
+// storage.js): one key per session holding the folded answers' keys, the
+// last FOLD_KEEP of them. An answer's key is its turn's id
+// (data-answer-turn), a delegate report's reply its own (data-reply-key);
+// a bubble with neither (an answer before any prompt, a canceled turn's
+// partial) gets no row. The keys of sessions gone from the session list go
+// when the list loads (sweepAnswerFolds).
+//
+// One observer on #history decorates every path that fills it (a reload's
+// render, a live turn's end, the stage's hand-off), as copy.js does. A jump
+// into a folded answer unfolds it (history_reveal.js); the row follows the
+// bubble's class.
+//
+// A module of its own: static JS is cached at unversioned URLs, and a new
+// export on an old module would blank the page.
+import { bubbleCopyText } from "./copy.js";
+import { clip } from "./format.js";
+import { readStored, removeStored, storedKeys, writeStored } from "./storage.js";
+
+// The fold threshold: an answer longer than either gets a fold row.
+export const FOLD_LINES = 25;
+export const FOLD_CHARS = 2000;
+// How many folded answers a session's key keeps (the oldest go first).
+export const FOLD_KEEP = 200;
+export const FOLD_PREFIX = "chi_answer_fold:";
+// A folded row's label, at most this long (CSS cuts it to the row's width).
+const LABEL_CHARS = 160;
+
+const ROW_CLASS = "answer-fold";
+const ANSWERS = ".bubble.output";
+// Not done yet: still streaming, or held by the answer pop (hold.js).
+const UNFINISHED = ".streaming, .boxed";
+
+// +text+'s lines (a trailing newline ends the last one, it adds none).
+export function lineCount(text) {
+  const s = String(text ?? "").replace(/\s+$/, "");
+  return s ? s.split("\n").length : 0;
+}
+
+// Whether an answer of +text+ gets a fold row.
+export function foldable(text) {
+  const s = String(text ?? "");
+  return lineCount(s) > FOLD_LINES || s.length > FOLD_CHARS;
+}
+
+// A markdown line as plain words: no heading marks, list or quote lead, no
+// emphasis or code ticks.
+function plainLine(line) {
+  return line
+    .replace(/^\s*(?:#{1,6}\s+|>\s*|[-*+]\s+|\d+[.)]\s+)/, "")
+    .replace(/(\*\*|__|`)/g, "")
+    .trim();
+}
+
+// A folded answer's label: the first line of what a hook presented in its
+// place (+display+: the text is that), else its first markdown heading,
+// else its first text line (a code fence's marks skipped); one line.
+export function foldLabel(text, { display = false } = {}) {
+  const lines = String(text ?? "").replace(/\r\n?/g, "\n").split("\n");
+  const texts = lines.filter((l) => l.trim() && !/^\s*(```|~~~)/.test(l));
+  const heading = display ? null : texts.find((l) => /^\s{0,3}#{1,6}\s+\S/.test(l));
+  return clip(plainLine(heading ?? texts[0] ?? ""), LABEL_CHARS);
+}
+
+// The row's words: folded, the label and the size; unfolded, the size.
+export function foldRowText(text, { display = false, folded = true } = {}) {
+  const n = lineCount(text);
+  const size = `${n} line${n === 1 ? "" : "s"}`;
+  if (!folded) return { label: "", size };
+  const label = foldLabel(text, { display });
+  return { label, size: label ? `\u00a0\u00b7 ${size}` : size };
+}
+
+// ---- The stored choice ----
+
+export function foldStoreKey(sessionId) {
+  return sessionId ? `${FOLD_PREFIX}${sessionId}` : null;
+}
+
+function readEntry(key) {
+  try {
+    const entry = JSON.parse(readStored(key, "null"));
+    if (!entry || !Array.isArray(entry.turns)) return null;
+    return { root: typeof entry.root === "string" ? entry.root : null, turns: entry.turns.filter((t) => typeof t === "string") };
+  } catch (_) {
+    return null;
+  }
+}
+
+// The session's folded answers' keys, oldest first; [] when none or they
+// can't be read.
+export function readFolded(sessionId) {
+  const key = foldStoreKey(sessionId);
+  return (key && readEntry(key)?.turns) || [];
+}
+
+// +list+ with +answerKey+ folded (moved to the end) or not, at most
+// FOLD_KEEP long. Pure.
+export function withFold(list, answerKey, folded) {
+  const rest = list.filter((k) => k !== answerKey);
+  return (folded ? [...rest, answerKey] : rest).slice(-FOLD_KEEP);
+}
+
+// Saves +answerKey+ folded or not for +sessionId+. +root+: the session's
+// project root, kept for the sweep of a project's list.
+export function writeFold(sessionId, answerKey, folded, { root = null } = {}) {
+  const key = foldStoreKey(sessionId);
+  if (!key || !answerKey) return;
+  const turns = withFold(readFolded(sessionId), answerKey, folded);
+  if (!turns.length) removeStored(key);
+  else writeStored(key, JSON.stringify({ root, turns }));
+}
+
+// The session list loaded (+sessions+, each {id, project_root}): the fold
+// keys of sessions not in it go. A project's list (+scoped+) only knows its
+// own project's sessions, so there a key goes only when its project root is
+// one the list shows; an unreadable key goes.
+export function sweepAnswerFolds(sessions, { scoped = false } = {}) {
+  const list = Array.isArray(sessions) ? sessions : [];
+  const ids = new Set(list.map((s) => s?.id).filter(Boolean));
+  const roots = new Set(list.map((s) => s?.project_root).filter(Boolean));
+  for (const key of storedKeys(FOLD_PREFIX)) {
+    if (ids.has(key.slice(FOLD_PREFIX.length))) continue;
+    const entry = readEntry(key);
+    if (!entry || !scoped || (entry.root && roots.has(entry.root))) removeStored(key);
+  }
+}
+
+// ---- The rows ----
+
+// The key an answer bubble is folded by, or null.
+export function answerKey(bubble) {
+  return bubble?.getAttribute?.("data-answer-turn") || bubble?.getAttribute?.("data-reply-key") || null;
+}
+
+function answerText(bubble) {
+  return bubbleCopyText(bubble);
+}
+
+function drawRow(row, bubble) {
+  const folded = bubble.classList.contains("folded");
+  const text = answerText(bubble);
+  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), folded });
+  row.setAttribute("aria-expanded", folded ? "false" : "true");
+  row.title = folded ? "Show the answer" : "Fold the answer";
+  row.classList.toggle("folded", folded);
+  const [labelEl, sizeEl] = row.children;
+  if (labelEl.textContent !== label) labelEl.textContent = label;
+  if (sizeEl.textContent !== size) sizeEl.textContent = size;
+}
+
+function makeRow(doc) {
+  const row = doc.createElement("button");
+  row.type = "button";
+  row.className = ROW_CLASS;
+  const label = doc.createElement("span");
+  label.className = "answer-fold-label";
+  const size = doc.createElement("span");
+  size.className = "answer-fold-size";
+  row.append(label, size);
+  return row;
+}
+
+// Runs +mutate+ and scrolls +scroller+ so +row+ stays where it was on
+// screen (folding a long answer above the view would pull the page up), in
+// sight at least.
+export function keepRowInView(scroller, row, mutate) {
+  const before = row.getBoundingClientRect().top;
+  mutate();
+  const after = row.getBoundingClientRect().top;
+  if (scroller && after !== before) scroller.scrollTop += after - before;
+  const box = row.getBoundingClientRect();
+  const view = scroller?.getBoundingClientRect?.();
+  if (view && (box.top < view.top || box.bottom > view.bottom)) row.scrollIntoView?.({ block: "nearest" });
+}
+
+// @param historyEl the history (#history), also its scroller
+// @param sessionId () => the open session's id
+// @param projectRoot () => the open session's project root, or null
+// @return {decorate(root)} (the observer runs it; specs call it)
+export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null }) {
+  // Each bubble's row, and each row's bubble.
+  const rows = new WeakMap();
+  const bubbleOf = new WeakMap();
+
+  function decorateBubble(bubble, stored) {
+    if (bubble.parentElement !== historyEl) return;
+    const key = answerKey(bubble);
+    let row = rows.get(bubble);
+    if (!key || bubble.matches(UNFINISHED) || (!row && !foldable(answerText(bubble)))) return;
+    if (!row) {
+      row = makeRow(historyEl.ownerDocument);
+      rows.set(bubble, row);
+      bubbleOf.set(row, bubble);
+      // The stored choice, once: after that the bubble's class is the state
+      // (a jump that unfolds it, history_reveal.js, isn't saved).
+      if (stored().includes(key)) bubble.classList.add("folded");
+    }
+    if (bubble.previousElementSibling !== row) historyEl.insertBefore(row, bubble);
+    drawRow(row, bubble);
+  }
+
+  // Rows whose bubble left (a re-render, a replaced bubble) go with it.
+  function dropOrphans() {
+    for (const row of historyEl.querySelectorAll(`:scope > .${ROW_CLASS}`)) {
+      const bubble = bubbleOf.get(row);
+      if (!bubble || bubble.parentElement !== historyEl) row.remove();
+      else if (row.nextElementSibling !== bubble) historyEl.insertBefore(row, bubble);
+    }
+  }
+
+  function decorate(root) {
+    let folded = null;
+    const stored = () => (folded ??= readFolded(sessionId()));
+    if (root.matches?.(ANSWERS)) decorateBubble(root, stored);
+    for (const bubble of root.querySelectorAll?.(ANSWERS) || []) decorateBubble(bubble, stored);
+  }
+
+  // Synchronous (not a frame later, as copy buttons are): the row lands in
+  // the same frame as its bubble, so nothing below it shifts after a paint.
+  new MutationObserver((records) => {
+    const roots = new Set();
+    let removed = false;
+    for (const r of records) {
+      if (r.type === "attributes") {
+        if (r.target.matches?.(ANSWERS)) roots.add(r.target);
+        continue;
+      }
+      if (r.removedNodes.length) removed = true;
+      const answer = r.target.closest?.(ANSWERS);
+      if (answer) roots.add(answer);
+      for (const n of r.addedNodes) if (n.nodeType === 1 && !n.classList.contains(ROW_CLASS)) roots.add(n);
+    }
+    if (removed) dropOrphans();
+    for (const el of roots) if (el.isConnected) decorate(el);
+  }).observe(historyEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
+  decorate(historyEl);
+
+  historyEl.addEventListener("click", (e) => {
+    const row = e.target.closest?.(`.${ROW_CLASS}`);
+    const bubble = row && bubbleOf.get(row);
+    if (!bubble) return;
+    e.preventDefault();
+    const folded = !bubble.classList.contains("folded");
+    keepRowInView(historyEl, row, () => {
+      bubble.classList.toggle("folded", folded);
+      drawRow(row, bubble);
+    });
+    writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });
+  });
+
+  return { decorate };
+}

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

@@ -67,6 +67,8 @@ export function applyFinalAnswer(messages, bubbles, normalize) {
   if (typeof message.html === "string") {
     bubble.classList.add("markdown");
     bubble.setAttribute(COPY_SOURCE_ATTR, copySource(message));
+    // A hook's display in the answer's place (answer_fold.js's label).
+    bubble.toggleAttribute("data-answer-display", typeof message.display === "string");
     // The server's rendered markdown, sanitized there (Web::MarkdownRenderer#sanitize): set as it is, not templated.
     bubble.innerHTML = message.html;
   }

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

@@ -68,6 +68,7 @@ import { VERIFY_PRESET, VERIFY_UNAVAILABLE, verifyWorkerUnavailable, withVerify
 import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { copyText, installCopy } from "./copy.js";
+import { installAnswerFold, sweepAnswerFolds } from "./answer_fold.js";
 import { createQuestionCards } from "./question_cards.js";
 import { splitSnapshotCards } from "./card.js";
 import { PROMPT_LINE_PX, PROMPT_MIN_PX } from "./composer_size.js";
@@ -443,6 +444,14 @@ const scope = {
 };
 // The server refused ?dir (a folder deleted since the link was made).
 let scopeError = null;
+// The list's first load sweeps the folded answers of sessions gone since
+// (answer_fold.js), once per page.
+let foldsSwept = false;
+function sweepFoldsOnce() {
+  if (foldsSwept) return;
+  foldsSwept = true;
+  sweepAnswerFolds(allSessions, { scoped: !!scope.dir });
+}
 
 // The list by fetching: the fallback when there is no events stream (a
 // chi web without a hub, or ?dir the server refused: the 400 is read here).
@@ -450,6 +459,7 @@ async function refresh() {
   try {
     allSessions = await listSessions("updated_at", "desc", { dir: scope.dir });
     notifications.noticeList(allSessions);
+    sweepFoldsOnce();
   } catch (e) {
     if (e.status !== 400 || !scope.dir) throw e;
     scopeError = e.message;
@@ -470,6 +480,7 @@ function openSessionEvents() {
       if (data.chi_update) updateFrame(data.chi_update, { snapshot: true });
       notifications.noticeSessions("snapshot", data);
       allSessions = applySessionEvent(allSessions, "snapshot", data);
+      sweepFoldsOnce();
       lists.render();
       const sess = allSessions.find((s) => s.id === selected);
       if (sess) followSelectedSession(sess);
@@ -1305,7 +1316,7 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
   // A completed turn with no answer: its notice where the answer goes
   // (the turn view places it), else after the turn; before the timing.
   const endNote = emptyAnswer ? elementOf(emptyAnswerTemplate(emptyAnswer)) : null;
-  const kept = turnDom.turnEnded({ kind, endNote, emptyAnswer: !!emptyAnswer }) || [];
+  const kept = turnDom.turnEnded({ kind, endNote, emptyAnswer: !!emptyAnswer, turnId: liveTurn.timing.turnId }) || [];
   if (endNote && !endNote.isConnected) appendToHistory(endNote);
   liveTurn.timing.finish({ canceled: kind === "canceled" });
   if (endText) addEndBubble(endText, { stopped });
@@ -2024,6 +2035,12 @@ historyEl.addEventListener("click", (e) => {
 });
 turnDom.scrollEl?.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
+// Long answers fold by hand (answer_fold.js), per viewer and session.
+installAnswerFold({
+  historyEl,
+  sessionId: () => selected,
+  projectRoot: () => allSessions.find((s) => s.id === selected)?.project_root ?? null,
+});
 
 // Notifications (notifications.js): an OS notification and a title count
 // when a session needs the user while this tab is not in front. On a

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

@@ -25,10 +25,13 @@ export function reloadedTurnEls(historyEl, before) {
   return turnEls;
 }
 
-// What goes after a reloaded turn's own rows and cards: its answer, else
+// What goes after a reloaded turn's own rows and cards: its answer (its
+// fold row, answer_fold.js, when it has one: the two stay together), else
 // its timing line; null when it has neither.
 export function turnAnswerEl(turnEls) {
-  return turnEls.filter((el) => el.matches(".bubble.output, .empty-answer")).pop() || turnEls.find((el) => el.matches(".turn-timing")) || null;
+  const answer = turnEls.filter((el) => el.matches(".bubble.output, .empty-answer")).pop();
+  if (answer) return answer.previousElementSibling?.matches(".answer-fold") ? answer.previousElementSibling : answer;
+  return turnEls.find((el) => el.matches(".turn-timing")) || null;
 }
 
 // @param historyEl the history

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

@@ -5,7 +5,9 @@
 // click, its × (data-act="close"), a click outside or Esc; focus goes back
 // to the opener. Another session's summary (refresh) closes it. What it
 // draws, and what a Set or another data-act does, is the caller's. With
-// +sheet+, a window narrower than SHEET_MAX gets it as a bottom sheet.
+// +sheet+, a window narrower than SHEET_MAX gets it as a bottom sheet. An
+// open one is placed again when the window (or a phone's visual viewport:
+// its keyboard) resizes.
 
 import { nothing, render } from "./vendor/lit-html.js";
 
@@ -29,11 +31,28 @@ export function popoverPlace(rect, { width, height, innerWidth, innerHeight }) {
   return height > room ? { ...place, maxHeight: room } : place;
 }
 
+// The share of a phone's window a bottom sheet takes at most (the rest
+// scrolls); a caller's taller view asks for SHEET_TALL.
+export const SHEET_SHARE = 0.6;
+export const SHEET_TALL = 0.85;
+
 // A bottom sheet's place in a phone's window: the window's width less its
-// edges, at its bottom, at most 60 % of its height (the rest scrolls).
+// edges, at its bottom, at most +share+ of its height. +viewport+: the
+// visual viewport ({height, offsetTop}) when it is shorter than the window
+// (a phone's keyboard over the page): the sheet sits on it, sized to it.
 // @return {left, bottom, width, maxHeight}
-export function sheetPlace({ innerWidth, innerHeight }) {
-  return { left: SHEET_EDGE, bottom: SHEET_EDGE, width: innerWidth - 2 * SHEET_EDGE, maxHeight: Math.round(innerHeight * 0.6) };
+export function sheetPlace({ innerWidth, innerHeight }, { share = SHEET_SHARE, viewport = null } = {}) {
+  const height = viewport ? Math.min(innerHeight, viewport.height) : innerHeight;
+  const below = viewport ? Math.max(0, innerHeight - viewport.offsetTop - viewport.height) : 0;
+  return { left: SHEET_EDGE, bottom: SHEET_EDGE + Math.round(below), width: innerWidth - 2 * SHEET_EDGE,
+           maxHeight: Math.round(height * share) };
+}
+
+const FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])";
+
+// The elements Tab reaches in +root+, in order (none hidden or disabled).
+export function tabStops(root) {
+  return [...root.querySelectorAll(FOCUSABLE)].filter((e) => !e.disabled && !e.closest("[hidden]") && e.tabIndex >= 0);
 }
 
 // id, className: the popover's; width: its widest (px); el: where the chip
@@ -47,27 +66,42 @@ export function sheetPlace({ innerWidth, innerHeight }) {
 // sheet: a bottom sheet in a narrow window (sheetPlace). label: the
 // dialog's accessible name (aria-label), none by default. onOpen(): after
 // an open has shown and placed it (where focus can go into it: show runs
-// while it is still hidden).
+// while it is still hidden). expands: every opener carries aria-expanded
+// ("true" while open, "false" once closed; set "false" in the markup too),
+// for openers that are fixed buttons (a lit-drawn chip owns its own).
+// modal: a dialog that holds the focus while open (aria-modal; Tab and
+// Shift+Tab wrap inside it, a Tab from outside goes in). sheetShare: the
+// share of a phone's window the sheet takes at most (SHEET_SHARE).
 // @return {pop, open, close, refresh, isOpen, opener}
 export function createChipPopover({ id, className, width: widest, el, anchor: anchorSel, openers = anchorSel, summary,
                                     session = () => null, show, onClose = () => {}, onSubmit, onAct = () => {}, onOpen = () => {},
-                                    sheet = false, label = null, doc = document, win = window }) {
+                                    sheet = false, label = null, expands = false, modal = false, sheetShare = SHEET_SHARE,
+                                    doc = document, win = window }) {
   const pop = doc.createElement("div");
   pop.id = id;
   pop.className = className;
   pop.setAttribute("role", "dialog");
   if (label) pop.setAttribute("aria-label", label);
+  if (modal) pop.setAttribute("aria-modal", "true");
   pop.hidden = true;
   doc.body.appendChild(pop);
-  // The session the open form is for, and the element that opened it.
+  // The session the open form is for, the element it is placed at, and the
+  // one focus goes back to (the opener clicked).
   let openFor = null;
   let opener = null;
+  let returnTo = null;
+
+  const expanded = (value) => {
+    if (expands) doc.querySelectorAll(openers).forEach((e) => e.setAttribute("aria-expanded", value));
+  };
 
   function place(anchor) {
     const narrow = sheet && win.innerWidth < SHEET_MAX;
     pop.classList.toggle("sheet", narrow);
     if (narrow) {
-      const at = sheetPlace({ innerWidth: win.innerWidth, innerHeight: win.innerHeight });
+      const vv = win.visualViewport;
+      const at = sheetPlace({ innerWidth: win.innerWidth, innerHeight: win.innerHeight },
+                            { share: sheetShare, viewport: vv ? { height: vv.height, offsetTop: vv.offsetTop } : null });
       pop.style.width = `${at.width}px`;
       pop.style.left = `${at.left}px`;
       pop.style.top = "";
@@ -86,12 +120,16 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
     if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
   }
 
-  // Opens at +anchor+ (open already: drawn anew there).
-  function open(anchor) {
+  // Opens at +anchor+ (open already: drawn anew there); focus goes back to
+  // +from+ on close (an opener that isn't the anchor; the anchor when +from+
+  // is gone or hidden by then).
+  function open(anchor, { from = anchor } = {}) {
     const data = summary(anchor);
     if (!data) return;
     openFor = session();
     opener = anchor;
+    returnTo = from;
+    expanded("true");
     show(data, true);
     pop.hidden = false;
     place(anchor);
@@ -103,10 +141,12 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
   // its opener.
   function close({ refocus = false } = {}) {
     const had = refocus || pop.contains(doc.activeElement);
-    const back = opener;
+    const back = returnTo?.isConnected && !returnTo.hidden ? returnTo : opener;
+    expanded("false");
     pop.hidden = true;
     openFor = null;
     opener = null;
+    returnTo = null;
     onClose();
     render(nothing, pop);
     if (had && back?.isConnected) back.focus?.();
@@ -156,7 +196,29 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
   });
   doc.addEventListener("keydown", (e) => {
     if (e.key === "Escape" && isOpen()) close({ refocus: true });
+    else if (e.key === "Tab" && modal && isOpen()) holdFocus(e);
   });
+  // A resize (a rotation, a phone's keyboard) places an open one again: a
+  // sheet's height follows the window, a popover its chip.
+  win.addEventListener?.("resize", replace);
+  win.visualViewport?.addEventListener?.("resize", replace);
+
+  // Tab past the last stop goes to the first, Shift+Tab before the first to
+  // the last; a Tab from outside (focus lost to a redraw) goes in.
+  function holdFocus(e) {
+    const stops = tabStops(pop);
+    if (!stops.length) return;
+    const first = stops[0];
+    const last = stops[stops.length - 1];
+    const at = doc.activeElement;
+    let to = null;
+    if (!pop.contains(at)) to = e.shiftKey ? last : first;
+    else if (e.shiftKey && at === first) to = last;
+    else if (!e.shiftKey && at === last) to = first;
+    if (!to) return;
+    e.preventDefault();
+    to.focus();
+  }
 
   return { pop, open, close, refresh, isOpen, replace, opener: () => opener };
 }

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

@@ -28,6 +28,8 @@
 // static JS is cached at unversioned URLs, and a new export on an old
 // module would blank the page.
 
+import { revealInHistory } from "./history_reveal.js";
+
 export const QUOTE_MAX = 200;
 export const PREFIX_MAX = 32;
 export const TURN_CHARS = 8;
@@ -311,7 +313,7 @@ export function selectionClaim(root, range, opts = {}, doc = globalThis.document
 
 // Finds the claim +claim+ ({turn, q, p}) in +container+ and shows it: the
 // match's root (or the turn's opening) scrolled to the middle and marked
-// HIT_CLASS, its closed <details> opened, the quote highlighted (CSS
+// HIT_CLASS, what hides it unfolded (history_reveal.js), the quote highlighted (CSS
 // Highlight API). Without the turn (no opening carries its id: a
 // non-person turn), the quote in any root of the page. @return "quote",
 // "turn" or null (neither the turn nor the quote).
@@ -323,7 +325,7 @@ export function showClaim(container, claim, { roots: rootSelector, opts = {}, do
   const hit = findClaim(texts.map((t) => t.text), claim, opts);
   if (!hit && !turn) return null;
   const el = hit ? roots[hit.at] : turn.anchor;
-  for (let d = el.parentElement?.closest("details"); d; d = d.parentElement?.closest("details")) d.open = true;
+  revealInHistory(el);
   el.classList.add(HIT_CLASS);
   el.scrollIntoView?.({ block: "center" });
   if (hit) {

data/lib/samagotchi/web/public/composer.css

@@ -77,7 +77,9 @@ body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin
    .set: something under it is set, an accent dot on a phone (the override chips say it on a wider row). */
 #composer .actions-col .icon-btn{order:2;position:relative;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
 #composer .actions-col .icon-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
-#composer .actions-col .icon-btn:hover,#composer .actions-col .icon-btn[aria-expanded="true"]{filter:none;color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
+#composer .actions-col .icon-btn:hover{filter:none}
+#composer .actions-col .icon-btn[aria-expanded="true"]{color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
+@media(hover:hover){#composer .actions-col .icon-btn:hover{color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}}
 #composer .actions-col .icon-btn[hidden],body.has-session #composer .actions-col .icon-btn{display:none}
 #composer .actions-col .settings-btn{--icon:var(--icon-settings)}
 #composer .actions-col .toolkit-btn{--icon:var(--icon-toolkit)}

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

@@ -0,0 +1,23 @@
+// The one way a jump into the history shows what it lands on: whatever
+// hides +el+ unfolds: a closed <details> around it (a turn's steps block, a
+// step, a diff), an answer folded by hand (answer_fold.js: its row follows
+// the bubble's class; the jump's unfold isn't saved). Every jump goes through it (claim_link.js
+// showClaim, refs.js showRow and so the working set's step tags,
+// verdict_card.js "View check"), so a new way to hide history is opened in
+// one place.
+//
+// Pure DOM, so it runs under `node --test` with happy-dom. A module of its
+// own: static JS is cached at unversioned URLs, and a new export on an old
+// module would blank the page.
+
+// Opens each closed <details> that holds +el+ (not +el+ itself: a fold the
+// caller means to open it opens itself) and unfolds the folded answer that
+// is or holds it. +el+, or null.
+export function revealInHistory(el) {
+  if (!el) return null;
+  el.closest?.(".bubble.output.folded")?.classList.remove("folded");
+  for (let details = el.parentElement?.closest("details"); details; details = details.parentElement?.closest("details")) {
+    details.open = true;
+  }
+  return el;
+}