Sign in

flagon-io/g1t

public

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

223 lines8,967 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.

Agents as a team: lifecycle, merge queue, billing and a new shell1import { CreditCard } from "lucide-react";
2import { Form, Link, data, redirect, useNavigation } from "react-router";
3
4import { MICROS_PER_DOLLAR } from "@g1t/contracts";
5
6import type { Route } from "./+types/billing";
7import { Button, EmptyState, ErrorText, TimeAgo } from "../../components/ui";
8import { billing } from "../../lib/services.server";
9import {
10 assertSameOrigin,
11 getViewer,
12 requireUser,
13 roleIn,
14 unwrap,
15} from "../../lib/session.server";
16
17/** What can be added in one payment, in dollars. */
18const AMOUNTS = [10, 25, 50, 100];
19
20export function meta({ params }: Route.MetaArgs) {
21 return [{ title: `Billing · ${params.owner} · g1t` }];
22}
23
24export async function loader({ params, context, request }: Route.LoaderArgs) {
25 const viewer = getViewer(context);
26 const role = roleIn(viewer, params.owner);
27 // Members only; to anyone else the page does not exist.
28 if (!role) throw data(null, { status: 404 });
29 const slug = params.owner.toLowerCase();
30
31 // Back from the payment page: credit it, then drop the id from the address.
32 const url = new URL(request.url);
33 const session = url.searchParams.get("session");
34 if (session) {
35 await billing.confirm(slug, viewer, session);
36 throw redirect(`/${slug}/-/billing?added=1`);
37 }
38 const [account, ledger] = await Promise.all([
39 billing.account(slug, viewer),
40 billing.ledger(slug, viewer),
41 ]);
42 return {
43 slug,
44 role,
45 account: unwrap(account),
46 ledger: unwrap(ledger),
47 added: url.searchParams.has("added"),
48 };
49}
50
51export async function action({ request, params, context }: Route.ActionArgs) {
52 assertSameOrigin(request);
53 const user = requireUser(context, request);
54 const form = await request.formData();
55 const dollars = Math.trunc(Number(form.get("amount")));
56 const started = await billing.checkout(
57 user,
58 params.owner,
59 Number.isFinite(dollars) ? dollars * 100 : 0,
60 // Spelled out: a form post arrives at a data address, not the page's.
61 `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`,
62 );
63 if (!started.ok) return { error: started.error.message };
64 throw redirect(started.value.url);
65}
66
67/** Millionths of a dollar as dollars, to the cent or finer. */
68function dollars(micros: number, digits = 2): string {
69 const sign = micros < 0 ? "−" : "";
70 return `${sign}$${(Math.abs(micros) / MICROS_PER_DOLLAR).toFixed(digits)}`;
71}
72
73export default function WorkspaceBilling({ loaderData, actionData }: Route.ComponentProps) {
74 const { slug, role, account, ledger, added } = loaderData;
75 const { status } = account;
76 const paying = useNavigation().state === "submitting";
77 const empty = account.balanceMicros <= 0;
78 return (
79 <div className="grid gap-10 lg:grid-cols-[1fr_20rem]">
80 <div className="min-w-0">
Free while g1t is being built out; agents can check out their own forks81 {status.free && (
82 <div className="mb-8 rounded-xl border border-accent/30 bg-accent/5 p-5">
83 <h2 className="font-medium">Free while g1t is being built out</h2>
84 <p className="mt-1.5 max-w-2xl text-sm text-muted">
85 While we build g1t out, using it costs nothing: agents, reviews, checks and workflows. Bring your own
86 model provider under Integrations and its usage is billed by that provider, not by g1t. Runs are still
87 recorded with what they cost, so Usage shows what you are using. This is for now, not forever: pricing
88 will come later, and we will say so well before anything is charged.
89 </p>
90 </div>
91 )}
Agents as a team: lifecycle, merge queue, billing and a new shell92 <h2 className="font-medium">Agent credit</h2>
93 <p className="mt-1 max-w-2xl text-sm text-muted">
94 g1t agents that work on this workspace's repositories are paid for from
95 its credit: what the model cost, plus {account.marginPercent}%. Checks run
96 free. With no credit, agents do not start.
97 </p>
98
99 <div
100 className={`mt-5 rounded-xl border p-5 ${
101 empty && status.enabled ? "border-warn/40 bg-warn/5" : "border-line bg-surface"
102 }`}
103 >
104 <p className="text-xs text-muted">Balance</p>
105 <p className="mt-1 text-3xl font-semibold tabular-nums tracking-tight">
106 {dollars(account.balanceMicros)}
107 </p>
108 {added && (
109 <p className="mt-2 text-sm text-accent">Payment received. Credit added.</p>
110 )}
111 {!status.enabled ? (
112 <p className="mt-3 text-sm text-muted">
113 Payments are not set up on this g1t yet, so nothing is charged and
114 agents are limited to selected accounts.
115 </p>
116 ) : role === "owner" ? (
117 <Form method="post" className="mt-4">
118 <p className="text-sm text-muted">Add credit by card:</p>
119 <div className="mt-2 flex flex-wrap gap-2">
120 {AMOUNTS.map((amount) => (
121 <Button
122 key={amount}
123 variant={amount === 25 ? "accent" : "quiet"}
124 type="submit"
125 name="amount"
126 value={amount}
127 disabled={paying}
128 >
129 <CreditCard size={14} />${amount}
130 </Button>
131 ))}
132 </div>
133 {!status.live && (
134 <p className="mt-3 text-xs text-faint">
135 Payments are in test mode. No real card is charged; use Stripe's
136 test card 4242 4242 4242 4242 with any future date and any code.
137 </p>
138 )}
139 <div className="mt-2">
140 <ErrorText>{actionData?.error}</ErrorText>
141 </div>
142 </Form>
143 ) : (
144 <p className="mt-3 text-sm text-muted">An owner can add credit.</p>
145 )}
146 </div>
147
148 <h3 className="mt-10 text-sm font-medium text-muted">Statement</h3>
149 <div className="mt-3">
150 {ledger.length === 0 ? (
151 <EmptyState title="Nothing yet">
152 Each agent run and each payment appears here.
153 </EmptyState>
154 ) : (
155 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line">
156 {ledger.map((entry) => (
157 <li key={entry.id} className="flex items-center gap-4 px-4 py-3 text-sm">
158 <div className="min-w-0 grow">
159 {entry.repo && entry.number ? (
160 <Link
161 to={`/${entry.repo}/pull/${entry.number}`}
162 className="block truncate font-medium hover:underline"
163 >
164 {entry.description}
165 </Link>
166 ) : (
167 <p className="truncate font-medium">{entry.description}</p>
168 )}
169 <p className="mt-0.5 text-xs text-faint">
170 <TimeAgo at={entry.createdAt} />
171 {entry.model && ` · ${entry.model}`}
172 {entry.createdBy && ` · ${entry.createdBy}`}
173 </p>
174 </div>
175 <span
176 className={`shrink-0 font-mono text-sm tabular-nums ${
177 entry.amountMicros > 0 ? "text-accent" : "text-muted"
178 }`}
179 >
180 {entry.amountMicros > 0 && "+"}
181 {dollars(entry.amountMicros, entry.kind === "usage" ? 4 : 2)}
182 </span>
183 </li>
184 ))}
185 </ul>
186 )}
187 </div>
188 </div>
189
190 <aside className="space-y-5 text-sm">
191 <section className="rounded-xl border border-line bg-surface p-5">
192 <h3 className="font-medium">How it is charged</h3>
193 <ul className="mt-2 list-disc space-y-1.5 pl-4 text-muted">
194 <li>
195 Each run is charged when it finishes, to the workspace that owns the
196 repository, whoever assigned the issue.
197 </li>
198 <li>
199 A change, a review, a revision and a catch-up are each a run. The
200 statement links each to its pull request.
201 </li>
202 <li>
203 Every pull request's session ends with what that run cost before
204 the margin.
205 </li>
206 <li>
Integrations: your own model provider, alerts that open issues, tickets agents read207 With your own model provider, connected under{" "}
208 <Link to={`/${slug}/-/integrations`} className="text-fg hover:underline">
209 Integrations
210 </Link>
211 , the provider bills you for the model and each run here is a flat{" "}
212 {dollars(account.orchestrationFeeMicros)}.
213 </li>
214 <li>
Agents as a team: lifecycle, merge queue, billing and a new shell215 Only members of <span className="font-mono text-fg">{slug}</span> can
216 put agents to work on its repositories.
217 </li>
218 </ul>
219 </section>
220 </aside>
221 </div>
222 );
223}