samagotchi 0.136.1 → 0.137.0

data/lib/samagotchi/guardrails/shell_paths.rb

@@ -71,10 +71,6 @@ module Samagotchi
         end
       end
 
-      # Whether +path+ is +root+ or in it, cased alike on a disk that folds
-      # case (PathResolve.under?).
-      def within?(path, root) = PathResolve.under?(path, root)
-
       # Follows the current dir and gives, per simple command, each word
       # with its path (nil when it can't be resolved). A word is opened the
       # kernel's way, so a `..` after a symlinked dir climbs out of its

data/lib/samagotchi/guardrails/verdict.rb

@@ -23,7 +23,7 @@ module Samagotchi
       # ParentPolicy's user_only); System 1 may, only if the user lists the
       # rule by name in guardrails.system_one.rules, and never for the
       # chi-answer/chi-broadcast ones (SystemOne::SelfProtect::NEVER_AUTO).
-      PROTECTED_RULES = %w[chi-config chi-home chi-hooks shell-touches-chi chi-context-cmd chi-broadcast prompt-memory-write
+      PROTECTED_RULES = %w[chi-config chi-home chi-shim chi-hooks shell-touches-chi chi-context-cmd chi-broadcast prompt-memory-write
                            model-overlay-write chi-answer-piped chi-answer-http].freeze
       SCOPES = %w[once session repo rule].freeze
       DO_NOT_RETRY = "Do not retry it or reach the same result another way; ask the user how to proceed."

data/lib/samagotchi/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Samagotchi
-  VERSION = "0.136.1"
+  VERSION = "0.137.0"
   # Sent as the User-Agent of every HTTP request chi makes.
   USER_AGENT = "chi/#{VERSION}"
 end

data/lib/samagotchi/web/message_display.rb

@@ -87,7 +87,10 @@ module Samagotchi
       #   show but that (a text-less step) is kept with empty content
       # @param cwd [String, nil] the session's working directory (the parts'
       #   tool titles are relative to it)
-      def messages_for_display(msgs, parts: false, cwd: nil)
+      # @param markdown [Boolean] false: no html for a delegate report or an
+      #   answer (the participant review drops both and renders its replies
+      #   from their redacted text, ParticipantReview#with_reply_html)
+      def messages_for_display(msgs, parts: false, cwd: nil, markdown: true)
         filtered = []
         list = Array(msgs)
         # The outputs' ✂ marks (LLM context edits), by id, for the parts.
@@ -145,7 +148,7 @@ module Samagotchi
             # A delegate report is the child's markdown: rendered as an
             # answer is (its copy source stays the text). Another user line
             # stays plain.
-            if source == Samagotchi::Steer::DELEGATE_REPORT && @markdown_renderer.available?
+            if markdown && source == Samagotchi::Steer::DELEGATE_REPORT && @markdown_renderer.available?
               message[:html] = @markdown_renderer.render(report_markdown(stripped))
             end
           end
@@ -177,7 +180,7 @@ module Samagotchi
             shown = display.is_a?(String) ? Samagotchi::OutputFormatter.strip_markup(display) : ""
             message[:display] = shown unless shown.strip.empty?
             rendered = message[:display] || stripped
-            message[:html] = @markdown_renderer.render(rendered) if !rendered.empty? && @markdown_renderer.available?
+            message[:html] = @markdown_renderer.render(rendered) if markdown && !rendered.empty? && @markdown_renderer.available?
             # The refs after_turn hooks attached (AnswerRefs), checked again:
             # a stored file is never trusted. Never raises.
             refs = Samagotchi::AnswerRefs.for_display(m[:display_refs] || m["display_refs"], cwd: cwd)

data/lib/samagotchi/web/participant_review.rb

@@ -65,7 +65,8 @@ module Samagotchi
         turn_snapshot = live && live["snapshot"]
         state = live && live["session_state_snapshot"]
         raw = live_or_saved(turn_snapshot, "messages") { session.messages }
-        shown = messages_for_display(visible_replies(raw), parts: true, cwd: session.working_directory)
+        # No html here: ParticipantView drops a report and the owner's html; with_reply_html renders the redacted replies.
+        shown = messages_for_display(visible_replies(raw), parts: true, cwd: session.working_directory, markdown: false)
         current = turn_snapshot && ParticipantView.current_turn(turn_snapshot["current_turn"], viewer)
         automatic = automatic_turn_ids(id, session, shown, current, state)
         waiting = !!(current&.dig("waiting_for_owner") || turn_snapshot&.dig("continue_offer") ||

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

@@ -16,6 +16,12 @@
 // lines". Its key: a merged one's data-line-key, a wake turn's opening
 // "<turn id>:prompt". A live merged report has no key until a reload.
 //
+// A long prompt (a user bubble with no data-source: typed, not brought in)
+// gets the same row over the same threshold, open by default as an answer
+// is, "▾ N lines" over it and "▸ ‹first line› · N lines" folded; its key is
+// its turn's "<turn id>:prompt" (an opening only: a queued prompt, a steer
+// has no turn id and no row), kept with the answers folded by hand.
+//
 // Which answers are folded is this browser's choice (localStorage through
 // storage.js): one key per session holding the folded answers' keys and
 // the unfolded reports' keys, the last FOLD_KEEP of each. An answer's key is its turn's id
@@ -46,9 +52,11 @@ export const FOLD_PREFIX = "chi_answer_fold:";
 const LABEL_CHARS = 160;
 
 const ROW_CLASS = "answer-fold";
-// What gets a row: answers and delegate reports (user lines chi brought in).
+// What gets a row: answers, delegate reports (user lines chi brought in)
+// and the user's own prompts (no source).
 const REPORTS = '.bubble.user[data-source="delegate_report"]';
-const ANSWERS = `.bubble.output, ${REPORTS}`;
+const PROMPTS = ".bubble.user:not([data-source])";
+const ANSWERS = `.bubble.output, ${REPORTS}, ${PROMPTS}`;
 // Not done yet: still streaming.
 const UNFINISHED = ".streaming";
 
@@ -175,16 +183,21 @@ export function sweepAnswerFolds(sessions, { scoped = false } = {}) {
 // ---- The rows ----
 
 const isReport = (bubble) => !!bubble?.matches?.(REPORTS);
+const isPrompt = (bubble) => !!bubble?.matches?.(PROMPTS);
 
 // The key an answer bubble is folded by, or null. A delegate report's: a
 // merged one's line key (data-line-key, "<turn id>:input:<place>"), one
 // that opened a wake turn its turn's id and ":prompt" (never the answer's
-// key, the bare id).
+// key, the bare id). A prompt's: its turn's id and ":prompt".
 export function answerKey(bubble) {
   if (isReport(bubble)) {
     const turn = bubble.getAttribute("data-turn-id");
     return bubble.getAttribute("data-line-key") || (turn ? `${turn}:prompt` : null);
   }
+  if (isPrompt(bubble)) {
+    const turn = bubble.getAttribute("data-turn-id");
+    return turn ? `${turn}:prompt` : null;
+  }
   return bubble?.getAttribute?.("data-answer-turn") || bubble?.getAttribute?.("data-reply-key") || null;
 }
 
@@ -208,13 +221,17 @@ function drawRow(row, bubble) {
   const folded = bubble.classList.contains("folded");
   const text = answerText(bubble);
   const report = isReport(bubble);
+  const prompt = isPrompt(bubble);
   const own = report ? { label: reportLabel(text, bubble.querySelector(":scope > .origin-label")?.textContent || "") } : {};
-  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), folded, ...own });
-  const what = report ? "report" : "answer";
+  // A prompt's label is its first line as typed (no heading picked).
+  const display = prompt || bubble.hasAttribute("data-answer-display");
+  const { label, size } = foldRowText(text, { display, folded, ...own });
+  const what = report ? "report" : prompt ? "message" : "answer";
   row.setAttribute("aria-expanded", folded ? "false" : "true");
   row.title = folded ? `Show the ${what}` : `Fold the ${what}`;
   row.classList.toggle("folded", folded);
   row.classList.toggle("report", report);
+  row.classList.toggle("prompt", prompt);
   row.classList.toggle("steered", report && bubble.classList.contains("steered"));
   const [labelEl, sizeEl] = row.children;
   if (labelEl.textContent !== label) labelEl.textContent = label;
@@ -295,6 +312,7 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
 
   // Synchronous (not a frame later, as copy buttons are): the row lands in
   // the same frame as its bubble, so nothing below it shifts after a paint.
+  // data-turn-id: a live prompt's key comes at its turn's start.
   new MutationObserver((records) => {
     const roots = new Set();
     let settle = false;
@@ -314,7 +332,7 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
     }
     if (settle) dropOrphans();
     for (const el of roots) if (el.isConnected) decorate(el);
-  }).observe(historyEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
+  }).observe(historyEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "data-turn-id"] });
   decorate(historyEl);
 
   historyEl.addEventListener("click", (e) => {

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

@@ -122,6 +122,7 @@ import { createUpdateSheet } from "./update_sheet.js";
 import { createRename } from "./session_rename.js";
 import { createSendTurn } from "./send_turn.js";
 import { createMarkdownTip } from "./markdown_tip.js";
+import { withoutStaleParams } from "./stale_params.js";
 
 // A link's #code= (behind an auth proxy): traded for the cookie before
 // anything else runs; the page reloads without it.
@@ -129,6 +130,10 @@ import { createMarkdownTip } from "./markdown_tip.js";
 // someone sent to swap this browser's session for theirs), so ask first.
 if (fragmentCode(globalThis.location?.hash)
     && await tradeFragmentCode({ ask: () => globalThis.confirm(REPLACE_SESSION_TEXT) })) await new Promise(() => {});
+// A query parameter the page no longer reads (?view=, the removed turn
+// view's) leaves the address bar, so the next bookmark is clean.
+const staleFree = withoutStaleParams(location.search);
+if (staleFree !== null) history.replaceState(null, "", location.pathname + staleFree + location.hash);
 // Signed out (the proxy's session or chi's token): a banner, or one reload.
 const authLost = createAuthLost();
 onAuthLost(authLost);
@@ -941,9 +946,10 @@ function setTurnRunning(running) {
     liveTurn.running = !!running;
     // A fresh link's picker goes now, not at the timing re-read after the turn.
     if (running && store.selected) store.update({ current: { turnStarted: true } });
-    // liveTurn.running isn't the store's: the composer and the bar read it.
+    // liveTurn.running isn't the store's: the composer, the bar and the open ⚙ panel's note read it.
     store.touch("composer");
     store.touch("infoBar");
+    store.touch("settingsPanel");
   });
 }
 

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

@@ -8,8 +8,10 @@
 // +sheet+, a window narrower than SHEET_MAX gets it as a bottom sheet. An
 // open one is placed again when the window (or a phone's visual viewport:
 // its keyboard) resizes.
+// It is modal as every popover is (popover_modal.js).
 
 import { nothing, render } from "./vendor/lit-html.js";
+import { focusBack, modalDialog } from "./popover_modal.js";
 
 const EDGE = 16;
 const GAP = 8;
@@ -48,13 +50,6 @@ export function sheetPlace({ innerWidth, innerHeight }, { share = SHEET_SHARE, v
            maxHeight: Math.round(height * share) };
 }
 
-const FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])";
-
-// The elements Tab reaches in +root+, in order (none hidden or disabled).
-export function tabStops(root) {
-  return [...root.querySelectorAll(FOCUSABLE)].filter((e) => !e.disabled && !e.closest("[hidden]") && e.tabIndex >= 0);
-}
-
 // id, className: the popover's; width: its widest (px); el: where the chip
 // is drawn; anchor: the chip's selector; openers: the selector of every
 // element that opens it (a click there is not a click outside; default the
@@ -66,23 +61,19 @@ export function tabStops(root) {
 // sheet: a bottom sheet in a narrow window (sheetPlace). label: the
 // dialog's accessible name (aria-label), none by default. onOpen(): after
 // an open has shown and placed it (where focus can go into it: show runs
-// while it is still hidden). expands: every opener carries aria-expanded
-// ("true" while open, "false" once closed; set "false" in the markup too),
-// for openers that are fixed buttons (a lit-drawn chip owns its own).
-// modal: a dialog that holds the focus while open (aria-modal; Tab and
-// Shift+Tab wrap inside it, a Tab from outside goes in). sheetShare: the
-// share of a phone's window the sheet takes at most (SHEET_SHARE).
+// while it is still hidden). sheetShare: the share of a phone's window the
+// sheet takes at most (SHEET_SHARE). Always a modal dialog (modalDialog);
+// the opener clicked (and the anchor it is placed at) carries aria-expanded
+// "true" while it is open, "false" once closed: a lit-drawn chip writes
+// aria-expanded="false" as a static attribute (lit leaves it to the shell).
 // @return {pop, open, close, refresh, isOpen, opener}
 export function createChipPopover({ id, className, width: widest, el, anchor: anchorSel, openers = anchorSel, summary,
                                     session = () => null, show, onClose = () => {}, onSubmit, onAct = () => {}, onOpen = () => {},
-                                    sheet = false, label = null, expands = false, modal = false, sheetShare = SHEET_SHARE,
+                                    sheet = false, label = null, sheetShare = SHEET_SHARE,
                                     doc = document, win = window }) {
   const pop = doc.createElement("div");
   pop.id = id;
   pop.className = className;
-  pop.setAttribute("role", "dialog");
-  if (label) pop.setAttribute("aria-label", label);
-  if (modal) pop.setAttribute("aria-modal", "true");
   pop.hidden = true;
   doc.body.appendChild(pop);
   // The session the open form is for, the element it is placed at, and the
@@ -90,9 +81,13 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
   let openFor = null;
   let opener = null;
   let returnTo = null;
+  // The openers marked aria-expanded="true" (the anchor and the one clicked).
+  let marked = [];
 
-  const expanded = (value) => {
-    if (expands) doc.querySelectorAll(openers).forEach((e) => e.setAttribute("aria-expanded", value));
+  const expanded = (els) => {
+    marked.forEach((e) => e.setAttribute("aria-expanded", "false"));
+    marked = [...new Set(els)].filter(Boolean);
+    marked.forEach((e) => e.setAttribute("aria-expanded", "true"));
   };
 
   function place(anchor) {
@@ -129,7 +124,7 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
     openFor = session();
     opener = anchor;
     returnTo = from;
-    expanded("true");
+    expanded([anchor, from]);
     show(data, true);
     pop.hidden = false;
     place(anchor);
@@ -140,16 +135,16 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
   // edits are gone). Focus that was in it (or +refocus+: Esc) goes back to
   // its opener.
   function close({ refocus = false } = {}) {
-    const had = refocus || pop.contains(doc.activeElement);
-    const back = returnTo?.isConnected && !returnTo.hidden ? returnTo : opener;
-    expanded("false");
+    const back = focusBack(pop, { refocus, doc });
+    const to = returnTo?.isConnected && !returnTo.hidden ? returnTo : opener;
+    expanded([]);
     pop.hidden = true;
     openFor = null;
     opener = null;
     returnTo = null;
     onClose();
     render(nothing, pop);
-    if (had && back?.isConnected) back.focus?.();
+    back(to);
   }
 
   function isOpen() { return !pop.hidden; }
@@ -196,29 +191,12 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
   });
   doc.addEventListener("keydown", (e) => {
     if (e.key === "Escape" && isOpen()) close({ refocus: true });
-    else if (e.key === "Tab" && modal && isOpen()) holdFocus(e);
   });
+  modalDialog(pop, { label, isOpen, doc });
   // A resize (a rotation, a phone's keyboard) places an open one again: a
   // sheet's height follows the window, a popover its chip.
   win.addEventListener?.("resize", replace);
   win.visualViewport?.addEventListener?.("resize", replace);
 
-  // Tab past the last stop goes to the first, Shift+Tab before the first to
-  // the last; a Tab from outside (focus lost to a redraw) goes in.
-  function holdFocus(e) {
-    const stops = tabStops(pop);
-    if (!stops.length) return;
-    const first = stops[0];
-    const last = stops[stops.length - 1];
-    const at = doc.activeElement;
-    let to = null;
-    if (!pop.contains(at)) to = e.shiftKey ? last : first;
-    else if (e.shiftKey && at === first) to = last;
-    else if (!e.shiftKey && at === last) to = first;
-    if (!to) return;
-    e.preventDefault();
-    to.focus();
-  }
-
   return { pop, open, close, refresh, isOpen, replace, opener: () => opener };
 }

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

@@ -10,6 +10,7 @@
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { keepFocus } from "./keep_focus.js";
 import { popoverPlace } from "./chip_popover.js";
+import { focusBack, modalDialog } from "./popover_modal.js";
 import { cantText } from "./format.js";
 import { createLatest, stillOn } from "./latest.js";
 
@@ -52,10 +53,10 @@ const ADD_TITLE = "Attach a URL (a GitHub PR) the agent can read and hears about
 // "+ URL" form is.
 export function chipsTemplate(chips, { addUrl = false, open = null, addOpen = false } = {}) {
   return html`${chips.map((chip) => html`<button type="button" class=${`ctx-chip ${chip.state}${chip.name === open ? " open" : ""}`}
-    data-name=${chip.name} title=${chip.title} aria-haspopup=${"dialog"}>${
+    data-name=${chip.name} title=${chip.title} aria-haspopup=${"dialog"} aria-expanded=${chip.name === open ? "true" : "false"}>${
       chip.state === "unread" ? html`<span class="ctx-dot" aria-hidden="true"></span>` : nothing}${chip.label}</button>`)}${
     addUrl ? html`<button type="button" class=${`ctx-chip ctx-add${addOpen ? " open" : ""}`} data-act=${"add"} title=${ADD_TITLE}
-      aria-haspopup=${"dialog"}>+ URL</button>` : nothing}`;
+      aria-haspopup=${"dialog"} aria-expanded=${addOpen ? "true" : "false"}>+ URL</button>` : nothing}`;
 }
 
 // The "+ URL" popover: the URL, an optional why, Attach; +error+ after a
@@ -101,7 +102,9 @@ export function popoverTemplate(row, { text = null, now = Date.now() } = {}) {
 // The chips for the session bar. el: #contextChips; api: {list(id),
 // show(id, name), detach(id, name), add(id, {url, why})}; toast(text).
 // Chips, popover and form are lit templates: a redraw (a refresh, the
-// minute's tick) keeps their nodes, so focus and typed text stay.
+// minute's tick) keeps their nodes, so focus and typed text stay. The
+// popover behaves as every popover does (popover_modal.js): a modal dialog, its chip's
+// aria-expanded, Esc closes it and focus goes back to the chip.
 export function createContextChips({ el, api, toast = () => {}, doc = document, win = window }) {
   let sessionId = null;
   let rows = [];
@@ -116,9 +119,9 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
   const pop = doc.createElement("div");
   pop.id = "contextPopover";
   pop.className = "ctx-popover";
-  pop.setAttribute("role", "dialog");
   pop.hidden = true;
   doc.body.appendChild(pop);
+  modalDialog(pop, { isOpen: () => openName !== null, doc });
 
   // openName ADD: the "+ URL" form is open.
   const ADD = "\u0000add";
@@ -208,6 +211,7 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
     render(nothing, pop);
     openName = name;
     text = null;
+    pop.setAttribute("aria-label", name);
     fill(row);
     pop.hidden = false;
     place(chip);
@@ -223,6 +227,7 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
     render(nothing, pop);
     openName = ADD;
     text = null;
+    pop.setAttribute("aria-label", "Attach a URL");
     addState = {};
     drawAdd();
     pop.hidden = false;
@@ -252,13 +257,18 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
     }
   }
 
-  function close() {
+  // Focus that was in it (or +refocus+: Esc) goes back to its chip.
+  function close({ refocus = false } = {}) {
+    const back = focusBack(pop, { refocus, doc });
+    const name = openName;
     openName = null;
     text = null;
     addState = {};
     pop.hidden = true;
     render(nothing, pop);
     drawChips();
+    if (name !== null) back(name === ADD ? el.querySelector('.ctx-chip[data-act="add"]')
+      : [...el.querySelectorAll(".ctx-chip[data-name]")].find((chip) => chip.dataset.name === name));
   }
 
   async function viewText() {
@@ -318,7 +328,7 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
     if (openName && !pop.contains(e.target) && !el.contains(e.target)) close();
   });
   doc.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && openName) close();
+    if (e.key === "Escape" && openName) close({ refocus: true });
   });
   win.addEventListener("resize", placeAtOpenChip);
   win.addEventListener("focus", () => refresh());

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

@@ -1,8 +1,9 @@
 // Copy buttons: one on every prompt and answer bubble, one on every code
-// block of a rendered answer. An answer copies its markdown source (the
-// saved message's `display` when a hook presented one, else its `content`,
-// kept on the bubble as data-copy-source when the page shows rendered
-// html), a prompt the text as typed, a code block just its code.
+// block of a rendered answer or delegate report. An answer copies its
+// markdown source (the saved message's `display` when a hook presented one,
+// else its `content`, kept on the bubble as data-copy-source when the page
+// shows rendered html), a prompt the text as typed, a code block just its
+// code.
 //
 // The buttons carry no text (an icon; "copied ✓" is CSS content), so a
 // bubble's textContent, the turn output dedupe and an annotation's selected
@@ -78,7 +79,9 @@ export function showsAnswer(bubble, message, normalize) {
 const ICON = html`<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>`;
 
 const BUBBLES = ".bubble.output:not(.streaming), .bubble.user";
-const CODE = ".bubble.output pre";
+// An answer's code blocks and a delegate report's (a user bubble chi
+// brought in, rendered as markdown; answer_fold.js REPORTS).
+const CODE = '.bubble.output pre, .bubble.user[data-source="delegate_report"] pre';
 
 // The button as a lit template, for a templated part (a tool row's
 // command block, command_view.js); the same click handler answers it.

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

@@ -8,6 +8,7 @@ import { ownerBadge, previewForCard, relativeTime } from "./format.js";
 import { familySummary, stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { keepFocus } from "./keep_focus.js";
+import { focusBack, modalDialog } from "./popover_modal.js";
 
 // The chip in a parent's meta row: "▸ 3 delegates · ● 1 live · 1 waiting"
 // (a waiting one in the attention colour), its tooltip the delegates by
@@ -101,7 +102,11 @@ export function syncPulses(root) {
 // @param onPick (id) a row's click
 // @param onClose () after it closed (the strip's held order catches up)
 // @param id the element's id (a chain's popover, chains.js, is another one)
-export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
+// @param label its accessible name
+// It behaves as every popover does (popover_modal.js): a modal dialog (Tab wraps in
+// its rows; a Tab from the chip goes in), the chip's aria-expanded, Esc
+// closes it and focus goes back to the chip.
+export function createFamilyPop({ id = "familyPop", label = "Delegates", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
   let el = null;
   let headId = null;
 
@@ -111,6 +116,7 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     el.id = id;
     el.className = "family-pop";
     el.hidden = true;
+    modalDialog(el, { label, isOpen: () => headId != null, doc });
     el.addEventListener("click", (e) => {
       const row = e.target?.closest?.(".family-row[data-id]");
       if (row) onPick(row.dataset.id);
@@ -155,13 +161,18 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     draw();
   }
 
-  function close() {
+  // Focus that was in it (or +refocus+: Esc) goes back to the chip as
+  // drawn after onClose (a held strip catches up).
+  function close({ refocus = false } = {}) {
     if (!headId) return;
-    anchorFor(headId)?.setAttribute("aria-expanded", "false");
+    const back = focusBack(el, { refocus, doc });
+    const id = headId;
+    anchorFor(id)?.setAttribute("aria-expanded", "false");
     headId = null;
     el.hidden = true;
     render(nothing, el);
     onClose();
+    back(anchorFor(id));
   }
 
   return {
@@ -181,12 +192,10 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     // capture phase): true when it did.
     onKeydown(e) {
       if (!headId || e.key !== "Escape") return false;
-      const id = headId;
       e.preventDefault();
       e.stopImmediatePropagation();
       e.stopPropagation();
-      close();
-      anchorFor(id)?.focus(); // the chip as drawn after close() (a held strip catches up)
+      close({ refocus: true });
       return true;
     },
     // A pointer down outside it and its chip closes it.