@songsid/agend 2.2.1 → 2.3.0-beta.10

package/dist/ui/shared/owner-css.js

@@ -0,0 +1,221 @@
+// #1629 r4 §3: owner CSS on this page — the signed-in person's own stylesheet, linked last in <head> so it wins over
+// app.css. It is a same-origin <link> (style-src 'self' admits it): no inline CSS, no nonce, no style attribute and no
+// constructed stylesheet. Never linked:
+// - on Settings (removed while it is open, put back on leaving: the way out is always rendered stock);
+// - on the public link, for the anonymous View reader, and wherever the server named no version (data-owner-css);
+// - on a device that turned it off (agend_owner_css_off), and for a load with ?safe=1 (safe mode).
+// Sign-in, resend-code and setup are other pages: they never load this module.
+import { navStore } from "./app-nav.js";
+import { appStore, createStore, useStore } from "./app-store.js";
+import { html, useEffect, useState } from "./app-html.js";
+import { t } from "./app-i18n.js";
+
+export const OWNER_CSS_OFF_KEY = "agend_owner_css_off";
+const LINK_ID = "owner-css";
+
+// Read when this module loads, so it holds for whatever asks first (themes start before installOwnerCss runs).
+const readSafe = () => { try { return new URLSearchParams(location.search).get("safe") === "1"; } catch { return false; } };
+let safe = readSafe();
+let active = null;
+let installed = false;
+// B2: admission uses positive observed lifecycle, never active===null as proof of absence.
+const lifeStore = createStore(Object.freeze({ state: "unknown", generation: 0, reason: "unverified" }));
+export const ownerCssLifecycle = Object.freeze({ get: lifeStore.get, subscribe: lifeStore.subscribe });
+let lifeGeneration = 0, linkGeneration = 0, ownedLink = null, linkState = "unknown", sourceState = "unknown";
+function life(state, reason) { lifeStore.set(() => Object.freeze({ state, generation: ++lifeGeneration, reason })); }
+
+
+/** This load is in safe mode (?safe=1): no owner CSS — and, as they come, no widgets or effects and default themes. */
+export function safeMode() { return safe; }
+
+/** This device turned owner CSS off (a per-device switch: not synced, so a broken phone layout is fixed on the phone). */
+export function ownerCssOffHere() {
+  try { return localStorage.getItem(OWNER_CSS_OFF_KEY) === "1"; } catch { return false; }
+}
+export function setOwnerCssOffHere(off) {
+  try { if (off) localStorage.setItem(OWNER_CSS_OFF_KEY, "1"); else localStorage.removeItem(OWNER_CSS_OFF_KEY); } catch { /* this page only */ }
+  sync();
+}
+
+/** The person's version in force, as this page knows it (null: none). */
+export function ownerCssActive() { return active; }
+
+function eligiblePage() {
+  const b = document.body && document.body.dataset;
+  return !!b && b.mode === "full" && b.publicLink !== "1";
+}
+function wanted() {
+  if (!eligiblePage() || safe || !active || ownerCssOffHere()) return false;
+  const r = navStore.get().route;
+  return !(r && r.panel === "settings");
+}
+
+/** Revoke admission before a CSS/route mutation; a missing element alone is never an off verdict. */
+function sync() {
+  life("unknown", "changing");
+  const el = document.getElementById(LINK_ID);
+  if (!wanted()) {
+    ++linkGeneration;
+    if (el) el.remove();
+    if (ownedLink && ownedLink !== el) ownedLink.remove();
+    ownedLink = null; linkState = "unknown";
+    const absent = document.querySelectorAll(`#${LINK_ID}`).length === 0;
+    const route = navStore.get().route;
+    const disabled = !eligiblePage() || safe || ownerCssOffHere() || route?.panel === "settings";
+    life(absent && (disabled || sourceState === "off") ? "off" : "unknown", absent ? disabled ? "disabled_here" : sourceState === "off" ? "host_off" : "unverified" : "removal_failed");
+    return;
+  }
+  const href = `/ui/owner-css.css?v=${encodeURIComponent(active)}`;
+  if (el && el !== ownedLink) { life("unknown", "unowned_link"); return; }
+  if (ownedLink && el === ownedLink && el.getAttribute("href") === href) { life(linkState, linkState === "on" ? "loaded" : linkState === "loading" ? "loading" : "load_failed"); return; }
+  // A new owned element fences late events from the previous version, including href changes.
+  const epoch = ++linkGeneration, sha = active;
+  if (ownedLink) ownedLink.remove();
+  const link = document.createElement("link"); ownedLink = link; linkState = "loading";
+  link.setAttribute("rel", "stylesheet"); link.setAttribute("id", LINK_ID); link.setAttribute("href", href);
+  const current = () => ownedLink === link && epoch === linkGeneration && active === sha && wanted()
+    && link.isConnected === true && document.getElementById(LINK_ID) === link && link.getAttribute("href") === href;
+  link.addEventListener("load", () => {
+    if (!current()) return;
+    let valid = false;
+    try { valid = link.disabled !== true && !!link.sheet && link.sheet.ownerNode === link && link.sheet.disabled !== true && link.sheet.href === new URL(href, location.href).href; } catch { /* unknown stylesheet */ }
+    linkState = valid ? "on" : "unknown"; life(linkState, valid ? "loaded" : "load_unverified");
+  });
+  link.addEventListener("error", () => { if (!current()) return; linkState = "unknown"; life("unknown", "load_failed"); });
+  life("loading", "loading");
+  document.head.appendChild(link); // last in head; no style text, inline attribute or constructed stylesheet
+}
+
+// #1883 r2: every change this page makes, and every read it starts, moves `gen`. A host answer is taken only if nothing
+// newer happened after it was asked for — an older /state answer never overwrites a newer read, save, keep or revert.
+let gen = 0;
+const local = () => ++gen;
+
+/** This page saved, restored or turned off a version: show it at once (null: none). */
+export function setOwnerCssActive(sha) {
+  local();
+  showActive(sha, sha === null ? "off" : "on");
+}
+function showActive(sha, evidence = "unknown") {
+  active = typeof sha === "string" && /^[0-9a-f]{32}$/.test(sha) ? sha : null;
+  sourceState = evidence === "off" && sha === null ? "off" : evidence === "on" && active ? "on" : "unknown";
+  sync();
+}
+
+// ── Keep or revert (r4 §3): a saved version is on trial. "Keep" within 15 s keeps it; anything else reverts it — the
+// page that saved it at 15 s, and the host at its own deadline (a closed tab, or CSS that hid this bar). The bar is the
+// shell's, on every page and every device of the person's, so they can look at the result before answering.
+// A trial has an id of its own (the same text saved twice is two trials): keep and revert name it, and the host acts
+// only while that trial still is the one on trial — one kept, reverted or replaced meanwhile, anywhere, stays.
+export const KEEP_SECONDS = 15;
+/** The host's whole trial budget (20 s) and a second: the longest a page that did not save a trial waits to ask again. */
+const HOST_TRIAL_SECONDS = 21;
+/** { id, sha, previous, deadline (performance.now ms), local } while a version is on trial, else null. */
+export const ownerCssTrial = createStore(null);
+let trialTimer = null;
+// set(fn) replaces the state; set(object) would merge into it (createStore), and null merges as nothing.
+const dropTrial = () => { if (trialTimer) clearTimeout(trialTimer); trialTimer = null; ownerCssTrial.set(() => null); };
+
+async function post(path, body) {
+  const res = await fetch(path, { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+  let json = null;
+  try { json = await res.json(); } catch { /* none */ }
+  return { ok: res.ok, status: res.status, body: json };
+}
+
+/**
+ * Trial `id` (of version `sha`) is in force: show it, and ask. `local`: this page saved it — at the end of `seconds` it
+ * reverts it (by its id). Otherwise (another device's trial, or this page loaded during one) `seconds` is the host's
+ * own remaining time (never the device's clock), and at its end the page asks the host again, which has settled it.
+ */
+export function startOwnerCssTrial(id, sha, previous, seconds = KEEP_SECONDS, isLocal = true) {
+  local();
+  if (trialTimer) clearTimeout(trialTimer);
+  showActive(sha, "on");
+  const s = Math.max(0, Math.min(isLocal ? KEEP_SECONDS : HOST_TRIAL_SECONDS, Number.isFinite(seconds) ? seconds : 0));
+  const trial = { id, sha, previous: previous || null, deadline: performance.now() + s * 1000, local: isLocal };
+  ownerCssTrial.set(() => trial);
+  trialTimer = setTimeout(() => {
+    if (ownerCssTrial.get() !== trial) return;
+    if (isLocal) revertOwnerCss(); else { dropTrial(); reread(); }
+  }, s * 1000);
+}
+export async function keepOwnerCss() {
+  const trial = ownerCssTrial.get();
+  if (!trial) return false;
+  local();
+  dropTrial();
+  const r = await post("/ui/owner-css/keep", { trial: trial.id });
+  if (!r.ok) { await reread(); return false; }                        // too late: the host reverted it — show what is in force
+  return true;
+}
+export async function revertOwnerCss() {
+  const trial = ownerCssTrial.get();
+  if (!trial) return;
+  local();
+  dropTrial();
+  showActive(trial.previous);                                          // at once; the host's answer below is what stays
+  await post("/ui/owner-css/revert", { trial: trial.id }).catch(() => null);
+  await reread();
+}
+
+/** The shell's bar: "Keep this CSS?", the seconds left, Keep and Revert. */
+export function OwnerCssKeepBar() {
+  const trial = useStore(ownerCssTrial);
+  const [, tick] = useState(0);
+  useEffect(() => {
+    if (!trial) return undefined;
+    const id = setInterval(() => tick((n) => n + 1), 500);
+    return () => clearInterval(id);
+  }, [trial]);
+  if (!trial) return null;
+  const left = Math.max(0, Math.ceil((trial.deadline - performance.now()) / 1000));
+  return html`<div class="oc-keep" role="alertdialog" aria-live="assertive" aria-label=${t("app.ownerCssKeep")} data-trust="keep">
+    <span class="oc-keep-text"><span class="oc-keep-q">${t("app.ownerCssKeep")}</span><span class="oc-keep-left">${t("app.ownerCssKeepLeft", left)}</span></span>
+    <button type="button" class="btn btn-primary btn-sm" onClick=${() => { keepOwnerCss(); }}>${t("app.ownerCssKeepYes")}</button>
+    <button type="button" class="btn btn-sm" onClick=${() => { revertOwnerCss(); }}>${t("app.ownerCssKeepNo")}</button>
+  </div>`;
+}
+
+/** Ask the host which version is in force (another device changed it, or a trial ended), and whether one is on trial. */
+async function reread() {
+  if (!eligiblePage()) return;
+  const mine = local();
+  sourceState = "unknown"; life("unknown", "refreshing");
+  try {
+    const res = await fetch("/ui/owner-css/state", { credentials: "same-origin" });
+    if (!res.ok) return;
+    const body = await res.json();
+    if (body && mine === gen) reconcile(body);                         // nothing newer happened since this was asked
+  } catch { /* the next change tries again */ }
+}
+/** Match the host: the version in force, and whether one is on trial (another device's included) — or none any more. */
+function reconcile(state) {
+  const pending = state.pending && state.pending.sha === state.active && typeof state.pending.id === "string" ? state.pending : null;
+  const trial = ownerCssTrial.get();
+  if (!pending) { if (trial) dropTrial(); showActive(state.active, state.effectState); return; }
+  if (trial && trial.id === pending.id) return;                        // already asking about this one
+  // The host's own remaining time and a second (never this device's clock): it has settled the trial by then.
+  const remaining = typeof pending.remaining_ms === "number" && Number.isFinite(pending.remaining_ms) ? pending.remaining_ms : 0;
+  startOwnerCssTrial(pending.id, pending.sha, pending.previous, remaining / 1000 + 1, false);
+}
+
+/** Once per page load, before the first panel paints. */
+export function installOwnerCss() {
+  if (installed) return;
+  installed = true;
+  safe = readSafe();
+  const b = document.body && document.body.dataset;
+  showActive(b?.ownerCss ?? null, b?.ownerCssState);
+  navStore.subscribe(sync);
+  // What the host says now: a trial in progress (this page reloaded during one, or another device's) shows the bar;
+  // one the host has settled since the page was served shows its outcome.
+  if (eligiblePage()) reread();
+  let rev = appStore.get().prefsRev;
+  appStore.subscribe((s) => {
+    if (s.prefsRev === rev) return;
+    const first = rev === null || rev === undefined;
+    rev = s.prefsRev;
+    if (!first) reread();
+  });
+}

package/dist/ui/shared/owner-effect-prefs.js

@@ -0,0 +1,117 @@
+// #1629: host-authoritative personal choices. No local cache, migration, frame, code fetch or automatic resend.
+import { createStore, appStore } from "./app-store.js";
+import { OWNER_EFFECT_PREF_KEYS } from "./app-prefs.js";
+import { checkEffectOwnerSlots } from "./effect-runtime-loader.js";
+const KEYS = OWNER_EFFECT_PREF_KEYS, ID = /^[a-f0-9]{32}$/, EPOCH = /^[a-f0-9]{16}$/;
+const plain = x => !!x && typeof x === "object" && Object.getPrototypeOf(x) === Object.prototype;
+const own = (x, k) => Object.hasOwn(x, k);
+const unknownSlots = () => Object.fromEntries(KEYS.map(k => [k, { status: "unknown", id: null }]));
+const publicPage = () => typeof document === "undefined" || document.body?.dataset.publicLink === "1" || document.body?.dataset.mode === "view-only";
+function bootScope() {
+  try {
+    const x = JSON.parse(document.documentElement.getAttribute("data-prefs") || "null");
+    return plain(x) && ["person", "operator"].includes(x.ownerScope) && typeof x.ownerEpoch === "string" && EPOCH.test(x.ownerEpoch)
+      ? Object.freeze({ scope: x.ownerScope, epoch: x.ownerEpoch }) : null;
+  } catch { return null; }
+}
+const owner = bootScope();
+export const ownerEffectsStore = createStore({ scope: owner?.scope ?? "none", status: "unknown", revoked: false, busy: false, slots: unknownSlots(), error: null });
+let watchers = 0, generation = 0, active = null, queuedRead = false, unsubscribe = null, rev = -1, seen = null, failedAt = -Infinity;
+const clock = () => { try { const n = performance.now(); return Number.isFinite(n) && n >= 0 ? n : null; } catch { return null; } };
+const eligible = () => !!owner && watchers > 0 && !publicPage() && !ownerEffectsStore.get().revoked;
+const current = op => eligible() && op.generation === generation && active === op;
+function revoke() {
+  queuedRead = false;
+  ownerEffectsStore.set({ status: "unknown", revoked: true, slots: unknownSlots(), error: "sign_in_changed" });
+}
+function unknown(error) { const n = clock(); failedAt = n === null ? Infinity : n; ownerEffectsStore.set({ status: "unknown", slots: unknownSlots(), error }); }
+function claim() {
+  if (!eligible() || active) return null;
+  const controller = new AbortController(), op = { controller, generation };
+  active = op; ownerEffectsStore.set({ busy: true, error: null }); return op;
+}
+async function call(op, path, init = {}) {
+  const started = clock();
+  if (started === null || op.controller.signal.aborted) return { ok: false, status: 0, body: null };
+  const timer = setTimeout(() => op.controller.abort(), 10000);
+  try {
+    const res = await fetch(path, { credentials: "same-origin", ...init, signal: op.controller.signal });
+    let body = null; try { body = await res.json(); } catch { /* unknown */ }
+    const ended = clock();
+    if (op.controller.signal.aborted || ended === null || ended < started || ended - started >= 10000) return { ok: false, status: 0, body: null };
+    return { ok: res.ok, status: res.status, body };
+  } catch { return { ok: false, status: 0, body: null }; }
+  finally { clearTimeout(timer); }
+}
+function finish(op) {
+  if (active !== op) return;
+  active = null; ownerEffectsStore.set({ busy: false });
+  const again = queuedRead; queuedRead = false;
+  const n = clock();
+  if (again && eligible() && n !== null && n - failedAt >= 5000) refreshOwnerEffects();
+}
+/** An owner response is closed and bounded. Unavailable means a stored id, not an empty slot or private manifest. */
+export function checkOwnerSlots(body) { return checkEffectOwnerSlots(body); }
+
+async function read(op) {
+  const r = await call(op, `/ui/effects/owner?ownerEpoch=${owner.epoch}`);
+  if (!current(op)) return false;
+  if ([401, 403, 409].includes(r.status)) { revoke(); return false; }
+  const data = r.ok ? checkOwnerSlots(r.body) : null;
+  if (!data) { unknown("unreadable"); return false; }
+  if (data.rev < rev) { unknown("stale"); return false; }
+  rev = data.rev; failedAt = -Infinity;
+  ownerEffectsStore.set({ status: "known", slots: data.slots, error: null }); return true;
+}
+export async function refreshOwnerEffects() {
+  if (!eligible()) return false;
+  if (active) { queuedRead = true; return false; }
+  const op = claim(); if (!op) return false;
+  try { return await read(op); } finally { finish(op); }
+}
+/** One physical operation survives until settlement, including after abort. At most one coalesced read follows. */
+export function watchOwnerEffects() {
+  watchers++;
+  if (watchers === 1 && eligible()) {
+    const check = () => {
+      const next = appStore.get().prefsRev, n = clock();
+      if (next !== seen || ownerEffectsStore.get().status === "unknown" && n !== null && n - failedAt >= 5000) { seen = next; refreshOwnerEffects(); }
+    };
+    unsubscribe = appStore.subscribe(check); check();
+  }
+  let ended = false;
+  return () => {
+    if (ended) return; ended = true;
+    if (--watchers > 0) return;
+    generation++; queuedRead = false; unsubscribe?.(); unsubscribe = null; active?.controller.abort();
+    ownerEffectsStore.set({ status: "unknown", slots: unknownSlots(), error: null });
+  };
+}
+export async function saveOwnerEffects(set) {
+  if (!plain(set) || !Object.keys(set).length || Object.keys(set).some(k => !KEYS.includes(k) || set[k] !== null && (typeof set[k] !== "string" || !ID.test(set[k])))) return { ok: false, error: "invalid" };
+  // Snapshot both data and immutable boot context before the first wait. No optimistic runtime selection.
+  const values = { ...set }, op = claim(); if (!op) return { ok: false, error: "busy_or_unavailable" };
+  let saved = false;
+  try {
+    const r = await call(op, "/ui/prefs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ set: values, ownerEpoch: owner.epoch }) });
+    if (!current(op)) return { ok: false, error: "superseded" };
+    if ([401, 403, 409].includes(r.status)) { revoke(); return { ok: false, error: "sign_in_changed" }; }
+    if (r.ok && plain(r.body) && (r.body.ownerEpoch !== owner.epoch || r.body.ownerScope !== owner.scope)) { revoke(); return { ok: false, error: "sign_in_changed" }; }
+    if (!r.ok || !plain(r.body) || !plain(r.body.values) || !Number.isSafeInteger(r.body.rev) || r.body.rev < 0 || r.body.rev < rev || r.body.unreadable) { unknown("not_saved"); return { ok: false, error: "not_saved" }; }
+    if (!Object.entries(values).every(([k, v]) => v === null ? !own(r.body.values, k) : r.body.values[k] === v)) { unknown("not_saved"); return { ok: false, error: "not_saved" }; }
+    saved = true;
+    const refreshed = await read(op); return { ok: refreshed, saved, error: refreshed ? null : "refresh_failed" };
+  } finally { finish(op); }
+}
+/** Runtime adapter asks only for the exact, currently known selection; a cursor can never request Worker source. */
+export function ownerEffectUrl(key, id, kind = "resource") {
+  const row = ownerEffectsStore.get().slots[key];
+  if (!eligible() || ownerEffectsStore.get().status !== "known" || !KEYS.includes(key) || !row || row.status !== "available" || row.id !== id || !["resource", "poster", "cursor"].includes(kind) || kind === "resource" && key === "fx.cursor") return null;
+  const path = kind === "resource" ? `/ui/effects/resource/${id}` : `/ui/effects/image/${id}/${kind}.png`;
+  return `${path}?slot=${encodeURIComponent(key)}&ownerEpoch=${owner.epoch}`;
+}
+export function markOwnerEffectUnavailable(key, id) {
+  const s = ownerEffectsStore.get(), row = s.slots[key];
+  if (!eligible() || s.status !== "known" || !KEYS.includes(key) || row?.id !== id) return;
+  ownerEffectsStore.set({ slots: { ...s.slots, [key]: { status: "unavailable", id } } });
+}

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,6 +27,9 @@ 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 { BannerFocusPreview, checkCard, fitPicture, IdentityCard, useBannerPreview, useCard } from "./identity-card.js";
+import { confirmDialog } from "./ui-confirm.js";
+import { openColorDialog } from "./identity-color.js";
 
 /** view.* text with named values: tn("paneFailed", { name, status }). */
 function tn(key, values = {}) {
@@ -180,15 +183,15 @@ export function ViewPanel({ route, navKey }) {
     <button type="button" class="icon-btn" onClick=${() => setDialog("help")} aria-label=${tn("helpButton")} title=${tn("helpButton")}><${Icon} name="info" /></button>`;
 
   let body;
-  if (v.error && !v.roster.length) body = html`<div class="panel-body center"><${ErrorState} message=${tn("rosterFailedShort")} onRetry=${() => navigate(location.pathname, { replace: true })} /></div>`;
-  else if (!v.loaded) body = html`<div class="panel-body"><${Skeleton} lines=${6} /></div>`;
-  else if (!v.roster.length) body = html`<div class="panel-body center"><${Empty} icon="view" title=${tn("noInstances")} /></div>`;
-  else if (!name) body = html`<div class="panel-body"><${Skeleton} lines=${6} /></div>`;
-  else if (!it) body = html`<div class="panel-body center"><${Empty} icon="alert" title=${tn("notFound", { name })} hint=${tn("notFoundHint")} /></div>`;
+  if (v.error && !v.roster.length) body = html`<div data-trust="panel-content" class="panel-body center"><${ErrorState} message=${tn("rosterFailedShort")} onRetry=${() => navigate(location.pathname, { replace: true })} /></div>`;
+  else if (!v.loaded) body = html`<div data-trust="panel-content" class="panel-body"><${Skeleton} lines=${6} /></div>`;
+  else if (!v.roster.length) body = html`<div data-trust="panel-content" class="panel-body center"><${Empty} icon="view" title=${tn("noInstances")} /></div>`;
+  else if (!name) body = html`<div data-trust="panel-content" class="panel-body"><${Skeleton} lines=${6} /></div>`;
+  else if (!it) body = html`<div data-trust="panel-content" class="panel-body center"><${Empty} icon="alert" title=${tn("notFound", { name })} hint=${tn("notFoundHint")} /></div>`;
   else body = html`<${Terminal} key=${name} name=${name} lease=${lease} density=${density} />
     <${Card} it=${it} viewOnly=${viewOnly} onEdit=${() => setDialog("edit")} />`;
 
-  return html`<div class="panel p-view">
+  return html`<div data-effect-panel="view" class="panel p-view">
     <${PanelHeader} title=${it ? (it.display_name || it.instance_name) : tn("title")}
       sub=${it ? html`<span class="status"><span class=${`dot ${it.status === "running" ? "ok" : it.status === "crashed" ? "bad" : "off"}`} aria-hidden="true"></span>${tn(STATUS_KEYS[it.status] || "statusUnknown")}</span>` : null}
       nav=${it && !viewOnly ? html`<${InstanceSwitch} name=${name} current="view" />` : null}>${actions}</${PanelHeader}>
@@ -266,7 +269,7 @@ function Terminal({ name, lease, density }) {
       lease.hold(() => ro.disconnect());
     }
   }, [lease, name]);
-  return html`<div class="v-term" ref=${term}>${problem ? html`<p class="v-term-note" role="status">${problem}</p>` : null}<pre ref=${pre} class="v-pre"></pre></div>`;
+  return html`<div data-trust="panel-content" class="v-term" ref=${term}>${problem ? html`<p class="v-term-note" role="status">${problem}</p>` : null}<pre ref=${pre} class="v-pre"></pre></div>`;
 }
 
 // The advance of one monospace cell as a fraction of font-size, measured once on this page.
@@ -296,11 +299,13 @@ function Card({ it, viewOnly, onEdit }) {
   const initial = (it.display_name || it.instance_name || "?").trim().charAt(0) || "?";
   const ctx = it.context_pct != null ? ` · ctx ${Math.round(it.context_pct)}%` : "";
   const toggle = () => { const next = !open; setOpen(next); store("agend_view_card_expanded", next ? "1" : "0"); };
-  return html`<section class=${`v-card${open ? " open" : ""}`} aria-label=${it.display_name || it.instance_name}>
+  // #1629 r4 §1: the identity card, above the profile row while it is expanded.
+  const card = useCard(it.instance_name, it.card_v);
+  return html`${open && card ? html`<div data-trust="panel-content" class="v-id"><${IdentityCard} name=${it.instance_name} card=${card} /></div>` : null}<section data-trust="panel-content" class=${`v-card${open ? " open" : ""}`} aria-label=${it.display_name || it.instance_name}>
     <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")}>
@@ -320,6 +325,38 @@ function EditProfile({ it, onClose }) {
   // #1630 follow-up: the uploaded picture is removed on Save (Cancel keeps it); a newly picked file wins over removing.
   const [removePic, setRemovePic] = useState(false);
   const file = useRef(null);
+  // #1629 r4 §1 / r4.1: the identity card's own fields — this person's (theirs win over the agent's, field by field).
+  // Read when the dialog opens: what is drawn now, whose each field is, and the upload limits in force.
+  const [card, setCard] = useState(null);
+  const [cardText, setCardText] = useState({ tagline: "", bio: "" });
+  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);
+    // a failed read lets them be edited, starting empty.
+    const none = { mine: { tagline: null, bio: null, portrait: null, banner: null }, limits: null };
+    lease.fetch(`/api/card/${encodeURIComponent(it.instance_name)}`).then((r) => (r.ok ? r.json() : null)).then((body) => {
+      if (!live || !lease.current()) return;
+      if (!body) { setCard(none); return; }
+      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; };
+  }, []);
   async function save() {
     if (busy) return;
     setBusy(true); setMsg(null);
@@ -329,7 +366,28 @@ function EditProfile({ it, onClose }) {
     const draft = { display_name: f.display, role: f.role, description: f.desc };
     const picked = file.current && file.current.files && file.current.files[0];
     const removing = removePic;
+    // The card: Clear card wins over everything else in it; otherwise only the fields that changed are sent.
+    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.
+      if (!clearing) for (const slot of ["portrait", "banner"]) {
+        const chosen = pics[slot].current && pics[slot].current.files && pics[slot].current.files[0];
+        if (chosen) {
+          const limit = card && card.limits && card.limits[slot];
+          let blob = chosen;
+          if (limit) {
+            try { blob = await fitPicture(chosen, limit, (w, h, nw, nh) => confirmDialog({ message: tn("resizeAsk", { w, h, nw, nh }), confirmLabel: tn("resizeGo") })); }
+            catch { throw new Error(tn("pictureTooLarge")); }
+          }
+          if (!lease.current()) return;
+          if (!blob) { setBusy(false); return; }
+          cardPics[slot] = blob;
+        } else if (removeCard[slot]) cardPics[slot] = "remove";
+      }
       const r = await fetch(`/api/profile/${name}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(draft) });
       if (!lease.current()) return;
       if (r.status === 401) throw new Error(tn("signInToSave"));
@@ -342,6 +400,18 @@ function EditProfile({ it, onClose }) {
         if (!dr.ok) { const e = await dr.json().catch(() => ({})); throw new Error(tn("avatarRemoveFailed", { error: e.error || dr.status })); }
       }
       if (!lease.current()) return;
+      if (clearing) {
+        const cr = await fetch(`/api/card/${name}`, { method: "DELETE" });
+        if (!cr.ok) { const e = await cr.json().catch(() => ({})); throw new Error(tn("cardFailed", { error: e.error || cr.status })); }
+      }
+      for (const [slot, what] of Object.entries(cardPics)) {
+        if (!lease.current()) return;
+        const pr = what === "remove"
+          ? await fetch(`/api/card/${name}/${slot}`, { method: "DELETE" })
+          : await fetch(`/api/card/${name}/${slot}`, { method: "POST", headers: { "Content-Type": what.type || "application/octet-stream" }, body: what });
+        if (!pr.ok) { const e = await pr.json().catch(() => ({})); throw new Error(tn("cardFailed", { error: e.detail || e.error || pr.status })); }
+      }
+      if (!lease.current()) return;
       setBusy(false);
       onClose();
     } catch (e) { if (lease.current()) { setBusy(false); setMsg(e.message); } }
@@ -356,6 +426,29 @@ function EditProfile({ it, onClose }) {
       <label class="field"><span>${tn("avatar")}</span><input ref=${file} type="file" accept="image/png,image/jpeg,image/gif,image/webp" /></label>
       ${it.has_avatar ? html`<div class="field-row"><button type="button" class="btn btn-sm" aria-pressed=${removePic ? "true" : "false"}
         onClick=${() => setRemovePic(!removePic)}>${tn(removePic ? "keepPicture" : "removePicture")}</button>${removePic ? html`<span class="muted">${tn("removePictureNote")}</span>` : null}</div>` : null}
+      <div class="field-row"><button type="button" class="btn btn-sm" onClick=${() => openColorDialog(it.instance_name, (appStore.get().instances || []).find((i) => i.name === it.instance_name))}>${t("color.menu")}</button></div>
+      <h3 class="form-sub">${tn("cardSection")}</h3>
+      <p class="note">${tn("cardLead")}</p>
+      <fieldset class="form" disabled=${clearCard || !card} aria-busy=${card ? "false" : "true"}>
+        <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"
+            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>
     </fieldset></form>
     ${msg ? html`<p class="err" role="alert">${msg}${msg === tn("signInToSave") ? html` <a class="link" href=${signInHref()}>${t("app.signIn")}</a>` : null}</p>` : null}
   </${Dialog}>`;

package/dist/ui/shared/signin.js

@@ -15,6 +15,7 @@
       label: "One-time code", submit: "Sign in", working: "Signing in…",
       hint: "No code? Send /web in General, then press a sign-in button to get one.",
       nobot: "No chat bot?", nobot_body: "Ask the operator to run agend web --code on the AgEnD computer.",
+      safe: "Page looks wrong after signing in?", safe_body: "Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Web appearance.",
       refused: "The code is invalid or no longer works. Send /web in General, then press a sign-in button for a new code.",
       unconfirmed: "Sign-in could not be confirmed. Get a new code and try again; if it keeps failing, contact the operator.",
       paused: "Too many wrong codes — sign-in is paused for a few minutes.",
@@ -28,6 +29,7 @@
       label: "一次性登入碼", submit: "登入", working: "登入中…",
       hint: "沒收到？在 General 傳 /web，再按登入按鈕取碼。",
       nobot: "沒有聊天 bot？", nobot_body: "請管理員在 AgEnD 電腦執行 agend web --code。",
+      safe: "登入後畫面不對勁？", safe_body: "可能是你的自訂 CSS 把東西藏起來了。在網址最後加上 ?safe=1，就會不套用它地載入；再到「設定 → 網頁外觀」修正或關閉。",
       refused: "登入碼無效或已失效。請在 General 傳 /web，再按登入按鈕取新碼。",
       unconfirmed: "登入暫時無法確認。請重新取碼再試；若仍失敗，請聯絡管理員。",
       paused: "錯誤次數過多，登入暫停幾分鐘。",

package/dist/ui/shared/tokens.css

@@ -9,7 +9,12 @@
  * surfaces it is used on, and focus rings and strong borders meet 3:1 (tests/web-tokens-1408.test.ts).
  *
  * Inter is bundled (/assets/inter.woff2, SIL OFL 1.1 — see fonts/README.md): the CSP allows fonts from 'self' only,
- * and nothing is loaded from another site. Chinese falls back to the system's CJK fonts, in the order below. */
+ * and nothing is loaded from another site. Chinese falls back to the system's CJK fonts, in the order below.
+ *
+ * Emoji (#1918 follow-up, the user's tofu boxes): every stack ends with the platforms' colour emoji fonts and the
+ * `emoji` generic (--font-emoji), so an emoji the text fonts lack is drawn by Windows' Segoe UI Emoji, macOS's Apple
+ * Color Emoji or Linux's Noto Color Emoji rather than as a box — for the stock stacks and each theme font
+ * (app.css: .th-font-system, .th-font-mono). A browser tries the families in order for each character. */
 
 @font-face {
   font-family: "Inter";
@@ -22,8 +27,9 @@
 
 :root {
   /* ── Type ── */
-  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji;
+  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, var(--font-emoji);
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-emoji);
   --fs-xs: 12px;  --lh-xs: 16px;
   --fs-sm: 13px;  --lh-sm: 18px;
   --fs-md: 15px;  --lh-md: 24px;   /* message text */

package/dist/ui/shared/ui-dialog.js

@@ -35,7 +35,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     d.addEventListener("click", onClick);
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
-  return html`<dialog ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}`} aria-label=${label || title}>
+  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}`} aria-label=${label || title}>
     <div class="dlg-box">
       <div class="dlg-head"><h2 class="dlg-title">${title}</h2>
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>

package/dist/ui/shared/ui-icons.js

@@ -37,6 +37,7 @@ const P = {
   type: () => html`<path d="M4 7V5h16v2M9 19h6M12 5v14"/>`,
   chart: () => html`<path d="M3 20h18M6 16v-4M11 16V8M16 16v-6"/>`,
   up: () => html`<path d="M12 19V5M5 12l7-7 7 7"/>`,
+  sort: () => html`<path d="M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4"/>`,   // #2179: the sidebar's sort
   star: () => html`<path d="M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95L12 2.5z"/>`,
   eye: () => html`<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
   check: () => html`<path d="M20 6L9 17l-5-5"/>`,
@@ -54,6 +55,8 @@ const P = {
   panel: () => html`<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M14 4v16"/>`,
   back: () => html`<path d="M19 12H5M12 19l-7-7 7-7"/>`,
   forward: () => html`<path d="M5 12h14M12 5l7 7-7 7"/>`,
+  // #1629: Settings → Appearance.
+  palette: () => html`<path d="M12 3a9 9 0 1 0 0 18c1.1 0 1.7-.8 1.7-1.7 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.8-1.7 1.7-1.7H16a5 5 0 0 0 5-5c0-4-4-7.2-9-7.2z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="10.5" cy="7" r="1"/><circle cx="15" cy="7.5" r="1"/>`,
   book: () => html`<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"/><path d="M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5"/>`,
   external: () => html`<path d="M14 4h6v6M20 4l-9 9"/><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>`,
 };

package/dist/ui/shared/ui-menu.js

@@ -31,7 +31,7 @@ export function Menu({ items, label, icon = "more", cls = "" }) {
   return html`<div class=${`menu ${cls}`}>
     <button ref=${btn} type="button" class="icon-btn" aria-haspopup="menu" aria-expanded=${open ? "true" : "false"}
       aria-label=${label || t("app.more")} title=${label || t("app.more")} onClick=${() => setOpen(!open)}><${Icon} name=${icon} /></button>
-    ${open ? html`<div ref=${list} class="menu-list" role="menu" aria-label=${label || t("app.more")} onKeyDown=${onKey}>
+    ${open ? html`<div data-trust="menu" ref=${list} class="menu-list" role="menu" aria-label=${label || t("app.more")} onKeyDown=${onKey}>
       ${shown.map(item => html`<button key=${item.key} type="button" role="menuitem" class=${`menu-item${item.danger ? " danger" : ""}`}
         disabled=${!!item.disabled} onClick=${() => choose(item)}>${item.icon ? html`<${Icon} name=${item.icon} size=${16} />` : null}<span>${item.label}</span></button>`)}
     </div>` : null}

package/dist/ui/shared/ui-toast.js

@@ -14,5 +14,5 @@ export function toast(text, ok = true) {
 export function Toasts() {
   const [list, setList] = useState(toasts.get());
   useEffect(() => toasts.subscribe(setList), []);
-  return html`<div class="toasts" role="status" aria-live="polite">${list.map(x => html`<div key=${x.id} class=${`toast ${x.ok ? "ok" : "err"}`}>${x.text}</div>`)}</div>`;
+  return html`<div data-trust="toast" class="toasts" role="status" aria-live="polite">${list.map(x => html`<div key=${x.id} class=${`toast ${x.ok ? "ok" : "err"}`}>${x.text}</div>`)}</div>`;
 }