bf7ed14 · dc98fcc · 909f8e0 · 8f6143f · cd0be35 · 9ceba87
@@ -1564,7 +1564,7 @@
A test file the shard gate clears because it passed alone is still a failure: wh
A forge admin sees every declared flag at `/settings/flags` (Settings → Flags): why it exists, its default, the owner issue and its live value. Set it for the whole forge, for listed user ids or roles, or for a percentage of people; Clear returns it to the default. A change is validated, kept in the change record and live on the next request, with no restart. In the terminal the same admin opens the command palette (`ctrl+k`), picks Flags, and presses enter to set a flag from a line such as `forge=on users=u1,u2 roles=admin percent=30` or `x` to clear it; an agent is never an admin there either.
A forge admin sees every route the router knows at `/settings/usage` (Settings → Usage): its requests over the last 30 days, by role and by surface, and the hour of its last use. Routes with no request in the window are listed first, never-used ones before the longest-unused, as candidates to drop; the rest follow by count. Counts are per pattern, not per method. `usage` is also a boards source, for an admin only (an agent is refused); its `hour` column is text like `2026-10-16T13`, so group by a column such as `pattern` or `role`, not by a time bucket. In the terminal the same admin opens the command palette (`ctrl+k`), picks Usage, and reads the same list; an agent is never an admin there either.
Settings → Usage is one page for a forge admin, opening at `/settings/spend`, with four tabs: Spend, Routes (`/settings/usage`), Capacity (`/settings/capacity`) and Telemetry (`/settings/telemetry`); each tab keeps its own URL and permission. Spend is admin-only (anyone else gets 404) and holds what the crew's runs spent, by credential, app, agent, issue and run kind; it used to sit on Subscriptions, which now links to it. Routes lists every route the router knows: its requests over the last 30 days, by role and by surface, and the hour of its last use. Routes with no request in the window are listed first, never-used ones before the longest-unused, as candidates to drop; the rest follow by count. Counts are per pattern, not per method. `usage` is also a boards source, for an admin only (an agent is refused); its `hour` column is text like `2026-10-16T13`, so group by a column such as `pattern` or `role`, not by a time bucket. In the terminal the same admin opens the command palette (`ctrl+k`), picks Usage, and reads the Routes list only — the spend breakdown, capacity and telemetry tabs are web-only, and the terminal has never shown spend; an agent is never an admin there either.
## Limits
@@ -33,7 +33,7 @@
their own vocabulary instead of composing the named one.
## Finding 2 — the pages, and what each is for
There are 59 top-level pages, one entry each: every static `GET` route in `src/http/server.ts`
There are 60 top-level pages, one entry each: every static `GET` route in `src/http/server.ts`
that returns a page (`test/design-audit.test.ts` holds this list to the router,
both ways). Each entry reads `route` — module · what it is for · what
duplicates it · what breaks `docs/DESIGN.md`. "Breaks" counts colour literals
@@ -91,6 +91,7 @@
Machine routes are not pages and have no entry: `/audit.csv`,
- `/settings/capacity` — `pages/capacity.ts` · how many runs and checks go at once · `/admin/limits`, `/settings/usage` · none seen.
- `/settings/usage` — `pages/usage.ts` · route patterns by use, unused first · `/settings/telemetry`, `/board/returns` · none seen. Not about cost, despite the name.
- `/settings/telemetry` — `pages/telemetry.ts` · which agents may read telemetry · `/settings/crew` (agent grants) · none seen.
- `/settings/spend` — `pages/spend-tab.ts` · what the crew's runs spent, by credential, app, agent, issue and run kind · `/settings/subscriptions`, `/board/returns` · none seen. First tab of Usage (#2692).
- `/settings/resilience` — `pages/domains.ts` · failure domains and their last drill · `/resilience` · none seen.
- `/settings/backups` — `pages/backups.ts` (621 lines) · backups and restore · `/settings/resilience`, `/releases` · none seen.
- `/settings/flags` — `pages/flags.ts` · the forge's switches · none · none seen.
@@ -20,6 +20,7 @@
import { telemetryPage, telemetrySet } from "../web/pages/telemetry.ts";
import { contributePage } from "../web/pages/contribute.ts";
import { flagsPage, flagsSet } from "../web/pages/flags.ts";
import { usagePage } from "../web/pages/usage.ts";
import { spendPage } from "../web/pages/spend-tab.ts";
import { resiliencePage } from "../web/pages/resilience.ts";
import { limitsPage, limitsSet, quotasSet, signupSet, inviteMint, inviteRevoke } from "../web/pages/admin-limits.ts";
import { boardsPage } from "../web/pages/boards.ts";
@@ -824,6 +825,7 @@
export function buildRouter(): Router<Handler> {
  router.add("GET", "/settings/flags", flagsPage);
  router.add("POST", "/settings/flags", flagsSet);
  router.add("GET", "/settings/usage", (ctx) => usagePage(ctx, knownPatterns));
  router.add("GET", "/settings/spend", spendPage);
  router.add("GET", "/admin/limits", limitsPage);
  router.add("POST", "/admin/limits", limitsSet);
  router.add("POST", "/admin/quotas", quotasSet);
@@ -9,12 +9,12 @@
import { changeCapacity, listCapacity } from "../../actions/capacity.ts";
import { CAPACITY, type CapacityKey } from "../../core/capacity.ts";
import type { Ctx } from "../../http/context.ts";
import { notFoundPage, settingsLayout, signInFirst } from "../chrome.ts";
import { notFoundPage, signInFirst } from "../chrome.ts";
import { field, readForm } from "../form.ts";
import { html, when } from "../html.ts";
import { flashTo, page } from "../layout.ts";
import { flashTo } from "../layout.ts";
      
        sentinelcrew
        26d ago
        outdated
      
      Since usageShell took over, nothing here calls page any more, and settingsLayout on line 12 is also unused. Drop both imports. telemetry.ts has the same two at lines 8 and 11.
    
import { btn, card, icon, row, time } from "../ui.ts";
import { accountSections } from "./origins.ts";
import { usageShell } from "./usage-tabs.ts";
function requireAdmin(ctx: Ctx): Response | undefined {
  if (!ctx.auth.user) return signInFirst(ctx);
@@ -169,16 +169,7 @@
export function capacityPage(ctx: Ctx): Response {
      pad: false,
    },
  )}`;
  return page({
    ctx,
    title: "Capacity",
    body: html`<div class="page-head"><h1>Capacity</h1></div>
      ${settingsLayout(
        accountSections("capacity", { admin: true }),
        body,
        "Account settings",
      )}`,
  });
  return usageShell(ctx, "capacity", body);
}
const ERRORS: Record<string, string> = {
@@ -77,6 +77,7 @@
export type AccountSection =
  | "passkeys"
  | "origins"
  | "usage"
  | "spend"
  | "crew"
  | "accounts"
  | "people"
@@ -96,6 +97,8 @@
export type AccountSection =
 * admin's section — an agent is an account that acts — so it is on the nav
 * only for one, the way the repo header hides Settings from a non-admin.
 */
const USAGE: ReadonlySet<AccountSection> = new Set(["usage", "spend", "capacity", "telemetry"]);
export function accountSections(
  current: AccountSection,
  o: { admin?: boolean } = {},
@@ -139,18 +142,6 @@
export function accountSections(
            icon: "key" as const,
            current: current === "cloud",
          },
          {
            label: "Capacity",
            href: "/settings/capacity",
            icon: "activity" as const,
            current: current === "capacity",
          },
          {
            label: "Telemetry",
            href: "/settings/telemetry",
            icon: "activity" as const,
            current: current === "telemetry",
          },
          {
            label: "Access",
            href: "/settings/access",
@@ -171,9 +162,9 @@
export function accountSections(
          },
          {
            label: "Usage",
            href: "/settings/usage",
            href: "/settings/spend",
      
        sentinelcrew
        26d ago
        
      
      The sidebar's Usage entry now opens Spend, but the README still says Settings → Usage is /settings/usage. Update that paragraph along with this change (see the review body).
    
            icon: "activity" as const,
            current: current === "usage",
            current: USAGE.has(current),
          },
          {
            label: "Backups",
@@ -0,0 +1,24 @@
/**
 * Usage → Spend, for a forge admin: what the crew's runs spent, by
 * credential, app, agent, issue and run kind (`pages/spend.ts`). It kept live
 * on the Subscriptions page before; the numbers are the same.
 */
import { readSpend } from "../../actions/spend.ts";
import type { Ctx } from "../../http/context.ts";
import { notFoundPage, signInFirst } from "../chrome.ts";
import { html } from "../html.ts";
import { card, icon } from "../ui.ts";
import { spendView } from "./spend.ts";
import { usageShell } from "./usage-tabs.ts";
// GET /settings/spend
export function spendPage(ctx: Ctx): Response {
  if (!ctx.auth.user) return signInFirst(ctx);
  if (!ctx.auth.user.isAdmin) return notFoundPage(ctx);
  const body = html`<div id="spend" data-live="run.*,usage.*">${card(
    spendView(readSpend(ctx.app, new Date())),
    { head: html`${icon("clock")}<h2>Spend</h2>` },
  )}</div>`;
  return usageShell(ctx, "spend", body);
}
@@ -54,9 +54,7 @@
import {
} from "../ui.ts";
import { whenText } from "../../crew/limits.ts";
import { accountSections } from "./origins.ts";
import { readSpend } from "../../actions/spend.ts";
import { liveRegionsJs } from "../client.ts";
import { spendView } from "./spend.ts";
import { markOf } from "../../core/marks.ts";
import { limitValue } from "../../settings/limits.ts";
@@ -385,18 +383,7 @@
export function subscriptionsPage(ctx: Ctx): Response {
            Claude's tokenizer.
          </p>`,
      )}
      <div class="mt" id="spend" data-live="run.*,usage.*">
        ${card(
          html`<details id="spend-detail" open>
            <summary>By credential, app, agent, issue and run kind</summary>
            ${spendView(readSpend(ctx.app, now))}
          </details>`,
          {
            head: html`${icon("clock")}
              <h2>Spend</h2>`,
          },
        )}
      </div>
      <p class="mt muted small">What these accounts spent, by credential, app, agent, issue and run kind: <a href="/settings/spend">Usage → Spend</a>.</p>
      <div class="mt">${add}</div>
      ${used === null ? null : html`<div class="mt">${used}</div>`}`,
      
        sentinelcrew
        26d ago
        outdated
      
      This link replaced the spend card, which leaves the readSpend and spendView imports at the top of the file (lines 57 and 59) unused. Remove them.
    
  );
@@ -5,12 +5,12 @@
import { setTelemetryGrant } from "../../actions/telemetry.ts";
import { grantable, recentReads } from "../../core/telemetry.ts";
import type { Ctx } from "../../http/context.ts";
import { notFoundPage, settingsLayout, signInFirst } from "../chrome.ts";
import { notFoundPage, signInFirst } from "../chrome.ts";
import { field, readForm } from "../form.ts";
import { html } from "../html.ts";
import { flashTo, page } from "../layout.ts";
import { flashTo } from "../layout.ts";
import { btn, card, icon, row, time } from "../ui.ts";
import { accountSections } from "./origins.ts";
import { usageShell } from "./usage-tabs.ts";
function owner(ctx: Ctx): Response | undefined {
  if (!ctx.auth.user) return signInFirst(ctx);
@@ -60,12 +60,7 @@
export function telemetryPage(ctx: Ctx): Response {
          )}</ul>`,
      { head: html`${icon("history")}<h2>Reads</h2>`, pad: false },
    )}`;
  return page({
    ctx,
    title: "Telemetry",
    body: html`<div class="page-head"><h1>Telemetry</h1></div>
      ${settingsLayout(accountSections("telemetry", { admin: true }), body, "Account settings")}`,
  });
  return usageShell(ctx, "telemetry", body);
}
// POST /settings/telemetry
@@ -0,0 +1,45 @@
/**
 * The one Usage page of Settings: what is used (spend), what is asked
 * (routes), what is full (capacity) and who may read the telemetry. Each tab
 * is its own URL, so a link and a back button keep working; this renders the
 * frame they share.
 */
import type { Html } from "../html.ts";
import { settingsLayout } from "../chrome.ts";
import { html } from "../html.ts";
import { liveRegionsJs } from "../client.ts";
import { page } from "../layout.ts";
import { tabs } from "../ui.ts";
import type { Ctx } from "../../http/context.ts";
import { accountSections } from "./origins.ts";
export type UsageTab = "spend" | "routes" | "capacity" | "telemetry";
const TABS: readonly { id: UsageTab; label: string; href: string }[] = [
  { id: "spend", label: "Spend", href: "/settings/spend" },
  { id: "routes", label: "Routes", href: "/settings/usage" },
  { id: "capacity", label: "Capacity", href: "/settings/capacity" },
  { id: "telemetry", label: "Telemetry", href: "/settings/telemetry" },
];
/** The Usage page around `body`, with `current` marked in the tabs. */
export function usageShell(ctx: Ctx, current: UsageTab, body: Html, status?: number): Response {
      
        sentinelcrew
        26d ago
        
      
      Nit: no caller passes status, so it is dead for now. Drop it, or keep it only if a tab will render an error page through the shell.
    
  return page(
    {
      ctx,
      title: "Usage",
      scriptJs: liveRegionsJs,
      body: html`<div class="page-head"><h1>Usage</h1></div>
        ${settingsLayout(
          accountSections("usage", { admin: true }),
          html`${tabs(
            TABS.map((t) => ({ label: t.label, href: t.href, current: t.id === current })),
            "Usage",
          )}${body}`,
          "Account settings",
        )}`,
    },
    status,
  );
}
@@ -9,11 +9,11 @@
import { mayManageFlags } from "../../core/flags.ts";
import { ROLES, SURFACES } from "../../core/usage_count.ts";
import { routeUsage, WINDOW_DAYS } from "../../core/usage_report.ts";
import type { Ctx } from "../../http/context.ts";
import { settingsLayout, signInFirst } from "../chrome.ts";
import { signInFirst } from "../chrome.ts";
import { html } from "../html.ts";
import { page } from "../layout.ts";
import { btn, card, empty, icon } from "../ui.ts";
import { accountSections } from "./origins.ts";
import { usageShell } from "./usage-tabs.ts";
const part = (counts: Readonly<Record<string, number>>, keys: readonly string[]) =>
  keys.map((k) => `${k} ${counts[k] ?? 0}`).join(" · ");
@@ -53,12 +53,7 @@
export function usagePage(ctx: Ctx, patterns: () => readonly string[]): Response
            <td class="mono">${r.last === null ? "never" : r.last.replace("T", " ") + ":00"}</td></tr>`,
        )}</tbody>
      </table>`,
    { head: html`${icon("activity")}<h2>Usage</h2>`, pad: false },
    { head: html`${icon("activity")}<h2>Routes</h2>`, pad: false },
      
        sentinelcrew
        26d ago
        outdated
      
      Nit: this card is now the Routes tab inside a page titled Usage, so its <h2>Usage</h2> repeats the page heading. Routes would match the tab.
    
  );
  return page({
    ctx,
    title: "Usage",
    body: html`<div class="page-head"><h1>Usage</h1></div>
      ${settingsLayout(accountSections("usage", { admin: true }), body, "Account settings")}`,
  });
  return usageShell(ctx, "routes", body);
}
@@ -333,6 +333,9 @@
describe("the board", () => {
    ).text();
    expect(subs).toContain("platform (env)");
    expect(subs).toContain("not offered to the crew");
    expect(subs).toContain('data-by="byCredential"');
    expect(subs).toContain('href="/settings/spend"');
    const spend = await (await fetch(`${servers.url}/settings/spend`, { headers: { cookie } })).text();
    expect(spend).toContain('data-by="byCredential"');
  });
});
@@ -94,3 +94,22 @@
test("usage is a boards source for an admin and for nobody else", async () => {
  expect((await q("bob")).status).toBe(403);
  expect((await q("carol")).status).toBe(403); // an admin agent is refused too
});
test("Usage is one page: the four tabs on every tab, Spend admin-only, one sidebar entry", async () => {
  const get = (path: string, who: string) =>
    fetch(`${servers.url}${path}`, { headers: { authorization: `Bearer ${tok[who]}` } });
  for (const [path, current] of [
    ["/settings/spend", "Spend"],
    ["/settings/usage", "Routes"],
    ["/settings/capacity", "Capacity"],
    ["/settings/telemetry", "Telemetry"],
  ] as const) {
    const text = await (await get(path, "admin")).text();
    for (const label of ["Spend", "Routes", "Capacity", "Telemetry"])
      expect(text).toMatch(new RegExp(`href="/settings/[a-z]+"[^>]*>\\s*${label}\\s*</a\\s*>`));
    expect(text).toMatch(new RegExp(`href="${path}"\\s+aria-current="page"[^>]*>\\s*${current}\\s*</a\\s*>`));
    expect(text.match(/data-nav/g) ?? []).not.toHaveLength(0);
    expect(text).not.toMatch(/data-nav[^>]*>[^<]*(<svg[\s\S]*?<\/svg>)?\s*(Capacity|Telemetry)\s*</);
  }
  expect((await get("/settings/spend", "bob")).status).toBe(404);
});
		@@ -1564,7 +1564,7 @@ A test file the shard gate clears because it passed alone is still a failure: wh
1564	1564
1565	1565	A forge admin sees every declared flag at `/settings/flags` (Settings → Flags): why it exists, its default, the owner issue and its live value. Set it for the whole forge, for listed user ids or roles, or for a percentage of people; Clear returns it to the default. A change is validated, kept in the change record and live on the next request, with no restart. In the terminal the same admin opens the command palette (`ctrl+k`), picks Flags, and presses enter to set a flag from a line such as `forge=on users=u1,u2 roles=admin percent=30` or `x` to clear it; an agent is never an admin there either.
1566	1566
1567		A forge admin sees every route the router knows at `/settings/usage` (Settings → Usage): its requests over the last 30 days, by role and by surface, and the hour of its last use. Routes with no request in the window are listed first, never-used ones before the longest-unused, as candidates to drop; the rest follow by count. Counts are per pattern, not per method. `usage` is also a boards source, for an admin only (an agent is refused); its `hour` column is text like `2026-10-16T13`, so group by a column such as `pattern` or `role`, not by a time bucket. In the terminal the same admin opens the command palette (`ctrl+k`), picks Usage, and reads the same list; an agent is never an admin there either.
	1567	Settings → Usage is one page for a forge admin, opening at `/settings/spend`, with four tabs: Spend, Routes (`/settings/usage`), Capacity (`/settings/capacity`) and Telemetry (`/settings/telemetry`); each tab keeps its own URL and permission. Spend is admin-only (anyone else gets 404) and holds what the crew's runs spent, by credential, app, agent, issue and run kind; it used to sit on Subscriptions, which now links to it. Routes lists every route the router knows: its requests over the last 30 days, by role and by surface, and the hour of its last use. Routes with no request in the window are listed first, never-used ones before the longest-unused, as candidates to drop; the rest follow by count. Counts are per pattern, not per method. `usage` is also a boards source, for an admin only (an agent is refused); its `hour` column is text like `2026-10-16T13`, so group by a column such as `pattern` or `role`, not by a time bucket. In the terminal the same admin opens the command palette (`ctrl+k`), picks Usage, and reads the Routes list only — the spend breakdown, capacity and telemetry tabs are web-only, and the terminal has never shown spend; an agent is never an admin there either.
1568	1568
1569	1569	## Limits
1570	1570
		@@ -33,7 +33,7 @@ their own vocabulary instead of composing the named one.
33	33
34	34	## Finding 2 — the pages, and what each is for
35	35
36		There are 59 top-level pages, one entry each: every static `GET` route in `src/http/server.ts`
	36	There are 60 top-level pages, one entry each: every static `GET` route in `src/http/server.ts`
37	37	that returns a page (`test/design-audit.test.ts` holds this list to the router,
38	38	both ways). Each entry reads `route` — module · what it is for · what
39	39	duplicates it · what breaks `docs/DESIGN.md`. "Breaks" counts colour literals
		@@ -91,6 +91,7 @@ Machine routes are not pages and have no entry: `/audit.csv`,
91	91	- `/settings/capacity` — `pages/capacity.ts` · how many runs and checks go at once · `/admin/limits`, `/settings/usage` · none seen.
92	92	- `/settings/usage` — `pages/usage.ts` · route patterns by use, unused first · `/settings/telemetry`, `/board/returns` · none seen. Not about cost, despite the name.
93	93	- `/settings/telemetry` — `pages/telemetry.ts` · which agents may read telemetry · `/settings/crew` (agent grants) · none seen.
	94	- `/settings/spend` — `pages/spend-tab.ts` · what the crew's runs spent, by credential, app, agent, issue and run kind · `/settings/subscriptions`, `/board/returns` · none seen. First tab of Usage (#2692).
94	95	- `/settings/resilience` — `pages/domains.ts` · failure domains and their last drill · `/resilience` · none seen.
95	96	- `/settings/backups` — `pages/backups.ts` (621 lines) · backups and restore · `/settings/resilience`, `/releases` · none seen.
96	97	- `/settings/flags` — `pages/flags.ts` · the forge's switches · none · none seen.
		@@ -20,6 +20,7 @@ import { telemetryPage, telemetrySet } from "../web/pages/telemetry.ts";
20	20	import { contributePage } from "../web/pages/contribute.ts";
21	21	import { flagsPage, flagsSet } from "../web/pages/flags.ts";
22	22	import { usagePage } from "../web/pages/usage.ts";
	23	import { spendPage } from "../web/pages/spend-tab.ts";
23	24	import { resiliencePage } from "../web/pages/resilience.ts";
24	25	import { limitsPage, limitsSet, quotasSet, signupSet, inviteMint, inviteRevoke } from "../web/pages/admin-limits.ts";
25	26	import { boardsPage } from "../web/pages/boards.ts";
		@@ -824,6 +825,7 @@ export function buildRouter(): Router<Handler> {
824	825	router.add("GET", "/settings/flags", flagsPage);
825	826	router.add("POST", "/settings/flags", flagsSet);
826	827	router.add("GET", "/settings/usage", (ctx) => usagePage(ctx, knownPatterns));
	828	router.add("GET", "/settings/spend", spendPage);
827	829	router.add("GET", "/admin/limits", limitsPage);
828	830	router.add("POST", "/admin/limits", limitsSet);
829	831	router.add("POST", "/admin/quotas", quotasSet);
		@@ -9,12 +9,12 @@
9	9	import { changeCapacity, listCapacity } from "../../actions/capacity.ts";
10	10	import { CAPACITY, type CapacityKey } from "../../core/capacity.ts";
11	11	import type { Ctx } from "../../http/context.ts";
12		import { notFoundPage, settingsLayout, signInFirst } from "../chrome.ts";
	12	import { notFoundPage, signInFirst } from "../chrome.ts";
13	13	import { field, readForm } from "../form.ts";
14	14	import { html, when } from "../html.ts";
15		import { flashTo, page } from "../layout.ts";
	15	import { flashTo } from "../layout.ts";
		sentinelcrew 26d ago outdated Since `usageShell` took over, nothing here calls `page` any more, and `settingsLayout` on line 12 is also unused. Drop both imports. `telemetry.ts` has the same two at lines 8 and 11.
16	16	import { btn, card, icon, row, time } from "../ui.ts";
17		import { accountSections } from "./origins.ts";
	17	import { usageShell } from "./usage-tabs.ts";
18	18
19	19	function requireAdmin(ctx: Ctx): Response \| undefined {
20	20	if (!ctx.auth.user) return signInFirst(ctx);
		@@ -169,16 +169,7 @@ export function capacityPage(ctx: Ctx): Response {
169	169	pad: false,
170	170	},
171	171	)}`;
172		return page({
173		ctx,
174		title: "Capacity",
175		body: html`<div class="page-head"><h1>Capacity</h1></div>
176		${settingsLayout(
177		accountSections("capacity", { admin: true }),
178		body,
179		"Account settings",
180		)}`,
181		});
	172	return usageShell(ctx, "capacity", body);
182	173	}
183	174
184	175	const ERRORS: Record<string, string> = {
		@@ -77,6 +77,7 @@ export type AccountSection =
77	77	\| "passkeys"
78	78	\| "origins"
79	79	\| "usage"
	80	\| "spend"
80	81	\| "crew"
81	82	\| "accounts"
82	83	\| "people"
		@@ -96,6 +97,8 @@ export type AccountSection =
96	97	* admin's section — an agent is an account that acts — so it is on the nav
97	98	* only for one, the way the repo header hides Settings from a non-admin.
98	99	*/
	100	const USAGE: ReadonlySet<AccountSection> = new Set(["usage", "spend", "capacity", "telemetry"]);
	101
99	102	export function accountSections(
100	103	current: AccountSection,
101	104	o: { admin?: boolean } = {},
		@@ -139,18 +142,6 @@ export function accountSections(
139	142	icon: "key" as const,
140	143	current: current === "cloud",
141	144	},
142		{
143		label: "Capacity",
144		href: "/settings/capacity",
145		icon: "activity" as const,
146		current: current === "capacity",
147		},
148		{
149		label: "Telemetry",
150		href: "/settings/telemetry",
151		icon: "activity" as const,
152		current: current === "telemetry",
153		},
154	145	{
155	146	label: "Access",
156	147	href: "/settings/access",
		@@ -171,9 +162,9 @@ export function accountSections(
171	162	},
172	163	{
173	164	label: "Usage",
174		href: "/settings/usage",
	165	href: "/settings/spend",
		sentinelcrew 26d ago The sidebar's Usage entry now opens Spend, but the README still says Settings → Usage is `/settings/usage`. Update that paragraph along with this change (see the review body).
175	166	icon: "activity" as const,
176		current: current === "usage",
	167	current: USAGE.has(current),
177	168	},
178	169	{
179	170	label: "Backups",
		@@ -0,0 +1,24 @@
	1	/**
	2	* Usage → Spend, for a forge admin: what the crew's runs spent, by
	3	* credential, app, agent, issue and run kind (`pages/spend.ts`). It kept live
	4	* on the Subscriptions page before; the numbers are the same.
	5	*/
	6
	7	import { readSpend } from "../../actions/spend.ts";
	8	import type { Ctx } from "../../http/context.ts";
	9	import { notFoundPage, signInFirst } from "../chrome.ts";
	10	import { html } from "../html.ts";
	11	import { card, icon } from "../ui.ts";
	12	import { spendView } from "./spend.ts";
	13	import { usageShell } from "./usage-tabs.ts";
	14
	15	// GET /settings/spend
	16	export function spendPage(ctx: Ctx): Response {
	17	if (!ctx.auth.user) return signInFirst(ctx);
	18	if (!ctx.auth.user.isAdmin) return notFoundPage(ctx);
	19	const body = html`<div id="spend" data-live="run.,usage.">${card(
	20	spendView(readSpend(ctx.app, new Date())),
	21	{ head: html`${icon("clock")}<h2>Spend</h2>` },
	22	)}</div>`;
	23	return usageShell(ctx, "spend", body);
	24	}
		@@ -54,9 +54,7 @@ import {
54	54	} from "../ui.ts";
55	55	import { whenText } from "../../crew/limits.ts";
56	56	import { accountSections } from "./origins.ts";
57		import { readSpend } from "../../actions/spend.ts";
58	57	import { liveRegionsJs } from "../client.ts";
59		import { spendView } from "./spend.ts";
60	58	import { markOf } from "../../core/marks.ts";
61	59	import { limitValue } from "../../settings/limits.ts";
62	60
		@@ -385,18 +383,7 @@ export function subscriptionsPage(ctx: Ctx): Response {
385	383	Claude's tokenizer.
386	384	</p>`,
387	385	)}
388		<div class="mt" id="spend" data-live="run.,usage.">
389		${card(
390		html`<details id="spend-detail" open>
391		<summary>By credential, app, agent, issue and run kind</summary>
392		${spendView(readSpend(ctx.app, now))}
393		</details>`,
394		{
395		head: html`${icon("clock")}
396		<h2>Spend</h2>`,
397		},
398		)}
399		</div>
	386	<p class="mt muted small">What these accounts spent, by credential, app, agent, issue and run kind: <a href="/settings/spend">Usage → Spend</a>.</p>
400	387	<div class="mt">${add}</div>
401	388	${used === null ? null : html`<div class="mt">${used}</div>`}`,
		sentinelcrew 26d ago outdated This link replaced the spend card, which leaves the `readSpend` and `spendView` imports at the top of the file (lines 57 and 59) unused. Remove them.
402	389	);
		@@ -5,12 +5,12 @@
5	5	import { setTelemetryGrant } from "../../actions/telemetry.ts";
6	6	import { grantable, recentReads } from "../../core/telemetry.ts";
7	7	import type { Ctx } from "../../http/context.ts";
8		import { notFoundPage, settingsLayout, signInFirst } from "../chrome.ts";
	8	import { notFoundPage, signInFirst } from "../chrome.ts";
9	9	import { field, readForm } from "../form.ts";
10	10	import { html } from "../html.ts";
11		import { flashTo, page } from "../layout.ts";
	11	import { flashTo } from "../layout.ts";
12	12	import { btn, card, icon, row, time } from "../ui.ts";
13		import { accountSections } from "./origins.ts";
	13	import { usageShell } from "./usage-tabs.ts";
14	14
15	15	function owner(ctx: Ctx): Response \| undefined {
16	16	if (!ctx.auth.user) return signInFirst(ctx);
		@@ -60,12 +60,7 @@ export function telemetryPage(ctx: Ctx): Response {
60	60	)}</ul>`,
61	61	{ head: html`${icon("history")}<h2>Reads</h2>`, pad: false },
62	62	)}`;
63		return page({
64		ctx,
65		title: "Telemetry",
66		body: html`<div class="page-head"><h1>Telemetry</h1></div>
67		${settingsLayout(accountSections("telemetry", { admin: true }), body, "Account settings")}`,
68		});
	63	return usageShell(ctx, "telemetry", body);
69	64	}
70	65
71	66	// POST /settings/telemetry
		@@ -0,0 +1,45 @@
	1	/**
	2	* The one Usage page of Settings: what is used (spend), what is asked
	3	* (routes), what is full (capacity) and who may read the telemetry. Each tab
	4	* is its own URL, so a link and a back button keep working; this renders the
	5	* frame they share.
	6	*/
	7
	8	import type { Html } from "../html.ts";
	9	import { settingsLayout } from "../chrome.ts";
	10	import { html } from "../html.ts";
	11	import { liveRegionsJs } from "../client.ts";
	12	import { page } from "../layout.ts";
	13	import { tabs } from "../ui.ts";
	14	import type { Ctx } from "../../http/context.ts";
	15	import { accountSections } from "./origins.ts";
	16
	17	export type UsageTab = "spend" \| "routes" \| "capacity" \| "telemetry";
	18
	19	const TABS: readonly { id: UsageTab; label: string; href: string }[] = [
	20	{ id: "spend", label: "Spend", href: "/settings/spend" },
	21	{ id: "routes", label: "Routes", href: "/settings/usage" },
	22	{ id: "capacity", label: "Capacity", href: "/settings/capacity" },
	23	{ id: "telemetry", label: "Telemetry", href: "/settings/telemetry" },
	24	];
	25
	26	/** The Usage page around `body`, with `current` marked in the tabs. */
	27	export function usageShell(ctx: Ctx, current: UsageTab, body: Html, status?: number): Response {
		sentinelcrew 26d ago Nit: no caller passes `status`, so it is dead for now. Drop it, or keep it only if a tab will render an error page through the shell.
	28	return page(
	29	{
	30	ctx,
	31	title: "Usage",
	32	scriptJs: liveRegionsJs,
	33	body: html`<div class="page-head"><h1>Usage</h1></div>
	34	${settingsLayout(
	35	accountSections("usage", { admin: true }),
	36	html`${tabs(
	37	TABS.map((t) => ({ label: t.label, href: t.href, current: t.id === current })),
	38	"Usage",
	39	)}${body}`,
	40	"Account settings",
	41	)}`,
	42	},
	43	status,
	44	);
	45	}
		@@ -9,11 +9,11 @@ import { mayManageFlags } from "../../core/flags.ts";
9	9	import { ROLES, SURFACES } from "../../core/usage_count.ts";
10	10	import { routeUsage, WINDOW_DAYS } from "../../core/usage_report.ts";
11	11	import type { Ctx } from "../../http/context.ts";
12		import { settingsLayout, signInFirst } from "../chrome.ts";
	12	import { signInFirst } from "../chrome.ts";
13	13	import { html } from "../html.ts";
14	14	import { page } from "../layout.ts";
15	15	import { btn, card, empty, icon } from "../ui.ts";
16		import { accountSections } from "./origins.ts";
	16	import { usageShell } from "./usage-tabs.ts";
17	17
18	18	const part = (counts: Readonly<Record<string, number>>, keys: readonly string[]) =>
19	19	keys.map((k) => `${k} ${counts[k] ?? 0}`).join(" · ");
		@@ -53,12 +53,7 @@ export function usagePage(ctx: Ctx, patterns: () => readonly string[]): Response
53	53	<td class="mono">${r.last === null ? "never" : r.last.replace("T", " ") + ":00"}</td></tr>`,
54	54	)}</tbody>
55	55	</table>`,
56		{ head: html`${icon("activity")}<h2>Usage</h2>`, pad: false },
	56	{ head: html`${icon("activity")}<h2>Routes</h2>`, pad: false },
		sentinelcrew 26d ago outdated Nit: this card is now the Routes tab inside a page titled Usage, so its `<h2>Usage</h2>` repeats the page heading. `Routes` would match the tab.
57	57	);
58		return page({
59		ctx,
60		title: "Usage",
61		body: html`<div class="page-head"><h1>Usage</h1></div>
62		${settingsLayout(accountSections("usage", { admin: true }), body, "Account settings")}`,
63		});
	58	return usageShell(ctx, "routes", body);
64	59	}