@songsid/agend 2.3.2-beta.1 → 2.3.2-beta.11

package/dist/ui/shared/app.css

@@ -573,6 +573,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    the message's overflow-wrap: anywhere that is one character wide (the #1672 status line's time, one glyph per line). */
 .msg .time { font-family: var(--font-mono); white-space: nowrap; flex: none; }
 .msg.user { align-self: flex-end; max-width: min(80%, 620px); }
+/* Full width (the header's ⋯ menu, this browser's choice): the thread and the composer take the panel, less their own
+   padding, for wide tables and code; a person's bubble keeps its cap (above). A phone's column is the screen already. */
+@media (min-width: 900px) { .p-chat[data-width="full"] .thread, .p-chat[data-width="full"] .dock-col { max-width: none; } }
 .msg.user .meta { justify-content: flex-end; }
 /* #1773: the bubble hugs its text. The message is as wide as its widest child — usually the meta row (sender, a time
    such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
@@ -870,6 +873,9 @@ img.amb-p { object-fit: contain; }
 .st-link:hover { text-decoration-thickness: 2px; }
 .prompt .acts { display: flex; gap: var(--s-2); margin-top: var(--s-2); align-items: center; flex-wrap: wrap; }
 .prompt .wait { font-size: var(--fs-xs); color: var(--text-3); }
+/* #2675: a prompt's typed answer. 16px keeps iOS from zooming in on focus (#1612). */
+.prompt .prompt-text { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
+.prompt .prompt-text input { flex: 1; min-width: 0; font-size: 16px; }
 .work-bar { display: flex; gap: var(--s-2); align-items: center; padding: 0 var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
 .work-bar .lbl { flex: 1; min-width: 0; }
 .work-bar .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.2s ease-in-out infinite; flex-shrink: 0; }
@@ -928,6 +934,8 @@ img.amb-p { object-fit: contain; }
 .s-guests .guest-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px var(--s-3); max-height: 220px; overflow: auto;
   padding: var(--s-1) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
 .s-guests .guest-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #2667: the ClassicBot rooms follow the fleet's instances under their own heading, across the grid. */
+.s-guests .guest-names-group { grid-column: 1 / -1; margin-top: var(--s-2); }
 .s-guests .guest-list, .s-guests .g-pick { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
 .s-guests .guest-row, .s-guests .g-cand { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
 .s-guests .guest-row.s-dirty { border-radius: 0; margin-left: 0; align-self: stretch; padding-left: calc(var(--s-2) + 3px); padding-right: var(--s-2); }
@@ -1345,6 +1353,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); }
@@ -1728,7 +1748,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; }
@@ -1762,6 +1782,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oo-people-list label { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: var(--fs-xs); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
 .oo-note { font-size: var(--fs-xs); }
 .oo-stage { position: relative; flex: 1 1 auto; min-height: 340px; overflow: hidden; background: var(--bg); touch-action: none; user-select: none; -webkit-user-select: none; }
+/* #2554: clip, not a scroll container — nothing past the edge (a tile's label) can scroll the stage and its controls. */
+.oo-stage { overflow: clip; }
 .oo-canvas { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; cursor: grab; touch-action: none; }
 .oo-canvas:active { cursor: grabbing; }
 .oo-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@@ -1785,6 +1807,16 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oo-mini-dot.match { fill: var(--focus); }
 .oo-tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 240px; pointer-events: none; padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.4;
   color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow-wrap: anywhere; }
+/* #2554: All offices — each tile's label (office name and head count) just above the tile, placed by the page (left, top,
+   max-width through the CSSOM); a button that opens the office, the lobby's a plain chip. */
+.oo-tile-label { position: absolute; left: 0; top: 0; z-index: 3; transform: translateY(calc(-100% - 4px)); max-width: 240px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; padding: 2px 8px; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 18px; color: var(--text);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
+button.oo-tile-label { cursor: pointer; }
+button.oo-tile-label:hover { border-color: var(--accent); }
+button.oo-tile-label:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.oo-tile-label.lobby { color: var(--text-2); }
+.oo-lobby-tile { font-size: var(--fs-xs); color: var(--text-2); }
 /* The desks as a list: for a screen reader, and shown (over the stage's corner) while the keyboard is in it. */
 .oo-desks { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; list-style: none; }
 .oo-desks:focus-within { position: absolute; z-index: 7; left: var(--s-2); bottom: var(--s-2); width: auto; height: auto; max-height: 40%; margin: 0; padding: var(--s-1); clip: auto; overflow-y: auto;
@@ -1819,22 +1851,42 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .ol-seat > circle { fill: var(--ok); }
 .ol-furniture > rect { fill: var(--warn); }
 .ol-door > rect { fill: var(--danger); }
+/* #2665: an item's night place — a moon on a faint disc, a thin dashed line to its day place. */
+.ol-night > circle { fill: var(--surface); fill-opacity: 0.85; }
+.ol-night > .ol-moon { fill: var(--warn); stroke: none; pointer-events: none; }
+.ol-night-line { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-opacity: 0.8; pointer-events: none; }
+/* #2691: a reserved seat — a dashed ring round its dot; the selected seat's "Reserved for" picks. */
+.ol-seat > .ol-for-ring { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 3 3; pointer-events: none; }
+.ol-for { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); }
+.ol-for > legend { float: left; margin-right: var(--s-2); }
 .ol-waypoint > circle { fill: var(--focus); }
 .ol-handle.on > circle, .ol-handle.on > rect, .ol-handle:focus-visible > circle, .ol-handle:focus-visible > rect { stroke: var(--focus); stroke-width: 4; }
 .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). */
+  /* A phone: the bars at the column's narrower padding; no overview (as the canvas). #2689: the stage takes the panel's
+     height that is left under the bars (the column, .oc-office and .oo grow into it) and no more, so zoomed in the
+     scene's bottom is on screen: a floor fixed to the window (100dvh less a guess at the bars) put it under the tab bar
+     once the bars wrapped. Its own floor is low enough for a 375 × 667 phone with the Office bar on five rows (215 px
+     left); only a shorter screen scrolls the panel (on the bars: the stage's touches are its own). */
   .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-stage { min-height: max(300px, calc(100dvh - 300px)); }
+  .oo > :not(.oo-stage):not(dialog) { margin-left: var(--s-3); margin-right: var(--s-3); }
+  .oo-stage { min-height: 200px; }
   .oo-pick .tb-select { max-width: 150px; }
   .oo-mini { display: none; }
   .oo-zoom .icon-btn { width: 40px; height: 40px; }
+  /* #2689: a column of the label and five 40 px buttons (~240 px) is taller than that stage: a row along its top
+     instead, out of fullscreen (there the stage is the screen, and the office switcher is on the left of its top). */
+  .oo:not(.fs) .oo-zoom { flex-direction: row; }
+  .oo:not(.fs) .oo-zoom-pct { display: flex; align-items: center; padding: 0 6px; border-bottom: 0; border-right: 1px solid var(--border); }
+  .oo:not(.fs) .oo-zoom .icon-btn + .icon-btn { border-top: 0; border-left: 1px solid var(--border); }
 }
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
@@ -1906,6 +1958,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); }
@@ -2473,3 +2526,31 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .msg.user .msg-reactions { justify-content: flex-end; }
 .msg-reactions .reaction { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px;
   border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-family: var(--font-emoji); font-size: 15px; line-height: 1; }
+
+/* #2636: an Office share link's page (office-share-page.js) — the Office alone, filling the window under a one-line head. */
+.share-page { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); color: var(--text); }
+.share-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
+.share-head .share-note { margin-left: auto; }
+.share-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: var(--s-2); }
+.share-loading, .share-page > .note { padding: var(--s-4); }
+.share-ended { align-items: center; justify-content: center; padding: var(--s-6); text-align: center; }
+@media (max-width: 640px) { .share-head .share-note { margin-left: 0; flex-basis: 100%; } }
+
+/* #2636: Office share links — the Share… dialog and the open links (office-share-dialog.js; Settings → Access & security). */
+.os { display: flex; flex-direction: column; gap: var(--s-3); }
+.os > p { margin: 0; }
+.os-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: end; }
+.os-form .check, .os-form .note { grid-column: 1 / -1; margin: 0; }
+.os-made { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.os-url { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
+  background: var(--bg); color: var(--text); font-size: var(--fs-sm); outline: none; }
+.os-url:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); }
+.os-made .note { flex-basis: 100%; margin: 0; }
+.os-head { margin: var(--s-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
+.os-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.os-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.os-what { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
+.os-all { margin-top: var(--s-2); }
+.os-none { margin: 0; }
+.os-form .os-err { grid-column: 1 / -1; margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-sm); }
+@media (max-width: 480px) { .os-form { grid-template-columns: 1fr; } }

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