Skip to content

g1t/apps/web/app/routes/pricing.tsx

654 lines33,202 bytesCodeBlame
1import { ArrowUpRight } from "lucide-react";
2
3import { type FeaturePlan, type FreeTier, MICROS_PER_DOLLAR, type Price } from "@g1t/contracts";
4
5import type { Route } from "./+types/pricing";
6import { wholeDollars } from "../lib/billing";
7import { page } from "../lib/meta";
8import { TimeAgo } from "../components/ui";
9import { billing } from "../lib/services.server";
10
11export function meta(args: Route.MetaArgs) {
12 return page(args, {
13 title: "Pricing · g1t",
14 description:
15 "The forge is free. One plan, $20 a month per workspace with $10 of usage included; usage at what it costs g1t plus 20%. No seats, ever.",
16 });
17}
18
19export async function loader() {
20 const [book, status] = await Promise.all([billing.prices().catch(() => null), billing.status().catch(() => null)]);
21 return { book, free: status?.free ?? false };
22}
23
24/** A price in dollars, with as many digits as it needs to say anything. */
25function money(micros: number): string {
26 const dollars = micros / MICROS_PER_DOLLAR;
27 if (dollars >= 1) return `$${dollars.toFixed(2)}`;
28 if (dollars >= 0.01) return `$${dollars.toFixed(3)}`;
29 return `$${dollars.toPrecision(2)}`;
30}
31
32/** Per second is easier to read per minute. */
33function perUnit(price: Price, micros: number): string {
34 return price.unit === "second" ? `${money(micros * 60)} a minute` : `${money(micros)} per ${price.unit}`;
35}
36
37function gigabytes(bytes: number): string {
38 return `${Math.round((bytes / 1e9) * 10) / 10} GB`;
39}
40
41function count(n: number): string {
42 return n.toLocaleString("en-US");
43}
44
45/** Price-book rows the table shows in rows of their own, or not at all. */
46const SHOWN_APART = new Set([
47 "app_month",
48 "agent_models",
49 "agent_tokens",
50 "agent_tokens_own",
51 "agent_token_weight_input",
52 "agent_token_weight_output",
53 "agent_token_weight_cache_read",
54 "agent_token_weight_cache_write",
55 "gateway_models",
56 "card_fee_percent",
57 "card_fee_fixed",
58]);
59
60/** How each kind of token counts toward the agent rate, from the price book: `input ×1, …`. */
61function tokenWeights(prices: { meter: string; costMicros: number }[]): string {
62 const weight = (kind: string) => {
63 const row = prices.find((p) => p.meter === `agent_token_weight_${kind}`);
64 return row ? Number((row.costMicros / 1_000_000).toFixed(3)) : 1;
65 };
66 return `input ×${weight("input")}, output ×${weight("output")}, cache reads ×${weight("cache_read")}, cache writes ×${weight("cache_write")}`;
67}
68
69/** What the page says when billing cannot be reached: the published defaults. */
70const DEFAULT_FREE: Required<FreeTier> = {
71 trialWorkspaceMicros: 5_000_000,
72 trialMonthlyPoolMicros: 100_000_000,
73 ossPoolMicros: 25_000_000,
74 ossRepoMicros: 2_000_000,
75 freePrivateStorageBytes: 1_000_000_000,
76 auditRetentionDays: 7,
77 planAuditRetentionDays: 90,
78 minChargeMicros: 5_000_000,
79 gitOperationsIncluded: 50_000,
80 paidStartCeilingMicros: 100_000_000,
81 overageForgiveCostMicros: 50_000_000,
82};
83
84const DEFAULT_PLAN: FeaturePlan = {
85 feature: "plan",
86 title: "g1t",
87 monthlyCents: 2000,
88 includes: [
89 "$10 of usage each month at cost plus 20%, used first",
90 "Everyone in the workspace at one price, never per person",
91 "Unlimited projects, previews and repositories",
92 "Agents, checks, workflows, the merge queue, deployments and semantic search",
93 "Usage past $10 is charged at cost plus 20%, up to your spend limit",
94 ],
95 overage: "Everything is metered from the first unit at what it costs g1t plus 20%. Unused included usage does not roll over.",
96};
97
98/** The ways to reach g1t about an enterprise account. */
99const ENTERPRISE_MAIL = "mailto:hey@flagon.io?subject=Enterprise%20billing%20for%20g1t";
100
101const HOW = [
102 {
103 title: "Our cost, passed through",
104 body: "Every sandbox second, build and app request costs g1t money at Cloudflare. Each is metered and charged at that cost plus 20%, from the first second and the first request. Models are charged at the provider's price with no markup, plus a flat agent rate per million tokens for what g1t adds around them, from prepaid AI credit. Use a little, pay a little.",
105 },
106 {
107 title: "Prices follow costs, by themselves",
108 body: "Model runs are charged at what Cloudflare's AI Gateway priced each request at, so a provider's price change reaches you the same day. Every day, sandbox, build and app costs are checked against what Cloudflare billed g1t; when one moves, its price moves with it, and the change is listed below. The rest are Cloudflare's published prices, marked as such.",
109 },
110 {
111 title: "The 20% is the overhead",
112 body: "It pays for running g1t and for building and keeping up the features you use. The same 20% on everything but models, whose overhead is the agent rate, and nothing bundled in.",
113 },
114 {
115 title: "No seats, ever",
116 body: "Add as many people and agents as you like. A workspace pays one flat price for the plan, and for what it uses past what the plan includes.",
117 },
118];
119
120/** One row of the free-and-plan table. */
121type Row = { what: string; free: string; plan: string; note?: string };
122
123function rows(tier: Required<FreeTier>): Row[] {
124 return [
125 {
126 what: "The forge",
127 free: "Free",
128 plan: "Included",
129 note: "Public and private repositories, issues, pull requests, reviews, protected branches, code owners, search and Explore.",
130 },
131 {
132 what: "Agents, checks, workflows, merge queue",
133 free: "After a card check: the trial, and the open-source pool for checks, workflows and the merge queue on public repositories",
134 plan: "From the plan's included usage, then at cost plus 20%",
135 },
136 {
137 what: "Projects and previews",
138 free: "Not available: deployments run on g1t's machines",
139 plan: "Unlimited, and never charged for. An app no one visits costs nothing.",
140 },
141 {
142 what: "Deployments",
143 free: "Not available",
144 plan: "Builds by the second, app requests, CPU time and custom domains, each from the first at cost plus 20%",
145 },
146 {
147 what: "Semantic search",
148 free: "After a card check, from the trial",
149 plan: "From the plan's included usage, then at cost plus 20%",
150 },
151 {
152 what: "Private storage",
153 free: `${gigabytes(tier.freePrivateStorageBytes)}, never charged. Past it, pushes to private repositories stop until you make room or start the plan.`,
154 plan: `${gigabytes(tier.freePrivateStorageBytes)} free, then at cost plus 20%. Pushes never stop.`,
155 note: "Public repositories are never charged for storage.",
156 },
157 {
158 what: "Git operations",
159 free: `${count(tier.gitOperationsIncluded)} a month, never charged. Past it, slowed to 60 an hour until the month turns.`,
160 plan: `${count(tier.gitOperationsIncluded)} a month free, then at cost plus 20%. Never slowed.`,
161 note: "Clones, fetches and pushes through g1t.",
162 },
163 {
164 what: "Actions cache",
165 free: "2 GiB an entry and 10 GiB a repository, never charged",
166 plan: "The same limits, with what it stores at cost plus 20%",
167 },
168 {
169 what: "Audit log",
170 free: `${tier.auditRetentionDays} days, with export`,
171 plan: `${tier.planAuditRetentionDays} days, with export`,
172 note: "Longer by arrangement. Older entries are deleted each day.",
173 },
174 {
175 what: "Secret scanning, push protection, vulnerability alerts, security updates",
176 free: "Included",
177 plan: "Included",
178 note: "Custom patterns, validity checks, code scanning, dependency review and the security overview on private repositories are the Security and quality activation. On public repositories they are free.",
179 },
180 { what: "Single sign-on", free: "On every plan, once it is built", plan: "On every plan, once it is built" },
181 { what: "Members", free: "Unlimited", plan: "Unlimited" },
182 {
183 what: "Usage past what is included",
184 free: "Not possible: a free workspace never runs up a bill",
185 plan: "Charged at cost plus 20%, up to a spend limit you set. No quotas: only your limit stops anything.",
186 },
187 ];
188}
189
190export default function Pricing({ loaderData }: Route.ComponentProps) {
191 const { book, free } = loaderData;
192 const checked = book?.prices.map((p) => p.checkedAt).filter((at): at is string => !!at).sort().at(-1);
193 const given = Object.fromEntries(Object.entries(book?.free ?? {}).filter(([, value]) => value != null));
194 const tier: Required<FreeTier> = { ...DEFAULT_FREE, ...given };
195 const plan = book?.plans?.find((p) => p.feature === "plan") ?? DEFAULT_PLAN;
196 // The Security and quality activation, as the price book prices it.
197 const securityPlan = book?.plans?.find((p) => p.feature === "security") ?? null;
198 const price = plan.monthlyCents / 100;
199 const dollars = wholeDollars;
200 return (
201 <main className="mx-auto max-w-4xl px-4 py-12">
202 <p className="text-sm font-medium text-accent">Pricing</p>
203 <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">One plan, and usage at cost plus 20%</h1>
204 <p className="mt-3 max-w-2xl text-muted">
205 The forge is free for everyone. Work that runs on g1t's machines is metered at what it costs g1t, plus 20%. The
206 numbers on this page are the live price book g1t charges from.
207 </p>
208 {free && (
209 <div className="mt-5 rounded-xl border border-accent/30 bg-accent/5 px-4 py-3 text-sm">
210 <span className="font-medium">Free while g1t is being built out.</span>{" "}
211 <span className="text-muted">Usage is recorded at these prices but not charged for now. The plan is charged.</span>
212 </div>
213 )}
214
215 <section className="mt-10 rounded-xl border border-accent/40 bg-surface p-6">
216 <div className="flex flex-wrap items-baseline justify-between gap-3">
217 <h2 className="text-xl font-semibold tracking-tight">{plan.title}</h2>
218 <p>
219 <span className="text-3xl font-semibold tabular-nums">${price}</span>{" "}
220 <span className="text-sm text-muted">a month per workspace</span>
221 </p>
222 </div>
223 <ul className="mt-4 space-y-1.5 text-sm text-muted">
224 {plan.includes.map((line) => (
225 <li key={line} className="flex gap-2">
226 <span aria-hidden className="text-accent">
227 ✓
228 </span>
229 {line}
230 </li>
231 ))}
232 </ul>
233 <p className="mt-3 text-xs text-faint">{plan.overage}</p>
234 <div className="mt-5 grid gap-5 border-t border-line pt-5 text-sm sm:grid-cols-2">
235 <div>
236 <p className="font-medium">Where the ${price} goes</p>
237 <p className="mt-1 text-muted">
238 $10 comes back to you as usage: agents, sandboxes, builds and deployments at cost plus 20%, used before
239 anything else. The other $10 pays for running g1t, the free forge for everyone, and the people building it.
240 </p>
241 </div>
242 <div>
243 <p className="font-medium">No quotas</p>
244 <p className="mt-1 text-muted">
245 No count of projects, previews, builds, requests or git operations ever stops a workspace on the plan. Past
246 the $10, usage is charged at cost plus 20%, and only your spend limit stops it. Unused included usage does
247 not roll over.
248 </p>
249 </div>
250 </div>
251 <p className="mt-5 text-sm text-muted">An owner starts the plan from the workspace's Billing page.</p>
252 </section>
253
254 {securityPlan && (
255 <section id="security" className="mt-6 rounded-xl border border-line bg-surface p-6">
256 <div className="flex flex-wrap items-baseline justify-between gap-3">
257 <h2 className="text-xl font-semibold tracking-tight">{securityPlan.title}</h2>
258 <p>
259 <span className="text-3xl font-semibold tabular-nums">${(securityPlan.monthlyCents / 100).toFixed(securityPlan.monthlyCents % 100 ? 2 : 0)}</span>{" "}
260 <span className="text-sm text-muted">a month per workspace</span>
261 </p>
262 </div>
263 <p className="mt-2 text-sm text-muted">
264 An activation, with or without the plan: the security suite's paid parts for a workspace's private repositories.
265 </p>
266 <ul className="mt-4 space-y-1.5 text-sm text-muted">
267 {securityPlan.includes.map((line) => (
268 <li key={line} className="flex gap-2">
269 <span aria-hidden className="text-accent">
270 ✓
271 </span>
272 {line}
273 </li>
274 ))}
275 </ul>
276 <p className="mt-3 text-xs text-faint">{securityPlan.overage}</p>
277 </section>
278 )}
279
280 <h2 className="mt-14 text-xl font-semibold tracking-tight">Free and the plan, side by side</h2>
281 <p className="mt-1 text-sm text-muted">
282 Secret scanning, push protection, vulnerability alerts and security updates are free everywhere, on every plan.
283 </p>
284 {/* On a phone, one row at a time with both answers under it; a table that wide would scroll. */}
285 <ul className="mt-4 divide-y divide-line rounded-xl border border-line text-sm sm:hidden">
286 {rows(tier).map((row) => (
287 <li key={row.what} className="px-4 py-3">
288 <p className="font-medium">{row.what}</p>
289 {row.note && <p className="text-xs text-faint">{row.note}</p>}
290 <dl className="mt-2 grid grid-cols-[4.5rem_1fr] gap-x-3 gap-y-1.5">
291 <dt className="text-xs leading-5 text-faint">Free</dt>
292 <dd className="text-muted">{row.free}</dd>
293 <dt className="text-xs leading-5 text-faint">{plan.title}</dt>
294 <dd className="text-muted">{row.plan}</dd>
295 </dl>
296 </li>
297 ))}
298 </ul>
299 <div className="mt-4 hidden overflow-x-auto rounded-xl border border-line sm:block">
300 <table className="w-full min-w-[36rem] text-left text-sm">
301 <thead className="border-b border-line text-xs text-muted">
302 <tr>
303 <th className="px-4 py-2.5 font-medium">
304 <span className="sr-only">What</span>
305 </th>
306 <th className="px-4 py-2.5 font-medium">Free</th>
307 <th className="px-4 py-2.5 font-medium">
308 {plan.title}, ${price} a month
309 </th>
310 </tr>
311 </thead>
312 <tbody className="divide-y divide-line">
313 {rows(tier).map((row) => (
314 <tr key={row.what} className="align-top">
315 <td className="px-4 py-3">
316 <p className="font-medium">{row.what}</p>
317 {row.note && <p className="text-xs text-faint">{row.note}</p>}
318 </td>
319 <td className="px-4 py-3 text-muted">{row.free}</td>
320 <td className="px-4 py-3 text-muted">{row.plan}</td>
321 </tr>
322 ))}
323 </tbody>
324 </table>
325 </div>
326 <p className="mt-3 text-sm text-muted">
327 Git operations cost g1t money too: Cloudflare charges g1t $0.15 per 1,000. {count(tier.gitOperationsIncluded)} a
328 month is far more than an active workspace uses; an agent run takes two to four.
329 </p>
330
331 <h2 className="mt-14 text-xl font-semibold tracking-tight">No card, no compute</h2>
332 <div className="mt-3 max-w-3xl space-y-3 text-sm text-muted">
333 <p>
334 Agents, checks, workflows, the merge queue, deployments and semantic search run on g1t's machines. They need
335 the plan, or a card check.
336 </p>
337 <p>
338 The reason: compute costs g1t real money from the first second, and free compute draws people who use it to
339 mine cryptocurrency. A card check is the smallest gate that stops that, with one trial per card.
340 </p>
341 <p>
342 A card check is never charged. Stripe saves and verifies the card, with 3-D Secure where your bank asks for it.
343 Nothing is charged until an owner starts the plan, and then the same card is used, without asking for it again.
344 The trial needs a credit or debit card; prepaid cards can still pay for the plan.
345 </p>
346 </div>
347
348 <div className="mt-5 grid gap-4 sm:grid-cols-2">
349 <section className="rounded-xl border border-line bg-surface p-5">
350 <h3 className="font-medium">The trial</h3>
351 <p className="mt-1.5 text-sm text-muted">
352 {dollars(tier.trialWorkspaceMicros)} of usage, once per workspace and once per card, after a card check with a credit or
353 debit card. It comes from a{" "}
354 {dollars(tier.trialMonthlyPoolMicros)} pool each month for everyone; when a month's pool is given out, new
355 trials wait until the 1st. The trial does not cover deployments and never turns into a charge. If the last
356 run on a trial goes past it, g1t covers the difference.
357 </p>
358 </section>
359 <section className="rounded-xl border border-line bg-surface p-5">
360 <h3 className="font-medium">The open-source pool</h3>
361 <p className="mt-1.5 text-sm text-muted">
362 Checks, workflows and the merge queue on public repositories, after a card check:{" "}
363 {dollars(tier.ossPoolMicros)} a month in all, up to {dollars(tier.ossRepoMicros)} a month per repository.
364 Agents do not run from the pool. When the pool or a repository's share is used up, the work waits for the
365 month to turn, or the workspace pays as usual.
366 </p>
367 </section>
368 </div>
369
370 <h2 className="mt-14 text-xl font-semibold tracking-tight">Limits, and how to raise them</h2>
371 <p className="mt-1 max-w-3xl text-sm text-muted">
372 g1t lets usage run ahead of payment only so far. Limits keep a mistake small, for you and for g1t.
373 </p>
374 <ul className="mt-4 grid gap-3 text-sm sm:grid-cols-2">
375 <li className="rounded-xl border border-line bg-surface p-4">
376 <p className="font-medium">{dollars(tier.paidStartCeilingMicros)} in the first month</p>
377 <p className="mt-1 text-muted">
378 A workspace on the plan can use up to {dollars(tier.paidStartCeilingMicros)} in its first month. After that,
379 the limit grows with payments that clear.
380 </p>
381 </li>
382 <li className="rounded-xl border border-line bg-surface p-4">
383 <p className="font-medium">Your own spend limit</p>
384 <p className="mt-1 text-muted">
385 Owners set a monthly spend limit anywhere up to the highest limit the workspace has had, with no approval.
386 Once, you can raise it yourself to twice that.
387 </p>
388 </li>
389 <li className="rounded-xl border border-line bg-surface p-4">
390 <p className="font-medium">Prepay to raise it now</p>
391 <p className="mt-1 text-muted">
392 Prepaying from $25 raises what you can use by the same amount, at once. From $1,000 you can also pay by bank
393 transfer.
394 </p>
395 </li>
396 <li className="rounded-xl border border-line bg-surface p-4">
397 <p className="font-medium">Raise my limit</p>
398 <p className="mt-1 text-muted">
399 Need more? Ask from Billing with the amount, why, and what you expect to spend. You get an answer within one
400 business day, in the app and by email.
401 </p>
402 </li>
403 </ul>
404
405 <h2 className="mt-14 text-xl font-semibold tracking-tight">When usage runs high</h2>
406 <ul className="mt-4 grid gap-3 text-sm sm:grid-cols-2">
407 <li className="rounded-xl border border-line bg-surface p-4">
408 <p className="font-medium">A spike pauses new work</p>
409 <p className="mt-1 text-muted">
410 When an hour's spend is five times your usual hour, and at least $5, new compute waits for an owner to choose
411 Keep going or Stop. Runs already going finish.
412 </p>
413 </li>
414 <li className="rounded-xl border border-line bg-surface p-4">
415 <p className="font-medium">Caps per run and per issue</p>
416 <p className="mt-1 text-muted">
417 One agent run stops at $2 and the agents on one issue at $10 in all, so a run stuck in a loop stops on its own.
418 Owners change both on Billing.
419 </p>
420 </li>
421 <li className="rounded-xl border border-line bg-surface p-4">
422 <p className="font-medium">Alerts at 50, 75, 90 and 100%</p>
423 <p className="mt-1 text-muted">
424 Of the plan's included usage, your spend limit and g1t's limit: in the app and by email.
425 </p>
426 </li>
427 <li className="rounded-xl border border-line bg-surface p-4">
428 <p className="font-medium">Spent more than you meant to? Tell us</p>
429 <p className="mt-1 text-muted">
430 Tell us from Billing what happened. Once in 12 months, g1t can credit back usage you did not mean, always
431 including its 20% on it. Larger credits, or a second one within 12 months, are reviewed by a person.
432 </p>
433 </li>
434 </ul>
435 <p className="mt-3 text-sm text-muted">
436 No card is charged less than {dollars(tier.minChargeMicros)} when a month closes, so a payment's fee is never most
437 of it. Smaller amounts carry over to the next invoice. Charges at a limit always go through.
438 </p>
439
440 <div className="mt-14 grid gap-4 sm:grid-cols-2">
441 {HOW.map((item) => (
442 <section key={item.title} className="rounded-xl border border-line bg-surface p-5">
443 <h2 className="font-medium">{item.title}</h2>
444 <p className="mt-1.5 text-sm text-muted">{item.body}</p>
445 </section>
446 ))}
447 </div>
448
449 <h2 className="mt-14 text-xl font-semibold tracking-tight">Usage</h2>
450 <p className="mt-1 text-sm text-muted">
451 {checked ? (
452 <>
453 Last checked against Cloudflare's bill <TimeAgo at={checked} />.
454 </>
455 ) : (
456 "Starting from Cloudflare's published prices; checked against its bill daily."
457 )}
458 </p>
459 <div className="mt-4 overflow-x-auto rounded-xl border border-line">
460 <table className="w-full text-left text-sm sm:min-w-[36rem]">
461 <thead className="border-b border-line text-xs text-muted">
462 <tr>
463 <th className="px-4 py-2.5 font-medium">What</th>
464 <th className="px-4 py-2.5 font-medium">Costs g1t</th>
465 {/* The markup is in what you pay; on a phone the column gives way. */}
466 <th className="hidden px-4 py-2.5 font-medium sm:table-cell">Markup</th>
467 <th className="px-4 py-2.5 font-medium">You pay</th>
468 </tr>
469 </thead>
470 <tbody className="divide-y divide-line">
471 <tr>
472 <td className="px-4 py-3">
473 <p className="font-medium">Agent models</p>
474 <p className="text-xs text-faint">g1t's hosted models for agent runs, the cheapest that can do each job, paid from AI credit</p>
475 </td>
476 <td className="px-4 py-3 text-muted">What the provider charges, per request</td>
477 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">{book?.modelMarginPercent ?? 0}%</td>
478 <td className="px-4 py-3 text-muted">{book?.modelMarginPercent ? `Cost + ${book.modelMarginPercent}%` : "The provider's price"}</td>
479 </tr>
480 {(() => {
481 const rate = book?.prices.find((p) => p.meter === "agent_tokens");
482 const gateway = book?.prices.find((p) => p.meter === "gateway_models");
483 const feePercent = book?.prices.find((p) => p.meter === "card_fee_percent");
484 const feeFixed = book?.prices.find((p) => p.meter === "card_fee_fixed");
485 const coming = book?.changes.find((c) => c.meter === "agent_tokens" && c.effectiveAt);
486 const ownRate = book?.prices.find((p) => p.meter === "agent_tokens_own");
487 const ownComing = book?.changes.find((c) => c.meter === "agent_tokens_own" && c.effectiveAt);
488 return (
489 <>
490 <tr>
491 <td className="px-4 py-3">
492 <p className="font-medium">g1t agent rate</p>
493 <p className="text-xs text-faint">Context, memory, routing and orchestration, on every token an agent run uses</p>
494 <p className="text-xs text-faint">Tokens count by kind: {tokenWeights(book?.prices ?? [])}</p>
495 </td>
496 <td className="px-4 py-3 text-muted">A flat rate</td>
497 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">—</td>
498 <td className="px-4 py-3 font-mono text-xs tabular-nums">
499 {rate && rate.priceMicros > 0 ? `${money(rate.priceMicros)} per million tokens` : coming ? `${money(coming.newCostMicros)} per million tokens from ${coming.effectiveAt!.slice(0, 10)}` : "$0.25 per million tokens"}
500 </td>
501 </tr>
502 <tr>
503 <td className="px-4 py-3">
504 <p className="font-medium">g1t agent rate, your own model key</p>
505 <p className="text-xs text-faint">The same, on runs that use your own provider; its models are billed by your provider, not g1t</p>
506 </td>
507 <td className="px-4 py-3 text-muted">A flat rate</td>
508 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">—</td>
509 <td className="px-4 py-3 font-mono text-xs tabular-nums">
510 {ownRate && ownRate.priceMicros > 0 ? `${money(ownRate.priceMicros)} per million tokens` : ownComing ? `${money(ownComing.newCostMicros)} per million tokens from ${ownComing.effectiveAt!.slice(0, 10)}` : "$0.25 per million tokens"}
511 </td>
512 </tr>
513 <tr>
514 <td className="px-4 py-3">
515 <p className="font-medium">
516 AI Gateway <span className="ml-1 rounded bg-accent/15 px-1.5 py-0.5 text-xs text-accent">Free during beta</span>
517 </p>
518 <p className="text-xs text-faint">Your own apps calling models through g1t; your own key is free on the plan</p>
519 </td>
520 <td className="px-4 py-3 text-muted">What the provider charges</td>
521 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">{gateway?.markupPercent ?? 0}%</td>
522 <td className="px-4 py-3 text-muted">{gateway?.markupPercent ? `Cost + ${gateway.markupPercent}%` : "The provider's price"}</td>
523 </tr>
524 {feePercent && feeFixed && (
525 <tr>
526 <td className="px-4 py-3">
527 <p className="font-medium">Card processing fee</p>
528 <p className="text-xs text-faint">On AI credit bought by card, as its own line at checkout; never on invoices</p>
529 </td>
530 <td className="px-4 py-3 text-muted">Stripe's fee</td>
531 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">—</td>
532 <td className="px-4 py-3 font-mono text-xs tabular-nums">
533 {(feePercent.priceMicros / 10_000).toFixed(1)}% + {money(feeFixed.priceMicros)}
534 </td>
535 </tr>
536 )}
537 </>
538 );
539 })()}
540 <tr>
541 <td className="px-4 py-3">
542 <p className="font-medium">Projects, previews and apps</p>
543 <p className="text-xs text-faint">Having them. An app's requests and CPU time are charged below.</p>
544 </td>
545 <td className="px-4 py-3 text-muted">Next to nothing</td>
546 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">—</td>
547 <td className="px-4 py-3 text-muted">Not charged</td>
548 </tr>
549 {(book?.prices ?? []).filter((price) => !SHOWN_APART.has(price.meter)).map((price) => (
550 <tr key={price.meter}>
551 <td className="px-4 py-3">
552 <p className="font-medium">{price.title}</p>
553 <p className="text-xs text-faint">
554 {price.meter === "actions_cache" ? "On the plan only. A free workspace is never charged for it. " : ""}
555 {price.source === "cloudflare" ? "Measured from Cloudflare's bill" : "Cloudflare's published price"}
556 </p>
557 </td>
558 <td className="px-4 py-3 font-mono text-xs tabular-nums text-muted">{perUnit(price, price.costMicros)}</td>
559 <td className="hidden px-4 py-3 tabular-nums sm:table-cell">{price.markupPercent}%</td>
560 <td className="px-4 py-3 font-mono text-xs tabular-nums">{perUnit(price, price.priceMicros)}</td>
561 </tr>
562 ))}
563 </tbody>
564 </table>
565 </div>
566
567 <h2 className="mt-14 text-xl font-semibold tracking-tight">Enterprise</h2>
568 <p className="mt-1 text-sm text-muted">
569 For organizations with several workspaces: one invoice and one limit. The prices are the ones on this page.
570 </p>
571 <section className="mt-4 rounded-xl border border-line bg-surface p-5">
572 <ul className="grid gap-3 text-sm sm:grid-cols-2">
573 <li>
574 <p className="font-medium">Consolidated invoicing</p>
575 <p className="text-muted">One monthly invoice for every workspace, paid by card or bank transfer.</p>
576 </li>
577 <li>
578 <p className="font-medium">Custom terms</p>
579 <p className="text-muted">One limit across every workspace, invoice terms and a billing contact, set with you.</p>
580 </li>
581 <li>
582 <p className="font-medium">Security on every plan</p>
583 <p className="text-muted">
584 The audit log with export, {tier.planAuditRetentionDays} days or longer by arrangement, and secret push
585 protection, for every workspace.
586 </p>
587 </li>
588 <li>
589 <p className="font-medium">
590 Single sign-on <span className="ml-1 rounded bg-raised px-1.5 py-0.5 text-xs text-muted">Coming</span>
591 </p>
592 <p className="text-muted">Through your identity provider, on every plan once it is built. Not available yet.</p>
593 </li>
594 </ul>
595 <a
596 href={ENTERPRISE_MAIL}
597 className="mt-5 inline-flex items-center gap-1.5 rounded-md border border-line px-3 py-1.5 text-sm hover:border-line-strong"
598 >
599 Write to us about enterprise
600 <ArrowUpRight size={14} />
601 </a>
602 </section>
603
604 <h2 className="mt-14 text-xl font-semibold tracking-tight">Price changes</h2>
605 {book && book.changes.length > 0 ? (
606 <ul className="mt-4 divide-y divide-line rounded-xl border border-line">
607 {book.changes.map((change) => {
608 const title = book.prices.find((p) => p.meter === change.meter)?.title ?? change.meter;
609 // What you pay moved: the cost, the markup, or both.
610 const before = change.oldCostMicros * (100 + (change.oldMarkupPercent ?? change.markupPercent));
611 const after = change.newCostMicros * (100 + change.markupPercent);
612 const up = after > before;
613 const fresh = after === before || before === 0;
614 return (
615 <li key={`${change.meter}-${change.createdAt}`} className="px-4 py-3 text-sm">
616 <p>
617 <span className="font-medium">{title}</span>{" "}
618 {fresh ? (
619 <span className="text-muted">new</span>
620 ) : (
621 <span className={up ? "text-warn" : "text-accent"}>
622 {up ? "up" : "down"} {Math.abs((after / before - 1) * 100).toFixed(1)}%
623 </span>
624 )}
625 </p>
626 <p className="mt-0.5 text-xs text-faint">
627 {change.effectiveAt ? (
628 <>
629 {change.reason} · <span className="text-fg-soft">takes effect {change.effectiveAt.slice(0, 10)}</span>
630 </>
631 ) : (
632 <>
633 {change.reason} · <TimeAgo at={change.createdAt} />
634 </>
635 )}
636 </p>
637 </li>
638 );
639 })}
640 </ul>
641 ) : (
642 <p className="mt-2 text-sm text-muted">None yet. When a price moves, it is listed here with why.</p>
643 )}
644
645 <a
646 href="https://docs.g1t.sh/guides/usage-and-billing/"
647 className="mt-12 inline-flex items-center gap-1.5 text-sm text-accent hover:underline"
648 >
649 How usage and billing work
650 <ArrowUpRight size={14} />
651 </a>
652 </main>
653 );
654}