samagotchi 0.136.0 → 0.137.0

data/lib/samagotchi/guardrails/review_paths.rb

@@ -7,6 +7,36 @@ require_relative "../paths"
 
 module Samagotchi
   module Guardrails
+    # mise's file names, in one place for the boundaries that judge them:
+    # its local files hold secrets (ReviewPaths' SECRET_FILE / SECRET_PATH,
+    # PairBoundary's SECRET_TEXT) and its config runs at the owner's next
+    # worker start (PairCommand's mise config writes, ProjectEnv). Kept in
+    # this file: the testing kit loads it already (its file budget).
+    module MisePaths
+      # A local file's name: mise.local.toml, .mise.dev.local.toml (a
+      # Regexp source, to be embedded under the embedding pattern's flags).
+      LOCAL_FILE = '\.?mise(?:\.[\w-]+)?\.local\.toml'
+      # A local file in mise's config dirs: .config/mise/config.local.toml,
+      # config.<env>.local.toml; mise/ and .mise/ too (a Regexp source).
+      LOCAL_DIR_FILE = '(?:\.config/mise|\.?mise)/config(?:\.[\w-]+)?\.local\.toml'
+
+      # mise's config files, by a path's end: mise.toml, .mise.toml,
+      # mise.<env>.toml, .config/mise.toml, anything under .config/mise/,
+      # mise/ or .mise/ config*.toml, and the .tool-versions it reads too.
+      CONFIG_PATH = %r{(?:\A|/)(?:\.?mise(?:\.[^/]+)?\.toml|\.config/mise\.toml|\.config/mise/.+|
+                       \.?mise/config[^/]*\.toml|\.tool-versions)\z}x
+      # The same files named in a command's or script's text.
+      CONFIG_TEXT = %r{(?<![\w-])(?:\.?mise(?:\.[\w.-]+)?\.toml|\.config/mise|\.?mise/config[\w.-]*\.toml|
+                      \.tool-versions(?![\w.-]))}x
+
+      # Whether +path+ is one of mise's config files (CONFIG_PATH), as
+      # given or as it resolves.
+      def self.config?(path)
+        path.to_s.match?(CONFIG_PATH) ||
+          (path.to_s.start_with?("/") && PathResolve.reals(path).any? { |real| real.match?(CONFIG_PATH) })
+      end
+    end
+
     # What a participant may read (the shared-sessions plan's §2): a file
     # under the session's project root that isn't on the read denylist
     # (chi's state and config dirs, home secret dirs, project secret files),
@@ -35,11 +65,11 @@ module Samagotchi
       # registry tokens (.npmrc, .pypirc), ssh keys, terraform state, a
       # secrets file; and a git config (.git/config, a submodule's
       # .git/modules/x/config), checked apart.
-      SECRET_FILE = /\A(?:\.env.*|\.?mise(?:\.[\w-]+)?\.local\.toml|[._]netrc|.*\.(?:pem|key|p12|pfx|tfstate(?:\.backup)?)|.*credentials.*|
+      SECRET_FILE = /\A(?:\.env.*|#{MisePaths::LOCAL_FILE}|[._]netrc|.*\.(?:pem|key|p12|pfx|tfstate(?:\.backup)?)|.*credentials.*|
                        \.npmrc|\.pypirc|\.git-credentials|id_(?:rsa|dsa|ecdsa|ed25519)(?:\.pub)?|secrets?\.(?:ya?ml|json))\z/xi
       # mise's local config in its config dirs (.config/mise/config.local.toml,
       # config.<env>.local.toml; mise/ and .mise/ too): by the path's end.
-      SECRET_PATH = %r{(?:\A|/)(?:\.config/mise|\.?mise)/config(?:\.[\w-]+)?\.local\.toml\z}i
+      SECRET_PATH = %r{(?:\A|/)#{MisePaths::LOCAL_DIR_FILE}\z}i
       # The .docker/config.json kind: a dot dir's config holding tokens.
       SECRET_DIR_FILES = { ".docker" => "config.json", ".kube" => "config" }.freeze
       GIT_DIR = ".git"

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.0"
+  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

@@ -3,9 +3,11 @@
 // gets a fold row: a sibling just before the bubble, never inside it (the
 // bubble's copy text, its claims and a live end's innerHTML stay the
 // bubble's own). Folded, the bubble has the class `.folded` (CSS hides it;
-// no inline style); the row reads its first line and its size, "▸
-// ‹first line› · N lines", folded or not: unfolded it is the bubble's header,
-// flush on top of it, its bar the bubble's.
+// no inline style) and the row is the answer's box closed: "▸ ‹first
+// line› · N lines" in the bubble's shape; unfolded, the row is that box's
+// top edge, "▾ N lines", the bubble its rest (CSS joins the two). The box
+// never changes shape, a click changes its height, animated
+// (details_motion.js animateHeight) unless the viewer prefers no motion.
 //
 // A delegate report (a user line chi brought in, data-source
 // "delegate_report") gets the same row, folded by default (it is written
@@ -14,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
@@ -30,6 +38,7 @@
 // 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 { bubbleCopyText } from "./copy.js";
+import { animateHeight, canAnimate } from "./details_motion.js";
 import { clip } from "./format.js";
 import { readStored, removeStored, storedKeys, writeStored } from "./storage.js";
 
@@ -43,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";
 
@@ -80,12 +91,13 @@ export function foldLabel(text, { display = false } = {}) {
   return clip(plainLine(heading ?? texts[0] ?? ""), LABEL_CHARS);
 }
 
-// The row's words, folded or not: the label and the size (an open row is
-// the answer's header, as an open steps block keeps its summary).
-// +label+: the row's own (a report's, reportLabel), else the answer's.
-export function foldRowText(text, { display = false, label = foldLabel(text, { display }) } = {}) {
+// The row's words: folded, the label and the size; unfolded, the size
+// alone (the content is right under it). +label+: the row's own (a
+// report's, reportLabel), else the answer's.
+export function foldRowText(text, { display = false, folded = true, label = foldLabel(text, { display }) } = {}) {
   const n = lineCount(text);
   const size = `${n} line${n === 1 ? "" : "s"}`;
+  if (!folded) return { label: "", size };
   return { label, size: label ? `\u00a0\u00b7 ${size}` : size };
 }
 
@@ -171,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;
 }
 
@@ -204,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"), ...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;
@@ -245,8 +266,9 @@ export function keepRowInView(scroller, row, mutate) {
 // @param historyEl the history (#history), also its scroller
 // @param sessionId () => the open session's id
 // @param projectRoot () => the open session's project root, or null
+// @param motion (bubble) => whether a fold or unfold animates (canAnimate)
 // @return {decorate(root)} (the observer runs it; specs call it)
-export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null }) {
+export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null, motion = canAnimate }) {
   // Each bubble's row, and each row's bubble.
   const rows = new WeakMap();
   const bubbleOf = new WeakMap();
@@ -290,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;
@@ -309,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) => {
@@ -318,10 +341,16 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
     if (!bubble) return;
     e.preventDefault();
     const folded = !bubble.classList.contains("folded");
-    keepRowInView(historyEl, row, () => {
+    const settle = () => keepRowInView(historyEl, row, () => {
       bubble.classList.toggle("folded", folded);
       drawRow(row, bubble);
     });
+    if (!motion(bubble)) settle();
+    else if (folded) animateHeight(bubble, bubble.offsetHeight, 0, { fade: true }).then(settle);
+    else {
+      settle();
+      animateHeight(bubble, 0, bubble.offsetHeight, { fade: true });
+    }
     // An answer's choice is its fold, a report's its unfold (D2: the default differs).
     if (isReport(bubble)) writeOpened(sessionId(), answerKey(bubble), !folded, { root: projectRoot() });
     else writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });

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

@@ -72,6 +72,7 @@ import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { copyText, installCopy } from "./copy.js";
 import { installAnswerFold, sweepAnswerFolds } from "./answer_fold.js";
+import { installDetailsMotion } from "./details_motion.js";
 import { answerLabel, installReviseStacks, reviseChipTemplate, reviseWorkerUnavailable } from "./revise_stack.js";
 import { createQuestionCards } from "./question_cards.js";
 import { splitSnapshotCards } from "./card.js";
@@ -121,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.
@@ -128,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);
@@ -940,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");
   });
 }
 
@@ -2085,6 +2092,10 @@ historyEl.addEventListener("click", (e) => {
 });
 turnDom.scrollEl.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
+// A steps block, a thinking block and the recap open and close by hand
+// with their height animated (details_motion.js), in the history and on
+// the stage.
+installDetailsMotion({ root: document.body, selector: ".turn-work, .bubble.thinking, .bubble.recap" });
 // Long answers fold by hand (answer_fold.js), per viewer and session.
 installAnswerFold({
   historyEl,

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.