Sign in

flagon-io/g1t

public

g1t/apps/web/app/components/billing.tsx

748 lines30,992 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.

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1/**
2 * The billing page's sections: the spend-spike banner (also in the app
3 * shell), alerts, the g1t plan, the trial, the spend limit and its range,
4 * Raise my limit, Prepay, the run and issue caps, and "Spent more than you
5 * meant to?". Each posts to the billing route's action with an `intent`.
6 */
Fast pages, required checks on the branch, self-hosted runners, honest incidents7import { ArrowUpRight, CreditCard, Gauge, Landmark, ShieldCheck, Sparkles } from "lucide-react";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look8import type { ReactNode } from "react";
9import { Form } from "react-router";
10
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas11import type { Entitlements, FeatureState, Limit, LimitRequest, MeterUsage, UsageAlert } from "@g1t/contracts";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look12
13import {
14 CAPS,
15 PREPAY,
16 type PlanStatus,
17 alertText,
18 alertTone,
19 dollars,
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas20 gigabytes,
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look21 requestStatus,
22 share,
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas23 shownMeters,
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look24 spendRange,
25 wholeDollars,
26} from "../lib/billing";
27import { Button, ErrorText } from "./ui";
28import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
29
30/** An error the action returned, for the section it belongs to. */
31export type SectionError = { section: string; error: string } | null | undefined;
32
33function errorFor(error: SectionError, section: string): string | undefined {
34 return error && error.section === section ? error.error : undefined;
35}
36
37const CONTROL =
38 "rounded-md border border-line bg-bg px-2.5 py-1.5 text-sm tabular-nums outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim";
39
40/** A dollar amount field: a `$` and a number. */
41function DollarInput({ name, defaultValue, placeholder, label }: { name: string; defaultValue?: string; placeholder?: string; label: string }) {
42 return (
43 <span className="flex items-center rounded-md border border-line bg-bg px-2 focus-within:border-accent-dim">
44 <span className="text-sm text-muted">$</span>
45 <input
46 name={name}
47 inputMode="decimal"
48 aria-label={label}
49 defaultValue={defaultValue}
50 placeholder={placeholder}
51 autoComplete="off"
52 data-1p-ignore
53 data-lpignore="true"
54 className="w-24 bg-transparent px-1 py-1.5 text-sm tabular-nums outline-none placeholder:text-faint"
55 />
56 </span>
57 );
58}
59
60/** A bordered card with a heading, a line about it, and a tone. */
61export function Card({
62 id,
63 title,
64 icon,
65 aside,
66 about,
67 tone = "plain",
68 children,
69}: {
70 id?: string;
71 title: ReactNode;
72 icon?: ReactNode;
73 aside?: ReactNode;
74 about?: ReactNode;
75 tone?: "plain" | "accent" | "warn" | "danger";
76 children?: ReactNode;
77}) {
78 const tones = {
79 plain: "border-line bg-surface",
80 accent: "border-accent/40 bg-accent/5",
81 warn: "border-warn/40 bg-warn/5",
82 danger: "border-danger/40 bg-danger/5",
83 };
84 return (
85 <section id={id} className={`mb-6 scroll-mt-20 rounded-xl border p-5 ${tones[tone]}`}>
86 <div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
87 <div className="min-w-0 basis-full sm:basis-0 sm:flex-1">
88 <h2 className="flex flex-wrap items-center gap-2 font-medium">
89 {icon && <span className="text-accent">{icon}</span>}
90 {title}
91 </h2>
92 {about && <div className="mt-1 max-w-2xl text-sm text-muted">{about}</div>}
93 </div>
94 {aside}
95 </div>
96 {children}
97 </section>
98 );
99}
100
101/** One meter: how much of something is used. */
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas102export function Meter({
103 used,
104 of,
105 label,
106 detail,
107 calm = false,
108}: {
109 used: number;
110 of: number | null;
111 label: string;
112 detail?: ReactNode;
113 /** Reaching the end is ordinary, not a warning: the plan's included usage, past which usage simply goes on demand. */
114 calm?: boolean;
115}) {
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look116 const part = share(used, of);
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas117 const bar = calm ? "bg-accent" : of != null && used >= of ? "bg-danger" : part >= 0.75 ? "bg-warn" : "bg-accent";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look118 return (
119 <div className="mt-4">
120 <div className="flex flex-wrap justify-between gap-x-4 text-sm">
121 <span className="text-muted">{label}</span>
122 <span className="tabular-nums">
123 {dollars(used)}
124 {of != null && <span className="text-faint"> of {dollars(of)}</span>}
125 </span>
126 </div>
127 <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-line" role="presentation">
128 <div className={`h-full ${bar}`} style={{ width: `${Math.max(part * 100, part > 0 ? 2 : 0)}%` }} />
129 </div>
130 {detail && <p className="mt-1.5 text-xs text-faint">{detail}</p>}
131 </div>
132 );
133}
134
135// --- Spike ------------------------------------------------------------------------
136
Fast pages, required checks on the branch, self-hosted runners, honest incidents137// In its own module, so the app shell carries it without the billing page.
138export { SpikeBanner } from "./spike-banner";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look139
140// --- Alerts -----------------------------------------------------------------------
141
142export function Alerts({ alerts }: { alerts: UsageAlert[] }) {
143 const shown = alerts.filter((alert) => alert.level >= 50).sort((a, b) => b.level - a.level);
144 if (shown.length === 0) return null;
145 return (
146 <ul className="mb-6 space-y-2">
147 {shown.map((alert) => {
148 const tone = alertTone(alert.level);
149 return (
150 <li
151 key={`${alert.meter}-${alert.level}`}
152 className={`flex gap-2.5 rounded-lg border px-4 py-2.5 text-sm ${
153 tone === "stopped" ? "border-danger/40 bg-danger/5" : tone === "warning" ? "border-warn/40 bg-warn/5" : "border-line bg-surface"
154 }`}
155 >
156 <Gauge size={15} className={`mt-0.5 shrink-0 ${tone === "stopped" ? "text-danger" : tone === "warning" ? "text-warn" : "text-muted"}`} />
157 <span>{alert.message || alertText(alert)}</span>
158 </li>
159 );
160 })}
161 </ul>
162 );
163}
164
165// --- The plan -----------------------------------------------------------------------
166
167const STATUS_TONE: Record<PlanStatus["kind"], "plain" | "accent" | "warn"> = {
168 free: "plain",
169 trial: "plain",
170 paid: "accent",
171 canceling: "warn",
172 past_due: "warn",
173 comped: "accent",
174 enterprise: "accent",
175};
176
177export function PlanCard({
178 state,
179 status,
180 entitlements,
181 owner,
182 enabled,
183 live,
184 busy,
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas185 meters,
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look186 error,
187}: {
188 state: FeatureState | null;
189 status: PlanStatus;
190 entitlements: Entitlements | null;
191 owner: boolean;
192 enabled: boolean;
193 live: boolean;
194 busy: boolean;
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas195 /** This month's usage by meter, from billing's `usage_meters`. */
196 meters: MeterUsage[] | null;
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look197 error?: string;
198}) {
199 const plan = state?.plan;
200 const subscription = state?.subscription ?? null;
201 const on = ["paid", "canceling", "comped", "enterprise"].includes(status.kind);
202 return (
203 <Card
204 id="plan"
205 tone={STATUS_TONE[status.kind]}
206 icon={<Sparkles size={16} />}
207 title={
208 <>
209 {plan?.title ?? "g1t"}
210 <span
211 className={`rounded-full px-2 py-0.5 text-xs ${
212 status.kind === "past_due" || status.kind === "canceling"
213 ? "bg-warn/15 text-warn"
214 : on
215 ? "bg-accent/15 text-accent"
216 : "border border-line text-muted"
217 }`}
218 >
219 {status.label}
220 {status.kind === "canceling" && subscription?.periodEnd ? `, ${new Date(subscription.periodEnd).toLocaleDateString()}` : ""}
221 </span>
222 </>
223 }
224 about={
225 on
226 ? "Everything on g1t for the workspace: agents, checks, workflows, the merge queue, deployments and semantic search."
227 : "The forge is free: repositories, issues, pull requests, reviews, search and the audit log. Anything that runs compute needs the plan, or the trial."
228 }
229 aside={
230 <p className="shrink-0 sm:text-right">
231 <span className="text-2xl font-semibold tabular-nums tracking-tight">${((plan?.monthlyCents ?? 2000) / 100).toFixed(0)}</span>
232 <span className="text-sm text-muted"> / month</span>
233 <span className="block text-xs text-faint">per workspace, never per seat</span>
234 </p>
235 }
236 >
237 {plan && (
238 <ul className="mt-4 grid gap-1.5 text-sm text-muted sm:grid-cols-2">
239 {plan.includes.map((line) => (
240 <li key={line} className="flex gap-2">
241 <span className="text-accent">✓</span>
242 {line}
243 </li>
244 ))}
245 </ul>
246 )}
247 {plan && <p className="mt-3 text-xs text-faint">{plan.overage}</p>}
248
249 {on && entitlements?.includedMicros ? (
250 <Meter
251 label="Included usage this month"
252 used={entitlements.includedUsedMicros ?? 0}
253 of={entitlements.includedMicros}
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas254 calm
255 detail="Used first, at cost plus 20%. Past it, usage goes on at the same prices. It starts again on the 1st; what is unused does not carry over."
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look256 />
257 ) : null}
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas258 {meters && <MonthUsage meters={meters} on={on} comped={status.kind === "comped"} entitlements={entitlements} />}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look259
260 {status.kind === "comped" || status.kind === "enterprise" ? (
261 <p className="mt-4 text-sm text-muted">
262 {status.kind === "comped"
263 ? "g1t covers this workspace's plan. Its usage is still recorded at what it costs, and shown as given."
264 : "An enterprise pays for this workspace, on its own invoice."}
265 </p>
266 ) : !enabled ? (
267 <p className="mt-4 text-sm text-muted">Payments are not set up on this g1t, so the plan cannot be started here.</p>
268 ) : !owner ? (
269 <p className="mt-4 text-sm text-muted">An owner manages the plan.</p>
270 ) : (
271 <Form method="post" className="mt-5 flex flex-wrap items-center gap-3">
272 <input type="hidden" name="feature" value={plan?.feature ?? "plan"} />
273 {status.kind === "free" || status.kind === "trial" ? (
274 <Button variant="accent" type="submit" name="intent" value="subscribe" disabled={busy}>
275 <CreditCard size={14} />
276 Start the g1t plan
277 </Button>
278 ) : status.kind === "canceling" ? (
279 <Button variant="accent" type="submit" name="intent" value="resume" disabled={busy}>
280 Keep the plan
281 </Button>
282 ) : null}
283 {(status.kind === "paid" || status.kind === "canceling" || status.kind === "past_due") && (
284 <Button variant={status.kind === "past_due" ? "accent" : "quiet"} type="submit" name="intent" value="portal" disabled={busy}>
285 {status.kind === "past_due" ? "Update payment on Stripe" : "Manage on Stripe"}
286 <ArrowUpRight size={14} />
287 </Button>
288 )}
289 {status.kind === "paid" && subscription && (
290 <Button variant="quiet" type="submit" name="intent" value="cancel" disabled={busy}>
291 End at the end of the period
292 </Button>
293 )}
294 {!live && (status.kind === "free" || status.kind === "trial") && (
295 <span className="text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</span>
296 )}
297 </Form>
298 )}
299 <ErrorText>{error}</ErrorText>
300 {(status.kind === "free" || status.kind === "trial") && (
301 <p className="mt-4 text-xs text-faint">
302 Your first month starts at a {wholeDollars(100_000_000)} limit on usage past what is included, so a stolen card cannot run
303 up a bill. It rises as payments clear, and you can prepay or ask to raise it at once.
304 </p>
305 )}
306 </Card>
307 );
308}
309
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas310/**
311 * This month's usage, one line per meter, in dollars at cost plus 20% and
312 * in what was used. No quotas: every line is metered from the first unit.
313 */
314function MonthUsage({
315 meters,
316 on,
317 comped,
318 entitlements,
319}: {
320 meters: MeterUsage[];
321 on: boolean;
322 comped: boolean;
323 entitlements: Entitlements | null;
324}) {
325 const freeStorage = gigabytes(entitlements?.freePrivateStorageBytes ?? 1_000_000_000);
326 const freeGit = (entitlements?.gitOperationsIncluded ?? 50_000).toLocaleString("en-US");
327 const rows = shownMeters(meters, on);
328 const total = rows.reduce((sum, row) => sum + row.micros, 0);
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look329 return (
330 <div className="mt-4 rounded-lg border border-line bg-bg/40 p-4">
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas331 <div className="flex items-baseline justify-between gap-4">
332 <p className="text-xs font-medium text-muted">This month's usage</p>
333 <p className="text-xs text-faint">At cost plus 20%</p>
334 </div>
335 <ul className="mt-2 divide-y divide-line/60">
336 {rows.map((row) => (
337 <li key={row.key} className="flex items-baseline justify-between gap-4 py-2 text-sm">
338 <span className="min-w-0">
339 <span>{row.label}</span>
340 {(row.quantity || row.micros === 0) && (
341 <span className="block truncate text-xs text-faint">{row.quantity ?? "None yet"}</span>
342 )}
343 </span>
344 <span className={`shrink-0 tabular-nums ${row.micros > 0 ? "" : "text-faint"}`}>{dollars(row.micros)}</span>
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look345 </li>
346 ))}
347 </ul>
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas348 <div className="mt-1 flex items-baseline justify-between gap-4 border-t border-line pt-2.5 text-sm">
Billing's usage total is labeled at price, and Usage says what part of it was paid for349 {/* At price, before the plan's included usage, the trial and the pools paid
350 their part: Usage shows what was charged. */}
351 <span className="font-medium">Total at price</span>
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas352 <span className="font-medium tabular-nums">{dollars(total)}</span>
353 </div>
354 <p className="mt-2 text-xs text-faint">
355 {comped
356 ? "What this workspace's usage would cost. g1t covers it."
357 : on
358 ? `Drawn from the included usage first, then charged up to your spend limit. Projects, previews and repositories are never charged, and the first ${freeStorage} of private storage and ${freeGit} git operations a month are free. App traffic, custom domains, storage and git operations are counted through the month and charged when it closes.`
Billing's usage total is labeled at price, and Usage says what part of it was paid for359 : `The forge is free: ${freeStorage} of private storage and ${freeGit} git operations a month. Agents run from the trial or the open-source pool, which pay part of this total: Usage shows what was charged.`}
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas360 </p>
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look361 </div>
362 );
363}
364
365// --- The trial -----------------------------------------------------------------------
366
367export function TrialCard({
368 entitlements,
369 trialMicros,
370 owner,
371 enabled,
372 busy,
373 error,
374}: {
375 entitlements: Entitlements | null;
376 trialMicros: number;
377 owner: boolean;
378 enabled: boolean;
379 busy: boolean;
380 error?: string;
381}) {
382 const verified = entitlements?.trialVerified ?? false;
383 const left = entitlements?.trialMicrosLeft ?? 0;
384 return (
385 <Card
386 id="trial"
387 icon={<ShieldCheck size={16} />}
388 title={`Try it with ${wholeDollars(trialMicros)} of usage`}
389 about={
390 verified
391 ? left > 0
392 ? "Your trial pays for agents, checks and workflows until it is used. It is given once per workspace."
393 : "This workspace has no trial left. Start the plan to keep going."
394 : "Once per workspace, after a card check: Stripe saves and verifies the card with 3-D Secure and charges nothing. The trial needs a credit or debit card; prepaid cards can still pay for the plan."
395 }
396 >
397 {verified && left > 0 && <Meter label="Trial used" used={Math.max(0, trialMicros - left)} of={trialMicros} />}
398 {!verified && enabled && owner && (
399 <Form method="post" className="mt-4 flex flex-wrap items-center gap-3">
400 <Button variant="quiet" type="submit" name="intent" value="card-check" disabled={busy}>
401 <ShieldCheck size={14} />
402 Check a card
403 </Button>
404 <span className="text-xs text-faint">Trials come from a monthly pool; when it is given out, new ones start on the 1st.</span>
405 </Form>
406 )}
407 {!verified && !owner && <p className="mt-3 text-sm text-muted">An owner can do the card check.</p>}
408 <ErrorText>{error}</ErrorText>
409 </Card>
410 );
411}
412
413// --- Spend limit -----------------------------------------------------------------------
414
415export function SpendLimitCard({ limit, owner, busy, error }: { limit: Limit; owner: boolean; busy: boolean; error?: string }) {
416 const range = spendRange(limit);
417 const spent = limit.spentMicros ?? 0;
418 const spendLimit = limit.spendLimitMicros;
419 const mode = limit.defaultSpendLimit ? "automatic" : spendLimit == null ? "full" : "fixed";
420 const tone = limit.state === "stopped" ? "danger" : limit.state === "warning" ? "warn" : "plain";
421 return (
422 <Card
423 id="limit"
424 tone={tone}
425 icon={<Gauge size={16} />}
426 title="Spend limit"
427 about="What on-demand usage may reach this month, past what the plan includes. At the limit new work waits; runs already going finish."
428 aside={limit.firstMonth ? <span className="rounded-full border border-line px-2 py-0.5 text-xs text-muted">First month</span> : null}
429 >
430 {limit.account.startsWith("ent_") && (
431 <p className="mt-2 text-sm text-muted">
432 Paid for by the <span className="font-medium text-fg">{limit.accountName}</span> enterprise: these figures are for all of its
433 workspaces together.
434 </p>
435 )}
436 <div className="grid gap-x-8 sm:grid-cols-2">
437 <Meter
438 label="Charged this month"
439 used={spent}
440 of={spendLimit}
441 detail={
442 mode === "automatic"
443 ? "Automatic: $200, or twice last month's spend, within what is available."
444 : mode === "fixed"
445 ? "A limit you set."
446 : "As high as is available."
447 }
448 />
449 <Meter
450 label="Not yet paid"
451 used={limit.exposureMicros}
452 of={limit.ceilingMicros}
453 detail={limit.growth ?? "Charged to the card as it nears the limit, so work keeps going."}
454 />
455 </div>
456 {limit.message && <p className="mt-4 text-sm">{limit.message}</p>}
457
458 <div className="mt-5 rounded-lg border border-line bg-bg/40 p-4 text-sm">
459 <p>
460 {range.selfServeMicros == null ? (
461 "No ceiling: set any limit."
462 ) : (
463 <>
464 You can set up to <span className="font-medium tabular-nums">{wholeDollars(range.selfServeMicros)}</span> yourself: the
465 highest limit this workspace has had{(limit.prepaidMicros ?? 0) > 0 ? ", plus what is prepaid" : ""}.
466 </>
467 )}
468 </p>
469 <p className="mt-1 text-muted">
470 {range.raiseOnceMicros != null ? (
471 <>
472 Once, you can raise it yourself to <span className="tabular-nums text-fg">{wholeDollars(range.raiseOnceMicros)}</span>.
473 Past that, prepay or use Raise my limit.
474 </>
475 ) : range.raisedAt ? (
476 <>The one-time raise was used on {new Date(range.raisedAt).toLocaleDateString()}. Prepay or use Raise my limit for more.</>
477 ) : range.selfServeMicros != null ? (
478 "For more, prepay or use Raise my limit."
479 ) : null}
480 </p>
481 </div>
482
483 {owner && (
484 <Form method="post" className="mt-4">
485 <input type="hidden" name="intent" value="spend-limit" />
486 <fieldset>
487 <legend className="text-xs text-muted">Your monthly spend limit</legend>
488 <RadioGroup name="mode" defaultValue={mode} className="mt-2 gap-2.5 text-sm">
489 <label className="flex cursor-pointer items-center gap-2">
490 <RadioGroupItem value="automatic" />
491 Automatic
492 </label>
493 <label className="flex cursor-pointer flex-wrap items-center gap-2">
494 <RadioGroupItem value="fixed" />
495 Fixed at
496 <DollarInput
497 name="limit"
498 label="Spend limit in dollars"
499 defaultValue={mode === "fixed" && spendLimit != null ? String(spendLimit / 1_000_000) : ""}
500 placeholder={range.selfServeMicros != null ? String(range.selfServeMicros / 1_000_000) : "500"}
501 />
502 </label>
503 <label className="flex cursor-pointer items-center gap-2">
504 <RadioGroupItem value="full" />
505 Everything available{range.selfServeMicros != null ? ` (${wholeDollars(range.selfServeMicros)})` : ""}
506 </label>
507 {range.raiseOnceMicros != null && (
508 <label className="flex cursor-pointer items-center gap-2">
509 <RadioGroupItem value="raise" />
510 Use my one-time raise, to the amount above or up to {wholeDollars(range.raiseOnceMicros)}
511 </label>
512 )}
513 </RadioGroup>
514 </fieldset>
515 <div className="mt-3 flex flex-wrap items-center gap-3">
516 <Button variant="quiet" type="submit" disabled={busy}>
517 Save limit
518 </Button>
519 <a href="#raise" className="text-sm text-muted hover:text-fg">
520 Need more? Raise my limit
521 </a>
522 </div>
523 <ErrorText>{error}</ErrorText>
524 </Form>
525 )}
526 </Card>
527 );
528}
529
530// --- Raise my limit -----------------------------------------------------------------------
531
532function RequestList({ requests }: { requests: LimitRequest[] }) {
533 if (requests.length === 0) return null;
534 return (
535 <ul className="mt-4 divide-y divide-line rounded-lg border border-line text-sm">
536 {requests.map((request) => (
537 <li key={request.id} className="px-4 py-2.5">
538 <p className="flex flex-wrap items-center justify-between gap-2">
539 <span>
540 {request.kind === "limit" ? `Asked for ${wholeDollars(request.amountMicros)}` : "Told g1t about this month"}
541 <span className="text-faint"> · {new Date(request.createdAt).toLocaleDateString()}</span>
542 </span>
543 <span
544 className={`rounded-full px-2 py-0.5 text-xs ${
545 request.status === "approved"
546 ? "bg-accent/15 text-accent"
547 : request.status === "declined"
548 ? "bg-danger/15 text-danger"
549 : "border border-line text-muted"
550 }`}
551 >
552 {requestStatus(request)}
553 </span>
554 </p>
555 {request.answer && <p className="mt-1 text-muted">{request.answer}</p>}
556 </li>
557 ))}
558 </ul>
559 );
560}
561
562export function RaiseCard({ requests, owner, busy, error }: { requests: LimitRequest[]; owner: boolean; busy: boolean; error?: string }) {
563 const mine = requests.filter((request) => request.kind === "limit");
564 const waiting = mine.some((request) => request.status === "open");
565 return (
566 <Card
567 id="raise"
568 title="Raise my limit"
569 about="Ask g1t for a higher limit than you can set yourself. A person reads it and answers within one business day, in the app and by email. Nothing about price is negotiated."
570 >
571 {owner && !waiting && (
572 <Form method="post" className="mt-4 space-y-3">
573 <input type="hidden" name="intent" value="request" />
574 <input type="hidden" name="kind" value="limit" />
575 <div className="flex flex-wrap gap-4">
576 <label className="text-sm">
577 <span className="mb-1 block text-xs text-muted">Limit you need</span>
578 <DollarInput name="amount" label="Limit you need in dollars" placeholder="2000" />
579 </label>
580 <label className="text-sm">
581 <span className="mb-1 block text-xs text-muted">What you expect to spend a month</span>
582 <DollarInput name="expected" label="Expected monthly spend in dollars" placeholder="1500" />
583 </label>
584 </div>
585 <label className="block text-sm">
586 <span className="mb-1 block text-xs text-muted">What it is for</span>
587 <textarea
588 name="reason"
589 rows={2}
590 maxLength={2000}
591 placeholder="A launch next week: agents on 40 issues across three projects."
592 className={`${CONTROL} w-full`}
593 />
594 </label>
595 <Button variant="quiet" type="submit" disabled={busy}>
596 Send the request
597 </Button>
598 <ErrorText>{error}</ErrorText>
599 </Form>
600 )}
601 {owner && waiting && <p className="mt-3 text-sm text-muted">Your request is with g1t. You can send another once it is answered.</p>}
602 {!owner && <p className="mt-3 text-sm text-muted">An owner can ask.</p>}
603 <RequestList requests={mine} />
604 </Card>
605 );
606}
607
608// --- Prepay -----------------------------------------------------------------------
609
610export function PrepayCard({ prepaidMicros, owner, live, busy, error }: { prepaidMicros: number; owner: boolean; live: boolean; busy: boolean; error?: string }) {
611 return (
612 <Card
613 id="prepay"
614 icon={<Landmark size={16} />}
615 title="Prepay"
616 about="Pay for usage in advance. It raises what you can use before work stops by the same amount, at once, and usage draws it down."
617 aside={
618 <p className="shrink-0 sm:text-right">
619 <span className="block text-xs text-muted">Prepaid balance</span>
620 <span className="text-xl font-semibold tabular-nums">{dollars(prepaidMicros)}</span>
621 </p>
622 }
623 >
624 {owner ? (
625 <Form method="post" className="mt-4 space-y-3">
626 <input type="hidden" name="intent" value="prepay" />
627 <div className="flex flex-wrap items-center gap-2">
628 {PREPAY.presets.map((amount) => (
629 <Button key={amount} variant="quiet" type="submit" name="amount" value={amount} disabled={busy}>
630 {wholeDollars(amount * 1_000_000)}
631 </Button>
632 ))}
633 <span className="text-sm text-muted">or</span>
634 <DollarInput name="custom" label="Amount to prepay in dollars" placeholder="250" />
635 <Button variant="accent" type="submit" disabled={busy}>
636 <CreditCard size={14} />
637 Prepay
638 </Button>
639 </div>
640 <RadioGroup name="method" defaultValue="card" className="flex flex-wrap gap-x-5 gap-y-2 text-sm">
641 <label className="flex cursor-pointer items-center gap-2">
642 <RadioGroupItem value="card" />
643 By card, with 3-D Secure ({wholeDollars(PREPAY.min * 1_000_000)} to {wholeDollars(PREPAY.maxCard * 1_000_000)})
644 </label>
645 <label className="flex cursor-pointer items-center gap-2">
646 <RadioGroupItem value="bank_transfer" />
647 By bank transfer (from {wholeDollars(PREPAY.bankFrom * 1_000_000)}; counted when it arrives)
648 </label>
649 </RadioGroup>
650 {!live && <p className="text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</p>}
651 <ErrorText>{error}</ErrorText>
652 </Form>
653 ) : (
654 <p className="mt-3 text-sm text-muted">An owner can prepay.</p>
655 )}
656 </Card>
657 );
658}
659
660// --- Caps -----------------------------------------------------------------------
661
662export function CapsCard({ entitlements, owner, busy, error }: { entitlements: Entitlements; owner: boolean; busy: boolean; error?: string }) {
663 return (
664 <Card
665 id="caps"
666 title="Caps on agents"
667 about={
668 <>
669 The most one agent run may spend, and the most the agents on one issue may spend in all, so an agent stuck in a loop stops on
670 its own. Blank goes back to {wholeDollars(CAPS.run.default)} and {wholeDollars(CAPS.issue.default)}. A cap g1t set for this
671 workspace wins.
672 </>
673 }
674 >
675 <dl className="mt-4 grid grid-cols-2 gap-4 text-sm sm:max-w-md">
676 <div>
677 <dt className="text-xs text-muted">Per run</dt>
678 <dd className="mt-0.5 text-lg font-semibold tabular-nums">{wholeDollars(entitlements.runCapMicros)}</dd>
679 </div>
680 <div>
681 <dt className="text-xs text-muted">Per issue</dt>
682 <dd className="mt-0.5 text-lg font-semibold tabular-nums">{wholeDollars(entitlements.issueCapMicros)}</dd>
683 </div>
684 </dl>
685 {owner && (
686 <Form method="post" className="mt-4 flex flex-wrap items-end gap-4">
687 <input type="hidden" name="intent" value="caps" />
688 <label className="text-sm">
689 <span className="mb-1 block text-xs text-muted">
690 Per run ({wholeDollars(CAPS.run.min)} to {wholeDollars(CAPS.run.max)})
691 </span>
692 <DollarInput name="run" label="Run cap in dollars" defaultValue={String(entitlements.runCapMicros / 1_000_000)} />
693 </label>
694 <label className="text-sm">
695 <span className="mb-1 block text-xs text-muted">
696 Per issue ({wholeDollars(CAPS.issue.min)} to {wholeDollars(CAPS.issue.max)})
697 </span>
698 <DollarInput name="issue" label="Issue cap in dollars" defaultValue={String(entitlements.issueCapMicros / 1_000_000)} />
699 </label>
700 <Button variant="quiet" type="submit" disabled={busy}>
701 Save caps
702 </Button>
703 </Form>
704 )}
705 <ErrorText>{error}</ErrorText>
706 <p className="mt-3 text-xs text-faint">
707 {entitlements.maxConcurrentAgents} agents at a time{entitlements.maxRunMinutes ? `, ${entitlements.maxRunMinutes} minutes a run` : ""}
708 {entitlements.firstMonth ? " in the first month" : ""}.
709 </p>
710 </Card>
711 );
712}
713
714// --- Overage -----------------------------------------------------------------------
715
716export function OverageCard({ requests, owner, busy, error }: { requests: LimitRequest[]; owner: boolean; busy: boolean; error?: string }) {
717 const mine = requests.filter((request) => request.kind === "overage");
718 const waiting = mine.some((request) => request.status === "open");
719 return (
720 <Card
721 id="overage"
722 title="Spent more than you meant to? Tell us."
723 about="A loop that ran all night, a workflow on every push: say what happened. g1t can credit usage you did not mean, once in 12 months; larger credits, or a second one within 12 months, are reviewed by a person."
724 >
725 {owner && !waiting && (
726 <Form method="post" className="mt-4 space-y-3">
727 <input type="hidden" name="intent" value="request" />
728 <input type="hidden" name="kind" value="overage" />
729 <textarea
730 name="reason"
731 rows={2}
732 maxLength={2000}
733 aria-label="What happened"
734 placeholder="An agent kept retrying a failing check on Tuesday night."
735 className={`${CONTROL} w-full`}
736 />
737 <Button variant="quiet" type="submit" disabled={busy}>
738 Tell g1t
739 </Button>
740 <ErrorText>{error}</ErrorText>
741 </Form>
742 )}
743 {owner && waiting && <p className="mt-3 text-sm text-muted">g1t has your note and answers within one business day.</p>}
744 {!owner && <p className="mt-3 text-sm text-muted">An owner can tell g1t.</p>}
745 <RequestList requests={mine} />
746 </Card>
747 );
748}