g1t/apps/sudo/app/components/billing.tsx
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.
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 1 | /** |
| 2 | * The billing sections shared by a workspace's page and an enterprise's: | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 3 | * confirmations, terms, plan, pools and caps, credit, bank transfers, the |
| 4 | * Stripe billing link, the ledger and the audit log. Plain forms; sudo ships no JavaScript. | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 5 | */ |
| sudo: reset a test workspace's billing so it starts again as a new customer; refused on a live Stripe key, for comped workspaces and for an enterprise's | 6 | import { CreditCard, Gift, Landmark, RotateCcw, ScrollText, UserRound } from "lucide-react"; |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 7 | import type { ReactNode } from "react"; |
| 8 | import { Link } from "react-router"; | |
| 9 | ||
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 10 | import type { AdminAction, AdminOwner, Allowances, BillingLink, CreditGrant, Credits, LedgerEntry, Terms } from "@g1t/contracts"; |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 11 | |
| 12 | import { Avatar, Badge, Button, EmptyState, Field, Input, Notice, Section, Select, Textarea, When } from "~/components/ui"; | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 13 | import { CREDIT_KINDS, CREDIT_PRESETS, EXPIRIES, kindLabel } from "~/lib/credits"; |
| 14 | import { DISCOUNT_PRESETS, fullDiscount, percentOff, termsLabel } from "~/lib/terms"; | |
| sudo: Invoices, Audit log, and follow-ups due | 15 | import { actionLabel } from "~/lib/ledgers"; |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 16 | import { dollarsField, usd } from "~/lib/money"; |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 17 | import { givenParts } from "~/lib/pricing"; |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 18 | import type { Review, SectionError } from "~/lib/review"; |
| 19 | ||
| 20 | export function Hidden({ values }: { values: Record<string, string> }) { | |
| 21 | return ( | |
| 22 | <> | |
| 23 | {Object.entries(values).map(([name, value]) => ( | |
| 24 | <input key={name} type="hidden" name={name} value={value} /> | |
| 25 | ))} | |
| 26 | </> | |
| 27 | ); | |
| 28 | } | |
| 29 | ||
| 30 | export function Figure({ label, value, hint }: { label: string; value: string; hint?: ReactNode }) { | |
| 31 | return ( | |
| 32 | <div className="rounded-lg border border-line bg-surface px-4 py-3"> | |
| 33 | <p className="text-xs text-muted">{label}</p> | |
| 34 | <p className="tabular mt-1 text-lg font-semibold tracking-tight">{value}</p> | |
| 35 | {hint && <p className="mt-0.5 text-xs text-faint">{hint}</p>} | |
| 36 | </div> | |
| 37 | ); | |
| 38 | } | |
| 39 | ||
| 40 | /** Owners' usernames, each with their email beneath (and on hover). */ | |
| 41 | export function Owners({ owners, compact = false }: { owners: AdminOwner[]; compact?: boolean }) { | |
| 42 | if (owners.length === 0) return <span className="text-faint">No owner</span>; | |
| 43 | if (compact) { | |
| 44 | return ( | |
| 45 | <span className="flex flex-col gap-0.5"> | |
| 46 | {owners.map((owner) => ( | |
| 47 | <span key={owner.username} title={owner.email ?? "No email"} className="min-w-0 truncate"> | |
| 48 | <span className="font-mono text-fg-soft">{owner.username}</span> | |
| 49 | {owner.email && <span className="block truncate text-xs text-faint">{owner.email}</span>} | |
| 50 | </span> | |
| 51 | ))} | |
| 52 | </span> | |
| 53 | ); | |
| 54 | } | |
| 55 | return ( | |
| 56 | <ul className="flex flex-wrap gap-2"> | |
| 57 | {owners.map((owner) => ( | |
| 58 | <li key={owner.username} title={owner.email ?? "No email"} className="inline-flex items-center gap-1.5 rounded-md border border-line bg-bg px-2 py-1 text-xs"> | |
| 59 | <Avatar name={owner.username} size={14} square={false} /> | |
| 60 | <span className="font-mono">{owner.username}</span> | |
| 61 | {owner.email && <span className="text-faint">{owner.email}</span>} | |
| 62 | </li> | |
| 63 | ))} | |
| 64 | </ul> | |
| 65 | ); | |
| 66 | } | |
| 67 | ||
| 68 | // --- Confirmation ------------------------------------------------------------ | |
| 69 | ||
| 70 | function describeTerms(terms: Terms): [string, string][] { | |
| 71 | return [ | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 72 | ["Terms", termsLabel(terms)], |
| 73 | ["Discount", `${percentOff(terms)}%`], | |
| Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays | 74 | [ |
| 75 | "Limit", | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 76 | fullDiscount(terms) |
| Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays | 77 | ? terms.ceilingMicros == null |
| 78 | ? "The default monthly budget, at cost" | |
| 79 | : `${usd(terms.ceilingMicros)} a month, at cost` | |
| 80 | : terms.ceilingMicros == null | |
| 81 | ? "By trust" | |
| 82 | : usd(terms.ceilingMicros), | |
| 83 | ], | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 84 | ["Until", terms.until ? terms.until.slice(0, 10) : "No end"], |
| 85 | ["Note", terms.note || "—"], | |
| 86 | ]; | |
| 87 | } | |
| 88 | ||
| Stripe webhooks, enterprise invoices, and sudo for both | 89 | /** Where a confirmed change lands, when its result is shown in place. */ |
| 90 | const RESULT_ANCHOR: Partial<Record<Review["intent"], string>> = { "billing-link": "billing-link", invoice: "invoices" }; | |
| 91 | ||
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 92 | export function ReviewPanel({ review, pathname }: { review: Review; pathname: string }) { |
| 93 | let title: string; | |
| 94 | let body: ReactNode; | |
| 95 | let danger = false; | |
| 96 | let confirm = "Confirm"; | |
| 97 | if (review.intent === "terms") { | |
| 98 | const before = describeTerms(review.before); | |
| 99 | const after = describeTerms(review.after); | |
| 100 | title = "Confirm the new terms"; | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 101 | danger = fullDiscount(review.after); |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 102 | body = ( |
| 103 | <> | |
| 104 | <div className="overflow-x-auto"> | |
| 105 | <table className="w-full text-sm"> | |
| 106 | <thead> | |
| 107 | <tr className="text-left text-xs text-muted"> | |
| 108 | <th className="py-1.5 pr-4 font-medium" /> | |
| 109 | <th className="py-1.5 pr-4 font-medium">Now</th> | |
| 110 | <th className="py-1.5 font-medium">After</th> | |
| 111 | </tr> | |
| 112 | </thead> | |
| 113 | <tbody> | |
| 114 | {after.map(([label, value], index) => ( | |
| 115 | <tr key={label} className="border-t border-line align-top"> | |
| 116 | <td className="py-1.5 pr-4 text-muted">{label}</td> | |
| 117 | <td className="py-1.5 pr-4 break-words text-faint">{before[index][1]}</td> | |
| 118 | <td className={`py-1.5 break-words ${value !== before[index][1] ? "font-medium text-fg" : "text-muted"}`}>{value}</td> | |
| 119 | </tr> | |
| 120 | ))} | |
| 121 | </tbody> | |
| 122 | </table> | |
| 123 | </div> | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 124 | {fullDiscount(review.after) && ( |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 125 | <p className="mt-3 text-sm text-warn"> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 126 | A 100% discount: nothing will be charged{review.after.until ? ` until ${review.after.until.slice(0, 10)}` : ""}. The workspace's |
| 127 | statement still shows its usage at price, with the discount beside it. | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 128 | </p> |
| 129 | )} | |
| 130 | </> | |
| 131 | ); | |
| 132 | } else if (review.intent === "attach") { | |
| 133 | title = `Bill ${review.workspace} to ${review.targetName}?`; | |
| 134 | body = ( | |
| 135 | <p className="text-sm text-muted"> | |
| 136 | From now on <span className="font-mono text-fg">{review.workspace}</span>'s usage is billed to{" "} | |
| 137 | <span className="text-fg">{review.targetName}</span> and counts against its limit and terms, not its own. | |
| 138 | </p> | |
| 139 | ); | |
| 140 | } else if (review.intent === "detach") { | |
| 141 | title = `Move ${review.workspace} off ${review.from}?`; | |
| 142 | danger = true; | |
| 143 | body = ( | |
| 144 | <p className="text-sm text-muted"> | |
| 145 | <span className="font-mono text-fg">{review.workspace}</span> goes back to paying for itself, on its own terms and the limit | |
| 146 | its trust gives it. It may stop at once if its own limit is lower than what it owes. | |
| 147 | </p> | |
| 148 | ); | |
| Stripe webhooks, enterprise invoices, and sudo for both | 149 | } else if (review.intent === "billing-email") { |
| 150 | title = `Send ${review.name}'s invoices to ${review.after}?`; | |
| 151 | body = ( | |
| 152 | <p className="text-sm text-muted"> | |
| 153 | Stripe emails its invoices to <span className="font-mono text-fg">{review.after}</span> | |
| 154 | {review.before ? ( | |
| 155 | <> | |
| 156 | {" "} | |
| 157 | instead of <span className="font-mono">{review.before}</span> | |
| 158 | </> | |
| 159 | ) : null} | |
| 160 | , from the next invoice on.{!review.before && " This also sets the enterprise up as a customer on Stripe."} | |
| 161 | </p> | |
| 162 | ); | |
| 163 | } else if (review.intent === "invoice") { | |
| 164 | title = `Invoice ${review.name} now?`; | |
| 165 | confirm = "Send the invoice"; | |
| 166 | body = ( | |
| 167 | <ul className="list-disc space-y-1 pl-5 text-sm text-muted"> | |
| 168 | <li>Makes one Stripe invoice, with a line for each of its {review.workspaces} workspace{review.workspaces === 1 ? "" : "s"} for what it owes now.</li> | |
| 169 | <li>Net 30: due in 30 days.</li> | |
| 170 | <li> | |
| 171 | Stripe emails it to <span className="font-mono text-fg">{review.email ?? "the invoice email (none set yet)"}</span>, with a link to | |
| 172 | pay on Stripe's page. | |
| 173 | </li> | |
| 174 | </ul> | |
| 175 | ); | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 176 | } else { |
| 177 | title = `Make a Stripe billing link for ${review.workspace}?`; | |
| 178 | confirm = "Make the link"; | |
| 179 | body = ( | |
| 180 | <p className="text-sm text-muted"> | |
| 181 | Opens a one-time session on Stripe's billing page for <span className="font-mono text-fg">{review.workspace}</span>'s | |
| 182 | customer, where they update their card and see their invoices. Anyone with the link can use it until it expires, so send it | |
| 183 | only to the workspace's owner. Making it is recorded with your email. | |
| 184 | </p> | |
| 185 | ); | |
| 186 | } | |
| 187 | return ( | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 188 | <section id="review" className={`scroll-mt-20 rounded-lg border p-4 sm:p-5 ${danger ? "border-warn/40 bg-warn/5" : "border-accent/40 bg-accent/5"}`}> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 189 | <h2 className="font-semibold tracking-tight">{title}</h2> |
| 190 | <div className="mt-3">{body}</div> | |
| Stripe webhooks, enterprise invoices, and sudo for both | 191 | <form method="post" action={`${pathname}#${RESULT_ANCHOR[review.intent] ?? "top"}`} className="mt-4 flex flex-wrap items-center gap-2"> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 192 | <Hidden values={review.fields} /> |
| 193 | <input type="hidden" name="intent" value={review.intent} /> | |
| 194 | <input type="hidden" name="confirm" value="yes" /> | |
| 195 | <Button type="submit" variant={danger ? "danger" : "lavender"}> | |
| 196 | {confirm} | |
| 197 | </Button> | |
| 198 | <Link to={pathname} className="px-2 text-sm text-muted hover:text-fg"> | |
| 199 | Cancel | |
| 200 | </Link> | |
| 201 | </form> | |
| 202 | </section> | |
| 203 | ); | |
| 204 | } | |
| 205 | ||
| 206 | // --- Terms ------------------------------------------------------------------- | |
| 207 | ||
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 208 | /** |
| 209 | * The account's terms: a discount (0, 25, 50, 100% or a custom percent), | |
| 210 | * a limit, an end date and why. A 100% discount charges nothing; the | |
| 211 | * workspace's statement still shows its usage at price. The custom percent | |
| 212 | * shows only for Custom, by CSS alone (`.terms-form` in app.css). | |
| 213 | */ | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 214 | export function TermsForm({ terms, pathname, error }: { terms: Terms; pathname: string; error: SectionError }) { |
| 215 | const values = error?.values; | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 216 | const current = percentOff(terms); |
| 217 | const preset = values?.preset ?? ((DISCOUNT_PRESETS as readonly number[]).includes(current) ? String(current) : "custom"); | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 218 | return ( |
| 219 | <Section | |
| 220 | id="terms" | |
| 221 | title="Terms" | |
| 222 | description={ | |
| 223 | terms.setBy ? ( | |
| 224 | <> | |
| 225 | Set by <span className="font-mono">{terms.setBy}</span> on <When at={terms.setAt} /> | |
| 226 | {terms.note && <> · “{terms.note}”</>} | |
| 227 | </> | |
| 228 | ) : ( | |
| 229 | "Standard, as everyone starts." | |
| 230 | ) | |
| 231 | } | |
| 232 | > | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 233 | <form method="post" action={`${pathname}#review`} className="terms-form space-y-4"> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 234 | <input type="hidden" name="intent" value="terms" /> |
| 235 | {error && <Notice tone="error">{error.error}</Notice>} | |
| 236 | <fieldset> | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 237 | <legend className="mb-1.5 text-sm font-medium text-muted">Discount</legend> |
| 238 | <div className="flex flex-wrap overflow-hidden rounded-md border border-line bg-bg"> | |
| 239 | {DISCOUNT_PRESETS.map((percent) => ( | |
| 240 | <Segment key={percent} name="preset" value={String(percent)} checked={preset === String(percent)}> | |
| 241 | {percent === 0 ? "None" : `${percent}%`} | |
| 242 | </Segment> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 243 | ))} |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 244 | <Segment name="preset" value="custom" checked={preset === "custom"}> |
| 245 | Custom | |
| 246 | </Segment> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 247 | </div> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 248 | <p className="mt-1.5 text-xs text-faint">Off every usage charge. 100%: nothing is charged, and the statement shows usage at price with the discount beside it.</p> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 249 | </fieldset> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 250 | <div className="when-custom"> |
| 251 | <Field label="Custom discount %" hint="A whole percent, 1 to 100."> | |
| 252 | <Input name="discount" inputMode="numeric" pattern="\d{1,3}" placeholder="30" defaultValue={values?.discount ?? (preset === "custom" ? String(current) : "")} /> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 253 | </Field> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 254 | </div> |
| 255 | <div className="grid gap-4 sm:grid-cols-2"> | |
| 256 | <Field label="Limit $" hint="Unpaid usage allowed; blank: trust decides. At 100%: g1t's monthly budget for it, at cost; blank: the default ($150)."> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 257 | <Input name="ceiling" inputMode="decimal" placeholder="By trust" defaultValue={values?.ceiling ?? dollarsField(terms.ceilingMicros)} /> |
| 258 | </Field> | |
| 259 | <Field label="Until" hint="Blank: no end. UTC."> | |
| 260 | <Input type="date" name="until" defaultValue={values?.until ?? (terms.until ? terms.until.slice(0, 10) : "")} /> | |
| 261 | </Field> | |
| 262 | </div> | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 263 | <Field label="Reason" hint="Required. Why, for whoever looks next; at 100%, shown as the reason for the discount."> |
| 264 | <Textarea name="note" rows={2} required maxLength={500} defaultValue={values?.note ?? ""} placeholder="e.g. g1t's own workspace" /> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 265 | </Field> |
| 266 | <div className="flex justify-end"> | |
| 267 | <Button type="submit">Review terms</Button> | |
| 268 | </div> | |
| 269 | </form> | |
| 270 | </Section> | |
| 271 | ); | |
| 272 | } | |
| 273 | ||
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 274 | // --- Plan, pools and caps ------------------------------------------------------- |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 275 | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 276 | /** What staff have set beyond the terms, one line each; defaults left out. */ |
| 277 | export function allowanceLines(allowances: Allowances | undefined, comped: boolean): string[] { | |
| 278 | const lines: string[] = []; | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 279 | if (comped) lines.push("The g1t plan, without its price (100% discount)"); |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 280 | else if (allowances?.plan) lines.push("The g1t plan, without its price"); |
| 281 | if (!allowances) return lines; | |
| 282 | if (allowances.ossRepoMicros != null) lines.push(`Open-source pool: ${usd(allowances.ossRepoMicros)} a month for each public repository`); | |
| 283 | if (allowances.trialMicros != null) lines.push(`Trial: ${usd(allowances.trialMicros)}, outside the monthly pool`); | |
| 284 | if (allowances.maxConcurrentAgents != null) { | |
| 285 | lines.push(`${allowances.maxConcurrentAgents} agent${allowances.maxConcurrentAgents === 1 ? "" : "s"} at once`); | |
| 286 | } | |
| 287 | if (allowances.runCapMicros != null) lines.push(`Run cap: ${usd(allowances.runCapMicros)} a run`); | |
| 288 | if (allowances.issueCapMicros != null) lines.push(`Issue cap: ${usd(allowances.issueCapMicros)} an issue`); | |
| Audit logs are kept by plan: a week on free, 90 days on the plan, and what staff set for an account in sudo | 289 | if (allowances.auditRetentionDays != null) lines.push(`Audit log: ${allowances.auditRetentionDays} days, in place of the plan's`); |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 290 | if (allowances.hold) lines.push(`Held: ${allowances.hold}`); |
| 291 | return lines; | |
| 292 | } | |
| 293 | ||
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 294 | /** |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 295 | * The g1t plan without its price, the account's share of g1t's pools, and |
| 296 | * staff's overrides of what owners set: agents at once, the run and issue | |
| Audit logs are kept by plan: a week on free, 90 days on the plan, and what staff set for an account in sudo | 297 | * caps, the days of audit log kept (such as for an organization that pays |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 298 | * for longer), and a hold on new compute. Accounts on a 100% discount have the plan |
| Audit logs are kept by plan: a week on free, 90 days on the plan, and what staff set for an account in sudo | 299 | * anyway. |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 300 | */ |
| 301 | export function AllowancesForm({ | |
| 302 | allowances, | |
| 303 | comped, | |
| 304 | pathname, | |
| 305 | error, | |
| 306 | }: { | |
| 307 | allowances: Allowances | undefined; | |
| 308 | comped: boolean; | |
| 309 | pathname: string; | |
| 310 | error: SectionError; | |
| 311 | }) { | |
| 312 | const values = error?.values; | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 313 | const current: Allowances = allowances ?? { plan: false, ossRepoMicros: null, trialMicros: null }; |
| 314 | const lines = allowanceLines(allowances, comped); | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 315 | return ( |
| 316 | <Section | |
| 317 | id="allowances" | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 318 | title="Plan, pools and caps" |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 319 | description={ |
| 320 | comped | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 321 | ? "A 100% discount: the g1t plan is on without its price whatever is set here. The pools and caps still apply." |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 322 | : "The g1t plan without its price, this account's share of g1t's pools, and overrides of what owners set." |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 323 | } |
| 324 | > | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 325 | <div className="mb-4 rounded-md border border-line bg-bg px-3.5 py-2.5 text-sm"> |
| 326 | <p className="text-xs text-faint">Set now</p> | |
| 327 | {lines.length === 0 ? ( | |
| 328 | <p className="mt-0.5 text-muted">Nothing: the defaults.</p> | |
| 329 | ) : ( | |
| 330 | <ul className="mt-1 space-y-0.5"> | |
| 331 | {lines.map((line) => ( | |
| 332 | <li key={line} className={line.startsWith("Held:") ? "text-danger" : "text-fg-soft"}> | |
| 333 | {line} | |
| 334 | </li> | |
| 335 | ))} | |
| 336 | </ul> | |
| 337 | )} | |
| 338 | </div> | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 339 | <form method="post" action={`${pathname}#allowances`} className="space-y-4"> |
| 340 | <input type="hidden" name="intent" value="allowances" /> | |
| 341 | {error && <Notice tone="error">{error.error}</Notice>} | |
| 342 | <label className="flex cursor-pointer items-start gap-2.5 text-sm"> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 343 | <input type="checkbox" name="plan" defaultChecked={values ? values.plan === "on" : current.plan} className="mt-0.5" /> |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 344 | <span> |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 345 | <span className="block font-medium">The g1t plan, without its price</span> |
| 346 | <span className="block text-xs text-muted"> | |
| 347 | Its included usage, storage and caps, with no $20 a month. Usage past it is charged as usual. | |
| 348 | </span> | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 349 | </span> |
| 350 | </label> | |
| 351 | <div className="grid gap-4 sm:grid-cols-2"> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 352 | <Field label="Open-source share $" hint="Each public repository, a month. Blank: the default ($2)."> |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 353 | <Input name="oss" inputMode="decimal" placeholder="Default" defaultValue={values?.oss ?? dollarsField(current.ossRepoMicros)} /> |
| 354 | </Field> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 355 | <Field label="Trial $" hint="Each workspace, outside the monthly pool. Blank: the default ($5)."> |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 356 | <Input name="trial" inputMode="decimal" placeholder="Default" defaultValue={values?.trial ?? dollarsField(current.trialMicros)} /> |
| 357 | </Field> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 358 | <Field label="Agents at once" hint="Blank: the plan's (2 in the first month or on the trial, then 10)."> |
| 359 | <Input | |
| 360 | name="agents" | |
| 361 | inputMode="numeric" | |
| 362 | pattern="\d{1,3}" | |
| 363 | placeholder="Default" | |
| 364 | defaultValue={values?.agents ?? (current.maxConcurrentAgents != null ? String(current.maxConcurrentAgents) : "")} | |
| 365 | /> | |
| 366 | </Field> | |
| 367 | <Field label="Run cap $" hint="One run's spend, over the owners'. Blank: theirs, or $2."> | |
| 368 | <Input name="runCap" inputMode="decimal" placeholder="Owners'" defaultValue={values?.runCap ?? dollarsField(current.runCapMicros)} /> | |
| 369 | </Field> | |
| 370 | <Field label="Issue cap $" hint="One issue's agents in all, over the owners'. Blank: theirs, or $10."> | |
| 371 | <Input name="issueCap" inputMode="decimal" placeholder="Owners'" defaultValue={values?.issueCap ?? dollarsField(current.issueCapMicros)} /> | |
| 372 | </Field> | |
| Audit logs are kept by plan: a week on free, 90 days on the plan, and what staff set for an account in sudo | 373 | <Field label="Audit log days" hint="Kept, in place of the plan's, longer or shorter, up to 400. Blank: the plan's (7 free, 90 on the plan)."> |
| 374 | <Input | |
| 375 | name="auditDays" | |
| 376 | inputMode="numeric" | |
| 377 | pattern="\d{1,3}" | |
| 378 | placeholder="Plan's" | |
| 379 | defaultValue={values?.auditDays ?? (current.auditRetentionDays != null ? String(current.auditRetentionDays) : "")} | |
| 380 | /> | |
| 381 | </Field> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 382 | <Field label="Hold" hint="Pauses new compute and tells the owners why. Blank: no hold."> |
| 383 | <Input name="hold" maxLength={200} placeholder="No hold" defaultValue={values?.hold ?? current.hold ?? ""} /> | |
| 384 | </Field> | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 385 | </div> |
| 386 | <Field label="Note" hint="Required. Why, for whoever looks next."> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 387 | <Textarea |
| 388 | name="note" | |
| 389 | rows={2} | |
| 390 | required | |
| 391 | maxLength={500} | |
| 392 | defaultValue={values?.note ?? ""} | |
| 393 | placeholder="e.g. Open-source foundation, larger share through 2027" | |
| 394 | /> | |
| 395 | </Field> | |
| 396 | <div className="flex justify-end"> | |
| 397 | <Button type="submit">Save plan, pools and caps</Button> | |
| 398 | </div> | |
| 399 | </form> | |
| 400 | </Section> | |
| 401 | ); | |
| 402 | } | |
| 403 | ||
| 404 | // --- Bank transfer --------------------------------------------------------------- | |
| 405 | ||
| 406 | /** | |
| 407 | * Money that reached g1t outside Stripe's page, such as a bank transfer | |
| 408 | * for a $1,000+ prepayment, entered as a payment. | |
| 409 | */ | |
| 410 | export function PaymentForm({ workspace, pathname, error }: { workspace: string; pathname: string; error: SectionError }) { | |
| 411 | const values = error?.values; | |
| 412 | return ( | |
| 413 | <Section | |
| 414 | id="payment" | |
| 415 | title="Record a bank transfer" | |
| 416 | description="Money that reached g1t's bank without Stripe's page, such as a $1,000+ prepayment. It goes on the statement as a payment and counts toward the limit at once." | |
| 417 | > | |
| 418 | <form method="post" action={`${pathname}#payment`} className="space-y-4"> | |
| 419 | <input type="hidden" name="intent" value="payment" /> | |
| 420 | {error && <Notice tone="error">{error.error}</Notice>} | |
| 421 | <div className="grid gap-4 sm:grid-cols-2"> | |
| 422 | <Field label="Amount $" hint="As it arrived, up to $100,000."> | |
| 423 | <Input name="amount" inputMode="decimal" required placeholder="1,500.00" defaultValue={values?.amount ?? ""} /> | |
| 424 | </Field> | |
| 425 | <Field label="Reference" hint="As the bank shows it. Each is recorded once."> | |
| 426 | <Input name="reference" required maxLength={100} className="font-mono" defaultValue={values?.reference ?? ""} /> | |
| 427 | </Field> | |
| 428 | </div> | |
| 429 | <Field label="Note" hint="Required. Shown on the statement after “Paid by bank transfer”."> | |
| 430 | <Textarea | |
| 431 | name="note" | |
| 432 | rows={2} | |
| 433 | required | |
| 434 | maxLength={500} | |
| 435 | placeholder="e.g. Prepayment for October, invoice INV-0042" | |
| 436 | defaultValue={values?.note ?? ""} | |
| 437 | /> | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 438 | </Field> |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 439 | <Field |
| 440 | label="Confirm" | |
| 441 | hint={ | |
| 442 | <> | |
| 443 | Type the workspace's slug (<span className="font-mono text-muted">{workspace}</span>) to record it. | |
| 444 | </> | |
| 445 | } | |
| 446 | > | |
| 447 | <Input name="confirmation" required placeholder={workspace} className="font-mono" /> | |
| 448 | </Field> | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 449 | <div className="flex justify-end"> |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 450 | <Button type="submit" variant="lavender"> |
| 451 | <Landmark size={14} /> | |
| 452 | Record the payment | |
| 453 | </Button> | |
| Team plan, an open-source pool, monthly trials and honest metering; the sidebar for everyone; a workspace that stays put | 454 | </div> |
| 455 | </form> | |
| 456 | </Section> | |
| 457 | ); | |
| 458 | } | |
| 459 | ||
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 460 | // --- Credit ------------------------------------------------------------------- |
| 461 | ||
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 462 | /** A radio drawn as one button of a segmented row; still a plain radio without CSS. */ |
| 463 | function Segment({ name, value, checked, children }: { name: string; value: string; checked: boolean; children: ReactNode }) { | |
| 464 | return ( | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 465 | <label className="flex-1 cursor-pointer border-r border-line px-3 py-1.5 text-center text-sm whitespace-nowrap text-muted transition-colors last:border-r-0 hover:bg-raised hover:text-fg has-checked:bg-accent has-checked:font-medium has-checked:text-bg has-focus-visible:outline-2 has-focus-visible:-outline-offset-2 has-focus-visible:outline-accent"> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 466 | <input type="radio" name={name} value={value} defaultChecked={checked} className="sr-only" /> |
| 467 | {children} | |
| 468 | </label> | |
| 469 | ); | |
| 470 | } | |
| 471 | ||
| 472 | /** | |
| 473 | * Credit for a workspace: a preset amount or a custom one, a kind, an | |
| 474 | * expiry, and a note. Fields that belong to one choice (the custom amount, | |
| 475 | * a refund's details, an expiry date) show only for it, by CSS alone | |
| 476 | * (`.credit-form` in app.css); without `:has()` every field shows and the | |
| 477 | * ones that do not apply are ignored. Over $100 the slug is typed out too. | |
| 478 | */ | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 479 | export function CreditForm({ workspaces, pathname, error }: { workspaces: string[]; pathname: string; error: SectionError }) { |
| 480 | const values = error?.values; | |
| 481 | const single = workspaces.length === 1 ? workspaces[0] : null; | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 482 | const preset = values?.preset ?? "25"; |
| 483 | const kind = values?.kind ?? "promotional"; | |
| 484 | const expires = values?.expires ?? "none"; | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 485 | return ( |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 486 | <Section |
| 487 | id="credit" | |
| 488 | title="Give credit" | |
| 489 | description="Added to the balance at once and spent before anything paid in advance. The owners are emailed." | |
| 490 | > | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 491 | {workspaces.length === 0 ? ( |
| 492 | <p className="text-sm text-muted">Add a workspace first: credit goes to a workspace.</p> | |
| 493 | ) : ( | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 494 | <form method="post" action={`${pathname}#credit`} className="credit-form space-y-4"> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 495 | <input type="hidden" name="intent" value="credit" /> |
| 496 | {error && <Notice tone="error">{error.error}</Notice>} | |
| 497 | {single ? ( | |
| 498 | <input type="hidden" name="workspace" value={single} /> | |
| 499 | ) : ( | |
| 500 | <Field label="Workspace"> | |
| 501 | <Select name="workspace" required defaultValue={values?.workspace ?? ""}> | |
| 502 | <option value="" disabled> | |
| 503 | Choose a workspace | |
| 504 | </option> | |
| 505 | {workspaces.map((slug) => ( | |
| 506 | <option key={slug} value={slug}> | |
| 507 | {slug} | |
| 508 | </option> | |
| 509 | ))} | |
| 510 | </Select> | |
| 511 | </Field> | |
| 512 | )} | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 513 | <fieldset> |
| 514 | <legend className="mb-1.5 text-sm font-medium text-muted">Amount</legend> | |
| 515 | <div className="flex flex-wrap overflow-hidden rounded-md border border-line bg-bg"> | |
| 516 | {CREDIT_PRESETS.map((dollars) => ( | |
| 517 | <Segment key={dollars} name="preset" value={String(dollars)} checked={preset === String(dollars)}> | |
| 518 | ${dollars} | |
| 519 | </Segment> | |
| 520 | ))} | |
| 521 | <Segment name="preset" value="custom" checked={preset === "custom"}> | |
| 522 | Custom | |
| 523 | </Segment> | |
| 524 | </div> | |
| 525 | </fieldset> | |
| 526 | <div className="when-custom space-y-4"> | |
| 527 | <Field label="Custom amount $" hint="Up to $10,000 at a time."> | |
| 528 | <Input name="amount" inputMode="decimal" placeholder="15.00" defaultValue={values?.amount ?? ""} /> | |
| 529 | </Field> | |
| 530 | </div> | |
| 531 | <fieldset> | |
| 532 | <legend className="mb-1.5 text-sm font-medium text-muted">Kind</legend> | |
| 533 | <div className="grid gap-2"> | |
| 534 | {CREDIT_KINDS.map((option) => ( | |
| 535 | <label | |
| 536 | key={option.value} | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 537 | className="flex cursor-pointer gap-2.5 rounded-md border border-line bg-bg px-3 py-2.5 transition-colors hover:border-line-strong has-checked:border-accent/60 has-checked:bg-accent/8" |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 538 | > |
| 539 | <input type="radio" name="kind" value={option.value} defaultChecked={kind === option.value} className="mt-0.5" required /> | |
| 540 | <span> | |
| 541 | <span className="block text-sm font-medium">{option.title}</span> | |
| 542 | <span className="mt-0.5 block text-xs text-muted">{option.text}</span> | |
| 543 | </span> | |
| 544 | </label> | |
| 545 | ))} | |
| 546 | </div> | |
| 547 | </fieldset> | |
| 548 | <div className="when-refund"> | |
| 549 | <div className="grid gap-4 sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"> | |
| 550 | <Field label="Refund for" hint="Refunds only. On the statement and in the email."> | |
| 551 | <Input name="refundFor" maxLength={200} placeholder="the failed runs on Oct 2" defaultValue={values?.refundFor ?? ""} /> | |
| 552 | </Field> | |
| 553 | <Field label="Day refunded" hint="Comes off what was paid that day. Blank: today."> | |
| 554 | <Input type="date" name="refundDay" defaultValue={values?.refundDay ?? ""} /> | |
| 555 | </Field> | |
| 556 | </div> | |
| 557 | </div> | |
| 558 | <fieldset className="when-not-refund"> | |
| 559 | <legend className="mb-1.5 text-sm font-medium text-muted">Expires</legend> | |
| 560 | <div className="flex flex-wrap overflow-hidden rounded-md border border-line bg-bg"> | |
| 561 | {EXPIRIES.map((option) => ( | |
| 562 | <Segment key={option.value} name="expires" value={option.value} checked={expires === option.value}> | |
| 563 | {option.label} | |
| 564 | </Segment> | |
| 565 | ))} | |
| 566 | </div> | |
| 567 | <p className="mt-1.5 text-xs text-faint">Unused credit stops counting then. A refund never expires.</p> | |
| 568 | </fieldset> | |
| 569 | <div className="when-date when-not-refund"> | |
| 570 | <Field label="Expires on" hint="At the end of the day, UTC."> | |
| 571 | <Input type="date" name="expiresOn" defaultValue={values?.expiresOn ?? ""} /> | |
| 572 | </Field> | |
| 573 | </div> | |
| 574 | <Field label="Note" hint="Required. On the workspace's statement and in the owners' email."> | |
| 575 | <Textarea name="note" rows={2} required maxLength={500} placeholder="e.g. Welcome to g1t" defaultValue={values?.note ?? ""} /> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 576 | </Field> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 577 | <div className="when-custom"> |
| 578 | <Field | |
| 579 | label="Confirm" | |
| 580 | hint={ | |
| 581 | <> | |
| 582 | Over $100 only: type the workspace's slug{single && <> (<span className="font-mono text-muted">{single}</span>)</>}. | |
| 583 | </> | |
| 584 | } | |
| 585 | > | |
| 586 | <Input name="confirmation" placeholder={single ?? "workspace-slug"} className="font-mono" /> | |
| 587 | </Field> | |
| 588 | </div> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 589 | <div className="flex justify-end"> |
| 590 | <Button type="submit" variant="lavender"> | |
| 591 | <Gift size={14} /> | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 592 | Give credit |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 593 | </Button> |
| 594 | </div> | |
| 595 | </form> | |
| 596 | )} | |
| 597 | </Section> | |
| 598 | ); | |
| 599 | } | |
| 600 | ||
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 601 | const GRANT_STATE: Record<CreditGrant["state"], { label: string; tone: "mint" | "plain" | "warn" | "danger" }> = { |
| 602 | open: { label: "Open", tone: "mint" }, | |
| 603 | used: { label: "Used", tone: "plain" }, | |
| 604 | expired: { label: "Expired", tone: "warn" }, | |
| 605 | revoked: { label: "Revoked", tone: "danger" }, | |
| 606 | }; | |
| 607 | ||
| 608 | /** | |
| 609 | * Credits g1t gave, newest first: amount, kind, note, who, when, used, | |
| 610 | * left and expiry, and on an open one a form to take back what is left. | |
| 611 | */ | |
| 612 | export function CreditList({ | |
| 613 | grants, | |
| 614 | pathname, | |
| 615 | error, | |
| 616 | showWorkspace = false, | |
| 617 | }: { | |
| 618 | grants: CreditGrant[]; | |
| 619 | pathname: string; | |
| 620 | error?: SectionError; | |
| 621 | showWorkspace?: boolean; | |
| 622 | }) { | |
| 623 | if (grants.length === 0) return <EmptyState title="No credits given">Credit given from sudo shows here, with what is left of it.</EmptyState>; | |
| 624 | return ( | |
| 625 | <ul className="-my-1 divide-y divide-line"> | |
| 626 | {grants.map((grant) => { | |
| 627 | const state = GRANT_STATE[grant.state]; | |
| 628 | const failed = error && error.values?.id === grant.id ? error.error : null; | |
| 629 | return ( | |
| 630 | <li key={grant.id} id={`grant-${grant.id}`} className="scroll-mt-20 py-3"> | |
| 631 | <div className="flex flex-wrap items-center gap-x-2 gap-y-1"> | |
| 632 | <span className="tabular font-semibold">{usd(grant.amountMicros, { cents: true })}</span> | |
| 633 | <Badge tone="lavender">{kindLabel(grant.kind)}</Badge> | |
| 634 | <Badge tone={state.tone}>{state.label}</Badge> | |
| 635 | {showWorkspace && ( | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 636 | <Link to={`/workspaces/${encodeURIComponent(grant.workspace)}#credits`} className="font-mono text-xs text-accent hover:underline"> |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 637 | {grant.workspace} |
| 638 | </Link> | |
| 639 | )} | |
| 640 | </div> | |
| 641 | <p className="tabular mt-1 text-sm text-fg-soft"> | |
| 642 | Used {usd(grant.usedMicros, { cents: true })} · left {usd(grant.leftMicros, { cents: true })} | |
| 643 | {grant.expiresAt ? ( | |
| 644 | <> | |
| 645 | {" "} | |
| 646 | · {grant.state === "expired" ? "expired" : "expires"} <When at={grant.expiresAt} /> | |
| 647 | </> | |
| 648 | ) : grant.kind === "refund" ? ( | |
| 649 | " · never expires" | |
| 650 | ) : ( | |
| 651 | " · no expiry" | |
| 652 | )} | |
| 653 | </p> | |
| 654 | <p className="mt-0.5 text-sm break-words"> | |
| 655 | {grant.kind === "refund" && grant.refundFor && <span className="text-muted">For {grant.refundFor}{grant.refundDay ? ` (${grant.refundDay})` : ""}: </span>} | |
| 656 | {grant.note} | |
| 657 | </p> | |
| 658 | <p className="mt-0.5 flex flex-wrap items-center gap-x-1 font-mono text-xs text-faint"> | |
| 659 | <UserRound size={11} /> | |
| 660 | {grant.createdBy} · <When at={grant.createdAt} time /> | |
| 661 | </p> | |
| 662 | {grant.closedAt && grant.state === "revoked" && ( | |
| 663 | <p className="mt-1 text-xs text-muted"> | |
| 664 | {usd(grant.closedMicros ?? 0, { cents: true })} taken back by {grant.closedBy} on <When at={grant.closedAt} /> | |
| 665 | {grant.closedNote ? `: “${grant.closedNote}”` : ""} | |
| 666 | </p> | |
| 667 | )} | |
| 668 | {grant.closedAt && grant.state === "expired" && (grant.closedMicros ?? 0) > 0 && ( | |
| 669 | <p className="mt-1 text-xs text-muted">{usd(grant.closedMicros ?? 0, { cents: true })} unused when it expired.</p> | |
| 670 | )} | |
| 671 | {grant.state === "open" && ( | |
| 672 | <details className="mt-2" open={failed != null}> | |
| 673 | <summary className="cursor-pointer text-xs text-danger hover:underline">Revoke unused</summary> | |
| 674 | <form method="post" action={`${pathname}#grant-${grant.id}`} className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-end"> | |
| 675 | <input type="hidden" name="intent" value="revoke-credit" /> | |
| 676 | <input type="hidden" name="id" value={grant.id} /> | |
| 677 | {showWorkspace && <input type="hidden" name="workspace" value={grant.workspace} />} | |
| 678 | <Field label="Why" hint={`Takes ${usd(grant.leftMicros, { cents: true })} off the balance. Kept in the audit log.`} className="flex-1"> | |
| 679 | <Input name="reason" required maxLength={500} placeholder="e.g. Given to the wrong workspace" defaultValue={failed ? (error?.values?.reason ?? "") : ""} /> | |
| 680 | </Field> | |
| 681 | <Button type="submit" variant="danger" className="shrink-0"> | |
| 682 | Revoke {usd(grant.leftMicros, { cents: true })} | |
| 683 | </Button> | |
| 684 | </form> | |
| 685 | {failed && ( | |
| 686 | <div className="mt-2"> | |
| 687 | <Notice tone="error">{failed}</Notice> | |
| 688 | </div> | |
| 689 | )} | |
| 690 | </details> | |
| 691 | )} | |
| 692 | </li> | |
| 693 | ); | |
| 694 | })} | |
| 695 | </ul> | |
| 696 | ); | |
| 697 | } | |
| 698 | ||
| 699 | /** A workspace's credits from g1t: what is left to spend, and each grant. */ | |
| 700 | export function CreditsSection({ | |
| 701 | credits, | |
| 702 | unavailable, | |
| 703 | pathname, | |
| 704 | error, | |
| 705 | }: { | |
| 706 | credits: Credits | null; | |
| 707 | unavailable: string | null; | |
| 708 | pathname: string; | |
| 709 | error: SectionError; | |
| 710 | }) { | |
| 711 | return ( | |
| 712 | <Section | |
| 713 | id="credits" | |
| 714 | title="Credits" | |
| 715 | description={ | |
| 716 | credits | |
| 717 | ? `${usd(credits.leftMicros, { cents: true })} left to spend. Spent before anything paid in advance, the soonest-expiring first.` | |
| 718 | : "Credits from g1t, with what is left of each." | |
| 719 | } | |
| 720 | > | |
| 721 | {unavailable ? <Notice tone="warn">Billing did not answer for credits: {unavailable}</Notice> : <CreditList grants={credits?.grants ?? []} pathname={pathname} error={error} />} | |
| 722 | </Section> | |
| 723 | ); | |
| 724 | } | |
| 725 | ||
| sudo: reset a test workspace's billing so it starts again as a new customer; refused on a live Stripe key, for comped workspaces and for an enterprise's | 726 | // --- Reset (testing) ----------------------------------------------------------- |
| 727 | ||
| 728 | /** | |
| 729 | * Wipes a test workspace's billing so it starts again as a new customer. | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 730 | * Only while billing runs on Stripe's test key; billing refuses 100% discounts and |
| sudo: reset a test workspace's billing so it starts again as a new customer; refused on a live Stripe key, for comped workspaces and for an enterprise's | 731 | * enterprise workspaces. The workspace, its members and repositories stay. |
| 732 | */ | |
| 733 | export function ResetBillingForm({ workspace, pathname, error }: { workspace: string; pathname: string; error: SectionError }) { | |
| 734 | const values = error?.values; | |
| 735 | return ( | |
| 736 | <Section | |
| 737 | id="reset" | |
| 738 | title="Reset billing (testing)" | |
| Merge branch 'worktree-agent-a12ebea8611c42ee9' | 739 | description="Wipes this workspace's billing: its ledger and balance, plan, limits, trial, invoices, holds, signals and cost rows. What its usage cost g1t is kept, and counted on Costs & margin as given away (testing resets). The workspace, its members and its repositories stay. Only while billing is on Stripe's test key." |
| sudo: reset a test workspace's billing so it starts again as a new customer; refused on a live Stripe key, for comped workspaces and for an enterprise's | 740 | > |
| 741 | <form method="post" action={`${pathname}#reset`} className="space-y-4"> | |
| 742 | <input type="hidden" name="intent" value="reset" /> | |
| 743 | {error && <Notice tone="error">{error.error}</Notice>} | |
| 744 | <Field label="Why" hint="Required. Kept in the audit log."> | |
| 745 | <Textarea name="note" rows={2} required maxLength={500} placeholder="e.g. Test workspace, starting the customer walk-through again" defaultValue={values?.note ?? ""} /> | |
| 746 | </Field> | |
| 747 | <Field | |
| 748 | label="Confirm" | |
| 749 | hint={ | |
| 750 | <> | |
| 751 | Type the workspace's slug (<span className="font-mono text-muted">{workspace}</span>) to wipe its billing. It cannot be undone. | |
| 752 | </> | |
| 753 | } | |
| 754 | > | |
| 755 | <Input name="confirmation" required placeholder={workspace} className="font-mono" /> | |
| 756 | </Field> | |
| 757 | <div className="flex justify-end"> | |
| 758 | <Button type="submit" variant="danger"> | |
| 759 | <RotateCcw size={14} /> | |
| 760 | Reset billing | |
| 761 | </Button> | |
| 762 | </div> | |
| 763 | </form> | |
| 764 | </Section> | |
| 765 | ); | |
| 766 | } | |
| 767 | ||
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 768 | // --- Stripe billing link ----------------------------------------------------- |
| 769 | ||
| 770 | /** | |
| 771 | * Card details, invoices and receipts live on Stripe's own billing page. | |
| 772 | * sudo never shows a card field: staff send the customer a link instead. | |
| 773 | */ | |
| 774 | export function BillingLinkSection({ | |
| 775 | link, | |
| 776 | pathname, | |
| 777 | error, | |
| 778 | }: { | |
| 779 | link: BillingLink | null; | |
| 780 | pathname: string; | |
| 781 | error: SectionError; | |
| 782 | }) { | |
| 783 | return ( | |
| 784 | <Section | |
| 785 | id="billing-link" | |
| 786 | title="Stripe billing page" | |
| 787 | description="Where the customer updates their card and sees invoices. g1t never takes card numbers." | |
| 788 | > | |
| 789 | {error && ( | |
| 790 | <div className="mb-4"> | |
| 791 | <Notice tone="error">{error.error}</Notice> | |
| 792 | </div> | |
| 793 | )} | |
| 794 | {link ? ( | |
| 795 | <div className="space-y-4"> | |
| 796 | <Notice tone="info">Send this to the customer. g1t never takes card numbers; they enter them on Stripe.</Notice> | |
| 797 | <Field label="One-time link" hint={link.expiresNote}> | |
| 798 | <Input readOnly value={link.portalUrl} className="font-mono text-xs" aria-label="One-time Stripe billing link" /> | |
| 799 | </Field> | |
| 800 | {link.loginUrl && ( | |
| 801 | <Field label="Permanent sign-in page" hint={`The customer signs in with ${link.customerEmail ?? "the email Stripe has for them"}.`}> | |
| 802 | <Input readOnly value={link.loginUrl} className="font-mono text-xs" aria-label="Stripe billing sign-in page" /> | |
| 803 | </Field> | |
| 804 | )} | |
| 805 | {!link.loginUrl && link.customerEmail && <p className="text-xs text-faint">Stripe has {link.customerEmail} for this customer.</p>} | |
| 806 | </div> | |
| 807 | ) : ( | |
| 808 | <form method="post" action={`${pathname}#review`} className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> | |
| 809 | <input type="hidden" name="intent" value="billing-link" /> | |
| 810 | <p className="text-sm text-muted"> | |
| 811 | Never take card details over the phone or by email. Make a link to Stripe's billing page and send it to the owner. | |
| 812 | </p> | |
| 813 | <Button type="submit" variant="quiet" className="shrink-0"> | |
| 814 | <CreditCard size={14} /> | |
| 815 | Make a link | |
| 816 | </Button> | |
| 817 | </form> | |
| 818 | )} | |
| 819 | </Section> | |
| 820 | ); | |
| 821 | } | |
| 822 | ||
| 823 | // --- Ledger and audit --------------------------------------------------------- | |
| 824 | ||
| 825 | const ENTRY_KIND: Record<string, string> = { top_up: "Top-up", usage: "Usage", credit: "Credit" }; | |
| 826 | ||
| 827 | export function LedgerSection({ | |
| 828 | ledger, | |
| 829 | showWorkspace = false, | |
| 830 | description = "Recent lines of the statement, newest first.", | |
| 831 | }: { | |
| 832 | ledger: LedgerEntry[]; | |
| 833 | showWorkspace?: boolean; | |
| 834 | description?: ReactNode; | |
| 835 | }) { | |
| 836 | return ( | |
| 837 | <Section title="Ledger" description={description}> | |
| 838 | {ledger.length === 0 ? ( | |
| 839 | <EmptyState title="Nothing yet" /> | |
| 840 | ) : ( | |
| 841 | <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5"> | |
| 842 | <table className="w-full min-w-[36rem] text-sm"> | |
| 843 | <thead> | |
| 844 | <tr className="border-b border-line text-left text-xs text-muted"> | |
| 845 | <th className="px-4 py-2 font-medium sm:pl-5">When</th> | |
| 846 | <th className="px-4 py-2 font-medium">What</th> | |
| 847 | <th className="px-4 py-2 text-right font-medium sm:pr-5">Amount</th> | |
| 848 | </tr> | |
| 849 | </thead> | |
| 850 | <tbody> | |
| 851 | {ledger.map((entry) => ( | |
| 852 | <tr key={entry.id} className="border-b border-line align-top last:border-0"> | |
| 853 | <td className="px-4 py-2.5 text-xs whitespace-nowrap text-muted sm:pl-5"> | |
| 854 | <When at={entry.createdAt} time /> | |
| 855 | </td> | |
| 856 | <td className="px-4 py-2.5"> | |
| 857 | <div className="flex flex-wrap items-center gap-1.5"> | |
| Billing: credits with a kind and expiry, discounts instead of comped, and safer charging | 858 | <Badge tone={entry.creditKind ? "lavender" : entry.amountMicros > 0 ? "mint" : "plain"}> |
| 859 | {entry.creditKind ? `Credit · ${kindLabel(entry.creditKind)}` : (ENTRY_KIND[entry.kind] ?? entry.kind)} | |
| 860 | </Badge> | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 861 | {showWorkspace && entry.workspace && ( |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 862 | <Link to={`/workspaces/${encodeURIComponent(entry.workspace)}`} className="font-mono text-xs text-accent hover:underline"> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 863 | {entry.workspace} |
| 864 | </Link> | |
| 865 | )} | |
| 866 | <span className="break-words">{entry.description}</span> | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 867 | {givenParts(entry).map((part) => ( |
| 868 | <Badge key={part.label} tone="lavender"> | |
| 869 | Given · {part.label} {usd(part.micros)} | |
| 870 | </Badge> | |
| 871 | ))} | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 872 | </div> |
| 873 | <p className="mt-0.5 font-mono text-xs text-faint"> | |
| 874 | {[ | |
| 875 | entry.repo && (entry.number != null ? `${entry.repo}#${entry.number}` : entry.repo), | |
| 876 | entry.task, | |
| 877 | entry.model, | |
| 878 | entry.billedTo === "workspace" ? "own provider" : null, | |
| 879 | entry.createdBy && `by ${entry.createdBy}`, | |
| 880 | ] | |
| 881 | .filter(Boolean) | |
| 882 | .join(" · ")} | |
| 883 | </p> | |
| 884 | </td> | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 885 | <td className={`tabular px-4 py-2.5 text-right whitespace-nowrap sm:pr-5 ${entry.amountMicros > 0 ? "text-success" : "text-fg-soft"}`}> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 886 | {usd(entry.amountMicros, { signed: true })} |
| 887 | </td> | |
| 888 | </tr> | |
| 889 | ))} | |
| 890 | </tbody> | |
| 891 | </table> | |
| 892 | </div> | |
| 893 | )} | |
| 894 | </Section> | |
| 895 | ); | |
| 896 | } | |
| 897 | ||
| 898 | ||
| sudo: Invoices, Audit log, and follow-ups due | 899 | |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 900 | export function AuditSection({ audit, description = "Every change made in sudo, and by whom." }: { audit: AdminAction[]; description?: ReactNode }) { |
| 901 | return ( | |
| 902 | <Section title="Audit log" description={description}> | |
| 903 | {audit.length === 0 ? ( | |
| 904 | <p className="flex items-center gap-2 text-sm text-muted"> | |
| 905 | <ScrollText size={14} /> | |
| 906 | No changes yet. | |
| 907 | </p> | |
| 908 | ) : ( | |
| 909 | <ol className="space-y-3"> | |
| 910 | {audit.map((entry) => ( | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 911 | <li key={entry.id} className="border-l-2 border-accent/40 pl-3"> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 912 | <p className="flex flex-wrap items-center gap-x-2 text-sm"> |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 913 | <span className="font-medium text-accent">{actionLabel(entry.action)}</span> |
| Billing on Stripe's pages, month-end charges, warnings; sudo by workspace | 914 | <span className="text-xs text-faint"> |
| 915 | <When at={entry.createdAt} time /> | |
| 916 | </span> | |
| 917 | </p> | |
| 918 | {entry.detail && <p className="mt-0.5 text-sm break-words text-fg-soft">{entry.detail}</p>} | |
| 919 | <p className="mt-0.5 flex items-center gap-1 font-mono text-xs text-faint"> | |
| 920 | <UserRound size={11} /> | |
| 921 | {entry.by} | |
| 922 | </p> | |
| 923 | </li> | |
| 924 | ))} | |
| 925 | </ol> | |
| 926 | )} | |
| 927 | </Section> | |
| 928 | ); | |
| 929 | } |
This file's history is long; its oldest lines are credited to the oldest commit read.