WIP: Handling context better

Author: Caleb-T-Owens

apps/desktop/src/components/BranchList.svelte

@@ -145,7 +145,8 @@
 				commitQuery.result
 			)}
 		>
-			{#snippet children([localAndRemoteCommits, upstreamOnlyCommits, branchDetails, commit])}
+			{#snippet children([localAndRemoteCommits, _upstreamOnlyCommits, branchDetails, commit])}
+				{@const upstreamOnlyCommits = []}
 				{@const firstBranch = i === 0}
 				{@const lastBranch = i === branches.length - 1}
 				{@const iconName = getIconFromCommitState(commit?.id, commit?.state)}

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

@@ -64,6 +64,7 @@
 		ContextMenu,
 		ContextMenuItem,
 		ContextMenuSection,
+		DropdownButton,
 		EmptyStatePlaceholder,
 		Modal
 	} from '@gitbutler/ui';
@@ -221,7 +222,7 @@
 			return;
 		}
 
-		if (prompt.startsWith('/')) {
+		if (prompt.startsWith('/') && !prompt.startsWith('/compact')) {
 			chipToasts.warning('Slash commands are not yet supported');
 			setPrompt('');
 			return;
@@ -374,6 +375,35 @@
 		clearContextModal?.show();
 	}
 
+	async function compactContext() {
+		if (!selectedBranch) return;
+
+		// Await analytics data before sending message
+		const analyticsProperties = await codegenAnalytics.getCodegenProperties({
+			projectId,
+			stackId: selectedBranch.stackId,
+			message: prompt,
+			thinkingLevel: selectedThinkingLevel,
+			model: selectedModel
+		});
+
+		await sendClaudeMessage(
+			{
+				projectId,
+				stackId: selectedBranch.stackId,
+				message: prompt,
+				thinkingLevel: selectedThinkingLevel,
+				model: selectedModel,
+				permissionMode: selectedPermissionMode,
+				disabledMcpServers: uiState.lane(selectedBranch.stackId).disabledMcpServers.current,
+				addDirs: laneState?.addedDirs.current || []
+			},
+			{ properties: analyticsProperties }
+		);
+	}
+
+	let selectedContextAction = $state<'clear' | 'compact'>('compact');
+
 	async function performClearContextAndRules() {
 		if (!selectedBranch) return;
 
@@ -564,6 +594,8 @@
 							</Button>
 						{/snippet}
 						{#snippet contextActions()}
+							{@const stats = usageStats(events)}
+							<Badge>Context utilization {(stats.contextUtilization * 100).toFixed(0)}%</Badge>
 							<Button
 								kind="outline"
 								icon="mcp"
@@ -575,15 +607,31 @@
 									<Badge kind="soft">{enabledMcpServers}</Badge>
 								{/snippet}
 							</Button>
-							<Button
+							<DropdownButton
 								disabled={!hasRulesToClear || formattedMessages.length === 0}
 								kind="outline"
 								style="warning"
-								icon="clear-small"
-								onclick={clearContextAndRules}
+								menuSide="top"
+								autoClose={true}
+								onclick={() =>
+									selectedContextAction === 'compact' ? compactContext() : clearContextAndRules()}
 							>
-								Clear context
-							</Button>
+								{selectedContextAction === 'compact' ? 'Compact context' : 'Clear context'}
+								{#snippet contextMenuSlot()}
+									<ContextMenuSection>
+										<ContextMenuItem
+											label="Compact context"
+											icon="clear-small"
+											onclick={() => (selectedContextAction = 'compact')}
+										/>
+										<ContextMenuItem
+											label="Clear context"
+											icon="clear-small"
+											onclick={() => (selectedContextAction = 'clear')}
+										/>
+									</ContextMenuSection>
+								{/snippet}
+							</DropdownButton>
 						{/snippet}
 						{#snippet messages()}
 							{#if currentStatus(events, isStackActive) === 'running' && lastUserMessageSent}

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

@@ -250,21 +250,24 @@ const pricing = [
 		input: 15,
 		output: 75,
 		writeCache: 18.75,
-		readCache: 1.5
+		readCache: 1.5,
+		context: 200_000
 	},
 	{
 		name: 'claude-sonnet',
 		input: 3,
 		output: 6,
 		writeCache: 3.75,
-		readCache: 0.3
+		readCache: 0.3,
+		context: 200_000
 	},
 	{
 		name: 'claude-haiku',
 		input: 0.8,
 		output: 4,
 		writeCache: 1,
-		readCache: 0.08
+		readCache: 0.08,
+		context: 200_000
 	}
 ] as const;
 
@@ -283,26 +286,46 @@ const webRequestCost = 10;
 export function usageStats(events: ClaudeMessage[]): {
 	tokens: number;
 	cost: number;
+	/** Percentage (0 to 1) of how full the context is */
+	contextUtilization: number;
 } {
 	let tokens = 0;
-	let cost = 0;
-	const usedIds = new Set();
+	let contextUtilization = 0;
+	let lastAssistantMessage;
+
 	for (let i = events.length - 1; i >= 0; i--) {
 		const event = events[i]!;
 		if (event.content.type !== 'claudeOutput') continue;
 		const message = event.content.subject;
 		if (message.type !== 'assistant') continue;
-		const usage = message.message.usage;
+		lastAssistantMessage = message;
+		break;
+	}
 
-		if (usedIds.has(message.message.id)) {
-			continue;
-		}
-		usedIds.add(message.message.id);
+	if (lastAssistantMessage) {
+		const usage = lastAssistantMessage.message.usage;
+		tokens += usage.cache_read_input_tokens ?? 0;
 		tokens += usage.input_tokens;
 		tokens += usage.output_tokens;
+		const modelPricing = findModelPricing(lastAssistantMessage.message.model);
+		if (modelPricing) {
+			contextUtilization = tokens / modelPricing.context;
+		}
+	}
 
+	let cost = 0;
+	const usedIds = new Set();
+
+	for (let i = events.length - 1; i >= 0; i--) {
+		const event = events[i]!;
+		if (event.content.type !== 'claudeOutput') continue;
+		const message = event.content.subject;
+		if (message.type !== 'assistant') continue;
+		if (usedIds.has(message.message.id)) continue;
+		usedIds.add(message.message.id);
 		const modelPricing = findModelPricing(message.message.model);
 		if (!modelPricing) continue;
+		const usage = message.message.usage;
 
 		cost += (usage.input_tokens * modelPricing.input) / 1_000_000;
 		cost += (usage.output_tokens * modelPricing.output) / 1_000_000;
@@ -311,7 +334,7 @@ export function usageStats(events: ClaudeMessage[]): {
 		cost += ((usage.server_tool_use?.web_search_requests || 0) * webRequestCost) / 1_000;
 	}
 
-	return { tokens, cost };
+	return { tokens, cost, contextUtilization };
 }
 
 function findModelPricing(name: string) {