@songsid/agend 2.2.0-alpha.1 → 2.2.0-alpha.2

package/dist/ui/panel-fleet.js

@@ -18,13 +18,14 @@ import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { OrgChart } from "./fleet-org.js";
+import { CacheReport } from "./fleet-cache.js";
 
 register("fleet", {
   en: {
-    title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", config: "Config",
+    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.",
-    noTeams: "No teams yet", noTeamsHint: "Group instances for coordinated work.", countTasks: "{0} tasks", countSchedules: "{0} schedules", countTeams: "{0} teams",
+    noTeams: "No teams yet", noTeamsHint: "Group instances for coordinated work.", countTasks: "{0} tasks", countSchedules: "{0} schedules", countTeams: "{0} teams", countTask: "1 task", countSchedule: "1 schedule", countTeam: "1 team",
     claim: "Claim", done: "Done", delete: "Delete", on: "on", off: "off", cancel: "Cancel", create: "Create", creating: "Creating…", save: "Save changes",
     taskTitle: "Title", taskDesc: "Description", priority: "Priority", assignee: "Assignee", unassigned: "Unassigned",
     pNormal: "Normal", pLow: "Low", pHigh: "High", pUrgent: "Urgent",
@@ -41,10 +42,10 @@ register("fleet", {
     fleetDefault: "Use the fleet default", notInstalled: "(not installed)", deprecated: "(deprecated)", instanceCreated: "Instance created",
   },
   "zh-TW": {
-    title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", config: "設定",
+    title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", cache: "快取", config: "設定",
     newTask: "新增 task", newSchedule: "新增排程", newTeam: "新增 team",
     noTasks: "還沒有 task", noTasksHint: "建立一個來協調 fleet 的工作。", noSchedules: "還沒有排程", noSchedulesHint: "用 cron 自動執行例行工作。",
-    noTeams: "還沒有 team", noTeamsHint: "把 instance 分組一起工作。", countTasks: "{0} 個 task", countSchedules: "{0} 個排程", countTeams: "{0} 個 team",
+    noTeams: "還沒有 team", noTeamsHint: "把 instance 分組一起工作。", countTasks: "{0} 個 task", countSchedules: "{0} 個排程", countTeams: "{0} 個 team", countTask: "1 個 task", countSchedule: "1 個排程", countTeam: "1 個 team",
     claim: "認領", done: "完成", delete: "刪除", on: "開", off: "關", cancel: "取消", create: "建立", creating: "建立中…", save: "儲存變更",
     taskTitle: "標題", taskDesc: "說明", priority: "優先順序", assignee: "負責人", unassigned: "未指派",
     pNormal: "一般", pLow: "低", pHigh: "高", pUrgent: "緊急",
@@ -62,7 +63,7 @@ register("fleet", {
   },
 });
 
-const ICONS = { tasks: "tasks", schedules: "clock", teams: "team", org: "org", config: "sliders" };
+const ICONS = { tasks: "tasks", schedules: "clock", teams: "team", org: "org", cache: "chart", config: "sliders" };
 const BACKENDS = ["claude-code", "codex", "opencode", "kiro-cli", "antigravity", "grok", "muse"];
 
 async function api(method, path, body, lease) {
@@ -73,7 +74,7 @@ async function api(method, path, body, lease) {
 }
 
 /**
- * Load `path` under the lease: `null` while the first load runs, `{ error }` on failure. A refresh (a new `version`,
+ * Load `path` under the lease: `null` while the first load runs, `{ error }` on failure (no answer, or an HTTP error). A refresh (a new `version`,
  * after Claim or Create) keeps showing what is there until the new list arrives — nothing below it is torn down, so
  * an open dialog and its draft survive (#1425 review). Only the latest request's answer is kept.
  */
@@ -86,7 +87,10 @@ function useLoad(lease, path, version) {
     if (shownFor.current !== lease) { shownFor.current = lease; setState(null); }
     (async () => {
       try {
-        const d = await api("GET", path, null, lease);
+        // A read the server refused (a 4xx/5xx with an { error } body) is a failure, not an empty list (alpha.2 sweep).
+        const r = await lease.fetch(path, { method: "GET", headers: { "Content-Type": "application/json" } });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const d = await r.json();
         if (lease.current() && mine === seq.current) setState({ data: d });
       } catch { if (lease.current() && mine === seq.current) setState({ error: true }); }
     })();
@@ -98,12 +102,12 @@ export function FleetPanel({ route, navKey }) {
   const lease = useLease(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, config: Config }[tab] || Tasks;
+  const Body = { tasks: Tasks, schedules: Schedules, teams: Teams, org: Org, cache: Cache, config: Config }[tab] || Tasks;
   return html`<div class="panel p-fleet">
     <${PanelHeader} title=${t("fleet.title")} />
     <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" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
+    <div class="panel-body"><div class=${`col${tab === "org" || tab === "cache" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
   </div>`;
 }
 
@@ -126,7 +130,7 @@ function Tasks({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const tasks = d.tasks || [];
-    return html`<${ListHead} count=${t("fleet.countTasks", tasks.length)} label=${t("fleet.newTask")} action=${{ onClick: () => setCreating(true) }} />
+    return html`<${ListHead} count=${tasks.length === 1 ? t("fleet.countTask") : t("fleet.countTasks", tasks.length)} label=${t("fleet.newTask")} action=${{ onClick: () => setCreating(true) }} />
       ${tasks.length ? html`<ul class="rows">${tasks.map(x => html`<li key=${x.id} class="row-item">
         <span class=${`pill ${x.status}`}>${x.status}</span><span class="grow">${x.title}</span>
         ${x.assignee ? html`<a class="link" href=${chatPath(x.assignee)}>${x.assignee}</a>` : null}
@@ -150,7 +154,7 @@ function Schedules({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const list = d.schedules || [];
-    return html`<${ListHead} count=${t("fleet.countSchedules", list.length)} label=${t("fleet.newSchedule")} action=${{ onClick: () => setCreating(true) }} />
+    return html`<${ListHead} count=${list.length === 1 ? t("fleet.countSchedule") : t("fleet.countSchedules", list.length)} label=${t("fleet.newSchedule")} action=${{ onClick: () => setCreating(true) }} />
       ${list.length ? html`<ul class="rows">${list.map(x => html`<li key=${x.id} class="row-item">
         <span class=${`pill ${x.enabled ? "open" : "done"}`}>${x.enabled ? t("fleet.on") : t("fleet.off")}</span>
         <span class="grow">${x.label || cronDesc(x.cron)}</span><span class="mono muted" title=${cronDesc(x.cron)}>${x.cron}</span>
@@ -174,7 +178,7 @@ function Teams({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const entries = Object.entries(d.teams || {});
-    return html`<${ListHead} count=${t("fleet.countTeams", entries.length)} label=${t("fleet.newTeam")} action=${{ onClick: () => setCreating(true) }} />
+    return html`<${ListHead} count=${entries.length === 1 ? t("fleet.countTeam") : t("fleet.countTeams", entries.length)} label=${t("fleet.newTeam")} action=${{ onClick: () => setCreating(true) }} />
       ${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>`
@@ -191,6 +195,16 @@ function Org({ lease }) {
   return html`<${Loaded} state=${state}>${(org) => html`<${OrgChart} org=${org} app=${app} />`}</${Loaded}>`;
 }
 
+/** #1468: the prompt-cache analysis — one read per opening and per window chosen; Refresh reads again (fleet-cache.js). */
+function Cache({ lease }) {
+  const [win, setWin] = useState("7d");
+  const [version, setVersion] = useState(0);
+  const state = useLoad(lease, `/ui/cache?window=${win}`, version);
+  return html`<${Loaded} state=${state}>${(report) => (report && Array.isArray(report.instances)
+    ? html`<${CacheReport} report=${report} win=${win} setWin=${setWin} refresh=${() => setVersion((v) => v + 1)} />`
+    : html`<${ErrorState} onRetry=${renavigate} />`)}</${Loaded}>`;
+}
+
 function Secret({ id, value, onInput, label }) {
   const [shown, setShown] = useState(false);
   return html`<div class="field-row"><input id=${id} type=${shown ? "text" : "password"} value=${value} onInput=${onInput} autocomplete="off" />

package/dist/ui/panel-settings.js

@@ -12,7 +12,7 @@ import { html, useEffect, useMemo, useRef, useState } from "/assets/app-html.js"
 import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
-import { PanelHeader, setTitle } from "/assets/app-shell.js";
+import { PanelHeader, PendingChanges, setTitle } from "/assets/app-shell.js";
 import { navigate, setLeaveGuard } from "/assets/app-nav.js";
 import { settingsPath, SETTINGS_SECTIONS } from "/assets/app-route.js";
 import { Dialog } from "/assets/ui-dialog.js";
@@ -66,7 +66,8 @@ async function loadAll(lease) {
   const connections = await read(lease, "/api/settings/connections");
   if (!lease.current()) return null;
   out.connections = connections.ok && Array.isArray(connections.body) ? connections.body : [];
-  const secrets = await read(lease, "/api/settings/provider-secrets");
+  // Only where the fleet offers them (the schema says so): otherwise the route is a 404 and there is nothing to show.
+  const secrets = out.schema && out.schema.provider_secrets === false ? { ok: false } : await read(lease, "/api/settings/provider-secrets");
   if (!lease.current()) return null;
   out.providerOk = secrets.ok;
   out.providerSecrets = secrets.ok && Array.isArray(secrets.body) ? secrets.body : [];
@@ -218,6 +219,7 @@ export function SettingsPanel({ route, navKey }) {
       ${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}
+      <${PendingChanges} inline=${true} />
       ${sectionBody}
     </div></div>
     ${staged.size ? html`<${PendingBar} staged=${staged} busy=${opBusy(op)} onApply=${apply} onDiscard=${discard} />` : null}
@@ -329,7 +331,7 @@ function Agents({ ctx, search, openDialog }) {
     setBusy((b) => new Map(b).set(name, action));
     try { await work(); } finally { setBusy((b) => { const n = new Map(b); n.delete(name); return n; }); }
   };
-  const head = html`<div class="list-head"><span>${tn("countAgents", Object.keys(insts).length)}</span>
+  const head = html`<div class="list-head"><span>${Object.keys(insts).length === 1 ? tn("countAgent") : tn("countAgents", Object.keys(insts).length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "create" })}><${Icon} name="plus" size=${16} />${tn("newAgent")}</button></div>`;
   if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />`;
   if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
@@ -350,6 +352,7 @@ function Agents({ ctx, search, openDialog }) {
           <span class=${dotClass(st)} title=${tn(STATUS_KEY[st] || "stStopped")} aria-hidden="true"></span>
           <span class="s-name" title=${name}>${shortName(name, inst)}</span>
           <span class="s-meta" title=${sum.backend}>${sum.model}</span>
+          <span class="s-br" aria-hidden="true"></span>
           <span class="tag">${tn("effortTag", sum.effort)}</span>
           ${ch ? html`<span class=${`tag${ch.includes("persona") ? " persona" : ""}`}>${ch}</span>` : null}
           <span class="sr-only">${tn(STATUS_KEY[st] || "stStopped")}</span>
@@ -370,7 +373,7 @@ function Bots({ ctx, search, openDialog }) {
   const all = channelsOf(ctx.fleet);
   const needle = search.trim().toLowerCase();
   const rows = all.map((ch, i) => ({ ch, i })).filter(({ ch }) => !needle || [ch.id, ch.type, ch.group_id, ch.bot_token_env].some((v) => String(v ?? "").toLowerCase().includes(needle)));
-  const head = html`<div class="list-head"><span>${tn("countBots", all.length)}</span>
+  const head = html`<div class="list-head"><span>${all.length === 1 ? tn("countBot") : tn("countBots", all.length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "newBot" })}><${Icon} name="plus" size=${16} />${tn("newBot")}</button></div>`;
   return html`${head}
     ${!rows.length ? html`<${Empty} icon="plug" title=${needle ? tn("noAgentMatch", search.trim()) : tn("noBots")} />` : html`<div class="s-list">${rows.map(({ ch, i }) => {
@@ -464,7 +467,7 @@ function Classic({ ctx, search, openDialog }) {
     .sort((a, b) => ((STATUS_ORDER[ctx.classicRuntime(a.instanceName).status] ?? 9) - (STATUS_ORDER[ctx.classicRuntime(b.instanceName).status] ?? 9))
       || String(a.name || "").localeCompare(String(b.name || "")));
   if (!list.length) return html`<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
-  return html`<div class="list-head"><span>${tn("countRooms", rooms.length)}</span></div><div class="s-list">${list.map((c) => {
+  return html`<div class="list-head"><span>${rooms.length === 1 ? tn("countRoom") : tn("countRooms", rooms.length)}</span></div><div class="s-list">${list.map((c) => {
     const rt = ctx.classicRuntime(c.instanceName);
     const sum = effectiveSummary(ctx.live[c.instanceName] || {}, c, ctx.fleet.defaults || {}, (ctx.classic && ctx.classic.defaults) || {});
     const adapter = c.adapterId || "discord";
@@ -472,6 +475,7 @@ function Classic({ ctx, search, openDialog }) {
       <span class=${dotClass(rt.execution)} title=${tn(`exec_${rt.execution}`)} aria-hidden="true"></span>
       <span class="s-name" title=${c.instanceName || ""}>${shortName(c.name || c.instanceName || "?", { display_name: c.display_name })}</span>
       <span class="s-meta" title=${sum.backend}>${sum.model}</span>
+      <span class="s-br" aria-hidden="true"></span>
       <span class="tag">${tn("effortTag", sum.effort)}</span>
       <span class=${`tag${adapter !== "discord" ? " persona" : ""}`}>${adapter}</span>
       ${c.collab ? html`<span class="tag">collab</span>` : null}
@@ -666,10 +670,10 @@ function Developer({ ctx }) {
       <div class="seg-inline" role="group" aria-label=${tn("format")}>
         ${["yaml", "json"].map((k) => html`<button key=${k} type="button" class=${`btn btn-sm${fmt === k ? " on" : ""}`} aria-pressed=${fmt === k ? "true" : "false"} onClick=${() => setFmt(k)}>${k.toUpperCase()}</button>`)}</div>
       <button type="button" class="btn btn-sm" onClick=${() => setEditing(!editing)}>${editing ? tn("viewMode") : tn("editMode")}</button>
-      <button type="button" class="btn btn-sm" onClick=${copy}><${Icon} name="copy" size=${14} />${tn("copy")}</button>
-      <button type="button" class="btn btn-sm" onClick=${download}><${Icon} name="download" size=${14} />fleet.yaml</button>
+      <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="fleet.yaml" onClick=${download}><${Icon} name="download" size=${14} /><span class="lbl">fleet.yaml</span></button>
     </div>
-    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck="false" 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

@@ -0,0 +1,202 @@
+// #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;
+// - 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.
+// 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";
+import { Icon } from "/assets/ui-icons.js";
+import "./chat-render.js";
+import "./preview.js";
+
+const R = () => globalThis.AgendChatRender;
+const P = () => globalThis.AgendPreview;
+
+// ── The panel's state, one per page (the chat shows one instance at a time) ──
+
+/** open: { key, instance, msgKey, n, code, sender, ts } | null; run: start it on mount (a moved run). */
+let state = { open: null, run: 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 */ } } }
+export const panelStore = { get: () => state, subscribe(fn) { subs.add(fn); return () => { subs.delete(fn); }; } };
+
+/** 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. */
+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 });
+}
+/** Close the panel: its frame stops first. */
+export function closePanel() {
+  if (state.open && P()) P().stop(frameKey(state.open.key), "stopped", "");
+  if (state.open) set({ open: null, run: 0 });
+}
+/** The card key the panel shows, or null. */
+export const shownKey = () => (state.open ? state.open.key : null);
+
+/** The text of a block's <title>, or "" — what says two blocks are versions of one thing. */
+export function htmlTitle(code) {
+  const m = /<title[^>]*>([\s\S]*?)<\/title>/i.exec(String(code || ""));
+  return m ? m[1].replace(/\s+/g, " ").trim() : "";
+}
+
+/**
+ * A newer version of the shown block: the last complete ```html block in an agent reply after the one it came from.
+ * When the shown block has a <title>, only a block with the same title counts (another page is not a new version);
+ * 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;
+  const at = msgs.findIndex(x => keyOf(x) === open.msgKey);
+  if (at < 0) return null;
+  const title = htmlTitle(open.code);
+  for (let i = msgs.length - 1; i > at; i--) {
+    const x = msgs[i];
+    if (x.role !== "agent") continue;
+    const fences = R().htmlFences(x.text);
+    for (let n = fences.length - 1; n >= 0; n--) {
+      const f = fences[n];
+      if (!f.terminated || (title && htmlTitle(f.code) !== title)) continue;
+      const msgKey = keyOf(x);
+      return { key: `${msgKey}:f${n}`, instance: open.instance, msgKey, n, code: f.code, sender: x.sender, ts: x.ts };
+    }
+  }
+  return null;
+}
+
+// ── The panel's width: this device's choice (a convenience — the panel works without storage) ──
+
+const WIDTH_KEY = "agend_preview_panel_w";
+export const MIN_PANEL = 320, MIN_THREAD = 360, STEP = 32;
+function storedWidth() { try { const v = Number(localStorage.getItem(WIDTH_KEY)); return Number.isFinite(v) && v > 0 ? v : null; } catch { return null; } }
+function storeWidth(w) { try { localStorage.setItem(WIDTH_KEY, String(Math.round(w))); } catch { /* this page only */ } }
+/** The width a panel may have in a split `total` px wide: at least MIN_PANEL, leaving the thread MIN_THREAD. */
+export function clampWidth(w, total) {
+  const max = Math.max(MIN_PANEL, total - MIN_THREAD - 8);
+  return Math.round(Math.min(max, Math.max(MIN_PANEL, w)));
+}
+
+const timeOf = (ts) => (ts ? new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "");
+
+/**
+ * The panel, inside the chat's split (`split`: that element — the divider sets its width there, through CSSOM).
+ * 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).
+ */
+export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, download }) {
+  const [st, setSt] = useState(state);
+  const [view, setView] = useState("preview");
+  const [run, setRun] = useState({ state: "idle", reason: "" });
+  const [newer, setNewer] = useState(null);
+  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.
+  const [, choice] = useState(0);
+  useEffect(() => (P() ? P().onChange(() => choice(n => n + 1)) : undefined), []);
+  // Leaving the chat (another instance, another panel) closes the panel: its frame stops with the thread's.
+  useEffect(() => () => closePanel(), []);
+
+  const ui = { state: (s, reason) => setRun({ state: s === "starting" || s === "running" ? s : "idle", reason: reason || "" }) };
+  const start = () => {
+    if (!open || !holder.current) return;
+    setView("preview");
+    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.
+  useEffect(() => {
+    setRun({ state: "idle", reason: "" });
+    setView("preview");
+    if (open && st.run) start();
+    // 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]);
+  // A later reply with a newer version of this block: offered, not swapped in.
+  useEffect(() => {
+    if (!open) { setNewer(null); return undefined; }
+    const check = () => setNewer(newerVersion(open, msgs() || [], keyOf));
+    check();
+    return subscribe((instance, kind) => { if (instance === name && kind === "msgs") check(); });
+  }, [open && open.key, name]);
+
+  // The divider: drag, or the arrow keys, Home and End; the width is this device's.
+  const widthNow = useRef(MIN_PANEL);
+  const applyWidth = (w, save) => {
+    const sp = split.current; if (!sp) return;
+    const total = sp.clientWidth || 0;
+    const v = clampWidth(w, total);
+    widthNow.current = v;
+    sp.style.setProperty("--pv-w", `${v}px`);           // CSSOM: the page's CSP allows no style attribute
+    if (divider.current) { divider.current.setAttribute("aria-valuenow", String(v)); divider.current.setAttribute("aria-valuemax", String(clampWidth(Infinity, total))); }
+    if (save) storeWidth(v);
+  };
+  useEffect(() => { if (open) applyWidth(storedWidth() ?? (split.current && split.current.clientWidth || 0) / 2, false); }, [!!open]);
+  const width = () => widthNow.current;
+  const setWidth = (w) => applyWidth(w, true);
+  const onKey = (e) => {
+    const k = e.key;
+    if (k === "ArrowLeft") setWidth(width() + STEP);
+    else if (k === "ArrowRight") setWidth(width() - STEP);
+    else if (k === "Home") setWidth(Infinity);
+    else if (k === "End") setWidth(0);
+    else return;
+    e.preventDefault();
+  };
+  const onDown = (e) => {
+    const sp = split.current; if (!sp || e.button !== 0) return;
+    e.preventDefault();
+    const el = e.currentTarget;
+    try { el.setPointerCapture(e.pointerId); } catch { /* the move still works while over the divider */ }
+    sp.classList.add("resizing");         // frames take no pointer events meanwhile, or the drag would stop over one
+    const right = sp.getBoundingClientRect().right;
+    const move = (ev) => applyWidth(right - ev.clientX - 4, false);
+    const up = () => { sp.classList.remove("resizing"); storeWidth(widthNow.current); el.removeEventListener("pointermove", move); el.removeEventListener("pointerup", up); el.removeEventListener("pointercancel", up); };
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+  };
+  // 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 (!open) return null;
+  const going = run.state === "starting" || run.state === "running";
+  const a = P().availability();
+  const note = run.reason || (going ? (run.state === "starting" ? t("chat.pvStarting") : "") : a.ok ? t("chat.pvPanelIdle") : a.reason);
+  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>
+    <aside 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>
+          <button type="button" class="pv-source" title=${source} onClick=${() => { if (window.matchMedia && window.matchMedia("(max-width: 899px)").matches) closePanel(); reveal(open.msgKey); }}>${source}</button></div>
+        <button type="button" class="icon-btn only-wide pv-panel-close" title=${t("chat.pvClose")} aria-label=${t("chat.pvClose")} onClick=${closePanel}><${Icon} name="close" size=${18} /></button>
+      </div>
+      <div class="pv-panel-bar">
+        <div class="seg-inline" role="group" aria-label=${t("chat.pvPanel")}>
+          <button type="button" class=${`btn btn-sm${view === "preview" ? " on" : ""}`} aria-pressed=${view === "preview" ? "true" : "false"} onClick=${() => setView("preview")}><${Icon} name="eye" size=${14} />${t("chat.pvPage")}</button>
+          <button type="button" class=${`btn btn-sm${view === "code" ? " on" : ""}`} aria-pressed=${view === "code" ? "true" : "false"} onClick=${() => setView("code")}><${Icon} name="code" size=${14} />${t("chat.pvCode")}</button>
+        </div>
+        <span class="grow"></span>
+        ${going ? html`<button type="button" class="btn btn-sm pv-panel-reload" title=${t("chat.pvReload")} onClick=${() => { stop(); start(); }}><${Icon} name="restart" size=${14} /><span class="lbl">${t("chat.pvReload")}</span></button>
+          <button type="button" class="btn btn-sm pv-panel-stop" title=${t("chat.pvStop")} onClick=${stop}><${Icon} name="stop" size=${14} /><span class="lbl">${t("chat.pvStop")}</span></button>`
+          : html`<button type="button" class="btn btn-sm btn-primary pv-panel-run" title=${t("chat.pvPreview")} disabled=${!a.ok} onClick=${start}><${Icon} name="play" size=${14} /><span class="lbl">${t("chat.pvPreview")}</span></button>`}
+        <button type="button" class="btn btn-sm pv-panel-dl" title=${t("chat.pvDownload")} onClick=${() => download(open.code)}><${Icon} name="download" size=${14} /><span class="lbl">${t("chat.pvDownload")}</span></button>
+      </div>
+      ${newer && newer.key !== open.key ? html`<div class="pv-newer" role="status"><span>${t("chat.pvNewer", timeOf(newer.ts))}</span>
+        <button type="button" class="btn btn-sm pv-newer-show" onClick=${() => openPanel(newer)}>${t("chat.pvNewerShow")}</button></div>` : null}
+      ${going ? html`<div class="pv-banner">${P().BANNER}</div>` : null}
+      ${note && view === "preview" ? html`<div class="pv-note">${note}</div>` : null}
+      <div class=${`pv-panel-body${view === "code" ? " show-code" : ""}`}>
+        <div class="pv-holder" ref=${holder}></div>
+        ${view === "code" ? html`<pre class="pv-code"><code>${open.code}</code></pre>` : null}
+      </div>
+    </aside>`;
+}

package/dist/ui/preview.js

@@ -128,8 +128,10 @@
   /**
    * Run `html` in `holder` (a node of the card) for `key`. `ui` is told what happened: ui.state(name, reason) with
    * "starting" | "running" | "stopped" | "unavailable". One preview at a time: any other running one stops first.
+   * 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.
    */
-  function start(key, holder, html, ui) {
+  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", "This HTML is over 1 MiB; it is not previewed."); return false; }
@@ -139,14 +141,15 @@
     var card = {
       key: key, iframe: iframe, ch: randomCh(), holder: holder, html: html, ui: ui, rendered: false,
       height: LIMITS.minHeight, lastApplied: -Infinity, appliedInSecond: [], frozen: false, growth: [], pendingFrame: false,
-      readyTimer: null, watchdogTimer: null,
+      readyTimer: null, watchdogTimer: null, fill: !!(opts && opts.fill),
     };
+    if (card.fill) iframe.classList.add("fill");
     live.set(key, card);
     card.readyTimer = root.setTimeout(function () {
       if (live.get(key) === card && !card.rendered) stop(key, "unavailable", "Preview unavailable: the preview did not answer within 3 s. If an earlier preview froze, it may still be running — open the dashboard in a new tab. Over SSH, forward the preview port too.");
     }, LIMITS.readyMs);
     holder.appendChild(iframe);
-    setHeight(card, LIMITS.minHeight);
+    if (!card.fill) setHeight(card, LIMITS.minHeight);
     ui.state("starting", "");
     return true;
   }
@@ -235,6 +238,7 @@
   /** Height rules (design §4.2): clamp to [40, 4000]; ≤ 1 per animation frame and ≤ 10 per second; Δ < 2 px ignored;
    *  after 5 consecutive increases within 2 s the height freezes and the frame scrolls. */
   function requestHeight(card, h) {
+    if (card.fill) return;                            // the panel sizes it (#1481)
     var want = Math.max(LIMITS.minHeight, Math.min(LIMITS.maxHeight, h));
     if (Math.abs(want - card.height) < LIMITS.minDelta) return;
     var t = now();

package/dist/ui/settings-strings.js

@@ -62,7 +62,7 @@ register("settings", {
     se_primaryServer: "primary",
     se_externalEmojiHint: "Another server's emoji needs the bot's Use External Emojis permission in the channel it reacts in.",
     se_unavailable: "unavailable",
-    se_hint: "Empty keeps the default. The preview is resolved by AgEnD exactly as the bot will react.",
+    se_hint: "Empty keeps the default. The preview is resolved by AgEnD exactly as the bot will react. Progress prefix is not a reaction: it starts the progress message.",
     detection: "Detection",
     startup: "Startup",
     backendSection: "Backend",
@@ -217,6 +217,7 @@ register("settings", {
     countAgents: "{0} agents",
     countBots: "{0} connections",
     countRooms: "{0} rooms",
+    countAgent: "1 agent", countBot: "1 connection", countRoom: "1 room",
     newAgent: "New agent",
     newBot: "New connection",
     effortTag: "effort: {0}",
@@ -351,7 +352,7 @@ register("settings", {
     se_primaryServer: "主伺服器",
     se_externalEmojiHint: "使用其他伺服器的 emoji，bot 在要加反應的頻道需有「使用外部表情符號」權限。",
     se_unavailable: "無法使用",
-    se_hint: "留空即使用預設值。預覽由 AgEnD 依 bot 實際 react 的方式解析。",
+    se_hint: "留空即使用預設值。預覽由 AgEnD 依 bot 實際 react 的方式解析。進度前綴不是反應，而是進度訊息開頭的 emoji。",
     title: "設定",
     myAgents: "我的 Agent",
     bots: "機器人",
@@ -540,6 +541,7 @@ register("settings", {
     countAgents: "{0} 個 agent",
     countBots: "{0} 個連線",
     countRooms: "{0} 個房間",
+    countAgent: "1 個 agent", countBot: "1 個連線", countRoom: "1 個房間",
     newAgent: "新增 agent",
     newBot: "新增連線",
     effortTag: "effort：{0}",

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

@@ -1,7 +1,7 @@
 // #1408 §3: the app's routes on the client. The same table as the server's classifier (src/web-shell-routes.ts;
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
-export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "config"];
+export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "config"];
 export const SETTINGS_SECTIONS = ["agents", "bots", "classic", "general", "advanced"];
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;

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

@@ -245,14 +245,16 @@ const mmss = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Ma
 
 /**
  * #1423: Settings writes an admin has to confirm, from whichever panel made them (settings-confirm.js publishes them to
- * appStore.pendingChanges). What it asks, how to confirm it, the countdown, Withdraw — in any panel.
+ * appStore.pendingChanges). What it asks, how to confirm it, the countdown, Withdraw — in any panel: a card in the
+ * corner, except in Settings itself, which shows the same cards in its column, right under the operation (`inline`),
+ * so they never cover it (alpha.2 sweep).
  */
-function PendingChanges() {
+export function PendingChanges({ inline = false } = {}) {
   const { pendingChanges } = useStore(appStore);
   const list = pendingChanges || [];
   useTick(list.some(p => p.state === "pending"));
   if (!list.length) return null;
-  return html`<div class="pending-stack" role="region" aria-label=${t("app.pendingTitle")}>${list.map(p => html`<section key=${p.id} class=${`pending-card ${p.state}`} role="status">
+  return html`<div class=${`pending-stack${inline ? " inline" : ""}`} role="region" aria-label=${t("app.pendingTitle")}>${list.map(p => html`<section key=${p.id} class=${`pending-card ${p.state}`} role="status">
     <div class="pending-head"><${Icon} name=${p.state === "applied" ? "check" : p.state === "pending" || p.state === "applying" ? "clock" : "alert"} size=${16} />
       <strong>${t(`app.pending_${p.state}`)}</strong>
       ${p.state === "pending" ? html`<span class="pending-left">${t("app.pendingLeft", mmss(p.deadline - NOW()))}</span>` : null}
@@ -336,7 +338,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     </main>
     <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
-    ${viewOnly ? null : html`<${PendingChanges} />`}
+    ${viewOnly || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}
     <${ConfirmHost} />
     <${Toasts} />
   </div>`;