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

description="What Cloudflare charged g1t, day by day, against what g1t charged for the same things. 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."

157

actions={

158

Run the analysis now

</Button>

</form>

}

/>

{RANGES.map((days) => (

Last {days} days

</Link>

))}

</nav>

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

175

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

176

{!report.configured && (

177

178

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

179

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

180

</Notice>

181

)}

182

{banner.map((alert) => (

183

184

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

<Stat

label="Money in"

value={usd(report.overall.usageMicros + report.overall.plansMicros)}

206

hint={`${usd(report.overall.usageMicros)} usage, ${usd(report.overall.plansMicros)} plans`}

/>

<Stat

label="Cost"

value={usd(report.overall.costMicros)}

211

hint={given > 0 ? `${usd(given)} of it given away` : `${report.since} to ${report.until}`}

212

/>

213

<Stat

214

label="Margin on what was sold"

215

value={percentLabel(soldPercent)}

216

hint={given > 0 ? `${usd(soldMicros)}; ${percentLabel(report.overall.marginPercent)} with what was given` : usd(soldMicros)}

217

tone={marginTone(soldPercent, floor)}

218

/>

219

<Stat

220

label="Proposals waiting"

221

value={String(open.length)}

222

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

223

tone={open.length > 0 ? "warn" : undefined}

/>

</div>

<Section

className="mt-6"

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

232

description={

233

product

234

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

235

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

252

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>

262

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

263

264

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

265

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

</tr>

</thead>

<tbody>

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

271

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}

280

</span>

281

</td>

282

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

283

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

284

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

285

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

306

>

307

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

308

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

) : (

<thead>

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

315

316

317

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

318

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

</tr>

</thead>

<tbody>

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

323

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>

329

</td>

330

331

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

332

</td>

333

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

334

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

335

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

349

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

350

>

351

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

352

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

353

) : (

354

355

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

))}

</ul>

)}

</Section>

<thead>

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

368

369

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

</tr>

</thead>

<tbody>

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

376

377

378

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

379

{!v.appliedAt && (

380

381

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

</span>

)}

</td>

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

386

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

403

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

404

>

405

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

406

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

413

414

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

</tr>

</thead>

<tbody>

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

421

const net = w.revenueMicros - w.costMicros;

return (

{w.workspace}

</Link>

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

429

</td>

430

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

431

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

432

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

446

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

447

>

448

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

449

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

456

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

475

</td>

476

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

477

<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

519

</label>

520

521

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

Remove

</Button>

</div>

</div>

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

528

529

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

566

567

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

568

</div>

569

)}

570

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

</div>

</form>

</Section>

</main>

);

}

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

579

const rise = p.proposedCostMicros > p.currentCostMicros;

580

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>

586

</div>

587

588

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

589

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

594

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

595

</p>

596

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

597

598

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

599

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

{p.effectiveAt ? (

<>

{" "}

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

604

</>

605

) : null}

606

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

607

</p>

608

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

633

const percent = capPercent(used, cap);

634

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

return (

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

639

640

{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. */

652

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

653

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

654

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

660

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

665

used={caps.todayMicros}

666

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.

671

</span>

672

) : caps.liftedBy ? (

673

<>

674

Lifted for today by {caps.liftedBy}

675

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

676

</>

677

) : (

678

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

)

}

/>

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

683

<CapMeter

684

key={b.account}

685

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

686

used={b.usedMicros}

687

cap={b.ceilingMicros}

688

hint={

689

<>

690

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

691

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

692

) : null}

693

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

745

</td>

746

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

747

</tr>

748

<tr>

749

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

750

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

766

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

767

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

768

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

769

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

778

</span>

779

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

780

</td>

781

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

782

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

783

784

{m.ownMeter ?? "—"}

785

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

786

</td>

787

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

</tr>

))}

</tbody>

</table>

</div>

);

}