apps/web/app/routes/workspace/billing.tsx · flagon-io/g1t

const parsed = parseAiReload({ enabled: form.get("enabled"), threshold: form.get("threshold"), target: form.get("target"), monthly: form.get("monthly") });

215

if (!parsed.ok) return fail("ai", parsed.error);

216

const set = await billing.setAiReload(user, slug, parsed.value);

217

if (!set.ok) return fail("ai", set.error.message);

218

throw done("ai_reload", "#ai-credit");

219

}

220

case "budget": {

221

const parsed = parseBudgetAlerts({ alerts: form.getAll("alert"), pause: form.get("pause"), webhook: form.get("webhook") });

222

if (!parsed.ok) return fail("budget", parsed.error);

223

const set = await billing.setBudget(user, slug, { amountMicros: null, keepLimit: true, ...parsed.value });

224

if (!set.ok) return fail("budget", set.error.message);

225

throw done("budget", "#budget");

226

}

227

case "details": {

228

const parsed = parseInvoiceDetails(form);

229

if (!parsed.ok) return fail("details", parsed.error);

230

const saved = await billing.setBillingDetails(user, slug, parsed.value);

231

if (!saved.ok) return fail("details", saved.error.message);

232

throw done("details", "#details");

233

}

234

case "spend-limit": {

235

const parsed = parseSpendLimit({ mode: form.get("mode"), limit: form.get("limit") });

236

if (!parsed.ok) return fail("limit", parsed.error);

237

let micros = parsed.value.micros;

238

if (parsed.value.raiseOnce && micros == null) {

239

// The one-time raise with no amount: as high as it goes.

240

const limit = await billing.limit(slug, user);

241

micros = limit.ok ? (limit.value.raiseOnceMicros ?? null) : null;

242

if (micros == null) return fail("limit", "The one-time raise is not available. Prepay, or use Raise my limit.");

243

}

244

const set = await billing.setSpendLimit(user, slug, micros, parsed.value.useFull, parsed.value.raiseOnce);

245

if (!set.ok) return fail("limit", set.error.message);

246

throw done("limit", "#limit");

247

}

248

case "request": {

249

const parsed = parseLimitRequest({

250

kind: form.get("kind"),

251

amount: form.get("amount"),

252

reason: form.get("reason"),

253

expected: form.get("expected"),

254

});

255

const section = String(form.get("kind")) === "overage" ? "overage" : "raise";

256

if (!parsed.ok) return fail(section, parsed.error);

257

const sent = await billing.requestLimit(user, slug, parsed.value);

258

if (!sent.ok) return fail(section, sent.error.message);

259

throw done(section === "overage" ? "told" : "requested", `#${section}`);

260

}

261

case "caps": {

262

const parsed = parseCaps({ run: form.get("run"), issue: form.get("issue") });

263

if (!parsed.ok) return fail("caps", parsed.error);

264

const set = await billing.setCaps(user, slug, parsed.value);

265

if (!set.ok) return fail("caps", set.error.message);

266

throw done("caps", "#caps");

267

}

268

case "spike": {

269

const keep = String(form.get("decision")) === "keep";

270

const answered = await billing.confirmSpike(user, slug, keep);

271

if (!answered.ok) return fail("spike", answered.error.message);

272

throw done(keep ? "keep" : "stop");

273

}

274

case "prepay": {

275

const parsed = parsePrepay({ amount: form.get("amount"), custom: form.get("custom"), method: form.get("method") });

276

if (!parsed.ok) return fail("prepay", parsed.error);

277

const started = await billing.checkout(user, slug, parsed.value.amountCents, here, parsed.value.method);

278

if (!started.ok) return fail("prepay", started.error.message);

279

throw redirect(started.value.url);

280

}

281

default:

282

return fail("plan", "Unknown action.");

}

}

export default function WorkspaceBilling({ loaderData, actionData }: Route.ComponentProps) {

287

const { slug, role, staff, account, statement, group, plan, securityPlan, limit, invoices, entitlements, requests, credits, ai, report, details, trialMicros, notice, problem } =

288

loaderData;

289

const { status } = account;

290

const owner = role === "owner";

291

const error = actionData as SectionError;

292

const err = (section: string) => (error && error.section === section ? error.error : undefined);

293

const standing = planStatus(plan, entitlements);

294

const paying = standing.kind === "paid" || standing.kind === "canceling" || standing.kind === "past_due";

295

const free = standing.kind === "free" || standing.kind === "trial";

296

const prepaid = limit?.prepaidMicros ?? entitlements?.prepaidMicros ?? 0;

297

// The spend limit and its budget are the owners' to set only where

298

// billing lets them: on the plan, never a free workspace's ceiling.

299

const selfServe = !!limit && (limit.trust === "paid" || limit.trust === "established");

300

const summary = (loaded: Awaited<typeof details>) => (

);

return (

{status.free && (

<h2 className="font-medium">Free while g1t is being built out</h2>

310

311

Runs are recorded with what they cost, so Usage shows what you use, but nothing is charged for now. We will say so well

before anything is.

</p>

</div>

)}

{notice && <p className="mb-6 rounded-lg border border-accent/30 bg-accent/5 px-4 py-2.5 text-sm">{notice}</p>}

317

{problem && <p className="mb-6 rounded-lg border border-danger/40 bg-danger/5 px-4 py-2.5 text-sm">{problem}</p>}

318

319

{entitlements && <SpikeBanner slug={slug} entitlements={entitlements} owner={owner} />}

320

{err("spike") && <p className="mb-6 text-sm text-danger">{err("spike")}</p>}

<Await resolve={details}>{(loaded) => summary(loaded)}</Await>

325

</Suspense>

326

327

{ai && status.enabled && <AiCreditCard credit={ai} owner={owner} enabled={status.enabled} staff={staff} error={err("ai")} />}

328

329

{free && status.enabled && (

)}

{paying && limit && selfServe && (

<>

</>

)}

{credits && <CreditsCard credits={credits} />}

343

344

{entitlements && (paying || standing.kind === "trial" || standing.kind === "comped" || standing.kind === "enterprise") && (

)}

{paying && <OverageCard requests={requests} owner={owner} error={err("overage")} />}

{status.enabled && (

{(loaded) => (

<>

</>

)}

</Await>

</Suspense>

)}

{invoices.length > 0 && <InvoiceList invoices={invoices} />}

</div>

<h3 className="font-medium">How it is charged</h3>

374

375

<li>

376

The plan is {wholeDollars((plan?.plan.monthlyCents ?? 2000) * 10_000)} a month for the workspace, with $10 of usage

377

included. Usage is charged at what it costs g1t plus {account.marginPercent}%, from the first second, after what is

included.

</li>

<li>

Agent runs: the model at the provider's price{ai && ai.modelMarkupPercent ? ` plus ${ai.modelMarkupPercent}%` : ", with no markup"}, plus

382

g1t's agent rate per million tokens{ai && ai.agentRateMicros > 0 ? ` (${dollars(ai.agentRateMicros)})` : ""}. AI Gateway: the

383

provider's price, free of markup while in beta.

384

</li>

385

<li>AI usage draws on prepaid AI credit first; at $0, new runs on g1t's models wait for more credit or auto-reload.</li>

386

<li>Credit from g1t comes off what you owe, the soonest-expiring first.</li>

387

<li>

388

With your own model provider, connected under{" "}

Integrations

</Link>

, the provider bills you for the model, and a run here is charged only its sandbox time.

393

</li>

394

<li>

395

Each month closes with an itemised invoice. No card is charged less than{" "}

396

{dollars(entitlements?.minChargeMicros ?? 5 * MICROS_PER_DOLLAR, 0)}; less carries over.

397

</li>

398

<li>No seats: add as many people and agents as you like.</li>

</ul>

<FileText size={14} /> Usage, by product and project

403

</Link>

404

405

<CreditCard size={14} /> Pricing and today's prices

406

</Link>

407

408

<ArrowUpRight size={14} /> How usage and billing work

</a>

</div>

</section>

</aside>

</div>

);

}

/** The workspace's month-end invoices from g1t, each kept on Stripe with its PDF. */

418

function InvoiceList({ invoices }: { invoices: WorkspaceInvoice[] }) {

419

return (

420

421

<h2 className="font-medium">Usage invoices</h2>

422

<p className="mt-1 text-sm text-muted">One when each month closes, and one each time g1t charges the card near your limit.</p>

423

424

{invoices.map((invoice) => (

{invoice.reason === "month" ? `Usage for ${invoice.period}` : `Charged near the limit, ${invoice.period}`}

429

</span>

430

<span

431

className={`rounded-full border px-2 py-0.5 text-xs ${

432

invoice.status === "paid" ? "border-success/40 text-success" : "border-danger/40 text-danger"

433

}`}

434

>

435

{invoice.status === "paid" ? "Paid" : invoice.status === "failed" ? "Payment failed" : invoice.status}

436

</span>

437

<span className="ml-auto font-mono tabular-nums">{dollars(invoice.amountMicros)}</span>

438

{invoice.hostedUrl && (

View

</a>

)}

{invoice.pdfUrl && (

PDF

</a>

)}

</div>

{invoice.lines.map((line) => (

451

452

<span>{line.description}</span>

453

<span className="font-mono tabular-nums">{dollars(line.amountMicros)}</span>

</li>

))}

</ul>

</li>

))}

</ul>

</section>

);

}