@songsid/agend 2.2.0 → 2.3.0-beta.1

package/dist/ui/effect-trial-controller.js

@@ -0,0 +1,119 @@
+/** #1629: explicit-click control lane. Responses never grant authority; Start reauthorizes on the server. */
+import { effectTrialMessage } from "./effect-trial-offer.js";
+import { checkEffectTrialStart } from "/assets/effect-runtime-loader.js";
+import { chatEffectIdentity } from "/assets/effect-chat-runtime.js";
+const owners = new WeakSet(), safe = fn => { try { return fn(); } catch { return null; } };
+const LIMIT = 128 * 1024;
+export function createEffectTrialController({ window: host, current, allowed, onStart, onChange = () => {} }) {
+  let dead = false, active = null, physical = null, previous = null, broken = false, clockBusy = false;
+  const cleanup = [], releases = [], identity = safe(() => chatEffectIdentity(host));
+  const tell = () => { if (!dead) safe(onChange); };
+  function clock() {
+    if (broken || clockBusy) { broken = true; return null; }
+    clockBusy = true; const t = safe(() => host.performance.now()); clockBusy = false;
+    if (broken || typeof t !== "number" || !Number.isFinite(t) || t < 0 || t > Number.MAX_SAFE_INTEGER || previous !== null && t < previous) { broken = true; return null; }
+    return previous = t;
+  }
+  function eligible(op) {
+    if (dead || broken || !op || active !== op || op.dead || op.checking || host.AgendAuth?.sessionEnded?.() !== false) return false;
+    op.checking = true;
+    try {
+      const t = clock();
+      if (t === null || t < op.began || t >= op.until || safe(() => current(op.instance) === true && allowed() === true) !== true) return false;
+      const after = clock();
+      return !dead && !op.dead && active === op && after !== null && after >= op.began && after < op.until;
+    } finally { op.checking = false; }
+  }
+  function end(op, reason = "stopped") {
+    if (!op || op.dead) return false;
+    op.dead = true; if (active === op) active = null; safe(() => op.resolve?.(false));
+    safe(() => host.clearTimeout(op.timer)); safe(() => op.controller.abort());
+    if (op.reply && !op.stopQueued) { op.stopQueued = true; cleanup.push(op); }
+    // Physical paint is removed before callbacks, cleanup I/O or another explicit click.
+    safe(() => op.dispose?.()); op.dispose = null; tell(); drain(); return true;
+  }
+  function arm(op) {
+    safe(() => host.clearTimeout(op.timer));
+    if (!eligible(op)) { end(op, "trial_ended"); return; }
+    const t = clock(); if (t === null || t >= op.until) { end(op, "trial_expired"); return; }
+    op.timer = host.setTimeout(() => { if (!op.dead) arm(op); }, Math.max(1, Math.ceil(op.until - t)));
+  }
+  async function read(response) {
+    let reader = null;
+    try {
+      if (!response || response.redirected || response.status !== 200 || !/^application\/json(?:\s*;|$)/i.test(response.headers.get("content-type") || "")) return null;
+      const length = response.headers.get("content-length"); if (length !== null && (!/^\d+$/.test(length) || Number(length) > LIMIT)) return null;
+      reader = response.body?.getReader(); if (!reader) return null;
+      const chunks = []; let size = 0;
+      for (;;) { const r = await reader.read(); if (r.done) break; if (!(r.value instanceof Uint8Array) || (size += r.value.byteLength) > LIMIT) return null; chunks.push(r.value); }
+      const bytes = new Uint8Array(size); let offset = 0; for (const c of chunks) { bytes.set(c, offset); offset += c.byteLength; }
+      return JSON.parse(new TextDecoder("utf-8", { fatal: true }).decode(bytes));
+    } catch { return null; }
+    finally { try { if (reader) await reader.cancel(); else await response?.body?.cancel(); } catch { /* retained until cancellation settles */ } }
+  }
+  function drain() {
+    if (physical || !cleanup.length) return;
+    const op = cleanup.shift(), token = {}; physical = token; const controller = new host.AbortController();
+    const timer = host.setTimeout(() => controller.abort(), 10000);
+    // Stop remains permitted after CSS/gate/session changes. It cannot mount or mutate appearance.
+    Promise.resolve().then(async () => {
+      const response = await host.fetch(`/ui/effect-trials/${op.reply.trial}/stop?ownerEpoch=${identity.epoch}`, {
+        method: "POST", credentials: "same-origin", cache: "no-store", redirect: "error", headers: { "Content-Type": "application/json" }, body: "{}", signal: controller.signal,
+      });
+      try { await response.body?.cancel(); } catch { /* no response fields are consumed */ }
+    }).catch(() => {}).finally(() => { safe(() => host.clearTimeout(timer)); if (physical === token) physical = null; tell(); drain(); });
+  }
+  function dispose() {
+    if (dead) return; dead = true; end(active); for (const off of releases.splice(0)) safe(off); tell();
+  }
+  const api = { ok: false, start: async () => false, stop: () => end(active), sync() { const op = active; if (op && !eligible(op)) end(op, "trial_ended"); },
+    snapshot: () => Object.freeze({ busy: !!physical || cleanup.length > 0, phase: active ? active.reply ? "running" : "starting" : "idle" }), dispose };
+  if (!identity || owners.has(host) || typeof current !== "function" || typeof allowed !== "function" || typeof onStart !== "function"
+    || typeof host.AgendAuth?.trialSession !== "function" || typeof host.AgendAuth?.onSessionEnd !== "function") return Object.freeze(api);
+  owners.add(host);
+  try {
+    const off = host.AgendAuth.onSessionEnd(dispose);
+    if (dead) { safe(off); return Object.freeze(api); }
+    releases.push(off);
+    for (const [target, type, fn] of [[host, "blur", () => end(active)], [host, "pagehide", dispose], [host.document, "visibilitychange", () => { if (host.document.visibilityState !== "visible") end(active); }]]) {
+      target.addEventListener(type, fn); releases.push(() => target.removeEventListener(type, fn));
+    }
+  } catch { dispose(); return Object.freeze(api); }
+  if (dead) return Object.freeze(api);
+  api.ok = true;
+  api.start = async message => {
+    if (dead || active || physical || cleanup.length) return false;
+    const offer = safe(() => effectTrialMessage(message)), instance = safe(() => message.instance), began = clock();
+    if (!offer || began === null || began + 10000 > Number.MAX_SAFE_INTEGER || safe(() => host.Date.now() < offer.expiresAt) !== true) return false;
+    const op = { instance, offer, began, until: began + 10000, controller: new host.AbortController(), timer: null, reply: null, dead: false, stopQueued: false, dispose: null };
+    active = op; const token = {}; physical = token;
+    const cancelled = new Promise(resolve => { op.resolve = resolve; });
+    const work = Promise.resolve().then(async () => {
+      if (!eligible(op)) return false;
+      arm(op); const session = await host.AgendAuth.trialSession();
+      if (!eligible(op) || !session || session.localAdmin !== true || session.epoch !== identity.epoch) return false;
+      const response = await host.fetch(`/ui/effect-trials/start?ownerEpoch=${identity.epoch}`, {
+        method: "POST", credentials: "same-origin", cache: "no-store", redirect: "error", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ offer: offer.offer, instance }), signal: op.controller.signal,
+      });
+      const reply = checkEffectTrialStart(await read(response), offer.offer, offer.id);
+      if (!reply) return false;
+      op.reply = reply;
+      if (op.dead && !op.stopQueued) { op.stopQueued = true; cleanup.push(op); }
+      if (reply.offer.title !== offer.title || reply.offer.expiresAt !== offer.expiresAt) return false;
+      if (!eligible(op)) { if (!op.stopQueued) { op.stopQueued = true; cleanup.push(op); } return false; }
+      op.until = began + reply.remainingMs;
+      if (op.until > Number.MAX_SAFE_INTEGER || !eligible(op)) return false;
+      arm(op);
+      const handle = Object.freeze({ reply, startedAt: began, instance, current: () => eligible(op), stop: () => end(op), });
+      const disposer = onStart(handle);
+      if (typeof disposer !== "function") return false;
+      if (!eligible(op)) { safe(disposer); return false; }
+      op.dispose = disposer; tell(); return eligible(op);
+    }).catch(() => false).then(ok => { if (!ok) end(op); return ok; }).finally(() => { if (physical === token) physical = null; tell(); drain(); });
+    // The logical caller may stop immediately, while the physical request/cancel still owns the lane.
+    tell();
+    return Promise.race([work, cancelled]);
+  };
+  return Object.freeze(api);
+}

package/dist/ui/effect-trial-offer.js

@@ -0,0 +1,31 @@
+/** #1629: closed host display metadata. Neither this object nor its token grants a trial read. */
+const KEYS = ["v", "offer", "id", "title", "expiresAt"], ID = /^[0-9a-f]{32}$/;
+const FORBIDDEN = /(?!\u200d)[\p{Cc}\p{Cf}\p{Zl}\p{Zp}]/u;
+const VISIBLE = /[^\p{M}\p{C}\p{Z}\u115f\u1160\u3164\uffa0\u2800]/u;
+let graphemes = null;
+export function checkEffectTrialOffer(value) {
+  try {
+    if (!value || ![Object.prototype, null].includes(Object.getPrototypeOf(value))) return null;
+    const keys = Reflect.ownKeys(value);
+    if (keys.length !== KEYS.length || keys.some(k => typeof k !== "string" || !KEYS.includes(k))) return null;
+    const x = Object.create(null);
+    for (const key of KEYS) {
+      const d = Object.getOwnPropertyDescriptor(value, key);
+      if (!d || !("value" in d) || !d.enumerable) return null;
+      x[key] = d.value;
+    }
+    if (x.v !== 1 || typeof x.offer !== "string" || !ID.test(x.offer) || typeof x.id !== "string" || !ID.test(x.id)
+      || typeof x.title !== "string" || x.title.length > 400 || x.title.normalize("NFC") !== x.title || x.title.trim() !== x.title
+      || FORBIDDEN.test(x.title) || !VISIBLE.test(x.title) || !Number.isSafeInteger(x.expiresAt) || x.expiresAt < 0) return null;
+    graphemes ??= new Intl.Segmenter(undefined, { granularity: "grapheme" });
+    let count = 0; for (const _part of graphemes.segment(x.title)) if (++count > 40) return null;
+    if (count < 1) return null;
+    return Object.freeze({ v: 1, offer: x.offer, id: x.id, title: x.title, expiresAt: x.expiresAt });
+  } catch { return null; }
+}
+/** Role and sender are host fields, never inferred from a message's text. Start must separately authorize. */
+export function effectTrialMessage(message) {
+  if (!message || message.role !== "status" || message.sender !== "agend" || typeof message.instance !== "string"
+    || message.instance.length < 1 || message.instance.length > 128) return null;
+  return checkEffectTrialOffer(message.effectTrial);
+}

package/dist/ui/effect-trial-panel.js

@@ -0,0 +1,37 @@
+/** #1629: fixed host producer. Creates no frame or request; the admitted app controller owns its lease. */
+import { html, useLayoutEffect, useRef } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { createEffectTrialStage } from "/assets/effect-trial-stage.js";
+register("effectTrial", {
+  en: { label: "Trial", stop: "Stop trial", close: "Close", note: "A bounded sample. Nothing is applied or saved." },
+  "zh-TW": { label: "試播", stop: "停止試播", close: "關閉", note: "僅在此區塊試播，不會套用或儲存。" },
+});
+/** The caller owns authenticated admission, lease/deadline and shared pool. No script/HTML is rendered here. */
+export function EffectTrialPanel({ window: host = globalThis.window, binding, title, current, ownerCss, onStage, onStop, onClose }) {
+  const panel = useRef(null), stage = useRef(null), life = useRef(null), latest = useRef(null);
+  latest.current = { current, ownerCss, onStage, onStop, onClose };
+  const stop = close => {
+    const entry = life.current; if (!entry || (close ? entry.closed : entry.dead)) return;
+    if (close) entry.closed = true;
+    if (!entry.dead) { entry.dead = true; entry.api?.dispose(); }
+    try { (close ? entry.onClose : entry.onStop)?.("stopped"); } catch { /* lease already ended */ }
+  };
+  useLayoutEffect(() => {
+    const entry = { dead: false, closed: false, api: null, onStop, onClose }; life.current = entry;
+    const ended = reason => { if (entry.dead) return; entry.dead = true; try { entry.onStop?.(reason); } catch { /* never revive */ } };
+    try {
+      entry.api = createEffectTrialStage({ window: host, panel: panel.current, stage: stage.current, binding,
+        current: own => !entry.dead && life.current === entry && latest.current.current?.(own) === true,
+        ownerCss: () => latest.current.ownerCss?.(), onStop: ended });
+      if (!entry.api) ended("stage_unavailable");
+      else { latest.current.onStage?.(entry.api); }
+    } catch { entry.api?.dispose(); ended("stage_unavailable"); }
+    return () => { entry.api?.dispose(); entry.dead = true; if (life.current === entry) life.current = null; };
+  }, [host, binding]);
+  return html`<aside ref=${panel} data-trust="preview" class="pv-panel effect-trial-panel" aria-label=${t("effectTrial.label")}>
+    <header class="effect-trial-head"><strong>${t("effectTrial.label")}</strong><span>${typeof title === "string" ? title : ""}</span><button type="button" class="btn" onClick=${() => stop(true)}>${t("effectTrial.close")}</button></header>
+    <div class="effect-trial-controls"><button type="button" class="btn" onClick=${() => stop(false)}>${t("effectTrial.stop")}</button></div>
+    <div class="effect-trial-body"><div ref=${stage} class="effect-trial-stage" aria-hidden="true"></div></div>
+    <p class="effect-trial-note">${t("effectTrial.note")}</p>
+  </aside>`;
+}

package/dist/ui/image-lightbox.js

@@ -90,7 +90,7 @@ function ImageLightbox({ items, index, opener, onClose }) {
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("close", onNativeClose); d.removeEventListener("click", onClick); d.removeEventListener("keydown", onKey); };
   }, [onClose, many, items.length]);
   const label = item.name ? t("chat.lbLabel", item.name) : t("chat.lbLabelNoName");
-  return html`<dialog ref=${ref} class="lb" role="dialog" aria-modal="true" aria-label=${label}>
+  return html`<dialog data-trust="lightbox" ref=${ref} class="lb" role="dialog" aria-modal="true" aria-label=${label}>
     <div class="lb-bar">
       <span class="lb-name" title=${item.name}>${item.name}</span>
       ${many ? html`<span class="lb-count">${t("chat.lbCount", at + 1, items.length)}</span>` : null}

package/dist/ui/panel-chat.js

@@ -12,10 +12,10 @@ import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
-import { detailsPath } from "/assets/app-route.js";
+import { detailsPath, textLinkSegments } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
 import { HeaderTools } from "/assets/header-tools.js";
-import { navigate } from "/assets/app-nav.js";
+import { navigate, navStore } from "/assets/app-nav.js";
 import { Menu } from "/assets/ui-menu.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Empty, Skeleton } from "/assets/ui-states.js";
@@ -23,6 +23,26 @@ import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { savePref } from "/assets/app-prefs.js";
+import { applyTheme, resolvedMode, themeFor, themeImageUrl, themeMenuItems, themesStore } from "/assets/app-themes.js";
+import { colorMenuItem } from "/assets/identity-color.js";
+import { IdentityCard, useCard } from "/assets/identity-card.js";
+import { AgentWidget, instanceBinds, widgetFor } from "/assets/agent-widget.js";
+
+// #1629 r4 §1: the identity card folded into the chat's header — folded by default; open or not is this device's choice.
+const CHAT_CARD_KEY = "agend_chat_card";
+const chatCardOpen = () => { try { return localStorage.getItem(CHAT_CARD_KEY) === "open"; } catch { return false; } };
+function ChatCard({ name, card }) {
+  const [open, setOpen] = useState(chatCardOpen);
+  if (!card) return null;
+  const toggle = () => { const next = !open; setOpen(next); try { if (next) localStorage.setItem(CHAT_CARD_KEY, "open"); else localStorage.removeItem(CHAT_CARD_KEY); } catch { /* this page only */ } };
+  return html`<div data-trust="card" class=${`chat-card${open ? " open" : ""}`}>
+    <button type="button" class="chat-card-toggle" aria-expanded=${open ? "true" : "false"} onClick=${toggle}>
+      <${Icon} name="chevron" size=${14} cls=${open ? "caret" : "caret flipped"} /><span>${t(open ? "card.hide" : "card.show")}</span>
+      ${!open && card.tagline ? html`<span class="chat-card-peek">${card.tagline.text}</span>` : null}
+    </button>
+    ${open ? html`<${IdentityCard} name=${name} card=${card} compact=${true} />` : null}
+  </div>`;
+}
 import "./chat-strings.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
@@ -34,6 +54,9 @@ import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVers
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { LightboxHost, openLightbox } from "./image-lightbox.js";
+import { ChatEffectPosters } from "/ui/js/chat-effect-posters.js";
+import { ChatEffects, chatEffectsMenuAvailable } from "./chat-effects.js";
+import { startAppEffects, getAppEffects } from "./app-effects.js";
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -93,6 +116,7 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   }
   // #1604: the preview opt-in and Tour live in Settings → This device now (and on each preview card's menu).
   installTour();
+  startAppEffects({ store });
   return store;
 }
 
@@ -171,11 +195,40 @@ function NotFound({ name }) {
       action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} /></div></div>`;
 }
 
+/**
+ * #1629: the mode the page is drawn in, followed live (the chosen theme, or the system's for "system"), so an agent's
+ * light and dark palettes swap with it.
+ */
+function useResolvedMode(lease) {
+  const [mode, setMode] = useState(resolvedMode);
+  useEffect(() => {
+    const T = globalThis.AgendTheme;
+    const update = () => setMode(resolvedMode());
+    const off = T && typeof T.onChange === "function" ? T.onChange(update) : null;
+    let mq = null;
+    try { mq = globalThis.matchMedia ? globalThis.matchMedia("(prefers-color-scheme: light)") : null; } catch { mq = null; }
+    if (mq && typeof mq.addEventListener === "function") lease.on(mq, "change", update);
+    return () => { if (typeof off === "function") off(); };
+  }, [lease]);
+  return mode;
+}
+
 function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   const names = useStore(namesStore);   // #1722: which name leads (the title)
+  // #1629: this agent's theme, on this surface only; redrawn when the themes, the viewer's switch or the mode move.
+  useStore(themesStore);
+  const mode = useResolvedMode(lease);
+  const theme = themeFor(name);
+  const themeKey = JSON.stringify(theme);
+  const card = useCard(name, inst.card_v);
   const [dialog, setDialog] = useState(null);       // "delete" | null
   const [wrap, setWrap] = useState(codeWrap);
-  const view = useRef(null), split = useRef(null), thread = useRef(null);
+  const view = useRef(null), split = useRef(null), thread = useRef(null), bg = useRef(null), effectSurface = useRef(null);
+  useLayoutEffect(() => { applyTheme(view.current, theme, mode); }, [themeKey, mode]);
+  useLayoutEffect(() => {
+    const img = bg.current;
+    if (img && img.style && theme && theme.background) img.style.setProperty("--th-bg-opacity", String(theme.background.opacity));
+  }, [themeKey]);
   useEffect(() => { wrapListeners.add(setWrap); return () => wrapListeners.delete(setWrap); }, []);
   // First visit to this instance's chat on this page: its history (a navigation — it counts as use). Back again: nothing.
   useEffect(() => { store.openHistory(name, lease); }, [name]);
@@ -217,6 +270,11 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     running ? null : { key: "start", label: t("chat.start"), icon: "play", onSelect: () => action("start") },
     running ? { key: "restart", label: t("chat.restart"), icon: "restart", onSelect: () => action("restart") } : null,
     running ? { key: "stop", label: t("chat.stopInstance"), icon: "stop", onSelect: () => action("stop") } : null,
+    // #1958: its identity colour and where it shows (the public link too, as profile edits).
+    colorMenuItem(name, inst),
+    // #1629: a person's control over this agent's theme — not over the public link (it only views themes).
+    ...themeMenuItems(name),
+    chatEffectsMenuAvailable() ? { key: "effects", label: t("chatFx.title"), onSelect: () => setDialog("effects") } : null,
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
   const cls = statusClass(inst, exec, awaiting);
@@ -226,17 +284,20 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", inst.model)} aria-label=${t("chat.chipModel", inst.model)} onClick=${() => pick("model")}>${inst.model}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
-    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="chat" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
+    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="chat" />`}><${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} /><${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onClose=${() => setDialog(null)} /><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
+    <${ChatCard} key=${name} name=${name} card=${card} />
+    <${AgentWidget} slot="chat_header" widget=${widgetFor(name, "chat_header")} binds=${instanceBinds(inst, exec, awaiting)} />
     <div class="chat-split" ref=${split}>
-      <div class="chat-main">
+      <div ref=${effectSurface} class=${`chat-main${theme && theme.background ? " has-th-bg" : ""}`}>
+        ${theme && theme.background ? html`<img ref=${bg} class=${`th-bg th-bg-${theme.background.fit}`} src=${themeImageUrl(name, theme.background.image)} alt="" aria-hidden="true" decoding="async" />` : null}
         <${Thread} name=${name} th=${thread} />
-        <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} />
+        <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} workingLabel=${theme ? theme.workingLabel : undefined} />
       </div>
       <${PreviewPanel} name=${name} split=${split} msgs=${() => store.state.msgs[name] || []} subscribe=${(fn) => store.subscribe(fn)}
         keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} allow=${(commit) => setPreviewOptIn(true, commit)} />
     </div>
     <${LightboxHost} />
-    <div class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>
+    <div data-trust="drop" class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>
     ${dialog === "delete" ? html`<${DeleteDialog} name=${name} onClose=${() => setDialog(null)} />` : null}
   </div>`;
 }
@@ -247,9 +308,12 @@ function Thread({ name, th }) {
   const [jump, setJump] = useState({ show: false, unseen: 0 });
   const [empty, setEmpty] = useState(false);
   useLayoutEffect(() => {
+    let live = true;
     const thread = createThread(list.current, scroller.current, {
       t, tf: t, isUser: (x) => store.isUser(x, name), onJump: setJump, onEmpty: setEmpty,
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
+      canTryEffect: x => getAppEffects()?.canTry(x) === true,
+      startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && live && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },
       clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
       replyButtonBusy: (id) => store.state.rbBusy.has(id),
       pollMine: (id) => store.state.pollMine[id],                            // #1823: this device's own vote
@@ -273,13 +337,15 @@ function Thread({ name, th }) {
       else if (kind === "sent") thread.jumpLatest();
     });
     const offPv = P() ? P().onChange(() => thread.refreshCards()) : () => {};
+    const offTrials = getAppEffects()?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? (() => {});
     const offPanel = panelStore.subscribe(() => thread.refreshCards());   // a card shows whether the panel has its block
     const onScroll = () => { store.state.scrollMemo[name] = thread.onScroll(); };
     const sc = scroller.current, ls = list.current;
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      off(); offPv(); offPanel(); offEmojis(); offMentions();
+      live = false;
+      off(); offPv(); offPanel(); offTrials(); offEmojis(); offMentions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       thread.dispose();                     // the whole thread goes: every preview in it stops first
@@ -289,18 +355,18 @@ function Thread({ name, th }) {
   return html`<div class="scroller" ref=${scroller}>
     <div class="thread" ref=${list} role="log" aria-live="off" aria-label=${t("chat.conversationWith", name)}></div>
     ${empty ? html`<${Empty} icon="chat" title=${t("chat.noMessages")} />` : null}
-    ${jump.show ? html`<button type="button" class="jump-latest" onClick=${() => th.current && th.current.jumpLatest()}>
+    ${jump.show ? html`<button data-trust="thread-control" type="button" class="jump-latest" onClick=${() => th.current && th.current.jumpLatest()}>
       <${Icon} name="down" size=${16} />${jump.unseen > 0 ? t("chat.newBelow", jump.unseen) : t("chat.jumpLatest")}</button>` : null}
   </div>`;
 }
 
 /** Everything under the thread: prompts, the working line, a failed send, files waiting, and the composer. */
-function Dock({ name, inst, lease, exec, awaiting }) {
+function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
   useChatTick(name, ["state"]);
   const s = store.state;
-  return html`<div class="dock"><div class="dock-col">
+  return html`<div data-trust="composer" class="dock"><div class="dock-col">
     <${Prompts} name=${name} />
-    <${WorkBar} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} />
+    <${WorkBar} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} workingLabel=${workingLabel} />
     <${CommandCard} name=${name} lease=${lease} />
     <${QuickActions} name=${name} inst=${inst} lease=${lease} />
     ${s.failedSends[name] ? html`<div class="failed-send" role="alert"><span>${t("chat.notSent")}</span><span class="txt">${s.failedSends[name]}</span>
@@ -347,14 +413,14 @@ function QuickActions({ name, inst, lease }) {
 function Prompts({ name }) {
   const list = store.promptsFor(name);
   if (!list.length) return null;
-  return html`<div class="prompts" aria-live="polite">${list.map(p => html`<div key=${p.nonce} class=${`prompt${p.resolved ? " done" : ""}`} role="group" aria-label=${p.text}>
-    <div class="txt">${p.resolved ? (p.outcome || t("chat.promptGone")) : p.text}</div>
+  return html`<div data-trust="permission" class="prompts" aria-live="polite">${list.map(p => html`<div key=${p.nonce} class=${`prompt${p.resolved ? " done" : ""}`} role="group" aria-label=${p.text}>
+    <div class="txt">${p.resolved ? (p.outcome || t("chat.promptGone")) : textLinkSegments(p.text, p.links).map(sg => sg.href ? html`<a data-trust="link" class="st-link" href=${sg.href}>${sg.text}</a>` : sg.text)}</div>
     ${p.resolved ? null : html`<div class="acts">${p.actions.map(a => html`<button key=${a.id} type="button" class="btn" disabled=${!!p.busy} onClick=${() => store.answerPrompt(p, a.id)}>${a.label}</button>`)}
       ${p.busy ? html`<span class="wait">${t("chat.promptAnswering")}</span>` : null}</div>`}</div>`)}</div>`;
 }
 
 /** "<name> is working… 0:42", "looks stuck", "Stopping…", or what it waits on at its terminal. Text only. */
-function WorkBar({ name, lease, exec, awaiting }) {
+function WorkBar({ name, lease, exec, awaiting, workingLabel }) {
   const s = store.state;
   const busy = R().isBusy(exec) ? exec : "";
   const kind = awaiting != null ? "awaiting" : s.stopping[name] && busy ? "stopping" : busy;
@@ -365,7 +431,9 @@ function WorkBar({ name, lease, exec, awaiting }) {
     return () => lease.clear(h);
   }, [kind, lease]);
   if (!kind) return null;
-  const label = t(kind === "stuck" ? "chat.stuck" : kind === "stopping" ? "chat.stopping" : kind === "awaiting" ? "chat.awaiting" : "chat.working", name);
+  // #1629: the agent's own working label (its theme), shown as text — only for "working", never for the other states.
+  const label = kind === "working" && workingLabel ? workingLabel
+    : t(kind === "stuck" ? "chat.stuck" : kind === "stopping" ? "chat.stopping" : kind === "awaiting" ? "chat.awaiting" : "chat.working", name);
   const since = s.workingSince[name];
   return html`<div class=${`work-bar ${kind}`}><span class="pulse" aria-hidden="true"></span><span class="lbl">${label}</span>
     ${kind === "awaiting" ? html`<span class="note" title=${t("chat.approxNote")}>${awaiting || t("chat.approxNote")}</span>`
@@ -428,7 +496,7 @@ function Composer({ name, lease, busy }) {
   };
   const optId = (c) => `cmd-${c.name}`;
   return html`<div class="composer-box">
-    ${palette ? html`<ul class="cmd-palette" id="cmdPalette" role="listbox" aria-label=${t("chat.cmdCommands")}>
+    ${palette ? html`<ul data-trust="palette" class="cmd-palette" id="cmdPalette" role="listbox" aria-label=${t("chat.cmdCommands")}>
       ${palette.length ? palette.map((c) => html`<li key=${c.name} id=${optId(c)} role="option" aria-selected=${c === pick ? "true" : "false"}
           class=${c === pick ? "on" : ""} onMouseDown=${(e) => { e.preventDefault(); complete(c); }}>
           <span class="cmd-name mono">/${c.name}${c.arg ? html` <span class="cmd-arg">${c.arg}</span>` : null}</span><span class="cmd-desc">${t(`chat.cmd_${c.name}`)}</span></li>`)

package/dist/ui/panel-details.js

@@ -16,6 +16,10 @@ import { settingsPath } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
 import { HeaderTools } from "/assets/header-tools.js";
 import { Menu } from "/assets/ui-menu.js";
+import { themeMenuItems, themesStore } from "/assets/app-themes.js";
+import { colorMenuItem } from "/assets/identity-color.js";
+import { IdentityCard, useCard } from "/assets/identity-card.js";
+import { AgentWidget, instanceBinds, widgetFor } from "/assets/agent-widget.js";
 import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { toast } from "/assets/ui-toast.js";
 import "./chat-strings.js";
@@ -27,10 +31,10 @@ export function DetailsPanel({ route, navKey }) {
   const name = route.instance;
   const inst = app.instances.find((i) => i.name === name) || null;
   useEffect(() => { setTitle(`${name} · ${t("app.details")}`); }, [name, navKey]);
-  if (!app.ready) return html`<div class="panel p-details"><${PanelHeader} title=${name} /><div class="panel-body"><${Skeleton} lines=${6} /></div></div>`;
+  if (!app.ready) return html`<div data-effect-panel="details" class="panel p-details"><${PanelHeader} title=${name} /><div data-trust="panel-content" class="panel-body"><${Skeleton} lines=${6} /></div></div>`;
   if (!inst) {
-    return html`<div class="panel p-details"><${PanelHeader} title=${name} />
-      <div class="panel-body center"><${Empty} icon="alert" title=${t("chat.notFound", name)} hint=${t("chat.notFoundHint")}
+    return html`<div data-effect-panel="details" class="panel p-details"><${PanelHeader} title=${name} />
+      <div data-trust="panel-content" class="panel-body center"><${Empty} icon="alert" title=${t("chat.notFound", name)} hint=${t("chat.notFoundHint")}
         action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} /></div></div>`;
   }
   return html`<${DetailsView} key=${name} name=${name} inst=${inst} navKey=${navKey} exec=${app.exec[name]}
@@ -38,7 +42,10 @@ export function DetailsPanel({ route, navKey }) {
 }
 
 function DetailsView({ name, inst, navKey, exec, awaiting }) {
+  useStore(themesStore);   // #1629: Lock / Unlock follows the themes as read
   const lease = useLease(`details:${name}`);
+  // #1629 r4 §1: the identity card at the top, read when the status frame's card_v moves.
+  const card = useCard(name, inst.card_v);
   const [d, setD] = useState(null);
   const [failed, setFailed] = useState(false);
   const [busy, setBusy] = useState("");
@@ -92,6 +99,8 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
     { key: "edit", label: t("chat.dEditInSettings"), icon: "settings", onSelect: editInSettings },
     st === "running" ? { key: "pause", label: t("chat.dPause"), icon: "pause", disabled: !!busy, onSelect: () => pauseWake("pause") } : null,
     st === "paused" ? { key: "wake", label: t("chat.dWake"), icon: "play", disabled: !!busy, onSelect: () => pauseWake("wake") } : null,
+    colorMenuItem(name, inst),   // #1958
+    ...themeMenuItems(name),   // #1629
   ] : [
     { key: "edit", label: t("chat.dEditInSettings"), icon: "settings", onSelect: editInSettings },
     st === "running" ? null : st === "paused" ? null : { key: "start", label: t("chat.start"), icon: "play", disabled: !!busy, onSelect: () => lifecycle("start") },
@@ -99,6 +108,9 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
     st === "running" ? { key: "stop", label: t("chat.stopInstance"), icon: "stop", disabled: !!busy, onSelect: () => lifecycle("stop") } : null,
     st === "running" ? { key: "pause", label: t("chat.dPause"), icon: "pause", disabled: !!busy, onSelect: () => pauseWake("pause") } : null,
     st === "paused" ? { key: "wake", label: t("chat.dWake"), icon: "play", disabled: !!busy, onSelect: () => pauseWake("wake") } : null,
+    colorMenuItem(name, inst),   // #1958: its identity colour (the public link too)
+    // #1629: a person's Lock and Reset of this agent's own web theme (not over the public link).
+    ...themeMenuItems(name),
   ];
 
   const cls = statusClass(inst, exec, awaiting);
@@ -141,8 +153,9 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
         <span class="mono muted">${a.timestamp ? new Date(`${a.timestamp.replace(" ", "T")}Z`).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}</span>
         <span class="ev">${a.event}</span> ${a.summary || ""}</div>`) : html`<p class="note">${t("chat.dNoActivity")}</p>`}</section>`;
   }
-  return html`<div class="panel p-details">
+  return html`<div data-effect-panel="details" class="panel p-details">
     <${PanelHeader} title=${name} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="details" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
-    <div class="panel-body"><div class="col" ref=${body}>${busy ? html`<p class="note" role="status">${t("chat.dWorking")}</p>` : null}${content}</div></div>
+    <div data-trust="panel-content" class="panel-body"><div class="col" ref=${body}>${busy ? html`<p class="note" role="status">${t("chat.dWorking")}</p>` : null}<${IdentityCard} name=${name} card=${card} />
+      <${AgentWidget} slot="details" widget=${widgetFor(name, "details")} binds=${instanceBinds(inst, exec, awaiting)} />${content}</div></div>
   </div>`;
 }

package/dist/ui/panel-fleet.js

@@ -134,11 +134,11 @@ export function FleetPanel({ route, navKey }) {
   // #1685: host memory pressure slowing or holding new agents — shown here, where macOS's routine "elevated" is not a chat notice.
   const { hostMemory } = useStore(appStore);
   const sub = hostMemory ? html`<span class=${`status host-mem ${hostMemory}`} role="status"><span class=${`dot ${hostMemory === "critical" ? "bad" : "warn"}`} aria-hidden="true"></span>${t(`fleet.hostMemory_${hostMemory}`)}</span>` : null;
-  return html`<div class="panel p-fleet">
+  return html`<div data-effect-panel="fleet" class="panel p-fleet">
     <${PanelHeader} title=${t("fleet.title")} sub=${sub}><${DocsLink} /><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
-    <nav class="seg" aria-label=${t("fleet.title")}>${FLEET_TABS.map(k => html`<a key=${k} href=${fleetPath(k)} class=${`seg-item${k === tab ? " active" : ""}`}
+    <nav data-trust="panel-navigation" class="seg" aria-label=${t("fleet.title")}>${FLEET_TABS.map(k => html`<a key=${k} href=${fleetPath(k)} class=${`seg-item${k === tab ? " active" : ""}`}
       aria-current=${k === tab ? "page" : undefined}><${Icon} name=${ICONS[k]} size=${16} /><span>${t(`fleet.${k}`)}</span></a>`)}</nav>
-    <div class="panel-body"><div class=${`col${tab === "org" || tab === "cache" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
+    <div data-trust="panel-content" class="panel-body"><div class=${`col${tab === "org" || tab === "cache" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
   </div>`;
 }
 

package/dist/ui/panel-log.js

@@ -200,10 +200,10 @@ export function LogPanel({ route, navKey }) {
   const name = route.instance;
   const inst = app.instances.find((i) => i.name === name) || null;
   useEffect(() => { setTitle(`${name} · ${t("app.log")}`); }, [name, navKey]);
-  if (!app.ready) return html`<div class="panel p-log"><${PanelHeader} title=${name} /><div class="panel-body"><${Skeleton} lines=${6} /></div></div>`;
+  if (!app.ready) return html`<div data-effect-panel="log" class="panel p-log"><${PanelHeader} title=${name} /><div data-trust="panel-content" class="panel-body"><${Skeleton} lines=${6} /></div></div>`;
   if (!inst) {
-    return html`<div class="panel p-log"><${PanelHeader} title=${name} />
-      <div class="panel-body center"><${Empty} icon="alert" title=${t("chat.notFound", name)} hint=${t("chat.notFoundHint")}
+    return html`<div data-effect-panel="log" class="panel p-log"><${PanelHeader} title=${name} />
+      <div data-trust="panel-content" class="panel-body center"><${Empty} icon="alert" title=${t("chat.notFound", name)} hint=${t("chat.notFoundHint")}
         action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} /></div></div>`;
   }
   return html`<${LogView} key=${name} name=${name} inst=${inst} navKey=${navKey} exec=${app.exec[name]}
@@ -372,13 +372,13 @@ function LogView({ name, inst, navKey, exec, awaiting }) {
       ${items.length ? html`<ol class="log-list" role="log" aria-label=${t("app.log")}>${items.map((x, i) => html`<${Row} key=${`${x.kind}:${x.id}`} x=${x} prev=${items[i - 1]} />`)}</ol>`
         : html`<p class="note log-empty">${tl("empty")}</p>`}`;
   }
-  const tools = state.phase === "on" ? html`<div class="log-bar" role="group" aria-label=${tl("filter")}>
+  const tools = state.phase === "on" ? html`<div data-trust="panel-controls" class="log-bar" role="group" aria-label=${tl("filter")}>
       ${["all", "tools", "errors"].map((k) => html`<button key=${k} type="button" class=${`chip-btn${filter === k ? " on" : ""}`} aria-pressed=${filter === k ? "true" : "false"} onClick=${() => setFilter(k)}>${tl(k)}</button>`)}
       <span class="grow"></span><span class="log-live" title=${tl("live")}><span class="dot running" aria-hidden="true"></span>${tl("live")}</span></div>` : null;
-  return html`<div class="panel p-log">
+  return html`<div data-effect-panel="log" class="panel p-log">
     <${PanelHeader} title=${name} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="log" />`}><${HeaderTools} navKey=${navKey} /><${HeaderSlot} /></${PanelHeader}>
     ${tools}
-    <div class="panel-body log-body" ref=${scroller} onScroll=${onScroll}><div class="col log-col">${content}</div></div>
+    <div data-trust="panel-content" class="panel-body log-body" ref=${scroller} onScroll=${onScroll}><div class="col log-col">${content}</div></div>
   </div>`;
 }
 

package/dist/ui/panel-needs.js

@@ -123,9 +123,9 @@ export function NeedsPanel({ navKey }) {
   useEffect(() => { if (owner) return owner.subscribe(() => tick((n) => n + 1)); return undefined; }, [owner, lease]);
   const groups = groupNeeds(items);
   const nowMs = Date.now();
-  return html`<div class="panel p-needs">
+  return html`<div data-effect-panel="needs" class="panel p-needs">
     <${PanelHeader} title=${tn("title")} sub=${items.length ? t("app.needsCount", items.length) : null} />
-    <div class="panel-body"><div class="col">
+    <div data-trust="panel-content" class="panel-body"><div class="col">
       ${!items.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn(chatApp ? "emptyHint" : "emptyHintWeb")} />`
         : groups.map((g) => html`<section key=${g.instance} class="n-group" aria-label=${g.instance}>
           <h2 class="n-group-head"><a href=${chatPath(g.instance)} title=${g.instance}>${nameFor(g.instance)}</a></h2>
@@ -175,7 +175,7 @@ function NeedsItem({ item, nowMs, owner }) {
     setClaim("acks", item.id, res && res.ok ? "done" : null);
     toast((body && (body.message || body.error)) || t("app.failed"), !!(res && res.ok));
   };
-  return html`<article class=${`n-item${BAD.has(item.reason) ? " bad" : ""}`}>
+  return html`<article data-trust="permission" class=${`n-item${BAD.has(item.reason) ? " bad" : ""}`}>
     <span class="n-icon"><${Icon} name=${ICON[item.type] || "alert"} size=${18} /></span>
     <div class="n-body">
       <div class="n-title"><strong>${reasonText(item)}</strong><span class="n-age">${age(item.since, nowMs)}</span></div>