@songsid/agend 2.3.3 → 2.3.4-beta.2

package/dist/ui/preview-versions.js

@@ -0,0 +1,155 @@
+// #2911 (1): the versions of a page in the preview panel, and the changes from one to the next. Pure functions: the
+// panel (preview-panel.js) draws them. Nothing here runs a preview — a version is shown as any block is, waiting for
+// Preview (#1481 §14).
+import "./chat-render.js";
+
+const R = () => globalThis.AgendChatRender;
+
+/** The text of a block's <title>, or "" — what says two blocks are versions of one thing. */
+export function htmlTitle(code) {
+  const m = /<title[^>]*>([\s\S]*?)<\/title>/i.exec(String(code || ""));
+  return m ? m[1].replace(/\s+/g, " ").trim() : "";
+}
+
+/**
+ * Every version of the shown block in the loaded thread, oldest first, and where the shown one is in it.
+ * - An attached file: the agent's attachments of the same name (case-insensitive). Their HTML is read when picked (code: null).
+ * - A titled block: the agent's complete ```html blocks with the same <title>.
+ * - An untitled block: the agent's complete untitled blocks — a titled one is another page.
+ * Only agent replies count, and only complete blocks, as for a card. `index` is -1 (and `list` is just the shown block)
+ * when the block is no longer in the thread.
+ */
+export function versionsOf(open, msgs, keyOf) {
+  if (!open) return { list: [], index: -1 };
+  const list = [];
+  const all = Array.isArray(msgs) ? msgs : [];
+  if (open.att) {
+    const name = String(open.att.name || "").trim().toLowerCase();
+    for (const x of all) {
+      if (x.role !== "agent" || !Array.isArray(x.attachments)) continue;
+      const msgKey = keyOf(x);
+      for (const a of x.attachments) {
+        if (!R().isHtmlAttachment(a) || a.name.trim().toLowerCase() !== name) continue;
+        list.push({ key: `${msgKey}:a${a.id}`, instance: open.instance, msgKey, att: { id: a.id, name: a.name, size: a.size }, code: null, sender: x.sender, ts: x.ts });
+      }
+    }
+  } else {
+    const title = htmlTitle(open.code);
+    for (const x of all) {
+      if (x.role !== "agent") continue;
+      const msgKey = keyOf(x);
+      R().htmlFences(x.text).forEach((f, n) => {
+        if (!f.terminated || htmlTitle(f.code) !== title) return;
+        list.push({ key: `${msgKey}:f${n}`, instance: open.instance, msgKey, n, code: f.code, sender: x.sender, ts: x.ts });
+      });
+    }
+  }
+  const index = list.findIndex(v => v.key === open.key);
+  return index < 0 ? { list: [open], index: -1 } : { list, index };
+}
+
+// ── Changes: a line diff (Myers), bounded ──
+
+/** Past these, "Changes" says the versions are too large or too different to compare here. */
+export const DIFF_LIMITS = { maxChars: 5 * 1024 * 1024, maxInputLines: 50000, maxEdits: 2000, context: 3, maxLines: 3000 };
+
+/**
+ * How many lines `lines()` makes of `s`, counted without splitting it (#2915 review: a budget before anything is
+ * built) — LF, CRLF and a lone CR each end a line, and a last line without one counts; it stops counting past `max`
+ * (anything over `max` is then reported as max + 1).
+ */
+export function lineCount(s, max = Infinity) {
+  if (!s) return 0;
+  let breaks = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charCodeAt(i);
+    if (c === 10 || c === 13) {
+      if (c === 13 && s.charCodeAt(i + 1) === 10) i++;
+      if (++breaks > max) return max + 1;
+    }
+  }
+  const last = s.charCodeAt(s.length - 1);
+  return Math.min(breaks + (last === 10 || last === 13 ? 0 : 1), max + 1);
+}
+
+const lines = (s) => { if (!s) return []; const v = String(s).replace(/\r\n?/g, "\n").split("\n"); if (v.length > 1 && v[v.length - 1] === "") v.pop(); return v; };
+
+/**
+ * The line edits from `a` to `b`: [{ t: " " | "-" | "+", text }] in order, or null when it cannot be done within
+ * DIFF_LIMITS: either side over maxChars or maxInputLines (checked before anything is split or built: an op per line
+ * is made only under that budget), or more than maxEdits lines differ after the common head and tail.
+ */
+export function lineDiff(a, b, limits = DIFF_LIMITS) {
+  const sa = String(a ?? ""), sb = String(b ?? "");
+  if (sa.length > limits.maxChars || sb.length > limits.maxChars) return null;
+  if (lineCount(sa, limits.maxInputLines) > limits.maxInputLines || lineCount(sb, limits.maxInputLines) > limits.maxInputLines) return null;
+  a = sa; b = sb;
+  const A = lines(a), B = lines(b);
+  let head = 0;
+  while (head < A.length && head < B.length && A[head] === B[head]) head++;
+  let tail = 0;
+  while (tail < A.length - head && tail < B.length - head && A[A.length - 1 - tail] === B[B.length - 1 - tail]) tail++;
+  const x = A.slice(head, A.length - tail), y = B.slice(head, B.length - tail);
+  const mid = myers(x, y, limits.maxEdits);
+  if (!mid) return null;
+  return [...A.slice(0, head).map(text => ({ t: " ", text })), ...mid, ...A.slice(A.length - tail).map(text => ({ t: " ", text }))];
+}
+
+/** Myers' O((N+M)·D) shortest edit script, with D capped (the trace is kept for the walk back). */
+function myers(a, b, maxD) {
+  const n = a.length, m = b.length, max = n + m;
+  if (max === 0) return [];
+  const off = max + 1, v = new Int32Array(2 * max + 3), trace = [];
+  for (let d = 0; d <= Math.min(max, maxD); d++) {
+    trace.push(v.slice(off - d - 1, off + d + 2));
+    for (let k = -d; k <= d; k += 2) {
+      let i = k === -d || (k !== d && v[off + k - 1] < v[off + k + 1]) ? v[off + k + 1] : v[off + k - 1] + 1;
+      let j = i - k;
+      while (i < n && j < m && a[i] === b[j]) { i++; j++; }
+      v[off + k] = i;
+      if (i >= n && j >= m) return walkBack(a, b, trace, d);
+    }
+  }
+  return null;
+}
+
+function walkBack(a, b, trace, dEnd) {
+  const out = [];
+  let i = a.length, j = b.length;
+  for (let d = dEnd; d >= 0; d--) {
+    const vd = trace[d], at = (k) => vd[k + d + 1];   // trace[d] holds v[-d-1 .. d+1] before step d
+    const k = i - j;
+    if (d === 0) { while (i > 0 && j > 0) { out.push({ t: " ", text: a[--i] }); j--; } break; }
+    const down = k === -d || (k !== d && at(k - 1) < at(k + 1));
+    const pk = down ? k + 1 : k - 1, pi = at(pk), pj = pi - pk;
+    while (i > pi && j > pj) { out.push({ t: " ", text: a[--i] }); j--; }
+    if (down) out.push({ t: "+", text: b[--j] }); else out.push({ t: "-", text: a[--i] });
+  }
+  return out.reverse();
+}
+
+/**
+ * The edits as hunks with `context` lines around each change, as a unified diff shows them:
+ * [{ oldStart, oldLines, newStart, newLines, lines: [{ t, text }] }] (1-based starts). [] when nothing changed.
+ */
+export function diffHunks(ops, context = DIFF_LIMITS.context) {
+  // Each op's line numbers on either side (before it), then the changed spans widened by `context` and merged.
+  const oldAt = [], newAt = [];
+  let o = 1, n = 1;
+  for (const op of ops) { oldAt.push(o); newAt.push(n); if (op.t !== "+") o++; if (op.t !== "-") n++; }
+  const ranges = [];
+  ops.forEach((op, idx) => {
+    if (op.t === " ") return;
+    const from = Math.max(0, idx - context), to = Math.min(ops.length - 1, idx + context);
+    const last = ranges[ranges.length - 1];
+    if (last && from <= last.to + 1) last.to = Math.max(last.to, to); else ranges.push({ from, to });
+  });
+  return ranges.map(({ from, to }) => {
+    const part = ops.slice(from, to + 1);
+    return {
+      oldStart: oldAt[from], newStart: newAt[from],
+      oldLines: part.filter(x => x.t !== "+").length, newLines: part.filter(x => x.t !== "-").length,
+      lines: part,
+    };
+  });
+}

package/dist/ui/preview.js

@@ -249,6 +249,7 @@
     if (bytes > LIMITS.askBytes && !(opts && opts.anyway)) { ui.state("large", say("pvLarge", "This file is large ({0}). Preview anyway?", sizeLabel(bytes))); return false; }
     stopAll("another");
     starts++;
+    resetErrors(key);
     var doc = holder.ownerDocument;
     var iframe = mountPreview(doc);
     var card = {
@@ -285,6 +286,7 @@
     var card = live.get(key);
     if (!card) return false;
     live.delete(key);
+    if (card.picking) { card.picking = false; tellPick(key, null, false); }
     if (card.readyTimer) root.clearTimeout(card.readyTimer);
     if (card.watchdogTimer) root.clearTimeout(card.watchdogTimer);
     if (card.iframe.parentNode) card.iframe.parentNode.removeChild(card.iframe);
@@ -310,13 +312,93 @@
 
   // ── Messages from frames (design §4.2) ──────────────────
 
-  var KEYS = { ready: "boot,ch,type,v", resize: "ch,height,type,v", heartbeat: "ch,type,v" };
+  var KEYS = { ready: "boot,ch,type,v", resize: "ch,height,type,v", heartbeat: "ch,type,v", error: "ch,col,kind,line,message,type,v",
+    pick: "ch,h,selector,text,type,v,w,x,y", pickend: "ch,type,v" };
+
+  // ── #2911: the errors a running preview reported (design §4.1 amendment) ──
+  // Recorded only: a count, and the first few distinct ones as one line of plain text each. Nothing here passes them on;
+  // a person's click in the panel (preview-panel-actions.js) puts them in the composer, quoted, for them to edit.
+  var ERRORS = { maxCount: 999, keep: 5, messageMax: 200, rawMax: 1000, notifyMs: 200 };
+  var ERROR_KINDS = { error: 1, rejection: 1, console: 1, blocked: 1 };   // blocked: #2911 (7), a CSP-blocked script/style/font URL
+  var errorLog = new Map();               // frame key → { count, items: [{ kind, message, line, col }] }
+  var errorListeners = new Set();
+  var errorNotify = new Map();            // frame key → a pending notification's timer
+  function oneLine(v, max) {
+    // Format characters (\p{Cf}: bidi overrides and isolates, zero-widths, U+FEFF…) go first: a quoted line must read
+    // as its bytes say (#2914 review — the Trojan Source reordering, text hidden between zero-widths).
+    var t = String(v).replace(/\p{Cf}+/gu, "").replace(/[\s\u0000-\u001f\u007f-\u009f\u2028\u2029]+/g, " ").trim();
+    var chars = Array.from(t);
+    return chars.length > max ? chars.slice(0, max - 1).join("") + "\u2026" : t;
+  }
+  function tellErrors(key) {
+    if (errorNotify.has(key)) return;
+    errorNotify.set(key, root.setTimeout(function () {
+      errorNotify.delete(key);
+      errorListeners.forEach(function (fn) { try { fn(key); } catch (e) { /* one listener's error stops no other */ } });
+    }, ERRORS.notifyMs));
+  }
+  // A new run: its chip goes at once (not after the notification delay), and a notification still pending is dropped.
+  function resetErrors(key) {
+    if (!errorLog.delete(key)) return;
+    if (errorNotify.has(key)) { root.clearTimeout(errorNotify.get(key)); errorNotify.delete(key); }
+    errorListeners.forEach(function (fn) { try { fn(key); } catch (e) { /* one listener's error stops no other */ } });
+  }
+  function recordError(card, d) {
+    if (!Object.prototype.hasOwnProperty.call(ERROR_KINDS, d.kind) || typeof d.message !== "string" || d.message.length > ERRORS.rawMax) return;
+    var pos = function (n) { return typeof n === "number" && isFinite(n) && Math.floor(n) === n && n >= 0 && n <= 1e7; };
+    if (!pos(d.line) || !pos(d.col)) return;
+    var log = errorLog.get(card.key);
+    if (!log) { log = { count: 0, items: [] }; errorLog.set(card.key, log); }
+    if (log.count >= ERRORS.maxCount) return;
+    log.count++;
+    var item = { kind: d.kind, message: oneLine(d.message, ERRORS.messageMax) || "(no message)", line: d.line, col: d.col };
+    if (log.items.length < ERRORS.keep && !log.items.some(function (x) { return x.kind === item.kind && x.message === item.message && x.line === item.line && x.col === item.col; })) log.items.push(item);
+    tellErrors(card.key);
+  }
+  /** What the preview under `key` reported since it started: { count, items } (copies), or null when nothing. */
+  function errors(key) {
+    var log = errorLog.get(key);
+    return log ? { count: log.count, items: log.items.map(function (x) { return { kind: x.kind, message: x.message, line: x.line, col: x.col }; }) } : null;
+  }
+  // ── #2911: pick mode — the person points at an element of a running preview (design §4.1 amendment) ──
+  // Only on a person's request (pick(key, true)), and only one answer per request: a `pick` from a frame that was not
+  // asked is dropped. The answer is the page's text — a selector it built and the element's words — kept one line each
+  // and handed to the listeners; the panel puts it in the composer for the person to edit. Nothing here sends it.
+  var PICK = { selectorMax: 300, textMax: 200 };
+  var pickListeners = new Set();
+  function tellPick(key, result, on) { pickListeners.forEach(function (fn) { try { fn(key, result, on); } catch (e) { /* one listener's error stops no other */ } }); }
+  /** Turn pick mode on or off for the running preview `key`; false when it is not running (rendered). */
+  function pick(key, on) {
+    var card = live.get(key);
+    if (!card || !card.rendered) return false;
+    card.picking = !!on;
+    try { card.iframe.contentWindow.postMessage({ v: 1, type: "pick", ch: card.ch, on: !!on }, "*"); } catch (e) { /* the frame went: its stop says so */ }
+    tellPick(key, null, card.picking);
+    return true;
+  }
+  function picking(key) { var c = live.get(key); return !!(c && c.picking); }
+  /** fn(key, result | null, on): a picked element ({ selector, text, x, y, w, h }), or the mode changing; returns the unsubscribe. */
+  function onPick(fn) { pickListeners.add(fn); return function () { pickListeners.delete(fn); }; }
+  function recordPick(card, d) {
+    if (!card.picking) return;
+    if (d.type === "pickend") { card.picking = false; tellPick(card.key, null, false); return; }
+    var box = function (n) { return typeof n === "number" && isFinite(n) && Math.floor(n) === n && n >= 0 && n < 1e6; };
+    if (typeof d.selector !== "string" || d.selector.length > 1000 || typeof d.text !== "string" || d.text.length > 1000) return;
+    if (!box(d.x) || !box(d.y) || !box(d.w) || !box(d.h)) return;
+    card.picking = false;
+    tellPick(card.key, { selector: oneLine(d.selector, PICK.selectorMax), text: oneLine(d.text, PICK.textMax), x: d.x, y: d.y, w: d.w, h: d.h }, false);
+  }
+
+  /** fn(key) after a preview's errors changed (at most every 200 ms per preview); returns the unsubscribe. */
+  function onErrors(fn) { errorListeners.add(fn); return function () { errorListeners.delete(fn); }; }
 
   /**
    * The only window message listener. A message counts only from one of OUR frames (event.source is that frame's
-   * window, and its origin is the opaque "null"), with one of three exact shapes; each has one effect, on that frame
+   * window, and its origin is the opaque "null"), with one of six exact shapes; each has one effect, on that frame
    * only: ready → send the HTML once (boot checked, opt-in checked again), resize → its height, heartbeat → its
-   * watchdog. It has no reference to the chat, the composer, the fleet's API, navigation or storage.
+   * watchdog, error (#2911) → its error log (recorded, never passed on), pick / pickend (#2911) → the answer to the
+   * person's own pick request, handed to the pick listeners (dropped when none was asked). It has no reference to the chat, the
+   * composer, the fleet's API, navigation or storage.
    */
   function onMessage(event) {
     var card = null;
@@ -344,6 +426,8 @@
       armWatchdog(card);
       return;
     }
+    if (d.type === "error") { recordError(card, d); return; }
+    if (d.type === "pick" || d.type === "pickend") { recordPick(card, d); return; }
     if (typeof d.height !== "number" || !isFinite(d.height) || Math.floor(d.height) !== d.height) return;
     requestHeight(card, d.height);
   }
@@ -377,6 +461,7 @@
 
   return {
     init: init, availability: availability, optedIn: optedIn, setOptIn: setOptIn, never: never, setNever: setNever, onChange: onChange, listeners: listeners, onStorage: onStorage,
+    errors: errors, onErrors: onErrors, ERRORS: ERRORS, pick: pick, picking: picking, onPick: onPick, PICK: PICK,
     start: start, startCount: startCount, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
     /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */

package/dist/ui/settings-registry.js

@@ -65,6 +65,7 @@ const ROWS = [
   // Fleet · Web dashboard
   ["dash.log-tab", "web-dashboard", "#webLogTab", "settings.webLogTab", "web.log_tab", ["log tab", "steps", "log"], ["Log 分頁", "紀錄", "步驟"]],
   ["dash.usage-public", "web-dashboard", "#webUsagePublic", "settings.webUsagePublic", "web.usage_report_on_public_link", ["usage", "public link", "cost", "tokens"], ["用量", "公開連結", "費用"]],
+  ["dash.preview-cdn", "web-dashboard", "#webPreviewCdn", "settings.webPreviewCdn", "web.preview_cdn", ["cdn", "libraries", "html preview", "chart", "jsdelivr", "cdnjs"], ["CDN", "函式庫", "HTML 預覽", "圖表"]],
   ["dash.office-levels", "web-dashboard", "#webOfficeLevels", "settings.webOfficeLevels", "web.office_levels", ["office", "level", "badge", "profile card"], ["辦公室", "等級", "徽章", "名片"]],
   ["dash.app-icon", "web-dashboard", ".s-app-icon", "settings.appIconTitle", null, ["app icon", "favicon", "home screen", "icon"], ["App 圖示", "圖示", "主畫面"]],
   ["dash.card-limits", "web-dashboard", ".s-card-limits", "settings.cardLimitsTitle", "web.appearance", ["upload limits", "portrait", "banner", "card limits"], ["上傳限制", "身分卡上傳限制"]],

package/dist/ui/settings-strings.js

@@ -40,6 +40,8 @@ register("settings", {
     webEcho: "Web echo",
     webEchoHint: "Copies web messages to the bound Telegram or Discord topic. ClassicBot rooms follow it unless a room sets its own.",
     webOfficeLevels: "Office levels", webOfficeLevelsHint: "Each agent's level from its lifetime work, on its name tag in the Office and on its profile card. Off removes the badges and the card's level rows. The token counts behind a level follow the usage report's rules. Applies at once.",
+    webPreviewCdn: "HTML previews may load libraries from cdnjs / jsDelivr",
+    webPreviewCdnHint: "The page's scripts may load libraries from cdnjs (/ajax/libs/) and jsDelivr (/npm/); those requests leave this machine, so the CDN sees them, and a page could use them to send data out. Scripts, styles and fonts only — a preview still cannot fetch or post anything. Off by default; applies to the next preview started, on the public link too.",
     webUsagePublic: "Usage report over the public link", webUsagePublicHint: "Fleet → Usage (up to 400 days of each agent's tokens, requests, messages and API-equivalent amounts) is offered over the temporary public link too. Off by default; guests never see it. Applies at once.",
     webLogTab: "Log tab: each agent's steps", webLogTabHint: "Shows each instance's prompts, replies, tool calls and results, and fleet events in its Log tab, read from its own transcript only while the tab is open. Secret values are masked. Also over the public link. Turning it on waits for a fleet admin's confirmation.",
     general: "General Settings",
@@ -721,6 +723,8 @@ register("settings", {
     webEcho: "Web 同步",
     webEchoHint: "將網頁訊息複製到綁定的 Telegram 或 Discord 主題。ClassicBot 聊天室也照這個設定，除非該聊天室另外設定。",
     webOfficeLevels: "辦公室等級", webOfficeLevelsHint: "每個 agent 依終身工作量得到的等級，顯示在辦公室的名牌與名片上。關閉會移除徽章與名片上的等級列。等級背後的 token 數字依用量報告的規則顯示。變更立即生效。",
+    webPreviewCdn: "HTML 預覽可從 cdnjs / jsDelivr 載入函式庫",
+    webPreviewCdnHint: "頁面的指令碼可以從 cdnjs（/ajax/libs/）和 jsDelivr（/npm/）載入函式庫；這些請求會離開這台電腦，CDN 會看到它們，頁面也可能藉此把資料傳出去。只限指令碼、樣式與字型——預覽仍然無法擷取或送出任何資料。預設關閉；之後開始的預覽才會套用，公開連結也一樣。",
     webUsagePublic: "透過公開連結提供用量報告", webUsagePublicHint: "Fleet → 用量（最多 400 天、每個 agent 的 token、請求、訊息與依牌價換算的 API 等值）也會透過臨時公開連結提供。預設關閉；訪客一律看不到。變更立即生效。",
     webLogTab: "紀錄分頁：每個 agent 的步驟", webLogTabHint: "在每個 instance 的「紀錄」分頁顯示提示、回覆、工具呼叫與結果，以及 fleet 事件；只在分頁開著時從它自己的對話紀錄讀取。機密值會遮蔽。公開連結也看得到。開啟需 fleet admin 確認。",
     general: "一般設定",

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

@@ -105,7 +105,7 @@ register("app", {
     restartRefused: "Restart refused: {0}",
     pendingSent: "Sent for confirmation — a fleet admin confirms it in chat.",
     pendingSelfSent: "Confirmed by your account (this browser is web-verified) — applying.",
-    needsNav: "Needs you", needsTab: "Needs you", needsCount: "{0} waiting",
+    needsNav: "Needs you", needsTab: "Needs you", needsCount: "{0} waiting", noticesNav: "Notices", noticesCount: "{0} unread",
     // #2293: global search — chats, cross-instance messages and tasks (not the sidebar's filter of agents).
     search: "Search", searchTitle: "Search chats, messages between agents and tasks ({0})",
     confirmTitle: "Please confirm", confirmOk: "Continue", cancel: "Cancel",
@@ -152,7 +152,7 @@ register("app", {
     restartRefused: "重新啟動被拒絕：{0}",
     pendingSent: "已送出確認——由 fleet 管理員在聊天中確認。",
     pendingSelfSent: "已由你的帳號確認（這個瀏覽器已通過網頁驗證）——套用中。",
-    needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理",
+    needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理", noticesNav: "通知", noticesCount: "{0} 則未讀",
     search: "搜尋", searchTitle: "搜尋聊天、agent 之間的訊息與任務（{0}）",
     confirmTitle: "請確認", confirmOk: "繼續", cancel: "取消",
     sidePanelLeave: "不儲存就離開「{0}」？你在那裡的修改會遺失。", sidePanelDiscard: "捨棄修改",

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

@@ -30,6 +30,7 @@ export function parseRoute(pathname) {
   if (pathname === "/ui") return { panel: "chat", instance: null };
   if (pathname === "/ui/fleet") return { panel: "fleet", tab: "tasks" };
   if (pathname === "/ui/needs") return { panel: "needs" };
+  if (pathname === NOTICES_PATH) return { panel: "notices" };              // #2910 D2: a web-only fleet's Notices
   // #1523 N2: one instance's Details (`agent` is no Fleet tab; a tab is one segment).
   let m = /^\/ui\/fleet\/agent\/([^/]+)$/.exec(pathname);
   if (m) return named("details", m[1]);
@@ -82,6 +83,7 @@ export function rememberFleetTab(tab) {
   try { localStorage.setItem(LAST_FLEET_TAB_KEY, tab); } catch { /* this page only */ }
 }
 export const NEEDS_PATH = "/ui/needs";
+export const NOTICES_PATH = "/ui/notices";
 /** A section's address; an old name gives its new one (and the place in it: `chat#classicbot`). */
 export function settingsPath(name) {
   const section = (name && legacySection(name)) || name;
@@ -109,6 +111,7 @@ export function routePath(route) {
   if (route.panel === "fleet") return fleetPath(route.tab);
   if (route.panel === "settings") return settingsPath(route.section);
   if (route.panel === "needs") return NEEDS_PATH;
+  if (route.panel === "notices") return NOTICES_PATH;
   if (route.panel === "view") return viewPath(route.instance);
   if (route.panel === "details") return detailsPath(route.instance);
   if (route.panel === "log") return logPath(route.instance);
@@ -140,6 +143,7 @@ export function textLinkSegments(text, links) {
 export function routeKey(route) {
   if (!route) return "none";
   if (route.panel === "needs") return "needs:";
+  if (route.panel === "notices") return "notices:";
   return `${route.panel}:${route.panel === "fleet" ? route.tab : route.panel === "settings" ? route.section : route.instance ?? ""}`;
 }
 

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

@@ -10,7 +10,7 @@ import { t, lang, setLang, onLang } from "./app-i18n.js";
 import { appStore, createStore, guestBadge, guestPage, guestTrusted, useStore } from "./app-store.js";
 import { navStore } from "./app-nav.js";
 import { toast } from "./ui-toast.js";
-import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, fleetEntryPath } from "./app-route.js";
+import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, NOTICES_PATH, fleetEntryPath } from "./app-route.js";
 import { SessionMenu } from "./app-session.js";
 import { onPrefsChanged, savePref } from "./app-prefs.js";
 import { applyPageTheme, pageNow, resolvedMode, themesStore } from "./app-themes.js";
@@ -328,8 +328,8 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
   const canCreate = useCanCreate();
   const on = (panel) => !!route && route.panel === panel;
   // A count badge is hidden at 0; its number is also in the link's accessible name.
-  const navLink = (panel, href, icon, label, count = 0) => html`<a class=${`side-row${on(panel) ? " active" : ""}`} href=${href}
-    aria-current=${on(panel) ? "page" : undefined} aria-label=${count ? `${label} (${t("app.needsCount", count)})` : undefined} onClick=${closeDrawer}>
+  const navLink = (panel, href, icon, label, count = 0, countText = "app.needsCount") => html`<a class=${`side-row${on(panel) ? " active" : ""}`} href=${href}
+    aria-current=${on(panel) ? "page" : undefined} aria-label=${count ? `${label} (${t(countText, count)})` : undefined} onClick=${closeDrawer}>
     <${Icon} name=${icon} /><span class="grow">${label}</span>${count ? html`<span class="nav-count" aria-hidden="true">${count}</span>` : null}</a>`;
   const needsCount = Array.isArray(app.needs) ? app.needs.length : 0;
   // View-only (an anonymous reader, #1408 §3): View and a way to sign in — nothing that needs a session is rendered.
@@ -379,6 +379,8 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
     <nav data-trust="navigation" class="side-nav" aria-label=${t("app.menu")}>
       ${overview}
       ${navLink("needs", NEEDS_PATH, "inbox", t("app.needsNav"), needsCount)}
+      ${/* #2910 D2: a web-only fleet (no chat connection) has Notices — what General would have said. */
+        app.connections === 0 && app.notices && app.notices.enabled ? navLink("notices", NOTICES_PATH, "bell", t("app.noticesNav"), app.notices.unread | 0, "app.noticesCount") : null}
       ${searchOffered(canCreate) ? searchRow() : null}
       ${canCreate && onNewInstance ? html`<button type="button" class="side-row side-new" onClick=${onNewInstance}><${Icon} name="plus" /><span class="grow">${t("app.newAgent")}</span></button>` : null}
     </nav>

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

@@ -63,7 +63,77 @@ export function applyStatus(d) {
     // #1685: host memory pressure slowing or holding new agents ("elevated" | "critical"), else null.
     hostMemory: d.host_memory === "elevated" || d.host_memory === "critical" ? d.host_memory : null,
     // #2015: while it lasts, the largest processes in the fleet and whose they are (at most 3; anything else dropped).
-    hostMemoryTop: hostMemoryTop(d.host_memory_top) });
+    hostMemoryTop: hostMemoryTop(d.host_memory_top),
+    // #2910 D2 (#2925 review): the newest Notice on a web-only fleet — a polling page reads the list again when it moves.
+    noticesNewest: Number.isSafeInteger(d.notices_newest) ? d.notices_newest : null });
+}
+
+/**
+ * #2910 D2 (#2925 review): a web-only fleet's Notices as the page keeps them. A list read (GET /ui/notices/list), a live
+ * one (SSE `notice`) and a read mark (POST /ui/notices/seen) can answer in any order, so each is merged, never
+ * replaced: the newest NOTICES_KEPT by id (a list read never drops one that arrived live after it was taken), and the
+ * read mark only moves forward. Unread is counted here from the two.
+ */
+export const NOTICES_KEPT = 500;
+function noticesState(enabled, byId, seen) {
+  const items = [...byId.values()].sort((a, b) => b.id - a.id).slice(0, NOTICES_KEPT);
+  return { enabled, items, seen, unread: items.filter((n) => n.id > seen).length };
+}
+const validNotice = (n) => !!n && Number.isSafeInteger(n.id) && n.id > 0 && typeof n.text === "string";
+export function mergeNoticeList(cur, d) {
+  const byId = new Map();
+  for (const n of Array.isArray(d && d.items) ? d.items : []) if (validNotice(n)) byId.set(n.id, n);
+  const listNewest = Math.max(0, ...byId.keys());
+  for (const n of cur && Array.isArray(cur.items) ? cur.items : []) if (n.id > listNewest && !byId.has(n.id)) byId.set(n.id, n);
+  return noticesState(!!(d && d.enabled === true), byId, Math.max(cur ? cur.seen | 0 : 0, d ? d.seen | 0 : 0));
+}
+export function addNotice(cur, n) {
+  if (!cur || !cur.enabled || !validNotice(n) || cur.items.some((x) => x.id === n.id)) return cur;
+  return noticesState(true, new Map([...cur.items, n].map((x) => [x.id, x])), cur.seen | 0);
+}
+/** The newest Notice the status frame names that the page does not have yet (a polling page hears no `notice`). 0: none. */
+export function noticesCatchUp(s) {
+  const have = s && s.notices && s.notices.items.length ? s.notices.items[0].id : 0;
+  return s && Number.isSafeInteger(s.noticesNewest) && s.noticesNewest > have ? s.noticesNewest : 0;
+}
+/** After a read that left the page still behind: try again this soon (a failed read waits longer). */
+export const NOTICES_RETRY_MS = { stale: 1000, failed: 5000 };
+/**
+ * #2910 D2 (#2925 review r2): the page's reads of GET /ui/notices/list. One at a time (a second ask joins the read in
+ * flight); once a read settles, the page asks again if it is still behind what the status frame names (an older read
+ * that was already in flight, or one that failed) — after NOTICES_RETRY_MS, and again until it catches up. Never a
+ * watermark set before a read succeeded.
+ */
+export function createNoticesSync({ store, fetchList, setTimer = (fn, ms) => setTimeout(fn, ms), now = () => Date.now() }) {
+  let inFlight = null, retryAt = 0, timer = null, on = false;
+  const behind = () => on && noticesCatchUp(store.get()) > 0;
+  const recheck = () => { if (!inFlight && behind() && now() >= retryAt) read(); };
+  const later = (ms) => {
+    retryAt = now() + ms;
+    if (timer === null) timer = setTimer(() => { timer = null; recheck(); }, ms);
+  };
+  function read() {
+    return (inFlight ??= Promise.resolve().then(fetchList).then((d) => {
+      if (!d || !Array.isArray(d.items)) throw new Error("no list");
+      store.set({ notices: mergeNoticeList(store.get().notices, d) });
+      return true;
+    }).catch(() => false).then((ok) => {
+      inFlight = null;
+      if (behind()) later(ok ? NOTICES_RETRY_MS.stale : NOTICES_RETRY_MS.failed);
+      else retryAt = 0;
+    }));
+  }
+  return {
+    /** The fleet is web-only: start (the first read), and follow the status frame from now on. */
+    start() { if (!on) { on = true; read(); } },
+    read,
+    recheck,
+    started: () => on,
+  };
+}
+export function applyNoticesSeen(cur, seen) {
+  if (!cur || !Number.isSafeInteger(seen) || seen <= (cur.seen | 0)) return cur;
+  return noticesState(cur.enabled, new Map(cur.items.map((x) => [x.id, x])), seen);
 }
 
 /** #2015: the status frame's host_memory_top, as the dashboard keeps it: well-formed entries only, at most 3. */

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

@@ -37,7 +37,7 @@
 // offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
 // office_skins — a skin pack was uploaded or deleted ({ rev }; SSE only: the Office view reads /ui/office-skins again).
 // office_acts — the agents' live acts in the Office view changed ({ acts }, #2578; a poll page reads /ui/office-acts).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices", "office_skins", "office_acts", "office_pack_changes"];
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices", "office_skins", "office_acts", "office_pack_changes", "notice"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed

package/dist/ui/shared/app.css

@@ -623,9 +623,21 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    Its class is `status-line`, never `status`: that is the header's inline-flex badge class, and on a message it turned
    the meta, body and tools into one flex row. */
 .msg.status-line { align-self: stretch; font-size: var(--fs-sm); color: var(--text-3); }
-.msg.status-line .st-text { white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--s-3); }
-.msg.status-line.folded .st-text { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+/* Each line is a row (.st-ln); the line breaks between rows are text for copying, not extra rows. */
+.msg.status-line .st-text { border-left: 2px solid var(--border); padding-left: var(--s-3); }
+.msg.status-line .st-ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg.status-line .st-ln:empty::after { content: " "; }
+/* Folded (the user, hmsg-d6ac6dfb): two lines — the header and the first line — each one row with an ellipsis; the
+   button sits at the end of line 2. The text opens it too. */
+.msg.status-line.folded .body { display: flex; align-items: flex-end; gap: var(--s-2); }
+.msg.status-line.folded .st-text { flex: 1 1 auto; min-width: 0; }
+.msg.status-line.folded.overflows .st-text { cursor: pointer; }
+/* Its control only while something is hidden (two short rows that fit: plain, no control). */
+.msg.status-line.folded:not(.overflows) .st-more { display: none; }
+.msg.status-line.folded .st-ln { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
+.msg.status-line.folded .st-ln:nth-child(n+3) { display: none; }
 .msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
+.msg.status-line.folded .st-more { flex: none; padding: 0 var(--s-2) 0 0; white-space: nowrap; }
 .msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
 /* #2147: bounded stock toolbar paint, including fixed descendants. Padding preserves focus outlines. */
@@ -807,6 +819,39 @@ img.amb-p { object-fit: contain; }
 .preview-frame.fill { flex: 1; height: 100%; min-height: 0; }
 .pv-code { flex: 1; min-height: 0; margin: 0; overflow: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
   background: var(--surface); border-radius: var(--r-sm); padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
+/* preview panel chrome (M-2216) — #2911: the version step and the Changes view. */
+.pv-ver { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: var(--text-2); }
+.pv-ver-at { min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; }
+.pv-panel > .pv-ver-note { margin: 0 var(--s-3) var(--s-2); }
+.pv-diff-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.pv-diff-head { font-size: var(--fs-xs); color: var(--text-2); }
+.pv-diff { white-space: pre; overflow-wrap: normal; }
+.pv-diff > code > span { display: block; }
+.pv-diff .d-add { background: var(--ok-bg); color: var(--ok); }
+.pv-diff .d-del { background: var(--danger-bg); color: var(--danger); }
+.pv-diff .d-hunk { color: var(--text-3); }
+.pv-diff-note { margin: 0; }
+/* #2911 (2): the page at a phone's or a tablet's width, centred; a panel narrower than that scrolls sideways. */
+.pv-panel-body.w-phone, .pv-panel-body.w-tablet { overflow-x: auto; }
+/* The frame keeps its 2px warning border (.preview-frame): the holder is that much wider, so the page itself lays out
+   at exactly 390 / 768 CSS px (its innerWidth, its min-width media queries) — #2918 review. */
+.pv-panel-body.w-phone .pv-holder { flex: 1 0 auto; width: calc(390px + 2 * 2px); max-width: none; margin-inline: auto; }
+.pv-panel-body.w-tablet .pv-holder { flex: 1 0 auto; width: calc(768px + 2 * 2px); max-width: none; margin-inline: auto; }
+.pv-width { font: inherit; font-size: var(--fs-xs); padding: 2px var(--s-1); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
+/* Full screen: the API's (:fullscreen), or the panel over the whole window where the page may not use it. */
+/* Three classes, so it wins over the desktop split's ".chat-split > .pv-panel { position: relative; z-index: 1 }" — #2918 review. */
+.pv-panel.pv-fs.pv-fs-native, .pv-panel.pv-fs.pv-fs-immersive { width: auto; min-width: 0; max-width: none; }
+.chat-split > .pv-panel.pv-fs-immersive, .pv-panel.pv-fs.pv-fs-immersive { position: fixed; inset: 0; z-index: 60; }
+/* #2911 (6): the thread's pages. */
+.pv-pages { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--s-1); }
+.pv-page { width: 100%; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--border);
+  border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
+.pv-page.on { border-color: var(--accent); }
+.pv-page-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pv-page-meta { flex: none; color: var(--text-3); font-size: var(--fs-xs); }
+.pv-pages-toggle { flex: none; }
+/* A narrow panel: two rows — versions and views; then the width, the run controls, the page's actions and Download. */
+@container (max-width: 560px) { .pv-panel-bar .grow { flex-basis: 100%; height: 0; } }
 .msg.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); transition: outline-color var(--t-med); }
 /* #2272: a message's reply action (top right, on hover or focus), the quote a reply shows, the message menu, a swipe. */
 .msg[data-key] { position: relative; }
@@ -837,6 +882,10 @@ img.amb-p { object-fit: contain; }
 @container (max-width: 560px) {
   .pv-panel-bar :not(.pv-panel-run) > .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 }
+/* preview feedback (M-2217, #2911): the errors chip — its count stays when a narrow bar hides the word. */
+.pv-fb-errors { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
+.pv-fb-pick.on { color: var(--warn); border-color: var(--warn); }
+.pv-fb-errors .pv-fb-n { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
 /* #1266: an agent reply's buttons — choices under the text; one answers for everyone. */
 .rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
 .rb-btn { max-width: 100%; white-space: normal; text-align: left; }
@@ -1595,6 +1644,11 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .n-detail { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
 .n-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
 .n-notify { display: flex; flex-direction: column; gap: var(--s-1); }
+/* #2910 D2: Notices (a web-only fleet's General) — the Needs you rows; a new one has an accent edge and a "New" tag. */
+.n-item.notice.unread { box-shadow: inset 3px 0 0 var(--accent); }
+.n-item.notice:not(.bad) .n-icon { color: var(--text-2); }
+.notice-new { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-semibold); }
+.notice-sub { margin: 0 var(--s-1) var(--s-3); }
 .confirm-text { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--text-2); }
 
 /* ── Org chart (#1389): General → teams → instances. Connectors are borders and pseudo-elements; no inline style.
@@ -2242,7 +2296,7 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 @media (min-width: 900px) { .chat-split > .pv-divider, .chat-split > .pv-panel { position: relative; z-index: 1; } }
 /* #1629: full-app bounded stock surfaces. Panel roots stay neutral; effects never raise the whole app. */
 .p-fleet > .seg, .p-settings > .seg,
-.p-fleet > .panel-body, .p-needs > .panel-body, .p-settings > .panel-body,
+.p-fleet > .panel-body, .p-needs > .panel-body, .p-notices > .panel-body, .p-settings > .panel-body,
 .p-log > .panel-body, .p-details > .panel-body, .p-view > .panel-body,
 .p-log > .log-bar, .p-view > .v-term, .p-view > .v-id, .p-view > .v-watching { position: relative; z-index: 1; }
 /* Keep the existing Apply bar's sticky behavior, in its own bounded stock band. */

package/dist/ui/shared/app.js

@@ -13,7 +13,7 @@ import { installSwipe } from "./app-swipe.js";
 import { installTextUndo } from "./text-undo.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
-import { appStore, applyStatus, applyActivity, guestPage, guestTrusted } from "./app-store.js";
+import { appStore, applyStatus, applyActivity, guestPage, guestTrusted, addNotice, createNoticesSync } from "./app-store.js";
 import { chatPath } from "./app-route.js";
 import { startNeedsNotifier } from "./app-needs.js";
 import { toast } from "./ui-toast.js";
@@ -91,6 +91,27 @@ if (mode === "full") {
     const loadApply = retryable((a) => import(retryUrl("/ui/js/settings-apply.js", a)));
     appStore.set({ restartRunner: (jobId) => loadApply().then((m) => m.restartPendingChanges(jobId)) });
     panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
+    // #2910 D2: a web-only fleet's Notices (/ui/notices): read once the status says there is no chat connection (and
+    // again after a reconnect: a poll page hears no `notice`), then each new one from the stream.
+    const loadNotices = retryable((a) => import(retryUrl("/ui/js/panel-notices.js", a)));
+    panels.set("notices", { load: () => loadNotices().then((m) => m.NoticesPanel) });
+    // A list read and a live notice can cross: each is merged into what the page has (app-store.js mergeNoticeList); a
+    // read that leaves the page behind what the status frame names is asked again (createNoticesSync).
+    const notices = createNoticesSync({ store: appStore,
+      fetchList: () => fetch("/ui/notices/list", { credentials: "same-origin", cache: "no-store" }).then((r) => (r.ok ? r.json() : null)) });
+    const readNotices = () => notices.read();
+    appStore.set({ readNotices });
+    appStore.subscribe((s) => {
+      if (s.connections === 0) notices.start();
+      notices.recheck();                       // a polling page hears no `notice`: the status frame's newest id is its catch-up
+    });
+    stream.on("connection", (c) => { if ((c === "live" || c === "polling") && notices.started()) readNotices(); });
+    stream.on("notice", (d) => {
+      const cur = appStore.get().notices;
+      if (!cur || !cur.enabled) { readNotices(); return; }
+      const next = addNotice(cur, d && d.notice);
+      if (next !== cur) appStore.set({ notices: next });
+    });
     // #1523 N2: one instance's Details (/ui/fleet/agent/<name>).
     panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });
     // #1218: one instance's Log (/ui/log/<name>).