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

package/dist/ui/settings-dialogs.js

@@ -13,6 +13,8 @@ import { api, confirmedWrite, newKey } from "./settings-confirm.js";
 import { adminUserIdError, adminUserIdPattern, botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
 import { DiscordServerPicker } from "./settings-discord.js";
 import { startOperation } from "./settings-apply.js";
+import "./settings-strings.js";   // its words, wherever a picker of this file is used (#2072: Fleet's create dialog too)
+import { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalog } from "./settings-catalog.js";
 import {
   ACCESS_MODES, AGENT_FIELDS, AGENT_MODES, BOT_FIELDS, CH_TYPES, CLASSIC_FIELDS, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS,
   VISIBILITY_MODES, accessConfirmations, agentForm, agentPatch, backendOptions, changedFields, channelId, channelsOf,
@@ -32,9 +34,36 @@ export function Select({ value, options, onChange, disabled, id, label }) {
   return html`<select id=${id} value=${value} disabled=${disabled} aria-label=${label} onChange=${(e) => onChange(e.target.value)}>
     ${opts.map((o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`)}</select>`;
 }
+/**
+ * #2072: a backend field shows every backend with what this host says about it — one it cannot run is disabled with
+ * why (not installed, not signed in, too old); one not checked yet stays selectable; the current value always can be.
+ */
 export function BackendSelect({ value, onChange, disabled, id }) {
-  return html`<${Select} id=${id} value=${value} disabled=${disabled} onChange=${onChange}
-    options=${backendOptions(value).map((o) => (o.unavailable ? { value: o.value, label: tn("backendUnavailable", o.value) } : o))} />`;
+  const rows = useBackendRows();
+  const known = backendOptions(value).filter((o) => !o.unavailable).map((o) => o.value);
+  const opts = backendChoices(known, rows || [], value, {
+    notInstalled: tn("backendNotInstalled"), notSignedIn: tn("backendNotSignedIn"), tooOld: (v) => tn("backendTooOld", v),
+    unchecked: tn("backendUnchecked"), removed: (v) => tn("backendUnavailable", v),
+  });
+  return html`<select id=${id} value=${value} disabled=${disabled} onChange=${(e) => onChange(e.target.value)}>
+    ${opts.map((o) => html`<option key=${o.value} value=${o.value} disabled=${o.disabled}>${o.label}</option>`)}</select>`;
+}
+/**
+ * #2072: a model field is a list — that backend's models for this account (cached; never a probe), the current one
+ * first and marked when the CLI does not list it, and "Other…" for a name it does not list (a text box opens with
+ * the current value in it: choosing "Other…" alone changes nothing — emptying the box is what inherits, #2098 review).
+ * `inherit`: the label of the empty choice (inherit / none), or omit it when the field has none.
+ */
+export function ModelSelect({ value, onChange, disabled, id, backend, instance, inherit }) {
+  const catalog = useModelCatalog(backend, instance);
+  const [typing, setTyping] = useState(false);
+  const opts = modelChoices(catalog || [], value, { notListed: tn("modelNotListed"), other: tn("modelOther") }, inherit);
+  return html`<div class="model-pick">
+    <select id=${id} value=${typing ? OTHER_MODEL : value} disabled=${disabled}
+      onChange=${(e) => { const v = e.target.value; if (v === OTHER_MODEL) setTyping(true); else { setTyping(false); onChange(v); } }}>
+      ${opts.map((o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`)}</select>
+    ${typing ? html`<input type="text" aria-label=${tn("modelOtherLabel")} placeholder=${tn("modelOtherPlaceholder")} disabled=${disabled}
+      value=${value} onInput=${(e) => onChange(e.target.value)} />` : null}</div>`;
 }
 export function Impact({ schema, field }) { return html`<span class="impact">${impactText(impactOf(schema, field))}</span>`; }
 export function Label({ text, schema, field, htmlFor }) {
@@ -228,7 +257,8 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
           <input id="ag-dn" type="text" placeholder=${name} disabled=${f.inherit.display_name} value=${shown("display_name", f.display_name, defaults.display_name || "")} onInput=${(e) => set("display_name")(e.target.value)} /></${Override}></div>
       <div class="field">${L(tn("description"), "instance.description", "ag-desc")}<input id="ag-desc" type="text" value=${f.description} onInput=${(e) => set("description")(e.target.value)} /></div>
       <div class="field">${L(tn("backend"), "instance.backend", "ag-be")}<${BackendSelect} id="ag-be" value=${f.backend} onChange=${set("backend")} /></div>
-      <div class="field">${L(tn("model"), "instance.model", "ag-model")}<input id="ag-model" type="text" placeholder=${tn("inheritPlaceholder")} value=${f.model} onInput=${(e) => set("model")(e.target.value)} /></div>
+      <div class="field">${L(tn("model"), "instance.model", "ag-model")}<${ModelSelect} id="ag-model" value=${f.model} onChange=${set("model")}
+        backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("inheritPlaceholder")} /></div>
     </div>
     <div class="field">${L(tn("workingDir"), "instance.working_directory", "ag-wd")}<input id="ag-wd" type="text" value=${f.working_directory} onInput=${(e) => set("working_directory")(e.target.value)} /></div>
     <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "instance.auto_pause_after", "ag-auto")}
@@ -264,8 +294,8 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
               onChange=${(e) => set("lightweight")(e.target.checked)} /><span>${tn("lightweight")}</span></label></${Override}></div>
         <div class="field">${L(tn("modelFailover"), "instance.model_failover", "ag-fo")}
           <${Override} inherit=${f.inherit.model_failover} onInherit=${setInherit("model_failover")}>
-            <input id="ag-fo" type="text" placeholder="e.g. sonnet" disabled=${f.inherit.model_failover}
-              value=${shown("model_failover", f.model_failover, (defaults.model_failover && defaults.model_failover[0]) || "")} onInput=${(e) => set("model_failover")(e.target.value)} /></${Override}>
+            <${ModelSelect} id="ag-fo" disabled=${f.inherit.model_failover} backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("modelNone")}
+              value=${shown("model_failover", f.model_failover, (defaults.model_failover && defaults.model_failover[0]) || "")} onChange=${set("model_failover")} /></${Override}>
           <${Feedback} warning=${failoverWarn} /></div>
       </div>
       <div class="field">${L(tn("systemPrompt"), "instance.systemPrompt", "ag-sys")}<input id="ag-sys" type="text" placeholder="e.g. file:prompts/dev.md" value=${f.systemPrompt} onInput=${(e) => set("systemPrompt")(e.target.value)} /></div>
@@ -591,7 +621,8 @@ export function ClassicDialog({ room, ctx, onClose }) {
   return html`<${EditDialog} title=${c.name || c.instanceName} subtitle=${`ID: ${c.instanceName} · ${tn(`exec_${runtime.execution}`)}`} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${CLASSIC_FIELDS} schema=${schema}>
     <div class="grid2">
       <div class="field">${L(tn("backend"), "classic.backend", "cl-be")}<${BackendSelect} id="cl-be" value=${f.backend} onChange=${set("backend")} /></div>
-      <div class="field">${L(tn("model"), "classic.model", "cl-model")}<input id="cl-model" type="text" placeholder=${inherited.model || tn("inheritPlaceholder")} value=${f.model} onInput=${(e) => set("model")(e.target.value)} /></div>
+      <div class="field">${L(tn("model"), "classic.model", "cl-model")}<${ModelSelect} id="cl-model" value=${f.model} onChange=${set("model")}
+        backend=${f.backend} instance=${c.instanceName} inherit=${inherited.model ? tn("inheritValue", inherited.model) : tn("inheritPlaceholder")} /></div>
       <div class="field">${L(`${tn("autoPause")} (${tn("minutes")})`, "classic.auto_pause_after", "cl-auto")}
         <${Override} inherit=${f.inherit.auto_pause_after} onInherit=${setInherit("auto_pause_after")}>
           <input id="cl-auto" type="number" min="0" step="1" class=${errors.auto ? "invalid" : ""} disabled=${f.inherit.auto_pause_after}

package/dist/ui/settings-strings.js

@@ -203,6 +203,9 @@ register("settings", {
     changesApplied: "Changes applied. AgEnD is reconciling affected Agents.",
     reviewChanges: "Review changes",
     backendUnavailable: "{0} (removed — choose another backend)",
+    backendNotInstalled: "not installed", backendNotSignedIn: "not signed in (use /login)", backendTooOld: "needs {0} or newer", backendUnchecked: "not checked yet",
+    modelNotListed: "current — not in this CLI's list", modelOther: "Other…", modelOtherLabel: "Model name", modelOtherPlaceholder: "a model name this CLI accepts",
+    modelNone: "— none —", inheritValue: "inherit ({0})", modelCliDefault: "the CLI's own default",
     readyApply: "Ready to apply",
     copied: "Copied",
     expectedMapping: "expected a mapping",
@@ -697,6 +700,9 @@ register("settings", {
     changesApplied: "變更已套用，AgEnD 正在協調受影響的 Agent。",
     reviewChanges: "檢查變更",
     backendUnavailable: "{0}（已移除，請選擇其他 backend）",
+    backendNotInstalled: "未安裝", backendNotSignedIn: "未登入（請用 /login）", backendTooOld: "需要 {0} 以上版本", backendUnchecked: "尚未檢查",
+    modelNotListed: "目前使用中 — 不在這個 CLI 的清單裡", modelOther: "其他…", modelOtherLabel: "模型名稱", modelOtherPlaceholder: "這個 CLI 接受的模型名稱",
+    modelNone: "— 無 —", inheritValue: "沿用（{0}）", modelCliDefault: "CLI 自己的預設",
     readyApply: "可套用變更",
     copied: "已複製",
     expectedMapping: "預期為 mapping",

package/dist/ui/shared/app.css

@@ -366,6 +366,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .field input:focus, .field select:focus, .field textarea:focus, .field-row input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); }
 .field input:disabled { opacity: 0.6; }
 .field-row { display: flex; gap: var(--s-1); align-items: center; }
+/* #2072: a model field — the list, and the text box "Other…" opens under it. */
+.model-pick { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
+.model-pick > select, .model-pick > input { width: 100%; }
 .note { font-size: var(--fs-xs); color: var(--text-3); }
 .checks { display: flex; flex-direction: column; gap: var(--s-1); max-height: 180px; overflow-y: auto; }
 .check { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
@@ -614,8 +617,12 @@ html.lb-open .scroller { overflow: hidden; }
 .pv-menu[open] { z-index: 6; background: var(--surface); border-radius: var(--r-sm); padding: var(--s-1); box-shadow: var(--shadow-2); }
 .pv-menu[open] > .chip-btn { display: block; text-align: left; width: max-content; max-width: 260px; white-space: normal; }
 
+/* #2087: the pill takes no room in the thread — it was a sticky box in the flow, 38 px at the end of the scroll, so
+   hiding it 48 px from the bottom took that room away under a reader still scrolling — the wheel's last step was cut
+   short, or the view clamped back. Its dock is sticky and 0 px tall; the pill floats above it. */
+.jump-dock { position: sticky; bottom: 0; height: 0; z-index: 5; }
 .jump-latest {
-  position: sticky; bottom: var(--s-3); left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: var(--s-1);
+  position: absolute; bottom: var(--s-3); left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-1);
   background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-full); box-shadow: var(--shadow-2);
   padding: 6px var(--s-4); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer;
 }
@@ -1334,13 +1341,39 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
    #2038: the banner's height follows the card's width — S 4:1, M 3:1, L 2.25:1 — between a floor and a ceiling per size,
    so it is never a strip across a wide chat and never a wall on a phone; the picture fills it, cropped about its middle.
    The chat header's card (card-c) follows the same size choice (card-c bs-<size>). */
-.id-card { --id-h: 240px; --id-ar: 3 / 1; --id-bmin: 140px; --id-bmax: 240px; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.id-card { --id-feather: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); --id-h: 240px; --id-ar: 3 / 1; --id-bmin: 140px; --id-bmax: 240px; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
 .id-card.card-s { --id-h: 160px; --id-ar: 4 / 1; --id-bmin: 100px; --id-bmax: 160px; }
 .id-card.card-l { --id-h: 360px; --id-ar: 9 / 4; --id-bmin: 200px; --id-bmax: 360px; }
 .id-card.card-c { --id-h: 96px; --id-bmin: 120px; --id-bmax: 200px; margin: 0; border: 0; border-radius: 0; background: none; }
 .id-card.card-c.bs-s { --id-ar: 4 / 1; --id-bmin: 96px; --id-bmax: 150px; }
 .id-card.card-c.bs-l { --id-ar: 9 / 4; --id-bmin: 150px; --id-bmax: 220px; }
-.id-banner { display: block; width: 100%; height: auto; aspect-ratio: var(--id-ar); min-height: var(--id-bmin); max-height: var(--id-bmax); object-fit: cover; object-position: 50% 50%; }
+/* #2086: the banner at its focus (--id-focus, set per card), never wider than 5 : 1 — its width is capped at five times its
+   size's tallest height, so the band shown everywhere is (picture aspect ÷ 5) of its height. Beyond that it is centred
+   over a blurred copy of itself. */
+.id-banner-box { position: relative; overflow: hidden; container: idbanner / inline-size; }
+/* #2089 review: and never narrower than 9 : 4 — its height never more than its box's width ÷ 2.25 (a size's floor yields
+   to it on a narrow column: a wide sidebar, the usage rail), so the promised safe area holds on every layout. */
+.id-banner { position: relative; display: block; width: 100%; max-width: calc(var(--id-bmax) * 5); margin-inline: auto; height: auto; aspect-ratio: var(--id-ar);
+  min-height: min(var(--id-bmin), calc(100cqw / 2.25)); max-height: min(var(--id-bmax), calc(100cqw / 2.25)); object-fit: cover; object-position: 50% var(--id-focus, 50%); }
+/* #2086: Edit profile's banner focus — the picture whole, the band every screen shows (dashed, outside it shaded) and a phone's. */
+.bf-wrap { position: relative; max-width: 440px; overflow: hidden; border-radius: var(--r-sm); }
+.bf-pic { display: block; width: 100%; height: auto; }
+.bf-band { position: absolute; pointer-events: none; box-sizing: border-box; }
+.bf-band span { position: absolute; right: 4px; top: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
+.bf-safe { border: 2px dashed #fff; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); }
+/* The phone's band over the shade, in its own colour (its label at its own top-left, never in the shaded part). */
+.bf-phone { z-index: 1; border: 2px solid #ffd54a; }
+.bf-phone span { right: auto; left: 8px; top: 5px; color: #ffd54a; }
+.bf-field input[type=range] { width: 100%; max-width: 440px; }
+.id-banner-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--id-focus, 50%); filter: blur(24px) saturate(0.75) brightness(0.7); transform: scale(1.4); opacity: .9; pointer-events: none; }
+/* Wider than the banner's cap (5 × the size's tallest height): its sides feather into the fill, so the sharp centre
+   leads without a seam. One threshold per size (a container query cannot read a custom property). */
+@container idbanner (min-width: 750px) { .id-card.card-c.bs-s .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 800px) { .id-card.card-s .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1000px) { .id-card.card-c:not(.bs-s):not(.bs-l) .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1100px) { .id-card.card-c.bs-l .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1200px) { .id-card:not(.card-s):not(.card-l):not(.card-c) .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1800px) { .id-card.card-l .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
 .id-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
 .id-portrait { display: block; flex-shrink: 0; height: var(--id-h); width: auto; max-width: min(calc(var(--id-h) * 0.75), 100%); object-fit: cover; border-radius: var(--r-sm); }
 .id-text { flex: 1; min-width: 0; }

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

@@ -13,6 +13,8 @@ register("card", {
     byAgent: "set by the agent",
     show: "Show card",
     hide: "Hide card",
+    bannerSafe: "Every screen",
+    bannerPhone: "Phone · M card",
   },
   "zh-TW": {
     label: "{0} 的身分卡",
@@ -24,5 +26,7 @@ register("card", {
     byAgent: "由 agent 設定",
     show: "顯示卡片",
     hide: "隱藏卡片",
+    bannerSafe: "所有螢幕",
+    bannerPhone: "手機 · 中卡片",
   },
 });

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/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).
@@ -149,8 +175,12 @@ export function IdentityCard({ name, card, compact = false, sizeControl = !compa
   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;
+  // #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)}>
-    ${pic("banner", "id-banner", "")}
+    ${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">
@@ -162,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/panel-view.js

@@ -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";
 
@@ -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

@@ -170,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",
@@ -375,6 +378,9 @@ register("view", {
   "cardBio": "簡介（最多 280 個字、3 次換行）",
   "cardPortrait": "肖像",
   "cardBanner": "橫幅",
+  "cardBannerFocus": "橫幅焦點",
+  "cardBannerFocusNote": "橫幅被裁切時保留在畫面中的部分：虛線框在所有螢幕與卡片大小都看得到；黃色框是手機上中卡片的範圍。",
+  "cardFocusFollow": "跟隨 agent 的設定",
   "cardRemove": "移除你的",
   "cardKeep": "保留你的",
   "clearCard": "清除卡片",

package/dist/view-api.d.ts

@@ -105,6 +105,17 @@ export declare function setPersonIdentityColour(dataDir: string, name: string, i
     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). */

package/dist/view-api.js

@@ -41,7 +41,7 @@ import Database from "better-sqlite3";
 import { getTmuxSession } from "./config.js";
 import { getTmuxSocketName } from "./paths.js";
 import { evaluateWebRequest } from "./web-auth.js";
-import { HumanCardStore, resolveCard } from "./web-card.js";
+import { bannerFocusOk, HumanCardStore, resolveCard } from "./web-card.js";
 import { IdentityColorStore } from "./web-identity-color.js";
 import { effectiveAppearanceLimits } from "./web-appearance-limits.js";
 const execFileP = promisify(execFile);
@@ -114,6 +114,14 @@ export function setPersonIdentityColour(dataDir, name, identity) {
     }
     return { ok: true };
 }
+/** #2086: the banner focus a person set for one instance (null: none; the agent's, else the centre, is drawn). */
+export function personBannerFocus(dataDir, name) {
+    return bannerFocusOk(cardStore({ dataDir }).get(name).banner_focus);
+}
+/** #2086: a person's banner focus — exactly POST /api/profile's card_banner_focus (the store's check; its own write). */
+export function setPersonBannerFocus(dataDir, name, focus) {
+    return cardStore({ dataDir }).setBannerFocus(name, focus);
+}
 /** Every person-picked colour, for a status read (never creates profiles.db or its table). */
 export function identityColors(dataDir) {
     return IdentityColorStore.all(dataDir, () => profileDb(dataDir));
@@ -474,6 +482,12 @@ export function handleViewRequest(req, res, url, ctx) {
                     cardText.tagline = body.card_tagline;
                 if (Object.hasOwn(body, "card_bio"))
                     cardText.bio = body.card_bio;
+                // #2086: the banner's focus (0 top … 100 bottom; null follows the agent's, else the centre) — checked first too.
+                const focus = Object.hasOwn(body, "card_banner_focus") ? body.card_banner_focus : undefined;
+                if (focus !== undefined && focus !== null && bannerFocusOk(focus) === null) {
+                    json(res, 400, { error: "card_banner_focus", detail: "a whole number from 0 (top) to 100 (bottom), or null" });
+                    return;
+                }
                 // #1958: the identity colour (a preset or #rrggbb; null or "" resets it) and where it shows (color_show: a list
                 // of name / bar / ring, [] for nowhere; null resets it) — checked before anything is written.
                 const identity = {};
@@ -488,7 +502,7 @@ export function handleViewRequest(req, res, url, ctx) {
                 }
                 const texts = cardText.tagline !== undefined || cardText.bio !== undefined;
                 const ids = identity.color !== undefined || identity.show !== undefined;
-                if (!texts && !ids && !set.length) {
+                if (!texts && !ids && focus === undefined && !set.length) {
                     json(res, 200, { ok: true });
                     return;
                 }
@@ -497,7 +511,7 @@ export function handleViewRequest(req, res, url, ctx) {
                 const db = profileDb(ctx.dataDir);
                 // Prism #2003 P2-2: the stores' tables are made before the transaction, so a rollback never leaves this cached
                 // handle believing in tables it does not have.
-                if (texts)
+                if (texts || focus !== undefined)
                     cardStore(ctx).get(name);
                 if (ids)
                     colorStore(ctx).get(name);
@@ -512,6 +526,13 @@ export function handleViewRequest(req, res, url, ctx) {
                                 throw rollback;
                             }
                         }
+                        if (focus !== undefined) {
+                            const fw = cardStore(ctx).setBannerFocus(name, focus);
+                            if (!fw.ok) {
+                                refused = fw;
+                                throw rollback;
+                            }
+                        }
                         if (ids) {
                             const w = colorStore(ctx).set(name, identity);
                             if (!w.ok) {
@@ -569,7 +590,9 @@ export function handleViewRequest(req, res, url, ctx) {
             // The limits in force ride along, so View's editor can fit a picture before it is sent (r4.1 Q3 (b)).
             const limits = effectiveAppearanceLimits(ctx.fleetConfig?.web?.appearance).limits;
             const slot = (l) => ({ max_width: l.maxWidth, max_height: l.maxHeight, max_bytes: l.maxBytes });
-            json(res, 200, { ...resolveCard(name, store.get(name), ctx.themeStore?.get(name).theme.card), limits: { portrait: slot(limits.portrait), banner: slot(limits.banner) } });
+            // #2089 review: the agent's own banner focus too (not only the one drawn), so Edit profile's "Follow the agent's" shows it.
+            const agentCard = ctx.themeStore?.get(name).theme.card, agentFocus = bannerFocusOk(agentCard?.bannerFocus);
+            json(res, 200, { ...resolveCard(name, store.get(name), agentCard), ...(agentFocus !== null ? { banner_focus_agent: agentFocus } : {}), limits: { portrait: slot(limits.portrait), banner: slot(limits.banner) } });
             return true;
         }
         if (method === "GET" && slot) {