@songsid/agend 2.3.0-beta.8 → 2.3.0

package/dist/ui/shared/feature-flags.js

@@ -0,0 +1,127 @@
+// Product feature policy only: this module imports no experimental runtime.
+import { appStore } from "./app-store.js";
+import { navStore } from "./app-nav.js";
+import { ownerEffectsChosen, onOwnerEffectsChanged } from "./app-prefs.js";
+import { register } from "./app-i18n.js";
+import { html, useEffect, useState } from "./app-html.js";
+register("cwControls", { en: { title: "Effects" }, "zh-TW": { title: "效果" } });
+export function canvasWorkerEnabled() { return appStore.get().canvasWorker === true; }
+export function onCanvasWorkerChange(fn) {
+  let value = canvasWorkerEnabled();
+  return appStore.subscribe(() => { const next = canvasWorkerEnabled(); if (next !== value) { value = next; fn(next); } });
+}
+export function useCanvasWorker() {
+  const [value, setValue] = useState(canvasWorkerEnabled);
+  useEffect(() => { setValue(canvasWorkerEnabled()); return onCanvasWorkerChange(setValue); }, []);
+  return value;
+}
+// Never evaluate the optional module before admission. An obsolete import may finish, but cannot mount.
+export function experimentalComponent(load, select) {
+  return function ExperimentalComponent(props) {
+    const enabled = useCanvasWorker(), [component, setComponent] = useState(null);
+    useEffect(() => {
+      let current = true;
+      if (enabled) load().then(module => { if (current && canvasWorkerEnabled()) setComponent(() => select(module)); }, () => {});
+      return () => { current = false; };
+    }, [enabled]);
+    return enabled && component ? html`<${component} ...${props} />` : null;
+  };
+}
+
+/** effect_chat_v of a chat with no placements: sha256(JSON.stringify([])), first 32 hex (fleet-manager's status row). */
+export const EMPTY_CHAT_EFFECTS = "4f53cda18c2baa0c0354bb5f9a3ecbe5";
+
+let mod = null, waking = null, chatStore = null, started = false, generation = 0, awakeGeneration = -1, retiring = Promise.resolve();
+const awakeListeners = new Set();
+
+/** Whether `name`'s chat has Canvas Worker placements (as the status rows say). */
+export function chatHasEffects(name, app = appStore.get()) {
+  const v = name ? app.instances?.find(i => i.name === name)?.effect_chat_v : undefined;
+  return canvasWorkerEnabled() && typeof v === "string" && /^[a-f0-9]{32}$/.test(v) && v !== EMPTY_CHAT_EFFECTS;
+}
+
+/** The running effects owner, or null while dormant (or when it could not start: as getAppEffects always was). */
+export function getAppEffects(host) { return canvasWorkerEnabled() && mod ? mod.getAppEffects(host) : null; }
+
+/** Whether the runtime has been asked to start on this page. */
+export function effectsAwake() { return waking !== null; }
+/** Whether its module has loaded (started, or found it could not: getAppEffects() then says which). */
+export function effectsLoaded() { return mod !== null && awakeGeneration === generation; }
+
+/** Follow every completed runtime episode, including a replacement after an experimental off/on. */
+export function onEffectsAwake(fn) {
+  if (typeof fn !== "function") return () => {};
+  awakeListeners.add(fn);
+  if (effectsLoaded()) { try { fn(); } catch { /* a listener's error is its own */ } }
+  return () => awakeListeners.delete(fn);
+}
+
+/** Load lazily; each explicitly enabled episode owns its startup and cancellation. */
+export function wakeEffects() {
+  if (!canvasWorkerEnabled()) return Promise.resolve(null);
+  if (waking) return waking;
+  const episode = generation;
+  waking = (mod ? Promise.resolve(mod) : import("/ui/js/app-effects.js")).then(async m => {
+    mod = m;
+    await retiring;
+    if (episode !== generation || !canvasWorkerEnabled()) return null;
+    const owner = chatStore ? m.startAppEffects({ store: chatStore }) : null;
+    awakeGeneration = episode;
+    for (const fn of [...awakeListeners]) { try { fn(); } catch { /* the rest still hear */ } }
+    return owner;
+  }, () => null);
+  return waking;
+}
+
+/** Wake when the open chat has placements or the person has a personal effect. */
+function check() {
+  if (!canvasWorkerEnabled()) {
+    generation++;
+    const owner = mod?.getAppEffects();
+    if (owner) retiring = Promise.resolve(owner.dispose?.(true));
+    waking = null;
+    return;
+  }
+  if (waking) return;
+  const route = navStore.get().route;
+  if ((route?.panel === "chat" && chatHasEffects(route.instance)) || ownerEffectsChosen()) void wakeEffects();
+}
+
+/** Boot (once per page, with the Chat store the runtime binds to). Starts nothing but the watch. */
+export function startEffectsWaker({ store }) {
+  chatStore = store;
+  if (started) return;
+  started = true;
+  appStore.subscribe(check); navStore.subscribe(check); onOwnerEffectsChanged(check);
+  check();
+}
+
+// Full Canvas Worker metadata stays in the experimental graph, never in ordinary chat boot.
+let metadata = null, metadataPending = null;
+const metadataListeners = new Set();
+export function onCanvasMetadataChange(fn) { metadataListeners.add(fn); return () => metadataListeners.delete(fn); }
+export function loadCanvasWorkerMetadata() {
+  if (!canvasWorkerEnabled()) return Promise.resolve(null);
+  if (metadata) return Promise.resolve(metadata);
+  if (metadataPending?.episode === generation) return metadataPending.promise;
+  const episode = generation, op = { episode, promise: null };
+  metadataPending = op;
+  op.promise = import("./effect-display-metadata.js").then(value => {
+    if (episode !== generation || !canvasWorkerEnabled()) return null;
+    metadata = value;
+    for (const fn of [...metadataListeners]) { try { fn(); } catch { /* independent viewers */ } }
+    appStore.set({ canvasMetadataEpoch: episode });
+    return metadata;
+  }, () => null).finally(() => { if (metadataPending === op) metadataPending = null; });
+  return op.promise;
+}
+export function readCanvasTrialMessage(message) {
+  if (!canvasWorkerEnabled()) return null;
+  if (!metadata) { void loadCanvasWorkerMetadata(); return undefined; }
+  return metadata.effectTrialMessage(message);
+}
+export function canvasWorkerMenuAvailable(host) {
+  if (!canvasWorkerEnabled()) return false;
+  if (!metadata) { void loadCanvasWorkerMetadata(); return false; }
+  return metadata.chatEffectIdentity(host) !== null;
+}

package/dist/ui/shared/guest-refused.js

@@ -0,0 +1,35 @@
+// What a guest's browser is shown for a page it cannot open. Loaded from /assets/guest-refused.js.
+//
+// The gate answers a guest's navigation with this page instead of its JSON (#2399 smoke): "members" for a page that is
+// not a guest's (Fleet, Settings…), "ended" when no chat is shared with the guest any more. The page's words are in
+// the browser's language, as the sign-in page's are; the HTML carries the English for a browser without scripts.
+(() => {
+  "use strict";
+  const T = {
+    en: {
+      members_title: "This page is not open to guests",
+      members_lead: "This page is for the fleet's members. As a guest you can use the chats shared with you.",
+      members_go: "Open your chats",
+      ended_title: "No chats are shared with you",
+      ended_lead: "Your guest access on this fleet has no chat now — you may have left the room it came from. Ask whoever invited you to share a chat with you again.",
+    },
+    "zh-TW": {
+      members_title: "訪客無法開啟這個頁面",
+      members_lead: "這個頁面只給 fleet 的成員使用。身為訪客，你可以使用分享給你的聊天。",
+      members_go: "打開你的聊天",
+      ended_title: "目前沒有分享給你的聊天",
+      ended_lead: "你在這個 fleet 的訪客權限目前沒有任何聊天——你可能已經離開當初的頻道。請聯絡邀請你的人，再分享聊天給你。",
+    },
+  };
+  const lang = /^zh/i.test(navigator.language || "") ? "zh-TW" : "en";
+  const t = (k) => T[lang][k] || T.en[k] || k;
+  document.documentElement.lang = lang === "zh-TW" ? "zh-Hant" : "en";
+  const main = document.getElementById("refused");
+  const why = main && main.dataset.why === "ended" ? "ended" : "members";
+  document.getElementById("title").textContent = t(`${why}_title`);
+  document.getElementById("lead").textContent = t(`${why}_lead`);
+  // Nothing to open when no chat is shared (the chats would answer this page again): no button then.
+  const go = document.getElementById("go");
+  if (go) { if (why === "ended") go.remove(); else go.textContent = t("members_go"); }
+  document.title = `AgEnD — ${t(`${why}_title`)}`;
+})();

package/dist/ui/shared/header-tools.js

@@ -9,7 +9,7 @@ import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
-import { UsageBody, UsageDialog } from "./usage-dialog.js";
+import { UsageBody, UsageCompactToggle, UsageDialog } from "./usage-dialog.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
@@ -126,7 +126,7 @@ export function UsageRail({ route }) {
   const { open } = useStore(usageRailStore);
   if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
   return html`<aside data-trust="usage" class="u-rail" aria-label=${t("view.usage.title_plain")}>
-    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2>
+    <div class="u-rail-head"><h2>${t("view.usage.title")}</h2><${UsageCompactToggle} />
       <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
     <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
   </aside>`;

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). */
@@ -192,6 +196,8 @@ function ColorDialog({ name, it, onClose }) {
   }, [name]);
   // The preview: the instance as it would be drawn with the choice here.
   const preview = identityOf({ ...(it || {}), color: { ...((it && it.color) || {}), person: color || undefined }, color_show: { ...((it && it.color_show) || {}), person: places || undefined } }, { off: false });
+  // #2342: a swatch (or "no pick") is a choice, not text: it starts the hex field's undo history afresh (undoing the
+  // text back to a typed colour would leave the box and the chosen colour apart — Save would send the other one).
   const pick = (c) => { setColor(c); setHex(c && HEX.test(c) ? c : ""); setError(""); };
   const togglePlace = (p) => {
     const base = places || preview.show;
@@ -207,7 +213,8 @@ function ColorDialog({ name, it, onClose }) {
       onClose();
     } catch (err) { setError(t("color.failed", (err && err.message) || "network")); setBusy(false); }
   }
-  const onHex = (v) => { setHex(v); const c = /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
+  // The text as typed (#2342: trimming it in the box would rewrite it, losing its undo); spaces around it are ignored.
+  const onHex = (v) => { setHex(v); const w = v.trim(), c = /^#[0-9a-fA-F]{6}$/.test(w) ? w.toLowerCase() : null; if (c) { setColor(c); setError(""); } };
   const off = colorsOff();
   return html`<${Dialog} title=${t("color.title", name)} onClose=${onClose} busy=${busy}
       actions=${html`<button type="button" class="btn" disabled=${busy || !loaded} onClick=${() => save({ color: null, color_show: null })}>${t("color.reset")}</button>
@@ -222,8 +229,8 @@ function ColorDialog({ name, it, onClose }) {
         ref=${(el) => { if (el && el.style) { el.style.setProperty("--sw-light", p.light); el.style.setProperty("--sw-dark", p.dark); } }}
         onClick=${() => pick(`preset:${p.id}`)}></button>`)}
       <label class="idc-custom">${t("color.custom")}
-        <input type="color" value=${HEX.test(hex) ? hex : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
-        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value.trim())} aria-label=${t("color.hex")} /></label>
+        <input type="color" value=${HEX.test(hex.trim()) ? hex.trim() : "#808080"} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.custom")} />
+        <input type="text" class="idc-hex" inputmode="text" spellcheck=${false} maxlength="7" placeholder="#rrggbb" value=${hex} onInput=${(e) => onHex(e.currentTarget.value)} aria-label=${t("color.hex")} /></label>
       <button type="button" class="btn btn-sm" disabled=${!color} onClick=${() => pick(null)}>${t("color.noPick")}</button>
     </fieldset>
     <fieldset class="idc-places"><legend>${t("color.places")}</legend>