@songsid/agend 2.3.3 → 2.3.4-beta.2

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

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

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