toolroll 0.9.86 → 0.9.87

package/dist/spend-ui.js

@@ -1,28 +1,35 @@
 /**
- * The Spend page (docs/plans/spend-dashboard.md, slice 1): what agent work cost this month, with API dollars, plan
- * usage and unknown cost kept apart and never added together, broken down by project, model, role and person, the
- * runs that cost most, and what isn't recorded here. An instance operator's page. Monthly limits show read-only here
- * and change on Settings → Spend, with a step-up.
+ * The Spend page (docs/plans/spend-dashboard.md, slice 1), in the kit's Settings frame (group "spend"): the monthly
+ * limits first (the one that needs you on top), then what agent work cost in a month, with API dollars, plan usage
+ * and unknown cost kept apart and never added together, broken down by project and model (and, on demand, role,
+ * person and the costliest runs), the plan windows, and what isn't recorded here. An instance operator's page.
+ * A limit changes in place: Edit limit opens its form under the row (`?edit=<target>`), saved with a step-up.
  */
-import { html, postForm, reauth } from "./html.js";
+import { html, postForm } from "./html.js";
+import { approvalAsk, termsOf } from "./design/kit.js";
+import { acts, btn, chip, disclose, dock, empty, field, input, note, notice, segLinks, settingsShell } from "./server/kit.js";
 import { budgetLabel, usd } from "./spend.js";
 import { runHref, taskHref } from "./server/http.js";
 const projectName = (repo) => repo.split("/").filter(Boolean).pop() ?? repo;
-export const SPEND_CSS = `.spend{max-width:960px;min-width:0}.spend-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.spend-head h1{margin:0}` +
-    `.spend-month{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.875rem;margin:0}` +
-    `.spend h2{font-size:.9375rem;margin:24px 0 8px}.spend table{width:100%;border-collapse:collapse;font-size:.8125rem}.spend th,.spend td{text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}` +
-    `.spend th{font-weight:500;color:var(--muted-foreground)}.spend td.n,.spend th.n{text-align:right;font-variant-numeric:tabular-nums}.spend td.n,.spend th.n{white-space:nowrap}.spend table.lines td:first-child{overflow-wrap:break-word;width:40%}` +
-    `.spend-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 4px}.spend-figure{border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-width:0}` +
-    `.spend-figure h2{margin:0;font-size:.8125rem;font-weight:500;color:var(--muted-foreground)}.spend-figure .value{margin:6px 0 0;font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}` +
-    `.spend-figure .meta{margin:4px 0 0}.spend-not-counted ul{margin:0;padding-left:20px;font-size:.8125rem}.spend-not-counted li{margin:2px 0}` +
-    `.budget{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--border)}.budget .name{font-weight:500;font-size:.875rem}` +
-    `.budget .figures{font-size:.8125rem;font-variant-numeric:tabular-nums;text-align:right}.budget .bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--muted);overflow:hidden}` +
-    `.budget .bar span{display:block;height:100%;background:var(--foreground)}.budget.over .bar span{background:var(--danger)}.budget.over .figures{color:var(--danger)}.budget .meta{grid-column:1/-1}` +
-    `.budget details{grid-column:1/-1}.spend form.budget-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 12px;align-items:end;margin:8px 0}` +
-    `.spend form.budget-form label{display:grid;gap:4px;font-size:.8125rem}.spend form.budget-form .choice{display:flex;gap:8px;align-items:center}.spend form.budget-form button{justify-self:start}` +
-    `.spend-models dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin:0 0 8px;font-size:.875rem}.spend-models dt{color:var(--muted-foreground)}.spend-models dd{margin:0;overflow-wrap:anywhere}` +
-    `@media(max-width:640px){.spend-figures{grid-template-columns:minmax(0,1fr)}.spend table.lines thead{display:none}.spend table.lines tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--border)}` +
-    `.spend table.lines td{border:0;padding:0;white-space:normal}.spend table.lines td:first-child{grid-column:1/-1;font-weight:500;width:auto}.spend table.lines td.n{text-align:left;color:var(--muted-foreground)}.spend table.lines td.n::before{content:attr(data-label);display:block;font-size:.6875rem}}`;
+/** The page's own layout: the limit rows and meters, the summary figures and the quiet bars. Colour from tokens only. */
+export const SPEND_CSS = `.spend{display:grid;gap:24px;min-width:0}.spend-sec{display:grid;gap:0}.spend-sec .k-secthead{margin-bottom:0}.spend-sec .k-secthead small{font-weight:400;color:var(--so-muted);font-size:12.5px}` +
+    `.spend-lim{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--so-line)}.spend-lim-h{display:grid;grid-template-columns:minmax(0,1fr) auto 124px;gap:12px;align-items:center}` +
+    `.spend-lim-l{display:grid;gap:2px;min-width:0}.spend-lim-t{font-weight:500;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}.spend-lim-x{font-size:12.5px;color:var(--so-muted)}` +
+    `.spend-fig{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}.spend-lim-a{display:flex;justify-content:flex-end}.spend-lim-a .k-btn{min-width:108px}` +
+    `.spend-meter{display:block;height:6px;border-radius:3px;background:var(--so-soft);overflow:hidden}.spend-meter>i{display:block;height:100%;border-radius:3px;background:var(--so-neutral-ink)}.spend-meter.over>i{background:var(--so-danger)}` +
+    `.spend-edit{display:grid;gap:12px;padding:4px 0 4px}.spend-edit-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}.spend-edit-row .k-field{flex:0 1 220px}.spend-edit-row .k-checks{min-height:32px}` +
+    `.spend-edit>.k-field{max-width:300px}.spend-month{display:flex;align-items:center;gap:12px;flex-wrap:wrap}` +
+    `.spend-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--so-line);border-bottom:1px solid var(--so-line)}.spend-sum>div{display:grid;gap:4px;align-content:start;padding:16px 16px 16px 0;min-width:0}` +
+    `.spend-sum>div+div{border-left:1px solid var(--so-line);padding-left:16px}.spend-sum-k{font-size:12px;color:var(--so-muted)}.spend-sum-v{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.spend-sum-x{font-size:12px;color:var(--so-muted);line-height:1.45}` +
+    `.spend-bars{display:grid}.spend-bar{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) 84px;gap:12px;align-items:center;min-height:40px;padding:6px 0;border-bottom:1px solid var(--so-line)}` +
+    `.spend-bar.h{min-height:28px;font-size:11.5px;color:var(--so-muted)}.spend-bar.tot{font-weight:600;border-bottom:0}.spend-bar-n{min-width:0;overflow-wrap:anywhere}.spend-bar-n small{display:block;font-size:11.5px;color:var(--so-muted)}` +
+    `.spend-lane{position:relative;height:14px}.spend-lane>i{position:absolute;left:0;top:4px;height:6px;border-radius:3px;background:var(--so-neutral-ink);min-width:3px}.spend-bar-v{text-align:right;font-variant-numeric:tabular-nums}` +
+    `.spend-runs{display:grid}.spend-run{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--so-line)}.spend-run small{grid-column:1/-1;color:var(--so-muted);font-size:12px;overflow-wrap:anywhere}` +
+    `.spend-wins{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding-top:12px}.spend-win{display:grid;gap:6px;min-width:0}.spend-win-h{display:flex;justify-content:space-between;gap:8px}.spend-win-h b{font-weight:500}` +
+    `.spend-win.warning .spend-meter>i,.spend-win.danger .spend-meter>i{background:var(--so-danger)}.spend .k-disclose{padding-top:4px}.spend .k-disclose[open]>summary{margin-bottom:8px}` +
+    `@media(max-width:760px){.spend-lim-h{grid-template-columns:minmax(0,1fr) auto}.spend-lim-a{grid-column:1/-1}.spend-lim-a .k-btn{width:100%}.spend-sum{grid-template-columns:minmax(0,1fr)}` +
+    `.spend-sum>div+div{border-left:0;border-top:1px solid var(--so-line);padding-left:0}.spend-bar{grid-template-columns:minmax(0,120px) minmax(0,1fr) 68px;gap:8px;font-size:12.5px}` +
+    `.spend-edit-row .k-field{flex:1 1 100%}.spend .k-btn.k-btn-primary.k-docked{display:none}}`;
 const ROLE_WORDS = {
     builder: "Builds", repair: "Repairs", planner: "Plans", reviewer: "Reviews", scout: "Scouting",
     lead: "Lead chat", chat: "Chat", subagent: "Subagents", flow: "Flows", evals: "Evals",
@@ -38,6 +45,9 @@ export const NOT_COUNTED = [
 /** Dollars for the page: a positive amount under a cent reads "<$0.01", never a false $0. */
 export const money = (microusd) => microusd > 0 && microusd < 10_000 ? "<$0.01" : usd(microusd);
 const each = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+const monthWords = (name, style = "long") => new Intl.DateTimeFormat("en-US", { month: style, year: "numeric", timeZone: "UTC" }).format(new Date(`${name}-01T00:00:00.000Z`));
+/** A limit Settings flags as Needs you: one that pauses work and is at or near its limit. */
+export const limitNeedsYou = (budget) => budget.hardStop && budget.percent >= 90;
 /** A line's plan usage in words: the reported usage, or that none was reported. Never $0 for unreported usage. */
 const usageWords = (line) => line.usageCount === 0 ? "—" : line.usageMicrousd > 0 ? `${money(line.usageMicrousd)}${line.usageUnreported > 0 ? ` + ${line.usageUnreported} not reported` : ""}` : "not reported";
 /** A line's unknown cost in words: how many, and a saved charge as an estimate. Never $0. */
@@ -46,52 +56,110 @@ const unknownWords = (line) => {
     return line.unknown > 0 ? `${line.unknown}${counted === "" ? "" : ` · ${counted}`}` : counted === "" ? "—" : counted;
 };
 const apiWords = (line) => line.apiMicrousd > 0 ? money(line.apiMicrousd) : "—";
-function linesTable(title, lines, name, top = 12, detail = () => "") {
-    if (lines.length === 0)
-        return "";
-    return html `<section><h2>${title}</h2><table class="lines"><thead><tr><th></th><th class="n">API dollars</th><th class="n">Plan usage</th><th class="n">Unknown</th></tr></thead><tbody>${lines.slice(0, top).map(line => html `<tr><td>${name(line.key)}${detail(line) === "" ? "" : html ` <span class="meta">${detail(line)}</span>`}</td><td class="n" data-label="API dollars" data-amount-kind="api">${apiWords(line)}</td><td class="n" data-label="Plan usage" data-amount-kind="subscription">${usageWords(line)}</td><td class="n" data-label="Unknown" data-amount-kind="unknown">${unknownWords(line)}</td></tr>`)}</tbody></table></section>`;
+const sec = (id, title, state, body, attrs = "") => html `<section class="k-sec spend-sec" aria-labelledby="spend-${id}"${attrs}><div class="k-secthead"><h3 id="spend-${id}">${title}${state ? html ` <small>· ${state}</small>` : ""}</h3></div>${body}</section>`;
+/** A breakdown as quiet bars of API dollars; plan usage and unknown cost stay on the line, never added in. */
+function bars(head, lines, name, max, top = 12, detail = () => "") {
+    const rows = lines.slice(0, top).map(line => {
+        const sub = [detail(line), line.usageCount > 0 ? `plan usage ${usageWords(line)}` : "", line.unknown > 0 || line.estimatedMicrousd > 0 ? `unknown ${unknownWords(line)}` : ""].filter(Boolean).join(" · ");
+        const width = max > 0 ? Math.max(0, Math.min(100, (line.apiMicrousd / max) * 100)) : 0;
+        return html `<div class="spend-bar" role="row"><span class="spend-bar-n" role="cell">${name(line.key)}${sub === "" ? "" : html `<small data-amount-kind="${line.usageCount > 0 ? "subscription" : "unknown"}">${sub}</small>`}</span>\
+<span class="spend-lane" role="cell" aria-hidden="true">${line.apiMicrousd > 0 ? html `<i style="width:${width.toFixed(1)}%"></i>` : ""}</span><span class="spend-bar-v" role="cell" data-amount-kind="api">${apiWords(line)}</span></div>`;
+    });
+    const total = lines.reduce((sum, line) => sum + line.apiMicrousd, 0);
+    return html `<div class="spend-bars" role="table" aria-label="${head}"><div class="spend-bar h" role="row"><span role="columnheader">${head}</span><span role="columnheader"></span><span class="spend-bar-v" role="columnheader">API dollars</span></div>${rows}\
+<div class="spend-bar tot" role="row"><span role="cell">Total</span><span role="cell"></span><span class="spend-bar-v" role="cell">${total > 0 ? money(total) : "—"}</span></div></div>`;
 }
-/** A monthly limit's row; `editor` is Settings → Spend's change form, nothing on the Spend page. */
-function limitRow(budget, nameOfSubagent, editor) {
-    const width = Math.min(100, Math.max(0, budget.percent));
-    const over = budget.spentMicrousd >= budget.limitMicrousd;
-    const label = budgetLabel(budget, budget.scope === "subagent" ? nameOfSubagent(budget.key) : undefined).replace(/'s$/, "");
-    return html `<div class="budget${over ? " over" : ""}" data-budget="${budget.id}"><span class="name">${label}</span><span class="figures">${money(budget.spentMicrousd)} of ${usd(budget.limitMicrousd)} · ${budget.percent}%</span><span class="bar" aria-hidden="true"><span style="width:${width}%"></span></span><span class="meta">${over && budget.hardStop ? "Used up: new API work waits until next month or a higher limit." : budget.hardStop ? "Pauses new API work at 100%." : "Alerts only."}${budget.unpriced > 0 ? ` ${budget.unpriced} without a price.` : ""}</span>${editor}</div>`;
+const editHref = (target, month, current) => `/spend?${month === current ? "" : `month=${month}&`}edit=${encodeURIComponent(target)}`;
+/** The open limit form, under its row: amount and pause, validated next to the field before any password; saving
+ * is a step-up (/spend/budget proves the password again, in the write). */
+function limitForm(row, edit, view, targets) {
+    const id = `limit-${edit.target.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "").slice(0, 60) || "new"}`;
+    const facts = view.facts ?? { passwordless: false, remembered: false };
+    const amount = edit.usd ?? (row?.budget ? String(Math.round(row.budget.limitMicrousd / 1_000_000)) : "");
+    const stop = edit.stop ?? row?.budget?.hardStop ?? true;
+    const choose = row === null && targets !== undefined
+        ? field({ id: `${id}-for`, label: "For", control: html `<span class="k-selw wide"><select class="k-sel" id="${id}-for" name="target" required>${["People", "Subagents"].map(group => {
+                const members = targets.filter(one => one.group === group);
+                return members.length === 0 ? "" : html `<optgroup label="${group}">${members.map(one => html `<option value="${one.value}"${one.value === edit.target ? html ` selected` : ""}>${one.label}</option>`)}</optgroup>`;
+            })}</select></span>` })
+        : "";
+    const password = approvalAsk("step-up", facts) === "password"
+        ? field({ id: `${id}-pw`, label: "Your password", control: input({ id: `${id}-pw`, name: "password", type: "password", attrs: { autocomplete: "current-password", required: true } }) })
+        : "";
+    const back = view.month === view.current ? "/spend" : `/spend?month=${view.month}`;
+    const body = html `${choose}<div class="spend-edit-row">${field({ id: `${id}-usd`, label: "Monthly limit (US dollars)", error: edit.fieldError ?? null,
+        control: input({ id: `${id}-usd`, name: "usd", value: amount, error: Boolean(edit.fieldError), attrs: { inputmode: "numeric", autocomplete: "off", "data-spend-usd": "", autofocus: true } }) })}\
+<div class="k-checks"><label><input type="checkbox" name="stop" value="1"${stop ? html ` checked` : ""}>Pause new API work at the limit</label></div></div>\
+${note(`Unchecked means alerts only. Plan usage never counts toward a limit. ${termsOf("step-up", facts)}`)}${password}\
+${acts(btn("Save limit", { variant: "primary", type: "submit", docked: true, attrs: { name: "action", value: "save" } }), row?.budget ? btn("Remove limit", { variant: "ghost", type: "submit", attrs: { name: "action", value: "remove", formnovalidate: true, "data-spend-remove": "" } }) : "", btn("Cancel", { variant: "ghost", href: back }))}${edit.problem ? notice(edit.problem) : ""}`;
+    return postForm("/spend/budget", body, { attrs: { class: "spend-edit", id, "data-spend-limit": "", novalidate: true }, hidden: row === null ? {} : { target: row.target } });
 }
-export function spendHtml(view, notice) {
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
-    const { totals } = view.report;
+function limitRow(row, view, current, open) {
+    const budget = row.budget;
+    const hot = budget !== null && limitNeedsYou(budget);
+    const over = budget !== null && budget.spentMicrousd >= budget.limitMicrousd;
+    const hint = budget === null ? "No limit." : over && budget.hardStop ? "Used up: new API work waits until next month or a higher limit."
+        : `${budget.hardStop ? "Pauses new API work at the limit." : "Alerts only."}${budget.unpriced > 0 ? ` ${each(budget.unpriced, "piece")} of work without a price.` : ""}`;
+    const fig = budget === null ? `${money(row.spentMicrousd)} so far` : `${money(budget.spentMicrousd)} of ${usd(budget.limitMicrousd)} · ${budget.percent}%`;
+    const action = open !== null ? "" : btn(budget === null ? "Set a limit" : "Edit limit", { sm: true, href: editHref(row.target, view.month, current) });
+    const meter = budget === null ? "" : html `<span class="spend-meter${over ? " over" : ""}" role="meter" aria-valuemin="0" aria-valuemax="${budget.limitMicrousd}" aria-valuenow="${budget.spentMicrousd}" aria-label="${row.label}: ${fig}"><i style="width:${Math.min(100, Math.max(0, budget.percent))}%"></i></span>`;
+    return html `<div class="spend-lim"${budget === null ? "" : html ` data-budget="${budget.id}"`}><div class="spend-lim-h"><span class="spend-lim-l"><span class="spend-lim-t">${row.label}${hot ? chip("Needs you", "needs") : ""}</span><span class="spend-lim-x">${hint}</span></span>\
+<span class="spend-fig">${fig}</span><span class="spend-lim-a">${action}</span></div>${meter}${open === null ? "" : limitForm(row, open, view, undefined)}</div>`;
+}
+export function spendHtml(view, said) {
+    const current = view.current ?? view.month;
     const nameOfSubagent = (key) => view.subagentNames.get(Number(key)) ?? `Subagent ${key}`;
+    const edit = view.edit ?? null;
+    const saved = (view.budgets ?? []).map(budget => ({ target: `${budget.scope}:${budget.key}`, budget, spentMicrousd: budget.spentMicrousd,
+        label: budget.scope === "installation" ? "Everything" : budget.scope === "project" ? projectName(budget.key) : budgetLabel(budget, budget.scope === "subagent" ? nameOfSubagent(budget.key) : undefined).replace(/'s$/, "") }));
+    // The limit Settings flags (Needs you) sits first; then the saved limits, then what has none yet.
+    const rows = [...saved.filter(one => one.budget !== null && limitNeedsYou(one.budget)), ...saved.filter(one => one.budget === null || !limitNeedsYou(one.budget)), ...(view.unlimited ?? [])];
+    const openFor = (row) => edit !== null && edit.target === row.target ? edit : null;
+    const targets = view.targets ?? [];
+    const adding = edit !== null && !rows.some(row => row.target === edit.target) && targets.length > 0 ? edit : null;
+    const add = targets.length === 0 ? "" : html `<div class="spend-lim"><div class="spend-lim-h"><span class="spend-lim-l"><span class="spend-lim-t">A person or a subagent</span><span class="spend-lim-x">A limit for one person’s or one subagent’s work.</span></span><span></span>\
+<span class="spend-lim-a">${adding === null ? btn("Add a limit", { sm: true, href: editHref("new", view.month, current) }) : ""}</span></div>${adding === null ? "" : limitForm(null, adding, view, targets)}</div>`;
+    const status = said.problem ? notice(said.problem) : said.said ? html `<p class="k-note" role="status">${said.said}</p>` : "";
+    const limits = view.budgets === null ? "" : sec("limits", "Monthly limits", monthWords(current, "long").split(" ")[0], html `${status}${rows.map(row => limitRow(row, view, current, openFor(row)))}${add}`);
+    const { totals } = view.report;
     const usageValue = totals.usageCount === 0 ? "None" : totals.usageMicrousd > 0 ? money(totals.usageMicrousd) : "Not reported";
     const usageMeta = totals.usageCount === 0 ? "No plan usage recorded"
         : totals.usageMicrousd > 0 ? `of usage at API prices${totals.usageUnreported > 0 ? ` · ${each(totals.usageUnreported, "piece")} of work not reported` : ""}` : `${each(totals.usageCount, "piece")} of work`;
     const unknownValue = totals.unknown === 0 ? "None" : String(totals.unknown);
     const unknownMeta = [totals.unknown > 0 ? `${totals.unknown === 1 ? "piece" : "pieces"} of work with billing not proved or cost not recorded` : "Nothing with an unknown cost",
         ...(totals.estimatedMicrousd > 0 ? [`counted as ${money(totals.estimatedMicrousd)} (estimated)`] : [])].join(" · ");
-    const figures = html `<section class="spend-figures" aria-label="This month">\
-<div class="spend-figure" data-amount-kind="api" data-microusd="${totals.apiMicrousd}"><h2>API dollars</h2><p class="value">${money(totals.apiMicrousd)}</p><p class="meta">Recorded charges to API keys</p></div>\
-<div class="spend-figure" data-amount-kind="subscription" data-microusd="${totals.usageMicrousd}" data-unreported="${totals.usageUnreported}"><h2>Plan usage</h2><p class="value">${usageValue}</p><p class="meta">${usageMeta}</p></div>\
-<div class="spend-figure" data-amount-kind="unknown" data-count="${totals.unknown}" data-estimated-microusd="${totals.estimatedMicrousd}"><h2>Unknown</h2><p class="value">${unknownValue}</p><p class="meta">${unknownMeta}</p></div></section>`;
-    const limits = view.budgets === null ? "" : html `<section><h2>Monthly limits</h2>${view.budgets.length === 0 ? html `<p class="meta">No monthly limits. <a href="/settings/spend">Set a limit</a></p>`
-        : html `${view.budgets.map(budget => limitRow(budget, nameOfSubagent, ""))}<p class="meta"><a href="/settings/spend">Change limits</a> · Evals never count toward a limit.</p>`}${view.windows}</section>`;
-    const runs = view.report.topRuns.length === 0 ? "" : html `<section><h2>Most expensive runs</h2><table><thead><tr><th>Task</th><th>Run</th><th>Model</th><th class="n">API dollars</th></tr></thead><tbody>${view.report.topRuns.map(run => html `<tr data-run="${run.runId}"><td><a href="${taskHref(run.taskId)}">${run.taskId}</a>${run.project === null ? "" : html ` <span class="meta">${projectName(run.project)}</span>`}</td><td><a href="${runHref(run.runId)}">${ROLE_WORDS[run.role]} ${run.runId}</a></td><td>${run.provider} · ${run.model}</td><td class="n">${money(run.microusd)}</td></tr>`)}</tbody></table></section>`;
-    const notCounted = html `<section class="spend-not-counted" data-not-counted><h2>Not counted here</h2><ul>${NOT_COUNTED.map(one => html `<li>${one}</li>`)}</ul></section>`;
-    return html `<article class="spend"><div class="spend-head"><h1>Spend</h1><p class="spend-month"><a href="/spend?month=${view.previous}">← ${view.previous}</a><strong>${view.month}</strong>${view.next === null ? "" : html `<a href="/spend?month=${view.next}">${view.next} →</a>`}<span class="meta">UTC month</span><a href="/spend?month=${view.month}&amp;format=csv" download>CSV</a></p></div>${note}${figures}${limits}${linesTable("By project", view.report.byProject, projectName)}${linesTable("By model", view.report.byModel, key => key, 12, line => line.chosen.length === 0 ? "" : `chosen as ${line.chosen.join(", ")}`)}${linesTable("By role", view.report.byRole, key => ROLE_WORDS[key] ?? key)}${linesTable("By person", view.report.byPerson, key => key)}${runs}${notCounted}</article>`;
+    const label = monthWords(view.month, "long");
+    const figures = html `<section class="spend-sum" aria-label="${label}">\
+<div data-amount-kind="api" data-microusd="${totals.apiMicrousd}"><span class="spend-sum-k">API dollars · ${label}${view.month === current ? " so far" : ""}</span><span class="spend-sum-v">${money(totals.apiMicrousd)}</span><span class="spend-sum-x">Recorded charges to API keys</span></div>\
+<div data-amount-kind="subscription" data-microusd="${totals.usageMicrousd}" data-unreported="${totals.usageUnreported}"><span class="spend-sum-k">Plan usage</span><span class="spend-sum-v">${usageValue}</span><span class="spend-sum-x">${usageMeta}</span></div>\
+<div data-amount-kind="unknown" data-count="${totals.unknown}" data-estimated-microusd="${totals.estimatedMicrousd}"><span class="spend-sum-k">Unknown</span><span class="spend-sum-v">${unknownValue}</span><span class="spend-sum-x">${unknownMeta}</span></div></section>`;
+    const monthItems = [{ key: view.previous, label: monthWords(view.previous, "short"), href: `/spend?month=${view.previous}` }, { key: view.month, label: monthWords(view.month, "short"), href: `/spend?month=${view.month}` },
+        ...(view.next === null ? [] : [{ key: view.next, label: monthWords(view.next, "short"), href: `/spend?month=${view.next}` }])];
+    const monthBar = html `<div class="spend-month">${segLinks("Month", view.month, monthItems)}${btn("Download CSV", { variant: "ghost", sm: true, href: `/spend?month=${view.month}&format=csv`, attrs: { download: "" } })}</div>`;
+    const nothing = view.report.byProject.length === 0 && view.report.byModel.length === 0 && totals.unknown === 0 && totals.usageCount === 0;
+    const max = Math.max(0, ...view.report.byProject.map(line => line.apiMicrousd), ...view.report.byModel.map(line => line.apiMicrousd));
+    const runs = view.report.topRuns.length === 0 ? "" : html `<div class="spend-runs">${view.report.topRuns.map(run => html `<div class="spend-run" data-run="${run.runId}"><span><a class="k-link" href="${taskHref(run.taskId)}">${run.taskId}</a> · <a class="k-link" href="${runHref(run.runId)}">${ROLE_WORDS[run.role]} ${run.runId}</a></span>\
+<span class="k-num">${money(run.microusd)}</span><small>${run.project === null ? "" : `${projectName(run.project)} · `}<span class="k-mono">${run.provider} · ${run.model}</span></small></div>`)}</div>`;
+    const more = view.report.byRole.length === 0 && view.report.byPerson.length === 0 && runs === "" ? "" : disclose("By role, by person and the costliest runs", html `${view.report.byRole.length === 0 ? "" : bars("Role", view.report.byRole, key => ROLE_WORDS[key] ?? key, max)}${view.report.byPerson.length === 0 ? "" : bars("Person", view.report.byPerson, key => key, max)}${runs}`);
+    const breakdowns = nothing ? empty({ title: `Nothing spent in ${label}.` }) : html `${view.report.byProject.length === 0 ? "" : sec("by-project", "By project", "", bars("Project", view.report.byProject, projectName, max))}${view.report.byModel.length === 0 ? "" : sec("by-model", "By model", "", bars("Model", view.report.byModel, key => key, max, 12, line => line.chosen.length === 0 ? "" : `chosen as ${line.chosen.join(", ")}`))}${more}`;
+    const windows = view.windows === null || view.windows.tiles.length === 0 ? "" : sec("windows", "Plan windows", "", html `<div class="spend-wins">${view.windows.tiles.map(tile => html `<div class="spend-win ${tile.tone}" data-limit="${tile.key}"${tile.title === null ? "" : html ` title="${tile.title}"`}>\
+<div class="spend-win-h"><b>${tile.name} ${tile.window}</b><span class="k-num">${tile.value}${tile.unit}</span></div><span class="spend-meter" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.round(tile.percent)}" aria-label="${tile.name} ${tile.window}: ${tile.value}${tile.unit}"><i style="width:${Math.min(100, Math.max(0, tile.percent))}%"></i></span><span class="k-note">${tile.detail}</span></div>`)}</div>`);
+    const notCounted = html `<p class="k-note" data-not-counted>Not counted here: ${NOT_COUNTED.map(one => one.charAt(0).toLowerCase() + one.slice(1)).join("; ")}. Evals never count toward a limit.</p>`;
+    const docked = edit !== null && (rows.some(row => row.target === edit.target) || adding !== null)
+        ? dock(btn("Save limit", { variant: "primary", type: "submit", attrs: { form: `limit-${edit.target.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "").slice(0, 60) || "new"}`, name: "action", value: "save" } }))
+        : "";
+    const body = html `<div class="spend">${limits}${monthBar}${figures}${breakdowns}${windows}${notCounted}</div>${docked}`;
+    return settingsShell({ group: "spend", title: "Spend", lead: "What agents cost, by project and by model, with the limits that stop them. Dates are UTC months.", body,
+        flags: { spend: saved.some(one => one.budget !== null && limitNeedsYou(one.budget)) } });
 }
-/** Settings → Spend: the monthly limits editor (moved from the Spend page) and a summary of the models in use. */
-export function spendSettingsHtml(view, notice) {
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
-    const nameOfSubagent = (key) => view.subagentNames.get(Number(key)) ?? `Subagent ${key}`;
-    const password = reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>`);
-    const budgets = view.budgets.map(budget => limitRow(budget, nameOfSubagent, html `<details><summary>Change</summary>${postForm("/spend/budget", html `<label>Monthly limit (US dollars)<input type="number" name="usd" min="1" step="1" value="${Math.round(budget.limitMicrousd / 1_000_000)}" required></label><label class="choice"><input type="checkbox" name="stop" value="1"${budget.hardStop ? html ` checked` : ""}> Pause new API work at 100%</label>${password}<button type="submit" name="action" value="save">Save</button> <button type="submit" name="action" value="remove">Remove</button>`, { attrs: { class: "budget-form" }, hidden: { target: `${budget.scope}:${budget.key}` } })}</details>`));
-    const groups = ["Everything", "Projects", "People", "Subagents"];
-    const options = groups.map(group => {
-        const members = view.targets.filter(one => one.group === group);
-        return members.length === 0 ? "" : html `<optgroup label="${group}">${members.map(one => html `<option value="${one.value}">${one.label}</option>`)}</optgroup>`;
-    });
-    const add = html `<details${view.budgets.length === 0 ? html ` open` : ""}><summary>Add a limit</summary>${postForm("/spend/budget", html `<label>For<select name="target" required>${options}</select></label><label>Monthly limit (US dollars)<input type="number" name="usd" min="1" step="1" required></label><label class="choice"><input type="checkbox" name="stop" value="1" checked> Pause new API work at 100%</label>${password}<button type="submit" name="action" value="save">Add limit</button>`, { attrs: { class: "budget-form" } })}</details>`;
-    const models = html `<section class="spend-models"><h2>Models</h2>${view.models.length === 0 ? "" : html `<dl>${view.models.map(one => html `<dt>${one.role}</dt><dd>${one.model}</dd>`)}</dl>`}<p><a href="/settings/models">Change models</a></p></section>`;
-    return html `<article class="spend"><div class="spend-head"><h1>Spend</h1><p class="spend-month"><a href="/spend">See this month's spend</a></p></div>${note}<section><h2>Monthly limits</h2>${budgets.length === 0 ? html `<p class="meta">No monthly limits yet.</p>` : budgets}${add}</section>${models}</article>`;
+/** Checks the amount next to its field before any password is asked or the form leaves the page; the server checks
+ * it again. Remove skips it. */
+export function spendScript() {
+    return `(function(){document.addEventListener("submit",function(e){var f=e.target;if(!f||!f.matches||!f.matches("form[data-spend-limit]"))return;
+var s=e.submitter;if(s&&s.hasAttribute("data-spend-remove"))return;var u=f.querySelector("[data-spend-usd]");if(!u)return;
+var v=u.value.replace(/[$,\\s]/g,""),ok=/^\\d+$/.test(v)&&+v>=1&&+v<=10000000,err=document.getElementById(u.id+"-err");
+if(ok){u.removeAttribute("aria-invalid");if(err)err.textContent="";u.value=v;return;}
+e.preventDefault();u.setAttribute("aria-invalid","true");if(err)err.textContent="Use a whole number of dollars, at least $1, like 40. Nothing changed.";u.focus();},true);})();`;
 }
 /** One row per piece of spend, for a spreadsheet (the command line's `spend --csv`). */
 export function spendCsv(items, subagentNames) {

package/dist/sso-ui.d.ts

@@ -5,7 +5,8 @@
  */
 import type { OidcSettings } from "./oidc.js";
 import { type Html } from "./html.js";
-export declare const SSO_CSS: string;
+/** The old card look; the page is built from the kit now. Kept for chrome.ts, which still concatenates it. */
+export declare const SSO_CSS = "";
 export type SsoSettingsView = {
     settings: OidcSettings | null;
     /** The address to register with the provider as this app's sign-in redirect. */
@@ -17,7 +18,9 @@ export type SsoSettingsView = {
     /** Whether the person looking is linked to the provider already. */
     linked: boolean;
 };
-export declare function ssoSettingsHtml(view: SsoSettingsView, notice: {
+/** Whether an address only this computer can open (localhost, 127.x, ::1): a provider can't send people back to it. */
+export declare function loopbackAddress(address: string): boolean;
+export declare function ssoSettingsHtml(view: SsoSettingsView, outcome: {
     said?: string | null;
     problem?: string | null;
 }): Html;

package/dist/sso-ui.js

@@ -1,38 +1,70 @@
-import { html, postForm } from "./html.js";
-export const SSO_CSS = `.sign-in{max-width:780px;min-width:0}.sign-in form{display:grid;gap:12px;margin:0}.sign-in label{display:grid;gap:6px}.sign-in input,.sign-in select{box-sizing:border-box;width:100%;max-width:100%;min-width:0}` +
-    `.sign-in .card{padding:16px 18px;margin:12px 0}.sign-in .card h2{font-size:1.05rem;margin:0 0 6px}.sign-in .redirect code{user-select:all;overflow-wrap:anywhere}.sign-in button{justify-self:start;min-height:44px}` +
-    `.sign-in .rules{display:grid;gap:8px}.sign-in .rule{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr);gap:8px;align-items:start}.sign-in .rule select[multiple]{min-height:5.5rem}` +
-    `.sign-in .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.sign-in fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}.sign-in fieldset label{display:flex;gap:8px;align-items:center}.sign-in fieldset input{width:auto}` +
-    `@media(max-width:600px){.sign-in .rule{grid-template-columns:1fr}.sign-in input,.sign-in select{font-size:16px}}`;
-const password = html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`;
+import { html, joinHtml, postForm } from "./html.js";
+import { acts, btn, codeLine, disclose, formRow, infoLine, input, note, notice, radios, select, settingsSection } from "./server/kit.js";
+import { kitSectionForm, SECRET_OPT_OUTS } from "./settings-kit.js";
+/** The old card look; the page is built from the kit now. Kept for chrome.ts, which still concatenates it. */
+export const SSO_CSS = "";
+/** Whether an address only this computer can open (localhost, 127.x, ::1): a provider can't send people back to it. */
+export function loopbackAddress(address) {
+    let host;
+    try {
+        host = new URL(address).hostname.toLowerCase();
+    }
+    catch {
+        return false;
+    }
+    return host === "localhost" || host.endsWith(".localhost") || /^127(\.\d{1,3}){3}$/.test(host) || host === "[::1]" || host === "::1" || host === "0.0.0.0";
+}
 function ruleRow(index, rule, projects) {
     const chosen = rule === null ? [] : rule.projects === "all" ? ["all"] : rule.projects;
-    return html `<div class="rule"><label>Group<input type="text" name="group-${index}" value="${rule?.group ?? ""}" placeholder="${index === 0 ? "for example: engineering" : ""}" autocomplete="off"></label>\
-<label>Role<select name="role-${index}"><option value="operator"${rule?.role === "operator" ? " selected" : ""}>Operator</option><option value="viewer"${rule?.role === "viewer" ? " selected" : ""}>Viewer</option></select></label>\
-<label>Projects<select name="projects-${index}" multiple><option value="all"${chosen.includes("all") ? " selected" : ""}>All projects</option>${projects.map(one => html `<option value="${one.path}"${chosen.includes(one.path) ? " selected" : ""}>${one.name}</option>`)}</select></label></div>`;
+    const id = `sso-rule-${index}`;
+    const box = (value, label, at) => html `<label for="${id}-p${at}"><input type="checkbox" id="${id}-p${at}" name="projects-${index}" value="${value}"${chosen.includes(value) ? html ` checked` : ""}> ${label}</label>`;
+    return formRow(`Rule ${index + 1}`, index === 0 ? "The first rule that matches a person decides." : null, joinHtml([
+        input({ id: `${id}-group`, name: `group-${index}`, value: rule?.group ?? "", attrs: { placeholder: index === 0 ? "Group, for example: engineering" : "Group", autocomplete: "off", "aria-label": `Rule ${index + 1} group` } }),
+        select({ id: `${id}-role`, name: `role-${index}`, label: `Rule ${index + 1} role`, current: rule?.role ?? "operator", items: [["operator", "Can manage and approve"], ["viewer", "Can view"]] }),
+        html `<div class="k-checks" role="group" aria-label="Rule ${index + 1} projects">${box("all", "All projects", 0)}${projects.map((one, at) => box(one.path, one.name, at + 1))}</div>`,
+    ]), "wide");
 }
-export function ssoSettingsHtml(view, notice) {
+export function ssoSettingsHtml(view, outcome) {
     const s = view.settings;
+    const answer = outcome.problem ? notice(outcome.problem) : outcome.said ? infoLine(outcome.said) : "";
     const rows = [...(s?.rules ?? []), null, null].slice(0, Math.max(3, (s?.rules.length ?? 0) + 1)).map((rule, index) => ruleRow(index, rule, view.projects));
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const redirect = view.redirect === null
-        ? html `<p class="meta">Open this page from the address people use (your https address) to see the redirect address to register.</p>`
-        : html `<p class="redirect">Register this redirect address with the provider: <code>${view.redirect}</code></p>`;
-    const form = postForm("/settings/sign-in", html `\
-<label>Provider address (issuer)<input type="url" name="issuer" value="${s?.issuer ?? ""}" placeholder="https://acme.okta.com/oauth2/default" required inputmode="url" autocomplete="off"></label>\
-<label>Client ID<input type="text" name="client-id" value="${s?.clientId ?? ""}" required autocomplete="off"></label>\
-<label>Client secret<input type="password" name="client-secret" autocomplete="off" placeholder="${s?.clientSecret ? "Saved. Leave blank to keep it" : "Leave blank for a public client"}"></label>\
-<details><summary>More</summary><label>Button says “Sign in with …”<input type="text" name="label" value="${s?.label ?? ""}" placeholder="Okta"></label>\
-<label>Scopes<input type="text" name="scopes" value="${s?.scopes ?? "openid email profile"}"></label><label>Groups claim<input type="text" name="groups-claim" value="${s?.groupsClaim ?? "groups"}"></label></details>\
-<h2>Who may sign in</h2><p class="meta">A person's first matching group sets their role and projects, again at every sign-in. No match, no entry. Use * for everyone.</p><div class="rules">${rows}</div>\
-<fieldset><legend>Passwords</legend><label><input type="radio" name="passwords" value="everyone"${s?.passwords !== "operators" ? " checked" : ""}> Everyone may still use a password</label>\
-<label><input type="radio" name="passwords" value="operators"${s?.passwords === "operators" ? " checked" : ""}> Only instance operators (a way in if the provider is down)</label></fieldset>\
-${password}<button>${s === null ? "Turn on sign-in with the provider" : "Save"}</button>`, { hidden: { action: "save" } });
-    const test = s === null ? "" : postForm("/settings/sign-in", html `<button class="secondary">Check the provider</button>`, { attrs: { class: "row" }, hidden: { action: "test" } });
-    const link = s === null ? "" : view.linked
-        ? html `<p class="meta">You sign in with ${s.label}.</p>`
-        : html `<section class="card"><h2>Your account</h2><p>Sign in with ${s.label} as this account from now on.</p><p><a class="button-link" href="/login/sso?link=1">Link to ${s.label}</a></p></section>`;
-    const off = s === null ? "" : html `<details class="card"><summary>Turn off</summary>${postForm("/settings/sign-in", html `<p>People who signed in with ${s.label} can't sign in until it's on again, unless they have a password.</p>${password}<button class="danger">Turn off sign-in with ${s.label}</button>`, { hidden: { action: "remove" } })}</details>`;
-    return html `<section class="sign-in">${note}<p>People sign in with your organisation's identity provider (Okta, Microsoft Entra, Google, anything that speaks OpenID Connect), and its groups decide what they may do.</p>\
-${redirect}<section class="card">${form}</section>${test}${link}${off}</section>`;
+        ? note("Open this page from the address people use (your https address) to see the redirect address to register.")
+        : joinHtml([
+            formRow("Redirect address", "Register this with the provider as the sign-in redirect.", codeLine(view.redirect), "wide"),
+            loopbackAddress(view.redirect)
+                ? infoLine("This page is open on a local address, which only this computer can reach, so a provider can’t send people back to it. Open this page from the address people use (your https address) and register that one instead.")
+                : "",
+        ]);
+    const check = s === null ? "" : postForm("/settings/sign-in", acts(btn("Check the provider", { sm: true, type: "submit" })), { hidden: { action: "test" } });
+    const provider = settingsSection({ id: "provider", title: "Provider", state: s === null ? " · off" : ` · ${s.label}`,
+        lead: "People sign in with your organisation’s identity provider (Okta, Microsoft Entra, Google, anything that speaks OpenID Connect), and its groups decide what they may do.",
+        body: joinHtml([redirect,
+            kitSectionForm({ proof: "sign-in", action: "/settings/sign-in", id: "sign-in-form", gate: s !== null, hidden: { action: "save" },
+                save: { label: s === null ? "Turn on sign-in with the provider" : "Save" }, confirm: s === null ? "Turn on sign-in with the provider" : "Change sign-in with the provider",
+                body: joinHtml([
+                    formRow("Provider address (issuer)", null, input({ id: "sso-issuer", name: "issuer", type: "url", value: s?.issuer ?? "", attrs: { placeholder: "https://acme.okta.com/oauth2/default", required: true, inputmode: "url", autocomplete: "off" } })),
+                    formRow("Client ID", null, input({ id: "sso-client-id", name: "client-id", value: s?.clientId ?? "", attrs: { required: true, autocomplete: "off" } })),
+                    formRow("Client secret", s?.clientSecret ? "Saved. Leave blank to keep it." : "Leave blank for a public client.", input({ id: "sso-client-secret", name: "client-secret", type: "password", attrs: { autocomplete: "off", ...SECRET_OPT_OUTS, "aria-label": "Client secret" } })),
+                    disclose("More", joinHtml([
+                        formRow("Button says “Sign in with …”", null, input({ id: "sso-label", name: "label", value: s?.label ?? "", attrs: { placeholder: "Okta" } })),
+                        formRow("Scopes", null, input({ id: "sso-scopes", name: "scopes", value: s?.scopes ?? "openid email profile" })),
+                        formRow("Groups claim", null, input({ id: "sso-groups-claim", name: "groups-claim", value: s?.groupsClaim ?? "groups" })),
+                    ])),
+                    formRow("Who may sign in", "A person’s first matching group sets their role and projects, again at every sign-in. No match, no entry. Use * for everyone.", html ``, "wide"),
+                    ...rows,
+                    formRow("Passwords", null, radios({ name: "passwords", legend: "Passwords", current: s?.passwords === "operators" ? "operators" : "everyone", items: [
+                            { value: "everyone", label: "Everyone may still use a password" },
+                            { value: "operators", label: "Only instance operators", text: "A way in if the provider is down." }
+                        ] }), "wide"),
+                ]) }),
+            check,
+        ]) });
+    const account = s === null ? "" : settingsSection({ id: "your-account", title: "Your account",
+        body: view.linked ? note(`You sign in with ${s.label}.`)
+            : joinHtml([note(`Sign in with ${s.label} as this account from now on.`), acts(btn(`Link to ${s.label}`, { sm: true, href: "/login/sso?link=1" }))]) });
+    const off = s === null ? "" : settingsSection({ id: "turn-off", title: "Turn off",
+        body: kitSectionForm({ proof: "sign-in", action: "/settings/sign-in", id: "sign-in-off", hidden: { action: "remove" }, save: { label: `Turn off sign-in with ${s.label}`, variant: "danger" },
+            confirm: `Turn off sign-in with ${s.label}`, body: note(`People who signed in with ${s.label} can’t sign in until it’s on again, unless they have a password.`) }) });
+    return joinHtml([answer, provider, account, off]);
 }

package/dist/storage-ui.d.ts

@@ -3,7 +3,8 @@ import { type CheckoutPlan } from "./checkout-cleanup.js";
 import { type SweepRecord } from "./storage-sweep.js";
 import { type SweepSchedule } from "./storage-sweep-schedule.js";
 import type { LandedSummary } from "./landed-cleanup.js";
-export declare const STORAGE_CSS: string;
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export declare const STORAGE_CSS = "";
 export type StorageView = {
     plan: CheckoutPlan;
     csrf: string;
@@ -16,7 +17,7 @@ export type StorageView = {
     /** When the checkouts were last measured, and its Check now (docs/plans/get-side-effects.md). */
     measured?: Html;
 };
-export declare function storageHtml(view: StorageView, notice: {
+export declare function storageHtml(view: StorageView, said: {
     said?: string | null;
     problem?: string | null;
 }): Html;