@songsid/agend 2.3.3 → 2.3.4-beta.2

package/dist/ui/chat-thread.js

@@ -31,8 +31,14 @@ export const TEXT_PREVIEW_COLUMNS = 50;
 export const TEXT_CARD_MAX = 1024 * 1024;
 const P = () => globalThis.AgendPreview;
 /** #1672: a status line longer than this (lines, or characters) is folded until it is opened. */
-export const STATUS_FOLD_LINES = 6;
-export const STATUS_FOLD_CHARS = 600;
+/**
+ * #1672 / the user (hmsg-d6ac6dfb): a status line shows two lines — its header ("A → B:") and the first line of the
+ * message, each one row (clipped with an ellipsis). Its "open" control shows when that hides something: more lines than
+ * two, or a row clipped at the width it is drawn at (measured after each draw and resize: fitStatus). Where nothing is
+ * measured (no layout), a line longer than STATUS_LINE_CHARS stands for "clipped".
+ */
+export const STATUS_FOLD_LINES = 2;
+export const STATUS_LINE_CHARS = 100;
 const REPLY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>';
 const COPY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 
@@ -224,15 +230,19 @@ export function createThread(list, scroller, opts) {
    */
   function statusHtml(x, time) {
     const text = String(x.text == null ? "" : x.text);
-    const lines = R().lineCount(text);
+    // Rows split on any line break (a CRLF is one break, never a row and a stray CR); the text itself is not changed.
+    const lines = R().lineCount(text.replace(/\r\n?/g, "\n"));
     const manyLines = lines > STATUS_FOLD_LINES;
-    const more = manyLines || text.length > STATUS_FOLD_CHARS
-      ? `<button data-trust="thread-control" type="button" class="st-more" data-act="toggleFold"${manyLines ? ` data-lines="${escAttr(lines)}"` : ""}>${escAttr(manyLines ? trf("chat.showAll", lines) : tr("chat.showMore"))}</button>`
-      : "";
+    const overflows = manyLines || text.split(/\r\n?|\n/).some(l => l.length > STATUS_LINE_CHARS);
+    // Its control: a short label at the end of line 2; its full name (and whether it is open) for a screen reader. Shown
+    // only while the line overflows (class `overflows`, kept by fitStatus at the width it is drawn at).
+    const more = `<button data-trust="thread-control" type="button" class="st-more" data-act="toggleFold" aria-expanded="false"${manyLines ? ` data-lines="${escAttr(lines)}"` : ""} aria-label="${escAttr(manyLines ? trf("chat.showAll", lines) : tr("chat.showMore"))}">${escAttr(manyLines ? trf("chat.showAllShort", lines) : tr("chat.showMoreShort"))}</button>`;
     const tools = `<div data-trust="thread-control" class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
     // #1990: the other instance's name opens its chat (an in-app link the router takes: no target).
-    const body = textLinkSegments(text, x.links).map(sg => sg.href ? `<a data-trust="link" class="st-link" href="${escAttr(sg.href)}">${escAttr(sg.text)}</a>` : escAttr(sg.text)).join("");
-    return `<div class="msg status-line${more ? " folded" : ""}"><div class="meta">${time}</div><div class="body"><div class="st-text">${body}</div>${more}</div>${tools}</div>`;
+    // Each line its own row (folded: the first two, each clipped to one row); the line breaks stay in the text.
+    const body = textLinkSegments(text, x.links).map(sg => sg.href ? `<a data-trust="link" class="st-link" href="${escAttr(sg.href)}">${escAttr(sg.text)}</a>` : escAttr(sg.text)).join("")
+      .split(/\r\n?|\n/).map(l => `<span class="st-ln">${l}</span>`).join("\n");
+    return `<div class="msg status-line folded${overflows ? " overflows" : ""}"><div class="meta">${time}</div><div class="body"><div class="st-text">${body}</div>${more}</div>${tools}</div>`;
   }
   /**
    * #1266: an agent reply's buttons. Labels are text (escaped, never Markdown); the click names the set and the index,
@@ -610,7 +620,25 @@ export function createThread(list, scroller, opts) {
   }
   // Sizes change without a scroll event (layout after the render, the dock under the thread): while pinned, the view
   // stays flush with the bottom; a reader who scrolled up is never moved.
-  const resized = () => { if (pinned && !atBottom()) toBottom(); reportJump(); };
+  const resized = () => { fitStatus(); if (pinned && !atBottom()) toBottom(); reportJump(); };
+  /**
+   * The user (hmsg-d6ac6dfb): a folded status line whose first two rows fit is plain two lines, no control; one with a
+   * row clipped at the width it is drawn at gets its "open" control (`overflows`). Measured after each draw and resize;
+   * a line with more than two rows always overflows (data-lines). Nothing laid out (no width): the guess it was drawn with.
+   */
+  function fitStatus() {
+    for (const m of list.querySelectorAll(".msg.status-line.folded")) {
+      const btn = m.querySelector(".st-more");
+      if (!btn || btn.dataset.lines) continue;
+      let measured = false, over = false;
+      for (const row of [...m.querySelectorAll(".st-ln")].slice(0, STATUS_FOLD_LINES)) {
+        if (!row.clientWidth) continue;
+        measured = true;
+        if (row.scrollWidth > row.clientWidth + 1) over = true;
+      }
+      if (measured && m.classList.contains("overflows") !== over) m.classList.toggle("overflows", over);
+    }
+  }
   let ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
   if (ro) { ro.observe(list); ro.observe(scroller); }
   // #2158: the reader's own hand on the thread — a wheel, a touch, the scrollbar (a pointer held), a scrolling key
@@ -725,6 +753,7 @@ export function createThread(list, scroller, opts) {
     armPolls();
     rove();
     progress();
+    fitStatus();
     return added;
   }
   /**
@@ -802,13 +831,26 @@ export function createThread(list, scroller, opts) {
   function onClick(e) {
     if (onImageClick(e)) return;
     const el = e.target && e.target.closest ? e.target.closest("[data-act]") : null;
-    if (!el || !list.contains(el)) return;
+    if (!el || !list.contains(el)) {
+      // A folded status line opens by a click on its text too (not on a link in it); its button is the keyboard's way.
+      const text = e.target && e.target.closest ? e.target.closest(".msg.status-line.folded.overflows .st-text") : null;
+      const btn = text && !e.target.closest("a") ? text.parentNode.querySelector(".st-more") : null;
+      if (btn && list.contains(btn)) onClick({ target: btn });
+      return;
+    }
     const act = el.dataset.act;
     if (act === "copyMsg") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) copyFrom(el, x.text); }
     else if (act === "copyCode") { const pre = el.closest(".codeblock")?.querySelector("pre"); if (pre) copyFrom(el, pre.textContent); }
     else if (act === "toggleFold") {
       const box = el.closest(".codeblock, .msg.status-line"); if (!box) return;
       const folded = box.classList.toggle("folded");
+      if (box.classList.contains("status-line")) {
+        // A status line's own label: short at the end of line 2 while folded, its full name for a screen reader.
+        el.setAttribute("aria-expanded", folded ? "false" : "true");
+        el.setAttribute("aria-label", !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAll", el.dataset.lines) : tr("chat.showMore"));
+        el.textContent = !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAllShort", el.dataset.lines) : tr("chat.showMoreShort");
+        return;
+      }
       el.textContent = !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAll", el.dataset.lines) : tr("chat.showMore");
     } else if (act === "toggleWrap") opts.toggleWrap();
     else if (act === "replyButton") {

package/dist/ui/page-share-dialog.js

@@ -0,0 +1,191 @@
+// #2911 item 8: page share links on the dashboard. The preview panel's Share page action — a confirm dialog every time
+// (what is shared, that it runs the page's own scripts, for how long), then the link shown once to copy — and, while that
+// page is shared, "Shared until …" with Stop sharing; Settings → Access & security lists the open ones with Stop and
+// Stop all. Design: #2911 issuecomment-6561078095 (approved).
+// GET / POST /ui/page-share, DELETE /ui/page-share/<id|all> (web-api.ts): an admin session (directly or over the public
+// link). The server reads the page itself from the chat history: the page only names the block.
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { toast } from "/assets/ui-toast.js";
+
+register("pshare", {
+  en: {
+    share: "Share page", shareTitle: "Make a link anyone can open to see this page, for a limited time",
+    shared: "Shared until {0}", sharedTitle: "This page is shared: see or stop it",
+    title: "Share this page", what: "Anyone with the link can open “{0}” from {1}'s reply ({2}).",
+    runs: "It runs the page's own scripts in their browser, apart from this dashboard. They see the page only — not the chat, the agent or the fleet.",
+    snapshot: "The link shows the page as it is now; a later version needs a new link. The chat is told when it starts and ends.",
+    cdn: "This page may load libraries from cdnjs / jsDelivr; viewers' browsers will request them.",
+    how: "For", create: "Share", creating: "Starting the link…", cancel: "Cancel", close: "Close",
+    made: "Anyone with this link can open the page until {0}. It is shown only now: copy it.", copy: "Copy link", copied: "Link copied",
+    stop: "Stop sharing", stopAll: "Stop all", stopping: "Stopping…", stopped: "The page is no longer shared.", untitled: "this page",
+    nowShared: "Shared until {0}. Stop sharing ends the link at once.",
+    m15: "15 minutes", h1: "1 hour", h8: "8 hours", h24: "24 hours",
+    e_disabled: "Page share links are off on this fleet (web.page_share.enabled: false).",
+    e_duration: "That is longer than this fleet allows (web.page_share.max_hours).", e_too_many: "At most 10 pages can be shared at once: stop one first.",
+    e_too_large: "This page is too large to share (over 8 MB): download it instead.", e_page_gone: "This page is no longer in the chat's history.",
+    e_message_gone: "This page is no longer in the chat's history.", e_not_an_agent_page: "Only a page an agent sent can be shared.",
+    e_rate: "Cloudflare is limiting new quick tunnels right now. Try again in a few minutes.", e_tunnel: "The share link's tunnel did not start ({0}). Try again later.",
+    failed: "The link could not be made.",
+    cardTitle: "Shared pages", cardHint: "Links to single agent pages, made from the HTML preview panel's Share page. Each ends at its time; stop one to end it now.",
+    none: "No pages are shared.", from: "from {0}", ends: "until {0}",
+  },
+  "zh-TW": {
+    share: "分享頁面", shareTitle: "建立一個連結，讓任何人在限定時間內開啟這個頁面",
+    shared: "分享到 {0}", sharedTitle: "這個頁面正在分享：查看或停止",
+    title: "分享這個頁面", what: "拿到連結的人都能開啟 {1} 回覆裡的「{0}」（{2}）。",
+    runs: "頁面本身的腳本會在對方的瀏覽器執行，與這個儀表板分開。對方只看得到這個頁面——看不到對話、agent 或 fleet。",
+    snapshot: "連結顯示的是頁面現在的樣子；之後的新版本需要新的連結。開始與結束分享時會告知這個對話。",
+    cdn: "這個頁面可能從 cdnjs / jsDelivr 載入函式庫；觀看者的瀏覽器會向它們發出請求。",
+    how: "時間", create: "分享", creating: "正在啟動連結…", cancel: "取消", close: "關閉",
+    made: "拿到這個連結的人可以開啟頁面到 {0}。連結只會顯示這一次：請複製。", copy: "複製連結", copied: "已複製連結",
+    stop: "停止分享", stopAll: "全部停止", stopping: "正在停止…", stopped: "這個頁面已停止分享。", untitled: "這個頁面",
+    nowShared: "分享到 {0}。按「停止分享」會立即結束連結。",
+    m15: "15 分鐘", h1: "1 小時", h8: "8 小時", h24: "24 小時",
+    e_disabled: "這個 fleet 已關閉頁面分享連結（web.page_share.enabled: false）。",
+    e_duration: "超過這個 fleet 允許的時間（web.page_share.max_hours）。", e_too_many: "同時最多分享 10 個頁面：先停止一個。",
+    e_too_large: "這個頁面太大（超過 8 MB），無法分享：請改用下載。", e_page_gone: "對話紀錄裡已經沒有這個頁面。",
+    e_message_gone: "對話紀錄裡已經沒有這個頁面。", e_not_an_agent_page: "只能分享 agent 傳來的頁面。",
+    e_rate: "Cloudflare 目前限制新的臨時通道，請過幾分鐘再試。", e_tunnel: "分享連結的通道沒有啟動（{0}），請稍後再試。",
+    failed: "無法建立連結。",
+    cardTitle: "分享中的頁面", cardHint: "單一 agent 頁面的連結，可在 HTML 預覽面板的「分享頁面」建立。每個連結到時間就結束；停止可立即結束。",
+    none: "目前沒有分享中的頁面。", from: "來自 {0}", ends: "到 {0} 為止",
+  },
+});
+const tp = (k, ...v) => t(`pshare.${k}`, ...v);
+export const DURATIONS = [["m15", 15], ["h1", 60], ["h8", 480], ["h24", 1440]];
+const JSON_HEADERS = { "Content-Type": "application/json" };
+const when = (ms) => { try { return new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" }).format(new Date(ms)); } catch { return ""; } };
+/** The end of a share for the bar: the time today, with the day when it is not today (a share may last 24 h). */
+const until = (ms) => { const d = new Date(ms), now = new Date(); return d.toDateString() === now.toDateString() ? when(ms) : whenLong(ms); };
+const whenLong = (ms) => { try { return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)); } catch { return ""; } };
+
+/** What a refusal says (the host's `error` and `reason`). */
+export function refusalText(d) {
+  const e = d && d.error;
+  if (e === "tunnel") return d.reason === "rate-limited" ? tp("e_rate") : tp("e_tunnel", d.reason || "unknown");
+  return ["disabled", "duration", "too_many", "too_large", "page_gone", "message_gone", "not_an_agent_page"].includes(e) ? tp(`e_${e}`) : tp("failed");
+}
+
+// ── The open page shares, one read for the page (an admin's; anyone else gets null) ──
+let state = { loaded: false, canShare: false, enabled: false, cdn: false, shares: [] };
+const subs = new Set();
+let reading = null, expiry = null;
+function set(next) { state = next; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
+/** Read the open shares again (after a change; at the soonest end). `get`: fetch. */
+export function refreshPageShares(get = globalThis.fetch) {
+  if (reading) return reading;
+  reading = (async () => {
+    const auth = globalThis.AgendAuth;
+    const admin = !!(auth && typeof auth.canWrite === "function" && (await Promise.resolve(auth.canWrite()).catch(() => false)) === true);
+    let d = null;
+    if (admin) { try { const r = await get("/ui/page-share", { method: "GET", headers: JSON_HEADERS }); d = r.ok ? await r.json() : null; } catch { d = null; } }
+    const shares = d && Array.isArray(d.shares) ? d.shares : [];
+    set({ loaded: true, canShare: admin && !!d && d.enabled !== false, enabled: !!d && d.enabled !== false, cdn: !!d && d.cdn === true, shares });
+    // Read again when the soonest one ends, so its "Shared until" goes without a reload.
+    if (expiry) clearTimeout(expiry);
+    const soonest = Math.min(...shares.map((s) => s.expiresAt));
+    if (Number.isFinite(soonest)) expiry = setTimeout(() => { expiry = null; refreshPageShares(get); }, Math.max(1000, soonest - Date.now() + 1000));
+  })().finally(() => { reading = null; });
+  return reading;
+}
+export const pageShares = () => state;
+/** The open shares, read once per page and on every change. */
+export function usePageShares(get) {
+  const [st, setSt] = useState(state);
+  useEffect(() => { subs.add(setSt); if (!state.loaded) refreshPageShares(get); return () => { subs.delete(setSt); }; }, []);
+  return st;
+}
+/** The open share of a block `from` ({ boot, id, fence | att }) in `instance`, or null. */
+export function shareOf(shares, instance, from) {
+  if (!from) return null;
+  return shares.find((s) => s.instance === instance && s.from && s.from.boot === from.boot && s.from.id === from.id
+    && (from.att ? s.from.att === from.att : s.from.fence === from.fence)) || null;
+}
+
+async function stopShare(id, get = globalThis.fetch) {
+  try { await get(`/ui/page-share/${id}`, { method: "DELETE", headers: JSON_HEADERS }); } catch { /* the list is read again */ }
+  await refreshPageShares(get);
+}
+
+/**
+ * The confirm dialog: what is shared (its title, whose reply, when), that it runs the page's own scripts, for how long;
+ * Share makes the link and shows it once. With `share` (this page is already shared): when it ends, and Stop sharing.
+ * `block`: { instance, from: {boot, id, fence | att}, title, sender, ts }.
+ */
+export function PageShareDialog({ block, share = null, get = globalThis.fetch, onClose }) {
+  const [minutes, setMinutes] = useState(60);
+  const [busy, setBusy] = useState(false);
+  const [made, setMade] = useState(null);
+  const [error, setError] = useState("");
+  const create = async () => {
+    setBusy(true); setError("");
+    try {
+      const r = await get("/ui/page-share", { method: "POST", headers: JSON_HEADERS, body: JSON.stringify({ instance: block.instance, boot: block.from.boot, id: block.from.id,
+        ...(block.from.att ? { att: block.from.att } : { fence: block.from.fence }), minutes }) });
+      const d = await r.json().catch(() => ({}));
+      if (r.ok && d && typeof d.url === "string") setMade(d); else setError(refusalText(d));
+    } catch { setError(tp("failed")); }
+    setBusy(false);
+    refreshPageShares(get);
+  };
+  const stop = async (id) => { setBusy(true); await stopShare(id, get); setBusy(false); toast(tp("stopped")); onClose(); };
+  const copy = async () => { try { await navigator.clipboard.writeText(made.url); toast(tp("copied")); } catch { /* the link is on screen to copy by hand */ } };
+  const open = made ? made.share : share;
+  const name = block.title || tp("untitled");
+  const actions = made || share
+    ? html`<button type="button" class="btn danger ps-stop" disabled=${busy} onClick=${() => stop(open.id)}>${busy ? tp("stopping") : tp("stop")}</button>
+      <button type="button" class="btn" onClick=${onClose} disabled=${busy}>${tp("close")}</button>`
+    : html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${tp("cancel")}</button>
+      <button type="button" class="btn btn-primary ps-create" onClick=${create} disabled=${busy}>${busy ? tp("creating") : tp("create")}</button>`;
+  return html`<${Dialog} title=${tp("title")} onClose=${onClose} busy=${busy} actions=${actions}>
+    <div class="os ps">
+      <p class="ps-what">${tp("what", name, block.sender || block.instance, whenLong(block.ts ? Date.parse(block.ts) : Date.now()))}</p>
+      <p class="ps-runs"><strong>${tp("runs")}</strong></p>
+      ${made ? html`<div class="os-made">
+          <input class="input mono os-url ps-url" readonly value=${made.url} aria-label=${tp("copy")} onFocus=${(e) => e.target.select && e.target.select()} />
+          <button type="button" class="btn btn-sm ps-copy" onClick=${copy}>${tp("copy")}</button>
+          <p class="note">${tp("made", whenLong(made.share.expiresAt))}</p>
+        </div>`
+        : share ? html`<p class="note ps-now">${tp("nowShared", whenLong(share.expiresAt))}</p>${share.cdn ? html`<p class="note ps-cdn">${tp("cdn")}</p>` : null}`
+        : html`<p class="muted">${tp("snapshot")}</p>
+          ${state.cdn ? html`<p class="note ps-cdn">${tp("cdn")}</p>` : null}
+          <label class="field"><span>${tp("how")}</span>
+            <select class="tb-select ps-how" value=${String(minutes)} onChange=${(e) => setMinutes(Number(e.target.value))} disabled=${busy}>
+              ${DURATIONS.map(([k, m]) => html`<option key=${k} value=${String(m)}>${tp(k)}</option>`)}
+            </select></label>`}
+      ${error ? html`<p class="err os-err ps-err" role="alert">${error}</p>` : null}
+    </div>
+  <//>`;
+}
+
+/** Settings → Access & security: the shared pages, with Stop and Stop all. */
+export function PageSharesCard({ get = globalThis.fetch }) {
+  const st = usePageShares(get);
+  const [busy, setBusy] = useState(false);
+  if (!st.loaded || !st.canShare && !st.shares.length) return null;     // not kept on this fleet, or not this session's
+  const stop = async (id) => { setBusy(true); await stopShare(id, get); setBusy(false); };
+  return html`<section class="card os-card ps-card"><h3>${tp("cardTitle")}</h3>
+    <p class="note">${st.enabled ? tp("cardHint") : tp("e_disabled")}</p>
+    ${!st.shares.length ? html`<p class="muted os-none">${tp("none")}</p>` : html`<div class="os-list">
+      <ul class="os-rows">${st.shares.map((s) => html`<li key=${s.id} class="os-row">
+        <span class="os-what"><strong>${s.title || tp("untitled")}</strong>
+          <span class="muted"> · ${tp("from", s.instance)} · ${tp("ends", whenLong(s.expiresAt))}</span></span>
+        <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => stop(s.id)}>${tp("stop")}</button>
+      </li>`)}</ul>
+      ${st.shares.length > 1 ? html`<button type="button" class="btn btn-sm danger os-all" disabled=${busy} onClick=${() => stop("all")}>${tp("stopAll")}</button>` : null}
+    </div>`}
+  </section>`;
+}
+
+/** The panel's action: Share page, or "Shared until …" when this block is shared. `block` as PageShareDialog's. */
+export function PageShareButton({ block, Icon }) {
+  const st = usePageShares();
+  const [open, setOpen] = useState(false);
+  if (!block || !st.canShare) return null;
+  const share = shareOf(st.shares, block.instance, block.from);
+  return html`<button type="button" class=${`btn btn-sm ${share ? "pv-fb-shared on" : "pv-fb-share"}`} title=${tp(share ? "sharedTitle" : "shareTitle")} onClick=${() => setOpen(true)}>
+      <${Icon} name="globe" size=${14} /><span class="lbl">${share ? tp("shared", until(share.expiresAt)) : tp("share")}</span></button>
+    ${open ? html`<${PageShareDialog} block=${block} share=${share} onClose=${() => setOpen(false)} />` : null}`;
+}

package/dist/ui/panel-chat.js

@@ -76,6 +76,7 @@ import { installMessageActions } from "./chat-msg-actions.js";
 import { createEmojiIndex } from "./chat-emojis.js";
 import { pollPublicPreview } from "./preview-status.js";
 import { createMentionIndex } from "./chat-mentions.js";
+import { setPanelFeedback } from "./preview-panel-actions.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";
@@ -142,6 +143,19 @@ export function boot({ stream, boot: bootData, deps = {} }) {
     if (auth && typeof auth.sessionHandle === "function") auth.sessionHandle().then((h) => P().setBannerScope(h), () => P().setBannerScope(null));
     else P().setBannerScope(null);
   }
+  // #2911: the preview panel's "Reply about this page" reaches the composer through these (an undoable edit, as typing).
+  setPanelFeedback({
+    findMsg: (instance, key) => (store.state.msgs[instance] || []).find((x) => msgKey(x) === key) || null,
+    startReply: (instance, x) => store.startReply(instance, x),
+    clearReply: (instance) => store.clearReply(instance),
+    addToDraft: (instance, line) => { recordEdit(composerField()); store.addToDraft(instance, line); },
+    focus: () => {
+      const el = composerField(); if (!el) return;
+      el.focus();
+      // After the render that shows the line: the caret at its end.
+      setTimeout(() => { try { const n = el.value.length; el.setSelectionRange(n, n); } catch { /* not a text field */ } }, 0);
+    },
+  });
   // #1604: the preview opt-in and Tour live in Settings → This device now (and on each preview card's menu).
   installTour();
   return store;

package/dist/ui/panel-notices.js

@@ -0,0 +1,98 @@
+// #2910 D2: a web-only fleet's Notices (/ui/notices) — what General would have said: fleet errors, an agent's crash,
+// quota or sign-in notice, a schedule that could not run, an available update. Behind the session gate (/ui/js/),
+// loaded the first time it is opened. The list is the app store's `notices` (read from GET /ui/notices/list, then each
+// new one from SSE `notice`); opening the page marks what it shows as read (POST /ui/notices/seen).
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { appStore, applyNoticesSeen, useStore } from "/assets/app-store.js";
+import { useLease } from "/assets/app-ctx.js";
+import { PanelHeader, setTitle } from "/assets/app-shell.js";
+import { chatPath } from "/assets/app-route.js";
+import { Empty } from "/assets/ui-states.js";
+import { Icon } from "/assets/ui-icons.js";
+
+register("notices", {
+  en: {
+    title: "Notices", sub: "What General would have said", empty: "No notices yet",
+    emptyHint: "This fleet has no Discord or Telegram connection, so what its General would say — errors, an agent that crashed or ran out of quota, a sign-in, an available update — is kept here.",
+    unread: "New", open: "Open chat",
+    kind_fleet: "Fleet", kind_instance: "Agent", kind_update: "Update", kind_schedule: "Schedule", kind_summary: "Daily summary",
+    ageNow: "just now", ageMin: "{0} min ago", ageHour: "{0} h ago", ageDay: "{0} d ago",
+  },
+  "zh-TW": {
+    title: "通知", sub: "原本會發到 General 的訊息", empty: "還沒有通知",
+    emptyHint: "這個 fleet 沒有 Discord 或 Telegram 連線，所以原本會由 General 說的事——錯誤、agent 當掉或額度用完、登入、新版本——都會留在這裡。",
+    unread: "新", open: "開啟聊天",
+    kind_fleet: "Fleet", kind_instance: "Agent", kind_update: "更新", kind_schedule: "排程", kind_summary: "每日摘要",
+    ageNow: "剛剛", ageMin: "{0} 分鐘前", ageHour: "{0} 小時前", ageDay: "{0} 天前",
+  },
+});
+const tn = (k, ...v) => t(`notices.${k}`, ...v);
+const ICON = { fleet: "alert", instance: "bot", update: "download", schedule: "clock", summary: "chart" };
+
+/** "3 min ago": a notice's age, refreshed by a display timer. */
+export function noticeAge(at, nowMs) {
+  const minutes = Math.max(0, Math.floor((nowMs - at) / 60_000));
+  if (minutes < 1) return tn("ageNow");
+  if (minutes < 60) return tn("ageMin", minutes);
+  const hours = Math.floor(minutes / 60);
+  return hours < 24 ? tn("ageHour", hours) : tn("ageDay", Math.floor(hours / 24));
+}
+
+/** The highest id a mark was sent for (a second ask for it, while the first is out or after it landed, sends nothing). */
+let markAsked = 0;
+/** Everything up to `id` is read: the server's mark, then the store's (a failure leaves both as they were). */
+export async function markNoticesSeen(id) {
+  if (id <= markAsked) return;
+  markAsked = id;
+  try {
+    const r = await fetch("/ui/notices/seen", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) });
+    const d = r.ok ? await r.json() : null;
+    // The mark only moves forward, and unread is counted from what the page has (a notice that arrived meanwhile stays unread).
+    if (d && typeof d.seen === "number") { const cur = appStore.get().notices, next = applyNoticesSeen(cur, d.seen); if (next !== cur) appStore.set({ notices: next }); }
+    else markAsked = Math.min(markAsked, id - 1);
+  } catch { markAsked = Math.min(markAsked, id - 1); /* stays unread; the next view marks it */ }
+}
+
+/** The newest notice the page has, marked read — while the page is visible and it is not read yet. */
+function markShown() {
+  const cur = appStore.get().notices, top = cur && cur.items.length ? cur.items[0].id : 0;
+  if (!top || top <= (cur.seen | 0)) return;
+  if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
+  markNoticesSeen(top);
+}
+
+export function NoticesPanel({ navKey }) {
+  const lease = useLease(navKey);
+  const { notices, instances } = useStore(appStore);
+  const items = notices && Array.isArray(notices.items) ? notices.items : [];
+  // What was unread when the page opened stays marked "New" while it is open (it is marked read on the server at once).
+  const [seenAtOpen] = useState(() => (notices ? notices.seen | 0 : 0));
+  const [, tick] = useState(0);
+  useEffect(() => { setTitle(tn("title")); const read = appStore.get().readNotices; if (read) read(); }, [navKey]);
+  useEffect(() => { lease.interval(() => tick((n) => n + 1), 30_000); }, [lease]);
+  // Shown → read: the newest one on the page, whenever a newer one arrives while it is open and visible.
+  const newest = items.length ? items[0].id : 0;
+  // …and, if one arrived while the tab was hidden, when it is shown again (#2925 review): one listener per visit.
+  useEffect(() => { markShown(); }, [newest]);
+  useEffect(() => { if (typeof document !== "undefined") lease.on(document, "visibilitychange", markShown); }, [lease]);
+  const known = new Set((instances || []).map((i) => i && i.name));
+  const nowMs = Date.now();
+  return html`<div data-effect-panel="notices" class="panel p-notices">
+    <${PanelHeader} title=${tn("title")} />
+    <div data-trust="panel-content" class="panel-body"><div class="col">
+      ${items.length ? html`<p class="note notice-sub">${tn("sub")}</p>` : null}
+      ${!items.length ? html`<${Empty} icon="bell" title=${tn("empty")} hint=${tn("emptyHint")} />`
+        : items.map((n) => html`<article key=${n.id} class=${`n-item notice${n.id > seenAtOpen ? " unread" : ""}${n.kind === "fleet" ? " bad" : ""}`}>
+          <span class="n-icon"><${Icon} name=${ICON[n.kind] || "info"} size=${18} /></span>
+          <div class="n-body">
+            <div class="n-title"><strong>${tn(`kind_${n.kind}`)}${n.instance ? ` · ${n.instance}` : ""}</strong>
+              ${n.id > seenAtOpen ? html`<span class="notice-new">${tn("unread")}</span>` : null}
+              <span class="n-age" title=${new Date(n.at).toLocaleString()}>${noticeAge(n.at, nowMs)}</span></div>
+            <p class="n-detail notice-text">${n.text}</p>
+            ${n.instance && known.has(n.instance) ? html`<div class="n-actions"><a class="btn btn-sm btn-ghost" href=${chatPath(n.instance)}>${tn("open")}</a></div>` : null}
+          </div>
+        </article>`)}
+    </div></div>
+  </div>`;
+}

package/dist/ui/panel-settings.js

@@ -48,6 +48,7 @@ import "./chat-strings.js";
 import { AppearanceSection } from "./settings-appearance.js";
 import { GuestsCard } from "./settings-guests.js";
 import { OfficeSharesCard } from "./office-share-dialog.js";
+import { PageSharesCard } from "./page-share-dialog.js";
 import { syncStage, useDraft } from "./settings-draft.js";
 import { WebAuthorityCard } from "./settings-web-authority.js";
 import { NamedLinkTest, setTypedTunnelToken } from "./settings-named-test.js";
@@ -1200,13 +1201,14 @@ function WebSection({ ctx, staged, part = "all" }) {
     log: web.log_tab === true,                                                  // #1218: off by default
     usagePub: web.usage_report_on_public_link === true,                         // #2122: off by default
     levels: web.office_levels !== false,                                        // #2661: on by default
+    cdn: web.preview_cdn === true,                                              // #2911 (7): off by default
     pub: { allow_public: (web.public_link && web.public_link.allow_public) ?? true, ttl_minutes: (web.public_link && web.public_link.ttl_minutes) ?? 120, protocol: (web.public_link && web.public_link.protocol) ?? "http2", hostname: (web.public_link && web.public_link.hostname) ?? "", tunnel_token_env: (web.public_link && web.public_link.tunnel_token_env) ?? "", origin_port: (web.public_link && web.public_link.origin_port) ?? 19282, auto_open: (web.public_link && web.public_link.auto_open) ?? false },
     session: { absolute_hours: local.absolute_hours ?? null, idle_hours: local.idle_hours ?? null },
     terminal: { enabled: term.enabled ?? null, ttl_minutes: term.ttl_minutes ?? null },
   }), []);
   const text = (v) => (v === null || v === undefined ? "" : String(v));
   /** #2347: a field's row class: `s-dirty` while it differs from what is saved (the draft may come from before). */
-  const savedForm = useMemo(() => ({ notify: String(original.notify), echo: original.echo, log: original.log, usagePub: original.usagePub, levels: original.levels, pub: original.pub.allow_public,
+  const savedForm = useMemo(() => ({ notify: String(original.notify), echo: original.echo, log: original.log, usagePub: original.usagePub, levels: original.levels, cdn: original.cdn, pub: original.pub.allow_public,
     ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol, hostname: original.pub.hostname, originPort: String(original.pub.origin_port),
     abs: text(original.session.absolute_hours), idle: text(original.session.idle_hours), termOn: original.terminal.enabled !== false,
     termTtl: text(original.terminal.ttl_minutes), autoOpen: original.pub.auto_open }), []);
@@ -1220,7 +1222,7 @@ function WebSection({ ctx, staged, part = "all" }) {
     return {
       notify: String(pick(pending, "notify_login", original.notify)),
       echo: pick(pending, "echo_to_channel", original.echo), log: pick(pending, "log_tab", original.log), usagePub: pick(pending, "usage_report_on_public_link", original.usagePub),
-      levels: pick(pending, "office_levels", original.levels),
+      levels: pick(pending, "office_levels", original.levels), cdn: pick(pending, "preview_cdn", original.cdn),
       pub: pick(pub, "allow_public", original.pub.allow_public), ttl: String(pick(pub, "ttl_minutes", original.pub.ttl_minutes)), protocol: pick(pub, "protocol", original.pub.protocol),
       hostname: pick(pub, "hostname", original.pub.hostname), originPort: String(pick(pub, "origin_port", original.pub.origin_port)), autoOpen: pick(pub, "auto_open", original.pub.auto_open),
       abs: text(pick(session, "absolute_hours", original.session.absolute_hours)), idle: text(pick(session, "idle_hours", original.session.idle_hours)),
@@ -1273,6 +1275,7 @@ function WebSection({ ctx, staged, part = "all" }) {
       ...(f.log !== original.log ? { log_tab: f.log } : {}),
       ...(f.usagePub !== original.usagePub ? { usage_report_on_public_link: f.usagePub } : {}),
       ...(f.levels !== original.levels ? { office_levels: f.levels } : {}),
+      ...(f.cdn !== original.cdn ? { preview_cdn: f.cdn } : {}),
       ...(Object.keys(publicPatch).length ? { public_link: publicPatch } : {}),
       ...(Object.keys(sessionPatch).length ? { session: { local: sessionPatch } } : {}),
       ...(Object.keys(terminalPatch).length ? { web_terminal: terminalPatch } : {}),
@@ -1283,6 +1286,7 @@ function WebSection({ ctx, staged, part = "all" }) {
       ...(body.log_tab !== undefined ? ["web.log_tab"] : []),
       ...(body.usage_report_on_public_link !== undefined ? ["web.usage_report_on_public_link"] : []),
       ...(body.office_levels !== undefined ? ["web.office_levels"] : []),
+      ...(body.preview_cdn !== undefined ? ["web.preview_cdn"] : []),
       ...Object.keys(publicPatch).map((k) => `web.public_link.${k}`),
       ...Object.keys(sessionPatch).map((k) => `web.session.local.${k}`),
       ...Object.keys(terminalPatch).map((k) => `web_terminal.${k}`),
@@ -1365,6 +1369,7 @@ function WebSection({ ctx, staged, part = "all" }) {
     </section>`) : null}
     ${has("access") && !overPublicLink ? html`<${PublicTunnelToken} />` : null}
     ${has("access") ? html`<${OfficeSharesCard} />` : null}
+    ${has("access") ? html`<${PageSharesCard} />` : null}
     ${has("access") && !overPublicLink ? html`<${GuestsCard} ctx=${ctx} staged=${staged} /><${WebAuthorityCard} ctx=${ctx} staged=${staged} />` : null}
     ${has("chat") ? lock(html`<section class="card"><h3>${tn("webChat")}</h3>
       <label class=${fc("check", "echo")}><input id="webEchoToChannel" type="checkbox" checked=${f.echo} onChange=${(e) => set("echo")(e.target.checked)} /><span>${tn("webEcho")}</span><${Impact} schema=${schema} field="web.echo_to_channel" /></label>
@@ -1377,6 +1382,8 @@ function WebSection({ ctx, staged, part = "all" }) {
       <p class="note">${tn("webUsagePublicHint")}</p>
       <label class=${fc("check", "levels")}><input id="webOfficeLevels" type="checkbox" checked=${f.levels} onChange=${(e) => set("levels")(e.target.checked)} /><span>${tn("webOfficeLevels")}</span><${Impact} schema=${schema} field="web.office_levels" /></label>
       <p class="note">${tn("webOfficeLevelsHint")}</p>
+      <label class=${fc("check", "cdn")}><input id="webPreviewCdn" type="checkbox" checked=${f.cdn} onChange=${(e) => set("cdn")(e.target.checked)} /><span>${tn("webPreviewCdn")}</span><${Impact} schema=${schema} field="web.preview_cdn" /></label>
+      <p class="note">${tn("webPreviewCdnHint")}</p>
     </section>`) : null}
     ${has("readonly") ? html`<section class="card s-web-readonly"><h3>${tn("webReadOnlyTitle")}</h3>
       <p class="note">${tn("webReadOnlyLead")}</p>

package/dist/ui/preview-pages.js

@@ -0,0 +1,41 @@
+// #2911 (6): every page in the thread — the list the preview panel shows. A page is what preview-versions.js counts as
+// versions of one thing: the agent's complete ```html blocks with one <title> (the untitled ones together), or its
+// attached .html files of one name. Pure: the panel draws it; nothing here runs a preview.
+import "./chat-render.js";
+import { htmlTitle } from "./preview-versions.js";
+
+const R = () => globalThis.AgendChatRender;
+
+/**
+ * The pages in `msgs` (in thread order), newest first: [{ id, label, kind: "html" | "file", versions, latest }], where
+ * `latest` is the newest version as the panel opens it ({ key, instance, msgKey, n | att, code, sender, ts }; an
+ * attached file's code is read when it is opened). `label` is the title, the file name, or "" for untitled blocks.
+ */
+export function pagesOf(msgs, keyOf, instance) {
+  const pages = new Map();
+  const add = (id, label, kind, spec) => {
+    const p = pages.get(id);
+    if (p) { p.versions++; p.latest = spec; pages.delete(id); pages.set(id, p); }   // re-inserted: newest last
+    else pages.set(id, { id, label, kind, versions: 1, latest: spec });
+  };
+  for (const x of Array.isArray(msgs) ? msgs : []) {
+    if (x.role !== "agent") continue;
+    const msgKey = keyOf(x);
+    R().htmlFences(x.text).forEach((f, n) => {
+      if (!f.terminated) return;
+      const title = htmlTitle(f.code);
+      add(`t:${title}`, title, "html", { key: `${msgKey}:f${n}`, instance, msgKey, n, code: f.code, sender: x.sender, ts: x.ts });
+    });
+    for (const a of Array.isArray(x.attachments) ? x.attachments : []) {
+      if (!R().isHtmlAttachment(a)) continue;
+      add(`a:${a.name.trim().toLowerCase()}`, a.name, "file", { key: `${msgKey}:a${a.id}`, instance, msgKey, att: { id: a.id, name: a.name, size: a.size }, code: null, sender: x.sender, ts: x.ts });
+    }
+  }
+  return [...pages.values()].reverse();
+}
+
+/** The page `open` belongs to: its id in pagesOf's terms. */
+export function pageIdOf(open) {
+  if (!open) return null;
+  return open.att ? `a:${String(open.att.name || "").trim().toLowerCase()}` : `t:${htmlTitle(open.code)}`;
+}