apps/sudo/app/routes/costs.tsx · flagon-io/g1t

1

import type { ReactNode } from "react";

2

import { Link } from "react-router";

3

4

import type { CostsReport, PlatformGuard, PlatformMetric } from "@g1t/contracts";

5

6

import type { Route } from "./+types/costs";

7

import { DaysChart } from "~/components/costs";

8

import { CostsHeader, chip, costsHref } from "~/components/costs-header";

9

import { Badge, Button, Field, Input, Notice, Section, Stat, When } from "~/components/ui";

10

import { PAUSE_LEVELS, capPercent, count, daySeries, marginOnPrice, marginTone, parseBucket, percentLabel, spendRows, subscriptionsOver, thresholdShare, whoPaid } from "~/lib/costs";

11

import { type CostsActionResult, costsAction, costsLoader } from "~/lib/costs-route.server";

12

import { usd } from "~/lib/money";

13

14

export const meta: Route.MetaFunction = () => [{ title: "Costs & margin · sudo" }, { name: "robots", content: "noindex, nofollow" }];

15

16

/** Billing's MARGIN_PERCENT: what is added to cost. */

17

const MARKUP_PERCENT = 20;

18

19

export const loader = ({ request, context }: Route.LoaderArgs) => costsLoader(request, context);

20

export const action = ({ request, context }: Route.ActionArgs) => costsAction(request, context);

21

22

/**

23

* Where g1t's money goes: the statement, what g1t pays for itself against

24

* its caps, and the same by day, by product and by workspace.

25

*/

26

export default function Costs({ loaderData, actionData }: Route.ComponentProps) {

27

const { range, report, error, done } = loaderData;

28

const failed = actionData && "error" in actionData ? (actionData as CostsActionResult) : null;

29

const description = `What g1t cost to run (Cloudflare's bill and the model providers') against what workspaces paid, with what g1t gave away on purpose kept apart. Prices are cost plus ${MARKUP_PERCENT}%, a ${percentLabel(marginOnPrice(MARKUP_PERCENT))} margin: every margin here is a share of the price, not of the cost. The bill itself, drift and the price book are on Bill & pricing.`;

if (!report) {

return (

<Notice tone="warn">Billing did not answer for costs: {error}</Notice>

</div>

</main>

);

}

const bucket = parseBucket(loaderData.bucket, report.products.map((p) => p.bucket));

42

const product = report.products.find((p) => p.bucket === bucket) ?? null;

43

const series = daySeries(report.days, report.since, report.until, bucket);

44

const floor = report.settings.marginFloorPercent;

45

const open = report.proposals.filter((p) => p.status === "open");

return (

<Section

className="mt-6"

title={product ? `${product.title}, by day` : "By day"}

59

description={

60

product

61

? "What customers were charged for it at price, before included usage and pools paid part, against what it cost."

62

: "Money in (usage paid for and the plan) against every cost. Pick a product to see its own."

}

>

All of g1t

</Link>

{report.products.map((p) => (

{p.title}

</Link>

))}

</nav>

<DaysChart

days={series}

floor={floor}

revenueLabel={product ? "Charged at price" : "Money in"}

79

label={product ? `${product.title}: charged against Cloudflare cost by day` : "Money in against Cloudflare cost by day"}

/>

</Section>

<Section

className="mt-6"

title="By product"

description={`Each of g1t's products over the last ${range} days: what customers were charged at price, given away or not, against what it cost. The margin is the charge less the cost, as a share of the charge; at cost plus ${MARKUP_PERCENT}% it is ${percentLabel(marginOnPrice(MARKUP_PERCENT))}. The floor is ${floor}%.`}

>

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Product</th>

93

<th className="px-4 py-2 text-right font-medium">Charged at price</th>

94

95

<th className="px-4 py-2 text-right font-medium">Price book said</th>

96

<th className="px-4 py-2 text-right font-medium">Margin</th>

97

<th className="px-4 py-2 text-right font-medium sm:pr-5">% of price</th>

</tr>

</thead>

<tbody>

{report.products.map((p) => {

102

const tone = p.overhead ? undefined : marginTone(p.marginPercent, floor);

return (

{p.title}

</Link>

{p.overhead ? "Paid by the plan" : p.costSource === "ledger" ? "Cost from the gateway, not Cloudflare" : p.bucket}

111

</span>

112

</td>

113

<td className="tabular px-4 py-2.5 text-right">{usd(p.valueMicros)}</td>

114

<td className="tabular px-4 py-2.5 text-right">{usd(p.costMicros)}</td>

115

<td className="tabular px-4 py-2.5 text-right text-muted">{usd(p.ownCostMicros)}</td>

116

<td className={`tabular px-4 py-2.5 text-right ${p.marginMicros < 0 && !p.overhead ? "text-danger" : ""}`}>{usd(p.marginMicros)}</td>

{p.overhead ? (

) : (

<Badge tone={tone === "mint" ? "mint" : tone === "warn" ? "warn" : tone === "danger" ? "danger" : "plain"}>{percentLabel(p.marginPercent)}</Badge>

)}

</td>

</tr>

);

})}

</tbody>

</table>

</div>

</Section>

<Section

className="mt-6"

title="Workspaces that cost most"

135

description="Cloudflare's costs shared out by each workspace's own meters (its git operations, its usage), against what it paid. Over its revenue for 30 days, a workspace shows on Reach out."

136

>

137

{report.topWorkspaces.length === 0 ? (

138

<p className="text-sm text-muted">No costs shared out yet.</p>

) : (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Workspace</th>

145

146

<th className="px-4 py-2 text-right font-medium">Given away</th>

</tr>

</thead>

<tbody>

{report.topWorkspaces.map((w) => {

153

const net = w.revenueMicros - w.costMicros;

154

// What was given away on purpose is a budget, not a loss:

155

// red only for what neither paid nor was given.

156

const lost = net + (w.givenMicros ?? 0) < 0;

return (

{w.workspace}

</Link>

{w.internal && <span className="ml-2 text-xs text-faint">g1t's own</span>}

164

</td>

165

<td className="tabular px-4 py-2.5 text-right">{usd(w.costMicros)}</td>

166

<td className="tabular px-4 py-2.5 text-right text-fg-soft">{usd(w.givenMicros ?? 0)}</td>

167

<td className="tabular px-4 py-2.5 text-right">{usd(w.revenueMicros)}</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</Section>

</main>

);

}

function CapMeter({ label, used, cap, hint }: { label: string; used: number; cap: number; hint: ReactNode }) {

183

const percent = capPercent(used, cap);

184

const tone = cap > 0 && used >= cap ? "bg-danger" : percent >= 75 ? "bg-warn" : "bg-accent";

return (

<span className="text-sm font-medium">{label}</span>

189

190

{usd(used)} <span className="text-faint">of {cap > 0 ? usd(cap) : "no cap"}</span>

</span>

</div>

</div>

</div>

);

}

/**

* Where the money went, as a short statement: usage sold and running g1t

203

* (each against what paid for it), what g1t gave away on purpose (a budget,

204

* never a loss), and who was paid.

205

*/

206

function Statement({ report, floor, range, proposals }: { report: CostsReport; floor: number; range: number; proposals: number }) {

207

const o = report.overall;

208

// Reports from before the statement have only the totals.

209

const given = o.givenMicros ?? 0;

210

const usageCost = o.usageCostMicros ?? o.costMicros - given;

211

const included = o.includedMicros ?? 0;

212

const usageIn = o.usageMicros + included;

213

const usageMargin = o.usageMarginMicros ?? usageIn - usageCost;

214

// Under a cent sold, a percentage says nothing (a few micros against none).

215

const soldSomething = usageIn >= 10_000;

216

const usagePercent = soldSomething && o.usageMarginPercent !== undefined ? o.usageMarginPercent : null;

217

const running = o.runningCostMicros ?? 0;

218

const unmapped = o.unmappedCostMicros ?? 0;

219

// Cloudflare's subscriptions are not on the usage bill: a month's, over the range.

220

const subscriptions = subscriptionsOver(report.caps.fixedMonthlyMicros, range);

221

const paid = whoPaid(o, subscriptions);

222

const moneyIn = o.usageMicros + o.plansMicros;

223

const spent = paid.totalMicros;

224

const net = moneyIn - spent;

225

const givenParts = [

226

["100% discounts", o.givenCompedMicros ?? 0],

227

["free use", o.givenFreeMicros ?? 0],

228

["trial", o.givenTrialMicros ?? 0],

229

["open-source pool", o.givenPoolMicros ?? 0],

230

["partial discounts", o.givenDiscountMicros ?? 0],

231

["promotional credit", o.givenCreditPromotionalMicros ?? 0],

232

["goodwill credit", o.givenCreditGoodwillMicros ?? 0],

233

["testing resets", o.givenResetMicros ?? 0],

234

].filter(([, micros]) => (micros as number) > 0) as [string, number][];

235

const rows: { title: string; note: string; in: number | null; cost: number; result: number | null; tone?: "danger" | "warn" | "muted" }[] = [

{

title: "Usage sold",

note:

included > 0

? `What workspaces paid for usage (${usd(o.usageMicros, { cents: true })}) and their plan's included usage (${usd(included, { cents: true })}), against what it cost`

241

: "What workspaces paid for usage, against what that usage cost",

in: usageIn,

cost: usageCost,

result: usageMargin,

tone: usageMargin < 0 ? "danger" : undefined,

246

},

247

{

248

title: "Running g1t",

249

note:

250

included > 0

251

? `Plans (${usd(o.plansMicros, { cents: true })}) less the included usage they paid for, against Workers, D1, KV, Queues and the rest`

252

: "Plans, against Workers, D1, KV, Queues and the rest of the platform",

253

in: o.plansMicros - included,

254

cost: running,

255

result: o.plansMicros - included - running,

256

tone: o.plansMicros - included - running < 0 ? "warn" : undefined,

257

},

258

{

259

title: "Cloudflare subscriptions",

260

note:

261

report.caps.fixedSource === "cloudflare"

262

? `Fixed, as Cloudflare lists them${(report.caps.fixedItems ?? []).length > 0 ? ` (${(report.caps.fixedItems ?? []).map((i) => i.name).join(", ")})` : ""}; not on the usage bill`

263

: "Fixed, an estimate (CLOUDFLARE_FIXED_MONTHLY_MICROS) until Cloudflare's list is read; not on the usage bill",

264

in: null,

265

cost: subscriptions,

266

result: -subscriptions,

tone: "muted",

},

...(unmapped > 0

? [{ title: "Not mapped", note: "Billed by Cloudflare, charged for by nothing yet", in: null, cost: unmapped, result: -unmapped, tone: "danger" as const }]

: []),

{

title: "Given away",

note: givenParts.length > 0 ? givenParts.map(([why, micros]) => `${why} ${usd(micros, { cents: true })}`).join(" · ") : "Nothing this range",

in: null,

cost: given,

result: null,

tone: "muted",

},

];

const resultClass = (tone?: string) => (tone === "danger" ? "text-danger" : tone === "warn" ? "text-warn" : tone === "muted" ? "text-muted" : "text-fg");

return (

<>

<Stat

label="Margin on usage sold"

287

value={percentLabel(usagePercent)}

288

hint={

289

soldSomething

290

? `Of the price: ${usd(usageIn, { cents: true })} paid for usage that cost ${usd(usageCost, { cents: true })}`

291

: "No usage sold in this range"

292

}

293

tone={marginTone(usagePercent, floor)}

294

/>

295

<Stat

296

label="Given away on purpose"

297

value={usd(given, { cents: true })}

298

hint={givenParts.length > 0 ? givenParts.map(([why, micros]) => `${usd(micros, { cents: true })} ${why}`).join(", ") : "Nothing given this range"}

/>

<Stat

label="Who g1t paid"

value={usd(paid.totalMicros, { cents: true })}

303

hint={`Cloudflare's usage ${usd(paid.cloudflareMicros, { cents: true })} and subscriptions ${usd(paid.subscriptionsMicros, { cents: true })}, model providers ${usd(paid.modelsMicros, { cents: true })}; the cost in All in`}

304

/>

305

<Stat

306

label="Proposals waiting"

307

value={String(proposals)}

hint={

<>

On Bill & pricing

</Link>

{report.fetchedAt ? (

314

<>

315

{" "}

316

· bill read <When at={report.fetchedAt} time />

317

</>

318

) : (

319

" · the bill has not been read yet"

)}

</>

}

tone={proposals > 0 ? "warn" : undefined}

/>

</div>

<thead>

{report.since} to {report.until}

</th>

<th className="px-4 py-2 text-right font-medium sm:pr-5">Result</th>

</tr>

</thead>

<tbody>

{rows.map((row) => (

<span className="text-fg">{row.title}</span>

343

344

</td>

345

<td className="tabular px-4 py-2.5 text-right">{row.in == null ? <span className="text-faint">—</span> : usd(row.in, { cents: true })}</td>

346

<td className="tabular px-4 py-2.5 text-right">{usd(row.cost, { cents: true })}</td>

347

348

{row.result == null ? "a budget" : usd(row.result, { signed: true, cents: true })}

</td>

</tr>

))}

<tr>

{given > 0 ? `${usd(given, { cents: true })} of the cost was given away on purpose; without it, ${usd(net + given, { signed: true, cents: true })}` : "Everything above"}

357

</span>

358

</td>

359

<td className="tabular px-4 py-2.5 text-right font-medium">{usd(moneyIn, { cents: true })}</td>

360

<td className="tabular px-4 py-2.5 text-right font-medium">{usd(spent, { cents: true })}</td>

361

<td className="tabular px-4 py-2.5 text-right font-medium text-fg sm:pr-5">{usd(net, { signed: true, cents: true })}</td>

</tr>

</tbody>

</table>

</div>

Credits from g1t, {report.since} to {report.until}: {usd(o.creditsGivenMicros ?? 0, { cents: true })} given, {usd(o.creditsUsedMicros ?? 0, { cents: true })}{" "}

368

spent on usage. What promotional and goodwill credit paid for is given away above, never money in; refunds took{" "}

369

{usd(o.creditsRefundedMicros ?? 0, { cents: true })} off money in on the days they refund.{" "}

Every credit

</Link>

</p>

<div>

<dt className="text-xs text-muted">Tax collected</dt>

377

<dd className="tabular text-fg">{usd(o.taxCollectedMicros ?? 0, { cents: true })}</dd>

378

<dd className="text-xs text-faint">Owed to tax authorities; never in money in or margin. Filed from Stripe Tax.</dd>

379

</div>

380

<div>

381

<dt className="text-xs text-muted">Card fees passed on</dt>

382

<dd className="tabular text-fg">{usd(o.cardFeesMicros ?? 0, { cents: true })}</dd>

383

<dd className="text-xs text-faint">Paid Stripe's card fees; not revenue either.</dd>

</div>

</dl>

</>

);

}

function SpendSection({ caps, range, error }: { caps: CostsReport["caps"]; range: number; error: string | null }) {

391

const { rows, totalMicros } = spendRows(caps);

392

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

398

description="What g1t pays for itself this calendar month, today included: accounts on a 100% discount, the trial and open-source pools, free workspaces' overruns, and usage charged without real money behind it. Each is what the work cost g1t, never its price, counted as each charge settled: the model providers' cost, and the price book's cost of sandboxes and builds. Two caps hold it: each 100%-discount account's monthly budget, and a daily breaker on all of it that pauses new hosted-model agent runs g1t would pay for."

>

<CapMeter

label={`Today, ${caps.day} (UTC)`}

403

used={caps.todayMicros}

404

cap={caps.dailyCapMicros}

hint={

caps.tripped ? (

Breaker open{caps.trippedAt ? <> since <When at={caps.trippedAt} time /></> : null}: new hosted-model runs g1t pays for wait until 00:00 UTC.

409

</span>

410

) : caps.liftedBy ? (

411

<>

412

Lifted for today by {caps.liftedBy}

413

{caps.liftNote ? `: “${caps.liftNote}”` : ""}.

414

</>

415

) : (

416

"Paying workspaces on a live card are never paused. PLATFORM_DAILY_SPEND_CAP_MICROS."

)

}

/>

{caps.comped.map((b) => (

421

<CapMeter

422

key={b.account}

423

label={`${b.name}, ${caps.month} (100% discount)`}

424

used={b.usedMicros}

425

cap={b.ceilingMicros}

426

hint={

427

<>

428

{b.ceilingMicros > 0 && b.usedMicros >= b.ceilingMicros ? (

429

<span className="text-danger">Used up: new work on it is refused. </span>

430

) : null}

431

{b.defaultCeiling ? "The default budget (COMPED_MONTHLY_CEILING_MICROS)" : "Its own budget, in its terms"}. Raise it on{" "}

its account

</Link>

: Terms, Limit.

</>

}

/>

))}

</div>

{(caps.tripped || error) && (

</Field>

Lift for today

</Button>

</form>

)}

{error && (

<Notice tone="error">{error}</Notice>

</div>

)}

<thead>

<th className="px-4 py-2 font-medium sm:px-5">{caps.month}, so far</th>

</tr>

</thead>

<tbody>

{rows.map((row) => (

{row.title}

</td>

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(row.micros)}</td>

</tr>

))}

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(totalMicros)}</td>

</tr>

Money in

<span className="block text-xs text-faint">Usage paid for with real money and the plan, as last reconciled</span>

483

</td>

484

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(caps.revenueMicros)}</td>

485

</tr>

486

<tr>

487

<td className="px-4 py-2.5 sm:px-5">Money in less what g1t paid</td>

488

<td className={`tabular px-4 py-2.5 text-right sm:pr-5 ${net < 0 ? "text-danger" : "text-fg-soft"}`}>{usd(net, { signed: true })}</td>

</tr>

</tbody>

</table>

</div>

Why this differs from the statement above: this is {caps.month} so far, the statement the last {range} days. The statement takes Cloudflare's bill as the

495

cost of what Cloudflare runs, so sandboxes and builds inside Cloudflare's included usage cost nothing there, and here what the price book says they

496

cost. Here are Cloudflare's subscriptions for the whole month, there for the range.

497

{(caps.resetMicros ?? 0) > 0 && (

498

<>

499

{" "}

500

And {usd(caps.resetMicros ?? 0, { cents: true })} of this was spent on {(caps.resetWorkspaces ?? []).join(", ")} before a testing reset wiped

501

{(caps.resetWorkspaces ?? []).length === 1 ? " its" : " their"} billing: still g1t's spend, but the statement has it only where the reset kept

it, as given away.

</>

)}

</p>

</Section>

);

}

/**

* The platform pause and the hourly usage watch (billing's platform.rs,

513

* docs/SPEND-GUARDRAILS.md): four levels staff can pause across g1t, what

514

* Cloudflare counted in the last hour against each threshold, and the

515

* last day's breaches.

516

*/

517

function PlatformSection({

guard,

unavailable,

failed,

}: {

guard: PlatformGuard | null;

523

unavailable: string | null;

524

failed: CostsActionResult | null;

}) {

return (

<Section

className="mt-6"

id="platform"

title="Platform pause"

531

description="What Cloudflare counted for all of g1t, read at a quarter past each hour: Workers, D1, Queues, Durable Objects, KV and Artifacts, each against an hourly threshold (PLATFORM_HOURLY_* in billing's wrangler.jsonc). A breach emails staff once per metric every 6 hours. Five times a threshold pauses what that metric feeds, of the levels AUTO_PAUSE names. Any level can be paused here by hand; every service sees a change within 30 seconds."

532

>

533

{!guard ? (

534

<Notice tone="warn">Billing did not answer for the platform pause: {unavailable}</Notice>

535

) : (

536

<>

537

{!guard.can_read && (

538

539

<Notice tone="warn">Billing has no Cloudflare token with Account Analytics Read, so the hourly watch reads nothing. The pause still works.</Notice>

540

</div>

541

)}

542

{(guard.blind ?? []).length > 0 && (

543

544

545

The watcher can't see: {(guard.blind ?? []).map((b) => b.key).join(", ")}

546

{guard.last_run ? ` (the run for ${guard.last_run})` : ""}. Their metrics are not watched until it is fixed; three runs in a row email

547

staff.

548

549

{(guard.blind ?? []).map((b) => (

550

551

<code>{b.dataset}</code> ({b.key}): {b.error}

</li>

))}

</ul>

</Notice>

</div>

)}

{guard.empty && (

Every dataset answered with no rows{guard.last_run ? ` in the run for ${guard.last_run}` : ""}, the month so far included: likely the wrong

562

account or a token that cannot see its analytics. The watcher sees nothing.

</Notice>

</div>

)}

{failed?.section === "platform" && (

567

568

<Notice tone="error">{failed.error}</Notice>

</div>

)}

{PAUSE_LEVELS.map(({ level, title, stops }) => {

573

const state = guard.levels.find((l) => l.level === level);

574

const paused = state?.paused ?? false;

575

const error = failed?.section === `pause-${level}` ? failed.error : null;

return (

<span className="font-medium">{title}</span>

580

{paused ? <Badge tone="danger">Paused</Badge> : <Badge tone="mint">Running</Badge>}

581

</div>

582

<p className="mt-1 text-xs text-muted">{stops}</p>

583

{state?.set_at && (

584

585

{paused ? "Paused" : "Resumed"} <When at={state.set_at} time /> by {state.auto ? "the usage watcher" : state.set_by}

586

{state.note ? `: “${state.note}”` : ""}

</p>

)}

</Field>

{paused ? "Resume" : "Pause"}

</Button>

</form>

{error && (

<Notice tone="error">{error}</Notice>

</div>

)}

</div>

);

})}

</div>

A severe breach may pause: {guard.auto_pause.length ? guard.auto_pause.join(", ") : "nothing (AUTO_PAUSE is empty)"}.

610

</p>

611

612

<h3 className="mt-6 text-sm font-medium">Breaches in the last 24 hours</h3>

613

{guard.breaches.length === 0 ? (

) : (

{guard.breaches.map((b) => (

618

619

620

<Badge tone={b.severe ? "danger" : "warn"}>{b.severe ? "Severe" : b.rule === "spike" ? "Spike" : "Over threshold"}</Badge>

621

622

623

{b.emailed_at ? ", emailed" : ""}

624

</span>

625

</div>

626

<p className="mt-1 text-fg-soft">{b.detail}</p>

</li>

))}

</ul>

)}

Ids are Cloudflare's. <code>node scripts/ops/platform-usage.mjs</code> names them and shows the last 24 hours per script, queue, database and

namespace.

</p>

</>

)}

</Section>

);

}

function UsageTable({ title, metrics, hourly }: { title: string; metrics: PlatformMetric[]; hourly: boolean }) {

645

return (

646

<>

647

<h3 className="mt-6 text-sm font-medium">{title}</h3>

648

{metrics.length === 0 ? (

649

<p className="mt-2 text-sm text-muted">Nothing read yet.</p>

) : (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Metric</th>

656

<th className="px-4 py-2 text-right font-medium">Count</th>

657

{hourly && <th className="px-4 py-2 text-right font-medium">Of threshold</th>}

</tr>

</thead>

<tbody>

{metrics.map((m) => {

663

const share = thresholdShare(m.value, m.threshold);

664

return (

665

666

<td className="px-4 py-2.5 sm:px-5">{m.title}</td>

667

<td className="tabular px-4 py-2.5 text-right">{count(m.value)}</td>

668

{hourly && (

669

<td className={`tabular px-4 py-2.5 text-right ${share != null && share > 100 ? "text-danger" : "text-muted"}`}>

670

{share == null ? "—" : `${share}% of ${count(m.threshold)}`}

</td>

)}

{m.top_name ? `${m.top_name} (${count(m.top_value ?? 0)})` : "—"}

</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</>

);

}