samagotchi 0.136.1 → 0.138.0

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.138.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

@@ -23,7 +23,6 @@ import {
   listParticipants, inviteParticipant, revokeParticipant, setParticipantCap,
   getContext,
   detachContext,
-  addContext,
   renderText,
   getWorkingSet,
   updateChi,
@@ -122,6 +121,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 +129,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);
@@ -151,7 +155,7 @@ const infoTextEl = $("#infoText");
 // (updateInfoBar redraws #infoText every tick; the chips keep their popover).
 const contextChips = createContextChips({
   el: $("#contextChips"),
-  api: { list: listContext, show: getContext, detach: detachContext, add: addContext },
+  api: { list: listContext, show: getContext, detach: detachContext },
   toast: (text) => showToast(text),
 });
 // The open session's ⚙ chip in the info bar, and its panel (thinking,
@@ -221,10 +225,8 @@ let pageCapabilities = {};
 let pageEditorUrl = null;
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
-const cancelBtn = $("#cancelBtn");
 const attachBtn = $("#attachBtn");
 const attachInput = $("#attachInput");
-const infoCancelBtn = $("#infoCancelBtn");
 const composeHintEl = $("#composeHint");
 
 // The open session (store.selected), its fields (store.current: session_state.js;
@@ -349,6 +351,8 @@ const turnDom = createStageView({
   renderMarkdown,
   linkRefs: linkRefsIn,
   workingSet,
+  // Stop turn in its status row (disabled until the request settles).
+  onCancel: () => handleCancel(),
 });
 // The history's bottom reserve and the toast's place follow the composer
 // card and the stage floating over the history (dock_reserve.js).
@@ -679,6 +683,7 @@ const lists = createListsView({
   showToast: (text, action) => showToast(text, action),
   allViewOpen: () => allViewOpen(),
   openAllView: () => openAllView(),
+  closeAllView: () => closeAllView(),
   leaveAllView: (hash) => leaveAllView(hash),
   renameShown,
   onRename: () => rename.open(),
@@ -844,6 +849,8 @@ function applyView() {
     topStripEl.scrollLeft = 0; // a phone's strip scrolls sideways to the tile
   }
   document.body.classList.toggle("all-view", open);
+  // The sessions pill is the view's button there: pressed while it is open.
+  $("#stripStatus").setAttribute("aria-pressed", String(open));
   updateSessionTitle();
   // Its chip was in the list just hidden (the strip, or all sessions).
   lists.chainPop.close();
@@ -861,7 +868,6 @@ window.addEventListener("hashchange", () => {
   applyView();
   selectFromHash();
 });
-$("#allBack").addEventListener("click", closeAllView);
 
 // A phone's composer fits a few words and has no Shift+Enter: the short
 // placeholder there.
@@ -893,9 +899,9 @@ function updateComposerMode() {
   // The start page's choice was for a new session: opening a session drops it.
   if (store.selected) startPage.dropChoices();
   const running = liveTurn.running && !!store.selected;
-  cancelBtn.style.display = running ? "" : "none";
   // No images for a session a terminal owns (it takes no message from here);
-  // on a phone none while a turn runs either: Stop turn needs the row's room.
+  // on a phone none while a turn runs either: the row keeps its room for the
+  // message box (steering).
   attachBtn.hidden = (!!store.selected && store.current.owner === "tui") || (running && narrowScreen.matches);
   syncDeliveryLine();
   if (running) {
@@ -937,13 +943,16 @@ function syncDeliveryLine() {
 }
 
 function setTurnRunning(running) {
+  // A running turn the stage held none of goes with it (runningWithoutTurn).
+  if (!running) turnDom.runningWithoutTurn?.(false);
   store.batch(() => {
     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");
   });
 }
 
@@ -1196,6 +1205,8 @@ function renderSessionView(data, { kept = [] } = {}) {
   liveTurn.serverGen = gen ? { ...gen, at: Date.now() } : null;
   if (!data.current_turn) {
     setTurnRunning(store.current.status === "running");
+    // Running with no turn to draw: the stage's status row still holds Stop turn.
+    turnDom.runningWithoutTurn?.(liveTurn.running);
     if (liveTurn.running && store.current.timing.activeTurn?.started_at) liveTurn.timing.start(store.current.timing.activeTurn.started_at, activeTurnId);
   } else if (liveTurn.running) {
     // The replayed turn_started carries no id: the running turn's record's.
@@ -1493,6 +1504,8 @@ function updateInfoBar() {
     continueBtn.style.display = buttons.continue.shown ? "" : "none";
     continueBtn.disabled = buttons.continue.disabled;
     continueBtn.textContent = buttons.continue.text;
+    // The accent on an archived session, where it is the thing to do.
+    continueBtn.classList.toggle("accent", buttons.archive.archived);
   }
   if (deleteBtn) deleteBtn.style.display = buttons.delete.shown ? "" : "none";
   if (archiveBtn) {
@@ -1860,18 +1873,14 @@ function queueRefused(altKey) {
   return true;
 }
 
+// The stage's Stop turn (its button stays disabled until this settles).
 async function handleCancel() {
   if (!store.selected) return;
-  cancelBtn.disabled = true;
-  infoCancelBtn.disabled = true;
   try {
     await cancelTurn(store.selected);
   } catch (e) {
     // The turn ended meanwhile: nothing left to cancel.
     if (e.code !== "not_running") alert(e.message);
-  } finally {
-    cancelBtn.disabled = false;
-    infoCancelBtn.disabled = false;
   }
 }
 
@@ -1895,7 +1904,7 @@ function promptMinPx() {
 // The composer (composer_mount.js): the box, its height, image chips, grip
 // and fold, ↑/↓ history and keys. The owner's parts come in as hooks: the
 // draft's origin (noteDraft), the / list's keys, the delivery line's Esc and
-// queue, the info bar's Stop turn and drop while folded, typing anywhere.
+// queue, the info bar's drop while folded, typing anywhere.
 const composer = mountComposer({
   els: {
     composer: composerEl, prompt: promptEl, button: actionBtn, chips: $("#chips"), attachBtn, attachInput,
@@ -1916,11 +1925,9 @@ const composer = mountComposer({
   // Esc lets go of a choice armed on the delivery line.
   escape: () => deliveryControl.disarm(),
   fold: {
-    infoCancelBtn,
     infoBarEl: $("#infoBar"),
     session: () => store.selected,
     waiting: () => !!(waitingOn(store.sessions.find((s) => s.id === store.selected)) || questionCards.pendingQuestion()),
-    turnRunning: () => liveTurn.running,
     allViewOpen,
     lightboxOpen: () => !lightboxEl.hidden,
   },
@@ -1966,8 +1973,6 @@ lightboxEl.addEventListener("click", () => { lightboxEl.hidden = true; });
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !lightboxEl.hidden) lightboxEl.hidden = true;
 });
-cancelBtn.addEventListener("click", () => handleCancel());
-infoCancelBtn.addEventListener("click", () => handleCancel());
 
 // The / autocomplete (command_list.js): the session's commands while the
 // composer holds one "/word".
@@ -2189,7 +2194,7 @@ store.on("infoBar", updateInfoBar);
 
 applyView();
 
-// Where sessions live: under the all-sessions search (the server fills it in).
+// Where sessions live: a footer line under the all-sessions list (the server fills it in).
 if (document.body.dataset.sessionsDir) {
   $("#allPath code").textContent = document.body.dataset.sessionsDir;
   $("#allPath").hidden = false;

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

@@ -9,7 +9,7 @@
 import { normalize, previewForCard, relativeTime } from "./format.js";
 import { stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { waitingOn } from "./notify.js";
-import { archivedBadge, rowBadgesTemplate, rowDotTemplate } from "./families_view.js";
+import { archivedBadge, rowBadgesTemplate } from "./families_view.js";
 import { html, nothing } from "./vendor/lit-html.js";
 
 // The opener a new link's composer is filled with (never sent: the user
@@ -242,10 +242,11 @@ export function chainChipTemplate(f, { open = false } = {}) {
 }
 
 // The chain's list (the chip's popover): one row per other link, newest
-// first: status dot, "#N", its date (with its HH:MM when another link of
+// first: "#N", its date (with its HH:MM when another link of
 // the chain, the head too, started the same day: chainStamp), its own title (/title) when it
 // differs from the head's (a link inherits its chain's: the card says it), else its recap's
-// first sentence, else its preview, the waiting / stopped badge, archived. A row's click opens
+// first sentence, else its preview, the waiting / error / stopped badge, archived (no status dot: the status
+// is in the row's tooltip, as a family row's). A row's click opens
 // that link (families_view.js's popover binds .family-row[data-id]).
 // @param activeId the open session's id (its row is .active)
 // A chain row's words: a name of its own (not the one it shares with the
@@ -270,9 +271,9 @@ export function chainRowsTemplate(f, { activeId = null, now = Date.now() } = {})
     const ago = relativeTime(s.updated_at || s.created_at || "", now);
     const tip = `${s.id} · ${s.status || ""}${ago ? ` · updated ${ago}` : ""}`;
     return html`<div class=${cls.join(" ")} data-id=${s.id} style=${"--depth:1"} role=${"listitem"}><button type="button" class="fr-open"
-      title=${tip}>${rowDotTemplate(s, waiting)}<span class="cr-n">#${n}</span>${
+      title=${tip}><span class="cr-n">#${n}</span>${
       date ? html`<span class=${date.length > 10 ? "cr-date timed" : "cr-date"}>${date}</span>` : nothing}<span class="fr-preview">${rowTitle(s, headTitle, byId)}</span>${
-      rowBadgesTemplate(waiting, stopped)}${s.archived ? archivedBadge : nothing}</button></div>`;
+      rowBadgesTemplate(waiting, stopped, s.status)}${s.archived ? archivedBadge : nothing}</button></div>`;
   });
   return html`<div class="family-rows chain-rows" role="list">${rows}</div>`;
 }

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/composer.css

@@ -1,7 +1,7 @@
 /* The composer (composer_mount.js): the message box, its image chips, grip and fold, its key hint and its toolbar row
    (the image button, Send). Shared by the owner's page (index.html) and the participant page (participant.html);
    linked after tokens.css and before a page's own <style>, so a page's rules of the same weight win. The owner's
-   own parts stay in index.html: the card's placing (#dock), the delivery line's links, Stop turn, the start page's picker and chips,
+   own parts stay in index.html: the card's placing (#dock), the delivery line's links, the start page's picker and chips,
    the / list, and the 16px text fields for iOS. */
 /* The image button's icon mask (the stroke only shapes the mask; the icon takes currentColor); index.html's phone info
    bar and all view's cards use it too. */
@@ -18,7 +18,7 @@ body.no-glass .composer-card{background:var(--bg-panel);-webkit-backdrop-filter:
 .composer-card-foot{padding:8px 14px 10px;border-top:1px solid var(--glass-border)}
 .composer-line{flex:1 0 100%;min-width:0;height:20px;padding:0 2px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-muted);user-select:none}
 #composer{display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px}
-#composer .compose-col{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
+#composer .compose-col{position:relative;flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
 #composer.dropping{outline:2px dashed var(--accent);outline-offset:-4px}
 /* In a session the composer is a row: the line's row wraps above the text field and the buttons. */
 body.has-session #composer{flex-wrap:wrap;row-gap:6px}
@@ -66,24 +66,28 @@ body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin
   #composeGrip::after{top:17px;opacity:1}
 }
 #composer textarea::placeholder{color:var(--text-faint)}
-/* Key hint: its line is always reserved, so focusing never shifts the layout. */
-#composeHint{order:1;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:14px;color:var(--text-faint);padding-left:2px;opacity:0;transition:opacity .12s ease;user-select:none}
-#composer:focus-within #composeHint:not(:empty){opacity:1}
+/* Key hint (the start page's): a second faint line under the placeholder, inside the text box (over it, out of the
+   flow: it never moves the layout), only while the box is focused and empty; typing hides it. Not over image chips. */
+#composeHint{position:absolute;left:2px;right:2px;top:calc(2px + 1.45em * 15 / 11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:14px;color:var(--text-faint);opacity:0;transition:opacity .12s ease;pointer-events:none;user-select:none}
+#composer:focus-within #prompt:placeholder-shown ~ #composeHint:not(:empty){opacity:1}
+#composer #chips:not([hidden]) ~ #composeHint{display:none}
 #composer textarea:focus{outline:none}
-/* The toolbar row: model picker · hint · Cancel · Send (the JS display toggles decide what shows). */
+/* The toolbar row, two clusters: the new session's setup (model picker · ⚙ · 🧰 · the override chips) on the left, what
+   is sent (🖼 · Start / Send) on the right; the image button's auto margin is the gap (Send's own when it is hidden). */
 #composer .actions-col{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
 #composer .actions-col button{white-space:nowrap;font-size:12px;padding:0 12px;height:28px;min-height:28px;line-height:28px}
-#composer .actions-col .split{order:3;display:flex;gap:4px;margin-left:auto}
+#composer .actions-col .split{order:4;display:flex;gap:4px;margin-left:auto}
+#composer .actions-col .attach-btn:not([hidden]) ~ .split{margin-left:0}
 #composer #actionBtn{min-width:64px;font-weight:600}
 /* The image button (app.js: a click opens #attachInput, the hidden file picker; a phone's offers the camera and the photo library):
    an icon just left of Start / Send, quiet like the model picker; hidden in a session a terminal owns, and on a phone while a turn runs. */
-#composer .actions-col .attach-btn{order:2;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
+#composer .actions-col .attach-btn{order:3;margin-left:auto;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
 #composer .actions-col .attach-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon-image) center/contain no-repeat;mask:var(--icon-image) center/contain no-repeat}
 #composer .actions-col .attach-btn:hover{filter:none;color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
 #composer .actions-col .attach-btn[hidden]{display:none}
-/* An icon button on the row (the start page's ⚙ and 🧰, start_settings.js and start_toolkit.js): quiet like the image button, its icon a mask in --icon; before it (order 2, earlier in the markup).
+/* An icon button on the row (the start page's ⚙ and 🧰, start_settings.js and start_toolkit.js): quiet like the image button, its icon a mask in --icon; right after the model picker (order 1), before the override chips they set (order 2).
    .set: something under it is set, an accent dot on a phone (the override chips say it on a wider row). */
-#composer .actions-col .icon-btn{order:2;position:relative;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
+#composer .actions-col .icon-btn{order:1;position:relative;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
 #composer .actions-col .icon-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
 #composer .actions-col .icon-btn:hover{filter:none}
 #composer .actions-col .icon-btn[aria-expanded="true"]{color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
@@ -94,7 +98,7 @@ body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin
 @media(max-width:600px){#composer .actions-col .icon-btn.set{color:var(--accent)}#composer .actions-col .icon-btn.set::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent)}}
 @media(pointer:coarse){#composer .actions-col .icon-btn{width:36px;height:36px;min-height:36px}}
 /* In a session the composer is one row: the text field (one line, growing with its text; fitPrompt sets its height)
-   and Cancel · Send at its bottom right. The key hint is in the placeholder there, so its row goes. */
+   and 🖼 · Send at its bottom right. The key hint is in the placeholder there, so the hint line goes. */
 body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
 body.has-session #composer textarea{min-height:0}
 body.has-session #composeHint{display:none}

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

@@ -9,23 +9,22 @@ import { readStored, removeStored, writeStored } from "./storage.js";
 export const GRIP_KEY = "chi_composer_floor";
 
 // +session+: the open session's id, or null (the start page). +draft+,
-// +waiting+, +turnRunning+, +allViewOpen+, +lightboxOpen+: what the page
-// shows now. +imageFiles+ / +addImageFiles+: a drop's images and the chips.
+// +waiting+, +allViewOpen+, +lightboxOpen+: what the page shows now.
+// +imageFiles+ / +addImageFiles+: a drop's images and the chips.
 // The owner page's own parts (composer_mount.js passes them through):
-// +infoCancelBtn+ (Stop turn in the info bar while folded) and +infoBarEl+
-// (a file dropped on it while folded), either may be null; +typeAnywhere+:
-// typing on the page opens a folded composer.
+// +infoBarEl+ (a file dropped on it while folded; may be null);
+// +typeAnywhere+: typing on the page opens a folded composer. Stop turn
+// isn't the composer's: it sits in the stage's status row (stage_view.js).
 export function createComposerGrip({
-  composeGrip, promptEl, infoCancelBtn = null, infoBarEl = null,
+  composeGrip, promptEl, infoBarEl = null,
   session, fitPrompt, promptMinPx, floor, setFloor,
-  draft, waiting = () => false, turnRunning = () => false, allViewOpen = () => false, lightboxOpen = () => false,
+  draft, waiting = () => false, allViewOpen = () => false, lightboxOpen = () => false,
   imageFiles, addImageFiles, typeAnywhere = true,
   doc = globalThis.document, win = globalThis.window,
 }) {
   // The composer's fold (composer_fold.js): the grip, which is the handle
-  // while folded, and the info bar's Stop turn while folded (the composer's
-  // #cancelBtn is folded away then). +gripWillFold+: the drag in progress is
-  // past the fold threshold.
+  // while folded. +gripWillFold+: the drag in progress is past the fold
+  // threshold.
   const gripStartTitle = composeGrip.title;
   let gripWillFold = false;
   // A click on the expanded grip folds GRIP_CLICK_FOLD_MS after it, so a
@@ -214,11 +213,10 @@ export function createComposerGrip({
     }
     promptEl.focus();
   }
-  // The grip as the fold's handle (its title, marks, aria-expanded) and Stop turn
-  // while folded. The start page's grip only resizes: no role, no fold state.
+  // The grip as the fold's handle (its title, marks, aria-expanded). The
+  // start page's grip only resizes: no role, no fold state.
   function drawFoldControls() {
     const folded = isComposerFolded();
-    if (infoCancelBtn) infoCancelBtn.style.display = folded && turnRunning() ? "" : "none";
     if (!session()) {
       composeGrip.removeAttribute("role");
       composeGrip.removeAttribute("aria-expanded");

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

@@ -23,8 +23,8 @@ import { readStored } from "./storage.js";
 // +escape()+ Esc, true when it let go of something. +imagesOff+: why this
 // page takes no images (the participant page, until its upload path): a
 // paste, drop or pick of one toasts it and adds no chip; null takes them.
-// +fold+: createComposerGrip's page hooks (session, waiting, turnRunning,
-// allViewOpen, lightboxOpen, infoCancelBtn, infoBarEl, typeAnywhere).
+// +fold+: createComposerGrip's page hooks (session, waiting, allViewOpen,
+// lightboxOpen, infoBarEl, typeAnywhere).
 // @return {el, button, chips(), setChips(list), addImageFiles(files), fit(),
 // hasDraft(), refreshHistory(), and the grip's isComposerFolded,
 // openForVisit, focusPrompt, drawFoldControls, newVisit, decideVisit}