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

package/dist/ui/shared/signin.js

@@ -33,6 +33,15 @@
       refused_outside: "That code didn't work. Check that your phone's clock is right and try the newest code.",
       paused_outside: "Too many wrong codes. Try again in {duration}.",
       minutes: "{0} minutes", minute: "1 minute", hours: "{0} hours", hour: "1 hour",
+      // #3061: sign in with another device — an 8-character code shown here, approved on a device that is already signed in.
+      another: "Sign in with another device", dev_title: "Sign in with another device",
+      dev_lead: "On a device that is already signed in to AgEnD as the owner, open Settings → Access & security, choose Add device under Devices & sign-in, and enter this code.",
+      dev_waiting: "Waiting for approval… Expires in {time}.", dev_approved: "Approved — signing in…",
+      dev_expired: "This code has expired.", dev_denied: "This request was denied.", dev_new: "Get a new code", dev_back: "Back",
+      dev_busy: "Too many devices are waiting right now. Try again in a moment.", dev_limited: "Too many codes asked for. Try again in {duration}.",
+      dev_unavailable: "Signing in with another device isn't available here.", dev_failed: "Could not get a code. Check the connection and try again.",
+      dev_lost: "Could not reach AgEnD. Still trying…",
+      dev_qr: "Or scan this QR code with a device that is already signed in as the owner. It holds this page's address and the code above, nothing else.",
     },
     "zh-TW": {
       checking: "正在確認登入狀態…", title: "登入 AgEnD", lead: "輸入登入碼。",
@@ -55,6 +64,14 @@
       refused_outside: "代碼不對。請確認手機時間正確，並輸入最新的代碼。",
       paused_outside: "錯誤次數太多，請 {duration} 後再試。",
       minutes: "{0} 分鐘", minute: "1 分鐘", hours: "{0} 小時", hour: "1 小時",
+      another: "使用其他裝置登入", dev_title: "使用其他裝置登入",
+      dev_lead: "在已登入且已驗證擁有者的裝置上，開啟「設定 → 存取與安全」，在「裝置與登入」選「新增裝置」，輸入這組代碼。",
+      dev_waiting: "等待核准中… {time} 後失效。", dev_approved: "已核准，登入中…",
+      dev_expired: "這組代碼已失效。", dev_denied: "這個請求已被拒絕。", dev_new: "取得新代碼", dev_back: "返回",
+      dev_busy: "目前等待核准的裝置太多，請稍後再試。", dev_limited: "要求代碼的次數太多，請 {duration} 後再試。",
+      dev_unavailable: "這裡無法使用其他裝置登入。", dev_failed: "無法取得代碼。請檢查連線後再試。",
+      dev_lost: "連不上 AgEnD，仍在重試…",
+      dev_qr: "也可以用已登入且已驗證擁有者的裝置掃描這個 QR Code。裡面只有這個頁面的網址和上面的代碼，沒有其他東西。",
     },
   };
   const lang = /^zh/i.test(navigator.language || "") ? "zh-TW" : "en";
@@ -63,6 +80,11 @@
   // #3008: …and one served through the link "Allow connections from outside" opened (<body data-outside="1">): signing in
   // is the authenticator app's code, posted to /auth/totp.
   const outside = webOnly && document.body.getAttribute("data-outside") === "1";
+  // #3061: …and one on this computer's own listener (<body data-device-login="1">, never the public link) offers "Sign in
+  // with another device".
+  const deviceLogin = webOnly && !outside && document.body.getAttribute("data-device-login") === "1";
+  // #3061 (P2b): …and, when `web.login_qr` is on (<body data-login-qr="1">), it also draws the QR code of the approve link.
+  const loginQr = deviceLogin && document.body.getAttribute("data-login-qr") === "1";
   const t = (k) => (outside && (T[lang][`${k}_outside`] || T.en[`${k}_outside`])) || (webOnly && (T[lang][`${k}_web`] || T.en[`${k}_web`])) || T[lang][k] || T.en[k] || k;
   /** A wait as words: "15 minutes" / 「15 分鐘」, "2 hours" / 「2 小時」 (rounded up). */
   const duration = (ms) => {
@@ -149,6 +171,7 @@
     } catch { /* private mode */ }
     $("code").focus();
     offerResend();
+    if (deviceLogin) $("another").hidden = false;
   }
 
   // Only a returning device gets the button; the answer is a boolean and asking has no side effect. Never from outside
@@ -180,6 +203,155 @@
     button.disabled = false;
   });
 
+  // ── #3061: sign in with another device ──
+  // POST /auth/device-login → the code to show (and an HttpOnly cookie that is this browser's request); then POST
+  // /auth/device-login/poll every couple of seconds until a signed-in owner has approved it (the poll that finds it
+  // approved is what signs this browser in, so nothing is handed over by the approving device), denied it, or it ran out.
+  // Never a GET: asking and polling both change state, and a preview must not.
+  const DEV_POLL_MS = 2000;
+  let dev = null;
+  // One call at a time, in the order they were asked for. Every one of the three answers may carry a Set-Cookie for the
+  // request's cookie (asking sets it, cancelling and a poll that finds it spent clear it), and the browser applies a cookie when
+  // the answer ARRIVES, not when this page chose to ask. So a stale call's late answer would replace or expire the cookie of the
+  // attempt that came after it (Back, then a new attempt, while the first attempt's create or cancel was still on the wire):
+  // the new attempt would poll with the wrong request, or none, and read "expired" after its owner had approved it. Each call
+  // therefore starts only when the one before it has finished: answered, or given up on after DEV_CALL_MS by aborting it. A response
+  // that has not arrived when its call is aborted is dropped by the browser, its Set-Cookie never processed; one whose headers had
+  // already arrived has applied its cookie before the next call is sent. Either way a call carries, and leaves behind, what the last
+  // one left. (An aborted request may still have been handled by the server; at worst that leaves an unused request that expires on
+  // its own.) `mine`: the attempt a create or poll belongs to; one that was stopped before its turn comes is not sent at all.
+  const DEV_CALL_MS = 15000;
+  let devTurn = Promise.resolve();
+  function devCall(path, mine) {
+    const run = async () => {
+      if (mine && mine.stopped) return null;
+      const ctl = typeof AbortController === "function" ? new AbortController() : null;
+      const timer = ctl ? setTimeout(() => ctl.abort(), DEV_CALL_MS) : 0;
+      try {
+        const r = await fetch(`/auth/device-login${path}`, { method: "POST", credentials: "same-origin", cache: "no-store", headers: { "Content-Type": "application/json" }, body: "{}", ...(ctl ? { signal: ctl.signal } : {}) });
+        let body = null;
+        try { body = await r.json(); } catch { /* no body, or not JSON */ }
+        return { r, body };
+      } finally { clearTimeout(timer); }
+    };
+    const call = devTurn.then(run);
+    devTurn = call.then(() => undefined, () => undefined);
+    return call;
+  }
+  const clock = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+  function devStop() {
+    hideQr();
+    if (!dev) return;
+    dev.stopped = true;
+    clearTimeout(dev.poll); clearInterval(dev.tick);
+    dev = null;
+  }
+  function devSay(text, bad, spent) {
+    $("devStatus").textContent = text;
+    $("devStatus").classList?.[bad ? "add" : "remove"]("bad");
+    $("devCode").classList?.[spent ? "add" : "remove"]("spent");
+  }
+  function devEnded(text, bad) {
+    devStop();
+    devSay(text, bad, true);
+    $("devNew").hidden = false;
+    hideQr();
+  }
+  // ── #3061 (P2b): the approve link as a QR code ──
+  // The link is THIS page's own address plus the code on screen — /settings/access?approve=XXXX-XXXX — and nothing else: no
+  // request id, no cookie, no token (the request's poll cookie is HttpOnly and never leaves this browser). A device that
+  // opens it has to be signed in as the verified owner to do anything with it, and what it opens is the same "Add device"
+  // dialog with the code filled in: the person still presses Continue, sees who is asking, and presses Allow. A sign-in page
+  // reached as localhost cannot be opened from another device, so no code is drawn there.
+  const reachableFromElsewhere = () => !/^(localhost|.*\.localhost|127(\.\d{1,3}){3}|\[?::1\]?)$/i.test(location.hostname);
+  function hideQr() { if (!loginQr) return; $("devQr").hidden = true; $("devQrSvg").replaceChildren(); }
+  async function showQr(code, mine) {
+    if (!loginQr || !reachableFromElsewhere()) return;
+    let make;
+    try { const m = await import("/assets/qrcode.module.js"); make = m.default || m.qrcode; } catch { return; }
+    if (dev !== mine || mine.stopped) return;                  // this request ended, or a newer one began, while the encoder loaded
+    const qr = make(0, "M");
+    qr.addData(`${location.origin}/settings/access?approve=${encodeURIComponent(code)}`);
+    qr.make();
+    const n = qr.getModuleCount(), size = n + 8;
+    let d = "";
+    for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (qr.isDark(r, c)) d += `M${c + 4} ${r + 4}h1v1h-1z`;
+    const NS = "http://www.w3.org/2000/svg", svg = $("devQrSvg");
+    svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    const back = document.createElementNS(NS, "rect"), dark = document.createElementNS(NS, "path");
+    back.setAttribute("width", String(size)); back.setAttribute("height", String(size)); back.setAttribute("fill", "#fff");
+    dark.setAttribute("d", d); dark.setAttribute("fill", "#000");
+    svg.replaceChildren(back, dark);
+    $("devQr").hidden = false;
+  }
+  async function devStart() {
+    devStop();
+    $("form").hidden = true; $("device").hidden = false; $("devNew").hidden = true;
+    hideQr();
+    $("devCode").textContent = "XXXX-XXXX";
+    devSay("", false, true);
+    const mine = { stopped: false, poll: 0, tick: 0, deadline: 0, lost: 0 };
+    dev = mine;
+    let made;
+    try { made = await devCall("", mine); } catch { if (!mine.stopped) devEnded(t("dev_failed"), true); return; }
+    if (mine.stopped || !made) return;
+    const { r, body } = made;
+    if (!r.ok || !body || typeof body.code !== "string") {
+      if (r.status === 429) {
+        let wait = Number(r.headers.get("Retry-After")) * 1000;
+        if (Number.isFinite(body && body.retryAfterMs)) wait = body.retryAfterMs;
+        devEnded(t("dev_limited").replace("{duration}", duration(Number.isFinite(wait) && wait > 0 ? wait : 60000)), true);
+      } else devEnded(r.status === 503 ? t("dev_busy") : r.status === 404 ? t("dev_unavailable") : t("dev_failed"), true);
+      return;
+    }
+    $("devCode").textContent = body.code;
+    $("devCode").classList?.remove("spent");
+    showQr(body.code, mine);
+    // The countdown runs on this browser's own clock from when the code arrived (the server's is the authority: its poll
+    // says `expired` when it is).
+    mine.deadline = Date.now() + (Number.isFinite(body.ttlMs) && body.ttlMs > 0 ? body.ttlMs : 300000);
+    const waiting = () => devSay(t("dev_waiting").replace("{time}", clock(mine.deadline - Date.now())), false, false);
+    waiting();
+    mine.tick = setInterval(() => { if (!mine.stopped && !mine.approved) waiting(); }, 1000);
+    const again = () => { if (!mine.stopped) mine.poll = setTimeout(ask, DEV_POLL_MS); };
+    const ask = async () => {
+      let asked = null;
+      try { asked = await devCall("/poll", mine); } catch { /* below */ }
+      if (mine.stopped) return;
+      const p = asked && asked.r, state = asked && asked.body && asked.body.state;
+      if (state === "approved" && p && p.ok) {
+        mine.approved = true;
+        devSay(t("dev_approved"), false, false);
+        clearBounce(); location.replace(nextTarget());
+        return;
+      }
+      if (p && p.status === 404) { devEnded(t("dev_unavailable"), true); return; }          // closed while waiting (e.g. web authorization turned off)
+      if (state === "denied") { devEnded(t("dev_denied"), true); return; }
+      if (state === "expired") { devEnded(t("dev_expired"), true); return; }
+      if (state === "pending") { mine.lost = 0; again(); return; }
+      // The network, or an answer that is none of these: keep trying — the server ends the request when it is time —
+      // but say so after a few, and stop waiting once the code's own time is well past.
+      if (Date.now() > mine.deadline + 15000) { devEnded(t("dev_expired"), true); return; }
+      if (++mine.lost >= 3) devSay(t("dev_lost"), true, false);
+      again();
+    };
+    again();
+  }
+  async function devBack() {
+    const mine = dev;
+    devStop();
+    $("device").hidden = true; $("form").hidden = false;
+    $("code").focus();
+    // Queued behind a create or poll of this attempt that is still on the wire (it needs the cookie that call sets), and ahead of
+    // whatever the person asks for next: a new attempt never starts while this one's cancel is still out.
+    if (mine && !mine.approved) { try { await devCall("/cancel"); } catch { /* it expires by itself */ } }
+  }
+  if (deviceLogin) {
+    $("another").addEventListener("click", () => { devStart(); });
+    $("devNew").addEventListener("click", () => { devStart(); });
+    $("devBack").addEventListener("click", () => { devBack(); });
+  }
+
   async function probe() {
     // A second bounce inside ten seconds means the cookie is valid but not being sent on the
     // navigation; going round again would loop, so stop and let the person type a code.

package/dist/ui/shared/task-board.css

@@ -0,0 +1,95 @@
+/* The task board's list, filters, Display, card menu and Insights (#3169, #3170, #3171; igs-willyliao). Its own file,
+   linked by fleet-task-view.js: a tab opened before an upgrade has an app.css without these rules. */
+/* A project's Insights (fleet-task-stats.js): its choices, a bar per row coloured by class, its numbers. */
+.tb-stats > .tb-insights { min-height: 26px; padding: 0 var(--s-2); }
+.ts { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
+.ts-choices { display: flex; flex-wrap: wrap; gap: var(--s-3); }
+.ts-pick { flex: 1 1 140px; min-width: 0; margin: 0; }
+.ts-sum, .ts-note { margin: 0; }
+.ts-sum { font-size: var(--fs-sm); }
+.ts-note { font-size: var(--fs-xs); }
+.ts-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-2); }
+.ts-legend li { display: inline-flex; align-items: center; gap: var(--s-1); }
+.ts-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--text-3); }
+.ts-scroll { overflow-x: auto; }
+.ts-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
+.ts-table th, .ts-table td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--border); text-align: left; font-weight: var(--fw-regular); white-space: nowrap; }
+.ts-table thead th { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.ts-table thead th.ts-part { max-width: 5em; white-space: normal; vertical-align: bottom; }
+.ts-table tbody th { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
+.ts-table tbody th .tb-person { max-width: 100%; }
+.ts-table tbody th .tb-who { overflow: hidden; text-overflow: ellipsis; }
+.ts-table .ts-bar-col { width: 35%; min-width: 96px; }
+.ts-bar { display: block; width: 100%; height: 10px; border-radius: 2px; overflow: hidden; }
+.ts-track { fill: var(--surface-2); }
+.ts-table .ts-n { text-align: right; font-variant-numeric: tabular-nums; }
+.ts-n.zero { color: var(--text-3); }
+.ts-table .ts-total { font-weight: var(--fw-semibold); }
+/* The parts' colours: a status as the board's dots; a priority from urgent (red) to low (grey); a size by weight. */
+.ts-seg.none-all { fill: var(--accent); }
+.ts-seg.status-open, .ts-key.status-open, .ts-seg.priority-low, .ts-key.priority-low, .ts-seg.size-none, .ts-key.size-none { fill: var(--text-3); background: var(--text-3); }
+.ts-seg.status-claimed, .ts-key.status-claimed, .ts-seg.priority-normal, .ts-key.priority-normal, .ts-seg.size-M, .ts-key.size-M { fill: var(--accent); background: var(--accent); }
+.ts-seg.status-blocked, .ts-key.status-blocked, .ts-seg.priority-urgent, .ts-key.priority-urgent { fill: var(--danger); background: var(--danger); }
+.ts-seg.status-review, .ts-key.status-review, .ts-seg.priority-high, .ts-key.priority-high, .ts-seg.size-L, .ts-key.size-L { fill: var(--warn); background: var(--warn); }
+.ts-seg.status-done, .ts-key.status-done, .ts-seg.size-S, .ts-key.size-S { fill: var(--ok); background: var(--ok); }
+/* A phone keeps the bar and the total; the parts are in the legend's colours. */
+@media (max-width: 899px) { .ts-table .ts-part { display: none; } }
+
+/* A project's Filter and Display, its filters as chips, and the project as a list (fleet-task-view.js). */
+.menu-text { gap: var(--s-1); }
+/* Under the project's header, as Linear's options row: Filter, Display, then the filters in force. */
+.tb-view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
+.tb-view-bar > .menu > .menu-text.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
+.tb-view-bar .menu-list { left: 0; right: auto; max-height: min(70vh, 520px); overflow-y: auto; }
+.tb-columns.no-done { grid-template-columns: repeat(4, minmax(176px, 1fr)); }
+.tb-filters { display: contents; }
+.tb-chip { display: inline-flex; align-items: center; min-height: 30px; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); font-size: var(--fs-xs); }
+.tb-chip-field { padding: 0 var(--s-2) 0 var(--s-3); color: var(--text-2); white-space: nowrap; }
+.tb-chip-op, .tb-chip-x { align-self: stretch; padding: 0 var(--s-2); border: 0; border-left: 1px solid var(--border); background: none; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; }
+.tb-chip.not .tb-chip-op { color: var(--danger); font-weight: var(--fw-semibold); }
+.tb-chip-op:hover, .tb-chip-x:hover { background: var(--surface-2); color: var(--text); }
+.tb-chip-x { display: inline-flex; align-items: center; border-radius: 0 var(--r-full) var(--r-full) 0; }
+.tb-chip .menu { min-width: 0; }
+.tb-chip .menu-text { min-height: 28px; max-width: 240px; padding: 0 var(--s-2); border: 0; border-left: 1px solid var(--border); border-radius: 0; background: none; }
+.tb-chip .menu-text > span { overflow: hidden; text-overflow: ellipsis; }
+.tb-list { display: flex; flex-direction: column; gap: var(--s-4); }
+.tb-group-head { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.tb-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
+.tb-row { border-bottom: 1px solid var(--border); cursor: pointer; }
+.tb-row:hover { background: var(--surface); }
+.tb-row.flash { animation: tb-flash 1.6s var(--ease); }
+.tb-row-line { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); min-width: 0; }
+.tb-row.is-sub .tb-row-line { padding-left: var(--s-6); }
+.tb-row-main { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.tb-row-text { flex: 1; display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.tb-row-title { flex-shrink: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: var(--fw-medium); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tb-row-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
+.tb-row-note { flex: 1 1 0; min-width: 0; font-size: var(--fs-xs); color: var(--danger); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tb-row-tags { display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
+.tb-row-progress { display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0; padding: 2px var(--s-1); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
+.tb-row-progress > .tb-bar { width: 48px; }
+button.tb-row-progress { cursor: pointer; }
+button.tb-row-progress:hover { background: var(--surface-2); }
+.tb-row-who { display: inline-flex; flex-shrink: 0; width: 140px; min-width: 0; font-size: var(--fs-xs); }
+.tb-row-who .tb-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tb-row-time { flex-shrink: 0; width: 7em; font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
+.tb-row > .tb-subs { margin: 0 var(--s-2) var(--s-2) var(--s-6); }
+@media (max-width: 899px) {
+  /* A phone's row: number and title on the first line, the rest under them. */
+  .tb-row-line { flex-wrap: wrap; row-gap: var(--s-1); }
+  .tb-row-text { flex: 1 1 calc(100% - 96px); }
+  .tb-row-who { width: auto; }
+  .tb-row-time { width: auto; margin-left: auto; }
+  .tb-row.is-sub .tb-row-line { padding-left: var(--s-4); }
+}
+
+/* A card's menu at the pointer (fleet-task-menu.js): the app's menu, fixed where the right click was; and the card's
+   Previous / Next in its dialog's header. */
+.menu-list.tb-card-menu { position: fixed; left: 0; top: 0; right: auto; max-height: min(80vh, 560px); overflow-y: auto; z-index: 40; }
+.tb-card-menu .menu-heading.bare { padding: 0; }
+.tb-card-menu .menu-item > .tb-dot { margin: 0 4px; }
+.tc-steps { display: inline-flex; align-items: center; gap: 2px; margin-right: var(--s-1); }
+.tc-step-at { min-width: 3.5em; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) {
+  .tb-row.flash { animation: none; }
+}

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