samagotchi 0.152.0 → 0.154.0

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

@@ -42,6 +42,11 @@ const NOT_AN_IMAGE = "the renderer's SVG can't be shown as an image";
 // this tall and scrolls sideways instead.
 const MIN_SHOWN_HEIGHT = 120;
 
+// The zoom button's words: the picture fitted to the column, or at its natural size.
+const ZOOM_IN = "Show at full size";
+const ZOOM_OUT = "Fit to the column";
+
+const ZOOM_ICON = html`<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><circle cx="7" cy="7" r="4.25" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="m10.2 10.2 3.3 3.3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`;
 const ICON = html`<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M5.5 4 2 8l3.5 4M10.5 4 14 8l-3.5 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 
 // The picture's URL and size. The XML parser reads the root, as the image will: a
@@ -286,6 +291,9 @@ export function createBlockHost({
     return Promise.race([image, bound]).finally(() => clearTimeout(timer));
   }
 
+  // The picture's name says where its words are: the source <pre> is hidden, so a
+  // screen reader reaches it through the toggle. The zoom is a button too, for the
+  // keyboard (a click on the picture does the same); it shows on keyboard focus only.
   function makeFigure(picture, themeName, lang) {
     const figure = doc.createElement("figure");
     figure.className = DRAWN;
@@ -294,17 +302,33 @@ export function createBlockHost({
     scroll.className = "block-scroll";
     const img = doc.createElement("img");
     img.className = "block-img";
-    img.alt = `${lang} diagram`;
+    img.alt = `${lang} diagram, its source under the Show the source button`;
     showPicture(img, picture);
     scroll.append(img);
-    const toggle = doc.createElement("button");
-    toggle.type = "button";
-    toggle.className = "block-toggle";
-    litRender(ICON, toggle);
-    figure.append(scroll, toggle);
+    const zoom = button("block-zoom", ZOOM_ICON);
+    const toggle = button("block-toggle", ICON);
+    figure.append(scroll, zoom, toggle);
+    setZoomed(figure, false);
     return figure;
   }
 
+  function button(className, icon) {
+    const el = doc.createElement("button");
+    el.type = "button";
+    el.className = className;
+    litRender(icon, el);
+    return el;
+  }
+
+  function setZoomed(figure, on) {
+    figure.classList.toggle("natural", on);
+    const zoom = figure.querySelector(":scope > .block-zoom");
+    if (!zoom) return;
+    zoom.setAttribute("aria-pressed", on ? "true" : "false");
+    zoom.setAttribute("aria-label", on ? ZOOM_OUT : ZOOM_IN);
+    zoom.title = on ? ZOOM_OUT : ZOOM_IN;
+  }
+
   function showPicture(img, { url, width, height }) {
     if (width && height) {
       img.setAttribute("width", width);
@@ -476,7 +500,7 @@ export function createBlockHost({
     scan(root);
 
     root.addEventListener("mousedown", (e) => {
-      if (e.target.closest?.(".block-toggle")) e.preventDefault();
+      if (e.target.closest?.(".block-toggle, .block-zoom")) e.preventDefault();
     });
     // Delegated, so a Revise clone's work too.
     root.addEventListener("click", (e) => {
@@ -490,7 +514,10 @@ export function createBlockHost({
       }
       const note = e.target.closest?.(".block-note");
       if (note) { copy(note.dataset.text); return; }
-      if (e.target.closest?.(".block-img")) e.target.closest(`.${DRAWN}`).classList.toggle("natural");
+      if (e.target.closest?.(".block-zoom, .block-img")) {
+        const figure = e.target.closest(`.${DRAWN}`);
+        setZoomed(figure, !figure.classList.contains("natural"));
+      }
     });
   }
 

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

@@ -1,4 +1,4 @@
-/* A drawn fenced block (block_host.js): the picture scales to the column, a click shows its natural size in a scroller; the toggle shows the source, in the block's place. In a .code-wrap the copy button sits top-right, so the toggle sits left of it. */
+/* A drawn fenced block (block_host.js): the picture scales to the column, a click shows its natural size in a scroller; the toggle shows the source, in the block's place. In a .code-wrap the copy button sits top-right, so the toggle sits left of it. The zoom button, the keyboard's way to the natural size, shows on keyboard focus only, left of the toggle. */
 .block-drawn{position:relative;margin:0 0 12px;white-space:normal}
 .code-wrap>.block-drawn{margin:0}
 .code-wrap>.block-drawn.source{height:0}
@@ -8,11 +8,15 @@
 .block-img{display:block;max-width:100%;max-height:50000px;object-fit:contain;height:auto;margin:0 auto;cursor:zoom-in}
 .block-drawn.natural .block-img{max-width:50000px;margin:0;cursor:zoom-out}
 .block-drawn.source .block-scroll{display:none}
-.block-toggle{position:absolute;top:5px;right:5px;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:0 5px;border-radius:6px;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text-3);opacity:0;transition:opacity .12s}
+.block-toggle,.block-zoom{position:absolute;top:5px;right:5px;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:0 5px;border-radius:6px;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text-3);opacity:0;transition:opacity .12s}
 .code-wrap>.block-drawn>.block-toggle{right:34px}
-.block-toggle svg{display:block}
-.block-drawn:hover>.block-toggle,.code-wrap:hover>.block-drawn>.block-toggle,.block-toggle:focus-visible,.block-drawn.source>.block-toggle{opacity:1}
-.block-toggle:hover:not(:disabled){filter:none}@media(hover:hover){.block-toggle:hover:not(:disabled){color:var(--text-bright)}}
+.block-zoom{right:34px}
+.code-wrap>.block-drawn>.block-zoom{right:63px}
+.block-drawn.source>.block-zoom{display:none}
+.block-zoom:not(:focus-visible){pointer-events:none}
+.block-toggle svg,.block-zoom svg{display:block}
+.block-drawn:hover>.block-toggle,.code-wrap:hover>.block-drawn>.block-toggle,.block-toggle:focus-visible,.block-zoom:focus-visible,.block-drawn.source>.block-toggle{opacity:1}
+.block-toggle:hover:not(:disabled),.block-zoom:hover:not(:disabled){filter:none}@media(hover:hover){.block-toggle:hover:not(:disabled),.block-zoom:hover:not(:disabled){color:var(--text-bright)}}
 .block-drawn.source:not(:last-child){margin:0}
 /* Its words are the attribute's, so a bubble's text stays the answer's (block_host.js fail). */
 .block-note{margin:4px 0 12px;font-size:12px;color:var(--text-3);white-space:normal}

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

@@ -305,8 +305,8 @@ export function continueRefusal(error, sessions = []) {
 }
 
 // The open-children refusal as the toast shows it: the open delegates the
-// continue can't move to the next link (an older chi's worker, a chi
-// REPL), each a link to its session with what to do about it.
+// continue can't move to the next link (an older chi's worker, a
+// one-shot run), each a link to its session with what to do about it.
 // @param hrefFor (id) → its page's href
 export function openChildrenTemplate(prevId, children, hrefFor) {
   const n = children.length;

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

@@ -12,7 +12,7 @@
 // URL-safe and a space is one "+".
 //
 // Normalized: whitespace collapsed, and what the participant page shows
-// instead (ParticipantView::Redact): secret shapes "[redacted]" (so a link
+// instead (Samagotchi::Redact): secret shapes "[redacted]" (so a link
 // never carries one, and matches the participant's redacted text), and on
 // the owner's page the session's folder relative ("<cwd>/x" → "x",
 // "<cwd>" → "."), the home folder "~". Not the owner's token (Redact's
@@ -41,10 +41,10 @@ export const HIT_CLASS = "claim-hit";
 const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
 export const MARK = "[redacted]";
-// ParticipantView::Redact's PATTERNS and VALUES
-// (lib/samagotchi/web/participant_view.rb), as JS: keep them in step.
+// Samagotchi::Redact's PATTERNS and VALUES
+// (lib/samagotchi/redact.rb), as JS: keep them in step.
 // spec/fixtures/redact_cases.json holds cases both sides read the same
-// (participant_view_spec.rb, claim_link.test.js).
+// (redact_spec.rb, claim_link.test.js).
 const SECRET_PATTERNS = [
   /-----BEGIN [A-Z0-9 ]*PRIVATE KEY-----[\s\S]*?(?:-----END [A-Z0-9 ]*PRIVATE KEY-----|$)/g,
   /\bsk-(?:ant-|proj-)?[A-Za-z0-9_-]{16,}/g,

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

@@ -0,0 +1,110 @@
+// The composer's mode on the owner page (used by app.js, the store's
+// `composer` redraw): its placeholder, key hint, action button, the attach
+// button, the start page's empty state and the delivery line's row, from the
+// open session, its owner and whether its turn runs.
+
+// A phone's composer fits a few words and has no Shift+Enter: the short
+// placeholder there.
+export const NARROW_QUERY = "(max-width: 600px)";
+
+// The key hint under the composer (shown while it has focus; on the start
+// page only: in a session the placeholder carries it, the hint row is gone).
+export const SEND_HINT = "Enter to send · Shift+Enter for a newline · ↑ history";
+
+// What the composer shows, pure: +selected+ the open session's id (null: the
+// start page), +owner+ its owner, +running+ whether its turn runs, +narrow+ a
+// phone's width. While a turn runs, Send still sends: the prompt merges into
+// the turn at its next step (steering); Cancel is its own button then.
+// @return {placeholder, hint, button, disabled, empty, clearHistory,
+//   attachHidden, delivery}: +disabled+ undefined while a turn runs (the
+//   button keeps whatever a send in flight set); +empty+ the start page's
+//   empty state shown, +clearHistory+ #history emptied (the start page only);
+//   +delivery+ the delivery line's mode (delivery_line.js show).
+export function composerMode({ selected, owner, running, narrow }) {
+  const session = !!selected;
+  const tui = session && owner === "tui";
+  const live = !!running && session;
+  const pick = (long, short) => (narrow ? short : long);
+  // No images for a session a terminal owns (it takes no message from here);
+  // on a phone none while a turn runs either: the row keeps its room for the
+  // message box (steering).
+  const attachHidden = tui || (live && !!narrow);
+  // The delivery line's row in a session: the key hint while idle, where a
+  // message goes in while the turn runs. A terminal owns the session: the
+  // composer is off, so is its row.
+  const delivery = !session || tui ? "off" : running ? "running" : "idle";
+  const base = { attachHidden, delivery, empty: false, clearHistory: false };
+  if (live) {
+    return {
+      ...base,
+      placeholder: pick("Running… a message goes in at the next step · Enter to send · Alt+Enter queues", "Steer the turn…"),
+      hint: SEND_HINT, button: "Send", disabled: undefined,
+    };
+  }
+  if (!session) {
+    return {
+      ...base,
+      placeholder: "Ask chi anything…", hint: "Enter to start · Shift+Enter for a newline", button: "Start", disabled: false,
+      empty: true, clearHistory: true,
+    };
+  }
+  if (tui) {
+    return {
+      ...base,
+      placeholder: pick("A terminal chi owns this session · its one-turn run (chi --non-interactive) lets go as it ends", "A terminal chi owns this session"),
+      hint: "", button: "Send", disabled: true,
+    };
+  }
+  // The keys are in the delivery line's row above.
+  return { ...base, placeholder: "Message chi…", hint: SEND_HINT, button: "Send", disabled: false };
+}
+
+// The composer's mode drawn: update() is the store's `composer` redraw, and a
+// window crossing the phone's width redraws it too (an input the store
+// doesn't hold, with the composer as its only reader: the bar doesn't read it).
+//
+// +els+: {body, prompt, hint, button, attach, empty, history}. +store+: the
+// page's session store (selected, current.owner; read only). +liveTurn+:
+// live_turn.js's (running). +startPage+: start_page.js's (restoreStartPick,
+// syncModelPick, dropChoices). +deliveryControl+: delivery_line.js's.
+// +moreSheet+: more_sheet.js's (⋯ is a phone's alone). +fitPrompt()+,
+// +placeToast()+: the page's. +win+: the window (matchMedia).
+export function createComposerMode({
+  els, store, liveTurn, startPage, deliveryControl, moreSheet, fitPrompt, placeToast, win = globalThis,
+}) {
+  const narrowScreen = win.matchMedia(NARROW_QUERY);
+  let hadSession = false;
+
+  function update() {
+    // In a session the box is one line: its minimum follows the class.
+    if (els.body.classList.toggle("has-session", !!store.selected) !== hadSession) {
+      hadSession = !hadSession;
+      // Back on the start page: its remembered model, not the last link's.
+      if (!hadSession) startPage.restoreStartPick();
+      fitPrompt();
+      placeToast();
+    }
+    startPage.syncModelPick();
+    // The start page's choice was for a new session: opening a session drops it.
+    if (store.selected) startPage.dropChoices();
+    const mode = composerMode({
+      selected: store.selected, owner: store.current.owner, running: liveTurn.running, narrow: narrowScreen.matches,
+    });
+    els.attach.hidden = mode.attachHidden;
+    deliveryControl.show(mode.delivery);
+    els.prompt.placeholder = mode.placeholder;
+    els.hint.textContent = mode.hint;
+    els.button.textContent = mode.button;
+    if (mode.disabled !== undefined) els.button.disabled = mode.disabled;
+    els.empty.classList.toggle("hidden", !mode.empty);
+    if (mode.clearHistory) els.history.replaceChildren();
+  }
+
+  narrowScreen.addEventListener("change", () => {
+    update();
+    // ⋯ is a phone's alone: a window grown past it takes its sheet along.
+    if (!narrowScreen.matches && moreSheet.isOpen()) moreSheet.close();
+  });
+
+  return { update };
+}

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

@@ -97,13 +97,13 @@ export function deleteConfirmText(session) {
 }
 
 // The badge on a session a process holds right now (the list's `owner`):
-// a worker (shared: every UI can send), or a plain terminal chi (not shared).
+// a worker (every UI can send), or a terminal chi's one-turn run (--non-interactive).
 export function ownerBadge(owner, id) {
   if (owner === "worker") {
     return { kind: "worker", text: "live", title: `A worker runs this session; a terminal joins with: chi --attach ${id}` };
   }
   if (owner === "tui") {
-    return { kind: "tui", text: "terminal", title: "A terminal chi owns this session and doesn't share it (chi --shared would)" };
+    return { kind: "tui", text: "terminal", title: "A terminal chi runs one turn in this session (chi --non-interactive) and lets go as it ends" };
   }
   return null;
 }
@@ -171,7 +171,7 @@ export function childrenSummary(parent, sessions) {
 
 // Whether the info bar offers "stop": only while a worker runs the session
 // (the list says so, or this page streams from one a send just woke). A
-// stopped or idle-exited session has nothing to stop, and a chi REPL's is
+// stopped or idle-exited session has nothing to stop, and a one-turn run's is
 // refused by the server.
 export function canStopSession({ owner, streaming }) {
   if (owner === "tui") return false;

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

@@ -0,0 +1,81 @@
+import { ownerClaimHash, participantClaimLink, selectionClaim, showClaim, turnIdOf } from "./claim_link.js";
+import { sessionHash } from "./route.js";
+
+// Where a claim's text can be on the owner's page: answers, own messages, steps.
+export const CLAIM_ROOTS = ".bubble.output, .bubble.user .user-message, .gen-text";
+
+// The owner page's claim links (used by app.js; claim_link.js does the text
+// and DOM work): a claim link opened on this page (#/s/<id>?t=…&q=…, or the
+// participant's #s=<id>&t=… opened in this browser) shown once its session is
+// drawn, and annotate's "Copy link" for a selection. The participant page has
+// its own copies on purpose (docs/internals/web-frontend.md, Two pages).
+//
+// +historyEl+: #history. +store+: the page's session store (selected,
+// current.dir, sessions; read only). +claimTarget()+: participants_panel.js's
+// (the people a link would open for, or null). +toast(text, action,
+// options)+, +copyText(text)+ (copy.js), +allViewOpen()+: the page's.
+// +home+: the home folder the page shows as ~ (body data-home). +win+: the
+// window (location, history).
+export function createOwnerClaim({
+  historyEl, store, claimTarget, toast, copyText, allViewOpen, home = "", win = globalThis,
+}) {
+  // A claim link waiting for its session to be drawn (selectFromHash sets it).
+  let pendingClaim = null;
+
+  // How the participant page shows this page's text (claim_link.js).
+  function opts() {
+    return { home, cwd: store.current.dir || "" };
+  }
+
+  function pending(claim) {
+    pendingClaim = claim;
+  }
+
+  // The claim link's quote scrolled to and marked, its text read as the
+  // participant page shows it (the session's folder relative, home ~); a
+  // quote not found marks its turn; neither found: the top, and a toast.
+  // The hash is the session's again (select() already set it when it
+  // switched), so the same link opened again is a hashchange.
+  function showPending() {
+    const claim = pendingClaim;
+    if (!claim || claim.sessionId !== store.selected) return;
+    pendingClaim = null;
+    const { location, history } = win;
+    if (!allViewOpen() && location.hash !== sessionHash(store.selected)) {
+      history.replaceState(null, "", location.pathname + location.search + sessionHash(store.selected));
+    }
+    if (showClaim(historyEl, claim, { roots: CLAIM_ROOTS, opts: opts() })) return;
+    historyEl.scrollTop = 0;
+    toast("The linked turn isn't in this session.");
+  }
+
+  // Annotate's "Copy link" for a selection in a turn's answer, step or own
+  // message: the participant page's link when the session has a person
+  // active (it opens in the browser their review link was opened in: one
+  // link per browser, the cookie), else this page's own.
+  function linkFor(source, range) {
+    // Not in a Revise stack's switched copy (revise_switch.js: view only, no claim key; Verify isn't offered there either).
+    if (!store.selected || !["answer", "step", "user"].includes(source.kind) || !historyEl.contains(source.root)
+        || source.root.closest("[data-stack-view]")) return null;
+    const turnId = turnIdOf(historyEl, source.root);
+    if (!turnId) return null;
+    const claim = { turnId, ...selectionClaim(source.root, range, opts()) };
+    if (!claim.q) return null;
+    const target = claimTarget();
+    if (!target) {
+      const { location } = win;
+      return { url: `${location.origin}${location.pathname}${location.search}${ownerClaimHash(store.selected, claim)}`,
+               title: "A link to this on your page (no person is invited to this session)" };
+    }
+    const whose = target.names.map((name) => `${name}'s`).join(" or ");
+    return { url: participantClaimLink(target.base, store.selected, claim),
+             title: `A link to this for ${whose} browser: it opens where their review link was opened (one link per browser). Opened here, it shows your page.` };
+  }
+
+  async function copyLink({ url }) {
+    if (await copyText(url)) toast("Link copied");
+    else toast(`Couldn't copy: ${url}`, null, { sticky: true });
+  }
+
+  return { opts, pending, showPending, linkFor, copyLink };
+}

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

@@ -0,0 +1,112 @@
+import { selectionClaim } from "./claim_link.js";
+import { CLAIM_ROOTS } from "./owner_claim.js";
+import { authorBadge } from "./participant_names.js";
+import { sessionHash } from "./route.js";
+import { CHECK_NOT_ON_PAGE, ownerCheckHash } from "./verdict_card.js";
+import { freshURL, placeVerdictWithFresh, settleRunning } from "./verdict_fresh.js";
+import { VERIFY_UNAVAILABLE, verifyWorkerUnavailable } from "./verify_preset.js";
+import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
+
+// The owner page's Verify (used by app.js): its verdict cards in the history
+// (a live verdict, a session's saved ones), Verify fresh on an unclear
+// verdict's card (verdict_fresh.js), Verify's claim from a selection, and
+// the composer's armed claim (anchor/set/clear: the one holder; the next
+// send makes it a Verify turn).
+// The participant page has its own copies on purpose
+// (docs/internals/web-frontend.md, Two pages).
+//
+// +historyEl+: #history. +store+: the page's session store (it writes
+// current.verdicts and current.verifyFresh through store.update; reads
+// selected, sessions, workerFeatures, bridgeUp). +api(path, opts)+: data.js's.
+// +claim+: owner_claim.js's (its opts()). +liveTurn+: live_turn.js's (whether
+// a turn runs, its id). +toast(text)+: the page's. +win+: the window (a
+// verdict's check in another session opens by its hash).
+export function createOwnerVerify({ historyEl, store, api, claim, liveTurn, toast, win = globalThis }) {
+  // Verify fresh's failed starts, by check (verdict_fresh.js keeps them here).
+  const freshErrors = {};
+  // The composer's armed Verify claim ({turn_id, quote}) or null: set by the
+  // Verify preset, a restored Verify turn's draft; let go by an emptied
+  // composer, another session, the send's ack.
+  let armed = null;
+
+  function anchor() {
+    return armed;
+  }
+
+  function set(next) {
+    armed = next;
+  }
+
+  // clear() lets go of whatever is armed; clear(a) only of +a+ (a send's ack
+  // for the claim it took, not one armed since).
+  function clear(...only) {
+    if (only.length && only[0] !== armed) return;
+    armed = null;
+  }
+
+  // A verdict ({check_turn_id, verdict, fresh?, by?…}) onto its check's
+  // card: into the session's list once, and a fresh one ends its check's
+  // "verifying fresh".
+  function placeVerdict(record) {
+    if (!record) return;
+    const known = (store.current.verdicts || []).some((item) => item.check_turn_id === record.check_turn_id);
+    const patch = {};
+    if (!known) patch.verdicts = [...(store.current.verdicts || []), record];
+    // A fresh verdict ends its check's "verifying fresh" (the card shows it).
+    if (record.fresh) patch.verifyFresh = settleRunning(store.current.verifyFresh, record);
+    store.update({ current: patch });
+    const badge = record.by && authorBadge(record.by);
+    placeVerdictWithFresh(historyEl, record, {
+      who: badge ? badge.name : "You",
+      author: record.by || null,
+      roots: CLAIM_ROOTS,
+      opts: claim.opts(),
+      onMissingCheck: (missing) => {
+        const hash = ownerCheckHash(store.sessions, store.selected, missing.check_turn_id);
+        if (hash) win.location.hash = hash;
+        else toast(CHECK_NOT_ON_PAGE);
+      },
+    }, freshState());
+  }
+
+  // The owner's Verify fresh on an unclear verdict's card (verdict_fresh.js):
+  // always theirs to start; its running check links to the child's session.
+  function freshState() {
+    const id = store.selected;
+    const unavailable = verifyWorkerUnavailable(store.current.workerFeatures, store.current.bridgeUp);
+    return {
+      verdicts: store.current.verdicts || [],
+      running: store.current.verifyFresh || [],
+      errors: freshErrors,
+      canStart: !!id && !unavailable,
+      unavailableReason: unavailable ? VERIFY_UNAVAILABLE : null,
+      start: async (of) => {
+        try {
+          const body = await api(freshURL(id, of), { method: "POST", body: "{}" });
+          return { ok: true, child_id: body.child_id || null };
+        } catch (error) {
+          return { ok: false, error: error.message };
+        }
+      },
+      childHref: (childId) => sessionHash(childId),
+    };
+  }
+
+  // The session's saved verdicts, onto the history just drawn.
+  function renderSaved() {
+    for (const record of store.current.verdicts || []) placeVerdict(record);
+  }
+
+  // Verify's claim: a selection in an ended turn's final answer (the only
+  // text Engine#verified_anchor takes; verify_target.js), else null and no
+  // Verify on the bar.
+  function anchorFor({ source, range }) {
+    if (source?.kind !== "answer" || !range) return null;
+    const running = liveTurn.running ? { turnId: liveTurn.timing.turnId || null } : null;
+    const turnId = verifyTurnOf(historyEl, source.root, OWNER_FINAL, { running });
+    const quote = turnId ? selectionClaim(source.root, range, claim.opts()).q : "";
+    return turnId && quote ? { turn_id: turnId, quote } : null;
+  }
+
+  return { placeVerdict, freshState, renderSaved, anchorFor, anchor, set, clear };
+}

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

@@ -10,7 +10,7 @@
 // - live_timing.js sets `timing().activeTurn` in place (start, finish,
 //   finishLine): the running turn's own clock, which mergeTurnTiming keeps.
 // - verdict_fresh.js `startFresh` pushes onto `fresh.running`, which is
-//   `verifyFresh` (verifyFreshState hands the array out): returning the
+//   `verifyFresh` (owner_verify.js freshState hands the array out): returning the
 //   entry for an update would leave the card holding the old array.
 //
 // A new module: the page's modules are cached at unversioned URLs, and a
@@ -46,12 +46,12 @@ export const FIELDS = {
   verdicts: {
     source: (d) => list(d.session?.verdicts),
     redraws: [],
-    writers: "placeVerdict (its card draws itself: placeVerdictWithFresh)",
+    writers: "owner_verify.js placeVerdict (its card draws itself: placeVerdictWithFresh)",
   },
   verifyFresh: {
     source: (d) => list(d.session?.verify_fresh),
     redraws: [],
-    writers: "placeVerdict (settleRunning); verdict_fresh.js startFresh pushes in place (D8)",
+    writers: "owner_verify.js placeVerdict (settleRunning); verdict_fresh.js startFresh pushes in place (D8)",
   },
   createdAt: { redraws: ["infoBar"], writers: "the payload" },
   ctxPct: { redraws: ["infoBar"], writers: "stream_handlers.js (generation_chunk, context_status)" },

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

@@ -1,15 +1,15 @@
 import { GRIP_OPEN_PX } from "./composer_size.js";
 import { stripGripAction, stripGripTitle } from "./strip.js";
 
-// The latest-sessions strip's grip (used by app.js): the handle on the edge
+// The latest-sessions strip's grip (used by strip_hidden.js): the handle on the edge
 // between the strip and the chat, the composer's grip's twin, mirrored. A
 // drag up (or a tap) hides the strip, a drag down (or a tap) shows it, and
 // Enter or Space toggles too. The strip snaps: unlike the composer's box it
 // does not follow the pointer, so nothing is measured while dragging — only
 // whether the release would act (.will-toggle, the pill in the accent).
 // The grip owns its title and aria-expanded (composer_grip.js's
-// drawFoldControls does the same for the composer's): app.js calls the
-// returned refresh() from applyStripHidden, and nothing else writes them.
+// drawFoldControls does the same for the composer's): strip_hidden.js calls
+// the returned refresh() from its apply, and nothing else writes them.
 // No click listener: a click still fires after pointerdown's preventDefault
 // and would toggle twice. No document listener either: the composer's grip
 // needs one for typing on the page, this one acts only on itself.

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

@@ -0,0 +1,65 @@
+import { readStored, writeStored } from "./storage.js";
+import { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
+import { createStripGrip } from "./strip_grip.js";
+
+// The saved choice (storage.js): the strip hidden; chi_zen is zen mode's old
+// name, read when the new key was never written.
+export const STRIP_HIDDEN_KEY = "chi_strip_hidden";
+const ZEN_KEY = "chi_zen";
+
+// The latest-sessions strip hidden or shown (used by app.js): the body's
+// strip-hidden class, the grip (strip_grip.js) that toggles it, and the short
+// window's rule. The strip can be hidden for more chat room; the choice stays
+// per browser (it replaced zen mode, so a zen user starts hidden). A short
+// window hides the strip by itself, so the stage keeps room for a card that
+// waits (its question and choices); the grip brings it back until the window
+// is tall again. Not saved: the saved choice is the user's own hide or show.
+//
+// +gripEl+: #stripGrip. +body+: the page's body (the class). +onApply()+:
+// after each change (the top bar's title follows: app.js updateSessionTitle).
+// +closeFamilyPop()+: a hide takes the strip's family popover along. +win+:
+// the window (matchMedia). +storage+: storage.js's guarded read and write.
+// Applied once at creation.
+export function createStripHidden({
+  gripEl, body = globalThis.document.body, onApply, closeFamilyPop, win = globalThis,
+  storage = { read: readStored, write: writeStored },
+}) {
+  const shortWindow = win.matchMedia(SHORT_WINDOW_QUERY);
+  let shownWhileShort = false;
+
+  function saved() {
+    const value = storage.read(STRIP_HIDDEN_KEY);
+    return value === null ? storage.read(ZEN_KEY) === "1" : value === "1";
+  }
+
+  // The grip is given the hidden state and the toggle; it speaks its own
+  // title and aria-expanded, refreshed after every change.
+  const gripRefresh = createStripGrip({
+    gripEl,
+    isHidden: () => body.classList.contains("strip-hidden"),
+    setHidden: (hidden) => setHidden(hidden),
+  });
+
+  function apply() {
+    body.classList.toggle("strip-hidden", stripAutoHidden({
+      saved: saved(), short: shortWindow.matches, shownWhileShort,
+    }));
+    gripRefresh();
+    onApply();
+  }
+
+  function setHidden(hidden) {
+    if (hidden) closeFamilyPop();
+    storage.write(STRIP_HIDDEN_KEY, hidden ? "1" : "0");
+    shownWhileShort = !hidden && shortWindow.matches;
+    apply();
+  }
+
+  apply();
+  shortWindow.addEventListener("change", () => {
+    if (!shortWindow.matches) shownWhileShort = false;
+    apply();
+  });
+
+  return { setHidden };
+}