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

description="What g1t cost to run (Cloudflare's bill and the model providers') against what workspaces paid. Prices are cost plus 20%; this is where that is checked against the bill, where drift and leaks show, and where price changes wait for a decision."

151

actions={<RunButton />}

152

/>

153

154

{RANGES.map((days) => (

Last {days} days

</Link>

))}

</nav>

{done && <Notice tone="ok">{done}</Notice>}

162

{failed?.section === "run" && <Notice tone="error">{failed.error}</Notice>}

163

{!report.configured && (

164

165

Billing cannot read Cloudflare's bill: set the <code className="font-mono">CLOUDFLARE_BILLING_TOKEN</code> secret on g1t-billing (Account:

166

Billing Read and Account Analytics Read). Until then the figures are g1t's own, and Cloudflare's cost shows as nothing.

167

</Notice>

168

)}

169

{banner.map((alert) => (

170

171

{alert.detail} <span className="text-faint">Since {alert.since}.</span>

</Notice>

))}

{elsewhere > 0 && (

{elsewhere} more open: {" "}

drift and leaks

</a>{" "}

below, and workspaces that cost more than they pay on{" "}

Reach out

</Link>

.

</p>

)}

</div>

<Section

className="mt-6"

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

196

description={

197

product

198

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

199

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

216

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>

226

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

227

228

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

229

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

</tr>

</thead>

<tbody>

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

235

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}

244

</span>

245

</td>

246

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

247

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

248

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

249

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

id="drift"

title="Drift"

description="Over the last 7 days: counts g1t and Cloudflare disagree on past a mapping's threshold, a bill far from the price book's cost of the same usage, and leaks (cost nothing charges for, or a Cloudflare meter no one mapped)."

270

>

271

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

272

<p className="text-sm text-muted">Nothing has drifted.</p>

) : (

<thead>

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

279

280

281

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

282

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

</tr>

</thead>

<tbody>

{report.drift.map((d) => {

287

const money = d.kind !== "count";

return (

{d.title}

<span className="mt-0.5 block max-w-md text-xs text-faint">{d.detail.replace(`${d.title}: `, "")}</span>

293

</td>

294

295

<Badge tone={d.kind === "leak" ? "danger" : "warn"}>{driftLabel(d.kind)}</Badge>

296

</td>

297

<td className="tabular px-4 py-2.5 text-right">{money ? usd(d.ours) : countLabel(d.ours)}</td>

298

<td className="tabular px-4 py-2.5 text-right">{money ? usd(d.cloudflare) : countLabel(d.cloudflare)}</td>

299

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{percentLabel(d.deltaPercent, { signed: true })}</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

id="proposals"

title="Price proposals"

313

description={`What the keeper and the reconciler measured. Moves within ${report.settings.autoApplyPercent}% apply themselves${report.settings.autoApply ? "" : " (off now)"}; larger ones wait here. A fall applies at once; a rise after ${report.settings.noticeDays} days' notice, and a monthly meter's from the start of the next month.`}

314

>

315

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

316

<p className="text-sm text-muted">No proposals yet.</p>

317

) : (

318

319

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

))}

</ul>

)}

</Section>

<thead>

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

332

333

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

</tr>

</thead>

<tbody>

{report.versions.map((v) => (

340

341

342

<span className="font-mono text-xs">{v.meter}</span> <span className="text-faint">v{v.version}</span>

343

{!v.appliedAt && (

344

345

<Badge tone="info">Coming</Badge>

</span>

)}

</td>

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

350

<td className="tabular px-4 py-2.5 text-right">{unitDollars(v.priceMicros)}</td>

</td>

{v.reason} · {v.createdBy}

</td>

</tr>

))}

</tbody>

</table>

</div>

</Section>

<Section

className="mt-6"

title="Workspaces that cost most"

367

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

368

>

369

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

370

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

377

378

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

</tr>

</thead>

<tbody>

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

385

const net = w.revenueMicros - w.costMicros;

return (

{w.workspace}

</Link>

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

393

</td>

394

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

395

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

396

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

</tr>

);

})}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

title="Cloudflare's lines"

410

description="Every meter Cloudflare billed or counted in the range, as it named it, and which of g1t's products it is a cost of. Not mapped means no one decided what pays for it."

411

>

412

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

413

<EmptyState title="No lines yet">The bill is read once a day at 04:17 UTC, or now with “Run the analysis now”.</EmptyState>

) : (

<thead>

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

420

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

</tr>

</thead>

<tbody>

{report.lines.map((l) => (

{l.product} / {l.meter}

</span>

{l.rawName}

{l.source === "artifacts_events" ? " (Artifacts' own count)" : ""}

</span>

</td>

{countLabel(l.quantity)} <span className="text-xs text-faint">{l.unit}</span>

439

</td>

440

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

441

<td className="px-4 py-2.5 sm:pr-5">{l.bucket ? <span className="text-fg-soft">{l.bucket}</span> : <Badge tone="danger">Not mapped</Badge>}</td>

</tr>

))}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

id="mappings"

title="Mappings"

description="Which of g1t's products each Cloudflare meter is a cost of. The longest matching meter prefix wins; * is the rest of the product. A price meter is measured from it; an own meter is g1t's count to compare; scaling prices one of g1t's units at as many of Cloudflare's as it took."

>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

<input type="checkbox" name="scaleToOwn" className="accent-[var(--g1t-merged)]" /> Scale to g1t's count

483

</label>

484

485

<Button type="submit">Save mapping</Button>

Remove

</Button>

</div>

</div>

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

492

493

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

</div>

)}

</form>

</Section>

<input type="checkbox" name="autoApply" defaultChecked={report.settings.autoApply} className="accent-[var(--g1t-merged)]" /> On

</label>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

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

530

531

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

532

</div>

533

)}

534

<Button type="submit">Save guardrails</Button>

</div>

</form>

</Section>

</main>

);

}

function ProposalRow({ proposal: p, error }: { proposal: PriceProposal; error: string | null }) {

543

const rise = p.proposedCostMicros > p.currentCostMicros;

544

const statusTone = p.status === "open" ? "warn" : p.status === "rejected" || p.status === "superseded" ? "plain" : "mint";

return (

<span className="font-medium">{p.title}</span> <span className="font-mono text-xs text-faint">{p.meter}</span>

550

</div>

551

552

{p.suspect && <Badge tone="danger">Far off: look first</Badge>}

553

<Badge tone={statusTone}>{p.status}</Badge>

</div>

</div>

Cost {unitDollars(p.currentCostMicros)} → <span className={rise ? "text-warn" : "text-accent"}>{unitDollars(p.proposedCostMicros)}</span> per {p.unit || "unit"}{" "}

558

<span className="text-faint">({percentLabel(p.changePercent, { signed: true })})</span>

559

</p>

560

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

561

562

From the {p.source}, <When at={p.createdAt} time />

563

{p.decidedBy ? ` · ${p.status} by ${p.decidedBy}` : ""}

{p.effectiveAt ? (

<>

{" "}

· in force from <When at={p.effectiveAt} />

568

</>

569

) : null}

570

{p.note ? ` · “${p.note}”` : ""}

571

</p>

572

{p.status === "open" && (

Approve

</Button>

Reject

</Button>

</div>

</form>

)}

{error && (

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

</div>

)}

</li>

);

}

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

597

const percent = capPercent(used, cap);

598

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

return (

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

603

604

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

</span>

</div>

</div>

</div>

);

}

/** g1t's own spend: the daily breaker, comped budgets, and this month by what paid. */

616

/**

617

* The button that runs the nightly analysis now. sudo runs no JavaScript,

618

* so app.css's run-button rules say it is running while the page waits.

619

*/

620

function RunButton() {

return (

<span className="run-idle">Run the analysis now</span>

626

627

628

Running the analysis…

629

</span>

630

</Button>

631

<span className="run-note text-xs text-muted">Reading the bill and reconciling 31 days; about a minute.</span>

</form>

);

}

/**

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

638

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

639

* never a loss), and who was paid.

640

*/

641

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

642

const o = report.overall;

643

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

644

const given = o.givenMicros ?? 0;

645

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

646

const included = o.includedMicros ?? 0;

647

const usageIn = o.usageMicros + included;

648

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

649

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

650

const running = o.runningCostMicros ?? 0;

651

const unmapped = o.unmappedCostMicros ?? 0;

652

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

653

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

654

const moneyIn = o.usageMicros + o.plansMicros;

655

const spent = o.costMicros + subscriptions;

656

const net = moneyIn - spent;

657

const givenParts = [

658

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

659

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

660

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

661

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

662

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

663

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)}) and their plan's included usage (${usd(included)}), against what it cost`

669

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

in: usageIn,

cost: usageCost,

result: usageMargin,

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

674

},

675

{

676

title: "Running g1t",

677

note:

678

included > 0

679

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

680

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

681

in: o.plansMicros - included,

682

cost: running,

683

result: o.plansMicros - included - running,

684

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

685

},

686

{

687

title: "Cloudflare subscriptions",

688

note: "Fixed, an estimate (CLOUDFLARE_FIXED_MONTHLY_MICROS), not on the usage bill",

689

in: null,

690

cost: subscriptions,

691

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

712

value={percentLabel(usagePercent)}

713

hint={`${usd(usageIn)} paid for usage that cost ${usd(usageCost)}`}

714

tone={marginTone(usagePercent, floor)}

715

/>

716

<Stat

717

label="Given away on purpose"

718

value={usd(given)}

719

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

/>

<Stat

label="Who g1t paid"

value={usd(o.costMicros)}

724

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

725

/>

726

<Stat

727

label="Proposals waiting"

728

value={String(proposals)}

729

hint={report.fetchedAt ? <>Bill read <When at={report.fetchedAt} time /></> : "The bill has not been read yet"}

730

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>

</td>

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

</td>

</tr>

))}

<tr>

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

764

</span>

765

</td>

766

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

767

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

768

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

</tr>

</tbody>

</table>

</div>

</>

);

}

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

778

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

779

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

785

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

790

used={caps.todayMicros}

791

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.

796

</span>

797

) : caps.liftedBy ? (

798

<>

799

Lifted for today by {caps.liftedBy}

800

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

801

</>

802

) : (

803

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

)

}

/>

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

808

<CapMeter

809

key={b.account}

810

label={`${b.name}, ${caps.month} (comped)`}

811

used={b.usedMicros}

812

cap={b.ceilingMicros}

813

hint={

814

<>

815

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

816

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

817

) : null}

818

{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 and the plan, reconciled through yesterday</span>

870

</td>

871

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

872

</tr>

873

<tr>

874

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

875

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

</Section>

);

}

function MappingsTable({ report }: { report: CostsReport }) {

return (

<thead>

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

891

<th className="px-4 py-2 font-medium">g1t product</th>

892

<th className="px-4 py-2 font-medium">Price meter</th>

893

<th className="px-4 py-2 font-medium">Own meter</th>

894

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

</tr>

</thead>

<tbody>

{report.mappings.map((m) => (

{m.product} / {m.meter}

903

</span>

904

{m.note && <span className="block text-xs text-faint">{m.note}</span>}

905

</td>

906

<td className="px-4 py-2 text-fg-soft">{m.bucket}</td>

907

<td className="px-4 py-2 font-mono text-xs text-muted">{m.priceMeter ?? "—"}</td>

908

909

{m.ownMeter ?? "—"}

910

{m.scaleToOwn && <span className="block font-sans text-faint">scaled</span>}

911

</td>

912

<td className="tabular px-4 py-2 text-right text-muted sm:pr-5">{m.driftPercent}%</td>

</tr>

))}

</tbody>

</table>

</div>

);

}