@songsid/agend 2.3.0-beta.2 → 2.3.0-beta.21

package/dist/ui/shared/instance-nav.js

@@ -9,7 +9,7 @@
 // Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { appStore, createStore, useStore } from "./app-store.js";
+import { appStore, createStore, guestPage, useStore } from "./app-store.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
 import { Skeleton } from "./ui-states.js";
@@ -30,12 +30,52 @@ const stored = (k) => { try { return localStorage.getItem(k); } catch { return n
 const nameOf = (it) => (it && (it.name != null ? it.name : it.instance_name)) || "";
 
 // ── Groups, labels, the filter ──
+/** A team's group key: no tag can be it (a group name is never a control character), so a tag named like a team stays apart. */
+export const TEAM_GROUP = "\u0001team:";
+/**
+ * #2172: an agent in a team (fleet.yaml `teams.<name>.members`; `teams` on a status or roster row, in fleet.yaml's
+ * order) sits under its first team, whatever its tags say; one in no team under its first tag; a ClassicBot room under
+ * "Classic"; the rest under "Other".
+ */
 export function groupOf(it) {
   const tags = Array.isArray(it.tags) ? it.tags : [];
   if (tags.includes("classic")) return "Classic";
+  const teams = Array.isArray(it.teams) ? it.teams.filter((x) => typeof x === "string" && x) : [];
+  if (teams.length) return TEAM_GROUP + teams[0];
   if (tags.length) return tags[0];
   return "Other";
 }
+/** "team" for a team's group, "tag" for a tag's; null for Classic, Other and Favorites. */
+export function groupKind(g) {
+  if (typeof g !== "string") return null;
+  if (g.startsWith(TEAM_GROUP)) return "team";
+  return g === "Other" || g === "Classic" || g.charCodeAt(0) < 32 ? null : "tag";
+}
+/** A group's heading: a team's name; the fallback group ("Other") in the page's language; a tag as it is. */
+export function groupLabel(g) { return g === "Other" ? tn("groupOther") : groupKind(g) === "team" ? g.slice(TEAM_GROUP.length) : g; }
+/** #2172: what a group is, said on its heading — a team's icon, or "#" before a tag — so the grouping can be read. */
+export function GroupMark({ group }) {
+  const kind = groupKind(group);
+  if (!kind) return null;
+  const what = tn(kind === "team" ? "groupTeam" : "groupTag");
+  return kind === "team"
+    ? html`<span class="v-group-kind team" title=${what}><${Icon} name="team" size=${13} /><span class="sr-only">${what}: </span></span>`
+    : html`<span class="v-group-kind tag" title=${what} aria-hidden="true">#</span>`;
+}
+/**
+ * #2050: the model as a person reads it. The server's resolver writes English for a model it has not resolved yet
+ * ("default (detected when it starts)") and for a CLI's own default ("x (default)"); those are shown in the page's language.
+ */
+export function modelText(it, raw = it && it.model) {
+  if (!raw || typeof raw !== "string") return raw;
+  if (it.model_source === "unresolved") {
+    const why = /^default \((.*)\)$/.exec(raw)?.[1];
+    const reason = why === "detected when it starts" ? tn("modelWhyStart") : why === "this CLI does not report a default" ? tn("modelWhyCli") : why;
+    return reason ? tn("modelDefaultWhy", { reason }) : raw === "default" ? tn("modelDefault") : raw;
+  }
+  if (it.model_source === "cli-default") { const m = /^(.*) \(default\)$/.exec(raw); if (m) return tn("modelCliDefault", { model: m[1] }); }
+  return raw;
+}
 const BACKEND_LABELS = { "claude-code": "Claude Code", "kiro-cli": "Kiro CLI", codex: "Codex", grok: "Grok Build", antigravity: "Antigravity", opencode: "OpenCode" };
 export function backendLabel(backend) { return BACKEND_LABELS[backend] || backend || "Unknown"; }
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
@@ -93,8 +133,8 @@ export function instanceTooltip(it) {
   if (it.display_name && it.display_name !== name) lines.push(it.display_name, `(${name})`);
   else lines.push(name);
   lines.push(line("tooltipBackend", backendLabel(it.backend)));
-  const src = (s) => (s === "instance" || s === "classic" ? " (configured)" : s === "fleet-default" ? " (fleet default)" : "");
-  lines.push(line("tooltipModel", (it.model || tn("tooltipUnavailable")) + src(it.model_source)));
+  const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
+  lines.push(line("tooltipModel", (modelText(it) || tn("tooltipUnavailable")) + src(it.model_source)));
   lines.push(line("tooltipStatus", status));
   lines.push(line("tooltipContext", context));
   if (it.effort) lines.push(line("tooltipEffort", it.effort + src(it.effort_source)));
@@ -108,6 +148,7 @@ const SIDEBAR_ORDER_KEY = "agend_view_sidebar_order";   // View's key since #999
 const COLLAPSED_KEY = "agend_instance_collapsed";
 const FILTER_KEY = "agend_instance_filter";
 const FAVORITES_KEY = "agend_favorites";   // #1664
+const SORT_KEY = "agend_nav_sort";         // #2179
 /**
  * A synced sidebar preference, as the JSON its reader parses: the value in force in memory (app-prefs.js — this
  * page's own change, else the host's; a full or blocked storage never brings an old one back), else this browser's copy.
@@ -138,6 +179,13 @@ function readFilter() {
     return { q: f && typeof f.q === "string" ? f.q : "", status: strings(f && f.status).filter((s) => STATUS_FACETS.includes(s)), cli: strings(f && f.cli) };
   } catch { return { q: "", status: [], cli: [] }; }
 }
+/** #2179: how the list sorts — { mode: "custom" (the person's order; the default) | "recent", favs: "fixed" | "recent" }. */
+function readSort() {
+  try {
+    const s = JSON.parse(inForce("nav.sort", SORT_KEY) || "{}");
+    return { mode: s && s.mode === "recent" ? "recent" : "custom", favs: s && s.favs === "recent" ? "recent" : "fixed" };
+  } catch { return { mode: "custom", favs: "fixed" }; }
+}
 function readFavorites() {
   try { const a = JSON.parse(inForce("nav.favorites", FAVORITES_KEY) || "[]"); return Array.isArray(a) ? [...new Set(a.filter((x) => typeof x === "string"))] : []; } catch { return []; }
 }
@@ -151,7 +199,9 @@ export function computeOrder(roster, order) {
     if (ia !== ib) return ia - ib;
     if (a === "Other") return 1;
     if (b === "Other") return -1;
-    return a.localeCompare(b);
+    const ta = groupKind(a) === "team", tb = groupKind(b) === "team";
+    if (ta !== tb) return ta ? -1 : 1;                   // #2172: teams first, then tags
+    return groupLabel(a).localeCompare(groupLabel(b));
   });
   const instByGroup = new Map();
   for (const [g, items] of groups) {
@@ -174,12 +224,18 @@ function moveIn(arr, moving, target, before) {
 }
 
 /** The list's state for the page's life: this browser's order, folded groups and filter (each also kept in storage). */
-export const navStore = createStore({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites() });
+export const navStore = createStore({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites(), sort: readSort() });
 /** Read them again from this browser's storage — what a page load does (the store above is made that way). */
 export function loadNavPrefs() {
-  navStore.set({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites() });
+  navStore.set({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter(), favorites: readFavorites(), sort: readSort() });
   namesStore.set({ primary: readNamesPrimary() });
 }
+/** #2179: change how the list sorts ({ mode?, favs? }): the same on every page and device. */
+export function setNavSort(patch) {
+  const sort = { ...navStore.get().sort, ...patch };
+  navStore.set({ sort });
+  savePref("nav.sort", { mode: sort.mode, favs: sort.favs });
+}
 /** Change the filter ({ q?, status?, cli? }): the same on every page, and kept by this browser. */
 export function setNavFilter(patch) {
   const filter = { ...navStore.get().filter, ...patch };
@@ -188,7 +244,7 @@ export function setNavFilter(patch) {
 }
 function setCollapsed(collapsed) { navStore.set({ collapsed }); savePref("nav.collapsed", [...collapsed]); }
 // Another device rearranged, folded or filtered: this page's list follows (its cache is already updated).
-onPrefsChanged((keys) => { if (keys.has("nav.order") || keys.has("nav.collapsed") || keys.has("nav.filter") || keys.has("nav.favorites")) loadNavPrefs(); });
+onPrefsChanged((keys) => { if (keys.has("nav.order") || keys.has("nav.collapsed") || keys.has("nav.filter") || keys.has("nav.favorites") || keys.has("nav.sort")) loadNavPrefs(); });
 
 // ── #1664: favorites — starred instances, pinned at the top in the order they were starred (or moved) ──
 export const MAX_FAVORITES = 50;
@@ -339,6 +395,71 @@ export function InstanceAvatar({ it, state, cli = false }) {
 const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
   : facet === "crashed" ? t("app.statusCrashed") : t("app.statusStopped"));
 
+// ── #2179: when each instance last replied to a person (the status frame's last_reply) ──
+/** A reply this recent (minutes) is highlighted; the highlight fades to nothing over this time. */
+export const REPLY_FRESH_MIN = 10;
+/** Minutes since the instance last replied to a person, or null (none kept, or no time on this row). */
+export function replyAge(it, now = Date.now()) {
+  const at = it && typeof it.last_reply === "string" ? Date.parse(it.last_reply) : NaN;
+  return Number.isFinite(at) ? Math.max(0, (now - at) / 60000) : null;
+}
+/** "just now", "2 min ago", "3 h ago", "yesterday", "4 d ago" — in the page's language. */
+export function replyText(mins) {
+  if (mins < 1) return tn("replyJustNow");
+  if (mins < 60) return tn("replyMinutes", { n: Math.floor(mins) });
+  if (mins < 1440) return tn("replyHours", { n: Math.floor(mins / 60) });
+  if (mins < 2880) return tn("replyYesterday");
+  return tn("replyDays", { n: Math.floor(mins / 1440) });
+}
+/** How strong the highlight is: 1 just after a reply, down to 0 at REPLY_FRESH_MIN minutes. */
+export function replyFade(mins) { return mins == null || mins >= REPLY_FRESH_MIN ? 0 : 1 - mins / REPLY_FRESH_MIN; }
+/** The highlight's strength on the row, through the CSSOM (style-src has no 'unsafe-inline'). */
+function paintReply(el, fade) {
+  if (!el) return;
+  if (fade > 0) el.style.setProperty("--reply-a", fade.toFixed(3)); else el.style.removeProperty("--reply-a");
+}
+/** Most recent reply first; rows with none keep their order after them (a stable sort). */
+function byRecentReply(age) {
+  return (a, b) => {
+    const x = age(a), y = age(b);
+    if (x == null || y == null) return x == null ? (y == null ? 0 : 1) : -1;
+    return x - y;
+  };
+}
+/** The group that holds every non-favorite row in "recent" mode: no tag or team can be it, and it is never saved. */
+const RECENT_GROUP = "\u0000recent";
+
+/** #2179: the sort button and its menu — how the list sorts, said on the button. */
+function SortMenu({ sort }) {
+  const [open, setOpen] = useState(false);
+  const box = useRef(null);
+  useLayoutEffect(() => {
+    if (!open) return undefined;
+    const doc = box.current && box.current.ownerDocument;
+    if (!doc) return undefined;
+    const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
+    const esc = (e) => { if (e.key === "Escape") { e.preventDefault(); setOpen(false); } };
+    doc.addEventListener("pointerdown", away, true);
+    doc.addEventListener("keydown", esc, true);
+    return () => { doc.removeEventListener("pointerdown", away, true); doc.removeEventListener("keydown", esc, true); };
+  }, [open]);
+  const recent = sort.mode === "recent";
+  const radio = (group, value, label, hint) => html`<label class="nav-sort-opt"><input type="radio" name=${`nav-sort-${group}`} value=${value}
+      checked=${sort[group] === value} onChange=${() => setNavSort({ [group]: value })} /><span>${label}${hint ? html`<span class="nav-sort-hint">${hint}</span>` : null}</span></label>`;
+  return html`<div class="nav-sort" ref=${box}>
+    <button type="button" class=${`chip-btn nav-sort-btn${recent ? " on" : ""}`} aria-haspopup="dialog" aria-expanded=${open ? "true" : "false"}
+      title=${tn("sortTitle")} onClick=${() => setOpen(!open)}><${Icon} name="sort" size=${12} /><span>${tn(recent ? "sortRecent" : "sortCustom")}</span></button>
+    ${open ? html`<div class="nav-sort-menu" role="dialog" aria-label=${tn("sortTitle")}>
+      <fieldset><legend>${tn("sortTitle")}</legend>
+        ${radio("mode", "custom", tn("sortCustom"), tn("sortCustomHint"))}
+        ${radio("mode", "recent", tn("sortRecent"), tn("sortRecentHint"))}</fieldset>
+      <fieldset><legend>${tn("sortFavs")}</legend>
+        ${radio("favs", "fixed", tn("sortFavsFixed"), "")}
+        ${radio("favs", "recent", tn("sortFavsRecent"), "")}</fieldset>
+    </div>` : null}
+  </div>`;
+}
+
 /**
  * The sidebar's instance list. `route`: the page's (which instance is open, and which view a row opens). `items`: the
  * rows (status frames' instances, or View's roster for an anonymous reader); `loaded` false shows a skeleton.
@@ -352,6 +473,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const filterRef = useRef(null);
   const list = useRef(null);
   const drag = useRef(null);
+  // #2179: the reply times and their highlight move on by themselves — the list is drawn again every 30 s.
+  const [, setTick] = useState(0);
+  useLayoutEffect(() => { const id = setInterval(() => setTick((n) => n + 1), 30000); return () => clearInterval(id); }, []);
   // #1700: which facet groups are open — this device's (screen layout, not a synced preference), read when the list mounts.
   const [facetOpen, setFacetOpen] = useState(readFacetsOpen);
   const toggleFacet = (key) => setFacetOpen((cur) => { const next = { ...cur, [key]: !cur[key] }; writeFacetsOpen(next); return next; });
@@ -375,10 +499,30 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const favs = nav.favorites.filter((n) => known.has(n));
   const favSet = new Set(favs);
   const canStar = !viewOnly && prefsWritable();
-  const shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
-  const shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
-  if (favs.length) shownInsts.set(FAV_GROUP, favs);
-  const f = nav.filter;
+  // #1920: a guest's list is to pick from — no reordering and no filters (one this device kept would hide rows with no
+  // way to clear it).
+  const guest = guestPage();
+  // #2179: when each row last replied (a guest's list has no times). "recent" mode (never a guest's): the favorites keep
+  // their order or are sorted too, and every other row is one list, the last reply first. "custom" (the default) is the
+  // person's own order — a reply never moves a row.
+  const now = Date.now();
+  // The anonymous View reader (viewOnly) has no reply times (/api/profiles carries none) and no way to change the sort:
+  // its list is always Custom, whatever this browser kept from a signed-in page (#2181 review).
+  const ageOf = (n) => (guest || viewOnly ? null : replyAge(byName.get(n), now));
+  const recent = !guest && !viewOnly && nav.sort.mode === "recent";
+  const favsSorted = recent && nav.sort.favs === "recent";
+  let shownGroups, shownInsts;
+  if (recent) {
+    const sortRecent = byRecentReply(ageOf);
+    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n)).sort(sortRecent);
+    shownGroups = [...(favs.length ? [FAV_GROUP] : []), ...(rest.length ? [RECENT_GROUP] : [])];
+    shownInsts = new Map([[FAV_GROUP, favsSorted ? [...favs].sort(sortRecent) : favs], [RECENT_GROUP, rest]]);
+  } else {
+    shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
+    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
+    if (favs.length) shownInsts.set(FAV_GROUP, favs);
+  }
+  const f = guest ? { q: "", status: [], cli: [] } : nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
   // it matches; a match is not repeated below. "N / M" still counts the filter's matches (the pinned row counts only
@@ -392,7 +536,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const flip = (key, value) => { const cur = new Set(navStore.get().filter[key]); if (cur.has(value)) cur.delete(value); else cur.add(value); setNavFilter({ [key]: [...cur] }); };
   // Drag to reorder: only the full list (a filtered subset would be ambiguous), groups among groups, instances within
   // their group.
-  const dragProps = (item) => shown.active ? {} : {
+  const dragProps = (item) => shown.active || guest || recent ? {} : {     // #2179: not while sorted by reply
     draggable: true,
     onDragStart: (e) => { drag.current = item; e.currentTarget.classList.add("dragging"); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", item.name); } catch { /* Firefox needs data */ } },
     onDragEnd: (e) => { e.currentTarget.classList.remove("dragging"); drag.current = null; },
@@ -447,18 +591,24 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     // #1958: its identity colour — the ring, a left bar and/or the name, as resolved; painted through the CSSOM.
     const id = identityOf(it);
     const full = !starred && favs.length >= MAX_FAVORITES;
-    return html`<li key=${name} class="v-li"><a class=${`inst v-inst${on ? " active" : ""} ${identityClasses(id)}`} ref=${(el) => paintIdentity(el, id)} href=${rowPath(name)} title=${instanceTooltip(it)}
+    // #2179 (B5, the user's pick): the % (and the ★ beside the row) on the name's line; the time of the last reply at the
+    // end of the second line, highlighted for REPLY_FRESH_MIN minutes, fading by itself (a reply under a minute pulses once).
+    const mins = ageOf(name), fade = replyFade(mins);
+    const two = !!secondary || mins != null;
+    return html`<li key=${name} class=${`v-li${two ? " two-line" : ""}`}><a class=${`inst v-inst${on ? " active" : ""}${fade > 0 ? " replied" : ""}${mins != null && mins < 1 ? " just" : ""} ${identityClasses(id)}`}
+        ref=${(el) => { paintIdentity(el, id); paintReply(el, fade); }} href=${rowPath(name)} title=${instanceTooltip(it)}
         aria-current=${on ? "page" : undefined} onClick=${onPick} ...${fav ? {} : dragProps({ type: "instance", name, group: g })}>
       <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} cli=${true} />
-      <span class="inst-text"><span class="inst-name" title=${label}>${label}</span>
-        ${secondary ? html`<span class="inst-alt" title=${secondary}>${secondary}</span>` : null}
+      <span class="inst-text"><span class="inst-line"><span class="inst-name" title=${label}>${label}</span>
+          <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
+        ${two ? html`<span class="inst-line inst-line2"><span class="inst-alt" title=${secondary || undefined}>${secondary || ""}</span>
+          ${mins != null ? html`<span class=${`inst-when${fade > 0 ? " fresh" : ""}`} title=${tn("replyTitle", { time: new Date(Date.parse(it.last_reply)).toLocaleString() })}>${replyText(mins)}</span>` : null}</span>` : null}
         ${facet === "needs" ? html`<span class="inst-sub"><span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span></span>` : null}
         <span class="sr-only">${tn("tooltipBackend", { value: backendLabel(it.backend) })}</span></span>
-      <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span>
     </a>${fav && editing && canStar ? html`<button type="button" class="icon-btn inst-move" aria-label=${tn("favUp", { name: label })}
-        title=${shown.active ? tn("favFiltered") : tn("favUp", { name: label })} disabled=${shown.active || i === 0} onClick=${() => { if (!shown.active) moveFavorite(name, -1, known); }}><${Icon} name="up" size=${14} /></button><button type="button" class="icon-btn inst-move"
-        aria-label=${tn("favDown", { name: label })} title=${shown.active ? tn("favFiltered") : tn("favDown", { name: label })} disabled=${shown.active || i === count - 1}
-        onClick=${() => { if (!shown.active) moveFavorite(name, 1, known); }}><${Icon} name="down" size=${14} /></button>` : null}${canStar
+        title=${shown.active ? tn("favFiltered") : favsSorted ? tn("favSorted") : tn("favUp", { name: label })} disabled=${shown.active || favsSorted || i === 0} onClick=${() => { if (!shown.active && !favsSorted) moveFavorite(name, -1, known); }}><${Icon} name="up" size=${14} /></button><button type="button" class="icon-btn inst-move"
+        aria-label=${tn("favDown", { name: label })} title=${shown.active ? tn("favFiltered") : favsSorted ? tn("favSorted") : tn("favDown", { name: label })} disabled=${shown.active || favsSorted || i === count - 1}
+        onClick=${() => { if (!shown.active && !favsSorted) moveFavorite(name, 1, known); }}><${Icon} name="down" size=${14} /></button>` : null}${canStar
       ? html`<button type="button" class=${`icon-btn inst-star${starred ? " on" : ""}`} aria-pressed=${starred ? "true" : "false"} disabled=${full}
           aria-label=${tn(starred ? "favRemove" : "favAdd", { name: label })} title=${full ? tn("favFull", { max: MAX_FAVORITES }) : tn(starred ? "favRemove" : "favAdd", { name: label })}
           onClick=${() => toggleFavorite(name, known)}><${Icon} name="star" size=${14} /></button>` : null}</li>`;
@@ -467,6 +617,8 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   return html`<div class=${`view-roster inst-nav${editing && canStar ? " fav-editing" : ""}`}>
     <div data-trust="navigation" class="side-section" id="instanceList" ref=${list}>
     <div class="inst-head"><h2 class="side-label">${tn("instancesLabel")}</h2>
+      ${canStar && items.length && !guest ? html`<${SortMenu} sort=${nav.sort} />`
+        : recent ? html`<span class="chip-btn nav-sort-btn on nav-sort-static"><${Icon} name="sort" size=${12} /><span>${tn("sortRecent")}</span></span>` : null}
       ${canStar && items.length ? html`<button type="button" class="chip-btn fav-edit" aria-pressed=${editing ? "true" : "false"} onClick=${() => setEditing(!editing)}>
         ${editing ? tn("favDone") : html`<${Icon} name="star" size=${12} />${tn("favEdit")}`}</button>` : null}</div>
     ${!loaded ? html`<${Skeleton} lines=${4} />` : !items.length ? html`<p class="side-empty">${t("app.noInstances")}</p>` : null}
@@ -474,6 +626,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       <div class="v-group-head pinned-head"><span class="grow">${tn("pinnedCurrent")}</span></div>
       <ul class="inst-list">${row(pinned, PINNED_GROUP, 0, 1)}</ul></div>` : null}
     ${listed.map(({ group: g, names }) => {
+      // #2179: in "recent" mode every other row is one list — open, not dragged, not saved as a group.
+      if (g === RECENT_GROUP) return html`<div key=${g} class="v-group v-recent" role="group" aria-label=${tn("recentOthers")}>
+        <div class="v-group-head recent-head"><${Icon} name="clock" size=${14} /><span class="grow">${tn("recentOthers")}</span><span class="count">${names.length}</span></div>
+        <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
       // #1664: Favorites — always open, not dragged (↑ ↓ in Edit), named in the page's language.
       if (g === FAV_GROUP) return html`<div key=${g} class="v-group v-fav" role="group" aria-label=${tn("favorites")}>
         <div class="v-group-head fav-head"><${Icon} name="star" size=${14} cls="fav-mark" /><span class="grow">${tn("favorites")}</span><span class="count">${names.length}</span></div>
@@ -481,14 +637,14 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       const folded = nav.collapsed.has(g);
       return html`<div key=${g} class="v-group">
         <button type="button" class="v-group-head" aria-expanded=${folded ? "false" : "true"} onClick=${() => toggle(g)}
-          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: g })} ...${dragProps({ type: "group", name: g })}>
-          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${g}</span><span class="count">${names.length}</span></button>
+          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: groupLabel(g) })} ...${dragProps({ type: "group", name: g })}>
+          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><${GroupMark} group=${g} /><span class="grow">${groupLabel(g)}</span><span class="count">${names.length}</span></button>
         ${folded ? null : html`<ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul>`}
       </div>`;
     })}
     ${loaded && shown.active && !shown.groups.length ? html`<p class="side-empty">${tn("filterNone")}</p>` : null}
     </div>
-    <div class="v-filter">
+    ${guest ? null : html`<div class="v-filter">
       <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
         <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck=${false} placeholder=${tn("filterPh")} value=${f.q}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
@@ -504,7 +660,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
         </div>
         <p class="note nav-shown" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
       </div>
-    </div>
+    </div>`}
   </div>`;
 }
 

package/dist/ui/shared/owner-css.js

@@ -80,6 +80,7 @@ function sync() {
     let valid = false;
     try { valid = link.disabled !== true && !!link.sheet && link.sheet.ownerNode === link && link.sheet.disabled !== true && link.sheet.href === new URL(href, location.href).href; } catch { /* unknown stylesheet */ }
     linkState = valid ? "on" : "unknown"; life(linkState, valid ? "loaded" : "load_unverified");
+    if (valid) shownHere(sha);                                          // #2198: an agent's trial is on this screen now
   });
   link.addEventListener("error", () => { if (!current()) return; linkState = "unknown"; life("unknown", "load_failed"); });
   life("loading", "loading");
@@ -189,12 +190,40 @@ async function reread() {
     if (body && mine === gen) reconcile(body);                         // nothing newer happened since this was asked
   } catch { /* the next change tries again */ }
 }
+/**
+ * #2198: an agent's trial (General saved it) waits on the host until a person's page shows it. This page shows it once
+ * its stylesheet has loaded on screen, and says so: the host starts the keep window then (the dead-man switch, from when
+ * a person can see the Keep button). If the host cannot be told, this page reverts it itself at KEEP_SECONDS, as it does
+ * for a version it saved.
+ */
+let waitingShown = null;   // { id, sha } of an agent's trial this page is showing and has not reported yet
+function shownHere(sha) {
+  const w = waitingShown;
+  if (!w || w.sha !== sha) return;
+  waitingShown = null;
+  const trial = ownerCssTrial.get();
+  if (!trial || trial.id !== w.id) return;
+  post("/ui/owner-css/shown", { trial: w.id }).then((r) => {
+    if (ownerCssTrial.get() !== trial) return;
+    const ms = r.ok && r.body && Number.isFinite(r.body.remaining_ms) ? r.body.remaining_ms : null;
+    if (ms === null) { startOwnerCssTrial(w.id, w.sha, trial.previous, KEEP_SECONDS, true); return; }
+    startOwnerCssTrial(w.id, w.sha, trial.previous, ms / 1000 + 1, false);
+  }, () => { if (ownerCssTrial.get() === trial) startOwnerCssTrial(w.id, w.sha, trial.previous, KEEP_SECONDS, true); });
+}
 /** Match the host: the version in force, and whether one is on trial (another device's included) — or none any more. */
 function reconcile(state) {
   const pending = state.pending && state.pending.sha === state.active && typeof state.pending.id === "string" ? state.pending : null;
   const trial = ownerCssTrial.get();
-  if (!pending) { if (trial) dropTrial(); showActive(state.active, state.effectState); return; }
+  if (!pending) { waitingShown = null; if (trial) dropTrial(); showActive(state.active, state.effectState); return; }
   if (trial && trial.id === pending.id) return;                        // already asking about this one
+  if (pending.waiting === true) {
+    // Shown here: its stylesheet goes in, and once it has loaded this page reports it (shownHere). Until then the bar
+    // waits on the host's word, as for another device's trial.
+    waitingShown = { id: pending.id, sha: pending.sha };
+    startOwnerCssTrial(pending.id, pending.sha, pending.previous, HOST_TRIAL_SECONDS, false);
+    if (linkState === "on" && ownedLink && ownedLink.getAttribute("href") === `/ui/owner-css.css?v=${encodeURIComponent(pending.sha)}`) shownHere(pending.sha);
+    return;
+  }
   // The host's own remaining time and a second (never this device's clock): it has settled the trial by then.
   const remaining = typeof pending.remaining_ms === "number" && Number.isFinite(pending.remaining_ms) ? pending.remaining_ms : 0;
   startOwnerCssTrial(pending.id, pending.sha, pending.previous, remaining / 1000 + 1, false);

package/dist/ui/shared/panel-view.js

@@ -16,7 +16,7 @@ import { HeaderTools, VIEW_SCALE, textSizeStore } from "./header-tools.js";
 import { readStream } from "./read-stream.js";
 // The usage dialog's metric row lives with the dialog now (usage-dialog.js); re-exported for what imported it here.
 export { UsageMetric } from "./usage-dialog.js";
-import { backendLabel, STATUS_KEYS } from "./instance-nav.js";
+import { backendLabel, modelText, STATUS_KEYS } from "./instance-nav.js";
 import { viewStore } from "./view-roster-store.js";
 
 /** #1580: the app's stream says the fleet is not answering (a restart): the View's polls skip their turn until it is. */
@@ -27,7 +27,7 @@ import { Dialog } from "./ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "./ui-states.js";
 import { Icon } from "./ui-icons.js";
 import "./view-strings.js";
-import { checkCard, fitPicture, IdentityCard, useCard } from "./identity-card.js";
+import { BannerFocusPreview, checkCard, fitPicture, IdentityCard, useBannerPreview, useCard } from "./identity-card.js";
 import { confirmDialog } from "./ui-confirm.js";
 import { openColorDialog } from "./identity-color.js";
 
@@ -305,7 +305,7 @@ function Card({ it, viewOnly, onEdit }) {
     <div class="v-avatar">${it.has_avatar ? html`<img ref=${avatar} alt="" />` : html`<span class="v-initial" aria-hidden="true">${initial}</span>`}</div>
     <div class="v-card-body">
       <div class="v-card-line"><strong>${it.display_name || it.instance_name}</strong>${it.role ? html`<span class="v-role">${it.role}</span>` : null}</div>
-      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${it.model}` : ""}${ctx}</div>
+      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${modelText(it)}` : ""}${ctx}</div>
       ${open && it.description ? html`<p class="v-card-desc">${it.description}</p>` : null}
     </div>
     <button type="button" class="icon-btn" onClick=${toggle} aria-expanded=${open ? "true" : "false"} aria-label=${tn(open ? "collapseProfile" : "expandProfile")} title=${tn(open ? "collapseProfile" : "expandProfile")}>
@@ -332,6 +332,11 @@ function EditProfile({ it, onClose }) {
   const [removeCard, setRemoveCard] = useState({ portrait: false, banner: false });
   const [clearCard, setClearCard] = useState(false);
   const pics = { portrait: useRef(null), banner: useRef(null) };
+  // #2086: the banner's focus — this person's (null: follow the agent's, else the centre), and the picture to preview:
+  // a newly chosen file, else the banner drawn now.
+  // `agent`: the agent's own focus (what "Follow the agent's" shows; else the centre).
+  const [focus, setFocus] = useState({ value: 50, mine: null, start: null, agent: null });
+  const [bannerPreview, preview] = useBannerPreview();
   useEffect(() => {
     let live = true;
     // The card's fields stay disabled until this read is in (#1889 review: a draft typed meanwhile was overwritten);
@@ -343,6 +348,11 @@ function EditProfile({ it, onClose }) {
       const resolved = checkCard(it.instance_name, body);
       const mine = (k) => (resolved && resolved[k] && resolved[k].by === "human" ? resolved[k] : null);
       setCard({ mine: { tagline: mine("tagline"), bio: mine("bio"), portrait: mine("portrait"), banner: mine("banner") }, limits: body.limits || null });
+      const bf = resolved && resolved.banner_focus;
+      const agent = Number.isInteger(body.banner_focus_agent) && body.banner_focus_agent >= 0 && body.banner_focus_agent <= 100 ? body.banner_focus_agent : null;
+      const mineFocus = bf && bf.by === "human" ? bf.value : null;
+      setFocus({ value: mineFocus ?? agent ?? 50, mine: mineFocus, start: mineFocus, agent });
+      if (resolved && resolved.banner) preview.fromSrc(resolved.banner.src);
       setCardText({ tagline: mine("tagline") ? mine("tagline").text : "", bio: mine("bio") ? mine("bio").text : "" });
     }).catch(() => { if (live && lease.current()) setCard(none); });
     return () => { live = false; };
@@ -360,6 +370,7 @@ function EditProfile({ it, onClose }) {
     const clearing = clearCard;
     const before = card && card.mine ? { tagline: card.mine.tagline ? card.mine.tagline.text : "", bio: card.mine.bio ? card.mine.bio.text : "" } : { tagline: "", bio: "" };
     if (!clearing) for (const k of ["tagline", "bio"]) if (cardText[k] !== before[k]) draft[`card_${k}`] = cardText[k];
+    if (!clearing && focus.mine !== focus.start) draft.card_banner_focus = focus.mine;          // #2086
     const cardPics = {};
     try {
       // A picture too large is fitted first (after asking) — before anything is written, so declining writes nothing.
@@ -422,10 +433,19 @@ function EditProfile({ it, onClose }) {
         <label class="field"><span>${tn("cardTagline")}</span><input value=${cardText.tagline} onInput=${(e) => setCardText({ ...cardText, tagline: e.target.value })} /></label>
         <label class="field"><span>${tn("cardBio")}</span><textarea rows="4" value=${cardText.bio} onInput=${(e) => setCardText({ ...cardText, bio: e.target.value })}></textarea></label>
         ${["portrait", "banner"].map((slot) => html`<div key=${slot} class="form">
-          <label class="field"><span>${tn(slot === "portrait" ? "cardPortrait" : "cardBanner")}</span><input ref=${pics[slot]} type="file" accept="image/png,image/jpeg,image/webp" /></label>
+          <label class="field"><span>${tn(slot === "portrait" ? "cardPortrait" : "cardBanner")}</span><input ref=${pics[slot]} type="file" accept="image/png,image/jpeg,image/webp"
+            onChange=${slot === "banner" ? (e) => { const fl = e.currentTarget.files && e.currentTarget.files[0]; if (fl) preview.fromFile(fl); } : undefined} /></label>
           ${card && card.mine && card.mine[slot] ? html`<div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${removeCard[slot] ? "true" : "false"}
             onClick=${() => setRemoveCard({ ...removeCard, [slot]: !removeCard[slot] })}>${tn(removeCard[slot] ? "cardKeep" : "cardRemove")}</button></div>` : null}
         </div>`)}
+        ${bannerPreview ? html`<div class="field bf-field">
+          <span>${tn("cardBannerFocus")}</span>
+          <${BannerFocusPreview} src=${bannerPreview.src} focus=${focus.value} />
+          <input type="range" min="0" max="100" step="1" value=${focus.value} aria-label=${tn("cardBannerFocus")}
+            onInput=${(e) => { const v = Number(e.currentTarget.value); setFocus({ ...focus, value: v, mine: v }); }} />
+          <span class="note">${tn("cardBannerFocusNote")}</span>
+          ${focus.mine !== null ? html`<div class="field-row"><button type="button" class="btn btn-sm" onClick=${() => setFocus({ ...focus, value: focus.agent ?? 50, mine: null })}>${tn("cardFocusFollow")}</button></div>` : null}
+        </div>` : null}
       </fieldset>
       <div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${clearCard ? "true" : "false"} onClick=${() => setClearCard(!clearCard)}>${tn(clearCard ? "keepCard" : "clearCard")}</button>
         ${clearCard ? html`<span class="muted">${tn("clearCardNote")}</span>` : null}</div>

package/dist/ui/shared/tokens.css

@@ -9,7 +9,12 @@
  * surfaces it is used on, and focus rings and strong borders meet 3:1 (tests/web-tokens-1408.test.ts).
  *
  * Inter is bundled (/assets/inter.woff2, SIL OFL 1.1 — see fonts/README.md): the CSP allows fonts from 'self' only,
- * and nothing is loaded from another site. Chinese falls back to the system's CJK fonts, in the order below. */
+ * and nothing is loaded from another site. Chinese falls back to the system's CJK fonts, in the order below.
+ *
+ * Emoji (#1918 follow-up, the user's tofu boxes): every stack ends with the platforms' colour emoji fonts and the
+ * `emoji` generic (--font-emoji), so an emoji the text fonts lack is drawn by Windows' Segoe UI Emoji, macOS's Apple
+ * Color Emoji or Linux's Noto Color Emoji rather than as a box — for the stock stacks and each theme font
+ * (app.css: .th-font-system, .th-font-mono). A browser tries the families in order for each character. */
 
 @font-face {
   font-family: "Inter";
@@ -22,8 +27,9 @@
 
 :root {
   /* ── Type ── */
-  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji;
+  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, var(--font-emoji);
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-emoji);
   --fs-xs: 12px;  --lh-xs: 16px;
   --fs-sm: 13px;  --lh-sm: 18px;
   --fs-md: 15px;  --lh-md: 24px;   /* message text */

package/dist/ui/shared/ui-icons.js

@@ -37,8 +37,10 @@ const P = {
   type: () => html`<path d="M4 7V5h16v2M9 19h6M12 5v14"/>`,
   chart: () => html`<path d="M3 20h18M6 16v-4M11 16V8M16 16v-6"/>`,
   up: () => html`<path d="M12 19V5M5 12l7-7 7 7"/>`,
+  sort: () => html`<path d="M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4"/>`,   // #2179: the sidebar's sort
   star: () => html`<path d="M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95L12 2.5z"/>`,
   eye: () => html`<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
+  idcard: () => html`<rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="8" cy="11" r="2"/><path d="M5 16a3 3 0 0 1 6 0M14 10h5M14 14h3"/>`,
   check: () => html`<path d="M20 6L9 17l-5-5"/>`,
   inbox: () => html`<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>`,
   bell: () => html`<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,

package/dist/ui/shared/ui-menu.js

@@ -4,21 +4,25 @@ import { html, useEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
 
-/** items: [{ key, label, icon?, onSelect, danger?, disabled? }] (falsy entries are skipped). */
-export function Menu({ items, label, icon = "more", cls = "" }) {
+/**
+ * items: [{ key, label, icon?, onSelect, danger?, disabled? }] (falsy entries are skipped). `checked` makes a radio item;
+ * `checkbox: true` with `checked` a checkbox item (#2217 hotfix: the chat's card menu), which toggles and keeps the menu
+ * open. `active`: the button shows a pressed look (what it controls is on), without changing its role.
+ */
+export function Menu({ items, label, icon = "more", cls = "", active = false }) {
   const [open, setOpen] = useState(false);
   const btn = useRef(null), list = useRef(null);
   const shown = (items || []).filter(Boolean);
   useEffect(() => {
     if (!open) return undefined;
-    const first = list.current && list.current.querySelector("[role=menuitem]:not([disabled])");
+    const first = list.current && list.current.querySelector("[role=menuitem]:not([disabled]), [role=menuitemradio]:not([disabled]), [role=menuitemcheckbox]:not([disabled])");
     if (first) first.focus();
     const outside = (e) => { if (list.current && !list.current.contains(e.target) && btn.current && !btn.current.contains(e.target)) setOpen(false); };
     document.addEventListener("pointerdown", outside, true);
     return () => document.removeEventListener("pointerdown", outside, true);
   }, [open]);
   function onKey(e) {
-    const all = [...list.current.querySelectorAll("[role=menuitem]:not([disabled])")];
+    const all = [...list.current.querySelectorAll("[role=menuitem]:not([disabled]), [role=menuitemradio]:not([disabled]), [role=menuitemcheckbox]:not([disabled])")];
     const i = all.indexOf(document.activeElement);
     if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); btn.current && btn.current.focus(); }
     else if (e.key === "ArrowDown") { e.preventDefault(); (all[(i + 1) % all.length] || all[0])?.focus(); }
@@ -29,11 +33,20 @@ export function Menu({ items, label, icon = "more", cls = "" }) {
   }
   function choose(item) { setOpen(false); btn.current && btn.current.focus(); item.onSelect(); }
   return html`<div class=${`menu ${cls}`}>
-    <button ref=${btn} type="button" class="icon-btn" aria-haspopup="menu" aria-expanded=${open ? "true" : "false"}
+    <button ref=${btn} type="button" class=${`icon-btn${active ? " active" : ""}`} aria-haspopup="menu" aria-expanded=${open ? "true" : "false"}
       aria-label=${label || t("app.more")} title=${label || t("app.more")} onClick=${() => setOpen(!open)}><${Icon} name=${icon} /></button>
     ${open ? html`<div data-trust="menu" ref=${list} class="menu-list" role="menu" aria-label=${label || t("app.more")} onKeyDown=${onKey}>
-      ${shown.map(item => html`<button key=${item.key} type="button" role="menuitem" class=${`menu-item${item.danger ? " danger" : ""}`}
-        disabled=${!!item.disabled} onClick=${() => choose(item)}>${item.icon ? html`<${Icon} name=${item.icon} size=${16} />` : null}<span>${item.label}</span></button>`)}
+      ${shown.map(item => item.heading
+        ? html`<div key=${item.key} class="menu-heading" role="presentation">${item.label}</div>`
+        : item.checkbox
+          ? html`<button key=${item.key} type="button" role="menuitemcheckbox" aria-checked=${item.checked ? "true" : "false"} class="menu-item menu-radio"
+            disabled=${!!item.disabled} onClick=${() => item.onSelect()}><span class="menu-tick" aria-hidden="true">${item.checked ? html`<${Icon} name="check" size=${16} />` : null}</span><span>${item.label}</span></button>`
+        : item.checked !== undefined
+          // #2196: one of a group of choices (Page colours): a radio item, the chosen one ticked.
+          ? html`<button key=${item.key} type="button" role="menuitemradio" aria-checked=${item.checked ? "true" : "false"} class="menu-item menu-radio"
+            disabled=${!!item.disabled} onClick=${() => choose(item)}><span class="menu-tick" aria-hidden="true">${item.checked ? html`<${Icon} name="check" size=${16} />` : null}</span><span>${item.label}</span></button>`
+          : html`<button key=${item.key} type="button" role="menuitem" class=${`menu-item${item.danger ? " danger" : ""}`}
+            disabled=${!!item.disabled} onClick=${() => choose(item)}>${item.icon ? html`<${Icon} name=${item.icon} size=${16} />` : null}<span>${item.label}</span></button>`)}
     </div>` : null}
   </div>`;
 }

package/dist/ui/shared/ui-toast.js

@@ -1,5 +1,6 @@
-// Toasts: one stack in a corner (under the header on a phone), each gone after a few seconds. Text only.
-import { html, useEffect, useState } from "./app-html.js";
+// Toasts: one stack in a corner (under the header on a phone; above the tabs on the task board), each gone after a few
+// seconds. Text only. A manual popover, so it stands in the top layer above an open dialog (#2299).
+import { html, useEffect, useRef, useState } from "./app-html.js";
 import { createStore } from "./app-store.js";
 
 const toasts = createStore([]);
@@ -14,5 +15,17 @@ export function toast(text, ok = true) {
 export function Toasts() {
   const [list, setList] = useState(toasts.get());
   useEffect(() => toasts.subscribe(setList), []);
-  return html`<div data-trust="toast" class="toasts" role="status" aria-live="polite">${list.map(x => html`<div key=${x.id} class=${`toast ${x.ok ? "ok" : "err"}`}>${x.text}</div>`)}</div>`;
+  // #2299: a manual popover — in the top layer, so an open modal dialog's backdrop does not dim a toast (it did: grey on
+  // grey in the dark theme). Shown again on every new toast, so it is above a dialog opened since. Without popover
+  // support it stays an ordinary fixed box, as before.
+  const box = useRef(null);
+  useEffect(() => {
+    const el = box.current;
+    if (!el || typeof el.showPopover !== "function") return;
+    try {
+      if (el.matches(":popover-open")) el.hidePopover();
+      if (list.length) el.showPopover();
+    } catch { /* a popover that cannot be shown stays where it is */ }
+  }, [list]);
+  return html`<div ref=${box} popover="manual" data-trust="toast" class="toasts" role="status" aria-live="polite">${list.map(x => html`<div key=${x.id} class=${`toast ${x.ok ? "ok" : "err"}`}>${x.text}</div>`)}</div>`;
 }