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

package/dist/ui/shared/effect-trial-stage.js

@@ -1,6 +1,7 @@
 /** #1629: host-issued LOCAL trial paint receipt. No authority, loader, frame factory or pool is created here. */
+import { effectTrialShadow } from "./effect-trial-shadow.js";
 import { effectHostStyle } from "./effect-host-style.js";
-import { effectStockSnapshot } from "./effect-stock-snapshot.js";
+import { effectStockSnapshot, effectStockRefusal } from "./effect-stock-snapshot.js";
 import { STOCK_EFFECT_BARRIERS } from "./effect-stock-trust.js";
 const receipts = new WeakMap(), owners = new WeakMap();
 let serial = 0;
@@ -58,11 +59,13 @@ export function effectTrialStage(receipt, expected, stock) {
 }
 
 /** Only the fixed host TrialPanel supplies these elements and a current server-run lease. Not an agent manifest. */
-export function createEffectTrialStage({ window: host, panel, stage, binding: raw, current, ownerCss, onStop = () => {} } = {}) {
+export function createEffectTrialStage({ window: host, panel, stage, binding: raw, current, onStop = () => {} } = {}) {
   const own = binding(raw);
-  if (!own || typeof current !== "function" || typeof ownerCss !== "function" || typeof onStop !== "function" || !host?.document || !panel || !stage || owners.has(stage)) return null;
-  let sheet; try { sheet = effectHostStyle(host); if (!sheet || host.CSS?.supports("contain", "paint") !== true || host.CSS.supports("overflow", "clip") !== true) return null; } catch { return null; }
-  const receipt = Object.freeze(Object.create(null)), frames = new Set(), listeners = new Set(); let dead = false, constraint = null;
+  if (!own || typeof current !== "function" || typeof onStop !== "function" || !host?.document || !panel || !stage || owners.has(stage)) return null;
+  const shell = effectTrialShadow(host, panel), hostSheet = effectHostStyle(host);
+  let sheet; try { sheet = shell?.sheet; if (!shell || shell.stage !== stage || !hostSheet || !sheet || host.CSS?.supports("contain", "paint") !== true || host.CSS.supports("overflow", "clip") !== true) return null; } catch { return null; }
+  const receipt = Object.freeze(Object.create(null)), frames = new Set(), listeners = new Set(); let dead = false, constraint = null, failure = "stage_unavailable";
+  const reject = reason => { failure = reason; return null; };
   const identity = Object.freeze({ key: own.key, id: own.id, instance: own.instance, generation: own.generation, serial: ++serial });
   const invalidate = reason => {
     if (dead) return; dead = true; receipts.delete(receipt); if (owners.get(stage) === receipt) owners.delete(stage);
@@ -74,62 +77,81 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
   };
   const blur = event => { if (event.target === host) invalidate("blur"); };
   function check(stock) {
+    failure = "trial_layout_unverified";
     try {
       // This callback may reenter disposal or replace the owner. Recheck identity after it returns.
-      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || ownerCss() !== "off" || dead) return null;
+      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead) return reject("trial_current_changed");
       const proof = effectStockSnapshot(stock), doc = host.document;
-      if (effectHostStyle(host) !== sheet) return null;
+      if (!proof) return reject(effectStockRefusal(stock));
+      if (effectHostStyle(host) !== hostSheet || effectTrialShadow(host, panel) !== shell) return reject("trial_style_unavailable");
       // The own panel MUST still suppress ordinary foreground effects. Never synthesize front:true.
-      if (!proof || proof.front !== false || doc.visibilityState !== "visible" || doc.hasFocus?.() !== true || doc.fullscreenElement || doc.pictureInPictureElement) return null;
+      if (doc.hasFocus?.() !== true) return reject("trial_window_unfocused");
+      if (doc.visibilityState !== "visible") return reject("hidden");
+      if (proof.front !== false || doc.fullscreenElement || doc.pictureInPictureElement) return reject("trial_overlay_unverified");
       const split = doc.querySelector(".main > .p-chat > .chat-split");
       if (!split || doc.querySelectorAll(".main > .p-chat").length !== 1 || doc.querySelectorAll(".chat-split > .pv-panel").length !== 1
-        || panel.parentElement !== split || panel.ownerDocument !== doc || panel.isConnected !== true || panel.className !== "pv-panel effect-trial-panel" || panel.getAttribute("data-trust") !== "preview") return null;
-      const children = [...panel.children], names = ["effect-trial-head", "effect-trial-controls", "effect-trial-body", "effect-trial-note"];
-      if (children.length !== names.length || children.some((el, i) => el.className !== names[i]) || children[2].children.length !== 1 || children[2].firstElementChild !== stage
-        || stage.className !== "effect-trial-stage" || stage.ownerDocument !== doc || stage.isConnected !== true || stage.hasAttribute("tabindex") || stage.hasAttribute("contenteditable")) return null;
+        || panel.parentElement !== split || panel.ownerDocument !== doc || panel.isConnected !== true || panel.className !== "pv-panel effect-trial-panel" || panel.getAttribute("data-trust") !== "preview") return reject("trial_panel_unavailable");
+      const children = [...shell.root.children], names = ["effect-trial-style", "effect-trial-head", "effect-trial-controls", "effect-trial-body", "effect-trial-note"];
+      if (panel.children.length !== 0 || children.length !== names.length || children.some((el, i) => el.className !== names[i]) || children[3].children.length !== 1 || children[3].firstElementChild !== stage
+        || stage.className !== "effect-trial-stage" || stage.ownerDocument !== doc || stage.isConnected !== true || stage.hasAttribute("tabindex") || stage.hasAttribute("contenteditable")) return reject("trial_shadow_unverified");
+      for (const control of [shell.head, shell.controls, shell.close, shell.stop, shell.note]) {
+        const style = host.getComputedStyle(control);
+        if (style.display === "none" || style.visibility !== "visible" || style.opacity !== "1" || !rect(control)) return reject("trial_controls_unavailable");
+      }
       if ([...doc.querySelectorAll(STOCK_EFFECT_BARRIERS)].some(el => el !== panel && visible(host, el))
-        || [...doc.querySelectorAll(".pv-panel")].some(el => el !== panel && visible(host, el))) return null;
+        || [...doc.querySelectorAll(".pv-panel")].some(el => el !== panel && visible(host, el))) return reject("trial_other_overlay");
       const active = doc.activeElement;
-      if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return null;
+      if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return reject("trial_editable_focus");
       let el = stage, depth = 0;
-      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return null; if (el === doc.documentElement) break; el = el.parentElement; }
-      if (el !== doc.documentElement) return null;
+      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return reject("trial_ancestor_paint"); if (el === doc.documentElement) break; el = el.parentElement ?? (el.getRootNode?.() === shell.root ? panel : null); }
+      if (el !== doc.documentElement) return reject("trial_ancestor_paint");
       const s = host.getComputedStyle(stage), r = rect(stage), p = rect(panel);
       if (!r || !p || s.position !== "relative" || s.zIndex !== "0" || s.overflowX !== "clip" || s.overflowY !== "clip"
         || s.paddingLeft !== "0px" || s.paddingRight !== "0px" || s.paddingTop !== "0px" || s.paddingBottom !== "0px"
         || ["borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth"].some(k => s[k] !== "0px") || !none(s.boxShadow) || s.outlineStyle !== "none"
         || r.x < p.x || r.y < p.y || r.x + r.width > p.x + p.width || r.y + r.height > p.y + p.height
-        || r.x < 0 || r.y < 0 || r.x + r.width > host.innerWidth || r.y + r.height > host.innerHeight) return null;
-      if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return null;
+        || r.x < 0 || r.y < 0 || r.x + r.width > host.innerWidth || r.y + r.height > host.innerHeight) return reject("trial_clip_unverified");
+      if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return reject("trial_frame_unknown");
       const width = Math.floor(r.width), height = Math.floor(r.height);
-      if (width < 1 || height < 1 || width > 4096 || height > 4096 || width * height > 8388608 || dead || owners.get(stage) !== receipt) return null;
-      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || ownerCss() !== "off" || dead || stage.isConnected !== true || panel.parentElement !== split) return null;
+      if (width < 1 || height < 1 || width > 4096 || height > 4096 || width * height > 8388608 || dead || owners.get(stage) !== receipt) return reject("trial_size_limit");
+      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead || stage.isConnected !== true || panel.parentElement !== split) return reject("trial_current_changed");
       return { x: r.x, y: r.y, width, height };
-    } catch { return null; }
+    } catch { return reject("trial_check_failed"); }
   }
   function project(stock) {
-    const r = check(stock); if (!r) { invalidate("stage_unavailable"); return null; }
+    const r = check(stock); if (!r) { invalidate(failure); return null; }
     return Object.freeze({ root: stage, rect: Object.freeze(r), identity, bind });
   }
   function bind(frame, { layer } = {}, stock) {
     if (frames.size || !["front", "behind"].includes(layer) || frame?.ownerDocument !== host.document || frame.parentElement !== stage || frame.tagName !== "IFRAME") { frame?.remove?.(); return { ok: false }; }
     // The new frame is temporarily known to this owner before the topology check; it remains hidden until sync.
-    const token = `agend-effect-trial-${identity.serial}`; let rule, removed = false;
+    const token = `agend-effect-trial-${identity.serial}`; let rule, removed = false, shown = false;
     const remove = () => {
       if (removed) return; removed = true; frame.remove(); frames.delete(handle);
       try { frame.classList.remove(token); const i = [...sheet.cssRules].indexOf(rule); if (i >= 0) sheet.deleteRule(i); } catch { /* physically removed first */ }
     };
-    const hide = () => { try { rule.style.setProperty("visibility", "hidden", "important"); if (frame.isConnected && host.getComputedStyle(frame).visibility !== "hidden") remove(); } catch { remove(); } };
+    const hide = () => {
+      shown = false;
+      try { rule.style.setProperty("visibility", "hidden", "important"); if (frame.isConnected && host.getComputedStyle(frame).visibility !== "hidden") { remove(); return false; } return !removed; } catch { remove(); return false; }
+    };
     const handle = { ok: true, element: frame, remove, hide,
       sync(proof) {
-        hide(); const r = check(proof); if (!r || removed) { invalidate("stage_unavailable"); return false; }
+        const r = check(proof); if (!r || removed) { invalidate(failure); return false; }
         try {
+          const matches = visibility => {
+            const s = host.getComputedStyle(frame), actual = rect(frame);
+            return !!actual && s.position === "absolute" && s.visibility === visibility && s.pointerEvents === "none" && s.zIndex === "0" && s.opacity === (layer === "front" ? "0.85" : "1") && neutral(s)
+              && ["x", "y", "width", "height"].every(k => Math.abs(actual[k] - r[k]) < 0.02) && actual.x >= r.x && actual.y >= r.y && actual.x + actual.width <= r.x + r.width && actual.y + actual.height <= r.y + r.height
+              && frame.isConnected === true && frame.ownerDocument === host.document && frame.parentElement === stage && !dead && !removed && owners.get(stage) === receipt;
+          };
+          // Reprove the current stage, clipping and actual frame every tick. Hiding/revealing an
+          // unchanged iframe each rAF can starve Firefox's OffscreenCanvas presentation.
+          if (shown && matches("visible")) return true;
+          if (!hide()) throw Error("local hiding lost");
           for (const [k, v] of Object.entries({ left: "0px", top: "0px", width: `${r.width}px`, height: `${r.height}px` })) rule.style.setProperty(k, v, "important");
-          const s = host.getComputedStyle(frame), actual = rect(frame);
-          if (!actual || s.position !== "absolute" || s.visibility !== "hidden" || s.pointerEvents !== "none" || s.zIndex !== "0" || s.opacity !== (layer === "front" ? "0.85" : "1") || !neutral(s)
-            || !["x", "y", "width", "height"].every(k => Math.abs(actual[k] - r[k]) < 0.02) || actual.x < r.x || actual.y < r.y || actual.x + actual.width > r.x + r.width || actual.y + actual.height > r.y + r.height) throw Error("local geometry lost");
-          rule.style.setProperty("visibility", "visible", "important"); return true;
-        } catch { invalidate("stage_unavailable"); return false; }
+          if (!matches("hidden")) throw Error("local geometry lost");
+          rule.style.setProperty("visibility", "visible", "important"); shown = true; return true;
+        } catch { invalidate("trial_frame_geometry"); return false; }
       },
     };
     frames.add(handle);
@@ -137,7 +159,8 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
       const i = sheet.insertRule(`.${token}{}`, sheet.cssRules.length); rule = sheet.cssRules[i];
       for (const [k, v] of Object.entries({ position: "absolute", visibility: "hidden", "pointer-events": "none", "z-index": "0", opacity: layer === "front" ? "0.85" : "1", border: "0px", margin: "0px", padding: "0px", "box-sizing": "border-box", "min-width": "0px", "min-height": "0px", "max-width": "none", "max-height": "none", outline: "none", "box-shadow": "none", "background-color": "transparent", animation: "none", transition: "none" })) rule.style.setProperty(k, v, "important");
       frame.classList.add(token);
-      if (host.getComputedStyle(frame).visibility !== "hidden" || !check(stock)) throw Error("initial local hiding lost");
+      if (host.getComputedStyle(frame).visibility !== "hidden") throw Error("initial local hiding lost");
+      if (!check(stock)) { remove(); invalidate(failure); return { ok: false }; }
     } catch { remove(); invalidate("stage_unavailable"); return { ok: false }; }
     return handle;
   }

package/dist/ui/shared/effect-trial.css

@@ -0,0 +1,40 @@
+/* #2039: fixed closed-shadow Trial chrome; no inherited owner-CSS typography, parts or slots. */
+:host {
+  all: initial !important;
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex: 0 0 45% !important;
+  flex-direction: column !important;
+  align-self: stretch !important;
+  width: 45% !important;
+  min-width: 320px !important;
+  max-width: calc(100% - 368px) !important;
+  min-height: 0 !important;
+  height: auto !important;
+  position: relative !important;
+  z-index: 1 !important;
+  overflow: clip !important;
+  background: #ffffff !important;
+  color: #1b1b1f !important;
+  font: 400 16px/1.4 system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji !important;
+  direction: ltr !important;
+  unicode-bidi: isolate !important;
+  text-align: start !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+:host([data-effect-trial-theme="dark"]) { background: #202024 !important; color: #f0f0f4 !important; }
+:host::before, :host::after { all: initial !important; content: none !important; display: none !important; }
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.effect-trial-head, .effect-trial-controls, .effect-trial-note { position: relative; z-index: 1; padding: 12px; margin: 0; }
+.effect-trial-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; }
+.effect-trial-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+button { appearance: auto; display: inline-block; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
+button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.effect-trial-body { flex: 1; min-height: 0; display: flex; padding: 12px; }
+.effect-trial-stage { position: relative; z-index: 0; flex: 1; min-width: 0; min-height: 0; contain: paint; overflow: clip; padding: 0; border: 0; outline: none; box-shadow: none; }
+.effect-trial-note { font-size: 14px; }
+@media (max-width: 899px) {
+  :host { position: fixed !important; inset: 0 !important; z-index: 37 !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; }
+}

package/dist/ui/shared/fx-motion.js

@@ -0,0 +1,67 @@
+// #2117 (the user's direction, hmsg-3c166c26): agents' effects play whatever the system's reduced-motion setting says,
+// unless this device chose "Effects: follow the system's reduced-motion setting". One per-device switch (not synced:
+// it is about this screen), shared by ambient effects and Canvas Worker effects; it also works on the public link.
+export const FX_FOLLOW_REDUCED_MOTION_KEY = "agend_fx_follow_reduced_motion";
+/** The one-time chat note "your system asks for reduced motion; effects are on" was shown on this device. */
+export const FX_MOTION_NOTE_KEY = "agend_fx_motion_note_seen";
+const listeners = new Set();
+let pageChoice = null, noteShown = false;
+
+/** Whether this device asked effects to follow the system's reduced-motion setting (default: no). */
+export function followsReducedMotion() {
+  if (pageChoice !== null) return pageChoice;
+  try { return globalThis.localStorage.getItem(FX_FOLLOW_REDUCED_MOTION_KEY) === "1"; } catch { return false; }
+}
+export function setFollowsReducedMotion(on) {
+  pageChoice = !!on;
+  try { if (on) globalThis.localStorage.setItem(FX_FOLLOW_REDUCED_MOTION_KEY, "1"); else globalThis.localStorage.removeItem(FX_FOLLOW_REDUCED_MOTION_KEY); } catch { /* this page only */ }
+  for (const fn of [...listeners]) { try { fn(); } catch { /* a listener's own */ } }
+}
+/** `fn()` when the switch or the system's answer moves (this tab, another tab, the OS). Returns the unsubscribe. */
+export function onMotionChange(fn) {
+  listeners.add(fn);
+  const onStorage = (e) => {
+    if (!e || e.key === FX_FOLLOW_REDUCED_MOTION_KEY || e.key === null) {
+      pageChoice = e?.key === FX_FOLLOW_REDUCED_MOTION_KEY ? e.newValue === "1" : null;
+      fn();
+    }
+  };
+  let q = null;
+  try { q = typeof globalThis.matchMedia === "function" ? globalThis.matchMedia("(prefers-reduced-motion: reduce)") : null; } catch { q = null; }
+  try { globalThis.addEventListener && globalThis.addEventListener("storage", onStorage); } catch { /* none */ }
+  try { if (q && q.addEventListener) q.addEventListener("change", fn); } catch { /* read again on the next render */ }
+  return () => {
+    listeners.delete(fn);
+    try { globalThis.removeEventListener && globalThis.removeEventListener("storage", onStorage); } catch { /* gone */ }
+    try { if (q && q.removeEventListener) q.removeEventListener("change", fn); } catch { /* gone */ }
+  };
+}
+/** Whether the system asks for reduced motion (false when it can't say: the note is only for a clear yes). */
+export function systemReducesMotion(win = globalThis) {
+  try { return typeof win.matchMedia === "function" && win.matchMedia("(prefers-reduced-motion: reduce)").matches === true; } catch { return false; }
+}
+/**
+ * The one-time note (the user's direction): the system asks for reduced motion, this device does not follow it, and the
+ * note was not shown here before. Showing it marks it shown.
+ */
+export function motionNoteDue(win = globalThis) {
+  if (noteShown || followsReducedMotion() || !systemReducesMotion(win)) return false;
+  try { return globalThis.localStorage.getItem(FX_MOTION_NOTE_KEY) !== "1"; } catch { return true; }
+}
+export function markMotionNoteShown() {
+  noteShown = true;
+  try { globalThis.localStorage.setItem(FX_MOTION_NOTE_KEY, "1"); } catch { /* shown again next time: harmless */ }
+}
+
+/**
+ * True when effects stay still here: this device follows the system's setting and the system asks for reduced motion
+ * (or cannot say — then still, as asked for). With the switch off (the default), never.
+ */
+export function motionBlocked(win = globalThis) {
+  if (!followsReducedMotion()) return false;
+  try {
+    if (typeof win.matchMedia !== "function") return true;
+    const q = win.matchMedia("(prefers-reduced-motion: reduce)");
+    return !q || typeof q.matches !== "boolean" || q.matches;
+  } catch { return true; }
+}

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

@@ -4,7 +4,8 @@
 //
 // Nothing the agent wrote is markup: the tagline and bio are text nodes (never linkified), the pictures are same-origin
 // <img> elements whose URLs are checked here again, and sizes are class tokens only (card-s | card-m | card-l, heights in
-// app.css) — no style attribute, no CSSOM size (#1300). The size is a viewer's choice: every card's default
+// app.css) — no style attribute, no CSSOM size (#1300). #2086: the banner's focus is a position, not a size: one custom
+// property set through the CSSOM (`--id-focus`), and the banner is never drawn wider than BANNER_MAX_ASPECT : 1. The size is a viewer's choice: every card's default
 // (`card.size`) and the cards set apart from it (`card.sizeByInstance`, at most 200), synced like the other preferences.
 import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
@@ -13,6 +14,28 @@ import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
 import "./card-strings.js";
 
 export const CARD_SIZES = ["s", "m", "l"];
+/**
+ * #2086: the widest a banner is ever drawn (width : height) — app.css caps its width at this many times its size's
+ * tallest height. So the band of the picture shown everywhere is (picture's aspect ÷ this) of its height, at the focus.
+ */
+export const BANNER_MAX_ASPECT = 5;
+/**
+ * #2086 (#2089 review): the narrowest a card draws its banner — 9 : 4 (app.css caps a banner's height at its box's width ÷ 2.25, on
+ * every layout) — which crops a wide picture's sides. Every card is between this and BANNER_MAX_ASPECT, so the area shown on every screen is
+ * the narrowest box's width (centred) × the widest box's height (at the focus).
+ */
+export const BANNER_MIN_ASPECT = 9 / 4;
+/** The share of a picture's height a box of `boxAspect` shows (1: all of it; a narrower box crops the sides instead). */
+export const bannerShownHeight = (pictureAspect, boxAspect) => Math.min(1, pictureAspect / boxAspect);
+/** The share of a picture's width a box of `boxAspect` shows, centred (1: all of it). */
+export const bannerShownWidth = (pictureAspect, boxAspect) => Math.min(1, boxAspect / pictureAspect);
+/** The area every screen shows, as shares of the picture: { left, top, width, height } at focus `f`. */
+export function bannerSafeArea(pictureAspect, f) {
+  const width = bannerShownWidth(pictureAspect, BANNER_MIN_ASPECT), height = bannerShownHeight(pictureAspect, BANNER_MAX_ASPECT);
+  return { left: (1 - width) / 2, top: bannerBandTop(height, f), width, height };
+}
+/** That band's top, as a share of the picture's height, at focus `f` (0–100) — object-position's own rule. */
+export const bannerBandTop = (shown, f) => (1 - shown) * (f / 100);
 export const MAX_CARD_SIZES = 200;
 const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
 const readLocal = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
@@ -82,6 +105,9 @@ export function checkCard(name, body) {
     const v = body[k];
     if (v && typeof v === "object" && typeof v.text === "string" && v.text.length && v.text.length <= MAX[k] && (v.by === "human" || v.by === "agent")) out[k] = { text: v.text, by: v.by };
   }
+  // #2086: the banner's focus, a whole number 0 (top) … 100 (bottom).
+  const f = body.banner_focus;
+  if (f && typeof f === "object" && Number.isInteger(f.value) && f.value >= 0 && f.value <= 100 && (f.by === "human" || f.by === "agent")) out.banner_focus = { value: f.value, by: f.by };
   return Object.keys(out).length ? out : null;
 }
 // #1889 review: per instance, an epoch that moves whenever the version this page wants changes (a clear included).
@@ -135,30 +161,93 @@ function SizeControl({ name, size }) {
 }
 
 /**
- * The card. `compact`: the chat header's own small size (no size control). Nothing when the card is empty. The
+ * #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;
-  return html`<section class=${`id-card card-${size}`} aria-label=${t("card.label", name)}>
-    ${pic("banner", "id-banner", "")}
-    <div class="id-row">
-      ${pic("portrait", "id-portrait", t("card.portraitAlt", name))}
+  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 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}
+    ${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>`;
 }
 
+// ── #2086: the banner's focus, set in View's Edit profile — the whole picture, what each screen shows of it ──
+/**
+ * #2089 review: the picture the focus preview shows — a file just chosen (a blob URL this owns: released when another is
+ * chosen and when the dialog closes) or the banner drawn now (a server URL, never released).
+ */
+export function useBannerPreview() {
+  const [preview, setPreview] = useState(null);
+  useEffect(() => () => { if (preview && preview.blob) { try { URL.revokeObjectURL(preview.blob); } catch { /* already gone */ } } }, [preview]);
+  return [preview, {
+    fromFile(file) { let url = null; try { url = URL.createObjectURL(file); } catch { return; } setPreview({ src: url, blob: url }); },
+    fromSrc(src) { setPreview({ src }); },
+  }];
+}
+/** A phone draws an M card's banner at about 3 : 1 (app.css, ≤479 px) — a guide for that size, not every phone card. */
+export const BANNER_PHONE_ASPECT = 3;
+/**
+ * The banner whole, with the band every screen shows at this focus (dashed; outside it shaded) and the band a phone
+ * shows (solid) — measured from the picture itself once it has loaded. Positions go through the CSSOM (#1300).
+ */
+export function BannerFocusPreview({ src, focus }) {
+  const [size, setSize] = useState(null);
+  if (!src) return null;
+  const ar = size ? size.w / size.h : null;
+  const put = (el, a) => { for (const k of ["left", "top", "width", "height"]) el.style.setProperty(k, `${(a[k] * 100).toFixed(2)}%`); };
+  // Every screen: the safe area (both crops). The phone guide: an M card on a phone, as drawn there (both crops too).
+  const safe = (el) => { if (el && el.style && ar) put(el, bannerSafeArea(ar, focus)); };
+  const phone = (el) => {
+    if (!el || !el.style || !ar) return;
+    const width = bannerShownWidth(ar, BANNER_PHONE_ASPECT), height = bannerShownHeight(ar, BANNER_PHONE_ASPECT);
+    put(el, { left: (1 - width) / 2, top: bannerBandTop(height, focus), width, height });
+  };
+  return html`<div class="bf-wrap">
+    <img class="bf-pic" src=${src} alt="" onLoad=${(e) => { const i = e.currentTarget; if (i.naturalWidth && i.naturalHeight) setSize({ w: i.naturalWidth, h: i.naturalHeight }); }} />
+    ${ar ? html`<div class="bf-band bf-phone" ref=${phone}><span>${t("card.bannerPhone")}</span></div>
+      <div class="bf-band bf-safe" ref=${safe}><span>${t("card.bannerSafe")}</span></div>` : null}
+  </div>`;
+}
+
 // ── A person's picture for the card (View's Edit profile), fitted before it is sent (r4.1 Q3 (b)) ──
 /**
  * `file` fitted to `limit` ({ max_width, max_height, max_bytes }): as it is when it already fits; otherwise, once the

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

@@ -3,13 +3,13 @@
 // (`color`, `color_show`); this module resolves them as src/web-identity-color.ts does (a test pins the two equal),
 // paints the sidebar row through the CSSOM (no style attribute, #1300), and holds the Color dialog.
 //   colour: a person's pick > the agent's (themes shown) > its own bot's role colour > automatic (a few soft colours)
-//   places: a person's choice > the agent's (themes shown) > this host's default (color.show) > ring + bar
+//   places: a person's choice > the agent's (themes shown) > this host's default (color.show) > all three (#2056)
 //   Settings → Web appearance can turn colours off for the host (color.off): nothing is painted, every pick is kept.
 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";
 
@@ -30,7 +30,7 @@ export const AUTO_PALETTE = [
   { id: "moss", light: "#5b7340", dark: "#a9c48d" }, { id: "slate", light: "#5f6b78", dark: "#aeb8c4" },
 ];
 export const PLACEMENTS = ["name", "bar", "ring"];
-export const DEFAULT_PLACEMENTS = ["bar", "ring"];
+export const DEFAULT_PLACEMENTS = ["name", "bar", "ring"];   // #2056: all three where nobody chose (was ring + bar)
 const HEX = /^#[0-9a-f]{6}$/;
 const presetOf = (c) => (typeof c === "string" && c.startsWith("preset:") ? IDENTITY_PALETTE.find((p) => p.id === c.slice(7)) : undefined);
 const autoOf = (c) => (typeof c === "string" && c.startsWith("auto:") ? AUTO_PALETTE.find((p) => p.id === c.slice(5)) : undefined);
@@ -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 ──
@@ -115,7 +119,7 @@ export function colorsOff() {
   const f = prefInForce("color.off");
   return f ? f.value === true : readLocal("agend_color_off") === "on";
 }
-/** The default places (null: back to ring + bar). */
+/** The default places (null: back to all three, #2056). */
 export function setDefaultPlaces(list) {
   const v = list === null ? null : placesOk(list);
   const same = v && v.length === DEFAULT_PLACEMENTS.length && v.every((p, i) => p === DEFAULT_PLACEMENTS[i]);
@@ -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). */