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 ? "fill-danger" : percent >= 75 ? "fill-warn" : "fill-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>

197

</span>

198

</div>

199

{/* Drawn as SVG, its width an attribute: the page's style policy blocks a style attribute. */}

200

201

202

{percent > 0 && <rect x="0" y="0" width={Math.max(2, percent)} height="4" rx="2" className={tone} />}

</svg>

</div>

);

}

/**

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

211

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

212

* never a loss), and who was paid.

213

*/

214

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

215

const o = report.overall;

216

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

217

const given = o.givenMicros ?? 0;

218

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

219

const included = o.includedMicros ?? 0;

220

const usageIn = o.usageMicros + included;

221

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

222

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

223

const soldSomething = usageIn >= 10_000;

224

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

225

const running = o.runningCostMicros ?? 0;

226

const unmapped = o.unmappedCostMicros ?? 0;

227

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

228

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

229

const paid = whoPaid(o, subscriptions);

230

const moneyIn = o.usageMicros + o.plansMicros;

231

const spent = paid.totalMicros;

232

const net = moneyIn - spent;

233

const givenParts = givenBy(o);

234

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`

240

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

in: usageIn,

cost: usageCost,

result: usageMargin,

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

245

},

246

{

247

title: "Running g1t",

248

note:

249

included > 0

250

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

251

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

252

in: o.plansMicros - included,

253

cost: running,

254

result: o.plansMicros - included - running,

255

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

256

},

257

{

258

title: "Cloudflare subscriptions",

259

note:

260

report.caps.fixedSource === "cloudflare"

261

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

262

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

263

in: null,

264

cost: subscriptions,

265

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"

286

value={percentLabel(usagePercent)}

287

hint={

288

soldSomething

289

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

290

: "No usage sold in this range"

291

}

292

tone={marginTone(usagePercent, floor)}

293

/>

294

<Stat

295

label="Given away on purpose"

296

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

297

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

302

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

303

/>

304

<Stat

305

label="Proposals waiting"

306

value={String(proposals)}

hint={

<>

On Bill & pricing

</Link>

{report.fetchedAt ? (

313

<>

314

{" "}

315

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

316

</>

317

) : (

318

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

342

343

</td>

344

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

345

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

346

347

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

356

</span>

357

</td>

358

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

359

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

360

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

367

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

368

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

376

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

377

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

378

</div>

379

<div>

380

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

381

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

382

<dd className="text-xs text-faint">Only payments from before the fee was folded into prices; not revenue either.</dd>

</div>

</dl>

</>

);

}

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

390

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

391

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

397

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

402

used={caps.todayMicros}

403

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.

408

</span>

409

) : caps.liftedBy ? (

410

<>

411

Lifted for today by {caps.liftedBy}

412

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

413

</>

414

) : (

415

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

)

}

/>

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

420

<CapMeter

421

key={b.account}

422

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

423

used={b.usedMicros}

424

cap={b.ceilingMicros}

425

hint={

426

<>

427

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

428

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

429

) : null}

430

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

482

</td>

483

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

484

</tr>

485

<tr>

486

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

487

<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

494

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

495

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

496

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

497

<>

498

{" "}

499

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

500

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

512

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

513

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

514

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

515

*/

516

function PlatformSection({

guard,

unavailable,

failed,

}: {

guard: PlatformGuard | null;

522

unavailable: string | null;

523

failed: CostsActionResult | null;

}) {

return (

<Section

className="mt-6"

id="platform"

title="Platform pause"

530

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

531

>

532

{!guard ? (

533

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

534

) : (

535

<>

536

{!guard.can_read && (

537

538

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

539

</div>

540

)}

541

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

542

543

544

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

545

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

546

staff.

547

548

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

549

550

<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

561

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

</Notice>

</div>

)}

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

566

567

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

</div>

)}

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

572

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

573

const paused = state?.paused ?? false;

574

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

return (

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

579

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

580

</div>

581

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

582

{state?.set_at && (

583

584

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

585

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

609

</p>

610

611

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

612

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

) : (

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

617

618

619

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

620

621

622

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

623

</span>

624

</div>

625

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

644

return (

645

<>

646

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

647

{metrics.length === 0 ? (

648

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

655

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

656

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

</tr>

</thead>

<tbody>

{metrics.map((m) => {

662

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

663

return (

664

665

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

666

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

667

{hourly && (

668

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

669

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

</td>

)}

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

</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</>

);

}