@songsid/agend 2.3.5-alpha.2 → 2.3.5-alpha.4

package/dist/ui/shared/instance-nav.js

@@ -18,6 +18,7 @@ import { viewStore } from "./view-roster-store.js";
 import { onPrefsChanged, prefInForce, prefsWritable, savePref } from "./app-prefs.js";
 import "./view-strings.js";
 import { themesShown, themesStore } from "./app-themes.js";
+import { machineName } from "./machine-name.js";
 import { identityClasses, identityOf, paintIdentity, useIdentityColors } from "./identity-color.js";
 
 /** view.* text with named values. */
@@ -145,7 +146,7 @@ export function instanceTooltip(it) {
   else lines.push(name);
   lines.push(line("tooltipBackend", backendLabel(it.backend)));
   if (it.runtime) lines.push(`Runtime: ${runtimeLabel(it.runtime)}`);
-  if (it.machine_id) lines.push(line("tooltipMachine",it.machine_name || it.machine_id));
+  if (it.machine_id) lines.push(line("tooltipMachine",machineName(it.machine_id,it.machine_name)));
   if (it.machine_id && it.machine_status !== "online") lines.push(tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline"));
   const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
   lines.push(line("tooltipModel", (modelText(it) || tn("tooltipUnavailable")) + src(it.model_source)));
@@ -294,6 +295,8 @@ function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.str
 
 /** The Favorites group's key among the tag groups: no tag can be it (a group name is never a control character). */
 const FAV_GROUP = "\u0000favorites";
+/** #3008 G2: a web-only fleet's General (its status row says `general: true`), pinned first under its own head. */
+const GENERAL_GROUP = "\u0000general";
 /** #1936: the open instance, pinned on top while a filter is on. */
 const PINNED_GROUP = "\u0000pinned";
 function persistOrder(groupNames, instByGroup) {
@@ -515,7 +518,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // their order. Changing them: a signed-in page that may write preferences (not the public link, not the anonymous
   // reader — they still see the list).
   const known = new Set(byName.keys());
-  const favs = nav.favorites.filter((n) => known.has(n));
+  // #3008 G2: the General, when the server marks one (a web-only fleet), comes first — out of every other group.
+  const general = items.find((it) => it && it.general === true);
+  const generalName = general ? nameOf(general) : null;
+  const favs = nav.favorites.filter((n) => known.has(n) && n !== generalName);
   const favSet = new Set(favs);
   const canStar = !viewOnly && prefsWritable("nav.favorites");
   // #1920: a guest's list is not reordered (the order is the host's). #2855: it stars, sorts and filters as its own
@@ -533,14 +539,15 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   let shownGroups, shownInsts;
   if (recent) {
     const sortRecent = byRecentReply(ageOf);
-    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n)).sort(sortRecent);
+    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n) && n !== generalName).sort(sortRecent);
     shownGroups = [...(favs.length ? [FAV_GROUP] : []), ...(rest.length ? [RECENT_GROUP] : [])];
     shownInsts = new Map([[FAV_GROUP, favsSorted ? [...favs].sort(sortRecent) : favs], [RECENT_GROUP, rest]]);
   } else {
     shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
-    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
+    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n) && n !== generalName)]));
     if (favs.length) shownInsts.set(FAV_GROUP, favs);
   }
+  if (generalName) { shownGroups = [GENERAL_GROUP, ...shownGroups]; shownInsts.set(GENERAL_GROUP, [generalName]); }
   const f = nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
@@ -624,7 +631,7 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
           <span class="v-meta">${it.runtime === "windows" ? "Windows" : it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
         ${two ? html`<span class="inst-line inst-line2"><span class="inst-alt" title=${secondary || undefined}>${secondary || ""}</span>
           ${mins != null ? html`<span class=${`inst-when${fade > 0 ? " fresh" : ""}`} title=${tn("replyTitle", { time: new Date(Date.parse(it.last_reply)).toLocaleString() })}>${replyText(mins)}</span>` : null}</span>` : null}
-        ${it.machine_id ? html`<span class=${`inst-machine${it.machine_status !== "online" ? " offline" : ""}`} title=${tn("tooltipMachine",{value:it.machine_name || it.machine_id})}><span class="inst-machine-name">${it.machine_name || it.machine_id}</span>${it.machine_status !== "online" ? html`<span class="inst-machine-status">${tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline")}</span>` : null}</span>` : null}
+        ${it.machine_id ? html`<span class=${`inst-machine${it.machine_status !== "online" ? " offline" : ""}`} title=${tn("tooltipMachine",{value:machineName(it.machine_id,it.machine_name)})}><span class="inst-machine-name">${machineName(it.machine_id,it.machine_name)}</span>${it.machine_status !== "online" ? html`<span class="inst-machine-status">${tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline")}</span>` : null}</span>` : null}
         ${facet === "needs" ? html`<span class="inst-sub"><span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span></span>` : null}
         <span class="sr-only">${tn("tooltipBackend", { value: backendLabel(it.backend) })}</span></span>
     </a>${fav && editing && canStar ? html`<button type="button" class="icon-btn inst-move" aria-label=${tn("favUp", { name: label })}
@@ -655,6 +662,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       if (g === RECENT_GROUP) return html`<div key=${g} class="v-group v-recent" role="group" aria-label=${tn("recentOthers")}>
         <div class="v-group-head recent-head"><${Icon} name="clock" size=${14} /><span class="grow">${tn("recentOthers")}</span><span class="count">${names.length}</span></div>
         <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
+      // #3008 G2: the General — always open, first, not dragged or starred into another place.
+      if (g === GENERAL_GROUP) return html`<div key=${g} class="v-group v-general" role="group" aria-label=${tn("generalGroup")}>
+        <div class="v-group-head general-head"><span class="grow">${tn("generalGroup")}</span></div>
+        <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
       // #1664: Favorites — always open, not dragged (↑ ↓ in Edit), named in the page's language.
       if (g === FAV_GROUP) return html`<div key=${g} class="v-group v-fav" role="group" aria-label=${tn("favorites")}>
         <div class="v-group-head fav-head"><${Icon} name="star" size=${14} cls="fav-mark" /><span class="grow">${tn("favorites")}</span><span class="count">${names.length}</span></div>

package/dist/ui/shared/machine-name.js

@@ -0,0 +1,13 @@
+// A paired computer's display name. A module of its own, imported by the sidebar (instance-nav.js) and by the lazy
+// chat panel. A tab opened before an upgrade keeps the old shell, whose instance-nav.js has no `machineName`; the new
+// chat panel imports it from here instead, a module that tab loads fresh, so Chat still opens (as #2978 did for
+// settings-width.js). It registers its own words so it does not depend on the shell's older string tables.
+import { register, t } from "./app-i18n.js";
+
+register("machine", {
+  "en": { "short": "Computer {value}" },
+  "zh-TW": { "short": "電腦 {value}" },
+});
+
+/** A remote computer by its name; with no name yet, by the start of its id, never the whole id. The 8-character cut matches `shortId` in src/ui/settings-agent-filters.js; keep the two in step. */
+export const machineName = (id, name) => name || t("machine.short").split("{value}").join(String(id).slice(0, 8));

package/dist/ui/shared/panel-view.js

@@ -26,7 +26,7 @@ import { viewStore } from "./view-roster-store.js";
 /** #1580: the app's stream says the fleet is not answering (a restart): the View's polls skip their turn until it is. */
 const fleetUnreachable = () => appStore.get().connection === "reconnecting";
 import { navigate } from "./app-nav.js";
-import { viewPath } from "./app-route.js";
+import { logPath, sectionPath, viewPath } from "./app-route.js";
 import { Dialog } from "./ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "./ui-states.js";
 import { Icon } from "./ui-icons.js";
@@ -41,6 +41,44 @@ function tn(key, values = {}) {
   for (const [k, v] of Object.entries(values)) s = s.split(`{${k}}`).join(String(v));
   return s;
 }
+/**
+ * v2.3.4-beta.4 P1 (hmsg-985db235, hmsg-5ab1997d): this module is loaded on first use, so a tab opened before an upgrade
+ * runs the new View with the stylesheet and the View's words it loaded at its start. Without the View's layout rules
+ * (.v-term-box) the terminal box grew with its text: the text shrank every second (fit() measured the box its own text
+ * sized), a normal-buffer CLI's View showed its whole history from the top, and new words showed as raw keys. Each is
+ * found by a mark the current files carry — VIEW_REV in app.css (the --v-term-rev property) and view-strings.js (the
+ * view.rev word) — and a stale one is read again, once per page: the stylesheet re-linked after the one in force, the
+ * words imported again (register() replaces them). The query only makes it a new request: /assets/ serves the file.
+ */
+export const VIEW_REV = "2";
+const healed = { css: false, words: false };
+export function healStalePage(doc = typeof document !== "undefined" ? document : null, load = (u) => import(u), onWords = () => {}) {
+  if (!doc) return { css: false, words: false };
+  const out = { css: false, words: false };
+  try {
+    const box = doc.querySelector && doc.querySelector(".v-term-box");
+    // Only a page that has the stylesheet linked (the app; never a test's page without one) and an older one in force.
+    const linked = [...(doc.querySelectorAll ? doc.querySelectorAll('link[rel="stylesheet"]') : [])]
+      .some((l) => String(l.getAttribute("href") || "").split("?")[0] === "/assets/app.css");
+    if (box && linked && !healed.css) {
+      const cs = typeof getComputedStyle === "function" ? getComputedStyle(box) : null;
+      const rev = cs && typeof cs.getPropertyValue === "function" ? String(cs.getPropertyValue("--v-term-rev")).trim().replace(/^"|"$/g, "") : VIEW_REV;
+      if (rev !== VIEW_REV) {
+        healed.css = true; out.css = true;
+        const link = doc.createElement("link");
+        link.setAttribute("rel", "stylesheet"); link.setAttribute("href", `/assets/app.css?rev=${VIEW_REV}-${Date.now().toString(36)}`);
+        doc.head.appendChild(link);
+      }
+    }
+  } catch { /* never in the View's way */ }
+  if (t("view.rev") !== VIEW_REV && !healed.words) {
+    healed.words = true; out.words = true;
+    Promise.resolve(load(`./view-strings.js?rev=${VIEW_REV}-${Date.now().toString(36)}`)).then(() => onWords(), () => {});
+  }
+  return out;
+}
+/** For tests: as on a fresh page. */
+export function resetHealed() { healed.css = false; healed.words = false; }
 const stored = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
 const store = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this page only */ } };
 
@@ -198,8 +236,8 @@ export function ViewPanel({ route, navKey }) {
   else if (!it) body = html`<div data-trust="panel-content" class="panel-body center"><${Empty} icon="alert" title=${tn("notFound", { name })} hint=${tn("notFoundHint")} /></div>`;
   else if (guest && !trusted) body = html`<div data-trust="panel-content" class="panel-body center"><${Empty} icon="view" title=${tn("guestNeedsTrusted")} hint=${tn("guestNeedsTrustedHint")} /></div>`;
   else if (guest) body = html`<p data-trust="panel-content" class="v-watching" role="note">${tn("guestWatching")}</p>
-    <${Terminal} key=${name} name=${name} lease=${lease} density=${density} every=${GUEST_PANE_MS} />`;
-  else body = html`<${Terminal} key=${name} name=${name} lease=${lease} density=${density} />
+    <${Terminal} key=${name} name=${name} lease=${lease} density=${density} every=${GUEST_PANE_MS} backend=${it.backend || ""} signedIn=${false} />`;
+  else body = html`<${Terminal} key=${name} name=${name} lease=${lease} density=${density} backend=${it.backend || ""} signedIn=${!viewOnly} />
     <${ViewIdentity} it=${it} viewOnly=${viewOnly} onEdit=${() => setDialog("edit")} />`;
 
   return html`<div data-effect-panel="view" class="panel p-view">
@@ -214,11 +252,74 @@ export function ViewPanel({ route, navKey }) {
 
 /** #2855: how often a guest's View reads the pane (the server allows it two reads a second). */
 const GUEST_PANE_MS = 1000;
-/** The live terminal: the pane every 800 ms (passive), drawn as escaped markup, its font fitted to the pane's grid. */
-function Terminal({ name, lease, density, every = 800 }) {
+/**
+ * The live terminal: the pane every 800 ms (passive), drawn as escaped markup, its font fitted to the pane's grid.
+ *
+ * M-2262 (the user, hmsg-435f6df6): scrolling back. Following (the default), it shows the pane's screen as it is now.
+ * Scrolling up — the wheel, a touch drag, PageUp/↑/Home, or "Earlier output" — reads the pane's scrollback once
+ * (`?history=1`: tmux's history above the screen, bounded) and shows it: reading. While reading, nothing moves the
+ * person: the refresh keeps reading the screen only to say "New output below", and never redraws. "Jump to latest"
+ * (or End), or scrolling to the bottom, follows again. Everything happens in this page, over text tmux was asked to
+ * capture: never copy-mode and never a key to the pane (hmsg-b8a170c0 — scrolling must never affect delivery).
+ */
+/** How long a scrollback note stays (it covers the terminal's bottom rows). */
+const NOTE_MS = 6000;
+/** A scroll this soon after the person's own wheel, touch, key or pointer is theirs (not one this page made). */
+const GESTURE_MS = 1000;
+/**
+ * #2969 review (Prism P3): is `live` (a screen read) still what `shown` ends with — the screen as it was when reading
+ * began (the scrollback's last lines, or the screen itself)? Trailing blank rows are not content.
+ */
+export function sameScreen(shown, live) {
+  if (shown == null || live == null) return shown === live;
+  const trim = (t) => String(t).replace(/\n+$/, "");
+  const s = trim(shown).split("\n"), l = trim(live).split("\n");
+  return s.length >= l.length && s.slice(s.length - l.length).join("\n") === l.join("\n");
+}
+/** M-2262 survey: CLIs that redraw their whole window (no tmux scrollback even outside the alternate screen). */
+const REDRAWS_IN_PLACE = new Set(["grok"]);
+/** M-2262 survey: the full-screen CLIs (the alternate screen, or redrawn in place) — tmux keeps nothing above their screen. */
+const FULL_SCREEN = new Set(["claude-code", "opencode", "grok"]);   // agy: its chat UI unverified — found by the read
+/** The full-screen CLIs whose earlier output the Log tab shows (it reads their transcript: log-service.ts). */
+const LOG_HAS_HISTORY = new Set(["claude-code"]);
+/**
+ * M-2267 option (2), the leader's safe default: where a full-screen CLI's earlier output is — its Log tab (or that the
+ * Log tab is off, and where to turn it on). Only for whom the Log tab is (a signed-in session on the full app; never a
+ * guest or a View-only reader: they get the plain words), and only for a CLI the Log tab reads.
+ */
+function logLinkFor(name, backend, signedIn) {
+  if (!signedIn || !LOG_HAS_HISTORY.has(backend)) return null;
+  const on = typeof document !== "undefined" && document.body?.dataset?.logTab === "1";
+  return on ? { href: logPath(name), text: tn("earlierInLog") } : { href: sectionPath("web-dashboard"), text: tn("logTabOff") };
+}
+function Terminal({ name, lease, density, every = 800, backend = "", signedIn = false }) {
   const term = useRef(null), pre = useRef(null);
-  const grid = useRef({ cols: 0, rows: 0, applied: 0, key: "" });
+  const grid = useRef({ cols: 0, rows: 0, applied: 0, key: "", follows: false });
   const [problem, setProblem] = useState(null);
+  const [, setWordsRev] = useState(0);
+  // "follow" | "loading" | "reading"; the screen's text when reading began, the newest read since; a note about history.
+  const [mode, setModeState] = useState("follow");
+  const modeRef = useRef("follow");
+  const setMode = (m) => { modeRef.current = m; setModeState(m); };
+  const [newBelow, setNewBelow] = useState(false);
+  const [historyNote, setHistoryNoteState] = useState(null);
+  // A CLI found to keep no scrollback (full screen): nothing is offered or read again for it; the note says why, briefly.
+  const [noScrollback, setNoScrollback] = useState(FULL_SCREEN.has(backend));
+  const noScrollbackRef = useRef(FULL_SCREEN.has(backend));
+  const logLink = logLinkFor(name, backend, signedIn);
+  const noteTimer = useRef(null);
+  const setHistoryNote = (note, brief = false) => {
+    lease.clear(noteTimer.current); noteTimer.current = null;
+    setHistoryNoteState(note);
+    if (note && brief) noteTimer.current = lease.timeout(() => setHistoryNoteState(null), NOTE_MS);
+  };
+  // `reading`: the text shown while reading (the scrollback, or the screen as it was when the person left the bottom);
+  // `latest`: the newest screen read; `history`: whether what is shown has the scrollback in it.
+  // `drawn` (#2969 review P3): the text actually on the page now — what reading starts from, never a newer read not drawn.
+  const screenAt = useRef({ reading: null, latest: null, history: false, drawn: null });
+  // #2969 review (Prism P2): when the person last moved the terminal themselves (wheel, touch, key, pointer).
+  const gestureAt = useRef(-Infinity);
+  const recentGesture = () => performance.now() - gestureAt.current < GESTURE_MS;
   // #1674: the text size as of this render. The pane refresh and the resize handlers below are set up once per mount
   // and keep the fit() of that render; reading the size here, not from that render's props, keeps them on the current
   // choice (they used to put the mount-time size back within one 800 ms refresh).
@@ -236,16 +337,71 @@ function Terminal({ name, lease, density, every = 800 }) {
     const pcs = getComputedStyle(p);
     const lh = parseFloat(pcs.lineHeight) / parseFloat(pcs.fontSize);
     const lineH = Number.isFinite(lh) && lh > 0 ? lh : 1.2;
-    let size = Math.min(innerW / (g.cols * glyphRatio(p)), innerH / (g.rows * lineH)) * 0.995;
-    if (density === "fit") size = Math.max(FIT_FLOOR_PX, Math.min(size, MAX_PX));
-    else size = Math.max(8, Math.min(Math.max(MIN_PX, Math.min(size, MAX_PX)) * (VIEW_SCALE[density] || 1), 32));
+    const byW = innerW / (g.cols * glyphRatio(p)), byH = innerH / (g.rows * lineH);
+    const sizeFor = (limit) => (density === "fit" ? Math.max(FIT_FLOOR_PX, Math.min(limit * 0.995, MAX_PX))
+      : Math.max(8, Math.min(Math.max(MIN_PX, Math.min(limit * 0.995, MAX_PX)) * (VIEW_SCALE[density] || 1), 32)));
+    const size = sizeFor(g.follows ? byW : Math.min(byW, byH));
     g.key = key;
     // A small change is skipped only when growing (the size applied still fits); a smaller box always shrinks it.
     if (size >= g.applied && size - g.applied < 0.75) return;
-    g.applied = size;
-    p.style.fontSize = `${size.toFixed(2)}px`;          // CSSOM, never a style attribute (#1300)
+    const padH = (parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom)) || 0;
+    const was = g.applied || parseFloat(pcs.fontSize) || 0, before = box.clientHeight - padH;
+    const apply = (px) => { g.applied = px; p.style.fontSize = `${px.toFixed(2)}px`; };   // CSSOM, never a style attribute (#1300)
+    apply(size);
+    // v2.3.4-beta.4 P1: the box's height is a limit only while it is the box's own. Read again right after the text took
+    // its new size (the read lays the page out), a box whose height moved with it, by the same factor, is following its
+    // text — a stale stylesheet, or any container that grows with its content: measured next time it would shrink the
+    // text 0.5% each refresh, for ever. Then the width alone decides, at once and from then on (until the choice or the
+    // stylesheet changes). Cause and effect within this one call: a resize between calls (#2991 review: the box made
+    // shorter step by step, where a height-limited size moves in proportion too) never counts. The move must match the
+    // expected one closely for its size (#2991 review r2: not ±5% of the whole), and a second probe in the same call —
+    // 10% smaller, then back, before any frame is painted — must move it in proportion again: a one-off fixed drop (a
+    // scrollbar coming) never does.
+    if (!g.follows && was > 0 && before > 0) {
+      const height = () => box.clientHeight - padH;
+      const moves = (from, to, ratio) => {
+        const expect = from * (ratio - 1), got = to - from;
+        return got !== 0 && Math.sign(got) === Math.sign(expect) && Math.abs(got - expect) <= Math.max(1.5, 0.25 * Math.abs(expect));
+      };
+      const after = height();
+      if (moves(before, after, size / was)) {
+        p.style.fontSize = `${(size * 0.9).toFixed(2)}px`;
+        const probed = height();
+        p.style.fontSize = `${size.toFixed(2)}px`;
+        if (moves(after, probed, 0.9)) {
+          g.follows = true;
+          const byWidth = sizeFor(byW);
+          if (byWidth !== size) apply(byWidth);
+        }
+      }
+    }
+  };
+  /** Keep a following view on the newest line (a grid taller than the box at the larger sizes scrolls). */
+  const toBottom = () => { const box = term.current; if (box) box.scrollTop = box.scrollHeight; };
+  const draw = (text) => {
+    pre.current.innerHTML = ansiToHtml(text);           // escaped by construction: markup only from ansiToHtml's own spans
+    paintAnsi(pre.current);
+    screenAt.current.drawn = text;
   };
-  useEffect(() => { grid.current.key = ""; fit(); }, [density]);
+  useEffect(() => { grid.current.key = ""; grid.current.follows = false; fit(); }, [density]);
+  // A tab opened before an upgrade: its stylesheet and the View's words read again (healStalePage), then fitted anew.
+  useEffect(() => {
+    const h = healStalePage(document, (u) => import(u), () => { setWordsRev((n) => n + 1); });
+    if (h.css) lease.timeout(() => { grid.current.key = ""; grid.current.follows = false; fit(); }, 300);
+  }, []);
+  const atBottom = () => { const box = term.current; return !box || box.scrollHeight - box.scrollTop - box.clientHeight <= 2; };
+  /** Reading what is shown now (`text`, with or without the scrollback): the refresh only says whether there is more. */
+  const startReading = (text, history) => {
+    screenAt.current.reading = text; screenAt.current.history = history;
+    setNewBelow(false); setMode("reading");
+  };
+  const grid1 = (r) => {
+    const c = Number(r.headers.get("X-Pane-Cols")), rw = Number(r.headers.get("X-Pane-Rows"));
+    if (c >= 1 && rw >= 1 && (c !== grid.current.cols || rw !== grid.current.rows)) { grid.current.cols = c; grid.current.rows = rw; grid.current.key = ""; }
+  };
+  // The person asked for what scrolled off: one bounded read, then reading (or why there is nothing to read).
+  const loadEarlier = useRef(null);
+  const follow = useRef(null);
   useEffect(() => {
     const reads = readStream(lease);
     const refresh = async () => {
@@ -263,15 +419,72 @@ function Terminal({ name, lease, density, every = 800 }) {
         if (!r.ok) { setProblem(r.status === 404 ? tn("paneUnavailable") : r.status === 403 && guestPage() ? tn("guestNeedsTrusted") : tn("paneFailed", { name, status: r.status })); return; }
         const text = await r.text();
         if (!reads.live(token) || !pre.current) return;
-        const c = Number(r.headers.get("X-Pane-Cols")), rw = Number(r.headers.get("X-Pane-Rows"));
-        if (c >= 1 && rw >= 1 && (c !== grid.current.cols || rw !== grid.current.rows)) { grid.current.cols = c; grid.current.rows = rw; grid.current.key = ""; }
         setProblem(null);
-        pre.current.innerHTML = ansiToHtml(text);         // escaped by construction: markup only from ansiToHtml's own spans
-        paintAnsi(pre.current);
+        screenAt.current.latest = text;
+        // Reading earlier output: nothing is redrawn under the person — the read only says whether there is more.
+        if (modeRef.current !== "follow") { if (modeRef.current === "reading") setNewBelow(!sameScreen(screenAt.current.reading, text)); return; }
+        // #2969 review (Prism P2): the person is moving a screen taller than its box away from the bottom right now —
+        // this is them leaving it, not the latest to follow: read on, nothing redrawn.
+        // Reading starts from what is drawn; this newer read (not drawn) is then the new output below.
+        if (recentGesture() && !atBottom()) { startReading(screenAt.current.drawn, false); setNewBelow(!sameScreen(screenAt.current.drawn, text)); return; }
+        grid1(r);
+        draw(text);
         fit();
+        toBottom();
       } catch { /* a transient error keeps the last frame */ }
       finally { reads.end(token); }
     };
+    loadEarlier.current = async () => {
+      // From following, or from reading what was on the screen (the person reached its top): never twice, never over it.
+      const from = modeRef.current;
+      if (from !== "follow" && !(from === "reading" && !screenAt.current.history)) return;
+      if (noScrollbackRef.current) { setHistoryNote(tn("noEarlier"), true); return; }   // known: nothing to read
+      const box0 = term.current;
+      // Where the person is, measured from the end: the screen's lines stay where they are under the scrollback added.
+      const fromEnd = box0 ? box0.scrollHeight - box0.scrollTop : 0;
+      const back = () => { setMode(from); if (from === "follow") toBottom(); };
+      setMode("loading"); setHistoryNote(tn("loadingEarlier"));
+      try {
+        const r = await lease.fetch(`/api/pane/${encodeURIComponent(name)}?history=1`);
+        if (!lease.current() || modeRef.current !== "loading") return;
+        // #2969 review (Prism P2): a scrollback read that failed — or answered without its facts — changes nothing shown.
+        if (!r.ok || r.headers.get("X-Pane-History-Lines") == null) { back(); setHistoryNote(r.status === 429 ? null : tn("earlierFailed"), true); return; }
+        const text = await r.text();
+        if (!lease.current() || modeRef.current !== "loading" || !pre.current) return;
+        // A full-screen CLI (the alternate screen, or one that redraws its whole window) leaves nothing above its screen;
+        // any other with no history yet has simply not scrolled: say which, keep following.
+        if (r.headers.get("X-Pane-Alternate") === "1" || REDRAWS_IN_PLACE.has(backend)) {
+          noScrollbackRef.current = true; setNoScrollback(true);
+          back(); setHistoryNote(tn("noEarlier"), true); return;
+        }
+        if (r.headers.get("X-Pane-History-Lines") === "0") { back(); setHistoryNote(tn("nothingEarlier"), true); return; }
+        grid1(r);
+        const lines = text.split("\n").length, rows = grid.current.rows || 0;
+        // #2969 review (Prism P3): new output is judged against what is shown — the scrollback's own last screen — and
+        // a screen read while this one was out already counts.
+        screenAt.current.reading = text; screenAt.current.history = true;
+        setNewBelow(screenAt.current.latest != null && !sameScreen(text, screenAt.current.latest));
+        setMode("reading"); setHistoryNote(null);
+        draw(text);
+        fit();
+        const box = term.current;
+        if (box) {
+          const lineH = lines > 0 ? pre.current.scrollHeight / lines : 16;
+          // From following (at the bottom): a few lines up — the earlier output right above. From reading: the same lines.
+          box.scrollTop = from === "follow"
+            ? Math.max(0, box.scrollHeight - box.clientHeight - lineH * Math.min(3, Math.max(1, lines - rows)))
+            : Math.max(0, box.scrollHeight - fromEnd);
+        }
+      } catch { if (lease.current()) { back(); setHistoryNote(tn("earlierFailed"), true); } }
+    };
+    follow.current = () => {
+      if (modeRef.current === "follow") return;
+      setMode("follow"); setNewBelow(false); setHistoryNote(null); screenAt.current.history = false;
+      const latest = screenAt.current.latest;
+      if (latest != null && pre.current) { draw(latest); fit(); }
+      toBottom();
+      refresh();
+    };
     refresh();
     lease.interval(refresh, every);
     let timer = null;
@@ -282,8 +495,44 @@ function Terminal({ name, lease, density, every = 800 }) {
       ro.observe(term.current);
       lease.hold(() => ro.disconnect());
     }
+    // Scrolling up asks for the earlier output; reaching the bottom while reading follows again.
+    const box = term.current;
+    if (box) {
+      // Asking for the earlier output: from following, or from reading the screen as it was — at the top.
+      const mayLoad = () => (modeRef.current === "follow" || (modeRef.current === "reading" && !screenAt.current.history)) && box.scrollTop <= 0;
+      const gesture = () => { gestureAt.current = performance.now(); };
+      lease.on(box, "wheel", (e) => { gesture(); if (e.deltaY < 0 && mayLoad()) loadEarlier.current(); }, { passive: true });
+      let touchY = null;
+      lease.on(box, "touchstart", (e) => { gesture(); touchY = e.touches && e.touches[0] ? e.touches[0].clientY : null; }, { passive: true });
+      lease.on(box, "touchmove", (e) => {
+        gesture();
+        const y = e.touches && e.touches[0] ? e.touches[0].clientY : null;
+        if (touchY == null || y == null) return;
+        if (y - touchY > 24 && mayLoad()) { touchY = null; loadEarlier.current(); }
+      }, { passive: true });
+      lease.on(box, "pointerdown", gesture, { passive: true });             // the scrollbar, dragged
+      lease.on(box, "keydown", (e) => {
+        gesture();
+        if ((e.key === "PageUp" || e.key === "ArrowUp" || e.key === "Home") && mayLoad()) { e.preventDefault(); loadEarlier.current(); }
+        else if (modeRef.current === "reading" && e.key === "End") { e.preventDefault(); follow.current(); }
+      });
+      lease.on(box, "scroll", () => {
+        if (modeRef.current === "reading") { if (atBottom()) follow.current(); return; }
+        // #2969 review (Prism P2): a screen taller than its box (a larger Aa), moved up from the bottom by the person:
+        // reading what is on it — the refresh no longer pulls them back down.
+        if (modeRef.current === "follow" && recentGesture() && !atBottom()) startReading(screenAt.current.drawn, false);
+      }, { passive: true });
+    }
   }, [lease, name]);
-  return html`<div data-trust="panel-content" class="v-term" ref=${term}>${problem ? html`<p class="v-term-note" role="status">${problem}</p>` : null}<pre ref=${pre} class="v-pre"></pre></div>`;
+  const reading = mode === "reading";
+  // A full-screen CLI's Log link is a bar above the terminal, not over it: its first row is never covered.
+  return html`<div class="v-term-box">
+    ${noScrollback && logLink ? html`<p class="v-term-logbar"><a class="v-term-log" href=${logLink.href}>${logLink.text}<${Icon} name="forward" size=${14} /></a></p>` : null}
+    <div data-trust="panel-content" class=${`v-term${reading ? " is-reading" : ""}`} ref=${term} tabindex="0" aria-label=${tn(reading ? "readingEarlier" : "earlierHint")}>${problem ? html`<p class="v-term-note" role="status">${problem}</p>` : null}<pre ref=${pre} class="v-pre"></pre></div>
+    ${historyNote ? html`<p class="v-term-history-note" role="status">${historyNote}</p>` : null}
+    ${mode === "follow" && !noScrollback ? html`<button type="button" class="v-term-earlier btn btn-sm" title=${tn("earlierHint")} onClick=${() => loadEarlier.current && loadEarlier.current()}><${Icon} name="up" size=${14} />${tn("earlier")}</button>` : null}
+    ${reading ? html`<button type="button" class=${`v-term-latest btn btn-sm${newBelow ? " has-new" : ""}`} onClick=${() => follow.current && follow.current()}>${newBelow ? html`<span class="v-term-new">${tn("newBelow")} · </span>` : null}${tn("jumpLatest")}<${Icon} name="down" size=${14} /></button>` : null}
+  </div>`;
 }
 
 // The advance of one monospace cell as a fraction of font-size, measured once on this page.