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

package/dist/ui/shared/app-themes.js

@@ -1,9 +1,12 @@
 // #1629 (first design §5, r2 (b)(d)): agents' web themes on the page. Each applies to THAT agent's own chat surface
-// (and its avatar ring) only — never the shell, the sidebar chrome or another instance. What the host sends is
+// (and its avatar ring) — and, #2196, when the agent (theme.page.on) or a person (theme.pageByInstance) says so, its
+// colours on the whole page while that agent's Chat, View, Log or Details is open: colour tokens only, on the shell
+// (applyPageTheme); AgEnD's status colours, fonts, pictures and layout stay the page's own. What the host sends is
 // canonical already; this checks it again (a value that fails is dropped, never passed on) and applies it through the
 // CSSOM (custom properties) and fixed class tokens. No style attribute, no CSS text, no url() built in CSS.
 // Not shown: with "Show agents' themes, effects and widgets" off (fx.show, synced), and in safe mode (?safe=1).
 import { appStore, createStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import { safeMode } from "./owner-css.js";
 import { t } from "./app-i18n.js";
@@ -86,9 +89,110 @@ export function themeFor(name) {
     out.background = { image: bg.image, fit: bg.fit, opacity: bg.opacity };
   }
   if (labelOk(t.workingLabel)) out.workingLabel = t.workingLabel;
+  if (t.page && typeof t.page === "object") {
+    const sb = {};
+    if (t.page.sidebar && typeof t.page.sidebar === "object") for (const m of ["light", "dark"]) if (typeof t.page.sidebar[m] === "string" && COLOR.test(t.page.sidebar[m])) sb[m] = t.page.sidebar[m];
+    out.page = { on: t.page.on === true, sidebar: sb };
+  }
   return out;
 }
 
+// ── #2196: an agent's colours on the whole page ──
+
+/** The token defaults (tokens.css; web-theme.ts THEME_DEFAULTS, pinned by a test) a theme's palette goes over. */
+const PAGE_DEFAULTS = {
+  dark: { bg: "#212121", surface: "#2f2f2f", text: "#ececec", text2: "#b4b4b4", accent: "#7ab7ff" },
+  light: { bg: "#ffffff", surface: "#f4f4f4", text: "#0d0d0d", text2: "#5d5d5d", accent: "#0a62c2" },
+};
+/** AgEnD's status colours (tokens.css; web-theme.ts STATUS_COLORS, pinned by a test): never themed, always readable. */
+export const STATUS_COLORS = {
+  dark: { ok: "#4cc38a", warn: "#e3b341", danger: "#ff8a80", dangerFill: "#c9372c", focus: "#7ab7ff" },
+  light: { ok: "#1a7f37", warn: "#8a5a00", danger: "#c4222b", dangerFill: "#c4222b", focus: "#0a62c2" },
+};
+const PAGE_PROPS = { bg: "--bg", sidebar: "--bg-sidebar", surface: "--surface", text: "--text", text2: "--text-2", accent: "--accent" };
+const DERIVED_PROPS = ["--text-3", "--surface-2", "--border", "--border-strong", "--accent-dim", "--on-accent"];
+function lum(hex) {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
+const mix = (a, b, f) => `#${[1, 3, 5].map((i) => Math.round(parseInt(a.slice(i, i + 2), 16) * (1 - f) + parseInt(b.slice(i, i + 2), 16) * f).toString(16).padStart(2, "0")).join("")}`;
+
+/** The instance a page is about — Chat, View, Log or Details of it (app-shell.js openInstanceOf) — or null. */
+function openOf(route) {
+  return route && ["chat", "view", "log", "details"].includes(route.panel) && typeof route.instance === "string" ? route.instance : null;
+}
+/** A person's choice for `name`: "page" (the whole page), "chat" (only its chat) or null (the agent's own). */
+export function pageChoice(name) {
+  const f = prefInForce("theme.pageByInstance");
+  const m = f && f.value;
+  return m && typeof m === "object" && own(m, name) && (m[name] === "page" || m[name] === "chat") ? m[name] : null;
+}
+/** Set it ("agent" clears it), kept with the host's preferences like the identity colour a person picks. */
+export function setPageChoice(name, choice) {
+  const f = prefInForce("theme.pageByInstance");
+  const cur = f && f.value && typeof f.value === "object" ? f.value : {};
+  const keep = Object.keys(cur).filter((k) => own(cur, k) && k !== name && (cur[k] === "page" || cur[k] === "chat")).map((k) => [k, cur[k]]);
+  if (choice === "page" || choice === "chat") keep.push([name, choice]);
+  savePref("theme.pageByInstance", keep.length ? Object.fromEntries(keep) : null);
+  // In force on this page at once: what draws a theme follows this store (another device's change: onPrefsChanged).
+  themesStore.set({ pageRev: (themesStore.get().pageRev || 0) + 1 });
+}
+/** `name`'s theme when its colours go on the whole page (the person's choice, else the agent's), else null. */
+export function pageThemeFor(name) {
+  if (!name) return null;
+  const theme = themeFor(name);
+  if (!theme) return null;
+  const choice = pageChoice(name);
+  return choice === "page" || (choice !== "chat" && theme.page && theme.page.on) ? theme : null;
+}
+/** The page's colours for `mode`: the theme's palette over the defaults, and its sidebar (else its background). */
+export function pagePalette(theme, mode) {
+  const p = { ...PAGE_DEFAULTS[mode], ...(theme.accent ? { accent: theme.accent } : {}), ...((theme.colors && theme.colors[mode]) || {}) };
+  const out = {};
+  for (const k of Object.keys(PAGE_DEFAULTS[mode])) out[k] = p[k];
+  out.sidebar = (theme.page && theme.page.sidebar && theme.page.sidebar[mode]) || out.bg;
+  return out;
+}
+/**
+ * Whether a page palette reads (web-theme.ts's checks, again here: a person may put an agent's colours on the page
+ * though the agent never asked): text and secondary text 4.5:1 and the accent 3:1 on the background, surface and
+ * sidebar; every status colour 3:1 on the sidebar and the background.
+ */
+export function pageReadable(p, mode) {
+  if (!p || !Object.values(p).every((c) => typeof c === "string" && COLOR.test(c))) return false;
+  for (const bg of [p.bg, p.surface, p.sidebar]) {
+    if (ratio(p.text, bg) < 4.5 - 1e-9 || ratio(p.text2, bg) < 4.5 - 1e-9) return false;
+  }
+  if (ratio(p.accent, p.bg) < 3 - 1e-9 || ratio(p.accent, p.sidebar) < 3 - 1e-9) return false;
+  return Object.values(STATUS_COLORS[mode]).every((c) => ratio(c, p.sidebar) >= 3 - 1e-9 && ratio(c, p.bg) >= 3 - 1e-9);
+}
+/** The page colours in force now for `mode` (the instance the route is about), or null: the page's own. */
+export function pageNow(mode, route = navStore.get().route) {
+  const theme = pageThemeFor(openOf(route));
+  const p = theme && pagePalette(theme, mode);
+  return p && pageReadable(p, mode) ? p : null;
+}
+/**
+ * Draw page colours `p` (pageNow) on the shell `el`, or clear them (null): the palette's tokens and the few derived
+ * from it (borders, raised rows, the accent's tint and the colour on it), through the CSSOM; class th-page.
+ */
+export function applyPageTheme(el, p, mode) {
+  if (!el || !el.style) return;
+  for (const prop of [...Object.values(PAGE_PROPS), ...DERIVED_PROPS]) el.style.removeProperty(prop);
+  el.classList.remove("th-page");
+  if (!p) return;
+  for (const [k, prop] of Object.entries(PAGE_PROPS)) el.style.setProperty(prop, p[k]);
+  el.style.setProperty("--text-3", p.text2);
+  el.style.setProperty("--surface-2", mix(p.surface, p.text, 0.08));
+  el.style.setProperty("--border", mix(p.bg, p.text, 0.14));
+  el.style.setProperty("--border-strong", mix(p.bg, p.text, 0.45));
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(p.accent.slice(i, i + 2), 16));
+  el.style.setProperty("--accent-dim", `rgba(${r}, ${g}, ${b}, ${mode === "dark" ? 0.14 : 0.08})`);
+  el.style.setProperty("--on-accent", ratio("#ffffff", p.accent) >= ratio("#0d0d0d", p.accent) ? "#ffffff" : "#0d0d0d");
+  el.classList.add("th-page");
+}
+
 export function isThemeLocked(name) { return (themesStore.get().locked || []).includes(name); }
 
 const TOKENS = ["th", "th-font-inter", "th-font-system", "th-font-mono", "th-bubble-none", "th-bubble-thin", "th-bubble-accent", "th-agent-bubble"];
@@ -193,7 +297,18 @@ export function themeMenuItems(name) {
   const locked = isThemeLocked(name);
   const w = themesStore.get().widgets;
   const placed = w && own(w, name) && w[name] && typeof w[name] === "object" ? w[name] : {};
+  // #2196: where this agent's colours go — its own choice, the whole page, or only its chat (the person's wins).
+  const choice = pageChoice(name), theme = themeFor(name), mode = resolvedMode();
+  const agentsOwn = theme && theme.page && theme.page.on ? "chat.pageAgentOn" : "chat.pageAgentOff";
+  const readable = !!theme && pageReadable(pagePalette(theme, mode), mode);
+  const page = theme ? [
+    { key: "page-heading", heading: true, label: t("chat.pageColours") },
+    { key: "page-agent", checked: choice === null, label: t(agentsOwn), onSelect: () => setPageChoice(name, "agent") },
+    { key: "page-page", checked: choice === "page", label: t("chat.pageWhole"), disabled: !readable && choice !== "page", onSelect: () => setPageChoice(name, "page") },
+    { key: "page-chat", checked: choice === "chat", label: t("chat.pageChatOnly"), onSelect: () => setPageChoice(name, "chat") },
+  ] : [];
   return [
+    ...page,
     ...["chat_header", "details"].filter((slot) => own(placed, slot)).map((slot) => ({
       key: `widget-remove-${slot}`, label: t(slot === "chat_header" ? "chat.widgetRemoveHeader" : "chat.widgetRemoveDetails"), icon: "trash",
       onSelect: () => removeWidget(name, slot),

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,16 @@ 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 card's own controls (the chat's Hide card, Hide picture and bio): small and round. On the banner they sit on its
+   corners over a dark disc, so they read on any picture; on the row, Hide picture and bio takes the row's bottom-right. */
+.id-ctl { flex-shrink: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); cursor: pointer; }
+.id-ctl:hover { color: var(--text); border-color: var(--border-strong); }
+.id-row .id-ctl { margin-left: auto; border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
+.id-row .id-fold { align-self: flex-end; }
+.id-banner-box .id-ctl { position: absolute; z-index: 1; right: var(--s-2); border-color: rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .5); color: #fff; }
+.id-banner-box .id-ctl:hover { background: rgba(0, 0, 0, .7); color: #fff; }
+.id-banner-box .id-hide { top: var(--s-2); }
+.id-banner-box .id-unfold { bottom: var(--s-2); }
 /* 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). */
@@ -1595,6 +1638,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .id-card.card-c.bs-l { --id-bmin: 96px; --id-bmax: 130px; }
   .id-row { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); }
   .card-size { flex-basis: 100%; justify-content: flex-end; }
+  .id-ctl { width: 32px; height: 32px; }
   .id-card.card-c .id-tagline, .id-card.card-c .id-bio { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
   .id-card.card-c .id-tagline { -webkit-line-clamp: 2; line-clamp: 2; }
   .id-card.card-c .id-bio { -webkit-line-clamp: 3; line-clamp: 3; }

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

@@ -13,6 +13,8 @@ register("card", {
     byAgent: "set by the agent",
     show: "Show card",
     hide: "Hide card",
+    showRow: "Show picture and bio",
+    hideRow: "Hide picture and bio",
     bannerSafe: "Every screen",
     bannerPhone: "Phone · M card",
   },
@@ -26,6 +28,8 @@ register("card", {
     byAgent: "由 agent 設定",
     show: "顯示卡片",
     hide: "隱藏卡片",
+    showRow: "顯示小圖與介紹",
+    hideRow: "隱藏小圖與介紹",
     bannerSafe: "所有螢幕",
     bannerPhone: "手機 · 中卡片",
   },

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

@@ -11,6 +11,7 @@ import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { createStore, useStore } from "./app-store.js";
 import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
+import { Icon } from "./ui-icons.js";
 import "./card-strings.js";
 
 export const CARD_SIZES = ["s", "m", "l"];
@@ -160,12 +161,22 @@ function SizeControl({ name, size }) {
   </div>`;
 }
 
+/** A small round control on the card (the chat's Hide card and Hide picture and bio). */
+function CardControl({ cls, icon, label, onClick, expanded }) {
+  return html`<button type="button" class=${`id-ctl ${cls}`} aria-label=${label} title=${label}
+    aria-expanded=${expanded === undefined ? undefined : expanded ? "true" : "false"} onClick=${onClick}><${Icon} name=${icon} size=${16} /></button>`;
+}
+
 /**
  * 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: the chat's controls, on the card itself (the user, 2026-10-19): `onHide` — Hide card, on the banner's top-right corner
+ * (on the row when there is no banner); `onToggleRow` — hide the picture, tagline and bio and keep the banner, from the
+ * row's bottom-right corner, and back from the banner's bottom-right while they are hidden (`rowHidden`). Only a card
+ * with a banner and something on its row can fold its row (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, onHide = null, rowHidden = false, onToggleRow = null }) {
   useStore(cardSizeStore);
   const [broken, setBroken] = useState({});
   if (!card) return null;
@@ -179,16 +190,23 @@ export function IdentityCard({ name, card, compact = false, sizeControl = !compa
   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)}>
-    ${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))}
+  const portrait = pic("portrait", "id-portrait", t("card.portraitAlt", name));
+  const foldable = !!(onToggleRow && banner && (portrait || card.tagline || card.bio));
+  const rowShown = !(foldable && rowHidden);
+  const hide = onHide ? html`<${CardControl} cls="id-hide" icon="eyeOff" label=${t("card.hide")} onClick=${onHide} />` : null;
+  const fold = foldable ? html`<${CardControl} cls=${rowShown ? "id-fold" : "id-fold id-unfold"} icon=${rowShown ? "up" : "user"}
+    label=${t(rowShown ? "card.hideRow" : "card.showRow")} expanded=${rowShown} onClick=${onToggleRow} />` : null;
+  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}${hide}${rowShown ? null : fold}</div>` : null}
+    ${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>
+      ${banner ? null : hide}${fold}
+    </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,8 @@ 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"/>`,
+  eyeOff: () => html`<path d="M3 3l18 18M10.6 5.1A10.9 10.9 0 0 1 12 5c7 0 11 7 11 7a18.6 18.6 0 0 1-3.2 4.2M6.6 6.6C3.5 8.6 1 12 1 12s4 7 11 7a10.6 10.6 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2"/>`,
+  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

@@ -18,7 +18,7 @@ export function Menu({ items, label, icon = "more", cls = "" }) {
     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])")];
     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(); }
@@ -32,8 +32,14 @@ export function Menu({ items, label, icon = "more", cls = "" }) {
     <button ref=${btn} type="button" class="icon-btn" 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.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.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";
@@ -1021,6 +1022,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 +1033,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") {