@songsid/agend 2.3.1 → 2.3.2-beta.10

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

@@ -0,0 +1,95 @@
+// #2585 (the user): settings-like editors docked on the right. On a screen wide enough for the usage rail (RAIL_MEDIA,
+// #1673) an editor opens in the rail's place, beside the page — not modal: the page stays in view and in use (the
+// Office re-fits beside it). While one is open the rail steps aside; it comes back as it was when the panel closes (its
+// shown/hidden choice is never touched). Narrower, the same editor is the shared Dialog (centred; a phone's sheet).
+//
+// <${SidePanel} title=… onClose=… actions=… busy=…>…body…</${SidePanel}>: rendered = open, the owner unmounts it to
+// close (like Dialog). Docked, the owner renders nothing itself: it publishes its title, body and actions to the shell's
+// host (sidePanelStore) on every render, so the body keeps the owner's state and closures; the owner going (a close, a
+// navigation) takes the panel with it. Esc in the panel and its × close it (not while `busy`); focus moves into it when
+// it opens and goes back to what opened it when it closes. Docked, the body renders under the shell, not under its
+// owner: a context provided above the owner does not reach it (pass what it needs as props, or read a store).
+// `dirty`: the editor holds unsaved changes. Docked, the page beside it is in use (its links, search): leaving the page
+// then closes the panel as Cancel does — and with changes, asks first (the app's leave guard; one at a time).
+// `dock` false keeps it from docking (the Office in fullscreen, where the shell is out of view); `fallback`, when given,
+// is what it is below the rail's width (or not docked) instead of the Dialog — Edit layout's bar over the canvas.
+import { html, useEffect, useLayoutEffect, useRef } from "./app-html.js";
+import { createStore, useStore } from "./app-store.js";
+import { t } from "./app-i18n.js";
+import { Icon } from "./ui-icons.js";
+import { Dialog } from "./ui-dialog.js";
+import { confirmDialog } from "./ui-confirm.js";
+import { navigate, setLeaveGuard } from "./app-nav.js";
+import { UsageRail, useRailWidth } from "./header-tools.js";
+
+/** { panel: { id, title, label, body, actions, busy, onClose } | null } — the one docked panel. */
+export const sidePanelStore = createStore({ panel: null });
+let seq = 0;
+const clear = (id) => { if (sidePanelStore.get().panel?.id === id) sidePanelStore.set({ panel: null }); };
+
+/** An editor: docked on a wide screen, the shared Dialog (`wide`) elsewhere. */
+export function SidePanel({ title, label, onClose, actions, busy = false, dirty = false, dock = true, fallback, children }) {
+  const docked = useRailWidth() && dock;
+  const id = useRef(0);
+  if (!id.current) id.current = ++seq;
+  const opener = useRef(undefined);
+  if (opener.current === undefined) opener.current = typeof document !== "undefined" ? document.activeElement : null;
+  useLayoutEffect(() => {
+    if (docked) sidePanelStore.set({ panel: { id: id.current, title, label, body: children, actions, busy, onClose } });
+    else clear(id.current);
+  });
+  useLayoutEffect(() => () => {
+    const host = typeof document !== "undefined" ? document.querySelector(".side-panel") : null;
+    const inside = !!host && (host.contains(document.activeElement) || document.activeElement === document.body);
+    clear(id.current);
+    // Focus back to what opened it — when it was in the panel (or nowhere): a person who moved on keeps their place.
+    const back = opener.current;
+    if ((inside || !host) && back && typeof back.focus === "function" && document.contains?.(back)) back.focus();
+  }, []);
+  // Leaving the page with changes in the docked panel: asked in the app's dialog; yes = Cancel, then on to there.
+  const live = useRef(null);
+  live.current = { title, onClose };
+  useEffect(() => {
+    if (!docked || !dirty) return undefined;
+    let asking = false;
+    return setLeaveGuard((_to, path) => {
+      if (!asking) {
+        asking = true;
+        confirmDialog({ message: t("app.sidePanelLeave", live.current.title), confirmLabel: t("app.sidePanelDiscard"), danger: true }).then((yes) => {
+          asking = false;
+          if (!yes) return;
+          live.current.onClose();
+          navigate(path, { force: true });
+        });
+      }
+      return false;
+    });
+  }, [docked, dirty]);
+  if (docked) return null;
+  if (fallback !== undefined) return fallback;
+  return html`<${Dialog} title=${title} label=${label} onClose=${onClose} actions=${actions} busy=${busy} wide=${true}>${children}</${Dialog}>`;
+}
+
+/** The docked panel itself: a non-modal dialog in the rail's place. */
+function SidePanelHost({ panel }) {
+  const box = useRef(null);
+  // Into the panel as it opens (its box: no ring; Tab moves on), once per panel.
+  useLayoutEffect(() => { if (box.current && typeof box.current.focus === "function") box.current.focus({ preventScroll: true }); }, [panel.id]);
+  const close = () => { if (!panel.busy) panel.onClose(); };
+  const onKeyDown = (e) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); close(); } };
+  return html`<dialog open data-trust="dialog" class="dlg side-panel" aria-label=${panel.label || panel.title} onKeyDown=${onKeyDown}>
+    <div class="dlg-box" tabindex="-1" ref=${box}>
+      <div class="dlg-head"><h2 class="dlg-title">${panel.title}</h2>
+        <button type="button" class="icon-btn dlg-x" aria-label=${t("app.close")} title=${t("app.close")} onClick=${close}><${Icon} name="close" /></button></div>
+      <div class="dlg-body">${panel.body}</div>
+      ${panel.actions ? html`<div class="dlg-actions">${panel.actions}</div>` : null}
+    </div>
+  </dialog>`;
+}
+
+/** The shell's right-hand column: a docked panel when one is open (wide screens), else the usage rail. */
+export function RightRail({ route }) {
+  const { panel } = useStore(sidePanelStore);
+  const wide = useRailWidth();
+  return panel && wide ? html`<${SidePanelHost} panel=${panel} />` : html`<${UsageRail} route=${route} />`;
+}

package/dist/ui/shared/signin.js

@@ -15,7 +15,7 @@
       label: "One-time code", submit: "Sign in", working: "Signing in…",
       hint: "No code? Send /web in General, then press a sign-in button to get one.",
       nobot: "No chat bot?", nobot_body: "Ask the operator to run agend web --code on the AgEnD computer.",
-      safe: "Page looks wrong after signing in?", safe_body: "Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Web appearance.",
+      safe: "Page looks wrong after signing in?", safe_body: "Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Look.",
       refused: "The code is invalid or no longer works. Send /web in General, then press a sign-in button for a new code.",
       unconfirmed: "Sign-in could not be confirmed. Get a new code and try again; if it keeps failing, contact the operator.",
       paused: "Too many wrong codes — sign-in is paused for a few minutes.",
@@ -29,7 +29,7 @@
       label: "一次性登入碼", submit: "登入", working: "登入中…",
       hint: "沒收到？在 General 傳 /web，再按登入按鈕取碼。",
       nobot: "沒有聊天 bot？", nobot_body: "請管理員在 AgEnD 電腦執行 agend web --code。",
-      safe: "登入後畫面不對勁？", safe_body: "可能是你的自訂 CSS 把東西藏起來了。在網址最後加上 ?safe=1，就會不套用它地載入；再到「設定 → 網頁外觀」修正或關閉。",
+      safe: "登入後畫面不對勁？", safe_body: "可能是你的自訂 CSS 把東西藏起來了。在網址最後加上 ?safe=1，就會不套用它地載入；再到「設定 → 外觀」修正或關閉。",
       refused: "登入碼無效或已失效。請在 General 傳 /web，再按登入按鈕取新碼。",
       unconfirmed: "登入暫時無法確認。請重新取碼再試；若仍失敗，請聯絡管理員。",
       paused: "錯誤次數過多，登入暫停幾分鐘。",

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

@@ -19,6 +19,11 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     const d = ref.current;
     opener.current = typeof document !== "undefined" ? document.activeElement : null;
     if (d && typeof d.showModal === "function" && !d.open) d.showModal();
+    // The browser's own first stop is the × (WebKit paints its focus ring at once): the dialog's box takes that focus
+    // instead, so opening shows no ring; Tab then reaches the × and every field with the keyboard's ring. A field a
+    // dialog focuses itself (autofocus) keeps it.
+    const x = d && d.querySelector ? d.querySelector(".dlg-x") : null, box = d && d.querySelector ? d.querySelector(".dlg-box") : null;
+    if (box && x && typeof document !== "undefined" && document.activeElement === x && typeof box.focus === "function") box.focus({ preventScroll: true });
     return () => {
       if (d && d.open && typeof d.close === "function") d.close();
       const back = opener.current;
@@ -37,7 +42,7 @@ export function Dialog({ title, onClose, actions, children, busy = false, wide =
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
   }, [onClose]);
   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-box" tabindex="-1">
       <div class="dlg-head"><h2 class="dlg-title">${title}</h2>${tools ? html`<span class="dlg-tools">${tools}</span>` : null}
         <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>
       <div class="dlg-body">${children}</div>

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

@@ -9,6 +9,8 @@ const P = {
   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
+  fullscreen: () => html`<path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/>`,           // #2540: the Office's fullscreen
+  fullscreenexit: () => html`<path d="M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5"/>`,       // …and its way out
   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/web-authorize.js

@@ -12,7 +12,6 @@ register("webauth", {
     authorize: "Authorize this browser",
     waiting: "Waiting for your Confirm in Discord or Telegram ({0})",
     sent: "Sent — confirm it in your DM within 5 minutes.",
-    publicLink: "Not on the temporary public link: open the dashboard directly to authorize.",
     reason_disabled: "Web authority is turned off.",
     reason_loopback_only: "Only this computer can authorize, and this browser is not on it.",
     reason_no_account: "This browser was not signed in as an account (agend web): sign in with /web to authorize.",
@@ -20,7 +19,8 @@ register("webauth", {
     reason_not_admin_session: "Guests can't authorize.",
     reason_token_rotated: "The dashboard's token changed: sign in again.",
     reason_public_link: "Not on the temporary public link.",
-    reason_named_link_off: "Over your named link: turn on \"Also over my named link\" in Settings → Web on this computer.",
+    reason_named_link_off: "Over your named link: turn on \"Also over my named link\" in Settings → Access & security on this computer.",
+    reason_quick_link_off: "Over the temporary public link: turn on \"Also over the temporary public link\" in Settings → Access & security on this computer.",
     reason_not_session: "Sign in to authorize.",
     reason_other: "This browser can't be authorized here.",
     refusal_pending: "A request is already waiting in your DM.",
@@ -39,7 +39,6 @@ register("webauth", {
     authorize: "授權這個瀏覽器",
     waiting: "等你在 Discord 或 Telegram 按下確認（{0}）",
     sent: "已送出——請在 5 分鐘內到私訊確認。",
-    publicLink: "臨時公開連結上無法授權：請直接開啟儀表板再授權。",
     reason_disabled: "網頁授權已關閉。",
     reason_loopback_only: "只有這台電腦可以授權，而這個瀏覽器不在這台電腦上。",
     reason_no_account: "這個瀏覽器不是用帳號登入的（agend web）：請用 /web 登入後再授權。",
@@ -47,7 +46,8 @@ register("webauth", {
     reason_not_admin_session: "訪客無法授權。",
     reason_token_rotated: "儀表板的 token 已變更：請重新登入。",
     reason_public_link: "臨時公開連結上無法授權。",
-    reason_named_link_off: "透過固定網域：請在這台電腦的 設定 → 網頁 開啟「也允許透過我的固定網域」。",
+    reason_named_link_off: "透過固定網域：請在這台電腦的 設定 → 存取與安全 開啟「也允許透過我的固定網域」。",
+    reason_quick_link_off: "透過臨時公開連結：請在這台電腦的 設定 → 存取與安全 開啟「也允許透過臨時公開連結」。",
     reason_not_session: "登入後才能授權。",
     reason_other: "這個瀏覽器在這裡無法授權。",
     refusal_pending: "已經有一個請求在你的私訊中等待。",
@@ -62,7 +62,9 @@ register("webauth", {
   },
 });
 const tn = (k, ...v) => t(`webauth.${k}`, ...v);
-const REASONS = ["disabled", "loopback_only", "no_account", "not_admin", "not_admin_session", "token_rotated", "public_link", "named_link_off", "not_session"];
+// The switch and "Only this computer" are changed in Settings on this computer — never over the public link (#2525 review).
+const fixable = (reason) => (reason === "disabled" || reason === "loopback_only") && globalThis.document?.body?.dataset?.publicLink !== "1";
+const REASONS = ["disabled", "loopback_only", "no_account", "not_admin", "not_admin_session", "token_rotated", "public_link", "named_link_off", "quick_link_off", "not_session"];
 // Until when: the time, with the day when it isn't today (an authorization lasts up to 48 h).
 const clock = (ms) => {
   const d = new Date(ms), today = new Date().toDateString() === d.toDateString();
@@ -70,7 +72,6 @@ const clock = (ms) => {
     : d.toLocaleString([], { weekday: "short", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 };
 const mmss = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
-const publicLink = () => globalThis.document?.body?.dataset?.publicLink === "1";
 
 // One read per page load, shared by every line that shows it (the composer's, the session menu's): coming back to a chat
 // reads nothing (#1374). It is read again only after an ask, and while a card is pending.
@@ -98,7 +99,9 @@ export function useWebAuthorization() {
   const [deadline, setDeadline] = useState(0), [now, setNow] = useState(() => Date.now());
   const alive = useRef(true);
   const load = async () => {
-    if (publicLink() || guestPage()) return;
+    // §0.2 / §0.3: over the public link too — the server says whether this browser may be authorized there (its link's
+    // option on) or why not; a guest never asks.
+    if (guestPage()) return;
     const body = await readStatus();
     if (!alive.current) return;
     if (signedOut) { setSt(null); setNotice(null); return; }
@@ -144,7 +147,6 @@ export function resetWebAuthorization() { shared = null; answered = false; infli
 export function AuthorizeChip() {
   const a = useWebAuthorization();
   if (guestPage()) return null;
-  if (publicLink()) return html`<p class="webauth-chip note" data-state="public">${tn("publicLink")}</p>`;
   if (!a.st) return null;
   return html`<div class="webauth-chip" data-state=${a.st.state}>${body(a)}${a.notice ? html` <span class="note" role="status">${a.notice}</span>` : null}</div>`;
 }
@@ -163,7 +165,6 @@ export function ComposerAuth() {
   const tip = useRef("wa-tip-" + Math.random().toString(36).slice(2, 8));
   useEffect(() => { setOpen(false); }, [a.st && a.st.state]);              // a new state closes the bubble
   if (guestPage()) return null;
-  if (publicLink()) return html`<span class="webauth-row note" data-state="public" title=${tn("publicLink")}>${tn("publicLink")}</span>`;
   if (!a.st) return null;
   const st = a.st, id = tip.current;
   const said = a.notice ? html`<span class="webauth-notice" role="status">${a.notice}</span>` : null;
@@ -184,8 +185,8 @@ export function ComposerAuth() {
       title=${tn("authorizeWhy")} aria-label=${tn("authorizeWhy")} onClick=${a.ask}>${tn("authorizeShort")}</button>${said}</span>`;
   }
   const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
-  return html`<span class="webauth-row" data-state="none"><span class="note" title=${why}>${tn("notVerified")}<span class="sr-only">: ${why}</span></span>${st.reason === "disabled" || st.reason === "loopback_only"
-    ? html` · <a href="/settings/web" title=${why}>${tn("settings")}</a>` : null}</span>`;
+  return html`<span class="webauth-row" data-state="none"><span class="note" title=${why}>${tn("notVerified")}<span class="sr-only">: ${why}</span></span>${fixable(st.reason)
+    ? html` · <a href="/settings/access" title=${why}>${tn("settings")}</a>` : null}</span>`;
 }
 
 function body(a) {
@@ -196,5 +197,5 @@ function body(a) {
     return html`<span class="note">${tn("notVerified")} ·</span> <button type="button" class="btn btn-sm" onClick=${a.ask}>${tn("authorize")}</button>`;
   const why = REASONS.includes(st.reason) ? tn(`reason_${st.reason}`) : tn("reason_other");
   // The fix, where there is one the person can take here: the switch lives in Settings → Web.
-  return html`<span class="note">${tn("notVerified")}: ${why}</span>${st.reason === "disabled" || st.reason === "loopback_only" ? html` <a href="/settings/web">${tn("settings")}</a>` : null}`;
+  return html`<span class="note">${tn("notVerified")}: ${why}</span>${fixable(st.reason) ? html` <a href="/settings/access">${tn("settings")}</a>` : null}`;
 }

package/dist/ui/structured-signin.js

@@ -0,0 +1,115 @@
+/* Shared browser controls. No terminal relay, provider output or secrets in diagnostics. */
+const NAMES = { "kiro-cli": "Kiro", "claude-code": "Claude Code", codex: "Codex", antigravity: "Antigravity (console fallback)" };
+const CHOICES = { builder_id: "Builder ID", google: "Google", github: "GitHub", organization: "Your organization", subscription: "Claude subscription", console: "Anthropic Console" };
+const ERRORS = {
+  unsupported_prompt: "This CLI screen is not supported. Cancel and use the console fallback.",
+  cleanup_failed: "The login process could not be confirmed closed. Close it on the host and restart setup before retrying.",
+  signin_cleanup_failed: "The login process could not be confirmed closed. Close it on the host and restart setup before retrying.",
+  signin_action_stale: "That prompt changed or was already answered. Refresh its status; do not submit it again.",
+  signin_console_only: "This backend uses the explicit console fallback.",
+  backend_signin_local_only: "Backend sign-in is available only on this computer. Use the local setup page, or sign in later.",
+  signin_session_expired: "This setup session has ended. Reopen setup on the host.",
+  expired: "This login attempt expired. Start a new attempt.",
+  auth_unconfirmed: "The CLI exited, but credentials could not be verified. Retry or sign in later.",
+  provider_rejected: "The provider rejected this sign-in. Retry or sign in later.",
+};
+
+export function mountStructuredSignIns(root, { endpoint, fetcher = fetch, changed = () => {} } = {}) {
+  const doc = root.ownerDocument;
+  let view = null, busy = false, disposed = false, timer = null, generation = 0, message = "", rendered = "";
+  const el = (tag, text, parent = root) => { const node = doc.createElement(tag); if (text) node.textContent = text; parent.append(node); return node; };
+  const errorText = code => ERRORS[code] || "Could not complete sign-in. Check status, retry, or sign in later.";
+  const button = (parent, label, action) => { const b = el("button", label, parent); b.type = "button"; b.disabled = busy; b.onclick = action; return b; };
+  const request = async data => {
+    const response = await fetcher(endpoint, { method: data ? "POST" : "GET", cache: "no-store", headers: { "Content-Type": "application/json" }, ...(data ? { body: JSON.stringify(data) } : {}) });
+    const body = await response.json().catch(() => null);
+    if (!response.ok) throw new Error(body?.error || "signin_failed");
+    return body;
+  };
+  const accept = next => { view = next; root.dataset.ready = String(view.ready); changed(view); };
+  async function perform(data) {
+    if (busy || disposed) return;
+    busy = true; generation++; message = ""; render();
+    try { const next = await request(data); if (!disposed) accept(next); }
+    catch (error) { if (!disposed) message = errorText(error?.message); }
+    finally { busy = false; if (!disposed) render(); }
+  }
+  function render() {
+    const signature = JSON.stringify([view, busy, message]);
+    if (disposed || rendered === signature) return;
+    rendered = signature; root.replaceChildren();
+    el("h2", "Sign in your AI backends");
+    el("p", "Use the controls here; no terminal typing is needed for Kiro, Claude Code or Codex. You can sign in later from the dashboard.");
+    if (message) { const alert = el("p", message); alert.setAttribute("role", "alert"); }
+    if (!view) { button(root, "Check sign-ins", () => perform({ operation: "refresh" })); return; }
+    for (const backend of view.selected) {
+      const card = el("section"); card.dataset.backend = backend;
+      el("h3", NAMES[backend] || backend, card);
+      const state = view.states[backend], pending = view.pending.includes(backend), skipped = view.skipped.includes(backend);
+      el("p", skipped ? "Sign in later · remains in Needs you" : state === "valid" ? "Signed in ✓" : state === "not_installed" ? "Not installed on this host" : state === "console_only" ? "Use the explicit console fallback, or sign in later." : "Sign-in needed", card);
+      const login = view.login?.backend === backend ? view.login : null;
+      const active = login && login.phase !== "done" && !(login.phase === "failed" && login.reason);
+      if (active) {
+        el("p", login.phase === "waiting" || login.phase === "starting" ? "Waiting for the CLI…" : "Login: " + login.phase.replaceAll("_", " "), card);
+        if (login.phase === "method" && login.canAct) for (const choice of login.choices || []) {
+          if (CHOICES[choice]) button(card, CHOICES[choice], () => perform({ operation: "input", id: login.id, revision: login.revision, action: { kind: "method", choice } }));
+        }
+        if (login.url) {
+          // The host already allowlists these; still never turn a non-HTTPS URL into a link.
+          let url; try { url = new URL(login.url); } catch {}
+          if (url?.protocol === "https:" && !url.username && !url.password) {
+            const link = el("a", "Open provider sign-in", card); link.href = url.href; link.target = "_blank"; link.rel = "noopener noreferrer";
+          }
+        }
+        if (login.code) { el("p", "Device code:", card); el("code", login.code, card); }
+        if (login.canAct && ["code", "start_url", "region"].includes(login.phase)) {
+          const label = el("label", { code: "Paste the returned code", start_url: "Organization Start URL", region: "AWS region" }[login.phase], card);
+          const input = el("input", null, label); input.type = login.phase === "code" ? "password" : "text"; input.autocomplete = "off"; input.spellcheck = false;
+          input.setAttribute("aria-label", label.textContent); input.disabled = busy;
+          button(card, "Submit " + login.phase.replaceAll("_", " "), () => { const value = input.value; input.value = ""; void perform({ operation: "input", id: login.id, revision: login.revision, action: { kind: login.phase, value } }); });
+        }
+        if (["method", "code", "start_url", "region"].includes(login.phase) && !login.canAct) el("p", "Answer sent. Waiting for the next screen; it will not be sent twice.", card);
+        button(card, "Cancel sign-in", () => perform({ operation: "cancel" }));
+      } else {
+        if (login?.reason && login.reason !== "cancelled") el("p", errorText(login.reason), card);
+        const usable = !["antigravity"].includes(backend) && state !== "not_installed";
+        if (usable) button(card, state === "valid" ? "Sign in again" : "Sign in", () => {
+          const relogin = state === "valid";
+          if (relogin && !globalThis.confirm("Sign in again? Kiro will sign out its existing account first.")) return;
+          void perform({ operation: "start", backend, relogin });
+        });
+      }
+      if (pending && !skipped) button(card, "Sign in later", () => perform({ operation: "skip", backend }));
+    }
+    button(root, "Check sign-ins", () => perform({ operation: "refresh" }));
+    if (view.ready) el("p", "You can continue setup.");
+  }
+  async function poll() {
+    if (disposed) return;
+    const before = generation;
+    if (!busy) try { const next = await request(); if (!disposed && before === generation) { accept(next); render(); } }
+    catch (error) { if (!disposed && before === generation) { message = errorText(error?.message); render(); } }
+    if (!disposed) timer = setTimeout(poll, 1000);
+  }
+  render(); void poll();
+  return {
+    addBackends(backends) {
+      if (view && Array.isArray(backends) && backends.every(b => NAMES[b]) && backends.some(b => !view.selected.includes(b)))
+        return perform({ operation: "select", backends: [...new Set([...view.selected, ...backends])] });
+    },
+    addBackend(backend) { if (view && NAMES[backend] && !view.selected.includes(backend)) return perform({ operation: "select", backends: [...view.selected, backend] }); },
+    dispose() { disposed = true; generation++; clearTimeout(timer); root.replaceChildren(); },
+  };
+}
+
+const setupRoot = typeof document === "undefined" ? null : document.getElementById("setupSignins");
+if (setupRoot) {
+  const cards = mountStructuredSignIns(setupRoot, { endpoint: "setup/signins" });
+  const backend = document.getElementById("backend");
+  const select = () => cards.addBackend(backend?.value);
+  backend?.addEventListener("change", select);
+  const observer = new MutationObserver(select); if (backend) observer.observe(backend, { childList: true });
+  // Initial GET may finish after the environment list, so also observe our readiness result.
+  const ready = new MutationObserver(select); ready.observe(setupRoot, { attributes: true, attributeFilter: ["data-ready"] });
+  addEventListener("pagehide", () => { observer.disconnect(); ready.disconnect(); cards.dispose(); }, { once: true });
+}

package/dist/usage-report.d.ts

@@ -7,6 +7,9 @@
  * Honest by construction: an amount is "API-equivalent at list price (checked <date>) — not money spent"; an unpriced
  * model's tokens are shown and its amount is not; Codex's cache writes are "not reported" (every CLI seen records 0),
  * never priced as uncached; an instance whose backend AgEnD cannot measure is listed with its reason, never as $0.
+ * Kiro records no token counts: its rows are ESTIMATED from text size (kiro-usage.ts, design §10.2) and say so — on the
+ * row (`estimated`), on any total that includes one (`includes_estimates`, with the estimated part of the amount), in
+ * the API, on the page and in the CSV. An estimate never mixes silently into a measured number.
  */
 import type { Ledger } from "./cache-ledger.js";
 import { type UsageDays } from "./usage-rollup.js";
@@ -27,6 +30,12 @@ export declare const usageBasis: (checked?: string) => string;
  * latest whole days and says from which date (`dailyFrom`); the rows and totals always cover the whole range.
  */
 export declare const USAGE_DAILY_MAX = 20000;
+/** The backends whose usage is estimated, not measured (#2122 §10.2: Kiro records no token counts). */
+export declare const ESTIMATED_BACKENDS: ReadonlySet<string>;
+/** The backends whose transcripts report reasoning tokens (#2122 §10.3); elsewhere a 0 means not reported. */
+export declare const REPORTS_REASONING: ReadonlySet<string>;
+/** The backends whose transcripts carry a cache-write field that stays 0: "not reported" until a real write is seen. */
+export declare const WRITES_UNREPORTED: ReadonlySet<string>;
 export interface UsageInstanceInput {
     name: string;
     /** Its backend now: what it is collected with from here on (each slice of its history carries its own). */
@@ -63,7 +72,10 @@ export interface UsageInput {
 export interface UsageTotals {
     /** Uncached input. */
     input: number;
+    /** Output without its reasoning part — the units of tokscale's daily rows (design §10.3). */
     output: number;
+    /** The part of the output a CLI reports as reasoning (Codex); 0 where none is reported (Claude). */
+    reasoning: number;
     cacheRead: number;
     cacheWrite5m: number;
     cacheWrite1h: number;
@@ -73,6 +85,12 @@ export interface UsageTotals {
 }
 export interface UsageRow extends UsageTotals {
     key: string;
+    /** Whether any of it comes from a CLI that reports reasoning (REPORTS_REASONING): false → its 0 is "not reported". */
+    reasoningReported: boolean;
+    /** Some of it is estimated (ESTIMATED_BACKENDS); flagged "estimated" (a row) or "includes_estimates" (the totals). */
+    estimated: boolean;
+    /** The estimated part of `amount` (null: nothing estimated is priced). */
+    amountEstimated: number | null;
     total: number;
     /** Delivered messages; null where a message has no such key (by model, by profile). */
     messages: number | null;
@@ -92,6 +110,8 @@ export interface UsageRow extends UsageTotals {
 }
 export interface UsageDaily extends UsageTotals {
     date: string;
+    reasoningReported: boolean;
+    estimated: boolean;
     zone: string;
     instance: string;
     backend: string;

package/dist/usage-report.js

@@ -10,6 +10,12 @@ export const usageBasis = (checked = PRICES_CHECKED) => `API-equivalent at list
  */
 export const USAGE_DAILY_MAX = 20_000;
 const M = 1_000_000;
+/** The backends whose usage is estimated, not measured (#2122 §10.2: Kiro records no token counts). */
+export const ESTIMATED_BACKENDS = new Set(["kiro-cli"]);
+/** The backends whose transcripts report reasoning tokens (#2122 §10.3); elsewhere a 0 means not reported. */
+export const REPORTS_REASONING = new Set(["codex", "grok", "muse", "opencode", "antigravity"]);
+/** The backends whose transcripts carry a cache-write field that stays 0: "not reported" until a real write is seen. */
+export const WRITES_UNREPORTED = new Set(["codex", "muse"]);
 const DATE = /^\d{4}-\d{2}-\d{2}$/;
 /** A range as asked (query string or tool argument); anything else is the last 7 days. */
 export function usageRange(kind, from, to) {
@@ -31,19 +37,23 @@ export function rangeDates(range, now, zone) {
         case "custom": return { from: range.from, to: range.to };
     }
 }
-const zero = () => ({ input: 0, output: 0, cacheRead: 0, cacheWrite5m: 0, cacheWrite1h: 0, cacheWrite: 0, requests: 0 });
-const addTotals = (into, [n, uncached, read, w5, w1h, w, out]) => {
+const zero = () => ({ input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite5m: 0, cacheWrite1h: 0, cacheWrite: 0, requests: 0 });
+/** One slice into a row: `reasoning` is the part of the slice's output reported as reasoning (shown beside the rest). */
+const addTotals = (into, [n, uncached, read, w5, w1h, w, out], reasoning) => {
+    const r = Math.min(Math.max(0, reasoning), out);
     into.requests += n;
     into.input += uncached;
     into.cacheRead += read;
     into.cacheWrite5m += w5;
     into.cacheWrite1h += w1h;
     into.cacheWrite += w;
-    into.output += out;
+    into.output += out - r;
+    into.reasoning += r;
 };
 const splitKey = (mk) => { const bar = mk.lastIndexOf("|"); return { model: mk.slice(0, bar), long: mk.slice(bar + 1) === "1" }; };
 /**
- * The list-price amount of one slice, or null when its model is not in the table. Codex writes not reported are 0 in the
+ * The list-price amount of one slice, or null when its model is not in the table. Reasoning is a part of the slice's
+ * output, so the whole output is priced at the output rate once. Codex writes not reported are 0 in the
  * ledger (it marks writesSeen on the first one above 0), so they add nothing and are never priced as uncached input.
  */
 function amountOf(model, long, [, uncached, read, w5, w1h, w, out]) {
@@ -52,6 +62,7 @@ function amountOf(model, long, [, uncached, read, w5, w1h, w, out]) {
         return null;
     return (uncached * r.input + read * r.read + w5 * r.write5m + w1h * r.write1h + w * r.write + out * r.output) / M;
 }
+const estimatedSlice = (s) => ESTIMATED_BACKENDS.has(s.backend);
 const unknownSource = (s) => s.backend === "unknown" || s.profile === "unknown";
 export function buildUsageReport(input) {
     const { from, to } = rangeDates(input.range, input.now, input.zone);
@@ -70,14 +81,14 @@ export function buildUsageReport(input) {
         if (!i.ledger || !i.days)
             continue;
         coverage.push({ name: i.name, intervals: i.days.coverage.map(([a, b]) => [a, b]) });
-        // Codex: a write is reported only once a real one has been seen (every CLI so far records 0).
+        // Codex and Muse: a write is reported only once a real one has been seen (every CLI so far records 0).
         const writesSeen = i.ledger.writesSeen === true;
         const base = { instance: i.name, team: i.team };
         for (const row of i.days.rows) {
             if (!inRange(row.date))
                 continue;
             for (const [mk, tot] of Object.entries(row.m))
-                slices.push({ ...base, backend: row.be, writesReported: row.be !== "codex" || writesSeen, date: row.date, zone: row.zone, profile: row.pf, ...splitKey(mk), tot });
+                slices.push({ ...base, backend: row.be, writesReported: !WRITES_UNREPORTED.has(row.be) || writesSeen, date: row.date, zone: row.zone, profile: row.pf, ...splitKey(mk), tot, reasoning: row.r?.[mk] ?? 0, cost: row.c?.[mk] ?? 0 });
         }
         for (const [hk, hour] of Object.entries(i.ledger.hours)) {
             const h = Number(hk);
@@ -88,7 +99,7 @@ export function buildUsageReport(input) {
                 continue;
             for (const src of hourSources(hour)) {
                 for (const [mk, tot] of Object.entries(src.m))
-                    slices.push({ ...base, backend: src.backend, writesReported: src.backend !== "codex" || writesSeen, date, zone: input.zone, profile: src.profile, ...splitKey(mk), tot });
+                    slices.push({ ...base, backend: src.backend, writesReported: !WRITES_UNREPORTED.has(src.backend) || writesSeen, date, zone: input.zone, profile: src.profile, ...splitKey(mk), tot, reasoning: src.r[mk] ?? 0, cost: src.c[mk] ?? 0 });
             }
         }
     }
@@ -102,7 +113,7 @@ export function buildUsageReport(input) {
         }
     };
     const rows = new Map();
-    const newRow = (key) => ({ key, ...zero(), total: 0, messages: null, amount: null, priced: "none", flags: [], unpriced: [], instances: [], backends: [], models: [], profiles: [], _amount: 0, _pricedAny: false, _unpricedAny: false });
+    const newRow = (key) => ({ key, ...zero(), reasoningReported: false, estimated: false, amountEstimated: null, _estAmount: 0, _estPriced: false, total: 0, messages: null, amount: null, priced: "none", flags: [], unpriced: [], instances: [], backends: [], models: [], profiles: [], _amount: 0, _pricedAny: false, _unpricedAny: false });
     const uniq = (list, v) => { if (!list.includes(v))
         list.push(v); };
     // Daily rows: one per day, zone, agent, backend, model, tier and profile (an hour's slices summed into their day).
@@ -110,12 +121,18 @@ export function buildUsageReport(input) {
     for (const s of slices) {
         const key = keyOf(s);
         const row = rows.get(key) ?? (rows.set(key, newRow(key)), rows.get(key));
-        addTotals(row, s.tot);
+        addTotals(row, s.tot, s.reasoning);
+        if (REPORTS_REASONING.has(s.backend))
+            row.reasoningReported = true;
         uniq(row.instances, s.instance);
         uniq(row.backends, s.backend);
         uniq(row.models, s.model);
         uniq(row.profiles, s.profile);
-        const amount = amountOf(s.model, s.long, s.tot);
+        // List price first; a model the table lacks takes the cost its CLI reported (Grok), said so (design §10.2).
+        const listed = amountOf(s.model, s.long, s.tot), reported = listed === null && s.cost > 0;
+        const amount = listed ?? (reported ? s.cost : null);
+        if (reported)
+            uniq(row.flags, "cost_reported");
         if (amount === null) {
             row._unpricedAny = true;
             uniq(row.unpriced, s.model);
@@ -124,6 +141,14 @@ export function buildUsageReport(input) {
             row._pricedAny = true;
             row._amount += amount;
         }
+        if (estimatedSlice(s)) {
+            row.estimated = true;
+            uniq(row.flags, "estimated");
+            if (amount !== null) {
+                row._estPriced = true;
+                row._estAmount += amount;
+            }
+        }
         if (!s.writesReported)
             uniq(row.flags, "cache_write_not_reported");
         if (unknownSource(s))
@@ -132,11 +157,13 @@ export function buildUsageReport(input) {
         const dk = [s.date, s.zone, s.instance, s.backend, s.model, tier, s.profile].join("\u0000");
         let d = dailyBy.get(dk);
         if (!d) {
-            d = { date: s.date, zone: s.zone, instance: s.instance, backend: s.backend, model: s.model, tier, profile: s.profile, ...zero(), amount: amount === null ? null : 0,
-                flags: [...(s.writesReported ? [] : ["cache_write_not_reported"]), ...(amount === null ? ["not_priced"] : []), ...(unknownSource(s) ? ["source_unknown"] : [])] };
+            d = { date: s.date, zone: s.zone, instance: s.instance, backend: s.backend, model: s.model, tier, profile: s.profile, ...zero(), reasoningReported: REPORTS_REASONING.has(s.backend), estimated: estimatedSlice(s), amount: amount === null ? null : 0,
+                flags: [...(estimatedSlice(s) ? ["estimated"] : []), ...(s.writesReported ? [] : ["cache_write_not_reported"]), ...(amount === null ? ["not_priced"] : []), ...(unknownSource(s) ? ["source_unknown"] : [])] };
             dailyBy.set(dk, d);
         }
-        addTotals(d, s.tot);
+        addTotals(d, s.tot, s.reasoning);
+        if (reported && !d.flags.includes("cost_reported"))
+            d.flags.push("cost_reported");
         if (amount !== null && d.amount !== null)
             d.amount += amount;
     }
@@ -188,8 +215,9 @@ export function buildUsageReport(input) {
             row.messages ??= 0;
     }
     const finish = (row) => {
-        const { _amount, _pricedAny, _unpricedAny, ...rest } = row;
-        rest.total = rest.input + rest.output + rest.cacheRead + rest.cacheWrite5m + rest.cacheWrite1h + rest.cacheWrite;
+        const { _amount, _pricedAny, _unpricedAny, _estAmount, _estPriced, ...rest } = row;
+        rest.amountEstimated = _estPriced ? _estAmount : null;
+        rest.total = rest.input + rest.output + rest.reasoning + rest.cacheRead + rest.cacheWrite5m + rest.cacheWrite1h + rest.cacheWrite;
         rest.amount = _pricedAny ? _amount : null;
         rest.priced = _pricedAny ? (_unpricedAny ? "partial" : "all") : "none";
         if (_unpricedAny)
@@ -200,15 +228,24 @@ export function buildUsageReport(input) {
         .sort((a, b) => (b.amount ?? -1) - (a.amount ?? -1) || b.total - a.total || a.key.localeCompare(b.key));
     const totals = finish(newRow("all"));
     for (const r of out) {
-        for (const k of ["input", "output", "cacheRead", "cacheWrite5m", "cacheWrite1h", "cacheWrite", "requests"])
+        for (const k of ["input", "output", "reasoning", "cacheRead", "cacheWrite5m", "cacheWrite1h", "cacheWrite", "requests"])
             totals[k] += r[k];
         totals.total += r.total;
         if (r.messages !== null)
             totals.messages = (totals.messages ?? 0) + r.messages;
         if (r.amount !== null)
             totals.amount = (totals.amount ?? 0) + r.amount;
+        if (r.reasoningReported)
+            totals.reasoningReported = true;
+        if (r.estimated) {
+            totals.estimated = true;
+            uniq(totals.flags, "includes_estimates");
+        }
+        if (r.amountEstimated !== null)
+            totals.amountEstimated = (totals.amountEstimated ?? 0) + r.amountEstimated;
         for (const f of r.flags)
-            uniq(totals.flags, f);
+            if (f !== "estimated")
+                uniq(totals.flags, f);
         for (const m of r.unpriced)
             uniq(totals.unpriced, m);
     }