Add calculations for claude code costs

Author: Caleb-T-Owens

apps/desktop/package.json

@@ -23,7 +23,7 @@
 		"cy:ci": "cypress run"
 	},
 	"devDependencies": {
-		"@anthropic-ai/sdk": "^0.27.3",
+		"@anthropic-ai/sdk": "^0.59.0",
 		"@gitbutler/shared": "workspace:*",
 		"@gitbutler/svelte-comment-injector": "workspace:*",
 		"@gitbutler/ui": "workspace:*",

apps/desktop/src/components/codegen/CodegenPage.svelte

@@ -6,7 +6,7 @@
 	import CodegenSidebar from '$components/codegen/CodegenSidebar.svelte';
 	import CodegenSidebarEntry from '$components/codegen/CodegenSidebarEntry.svelte';
 	import { CLAUDE_CODE_SERVICE } from '$lib/codegen/claude';
-	import { formatMessages } from '$lib/codegen/messages';
+	import { formatMessages, usageStats } from '$lib/codegen/messages';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { combineResults } from '$lib/state/helpers';
 	import { inject } from '@gitbutler/shared/context';
@@ -135,18 +135,26 @@
 {#snippet sidebarContentEntry(projectId: string, stackId: string, head: string)}
 	{@const branch = stackService.branchByName(projectId, stackId, head)}
 	{@const commits = stackService.commits(projectId, stackId, head)}
-	<ReduxResult result={combineResults(branch.current, commits.current)} {projectId} {stackId}>
-		{#snippet children([branch, commits], { projectId: _projectId, stackId })}
-			{stackId}
+	{@const events = claudeCodeService.messages({
+		projectId,
+		stackId: selectedBranch?.stackId || ''
+	})}
+	<ReduxResult
+		result={combineResults(branch.current, commits.current, events.current)}
+		{projectId}
+		{stackId}
+	>
+		{#snippet children([branch, commits, events], { projectId: _projectId, stackId })}
+			{@const usage = usageStats(events)}
 			<CodegenSidebarEntry
 				onclick={() => {
 					selectedBranch = { stackId, head: branch.name };
 				}}
 				selected={selectedBranch?.stackId === stackId && selectedBranch?.head === branch.name}
 				branchName={branch.name}
 				status="vibes"
-				tokensUsed={69}
-				cost={4.2}
+				tokensUsed={usage.tokens}
+				cost={usage.cost}
 				commitCount={commits.length}
 				commits={commitsList}
 			/>

apps/desktop/src/components/codegen/CodegenSidebarEntry.svelte

@@ -39,7 +39,7 @@
 				<div class="flex gap-8 items-center">
 					<p class="text-12">{tokensUsed}</p>
 					<div class="iddy-biddy-line"></div>
-					<p class="text-12">{cost.toFixed(2)}</p>
+					<p class="text-12">${cost.toFixed(2)}</p>
 				</div>
 			</div>
 		{/snippet}

apps/desktop/src/lib/codegen/messages.ts

@@ -94,3 +94,78 @@ export function formatMessages(events: ClaudeMessage[]): Message[] {
 
 	return out;
 }
+
+/** Anthropic prices, per 1M tokens */
+const pricing = [
+	{
+		name: 'claude-opus',
+		input: 15,
+		output: 75,
+		writeCache: 18.75,
+		readCache: 1.5
+	},
+	{
+		name: 'claude-sonnet',
+		input: 3,
+		output: 6,
+		writeCache: 3.75,
+		readCache: 0.3
+	},
+	{
+		name: 'claude-haiku',
+		input: 0.8,
+		output: 4,
+		writeCache: 1,
+		readCache: 0.08
+	}
+] as const;
+
+/** Cost of anthropic making web request calls per 1K calls */
+const webRequestCost = 10;
+
+/**
+ * Calculates the usage stats from the message log.
+ *
+ * This makes use of the "assistant" messages rather than the "result" ones
+ * because the "assistant" ones come in more frequently.
+ *
+ * For some reason the final quantity of tokens ends up slightly greater than if
+ * you were using the result, however, the calculated cost ends up being the
+ * same as the cost provided in the result based messages.
+ *
+ * I can only assume that there is a mistake in the token counting code on CC's
+ * side.
+ */
+export function usageStats(events: ClaudeMessage[]): { tokens: number; cost: number } {
+	let tokens = 0;
+	let cost = 0;
+	for (const event of events) {
+		if (event.content.type !== 'claudeOutput') continue;
+		const message = event.content.subject;
+		if (message.type !== 'assistant') continue;
+
+		const usage = message.message.usage;
+		tokens += usage.input_tokens;
+		tokens += usage.output_tokens;
+
+		const modelPricing = findModelPricing(message.message.model);
+		if (!modelPricing) continue;
+
+		cost += (usage.input_tokens * modelPricing.input) / 1_000_000;
+		cost += (usage.output_tokens * modelPricing.output) / 1_000_000;
+		cost += ((usage.cache_creation_input_tokens || 0) * modelPricing.writeCache) / 1_000_000;
+		cost += ((usage.cache_read_input_tokens || 0) * modelPricing.readCache) / 1_000_000;
+		cost += ((usage.server_tool_use?.web_search_requests || 0) * webRequestCost) / 1_000;
+	}
+
+	return { tokens, cost };
+}
+
+function findModelPricing(name: string) {
+	for (const p of pricing) {
+		// We do a starts with so we don't have to deal with all the versioning
+		if (name.startsWith(p.name)) {
+			return p;
+		}
+	}
+}

apps/desktop/src/lib/codegen/types.ts

@@ -1,4 +1,4 @@
-import type { Message, MessageParam } from '@anthropic-ai/sdk/resources/index.mjs';
+import type { Message, MessageParam, Usage } from '@anthropic-ai/sdk/resources/index.mjs';
 
 /**
  * Represents different types of events that can occur during Claude code interactions
@@ -43,6 +43,7 @@ export type ClaudeCodeMessage =
 			num_turns: number;
 			session_id: string;
 			total_cost_usd: number;
+			usage: Usage;
 	  }
 
 	/** Emitted as the first message at the start of a conversation */