Sonnet, Give Me a Reason (RooCodeInc#1961)

* wip

* added slider for setting reasoning budget tokens

* refactor out generic slider component; improve styling; add debounce

* added setting validation

* styling and adding reasoning level

* changeset

* make change to trigger test rerun

* revert useless comment

Author: celestial-vault

.changeset/slimy-keys-add.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Added thinking tokens budget slider for Sonnet 3.7 with Anthropic

package.json

@@ -211,6 +211,11 @@
 					"type": "boolean",
 					"default": true,
 					"description": "Controls whether the MCP Marketplace is enabled."
+				},
+				"cline.modelSettings.anthropic.thinkingBudgetTokens": {
+					"type": "number",
+					"default": 0,
+					"description": "Controls the token budget for Claude's thinking capability. Set to 0 to disable thinking. When enabled, must be ≥1024 and less than the model's max token output."
 				}
 			}
 		}

src/api/providers/anthropic.ts

@@ -19,6 +19,8 @@ export class AnthropicHandler implements ApiHandler {
 
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+		let budget_tokens = this.options.thinkingBudgetTokens || 0
+		const reasoningOn = budget_tokens !== 0 ? true : false
 		const model = this.getModel()
 		let stream: AnthropicStream<Anthropic.RawMessageStreamEvent>
 		const modelId = model.id
@@ -41,8 +43,11 @@ export class AnthropicHandler implements ApiHandler {
 				stream = await this.client.messages.create(
 					{
 						model: modelId,
+						thinking: reasoningOn ? { type: "enabled", budget_tokens: budget_tokens } : undefined,
 						max_tokens: model.info.maxTokens || 8192,
-						temperature: 0,
+						// "Thinking isn’t compatible with temperature, top_p, or top_k modifications as well as forced tool use."
+						// (https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking#important-considerations-when-using-extended-thinking)
+						temperature: reasoningOn ? 1 : 0,
 						system: [
 							{
 								text: systemPrompt,
@@ -148,6 +153,20 @@ export class AnthropicHandler implements ApiHandler {
 					break
 				case "content_block_start":
 					switch (chunk.content_block.type) {
+						case "thinking":
+							yield {
+								type: "reasoning",
+								reasoning: chunk.content_block.thinking || "",
+							}
+							break
+						case "redacted_thinking":
+							// Handle redacted thinking blocks - we still mark it as reasoning
+							// but note that the content is encrypted
+							yield {
+								type: "reasoning",
+								reasoning: "[Redacted thinking block]",
+							}
+							break
 						case "text":
 							// we may receive multiple text blocks, in which case just insert a line break between them
 							if (chunk.index > 0) {
@@ -165,12 +184,22 @@ export class AnthropicHandler implements ApiHandler {
 					break
 				case "content_block_delta":
 					switch (chunk.delta.type) {
+						case "thinking_delta":
+							yield {
+								type: "reasoning",
+								reasoning: chunk.delta.thinking,
+							}
+							break
 						case "text_delta":
 							yield {
 								type: "text",
 								text: chunk.delta.text,
 							}
 							break
+						case "signature_delta":
+							// We don't need to do anything with the signature in the client
+							// It's used when sending the thinking block back to the API
+							break
 					}
 					break
 				case "content_block_stop":

src/core/webview/ClineProvider.ts

@@ -35,6 +35,7 @@ import { getNonce } from "./getNonce"
 import { getUri } from "./getUri"
 import { telemetryService } from "../../services/telemetry/TelemetryService"
 import { TelemetrySetting } from "../../shared/TelemetrySetting"
+import { validateThinkingBudget } from "../../utils/validation"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -261,6 +262,19 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					// Update state when marketplace tab setting changes
 					await this.postStateToWebview()
 				}
+				if (e && e.affectsConfiguration("cline.modelSettings.anthropic.thinkingBudgetTokens")) {
+					const config = vscode.workspace.getConfiguration("cline.modelSettings.anthropic")
+					const thinkingBudget = config.get<number>("thinkingBudgetTokens", 0)
+
+					const validatedValue = validateThinkingBudget(thinkingBudget)
+
+					// Only update if the value changed
+					if (validatedValue !== thinkingBudget) {
+						await config.update("thinkingBudgetTokens", validatedValue, true)
+					}
+
+					await this.postStateToWebview()
+				}
 			},
 			null,
 			this.disposables,
@@ -976,6 +990,15 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						}
 						break
 					}
+					case "updateThinkingBudgetTokens": {
+						if (message.number !== undefined) {
+							const validatedValue = validateThinkingBudget(message.number)
+
+							const config = vscode.workspace.getConfiguration("cline.modelSettings.anthropic")
+							await config.update("thinkingBudgetTokens", validatedValue, true)
+						}
+						break
+					}
 					case "openExtensionSettings": {
 						const settingsFilter = message.text || ""
 						await vscode.commands.executeCommand(
@@ -2042,6 +2065,10 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			.getConfiguration("cline.modelSettings.o3Mini")
 			.get("reasoningEffort", "medium")
 
+		const thinkingBudgetTokens = vscode.workspace
+			.getConfiguration("cline.modelSettings.anthropic")
+			.get("thinkingBudgetTokens", 0)
+
 		const mcpMarketplaceEnabled = vscode.workspace.getConfiguration("cline").get<boolean>("mcpMarketplace.enabled", true)
 
 		return {
@@ -2084,6 +2111,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 				openRouterModelInfo,
 				vsCodeLmModelSelector,
 				o3MiniReasoningEffort,
+				thinkingBudgetTokens,
 				liteLlmBaseUrl,
 				liteLlmModelId,
 				liteLlmApiKey,

src/shared/WebviewMessage.ts

@@ -57,6 +57,7 @@ export interface WebviewMessage {
 		| "updateMcpTimeout"
 		| "fetchOpenGraphData"
 		| "checkIsImageUrl"
+		| "updateThinkingBudgetTokens"
 	// | "relaunchChromeDebugMode"
 	text?: string
 	disabled?: boolean

src/shared/api.ts

@@ -59,6 +59,7 @@ export interface ApiHandlerOptions {
 	o3MiniReasoningEffort?: string
 	qwenApiLine?: string
 	xaiApiKey?: string
+	thinkingBudgetTokens?: number
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {

src/utils/validation.ts

@@ -0,0 +1,36 @@
+import { anthropicModels } from "../shared/api"
+
+/**
+ * Validates the thinking budget token value according to the specified rules:
+ * - If disabled (0), return as is
+ * - If enabled but less than minimum (1024), set to minimum
+ * - If greater than or equal to max tokens, set to max tokens - 1
+ * - Otherwise, return the original value
+ *
+ * @param value The thinking budget token value to validate
+ * @param maxTokens The maximum tokens for the current model
+ * @returns The validated thinking budget token value
+ */
+export function validateThinkingBudget(
+	value: number,
+	maxTokens: number = anthropicModels["claude-3-7-sonnet-20250219"].maxTokens,
+): number {
+	// If disabled (0), return as is
+	if (value === 0) {
+		return 0
+	}
+
+	// If enabled but less than minimum, set to minimum
+	if (value > 0 && value < 1024) {
+		return 1024
+	}
+
+	// If greater than or equal to max allowed tokens (80% of max tokens), cap at that value
+	const maxAllowedTokens = Math.floor(maxTokens * 0.8)
+	if (value >= maxAllowedTokens) {
+		return maxAllowedTokens
+	}
+
+	// Otherwise, return the original value
+	return value
+}