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

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.`;

44

if (!report) {

45

return (

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

</div>

</main>

);

}

const bucket = parseBucket(

56

loaderData.bucket,

57

report.products.map((p) => p.bucket),

58

);

59

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

60

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

61

const floor = report.settings.marginFloorPercent;

62

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

return (

<CostsHeader

page="costs"

range={range}

report={report}

done={done}

runError={failed?.section === "run" ? failed.error : null}

71

description={description}

/>

<Section

className="mt-6"

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

83

description={

84

product

85

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

86

: "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) => (

94

<Link

95

key={p.bucket}

96

to={costsHref("costs", range, p.bucket)}

97

aria-current={p.bucket === bucket ? "page" : undefined}

98

className={chip(p.bucket === bucket)}

>

{p.title}

</Link>

))}

</nav>

<DaysChart

days={series}

floor={floor}

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

108

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>

122

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

123

124

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

125

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

126

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

</tr>

</thead>

<tbody>

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

131

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}

140

</span>

141

</td>

142

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

143

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

144

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

145

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

{p.overhead ? (

) : (

{percentLabel(p.marginPercent)}

</Badge>

)}

</td>

</tr>

);

})}

</tbody>

</table>

</div>

</Section>

<Section

className="mt-6"

title="Workspaces that cost most"

166

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

167

>

168

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

169

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

176

177

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

</tr>

</thead>

<tbody>

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

184

const net = w.revenueMicros - w.costMicros;

185

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

186

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

187

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

195

</td>

196

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

197

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

198

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

</tr>

);

})}

</tbody>

</table>

</div>

)}

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

208

209

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

210

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

219

const percent = capPercent(used, cap);

220

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

return (

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

225

226

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

227

</span>

228

</div>

229

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

230

<svg

231

viewBox="0 0 100 4"

232

preserveAspectRatio="none"

233

className="mt-2 block h-1.5 w-full"

role="meter"

aria-valuemin={0}

aria-valuemax={100}

aria-valuenow={Math.round(percent)}

aria-label={label}

>

{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

250

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

251

* never a loss), and who was paid.

252

*/

253

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

254

const o = report.overall;

255

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

256

const given = o.givenMicros ?? 0;

257

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

258

const included = o.includedMicros ?? 0;

259

const usageIn = o.usageMicros + included;

260

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

261

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

262

const soldSomething = usageIn >= 10_000;

263

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

264

const running = o.runningCostMicros ?? 0;

265

const unmapped = o.unmappedCostMicros ?? 0;

266

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

267

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

268

const paid = whoPaid(o, subscriptions);

269

const moneyIn = o.usageMicros + o.plansMicros;

270

const spent = paid.totalMicros;

271

const net = moneyIn - spent;

272

const givenParts = givenBy(o);

273

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`

279

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

in: usageIn,

cost: usageCost,

result: usageMargin,

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

284

},

285

{

286

title: "Running g1t",

287

note:

288

included > 0

289

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

290

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

291

in: o.plansMicros - included,

292

cost: running,

293

result: o.plansMicros - included - running,

294

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

295

},

296

{

297

title: "Cloudflare subscriptions",

298

note:

299

report.caps.fixedSource === "cloudflare"

300

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

301

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

302

in: null,

303

cost: subscriptions,

304

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"

334

value={percentLabel(usagePercent)}

335

hint={

336

soldSomething

337

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

338

: "No usage sold in this range"

339

}

340

tone={marginTone(usagePercent, floor)}

341

/>

342

<Stat

343

label="Given away on purpose"

344

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

345

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

350

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

351

/>

352

<Stat

353

label="Proposals waiting"

354

value={String(proposals)}

hint={

<>

On Bill & pricing

</Link>

{report.fetchedAt ? (

361

<>

362

{" "}

363

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

364

</>

365

) : (

366

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

390

391

</td>

392

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

393

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

394

395

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

405

: "Everything above"}

406

</span>

407

</td>

408

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

409

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

410

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

417

{usd(o.creditsUsedMicros ?? 0, { cents: true })} spent on usage. What promotional and goodwill credit paid for is given away above, never money in;

418

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

426

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

427

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

428

</div>

429

<div>

430

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

431

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

432

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

440

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

441

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

447

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

452

used={caps.todayMicros}

453

cap={caps.dailyCapMicros}

hint={

caps.tripped ? (

Breaker open

{caps.trippedAt ? (

<>

{" "}

since <When at={caps.trippedAt} time />

462

</>

463

) : null}

464

: new work g1t pays for waits until 00:00 UTC.

465

</span>

466

) : caps.liftedBy ? (

467

<>

468

Lifted for today by {caps.liftedBy}

469

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

470

</>

471

) : (

472

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

)

}

/>

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

477

<CapMeter

478

key={b.account}

479

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

480

used={b.usedMicros}

481

cap={b.ceilingMicros}

482

hint={

483

<>

484

{b.ceilingMicros > 0 && b.usedMicros >= b.ceilingMicros ? <span className="text-danger">Used up: new work on it is refused. </span> : null}

485

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

537

</td>

538

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

539

</tr>

540

<tr>

541

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

542

<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

549

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

550

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

551

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

552

<>

553

{" "}

554

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

555

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

566

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

567

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

568

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

569

*/

570

function PlatformSection({ guard, unavailable, failed }: { guard: PlatformGuard | null; unavailable: string | null; failed: CostsActionResult | null }) {

return (

<Section

className="mt-6"

id="platform"

title="Platform pause"

576

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

577

>

578

{!guard ? (

579

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

580

) : (

581

<>

582

{!guard.can_read && (

583

584

585

Billing has no Cloudflare token with Account Analytics Read, so the hourly watch reads nothing. The pause still works.

</Notice>

</div>

)}

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

590

591

592

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

593

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

594

595

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

596

597

<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

608

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

</Notice>

</div>

)}

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

613

614

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

</div>

)}

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

619

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

620

const paused = state?.paused ?? false;

621

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

return (

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

626

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

627

</div>

628

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

629

{state?.set_at && (

630

631

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

632

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

</p>

)}

<Input

name="note"

required

minLength={5}

maxLength={500}

placeholder={paused ? "e.g. Fixed the loop in search" : "e.g. KV lists runaway"}

/>

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

662

</p>

663

664

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

665

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

) : (

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

670

671

672

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

673

674

675

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

676

</span>

677

</div>

678

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

697

return (

698

<>

699

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

700

{metrics.length === 0 ? (

701

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

708

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

709

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

</tr>

</thead>

<tbody>

{metrics.map((m) => {

715

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

716

return (

717

718

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

719

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

720

{hourly && (

721

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

722

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

</td>

)}

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

</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</>

);

}