Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/workspace/billing.tsx

727 lines32,114 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.

A flat project menu with Code first, views as tabs, and Stripe for every owner1import { ArrowUpRight, CreditCard, FileText, Receipt, Rocket } from "lucide-react";
Agents as a team: lifecycle, merge queue, billing and a new shell2import { Form, Link, data, redirect, useNavigation } from "react-router";
3
Deployments: a preview for every pull request, production on g1t.page4import {
5 DEPLOYMENTS_ALLOWANCE,
6 MICROS_PER_DOLLAR,
7 type DeployUsage,
8 type Feature,
9 type FeatureState,
Usage limits: unpaid usage can only go so far10 type Limit,
Two limits, real invoices, trust that grows by itself, sales signals11 type WorkspaceInvoice,
Deployments: a preview for every pull request, production on g1t.page12} from "@g1t/contracts";
Agents as a team: lifecycle, merge queue, billing and a new shell13
14import type { Route } from "./+types/billing";
Social cards for every page: og.g1t.sh15import { page } from "../../lib/meta";
The statement is a month at a time, a line per kind of charge16import { StatementView } from "../../components/statement";
Workspace names and icons, and a component kit for every control17import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
The statement is a month at a time, a line per kind of charge18import { Button, ErrorText } from "../../components/ui";
Deployments: a preview for every pull request, production on g1t.page19import { billing, deployments } from "../../lib/services.server";
Agents as a team: lifecycle, merge queue, billing and a new shell20import {
21 assertSameOrigin,
22 getViewer,
23 requireUser,
24 roleIn,
25 unwrap,
26} from "../../lib/session.server";
27
28/** What can be added in one payment, in dollars. */
29const AMOUNTS = [10, 25, 50, 100];
30
Social cards for every page: og.g1t.sh31export function meta({ params, ...args }: Route.MetaArgs) {
32 return page(args, { title: `Billing · ${params.owner} · g1t` });
Agents as a team: lifecycle, merge queue, billing and a new shell33}
34
35export async function loader({ params, context, request }: Route.LoaderArgs) {
36 const viewer = getViewer(context);
37 const role = roleIn(viewer, params.owner);
38 // Members only; to anyone else the page does not exist.
39 if (!role) throw data(null, { status: 404 });
40 const slug = params.owner.toLowerCase();
41
42 // Back from the payment page: credit it, then drop the id from the address.
43 const url = new URL(request.url);
44 const session = url.searchParams.get("session");
45 if (session) {
Paid features: a workspace turns on Deployments with a monthly plan46 // The same page returns from both a credit payment and a plan.
47 if (url.searchParams.get("plan")) {
48 await billing.confirmSubscription(slug, viewer, session);
49 throw redirect(`/${slug}/-/billing?subscribed=1`);
50 }
Agents as a team: lifecycle, merge queue, billing and a new shell51 await billing.confirm(slug, viewer, session);
52 throw redirect(`/${slug}/-/billing?added=1`);
53 }
The statement is a month at a time, a line per kind of charge54 const group: "day" | "project" = url.searchParams.get("group") === "project" ? "project" : "day";
The balance shows what was spent this month and in total55 const now = new Date();
56 const monthStart = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1)).toISOString();
57 const [account, statement, features, deployUsage, limit, invoices, thisMonth, allTime] = await Promise.all([
Agents as a team: lifecycle, merge queue, billing and a new shell58 billing.account(slug, viewer),
The statement is a month at a time, a line per kind of charge59 billing.statement(slug, viewer, url.searchParams.get("month"), group),
Paid features: a workspace turns on Deployments with a monthly plan60 billing.features(slug, viewer),
Deployments: a preview for every pull request, production on g1t.page61 deployments.usage(slug, viewer),
Usage limits: unpaid usage can only go so far62 billing.limit(slug, viewer),
Two limits, real invoices, trust that grows by itself, sales signals63 billing.invoices(slug, viewer).catch(() => null),
The balance shows what was spent this month and in total64 billing.usage(slug, viewer, monthStart).catch(() => null),
65 billing.usage(slug, viewer, "1970-01-01T00:00:00.000Z").catch(() => null),
Agents as a team: lifecycle, merge queue, billing and a new shell66 ]);
67 return {
68 slug,
69 role,
70 account: unwrap(account),
The statement is a month at a time, a line per kind of charge71 statement: unwrap(statement),
72 group,
Paid features: a workspace turns on Deployments with a monthly plan73 features: unwrap(features),
Deployments: a preview for every pull request, production on g1t.page74 deployUsage: deployUsage.ok ? deployUsage.value : null,
Usage limits: unpaid usage can only go so far75 limit: limit.ok ? limit.value : null,
Two limits, real invoices, trust that grows by itself, sales signals76 invoices: invoices?.ok ? invoices.value : [],
The balance shows what was spent this month and in total77 spent: {
78 month: thisMonth?.ok ? thisMonth.value.spentMicros : null,
79 total: allTime?.ok ? allTime.value.spentMicros : null,
80 added: allTime?.ok ? allTime.value.addedMicros : null,
81 },
Agents as a team: lifecycle, merge queue, billing and a new shell82 added: url.searchParams.has("added"),
Paid features: a workspace turns on Deployments with a monthly plan83 subscribed: url.searchParams.has("subscribed"),
Agents as a team: lifecycle, merge queue, billing and a new shell84 };
85}
86
87export async function action({ request, params, context }: Route.ActionArgs) {
88 assertSameOrigin(request);
89 const user = requireUser(context, request);
90 const form = await request.formData();
Paid features: a workspace turns on Deployments with a monthly plan91 const page = `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`;
92 const intent = form.get("intent");
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace93 if (intent === "portal") {
94 // Card, invoices and billing details live on Stripe's own page.
95 const started = await billing.billingPortal(user, params.owner, page);
96 if (!started.ok) return { error: started.error.message };
97 throw redirect(started.value.url);
98 }
Two limits, real invoices, trust that grows by itself, sales signals99 if (intent === "spend-limit") {
100 // automatic, fixed (with an amount), or none.
101 const mode = String(form.get("mode") ?? "automatic");
Usage limits: unpaid usage can only go so far102 const amount = Number(form.get("limit"));
Two limits, real invoices, trust that grows by itself, sales signals103 if (mode === "fixed" && !(Number.isFinite(amount) && amount >= 1)) {
104 return { error: "A spend limit is a dollar amount, $1 or more." };
Usage limits: unpaid usage can only go so far105 }
106 const set = await billing.setSpendLimit(
107 user,
108 params.owner,
Two limits, real invoices, trust that grows by itself, sales signals109 mode === "fixed" ? Math.round(amount * MICROS_PER_DOLLAR) : null,
110 mode === "none",
Usage limits: unpaid usage can only go so far111 );
112 return set.ok ? null : { error: set.error.message };
113 }
Paid features: a workspace turns on Deployments with a monthly plan114 if (intent === "subscribe" || intent === "cancel" || intent === "resume") {
115 const feature = String(form.get("feature")) as Feature;
116 if (intent !== "subscribe") {
117 const changed = await billing.cancelSubscription(user, params.owner, feature, intent === "resume");
118 return changed.ok ? null : { error: changed.error.message };
119 }
120 const started = await billing.subscribe(user, params.owner, feature, `${page}?plan=${feature}`);
121 if (!started.ok) return { error: started.error.message };
122 throw redirect(started.value.url);
123 }
Agents as a team: lifecycle, merge queue, billing and a new shell124 const dollars = Math.trunc(Number(form.get("amount")));
125 const started = await billing.checkout(
126 user,
127 params.owner,
128 Number.isFinite(dollars) ? dollars * 100 : 0,
129 // Spelled out: a form post arrives at a data address, not the page's.
130 `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`,
131 );
132 if (!started.ok) return { error: started.error.message };
133 throw redirect(started.value.url);
134}
135
136/** Millionths of a dollar as dollars, to the cent or finer. */
137function dollars(micros: number, digits = 2): string {
138 const sign = micros < 0 ? "−" : "";
139 return `${sign}$${(Math.abs(micros) / MICROS_PER_DOLLAR).toFixed(digits)}`;
140}
141
142export default function WorkspaceBilling({ loaderData, actionData }: Route.ComponentProps) {
The balance shows what was spent this month and in total143 const { slug, role, account, statement, group, spent, features, deployUsage, limit, invoices, added, subscribed } = loaderData;
Agents as a team: lifecycle, merge queue, billing and a new shell144 const { status } = account;
145 const paying = useNavigation().state === "submitting";
146 const empty = account.balanceMicros <= 0;
147 return (
148 <div className="grid gap-10 lg:grid-cols-[1fr_20rem]">
149 <div className="min-w-0">
Free while g1t is being built out; agents can check out their own forks150 {status.free && (
151 <div className="mb-8 rounded-xl border border-accent/30 bg-accent/5 p-5">
152 <h2 className="font-medium">Free while g1t is being built out</h2>
153 <p className="mt-1.5 max-w-2xl text-sm text-muted">
154 While we build g1t out, using it costs nothing: agents, reviews, checks and workflows. Bring your own
155 model provider under Integrations and its usage is billed by that provider, not by g1t. Runs are still
156 recorded with what they cost, so Usage shows what you are using. This is for now, not forever: pricing
157 will come later, and we will say so well before anything is charged.
158 </p>
159 </div>
160 )}
A flat project menu with Code first, views as tabs, and Stripe for every owner161 {account.status.enabled && (
162 <section className="mb-8 flex flex-wrap items-center gap-4 rounded-xl border border-line bg-surface p-5">
163 <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent ring-1 ring-accent/30">
164 <Receipt size={18} />
165 </span>
166 <div className="min-w-0 grow">
167 <h2 className="font-medium">Billing on Stripe</h2>
168 <p className="mt-0.5 text-sm text-muted">
169 {account.card
170 ? `${account.card.brand[0].toUpperCase()}${account.card.brand.slice(1)} ending ${account.card.last4}. `
171 : "No card yet. "}
172 Your card, invoices and receipts, and the billing email, address and tax ID.
173 </p>
174 </div>
175 {role === "owner" ? (
176 <Form method="post">
177 <Button variant="accent" type="submit" name="intent" value="portal" disabled={paying}>
178 Open Stripe billing
179 <ArrowUpRight size={14} />
180 </Button>
181 </Form>
182 ) : (
183 <p className="text-xs text-faint">An owner manages billing.</p>
184 )}
185 </section>
186 )}
187
Usage limits: unpaid usage can only go so far188 {limit && account.status.enabled && (
189 <LimitCard limit={limit} owner={role === "owner"} busy={paying} error={actionData?.error} />
190 )}
191
A flat project menu with Code first, views as tabs, and Stripe for every owner192 {account.status.enabled && (
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace193 <section className="mb-10 rounded-xl border border-line bg-surface p-5">
194 <div className="flex flex-wrap items-center justify-between gap-3">
195 <div>
196 <h2 className="font-medium">Card and invoices</h2>
197 {account.card ? (
198 <p className="mt-1 text-sm">
199 <span className="capitalize">{account.card.brand}</span> ending{" "}
200 <span className="font-mono">{account.card.last4}</span>
201 <span className="text-muted">
202 {" "}
203 · expires {String(account.card.expMonth).padStart(2, "0")}/{account.card.expYear}
204 </span>
205 </p>
206 ) : (
207 <p className="mt-1 max-w-xl text-sm text-muted">
208 No card yet. With one on file, g1t charges it as the workspace nears its usage limit and when each
209 month closes, so work never stops for a payment. Saving it charges nothing.
210 </p>
211 )}
212 <p className="mt-2 max-w-xl text-xs text-faint">
213 Cards, invoices, receipts and the billing email and address are managed on Stripe's billing page. g1t
214 never sees card numbers.
215 </p>
216 </div>
217 {role === "owner" && (
218 <Form method="post">
219 <Button variant={account.card ? "quiet" : "accent"} type="submit" name="intent" value="portal" disabled={paying}>
220 <CreditCard size={14} />
221 {account.card ? "Manage billing on Stripe" : "Add a card on Stripe"}
222 </Button>
223 </Form>
224 )}
225 </div>
226 {account.card && (
227 <p className="mt-3 text-xs text-faint">
228 Charged near the usage limit, for what the workspace owes, and when each month closes. A declined card
229 stops work until it is paid.
230 </p>
231 )}
232 {!account.status.live && (
233 <p className="mt-3 text-xs text-faint">
234 Test mode: use card 4242 4242 4242 4242, any future date and code. Test cards are never charged
235 automatically.
236 </p>
237 )}
238 </section>
239 )}
240
Two limits, real invoices, trust that grows by itself, sales signals241 {invoices.length > 0 && <InvoiceList invoices={invoices} />}
242
Paid features: a workspace turns on Deployments with a monthly plan243 <h2 className="font-medium">Plans</h2>
Agents as a team: lifecycle, merge queue, billing and a new shell244 <p className="mt-1 max-w-2xl text-sm text-muted">
Paid features: a workspace turns on Deployments with a monthly plan245 Paid features are turned on per workspace with a monthly plan. They are never free, including while the rest of
246 g1t is.
247 </p>
248 {subscribed && <p className="mt-3 text-sm text-accent">Payment received. The plan is on.</p>}
249 <div className="mt-5 space-y-4">
250 {features.map((state) => (
251 <PlanCard
252 key={state.plan.feature}
253 state={state}
254 owner={role === "owner"}
255 enabled={account.status.enabled}
256 live={account.status.live}
257 busy={paying}
Deployments: a preview for every pull request, production on g1t.page258 usage={state.plan.feature === "deployments" ? deployUsage : null}
Paid features: a workspace turns on Deployments with a monthly plan259 />
260 ))}
261 </div>
262 <div className="mt-2">
263 <ErrorText>{actionData?.error}</ErrorText>
264 </div>
265
266 <h2 className="mt-12 font-medium">Agent credit</h2>
267 <p className="mt-1 max-w-2xl text-sm text-muted">
Agents as a team: lifecycle, merge queue, billing and a new shell268 g1t agents that work on this workspace's repositories are paid for from
Billing accounts, terms and enterprises; g1t is no longer free269 its account: what the model cost, plus {account.marginPercent}%. Every sandbox, for agents, checks, the merge
Prices are what g1t pays plus 20%, from the first second270 queue and workflows, is metered by the second, from the first. Credit added here pays usage in
Billing accounts, terms and enterprises; g1t is no longer free271 advance; the usage limit above decides whether work starts.
Agents as a team: lifecycle, merge queue, billing and a new shell272 </p>
273
274 <div
275 className={`mt-5 rounded-xl border p-5 ${
276 empty && status.enabled ? "border-warn/40 bg-warn/5" : "border-line bg-surface"
277 }`}
278 >
The balance shows what was spent this month and in total279 <dl className="flex flex-wrap items-end gap-x-10 gap-y-4">
280 <div>
281 <dt className="text-xs text-muted">Balance</dt>
282 <dd className="mt-1 text-3xl font-semibold tabular-nums tracking-tight">
283 {dollars(account.balanceMicros)}
284 </dd>
285 </div>
286 {spent.month !== null && (
287 <div>
288 <dt className="text-xs text-muted">Spent this month</dt>
289 <dd className="mt-1 text-xl font-medium tabular-nums">{dollars(spent.month)}</dd>
290 </div>
291 )}
292 {spent.total !== null && (
293 <div>
294 <dt className="text-xs text-muted">Spent in total</dt>
295 <dd className="mt-1 text-xl font-medium tabular-nums">{dollars(spent.total)}</dd>
296 </div>
297 )}
298 {spent.added !== null && spent.added !== 0 && (
299 <div>
300 <dt className="text-xs text-muted">Paid and credited in total</dt>
301 <dd className="mt-1 text-xl font-medium tabular-nums text-muted">{dollars(spent.added)}</dd>
302 </div>
303 )}
304 </dl>
Agents as a team: lifecycle, merge queue, billing and a new shell305 {added && (
306 <p className="mt-2 text-sm text-accent">Payment received. Credit added.</p>
307 )}
Paid features: a workspace turns on Deployments with a monthly plan308 {status.free && !features.some((state) => state.on && state.subscription) ? (
Billing: nothing to add while it is free309 <p className="mt-3 text-sm text-muted">
310 Nothing to add for now: runs are free while g1t is being built out. Credit already here stays for when
311 pricing starts.
312 </p>
313 ) : !status.enabled ? (
Agents as a team: lifecycle, merge queue, billing and a new shell314 <p className="mt-3 text-sm text-muted">
315 Payments are not set up on this g1t yet, so nothing is charged and
316 agents are limited to selected accounts.
317 </p>
318 ) : role === "owner" ? (
319 <Form method="post" className="mt-4">
Paid features: a workspace turns on Deployments with a monthly plan320 <p className="text-sm text-muted">
321 {status.free
322 ? "Agents are free for now; credit pays for plan usage past its allowance. Add credit by card:"
323 : "Add credit by card:"}
324 </p>
Agents as a team: lifecycle, merge queue, billing and a new shell325 <div className="mt-2 flex flex-wrap gap-2">
326 {AMOUNTS.map((amount) => (
327 <Button
328 key={amount}
329 variant={amount === 25 ? "accent" : "quiet"}
330 type="submit"
331 name="amount"
332 value={amount}
333 disabled={paying}
334 >
335 <CreditCard size={14} />${amount}
336 </Button>
337 ))}
338 </div>
339 {!status.live && (
340 <p className="mt-3 text-xs text-faint">
341 Payments are in test mode. No real card is charged; use Stripe's
342 test card 4242 4242 4242 4242 with any future date and any code.
343 </p>
344 )}
345 </Form>
346 ) : (
347 <p className="mt-3 text-sm text-muted">An owner can add credit.</p>
348 )}
349 </div>
350
The statement is a month at a time, a line per kind of charge351 <StatementView slug={slug} statement={statement} group={group} />
Agents as a team: lifecycle, merge queue, billing and a new shell352 </div>
353
354 <aside className="space-y-5 text-sm">
355 <section className="rounded-xl border border-line bg-surface p-5">
356 <h3 className="font-medium">How it is charged</h3>
357 <ul className="mt-2 list-disc space-y-1.5 pl-4 text-muted">
358 <li>
Prices are what g1t pays plus 20%, from the first second359 Usage is charged after it runs, to the workspace that owns the repository: models, sandbox time, builds
360 and apps at what they cost g1t plus {account.marginPercent}%, which pays for running and building g1t.
361 Nothing is bundled in.
Agents as a team: lifecycle, merge queue, billing and a new shell362 </li>
363 <li>
A flat project menu with Code first, views as tabs, and Stripe for every owner364 Each month closes with an itemised invoice, charged to the card on file. Near your limit, g1t sends one
365 sooner, so work keeps going.
Agents as a team: lifecycle, merge queue, billing and a new shell366 </li>
367 <li>
Integrations: your own model provider, alerts that open issues, tickets agents read368 With your own model provider, connected under{" "}
369 <Link to={`/${slug}/-/integrations`} className="text-fg hover:underline">
370 Integrations
371 </Link>
Prices are what g1t pays plus 20%, from the first second372 , the provider bills you for the model, and a run here is charged only its sandbox time.
Agents as a team: lifecycle, merge queue, billing and a new shell373 </li>
A flat project menu with Code first, views as tabs, and Stripe for every owner374 <li>No seats: add as many people and agents as you like.</li>
Agents as a team: lifecycle, merge queue, billing and a new shell375 </ul>
A flat project menu with Code first, views as tabs, and Stripe for every owner376 <div className="mt-4 space-y-1.5 border-t border-line pt-4 text-sm">
377 <Link to={`/${slug}/-/usage`} className="flex items-center gap-2 text-muted hover:text-fg">
378 <FileText size={14} /> Usage, run by run
379 </Link>
380 <a href="https://g1t.sh/pricing" className="flex items-center gap-2 text-muted hover:text-fg">
381 <CreditCard size={14} /> Today's prices
382 </a>
383 <a
384 href="https://docs.g1t.sh/guides/usage-and-billing/"
385 className="flex items-center gap-2 text-muted hover:text-fg"
386 >
387 <ArrowUpRight size={14} /> How usage and billing work
388 </a>
389 </div>
Agents as a team: lifecycle, merge queue, billing and a new shell390 </section>
391 </aside>
392 </div>
393 );
394}
Paid features: a workspace turns on Deployments with a monthly plan395
396/** A paid feature: what it costs and includes, and its plan. */
397function PlanCard({
398 state,
399 owner,
400 enabled,
401 live,
402 busy,
Deployments: a preview for every pull request, production on g1t.page403 usage,
Paid features: a workspace turns on Deployments with a monthly plan404}: {
405 state: FeatureState;
406 owner: boolean;
407 enabled: boolean;
408 live: boolean;
409 busy: boolean;
Deployments: a preview for every pull request, production on g1t.page410 usage: DeployUsage | null;
Paid features: a workspace turns on Deployments with a monthly plan411}) {
412 const { plan, subscription } = state;
413 const ending = subscription?.status === "canceling";
414 const owed = subscription?.status === "past_due";
415 return (
416 <section
417 className={`rounded-xl border p-5 ${
418 state.on && subscription
419 ? "border-accent/40 bg-accent/5"
420 : owed
421 ? "border-warn/40 bg-warn/5"
422 : "border-line bg-surface"
423 }`}
424 >
425 <div className="flex flex-wrap items-start justify-between gap-4">
426 <div className="min-w-0">
427 <h3 className="flex flex-wrap items-center gap-2 font-medium">
428 <Rocket size={15} className="text-accent" />
429 {plan.title}
430 {state.on && subscription && (
431 <span className="rounded-full bg-accent/15 px-2 py-0.5 text-xs text-accent">
432 {ending ? "Ends " : "On"}
433 {subscription.periodEnd && (
434 <>
435 {ending ? "" : " · renews "}
436 {new Date(subscription.periodEnd).toLocaleDateString()}
437 </>
438 )}
439 </span>
440 )}
441 {owed && <span className="rounded-full bg-warn/15 px-2 py-0.5 text-xs text-warn">Payment failed</span>}
442 </h3>
443 <p className="mt-1 text-sm text-muted">
444 Every pull request gets a live preview on g1t.page, and the default branch goes to production on merge.
445 </p>
446 </div>
447 <p className="shrink-0 text-right">
448 <span className="text-2xl font-semibold tabular-nums tracking-tight">
449 ${(plan.monthlyCents / 100).toFixed(0)}
450 </span>
451 <span className="text-sm text-muted"> / month</span>
452 </p>
453 </div>
454 <ul className="mt-4 grid gap-1.5 text-sm text-muted sm:grid-cols-2">
455 {plan.includes.map((line) => (
456 <li key={line} className="flex gap-2">
457 <span className="text-accent">✓</span>
458 {line}
459 </li>
460 ))}
461 </ul>
462 <p className="mt-3 text-xs text-faint">{plan.overage}</p>
Deployments: a preview for every pull request, production on g1t.page463 {state.on && usage && <DeployMeter usage={usage} />}
Paid features: a workspace turns on Deployments with a monthly plan464 {!enabled ? (
465 <p className="mt-4 text-sm text-muted">Payments are not set up on this g1t, so {plan.title} is already on.</p>
466 ) : !owner ? (
467 !state.on && <p className="mt-4 text-sm text-muted">An owner can turn it on.</p>
468 ) : (
469 <Form method="post" className="mt-4 flex flex-wrap items-center gap-3">
470 <input type="hidden" name="feature" value={plan.feature} />
471 {!state.on || !subscription ? (
472 <Button variant="accent" type="submit" name="intent" value="subscribe" disabled={busy}>
473 <CreditCard size={14} />
474 Turn on {plan.title}
475 </Button>
476 ) : ending ? (
477 <Button variant="quiet" type="submit" name="intent" value="resume" disabled={busy}>
478 Keep {plan.title}
479 </Button>
480 ) : (
481 <Button variant="quiet" type="submit" name="intent" value="cancel" disabled={busy}>
482 Turn off at the end of the period
483 </Button>
484 )}
485 {!live && !state.on && (
486 <span className="text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</span>
487 )}
488 </Form>
489 )}
490 </section>
491 );
492}
Deployments: a preview for every pull request, production on g1t.page493
494/** This month's use of the Deployments plan against what it includes. */
495function DeployMeter({ usage }: { usage: DeployUsage }) {
496 const a = DEPLOYMENTS_ALLOWANCE;
497 const rows: [string, number, number, (n: number) => string][] = [
498 ["Apps up at once (most this month)", usage.peakApps, a.apps, (n) => String(n)],
499 ["Requests", usage.requests, a.requests, (n) => n.toLocaleString("en-US")],
500 ["CPU milliseconds", usage.cpuMs, a.cpuMs, (n) => n.toLocaleString("en-US")],
501 ];
502 return (
503 <div className="mt-4 rounded-lg border border-line bg-bg/40 p-4">
504 <p className="text-xs font-medium text-muted">This month ({usage.month})</p>
505 <ul className="mt-2 space-y-2.5">
506 {rows.map(([label, used, included, show]) => (
507 <li key={label} className="text-sm">
508 <div className="flex justify-between gap-4">
509 <span className="text-muted">{label}</span>
510 <span className={`tabular-nums ${used > included ? "text-warn" : ""}`}>
511 {show(used)} <span className="text-faint">of {show(included)}</span>
512 </span>
513 </div>
514 <div className="mt-1 h-1 overflow-hidden rounded-full bg-line">
515 <div
516 className={`h-full rounded-full ${used > included ? "bg-warn" : "bg-accent"}`}
517 style={{ width: `${Math.min(100, (used / included) * 100)}%` }}
518 />
519 </div>
520 </li>
521 ))}
522 </ul>
523 <p className="mt-3 text-xs text-faint">
524 Builds: {Math.ceil(usage.buildSeconds / 60)} min, {dollars(usage.buildMicros, 4)} at cost.
525 {usage.countedAt ? " Requests and CPU time are counted every few minutes." : " Requests are counted once apps get visits."}
526 </p>
527 </div>
528 );
529}
Usage limits: unpaid usage can only go so far530
531const TRUST: Record<Limit["trust"], { label: string; detail: string }> = {
Two limits, real invoices, trust that grows by itself, sales signals532 new: { label: "New", detail: "No payment to g1t yet." },
533 paid: { label: "Paid", detail: "Grows with every payment." },
534 established: { label: "Established", detail: "Follows your monthly spend." },
Usage limits: unpaid usage can only go so far535 reviewed: { label: "Reviewed", detail: "Set by g1t for this workspace." },
Billing accounts, terms and enterprises; g1t is no longer free536 internal: { label: "Comped", detail: "g1t covers this workspace's usage: nothing is charged, and there is no limit." },
Usage limits: unpaid usage can only go so far537};
538
Two limits, real invoices, trust that grows by itself, sales signals539/** One meter: how much of a limit is used. */
540function Meter({ used, of, state }: { used: number; of: number | null; state: "ok" | "warning" | "stopped" }) {
541 const share = of ? Math.min(1, used / Math.max(of, 1)) : 0;
542 const bar = state === "stopped" ? "bg-danger" : state === "warning" ? "bg-warn" : "bg-accent";
543 return (
544 <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-line" role="presentation">
545 <div className={`h-full ${bar}`} style={{ width: `${Math.max(share * 100, share > 0 ? 2 : 0)}%` }} />
546 </div>
547 );
548}
549
550function meterState(used: number, of: number | null): "ok" | "warning" | "stopped" {
551 if (of == null) return "ok";
552 if (used >= of) return "stopped";
553 return used * 5 >= of * 4 ? "warning" : "ok";
554}
555
Usage limits: unpaid usage can only go so far556/**
Two limits, real invoices, trust that grows by itself, sales signals557 * The workspace's two limits, side by side: the owners' monthly spend
558 * limit, which protects them from a surprise; and what g1t lets go unpaid,
559 * which grows with what they pay and is charged to the card as it nears.
Usage limits: unpaid usage can only go so far560 */
561function LimitCard({ limit, owner, busy, error }: { limit: Limit; owner: boolean; busy: boolean; error?: string }) {
562 const tone =
563 limit.state === "stopped" ? "border-danger/40 bg-danger/5" : limit.state === "warning" ? "border-warn/40 bg-warn/5" : "border-line bg-surface";
564 const trust = TRUST[limit.trust];
Two limits, real invoices, trust that grows by itself, sales signals565 const spent = limit.spentMicros ?? 0;
566 const spendLimit = limit.spendLimitMicros;
567 const available = limit.availableMicros ?? limit.ceilingMicros;
568 const mode = limit.defaultSpendLimit ? "automatic" : spendLimit == null ? "none" : "fixed";
569 if (limit.trust === "internal") {
570 return (
571 <section className="mb-10 rounded-xl border border-line bg-surface p-5">
572 <div className="flex flex-wrap items-baseline justify-between gap-2">
573 <h2 className="font-medium">Limits</h2>
574 <span className="rounded-full border border-accent/40 px-2 py-0.5 text-xs text-accent">Comped</span>
575 </div>
576 <p className="mt-1 text-sm text-muted">{trust.detail}</p>
577 </section>
578 );
579 }
Usage limits: unpaid usage can only go so far580 return (
581 <section className={`mb-10 rounded-xl border p-5 ${tone}`}>
582 <div className="flex flex-wrap items-baseline justify-between gap-2">
Two limits, real invoices, trust that grows by itself, sales signals583 <h2 className="font-medium">Limits</h2>
Usage limits: unpaid usage can only go so far584 <span className="rounded-full border border-line px-2 py-0.5 text-xs text-muted">{trust.label}</span>
585 </div>
Billing accounts, terms and enterprises; g1t is no longer free586 {limit.account.startsWith("ent_") && (
Two limits, real invoices, trust that grows by itself, sales signals587 <p className="mt-1 text-sm text-muted">
Billing accounts, terms and enterprises; g1t is no longer free588 Paid for by the <span className="font-medium text-fg">{limit.accountName}</span> enterprise: these figures are
589 for all of its workspaces together.
590 </p>
591 )}
Two limits, real invoices, trust that grows by itself, sales signals592
593 <div className="mt-5 grid gap-6 sm:grid-cols-2">
594 <div>
595 <p className="text-xs text-muted">Spent this month</p>
596 <p className="mt-1 text-2xl font-semibold tabular-nums tracking-tight">
597 {dollars(spent)}
598 <span className="text-base font-normal text-muted">
599 {spendLimit == null ? " · no spend limit" : ` of ${dollars(spendLimit)}`}
600 </span>
601 </p>
602 {spendLimit != null && <Meter used={spent} of={spendLimit} state={meterState(spent, spendLimit)} />}
603 <p className="mt-2 text-xs text-faint">
604 {mode === "automatic"
605 ? "Your spend limit is automatic: $200, or twice last month's spend, so it keeps up as you grow."
606 : mode === "fixed"
607 ? "A spend limit you set. At it, work stops until the month turns."
608 : "No spend limit: work never stops for spend, only for what g1t lets go unpaid."}
609 </p>
610 </div>
611 <div>
612 <p className="text-xs text-muted">Not yet paid</p>
613 <p className="mt-1 text-2xl font-semibold tabular-nums tracking-tight">
614 {dollars(limit.exposureMicros)}
615 <span className="text-base font-normal text-muted">
616 {available == null ? "" : ` of ${dollars(available)} available`}
Usage limits: unpaid usage can only go so far617 </span>
Two limits, real invoices, trust that grows by itself, sales signals618 </p>
619 {available != null && (
620 <Meter used={limit.exposureMicros} of={available} state={meterState(limit.exposureMicros, available)} />
Usage limits: unpaid usage can only go so far621 )}
Two limits, real invoices, trust that grows by itself, sales signals622 <p className="mt-2 text-xs text-faint">
623 With a card on file, g1t charges it as this nears what is available, so work keeps going.
624 {limit.growth ? ` ${limit.growth}` : ""}
625 </p>
626 </div>
627 </div>
628
629 {limit.message && <p className="mt-4 text-sm">{limit.message}</p>}
630
631 {owner && (
632 <Form method="post" className="mt-5 border-t border-line pt-4">
633 <fieldset>
634 <legend className="text-xs text-muted">Your monthly spend limit</legend>
Workspace names and icons, and a component kit for every control635 <RadioGroup name="mode" defaultValue={mode} className="mt-2 flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
636 <label className="flex cursor-pointer items-center gap-2">
637 <RadioGroupItem value="automatic" />
Two limits, real invoices, trust that grows by itself, sales signals638 Automatic
639 </label>
Workspace names and icons, and a component kit for every control640 <label className="flex cursor-pointer items-center gap-2">
641 <RadioGroupItem value="fixed" />
Two limits, real invoices, trust that grows by itself, sales signals642 Fixed at
643 <span className="flex items-center rounded-md border border-line bg-bg px-2 focus-within:border-accent">
644 <span className="text-muted">$</span>
645 <input
646 name="limit"
647 type="number"
648 min={1}
649 step={1}
650 defaultValue={mode === "fixed" && spendLimit != null ? spendLimit / MICROS_PER_DOLLAR : ""}
651 placeholder="500"
652 className="w-24 bg-transparent px-1 py-1 tabular-nums outline-none"
653 />
654 </span>
655 </label>
Workspace names and icons, and a component kit for every control656 <label className="flex cursor-pointer items-center gap-2">
657 <RadioGroupItem value="none" />
Two limits, real invoices, trust that grows by itself, sales signals658 None
659 </label>
660 <Button variant="quiet" type="submit" name="intent" value="spend-limit" disabled={busy}>
661 Save
662 </Button>
Workspace names and icons, and a component kit for every control663 </RadioGroup>
Two limits, real invoices, trust that grows by itself, sales signals664 </fieldset>
Usage limits: unpaid usage can only go so far665 <ErrorText>{error}</ErrorText>
Two limits, real invoices, trust that grows by itself, sales signals666 <p className="mt-3 text-xs text-faint">
667 Need more than {available != null ? dollars(available) : "this"} available?{" "}
668 <a href="mailto:billing@g1t.sh" className="text-fg hover:underline">
669 Contact us
670 </a>{" "}
671 and we will set terms that fit.
672 </p>
Usage limits: unpaid usage can only go so far673 </Form>
674 )}
675 </section>
676 );
677}
Two limits, real invoices, trust that grows by itself, sales signals678
679/** The workspace's invoices from g1t, each kept on Stripe with its PDF. */
680function InvoiceList({ invoices }: { invoices: WorkspaceInvoice[] }) {
681 return (
682 <section className="mb-10">
683 <h2 className="font-medium">Invoices</h2>
684 <p className="mt-1 text-sm text-muted">
685 One when each month closes, and one each time g1t charges the card near your limit. Receipts and PDFs are also
686 on Stripe's billing page.
687 </p>
688 <ul className="mt-4 divide-y divide-line overflow-hidden rounded-xl border border-line">
689 {invoices.map((invoice) => (
690 <li key={invoice.invoiceId} className="px-4 py-3 text-sm">
691 <div className="flex flex-wrap items-center gap-3">
692 <span className="font-medium">
693 {invoice.reason === "month" ? `Usage for ${invoice.period}` : `Charged near the limit, ${invoice.period}`}
694 </span>
695 <span
696 className={`rounded-full border px-2 py-0.5 text-xs ${
697 invoice.status === "paid" ? "border-accent/40 text-accent" : "border-danger/40 text-danger"
698 }`}
699 >
700 {invoice.status === "paid" ? "Paid" : invoice.status === "failed" ? "Payment failed" : invoice.status}
701 </span>
702 <span className="ml-auto font-mono tabular-nums">{dollars(invoice.amountMicros)}</span>
703 {invoice.hostedUrl && (
704 <a href={invoice.hostedUrl} className="text-xs text-muted hover:text-fg">
705 View
706 </a>
707 )}
708 {invoice.pdfUrl && (
709 <a href={invoice.pdfUrl} className="text-xs text-muted hover:text-fg">
710 PDF
711 </a>
712 )}
713 </div>
714 <ul className="mt-1.5 space-y-0.5 text-xs text-faint">
715 {invoice.lines.map((line) => (
716 <li key={line.description} className="flex justify-between gap-4">
717 <span>{line.description}</span>
718 <span className="font-mono tabular-nums">{dollars(line.amountMicros)}</span>
719 </li>
720 ))}
721 </ul>
722 </li>
723 ))}
724 </ul>
725 </section>
726 );
727}