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

package/dist/ui/panel-needs.js

@@ -23,25 +23,25 @@ import { notifyStore, notifySupport, reasonText, refreshNotify, setNotify } from
 
 register("needs", {
   en: {
-    title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in Discord.",
+    title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in your chat app's General.", emptyHintWeb: "When an agent waits for you, it shows here.",
     open: "Open chat", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
     ageNow: "just now", ageMin: "{0} min", ageHour: "{0} h", ageDay: "{0} d",
     notifyTitle: "Notify me on this device", notifyOn: "Notifications are on for this browser while a tab is open.",
     notifyOff: "Get a desktop notification when something new needs you while this tab is in the background.",
     notifyDenied: "This browser blocked notifications for AgEnD. Allow them in the site settings to turn this on.",
-    notifyMobile: "On a phone, rely on the Discord notification: a new item is a new post in General.",
+    notifyMobile: "On a phone, rely on your chat app's notification: a new item is a new post in General.", notifyMobileWeb: "On a phone, open this page to see what needs you.",
     notifyInsecure: "Notifications need a secure address (localhost or the HTTPS public link), not a plain-HTTP LAN address.",
     notifyUnsupported: "This browser cannot show notifications.", turnOn: "Turn on", turnOff: "Turn off",
     typePrompt: "Fleet prompt", typeAwaiting: "At its terminal", typeInstance: "Instance", typeDelivery: "Delivery",
   },
   "zh-TW": {
-    title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在 Discord。",
+    title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
     open: "開啟聊天", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
     ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
     notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
     notifyOff: "分頁在背景時，有新的事等你處理就跳出桌面通知。",
     notifyDenied: "這個瀏覽器封鎖了 AgEnD 的通知。請在網站設定中允許後再開啟。",
-    notifyMobile: "在手機上請以 Discord 通知為主：每個新項目都會在 General 發一則新訊息。",
+    notifyMobile: "在手機上請以聊天 app 的通知為主：每個新項目都會在 General 發一則新訊息。", notifyMobileWeb: "在手機上請打開這個頁面查看等你處理的事。",
     notifyInsecure: "通知需要安全的網址（localhost 或 HTTPS 公開連結），區網的一般 HTTP 網址不行。",
     notifyUnsupported: "這個瀏覽器無法顯示通知。", turnOn: "開啟", turnOff: "關閉",
     typePrompt: "Fleet 提示", typeAwaiting: "在終端機上", typeInstance: "Instance", typeDelivery: "傳送",
@@ -108,7 +108,9 @@ export function groupNeeds(items) {
 
 export function NeedsPanel({ navKey }) {
   const lease = useLease(navKey);
-  const { needs, chatOwner: owner, instances } = useStore(appStore);
+  const { needs, chatOwner: owner, instances, connections } = useStore(appStore);
+  // #1854: a fleet with no chat connection (web only, or not known yet) has no General to point at.
+  const chatApp = connections > 0;
   const names = useStore(namesStore);
   // #1630/#1722: a group is headed by the instance's leading name (the "Names" preference), as the sidebar shows it.
   const nameFor = (instance) => { const it = (instances || []).find((i) => i && i.name === instance); return it ? namesOf(it, names.primary).primary : instance; };
@@ -121,10 +123,10 @@ 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">
-      ${!items.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn("emptyHint")} />`
+    <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>
           ${g.items.map((item) => html`<${NeedsItem} key=${item.id} item=${item} nowMs=${nowMs} owner=${owner} />`)}
@@ -173,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>
@@ -196,7 +198,8 @@ function NotifyToggle() {
   useEffect(() => { refreshNotify(); }, []);
   const on = state === "on";
   const toggle = () => { setNotify(!on); };
-  const note = support === "mobile" ? tn("notifyMobile") : support === "insecure" ? tn("notifyInsecure")
+  const { connections } = useStore(appStore);
+  const note = support === "mobile" ? tn(connections > 0 ? "notifyMobile" : "notifyMobileWeb") : support === "insecure" ? tn("notifyInsecure")
     : support !== "ok" ? tn("notifyUnsupported") : state === "denied" ? tn("notifyDenied") : on ? tn("notifyOn") : tn("notifyOff");
   return html`<section class="card n-notify"><h3>${tn("notifyTitle")}</h3>
     <p class="note">${note}</p>

package/dist/ui/panel-settings.js

@@ -24,7 +24,7 @@ import "./settings-strings.js";
 import { api, attach, confirmedWrite, newKey } from "./settings-confirm.js";
 import { dismissOperation, operationActive, restartFleet, startOperation, takeLeftover } from "./settings-apply.js";
 import {
-  ACCESS_MODES, AGENT_MODES, DEFAULT_SCHEMA, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS, VISIBILITY_MODES, batchImpact,
+  ACCESS_MODES, AGENT_MODES, DEFAULT_SCHEMA, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS, VISIBILITY_MODES, batchImpact,
   changedFields, channelId, channelsOf, chLabel, connectionState, effectiveSummary, fleetModel, fromYaml, fullModelRequests, groupAgents,
   hasOwn, impactOf, localeOptions, defaultsImpact, requestImpact, nonNegative, positive, replyGuardSupported, shortName, STATUS_ORDER, toYaml,
   visibilityDefault, worstImpact,
@@ -41,9 +41,10 @@ import { takeAgentRequest } from "./settings-request.js";
 import { setPreviewOptIn } from "./panel-chat.js";
 import { startTour } from "./chat-tour.js";
 import "./chat-strings.js";
+import { AppearanceSection } from "./settings-appearance.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
-const ICONS = { device: "user", agents: "bot", bots: "plug", classic: "room", general: "sliders", web: "globe", advanced: "code" };
+const ICONS = { device: "user", appearance: "palette", agents: "bot", bots: "plug", classic: "room", general: "sliders", web: "globe", advanced: "code" };
 const RELEASES = "https://github.com/songsid/AgEnD/releases";
 
 /** GET under the panel's lease → { ok, status, body }. */
@@ -224,6 +225,8 @@ export function SettingsPanel({ route, navKey }) {
   }, [!!ctx, navKey]);
   // #1604: This device needs no configuration: shown at once, whatever the configuration read does.
   const sectionBody = section === "device" ? html`<${DeviceSection} />`
+    // #1629 r4 §3: Appearance is the person's own (no configuration read): shown at once, like Preferences.
+    : section === "appearance" ? html`<${AppearanceSection} />`
     : !data ? html`<${Skeleton} lines=${6} />`
     : data.error ? html`<${ErrorState} message=${tn("configLoadFailed")} onRetry=${reload} />`
     : section === "agents" ? html`<${Agents} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`
@@ -236,14 +239,14 @@ export function SettingsPanel({ route, navKey }) {
   const open = dialog && dialog.key === navKey ? dialog : null;
   const close = () => setDialog(null);
   const searchable = section === "agents" || section === "bots" || section === "classic";
-  return html`<div class="panel p-settings">
+  return html`<div data-effect-panel="settings" class="panel p-settings">
     <${PanelHeader} title=${tn("title")} sub=${data && data.version ? html`<a class="pill ver" href=${data.version.includes("-") ? `${RELEASES}/latest` : `${RELEASES}/tag/v${data.version}`} target="_blank" rel="noopener">v${data.version}</a>` : null}>
       <button type="button" class="btn btn-ghost btn-sm" disabled=${!ctx} onClick=${() => setDialog({ kind: "wizard", key: navKey })}><${Icon} name="wand" size=${16} /><span class="hide-narrow">${tn("wizardButton")}</span></button>
       <button type="button" class="icon-btn" aria-label=${tn("helpButton")} title=${tn("helpButton")} onClick=${() => setDialog({ kind: "help", key: navKey })}><${Icon} name="info" /></button>
     </${PanelHeader}>
-    <nav class="seg" aria-label=${tn("title")}>${SETTINGS_SECTIONS.map((k) => html`<a key=${k} href=${settingsPath(k)} class=${`seg-item${k === section ? " active" : ""}`}
+    <nav data-trust="panel-navigation" class="seg" aria-label=${tn("title")}>${SETTINGS_SECTIONS.map((k) => html`<a key=${k} href=${settingsPath(k)} class=${`seg-item${k === section ? " active" : ""}`}
       aria-current=${k === section ? "page" : undefined}><${Icon} name=${ICONS[k]} size=${16} /><span>${tn(`sec_${k}`)}</span></a>`)}</nav>
-    <div class="panel-body"><div class="col">
+    <div data-trust="panel-content" class="panel-body"><div class="col">
       ${searchable ? html`<div class="s-toolbar"><label class="s-search"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("searchAll")}</span>
         <input type="search" value=${search} placeholder=${tn("searchAll")} onInput=${(e) => setSearch(e.target.value)} /></label></div>` : null}
       ${op ? html`<${OperationCard} op=${op} schema=${data && data.schema} />` : null}
@@ -270,7 +273,11 @@ export function DeviceSection() {
   const replay = () => {
     let last = null;
     try { last = localStorage.getItem("agend_last_instance"); } catch { /* none */ }
-    navigate(last ? chatPath(last) : "/ui");
+    // #1854: the tour is about an agent's chat — with no agent to open (none remembered, or it is gone), say so instead
+    // of opening an empty chat that waits ~3 s and shows nothing.
+    const { instances } = appStore.get();
+    if (!last || !(instances || []).some((i) => i && i.name === last)) { toast(t("chat.tourNoAgent"), false); return; }
+    navigate(chatPath(last));
     // This replay belongs to the navigation it just made — that one, by its sequence number, not by URL (A → B → A, or
     // the same path again, is a new navigation). It did not happen (a leave guard said no) or it is not the chat:
     // nothing. Left meanwhile (another page, another navigation): nothing (#1609 review).
@@ -285,7 +292,7 @@ export function DeviceSection() {
     let tries = 0;
     const go = () => {
       if (!current()) return;
-      if (!document.getElementById("sendBtn")) { if (++tries <= 30) setTimeout(go, 100); return; }
+      if (!document.getElementById("sendBtn")) { if (++tries <= 30) setTimeout(go, 100); else toast(t("chat.tourNoAgent"), false); return; }
       const here = document.getElementById("msgIn") || document.getElementById("main");
       if (here && typeof here.focus === "function") here.focus();
       if (current()) startTour();
@@ -293,7 +300,8 @@ export function DeviceSection() {
     setTimeout(go, 0);
   };
   const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
-  return html`<section class="card s-device s-synced"><h3>${tn("syncedTitle")}</h3>
+  return html`<${ProfileCard} />
+  <section class="card s-device s-synced"><h3>${tn("syncedTitle")}</h3>
     <p class="sub">${publicLink ? tn("syncedPublicLink") : tn("syncedLead")}</p>
     <${DevicePrefs} labels=${true} />
     ${P() ? html`<label class="check"><input type="checkbox" checked=${on} onChange=${(e) => { const want = e.target.checked; setPreviewOptIn(want).then(setOn); }} />
@@ -305,6 +313,52 @@ export function DeviceSection() {
   </section>`;
 }
 
+/**
+ * #1827: who agents see when this person writes from the web. Signed in with a code sent to their Discord or Telegram
+ * account, they are that account — its user id, and its name unless they choose another (it follows them to every
+ * device, the public link included). Otherwise "web-user", as before. The host checks a name in full and says why it
+ * refuses one; this only shows what it says.
+ */
+const view = (b) => ({ phase: "ready", name: b.name || "", shown: b.shown || "", id: b.id || "", bound: b.bound === true, platform: b.platform_name || "", error: "" });
+export function ProfileCard() {
+  const [state, setState] = useState({ phase: "loading", name: "", shown: "", id: "", bound: false, platform: "", error: "" });
+  const [draft, setDraft] = useState("");
+  const lease = useLease();
+  useEffect(() => {
+    let live = true;
+    api("/ui/profile").then((r) => {
+      if (!live) return;
+      if (!r.ok || !r.body) { setState((s) => ({ ...s, phase: "unavailable" })); return; }
+      setState(view(r.body));
+      setDraft(r.body.name || "");
+    }).catch(() => { if (live) setState((s) => ({ ...s, phase: "unavailable" })); });
+    return () => { live = false; };
+  }, []);
+  if (state.phase === "unavailable") return null;
+  const save = (clear) => {
+    setState((s) => ({ ...s, phase: "saving", error: "" }));
+    api("/ui/profile", { method: "POST", body: JSON.stringify({ name: clear ? null : draft }) }).then((r) => {
+      if (lease && !lease.current()) return;
+      if (!r.ok) { setState((s) => ({ ...s, phase: "ready", error: (r.body && r.body.error) || tn("profileFailed") })); return; }
+      setState(view(r.body));
+      setDraft(r.body.name || "");
+      toast(tn("profileSaved", r.body.shown || "web-user"));
+    }).catch(() => setState((s) => ({ ...s, phase: "ready", error: tn("profileFailed") })));
+  };
+  const busy = state.phase !== "ready";
+  const changed = draft.trim() !== state.name;
+  return html`<section class="card s-device s-profile"><h3>${tn("profileTitle")}</h3>
+    <p class="sub">${state.bound ? tn("profileLeadBound") : tn("profileLeadUnbound")}</p>
+    <div class="field"><label for="profile-name">${tn("profileName")}</label>
+      <input id="profile-name" type="text" maxlength="200" autocomplete="nickname" value=${draft} disabled=${busy}
+        placeholder=${state.platform || "web-user"} aria-invalid=${state.error ? "true" : "false"} aria-describedby="profile-help"
+        onInput=${(e) => setDraft(e.target.value)} onKeyDown=${(e) => { if (e.key === "Enter" && changed && draft.trim()) save(false); }} />
+      <p class="sub" id="profile-help">${state.error ? html`<span class="err" role="alert">${state.error}</span>` : tn("profileHelp", state.shown || "web-user", state.id)}</p></div>
+    <div class="s-device-row"><button type="button" class="btn primary" disabled=${busy || !changed || !draft.trim()} onClick=${() => save(false)}>${tn("profileSave")}</button>
+      ${state.name ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => save(true)}>${state.bound ? tn("profileUseAccount", state.platform || "web-user") : tn("profileClear")}</button>` : null}</div>
+  </section>`;
+}
+
 /** The operation in hand still owns Apply: its writes and job, or a restart of AgEnD from the press to its end. */
 const opBusy = (op) => !!op && (["writing", "posting", "watching"].includes(op.phase) || op.restart === "busy");
 function dropSecrets(staged) { for (const c of staged.values()) if (c.connectionSecret) c.connectionSecret.secret = ""; }
@@ -588,7 +642,7 @@ function General({ ctx }) {
     backend: d.backend || "claude-code", model: d.model || "", locale: d.locale || "", auto: String(d.auto_pause_after ?? 0),
     agent_mode: d.agent_mode || "mcp", tool_set: d.tool_set || "full", tool_progress: d.tool_progress ?? "off",
     visibility: visibilityDefault(d), reply: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
-    hangOn: hang.enabled !== false, hang: String(hang.timeout_minutes ?? 15),
+    hangOn: hang.enabled !== false, hang: String(hang.timeout_minutes ?? HANG_TIMEOUT_DEFAULT_MINUTES),
     concurrency: String(startup.concurrency ?? 10), stagger: String(startup.stagger_delay_ms ?? 500),
     classicBackend: c.backend || d.backend || "claude-code",
     classicToolProgress: c.tool_progress ?? d.tool_progress ?? "off", classicToolProgressInherit: !hasOwn(c, "tool_progress"),
@@ -617,7 +671,7 @@ function General({ ctx }) {
       backend: d.backend || "claude-code", model: d.model || undefined, locale: d.locale || null, auto_pause_after: d.auto_pause_after ?? 0,
       agent_mode: d.agent_mode || "mcp", tool_set: d.tool_set || "full", tool_progress: d.tool_progress ?? "off",
       cross_instance_visibility: visibilityDefault(d), reply_completion_guard: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
-      hang_detector: { enabled: hang.enabled !== false, timeout_minutes: hang.timeout_minutes ?? 15 },
+      hang_detector: { enabled: hang.enabled !== false, timeout_minutes: hang.timeout_minutes ?? HANG_TIMEOUT_DEFAULT_MINUTES },
       startup: { concurrency: startup.concurrency ?? 10, stagger_delay_ms: startup.stagger_delay_ms ?? 500 },
     });
     const oc = original.c;
@@ -710,7 +764,7 @@ function General({ ctx }) {
  */
 export const WEB_READ_ONLY = [
   "web.allowed_hosts", "web.view_access", "web.notify_login", "web.preview", "web.preview_port", "web.preview_origin", "web.preview_on_public_link",
-  "web.usage_panel", "web.provider_secrets", "web_terminal.bind", "web_terminal.tunnel",
+  "web.usage_panel", "web.provider_secrets", "web.upload_max_file_mb", "web.upload_max_total_mb", "web_terminal.bind", "web_terminal.tunnel",
 ];
 function WebSection({ ctx, staged }) {
   const { schema } = ctx;
@@ -864,7 +918,7 @@ function Developer({ ctx }) {
 /** Staged, not applied: the count, what it will cost, Discard and Apply. */
 function PendingBar({ staged, busy, onApply, onDiscard }) {
   const kinds = [...new Set([...staged.values()].map((c) => c.impact))];
-  return html`<div class="s-pending" role="region" aria-label=${tn("pendingRegion")}>
+  return html`<div data-trust="panel-controls" class="s-pending" role="region" aria-label=${tn("pendingRegion")}>
     <strong>${tn("changesPending", staged.size)}</strong>
     <span class="note">${kinds.map(impactText).join(" · ")}</span>
     <span class="grow"></span>

package/dist/ui/preview-panel.js

@@ -16,6 +16,7 @@ import { Icon } from "/assets/ui-icons.js";
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
+import { EffectTrialPanel } from "./effect-trial-panel.js";
 import { chatTime, onDayChange } from "./chat-time.js";
 
 const R = () => globalThis.AgendChatRender;
@@ -43,14 +44,25 @@ export const panelClaims = () => claims;
 /** The frame's key in preview.js: its own, so the card that opened it keeps its own state. */
 export const frameKey = (key) => `panel:${key}`;
 /** Show `spec` in the panel; `run`: start it there (the card's "Open in panel" click). The block shown before stops. */
+function retire(open) {
+  if (!open) return;
+  if (open.kind === "trial") { try { open.handle.stop(); } catch { /* host controller owns cleanup */ } }
+  else if (P()) P().stop(frameKey(open.key), "stopped", "");
+}
 export function openPanel(spec, { run = false } = {}) {
-  if (state.open && P()) P().stop(frameKey(state.open.key), "stopped", "");
-  set({ open: { ...spec }, run: run ? ++runs : 0 });
+  const old = state.open;
+  set({ open: { ...spec, kind: "html" }, run: run ? ++runs : 0 });
+  retire(old); // State changes first: cleanup reentry cannot close a newer panel.
+}
+/** A checked controller handle enters the existing component slot; no HTML run token is issued. */
+export function openTrialPanel(spec) {
+  const old = state.open;
+  set({ open: { ...spec, kind: "trial" }, run: 0 }); retire(old);
 }
-/** Close the panel: its frame stops first. */
+/** Close publishes the empty slot before old-owner callbacks can reenter. */
 export function closePanel() {
-  if (state.open && P()) P().stop(frameKey(state.open.key), "stopped", "");
-  if (state.open) set({ open: null, run: 0 });
+  const old = state.open; if (!old) return;
+  set({ open: null, run: 0 }); retire(old);
 }
 /** The card key the panel shows, or null. */
 export const shownKey = () => (state.open ? state.open.key : null);
@@ -67,7 +79,7 @@ export function htmlTitle(code) {
  * without one, the newest block does. `msgs` in order; `keyOf` makes a message's key.
  */
 export function newerVersion(open, msgs, keyOf) {
-  if (!open || !Array.isArray(msgs)) return null;
+  if (!open || open.kind === "trial" || !Array.isArray(msgs)) return null;
   const at = msgs.findIndex(x => keyOf(x) === open.msgKey);
   if (at < 0) return null;
   // An attached file: a later agent reply attaching a file of the same name is its newer version. Its HTML is read
@@ -132,7 +144,8 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const pending = useRef(0);      // #1704: the card's click, waiting for this device's Allow (the st.run it came with)
   const ownAllow = useRef(0);     // while this panel's own Allow commits its choice: the click it answers (not cancelled by it)
   const holder = useRef(null), divider = useRef(null), panel = useRef(null);
-  const open = st.open && st.open.instance === name ? st.open : null;
+  const trial = st.open?.kind === "trial" && st.open.instance === name ? st.open : null;
+  const open = st.open?.kind !== "trial" && st.open?.instance === name ? st.open : null;
 
   useEffect(() => panelStore.subscribe(setSt), []);
   // This device's choice (here or in another tab) decides whether Preview is offered: re-read it when it changes.
@@ -231,6 +244,9 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   // Esc in the panel closes it (and is not the chat's "stop the reply").
   const onPanelKey = (e) => { if (e.key === "Escape" && !e.isComposing) { e.preventDefault(); closePanel(); } };
 
+  if (trial) return html`<${EffectTrialPanel} binding=${trial.binding} title=${trial.handle.reply.offer.title}
+    current=${trial.handle.current} ownerCss=${trial.ownerCss} onStage=${trial.onStage}
+    onStop=${trial.handle.stop} onClose=${() => { if (panelStore.get().open === trial) closePanel(); }} />`;
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
@@ -250,9 +266,9 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     if (want && pending.current === want && panelStore.get().run === want) start();
   };
   const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
-  return html`<div class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
+  return html`<div data-trust="preview" class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
       aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>
-    <aside class="pv-panel" ref=${panel} aria-label=${t("chat.pvPanel")} onKeyDown=${onPanelKey}>
+    <aside data-trust="preview" class="pv-panel" ref=${panel} aria-label=${t("chat.pvPanel")} onKeyDown=${onPanelKey}>
       <div class="pv-panel-head">
         <button type="button" class="icon-btn only-narrow pv-panel-close" title=${t("chat.pvBack")} aria-label=${t("chat.pvBack")} onClick=${closePanel}><${Icon} name="back" size=${18} /></button>
         <div class="pv-panel-title"><strong>${t("chat.pvPanel")}</strong>