samagotchi 0.136.1 → 0.138.0

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

@@ -3,15 +3,15 @@
 // red for a failing refresh), and a popover with its summary, hint link,
 // text and detach. The chips refresh when a context note arrives in the
 // stream and when the page gets focus (no event of their own), and their
-// ages tick every minute. A "+ URL" chip (when an installed bundle's
-// provider can attach one: GET …/context's can_add_url) opens a form that
-// attaches a URL (a GitHub PR); the web never adds a command.
+// ages tick every minute. The web attaches nothing itself (`chi context
+// add` does; GET …/context's can_add_url is left unread).
 
 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";
+import { createLatest } from "./latest.js";
 
 // "now", "3m", "2h", "4d" since an ISO time; "" for none.
 export function ageText(iso, now = Date.now()) {
@@ -44,30 +44,13 @@ export function chipModel(rows, now = Date.now()) {
   });
 }
 
-const ADD_TITLE = "Attach a URL (a GitHub PR) the agent can read and hears about when it changes";
-
 // The chips (a lit-html template; attributes after a bound one are bound
-// too, so they keep their order). addUrl: end with the "+ URL" chip;
-// open: the chip whose popover is open (a source's name), addOpen: the
-// "+ URL" form is.
-export function chipsTemplate(chips, { addUrl = false, open = null, addOpen = false } = {}) {
+// too, so they keep their order). open: the chip whose popover is open (a
+// source's name).
+export function chipsTemplate(chips, { open = null } = {}) {
   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"}>${
-      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}`;
-}
-
-// The "+ URL" popover: the URL, an optional why, Attach; +error+ after a
-// try that failed, +busy+ while one runs.
-export function addFormTemplate({ error = null, busy = false } = {}) {
-  return html`<form class="ctx-add-form"><div class="ctx-pop-head"><strong>Attach a URL</strong
-    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
-    ><div class="ctx-pop-meta">A link an installed bundle knows (github-pr: a pull request). The agent gets a note when it changes.</div
-    ><input class="ctx-add-input" name="url" type="url" inputmode="url" placeholder="https://github.com/owner/repo/pull/123" required autocomplete="off"
-    ><input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off"
-    >${error ? html`<div class="ctx-pop-error" role="alert">${error}</div>` : nothing
-    }<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit" ?disabled=${busy}>Attach</button></div></form>`;
+    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>`)}`;
 }
 
 // The popover's inside for one row (GET …/context's); +text+ the row's
@@ -99,43 +82,36 @@ 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.
+// show(id, name), detach(id, name)}; toast(text). Chips and popover are
+// lit templates: a redraw (a refresh, the minute's tick) keeps their nodes,
+// so focus stays. 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 = [];
-  let canAdd = false;
   let openName = null;
   // Only the newest list read for the open session is drawn (latest.js).
   const latest = createLatest(() => sessionId);
-  // The open row's text once read (view text), and the "+ URL" form's
-  // state ({error, busy}).
+  // The open row's text once read (view text).
   let text = null;
-  let addState = {};
   const pop = doc.createElement("div");
   pop.id = "contextPopover";
   pop.className = "ctx-popover";
-  pop.setAttribute("role", "dialog");
   pop.hidden = true;
   doc.body.appendChild(pop);
-
-  // openName ADD: the "+ URL" form is open.
-  const ADD = "\u0000add";
+  modalDialog(pop, { isOpen: () => openName !== null, doc });
 
   function drawChips() {
     const chips = chipModel(rows);
     // A source inserted before the focused chip: the focus stays on its source.
-    keepFocus(el, "data-name", () => render(chipsTemplate(chips, { addUrl: canAdd, open: openName === ADD ? null : openName,
-                                                                   addOpen: openName === ADD }), el));
-    el.hidden = chips.length === 0 && !canAdd;
-    // The "+ URL" chip alone sits inline, not on a row of its own.
-    el.classList.toggle("only-add", chips.length === 0 && canAdd);
+    keepFocus(el, "data-name", () => render(chipsTemplate(chips, { open: openName }), el));
+    el.hidden = chips.length === 0;
   }
 
   // The chips, and the open popover closed when what it is for has gone.
   function draw() {
-    if (openName === ADD ? !canAdd : openName && !chipModel(rows).some((chip) => chip.name === openName)) close();
+    if (openName && !chipModel(rows).some((chip) => chip.name === openName)) close();
     else drawChips();
   }
 
@@ -147,16 +123,14 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
       const data = await api.list(id);
       if (!fresh()) return;
       rows = data.sources || [];
-      canAdd = data.can_add_url === true;
     } catch {
       // A session the server doesn't know (gone, or an older chi web): no chips.
       if (!fresh()) return;
       rows = [];
-      canAdd = false;
     }
     draw();
     // An open popover follows its row, but not while it shows the text.
-    if (openName && openName !== ADD && text === null) {
+    if (openName && text === null) {
       const row = rows.find((r) => r.name === openName);
       if (row) fill(row);
     }
@@ -165,7 +139,6 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
   function load(id) {
     sessionId = id;
     rows = [];
-    canAdd = false;
     close();
     return refresh();
   }
@@ -173,7 +146,6 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
   function clear() {
     sessionId = null;
     rows = [];
-    canAdd = false;
     close();
   }
 
@@ -208,62 +180,28 @@ 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);
     drawChips();
   }
 
-  const drawAdd = (changes = {}) => {
-    addState = { ...addState, ...changes };
-    render(addFormTemplate(addState), pop);
-  };
-
-  function openAdd(chip) {
-    render(nothing, pop);
-    openName = ADD;
-    text = null;
-    addState = {};
-    drawAdd();
-    pop.hidden = false;
-    place(chip);
-    drawChips();
-    pop.querySelector('input[name="url"]')?.focus();
-  }
-
-  async function submitAdd(form) {
-    const id = sessionId;
-    const url = form.elements.url.value.trim();
-    const why = form.elements.why.value.trim();
-    if (!id || !url) return;
-    const still = stillOn(() => sessionId);
-    drawAdd({ busy: true });
-    try {
-      const data = await api.add(id, { url, why: why || undefined });
-      if (!still()) return;
-      close();
-      await refresh();
-      toast(`Attached ${data.name}: the agent gets a note before your next message`);
-    } catch (e) {
-      if (!still() || openName !== ADD) return;
-      // The same form again: what the user typed stays; the URL gets focus.
-      drawAdd({ busy: false, error: e.message });
-      pop.querySelector('input[name="url"]')?.focus();
-    }
-  }
-
-  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([...el.querySelectorAll(".ctx-chip[data-name]")].find((chip) => chip.dataset.name === name));
   }
 
   async function viewText() {
     const name = openName;
-    if (!name || name === ADD) return;
+    if (!name) return;
     try {
       const data = await api.show(sessionId, name);
       if (name !== openName) return;
@@ -298,16 +236,9 @@ export function createContextChips({ el, api, toast = () => {}, doc = document,
     if (!chip) return;
     // On to the document: a session-bar chip's popover closes (the close
     // below leaves clicks in +el+ alone).
-    if (chip.dataset.act === "add") {
-      if (openName === ADD) close();
-      else openAdd(chip);
-    } else if (openName === chip.dataset.name) close();
+    if (openName === chip.dataset.name) close();
     else open(chip.dataset.name, chip);
   });
-  pop.addEventListener("submit", (e) => {
-    e.preventDefault();
-    submitAdd(e.target);
-  });
   pop.addEventListener("click", (e) => {
     const act = e.target.closest("[data-act]")?.dataset.act;
     if (act === "close") close();
@@ -318,7 +249,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/data.js

@@ -397,6 +397,8 @@ export function getContext(id, name, opts = {}) {
 }
 
 // A URL an installed bundle's provider attaches: {url, why} → {name}.
+// Unused since the web's "+ URL" went; kept while an older app.js that
+// imports it may still be cached (internals/web-frontend.md, new exports).
 export function addContext(id, body, opts = {}) {
   return api(`/api/sessions/${encodeURIComponent(id)}/context`, {
     method: "POST", body: JSON.stringify(body), ...opts,

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

@@ -8,40 +8,39 @@ 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
-// state. nothing for a family with no members.
+// state. Open, it is just "▾ 3 delegates": the rows carry the marks then.
+// nothing for a family with no members.
 // @param open whether the list is open (aria-expanded; the arrow turns)
 export function familyChipTemplate(f, { open = false } = {}) {
   const sum = familySummary(f);
   if (!sum) return nothing;
-  const waiting = sum.counts.waiting;
-  const live = sum.live ? html`<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : nothing;
+  const waiting = open ? 0 : sum.counts.waiting;
+  const live = sum.live && !open ? html`<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : nothing;
   const waitingT = waiting ? html` · <span class="fc-waiting">${waiting} waiting</span>` : nothing;
   return html`<button type="button" class=${`family-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
     title=${sum.title}><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${
     live}${waitingT}</button>`;
 }
 
-// A row's status dot (a family's or a chain's): the waiting title over the
-// status when the session waits on the user.
-export function rowDotTemplate(s, waiting) {
-  const word = (waiting ? waiting.title : s.status) || "";
-  return html`<span class=${`status dot ${s.status || ""}${waiting ? " waiting" : ""}`} title=${word} aria-label=${word}></span>`;
-}
-
-// A row's waiting or stopped badge, and the archived one.
-export function rowBadgesTemplate(waiting, stopped) {
+// A row's waiting or stopped badge (a family's or a chain's; no status
+// dot: one mark per state, as a card's), its `error` badge when +status+
+// is "error", and the archived one.
+export function rowBadgesTemplate(waiting, stopped, status = null) {
   return html`${waiting ? html`<span class=${`attn attn-${waiting.kind}`} title=${waiting.title}>${waiting.text}</span>` : nothing}${
+    status === "error" ? html`<span class="error-badge" title=${status}>error</span>` : nothing}${
     stopped ? html`<span class="stopped-badge" title=${stopped.title}>${stopped.text}</span>` : nothing}`;
 }
 
 export const archivedBadge = html`<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>`;
 
 // The family's list: one row per member, depth first, indented one step
-// per depth (--depth): status dot, preview, time, the waiting / stopped
-// badge, the owner badge, archived. A row's click opens that session.
+// per depth (--depth): preview, the waiting / error / stopped badge, time,
+// the owner badge (not on a waiting row: waiting means a worker), archived.
+// The status is in the row's tooltip. A row's click opens that session.
 // @param activeId the open session's id (its row is .active)
 // @param matchIds a search's matching members (.match; the rest .dim), or
 //   null without a search
@@ -55,15 +54,15 @@ export function familyRowsTemplate(f, { activeId = null, matchIds = null, archiv
     const ts = s.updated_at || s.created_at || "";
     const waiting = waitingBadge(s, { inFamily: true });
     const stopped = waiting ? null : stoppedBadge(s);
-    const owner = ownerBadge(s.owner, s.id);
+    const owner = waiting ? null : ownerBadge(s.owner, s.id);
     const ago = relativeTime(ts, now);
     const short = s.short_id || String(s.id).slice(0, 8);
     const arch = !archivable ? nothing : s.archived
       ? html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Unarchive: back to the lists"} aria-label=${`Unarchive session ${short}`}></button>`
       : html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Archive: hide from the lists, keep for good"} aria-label=${`Archive session ${short}`}></button>`;
     return html`<div class=${cls.join(" ")} data-id=${s.id} style=${`--depth:${depth}`} role=${"listitem"}><button type="button" class="fr-open"
-      title=${`${s.id} · ${s.status || ""}`}>${rowDotTemplate(s, waiting)}<span class="fr-preview">${previewForCard(s)}</span>${
-      rowBadgesTemplate(waiting, stopped)}${ago ? html`<span class="time">${ago}</span>` : nothing}${
+      title=${`${s.id} · ${s.status || ""}`}><span class="fr-preview">${previewForCard(s)}</span>${
+      rowBadgesTemplate(waiting, stopped, s.status)}${ago ? html`<span class="time">${ago}</span>` : nothing}${
       owner ? html`<span class=${`owner ${owner.kind}`} title=${owner.title}>${owner.text}</span>` : nothing}${
       s.archived ? archivedBadge : nothing}</button>${arch}</div>`;
   });
@@ -73,20 +72,6 @@ export function familyRowsTemplate(f, { activeId = null, matchIds = null, archiv
 // The widest window index.html lays out as a phone (@media (max-width:600px)).
 const PHONE_MAX_PX = 600;
 
-// The status dots' pulse in +root+ on the document timeline's clock (each
-// animation's start time 0), the phase the cards' --pulse-delay gives
-// theirs (lists_view.js cardAnimStyle): a popover keeps its row nodes
-// across draws, reused by position, so a dot that moves to another node
-// or starts pulsing there (a member inserted above, a status flip) would
-// otherwise start its pulse over, out of step with the rest.
-export function syncPulses(root) {
-  root.querySelectorAll(".dot").forEach((dot) => {
-    for (const a of dot.getAnimations?.() || []) {
-      if (a.startTime !== 0) a.startTime = 0;
-    }
-  });
-}
-
 // The strip's family popover: one #familyPop in body (position: fixed, so
 // the strip's sideways scroll on a phone doesn't clip it), under the chip
 // it was opened from and as wide as that card (300 px at least, inside the
@@ -101,7 +86,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 +100,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);
@@ -142,7 +132,6 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     }
     // A row inserted before the focused one: the focus stays on its session.
     keepFocus(el, "data-id", () => render(rows, el));
-    syncPulses(el);
     anchor.setAttribute("aria-expanded", "true");
     place(anchor);
     return true;
@@ -155,13 +144,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 +175,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.