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

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." };

106

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

107

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

108

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

109

}

110

if (intent === "person") {

111

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

112

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

113

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." };

114

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

115

}

116

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

117

}

118

119

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

120

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

121

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

122

const params = new URLSearchParams();

123

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

124

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

125

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

126

const query = params.toString();

127

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

128

}

129

130

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

131

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

132

const q = { scope, period, by };

133

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

134

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

return (

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

140

141

{scope === "workspace"

142

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

143

: "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) => (

150

<Link

151

key={key}

152

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

153

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

154

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")}

155

>

156

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

</Link>

))}

</div>

)}

{SPEND_PERIODS.map((p) => (

163

<Link

164

key={p.key}

165

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

166

preventScrollReset

167

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

168

className={cn(

169

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

170

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

)}

>

{p.short}

</Link>

))}

</nav>

</div>

</header>

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

<Suspense

fallback={

</div>

}

>

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

192

193

{scope === "workspace" ? (

<>

<Tile

label="Charged, this month"

199

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

200

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

201

>

202

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

)}

</Tile>

</>

) : (

)}

</div>

)}

</Await>

</Suspense>

{/* Spend by day. */}

{([spent, used]) => {

221

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

222

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>

</div>

</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. */}

244

<Section

245

id="savings"

246

title="Spend less, keep quality"

247

aside={

248

249

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"

284

aside={

285

286

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

</Link>

}

>

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

</Suspense>

</Section>

Agent figures count every reply and session at list price, as budgets do. What the workspace is charged, after included usage, credit and any

discount, is on{" "}

Billing

</Link>

.

</p>

</div>

);

}

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

308

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

309

}

310

311

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

312

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

313

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

314

}

315

316

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

317

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

318

const people = levels.people;

319

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

320

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

321

const month = mine?.spent_micros ?? null;

322

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. */

335

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

336

if (by === "extension") {

337

return (

338

339

<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") {

344

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

345

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

346

return (

347

348

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

</SlicePanel>

);

}

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

353

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

354

agent: {

355

slices: spent.by_agent,

356

unit: "runs",

357

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

358

link: (s) => {

359