Add warn setting to codespell workflow (#3175)

* Fix unit test set-up

* run tests on CI

* update failing tests

* Update node

Update the coverage job node version

.changeset/blue-cars-drive.md

@@ -1,5 +0,0 @@
----
-"claude-dev": minor
----
-
-Make sure protos run before dev build scripts

.changeset/bright-zebras-sip.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Add markdown copy to chat

.changeset/clean-chicken-smash.md

@@ -1,5 +0,0 @@
----
-"claude-dev": minor
----
-
-Move updateMcpTimeout message to protobus

.changeset/custom-timeout-setting.md

@@ -0,0 +1,5 @@
+---
+"cline": minor
+---
+
+Add support for custom API request timeout. Previously, timeouts were hardcoded to 30 seconds for providers like Ollama or 15 seconds for OpenRouter and Cline. Now users can set a custom timeout value in milliseconds through the settings interface.

.changeset/cyan-pears-battle.md

@@ -1,5 +0,0 @@
----
-"claude-dev": patch
----
-
-Update Reset Button color to Red

.changeset/few-ravens-visit.md

@@ -1,5 +0,0 @@
----
-"claude-dev": minor
----
-
-enabling mcp marketplace download counts

.changeset/five-jars-look.md

@@ -2,4 +2,4 @@
 "claude-dev": minor
 ---
 
-add smol command
+add newrule slash command

.changeset/kind-pears-invent.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Add dependsOn to more blocks in the tasks.json

.changeset/loud-spies-deny.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+add truncation notice when truncating manually

.changeset/mean-crabs-juggle.md

@@ -1,5 +0,0 @@
----
-"claude-dev": minor
----
-
-add prompt caching to gemini models in cline / openrouter providers

.changeset/serious-baboons-train.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+protobus migration for openImage

.changeset/sour-apes-switch.md

@@ -1,5 +0,0 @@
----
-"claude-dev": patch
----
-
-Add tooltips and improve contrast

.changeset/thirty-feet-rule.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Adding UI to show openrouter balance next to provider

.changeset/twenty-comics-enjoy.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+fix cost calculation

.github/workflows/codespell.yml

@@ -23,3 +23,5 @@ jobs:
               uses: codespell-project/codespell-problem-matcher@v1
             - name: Codespell
               uses: codespell-project/actions-codespell@v2
+              with:
+                  only_warn: 1

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
             - name: Setup Node.js environment
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.15.1
+                  node-version: 22
 
             # Setup Python for coverage script
             - name: Setup Python
@@ -73,9 +73,8 @@ jobs:
             - name: Build Extension
               run: npm run compile
 
-            # Disabling due to compatability with test framework and ESM modules
-            # - name: Unit Tests
-            #   run: npm run test:unit
+            - name: Unit Tests
+              run: npm run test:unit
 
             # Run extension tests with coverage
             - name: Extension Tests with Coverage
@@ -132,7 +131,7 @@ jobs:
             - name: Setup Node.js environment
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.15.1
+                  node-version: 22
 
             # Cache root dependencies - only reuse if package-lock.json exactly matches
             - name: Cache root dependencies

.mocharc.json

@@ -1,6 +1,6 @@
 {
 	"extension": ["ts"],
 	"spec": "src/**/__tests__/*.ts",
-	"require": ["ts-node/register", "source-map-support/register"],
+	"require": ["ts-node/register", "source-map-support/register", "./src/test/requires.ts"],
 	"recursive": true
 }

.vscode/tasks.json

@@ -22,7 +22,7 @@
 			"label": "watch",
 			"dependsOn": ["npm: protos", "npm: build:webview", "npm: dev:webview", "npm: watch:tsc", "npm: watch:esbuild"],
 			"presentation": {
-				"reveal": "never"
+				"reveal": "always"
 			},
 			"group": {
 				"kind": "build",
@@ -39,7 +39,7 @@
 				"npm: watch:esbuild:test"
 			],
 			"presentation": {
-				"reveal": "never"
+				"reveal": "always"
 			},
 			"group": "build"
 		},
@@ -53,8 +53,7 @@
 			"dependsOn": ["npm: protos"],
 			"presentation": {
 				"group": "watch",
-				"reveal": "never",
-				"close": true
+				"reveal": "always"
 			},
 			"options": {
 				"env": {
@@ -69,10 +68,10 @@
 			"problemMatcher": [],
 			"isBackground": true,
 			"label": "npm: build:webview:test",
+			"dependsOn": ["npm: protos"],
 			"presentation": {
 				"group": "watch",
-				"reveal": "never",
-				"close": true
+				"reveal": "always"
 			},
 			"options": {
 				"env": {
@@ -104,10 +103,10 @@
 			],
 			"isBackground": true,
 			"label": "npm: dev:webview",
+			"dependsOn": ["npm: protos"],
 			"presentation": {
 				"group": "watch",
-				"reveal": "never",
-				"close": true
+				"reveal": "always"
 			},
 			"options": {
 				"env": {
@@ -125,8 +124,7 @@
 			"dependsOn": ["npm: protos"],
 			"presentation": {
 				"group": "watch",
-				"reveal": "never",
-				"close": true
+				"reveal": "always"
 			},
 			"options": {
 				"env": {
@@ -144,8 +142,7 @@
 			"dependsOn": ["npm: protos"],
 			"presentation": {
 				"group": "watch",
-				"reveal": "never",
-				"close": true
+				"reveal": "always"
 			},
 			"options": {
 				"env": {
@@ -161,10 +158,10 @@
 			"problemMatcher": "$tsc-watch",
 			"isBackground": true,
 			"label": "npm: watch:tsc",
+			"dependsOn": ["npm: protos"],
 			"presentation": {
 				"group": "watch",
-				"reveal": "never",
-				"close": true
+				"reveal": "always"
 			}
 		},
 		{
@@ -172,8 +169,9 @@
 			"script": "watch-tests",
 			"problemMatcher": "$tsc-watch",
 			"isBackground": true,
+			"dependsOn": ["npm: protos"],
 			"presentation": {
-				"reveal": "never",
+				"reveal": "always",
 				"group": "watchers"
 			},
 			"group": "build"

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.13.3]
+
+-   Add download counts to MCP marketplace items
+-   Add `/compact` command
+-   Add prompt caching to gemini models in cline / openrouter providers
+-   Add tooltips to bottom row menu
+
 ## [3.13.2]
 
 -   Add Gemini 2.5 Flash model to Vertex and Gemini Providers (Thanks monotykamary!)
@@ -19,7 +26,6 @@
 -   Fix Mermaid syntax error in documentation (Thanks tuki0918!)
 -   Remove supportsComputerUse restriction and support browser use through any model that supports images (Thanks arafatkatze!)
 
-
 ## [3.13.1]
 
 -   Fix bug where task cancellation during thinking stream would result in error state

package.json

@@ -2,7 +2,7 @@
 	"name": "claude-dev",
 	"displayName": "Cline",
 	"description": "Autonomous coding agent right in your IDE, capable of creating/editing files, running commands, using the browser, and more with your permission every step of the way.",
-	"version": "3.13.2",
+	"version": "3.13.3",
 	"icon": "assets/icons/icon.png",
 	"engines": {
 		"vscode": "^1.84.0"

proto/account.proto

@@ -0,0 +1,15 @@
+syntax = "proto3";
+
+package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
+
+import "common.proto";
+
+// Service for account-related operations
+service AccountService {
+    // Handles the user clicking the login link in the UI.
+    // Generates a secure nonce for state validation, stores it in secrets,
+    // and opens the authentication URL in the external browser.
+    rpc accountLoginClicked(EmptyRequest) returns (String);
+}

proto/browser.proto

@@ -1,6 +1,8 @@
 syntax = "proto3";
 
 package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
 
 import "common.proto";
 

proto/build-proto.js

@@ -77,10 +77,11 @@ async function generateMethodRegistrations() {
 	console.log(chalk.cyan("Generating method registration files..."))
 
 	const serviceDirs = [
-		path.join(ROOT_DIR, "src", "core", "controller", "mcp"),
+		path.join(ROOT_DIR, "src", "core", "controller", "account"),
 		path.join(ROOT_DIR, "src", "core", "controller", "browser"),
 		path.join(ROOT_DIR, "src", "core", "controller", "checkpoints"),
 		path.join(ROOT_DIR, "src", "core", "controller", "file"),
+		path.join(ROOT_DIR, "src", "core", "controller", "mcp"),
 		path.join(ROOT_DIR, "src", "core", "controller", "task"),
 		// Add more service directories here as needed
 	]

proto/checkpoints.proto

@@ -1,6 +1,8 @@
 syntax = "proto3";
 
 package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
 
 import "common.proto";
 

proto/common.proto

@@ -1,6 +1,8 @@
 syntax = "proto3";
 
 package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
 
 message Metadata {
 }

proto/file.proto

@@ -1,6 +1,8 @@
 syntax = "proto3";
 
 package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
 
 import "common.proto";
 
@@ -8,4 +10,7 @@ import "common.proto";
 service FileService {
   // Opens a file in the editor
   rpc openFile(StringRequest) returns (Empty);
+  
+  // Opens an image in the system viewer
+  rpc openImage(StringRequest) returns (Empty);
 }

proto/mcp.proto

@@ -1,6 +1,8 @@
 syntax = "proto3";
 
 package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
 
 import "common.proto";
 

proto/task.proto

@@ -1,6 +1,8 @@
 syntax = "proto3";
 
 package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
 
 import "common.proto";
 

src/api/providers/ollama.ts

@@ -21,8 +21,9 @@ export class OllamaHandler implements ApiHandler {
 
 		try {
 			// Create a promise that rejects after timeout
+			const timeoutMs = this.options.requestTimeoutMs || 30000
 			const timeoutPromise = new Promise<never>((_, reject) => {
-				setTimeout(() => reject(new Error("Ollama request timed out after 120 seconds")), 120000)
+				setTimeout(() => reject(new Error(`Ollama request timed out after ${timeoutMs / 1000} seconds`)), timeoutMs)
 			})
 
 			// Create the actual API request promise
@@ -63,7 +64,8 @@ export class OllamaHandler implements ApiHandler {
 		} catch (error: any) {
 			// Check if it's a timeout error
 			if (error.message && error.message.includes("timed out")) {
-				throw new Error("Ollama request timed out after 120 seconds")
+				const timeoutMs = this.options.requestTimeoutMs || 30000
+				throw new Error(`Ollama request timed out after ${timeoutMs / 1000} seconds`)
 			}
 
 			// Enhance error reporting

src/core/assistant-message/index.ts

@@ -25,6 +25,7 @@ export const toolUseNames = [
 	"attempt_completion",
 	"new_task",
 	"condense",
+	"new_rule",
 ] as const
 
 // Converts array of tool call names into a union type ("execute_command" | "read_file" | ...)

src/core/assistant-message/parse-assistant-message.ts

@@ -55,7 +55,10 @@ export function parseAssistantMessage(assistantMessage: string) {
 
 				// special case for write_to_file where file contents could contain the closing tag, in which case the param would have closed and we end up with the rest of the file contents here. To work around this, we get the string between the starting content tag and the LAST content tag.
 				const contentParamName: ToolParamName = "content"
-				if (currentToolUse.name === "write_to_file" && accumulator.endsWith(`</${contentParamName}>`)) {
+				if (
+					(currentToolUse.name === "write_to_file" || currentToolUse.name === "new_rule") &&
+					accumulator.endsWith(`</${contentParamName}>`)
+				) {
 					const toolContent = accumulator.slice(currentToolUseStartIndex)
 					const contentStartTag = `<${contentParamName}>`
 					const contentEndTag = `</${contentParamName}>`

src/core/context/context-management/__tests__/ContextManager.test.ts

@@ -34,24 +34,24 @@ describe("ContextManager", () => {
 			const messages = createMessages(11)
 			const result = contextManager.getNextTruncationRange(messages, undefined, "half")
 
-			expect(result).to.deep.equal([1, 4])
+			expect(result).to.deep.equal([2, 5])
 		})
 
 		it("first truncation with quarter keep", () => {
 			const messages = createMessages(11)
 			const result = contextManager.getNextTruncationRange(messages, undefined, "quarter")
 
-			expect(result).to.deep.equal([1, 6])
+			expect(result).to.deep.equal([2, 7])
 		})
 
 		it("sequential truncation with half keep", () => {
 			const messages = createMessages(21)
 			const firstRange = contextManager.getNextTruncationRange(messages, undefined, "half")
-			expect(firstRange).to.deep.equal([1, 10])
+			expect(firstRange).to.deep.equal([2, 9])
 
 			// Pass the previous range for sequential truncation
 			const secondRange = contextManager.getNextTruncationRange(messages, firstRange, "half")
-			expect(secondRange).to.deep.equal([1, 14])
+			expect(secondRange).to.deep.equal([2, 13])
 		})
 
 		it("sequential truncation with quarter keep", () => {
@@ -60,7 +60,7 @@ describe("ContextManager", () => {
 
 			const secondRange = contextManager.getNextTruncationRange(messages, firstRange, "quarter")
 
-			expect(secondRange[0]).to.equal(1)
+			expect(secondRange[0]).to.equal(2)
 			expect(secondRange[1]).to.be.greaterThan(firstRange[1])
 		})
 
@@ -68,20 +68,20 @@ describe("ContextManager", () => {
 			const messages = createMessages(14)
 			const result = contextManager.getNextTruncationRange(messages, undefined, "half")
 
-			// Check if the message at the end of range is a user message
+			// Check if the message at the end of range is an assistant message
 			const lastRemovedMessage = messages[result[1]]
-			expect(lastRemovedMessage.role).to.equal("user")
+			expect(lastRemovedMessage.role).to.equal("assistant")
 
-			// Check if the next message after the range is an assistant message
+			// Check if the next message after the range is a user message
 			const nextMessage = messages[result[1] + 1]
-			expect(nextMessage.role).to.equal("assistant")
+			expect(nextMessage.role).to.equal("user")
 		})
 
 		it("handles small message arrays", () => {
 			const messages = createMessages(3)
 			const result = contextManager.getNextTruncationRange(messages, undefined, "half")
 
-			expect(result).to.deep.equal([1, 0])
+			expect(result).to.deep.equal([2, 1])
 		})
 
 		it("preserves the message structure when truncating", () => {
@@ -120,9 +120,10 @@ describe("ContextManager", () => {
 			const range: [number, number] = [1, 3]
 			const result = contextManager.getTruncatedMessages(messages, range)
 
-			expect(result).to.have.lengthOf(2)
+			expect(result).to.have.lengthOf(3)
 			expect(result[0]).to.deep.equal(messages[0])
-			expect(result[1]).to.deep.equal(messages[4])
+			expect(result[1]).to.deep.equal(messages[1])
+			expect(result[2]).to.deep.equal(messages[4])
 		})
 
 		it("works with a range that starts at the first message after task", () => {
@@ -131,20 +132,21 @@ describe("ContextManager", () => {
 			const range: [number, number] = [1, 2]
 			const result = contextManager.getTruncatedMessages(messages, range)
 
-			expect(result).to.have.lengthOf(2)
+			expect(result).to.have.lengthOf(3)
 			expect(result[0]).to.deep.equal(messages[0])
-			expect(result[1]).to.deep.equal(messages[3])
+			expect(result[1]).to.deep.equal(messages[1])
+			expect(result[2]).to.deep.equal(messages[3])
 		})
 
 		it("correctly handles removing a range while preserving alternation pattern", () => {
 			const messages = createMessages(5)
 
-			const range: [number, number] = [1, 2]
+			const range: [number, number] = [2, 3]
 			const result = contextManager.getTruncatedMessages(messages, range)
 
 			expect(result).to.have.lengthOf(3)
 			expect(result[0]).to.deep.equal(messages[0])
-			expect(result[1]).to.deep.equal(messages[3])
+			expect(result[1]).to.deep.equal(messages[1])
 			expect(result[2]).to.deep.equal(messages[4])
 
 			expect(result[0].role).to.equal("user")

src/core/context/instructions/user-instructions/cline-rules.ts

@@ -7,6 +7,45 @@ import { ClineRulesToggles } from "@shared/cline-rules"
 import { getGlobalState, getWorkspaceState, updateGlobalState, updateWorkspaceState } from "@core/storage/state"
 import * as vscode from "vscode"
 
+/**
+ * Converts .clinerules file to directory and places old .clinerule file inside directory, renaming it
+ * Doesn't do anything if .clinerules dir already exists or doesn't exist
+ * Returns whether there are any uncaught errors
+ */
+export async function ensureLocalClinerulesDirExists(cwd: string): Promise<boolean> {
+	const clinerulePath = path.resolve(cwd, GlobalFileNames.clineRules)
+	const defaultRuleFilename = "default-rules.md"
+
+	try {
+		const exists = await fileExistsAtPath(clinerulePath)
+
+		if (exists && !(await isDirectory(clinerulePath))) {
+			// logic to convert .clinerules file into directory, and rename the rules file to {defaultRuleFilename}
+			const content = await fs.readFile(clinerulePath, "utf8")
+			const tempPath = clinerulePath + ".bak"
+			await fs.rename(clinerulePath, tempPath) // create backup
+			try {
+				await fs.mkdir(clinerulePath, { recursive: true })
+				await fs.writeFile(path.join(clinerulePath, defaultRuleFilename), content, "utf8")
+				await fs.unlink(tempPath).catch(() => {}) // delete backup
+
+				return false // conversion successful with no errors
+			} catch (conversionError) {
+				// attempt to restore backup on conversion failure
+				try {
+					await fs.rm(clinerulePath, { recursive: true, force: true }).catch(() => {})
+					await fs.rename(tempPath, clinerulePath) // restore backup
+				} catch (restoreError) {}
+				return true // in either case here we consider this an error
+			}
+		}
+		// exists and is a dir or doesn't exist, either of these cases we dont need to handle here
+		return false
+	} catch (error) {
+		return true
+	}
+}
+
 export const getGlobalClineRules = async (globalClineRulesFilePath: string, toggles: ClineRulesToggles) => {
 	if (await fileExistsAtPath(globalClineRulesFilePath)) {
 		if (await isDirectory(globalClineRulesFilePath)) {

src/core/controller/account/accountLoginClicked.ts

@@ -0,0 +1,30 @@
+import * as vscode from "vscode"
+import crypto from "crypto"
+import { Controller } from "../index"
+import { storeSecret } from "../../storage/state"
+
+/**
+ * Handles the user clicking the login link in the UI.
+ * Generates a secure nonce for state validation, stores it in secrets,
+ * and opens the authentication URL in the external browser.
+ *
+ * @param controller The controller instance.
+ * @returns The login URL as a string.
+ */
+export async function accountLoginClicked(controller: Controller): Promise<String> {
+	// Generate nonce for state validation
+	const nonce = crypto.randomBytes(32).toString("hex")
+	await storeSecret(controller.context, "authNonce", nonce)
+
+	// Open browser for authentication with state param
+	console.log("Login button clicked in account page")
+	console.log("Opening auth page with state param")
+
+	const uriScheme = vscode.env.uriScheme
+
+	const authUrl = vscode.Uri.parse(
+		`https://app.cline.bot/auth?state=${encodeURIComponent(nonce)}&callback_url=${encodeURIComponent(`${uriScheme || "vscode"}://saoudrizwan.claude-dev/auth`)}`,
+	)
+	vscode.env.openExternal(authUrl)
+	return authUrl.toString()
+}

src/core/controller/account/index.ts

@@ -0,0 +1,14 @@
+import { createServiceRegistry, ServiceMethodHandler } from "../grpc-service"
+import { registerAllMethods } from "./methods"
+
+const accountService = createServiceRegistry("account")
+
+// Export the method handler type and registration function
+export type AccountMethodHandler = ServiceMethodHandler
+export const registerMethod = accountService.registerMethod
+
+// Export the request handler
+export const handleAccountServiceRequest = accountService.handleRequest
+
+// Register all account methods
+registerAllMethods()

src/core/controller/account/methods.ts

@@ -0,0 +1,12 @@
+// AUTO-GENERATED FILE - DO NOT MODIFY DIRECTLY
+// Generated by proto/build-proto.js
+
+// Import all method implementations
+import { registerMethod } from "./index"
+import { accountLoginClicked } from "./accountLoginClicked"
+
+// Register all account service methods
+export function registerAllMethods(): void {
+	// Register each method with the registry
+	registerMethod("accountLoginClicked", accountLoginClicked)
+}

src/core/controller/file/methods.ts

@@ -4,9 +4,11 @@
 // Import all method implementations
 import { registerMethod } from "./index"
 import { openFile } from "./openFile"
+import { openImage } from "./openImage"
 
 // Register all file service methods
 export function registerAllMethods(): void {
 	// Register each method with the registry
 	registerMethod("openFile", openFile)
+	registerMethod("openImage", openImage)
 }

src/core/controller/file/openImage.ts

@@ -0,0 +1,17 @@
+import { Controller } from ".."
+import { Empty, StringRequest } from "@shared/proto/common"
+import { openImage as openImageIntegration } from "@integrations/misc/open-file"
+import { FileMethodHandler } from "./index"
+
+/**
+ * Opens an image in the system viewer
+ * @param controller The controller instance
+ * @param request The request message containing the image path or data URI in the 'value' field
+ * @returns Empty response
+ */
+export const openImage: FileMethodHandler = async (controller: Controller, request: StringRequest): Promise<Empty> => {
+	if (request.value) {
+		await openImageIntegration(request.value)
+	}
+	return Empty.create()
+}

src/core/controller/grpc-handler.ts

@@ -1,4 +1,5 @@
 import { Controller } from "./index"
+import { handleAccountServiceRequest } from "./account"
 import { handleBrowserServiceRequest } from "./browser/index"
 import { handleFileServiceRequest } from "./file"
 import { handleTaskServiceRequest } from "./task"
@@ -31,6 +32,11 @@ export class GrpcHandler {
 	}> {
 		try {
 			switch (service) {
+				case "cline.AccountService":
+					return {
+						message: await handleAccountServiceRequest(this.controller, method, message),
+						request_id: requestId,
+					}
 				case "cline.BrowserService":
 					return {
 						message: await handleBrowserServiceRequest(this.controller, method, message),

src/core/controller/index.ts

@@ -1,7 +1,7 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import axios from "axios"
 import type { AxiosRequestConfig } from "axios"
-import crypto from "crypto"
+
 import fs from "fs/promises"
 import { setTimeout as setTimeoutPromise } from "node:timers/promises"
 import pWaitFor from "p-wait-for"
@@ -12,7 +12,6 @@ import { buildApiHandler } from "@api/index"
 import { cleanupLegacyCheckpoints } from "@integrations/checkpoints/CheckpointMigration"
 import { downloadTask } from "@integrations/misc/export-markdown"
 import { fetchOpenGraphData, isImageUrl } from "@integrations/misc/link-preview"
-import { openImage } from "@integrations/misc/open-file"
 import { handleFileServiceRequest } from "./file"
 import { selectImages } from "@integrations/misc/process-images"
 import { getTheme } from "@integrations/theme/getTheme"
@@ -393,9 +392,6 @@ export class Controller {
 				await refreshClineRulesToggles(this.context, cwd)
 				await this.postStateToWebview()
 				break
-			case "openImage":
-				openImage(message.text!)
-				break
 			case "openInBrowser":
 				if (message.url) {
 					vscode.env.openExternal(vscode.Uri.parse(message.url))
@@ -449,23 +445,6 @@ export class Controller {
 			case "getLatestState":
 				await this.postStateToWebview()
 				break
-			case "accountLoginClicked": {
-				// Generate nonce for state validation
-				const nonce = crypto.randomBytes(32).toString("hex")
-				await storeSecret(this.context, "authNonce", nonce)
-
-				// Open browser for authentication with state param
-				console.log("Login button clicked in account page")
-				console.log("Opening auth page with state param")
-
-				const uriScheme = vscode.env.uriScheme
-
-				const authUrl = vscode.Uri.parse(
-					`https://app.cline.bot/auth?state=${encodeURIComponent(nonce)}&callback_url=${encodeURIComponent(`${uriScheme || "vscode"}://saoudrizwan.claude-dev/auth`)}`,
-				)
-				vscode.env.openExternal(authUrl)
-				break
-			}
 			case "accountLogoutClicked": {
 				await this.handleSignOut()
 				break
@@ -822,6 +801,15 @@ export class Controller {
 				}
 				break
 			}
+
+			case "copyToClipboard": {
+				try {
+					await vscode.env.clipboard.writeText(message.text || "")
+				} catch (error) {
+					console.error("Error copying to clipboard:", error)
+				}
+				break
+			}
 			// Add more switch case statements here as more webview message commands
 			// are created within the webview context (i.e. inside media/main.js)
 		}

src/core/prompts/commands.ts

@@ -85,5 +85,64 @@ Example:
 </context>
 </condense>
 
+Below is the user's input when they indicated that they wanted to compact their context window.
+</explicit_instructions>\n
+`
+
+export const newRuleToolResponse = () =>
+	`<explicit_instructions type="new_rule">
+The user has explicitly asked you to help them create a new Cline rule file inside the .clinerules top-level directory based on the conversation up to this point in time. The user may have provided instructions or additional information for you to consider when creating the new Cline rule.
+When creating a new Cline rule file, you should NOT overwrite or alter an existing Cline rule file. To create the Cline rule file you MUST use the new_rule tool. The new_rule tool can be used in either of the PLAN or ACT modes.
+
+The new_rule tool is defined below:
+
+Description:
+Your task is to create a new Cline rule file which includes guidelines on how to approach developing code in tandem with the user, which can be either project specific or cover more global rules. This includes but is not limited to: desired conversational style, favorite project dependencies, coding styles, naming conventions, architectural choices, ui/ux preferences, etc.
+The Cline rule file must be formatted as markdown and be a '.md' file. The name of the file you generate must be as succinct as possible and be encompassing the main overarching concept of the rules you added to the file (e.g., 'memory-bank.md' or 'project-overview.md').
+
+Parameters:
+- Path: (required) The path of the file to write to (relative to the current working directory). This will be the Cline rule file you create, and it must be placed inside the .clinerules top-level directory (create this if it doesn't exist). The filename created CANNOT be "default-clineignore.md". For filenames, use hyphens ("-") instead of underscores ("_") to separate words.
+- Content: (required) The content to write to the file. ALWAYS provide the COMPLETE intended content of the file, without any truncation or omissions. You MUST include ALL parts of the file, even if they haven't been modified. The content for the Cline rule file MUST be created according to the following instructions:
+  1. Format the Cline rule file to have distinct guideline sections, each with their own markdown heading, starting with "## Brief overview". Under each of these headings, include bullet points fully fleshing out the details, with examples and/or trigger cases ONLY when applicable.
+  2. These guidelines can be specific to the task(s) or project worked on thus far, or cover more high-level concepts. Guidelines can include coding conventions, general design patterns, preferred tech stack including favorite libraries and language, communication style with Cline (verbose vs concise), prompting strategies, naming conventions, testing strategies, comment verbosity, time spent on architecting prior to development, and other preferences.
+  3. When creating guidelines, you should not invent preferences or make assumptions based on what you think a typical user might want. These should be specific to the conversation you had with the user. Your guidelines / rules should not be overly verbose.
+  4. Your guidelines should NOT be a recollection of the conversation up to this point in time, meaning you should NOT be including arbitrary details of the conversation.
+
+Usage:
+<new_rule>
+<path>.clinerules/{file name}.md</path>
+<content>Cline rule file content here</content>
+</new_rule>
+
+Example:
+<new_rule>
+<path>.clinerules/project-preferences.md</path>
+<content>
+## Brief overview
+  [Brief description of the rules in this file, including if this set of guidelines is project-specific or global]
+
+## Communication style
+  - [Description, rule, preference, instruction]
+  - [...]
+
+## Development workflow
+  - [Description, rule, preference, instruction]
+  - [...]
+
+## Coding best practices
+  - [Description, rule, preference, instruction]
+  - [...]
+
+## Project context
+  - [Description, rule, preference, instruction]
+  - [...]
+
+## Other guidelines
+  - [Description, rule, preference, instruction]
+  - [...]
+</content>
+</new_rule>
+
+Below is the user's input when they indicated that they wanted to create a new Cline rule file.
 </explicit_instructions>\n
 `

src/core/slash-commands/index.ts

@@ -1,16 +1,17 @@
-import { newTaskToolResponse, condenseToolResponse } from "../prompts/commands"
+import { newTaskToolResponse, condenseToolResponse, newRuleToolResponse } from "../prompts/commands"
 
 /**
  * Processes text for slash commands and transforms them with appropriate instructions
  * This is called after parseMentions() to process any slash commands in the user's message
  */
-export function parseSlashCommands(text: string): string {
-	const SUPPORTED_COMMANDS = ["newtask", "smol", "compact"]
+export function parseSlashCommands(text: string): { processedText: string; needsClinerulesFileCheck: boolean } {
+	const SUPPORTED_COMMANDS = ["newtask", "smol", "compact", "newrule"]
 
 	const commandReplacements: Record<string, string> = {
 		newtask: newTaskToolResponse(),
 		smol: condenseToolResponse(),
 		compact: condenseToolResponse(),
+		newrule: newRuleToolResponse(),
 	}
 
 	// this currently allows matching prepended whitespace prior to /slash-command
@@ -47,11 +48,11 @@ export function parseSlashCommands(text: string): string {
 				const textWithoutSlashCommand = text.substring(0, slashCommandStartIndex) + text.substring(slashCommandEndIndex)
 				const processedText = commandReplacements[commandName] + textWithoutSlashCommand
 
-				return processedText
+				return { processedText: processedText, needsClinerulesFileCheck: commandName === "newrule" ? true : false }
 			}
 		}
 	}
 
 	// if no supported commands are found, return the original text
-	return text
+	return { processedText: text, needsClinerulesFileCheck: false }
 }

src/core/storage/state-keys.ts

@@ -75,5 +75,6 @@ export type GlobalStateKey =
 	| "reasoningEffort"
 	| "planActSeparateModelsSetting"
 	| "favoritedModelIds"
+	| "requestTimeoutMs"
 
 export type LocalStateKey = "localClineRulesToggles"

src/core/storage/state.ts

@@ -125,6 +125,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		planActSeparateModelsSettingRaw,
 		favoritedModelIds,
 		globalClineRulesToggles,
+		requestTimeoutMs,
 	] = await Promise.all([
 		getGlobalState(context, "apiProvider") as Promise<ApiProvider | undefined>,
 		getGlobalState(context, "apiModelId") as Promise<string | undefined>,
@@ -198,6 +199,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		getGlobalState(context, "planActSeparateModelsSetting") as Promise<boolean | undefined>,
 		getGlobalState(context, "favoritedModelIds") as Promise<string[] | undefined>,
 		getGlobalState(context, "globalClineRulesToggles") as Promise<ClineRulesToggles | undefined>,
+		getGlobalState(context, "requestTimeoutMs") as Promise<number | undefined>,
 	])
 
 	let apiProvider: ApiProvider
@@ -297,6 +299,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 			xaiApiKey,
 			sambanovaApiKey,
 			favoritedModelIds,
+			requestTimeoutMs,
 		},
 		lastShownAnnouncementId,
 		customInstructions,
@@ -434,6 +437,7 @@ export async function updateApiConfiguration(context: vscode.ExtensionContext, a
 	await storeSecret(context, "clineApiKey", clineApiKey)
 	await storeSecret(context, "sambanovaApiKey", sambanovaApiKey)
 	await updateGlobalState(context, "favoritedModelIds", favoritedModelIds)
+	await updateGlobalState(context, "requestTimeoutMs", apiConfiguration.requestTimeoutMs)
 }
 
 export async function resetExtensionState(context: vscode.ExtensionContext) {

src/core/task/index.ts

@@ -86,6 +86,7 @@ import {
 	getGlobalClineRules,
 	getLocalClineRules,
 	refreshClineRulesToggles,
+	ensureLocalClinerulesDirExists,
 } from "@core/context/instructions/user-instructions/cline-rules"
 import { getGlobalState } from "@core/storage/state"
 import { parseSlashCommands } from "@core/slash-commands"
@@ -1361,6 +1362,7 @@ export class Task {
 						this.autoApprovalSettings.actions.readFiles,
 						this.autoApprovalSettings.actions.readFilesExternally ?? false,
 					]
+				case "new_rule":
 				case "write_to_file":
 				case "replace_in_file":
 					return [
@@ -1505,6 +1507,10 @@ export class Task {
 					"quarter", // Force aggressive truncation
 				)
 				await this.saveClineMessagesAndUpdateHistory()
+				await this.contextManager.triggerApplyStandardContextTruncationNoticeChange(
+					Date.now(),
+					await ensureTaskDirectoryExists(this.getContext(), this.taskId),
+				)
 
 				this.didAutomaticallyRetryFailedApiRequest = true
 			} else if (isOpenRouter && !this.didAutomaticallyRetryFailedApiRequest) {
@@ -1515,6 +1521,10 @@ export class Task {
 						"quarter", // Force aggressive truncation
 					)
 					await this.saveClineMessagesAndUpdateHistory()
+					await this.contextManager.triggerApplyStandardContextTruncationNoticeChange(
+						Date.now(),
+						await ensureTaskDirectoryExists(this.getContext(), this.taskId),
+					)
 				}
 
 				console.log("first chunk failed, waiting 1 second before retrying")
@@ -1678,6 +1688,8 @@ export class Task {
 							return `[${block.name} for creating a new task]`
 						case "condense":
 							return `[${block.name}]`
+						case "new_rule":
+							return `[${block.name} for '${block.params.path}']`
 					}
 				}
 
@@ -1817,6 +1829,7 @@ export class Task {
 				}
 
 				switch (block.name) {
+					case "new_rule":
 					case "write_to_file":
 					case "replace_in_file": {
 						const relPath: string | undefined = block.params.path
@@ -1962,6 +1975,13 @@ export class Task {
 
 									break
 								}
+								if (block.name === "new_rule" && !content) {
+									this.consecutiveMistakeCount++
+									pushToolResult(await this.sayAndCreateMissingParamError("new_rule", "content"))
+									await this.diffViewProvider.reset()
+
+									break
+								}
 
 								this.consecutiveMistakeCount = 0
 
@@ -3474,7 +3494,16 @@ export class Task {
 			}
 		}
 
-		const [parsedUserContent, environmentDetails] = await this.loadContext(userContent, includeFileDetails)
+		const [parsedUserContent, environmentDetails, clinerulesError] = await this.loadContext(userContent, includeFileDetails)
+
+		// error handling if the user uses the /newrule command & their .clinerules is a file, for file read operations didnt work properly
+		if (clinerulesError === true) {
+			await this.say(
+				"error",
+				"Issue with processing the /newrule command. Double check that, if '.clinerules' already exists, it's a directory and not a file. Otherwise there was an issue referencing this file/directory.",
+			)
+		}
+
 		userContent = parsedUserContent
 		// add environment details as its own text block, separate from tool results
 		userContent.push({ type: "text", text: environmentDetails })
@@ -3759,11 +3788,14 @@ export class Task {
 		}
 	}
 
-	async loadContext(userContent: UserContent, includeFileDetails: boolean = false) {
-		return await Promise.all([
+	async loadContext(userContent: UserContent, includeFileDetails: boolean = false): Promise<[UserContent, string, boolean]> {
+		// Track if we need to check clinerulesFile
+		let needsClinerulesFileCheck = false
+
+		const processUserContent = async () => {
 			// This is a temporary solution to dynamically load context mentions from tool results. It checks for the presence of tags that indicate that the tool was rejected and feedback was provided (see formatToolDeniedFeedback, attemptCompletion, executeCommand, and consecutiveMistakeCount >= 3) or "<answer>" (see askFollowupQuestion), we place all user generated content in these tags so they can effectively be used as markers for when we should parse mentions). However if we allow multiple tools responses in the future, we will need to parse mentions specifically within the user content tags.
 			// (Note: this caused the @/ import alias bug where file contents were being parsed as well, since v2 converted tool results to text blocks)
-			Promise.all(
+			return await Promise.all(
 				userContent.map(async (block) => {
 					if (block.type === "text") {
 						// We need to ensure any user generated content is wrapped in one of these tags so that we know to parse mentions
@@ -3774,22 +3806,45 @@ export class Task {
 							block.text.includes("<task>") ||
 							block.text.includes("<user_message>")
 						) {
-							let parsedText = await parseMentions(block.text, cwd, this.urlContentFetcher, this.fileContextTracker)
+							const parsedText = await parseMentions(
+								block.text,
+								cwd,
+								this.urlContentFetcher,
+								this.fileContextTracker,
+							)
 
 							// when parsing slash commands, we still want to allow the user to provide their desired context
-							parsedText = parseSlashCommands(parsedText)
+							const { processedText, needsClinerulesFileCheck: needsCheck } = parseSlashCommands(parsedText)
+
+							if (needsCheck) {
+								needsClinerulesFileCheck = true
+							}
 
 							return {
 								...block,
-								text: parsedText,
+								text: processedText,
 							}
 						}
 					}
 					return block
 				}),
-			),
+			)
+		}
+
+		// Run initial promises in parallel
+		const [processedUserContent, environmentDetails] = await Promise.all([
+			processUserContent(),
 			this.getEnvironmentDetails(includeFileDetails),
 		])
+
+		// After processing content, check clinerulesData if needed
+		let clinerulesError = false
+		if (needsClinerulesFileCheck) {
+			clinerulesError = await ensureLocalClinerulesDirExists(cwd)
+		}
+
+		// Return all results
+		return [processedUserContent, environmentDetails, clinerulesError]
 	}
 
 	async getEnvironmentDetails(includeFileDetails: boolean = false) {

src/shared/ExtensionMessage.ts

@@ -57,7 +57,6 @@ export interface ExtensionMessage {
 		| "settingsButtonClicked"
 		| "historyButtonClicked"
 		| "didBecomeVisible"
-		| "accountLoginClicked"
 		| "accountLogoutClicked"
 		| "accountButtonClicked"
 		| "focusChatInput"

src/shared/WebviewMessage.ts

@@ -24,7 +24,6 @@ export interface WebviewMessage {
 		| "resetState"
 		| "requestOllamaModels"
 		| "requestLmStudioModels"
-		| "openImage"
 		| "openInBrowser"
 		| "createRuleFile"
 		| "openMention"
@@ -44,7 +43,6 @@ export interface WebviewMessage {
 		| "requestVsCodeLmModels"
 		| "toggleToolAutoApprove"
 		| "getLatestState"
-		| "accountLoginClicked"
 		| "accountLogoutClicked"
 		| "showAccountViewClicked"
 		| "authStateChanged"
@@ -74,6 +72,7 @@ export interface WebviewMessage {
 		| "grpc_request"
 		| "toggleClineRule"
 		| "deleteClineRule"
+		| "copyToClipboard"
 
 	// | "relaunchChromeDebugMode"
 	text?: string

src/shared/api.ts

@@ -80,6 +80,7 @@ export interface ApiHandlerOptions {
 	thinkingBudgetTokens?: number
 	reasoningEffort?: string
 	sambanovaApiKey?: string
+	requestTimeoutMs?: number
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {

src/shared/proto/account.ts

@@ -0,0 +1,32 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.7.0
+//   protoc               v3.19.1
+// source: account.proto
+
+/* eslint-disable */
+import { EmptyRequest, String } from "./common"
+
+export const protobufPackage = "cline"
+
+/** Service for account-related operations */
+export type AccountServiceDefinition = typeof AccountServiceDefinition
+export const AccountServiceDefinition = {
+	name: "AccountService",
+	fullName: "cline.AccountService",
+	methods: {
+		/**
+		 * Handles the user clicking the login link in the UI.
+		 * Generates a secure nonce for state validation, stores it in secrets,
+		 * and opens the authentication URL in the external browser.
+		 */
+		accountLoginClicked: {
+			name: "accountLoginClicked",
+			requestType: EmptyRequest,
+			requestStream: false,
+			responseType: String,
+			responseStream: false,
+			options: {},
+		},
+	},
+} as const

src/shared/proto/file.ts

@@ -24,5 +24,14 @@ export const FileServiceDefinition = {
 			responseStream: false,
 			options: {},
 		},
+		/** Opens an image in the system viewer */
+		openImage: {
+			name: "openImage",
+			requestType: StringRequest,
+			requestStream: false,
+			responseType: Empty,
+			responseStream: false,
+			options: {},
+		},
 	},
 } as const

src/test/requires.ts

@@ -0,0 +1,17 @@
+const Module = require("module")
+const originalRequire = Module.prototype.require
+
+/**
+ * VSCode is not available during unit tests
+ * @see {@link file://./vscode-mock.ts}
+ */
+Module.prototype.require = function (path: string) {
+	if (path === "vscode") {
+		return require("./vscode-mock")
+	}
+
+	return originalRequire.call(this, path)
+}
+
+// Required to have access to String.prototype.toPosix
+import "../utils/path"

src/test/vscode-mock.ts

@@ -0,0 +1 @@
+export {}

src/utils/cost.ts

@@ -27,7 +27,7 @@ function calculateApiCostInternal(
 	}
 
 	// Determine effective output price
-	let effectiveOutputPrice = 0
+	let effectiveOutputPrice = modelInfo.outputPrice || 0
 	// Check if thinking budget was used and has a specific price
 	if (usedThinkingBudget && modelInfo.thinkingConfig?.outputPrice !== undefined) {
 		effectiveOutputPrice = modelInfo.thinkingConfig.outputPrice

webview-ui/package.json

@@ -33,7 +33,11 @@
 		"react-use": "^17.6.0",
 		"react-virtuoso": "^4.12.3",
 		"rehype-highlight": "^7.0.1",
+		"rehype-parse": "^9.0.1",
+		"rehype-remark": "^10.0.1",
+		"remark-stringify": "^11.0.0",
 		"styled-components": "^6.1.15",
+		"unified": "^11.0.5",
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {

webview-ui/src/components/account/AccountOptions.tsx

@@ -1,9 +1,12 @@
 import { memo } from "react"
-import { vscode } from "@/utils/vscode"
+import { AccountServiceClient } from "@/services/grpc-client"
+import { EmptyRequest } from "@shared/proto/common"
 
 const AccountOptions = () => {
 	const handleAccountClick = () => {
-		vscode.postMessage({ type: "accountLoginClicked" })
+		AccountServiceClient.accountLoginClicked(EmptyRequest.create()).catch((err) =>
+			console.error("Failed to get login URL:", err),
+		)
 	}
 
 	// Call handleAccountClick immediately when component mounts

webview-ui/src/components/account/AccountView.tsx

@@ -8,6 +8,8 @@ import CountUp from "react-countup"
 import CreditsHistoryTable from "./CreditsHistoryTable"
 import { UsageTransaction, PaymentTransaction } from "@shared/ClineAccount"
 import { useExtensionState } from "@/context/ExtensionStateContext"
+import { AccountServiceClient } from "@/services/grpc-client"
+import { EmptyRequest } from "@shared/proto/common"
 
 type AccountViewProps = {
 	onDone: () => void
@@ -68,7 +70,9 @@ export const ClineAccountView = () => {
 	}, [user])
 
 	const handleLogin = () => {
-		vscode.postMessage({ type: "accountLoginClicked" })
+		AccountServiceClient.accountLoginClicked(EmptyRequest.create()).catch((err) =>
+			console.error("Failed to get login URL:", err),
+		)
 	}
 
 	const handleLogout = () => {

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

@@ -6,7 +6,7 @@ import styled from "styled-components"
 import { BROWSER_VIEWPORT_PRESETS } from "@shared/BrowserSettings"
 import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction } from "@shared/ExtensionMessage"
 import { useExtensionState } from "@/context/ExtensionStateContext"
-import { vscode } from "@/utils/vscode"
+import { FileServiceClient } from "@/services/grpc-client"
 import { BrowserSettingsMenu } from "@/components/browser/BrowserSettingsMenu"
 import { CheckpointControls } from "@/components/common/CheckpointControls"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
@@ -397,10 +397,9 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 							alt="Browser screenshot"
 							style={imgScreenshotStyle}
 							onClick={() =>
-								vscode.postMessage({
-									type: "openImage",
-									text: displayState.screenshot,
-								})
+								FileServiceClient.openImage({ value: displayState.screenshot }).catch((err) =>
+									console.error("Failed to open image:", err),
+								)
 							}
 						/>
 					) : (

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

@@ -28,6 +28,10 @@ import ChatRow from "@/components/chat/ChatRow"
 import ChatTextArea from "@/components/chat/ChatTextArea"
 import TaskHeader from "@/components/chat/TaskHeader"
 import TelemetryBanner from "@/components/common/TelemetryBanner"
+import { unified } from "unified"
+import remarkStringify from "remark-stringify"
+import rehypeRemark from "rehype-remark"
+import rehypeParse from "rehype-parse"
 
 interface ChatViewProps {
 	isHidden: boolean
@@ -36,6 +40,26 @@ interface ChatViewProps {
 	showHistoryView: () => void
 }
 
+async function convertHtmlToMarkdown(html: string) {
+	// Process the HTML to Markdown
+	const result = await unified()
+		.use(rehypeParse as any, { fragment: true }) // Parse HTML fragments
+		.use(rehypeRemark as any) // Convert HTML to Markdown AST
+		.use(remarkStringify as any, {
+			// Convert Markdown AST to text
+			bullet: "-", // Use - for unordered lists
+			emphasis: "*", // Use * for emphasis
+			strong: "_", // Use _ for strong
+			listItemIndent: "one", // Use one space for list indentation
+			rule: "-", // Use - for horizontal rules
+			ruleSpaces: false, // No spaces in horizontal rules
+			fences: true,
+		})
+		.process(html)
+
+	return String(result)
+}
+
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
 const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryView }: ChatViewProps) => {
@@ -79,6 +103,33 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 	const [showScrollToBottom, setShowScrollToBottom] = useState(false)
 	const [isAtBottom, setIsAtBottom] = useState(false)
 
+	useEffect(() => {
+		const handleCopy = async (e: ClipboardEvent) => {
+			if (window.getSelection) {
+				const selection = window.getSelection()
+				if (selection && selection.rangeCount > 0) {
+					// Get the selected HTML content
+					const range = selection.getRangeAt(0)
+					const clonedSelection = range.cloneContents()
+					const div = document.createElement("div")
+					div.appendChild(clonedSelection)
+					const selectedHtml = div.innerHTML
+
+					// Convert HTML to Markdown
+					const markdown = await convertHtmlToMarkdown(selectedHtml)
+
+					vscode.postMessage({ type: "copyToClipboard", text: markdown })
+					e.preventDefault()
+				}
+			}
+		}
+		document.addEventListener("copy", handleCopy)
+
+		return () => {
+			document.removeEventListener("copy", handleCopy)
+		}
+	}, [])
+
 	// 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
 	const lastMessage = useMemo(() => messages.at(-1), [messages])

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

@@ -2,7 +2,7 @@ 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"
+import { FileServiceClient } from "@/services/grpc-client"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 
 const MERMAID_THEME = {
@@ -131,10 +131,7 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 
 		try {
 			const pngDataUrl = await svgToPng(svgEl)
-			vscode.postMessage({
-				type: "openImage",
-				text: pngDataUrl,
-			})
+			FileServiceClient.openImage({ value: pngDataUrl }).catch((err) => console.error("Failed to open image:", err))
 		} catch (err) {
 			console.error("Error converting SVG to PNG:", err)
 		}

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

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useLayoutEffect, memo } from "react"
 import { useWindowSize } from "react-use"
+import { FileServiceClient } from "@/services/grpc-client"
 import { vscode } from "@/utils/vscode"
 
 interface ThumbnailsProps {
@@ -33,7 +34,7 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 	const isDeletable = setImages !== undefined
 
 	const handleImageClick = (image: string) => {
-		vscode.postMessage({ type: "openImage", text: image })
+		FileServiceClient.openImage({ value: image }).catch((err) => console.error("Failed to open image:", err))
 	}
 
 	return (

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

@@ -60,6 +60,7 @@ import VSCodeButtonLink from "@/components/common/VSCodeButtonLink"
 import OpenRouterModelPicker, { ModelDescriptionMarkdown, OPENROUTER_MODEL_PICKER_Z_INDEX } from "./OpenRouterModelPicker"
 import { ClineAccountInfoCard } from "./ClineAccountInfoCard"
 import RequestyModelPicker from "./RequestyModelPicker"
+import { useOpenRouterKeyInfo } from "../ui/hooks/useOpenRouterKeyInfo"
 
 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -69,6 +70,44 @@ interface ApiOptionsProps {
 	saveImmediately?: boolean // Add prop to control immediate saving
 }
 
+const OpenRouterBalanceDisplay = ({ apiKey }: { apiKey: string }) => {
+	const { data: keyInfo, isLoading, error } = useOpenRouterKeyInfo(apiKey)
+
+	if (isLoading) {
+		return <span style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>Loading...</span>
+	}
+
+	if (error || !keyInfo || keyInfo.limit === null) {
+		// Don't show anything if there's an error, no info, or no limit set
+		return null
+	}
+
+	// Calculate remaining balance
+	const remainingBalance = keyInfo.limit - keyInfo.usage
+	const formattedBalance = remainingBalance.toLocaleString("en-US", {
+		style: "currency",
+		currency: "USD",
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 4,
+	})
+
+	return (
+		<VSCodeLink
+			href="https://openrouter.ai/settings/keys"
+			title={`Remaining balance: ${formattedBalance}\nLimit: ${keyInfo.limit.toLocaleString("en-US", { style: "currency", currency: "USD" })}\nUsage: ${keyInfo.usage.toLocaleString("en-US", { style: "currency", currency: "USD" })}`}
+			style={{
+				fontSize: "12px",
+				color: "var(--vscode-foreground)",
+				textDecoration: "none",
+				fontWeight: 500,
+				paddingLeft: 4,
+				cursor: "pointer",
+			}}>
+			Balance: {formattedBalance}
+		</VSCodeLink>
+	)
+}
+
 // This is necessary to ensure dropdown opens downward, important for when this is used in popup
 const DROPDOWN_Z_INDEX = OPENROUTER_MODEL_PICKER_Z_INDEX + 2 // Higher than the OpenRouterModelPicker's and ModelSelectorTooltip's z-index
 
@@ -530,7 +569,12 @@ const ApiOptions = ({
 						type="password"
 						onInput={handleInputChange("openRouterApiKey")}
 						placeholder="Enter API Key...">
-						<span style={{ fontWeight: 500 }}>OpenRouter API Key</span>
+						<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+							<span style={{ fontWeight: 500 }}>OpenRouter API Key</span>
+							{apiConfiguration?.openRouterApiKey && (
+								<OpenRouterBalanceDisplay apiKey={apiConfiguration.openRouterApiKey} />
+							)}
+						</div>
 					</VSCodeTextField>
 					{!apiConfiguration?.openRouterApiKey && (
 						<VSCodeButtonLink
@@ -1574,6 +1618,31 @@ const ApiOptions = ({
 				</p>
 			)}
 
+			{selectedProvider === "ollama" && showModelOptions && (
+				<>
+					<VSCodeTextField
+						value={apiConfiguration?.requestTimeoutMs ? apiConfiguration.requestTimeoutMs.toString() : "30000"}
+						style={{ width: "100%" }}
+						onInput={(e: any) => {
+							const value = e.target.value
+							// Convert to number, with validation
+							const numValue = parseInt(value, 10)
+							if (!isNaN(numValue) && numValue > 0) {
+								setApiConfiguration({
+									...apiConfiguration,
+									requestTimeoutMs: numValue,
+								})
+							}
+						}}
+						placeholder="Default: 30000 (30 seconds)">
+						<span style={{ fontWeight: 500 }}>Request Timeout (ms)</span>
+					</VSCodeTextField>
+					<p style={{ fontSize: "12px", marginTop: 3, color: "var(--vscode-descriptionForeground)" }}>
+						Maximum time in milliseconds to wait for API responses before timing out.
+					</p>
+				</>
+			)}
+
 			{(selectedProvider === "openrouter" || selectedProvider === "cline") && showModelOptions && (
 				<>
 					<VSCodeCheckbox

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

@@ -2,6 +2,8 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useFirebaseAuth } from "@/context/FirebaseAuthContext"
 import { vscode } from "@/utils/vscode"
 import { useExtensionState } from "@/context/ExtensionStateContext"
+import { AccountServiceClient } from "@/services/grpc-client"
+import { EmptyRequest } from "@shared/proto/common"
 
 export const ClineAccountInfoCard = () => {
 	const { user: firebaseUser, handleSignOut } = useFirebaseAuth()
@@ -10,7 +12,9 @@ export const ClineAccountInfoCard = () => {
 	let user = apiConfiguration?.clineApiKey ? firebaseUser || userInfo : undefined
 
 	const handleLogin = () => {
-		vscode.postMessage({ type: "accountLoginClicked" })
+		AccountServiceClient.accountLoginClicked(EmptyRequest.create()).catch((err) =>
+			console.error("Failed to get login URL:", err),
+		)
 	}
 
 	const handleLogout = () => {

webview-ui/src/components/ui/hooks/useOpenRouterKeyInfo.ts

@@ -0,0 +1,148 @@
+import { z } from "zod"
+import { useState, useEffect } from "react"
+
+const CACHE_DURATION_MS = 30 * 1000 // 30 seconds
+const OpenRouterBaseURL = "https://openrouter.ai/api/v1"
+
+// Define schema for OpenRouter key response
+const openRouterKeyInfoSchema = z.object({
+	data: z.object({
+		label: z.string().nullable(),
+		usage: z.number(),
+		is_free_tier: z.boolean(),
+		is_provisioning_key: z.boolean(),
+		rate_limit: z.object({
+			requests: z.number(),
+			interval: z.string(),
+		}),
+		limit: z.number().nullable(),
+	}),
+})
+export type OpenRouterKeyInfo = z.infer<typeof openRouterKeyInfoSchema>["data"]
+
+// Module-level cache variables
+let moduleCachedData: OpenRouterKeyInfo | null = null
+let moduleLastFetchTime: number | null = null
+
+async function getOpenRouterKeyInfo(apiKey: string, signal: AbortSignal): Promise<OpenRouterKeyInfo | null> {
+	try {
+		const keyEndpoint = `${OpenRouterBaseURL}/key`
+		const response = await fetch(keyEndpoint, {
+			headers: {
+				Authorization: `Bearer ${apiKey}`,
+			},
+			signal,
+		})
+
+		if (!response.ok) {
+			if (response.status === 401) {
+				console.warn("OpenRouter API key is invalid or unauthorized.")
+			} else {
+				console.error(`Error fetching OpenRouter key info: HTTP ${response.status}`)
+			}
+			return null
+		}
+
+		const responseData = await response.json()
+		const result = openRouterKeyInfoSchema.safeParse(responseData)
+		if (!result.success) {
+			console.error("OpenRouter API key info validation failed:", result.error.flatten().fieldErrors)
+			return null
+		}
+		return result.data.data
+	} catch (error: any) {
+		if (error.name !== "AbortError") {
+			console.error("Error fetching OpenRouter key info:", error)
+		}
+		return null
+	}
+}
+
+/**
+ * Custom hook to fetch OpenRouter API key information.
+ * Implements stale-while-revalidate caching using module-level variables.
+ * @param apiKey The OpenRouter API key.
+ * @returns An object containing the key info data, loading state, and error state.
+ */
+export const useOpenRouterKeyInfo = (apiKey?: string) => {
+	// State reflects the currently displayed data, initialized from cache
+	const [data, setData] = useState<OpenRouterKeyInfo | null>(moduleCachedData)
+	// Loading is true only if there's no initial cache and a key is provided
+	const [isLoading, setIsLoading] = useState<boolean>(!moduleCachedData && !!apiKey)
+	const [error, setError] = useState<Error | null>(null)
+
+	useEffect(() => {
+		const controller = new AbortController()
+		const signal = controller.signal
+
+		if (!apiKey) {
+			// Clear state and cache if API key is removed
+			setData(null)
+			moduleCachedData = null
+			moduleLastFetchTime = null
+			setIsLoading(false)
+			setError(null)
+			return () => controller.abort()
+		}
+
+		const now = Date.now()
+		const cacheAge = moduleLastFetchTime ? now - moduleLastFetchTime : Infinity
+		const isCacheStale = cacheAge >= CACHE_DURATION_MS
+		const hasCache = !!moduleCachedData
+
+		// Use cached data immediately if available
+		if (hasCache) {
+			// Ensure local state matches module cache if it hasn't updated yet
+			// This handles cases where the hook re-renders before the effect runs
+			if (data !== moduleCachedData) {
+				setData(moduleCachedData)
+			}
+			setIsLoading(false)
+		} else {
+			setIsLoading(true)
+			setError(null)
+		}
+
+		// Fetch if cache is stale or doesn't exist
+		if (isCacheStale || !hasCache) {
+			const isBackgroundFetch = hasCache && isCacheStale // Fetching while showing stale data
+
+			// Don't set loading true for background fetches
+			if (!isBackgroundFetch) {
+				setIsLoading(true)
+			}
+
+			getOpenRouterKeyInfo(apiKey, signal)
+				.then((result) => {
+					if (!signal.aborted) {
+						moduleCachedData = result // Update module cache
+						moduleLastFetchTime = Date.now() // Update module fetch time
+						setData(result) // Update state
+						setError(null) // Clear error on success
+					}
+				})
+				.catch((err) => {
+					if (!signal.aborted) {
+						console.error("[useOpenRouterKeyInfo] Fetch error:", err)
+						setError(err instanceof Error ? err : new Error("An unknown error occurred"))
+						if (!isBackgroundFetch) {
+							setData(null)
+							moduleCachedData = null
+							moduleLastFetchTime = null
+						}
+					}
+				})
+				.finally(() => {
+					if (!signal.aborted) {
+						setIsLoading(false) // Stop loading indicator
+					}
+				})
+		}
+
+		return () => {
+			controller.abort()
+		}
+	}, [apiKey]) // Re-run effect only when apiKey changes
+
+	return { data, isLoading, error }
+}

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -5,6 +5,8 @@ import { validateApiConfiguration } from "@/utils/validate"
 import { vscode } from "@/utils/vscode"
 import ApiOptions from "@/components/settings/ApiOptions"
 import ClineLogoWhite from "@/assets/ClineLogoWhite"
+import { AccountServiceClient } from "@/services/grpc-client"
+import { EmptyRequest } from "@shared/proto/common"
 
 const WelcomeView = memo(() => {
 	const { apiConfiguration } = useExtensionState()
@@ -14,7 +16,9 @@ const WelcomeView = memo(() => {
 	const disableLetsGoButton = apiErrorMessage != null
 
 	const handleLogin = () => {
-		vscode.postMessage({ type: "accountLoginClicked" })
+		AccountServiceClient.accountLoginClicked(EmptyRequest.create()).catch((err) =>
+			console.error("Failed to get login URL:", err),
+		)
 	}
 
 	const handleSubmit = () => {

webview-ui/src/services/grpc-client.ts

@@ -1,11 +1,12 @@
 import { vscode } from "../utils/vscode"
 import { v4 as uuidv4 } from "uuid"
+import { AccountServiceDefinition } from "@shared/proto/account"
 import { BrowserServiceDefinition } from "@shared/proto/browser"
 import { CheckpointsServiceDefinition } from "@shared/proto/checkpoints"
-import { FileServiceDefinition } from "@shared/proto/file"
-import { TaskServiceDefinition } from "@shared/proto/task"
 import { EmptyRequest } from "@shared/proto/common"
+import { FileServiceDefinition } from "@shared/proto/file"
 import { McpServiceDefinition } from "@shared/proto/mcp"
+import { TaskServiceDefinition } from "@shared/proto/task"
 // Generic type for any protobuf service definition
 type ProtoService = {
 	name: string
@@ -95,10 +96,18 @@ function createGrpcClient<T extends ProtoService>(service: T): GrpcClientType<T>
 	return client
 }
 
+const AccountServiceClient = createGrpcClient(AccountServiceDefinition)
 const BrowserServiceClient = createGrpcClient(BrowserServiceDefinition)
 const CheckpointsServiceClient = createGrpcClient(CheckpointsServiceDefinition)
 const FileServiceClient = createGrpcClient(FileServiceDefinition)
-const TaskServiceClient = createGrpcClient(TaskServiceDefinition)
 const McpServiceClient = createGrpcClient(McpServiceDefinition)
+const TaskServiceClient = createGrpcClient(TaskServiceDefinition)
 
-export { BrowserServiceClient, CheckpointsServiceClient, FileServiceClient, TaskServiceClient, McpServiceClient }
+export {
+	AccountServiceClient,
+	BrowserServiceClient,
+	CheckpointsServiceClient,
+	FileServiceClient,
+	TaskServiceClient,
+	McpServiceClient,
+}

webview-ui/src/utils/slash-commands.ts

@@ -12,6 +12,10 @@ export const SUPPORTED_SLASH_COMMANDS: SlashCommand[] = [
 		name: "smol",
 		description: "Condenses your current context window",
 	},
+	{
+		name: "newrule",
+		description: "Create a new Cline rule based on your conversation",
+	},
 ]
 
 // Regex for detecting slash commands in text