samagotchi 0.134.0 → 0.136.0

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

@@ -3,13 +3,20 @@
 // 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.
+// no inline style); the row reads its first line and its size, "▸
+// ‹first line› · N lines", folded or not: unfolded it is the bubble's header,
+// flush on top of it, its bar the bubble's.
+//
+// A delegate report (a user line chi brought in, data-source
+// "delegate_report") gets the same row, folded by default (it is written
+// for the model; the reply under it is the user's summary): the row sits
+// where the report sits and reads "delegate report · ‹first line› · N
+// lines". Its key: a merged one's data-line-key, a wake turn's opening
+// "<turn id>:prompt". A live merged report has no key until a reload.
 //
 // 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
+// storage.js): one key per session holding the folded answers' keys and
+// the unfolded reports' keys, the last FOLD_KEEP of each. 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
@@ -36,9 +43,11 @@ export const FOLD_PREFIX = "chi_answer_fold:";
 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";
+// What gets a row: answers and delegate reports (user lines chi brought in).
+const REPORTS = '.bubble.user[data-source="delegate_report"]';
+const ANSWERS = `.bubble.output, ${REPORTS}`;
+// Not done yet: still streaming.
+const UNFINISHED = ".streaming";
 
 // +text+'s lines (a trailing newline ends the last one, it adds none).
 export function lineCount(text) {
@@ -71,12 +80,12 @@ export function foldLabel(text, { display = false } = {}) {
   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 } = {}) {
+// The row's words, folded or not: the label and the size (an open row is
+// the answer's header, as an open steps block keeps its summary).
+// +label+: the row's own (a report's, reportLabel), else the answer's.
+export function foldRowText(text, { display = false, label = foldLabel(text, { display }) } = {}) {
   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 };
 }
 
@@ -86,11 +95,17 @@ export function foldStoreKey(sessionId) {
   return sessionId ? `${FOLD_PREFIX}${sessionId}` : null;
 }
 
+// A session's entry: {root, turns, open}. `turns` holds the answers folded
+// by hand (and Revise stubs opened, revise_stack.js); `open` the delegate
+// reports unfolded by hand (a report folds by default). An entry written
+// before `open` reads as none unfolded.
+const strings = (list) => (Array.isArray(list) ? list.filter((t) => typeof t === "string") : []);
+
 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") };
+    if (!entry || (!Array.isArray(entry.turns) && !Array.isArray(entry.open))) return null;
+    return { root: typeof entry.root === "string" ? entry.root : null, turns: strings(entry.turns), open: strings(entry.open) };
   } catch (_) {
     return null;
   }
@@ -103,6 +118,12 @@ export function readFolded(sessionId) {
   return (key && readEntry(key)?.turns) || [];
 }
 
+// The session's delegate reports unfolded by hand, oldest first.
+export function readOpened(sessionId) {
+  const key = foldStoreKey(sessionId);
+  return (key && readEntry(key)?.open) || [];
+}
+
 // +list+ with +answerKey+ folded (moved to the end) or not, at most
 // FOLD_KEEP long. Pure.
 export function withFold(list, answerKey, folded) {
@@ -113,11 +134,23 @@ export function withFold(list, answerKey, folded) {
 // 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 } = {}) {
+  writeList(sessionId, "turns", answerKey, folded, root);
+}
+
+// Saves the report +reportKey+ unfolded (+open+) or not for +sessionId+.
+export function writeOpened(sessionId, reportKey, open, { root = null } = {}) {
+  writeList(sessionId, "open", reportKey, open, root);
+}
+
+// +member+ in or out of the entry's +list+ ("turns" or "open"), the other
+// list kept; the key goes when both are empty.
+function writeList(sessionId, list, member, inList, root) {
   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 }));
+  if (!key || !member) return;
+  const entry = readEntry(key) || { turns: [], open: [] };
+  const next = { turns: entry.turns, open: entry.open, [list]: withFold(entry[list], member, inList) };
+  if (!next.turns.length && !next.open.length) removeStored(key);
+  else writeStored(key, JSON.stringify({ root, turns: next.turns, ...(next.open.length ? { open: next.open } : {}) }));
 }
 
 // The session list loaded (+sessions+, each {id, project_root}): the fold
@@ -137,8 +170,17 @@ export function sweepAnswerFolds(sessions, { scoped = false } = {}) {
 
 // ---- The rows ----
 
-// The key an answer bubble is folded by, or null.
+const isReport = (bubble) => !!bubble?.matches?.(REPORTS);
+
+// The key an answer bubble is folded by, or null. A delegate report's: a
+// merged one's line key (data-line-key, "<turn id>:input:<place>"), one
+// that opened a wake turn its turn's id and ":prompt" (never the answer's
+// key, the bare id).
 export function answerKey(bubble) {
+  if (isReport(bubble)) {
+    const turn = bubble.getAttribute("data-turn-id");
+    return bubble.getAttribute("data-line-key") || (turn ? `${turn}:prompt` : null);
+  }
   return bubble?.getAttribute?.("data-answer-turn") || bubble?.getAttribute?.("data-reply-key") || null;
 }
 
@@ -146,13 +188,30 @@ function answerText(bubble) {
   return bubbleCopyText(bubble);
 }
 
+// A delegate report's lines before its body: "session: <id>",
+// "status: <s>", "---".
+const REPORT_HEADER = /^(?:(?:session|status):\s|---\s*$)/;
+
+// A report row's label: its origin label (the bubble's) and its first
+// heading or first line after the header.
+export function reportLabel(text, origin = "") {
+  const body = String(text ?? "").replace(/\r\n?/g, "\n").split("\n").filter((l) => !REPORT_HEADER.test(l.trim())).join("\n");
+  const first = foldLabel(body);
+  return clip([origin.trim(), first].filter(Boolean).join(" · "), LABEL_CHARS);
+}
+
 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 });
+  const report = isReport(bubble);
+  const own = report ? { label: reportLabel(text, bubble.querySelector(":scope > .origin-label")?.textContent || "") } : {};
+  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), ...own });
+  const what = report ? "report" : "answer";
   row.setAttribute("aria-expanded", folded ? "false" : "true");
-  row.title = folded ? "Show the answer" : "Fold the answer";
+  row.title = folded ? `Show the ${what}` : `Fold the ${what}`;
   row.classList.toggle("folded", folded);
+  row.classList.toggle("report", report);
+  row.classList.toggle("steered", report && bubble.classList.contains("steered"));
   const [labelEl, sizeEl] = row.children;
   if (labelEl.textContent !== label) labelEl.textContent = label;
   if (sizeEl.textContent !== size) sizeEl.textContent = size;
@@ -202,14 +261,18 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
       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");
+      // (a jump that unfolds it, history_reveal.js, isn't saved). An answer
+      // is open unless folded by hand, a report folded unless opened.
+      const folded = isReport(bubble) ? !stored().open.includes(key) : stored().turns.includes(key);
+      if (folded) 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.
+  // Rows whose bubble left (a re-render, a replaced bubble) go with it; a
+  // row something was placed after (a card or a recap placed before a
+  // report that opens its turn) goes back just before its bubble.
   function dropOrphans() {
     for (const row of historyEl.querySelectorAll(`:scope > .${ROW_CLASS}`)) {
       const bubble = bubbleOf.get(row);
@@ -219,8 +282,8 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
   }
 
   function decorate(root) {
-    let folded = null;
-    const stored = () => (folded ??= readFolded(sessionId()));
+    let entry = null;
+    const stored = () => (entry ??= { turns: readFolded(sessionId()), open: readOpened(sessionId()) });
     if (root.matches?.(ANSWERS)) decorateBubble(root, stored);
     for (const bubble of root.querySelectorAll?.(ANSWERS) || []) decorateBubble(bubble, stored);
   }
@@ -229,18 +292,22 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
   // the same frame as its bubble, so nothing below it shifts after a paint.
   new MutationObserver((records) => {
     const roots = new Set();
-    let removed = false;
+    let settle = 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;
+      if (r.removedNodes.length) settle = 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);
+      for (const n of r.addedNodes) {
+        if (n.nodeType !== 1 || n.classList.contains(ROW_CLASS)) continue;
+        roots.add(n);
+        if (r.target === historyEl) settle = true;
+      }
     }
-    if (removed) dropOrphans();
+    if (settle) dropOrphans();
     for (const el of roots) if (el.isConnected) decorate(el);
   }).observe(historyEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
   decorate(historyEl);
@@ -255,7 +322,9 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
       bubble.classList.toggle("folded", folded);
       drawRow(row, bubble);
     });
-    writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });
+    // An answer's choice is its fold, a report's its unfold (D2: the default differs).
+    if (isReport(bubble)) writeOpened(sessionId(), answerKey(bubble), !folded, { root: projectRoot() });
+    else writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });
   });
 
   return { decorate };