@songsid/agend 2.3.2-beta.3 → 2.3.2-beta.5

package/dist/ui/shared/app-shell.js

@@ -16,7 +16,8 @@ import { onPrefsChanged, savePref } from "./app-prefs.js";
 import { applyPageTheme, pageNow, resolvedMode, themesStore } from "./app-themes.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
 import { InstanceNav, RosterNav, namesStore, setNamesPrimary } from "./instance-nav.js";
-import { UsageRail, usageRailStore } from "./header-tools.js";
+import { usageRailStore } from "./header-tools.js";
+import { RightRail, sidePanelStore } from "./side-panel.js";
 import { OwnerCssKeepBar } from "./owner-css.js";
 import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.js";
 
@@ -89,14 +90,17 @@ export function openSearch(preset = {}) {
 }
 /**
  * Ctrl+K (⌘K) anywhere opens search; Ctrl+F (⌘F) in an agent's chat opens it narrowed to that agent — elsewhere the
- * browser's own find stays. Not while another dialog is open (search, open already, has its input focused).
+ * browser's own find stays. Not while another dialog is open (search, open already, has its input focused); a docked
+ * side panel (#2585) is not one.
  */
 export function handleSearchKey(e) {
   if (!searchOffered(true)) return;
   if (e.isComposing || e.altKey || e.shiftKey || !(isMacLike() ? e.metaKey : e.ctrlKey)) return;
   const key = (e.key || "").toLowerCase();
   if (key !== "k" && key !== "f") return;
-  if (typeof document !== "undefined" && document.querySelector("dialog[open]")) return;
+  // #2585: a docked side panel is not modal — the page beside it is in use, so search is too (a result that leaves
+  // the page asks first when the panel holds changes: side-panel.js).
+  if (typeof document !== "undefined" && document.querySelector("dialog[open]:not(.side-panel)")) return;
   const route = navStore.get().route;
   if (key === "f" && !(route && route.panel === "chat" && route.instance)) return;
   e.preventDefault();
@@ -127,7 +131,7 @@ export const sidebarWidthStore = createStore({ width: null });
 function mainBudget() {
   const vw = viewportWidth();
   if (vw < 1200 || typeof document === "undefined") return vw;
-  const rail = document.querySelector(".u-rail");
+  const rail = document.querySelector(".shell > .u-rail, .shell > .side-panel");   // #2585: a docked panel in its place
   if (!rail) return vw;
   const w = Math.round(rail.getBoundingClientRect ? rail.getBoundingClientRect().width : 0) || RAIL_W;
   return vw - w;
@@ -181,11 +185,15 @@ function SidebarResize() {
     // once the page has drawn its change.
     const again = () => afterPaint(applyKeptSidebarWidth);
     const offRail = usageRailStore.subscribe(again);
+    // #2585: a docked panel in the rail's place (it is published on every render of its editor: only its coming and
+    // going changes the room).
+    let docked = !!sidePanelStore.get().panel;
+    const offPanel = sidePanelStore.subscribe(() => { const now = !!sidePanelStore.get().panel; if (now !== docked) { docked = now; again(); } });
     const offNav = navStore.subscribe(again);
     const w = win();
     if (w && typeof w.addEventListener === "function") w.addEventListener("resize", applyKeptSidebarWidth);
     return () => {
-      offRail(); offNav();
+      offRail(); offPanel(); offNav();
       if (w && typeof w.removeEventListener === "function") w.removeEventListener("resize", applyKeptSidebarWidth);
       if (activeDrag) activeDrag.end(false);   // unmounted mid-drag: nothing kept, nothing left behind
     };
@@ -787,7 +795,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
       ${viewOnly || guest || !shell.banner ? null : html`<${shell.banner} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
-    ${guest ? null : html`<${UsageRail} route=${nav.route} />`}
+    ${guest ? null : html`<${RightRail} route=${nav.route} />`}
     <${BottomTabs} route=${nav.route} viewOnly=${viewOnly} />
     ${shell.dialog ? html`<${shell.dialog.Component} ...${shell.dialog.props} onClose=${closeDialog} />` : null}
     ${viewOnly || guest || (nav.route && nav.route.panel === "settings") ? null : html`<${PendingChanges} />`}

package/dist/ui/shared/app-stream.js

@@ -36,7 +36,8 @@
 // tasks — the task board changed: the card numbers a write touched (SSE only: the board reads again when it is shown).
 // offices — the stored offices changed ({ rev }; SSE only: the Office view reads /ui/offices again).
 // office_skins — a skin pack was uploaded or deleted ({ rev }; SSE only: the Office view reads /ui/office-skins again).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices", "office_skins"];
+// office_acts — the agents' live acts in the Office view changed ({ acts }, #2578; a poll page reads /ui/office-acts).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks", "offices", "office_skins", "office_acts"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed

package/dist/ui/shared/app.css

@@ -1348,6 +1348,18 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 @media (prefers-reduced-motion: no-preference) { .u-crow { transition: background-color 0.15s var(--ease); } }
 .u-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
 @media (max-width: 1199px) { .u-rail { display: none; } }
+/* #2585: the docked side panel (side-panel.js), in the usage rail's place beside the page — a non-modal dialog, so the
+   shared dialog's head, body and actions, laid out as a full-height column. Below the rail's width it is never drawn
+   (the editor is the centred Dialog there). */
+.dlg.side-panel { position: static; inset: auto; margin: 0; width: 400px; max-width: 400px; height: auto; max-height: none; flex-shrink: 0;
+  display: flex; flex-direction: column; min-height: 0; border-radius: 0; box-shadow: none; border-left: 1px solid var(--border); background: var(--bg); color: var(--text); }
+.side-panel .dlg-box { flex: 1; min-height: 0; max-height: none; }
+.side-panel .dlg-head { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
+.side-panel .dlg-body { flex: 1; min-height: 0; padding-top: var(--s-4); }
+.side-panel .dlg-actions { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); }
+@media (max-width: 1199px) { .dlg.side-panel { display: none; } }
+/* A toast (Offices saved.) beside a docked panel, not over its Cancel and Save. */
+@media (min-width: 1200px) { .shell:has(> .side-panel) .toasts { right: calc(400px + var(--s-6)); } }
 @media (max-width: 899px) {
   .hide-narrow { display: none; }
   .v-id { padding-left: var(--s-3); padding-right: var(--s-3); }
@@ -1731,7 +1743,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-office > .oc-bar { margin: 0; padding: var(--s-3) var(--s-5) var(--s-2); }
 .oc-office > .oc-legend { margin: 0 var(--s-5) var(--s-2); }
 .oo { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; width: 100%; }
-.oo > :not(.oo-stage) { margin-left: var(--s-5); margin-right: var(--s-5); }
+.oo > :not(.oo-stage):not(dialog) { margin-left: var(--s-5); margin-right: var(--s-5); }   /* not the editors' dialogs: they centre themselves (#2585) */
 .oo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
 .oo-pick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
 .oo-pick .tb-select { max-width: 200px; }
@@ -1839,13 +1851,16 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .ol-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2);
   background: var(--surface); border-top: 1px solid var(--border); }
 .ol-actions { display: inline-flex; gap: var(--s-2); margin-left: auto; }
+/* #2585: Edit layout's controls docked in the side panel (a wide desk): one column, the waypoint's own row wrapping. */
+.ol-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
+.ol-side .ol-corridors { display: flex; flex-wrap: wrap; gap: var(--s-2); }
 .ol-corridors { display: inline-flex; flex-wrap: wrap; gap: 4px; }
 .ol-msg { flex-basis: 100%; margin: 0; }
 @media (max-width: 640px) {
   /* A phone: the bars at the column's narrower padding; the stage at least most of a screen; no overview (as the canvas). */
   .oc-office > .oc-bar { padding: var(--s-2) var(--s-3); }
   .oc-office > .oc-legend { margin: 0 var(--s-3) var(--s-2); }
-  .oo > :not(.oo-stage) { margin-left: var(--s-3); margin-right: var(--s-3); }
+  .oo > :not(.oo-stage):not(dialog) { margin-left: var(--s-3); margin-right: var(--s-3); }
   .oo-stage { min-height: max(300px, calc(100dvh - 300px)); }
   .oo-pick .tb-select { max-width: 150px; }
   .oo-mini { display: none; }
@@ -1921,6 +1936,7 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .us-bar { display: block; width: 100%; height: 6px; margin: 4px 0; }
 .us-bar-bg { fill: var(--surface-2); } .us-bar-fg { fill: var(--us-0); }
 .us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
+.us-est { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }
 .us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
 .us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
 .us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

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