@songsid/agend 2.2.0 → 2.3.0-beta.2

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

@@ -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 { checkCard, fitPicture, IdentityCard, 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,7 +299,9 @@ 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>
@@ -320,6 +325,28 @@ 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) };
+  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 });
+      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 +356,27 @@ 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];
+    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 +389,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 +415,20 @@ 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" /></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>`)}
+      </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/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

@@ -54,6 +54,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>`;
 }

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

@@ -66,7 +66,17 @@ export function UsageMetric({ m }) {
   const sub = [note, expiryText(m.expiresAt)].filter(Boolean).join(" · ");
   return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${val}</span></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
 }
-/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
+/**
+ * #2014: a row's title. A credential profile's row (`profile`; its API `name` is "Claude (<profile>)") shows the
+ * provider name on the title line beside the plan badge, and the profile on its own full-width muted line under it;
+ * the full name is the tooltip, and the dialog shows the profile unclipped. Any other row: its name.
+ */
+export function providerTitle(p) {
+  const name = String((p && p.name) || ""), profile = p && typeof p.profile === "string" && p.profile ? p.profile : "";
+  const suffix = ` (${profile})`;
+  return profile && name.endsWith(suffix) ? { base: name.slice(0, -suffix.length), profile } : { base: name, profile };
+}
+
 /**
  * #1749: a plan as its badge reads — one short line. "Name [Tier] (N×)" (Claude's "Team Premium (6.25x)", "Max (20x)")
  * becomes "Name ×N"; anything else (Pro, Codex's and muse's labels) as it is. The full name stays on the badge's
@@ -76,6 +86,7 @@ export function planBadge(plan) {
   const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(String(plan || "").trim());
   return m ? `${m[1]} ×${m[2]}` : String(plan || "");
 }
+/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
 export function updatedAgo(fetchedAt, now = Date.now()) {
   const ms = now - new Date(fetchedAt).getTime();
   if (!Number.isFinite(ms) || ms < 60_000) return tn("usageUpdatedJustNow");
@@ -134,11 +145,12 @@ export function UsageBody({ owner }) {
     const providers = ordered(data.providers);
     content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
       ${providers.map((p, i) => html`<section key=${key(p)} class="u-provider">
-        <div class="u-head"><strong title=${p.name}>${p.name}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
+        <div class="u-head"><strong title=${p.name}>${providerTitle(p).base}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
           <span class="u-order">
             <button type="button" class="icon-btn" disabled=${i === 0} aria-label=${tn("usageMoveUp")} title=${tn("usageMoveUp")} onClick=${() => move(key(p), -1, data.providers)}><${Icon} name="up" size=${14} /></button>
             <button type="button" class="icon-btn" disabled=${i === providers.length - 1} aria-label=${tn("usageMoveDown")} title=${tn("usageMoveDown")} onClick=${() => move(key(p), 1, data.providers)}><${Icon} name="down" size=${14} /></button>
           </span></div>
+        ${providerTitle(p).profile ? html`<div class="u-profile" title=${p.name}>${providerTitle(p).profile}</div>` : null}
         ${p.stale ? html`<p class="note">${usageText(p.hint || "", p.hintI18n)}</p>` : null}
         ${p.status === "error" && !p.transient ? html`<p class="u-err">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "error" && p.transient ? html`<p class="note">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`

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

@@ -156,6 +156,21 @@ register("view", {
   "removePicture": "Remove picture",
   "keepPicture": "Keep picture",
   "removePictureNote": "Removed when you save. The bot's avatar, the persona emoji or the first letter shows instead.",
+  "cardSection": "Identity card",
+  "cardLead": "Yours wins over the agent's, field by field. Leave a field empty to show the agent's.",
+  "cardTagline": "Tagline (one line, up to 60 characters)",
+  "cardBio": "Bio (up to 280 characters, 3 line breaks)",
+  "cardPortrait": "Portrait",
+  "cardBanner": "Banner",
+  "cardRemove": "Remove yours",
+  "cardKeep": "Keep yours",
+  "clearCard": "Clear card",
+  "keepCard": "Keep card",
+  "clearCardNote": "Removed when you save: your tagline, bio, portrait and banner. The agent's own card shows instead.",
+  "resizeAsk": "This picture is {w}×{h}; it will be resized to {nw}×{nh}.",
+  "resizeGo": "Resize",
+  "cardFailed": "Card not saved: {error}",
+  "pictureTooLarge": "This picture can't be made small enough to upload.",
   "saved": "Saved",
   "saveFailed": "Save failed: {error}",
   "signInToEdit": "Sign in to edit",
@@ -182,7 +197,9 @@ register("view", {
   "favUp": "Move {name} up",
   "favDown": "Move {name} down",
   "favFull": "Favorites are full ({max})",
-  "favFiltered": "Clear the filter to reorder favorites"
+  "favFiltered": "Clear the filter to reorder favorites",
+  "pinnedCurrent": "Current",
+  "pinnedLabel": "The instance you have open"
  },
  "zh-TW": {
   "editProfile": "編輯個人資料",
@@ -336,6 +353,21 @@ register("view", {
   "removePicture": "移除圖片",
   "keepPicture": "保留圖片",
   "removePictureNote": "儲存後移除，改顯示 Bot 的頭像、persona emoji 或名稱第一個字。",
+  "cardSection": "身分卡",
+  "cardLead": "你設定的欄位優先於 agent 的，逐欄比較。欄位留空就顯示 agent 的。",
+  "cardTagline": "標語（一行，最多 60 個字）",
+  "cardBio": "簡介（最多 280 個字、3 次換行）",
+  "cardPortrait": "肖像",
+  "cardBanner": "橫幅",
+  "cardRemove": "移除你的",
+  "cardKeep": "保留你的",
+  "clearCard": "清除卡片",
+  "keepCard": "保留卡片",
+  "clearCardNote": "儲存後移除你的標語、簡介、肖像與橫幅，改顯示 agent 自己的卡片。",
+  "resizeAsk": "這張圖片是 {w}×{h}，會縮小為 {nw}×{nh}。",
+  "resizeGo": "縮小",
+  "cardFailed": "卡片未儲存：{error}",
+  "pictureTooLarge": "這張圖片無法縮到可上傳的大小。",
   "saved": "已儲存",
   "saveFailed": "儲存失敗：{error}",
   "signInToEdit": "登入後才能編輯",
@@ -362,6 +394,8 @@ register("view", {
   "favUp": "把 {name} 上移",
   "favDown": "把 {name} 下移",
   "favFull": "最愛已滿（{max} 個）",
-  "favFiltered": "清除篩選後才能調整最愛順序"
+  "favFiltered": "清除篩選後才能調整最愛順序",
+  "pinnedCurrent": "目前",
+  "pinnedLabel": "你目前開著的 instance"
  }
 });

package/dist/ui/signin.html

@@ -55,6 +55,7 @@
     <div id="msg" role="alert" aria-live="polite"></div>
     <div class="hint" data-i18n="hint">No code? Send /web in General, then press a sign-in button to get one.</div>
     <details class="help"><summary data-i18n="nobot">No chat bot?</summary><p data-i18n="nobot_body">Ask the operator to run <code>agend web --code</code> on the AgEnD computer.</p></details>
+    <details class="help"><summary data-i18n="safe">Page looks wrong after signing in?</summary><p data-i18n="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.</p></details>
   </form>
   <noscript>This page needs JavaScript to sign you in.</noscript>
 </main>

package/dist/usage/providers.d.ts

@@ -34,6 +34,8 @@ export interface UsageMetric {
 export interface ProviderUsage {
     id: string;
     name: string;
+    /** #2014: the credential profile this row reads (its `name` ends in ` (<profile>)`); the page shows it on its own line. */
+    profile?: string;
     status: "ok" | "error" | "no-credentials";
     /** A non-metered subscription whose entitlement is unlimited (not 0/100%). */
     unlimited?: boolean;
@@ -221,6 +223,7 @@ export declare function fetchKiroUsage(storeHome?: string): Promise<Omit<Provide
 type UsageProvider = {
     id: string;
     name: string;
+    profile?: string;
     fetch: (storeHome?: string, scope?: ClaudeUsageScope) => Promise<Omit<ProviderUsage, "id" | "name">>;
 };
 type UsageFleetConfig = Parameters<typeof listConfiguredProfiles>[0];

package/dist/usage/providers.js

@@ -1458,6 +1458,7 @@ export function providersForConfig(config, base = DEFAULT_PROVIDERS) {
         rows.push(...profiles.map(profile => ({
             id: `${provider.id}:${profile}`,
             name: `${provider.name} (${profile})`,
+            profile,
             fetch: () => provider.fetch(credentialProfileStoreHome(getAgendHome(), backendName, profile), { profile }),
         })));
         return rows;
@@ -1644,16 +1645,16 @@ export async function fetchAllUsage(config) {
                 // Fail soft: this row says it could not be read, the rest still answer,
                 // and the snapshot returns in bounded time.
                 return {
-                    id: p.id, name: p.name, status: "error",
+                    id: p.id, name: p.name, ...(p.profile ? { profile: p.profile } : {}), status: "error",
                     error: `Could not reach ${p.name}.`,
                     errorI18n: i18n("usage.error.unreachable", p.name),
                     metrics: [],
                 };
             }
-            return { id: p.id, name: p.name, ...outcome };
+            return { id: p.id, name: p.name, ...(p.profile ? { profile: p.profile } : {}), ...outcome };
         }
         catch (err) {
-            return { id: p.id, name: p.name, status: "error", error: String(err?.message ?? err), metrics: [] };
+            return { id: p.id, name: p.name, ...(p.profile ? { profile: p.profile } : {}), status: "error", error: String(err?.message ?? err), metrics: [] };
         }
     }));
     return {