samagotchi 0.136.1 → 0.138.0

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

@@ -1,8 +1,10 @@
-// The session bar's info line (#infoText): the open session's id (a button
-// that copies the full id), status, model, the ⚙ settings chip (thinking,
-// reasoning history, LLM context), the 🧰 toolkit chip, chain links, parent
-// and delegates, model notes, memories, folder, ctx, speed,
-// session clock and the worker's version badge. A lit-html template over a
+// The session bar's info line (#infoText), three groups with hairlines
+// between them: the setup (the open session's id, a button that copies the
+// full id; status, model, the ⚙ settings chip (thinking, reasoning history,
+// LLM context), the 🧰 toolkit chip, model notes, memories or the working
+// set), the relations (chain links, the parent, delegates, participants)
+// and the telemetry (folder, ctx, speed, the session clock, the worker's
+// version badge). A lit-html template over a
 // plain model (info_bar_model.js, applied by app.js's updateInfoBar), so the markup lives here and
 // runs under node --test (spec/web/public/info_bar.test.js).
 //
@@ -21,7 +23,7 @@ import { chipTemplate as participantsChip } from "./participants_panel.js";
 export const PREV = "←";
 // The session clock's placeholder before its first turn: the chip shows
 // from the start, so the first turn doesn't add it to the line.
-export const CLOCK_NONE = "session –";
+export const CLOCK_NONE = "–";
 export const NEXT = "→";
 
 // A chain's ← / → link (chains.js chainNeighbours): its date or time (else
@@ -71,7 +73,7 @@ export function workingSetChipTemplate(chip) {
   const what = chip.n ? `${chip.n} item${chip.n === 1 ? "" : "s"} this session brought into context` : "nothing this session brought into context yet";
   const title = `Working set: ${what} (files, memories, URLs)${chip.changed ? ", changed since you last looked" : ""}. Open the list.`;
   const cls = `model ws-chip${chip.changed ? " changed" : ""}${chip.n ? "" : " empty"}`;
-  return html`<button type="button" class=${cls} title=${title} aria-label=${title} aria-haspopup="dialog"><span class="ws-dot" aria-hidden="true"></span>set ${chip.n}</button>`;
+  return html`<button type="button" class=${cls} title=${title} aria-label=${title} aria-haspopup="dialog" aria-expanded="false"><span class="ws-dot" aria-hidden="true"></span>set ${chip.n}</button>`;
 }
 
 // The info line for +bar+, nothing without a session (the start page hides
@@ -90,10 +92,19 @@ export function workingSetChipTemplate(chip) {
 //   first generation; null: no chip), clock (the session time's text, "" for
 //   none: the muted CLOCK_NONE), worker ({badge, busy} or null), participants (the
 //   participants chip: participants_panel.js chipModel, or null).
+// Three span.bar-group (setup, relations, telemetry), a span.bar-sep
+// between two drawn ones; the relations only when it has a part.
 export function infoBarHtml(bar) {
   if (!bar) return nothing;
   const memories = bar.memories || [];
-  return html`<div class="meta"><button type="button" class="id" title=${`Session id ${bar.id}: click to copy it`}>${String(bar.id).slice(0, 8)}</button><span class=${bar.status ? `status ${bar.status}` : "status"}><span>${bar.status || ""}</span></span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${settingsChip(bar.settings)}${toolkitChip(bar.toolkit)}${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${participantsChip(bar.participants)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${bar.workingSet ? workingSetChipTemplate(bar.workingSet.chip) : memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class=${`model speed${bar.speed.empty ? " empty" : ""}`} title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}<span class=${`model session-time${bar.clock ? "" : " empty"}`} title=${bar.clock ? "This session's time: its turns, and the running one" : "This session's time: no turn yet"}>${bar.clock || CLOCK_NONE}</span>${workerBadgeTemplate(bar.worker)}</div>`;
+  const setup = html`<button type="button" class="id" title=${`Session id ${bar.id}: click to copy it`}>${String(bar.id).slice(0, 8)}</button><span class=${bar.status ? `status ${bar.status}` : "status"}><span>${bar.status || ""}</span></span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${settingsChip(bar.settings)}${toolkitChip(bar.toolkit)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${bar.workingSet ? workingSetChipTemplate(bar.workingSet.chip) : memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}`;
+  const related = !!(bar.chain?.prev || bar.chain?.next || bar.parent || bar.kids || bar.participants);
+  // The parent reads "↑ <short id>"; its title says "delegated by …".
+  const relations = related
+    ? html`<span class="bar-sep" aria-hidden="true"></span><span class="bar-group relations">${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>↑ ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${participantsChip(bar.participants)}</span>`
+    : nothing;
+  const telemetry = html`<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class=${`model speed${bar.speed.empty ? " empty" : ""}`} title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}<span class=${`model session-time${bar.clock ? "" : " empty"}`} title=${bar.clock ? "This session's time: its turns, and the running one" : "This session's time: no turn yet"}>${bar.clock || CLOCK_NONE}</span>${workerBadgeTemplate(bar.worker)}`;
+  return html`<div class="meta"><span class="bar-group setup">${setup}</span>${relations}<span class="bar-sep" aria-hidden="true"></span><span class="bar-group telemetry">${telemetry}</span></div>`;
 }
 
 // Draws +bar+ into +el+ (#infoText), with the memories in its tooltip

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

@@ -112,7 +112,9 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
     // speed, so it doesn't join the line mid-turn.
     speed: speedTextNow ? { text: speedTextNow, tip: `Decode speed of the last generation${avgSpeed ? `; session average ${avgSpeed}` : ""}`, empty: false }
       : { text: SPEED_NONE, tip: "Decode speed of the last generation: none yet", empty: true },
-    clock: sessionDuration === null ? "" : `session ${formatDuration(sessionDuration)}`,
+    // A session with no turn yet has no time of its own: the placeholder, not "0ms".
+    // A running first turn still ticks from 0.
+    clock: sessionDuration === null || (!running && sessionDuration === 0) ? "" : formatDuration(sessionDuration),
     worker: badge ? { badge, busy: restarting } : null,
   };
 }

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

@@ -20,19 +20,19 @@
 //   select(id)            open a session
 //   confirmDelete(id), setArchived(id, archive), archiveOne(id, archive)
 //   updateSessionTitle(), showToast(text, action)
-//   allViewOpen(), openAllView(), leaveAllView(hash)
+//   allViewOpen(), openAllView(), closeAllView(), leaveAllView(hash)
 //   renameShown(owner)    whether a card's title has its ✎ (session_title.js)
 //   onRename()            the active card's ✎ clicked (session_rename.js open)
 //   renaming()            whether that rename input is open (the strip holds)
 
-import { ownerBadge, relativeTime, delegatedBy, cardTitleSource } from "./format.js";
+import { ownerBadge, relativeTime, delegatedBy, cardTitleSource, previewForCard } from "./format.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { cardCtxText, ctxBarTip } from "./ctx.js";
 import { allScopeHref, cardFolder } from "./scope.js";
 import { sessionHash } from "./route.js";
 import { stripColumns, stripStatusParts } from "./strip.js";
 import { createFamilyPop, familyChipTemplate, familyRowsTemplate } from "./families_view.js";
-import { allViewChains, chainChipTemplate, chainRowsTemplate, chainTitle, foldChains } from "./chains.js";
+import { allViewChains, chainChipTemplate, chainRowsTemplate, chainTitle, foldChains, isOpener } from "./chains.js";
 import {
   batchCounts, batchTargets, batchToastText, families, familyId, familyOpen, familyWaits, filterFamilies, heldOrder,
   listedSessions, rangeIds, runBatch, stoppedBadge, waitingBadge, waitingFirst, waitingSearchText,
@@ -70,10 +70,10 @@ export function allViewFamilies(listed, every, { query = "", includeArchived = f
   return { all, shown: waitingFirst(shown), delegates };
 }
 
-// The all view's count: "14 (+7 delegates)", or "3 / 14" under a search.
+// The all view's count: "14 · 7 delegates", or "3 / 14" under a search.
 export function allCountText(shown, total, delegates) {
   return shown === total
-    ? `${total}${delegates ? ` (+${delegates} ${delegates === 1 ? "delegate" : "delegates"})` : ""}`
+    ? `${total}${delegates ? ` · ${delegates} ${delegates === 1 ? "delegate" : "delegates"}` : ""}`
     : `${shown} / ${total}`;
 }
 
@@ -85,10 +85,8 @@ export function stripCountText(shown, total) {
     : `${total - shown} archived`;
 }
 
-// How long a new card fades in and a status dot's pulse period: index.html's
-// `.card.entering` fadeIn (.28s) and `.card .dot` dot-pulse / attn-pulse (1.6s).
+// How long a new card fades in: index.html's `.card.entering` fadeIn (.28s).
 export const CARD_FADE_MS = 280;
-export const DOT_PULSE_MS = 1600;
 
 // Which of a list's cards fade in. Every draw makes new nodes (draw), and a
 // new node starts its CSS animation again: so only a card the list did not
@@ -109,20 +107,39 @@ export function enteringCards(prev, ids, now, fadeMs = CARD_FADE_MS) {
   return { drawn, entering };
 }
 
-// A card's inline animation phases: its fade's delay (+enterMs+ into it) and
-// the status dots' pulse, phase-locked to the clock (+now+, performance.now())
-// so a redrawn dot carries on pulsing where the last one was. "" for neither.
-export function cardAnimStyle({ enterMs = null, now = null } = {}, period = DOT_PULSE_MS) {
-  const parts = [];
-  if (enterMs) parts.push(`--enter-delay:-${Math.round(enterMs)}ms`);
-  if (now !== null) parts.push(`--pulse-delay:-${Math.round(now % period)}ms`);
-  return parts.join(";");
+// A card's inline animation: its fade's delay (+enterMs+ into it, so a
+// redrawn card carries its fade on). "" for none.
+export function cardAnimStyle({ enterMs = null } = {}) {
+  return enterMs ? `--enter-delay:-${Math.round(enterMs)}ms` : "";
 }
 
-// A card: the first message as its title, then status, how long ago, owner
-// and memories. The id is in the tooltip (and the search) only. A session
-// that waits on the user (a question, an approval, a card with actions)
-// wears the warning colour and says what for.
+// A card's two lines: its title (one line) and the line under it. The
+// title is +title+ (cardTitle); an untitled session (its title is only its
+// first message: cardTitleSource "preview", not a chain link inheriting its
+// chain's title, and not "—") reads "Untitled" over that message. The line
+// under it is the recap (unless the title is the recap's first sentence,
+// D5), else the first message when the title isn't it (and it isn't a
+// chain link's opener). untitled: whether the title is the "Untitled"
+// placeholder.
+function cardLines(s, title) {
+  if (cardTitleSource(s) === "preview" && title !== "\u2014" && title === previewForCard(s)) {
+    return { title: "Untitled", untitled: true, preview: title, previewTip: s.first_preview || s.last_prompt || title };
+  }
+  if (s.recap && cardTitleSource(s) !== "recap") return { title, untitled: false, preview: s.recap, previewTip: s.recap };
+  const first = (s.first_preview || "").trim();
+  const shown = first && !(s.continues && isOpener(first)) ? previewForCard({ first_preview: first }) : "";
+  return shown && shown !== title && shown !== "\u2014"
+    ? { title, untitled: false, preview: shown, previewTip: first }
+    : { title, untitled: false, preview: null, previewTip: null };
+}
+
+// A card: its title, the line under it (cardLines), then how long ago,
+// owner and memories. The id is in the tooltip (and the search) only. One
+// mark per state, no status dot: a session that waits on the user (a
+// question, an approval, a card with actions) wears the warning colour and
+// says what for (and drops its "live" owner badge: waiting means a worker);
+// an errored one wears an `error` badge; idle, completed and stopped are
+// unmarked.
 // deletable / archivable: the all-sessions view's cards get a delete and an
 // archive (unarchive, on an archived card) button. selectable: select mode's
 // checkbox instead (picked: checked), and skipReason: why a batch skipped it.
@@ -133,7 +150,7 @@ export function cardAnimStyle({ enterMs = null, now = null } = {}, period = DOT_
 // members. A family in a session chain (chains.js foldChains) carries its
 // `#N` chip, which opens the other links in a popover. entering: a card
 // new to its list (enteringCards: it fades in); anim: its inline animation
-// phases (cardAnimStyle).
+// fade (cardAnimStyle).
 // +ctx+: title (cardTitle), projectName (the page's scope), activeId (the
 // open session), chainOpen (its chain's popover is open), parent (the
 // delegating session, or null).
@@ -157,7 +174,7 @@ export function cardTemplate(s, { deletable = false, archivable = false, selecta
   // the user (the waiting badge wins: the stop is behind the need).
   const stopped = waiting ? null : stoppedBadge(s);
   const stoppedT = stopped ? html`<span class="stopped-badge" title=${stopped.title}>${stopped.text}</span>` : nothing;
-  const dotWord = waiting ? waiting.title : s.status;
+  const errorT = s.status === "error" ? html`<span class="error-badge" title=${s.status}>error</span>` : nothing;
   const pick = selectable ? html`<input type="checkbox" class="card-pick" aria-label=${`Select session ${s.short_id}`} ?checked=${picked}>` : nothing;
   const skip = skipReason ? html`<div class="skip-reason">skipped: ${skipReason}</div>` : nothing;
   const familyWaiting = !!family && familyWaits(family);
@@ -169,12 +186,13 @@ export function cardTemplate(s, { deletable = false, archivable = false, selecta
   const memberIds = [...(fam ? fam.members.map((m) => m.session.id) : []),
     ...(family?.chain ? family.chain.links.map((x) => x.id).filter((id) => id !== s.id) : [])];
   const cls = `card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}${entering ? " entering" : ""}`;
+  const lines = cardLines(s, title);
+  const titleT = html`<div class=${lines.untitled ? "preview untitled" : "preview"}>${lines.title}</div>`;
   const preview = renamable
-    ? html`<div class="preview-row"><div class="preview">${title}</div><button type="button" class="card-rename" data-rename=${s.id} title="Rename this session" aria-label="Rename this session">\u270e</button></div>`
-    : html`<div class="preview">${title}</div>`;
-  // No recap line when the title is the recap's first sentence (D5).
-  const recap = s.recap && cardTitleSource(s) !== "recap" ? html`<div class="recap" title=${s.recap}>${s.recap}</div>` : nothing;
-  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} style=${anim || nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}>${preview}${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
+    ? html`<div class="preview-row">${titleT}<button type="button" class="card-rename" data-rename=${s.id} title="Rename this session" aria-label="Rename this session">\u270e</button></div>`
+    : titleT;
+  const recap = lines.preview ? html`<div class="recap" title=${lines.previewTip}>${lines.preview}</div>` : nothing;
+  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} style=${anim || nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}>${preview}${recap}<div class="meta">${waitingT}${errorT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${waiting ? nothing : ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
 }
 
 function cardToolsTemplate(s, { deletable, archivable }) {
@@ -208,9 +226,10 @@ export function stripTileTemplate(count, { entering = false, anim = "" } = {}) {
   return html`<button type="button" class=${entering ? "card entering" : "card"} id=${"allTile"} style=${anim || nothing} title=${"All sessions, with search"}>All sessions →<span class="count">${count}</span></button>`;
 }
 
-// The hidden strip's status pill: "5 sessions · ● 1 live · ● 1 waiting"
-// (strip.js stripStatusParts). Not a toggle any more (the grip hides and
-// shows the strip): a click opens the all-sessions view, as the tile does.
+// The sessions pill: "5 sessions · ● 1 live · ● 1 waiting" (strip.js
+// stripStatusParts), shown while the strip is hidden and in the all view.
+// The all view's toggle (the grip hides and shows the strip): a click
+// opens the view, as the tile does, and closes it again (pressed there).
 // The count (and the dot after it) in its own span: a phone's narrow top
 // bar drops it when live or waiting shows (index.html).
 export function stripPillTemplate({ count, live, waiting }) {
@@ -232,24 +251,29 @@ export function createListsView(deps) {
   const {
     doc, win, topStripEl, allListEl, sessions, selected, scope, scopeError, eventsLive, refresh, select,
     confirmDelete, setArchived, archiveOne, updateSessionTitle, showToast,
-    allViewOpen, openAllView, leaveAllView, renameShown = () => false, onRename = () => {}, renaming = () => false,
+    allViewOpen, openAllView, closeAllView = () => {}, leaveAllView, renameShown = () => false, onRename = () => {}, renaming = () => false,
   } = deps;
   const $ = (s) => doc.querySelector(s);
 
-  // The hidden strip's status pill opens the all-sessions view (as the tile
-  // does), saving the step of showing the strip first. Bound once: the pill
-  // element stays, only its content is drawn again (draw()).
-  $("#stripStatus").addEventListener("click", openAllView);
+  // The sessions pill opens the all-sessions view (as the tile does), saving
+  // the step of showing the strip first, and closes it again (as Esc does):
+  // it is the view's own button there. Bound once: the pill element stays,
+  // only its content is drawn again (draw()).
+  $("#stripStatus").addEventListener("click", () => (allViewOpen() ? closeAllView() : openAllView()));
 
-  // The strip, its count and the hidden strip's pill leave archived sessions
-  // out; the all view shows them with "include archived". sessions() keeps
-  // them all (parent chips, the open session).
+  // The strip, its count and the sessions pill leave archived sessions out;
+  // the all view shows them with its "archived" toggle pressed. sessions()
+  // keeps them all (parent chips, the open session).
   function shownSessions() {
     return listedSessions(sessions(), false);
   }
 
+  function archivedOn() {
+    return $("#includeArchived").getAttribute("aria-pressed") === "true";
+  }
+
   function allViewSessions() {
-    return listedSessions(sessions(), $("#includeArchived").checked);
+    return listedSessions(sessions(), archivedOn());
   }
 
   function filterQuery() {
@@ -333,7 +357,7 @@ export function createListsView(deps) {
     const now = win.performance?.now() ?? Date.now();
     const { drawn, entering } = enteringCards(lastDrawn.get(el), ids, now);
     lastDrawn.set(el, drawn);
-    return (id) => ({ entering: entering.has(id), anim: cardAnimStyle({ enterMs: entering.get(id), now }) });
+    return (id) => ({ entering: entering.has(id), anim: cardAnimStyle({ enterMs: entering.get(id) }) });
   }
 
   // The strip's cards: stripOrder, held under the pointer, as many as fit.
@@ -373,6 +397,7 @@ export function createListsView(deps) {
   let chainFrom = null; // the list element the open popover's chip is in
   const chainPop = createFamilyPop({
     id: "chainPop",
+    label: "Chain links",
     doc,
     win,
     rowsFor: (id) => {
@@ -565,7 +590,7 @@ export function createListsView(deps) {
     const listed = allViewSessions();
     const q = filterQuery();
     const { all, shown, delegates } = allViewFamilies(listed, sessions(), {
-      query: q, includeArchived: $("#includeArchived").checked, matches: (s) => matchesFilter(s, q, cardTitle(s)),
+      query: q, includeArchived: archivedOn(), matches: (s) => matchesFilter(s, q, cardTitle(s)),
     });
     noteChainFamilies(all);
     const fams = listOrder(allListEl, shown, familyId);
@@ -684,6 +709,7 @@ export function createListsView(deps) {
 
   function updateSelectBar() {
     $("#allView").classList.toggle("selecting", selecting.on);
+    $("#allHead").classList.toggle("selecting", selecting.on); // the header is in the top bar
     $("#selectBtn").hidden = selecting.on;
     const bar = $("#selectBar");
     bar.hidden = !selecting.on;
@@ -770,7 +796,8 @@ export function createListsView(deps) {
     if (selecting.on && e.shiftKey) e.preventDefault();
   });
 
-  $("#includeArchived").addEventListener("change", () => {
+  $("#includeArchived").addEventListener("click", (e) => {
+    e.currentTarget.setAttribute("aria-pressed", String(!archivedOn()));
     if (allViewOpen()) renderAll();
   });
   $("#filter").addEventListener("input", () => {

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

@@ -78,13 +78,13 @@ export function rowModel(grant, now) {
   };
 }
 
-// The chip: "invite" with nobody yet, else the active participants' count
-// and a dot while one is here.
+// The chip: "participants · invite" with nobody yet, else the active
+// participants' count and a dot while one is here.
 export function chipModel(grants, now) {
   if (!Array.isArray(grants)) return null;
   const active = grants.map((g) => rowModel(g, now)).filter((row) => row.active);
   if (active.length === 0) {
-    return { text: "invite", count: 0, present: false, title: "Invite a participant to review this session" };
+    return { text: "participants · invite", count: 0, present: false, title: "Invite a participant to review this session" };
   }
   const present = active.filter((row) => row.present).map((row) => row.name);
   const names = active.map((row) => row.name).join(", ");
@@ -99,7 +99,7 @@ export function chipModel(grants, now) {
 export function chipTemplate(chip) {
   if (!chip) return nothing;
   return html`<button type="button" class=${`model participants-chip${chip.count ? "" : " none"}${chip.present ? " present" : ""}`}
-    title=${chip.title} aria-label=${chip.title} aria-haspopup="dialog"><span class="pc-dot" aria-hidden="true"></span>${chip.text}</button>`;
+    title=${chip.title} aria-label=${chip.title} aria-haspopup="dialog" aria-expanded="false"><span class="pc-dot" aria-hidden="true"></span>${chip.text}</button>`;
 }
 
 // A cap field's dollars (a leading $ allowed): {value}, {value: null} when

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

@@ -0,0 +1,57 @@
+// What every popover does alike (chip_popover.js' shell, and the ones that
+// place themselves: context_chips.js, families_view.js' family and chain
+// lists): a modal dialog (modalDialog: aria-modal, Tab and Shift+Tab wrap
+// inside it, a Tab from outside goes in), its opener's aria-expanded, Esc
+// closes it and focus goes back to the opener (focusBack). Their :hover
+// tints are gated on (hover:hover) in index.html, so a tap on a phone
+// leaves none behind. A module of its own: its exports are new (see
+// docs/internals/web-frontend.md, "New exports go in new modules").
+//
+// Not popovers in this sense, so not modal: model_picker.js and
+// command_list.js (a combobox's listbox: the focus stays in its input),
+// ref_menu.js (a menu: arrow keys, Tab leaves it), update_sheet.js (a
+// native <dialog> shown modal: the browser holds the focus).
+
+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);
+}
+
+// Tab past +root+'s last stop goes to its first, Shift+Tab before the first
+// to the last; a Tab from outside (the opener kept the focus, or a redraw
+// dropped it) goes in. +e+: the Tab's keydown.
+export function holdFocus(e, root, doc = document) {
+  const stops = tabStops(root);
+  if (!stops.length) return;
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const at = doc.activeElement;
+  let to = null;
+  if (!root.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();
+}
+
+// +pop+ as every popover is: a dialog (named +label+) that holds the focus
+// while +isOpen()+ and on the page (aria-modal; Tab and Shift+Tab wrap inside it).
+export function modalDialog(pop, { label = null, isOpen, doc = document }) {
+  pop.setAttribute("role", "dialog");
+  pop.setAttribute("aria-modal", "true");
+  if (label) pop.setAttribute("aria-label", label);
+  doc.addEventListener("keydown", (e) => {
+    if (e.key === "Tab" && isOpen() && pop.isConnected) holdFocus(e, pop, doc);
+  });
+}
+
+// Called before +pop+ closes: whether the focus was in it (or +refocus+:
+// an Esc), and so goes back(to) its opener once it has closed.
+// @return (to) => focuses +to+ when it should and still can
+export function focusBack(pop, { refocus = false, doc = document } = {}) {
+  const had = refocus || pop.contains(doc.activeElement);
+  return (to) => { if (had && to?.isConnected) to.focus?.(); };
+}

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

@@ -11,7 +11,9 @@
 //   verdict cards, the recap. A time-gap divider between two folded stubs
 //   folds into the later stub (it shows the divider's words);
 // - the top answer gets a version chip, "v3 · 2 earlier ▾", listing the
-//   versions by their prompts; picking one reveals its stub;
+//   versions by their prompts; picking one reveals its stub; and a ‹ 3/3 ›
+//   switcher before it shows an earlier version's answer in the top
+//   answer's place (revise_switch.js; view only, not stored);
 // - the final answer of an ended turn (verify_target.js's rule, a delegate
 //   report's reply excluded), unstacked or a stack's top, and not a Verify
 //   turn's, gets a Revise button: it arms the composer (app.js).
@@ -28,6 +30,7 @@ import { bubbleCopyText } from "./copy.js";
 import { foldLabel, keepRowInView, lineCount, readFolded, writeFold } from "./answer_fold.js";
 import { clip } from "./format.js";
 import { NOTE_BOUNDARY } from "./turn_range.js";
+import { SWAPPED_CLASS, VIEW_CLASS, stepVersion, switcherTemplate, viewOf } from "./revise_switch.js";
 
 // The classes and attributes this module puts on the history.
 export const HIDDEN_CLASS = "stack-hidden";
@@ -146,7 +149,7 @@ export function historyTurns(historyEl) {
     while (turn.els.at(-1)?.classList.contains("time-gap")) turn.els.pop();
   };
   for (const el of historyEl.children) {
-    if (el.classList.contains(STUB_CLASS) || el.classList.contains(ROW_CLASS)) continue;
+    if (el.classList.contains(STUB_CLASS) || el.classList.contains(ROW_CLASS) || el.classList.contains(VIEW_CLASS)) continue;
     if (el.classList.contains(FOLD_ROW) && el.nextElementSibling?.matches(OPENING)) continue;
     const opening = el.matches(OPENING) ? el : el.querySelector(OPENING);
     if (opening || el.matches(NOTE_BOUNDARY)) {
@@ -187,6 +190,10 @@ export function installReviseStacks({
   const rows = new Map();
   // Each row's answer bubble (its label at a click).
   const rowAnswer = new WeakMap();
+  // The switcher: each stack's version on view (0-based, by its top's id;
+  // none: the latest), and the copy shown for it ({el, source, hidden}).
+  const shown = new Map();
+  const views = new Map();
   let observer = null;
 
   function stubFor(id, opening, stored) {
@@ -234,7 +241,8 @@ export function installReviseStacks({
       : nothing;
     const button = html`<button type="button" class=${isArmed ? "revise-btn armed" : "revise-btn"} data-revise=${id} ?disabled=${off} title=${off ? REVISE_UNAVAILABLE : "Rewrite this answer: your next message revises it, and the earlier version folds away"}>${isArmed ? "Revising…" : "Revise"}</button>`;
     row.classList.toggle("stacked", !!chain);
-    render(html`${versions}${button}`, row);
+    const at = chain ? (shown.get(id) ?? chain.length - 1) : 0;
+    render(html`${chain ? switcherTemplate(id, at, chain.length) : nothing}${versions}${button}`, row);
     rowAnswer.set(row, answer);
   }
 
@@ -287,6 +295,7 @@ export function installReviseStacks({
       keepRows.add(turn.id);
       drawRow(row, { id: turn.id, answer, chain: tops.get(turn.id) || null, openings });
     }
+    syncViews(tops, keepRows, new Map(turns.filter((t) => t.id).map((t) => [t.id, t.answer])));
     // A divider between two folded stubs folds into the later one.
     for (const turn of turns) {
       if (!turn.stub) continue;
@@ -307,13 +316,67 @@ export function installReviseStacks({
     for (const [id, stub] of stubs) if (!keepStubs.has(id) || stub.parentElement !== historyEl) { stub.remove(); stubs.delete(id); }
     for (const [id, row] of rows) if (!keepRows.has(id) || row.parentElement !== historyEl) { row.remove(); rows.delete(id); }
     // A stale row left by a re-render (its map entry gone with the nodes).
-    for (const el of historyEl.querySelectorAll(`:scope > .${STUB_CLASS}, :scope > .${ROW_CLASS}`)) {
-      if (stubs.get(el.dataset.stackStub) !== el && rows.get(el.dataset.reviseFor) !== el) el.remove();
+    const viewEls = new Set([...views.values()].map((v) => v.el));
+    for (const el of historyEl.querySelectorAll(`:scope > .${STUB_CLASS}, :scope > .${ROW_CLASS}, :scope > .${VIEW_CLASS}`)) {
+      if (stubs.get(el.dataset.stackStub) !== el && rows.get(el.dataset.reviseFor) !== el && !viewEls.has(el)) el.remove();
     }
     // What we changed isn't news.
     observer?.takeRecords();
   }
 
+  // The switcher's copies: a stack on an earlier version (its top's row
+  // drawn, that version's answer there) shows a copy of that answer just
+  // before the top answer and its fold row, which hide; any other stack's
+  // copy goes and its top shows again.
+  function syncViews(tops, keepRows, answers) {
+    const wanted = (id) => {
+      const chain = tops.get(id);
+      const k = shown.get(id);
+      if (!chain || k === undefined || k >= chain.length - 1 || !keepRows.has(id)) return null;
+      const source = answers.get(chain[k]);
+      const top = answers.get(id);
+      return source && top ? { source, top, version: k + 1 } : null;
+    };
+    for (const [id, view] of views) {
+      const want = wanted(id);
+      if (want && view.source === want.source && view.top === want.top && view.el.isConnected) continue;
+      view.el.remove();
+      for (const el of view.hidden) el.classList.remove(SWAPPED_CLASS);
+      views.delete(id);
+    }
+    for (const id of [...shown.keys()]) {
+      const want = wanted(id);
+      if (!want) {
+        shown.delete(id);
+        continue;
+      }
+      let view = views.get(id);
+      if (!view) {
+        view = { el: viewOf(want.source, want.version), source: want.source, top: want.top, hidden: [] };
+        views.set(id, view);
+      }
+      const head = want.top.previousElementSibling?.classList.contains(FOLD_ROW) ? want.top.previousElementSibling : null;
+      for (const el of view.hidden) if (el !== want.top && el !== head) el.classList.remove(SWAPPED_CLASS);
+      view.hidden = head ? [want.top, head] : [want.top];
+      for (const el of view.hidden) el.classList.add(SWAPPED_CLASS);
+      const before = head || want.top;
+      if (before.previousElementSibling !== view.el) historyEl.insertBefore(view.el, before);
+    }
+  }
+
+  // The switcher's ‹ or › on its row's stack.
+  function step(row, delta) {
+    const id = row.dataset.reviseFor;
+    const count = row.querySelectorAll("[data-stack-pick]").length;
+    if (!id || count < 2) return;
+    const was = shown.get(id) ?? count - 1;
+    const k = stepVersion(was, count, delta);
+    if (k === was) return;
+    if (k === count - 1) shown.delete(id);
+    else shown.set(id, k);
+    keepRowInView(historyEl, row, decorate);
+  }
+
   function setOpen(stub, open, { save }) {
     keepRowInView(historyEl, stub, () => {
       stub.classList.toggle("open", open);
@@ -326,7 +389,7 @@ export function installReviseStacks({
   // answer's key or its end (its class).
   observer = new MutationObserver((records) => {
     const news = records.some((r) => (r.type === "childList" ? r.target === historyEl
-      && [...r.addedNodes, ...r.removedNodes].some((n) => n.nodeType === 1 && !n.classList.contains(STUB_CLASS) && !n.classList.contains(ROW_CLASS))
+      && [...r.addedNodes, ...r.removedNodes].some((n) => n.nodeType === 1 && ![STUB_CLASS, ROW_CLASS, VIEW_CLASS].some((c) => n.classList.contains(c)))
       : r.attributeName !== "class" || r.target.matches?.(`.bubble.output, .${STUB_CLASS}`)));
     if (news) decorate();
   });
@@ -340,6 +403,13 @@ export function installReviseStacks({
       setOpen(stub, !stub.classList.contains("open"), { save: true });
       return;
     }
+    const stepper = e.target.closest?.("[data-stack-step]");
+    if (stepper) {
+      e.preventDefault();
+      const row = stepper.closest(`.${ROW_CLASS}`);
+      if (row && stepper.getAttribute("aria-disabled") !== "true") step(row, Number(stepper.dataset.stackStep));
+      return;
+    }
     const pick = e.target.closest?.("[data-stack-pick]");
     if (pick) {
       e.preventDefault();

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

@@ -0,0 +1,55 @@
+// The ‹ N/M › switcher on a Revise stack's top answer (revise_stack.js draws
+// it in the top answer's row, before the version chip): the owner reads an
+// earlier version's answer in place of the top one. View only: no server
+// call, nothing stored (a reload shows the latest again).
+//
+// An earlier version is shown as a copy of its answer bubble (the bubble
+// itself stays hidden in its superseded turn): the copy goes just before the
+// top answer (its fold row, answer_fold.js, kept with it), and the top answer
+// and its fold row are hidden by a class while it shows. The copy keeps its
+// kept source (data-copy-source) and its copy buttons, so Copy copies the
+// version on view; it has no answer key (data-answer-turn), so no fold row,
+// claim key or Revise row is drawn for it, and the top answer stays its
+// turn's last answer (verify_target.js, cards_place.js).
+//
+// 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 { html } from "./vendor/lit-html.js";
+
+// The copy of an earlier answer on view, and what hides the top one.
+export const VIEW_CLASS = "stack-view";
+export const SWAPPED_CLASS = "stack-swapped";
+
+// The switcher's words for version +k+ (0-based) of +count+: the counter
+// ("2/3") and its spoken label ("version 2 of 3").
+export function switchText(k, count) {
+  return { text: `${k + 1}/${count}`, label: `version ${k + 1} of ${count}` };
+}
+
+// Version +k+ moved by +delta+, kept in 0…count-1.
+export function stepVersion(k, count, delta) {
+  return Math.min(Math.max(k + delta, 0), Math.max(count - 1, 0));
+}
+
+// The switcher for the stack +id+ (its top turn's id) showing version +k+
+// of +count+. The buttons stay focusable at either end (aria-disabled, not
+// disabled: a press there keeps the focus where it is).
+export function switcherTemplate(id, k, count) {
+  const { text, label } = switchText(k, count);
+  const first = k <= 0;
+  const last = k >= count - 1;
+  return html`<span class="stack-switch" role="group" aria-label="Answer versions" data-stack-switch=${id}><button type="button" class="stack-switch-btn" data-stack-step="-1" aria-label="Previous version" title="Read the previous version" aria-disabled=${first ? "true" : "false"}>‹</button><span class="stack-switch-n" title=${label}><span aria-hidden="true">${text}</span><span class="stack-switch-sr" aria-live="polite">${label}</span></span><button type="button" class="stack-switch-btn" data-stack-step="1" aria-label="Next version" title="Read the next version" aria-disabled=${last ? "true" : "false"}>›</button></span>`;
+}
+
+// A copy of +answer+ (an earlier version's answer bubble) to show in the top
+// answer's place, titled as version +version+: no answer key,
+// none of the history's state classes.
+export function viewOf(answer, version) {
+  const view = answer.cloneNode(true);
+  for (const attr of ["id", "data-answer-turn", "data-reply-key", "data-stack-of", "data-line-key"]) view.removeAttribute(attr);
+  view.classList.remove("stack-hidden", "folded", SWAPPED_CLASS);
+  view.classList.add(VIEW_CLASS);
+  view.dataset.stackView = String(version);
+  for (const btn of view.querySelectorAll(".copy-btn[data-copied]")) delete btn.dataset.copied;
+  return view;
+}

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

@@ -50,13 +50,13 @@ export function scopeTemplate(scope, { error = null, where = () => ({ hash: "" }
   const at = where();
   const allHref = () => allScopeHref(where().hash, scope.dir);
   const all = html`<a class="scope-all" href=${allScopeHref(at.hash, scope.dir)} title=${"Sessions of every project"} @click=${(e) => { e.currentTarget.href = allHref(); }}>all</a>`;
-  if (error) return html`<button id="scopePick" class="scope-name error" type="button" aria-haspopup="dialog" title=${error}>folder not found</button>${all}`;
-  if (scope.projectName) return html`<button id="scopePick" class="scope-name" type="button" aria-haspopup="dialog" title=${`Sessions of ${scope.projectDir}`}>${scope.projectName}</button>${all}`;
+  if (error) return html`<button id="scopePick" class="scope-name error" type="button" aria-haspopup="dialog" aria-expanded="false" title=${error}>folder not found</button>${all}`;
+  if (scope.projectName) return html`<button id="scopePick" class="scope-name" type="button" aria-haspopup="dialog" aria-expanded="false" title=${`Sessions of ${scope.projectDir}`}>${scope.projectName}</button>${all}`;
   const dir = scope.dir || scope.serverDir;
   const backHref = () => projectScopeHref(scope.backDir, where().hash);
   const back = scope.backName
     ? html`<a class="scope-all scope-back" href=${projectScopeHref(scope.backDir, at.hash)} title=${`Sessions of ${scope.backName} only`} @click=${(e) => { e.currentTarget.href = backHref(); }}>← ${scope.backName}</a>`
     : nothing;
   const newSession = dir ? html`<span class="scope-where" title=${`New sessions start in ${dir}`}>new session in<span class="path"><bdi>${dir}</bdi></span></span>` : nothing;
-  return html`<button id="scopePick" class="scope-name" type="button" aria-haspopup="dialog" title="Sessions of every project">all projects</button>${back}${newSession}`;
+  return html`<button id="scopePick" class="scope-name" type="button" aria-haspopup="dialog" aria-expanded="false" title="Sessions of every project">all projects</button>${back}${newSession}`;
 }