@songsid/agend 2.3.3 → 2.3.4-beta.1

package/dist/ui/preview-panel.js

@@ -17,6 +17,11 @@ import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
 import { chatTime, onDayChange } from "./chat-time.js";
+import { PanelActions } from "./preview-panel-actions.js";
+import { htmlTitle, versionsOf, lineDiff, diffHunks, DIFF_LIMITS } from "./preview-versions.js";
+import { pagesOf, pageIdOf } from "./preview-pages.js";
+
+export { htmlTitle };
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -60,12 +65,6 @@ export function closePanel() {
 /** The card key the panel shows, or null. */
 export const shownKey = () => (state.open ? state.open.key : null);
 
-/** The text of a block's <title>, or "" — what says two blocks are versions of one thing. */
-export function htmlTitle(code) {
-  const m = /<title[^>]*>([\s\S]*?)<\/title>/i.exec(String(code || ""));
-  return m ? m[1].replace(/\s+/g, " ").trim() : "";
-}
-
 /**
  * A newer version of the shown block: the last complete ```html block in an agent reply after the one it came from.
  * When the shown block has a <title>, only a block with the same title counts (another page is not a new version);
@@ -118,6 +117,30 @@ export function clampWidth(w, total) {
   return Math.round(Math.min(max, Math.max(MIN_PANEL, w)));
 }
 
+// ── #2911 (7): a CDN library the preview blocked (web.preview_cdn off) — the panel says where to allow it ──
+
+/** web-preview.ts PREVIEW_CDN_SOURCES (a test keeps the two equal): what web.preview_cdn allows. */
+export const CDN_PREFIXES = ["https://cdnjs.cloudflare.com/ajax/libs/", "https://cdn.jsdelivr.net/npm/"];
+/** The CDN host of the first blocked library in a frame's error log that the setting would allow, or null. */
+export function blockedCdnHost(log) {
+  for (const x of (log && log.items) || []) {
+    if (x.kind !== "blocked") continue;
+    const p = CDN_PREFIXES.find(pre => String(x.message).startsWith(pre));
+    if (p) return new URL(p).host;
+  }
+  return null;
+}
+
+// ── #2911 (2): the page's width in the panel (a phone, a tablet, or the panel's own), this device's choice ──
+
+const DEVICE_KEY = "agend_preview_panel_device";
+/** The widths a preview can be shown at: CSS px, or null for the panel's full width. */
+export const DEVICE_WIDTHS = { full: null, tablet: 768, phone: 390 };
+export function storedDevice() { try { const v = localStorage.getItem(DEVICE_KEY); return Object.hasOwn(DEVICE_WIDTHS, v) ? v : "full"; } catch { return "full"; } }
+function storeDevice(v) { try { localStorage.setItem(DEVICE_KEY, v); } catch { /* this page only */ } }
+/** The element the page has fullscreen (standard, else webkit's), or null. */
+const fullscreenEl = () => { const d = globalThis.document; return (d && (d.fullscreenElement || d.webkitFullscreenElement)) || null; };
+
 /** #1770: as the thread shows it — the fleet's zone, with the day when it is not today. */
 const timeOf = (ts) => (ts ? chatTime(ts, { yesterday: (hm) => t("chat.yesterdayAt", hm) }) : "");
 
@@ -133,10 +156,53 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const [run, setRun] = useState({ state: "idle", reason: "" });
   const [newer, setNewer] = useState(null);
   const [newerNote, setNewerNote] = useState("");
+  const [vers, setVers] = useState({ list: [], index: -1 });   // #2911 (1): the shown block's versions in the thread
+  const [pages, setPages] = useState([]);                      // #2911 (6): every page in the thread, newest first
+  const [cdnHost, setCdnHost] = useState(null);                // #2911 (7): a CDN library this page's run was refused
+  const [listing, setListing] = useState(false);               // the page list is on screen (instead of the page)
+  const [changes, setChanges] = useState(null);                // the Changes view: { state, from, hunks, shown, total }
+  const keepView = useRef(false);                               // a version step keeps Code / Changes on screen
+  const loaded = useRef(new Map());                             // an attached version's HTML, read once (key → code)
   const reading = useRef(null);   // the newer version whose file is being read (one at a time)
   const pending = useRef(0);      // #1704: the card's click, waiting for this device's Allow (the st.run it came with)
   const ownAllow = useRef(0);     // while this panel's own Allow commits its choice: the click it answers (not cancelled by it)
   const holder = useRef(null), divider = useRef(null), panel = useRef(null);
+  const [device, setDeviceState] = useState(storedDevice);   // #2911 (2): the page's width
+  const setDevice = (v) => { setDeviceState(v); storeDevice(v); };
+  // Full screen: the Fullscreen API on the panel (the dashboard's document — the frame's own policy still denies it),
+  // or, where the page may not, the panel over the whole window ("immersive"). Esc leaves it before it closes the panel.
+  const [fs, setFs] = useState("");
+  const fsTarget = useRef(null);   // the element asked to go full screen (the panel may be gone when it is left)
+  // #2918 review: each request has a generation; leaving (Esc, the button, a close, the chat unmounting) moves it, so a
+  // request still pending answers nobody — a late refusal does not make a later open immersive, and a late success
+  // only takes back the full screen it made.
+  const fsGen = useRef(0);
+  const exitOwn = (el) => {
+    const d = globalThis.document;
+    if (!d || !el || fullscreenEl() !== el) return;
+    const ex = d.exitFullscreen || d.webkitExitFullscreen;
+    try { const r = typeof ex === "function" ? ex.call(d) : null; if (r && typeof r.catch === "function") r.catch(() => {}); } catch { /* already out */ }
+  };
+  const enterFs = () => {
+    const el = panel.current, d = globalThis.document; if (!el || fs) return;
+    const gen = ++fsGen.current;
+    const req = el.requestFullscreen || el.webkitRequestFullscreen;
+    const enabled = d ? (d.fullscreenEnabled ?? d.webkitFullscreenEnabled) : false;
+    if (typeof req !== "function" || enabled === false) { setFs("immersive"); return; }
+    let r;
+    fsTarget.current = el;
+    try { r = req.call(el); } catch { fsTarget.current = null; setFs("immersive"); return; }
+    if (r && typeof r.then === "function") {
+      r.then(() => { if (fsGen.current === gen) { if (fullscreenEl() === el) setFs("native"); } else exitOwn(el); },
+        () => { if (fsGen.current === gen) { fsTarget.current = null; setFs("immersive"); } });
+    } else setFs("native");
+  };
+  function leaveFs() {
+    fsGen.current++;
+    const el = fsTarget.current; fsTarget.current = null;
+    exitOwn(el);
+    setFs("");
+  }
   const open = st.open?.instance === name ? st.open : null;
 
   useEffect(() => panelStore.subscribe(setSt), []);
@@ -147,6 +213,15 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   useEffect(() => (P() ? P().onChange(() => { if (pending.current && ownAllow.current !== pending.current) pending.current = 0; choice(n => n + 1); }) : undefined), []);
   // Leaving the chat (another instance, another panel) closes the panel: its frame stops with the thread's.
   useEffect(() => () => closePanel(), []);
+  // Leaving the chat: a pending request answers nobody, and our own full screen is taken back.
+  useEffect(() => () => { fsGen.current++; exitOwn(fsTarget.current); fsTarget.current = null; }, []);
+  // Full screen ends with the browser's own Esc or its exit control too: follow it.
+  useEffect(() => {
+    const d = globalThis.document; if (!d || !d.addEventListener) return undefined;
+    const sync = () => setFs(f => (f === "native" && fullscreenEl() !== fsTarget.current ? "" : f));
+    d.addEventListener("fullscreenchange", sync); d.addEventListener("webkitfullscreenchange", sync);
+    return () => { d.removeEventListener("fullscreenchange", sync); d.removeEventListener("webkitfullscreenchange", sync); };
+  }, []);
   // #1770: the source and newer-version labels say the day as the thread does — drawn again when the fleet's day
   // changes, while a block is open. A render: the frame and the run are left as they are.
   const [, dayTick] = useState(0);
@@ -166,7 +241,9 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   // change of this device's choice cancels it.
   useEffect(() => {
     setRun({ state: "idle", reason: "" });
-    setView("preview");
+    if (!keepView.current) setView("preview");
+    setListing(false);                     // #2920 review: a new block on screen leaves the page list
+    keepView.current = false;
     if (open && st.run) {
       if (P().availability().ok) start();
       else pending.current = st.run;
@@ -174,11 +251,21 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     // Focus goes to the panel's close control that is on screen (Back on a phone, × beside the thread).
     if (panel.current) { const f = [...panel.current.querySelectorAll(".pv-panel-close")].find(b => b.offsetParent !== null); if (f) f.focus(); }
   }, [open && open.key, st.run]);
+  // The panel closing, or showing another instance's block: out of full screen.
+  useEffect(() => { if (!open) leaveFs(); }, [!!open]);
+  // #2911 (7): the running page's blocked CDN library, read from its error log (preview.js), kept as it changes.
+  useEffect(() => {
+    const key = open ? frameKey(open.key) : null;
+    const read = () => setCdnHost(key && P() && typeof P().errors === "function" ? blockedCdnHost(P().errors(key)) : null);
+    read();
+    if (!key || !P() || typeof P().onErrors !== "function") return undefined;
+    return P().onErrors((k) => { if (k === key) read(); });
+  }, [open && open.key]);
   // A later reply with a newer version of this block: offered, not swapped in.
   useEffect(() => {
     setNewerNote(""); reading.current = null;
     if (!open) { setNewer(null); return undefined; }
-    const check = () => setNewer(newerVersion(open, msgs() || [], keyOf));
+    const check = () => { const all = msgs() || []; setNewer(newerVersion(open, all, keyOf)); setVers(versionsOf(open, all, keyOf)); setPages(pagesOf(all, keyOf, name)); };
     check();
     return subscribe((instance, kind) => { if (instance === name && kind === "msgs") check(); });
   }, [open && open.key, name]);
@@ -219,24 +306,70 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     el.addEventListener("pointerup", up);
     el.addEventListener("pointercancel", up);
   };
-  // Show the newer version: an attached file's HTML is read first. A read the panel moved on from is dropped.
-  const showNewer = async () => {
-    if (!newer || reading.current) return;
-    if (newer.code != null) { openPanel(newer); return; }
-    const was = open && open.key, mine = reading.current = newer;
+  // Show another version (the newer one offered, or a step of ‹ ›): an attached file's HTML is read first. A read the
+  // panel moved on from is dropped. It is shown as Show it shows one — waiting for Preview, never started by the step.
+  const attReason = (r) => t(r.reason === "over" ? "chat.pvAttOver" : r.reason === "gone" ? "chat.pvAttGone" : "chat.pvAttFailed");
+  // #2920 review: a newer choice supersedes a read still waiting (it opens, or claims, and so moves the generation the
+  // waiting read checks) — it is never ignored because another read is pending.
+  const show = async (spec, { keep = false } = {}) => {
+    if (!spec) return;
+    const cached = spec.code == null ? loaded.current.get(spec.key) : undefined;
+    if (spec.code != null || cached != null) { keepView.current = keep; openPanel(cached != null ? { ...spec, code: cached } : spec); return; }
+    // #2915 review: the panel's generation, not just the key — a close and reopen of the same block while this read
+    // waits moves it, and the read is then dropped (claimPanel also drops any earlier click still reading).
+    const gen = claimPanel(), mine = reading.current = spec;
     setNewerNote(t("chat.pvLoading"));
-    // A click on the newer version reads it whatever its size (up to the 50 MB ceiling); over 8 MB the panel then asks.
-    const r = await loadHtmlAttachment(newer.att, undefined, { anyway: true });
-    if (reading.current !== mine) return;
-    reading.current = null;
-    const now = panelStore.get().open;
-    if (!now || now.key !== was) return;
-    if (!r.ok) { setNewerNote(t(r.reason === "over" ? "chat.pvAttOver" : r.reason === "gone" ? "chat.pvAttGone" : "chat.pvAttFailed")); return; }
-    openPanel({ ...newer, code: r.code });
+    // A click on a version reads it whatever its size (up to the 50 MB ceiling); over 8 MB the panel then asks.
+    const r = await loadHtmlAttachment(spec.att, undefined, { anyway: true });
+    if (reading.current === mine) reading.current = null;
+    if (panelVersion() !== gen) return;
+    if (!r.ok) { setNewerNote(attReason(r)); return; }
+    setNewerNote("");
+    loaded.current.set(spec.key, r.code);
+    keepView.current = keep;
+    openPanel({ ...spec, code: r.code });
   };
+  const showNewer = () => show(newer);
+  /** A view button: that view on screen — the page list, if open, gives way to it (#2920 review). */
+  const pickView = (v) => { setListing(false); setView(v); };
+  const step = (by) => { const v = vers.list[vers.index + by]; if (vers.index >= 0 && v) show(v, { keep: true }); };
+  // Changes: the previous version against this one, a line diff (bounded: DIFF_LIMITS). An attached previous version
+  // is read for it, once.
+  const prev = vers.index > 0 ? vers.list[vers.index - 1] : null;
+  // A step to the first version from Changes: nothing to compare it with, so the page is shown (Changes is kept as the
+  // choice, and comes back with the next step that has a previous version).
+  const shown = view === "changes" && !prev ? "preview" : view;
+  useEffect(() => {
+    if (shown !== "changes" || !open) { setChanges(null); return undefined; }
+    let live = true;
+    const from = vers.index;   // "Changes from v{from}" (1-based: the previous one)
+    const diff = (before) => {
+      const ops = lineDiff(before, open.code);
+      if (!ops) return { state: "big", from };
+      const hunks = diffHunks(ops);
+      let total = 0; for (const h of hunks) total += h.lines.length + 1;
+      return { state: "ready", from, hunks, total };
+    };
+    const known = prev.code != null ? prev.code : loaded.current.get(prev.key);
+    if (known != null) setChanges(diff(known));
+    else {
+      setChanges({ state: "loading", from });
+      loadHtmlAttachment(prev.att, undefined, { anyway: true }).then((r) => {
+        if (!live) return;
+        if (!r.ok) { setChanges({ state: "failed", from, reason: attReason(r) }); return; }
+        loaded.current.set(prev.key, r.code);
+        setChanges(diff(r.code));
+      });
+    }
+    return () => { live = false; };
+  }, [shown, open && open.key, prev && prev.key]);
   const fileName = open && open.att ? open.att.name : undefined;
   // Esc in the panel closes it (and is not the chat's "stop the reply").
-  const onPanelKey = (e) => { if (e.key === "Escape" && !e.isComposing) { e.preventDefault(); closePanel(); } };
+  const onPanelKey = (e) => {
+    if (e.key !== "Escape" || e.isComposing) return;
+    e.preventDefault();
+    if (fs) leaveFs(); else closePanel();
+  };
 
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
@@ -259,33 +392,81 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
   return html`<div data-trust="preview" class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
       aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>
-    <aside data-trust="preview" class="pv-panel" ref=${panel} aria-label=${t("chat.pvPanel")} onKeyDown=${onPanelKey}>
+    <aside data-trust="preview" class=${`pv-panel${fs ? ` pv-fs pv-fs-${fs}` : ""}`} ref=${panel} aria-label=${t("chat.pvPanel")} onKeyDown=${onPanelKey}>
       <div class="pv-panel-head">
         <button type="button" class="icon-btn only-narrow pv-panel-close" title=${t("chat.pvBack")} aria-label=${t("chat.pvBack")} onClick=${closePanel}><${Icon} name="back" size=${18} /></button>
         <div class="pv-panel-title"><strong>${t("chat.pvPanel")}</strong>
           <button type="button" class="pv-source" title=${source} onClick=${() => { if (window.matchMedia && window.matchMedia("(max-width: 899px)").matches) closePanel(); reveal(open.msgKey); }}>${source}</button></div>
+        ${pages.length > 1 ? html`<button type="button" class=${`btn btn-sm pv-pages-toggle${listing ? " on" : ""}`} aria-pressed=${listing ? "true" : "false"} title=${t("chat.pvPagesTitle")}
+          onClick=${() => setListing(v => !v)}><${Icon} name="file" size=${14} />${t("chat.pvPagesCount", pages.length)}</button>` : null}
         <button type="button" class="icon-btn only-wide pv-panel-close" title=${t("chat.pvClose")} aria-label=${t("chat.pvClose")} onClick=${closePanel}><${Icon} name="close" size=${18} /></button>
       </div>
       <div class="pv-panel-bar">
+        ${vers.list.length > 1 && vers.index >= 0 ? html`<div class="pv-ver" role="group" aria-label=${t("chat.pvVersions")}>
+          <button type="button" class="icon-btn pv-ver-prev" title=${t("chat.pvVerPrev")} aria-label=${t("chat.pvVerPrev")} disabled=${vers.index === 0} onClick=${() => step(-1)}><${Icon} name="prev" size=${16} /></button>
+          <span class="pv-ver-at" aria-live="polite" title=${t("chat.pvVerLong", vers.index + 1, vers.list.length)} aria-label=${t("chat.pvVerLong", vers.index + 1, vers.list.length)}>${t("chat.pvVer", vers.index + 1, vers.list.length)}</span>
+          <button type="button" class="icon-btn pv-ver-next" title=${t("chat.pvVerNext")} aria-label=${t("chat.pvVerNext")} disabled=${vers.index === vers.list.length - 1} onClick=${() => step(1)}><${Icon} name="next" size=${16} /></button>
+        </div>` : null}
         <div class="seg-inline" role="group" aria-label=${t("chat.pvPanel")}>
-          <button type="button" class=${`btn btn-sm${view === "preview" ? " on" : ""}`} aria-pressed=${view === "preview" ? "true" : "false"} onClick=${() => setView("preview")}><${Icon} name="eye" size=${14} />${t("chat.pvPage")}</button>
-          <button type="button" class=${`btn btn-sm${view === "code" ? " on" : ""}`} aria-pressed=${view === "code" ? "true" : "false"} onClick=${() => setView("code")}><${Icon} name="code" size=${14} />${t("chat.pvCode")}</button>
+          <button type="button" class=${`btn btn-sm${shown === "preview" ? " on" : ""}`} aria-pressed=${shown === "preview" ? "true" : "false"} title=${t("chat.pvPage")} onClick=${() => pickView("preview")}><${Icon} name="eye" size=${14} /><span class="lbl">${t("chat.pvPage")}</span></button>
+          <button type="button" class=${`btn btn-sm${shown === "code" ? " on" : ""}`} aria-pressed=${shown === "code" ? "true" : "false"} title=${t("chat.pvCode")} onClick=${() => pickView("code")}><${Icon} name="code" size=${14} /><span class="lbl">${t("chat.pvCode")}</span></button>
+          ${prev ? html`<button type="button" class=${`btn btn-sm pv-changes${shown === "changes" ? " on" : ""}`} aria-pressed=${shown === "changes" ? "true" : "false"} title=${t("chat.pvChanges")} onClick=${() => pickView("changes")}><${Icon} name="diff" size=${14} /><span class="lbl">${t("chat.pvChanges")}</span></button>` : null}
         </div>
         <span class="grow"></span>
+        ${shown === "preview" ? html`<select class="pv-width" aria-label=${t("chat.pvWidth")} title=${t("chat.pvWidth")} value=${device} onChange=${(e) => setDevice(e.currentTarget.value)}>
+          <option value="full">${t("chat.pvWidthFull")}</option><option value="tablet">${t("chat.pvWidthTablet")}</option><option value="phone">${t("chat.pvWidthPhone")}</option></select>` : null}
         ${going ? html`<button type="button" class="btn btn-sm pv-panel-reload" title=${t("chat.pvReload")} onClick=${() => { stop(); start(true); }}><${Icon} name="restart" size=${14} /><span class="lbl">${t("chat.pvReload")}</span></button>
           <button type="button" class="btn btn-sm pv-panel-stop" title=${t("chat.pvStop")} onClick=${stop}><${Icon} name="stop" size=${14} /><span class="lbl">${t("chat.pvStop")}</span></button>`
           : run.state === "large" ? html`<button type="button" class="btn btn-sm btn-primary pv-panel-anyway" title=${t("chat.pvAnyway")} disabled=${!a.ok} onClick=${() => start(true)}><${Icon} name="play" size=${14} /><span class="lbl">${t("chat.pvAnyway")}</span></button>`
           : html`<button type="button" class="btn btn-sm btn-primary pv-panel-run" title=${t("chat.pvPreview")} disabled=${!a.ok} onClick=${() => start()}><${Icon} name="play" size=${14} /><span class="lbl">${t("chat.pvPreview")}</span></button>`}
+        <button type="button" class=${`btn btn-sm only-wide pv-panel-fs${fs ? " on" : ""}`} aria-pressed=${fs ? "true" : "false"} title=${t(fs ? "chat.pvFsExit" : "chat.pvFs")} aria-label=${t(fs ? "chat.pvFsExit" : "chat.pvFs")}
+          onClick=${() => (fs ? leaveFs() : enterFs())}><${Icon} name=${fs ? "fullscreenexit" : "fullscreen"} size=${14} /></button>
+        <${PanelActions} open=${open} name=${name} run=${run} view=${view} />
         <button type="button" class="btn btn-sm pv-panel-dl" title=${t("chat.pvDownload")} onClick=${() => download(open.code, fileName)}><${Icon} name="download" size=${14} /><span class="lbl">${t("chat.pvDownload")}</span></button>
       </div>
       ${newer && newer.key !== open.key ? html`<div class="pv-newer" role="status"><span>${t("chat.pvNewer", timeOf(newer.ts))}</span>
         <button type="button" class="btn btn-sm pv-newer-show" onClick=${showNewer}>${t("chat.pvNewerShow")}</button>${newerNote ? html`<span class="pv-newer-note">${newerNote}</span>` : null}</div>` : null}
+      ${newerNote && !(newer && newer.key !== open.key) ? html`<div class="pv-note pv-ver-note" role="status">${newerNote}</div>` : null}
       ${going && !P().bannerAcked() ? html`<div class="pv-banner"><span class="pv-banner-text">${P().banner()}</span>
         <button type="button" class="btn btn-sm btn-ghost pv-ack" title=${P().bannerAckTitle()} onClick=${() => P().ackBanner()}>${P().bannerAckLabel()}</button></div>` : null}
-      ${note && view === "preview" ? html`<div class="pv-note">${note}${askOptIn ? html` <button type="button" class="btn btn-sm pv-panel-allow" onClick=${allowHere}>${t("chat.pvAllowButton")}</button>` : null}</div>` : null}
-      <div class=${`pv-panel-body${view === "code" ? " show-code" : ""}`}>
+      ${cdnHost && shown === "preview" ? html`<div class="pv-note pv-cdn-note" role="status">${t("chat.pvCdnNote", cdnHost)}</div>` : null}
+      ${note && shown === "preview" ? html`<div class="pv-note">${note}${askOptIn ? html` <button type="button" class="btn btn-sm pv-panel-allow" onClick=${allowHere}>${t("chat.pvAllowButton")}</button>` : null}</div>` : null}
+      <div class=${`pv-panel-body${listing || shown !== "preview" ? " show-code" : ` w-${device}`}`}>
         <div class="pv-holder" ref=${holder}></div>
-        ${view === "code" ? html`<pre class="pv-code"><code>${open.code}</code></pre>` : null}
+        ${listing ? html`<${PageList} pages=${pages} current=${pageIdOf(open)} pick=${(p) => { setListing(false); if (p.id !== pageIdOf(open)) show(p.latest); }} />` : null}
+        ${!listing && shown === "code" ? html`<pre class="pv-code"><code>${open.code}</code></pre>` : null}
+        ${!listing && shown === "changes" ? html`<${Changes} changes=${changes} />` : null}
       </div>
     </aside>`;
 }
+
+/** The Changes view: hunks of the line diff as a unified diff shows them, drawn as text (never as HTML). */
+function Changes({ changes }) {
+  if (!changes || changes.state === "loading") return html`<div class="pv-note pv-diff-note">${t("chat.pvLoading")}</div>`;
+  if (changes.state === "failed") return html`<div class="pv-note pv-diff-note">${changes.reason}</div>`;
+  if (changes.state === "big") return html`<div class="pv-note pv-diff-note">${t("chat.pvChangesBig")}</div>`;
+  if (!changes.hunks.length) return html`<div class="pv-note pv-diff-note">${t("chat.pvChangesNone", changes.from)}</div>`;
+  const rows = [];
+  let left = DIFF_LIMITS.maxLines;
+  for (const h of changes.hunks) {
+    if (left <= 0) break;
+    rows.push(html`<span class="d-hunk">${`@@ -${h.oldStart},${h.oldLines} +${h.newStart},${h.newLines} @@\n`}</span>`);
+    left--;
+    for (const l of h.lines) {
+      if (left-- <= 0) break;
+      rows.push(html`<span class=${l.t === "+" ? "d-add" : l.t === "-" ? "d-del" : "d-ctx"}>${`${l.t} ${l.text}\n`}</span>`);
+    }
+  }
+  return html`<div class="pv-diff-wrap"><div class="pv-diff-head">${t("chat.pvChangesFrom", changes.from)}${changes.total > DIFF_LIMITS.maxLines ? html` · <span class="pv-diff-cut">${t("chat.pvChangesCut", DIFF_LIMITS.maxLines)}</span>` : null}</div>
+    <pre class="pv-code pv-diff"><code>${rows}</code></pre></div>`;
+}
+
+/** #2911 (6): the thread's pages, newest first — one row each, its newest version opened by a click (waiting for Preview). */
+function PageList({ pages, current, pick }) {
+  return html`<ul class="pv-pages" aria-label=${t("chat.pvPagesTitle")}>${pages.map(p => html`<li key=${p.id}>
+    <button type="button" class=${`pv-page${p.id === current ? " on" : ""}`} aria-current=${p.id === current ? "true" : undefined} onClick=${() => pick(p)}>
+      <${Icon} name=${p.kind === "file" ? "attach" : "code"} size=${14} />
+      <span class="pv-page-name">${p.label || t("chat.pvPagesUntitled")}</span>
+      <span class="pv-page-meta">${p.versions > 1 ? t("chat.pvPagesVersions", p.versions) : ""}${p.versions > 1 ? " · " : ""}${timeOf(p.latest.ts)}</span>
+    </button></li>`)}</ul>`;
+}

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. */