@songsid/agend 2.2.0-beta.3 → 2.2.0-beta.4

package/dist/ui/panel-chat.js

@@ -28,7 +28,8 @@ import { confirmedWrite } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
 import { createEmojiIndex } from "./chat-emojis.js";
-import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.js";
+import { createMentionIndex } from "./chat-mentions.js";
+import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVersion, shownKey } from "./preview-panel.js";
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { FirstRunCard } from "./first-run.js";
@@ -45,6 +46,7 @@ export let store = null;
 let announceTimer = null;
 /** #1630: which Discord server emoji this page may draw (created with the store, in boot). */
 let emojiIndex = null;
+let mentionIndex = null;   // #1682: the names of the mentions shown
 function announce(text) {
   let el = document.getElementById("announcer");
   if (!el) { el = document.createElement("div"); el.id = "announcer"; el.className = "sr-only"; el.setAttribute("role", "status"); el.setAttribute("aria-live", "polite"); el.setAttribute("aria-atomic", "true"); document.body.appendChild(el); }
@@ -56,11 +58,12 @@ function announce(text) {
 
 /**
  * This device's preview opt-in: asks once (the app's dialog) and says what it means; turning it off stops every
- * running preview. Resolves to the choice in force.
+ * running preview. Resolves to the choice in force. commit(apply): runs `apply` (the change itself) — the panel's Allow
+ * wraps it to know which change of the choice is its own (#1704).
  */
-export async function setPreviewOptIn(on) {
+export async function setPreviewOptIn(on, commit = (apply) => apply()) {
   if (on && !P().optedIn() && !(await confirmDialog({ message: t("chat.pvConfirm"), confirmLabel: t("chat.pvAllowButton") }))) on = false;
-  P().setOptIn(on);
+  commit(() => P().setOptIn(on));
   // #1665: kept on the host for every device (only a signed-in page writes it; never the public link).
   savePref("preview.optIn", P().optedIn());
   return P().optedIn();
@@ -73,6 +76,7 @@ export function boot({ stream, boot: bootData, deps = {} }) {
     fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog, ...deps,
   });
   emojiIndex = createEmojiIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
+  mentionIndex = createMentionIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
   store.attach(stream);
   // #1306: what the server said about previews for this load. The page-wide message and storage listeners this adds
   // belong to the app, once (they are never per mount).
@@ -197,6 +201,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     try { const res = await fetch(`/ui/${verb}/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" } }); r = await res.json(); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) toast(r.error, false);
+    else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
   const items = [
@@ -221,7 +226,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
         <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} />
       </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=${() => setPreviewOptIn(true)} />
+        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>
@@ -240,14 +245,17 @@ function Thread({ name, th }) {
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
       clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
       replyButtonBusy: (id) => store.state.rbBusy.has(id),
-      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o) },   // #1481
+      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o), version: panelVersion, claim: claimPanel, claims: panelClaims },   // #1481, #1704
       openImage: openLightbox,                                               // an image, full size, in the page
       emojis: (id) => !!emojiIndex && emojiIndex.known(id),                  // #1630: the fleet's server emoji
+      mentions: (kind, id) => (mentionIndex ? mentionIndex.name(kind, id) : null),   // #1682: mention names
     });
     th.current = thread;
     // #1630: the server-emoji list is read once a message shows a tag; when it arrives, those messages are drawn again.
-    const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); };
+    // #1682: the same for mention names — asked for the ids the messages carry; when names arrive, drawn again.
+    const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); if (mentionIndex) mentionIndex.ensure(msgs); };
     const offEmojis = emojiIndex ? emojiIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
+    const offMentions = mentionIndex ? mentionIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
     wantEmojis(store.state.msgs[name]);
     const off = store.subscribe((instance, kind) => {
@@ -262,7 +270,7 @@ function Thread({ name, th }) {
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      off(); offPv(); offPanel(); offEmojis();
+      off(); offPv(); offPanel(); offEmojis(); offMentions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       thread.dispose();                     // the whole thread goes: every preview in it stops first
@@ -479,7 +487,7 @@ function DeleteDialog({ name, onClose }) {
       <button type="button" class="btn btn-danger" disabled=${typed !== want || busy} onClick=${go}>${t("chat.deleteGo")}</button>`}>
     <p>${t("chat.deleteHelp", name)}</p>
     <label class="field"><span class="sr-only">${t("chat.deleteHelp", name)}</span>
-      <input type="text" value=${typed} autocomplete="off" spellcheck="false" placeholder=${want} onInput=${(e) => setTyped(e.target.value)}
+      <input type="text" value=${typed} autocomplete="off" spellcheck=${false} placeholder=${want} onInput=${(e) => setTyped(e.target.value)}
         onKeyDown=${(e) => { if (e.key === "Enter") go(); }} /></label>
   </${Dialog}>`;
 }

package/dist/ui/panel-details.js

@@ -73,11 +73,13 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
     try { const res = await fetch(`/ui/${verb}/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" } }); r = await res.json(); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) toast(r.error, false);
+    else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   });
   const pauseWake = (verb) => act(verb, async () => {
     const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${verb}`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
     if (!res.ok) toast((res.body && res.body.error) || t("chat.dActionFailed"), false);
+    else if (res.body && res.body.held) toast(res.body.message);
     else toast(t(verb === "pause" ? "chat.dPaused" : "chat.dWoken", name));
   });
   // A ClassicBot room (classicBot.yaml) keeps Classic's split: its own Settings dialog, and only the actions Settings'

package/dist/ui/panel-fleet.js

@@ -23,6 +23,8 @@ import { CacheReport } from "./fleet-cache.js";
 
 register("fleet", {
   en: {
+    hostMemory_elevated: "Host memory pressure: elevated — new agents start one at a time, at least 5 s apart",
+    hostMemory_critical: "Host memory pressure: critical — new agents wait for memory to recover",
     title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", cache: "Cache", config: "Config",
     newTask: "New task", newSchedule: "New schedule", newTeam: "New team",
     noTasks: "No tasks yet", noTasksHint: "Create one to coordinate fleet work.", noSchedules: "No schedules yet", noSchedulesHint: "Automate recurring work with cron.",
@@ -33,7 +35,8 @@ register("fleet", {
     cron: "Cron expression", message: "Message", target: "Target instance", label: "Label", teamName: "Team name", members: "Members",
     titleRequired: "Title required", scheduleFieldsRequired: "Cron, message, and target required", teamFieldsRequired: "Name and at least one member required",
     deleteSchedule: "Delete this schedule?", deleteTeam: "Delete team “{0}”?", taskCreated: "Task created", scheduleCreated: "Schedule created", scheduleDeleted: "Schedule deleted",
-    teamCreated: "Team created", teamDeleted: "Team deleted", taskDone: "Task updated", configSaved: "Config saved", configRestart: " (restart the fleet to apply channel changes)",
+    teamCreated: "Team created", teamDeleted: "Team deleted", teamUpdated: "Team updated", edit: "Edit", editTeam: "Edit team",
+    teamNoRename: "Renaming isn't supported — create a new team and delete this one.", taskDone: "Task updated", configSaved: "Config saved", configRestart: " (restart the fleet to apply channel changes)",
     channel: "Channel", type: "Type", tokenEnv: "Bot token env", groupId: "Group ID", show: "Show", hide: "Hide", access: "Access control", mode: "Mode", locked: "Locked", open: "Open",
     allowedUsers: "Allowed users", allowedUsersNote: "Comma-separated user IDs", defaults: "Defaults", backend: "Backend", roots: "Project roots", addRoot: "Add root", removeRoot: "Remove",
     saveNote: "Saving rewrites fleet.yaml (its comments are lost).",
@@ -43,6 +46,8 @@ register("fleet", {
     fleetDefault: "Use the fleet default", notInstalled: "(not installed)", deprecated: "(deprecated)", instanceCreated: "Instance created",
   },
   "zh-TW": {
+    hostMemory_elevated: "主機記憶體壓力偏高：新的 agent 一次啟動一個，至少間隔 5 秒",
+    hostMemory_critical: "主機記憶體壓力嚴重：新的 agent 會等記憶體恢復再啟動",
     title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", cache: "快取", config: "設定",
     newTask: "新增 task", newSchedule: "新增排程", newTeam: "新增 team",
     noTasks: "還沒有 task", noTasksHint: "建立一個來協調 fleet 的工作。", noSchedules: "還沒有排程", noSchedulesHint: "用 cron 自動執行例行工作。",
@@ -53,7 +58,8 @@ register("fleet", {
     cron: "Cron 表示式", message: "訊息", target: "目標 instance", label: "標籤", teamName: "Team 名稱", members: "成員",
     titleRequired: "必須填寫標題", scheduleFieldsRequired: "必須填寫 Cron、訊息與目標 instance", teamFieldsRequired: "必須填寫名稱並選擇至少一名成員",
     deleteSchedule: "確定刪除此排程嗎？", deleteTeam: "確定刪除 team「{0}」嗎？", taskCreated: "Task 已建立", scheduleCreated: "排程已建立", scheduleDeleted: "排程已刪除",
-    teamCreated: "Team 已建立", teamDeleted: "Team 已刪除", taskDone: "Task 已更新", configSaved: "設定已儲存", configRestart: "（請重新啟動 fleet 以套用頻道變更）",
+    teamCreated: "Team 已建立", teamDeleted: "Team 已刪除", teamUpdated: "Team 已更新", edit: "編輯", editTeam: "編輯 team",
+    teamNoRename: "不支援重新命名：請建立新的 team，再刪除這個。", taskDone: "Task 已更新", configSaved: "設定已儲存", configRestart: "（請重新啟動 fleet 以套用頻道變更）",
     channel: "頻道", type: "類型", tokenEnv: "Bot token 環境變數", groupId: "Group ID", show: "顯示", hide: "隱藏", access: "存取控制", mode: "模式", locked: "鎖定", open: "開放",
     allowedUsers: "允許的使用者", allowedUsersNote: "以逗號分隔的使用者 ID", defaults: "預設值", backend: "Backend", roots: "專案根目錄", addRoot: "新增根目錄", removeRoot: "移除",
     saveNote: "儲存會改寫 fleet.yaml（其中的註解會遺失）。",
@@ -104,8 +110,11 @@ export function FleetPanel({ route, navKey }) {
   const tab = route.tab;
   useEffect(() => { setTitle(`${t("fleet.title")} · ${t(`fleet.${tab}`)}`); }, [tab, navKey]);
   const Body = { tasks: Tasks, schedules: Schedules, teams: Teams, org: Org, cache: Cache, config: Config }[tab] || Tasks;
+  // #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">
-    <${PanelHeader} title=${t("fleet.title")}><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
+    <${PanelHeader} title=${t("fleet.title")} sub=${sub}><${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" : ""}`}
       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>
@@ -167,9 +176,13 @@ function Schedules({ lease }) {
   ${creating ? html`<${CreateSchedule} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
 }
 
+/** #1689: the public link changes no team (the server refuses it): it lists them only. */
+const publicLink = () => typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
+
 function Teams({ lease }) {
   const [version, setVersion] = useState(0);
   const [creating, setCreating] = useState(false);
+  const [editing, setEditing] = useState(null);   // #1689: { name, members, description } of the team being edited
   const state = useLoad(lease, "/ui/teams", version);
   async function del(name) {
     if (!(await confirmDialog({ message: t("fleet.deleteTeam", name), confirmLabel: t("fleet.delete"), danger: true }))) return;
@@ -179,14 +192,17 @@ function Teams({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const entries = Object.entries(d.teams || {});
-    return html`<${ListHead} count=${entries.length === 1 ? t("fleet.countTeam") : t("fleet.countTeams", entries.length)} label=${t("fleet.newTeam")} action=${{ onClick: () => setCreating(true) }} />
+    const writable = !publicLink();
+    return html`<${ListHead} count=${entries.length === 1 ? t("fleet.countTeam") : t("fleet.countTeams", entries.length)} label=${t("fleet.newTeam")} action=${writable ? { onClick: () => setCreating(true) } : null} />
       ${entries.length ? html`<ul class="rows">${entries.map(([name, team]) => html`<li key=${name} class="row-item">
         <span class="grow strong">${name}</span><span class="muted">${(team.members || []).join(", ")}</span>
-        <button type="button" class="btn btn-ghost btn-sm danger" onClick=${() => del(name)}>${t("fleet.delete")}</button></li>`)}</ul>`
+        ${writable ? html`<button type="button" class="btn btn-ghost btn-sm team-edit" onClick=${() => setEditing({ name, members: [...(team.members || [])], description: team.description || "" })}>${t("fleet.edit")}</button>
+        <button type="button" class="btn btn-ghost btn-sm danger" onClick=${() => del(name)}>${t("fleet.delete")}</button>` : null}</li>`)}</ul>`
         : html`<${Empty} icon="team" title=${t("fleet.noTeams")} hint=${t("fleet.noTeamsHint")} />`}
 `;
   }}</${Loaded}>
-  ${creating ? html`<${CreateTeam} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
+  ${creating ? html`<${CreateTeam} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}
+  ${editing ? html`<${CreateTeam} team=${editing} onClose=${() => setEditing(null)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
 }
 
 /** #1389: the org chart — its structure read once per opening, its live state from the app store (fleet-org.js). */
@@ -286,7 +302,7 @@ export function FormDialog({ title, onClose, submit, children, ready = true }) {
     // the dialog goes at once and the shell follows the request. From then on the dialog is done: the decision is
     // said in a toast, and nothing here closes, refreshes or acts again.
     try {
-      const res = await confirmedWrite(submit.path, { method: "POST", body, label: title,
+      const res = await confirmedWrite(submit.path, { method: submit.method || "POST", body, label: title,
         onPending: () => { handedOver = true; toast(t("app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
       r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
     } catch (err) { r = { error: err.message }; }
@@ -299,7 +315,7 @@ export function FormDialog({ title, onClose, submit, children, ready = true }) {
   }
   return html`<${Dialog} title=${title} onClose=${onClose} busy=${busy}
     actions=${html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${t("fleet.cancel")}</button>
-      <button type="button" class="btn btn-primary" onClick=${go} disabled=${busy || !ready}>${busy ? t("fleet.creating") : t("fleet.create")}</button>`}>
+      <button type="button" class="btn btn-primary" onClick=${go} disabled=${busy || !ready}>${busy ? t("fleet.creating") : submit.label || t("fleet.create")}</button>`}>
     <form class="form" onSubmit=${(e) => { e.preventDefault(); go(); }}><fieldset class="form" disabled=${busy}>${children}</fieldset></form></${Dialog}>`;
 }
 const field = (label, input) => html`<label class="field"><span>${label}</span>${input}</label>`;
@@ -342,21 +358,34 @@ function CreateSchedule({ onClose, onDone }) {
   </${FormDialog}>`;
 }
 
-function CreateTeam({ onClose, onDone }) {
+/**
+ * New team, or (#1689) `team` given: edit that one — the same form, filled in from it: its members ticked (one no longer
+ * in the fleet listed too, so it can be taken out), its description; the name is not editable (a team is not renamed).
+ * Saved with PATCH /ui/teams/<name> (the update_team path on the host).
+ */
+function CreateTeam({ onClose, onDone, team = null }) {
   const { instances } = useStore(appStore);
-  const [f, setF] = useState({ name: "", desc: "", members: [] });
-  const toggle = (n) => setF({ ...f, members: f.members.includes(n) ? f.members.filter(x => x !== n) : [...f.members, n] });
-  const submit = { path: "/ui/teams", done: t("fleet.teamCreated"), after: onDone, collect: () => {
-    if (!f.name.trim() || !f.members.length) { toast(t("fleet.teamFieldsRequired"), false); return null; }
-    const body = { name: f.name.trim(), members: f.members };
-    if (f.desc.trim()) body.description = f.desc.trim();
-    return body;
-  } };
-  return html`<${FormDialog} title=${t("fleet.newTeam")} onClose=${onClose} submit=${submit}>
-    ${field(`${t("fleet.teamName")} *`, html`<input value=${f.name} onInput=${(e) => setF({ ...f, name: e.target.value })} />`)}
-    ${field(t("fleet.taskDesc"), html`<input value=${f.desc} onInput=${(e) => setF({ ...f, desc: e.target.value })} />`)}
-    <fieldset class="field"><legend>${t("fleet.members")} *</legend><div class="checks">${instances.map(i => html`<label key=${i.name} class="check">
-      <input type="checkbox" checked=${f.members.includes(i.name)} onChange=${() => toggle(i.name)} />${i.name}</label>`)}</div></fieldset>
+  const [f, setF] = useState(team ? { name: team.name, desc: team.description || "", members: [...team.members] } : { name: "", desc: "", members: [] });
+  // From the state as it is, not this render's copy: two ticks before the next render must both count.
+  const toggle = (n) => setF((cur) => ({ ...cur, members: cur.members.includes(n) ? cur.members.filter(x => x !== n) : [...cur.members, n] }));
+  const names = [...new Set([...instances.map(i => i.name), ...(team ? team.members : [])])];
+  const submit = team
+    ? { path: `/ui/teams/${encodeURIComponent(team.name)}`, method: "PATCH", label: t("fleet.save"), done: t("fleet.teamUpdated"), after: onDone, collect: () => {
+      if (!f.members.length) { toast(t("fleet.teamFieldsRequired"), false); return null; }
+      return { members: f.members, description: f.desc.trim() };
+    } }
+    : { path: "/ui/teams", done: t("fleet.teamCreated"), after: onDone, collect: () => {
+      if (!f.name.trim() || !f.members.length) { toast(t("fleet.teamFieldsRequired"), false); return null; }
+      const body = { name: f.name.trim(), members: f.members };
+      if (f.desc.trim()) body.description = f.desc.trim();
+      return body;
+    } };
+  return html`<${FormDialog} title=${team ? t("fleet.editTeam") : t("fleet.newTeam")} onClose=${onClose} submit=${submit}>
+    ${field(`${t("fleet.teamName")} *`, html`<input value=${f.name} readOnly=${!!team} aria-readonly=${team ? "true" : undefined} onInput=${(e) => { const v = e.target.value; setF((cur) => ({ ...cur, name: v })); }} />`)}
+    ${team ? html`<p class="note">${t("fleet.teamNoRename")}</p>` : null}
+    ${field(t("fleet.taskDesc"), html`<input value=${f.desc} onInput=${(e) => { const v = e.target.value; setF((cur) => ({ ...cur, desc: v })); }} />`)}
+    <fieldset class="field"><legend>${t("fleet.members")} *</legend><div class="checks">${names.map(n => html`<label key=${n} class="check">
+      <input type="checkbox" checked=${f.members.includes(n)} onChange=${() => toggle(n)} />${n}</label>`)}</div></fieldset>
   </${FormDialog}>`;
 }
 

package/dist/ui/panel-settings.js

@@ -372,11 +372,13 @@ function makeCtx(data, setData, stage, unstage, reload, reloadLive, alive) {
     async pauseWake(name, action) {
       const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${action}`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
       if (!res.ok) toast((res.body && res.body.error) || tn("actionFailed", action), false);
+      else if (res.body && res.body.held) toast(res.body.message);
       await reloadLive();
     },
     async startStop(name, running) {
       const res = await api(running ? `/stop/${encodeURIComponent(name)}` : `/api/instance/${encodeURIComponent(name)}/start`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
       if (!res.ok) toast(`${tn("actionFailed", running ? tn("stop") : tn("start"))}: ${(res.body && res.body.error) || res.status || ""}`, false);
+      else if (res.body && res.body.held) toast(res.body.message);
       await new Promise((r) => setTimeout(r, 800));
       await reloadLive();
     },
@@ -847,7 +849,7 @@ function Developer({ ctx }) {
       <button type="button" class="btn btn-sm" title=${tn("copy")} onClick=${copy}><${Icon} name="copy" size=${14} /><span class="lbl">${tn("copy")}</span></button>
       <button type="button" class="btn btn-sm" title=${tn("devDownload")} onClick=${download}><${Icon} name="download" size=${14} /><span class="lbl">${tn("devDownload")}</span></button>
     </div>
-    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck="false" wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
+    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck=${false} wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
         <div class="save-row"><button type="button" class="btn btn-primary" onClick=${save}>${tn("devApply")}</button><span class="note">${tn("devApplyHint")}</span></div>`
       : html`<pre class="s-yaml">${text}</pre>`}
     ${msg ? html`<p class=${`feedback${msg.error ? " error" : ""}`} role="status">${msg.error || msg.text}</p>` : null}

package/dist/ui/preview-panel.js

@@ -1,11 +1,14 @@
 // #1481: an agent's HTML preview (#1306) in a panel beside the conversation — a split with a draggable divider on a
 // wide screen, a full-screen sheet on a narrow one. Nothing about the preview itself changes here: the frame is the one
 // preview.js makes (mountPreview: the preview origin, sandbox allow-scripts only), started by AgendPreview.start like a
-// card's, only told to fill the panel. It runs on a click, as a card's does:
-// - "Open in panel" on an idle card opens the panel with its Preview button — the panel runs nothing by itself;
+// card's, only told to fill the panel. It runs on a person's click, as a card's does — and "Open in panel" is that click:
+// - on an idle card it opens the panel and starts the preview there, as if Preview were clicked in the panel (#1704);
+//   a device that has not allowed previews gets the "Allow previews" offer instead, and allowing it starts the run;
+//   where previews cannot run (web.preview: false, a public link), the panel opens with nothing running;
 // - on a card whose preview is running, the same button moves that run to the panel (stopped in the card, started in
 //   the panel: a moved frame reloads anyway);
-// - a newer version of the block in a later reply is offered, never swapped in, and offered with Preview to click.
+// - nothing runs by itself: not when the page loads, not when the panel is shown again, and a newer version of the
+//   block in a later reply is offered, never swapped in, and shown with Preview to click.
 // Closing the panel or leaving the chat stops its frame; one preview per page still holds (start() stops any other).
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
@@ -19,18 +22,29 @@ const P = () => globalThis.AgendPreview;
 
 // ── The panel's state, one per page (the chat shows one instance at a time) ──
 
-/** open: { key, instance, msgKey, n | att, code, sender, ts } | null (`att`: an attached .html file, #1306 Q4); run: start it on mount (a moved run). */
+/**
+ * open: { key, instance, msgKey, n | att, code, sender, ts } | null (`att`: an attached .html file, #1306 Q4);
+ * run: start it on mount — the card's click, as a token no later open ever reuses (0: nothing to run).
+ */
 let state = { open: null, run: 0 };
+let runs = 0, version = 0, claims = 0;
 const subs = new Set();
-function set(next) { state = next; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
+function set(next) { state = next; version++; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
 export const panelStore = { get: () => state, subscribe(fn) { subs.add(fn); return () => { subs.delete(fn); }; } };
+/** Moves on every open and close, and on every claim: what a card's click compares when its HTML arrives late. */
+export const panelVersion = () => version;
+/** A click that will show something in the panel (an attachment's HTML still to read): from now on it is the newest —
+ *  any earlier click still reading is dropped when its answer comes. Returns the version the click owns. */
+export function claimPanel() { claims++; return ++version; }
+/** How many clicks have claimed: an inline Preview still reading asks only whether a newer click came (not a close). */
+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 (a click that moves a running preview). The block shown before stops. */
+/** Show `spec` in the panel; `run`: start it there (the card's "Open in panel" click). The block shown before stops. */
 export function openPanel(spec, { run = false } = {}) {
   if (state.open && P()) P().stop(frameKey(state.open.key), "stopped", "");
-  set({ open: { ...spec }, run: run ? state.run + 1 : 0 });
+  set({ open: { ...spec }, run: run ? ++runs : 0 });
 }
 /** Close the panel: its frame stops first. */
 export function closePanel() {
@@ -105,7 +119,7 @@ const timeOf = (ts) => (ts ? new Date(ts).toLocaleTimeString([], { hour: "2-digi
  * props: name (the instance), msgs() → its messages, subscribe(fn) → unsubscribe (the chat store's), keyOf(x),
  * reveal(msgKey) (the thread shows that message), download(code).
  */
-/** allow(): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then setOptIn) → the choice. */
+/** allow(commit): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then commit(setOptIn)) → the choice. */
 export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, download, allow }) {
   const [st, setSt] = useState(state);
   const [view, setView] = useState("preview");
@@ -113,13 +127,17 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const [newer, setNewer] = useState(null);
   const [newerNote, setNewerNote] = useState("");
   const reading = useRef(null);   // the newer version whose file is being read (one at a time)
+  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;
 
   useEffect(() => panelStore.subscribe(setSt), []);
   // This device's choice (here or in another tab) decides whether Preview is offered: re-read it when it changes.
+  // A click waiting for Allow is cancelled by any other change of that choice (Never, a card's menu, another tab):
+  // after it, running needs a new click — only this panel's own Allow runs the click it was offered for.
   const [, choice] = useState(0);
-  useEffect(() => (P() ? P().onChange(() => choice(n => n + 1)) : undefined), []);
+  useEffect(() => (P() ? P().onChange(() => { if (pending.current && ownAllow.current !== pending.current) pending.current = 0; choice(n => n + 1); }) : undefined), []);
   // Leaving the chat (another instance, another panel) closes the panel: its frame stops with the thread's.
   useEffect(() => () => closePanel(), []);
 
@@ -130,11 +148,17 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     P().start(frameKey(open.key), holder.current, open.code, ui, { fill: true });
   };
   const stop = () => { if (open) P().stop(frameKey(open.key), "stopped", ""); };
-  // A new block in the panel: what ran before is gone (openPanel stopped it); a moved run starts here.
+  // A new block in the panel: what ran before is gone (openPanel stopped it); the card's click starts it here — or,
+  // where it cannot run, waits as `pending`: only the Allow below can use it (offered to a device that has not opted
+  // in), only while the panel shows what that click opened (st.run is a token no later open reuses), and any other
+  // change of this device's choice cancels it.
   useEffect(() => {
     setRun({ state: "idle", reason: "" });
     setView("preview");
-    if (open && st.run) start();
+    if (open && st.run) {
+      if (P().availability().ok) start();
+      else pending.current = st.run;
+    }
     // Focus goes to the panel's close control that is on screen (Back on a phone, × beside the thread).
     if (panel.current) { const f = [...panel.current.querySelectorAll(".pv-panel-close")].find(b => b.offsetParent !== null); if (f) f.focus(); }
   }, [open && open.key, st.run]);
@@ -204,11 +228,21 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
-  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm); Preview
-  // is then enabled — still a click. Why a run stopped (e.g. switched off in another tab) is still said first.
+  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm). Allowing
+  // runs the block the card's click opened (#1704); otherwise Preview is then enabled — still a click. Why a run stopped
+  // (e.g. switched off in another tab) is still said first.
   const askOptIn = !going && !a.ok && a.why === "optin" && typeof allow === "function";
   const note = run.reason || (going ? (run.state === "starting" ? t("chat.pvStarting") : "") : a.ok ? t("chat.pvPanelIdle") : askOptIn ? t("chat.pvWhyOptinPanel") : a.reason);
-  const allowHere = async () => { if (await allow()) setRun({ state: "idle", reason: "" }); };
+  // Allowed here: the click that opened the panel runs now — if it is still waiting (no other change of the choice
+  // cancelled it, even while the confirm was open: only the change this Allow commits is its own) and the panel still
+  // shows what it opened (the confirm is a wait: the panel may have moved on meanwhile).
+  const allowHere = async () => {
+    const want = pending.current;
+    const yes = await allow((apply) => { ownAllow.current = want; try { apply(); } finally { ownAllow.current = 0; } });
+    if (!yes) return;
+    setRun({ state: "idle", reason: "" });
+    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")}
       aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>

package/dist/ui/preview.js

@@ -197,11 +197,15 @@
    * opts.fill (#1481, the side panel): the frame fills its holder — the same frame from mountPreview, only sized by the
    * panel instead of by the frame's height messages, which it then ignores.
    */
+  /** How many previews this page has started: a click whose HTML arrives late asks whether another started meanwhile. */
+  var starts = 0;
+  function startCount() { return starts; }
   function start(key, holder, html, ui, opts) {
     var a = availability();
     if (!a.ok) { ui.state("unavailable", a.reason); return false; }
     if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 1 MiB; it is not previewed.")); return false; }
     stopAll("another");
+    starts++;
     var doc = holder.ownerDocument;
     var iframe = mountPreview(doc);
     var card = {
@@ -330,7 +334,7 @@
 
   return {
     init: init, availability: availability, optedIn: optedIn, setOptIn: setOptIn, never: never, setNever: setNever, onChange: onChange, listeners: listeners, onStorage: onStorage,
-    start: start, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
+    start: start, startCount: startCount, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
     /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */
     banner: function () { return say("pvBanner", BANNER); },

package/dist/ui/settings-token.js

@@ -31,7 +31,7 @@ export function TokenField({ id, platform, value, onInput, identity, busy, onVer
   const [shown, setShown] = useState(false);
   return html`<div class="field token-field"><label for=${id}>${tn("wizardToken")}</label>
     <div class="token-row">
-      <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck="false" disabled=${!!busy}
+      <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck=${false} disabled=${!!busy}
         placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${value} onInput=${(e) => onInput(e.target.value.trim())} />
       <button type="button" class="icon-btn" aria-pressed=${shown ? "true" : "false"} title=${shown ? tn("tokenHide") : tn("tokenShow")}
         aria-label=${shown ? tn("tokenHide") : tn("tokenShow")} onClick=${() => setShown(!shown)}><${Icon} name="eye" size=${16} /></button>

package/dist/ui/shared/app-store.js

@@ -38,7 +38,9 @@ export function applyStatus(d) {
   appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
     connections: typeof d.connections === "number" ? d.connections : null,
     // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
-    prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null });
+    prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null,
+    // #1685: host memory pressure slowing or holding new agents ("elevated" | "critical"), else null.
+    hostMemory: d.host_memory === "elevated" || d.host_memory === "critical" ? d.host_memory : null });
 }
 
 /** One "activity" event: an instance started or stopped working. */

package/dist/ui/shared/app.css

@@ -628,15 +628,16 @@ html.lb-open .scroller { overflow: hidden; }
 .v-filter-box input::placeholder { color: var(--text-3); }
 .v-filter-clear { width: 28px; height: 28px; }
 .v-filter .note { padding: var(--s-1) var(--s-1) 0; font-variant-numeric: tabular-nums; }
-/* alpha.2 (N1): status and CLI chips under the filter box — each a <details> with checkboxes. */
+/* alpha.2 (N1): status and CLI chips under the filter box — each a group of checkboxes under its header (#1700). */
 .nav-facets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-1) 0; }
 .nav-facet { font-size: var(--fs-xs); color: var(--text-2); }
-.nav-facet > summary { cursor: pointer; list-style: none; padding: 2px var(--s-2); border-radius: var(--r-sm); }
-.nav-facet > summary::-webkit-details-marker { display: none; }
-.nav-facet > summary::after { content: " ▾"; color: var(--text-3); }
-.nav-facet[open] > summary::after { content: " ▴"; }
-.nav-facet > summary:hover { background: var(--hover); }
-.nav-facet > summary:focus-visible { outline: 2px solid var(--accent); }
+/* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
+.nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
+  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+.nav-facet-head:hover { background: var(--hover); }
+.nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
+.nav-facet-head .caret { color: var(--text-3); flex: none; }
+.nav-facet-sum { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
 .nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
 .nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
@@ -989,3 +990,6 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #1630: a Discord server emoji in a chat message, the size of the text around it. */
 .md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }
+/* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
+.md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
+  font-weight: var(--fw-medium); white-space: nowrap; }

package/dist/ui/shared/instance-nav.js

@@ -207,6 +207,16 @@ export function moveFavorite(name, delta, known) {
   cur.splice(to, 0, cur.splice(from, 1)[0]);
   setFavorites(cur);
 }
+// ── #1700: the filter's facet groups, open or folded — per device (localStorage; blocked or full storage: this page only) ──
+const FACETS_KEY = "agend_nav_facets";
+function readFacetsOpen() {
+  try {
+    const v = JSON.parse(stored(FACETS_KEY) || "{}");
+    return { status: !!(v && v.status === true), cli: !!(v && v.cli === true) };
+  } catch { return { status: false, cli: false }; }
+}
+function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.stringify({ status: !!open.status, cli: !!open.cli })); } catch { /* this page only */ } }
+
 /** The Favorites group's key among the tag groups: no tag can be it (a group name is never a control character). */
 const FAV_GROUP = "\u0000favorites";
 function persistOrder(groupNames, instByGroup) {
@@ -299,6 +309,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const filterRef = useRef(null);
   const list = useRef(null);
   const drag = useRef(null);
+  // #1700: which facet groups are open — this device's (screen layout, not a synced preference), read when the list mounts.
+  const [facetOpen, setFacetOpen] = useState(readFacetsOpen);
+  const toggleFacet = (key) => setFacetOpen((cur) => { const next = { ...cur, [key]: !cur[key] }; writeFacetsOpen(next); return next; });
   // #1664: "☆ Edit" — the stars on every row (on a phone the only way to them) and ↑ ↓ on the favorites — only on the
   // full list, as drag: in a filtered one the row above may not be the one above in the list (#1677 review).
   const [editing, setEditing] = useState(false);
@@ -334,7 +347,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // Drag to reorder: only the full list (a filtered subset would be ambiguous), groups among groups, instances within
   // their group.
   const dragProps = (item) => shown.active ? {} : {
-    draggable: "true",
+    draggable: true,
     onDragStart: (e) => { drag.current = item; e.currentTarget.classList.add("dragging"); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", item.name); } catch { /* Firefox needs data */ } },
     onDragEnd: (e) => { e.currentTarget.classList.remove("dragging"); drag.current = null; },
     onDragOver: (e) => {
@@ -360,11 +373,23 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       persistOrder(names, insts);
     },
   };
-  const chips = (key, values, label, text) => html`<details class="nav-facet">
-    <summary>${label}${f[key].length ? html` <span class="nav-facet-n">${f[key].length}</span>` : null}</summary>
-    <div class="nav-facet-list" role="group" aria-label=${label}>${values.map((value) => html`<label key=${value} class="nav-chip">
-      <input type="checkbox" checked=${f[key].includes(value)} onChange=${() => flip(key, value)} /><span>${text(value)}</span></label>`)}</div>
-  </details>`;
+  // #1700: a facet group (Status, CLI) folds under a real header button. Folded with a filter set, the header says so:
+  // one or two choices by name, more as "N selected" — a filter is never out of sight.
+  const chips = (key, values, label, text) => {
+    const open = !!facetOpen[key];
+    const sel = f[key];
+    const summary = !open && sel.length ? (sel.length <= 2 ? sel.map(text).join(", ") : tn("facetSelected", { n: sel.length })) : "";
+    const hint = tn(open ? "facetHide" : "facetShow", { group: label });
+    return html`<div class=${`nav-facet${open ? " open" : ""}`}>
+      <button type="button" class="nav-facet-head" aria-expanded=${open ? "true" : "false"} aria-controls=${`nav-facet-${key}`}
+        title=${summary ? `${hint} (${label} · ${summary})` : hint} onClick=${() => toggleFacet(key)}>
+        <${Icon} name="chevron" size=${12} cls=${open ? "caret" : "caret folded"} /><span class="nav-facet-label">${label}</span>
+        ${summary ? html`<span class="nav-facet-sum">· ${summary}</span>` : sel.length ? html`<span class="nav-facet-n">${sel.length}</span>` : null}
+      </button>
+      ${open ? html`<div id=${`nav-facet-${key}`} class="nav-facet-list" role="group" aria-label=${label}>${values.map((value) => html`<label key=${value} class="nav-chip">
+        <input type="checkbox" checked=${sel.includes(value)} onChange=${() => flip(key, value)} /><span>${text(value)}</span></label>`)}</div>` : null}
+    </div>`;
+  };
   const row = (name, g, i, count) => {
     const it = byName.get(name);
     const label = labelOf(it);
@@ -415,7 +440,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
     </div>
     <div class="v-filter">
       <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
-        <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck="false" placeholder=${tn("filterPh")} value=${f.q}
+        <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck=${false} placeholder=${tn("filterPh")} value=${f.q}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
           onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); setNavFilter({ q: "" }); } }} />
         ${f.q ? html`<button type="button" class="icon-btn v-filter-clear" aria-label=${tn("filterClear")} title=${tn("filterClear")}

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

@@ -15,6 +15,9 @@ register("view", {
   "filterStatus": "Status",
   "filterCli": "CLI",
   "filterFacetsReset": "Clear",
+  "facetSelected": "{n} selected",
+  "facetShow": "Show {group} filters",
+  "facetHide": "Hide {group} filters",
   "displayName": "Display name",
   "role": "Role",
   "description": "Description",
@@ -186,6 +189,9 @@ register("view", {
   "filterStatus": "狀態",
   "filterCli": "CLI",
   "filterFacetsReset": "清除",
+  "facetSelected": "已選 {n} 個",
+  "facetShow": "顯示{group}篩選",
+  "facetHide": "隱藏{group}篩選",
   "displayName": "顯示名稱",
   "role": "角色",
   "description": "描述",