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

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

@@ -11,7 +11,6 @@ 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"];
@@ -161,43 +160,45 @@ 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>`;
-}
+/**
+ * #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: 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).
+ * #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, onHide = null, rowHidden = false, onToggleRow = null }) {
+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", "");
   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;
+  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}${hide}${rowShown ? null : fold}</div>` : null}
+    ${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}
     ${rowShown ? html`<div class="id-row">
       ${portrait}
       <div class="id-text">
@@ -205,7 +206,6 @@ export function IdentityCard({ name, card, compact = false, sizeControl = !compa
         ${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}
-      ${banner ? null : hide}${fold}
     </div>` : null}
   </section>`;
 }

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

@@ -40,7 +40,6 @@ 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"/>`,

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]), [role=menuitemradio]: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,14 @@ 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 => 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"

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

@@ -969,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";
@@ -1188,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;
@@ -1203,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"