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

The Spend page says what a workspace spent, where it went and the budgets that hold it, in Workspace under Money: spent at price, agents' spend and the spend limit; by day; by agent, person, channel, model, kind of work and product; budgets from the workspace down to each person, agent and task, with what happens at 100%; the costliest tasks, each with a receipt of every session at the provider's price and what was charged; and how it's priced. Everyone sees what agents spent for them, and owners and billing managers the whole workspace; each person can have a monthly budget agents keep to, and the spend pill in the top bar shows your month or the workspace's against its limit. The spend guide says how.11h ago

1

import { ArrowLeft, CornerDownRight } from "lucide-react";

2

import type { CSSProperties } from "react";

3

import { Link, data } from "react-router";

4

5

import type { Route } from "./+types/spend-receipt";

6

import { AgentAvatar } from "../../components/agent-avatar";

7

import { KindBadge, PrivateTitle, StatusChip, sessionHref } from "../../components/agents/parts";

8

import { whereLabel } from "../../components/agents/format";

9

import { TimeAgo } from "../../components/ui";

10

import { page } from "../../lib/meta";

11

import { requireUser, roleIn } from "../../lib/session.server";

12

import { loadPricing } from "../../lib/spend.server";

13

import { receiptOf, tokenCount } from "../../lib/spend";

14

import { workspaceAgents } from "../../lib/services.server";

15

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

16

17

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

18

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

19

}

20

21

/** A task's receipt: its session tree from the agents service, and the price book's terms. */

22

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

23

const viewer = requireUser(context, request);

24

const slug = params.owner.toLowerCase();

25

if (!roleIn(viewer, slug)) throw data(null, { status: 404 });

26

const [detail, pricing] = await Promise.all([workspaceAgents.session(slug, params.id, viewer).catch(() => null), loadPricing()]);

27

if (detail && !detail.ok && detail.error.code === "not_found") throw data(null, { status: 404 });

28

const receipt = detail?.ok ? receiptOf(detail.value.tree, detail.value.session.root_id) : null;

29

return { slug, receipt, pricing };

30

}

31

32

/**

33

* One task, itemized: each session of its tree (the agent's own, and every

34

* helper and subagent it brought in) with its tokens, the model at the

35

* provider's price and what it was charged; then the totals. A session in

36

* a conversation you aren't in shows what it cost, not what it was about.

37

*/

38

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

39

const { slug, receipt, pricing } = loaderData;

40

const back = (

41

42

<ArrowLeft size={14} /> Spend

43

</Link>

44

);

45

if (!receipt) {

46

return (

47

48

{back}

49

<p className="rounded-xl border border-line bg-surface px-4 py-8 text-center text-sm text-muted">This receipt couldn't be read right now. Reload in a moment.</p>

50

</div>

51

);

52

}

53

const { root } = receipt;

54

const g1tPart = Math.max(0, receipt.chargedMicros - receipt.providerMicros);

55

return (

56

57

{back}

58

59

60

61

<p className="text-xs text-muted">Receipt</p>

62

<h1 className="mt-0.5 text-xl leading-snug font-semibold tracking-tight">{root.visible ? root.title || "Untitled session" : <PrivateTitle />}</h1>

63

64

<span className="text-muted">{root.agent_name}</span>

65

{root.visible && root.asked_by_username && <span>· for @{root.asked_by_username}</span>}

66

{root.visible && <span>· {whereLabel(root)}</span>}

67

68

69

70

</p>

71

</div>

72

73

<p className="text-xs text-muted">Total</p>

74

<p className="text-2xl font-semibold tracking-tight tabular-nums">{money(receipt.chargedMicros)}</p>

75

</div>

76

</header>

77

78

79

80

<span>Session</span>

81

<span className="text-right">Tokens</span>

82

<span className="text-right">Provider price</span>

83

<span className="text-right">Charged</span>

84

</div>

85

86

{receipt.lines.map(({ session, depth, ownMicros }) => (

87

88

89

{depth > 0 && <CornerDownRight size={13} className="mt-0.5 shrink-0 text-faint" aria-hidden="true" />}

90

91

92

{session.visible ? (

93

94

{session.title || "Untitled session"}

95

</Link>

96

) : (

97

98

)}

99

100

</p>

101

102

{session.agent_name}

103

{session.model ? ` · ${session.model}` : ""} · {session.steps} {session.steps === 1 ? "step" : "steps"} · {session.tool_calls} {session.tool_calls === 1 ? "tool" : "tools"}

104

</p>

105

</div>

106

</div>

107

<span className="text-right text-sm tabular-nums sm:hidden">{money(ownMicros)}</span>

108

109

<span className="sm:hidden">Tokens </span>

110

{tokenCount(session.input_tokens)} in · {tokenCount(session.output_tokens)} out

111

</span>

112

<span className="hidden text-right text-sm text-muted tabular-nums sm:block">{money(session.cost_micros ?? 0)}</span>

113

<span className="hidden text-right text-sm tabular-nums sm:block">{money(ownMicros)}</span>

114

</li>

115

))}

116

</ul>

117

</section>

118

119

120

121

<Row

122

label={receipt.chargedMicros < receipt.providerMicros ? "Models, billed by your own provider, not here" : "Models, at the provider's price"}

123

value={money(receipt.providerMicros)}

124

/>

125

<Row

126

label={

127

pricing?.agentRateMicros != null

128

? `g1t's agent rate, ${money(pricing.agentRateMicros)} per million tokens${pricing.modelMarkupPercent > 0 ? `, and the ${pricing.modelMarkupPercent}% model markup` : ""}`

129

: "g1t's part"

130

}

131

value={money(g1tPart)}

132

/>

133

134

135

</div>

136

</dl>

137

138

{tokenCount(receipt.inputTokens)} tokens in and {tokenCount(receipt.outputTokens)} out over {receipt.steps} steps and {receipt.toolCalls} tool calls. On your

139

own model key, your provider bills the model and only the agent rate is charged here; time on your own runners is $0. What the workspace is charged after

140

included usage and credit is on Billing.

141

</p>

142

</section>

143

</div>

144

);

145

}

146

147

function Row({ label, value, strong = false }: { label: string; value: string; strong?: boolean }) {

148

return (

149

150

<dt className={strong ? "font-medium" : "text-muted"}>{label}</dt>

151

<dd className={`shrink-0 tabular-nums ${strong ? "font-semibold" : ""}`}>{value}</dd>

152

</div>

153

);

154

}