@songsid/agend 2.3.4-beta.1 → 2.3.4-beta.10

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

@@ -27,6 +27,9 @@
 // - every reconnect catches up once the new stream speaks (catchUp(), with the page's cursor — #1566/#1578), so what
 //   was said meanwhile is shown, once.
 // - a 401 is the session ending: nothing is retried (agend-auth.js says so).
+// - M-2260: a catch-up after a long absence carries only the newest messages (the server's budget) and says so
+//   (`truncated`): "gap" tells the chats to read their newest history again — it converges like a reload, never by
+//   asking a slow link for hours of replies in one answer.
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
@@ -79,6 +82,22 @@ export function createStream(opts) {
     try { return Object.freeze({ source: "sse", receivedAt: now() }); } catch { return undefined; }
   }
   function setConnection(c) { if (state.connection !== c) { state.connection = c; emit("connection", c); } }
+
+  // M-2260: a tab the browser froze for hours gets every heartbeat it missed at once when it wakes — thousands of status
+  // frames, each a whole snapshot, each redrawing the page (seconds of work before the newest message shows). A status
+  // that comes after a quiet moment is delivered at once, as before; more statuses before the next turn of the page's
+  // task loop replace the waiting one, delivered then — or before any other event, so the order of events never changes.
+  // The next turn is a 0 ms timer: in a hidden tab the browser may run it late (a minute when throttled) — a status
+  // then waits that long while nobody looks (Needs you, the title's count and notifications ride `needs`, never held).
+  let pendingStatus = null, statusBurst = false;
+  const turn = () => env.setTimeout(endBurst, 0);
+  function endBurst() { statusBurst = false; flushStatus(); }
+  function flushStatus() { const d = pendingStatus; pendingStatus = null; if (d !== null) live("status", d, null); }
+  function liveStatus(data) {
+    if (statusBurst) { pendingStatus = data; return; }
+    statusBurst = true; turn();
+    live("status", data, null);
+  }
   function setHydration(h) { if (state.hydration !== h) { state.hydration = h; emit("hydration", h); } }
 
   /** A live event: delivered now, or held (in order) while a catch-up snapshot is on its way. */
@@ -115,6 +134,7 @@ export function createStream(opts) {
     if (polling) { if (!opts.join) pollAgain = true; return polling; }
     const mine = ++pollSeq, ep = readEpoch;
     let status = 0;                                  // this read's HTTP status — its own, never another read's
+    flushStatus();                                   // a status that came before this read is older than its snapshot
     if (sse && !held) held = [];
     let limit = null;
     const read = (async () => {
@@ -128,6 +148,9 @@ export function createStream(opts) {
         if (d.status) emit("status", d.status);
         for (const m of d.messages || []) emit("message", m, { source: "poll" });
         if (typeof d.cursor === "string") state.cursor = d.cursor;
+        // M-2260: the server sent only the newest messages of a long absence (its catch-up budget): the chats read their
+        // newest history again, as a reload would, instead of this read carrying everything that was missed.
+        if (d.truncated === true) emit("gap", {});
         if (Array.isArray(d.deliveries)) emit("deliveries", d.deliveries);
         if (Array.isArray(d.prompts)) emit("prompts", d.prompts);
         if (Array.isArray(d.reply_buttons)) for (const u of d.reply_buttons) emit("reply_buttons", u);   // #1266
@@ -157,6 +180,7 @@ export function createStream(opts) {
   }
   /** #1580 review: the page lets go of everything in flight — reads, the queued poll, the catch-up and its retry wait. */
   function cancelWork() {
+    pendingStatus = null;                            // a page let go of (suspend, end, close) draws no waiting status
     readEpoch++; epoch++;
     pollSeq++; polling = null; pollAgain = false; held = null;
     env.clearTimeout(retryTimer); retryTimer = null;
@@ -225,6 +249,8 @@ export function createStream(opts) {
         else alive();
         // #1823: a clock reading is about now, not about order: it is never held behind a catch-up (it would be stale).
         if (name === "clock") { emit(name, data); return; }
+        if (name === "status") { liveStatus(data); return; }
+        flushStatus();                                   // a status waiting goes first: the order never changes
         live(name, data, name === "message" ? e.lastEventId : null, ingress);
       });
     }

package/dist/ui/shared/app.css

@@ -623,9 +623,21 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    Its class is `status-line`, never `status`: that is the header's inline-flex badge class, and on a message it turned
    the meta, body and tools into one flex row. */
 .msg.status-line { align-self: stretch; font-size: var(--fs-sm); color: var(--text-3); }
-.msg.status-line .st-text { white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--s-3); }
-.msg.status-line.folded .st-text { max-height: 9em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+/* Each line is a row (.st-ln); the line breaks between rows are text for copying, not extra rows. */
+.msg.status-line .st-text { border-left: 2px solid var(--border); padding-left: var(--s-3); }
+.msg.status-line .st-ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg.status-line .st-ln:empty::after { content: " "; }
+/* Folded (the user, hmsg-d6ac6dfb): two lines — the header and the first line — each one row with an ellipsis; the
+   button sits at the end of line 2. The text opens it too. */
+.msg.status-line.folded .body { display: flex; align-items: flex-end; gap: var(--s-2); }
+.msg.status-line.folded .st-text { flex: 1 1 auto; min-width: 0; }
+.msg.status-line.folded.overflows .st-text { cursor: pointer; }
+/* Its control only while something is hidden (two short rows that fit: plain, no control). */
+.msg.status-line.folded:not(.overflows) .st-more { display: none; }
+.msg.status-line.folded .st-ln { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
+.msg.status-line.folded .st-ln:nth-child(n+3) { display: none; }
 .msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
+.msg.status-line.folded .st-more { flex: none; padding: 0 var(--s-2) 0 0; white-space: nowrap; }
 .msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
 /* #2147: bounded stock toolbar paint, including fixed descendants. Padding preserves focus outlines. */
@@ -1323,6 +1335,21 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 /* #1844 Fleet overview → Docs: the arrow says "opens a new tab". */
 .hd-docs .hd-ext { color: var(--text-3); }
 .v-term { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; background: #000000; position: relative; }
+/* M-2262: the terminal's box — the scrolling terminal, and its scrollback controls over it (they never scroll with it). */
+/* --v-term-rev: the View's mark (panel-view.js VIEW_REV): a tab still on an older stylesheet reads this one again. */
+.v-term-box { --v-term-rev: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
+.v-term:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.v-term-earlier, .v-term-latest { position: absolute; right: var(--s-4); z-index: 2; display: inline-flex; align-items: center; gap: 4px; opacity: .88; }
+.v-term-earlier { top: var(--s-2); }
+.v-term-latest { bottom: var(--s-3); opacity: 1; }
+.v-term-logbar { flex-shrink: 0; margin: 0; padding: var(--s-2) var(--s-4); background: #111111; border-bottom: 1px solid #2a2a2a; text-align: right; font-size: var(--fs-sm); }
+.v-term-logbar a { display: inline-flex; align-items: center; gap: 4px; color: #9cc8ff; text-decoration: underline; text-underline-offset: 2px; min-height: 28px; }
+@media (pointer: coarse) { .v-term-logbar a { min-height: 44px; } }
+.v-term-latest.has-new { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); }
+.v-term-earlier:hover, .v-term-earlier:focus-visible { opacity: 1; }
+.v-term-history-note { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 2; margin: 0; padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: rgba(20, 20, 20, .92); border: 1px solid #3a3a3a; color: #e0e0e0; font-size: var(--fs-sm); }
+@media (max-width: 600px) { .v-term-history-note { left: var(--s-4); right: var(--s-4); } }
+@media (pointer: coarse) { .v-term-earlier, .v-term-latest { min-height: 44px; padding-left: var(--s-3); padding-right: var(--s-3); } }
 .v-pre { margin: 0; min-width: 100%; min-height: 100%; font-family: var(--font-mono); line-height: 1.2; white-space: pre; color: #d0d0d0; }
 .v-pre .ansi[data-b] { font-weight: var(--fw-bold); }
 /* #1582: faint text (SGR 2) — a CLI's suggestion or placeholder, never input — stays faint here. */
@@ -1365,6 +1392,11 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-stale { font-weight: var(--fw-semibold); }
 .u-stale-detail { color: var(--text-3); font-size: var(--fs-xs); }
 .u-sub { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+/* #3066 §1: a weekly quota's measured 100% under its bar, and its notes (the fleet-only limit always). */
+.u-cap { margin-top: 4px; font-size: var(--fs-xs); }
+.u-cap-line { color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.u-cap-wait .u-cap-line { color: var(--text-3); }
+.u-cap-note { color: var(--text-3); overflow-wrap: anywhere; }
 .u-err { color: var(--warn); font-size: var(--fs-sm); }
 .u-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 /* #1673: the usage rail beside the page on a wide screen (header-tools.js UsageRail; shown only at min-width 1200px). */
@@ -1860,6 +1892,12 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oo-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
 .oo-canvas.hot { cursor: pointer; }
 /* The canvas controls, as the org chart canvas's (.oc-zoom, .oc-mini): over the stage's corners. */
+/* #2946: the key to the items carried between desks — a strip under the bar, as the org chart's (.oc-legend). */
+.oo-key { font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 10px; }
+.oo-key-rows { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; }
+.oo-key-row { display: inline-flex; align-items: center; gap: 6px; }
+.oo-key-icon { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
+.oo-key-btn.on { border-color: var(--accent); }
 .oo-zoom { z-index: 6; }
 .oo-zoom .icon-btn { color: var(--text); }
 /* The overview's box (left, top, width, height) is set by the page, inside the stage and scaled to it (miniBox). */
@@ -2078,6 +2116,16 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
 .us-est { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }
 .us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+/* #3066 §3: a row's numbers carry small marks (◐ partly priced, † the CLI's amount, ≈ estimated) and "—" with a reason,
+   each said in its tooltip; the key under the table names only the marks that appear. */
+.us-mark { margin-left: 2px; color: var(--text-3); font-size: var(--fs-xs); cursor: help; }
+.us-mark.us-approx { margin-left: 0; margin-right: 1px; }
+.us-none { cursor: help; }
+.us-key { margin-top: 6px; }
+/* #3066 §2: each model's speed after the first token. */
+.us-speed { margin-top: 12px; }
+.us-speed .row-item { gap: 8px; flex-wrap: wrap; }
+.us-speed .num { font-variant-numeric: tabular-nums; }
 .us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
 .us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
 .us-scroll { overflow-x: auto; max-width: 100%; }
@@ -2286,7 +2334,7 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .p-fleet > .seg, .p-settings > .seg,
 .p-fleet > .panel-body, .p-needs > .panel-body, .p-notices > .panel-body, .p-settings > .panel-body,
 .p-log > .panel-body, .p-details > .panel-body, .p-view > .panel-body,
-.p-log > .log-bar, .p-view > .v-term, .p-view > .v-id, .p-view > .v-watching { position: relative; z-index: 1; }
+.p-log > .log-bar, .p-view > .v-term-box, .p-view > .v-id, .p-view > .v-watching { position: relative; z-index: 1; }
 /* Keep the existing Apply bar's sticky behavior, in its own bounded stock band. */
 .p-settings > .s-pending { z-index: 1; }
 

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,84 @@ 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"]);
+/**
+ * Claude history in the View (view-history.js): the full-screen CLIs whose View shows their earlier conversation from
+ * their transcript, above the live screen. A server without it (an older one) leaves them as before: no scrollback.
+ */
+const TRANSCRIPT_HISTORY = new Set(["claude-code"]);
+/** How near the top (px) a history being read asks for the page before it. */
+const OLDER_AT_PX = 48;
+/**
+ * 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 keepsNone = FULL_SCREEN.has(backend) && !TRANSCRIPT_HISTORY.has(backend);
+  const [noScrollback, setNoScrollback] = useState(keepsNone);
+  const noScrollbackRef = useRef(keepsNone);
+  // Claude history in the View: the history shown while reading (view-history.js's createHistory), or null.
+  const transcript = useRef(null);
+  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 +347,72 @@ 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);
+  const olderPage = useRef(null);
   useEffect(() => {
     const reads = readStream(lease);
     const refresh = async () => {
@@ -263,15 +430,130 @@ 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
+      if (TRANSCRIPT_HISTORY.has(backend)) { await loadTranscript(from); return; }
+      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); } }
+    };
+    /**
+     * Claude history in the View: the conversation before the live screen, from the transcript (the renderer is its own
+     * lazy module), drawn above the screen as it is now — then reading, as for a scrollback. Older pages come as the
+     * person nears the top. A server without it: this CLI keeps no scrollback, as before.
+     */
+    const loadTranscript = async (from) => {
+      const back = () => { setMode(from); if (from === "follow") toBottom(); };
+      const screen = screenAt.current.drawn == null ? "" : screenAt.current.drawn;
+      setMode("loading"); setHistoryNote(tn("loadingEarlier"));
+      try {
+        const mod = await import("./view-history.js");
+        if (!lease.current() || modeRef.current !== "loading" || !pre.current) return;
+        let h = null;
+        h = mod.createHistory({ name, fetch: (u) => lease.fetch(u), alive: () => lease.current() && transcript.current === h,
+          doc: document, font: getComputedStyle(pre.current).fontFamily, cols: grid.current.cols });
+        transcript.current = h;
+        const got = await h.first(screen);
+        if (!lease.current() || modeRef.current !== "loading" || !pre.current || transcript.current !== h) return;
+        if (got.kind !== "ok") {
+          transcript.current = null;
+          if (got.kind === "unsupported") { noScrollbackRef.current = true; setNoScrollback(true); back(); setHistoryNote(tn("noEarlier"), true); return; }
+          back();
+          setHistoryNote(got.kind === "empty" ? tn("nothingEarlier") : got.status === 429 ? null : tn("earlierFailed"), true);
+          return;
+        }
+        screenAt.current.reading = screen; screenAt.current.history = true;
+        setNewBelow(screenAt.current.latest != null && !sameScreen(screen, screenAt.current.latest));
+        setMode("reading"); setHistoryNote(null);
+        draw(screen);                                     // the screen as it is (the one frame write), then the history above it
+        pre.current.insertBefore(h.root, pre.current.firstChild);
+        fit();
+        const box = term.current;
+        if (box) {
+          const px = parseFloat(getComputedStyle(pre.current).fontSize);
+          const lineH = Number.isFinite(px) && px > 0 ? px * 1.2 : 16;
+          // The history's last lines and the divider right above the screen.
+          box.scrollTop = Math.max(0, box.scrollHeight - box.clientHeight - lineH * 3);
+        }
+      } catch { if (lease.current() && modeRef.current === "loading") { transcript.current = null; back(); setHistoryNote(tn("earlierFailed"), true); } }
+    };
+    /** The page before the history shown, above it — where the person is stays where it is. */
+    let olderBusy = false;
+    olderPage.current = async () => {
+      const h = transcript.current, box = term.current;
+      if (olderBusy || !h || !box || modeRef.current !== "reading" || !screenAt.current.history) return;
+      olderBusy = true;
+      const fromEnd = box.scrollHeight - box.scrollTop;
+      const capped = !h.hasOlder();
+      if (!capped) setHistoryNote(tn("loadingEarlier"));
+      try {
+        const got = await h.older();
+        if (!lease.current() || transcript.current !== h) return;
+        box.scrollTop = Math.max(0, box.scrollHeight - fromEnd);
+        if (!capped) setHistoryNote(got.kind === "failed" ? tn("earlierFailed") : null, got.kind === "failed");
+      } finally { olderBusy = false; }
+    };
+    follow.current = () => {
+      if (modeRef.current === "follow") return;
+      transcript.current = null;
+      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 +564,48 @@ 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(); };
+      // Claude's history being read, at (or near) its top: the page before it.
+      const nearTop = () => modeRef.current === "reading" && screenAt.current.history && transcript.current && box.scrollTop <= OLDER_AT_PX;
+      lease.on(box, "wheel", (e) => { gesture(); if (e.deltaY < 0 && mayLoad()) loadEarlier.current(); else if (e.deltaY < 0 && nearTop()) olderPage.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(); }
+        else if (y - touchY > 24 && nearTop()) { touchY = null; olderPage.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 ((e.key === "PageUp" || e.key === "ArrowUp" || e.key === "Home") && nearTop()) olderPage.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(); else if (nearTop()) olderPage.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.

package/dist/ui/shared/usage-dialog.js

@@ -64,6 +64,22 @@ function expiryText(iso) {
   if (!(ms > 0)) return "";
   return usageText("", { key: "usage.ticket_expiry", args: [`${at.getMonth() + 1}/${at.getDate()}`, usageDuration(ms)] });
 }
+/**
+ * #3066 §1: a server line ({ text, i18n }) in this page's language — or, when this tab's strings predate the key (a
+ * stale tab), the server's own English text, never the bare key.
+ */
+export function capacityLine(x) {
+  if (!x || typeof x.text !== "string") return "";
+  const key = x.i18n && typeof x.i18n.key === "string" ? `view.${x.i18n.key}` : null;
+  return key && t(key) !== key ? usageText(x.text, x.i18n) : x.text;
+}
+/** #3066 §1: a weekly quota's measured 100% (or why not yet), and the limit it always carries: only this fleet counts. */
+function UsageCapacity({ c }) {
+  const notes = Array.isArray(c.notes) ? c.notes : [];
+  return html`<div class=${`u-cap${c.status === "ok" ? "" : " u-cap-wait"}`}>
+    <div class="u-cap-line">${capacityLine(c.line)}</div>
+    ${notes.map((n, i) => html`<div key=${i} class="u-cap-note">${capacityLine(n)}</div>`)}</div>`;
+}
 export function UsageMetric({ m }) {
   const bar = useRef(null);
   const label = usageText(m.label, m.labelI18n);
@@ -78,7 +94,8 @@ export function UsageMetric({ m }) {
     const sub = [note, resetText(m.resetsAt)].filter(Boolean).join(" · ");
     return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span>${word ? html`<span class=${`u-status ${cls}`}>${word}</span>` : null}
       <span class=${`u-pct ${cls}`}>${pct.toFixed(0)}<span class="u-unit">%</span></span></div>
-      <div class="u-meter"><div ref=${bar} class=${`u-fill ${cls}`}></div></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
+      <div class="u-meter"><div ref=${bar} class=${`u-fill ${cls}`}></div></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}
+      ${m.capacity ? html`<${UsageCapacity} c=${m.capacity} />` : null}</div>`;
   }
   if (m.type === "dollars") {
     const val = m.limit ? `$${(m.used ?? 0).toFixed(2)} / $${m.limit.toFixed(2)}` : `$${(m.used ?? 0).toFixed(2)}`;