mweinbach / agent-coworker

1import { useAutoAnimate } from "@formkit/auto-animate/react";2 3import { AlertTriangleIcon, BarChart3Icon, ChevronDownIcon, ChevronRightIcon } from "lucide-react";4import { useEffect, useMemo, useState } from "react";5import { formatCost, formatTokenCount } from "../../../../../../src/session/pricing";6import { useAppStore }

"../../../app/store"

7import type { ThreadRuntime } from "../../../app/types";

8import { Badge } from "../../../components/ui/badge";

9import { Button, buttonVariants } from "../../../components/ui/button";

13 DialogDescription,

17} from "../../../components/ui/dialog";

18import { useOptionalSettingsChrome } from "../SettingsChromeContext";

20 SettingsEmptyState,

23 SettingsStatTile,

24} from "../SettingsPrimitives";

26// ── Aggregation types ────────────────────────────────────────────────

28type AggregateModelEntry = {

29 provider: string;

32 sessions: number;

33 totalPromptTokens: number;

34 totalCompletionTokens: number;

35 totalCachedPromptTokens: number;

36 totalCacheWritePromptTokens: number;

37 totalReasoningOutputTokens: number;

38 totalTokens: number;

39 estimatedCostUsd: number | null;

42type ProviderGroup = {

43 provider: string;

44 models: AggregateModelEntry[];

45 totalTokens: number;

46 totalCachedPromptTokens: number;

47 totalCacheWritePromptTokens: number;

48 totalReasoningOutputTokens: number;

49 totalTurns: number;

50 estimatedCostUsd: number | null;

53export type AggregateUsage = {

54 totalCostUsd: number | null;

55 costTrackingAvailable: boolean;

56 totalTokens: number;

57 totalPromptTokens: number;

58 totalCompletionTokens: number;

59 totalCachedPromptTokens: number;

60 totalCacheWritePromptTokens: number;

61 totalReasoningOutputTokens: number;

62 totalTurns: number;

63 totalSessions: number;

64 providers: ProviderGroup[];

67// ── Pure aggregation (exported for testing) ──────────────────────────

69export function aggregateUsageFromRuntimes(

70 runtimes: Record<string, ThreadRuntime>,

71): AggregateUsage {

72 const byKey = new Map<string, AggregateModelEntry>();

73 let totalCostUsd: number | null = null;

74 let costTrackingAvailable = false;

75 let totalTokens = 0;

76 let totalPromptTokens = 0;

77 let totalCompletionTokens = 0;

78 let totalCachedPromptTokens = 0;

79 let totalCacheWritePromptTokens = 0;

80 let totalReasoningOutputTokens = 0;

81 let totalTurns = 0;

82 let totalSessions = 0;

84 for (const runtime of Object.values(runtimes)) {

85 const usage = runtime.sessionUsage;

86 if (!usage) continue;

89 totalTurns += usage.totalTurns;

90 totalTokens += usage.totalTokens;

91 totalPromptTokens += usage.totalPromptTokens;

92 totalCompletionTokens += usage.totalCompletionTokens;

93 totalCachedPromptTokens += usage.totalCachedPromptTokens ?? 0;

94 totalCacheWritePromptTokens += usage.totalCacheWritePromptTokens ?? 0;

95 totalReasoningOutputTokens += usage.totalReasoningOutputTokens ?? 0;

97 if (usage.costTrackingAvailable) costTrackingAvailable = true;

98 if (typeof usage.estimatedTotalCostUsd === "number") {

99 totalCostUsd = (totalCostUsd ?? 0) + usage.estimatedTotalCostUsd;

102 for (const entry of usage.byModel) {

103 const key = `${entry.provider}:${entry.model}`;

104 const existing = byKey.get(key);

106 existing.turns += entry.turns;

107 existing.sessions += 1;

108 existing.totalPromptTokens += entry.totalPromptTokens;

109 existing.totalCompletionTokens += entry.totalCompletionTokens;

110 existing.totalCachedPromptTokens += entry.totalCachedPromptTokens ?? 0;

111 existing.totalCacheWritePromptTokens += entry.totalCacheWritePromptTokens ?? 0;

112 existing.totalReasoningOutputTokens += entry.totalReasoningOutputTokens ?? 0;

113 existing.totalTokens += entry.totalTokens;

114 if (typeof entry.estimatedCostUsd === "number") {

115 existing.estimatedCostUsd = (existing.estimatedCostUsd ?? 0) + entry.estimatedCostUsd;

118 byKey.set(key, {

119 provider: entry.provider,

120 model: entry.model,

121 turns: entry.turns,

123 totalPromptTokens: entry.totalPromptTokens,

124 totalCompletionTokens: entry.totalCompletionTokens,

125 totalCachedPromptTokens: entry.totalCachedPromptTokens ?? 0,

126 totalCacheWritePromptTokens: entry.totalCacheWritePromptTokens ?? 0,

127 totalReasoningOutputTokens: entry.totalReasoningOutputTokens ?? 0,

128 totalTokens: entry.totalTokens,

129 estimatedCostUsd: entry.estimatedCostUsd,

135 // Group by provider, sort providers by total cost desc, models within by cost desc

136 const providerMap = new Map<string, AggregateModelEntry[]>();

137 for (const entry of byKey.values()) {

138 const list = providerMap.get(entry.provider) ?? [];

139 list.push(entry);

140 providerMap.set(entry.provider, list);

143 const providers: ProviderGroup[] = [];

144 for (const [provider, models] of providerMap) {

145 models.sort((a, b) => (b.estimatedCostUsd ?? 0) - (a.estimatedCostUsd ?? 0));

146 let providerCost: number | null = null;

147 let providerTokens = 0;

148 let providerCachedPromptTokens = 0;

149 let providerCacheWritePromptTokens = 0;

150 let providerReasoningOutputTokens = 0;

151 let providerTurns = 0;

152 for (const m of models) {

153 providerTokens += m.totalTokens;

154 providerCachedPromptTokens += m.totalCachedPromptTokens;

155 providerCacheWritePromptTokens += m.totalCacheWritePromptTokens;

156 providerReasoningOutputTokens += m.totalReasoningOutputTokens;

157 providerTurns += m.turns;

158 if (typeof m.estimatedCostUsd === "number") {

159 providerCost = (providerCost ?? 0) + m.estimatedCostUsd;

162 providers.push({

165 totalTokens: providerTokens,

166 totalCachedPromptTokens: providerCachedPromptTokens,

167 totalCacheWritePromptTokens: providerCacheWritePromptTokens,

168 totalReasoningOutputTokens: providerReasoningOutputTokens,

169 totalTurns: providerTurns,

170 estimatedCostUsd: providerCost,

173 providers.sort((a, b) => (b.estimatedCostUsd ?? 0) - (a.estimatedCostUsd ?? 0));

177 costTrackingAvailable,

179 totalPromptTokens,

180 totalCompletionTokens,

181 totalCachedPromptTokens,

182 totalCacheWritePromptTokens,

183 totalReasoningOutputTokens,

190// ── Helpers ──────────────────────────────────────────────────────────

192function formatEstimatedCost(value: number | null, available: boolean): string {

193 if (available && value !== null) return formatCost(value);

197// ── Component ────────────────────────────────────────────────────────

199export type UsagePageProps = {

200 aggregate?: AggregateUsage | null;

201 estimateNoticeOpen?: boolean;

204export function UsagePage(props: UsagePageProps = {}) {

205 const threadRuntimeByIdFromStore = useAppStore((s) => s.threadRuntimeById);

206 const loadAllThreadUsage = useAppStore((s) => s.loadAllThreadUsage);

207 const serverState = typeof window === "undefined" ? useAppStore.getState() : null;

208 const threadRuntimeById = serverState?.threadRuntimeById ?? threadRuntimeByIdFromStore;

210 // Load usage data for all threads on mount so the aggregate view is complete

211 useEffect(() => {

212 if (props.aggregate !== undefined) return; // skip when overridden (tests)

213 void loadAllThreadUsage();

214 }, [props.aggregate, loadAllThreadUsage]);

216 const computedAggregate = useMemo(

217 () => aggregateUsageFromRuntimes(threadRuntimeById),

218 [threadRuntimeById],

220 const aggregate = props.aggregate ?? computedAggregate;

222 const [estimateNoticeOpenInternal, setEstimateNoticeOpenInternal] = useState(false);

223 const estimateNoticeOpen = props.estimateNoticeOpen ?? estimateNoticeOpenInternal;

224 const handleEstimateNoticeOpenChange =

225 props.estimateNoticeOpen === undefined ? setEstimateNoticeOpenInternal : undefined;

227 const [expandedProviders, setExpandedProviders] = useState<Record<string, boolean>>({});

228 const toggleProvider = (provider: string) => {

229 setExpandedProviders((prev) => ({ ...prev, [provider]: !prev[provider] }));

232 const [parent] = useAutoAnimate();

234 const hasUsage = aggregate && aggregate.totalSessions > 0;

236 const settingsChrome = useOptionalSettingsChrome();

237 const estimateNoticeDialog = (

238 <Dialog open={estimateNoticeOpen} onOpenChange={handleEstimateNoticeOpenChange}>

239 <DialogContent showCloseButton className="max-w-lg">

241 <DialogTitle>Usage estimates</DialogTitle>

242 <DialogDescription>

243 These numbers are estimates based on provider-reported token usage and Cowork's

244 local pricing catalog.

245 </DialogDescription>

247 <div className="space-y-3 text-sm text-muted-foreground">

249 Billing may vary. Providers can round differently, apply cached-token discounts

250 differently, or change prices independently of what is bundled in the app.

253 Be careful while using these estimates for spend decisions. Treat totals as protective

254 guidance, not exact invoices.

260 variant="secondary"

261 onClick={() => handleEstimateNoticeOpenChange?.(false)}

266 </DialogContent>

270 useEffect(() => {

271 if (!settingsChrome) return;

272 settingsChrome.setChrome({

273 headerActions: (

276 className={buttonVariants({ variant: "outline", size: "sm", className: "gap-2" })}

277 onClick={() => handleEstimateNoticeOpenChange?.(true)}

279 <AlertTriangleIcon data-icon="inline-start" />

280 How estimates work

285 settingsChrome.setChrome(null);

287 }, [settingsChrome, handleEstimateNoticeOpenChange]);

290 <SettingsPage data-usage-page="true">

291 {/* ── Overview stats ──────────────────────────────────────────── */}

292 <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">

293 <SettingsStatTile

294 label="Estimated total cost"

297 ? formatEstimatedCost(aggregate.totalCostUsd, aggregate.costTrackingAvailable)

301 hasUsage && aggregate.costTrackingAvailable

302 ? "Based on local pricing data"

304 ? "Pricing unavailable for some models"

305 : "No usage recorded yet"

308 <SettingsStatTile