@songsid/agend 2.1.12 → 2.2.0-alpha.2

package/dist/ui/chat-thread.js

@@ -0,0 +1,246 @@
+// #1408 §0/§4: the conversation thread — the keyed DOM renderer #1307 and #1306 reviewed, now owned by the chat panel
+// through a ref. Preact never manages these children: a node here may hold a live preview iframe, and an iframe that
+// is moved or re-parented reloads. So:
+// - a new message is appended; a changed one (its ticks) is replaced; the rest are left alone — an opened code block
+//   stays open, a selection survives, where the reader scrolled stays theirs;
+// - before ONE node is replaced, moved or removed: AgendPreview.stopIn(that node) — frames elsewhere keep running;
+// - when the whole thread goes (the chat left, another instance opened): AgendPreview.stopAll("leave").
+// Unrelated updates (a new message, another message's tick) stop nothing (#1306 §6.2, #1408 §4).
+import "./chat-render.js";
+import "./preview.js";
+
+const R = () => globalThis.AgendChatRender;
+const P = () => globalThis.AgendPreview;
+const COPY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+
+/** Escapes & " ' < >: safe for text and inside a quoted attribute. */
+export function escAttr(s) { return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
+export const msgKey = (x) => `${x.boot}-${x.id}`;
+
+/**
+ * Bind a renderer to `list` (the thread element) inside `scroller`. opts: { t, tf, isUser(x), onJump({show, unseen}),
+ * setPreviewOptIn(on), copyText(text) → Promise<boolean>, download(code), panel? }. panel (#1481): { shown() → the card
+ * key the side panel shows, or null; open(spec, { run }) } — without it a card has no "Open in panel".
+ */
+export function createThread(list, scroller, opts) {
+  const nodes = new Map();          // key → { html, node }
+  let msgs = [];
+  let unseen = 0;
+  // The reader is at the newest message. While pinned, content that grows after it was drawn — an image loading, a
+  // preview card, the composer growing — keeps the view at the bottom (#1269); a reader who scrolled up is never moved.
+  // Only a move UP unpins: the browser's own scroll anchoring also fires scroll events when content grows (the view
+  // moves down or stays), and those must not count as the reader leaving the bottom. Reaching the bottom pins again.
+  let pinned = true;
+  let lastTop = 0;
+  const cardRefresh = new WeakMap(); // card node → re-read availability (weak: a card that left takes its source with it)
+  const tr = opts.t, trf = opts.tf;
+  const stopIn = (node) => (P() ? P().stopIn(node) : []);
+
+  const TICKS = () => ({ queued: tr("chat.tick_queued"), processing: tr("chat.tick_processing"), delivered: tr("chat.tick_delivered"), failed: tr("chat.tick_failed"), cancelled: tr("chat.tick_cancelled") });
+
+  function msgHtml(x) {
+    const u = opts.isUser(x);
+    const time = x.ts ? new Date(x.ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";
+    // renderMarkdown escapes the whole text before it adds any tag of its own (chat-render.js).
+    const ticks = u && x.delivery ? R().deliveryHtml(x.delivery, TICKS()) : "";
+    const tools = u ? "" : `<div class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
+    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span><span class="time">${time}</span>${ticks}</div><div class="body"><div class="md">${R().renderMarkdown(x.text, x.role === "agent" ? { htmlCards: true } : undefined)}</div>${R().attachmentsHtml(x.attachments)}</div>${tools}</div>`;
+  }
+  function msgNode(html, x, stoppedKeys) {
+    const tpl = list.ownerDocument.createElement("template");
+    tpl.innerHTML = html;
+    const node = tpl.content.firstElementChild;
+    decorateCode(node);
+    if (x) decorateHtmlCards(node, x, stoppedKeys || []);
+    return node;
+  }
+
+  // Code blocks: a header (language, Wrap, Copy); a long one is folded until opened. Built from nodes.
+  function decorateCode(root) {
+    const doc = list.ownerDocument;
+    for (const pre of root.querySelectorAll(".md pre")) {
+      const box = doc.createElement("div"); box.className = "codeblock";
+      const head = doc.createElement("div"); head.className = "cb-head";
+      const lang = doc.createElement("span"); lang.className = "cb-lang"; lang.textContent = pre.dataset.lang || "text";
+      const wrap = doc.createElement("button"); wrap.type = "button"; wrap.className = "chip-btn"; wrap.dataset.act = "toggleWrap"; wrap.textContent = tr("chat.wrap");
+      const copy = doc.createElement("button"); copy.type = "button"; copy.className = "chip-btn"; copy.dataset.act = "copyCode"; copy.textContent = tr("chat.copy");
+      head.append(lang, wrap, copy);
+      pre.replaceWith(box); box.append(head, pre);
+      const lines = R().lineCount(pre.textContent);
+      if (lines > R().CODE_FOLD_LINES) {
+        box.classList.add("folded");
+        const more = doc.createElement("button"); more.type = "button"; more.className = "cb-more"; more.dataset.act = "toggleFold";
+        more.dataset.lines = String(lines); more.textContent = trf("chat.showAll", lines);
+        box.append(more);
+      }
+    }
+  }
+
+  // HTML cards (#1306): each ```html fence of a server-marked agent message gets a card under its code block. Building
+  // a card makes no frame; Preview does (AgendPreview.start → mountPreview).
+  function decorateHtmlCards(node, x, stoppedKeys) {
+    const doc = list.ownerDocument;
+    const fences = R().htmlFences(x.text);
+    for (const ph of node.querySelectorAll(".html-card[data-card]")) {
+      const n = Number(ph.dataset.card), fence = fences[n];
+      if (!fence) continue;
+      const key = `${msgKey(x)}:f${n}`;
+      ph.textContent = "";
+      if (ph.classList.contains("truncated") || !fence.terminated) {
+        const note = doc.createElement("div"); note.className = "pv-note"; note.textContent = tr("chat.pvTruncated"); ph.append(note);
+        continue;
+      }
+      const el = (tag, cls, text) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
+      const head = el("div", "pv-head");
+      const label = el("span", "pv-label", tr("chat.pvHtml"));
+      const run = el("button", "btn btn-sm pv-run", tr("chat.pvPreview")); run.type = "button";
+      const stopB = el("button", "btn btn-sm pv-stop", tr("chat.pvStop")); stopB.type = "button"; stopB.hidden = true;
+      const dl = el("button", "btn btn-sm btn-ghost pv-dl", tr("chat.pvDownload")); dl.type = "button";
+      const panel = opts.panel || null;
+      const toPanel = panel ? el("button", "btn btn-sm btn-ghost pv-open", tr("chat.pvOpenPanel")) : null;
+      if (toPanel) toPanel.type = "button";
+      const menu = el("details", "pv-menu");
+      const sum = el("summary", null, "⋯"); sum.title = tr("chat.pvMenu"); sum.setAttribute("aria-label", tr("chat.pvMenu"));
+      const optB = el("button", "chip-btn pv-opt"); optB.type = "button";
+      const neverB = el("button", "chip-btn pv-never"); neverB.type = "button";
+      menu.append(sum, optB, neverB);
+      head.append(label, run, stopB, ...(toPanel ? [toPanel] : []), dl, menu);
+      const note = el("div", "pv-note");
+      const banner = el("div", "pv-banner", P().BANNER); banner.hidden = true;
+      const holder = el("div", "pv-holder");
+      ph.append(head, note, banner, holder);
+      let state = "idle";
+      const refresh = (reason) => {
+        const a = P().availability();
+        const going = state === "starting" || state === "running";
+        const inPanel = !!panel && panel.shown() === key;   // #1481: the panel shows this block; the card points there
+        run.hidden = !a.ok || going || inPanel;
+        if (toPanel) toPanel.hidden = inPanel;
+        stopB.hidden = !going;
+        banner.hidden = !going;
+        note.textContent = reason != null ? reason : going ? (state === "starting" ? tr("chat.pvStarting") : "") : inPanel ? tr("chat.pvInPanel") : a.ok ? "" : a.reason;
+        optB.textContent = P().optedIn() ? tr("chat.pvDisallow") : tr("chat.pvAllow");
+        neverB.textContent = P().never() ? tr("chat.pvNeverUndo") : tr("chat.pvNever");
+      };
+      const ui = { state: (name, reason) => { state = name === "starting" || name === "running" ? name : "idle"; refresh(reason || null); } };
+      run.onclick = () => P().start(key, holder, fence.code, ui);
+      stopB.onclick = () => P().stop(key, "stopped", "");
+      // A running preview moves: it stops here and starts in the panel (the click that ran it). An idle one opens the
+      // panel with its own Preview to click.
+      if (toPanel) toPanel.onclick = () => {
+        const moving = P().running(key);
+        if (moving) P().stop(key, "stopped", "");
+        panel.open({ key, instance: x.instance, msgKey: msgKey(x), n, code: fence.code, sender: x.sender, ts: x.ts }, { run: moving });
+      };
+      dl.onclick = () => opts.download(fence.code);
+      optB.onclick = () => { menu.open = false; opts.setPreviewOptIn(!P().optedIn()); };
+      neverB.onclick = () => { menu.open = false; P().setNever(!P().never()); refreshCards(); };
+      cardRefresh.set(ph, refresh);
+      refresh(stoppedKeys.includes(key) ? tr("chat.pvChanged") : null);
+    }
+  }
+  /** Re-read this device's preview choice on every card in this thread. */
+  function refreshCards() {
+    for (const node of list.querySelectorAll(".html-card[data-card]")) { const f = cardRefresh.get(node); if (f) f(); }
+  }
+
+  const nearBottom = () => R().isNearBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight);
+  function reportJump() { opts.onJump({ show: !nearBottom(), unseen }); }
+  function toBottom() { scroller.scrollTop = scroller.scrollHeight; pinned = true; lastTop = scroller.scrollTop; }
+  // Sizes change without a scroll event (layout after the render): follow them while pinned.
+  const resized = () => { if (pinned && !nearBottom()) toBottom(); reportJump(); };
+  const ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
+  if (ro) { ro.observe(list); ro.observe(scroller); }
+
+  /** Draw `next` (this instance's messages). `restore`: the scroll position to return to (null = the bottom). */
+  function render(next, renderOpts = {}) {
+    const stick = pinned || nearBottom();
+    msgs = next || [];
+    if (!msgs.length) {
+      for (const v of nodes.values()) stopIn(v.node);
+      nodes.clear();
+      list.textContent = "";
+      opts.onEmpty(true);
+      return;
+    }
+    opts.onEmpty(false);
+    const keep = new Set(msgs.map(msgKey));
+    for (const [k, v] of nodes) if (!keep.has(k)) { stopIn(v.node); v.node.remove(); nodes.delete(k); }
+    let prev = null, added = 0;
+    for (const x of msgs) {
+      const key = msgKey(x), html = msgHtml(x);
+      let have = nodes.get(key);
+      if (!have || have.html !== html) {
+        const stopped = have ? stopIn(have.node) : [];
+        const node = msgNode(html, x, stopped);
+        if (have) have.node.replaceWith(node); else added++;
+        have = { html, node }; nodes.set(key, have);
+      }
+      const want = prev ? prev.nextSibling : list.firstChild;
+      // A node already in the list is being moved: its preview stops first. A new node (still in its template) has none.
+      if (have.node !== want) { if (have.node.parentNode === list) stopIn(have.node); list.insertBefore(have.node, want); }
+      prev = have.node;
+    }
+    if ("restore" in renderOpts) {
+      unseen = 0;
+      if (renderOpts.restore == null) toBottom();
+      else { scroller.scrollTop = renderOpts.restore; pinned = nearBottom(); lastTop = scroller.scrollTop; }
+    } else if (stick) toBottom();
+    else unseen += added;
+    reportJump();
+  }
+
+  function onScroll() {
+    const bottom = nearBottom(), top = scroller.scrollTop;
+    if (bottom) pinned = true;
+    else if (top < lastTop) pinned = false;
+    lastTop = top;
+    if (bottom) unseen = 0;
+    reportJump();
+    return bottom ? null : scroller.scrollTop;
+  }
+  function jumpLatest() { toBottom(); unseen = 0; reportJump(); }
+  /** Show one message (the panel's "from …" link, #1481): scrolled into view and briefly marked. */
+  function reveal(key) {
+    const have = nodes.get(key); if (!have) return false;
+    if (typeof have.node.scrollIntoView === "function") have.node.scrollIntoView({ block: "center" });
+    have.node.classList.add("flash");
+    setTimeout(() => { have.node.classList.remove("flash"); }, 1600);
+    return true;
+  }
+
+  async function copyFrom(button, text) {
+    const ok = await opts.copyText(text);
+    if (button.classList.contains("icon-only")) {
+      button.classList.add(ok ? "done" : "fail");
+      button.title = ok ? tr("chat.copied") : tr("chat.copyFailed"); button.setAttribute("aria-label", button.title);
+      setTimeout(() => { button.classList.remove("done", "fail"); button.title = tr("chat.copyMessage"); button.setAttribute("aria-label", button.title); }, 1200);
+      return;
+    }
+    const was = button.dataset.label || button.textContent; button.dataset.label = was;
+    button.textContent = ok ? tr("chat.copied") : tr("chat.copyFailed");
+    setTimeout(() => { button.textContent = was; }, 1200);
+  }
+  /** The thread's own buttons (Copy, Wrap, fold), delegated from the thread element. */
+  function onClick(e) {
+    const el = e.target && e.target.closest ? e.target.closest("[data-act]") : null;
+    if (!el || !list.contains(el)) return;
+    const act = el.dataset.act;
+    if (act === "copyMsg") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) copyFrom(el, x.text); }
+    else if (act === "copyCode") { const pre = el.closest(".codeblock")?.querySelector("pre"); if (pre) copyFrom(el, pre.textContent); }
+    else if (act === "toggleFold") {
+      const box = el.closest(".codeblock"); if (!box) return;
+      const folded = box.classList.toggle("folded");
+      el.textContent = folded ? trf("chat.showAll", el.dataset.lines) : tr("chat.showLess");
+    } else if (act === "toggleWrap") opts.toggleWrap();
+  }
+
+  /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
+  function dispose() {
+    if (ro) ro.disconnect();
+    if (P()) P().stopAll("leave");
+    nodes.clear();
+  }
+
+  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, dispose, nodes, get unseen() { return unseen; } };
+}

package/dist/ui/chat-tour.js

@@ -0,0 +1,116 @@
+// #1366: the first sign-in tour, in the app shell (#1408). Shown once on this device (agend_tour_done), dismissed by
+// Got it, Skip or Esc, and replayed from Tour in the sidebar. A card that outlines one thing at a time: no overlay,
+// nothing blocked, and no style attribute — the outline is a class (#1300). When this browser's storage cannot be read
+// it is not shown at all: a tour that comes back on every load is worse than none.
+//
+// Esc order: the phone drawer covers the card, so it closes first (the shell); then the tour; only then may Esc reach
+// the chat and stop a reply. The Esc that closed the tour is spent: its key repeats (a held key) must not go on to stop
+// the agent (#1369 review).
+import { t, onLang } from "/assets/app-i18n.js";
+import { shellStore, closeDrawer } from "/assets/app-shell.js";
+import "./chat-strings.js";
+
+const TOUR_KEY = "agend_tour_done";
+const byId = (id) => document.getElementById(id);
+// On a phone the instance list is in the closed drawer: the tour outlines what opens it (☰), and for "needs you" the
+// bottom tab's badge (#1408 step 5: retargeted to the app's shell).
+const narrow = () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches;
+const STEPS = [
+  { text: "chat.tour1", spot: () => (narrow() ? byId("sbOpen") : byId("instanceList")) },
+  { text: "chat.tour2", spot: () => byId("main") },
+  { text: "chat.tour3", spot: () => byId("attachBtn") },
+  { text: "chat.tour4", spot: () => { const stop = byId("stopBtn"); return stop && !stop.hidden ? stop : byId("sendBtn"); } },
+  { text: "chat.tour5", spot: () => (narrow() ? document.querySelector(".tabs .tab-badge") || byId("sbOpen")
+    : document.querySelector(".badge-await") || byId("instanceList")) },
+];
+let at = -1, spot = null, returnTo = null, escHeld = false, installed = false;
+
+export function tourDone() { try { return localStorage.getItem(TOUR_KEY) === "1"; } catch { return true; } }
+export function tourStep() { return at; }
+
+export function startTour() {
+  // Replayed from the drawer: the drawer closes first (focus goes back to ☰), so the card is seen.
+  closeDrawer();
+  if (at < 0) returnTo = document.activeElement;
+  show(0);
+}
+
+/** The current step's outline follows a redraw (a new badge, Send swapped for Stop reply) — same card, same focus. */
+export function refreshTourSpot() {
+  if (at < 0) return;
+  const next = STEPS[at].spot() || null;
+  if (next === spot && (!next || next.classList.contains("tour-spot"))) return;
+  if (spot) spot.classList.remove("tour-spot");
+  spot = next;
+  if (spot) spot.classList.add("tour-spot");
+}
+
+function show(i) {
+  if (i < 0 || i >= STEPS.length) return;
+  at = i;
+  if (spot) spot.classList.remove("tour-spot");
+  spot = STEPS[i].spot() || null;
+  if (spot) spot.classList.add("tour-spot");
+  let card = byId("tour");
+  if (!card) {
+    card = document.createElement("section"); card.id = "tour"; card.className = "tour";
+    card.setAttribute("role", "dialog"); card.setAttribute("aria-labelledby", "tourTitle");
+    card.addEventListener("click", onCardClick);
+    document.body.appendChild(card);
+  }
+  card.textContent = "";
+  const title = document.createElement("h2"); title.id = "tourTitle"; title.textContent = t("chat.tourTitle");
+  const text = document.createElement("p"); text.className = "tour-text"; text.setAttribute("aria-live", "polite"); text.textContent = t(STEPS[i].text);
+  const foot = document.createElement("div"); foot.className = "tour-foot";
+  const count = document.createElement("span"); count.className = "tour-count"; count.textContent = t("chat.tourStep", i + 1, STEPS.length);
+  const button = (label, act, arg, cls) => {
+    const b = document.createElement("button"); b.type = "button"; b.className = `btn btn-sm ${cls}`; b.dataset.tour = act;
+    if (arg != null) b.dataset.arg = String(arg);
+    b.textContent = t(label); return b;
+  };
+  foot.append(count);
+  if (i < STEPS.length - 1) foot.append(button("chat.tourSkip", "end", null, "btn-ghost"));
+  if (i > 0) foot.append(button("chat.tourBack", "move", -1, "btn-ghost"));
+  const next = i < STEPS.length - 1 ? button("chat.tourNext", "move", 1, "btn-primary") : button("chat.tourDone", "end", null, "btn-primary");
+  foot.append(next);
+  card.append(title, text, foot);
+  next.focus();
+}
+
+function onCardClick(e) {
+  const b = e.target && e.target.closest ? e.target.closest("[data-tour]") : null;
+  if (!b) return;
+  if (b.dataset.tour === "move") show(at + Number(b.dataset.arg));
+  else endTour();
+}
+
+export function endTour() {
+  try { localStorage.setItem(TOUR_KEY, "1"); } catch { /* this page only */ }
+  at = -1;
+  if (spot) spot.classList.remove("tour-spot");
+  spot = null;
+  const card = byId("tour"); if (card) card.remove();
+  if (returnTo && document.contains(returnTo) && typeof returnTo.focus === "function") returnTo.focus();
+  returnTo = null;
+}
+
+/** Capture-phase Esc: it runs before the shell's own key handling, so a tour Esc never reaches the chat. */
+export function onTourKey(e) {
+  if (e.key !== "Escape" || e.isComposing) return;
+  if (escHeld) {
+    if (e.repeat) { e.preventDefault(); e.stopPropagation(); return; }
+    escHeld = false;
+  }
+  if (shellStore.get().drawer) return;          // the drawer is on top: the shell closes it first
+  if (at >= 0) { e.preventDefault(); e.stopPropagation(); endTour(); escHeld = true; }
+}
+
+/** Once per page: the key handler, the language follow-up, and the first showing on a device that has not seen it. */
+export function installTour() {
+  if (installed) return;
+  installed = true;
+  document.addEventListener("keydown", onTourKey, true);
+  onLang(() => { if (at >= 0) show(at); });
+  // Shown first on the chat (it points at the chat's own controls), never over View or another panel.
+  if (!tourDone() && /^\/ui(\/chat\/|$)/.test(location.pathname)) setTimeout(startTour, 0);
+}

package/dist/ui/fleet-cache.js

@@ -0,0 +1,168 @@
+// #1468: Fleet → Cache (/ui/fleet/cache) — how often each instance's prompt cache expires between requests, what
+// that costs, and whether keeping it warm would pay off. Behind the session gate (/ui/js/), imported by the Fleet
+// panel. Read-only (Discord-first): it recommends, it changes nothing.
+//
+// One GET /ui/cache?window=… per opening or per choice of window (a person's navigation); no timer re-reads it
+// (#1374). While the server is still reading transcripts the page says so and offers Refresh.
+import { html } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Empty } from "/assets/ui-states.js";
+import { Icon } from "/assets/ui-icons.js";
+
+register("cache", {
+  en: {
+    title: "Cache", w24h: "24 h", w7d: "7 days", w30d: "30 days", window: "Window",
+    fleetExpiry: "Expiry cost", fleetSaving: "Keep-warm would save", fleetRecommended: "Recommended", ofN: "{0} of {1}",
+    pricesNote: "List prices checked {0}.", quotaNote: "Subscriptions: Anthropic and OpenAI do not publish how cache reads weigh against a plan's quota, so savings are exact at list price and an estimate in quota terms.",
+    estimateNote: "Estimate: Codex does not record cache writes, so a write is taken as the request's uncached input.",
+    notPricedNote: "Some models are not in the price table; those instances are compared in input-price units.",
+    scanning: "Still reading transcripts — {0} left. Refresh to see more.", scanningFirst: "Reading transcripts for the first time — Refresh to see more.", refresh: "Refresh",
+    keepWarm: "Keep warm", leaveOff: "Leave off", estimate: "estimate", notPriced: "not priced",
+    requests: "Requests", pastTtl: "Past the TTL ({0})", expired: "Expired (rewrote)", rewritten: "Tokens rewritten",
+    expiryCost: "Expiry cost", share: "{0} of its cost", pings: "Keep-warm pings", pingsAfter: "{0} after its last request",
+    pingCost: "Ping cost", net: "Net with keep-warm", gaps: "Gaps between requests", ttlLine: "TTL {0}",
+    quiet: "Too little activity in this window to tell.",
+    neverExpired: "No gap outlasted the {0} cache.", survived: "{0} gaps outlasted the {1} TTL, but the cache was still there.",
+    onlyIdle: "No request ever came back to an expired cache: each session went quiet for good. Keep-warm would only send {0} pings nobody reads.",
+    saves: "Often idle past the {0} TTL and then used again: keep-warm would save {1} ({2} of the expiry cost).",
+    costsMore: "Keep-warm would send about {0} pings per expired request — it would cost {1} more than it saves.",
+    costsMoreUnits: "Keep-warm would send about {0} pings per expired request — it would cost more than it saves.",
+    unavailable: "Not available", creditBilled: "credit-billed; no cache data", unsupported: "no cache data from this CLI", noData: "no requests read yet",
+    shared: "shares its working directory with {0}; their transcripts cannot be told apart",
+    empty: "No instances", emptyHint: "Instances show here once the fleet has them.",
+    b0: "≤5m", b1: "≤30m", b2: "≤1h", b3: "≤2h", b4: "≤6h", b5: "≤24h", b6: ">24h", tokensUnit: "input-token equivalents",
+  },
+  "zh-TW": {
+    title: "快取", w24h: "24 小時", w7d: "7 天", w30d: "30 天", window: "期間",
+    fleetExpiry: "過期成本", fleetSaving: "保溫可省", fleetRecommended: "建議保溫", ofN: "{1} 個中的 {0} 個",
+    pricesNote: "牌價查證日期：{0}。", quotaNote: "訂閱方案：Anthropic 與 OpenAI 未公布快取讀取如何計入方案額度，因此節省金額以牌價計算為準，換算成額度則是估算。",
+    estimateNote: "估算：Codex 不記錄快取寫入，寫入量以該次請求未命中快取的輸入估算。",
+    notPricedNote: "有些模型不在價目表中，這些 instance 以「輸入價格單位」比較。",
+    scanning: "仍在讀取 transcript——還剩 {0}。重新整理可看到更多。", scanningFirst: "第一次讀取 transcript 中——重新整理可看到更多。", refresh: "重新整理",
+    keepWarm: "建議保溫", leaveOff: "不需保溫", estimate: "估算", notPriced: "未定價",
+    requests: "請求數", pastTtl: "超過 TTL（{0}）", expired: "已過期（重寫）", rewritten: "重寫的 token",
+    expiryCost: "過期成本", share: "占其成本 {0}", pings: "保溫 ping 次數", pingsAfter: "其中 {0} 次在最後一次請求之後",
+    pingCost: "ping 成本", net: "保溫後淨額", gaps: "請求間隔", ttlLine: "TTL {0}",
+    quiet: "這段期間活動太少，無法判斷。",
+    neverExpired: "沒有任何間隔超過 {0} 的快取時效。", survived: "有 {0} 個間隔超過 {1} TTL，但快取仍在。",
+    onlyIdle: "沒有任何請求在快取過期後回來使用：每個 session 閒置後就不再使用。保溫只會送出 {0} 次沒人讀的 ping。",
+    saves: "常閒置超過 {0} TTL 後又再使用：保溫可省 {1}（過期成本的 {2}）。",
+    costsMore: "每次過期約需送 {0} 次 ping——保溫的花費比省下的多 {1}。",
+    costsMoreUnits: "每次過期約需送 {0} 次 ping——保溫的花費比省下的多。",
+    unavailable: "不提供", creditBilled: "以 credit 計費，沒有快取資料", unsupported: "這個 CLI 沒有快取資料", noData: "尚未讀到任何請求",
+    shared: "與 {0} 共用工作目錄，無法分辨各自的 transcript",
+    empty: "沒有 instance", emptyHint: "fleet 有 instance 後會顯示在這裡。",
+    b0: "≤5分", b1: "≤30分", b2: "≤1時", b3: "≤2時", b4: "≤6時", b5: "≤24時", b6: ">24時", tokensUnit: "輸入 token 當量",
+  },
+});
+const tc = (k, ...v) => t(`cache.${k}`, ...v);
+
+export const CACHE_WINDOWS = ["24h", "7d", "30d"];
+const EDGES = [300, 1800, 3600, 7200, 21600, 86400];
+
+export function money(usd) {
+  if (!(usd > 0)) return "$0";
+  if (usd < 0.01) return "<$0.01";
+  return usd >= 100 ? `$${Math.round(usd).toLocaleString("en-US")}` : `$${usd.toFixed(2)}`;
+}
+export function tokens(n) {
+  if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${Math.round(n / 1e3)}k`;
+  return String(Math.round(n));
+}
+export function bytes(n) { return n >= 1e9 ? `${(n / 1e9).toFixed(1)} GB` : n >= 1e6 ? `${Math.round(n / 1e6)} MB` : `${Math.max(1, Math.round(n / 1e3))} KB`; }
+export function ttlText(sec) { return sec >= 3600 ? `${sec / 3600} h` : `${Math.round(sec / 60)} min`; }
+const pct = (x) => `${x >= 0.1 ? Math.round(x * 100) : (x * 100).toFixed(1)}%`;
+
+/** The one line under an instance's recommendation. */
+export function reasonText(a) {
+  const r = a.recommendation, ttl = ttlText(a.ttlSec);
+  if (r.reason === "quiet") return tc("quiet");
+  if (r.reason === "never_expired") {
+    if (a.sim.pastTtl) return tc("survived", a.sim.pastTtl, ttl);
+    return a.sim.tailPings ? tc("onlyIdle", a.sim.tailPings.toLocaleString("en-US")) : tc("neverExpired", ttl);
+  }
+  if (r.reason === "saves") return tc("saves", ttl, a.priced ? money(a.sim.net) : `${tokens(a.sim.net * 1e6)} ${tc("tokensUnit")}`, a.sim.expiryCost > 0 ? pct(a.sim.net / a.sim.expiryCost) : "—");
+  return a.priced ? tc("costsMore", r.pingsPerExpiry ?? 0, money(-a.sim.net)) : tc("costsMoreUnits", r.pingsPerExpiry ?? 0);
+}
+
+/** Gap histogram: one bar per bucket (square-root scale: a thousand short gaps must not flatten the few long ones). */
+function Histogram({ buckets, ttlSec }) {
+  const W = 280, H = 84, top = 14, base = 66, slot = W / buckets.length, bw = slot - 8;
+  const max = Math.max(1, ...buckets);
+  const ttlAt = EDGES.indexOf(ttlSec);
+  const label = `${tc("gaps")}: ${buckets.map((n, i) => `${tc(`b${i}`)} ${n}`).join(", ")}`;
+  return html`<svg class="ch-hist" viewBox=${`0 0 ${W} ${H}`} role="img" aria-label=${label} preserveAspectRatio="none">
+    ${buckets.map((n, i) => {
+      const h = n ? Math.max(2, Math.round((base - top) * Math.sqrt(n / max))) : 0;
+      const x = i * slot + 4;
+      return html`<g key=${i} class=${ttlAt >= 0 && i > ttlAt ? "ch-col past" : "ch-col"}>
+        <rect x=${x} y=${base - h} width=${bw} height=${h} rx="2" />
+        <text class="ch-n" x=${x + bw / 2} y=${base - h - 3} text-anchor="middle">${n || ""}</text>
+        <text class="ch-l" x=${x + bw / 2} y=${H - 4} text-anchor="middle">${tc(`b${i}`)}</text></g>`;
+    })}
+    ${ttlAt >= 0 ? html`<g class="ch-ttl"><line x1=${(ttlAt + 1) * slot} x2=${(ttlAt + 1) * slot} y1="4" y2=${base} />
+      <text x=${(ttlAt + 1) * slot + 3} y="11">${tc("ttlLine", ttlText(ttlSec))}</text></g>` : null}
+  </svg>`;
+}
+
+function Metric({ label, value, sub }) {
+  return html`<div class="ch-metric"><dt>${label}</dt><dd>${value}${sub ? html`<span class="ch-sub">${sub}</span>` : null}</dd></div>`;
+}
+
+function InstanceCard({ r }) {
+  const a = r.analysis, s = a.sim, $ = (v) => (a.priced ? money(v) : "—");
+  const on = a.recommendation.on;
+  return html`<article class=${`ch-card${on ? " on" : ""}`} aria-labelledby=${`ch-${r.name}`}>
+    <header class="ch-head">
+      <div class="ch-id"><h3 id=${`ch-${r.name}`} class="mono">${r.name}</h3>
+        <span class="ch-models">${r.backend}${a.models.length ? ` · ${a.models.join(", ")}` : ""}</span></div>
+      <span class=${`ch-rec${on ? " on" : ""}`}>${on ? tc("keepWarm") : tc("leaveOff")}</span>
+    </header>
+    <p class="ch-reason">${reasonText(a)}${a.estimate ? html` <span class="ch-tag">${tc("estimate")}</span>` : null}${a.priced ? null : html` <span class="ch-tag">${tc("notPriced")}</span>`}</p>
+    <dl class="ch-metrics">
+      <${Metric} label=${tc("requests")} value=${a.requests.toLocaleString("en-US")} />
+      <${Metric} label=${tc("pastTtl", ttlText(a.ttlSec))} value=${s.pastTtl} />
+      <${Metric} label=${tc("expired")} value=${s.expired} />
+      <${Metric} label=${tc("rewritten")} value=${tokens(s.rewriteTokens)} />
+      <${Metric} label=${tc("expiryCost")} value=${$(s.expiryCost)} sub=${a.share != null && a.priced && s.expiryCost > 0 ? tc("share", pct(a.share)) : null} />
+      <${Metric} label=${tc("pings")} value=${(s.pings + s.tailPings).toLocaleString("en-US")} sub=${s.tailPings ? tc("pingsAfter", s.tailPings) : null} />
+      <${Metric} label=${tc("pingCost")} value=${$(s.pingCost + s.tailCost)} />
+      <${Metric} label=${tc("net")} value=${a.priced ? `${s.net >= 0 ? "+" : "−"}${money(Math.abs(s.net))}` : "—"} />
+    </dl>
+    <${Histogram} buckets=${a.gapBuckets} ttlSec=${a.ttlSec} />
+  </article>`;
+}
+
+/** The tab's body. `report`: GET /ui/cache's answer; `win`/`setWin`: the window; `refresh`: read again. */
+export function CacheReport({ report, win, setWin, refresh }) {
+  const ok = report.instances.filter((r) => r.status === "ok")
+    .sort((x, y) => (y.analysis.priced - x.analysis.priced) || (y.analysis.sim.expiryCost - x.analysis.sim.expiryCost));
+  const rest = report.instances.filter((r) => r.status !== "ok");
+  const f = report.fleet;
+  const anyEstimate = ok.some((r) => r.analysis.estimate);
+  return html`<div class="ch">
+    <div class="ch-bar">
+      <div class="seg-inline" role="group" aria-label=${tc("window")}>${CACHE_WINDOWS.map((w) => html`<button key=${w} type="button"
+        class=${`btn btn-sm${w === win ? " btn-primary" : ""}`} aria-pressed=${w === win ? "true" : "false"} onClick=${() => setWin(w)}>${tc(`w${w}`)}</button>`)}</div>
+      ${!report.scanning.caughtUp || report.scanning.pendingBytes > 0 ? html`<div class="ch-scan" role="status"><span>${report.scanning.pendingBytes > 0
+        ? tc("scanning", bytes(report.scanning.pendingBytes)) : tc("scanningFirst")}</span>
+        <button type="button" class="btn btn-sm" onClick=${refresh}><${Icon} name="restart" size=${14} />${tc("refresh")}</button></div>` : null}
+    </div>
+    ${report.instances.length ? html`<section class="ch-fleet card">
+      <${Metric} label=${tc("fleetExpiry")} value=${money(f.expiryCost)} />
+      <${Metric} label=${tc("fleetSaving")} value=${money(f.saving)} />
+      <${Metric} label=${tc("fleetRecommended")} value=${tc("ofN", f.recommended, f.analysed)} />
+    </section>` : html`<${Empty} icon="chart" title=${tc("empty")} hint=${tc("emptyHint")} />`}
+    <div class="ch-notes note">
+      <p>${tc("pricesNote", report.pricesChecked)} ${tc("quotaNote")}</p>
+      ${anyEstimate ? html`<p>${tc("estimateNote")}</p>` : null}
+      ${f.priced ? null : html`<p>${tc("notPricedNote")}</p>`}
+    </div>
+    <div class="ch-cards">${ok.map((r) => html`<${InstanceCard} key=${r.name} r=${r} />`)}</div>
+    ${rest.length ? html`<ul class="rows ch-rest">${rest.map((r) => html`<li key=${r.name} class="row-item">
+      <span class="grow strong mono">${r.name}</span><span class="muted">${r.backend} · ${r.status === "no_data" ? tc("noData")
+        : `${tc("unavailable")} (${r.status === "credit_billed" ? tc("creditBilled") : r.status === "shared" ? tc("shared", (r.with || []).join(", ")) : tc("unsupported")})`}</span></li>`)}</ul>` : null}
+  </div>`;
+}