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, givenParts as givenBy, 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) 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>

)}

{(report.unattributedMicros ?? 0) > 0 && (

177

178

And {usd(report.unattributedMicros ?? 0, { cents: true })} of running g1t on days no workspace used anything: no one's, so not above. The

179

workspaces' costs and this add up to the cost in the statement.

</p>

)}

</Section>

</main>

);

}

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

189

const percent = capPercent(used, cap);

190

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

return (

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

195

196

{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

209

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

210

* never a loss), and who was paid.

211

*/

212

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

213

const o = report.overall;

214

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

215

const given = o.givenMicros ?? 0;

216

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

217

const included = o.includedMicros ?? 0;

218

const usageIn = o.usageMicros + included;

219

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

220

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

221

const soldSomething = usageIn >= 10_000;

222

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

223

const running = o.runningCostMicros ?? 0;

224

const unmapped = o.unmappedCostMicros ?? 0;

225

// Cloudflare's subscriptions are not on the usage bill: each day's share of its billing cycle.

226

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

227

const paid = whoPaid(o, subscriptions);

228

const moneyIn = o.usageMicros + o.plansMicros;

229

const spent = paid.totalMicros;

230

const net = moneyIn - spent;

231

const givenParts = givenBy(o);

232

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`

238

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

in: usageIn,

cost: usageCost,

result: usageMargin,

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

243

},

244

{

245

title: "Running g1t",

246

note:

247

included > 0

248

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

249

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

250

in: o.plansMicros - included,

251

cost: running,

252

result: o.plansMicros - included - running,

253

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

254

},

255

{

256

title: "Cloudflare subscriptions",

257

note:

258

report.caps.fixedSource === "cloudflare"

259

? `Fixed, as Cloudflare lists them${(report.caps.fixedItems ?? []).length > 0 ? ` (${(report.caps.fixedItems ?? []).map((i) => i.name).join(", ")})` : ""}; not on the usage bill. Each day is its billing cycle's share of ${usd(report.caps.fixedMonthlyMicros, { cents: true })} a month`

260

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

261

in: null,

262

cost: subscriptions,

263

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"

284

value={percentLabel(usagePercent)}

285

hint={

286

soldSomething

287

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

288

: "No usage sold in this range"

289

}

290

tone={marginTone(usagePercent, floor)}

291

/>

292

<Stat

293

label="Given away on purpose"

294

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

295

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

300

hint={`Cloudflare's usage ${usd(paid.cloudflareMicros, { cents: true })} and subscriptions ${usd(paid.subscriptionsMicros, { cents: true })}${paid.modelsMicros > 0 ? `, model providers ${usd(paid.modelsMicros, { cents: true })} (from before agents were retired)` : ""}; the cost in All in`}

301

/>

302

<Stat

303

label="Proposals waiting"

304

value={String(proposals)}

hint={

<>

On Bill & pricing

</Link>

{report.fetchedAt ? (

311

<>

312

{" "}

313

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

314

</>

315

) : (

316

" · 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>

340

341

</td>

342

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

343

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

344

345

{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"}

354

</span>

355

</td>

356

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

357

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

358

<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 })}{" "}

365

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

366

{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>

374

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

375

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

376

</div>

377

<div>

378

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

379

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

380

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

388

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

389

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

395

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 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 compute g1t would pay for: workflows, checks and the merge queue."

>

<CapMeter

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

400

used={caps.todayMicros}

401

cap={caps.dailyCapMicros}

hint={

caps.tripped ? (

Breaker open{caps.trippedAt ? <> since <When at={caps.trippedAt} time /></> : null}: new work g1t pays for waits until 00:00 UTC.

406

</span>

407

) : caps.liftedBy ? (

408

<>

409

Lifted for today by {caps.liftedBy}

410

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

411

</>

412

) : (

413

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

)

}

/>

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

418

<CapMeter

419

key={b.account}

420

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

421

used={b.usedMicros}

422

cap={b.ceilingMicros}

423

hint={

424

<>

425

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

426

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

427

) : null}

428

{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>

480

</td>

481

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

482

</tr>

483

<tr>

484

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

485

<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

492

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

493

cost. Cloudflare's subscriptions are counted the same way in both: each day its billing cycle's share of the month's price.

494

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

495

<>

496

{" "}

497

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

498

{(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;

510

* docs.g1t.sh/guides/deploy-to-cloudflare/#spend-guardrails): four levels

511

* staff can pause across g1t, what Cloudflare counted in the last hour

512

* against each threshold, and the last day's breaches.

513

*/

514

function PlatformSection({

guard,

unavailable,

failed,

}: {

guard: PlatformGuard | null;

520

unavailable: string | null;

521

failed: CostsActionResult | null;

}) {

return (

<Section

className="mt-6"

id="platform"

title="Platform pause"

528

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."

529

>

530

{!guard ? (

531

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

532

) : (

533

<>

534

{!guard.can_read && (

535

536

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

537

</div>

538

)}

539

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

540

541

542

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

543

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

544

staff.

545

546

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

547

548

<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

559

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

</Notice>

</div>

)}

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

564

565

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

</div>

)}

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

570

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

571

const paused = state?.paused ?? false;

572

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

return (

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

577

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

578

</div>

579

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

580

{state?.set_at && (

581

582

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

583

{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)"}.

607

</p>

608

609

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

610

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

) : (

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

615

616

617

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

618

619

620

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

621

</span>

622

</div>

623

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

642

return (

643

<>

644

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

645

{metrics.length === 0 ? (

646

<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>

653

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

654

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

</tr>

</thead>

<tbody>

{metrics.map((m) => {

660

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

661

return (

662

663

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

664

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

665

{hourly && (

666

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

667

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

</td>

)}

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

</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</>

);

}