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

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

1

import { type ReactNode } from "react";

2

3

import type { CostsReport, PriceProposal } from "@g1t/contracts";

4

5

import type { Route } from "./+types/costs-bill";

6

import { CostsHeader } from "~/components/costs-header";

7

import { Badge, Button, EmptyState, Field, Input, Notice, Section, When } from "~/components/ui";

Merge Cloudflare's usage over its billing cycle: every page read, included amounts once a cycle, a projection, test-mode charges never money in (billing 0052)1d ago

8

import { basisLabel, billReadNote, countLabel, cycleHeadline, driftLabel, percentLabel, proposalOutcome, unitDollars, unpricedMeters, versionCells } from "~/lib/costs";

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

9

import { type CostsActionResult, costsAction, costsLoader } from "~/lib/costs-route.server";

10

import { dollarsField, usd } from "~/lib/money";

11

12

export const meta: Route.MetaFunction = () => [{ title: "Bill & pricing · sudo" }, { name: "robots", content: "noindex, nofollow" }];

13

14

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

15

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

16

17

/**

18

* Cloudflare's bill as read, what does not add up against it, and the

19

* price book: proposals, versions, mappings and the guardrails on them.

20

*/

21

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

22

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

23

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

24

const description =

25

"Cloudflare's bill as read, line by line, what does not add up against g1t's own counts and price book, and the prices themselves: proposals waiting for a decision, every version, the mappings and the guardrails.";

26

if (!report) {

27

return (

28

29

30

31

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

32

</div>

33

</main>

34

);

35

}

36

return (

37

38

39

Merge Cloudflare's usage over its billing cycle: every page read, included amounts once a cycle, a projection, test-mode charges never money in (billing 0052)1d ago

40

41

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

42

<Section

Merge Cloudflare's usage over its billing cycle: every page read, included amounts once a cycle, a projection, test-mode charges never money in (billing 0052)1d ago

43

className="mt-6"

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

44

id="drift"

45

title="Drift"

46

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

47

>

48

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

49

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

50

) : (

51

52

53

<thead>

54

55

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

56

57

58

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

59

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

60

</tr>

61

</thead>

62

<tbody>

63

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

64

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

65

return (

66

67

68

{d.title}

69

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

70

</td>

71

72

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

73

</td>

74

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

75

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

76

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

77

</tr>

78

);

79

})}

80

</tbody>

81

</table>

82

</div>

83

)}

84

</Section>

85

86

<Section

87

className="mt-6"

88

id="proposals"

89

title="Price proposals"

90

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

91

>

92

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

93

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

94

) : (

95

96

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

97

98

))}

99

</ul>

100

)}

101

</Section>

102

103

104

105

106

<thead>

107

108

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

109

110

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

111

112

113

</tr>

114

</thead>

115

<tbody>

Merge costs and margin review: gateway query, own spend, discount meters, superseded rises2d ago

116

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

117

const cells = versionCells(v);

118

return (

119

120

121

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

122

{!v.appliedAt && (

123

124

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

125

</span>

126

)}

127

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

128

</td>

129

<td className="tabular px-4 py-2.5 text-right">{cells.cost === "—" ? <span className="text-faint">—</span> : cells.cost}</td>

130

<td className="tabular px-4 py-2.5 text-right">{cells.price}</td>

131

132

133

</td>

134

135

{v.reason} · {v.createdBy}

136

</td>

137

</tr>

138

);

139

})}

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

140

</tbody>

141

</table>

142

</div>

143

</Section>

144

145

<Section

146

className="mt-6"

147

title="Cloudflare's lines"

148

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

149

>

150

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

151

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

152

) : (

153

154

155

<thead>

156

157

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

158

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

159

160

161

</tr>

162

</thead>

163

<tbody>

164

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

165

166

167

168

{l.product} / {l.meter}

169

</span>

170

171

{l.rawName}

172

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

173

</span>

174

</td>

175

176

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

177

</td>

178

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

179

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

180

</tr>

181

))}

182

</tbody>

183

</table>

184

</div>

185

)}

186

</Section>

187

188

<Section

189

className="mt-6"

190

id="mappings"

191

title="Mappings"

192

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

193

>

194

195

196

197

198

199

</Field>

200

201

202

</Field>

203

204

205

</Field>

206

207

208

</Field>

209

210

211

</Field>

212

213

214

</Field>

215

216

217

</Field>

218

219

Merge branch 'worktree-agent-ad7c6d88d93adc817'2d ago

220

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

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

221

</label>

222

223

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

224

225

Remove

226

</Button>

227

</div>

228

</div>

229

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

230

231

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

232

</div>

233

)}

234

</form>

235

</Section>

236

237

238

239

240

241

Merge branch 'worktree-agent-ad7c6d88d93adc817'2d ago

242

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

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

243

</label>

244

</Field>

245

246

247

</Field>

248

249

250

</Field>

251

252

253

</Field>

254

255

256

</Field>

257

258

259

</Field>

260

261

262

</Field>

263

264

265

</Field>

Merge Stripe Tax, the card fee on card payments, and one free workspace per person2d ago

266

Usage, Billing settings and prepaid AI credit; fixes from the UX audit2d ago

267

Merge Stripe Tax, the card fee on card payments, and one free workspace per person2d ago

268

<input type="checkbox" name="cardFee" defaultChecked={report.settings.cardFee ?? true} className="accent-[var(--g1t-accent)]" /> Its own line; never on invoiced billing or bank transfers

Usage, Billing settings and prepaid AI credit; fixes from the UX audit2d ago

269

</label>

270

</Field>

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

271

272

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

273

274

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

275

</div>

276

)}

277

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

278

</div>

279

</form>

280

</Section>

281

</main>

282

);

283

}

284

285

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

286

const rise = p.proposedCostMicros > p.currentCostMicros;

Merge costs and margin review: gateway query, own spend, discount meters, superseded rises2d ago

287

const outcome = proposalOutcome(p);

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

288

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

289

return (

290

291

292

293

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

294

</div>

295

296

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

297

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

298

</div>

299

</div>

300

Merge branch 'worktree-agent-ad7c6d88d93adc817'2d ago

301

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

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

302

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

303

</p>

304

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

305

306

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

Merge costs and margin review: gateway query, own spend, discount meters, superseded rises2d ago

307

{outcome ? ` · ${outcome}` : ""}

308

{p.effectiveAt && p.status !== "superseded" ? (

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

309

<>

310

{" "}

Merge costs and margin review: gateway query, own spend, discount meters, superseded rises2d ago

311

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

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

312

</>

313

) : null}

314

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

315

</p>

316

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

317

318

319

320

321

322

323

Approve

324

</Button>

325

326

Reject

327

</Button>

328

</div>

329

</form>

330

)}

331

{error && (

332

333

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

334

</div>

335

)}

336

</li>

337

);

338

}

339

Merge Cloudflare's usage over its billing cycle: every page read, included amounts once a cycle, a projection, test-mode charges never money in (billing 0052)1d ago

340

/**

341

* Cloudflare's current billing cycle, the way its Billable usage page shows

342

* it: each meter's use, what the cycle includes, what is past it and what

343

* that costs, with the total so far and the projection.

344

*/

345

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

346

const cycle = report.cycle;

347

const read = report.billRead ? billReadNote(report.billRead) : null;

348

const unpriced = cycle ? unpricedMeters(cycle.meters) : [];

349

const headline = cycle ? cycleHeadline(cycle) : null;

350

return (

351

<Section

352

className="mt-5"

353

id="cycle"

354

title="This billing cycle"

355

description="Cloudflare's usage bill for the cycle so far, meter by meter. Each meter's included amount is the account's, once a cycle; the cost is Cloudflare's own where its lines carry one, else the list price past the included amount (per-million meters in whole millions), on the days the cycle's total passed it. Subscriptions are apart."

356

>

357

{!cycle || !headline ? (

358

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

359

) : (

360

<>

361

362

<span className="font-medium text-fg">{headline.title}</span>

363

<span className="block text-muted">{headline.detail}.</span>

364

</p>

365

{unpriced.length > 0 && (

366

367

368

Used with no list price, so counted at $0 until Cloudflare puts a cost on it or a price is added (src/cycle.rs):{" "}

369

{unpriced.map((m) => `${m.product} / ${m.meter}`).join(", ")}.

370

</Notice>

371

</div>

372

)}

373

374

375

<thead>

376

377

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

378

379

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

380

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

381

382

</tr>

383

</thead>

384

<tbody>

385

{cycle.meters.map((m) => (

386

387

388

{m.rawName}

389

<span className="block text-xs text-faint">{basisLabel(m.basis)}</span>

390

</td>

391

392

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

393

</td>

394

<td className="tabular px-4 py-2.5 text-right text-muted">{m.included == null ? "—" : countLabel(m.included)}</td>

395

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

396

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

397

</tr>

398

))}

399

<tr>

400

401

Usage so far

402

</td>

403

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

404

</tr>

405

</tbody>

406

</table>

407

</div>

408

</>

409

)}

410

{read && (

411

412

Last read <When at={report.billRead?.readAt ?? null} time />: {read.text}

413

</p>

414

)}

415

</Section>

416

);

417

}

418

Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing3d ago

419

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

420

return (

421

422

423

<thead>

424

425

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

426

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

427

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

428

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

429

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

430

</tr>

431

</thead>

432

<tbody>

433

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

434

435

436

437

{m.product} / {m.meter}

438

</span>

439

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

440

</td>

441

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

442

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

443

444

{m.ownMeter ?? "—"}

445

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

446

</td>

447

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

448

</tr>

449

))}

450

</tbody>

451

</table>

452

</div>

453

);

454

}