@songsid/agend 2.2.0-beta.9 → 2.3.0-beta.1

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

@@ -0,0 +1,103 @@
+/** #1629: one private Trial contribution. No frame, pool, Start/Stop HTTP or durable profile writes. */
+import { checkEffectTrialStart } from "./effect-runtime-loader.js";
+import { effectTrialStageIdentity, effectTrialStage, watchEffectTrialStage, disposeEffectTrialStage, constrainEffectTrialStage } from "./effect-trial-stage.js";
+const safe = fn => { try { return fn(); } catch { return null; } };
+const plain = x => !!x && [Object.prototype, null].includes(Object.getPrototypeOf(x));
+function fields(value, required, optional = []) {
+  try {
+    if (!plain(value)) return null;
+    const keys = Reflect.ownKeys(value), out = Object.create(null);
+    if (keys.some(k => typeof k !== "string" || !required.includes(k) && !optional.includes(k)) || required.some(k => !keys.includes(k))) return null;
+    for (const k of keys) { const d = Object.getOwnPropertyDescriptor(value, k); if (!d || !("value" in d) || !d.enumerable) return null; out[k] = d.value; }
+    return out;
+  } catch { return null; }
+}
+const canonical = x => JSON.stringify(x, function(_key, value) {
+  return value && !Array.isArray(value) && typeof value === "object" ? Object.fromEntries(Object.keys(value).sort().map(k => [k, value[k]])) : value;
+});
+export function createEffectTrialSource({ window: host, current, ownerCurrent, stock, readResource, onChange = () => {} }) {
+  let dead = false, active = null, previous = null, clockBroken = false, clockBusy = false;
+  const used = new WeakSet();
+  function now() {
+    if (clockBroken || clockBusy) { clockBroken = true; return null; }
+    clockBusy = true; let value; try { value = host.performance.now(); } catch { value = null; } finally { clockBusy = false; }
+    if (clockBroken || typeof value !== "number" || !Number.isFinite(value) || value < 0 || value > Number.MAX_SAFE_INTEGER || previous !== null && value < previous) { clockBroken = true; return null; }
+    previous = value; return value;
+  }
+  function stop(lease, reason = "stopped") {
+    if (!lease || lease.dead) return false;
+    lease.dead = true; if (active === lease) active = null;
+    safe(() => host.clearTimeout(lease.timer)); safe(() => lease.off?.()); lease.off = null;
+    for (const controller of lease.pending) safe(() => controller.abort());
+    safe(() => disposeEffectTrialStage(lease.stage.receipt)); // Remove physical paint before callbacks can replace this contribution.
+    safe(onChange); safe(() => lease.onStop(reason)); return true;
+  }
+  function valid(lease) {
+    if (dead || !lease || active !== lease || lease.dead || lease.checking) return false;
+    lease.checking = true; let yes = false;
+    try {
+      const time = now();
+      yes = time !== null && time >= lease.startedAt && time < lease.until && current() === true && ownerCurrent(lease.owner, lease.identity.instance) === true && lease.current() === true;
+      const accepted = now(); yes = yes && accepted !== null && accepted >= lease.startedAt && accepted < lease.until;
+    } catch { /* unknown is not a lease */ } finally { lease.checking = false; }
+    return !dead && active === lease && !lease.dead && yes;
+  }
+  const checked = lease => { if (valid(lease)) return true; stop(lease, "trial_ended"); return false; };
+  function arm(lease) {
+    if (!checked(lease)) return;
+    const time = now(); if (time === null || time >= lease.until) { stop(lease, "trial_expired"); return; }
+    lease.timer = host.setTimeout(() => { if (active === lease && !lease.dead) arm(lease); }, Math.max(1, Math.ceil(lease.until - time)));
+  }
+  function attach(input, owner) {
+    if (dead || clockBroken) return null;
+    const x = fields(input, ["reply", "offer", "startedAt", "stage", "current", "onStop"]), stage = x && fields(x.stage, ["receipt", "dispose", "hide"]);
+    const identity = stage && effectTrialStageIdentity(stage.receipt), reply = identity && checkEffectTrialStart(x.reply, x.offer, identity.id);
+    const time = now(), until = reply && typeof x.startedAt === "number" ? x.startedAt + reply.remainingMs : null;
+    if (dead || !x || !stage || !identity || !reply || used.has(stage.receipt) || typeof stage.dispose !== "function" || typeof stage.hide !== "function"
+      || typeof x.current !== "function" || typeof x.onStop !== "function" || typeof x.startedAt !== "number" || !Number.isFinite(x.startedAt) || x.startedAt < 0
+      || time === null || x.startedAt > time || typeof until !== "number" || !Number.isFinite(until) || until > Number.MAX_SAFE_INTEGER || time >= until) return null;
+    const candidate = active;
+    if (safe(() => current() === true && ownerCurrent(owner, identity.instance) === true && x.current() === true) !== true || active !== candidate || dead) return null;
+    stop(candidate, "replaced");
+    // A stop callback may have installed a newer contribution. Never replace it from this older operation.
+    if (dead || active !== null) return null;
+    const lease = { identity, reply, stage, owner, current: x.current, onStop: x.onStop, startedAt: x.startedAt, until, dead: false, checking: false, pending: new Set(), timer: null, off: null, binding: null };
+    lease.binding = Object.freeze({ kind: "trial", key: identity.key, id: identity.id, source: lease, generation: identity.generation });
+    active = lease; used.add(stage.receipt);
+    lease.off = watchEffectTrialStage(stage.receipt, () => stop(lease, "stage_ended"));
+    if (typeof lease.off !== "function" || constrainEffectTrialStage(stage.receipt, () => checked(lease)) !== true || !checked(lease)) { stop(lease, "stage_unavailable"); return null; }
+    try { arm(lease); } catch { stop(lease, "trial_unavailable"); return null; }
+    if (!checked(lease)) return null;
+    safe(onChange);
+    return checked(lease) ? Object.freeze({ current: () => checked(lease), stop: () => stop(lease), snapshot: () => { if (!checked(lease)) return null; const t = now(); return t !== null && t < lease.until && active === lease ? { id: identity.id, key: identity.key, trial: reply.trial, remainingMs: lease.until - t } : null; } }) : null;
+  }
+  function descriptor() {
+    const lease = active; if (!lease || !checked(lease)) return [];
+    const proof = safe(stock), local = safe(() => effectTrialStage(lease.stage.receipt, lease.identity, proof));
+    if (!checked(lease)) return [];
+    if (!local?.root || local.root.isConnected !== true) { stop(lease, "stage_unavailable"); return []; }
+    return [{ key: lease.identity.key, id: lease.identity.id, by: "agent", region: "chat", layer: lease.reply.manifest.layer, order: 0, paused: false, visible: true,
+      instance: lease.identity.instance, generation: lease.identity.generation, trialStage: lease.stage.receipt, params: lease.reply.params, element: local.root }];
+  }
+  function binding(key, id) { const lease = active; return lease && lease.binding.key === key && lease.binding.id === id && checked(lease) ? lease.binding : null; }
+  function bindingCurrent(b) { return !!b && active?.binding === b && checked(b.source); }
+  async function load(b, signal) {
+    if (!bindingCurrent(b) || signal?.aborted) return null;
+    const lease = b.source; if (lease.pending.size) return null;
+    const controller = new host.AbortController(), abort = () => controller.abort(); lease.pending.add(controller);
+    signal?.addEventListener("abort", abort, { once: true });
+    try {
+      if (!bindingCurrent(b) || signal?.aborted) { abort(); return null; }
+      const value = await readResource({ trial: lease.reply.trial, id: b.id, instance: lease.identity.instance }, controller.signal);
+      if (!bindingCurrent(b) || signal?.aborted || controller.signal.aborted) return null;
+      if (!value || value.id !== b.id || canonical(value.manifest) !== canonical(lease.reply.manifest) || canonical(value.params) !== canonical(lease.reply.params)) { stop(lease, "resource_unavailable"); return null; }
+      return bindingCurrent(b) && !signal?.aborted && !controller.signal.aborted ? value : null;
+    } catch { if (active === lease) stop(lease, "resource_unavailable"); return null; }
+    finally { signal?.removeEventListener("abort", abort); lease.pending.delete(controller); }
+  }
+  return Object.freeze({ attach, descriptors: descriptor, binding, current: bindingCurrent, load,
+    stopFor(owner) { const lease = active; return lease?.owner === owner ? stop(lease, "chat_ended") : false; },
+    stop() { return stop(active); },
+    dispose() { if (dead) return; dead = true; stop(active, "disposed"); },
+  });
+}

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

@@ -0,0 +1,147 @@
+/** #1629: host-issued LOCAL trial paint receipt. No authority, loader, frame factory or pool is created here. */
+import { effectHostStyle } from "./effect-host-style.js";
+import { effectStockSnapshot } from "./effect-stock-snapshot.js";
+import { STOCK_EFFECT_BARRIERS } from "./effect-stock-trust.js";
+const receipts = new WeakMap(), owners = new WeakMap();
+let serial = 0;
+const none = v => v === undefined || v === "" || v === "none";
+const number = n => typeof n === "number" && Number.isFinite(n) && Math.abs(n) <= 1e7;
+function binding(raw) {
+  try {
+    if (!raw || ![Object.prototype, null].includes(Object.getPrototypeOf(raw))) return null;
+    const fields = ["key", "id", "run", "instance", "generation"], keys = Reflect.ownKeys(raw), out = {};
+    if (keys.length !== fields.length || keys.some(k => typeof k !== "string" || !fields.includes(k))) return null;
+    for (const k of fields) { const d = Object.getOwnPropertyDescriptor(raw, k); if (!d || !Object.hasOwn(d, "value") || !d.enumerable) return null; out[k] = d.value; }
+    if (typeof out.key !== "string" || !out.key.length || out.key.length > 256 || typeof out.id !== "string" || !/^[0-9a-f]{32}$/.test(out.id)
+      || typeof out.run !== "string" || !/^[0-9a-f]{32}$/.test(out.run) || typeof out.instance !== "string" || !out.instance.length || out.instance.length > 128
+      || !Number.isSafeInteger(out.generation) || out.generation < 1) return null;
+    return Object.freeze(out);
+  } catch { return null; }
+}
+function rect(el) {
+  try { const r = el.getBoundingClientRect(); return [r.x, r.y, r.width, r.height].every(number) && r.width > 0 && r.height > 0 ? { x: r.x, y: r.y, width: r.width, height: r.height } : null; } catch { return null; }
+}
+function visible(host, el) { const s = host.getComputedStyle(el); return s.display !== "none" && s.visibility === "visible" && !!rect(el); }
+function neutral(s) {
+  return ["transform", "perspective", "filter", "backdropFilter", "rotate", "scale", "translate", "offsetPath", "clipPath", "maskImage"].every(k => none(s[k]))
+    && s.isolation === "auto" && s.mixBlendMode === "normal" && s.willChange === "auto" && (s.zoom === undefined || ["", "normal", "1"].includes(s.zoom)) && [undefined, "", "visible"].includes(s.contentVisibility);
+}
+/** Inspect immutable identity only; this is NOT current paint permission or a serialized grant. */
+export function effectTrialStageIdentity(receipt) { return receipts.get(receipt)?.identity ?? null; }
+/** Host-only lifetime observation. Physical removal precedes notification; subscribers never grant paint. */
+export function watchEffectTrialStage(receipt, listener) {
+  const owner = receipts.get(receipt);
+  if (!owner || typeof listener !== "function") return null;
+  owner.listeners.add(listener);
+  return () => owner.listeners.delete(listener);
+}
+/** Add one host lease veto before a frame exists. It can only reduce the original owner's permission. */
+export function constrainEffectTrialStage(receipt, current) {
+  const owner = receipts.get(receipt); return !!owner && owner.constrain(current) === true;
+}
+/** Retire through the issued owner; caller-supplied cleanup functions are never the physical boundary. */
+export function disposeEffectTrialStage(receipt) {
+  const owner = receipts.get(receipt); if (!owner) return false;
+  owner.invalidate("stopped"); return true;
+}
+/** Missing/forged/old receipts never turn the ordinary stock front flag on. */
+export function effectTrialStage(receipt, expected, stock) {
+  try {
+    const owner = receipts.get(receipt);
+    if (!owner || !expected || ![Object.prototype, null].includes(Object.getPrototypeOf(expected))) return null;
+    for (const key of ["key", "id", "instance", "generation"]) {
+      const d = Object.getOwnPropertyDescriptor(expected, key);
+      if (!d || !Object.hasOwn(d, "value") || d.value !== owner.identity[key]) return null;
+    }
+    return owner.project(stock);
+  } catch { return null; }
+}
+
+/** Only the fixed host TrialPanel supplies these elements and a current server-run lease. Not an agent manifest. */
+export function createEffectTrialStage({ window: host, panel, stage, binding: raw, current, ownerCss, onStop = () => {} } = {}) {
+  const own = binding(raw);
+  if (!own || typeof current !== "function" || typeof ownerCss !== "function" || typeof onStop !== "function" || !host?.document || !panel || !stage || owners.has(stage)) return null;
+  let sheet; try { sheet = effectHostStyle(host); if (!sheet || host.CSS?.supports("contain", "paint") !== true || host.CSS.supports("overflow", "clip") !== true) return null; } catch { return null; }
+  const receipt = Object.freeze(Object.create(null)), frames = new Set(), listeners = new Set(); let dead = false, constraint = null;
+  const identity = Object.freeze({ key: own.key, id: own.id, instance: own.instance, generation: own.generation, serial: ++serial });
+  const invalidate = reason => {
+    if (dead) return; dead = true; receipts.delete(receipt); if (owners.get(stage) === receipt) owners.delete(stage);
+    try { host.removeEventListener("blur", blur); } catch { /* no revival */ }
+    for (const f of [...frames]) f.remove();
+    const notify = [...listeners]; listeners.clear();
+    for (const fn of notify) { try { fn(reason); } catch { /* one host owner cannot block another cleanup */ } }
+    try { onStop(reason); } catch { /* cleanup already won */ }
+  };
+  const blur = event => { if (event.target === host) invalidate("blur"); };
+  function check(stock) {
+    try {
+      // This callback may reenter disposal or replace the owner. Recheck identity after it returns.
+      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || ownerCss() !== "off" || dead) return null;
+      const proof = effectStockSnapshot(stock), doc = host.document;
+      if (effectHostStyle(host) !== sheet) return null;
+      // The own panel MUST still suppress ordinary foreground effects. Never synthesize front:true.
+      if (!proof || proof.front !== false || doc.visibilityState !== "visible" || doc.hasFocus?.() !== true || doc.fullscreenElement || doc.pictureInPictureElement) return null;
+      const split = doc.querySelector(".main > .p-chat > .chat-split");
+      if (!split || doc.querySelectorAll(".main > .p-chat").length !== 1 || doc.querySelectorAll(".chat-split > .pv-panel").length !== 1
+        || panel.parentElement !== split || panel.ownerDocument !== doc || panel.isConnected !== true || panel.className !== "pv-panel effect-trial-panel" || panel.getAttribute("data-trust") !== "preview") return null;
+      const children = [...panel.children], names = ["effect-trial-head", "effect-trial-controls", "effect-trial-body", "effect-trial-note"];
+      if (children.length !== names.length || children.some((el, i) => el.className !== names[i]) || children[2].children.length !== 1 || children[2].firstElementChild !== stage
+        || stage.className !== "effect-trial-stage" || stage.ownerDocument !== doc || stage.isConnected !== true || stage.hasAttribute("tabindex") || stage.hasAttribute("contenteditable")) return null;
+      if ([...doc.querySelectorAll(STOCK_EFFECT_BARRIERS)].some(el => el !== panel && visible(host, el))
+        || [...doc.querySelectorAll(".pv-panel")].some(el => el !== panel && visible(host, el))) return null;
+      const active = doc.activeElement;
+      if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return null;
+      let el = stage, depth = 0;
+      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return null; if (el === doc.documentElement) break; el = el.parentElement; }
+      if (el !== doc.documentElement) return null;
+      const s = host.getComputedStyle(stage), r = rect(stage), p = rect(panel);
+      if (!r || !p || s.position !== "relative" || s.zIndex !== "0" || s.overflowX !== "clip" || s.overflowY !== "clip"
+        || s.paddingLeft !== "0px" || s.paddingRight !== "0px" || s.paddingTop !== "0px" || s.paddingBottom !== "0px"
+        || ["borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth"].some(k => s[k] !== "0px") || !none(s.boxShadow) || s.outlineStyle !== "none"
+        || r.x < p.x || r.y < p.y || r.x + r.width > p.x + p.width || r.y + r.height > p.y + p.height
+        || r.x < 0 || r.y < 0 || r.x + r.width > host.innerWidth || r.y + r.height > host.innerHeight) return null;
+      if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return null;
+      const width = Math.floor(r.width), height = Math.floor(r.height);
+      if (width < 1 || height < 1 || width > 4096 || height > 4096 || width * height > 8388608 || dead || owners.get(stage) !== receipt) return null;
+      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || ownerCss() !== "off" || dead || stage.isConnected !== true || panel.parentElement !== split) return null;
+      return { x: r.x, y: r.y, width, height };
+    } catch { return null; }
+  }
+  function project(stock) {
+    const r = check(stock); if (!r) { invalidate("stage_unavailable"); return null; }
+    return Object.freeze({ root: stage, rect: Object.freeze(r), identity, bind });
+  }
+  function bind(frame, { layer } = {}, stock) {
+    if (frames.size || !["front", "behind"].includes(layer) || frame?.ownerDocument !== host.document || frame.parentElement !== stage || frame.tagName !== "IFRAME") { frame?.remove?.(); return { ok: false }; }
+    // The new frame is temporarily known to this owner before the topology check; it remains hidden until sync.
+    const token = `agend-effect-trial-${identity.serial}`; let rule, removed = false;
+    const remove = () => {
+      if (removed) return; removed = true; frame.remove(); frames.delete(handle);
+      try { frame.classList.remove(token); const i = [...sheet.cssRules].indexOf(rule); if (i >= 0) sheet.deleteRule(i); } catch { /* physically removed first */ }
+    };
+    const hide = () => { try { rule.style.setProperty("visibility", "hidden", "important"); if (frame.isConnected && host.getComputedStyle(frame).visibility !== "hidden") remove(); } catch { remove(); } };
+    const handle = { ok: true, element: frame, remove, hide,
+      sync(proof) {
+        hide(); const r = check(proof); if (!r || removed) { invalidate("stage_unavailable"); return false; }
+        try {
+          for (const [k, v] of Object.entries({ left: "0px", top: "0px", width: `${r.width}px`, height: `${r.height}px` })) rule.style.setProperty(k, v, "important");
+          const s = host.getComputedStyle(frame), actual = rect(frame);
+          if (!actual || s.position !== "absolute" || s.visibility !== "hidden" || s.pointerEvents !== "none" || s.zIndex !== "0" || s.opacity !== (layer === "front" ? "0.85" : "1") || !neutral(s)
+            || !["x", "y", "width", "height"].every(k => Math.abs(actual[k] - r[k]) < 0.02) || actual.x < r.x || actual.y < r.y || actual.x + actual.width > r.x + r.width || actual.y + actual.height > r.y + r.height) throw Error("local geometry lost");
+          rule.style.setProperty("visibility", "visible", "important"); return true;
+        } catch { invalidate("stage_unavailable"); return false; }
+      },
+    };
+    frames.add(handle);
+    try {
+      const i = sheet.insertRule(`.${token}{}`, sheet.cssRules.length); rule = sheet.cssRules[i];
+      for (const [k, v] of Object.entries({ position: "absolute", visibility: "hidden", "pointer-events": "none", "z-index": "0", opacity: layer === "front" ? "0.85" : "1", border: "0px", margin: "0px", padding: "0px", "box-sizing": "border-box", "min-width": "0px", "min-height": "0px", "max-width": "none", "max-height": "none", outline: "none", "box-shadow": "none", "background-color": "transparent", animation: "none", transition: "none" })) rule.style.setProperty(k, v, "important");
+      frame.classList.add(token);
+      if (host.getComputedStyle(frame).visibility !== "hidden" || !check(stock)) throw Error("initial local hiding lost");
+    } catch { remove(); invalidate("stage_unavailable"); return { ok: false }; }
+    return handle;
+  }
+  receipts.set(receipt, { identity, project, listeners, invalidate, constrain(fn) { if (dead || frames.size || constraint !== null || typeof fn !== "function") return false; constraint = fn; return true; } }); owners.set(stage, receipt);
+  try { host.addEventListener("blur", blur); } catch { invalidate("unsupported"); return null; }
+  return Object.freeze({ receipt, dispose: () => invalidate("stopped"), hide: () => { for (const f of frames) f.hide(); } });
+}

package/dist/ui/shared/header-tools.js

@@ -13,6 +13,8 @@ import { UsageBody, UsageDialog } from "./usage-dialog.js";
 
 export const TEXT_SIZE_KEY = "agend_text_size";
 export const VIEW_FIT_KEY = "agend_view_fit";
+/** #1869: set once this device's View Fit was put back (a size chosen on another page used to turn it off). */
+export const VIEW_FIT_RESTORED_KEY = "agend_view_fit_1869";
 const LEGACY_DENSITY_KEY = "agend_view_density";
 export const TEXT_SIZES = ["s", "m", "l"];
 /** View's terminal: its fitted size times this (S / M / L are View's old compact / – / comfortable). */
@@ -24,6 +26,7 @@ const write = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this pa
 /**
  * This device's choice: `agend_text_size` (+ View's Fit), else — once — from View's `agend_view_density`:
  * comfortable → L, compact → S (Fit off); fit, or nothing → M with View on Fit (View's default, as before).
+ * #1869: until then any page's S / M / L also turned View's Fit off, so a Fit off from before is put back once.
  */
 export function loadTextSize() {
   let size = read(TEXT_SIZE_KEY), fit = read(VIEW_FIT_KEY);
@@ -31,7 +34,11 @@ export function loadTextSize() {
     const legacy = read(LEGACY_DENSITY_KEY);
     size = legacy === "comfortable" ? "l" : legacy === "compact" ? "s" : "m";
     fit = legacy === "comfortable" || legacy === "compact" ? "0" : "1";
-    write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, fit);
+    write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, fit); write(VIEW_FIT_RESTORED_KEY, "1");
+  }
+  if (read(VIEW_FIT_RESTORED_KEY) !== "1") {
+    if (fit === "0") { fit = "1"; write(VIEW_FIT_KEY, fit); }
+    write(VIEW_FIT_RESTORED_KEY, "1");
   }
   return { size, viewFit: fit !== "0" };
 }
@@ -50,15 +57,22 @@ export function initTextSize() {
     window.addEventListener("storage", (e) => { if (!e || e.key === TEXT_SIZE_KEY || e.key === VIEW_FIT_KEY || e.key === null) textSizeStore.set(loadTextSize()); });
   }
 }
-/** A size chosen anywhere is the size everywhere (View's Fit included: the last choice wins). */
-export function setTextSize(size) {
+/**
+ * A size chosen anywhere is the size everywhere. View's Fit is left only from View's own Aa (`view`): a size chosen on
+ * another page keeps View on Fit (#1869).
+ */
+export function setTextSize(size, { view = false } = {}) {
   if (!TEXT_SIZES.includes(size)) return;
-  write(TEXT_SIZE_KEY, size); write(VIEW_FIT_KEY, "0");
-  textSizeStore.set({ size, viewFit: false });
+  write(TEXT_SIZE_KEY, size);
+  if (view) write(VIEW_FIT_KEY, "0");
+  textSizeStore.set((s) => ({ size, viewFit: view ? false : s.viewFit }));
 }
 export function setViewFit() { write(VIEW_FIT_KEY, "1"); textSizeStore.set((s) => ({ ...s, viewFit: true })); }
 
-/** Aa: S → M → L → S; on View, Fit → S → M → L → Fit. */
+/**
+ * Aa: S → M → L → S; on View, Fit → S → M → L → Fit. Every page's button is as wide as its widest name (Fit's
+ * included): switching pages or sizes never moves the controls beside it.
+ */
 export function TextSizeButton({ view = false }) {
   const st = useStore(textSizeStore);
   const cur = view && st.viewFit ? "fit" : st.size;
@@ -66,8 +80,9 @@ export function TextSizeButton({ view = false }) {
   const next = order[(order.indexOf(cur) + 1) % order.length];
   const name = t(`app.textSize_${cur}`);
   const label = t("app.textSize", name);
-  return html`<button type="button" class="btn btn-ghost btn-sm hd-text" onClick=${() => (next === "fit" ? setViewFit() : setTextSize(next))}
-    title=${label} aria-label=${label}><${Icon} name="type" size=${16} /><span class="hide-narrow" aria-hidden="true">${name}</span></button>`;
+  return html`<button type="button" class="btn btn-ghost btn-sm hd-text" onClick=${() => (next === "fit" ? setViewFit() : setTextSize(next, { view }))}
+    title=${label} aria-label=${label}><${Icon} name="type" size=${16} /><span class="hide-narrow" aria-hidden="true"><span class="hd-text-names">${
+      ["fit", ...TEXT_SIZES].map(k => html`<span key=${k} class=${k === cur ? "on" : undefined}>${t(`app.textSize_${k}`)}</span>`)}</span></span></button>`;
 }
 
 /** Whether the fleet serves the usage panel: the page says so (data-usage-panel); "0" only when turned off. */
@@ -76,14 +91,15 @@ export function usageOffered() {
 }
 
 // #1673: the rail. Wide enough for it beside the sidebar and the page: RAIL_MEDIA (followed as it changes). Shown or
-// hidden is this device's choice (agend_usage_rail; "0" = hidden, else shown) — a layout choice, not synced (#1665).
+// hidden is this device's choice (agend_usage_rail; "1" = shown, "0" = hidden) — a layout choice, not synced (#1665).
+// #1854 (rank 7): a device that never chose starts with it hidden — a quiet first page; ◔ shows it (and remembers).
 export const RAIL_MEDIA = "(min-width: 1200px)";
 export const RAIL_KEY = "agend_usage_rail";
-/** The pages whose header has ◔ — the rail is theirs. */
-export const RAIL_PANELS = ["chat", "view", "details", "fleet"];
-export const usageRailStore = createStore({ open: true });
-/** A page load: this device's choice. */
-export function initUsageRail() { usageRailStore.set({ open: read(RAIL_KEY) !== "0" }); }
+/** The pages whose header has ◔ — the rail is theirs (Log's too: one frame on every tab of an instance). */
+export const RAIL_PANELS = ["chat", "view", "log", "details", "fleet"];
+export const usageRailStore = createStore({ open: false });
+/** A page load: this device's choice; none made yet = hidden. */
+export function initUsageRail() { usageRailStore.set({ open: read(RAIL_KEY) === "1" }); }
 export function setUsageRail(open) { write(RAIL_KEY, open ? "1" : "0"); usageRailStore.set({ open: !!open }); }
 const railQuery = () => { try { return typeof matchMedia === "function" ? matchMedia(RAIL_MEDIA) : null; } catch { return null; } };
 /** Whether the screen is wide enough for the rail, now and as it changes. */
@@ -109,7 +125,7 @@ export function UsageRail({ route }) {
   const wide = useRailWidth();
   const { open } = useStore(usageRailStore);
   if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
-  return html`<aside class="u-rail" aria-label=${t("view.usage.title_plain")}>
+  return html`<aside data-trust="usage" class="u-rail" aria-label=${t("view.usage.title_plain")}>
     <div class="u-rail-head"><h2>${t("view.usage.title")}</h2>
       <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
     <div class="u-rail-body"><${UsageBody} owner="usage-rail" /></div>
@@ -141,3 +157,7 @@ export function UsageButton({ navKey }) {
 export function HeaderTools({ view = false, navKey }) {
   return html`<${TextSizeButton} view=${view} /><${UsageButton} navKey=${navKey} />`;
 }
+/** Where a page with no control of its own after the shared ones (Log) keeps the room Chat's ⋯ takes: the same box on every tab. */
+export function HeaderSlot() {
+  return html`<span class="icon-btn hd-slot" aria-hidden="true"></span>`;
+}

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

@@ -0,0 +1,202 @@
+// #1629 r4 §1 / r4.1 Q3 (a): an instance's identity card — banner, portrait, tagline, bio — as the host resolves it
+// (GET /api/card/<name>: the person's fields over the agent's). Shown on Details, in View, and folded into the agent's
+// own chat header. Public (/assets/): View's anonymous reader sees cards too.
+//
+// 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
+// (`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";
+import { createStore, useStore } from "./app-store.js";
+import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
+import "./card-strings.js";
+
+export const CARD_SIZES = ["s", "m", "l"];
+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; } };
+
+/** Bumped whenever a size choice changes (here or on another device), so cards redraw. */
+export const cardSizeStore = createStore({ n: 0 });
+const bump = () => cardSizeStore.set((s) => ({ n: s.n + 1 }));
+onPrefsChanged((changed) => { if (changed.has("card.size") || changed.has("card.sizeByInstance")) bump(); });
+
+/** Every card's size unless set apart: the person's choice, else M. */
+export function cardSizeDefault() {
+  const f = prefInForce("card.size");
+  const v = f ? f.value : readLocal("agend_card_size");
+  return CARD_SIZES.includes(v) ? v : "m";
+}
+function overrides() {
+  const f = prefInForce("card.sizeByInstance");
+  let v = f ? f.value : undefined;
+  if (!f) { try { v = JSON.parse(readLocal("agend_card_sizes") || "null"); } catch { v = null; } }
+  return v && typeof v === "object" && !Array.isArray(v) ? v : {};
+}
+/** The size `name`'s card is drawn at: its own, else the default. */
+export function cardSizeFor(name) {
+  const o = overrides();
+  return own(o, name) && CARD_SIZES.includes(o[name]) ? o[name] : cardSizeDefault();
+}
+/**
+ * The size for one card (its own control). Choosing the default size removes its entry, so it follows the default
+ * again; a new or changed entry goes last, and past 200 the oldest go.
+ */
+export function setCardSize(name, size) {
+  if (!CARD_SIZES.includes(size)) return;
+  const next = Object.create(null);
+  for (const [k, v] of Object.entries(overrides())) if (k !== name) Object.defineProperty(next, k, { value: v, enumerable: true, writable: true, configurable: true });
+  if (size !== cardSizeDefault()) Object.defineProperty(next, name, { value: size, enumerable: true, writable: true, configurable: true });
+  const keys = Object.keys(next);
+  for (const k of keys.slice(0, Math.max(0, keys.length - MAX_CARD_SIZES))) delete next[k];
+  const plain = {};
+  for (const k of Object.keys(next)) Object.defineProperty(plain, k, { value: next[k], enumerable: true, writable: true, configurable: true });
+  savePref("card.sizeByInstance", Object.keys(plain).length ? plain : null);
+  bump();
+}
+/** Every card's default size (Settings → Appearance). M is the default, so choosing it clears the choice. */
+export function setCardSizeDefault(size) {
+  if (!CARD_SIZES.includes(size)) return;
+  savePref("card.size", size === "m" ? null : size);
+  bump();
+}
+
+// ── The card's data: read once per version (the status frame's / View roster's card_v) ──
+/** { <name>: { v, epoch, card } } — card null until read; a failed read keeps the last one. */
+export const cardsStore = createStore({});
+const SRC = /^\/api\/card\/[^/?#\\]+\/(portrait|banner)\?v=[0-9a-f]{32}$/;
+const ID = /^[0-9a-f]{32}$/;
+/** What the host said, checked again: same-origin picture paths of this card, text as text. */
+export function checkCard(name, body) {
+  if (!body || typeof body !== "object" || Array.isArray(body)) return null;
+  const out = {};
+  const base = `/api/card/${encodeURIComponent(name)}/`;
+  for (const slot of ["portrait", "banner"]) {
+    const p = body[slot];
+    if (p && typeof p === "object" && typeof p.src === "string" && SRC.test(p.src) && p.src.startsWith(base + slot + "?") && ID.test(p.id) && (p.by === "human" || p.by === "agent")) out[slot] = { src: p.src, by: p.by };
+  }
+  // The host's bounds (web-theme.ts TAGLINE_MAX_UNITS / BIO_MAX_UNITS): anything it stores is shown.
+  const MAX = { tagline: 600, bio: 2800 };
+  for (const k of ["tagline", "bio"]) {
+    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 };
+  }
+  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).
+// GET /api/card is not versioned — its body is whatever the host had then — so a read belongs to the epoch that started
+// it: only a read of the current epoch is shared or applied, and an older read never touches its replacement.
+const want = new Map();        // name → { epoch, v }
+const inflight = new Map();    // name → { epoch, promise }
+/** Read `name`'s card if `v` is newer than what this page has (no version: no card). */
+export async function loadCard(name, v, fetcher = (u) => fetch(u, { credentials: "same-origin" })) {
+  if (!name) return;
+  const target = v || null;
+  const cur = want.get(name);
+  const epoch = cur && cur.v === target ? cur.epoch : (cur ? cur.epoch : 0) + 1;
+  if (!cur || cur.v !== target) want.set(name, { epoch, v: target });
+  const have = own(cardsStore.get(), name) ? cardsStore.get()[name] : null;
+  if (!target) {
+    if (have) cardsStore.set((s) => { const n = { ...s }; delete n[name]; return n; });
+    return;
+  }
+  if (have && have.v === target && have.epoch === epoch) return;          // read in this epoch already
+  const out = inflight.get(name);
+  if (out && out.epoch === epoch) return out.promise;                       // this epoch's read is on its way
+  const current = () => want.get(name)?.epoch === epoch;
+  const entry = { epoch, promise: null };
+  entry.promise = (async () => {
+    try {
+      const r = await fetcher(`/api/card/${encodeURIComponent(name)}`);
+      if (!r.ok || !current()) return;
+      const card = checkCard(name, await r.json());
+      if (!current()) return;                                               // superseded or cleared while it was read
+      cardsStore.set((s) => ({ ...s, [name]: { v: target, epoch, card } }));
+    } catch { /* the next version tries again */ } finally { if (inflight.get(name) === entry) inflight.delete(name); }
+  })();
+  inflight.set(name, entry);
+  return entry.promise;
+}
+/** `name`'s card for version `v` (null while none or not read yet). */
+export function useCard(name, v) {
+  const cards = useStore(cardsStore);
+  useEffect(() => { loadCard(name, v); }, [name, v]);
+  const c = name && own(cards, name) ? cards[name] : null;
+  return c && c.v === v ? c.card : c ? c.card : null;
+}
+
+/** The S / M / L control (a segmented one): sets this card's size. */
+function SizeControl({ name, size }) {
+  return html`<div class="card-size" role="group" aria-label=${t("card.size")}>
+    ${CARD_SIZES.map((s) => html`<button key=${s} type="button" class=${`seg-item${s === size ? " active" : ""}`} aria-pressed=${s === size ? "true" : "false"}
+      title=${t(`card.size${s.toUpperCase()}Name`)} onClick=${() => setCardSize(name, s)}>${t(`card.size${s.toUpperCase()}`)}</button>`)}
+  </div>`;
+}
+
+/**
+ * The card. `compact`: the chat header's own small size (no size control). Nothing when the card is empty. The
+ * tagline and bio say whose they are (title), since a person's field wins over the agent's.
+ */
+export function IdentityCard({ name, card, compact = false, sizeControl = !compact }) {
+  useStore(cardSizeStore);
+  const [broken, setBroken] = useState({});
+  if (!card) return null;
+  const size = compact ? "c" : cardSizeFor(name);
+  const whose = (f) => t(f.by === "human" ? "card.byHuman" : "card.byAgent");
+  const pic = (slot, cls, alt) => card[slot] && broken[slot] !== card[slot].src
+    ? html`<img class=${cls} src=${card[slot].src} alt=${alt} title=${whose(card[slot])} decoding="async" onError=${() => setBroken({ ...broken, [slot]: card[slot].src })} />` : null;
+  return html`<section class=${`id-card card-${size}`} aria-label=${t("card.label", name)}>
+    ${pic("banner", "id-banner", "")}
+    <div class="id-row">
+      ${pic("portrait", "id-portrait", t("card.portraitAlt", name))}
+      <div class="id-text">
+        ${card.tagline ? html`<p class="id-tagline" title=${whose(card.tagline)}>${card.tagline.text}</p>` : null}
+        ${card.bio ? html`<p class="id-bio" title=${whose(card.bio)}>${card.bio.text}</p>` : null}
+      </div>
+      ${sizeControl ? html`<${SizeControl} name=${name} size=${size} />` : null}
+    </div>
+  </section>`;
+}
+
+// ── 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
+ * person agrees (`ask(w, h, nw, nh)`), drawn smaller and re-encoded as WebP (which also drops its metadata). The server
+ * checks whatever is sent like any upload — this is a convenience, never the check. Returns the Blob to send, null when
+ * the person declined, or throws when the picture cannot be read or made small enough.
+ */
+export async function fitPicture(file, limit, ask, io = browserImageIo) {
+  const okType = /^image\/(png|jpeg|webp)$/.test(file.type);
+  const bitmap = await io.decode(file);
+  const w = bitmap.width, h = bitmap.height;
+  if (okType && w <= limit.max_width && h <= limit.max_height && file.size <= limit.max_bytes) return file;
+  let scale = Math.min(1, limit.max_width / w, limit.max_height / h);
+  let nw = Math.max(1, Math.floor(w * scale)), nh = Math.max(1, Math.floor(h * scale));
+  if (!(await ask(w, h, nw, nh))) return null;
+  for (let tries = 0; tries < 6; tries++) {
+    for (const quality of [0.9, 0.8, 0.7]) {
+      const out = await io.encode(bitmap, nw, nh, quality);
+      if (out && out.size <= limit.max_bytes) return out;
+    }
+    scale *= 0.8;
+    nw = Math.max(1, Math.floor(w * scale)); nh = Math.max(1, Math.floor(h * scale));
+  }
+  throw new Error("too_large");
+}
+/** The browser's decoder and encoder: createImageBitmap (no URL, so img-src stays 'self') and a canvas to WebP (or JPEG). */
+export const browserImageIo = {
+  decode: (file) => createImageBitmap(file),
+  encode: (bitmap, w, h, quality) => new Promise((resolve) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = w; canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) { resolve(null); return; }
+    ctx.drawImage(bitmap, 0, 0, w, h);
+    // WebP where the browser encodes it; JPEG where it does not (it answers PNG then) — either drops the metadata.
+    canvas.toBlob((b) => {
+      if (b && b.type === "image/webp") { resolve(b); return; }
+      canvas.toBlob((j) => resolve(j && j.type === "image/jpeg" ? j : null), "image/jpeg", quality);
+    }, "image/webp", quality);
+  }),
+};