@songsid/agend 2.3.4-beta.8 → 2.3.4

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

@@ -282,6 +282,13 @@ const REDRAWS_IN_PLACE = new Set(["grok"]);
 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
@@ -304,8 +311,11 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
   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 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) => {
@@ -402,6 +412,7 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
   // 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 () => {
@@ -439,6 +450,7 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
       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;
@@ -477,8 +489,65 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
         }
       } 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(); }
@@ -501,7 +570,9 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
       // 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 });
+      // 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) => {
@@ -509,15 +580,17 @@ function Terminal({ name, lease, density, every = 800, backend = "", signedIn =
         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(); return; }
+        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);

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

package/dist/ui/shared/view-history.css

@@ -0,0 +1,17 @@
+/* Claude history in the View (view-history.js): its own stylesheet, linked by the module itself, so a tab opened before
+   an upgrade (an app.css without these rules) draws it the same. Colours come from the live screen, set per element. */
+.v-pre .vh { white-space: pre-wrap; overflow-wrap: anywhere; }
+.vh-line { padding-left: 2ch; text-indent: -2ch; min-height: 1.2em; }
+.vh-line.vh-res { padding-left: 5ch; text-indent: -5ch; }
+.vh-step + .vh-step { margin-top: 1.2em; }
+.vh-b { font-weight: 700; }
+.vh-diff { display: inline-block; width: 100%; vertical-align: top; text-indent: 0; }
+.vh-dim { opacity: .6; }
+.vh-more { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-indent: 0; cursor: pointer;
+  text-decoration: underline dotted; text-underline-offset: 2px; }
+.vh-more:disabled { cursor: progress; opacity: .7; }
+.vh-more:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
+.vh-divider, .vh-cap { font-family: var(--font-ui, sans-serif); font-size: .85em; color: #8a8a8a; }
+.vh-divider { display: flex; align-items: center; gap: 1ch; margin: .8em 0 .6em; white-space: nowrap; }
+.vh-divider::before, .vh-divider::after { content: ""; flex: 1; border-top: 1px dashed #3c3c3c; }
+.vh-cap { white-space: normal; padding-bottom: .8em; }

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

@@ -0,0 +1,438 @@
+// Claude history in the View (the user, hmsg-a8947a2c / hmsg-b4c7ccdf; leader cid-claude-history-build). Claude Code
+// draws on the alternate screen, so tmux keeps nothing above it: scrolling up in its View shows the conversation's
+// earlier part from its transcript (GET /api/pane/<name>?transcript=1, view-history.ts), drawn like Claude's own
+// Ctrl+O view — "❯" prompts on their band, "●" replies and tool calls, "⎿" results, diffs, long output folded — directly
+// above the live screen, under a faint divider.
+//
+// The look is sampled from the live screen the View already shows (samplePalette): the prompt band, the bullet and
+// result glyphs, the tool and diff colours, as this Claude version draws them; Claude 2.1.318's own values when the
+// screen has none of them. A glyph the page's fonts lack falls back (⏺ → ●, ⎿ → └, ❯ → >).
+//
+// Loaded on first use by panel-view.js (a lazy module of its own). A tab opened before an upgrade runs it with the old
+// shell, so it imports nothing but app-i18n.js's register/t (in every shell since #1408), registers its own words and
+// links its own stylesheet (/assets/view-history.css): nothing it needs lives in a long-lived module. A server without
+// the history (an older one answers the pane's text) makes `first()` say `unsupported`: the View stays as it was.
+import { register, t } from "./app-i18n.js";
+
+register("viewHistory", {
+  en: {
+    divider: "History above",
+    more: "… +{0} lines (click to expand)",
+    moreFailed: "Could not load the full text.",
+    cut: "… {0} more characters not shown",
+    capped: "Only the latest {0} steps are shown here.",
+  },
+  "zh-TW": {
+    divider: "以上是對話紀錄",
+    more: "… 還有 {0} 行（點一下展開）",
+    moreFailed: "無法載入完整內容。",
+    cut: "… 還有 {0} 個字元未顯示",
+    capped: "這裡只顯示最近 {0} 則紀錄。",
+  },
+});
+const w = (key, ...values) => t(`viewHistory.${key}`, ...values);
+
+/** About this many steps are kept on the page; older pages are not read past it. */
+export const HISTORY_STEP_CAP = 1000;
+
+// ── The palette, sampled from the live screen ──
+const BASE = ["#000000", "#cd3131", "#0dbc79", "#e5e510", "#2472c8", "#bc3fbc", "#11a8cd", "#e5e5e5"];
+const BRIGHT = ["#666666", "#f14c4c", "#23d18b", "#f5f543", "#3b8eea", "#d670d6", "#29b8db", "#ffffff"];
+function xterm256(n) {
+  if (n < 8) return BASE[n];
+  if (n < 16) return BRIGHT[n - 8];
+  if (n < 232) { n -= 16; const r = Math.floor(n / 36), g = Math.floor((n % 36) / 6), b = n % 6; const v = (x) => (x ? x * 40 + 55 : 0); return `rgb(${v(r)},${v(g)},${v(b)})`; }
+  const l = (n - 232) * 10 + 8; return `rgb(${l},${l},${l})`;
+}
+/** Claude Code 2.1.318's own look (captured from a real pane, dark theme): what is used when the screen shows none. */
+export const DEFAULT_PALETTE = Object.freeze({
+  promptGlyph: "❯", promptBand: xterm256(237), promptFg: xterm256(246), promptText: xterm256(231),
+  bullet: "●", replyFg: xterm256(231), toolFg: xterm256(114), failedFg: xterm256(203), runningFg: xterm256(246),
+  resultGlyph: "⎿", resultFg: xterm256(246),
+  delFg: xterm256(167), delBg: xterm256(52), addFg: xterm256(77), addBg: xterm256(22), errorFg: xterm256(203),
+});
+
+/** The screen's text as lines of runs: { text, fg, bg, bold } (colours as CSS, null when unset). */
+export function ansiRuns(text) {
+  const lines = [[]];
+  let fg = null, bg = null, bold = false, reverse = false;
+  const push = (chunk) => {
+    const parts = chunk.split("\n");
+    parts.forEach((part, i) => {
+      if (i > 0) lines.push([]);
+      if (!part) return;
+      let f = typeof fg === "number" ? (bold && fg < 8 ? BRIGHT[fg] : BASE[fg]) : fg;
+      let b = typeof bg === "number" ? BASE[bg] : bg;
+      if (reverse) [f, b] = [b, f];
+      lines[lines.length - 1].push({ text: part, fg: f, bg: b, bold });
+    });
+  };
+  const re = /\x1b\[([0-9;]*)m/g;
+  let last = 0, m;
+  while ((m = re.exec(text)) !== null) {
+    push(text.slice(last, m.index));
+    last = re.lastIndex;
+    const codes = m[1].split(";").filter((x) => x !== "").map(Number);
+    if (codes.length === 0) codes.push(0);
+    for (let i = 0; i < codes.length; i++) {
+      const c = codes[i];
+      if (c === 0) { fg = bg = null; bold = reverse = false; }
+      else if (c === 1) bold = true;
+      else if (c === 22) bold = false;
+      else if (c === 7) reverse = true;
+      else if (c === 27) reverse = false;
+      else if (c === 39) fg = null;
+      else if (c === 49) bg = null;
+      else if (c >= 30 && c <= 37) fg = c - 30;
+      else if (c >= 90 && c <= 97) fg = BRIGHT[c - 90];
+      else if (c >= 40 && c <= 47) bg = c - 40;
+      else if (c >= 100 && c <= 107) bg = BRIGHT[c - 100];
+      else if (c === 38 || c === 48) {
+        let col = null;
+        if (codes[i + 1] === 5) { col = xterm256(codes[i + 2]); i += 2; }
+        else if (codes[i + 1] === 2) { col = `rgb(${codes[i + 2] || 0},${codes[i + 3] || 0},${codes[i + 4] || 0})`; i += 4; }
+        if (c === 38) fg = col; else bg = col;
+      }
+    }
+  }
+  push(text.slice(last));
+  return lines;
+}
+
+const PROMPT_GLYPHS = "❯>›";
+const BULLETS = "●⏺";
+const RESULT_GLYPHS = "⎿└";
+/**
+ * How this Claude draws its conversation, read off the live screen (ANSI, as the View fetched it): each value found
+ * replaces the default; the most frequent wins where a screen shows several (a failed tool's red bullet among green).
+ */
+export function samplePalette(screen) { return sampleScreen(screen).palette; }
+/** samplePalette, and which of its values the screen gave (the rest are the defaults) — for the version audit. */
+export function sampleScreen(screen) {
+  const p = { ...DEFAULT_PALETTE };
+  const found = new Set();
+  const set = (k, v) => { if (v) { p[k] = v; found.add(k); } };
+  if (typeof screen !== "string" || !screen) return { palette: p, found: [] };
+  const tally = { toolFg: new Map(), replyFg: new Map() };
+  const count = (map, v) => { if (v) map.set(v, (map.get(v) || 0) + 1); };
+  let banded = false, glyphSeen = false;
+  for (const runs of ansiRuns(screen)) {
+    const textOf = runs.map((r) => r.text).join("");
+    const lead = textOf.length - textOf.trimStart().length;
+    // Find the run holding column `col` (and the offset in it).
+    const at = (col) => { let n = 0; for (const r of runs) { if (col < n + r.text.length) return r; n += r.text.length; } return null; };
+    const first = textOf.charAt(lead);
+    // A prompt: its glyph then a space, on a band (a past prompt) — or bare (the composer: the glyph only).
+    if (PROMPT_GLYPHS.includes(first) && textOf.charAt(lead + 1) === " " && !banded) {
+      const g = at(lead);
+      if (g && g.bg) {
+        banded = true; glyphSeen = true;
+        set("promptGlyph", first); set("promptBand", g.bg); set("promptFg", g.fg);
+        const rest = runs.slice(runs.indexOf(g) + 1).find((r) => r.text.trim());
+        if (rest) set("promptText", rest.fg);
+      } else if (!glyphSeen) { glyphSeen = true; set("promptGlyph", first); }
+      continue;
+    }
+    // A bullet at the line's start: a tool call ("● Name(" with the name bold) or a reply.
+    if (lead === 0 && BULLETS.includes(first) && textOf.charAt(1) === " ") {
+      set("bullet", first);
+      const g = at(0), next = at(2);
+      const tool = !!(next && next.bold) && /^. [^(]+\(/.test(textOf);
+      count(tool ? tally.toolFg : tally.replyFg, g && g.fg);
+      continue;
+    }
+    // A result: two spaces, its glyph.
+    if (lead === 2 && RESULT_GLYPHS.includes(first)) {
+      set("resultGlyph", first);
+      const g = at(2); if (g) set("resultFg", g.fg);
+      continue;
+    }
+    // A diff row: a line number then - or +, on a coloured background.
+    const row = /^\s+\d+\s?([-+])/.exec(textOf);
+    if (row) {
+      const g = at(textOf.indexOf(row[1], lead));
+      if (g && g.bg) { if (row[1] === "-") { set("delBg", g.bg); set("delFg", g.fg); } else { set("addBg", g.bg); set("addFg", g.fg); } }
+    }
+  }
+  const top = (map) => { let best = null, n = 0; for (const [k, v] of map) if (v > n) { best = k; n = v; } return best; };
+  set("toolFg", top(tally.toolFg));
+  set("replyFg", top(tally.replyFg));
+  return { palette: p, found: [...found] };
+}
+
+// ── Glyphs the page's fonts lack ──
+const FALLBACK = { "⏺": "●", "●": "*", "⎿": "└", "└": "|", "❯": ">", "›": ">" };
+const glyphCache = new Map();
+/**
+ * Whether `ch` draws as itself in `font` (a CSS font-family list): drawn next to a code point no font has, the two must
+ * differ. No canvas (a test page): assumed drawn.
+ */
+export function hasGlyph(ch, font, doc = typeof document !== "undefined" ? document : null) {
+  const key = `${ch}\u0000${font}`;
+  if (glyphCache.has(key)) return glyphCache.get(key);
+  let ok = true;
+  try {
+    const canvas = doc && doc.createElement ? doc.createElement("canvas") : null;
+    const ctx = canvas && typeof canvas.getContext === "function" ? canvas.getContext("2d") : null;
+    if (ctx && typeof ctx.getImageData === "function") {
+      canvas.width = 40; canvas.height = 40;
+      const draw = (c) => { ctx.clearRect(0, 0, 40, 40); ctx.font = `32px ${font}`; ctx.fillStyle = "#000"; ctx.textBaseline = "top"; ctx.fillText(c, 2, 2); return ctx.getImageData(0, 0, 40, 40).data; };
+      const a = draw(ch), none = draw("\u{10FFFD}");
+      ok = false;
+      for (let i = 3; i < a.length; i += 4) if (a[i] !== none[i]) { ok = true; break; }
+    }
+  } catch { ok = true; }
+  glyphCache.set(key, ok);
+  return ok;
+}
+/** The glyph as drawn on this page: itself, or its fallback when the fonts lack it. */
+export function drawable(ch, font, doc) {
+  let g = ch;
+  for (let i = 0; i < 3 && g && !hasGlyph(g, font, doc); i++) g = FALLBACK[g] || g;
+  return g;
+}
+
+// ── Which steps the live screen already shows ──
+// Text a needle is compared by: no whitespace (a wrap moves it) and no markdown marks (Claude draws them away).
+const squash = (s) => String(s).replace(/\x1b\[[0-9;]*m/g, "").replace(/[\s*_`#>│]/g, "");
+/**
+ * What of a prompt or a reply is looked for on the screen: its WHOLE text, normalised (#3069 review r3, Prism P2-2 — a
+ * fixed prefix, however long, is no proof: it can occur inside another message). None for a tool: Claude may draw it
+ * summarised.
+ */
+function needle(step) {
+  if (step.kind !== "user" && step.kind !== "assistant") return null;
+  const s = squash(step.body || "");
+  return s.length >= 4 ? s : null;
+}
+/**
+ * The steps before the live screen, matched conservatively (#3069 review, Prism P2-2): walking back from the newest,
+ * each prompt and reply must be found WHOLE on the screen, BEFORE the place the newer one was found — one occurrence
+ * never proves two messages, and a shared opening is never taken for the same message. The first one not found that
+ * way (a message only partly shown included), and everything older, is history. Tool calls go with their neighbours. Unsure means shown again: a
+ * step the screen shows may come twice — never one it does not show not at all.
+ */
+export function beforeScreen(steps, screen) {
+  const text = squash(screen || "");
+  let cut = steps.length, limit = text.length;
+  for (let i = steps.length - 1; i >= 0; i--) {
+    const n = needle(steps[i]);
+    if (n === null) continue;
+    const at = limit - n.length >= 0 ? text.lastIndexOf(n, limit - n.length) : -1;
+    if (at < 0) break;
+    limit = at;
+    cut = i;
+  }
+  return steps.slice(0, cut);
+}
+
+// ── Drawing ──
+const TOOL_WORDS = { Edit: "Update", MultiEdit: "Update", Grep: "Search", Glob: "Search", WebFetch: "Fetch", WebSearch: "Web Search", TodoWrite: "Update Todos", Agent: "Task", NotebookEdit: "Edit Notebook" };
+/** Claude's word for a tool, as its screen shows it ("Update" for Edit; "server - tool (MCP)" for an MCP tool). */
+export function toolWord(tool) {
+  const mcp = /^mcp__(.+?)__(.+)$/.exec(tool || "");
+  if (mcp) return `${mcp[1]} - ${mcp[2]} (MCP)`;
+  return TOOL_WORDS[tool] || tool || "?";
+}
+
+function el(doc, tag, cls, text) {
+  const e = doc.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+}
+function span(doc, text, color, extra) {
+  const s = el(doc, "span", extra || null, text);
+  if (color) s.style.color = color;                     // CSSOM, never a style attribute (#1300)
+  return s;
+}
+/** A Read result's "12\tcode" lines as the terminal shows them ("  12  code"). */
+const unTab = (text, tool) => (tool === "Read" ? text.replace(/^(\d+)\t/gm, (_, n) => `${n.padStart(4)}  `) : text.replace(/\t/g, "  "));
+
+/** One step's block. `onMore`: the folded step, clicked. */
+export function drawStep(doc, step, pal, glyphs, onMore) {
+  const box = el(doc, "div", "vh-step");
+  box.dataset.step = step.id;
+  const line = (cls) => box.appendChild(el(doc, "div", `vh-line${cls ? ` ${cls}` : ""}`));
+  if (step.kind === "user") {
+    (step.body || "").split("\n").forEach((text, i) => {
+      const l = line("vh-prompt");
+      l.style.background = pal.promptBand;
+      l.appendChild(span(doc, i === 0 ? `${glyphs.prompt} ` : "  ", pal.promptFg));
+      l.appendChild(span(doc, text || " ", pal.promptText));
+    });
+    if (step.cut) line("vh-dim").textContent = `  ${w("cut", step.cut)}`;
+    return box;
+  }
+  if (step.kind === "assistant") {
+    (step.body || "").split("\n").forEach((text, i) => {
+      const l = line();
+      l.appendChild(i === 0 ? span(doc, `${glyphs.bullet} `, pal.replyFg) : span(doc, "  "));
+      l.appendChild(span(doc, text || " "));
+    });
+    if (step.cut) line("vh-dim").textContent = `  ${w("cut", step.cut)}`;
+    return box;
+  }
+  if (step.kind === "tool") {
+    const head = line();
+    const fg = step.status === "failed" ? pal.failedFg : step.status === "running" || step.status === "interrupted" ? pal.runningFg : pal.toolFg;
+    head.appendChild(span(doc, `${glyphs.bullet} `, fg));
+    head.appendChild(span(doc, toolWord(step.tool), null, "vh-b"));
+    head.appendChild(span(doc, step.subject ? `(${step.subject})` : ""));
+  }
+  // The result: "  ⎿  " then its first line; the rest under it — or the edit's diff rows.
+  const resultColor = step.kind === "error" || step.status === "failed" ? pal.errorFg : null;
+  let firstRow = true;
+  const mark = () => { const s = firstRow ? span(doc, `  ${glyphs.result}  `, pal.resultFg) : span(doc, "     "); firstRow = false; return s; };
+  if (step.diff) {
+    for (const h of step.diff) {
+      for (const [rows, sign, bg, fg] of [[h.del, "-", pal.delBg, pal.delFg], [h.add, "+", pal.addBg, pal.addFg]]) {
+        for (const text of rows) {
+          const l = line("vh-res");
+          l.appendChild(mark());
+          const row = span(doc, `${sign} ${text}`, fg, "vh-diff");
+          row.style.background = bg;
+          l.appendChild(row);
+        }
+      }
+    }
+  } else if (step.body != null && step.body !== "") {
+    for (const text of unTab(step.body, step.tool).split("\n")) {
+      const l = line("vh-res");
+      l.appendChild(mark());
+      l.appendChild(span(doc, text || " ", resultColor));
+    }
+  }
+  if (step.more) {
+    const l = line("vh-res");
+    l.appendChild(span(doc, "     "));
+    const b = el(doc, "button", "vh-more", w("more", step.more));
+    b.type = "button";
+    b.style.color = pal.resultFg;
+    b.addEventListener("click", () => onMore && onMore(step, box, b));
+    l.appendChild(b);
+  } else if (step.cut) line("vh-res vh-dim").textContent = `     ${w("cut", step.cut)}`;
+  return box;
+}
+
+/**
+ * The history above one agent's live screen. `fetch(url)` reads under the View's lease; `alive()` is false once the
+ * View moved on (nothing is drawn then). `root` is the block panel-view.js puts above the screen it shows.
+ */
+export function createHistory({ name, fetch, alive = () => true, doc = document, font = "monospace", cols = 0 }) {
+  ensureStylesheet(doc);
+  const root = el(doc, "div", "vh");
+  root.setAttribute("data-trust", "panel-content");
+  if (cols > 0) root.style.width = `${cols}ch`;
+  const pages = el(doc, "div", "vh-pages");
+  const capNote = el(doc, "div", "vh-cap");
+  const divider = el(doc, "div", "vh-divider", w("divider"));
+  divider.setAttribute("role", "separator");
+  root.append(pages, divider);
+  let pal = DEFAULT_PALETTE, glyphs = null;
+  let key = null, before = null, shown = 0, busy = false;
+  const base = `/api/pane/${encodeURIComponent(name)}?transcript=1`;
+  const read = async (query) => {
+    const r = await fetch(`${base}${query}`);
+    // An older server answers the pane's text here: not this history.
+    const type = r.headers && typeof r.headers.get === "function" ? String(r.headers.get("Content-Type") || "") : "";
+    if (!r.ok) return { failed: true, status: r.status };
+    if (!type.includes("application/json")) return { unsupported: true };
+    const body = await r.json();
+    if (!body || body.view_history !== 1) return { unsupported: true };
+    return body;
+  };
+  const block = (steps, end) => {
+    const frag = doc.createDocumentFragment();
+    for (const s of steps) {
+      const b = drawStep(doc, s, pal, glyphs, more);
+      b.dataset.end = String(end);
+      frag.appendChild(b);
+    }
+    return frag;
+  };
+  async function more(step, box, button) {
+    if (button.disabled) return;
+    button.disabled = true;
+    try {
+      const body = await read(`&step=${encodeURIComponent(step.id)}&end=${encodeURIComponent(box.dataset.end)}&key=${encodeURIComponent(key || "")}`);
+      if (!alive()) return;
+      if (!body.supported || !body.step) throw new Error("gone");
+      const whole = drawStep(doc, body.step, pal, glyphs, more);
+      whole.dataset.end = box.dataset.end;
+      box.replaceWith(whole);
+    } catch {
+      if (!alive()) return;
+      button.disabled = false;
+      if (!box.querySelector(".vh-more-failed")) button.parentNode.insertBefore(span(doc, `  ${w("moreFailed")}`, pal.errorFg, "vh-more-failed"), button.nextSibling);
+    }
+  }
+  return {
+    root,
+    /** Older steps exist and the cap is not reached. */
+    hasOlder: () => before !== null && shown < HISTORY_STEP_CAP,
+    /**
+     * The newest page, minus what the live `screen` (ANSI) shows. "ok" | "empty" (nothing before the screen) |
+     * "unsupported" (no history here) | "failed" (with `status`).
+     */
+    async first(screen) {
+      pal = samplePalette(screen);
+      glyphs = { prompt: drawable(pal.promptGlyph, font, doc), bullet: drawable(pal.bullet, font, doc), result: drawable(pal.resultGlyph, font, doc) };
+      let body;
+      try { body = await read(""); } catch { return { kind: "failed", status: 0 }; }
+      if (body.failed) return { kind: "failed", status: body.status };
+      if (body.unsupported) return { kind: "unsupported" };
+      // No history here at all (not Claude, or no reader) — or none YET (a session that has written nothing so far):
+      // that one is only nothing earlier, asked again next time.
+      if (!body.supported) return { kind: body.reason === "unsupported" || body.reason === "unavailable" ? "unsupported" : "empty" };
+      key = body.key; before = body.before;
+      let steps = beforeScreen(body.steps || [], screen);
+      let end = body.end;
+      // Everything in the newest page is on the screen: the page before it is the history.
+      if (!steps.length && before !== null) {
+        let older;
+        try { older = await read(`&before=${before}&key=${encodeURIComponent(key)}`); } catch { older = { failed: true, status: 0 }; }
+        if (!older.failed && older.supported && !older.reset) { steps = older.steps || []; before = older.before; end = older.end; }
+      }
+      if (!alive()) return { kind: "failed", status: 0 };
+      if (!steps.length) return { kind: "empty" };
+      pages.replaceChildren(block(steps, end));
+      shown = steps.length;
+      return { kind: "ok" };
+    },
+    /** The page before what is shown, drawn above it. "ok" | "none" | "capped" | "failed". */
+    async older() {
+      if (busy) return { kind: "none" };
+      if (before === null) return { kind: "none" };
+      if (shown >= HISTORY_STEP_CAP) {
+        if (!capNote.isConnected) { capNote.textContent = w("capped", HISTORY_STEP_CAP); root.prepend(capNote); }
+        return { kind: "capped" };
+      }
+      busy = true;
+      try {
+        const body = await read(`&before=${before}&key=${encodeURIComponent(key || "")}`);
+        if (!alive()) return { kind: "failed" };
+        if (body.failed || body.unsupported || !body.supported) return { kind: "failed" };
+        // Another transcript now (a new session): what is shown stays; nothing older of it.
+        if (body.reset) { before = null; return { kind: "none" }; }
+        before = body.before;
+        const steps = body.steps || [];
+        if (steps.length) { pages.prepend(block(steps, body.end)); shown += steps.length; }
+        return { kind: "ok" };
+      } catch { return { kind: "failed" }; }
+      finally { busy = false; }
+    },
+  };
+}
+
+/** This module's own stylesheet, linked once (a tab opened before an upgrade has an app.css without these rules). */
+function ensureStylesheet(doc) {
+  try {
+    if (!doc.head || doc.querySelector('link[data-vh="1"]')) return;
+    const link = doc.createElement("link");
+    link.setAttribute("rel", "stylesheet");
+    link.setAttribute("href", "/assets/view-history.css");
+    link.setAttribute("data-vh", "1");
+    doc.head.appendChild(link);
+  } catch { /* the history still reads without it */ }
+}

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

@@ -154,6 +154,14 @@ register("view", {
   "usage.stale.transient": "not updated · cached at {0}",
   "usage.stale.error": "couldn't read · cached at {0}",
   "usage.metric.reset_since": "reset since {0}",
+  "usage.capacity.line": "100% ≈ {0} ({1}–{2}) · ≈ {3} tokens · from {4} weeks",
+  "usage.capacity.line_tokens": "100% ≈ {0} tokens ({1}–{2}) · from {3} weeks",
+  "usage.capacity.not_enough": "Not enough usage yet to measure 100% (Δ {0}% of 10%)",
+  "usage.capacity.only_agend": "Counts only this fleet's agents; use of the same account elsewhere makes this low.",
+  "usage.capacity.mixed": "Bases disagree — possibly used outside this fleet",
+  "usage.capacity.best_fit_api": "API-equivalent fits best: ±{0}% across {1} weeks",
+  "usage.capacity.best_fit_output": "Output tokens fit best: ±{0}% across {1} weeks",
+  "usage.capacity.best_fit_all": "All tokens fit best: ±{0}% across {1} weeks",
   "usage.error.http": "Usage request failed (HTTP {0}).",
   "usage.error.billing_http": "Billing request failed (HTTP {0}).",
   "usage.error.invalid_response": "Invalid response from usage endpoint.",
@@ -414,6 +422,14 @@ register("view", {
   "usage.stale.transient": "暫時無法更新 · 快取於 {0}",
   "usage.stale.error": "讀取失敗 · 快取於 {0}",
   "usage.metric.reset_since": "已於 {0} 重置",
+  "usage.capacity.line": "100% ≈ {0}（{1}–{2}）· 約 {3} token · 依 {4} 週",
+  "usage.capacity.line_tokens": "100% ≈ {0} token（{1}–{2}）· 依 {3} 週",
+  "usage.capacity.not_enough": "用量還不夠估算 100%（已用 Δ {0}%，需 10%）",
+  "usage.capacity.only_agend": "只計算這個 fleet 的 agent；同一帳號在別處的使用會讓這個值偏低。",
+  "usage.capacity.mixed": "各換算方式不一致——可能有 fleet 以外的使用",
+  "usage.capacity.best_fit_api": "「API 等值」最吻合：{1} 週內 ±{0}%",
+  "usage.capacity.best_fit_output": "「輸出 token」最吻合：{1} 週內 ±{0}%",
+  "usage.capacity.best_fit_all": "「全部 token」最吻合：{1} 週內 ±{0}%",
   "usage.error.http": "用量請求失敗（HTTP {0}）。",
   "usage.error.billing_http": "計費請求失敗（HTTP {0}）。",
   "usage.error.invalid_response": "用量端點回傳了無效資料。",