Resolved merge conflicts

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Roo Code Changelog
 
+## [3.7.12]
+
+- Expand max tokens of thinking models to 128k, and max thinking budget to over 100k (thanks @monotykamary!)
+- Fix issue where keyboard mode switcher wasn't updating API profile (thanks @aheizi!)
+- Use the count_tokens API in the Anthropic provider for more accurate context window management
+- Default middle-out compression to on for OpenRouter
+- Exclude MCP instructions from the prompt if the mode doesn't support MCP
+- Add a checkbox to disable the browser tool
+- Show a warning if checkpoints are taking too long to load
+- Update the warning text for the VS LM API
+- Correctly populate the default OpenRouter model on the welcome screen
+
+## [3.7.11]
+
+- Don't honor custom max tokens for non thinking models
+- Include custom modes in mode switching keyboard shortcut
+- Support read-only modes that can run commands
+
+## [3.7.10]
+
+- Add Gemini models on Vertex AI (thanks @ashktn!)
+- Keyboard shortcuts to switch modes (thanks @aheizi!)
+- Add support for Mermaid diagrams (thanks Cline!)
+
 ## [3.7.9]
 
 - Delete task confirmation enhancements

README.md

@@ -119,6 +119,12 @@ Make Roo Code work your way with:
     ```bash
     npm run install:all
     ```
+
+if that fails, try:
+`bash
+    npm run install:ci
+    `
+
 3. **Build** the extension:
     ```bash
     npm run build

package-lock.json

@@ -1,17 +1,18 @@
 {
 	"name": "roo-cline",
-	"version": "3.7.9",
+	"version": "3.7.12",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "roo-cline",
-			"version": "3.7.9",
+			"version": "3.7.12",
 			"dependencies": {
 				"@anthropic-ai/bedrock-sdk": "^0.10.2",
 				"@anthropic-ai/sdk": "^0.37.0",
 				"@anthropic-ai/vertex-sdk": "^0.7.0",
 				"@aws-sdk/client-bedrock-runtime": "^3.706.0",
+				"@google-cloud/vertexai": "^1.9.3",
 				"@google/generative-ai": "^0.18.0",
 				"@mistralai/mistralai": "^1.3.6",
 				"@modelcontextprotocol/sdk": "^1.0.1",
@@ -3238,6 +3239,18 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@google-cloud/vertexai": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/@google-cloud/vertexai/-/vertexai-1.9.3.tgz",
+			"integrity": "sha512-35o5tIEMLW3JeFJOaaMNR2e5sq+6rpnhrF97PuAxeOm0GlqVTESKhkGj7a5B5mmJSSSU3hUfIhcQCRRsw4Ipzg==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"google-auth-library": "^9.1.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/@google/generative-ai": {
 			"version": "0.18.0",
 			"resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.18.0.tgz",

package.json

@@ -3,7 +3,7 @@
 	"displayName": "Roo Code (prev. Roo Cline)",
 	"description": "A whole dev team of AI agents in your editor.",
 	"publisher": "RooVeterinaryInc",
-	"version": "3.7.9",
+	"version": "3.7.12",
 	"icon": "assets/icons/rocket.png",
 	"galleryBanner": {
 		"color": "#617A91",
@@ -128,31 +128,6 @@
 				"command": "roo-cline.addToContext",
 				"title": "Roo Code: Add To Context",
 				"category": "Roo Code"
-			},
-			{
-				"command": "roo-cline.terminalAddToContext",
-				"title": "Roo Code: Add Terminal Content to Context",
-				"category": "Terminal"
-			},
-			{
-				"command": "roo-cline.terminalFixCommand",
-				"title": "Roo Code: Fix This Command",
-				"category": "Terminal"
-			},
-			{
-				"command": "roo-cline.terminalExplainCommand",
-				"title": "Roo Code: Explain This Command",
-				"category": "Terminal"
-			},
-			{
-				"command": "roo-cline.terminalFixCommandInCurrentTask",
-				"title": "Roo Code: Fix This Command (Current Task)",
-				"category": "Terminal"
-			},
-			{
-				"command": "roo-cline.terminalExplainCommandInCurrentTask",
-				"title": "Roo Code: Explain This Command (Current Task)",
-				"category": "Terminal"
 			}
 		],
 		"menus": {
@@ -178,28 +153,6 @@
 					"group": "Roo Code@4"
 				}
 			],
-			"terminal/context": [
-				{
-					"command": "roo-cline.terminalAddToContext",
-					"group": "Roo Code@1"
-				},
-				{
-					"command": "roo-cline.terminalFixCommand",
-					"group": "Roo Code@2"
-				},
-				{
-					"command": "roo-cline.terminalExplainCommand",
-					"group": "Roo Code@3"
-				},
-				{
-					"command": "roo-cline.terminalFixCommandInCurrentTask",
-					"group": "Roo Code@5"
-				},
-				{
-					"command": "roo-cline.terminalExplainCommandInCurrentTask",
-					"group": "Roo Code@6"
-				}
-			],
 			"view/title": [
 				{
 					"command": "roo-cline.plusButtonClicked",
@@ -313,6 +266,7 @@
 		"@anthropic-ai/vertex-sdk": "^0.7.0",
 		"@aws-sdk/client-bedrock-runtime": "^3.706.0",
 		"@google/generative-ai": "^0.18.0",
+		"@google-cloud/vertexai": "^1.9.3",
 		"@mistralai/mistralai": "^1.3.6",
 		"@modelcontextprotocol/sdk": "^1.0.1",
 		"@types/clone-deep": "^4.0.4",

src/activate/index.ts

@@ -1,4 +1,3 @@
 export { handleUri } from "./handleUri"
 export { registerCommands } from "./registerCommands"
 export { registerCodeActions } from "./registerCodeActions"
-export { registerTerminalActions } from "./registerTerminalActions"

src/activate/registerTerminalActions.ts

@@ -1,81 +0,0 @@
-import * as vscode from "vscode"
-import { ClineProvider } from "../core/webview/ClineProvider"
-import { TerminalManager } from "../integrations/terminal/TerminalManager"
-
-const TERMINAL_COMMAND_IDS = {
-	ADD_TO_CONTEXT: "roo-cline.terminalAddToContext",
-	FIX: "roo-cline.terminalFixCommand",
-	FIX_IN_CURRENT_TASK: "roo-cline.terminalFixCommandInCurrentTask",
-	EXPLAIN: "roo-cline.terminalExplainCommand",
-	EXPLAIN_IN_CURRENT_TASK: "roo-cline.terminalExplainCommandInCurrentTask",
-} as const
-
-export const registerTerminalActions = (context: vscode.ExtensionContext) => {
-	const terminalManager = new TerminalManager()
-
-	registerTerminalAction(context, terminalManager, TERMINAL_COMMAND_IDS.ADD_TO_CONTEXT, "TERMINAL_ADD_TO_CONTEXT")
-
-	registerTerminalActionPair(
-		context,
-		terminalManager,
-		TERMINAL_COMMAND_IDS.FIX,
-		"TERMINAL_FIX",
-		"What would you like Roo to fix?",
-	)
-
-	registerTerminalActionPair(
-		context,
-		terminalManager,
-		TERMINAL_COMMAND_IDS.EXPLAIN,
-		"TERMINAL_EXPLAIN",
-		"What would you like Roo to explain?",
-	)
-}
-
-const registerTerminalAction = (
-	context: vscode.ExtensionContext,
-	terminalManager: TerminalManager,
-	command: string,
-	promptType: "TERMINAL_ADD_TO_CONTEXT" | "TERMINAL_FIX" | "TERMINAL_EXPLAIN",
-	inputPrompt?: string,
-) => {
-	context.subscriptions.push(
-		vscode.commands.registerCommand(command, async (args: any) => {
-			let content = args.selection
-			if (!content || content === "") {
-				content = await terminalManager.getTerminalContents(promptType === "TERMINAL_ADD_TO_CONTEXT" ? -1 : 1)
-			}
-
-			if (!content) {
-				vscode.window.showWarningMessage("No terminal content selected")
-				return
-			}
-
-			const params: Record<string, any> = {
-				terminalContent: content,
-			}
-
-			if (inputPrompt) {
-				params.userInput =
-					(await vscode.window.showInputBox({
-						prompt: inputPrompt,
-					})) ?? ""
-			}
-
-			await ClineProvider.handleTerminalAction(command, promptType, params)
-		}),
-	)
-}
-
-const registerTerminalActionPair = (
-	context: vscode.ExtensionContext,
-	terminalManager: TerminalManager,
-	baseCommand: string,
-	promptType: "TERMINAL_ADD_TO_CONTEXT" | "TERMINAL_FIX" | "TERMINAL_EXPLAIN",
-	inputPrompt?: string,
-) => {
-	// Register new task version
-	registerTerminalAction(context, terminalManager, baseCommand, promptType, inputPrompt)
-	// Register current task version
-	registerTerminalAction(context, terminalManager, `${baseCommand}InCurrentTask`, promptType, inputPrompt)
-}

src/api/__tests__/index.test.ts

@@ -0,0 +1,257 @@
+// npx jest src/api/__tests__/index.test.ts
+
+import { BetaThinkingConfigParam } from "@anthropic-ai/sdk/resources/beta/messages/index.mjs"
+
+import { getModelParams } from "../index"
+import { ANTHROPIC_DEFAULT_MAX_TOKENS } from "../providers/constants"
+
+describe("getModelParams", () => {
+	it("should return default values when no custom values are provided", () => {
+		const options = {}
+		const model = {
+			id: "test-model",
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+			defaultMaxTokens: 1000,
+			defaultTemperature: 0.5,
+		})
+
+		expect(result).toEqual({
+			maxTokens: 1000,
+			thinking: undefined,
+			temperature: 0.5,
+		})
+	})
+
+	it("should use custom temperature from options when provided", () => {
+		const options = { modelTemperature: 0.7 }
+		const model = {
+			id: "test-model",
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+			defaultMaxTokens: 1000,
+			defaultTemperature: 0.5,
+		})
+
+		expect(result).toEqual({
+			maxTokens: 1000,
+			thinking: undefined,
+			temperature: 0.7,
+		})
+	})
+
+	it("should use model maxTokens when available", () => {
+		const options = {}
+		const model = {
+			id: "test-model",
+			maxTokens: 2000,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+			defaultMaxTokens: 1000,
+		})
+
+		expect(result).toEqual({
+			maxTokens: 2000,
+			thinking: undefined,
+			temperature: 0,
+		})
+	})
+
+	it("should handle thinking models correctly", () => {
+		const options = {}
+		const model = {
+			id: "test-model",
+			thinking: true,
+			maxTokens: 2000,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+		})
+
+		const expectedThinking: BetaThinkingConfigParam = {
+			type: "enabled",
+			budget_tokens: 1600, // 80% of 2000
+		}
+
+		expect(result).toEqual({
+			maxTokens: 2000,
+			thinking: expectedThinking,
+			temperature: 1.0, // Thinking models require temperature 1.0.
+		})
+	})
+
+	it("should honor customMaxTokens for thinking models", () => {
+		const options = { modelMaxTokens: 3000 }
+		const model = {
+			id: "test-model",
+			thinking: true,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+			defaultMaxTokens: 2000,
+		})
+
+		const expectedThinking: BetaThinkingConfigParam = {
+			type: "enabled",
+			budget_tokens: 2400, // 80% of 3000
+		}
+
+		expect(result).toEqual({
+			maxTokens: 3000,
+			thinking: expectedThinking,
+			temperature: 1.0,
+		})
+	})
+
+	it("should honor customMaxThinkingTokens for thinking models", () => {
+		const options = { modelMaxThinkingTokens: 1500 }
+		const model = {
+			id: "test-model",
+			thinking: true,
+			maxTokens: 4000,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+		})
+
+		const expectedThinking: BetaThinkingConfigParam = {
+			type: "enabled",
+			budget_tokens: 1500, // Using the custom value
+		}
+
+		expect(result).toEqual({
+			maxTokens: 4000,
+			thinking: expectedThinking,
+			temperature: 1.0,
+		})
+	})
+
+	it("should not honor customMaxThinkingTokens for non-thinking models", () => {
+		const options = { modelMaxThinkingTokens: 1500 }
+		const model = {
+			id: "test-model",
+			maxTokens: 4000,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+			// Note: model.thinking is not set (so it's falsey).
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+		})
+
+		expect(result).toEqual({
+			maxTokens: 4000,
+			thinking: undefined, // Should remain undefined despite customMaxThinkingTokens being set.
+			temperature: 0, // Using default temperature.
+		})
+	})
+
+	it("should clamp thinking budget to at least 1024 tokens", () => {
+		const options = { modelMaxThinkingTokens: 500 }
+		const model = {
+			id: "test-model",
+			thinking: true,
+			maxTokens: 2000,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+		})
+
+		const expectedThinking: BetaThinkingConfigParam = {
+			type: "enabled",
+			budget_tokens: 1024, // Minimum is 1024
+		}
+
+		expect(result).toEqual({
+			maxTokens: 2000,
+			thinking: expectedThinking,
+			temperature: 1.0,
+		})
+	})
+
+	it("should clamp thinking budget to at most 80% of max tokens", () => {
+		const options = { modelMaxThinkingTokens: 5000 }
+		const model = {
+			id: "test-model",
+			thinking: true,
+			maxTokens: 4000,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+		})
+
+		const expectedThinking: BetaThinkingConfigParam = {
+			type: "enabled",
+			budget_tokens: 3200, // 80% of 4000
+		}
+
+		expect(result).toEqual({
+			maxTokens: 4000,
+			thinking: expectedThinking,
+			temperature: 1.0,
+		})
+	})
+
+	it("should use ANTHROPIC_DEFAULT_MAX_TOKENS when no maxTokens is provided for thinking models", () => {
+		const options = {}
+		const model = {
+			id: "test-model",
+			thinking: true,
+			contextWindow: 16000,
+			supportsPromptCache: true,
+		}
+
+		const result = getModelParams({
+			options,
+			model,
+		})
+
+		const expectedThinking: BetaThinkingConfigParam = {
+			type: "enabled",
+			budget_tokens: Math.floor(ANTHROPIC_DEFAULT_MAX_TOKENS * 0.8),
+		}
+
+		expect(result).toEqual({
+			maxTokens: undefined,
+			thinking: expectedThinking,
+			temperature: 1.0,
+		})
+	})
+})

src/api/index.ts

@@ -1,6 +1,9 @@
 import { Anthropic } from "@anthropic-ai/sdk"
+import { BetaThinkingConfigParam } from "@anthropic-ai/sdk/resources/beta/messages/index.mjs"
+
+import { ApiConfiguration, ModelInfo, ApiHandlerOptions } from "../shared/api"
+import { ANTHROPIC_DEFAULT_MAX_TOKENS } from "./providers/constants"
 import { GlamaHandler } from "./providers/glama"
-import { ApiConfiguration, ModelInfo } from "../shared/api"
 import { AnthropicHandler } from "./providers/anthropic"
 import { AwsBedrockHandler } from "./providers/bedrock"
 import { OpenRouterHandler } from "./providers/openrouter"
@@ -24,6 +27,16 @@ export interface SingleCompletionHandler {
 export interface ApiHandler {
 	createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream
 	getModel(): { id: string; info: ModelInfo }
+
+	/**
+	 * Counts tokens for content blocks
+	 * All providers extend BaseProvider which provides a default tiktoken implementation,
+	 * but they can override this to use their native token counting endpoints
+	 *
+	 * @param content The content to count tokens for
+	 * @returns A promise resolving to the token count
+	 */
+	countTokens(content: Array<Anthropic.Messages.ContentBlockParam>): Promise<number>
 }
 
 export function buildApiHandler(configuration: ApiConfiguration): ApiHandler {
@@ -63,3 +76,41 @@ export function buildApiHandler(configuration: ApiConfiguration): ApiHandler {
 			return new AnthropicHandler(options)
 	}
 }
+
+export function getModelParams({
+	options,
+	model,
+	defaultMaxTokens,
+	defaultTemperature = 0,
+}: {
+	options: ApiHandlerOptions
+	model: ModelInfo
+	defaultMaxTokens?: number
+	defaultTemperature?: number
+}) {
+	const {
+		modelMaxTokens: customMaxTokens,
+		modelMaxThinkingTokens: customMaxThinkingTokens,
+		modelTemperature: customTemperature,
+	} = options
+
+	let maxTokens = model.maxTokens ?? defaultMaxTokens
+	let thinking: BetaThinkingConfigParam | undefined = undefined
+	let temperature = customTemperature ?? defaultTemperature
+
+	if (model.thinking) {
+		// Only honor `customMaxTokens` for thinking models.
+		maxTokens = customMaxTokens ?? maxTokens
+
+		// Clamp the thinking budget to be at most 80% of max tokens and at
+		// least 1024 tokens.
+		const maxBudgetTokens = Math.floor((maxTokens || ANTHROPIC_DEFAULT_MAX_TOKENS) * 0.8)
+		const budgetTokens = Math.max(Math.min(customMaxThinkingTokens ?? maxBudgetTokens, maxBudgetTokens), 1024)
+		thinking = { type: "enabled", budget_tokens: budgetTokens }
+
+		// Anthropic "Thinking" models require a temperature of 1.0.
+		temperature = 1.0
+	}
+
+	return { maxTokens, thinking, temperature }
+}

src/api/providers/__tests__/anthropic.test.ts

@@ -194,5 +194,33 @@ describe("AnthropicHandler", () => {
 			expect(model.info.supportsImages).toBe(true)
 			expect(model.info.supportsPromptCache).toBe(true)
 		})
+
+		it("honors custom maxTokens for thinking models", () => {
+			const handler = new AnthropicHandler({
+				apiKey: "test-api-key",
+				apiModelId: "claude-3-7-sonnet-20250219:thinking",
+				modelMaxTokens: 32_768,
+				modelMaxThinkingTokens: 16_384,
+			})
+
+			const result = handler.getModel()
+			expect(result.maxTokens).toBe(32_768)
+			expect(result.thinking).toEqual({ type: "enabled", budget_tokens: 16_384 })
+			expect(result.temperature).toBe(1.0)
+		})
+
+		it("does not honor custom maxTokens for non-thinking models", () => {
+			const handler = new AnthropicHandler({
+				apiKey: "test-api-key",
+				apiModelId: "claude-3-7-sonnet-20250219",
+				modelMaxTokens: 32_768,
+				modelMaxThinkingTokens: 16_384,
+			})
+
+			const result = handler.getModel()
+			expect(result.maxTokens).toBe(16_384)
+			expect(result.thinking).toBeUndefined()
+			expect(result.temperature).toBe(0)
+		})
 	})
 })

src/api/providers/__tests__/openrouter.test.ts

@@ -1,29 +1,30 @@
 // npx jest src/api/providers/__tests__/openrouter.test.ts
 
-import { OpenRouterHandler } from "../openrouter"
-import { ApiHandlerOptions, ModelInfo } from "../../../shared/api"
-import OpenAI from "openai"
 import axios from "axios"
 import { Anthropic } from "@anthropic-ai/sdk"
+import OpenAI from "openai"
+
+import { OpenRouterHandler } from "../openrouter"
+import { ApiHandlerOptions, ModelInfo } from "../../../shared/api"
 
 // Mock dependencies
 jest.mock("openai")
 jest.mock("axios")
 jest.mock("delay", () => jest.fn(() => Promise.resolve()))
 
+const mockOpenRouterModelInfo: ModelInfo = {
+	maxTokens: 1000,
+	contextWindow: 2000,
+	supportsPromptCache: true,
+	inputPrice: 0.01,
+	outputPrice: 0.02,
+}
+
 describe("OpenRouterHandler", () => {
 	const mockOptions: ApiHandlerOptions = {
 		openRouterApiKey: "test-key",
 		openRouterModelId: "test-model",
-		openRouterModelInfo: {
-			name: "Test Model",
-			description: "Test Description",
-			maxTokens: 1000,
-			contextWindow: 2000,
-			supportsPromptCache: true,
-			inputPrice: 0.01,
-			outputPrice: 0.02,
-		} as ModelInfo,
+		openRouterModelInfo: mockOpenRouterModelInfo,
 	}
 
 	beforeEach(() => {
@@ -50,6 +51,10 @@ describe("OpenRouterHandler", () => {
 		expect(result).toEqual({
 			id: mockOptions.openRouterModelId,
 			info: mockOptions.openRouterModelInfo,
+			maxTokens: 1000,
+			temperature: 0,
+			thinking: undefined,
+			topP: undefined,
 		})
 	})
 
@@ -61,6 +66,38 @@ describe("OpenRouterHandler", () => {
 		expect(result.info.supportsPromptCache).toBe(true)
 	})
 
+	test("getModel honors custom maxTokens for thinking models", () => {
+		const handler = new OpenRouterHandler({
+			openRouterApiKey: "test-key",
+			openRouterModelId: "test-model",
+			openRouterModelInfo: {
+				...mockOpenRouterModelInfo,
+				maxTokens: 128_000,
+				thinking: true,
+			},
+			modelMaxTokens: 32_768,
+			modelMaxThinkingTokens: 16_384,
+		})
+
+		const result = handler.getModel()
+		expect(result.maxTokens).toBe(32_768)
+		expect(result.thinking).toEqual({ type: "enabled", budget_tokens: 16_384 })
+		expect(result.temperature).toBe(1.0)
+	})
+
+	test("getModel does not honor custom maxTokens for non-thinking models", () => {
+		const handler = new OpenRouterHandler({
+			...mockOptions,
+			modelMaxTokens: 32_768,
+			modelMaxThinkingTokens: 16_384,
+		})
+
+		const result = handler.getModel()
+		expect(result.maxTokens).toBe(1000)
+		expect(result.thinking).toBeUndefined()
+		expect(result.temperature).toBe(0)
+	})
+
 	test("createMessage generates correct stream chunks", async () => {
 		const handler = new OpenRouterHandler(mockOptions)
 		const mockStream = {
@@ -242,15 +279,7 @@ describe("OpenRouterHandler", () => {
 
 	test("completePrompt returns correct response", async () => {
 		const handler = new OpenRouterHandler(mockOptions)
-		const mockResponse = {
-			choices: [
-				{
-					message: {
-						content: "test completion",
-					},
-				},
-			],
-		}
+		const mockResponse = { choices: [{ message: { content: "test completion" } }] }
 
 		const mockCreate = jest.fn().mockResolvedValue(mockResponse)
 		;(OpenAI as jest.MockedClass<typeof OpenAI>).prototype.chat = {
@@ -260,10 +289,13 @@ describe("OpenRouterHandler", () => {
 		const result = await handler.completePrompt("test prompt")
 
 		expect(result).toBe("test completion")
+
 		expect(mockCreate).toHaveBeenCalledWith({
 			model: mockOptions.openRouterModelId,
-			messages: [{ role: "user", content: "test prompt" }],
+			max_tokens: 1000,
+			thinking: undefined,
 			temperature: 0,
+			messages: [{ role: "user", content: "test prompt" }],
 			stream: false,
 		})
 	})
@@ -292,8 +324,6 @@ describe("OpenRouterHandler", () => {
 			completions: { create: mockCreate },
 		} as any
 
-		await expect(handler.completePrompt("test prompt")).rejects.toThrow(
-			"OpenRouter completion error: Unexpected error",
-		)
+		await expect(handler.completePrompt("test prompt")).rejects.toThrow("Unexpected error")
 	})
 })

src/api/providers/__tests__/vertex.test.ts

@@ -6,6 +6,7 @@ import { BetaThinkingConfigParam } from "@anthropic-ai/sdk/resources/beta"
 
 import { VertexHandler } from "../vertex"
 import { ApiStreamChunk } from "../../transform/stream"
+import { VertexAI } from "@google-cloud/vertexai"
 
 // Mock Vertex SDK
 jest.mock("@anthropic-ai/vertex-sdk", () => ({
@@ -49,24 +50,100 @@ jest.mock("@anthropic-ai/vertex-sdk", () => ({
 	})),
 }))
 
-describe("VertexHandler", () => {
-	let handler: VertexHandler
+// Mock Vertex Gemini SDK
+jest.mock("@google-cloud/vertexai", () => {
+	const mockGenerateContentStream = jest.fn().mockImplementation(() => {
+		return {
+			stream: {
+				async *[Symbol.asyncIterator]() {
+					yield {
+						candidates: [
+							{
+								content: {
+									parts: [{ text: "Test Gemini response" }],
+								},
+							},
+						],
+					}
+				},
+			},
+			response: {
+				usageMetadata: {
+					promptTokenCount: 5,
+					candidatesTokenCount: 10,
+				},
+			},
+		}
+	})
 
-	beforeEach(() => {
-		handler = new VertexHandler({
-			apiModelId: "claude-3-5-sonnet-v2@20241022",
-			vertexProjectId: "test-project",
-			vertexRegion: "us-central1",
-		})
+	const mockGenerateContent = jest.fn().mockResolvedValue({
+		response: {
+			candidates: [
+				{
+					content: {
+						parts: [{ text: "Test Gemini response" }],
+					},
+				},
+			],
+		},
 	})
 
+	const mockGenerativeModel = jest.fn().mockImplementation(() => {
+		return {
+			generateContentStream: mockGenerateContentStream,
+			generateContent: mockGenerateContent,
+		}
+	})
+
+	return {
+		VertexAI: jest.fn().mockImplementation(() => {
+			return {
+				getGenerativeModel: mockGenerativeModel,
+			}
+		}),
+		GenerativeModel: mockGenerativeModel,
+	}
+})
+
+describe("VertexHandler", () => {
+	let handler: VertexHandler
+
 	describe("constructor", () => {
-		it("should initialize with provided config", () => {
+		it("should initialize with provided config for Claude", () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			expect(AnthropicVertex).toHaveBeenCalledWith({
 				projectId: "test-project",
 				region: "us-central1",
 			})
 		})
+
+		it("should initialize with provided config for Gemini", () => {
+			handler = new VertexHandler({
+				apiModelId: "gemini-1.5-pro-001",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
+			expect(VertexAI).toHaveBeenCalledWith({
+				project: "test-project",
+				location: "us-central1",
+			})
+		})
+
+		it("should throw error for invalid model", () => {
+			expect(() => {
+				new VertexHandler({
+					apiModelId: "invalid-model",
+					vertexProjectId: "test-project",
+					vertexRegion: "us-central1",
+				})
+			}).toThrow("Unknown model ID: invalid-model")
+		})
 	})
 
 	describe("createMessage", () => {
@@ -83,7 +160,13 @@ describe("VertexHandler", () => {
 
 		const systemPrompt = "You are a helpful assistant"
 
-		it("should handle streaming responses correctly", async () => {
+		it("should handle streaming responses correctly for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockStream = [
 				{
 					type: "message_start",
@@ -127,7 +210,7 @@ describe("VertexHandler", () => {
 			}
 
 			const mockCreate = jest.fn().mockResolvedValue(asyncIterator)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, mockMessages)
 			const chunks: ApiStreamChunk[] = []
@@ -187,7 +270,58 @@ describe("VertexHandler", () => {
 			})
 		})
 
-		it("should handle multiple content blocks with line breaks", async () => {
+		it("should handle streaming responses correctly for Gemini", async () => {
+			const mockGemini = require("@google-cloud/vertexai")
+			const mockGenerateContentStream = mockGemini.VertexAI().getGenerativeModel().generateContentStream
+			handler = new VertexHandler({
+				apiModelId: "gemini-1.5-pro-001",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
+			const stream = handler.createMessage(systemPrompt, mockMessages)
+			const chunks: ApiStreamChunk[] = []
+
+			for await (const chunk of stream) {
+				chunks.push(chunk)
+			}
+
+			expect(chunks.length).toBe(2)
+			expect(chunks[0]).toEqual({
+				type: "text",
+				text: "Test Gemini response",
+			})
+			expect(chunks[1]).toEqual({
+				type: "usage",
+				inputTokens: 5,
+				outputTokens: 10,
+			})
+
+			expect(mockGenerateContentStream).toHaveBeenCalledWith({
+				contents: [
+					{
+						role: "user",
+						parts: [{ text: "Hello" }],
+					},
+					{
+						role: "model",
+						parts: [{ text: "Hi there!" }],
+					},
+				],
+				generationConfig: {
+					maxOutputTokens: 16384,
+					temperature: 0,
+				},
+			})
+		})
+
+		it("should handle multiple content blocks with line breaks for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockStream = [
 				{
 					type: "content_block_start",
@@ -216,7 +350,7 @@ describe("VertexHandler", () => {
 			}
 
 			const mockCreate = jest.fn().mockResolvedValue(asyncIterator)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, mockMessages)
 			const chunks: ApiStreamChunk[] = []
@@ -240,10 +374,16 @@ describe("VertexHandler", () => {
 			})
 		})
 
-		it("should handle API errors", async () => {
+		it("should handle API errors for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockError = new Error("Vertex API error")
 			const mockCreate = jest.fn().mockRejectedValue(mockError)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, mockMessages)
 
@@ -254,7 +394,13 @@ describe("VertexHandler", () => {
 			}).rejects.toThrow("Vertex API error")
 		})
 
-		it("should handle prompt caching for supported models", async () => {
+		it("should handle prompt caching for supported models for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockStream = [
 				{
 					type: "message_start",
@@ -299,7 +445,7 @@ describe("VertexHandler", () => {
 			}
 
 			const mockCreate = jest.fn().mockResolvedValue(asyncIterator)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, [
 				{
@@ -383,7 +529,13 @@ describe("VertexHandler", () => {
 			)
 		})
 
-		it("should handle cache-related usage metrics", async () => {
+		it("should handle cache-related usage metrics for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockStream = [
 				{
 					type: "message_start",
@@ -415,7 +567,7 @@ describe("VertexHandler", () => {
 			}
 
 			const mockCreate = jest.fn().mockResolvedValue(asyncIterator)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, mockMessages)
 			const chunks: ApiStreamChunk[] = []
@@ -442,7 +594,13 @@ describe("VertexHandler", () => {
 
 		const systemPrompt = "You are a helpful assistant"
 
-		it("should handle thinking content blocks and deltas", async () => {
+		it("should handle thinking content blocks and deltas for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockStream = [
 				{
 					type: "message_start",
@@ -488,7 +646,7 @@ describe("VertexHandler", () => {
 			}
 
 			const mockCreate = jest.fn().mockResolvedValue(asyncIterator)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, mockMessages)
 			const chunks: ApiStreamChunk[] = []
@@ -510,7 +668,13 @@ describe("VertexHandler", () => {
 			expect(textChunks[1].text).toBe("Here's my answer:")
 		})
 
-		it("should handle multiple thinking blocks with line breaks", async () => {
+		it("should handle multiple thinking blocks with line breaks for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockStream = [
 				{
 					type: "content_block_start",
@@ -539,7 +703,7 @@ describe("VertexHandler", () => {
 			}
 
 			const mockCreate = jest.fn().mockResolvedValue(asyncIterator)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const stream = handler.createMessage(systemPrompt, mockMessages)
 			const chunks: ApiStreamChunk[] = []
@@ -565,10 +729,16 @@ describe("VertexHandler", () => {
 	})
 
 	describe("completePrompt", () => {
-		it("should complete prompt successfully", async () => {
+		it("should complete prompt successfully for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const result = await handler.completePrompt("Test prompt")
 			expect(result).toBe("Test response")
-			expect(handler["client"].messages.create).toHaveBeenCalledWith({
+			expect(handler["anthropicClient"].messages.create).toHaveBeenCalledWith({
 				model: "claude-3-5-sonnet-v2@20241022",
 				max_tokens: 8192,
 				temperature: 0,
@@ -583,31 +753,109 @@ describe("VertexHandler", () => {
 			})
 		})
 
-		it("should handle API errors", async () => {
+		it("should complete prompt successfully for Gemini", async () => {
+			const mockGemini = require("@google-cloud/vertexai")
+			const mockGenerateContent = mockGemini.VertexAI().getGenerativeModel().generateContent
+
+			handler = new VertexHandler({
+				apiModelId: "gemini-1.5-pro-001",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
+			const result = await handler.completePrompt("Test prompt")
+			expect(result).toBe("Test Gemini response")
+			expect(mockGenerateContent).toHaveBeenCalled()
+			expect(mockGenerateContent).toHaveBeenCalledWith({
+				contents: [{ role: "user", parts: [{ text: "Test prompt" }] }],
+				generationConfig: {
+					temperature: 0,
+				},
+			})
+		})
+
+		it("should handle API errors for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockError = new Error("Vertex API error")
 			const mockCreate = jest.fn().mockRejectedValue(mockError)
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
+
+			await expect(handler.completePrompt("Test prompt")).rejects.toThrow(
+				"Vertex completion error: Vertex API error",
+			)
+		})
+
+		it("should handle API errors for Gemini", async () => {
+			const mockGemini = require("@google-cloud/vertexai")
+			const mockGenerateContent = mockGemini.VertexAI().getGenerativeModel().generateContent
+			mockGenerateContent.mockRejectedValue(new Error("Vertex API error"))
+			handler = new VertexHandler({
+				apiModelId: "gemini-1.5-pro-001",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
 
 			await expect(handler.completePrompt("Test prompt")).rejects.toThrow(
 				"Vertex completion error: Vertex API error",
 			)
 		})
 
-		it("should handle non-text content", async () => {
+		it("should handle non-text content for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockCreate = jest.fn().mockResolvedValue({
 				content: [{ type: "image" }],
 			})
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
 
 			const result = await handler.completePrompt("Test prompt")
 			expect(result).toBe("")
 		})
 
-		it("should handle empty response", async () => {
+		it("should handle empty response for Claude", async () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const mockCreate = jest.fn().mockResolvedValue({
 				content: [{ type: "text", text: "" }],
 			})
-			;(handler["client"].messages as any).create = mockCreate
+			;(handler["anthropicClient"].messages as any).create = mockCreate
+
+			const result = await handler.completePrompt("Test prompt")
+			expect(result).toBe("")
+		})
+
+		it("should handle empty response for Gemini", async () => {
+			const mockGemini = require("@google-cloud/vertexai")
+			const mockGenerateContent = mockGemini.VertexAI().getGenerativeModel().generateContent
+			mockGenerateContent.mockResolvedValue({
+				response: {
+					candidates: [
+						{
+							content: {
+								parts: [{ text: "" }],
+							},
+						},
+					],
+				},
+			})
+			handler = new VertexHandler({
+				apiModelId: "gemini-1.5-pro-001",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
 
 			const result = await handler.completePrompt("Test prompt")
 			expect(result).toBe("")
@@ -615,7 +863,13 @@ describe("VertexHandler", () => {
 	})
 
 	describe("getModel", () => {
-		it("should return correct model info", () => {
+		it("should return correct model info for Claude", () => {
+			handler = new VertexHandler({
+				apiModelId: "claude-3-5-sonnet-v2@20241022",
+				vertexProjectId: "test-project",
+				vertexRegion: "us-central1",
+			})
+
 			const modelInfo = handler.getModel()
 			expect(modelInfo.id).toBe("claude-3-5-sonnet-v2@20241022")
 			expect(modelInfo.info).toBeDefined()
@@ -623,14 +877,46 @@ describe("VertexHandler", () => {
 			expect(modelInfo.info.contextWindow).toBe(200_000)
 		})
 
-		it("should return default model if invalid model specified", () => {
-			const invalidHandler = new VertexHandler({
-				apiModelId: "invalid-model",
+		it("should return correct model info for Gemini", () => {
+			handler = new VertexHandler({
+				apiModelId: "gemini-2.0-flash-001",
 				vertexProjectId: "test-project",
 				vertexRegion: "us-central1",
 			})
-			const modelInfo = invalidHandler.getModel()
-			expect(modelInfo.id).toBe("claude-3-7-sonnet@20250219") // Default model
+
+			const modelInfo = handler.getModel()
+			expect(modelInfo.id).toBe("gemini-2.0-flash-001")
+			expect(modelInfo.info).toBeDefined()
+			expect(modelInfo.info.maxTokens).toBe(8192)
+			expect(modelInfo.info.contextWindow).toBe(1048576)
+		})
+
+		it("honors custom maxTokens for thinking models", () => {
+			const handler = new VertexHandler({
+				apiKey: "test-api-key",
+				apiModelId: "claude-3-7-sonnet@20250219:thinking",
+				modelMaxTokens: 32_768,
+				modelMaxThinkingTokens: 16_384,
+			})
+
+			const result = handler.getModel()
+			expect(result.maxTokens).toBe(32_768)
+			expect(result.thinking).toEqual({ type: "enabled", budget_tokens: 16_384 })
+			expect(result.temperature).toBe(1.0)
+		})
+
+		it("does not honor custom maxTokens for non-thinking models", () => {
+			const handler = new VertexHandler({
+				apiKey: "test-api-key",
+				apiModelId: "claude-3-7-sonnet@20250219",
+				modelMaxTokens: 32_768,
+				modelMaxThinkingTokens: 16_384,
+			})
+
+			const result = handler.getModel()
+			expect(result.maxTokens).toBe(16_384)
+			expect(result.thinking).toBeUndefined()
+			expect(result.temperature).toBe(0)
 		})
 	})
 
@@ -724,7 +1010,7 @@ describe("VertexHandler", () => {
 					},
 				}
 			})
-			;(thinkingHandler["client"].messages as any).create = mockCreate
+			;(thinkingHandler["anthropicClient"].messages as any).create = mockCreate
 
 			await thinkingHandler
 				.createMessage("You are a helpful assistant", [{ role: "user", content: "Hello" }])

src/api/providers/anthropic.ts

@@ -1,7 +1,6 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import { Stream as AnthropicStream } from "@anthropic-ai/sdk/streaming"
 import { CacheControlEphemeral } from "@anthropic-ai/sdk/resources"
-import { BetaThinkingConfigParam } from "@anthropic-ai/sdk/resources/beta"
 import {
 	anthropicDefaultModelId,
 	AnthropicModelId,
@@ -9,18 +8,18 @@ import {
 	ApiHandlerOptions,
 	ModelInfo,
 } from "../../shared/api"
-import { ApiHandler, SingleCompletionHandler } from "../index"
 import { ApiStream } from "../transform/stream"
+import { BaseProvider } from "./base-provider"
+import { ANTHROPIC_DEFAULT_MAX_TOKENS } from "./constants"
+import { SingleCompletionHandler, getModelParams } from "../index"
 
-const ANTHROPIC_DEFAULT_TEMPERATURE = 0
-
-export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
+export class AnthropicHandler extends BaseProvider implements SingleCompletionHandler {
 	private options: ApiHandlerOptions
 	private client: Anthropic
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
-
 		this.client = new Anthropic({
 			apiKey: this.options.apiKey,
 			baseURL: this.options.anthropicBaseUrl || undefined,
@@ -30,7 +29,7 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		let stream: AnthropicStream<Anthropic.Messages.RawMessageStreamEvent>
 		const cacheControl: CacheControlEphemeral = { type: "ephemeral" }
-		let { id: modelId, temperature, maxTokens, thinking } = this.getModel()
+		let { id: modelId, maxTokens, thinking, temperature, virtualId } = this.getModel()
 
 		switch (modelId) {
 			case "claude-3-7-sonnet-20250219":
@@ -53,7 +52,7 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 				stream = await this.client.messages.create(
 					{
 						model: modelId,
-						max_tokens: maxTokens,
+						max_tokens: maxTokens ?? ANTHROPIC_DEFAULT_MAX_TOKENS,
 						temperature,
 						thinking,
 						// Setting cache breakpoint for system prompt so new tasks can reuse it.
@@ -83,13 +82,24 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 						// prompt caching: https://x.com/alexalbert__/status/1823751995901272068
 						// https://github.com/anthropics/anthropic-sdk-typescript?tab=readme-ov-file#default-headers
 						// https://github.com/anthropics/anthropic-sdk-typescript/commit/c920b77fc67bd839bfeb6716ceab9d7c9bbe7393
+
+						const betas = []
+
+						// Check for the thinking-128k variant first
+						if (virtualId === "claude-3-7-sonnet-20250219:thinking") {
+							betas.push("output-128k-2025-02-19")
+						}
+
+						// Then check for models that support prompt caching
 						switch (modelId) {
+							case "claude-3-7-sonnet-20250219":
 							case "claude-3-5-sonnet-20241022":
 							case "claude-3-5-haiku-20241022":
 							case "claude-3-opus-20240229":
 							case "claude-3-haiku-20240307":
+								betas.push("prompt-caching-2024-07-31")
 								return {
-									headers: { "anthropic-beta": "prompt-caching-2024-07-31" },
+									headers: { "anthropic-beta": betas.join(",") },
 								}
 							default:
 								return undefined
@@ -101,7 +111,7 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 			default: {
 				stream = (await this.client.messages.create({
 					model: modelId,
-					max_tokens: maxTokens,
+					max_tokens: maxTokens ?? ANTHROPIC_DEFAULT_MAX_TOKENS,
 					temperature,
 					system: [{ text: systemPrompt, type: "text" }],
 					messages,
@@ -182,55 +192,35 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 
 	getModel() {
 		const modelId = this.options.apiModelId
-		let temperature = this.options.modelTemperature ?? ANTHROPIC_DEFAULT_TEMPERATURE
-		let thinking: BetaThinkingConfigParam | undefined = undefined
-
-		if (modelId && modelId in anthropicModels) {
-			let id = modelId as AnthropicModelId
-			const info: ModelInfo = anthropicModels[id]
-
-			// The `:thinking` variant is a virtual identifier for the
-			// `claude-3-7-sonnet-20250219` model with a thinking budget.
-			// We can handle this more elegantly in the future.
-			if (id === "claude-3-7-sonnet-20250219:thinking") {
-				id = "claude-3-7-sonnet-20250219"
-			}
-
-			const maxTokens = this.options.modelMaxTokens || info.maxTokens || 8192
-
-			if (info.thinking) {
-				// Anthropic "Thinking" models require a temperature of 1.0.
-				temperature = 1.0
-
-				// Clamp the thinking budget to be at most 80% of max tokens and at
-				// least 1024 tokens.
-				const maxBudgetTokens = Math.floor(maxTokens * 0.8)
-				const budgetTokens = Math.max(
-					Math.min(this.options.modelMaxThinkingTokens ?? maxBudgetTokens, maxBudgetTokens),
-					1024,
-				)
+		let id = modelId && modelId in anthropicModels ? (modelId as AnthropicModelId) : anthropicDefaultModelId
+		const info: ModelInfo = anthropicModels[id]
 
-				thinking = { type: "enabled", budget_tokens: budgetTokens }
-			}
+		// Track the original model ID for special variant handling
+		const virtualId = id
 
-			return { id, info, temperature, maxTokens, thinking }
+		// The `:thinking` variant is a virtual identifier for the
+		// `claude-3-7-sonnet-20250219` model with a thinking budget.
+		// We can handle this more elegantly in the future.
+		if (id === "claude-3-7-sonnet-20250219:thinking") {
+			id = "claude-3-7-sonnet-20250219"
 		}
 
-		const id = anthropicDefaultModelId
-		const info: ModelInfo = anthropicModels[id]
-		const maxTokens = this.options.modelMaxTokens || info.maxTokens || 8192
-
-		return { id, info, temperature, maxTokens, thinking }
+		return {
+			id,
+			info,
+			virtualId, // Include the original ID to use for header selection
+			...getModelParams({ options: this.options, model: info, defaultMaxTokens: ANTHROPIC_DEFAULT_MAX_TOKENS }),
+		}
 	}
 
 	async completePrompt(prompt: string) {
-		let { id: modelId, temperature, maxTokens, thinking } = this.getModel()
+		let { id: modelId, maxTokens, thinking, temperature } = this.getModel()
 
 		const message = await this.client.messages.create({
 			model: modelId,
-			max_tokens: maxTokens,
-			temperature,
+			max_tokens: maxTokens ?? ANTHROPIC_DEFAULT_MAX_TOKENS,
 			thinking,
+			temperature,
 			messages: [{ role: "user", content: prompt }],
 			stream: false,
 		})
@@ -238,4 +228,35 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 		const content = message.content.find(({ type }) => type === "text")
 		return content?.type === "text" ? content.text : ""
 	}
+
+	/**
+	 * Counts tokens for the given content using Anthropic's API
+	 *
+	 * @param content The content blocks to count tokens for
+	 * @returns A promise resolving to the token count
+	 */
+	override async countTokens(content: Array<Anthropic.Messages.ContentBlockParam>): Promise<number> {
+		try {
+			// Use the current model
+			const actualModelId = this.getModel().id
+
+			const response = await this.client.messages.countTokens({
+				model: actualModelId,
+				messages: [
+					{
+						role: "user",
+						content: content,
+					},
+				],
+			})
+
+			return response.input_tokens
+		} catch (error) {
+			// Log error but fallback to tiktoken estimation
+			console.warn("Anthropic token counting failed, using fallback", error)
+
+			// Use the base provider's implementation as fallback
+			return super.countTokens(content)
+		}
+	}
 }

src/api/providers/base-provider.ts

@@ -0,0 +1,64 @@
+import { Anthropic } from "@anthropic-ai/sdk"
+import { ApiHandler } from ".."
+import { ModelInfo } from "../../shared/api"
+import { ApiStream } from "../transform/stream"
+import { Tiktoken } from "js-tiktoken/lite"
+import o200kBase from "js-tiktoken/ranks/o200k_base"
+
+// Reuse the fudge factor used in the original code
+const TOKEN_FUDGE_FACTOR = 1.5
+
+/**
+ * Base class for API providers that implements common functionality
+ */
+export abstract class BaseProvider implements ApiHandler {
+	// Cache the Tiktoken encoder instance since it's stateless
+	private encoder: Tiktoken | null = null
+	abstract createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream
+	abstract getModel(): { id: string; info: ModelInfo }
+
+	/**
+	 * Default token counting implementation using tiktoken
+	 * Providers can override this to use their native token counting endpoints
+	 *
+	 * Uses a cached Tiktoken encoder instance for performance since it's stateless.
+	 * The encoder is created lazily on first use and reused for subsequent calls.
+	 *
+	 * @param content The content to count tokens for
+	 * @returns A promise resolving to the token count
+	 */
+	async countTokens(content: Array<Anthropic.Messages.ContentBlockParam>): Promise<number> {
+		if (!content || content.length === 0) return 0
+
+		let totalTokens = 0
+
+		// Lazily create and cache the encoder if it doesn't exist
+		if (!this.encoder) {
+			this.encoder = new Tiktoken(o200kBase)
+		}
+
+		// Process each content block using the cached encoder
+		for (const block of content) {
+			if (block.type === "text") {
+				// Use tiktoken for text token counting
+				const text = block.text || ""
+				if (text.length > 0) {
+					const tokens = this.encoder.encode(text)
+					totalTokens += tokens.length
+				}
+			} else if (block.type === "image") {
+				// For images, calculate based on data size
+				const imageSource = block.source
+				if (imageSource && typeof imageSource === "object" && "data" in imageSource) {
+					const base64Data = imageSource.data as string
+					totalTokens += Math.ceil(Math.sqrt(base64Data.length))
+				} else {
+					totalTokens += 300 // Conservative estimate for unknown images
+				}
+			}
+		}
+
+		// Add a fudge factor to account for the fact that tiktoken is not always accurate
+		return Math.ceil(totalTokens * TOKEN_FUDGE_FACTOR)
+	}
+}

src/api/providers/bedrock.ts

@@ -6,10 +6,11 @@ import {
 } from "@aws-sdk/client-bedrock-runtime"
 import { fromIni } from "@aws-sdk/credential-providers"
 import { Anthropic } from "@anthropic-ai/sdk"
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import { ApiHandlerOptions, BedrockModelId, ModelInfo, bedrockDefaultModelId, bedrockModels } from "../../shared/api"
 import { ApiStream } from "../transform/stream"
 import { convertToBedrockConverseMessages } from "../transform/bedrock-converse-format"
+import { BaseProvider } from "./base-provider"
 
 const BEDROCK_DEFAULT_TEMPERATURE = 0.3
 
@@ -46,11 +47,12 @@ export interface StreamEvent {
 	}
 }
 
-export class AwsBedrockHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class AwsBedrockHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: BedrockRuntimeClient
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 
 		const clientConfig: BedrockRuntimeClientConfig = {
@@ -74,7 +76,7 @@ export class AwsBedrockHandler implements ApiHandler, SingleCompletionHandler {
 		this.client = new BedrockRuntimeClient(clientConfig)
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const modelConfig = this.getModel()
 
 		// Handle cross-region inference
@@ -205,7 +207,7 @@ export class AwsBedrockHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): { id: BedrockModelId | string; info: ModelInfo } {
+	override getModel(): { id: BedrockModelId | string; info: ModelInfo } {
 		const modelId = this.options.apiModelId
 		if (modelId) {
 			// For tests, allow any model ID

src/api/providers/constants.ts

@@ -0,0 +1,3 @@
+export const ANTHROPIC_DEFAULT_MAX_TOKENS = 8192
+
+export const DEEP_SEEK_DEFAULT_TEMPERATURE = 0.6

src/api/providers/gemini.ts

@@ -1,22 +1,24 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import { GoogleGenerativeAI } from "@google/generative-ai"
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import { ApiHandlerOptions, geminiDefaultModelId, GeminiModelId, geminiModels, ModelInfo } from "../../shared/api"
 import { convertAnthropicMessageToGemini } from "../transform/gemini-format"
 import { ApiStream } from "../transform/stream"
+import { BaseProvider } from "./base-provider"
 
 const GEMINI_DEFAULT_TEMPERATURE = 0
 
-export class GeminiHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class GeminiHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: GoogleGenerativeAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		this.client = new GoogleGenerativeAI(options.geminiApiKey ?? "not-provided")
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const model = this.client.getGenerativeModel({
 			model: this.getModel().id,
 			systemInstruction: systemPrompt,
@@ -44,7 +46,7 @@ export class GeminiHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): { id: GeminiModelId; info: ModelInfo } {
+	override getModel(): { id: GeminiModelId; info: ModelInfo } {
 		const modelId = this.options.apiModelId
 		if (modelId && modelId in geminiModels) {
 			const id = modelId as GeminiModelId

src/api/providers/glama.ts

@@ -6,22 +6,39 @@ import { ApiHandlerOptions, ModelInfo, glamaDefaultModelId, glamaDefaultModelInf
 import { parseApiPrice } from "../../utils/cost"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream } from "../transform/stream"
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
+import { BaseProvider } from "./base-provider"
 
 const GLAMA_DEFAULT_TEMPERATURE = 0
 
-export class GlamaHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class GlamaHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		const baseURL = "https://glama.ai/api/gateway/openai/v1"
 		const apiKey = this.options.glamaApiKey ?? "not-provided"
 		this.client = new OpenAI({ baseURL, apiKey })
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	private supportsTemperature(): boolean {
+		return !this.getModel().id.startsWith("openai/o3-mini")
+	}
+
+	override getModel(): { id: string; info: ModelInfo } {
+		const modelId = this.options.glamaModelId
+		const modelInfo = this.options.glamaModelInfo
+
+		if (modelId && modelInfo) {
+			return { id: modelId, info: modelInfo }
+		}
+
+		return { id: glamaDefaultModelId, info: glamaDefaultModelInfo }
+	}
+
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		// Convert Anthropic messages to OpenAI format
 		const openAiMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [
 			{ role: "system", content: systemPrompt },
@@ -152,21 +169,6 @@ export class GlamaHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	private supportsTemperature(): boolean {
-		return !this.getModel().id.startsWith("openai/o3-mini")
-	}
-
-	getModel(): { id: string; info: ModelInfo } {
-		const modelId = this.options.glamaModelId
-		const modelInfo = this.options.glamaModelInfo
-
-		if (modelId && modelInfo) {
-			return { id: modelId, info: modelInfo }
-		}
-
-		return { id: glamaDefaultModelId, info: glamaDefaultModelInfo }
-	}
-
 	async completePrompt(prompt: string): Promise<string> {
 		try {
 			const requestOptions: OpenAI.Chat.Completions.ChatCompletionCreateParamsNonStreaming = {

src/api/providers/lmstudio.ts

@@ -2,18 +2,20 @@ import { Anthropic } from "@anthropic-ai/sdk"
 import OpenAI from "openai"
 import axios from "axios"
 
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import { ApiHandlerOptions, ModelInfo, openAiModelInfoSaneDefaults } from "../../shared/api"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream } from "../transform/stream"
+import { BaseProvider } from "./base-provider"
 
 const LMSTUDIO_DEFAULT_TEMPERATURE = 0
 
-export class LmStudioHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class LmStudioHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		this.client = new OpenAI({
 			baseURL: (this.options.lmStudioBaseUrl || "http://localhost:1234") + "/v1",
@@ -21,20 +23,31 @@ export class LmStudioHandler implements ApiHandler, SingleCompletionHandler {
 		})
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const openAiMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [
 			{ role: "system", content: systemPrompt },
 			...convertToOpenAiMessages(messages),
 		]
 
 		try {
-			const stream = await this.client.chat.completions.create({
+			// Create params object with optional draft model
+			const params: any = {
 				model: this.getModel().id,
 				messages: openAiMessages,
 				temperature: this.options.modelTemperature ?? LMSTUDIO_DEFAULT_TEMPERATURE,
 				stream: true,
-			})
-			for await (const chunk of stream) {
+			}
+
+			// Add draft model if speculative decoding is enabled and a draft model is specified
+			if (this.options.lmStudioSpeculativeDecodingEnabled && this.options.lmStudioDraftModelId) {
+				params.draft_model = this.options.lmStudioDraftModelId
+			}
+
+			const results = await this.client.chat.completions.create(params)
+
+			// Stream handling
+			// @ts-ignore
+			for await (const chunk of results) {
 				const delta = chunk.choices[0]?.delta
 				if (delta?.content) {
 					yield {
@@ -51,7 +64,7 @@ export class LmStudioHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): { id: string; info: ModelInfo } {
+	override getModel(): { id: string; info: ModelInfo } {
 		return {
 			id: this.options.lmStudioModelId || "",
 			info: openAiModelInfoSaneDefaults,
@@ -60,12 +73,20 @@ export class LmStudioHandler implements ApiHandler, SingleCompletionHandler {
 
 	async completePrompt(prompt: string): Promise<string> {
 		try {
-			const response = await this.client.chat.completions.create({
+			// Create params object with optional draft model
+			const params: any = {
 				model: this.getModel().id,
 				messages: [{ role: "user", content: prompt }],
 				temperature: this.options.modelTemperature ?? LMSTUDIO_DEFAULT_TEMPERATURE,
 				stream: false,
-			})
+			}
+
+			// Add draft model if speculative decoding is enabled and a draft model is specified
+			if (this.options.lmStudioSpeculativeDecodingEnabled && this.options.lmStudioDraftModelId) {
+				params.draft_model = this.options.lmStudioDraftModelId
+			}
+
+			const response = await this.client.chat.completions.create(params)
 			return response.choices[0]?.message.content || ""
 		} catch (error) {
 			throw new Error(

src/api/providers/mistral.ts

@@ -1,6 +1,6 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import { Mistral } from "@mistralai/mistralai"
-import { ApiHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import {
 	ApiHandlerOptions,
 	mistralDefaultModelId,
@@ -13,14 +13,16 @@ import {
 } from "../../shared/api"
 import { convertToMistralMessages } from "../transform/mistral-format"
 import { ApiStream } from "../transform/stream"
+import { BaseProvider } from "./base-provider"
 
 const MISTRAL_DEFAULT_TEMPERATURE = 0
 
-export class MistralHandler implements ApiHandler {
-	private options: ApiHandlerOptions
+export class MistralHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: Mistral
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		if (!options.mistralApiKey) {
 			throw new Error("Mistral API key is required")
 		}
@@ -48,7 +50,7 @@ export class MistralHandler implements ApiHandler {
 		return "https://api.mistral.ai"
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const response = await this.client.chat.stream({
 			model: this.options.apiModelId || mistralDefaultModelId,
 			messages: [{ role: "system", content: systemPrompt }, ...convertToMistralMessages(messages)],
@@ -81,7 +83,7 @@ export class MistralHandler implements ApiHandler {
 		}
 	}
 
-	getModel(): { id: MistralModelId; info: ModelInfo } {
+	override getModel(): { id: MistralModelId; info: ModelInfo } {
 		const modelId = this.options.apiModelId
 		if (modelId && modelId in mistralModels) {
 			const id = modelId as MistralModelId

src/api/providers/ollama.ts

@@ -2,21 +2,21 @@ import { Anthropic } from "@anthropic-ai/sdk"
 import OpenAI from "openai"
 import axios from "axios"
 
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import { ApiHandlerOptions, ModelInfo, openAiModelInfoSaneDefaults } from "../../shared/api"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { convertToR1Format } from "../transform/r1-format"
 import { ApiStream } from "../transform/stream"
-import { DEEP_SEEK_DEFAULT_TEMPERATURE } from "./openai"
+import { DEEP_SEEK_DEFAULT_TEMPERATURE } from "./constants"
 import { XmlMatcher } from "../../utils/xml-matcher"
+import { BaseProvider } from "./base-provider"
 
-const OLLAMA_DEFAULT_TEMPERATURE = 0
-
-export class OllamaHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class OllamaHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		this.client = new OpenAI({
 			baseURL: (this.options.ollamaBaseUrl || "http://localhost:11434") + "/v1",
@@ -24,7 +24,7 @@ export class OllamaHandler implements ApiHandler, SingleCompletionHandler {
 		})
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const modelId = this.getModel().id
 		const useR1Format = modelId.toLowerCase().includes("deepseek-r1")
 		const openAiMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [
@@ -35,7 +35,7 @@ export class OllamaHandler implements ApiHandler, SingleCompletionHandler {
 		const stream = await this.client.chat.completions.create({
 			model: this.getModel().id,
 			messages: openAiMessages,
-			temperature: this.options.modelTemperature ?? OLLAMA_DEFAULT_TEMPERATURE,
+			temperature: this.options.modelTemperature ?? 0,
 			stream: true,
 		})
 		const matcher = new XmlMatcher(
@@ -60,7 +60,7 @@ export class OllamaHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): { id: string; info: ModelInfo } {
+	override getModel(): { id: string; info: ModelInfo } {
 		return {
 			id: this.options.ollamaModelId || "",
 			info: openAiModelInfoSaneDefaults,
@@ -76,9 +76,7 @@ export class OllamaHandler implements ApiHandler, SingleCompletionHandler {
 				messages: useR1Format
 					? convertToR1Format([{ role: "user", content: prompt }])
 					: [{ role: "user", content: prompt }],
-				temperature:
-					this.options.modelTemperature ??
-					(useR1Format ? DEEP_SEEK_DEFAULT_TEMPERATURE : OLLAMA_DEFAULT_TEMPERATURE),
+				temperature: this.options.modelTemperature ?? (useR1Format ? DEEP_SEEK_DEFAULT_TEMPERATURE : 0),
 				stream: false,
 			})
 			return response.choices[0]?.message.content || ""

src/api/providers/openai-native.ts

@@ -1,6 +1,6 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import OpenAI from "openai"
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import {
 	ApiHandlerOptions,
 	ModelInfo,
@@ -10,20 +10,22 @@ import {
 } from "../../shared/api"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream } from "../transform/stream"
+import { BaseProvider } from "./base-provider"
 
 const OPENAI_NATIVE_DEFAULT_TEMPERATURE = 0
 
-export class OpenAiNativeHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class OpenAiNativeHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		const apiKey = this.options.openAiNativeApiKey ?? "not-provided"
 		this.client = new OpenAI({ apiKey })
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const modelId = this.getModel().id
 
 		if (modelId.startsWith("o1")) {
@@ -133,7 +135,7 @@ export class OpenAiNativeHandler implements ApiHandler, SingleCompletionHandler
 		}
 	}
 
-	getModel(): { id: OpenAiNativeModelId; info: ModelInfo } {
+	override getModel(): { id: OpenAiNativeModelId; info: ModelInfo } {
 		const modelId = this.options.apiModelId
 		if (modelId && modelId in openAiNativeModels) {
 			const id = modelId as OpenAiNativeModelId

src/api/providers/openai.ts

@@ -8,24 +8,24 @@ import {
 	ModelInfo,
 	openAiModelInfoSaneDefaults,
 } from "../../shared/api"
-import { ApiHandler, SingleCompletionHandler } from "../index"
+import { SingleCompletionHandler } from "../index"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { convertToR1Format } from "../transform/r1-format"
 import { convertToSimpleMessages } from "../transform/simple-format"
 import { ApiStream, ApiStreamUsageChunk } from "../transform/stream"
+import { BaseProvider } from "./base-provider"
 
+const DEEP_SEEK_DEFAULT_TEMPERATURE = 0.6
 export interface OpenAiHandlerOptions extends ApiHandlerOptions {
 	defaultHeaders?: Record<string, string>
 }
 
-export const DEEP_SEEK_DEFAULT_TEMPERATURE = 0.6
-const OPENAI_DEFAULT_TEMPERATURE = 0
-
-export class OpenAiHandler implements ApiHandler, SingleCompletionHandler {
+export class OpenAiHandler extends BaseProvider implements SingleCompletionHandler {
 	protected options: OpenAiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: OpenAiHandlerOptions) {
+		super()
 		this.options = options
 
 		const baseURL = this.options.openAiBaseUrl ?? "https://api.openai.com/v1"
@@ -53,7 +53,7 @@ export class OpenAiHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const modelInfo = this.getModel().info
 		const modelUrl = this.options.openAiBaseUrl ?? ""
 		const modelId = this.options.openAiModelId ?? ""
@@ -78,9 +78,7 @@ export class OpenAiHandler implements ApiHandler, SingleCompletionHandler {
 
 			const requestOptions: OpenAI.Chat.Completions.ChatCompletionCreateParamsStreaming = {
 				model: modelId,
-				temperature:
-					this.options.modelTemperature ??
-					(deepseekReasoner ? DEEP_SEEK_DEFAULT_TEMPERATURE : OPENAI_DEFAULT_TEMPERATURE),
+				temperature: this.options.modelTemperature ?? (deepseekReasoner ? DEEP_SEEK_DEFAULT_TEMPERATURE : 0),
 				messages: convertedMessages,
 				stream: true as const,
 				stream_options: { include_usage: true },
@@ -143,7 +141,7 @@ export class OpenAiHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): { id: string; info: ModelInfo } {
+	override getModel(): { id: string; info: ModelInfo } {
 		return {
 			id: this.options.openAiModelId ?? "",
 			info: this.options.openAiCustomModelInfo ?? openAiModelInfoSaneDefaults,

src/api/providers/openrouter.ts

@@ -9,10 +9,10 @@ import { parseApiPrice } from "../../utils/cost"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStreamChunk, ApiStreamUsageChunk } from "../transform/stream"
 import { convertToR1Format } from "../transform/r1-format"
-import { DEEP_SEEK_DEFAULT_TEMPERATURE } from "./openai"
-import { ApiHandler, SingleCompletionHandler } from ".."
 
-const OPENROUTER_DEFAULT_TEMPERATURE = 0
+import { DEEP_SEEK_DEFAULT_TEMPERATURE } from "./constants"
+import { getModelParams, SingleCompletionHandler } from ".."
+import { BaseProvider } from "./base-provider"
 
 // Add custom interface for OpenRouter params.
 type OpenRouterChatCompletionParams = OpenAI.Chat.ChatCompletionCreateParams & {
@@ -26,11 +26,12 @@ interface OpenRouterApiStreamUsageChunk extends ApiStreamUsageChunk {
 	fullResponseText: string
 }
 
-export class OpenRouterHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class OpenRouterHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 
 		const baseURL = this.options.openRouterBaseUrl || "https://openrouter.ai/api/v1"
@@ -44,17 +45,22 @@ export class OpenRouterHandler implements ApiHandler, SingleCompletionHandler {
 		this.client = new OpenAI({ baseURL, apiKey, defaultHeaders })
 	}
 
-	async *createMessage(
+	override async *createMessage(
 		systemPrompt: string,
 		messages: Anthropic.Messages.MessageParam[],
 	): AsyncGenerator<ApiStreamChunk> {
-		// Convert Anthropic messages to OpenAI format
+		let { id: modelId, maxTokens, thinking, temperature, topP } = this.getModel()
+
+		// Convert Anthropic messages to OpenAI format.
 		let openAiMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [
 			{ role: "system", content: systemPrompt },
 			...convertToOpenAiMessages(messages),
 		]
 
-		const { id: modelId, info: modelInfo } = this.getModel()
+		// DeepSeek highly recommends using user instead of system role.
+		if (modelId.startsWith("deepseek/deepseek-r1") || modelId === "perplexity/sonar-reasoning") {
+			openAiMessages = convertToR1Format([{ role: "user", content: systemPrompt }, ...messages])
+		}
 
 		// prompt caching: https://openrouter.ai/docs/prompt-caching
 		// this is specifically for claude models (some models may 'support prompt caching' automatically without this)
@@ -95,42 +101,12 @@ export class OpenRouterHandler implements ApiHandler, SingleCompletionHandler {
 				break
 		}
 
-		let defaultTemperature = OPENROUTER_DEFAULT_TEMPERATURE
-		let topP: number | undefined = undefined
-
-		// Handle models based on deepseek-r1
-		if (modelId.startsWith("deepseek/deepseek-r1") || modelId === "perplexity/sonar-reasoning") {
-			// Recommended temperature for DeepSeek reasoning models
-			defaultTemperature = DEEP_SEEK_DEFAULT_TEMPERATURE
-			// DeepSeek highly recommends using user instead of system role
-			openAiMessages = convertToR1Format([{ role: "user", content: systemPrompt }, ...messages])
-			// Some provider support topP and 0.95 is value that Deepseek used in their benchmarks
-			topP = 0.95
-		}
-
-		const maxTokens = this.options.modelMaxTokens || modelInfo.maxTokens
-		let temperature = this.options.modelTemperature ?? defaultTemperature
-		let thinking: BetaThinkingConfigParam | undefined = undefined
-
-		if (modelInfo.thinking) {
-			// Clamp the thinking budget to be at most 80% of max tokens and at
-			// least 1024 tokens.
-			const maxBudgetTokens = Math.floor((maxTokens || 8192) * 0.8)
-			const budgetTokens = Math.max(
-				Math.min(this.options.modelMaxThinkingTokens ?? maxBudgetTokens, maxBudgetTokens),
-				1024,
-			)
-
-			thinking = { type: "enabled", budget_tokens: budgetTokens }
-			temperature = 1.0
-		}
-
 		// https://openrouter.ai/docs/transforms
 		let fullResponseText = ""
 
 		const completionParams: OpenRouterChatCompletionParams = {
 			model: modelId,
-			max_tokens: modelInfo.maxTokens,
+			max_tokens: maxTokens,
 			temperature,
 			thinking, // OpenRouter is temporarily supporting this.
 			top_p: topP,
@@ -138,7 +114,7 @@ export class OpenRouterHandler implements ApiHandler, SingleCompletionHandler {
 			stream: true,
 			include_reasoning: true,
 			// This way, the transforms field will only be included in the parameters when openRouterUseMiddleOutTransform is true.
-			...(this.options.openRouterUseMiddleOutTransform && { transforms: ["middle-out"] }),
+			...((this.options.openRouterUseMiddleOutTransform ?? true) && { transforms: ["middle-out"] }),
 		}
 
 		const stream = await this.client.chat.completions.create(completionParams)
@@ -218,37 +194,46 @@ export class OpenRouterHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel() {
+	override getModel() {
 		const modelId = this.options.openRouterModelId
 		const modelInfo = this.options.openRouterModelInfo
-		return modelId && modelInfo
-			? { id: modelId, info: modelInfo }
-			: { id: openRouterDefaultModelId, info: openRouterDefaultModelInfo }
+
+		let id = modelId ?? openRouterDefaultModelId
+		const info = modelInfo ?? openRouterDefaultModelInfo
+
+		const isDeepSeekR1 = id.startsWith("deepseek/deepseek-r1") || modelId === "perplexity/sonar-reasoning"
+		const defaultTemperature = isDeepSeekR1 ? DEEP_SEEK_DEFAULT_TEMPERATURE : 0
+		const topP = isDeepSeekR1 ? 0.95 : undefined
+
+		return {
+			id,
+			info,
+			...getModelParams({ options: this.options, model: info, defaultTemperature }),
+			topP,
+		}
 	}
 
-	async completePrompt(prompt: string): Promise<string> {
-		try {
-			const response = await this.client.chat.completions.create({
-				model: this.getModel().id,
-				messages: [{ role: "user", content: prompt }],
-				temperature: this.options.modelTemperature ?? OPENROUTER_DEFAULT_TEMPERATURE,
-				stream: false,
-			})
-
-			if ("error" in response) {
-				const error = response.error as { message?: string; code?: number }
-				throw new Error(`OpenRouter API Error ${error?.code}: ${error?.message}`)
-			}
+	async completePrompt(prompt: string) {
+		let { id: modelId, maxTokens, thinking, temperature } = this.getModel()
 
-			const completion = response as OpenAI.Chat.ChatCompletion
-			return completion.choices[0]?.message?.content || ""
-		} catch (error) {
-			if (error instanceof Error) {
-				throw new Error(`OpenRouter completion error: ${error.message}`)
-			}
+		const completionParams: OpenRouterChatCompletionParams = {
+			model: modelId,
+			max_tokens: maxTokens,
+			thinking,
+			temperature,
+			messages: [{ role: "user", content: prompt }],
+			stream: false,
+		}
+
+		const response = await this.client.chat.completions.create(completionParams)
 
-			throw error
+		if ("error" in response) {
+			const error = response.error as { message?: string; code?: number }
+			throw new Error(`OpenRouter API Error ${error?.code}: ${error?.message}`)
 		}
+
+		const completion = response as OpenAI.Chat.ChatCompletion
+		return completion.choices[0]?.message?.content || ""
 	}
 }
 
@@ -278,7 +263,7 @@ export async function getOpenRouterModels() {
 					modelInfo.supportsPromptCache = true
 					modelInfo.cacheWritesPrice = 3.75
 					modelInfo.cacheReadsPrice = 0.3
-					modelInfo.maxTokens = rawModel.id === "anthropic/claude-3.7-sonnet:thinking" ? 64_000 : 16_384
+					modelInfo.maxTokens = rawModel.id === "anthropic/claude-3.7-sonnet:thinking" ? 128_000 : 16_384
 					break
 				case rawModel.id.startsWith("anthropic/claude-3.5-sonnet-20240620"):
 					modelInfo.supportsPromptCache = true

src/api/providers/unbound.ts

@@ -5,25 +5,27 @@ import OpenAI from "openai"
 import { ApiHandlerOptions, ModelInfo, unboundDefaultModelId, unboundDefaultModelInfo } from "../../shared/api"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream, ApiStreamUsageChunk } from "../transform/stream"
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
+import { BaseProvider } from "./base-provider"
 
 interface UnboundUsage extends OpenAI.CompletionUsage {
 	cache_creation_input_tokens?: number
 	cache_read_input_tokens?: number
 }
 
-export class UnboundHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class UnboundHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: OpenAI
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		const baseURL = "https://api.getunbound.ai/v1"
 		const apiKey = this.options.unboundApiKey ?? "not-provided"
 		this.client = new OpenAI({ baseURL, apiKey })
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		// Convert Anthropic messages to OpenAI format
 		const openAiMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [
 			{ role: "system", content: systemPrompt },
@@ -131,7 +133,7 @@ export class UnboundHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): { id: string; info: ModelInfo } {
+	override getModel(): { id: string; info: ModelInfo } {
 		const modelId = this.options.unboundModelId
 		const modelInfo = this.options.unboundModelInfo
 		if (modelId && modelInfo) {

src/api/providers/vertex.ts

@@ -1,10 +1,16 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import { AnthropicVertex } from "@anthropic-ai/vertex-sdk"
 import { Stream as AnthropicStream } from "@anthropic-ai/sdk/streaming"
-import { ApiHandler, SingleCompletionHandler } from "../"
-import { BetaThinkingConfigParam } from "@anthropic-ai/sdk/resources/beta"
+
+import { VertexAI } from "@google-cloud/vertexai"
+
 import { ApiHandlerOptions, ModelInfo, vertexDefaultModelId, VertexModelId, vertexModels } from "../../shared/api"
 import { ApiStream } from "../transform/stream"
+import { convertAnthropicMessageToVertexGemini } from "../transform/vertex-gemini-format"
+import { BaseProvider } from "./base-provider"
+
+import { ANTHROPIC_DEFAULT_MAX_TOKENS } from "./constants"
+import { getModelParams, SingleCompletionHandler } from "../"
 
 // Types for Vertex SDK
 
@@ -93,17 +99,37 @@ interface VertexMessageStreamEvent {
 }
 
 // https://docs.anthropic.com/en/api/claude-on-vertex-ai
-export class VertexHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
-	private client: AnthropicVertex
+export class VertexHandler extends BaseProvider implements SingleCompletionHandler {
+	MODEL_CLAUDE = "claude"
+	MODEL_GEMINI = "gemini"
+
+	protected options: ApiHandlerOptions
+	private anthropicClient: AnthropicVertex
+	private geminiClient: VertexAI
+	private modelType: string
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
-		this.client = new AnthropicVertex({
+
+		if (this.options.apiModelId?.startsWith(this.MODEL_CLAUDE)) {
+			this.modelType = this.MODEL_CLAUDE
+		} else if (this.options.apiModelId?.startsWith(this.MODEL_GEMINI)) {
+			this.modelType = this.MODEL_GEMINI
+		} else {
+			throw new Error(`Unknown model ID: ${this.options.apiModelId}`)
+		}
+
+		this.anthropicClient = new AnthropicVertex({
 			projectId: this.options.vertexProjectId ?? "not-provided",
 			// https://cloud.google.com/vertex-ai/generative-ai/docs/partner-models/use-claude#regions
 			region: this.options.vertexRegion ?? "us-east5",
 		})
+
+		this.geminiClient = new VertexAI({
+			project: this.options.vertexProjectId ?? "not-provided",
+			location: this.options.vertexRegion ?? "us-east5",
+		})
 	}
 
 	private formatMessageForCache(message: Anthropic.Messages.MessageParam, shouldCache: boolean): VertexMessage {
@@ -154,7 +180,43 @@ export class VertexHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	private async *createGeminiMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+		const model = this.geminiClient.getGenerativeModel({
+			model: this.getModel().id,
+			systemInstruction: systemPrompt,
+		})
+
+		const result = await model.generateContentStream({
+			contents: messages.map(convertAnthropicMessageToVertexGemini),
+			generationConfig: {
+				maxOutputTokens: this.getModel().info.maxTokens,
+				temperature: this.options.modelTemperature ?? 0,
+			},
+		})
+
+		for await (const chunk of result.stream) {
+			if (chunk.candidates?.[0]?.content?.parts) {
+				for (const part of chunk.candidates[0].content.parts) {
+					if (part.text) {
+						yield {
+							type: "text",
+							text: part.text,
+						}
+					}
+				}
+			}
+		}
+
+		const response = await result.response
+
+		yield {
+			type: "usage",
+			inputTokens: response.usageMetadata?.promptTokenCount ?? 0,
+			outputTokens: response.usageMetadata?.candidatesTokenCount ?? 0,
+		}
+	}
+
+	private async *createClaudeMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const model = this.getModel()
 		let { id, info, temperature, maxTokens, thinking } = model
 		const useCache = model.info.supportsPromptCache
@@ -192,7 +254,7 @@ export class VertexHandler implements ApiHandler, SingleCompletionHandler {
 			stream: true,
 		}
 
-		const stream = (await this.client.messages.create(
+		const stream = (await this.anthropicClient.messages.create(
 			params as Anthropic.Messages.MessageCreateParamsStreaming,
 		)) as unknown as AnthropicStream<VertexMessageStreamEvent>
 
@@ -272,58 +334,77 @@ export class VertexHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	getModel(): {
-		id: VertexModelId
-		info: ModelInfo
-		temperature: number
-		maxTokens: number
-		thinking?: BetaThinkingConfigParam
-	} {
-		const modelId = this.options.apiModelId
-		let temperature = this.options.modelTemperature ?? 0
-		let thinking: BetaThinkingConfigParam | undefined = undefined
-
-		if (modelId && modelId in vertexModels) {
-			const id = modelId as VertexModelId
-			const info: ModelInfo = vertexModels[id]
-
-			// The `:thinking` variant is a virtual identifier for thinking-enabled models
-			// Similar to how it's handled in the Anthropic provider
-			let actualId = id
-			if (id.endsWith(":thinking")) {
-				actualId = id.replace(":thinking", "") as VertexModelId
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+		switch (this.modelType) {
+			case this.MODEL_CLAUDE: {
+				yield* this.createClaudeMessage(systemPrompt, messages)
+				break
 			}
-
-			const maxTokens = this.options.modelMaxTokens || info.maxTokens || 8192
-
-			if (info.thinking) {
-				temperature = 1.0 // Thinking requires temperature 1.0
-				const maxBudgetTokens = Math.floor(maxTokens * 0.8)
-				const budgetTokens = Math.max(
-					Math.min(this.options.modelMaxThinkingTokens ?? maxBudgetTokens, maxBudgetTokens),
-					1024,
-				)
-				thinking = { type: "enabled", budget_tokens: budgetTokens }
+			case this.MODEL_GEMINI: {
+				yield* this.createGeminiMessage(systemPrompt, messages)
+				break
 			}
+			default: {
+				throw new Error(`Invalid model type: ${this.modelType}`)
+			}
+		}
+	}
 
-			return { id: actualId, info, temperature, maxTokens, thinking }
+	getModel() {
+		const modelId = this.options.apiModelId
+		let id = modelId && modelId in vertexModels ? (modelId as VertexModelId) : vertexDefaultModelId
+		const info: ModelInfo = vertexModels[id]
+
+		// The `:thinking` variant is a virtual identifier for thinking-enabled
+		// models (similar to how it's handled in the Anthropic provider.)
+		if (id.endsWith(":thinking")) {
+			id = id.replace(":thinking", "") as VertexModelId
 		}
 
-		const id = vertexDefaultModelId
-		const info = vertexModels[id]
-		const maxTokens = this.options.modelMaxTokens || info.maxTokens || 8192
+		return {
+			id,
+			info,
+			...getModelParams({ options: this.options, model: info, defaultMaxTokens: ANTHROPIC_DEFAULT_MAX_TOKENS }),
+		}
+	}
 
-		return { id, info, temperature, maxTokens, thinking }
+	private async completePromptGemini(prompt: string) {
+		try {
+			const model = this.geminiClient.getGenerativeModel({
+				model: this.getModel().id,
+			})
+
+			const result = await model.generateContent({
+				contents: [{ role: "user", parts: [{ text: prompt }] }],
+				generationConfig: {
+					temperature: this.options.modelTemperature ?? 0,
+				},
+			})
+
+			let text = ""
+			result.response.candidates?.forEach((candidate) => {
+				candidate.content.parts.forEach((part) => {
+					text += part.text
+				})
+			})
+
+			return text
+		} catch (error) {
+			if (error instanceof Error) {
+				throw new Error(`Vertex completion error: ${error.message}`)
+			}
+			throw error
+		}
 	}
 
-	async completePrompt(prompt: string): Promise<string> {
+	private async completePromptClaude(prompt: string) {
 		try {
 			let { id, info, temperature, maxTokens, thinking } = this.getModel()
 			const useCache = info.supportsPromptCache
 
-			const params = {
+			const params: Anthropic.Messages.MessageCreateParamsNonStreaming = {
 				model: id,
-				max_tokens: maxTokens,
+				max_tokens: maxTokens ?? ANTHROPIC_DEFAULT_MAX_TOKENS,
 				temperature,
 				thinking,
 				system: "", // No system prompt needed for single completions
@@ -344,20 +425,34 @@ export class VertexHandler implements ApiHandler, SingleCompletionHandler {
 				stream: false,
 			}
 
-			const response = (await this.client.messages.create(
-				params as Anthropic.Messages.MessageCreateParamsNonStreaming,
-			)) as unknown as VertexMessageResponse
-
+			const response = (await this.anthropicClient.messages.create(params)) as unknown as VertexMessageResponse
 			const content = response.content[0]
+
 			if (content.type === "text") {
 				return content.text
 			}
+
 			return ""
 		} catch (error) {
 			if (error instanceof Error) {
 				throw new Error(`Vertex completion error: ${error.message}`)
 			}
+
 			throw error
 		}
 	}
+
+	async completePrompt(prompt: string) {
+		switch (this.modelType) {
+			case this.MODEL_CLAUDE: {
+				return this.completePromptClaude(prompt)
+			}
+			case this.MODEL_GEMINI: {
+				return this.completePromptGemini(prompt)
+			}
+			default: {
+				throw new Error(`Invalid model type: ${this.modelType}`)
+			}
+		}
+	}
 }

src/api/providers/vscode-lm.ts

@@ -1,18 +1,19 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import * as vscode from "vscode"
 
-import { ApiHandler, SingleCompletionHandler } from "../"
+import { SingleCompletionHandler } from "../"
 import { calculateApiCost } from "../../utils/cost"
 import { ApiStream } from "../transform/stream"
 import { convertToVsCodeLmMessages } from "../transform/vscode-lm-format"
 import { SELECTOR_SEPARATOR, stringifyVsCodeLmModelSelector } from "../../shared/vsCodeSelectorUtils"
 import { ApiHandlerOptions, ModelInfo, openAiModelInfoSaneDefaults } from "../../shared/api"
+import { BaseProvider } from "./base-provider"
 
 /**
  * Handles interaction with VS Code's Language Model API for chat-based operations.
- * This handler implements the ApiHandler interface to provide VS Code LM specific functionality.
+ * This handler extends BaseProvider to provide VS Code LM specific functionality.
  *
- * @implements {ApiHandler}
+ * @extends {BaseProvider}
  *
  * @remarks
  * The handler manages a VS Code language model chat client and provides methods to:
@@ -35,13 +36,14 @@ import { ApiHandlerOptions, ModelInfo, openAiModelInfoSaneDefaults } from "../..
  * }
  * ```
  */
-export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
-	private options: ApiHandlerOptions
+export class VsCodeLmHandler extends BaseProvider implements SingleCompletionHandler {
+	protected options: ApiHandlerOptions
 	private client: vscode.LanguageModelChat | null
 	private disposable: vscode.Disposable | null
 	private currentRequestCancellation: vscode.CancellationTokenSource | null
 
 	constructor(options: ApiHandlerOptions) {
+		super()
 		this.options = options
 		this.client = null
 		this.disposable = null
@@ -145,7 +147,33 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 		}
 	}
 
-	private async countTokens(text: string | vscode.LanguageModelChatMessage): Promise<number> {
+	/**
+	 * Implements the ApiHandler countTokens interface method
+	 * Provides token counting for Anthropic content blocks
+	 *
+	 * @param content The content blocks to count tokens for
+	 * @returns A promise resolving to the token count
+	 */
+	override async countTokens(content: Array<Anthropic.Messages.ContentBlockParam>): Promise<number> {
+		// Convert Anthropic content blocks to a string for VSCode LM token counting
+		let textContent = ""
+
+		for (const block of content) {
+			if (block.type === "text") {
+				textContent += block.text || ""
+			} else if (block.type === "image") {
+				// VSCode LM doesn't support images directly, so we'll just use a placeholder
+				textContent += "[IMAGE]"
+			}
+		}
+
+		return this.internalCountTokens(textContent)
+	}
+
+	/**
+	 * Private implementation of token counting used internally by VsCodeLmHandler
+	 */
+	private async internalCountTokens(text: string | vscode.LanguageModelChatMessage): Promise<number> {
 		// Check for required dependencies
 		if (!this.client) {
 			console.warn("Roo Code <Language Model API>: No client available for token counting")
@@ -216,9 +244,9 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 		systemPrompt: string,
 		vsCodeLmMessages: vscode.LanguageModelChatMessage[],
 	): Promise<number> {
-		const systemTokens: number = await this.countTokens(systemPrompt)
+		const systemTokens: number = await this.internalCountTokens(systemPrompt)
 
-		const messageTokens: number[] = await Promise.all(vsCodeLmMessages.map((msg) => this.countTokens(msg)))
+		const messageTokens: number[] = await Promise.all(vsCodeLmMessages.map((msg) => this.internalCountTokens(msg)))
 
 		return systemTokens + messageTokens.reduce((sum: number, tokens: number): number => sum + tokens, 0)
 	}
@@ -319,7 +347,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 		return content
 	}
 
-	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+	override async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		// Ensure clean state before starting a new request
 		this.ensureCleanState()
 		const client: vscode.LanguageModelChat = await this.getClient()
@@ -427,7 +455,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 			}
 
 			// Count tokens in the accumulated text after stream completion
-			const totalOutputTokens: number = await this.countTokens(accumulatedText)
+			const totalOutputTokens: number = await this.internalCountTokens(accumulatedText)
 
 			// Report final usage after stream completion
 			yield {
@@ -467,7 +495,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 	}
 
 	// Return model information based on the current client state
-	getModel(): { id: string; info: ModelInfo } {
+	override getModel(): { id: string; info: ModelInfo } {
 		if (this.client) {
 			// Validate client properties
 			const requiredProps = {

src/api/transform/__tests__/vertex-gemini-format.test.ts

@@ -0,0 +1,338 @@
+// npx jest src/api/transform/__tests__/vertex-gemini-format.test.ts
+
+import { Anthropic } from "@anthropic-ai/sdk"
+
+import { convertAnthropicMessageToVertexGemini } from "../vertex-gemini-format"
+
+describe("convertAnthropicMessageToVertexGemini", () => {
+	it("should convert a simple text message", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: "Hello, world!",
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [{ text: "Hello, world!" }],
+		})
+	})
+
+	it("should convert assistant role to model role", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "assistant",
+			content: "I'm an assistant",
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "model",
+			parts: [{ text: "I'm an assistant" }],
+		})
+	})
+
+	it("should convert a message with text blocks", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{ type: "text", text: "First paragraph" },
+				{ type: "text", text: "Second paragraph" },
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [{ text: "First paragraph" }, { text: "Second paragraph" }],
+		})
+	})
+
+	it("should convert a message with an image", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{ type: "text", text: "Check out this image:" },
+				{
+					type: "image",
+					source: {
+						type: "base64",
+						media_type: "image/jpeg",
+						data: "base64encodeddata",
+					},
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [
+				{ text: "Check out this image:" },
+				{
+					inlineData: {
+						data: "base64encodeddata",
+						mimeType: "image/jpeg",
+					},
+				},
+			],
+		})
+	})
+
+	it("should throw an error for unsupported image source type", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{
+					type: "image",
+					source: {
+						type: "url", // Not supported
+						url: "https://example.com/image.jpg",
+					} as any,
+				},
+			],
+		}
+
+		expect(() => convertAnthropicMessageToVertexGemini(anthropicMessage)).toThrow("Unsupported image source type")
+	})
+
+	it("should convert a message with tool use", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "assistant",
+			content: [
+				{ type: "text", text: "Let me calculate that for you." },
+				{
+					type: "tool_use",
+					id: "calc-123",
+					name: "calculator",
+					input: { operation: "add", numbers: [2, 3] },
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "model",
+			parts: [
+				{ text: "Let me calculate that for you." },
+				{
+					functionCall: {
+						name: "calculator",
+						args: { operation: "add", numbers: [2, 3] },
+					},
+				},
+			],
+		})
+	})
+
+	it("should convert a message with tool result as string", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{ type: "text", text: "Here's the result:" },
+				{
+					type: "tool_result",
+					tool_use_id: "calculator-123",
+					content: "The result is 5",
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [
+				{ text: "Here's the result:" },
+				{
+					functionResponse: {
+						name: "calculator",
+						response: {
+							name: "calculator",
+							content: "The result is 5",
+						},
+					},
+				},
+			],
+		})
+	})
+
+	it("should handle empty tool result content", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{
+					type: "tool_result",
+					tool_use_id: "calculator-123",
+					content: null as any, // Empty content
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		// Should skip the empty tool result
+		expect(result).toEqual({
+			role: "user",
+			parts: [],
+		})
+	})
+
+	it("should convert a message with tool result as array with text only", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{
+					type: "tool_result",
+					tool_use_id: "search-123",
+					content: [
+						{ type: "text", text: "First result" },
+						{ type: "text", text: "Second result" },
+					],
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [
+				{
+					functionResponse: {
+						name: "search",
+						response: {
+							name: "search",
+							content: "First result\n\nSecond result",
+						},
+					},
+				},
+			],
+		})
+	})
+
+	it("should convert a message with tool result as array with text and images", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{
+					type: "tool_result",
+					tool_use_id: "search-123",
+					content: [
+						{ type: "text", text: "Search results:" },
+						{
+							type: "image",
+							source: {
+								type: "base64",
+								media_type: "image/png",
+								data: "image1data",
+							},
+						},
+						{
+							type: "image",
+							source: {
+								type: "base64",
+								media_type: "image/jpeg",
+								data: "image2data",
+							},
+						},
+					],
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [
+				{
+					functionResponse: {
+						name: "search",
+						response: {
+							name: "search",
+							content: "Search results:\n\n(See next part for image)",
+						},
+					},
+				},
+				{
+					inlineData: {
+						data: "image1data",
+						mimeType: "image/png",
+					},
+				},
+				{
+					inlineData: {
+						data: "image2data",
+						mimeType: "image/jpeg",
+					},
+				},
+			],
+		})
+	})
+
+	it("should convert a message with tool result containing only images", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{
+					type: "tool_result",
+					tool_use_id: "imagesearch-123",
+					content: [
+						{
+							type: "image",
+							source: {
+								type: "base64",
+								media_type: "image/png",
+								data: "onlyimagedata",
+							},
+						},
+					],
+				},
+			],
+		}
+
+		const result = convertAnthropicMessageToVertexGemini(anthropicMessage)
+
+		expect(result).toEqual({
+			role: "user",
+			parts: [
+				{
+					functionResponse: {
+						name: "imagesearch",
+						response: {
+							name: "imagesearch",
+							content: "\n\n(See next part for image)",
+						},
+					},
+				},
+				{
+					inlineData: {
+						data: "onlyimagedata",
+						mimeType: "image/png",
+					},
+				},
+			],
+		})
+	})
+
+	it("should throw an error for unsupported content block type", () => {
+		const anthropicMessage: Anthropic.Messages.MessageParam = {
+			role: "user",
+			content: [
+				{
+					type: "unknown_type", // Unsupported type
+					data: "some data",
+				} as any,
+			],
+		}
+
+		expect(() => convertAnthropicMessageToVertexGemini(anthropicMessage)).toThrow(
+			"Unsupported content block type: unknown_type",
+		)
+	})
+})

src/api/transform/vertex-gemini-format.ts

@@ -0,0 +1,83 @@
+import { Anthropic } from "@anthropic-ai/sdk"
+import { Content, FunctionCallPart, FunctionResponsePart, InlineDataPart, Part, TextPart } from "@google-cloud/vertexai"
+
+function convertAnthropicContentToVertexGemini(content: Anthropic.Messages.MessageParam["content"]): Part[] {
+	if (typeof content === "string") {
+		return [{ text: content } as TextPart]
+	}
+
+	return content.flatMap((block) => {
+		switch (block.type) {
+			case "text":
+				return { text: block.text } as TextPart
+			case "image":
+				if (block.source.type !== "base64") {
+					throw new Error("Unsupported image source type")
+				}
+				return {
+					inlineData: {
+						data: block.source.data,
+						mimeType: block.source.media_type,
+					},
+				} as InlineDataPart
+			case "tool_use":
+				return {
+					functionCall: {
+						name: block.name,
+						args: block.input,
+					},
+				} as FunctionCallPart
+			case "tool_result":
+				const name = block.tool_use_id.split("-")[0]
+				if (!block.content) {
+					return []
+				}
+				if (typeof block.content === "string") {
+					return {
+						functionResponse: {
+							name,
+							response: {
+								name,
+								content: block.content,
+							},
+						},
+					} as FunctionResponsePart
+				} else {
+					// The only case when tool_result could be array is when the tool failed and we're providing ie user feedback potentially with images
+					const textParts = block.content.filter((part) => part.type === "text")
+					const imageParts = block.content.filter((part) => part.type === "image")
+					const text = textParts.length > 0 ? textParts.map((part) => part.text).join("\n\n") : ""
+					const imageText = imageParts.length > 0 ? "\n\n(See next part for image)" : ""
+					return [
+						{
+							functionResponse: {
+								name,
+								response: {
+									name,
+									content: text + imageText,
+								},
+							},
+						} as FunctionResponsePart,
+						...imageParts.map(
+							(part) =>
+								({
+									inlineData: {
+										data: part.source.data,
+										mimeType: part.source.media_type,
+									},
+								}) as InlineDataPart,
+						),
+					]
+				}
+			default:
+				throw new Error(`Unsupported content block type: ${(block as any).type}`)
+		}
+	})
+}
+
+export function convertAnthropicMessageToVertexGemini(message: Anthropic.Messages.MessageParam): Content {
+	return {
+		role: message.role === "assistant" ? "model" : "user",
+		parts: convertAnthropicContentToVertexGemini(message.content),
+	}
+}

src/core/Cline.ts

@@ -1,6 +1,6 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import cloneDeep from "clone-deep"
-import { DiffStrategy, getDiffStrategy, UnifiedDiffStrategy } from "./diff/DiffStrategy"
+import { DiffStrategy, getDiffStrategy } from "./diff/DiffStrategy"
 import { validateToolUse, isToolAllowedForMode, ToolName } from "./mode-validator"
 import delay from "delay"
 import fs from "fs/promises"
@@ -10,10 +10,15 @@ import getFolderSize from "get-folder-size"
 import * as path from "path"
 import { serializeError } from "serialize-error"
 import * as vscode from "vscode"
-import { ApiHandler, SingleCompletionHandler, buildApiHandler } from "../api"
+
+import { ApiHandler, buildApiHandler } from "../api"
 import { ApiStream } from "../api/transform/stream"
 import { DIFF_VIEW_URI_SCHEME, DiffViewProvider } from "../integrations/editor/DiffViewProvider"
-import { CheckpointService, CheckpointServiceFactory } from "../services/checkpoints"
+import {
+	CheckpointServiceOptions,
+	RepoPerTaskCheckpointService,
+	RepoPerWorkspaceCheckpointService,
+} from "../services/checkpoints"
 import { findToolName, formatContentBlockToMarkdown } from "../integrations/misc/export-markdown"
 import {
 	extractTextFromFile,
@@ -27,6 +32,7 @@ import { UrlContentFetcher } from "../services/browser/UrlContentFetcher"
 import { listFiles } from "../services/glob/list-files"
 import { regexSearchFiles } from "../services/ripgrep"
 import { parseSourceCodeForDefinitionsTopLevel } from "../services/tree-sitter"
+import { CheckpointStorage } from "../shared/checkpoints"
 import { ApiConfiguration } from "../shared/api"
 import { findLastIndex } from "../shared/array"
 import { combineApiRequests } from "../shared/combineApiRequests"
@@ -77,6 +83,7 @@ export type ClineOptions = {
 	customInstructions?: string
 	enableDiff?: boolean
 	enableCheckpoints?: boolean
+	checkpointStorage?: CheckpointStorage
 	fuzzyMatchThreshold?: number
 	task?: string
 	images?: string[]
@@ -126,8 +133,9 @@ export class Cline {
 	isInitialized = false
 
 	// checkpoints
-	enableCheckpoints: boolean = false
-	private checkpointService?: CheckpointService
+	private enableCheckpoints: boolean
+	private checkpointStorage: CheckpointStorage
+	private checkpointService?: RepoPerTaskCheckpointService | RepoPerWorkspaceCheckpointService
 
 	// streaming
 	isWaitingForFirstChunk = false
@@ -147,7 +155,8 @@ export class Cline {
 		apiConfiguration,
 		customInstructions,
 		enableDiff,
-		enableCheckpoints,
+		enableCheckpoints = false,
+		checkpointStorage = "task",
 		fuzzyMatchThreshold,
 		task,
 		images,
@@ -171,7 +180,8 @@ export class Cline {
 		this.fuzzyMatchThreshold = fuzzyMatchThreshold ?? 1.0
 		this.providerRef = new WeakRef(provider)
 		this.diffViewProvider = new DiffViewProvider(cwd)
-		this.enableCheckpoints = enableCheckpoints ?? false
+		this.enableCheckpoints = enableCheckpoints
+		this.checkpointStorage = checkpointStorage
 
 		// Initialize diffStrategy based on current state
 		this.updateDiffStrategy(Experiments.isEnabled(experiments ?? {}, EXPERIMENT_IDS.DIFF_STRATEGY))
@@ -825,8 +835,12 @@ export class Cline {
 	}
 
 	private async initiateTaskLoop(userContent: UserContent): Promise<void> {
+		// Kicks off the checkpoints initialization process in the background.
+		this.getCheckpointService()
+
 		let nextUserContent = userContent
 		let includeFileDetails = true
+
 		while (!this.abort) {
 			const didEndLoop = await this.recursivelyMakeClineRequests(nextUserContent, includeFileDetails)
 			includeFileDetails = false // we only need file details the first time
@@ -1024,6 +1038,7 @@ export class Cline {
 			preferredLanguage,
 			experiments,
 			enableMcpServerCreation,
+			browserToolEnabled,
 		} = (await this.providerRef.deref()?.getState()) ?? {}
 		const { customModes } = (await this.providerRef.deref()?.getState()) ?? {}
 		const systemPrompt = await (async () => {
@@ -1034,7 +1049,7 @@ export class Cline {
 			return SYSTEM_PROMPT(
 				provider.context,
 				cwd,
-				this.api.getModel().info.supportsComputerUse ?? false,
+				(this.api.getModel().info.supportsComputerUse ?? false) && (browserToolEnabled ?? true),
 				mcpHub,
 				this.diffStrategy,
 				browserViewportSize,
@@ -1068,12 +1083,12 @@ export class Cline {
 				? this.apiConfiguration.modelMaxTokens || modelInfo.maxTokens
 				: modelInfo.maxTokens
 			const contextWindow = modelInfo.contextWindow
-
-			const trimmedMessages = truncateConversationIfNeeded({
+			const trimmedMessages = await truncateConversationIfNeeded({
 				messages: this.apiConversationHistory,
 				totalTokens,
 				maxTokens,
 				contextWindow,
+				apiHandler: this.api,
 			})
 
 			if (trimmedMessages !== this.apiConversationHistory) {
@@ -2876,7 +2891,7 @@ export class Cline {
 		}
 
 		if (isCheckpointPossible) {
-			await this.checkpointSave({ isFirst: false })
+			this.checkpointSave()
 		}
 
 		/*
@@ -2956,13 +2971,6 @@ export class Cline {
 		// get previous api req's index to check token usage and determine if we need to truncate conversation history
 		const previousApiReqIndex = findLastIndex(this.clineMessages, (m) => m.say === "api_req_started")
 
-		// Save checkpoint if this is the first API request.
-		const isFirstRequest = this.clineMessages.filter((m) => m.say === "api_req_started").length === 0
-
-		if (isFirstRequest) {
-			await this.checkpointSave({ isFirst: true })
-		}
-
 		// in this Cline request loop, we need to check if this cline (Task) instance has been asked to wait
 		// for a sub-task (it has launched) to finish before continuing
 		if (this.isPaused) {
@@ -3473,7 +3481,7 @@ export class Cline {
 		) {
 			const currentModeName = getModeBySlug(currentMode, customModes)?.name ?? currentMode
 			const defaultModeName = getModeBySlug(defaultModeSlug, customModes)?.name ?? defaultModeSlug
-			details += `\n\nNOTE: You are currently in '${currentModeName}' mode which only allows read-only operations. To write files or execute commands, the user will need to switch to '${defaultModeName}' mode. Note that only the user can switch modes.`
+			details += `\n\nNOTE: You are currently in '${currentModeName}' mode, which does not allow write operations. To write files, the user will need to switch to a mode that supports file writing, such as '${defaultModeName}' mode.`
 		}
 
 		if (includeFileDetails) {
@@ -3494,55 +3502,144 @@ export class Cline {
 
 	// Checkpoints
 
-	private async getCheckpointService() {
+	private getCheckpointService() {
 		if (!this.enableCheckpoints) {
-			throw new Error("Checkpoints are disabled")
+			return undefined
 		}
 
-		if (!this.checkpointService) {
+		if (this.checkpointService) {
+			return this.checkpointService
+		}
+
+		const log = (message: string) => {
+			console.log(message)
+
+			try {
+				this.providerRef.deref()?.log(message)
+			} catch (err) {
+				// NO-OP
+			}
+		}
+
+		try {
 			const workspaceDir = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0)
-			const shadowDir = this.providerRef.deref()?.context.globalStorageUri.fsPath
 
 			if (!workspaceDir) {
-				this.providerRef.deref()?.log("[getCheckpointService] workspace folder not found")
-				throw new Error("Workspace directory not found")
+				log("[Cline#initializeCheckpoints] workspace folder not found, disabling checkpoints")
+				this.enableCheckpoints = false
+				return undefined
 			}
 
-			if (!shadowDir) {
-				this.providerRef.deref()?.log("[getCheckpointService] shadowDir not found")
-				throw new Error("Global storage directory not found")
+			const globalStorageDir = this.providerRef.deref()?.context.globalStorageUri.fsPath
+
+			if (!globalStorageDir) {
+				log("[Cline#initializeCheckpoints] globalStorageDir not found, disabling checkpoints")
+				this.enableCheckpoints = false
+				return undefined
 			}
 
-			this.checkpointService = await CheckpointServiceFactory.create({
-				strategy: "shadow",
-				options: {
-					taskId: this.taskId,
-					workspaceDir,
-					shadowDir,
-					log: (message) => this.providerRef.deref()?.log(message),
-				},
+			const options: CheckpointServiceOptions = {
+				taskId: this.taskId,
+				workspaceDir,
+				shadowDir: globalStorageDir,
+				log,
+			}
+
+			const service =
+				this.checkpointStorage === "task"
+					? RepoPerTaskCheckpointService.create(options)
+					: RepoPerWorkspaceCheckpointService.create(options)
+
+			service.on("initialize", () => {
+				try {
+					const isCheckpointNeeded =
+						typeof this.clineMessages.find(({ say }) => say === "checkpoint_saved") === "undefined"
+
+					this.checkpointService = service
+
+					if (isCheckpointNeeded) {
+						log("[Cline#initializeCheckpoints] no checkpoints found, saving initial checkpoint")
+						this.checkpointSave()
+					}
+				} catch (err) {
+					log("[Cline#initializeCheckpoints] caught error in on('initialize'), disabling checkpoints")
+					this.enableCheckpoints = false
+				}
+			})
+
+			service.on("checkpoint", ({ isFirst, fromHash: from, toHash: to }) => {
+				try {
+					this.providerRef.deref()?.postMessageToWebview({ type: "currentCheckpointUpdated", text: to })
+
+					this.say("checkpoint_saved", to, undefined, undefined, { isFirst, from, to }).catch((err) => {
+						log("[Cline#initializeCheckpoints] caught unexpected error in say('checkpoint_saved')")
+						console.error(err)
+					})
+				} catch (err) {
+					log(
+						"[Cline#initializeCheckpoints] caught unexpected error in on('checkpoint'), disabling checkpoints",
+					)
+					console.error(err)
+					this.enableCheckpoints = false
+				}
 			})
+
+			service.initShadowGit().catch((err) => {
+				log("[Cline#initializeCheckpoints] caught unexpected error in initShadowGit, disabling checkpoints")
+				console.error(err)
+				this.enableCheckpoints = false
+			})
+
+			return service
+		} catch (err) {
+			log("[Cline#initializeCheckpoints] caught unexpected error, disabling checkpoints")
+			this.enableCheckpoints = false
+			return undefined
+		}
+	}
+
+	private async getInitializedCheckpointService({
+		interval = 250,
+		timeout = 15_000,
+	}: { interval?: number; timeout?: number } = {}) {
+		const service = this.getCheckpointService()
+
+		if (!service || service.isInitialized) {
+			return service
 		}
 
-		return this.checkpointService
+		try {
+			await pWaitFor(
+				() => {
+					console.log("[Cline#getCheckpointService] waiting for service to initialize")
+					return service.isInitialized
+				},
+				{ interval, timeout },
+			)
+			return service
+		} catch (err) {
+			return undefined
+		}
 	}
 
 	public async checkpointDiff({
 		ts,
+		previousCommitHash,
 		commitHash,
 		mode,
 	}: {
 		ts: number
+		previousCommitHash?: string
 		commitHash: string
 		mode: "full" | "checkpoint"
 	}) {
-		if (!this.enableCheckpoints) {
+		const service = await this.getInitializedCheckpointService()
+
+		if (!service) {
 			return
 		}
 
-		let previousCommitHash = undefined
-
-		if (mode === "checkpoint") {
+		if (!previousCommitHash && mode === "checkpoint") {
 			const previousCheckpoint = this.clineMessages
 				.filter(({ say }) => say === "checkpoint_saved")
 				.sort((a, b) => b.ts - a.ts)
@@ -3552,7 +3649,6 @@ export class Cline {
 		}
 
 		try {
-			const service = await this.getCheckpointService()
 			const changes = await service.getDiff({ from: previousCommitHash, to: commitHash })
 
 			if (!changes?.length) {
@@ -3579,30 +3675,26 @@ export class Cline {
 		}
 	}
 
-	public async checkpointSave({ isFirst }: { isFirst: boolean }) {
-		if (!this.enableCheckpoints) {
+	public checkpointSave() {
+		const service = this.getCheckpointService()
+
+		if (!service) {
 			return
 		}
 
-		try {
-			const service = await this.getCheckpointService()
-			const strategy = service.strategy
-			const version = service.version
-
-			const commit = await service.saveCheckpoint(`Task: ${this.taskId}, Time: ${Date.now()}`)
-			const fromHash = service.baseHash
-			const toHash = isFirst ? commit?.commit || fromHash : commit?.commit
-
-			if (toHash) {
-				await this.providerRef.deref()?.postMessageToWebview({ type: "currentCheckpointUpdated", text: toHash })
-
-				const checkpoint = { isFirst, from: fromHash, to: toHash, strategy, version }
-				await this.say("checkpoint_saved", toHash, undefined, undefined, checkpoint)
-			}
-		} catch (err) {
-			this.providerRef.deref()?.log("[checkpointSave] disabling checkpoints for this task")
+		if (!service.isInitialized) {
+			this.providerRef
+				.deref()
+				?.log("[checkpointSave] checkpoints didn't initialize in time, disabling checkpoints for this task")
 			this.enableCheckpoints = false
+			return
 		}
+
+		// Start the checkpoint process in the background.
+		service.saveCheckpoint(`Task: ${this.taskId}, Time: ${Date.now()}`).catch((err) => {
+			console.error("[Cline#checkpointSave] caught unexpected error, disabling checkpoints", err)
+			this.enableCheckpoints = false
+		})
 	}
 
 	public async checkpointRestore({
@@ -3614,7 +3706,9 @@ export class Cline {
 		commitHash: string
 		mode: "preview" | "restore"
 	}) {
-		if (!this.enableCheckpoints) {
+		const service = await this.getInitializedCheckpointService()
+
+		if (!service) {
 			return
 		}
 
@@ -3625,7 +3719,6 @@ export class Cline {
 		}
 
 		try {
-			const service = await this.getCheckpointService()
 			await service.restoreCheckpoint(commitHash)
 
 			await this.providerRef.deref()?.postMessageToWebview({ type: "currentCheckpointUpdated", text: commitHash })

src/core/prompts/__tests__/__snapshots__/system.test.ts.snap

@@ -3899,9 +3899,17 @@ USER'S CUSTOM INSTRUCTIONS
 The following additional instructions are provided by the user, and should be followed to the best of your ability without interfering with the TOOL USE guidelines.
 
 Mode-specific Instructions:
-Depending on the user's request, you may need to do some information gathering (for example using read_file or search_files) to get more context about the task. You may also ask the user clarifying questions to get a better understanding of the task. Once you've gained more context about the user's request, you should create a detailed plan for how to accomplish the task. (You can write the plan to a markdown file if it seems appropriate.)
+1. Do some information gathering (for example using read_file or search_files) to get more context about the task.
 
-Then you might ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and plan the best way to accomplish it. Finally once it seems like you've reached a good plan, use the switch_mode tool to request that the user switch to another mode to implement the solution.
+2. You should also ask the user clarifying questions to get a better understanding of the task.
+
+3. Once you've gained more context about the user's request, you should create a detailed plan for how to accomplish the task. Include Mermaid diagrams if they help make your plan clearer.
+
+4. Ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and plan the best way to accomplish it.
+
+5. Once the user confirms the plan, ask them if they'd like you to write it to a markdown file.
+
+6. Use the switch_mode tool to request that the user switch to another mode to implement the solution.
 
 Rules:
 # Rules from .clinerules-architect:
@@ -4176,7 +4184,7 @@ USER'S CUSTOM INSTRUCTIONS
 The following additional instructions are provided by the user, and should be followed to the best of your ability without interfering with the TOOL USE guidelines.
 
 Mode-specific Instructions:
-You can analyze code, explain concepts, and access external resources. Make sure to answer the user's questions and don't rush to switch to implementing code.
+You can analyze code, explain concepts, and access external resources. Make sure to answer the user's questions and don't rush to switch to implementing code. Include Mermaid diagrams if they help make your response clearer.
 
 Rules:
 # Rules from .clinerules-ask:

src/core/prompts/system.ts

@@ -7,6 +7,7 @@ import {
 	defaultModeSlug,
 	ModeConfig,
 	getModeBySlug,
+	getGroupName,
 } from "../../shared/modes"
 import { DiffStrategy } from "../diff/DiffStrategy"
 import { McpHub } from "../../services/mcp/McpHub"
@@ -50,15 +51,17 @@ async function generatePrompt(
 	// If diff is disabled, don't pass the diffStrategy
 	const effectiveDiffStrategy = diffEnabled ? diffStrategy : undefined
 
-	const [mcpServersSection, modesSection] = await Promise.all([
-		getMcpServersSection(mcpHub, effectiveDiffStrategy, enableMcpServerCreation),
-		getModesSection(context),
-	])
-
 	// Get the full mode config to ensure we have the role definition
 	const modeConfig = getModeBySlug(mode, customModeConfigs) || modes.find((m) => m.slug === mode) || modes[0]
 	const roleDefinition = promptComponent?.roleDefinition || modeConfig.roleDefinition
 
+	const [modesSection, mcpServersSection] = await Promise.all([
+		getModesSection(context),
+		modeConfig.groups.some((groupEntry) => getGroupName(groupEntry) === "mcp")
+			? getMcpServersSection(mcpHub, effectiveDiffStrategy, enableMcpServerCreation)
+			: Promise.resolve(""),
+	])
+
 	const basePrompt = `${roleDefinition}
 
 ${getSharedToolUseSection()}

src/core/sliding-window/__tests__/sliding-window.test.ts

@@ -3,12 +3,35 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 
 import { ModelInfo } from "../../../shared/api"
-import {
-	TOKEN_BUFFER_PERCENTAGE,
-	estimateTokenCount,
-	truncateConversation,
-	truncateConversationIfNeeded,
-} from "../index"
+import { ApiHandler } from "../../../api"
+import { BaseProvider } from "../../../api/providers/base-provider"
+import { TOKEN_BUFFER_PERCENTAGE } from "../index"
+import { estimateTokenCount, truncateConversation, truncateConversationIfNeeded } from "../index"
+
+// Create a mock ApiHandler for testing
+class MockApiHandler extends BaseProvider {
+	createMessage(): any {
+		throw new Error("Method not implemented.")
+	}
+
+	getModel(): { id: string; info: ModelInfo } {
+		return {
+			id: "test-model",
+			info: {
+				contextWindow: 100000,
+				maxTokens: 50000,
+				supportsPromptCache: true,
+				supportsImages: false,
+				inputPrice: 0,
+				outputPrice: 0,
+				description: "Test model",
+			},
+		}
+	}
+}
+
+// Create a singleton instance for tests
+const mockApiHandler = new MockApiHandler()
 
 /**
  * Tests for the truncateConversation function
@@ -100,134 +123,91 @@ describe("truncateConversation", () => {
 })
 
 /**
- * Tests for the getMaxTokens function (private but tested through truncateConversationIfNeeded)
+ * Tests for the estimateTokenCount function
  */
-describe("getMaxTokens", () => {
-	// We'll test this indirectly through truncateConversationIfNeeded
-	const createModelInfo = (contextWindow: number, maxTokens?: number): ModelInfo => ({
-		contextWindow,
-		supportsPromptCache: true, // Not relevant for getMaxTokens
-		maxTokens,
+describe("estimateTokenCount", () => {
+	it("should return 0 for empty or undefined content", async () => {
+		expect(await estimateTokenCount([], mockApiHandler)).toBe(0)
+		// @ts-ignore - Testing with undefined
+		expect(await estimateTokenCount(undefined, mockApiHandler)).toBe(0)
 	})
 
-	// Reuse across tests for consistency
-	const messages: Anthropic.Messages.MessageParam[] = [
-		{ role: "user", content: "First message" },
-		{ role: "assistant", content: "Second message" },
-		{ role: "user", content: "Third message" },
-		{ role: "assistant", content: "Fourth message" },
-		{ role: "user", content: "Fifth message" },
-	]
-
-	it("should use maxTokens as buffer when specified", () => {
-		const modelInfo = createModelInfo(100000, 50000)
-		// Max tokens = 100000 - 50000 = 50000
-
-		// Create messages with very small content in the last one to avoid token overflow
-		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
+	it("should estimate tokens for text blocks", async () => {
+		const content: Array<Anthropic.Messages.ContentBlockParam> = [
+			{ type: "text", text: "This is a text block with 36 characters" },
+		]
 
-		// Account for the dynamic buffer which is 10% of context window (10,000 tokens)
-		// Below max tokens and buffer - no truncation
-		const result1 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 39999, // Well below threshold + dynamic buffer
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result1).toEqual(messagesWithSmallContent)
+		// With tiktoken, the exact token count may differ from character-based estimation
+		// Instead of expecting an exact number, we verify it's a reasonable positive number
+		const result = await estimateTokenCount(content, mockApiHandler)
+		expect(result).toBeGreaterThan(0)
 
-		// Above max tokens - truncate
-		const result2 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 50001, // Above threshold
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result2).not.toEqual(messagesWithSmallContent)
-		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
+		// We can also verify that longer text results in more tokens
+		const longerContent: Array<Anthropic.Messages.ContentBlockParam> = [
+			{
+				type: "text",
+				text: "This is a longer text block with significantly more characters to encode into tokens",
+			},
+		]
+		const longerResult = await estimateTokenCount(longerContent, mockApiHandler)
+		expect(longerResult).toBeGreaterThan(result)
 	})
 
-	it("should use 20% of context window as buffer when maxTokens is undefined", () => {
-		const modelInfo = createModelInfo(100000, undefined)
-		// Max tokens = 100000 - (100000 * 0.2) = 80000
+	it("should estimate tokens for image blocks based on data size", async () => {
+		// Small image
+		const smallImage: Array<Anthropic.Messages.ContentBlockParam> = [
+			{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "small_dummy_data" } },
+		]
+		// Larger image with more data
+		const largerImage: Array<Anthropic.Messages.ContentBlockParam> = [
+			{ type: "image", source: { type: "base64", media_type: "image/png", data: "X".repeat(1000) } },
+		]
 
-		// Create messages with very small content in the last one to avoid token overflow
-		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
+		// Verify the token count scales with the size of the image data
+		const smallImageTokens = await estimateTokenCount(smallImage, mockApiHandler)
+		const largerImageTokens = await estimateTokenCount(largerImage, mockApiHandler)
 
-		// Account for the dynamic buffer which is 10% of context window (10,000 tokens)
-		// Below max tokens and buffer - no truncation
-		const result1 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 69999, // Well below threshold + dynamic buffer
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result1).toEqual(messagesWithSmallContent)
+		// Small image should have some tokens
+		expect(smallImageTokens).toBeGreaterThan(0)
 
-		// Above max tokens - truncate
-		const result2 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 80001, // Above threshold
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result2).not.toEqual(messagesWithSmallContent)
-		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
+		// Larger image should have proportionally more tokens
+		expect(largerImageTokens).toBeGreaterThan(smallImageTokens)
+
+		// Verify the larger image calculation matches our formula including the 50% fudge factor
+		expect(largerImageTokens).toBe(48)
 	})
 
-	it("should handle small context windows appropriately", () => {
-		const modelInfo = createModelInfo(50000, 10000)
-		// Max tokens = 50000 - 10000 = 40000
+	it("should estimate tokens for mixed content blocks", async () => {
+		const content: Array<Anthropic.Messages.ContentBlockParam> = [
+			{ type: "text", text: "A text block with 30 characters" },
+			{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "dummy_data" } },
+			{ type: "text", text: "Another text with 24 chars" },
+		]
 
-		// Create messages with very small content in the last one to avoid token overflow
-		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
+		// We know image tokens calculation should be consistent
+		const imageTokens = Math.ceil(Math.sqrt("dummy_data".length)) * 1.5
 
-		// Below max tokens and buffer - no truncation
-		const result1 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 34999, // Well below threshold + buffer
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result1).toEqual(messagesWithSmallContent)
+		// With tiktoken, we can't predict exact text token counts,
+		// but we can verify the total is greater than just the image tokens
+		const result = await estimateTokenCount(content, mockApiHandler)
+		expect(result).toBeGreaterThan(imageTokens)
 
-		// Above max tokens - truncate
-		const result2 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 40001, // Above threshold
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result2).not.toEqual(messagesWithSmallContent)
-		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
+		// Also test against a version with only the image to verify text adds tokens
+		const imageOnlyContent: Array<Anthropic.Messages.ContentBlockParam> = [
+			{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "dummy_data" } },
+		]
+		const imageOnlyResult = await estimateTokenCount(imageOnlyContent, mockApiHandler)
+		expect(result).toBeGreaterThan(imageOnlyResult)
 	})
 
-	it("should handle large context windows appropriately", () => {
-		const modelInfo = createModelInfo(200000, 30000)
-		// Max tokens = 200000 - 30000 = 170000
-
-		// Create messages with very small content in the last one to avoid token overflow
-		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
-
-		// Account for the dynamic buffer which is 10% of context window (20,000 tokens for this test)
-		// Below max tokens and buffer - no truncation
-		const result1 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 149999, // Well below threshold + dynamic buffer
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result1).toEqual(messagesWithSmallContent)
+	it("should handle empty text blocks", async () => {
+		const content: Array<Anthropic.Messages.ContentBlockParam> = [{ type: "text", text: "" }]
+		expect(await estimateTokenCount(content, mockApiHandler)).toBe(0)
+	})
 
-		// Above max tokens - truncate
-		const result2 = truncateConversationIfNeeded({
-			messages: messagesWithSmallContent,
-			totalTokens: 170001, // Above threshold
-			contextWindow: modelInfo.contextWindow,
-			maxTokens: modelInfo.maxTokens,
-		})
-		expect(result2).not.toEqual(messagesWithSmallContent)
-		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
+	it("should handle plain string messages", async () => {
+		const content = "This is a plain text message"
+		expect(await estimateTokenCount([{ type: "text", text: content }], mockApiHandler)).toBeGreaterThan(0)
 	})
 })
 
@@ -235,9 +215,9 @@ describe("getMaxTokens", () => {
  * Tests for the truncateConversationIfNeeded function
  */
 describe("truncateConversationIfNeeded", () => {
-	const createModelInfo = (contextWindow: number, supportsPromptCache: boolean, maxTokens?: number): ModelInfo => ({
+	const createModelInfo = (contextWindow: number, maxTokens?: number): ModelInfo => ({
 		contextWindow,
-		supportsPromptCache,
+		supportsPromptCache: true,
 		maxTokens,
 	})
 
@@ -249,8 +229,8 @@ describe("truncateConversationIfNeeded", () => {
 		{ role: "user", content: "Fifth message" },
 	]
 
-	it("should not truncate if tokens are below max tokens threshold", () => {
-		const modelInfo = createModelInfo(100000, true, 30000)
+	it("should not truncate if tokens are below max tokens threshold", async () => {
+		const modelInfo = createModelInfo(100000, 30000)
 		const maxTokens = 100000 - 30000 // 70000
 		const dynamicBuffer = modelInfo.contextWindow * TOKEN_BUFFER_PERCENTAGE // 10000
 		const totalTokens = 70000 - dynamicBuffer - 1 // Just below threshold - buffer
@@ -258,17 +238,18 @@ describe("truncateConversationIfNeeded", () => {
 		// Create messages with very small content in the last one to avoid token overflow
 		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
 
-		const result = truncateConversationIfNeeded({
+		const result = await truncateConversationIfNeeded({
 			messages: messagesWithSmallContent,
 			totalTokens,
 			contextWindow: modelInfo.contextWindow,
 			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
 		})
 		expect(result).toEqual(messagesWithSmallContent) // No truncation occurs
 	})
 
-	it("should truncate if tokens are above max tokens threshold", () => {
-		const modelInfo = createModelInfo(100000, true, 30000)
+	it("should truncate if tokens are above max tokens threshold", async () => {
+		const modelInfo = createModelInfo(100000, 30000)
 		const maxTokens = 100000 - 30000 // 70000
 		const totalTokens = 70001 // Above threshold
 
@@ -279,68 +260,73 @@ describe("truncateConversationIfNeeded", () => {
 		// With 4 messages after the first, 0.5 fraction means remove 2 messages
 		const expectedResult = [messagesWithSmallContent[0], messagesWithSmallContent[3], messagesWithSmallContent[4]]
 
-		const result = truncateConversationIfNeeded({
+		const result = await truncateConversationIfNeeded({
 			messages: messagesWithSmallContent,
 			totalTokens,
 			contextWindow: modelInfo.contextWindow,
 			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
 		})
 		expect(result).toEqual(expectedResult)
 	})
 
-	it("should work with non-prompt caching models the same as prompt caching models", () => {
+	it("should work with non-prompt caching models the same as prompt caching models", async () => {
 		// The implementation no longer differentiates between prompt caching and non-prompt caching models
-		const modelInfo1 = createModelInfo(100000, true, 30000)
-		const modelInfo2 = createModelInfo(100000, false, 30000)
+		const modelInfo1 = createModelInfo(100000, 30000)
+		const modelInfo2 = createModelInfo(100000, 30000)
 
 		// Create messages with very small content in the last one to avoid token overflow
 		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
 
 		// Test below threshold
 		const belowThreshold = 69999
-		expect(
-			truncateConversationIfNeeded({
-				messages: messagesWithSmallContent,
-				totalTokens: belowThreshold,
-				contextWindow: modelInfo1.contextWindow,
-				maxTokens: modelInfo1.maxTokens,
-			}),
-		).toEqual(
-			truncateConversationIfNeeded({
-				messages: messagesWithSmallContent,
-				totalTokens: belowThreshold,
-				contextWindow: modelInfo2.contextWindow,
-				maxTokens: modelInfo2.maxTokens,
-			}),
-		)
+		const result1 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: belowThreshold,
+			contextWindow: modelInfo1.contextWindow,
+			maxTokens: modelInfo1.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+
+		const result2 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: belowThreshold,
+			contextWindow: modelInfo2.contextWindow,
+			maxTokens: modelInfo2.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+
+		expect(result1).toEqual(result2)
 
 		// Test above threshold
 		const aboveThreshold = 70001
-		expect(
-			truncateConversationIfNeeded({
-				messages: messagesWithSmallContent,
-				totalTokens: aboveThreshold,
-				contextWindow: modelInfo1.contextWindow,
-				maxTokens: modelInfo1.maxTokens,
-			}),
-		).toEqual(
-			truncateConversationIfNeeded({
-				messages: messagesWithSmallContent,
-				totalTokens: aboveThreshold,
-				contextWindow: modelInfo2.contextWindow,
-				maxTokens: modelInfo2.maxTokens,
-			}),
-		)
+		const result3 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: aboveThreshold,
+			contextWindow: modelInfo1.contextWindow,
+			maxTokens: modelInfo1.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+
+		const result4 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: aboveThreshold,
+			contextWindow: modelInfo2.contextWindow,
+			maxTokens: modelInfo2.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+
+		expect(result3).toEqual(result4)
 	})
 
-	it("should consider incoming content when deciding to truncate", () => {
-		const modelInfo = createModelInfo(100000, true, 30000)
+	it("should consider incoming content when deciding to truncate", async () => {
+		const modelInfo = createModelInfo(100000, 30000)
 		const maxTokens = 30000
 		const availableTokens = modelInfo.contextWindow - maxTokens
 
 		// Test case 1: Small content that won't push us over the threshold
 		const smallContent = [{ type: "text" as const, text: "Small content" }]
-		const smallContentTokens = estimateTokenCount(smallContent)
+		const smallContentTokens = await estimateTokenCount(smallContent, mockApiHandler)
 		const messagesWithSmallContent: Anthropic.Messages.MessageParam[] = [
 			...messages.slice(0, -1),
 			{ role: messages[messages.length - 1].role, content: smallContent },
@@ -349,11 +335,12 @@ describe("truncateConversationIfNeeded", () => {
 		// Set base tokens so total is well below threshold + buffer even with small content added
 		const dynamicBuffer = modelInfo.contextWindow * TOKEN_BUFFER_PERCENTAGE
 		const baseTokensForSmall = availableTokens - smallContentTokens - dynamicBuffer - 10
-		const resultWithSmall = truncateConversationIfNeeded({
+		const resultWithSmall = await truncateConversationIfNeeded({
 			messages: messagesWithSmallContent,
 			totalTokens: baseTokensForSmall,
 			contextWindow: modelInfo.contextWindow,
 			maxTokens,
+			apiHandler: mockApiHandler,
 		})
 		expect(resultWithSmall).toEqual(messagesWithSmallContent) // No truncation
 
@@ -364,7 +351,7 @@ describe("truncateConversationIfNeeded", () => {
 				text: "A very large incoming message that would consume a significant number of tokens and push us over the threshold",
 			},
 		]
-		const largeContentTokens = estimateTokenCount(largeContent)
+		const largeContentTokens = await estimateTokenCount(largeContent, mockApiHandler)
 		const messagesWithLargeContent: Anthropic.Messages.MessageParam[] = [
 			...messages.slice(0, -1),
 			{ role: messages[messages.length - 1].role, content: largeContent },
@@ -372,17 +359,18 @@ describe("truncateConversationIfNeeded", () => {
 
 		// Set base tokens so we're just below threshold without content, but over with content
 		const baseTokensForLarge = availableTokens - Math.floor(largeContentTokens / 2)
-		const resultWithLarge = truncateConversationIfNeeded({
+		const resultWithLarge = await truncateConversationIfNeeded({
 			messages: messagesWithLargeContent,
 			totalTokens: baseTokensForLarge,
 			contextWindow: modelInfo.contextWindow,
 			maxTokens,
+			apiHandler: mockApiHandler,
 		})
 		expect(resultWithLarge).not.toEqual(messagesWithLargeContent) // Should truncate
 
 		// Test case 3: Very large content that will definitely exceed threshold
 		const veryLargeContent = [{ type: "text" as const, text: "X".repeat(1000) }]
-		const veryLargeContentTokens = estimateTokenCount(veryLargeContent)
+		const veryLargeContentTokens = await estimateTokenCount(veryLargeContent, mockApiHandler)
 		const messagesWithVeryLargeContent: Anthropic.Messages.MessageParam[] = [
 			...messages.slice(0, -1),
 			{ role: messages[messages.length - 1].role, content: veryLargeContent },
@@ -390,17 +378,18 @@ describe("truncateConversationIfNeeded", () => {
 
 		// Set base tokens so we're just below threshold without content
 		const baseTokensForVeryLarge = availableTokens - Math.floor(veryLargeContentTokens / 2)
-		const resultWithVeryLarge = truncateConversationIfNeeded({
+		const resultWithVeryLarge = await truncateConversationIfNeeded({
 			messages: messagesWithVeryLargeContent,
 			totalTokens: baseTokensForVeryLarge,
 			contextWindow: modelInfo.contextWindow,
 			maxTokens,
+			apiHandler: mockApiHandler,
 		})
 		expect(resultWithVeryLarge).not.toEqual(messagesWithVeryLargeContent) // Should truncate
 	})
 
-	it("should truncate if tokens are within TOKEN_BUFFER_PERCENTAGE of the threshold", () => {
-		const modelInfo = createModelInfo(100000, true, 30000)
+	it("should truncate if tokens are within TOKEN_BUFFER_PERCENTAGE of the threshold", async () => {
+		const modelInfo = createModelInfo(100000, 30000)
 		const maxTokens = 100000 - 30000 // 70000
 		const dynamicBuffer = modelInfo.contextWindow * TOKEN_BUFFER_PERCENTAGE // 10% of 100000 = 10000
 		const totalTokens = 70000 - dynamicBuffer + 1 // Just within the dynamic buffer of threshold (70000)
@@ -412,101 +401,153 @@ describe("truncateConversationIfNeeded", () => {
 		// With 4 messages after the first, 0.5 fraction means remove 2 messages
 		const expectedResult = [messagesWithSmallContent[0], messagesWithSmallContent[3], messagesWithSmallContent[4]]
 
-		const result = truncateConversationIfNeeded({
+		const result = await truncateConversationIfNeeded({
 			messages: messagesWithSmallContent,
 			totalTokens,
 			contextWindow: modelInfo.contextWindow,
 			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
 		})
 		expect(result).toEqual(expectedResult)
 	})
 })
 
 /**
- * Tests for the estimateTokenCount function
+ * Tests for the getMaxTokens function (private but tested through truncateConversationIfNeeded)
  */
-describe("estimateTokenCount", () => {
-	it("should return 0 for empty or undefined content", () => {
-		expect(estimateTokenCount([])).toBe(0)
-		// @ts-ignore - Testing with undefined
-		expect(estimateTokenCount(undefined)).toBe(0)
+describe("getMaxTokens", () => {
+	// We'll test this indirectly through truncateConversationIfNeeded
+	const createModelInfo = (contextWindow: number, maxTokens?: number): ModelInfo => ({
+		contextWindow,
+		supportsPromptCache: true, // Not relevant for getMaxTokens
+		maxTokens,
 	})
 
-	it("should estimate tokens for text blocks", () => {
-		const content: Array<Anthropic.Messages.ContentBlockParam> = [
-			{ type: "text", text: "This is a text block with 36 characters" },
-		]
+	// Reuse across tests for consistency
+	const messages: Anthropic.Messages.MessageParam[] = [
+		{ role: "user", content: "First message" },
+		{ role: "assistant", content: "Second message" },
+		{ role: "user", content: "Third message" },
+		{ role: "assistant", content: "Fourth message" },
+		{ role: "user", content: "Fifth message" },
+	]
 
-		// With tiktoken, the exact token count may differ from character-based estimation
-		// Instead of expecting an exact number, we verify it's a reasonable positive number
-		const result = estimateTokenCount(content)
-		expect(result).toBeGreaterThan(0)
+	it("should use maxTokens as buffer when specified", async () => {
+		const modelInfo = createModelInfo(100000, 50000)
+		// Max tokens = 100000 - 50000 = 50000
 
-		// We can also verify that longer text results in more tokens
-		const longerContent: Array<Anthropic.Messages.ContentBlockParam> = [
-			{
-				type: "text",
-				text: "This is a longer text block with significantly more characters to encode into tokens",
-			},
-		]
-		const longerResult = estimateTokenCount(longerContent)
-		expect(longerResult).toBeGreaterThan(result)
-	})
+		// Create messages with very small content in the last one to avoid token overflow
+		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
 
-	it("should estimate tokens for image blocks based on data size", () => {
-		// Small image
-		const smallImage: Array<Anthropic.Messages.ContentBlockParam> = [
-			{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "small_dummy_data" } },
-		]
-		// Larger image with more data
-		const largerImage: Array<Anthropic.Messages.ContentBlockParam> = [
-			{ type: "image", source: { type: "base64", media_type: "image/png", data: "X".repeat(1000) } },
-		]
+		// Account for the dynamic buffer which is 10% of context window (10,000 tokens)
+		// Below max tokens and buffer - no truncation
+		const result1 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 39999, // Well below threshold + dynamic buffer
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result1).toEqual(messagesWithSmallContent)
 
-		// Verify the token count scales with the size of the image data
-		const smallImageTokens = estimateTokenCount(smallImage)
-		const largerImageTokens = estimateTokenCount(largerImage)
+		// Above max tokens - truncate
+		const result2 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 50001, // Above threshold
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result2).not.toEqual(messagesWithSmallContent)
+		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
+	})
 
-		// Small image should have some tokens
-		expect(smallImageTokens).toBeGreaterThan(0)
+	it("should use 20% of context window as buffer when maxTokens is undefined", async () => {
+		const modelInfo = createModelInfo(100000, undefined)
+		// Max tokens = 100000 - (100000 * 0.2) = 80000
 
-		// Larger image should have proportionally more tokens
-		expect(largerImageTokens).toBeGreaterThan(smallImageTokens)
+		// Create messages with very small content in the last one to avoid token overflow
+		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
 
-		// Verify the larger image calculation matches our formula including the 50% fudge factor
-		expect(largerImageTokens).toBe(48)
+		// Account for the dynamic buffer which is 10% of context window (10,000 tokens)
+		// Below max tokens and buffer - no truncation
+		const result1 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 69999, // Well below threshold + dynamic buffer
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result1).toEqual(messagesWithSmallContent)
+
+		// Above max tokens - truncate
+		const result2 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 80001, // Above threshold
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result2).not.toEqual(messagesWithSmallContent)
+		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
 	})
 
-	it("should estimate tokens for mixed content blocks", () => {
-		const content: Array<Anthropic.Messages.ContentBlockParam> = [
-			{ type: "text", text: "A text block with 30 characters" },
-			{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "dummy_data" } },
-			{ type: "text", text: "Another text with 24 chars" },
-		]
+	it("should handle small context windows appropriately", async () => {
+		const modelInfo = createModelInfo(50000, 10000)
+		// Max tokens = 50000 - 10000 = 40000
 
-		// We know image tokens calculation should be consistent
-		const imageTokens = Math.ceil(Math.sqrt("dummy_data".length)) * 1.5
+		// Create messages with very small content in the last one to avoid token overflow
+		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
 
-		// With tiktoken, we can't predict exact text token counts,
-		// but we can verify the total is greater than just the image tokens
-		const result = estimateTokenCount(content)
-		expect(result).toBeGreaterThan(imageTokens)
+		// Below max tokens and buffer - no truncation
+		const result1 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 34999, // Well below threshold + buffer
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result1).toEqual(messagesWithSmallContent)
 
-		// Also test against a version with only the image to verify text adds tokens
-		const imageOnlyContent: Array<Anthropic.Messages.ContentBlockParam> = [
-			{ type: "image", source: { type: "base64", media_type: "image/jpeg", data: "dummy_data" } },
-		]
-		const imageOnlyResult = estimateTokenCount(imageOnlyContent)
-		expect(result).toBeGreaterThan(imageOnlyResult)
+		// Above max tokens - truncate
+		const result2 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 40001, // Above threshold
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result2).not.toEqual(messagesWithSmallContent)
+		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
 	})
 
-	it("should handle empty text blocks", () => {
-		const content: Array<Anthropic.Messages.ContentBlockParam> = [{ type: "text", text: "" }]
-		expect(estimateTokenCount(content)).toBe(0)
-	})
+	it("should handle large context windows appropriately", async () => {
+		const modelInfo = createModelInfo(200000, 30000)
+		// Max tokens = 200000 - 30000 = 170000
 
-	it("should handle plain string messages", () => {
-		const content = "This is a plain text message"
-		expect(estimateTokenCount([{ type: "text", text: content }])).toBeGreaterThan(0)
+		// Create messages with very small content in the last one to avoid token overflow
+		const messagesWithSmallContent = [...messages.slice(0, -1), { ...messages[messages.length - 1], content: "" }]
+
+		// Account for the dynamic buffer which is 10% of context window (20,000 tokens for this test)
+		// Below max tokens and buffer - no truncation
+		const result1 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 149999, // Well below threshold + dynamic buffer
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result1).toEqual(messagesWithSmallContent)
+
+		// Above max tokens - truncate
+		const result2 = await truncateConversationIfNeeded({
+			messages: messagesWithSmallContent,
+			totalTokens: 170001, // Above threshold
+			contextWindow: modelInfo.contextWindow,
+			maxTokens: modelInfo.maxTokens,
+			apiHandler: mockApiHandler,
+		})
+		expect(result2).not.toEqual(messagesWithSmallContent)
+		expect(result2.length).toBe(3) // Truncated with 0.5 fraction
 	})
 })

src/core/sliding-window/index.ts

@@ -1,53 +1,24 @@
 import { Anthropic } from "@anthropic-ai/sdk"
+import { ApiHandler } from "../../api"
 
-import { Tiktoken } from "js-tiktoken/lite"
-import o200kBase from "js-tiktoken/ranks/o200k_base"
-
-export const TOKEN_FUDGE_FACTOR = 1.5
 /**
  * Default percentage of the context window to use as a buffer when deciding when to truncate
  */
 export const TOKEN_BUFFER_PERCENTAGE = 0.1
 
 /**
- * Counts tokens for user content using tiktoken for text
- * and a size-based calculation for images.
+ * Counts tokens for user content using the provider's token counting implementation.
  *
  * @param {Array<Anthropic.Messages.ContentBlockParam>} content - The content to count tokens for
- * @returns {number} The token count
+ * @param {ApiHandler} apiHandler - The API handler to use for token counting
+ * @returns {Promise<number>} A promise resolving to the token count
  */
-export function estimateTokenCount(content: Array<Anthropic.Messages.ContentBlockParam>): number {
+export async function estimateTokenCount(
+	content: Array<Anthropic.Messages.ContentBlockParam>,
+	apiHandler: ApiHandler,
+): Promise<number> {
 	if (!content || content.length === 0) return 0
-
-	let totalTokens = 0
-	let encoder = null
-
-	// Create encoder
-	encoder = new Tiktoken(o200kBase)
-
-	// Process each content block
-	for (const block of content) {
-		if (block.type === "text") {
-			// Use tiktoken for text token counting
-			const text = block.text || ""
-			if (text.length > 0) {
-				const tokens = encoder.encode(text)
-				totalTokens += tokens.length
-			}
-		} else if (block.type === "image") {
-			// For images, calculate based on data size
-			const imageSource = block.source
-			if (imageSource && typeof imageSource === "object" && "data" in imageSource) {
-				const base64Data = imageSource.data as string
-				totalTokens += Math.ceil(Math.sqrt(base64Data.length))
-			} else {
-				totalTokens += 300 // Conservative estimate for unknown images
-			}
-		}
-	}
-
-	// Add a fudge factor to account for the fact that tiktoken is not always accurate
-	return Math.ceil(totalTokens * TOKEN_FUDGE_FACTOR)
+	return apiHandler.countTokens(content)
 }
 
 /**
@@ -81,6 +52,7 @@ export function truncateConversation(
  * @param {number} totalTokens - The total number of tokens in the conversation (excluding the last user message).
  * @param {number} contextWindow - The context window size.
  * @param {number} maxTokens - The maximum number of tokens allowed.
+ * @param {ApiHandler} apiHandler - The API handler to use for token counting.
  * @returns {Anthropic.Messages.MessageParam[]} The original or truncated conversation messages.
  */
 
@@ -89,14 +61,23 @@ type TruncateOptions = {
 	totalTokens: number
 	contextWindow: number
 	maxTokens?: number
+	apiHandler: ApiHandler
 }
 
-export function truncateConversationIfNeeded({
+/**
+ * Conditionally truncates the conversation messages if the total token count
+ * exceeds the model's limit, considering the size of incoming content.
+ *
+ * @param {TruncateOptions} options - The options for truncation
+ * @returns {Promise<Anthropic.Messages.MessageParam[]>} The original or truncated conversation messages.
+ */
+export async function truncateConversationIfNeeded({
 	messages,
 	totalTokens,
 	contextWindow,
 	maxTokens,
-}: TruncateOptions): Anthropic.Messages.MessageParam[] {
+	apiHandler,
+}: TruncateOptions): Promise<Anthropic.Messages.MessageParam[]> {
 	// Calculate the maximum tokens reserved for response
 	const reservedTokens = maxTokens || contextWindow * 0.2
 
@@ -104,8 +85,8 @@ export function truncateConversationIfNeeded({
 	const lastMessage = messages[messages.length - 1]
 	const lastMessageContent = lastMessage.content
 	const lastMessageTokens = Array.isArray(lastMessageContent)
-		? estimateTokenCount(lastMessageContent)
-		: estimateTokenCount([{ type: "text", text: lastMessageContent as string }])
+		? await estimateTokenCount(lastMessageContent, apiHandler)
+		: await estimateTokenCount([{ type: "text", text: lastMessageContent as string }], apiHandler)
 
 	// Calculate total effective tokens (totalTokens never includes the last message)
 	const effectiveTokens = totalTokens + lastMessageTokens

src/core/webview/ClineProvider.ts

@@ -9,6 +9,7 @@ import * as vscode from "vscode"
 import simpleGit from "simple-git"
 
 import { ApiConfiguration, ApiProvider, ModelInfo } from "../../shared/api"
+import { CheckpointStorage } from "../../shared/checkpoints"
 import { findLast } from "../../shared/array"
 import { CustomSupportPrompts, supportPrompt } from "../../shared/support-prompt"
 import { GlobalFileNames } from "../../shared/globalFileNames"
@@ -466,8 +467,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		const {
 			apiConfiguration,
 			customModePrompts,
-			diffEnabled,
+			diffEnabled: enableDiff,
 			enableCheckpoints,
+			checkpointStorage,
 			fuzzyMatchThreshold,
 			mode,
 			customInstructions: globalInstructions,
@@ -481,8 +483,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			provider: this,
 			apiConfiguration,
 			customInstructions: effectiveInstructions,
-			enableDiff: diffEnabled,
+			enableDiff,
 			enableCheckpoints,
+			checkpointStorage,
 			fuzzyMatchThreshold,
 			task,
 			images,
@@ -497,8 +500,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		const {
 			apiConfiguration,
 			customModePrompts,
-			diffEnabled,
+			diffEnabled: enableDiff,
 			enableCheckpoints,
+			checkpointStorage,
 			fuzzyMatchThreshold,
 			mode,
 			customInstructions: globalInstructions,
@@ -508,12 +512,17 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		const modePrompt = customModePrompts?.[mode] as PromptComponent
 		const effectiveInstructions = [globalInstructions, modePrompt?.customInstructions].filter(Boolean).join("\n\n")
 
+		// TODO: The `checkpointStorage` value should be derived from the
+		// task data on disk; the current setting could be different than
+		// the setting at the time the task was created.
+
 		const newCline = new Cline({
 			provider: this,
 			apiConfiguration,
 			customInstructions: effectiveInstructions,
-			enableDiff: diffEnabled,
+			enableDiff,
 			enableCheckpoints,
+			checkpointStorage,
 			fuzzyMatchThreshold,
 			historyItem,
 			experiments,
@@ -663,7 +672,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
             <div id="root"></div>
-            <script nonce="${nonce}" src="${scriptUri}"></script>
+            <script nonce="${nonce}" type="module" src="${scriptUri}"></script>
           </body>
         </html>
       `
@@ -1182,6 +1191,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						await this.updateGlobalState("enableCheckpoints", enableCheckpoints)
 						await this.postStateToWebview()
 						break
+					case "checkpointStorage":
+						console.log(`[ClineProvider] checkpointStorage: ${message.text}`)
+						const checkpointStorage = message.text ?? "task"
+						await this.updateGlobalState("checkpointStorage", checkpointStorage)
+						await this.postStateToWebview()
+						break
 					case "browserViewportSize":
 						const browserViewportSize = message.text ?? "900x600"
 						await this.updateGlobalState("browserViewportSize", browserViewportSize)
@@ -1391,6 +1406,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						await this.updateGlobalState("maxOpenTabsContext", tabCount)
 						await this.postStateToWebview()
 						break
+					case "browserToolEnabled":
+						await this.updateGlobalState("browserToolEnabled", message.bool ?? true)
+						await this.postStateToWebview()
+						break
 					case "enhancementApiConfigId":
 						await this.updateGlobalState("enhancementApiConfigId", message.text)
 						await this.postStateToWebview()
@@ -1839,6 +1858,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			modelTemperature,
 			modelMaxTokens,
 			modelMaxThinkingTokens,
+			lmStudioDraftModelId,
+			lmStudioSpeculativeDecodingEnabled,
 		} = apiConfiguration
 		await Promise.all([
 			this.updateGlobalState("apiProvider", apiProvider),
@@ -1888,6 +1909,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.updateGlobalState("modelTemperature", modelTemperature),
 			this.updateGlobalState("modelMaxTokens", modelMaxTokens),
 			this.updateGlobalState("anthropicThinking", modelMaxThinkingTokens),
+			this.updateGlobalState("lmStudioDraftModelId", lmStudioDraftModelId),
+			this.updateGlobalState("lmStudioSpeculativeDecodingEnabled", lmStudioSpeculativeDecodingEnabled),
 		])
 		if (this.getCurrentCline()) {
 			this.getCurrentCline()!.api = buildApiHandler(apiConfiguration)
@@ -2093,12 +2116,30 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		// delete task from the task history state
 		await this.deleteTaskFromState(id)
 
-		// check if checkpoints are enabled
+		// Delete the task files.
+		const apiConversationHistoryFileExists = await fileExistsAtPath(apiConversationHistoryFilePath)
+
+		if (apiConversationHistoryFileExists) {
+			await fs.unlink(apiConversationHistoryFilePath)
+		}
+
+		const uiMessagesFileExists = await fileExistsAtPath(uiMessagesFilePath)
+
+		if (uiMessagesFileExists) {
+			await fs.unlink(uiMessagesFilePath)
+		}
+
+		const legacyMessagesFilePath = path.join(taskDirPath, "claude_messages.json")
+
+		if (await fileExistsAtPath(legacyMessagesFilePath)) {
+			await fs.unlink(legacyMessagesFilePath)
+		}
+
 		const { enableCheckpoints } = await this.getState()
-		// get the base directory of the project
 		const baseDir = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0)
 
-		// delete checkpoints branch from project git repo
+		// Delete checkpoints branch.
+		// TODO: Also delete the workspace branch if it exists.
 		if (enableCheckpoints && baseDir) {
 			const branchSummary = await simpleGit(baseDir)
 				.branch(["-D", `roo-code-checkpoints-${id}`])
@@ -2109,15 +2150,22 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			}
 		}
 
-		// delete the entire task directory including checkpoints and all content
-		try {
-			await fs.rm(taskDirPath, { recursive: true, force: true })
-			console.log(`[deleteTaskWithId${id}] removed task directory`)
-		} catch (error) {
-			console.error(
-				`[deleteTaskWithId${id}] failed to remove task directory: ${error instanceof Error ? error.message : String(error)}`,
-			)
+		// Delete checkpoints directory
+		const checkpointsDir = path.join(taskDirPath, "checkpoints")
+
+		if (await fileExistsAtPath(checkpointsDir)) {
+			try {
+				await fs.rm(checkpointsDir, { recursive: true, force: true })
+				console.log(`[deleteTaskWithId${id}] removed checkpoints repo`)
+			} catch (error) {
+				console.error(
+					`[deleteTaskWithId${id}] failed to remove checkpoints repo: ${error instanceof Error ? error.message : String(error)}`,
+				)
+			}
 		}
+
+		// Succeeds if the dir is empty.
+		await fs.rmdir(taskDirPath)
 	}
 
 	async deleteTaskFromState(id: string) {
@@ -2149,6 +2197,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			soundEnabled,
 			diffEnabled,
 			enableCheckpoints,
+			checkpointStorage,
 			taskHistory,
 			soundVolume,
 			browserViewportSize,
@@ -2171,6 +2220,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			autoApprovalEnabled,
 			experiments,
 			maxOpenTabsContext,
+			browserToolEnabled,
 		} = await this.getState()
 
 		const allowedCommands = vscode.workspace.getConfiguration("roo-cline").get<string[]>("allowedCommands") || []
@@ -2198,6 +2248,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			soundEnabled: soundEnabled ?? false,
 			diffEnabled: diffEnabled ?? true,
 			enableCheckpoints: enableCheckpoints ?? true,
+			checkpointStorage: checkpointStorage ?? "task",
 			shouldShowAnnouncement: lastShownAnnouncementId !== this.latestAnnouncementId,
 			allowedCommands,
 			soundVolume: soundVolume ?? 0.5,
@@ -2224,6 +2275,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			mcpServers: this.mcpHub?.getAllServers() ?? [],
 			maxOpenTabsContext: maxOpenTabsContext ?? 20,
 			cwd: cwd,
+			browserToolEnabled: browserToolEnabled ?? true,
 		}
 	}
 
@@ -2325,6 +2377,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			soundEnabled,
 			diffEnabled,
 			enableCheckpoints,
+			checkpointStorage,
 			soundVolume,
 			browserViewportSize,
 			fuzzyMatchThreshold,
@@ -2358,6 +2411,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			modelMaxTokens,
 			modelMaxThinkingTokens,
 			maxOpenTabsContext,
+			browserToolEnabled,
+			lmStudioSpeculativeDecodingEnabled,
+			lmStudioDraftModelId,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -2409,6 +2465,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("soundEnabled") as Promise<boolean | undefined>,
 			this.getGlobalState("diffEnabled") as Promise<boolean | undefined>,
 			this.getGlobalState("enableCheckpoints") as Promise<boolean | undefined>,
+			this.getGlobalState("checkpointStorage") as Promise<CheckpointStorage | undefined>,
 			this.getGlobalState("soundVolume") as Promise<number | undefined>,
 			this.getGlobalState("browserViewportSize") as Promise<string | undefined>,
 			this.getGlobalState("fuzzyMatchThreshold") as Promise<number | undefined>,
@@ -2442,6 +2499,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("modelMaxTokens") as Promise<number | undefined>,
 			this.getGlobalState("anthropicThinking") as Promise<number | undefined>,
 			this.getGlobalState("maxOpenTabsContext") as Promise<number | undefined>,
+			this.getGlobalState("browserToolEnabled") as Promise<boolean | undefined>,
+			this.getGlobalState("lmStudioSpeculativeDecodingEnabled") as Promise<boolean | undefined>,
+			this.getGlobalState("lmStudioDraftModelId") as Promise<string | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -2507,6 +2567,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				modelTemperature,
 				modelMaxTokens,
 				modelMaxThinkingTokens,
+				lmStudioSpeculativeDecodingEnabled,
+				lmStudioDraftModelId,
 			},
 			lastShownAnnouncementId,
 			customInstructions,
@@ -2521,6 +2583,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			soundEnabled: soundEnabled ?? false,
 			diffEnabled: diffEnabled ?? true,
 			enableCheckpoints: enableCheckpoints ?? true,
+			checkpointStorage: checkpointStorage ?? "task",
 			soundVolume,
 			browserViewportSize: browserViewportSize ?? "900x600",
 			screenshotQuality: screenshotQuality ?? 75,
@@ -2574,6 +2637,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			autoApprovalEnabled: autoApprovalEnabled ?? false,
 			customModes,
 			maxOpenTabsContext: maxOpenTabsContext ?? 20,
+			openRouterUseMiddleOutTransform: openRouterUseMiddleOutTransform ?? true,
+			browserToolEnabled: browserToolEnabled ?? true,
 		}
 	}
 

src/core/webview/__tests__/ClineProvider.test.ts

@@ -376,6 +376,7 @@ describe("ClineProvider", () => {
 			soundEnabled: false,
 			diffEnabled: false,
 			enableCheckpoints: false,
+			checkpointStorage: "task",
 			writeDelayMs: 1000,
 			browserViewportSize: "900x600",
 			fuzzyMatchThreshold: 1.0,
@@ -387,6 +388,7 @@ describe("ClineProvider", () => {
 			customModes: [],
 			experiments: experimentDefault,
 			maxOpenTabsContext: 20,
+			browserToolEnabled: true,
 		}
 
 		const message: ExtensionMessage = {
@@ -628,6 +630,21 @@ describe("ClineProvider", () => {
 		expect(provider.configManager.setModeConfig).toHaveBeenCalledWith("architect", "new-id")
 	})
 
+	test("handles browserToolEnabled setting", async () => {
+		await provider.resolveWebviewView(mockWebviewView)
+		const messageHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
+
+		// Test browserToolEnabled
+		await messageHandler({ type: "browserToolEnabled", bool: true })
+		expect(mockContext.globalState.update).toHaveBeenCalledWith("browserToolEnabled", true)
+		expect(mockPostMessage).toHaveBeenCalled()
+
+		// Verify state includes browserToolEnabled
+		const state = await provider.getState()
+		expect(state).toHaveProperty("browserToolEnabled")
+		expect(state.browserToolEnabled).toBe(true) // Default value should be true
+	})
+
 	test("handles request delay settings messages", async () => {
 		await provider.resolveWebviewView(mockWebviewView)
 		const messageHandler = (mockWebviewView.webview.onDidReceiveMessage as jest.Mock).mock.calls[0][0]
@@ -715,6 +732,7 @@ describe("ClineProvider", () => {
 			mode: "code",
 			diffEnabled: true,
 			enableCheckpoints: false,
+			checkpointStorage: "task",
 			fuzzyMatchThreshold: 1.0,
 			experiments: experimentDefault,
 		} as any)
@@ -733,6 +751,7 @@ describe("ClineProvider", () => {
 			customInstructions: modeCustomInstructions,
 			enableDiff: true,
 			enableCheckpoints: false,
+			checkpointStorage: "task",
 			fuzzyMatchThreshold: 1.0,
 			task: "Test task",
 			experiments: experimentDefault,

src/extension.ts

@@ -5,7 +5,7 @@ import { createClineAPI } from "./exports"
 import "./utils/path" // Necessary to have access to String.prototype.toPosix.
 import { CodeActionProvider } from "./core/CodeActionProvider"
 import { DIFF_VIEW_URI_SCHEME } from "./integrations/editor/DiffViewProvider"
-import { handleUri, registerCommands, registerCodeActions, registerTerminalActions } from "./activate"
+import { handleUri, registerCommands, registerCodeActions } from "./activate"
 import { McpServerManager } from "./services/mcp/McpServerManager"
 
 /**
@@ -81,12 +81,11 @@ export function activate(context: vscode.ExtensionContext) {
 	)
 
 	registerCodeActions(context)
-	registerTerminalActions(context)
 
 	return createClineAPI(outputChannel, sidebarProvider)
 }
 
-// This method is called when your extension is deactivated
+// This method is called when your extension is deactivated.
 export async function deactivate() {
 	outputChannel.appendLine("Roo-Code extension deactivated")
 	// Clean up MCP server manager

src/services/checkpoints/CheckpointServiceFactory.ts

@@ -1,29 +0,0 @@
-import { LocalCheckpointService, LocalCheckpointServiceOptions } from "./LocalCheckpointService"
-import { ShadowCheckpointService, ShadowCheckpointServiceOptions } from "./ShadowCheckpointService"
-
-export type CreateCheckpointServiceFactoryOptions =
-	| {
-			strategy: "local"
-			options: LocalCheckpointServiceOptions
-	  }
-	| {
-			strategy: "shadow"
-			options: ShadowCheckpointServiceOptions
-	  }
-
-type CheckpointServiceType<T extends CreateCheckpointServiceFactoryOptions> = T extends { strategy: "local" }
-	? LocalCheckpointService
-	: T extends { strategy: "shadow" }
-		? ShadowCheckpointService
-		: never
-
-export class CheckpointServiceFactory {
-	public static create<T extends CreateCheckpointServiceFactoryOptions>(options: T): CheckpointServiceType<T> {
-		switch (options.strategy) {
-			case "local":
-				return LocalCheckpointService.create(options.options) as any
-			case "shadow":
-				return ShadowCheckpointService.create(options.options) as any
-		}
-	}
-}

src/services/checkpoints/LocalCheckpointService.ts

@@ -1,440 +0,0 @@
-import fs from "fs/promises"
-import { existsSync } from "fs"
-import path from "path"
-
-import simpleGit, { SimpleGit, CleanOptions } from "simple-git"
-
-import { CheckpointStrategy, CheckpointService, CheckpointServiceOptions } from "./types"
-
-export interface LocalCheckpointServiceOptions extends CheckpointServiceOptions {}
-
-/**
- * The CheckpointService provides a mechanism for storing a snapshot of the
- * current VSCode workspace each time a Roo Code tool is executed. It uses Git
- * under the hood.
- *
- * HOW IT WORKS
- *
- * Two branches are used:
- *  - A main branch for normal operation (the branch you are currently on).
- *  - A hidden branch for storing checkpoints.
- *
- * Saving a checkpoint:
- *  - A temporary branch is created to store the current state.
- *  - All changes (including untracked files) are staged and committed on the temp branch.
- *  - The hidden branch is reset to match main.
- *  - The temporary branch commit is cherry-picked onto the hidden branch.
- *  - The workspace is restored to its original state and the temp branch is deleted.
- *
- * Restoring a checkpoint:
- *  - The workspace is restored to the state of the specified checkpoint using
- *    `git restore` and `git clean`.
- *
- * This approach allows for:
- *  - Non-destructive version control (main branch remains untouched).
- *  - Preservation of the full history of checkpoints.
- *  - Safe restoration to any previous checkpoint.
- *  - Atomic checkpoint operations with proper error recovery.
- *
- * NOTES
- *
- *  - Git must be installed.
- *  - If the current working directory is not a Git repository, we will
- *    initialize a new one with a .gitkeep file.
- *  - If you manually edit files and then restore a checkpoint, the changes
- *    will be lost. Addressing this adds some complexity to the implementation
- *    and it's not clear whether it's worth it.
- */
-
-export class LocalCheckpointService implements CheckpointService {
-	private static readonly USER_NAME = "Roo Code"
-	private static readonly USER_EMAIL = "[email protected]"
-	private static readonly CHECKPOINT_BRANCH = "roo-code-checkpoints"
-	private static readonly STASH_BRANCH = "roo-code-stash"
-
-	public readonly strategy: CheckpointStrategy = "local"
-	public readonly version = 1
-
-	public get baseHash() {
-		return this._baseHash
-	}
-
-	constructor(
-		public readonly taskId: string,
-		public readonly git: SimpleGit,
-		public readonly workspaceDir: string,
-		private readonly mainBranch: string,
-		private _baseHash: string,
-		private readonly hiddenBranch: string,
-		private readonly log: (message: string) => void,
-	) {}
-
-	private async ensureBranch(expectedBranch: string) {
-		const branch = await this.git.revparse(["--abbrev-ref", "HEAD"])
-
-		if (branch.trim() !== expectedBranch) {
-			throw new Error(`Git branch mismatch: expected '${expectedBranch}' but found '${branch}'`)
-		}
-	}
-
-	public async getDiff({ from, to }: { from?: string; to?: string }) {
-		const result = []
-
-		if (!from) {
-			from = this.baseHash
-		}
-
-		const { files } = await this.git.diffSummary([`${from}..${to}`])
-
-		for (const file of files.filter((f) => !f.binary)) {
-			const relPath = file.file
-			const absPath = path.join(this.workspaceDir, relPath)
-			const before = await this.git.show([`${from}:${relPath}`]).catch(() => "")
-
-			const after = to
-				? await this.git.show([`${to}:${relPath}`]).catch(() => "")
-				: await fs.readFile(absPath, "utf8").catch(() => "")
-
-			result.push({
-				paths: { relative: relPath, absolute: absPath },
-				content: { before, after },
-			})
-		}
-
-		return result
-	}
-
-	private async restoreMain({
-		branch,
-		stashSha,
-		force = false,
-	}: {
-		branch: string
-		stashSha: string
-		force?: boolean
-	}) {
-		let currentBranch = await this.git.revparse(["--abbrev-ref", "HEAD"])
-
-		if (currentBranch !== this.mainBranch) {
-			if (force) {
-				try {
-					await this.git.checkout(["-f", this.mainBranch])
-				} catch (err) {
-					this.log(
-						`[restoreMain] failed to force checkout ${this.mainBranch}: ${err instanceof Error ? err.message : String(err)}`,
-					)
-				}
-			} else {
-				try {
-					await this.git.checkout(this.mainBranch)
-				} catch (err) {
-					this.log(
-						`[restoreMain] failed to checkout ${this.mainBranch}: ${err instanceof Error ? err.message : String(err)}`,
-					)
-
-					// Escalate to a forced checkout if we can't checkout the
-					// main branch under normal circumstances.
-					currentBranch = await this.git.revparse(["--abbrev-ref", "HEAD"])
-
-					if (currentBranch !== this.mainBranch) {
-						await this.git.checkout(["-f", this.mainBranch]).catch(() => {})
-					}
-				}
-			}
-		}
-
-		currentBranch = await this.git.revparse(["--abbrev-ref", "HEAD"])
-
-		if (currentBranch !== this.mainBranch) {
-			throw new Error(`Unable to restore ${this.mainBranch}`)
-		}
-
-		if (stashSha) {
-			this.log(`[restoreMain] applying stash ${stashSha}`)
-
-			try {
-				await this.git.raw(["stash", "apply", "--index", stashSha])
-			} catch (err) {
-				this.log(`[restoreMain] Failed to apply stash: ${err instanceof Error ? err.message : String(err)}`)
-			}
-		}
-
-		this.log(`[restoreMain] restoring from ${branch} branch`)
-
-		try {
-			await this.git.raw(["restore", "--source", branch, "--worktree", "--", "."])
-		} catch (err) {
-			this.log(`[restoreMain] Failed to restore branch: ${err instanceof Error ? err.message : String(err)}`)
-		}
-	}
-
-	public async saveCheckpoint(message: string) {
-		const startTime = Date.now()
-
-		await this.ensureBranch(this.mainBranch)
-
-		const stashSha = (await this.git.raw(["stash", "create"])).trim()
-		const latestSha = await this.git.revparse([this.hiddenBranch])
-
-		/**
-		 * PHASE: Create stash
-		 * Mutations:
-		 *   - Create branch
-		 *   - Change branch
-		 */
-		const stashBranch = `${LocalCheckpointService.STASH_BRANCH}-${Date.now()}`
-		await this.git.checkout(["-b", stashBranch])
-		this.log(`[saveCheckpoint] created and checked out ${stashBranch}`)
-
-		/**
-		 * Phase: Stage stash
-		 * Mutations: None
-		 * Recovery:
-		 *   - UNDO: Create branch
-		 *   - UNDO: Change branch
-		 */
-		try {
-			await this.git.add(["-A"])
-		} catch (err) {
-			this.log(
-				`[saveCheckpoint] failed in stage stash phase: ${err instanceof Error ? err.message : String(err)}`,
-			)
-			await this.restoreMain({ branch: stashBranch, stashSha, force: true })
-			await this.git.branch(["-D", stashBranch]).catch(() => {})
-			throw err
-		}
-
-		/**
-		 * Phase: Commit stash
-		 * Mutations:
-		 *   - Commit stash
-		 *   - Change branch
-		 * Recovery:
-		 *   - UNDO: Create branch
-		 *   - UNDO: Change branch
-		 */
-		let stashCommit
-
-		try {
-			stashCommit = await this.git.commit(message, undefined, { "--no-verify": null })
-			this.log(`[saveCheckpoint] stashCommit: ${message} -> ${JSON.stringify(stashCommit)}`)
-		} catch (err) {
-			this.log(
-				`[saveCheckpoint] failed in stash commit phase: ${err instanceof Error ? err.message : String(err)}`,
-			)
-			await this.restoreMain({ branch: stashBranch, stashSha, force: true })
-			await this.git.branch(["-D", stashBranch]).catch(() => {})
-			throw err
-		}
-
-		if (!stashCommit) {
-			this.log("[saveCheckpoint] no stash commit")
-			await this.restoreMain({ branch: stashBranch, stashSha })
-			await this.git.branch(["-D", stashBranch])
-			return undefined
-		}
-
-		/**
-		 * PHASE: Diff
-		 * Mutations:
-		 *   - Checkout hidden branch
-		 * Recovery:
-		 *   - UNDO: Create branch
-		 *   - UNDO: Change branch
-		 *   - UNDO: Commit stash
-		 */
-		let diff
-
-		try {
-			diff = await this.git.diff([latestSha, stashBranch])
-		} catch (err) {
-			this.log(`[saveCheckpoint] failed in diff phase: ${err instanceof Error ? err.message : String(err)}`)
-			await this.restoreMain({ branch: stashBranch, stashSha, force: true })
-			await this.git.branch(["-D", stashBranch]).catch(() => {})
-			throw err
-		}
-
-		if (!diff) {
-			this.log("[saveCheckpoint] no diff")
-			await this.restoreMain({ branch: stashBranch, stashSha })
-			await this.git.branch(["-D", stashBranch])
-			return undefined
-		}
-
-		/**
-		 * PHASE: Reset
-		 * Mutations:
-		 *   - Reset hidden branch
-		 * Recovery:
-		 *   - UNDO: Create branch
-		 *   - UNDO: Change branch
-		 *   - UNDO: Commit stash
-		 */
-		try {
-			await this.git.checkout(this.hiddenBranch)
-			this.log(`[saveCheckpoint] checked out ${this.hiddenBranch}`)
-			await this.git.reset(["--hard", this.mainBranch])
-			this.log(`[saveCheckpoint] reset ${this.hiddenBranch}`)
-		} catch (err) {
-			this.log(`[saveCheckpoint] failed in reset phase: ${err instanceof Error ? err.message : String(err)}`)
-			await this.restoreMain({ branch: stashBranch, stashSha, force: true })
-			await this.git.branch(["-D", stashBranch]).catch(() => {})
-			throw err
-		}
-
-		/**
-		 * PHASE: Cherry pick
-		 * Mutations:
-		 *   - Hidden commit (NOTE: reset on hidden branch no longer needed in
-		 *     success scenario.)
-		 * Recovery:
-		 *   - UNDO: Create branch
-		 *   - UNDO: Change branch
-		 *   - UNDO: Commit stash
-		 *   - UNDO: Reset hidden branch
-		 */
-		let commit = ""
-
-		try {
-			try {
-				await this.git.raw(["cherry-pick", stashBranch])
-			} catch (err) {
-				// Check if we're in the middle of a cherry-pick.
-				// If the cherry-pick resulted in an empty commit (e.g., only
-				// deletions) then complete it with --allow-empty.
-				// Otherwise, rethrow the error.
-				if (existsSync(path.join(this.workspaceDir, ".git/CHERRY_PICK_HEAD"))) {
-					await this.git.raw(["commit", "--allow-empty", "--no-edit"])
-				} else {
-					throw err
-				}
-			}
-
-			commit = await this.git.revparse(["HEAD"])
-			this.log(`[saveCheckpoint] cherry-pick commit = ${commit}`)
-		} catch (err) {
-			this.log(
-				`[saveCheckpoint] failed in cherry pick phase: ${err instanceof Error ? err.message : String(err)}`,
-			)
-			await this.git.reset(["--hard", latestSha]).catch(() => {})
-			await this.restoreMain({ branch: stashBranch, stashSha, force: true })
-			await this.git.branch(["-D", stashBranch]).catch(() => {})
-			throw err
-		}
-
-		await this.restoreMain({ branch: stashBranch, stashSha })
-		await this.git.branch(["-D", stashBranch])
-
-		// We've gotten reports that checkpoints can be slow in some cases, so
-		// we'll log the duration of the checkpoint save.
-		const duration = Date.now() - startTime
-		this.log(`[saveCheckpoint] saved checkpoint ${commit} in ${duration}ms`)
-
-		return { commit }
-	}
-
-	public async restoreCheckpoint(commitHash: string) {
-		const startTime = Date.now()
-		await this.ensureBranch(this.mainBranch)
-		await this.git.clean([CleanOptions.FORCE, CleanOptions.RECURSIVE])
-		await this.git.raw(["restore", "--source", commitHash, "--worktree", "--", "."])
-		const duration = Date.now() - startTime
-		this.log(`[restoreCheckpoint] restored checkpoint ${commitHash} in ${duration}ms`)
-	}
-
-	public static async create({ taskId, workspaceDir, log = console.log }: LocalCheckpointServiceOptions) {
-		const git = simpleGit(workspaceDir)
-		const version = await git.version()
-
-		if (!version?.installed) {
-			throw new Error(`Git is not installed. Please install Git if you wish to use checkpoints.`)
-		}
-
-		if (!workspaceDir || !existsSync(workspaceDir)) {
-			throw new Error(`Base directory is not set or does not exist.`)
-		}
-
-		const { currentBranch, currentSha, hiddenBranch } = await LocalCheckpointService.initRepo(git, {
-			taskId,
-			workspaceDir,
-			log,
-		})
-
-		log(
-			`[create] taskId = ${taskId}, workspaceDir = ${workspaceDir}, currentBranch = ${currentBranch}, currentSha = ${currentSha}, hiddenBranch = ${hiddenBranch}`,
-		)
-
-		return new LocalCheckpointService(taskId, git, workspaceDir, currentBranch, currentSha, hiddenBranch, log)
-	}
-
-	private static async initRepo(
-		git: SimpleGit,
-		{ taskId, workspaceDir, log }: Required<LocalCheckpointServiceOptions>,
-	) {
-		const isExistingRepo = existsSync(path.join(workspaceDir, ".git"))
-
-		if (!isExistingRepo) {
-			await git.init()
-			log(`[initRepo] Initialized new Git repository at ${workspaceDir}`)
-		}
-
-		const globalUserName = await git.getConfig("user.name", "global")
-		const localUserName = await git.getConfig("user.name", "local")
-		const userName = localUserName.value || globalUserName.value
-
-		const globalUserEmail = await git.getConfig("user.email", "global")
-		const localUserEmail = await git.getConfig("user.email", "local")
-		const userEmail = localUserEmail.value || globalUserEmail.value
-
-		// Prior versions of this service indiscriminately set the local user
-		// config, and it should not override the global config. To address
-		// this we remove the local user config if it matches the default
-		// user name and email and there's a global config.
-		if (globalUserName.value && localUserName.value === LocalCheckpointService.USER_NAME) {
-			await git.raw(["config", "--unset", "--local", "user.name"])
-		}
-
-		if (globalUserEmail.value && localUserEmail.value === LocalCheckpointService.USER_EMAIL) {
-			await git.raw(["config", "--unset", "--local", "user.email"])
-		}
-
-		// Only set user config if not already configured.
-		if (!userName) {
-			await git.addConfig("user.name", LocalCheckpointService.USER_NAME)
-		}
-
-		if (!userEmail) {
-			await git.addConfig("user.email", LocalCheckpointService.USER_EMAIL)
-		}
-
-		if (!isExistingRepo) {
-			// We need at least one file to commit, otherwise the initial
-			// commit will fail, unless we use the `--allow-empty` flag.
-			// However, using an empty commit causes problems when restoring
-			// the checkpoint (i.e. the `git restore` command doesn't work
-			// for empty commits).
-			await fs.writeFile(path.join(workspaceDir, ".gitkeep"), "")
-			await git.add(".gitkeep")
-			const commit = await git.commit("Initial commit")
-
-			if (!commit.commit) {
-				throw new Error("Failed to create initial commit")
-			}
-
-			log(`[initRepo] Initial commit: ${commit.commit}`)
-		}
-
-		const currentBranch = await git.revparse(["--abbrev-ref", "HEAD"])
-		const currentSha = await git.revparse(["HEAD"])
-
-		const hiddenBranch = `${LocalCheckpointService.CHECKPOINT_BRANCH}-${taskId}`
-		const branchSummary = await git.branch()
-
-		if (!branchSummary.all.includes(hiddenBranch)) {
-			await git.checkoutBranch(hiddenBranch, currentBranch)
-			await git.checkout(currentBranch)
-		}
-
-		return { currentBranch, currentSha, hiddenBranch }
-	}
-}

src/services/checkpoints/RepoPerTaskCheckpointService.ts

@@ -0,0 +1,15 @@
+import * as path from "path"
+
+import { CheckpointServiceOptions } from "./types"
+import { ShadowCheckpointService } from "./ShadowCheckpointService"
+
+export class RepoPerTaskCheckpointService extends ShadowCheckpointService {
+	public static create({ taskId, workspaceDir, shadowDir, log = console.log }: CheckpointServiceOptions) {
+		return new RepoPerTaskCheckpointService(
+			taskId,
+			path.join(shadowDir, "tasks", taskId, "checkpoints"),
+			workspaceDir,
+			log,
+		)
+	}
+}

src/services/checkpoints/RepoPerWorkspaceCheckpointService.ts

@@ -0,0 +1,76 @@
+import * as path from "path"
+import crypto from "crypto"
+
+import { CheckpointServiceOptions } from "./types"
+import { ShadowCheckpointService } from "./ShadowCheckpointService"
+
+export class RepoPerWorkspaceCheckpointService extends ShadowCheckpointService {
+	private async checkoutTaskBranch(source: string) {
+		if (!this.git) {
+			throw new Error("Shadow git repo not initialized")
+		}
+
+		const startTime = Date.now()
+		const branch = `roo-${this.taskId}`
+		const currentBranch = await this.git.revparse(["--abbrev-ref", "HEAD"])
+
+		if (currentBranch === branch) {
+			return
+		}
+
+		this.log(`[${this.constructor.name}#checkoutTaskBranch{${source}}] checking out ${branch}`)
+		const branches = await this.git.branchLocal()
+		let exists = branches.all.includes(branch)
+
+		if (!exists) {
+			await this.git.checkoutLocalBranch(branch)
+		} else {
+			await this.git.checkout(branch)
+		}
+
+		const duration = Date.now() - startTime
+
+		this.log(
+			`[${this.constructor.name}#checkoutTaskBranch{${source}}] ${exists ? "checked out" : "created"} branch "${branch}" in ${duration}ms`,
+		)
+	}
+
+	override async initShadowGit() {
+		return await super.initShadowGit(() => this.checkoutTaskBranch("initShadowGit"))
+	}
+
+	override async saveCheckpoint(message: string) {
+		await this.checkoutTaskBranch("saveCheckpoint")
+		return super.saveCheckpoint(message)
+	}
+
+	override async restoreCheckpoint(commitHash: string) {
+		await this.checkoutTaskBranch("restoreCheckpoint")
+		await super.restoreCheckpoint(commitHash)
+	}
+
+	override async getDiff({ from, to }: { from?: string; to?: string }) {
+		if (!this.git) {
+			throw new Error("Shadow git repo not initialized")
+		}
+
+		await this.checkoutTaskBranch("getDiff")
+
+		if (!from && to) {
+			from = `${to}~`
+		}
+
+		return super.getDiff({ from, to })
+	}
+
+	public static create({ taskId, workspaceDir, shadowDir, log = console.log }: CheckpointServiceOptions) {
+		const workspaceHash = crypto.createHash("sha256").update(workspaceDir).digest("hex").toString().slice(0, 8)
+
+		return new RepoPerWorkspaceCheckpointService(
+			taskId,
+			path.join(shadowDir, "checkpoints", workspaceHash),
+			workspaceDir,
+			log,
+		)
+	}
+}

src/services/checkpoints/ShadowCheckpointService.ts

@@ -1,53 +1,82 @@
 import fs from "fs/promises"
 import os from "os"
 import * as path from "path"
-import { globby } from "globby"
+import EventEmitter from "events"
+
 import simpleGit, { SimpleGit } from "simple-git"
+import { globby } from "globby"
 
 import { GIT_DISABLED_SUFFIX, GIT_EXCLUDES } from "./constants"
-import { CheckpointStrategy, CheckpointService, CheckpointServiceOptions } from "./types"
+import { CheckpointDiff, CheckpointResult, CheckpointEventMap } from "./types"
 
-export interface ShadowCheckpointServiceOptions extends CheckpointServiceOptions {
-	shadowDir: string
-}
+export abstract class ShadowCheckpointService extends EventEmitter {
+	public readonly taskId: string
+	public readonly checkpointsDir: string
+	public readonly workspaceDir: string
 
-export class ShadowCheckpointService implements CheckpointService {
-	public readonly strategy: CheckpointStrategy = "shadow"
-	public readonly version = 1
+	protected _checkpoints: string[] = []
+	protected _baseHash?: string
 
-	private _baseHash?: string
+	protected readonly dotGitDir: string
+	protected git?: SimpleGit
+	protected readonly log: (message: string) => void
+	protected shadowGitConfigWorktree?: string
 
 	public get baseHash() {
 		return this._baseHash
 	}
 
-	private set baseHash(value: string | undefined) {
+	protected set baseHash(value: string | undefined) {
 		this._baseHash = value
 	}
 
-	private readonly shadowGitDir: string
-	private shadowGitConfigWorktree?: string
-
-	private constructor(
-		public readonly taskId: string,
-		public readonly git: SimpleGit,
-		public readonly shadowDir: string,
-		public readonly workspaceDir: string,
-		private readonly log: (message: string) => void,
-	) {
-		this.shadowGitDir = path.join(this.shadowDir, "tasks", this.taskId, "checkpoints", ".git")
+	public get isInitialized() {
+		return !!this.git
+	}
+
+	constructor(taskId: string, checkpointsDir: string, workspaceDir: string, log: (message: string) => void) {
+		super()
+
+		const homedir = os.homedir()
+		const desktopPath = path.join(homedir, "Desktop")
+		const documentsPath = path.join(homedir, "Documents")
+		const downloadsPath = path.join(homedir, "Downloads")
+		const protectedPaths = [homedir, desktopPath, documentsPath, downloadsPath]
+
+		if (protectedPaths.includes(workspaceDir)) {
+			throw new Error(`Cannot use checkpoints in ${workspaceDir}`)
+		}
+
+		this.taskId = taskId
+		this.checkpointsDir = checkpointsDir
+		this.workspaceDir = workspaceDir
+
+		this.dotGitDir = path.join(this.checkpointsDir, ".git")
+		this.log = log
 	}
 
-	private async initShadowGit() {
+	public async initShadowGit(onInit?: () => Promise<void>) {
+		if (this.git) {
+			throw new Error("Shadow git repo already initialized")
+		}
+
+		await fs.mkdir(this.checkpointsDir, { recursive: true })
+		const git = simpleGit(this.checkpointsDir)
+		const gitVersion = await git.version()
+		this.log(`[${this.constructor.name}#create] git = ${gitVersion}`)
+
 		const fileExistsAtPath = (path: string) =>
 			fs
 				.access(path)
 				.then(() => true)
 				.catch(() => false)
 
-		if (await fileExistsAtPath(this.shadowGitDir)) {
-			this.log(`[initShadowGit] shadow git repo already exists at ${this.shadowGitDir}`)
-			const worktree = await this.getShadowGitConfigWorktree()
+		let created = false
+		const startTime = Date.now()
+
+		if (await fileExistsAtPath(this.dotGitDir)) {
+			this.log(`[${this.constructor.name}#initShadowGit] shadow git repo already exists at ${this.dotGitDir}`)
+			const worktree = await this.getShadowGitConfigWorktree(git)
 
 			if (worktree !== this.workspaceDir) {
 				throw new Error(
@@ -55,15 +84,15 @@ export class ShadowCheckpointService implements CheckpointService {
 				)
 			}
 
-			this.baseHash = await this.git.revparse(["--abbrev-ref", "HEAD"])
+			this.baseHash = await git.revparse(["HEAD"])
 		} else {
-			this.log(`[initShadowGit] creating shadow git repo at ${this.workspaceDir}`)
+			this.log(`[${this.constructor.name}#initShadowGit] creating shadow git repo at ${this.checkpointsDir}`)
 
-			await this.git.init()
-			await this.git.addConfig("core.worktree", this.workspaceDir) // Sets the working tree to the current workspace.
-			await this.git.addConfig("commit.gpgSign", "false") // Disable commit signing for shadow repo.
-			await this.git.addConfig("user.name", "Roo Code")
-			await this.git.addConfig("user.email", "[email protected]")
+			await git.init()
+			await git.addConfig("core.worktree", this.workspaceDir) // Sets the working tree to the current workspace.
+			await git.addConfig("commit.gpgSign", "false") // Disable commit signing for shadow repo.
+			await git.addConfig("user.name", "Roo Code")
+			await git.addConfig("user.email", "[email protected]")
 
 			let lfsPatterns: string[] = [] // Get LFS patterns from workspace if they exist.
 
@@ -78,7 +107,7 @@ export class ShadowCheckpointService implements CheckpointService {
 				}
 			} catch (error) {
 				this.log(
-					`[initShadowGit] failed to read .gitattributes: ${error instanceof Error ? error.message : String(error)}`,
+					`[${this.constructor.name}#initShadowGit] failed to read .gitattributes: ${error instanceof Error ? error.message : String(error)}`,
 				)
 			}
 
@@ -87,23 +116,45 @@ export class ShadowCheckpointService implements CheckpointService {
 			// .git/info/exclude is local to the shadow git repo, so it's not
 			// shared with the main repo - and won't conflict with user's
 			// .gitignore.
-			await fs.mkdir(path.join(this.shadowGitDir, "info"), { recursive: true })
-			const excludesPath = path.join(this.shadowGitDir, "info", "exclude")
+			await fs.mkdir(path.join(this.dotGitDir, "info"), { recursive: true })
+			const excludesPath = path.join(this.dotGitDir, "info", "exclude")
 			await fs.writeFile(excludesPath, [...GIT_EXCLUDES, ...lfsPatterns].join("\n"))
-			await this.stageAll()
-			const { commit } = await this.git.commit("initial commit", { "--allow-empty": null })
+			await this.stageAll(git)
+			const { commit } = await git.commit("initial commit", { "--allow-empty": null })
 			this.baseHash = commit
-			this.log(`[initShadowGit] base commit is ${commit}`)
+			created = true
 		}
+
+		const duration = Date.now() - startTime
+		this.log(
+			`[${this.constructor.name}#initShadowGit] initialized shadow repo with base commit ${this.baseHash} in ${duration}ms`,
+		)
+
+		this.git = git
+
+		await onInit?.()
+
+		this.emit("initialize", {
+			type: "initialize",
+			workspaceDir: this.workspaceDir,
+			baseHash: this.baseHash,
+			created,
+			duration,
+		})
+
+		return { created, duration }
 	}
 
-	private async stageAll() {
+	private async stageAll(git: SimpleGit) {
+		// await writeExcludesFile(gitPath, await getLfsPatterns(this.cwd)).
 		await this.renameNestedGitRepos(true)
 
 		try {
-			await this.git.add(".")
+			await git.add(".")
 		} catch (error) {
-			this.log(`[stageAll] failed to add files to git: ${error instanceof Error ? error.message : String(error)}`)
+			this.log(
+				`[${this.constructor.name}#stageAll] failed to add files to git: ${error instanceof Error ? error.message : String(error)}`,
+			)
 		} finally {
 			await this.renameNestedGitRepos(false)
 		}
@@ -137,22 +188,24 @@ export class ShadowCheckpointService implements CheckpointService {
 
 			try {
 				await fs.rename(fullPath, newPath)
-				this.log(`${disable ? "disabled" : "enabled"} nested git repo ${gitPath}`)
+				this.log(
+					`[${this.constructor.name}#renameNestedGitRepos] ${disable ? "disabled" : "enabled"} nested git repo ${gitPath}`,
+				)
 			} catch (error) {
 				this.log(
-					`failed to ${disable ? "disable" : "enable"} nested git repo ${gitPath}: ${error instanceof Error ? error.message : String(error)}`,
+					`[${this.constructor.name}#renameNestedGitRepos] failed to ${disable ? "disable" : "enable"} nested git repo ${gitPath}: ${error instanceof Error ? error.message : String(error)}`,
 				)
 			}
 		}
 	}
 
-	public async getShadowGitConfigWorktree() {
+	private async getShadowGitConfigWorktree(git: SimpleGit) {
 		if (!this.shadowGitConfigWorktree) {
 			try {
-				this.shadowGitConfigWorktree = (await this.git.getConfig("core.worktree")).value || undefined
+				this.shadowGitConfigWorktree = (await git.getConfig("core.worktree")).value || undefined
 			} catch (error) {
 				this.log(
-					`[getShadowGitConfigWorktree] failed to get core.worktree: ${error instanceof Error ? error.message : String(error)}`,
+					`[${this.constructor.name}#getShadowGitConfigWorktree] failed to get core.worktree: ${error instanceof Error ? error.message : String(error)}`,
 				)
 			}
 		}
@@ -160,37 +213,79 @@ export class ShadowCheckpointService implements CheckpointService {
 		return this.shadowGitConfigWorktree
 	}
 
-	public async saveCheckpoint(message: string) {
+	public async saveCheckpoint(message: string): Promise<CheckpointResult | undefined> {
 		try {
+			this.log(`[${this.constructor.name}#saveCheckpoint] starting checkpoint save`)
+
+			if (!this.git) {
+				throw new Error("Shadow git repo not initialized")
+			}
+
 			const startTime = Date.now()
-			await this.stageAll()
+			await this.stageAll(this.git)
 			const result = await this.git.commit(message)
+			const isFirst = this._checkpoints.length === 0
+			const fromHash = this._checkpoints[this._checkpoints.length - 1] ?? this.baseHash!
+			const toHash = result.commit || fromHash
+			this._checkpoints.push(toHash)
+			const duration = Date.now() - startTime
+
+			if (isFirst || result.commit) {
+				this.emit("checkpoint", { type: "checkpoint", isFirst, fromHash, toHash, duration })
+			}
 
 			if (result.commit) {
-				const duration = Date.now() - startTime
-				this.log(`[saveCheckpoint] saved checkpoint ${result.commit} in ${duration}ms`)
+				this.log(
+					`[${this.constructor.name}#saveCheckpoint] checkpoint saved in ${duration}ms -> ${result.commit}`,
+				)
 				return result
 			} else {
+				this.log(`[${this.constructor.name}#saveCheckpoint] found no changes to commit in ${duration}ms`)
 				return undefined
 			}
-		} catch (error) {
-			this.log(
-				`[saveCheckpoint] failed to create checkpoint: ${error instanceof Error ? error.message : String(error)}`,
-			)
-
+		} catch (e) {
+			const error = e instanceof Error ? e : new Error(String(e))
+			this.log(`[${this.constructor.name}#saveCheckpoint] failed to create checkpoint: ${error.message}`)
+			this.emit("error", { type: "error", error })
 			throw error
 		}
 	}
 
 	public async restoreCheckpoint(commitHash: string) {
-		const start = Date.now()
-		await this.git.clean("f", ["-d", "-f"])
-		await this.git.reset(["--hard", commitHash])
-		const duration = Date.now() - start
-		this.log(`[restoreCheckpoint] restored checkpoint ${commitHash} in ${duration}ms`)
+		try {
+			this.log(`[${this.constructor.name}#restoreCheckpoint] starting checkpoint restore`)
+
+			if (!this.git) {
+				throw new Error("Shadow git repo not initialized")
+			}
+
+			const start = Date.now()
+			await this.git.clean("f", ["-d", "-f"])
+			await this.git.reset(["--hard", commitHash])
+
+			// Remove all checkpoints after the specified commitHash.
+			const checkpointIndex = this._checkpoints.indexOf(commitHash)
+
+			if (checkpointIndex !== -1) {
+				this._checkpoints = this._checkpoints.slice(0, checkpointIndex + 1)
+			}
+
+			const duration = Date.now() - start
+			this.emit("restore", { type: "restore", commitHash, duration })
+			this.log(`[${this.constructor.name}#restoreCheckpoint] restored checkpoint ${commitHash} in ${duration}ms`)
+		} catch (e) {
+			const error = e instanceof Error ? e : new Error(String(e))
+			this.log(`[${this.constructor.name}#restoreCheckpoint] failed to restore checkpoint: ${error.message}`)
+			this.emit("error", { type: "error", error })
+			throw error
+		}
 	}
 
-	public async getDiff({ from, to }: { from?: string; to?: string }) {
+	public async getDiff({ from, to }: { from?: string; to?: string }): Promise<CheckpointDiff[]> {
+		if (!this.git) {
+			throw new Error("Shadow git repo not initialized")
+		}
+
 		const result = []
 
 		if (!from) {
@@ -198,11 +293,12 @@ export class ShadowCheckpointService implements CheckpointService {
 		}
 
 		// Stage all changes so that untracked files appear in diff summary.
-		await this.stageAll()
+		await this.stageAll(this.git)
 
+		this.log(`[${this.constructor.name}#getDiff] diffing ${to ? `${from}..${to}` : `${from}..HEAD`}`)
 		const { files } = to ? await this.git.diffSummary([`${from}..${to}`]) : await this.git.diffSummary([from])
 
-		const cwdPath = (await this.getShadowGitConfigWorktree()) || this.workspaceDir || ""
+		const cwdPath = (await this.getShadowGitConfigWorktree(this.git)) || this.workspaceDir || ""
 
 		for (const file of files) {
 			const relPath = file.file
@@ -219,31 +315,23 @@ export class ShadowCheckpointService implements CheckpointService {
 		return result
 	}
 
-	public static async create({ taskId, shadowDir, workspaceDir, log = console.log }: ShadowCheckpointServiceOptions) {
-		try {
-			await simpleGit().version()
-		} catch (error) {
-			throw new Error("Git must be installed to use checkpoints.")
-		}
+	/**
+	 * EventEmitter
+	 */
 
-		const homedir = os.homedir()
-		const desktopPath = path.join(homedir, "Desktop")
-		const documentsPath = path.join(homedir, "Documents")
-		const downloadsPath = path.join(homedir, "Downloads")
-		const protectedPaths = [homedir, desktopPath, documentsPath, downloadsPath]
+	override emit<K extends keyof CheckpointEventMap>(event: K, data: CheckpointEventMap[K]) {
+		return super.emit(event, data)
+	}
 
-		if (protectedPaths.includes(workspaceDir)) {
-			throw new Error(`Cannot use checkpoints in ${workspaceDir}`)
-		}
+	override on<K extends keyof CheckpointEventMap>(event: K, listener: (data: CheckpointEventMap[K]) => void) {
+		return super.on(event, listener)
+	}
 
-		const checkpointsDir = path.join(shadowDir, "tasks", taskId, "checkpoints")
-		await fs.mkdir(checkpointsDir, { recursive: true })
-		const gitDir = path.join(checkpointsDir, ".git")
-		const git = simpleGit(path.dirname(gitDir))
+	override off<K extends keyof CheckpointEventMap>(event: K, listener: (data: CheckpointEventMap[K]) => void) {
+		return super.off(event, listener)
+	}
 
-		log(`[create] taskId = ${taskId}, workspaceDir = ${workspaceDir}, shadowDir = ${shadowDir}`)
-		const service = new ShadowCheckpointService(taskId, git, shadowDir, workspaceDir, log)
-		await service.initShadowGit()
-		return service
+	override once<K extends keyof CheckpointEventMap>(event: K, listener: (data: CheckpointEventMap[K]) => void) {
+		return super.once(event, listener)
 	}
 }

src/services/checkpoints/__tests__/LocalCheckpointService.test.ts

@@ -1,385 +0,0 @@
-// npx jest src/services/checkpoints/__tests__/LocalCheckpointService.test.ts
-
-import fs from "fs/promises"
-import path from "path"
-import os from "os"
-
-import { simpleGit, SimpleGit } from "simple-git"
-
-import { CheckpointServiceFactory } from "../CheckpointServiceFactory"
-import { LocalCheckpointService } from "../LocalCheckpointService"
-
-const tmpDir = path.join(os.tmpdir(), "test-LocalCheckpointService")
-
-describe("LocalCheckpointService", () => {
-	const taskId = "test-task"
-
-	let testFile: string
-	let service: LocalCheckpointService
-
-	const initRepo = async ({
-		workspaceDir,
-		userName = "Roo Code",
-		userEmail = "[email protected]",
-		testFileName = "test.txt",
-		textFileContent = "Hello, world!",
-	}: {
-		workspaceDir: string
-		userName?: string
-		userEmail?: string
-		testFileName?: string
-		textFileContent?: string
-	}) => {
-		// Create a temporary directory for testing.
-		await fs.mkdir(workspaceDir, { recursive: true })
-
-		// Initialize git repo.
-		const git = simpleGit(workspaceDir)
-		await git.init()
-		await git.addConfig("user.name", userName)
-		await git.addConfig("user.email", userEmail)
-
-		// Create test file.
-		const testFile = path.join(workspaceDir, testFileName)
-		await fs.writeFile(testFile, textFileContent)
-
-		// Create initial commit.
-		await git.add(".")
-		await git.commit("Initial commit")!
-
-		return { testFile }
-	}
-
-	beforeEach(async () => {
-		const workspaceDir = path.join(tmpDir, `checkpoint-service-test-${Date.now()}`)
-		const repo = await initRepo({ workspaceDir })
-
-		testFile = repo.testFile
-		service = await CheckpointServiceFactory.create({
-			strategy: "local",
-			options: { taskId, workspaceDir, log: () => {} },
-		})
-	})
-
-	afterEach(async () => {
-		jest.restoreAllMocks()
-	})
-
-	afterAll(async () => {
-		await fs.rm(tmpDir, { recursive: true, force: true })
-	})
-
-	describe("getDiff", () => {
-		it("returns the correct diff between commits", async () => {
-			await fs.writeFile(testFile, "Ahoy, world!")
-			const commit1 = await service.saveCheckpoint("First checkpoint")
-			expect(commit1?.commit).toBeTruthy()
-
-			await fs.writeFile(testFile, "Goodbye, world!")
-			const commit2 = await service.saveCheckpoint("Second checkpoint")
-			expect(commit2?.commit).toBeTruthy()
-
-			const diff1 = await service.getDiff({ to: commit1!.commit })
-			expect(diff1).toHaveLength(1)
-			expect(diff1[0].paths.relative).toBe("test.txt")
-			expect(diff1[0].paths.absolute).toBe(testFile)
-			expect(diff1[0].content.before).toBe("Hello, world!")
-			expect(diff1[0].content.after).toBe("Ahoy, world!")
-
-			const diff2 = await service.getDiff({ to: commit2!.commit })
-			expect(diff2).toHaveLength(1)
-			expect(diff2[0].paths.relative).toBe("test.txt")
-			expect(diff2[0].paths.absolute).toBe(testFile)
-			expect(diff2[0].content.before).toBe("Hello, world!")
-			expect(diff2[0].content.after).toBe("Goodbye, world!")
-
-			const diff12 = await service.getDiff({ from: commit1!.commit, to: commit2!.commit })
-			expect(diff12).toHaveLength(1)
-			expect(diff12[0].paths.relative).toBe("test.txt")
-			expect(diff12[0].paths.absolute).toBe(testFile)
-			expect(diff12[0].content.before).toBe("Ahoy, world!")
-			expect(diff12[0].content.after).toBe("Goodbye, world!")
-		})
-
-		it("handles new files in diff", async () => {
-			const newFile = path.join(service.workspaceDir, "new.txt")
-			await fs.writeFile(newFile, "New file content")
-			const commit = await service.saveCheckpoint("Add new file")
-			expect(commit?.commit).toBeTruthy()
-
-			const changes = await service.getDiff({ to: commit!.commit })
-			const change = changes.find((c) => c.paths.relative === "new.txt")
-			expect(change).toBeDefined()
-			expect(change?.content.before).toBe("")
-			expect(change?.content.after).toBe("New file content")
-		})
-
-		it("handles deleted files in diff", async () => {
-			const fileToDelete = path.join(service.workspaceDir, "new.txt")
-			await fs.writeFile(fileToDelete, "New file content")
-			const commit1 = await service.saveCheckpoint("Add file")
-			expect(commit1?.commit).toBeTruthy()
-
-			await fs.unlink(fileToDelete)
-			const commit2 = await service.saveCheckpoint("Delete file")
-			expect(commit2?.commit).toBeTruthy()
-
-			const changes = await service.getDiff({ from: commit1!.commit, to: commit2!.commit })
-			const change = changes.find((c) => c.paths.relative === "new.txt")
-			expect(change).toBeDefined()
-			expect(change!.content.before).toBe("New file content")
-			expect(change!.content.after).toBe("")
-		})
-	})
-
-	describe("saveCheckpoint", () => {
-		it("creates a checkpoint if there are pending changes", async () => {
-			await fs.writeFile(testFile, "Ahoy, world!")
-			const commit1 = await service.saveCheckpoint("First checkpoint")
-			expect(commit1?.commit).toBeTruthy()
-			const details1 = await service.git.show([commit1!.commit])
-			expect(details1).toContain("-Hello, world!")
-			expect(details1).toContain("+Ahoy, world!")
-
-			await fs.writeFile(testFile, "Hola, world!")
-			const commit2 = await service.saveCheckpoint("Second checkpoint")
-			expect(commit2?.commit).toBeTruthy()
-			const details2 = await service.git.show([commit2!.commit])
-			expect(details2).toContain("-Hello, world!")
-			expect(details2).toContain("+Hola, world!")
-
-			// Switch to checkpoint 1.
-			await service.restoreCheckpoint(commit1!.commit)
-			expect(await fs.readFile(testFile, "utf-8")).toBe("Ahoy, world!")
-
-			// Switch to checkpoint 2.
-			await service.restoreCheckpoint(commit2!.commit)
-			expect(await fs.readFile(testFile, "utf-8")).toBe("Hola, world!")
-
-			// Switch back to initial commit.
-			expect(service.baseHash).toBeTruthy()
-			await service.restoreCheckpoint(service.baseHash!)
-			expect(await fs.readFile(testFile, "utf-8")).toBe("Hello, world!")
-		})
-
-		it("preserves workspace and index state after saving checkpoint", async () => {
-			// Create three files with different states: staged, unstaged, and mixed.
-			const unstagedFile = path.join(service.workspaceDir, "unstaged.txt")
-			const stagedFile = path.join(service.workspaceDir, "staged.txt")
-			const mixedFile = path.join(service.workspaceDir, "mixed.txt")
-
-			await fs.writeFile(unstagedFile, "Initial unstaged")
-			await fs.writeFile(stagedFile, "Initial staged")
-			await fs.writeFile(mixedFile, "Initial mixed")
-			await service.git.add(["."])
-			const result = await service.git.commit("Add initial files")
-			expect(result?.commit).toBeTruthy()
-
-			await fs.writeFile(unstagedFile, "Modified unstaged")
-
-			await fs.writeFile(stagedFile, "Modified staged")
-			await service.git.add([stagedFile])
-
-			await fs.writeFile(mixedFile, "Modified mixed - staged")
-			await service.git.add([mixedFile])
-			await fs.writeFile(mixedFile, "Modified mixed - unstaged")
-
-			// Save checkpoint.
-			const commit = await service.saveCheckpoint("Test checkpoint")
-			expect(commit?.commit).toBeTruthy()
-
-			// Verify workspace state is preserved.
-			const status = await service.git.status()
-
-			// All files should be modified.
-			expect(status.modified).toContain("unstaged.txt")
-			expect(status.modified).toContain("staged.txt")
-			expect(status.modified).toContain("mixed.txt")
-
-			// Only staged and mixed files should be staged.
-			expect(status.staged).not.toContain("unstaged.txt")
-			expect(status.staged).toContain("staged.txt")
-			expect(status.staged).toContain("mixed.txt")
-
-			// Verify file contents.
-			expect(await fs.readFile(unstagedFile, "utf-8")).toBe("Modified unstaged")
-			expect(await fs.readFile(stagedFile, "utf-8")).toBe("Modified staged")
-			expect(await fs.readFile(mixedFile, "utf-8")).toBe("Modified mixed - unstaged")
-
-			// Verify staged changes (--cached shows only staged changes).
-			const stagedDiff = await service.git.diff(["--cached", "mixed.txt"])
-			expect(stagedDiff).toContain("-Initial mixed")
-			expect(stagedDiff).toContain("+Modified mixed - staged")
-
-			// Verify unstaged changes (shows working directory changes).
-			const unstagedDiff = await service.git.diff(["mixed.txt"])
-			expect(unstagedDiff).toContain("-Modified mixed - staged")
-			expect(unstagedDiff).toContain("+Modified mixed - unstaged")
-		})
-
-		it("does not create a checkpoint if there are no pending changes", async () => {
-			const commit0 = await service.saveCheckpoint("Zeroth checkpoint")
-			expect(commit0?.commit).toBeFalsy()
-
-			await fs.writeFile(testFile, "Ahoy, world!")
-			const commit1 = await service.saveCheckpoint("First checkpoint")
-			expect(commit1?.commit).toBeTruthy()
-
-			const commit2 = await service.saveCheckpoint("Second checkpoint")
-			expect(commit2?.commit).toBeFalsy()
-		})
-
-		it("includes untracked files in checkpoints", async () => {
-			// Create an untracked file.
-			const untrackedFile = path.join(service.workspaceDir, "untracked.txt")
-			await fs.writeFile(untrackedFile, "I am untracked!")
-
-			// Save a checkpoint with the untracked file.
-			const commit1 = await service.saveCheckpoint("Checkpoint with untracked file")
-			expect(commit1?.commit).toBeTruthy()
-
-			// Verify the untracked file was included in the checkpoint.
-			const details = await service.git.show([commit1!.commit])
-			expect(details).toContain("+I am untracked!")
-
-			// Create another checkpoint with a different state.
-			await fs.writeFile(testFile, "Changed tracked file")
-			const commit2 = await service.saveCheckpoint("Second checkpoint")
-			expect(commit2?.commit).toBeTruthy()
-
-			// Restore first checkpoint and verify untracked file is preserved.
-			await service.restoreCheckpoint(commit1!.commit)
-			expect(await fs.readFile(untrackedFile, "utf-8")).toBe("I am untracked!")
-			expect(await fs.readFile(testFile, "utf-8")).toBe("Hello, world!")
-
-			// Restore second checkpoint and verify untracked file remains (since
-			// restore preserves untracked files)
-			await service.restoreCheckpoint(commit2!.commit)
-			expect(await fs.readFile(untrackedFile, "utf-8")).toBe("I am untracked!")
-			expect(await fs.readFile(testFile, "utf-8")).toBe("Changed tracked file")
-		})
-
-		it("throws if we're on the wrong branch", async () => {
-			// Create and switch to a feature branch.
-			const currentBranch = await service.git.revparse(["--abbrev-ref", "HEAD"])
-			await service.git.checkoutBranch("feature", currentBranch)
-
-			// Attempt to save checkpoint from feature branch.
-			await expect(service.saveCheckpoint("test")).rejects.toThrow(
-				`Git branch mismatch: expected '${currentBranch}' but found 'feature'`,
-			)
-
-			// Attempt to restore checkpoint from feature branch.
-			expect(service.baseHash).toBeTruthy()
-
-			await expect(service.restoreCheckpoint(service.baseHash!)).rejects.toThrow(
-				`Git branch mismatch: expected '${currentBranch}' but found 'feature'`,
-			)
-		})
-
-		it("cleans up staged files if a commit fails", async () => {
-			await fs.writeFile(testFile, "Changed content")
-
-			// Mock git commit to simulate failure.
-			jest.spyOn(service.git, "commit").mockRejectedValue(new Error("Simulated commit failure"))
-
-			// Attempt to save checkpoint.
-			await expect(service.saveCheckpoint("test")).rejects.toThrow("Simulated commit failure")
-
-			// Verify files are unstaged.
-			const status = await service.git.status()
-			expect(status.staged).toHaveLength(0)
-		})
-
-		it("handles file deletions correctly", async () => {
-			await fs.writeFile(testFile, "I am tracked!")
-			const untrackedFile = path.join(service.workspaceDir, "new.txt")
-			await fs.writeFile(untrackedFile, "I am untracked!")
-			const commit1 = await service.saveCheckpoint("First checkpoint")
-			expect(commit1?.commit).toBeTruthy()
-
-			await fs.unlink(testFile)
-			await fs.unlink(untrackedFile)
-			const commit2 = await service.saveCheckpoint("Second checkpoint")
-			expect(commit2?.commit).toBeTruthy()
-
-			// Verify files are gone.
-			await expect(fs.readFile(testFile, "utf-8")).rejects.toThrow()
-			await expect(fs.readFile(untrackedFile, "utf-8")).rejects.toThrow()
-
-			// Restore first checkpoint.
-			await service.restoreCheckpoint(commit1!.commit)
-			expect(await fs.readFile(testFile, "utf-8")).toBe("I am tracked!")
-			expect(await fs.readFile(untrackedFile, "utf-8")).toBe("I am untracked!")
-
-			// Restore second checkpoint.
-			await service.restoreCheckpoint(commit2!.commit)
-			await expect(fs.readFile(testFile, "utf-8")).rejects.toThrow()
-			await expect(fs.readFile(untrackedFile, "utf-8")).rejects.toThrow()
-		})
-	})
-
-	describe("create", () => {
-		it("initializes a git repository if one does not already exist", async () => {
-			const workspaceDir = path.join(tmpDir, `checkpoint-service-test2-${Date.now()}`)
-			await fs.mkdir(workspaceDir)
-			const newTestFile = path.join(workspaceDir, "test.txt")
-			await fs.writeFile(newTestFile, "Hello, world!")
-
-			// Ensure the git repository was initialized.
-			const gitDir = path.join(workspaceDir, ".git")
-			await expect(fs.stat(gitDir)).rejects.toThrow()
-			const newService = await LocalCheckpointService.create({ taskId, workspaceDir, log: () => {} })
-			expect(await fs.stat(gitDir)).toBeTruthy()
-
-			// Save a checkpoint: Hello, world!
-			const commit1 = await newService.saveCheckpoint("Hello, world!")
-			expect(commit1?.commit).toBeTruthy()
-			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Hello, world!")
-
-			// Restore initial commit; the file should no longer exist.
-			expect(newService.baseHash).toBeTruthy()
-			await newService.restoreCheckpoint(newService.baseHash!)
-			await expect(fs.access(newTestFile)).rejects.toThrow()
-
-			// Restore to checkpoint 1; the file should now exist.
-			await newService.restoreCheckpoint(commit1!.commit)
-			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Hello, world!")
-
-			// Save a new checkpoint: Ahoy, world!
-			await fs.writeFile(newTestFile, "Ahoy, world!")
-			const commit2 = await newService.saveCheckpoint("Ahoy, world!")
-			expect(commit2?.commit).toBeTruthy()
-			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Ahoy, world!")
-
-			// Restore "Hello, world!"
-			await newService.restoreCheckpoint(commit1!.commit)
-			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Hello, world!")
-
-			// Restore "Ahoy, world!"
-			await newService.restoreCheckpoint(commit2!.commit)
-			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Ahoy, world!")
-
-			// Restore initial commit.
-			expect(newService.baseHash).toBeTruthy()
-			await newService.restoreCheckpoint(newService.baseHash!)
-			await expect(fs.access(newTestFile)).rejects.toThrow()
-
-			await fs.rm(newService.workspaceDir, { recursive: true, force: true })
-		})
-
-		it("respects existing git user configuration", async () => {
-			const workspaceDir = path.join(tmpDir, `checkpoint-service-test-config2-${Date.now()}`)
-			const userName = "Custom User"
-			const userEmail = "[email protected]"
-			await initRepo({ workspaceDir, userName, userEmail })
-
-			const newService = await LocalCheckpointService.create({ taskId, workspaceDir, log: () => {} })
-
-			expect((await newService.git.getConfig("user.name")).value).toBe(userName)
-			expect((await newService.git.getConfig("user.email")).value).toBe(userEmail)
-
-			await fs.rm(workspaceDir, { recursive: true, force: true })
-		})
-	})
-})

src/services/checkpoints/__tests__/ShadowCheckpointService.test.ts

@@ -3,73 +3,74 @@
 import fs from "fs/promises"
 import path from "path"
 import os from "os"
+import { EventEmitter } from "events"
 
 import { simpleGit, SimpleGit } from "simple-git"
 
-import { ShadowCheckpointService } from "../ShadowCheckpointService"
-import { CheckpointServiceFactory } from "../CheckpointServiceFactory"
+import { RepoPerTaskCheckpointService } from "../RepoPerTaskCheckpointService"
+import { RepoPerWorkspaceCheckpointService } from "../RepoPerWorkspaceCheckpointService"
 
 jest.mock("globby", () => ({
 	globby: jest.fn().mockResolvedValue([]),
 }))
 
-const tmpDir = path.join(os.tmpdir(), "test-ShadowCheckpointService")
-
-describe("ShadowCheckpointService", () => {
+const tmpDir = path.join(os.tmpdir(), "CheckpointService")
+
+const initRepo = async ({
+	workspaceDir,
+	userName = "Roo Code",
+	userEmail = "[email protected]",
+	testFileName = "test.txt",
+	textFileContent = "Hello, world!",
+}: {
+	workspaceDir: string
+	userName?: string
+	userEmail?: string
+	testFileName?: string
+	textFileContent?: string
+}) => {
+	// Create a temporary directory for testing.
+	await fs.mkdir(workspaceDir, { recursive: true })
+
+	// Initialize git repo.
+	const git = simpleGit(workspaceDir)
+	await git.init()
+	await git.addConfig("user.name", userName)
+	await git.addConfig("user.email", userEmail)
+
+	// Create test file.
+	const testFile = path.join(workspaceDir, testFileName)
+	await fs.writeFile(testFile, textFileContent)
+
+	// Create initial commit.
+	await git.add(".")
+	await git.commit("Initial commit")!
+
+	return { git, testFile }
+}
+
+describe.each([
+	[RepoPerTaskCheckpointService, "RepoPerTaskCheckpointService"],
+	[RepoPerWorkspaceCheckpointService, "RepoPerWorkspaceCheckpointService"],
+])("CheckpointService", (klass, prefix) => {
 	const taskId = "test-task"
 
 	let workspaceGit: SimpleGit
 	let testFile: string
-	let service: ShadowCheckpointService
-
-	const initRepo = async ({
-		workspaceDir,
-		userName = "Roo Code",
-		userEmail = "[email protected]",
-		testFileName = "test.txt",
-		textFileContent = "Hello, world!",
-	}: {
-		workspaceDir: string
-		userName?: string
-		userEmail?: string
-		testFileName?: string
-		textFileContent?: string
-	}) => {
-		// Create a temporary directory for testing.
-		await fs.mkdir(workspaceDir, { recursive: true })
-
-		// Initialize git repo.
-		const git = simpleGit(workspaceDir)
-		await git.init()
-		await git.addConfig("user.name", userName)
-		await git.addConfig("user.email", userEmail)
-
-		// Create test file.
-		const testFile = path.join(workspaceDir, testFileName)
-		await fs.writeFile(testFile, textFileContent)
-
-		// Create initial commit.
-		await git.add(".")
-		await git.commit("Initial commit")!
-
-		return { git, testFile }
-	}
+	let service: RepoPerTaskCheckpointService | RepoPerWorkspaceCheckpointService
 
 	beforeEach(async () => {
 		jest.mocked(require("globby").globby).mockClear().mockResolvedValue([])
 
-		const shadowDir = path.join(tmpDir, `shadow-${Date.now()}`)
+		const shadowDir = path.join(tmpDir, `${prefix}-${Date.now()}`)
 		const workspaceDir = path.join(tmpDir, `workspace-${Date.now()}`)
 		const repo = await initRepo({ workspaceDir })
 
+		workspaceGit = repo.git
 		testFile = repo.testFile
 
-		service = await CheckpointServiceFactory.create({
-			strategy: "shadow",
-			options: { taskId, shadowDir, workspaceDir, log: () => {} },
-		})
-
-		workspaceGit = repo.git
+		service = await klass.create({ taskId, shadowDir, workspaceDir, log: () => {} })
+		await service.initShadowGit()
 	})
 
 	afterEach(async () => {
@@ -80,14 +81,14 @@ describe("ShadowCheckpointService", () => {
 		await fs.rm(tmpDir, { recursive: true, force: true })
 	})
 
-	describe("getDiff", () => {
+	describe(`${klass.name}#getDiff`, () => {
 		it("returns the correct diff between commits", async () => {
 			await fs.writeFile(testFile, "Ahoy, world!")
-			const commit1 = await service.saveCheckpoint("First checkpoint")
+			const commit1 = await service.saveCheckpoint("Ahoy, world!")
 			expect(commit1?.commit).toBeTruthy()
 
 			await fs.writeFile(testFile, "Goodbye, world!")
-			const commit2 = await service.saveCheckpoint("Second checkpoint")
+			const commit2 = await service.saveCheckpoint("Goodbye, world!")
 			expect(commit2?.commit).toBeTruthy()
 
 			const diff1 = await service.getDiff({ to: commit1!.commit })
@@ -97,7 +98,7 @@ describe("ShadowCheckpointService", () => {
 			expect(diff1[0].content.before).toBe("Hello, world!")
 			expect(diff1[0].content.after).toBe("Ahoy, world!")
 
-			const diff2 = await service.getDiff({ to: commit2!.commit })
+			const diff2 = await service.getDiff({ from: service.baseHash, to: commit2!.commit })
 			expect(diff2).toHaveLength(1)
 			expect(diff2[0].paths.relative).toBe("test.txt")
 			expect(diff2[0].paths.absolute).toBe(testFile)
@@ -143,7 +144,7 @@ describe("ShadowCheckpointService", () => {
 		})
 	})
 
-	describe("saveCheckpoint", () => {
+	describe(`${klass.name}#saveCheckpoint`, () => {
 		it("creates a checkpoint if there are pending changes", async () => {
 			await fs.writeFile(testFile, "Ahoy, world!")
 			const commit1 = await service.saveCheckpoint("First checkpoint")
@@ -299,9 +300,9 @@ describe("ShadowCheckpointService", () => {
 		})
 	})
 
-	describe("create", () => {
+	describe(`${klass.name}#create`, () => {
 		it("initializes a git repository if one does not already exist", async () => {
-			const shadowDir = path.join(tmpDir, `shadow2-${Date.now()}`)
+			const shadowDir = path.join(tmpDir, `${prefix}2-${Date.now()}`)
 			const workspaceDir = path.join(tmpDir, `workspace2-${Date.now()}`)
 			await fs.mkdir(workspaceDir)
 
@@ -310,9 +311,11 @@ describe("ShadowCheckpointService", () => {
 			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Hello, world!")
 
 			// Ensure the git repository was initialized.
-			const gitDir = path.join(shadowDir, "tasks", taskId, "checkpoints", ".git")
-			await expect(fs.stat(gitDir)).rejects.toThrow()
-			const newService = await ShadowCheckpointService.create({ taskId, shadowDir, workspaceDir, log: () => {} })
+			const newService = await klass.create({ taskId, shadowDir, workspaceDir, log: () => {} })
+			const { created } = await newService.initShadowGit()
+			expect(created).toBeTruthy()
+
+			const gitDir = path.join(newService.checkpointsDir, ".git")
 			expect(await fs.stat(gitDir)).toBeTruthy()
 
 			// Save a new checkpoint: Ahoy, world!
@@ -329,8 +332,172 @@ describe("ShadowCheckpointService", () => {
 			await newService.restoreCheckpoint(commit1!.commit)
 			expect(await fs.readFile(newTestFile, "utf-8")).toBe("Ahoy, world!")
 
-			await fs.rm(newService.shadowDir, { recursive: true, force: true })
+			await fs.rm(newService.checkpointsDir, { recursive: true, force: true })
 			await fs.rm(newService.workspaceDir, { recursive: true, force: true })
 		})
 	})
+
+	describe(`${klass.name}#events`, () => {
+		it("emits initialize event when service is created", async () => {
+			const shadowDir = path.join(tmpDir, `${prefix}3-${Date.now()}`)
+			const workspaceDir = path.join(tmpDir, `workspace3-${Date.now()}`)
+			await fs.mkdir(workspaceDir, { recursive: true })
+
+			const newTestFile = path.join(workspaceDir, "test.txt")
+			await fs.writeFile(newTestFile, "Testing events!")
+
+			// Create a mock implementation of emit to track events.
+			const emitSpy = jest.spyOn(EventEmitter.prototype, "emit")
+
+			// Create the service - this will trigger the initialize event.
+			const newService = await klass.create({ taskId, shadowDir, workspaceDir, log: () => {} })
+			await newService.initShadowGit()
+
+			// Find the initialize event in the emit calls.
+			let initializeEvent = null
+
+			for (let i = 0; i < emitSpy.mock.calls.length; i++) {
+				const call = emitSpy.mock.calls[i]
+
+				if (call[0] === "initialize") {
+					initializeEvent = call[1]
+					break
+				}
+			}
+
+			// Restore the spy.
+			emitSpy.mockRestore()
+
+			// Verify the event was emitted with the correct data.
+			expect(initializeEvent).not.toBeNull()
+			expect(initializeEvent.type).toBe("initialize")
+			expect(initializeEvent.workspaceDir).toBe(workspaceDir)
+			expect(initializeEvent.baseHash).toBeTruthy()
+			expect(typeof initializeEvent.created).toBe("boolean")
+			expect(typeof initializeEvent.duration).toBe("number")
+
+			// Verify the event was emitted with the correct data.
+			expect(initializeEvent).not.toBeNull()
+			expect(initializeEvent.type).toBe("initialize")
+			expect(initializeEvent.workspaceDir).toBe(workspaceDir)
+			expect(initializeEvent.baseHash).toBeTruthy()
+			expect(typeof initializeEvent.created).toBe("boolean")
+			expect(typeof initializeEvent.duration).toBe("number")
+
+			// Clean up.
+			await fs.rm(shadowDir, { recursive: true, force: true })
+			await fs.rm(workspaceDir, { recursive: true, force: true })
+		})
+
+		it("emits checkpoint event when saving checkpoint", async () => {
+			const checkpointHandler = jest.fn()
+			service.on("checkpoint", checkpointHandler)
+
+			await fs.writeFile(testFile, "Changed content for checkpoint event test")
+			const result = await service.saveCheckpoint("Test checkpoint event")
+			expect(result?.commit).toBeDefined()
+
+			expect(checkpointHandler).toHaveBeenCalledTimes(1)
+			const eventData = checkpointHandler.mock.calls[0][0]
+			expect(eventData.type).toBe("checkpoint")
+			expect(eventData.toHash).toBeDefined()
+			expect(eventData.toHash).toBe(result!.commit)
+			expect(typeof eventData.duration).toBe("number")
+		})
+
+		it("emits restore event when restoring checkpoint", async () => {
+			// First create a checkpoint to restore.
+			await fs.writeFile(testFile, "Content for restore test")
+			const commit = await service.saveCheckpoint("Checkpoint for restore test")
+			expect(commit?.commit).toBeTruthy()
+
+			// Change the file again.
+			await fs.writeFile(testFile, "Changed after checkpoint")
+
+			// Setup restore event listener.
+			const restoreHandler = jest.fn()
+			service.on("restore", restoreHandler)
+
+			// Restore the checkpoint.
+			await service.restoreCheckpoint(commit!.commit)
+
+			// Verify the event was emitted.
+			expect(restoreHandler).toHaveBeenCalledTimes(1)
+			const eventData = restoreHandler.mock.calls[0][0]
+			expect(eventData.type).toBe("restore")
+			expect(eventData.commitHash).toBe(commit!.commit)
+			expect(typeof eventData.duration).toBe("number")
+
+			// Verify the file was actually restored.
+			expect(await fs.readFile(testFile, "utf-8")).toBe("Content for restore test")
+		})
+
+		it("emits error event when an error occurs", async () => {
+			const errorHandler = jest.fn()
+			service.on("error", errorHandler)
+
+			// Force an error by providing an invalid commit hash.
+			const invalidCommitHash = "invalid-commit-hash"
+
+			// Try to restore an invalid checkpoint.
+			try {
+				await service.restoreCheckpoint(invalidCommitHash)
+			} catch (error) {
+				// Expected to throw, we're testing the event emission.
+			}
+
+			// Verify the error event was emitted.
+			expect(errorHandler).toHaveBeenCalledTimes(1)
+			const eventData = errorHandler.mock.calls[0][0]
+			expect(eventData.type).toBe("error")
+			expect(eventData.error).toBeInstanceOf(Error)
+		})
+
+		it("supports multiple event listeners for the same event", async () => {
+			const checkpointHandler1 = jest.fn()
+			const checkpointHandler2 = jest.fn()
+
+			service.on("checkpoint", checkpointHandler1)
+			service.on("checkpoint", checkpointHandler2)
+
+			await fs.writeFile(testFile, "Content for multiple listeners test")
+			const result = await service.saveCheckpoint("Testing multiple listeners")
+
+			// Verify both handlers were called with the same event data.
+			expect(checkpointHandler1).toHaveBeenCalledTimes(1)
+			expect(checkpointHandler2).toHaveBeenCalledTimes(1)
+
+			const eventData1 = checkpointHandler1.mock.calls[0][0]
+			const eventData2 = checkpointHandler2.mock.calls[0][0]
+
+			expect(eventData1).toEqual(eventData2)
+			expect(eventData1.type).toBe("checkpoint")
+			expect(eventData1.toHash).toBe(result?.commit)
+		})
+
+		it("allows removing event listeners", async () => {
+			const checkpointHandler = jest.fn()
+
+			// Add the listener.
+			service.on("checkpoint", checkpointHandler)
+
+			// Make a change and save a checkpoint.
+			await fs.writeFile(testFile, "Content for remove listener test - part 1")
+			await service.saveCheckpoint("Testing listener - part 1")
+
+			// Verify handler was called.
+			expect(checkpointHandler).toHaveBeenCalledTimes(1)
+			checkpointHandler.mockClear()
+
+			// Remove the listener.
+			service.off("checkpoint", checkpointHandler)
+
+			// Make another change and save a checkpoint.
+			await fs.writeFile(testFile, "Content for remove listener test - part 2")
+			await service.saveCheckpoint("Testing listener - part 2")
+
+			// Verify handler was not called after being removed.
+			expect(checkpointHandler).not.toHaveBeenCalled()
+		})
+	})
 })

src/services/checkpoints/index.ts

@@ -1,2 +1,4 @@
-export * from "./types"
-export * from "./CheckpointServiceFactory"
+export type { CheckpointServiceOptions } from "./types"
+
+export { RepoPerTaskCheckpointService } from "./RepoPerTaskCheckpointService"
+export { RepoPerWorkspaceCheckpointService } from "./RepoPerWorkspaceCheckpointService"

src/services/checkpoints/types.ts

@@ -1,4 +1,4 @@
-import { CommitResult } from "simple-git"
+import { CommitResult, SimpleGit } from "simple-git"
 
 export type CheckpointResult = Partial<CommitResult> & Pick<CommitResult, "commit">
 
@@ -13,20 +13,23 @@ export type CheckpointDiff = {
 	}
 }
 
-export type CheckpointStrategy = "local" | "shadow"
-
-export interface CheckpointService {
-	saveCheckpoint(message: string): Promise<CheckpointResult | undefined>
-	restoreCheckpoint(commit: string): Promise<void>
-	getDiff(range: { from?: string; to?: string }): Promise<CheckpointDiff[]>
-	workspaceDir: string
-	baseHash?: string
-	strategy: CheckpointStrategy
-	version: number
-}
-
 export interface CheckpointServiceOptions {
 	taskId: string
 	workspaceDir: string
+	shadowDir: string // globalStorageUri.fsPath
+
 	log?: (message: string) => void
 }
+
+export interface CheckpointEventMap {
+	initialize: { type: "initialize"; workspaceDir: string; baseHash: string; created: boolean; duration: number }
+	checkpoint: {
+		type: "checkpoint"
+		isFirst: boolean
+		fromHash: string
+		toHash: string
+		duration: number
+	}
+	restore: { type: "restore"; commitHash: string; duration: number }
+	error: { type: "error"; error: Error }
+}

src/shared/ExtensionMessage.ts

@@ -7,6 +7,7 @@ import { GitCommit } from "../utils/git"
 import { Mode, CustomModePrompts, ModeConfig } from "./modes"
 import { CustomSupportPrompts } from "./support-prompt"
 import { ExperimentId } from "./experiments"
+import { CheckpointStorage } from "./checkpoints"
 
 export interface LanguageModelChatSelector {
 	vendor?: string
@@ -45,6 +46,7 @@ export interface ExtensionMessage {
 		| "updateCustomMode"
 		| "deleteCustomMode"
 		| "currentCheckpointUpdated"
+		| "browserToolEnabled"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -103,6 +105,7 @@ export interface ExtensionState {
 	alwaysAllowMcp?: boolean
 	alwaysApproveResubmit?: boolean
 	alwaysAllowModeSwitch?: boolean
+	browserToolEnabled?: boolean
 	requestDelaySeconds: number
 	rateLimitSeconds: number // Minimum time between successive requests (0 = disabled)
 	uriScheme?: string
@@ -112,6 +115,7 @@ export interface ExtensionState {
 	soundVolume?: number
 	diffEnabled?: boolean
 	enableCheckpoints: boolean
+	checkpointStorage: CheckpointStorage
 	browserViewportSize?: string
 	screenshotQuality?: number
 	fuzzyMatchThreshold?: number

src/shared/WebviewMessage.ts

@@ -53,6 +53,7 @@ export interface WebviewMessage {
 		| "soundVolume"
 		| "diffEnabled"
 		| "enableCheckpoints"
+		| "checkpointStorage"
 		| "browserViewportSize"
 		| "screenshotQuality"
 		| "openMcpSettings"
@@ -94,6 +95,7 @@ export interface WebviewMessage {
 		| "checkpointRestore"
 		| "deleteMcpServer"
 		| "maxOpenTabsContext"
+		| "browserToolEnabled"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse
@@ -121,6 +123,7 @@ export interface WebviewMessage {
 
 export const checkoutDiffPayloadSchema = z.object({
 	ts: z.number(),
+	previousCommitHash: z.string().optional(),
 	commitHash: z.string(),
 	mode: z.enum(["full", "checkpoint"]),
 })

src/shared/__tests__/context-mentions.test.ts

@@ -0,0 +1,325 @@
+import { mentionRegex, mentionRegexGlobal } from "../context-mentions"
+
+interface TestResult {
+	actual: string | null
+	expected: string | null
+}
+
+function testMention(input: string, expected: string | null): TestResult {
+	const match = mentionRegex.exec(input)
+	return {
+		actual: match ? match[0] : null,
+		expected,
+	}
+}
+
+function expectMatch(result: TestResult) {
+	if (result.expected === null) {
+		return expect(result.actual).toBeNull()
+	}
+	if (result.actual !== result.expected) {
+		// Instead of console.log, use expect().toBe() with a descriptive message
+		expect(result.actual).toBe(result.expected)
+	}
+}
+
+describe("Mention Regex", () => {
+	describe("Windows Path Support", () => {
+		it("matches simple Windows paths", () => {
+			const cases: Array<[string, string]> = [
+				["@C:\\folder\\file.txt", "@C:\\folder\\file.txt"],
+				["@c:\\Program/ Files\\file.txt", "@c:\\Program/ Files\\file.txt"],
+				["@C:\\file.txt", "@C:\\file.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches Windows network shares", () => {
+			const cases: Array<[string, string]> = [
+				["@\\\\server\\share\\file.txt", "@\\\\server\\share\\file.txt"],
+				["@\\\\127.0.0.1\\network-path\\file.txt", "@\\\\127.0.0.1\\network-path\\file.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches mixed separators", () => {
+			const result = testMention("@C:\\folder\\file.txt", "@C:\\folder\\file.txt")
+			expectMatch(result)
+		})
+
+		it("matches Windows relative paths", () => {
+			const cases: Array<[string, string]> = [
+				["@folder\\file.txt", "@folder\\file.txt"],
+				["@.\\folder\\file.txt", "@.\\folder\\file.txt"],
+				["@..\\parent\\file.txt", "@..\\parent\\file.txt"],
+				["@path\\to\\directory\\", "@path\\to\\directory\\"],
+				["@.\\current\\path\\with/ space.txt", "@.\\current\\path\\with/ space.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Escaped Spaces Support", () => {
+		it("matches Unix paths with escaped spaces", () => {
+			const cases: Array<[string, string]> = [
+				["@/path/to/file\\ with\\ spaces.txt", "@/path/to/file\\ with\\ spaces.txt"],
+				["@/path/with\\ \\ multiple\\ spaces.txt", "@/path/with\\ \\ multiple\\ spaces.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches Windows paths with escaped spaces", () => {
+			const cases: Array<[string, string]> = [
+				["@C:\\path\\to\\file/ with/ spaces.txt", "@C:\\path\\to\\file/ with/ spaces.txt"],
+				["@C:\\Program/ Files\\app\\file.txt", "@C:\\Program/ Files\\app\\file.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Combined Path Variations", () => {
+		it("matches complex path combinations", () => {
+			const cases: Array<[string, string]> = [
+				[
+					"@C:\\Users\\name\\Documents\\file/ with/ spaces.txt",
+					"@C:\\Users\\name\\Documents\\file/ with/ spaces.txt",
+				],
+				[
+					"@\\\\server\\share\\path/ with/ spaces\\file.txt",
+					"@\\\\server\\share\\path/ with/ spaces\\file.txt",
+				],
+				["@C:\\path/ with/ spaces\\file.txt", "@C:\\path/ with/ spaces\\file.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Edge Cases", () => {
+		it("handles edge cases correctly", () => {
+			const cases: Array<[string, string]> = [
+				["@C:\\", "@C:\\"],
+				["@/path/to/folder", "@/path/to/folder"],
+				["@C:\\folder\\file with spaces.txt", "@C:\\folder\\file"],
+				["@C:\\Users\\name\\path\\to\\文件夹\\file.txt", "@C:\\Users\\name\\path\\to\\文件夹\\file.txt"],
+				["@/path123/file-name_2.0.txt", "@/path123/file-name_2.0.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Existing Functionality", () => {
+		it("matches Unix paths", () => {
+			const cases: Array<[string, string]> = [
+				["@/usr/local/bin/file", "@/usr/local/bin/file"],
+				["@/path/to/file.txt", "@/path/to/file.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches URLs", () => {
+			const cases: Array<[string, string]> = [
+				["@http://example.com", "@http://example.com"],
+				["@https://example.com/path/to/file.html", "@https://example.com/path/to/file.html"],
+				["@ftp://server.example.com/file.zip", "@ftp://server.example.com/file.zip"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches git hashes", () => {
+			const cases: Array<[string, string]> = [
+				["@a1b2c3d4e5f6g7h8i9j0", "@a1b2c3d4e5f6g7h8i9j0"],
+				["@abcdef1234567890abcdef1234567890abcdef12", "@abcdef1234567890abcdef1234567890abcdef12"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches special keywords", () => {
+			const cases: Array<[string, string]> = [
+				["@problems", "@problems"],
+				["@git-changes", "@git-changes"],
+				["@terminal", "@terminal"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Invalid Patterns", () => {
+		it("rejects invalid patterns", () => {
+			const cases: Array<[string, null]> = [
+				["C:\\folder\\file.txt", null],
+				["@", null],
+				["@ C:\\file.txt", null],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+
+		it("matches only until invalid characters", () => {
+			const result = testMention("@C:\\folder\\file.txt invalid suffix", "@C:\\folder\\file.txt")
+			expectMatch(result)
+		})
+	})
+
+	describe("In Context", () => {
+		it("matches mentions within text", () => {
+			const cases: Array<[string, string]> = [
+				["Check the file at @C:\\folder\\file.txt for details.", "@C:\\folder\\file.txt"],
+				["See @/path/to/file\\ with\\ spaces.txt for an example.", "@/path/to/file\\ with\\ spaces.txt"],
+				["Review @problems and @git-changes.", "@problems"],
+				["Multiple: @/file1.txt and @C:\\file2.txt and @terminal", "@/file1.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Multiple Mentions", () => {
+		it("finds all mentions in a string using global regex", () => {
+			const text = "Check @/path/file1.txt and @C:\\folder\\file2.txt and report any @problems to @git-changes"
+			const matches = text.match(mentionRegexGlobal)
+			expect(matches).toEqual(["@/path/file1.txt", "@C:\\folder\\file2.txt", "@problems", "@git-changes"])
+		})
+	})
+
+	describe("Special Characters in Paths", () => {
+		it("handles special characters in file paths", () => {
+			const cases: Array<[string, string]> = [
+				["@/path/with-dash/file_underscore.txt", "@/path/with-dash/file_underscore.txt"],
+				["@C:\\folder+plus\\file(parens)[]brackets.txt", "@C:\\folder+plus\\file(parens)[]brackets.txt"],
+				["@/path/with/file#hash%percent.txt", "@/path/with/file#hash%percent.txt"],
+				["@/path/with/file@symbol$dollar.txt", "@/path/with/file@symbol$dollar.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Mixed Path Types in Single String", () => {
+		it("correctly identifies the first path in a string with multiple path types", () => {
+			const text = "Check both @/unix/path and @C:\\windows\\path for details."
+			const result = mentionRegex.exec(text)
+			expect(result?.[0]).toBe("@/unix/path")
+
+			// Test starting from after the first match
+			const secondSearchStart = text.indexOf("@C:")
+			const secondResult = mentionRegex.exec(text.substring(secondSearchStart))
+			expect(secondResult?.[0]).toBe("@C:\\windows\\path")
+		})
+	})
+
+	describe("Non-Latin Character Support", () => {
+		it("handles international characters in paths", () => {
+			const cases: Array<[string, string]> = [
+				["@/path/to/你好/file.txt", "@/path/to/你好/file.txt"],
+				["@C:\\用户\\документы\\файл.txt", "@C:\\用户\\документы\\файл.txt"],
+				["@/путь/к/файлу.txt", "@/путь/к/файлу.txt"],
+				["@C:\\folder\\file_äöü.txt", "@C:\\folder\\file_äöü.txt"],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Mixed Path Delimiters", () => {
+		// Modifying expectations to match current behavior
+		it("documents behavior with mixed forward and backward slashes in Windows paths", () => {
+			const cases: Array<[string, null]> = [
+				// Current implementation doesn't support mixed slashes
+				["@C:\\Users/Documents\\folder/file.txt", null],
+				["@C:/Windows\\System32/drivers\\etc/hosts", null],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	describe("Extended Negative Tests", () => {
+		// Modifying expectations to match current behavior
+		it("documents behavior with potentially invalid characters", () => {
+			const cases: Array<[string, string]> = [
+				// Current implementation actually matches these patterns
+				["@/path/with<illegal>chars.txt", "@/path/with<illegal>chars.txt"],
+				["@C:\\folder\\file|with|pipe.txt", "@C:\\folder\\file|with|pipe.txt"],
+				['@/path/with"quotes".txt', '@/path/with"quotes".txt'],
+			]
+
+			cases.forEach(([input, expected]) => {
+				const result = testMention(input, expected)
+				expectMatch(result)
+			})
+		})
+	})
+
+	// // These are documented as "not implemented yet"
+	// describe("Future Enhancement Candidates", () => {
+	// 	it("identifies patterns that could be supported in future enhancements", () => {
+	// 		// These patterns aren't currently supported by the regex
+	// 		// but might be considered for future improvements
+	// 		console.log(
+	// 			"The following patterns are not currently supported but might be considered for future enhancements:",
+	// 		)
+	// 		console.log("- Paths with double slashes: @/path//with/double/slash.txt")
+	// 		console.log("- Complex path traversals: @/very/./long/../../path/.././traversal.txt")
+	// 		console.log("- Environment variables in paths: @$HOME/file.txt, @C:\\Users\\%USERNAME%\\file.txt")
+	// 	})
+	// })
+})

src/shared/api.ts

@@ -49,6 +49,8 @@ export interface ApiHandlerOptions {
 	ollamaBaseUrl?: string
 	lmStudioModelId?: string
 	lmStudioBaseUrl?: string
+	lmStudioDraftModelId?: string
+	lmStudioSpeculativeDecodingEnabled?: boolean
 	geminiApiKey?: string
 	openAiNativeApiKey?: string
 	mistralApiKey?: string
@@ -99,7 +101,7 @@ export type AnthropicModelId = keyof typeof anthropicModels
 export const anthropicDefaultModelId: AnthropicModelId = "claude-3-7-sonnet-20250219"
 export const anthropicModels = {
 	"claude-3-7-sonnet-20250219:thinking": {
-		maxTokens: 64_000,
+		maxTokens: 128_000,
 		contextWindow: 200_000,
 		supportsImages: true,
 		supportsComputerUse: true,
@@ -436,6 +438,46 @@ export const openRouterDefaultModelInfo: ModelInfo = {
 export type VertexModelId = keyof typeof vertexModels
 export const vertexDefaultModelId: VertexModelId = "claude-3-7-sonnet@20250219"
 export const vertexModels = {
+	"gemini-2.0-flash-001": {
+		maxTokens: 8192,
+		contextWindow: 1_048_576,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 0.15,
+		outputPrice: 0.6,
+	},
+	"gemini-2.0-flash-lite-001": {
+		maxTokens: 8192,
+		contextWindow: 1_048_576,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 0.075,
+		outputPrice: 0.3,
+	},
+	"gemini-2.0-flash-thinking-exp-01-21": {
+		maxTokens: 8192,
+		contextWindow: 32_768,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 0,
+		outputPrice: 0,
+	},
+	"gemini-1.5-flash-002": {
+		maxTokens: 8192,
+		contextWindow: 1_048_576,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 0.075,
+		outputPrice: 0.3,
+	},
+	"gemini-1.5-pro-002": {
+		maxTokens: 8192,
+		contextWindow: 2_097_152,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 1.25,
+		outputPrice: 5,
+	},
 	"claude-3-7-sonnet@20250219:thinking": {
 		maxTokens: 64_000,
 		contextWindow: 200_000,

src/shared/checkpoints.ts

@@ -0,0 +1,5 @@
+export type CheckpointStorage = "task" | "workspace"
+
+export const isCheckpointStorage = (value: string): value is CheckpointStorage => {
+	return value === "task" || value === "workspace"
+}

src/shared/context-mentions.ts

@@ -1,57 +1,90 @@
 /*
-Mention regex:
-- **Purpose**: 
-  - To identify and highlight specific mentions in text that start with '@'. 
-  - These mentions can be file paths, URLs, or the exact word 'problems'.
-  - Ensures that trailing punctuation marks (like commas, periods, etc.) are not included in the match, allowing punctuation to follow the mention without being part of it.
-
 - **Regex Breakdown**:
-  - `/@`: 
-	- **@**: The mention must start with the '@' symbol.
-  
-  - `((?:\/|\w+:\/\/)[^\s]+?|problems\b|git-changes\b)`:
-	- **Capturing Group (`(...)`)**: Captures the part of the string that matches one of the specified patterns.
-	- `(?:\/|\w+:\/\/)`: 
-	  - **Non-Capturing Group (`(?:...)`)**: Groups the alternatives without capturing them for back-referencing.
-	  - `\/`: 
-		- **Slash (`/`)**: Indicates that the mention is a file or folder path starting with a '/'.
-	  - `|`: Logical OR.
-	  - `\w+:\/\/`: 
-		- **Protocol (`\w+://`)**: Matches URLs that start with a word character sequence followed by '://', such as 'http://', 'https://', 'ftp://', etc.
-	- `[^\s]+?`: 
-	  - **Non-Whitespace Characters (`[^\s]+`)**: Matches one or more characters that are not whitespace.
-	  - **Non-Greedy (`+?`)**: Ensures the smallest possible match, preventing the inclusion of trailing punctuation.
-	- `|`: Logical OR.
-	- `problems\b`: 
-	  - **Exact Word ('problems')**: Matches the exact word 'problems'.
-	  - **Word Boundary (`\b`)**: Ensures that 'problems' is matched as a whole word and not as part of another word (e.g., 'problematic').
-		- `|`: Logical OR.
-    - `terminal\b`:
-      - **Exact Word ('terminal')**: Matches the exact word 'terminal'.
-      - **Word Boundary (`\b`)**: Ensures that 'terminal' is matched as a whole word and not as part of another word (e.g., 'terminals').
-  - `(?=[.,;:!?]?(?=[\s\r\n]|$))`:
-	- **Positive Lookahead (`(?=...)`)**: Ensures that the match is followed by specific patterns without including them in the match.
-	- `[.,;:!?]?`: 
-	  - **Optional Punctuation (`[.,;:!?]?`)**: Matches zero or one of the specified punctuation marks.
-	- `(?=[\s\r\n]|$)`: 
-	  - **Nested Positive Lookahead (`(?=[\s\r\n]|$)`)**: Ensures that the punctuation (if present) is followed by a whitespace character, a line break, or the end of the string.
-  
-- **Summary**:
-  - The regex effectively matches:
-	- Mentions that are file or folder paths starting with '/' and containing any non-whitespace characters (including periods within the path).
-	- URLs that start with a protocol (like 'http://') followed by any non-whitespace characters (including query parameters).
-	- The exact word 'problems'.
-	- The exact word 'git-changes'.
-    - The exact word 'terminal'.
-  - It ensures that any trailing punctuation marks (such as ',', '.', '!', etc.) are not included in the matched mention, allowing the punctuation to follow the mention naturally in the text.
 
-- **Global Regex**:
-  - `mentionRegexGlobal`: Creates a global version of the `mentionRegex` to find all matches within a given string.
+  1. **Pattern Components**:
+     - The regex is built from multiple patterns joined with OR (|) operators
+     - Each pattern handles a specific type of mention:
+       - Unix/Linux paths
+       - Windows paths with drive letters
+       - Windows relative paths
+       - Windows network shares
+       - URLs with protocols
+       - Git commit hashes
+       - Special keywords (problems, git-changes, terminal)
+
+  2. **Unix Path Pattern**:
+     - `(?:\\/|^)`: Starts with a forward slash or beginning of line
+     - `(?:[^\\/\\s\\\\]|\\\\[ \\t])+`: Path segment that can include escaped spaces
+     - `(?:\\/(?:[^\\/\\s\\\\]|\\\\[ \\t])+)*`: Additional path segments after slashes
+     - `\\/?`: Optional trailing slash
+
+  3. **Windows Path Pattern**:
+     - `[A-Za-z]:\\\\`: Drive letter followed by colon and double backslash
+     - `(?:(?:[^\\\\\\s/]+|\\/[ ])+`: Path segment that can include spaces escaped with forward slash
+     - `(?:\\\\(?:[^\\\\\\s/]+|\\/[ ])+)*)?`: Additional path segments after backslashes
+
+  4. **Windows Relative Path Pattern**:
+     - `(?:\\.{0,2}|[^\\\\\\s/]+)`: Path prefix that can be:
+       - Current directory (.)
+       - Parent directory (..)
+       - Any directory name not containing spaces, backslashes, or forward slashes
+     - `\\\\`: Backslash separator
+     - `(?:[^\\\\\\s/]+|\\\\[ \\t]|\\/[ ])+`: Path segment that can include spaces escaped with backslash or forward slash
+     - `(?:\\\\(?:[^\\\\\\s/]+|\\\\[ \\t]|\\/[ ])+)*`: Additional path segments after backslashes
+     - `\\\\?`: Optional trailing backslash
+
+  5. **Network Share Pattern**:
+     - `\\\\\\\\`: Double backslash (escaped) to start network path
+     - `[^\\\\\\s]+`: Server name
+     - `(?:\\\\(?:[^\\\\\\s/]+|\\/[ ])+)*`: Share name and additional path components
+     - `(?:\\\\)?`: Optional trailing backslash
 
+  6. **URL Pattern**:
+     - `\\w+:\/\/`: Protocol (http://, https://, etc.)
+     - `[^\\s]+`: Rest of the URL (non-whitespace characters)
+
+  7. **Git Hash Pattern**:
+     - `[a-zA-Z0-9]{7,40}\\b`: 7-40 alphanumeric characters followed by word boundary
+
+  8. **Special Keywords Pattern**:
+     - `problems\\b`, `git-changes\\b`, `terminal\\b`: Exact word matches with word boundaries
+
+  9. **Termination Logic**:
+     - `(?=[.,;:!?]?(?=[\\s\\r\\n]|$))`: Positive lookahead that:
+       - Allows an optional punctuation mark after the mention
+       - Ensures the mention (and optional punctuation) is followed by whitespace or end of string
+
+- **Behavior Summary**:
+  - Matches @-prefixed mentions
+  - Handles different path formats across operating systems
+  - Supports escaped spaces in paths using OS-appropriate conventions
+  - Cleanly terminates at whitespace or end of string
+  - Excludes trailing punctuation from the match
+  - Creates both single-match and global-match regex objects
 */
-export const mentionRegex =
-	/@((?:\/|\w+:\/\/)[^\s]+?|[a-f0-9]{7,40}\b|problems\b|git-changes\b|terminal\b)(?=[.,;:!?]?(?=[\s\r\n]|$))/
-export const mentionRegexGlobal = new RegExp(mentionRegex.source, "g")
+
+const mentionPatterns = [
+	// Unix paths with escaped spaces using backslash
+	"(?:\\/|^)(?:[^\\/\\s\\\\]|\\\\[ \\t])+(?:\\/(?:[^\\/\\s\\\\]|\\\\[ \\t])+)*\\/?",
+	// Windows paths with drive letters (C:\path) with support for escaped spaces using forward slash
+	"[A-Za-z]:\\\\(?:(?:[^\\\\\\s/]+|\\/[ ])+(?:\\\\(?:[^\\\\\\s/]+|\\/[ ])+)*)?",
+	// Windows relative paths (folder\file or .\folder\file) with support for escaped spaces
+	"(?:\\.{0,2}|[^\\\\\\s/]+)\\\\(?:[^\\\\\\s/]+|\\\\[ \\t]|\\/[ ])+(?:\\\\(?:[^\\\\\\s/]+|\\\\[ \\t]|\\/[ ])+)*\\\\?",
+	// Windows network shares (\\server\share) with support for escaped spaces using forward slash
+	"\\\\\\\\[^\\\\\\s]+(?:\\\\(?:[^\\\\\\s/]+|\\/[ ])+)*(?:\\\\)?",
+	// URLs with protocols (http://, https://, etc.)
+	"\\w+:\/\/[^\\s]+",
+	// Git hashes (7-40 alphanumeric characters)
+	"[a-zA-Z0-9]{7,40}\\b",
+	// Special keywords
+	"problems\\b",
+	"git-changes\\b",
+	"terminal\\b",
+]
+// Build the full regex pattern by joining the patterns with OR operator
+const mentionRegexPattern = `@(${mentionPatterns.join("|")})(?=[.,;:!?]?(?=[\\s\\r\\n]|$))`
+export const mentionRegex = new RegExp(mentionRegexPattern)
+export const mentionRegexGlobal = new RegExp(mentionRegexPattern, "g")
 
 export interface MentionSuggestion {
 	type: "file" | "folder" | "git" | "problems"

src/shared/globalState.ts

@@ -41,6 +41,8 @@ export type GlobalStateKey =
 	| "ollamaBaseUrl"
 	| "lmStudioModelId"
 	| "lmStudioBaseUrl"
+	| "lmStudioDraftModelId"
+	| "lmStudioSpeculativeDecodingEnabled"
 	| "anthropicBaseUrl"
 	| "azureApiVersion"
 	| "openAiStreamingEnabled"
@@ -53,6 +55,7 @@ export type GlobalStateKey =
 	| "soundVolume"
 	| "diffEnabled"
 	| "enableCheckpoints"
+	| "checkpointStorage"
 	| "browserViewportSize"
 	| "screenshotQuality"
 	| "fuzzyMatchThreshold"
@@ -84,3 +87,4 @@ export type GlobalStateKey =
 	| "anthropicThinking" // TODO: Rename to `modelMaxThinkingTokens`.
 	| "mistralCodestralUrl"
 	| "maxOpenTabsContext"
+	| "browserToolEnabled" // Setting to enable/disable the browser tool

src/shared/modes.ts

@@ -92,7 +92,7 @@ export const modes: readonly ModeConfig[] = [
 			"You are Roo, an experienced technical leader who is inquisitive and an excellent planner. Your goal is to gather information and get context to create a detailed plan for accomplishing the user's task, which the user will review and approve before they switch into another mode to implement the solution.",
 		groups: ["read", ["edit", { fileRegex: "\\.md$", description: "Markdown files only" }], "browser", "mcp"],
 		customInstructions:
-			"Depending on the user's request, you may need to do some information gathering (for example using read_file or search_files) to get more context about the task. You may also ask the user clarifying questions to get a better understanding of the task. Once you've gained more context about the user's request, you should create a detailed plan for how to accomplish the task. (You can write the plan to a markdown file if it seems appropriate.)\n\nThen you might ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and plan the best way to accomplish it. Finally once it seems like you've reached a good plan, use the switch_mode tool to request that the user switch to another mode to implement the solution.",
+			"1. Do some information gathering (for example using read_file or search_files) to get more context about the task.\n\n2. You should also ask the user clarifying questions to get a better understanding of the task.\n\n3. Once you've gained more context about the user's request, you should create a detailed plan for how to accomplish the task. Include Mermaid diagrams if they help make your plan clearer.\n\n4. Ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and plan the best way to accomplish it.\n\n5. Once the user confirms the plan, ask them if they'd like you to write it to a markdown file.\n\n6. Use the switch_mode tool to request that the user switch to another mode to implement the solution.",
 	},
 	{
 		slug: "ask",
@@ -101,7 +101,7 @@ export const modes: readonly ModeConfig[] = [
 			"You are Roo, a knowledgeable technical assistant focused on answering questions and providing information about software development, technology, and related topics.",
 		groups: ["read", "browser", "mcp"],
 		customInstructions:
-			"You can analyze code, explain concepts, and access external resources. Make sure to answer the user's questions and don't rush to switch to implementing code.",
+			"You can analyze code, explain concepts, and access external resources. Make sure to answer the user's questions and don't rush to switch to implementing code. Include Mermaid diagrams if they help make your response clearer.",
 	},
 	{
 		slug: "debug",

webview-ui/package.json

@@ -35,6 +35,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"fzf": "^0.5.2",
 		"lucide-react": "^0.475.0",
+		"mermaid": "^11.4.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-markdown": "^9.0.3",

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -15,8 +15,8 @@ import Thumbnails from "../common/Thumbnails"
 import { vscode } from "../../utils/vscode"
 import { WebviewMessage } from "../../../../src/shared/WebviewMessage"
 import { Mode, getAllModes } from "../../../../src/shared/modes"
-import { CaretIcon } from "../common/CaretIcon"
 import { convertToMentionPath } from "../../utils/path-mentions"
+import { SelectDropdown, DropdownOptionType } from "../ui"
 
 interface ChatTextAreaProps {
 	inputValue: string
@@ -31,6 +31,7 @@ interface ChatTextAreaProps {
 	onHeightChange?: (height: number) => void
 	mode: Mode
 	setMode: (value: Mode) => void
+	modeShortcutText: string
 }
 
 const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
@@ -48,6 +49,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			onHeightChange,
 			mode,
 			setMode,
+			modeShortcutText,
 		},
 		ref,
 	) => {
@@ -539,35 +541,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			[updateCursorPosition],
 		)
 
-		const selectStyle = {
-			fontSize: "11px",
-			cursor: textAreaDisabled ? "not-allowed" : "pointer",
-			backgroundColor: "transparent",
-			border: "none",
-			color: "var(--vscode-foreground)",
-			opacity: textAreaDisabled ? 0.5 : 0.8,
-			outline: "none",
-			paddingLeft: "20px",
-			paddingRight: "6px",
-			WebkitAppearance: "none" as const,
-			MozAppearance: "none" as const,
-			appearance: "none" as const,
-		}
-
-		const optionStyle = {
-			backgroundColor: "var(--vscode-dropdown-background)",
-			color: "var(--vscode-dropdown-foreground)",
-		}
-
-		const caretContainerStyle = {
-			position: "absolute" as const,
-			left: 6,
-			top: "50%",
-			transform: "translateY(-45%)",
-			pointerEvents: "none" as const,
-			opacity: textAreaDisabled ? 0.5 : 0.8,
-		}
-
 		return (
 			<div
 				className="chat-text-area"
@@ -789,117 +762,110 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						marginTop: "auto",
 						paddingTop: "2px",
 					}}>
+					{/* Left side - dropdowns container */}
 					<div
 						style={{
 							display: "flex",
 							alignItems: "center",
+							gap: "4px",
+							overflow: "hidden",
+							minWidth: 0,
 						}}>
-						<div style={{ position: "relative", display: "inline-block" }}>
-							<select
+						{/* Mode selector - fixed width */}
+						<div style={{ flexShrink: 0 }}>
+							<SelectDropdown
 								value={mode}
 								disabled={textAreaDisabled}
 								title="Select mode for interaction"
-								onChange={(e) => {
-									const value = e.target.value
-									if (value === "prompts-action") {
-										window.postMessage({ type: "action", action: "promptsButtonClicked" })
-										return
-									}
+								options={[
+									// Add the shortcut text as a disabled option at the top
+									{
+										value: "shortcut",
+										label: modeShortcutText,
+										disabled: true,
+										type: DropdownOptionType.SHORTCUT,
+									},
+									// Add all modes
+									...getAllModes(customModes).map((mode) => ({
+										value: mode.slug,
+										label: mode.name,
+										type: DropdownOptionType.ITEM,
+									})),
+									// Add separator
+									{
+										value: "sep-1",
+										label: "Separator",
+										type: DropdownOptionType.SEPARATOR,
+									},
+									// Add Edit option
+									{
+										value: "promptsButtonClicked",
+										label: "Edit...",
+										type: DropdownOptionType.ACTION,
+									},
+								]}
+								onChange={(value) => {
 									setMode(value as Mode)
 									vscode.postMessage({
 										type: "mode",
 										text: value,
 									})
 								}}
-								style={{
-									...selectStyle,
-									minWidth: "70px",
-									flex: "0 0 auto",
-								}}>
-								{getAllModes(customModes).map((mode) => (
-									<option key={mode.slug} value={mode.slug} style={{ ...optionStyle }}>
-										{mode.name}
-									</option>
-								))}
-								<option
-									disabled
-									style={{
-										borderTop: "1px solid var(--vscode-dropdown-border)",
-										...optionStyle,
-									}}>
-									────
-								</option>
-								<option value="prompts-action" style={{ ...optionStyle }}>
-									Edit...
-								</option>
-							</select>
-							<div style={caretContainerStyle}>
-								<CaretIcon />
-							</div>
+								shortcutText={modeShortcutText}
+								triggerClassName="w-full"
+							/>
 						</div>
 
+						{/* API configuration selector - flexible width */}
 						<div
 							style={{
-								position: "relative",
-								display: "inline-block",
 								flex: "1 1 auto",
 								minWidth: 0,
-								maxWidth: "150px",
 								overflow: "hidden",
 							}}>
-							<select
+							<SelectDropdown
 								value={currentApiConfigName || ""}
 								disabled={textAreaDisabled}
 								title="Select API configuration"
-								onChange={(e) => {
-									const value = e.target.value
-									if (value === "settings-action") {
-										window.postMessage({ type: "action", action: "settingsButtonClicked" })
-										return
-									}
+								options={[
+									// Add all API configurations
+									...(listApiConfigMeta || []).map((config) => ({
+										value: config.name,
+										label: config.name,
+										type: DropdownOptionType.ITEM,
+									})),
+									// Add separator
+									{
+										value: "sep-2",
+										label: "Separator",
+										type: DropdownOptionType.SEPARATOR,
+									},
+									// Add Edit option
+									{
+										value: "settingsButtonClicked",
+										label: "Edit...",
+										type: DropdownOptionType.ACTION,
+									},
+								]}
+								onChange={(value) => {
 									vscode.postMessage({
 										type: "loadApiConfiguration",
 										text: value,
 									})
 								}}
-								style={{
-									...selectStyle,
-									width: "100%",
-									textOverflow: "ellipsis",
-								}}>
-								{(listApiConfigMeta || []).map((config) => (
-									<option
-										key={config.name}
-										value={config.name}
-										style={{
-											...optionStyle,
-										}}>
-										{config.name}
-									</option>
-								))}
-								<option
-									disabled
-									style={{
-										borderTop: "1px solid var(--vscode-dropdown-border)",
-										...optionStyle,
-									}}>
-									────
-								</option>
-								<option value="settings-action" style={{ ...optionStyle }}>
-									Edit...
-								</option>
-							</select>
-							<div style={caretContainerStyle}>
-								<CaretIcon />
-							</div>
+								contentClassName="max-h-[300px] overflow-y-auto"
+								triggerClassName="w-full text-ellipsis overflow-hidden"
+							/>
 						</div>
 					</div>
 
+					{/* Right side - action buttons */}
 					<div
 						style={{
 							display: "flex",
 							alignItems: "center",
-							gap: "12px",
+							gap: "8px",
+							flexShrink: 0,
 						}}>
 						<div style={{ display: "flex", alignItems: "center" }}>
 							{isEnhancingPrompt ? (
@@ -909,7 +875,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										color: "var(--vscode-input-foreground)",
 										opacity: 0.5,
 										fontSize: 16.5,
-										marginRight: 10,
+										marginRight: 6,
 									}}
 								/>
 							) : (

webview-ui/src/components/chat/ChatView.tsx

@@ -1,4 +1,4 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import debounce from "debounce"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useDeepCompareEffect, useEvent, useMount } from "react-use"
@@ -28,6 +28,7 @@ import TaskHeader from "./TaskHeader"
 import AutoApproveMenu from "./AutoApproveMenu"
 import { AudioType } from "../../../../src/shared/WebviewMessage"
 import { validateCommand } from "../../utils/command-validation"
+import { getAllModes } from "../../../../src/shared/modes"
 
 interface ChatViewProps {
 	isHidden: boolean
@@ -38,6 +39,9 @@ interface ChatViewProps {
 
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
+const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
+const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . for next mode`
+
 const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryView }: ChatViewProps) => {
 	const {
 		version,
@@ -56,6 +60,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		setMode,
 		autoApprovalEnabled,
 		alwaysAllowModeSwitch,
+		customModes,
 	} = useExtensionState()
 
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
@@ -83,6 +88,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 	const [isAtBottom, setIsAtBottom] = useState(false)
 
 	const [wasStreaming, setWasStreaming] = useState<boolean>(false)
+	const [showCheckpointWarning, setShowCheckpointWarning] = useState<boolean>(false)
 
 	// UI layout depends on the last 2 messages
 	// (since it relies on the content of these messages, we are deep comparing. i.e. the button state after hitting button sets enableButtons to false, and this effect otherwise would have to true again even if messages didn't change
@@ -877,6 +883,48 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 	}, [])
 	useEvent("wheel", handleWheel, window, { passive: true }) // passive improves scrolling performance
 
+	// Effect to handle showing the checkpoint warning after a delay
+	useEffect(() => {
+		// Only show the warning when there's a task but no visible messages yet
+		if (task && modifiedMessages.length === 0 && !isStreaming) {
+			const timer = setTimeout(() => {
+				setShowCheckpointWarning(true)
+			}, 5000) // 5 seconds
+
+			return () => clearTimeout(timer)
+		}
+	}, [task, modifiedMessages.length, isStreaming])
+
+	// Effect to hide the checkpoint warning when messages appear
+	useEffect(() => {
+		if (modifiedMessages.length > 0 || isStreaming) {
+			setShowCheckpointWarning(false)
+		}
+	}, [modifiedMessages.length, isStreaming])
+
+	// Checkpoint warning component
+	const CheckpointWarningMessage = useCallback(
+		() => (
+			<div className="flex items-center p-3 my-3 bg-vscode-inputValidation-warningBackground border border-vscode-inputValidation-warningBorder rounded">
+				<span className="codicon codicon-loading codicon-modifier-spin mr-2" />
+				<span className="text-vscode-foreground">
+					Still initializing checkpoint... If this takes too long, you can{" "}
+					<VSCodeLink
+						href="#"
+						onClick={(e) => {
+							e.preventDefault()
+							window.postMessage({ type: "action", action: "settingsButtonClicked" }, "*")
+						}}
+						className="inline px-0.5">
+						disable checkpoints in settings
+					</VSCodeLink>{" "}
+					and restart your task.
+				</span>
+			</div>
+		),
+		[],
+	)
+
 	const placeholderText = useMemo(() => {
 		const baseText = task ? "Type a message..." : "Type your task here..."
 		const contextText = "(@ to add context, / to switch modes"
@@ -963,6 +1011,39 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		isWriteToolAction,
 	])
 
+	// Function to handle mode switching
+	const switchToNextMode = useCallback(() => {
+		const allModes = getAllModes(customModes)
+		const currentModeIndex = allModes.findIndex((m) => m.slug === mode)
+		const nextModeIndex = (currentModeIndex + 1) % allModes.length
+		// Update local state and notify extension to sync mode change
+		setMode(allModes[nextModeIndex].slug)
+		vscode.postMessage({
+			type: "mode",
+			text: allModes[nextModeIndex].slug,
+		})
+	}, [mode, setMode, customModes])
+
+	// Add keyboard event handler
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent) => {
+			// Check for Command + . (period)
+			if ((event.metaKey || event.ctrlKey) && event.key === ".") {
+				event.preventDefault() // Prevent default browser behavior
+				switchToNextMode()
+			}
+		},
+		[switchToNextMode],
+	)
+
+	// Add event listener
+	useEffect(() => {
+		window.addEventListener("keydown", handleKeyDown)
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown)
+		}
+	}, [handleKeyDown])
+
 	return (
 		<div
 			style={{
@@ -976,17 +1057,26 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 				overflow: "hidden",
 			}}>
 			{task ? (
-				<TaskHeader
-					task={task}
-					tokensIn={apiMetrics.totalTokensIn}
-					tokensOut={apiMetrics.totalTokensOut}
-					doesModelSupportPromptCache={selectedModelInfo.supportsPromptCache}
-					cacheWrites={apiMetrics.totalCacheWrites}
-					cacheReads={apiMetrics.totalCacheReads}
-					totalCost={apiMetrics.totalCost}
-					contextTokens={apiMetrics.contextTokens}
-					onClose={handleTaskCloseButtonClick}
-				/>
+				<>
+					<TaskHeader
+						task={task}
+						tokensIn={apiMetrics.totalTokensIn}
+						tokensOut={apiMetrics.totalTokensOut}
+						doesModelSupportPromptCache={selectedModelInfo.supportsPromptCache}
+						cacheWrites={apiMetrics.totalCacheWrites}
+						cacheReads={apiMetrics.totalCacheReads}
+						totalCost={apiMetrics.totalCost}
+						contextTokens={apiMetrics.contextTokens}
+						onClose={handleTaskCloseButtonClick}
+					/>
+
+					{/* Checkpoint warning message */}
+					{showCheckpointWarning && (
+						<div className="px-3">
+							<CheckpointWarningMessage />
+						</div>
+					)}
+				</>
 			) : (
 				<div
 					style={{
@@ -1171,6 +1261,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 				}}
 				mode={mode}
 				setMode={setMode}
+				modeShortcutText={modeShortcutText}
 			/>
 
 			<div id="chat-view-portal" />

webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx

@@ -45,6 +45,7 @@ describe("ChatTextArea", () => {
 		onHeightChange: jest.fn(),
 		mode: defaultModeSlug,
 		setMode: jest.fn(),
+		modeShortcutText: "(⌘. for next mode)",
 	}
 
 	beforeEach(() => {

webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx

@@ -20,13 +20,17 @@ export const CheckpointMenu = ({ ts, commitHash, currentHash, checkpoint }: Chec
 
 	const isCurrent = currentHash === commitHash
 	const isFirst = checkpoint.isFirst
-
 	const isDiffAvailable = !isFirst
 	const isRestoreAvailable = !isFirst || !isCurrent
 
+	const previousCommitHash = checkpoint?.from
+
 	const onCheckpointDiff = useCallback(() => {
-		vscode.postMessage({ type: "checkpointDiff", payload: { ts, commitHash, mode: "checkpoint" } })
-	}, [ts, commitHash])
+		vscode.postMessage({
+			type: "checkpointDiff",
+			payload: { ts, previousCommitHash, commitHash, mode: "checkpoint" },
+		})
+	}, [ts, previousCommitHash, commitHash])
 
 	const onPreview = useCallback(() => {
 		vscode.postMessage({ type: "checkpointRestore", payload: { ts, commitHash, mode: "preview" } })

webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx

@@ -3,8 +3,6 @@ import { useMemo } from "react"
 import { CheckpointMenu } from "./CheckpointMenu"
 import { checkpointSchema } from "./schema"
 
-const REQUIRED_VERSION = 1
-
 type CheckpointSavedProps = {
 	ts: number
 	commitHash: string
@@ -22,7 +20,7 @@ export const CheckpointSaved = ({ checkpoint, ...props }: CheckpointSavedProps)
 
 		const result = checkpointSchema.safeParse(checkpoint)
 
-		if (!result.success || result.data.version < REQUIRED_VERSION) {
+		if (!result.success) {
 			return undefined
 		}
 

webview-ui/src/components/chat/checkpoints/schema.ts

@@ -4,8 +4,6 @@ export const checkpointSchema = z.object({
 	isFirst: z.boolean(),
 	from: z.string(),
 	to: z.string(),
-	strategy: z.enum(["local", "shadow"]),
-	version: z.number(),
 })
 
 export type Checkpoint = z.infer<typeof checkpointSchema>

webview-ui/src/components/common/CaretIcon.tsx

@@ -1,15 +0,0 @@
-import React from "react"
-
-export const CaretIcon = () => (
-	<svg
-		width="10"
-		height="10"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		strokeWidth="2"
-		strokeLinecap="round"
-		strokeLinejoin="round">
-		<polyline points="6 9 12 15 18 9" />
-	</svg>
-)

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -1,10 +1,11 @@
-import { memo, useEffect } from "react"
+import React, { memo, useEffect } from "react"
 import { useRemark } from "react-remark"
 import rehypeHighlight, { Options } from "rehype-highlight"
 import styled from "styled-components"
 import { visit } from "unist-util-visit"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
+import MermaidBlock from "./MermaidBlock"
 
 interface MarkdownBlockProps {
 	markdown?: string
@@ -182,7 +183,27 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 		],
 		rehypeReactOptions: {
 			components: {
-				pre: ({ node, ...preProps }: any) => <StyledPre {...preProps} theme={theme} />,
+				pre: ({ node, children, ...preProps }: any) => {
+					if (Array.isArray(children) && children.length === 1 && React.isValidElement(children[0])) {
+						const child = children[0] as React.ReactElement<{ className?: string }>
+						if (child.props?.className?.includes("language-mermaid")) {
+							return child
+						}
+					}
+					return (
+						<StyledPre {...preProps} theme={theme}>
+							{children}
+						</StyledPre>
+					)
+				},
+				code: (props: any) => {
+					const className = props.className || ""
+					if (className.includes("language-mermaid")) {
+						const codeText = String(props.children || "")
+						return <MermaidBlock code={codeText} />
+					}
+					return <code {...props} />
+				},
 			},
 		},
 	})

webview-ui/src/components/common/MermaidBlock.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useRef, useState } from "react"
+import mermaid from "mermaid"
+import { useDebounceEffect } from "../../utils/useDebounceEffect"
+import styled from "styled-components"
+import { vscode } from "../../utils/vscode"
+
+const MERMAID_THEME = {
+	background: "#1e1e1e", // VS Code dark theme background
+	textColor: "#ffffff", // Main text color
+	mainBkg: "#2d2d2d", // Background for nodes
+	nodeBorder: "#888888", // Border color for nodes
+	lineColor: "#cccccc", // Lines connecting nodes
+	primaryColor: "#3c3c3c", // Primary color for highlights
+	primaryTextColor: "#ffffff", // Text in primary colored elements
+	primaryBorderColor: "#888888",
+	secondaryColor: "#2d2d2d", // Secondary color for alternate elements
+	tertiaryColor: "#454545", // Third color for special elements
+
+	// Class diagram specific
+	classText: "#ffffff",
+
+	// State diagram specific
+	labelColor: "#ffffff",
+
+	// Sequence diagram specific
+	actorLineColor: "#cccccc",
+	actorBkg: "#2d2d2d",
+	actorBorder: "#888888",
+	actorTextColor: "#ffffff",
+
+	// Flow diagram specific
+	fillType0: "#2d2d2d",
+	fillType1: "#3c3c3c",
+	fillType2: "#454545",
+}
+
+mermaid.initialize({
+	startOnLoad: false,
+	securityLevel: "loose",
+	theme: "dark",
+	themeVariables: {
+		...MERMAID_THEME,
+		fontSize: "16px",
+		fontFamily: "var(--vscode-font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif)",
+
+		// Additional styling
+		noteTextColor: "#ffffff",
+		noteBkgColor: "#454545",
+		noteBorderColor: "#888888",
+
+		// Improve contrast for special elements
+		critBorderColor: "#ff9580",
+		critBkgColor: "#803d36",
+
+		// Task diagram specific
+		taskTextColor: "#ffffff",
+		taskTextOutsideColor: "#ffffff",
+		taskTextLightColor: "#ffffff",
+
+		// Numbers/sections
+		sectionBkgColor: "#2d2d2d",
+		sectionBkgColor2: "#3c3c3c",
+
+		// Alt sections in sequence diagrams
+		altBackground: "#2d2d2d",
+
+		// Links
+		linkColor: "#6cb6ff",
+
+		// Borders and lines
+		compositeBackground: "#2d2d2d",
+		compositeBorder: "#888888",
+		titleColor: "#ffffff",
+	},
+})
+
+interface MermaidBlockProps {
+	code: string
+}
+
+export default function MermaidBlock({ code }: MermaidBlockProps) {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const [isLoading, setIsLoading] = useState(false)
+
+	// 1) Whenever `code` changes, mark that we need to re-render a new chart
+	useEffect(() => {
+		setIsLoading(true)
+	}, [code])
+
+	// 2) Debounce the actual parse/render
+	useDebounceEffect(
+		() => {
+			if (containerRef.current) {
+				containerRef.current.innerHTML = ""
+			}
+			mermaid
+				.parse(code, { suppressErrors: true })
+				.then((isValid) => {
+					if (!isValid) {
+						throw new Error("Invalid or incomplete Mermaid code")
+					}
+					const id = `mermaid-${Math.random().toString(36).substring(2)}`
+					return mermaid.render(id, code)
+				})
+				.then(({ svg }) => {
+					if (containerRef.current) {
+						containerRef.current.innerHTML = svg
+					}
+				})
+				.catch((err) => {
+					console.warn("Mermaid parse/render failed:", err)
+					containerRef.current!.innerHTML = code.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+				})
+				.finally(() => {
+					setIsLoading(false)
+				})
+		},
+		500, // Delay 500ms
+		[code], // Dependencies for scheduling
+	)
+
+	/**
+	 * Called when user clicks the rendered diagram.
+	 * Converts the <svg> to a PNG and sends it to the extension.
+	 */
+	const handleClick = async () => {
+		if (!containerRef.current) return
+		const svgEl = containerRef.current.querySelector("svg")
+		if (!svgEl) return
+
+		try {
+			const pngDataUrl = await svgToPng(svgEl)
+			vscode.postMessage({
+				type: "openImage",
+				text: pngDataUrl,
+			})
+		} catch (err) {
+			console.error("Error converting SVG to PNG:", err)
+		}
+	}
+
+	return (
+		<MermaidBlockContainer>
+			{isLoading && <LoadingMessage>Generating mermaid diagram...</LoadingMessage>}
+
+			{/* The container for the final <svg> or raw code. */}
+			<SvgContainer onClick={handleClick} ref={containerRef} $isLoading={isLoading} />
+		</MermaidBlockContainer>
+	)
+}
+
+async function svgToPng(svgEl: SVGElement): Promise<string> {
+	// Clone the SVG to avoid modifying the original
+	const svgClone = svgEl.cloneNode(true) as SVGElement
+
+	// Get the original viewBox
+	const viewBox = svgClone.getAttribute("viewBox")?.split(" ").map(Number) || []
+	const originalWidth = viewBox[2] || svgClone.clientWidth
+	const originalHeight = viewBox[3] || svgClone.clientHeight
+
+	// Calculate the scale factor to fit editor width while maintaining aspect ratio
+
+	// Unless we can find a way to get the actual editor window dimensions through the VS Code API (which might be possible but would require changes to the extension side),
+	// the fixed width seems like a reliable approach.
+	const editorWidth = 3_600
+
+	const scale = editorWidth / originalWidth
+	const scaledHeight = originalHeight * scale
+
+	// Update SVG dimensions
+	svgClone.setAttribute("width", `${editorWidth}`)
+	svgClone.setAttribute("height", `${scaledHeight}`)
+
+	const serializer = new XMLSerializer()
+	const svgString = serializer.serializeToString(svgClone)
+	const svgDataUrl = "data:image/svg+xml;base64," + btoa(decodeURIComponent(encodeURIComponent(svgString)))
+
+	return new Promise((resolve, reject) => {
+		const img = new Image()
+		img.onload = () => {
+			const canvas = document.createElement("canvas")
+			canvas.width = editorWidth
+			canvas.height = scaledHeight
+
+			const ctx = canvas.getContext("2d")
+			if (!ctx) return reject("Canvas context not available")
+
+			// Fill background with Mermaid's dark theme background color
+			ctx.fillStyle = MERMAID_THEME.background
+			ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+			ctx.imageSmoothingEnabled = true
+			ctx.imageSmoothingQuality = "high"
+
+			ctx.drawImage(img, 0, 0, editorWidth, scaledHeight)
+			resolve(canvas.toDataURL("image/png", 1.0))
+		}
+		img.onerror = reject
+		img.src = svgDataUrl
+	})
+}
+
+const MermaidBlockContainer = styled.div`
+	position: relative;
+	margin: 8px 0;
+`
+
+const LoadingMessage = styled.div`
+	padding: 8px 0;
+	color: var(--vscode-descriptionForeground);
+	font-style: italic;
+	font-size: 0.9em;
+`
+
+interface SvgContainerProps {
+	$isLoading: boolean
+}
+
+const SvgContainer = styled.div<SvgContainerProps>`
+	opacity: ${(props) => (props.$isLoading ? 0.3 : 1)};
+	min-height: 20px;
+	transition: opacity 0.2s ease;
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+`

webview-ui/src/components/history/HistoryPreview.tsx

@@ -14,107 +14,64 @@ type HistoryPreviewProps = {
 const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 	const { taskHistory } = useExtensionState()
 
-	const handleHistorySelect = (id: string) => {
-		vscode.postMessage({ type: "showTaskWithId", text: id })
-	}
-
 	return (
-		<div style={{ flexShrink: 0 }}>
-			<style>
-				{`
-					.history-preview-item {
-						background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 65%, transparent);
-						border-radius: 4px;
-						position: relative;
-						overflow: hidden;
-						opacity: 0.8;
-						cursor: pointer;
-						margin-bottom: 12px;
-					}
-					.history-preview-item:hover {
-						background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 100%, transparent);
-						opacity: 1;
-						pointer-events: auto;
-					}
-				`}
-			</style>
-			<div
-				style={{
-					color: "var(--vscode-descriptionForeground)",
-					margin: "10px 20px 10px 20px",
-					display: "flex",
-					alignItems: "center",
-				}}>
-				<span className="codicon codicon-comment-discussion scale-90 mr-1" />
-				<span className="font-medium text-xs uppercase">Recent Tasks</span>
+		<div className="flex flex-col gap-3 shrink-0 mx-5">
+			<div className="flex items-center justify-between text-vscode-descriptionForeground">
+				<div className="flex items-center gap-1">
+					<span className="codicon codicon-comment-discussion scale-90 mr-1" />
+					<span className="font-medium text-xs uppercase">Recent Tasks</span>
+				</div>
+				<Button variant="ghost" size="sm" onClick={() => showHistoryView()} className="uppercase">
+					View All
+				</Button>
 			</div>
-			<div className="px-5">
-				{taskHistory
-					.filter((item) => item.ts && item.task)
-					.slice(0, 3)
-					.map((item) => (
+			{taskHistory.slice(0, 3).map((item) => (
+				<div
+					key={item.id}
+					className="bg-vscode-toolbar-hoverBackground/50 hover:bg-vscode-toolbar-hoverBackground/75 rounded-xs relative overflow-hidden opacity-90 hover:opacity-100 cursor-pointer"
+					onClick={() => vscode.postMessage({ type: "showTaskWithId", text: item.id })}>
+					<div className="flex flex-col gap-2 p-3 pt-1">
+						<div className="flex justify-between items-center">
+							<span className="text-xs font-medium text-vscode-descriptionForeground uppercase">
+								{formatDate(item.ts)}
+							</span>
+							<CopyButton itemTask={item.task} />
+						</div>
 						<div
-							key={item.id}
-							className="history-preview-item"
-							onClick={() => handleHistorySelect(item.id)}>
-							<div className="flex flex-col gap-2 p-3 pt-1">
-								<div className="flex justify-between items-center">
-									<span className="text-xs font-medium text-vscode-descriptionForeground uppercase">
-										{formatDate(item.ts)}
-									</span>
-									<span
-										style={{
-											marginLeft: "auto",
-										}}>
-										({item.number === 0 ? "Main" : item.number})
-									</span>
-									<CopyButton itemTask={item.task} />
-								</div>
-								<div
-									className="text-vscode-descriptionForeground overflow-hidden whitespace-pre-wrap"
-									style={{
-										display: "-webkit-box",
-										WebkitLineClamp: 3,
-										WebkitBoxOrient: "vertical",
-										wordBreak: "break-word",
-										overflowWrap: "anywhere",
-									}}>
-									{item.task}
-								</div>
-								<div className="text-xs text-vscode-descriptionForeground">
+							className="text-vscode-descriptionForeground overflow-hidden whitespace-pre-wrap"
+							style={{
+								display: "-webkit-box",
+								WebkitLineClamp: 3,
+								WebkitBoxOrient: "vertical",
+								wordBreak: "break-word",
+								overflowWrap: "anywhere",
+							}}>
+							{item.task}
+						</div>
+						<div className="text-xs text-vscode-descriptionForeground">
+							<span>
+								Tokens: ↑{formatLargeNumber(item.tokensIn || 0)} ↓
+								{formatLargeNumber(item.tokensOut || 0)}
+							</span>
+							{!!item.cacheWrites && (
+								<>
+									{" • "}
 									<span>
-										Tokens: ↑{formatLargeNumber(item.tokensIn || 0)} ↓
-										{formatLargeNumber(item.tokensOut || 0)}
+										Cache: +{formatLargeNumber(item.cacheWrites || 0)} →{" "}
+										{formatLargeNumber(item.cacheReads || 0)}
 									</span>
-									{!!item.cacheWrites && (
-										<>
-											{" • "}
-											<span>
-												Cache: +{formatLargeNumber(item.cacheWrites || 0)} →{" "}
-												{formatLargeNumber(item.cacheReads || 0)}
-											</span>
-										</>
-									)}
-									{!!item.totalCost && (
-										<>
-											{" • "}
-											<span>API Cost: ${item.totalCost?.toFixed(4)}</span>
-										</>
-									)}
-								</div>
-							</div>
+								</>
+							)}
+							{!!item.totalCost && (
+								<>
+									{" • "}
+									<span>API Cost: ${item.totalCost?.toFixed(4)}</span>
+								</>
+							)}
 						</div>
-					))}
-				<div className="flex justify-center">
-					<Button
-						variant="ghost"
-						size="sm"
-						onClick={() => showHistoryView()}
-						className="font-normal text-vscode-descriptionForeground">
-						View all history
-					</Button>
+					</div>
 				</div>
-			</div>
+			))}
 		</div>
 	)
 }

webview-ui/src/components/history/HistoryView.tsx

@@ -1,16 +1,15 @@
-import React, { memo, useMemo, useState, useEffect } from "react"
+import React, { memo, useState } from "react"
 import { DeleteTaskDialog } from "./DeleteTaskDialog"
-import { Fzf } from "fzf"
 import prettyBytes from "pretty-bytes"
 import { Virtuoso } from "react-virtuoso"
 import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
 
 import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
-import { highlightFzfMatch } from "@/utils/highlight"
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui"
 
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { useTaskSearch } from "./useTaskSearch"
 import { ExportButton } from "./ExportButton"
 import { CopyButton } from "./CopyButton"
 
@@ -21,95 +20,18 @@ type HistoryViewProps = {
 type SortOption = "newest" | "oldest" | "mostExpensive" | "mostTokens" | "mostRelevant"
 
 const HistoryView = ({ onDone }: HistoryViewProps) => {
-	const { taskHistory } = useExtensionState()
-	const [searchQuery, setSearchQuery] = useState("")
-	const [sortOption, setSortOption] = useState<SortOption>("newest")
-	const [lastNonRelevantSort, setLastNonRelevantSort] = useState<SortOption | null>("newest")
-
-	useEffect(() => {
-		if (searchQuery && sortOption !== "mostRelevant" && !lastNonRelevantSort) {
-			setLastNonRelevantSort(sortOption)
-			setSortOption("mostRelevant")
-		} else if (!searchQuery && sortOption === "mostRelevant" && lastNonRelevantSort) {
-			setSortOption(lastNonRelevantSort)
-			setLastNonRelevantSort(null)
-		}
-	}, [searchQuery, sortOption, lastNonRelevantSort])
-
-	const handleHistorySelect = (id: string) => {
-		vscode.postMessage({ type: "showTaskWithId", text: id })
-	}
+	const { tasks, searchQuery, setSearchQuery, sortOption, setSortOption, setLastNonRelevantSort } = useTaskSearch()
 
 	const [deleteTaskId, setDeleteTaskId] = useState<string | null>(null)
 
-	const presentableTasks = useMemo(() => {
-		return taskHistory.filter((item) => item.ts && item.task)
-	}, [taskHistory])
-
-	const fzf = useMemo(() => {
-		return new Fzf(presentableTasks, {
-			selector: (item) => item.task,
-		})
-	}, [presentableTasks])
-
-	const taskHistorySearchResults = useMemo(() => {
-		let results = presentableTasks
-		if (searchQuery) {
-			const searchResults = fzf.find(searchQuery)
-			results = searchResults.map((result) => ({
-				...result.item,
-				task: highlightFzfMatch(result.item.task, Array.from(result.positions)),
-			}))
-		}
-
-		// First apply search if needed
-		const searchResults = searchQuery ? results : presentableTasks
-
-		// Then sort the results
-		return [...searchResults].sort((a, b) => {
-			switch (sortOption) {
-				case "oldest":
-					return (a.ts || 0) - (b.ts || 0)
-				case "mostExpensive":
-					return (b.totalCost || 0) - (a.totalCost || 0)
-				case "mostTokens":
-					const aTokens = (a.tokensIn || 0) + (a.tokensOut || 0) + (a.cacheWrites || 0) + (a.cacheReads || 0)
-					const bTokens = (b.tokensIn || 0) + (b.tokensOut || 0) + (b.cacheWrites || 0) + (b.cacheReads || 0)
-					return bTokens - aTokens
-				case "mostRelevant":
-					// Keep fuse order if searching, otherwise sort by newest
-					return searchQuery ? 0 : (b.ts || 0) - (a.ts || 0)
-				case "newest":
-				default:
-					return (b.ts || 0) - (a.ts || 0)
-			}
-		})
-	}, [presentableTasks, searchQuery, fzf, sortOption])
-
 	return (
-		<div
-			style={{
-				position: "fixed",
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				display: "flex",
-				flexDirection: "column",
-				overflow: "hidden",
-			}}>
-			<div
-				style={{
-					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					padding: "10px 17px 10px 20px",
-				}}>
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>History</h3>
-				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
-			</div>
-			<div style={{ padding: "5px 17px 6px 17px" }}>
-				<div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+		<div className="fixed inset-0 flex flex-col">
+			<div className="flex flex-col gap-2 px-5 py-2.5 border-b border-vscode-panel-border">
+				<div className="flex justify-between items-center">
+					<h3 className="text-vscode-foreground m-0">History</h3>
+					<VSCodeButton onClick={onDone}>Done</VSCodeButton>
+				</div>
+				<div className="flex flex-col gap-2">
 					<VSCodeTextField
 						style={{ width: "100%" }}
 						placeholder="Fuzzy search history..."
@@ -166,7 +88,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						flexGrow: 1,
 						overflowY: "scroll",
 					}}
-					data={taskHistorySearchResults}
+					data={tasks}
 					data-testid="virtuoso-container"
 					components={{
 						List: React.forwardRef((props, ref) => (
@@ -175,15 +97,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					}}
 					itemContent={(index, item) => (
 						<div
-							key={item.id}
 							data-testid={`task-item-${item.id}`}
-							className="history-item"
-							style={{
-								cursor: "pointer",
-								borderBottom:
-									index < taskHistory.length - 1 ? "1px solid var(--vscode-panel-border)" : "none",
-							}}
-							onClick={() => handleHistorySelect(item.id)}>
+							key={item.id}
+							className={cn("cursor-pointer", {
+								"border-b border-vscode-panel-border": index < tasks.length - 1,
+							})}
+							onClick={() => vscode.postMessage({ type: "showTaskWithId", text: item.id })}>
 							<div
 								style={{
 									display: "flex",
@@ -299,7 +218,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 												{formatLargeNumber(item.tokensOut || 0)}
 											</span>
 										</div>
-										{!item.totalCost && <ExportButton itemId={item.id} />}
+										{!item.totalCost && (
+											<div className="flex flex-row gap-1">
+												<CopyButton itemTask={item.task} />
+												<ExportButton itemId={item.id} />
+											</div>
+										)}
 									</div>
 
 									{!!item.cacheWrites && (

webview-ui/src/components/history/useTaskSearch.ts

@@ -0,0 +1,78 @@
+import { useState, useEffect, useMemo } from "react"
+import { Fzf } from "fzf"
+
+import { highlightFzfMatch } from "@/utils/highlight"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+
+type SortOption = "newest" | "oldest" | "mostExpensive" | "mostTokens" | "mostRelevant"
+
+export const useTaskSearch = () => {
+	const { taskHistory } = useExtensionState()
+	const [searchQuery, setSearchQuery] = useState("")
+	const [sortOption, setSortOption] = useState<SortOption>("newest")
+	const [lastNonRelevantSort, setLastNonRelevantSort] = useState<SortOption | null>("newest")
+
+	useEffect(() => {
+		if (searchQuery && sortOption !== "mostRelevant" && !lastNonRelevantSort) {
+			setLastNonRelevantSort(sortOption)
+			setSortOption("mostRelevant")
+		} else if (!searchQuery && sortOption === "mostRelevant" && lastNonRelevantSort) {
+			setSortOption(lastNonRelevantSort)
+			setLastNonRelevantSort(null)
+		}
+	}, [searchQuery, sortOption, lastNonRelevantSort])
+
+	const presentableTasks = useMemo(() => {
+		return taskHistory.filter((item) => item.ts && item.task)
+	}, [taskHistory])
+
+	const fzf = useMemo(() => {
+		return new Fzf(presentableTasks, {
+			selector: (item) => item.task,
+		})
+	}, [presentableTasks])
+
+	const tasks = useMemo(() => {
+		let results = presentableTasks
+		if (searchQuery) {
+			const searchResults = fzf.find(searchQuery)
+			results = searchResults.map((result) => ({
+				...result.item,
+				task: highlightFzfMatch(result.item.task, Array.from(result.positions)),
+			}))
+		}
+
+		// First apply search if needed
+		const searchResults = searchQuery ? results : presentableTasks
+
+		// Then sort the results
+		return [...searchResults].sort((a, b) => {
+			switch (sortOption) {
+				case "oldest":
+					return (a.ts || 0) - (b.ts || 0)
+				case "mostExpensive":
+					return (b.totalCost || 0) - (a.totalCost || 0)
+				case "mostTokens":
+					const aTokens = (a.tokensIn || 0) + (a.tokensOut || 0) + (a.cacheWrites || 0) + (a.cacheReads || 0)
+					const bTokens = (b.tokensIn || 0) + (b.tokensOut || 0) + (b.cacheWrites || 0) + (b.cacheReads || 0)
+					return bTokens - aTokens
+				case "mostRelevant":
+					// Keep fuse order if searching, otherwise sort by newest
+					return searchQuery ? 0 : (b.ts || 0) - (a.ts || 0)
+				case "newest":
+				default:
+					return (b.ts || 0) - (a.ts || 0)
+			}
+		})
+	}, [presentableTasks, searchQuery, fzf, sortOption])
+
+	return {
+		tasks,
+		searchQuery,
+		setSearchQuery,
+		sortOption,
+		setSortOption,
+		lastNonRelevantSort,
+		setLastNonRelevantSort,
+	}
+}

webview-ui/src/components/mcp/McpView.tsx

@@ -29,28 +29,12 @@ const McpView = ({ onDone }: McpViewProps) => {
 	} = useExtensionState()
 
 	return (
-		<div
-			style={{
-				position: "fixed",
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				display: "flex",
-				flexDirection: "column",
-			}}>
-			<div
-				style={{
-					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					padding: "10px 17px 10px 20px",
-				}}>
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>MCP Servers</h3>
+		<div className="fixed inset-0 flex flex-col">
+			<div className="flex justify-between items-center px-5 py-2.5 border-b border-vscode-panel-border">
+				<h3 className="text-vscode-foreground m-0">MCP Servers</h3>
 				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
 			</div>
-
-			<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
+			<div className="flex-1 overflow-auto p-5">
 				<div
 					style={{
 						color: "var(--vscode-foreground)",
@@ -119,9 +103,6 @@ const McpView = ({ onDone }: McpViewProps) => {
 						</div>
 					</>
 				)}
-
-				{/* Bottom padding */}
-				<div style={{ height: "20px" }} />
 			</div>
 		</div>
 	)

webview-ui/src/components/prompts/PromptsView.tsx

@@ -407,12 +407,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 	return (
 		<div className="fixed inset-0 flex flex-col">
-			<div className="flex justify-between items-center px-5 py-2.5">
+			<div className="flex justify-between items-center px-5 py-2.5 border-b border-vscode-panel-border">
 				<h3 className="text-vscode-foreground m-0">Prompts</h3>
 				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
 			</div>
-
-			<div className="flex-1 overflow-auto px-5">
+			<div className="flex-1 overflow-auto p-5">
 				<div className="pb-5 border-b border-vscode-input-border">
 					<div className="mb-5">
 						<div className="font-bold mb-1">Preferred Language</div>
@@ -1174,7 +1173,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 				</div>
 			</div>
-
 			{isCreateModeDialogOpen && (
 				<div
 					style={{

webview-ui/src/components/settings/AdvancedSettings.tsx

@@ -0,0 +1,176 @@
+import { HTMLAttributes } from "react"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { Cog } from "lucide-react"
+
+import { EXPERIMENT_IDS, experimentConfigsMap, ExperimentId } from "../../../../src/shared/experiments"
+
+import { cn } from "@/lib/utils"
+
+import { SetCachedStateField, SetExperimentEnabled } from "./types"
+import { sliderLabelStyle } from "./styles"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+import { ExperimentalFeature } from "./ExperimentalFeature"
+
+type AdvancedSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	rateLimitSeconds: number
+	terminalOutputLineLimit?: number
+	maxOpenTabsContext: number
+	diffEnabled?: boolean
+	fuzzyMatchThreshold?: number
+	setCachedStateField: SetCachedStateField<
+		"rateLimitSeconds" | "terminalOutputLineLimit" | "maxOpenTabsContext" | "diffEnabled" | "fuzzyMatchThreshold"
+	>
+	experiments: Record<ExperimentId, boolean>
+	setExperimentEnabled: SetExperimentEnabled
+}
+
+export const AdvancedSettings = ({
+	rateLimitSeconds,
+	terminalOutputLineLimit,
+	maxOpenTabsContext,
+	diffEnabled,
+	fuzzyMatchThreshold,
+	setCachedStateField,
+	experiments,
+	setExperimentEnabled,
+	className,
+	...props
+}: AdvancedSettingsProps) => {
+	return (
+		<div className={cn("flex flex-col gap-2", className)} {...props}>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<Cog className="w-4" />
+					<div>Advanced</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<div className="flex flex-col gap-2">
+						<span className="font-medium">Rate limit</span>
+						<div className="flex items-center gap-2">
+							<input
+								type="range"
+								min="0"
+								max="60"
+								step="1"
+								value={rateLimitSeconds}
+								onChange={(e) => setCachedStateField("rateLimitSeconds", parseInt(e.target.value))}
+								className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+							/>
+							<span style={{ ...sliderLabelStyle }}>{rateLimitSeconds}s</span>
+						</div>
+					</div>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">Minimum time between API requests.</p>
+				</div>
+
+				<div>
+					<div className="flex flex-col gap-2">
+						<span className="font-medium">Terminal output limit</span>
+						<div className="flex items-center gap-2">
+							<input
+								type="range"
+								min="100"
+								max="5000"
+								step="100"
+								value={terminalOutputLineLimit ?? 500}
+								onChange={(e) =>
+									setCachedStateField("terminalOutputLineLimit", parseInt(e.target.value))
+								}
+								className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+							/>
+							<span style={{ ...sliderLabelStyle }}>{terminalOutputLineLimit ?? 500}</span>
+						</div>
+					</div>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Maximum number of lines to include in terminal output when executing commands. When exceeded
+						lines will be removed from the middle, saving tokens.
+					</p>
+				</div>
+
+				<div>
+					<div className="flex flex-col gap-2">
+						<span className="font-medium">Open tabs context limit</span>
+						<div className="flex items-center gap-2">
+							<input
+								type="range"
+								min="0"
+								max="500"
+								step="1"
+								value={maxOpenTabsContext ?? 20}
+								onChange={(e) => setCachedStateField("maxOpenTabsContext", parseInt(e.target.value))}
+								className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+							/>
+							<span style={{ ...sliderLabelStyle }}>{maxOpenTabsContext ?? 20}</span>
+						</div>
+					</div>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Maximum number of VSCode open tabs to include in context. Higher values provide more context but
+						increase token usage.
+					</p>
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={diffEnabled}
+						onChange={(e: any) => {
+							setCachedStateField("diffEnabled", e.target.checked)
+							if (!e.target.checked) {
+								// Reset experimental strategy when diffs are disabled.
+								setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
+							}
+						}}>
+						<span className="font-medium">Enable editing through diffs</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						When enabled, Roo will be able to edit files more quickly and will automatically reject
+						truncated full-file writes. Works best with the latest Claude 3.7 Sonnet model.
+					</p>
+					{diffEnabled && (
+						<div
+							style={{
+								display: "flex",
+								flexDirection: "column",
+								gap: "5px",
+								marginTop: "10px",
+								marginBottom: "10px",
+								paddingLeft: "10px",
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<span className="font-medium">Match precision</span>
+							<div className="flex items-center gap-2">
+								<input
+									type="range"
+									min="0.8"
+									max="1"
+									step="0.005"
+									value={fuzzyMatchThreshold ?? 1.0}
+									onChange={(e) => {
+										setCachedStateField("fuzzyMatchThreshold", parseFloat(e.target.value))
+									}}
+									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+								/>
+								<span style={{ ...sliderLabelStyle }}>
+									{Math.round((fuzzyMatchThreshold || 1) * 100)}%
+								</span>
+							</div>
+							<p className="text-vscode-descriptionForeground text-sm mt-0">
+								This slider controls how precisely code sections must match when applying diffs. Lower
+								values allow more flexible matching but increase the risk of incorrect replacements. Use
+								values below 100% with extreme caution.
+							</p>
+							<ExperimentalFeature
+								key={EXPERIMENT_IDS.DIFF_STRATEGY}
+								{...experimentConfigsMap.DIFF_STRATEGY}
+								enabled={experiments[EXPERIMENT_IDS.DIFF_STRATEGY] ?? false}
+								onChange={(enabled) => setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, enabled)}
+							/>
+						</div>
+					)}
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/ApiConfigManager.tsx

@@ -142,199 +142,188 @@ const ApiConfigManager = ({
 	const isOnlyProfile = listApiConfigMeta?.length === 1
 
 	return (
-		<div style={{ marginBottom: 5 }}>
-			<div
-				style={{
-					display: "flex",
-					flexDirection: "column",
-					gap: "2px",
-				}}>
-				<label htmlFor="config-profile">
-					<span style={{ fontWeight: "500" }}>Configuration Profile</span>
-				</label>
+		<div className="flex flex-col gap-1">
+			<label htmlFor="config-profile">
+				<span className="font-medium">Configuration Profile</span>
+			</label>
 
-				{isRenaming ? (
-					<div
-						data-testid="rename-form"
-						style={{ display: "flex", gap: "4px", alignItems: "center", flexDirection: "column" }}>
-						<div style={{ display: "flex", gap: "4px", alignItems: "center", width: "100%" }}>
-							<VSCodeTextField
-								ref={inputRef}
-								value={inputValue}
-								onInput={(e: unknown) => {
-									const target = e as { target: { value: string } }
-									setInputValue(target.target.value)
-									setError(null)
-								}}
-								placeholder="Enter new name"
-								style={{ flexGrow: 1 }}
-								onKeyDown={(e: unknown) => {
-									const event = e as { key: string }
-									if (event.key === "Enter" && inputValue.trim()) {
-										handleSave()
-									} else if (event.key === "Escape") {
-										handleCancel()
-									}
-								}}
-							/>
-							<VSCodeButton
-								appearance="icon"
-								disabled={!inputValue.trim()}
-								onClick={handleSave}
-								title="Save"
-								style={{
-									padding: 0,
-									margin: 0,
-									height: "28px",
-									width: "28px",
-									minWidth: "28px",
-								}}>
-								<span className="codicon codicon-check" />
-							</VSCodeButton>
-							<VSCodeButton
-								appearance="icon"
-								onClick={handleCancel}
-								title="Cancel"
-								style={{
-									padding: 0,
-									margin: 0,
-									height: "28px",
-									width: "28px",
-									minWidth: "28px",
-								}}>
-								<span className="codicon codicon-close" />
-							</VSCodeButton>
-						</div>
-						{error && (
-							<p className="text-red-500 text-sm mt-2" data-testid="error-message">
-								{error}
-							</p>
-						)}
-					</div>
-				) : (
-					<>
-						<div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
-							<Dropdown
-								id="config-profile"
-								value={currentApiConfigName}
-								onChange={(value: unknown) => {
-									onSelectConfig((value as DropdownOption).value)
-								}}
-								style={{
-									minWidth: 130,
-									zIndex: 1002,
-								}}
-								role="combobox"
-								options={listApiConfigMeta.map((config) => ({
-									value: config.name,
-									label: config.name,
-								}))}
-							/>
-							<VSCodeButton
-								appearance="icon"
-								onClick={handleAdd}
-								title="Add profile"
-								style={{
-									padding: 0,
-									margin: 0,
-									height: "28px",
-									width: "28px",
-									minWidth: "28px",
-								}}>
-								<span className="codicon codicon-add" />
-							</VSCodeButton>
-							{currentApiConfigName && (
-								<>
-									<VSCodeButton
-										appearance="icon"
-										onClick={handleStartRename}
-										title="Rename profile"
-										style={{
-											padding: 0,
-											margin: 0,
-											height: "28px",
-											width: "28px",
-											minWidth: "28px",
-										}}>
-										<span className="codicon codicon-edit" />
-									</VSCodeButton>
-									<VSCodeButton
-										appearance="icon"
-										onClick={handleDelete}
-										title={isOnlyProfile ? "Cannot delete the only profile" : "Delete profile"}
-										disabled={isOnlyProfile}
-										style={{
-											padding: 0,
-											margin: 0,
-											height: "28px",
-											width: "28px",
-											minWidth: "28px",
-										}}>
-										<span className="codicon codicon-trash" />
-									</VSCodeButton>
-								</>
-							)}
-						</div>
-						<p
-							style={{
-								fontSize: "12px",
-								margin: "5px 0 12px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							Save different API configurations to quickly switch between providers and settings
-						</p>
-					</>
-				)}
-
-				<Dialog
-					open={isCreating}
-					onOpenChange={(open: boolean) => {
-						if (open) {
-							setIsCreating(true)
-							setNewProfileName("")
-							setError(null)
-						} else {
-							resetCreateState()
-						}
-					}}
-					aria-labelledby="new-profile-title">
-					<DialogContent className="p-4 max-w-sm">
-						<DialogTitle>New Configuration Profile</DialogTitle>
-						<Input
-							ref={newProfileInputRef}
-							value={newProfileName}
+			{isRenaming ? (
+				<div
+					data-testid="rename-form"
+					style={{ display: "flex", gap: "4px", alignItems: "center", flexDirection: "column" }}>
+					<div style={{ display: "flex", gap: "4px", alignItems: "center", width: "100%" }}>
+						<VSCodeTextField
+							ref={inputRef}
+							value={inputValue}
 							onInput={(e: unknown) => {
 								const target = e as { target: { value: string } }
-								setNewProfileName(target.target.value)
+								setInputValue(target.target.value)
 								setError(null)
 							}}
-							placeholder="Enter profile name"
-							style={{ width: "100%" }}
+							placeholder="Enter new name"
+							style={{ flexGrow: 1 }}
 							onKeyDown={(e: unknown) => {
 								const event = e as { key: string }
-								if (event.key === "Enter" && newProfileName.trim()) {
-									handleNewProfileSave()
+								if (event.key === "Enter" && inputValue.trim()) {
+									handleSave()
 								} else if (event.key === "Escape") {
-									resetCreateState()
+									handleCancel()
 								}
 							}}
 						/>
-						{error && (
-							<p className="text-red-500 text-sm mt-2" data-testid="error-message">
-								{error}
-							</p>
+						<VSCodeButton
+							appearance="icon"
+							disabled={!inputValue.trim()}
+							onClick={handleSave}
+							title="Save"
+							style={{
+								padding: 0,
+								margin: 0,
+								height: "28px",
+								width: "28px",
+								minWidth: "28px",
+							}}>
+							<span className="codicon codicon-check" />
+						</VSCodeButton>
+						<VSCodeButton
+							appearance="icon"
+							onClick={handleCancel}
+							title="Cancel"
+							style={{
+								padding: 0,
+								margin: 0,
+								height: "28px",
+								width: "28px",
+								minWidth: "28px",
+							}}>
+							<span className="codicon codicon-close" />
+						</VSCodeButton>
+					</div>
+					{error && (
+						<p className="text-red-500 text-sm mt-2" data-testid="error-message">
+							{error}
+						</p>
+					)}
+				</div>
+			) : (
+				<>
+					<div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+						<Dropdown
+							id="config-profile"
+							value={currentApiConfigName}
+							onChange={(value: unknown) => {
+								onSelectConfig((value as DropdownOption).value)
+							}}
+							role="combobox"
+							options={listApiConfigMeta.map((config) => ({
+								value: config.name,
+								label: config.name,
+							}))}
+						/>
+						<VSCodeButton
+							appearance="icon"
+							onClick={handleAdd}
+							title="Add profile"
+							style={{
+								padding: 0,
+								margin: 0,
+								height: "28px",
+								width: "28px",
+								minWidth: "28px",
+							}}>
+							<span className="codicon codicon-add" />
+						</VSCodeButton>
+						{currentApiConfigName && (
+							<>
+								<VSCodeButton
+									appearance="icon"
+									onClick={handleStartRename}
+									title="Rename profile"
+									style={{
+										padding: 0,
+										margin: 0,
+										height: "28px",
+										width: "28px",
+										minWidth: "28px",
+									}}>
+									<span className="codicon codicon-edit" />
+								</VSCodeButton>
+								<VSCodeButton
+									appearance="icon"
+									onClick={handleDelete}
+									title={isOnlyProfile ? "Cannot delete the only profile" : "Delete profile"}
+									disabled={isOnlyProfile}
+									style={{
+										padding: 0,
+										margin: 0,
+										height: "28px",
+										width: "28px",
+										minWidth: "28px",
+									}}>
+									<span className="codicon codicon-trash" />
+								</VSCodeButton>
+							</>
 						)}
-						<div className="flex justify-end gap-2 mt-4">
-							<Button variant="secondary" onClick={resetCreateState}>
-								Cancel
-							</Button>
-							<Button variant="default" disabled={!newProfileName.trim()} onClick={handleNewProfileSave}>
-								Create Profile
-							</Button>
-						</div>
-					</DialogContent>
-				</Dialog>
-			</div>
+					</div>
+					<p
+						style={{
+							fontSize: "12px",
+							margin: "5px 0 12px",
+							color: "var(--vscode-descriptionForeground)",
+						}}>
+						Save different API configurations to quickly switch between providers and settings.
+					</p>
+				</>
+			)}
+
+			<Dialog
+				open={isCreating}
+				onOpenChange={(open: boolean) => {
+					if (open) {
+						setIsCreating(true)
+						setNewProfileName("")
+						setError(null)
+					} else {
+						resetCreateState()
+					}
+				}}
+				aria-labelledby="new-profile-title">
+				<DialogContent className="p-4 max-w-sm">
+					<DialogTitle>New Configuration Profile</DialogTitle>
+					<Input
+						ref={newProfileInputRef}
+						value={newProfileName}
+						onInput={(e: unknown) => {
+							const target = e as { target: { value: string } }
+							setNewProfileName(target.target.value)
+							setError(null)
+						}}
+						placeholder="Enter profile name"
+						style={{ width: "100%" }}
+						onKeyDown={(e: unknown) => {
+							const event = e as { key: string }
+							if (event.key === "Enter" && newProfileName.trim()) {
+								handleNewProfileSave()
+							} else if (event.key === "Escape") {
+								resetCreateState()
+							}
+						}}
+					/>
+					{error && (
+						<p className="text-red-500 text-sm mt-2" data-testid="error-message">
+							{error}
+						</p>
+					)}
+					<div className="flex justify-end gap-2 mt-4">
+						<Button variant="secondary" onClick={resetCreateState}>
+							Cancel
+						</Button>
+						<Button variant="default" disabled={!newProfileName.trim()} onClick={handleNewProfileSave}>
+							Create Profile
+						</Button>
+					</div>
+				</DialogContent>
+			</Dialog>
 		</div>
 	)
 }

webview-ui/src/components/settings/ApiOptions.tsx

@@ -37,7 +37,6 @@ import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 import { vscode } from "../../utils/vscode"
 import VSCodeButtonLink from "../common/VSCodeButtonLink"
 import { ModelInfoView } from "./ModelInfoView"
-import { DROPDOWN_Z_INDEX } from "./styles"
 import { ModelPicker } from "./ModelPicker"
 import { TemperatureControl } from "./TemperatureControl"
 import { validateApiConfiguration, validateModelId } from "@/utils/validate"
@@ -242,7 +241,6 @@ const ApiOptions = ({
 					id="api-provider"
 					value={selectedProvider}
 					onChange={handleInputChange("apiProvider", dropdownEventTransform)}
-					style={{ minWidth: 130, position: "relative", zIndex: DROPDOWN_Z_INDEX + 1 }}
 					options={[
 						{ value: "openrouter", label: "OpenRouter" },
 						{ value: "anthropic", label: "Anthropic" },
@@ -498,7 +496,7 @@ const ApiOptions = ({
 								/>
 							)}
 							<Checkbox
-								checked={apiConfiguration?.openRouterUseMiddleOutTransform || false}
+								checked={apiConfiguration?.openRouterUseMiddleOutTransform ?? true}
 								onChange={handleInputChange("openRouterUseMiddleOutTransform", noTransform)}>
 								Compress prompts and message chains to the context size (
 								<a href="https://openrouter.ai/docs/transforms">OpenRouter Transforms</a>)
@@ -1107,6 +1105,79 @@ const ApiOptions = ({
 							))}
 						</VSCodeRadioGroup>
 					)}
+					<div style={{ display: "flex", alignItems: "center", marginTop: "16px", marginBottom: "8px" }}>
+						<Checkbox
+							checked={apiConfiguration?.lmStudioSpeculativeDecodingEnabled === true}
+							onChange={(checked) => {
+								// Explicitly set the boolean value using direct method
+								setApiConfigurationField("lmStudioSpeculativeDecodingEnabled", checked)
+							}}>
+							Enable Speculative Decoding
+						</Checkbox>
+					</div>
+					{apiConfiguration?.lmStudioSpeculativeDecodingEnabled && (
+						<>
+							<VSCodeTextField
+								value={apiConfiguration?.lmStudioDraftModelId || ""}
+								style={{ width: "100%" }}
+								onInput={handleInputChange("lmStudioDraftModelId")}
+								placeholder={"e.g. lmstudio-community/llama-3.2-1b-instruct"}>
+								<span className="font-medium">Draft Model ID</span>
+							</VSCodeTextField>
+							<div
+								style={{
+									fontSize: "11px",
+									color: "var(--vscode-descriptionForeground)",
+									marginTop: 4,
+									display: "flex",
+									alignItems: "center",
+									gap: 4,
+								}}>
+								<i className="codicon codicon-info" style={{ fontSize: "12px" }}></i>
+								<span>
+									Draft model must be from the same model family for speculative decoding to work
+									correctly.
+								</span>
+							</div>
+							{lmStudioModels.length > 0 && (
+								<>
+									<div style={{ marginTop: "8px" }}>
+										<span className="font-medium">Select Draft Model</span>
+									</div>
+									<VSCodeRadioGroup
+										value={
+											lmStudioModels.includes(apiConfiguration?.lmStudioDraftModelId || "")
+												? apiConfiguration?.lmStudioDraftModelId
+												: ""
+										}
+										onChange={handleInputChange("lmStudioDraftModelId")}>
+										{lmStudioModels.map((model) => (
+											<VSCodeRadio key={`draft-${model}`} value={model}>
+												{model}
+											</VSCodeRadio>
+										))}
+									</VSCodeRadioGroup>
+									{lmStudioModels.length === 0 && (
+										<div
+											style={{
+												fontSize: "12px",
+												marginTop: "8px",
+												padding: "6px",
+												backgroundColor: "var(--vscode-inputValidation-infoBackground)",
+												border: "1px solid var(--vscode-inputValidation-infoBorder)",
+												borderRadius: "3px",
+												color: "var(--vscode-inputValidation-infoForeground)",
+											}}>
+											<i className="codicon codicon-info" style={{ marginRight: "5px" }}></i>
+											No draft models found. Please ensure LM Studio is running with Server Mode
+											enabled.
+										</div>
+									)}
+								</>
+							)}
+						</>
+					)}
+
 					<p
 						style={{
 							fontSize: "12px",
@@ -1209,8 +1280,8 @@ const ApiOptions = ({
 								color: "var(--vscode-errorForeground)",
 								fontWeight: 500,
 							}}>
-							Note: This is a very experimental integration and may not work as expected. Please report
-							any issues to the Roo-Code GitHub repository.
+							Note: This is a very experimental integration and provider support will vary. If you get an
+							error about a model not being supported, that's an issue on the provider's end.
 						</p>
 					</div>
 				</div>

webview-ui/src/components/settings/AutoApproveSettings.tsx

@@ -0,0 +1,252 @@
+import { HTMLAttributes, useState } from "react"
+import { VSCodeButton, VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { CheckCheck } from "lucide-react"
+
+import { vscode } from "@/utils/vscode"
+import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
+
+import { SetCachedStateField } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	alwaysAllowReadOnly?: boolean
+	alwaysAllowWrite?: boolean
+	writeDelayMs: number
+	alwaysAllowBrowser?: boolean
+	alwaysApproveResubmit?: boolean
+	requestDelaySeconds: number
+	alwaysAllowMcp?: boolean
+	alwaysAllowModeSwitch?: boolean
+	alwaysAllowExecute?: boolean
+	allowedCommands?: string[]
+	setCachedStateField: SetCachedStateField<keyof ExtensionStateContextType>
+}
+
+export const AutoApproveSettings = ({
+	alwaysAllowReadOnly,
+	alwaysAllowWrite,
+	writeDelayMs,
+	alwaysAllowBrowser,
+	alwaysApproveResubmit,
+	requestDelaySeconds,
+	alwaysAllowMcp,
+	alwaysAllowModeSwitch,
+	alwaysAllowExecute,
+	allowedCommands,
+	setCachedStateField,
+	className,
+	...props
+}: AutoApproveSettingsProps) => {
+	const [commandInput, setCommandInput] = useState("")
+
+	const handleAddCommand = () => {
+		const currentCommands = allowedCommands ?? []
+		if (commandInput && !currentCommands.includes(commandInput)) {
+			const newCommands = [...currentCommands, commandInput]
+			setCachedStateField("allowedCommands", newCommands)
+			setCommandInput("")
+			vscode.postMessage({ type: "allowedCommands", commands: newCommands })
+		}
+	}
+
+	return (
+		<div {...props}>
+			<SectionHeader description="Allow Roo to automatically perform operations without requiring approval. Enable these settings only if you fully trust the AI and understand the associated security risks.">
+				<div className="flex items-center gap-2">
+					<CheckCheck className="w-4" />
+					<div>Auto-Approve</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysAllowReadOnly}
+						onChange={(e: any) => setCachedStateField("alwaysAllowReadOnly", e.target.checked)}>
+						<span className="font-medium">Always approve read-only operations</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						When enabled, Roo will automatically view directory contents and read files without requiring
+						you to click the Approve button.
+					</p>
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysAllowWrite}
+						onChange={(e: any) => setCachedStateField("alwaysAllowWrite", e.target.checked)}>
+						<span className="font-medium">Always approve write operations</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Automatically create and edit files without requiring approval
+					</p>
+					{alwaysAllowWrite && (
+						<div
+							style={{
+								marginTop: 10,
+								paddingLeft: 10,
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+								<input
+									type="range"
+									min="0"
+									max="5000"
+									step="100"
+									value={writeDelayMs}
+									onChange={(e) => setCachedStateField("writeDelayMs", parseInt(e.target.value))}
+									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+								/>
+								<span style={{ minWidth: "45px", textAlign: "left" }}>{writeDelayMs}ms</span>
+							</div>
+							<p className="text-vscode-descriptionForeground text-sm mt-1">
+								Delay after writes to allow diagnostics to detect potential problems
+							</p>
+						</div>
+					)}
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysAllowBrowser}
+						onChange={(e: any) => setCachedStateField("alwaysAllowBrowser", e.target.checked)}>
+						<span className="font-medium">Always approve browser actions</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Automatically perform browser actions without requiring approval
+						<br />
+						Note: Only applies when the model supports computer use
+					</p>
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysApproveResubmit}
+						onChange={(e: any) => setCachedStateField("alwaysApproveResubmit", e.target.checked)}>
+						<span className="font-medium">Always retry failed API requests</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Automatically retry failed API requests when server returns an error response
+					</p>
+					{alwaysApproveResubmit && (
+						<div
+							style={{
+								marginTop: 10,
+								paddingLeft: 10,
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+								<input
+									type="range"
+									min="5"
+									max="100"
+									step="1"
+									value={requestDelaySeconds}
+									onChange={(e) =>
+										setCachedStateField("requestDelaySeconds", parseInt(e.target.value))
+									}
+									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+								/>
+								<span style={{ minWidth: "45px", textAlign: "left" }}>{requestDelaySeconds}s</span>
+							</div>
+							<p className="text-vscode-descriptionForeground text-sm mt-0">
+								Delay before retrying the request
+							</p>
+						</div>
+					)}
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysAllowMcp}
+						onChange={(e: any) => setCachedStateField("alwaysAllowMcp", e.target.checked)}>
+						<span className="font-medium">Always approve MCP tools</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Enable auto-approval of individual MCP tools in the MCP Servers view (requires both this setting
+						and the tool's individual "Always allow" checkbox)
+					</p>
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysAllowModeSwitch}
+						onChange={(e: any) => setCachedStateField("alwaysAllowModeSwitch", e.target.checked)}>
+						<span className="font-medium">Always approve mode switching & task creation</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Automatically switch between different AI modes and create new tasks without requiring approval
+					</p>
+				</div>
+
+				<div>
+					<VSCodeCheckbox
+						checked={alwaysAllowExecute}
+						onChange={(e: any) => setCachedStateField("alwaysAllowExecute", e.target.checked)}>
+						<span className="font-medium">Always approve allowed execute operations</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						Automatically execute allowed terminal commands without requiring approval
+					</p>
+					{alwaysAllowExecute && (
+						<div
+							style={{
+								marginTop: 10,
+								paddingLeft: 10,
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<span className="font-medium">Allowed Auto-Execute Commands</span>
+							<p className="text-vscode-descriptionForeground text-sm mt-0">
+								Command prefixes that can be auto-executed when "Always approve execute operations" is
+								enabled. Add * to allow all commands (use with caution).
+							</p>
+							<div style={{ display: "flex", gap: "5px", marginTop: "10px" }}>
+								<VSCodeTextField
+									value={commandInput}
+									onInput={(e: any) => setCommandInput(e.target.value)}
+									onKeyDown={(e: any) => {
+										if (e.key === "Enter") {
+											e.preventDefault()
+											handleAddCommand()
+										}
+									}}
+									placeholder="Enter command prefix (e.g., 'git ')"
+									style={{ flexGrow: 1 }}
+								/>
+								<VSCodeButton onClick={handleAddCommand}>Add</VSCodeButton>
+							</div>
+							<div
+								style={{
+									marginTop: "10px",
+									display: "flex",
+									flexWrap: "wrap",
+									gap: "5px",
+								}}>
+								{(allowedCommands ?? []).map((cmd, index) => (
+									<div
+										key={index}
+										className="border border-vscode-input-border bg-primary text-primary-foreground flex items-center gap-1 rounded-xs px-1.5 p-0.5">
+										<span>{cmd}</span>
+										<VSCodeButton
+											appearance="icon"
+											className="text-primary-foreground"
+											onClick={() => {
+												const newCommands = (allowedCommands ?? []).filter(
+													(_, i) => i !== index,
+												)
+												setCachedStateField("allowedCommands", newCommands)
+												vscode.postMessage({ type: "allowedCommands", commands: newCommands })
+											}}>
+											<span className="codicon codicon-close" />
+										</VSCodeButton>
+									</div>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/BrowserSettings.tsx

@@ -0,0 +1,105 @@
+import { HTMLAttributes } from "react"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { Dropdown, type DropdownOption } from "vscrui"
+import { SquareMousePointer } from "lucide-react"
+
+import { SetCachedStateField } from "./types"
+import { sliderLabelStyle } from "./styles"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type BrowserSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	browserToolEnabled?: boolean
+	browserViewportSize?: string
+	screenshotQuality?: number
+	setCachedStateField: SetCachedStateField<"browserToolEnabled" | "browserViewportSize" | "screenshotQuality">
+}
+
+export const BrowserSettings = ({
+	browserToolEnabled,
+	browserViewportSize,
+	screenshotQuality,
+	setCachedStateField,
+	...props
+}: BrowserSettingsProps) => {
+	return (
+		<div {...props}>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<SquareMousePointer className="w-4" />
+					<div>Browser / Computer Use</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={browserToolEnabled}
+						onChange={(e: any) => setCachedStateField("browserToolEnabled", e.target.checked)}>
+						<span className="font-medium">Enable browser tool</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						When enabled, Roo can use a browser to interact with websites when using models that support
+						computer use.
+					</p>
+					{browserToolEnabled && (
+						<div
+							style={{
+								marginLeft: 0,
+								paddingLeft: 10,
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<div>
+								<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>
+									Viewport size
+								</label>
+								<div className="dropdown-container">
+									<Dropdown
+										value={browserViewportSize}
+										onChange={(value: unknown) => {
+											setCachedStateField("browserViewportSize", (value as DropdownOption).value)
+										}}
+										style={{ width: "100%" }}
+										options={[
+											{ value: "1280x800", label: "Large Desktop (1280x800)" },
+											{ value: "900x600", label: "Small Desktop (900x600)" },
+											{ value: "768x1024", label: "Tablet (768x1024)" },
+											{ value: "360x640", label: "Mobile (360x640)" },
+										]}
+									/>
+								</div>
+								<p className="text-vscode-descriptionForeground text-sm mt-0">
+									Select the viewport size for browser interactions. This affects how websites are
+									displayed and interacted with.
+								</p>
+							</div>
+							<div>
+								<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
+									<span className="font-medium">Screenshot quality</span>
+									<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+										<input
+											type="range"
+											min="1"
+											max="100"
+											step="1"
+											value={screenshotQuality ?? 75}
+											className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+											onChange={(e) =>
+												setCachedStateField("screenshotQuality", parseInt(e.target.value))
+											}
+										/>
+										<span style={{ ...sliderLabelStyle }}>{screenshotQuality ?? 75}%</span>
+									</div>
+								</div>
+								<p className="text-vscode-descriptionForeground text-sm mt-0">
+									Adjust the WebP quality of browser screenshots. Higher values provide clearer
+									screenshots but increase token usage.
+								</p>
+							</div>
+						</div>
+					)}
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/CheckpointSettings.tsx

@@ -0,0 +1,82 @@
+import { HTMLAttributes } from "react"
+import { VSCodeCheckbox, VSCodeRadio, VSCodeRadioGroup } from "@vscode/webview-ui-toolkit/react"
+import { GitBranch } from "lucide-react"
+
+import { CheckpointStorage, isCheckpointStorage } from "../../../../src/shared/checkpoints"
+
+import { SetCachedStateField } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type CheckpointSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	enableCheckpoints?: boolean
+	checkpointStorage?: CheckpointStorage
+	setCachedStateField: SetCachedStateField<"enableCheckpoints" | "checkpointStorage">
+}
+
+export const CheckpointSettings = ({
+	enableCheckpoints,
+	checkpointStorage = "task",
+	setCachedStateField,
+	...props
+}: CheckpointSettingsProps) => {
+	return (
+		<div {...props}>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<GitBranch className="w-4" />
+					<div>Checkpoints</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={enableCheckpoints}
+						onChange={(e: any) => {
+							setCachedStateField("enableCheckpoints", e.target.checked)
+						}}>
+						<span className="font-medium">Enable automatic checkpoints</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						When enabled, Roo will automatically create checkpoints during task execution, making it easy to
+						review changes or revert to earlier states.
+					</p>
+					{enableCheckpoints && (
+						<div>
+							<div className="font-medium">Storage</div>
+							<VSCodeRadioGroup
+								role="radiogroup"
+								value={checkpointStorage}
+								onChange={(e) => {
+									if ("target" in e) {
+										const { value } = e.target as HTMLInputElement
+
+										if (isCheckpointStorage(value)) {
+											setCachedStateField("checkpointStorage", value)
+										}
+									}
+								}}>
+								<VSCodeRadio value="task">Task</VSCodeRadio>
+								<VSCodeRadio value="workspace">Workspace</VSCodeRadio>
+							</VSCodeRadioGroup>
+							{checkpointStorage === "task" && (
+								<p className="text-vscode-descriptionForeground text-sm mt-0">
+									Each task will have it's own dedicated git repository for storing checkpoints. This
+									provides the best isolation between tasks but uses more disk space.
+								</p>
+							)}
+							{checkpointStorage === "workspace" && (
+								<p className="text-vscode-descriptionForeground text-sm mt-0">
+									Each VSCode workspace will have it's own dedicated git repository for storing
+									checkpoints and tasks within a workspace will share this repository. This option
+									provides better performance and disk space efficiency.
+								</p>
+							)}
+						</div>
+					)}
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/ExperimentalFeature.tsx

@@ -7,25 +7,14 @@ interface ExperimentalFeatureProps {
 	onChange: (value: boolean) => void
 }
 
-const ExperimentalFeature = ({ name, description, enabled, onChange }: ExperimentalFeatureProps) => {
-	return (
-		<div>
-			<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-				<span style={{ color: "var(--vscode-errorForeground)" }}>⚠️</span>
-				<VSCodeCheckbox checked={enabled} onChange={(e: any) => onChange(e.target.checked)}>
-					<span style={{ fontWeight: "500" }}>{name}</span>
-				</VSCodeCheckbox>
-			</div>
-			<p
-				style={{
-					fontSize: "12px",
-					marginBottom: 15,
-					color: "var(--vscode-descriptionForeground)",
-				}}>
-				{description}
-			</p>
+export const ExperimentalFeature = ({ name, description, enabled, onChange }: ExperimentalFeatureProps) => (
+	<div>
+		<div className="flex items-center gap-2">
+			<span className="text-vscode-errorForeground">⚠️</span>
+			<VSCodeCheckbox checked={enabled} onChange={(e: any) => onChange(e.target.checked)}>
+				<span className="font-medium">{name}</span>
+			</VSCodeCheckbox>
 		</div>
-	)
-}
-
-export default ExperimentalFeature
+		<p className="text-vscode-descriptionForeground text-sm mt-0">{description}</p>
+	</div>
+)

webview-ui/src/components/settings/ExperimentalSettings.tsx

@@ -0,0 +1,53 @@
+import { HTMLAttributes } from "react"
+import { FlaskConical } from "lucide-react"
+
+import { EXPERIMENT_IDS, experimentConfigsMap, ExperimentId } from "../../../../src/shared/experiments"
+
+import { cn } from "@/lib/utils"
+
+import { SetCachedStateField, SetExperimentEnabled } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+import { ExperimentalFeature } from "./ExperimentalFeature"
+
+type ExperimentalSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	setCachedStateField: SetCachedStateField<
+		"rateLimitSeconds" | "terminalOutputLineLimit" | "maxOpenTabsContext" | "diffEnabled" | "fuzzyMatchThreshold"
+	>
+	experiments: Record<ExperimentId, boolean>
+	setExperimentEnabled: SetExperimentEnabled
+}
+
+export const ExperimentalSettings = ({
+	setCachedStateField,
+	experiments,
+	setExperimentEnabled,
+	className,
+	...props
+}: ExperimentalSettingsProps) => {
+	return (
+		<div className={cn("flex flex-col gap-2", className)} {...props}>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<FlaskConical className="w-4" />
+					<div>Experimental Features</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				{Object.entries(experimentConfigsMap)
+					.filter((config) => config[0] !== "DIFF_STRATEGY")
+					.map((config) => (
+						<ExperimentalFeature
+							key={config[0]}
+							{...config[1]}
+							enabled={experiments[EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS]] ?? false}
+							onChange={(enabled) =>
+								setExperimentEnabled(EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS], enabled)
+							}
+						/>
+					))}
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/NotificationSettings.tsx

@@ -0,0 +1,69 @@
+import { HTMLAttributes } from "react"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { Bell } from "lucide-react"
+
+import { SetCachedStateField } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type NotificationSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	soundEnabled?: boolean
+	soundVolume?: number
+	setCachedStateField: SetCachedStateField<"soundEnabled" | "soundVolume">
+}
+
+export const NotificationSettings = ({
+	soundEnabled,
+	soundVolume,
+	setCachedStateField,
+	...props
+}: NotificationSettingsProps) => {
+	return (
+		<div {...props}>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<Bell className="w-4" />
+					<div>Notifications</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={soundEnabled}
+						onChange={(e: any) => setCachedStateField("soundEnabled", e.target.checked)}>
+						<span className="font-medium">Enable sound effects</span>
+					</VSCodeCheckbox>
+					<p className="text-vscode-descriptionForeground text-sm mt-0">
+						When enabled, Roo will play sound effects for notifications and events.
+					</p>
+					{soundEnabled && (
+						<div
+							style={{
+								marginLeft: 0,
+								paddingLeft: 10,
+								borderLeft: "2px solid var(--vscode-button-background)",
+							}}>
+							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+								<input
+									type="range"
+									min="0"
+									max="1"
+									step="0.01"
+									value={soundVolume ?? 0.5}
+									onChange={(e) => setCachedStateField("soundVolume", parseFloat(e.target.value))}
+									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
+									aria-label="Volume"
+								/>
+								<span style={{ minWidth: "35px", textAlign: "left" }}>
+									{((soundVolume ?? 0.5) * 100).toFixed(0)}%
+								</span>
+							</div>
+							<p className="text-vscode-descriptionForeground text-sm mt-1">Volume</p>
+						</div>
+					)}
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/Section.tsx

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+type SectionProps = HTMLAttributes<HTMLDivElement>
+
+export const Section = ({ className, ...props }: SectionProps) => (
+	<div className={cn("flex flex-col gap-2 p-5", className)} {...props} />
+)

webview-ui/src/components/settings/SectionHeader.tsx

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+type SectionHeaderProps = HTMLAttributes<HTMLDivElement> & {
+	children: React.ReactNode
+	description?: string
+}
+
+export const SectionHeader = ({ description, children, className, ...props }: SectionHeaderProps) => (
+	<div className={cn("sticky top-0 z-10 bg-vscode-panel-border px-5 py-4", className)} {...props}>
+		<h4 className="m-0">{children}</h4>
+		{description && <p className="text-vscode-descriptionForeground text-sm mt-2 mb-0">{description}</p>}
+	</div>
+)

webview-ui/src/components/settings/SettingsFooter.tsx

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react"
+
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+
+import { vscode } from "@/utils/vscode"
+import { cn } from "@/lib/utils"
+
+type SettingsFooterProps = HTMLAttributes<HTMLDivElement> & {
+	version: string
+}
+
+export const SettingsFooter = ({ version, className, ...props }: SettingsFooterProps) => (
+	<div className={cn("text-vscode-descriptionForeground p-5", className)} {...props}>
+		<p style={{ wordWrap: "break-word", margin: 0, padding: 0 }}>
+			If you have any questions or feedback, feel free to open an issue at{" "}
+			<VSCodeLink href="https://github.com/RooVetGit/Roo-Code" style={{ display: "inline" }}>
+				github.com/RooVetGit/Roo-Code
+			</VSCodeLink>{" "}
+			or join{" "}
+			<VSCodeLink href="https://www.reddit.com/r/RooCode/" style={{ display: "inline" }}>
+				reddit.com/r/RooCode
+			</VSCodeLink>
+		</p>
+		<p className="italic">Roo Code v{version}</p>
+		<div className="flex justify-between items-center gap-3">
+			<p>Reset all global state and secret storage in the extension.</p>
+			<VSCodeButton
+				onClick={() => vscode.postMessage({ type: "resetState" })}
+				appearance="secondary"
+				className="shrink-0">
+				<span className="codicon codicon-warning text-vscode-errorForeground mr-1" />
+				Reset
+			</VSCodeButton>
+		</div>
+	</div>
+)

webview-ui/src/components/settings/SettingsView.tsx

@@ -1,7 +1,12 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
-import { VSCodeButton, VSCodeCheckbox, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { Button, Dropdown, type DropdownOption } from "vscrui"
+import { Button as VSCodeButton } from "vscrui"
+import { CheckCheck, SquareMousePointer, Webhook, GitBranch, Bell, Cog, FlaskConical } from "lucide-react"
 
+import { ExperimentId } from "../../../../src/shared/experiments"
+import { ApiConfiguration } from "../../../../src/shared/api"
+
+import { vscode } from "@/utils/vscode"
+import { ExtensionStateContextType, useExtensionState } from "@/context/ExtensionStateContext"
 import {
 	AlertDialog,
 	AlertDialogContent,
@@ -11,37 +16,43 @@ import {
 	AlertDialogAction,
 	AlertDialogHeader,
 	AlertDialogFooter,
+	Button,
 } from "@/components/ui"
 
-import { vscode } from "../../utils/vscode"
-import { ExtensionStateContextType, useExtensionState } from "../../context/ExtensionStateContext"
-import { EXPERIMENT_IDS, experimentConfigsMap, ExperimentId } from "../../../../src/shared/experiments"
-import { ApiConfiguration } from "../../../../src/shared/api"
-
-import ExperimentalFeature from "./ExperimentalFeature"
+import { SetCachedStateField, SetExperimentEnabled } from "./types"
+import { SectionHeader } from "./SectionHeader"
 import ApiConfigManager from "./ApiConfigManager"
 import ApiOptions from "./ApiOptions"
-
-type SettingsViewProps = {
-	onDone: () => void
-}
+import { AutoApproveSettings } from "./AutoApproveSettings"
+import { BrowserSettings } from "./BrowserSettings"
+import { CheckpointSettings } from "./CheckpointSettings"
+import { NotificationSettings } from "./NotificationSettings"
+import { AdvancedSettings } from "./AdvancedSettings"
+import { SettingsFooter } from "./SettingsFooter"
+import { Section } from "./Section"
+import { ExperimentalSettings } from "./ExperimentalSettings"
 
 export interface SettingsViewRef {
 	checkUnsaveChanges: (then: () => void) => void
 }
 
+type SettingsViewProps = {
+	onDone: () => void
+}
+
 const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone }, ref) => {
 	const extensionState = useExtensionState()
-	const [commandInput, setCommandInput] = useState("")
+	const { currentApiConfigName, listApiConfigMeta, uriScheme, version } = extensionState
+
 	const [isDiscardDialogShow, setDiscardDialogShow] = useState(false)
-	const [cachedState, setCachedState] = useState(extensionState)
 	const [isChangeDetected, setChangeDetected] = useState(false)
-	const prevApiConfigName = useRef(extensionState.currentApiConfigName)
-	const confirmDialogHandler = useRef<() => void>()
 	const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
 
-	// TODO: Reduce WebviewMessage/ExtensionState complexity
-	const { currentApiConfigName } = extensionState
+	const prevApiConfigName = useRef(currentApiConfigName)
+	const confirmDialogHandler = useRef<() => void>()
+
+	const [cachedState, setCachedState] = useState(extensionState)
+
 	const {
 		alwaysAllowReadOnly,
 		allowedCommands,
@@ -51,8 +62,10 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 		alwaysAllowModeSwitch,
 		alwaysAllowWrite,
 		alwaysApproveResubmit,
+		browserToolEnabled,
 		browserViewportSize,
 		enableCheckpoints,
+		checkpointStorage,
 		diffEnabled,
 		experiments,
 		fuzzyMatchThreshold,
@@ -67,7 +80,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 		writeDelayMs,
 	} = cachedState
 
-	//Make sure apiConfiguration is initialized and managed by SettingsView
+	// Make sure apiConfiguration is initialized and managed by SettingsView.
 	const apiConfiguration = useMemo(() => cachedState.apiConfiguration ?? {}, [cachedState.apiConfiguration])
 
 	useEffect(() => {
@@ -79,24 +92,19 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 
 		setCachedState((prevCachedState) => ({ ...prevCachedState, ...extensionState }))
 		prevApiConfigName.current = currentApiConfigName
-		// console.log("useEffect: currentApiConfigName changed, setChangeDetected -> false")
 		setChangeDetected(false)
 	}, [currentApiConfigName, extensionState, isChangeDetected])
 
-	const setCachedStateField = useCallback(
-		<K extends keyof ExtensionStateContextType>(field: K, value: ExtensionStateContextType[K]) => {
-			setCachedState((prevState) => {
-				if (prevState[field] === value) {
-					return prevState
-				}
+	const setCachedStateField: SetCachedStateField<keyof ExtensionStateContextType> = useCallback((field, value) => {
+		setCachedState((prevState) => {
+			if (prevState[field] === value) {
+				return prevState
+			}
 
-				// console.log(`setCachedStateField(${field} -> ${value}): setChangeDetected -> true`)
-				setChangeDetected(true)
-				return { ...prevState, [field]: value }
-			})
-		},
-		[],
-	)
+			setChangeDetected(true)
+			return { ...prevState, [field]: value }
+		})
+	}, [])
 
 	const setApiConfigurationField = useCallback(
 		<K extends keyof ApiConfiguration>(field: K, value: ApiConfiguration[K]) => {
@@ -105,7 +113,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 					return prevState
 				}
 
-				// console.log(`setApiConfigurationField(${field} -> ${value}): setChangeDetected -> true`)
 				setChangeDetected(true)
 
 				return { ...prevState, apiConfiguration: { ...prevState.apiConfiguration, [field]: value } }
@@ -114,13 +121,12 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 		[],
 	)
 
-	const setExperimentEnabled = useCallback((id: ExperimentId, enabled: boolean) => {
+	const setExperimentEnabled: SetExperimentEnabled = useCallback((id: ExperimentId, enabled: boolean) => {
 		setCachedState((prevState) => {
 			if (prevState.experiments?.[id] === enabled) {
 				return prevState
 			}
 
-			// console.log("setExperimentEnabled: setChangeDetected -> true")
 			setChangeDetected(true)
 
 			return {
@@ -140,10 +146,12 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 			vscode.postMessage({ type: "alwaysAllowBrowser", bool: alwaysAllowBrowser })
 			vscode.postMessage({ type: "alwaysAllowMcp", bool: alwaysAllowMcp })
 			vscode.postMessage({ type: "allowedCommands", commands: allowedCommands ?? [] })
+			vscode.postMessage({ type: "browserToolEnabled", bool: browserToolEnabled })
 			vscode.postMessage({ type: "soundEnabled", bool: soundEnabled })
 			vscode.postMessage({ type: "soundVolume", value: soundVolume })
 			vscode.postMessage({ type: "diffEnabled", bool: diffEnabled })
 			vscode.postMessage({ type: "enableCheckpoints", bool: enableCheckpoints })
+			vscode.postMessage({ type: "checkpointStorage", text: checkpointStorage })
 			vscode.postMessage({ type: "browserViewportSize", text: browserViewportSize })
 			vscode.postMessage({ type: "fuzzyMatchThreshold", value: fuzzyMatchThreshold ?? 1.0 })
 			vscode.postMessage({ type: "writeDelayMs", value: writeDelayMs })
@@ -158,7 +166,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 			vscode.postMessage({ type: "updateExperimental", values: experiments })
 			vscode.postMessage({ type: "alwaysAllowModeSwitch", bool: alwaysAllowModeSwitch })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
-			// console.log("handleSubmit: setChangeDetected -> false")
 			setChangeDetected(false)
 		}
 	}
@@ -183,108 +190,125 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 		}
 	}, [])
 
-	const handleResetState = () => {
-		vscode.postMessage({ type: "resetState" })
-	}
+	const providersRef = useRef<HTMLDivElement>(null)
+	const autoApproveRef = useRef<HTMLDivElement>(null)
+	const browserRef = useRef<HTMLDivElement>(null)
+	const checkpointRef = useRef<HTMLDivElement>(null)
+	const notificationsRef = useRef<HTMLDivElement>(null)
+	const advancedRef = useRef<HTMLDivElement>(null)
+	const experimentalRef = useRef<HTMLDivElement>(null)
+
+	const [activeSection, setActiveSection] = useState<string>("providers")
+
+	const sections = useMemo(
+		() => [
+			{ id: "providers", icon: Webhook, ref: providersRef },
+			{ id: "autoApprove", icon: CheckCheck, ref: autoApproveRef },
+			{ id: "browser", icon: SquareMousePointer, ref: browserRef },
+			{ id: "checkpoint", icon: GitBranch, ref: checkpointRef },
+			{ id: "notifications", icon: Bell, ref: notificationsRef },
+			{ id: "advanced", icon: Cog, ref: advancedRef },
+			{ id: "experimental", icon: FlaskConical, ref: experimentalRef },
+		],
+		[providersRef, autoApproveRef, browserRef, checkpointRef, notificationsRef, advancedRef, experimentalRef],
+	)
 
-	const handleAddCommand = () => {
-		const currentCommands = allowedCommands ?? []
-		if (commandInput && !currentCommands.includes(commandInput)) {
-			const newCommands = [...currentCommands, commandInput]
-			setCachedStateField("allowedCommands", newCommands)
-			setCommandInput("")
-			vscode.postMessage({ type: "allowedCommands", commands: newCommands })
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const sections = [
+			{ ref: providersRef, id: "providers" },
+			{ ref: autoApproveRef, id: "autoApprove" },
+			{ ref: browserRef, id: "browser" },
+			{ ref: checkpointRef, id: "checkpoint" },
+			{ ref: notificationsRef, id: "notifications" },
+			{ ref: advancedRef, id: "advanced" },
+			{ ref: experimentalRef, id: "experimental" },
+		]
+
+		for (const section of sections) {
+			const element = section.ref.current
+
+			if (element) {
+				const { top } = element.getBoundingClientRect()
+
+				if (top >= 0 && top <= 50) {
+					setActiveSection(section.id)
+					break
+				}
+			}
 		}
-	}
+	}, [])
 
-	const sliderLabelStyle = {
-		minWidth: "45px",
-		textAlign: "right" as const,
-		lineHeight: "20px",
-		paddingBottom: "2px",
-	}
+	const scrollToSection = (ref: React.RefObject<HTMLDivElement>) => ref.current?.scrollIntoView()
 
 	return (
-		<div
-			style={{
-				position: "fixed",
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				padding: "10px 0px 0px 20px",
-				display: "flex",
-				flexDirection: "column",
-				overflow: "hidden",
-			}}>
-			<AlertDialog open={isDiscardDialogShow} onOpenChange={setDiscardDialogShow}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Unsaved changes</AlertDialogTitle>
-						<AlertDialogDescription>
-							<span className={`codicon codicon-warning align-middle mr-1`} />
-							Do you want to discard changes and continue?
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogAction onClick={() => onConfirmDialogResult(true)}>Yes</AlertDialogAction>
-						<AlertDialogCancel onClick={() => onConfirmDialogResult(false)}>No</AlertDialogCancel>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-			<div
-				style={{
-					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					marginBottom: "17px",
-					paddingRight: 17,
-				}}>
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Settings</h3>
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						gap: "6px",
-					}}>
-					<Button
-						appearance={isSettingValid ? "primary" : "secondary"}
-						className={!isSettingValid ? "!border-vscode-errorForeground" : ""}
-						title={!isSettingValid ? errorMessage : isChangeDetected ? "Save changes" : "Nothing changed"}
-						onClick={handleSubmit}
-						disabled={!isChangeDetected || !isSettingValid}>
-						Save
-					</Button>
-					<VSCodeButton
-						appearance="secondary"
-						title="Discard unsaved changes and close settings panel"
-						onClick={() => checkUnsaveChanges(onDone)}>
-						Done
-					</VSCodeButton>
+		<div className="fixed inset-0 flex flex-col overflow-hidden">
+			<div className="px-5 py-2.5 border-b border-vscode-panel-border">
+				<div className="flex flex-col">
+					<div className="flex justify-between items-center">
+						<div className="flex items-center gap-2">
+							<h3 className="text-vscode-foreground m-0">Settings</h3>
+							<div className="hidden [@media(min-width:430px)]:flex items-center">
+								{sections.map(({ id, icon: Icon, ref }) => (
+									<Button
+										key={id}
+										variant="ghost"
+										size="icon"
+										className={activeSection === id ? "opacity-100" : "opacity-40"}
+										onClick={() => scrollToSection(ref)}>
+										<Icon />
+									</Button>
+								))}
+							</div>
+						</div>
+						<div className="flex gap-2">
+							<VSCodeButton
+								appearance={isSettingValid ? "primary" : "secondary"}
+								className={!isSettingValid ? "!border-vscode-errorForeground" : ""}
+								title={
+									!isSettingValid
+										? errorMessage
+										: isChangeDetected
+											? "Save changes"
+											: "Nothing changed"
+								}
+								onClick={handleSubmit}
+								disabled={!isChangeDetected || !isSettingValid}>
+								Save
+							</VSCodeButton>
+							<VSCodeButton
+								appearance="secondary"
+								title="Discard unsaved changes and close settings panel"
+								onClick={() => checkUnsaveChanges(onDone)}>
+								Done
+							</VSCodeButton>
+						</div>
+					</div>
 				</div>
 			</div>
+
 			<div
-				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
-				<div style={{ marginBottom: 40 }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Provider Settings</h3>
-					<div style={{ marginBottom: 15 }}>
+				className="flex flex-col flex-1 overflow-auto divide-y divide-vscode-panel-border"
+				onScroll={handleScroll}>
+				<div ref={providersRef}>
+					<SectionHeader>
+						<div className="flex items-center gap-2">
+							<Webhook className="w-4" />
+							<div>Providers</div>
+						</div>
+					</SectionHeader>
+
+					<Section>
 						<ApiConfigManager
 							currentApiConfigName={currentApiConfigName}
-							listApiConfigMeta={extensionState.listApiConfigMeta}
-							onSelectConfig={(configName: string) => {
-								checkUnsaveChanges(() => {
-									vscode.postMessage({
-										type: "loadApiConfiguration",
-										text: configName,
-									})
-								})
-							}}
-							onDeleteConfig={(configName: string) => {
-								vscode.postMessage({
-									type: "deleteApiConfiguration",
-									text: configName,
-								})
-							}}
+							listApiConfigMeta={listApiConfigMeta}
+							onSelectConfig={(configName: string) =>
+								checkUnsaveChanges(() =>
+									vscode.postMessage({ type: "loadApiConfiguration", text: configName }),
+								)
+							}
+							onDeleteConfig={(configName: string) =>
+								vscode.postMessage({ type: "deleteApiConfiguration", text: configName })
+							}
 							onRenameConfig={(oldName: string, newName: string) => {
 								vscode.postMessage({
 									type: "renameApiConfiguration",
@@ -293,571 +317,104 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 								})
 								prevApiConfigName.current = newName
 							}}
-							onUpsertConfig={(configName: string) => {
+							onUpsertConfig={(configName: string) =>
 								vscode.postMessage({
 									type: "upsertApiConfiguration",
 									text: configName,
 									apiConfiguration,
 								})
-							}}
+							}
 						/>
 						<ApiOptions
-							uriScheme={extensionState.uriScheme}
+							uriScheme={uriScheme}
 							apiConfiguration={apiConfiguration}
 							setApiConfigurationField={setApiConfigurationField}
 							errorMessage={errorMessage}
 							setErrorMessage={setErrorMessage}
 						/>
-					</div>
+					</Section>
 				</div>
 
-				<div style={{ marginBottom: 40 }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Auto-Approve Settings</h3>
-					<p style={{ fontSize: "12px", marginBottom: 15, color: "var(--vscode-descriptionForeground)" }}>
-						The following settings allow Roo to automatically perform operations without requiring approval.
-						Enable these settings only if you fully trust the AI and understand the associated security
-						risks.
-					</p>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={alwaysAllowReadOnly}
-							onChange={(e: any) => setCachedStateField("alwaysAllowReadOnly", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always approve read-only operations</span>
-						</VSCodeCheckbox>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							When enabled, Roo will automatically view directory contents and read files without
-							requiring you to click the Approve button.
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={alwaysAllowWrite}
-							onChange={(e: any) => setCachedStateField("alwaysAllowWrite", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always approve write operations</span>
-						</VSCodeCheckbox>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Automatically create and edit files without requiring approval
-						</p>
-						{alwaysAllowWrite && (
-							<div
-								style={{
-									marginTop: 10,
-									paddingLeft: 10,
-									borderLeft: "2px solid var(--vscode-button-background)",
-								}}>
-								<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
-									<input
-										type="range"
-										min="0"
-										max="5000"
-										step="100"
-										value={writeDelayMs}
-										onChange={(e) => setCachedStateField("writeDelayMs", parseInt(e.target.value))}
-										className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-									/>
-									<span style={{ minWidth: "45px", textAlign: "left" }}>{writeDelayMs}ms</span>
-								</div>
-								<p
-									style={{
-										fontSize: "12px",
-										marginTop: "5px",
-										color: "var(--vscode-descriptionForeground)",
-									}}>
-									Delay after writes to allow diagnostics to detect potential problems
-								</p>
-							</div>
-						)}
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={alwaysAllowBrowser}
-							onChange={(e: any) => setCachedStateField("alwaysAllowBrowser", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always approve browser actions</span>
-						</VSCodeCheckbox>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Automatically perform browser actions without requiring approval
-							<br />
-							Note: Only applies when the model supports computer use
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={alwaysApproveResubmit}
-							onChange={(e: any) => setCachedStateField("alwaysApproveResubmit", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always retry failed API requests</span>
-						</VSCodeCheckbox>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Automatically retry failed API requests when server returns an error response
-						</p>
-						{alwaysApproveResubmit && (
-							<div
-								style={{
-									marginTop: 10,
-									paddingLeft: 10,
-									borderLeft: "2px solid var(--vscode-button-background)",
-								}}>
-								<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
-									<input
-										type="range"
-										min="5"
-										max="100"
-										step="1"
-										value={requestDelaySeconds}
-										onChange={(e) =>
-											setCachedStateField("requestDelaySeconds", parseInt(e.target.value))
-										}
-										className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-									/>
-									<span style={{ minWidth: "45px", textAlign: "left" }}>{requestDelaySeconds}s</span>
-								</div>
-								<p
-									style={{
-										fontSize: "12px",
-										marginTop: "5px",
-										color: "var(--vscode-descriptionForeground)",
-									}}>
-									Delay before retrying the request
-								</p>
-							</div>
-						)}
-					</div>
-
-					<div style={{ marginBottom: 5 }}>
-						<VSCodeCheckbox
-							checked={alwaysAllowMcp}
-							onChange={(e: any) => setCachedStateField("alwaysAllowMcp", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always approve MCP tools</span>
-						</VSCodeCheckbox>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Enable auto-approval of individual MCP tools in the MCP Servers view (requires both this
-							setting and the tool's individual "Always allow" checkbox)
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={alwaysAllowModeSwitch}
-							onChange={(e: any) => setCachedStateField("alwaysAllowModeSwitch", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always approve mode switching & task creation</span>
-						</VSCodeCheckbox>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Automatically switch between different AI modes and create new tasks without requiring
-							approval
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={alwaysAllowExecute}
-							onChange={(e: any) => setCachedStateField("alwaysAllowExecute", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Always approve allowed execute operations</span>
-						</VSCodeCheckbox>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Automatically execute allowed terminal commands without requiring approval
-						</p>
-
-						{alwaysAllowExecute && (
-							<div
-								style={{
-									marginTop: 10,
-									paddingLeft: 10,
-									borderLeft: "2px solid var(--vscode-button-background)",
-								}}>
-								<span style={{ fontWeight: "500" }}>Allowed Auto-Execute Commands</span>
-								<p
-									style={{
-										fontSize: "12px",
-										marginTop: "5px",
-										color: "var(--vscode-descriptionForeground)",
-									}}>
-									Command prefixes that can be auto-executed when "Always approve execute operations"
-									is enabled. Add * to allow all commands (use with caution).
-								</p>
-
-								<div style={{ display: "flex", gap: "5px", marginTop: "10px" }}>
-									<VSCodeTextField
-										value={commandInput}
-										onInput={(e: any) => setCommandInput(e.target.value)}
-										onKeyDown={(e: any) => {
-											if (e.key === "Enter") {
-												e.preventDefault()
-												handleAddCommand()
-											}
-										}}
-										placeholder="Enter command prefix (e.g., 'git ')"
-										style={{ flexGrow: 1 }}
-									/>
-									<VSCodeButton onClick={handleAddCommand}>Add</VSCodeButton>
-								</div>
-
-								<div
-									style={{
-										marginTop: "10px",
-										display: "flex",
-										flexWrap: "wrap",
-										gap: "5px",
-									}}>
-									{(allowedCommands ?? []).map((cmd, index) => (
-										<div
-											key={index}
-											className="border border-vscode-input-border bg-primary text-primary-foreground flex items-center gap-1 rounded-xs px-1.5 p-0.5">
-											<span>{cmd}</span>
-											<VSCodeButton
-												appearance="icon"
-												className="text-primary-foreground"
-												onClick={() => {
-													const newCommands = (allowedCommands ?? []).filter(
-														(_, i) => i !== index,
-													)
-													setCachedStateField("allowedCommands", newCommands)
-													vscode.postMessage({
-														type: "allowedCommands",
-														commands: newCommands,
-													})
-												}}>
-												<span className="codicon codicon-close" />
-											</VSCodeButton>
-										</div>
-									))}
-								</div>
-							</div>
-						)}
-					</div>
+				<div ref={autoApproveRef}>
+					<AutoApproveSettings
+						alwaysAllowReadOnly={alwaysAllowReadOnly}
+						alwaysAllowWrite={alwaysAllowWrite}
+						writeDelayMs={writeDelayMs}
+						alwaysAllowBrowser={alwaysAllowBrowser}
+						alwaysApproveResubmit={alwaysApproveResubmit}
+						requestDelaySeconds={requestDelaySeconds}
+						alwaysAllowMcp={alwaysAllowMcp}
+						alwaysAllowModeSwitch={alwaysAllowModeSwitch}
+						alwaysAllowExecute={alwaysAllowExecute}
+						allowedCommands={allowedCommands}
+						setCachedStateField={setCachedStateField}
+					/>
 				</div>
 
-				<div style={{ marginBottom: 40 }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Browser Settings</h3>
-					<div style={{ marginBottom: 15 }}>
-						<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport size</label>
-						<div className="dropdown-container">
-							<Dropdown
-								value={browserViewportSize}
-								onChange={(value: unknown) => {
-									setCachedStateField("browserViewportSize", (value as DropdownOption).value)
-								}}
-								style={{ width: "100%" }}
-								options={[
-									{ value: "1280x800", label: "Large Desktop (1280x800)" },
-									{ value: "900x600", label: "Small Desktop (900x600)" },
-									{ value: "768x1024", label: "Tablet (768x1024)" },
-									{ value: "360x640", label: "Mobile (360x640)" },
-								]}
-							/>
-						</div>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							Select the viewport size for browser interactions. This affects how websites are displayed
-							and interacted with.
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
-							<span style={{ fontWeight: "500" }}>Screenshot quality</span>
-							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-								<input
-									type="range"
-									min="1"
-									max="100"
-									step="1"
-									value={screenshotQuality ?? 75}
-									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-									onChange={(e) => setCachedStateField("screenshotQuality", parseInt(e.target.value))}
-								/>
-								<span style={{ ...sliderLabelStyle }}>{screenshotQuality ?? 75}%</span>
-							</div>
-						</div>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							Adjust the WebP quality of browser screenshots. Higher values provide clearer screenshots
-							but increase token usage.
-						</p>
-					</div>
+				<div ref={browserRef}>
+					<BrowserSettings
+						browserToolEnabled={browserToolEnabled}
+						browserViewportSize={browserViewportSize}
+						screenshotQuality={screenshotQuality}
+						setCachedStateField={setCachedStateField}
+					/>
 				</div>
 
-				<div style={{ marginBottom: 40 }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Notification Settings</h3>
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={soundEnabled}
-							onChange={(e: any) => setCachedStateField("soundEnabled", e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Enable sound effects</span>
-						</VSCodeCheckbox>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							When enabled, Roo will play sound effects for notifications and events.
-						</p>
-					</div>
-					{soundEnabled && (
-						<div
-							style={{
-								marginLeft: 0,
-								paddingLeft: 10,
-								borderLeft: "2px solid var(--vscode-button-background)",
-							}}>
-							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-								<span style={{ fontWeight: "500", minWidth: "100px" }}>Volume</span>
-								<input
-									type="range"
-									min="0"
-									max="1"
-									step="0.01"
-									value={soundVolume ?? 0.5}
-									onChange={(e) => setCachedStateField("soundVolume", parseFloat(e.target.value))}
-									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-									aria-label="Volume"
-								/>
-								<span style={{ minWidth: "35px", textAlign: "left" }}>
-									{((soundVolume ?? 0.5) * 100).toFixed(0)}%
-								</span>
-							</div>
-						</div>
-					)}
+				<div ref={checkpointRef}>
+					<CheckpointSettings
+						enableCheckpoints={enableCheckpoints}
+						checkpointStorage={checkpointStorage}
+						setCachedStateField={setCachedStateField}
+					/>
 				</div>
 
-				<div style={{ marginBottom: 40 }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Advanced Settings</h3>
-					<div style={{ marginBottom: 15 }}>
-						<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
-							<span style={{ fontWeight: "500" }}>Rate limit</span>
-							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-								<input
-									type="range"
-									min="0"
-									max="60"
-									step="1"
-									value={rateLimitSeconds}
-									onChange={(e) => setCachedStateField("rateLimitSeconds", parseInt(e.target.value))}
-									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-								/>
-								<span style={{ ...sliderLabelStyle }}>{rateLimitSeconds}s</span>
-							</div>
-						</div>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Minimum time between API requests.
-						</p>
-					</div>
-					<div style={{ marginBottom: 15 }}>
-						<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
-							<span style={{ fontWeight: "500" }}>Terminal output limit</span>
-							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-								<input
-									type="range"
-									min="100"
-									max="5000"
-									step="100"
-									value={terminalOutputLineLimit ?? 500}
-									onChange={(e) =>
-										setCachedStateField("terminalOutputLineLimit", parseInt(e.target.value))
-									}
-									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-								/>
-								<span style={{ ...sliderLabelStyle }}>{terminalOutputLineLimit ?? 500}</span>
-							</div>
-						</div>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Maximum number of lines to include in terminal output when executing commands. When exceeded
-							lines will be removed from the middle, saving tokens.
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
-							<span style={{ fontWeight: "500" }}>Open tabs context limit</span>
-							<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-								<input
-									type="range"
-									min="0"
-									max="500"
-									step="1"
-									value={maxOpenTabsContext ?? 20}
-									onChange={(e) =>
-										setCachedStateField("maxOpenTabsContext", parseInt(e.target.value))
-									}
-									className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-								/>
-								<span style={{ ...sliderLabelStyle }}>{maxOpenTabsContext ?? 20}</span>
-							</div>
-						</div>
-						<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
-							Maximum number of VSCode open tabs to include in context. Higher values provide more context
-							but increase token usage.
-						</p>
-					</div>
-
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={enableCheckpoints}
-							onChange={(e: any) => {
-								setCachedStateField("enableCheckpoints", e.target.checked)
-							}}>
-							<span style={{ fontWeight: "500" }}>Enable automatic checkpoints</span>
-						</VSCodeCheckbox>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							When enabled, Roo will automatically create checkpoints during task execution, making it
-							easy to review changes or revert to earlier states.
-						</p>
-					</div>
+				<div ref={notificationsRef}>
+					<NotificationSettings
+						soundEnabled={soundEnabled}
+						soundVolume={soundVolume}
+						setCachedStateField={setCachedStateField}
+					/>
+				</div>
 
-					<div style={{ marginBottom: 15 }}>
-						<VSCodeCheckbox
-							checked={diffEnabled}
-							onChange={(e: any) => {
-								setCachedStateField("diffEnabled", e.target.checked)
-								if (!e.target.checked) {
-									// Reset experimental strategy when diffs are disabled
-									setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
-								}
-							}}>
-							<span style={{ fontWeight: "500" }}>Enable editing through diffs</span>
-						</VSCodeCheckbox>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							When enabled, Roo will be able to edit files more quickly and will automatically reject
-							truncated full-file writes. Works best with the latest Claude 3.7 Sonnet model.
-						</p>
-
-						{diffEnabled && (
-							<div style={{ marginTop: 10 }}>
-								<div
-									style={{
-										display: "flex",
-										flexDirection: "column",
-										gap: "5px",
-										marginTop: "10px",
-										marginBottom: "10px",
-										paddingLeft: "10px",
-										borderLeft: "2px solid var(--vscode-button-background)",
-									}}>
-									<span style={{ fontWeight: "500" }}>Match precision</span>
-									<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-										<input
-											type="range"
-											min="0.8"
-											max="1"
-											step="0.005"
-											value={fuzzyMatchThreshold ?? 1.0}
-											onChange={(e) => {
-												setCachedStateField("fuzzyMatchThreshold", parseFloat(e.target.value))
-											}}
-											className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
-										/>
-										<span style={{ ...sliderLabelStyle }}>
-											{Math.round((fuzzyMatchThreshold || 1) * 100)}%
-										</span>
-									</div>
-									<p
-										style={{
-											fontSize: "12px",
-											marginTop: "5px",
-											color: "var(--vscode-descriptionForeground)",
-										}}>
-										This slider controls how precisely code sections must match when applying diffs.
-										Lower values allow more flexible matching but increase the risk of incorrect
-										replacements. Use values below 100% with extreme caution.
-									</p>
-									<ExperimentalFeature
-										key={EXPERIMENT_IDS.DIFF_STRATEGY}
-										{...experimentConfigsMap.DIFF_STRATEGY}
-										enabled={experiments[EXPERIMENT_IDS.DIFF_STRATEGY] ?? false}
-										onChange={(enabled) =>
-											setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, enabled)
-										}
-									/>
-								</div>
-							</div>
-						)}
-
-						{Object.entries(experimentConfigsMap)
-							.filter((config) => config[0] !== "DIFF_STRATEGY")
-							.map((config) => (
-								<ExperimentalFeature
-									key={config[0]}
-									{...config[1]}
-									enabled={
-										experiments[EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS]] ?? false
-									}
-									onChange={(enabled) =>
-										setExperimentEnabled(
-											EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS],
-											enabled,
-										)
-									}
-								/>
-							))}
-					</div>
+				<div ref={advancedRef}>
+					<AdvancedSettings
+						rateLimitSeconds={rateLimitSeconds}
+						terminalOutputLineLimit={terminalOutputLineLimit}
+						maxOpenTabsContext={maxOpenTabsContext}
+						diffEnabled={diffEnabled}
+						fuzzyMatchThreshold={fuzzyMatchThreshold}
+						setCachedStateField={setCachedStateField}
+						setExperimentEnabled={setExperimentEnabled}
+						experiments={experiments}
+					/>
 				</div>
 
-				<div
-					style={{
-						textAlign: "center",
-						color: "var(--vscode-descriptionForeground)",
-						fontSize: "12px",
-						lineHeight: "1.2",
-						marginTop: "auto",
-						padding: "10px 8px 15px 0px",
-					}}>
-					<p style={{ wordWrap: "break-word", margin: 0, padding: 0 }}>
-						If you have any questions or feedback, feel free to open an issue at{" "}
-						<VSCodeLink href="https://github.com/RooVetGit/Roo-Code" style={{ display: "inline" }}>
-							github.com/RooVetGit/Roo-Code
-						</VSCodeLink>{" "}
-						or join{" "}
-						<VSCodeLink href="https://www.reddit.com/r/RooCode/" style={{ display: "inline" }}>
-							reddit.com/r/RooCode
-						</VSCodeLink>
-					</p>
-					<p style={{ fontStyle: "italic", margin: "10px 0 0 0", padding: 0, marginBottom: 100 }}>
-						v{extensionState.version}
-					</p>
-
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: "5px",
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						This will reset all global state and secret storage in the extension.
-					</p>
-
-					<VSCodeButton
-						onClick={handleResetState}
-						appearance="secondary"
-						style={{ marginTop: "5px", width: "auto" }}>
-						Reset State
-					</VSCodeButton>
+				<div ref={experimentalRef}>
+					<ExperimentalSettings
+						setCachedStateField={setCachedStateField}
+						setExperimentEnabled={setExperimentEnabled}
+						experiments={experiments}
+					/>
 				</div>
+
+				<SettingsFooter version={version} />
 			</div>
+
+			<AlertDialog open={isDiscardDialogShow} onOpenChange={setDiscardDialogShow}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Unsaved changes</AlertDialogTitle>
+						<AlertDialogDescription>
+							<span className={`codicon codicon-warning align-middle mr-1`} />
+							Do you want to discard changes and continue?
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogAction onClick={() => onConfirmDialogResult(true)}>Yes</AlertDialogAction>
+						<AlertDialogCancel onClick={() => onConfirmDialogResult(false)}>No</AlertDialogCancel>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	)
 })

webview-ui/src/components/settings/TemperatureControl.tsx

@@ -32,10 +32,10 @@ export const TemperatureControl = ({ value, onChange, maxValue = 1 }: Temperatur
 						setInputValue(value ?? 0) // Use the value from apiConfiguration, if set
 					}
 				}}>
-				<span style={{ fontWeight: "500" }}>Use custom temperature</span>
+				<span className="font-medium">Use custom temperature</span>
 			</VSCodeCheckbox>
 
-			<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
+			<p className="text-vscode-descriptionForeground text-sm mt-0">
 				Controls randomness in the model's responses.
 			</p>
 
@@ -59,7 +59,7 @@ export const TemperatureControl = ({ value, onChange, maxValue = 1 }: Temperatur
 						/>
 						<span>{inputValue}</span>
 					</div>
-					<p style={{ fontSize: "12px", marginTop: "8px", color: "var(--vscode-descriptionForeground)" }}>
+					<p className="text-vscode-descriptionForeground text-sm mt-1">
 						Higher values make output more random, lower values make it more deterministic.
 					</p>
 				</div>

webview-ui/src/components/settings/__tests__/SettingsView.test.tsx

@@ -1,3 +1,5 @@
+// npx jest src/components/settings/__tests__/SettingsView.test.ts
+
 import { render, screen, fireEvent } from "@testing-library/react"
 import SettingsView from "../SettingsView"
 import { ExtensionStateContextProvider } from "../../../context/ExtensionStateContext"
@@ -10,6 +12,22 @@ jest.mock("../../../utils/vscode", () => ({
 	},
 }))
 
+// Mock all lucide-react icons with a proxy to handle any icon requested
+jest.mock("lucide-react", () => {
+	return new Proxy(
+		{},
+		{
+			get: function (obj, prop) {
+				// Return a component factory for any icon that's requested
+				if (prop === "__esModule") {
+					return true
+				}
+				return () => <div data-testid={`${String(prop)}-icon`}>{String(prop)}</div>
+			},
+		},
+	)
+})
+
 // Mock ApiConfigManager component
 jest.mock("../ApiConfigManager", () => ({
 	__esModule: true,

webview-ui/src/components/settings/styles.ts

@@ -1,7 +1,5 @@
 import styled from "styled-components"
 
-export const DROPDOWN_Z_INDEX = 1_000
-
 export const DropdownWrapper = styled.div`
 	position: relative;
 	width: 100%;
@@ -78,3 +76,10 @@ export const StyledMarkdown = styled.div`
 		}
 	}
 `
+
+export const sliderLabelStyle = {
+	minWidth: "45px",
+	textAlign: "right" as const,
+	lineHeight: "20px",
+	paddingBottom: "2px",
+}

webview-ui/src/components/settings/types.ts

@@ -0,0 +1,10 @@
+import { ExperimentId } from "../../../../src/shared/experiments"
+
+import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
+
+export type SetCachedStateField<K extends keyof ExtensionStateContextType> = (
+	field: K,
+	value: ExtensionStateContextType[K],
+) => void
+
+export type SetExperimentEnabled = (id: ExperimentId, enabled: boolean) => void

webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx

@@ -0,0 +1,247 @@
+import React, { ReactNode } from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { SelectDropdown, DropdownOptionType } from "../select-dropdown"
+
+// Mock window.postMessage
+const postMessageMock = jest.fn()
+Object.defineProperty(window, "postMessage", {
+	writable: true,
+	value: postMessageMock,
+})
+
+// Mock the Radix UI DropdownMenu component and its children
+jest.mock("../dropdown-menu", () => {
+	return {
+		DropdownMenu: ({ children }: { children: ReactNode }) => <div data-testid="dropdown-root">{children}</div>,
+
+		DropdownMenuTrigger: ({
+			children,
+			disabled,
+			...props
+		}: {
+			children: ReactNode
+			disabled?: boolean
+			[key: string]: any
+		}) => (
+			<button data-testid="dropdown-trigger" disabled={disabled} {...props}>
+				{children}
+			</button>
+		),
+
+		DropdownMenuContent: ({ children }: { children: ReactNode }) => (
+			<div data-testid="dropdown-content">{children}</div>
+		),
+
+		DropdownMenuItem: ({
+			children,
+			onClick,
+			disabled,
+		}: {
+			children: ReactNode
+			onClick?: () => void
+			disabled?: boolean
+		}) => (
+			<div data-testid="dropdown-item" onClick={onClick} aria-disabled={disabled}>
+				{children}
+			</div>
+		),
+
+		DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
+	}
+})
+
+describe("SelectDropdown", () => {
+	const options = [
+		{ value: "option1", label: "Option 1" },
+		{ value: "option2", label: "Option 2" },
+		{ value: "option3", label: "Option 3" },
+		{ value: "sep-1", label: "────", disabled: true },
+		{ value: "action", label: "Action Item" },
+	]
+
+	const onChangeMock = jest.fn()
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+	})
+
+	it("renders correctly with default props", () => {
+		render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
+
+		// Check that the selected option is displayed in the trigger, not in a menu item
+		const trigger = screen.getByTestId("dropdown-trigger")
+		expect(trigger).toHaveTextContent("Option 1")
+	})
+
+	it("handles disabled state correctly", () => {
+		render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} disabled={true} />)
+
+		const trigger = screen.getByTestId("dropdown-trigger")
+		expect(trigger).toHaveAttribute("disabled")
+	})
+
+	it("renders with width: 100% for proper sizing", () => {
+		render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
+
+		const trigger = screen.getByTestId("dropdown-trigger")
+		expect(trigger).toHaveStyle("width: 100%")
+	})
+
+	it("passes the selected value to the trigger", () => {
+		const { rerender } = render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
+
+		// Check initial render using testId to be specific
+		const trigger = screen.getByTestId("dropdown-trigger")
+		expect(trigger).toHaveTextContent("Option 1")
+
+		// Rerender with a different value
+		rerender(<SelectDropdown value="option3" options={options} onChange={onChangeMock} />)
+
+		// Check updated render
+		expect(trigger).toHaveTextContent("Option 3")
+	})
+
+	it("applies custom className to trigger when provided", () => {
+		render(
+			<SelectDropdown
+				value="option1"
+				options={options}
+				onChange={onChangeMock}
+				triggerClassName="custom-trigger-class"
+			/>,
+		)
+
+		const trigger = screen.getByTestId("dropdown-trigger")
+		expect(trigger.classList.toString()).toContain("custom-trigger-class")
+	})
+
+	it("ensures open state is controlled via props", () => {
+		// Test that the component accepts and uses the open state controlled prop
+		render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
+
+		// The component should render the dropdown root with correct props
+		const dropdown = screen.getByTestId("dropdown-root")
+		expect(dropdown).toBeInTheDocument()
+
+		// Verify trigger and content are rendered
+		const trigger = screen.getByTestId("dropdown-trigger")
+		const content = screen.getByTestId("dropdown-content")
+		expect(trigger).toBeInTheDocument()
+		expect(content).toBeInTheDocument()
+	})
+
+	// Tests for the new functionality
+	describe("Option types", () => {
+		it("renders separator options correctly", () => {
+			const optionsWithTypedSeparator = [
+				{ value: "option1", label: "Option 1" },
+				{ value: "sep-1", label: "Separator", type: DropdownOptionType.SEPARATOR },
+				{ value: "option2", label: "Option 2" },
+			]
+
+			render(<SelectDropdown value="option1" options={optionsWithTypedSeparator} onChange={onChangeMock} />)
+
+			// Check for separator
+			const separators = screen.getAllByTestId("dropdown-separator")
+			expect(separators.length).toBe(1)
+		})
+
+		it("renders shortcut options correctly", () => {
+			const shortcutText = "Ctrl+K"
+			const optionsWithShortcut = [
+				{ value: "shortcut", label: shortcutText, type: DropdownOptionType.SHORTCUT },
+				{ value: "option1", label: "Option 1" },
+			]
+
+			render(
+				<SelectDropdown
+					value="option1"
+					options={optionsWithShortcut}
+					onChange={onChangeMock}
+					shortcutText={shortcutText}
+				/>,
+			)
+
+			// The shortcut text should be rendered as a div, not a dropdown item
+			expect(screen.queryByText(shortcutText)).toBeInTheDocument()
+			const dropdownItems = screen.getAllByTestId("dropdown-item")
+			expect(dropdownItems.length).toBe(1) // Only one regular option
+		})
+
+		it("handles action options correctly", () => {
+			const optionsWithAction = [
+				{ value: "option1", label: "Option 1" },
+				{ value: "settingsButtonClicked", label: "Settings", type: DropdownOptionType.ACTION },
+			]
+
+			render(<SelectDropdown value="option1" options={optionsWithAction} onChange={onChangeMock} />)
+
+			// Get all dropdown items
+			const dropdownItems = screen.getAllByTestId("dropdown-item")
+
+			// Click the action item
+			fireEvent.click(dropdownItems[1])
+
+			// Check that postMessage was called with the correct action
+			expect(postMessageMock).toHaveBeenCalledWith({
+				type: "action",
+				action: "settingsButtonClicked",
+			})
+
+			// The onChange callback should not be called for action items
+			expect(onChangeMock).not.toHaveBeenCalled()
+		})
+
+		it("only treats options with explicit ACTION type as actions", () => {
+			const optionsForTest = [
+				{ value: "option1", label: "Option 1" },
+				// This should be treated as a regular option despite the -action suffix
+				{ value: "settings-action", label: "Regular option with action suffix" },
+				// This should be treated as an action
+				{ value: "settingsButtonClicked", label: "Settings", type: DropdownOptionType.ACTION },
+			]
+
+			render(<SelectDropdown value="option1" options={optionsForTest} onChange={onChangeMock} />)
+
+			// Get all dropdown items
+			const dropdownItems = screen.getAllByTestId("dropdown-item")
+
+			// Click the second option (with action suffix but no ACTION type)
+			fireEvent.click(dropdownItems[1])
+
+			// Should trigger onChange, not postMessage
+			expect(onChangeMock).toHaveBeenCalledWith("settings-action")
+			expect(postMessageMock).not.toHaveBeenCalled()
+
+			// Reset mocks
+			onChangeMock.mockReset()
+			postMessageMock.mockReset()
+
+			// Click the third option (ACTION type)
+			fireEvent.click(dropdownItems[2])
+
+			// Should trigger postMessage with "settingsButtonClicked", not onChange
+			expect(postMessageMock).toHaveBeenCalledWith({
+				type: "action",
+				action: "settingsButtonClicked",
+			})
+			expect(onChangeMock).not.toHaveBeenCalled()
+		})
+
+		it("calls onChange for regular menu items", () => {
+			render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
+
+			// Get all dropdown items
+			const dropdownItems = screen.getAllByTestId("dropdown-item")
+
+			// Click the second option (index 1)
+			fireEvent.click(dropdownItems[1])
+
+			// Check that onChange was called with the correct value
+			expect(onChangeMock).toHaveBeenCalledWith("option2")
+
+			// postMessage should not be called for regular items
+			expect(postMessageMock).not.toHaveBeenCalled()
+		})
+	})
+})

webview-ui/src/components/ui/index.ts

@@ -13,3 +13,4 @@ export * from "./separator"
 export * from "./slider"
 export * from "./textarea"
 export * from "./tooltip"
+export * from "./select-dropdown"

webview-ui/src/components/ui/select-dropdown.tsx

@@ -0,0 +1,176 @@
+import * as React from "react"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+	DropdownMenuSeparator,
+} from "./dropdown-menu"
+import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+
+// Constants for option types
+export enum DropdownOptionType {
+	ITEM = "item",
+	SEPARATOR = "separator",
+	SHORTCUT = "shortcut",
+	ACTION = "action",
+}
+export interface DropdownOption {
+	value: string
+	label: string
+	disabled?: boolean
+	type?: DropdownOptionType // Optional type to specify special behaviors
+}
+
+export interface SelectDropdownProps {
+	value: string
+	options: DropdownOption[]
+	onChange: (value: string) => void
+	disabled?: boolean
+	title?: string
+	className?: string
+	triggerClassName?: string
+	contentClassName?: string
+	sideOffset?: number
+	align?: "start" | "center" | "end"
+	shouldShowCaret?: boolean
+	placeholder?: string
+	shortcutText?: string
+}
+
+export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownMenuTrigger>, SelectDropdownProps>(
+	(
+		{
+			value,
+			options,
+			onChange,
+			disabled = false,
+			title = "",
+			className = "",
+			triggerClassName = "",
+			contentClassName = "",
+			sideOffset = 4,
+			align = "start",
+			shouldShowCaret = true,
+			placeholder = "",
+			shortcutText = "",
+		},
+		ref,
+	) => {
+		// Track open state
+		const [open, setOpen] = React.useState(false)
+		const [portalContainer, setPortalContainer] = useState<HTMLElement>()
+
+		useEffect(() => {
+			// The dropdown menu uses a portal from @shadcn/ui which by default renders
+			// at the document root. This causes the menu to remain visible even when
+			// the parent ChatView component is hidden (during settings/history view).
+			// By moving the portal inside ChatView, the menu will properly hide when
+			// its parent is hidden.
+			setPortalContainer(document.getElementById("chat-view-portal") || undefined)
+		}, [])
+
+		// Find the selected option label
+		const selectedOption = options.find((option) => option.value === value)
+		const displayText = selectedOption?.label || placeholder || ""
+
+		// Handle menu item click
+		const handleSelect = (option: DropdownOption) => {
+			// Check if this is an action option by its explicit type
+			if (option.type === DropdownOptionType.ACTION) {
+				window.postMessage({
+					type: "action",
+					action: option.value,
+				})
+				setOpen(false)
+				return
+			}
+			onChange(option.value)
+			setOpen(false)
+		}
+
+		return (
+			<DropdownMenu open={open} onOpenChange={setOpen}>
+				<DropdownMenuTrigger
+					ref={ref}
+					disabled={disabled}
+					title={title}
+					className={cn(
+						"inline-flex items-center gap-1 relative whitespace-nowrap rounded pr-1.5 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-vscode-focusBorder",
+						"bg-transparent border-none text-vscode-foreground w-auto",
+						disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 cursor-pointer hover:opacity-100",
+						triggerClassName,
+					)}
+					style={{
+						width: "100%", // Take full width of parent
+						minWidth: "0",
+						maxWidth: "100%",
+					}}>
+					{shouldShowCaret && (
+						<div className="pointer-events-none opacity-80 flex-shrink-0">
+							<svg
+								fill="none"
+								height="10"
+								stroke="currentColor"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth="2"
+								viewBox="0 0 24 24"
+								width="10">
+								<polyline points="18 15 12 9 6 15" />
+							</svg>
+						</div>
+					)}
+					<span className="truncate">{displayText}</span>
+				</DropdownMenuTrigger>
+
+				<DropdownMenuContent
+					align={align}
+					sideOffset={sideOffset}
+					onEscapeKeyDown={() => setOpen(false)}
+					onInteractOutside={() => setOpen(false)}
+					container={portalContainer}
+					className={cn(
+						"bg-vscode-dropdown-background text-vscode-dropdown-foreground border border-vscode-dropdown-border z-50",
+						contentClassName,
+					)}>
+					{options.map((option, index) => {
+						// Handle separator type
+						if (option.type === DropdownOptionType.SEPARATOR) {
+							return <DropdownMenuSeparator key={`sep-${index}`} />
+						}
+
+						// Handle shortcut text type (disabled label for keyboard shortcuts)
+						if (
+							option.type === DropdownOptionType.SHORTCUT ||
+							(option.disabled && shortcutText && option.label.includes(shortcutText))
+						) {
+							return (
+								<div key={`label-${index}`} className="px-2 py-1.5 text-xs opacity-50">
+									{option.label}
+								</div>
+							)
+						}
+
+						// Regular menu items
+						return (
+							<DropdownMenuItem
+								key={`item-${option.value}`}
+								disabled={option.disabled}
+								className={cn(
+									"cursor-pointer text-xs focus:bg-vscode-list-hoverBackground focus:text-vscode-list-hoverForeground",
+									option.value === value && "bg-vscode-list-focusBackground",
+								)}
+								onClick={() => handleSelect(option)}>
+								{option.label}
+							</DropdownMenuItem>
+						)
+					})}
+				</DropdownMenuContent>
+			</DropdownMenu>
+		)
+	},
+)
+
+SelectDropdown.displayName = "SelectDropdown"

webview-ui/src/context/ExtensionStateContext.tsx

@@ -27,6 +27,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setAlwaysAllowBrowser: (value: boolean) => void
 	setAlwaysAllowMcp: (value: boolean) => void
 	setAlwaysAllowModeSwitch: (value: boolean) => void
+	setBrowserToolEnabled: (value: boolean) => void
 	setShowAnnouncement: (value: boolean) => void
 	setAllowedCommands: (value: string[]) => void
 	setSoundEnabled: (value: boolean) => void
@@ -69,6 +70,32 @@ export interface ExtensionStateContextType extends ExtensionState {
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
 
+export const mergeExtensionState = (prevState: ExtensionState, newState: ExtensionState) => {
+	const {
+		apiConfiguration: prevApiConfiguration,
+		customModePrompts: prevCustomModePrompts,
+		customSupportPrompts: prevCustomSupportPrompts,
+		experiments: prevExperiments,
+		...prevRest
+	} = prevState
+
+	const {
+		apiConfiguration: newApiConfiguration,
+		customModePrompts: newCustomModePrompts,
+		customSupportPrompts: newCustomSupportPrompts,
+		experiments: newExperiments,
+		...newRest
+	} = newState
+
+	const apiConfiguration = { ...prevApiConfiguration, ...newApiConfiguration }
+	const customModePrompts = { ...prevCustomModePrompts, ...newCustomModePrompts }
+	const customSupportPrompts = { ...prevCustomSupportPrompts, ...newCustomSupportPrompts }
+	const experiments = { ...prevExperiments, ...newExperiments }
+	const rest = { ...prevRest, ...newRest }
+
+	return { ...rest, apiConfiguration, customModePrompts, customSupportPrompts, experiments }
+}
+
 export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 	const [state, setState] = useState<ExtensionState>({
 		version: "",
@@ -80,6 +107,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		soundVolume: 0.5,
 		diffEnabled: false,
 		enableCheckpoints: true,
+		checkpointStorage: "task",
 		fuzzyMatchThreshold: 1.0,
 		preferredLanguage: "English",
 		writeDelayMs: 1000,
@@ -102,6 +130,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		customModes: [],
 		maxOpenTabsContext: 20,
 		cwd: "",
+		browserToolEnabled: true,
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -123,13 +152,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 			switch (message.type) {
 				case "state": {
 					const newState = message.state!
-					setState((prevState) => ({
-						...prevState,
-						...newState,
-					}))
-					const config = newState.apiConfiguration
-					const hasKey = checkExistKey(config)
-					setShowWelcome(!hasKey)
+					setState((prevState) => mergeExtensionState(prevState, newState))
+					setShowWelcome(!checkExistKey(newState.apiConfiguration))
 					setDidHydrateState(true)
 					break
 				}
@@ -244,6 +268,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setAutoApprovalEnabled: (value) => setState((prevState) => ({ ...prevState, autoApprovalEnabled: value })),
 		setCustomModes: (value) => setState((prevState) => ({ ...prevState, customModes: value })),
 		setMaxOpenTabsContext: (value) => setState((prevState) => ({ ...prevState, maxOpenTabsContext: value })),
+		setBrowserToolEnabled: (value) => setState((prevState) => ({ ...prevState, browserToolEnabled: value })),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>

webview-ui/src/context/__tests__/ExtensionStateContext.test.tsx

@@ -1,6 +1,11 @@
-import React from "react"
+// npx jest webview-ui/src/context/__tests__/ExtensionStateContext.test.tsx
+
 import { render, screen, act } from "@testing-library/react"
-import { ExtensionStateContextProvider, useExtensionState } from "../ExtensionStateContext"
+
+import { ExtensionState } from "../../../../src/shared/ExtensionMessage"
+import { ExtensionStateContextProvider, useExtensionState, mergeExtensionState } from "../ExtensionStateContext"
+import { ExperimentId } from "../../../../src/shared/experiments"
+import { ApiConfiguration } from "../../../../src/shared/api"
 
 // Test component that consumes the context
 const TestComponent = () => {
@@ -63,3 +68,44 @@ describe("ExtensionStateContext", () => {
 		consoleSpy.mockRestore()
 	})
 })
+
+describe("mergeExtensionState", () => {
+	it("should correctly merge extension states", () => {
+		const baseState: ExtensionState = {
+			version: "",
+			mcpEnabled: false,
+			enableMcpServerCreation: false,
+			clineMessages: [],
+			taskHistory: [],
+			shouldShowAnnouncement: false,
+			enableCheckpoints: true,
+			checkpointStorage: "task",
+			preferredLanguage: "English",
+			writeDelayMs: 1000,
+			requestDelaySeconds: 5,
+			rateLimitSeconds: 0,
+			mode: "default",
+			experiments: {} as Record<ExperimentId, boolean>,
+			customModes: [],
+			maxOpenTabsContext: 20,
+			apiConfiguration: { providerId: "openrouter" } as ApiConfiguration,
+		}
+
+		const prevState: ExtensionState = {
+			...baseState,
+			apiConfiguration: { modelMaxTokens: 1234, modelMaxThinkingTokens: 123 },
+		}
+		const newState: ExtensionState = {
+			...baseState,
+			apiConfiguration: { modelMaxThinkingTokens: 456, modelTemperature: 0.3 },
+		}
+
+		const result = mergeExtensionState(prevState, newState)
+
+		expect(result.apiConfiguration).toEqual({
+			modelMaxTokens: 1234,
+			modelMaxThinkingTokens: 456,
+			modelTemperature: 0.3,
+		})
+	})
+})

webview-ui/src/index.css

@@ -96,6 +96,10 @@
 	--color-vscode-list-hoverForeground: var(--vscode-list-hoverForeground);
 	--color-vscode-list-hoverBackground: var(--vscode-list-hoverBackground);
 	--color-vscode-list-focusBackground: var(--vscode-list-focusBackground);
+
+	--color-vscode-toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
+
+	--color-vscode-panel-border: var(--vscode-panel-border);
 }
 
 @layer base {

webview-ui/src/utils/useDebounceEffect.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react"
+
+type VoidFn = () => void
+
+/**
+ * Runs `effectRef.current()` after `delay` ms whenever any of the `deps` change,
+ * but cancels/re-schedules if they change again before the delay.
+ */
+export function useDebounceEffect(effect: VoidFn, delay: number, deps: any[]) {
+	const callbackRef = useRef<VoidFn>(effect)
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+	// Keep callbackRef current
+	useEffect(() => {
+		callbackRef.current = effect
+	}, [effect])
+
+	useEffect(() => {
+		// Clear any queued call
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+		}
+
+		// Schedule a new call
+		timeoutRef.current = setTimeout(() => {
+			// always call the *latest* version of effect
+			callbackRef.current()
+		}, delay)
+
+		// Cleanup on unmount or next effect
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+
+		// We want to re‐schedule if any item in `deps` changed,
+		// or if `delay` changed.
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [delay, ...deps])
+}