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

151

actions={

152

Read the bill now

</Button>

</form>

}

/>

{RANGES.map((days) => (

Last {days} days

</Link>

))}

</nav>

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

169

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

170

{!report.configured && (

171

172

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

173

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

174

</Notice>

175

)}

176

{banner.map((alert) => (

177

178

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

200

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

/>

<Stat

label="Margin"

value={percentLabel(report.overall.marginPercent)}

206

hint={usd(report.overall.marginMicros)}

207

tone={marginTone(report.overall.marginPercent, floor)}

208

/>

209

<Stat

210

label="Proposals waiting"

211

value={String(open.length)}

212

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

213

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

/>

</div>

<Section

className="mt-6"

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

222

description={

223

product

224

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

225

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

242

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>

252

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

253

254

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

255

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

</tr>

</thead>

<tbody>

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

261

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}

270

</span>

271

</td>

272

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

273

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

274

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

275

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

296

>

297

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

298

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

) : (

<thead>

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

305

306

307

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

308

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

</tr>

</thead>

<tbody>

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

313

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>

319

</td>

320

321

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

322

</td>

323

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

324

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

325

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

339

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

340

>

341

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

342

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

343

) : (

344

345

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

))}

</ul>

)}

</Section>

<thead>

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

358

359

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

</tr>

</thead>

<tbody>

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

366

367

368

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

369

{!v.appliedAt && (

370

371

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

</span>

)}

</td>

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

376

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

393

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

394

>

395

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

396

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

</tr>

</thead>

<tbody>

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

410

const net = w.revenueMicros - w.costMicros;

return (

{w.workspace}

</Link>

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

418

</td>

419

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

420

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

434

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

435

>

436

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

) : (

<thead>

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

444

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

463

</td>

464

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

465

<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

507

</label>

508

509

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

Remove

</Button>

</div>

</div>

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

516

517

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

554

555

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

556

</div>

557

)}

558

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

</div>

</form>

</Section>

</main>

);

}

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

567

const rise = p.proposedCostMicros > p.currentCostMicros;

568

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>

574

</div>

575

576

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

577

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

582

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

583

</p>

584

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

585

586

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

587

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

{p.effectiveAt ? (

<>

{" "}

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

592

</>

593

) : null}

594

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

595

</p>

596

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

621

const percent = capPercent(used, cap);

622

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

return (

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

627

628

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

640

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

641

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

642

const net = caps.revenueMicros - totalMicros;

return (

<Section

className="mt-6"

id="spend"

title="g1t's own spend"

648

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

653

used={caps.todayMicros}

654

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.

659

</span>

660

) : caps.liftedBy ? (

661

<>

662

Lifted for today by {caps.liftedBy}

663

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

664

</>

665

) : (

666

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

)

}

/>

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

671

<CapMeter

672

key={b.account}

673

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

674

used={b.usedMicros}

675

cap={b.ceilingMicros}

676

hint={

677

<>

678

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

679

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

680

) : null}

681

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

733

</td>

734

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

735

</tr>

736

<tr>

737

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

738

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

754

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

755

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

756

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

757

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

766

</span>

767

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

768

</td>

769

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

770

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

771

772

{m.ownMeter ?? "—"}

773

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

774

</td>

775

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

</tr>

))}

</tbody>

</table>

</div>

);

}