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

package/dist/ui/shared/effect-stock-trust.js

@@ -95,14 +95,35 @@ function outset(style) {
   }
   return pad <= 256 ? Math.ceil(pad) : null;
 }
+/**
+ * #2086: the identity card's banner fill (a blurred copy beside a centred banner) — the one filter stock admits. Only
+ * this exact value, on exactly `.id-banner-box > img.id-banner-fill`, absolutely positioned in that box (so the box is
+ * its containing block — #2089 review: a fixed fill is the viewport's, and no box clips it), and the box positioned and
+ * clipping on both axes; its paint is then that box's rectangle (the blur and its scale never leave it). The box must
+ * also be a real block box that the browser reports as the fill's offset parent (#2089 review r3: `display: contents`
+ * keeps the computed position and overflow but generates no box, so an outer ancestor would place the fill, and an inline
+ * box clips differently). Anything else with a filter refuses.
+ */
+export const STOCK_BANNER_FILL_FILTER = "blur(24px) saturate(0.75) brightness(0.7)";
+function stockBannerFill(host, el) {
+  const box = el.parentElement;
+  if (typeof el.matches !== "function" || !el.matches(".id-banner-box > img.id-banner-fill") || !box) return null;
+  const s = host.getComputedStyle(el), b = host.getComputedStyle(box);
+  if (s.filter !== STOCK_BANNER_FILL_FILTER || !none(s.backdropFilter) || !none(b.filter) || !none(b.backdropFilter)) return null;
+  if (!["hidden", "clip"].includes(b.overflowX) || !["hidden", "clip"].includes(b.overflowY)) return null;
+  if (s.position !== "absolute" || !["relative", "absolute"].includes(b.position)) return null;
+  if (b.display !== "block" || el.offsetParent !== box) return null;
+  return rect(box);
+}
 function protectedPaint(host, root, budget) {
   const nodes = [root, ...root.querySelectorAll("*")]; budget.n += nodes.length;
   if (budget.n > 4096) return null;
   let union = null;
   for (const el of nodes) {
     if (!visible(host, el)) continue;
-    const style = host.getComputedStyle(el), r = rect(el), pad = outset(style);
-    if (!r || pad === null || !none(style.filter) || !none(style.backdropFilter)) return null;
+    const style = host.getComputedStyle(el), pad = outset(style);
+    const r = none(style.filter) ? rect(el) : stockBannerFill(host, el);
+    if (!r || pad === null || !none(style.backdropFilter)) return null;
     const a = { x: r.x - pad, y: r.y - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
     if (!union) union = a;
     else { const x = Math.min(union.x, a.x), y = Math.min(union.y, a.y); union = { x, y, width: Math.max(union.x + union.width, a.x + a.width) - x, height: Math.max(union.y + union.height, a.y + a.height) - y }; }

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

@@ -0,0 +1,62 @@
+/** #2039: fixed host-only closed shadow shell. Owner CSS has no exported parts or slots into it. */
+const roots = new WeakMap();
+const clear = root => { while (root.firstChild) root.removeChild(root.firstChild); };
+function sheetOf(host, record) {
+  try {
+    const link = record.link, sheet = link?.sheet;
+    return record.ready && !record.dead && roots.get(record.panel)?.current === record && record.root.mode === "closed" && record.root.host === record.panel
+      && link.getRootNode() === record.root && link.isConnected && link.disabled === false && sheet?.ownerNode === link && sheet.disabled === false
+      && sheet.href === new URL("/assets/effect-trial.css", host.location.origin).href && typeof sheet.insertRule === "function" && typeof sheet.deleteRule === "function" && sheet.cssRules ? sheet : null;
+  } catch { return null; }
+}
+/** Reflect only a shell issued here, after its fixed same-origin stylesheet loaded. Never a serialized capability. */
+export function effectTrialShadow(host, panel) {
+  const record = roots.get(panel)?.current;
+  return record && sheetOf(host, record) === record.proof?.sheet ? record.proof : null;
+}
+export function createEffectTrialShadow({ window: host, panel, title, labels, onStop, onClose, onReady, onError } = {}) {
+  if (!host?.document || panel?.ownerDocument !== host.document || typeof panel.attachShadow !== "function" || typeof onReady !== "function" || typeof onError !== "function") return null;
+  let slot = roots.get(panel), cleanup = null;
+  const clock = () => (host.performance ?? globalThis.performance).now(), later = host.setTimeout?.bind(host) ?? globalThis.setTimeout, cancel = host.clearTimeout?.bind(host) ?? globalThis.clearTimeout;
+  try {
+    if (slot?.current && !slot.current.dead) return null;
+    if (!slot) { slot = { root: panel.attachShadow({ mode: "closed" }), current: null }; roots.set(panel, slot); }
+    const root = slot.root; clear(root);
+    const doc = host.document, element = (tag, cls) => { const el = doc.createElement(tag); el.className = cls; return el; };
+    const link = element("link", "effect-trial-style"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "/assets/effect-trial.css");
+    const head = element("header", "effect-trial-head"), label = element("strong", "effect-trial-label"), name = element("span", "effect-trial-title"), close = element("button", "effect-trial-close"), controls = element("div", "effect-trial-controls"), stop = element("button", "effect-trial-stop"), body = element("div", "effect-trial-body"), stage = element("div", "effect-trial-stage"), note = element("p", "effect-trial-note");
+    close.setAttribute("type", "button"); stop.setAttribute("type", "button"); stage.setAttribute("aria-hidden", "true");
+    head.append(label, name, close); controls.append(stop); body.append(stage);
+    const nodes = [head, controls, body, note]; for (const el of nodes) el.setAttribute("hidden", "");
+    const began = clock(); if (!Number.isFinite(began) || began < 0) return null;
+    let timer = null;
+    const record = { panel, root, link, stage, head, controls, body, note, close, stop, ready: false, dead: false, proof: null }; slot.current = record;
+    const text = (nextTitle, nextLabels) => {
+      if (record.dead || !nextLabels) return;
+      label.textContent = nextLabels.label; name.textContent = typeof nextTitle === "string" ? nextTitle : "";
+      close.textContent = nextLabels.close; stop.textContent = nextLabels.stop; note.textContent = nextLabels.note;
+      panel.setAttribute("data-effect-trial-theme", doc.documentElement.dataset.theme === "dark" ? "dark" : "light");
+    };
+    const failed = () => { if (!record.dead) { dispose(); try { onError("stage_unavailable"); } catch { /* cleanup already owns failure */ } } };
+    const loaded = () => {
+      if (record.dead || record.ready || slot.current !== record) return;
+      const at = clock(); if (!Number.isFinite(at) || at < began || at - began >= 10000) { failed(); return; }
+      record.ready = true; const sheet = sheetOf(host, record);
+      if (!sheet) { failed(); return; }
+      cancel(timer); timer = null;
+      record.proof = Object.freeze({ panel, root, link, sheet, stage, head, controls, body, note, close, stop });
+      for (const el of nodes) el.removeAttribute("hidden");
+      try { onReady(record.proof); } catch { failed(); }
+    };
+    const stopClick = () => { if (!record.dead) onStop?.(); }, closeClick = () => { if (!record.dead) onClose?.(); };
+    function dispose() {
+      if (record.dead) return; record.dead = true; cancel(timer); timer = null;
+      link.removeEventListener("load", loaded); link.removeEventListener("error", failed); stop.removeEventListener("click", stopClick); close.removeEventListener("click", closeClick);
+      if (slot.current === record) { slot.current = null; clear(root); }
+    }
+    cleanup = dispose;
+    link.addEventListener("load", loaded); link.addEventListener("error", failed); stop.addEventListener("click", stopClick); close.addEventListener("click", closeClick);
+    text(title, labels); timer = later(failed, 10000); root.append(link, ...nodes);
+    return Object.freeze({ dispose, text });
+  } catch { cleanup?.(); return null; }
+}

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

@@ -1,4 +1,5 @@
 /** #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 { STOCK_EFFECT_BARRIERS } from "./effect-stock-trust.js";
@@ -58,10 +59,11 @@ 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; }
+  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;
   const identity = Object.freeze({ key: own.key, id: own.id, instance: own.instance, generation: own.generation, serial: ++serial });
   const invalidate = reason => {
@@ -76,23 +78,27 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
   function check(stock) {
     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 null;
       const proof = effectStockSnapshot(stock), doc = host.document;
-      if (effectHostStyle(host) !== sheet) return null;
+      if (effectHostStyle(host) !== hostSheet || effectTrialShadow(host, panel) !== shell) return null;
       // 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;
       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
+      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 null;
+      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 null;
+      }
       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;
       const active = doc.activeElement;
       if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return null;
       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; }
+      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 ?? (el.getRootNode?.() === shell.root ? panel : null); }
       if (el !== doc.documentElement) return null;
       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"
@@ -103,7 +109,7 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
       if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return null;
       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 (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead || stage.isConnected !== true || panel.parentElement !== split) return null;
       return { x: r.x, y: r.y, width, height };
     } catch { return null; }
   }

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 !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/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,7 +161,8 @@ function SizeControl({ name, size }) {
 }
 
 /**
- * The card. `compact`: the chat header's own small size (no size control). Nothing when the card is empty. The
+ * 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.
  */
 export function IdentityCard({ name, card, compact = false, sizeControl = !compact }) {
@@ -143,11 +170,17 @@ export function IdentityCard({ name, card, compact = false, sizeControl = !compa
   const [broken, setBroken] = useState({});
   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", "")}
+  // #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)}>
+    ${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))}
       <div class="id-text">
@@ -159,6 +192,44 @@ export function IdentityCard({ name, card, compact = false, sizeControl = !compa
   </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,7 +3,7 @@
 // (`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";
@@ -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);
@@ -115,7 +115,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]);

package/dist/ui/shared/instance-nav.js

@@ -36,6 +36,22 @@ export function groupOf(it) {
   if (tags.length) return tags[0];
   return "Other";
 }
+/** A group's heading: the fallback group ("Other") is a key, shown in the page's language; a tag is shown as it is. */
+export function groupLabel(g) { return g === "Other" ? tn("groupOther") : g; }
+/**
+ * #2050: the model as a person reads it. The server's resolver writes English for a model it has not resolved yet
+ * ("default (detected when it starts)") and for a CLI's own default ("x (default)"); those are shown in the page's language.
+ */
+export function modelText(it, raw = it && it.model) {
+  if (!raw || typeof raw !== "string") return raw;
+  if (it.model_source === "unresolved") {
+    const why = /^default \((.*)\)$/.exec(raw)?.[1];
+    const reason = why === "detected when it starts" ? tn("modelWhyStart") : why === "this CLI does not report a default" ? tn("modelWhyCli") : why;
+    return reason ? tn("modelDefaultWhy", { reason }) : raw === "default" ? tn("modelDefault") : raw;
+  }
+  if (it.model_source === "cli-default") { const m = /^(.*) \(default\)$/.exec(raw); if (m) return tn("modelCliDefault", { model: m[1] }); }
+  return raw;
+}
 const BACKEND_LABELS = { "claude-code": "Claude Code", "kiro-cli": "Kiro CLI", codex: "Codex", grok: "Grok Build", antigravity: "Antigravity", opencode: "OpenCode" };
 export function backendLabel(backend) { return BACKEND_LABELS[backend] || backend || "Unknown"; }
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
@@ -93,8 +109,8 @@ export function instanceTooltip(it) {
   if (it.display_name && it.display_name !== name) lines.push(it.display_name, `(${name})`);
   else lines.push(name);
   lines.push(line("tooltipBackend", backendLabel(it.backend)));
-  const src = (s) => (s === "instance" || s === "classic" ? " (configured)" : s === "fleet-default" ? " (fleet default)" : "");
-  lines.push(line("tooltipModel", (it.model || tn("tooltipUnavailable")) + src(it.model_source)));
+  const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
+  lines.push(line("tooltipModel", (modelText(it) || tn("tooltipUnavailable")) + src(it.model_source)));
   lines.push(line("tooltipStatus", status));
   lines.push(line("tooltipContext", context));
   if (it.effort) lines.push(line("tooltipEffort", it.effort + src(it.effort_source)));
@@ -481,8 +497,8 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       const folded = nav.collapsed.has(g);
       return html`<div key=${g} class="v-group">
         <button type="button" class="v-group-head" aria-expanded=${folded ? "false" : "true"} onClick=${() => toggle(g)}
-          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: g })} ...${dragProps({ type: "group", name: g })}>
-          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${g}</span><span class="count">${names.length}</span></button>
+          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: groupLabel(g) })} ...${dragProps({ type: "group", name: g })}>
+          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${groupLabel(g)}</span><span class="count">${names.length}</span></button>
         ${folded ? null : html`<ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul>`}
       </div>`;
     })}

package/dist/ui/shared/panel-view.js

@@ -16,7 +16,7 @@ import { HeaderTools, VIEW_SCALE, textSizeStore } from "./header-tools.js";
 import { readStream } from "./read-stream.js";
 // The usage dialog's metric row lives with the dialog now (usage-dialog.js); re-exported for what imported it here.
 export { UsageMetric } from "./usage-dialog.js";
-import { backendLabel, STATUS_KEYS } from "./instance-nav.js";
+import { backendLabel, modelText, STATUS_KEYS } from "./instance-nav.js";
 import { viewStore } from "./view-roster-store.js";
 
 /** #1580: the app's stream says the fleet is not answering (a restart): the View's polls skip their turn until it is. */
@@ -27,7 +27,7 @@ import { Dialog } from "./ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "./ui-states.js";
 import { Icon } from "./ui-icons.js";
 import "./view-strings.js";
-import { checkCard, fitPicture, IdentityCard, useCard } from "./identity-card.js";
+import { BannerFocusPreview, checkCard, fitPicture, IdentityCard, useBannerPreview, useCard } from "./identity-card.js";
 import { confirmDialog } from "./ui-confirm.js";
 import { openColorDialog } from "./identity-color.js";
 
@@ -305,7 +305,7 @@ function Card({ it, viewOnly, onEdit }) {
     <div class="v-avatar">${it.has_avatar ? html`<img ref=${avatar} alt="" />` : html`<span class="v-initial" aria-hidden="true">${initial}</span>`}</div>
     <div class="v-card-body">
       <div class="v-card-line"><strong>${it.display_name || it.instance_name}</strong>${it.role ? html`<span class="v-role">${it.role}</span>` : null}</div>
-      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${it.model}` : ""}${ctx}</div>
+      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${modelText(it)}` : ""}${ctx}</div>
       ${open && it.description ? html`<p class="v-card-desc">${it.description}</p>` : null}
     </div>
     <button type="button" class="icon-btn" onClick=${toggle} aria-expanded=${open ? "true" : "false"} aria-label=${tn(open ? "collapseProfile" : "expandProfile")} title=${tn(open ? "collapseProfile" : "expandProfile")}>
@@ -332,6 +332,11 @@ function EditProfile({ it, onClose }) {
   const [removeCard, setRemoveCard] = useState({ portrait: false, banner: false });
   const [clearCard, setClearCard] = useState(false);
   const pics = { portrait: useRef(null), banner: useRef(null) };
+  // #2086: the banner's focus — this person's (null: follow the agent's, else the centre), and the picture to preview:
+  // a newly chosen file, else the banner drawn now.
+  // `agent`: the agent's own focus (what "Follow the agent's" shows; else the centre).
+  const [focus, setFocus] = useState({ value: 50, mine: null, start: null, agent: null });
+  const [bannerPreview, preview] = useBannerPreview();
   useEffect(() => {
     let live = true;
     // The card's fields stay disabled until this read is in (#1889 review: a draft typed meanwhile was overwritten);
@@ -343,6 +348,11 @@ function EditProfile({ it, onClose }) {
       const resolved = checkCard(it.instance_name, body);
       const mine = (k) => (resolved && resolved[k] && resolved[k].by === "human" ? resolved[k] : null);
       setCard({ mine: { tagline: mine("tagline"), bio: mine("bio"), portrait: mine("portrait"), banner: mine("banner") }, limits: body.limits || null });
+      const bf = resolved && resolved.banner_focus;
+      const agent = Number.isInteger(body.banner_focus_agent) && body.banner_focus_agent >= 0 && body.banner_focus_agent <= 100 ? body.banner_focus_agent : null;
+      const mineFocus = bf && bf.by === "human" ? bf.value : null;
+      setFocus({ value: mineFocus ?? agent ?? 50, mine: mineFocus, start: mineFocus, agent });
+      if (resolved && resolved.banner) preview.fromSrc(resolved.banner.src);
       setCardText({ tagline: mine("tagline") ? mine("tagline").text : "", bio: mine("bio") ? mine("bio").text : "" });
     }).catch(() => { if (live && lease.current()) setCard(none); });
     return () => { live = false; };
@@ -360,6 +370,7 @@ function EditProfile({ it, onClose }) {
     const clearing = clearCard;
     const before = card && card.mine ? { tagline: card.mine.tagline ? card.mine.tagline.text : "", bio: card.mine.bio ? card.mine.bio.text : "" } : { tagline: "", bio: "" };
     if (!clearing) for (const k of ["tagline", "bio"]) if (cardText[k] !== before[k]) draft[`card_${k}`] = cardText[k];
+    if (!clearing && focus.mine !== focus.start) draft.card_banner_focus = focus.mine;          // #2086
     const cardPics = {};
     try {
       // A picture too large is fitted first (after asking) — before anything is written, so declining writes nothing.
@@ -422,10 +433,19 @@ function EditProfile({ it, onClose }) {
         <label class="field"><span>${tn("cardTagline")}</span><input value=${cardText.tagline} onInput=${(e) => setCardText({ ...cardText, tagline: e.target.value })} /></label>
         <label class="field"><span>${tn("cardBio")}</span><textarea rows="4" value=${cardText.bio} onInput=${(e) => setCardText({ ...cardText, bio: e.target.value })}></textarea></label>
         ${["portrait", "banner"].map((slot) => html`<div key=${slot} class="form">
-          <label class="field"><span>${tn(slot === "portrait" ? "cardPortrait" : "cardBanner")}</span><input ref=${pics[slot]} type="file" accept="image/png,image/jpeg,image/webp" /></label>
+          <label class="field"><span>${tn(slot === "portrait" ? "cardPortrait" : "cardBanner")}</span><input ref=${pics[slot]} type="file" accept="image/png,image/jpeg,image/webp"
+            onChange=${slot === "banner" ? (e) => { const fl = e.currentTarget.files && e.currentTarget.files[0]; if (fl) preview.fromFile(fl); } : undefined} /></label>
           ${card && card.mine && card.mine[slot] ? html`<div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${removeCard[slot] ? "true" : "false"}
             onClick=${() => setRemoveCard({ ...removeCard, [slot]: !removeCard[slot] })}>${tn(removeCard[slot] ? "cardKeep" : "cardRemove")}</button></div>` : null}
         </div>`)}
+        ${bannerPreview ? html`<div class="field bf-field">
+          <span>${tn("cardBannerFocus")}</span>
+          <${BannerFocusPreview} src=${bannerPreview.src} focus=${focus.value} />
+          <input type="range" min="0" max="100" step="1" value=${focus.value} aria-label=${tn("cardBannerFocus")}
+            onInput=${(e) => { const v = Number(e.currentTarget.value); setFocus({ ...focus, value: v, mine: v }); }} />
+          <span class="note">${tn("cardBannerFocusNote")}</span>
+          ${focus.mine !== null ? html`<div class="field-row"><button type="button" class="btn btn-sm" onClick=${() => setFocus({ ...focus, value: focus.agent ?? 50, mine: null })}>${tn("cardFocusFollow")}</button></div>` : null}
+        </div>` : null}
       </fieldset>
       <div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${clearCard ? "true" : "false"} onClick=${() => setClearCard(!clearCard)}>${tn(clearCard ? "keepCard" : "clearCard")}</button>
         ${clearCard ? html`<span class="muted">${tn("clearCardNote")}</span>` : null}</div>

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

@@ -51,6 +51,14 @@ register("view", {
   "tooltipEffort": "Effort: {value}",
   "tooltipCost": "Cost: {value}",
   "tooltipUnavailable": "Unavailable",
+  "srcConfigured": " (configured)",
+  "srcFleetDefault": " (fleet default)",
+  "modelDefault": "default",
+  "modelDefaultWhy": "default ({reason})",
+  "modelCliDefault": "{model} (default)",
+  "modelWhyStart": "detected when it starts",
+  "modelWhyCli": "this CLI does not report a default",
+  "groupOther": "Other",
   "statusRunning": "Running",
   "statusPaused": "Paused",
   "statusStopped": "Stopped",
@@ -162,6 +170,9 @@ register("view", {
   "cardBio": "Bio (up to 280 characters, 3 line breaks)",
   "cardPortrait": "Portrait",
   "cardBanner": "Banner",
+  "cardBannerFocus": "Banner focus",
+  "cardBannerFocusNote": "What stays in view when the banner is cropped: the dashed area shows on every screen and card size; the yellow one is a phone's medium card.",
+  "cardFocusFollow": "Follow the agent's",
   "cardRemove": "Remove yours",
   "cardKeep": "Keep yours",
   "clearCard": "Clear card",
@@ -248,6 +259,14 @@ register("view", {
   "tooltipEffort": "推理強度：{value}",
   "tooltipCost": "費用：{value}",
   "tooltipUnavailable": "無資料",
+  "srcConfigured": "（設定值）",
+  "srcFleetDefault": "（fleet 預設）",
+  "modelDefault": "預設",
+  "modelDefaultWhy": "預設（{reason}）",
+  "modelCliDefault": "{model}（預設）",
+  "modelWhyStart": "啟動時偵測",
+  "modelWhyCli": "這個 CLI 不提供預設值",
+  "groupOther": "其他",
   "statusRunning": "運行中",
   "statusPaused": "已暫停",
   "statusStopped": "已停止",
@@ -359,6 +378,9 @@ register("view", {
   "cardBio": "簡介（最多 280 個字、3 次換行）",
   "cardPortrait": "肖像",
   "cardBanner": "橫幅",
+  "cardBannerFocus": "橫幅焦點",
+  "cardBannerFocusNote": "橫幅被裁切時保留在畫面中的部分：虛線框在所有螢幕與卡片大小都看得到；黃色框是手機上中卡片的範圍。",
+  "cardFocusFollow": "跟隨 agent 的設定",
   "cardRemove": "移除你的",
   "cardKeep": "保留你的",
   "clearCard": "清除卡片",

package/dist/view-api.d.ts

@@ -84,6 +84,38 @@ export declare function resolveInstanceIdentity(input: {
 }): InstanceIdentity;
 /** Profiles by instance, for a status read: only when profiles.db already exists — a status read never creates it. */
 export declare function profileIdentities(dataDir: string): Map<string, Pick<ProfileRow, "display_name" | "description" | "role" | "avatar_path">>;
+/** #2056: one instance's person-picked colour and places, as the Colour dialog (GET /api/profile) reads them. */
+export declare function personIdentityColour(dataDir: string, name: string): {
+    color: string | null;
+    show: string[] | null;
+};
+/**
+ * #2056: a person's colour for one instance — exactly POST /api/profile's colour fields: the store's own check (in set(),
+ * before anything is written), the table made first, the write in a profiles.db transaction. The caller announces
+ * (identityChanged).
+ */
+export declare function setPersonIdentityColour(dataDir: string, name: string, identity: {
+    color?: unknown;
+    show?: unknown;
+}): {
+    ok: true;
+} | {
+    ok: false;
+    status: number;
+    error: string;
+    detail?: string;
+};
+/** #2086: the banner focus a person set for one instance (null: none; the agent's, else the centre, is drawn). */
+export declare function personBannerFocus(dataDir: string, name: string): number | null;
+/** #2086: a person's banner focus — exactly POST /api/profile's card_banner_focus (the store's check; its own write). */
+export declare function setPersonBannerFocus(dataDir: string, name: string, focus: unknown): {
+    ok: true;
+} | {
+    ok: false;
+    status: number;
+    error: string;
+    detail?: string;
+};
 /** Every person-picked colour, for a status read (never creates profiles.db or its table). */
 export declare function identityColors(dataDir: string): ReturnType<typeof IdentityColorStore.all>;
 /** The card picture drawn for `slot`: the person's, else the agent's (the same rule as the card's JSON). */