Skip to content

g1t/apps/sudo/app/routes/costs.tsx

479 lines24,021 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1import type { ReactNode } from "react";
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing2import { Link } from "react-router";
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily3
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing4import type { CostsReport } from "@g1t/contracts";
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily5
6import type { Route } from "./+types/costs";
7import { DaysChart } from "~/components/costs";
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing8import { CostsHeader, chip, costsHref } from "~/components/costs-header";
9import { Badge, Button, Field, Input, Notice, Section, Stat, When } from "~/components/ui";
10import { capPercent, daySeries, marginTone, parseBucket, percentLabel, spendRows } from "~/lib/costs";
11import { type CostsActionResult, costsAction, costsLoader } from "~/lib/costs-route.server";
12import { usd } from "~/lib/money";
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily13
14export const meta: Route.MetaFunction = () => [{ title: "Costs & margin · sudo" }, { name: "robots", content: "noindex, nofollow" }];
15
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing16export const loader = ({ request, context }: Route.LoaderArgs) => costsLoader(request, context);
17export const action = ({ request, context }: Route.ActionArgs) => costsAction(request, context);
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily18
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing19/**
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 */
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily23export default function Costs({ loaderData, actionData }: Route.ComponentProps) {
24 const { range, report, error, done } = loaderData;
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing25 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.";
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily28 if (!report) {
29 return (
30 <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10">
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing31 <CostsHeader page="costs" range={range} report={null} done={null} runError={null} description={description} />
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily32 <div className="mt-5">
33 <Notice tone="warn">Billing did not answer for costs: {error}</Notice>
34 </div>
35 </main>
36 );
37 }
38 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");
43 return (
44 <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10">
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing45 <CostsHeader page="costs" range={range} report={report} done={done} runError={failed?.section === "run" ? failed.error : null} description={description} />
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily46
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running47 <Statement report={report} floor={floor} range={range} proposals={open.length} />
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily48
Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays49 <SpendSection caps={report.caps} error={failed?.section === "lift" ? failed.error : null} />
50
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily51 <Section
52 className="mt-6"
53 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."
58 }
59 >
60 <nav aria-label="Product" className="mb-4 flex flex-wrap gap-2">
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing61 <Link to={costsHref("costs", range, null)} aria-current={!bucket ? "page" : undefined} className={chip(!bucket)}>
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily62 All of g1t
63 </Link>
64 {report.products.map((p) => (
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing65 <Link key={p.bucket} to={costsHref("costs", range, p.bucket)} aria-current={p.bucket === bucket ? "page" : undefined} className={chip(p.bucket === bucket)}>
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily66 {p.title}
67 </Link>
68 ))}
69 </nav>
70 <DaysChart
71 days={series}
72 floor={floor}
73 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"}
75 />
76 </Section>
77
78 <Section className="mt-6" title="By product" description={`Each of g1t's products over the last ${range} days. The floor is ${floor}%.`}>
79 <div className="-mx-4 overflow-x-auto sm:-mx-5">
80 <table className="w-full min-w-[44rem] text-sm">
81 <thead>
82 <tr className="border-b border-line text-left text-xs text-muted">
83 <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 <th className="px-4 py-2 text-right font-medium">Cost</th>
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>
88 <th className="px-4 py-2 text-right font-medium sm:pr-5">%</th>
89 </tr>
90 </thead>
91 <tbody>
92 {report.products.map((p) => {
93 const tone = p.overhead ? undefined : marginTone(p.marginPercent, floor);
94 return (
95 <tr key={p.bucket} className="border-b border-line last:border-0">
96 <td className="px-4 py-2.5 sm:px-5">
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing97 <Link to={costsHref("costs", range, p.bucket)} className="text-fg hover:underline">
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily98 {p.title}
99 </Link>
100 <span className="block text-xs text-faint">
101 {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>
108 <td className="px-4 py-2.5 text-right sm:pr-5">
109 {p.overhead ? (
110 <span className="text-faint">—</span>
111 ) : (
112 <Badge tone={tone === "mint" ? "mint" : tone === "warn" ? "warn" : tone === "danger" ? "danger" : "plain"}>{percentLabel(p.marginPercent)}</Badge>
113 )}
114 </td>
115 </tr>
116 );
117 })}
118 </tbody>
119 </table>
120 </div>
121 </Section>
122
123 <Section
124 className="mt-6"
125 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>
130 ) : (
131 <div className="-mx-4 overflow-x-auto sm:-mx-5">
132 <table className="w-full min-w-[34rem] text-sm">
133 <thead>
134 <tr className="border-b border-line text-left text-xs text-muted">
135 <th className="px-4 py-2 font-medium sm:px-5">Workspace</th>
136 <th className="px-4 py-2 text-right font-medium">Cost to g1t</th>
Costs: margin is measured on what was sold; comped workspaces, free periods, the trial and the pools are given away, a budget shown beside it137 <th className="px-4 py-2 text-right font-medium">Given away</th>
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily138 <th className="px-4 py-2 text-right font-medium">Paid</th>
139 <th className="px-4 py-2 text-right font-medium sm:pr-5">Net</th>
140 </tr>
141 </thead>
142 <tbody>
143 {report.topWorkspaces.map((w) => {
144 const net = w.revenueMicros - w.costMicros;
145 return (
146 <tr key={w.workspace} className="border-b border-line last:border-0">
147 <td className="px-4 py-2.5 sm:px-5">
148 <Link to={`/workspaces/${encodeURIComponent(w.workspace)}#billing`} className="font-mono text-fg hover:underline">
149 {w.workspace}
150 </Link>
151 {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>
Costs: margin is measured on what was sold; comped workspaces, free periods, the trial and the pools are given away, a budget shown beside it154 <td className="tabular px-4 py-2.5 text-right text-fg-soft">{usd(w.givenMicros ?? 0)}</td>
Git storage hardened, pages in tens of milliseconds, honest security alerts, and costs reconciled daily155 <td className="tabular px-4 py-2.5 text-right">{usd(w.revenueMicros)}</td>
156 <td className={`tabular px-4 py-2.5 text-right sm:pr-5 ${net < 0 && !w.internal ? "text-danger" : "text-fg-soft"}`}>{usd(net)}</td>
157 </tr>
158 );
159 })}
160 </tbody>
161 </table>
162 </div>
163 )}
164 </Section>
165
166 </main>
167 );
168}
169
Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays170function CapMeter({ label, used, cap, hint }: { label: string; used: number; cap: number; hint: ReactNode }) {
171 const percent = capPercent(used, cap);
Merge branch 'worktree-agent-ad7c6d88d93adc817'172 const tone = cap > 0 && used >= cap ? "bg-danger" : percent >= 75 ? "bg-warn" : "bg-accent";
Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays173 return (
174 <div className="rounded-md border border-line px-4 py-3">
175 <div className="flex flex-wrap items-baseline justify-between gap-2">
176 <span className="text-sm font-medium">{label}</span>
177 <span className="tabular text-sm">
178 {usd(used)} <span className="text-faint">of {cap > 0 ? usd(cap) : "no cap"}</span>
179 </span>
180 </div>
181 <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-line" role="meter" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(percent)} aria-label={label}>
182 <div className={`h-full ${tone}`} style={{ width: `${percent}%` }} />
183 </div>
184 <p className="mt-1.5 text-xs text-muted">{hint}</p>
185 </div>
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running186 );
187}
188
189/**
190 * 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 */
194function 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;
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)199 const included = o.includedMicros ?? 0;
200 const usageIn = o.usageMicros + included;
201 const usageMargin = o.usageMarginMicros ?? usageIn - usageCost;
sudo: a billing reset runs the costs analysis again so every figure is fresh; every submit button shows it is working (CSS only); no margin percentage on less than a cent sold202 // 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;
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running205 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 = [
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging213 ["100% discounts", o.givenCompedMicros ?? 0],
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running214 ["free use", o.givenFreeMicros ?? 0],
215 ["trial", o.givenTrialMicros ?? 0],
216 ["open-source pool", o.givenPoolMicros ?? 0],
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging217 ["partial discounts", o.givenDiscountMicros ?? 0],
218 ["promotional credit", o.givenCreditPromotionalMicros ?? 0],
219 ["goodwill credit", o.givenCreditGoodwillMicros ?? 0],
Merge main: Deployments panel in the About, project homepage, both sides' operations220 ["testing resets", o.givenResetMicros ?? 0],
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running221 ].filter(([, micros]) => (micros as number) > 0) as [string, number][];
222 const rows: { title: string; note: string; in: number | null; cost: number; result: number | null; tone?: "danger" | "warn" | "muted" }[] = [
223 {
224 title: "Usage sold",
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)225 note:
226 included > 0
sudo: the costs statement reads to the cent227 ? `What workspaces paid for usage (${usd(o.usageMicros, { cents: true })}) and their plan's included usage (${usd(included, { cents: true })}), against what it cost`
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)228 : "What workspaces paid for usage, against what that usage cost",
229 in: usageIn,
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running230 cost: usageCost,
231 result: usageMargin,
232 tone: usageMargin < 0 ? "danger" : undefined,
233 },
234 {
235 title: "Running g1t",
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)236 note:
237 included > 0
sudo: the costs statement reads to the cent238 ? `Plans (${usd(o.plansMicros, { cents: true })}) less the included usage they paid for, against Workers, D1, KV, Queues and the rest`
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)239 : "Plans, against Workers, D1, KV, Queues and the rest of the platform",
240 in: o.plansMicros - included,
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running241 cost: running,
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)242 result: o.plansMicros - included - running,
243 tone: o.plansMicros - included - running < 0 ? "warn" : undefined,
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running244 },
245 {
246 title: "Cloudflare subscriptions",
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing247 note:
248 report.caps.fixedSource === "cloudflare"
249 ? `Fixed, as Cloudflare lists them${(report.caps.fixedItems ?? []).length > 0 ? ` (${(report.caps.fixedItems ?? []).map((i) => i.name).join(", ")})` : ""}; not on the usage bill`
250 : "Fixed, an estimate (CLOUDFLARE_FIXED_MONTHLY_MICROS) until Cloudflare's list is read; not on the usage bill",
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running251 in: null,
252 cost: subscriptions,
253 result: -subscriptions,
254 tone: "muted",
255 },
256 ...(unmapped > 0
257 ? [{ title: "Not mapped", note: "Billed by Cloudflare, charged for by nothing yet", in: null, cost: unmapped, result: -unmapped, tone: "danger" as const }]
258 : []),
259 {
260 title: "Given away",
sudo: the costs statement reads to the cent261 note: givenParts.length > 0 ? givenParts.map(([why, micros]) => `${why} ${usd(micros, { cents: true })}`).join(" · ") : "Nothing this range",
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running262 in: null,
263 cost: given,
264 result: null,
265 tone: "muted",
266 },
267 ];
268 const resultClass = (tone?: string) => (tone === "danger" ? "text-danger" : tone === "warn" ? "text-warn" : tone === "muted" ? "text-muted" : "text-fg");
269 return (
270 <>
271 <div className="mt-5 grid grid-cols-2 gap-3 lg:grid-cols-4">
272 <Stat
273 label="Margin on usage sold"
274 value={percentLabel(usagePercent)}
sudo: a billing reset runs the costs analysis again so every figure is fresh; every submit button shows it is working (CSS only); no margin percentage on less than a cent sold275 hint={soldSomething ? `${usd(usageIn, { cents: true })} paid for usage that cost ${usd(usageCost, { cents: true })}` : "No usage sold in this range"}
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running276 tone={marginTone(usagePercent, floor)}
277 />
278 <Stat
279 label="Given away on purpose"
sudo: the costs statement reads to the cent280 value={usd(given, { cents: true })}
281 hint={givenParts.length > 0 ? givenParts.map(([why, micros]) => `${usd(micros, { cents: true })} ${why}`).join(", ") : "Nothing given this range"}
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running282 />
283 <Stat
284 label="Who g1t paid"
sudo: the costs statement reads to the cent285 value={usd(o.costMicros, { cents: true })}
286 hint={`Cloudflare ${usd(o.cloudflareCostMicros ?? o.costMicros - (o.modelsCostMicros ?? 0), { cents: true })}, model providers ${usd(o.modelsCostMicros ?? 0, { cents: true })}`}
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running287 />
288 <Stat
289 label="Proposals waiting"
290 value={String(proposals)}
Costs: Cloudflare's subscriptions read from Cloudflare each day, the estimate only until then; sudo's costs split into Costs & margin and Bill & pricing291 hint={
292 <>
293 <Link to={costsHref("bill", range) + "#proposals"} className="underline underline-offset-2">
294 On Bill &amp; pricing
295 </Link>
296 {report.fetchedAt ? (
297 <>
298 {" "}
299 · bill read <When at={report.fetchedAt} time />
300 </>
301 ) : (
302 " · the bill has not been read yet"
303 )}
304 </>
305 }
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running306 tone={proposals > 0 ? "warn" : undefined}
307 />
308 </div>
309 <div className="mt-3 overflow-x-auto rounded-lg border border-line bg-surface">
310 <table className="w-full min-w-[36rem] text-sm">
311 <thead>
312 <tr className="border-b border-line text-left text-xs text-muted">
313 <th className="px-4 py-2 font-medium sm:px-5">
314 {report.since} to {report.until}
315 </th>
316 <th className="px-4 py-2 text-right font-medium">Paid in</th>
317 <th className="px-4 py-2 text-right font-medium">Cost</th>
318 <th className="px-4 py-2 text-right font-medium sm:pr-5">Result</th>
319 </tr>
320 </thead>
321 <tbody>
322 {rows.map((row) => (
323 <tr key={row.title} className="border-b border-line">
324 <td className="px-4 py-2.5 sm:px-5">
325 <span className="text-fg">{row.title}</span>
326 <span className="block text-xs text-faint">{row.note}</span>
327 </td>
sudo: the costs statement reads to the cent328 <td className="tabular px-4 py-2.5 text-right">{row.in == null ? <span className="text-faint">—</span> : usd(row.in, { cents: true })}</td>
329 <td className="tabular px-4 py-2.5 text-right">{usd(row.cost, { cents: true })}</td>
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running330 <td className={`tabular px-4 py-2.5 text-right sm:pr-5 ${resultClass(row.tone)}`}>
sudo: the costs statement reads to the cent331 {row.result == null ? "a budget" : usd(row.result, { signed: true, cents: true })}
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running332 </td>
333 </tr>
334 ))}
335 <tr>
336 <td className="px-4 py-2.5 sm:px-5">
337 <span className="font-medium text-fg">All in</span>
338 <span className="block text-xs text-faint">
sudo: the costs statement reads to the cent339 {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"}
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running340 </span>
341 </td>
sudo: the costs statement reads to the cent342 <td className="tabular px-4 py-2.5 text-right font-medium">{usd(moneyIn, { cents: true })}</td>
343 <td className="tabular px-4 py-2.5 text-right font-medium">{usd(spent, { cents: true })}</td>
344 <td className="tabular px-4 py-2.5 text-right font-medium text-fg sm:pr-5">{usd(net, { signed: true, cents: true })}</td>
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running345 </tr>
346 </tbody>
347 </table>
348 </div>
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging349 <p className="mt-2 text-xs text-faint">
350 Credits from g1t, {report.since} to {report.until}: {usd(o.creditsGivenMicros ?? 0, { cents: true })} given, {usd(o.creditsUsedMicros ?? 0, { cents: true })}{" "}
351 spent on usage. What promotional and goodwill credit paid for is given away above, never money in; refunds took{" "}
352 {usd(o.creditsRefundedMicros ?? 0, { cents: true })} off money in on the days they refund.{" "}
353 <Link to="/credits" className="underline underline-offset-2">
354 Every credit
355 </Link>
356 </p>
Merge Stripe Tax, the card fee on card payments, and one free workspace per person357 <dl className="mt-3 grid grid-cols-2 gap-3 rounded-lg border border-line bg-surface px-4 py-3 text-sm sm:px-5">
358 <div>
359 <dt className="text-xs text-muted">Tax collected</dt>
360 <dd className="tabular text-fg">{usd(o.taxCollectedMicros ?? 0, { cents: true })}</dd>
361 <dd className="text-xs text-faint">Owed to tax authorities; never in money in or margin. Filed from Stripe Tax.</dd>
362 </div>
363 <div>
364 <dt className="text-xs text-muted">Card fees passed on</dt>
365 <dd className="tabular text-fg">{usd(o.cardFeesMicros ?? 0, { cents: true })}</dd>
366 <dd className="text-xs text-faint">Paid Stripe&apos;s card fees; not revenue either.</dd>
367 </div>
368 </dl>
Costs: a statement that keeps usage sold, running g1t, subscriptions and what was given away (comped, free use, trial, pool) apart, and says who was paid; free use carries its own cost; the run button says it is running369 </>
370 );
371}
372
Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays373function SpendSection({ caps, error }: { caps: CostsReport["caps"]; error: string | null }) {
374 const { rows, totalMicros } = spendRows(caps);
375 const net = caps.revenueMicros - totalMicros;
376 return (
377 <Section
378 className="mt-6"
379 id="spend"
380 title="g1t's own spend"
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging381 description="What g1t pays for itself, at cost: accounts on a 100% discount, the trial and open-source pools, free workspaces' overruns, and anything charged without real money behind it. Two caps hold it: each 100%-discount account's monthly budget, and a daily breaker on all of it that pauses new hosted-model agent runs g1t would pay for."
Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays382 >
383 <div className="grid gap-3 lg:grid-cols-2">
384 <CapMeter
385 label={`Today, ${caps.day} (UTC)`}
386 used={caps.todayMicros}
387 cap={caps.dailyCapMicros}
388 hint={
389 caps.tripped ? (
390 <span className="text-danger">
391 Breaker open{caps.trippedAt ? <> since <When at={caps.trippedAt} time /></> : null}: new hosted-model runs g1t pays for wait until 00:00 UTC.
392 </span>
393 ) : caps.liftedBy ? (
394 <>
395 Lifted for today by {caps.liftedBy}
396 {caps.liftNote ? `: “${caps.liftNote}”` : ""}.
397 </>
398 ) : (
399 "Paying workspaces on a live card are never paused. PLATFORM_DAILY_SPEND_CAP_MICROS."
400 )
401 }
402 />
403 {caps.comped.map((b) => (
404 <CapMeter
405 key={b.account}
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging406 label={`${b.name}, ${caps.month} (100% discount)`}
Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays407 used={b.usedMicros}
408 cap={b.ceilingMicros}
409 hint={
410 <>
411 {b.ceilingMicros > 0 && b.usedMicros >= b.ceilingMicros ? (
412 <span className="text-danger">Used up: new work on it is refused. </span>
413 ) : null}
414 {b.defaultCeiling ? "The default budget (COMPED_MONTHLY_CEILING_MICROS)" : "Its own budget, in its terms"}. Raise it on{" "}
415 <Link to={`/workspaces/${encodeURIComponent(b.name)}#billing`} className="underline underline-offset-2">
416 its account
417 </Link>
418 : Terms, Limit.
419 </>
420 }
421 />
422 ))}
423 </div>
424 {(caps.tripped || error) && (
425 <form method="post" action="#spend" className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-end">
426 <input type="hidden" name="intent" value="lift" />
427 <Field label="Why lift it" hint="Recorded in the audit log.">
428 <Input name="note" required minLength={5} maxLength={500} placeholder="e.g. Launch day; watching it" className="sm:min-w-[24rem]" />
429 </Field>
430 <Button type="submit" variant="danger">
431 Lift for today
432 </Button>
433 </form>
434 )}
435 {error && (
436 <div className="mt-3">
437 <Notice tone="error">{error}</Notice>
438 </div>
439 )}
440 <div className="-mx-4 mt-5 overflow-x-auto sm:-mx-5">
441 <table className="w-full min-w-[34rem] text-sm">
442 <thead>
443 <tr className="border-b border-line text-left text-xs text-muted">
444 <th className="px-4 py-2 font-medium sm:px-5">{caps.month}, so far</th>
445 <th className="px-4 py-2 text-right font-medium sm:pr-5">g1t paid</th>
446 </tr>
447 </thead>
448 <tbody>
449 {rows.map((row) => (
450 <tr key={row.key} className="border-b border-line align-top">
451 <td className="px-4 py-2.5 sm:px-5">
452 {row.title}
453 <span className="block text-xs text-faint">{row.note}</span>
454 </td>
455 <td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(row.micros)}</td>
456 </tr>
457 ))}
458 <tr className="border-b border-line font-medium">
459 <td className="px-4 py-2.5 sm:px-5">All of it</td>
460 <td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(totalMicros)}</td>
461 </tr>
462 <tr className="border-b border-line">
463 <td className="px-4 py-2.5 sm:px-5">
464 Money in
465 <span className="block text-xs text-faint">Usage paid for and the plan, reconciled through yesterday</span>
466 </td>
467 <td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(caps.revenueMicros)}</td>
468 </tr>
469 <tr>
470 <td className="px-4 py-2.5 sm:px-5">Money in less what g1t paid</td>
471 <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>
472 </tr>
473 </tbody>
474 </table>
475 </div>
476 </Section>
477 );
478}
479

This file's history is long; its oldest lines are credited to the oldest commit read.