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

import { SPEND_PERIODS, type SpendScope, agentMicros, agentSpendHref, attributionSlices, daySeries, periodLabel, readPeriod, readScope, spanFor, spentMicros, usageByDay, withoutSelf } from "../../lib/spend";

36

import { loadBreakdown, loadBudgets, loadPricing, loadUsage } from "../../lib/spend.server";

37

import { money } from "../../lib/money";

38

39

export function meta({ params, ...args }: Route.MetaArgs) {

40

return page(args, { title: `Spend · ${params.owner} · g1t` });

}

/**

* Spend: the front of the workspace's money. What was spent over a

45

* period, where it went (by agent, person, channel, model, kind of work and

46

* product), the budgets from the workspace down to one task with what

47

* happens at each, the costliest tasks with their receipts, and how it is

48

* priced. Owners and billing managers see the workspace's, or their own;

49

* everyone else sees their own: what agents did for them. Each part

50

* streams in from its own service. Definitions: lib/spend.ts.

51

*/

52

export async function loader({ params, context, request }: Route.LoaderArgs) {

53

const viewer = requireUser(context, request);

54

const slug = params.owner.toLowerCase();

55

const role = roleIn(viewer, slug);

56

if (!role) throw data(null, { status: 404 });

57

const url = new URL(request.url);

58

const mayWorkspace = managesBilling(viewer, slug);

59

const scope = readScope(url.searchParams.get("scope"), mayWorkspace);

60

const period = readPeriod(url.searchParams.get("period"));

61

const by = readSlice(url.searchParams.get("by"), scope);

62

const now = new Date();

63

64

const breakdown = loadBreakdown(viewer, slug, scope, period);

65

// The budgets are monthly: every agent's month, read once when the page is on it already.

66

const month = scope === "workspace" && period === "month" ? breakdown : loadBreakdown(viewer, slug, "workspace", "month");

67

const usage = scope === "workspace" ? loadUsage(viewer, slug, period, now) : Promise.resolve(null);

68

return {

69

slug,

70

me: viewer.username.toLowerCase(),

71

owner: role === "owner",

mayWorkspace,

scope,

period,

by,

span: spanFor(period, now),

77

breakdown,

78

usage,

79

budgets: loadBudgets(viewer, slug, month),

80

pricing: loadPricing(),

81

// Spend less, keep quality: the weekly check's suggestions.

82

recs: readOrNull(workspaceAgents.recommendations(slug, viewer)),

};

}

function readSlice(raw: string | null, scope: SpendScope): SliceKey {

87

const found = SLICES.find((s) => s.key === raw && (scope === "workspace" || !s.workspaceOnly));

88

return found?.key ?? "agent";

89

}

90

91

/** Owners set the agent budgets: every agent together, each person, a new agent, a session; and one person's own. */

92

export async function action({ params, context, request }: Route.ActionArgs) {

93

const { viewer, slug, isOwner, form } = await agentsAction(request, context, params.owner);

94

const intent = form.get("intent");

95

if (intent === "recommendation") {

96

if (!isOwner) return { ok: false as const, intent, error: "Only the workspace's owners apply suggestions." };

97

const what = form.get("do") === "apply" ? "apply" : "dismiss";

98

return answer(intent, workspaceAgents.resolveRecommendation(slug, viewer, String(form.get("id") ?? ""), what));

99

}

100

if (!isOwner) return { ok: false as const, error: "Only the workspace's owners set budgets." };

101

if (intent === "policy") {

102

const monthly = microsFromDollars(form.get("monthly"));

103

const person = microsFromDollars(form.get("person"));

104

const agent = microsFromDollars(form.get("default_agent"));

105

const session = microsFromDollars(form.get("default_session"));

106

if ([monthly, person, agent, session].some((v) => v != null && Number.isNaN(v))) return { ok: false as const, intent, error: "Write each amount in dollars, such as 250 or 2.50." };

107

const changes: Partial<AgentPolicy> = { monthly_micros: monthly, person_monthly_micros: person, default_agent_monthly_micros: agent };

108

if (session != null) changes.default_session_micros = session;

109

return answer("policy", workspaceAgents.setPolicy(slug, viewer, changes));

110

}

111

if (intent === "person") {

112

const username = String(form.get("username") ?? "").trim();

113

const amount = microsFromDollars(form.get("amount"));

114

if (amount != null && Number.isNaN(amount)) return { ok: false as const, intent, error: "Write the amount in dollars, such as 50, or 0 for no budget." };

115

return answer("person", workspaceAgents.setPersonBudget(slug, viewer, username, amount));

116

}

117

return { ok: false as const, error: "Unknown request." };

118

}

119

120

/** The page's address with some of its query changed. */

121

function hrefFor(slug: string, q: { scope: SpendScope; period: string; by: SliceKey }, change: Partial<{ scope: SpendScope; period: string; by: SliceKey }>): string {

122

const next = { ...q, ...change };

123

const params = new URLSearchParams();

124

if (next.scope === "me") params.set("scope", "me");

125

if (next.period !== "month") params.set("period", next.period);

126

if (next.by !== "agent") params.set("by", next.by);

127

const query = params.toString();

128

return `/${slug}/-/spend${query ? `?${query}` : ""}`;

129

}

130

131

export default function SpendPage({ loaderData }: Route.ComponentProps) {

132

const { slug, me, owner, mayWorkspace, scope, period, by, span, breakdown, usage, budgets, pricing, recs } = loaderData;

133

const q = { scope, period, by };

134

const href = (change: Partial<typeof q>) => hrefFor(slug, q, change);

135

const label = periodLabel(period).toLowerCase();

return (

<h1 className="text-[1.75rem] leading-tight font-semibold tracking-tight">Spend</h1>

141

142

{scope === "workspace"

143

? "What the workspace spent, where it went, and the budgets that hold it, from the workspace down to one task."

144

: "What agents spent working for you: your chats with them and the sessions you started, against your budget."}

</p>

</div>

{mayWorkspace && (

{(["workspace", "me"] as const).map((key) => (

151

<Link

152

key={key}

153

to={href({ scope: key, by: "agent" })}

154

aria-current={scope === key ? "page" : undefined}

155

className={cn("inline-flex h-7 items-center rounded-md px-3 text-[0.8125rem] transition-colors", scope === key ? "bg-raised text-fg ring-1 ring-line-strong" : "text-muted hover:text-fg")}

156

>

157

{key === "workspace" ? "Workspace" : "You"}

</Link>

))}

</Card>

)}

{SPEND_PERIODS.map((p) => (

165

<Link

166

key={p.key}

167

to={href({ period: p.key })}

168

preventScrollReset

169

aria-current={period === p.key ? "page" : undefined}

170

className={cn(

171

"inline-flex h-7 items-center rounded-md px-2.5 text-[0.8125rem] whitespace-nowrap transition-colors",

172

period === p.key ? "bg-raised text-fg ring-1 ring-line-strong" : "text-muted hover:text-fg",

)}

>

{p.short}

</Link>

))}

</nav>

</Card>

</div>

</header>

{/* The figures at the top. */}

<Suspense

fallback={

</div>

}

>

{([spent, used, levels]) => (

195

196

{scope === "workspace" ? (

<>

<Tile

label={`Agents, ${label}`}

201

value={used ? money(agentMicros(used)) : spent ? money(spent.total_micros) : "—"}

202

sub={

203

used

204

? `Every agent's replies, sessions and runs, at price${spent ? `; ${countOf(spent.by_kind)} replies and sessions` : ""}`

205

: spent

206

? `${countOf(spent.by_kind)} replies and sessions, from the agents service`

207

: "Usage couldn't be read"

}

/>

<Tile

label="Charged, this month"

212

value={levels.limit?.spentMicros != null ? money(levels.limit.spentMicros) : "—"}

213

sub={levels.limit ? limitLine(levels.limit.spentMicros ?? 0, levels.limit.spendLimitMicros ?? levels.limit.ceilingMicros) : "Billing couldn't be read"}

214

>

215

{levels.limit && (levels.limit.spendLimitMicros ?? levels.limit.ceilingMicros) != null && (

)}

</Tile>

</>

) : (

)}

</div>

)}

</Await>

</Suspense>

{/* Spend by day. */}

{([spent, used]) => {

234

const days = scope === "workspace" && used ? usageByDay(used.days) : (spent?.days ?? null);

235

return days ? <SpendBars days={daySeries(span.from, span.until, days)} /> : <p className="py-8 text-center text-sm text-muted">Spend by day couldn't be read right now.</p>;

}}

</Await>

</Suspense>

</Card>

</Section>

{/* Where it went. */}

<Suspense

fallback={

</SlicePanel>

}

>

<Await resolve={Promise.all([breakdown, usage])}>{([spent, used]) => <Slices by={by} spent={spent} used={used} slug={slug} me={me} scope={scope} />}</Await>

</Suspense>

</Section>

{/* Spend less, keep quality. */}

257

<Section

258

id="savings"

259

title="Spend less, keep quality"

260

aside={

261

262

Set an agent's effort on its Spend tab <ArrowRight size={11} />

</Link>

}

>

<Await resolve={recs}>{(value) => <Savings recs={value} owner={owner} action={`/${slug}/-/spend`} />}</Await>

</Suspense>

</Section>

{/* Budgets. */}

<Suspense

fallback={

</SlicePanel>

}

>

<Await resolve={budgets}>{(levels) => <BudgetLadder slug={slug} budgets={levels} owner={owner} me={me} action={`/${slug}/-/spend`} workspaceFigures={mayWorkspace} />}</Await>

</Suspense>

</Section>

{/* Receipts. */}

<Await resolve={breakdown}>{(spent) => (spent ? <TaskList slug={slug} sessions={spent.top_sessions} /> : <p className="px-4 py-6 text-center text-sm text-muted">Tasks couldn't be read right now.</p>)}</Await>

</Suspense>

</SlicePanel>

</Section>

{/* Pricing. */}

<Section

id="pricing"

title="How it's priced"

297

aside={

298

299

Every meter on Usage <ArrowRight size={11} />

</Link>

}

>

<Await resolve={pricing}>{(value) => <PricingCard pricing={value} />}</Await>

</Suspense>

</Section>

Every figure is the ledger's, at price: Spent is every product, Agents is the agent product within it, and the agent budgets count replies and

310

sessions at the same price. What the workspace is charged, after included usage, credit and any discount, is on{" "}

Billing

</Link>

.

</p>

</div>

);

}

function countOf(slices: SpendSlice[]): string {

321

return slices.reduce((n, s) => n + s.count, 0).toLocaleString("en-US");

322

}

323

324

function limitLine(spent: number, limit: number | null): string {

325

if (limit == null) return "No spend limit set";

326

return `Of a ${money(limit)} spend limit · ${Math.round((spent / Math.max(1, limit)) * 100)}%`;

327

}

328

329

/** Your own figures: what agents spent for you, and your budget. */

330

function MyTiles({ spent, levels, me, label }: { spent: AgentSpendBreakdown | null; levels: Awaited<Route.ComponentProps["loaderData"]["budgets"]>; me: string; label: string }) {

331

const people = levels.people;

332

const mine = people?.people.find((p) => p.username === me) ?? null;

333

const budget = mine ? mine.monthly_micros : (people?.default_micros ?? null);

334

const month = mine?.spent_micros ?? null;

335

const replies = spent?.by_kind.find((s) => s.key === "reply");

return (

<>

{budget != null && month != null && <Meter spent={month} cap={budget} label="Spent of your budget" size="sm" className="mt-2.5" />}

</Tile>

</>

);

}

/** The breakdown for the slice chosen. */

348

function Slices({ by, spent, used, slug, me, scope }: { by: SliceKey; spent: AgentSpendBreakdown | null; used: UsageReport | null; slug: string; me: string; scope: SpendScope }) {

349

if (by === "extension") {

350

return (

351

352

<ComingNote title="Spend by extension">Once extensions can be installed, what each one runs and what agents do in it will show here, priced like everything else.</ComingNote>

</SlicePanel>

);

}

if (by === "product") {

357

if (!used) return <Unavailable what="Usage" />;

358

const slices: SpendSlice[] = used.products.map((p) => ({ key: p.key, label: p.label, micros: p.micros, count: 0 }));

359

return (

360

361

<SliceList slices={slices} empty="Nothing used in this period." href={() => `/${slug}/-/usage`} />

</SlicePanel>

);

}

// The workspace's agents and people come from the ledger that is

366

// charged: every agent's replies, sessions and runs on repositories, by

367

// the agent that did them and by who asked. Your own view, and the

368

// channels, models and kinds of work, are the agents service's.

369

const attributed = scope === "workspace" ? attributionSlices(used) : null;

370

if (attributed && (by === "agent" || by === "person")) {

const chosen =

by === "agent"

? {

slices: attributed.agent,

375

foot: "From the ledger, at price: each agent's replies, sessions, runs on repositories and sandbox time. @g1t is g1t's own work on your repositories.",

376

link: (s: SpendSlice) => agentSpendHref(slug, s),

377

}

378

: { slices: attributed.person, foot: "Who asked, from the ledger. Routines, agent-to-agent work and runs from before attribution have no asker.", link: undefined };

return (

</SlicePanel>

);

}

if (!spent) return <Unavailable what="The agents service" />;

386

const pick: Record<Exclude<SliceKey, "extension" | "product">, { slices: SpendSlice[]; unit: string; foot?: ReactNode; link?: (s: SpendSlice) => string | null }> = {

387

agent: {

388

slices: spent.by_agent,

389

unit: "runs",

390

foot: "A session's helpers and subagents count on the agent that started it.",

391

link: (s) => {

392