@songsid/agend 2.3.3 → 2.3.4-beta.10

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;
@@ -783,6 +797,8 @@ function DeleteDialog({ name, onClose }) {
     } catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) { toast(r.error, false); if (!handedOver && lease.current()) setBusy(false); return; }
     toast(t("chat.instanceDeleted", name));
+    // The agent's own topic went too, or stayed with the reason (the server's own words: no new string here).
+    if (r.topic_note) toast(r.topic_note, r.topic_deleted !== false);
     if (handedOver || !lease.current()) return;
     setBusy(false);
     onClose();

package/dist/ui/panel-log.js

@@ -49,6 +49,7 @@ register("log", {
     user: "Asked", assistant: "Replied", error: "Error", errorCode: "Error {0}", turnEnd: "Turn ended", turnEndIn: "Turn ended · {0}",
     compacted: "Conversation compacted", turn: "Turn",
     running: "running", done: "done", failed: "failed", interrupted: "interrupted", exit: "exit {0}",
+    showScreen: "Show what was on screen", hideScreen: "Hide what was on screen",
     showOutput: "Show output", hideOutput: "Hide output", args: "Arguments", output: "Output", noOutput: "No output.",
     showAll: "Show all", showLess: "Show less", cut: "… {0} more characters not shown.", tooLarge: "Output of {0}: only its start is shown.",
     times: "×{0}", newer: "{0} new",
@@ -87,6 +88,7 @@ register("log", {
     user: "收到要求", assistant: "回覆", error: "錯誤", errorCode: "錯誤 {0}", turnEnd: "回合結束", turnEndIn: "回合結束 · {0}",
     compacted: "對話已壓縮", turn: "回合",
     running: "執行中", done: "完成", failed: "失敗", interrupted: "中斷", exit: "結束碼 {0}",
+    showScreen: "顯示當時的畫面", hideScreen: "隱藏當時的畫面",
     showOutput: "顯示輸出", hideOutput: "隱藏輸出", args: "參數", output: "輸出", noOutput: "沒有輸出。",
     showAll: "顯示全部", showLess: "收合", cut: "… 還有 {0} 個字元沒有顯示。", tooLarge: "輸出共 {0}，只顯示開頭。",
     times: "×{0}", newer: "{0} 則新的",
@@ -402,7 +404,11 @@ function Row({ x, prev }) {
   };
   let row;
   if (x.kind === "event") {
-    row = html`${head(KIND_ICON.event, eventLabel(x.type))}${x.detail ? html`<div class="log-text muted">${x.detail}</div>` : null}`;
+    // M-2269: a dialog or prompt AgEnD saw (the CLI never writes it to its transcript): its text as it was on screen,
+    // folded until asked for. Text only (a text node), masked by the server.
+    row = html`${head(KIND_ICON.event, eventLabel(x.type))}${x.detail ? html`<div class="log-text muted">${x.detail}</div>` : null}
+      ${x.screen ? html`<button type="button" class="link-btn log-toggle log-screen-toggle" aria-expanded=${open ? "true" : "false"} onClick=${() => setOpen(!open)}>${open ? tl("hideScreen") : tl("showScreen")}</button>` : null}
+      ${x.screen && open ? html`<div class="log-detail"><div class="log-text mono log-screen">${x.screen}</div></div>` : null}`;
   } else if (x.kind === "user" || x.kind === "assistant") {
     row = html`${head(KIND_ICON[x.kind], tl(x.kind))}${text(x.body, x.bodyCut)}`;
   } else if (x.kind === "error") {

package/dist/ui/panel-needs.js

@@ -25,7 +25,7 @@ import { openSignIn, signInOffered } from "./backend-signin.js";
 register("needs", {
   en: {
     title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in your chat app's General.", emptyHintWeb: "When an agent waits for you, it shows here.",
-    open: "Open chat", openCard: "Open the card", noAssignee: "Task board (nobody assigned)", fleetSignIns: "Fleet sign-ins", signIn: "Sign in",
+    open: "Open chat", kiroOpen: "Open agent", kiroMigration: "Migration instructions", openCard: "Open the card", noAssignee: "Task board (nobody assigned)", fleetSignIns: "Fleet sign-ins", signIn: "Sign in",
     gap: "not wrapped up: {0}", gapUnchecked: "{0} checklist item(s) unchecked", gapNoResult: "no result", gapJoin: ", ", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
     ageNow: "just now", ageMin: "{0} min", ageHour: "{0} h", ageDay: "{0} d",
     notifyTitle: "Notify me on this device", notifyOn: "Notifications are on for this browser while a tab is open.",
@@ -34,11 +34,11 @@ register("needs", {
     notifyMobile: "On a phone, rely on your chat app's notification: a new item is a new post in General.", notifyMobileWeb: "On a phone, open this page to see what needs you.",
     notifyInsecure: "Notifications need a secure address (localhost or the HTTPS public link), not a plain-HTTP LAN address.",
     notifyUnsupported: "This browser cannot show notifications.", turnOn: "Turn on", turnOff: "Turn off",
-    typePrompt: "Fleet prompt", typeAwaiting: "At its terminal", typeInstance: "Instance", typeDelivery: "Delivery",
+    typePrompt: "Fleet prompt", typeAwaiting: "At its terminal", typeInstance: "Instance", typeDelivery: "Delivery", typeMissed: "Missed while offline",
   },
   "zh-TW": {
     title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
-    open: "開啟聊天", openCard: "打開卡片", noAssignee: "任務看板（沒有負責人）", fleetSignIns: "Fleet 登入", signIn: "登入",
+    open: "開啟聊天", kiroOpen: "開啟 Agent", kiroMigration: "遷移說明", openCard: "打開卡片", noAssignee: "任務看板（沒有負責人）", fleetSignIns: "Fleet 登入", signIn: "登入",
     gap: "還沒補齊：{0}", gapUnchecked: "還有 {0} 項沒勾", gapNoResult: "沒有產出總結", gapJoin: "、", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
     ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
     notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
@@ -47,10 +47,18 @@ register("needs", {
     notifyMobile: "在手機上請以聊天 app 的通知為主：每個新項目都會在 General 發一則新訊息。", notifyMobileWeb: "在手機上請打開這個頁面查看等你處理的事。",
     notifyInsecure: "通知需要安全的網址（localhost 或 HTTPS 公開連結），區網的一般 HTTP 網址不行。",
     notifyUnsupported: "這個瀏覽器無法顯示通知。", turnOn: "開啟", turnOff: "關閉",
-    typePrompt: "Fleet 提示", typeAwaiting: "在終端機上", typeInstance: "Instance", typeDelivery: "傳送",
+    typePrompt: "Fleet 提示", typeAwaiting: "在終端機上", typeInstance: "Instance", typeDelivery: "傳送", typeMissed: "離線時錯過",
   },
 });
 const tn = (k, ...v) => t(`needs.${k}`, ...v);
+/** Stale shells keep the old app-i18n.js; a missing key would otherwise show as app.needs_reason_*. */
+function itemReason(item) {
+  const text = reasonText(item);
+  if (typeof text === "string" && text.startsWith("app.needs_reason_") && (item.type === "missed" || item.reason === "missed_offline")) {
+    return tn("typeMissed");
+  }
+  return text;
+}
 
 /**
  * The page's claims on what Needs you writes, kept for the life of the page — not of a panel or a render (#1463
@@ -86,7 +94,7 @@ const setClaim = (kind, key, value) => claims.set((c) => {
   return { ...c, [kind]: next };
 });
 
-const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send", task: "tasks" };
+const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send", task: "tasks", missed: "clock" };
 const BAD = new Set(["crashed", "delivery_failed", "hang", "exited"]);
 
 /**
@@ -195,16 +203,17 @@ function NeedsItem({ item, nowMs, owner }) {
   return html`<article data-trust="permission" class=${`n-item${BAD.has(item.reason) ? " bad" : ""}`}>
     <span class="n-icon"><${Icon} name=${ICON[item.type] || "alert"} size=${18} /></span>
     <div class="n-body">
-      <div class="n-title"><strong>${reasonText(item)}</strong><span class="n-age">${age(item.since, nowMs)}</span></div>
+      <div class="n-title"><strong>${itemReason(item)}</strong><span class="n-age">${age(item.since, nowMs)}</span></div>
       ${detailOf(item) ? html`<p class="n-detail">${detailOf(item)}</p>` : null}
       <div class="n-actions">
         ${item.type === "prompt" && Array.isArray(item.actions) ? item.actions.filter((a) => !a.input).map((a) => html`<button key=${a.id} type="button" class="btn btn-sm"
             disabled=${promptBusy} onClick=${() => answer(a.id)}>${(p ? p.busy : fallback === "busy") ? tn("answering") : a.label}</button>`) : null}
-        ${item.type === "delivery" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
+        ${item.type === "delivery" || item.type === "missed" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
             <${Icon} name="check" size=${14} />${ack === "busy" ? tn("acknowledging") : tn("acknowledge")}</button>` : null}
         ${(item.reason === "auth_paused" || item.reason === "backend_signin") && item.signIn && signInOffered() ? html`<button type="button" class="btn btn-sm btn-primary" onClick=${() => openSignIn(item.signIn)}>${tn("signIn")}</button>` : null}
         ${item.type === "task" && item.card ? html`<a class="btn btn-sm" href=${`/ui/fleet?card=${encodeURIComponent(item.card.code)}`}>${tn("openCard")}</a>` : null}
-        ${item.instance ? html`<a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>` : null}
+        ${item.kiroChoice === true ? html`<a class="btn btn-sm" href="https://github.com/songsid/AgEnD/blob/main/src/general-knowledge/skills/kiro-engine-migration/SKILL.md" target="_blank" rel="noopener noreferrer">${tn("kiroMigration")}</a>` : null}
+        ${item.instance ? html`<a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn(item.kiroChoice === true ? "kiroOpen" : "open")}</a>` : null}
       </div>
     </div>
   </article>`;

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