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

package/dist/ui/shared/app-store.js

@@ -26,6 +26,20 @@ export function createStore(initial) {
 export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [], connections: null,
   hydration: "none", retryHydration: null });
 
+/**
+ * #1920 phase 3: this page is a guest's — the server says so on <body> (data-tier="guest"). A guest sees only its own
+ * agents' chats: no fleet, Needs you, View, Settings, filters, commands or new agent, and nothing it may not read is asked
+ * for (each would be refused). The server checks every request regardless; this only keeps the page to what works.
+ */
+export function guestPage() {
+  return typeof document !== "undefined" && !!document.body && document.body.dataset.tier === "guest";
+}
+/** Who a guest's page is signed in as: its web name and its platform (the server's, on <body>). */
+export function guestBadge() {
+  const d = typeof document !== "undefined" && document.body ? document.body.dataset : {};
+  return { name: d.guestName || "", platform: d.guestPlatform || "" };
+}
+
 /** Fold one status frame (stream or poll) into the store. */
 export function applyStatus(d) {
   if (!d || !Array.isArray(d.instances)) return;

package/dist/ui/shared/app.css

@@ -181,6 +181,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .side-foot > .session { position: static; }
 .side-foot .side-row span:not(.dot):not(.meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .side-foot .session .meta { display: none; }
+/* #1920 phase 3: a guest's page says who it is signed in as, beside its session. */
+.guest-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 6px var(--s-2); border-radius: var(--r-sm);
+  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); }
+.guest-chip .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Its own row: a name and a platform do not fit beside the session at sidebar widths. */
+.guest .side-foot { flex-wrap: wrap; }
+.guest .side-foot > .guest-chip { flex-basis: 100%; }
 .prefs-pop > summary { list-style: none; cursor: pointer; }
 .prefs-pop > summary::-webkit-details-marker { display: none; }
 .prefs.labelled { flex-direction: column; gap: var(--s-2); padding: 0; }
@@ -366,6 +373,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 +624,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;
 }
@@ -654,6 +668,17 @@ html.lb-open .scroller { overflow: hidden; }
 @media (max-width: 479px) { .btn-stop .stop-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
 .btn-stop { background: var(--bg); }
 .hint { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
+/* #1920 phase 3: Settings → Web → Guests. */
+.s-guests .guest-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px var(--s-3); max-height: 220px; overflow: auto;
+  padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.s-guests .guest-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.s-guests .guest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-guests .guest-row { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.s-guests .guest-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
+.s-guests .guest-narrow-edit { margin-top: var(--s-2); }
+.s-guests .guest-away { color: var(--text-3); }
+/* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
+.guest-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
 .pending-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
 .file-chip { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 4px var(--s-2); border-radius: var(--r-md); background: var(--bg); max-width: 320px; }
 .file-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
@@ -1334,13 +1359,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/app.js

@@ -12,7 +12,7 @@ import { Shell, handleKey, showDialog, closeDrawer, openDrawer, shellStore, retr
 import { installSwipe } from "./app-swipe.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
-import { appStore, applyStatus, applyActivity } from "./app-store.js";
+import { appStore, applyStatus, applyActivity, guestPage } from "./app-store.js";
 import { chatPath } from "./app-route.js";
 import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
@@ -29,6 +29,9 @@ initUsageRail();
 // session-only panel, nothing under /ui/ is ever imported or read (#1408 §3).
 const mode = boot.mode === "view-only" ? "view-only" : "full";
 appStore.set({ viewOnly: mode === "view-only" });
+// #1920 phase 3: a guest's page has its chats and nothing else — no panel, notifier, theme list or owner CSS a guest
+// would be refused.
+const guest = guestPage();
 
 // A failed load can be retried (the panel's Retry): each retry asks for a fresh URL, since a browser may keep a failed
 // module import cached under the first one. boot() runs once, whichever attempt succeeds.
@@ -80,19 +83,22 @@ if (mode === "full") {
   // a boot import that failed before the Outlet first asked would be retried at once, depending on timing.)
   let chatLoads = 0;
   panels.set("chat", { load: () => (chatLoads++ === 0 ? chatBoot : loadChat()).then((m) => m.ChatPanel) });
-  panels.set("fleet", { load: () => loadFleet().then((m) => m.FleetPanel) });
-  panels.set("settings", { load: () => loadSettings().then((m) => m.SettingsPanel) });
-  panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
-  // #1523 N2: one instance's Details (/ui/fleet/agent/<name>).
-  panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });
-  // #1218: one instance's Log (/ui/log/<name>).
-  panels.set("log", { load: () => loadLog().then((m) => m.LogPanel) });
-  // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
-  startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
+  if (!guest) {
+    panels.set("fleet", { load: () => loadFleet().then((m) => m.FleetPanel) });
+    panels.set("settings", { load: () => loadSettings().then((m) => m.SettingsPanel) });
+    panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
+    // #1523 N2: one instance's Details (/ui/fleet/agent/<name>).
+    panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });
+    // #1218: one instance's Log (/ui/log/<name>).
+    panels.set("log", { load: () => loadLog().then((m) => m.LogPanel) });
+    // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
+    startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
+  }
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
+  // A guest's page only reads them (prefsWritable is false there).
   bootPrefs();
-  // #1629: agents' themes, read when the status frame's themes_rev moves.
-  startThemes();
+  // #1629: agents' themes, read when the status frame's themes_rev moves (a guest's frames never carry it).
+  if (!guest) startThemes();
   onNewInstance = async () => {
     closeDrawer();                                 // on a phone the dialog opens from the drawer: the drawer goes first
     let m;
@@ -103,8 +109,9 @@ if (mode === "full") {
 } else appStore.set({ connection: "none" });
 
 startRouter(window);
-// #1629 r4 §3: the person's owner CSS (full app only; never on Settings, in safe mode or where this device turned it off).
-installOwnerCss();
+// #1629 r4 §3: the person's owner CSS (full app only; never on Settings, in safe mode or where this device turned it off;
+// never a guest's — owner CSS is an admin's).
+if (!guest) installOwnerCss();
 // /ui on its own opens the chat this browser had open last (an unknown name shows the panel's "not found").
 {
   const r = navStore.get().route;

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/instance-nav.js

@@ -9,7 +9,7 @@
 // Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { appStore, createStore, useStore } from "./app-store.js";
+import { appStore, createStore, guestPage, useStore } from "./app-store.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
 import { Skeleton } from "./ui-states.js";
@@ -391,10 +391,13 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const favs = nav.favorites.filter((n) => known.has(n));
   const favSet = new Set(favs);
   const canStar = !viewOnly && prefsWritable();
+  // #1920: a guest's list is to pick from — no reordering and no filters (one this device kept would hide rows with no
+  // way to clear it).
+  const guest = guestPage();
   const shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
   const shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
   if (favs.length) shownInsts.set(FAV_GROUP, favs);
-  const f = nav.filter;
+  const f = guest ? { q: "", status: [], cli: [] } : nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
   // it matches; a match is not repeated below. "N / M" still counts the filter's matches (the pinned row counts only
@@ -408,7 +411,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const flip = (key, value) => { const cur = new Set(navStore.get().filter[key]); if (cur.has(value)) cur.delete(value); else cur.add(value); setNavFilter({ [key]: [...cur] }); };
   // Drag to reorder: only the full list (a filtered subset would be ambiguous), groups among groups, instances within
   // their group.
-  const dragProps = (item) => shown.active ? {} : {
+  const dragProps = (item) => shown.active || guest ? {} : {
     draggable: true,
     onDragStart: (e) => { drag.current = item; e.currentTarget.classList.add("dragging"); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", item.name); } catch { /* Firefox needs data */ } },
     onDragEnd: (e) => { e.currentTarget.classList.remove("dragging"); drag.current = null; },
@@ -504,7 +507,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     })}
     ${loaded && shown.active && !shown.groups.length ? html`<p class="side-empty">${tn("filterNone")}</p>` : null}
     </div>
-    <div class="v-filter">
+    ${guest ? null : html`<div class="v-filter">
       <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
         <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck=${false} placeholder=${tn("filterPh")} value=${f.q}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
@@ -520,7 +523,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
         </div>
         <p class="note nav-shown" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
       </div>
-    </div>
+    </div>`}
   </div>`;
 }
 

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) {