samagotchi 0.112.0 → 0.114.0

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

@@ -99,6 +99,7 @@ import { createStartPage } from "./start_page.js";
 import { createSessionActions } from "./session_actions.js";
 import { createRename } from "./session_rename.js";
 import { createSendTurn } from "./send_turn.js";
+import { createMarkdownTip } from "./markdown_tip.js";
 
 // A link's #code= (behind an auth proxy): traded for the cookie before
 // anything else runs; the page reloads without it.
@@ -193,6 +194,8 @@ const startPage = createStartPage({
   listModels,
 });
 const markdownWarningEl = $("#markdownWarning");
+// While web.markdown is off: how to turn it on, until dismissed here.
+const markdownTip = createMarkdownTip($("#markdownTip"));
 // What the page renders that a notice may stand in for (the server's
 // Web::Capabilities, next to markdown_warning); a notice it names isn't
 // drawn (shownElsewhere). An older server sends none: every notice shows.
@@ -817,6 +820,7 @@ function clearSelection() {
   setTurnRunning(false);
   closeStream();
   setMarkdownWarning(null);
+  markdownTip.show(null);
   setCapabilities(null, null);
   composerGrip.newVisit();
   updateComposerMode();
@@ -944,6 +948,7 @@ async function resync({ endText = null } = {}) {
 // then a pending question.
 function renderSessionView(data, { kept = [] } = {}) {
   setMarkdownWarning(data.markdown_warning);
+  markdownTip.show(data.markdown_tip);
   setCapabilities(data.capabilities, data.editor_url);
   // The saved fill (when there is one) goes in here too, so a reloaded or
   // stopped session shows it before its next turn (a running turn's replay
@@ -1092,6 +1097,7 @@ async function readTurnEnd() {
       if (!(await mergeTurnTiming(id, d.timing))) return;
       liveTurn.timing.finishLine(line);
       setMarkdownWarning(d.markdown_warning);
+      markdownTip.show(d.markdown_tip);
       setCapabilities(d.capabilities, d.editor_url);
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
       updateInfoBar();

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

@@ -109,6 +109,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 @keyframes init-spin{to{transform:rotate(360deg)}}
 @media (prefers-reduced-motion:reduce){.init-spin{animation:none;border-top-color:var(--accent)}.init-task{transition:none}}
 .markdown-warning{margin:0 16px 4px;padding:8px 10px;border:1px solid var(--warn);border-radius:8px;background:var(--warn-bg);color:var(--warn-bright);font-size:12px;line-height:1.4}
+.markdown-tip{display:flex;align-items:flex-start;gap:8px;margin:0 16px 4px;padding:6px 6px 6px 10px;border:1px solid var(--accent-border);border-radius:8px;background:var(--accent-bg);color:var(--text-muted);font-size:12px;line-height:1.4}
+.markdown-tip[hidden]{display:none}
+.markdown-tip-text{flex:1;min-width:0}
+.markdown-tip-close{flex:none;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer}
+.markdown-tip-close:hover{background:var(--bg-hover);color:var(--text)}
 .bubble.user{border-left:3px solid var(--accent);background:var(--accent-bg);align-self:flex-end;max-width:85%;margin-left:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
 .bubble.user.queued{border-left-style:dashed;opacity:.8}
 .bubble.user.steered{border-left-style:dashed;border-left-color:var(--accent);opacity:.9}
@@ -1183,6 +1188,37 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .pp-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-top:4px}
 .pp-view{font-size:12px;color:var(--accent);text-decoration:none}
 .pp-view:hover{text-decoration:underline}
+/* The Home Screen app's notifications sheet (push_devices.js): the bell opens it; a bottom sheet on a phone. */
+.push-devices .ctx-pop-head strong{font-family:inherit}
+.push-devices.sheet{border-radius:14px;padding:14px 16px;font-size:14px}
+.pd-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0;padding:0}
+.pd-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:8px 10px;border-radius:10px;background:var(--bg-inset)}
+.pd-who{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text)}
+.pd-who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pd-tag{font-size:10.5px;padding:0 6px;border-radius:999px;background:var(--accent-bg);color:var(--accent);white-space:nowrap}
+.pd-act{grid-column:2;grid-row:1/3;display:flex;align-items:center}
+.pd-meta{grid-column:1;font-size:11.5px;color:var(--text-muted)}
+.pd-error{color:var(--danger-text)}
+.pd-done{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding-top:6px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}
+.pd-remove{padding:3px 10px;border-radius:7px;font-size:12px;background:var(--bg-raised);color:var(--danger-text);border:1px solid var(--border-strong);cursor:pointer}
+.pd-remove:hover{color:var(--text-hover)}
+.pd-switch{appearance:none;-webkit-appearance:none;position:relative;flex-shrink:0;width:34px;height:20px;margin:0;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border-strong);cursor:pointer;transition:background .15s}
+.pd-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-muted);transition:transform .15s,background .15s}
+.pd-switch:checked{background:var(--accent-strong);border-color:var(--accent-strong)}
+.pd-switch:checked::after{transform:translateX(14px);background:var(--on-solid)}
+.pd-switch:disabled{opacity:.5;cursor:default}
+.pd-switch:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
+.pd-done .pd-switch{width:30px;height:18px}
+.pd-done .pd-switch::after{width:12px;height:12px}
+.pd-done .pd-switch:checked::after{transform:translateX(12px)}
+.pd-note{font-size:11.5px;color:var(--text-muted)}
+.pd-note.pd-error{color:var(--danger-text)}
+.push-devices.sheet .pd-switch{width:42px;height:26px}
+.push-devices.sheet .pd-switch::after{width:20px;height:20px}
+.push-devices.sheet .pd-switch:checked::after{transform:translateX(16px)}
+.push-devices.sheet .pd-done{font-size:13px}
+.push-devices.sheet .pd-meta,.push-devices.sheet .pd-note{font-size:12.5px}
+.push-devices.sheet .pd-remove{padding:6px 12px;font-size:13px}
 .ctx-pop-head{display:flex;align-items:baseline;gap:8px}
 .ctx-pop-head strong{font-family:ui-monospace,monospace;color:var(--text-bright)}
 .ctx-pop-kind{font-size:11px;color:var(--text-muted)}
@@ -1240,7 +1276,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 /* Start page (no session): the composer alone, centered; no info bar. */
 body:not(.has-session) #center{justify-content:safe center;background:transparent}
 body:not(.has-session) #stage{flex:0 0 auto;min-height:0;background:transparent}
-body:not(.has-session) #history,body:not(.has-session) #markdownWarning{display:none}
+body:not(.has-session) #history,body:not(.has-session) #markdownWarning,body:not(.has-session) #markdownTip{display:none}
 body:not(.has-session) #empty{position:static;background:transparent;padding:0}
 body:not(.has-session) #dock{width:min(720px,calc(100% - 32px));margin:0 auto}
 body:not(.has-session) #infoBar{display:none}
@@ -1457,7 +1493,9 @@ body.all-view #center, body.all-view #topStrip{display:none}
 #toast .toast-action{background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:2px 4px}
 #toast .toast-close{background:transparent;border:0;color:var(--text-muted);cursor:pointer;padding:2px 4px;margin-left:-6px}
 #toast .toast-close:hover{color:var(--text)}
-#allList{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-content:start;padding:2px}
+/* Each row is as tall as its tallest card. An `auto` row in a grid that overflows its
+   height has no free space to grow into, so it collapses to each card's min-height. */
+#allList{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-content:start;grid-auto-rows:max-content;padding:2px}
 .card.skeleton{pointer-events:none;border-style:dashed;opacity:.9;animation:skeleton-pulse 1.2s ease-in-out infinite}
 .card.skeleton .line{height:10px;background:var(--bg-raised);border-radius:6px}
 .card.skeleton .line.long{width:78%}
@@ -1471,8 +1509,8 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card{padding:12px;border-radius:10px;background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:72px}
 .card:hover{border-color:var(--border-strong);background:var(--bg-hover)}
 #allList .card{position:relative}
-/* Every row keeps its content's height: a card shorter than its rows (seen on iOS) cut the clamped preview and the
-   single-line title and recap through the middle. */
+/* A card's lines are never squeezed to fit a short card: the flex side of the same overflow the rule above fixes
+   (an overflowing grid collapsing its rows to min-height), seen on iOS as the title, recap and preview cut through. */
 #allList .card > *{flex-shrink:0}
 /* A card's tools in the all view: archive (or unarchive) and delete, shown on hover, always under hover:none. */
 #allList .card-tools{position:absolute;top:6px;right:6px;display:flex;gap:2px}
@@ -1547,6 +1585,7 @@ a{color:var(--accent)}
   <section id="center">
     <div id="stage">
       <div id="markdownWarning" class="markdown-warning" hidden></div>
+      <div id="markdownTip" class="markdown-tip" hidden><span class="markdown-tip-text"></span><button type="button" class="markdown-tip-close" aria-label="Dismiss tip" title="Dismiss tip">×</button></div>
       <div id="history"></div>
       <div id="empty"></div>
       <div id="notice" role="status" hidden></div>

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

@@ -0,0 +1,33 @@
+// The session view's Markdown tip (the server's Web::MarkdownRenderer#tip,
+// sent as markdown_tip while web.markdown is off): one calm line with a ×
+// that hides it for this browser. The text is the server's; an older server
+// sends none, so no tip.
+import { readStored, writeStored } from "./storage.js";
+
+export const TIP_DISMISSED_KEY = "chi_markdown_tip_dismissed";
+
+// +el+ holds a .markdown-tip-text span and a .markdown-tip-close button
+// (index.html's #markdownTip).
+export function createMarkdownTip(el) {
+  const textEl = el.querySelector(".markdown-tip-text");
+  const closeBtn = el.querySelector(".markdown-tip-close");
+
+  function hide() {
+    el.hidden = true;
+    textEl.textContent = "";
+  }
+
+  // The tip for this payload: shown unless there is none or it was dismissed.
+  function show(text) {
+    if (!text || readStored(TIP_DISMISSED_KEY) === "1") return hide();
+    textEl.textContent = text;
+    el.hidden = false;
+  }
+
+  closeBtn.addEventListener("click", () => {
+    writeStored(TIP_DISMISSED_KEY, "1");
+    hide();
+  });
+
+  return { show };
+}

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

@@ -12,7 +12,9 @@
 // leaves the bell as it is in a tab. With the bell on, the app also tidies
 // the device (syncDevice): it closes the pushed notifications whose
 // question or card isn't open any more and sets the app's badge, as chi
-// web sends no close push (WebKit's silent-push quota).
+// web sends no close push (WebKit's silent-push quota). There the bell
+// opens the notifications sheet (push_devices.js): this device's switch,
+// the other devices with their "long turns done" switch and Remove.
 //
 // Every page, in a tab or the app, also tells chi web whether the user is
 // at it (POST /api/push/presence, reportPresence): chi web pushes nothing
@@ -30,6 +32,7 @@ import {
 import {
   isWaitingTag, openPushKeys, pushSupported, subscribe as pushSubscribe, unsubscribe as pushUnsubscribe,
 } from "./push.js";
+import { createPushDevices } from "./push_devices.js";
 
 export const NOTIFY_KEY = "chi_notify";
 // The device id chi web gave this app's subscription (POST subscribe's
@@ -53,8 +56,8 @@ const NOTIFY_TITLES = {
 };
 
 const PUSH_TITLES = {
-  on: "Notifications to this phone: on (a session that needs you or failed, also while the app is closed). Tap to turn off",
-  off: "Notify this phone when a session needs you or a turn fails, also while the app is closed",
+  on: "Notifications to this phone: on (a session that needs you or failed, also while the app is closed). Tap for the devices",
+  off: "Notify this phone when a session needs you or a turn fails, also while the app is closed. Tap to turn it on",
   denied: "Notifications are blocked for this app in the phone's settings",
 };
 
@@ -108,6 +111,8 @@ function defaultChannel() {
 // @param sendPresence (body, leaving) => void (presenceSender's by default)
 // @param every (fn, ms) => void, a repeating timer (presence's tick)
 // @param pageId this page load's id in its presence reports
+// @param devices (hooks) => the notifications sheet ({toggle, refresh}),
+//   made once chi web says it pushes (push_devices.js by default)
 // @return {noticeSessions(type, data), noticeList(sessions), setBaseTitle(title), clearBadge()}
 export function createNotifications({
   button,
@@ -124,12 +129,15 @@ export function createNotifications({
   sendPresence = presenceSender({ nav, api }),
   every = (fn, ms) => setInterval(fn, ms),
   pageId = randomTabId(),
+  devices = (hooks) => createPushDevices({ ...hooks, doc, win }),
 }) {
   let attention = initialAttentionState();
   // Web Push in the Home Screen app: null until chi web says it pushes
   // ({reg, key, on}), and for good in a tab or without push.
   let push = null;
   let pushBusy = false;
+  // The notifications sheet the bell opens in push mode.
+  let sheet = null;
   let syncing = null;
   let syncAgain = false;
   // When this page last had the browser check for a newer sw.js.
@@ -186,7 +194,7 @@ export function createNotifications({
   }
 
   async function toggleNotify() {
-    if (push) return togglePush();
+    if (push) return sheet?.toggle();
     const state = notifyState();
     if (state === "unsupported" || state === "denied") return;
     let wanted = state !== "on";
@@ -197,10 +205,11 @@ export function createNotifications({
     renderNotifyBtn();
   }
 
-  // This device's subscription on (permission from the tap: iOS asks only
-  // from one), a test push to show it works; or off.
+  // This device's subscription on (permission from the tap on the sheet's
+  // switch: iOS asks only from one), a test push to show it works; or off.
+  // @return the failure's message, or null
   async function togglePush() {
-    if (pushBusy || notifyState() === "denied") return;
+    if (pushBusy || notifyState() === "denied") return null;
     pushBusy = true;
     let failed = null;
     try {
@@ -228,8 +237,9 @@ export function createNotifications({
       pushBusy = false;
     }
     renderNotifyBtn();
-    // Said on the bell (its tooltip); the next tap tries again.
+    // Said on the bell (its tooltip) and in the sheet; the next tap tries again.
     if (failed) button.title = `Notifications to this phone failed: ${failed}`;
+    return failed && `Notifications to this phone failed: ${failed}`;
   }
 
   // The Home Screen app: its service worker, chi web's key, and whether
@@ -243,6 +253,10 @@ export function createNotifications({
       const info = await api("GET", `/api/push${query}`);
       if (!info?.enabled || !info.public_key) return;
       push = { reg, key: info.public_key, on: !!(sub && info.this) };
+      sheet = devices({
+        button, api, state: notifyState, toggleThis: togglePush,
+        endpoint: async () => (await push.reg.pushManager.getSubscription())?.endpoint || null,
+      });
       // register() has just checked for a newer sw.js.
       swCheckedAt = now();
       renderNotifyBtn();

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

@@ -0,0 +1,187 @@
+// The Home Screen app's notifications sheet (Web Push; notifications.js
+// opens it from the bell when chi web pushes): this device's switch (the
+// bell's subscribe / unsubscribe), then every device chi web pushes to from
+// this origin (GET /api/push's devices): its label, "this device", the last
+// delivery and the last error, a "Long turns done" switch (PATCH
+// /api/push/subscriptions/ID {prefs: {done}}), Remove for another device
+// (DELETE /api/push/subscriptions/ID), and the stale ones (another origin's,
+// never sent to) as one line. A phone gets it as a bottom sheet, a wider
+// window as a popover at the bell (chip_popover.js), small enough to need
+// no scrolling for a few devices.
+//
+// This device's row has the switch and never Remove: turning it off is the
+// bell turned off (the page forgets its device id), so the page's state and
+// chi web's store stay one. A device iOS revoked silently still shows a
+// recent delivery (Apple keeps answering 201): the list can't tell; switch
+// it off and on there.
+//
+// Pure templates and models, plus createPushDevices (the injected api and
+// the popover shell), so the specs run them under node --test.
+
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { createChipPopover } from "./chip_popover.js";
+import { relativeTime } from "./format.js";
+
+export const DEVICE_PATH = "/api/push/subscriptions";
+
+// The rows GET /api/push's +info+ gives, this device first.
+// @return [{id, label, this, last, error, done}]
+export function deviceRows(info, now) {
+  const devices = Array.isArray(info?.devices) ? info.devices : [];
+  const rows = devices.map((d) => ({
+    id: String(d.id || ""),
+    label: d.label || d.id || "device",
+    this: d.this === true,
+    last: d.last_ok_at ? `last delivery ${relativeTime(d.last_ok_at, now)}` : "no delivery yet",
+    error: d.last_error ? `last error ${d.last_error}` : "",
+    done: d.prefs?.done === true,
+  }));
+  return [...rows.filter((r) => r.this), ...rows.filter((r) => !r.this)];
+}
+
+// "2 more devices from an earlier address, never sent to" (another origin's:
+// a renamed machine or tailnet), "" for none.
+export function staleText(count) {
+  const n = Number(count) || 0;
+  if (n <= 0) return "";
+  return `${n === 1 ? "1 more device" : `${n} more devices`} from an earlier address, never sent to (chi web push rm)`;
+}
+
+// What the sheet draws: +state+ the bell's ("on" | "off" | "denied"),
+// +info+ GET /api/push's answer (null before the first), +busy+ a change
+// in flight, +error+ the last one's failure.
+export function sheetModel({ state, info, busy = false, error = "", now = Date.now() }) {
+  const rows = deviceRows(info, now);
+  const mine = rows.find((r) => r.this) || null;
+  const thisRow = mine || {
+    id: "", label: "This device", this: true, done: false, error: "",
+    last: state === "denied" ? "notifications are blocked for this app in the phone's settings" : "off: nothing is pushed here",
+  };
+  return {
+    on: state === "on" && !!mine,
+    denied: state === "denied",
+    busy,
+    error,
+    thisRow,
+    others: rows.filter((r) => !r.this),
+    stale: staleText(info?.stale),
+    loading: !info,
+  };
+}
+
+const doneSwitch = (row, busy) => html`<label class="pd-done"><span>Long turns done (10 s or more)</span
+  ><input type="checkbox" class="pd-switch" role="switch" data-pd="done" data-id=${row.id} .checked=${row.done}
+    ?disabled=${busy}></label>`;
+
+function rowTemplate(row, model) {
+  const mine = row.this;
+  const subscribed = !mine || model.on;
+  return html`<li class=${`pd-row${mine ? " this" : ""}`} data-id=${row.id || nothing}>
+    <div class="pd-who"><b>${row.label}</b>${mine ? html`<span class="pd-tag">this device</span>` : nothing}</div>
+    <div class="pd-act">${mine
+      ? html`<input type="checkbox" class="pd-switch" role="switch" data-pd="this" aria-label="Notifications to this device"
+          .checked=${model.on} ?disabled=${model.busy || model.denied}>`
+      : html`<button type="button" class="pd-remove" data-pd="remove" data-id=${row.id} ?disabled=${model.busy}>Remove</button>`}</div>
+    <div class="pd-meta">${row.last}${row.error ? html` · <span class="pd-error">${row.error}</span>` : nothing}</div>
+    ${subscribed ? doneSwitch(row, model.busy) : nothing}
+  </li>`;
+}
+
+// The sheet's content (a lit-html template).
+export function sheetTemplate(model) {
+  return html`<div class="ctx-pop-head"><strong>Notifications</strong><span class="ctx-pop-kind">devices</span
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    ><ul class="pd-list">${rowTemplate(model.thisRow, model)}${model.others.map((row) => rowTemplate(row, model))}</ul
+    >${model.loading ? html`<div class="pd-note">Loading the devices…</div>` : nothing
+    }${model.stale ? html`<div class="pd-note">${model.stale}</div>` : nothing
+    }${model.error ? html`<div class="pd-note pd-error" role="alert">${model.error}</div>` : nothing
+    }<div class="pd-note">Approvals, questions, step limits, cards and failed turns; quiet while a chi web page is in front.</div>`;
+}
+
+// The sheet at the bell. +state+() the bell's state; +endpoint+() this
+// device's push endpoint (a Promise; null without a subscription);
+// +toggleThis+() the bell's subscribe / unsubscribe (resolves to its
+// failure's message, or null); +api+ chi web's JSON (notifications.js's).
+// @return {toggle(), refresh(), isOpen(), pop}
+export function createPushDevices({ button, api, state, endpoint, toggleThis, now = () => Date.now(),
+                                    doc = globalThis.document, win = globalThis.window }) {
+  let info = null;
+  let busy = false;
+  let error = "";
+  // Each load's turn: an older answer that arrives late is dropped.
+  let loads = 0;
+
+  const draw = () => {
+    if (shell.isOpen()) render(sheetTemplate(sheetModel({ state: state(), info, busy, error, now: now() })), shell.pop);
+  };
+
+  const shell = createChipPopover({
+    id: "pushDevices", className: "ctx-popover push-devices", width: 340, el: doc.createElement("span"),
+    anchor: "#notifyBtn", openers: "#notifyBtn", summary: () => ({}), sheet: true, label: "Notifications", doc, win,
+    show: () => render(sheetTemplate(sheetModel({ state: state(), info, busy, error, now: now() })), shell.pop),
+    onClose: () => { error = ""; },
+  });
+
+  async function load() {
+    const turn = ++loads;
+    try {
+      const at = await endpoint();
+      const answer = await api("GET", `/api/push${at ? `?endpoint=${encodeURIComponent(at)}` : ""}`);
+      if (turn !== loads) return;
+      info = answer;
+    } catch (e) {
+      if (turn !== loads) return;
+      error = `Can't read the devices: ${e?.message || e}`;
+    }
+    draw();
+    shell.replace();
+  }
+
+  // One change at a time; the list is read again after it.
+  async function change(run) {
+    if (busy) return;
+    busy = true;
+    error = "";
+    draw();
+    try {
+      error = (await run()) || "";
+    } catch (e) {
+      error = e?.message || String(e);
+    } finally {
+      busy = false;
+    }
+    await load();
+  }
+
+  shell.pop.addEventListener("change", (e) => {
+    const input = e.target.closest?.("[data-pd]");
+    if (!input) return;
+    if (input.dataset.pd === "this") change(toggleThis);
+    else if (input.dataset.pd === "done") {
+      const id = input.dataset.id;
+      const done = input.checked;
+      change(() => api("PATCH", `${DEVICE_PATH}/${encodeURIComponent(id)}`, { prefs: { done } }).then(() => null));
+    }
+  });
+  shell.pop.addEventListener("click", (e) => {
+    const remove = e.target.closest?.('[data-pd="remove"]');
+    if (!remove) return;
+    const id = remove.dataset.id;
+    change(() => api("DELETE", `${DEVICE_PATH}/${encodeURIComponent(id)}`).then(() => null));
+  });
+
+  return {
+    pop: shell.pop,
+    isOpen: shell.isOpen,
+    // The bell's tap: open (drawn from what is known, then read again) or close.
+    toggle() {
+      if (shell.isOpen()) return shell.close();
+      shell.open(button);
+      return load();
+    },
+    // The bell's state changed elsewhere: redraw an open sheet.
+    refresh: draw,
+    // Read the devices again (specs await it).
+    load,
+  };
+}

data/lib/samagotchi/web/push/attention.rb

@@ -128,7 +128,8 @@ module Samagotchi
         # reason, never the question or the command (a lock screen shows it).
         # @return [Array(String, String)] title, body
         def text(summary, reason)
-          name = (summary && [summary[:title], summary[:first_preview], summary[:last_prompt]].find { |v| present?(v) }) ||
+          name = (summary && [summary[:title], summary[:auto_title], summary[:first_preview], summary[:last_prompt]]
+                             .find { |v| present?(v) }) ||
                  "chi session"
           body = reason == "done" ? "done in #{seconds(summary&.dig(:last_turn) || {}).round} s" : BODIES.fetch(reason, "")
           [clip(name.to_s.strip, TITLE_MAX), body]

data/lib/samagotchi/web/push/store.rb

@@ -163,6 +163,10 @@ module Samagotchi
           []
         end
 
+        # As #subscriptions, but a corrupt file raises (chi web push says so).
+        # @raise [Corrupt]
+        def subscriptions! = read
+
         # The subscriptions for +origin+ (the ones chi web sends to now).
         def for_origin(origin) = subscriptions.select { |sub| sub.origin == origin }
 
@@ -206,6 +210,16 @@ module Samagotchi
           end
         end
 
+        # Removes the device with this short id, only one subscribed on
+        # +origin+ (nil: any; chi web push rm).
+        # @return [Sub, nil] the one removed
+        def remove_device(id, origin: nil)
+          update do |subs|
+            gone = subs.find { |sub| sub.id == id && (origin.nil? || sub.origin == origin) }
+            [subs - [gone], gone]
+          end
+        end
+
         # Sets the device's prefs (+done+: a push for a long turn done).
         # @param origin [String, nil] only a device subscribed there
         # @return [Sub, nil] the device as it is now, nil when there is none

data/lib/samagotchi/web/push.rb

@@ -29,6 +29,11 @@ module Samagotchi
         def initialize(presence: Presence.new, **) = super
       end
 
+      # The test push (POST /api/push/test, chi web push test): no badge
+      # (it would clear the app's) and no open list (no cleanup).
+      TEST_PAYLOAD = { v: 1, kind: "show", tag: "chi:test", title: "chi", body: "test notification", url: "/" }.freeze
+      TEST_TTL = 600
+
       module_function
 
       # Push runs for +public_url+ (nil: none) when web.push.enabled.

data/lib/samagotchi/web/push_routes.rb

@@ -67,12 +67,25 @@ module Samagotchi
         end
 
         sub = Push::Store.short_id?(id) && @push.store.set_prefs(id, done: prefs["done"], origin: @push.origin)
-        return error_response(404, "unknown_device", "no device #{id[0, 16]} pushes from this origin") unless sub
+        return unknown_device(id) unless sub
 
         Log.info(:web, "push_prefs", device: sub.id, done: sub.done?)
         json_response(200, sub.public_h)
       end
 
+      # DELETE …/subscriptions/ID → 204: the devices list's Remove for
+      # another device (this device's row turns the bell off instead, so
+      # the page and the store agree).
+      def handle_push_remove(_req, id)
+        return push_off unless @push
+
+        sub = Push::Store.short_id?(id) && @push.store.remove_device(id, origin: @push.origin)
+        return unknown_device(id) unless sub
+
+        Log.info(:web, "push_removed", device: sub.id)
+        [204, { "Cache-Control" => "no-store" }, []]
+      end
+
       # {endpoint} → 204: this device's bell turned off.
       def handle_push_unsubscribe(req)
         return push_off unless @push
@@ -95,9 +108,8 @@ module Samagotchi
         endpoint = body["endpoint"] if body.is_a?(Hash)
         subs = @push.store.for_origin(@push.origin)
         subs = subs.select { |sub| sub.endpoint == endpoint } if endpoint.is_a?(String) && !endpoint.empty?
-        payload = { v: 1, kind: "show", tag: "chi:test", title: "chi", body: "test notification", url: "/" }
         results = subs.map do |sub|
-          result = @push.client.deliver(sub, payload, ttl: 600, urgency: "high")
+          result = @push.client.deliver(sub, Push::TEST_PAYLOAD, ttl: Push::TEST_TTL, urgency: "high")
           Log.info(:web, "push_test", device: sub.id, code: result.code, ms: result.ms)
           @push.store.remove(sub.id) if result.status == :gone
           { id: sub.id, label: sub.label, status: result.status.to_s, code: result.code, ms: result.ms }
@@ -116,6 +128,8 @@ module Samagotchi
         [204, { "Cache-Control" => "no-store" }, []]
       end
 
+      def unknown_device(id) = error_response(404, "unknown_device", "no device #{id[0, 16]} pushes from this origin")
+
       def push_off
         error_response(409, "push_off", "push needs an https public URL (chi web --tunnel tailscale, or web.public_url) " \
                                         "and web.push.enabled")