@songsid/agend 2.3.3-beta.9 → 2.3.4-beta.1

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,8 +48,10 @@ 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";
 import { SignInList } from "./backend-signin.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
@@ -1199,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 }), []);
@@ -1219,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)),
@@ -1272,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 } : {}),
@@ -1282,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}`),
@@ -1353,6 +1358,7 @@ function WebSection({ ctx, staged, part = "all" }) {
         <div class=${fc("field", "originPort")}><label for="publicWebOriginPort">${tn("namedOriginPort")}</label><input id="publicWebOriginPort" type="number" min="1024" max="65535" value=${f.originPort} class=${errors.originPort ? "invalid" : ""} onInput=${(e) => set("originPort")(e.target.value)} /><${Feedback} error=${errors.originPort} /></div>
       </div>
       <p class="note">${tn("namedTunnelHint")} <a href="https://github.com/songsid/AgEnD/blob/main/docs/named-tunnel.md" target="_blank" rel="noopener noreferrer">${tn("namedTunnelSetup")}</a></p>
+      ${String(f.hostname || "").trim() ? html`<${NamedLinkTest} hostname=${f.hostname} port=${f.originPort} protocol=${f.protocol} />` : null}
       <div class="grid2">
         <div class=${fc("field", "ttl")}><label for="publicWebTtl">${tn(named ? "publicTtlNamed" : "publicTtl")}</label><input id="publicWebTtl" type="number" min=${named ? "0" : "1"} max=${named ? "10080" : "480"} step="1" class=${errors.ttl ? "invalid" : ""} value=${f.ttl} onInput=${(e) => set("ttl")(e.target.value)} /><${Feedback} error=${errors.ttl} /></div>
         <div class=${fc("field", "protocol")}><label for="publicWebProtocol">${tn("publicProtocol")}</label><${Select} id="publicWebProtocol" value=${f.protocol} onChange=${set("protocol")} options=${["http2", "quic", "auto"]} /></div>
@@ -1363,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>
@@ -1375,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>
@@ -1548,11 +1557,11 @@ function PublicTunnelToken() {
     const result = await api(base);
     if (lease.current() && result.ok) setPresent(result.body?.[0]?.token_present === true);
   };
-  useEffect(() => { refresh().catch(() => {}); }, []);
+  useEffect(() => { refresh().catch(() => {}); return () => setTypedTunnelToken(""); }, []);
   const go = async (clear) => {
     if (inFlight.current || !clear && !secret) return;
     const value = secret;
-    setSecret(""); inFlight.current = true; setBusy(true); setMessage("");
+    setSecret(""); setTypedTunnelToken(""); inFlight.current = true; setBusy(true); setMessage("");
     const key = newKey("tunnel-token");
     try {
       const prepared = await api(`${base}/verify`, { method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify(clear ? { clear: true } : { secret: value }) });
@@ -1576,7 +1585,7 @@ function PublicTunnelToken() {
   return html`<section class="card"><h3>${tn("namedToken")}</h3>
     <p class="note">${tn("namedTokenHint")}</p>
     <span class="tag">${present ? tn("keyConfigured") : tn("keyNotConfigured")}</span>
-    <input id="publicTunnelToken" type="password" autocomplete="new-password" aria-label=${tn("namedToken")} value=${secret} onInput=${e => setSecret(e.target.value)} />
+    <input id="publicTunnelToken" type="password" autocomplete="new-password" aria-label=${tn("namedToken")} value=${secret} onInput=${e => { setSecret(e.target.value); setTypedTunnelToken(e.target.value); }} />
     <button type="button" class="btn btn-sm" disabled=${busy || !secret} onClick=${() => go(false)}>${tn("namedTokenSet")}</button>
     <button type="button" class="btn btn-sm" disabled=${busy || !present} onClick=${() => go(true)}>${tn("namedTokenClear")}</button>
     ${message ? html`<p class="note" role="status">${message}</p>` : null}

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)}`;
+}

package/dist/ui/preview-panel-actions.js

@@ -0,0 +1,161 @@
+// #2911: the preview panel's feedback actions — what a person tells the agent about the page it made (M-2217). The
+// panel (preview-panel.js, M-2216's chrome) renders <PanelActions> in its bar, before Download; everything the actions
+// do lives here, so neither side edits the other's file.
+//
+// Nothing here reads or relays the page. A preview's content is the agent's untrusted HTML, so only what the chat
+// already holds goes into the message: a #2272 reply to the message the page came in, and the page's <title> or file
+// name as one line of plain text in the composer — where the person edits it and sends it themselves. What goes is an
+// ordinary message (Discord first): no new channel, nothing sent by itself.
+
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { Icon } from "/assets/ui-icons.js";
+import { closePanel, frameKey, htmlTitle } from "./preview-panel.js";
+import { PageShareButton } from "./page-share-dialog.js";
+
+const P = () => globalThis.AgendPreview;
+
+/**
+ * The chat registers how to reach its composer (panel-chat.js): { findMsg(instance, msgKey), startReply(instance, msg),
+ * clearReply(instance), addToDraft(instance, line), focus() }. null: no chat is mounted, and the actions are not shown.
+ */
+let chat = null;
+export function setPanelFeedback(deps) { chat = deps || null; }
+
+/** The most of a page's title or file name the line carries. */
+export const NAME_MAX = 80;
+
+/** One line of plain text: format characters removed, whitespace and control characters collapsed, cut at NAME_MAX characters. */
+export function plainName(value) {
+  // \p{Cf} first (bidi controls, zero-widths): what the person reads is what is sent (#2914 review).
+  const s = String(value == null ? "" : value).replace(/\p{Cf}+/gu, "").replace(/[\s\u0000-\u001f\u007f-\u009f\u2028\u2029]+/gu, " ").trim();
+  const chars = [...s];
+  return chars.length > NAME_MAX ? `${chars.slice(0, NAME_MAX - 1).join("")}…` : s;
+}
+
+/** The composer's line naming the page: its <title>, else the attached file's name, else "this page". */
+export function aboutLine(open) {
+  if (!open) return "";
+  const name = plainName(htmlTitle(open.code || "")) || plainName(open.att && open.att.name);
+  return name ? t("chat.pvFbAboutNamed", name) : t("chat.pvFbAboutThis");
+}
+
+/**
+ * Reply about the open page: a reply to the message it came in (while the thread still has it), and the line naming
+ * the page added to the composer (never twice). Returns false when there is nothing to do it with.
+ */
+export function replyAboutPage(open, deps = chat) {
+  if (!open || !deps) return false;
+  const msg = open.msgKey ? deps.findMsg(open.instance, open.msgKey) : null;
+  // The page's message gone from the thread: no reply — and not one to another message started earlier, which the
+  // line naming this page would be sent as (#2913 review).
+  if (msg) deps.startReply(open.instance, msg);
+  else deps.clearReply(open.instance);
+  deps.addToDraft(open.instance, aboutLine(open));
+  deps.focus();
+  return true;
+}
+
+/**
+ * #2911: the lines the errors chip adds — a header saying the text below is the page's, then each kept error quoted
+ * ("> "), already one line of plain text (preview.js), and how many more there were. `log`: P().errors(key).
+ */
+export function errorLines(log) {
+  if (!log || !log.count) return [];
+  const kind = { error: "", rejection: t("chat.pvFbErrRejection"), console: "console.error: ", blocked: t("chat.pvCdnBlocked") };
+  const lines = [t(log.count === 1 ? "chat.pvFbErrHeadOne" : "chat.pvFbErrHead", String(log.count))];
+  for (const x of log.items) lines.push(`> ${kind[x.kind] ?? ""}${plainName(x.message)}${x.line ? ` (${t("chat.pvFbErrAt", String(x.line), String(x.col))})` : ""}`);
+  const more = log.count - log.items.length;
+  if (more > 0) lines.push(t("chat.pvFbErrMore", String(more)));
+  return lines;
+}
+
+/** The errors chip's click: reply about the page, then the error lines (each once) — the person edits and sends. */
+export function sendErrors(open, log, deps = chat) {
+  if (!replyAboutPage(open, deps)) return false;
+  for (const line of errorLines(log)) deps.addToDraft(open.instance, line);
+  deps.focus();
+  return true;
+}
+
+/**
+ * #2911: the line a picked element adds — where in the page (the selector the page's frame built, as code) and its
+ * words, marked as the page's text. Backticks are taken out of the selector so it stays one code span.
+ */
+export function pickLine(result) {
+  if (!result) return "";
+  const where = plainName(String(result.selector || "").replace(/`/g, "")) || "?";
+  const words = plainName(result.text);
+  return words ? t("chat.pvFbPickWords", where, words) : t("chat.pvFbPickAt", where);
+}
+
+/** A picked element: reply about the page, then its line — the person writes what to change after it. */
+export function sendPick(open, result, deps = chat) {
+  if (!result || !replyAboutPage(open, deps)) return false;
+  deps.addToDraft(open.instance, pickLine(result));
+  deps.focus();
+  return true;
+}
+
+/** Whether the open page's frame is in pick mode, and its answer handed to sendPick. */
+function usePick(open) {
+  const key = open ? frameKey(open.key) : null;
+  const [on, setOn] = useState(() => !!(key && P() && P().picking && P().picking(key)));
+  useEffect(() => {
+    setOn(!!(key && P() && P().picking && P().picking(key)));
+    if (!key || !P() || typeof P().onPick !== "function") return undefined;
+    return P().onPick((k, result, now) => {
+      if (k !== key) return;
+      setOn(!!now);
+      if (result) { if (narrow()) closePanel(); sendPick(open, result); }
+    });
+  }, [key]);
+  return on;
+}
+
+/** The errors the open page's frame reported, re-read when they change. */
+function useErrors(open) {
+  const key = open ? frameKey(open.key) : null;
+  const read = () => (key && P() && typeof P().errors === "function" ? P().errors(key) : null);
+  const [log, setLog] = useState(read);
+  useEffect(() => {
+    setLog(read());
+    if (!key || !P() || typeof P().onErrors !== "function") return undefined;
+    return P().onErrors((k) => { if (k === key) setLog(read()); });
+  }, [key]);
+  return log;
+}
+
+/**
+ * #2911 item 8: what Share page names — the block of the message the open page came in ({ boot, id } and its fence
+ * number or attachment id; the server reads the page itself), its title, and whose reply. null while the thread no
+ * longer has that message.
+ */
+export function shareBlock(open, deps = chat) {
+  if (!open || !deps) return null;
+  const msg = open.msgKey ? deps.findMsg(open.instance, open.msgKey) : null;
+  if (!msg || typeof msg.boot !== "string" || typeof msg.id !== "number") return null;
+  const from = open.att && typeof open.att.id === "string" ? { boot: msg.boot, id: msg.id, att: open.att.id }
+    : Number.isInteger(open.n) ? { boot: msg.boot, id: msg.id, fence: open.n } : null;
+  if (!from) return null;
+  const title = plainName(htmlTitle(open.code || "")) || plainName(open.att && open.att.name);
+  return { instance: open.instance, from, title, sender: msg.sender || open.sender || "", ts: msg.ts || open.ts || "" };
+}
+
+const narrow = () => typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(max-width: 899px)").matches;
+
+/** The bar's actions for the open page. props: open, name, run, view (as the panel has them). */
+export function PanelActions({ open, run }) {
+  const log = useErrors(open);
+  const picking = usePick(open);
+  if (!open || !chat) return null;
+  // On a phone the panel is a sheet over the composer: it closes, so the composer is there to type in.
+  const reply = () => { if (narrow()) closePanel(); replyAboutPage(open); };
+  const send = () => { const now = P().errors(frameKey(open.key)); if (narrow()) closePanel(); sendErrors(open, now); };
+  const n = log ? log.count : 0;
+  const key = open && frameKey(open.key);
+  const canPick = run && run.state === "running" && typeof P().pick === "function";
+  const point = () => { P().pick(key, !picking); };
+  return html`<${PageShareButton} block=${shareBlock(open)} Icon=${Icon} />${canPick ? html`<button type="button" class=${`btn btn-sm pv-fb-pick${picking ? " on" : ""}`} aria-pressed=${picking ? "true" : "false"}
+      title=${t(picking ? "chat.pvFbPickCancelTitle" : "chat.pvFbPickTitle")} onClick=${point}><${Icon} name="edit" size=${14} /><span class="lbl">${t(picking ? "chat.pvFbPickCancel" : "chat.pvFbPick")}</span></button>` : null}${n ? html`<button type="button" class="btn btn-sm pv-fb-errors" title=${t("chat.pvFbErrTitle")} onClick=${send}><${Icon} name="alert" size=${14} /><span class="pv-fb-n">${n >= P().ERRORS.maxCount ? `${n}+` : String(n)}</span><span class="lbl">${t(n === 1 ? "chat.pvFbErrOne" : "chat.pvFbErrMany")}</span></button>` : null}<button type="button" class="btn btn-sm pv-fb-reply" title=${t("chat.pvFbReplyTitle")} onClick=${reply}><${Icon} name="chat" size=${14} /><span class="lbl">${t("chat.pvFbReply")}</span></button>`;
+}