@songsid/agend 2.3.0-beta.22 → 2.3.0-beta.24

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

@@ -9,6 +9,7 @@
 // Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
+import { recordEdit } from "./text-undo.js";
 import { appStore, createStore, guestPage, useStore } from "./app-store.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
@@ -648,9 +649,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
         <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck=${false} placeholder=${tn("filterPh")} value=${f.q}
           onInput=${(e) => setNavFilter({ q: e.target.value })}
-          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); setNavFilter({ q: "" }); } }} />
+          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); recordEdit(e.target); setNavFilter({ q: "" }); } }} />
         ${f.q ? html`<button type="button" class="icon-btn v-filter-clear" aria-label=${tn("filterClear")} title=${tn("filterClear")}
-          onClick=${() => { setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
+          onClick=${() => { recordEdit(filterRef.current); setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
       </label>
       <div class="nav-facets">
         <div class="nav-facet-groups">

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

@@ -1,4 +1,4 @@
-// #1408 step 2: the View panel (/view, /view/<name>) — every agent's live terminal, its profile card, the AI usage
+// #1408 step 2: the View panel (/view, /view/<name>) — every agent's live terminal, its identity card, the AI usage
 // panel, in the app shell. Public (/assets/): under `web.view_access: open` an anonymous reader opens it in the
 // View-only shell, so nothing here needs a session to show, and the one write (Edit profile) asks for one.
 //
@@ -6,7 +6,7 @@
 // Everything recurring is a passive read (#1374) taken through the navigation's lease: the pane every 800 ms and the
 // roster every 5 s while the panel is mounted and the tab is visible, usage every 60 s while its dialog is open. They
 // stop when the panel goes.
-import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "./app-html.js";
+import { html, useEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { useLease } from "./app-ctx.js";
@@ -16,7 +16,7 @@ import { HeaderTools, VIEW_SCALE, textSizeStore } from "./header-tools.js";
 import { readStream } from "./read-stream.js";
 // The usage dialog's metric row lives with the dialog now (usage-dialog.js); re-exported for what imported it here.
 export { UsageMetric } from "./usage-dialog.js";
-import { backendLabel, modelText, STATUS_KEYS } from "./instance-nav.js";
+import { STATUS_KEYS } from "./instance-nav.js";
 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. */
@@ -189,7 +189,7 @@ export function ViewPanel({ route, navKey }) {
   else if (!name) body = html`<div data-trust="panel-content" class="panel-body"><${Skeleton} lines=${6} /></div>`;
   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 body = html`<${Terminal} key=${name} name=${name} lease=${lease} density=${density} />
-    <${Card} it=${it} viewOnly=${viewOnly} onEdit=${() => setDialog("edit")} />`;
+    <${ViewIdentity} it=${it} viewOnly=${viewOnly} onEdit=${() => setDialog("edit")} />`;
 
   return html`<div data-effect-panel="view" class="panel p-view">
     <${PanelHeader} title=${it ? (it.display_name || it.instance_name) : tn("title")}
@@ -287,33 +287,18 @@ function glyphRatio(pre) {
   return cellRatio || 0.6;
 }
 
-/** The profile card under the terminal: one line by default, the whole profile when opened. */
-function Card({ it, viewOnly, onEdit }) {
-  const [open, setOpen] = useState(stored("agend_view_card_expanded") === "1");
-  const avatar = useRef(null);
-  // The avatar is fetched once per instance (cache-busted then), not on every 5-second roster refresh.
-  useLayoutEffect(() => {
-    if (!avatar.current || !it.has_avatar) return;
-    avatar.current.src = `/api/avatar/${encodeURIComponent(it.instance_name)}?t=${Date.now()}`;
-  }, [it.instance_name, it.has_avatar]);
-  const initial = (it.display_name || it.instance_name || "?").trim().charAt(0) || "?";
-  const ctx = it.context_pct != null ? ` · ctx ${Math.round(it.context_pct)}%` : "";
-  const toggle = () => { const next = !open; setOpen(next); store("agend_view_card_expanded", next ? "1" : "0"); };
-  // #1629 r4 §1: the identity card, above the profile row while it is expanded.
+/** The identity card under the terminal, with Edit profile (or Sign in to edit) below it. Always on: the old one-line
+ *  strip is gone, and IdentityCard itself is null when the card is empty, so the button lives here rather than inside it. */
+function ViewIdentity({ it, viewOnly, onEdit }) {
   const card = useCard(it.instance_name, it.card_v);
-  return html`${open && card ? html`<div data-trust="panel-content" class="v-id"><${IdentityCard} name=${it.instance_name} card=${card} /></div>` : null}<section data-trust="panel-content" class=${`v-card${open ? " open" : ""}`} aria-label=${it.display_name || it.instance_name}>
-    <div class="v-avatar">${it.has_avatar ? html`<img ref=${avatar} alt="" />` : html`<span class="v-initial" aria-hidden="true">${initial}</span>`}</div>
-    <div class="v-card-body">
-      <div class="v-card-line"><strong>${it.display_name || it.instance_name}</strong>${it.role ? html`<span class="v-role">${it.role}</span>` : null}</div>
-      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${modelText(it)}` : ""}${ctx}</div>
-      ${open && it.description ? html`<p class="v-card-desc">${it.description}</p>` : null}
+  return html`<div data-trust="panel-content" class="v-id">
+    ${card ? html`<${IdentityCard} name=${it.instance_name} card=${card} />` : null}
+    <div class="v-id-actions">
+      ${viewOnly
+        ? html`<a class="btn btn-sm" href=${signInHref()}><${Icon} name="edit" size=${14} />${tn("signInToEdit")}</a>`
+        : html`<button type="button" class="btn btn-sm" onClick=${onEdit}><${Icon} name="edit" size=${14} />${tn("editProfile")}</button>`}
     </div>
-    <button type="button" class="icon-btn" onClick=${toggle} aria-expanded=${open ? "true" : "false"} aria-label=${tn(open ? "collapseProfile" : "expandProfile")} title=${tn(open ? "collapseProfile" : "expandProfile")}>
-      <${Icon} name="chevron" size=${16} cls=${open ? "caret" : "caret flipped"} /></button>
-    ${viewOnly
-      ? html`<a class="btn btn-sm" href=${signInHref()}><${Icon} name="edit" size=${14} />${tn("signInToEdit")}</a>`
-      : html`<button type="button" class="btn btn-sm" onClick=${onEdit}><${Icon} name="edit" size=${14} />${tn("editProfile")}</button>`}
-  </section>`;
+  </div>`;
 }
 
 /** Edit profile: display name, role, description, avatar. A write: it needs a session (CSRF via agend-auth.js). */

package/dist/ui/shared/text-undo.js

@@ -0,0 +1,210 @@
+// #2342: undo and redo in every text field — one history per field, kept here instead of the browser's.
+//
+// The browser's own undo is one stack for the whole page (Chromium and WebKit alike): Ctrl+Z in one box undoes the
+// last edit in whichever box had it, and any script write to a field's value (a completion, a clear, a re-render
+// that differs from the box) wipes the stack. So the keys are taken here, but only in a text field:
+// - undo: Ctrl+Z (⌘Z on a Mac); redo: Ctrl+Shift+Z or Ctrl+Y (⌘⇧Z on a Mac, where Ctrl+Y is not redo). Anywhere else
+//   (a button, the page, a select) nothing is taken; a key with Alt, or mid-IME-composition, is left alone too.
+// - a field's steps are recorded from its edits (beforeinput, input): typing is grouped into one step until a pause
+//   (UNDO.PAUSE_MS), a space, a different kind of edit (typing ↔ deleting), a paste, a line break or the caret moving
+//   elsewhere; an IME composition is one step, recorded when it ends.
+// - the browser's own Undo and Redo commands (its Edit menu, a context menu: a trusted beforeinput historyUndo /
+//   historyRedo) go through the same history: cancelled and done here. Where a browser cannot cancel them (or a script
+//   runs execCommand("undo"), with no beforeinput at all), its own undo goes ahead and what it leaves resets the field's
+//   history (never a step that would undo the undo).
+// - a script's change to a field's value the person should be able to undo (a completion, a pick, putting text back)
+//   calls recordEdit(field) first: the change becomes a step. Any other change (a clear after send, a reload after
+//   save) resets the field's history, as the browser's own undo does — a sent message is never undone back into the box.
+// - undo and redo write the value and the caret back and dispatch `input`, so the page's state (Preact) follows.
+// - password fields are left to the browser: no secret is kept here.
+
+import { useState } from "./app-html.js";
+
+export const UNDO = { PAUSE_MS: 1000, MAX_STEPS: 100 };
+
+const TEXT_TYPES = new Set(["text", "search", "url", "email", "tel", "number", ""]);
+/** A field this keeps a history for: a textarea, or a text-like input (never a password) that is not read-only or disabled. */
+export function isTextField(el) {
+  if (!el || el.readOnly || el.disabled) return false;
+  const tag = (el.tagName || "").toLowerCase();
+  if (tag === "textarea") return true;
+  return tag === "input" && TEXT_TYPES.has((el.getAttribute && el.getAttribute("type") || el.type || "").toLowerCase());
+}
+
+const histories = new WeakMap();
+/** The value and the caret of `el`. A number input has no selection: its caret is null. */
+function snap(el) {
+  let s = null, e = null;
+  try { s = el.selectionStart; e = el.selectionEnd; } catch { /* a number input */ }
+  return { v: String(el.value ?? ""), s: s ?? null, e: e ?? null };
+}
+function historyFor(el) {
+  let h = histories.get(el);
+  if (!h) { h = { undo: [], redo: [], last: snap(el), kind: null, at: 0, marked: null, composing: false }; histories.set(el, h); }
+  return h;
+}
+/**
+ * Bring the history up to the field's value: a change made by a script since the last edit is a step when recordEdit
+ * marked it, and otherwise resets the history (what the browser does too).
+ */
+function sync(el, h) {
+  const now = String(el.value ?? "");
+  if (now === h.last.v) { h.marked = null; return; }
+  if (h.marked) { push(h.undo, h.marked); h.redo = []; }
+  else { h.undo = []; h.redo = []; }
+  h.marked = null;
+  h.last = snap(el);
+  h.kind = null;
+}
+function push(list, s) {
+  list.push(s);
+  if (list.length > UNDO.MAX_STEPS) list.shift();
+}
+
+/** The kind of an edit, for grouping: consecutive typing (or deleting) of one kind is one step. */
+function kindOf(e) {
+  const t = e.inputType || "";
+  if (t === "insertText") return e.data && /\s/.test(e.data) ? "space" : "type";
+  if (t === "deleteContentBackward" || t === "deleteContentForward") return "delete";
+  return "other";                                   // a paste, a drop, a cut, a line break, a word delete: its own step
+}
+
+/** Called before a script changes `el`'s value in a way the person may undo: the value now is the step to go back to. */
+export function recordEdit(el) {
+  if (!isTextField(el)) return;
+  const h = historyFor(el);
+  sync(el, h);
+  h.marked = snap(el);
+  h.kind = null;
+}
+
+/** The history kept for `el` (tests). */
+export function historyOf(el) {
+  const h = histories.get(el);
+  return h ? { undo: h.undo.map((s) => s.v), redo: h.redo.map((s) => s.v), last: h.last.v } : null;
+}
+
+/** Put snapshot `s` into `el` and tell the page (an `input` event, as an edit would). */
+function apply(el, s, type, win) {
+  el.value = s.v;
+  if (s.s != null) { try { el.setSelectionRange(s.s, s.e ?? s.s); } catch { /* a number input */ } }
+  const Ev = win && typeof win.InputEvent === "function" ? win.InputEvent : win && win.Event;
+  if (Ev) el.dispatchEvent(new Ev("input", { bubbles: true, ...(Ev === win.InputEvent ? { inputType: type } : {}) }));
+}
+
+/**
+ * Undo (or redo) on `el`. False when there is nothing to do.
+ */
+export function step(el, redo, win = typeof window !== "undefined" ? window : null) {
+  if (!isTextField(el)) return false;
+  const h = historyFor(el);
+  sync(el, h);
+  const from = redo ? h.redo : h.undo, to = redo ? h.undo : h.redo;
+  if (!from.length) return false;
+  to.push(h.last);
+  h.last = from.pop();
+  h.kind = null;
+  h.applying = true;
+  try { apply(el, h.last, redo ? "historyRedo" : "historyUndo", win); } finally { h.applying = false; }
+  h.last = snap(el);
+  return true;
+}
+
+/** Which history key `e` is, or null: "undo", "redo". `mac`: ⌘ is the modifier and Ctrl+Y is not redo. */
+export function historyKey(e, mac) {
+  if (e.altKey || e.isComposing || e.keyCode === 229) return null;
+  const mod = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+  if (!mod) return null;
+  const k = (e.key || "").toLowerCase();
+  if (k === "z") return e.shiftKey ? "redo" : "undo";
+  if (k === "y" && !e.shiftKey && !mac) return "redo";
+  return null;
+}
+
+/**
+ * Keep a history for every text field under `doc` and take the undo/redo keys in them. Returns an uninstall function.
+ */
+export function installTextUndo({ doc = document, win = typeof window !== "undefined" ? window : null, mac = false } = {}) {
+  const field = (e) => (isTextField(e.target) ? e.target : null);
+  const onBefore = (e) => {
+    const el = field(e);
+    // WebKit commits a composition after compositionend (deleteCompositionText, insertFromComposition): its step is
+    // the one compositionstart began.
+    if (!el || e.isComposing || /Composition/.test(e.inputType || "")) return;
+    const h = historyFor(el);
+    if (h.applying || h.composing) return;          // a browser that does not flag its composition events
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+      if (e.cancelable) { e.preventDefault(); step(el, e.inputType === "historyRedo", win); }
+      else h.native = true;
+      return;
+    }
+    sync(el, h);
+    const kind = kindOf(e), now = Date.now(), at = snap(el);
+    // The same run of typing (or deleting) goes on: one step. A space ends a word's step (the next word is a new one).
+    // Anything else starts a new step from the value now.
+    const same = kind === "space" ? h.kind === "type" : kind !== "other" && kind === h.kind;
+    const goesOn = same && now - h.at < UNDO.PAUSE_MS && at.s === h.last.s && at.e === h.last.e;
+    if (!goesOn) { push(h.undo, at); h.redo = []; }
+    h.kind = kind;
+    h.at = now;
+  };
+  const onInput = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    if (h.applying) return;
+    // The browser's own undo or redo went ahead (one it could not cancel, or a script's execCommand("undo"), which has no
+    // beforeinput): what it left is a change of its own — the history starts afresh.
+    if (h.native || e.inputType === "historyUndo" || e.inputType === "historyRedo") { h.native = false; h.undo = []; h.redo = []; h.kind = null; }
+    h.last = snap(el);                              // mid-composition too: the value the next edit starts from
+  };
+  const onCompStart = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    sync(el, h);
+    push(h.undo, snap(el)); h.redo = [];
+    h.composing = true; h.kind = null;
+  };
+  const onCompEnd = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const h = historyFor(el);
+    h.composing = false;
+    h.last = snap(el);                              // WebKit's last input comes after compositionend: onInput updates it again
+  };
+  const onKey = (e) => {
+    const el = field(e);
+    if (!el) return;
+    const which = historyKey(e, mac);
+    if (!which || historyFor(el).composing) return;
+    e.preventDefault();                             // never the browser's page-wide stack, even when this field has no step
+    step(el, which === "redo", win);
+  };
+  doc.addEventListener("beforeinput", onBefore, true);
+  doc.addEventListener("input", onInput, true);
+  doc.addEventListener("compositionstart", onCompStart, true);
+  doc.addEventListener("compositionend", onCompEnd, true);
+  doc.addEventListener("keydown", onKey, true);
+  return () => {
+    doc.removeEventListener("beforeinput", onBefore, true);
+    doc.removeEventListener("input", onInput, true);
+    doc.removeEventListener("compositionstart", onCompStart, true);
+    doc.removeEventListener("compositionend", onCompEnd, true);
+    doc.removeEventListener("keydown", onKey, true);
+  };
+}
+
+const trimmed = (v) => v.trim();
+/**
+ * A field whose owner keeps its value normalized (trimmed, or a number): the box shows the text as typed and the owner
+ * gets `norm(text)`. Binding the box to the normalized value would rewrite it while the person types (a space vanishes,
+ * "1.50" turns into "1.5") and lose the field's undo history. When the owner's value becomes something the text does not
+ * normalize to (a clear, a load), the box shows `show(value)`.
+ * Returns [text for the box, onText(typed) → the normalized value].
+ */
+export function useTypedText(value, norm = trimmed, show = (v) => (v == null ? "" : String(v))) {
+  const [raw, setRaw] = useState(null);
+  const text = raw !== null && Object.is(norm(raw), value) ? raw : show(value);
+  return [text, (typed) => { setRaw(typed); return norm(typed); }];
+}

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

@@ -1,6 +1,7 @@
 // #1408 §7: one dialog for the whole app — the native <dialog> opened with showModal(), so the browser traps focus,
 // makes the rest inert and closes it on Esc. Focus goes back to whatever opened it. On a phone it is a bottom sheet
-// with its own × (app.css). Text and buttons only; no style attribute (#1300).
+// with its own × (app.css). Text and buttons only; no style attribute (#1300). `drawer`: on a desk it comes in from the
+// right edge at full height, the page still in view beside it (the task board's card); a phone keeps the bottom sheet.
 import { html, useEffect, useLayoutEffect, useRef } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { t } from "./app-i18n.js";
@@ -9,7 +10,7 @@ import { t } from "./app-i18n.js";
  * <${Dialog} title="Create task" onClose=${…} actions=${html`…`}>…body…</${Dialog}>
  * Rendered = open; the parent unmounts it to close. `busy` keeps Esc and the backdrop from closing it mid-request.
  */
-export function Dialog({ title, onClose, actions, children, busy = false, wide = false, label }) {
+export function Dialog({ title, onClose, actions, children, busy = false, wide = false, drawer = false, label }) {
   const ref = useRef(null);
   const opener = useRef(null);
   const busyRef = useRef(busy);
@@ -35,7 +36,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     d.addEventListener("click", onClick);
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
-  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}`} aria-label=${label || title}>
+  return html`<dialog data-trust="dialog" ref=${ref} class=${`dlg${wide ? " dlg-wide" : ""}${drawer ? " dlg-drawer" : ""}`} aria-label=${label || title}>
     <div class="dlg-box">
       <div class="dlg-head"><h2 class="dlg-title">${title}</h2>
         <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${() => { if (!busyRef.current) onClose(); }}><${Icon} name="close" /></button></div>

package/dist/ui/shared/ui-icons.js

@@ -7,6 +7,8 @@ const P = {
   menu: () => html`<path d="M4 6h16M4 12h16M4 18h16"/>`,
   sidebar: () => html`<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/>`,
   plus: () => html`<path d="M12 5v14M5 12h14"/>`,
+  minus: () => html`<path d="M5 12h14"/>`,                                        // #2333: the lightbox's zoom out
+  fitwidth: () => html`<path d="M3 4v16M21 4v16M7 12h10M10 9l-3 3 3 3M14 9l3 3-3 3"/>`,   // #2333: fit width
   edit: () => html`<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>`,
   more: () => html`<circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/>`,
   chat: () => html`<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`,

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

@@ -107,9 +107,20 @@ export function providerTitle(p) {
  * tooltip and for a screen reader.
  */
 export function planBadge(plan) {
-  const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(String(plan || "").trim());
-  return m ? `${m[1]} ×${m[2]}` : String(plan || "");
+  const text = String(plan || "").trim();
+  const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(text);
+  if (m) return `${m[1]} ×${m[2]}`;
+  // #2412: a long name ("Self Serve Business Usage Based", Codex's plan_type spelled out) says only its kind, so the badge
+  // never takes the row from the provider's name; the full name is the badge's tooltip.
+  if (text.length > PLAN_BADGE_MAX) {
+    for (const [word, short] of PLAN_KINDS) if (word.test(text)) return short;
+  }
+  return text;
 }
+const PLAN_BADGE_MAX = 14;
+/** The kinds a long plan name is shortened to, the most specific first. */
+const PLAN_KINDS = [[/\benterprise\b/i, "Enterprise"], [/\bbusiness\b/i, "Business"], [/\bteam\b/i, "Team"], [/\bedu(?:cation)?\b/i, "Edu"],
+  [/\bpro\+/i, "Pro+"], [/\bpro\b/i, "Pro"], [/\bplus\b/i, "Plus"], [/\bmax\b/i, "Max"], [/\bfree\b/i, "Free"]];
 /** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
 export function updatedAgo(fetchedAt, now = Date.now()) {
   const ms = now - new Date(fetchedAt).getTime();
@@ -124,7 +135,10 @@ export function updatedAgo(fetchedAt, now = Date.now()) {
  */
 export function UsageBody({ owner }) {
   const lease = useLease(owner);
-  const [data, setData] = useState(undefined);       // undefined: loading; null: failed
+  const [data, setData] = useState(undefined);       // undefined: loading; null: failed, with nothing read before
+  // The last read failed while numbers were already shown: they stay, with a quiet note (#2236/#2289 for the server's
+  // rows; here for the read itself — a dropped or failed read must not flash the error over numbers already on screen).
+  const [failed, setFailed] = useState(false);
   const [order, setOrder] = useState(() => { try { const a = JSON.parse(stored(USAGE_ORDER_KEY) || "[]"); return Array.isArray(a) ? a.filter((x) => typeof x === "string") : []; } catch { return []; } });
   const reads = useMemo(() => readStream(lease), [lease]);
   // Refresh (force) supersedes a read on its way; the minute's tick waits for it.
@@ -134,19 +148,26 @@ export function UsageBody({ owner }) {
     try {
       const r = await lease.fetch(`/api/ai-usage${force ? "?force=1" : ""}`);
       if (!reads.live(token)) return;
+      // A refused or failed answer (a 500, a proxy's 502 page, a session that lapsed) is a failed read, not numbers.
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
       const d = await r.json();
-      if (reads.live(token)) setData(d);
-    } catch { if (reads.live(token)) setData(null); }
+      if (!d || !Array.isArray(d.providers)) throw new Error("no providers");
+      if (reads.live(token)) { setData(d); setFailed(false); }
+    } catch {
+      if (!reads.live(token)) return;
+      setData((had) => (had && Array.isArray(had.providers) ? had : null));   // the last numbers stay; none: the error
+      setFailed(true);
+    }
     finally { reads.end(token); }
   };
   useEffect(() => { load(false); lease.interval(() => load(false), 60_000); }, [lease]);
   // #1585: the server answered with the last snapshot while it fetches a fresh one — read again shortly (the same
   // cache: no vendor call of its own) so the fresh numbers replace it without waiting for the minute's tick.
   useEffect(() => {
-    if (!data || !data.refreshing) return undefined;
+    if (!data || !data.refreshing || failed) return undefined;
     const timer = setTimeout(() => load(false), 4_000);
     return () => clearTimeout(timer);
-  }, [data]);
+  }, [data, failed]);
   const key = (p) => String(p.id || p.name || "");
   const ordered = (providers) => {
     const rank = new Map(order.map((id, i) => [id, i]));
@@ -182,7 +203,7 @@ export function UsageBody({ owner }) {
           : html`${(p.metrics || []).map((m, j) => html`<${UsageMetric} key=${j} m=${m} />`)}
             ${!p.stale && p.hint ? html`<p class="note">${usageText(p.hint, p.hintI18n)}</p>` : !(p.metrics || []).length ? html`<p class="note">${tn("usage.no_data")}</p>` : null}`}
       </section>`)}
-      <div class="u-foot"><span class="note" title=${new Date(data.fetchedAt).toLocaleString()}>${updatedAgo(data.fetchedAt)}${data.refreshing ? html` · <span class="u-refreshing">${tn("usageRefreshing")}</span>` : null}</span>
+      <div class="u-foot"><span class="note" title=${new Date(data.fetchedAt).toLocaleString()}>${updatedAgo(data.fetchedAt)}${failed ? html` · <span class="u-refresh-failed" role="status">${tn("usageRefreshFailed")}</span>` : data.refreshing ? html` · <span class="u-refreshing">${tn("usageRefreshing")}</span>` : null}</span>
         ${byAgent() ? html`<a class="btn btn-ghost btn-sm u-by-agent" href="/ui/fleet/usage" title=${tn("usageByAgentTitle")}>${tn("usageByAgent")}</a>` : null}
         <button type="button" class="btn btn-sm" onClick=${() => load(true)}>${tn("usageRefresh")}</button></div>`;
   }

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

@@ -37,6 +37,7 @@ register("view", {
   "usageUpdatedAgo": "Updated {age} ago",
   "usageUpdatedJustNow": "Updated just now",
   "usageRefreshing": "Refreshing…",
+  "usageRefreshFailed": "Couldn't refresh — showing the last numbers",
   "usageMinutes": "{n} min",
   "usageHours": "{n} h",
   "usageRefresh": "Refresh",
@@ -164,7 +165,6 @@ register("view", {
   "usageButton": "Usage",
   "helpButton": "Help",
   "close": "Close",
-  "expandProfile": "Show the profile",
   "rosterFailed": "Failed to load roster: {error}\n(Is the fleet running?)",
   "paneFailed": "⚠ Could not load pane for {name} (HTTP {status}).",
   "signInToSave": "Sign in to save — your session may have ended.",
@@ -207,7 +207,6 @@ register("view", {
   "textSize": "Text size: {size}",
   "profileTitle": "Edit {name}'s profile",
   "avatar": "Avatar",
-  "collapseProfile": "Hide the profile",
   "instancesLabel": "Instances",
   "favorites": "Favorites",
   "favAdd": "Add {name} to favorites",
@@ -270,6 +269,7 @@ register("view", {
   "usageUpdatedAgo": "{age}前更新",
   "usageUpdatedJustNow": "剛剛更新",
   "usageRefreshing": "更新中…",
+  "usageRefreshFailed": "無法更新，顯示上次的數據",
   "usageMinutes": "{n} 分鐘",
   "usageHours": "{n} 小時",
   "usageRefresh": "重新整理",
@@ -397,7 +397,6 @@ register("view", {
   "usageButton": "用量",
   "helpButton": "說明",
   "close": "關閉",
-  "expandProfile": "顯示個人資料",
   "rosterFailed": "載入 instance 清單失敗：{error}\n（Fleet 是否正在執行？）",
   "paneFailed": "⚠ 無法載入 {name} 的 pane（HTTP {status}）。",
   "signInToSave": "請先登入才能儲存：你的 session 可能已結束。",
@@ -440,7 +439,6 @@ register("view", {
   "textSize": "字級：{size}",
   "profileTitle": "編輯 {name} 的個人資料",
   "avatar": "頭像",
-  "collapseProfile": "隱藏個人資料",
   "instancesLabel": "Instances",
   "favorites": "最愛",
   "favAdd": "把 {name} 加入最愛",

package/dist/ui/web-terminal/terminal.html

@@ -13,25 +13,25 @@
 <header id="bar">
   <span id="title">AgEnD terminal</span>
   <span id="ttl" hidden></span>
-  <button id="btn-close" type="button" hidden title="End this session now (the command is stopped and the terminal closes)">Stop</button>
+  <button id="btn-close" type="button" hidden title="End this session now (the command is stopped and the terminal closes)" data-i18n="stop" data-i18n-title="stopTitle">Stop</button>
 </header>
 <section id="gate">
-  <p>This terminal is connected to <strong>one command only</strong> and closes when it exits or when the time limit lapses. There is no shell behind it.</p>
-  <p>Paste the <strong>access token</strong> you were given: privately in chat, or in the dashboard's sign-in dialog. It is separate from this link; the link alone grants nothing.</p>
+  <p data-i18n-html="gateOne">This terminal is connected to <strong>one command only</strong> and closes when it exits or when the time limit lapses. There is no shell behind it.</p>
+  <p data-i18n-html="gateToken">Paste the <strong>access token</strong> you were given: privately in chat, or in the dashboard's sign-in dialog. It is separate from this link; the link alone grants nothing.</p>
   <form id="gate-form" autocomplete="off">
-    <input id="token" type="text" inputmode="text" autocapitalize="characters" spellcheck="false" placeholder="access token" maxlength="40" required>
-    <button type="submit">Open</button>
+    <input id="token" type="text" inputmode="text" autocapitalize="characters" spellcheck="false" placeholder="access token" data-i18n-placeholder="tokenPlaceholder" maxlength="40" required>
+    <button type="submit" data-i18n="open">Open</button>
   </form>
   <p id="gate-msg" role="alert"></p>
-  <noscript><p role="alert">JavaScript is required: the token is sent with a script, never as part of a page URL.</p></noscript>
+  <noscript><p role="alert">JavaScript is required: the token is sent with a script, never as part of a page URL. 需要啟用 JavaScript：存取權杖由程式送出，絕不會放進網址。</p></noscript>
 </section>
 <main id="term" hidden></main>
 <form id="code-row" hidden autocomplete="off">
-  <label for="code">Sign-in code</label>
-  <input id="code" type="password" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="1100" placeholder="paste the code here">
-  <button type="submit">Send</button>
+  <label for="code" data-i18n="codeLabel">Sign-in code</label>
+  <input id="code" type="password" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="1100" placeholder="paste the code here" data-i18n-placeholder="codePlaceholder">
+  <button type="submit" data-i18n="send">Send</button>
   <span id="code-msg" role="status"></span>
-  <p id="code-hint">The terminal does not show what you paste. Paste the code once, then press Enter or Send. Ctrl+C is off on this page — use Stop to cancel.</p>
+  <p id="code-hint" data-i18n="codeHint">The terminal does not show what you paste. Paste the code once, then press Enter or Send. Ctrl+C is off on this page — use Stop to cancel.</p>
 </form>
 <footer id="keys" hidden>
   <button data-seq="\u001b" type="button">Esc</button>