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 } 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 { capPercent, daySeries, marginTone, parseBucket, percentLabel, spendRows } 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

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

17

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

18

19

/**

20

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

21

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

22

*/

23

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

24

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

25

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

26

const description =

27

"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 20%; 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));

39

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

40

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

41

const floor = report.settings.marginFloorPercent;

42

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

return (

<Section

className="mt-6"

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

54

description={

55

product

56

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

57

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

74

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

/>

</Section>

<thead>

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

84

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

85

86

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

87

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

</tr>

</thead>

<tbody>

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

93

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}

102

</span>

103

</td>

104

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

105

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

106

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

107

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

126

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

127

>

128

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

129

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

136

137

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

</tr>

</thead>

<tbody>

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

144

const net = w.revenueMicros - w.costMicros;

return (

{w.workspace}

</Link>

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

152

</td>

153

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

154

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

155

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

171

const percent = capPercent(used, cap);

172

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

return (

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

177

178

{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

191

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

192

* never a loss), and who was paid.

193

*/

194

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

195

const o = report.overall;

196

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

197

const given = o.givenMicros ?? 0;

198

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

199

const included = o.includedMicros ?? 0;

200

const usageIn = o.usageMicros + included;

201

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

202

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

203

const soldSomething = usageIn >= 10_000;

204

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

205

const running = o.runningCostMicros ?? 0;

206

const unmapped = o.unmappedCostMicros ?? 0;

207

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

208

const subscriptions = Math.round((report.caps.fixedMonthlyMicros * range) / 30);

209

const moneyIn = o.usageMicros + o.plansMicros;

210

const spent = o.costMicros + subscriptions;

211

const net = moneyIn - spent;

212

const givenParts = [

213

["comped", o.givenCompedMicros ?? 0],

214

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

215

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

216

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

217

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

218

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

219

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`

225

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

in: usageIn,

cost: usageCost,

result: usageMargin,

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

230

},

231

{

232

title: "Running g1t",

233

note:

234

included > 0

235

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

236

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

237

in: o.plansMicros - included,

238

cost: running,

239

result: o.plansMicros - included - running,

240

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

241

},

242

{

243

title: "Cloudflare subscriptions",

244

note:

245

report.caps.fixedSource === "cloudflare"

246

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

247

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

248

in: null,

249

cost: subscriptions,

250

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"

271

value={percentLabel(usagePercent)}

272

hint={soldSomething ? `${usd(usageIn, { cents: true })} paid for usage that cost ${usd(usageCost, { cents: true })}` : "No usage sold in this range"}

273

tone={marginTone(usagePercent, floor)}

274

/>

275

<Stat

276

label="Given away on purpose"

277

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

278

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(o.costMicros, { cents: true })}

283

hint={`Cloudflare ${usd(o.cloudflareCostMicros ?? o.costMicros - (o.modelsCostMicros ?? 0), { cents: true })}, model providers ${usd(o.modelsCostMicros ?? 0, { cents: true })}`}

284

/>

285

<Stat

286

label="Proposals waiting"

287

value={String(proposals)}

hint={

<>

On Bill & pricing

</Link>

{report.fetchedAt ? (

294

<>

295

{" "}

296

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

297

</>

298

) : (

299

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

323

324

</td>

325

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

326

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

327

328

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

337

</span>

338

</td>

339

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

340

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

341

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

</>

);

}

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

351

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

352

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

358

description="What g1t pays for itself, at cost: comped accounts, the trial and open-source pools, free workspaces' overruns, and anything charged without real money behind it. Two caps hold it: each comped 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)`}

363

used={caps.todayMicros}

364

cap={caps.dailyCapMicros}

365