samagotchi 0.154.0 → 0.155.0

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

@@ -0,0 +1,256 @@
+// Finds and watches the fenced blocks a drawer may draw (docs/internals/block-renderers.md).
+// One observer per turn root, filtered to TEXTS, as copy.js and answer_fold.js:
+// every path that fills a root (a reload, a session switch, a turn's end, an
+// answer_display, Revise's clones, a step's swap) arrives the same way, and
+// cards, the asking slot and question replies are never touched. A block is
+// drawn when it comes near its scroller's view (a closed <details> opening is
+// such a coming near), and one that moves to another scroller while it waits
+// (the stage's hand-off to #history) is watched there.
+//
+// What draws is a drawer's: block_host.js's frames for a bundle's renderers,
+// after any core drawers. The DOM is the state, as block_source.js says: a
+// figure right before the <pre> says it is drawn, data-block-failed on the
+// <pre> says it isn't to be tried again.
+//
+// The drawer contract:
+// - claims(lang): true when it draws this language. A Promise of that when it
+//   can't say yet (the bundle drawer's list): the next drawer is asked only
+//   after it says no. The first that claims draws; a language no drawer claims
+//   is left alone.
+// - needsDraw(pre, figure): whether the block is to be watched and drawn.
+//   +figure+ is its drawn figure or null: a drawn block comes here too (the
+//   frame drawer redraws one in another theme). It may settle the block on the
+//   spot (a cache hit placed, a refusal's line) and say false.
+// - draw(pre, { reconsider }): draws it now; a Promise while it runs, during
+//   which the block isn't watched again. reconsider(pre) has the watcher look
+//   at the block afresh (a draw that has to try again).
+// - sessionChanged() (optional): the open session changed.
+// A draw that throws or rejects fails its block (failBlock, logged); it never
+// stops the other blocks.
+//
+// What a drawer must keep to:
+// - What it draws goes in a <figure class="block-drawn"> placed directly before
+//   the <pre> (the <pre> is its nextElementSibling): figureOf, the toggle,
+//   rejoin and a Revise clone all read it there. The <pre> stays, hidden.
+// - holdingView needs the turn roots: the drawer is given them by its host.
+// - reconsider(pre) called during a synchronous part of draw starts a new draw
+//   nested in this one (with a watch that fires at once, as the specs' does).
+//
+// rejoin, failBlock, holdingView and scrollerOf are this module's exports, not
+// block_source.js's: new exports go in new modules (web-frontend.md).
+//
+// 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 { DRAWN, figureOf, setSourceShown } from "./block_source.js";
+import { copyText } from "./copy.js";
+import { keepFollowing, shouldFollowScroll } from "./scroll.js";
+import { TEXTS } from "./text_roots.js";
+
+const BLOCKS = "pre[data-lang]";
+const IO_MARGIN = "600px 0px";
+
+// The nearest scroller holding +el+, +root+ at the latest. IntersectionObserver
+// needs it named: with root:null a rootMargin doesn't pass an overflow:auto
+// between, so a block just under #history's fold wouldn't count.
+export function scrollerOf(el, root, win = window) {
+  for (let at = el.parentElement; at && at !== root; at = at.parentElement) {
+    const { overflowY } = win.getComputedStyle(at);
+    if (overflowY === "auto" || overflowY === "scroll") return at;
+  }
+  return root;
+}
+
+const rootOf = (roots, el) => roots.find((root) => root.contains(el)) || roots[0];
+
+// +mutate+ with the view held: a viewer at the bottom stays there, and a
+// block above a reader's view keeps what they read where it is. Browsers that
+// anchor scrolling have done it by the second read, and there is nothing left.
+// @param bottomOf () => the inserted thing's bottom, after +mutate+
+export function holdingView(pre, roots, mutate, bottomOf, win = window) {
+  const scroller = scrollerOf(pre, rootOf(roots, pre), win);
+  if (shouldFollowScroll(scroller)) return keepFollowing(scroller, mutate);
+  const before = pre.getBoundingClientRect().bottom;
+  if (before > scroller.getBoundingClientRect().top) return mutate();
+  const result = mutate();
+  const after = bottomOf();
+  if (after !== before) scroller.scrollTop += after - before;
+  return result;
+}
+
+// The <pre> stays as it is, under one muted line: never markup (the words are
+// a drawer's, driven by the model's input), and shown by CSS, so a bubble's
+// textContent, its dedupe and an annotation's text stay what they were (copy.js's
+// rule for its buttons). A click on the line copies it (the watcher's listener).
+export function failBlock(pre, lang, message) {
+  if (!pre.isConnected) return;
+  pre.dataset.blockFailed = "1";
+  const note = pre.ownerDocument.createElement("div");
+  note.className = "block-note";
+  const first = String(message ?? "").split("\n")[0].trim();
+  const words = `Couldn't draw this ${lang} block${first ? `: ${first}` : ""}`;
+  note.dataset.text = words;
+  note.setAttribute("role", "note");
+  note.setAttribute("aria-label", words);
+  note.title = "Click to copy";
+  pre.after(note);
+}
+
+// A copy.js wrap took the <pre> away from a figure placed first: back with it.
+export function rejoin(pre) {
+  if (figureOf(pre) || !pre.hidden) return;
+  const wrap = pre.parentElement;
+  const stray = wrap?.classList.contains("code-wrap") && wrap.previousElementSibling;
+  if (stray?.classList?.contains(DRAWN)) wrap.insertBefore(stray, pre);
+}
+
+// One IntersectionObserver per scroller. +el+ moved to another scroller (the
+// stage's hand-off to the history) moves with it.
+function ioWatcher(win) {
+  const observers = new Map();
+  const watched = new WeakMap();
+  return (el, scroller, onNear) => {
+    let io = observers.get(scroller);
+    if (!io) {
+      io = new win.IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          io.unobserve(entry.target);
+          const near = watched.get(entry.target);
+          watched.delete(entry.target);
+          near?.onNear();
+        }
+      }, { root: scroller, rootMargin: IO_MARGIN });
+      observers.set(scroller, io);
+    }
+    const before = watched.get(el);
+    if (before && before.io !== io) before.io.unobserve(el);
+    watched.set(el, { io, onNear });
+    io.observe(el);
+  };
+}
+
+// @param roots the turn roots (app.js turnRoots())
+// @param sessionId () => the open session's id: a change tells the drawers
+// @param drawers in order: the first that claims a block's language draws it
+// @param watch (el, scroller, onNear) => calls onNear once el comes near; a seam
+//   for the specs
+export function createBlockWatch({ roots, sessionId, drawers, watch = null, copy = copyText, win = window }) {
+  const near = watch || ioWatcher(win);
+  // Blocks with a draw on its way (not a drawn state: that is the figure): pre =>
+  // {target, scroller, start, drawing}. Until it starts, a block whose scroller
+  // changed (the stage's hand-off to the history) gets watched there.
+  const waiting = new WeakMap();
+  let session = sessionId();
+
+  function noticeSession() {
+    const now = sessionId();
+    if (now === session) return;
+    session = now;
+    for (const drawer of drawers) drawer.sessionChanged?.();
+  }
+
+  // The drawer claiming +lang+, to +fn+: at once when each one asked can say.
+  // A throw in +fn+ after an asynchronous claim goes to +onError+.
+  function pick(lang, fn, onError, from = 0) {
+    for (let i = from; i < drawers.length; i++) {
+      const drawer = drawers[i];
+      const claimed = drawer.claims(lang);
+      if (claimed?.then) {
+        claimed
+          .then((yes) => (yes ? fn(drawer) : pick(lang, fn, onError, i + 1)), () => pick(lang, fn, onError, i + 1))
+          .catch(onError);
+        return;
+      }
+      if (claimed) { fn(drawer); return; }
+    }
+  }
+
+  function watchFor(entry) {
+    const scroller = scrollerOf(entry.target, rootOf(roots, entry.target), win);
+    if (scroller === entry.scroller) return;
+    entry.scroller = scroller;
+    near(entry.target, scroller, entry.start);
+  }
+
+  function reconsider(pre) {
+    if (waiting.get(pre)?.drawing) waiting.delete(pre);
+    consider(pre);
+  }
+
+  // A drawer that throws or rejects fails its block, with its line; the rest of
+  // the observer's batch still draws.
+  function broke(pre, e) {
+    console.error("block drawer:", e);
+    if (!pre.dataset.blockFailed) failBlock(pre, pre.getAttribute("data-lang"), e?.message);
+  }
+
+  function start(entry, pre, drawer) {
+    entry.drawing = true;
+    const over = () => { if (waiting.get(pre) === entry) waiting.delete(pre); };
+    let drawing;
+    try {
+      drawing = drawer.draw(pre, { reconsider });
+    } catch (e) {
+      over();
+      broke(pre, e);
+      return;
+    }
+    Promise.resolve(drawing).then(over, (e) => { over(); broke(pre, e); });
+  }
+
+  function consider(pre) {
+    if (!pre.isConnected || !pre.closest(TEXTS) || pre.dataset.blockFailed) return;
+    const pending = waiting.get(pre);
+    if (pending) {
+      if (!pending.drawing) watchFor(pending);
+      return;
+    }
+    rejoin(pre);
+    const lang = pre.getAttribute("data-lang");
+    if (!pre.textContent.trim()) return; // an empty fence is left alone
+    pick(lang, (drawer) => {
+      if (!pre.isConnected || waiting.has(pre) || pre.dataset.blockFailed) return;
+      const figure = figureOf(pre);
+      if (!drawer.needsDraw(pre, figure)) return;
+      // A drawn block's <pre> is hidden, which never intersects: its figure does.
+      const entry = { target: figure || pre, scroller: null, drawing: false, start: () => start(entry, pre, drawer) };
+      waiting.set(pre, entry);
+      watchFor(entry);
+    }, (e) => broke(pre, e));
+  }
+
+  function scan(el) {
+    if (el.matches?.(BLOCKS)) consider(el);
+    for (const pre of el.querySelectorAll?.(BLOCKS) || []) consider(pre);
+  }
+
+  for (const root of roots) {
+    new win.MutationObserver((records) => {
+      noticeSession();
+      for (const record of records) {
+        for (const node of record.addedNodes) if (node.nodeType === 1) scan(node);
+      }
+    }).observe(root, { childList: true, subtree: true });
+    scan(root);
+
+    root.addEventListener("mousedown", (e) => {
+      if (e.target.closest?.(".block-toggle")) e.preventDefault();
+    });
+    // Delegated, so a Revise clone's work too.
+    root.addEventListener("click", (e) => {
+      const toggle = e.target.closest?.(".block-toggle");
+      if (toggle) {
+        e.preventDefault();
+        e.stopPropagation();
+        const figure = toggle.parentElement;
+        setSourceShown(figure, figure.nextElementSibling, !figure.classList.contains("source"));
+        return;
+      }
+      const note = e.target.closest?.(".block-note");
+      if (note) copy(note.dataset.text);
+    });
+  }
+
+  return { scan, reconsider };
+}

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

@@ -0,0 +1,27 @@
+// Where a snapshot's card or notice goes by its stamp: the id of the turn
+// opening it comes after (+opening_id+, Bridge::CardPlaces#opening_of: a
+// prompt's turn_id, a wake note's, /continue no's reason line's own id). The
+// page finds that opening's bubble (data-turn-id on a prompt, data-opening-id
+// on a wake note or a reason line, turn_html.js) and the entry goes before
+// the next turn's opening, or at the end. No counting, so the page and the
+// worker can't disagree on which bubbles open turns. An entry with no stamp
+// (an older worker's, one before every opening), or whose opening the page
+// doesn't draw, falls back to its count (card.js cardPlace, turns_since).
+// A new module: the static JS is unversioned (docs/internals/web-frontend.md).
+import { cardPlace } from "./card.js";
+
+// The opening bubble +id+ names among the turns' openings (oldest first,
+// bubbles.js turnPromptBubbles), or -1.
+export function stampedOpening(userBubbles, id) {
+  if (!id) return -1;
+  const stamp = String(id);
+  return userBubbles.findIndex((el) => el.dataset?.turnId === stamp || el.dataset?.openingId === stamp);
+}
+
+// The element +entry+ goes before: the opening after its stamped one (null:
+// the end), else what its count says (null: the end too).
+export function snapshotPlace(userBubbles, entry) {
+  const at = stampedOpening(userBubbles, entry?.opening_id);
+  if (at < 0) return cardPlace(userBubbles, entry);
+  return userBubbles[at + 1] || null;
+}

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

@@ -8,7 +8,8 @@
 // above the first turn after them, a finished turn's notice in its step, a
 // finished turn's question resolved where it was asked.
 import { getSession, sendCommand } from "./data.js";
-import { cardPlace, drawCard, isCard, isNoticeCard, refreshCardBody, turnNoticePlace } from "./card.js";
+import { drawCard, isCard, isNoticeCard, refreshCardBody, turnNoticePlace } from "./card.js";
+import { snapshotPlace } from "./card_stamps.js";
 import { elementOf } from "./turn_html.js";
 import { stepText } from "./turn_block.js";
 import { llmContextNotice, noticeLine } from "./turn_events.js";
@@ -83,14 +84,15 @@ export function createCardsPlace({
     bubbles.placeFollowing(el, before);
   }
 
-  // A snapshot's cards and notices, each above the first turn after it; a
+  // A snapshot's cards and notices, each above the first turn after it (the
+  // one after its stamped opening, card_stamps.js; else by its count); a
   // turn's own notice where it showed live (placeTurnNotice). +end+: what
   // closes the history below them (a failed turn's prompt), for those with
   // no turn after them; one shown after that prompt went back stays below it.
   function placeSnapshotCards(entries, { before: end = null } = {}) {
     const users = turnPromptBubbles(historyEl);
     for (const entry of entries) {
-      const before = cardPlace(users, entry) || (entry.after_failed ? null : end);
+      const before = snapshotPlace(users, entry) || (entry.after_failed ? null : end);
       if (isCard(entry)) upsertCard(entry, { before });
       else if (entry.type === "question") placeResolvedQuestion(entry, before);
       else if (entry.type === "guardrail_warning") bubbles.showGuardrailWarning(entry.message, entry.label || "guardrails", { before });

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

@@ -53,7 +53,10 @@ export function opensOnKey(e, { active, allView, lightbox }) {
   return !editable(active);
 }
 
+// A field inside a shadow root (a chi-ui widget's note, inline_widgets.js)
+// counts: document.activeElement is its host, so the look goes through.
 function editable(el) {
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
   if (!el) return false;
   if (el.isContentEditable) return true;
   const tag = (el.tagName || "").toUpperCase();

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

@@ -51,7 +51,7 @@ export function composerMode({ selected, owner, running, narrow }) {
   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"),
+      placeholder: pick("A terminal chi owns this session · a one-turn chi --non-interactive run or an older chi's terminal", "A terminal chi owns this session"),
       hint: "", button: "Send", disabled: true,
     };
   }

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

@@ -97,13 +97,14 @@ export function deleteConfirmText(session) {
 }
 
 // The badge on a session a process holds right now (the list's `owner`):
-// a worker (every UI can send), or a terminal chi's one-turn run (--non-interactive).
+// a worker (every UI can send), or a terminal chi: a one-turn --non-interactive
+// run or an older chi's terminal, in OwnerLock::TUI_BUSY's words.
 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 runs one turn in this session (chi --non-interactive) and lets go as it ends" };
+    return { kind: "tui", text: "terminal", title: "In use by a one-turn chi --non-interactive run or an older chi's terminal" };
   }
   return null;
 }

data/lib/samagotchi/web/public/index.html

@@ -1119,14 +1119,28 @@ button.ws-row:hover:not(:disabled){filter:none}@media(hover:hover){button.ws-row
 #infoBar .meta .bar-group{display:flex;gap:8px;align-items:center;min-width:0;flex:none}
 #infoBar .meta .bar-sep{flex:none;width:1px;height:14px;background:var(--border-strong)}
 /* Above the phone's one scrolling line the meta is one line too: the telemetry takes the room left and its folder gives
-   way first (it already loses its start); a chip is capped, cut with "…", their full text in the title. */
+   way first (it already loses its start), then the model chip, down to 10ch; a chip is capped, cut with "…", their full
+   text in the title. The two groups are column grids: the giving chip's track (minmax(…, max-content)) leaves the
+   other chips as the group's min-content, so a group never shrinks under its fixed chips (they once slid under
+   continue →), and the info keeps that min-width: past it the bar's buttons wrap to a line of their own. */
 @media(min-width:601px){
+  #infoBar .info{min-width:auto}
   #infoBar .meta{flex-wrap:nowrap}
-  #infoBar .meta .bar-group.telemetry{flex:1 1 0}
-  #infoBar .meta .telemetry>*{flex:none}
-  #infoBar .meta .telemetry>.dir{flex:0 1 auto;max-width:48ch}
+  #infoBar .meta .bar-group:is(.setup,.telemetry){display:grid;grid-auto-flow:column;grid-auto-columns:max-content}
+  #infoBar .meta .bar-group.setup{flex:0 1 auto;min-width:auto;grid-template-columns:max-content max-content minmax(10ch,max-content)}
+  #infoBar .meta .bar-group.telemetry{flex:1 1 0;min-width:auto;grid-template-columns:minmax(0,max-content)}
+  #infoBar .meta .telemetry>.dir{max-width:48ch}
   #infoBar .meta .model{max-width:40ch;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 }
+/* Below 900px the buttons already have a line of their own, and the meta's one line can be wider than the bar: its
+   groups wrap instead of being cut, the telemetry first. The setup's basis is 0 (its min-content, the model at 10ch)
+   and its grow wins up to its max-content, so a group moves down only when the min-contents don't fit; the room left
+   is the telemetry's (its folder). The info never asks for more than the bar. */
+@media(min-width:601px) and (max-width:899px){
+  #infoBar .info{max-width:100%}
+  #infoBar .meta{flex-wrap:wrap;row-gap:4px}
+  #infoBar .meta .bar-group.setup{flex:1000 1 0;max-width:max-content}
+}
 /* The plain chips (spans, links) and the status take the button chips' 1px border, transparent and outside their tint, so every chip is one height: a chip wrapping onto a row of plain ones doesn't grow it. */
 #infoBar .meta :is(span,a).model,#infoBar .meta .status{border:1px solid transparent;background-clip:padding-box}
 /* The chips a running turn rewrites (the session clock each second, the last generation's speed, ctx): tabular digits in a reserved width, so a tick ("9.5s" → "10s" → "1m 00s") or a new number doesn't widen the line and move the chips after it. The speed and the clock show from the session's start, a muted placeholder until there is a number. */
@@ -1143,6 +1157,9 @@ button.ws-row:hover:not(:disabled){filter:none}@media(hover:hover){button.ws-row
 #infoBar .meta .worker-restart{padding:1px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--warn-bright);border:1px solid var(--warn-border)}
 @media(hover:hover){#infoBar .meta .worker-restart:hover:not(:disabled){background:var(--warn-border);color:var(--on-warn)}}
 #infoBar .meta .worker-restart:disabled{opacity:.7;cursor:default}
+/* The bar's action buttons are one flex item: when they don't fit beside the info line they wrap to a line of their
+   own together, never one button alone. */
+#infoBar .info-actions{display:flex;flex:none;gap:10px;align-items:center}
 #infoBar button{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600}
 #infoBar #infoStopBtn{background:var(--bg-raised);color:var(--warn-text);border:1px solid var(--border-strong)}
 @media(hover:hover){#infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}}
@@ -1368,7 +1385,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
   #infoBar .meta .bar-group{display:contents}
   #infoBar .meta .bar-sep{display:none}
   #infoBar .meta :is(.tools-chip,.notes-chip,.mem-chip,.ws-chip,.chain-link,.parent,.children-chip,.participants-chip,.dir,.ctx,.speed,.session-time,.worker-badge){display:none}
-  #infoBar>button:not(#infoMoreBtn){display:none}
+  #infoBar .info-actions{display:none}
   #infoBar .meta .status+.model{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
   /* ⚙ alone, the start page's dot when the session set its own (its values in the tooltip and accessible name). */
   #infoBar .meta .settings-chip .sc-own{display:none}
@@ -1835,10 +1852,12 @@ a{color:var(--accent)}
       <div id="infoBar" class="composer-card-foot">
         <div class="info" id="infoText"></div>
         <div id="contextChips" aria-label="Attached context" hidden></div>
-        <button class="ghost" id="infoContinueBtn" title="Continue: start the next link of this session's chain from its recap (this one is archived)" style="display:none">continue →</button>
-        <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
-        <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>
-        <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>
+        <div class="info-actions" id="infoActions">
+          <button class="ghost" id="infoContinueBtn" title="Continue: start the next link of this session's chain from its recap (this one is archived)" style="display:none">continue →</button>
+          <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
+          <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>
+          <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>
+        </div>
         <button type="button" class="ghost" id="infoMoreBtn" data-anchor-stand-in aria-label="More" title="More" aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">⋯</span></button>
       </div>
     </div>

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

@@ -0,0 +1,146 @@
+// The core drawer of chi-ui blocks (docs/internals/inline-widgets.md): a picks
+// or a walk, drawn from the data the server parsed (the <pre>'s data-widget,
+// InlineWidgets on the server), asked before the bundle renderers by
+// block_watch.js (its header has the drawer contract).
+//
+// What it draws: a <figure class="block-drawn"> right before the <pre>, which
+// stays, hidden (the DOM is the state, block_source.js), holding the shared
+// source toggle and a .widget-host whose open shadow root holds the widget and
+// its stylesheet (widgets.css, fetched once into a constructable sheet the
+// widgets adopt, so none draws unstyled and the view held measures the
+// styled widget). The toggle is in the light DOM: a click in the shadow root
+// reaches the page's delegated listeners retargeted at the host. In a shadow
+// root the widget's words are out of the bubble's textContent, which the
+// shown-texts dedupe, copy's fallback and an annotation's quote read, as with a
+// renderer's <img>.
+//
+// cloneNode doesn't copy a shadow root: a Revise clone (revise_switch.js
+// viewOf) arrives with the figure and an empty host, which needsDraw sees and
+// draw fills again (a fresh widget, its listeners its own).
+//
+// A refused block (data-widget-error) stays source under failBlock's muted line;
+// a <pre> with neither attribute (an older server, web.markdown off never has a
+// data-lang) is left alone. The model's words reach the page as text only.
+//
+// A module of its own: static JS is cached at unversioned URLs.
+
+import { html, render as litRender } from "./vendor/lit-html.js";
+import { DRAWN, figureOf, setSourceShown } from "./block_source.js";
+import { failBlock, holdingView } from "./block_watch.js";
+import { drawPicks, withDraft } from "./widget_picks.js";
+import { drawWalk } from "./widget_walk.js";
+
+export const LANG = "chi-ui";
+export const HOST = "widget-host";
+export const STYLESHEET = "/assets/widgets.css";
+export const TOGGLE_PICTURE = "Show the widget";
+
+// widgets.css as a constructable sheet, fetched once per page; a failed fetch
+// draws unstyled and is tried again by the next draw.
+let shared = null;
+export function loadWidgetSheet(win = window) {
+  shared ??= win.fetch(STYLESHEET, { headers: { Accept: "text/css" } })
+    .then((res) => {
+      if (!res.ok) throw new Error(`widgets.css answered ${res.status}`);
+      return res.text();
+    })
+    .catch((e) => {
+      console.error("widgets.css:", e);
+      shared = null;
+      return "";
+    })
+    .then((css) => {
+      const sheet = new win.CSSStyleSheet();
+      sheet.replaceSync(css);
+      return sheet;
+    });
+  return shared;
+}
+
+// block_host.js's toggle icon, the same button.
+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>`;
+
+const DRAW = {
+  walk: (data, { doc }) => drawWalk(data, doc),
+  picks: (data, { doc, fill }) => drawPicks(data, { doc, fill }),
+};
+
+// The widget's data on +pre+.
+// @throws Error it isn't JSON of a known type
+export function widgetData(pre) {
+  const data = JSON.parse(pre.getAttribute("data-widget"));
+  if (!data || !Object.hasOwn(DRAW, data.type)) throw new Error(`no widget of type ${String(data?.type).slice(0, 40)}`);
+  return data;
+}
+
+// The host of a drawn figure, or null.
+export function hostOf(figure) {
+  return figure?.querySelector(`:scope > .${HOST}`) || null;
+}
+
+// @param roots the turn roots, for the view held
+// @param composerText () => the composer's text now
+// @param fillComposer (text) => the composer filled with +text+ (app.js's)
+// @param sheet () => a Promise of the widgets' CSSStyleSheet (a seam for the specs)
+export function createWidgetDrawer({ roots, composerText, fillComposer, doc = document, win = window, sheet = () => loadWidgetSheet(win) }) {
+  const fill = (reply) => fillComposer(withDraft(composerText(), reply));
+
+  function fillHost(host, data, styles) {
+    const shadow = host.shadowRoot || host.attachShadow({ mode: "open" });
+    shadow.adoptedStyleSheets = [styles];
+    shadow.replaceChildren(DRAW[data.type](data, { doc, fill }));
+  }
+
+  function makeFigure(data) {
+    const figure = doc.createElement("figure");
+    figure.className = `${DRAWN} widget`;
+    figure.dataset.widgetType = data.type;
+    figure.dataset.togglePicture = TOGGLE_PICTURE;
+    const host = doc.createElement("div");
+    host.className = HOST;
+    const toggle = doc.createElement("button");
+    toggle.type = "button";
+    toggle.className = "block-toggle";
+    litRender(ICON, toggle);
+    figure.append(host, toggle);
+    return figure;
+  }
+
+  function needsDraw(pre, figure) {
+    if (figure) return !hostOf(figure)?.shadowRoot;
+    if (pre.hasAttribute("data-widget-error")) {
+      failBlock(pre, LANG, pre.getAttribute("data-widget-error"));
+      return false;
+    }
+    return pre.hasAttribute("data-widget");
+  }
+
+  // After the sheet: the data is read first, so a bad block fails at once.
+  function draw(pre) {
+    const data = widgetData(pre);
+    return sheet().then((styles) => place(pre, data, styles));
+  }
+
+  function place(pre, data, styles) {
+    if (!pre.isConnected) return;
+    const drawn = figureOf(pre);
+    if (drawn) {
+      let host = hostOf(drawn);
+      if (!host) {
+        host = doc.createElement("div");
+        host.className = HOST;
+        drawn.prepend(host);
+      }
+      if (!host.shadowRoot) fillHost(host, data, styles);
+      return;
+    }
+    const figure = makeFigure(data);
+    fillHost(hostOf(figure), data, styles);
+    holdingView(pre, roots, () => {
+      pre.before(figure);
+      setSourceShown(figure, pre, false);
+    }, () => figure.getBoundingClientRect().bottom, win);
+  }
+
+  return { claims: (lang) => lang === LANG, needsDraw, draw };
+}

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

@@ -98,7 +98,7 @@ export function createOwnerVerify({ historyEl, store, api, claim, liveTurn, toas
   }
 
   // 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
+  // text TurnStages::VerifyAnchors#verified takes; verify_target.js), else null and no
   // Verify on the bar.
   function anchorFor({ source, range }) {
     if (source?.kind !== "answer" || !range) return null;

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

@@ -690,7 +690,7 @@ const annotateBar = createAnnotateBar({
 // Verify's claim: a selection in an ended turn's final reply (the last
 // reply bubble after the turn's opening, as the owner's page and
 // placeVerdict count turns: verify_target.js), the only text
-// Engine#verified_anchor takes; else null and no Verify on the bar. Not an
+// TurnStages::VerifyAnchors#verified takes; else null and no Verify on the bar. Not an
 // earlier reply, a line merged mid-turn, a prompt, the running turn or the
 // Plan.
 function verifyAnchorFor({ source, range }) {

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

@@ -1,6 +1,6 @@
 // Revise stacks (web): a Revise turn rewrites an earlier turn's answer, and
 // the server stamps its prompt with `revises: {turn_id}` once it completed
-// with an answer (Engine#stamp_opening; never derived here). The page draws
+// with an answer (TurnStages::VerifyAnchors#stamp_opening; never derived here). The page draws
 // each stack v1 ← v2 ← … ← top in place:
 //
 // - every superseded turn (its opening, its work, its answer: turn_range.js's

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

@@ -28,14 +28,18 @@ export function createInUseWatch({ stage, watching, onTick, onDue }) {
   }
 
   function inUse(nowMs) {
-    const active = document.activeElement;
+    // Through shadow roots (a chi-ui widget, inline_widgets.js): the host
+    // is document.activeElement, the focused element is inside it.
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
     const sel = window.getSelection();
     return inUseFrom({
       pointerIn,
       lastTouchMs: lastTouch,
       // A clicked button keeps the focus in Chrome: only keyboard focus and
       // a field being typed in count.
-      focusInside: !!active && stage.contains(active) && active.matches(":focus-visible"),
+      focusInside: !!active && stage.contains(document.activeElement)
+        && (/^(INPUT|TEXTAREA|SELECT)$/.test(active.tagName) || active.matches(":focus-visible")),
       selectionInside: !!sel && !sel.isCollapsed && stage.contains(sel.anchorNode),
       nowMs,
     });

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

@@ -1,6 +1,6 @@
 // The texts the page treats as text it wrote out of a model's words: the
 // answers and the closed steps' texts. Cards, question replies, the asking
 // slot and delegate reports aren't among them. markdown_place.js links refs on
-// these; block_host.js draws in these. A module of its own: static JS is cached
+// these; block_watch.js finds blocks to draw in these. A module of its own: static JS is cached
 // at unversioned URLs, and a new export on an old module would blank the page.
 export const TEXTS = ".bubble.output, .gen:not(.live) > .gen-text";