@songsid/agend 2.3.0-beta.12 → 2.3.0-beta.14

package/dist/ui/shared/app.css

@@ -350,6 +350,10 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--surface-2); outline: none; }
 .menu-item.danger { color: var(--danger); }
 .menu-item:disabled { opacity: 0.45; }
+/* #2196: a group's heading in a menu (Page colours) and its radio items (the chosen one ticked). */
+.menu-heading { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); border-top: 1px solid var(--border); margin-top: var(--s-1); }
+.menu-heading:first-child { border-top: 0; margin-top: 0; }
+.menu-radio .menu-tick { width: 16px; display: inline-flex; color: var(--accent); }
 
 /* ── Dialog: centred on a desktop, a bottom sheet on a phone ── */
 .dlg { border: 0; padding: 0; border-radius: var(--r-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-2); width: min(480px, calc(100vw - 32px)); max-height: 85vh; }
@@ -560,6 +564,14 @@ html.lb-open .scroller { overflow: hidden; }
 .chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
 /* #1629: an agent's theme on its own chat surface — custom properties set on .p-chat through the CSSOM, choices as
    these tokens. The surface paints its own background (the page's body is not its). */
+/*
+ * #2196: an agent's colours on the whole page (app-themes.js applyPageTheme, on .shell): the shell paints its own
+ * background then, under the sidebar, the header, the usage rail and a phone's tabs. The header follows the page, not
+ * the chat: it takes the shell's colours back (--chrome-*: resolved on .shell, so the page's theme or the page's own).
+ */
+.shell.th-page { background: var(--bg); color: var(--text); }
+.shell { --chrome-bg: var(--bg); --chrome-surface: var(--surface); --chrome-text: var(--text); --chrome-text-2: var(--text-2); --chrome-accent: var(--accent); }
+.p-chat > .panel-head { --bg: var(--chrome-bg); --surface: var(--chrome-surface); --text: var(--chrome-text); --text-2: var(--chrome-text-2); --accent: var(--chrome-accent); background: var(--bg); color: var(--text); }
 .p-chat.th { background: var(--bg); color: var(--text); }
 .p-chat.th .msg.user .body { border-radius: var(--bubble-radius, var(--r-xl)); }
 .p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif, var(--font-emoji); }
@@ -684,7 +696,30 @@ img.amb-p { object-fit: contain; }
 /* A narrow phone: Stop reply beside Send leaves the message box no room — the label is for screen readers there. */
 @media (max-width: 479px) { .btn-stop .stop-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
 .btn-stop { background: var(--bg); }
-.hint { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
+.hint { font-size: var(--fs-xs); color: var(--text-3); }
+/* #2215 (the user's request, 2026-10-19): one row under the composer, at the bottom left — this browser's web authority, then
+   the key hint. Its height is kept even before the authority is read (#2184: switching chats never moves the composer). */
+.composer-row { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 20px; margin-top: calc(-1 * var(--s-1));
+  font-size: var(--fs-xs); line-height: 1.4; color: var(--text-3); white-space: nowrap; }
+.composer-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.composer-row > .hint { flex-shrink: 1000; }
+.composer-row > :not(.hint) + .hint::before { content: "·"; margin-right: var(--s-2); }
+/* A guest's note and the public link's sentence are kept whole: on a narrow screen they wrap rather than lose words. */
+.composer-row .guest-note, .composer-row .webauth-row[data-state="public"] { margin: 0; text-align: left; white-space: normal; flex-shrink: 1; }
+.webauth-row { display: inline-flex; align-items: center; gap: var(--s-1); }
+.webauth-row .webauth-ok, .webauth-row .webauth-ask { font: inherit; padding: 0 2px; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
+.webauth-row .webauth-ok { color: var(--ok); }
+.webauth-row .webauth-ask { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.webauth-row .webauth-ok:focus-visible, .webauth-row .webauth-ask:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+/* What pressing Authorize answered is said in the row, in the hint's place: nothing is laid over the composer. */
+.webauth-row .webauth-notice { white-space: normal; color: var(--text-2); }
+.webauth-row .webauth-notice::before { content: "·"; margin-right: var(--s-2); color: var(--text-3); }
+.composer-row:has(.webauth-notice) > .hint { display: none; }
+/* When "✓ Verified" ends, on a tap (touch has no hover): a bubble above the row while it has focus. */
+.webauth-tip { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; max-width: min(420px, calc(100vw - 32px)); white-space: normal;
+  padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
+  box-shadow: var(--shadow-2); }
+.webauth-tip[hidden] { display: none; }
 /* #1920 phase 3: Settings → Web → Guests. */
 .s-guests .guest-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px var(--s-3); max-height: 220px; overflow: auto;
   padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
@@ -1581,8 +1616,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .side-widget { padding: 0 var(--s-3) var(--s-2); }
 .aw-sidebar { max-height: 240px; overflow: auto; }
 
-.chat-card-toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 32px; padding: 0 var(--s-4); border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; }
-.chat-card-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
+/* The chat header's card menu button (the user, 2026-10-20: no control on the card): pressed-looking while the card shows. */
+.chat-card-menu > .icon-btn.active { background: var(--accent-dim); color: var(--accent); }
 /* A phone: the portrait stays on the text's row, smaller (the user's ask: never a portrait alone on a line with the text
    under it); the S / M / L control takes the line below. The chat header's card is trimmed further: a smaller portrait
    and banner, and its tagline and bio cut to a few lines (Details and View show them whole). */

package/dist/ui/shared/card-strings.js

@@ -11,8 +11,10 @@ register("card", {
     sizeSName: "Small", sizeMName: "Medium", sizeLName: "Large",
     byHuman: "set by a person",
     byAgent: "set by the agent",
+    menu: "Identity card",
     show: "Show card",
     hide: "Hide card",
+    showRow: "Show picture and bio",
     bannerSafe: "Every screen",
     bannerPhone: "Phone · M card",
   },
@@ -24,8 +26,10 @@ register("card", {
     sizeSName: "小", sizeMName: "中", sizeLName: "大",
     byHuman: "由人設定",
     byAgent: "由 agent 設定",
+    menu: "身分卡",
     show: "顯示卡片",
     hide: "隱藏卡片",
+    showRow: "顯示小圖和介紹",
     bannerSafe: "所有螢幕",
     bannerPhone: "手機 · 中卡片",
   },

package/dist/ui/shared/identity-card.js

@@ -160,35 +160,53 @@ function SizeControl({ name, size }) {
   </div>`;
 }
 
+/**
+ * #2217 hotfix (Prism): pictures that failed to load on this page, by src — shared, so the chat's card menu judges a card
+ * as drawn (a broken banner is not drawn, and then the card cannot fold), not by its metadata alone.
+ */
+export const brokenPictures = createStore({});
+const markBroken = (src) => { if (src && !brokenPictures.get()[src]) brokenPictures.set((s) => ({ ...s, [src]: true })); };
+const drawn = (card, slot) => !!(card && card[slot] && !brokenPictures.get()[card[slot].src]);
+/**
+ * #2217: whether a card can fold its row away and keep the banner — a banner drawn, and something on its row (a picture
+ * drawn, a tagline or a bio). The chat's card menu enables Show picture and bio only then.
+ */
+export const cardFoldable = (card) => !!(card && drawn(card, "banner") && (drawn(card, "portrait") || card.tagline || card.bio));
+
 /**
  * The card. `compact`: the chat header's own small size (no size control; the banner still follows the size choice,
  * #2038). Nothing when the card is empty. The
  * tagline and bio say whose they are (title), since a person's field wins over the agent's.
+ * #2217: `rowHidden` — the chat's picture and bio folded away, the banner kept. The user (2026-10-20): no control on the
+ * card at all — the chat header's two buttons show / hide the card and fold / unfold its row. Only a card with a banner
+ * and something on its row folds (cardFoldable; else it would be the card hidden).
  */
-export function IdentityCard({ name, card, compact = false, sizeControl = !compact }) {
+export function IdentityCard({ name, card, compact = false, sizeControl = !compact, rowHidden = false }) {
   useStore(cardSizeStore);
-  const [broken, setBroken] = useState({});
+  const broken = useStore(brokenPictures);
   if (!card) return null;
   const size = compact ? "c" : cardSizeFor(name);
   // #2038: the chat header's card is its own small size, but its banner follows the person's size choice too.
   const bannerSize = compact ? ` bs-${cardSizeFor(name)}` : "";
   const whose = (f) => t(f.by === "human" ? "card.byHuman" : "card.byAgent");
-  const pic = (slot, cls, alt) => card[slot] && broken[slot] !== card[slot].src
-    ? html`<img class=${cls} src=${card[slot].src} alt=${alt} title=${whose(card[slot])} decoding="async" onError=${() => setBroken({ ...broken, [slot]: card[slot].src })} />` : null;
+  const pic = (slot, cls, alt) => card[slot] && !broken[card[slot].src]
+    ? html`<img class=${cls} src=${card[slot].src} alt=${alt} title=${whose(card[slot])} decoding="async" onError=${() => markBroken(card[slot].src)} />` : null;
   // #2086: the banner at its focus; on a screen wider than BANNER_MAX_ASPECT it is centred over a blurred copy of itself.
   const focus = card.banner_focus ? card.banner_focus.value : 50;
   const atFocus = (el) => { if (el && el.style) el.style.setProperty("--id-focus", `${focus}%`); };
   const banner = pic("banner", "id-banner", "");
-  return html`<section class=${`id-card card-${size}${bannerSize}`} aria-label=${t("card.label", name)}>
+  const portrait = pic("portrait", "id-portrait", t("card.portraitAlt", name));
+  const rowShown = !(rowHidden && banner && cardFoldable(card));
+  return html`<section class=${`id-card card-${size}${bannerSize}${rowShown ? "" : " row-hidden"}`} aria-label=${t("card.label", name)}>
     ${banner ? html`<div class="id-banner-box" ref=${atFocus}><img class="id-banner-fill" src=${card.banner.src} alt="" aria-hidden="true" decoding="async" />${banner}</div>` : null}
-    <div class="id-row">
-      ${pic("portrait", "id-portrait", t("card.portraitAlt", name))}
+    ${rowShown ? html`<div class="id-row">
+      ${portrait}
       <div class="id-text">
         ${card.tagline ? html`<p class="id-tagline" title=${whose(card.tagline)}>${card.tagline.text}</p>` : null}
         ${card.bio ? html`<p class="id-bio" title=${whose(card.bio)}>${card.bio.text}</p>` : null}
       </div>
       ${sizeControl ? html`<${SizeControl} name=${name} size=${size} />` : null}
-    </div>
+    </div>` : null}
   </section>`;
 }
 

package/dist/ui/shared/identity-color.js

@@ -9,7 +9,7 @@ import { html, useEffect, useState } from "./app-html.js";
 import { createStore, useStore } from "./app-store.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { register, t } from "./app-i18n.js";
-import { themesShown, themesStore } from "./app-themes.js";
+import { pageNow, themesShown, themesStore } from "./app-themes.js";
 import { Dialog } from "./ui-dialog.js";
 import { toast } from "./ui-toast.js";
 
@@ -63,16 +63,20 @@ export function contrast(a, b) {
   const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
   return (l1 + 0.05) / (l2 + 0.05);
 }
-/** The shade of `hex` name text uses: itself if readable, else the nearest step toward black (light) or white (dark). */
-export function readableShade(hex, mode) {
-  if (!HEX.test(hex)) return TEXT[mode];
+/**
+ * The shade of `hex` name text uses: itself if readable, else the nearest step toward black (light) or white (dark).
+ * `page` (#2196): an agent's colours on the page now — names must read on its background and sidebar instead.
+ */
+export function readableShade(hex, mode, page = null) {
+  const backgrounds = page ? [page.bg, page.sidebar] : BG[mode], text = page ? page.text : TEXT[mode];
+  if (!HEX.test(hex)) return text;
   const toward = mode === "light" ? 0 : 255;
   const ch = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
   for (let step = 0; step <= 20; step++) {
     const shade = `#${ch.map((c) => Math.round(c + (toward - c) * (step / 20)).toString(16).padStart(2, "0")).join("")}`;
-    if (BG[mode].every((bg) => contrast(shade, bg) >= 4.5)) return shade;
+    if (backgrounds.every((bg) => contrast(shade, bg) >= 4.5)) return shade;
   }
-  return TEXT[mode];
+  return text;
 }
 
 // ── Resolution ──
@@ -135,7 +139,7 @@ export function identityOf(it, opts = {}) {
   const light = colorValue(c.color, "light"), dark = colorValue(c.color, "dark");
   return {
     color: c.color, source: c.source, show: p.show, showSource: p.source, off: opts.off ?? colorsOff(),
-    light, dark, nameLight: readableShade(light, "light"), nameDark: readableShade(dark, "dark"),
+    light, dark, nameLight: readableShade(light, "light", pageNow("light")), nameDark: readableShade(dark, "dark", pageNow("dark")),
   };
 }
 /** The row's classes for its identity colour ("" when colours are off or shown nowhere). */

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

@@ -40,6 +40,7 @@ const P = {
   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/web-authorize.js

@@ -27,6 +27,10 @@ register("webauth", {
     refusal_dm_unavailable: "Couldn't send you a DM. Open your DMs with the bot, then try again.",
     refusal_other: "That didn't work: {0}",
     settings: "Settings",
+    verifiedShort: "Verified",
+    authorizeShort: "Authorize",
+    authorizeWhy: "Not verified: authorize this browser to speak as you",
+    waitingShort: "Waiting for your Confirm ({0})",
   },
   "zh-TW": {
     verified: "已驗證 · 以你的身分發言到 {0}",
@@ -49,6 +53,10 @@ register("webauth", {
     refusal_dm_unavailable: "無法私訊給你。請開放與 bot 的私訊後再試一次。",
     refusal_other: "沒有成功：{0}",
     settings: "設定",
+    verifiedShort: "已驗證",
+    authorizeShort: "授權",
+    authorizeWhy: "未驗證：授權這個瀏覽器以你的身分發言",
+    waitingShort: "等待確認（{0}）",
   },
 });
 const tn = (k, ...v) => t(`webauth.${k}`, ...v);
@@ -139,6 +147,45 @@ export function AuthorizeChip() {
   return html`<div class="webauth-chip" data-state=${a.st.state}>${body(a)}${a.notice ? html` <span class="note" role="status">${a.notice}</span>` : null}</div>`;
 }
 
+/**
+ * The composer's row (#2215, the user's request, 2026-10-19): the same states as AuthorizeChip, each kept to a few words so
+ * they share one row with the key hint. What a state would have said at length is in its tooltip and its accessible
+ * name: when "Verified" ends, why it can't be authorized, the countdown's ask. A tap on "✓ Verified" shows when it
+ * ends (touch has no hover) in a bubble above the row, until the next tap, a tap elsewhere or Escape. What pressing
+ * Authorize answered (sent, refused) is said in the row itself, in the hint's place (#2216 review: a bubble left over the
+ * composer covered Attach and what was being typed, with nothing to close it).
+ */
+export function ComposerAuth() {
+  const a = useWebAuthorization();
+  const [open, setOpen] = useState(false);
+  const tip = useRef("wa-tip-" + Math.random().toString(36).slice(2, 8));
+  useEffect(() => { setOpen(false); }, [a.st && a.st.state]);              // a new state closes the bubble
+  if (guestPage()) return null;
+  if (publicLink()) return html`<span class="webauth-row note" data-state="public" title=${tn("publicLink")}>${tn("publicLink")}</span>`;
+  if (!a.st) return null;
+  const st = a.st, id = tip.current;
+  const said = a.notice ? html`<span class="webauth-notice" role="status">${a.notice}</span>` : null;
+  if (st.state === "verified") {
+    const until = tn("verified", clock(st.until));
+    return html`<span class="webauth-row" data-state="verified">
+      <button type="button" class="webauth-ok" title=${until} aria-label=${`✓ ${until}`} aria-expanded=${open ? "true" : "false"}
+        aria-controls=${id} onClick=${() => setOpen((v) => !v)} onBlur=${() => setOpen(false)}
+        onKeyDown=${(e) => { if (e.key === "Escape" && open) { e.stopPropagation(); setOpen(false); } }}>✓ ${tn("verifiedShort")}</button><span
+        id=${id} class="webauth-tip" role="tooltip" hidden=${!open}>${until}</span>${said}</span>`;
+  }
+  if (st.state === "pending") {
+    const asks = tn("waiting", mmss(a.left));
+    return html`<span class="webauth-row" data-state="pending"><span class="note" title=${a.notice ? `${asks} — ${a.notice}` : asks}>${tn("waitingShort", mmss(a.left))}</span>${said}</span>`;
+  }
+  if (st.reason === "not_authorized" || st.reason === "authorization_expired") {
+    return html`<span class="webauth-row" data-state="none"><span class="note" aria-hidden="true">${tn("notVerified")} ·</span><button type="button" class="webauth-ask"
+      title=${tn("authorizeWhy")} aria-label=${tn("authorizeWhy")} onClick=${a.ask}>${tn("authorizeShort")}</button>${said}</span>`;
+  }
+  const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
+  return html`<span class="webauth-row" data-state="none"><span class="note" title=${why}>${tn("notVerified")}<span class="sr-only">: ${why}</span></span>${st.reason === "disabled" || st.reason === "loopback_only"
+    ? html` · <a href="/settings/web" title=${why}>${tn("settings")}</a>` : null}</span>`;
+}
+
 function body(a) {
   const st = a.st;
   if (st.state === "verified") return html`<span class="webauth-ok">✓ ${tn("verified", clock(st.until))}</span>`;

package/dist/web-api.d.ts

@@ -371,9 +371,6 @@ export interface WebPerson {
     /** Their account's name at sign-in, made safe (bound only). */
     readonly platformName?: string;
 }
-/**
- * Handle a Web UI request. Returns true if handled, false to pass through.
- */
 export declare function handleWebRequest(req: IncomingMessage, res: ServerResponse, url: URL, ctx: WebApiContext): boolean;
 /**
  * #1723: a public-link page's preview: where it may frame from (`frameSrc` — the quick-tunnel wildcard while its own

package/dist/web-api.js

@@ -21,7 +21,8 @@ import { formatWebChannelEcho } from "./web-channel-echo.js";
 import { t } from "./locale.js";
 import { isSafeInstanceName } from "./web-shell-routes.js";
 import { MAX_COMMAND_ARGS } from "./web-commands.js";
-import { sendPanelHtml } from "./web-host-guard.js";
+import { ROUTE_WORKER_CSP, ROUTE_WORKER_PATH, sendPanelHtml } from "./web-host-guard.js";
+import { libavoidFile } from "./web-libavoid.js";
 import { shellRoute } from "./web-shell-routes.js";
 import { createReadStream, createWriteStream, readFileSync } from "node:fs";
 import { join, dirname } from "node:path";
@@ -968,9 +969,54 @@ function profileBody(p) {
 }
 /** #1823: an SSE frame with the server's clock (no id: it is not a message, and a reconnect gets a fresh one). */
 function sseClock() { return `event: clock\ndata: ${JSON.stringify({ now: Date.now() })}\n\n`; }
-/**
- * Handle a Web UI request. Returns true if handled, false to pass through.
- */
+const statusTicks = new WeakMap();
+function subscribeStatusTick(ctx, stream) {
+    let tick = statusTicks.get(ctx);
+    if (!tick)
+        statusTicks.set(ctx, tick = { streams: new Set(), timer: null });
+    const t = tick;
+    t.streams.add(stream);
+    t.timer ??= setInterval(() => statusTick(ctx, t), ctx.sseHeartbeatMs ?? SSE_HEARTBEAT_MS);
+    return () => {
+        t.streams.delete(stream);
+        if (!t.streams.size && t.timer) {
+            clearInterval(t.timer);
+            t.timer = null;
+        }
+    };
+}
+function statusTick(ctx, t) {
+    const live = [...t.streams].filter((s) => s.alive());
+    if (!live.length)
+        return;
+    let status, admin = null;
+    const guests = new Map();
+    try {
+        status = measureSyncWork("web.sseStatus", () => ctx.getUiStatus());
+    }
+    catch {
+        return;
+    } // nothing to send this tick; the next one tries again
+    const frameFor = (s) => {
+        if (!s.scope)
+            return admin ??= `event: status\ndata: ${JSON.stringify(status)}\n\n`;
+        const scope = s.scope(), key = [...scope].sort().join("\u0000");
+        let frame = guests.get(key);
+        if (frame === undefined)
+            guests.set(key, frame = `event: status\ndata: ${JSON.stringify(guestStatus(status, scope))}\n\n`);
+        return frame;
+    };
+    for (const s of live) {
+        let frame;
+        try {
+            frame = frameFor(s);
+        }
+        catch {
+            continue;
+        }
+        s.write(frame);
+    }
+}
 export function handleWebRequest(req, res, url, ctx) {
     const path = url.pathname;
     const method = req.method ?? "GET";
@@ -1021,6 +1067,9 @@ export function handleWebRequest(req, res, url, ctx) {
         try {
             const js = readFileSync(join(__dirname, "ui", fileName), "utf-8");
             res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+            // #2182: the route worker's own, narrower-reaching policy (ROUTE_WORKER_CSP); every other file keeps the page's.
+            if (path === ROUTE_WORKER_PATH)
+                res.setHeader("Content-Security-Policy", ROUTE_WORKER_CSP);
             res.writeHead(200);
             res.end(js);
         }
@@ -1029,6 +1078,19 @@ export function handleWebRequest(req, res, url, ctx) {
         }
         return true;
     }
+    // #2182: libavoid (libavoid-js, LGPL-2.1-or-later) — the npm package's own two files, unmodified, at a versioned path.
+    const vendor = method === "GET" ? libavoidFile(path) : null;
+    if (vendor) {
+        try {
+            const body = readFileSync(vendor.file);
+            res.writeHead(200, { "Content-Type": vendor.type, "Cache-Control": "private, max-age=31536000, immutable" });
+            res.end(body);
+        }
+        catch {
+            json(res, 404, { error: "File not found" });
+        }
+        return true;
+    }
     // ── Backend detection ─────────────────────────────────
     // #2072: the model a Settings field offers — the cached catalog of that backend (that instance's account's). Read only.
     if (method === "GET" && path === "/ui/models") {
@@ -1171,13 +1233,17 @@ export function handleWebRequest(req, res, url, ctx) {
         if (!guest && ctx.needsYouItems)
             res.write(`event: needs\ndata: ${JSON.stringify({ items: ctx.needsYouItems() })}\n\n`);
         ctx.sseClients.add(res);
-        const interval = setInterval(() => {
+        // #1956: the heartbeat's status comes from the one build every open stream shares each tick (statusTick), with
+        // this stream's own projection; this stream's checks stay its own.
+        const unsubscribe = subscribeStatusTick(ctx, {
             // A stream authorized once must not outlive the authorization. Re-checked
             // without counting as activity, or an open tab would keep an idle session
             // alive forever; a revoked, expired or rotated-away session ends here.
             // #2049 review: a guest's stream also needs the exact session that opened it — another cookie on the same request
             // still authenticating does not keep a revoked device's stream (with its scope) alive.
-            if (!isWebRequestAuthorized(req, url, ctx.webToken, ctx.webSessions, { touch: false }) || (guest && !guest.current())) {
+            alive: () => {
+                if (isWebRequestAuthorized(req, url, ctx.webToken, ctx.webSessions, { touch: false }) && (!guest || guest.current()))
+                    return true;
                 // Close the connection too, not just the response: an ended response leaves the socket idle in
                 // keep-alive, still held open by whoever's session just ended.
                 const socket = req.socket;
@@ -1186,23 +1252,23 @@ export function handleWebRequest(req, res, url, ctx) {
                 }
                 catch { /* already closed */ }
                 cleanup();
-                return;
-            }
-            try {
-                // Every open dashboard tab, every 10 s: the status of every instance, serialized on the fleet's loop (#1235).
-                res.write(measureSyncWork("web.sseStatus", statusFrame) + sseClock());
+                return false;
+            },
+            scope: guest ? () => guest.scope() : null,
+            write: (frame) => { try {
+                res.write(frame + sseClock());
             }
             catch {
                 cleanup();
-            }
-        }, ctx.sseHeartbeatMs ?? SSE_HEARTBEAT_MS);
+            } },
+        });
         let cleanedUp = false;
         const cleanup = () => {
             if (cleanedUp)
                 return;
             cleanedUp = true;
             ctx.sseClients.delete(res);
-            clearInterval(interval);
+            unsubscribe();
         };
         // The *response's* `close` is the one that means the stream is over: it fires when the connection
         // goes away or the response is finished. The request's `close` means "the request has been read"