Fix changelog

This reverts commit 29c01eb7d3.

.changeset/cold-shirts-deny.md

@@ -1,5 +0,0 @@
----
-"claude-dev": patch
----
-
-fix: make AWS Bedrock authentication predictable

.changeset/distance-fire-world.md

@@ -1,5 +0,0 @@
----
-"claude-dev": patch
----
-
-Add translation to CODE_OF_CONDUCT, CONTRIBUTING and README to Arabic ar-sa.

.changeset/dry-ghosts-nail.md

@@ -1,5 +0,0 @@
----
-"claude-dev": patch
----
-
-A new MCP Marketplace display setting has been added to VSCode settings. (It is defaulted to "true")

.changeset/wicked-pears-tickle.md

@@ -1,5 +0,0 @@
----
-"claude-dev": patch
----
-
-Adjustment to MCP server installation prompt

.changeset/yellow-paws-chew.md

@@ -1,5 +0,0 @@
----
-"claude-dev": minor
----
-
-ADD IS_DEV and Hot Reloading to debug

.clinerules

@@ -0,0 +1,517 @@
+# Cline Extension Architecture & Development Guide
+
+## Project Overview
+
+Cline is a VSCode extension that provides AI assistance through a combination of a core extension backend and a React-based webview frontend. The extension is built with TypeScript and follows a modular architecture pattern.
+
+## Architecture Overview
+
+```mermaid
+graph TB
+    subgraph VSCode Extension Host
+        subgraph Core Extension
+            ExtensionEntry[Extension Entry<br/>src/extension.ts]
+            ClineProvider[ClineProvider<br/>src/core/webview/ClineProvider.ts]
+            ClineClass[Cline Class<br/>src/core/Cline.ts]
+            GlobalState[VSCode Global State]
+            SecretsStorage[VSCode Secrets Storage]
+        end
+
+        subgraph Webview UI
+            WebviewApp[React App<br/>webview-ui/src/App.tsx]
+            ExtStateContext[ExtensionStateContext<br/>webview-ui/src/context/ExtensionStateContext.tsx]
+            ReactComponents[React Components]
+        end
+
+        subgraph Storage
+            TaskStorage[Task Storage<br/>Per-Task Files & History]
+            CheckpointSystem[Git-based Checkpoints]
+        end
+    end
+
+    %% Core Extension Data Flow
+    ExtensionEntry --> ClineProvider
+    ClineProvider --> ClineClass
+    ClineClass --> GlobalState
+    ClineClass --> SecretsStorage
+    ClineClass --> TaskStorage
+    ClineClass --> CheckpointSystem
+
+    %% Webview Data Flow
+    WebviewApp --> ExtStateContext
+    ExtStateContext --> ReactComponents
+
+    %% Bidirectional Communication
+    ClineProvider <-->|postMessage| ExtStateContext
+
+    style GlobalState fill:#f9f,stroke:#333,stroke-width:2px
+    style SecretsStorage fill:#f9f,stroke:#333,stroke-width:2px
+    style ExtStateContext fill:#bbf,stroke:#333,stroke-width:2px
+    style ClineProvider fill:#bfb,stroke:#333,stroke-width:2px
+```
+
+## Definitions 
+
+- core extension: Anything inside the src folder starting with the Cline.ts file
+- core extension state: Managed by the ClineProvider class in src/core/webview/ClineProvider.ts, which serves as the single source of truth for the extension's state. It manages multiple types of persistent storage (global state, workspace state, and secrets), handles state distribution to both the core extension and webview components, and coordinates state across multiple extension instances. This includes managing API configurations, task history, settings, and MCP configurations.
+- webview: Anything inside the webview-ui. All the react or view's seen by the user and user interaction compone
+- webview state: Managed by ExtensionStateContext in webview-ui/src/context/ExtensionStateContext.tsx, which provides React components with access to the extension's state through a context provider pattern. It maintains local state for UI components, handles real-time updates through message events, manages partial message updates, and provides methods for state modifications. The context includes extension version, messages, task history, theme, API configurations, MCP servers, marketplace catalog, and workspace file paths. It synchronizes with the core extension through VSCode's message passing system and provides type-safe access to state through a custom hook (useExtensionState).
+
+### Core Extension State
+
+The `ClineProvider` class manages multiple types of persistent storage:
+
+- **Global State:** Stored across all VSCode instances. Used for settings and data that should persist globally.
+- **Workspace State:** Specific to the current workspace. Used for task-specific data and settings.
+- **Secrets:** Secure storage for sensitive information like API keys.
+
+The `ClineProvider` handles the distribution of state to both the core extension and webview components. It also coordinates state across multiple extension instances, ensuring consistency.
+
+### Webview State
+
+The `ExtensionStateContext` in `webview-ui/src/context/ExtensionStateContext.tsx` provides React components with access to the extension's state. It uses a context provider pattern and maintains local state for UI components. The context includes:
+
+- Extension version
+- Messages
+- Task history
+- Theme
+- API configurations
+- MCP servers
+- Marketplace catalog
+- Workspace file paths
+
+It synchronizes with the core extension through VSCode's message passing system and provides type-safe access to the state via a custom hook (`useExtensionState`).
+
+## Core Extension (Cline.ts)
+
+The Cline class is the heart of the extension, managing task execution, state persistence, and tool coordination. Each task runs in its own instance of the Cline class, ensuring isolation and proper state management.
+
+### Task Execution Loop
+
+The core task execution loop follows this pattern:
+
+```typescript
+class Cline {
+  async initiateTaskLoop(userContent: UserContent, isNewTask: boolean) {
+    while (!this.abort) {
+      // 1. Make API request and stream response
+      const stream = this.attemptApiRequest()
+      
+      // 2. Parse and present content blocks
+      for await (const chunk of stream) {
+        switch (chunk.type) {
+          case "text":
+            // Parse into content blocks
+            this.assistantMessageContent = parseAssistantMessage(chunk.text)
+            // Present blocks to user
+            await this.presentAssistantMessage()
+            break
+        }
+      }
+      
+      // 3. Wait for tool execution to complete
+      await pWaitFor(() => this.userMessageContentReady)
+      
+      // 4. Continue loop with tool result
+      const recDidEndLoop = await this.recursivelyMakeClineRequests(
+        this.userMessageContent
+      )
+    }
+  }
+}
+```
+
+### Message Streaming System
+
+The streaming system handles real-time updates and partial content:
+
+```typescript
+class Cline {
+  async presentAssistantMessage() {
+    // Handle streaming locks to prevent race conditions
+    if (this.presentAssistantMessageLocked) {
+      this.presentAssistantMessageHasPendingUpdates = true
+      return
+    }
+    this.presentAssistantMessageLocked = true
+
+    // Present current content block
+    const block = this.assistantMessageContent[this.currentStreamingContentIndex]
+    
+    // Handle different types of content
+    switch (block.type) {
+      case "text":
+        await this.say("text", content, undefined, block.partial)
+        break
+      case "tool_use":
+        // Handle tool execution
+        break
+    }
+
+    // Move to next block if complete
+    if (!block.partial) {
+      this.currentStreamingContentIndex++
+    }
+  }
+}
+```
+
+### Tool Execution Flow
+
+Tools follow a strict execution pattern:
+
+```typescript
+class Cline {
+  async executeToolWithApproval(block: ToolBlock) {
+    // 1. Check auto-approval settings
+    if (this.shouldAutoApproveTool(block.name)) {
+      await this.say("tool", message)
+      this.consecutiveAutoApprovedRequestsCount++
+    } else {
+      // 2. Request user approval
+      const didApprove = await askApproval("tool", message)
+      if (!didApprove) {
+        this.didRejectTool = true
+        return
+      }
+    }
+
+    // 3. Execute tool
+    const result = await this.executeTool(block)
+
+    // 4. Save checkpoint
+    await this.saveCheckpoint()
+
+    // 5. Return result to API
+    return result
+  }
+}
+```
+
+### Error Handling & Recovery
+
+The system includes robust error handling:
+
+```typescript
+class Cline {
+  async handleError(action: string, error: Error) {
+    // 1. Check if task was abandoned
+    if (this.abandoned) return
+    
+    // 2. Format error message
+    const errorString = `Error ${action}: ${error.message}`
+    
+    // 3. Present error to user
+    await this.say("error", errorString)
+    
+    // 4. Add error to tool results
+    pushToolResult(formatResponse.toolError(errorString))
+    
+    // 5. Cleanup resources
+    await this.diffViewProvider.revertChanges()
+    await this.browserSession.closeBrowser()
+  }
+}
+```
+
+### API Request & Token Management
+
+The Cline class handles API requests with built-in retry, streaming, and token management:
+
+```typescript
+class Cline {
+  async *attemptApiRequest(previousApiReqIndex: number): ApiStream {
+    // 1. Wait for MCP servers to connect
+    await pWaitFor(() => this.providerRef.deref()?.mcpHub?.isConnecting !== true)
+
+    // 2. Manage context window
+    const previousRequest = this.clineMessages[previousApiReqIndex]
+    if (previousRequest?.text) {
+      const { tokensIn, tokensOut } = JSON.parse(previousRequest.text)
+      const totalTokens = (tokensIn || 0) + (tokensOut || 0)
+      
+      // Truncate conversation if approaching context limit
+      if (totalTokens >= maxAllowedSize) {
+        this.conversationHistoryDeletedRange = getNextTruncationRange(
+          this.apiConversationHistory,
+          this.conversationHistoryDeletedRange,
+          totalTokens / 2 > maxAllowedSize ? "quarter" : "half"
+        )
+      }
+    }
+
+    // 3. Handle streaming with automatic retry
+    try {
+      this.isWaitingForFirstChunk = true
+      const firstChunk = await iterator.next()
+      yield firstChunk.value
+      this.isWaitingForFirstChunk = false
+      
+      // Stream remaining chunks
+      yield* iterator
+    } catch (error) {
+      // 4. Error handling with retry
+      if (isOpenRouter && !this.didAutomaticallyRetryFailedApiRequest) {
+        await delay(1000)
+        this.didAutomaticallyRetryFailedApiRequest = true
+        yield* this.attemptApiRequest(previousApiReqIndex)
+        return
+      }
+      
+      // 5. Ask user to retry if automatic retry failed
+      const { response } = await this.ask(
+        "api_req_failed",
+        this.formatErrorWithStatusCode(error)
+      )
+      if (response === "yesButtonClicked") {
+        await this.say("api_req_retried")
+        yield* this.attemptApiRequest(previousApiReqIndex)
+        return
+      }
+    }
+  }
+}
+```
+
+Key features:
+
+1. **Context Window Management**
+   - Tracks token usage across requests
+   - Automatically truncates conversation when needed
+   - Preserves important context while freeing space
+   - Handles different model context sizes
+
+2. **Streaming Architecture**
+   - Real-time chunk processing
+   - Partial content handling
+   - Race condition prevention
+   - Error recovery during streaming
+
+3. **Error Handling**
+   - Automatic retry for transient failures
+   - User-prompted retry for persistent issues
+   - Detailed error reporting
+   - State cleanup on failure
+
+4. **Token Tracking**
+   - Per-request token counting
+   - Cumulative usage tracking
+   - Cost calculation
+   - Cache hit monitoring
+
+### Task State & Resumption
+
+The Cline class provides robust task state management and resumption capabilities:
+
+```typescript
+class Cline {
+  async resumeTaskFromHistory() {
+    // 1. Load saved state
+    this.clineMessages = await this.getSavedClineMessages()
+    this.apiConversationHistory = await this.getSavedApiConversationHistory()
+
+    // 2. Handle interrupted tool executions
+    const lastMessage = this.apiConversationHistory[this.apiConversationHistory.length - 1]
+    if (lastMessage.role === "assistant") {
+      const toolUseBlocks = content.filter(block => block.type === "tool_use")
+      if (toolUseBlocks.length > 0) {
+        // Add interrupted tool responses
+        const toolResponses = toolUseBlocks.map(block => ({
+          type: "tool_result",
+          tool_use_id: block.id,
+          content: "Task was interrupted before this tool call could be completed."
+        }))
+        modifiedOldUserContent = [...toolResponses]
+      }
+    }
+
+    // 3. Notify about interruption
+    const agoText = this.getTimeAgoText(lastMessage?.ts)
+    newUserContent.push({
+      type: "text",
+      text: `[TASK RESUMPTION] This task was interrupted ${agoText}. It may or may not be complete, so please reassess the task context.`
+    })
+
+    // 4. Resume task execution
+    await this.initiateTaskLoop(newUserContent, false)
+  }
+
+  private async saveTaskState() {
+    // Save conversation history
+    await this.saveApiConversationHistory()
+    await this.saveClineMessages()
+    
+    // Create checkpoint
+    const commitHash = await this.checkpointTracker?.commit()
+    
+    // Update task history
+    await this.providerRef.deref()?.updateTaskHistory({
+      id: this.taskId,
+      ts: lastMessage.ts,
+      task: taskMessage.text,
+      // ... other metadata
+    })
+  }
+}
+```
+
+Key aspects of task state management:
+
+1. **Task Persistence**
+   - Each task has a unique ID and dedicated storage directory
+   - Conversation history is saved after each message
+   - File changes are tracked through Git-based checkpoints
+   - Terminal output and browser state are preserved
+
+2. **State Recovery**
+   - Tasks can be resumed from any point
+   - Interrupted tool executions are handled gracefully
+   - File changes can be restored from checkpoints
+   - Context is preserved across VSCode sessions
+
+3. **Workspace Synchronization**
+   - File changes are tracked through Git
+   - Checkpoints are created after tool executions
+   - State can be restored to any checkpoint
+   - Changes can be compared between checkpoints
+
+4. **Error Recovery**
+   - Failed API requests can be retried
+   - Interrupted tool executions are marked
+   - Resources are cleaned up properly
+   - User is notified of state changes
+
+## Data Flow & State Management
+
+### Core Extension Role
+
+The core extension (ClineProvider) acts as the single source of truth for all persistent state. It:
+- Manages VSCode global state and secrets storage
+- Coordinates state updates between components
+- Ensures state consistency across webview reloads
+- Handles task-specific state persistence
+- Manages checkpoint creation and restoration
+
+### Terminal Management
+
+The Cline class manages terminal instances and command execution:
+
+```typescript
+class Cline {
+  async executeCommandTool(command: string): Promise<[boolean, ToolResponse]> {
+    // 1. Get or create terminal
+    const terminalInfo = await this.terminalManager.getOrCreateTerminal(cwd)
+    terminalInfo.terminal.show()
+
+    // 2. Execute command with output streaming
+    const process = this.terminalManager.runCommand(terminalInfo, command)
+    
+    // 3. Handle real-time output
+    let result = ""
+    process.on("line", (line) => {
+      result += line + "\n"
+      if (!didContinue) {
+        sendCommandOutput(line)
+      } else {
+        this.say("command_output", line)
+      }
+    })
+
+    // 4. Wait for completion or user feedback
+    let completed = false
+    process.once("completed", () => {
+      completed = true
+    })
+
+    await process
+
+    // 5. Return result
+    if (completed) {
+      return [false, `Command executed.\n${result}`]
+    } else {
+      return [
+        false,
+        `Command is still running in the user's terminal.\n${result}\n\nYou will be updated on the terminal status and new output in the future.`
+      ]
+    }
+  }
+}
+```
+
+Key features:
+1. **Terminal Instance Management**
+   - Multiple terminal support
+   - Terminal state tracking (busy/inactive)
+   - Process cooldown monitoring
+   - Output history per terminal
+
+2. **Command Execution**
+   - Real-time output streaming
+   - User feedback handling
+   - Process state monitoring
+   - Error recovery
+
+### Browser Session Management
+
+The Cline class handles browser automation through Puppeteer:
+
+```typescript
+class Cline {
+  async executeBrowserAction(action: BrowserAction): Promise<BrowserActionResult> {
+    switch (action) {
+      case "launch":
+        // 1. Launch browser with fixed resolution
+        await this.browserSession.launchBrowser()
+        return await this.browserSession.navigateToUrl(url)
+
+      case "click":
+        // 2. Handle click actions with coordinates
+        return await this.browserSession.click(coordinate)
+
+      case "type":
+        // 3. Handle keyboard input
+        return await this.browserSession.type(text)
+
+      case "close":
+        // 4. Clean up resources
+        return await this.browserSession.closeBrowser()
+    }
+  }
+}
+```
+
+Key aspects:
+1. **Browser Control**
+   - Fixed 900x600 resolution window
+   - Single instance per task lifecycle
+   - Automatic cleanup on task completion
+   - Console log capture
+
+2. **Interaction Handling**
+   - Coordinate-based clicking
+   - Keyboard input simulation
+   - Screenshot capture
+   - Error recovery
+
+## Conclusion
+
+This guide provides a comprehensive overview of the Cline extension architecture, with special focus on state management, data persistence, and code organization. Following these patterns ensures robust feature implementation with proper state handling across the extension's components.
+
+Remember:
+- Always persist important state in the extension
+- The core extension exists in the src/ folder
+- Use proper typing for all state and messages
+- Handle errors and edge cases
+- Test state persistence across webview reloads
+- Follow the established patterns for consistency
+- Place new code in appropriate directories
+- Maintain clear separation of concerns
+- Install dependencies in correct package.json
+
+## Contributing
+
+Contributions to the Cline extension are welcome! Please follow these guidelines:
+
+When adding new tools or API providers, follow the existing patterns in the `src/integrations/` and `src/api/providers/` directories, respectively. Ensure that your code is well-documented and includes appropriate error handling.
+
+The `.clineignore` file allows users to specify files and directories that Cline should not access. When implementing new features, respect the `.clineignore` rules and ensure that your code does not attempt to read or modify ignored files.

.github/dependabot.yml

@@ -28,10 +28,7 @@ updates:
               patterns:
                   - "*"
       ignore:
-          # Ignore CRA and related packages that often have false positives
-          - dependency-name: "react-scripts"
           - dependency-name: "@testing-library/*"
-          - dependency-name: "web-vitals"
           - dependency-name: "*"
             update-types:
                 - "version-update:semver-major"

.gitignore

@@ -7,4 +7,6 @@ tmp
 
 .DS_Store
 
-pnpm-lock.yaml
+pnpm-lock.yaml
+
+.clineignore

.vscode/tasks.json

@@ -5,7 +5,7 @@
 	"tasks": [
 		{
 			"label": "watch",
-			"dependsOn": ["npm: build:webview", "npm: watch:tsc", "npm: watch:esbuild"],
+			"dependsOn": ["npm: build:webview", "npm: dev:webview", "npm: watch:tsc", "npm: watch:esbuild"],
 			"presentation": {
 				"reveal": "never"
 			},
@@ -23,7 +23,42 @@
 			"label": "npm: build:webview",
 			"presentation": {
 				"group": "watch",
-				"reveal": "never"
+				"reveal": "never",
+				"close": true
+			},
+			"options": {
+				"env": {
+					"IS_DEV": "true"
+				}
+			}
+		},
+		{
+			"type": "npm",
+			"script": "dev:webview",
+			"group": "build",
+			"problemMatcher": [
+				{
+					"pattern": [
+						{
+							"regexp": ".",
+							"file": 1,
+							"location": 2,
+							"message": 3
+						}
+					],
+					"background": {
+						"activeOnStart": true,
+						"beginsPattern": ".",
+						"endsPattern": "."
+					}
+				}
+			],
+			"isBackground": true,
+			"label": "npm: dev:webview",
+			"presentation": {
+				"group": "watch",
+				"reveal": "never",
+				"close": true
 			},
 			"options": {
 				"env": {
@@ -40,7 +75,8 @@
 			"label": "npm: watch:esbuild",
 			"presentation": {
 				"group": "watch",
-				"reveal": "never"
+				"reveal": "never",
+				"close": true
 			}
 		},
 		{
@@ -52,7 +88,8 @@
 			"label": "npm: watch:tsc",
 			"presentation": {
 				"group": "watch",
-				"reveal": "never"
+				"reveal": "never",
+				"close": true
 			}
 		},
 		{
@@ -70,6 +107,19 @@
 			"label": "tasks: watch-tests",
 			"dependsOn": ["npm: watch", "npm: watch-tests"],
 			"problemMatcher": []
+		},
+		{
+			"label": "stop",
+			"command": "echo ${input:terminate}",
+			"type": "shell"
+		}
+	],
+	"inputs": [
+		{
+			"id": "terminate",
+			"type": "command",
+			"command": "workbench.action.tasks.terminate",
+			"args": "terminateAll"
 		}
 	]
 }

.vscodeignore

@@ -23,7 +23,6 @@ demo.gif
 # Ignore all webview-ui files except the build directory (https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/frameworks/hello-world-react-cra/.vscodeignore)
 webview-ui/src/**
 webview-ui/public/**
-webview-ui/scripts/**
 webview-ui/index.html
 webview-ui/README.md
 webview-ui/package.json

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [3.5.0]
+
+-   Add 'Enable extended thinking' option for Claude 3.7 Sonnet, with ability to set different budgets for Plan and Act modes
+-   Add support for rich MCP responses with automatic image previews, website thumbnails, and WolframAlpha visualizations
+-   Add language preference option in Advanced Settings
+-   Add xAI Provider Integration with support for all Grok models (thanks @andrewmonostate!)
+-   Fix issue with Linux XDG pointing to incorrect path for Document folder (thanks @jonatkinson!)
+
+## [3.4.10]
+
+-   Add support for GPT-4.5 preview model
+
+## [3.4.9]
+
+-   Add toggle to let users opt-in to anonymous telemetry and error reporting
+
 ## [3.4.6]
 
 -   Add support for Claude 3.7 Sonnet

README.md

@@ -32,7 +32,7 @@ English | <a href="https://github.com/cline/cline/blob/main/locales/es/README.md
 
 Meet Cline, an AI assistant that can use your **CLI** a**N**d **E**ditor.
 
-Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. Cline can even use the Model Context Protocol (MCP) to create new tools and extend his own capabilities. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
+Thanks to [Claude 3.7 Sonnet's agentic coding capabilities](https://www.anthropic.com/claude/sonnet), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. Cline can even use the Model Context Protocol (MCP) to create new tools and extend his own capabilities. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
 
 1. Enter your task and add images to convert mockups into functional apps or fix bugs with screenshots.
 2. Cline starts by analyzing your file structure & source code ASTs, running regex searches, and reading relevant files to get up to speed in existing projects. By carefully managing what information is added to context, Cline can provide valuable assistance even for large, complex projects without overwhelming the context window.

docs/PRIVACY.md

@@ -42,8 +42,8 @@ Cline functions solely as a client-side VS Code extension that facilitates commu
 1. **Local-Only Processing**:
 
     - All operations happen on your local machine
-    - No central servers or data collection
-    - No telemetry or usage statistics gathered
+    - No central servers or data collection by default
+    - Anonymous telemetry and usage statistics are only collected if you explicitly opt in
     - No account creation required
 
 2. **API Key Security**:
@@ -73,7 +73,8 @@ When you request assistance:
 
 -   Error logs are processed locally
 -   No automatic error reporting to Cline
--   You control what information to include when reporting issues
+    - Optional anonymous telemetry and error reporting via PostHog if you opt in
+-   You control what information to include when manually reporting issues
 
 ## Children's Privacy
 
@@ -90,6 +91,22 @@ We will post any changes to this policy on our GitHub repository. Significant ch
 -   You can inspect exactly what data is being sent to AI providers
 -   Enterprise users can implement additional access controls through VS Code
 
+## Telemetry & Usage Statistics
+
+If you choose to opt in to anonymous telemetry:
+
+-   Basic usage statistics and error reports are collected via PostHog
+-   A stable, anonymous identifier (VS Code's `machineId`) is used to understand unique usage patterns
+    - This identifier is not linked to any personal information
+    - It helps us understand how features are used across sessions
+    - It cannot be used to identify you personally
+-   All data is anonymized and cannot be linked to individual users
+-   No code content or sensitive information is ever included
+-   You can opt out at any time through:
+    - VS Code Settings > Cline > Enable Telemetry
+    - VS Code Settings > Telemetry > Telemetry Level (setting this to anything other than "all" will disable Cline's telemetry)
+-   Collected data helps us improve the extension's functionality and stability
+
 ## Contact Us
 
 For privacy-related questions or concerns:

docs/architecture/README.md

@@ -0,0 +1,43 @@
+# Cline Extension Architecture
+
+This directory contains architectural documentation for the Cline VSCode extension.
+
+## Extension Architecture Diagram
+
+The [extension-architecture.mmd](./extension-architecture.mmd) file contains a Mermaid diagram showing the high-level architecture of the Cline extension. The diagram illustrates:
+
+1. **Core Extension**
+   - Extension entry point and main classes
+   - State management through VSCode's global state and secrets storage
+   - Core business logic in the Cline class
+
+2. **Webview UI**
+   - React-based user interface
+   - State management through ExtensionStateContext
+   - Component hierarchy
+
+3. **Storage**
+   - Task-specific storage for history and state
+   - Git-based checkpoint system for file changes
+
+4. **Data Flow**
+   - Core extension data flow between components
+   - Webview UI data flow
+   - Bidirectional communication between core and webview
+
+## Viewing the Diagram
+
+To view the diagram:
+1. Install a Mermaid diagram viewer extension in VSCode
+2. Open extension-architecture.mmd
+3. Use the extension's preview feature to render the diagram
+
+You can also view the diagram on GitHub, which has built-in Mermaid rendering support.
+
+## Color Scheme
+
+The diagram uses a high-contrast color scheme for better visibility:
+- Pink (#ff0066): Global state and secrets storage components
+- Blue (#0066ff): Extension state context
+- Green (#00cc66): Cline provider
+- All components use white text for maximum readability

docs/architecture/extension-architecture.mmd

@@ -0,0 +1,41 @@
+graph TB
+    subgraph VSCode Extension Host
+        subgraph Core Extension
+            ExtensionEntry[Extension Entry<br/>src/extension.ts]
+            ClineProvider[ClineProvider<br/>src/core/webview/ClineProvider.ts]
+            ClineClass[Cline Class<br/>src/core/Cline.ts]
+            GlobalState[VSCode Global State]
+            SecretsStorage[VSCode Secrets Storage]
+        end
+
+        subgraph Webview UI
+            WebviewApp[React App<br/>webview-ui/src/App.tsx]
+            ExtStateContext[ExtensionStateContext<br/>webview-ui/src/context/ExtensionStateContext.tsx]
+            ReactComponents[React Components]
+        end
+
+        subgraph Storage
+            TaskStorage[Task Storage<br/>Per-Task Files & History]
+            CheckpointSystem[Git-based Checkpoints]
+        end
+    end
+
+    %% Core Extension Data Flow
+    ExtensionEntry --> ClineProvider
+    ClineProvider --> ClineClass
+    ClineClass --> GlobalState
+    ClineClass --> SecretsStorage
+    ClineClass --> TaskStorage
+    ClineClass --> CheckpointSystem
+
+    %% Webview Data Flow
+    WebviewApp --> ExtStateContext
+    ExtStateContext --> ReactComponents
+
+    %% Bidirectional Communication
+    ClineProvider <-->|postMessage| ExtStateContext
+
+    style GlobalState fill:#ff0066,stroke:#333,stroke-width:2px,color:#ffffff
+    style SecretsStorage fill:#ff0066,stroke:#333,stroke-width:2px,color:#ffffff
+    style ExtStateContext fill:#0066ff,stroke:#333,stroke-width:2px,color:#ffffff
+    style ClineProvider fill:#00cc66,stroke:#333,stroke-width:2px,color:#ffffff

locales/ar-sa/README.md

@@ -32,7 +32,7 @@
 
 التقى Cline، مساعد الذكاء الاصطناعي الذي يمكنه استخدام **سطر الأوامر** و **محرر النصوص** الخاص بك.
 
-بفضل [قدرات Claude 3.5 Sonnet على التعليمات البرمجية الوكيلة](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf)، يمكن لـ Cline التعامل مع مهام تطوير البرامج المعقدة خطوة بخطوة. مع الأدوات التي تسمح له بإنشاء وتعديل الملفات، واستكشاف المشاريع الكبيرة، واستخدام المتصفح، وتنفيذ أوامر الطرفية (بعد منحك الإذن)، يمكنه مساعدتك بطرق تتجاوز إكمال الكود أو الدعم الفني. يمكن لـ Cline أيضًا استخدام بروتوكول سياق النموذج (MCP) لإنشاء أدوات جديدة وتوسيع قدراته الخاصة. في حين تعمل النصوص البرمجية الآلية المستقلة تقليديًا في بيئات محاصرة، توفر هذه الإضافة واجهة رسومية لموافقة المستخدم على كل تغيير في الملف وأمر طرفية، مما يوفر طريقة آمنة وسهلة الاستخدام لاستكشاف إمكانات الذكاء الاصطناعي الوكيل.
+بفضل [قدرات Claude 3.7 Sonnet على التعليمات البرمجية الوكيلة](https://www.anthropic.com/claude/sonnet)، يمكن لـ Cline التعامل مع مهام تطوير البرامج المعقدة خطوة بخطوة. مع الأدوات التي تسمح له بإنشاء وتعديل الملفات، واستكشاف المشاريع الكبيرة، واستخدام المتصفح، وتنفيذ أوامر الطرفية (بعد منحك الإذن)، يمكنه مساعدتك بطرق تتجاوز إكمال الكود أو الدعم الفني. يمكن لـ Cline أيضًا استخدام بروتوكول سياق النموذج (MCP) لإنشاء أدوات جديدة وتوسيع قدراته الخاصة. في حين تعمل النصوص البرمجية الآلية المستقلة تقليديًا في بيئات محاصرة، توفر هذه الإضافة واجهة رسومية لموافقة المستخدم على كل تغيير في الملف وأمر طرفية، مما يوفر طريقة آمنة وسهلة الاستخدام لاستكشاف إمكانات الذكاء الاصطناعي الوكيل.
 
 1. أدخل مهمتك وأضف الصور لتحويل المحاكاة إلى تطبيقات وظيفية أو إصلاح الأخطاء مع لقطات الشاشة.
 2. يبدأ Cline بتحليل هيكل الملفات الخاصة بك وشجرة التعريف المصدرية، وإجراء عمليات بحث regex، وقراءة الملفات ذات الصلة للاطلاع على المشاريع الحالية. من خلال إدارة المعلومات التي يتم إضافتها إلى السياق بعناية، يمكن لـ Cline تقديم مساعدة قيمة حتى للمشاريع الكبيرة والمعقدة دون إرهاق نافذة السياق.

locales/de/README.md

@@ -28,7 +28,7 @@
 
 Lernen Sie Cline kennen, einen KI-Assistenten, der Ihre **CLI** u**N**d **E**ditor nutzen kann.
 
-Dank der [agentischen Codierungsfähigkeiten von Claude 3.5 Sonnet](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) kann Cline komplexe Softwareentwicklungsaufgaben Schritt für Schritt bewältigen. Mit Werkzeugen, die ihm das Erstellen und Bearbeiten von Dateien, das Erkunden großer Projekte, die Nutzung des Browsers und das Ausführen von Terminalbefehlen (nach Ihrer Genehmigung) ermöglichen, kann er Ihnen auf eine Weise helfen, die über die Codevervollständigung oder technischen Support hinausgeht. Cline kann sogar das Model Context Protocol (MCP) verwenden, um neue Werkzeuge zu erstellen und seine eigenen Fähigkeiten zu erweitern. Während autonome KI-Skripte traditionell in sandboxed Umgebungen laufen, bietet diese Erweiterung eine Mensch-in-der-Schleife-GUI, um jede Dateiänderung und jeden Terminalbefehl zu genehmigen, was eine sichere und zugängliche Möglichkeit bietet, das Potenzial agentischer KI zu erkunden.
+Dank der [agentischen Codierungsfähigkeiten von Claude 3.7 Sonnet](https://www.anthropic.com/claude/sonnet) kann Cline komplexe Softwareentwicklungsaufgaben Schritt für Schritt bewältigen. Mit Werkzeugen, die ihm das Erstellen und Bearbeiten von Dateien, das Erkunden großer Projekte, die Nutzung des Browsers und das Ausführen von Terminalbefehlen (nach Ihrer Genehmigung) ermöglichen, kann er Ihnen auf eine Weise helfen, die über die Codevervollständigung oder technischen Support hinausgeht. Cline kann sogar das Model Context Protocol (MCP) verwenden, um neue Werkzeuge zu erstellen und seine eigenen Fähigkeiten zu erweitern. Während autonome KI-Skripte traditionell in sandboxed Umgebungen laufen, bietet diese Erweiterung eine Mensch-in-der-Schleife-GUI, um jede Dateiänderung und jeden Terminalbefehl zu genehmigen, was eine sichere und zugängliche Möglichkeit bietet, das Potenzial agentischer KI zu erkunden.
 
 1. Geben Sie Ihre Aufgabe ein und fügen Sie Bilder hinzu, um Mockups in funktionale Apps zu konvertieren oder Fehler mit Screenshots zu beheben.
 2. Cline beginnt mit der Analyse Ihrer Dateistruktur und Quellcode-ASTs, führt Regex-Suchen durch und liest relevante Dateien, um sich in bestehenden Projekten zurechtzufinden. Durch sorgfältiges Management der hinzugefügten Informationen kann Cline wertvolle Unterstützung auch bei großen, komplexen Projekten bieten, ohne das Kontextfenster zu überladen.

locales/es/README.md

@@ -28,7 +28,7 @@
 
 Conozca a Cline, un asistente de IA que puede usar su **CLI** y **E**ditor.
 
-Gracias a las [habilidades de codificación agencial de Claude 3.5 Sonnet](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline puede abordar tareas complejas de desarrollo de software paso a paso. Con herramientas que le permiten crear y editar archivos, explorar grandes proyectos, usar el navegador y ejecutar comandos de terminal (con su aprobación), puede ayudarle de una manera que va más allá de la autocompletación de código o el soporte técnico. Cline incluso puede usar el Model Context Protocol (MCP) para crear nuevas herramientas y expandir sus propias capacidades. Mientras que los scripts de IA autónomos tradicionalmente se ejecutan en entornos aislados, esta extensión ofrece una GUI con un humano en el bucle para aprobar cada cambio de archivo y comando de terminal, proporcionando una forma segura y accesible de explorar el potencial de la IA agencial.
+Gracias a las [habilidades de codificación agencial de Claude 3.7 Sonnet](https://www.anthropic.com/claude/sonnet), Cline puede abordar tareas complejas de desarrollo de software paso a paso. Con herramientas que le permiten crear y editar archivos, explorar grandes proyectos, usar el navegador y ejecutar comandos de terminal (con su aprobación), puede ayudarle de una manera que va más allá de la autocompletación de código o el soporte técnico. Cline incluso puede usar el Model Context Protocol (MCP) para crear nuevas herramientas y expandir sus propias capacidades. Mientras que los scripts de IA autónomos tradicionalmente se ejecutan en entornos aislados, esta extensión ofrece una GUI con un humano en el bucle para aprobar cada cambio de archivo y comando de terminal, proporcionando una forma segura y accesible de explorar el potencial de la IA agencial.
 
 1. Ingrese su tarea y agregue imágenes para convertir maquetas en aplicaciones funcionales o solucionar errores con capturas de pantalla.
 2. Cline comenzará analizando su estructura de archivos y ASTs de código fuente, realizando búsquedas Regex y leyendo archivos relevantes para orientarse en proyectos existentes. Al gestionar cuidadosamente la información agregada, Cline puede proporcionar asistencia valiosa incluso en proyectos grandes y complejos sin sobrecargar la ventana de contexto.

locales/ja/README.md

@@ -28,7 +28,7 @@
 
 Clineは、**CLI**と**エディター**を使用できるAIアシスタントです。
 
-[Claude 3.5 Sonnetのエージェント的コーディング機能](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf)のおかげで、Clineは複雑なソフトウェア開発タスクをステップバイステップで処理できます。ファイルの作成と編集、大規模プロジェクトの探索、ブラウザの使用、ターミナルコマンドの実行（許可後）などのツールを使用して、コード補完や技術サポートを超えた支援を提供します。Clineは、Model Context Protocol (MCP)を使用して新しいツールを作成し、自身の機能を拡張することもできます。自律的なAIスクリプトは通常サンドボックス環境で実行されますが、この拡張機能はファイル変更やターミナルコマンドを承認するための人間インターフェースを提供し、エージェント的AIの可能性を安全かつアクセスしやすい方法で探求できます。
+[Claude 3.7 Sonnetのエージェント的コーディング機能](https://www.anthropic.com/claude/sonnet)のおかげで、Clineは複雑なソフトウェア開発タスクをステップバイステップで処理できます。ファイルの作成と編集、大規模プロジェクトの探索、ブラウザの使用、ターミナルコマンドの実行（許可後）などのツールを使用して、コード補完や技術サポートを超えた支援を提供します。Clineは、Model Context Protocol (MCP)を使用して新しいツールを作成し、自身の機能を拡張することもできます。自律的なAIスクリプトは通常サンドボックス環境で実行されますが、この拡張機能はファイル変更やターミナルコマンドを承認するための人間インターフェースを提供し、エージェント的AIの可能性を安全かつアクセスしやすい方法で探求できます。
 
 1. タスクを入力し、モックアップを機能するアプリに変換したり、スクリーンショットでバグを修正したりします。
 2. Clineは、ファイル構造とソースコードASTの分析、正規表現検索の実行、関連ファイルの読み取りから始め、既存プロジェクトに精通します。コンテキストに追加される情報を慎重に管理することで、大規模で複雑なプロジェクトでもコンテキストウィンドウを圧倒することなく貴重な支援を提供できます。

locales/pt-BR/README.md

@@ -28,7 +28,7 @@
 
 Conheça o Cline: um assistente de IA que pode usar seu **CLI** e **Editor**.
 
-Graças às [habilidades avançadas do Claude 3.5 Sonnet](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), o Cline pode lidar com tarefas complexas de desenvolvimento de software passo a passo. Com ferramentas que permitem criar e editar arquivos, explorar grandes projetos, usar o navegador e executar comandos no terminal (com sua aprovação), ele pode ajudar você de maneiras que vão além da inclusão de código ou suporte técnico. O Cline pode é capaz inclusive de usar o Model Context Protocol (MCP) para criar novas ferramentas e expandir seus próprios recursos. Embora os scripts de IA autônomas tradicionalmente sejam executados em ambientes isolados, esta extensão oferece uma GUI com um humano no circuito para aprovar cada alteração de arquivo e comando de terminal, fornecendo uma maneira segura e acessível de explorar todo o potencial da IA.
+Graças às [habilidades avançadas do Claude 3.7 Sonnet](https://www.anthropic.com/claude/sonnet), o Cline pode lidar com tarefas complexas de desenvolvimento de software passo a passo. Com ferramentas que permitem criar e editar arquivos, explorar grandes projetos, usar o navegador e executar comandos no terminal (com sua aprovação), ele pode ajudar você de maneiras que vão além da inclusão de código ou suporte técnico. O Cline pode é capaz inclusive de usar o Model Context Protocol (MCP) para criar novas ferramentas e expandir seus próprios recursos. Embora os scripts de IA autônomas tradicionalmente sejam executados em ambientes isolados, esta extensão oferece uma GUI com um humano no circuito para aprovar cada alteração de arquivo e comando de terminal, fornecendo uma maneira segura e acessível de explorar todo o potencial da IA.
 
 1. Insira sua tarefa e adicione imagens para transformar mockups em aplicativos funcionais ou corrigir erros através de capturas de tela.
 

locales/zh-cn/README.md

@@ -28,7 +28,7 @@
 
 认识 Cline，一个可以使用你的 **CLI** 和 **编辑器** 的 AI 助手。
 
-感谢 [Claude 3.5 Sonnet 的代理编码能力](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf)，Cline 可以一步步处理复杂的软件开发任务。通过允许他创建和编辑文件、探索大型项目、使用浏览器和执行终端命令（在你授予权限后），他可以提供超越代码完成或技术支持的帮助。Cline 甚至可以使用 Model Context Protocol (MCP) 创建新工具并扩展自己的能力。虽然自主 AI 脚本传统上在沙盒环境中运行，但此扩展提供了一个人机交互的 GUI 来批准每个文件更改和终端命令，提供了一种安全且可访问的方式来探索代理 AI 的潜力。
+感谢 [Claude 3.7 Sonnet 的代理编码能力](https://www.anthropic.com/claude/sonnet)，Cline 可以一步步处理复杂的软件开发任务。通过允许他创建和编辑文件、探索大型项目、使用浏览器和执行终端命令（在你授予权限后），他可以提供超越代码完成或技术支持的帮助。Cline 甚至可以使用 Model Context Protocol (MCP) 创建新工具并扩展自己的能力。虽然自主 AI 脚本传统上在沙盒环境中运行，但此扩展提供了一个人机交互的 GUI 来批准每个文件更改和终端命令，提供了一种安全且可访问的方式来探索代理 AI 的潜力。
 
 1. 输入你的任务并添加图像，将模型转换为功能应用程序或通过截图修复错误。
 2. Cline 首先分析你的文件结构和源代码 AST，运行正则表达式搜索，并阅读相关文件以了解现有项目。通过仔细管理添加到上下文中的信息，Cline 即使在大型复杂项目中也能提供有价值的帮助，而不会使上下文窗口过载。

locales/zh-tw/README.md

@@ -28,7 +28,7 @@
 
 認識 Cline，一個可以使用你的 **CLI** 和 **編輯器** 的 AI 助手。
 
-感謝 [Claude 3.5 Sonnet 的代理編碼能力](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf)，Cline 可以一步步處理複雜的軟件開發任務。通過允許他創建和編輯文件、探索大型項目、使用瀏覽器和執行終端命令（在你授予權限後），他可以提供超越代碼完成或技術支持的幫助。Cline 甚至可以使用 Model Context Protocol (MCP) 創建新工具並擴展自己的能力。雖然自主 AI 腳本傳統上在沙盒環境中運行，但此擴展提供了一個人機交互的 GUI 來批准每個文件更改和終端命令，提供了一種安全且可訪問的方式來探索代理 AI 的潛力。
+感謝 [Claude 3.7 Sonnet 的代理編碼能力](https://www.anthropic.com/claude/sonnet)，Cline 可以一步步處理複雜的軟件開發任務。通過允許他創建和編輯文件、探索大型項目、使用瀏覽器和執行終端命令（在你授予權限後），他可以提供超越代碼完成或技術支持的幫助。Cline 甚至可以使用 Model Context Protocol (MCP) 創建新工具並擴展自己的能力。雖然自主 AI 腳本傳統上在沙盒環境中運行，但此擴展提供了一個人機交互的 GUI 來批准每個文件更改和終端命令，提供了一種安全且可訪問的方式來探索代理 AI 的潛力。
 
 1. 輸入你的任務並添加圖像，將模型轉換為功能應用程序或通過截圖修復錯誤。
 2. Cline 首先分析你的文件結構和源代碼 AST，運行正則表達式搜索，並閱讀相關文件以了解現有項目。通過仔細管理添加到上下文中的信息，Cline 即使在大型複雜項目中也能提供有價值的幫助，而不會使上下文窗口過載。

package-lock.json

@@ -1,17 +1,17 @@
 {
 	"name": "claude-dev",
-	"version": "3.4.6",
+	"version": "3.5.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "claude-dev",
-			"version": "3.4.6",
+			"version": "3.5.0",
 			"license": "Apache-2.0",
 			"dependencies": {
-				"@anthropic-ai/bedrock-sdk": "^0.10.2",
-				"@anthropic-ai/sdk": "^0.26.0",
-				"@anthropic-ai/vertex-sdk": "^0.4.1",
+				"@anthropic-ai/bedrock-sdk": "^0.12.4",
+				"@anthropic-ai/sdk": "^0.37.0",
+				"@anthropic-ai/vertex-sdk": "^0.6.4",
 				"@google/generative-ai": "^0.18.0",
 				"@mistralai/mistralai": "^1.5.0",
 				"@modelcontextprotocol/sdk": "^1.0.1",
@@ -36,10 +36,12 @@
 				"isbinaryfile": "^5.0.2",
 				"mammoth": "^1.8.0",
 				"monaco-vscode-textmate-theme-converter": "^0.1.7",
+				"open-graph-scraper": "^6.9.0",
 				"openai": "^4.83.0",
 				"os-name": "^6.0.0",
 				"p-wait-for": "^5.0.2",
 				"pdf-parse": "^1.1.1",
+				"posthog-node": "^4.8.1",
 				"puppeteer-chromium-resolver": "^23.0.0",
 				"puppeteer-core": "^23.4.0",
 				"serialize-error": "^11.0.3",
@@ -76,11 +78,12 @@
 			}
 		},
 		"node_modules/@anthropic-ai/bedrock-sdk": {
-			"version": "0.10.2",
-			"resolved": "https://registry.npmjs.org/@anthropic-ai/bedrock-sdk/-/bedrock-sdk-0.10.2.tgz",
-			"integrity": "sha512-sGmTzKJQHVwfXexe+yfzPU3rJmUMCygC+GNPkmMsPX/Jr+WKtJ0M71nGyHONr6vcHwUpUWA6o0MRH/oHaE54KA==",
+			"version": "0.12.4",
+			"resolved": "https://registry.npmjs.org/@anthropic-ai/bedrock-sdk/-/bedrock-sdk-0.12.4.tgz",
+			"integrity": "sha512-kraOgWWyVO/Wef3wYbpws77pCZubg/hCzXQ7RGrLRJsRpbTIT+ms+MigGu/0b1qn3o5WuIrumlT3Qtu3esHpzw==",
+			"license": "MIT",
 			"dependencies": {
-				"@anthropic-ai/sdk": "^0",
+				"@anthropic-ai/sdk": ">=0.36 <1",
 				"@aws-crypto/sha256-js": "^4.0.0",
 				"@aws-sdk/client-bedrock-runtime": "^3.423.0",
 				"@aws-sdk/credential-providers": "^3.341.0",
@@ -94,9 +97,10 @@
 			}
 		},
 		"node_modules/@anthropic-ai/sdk": {
-			"version": "0.26.0",
-			"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.26.0.tgz",
-			"integrity": "sha512-vNbZ2rnnMfk8Bf4OdeVy6GA4EXao8tGC0tLEoSAl1NZrip9oOxnEGUkXl3FsPQgeBM5hmpGE1tSLuu9HEVJiHg==",
+			"version": "0.37.0",
+			"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.37.0.tgz",
+			"integrity": "sha512-tHjX2YbkUBwEgg0JZU3EFSSAQPoK4qQR/NFYa8Vtzd5UAyXzZksCw2In69Rml4R/TyHPBfRYaLK35XiOe33pjw==",
+			"license": "MIT",
 			"dependencies": {
 				"@types/node": "^18.11.18",
 				"@types/node-fetch": "^2.6.4",
@@ -108,23 +112,48 @@
 			}
 		},
 		"node_modules/@anthropic-ai/sdk/node_modules/@types/node": {
-			"version": "18.19.39",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.39.tgz",
-			"integrity": "sha512-nPwTRDKUctxw3di5b4TfT3I0sWDiWoPQCZjXhvdkINntwr8lcoVCKsTgnXeRubKIlfnV+eN/HYk6Jb40tbcEAQ==",
+			"version": "18.19.78",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.78.tgz",
+			"integrity": "sha512-m1ilZCTwKLkk9rruBJXFeYN0Bc5SbjirwYX/Td3MqPfioYbgun3IvK/m8dQxMCnrPGZPg1kvXjp3SIekCN/ynw==",
 			"license": "MIT",
 			"dependencies": {
 				"undici-types": "~5.26.4"
 			}
 		},
 		"node_modules/@anthropic-ai/vertex-sdk": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/@anthropic-ai/vertex-sdk/-/vertex-sdk-0.4.1.tgz",
-			"integrity": "sha512-RT/2CWzqyAcJDZWxnNc1mXa7XiiHDaQ9aknfW4mIDw6zE+Zj/R2vCKpTb0dIwrmHYNOyKQNaD7Z1ynDt9oXFWA==",
+			"version": "0.6.4",
+			"resolved": "https://registry.npmjs.org/@anthropic-ai/vertex-sdk/-/vertex-sdk-0.6.4.tgz",
+			"integrity": "sha512-rMBlO2jF53TfMRmsQMm1bPO2JRUh4jYddjq/OJLj8DSAkfbCrNWhc0yhDed6oLYJg5s+VpDbvlPzMggqHhTfMw==",
+			"license": "MIT",
 			"dependencies": {
-				"@anthropic-ai/sdk": ">=0.14 <1",
+				"@anthropic-ai/sdk": ">=0.35 <1",
 				"google-auth-library": "^9.4.2"
 			}
 		},
+		"node_modules/@anthropic-ai/vertex-sdk/node_modules/@anthropic-ai/sdk": {
+			"version": "0.38.0",
+			"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.38.0.tgz",
+			"integrity": "sha512-ZUYjadEEeb1wwKd9MEM+plSfl7zQjYixhjHRtyPsjO7MtzRmbZvBb1n1ofo2kHwb0aUiIdb3aAEbAwS9Bcbm/A==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "^18.11.18",
+				"@types/node-fetch": "^2.6.4",
+				"abort-controller": "^3.0.0",
+				"agentkeepalive": "^4.2.1",
+				"form-data-encoder": "1.7.2",
+				"formdata-node": "^4.3.2",
+				"node-fetch": "^2.6.7"
+			}
+		},
+		"node_modules/@anthropic-ai/vertex-sdk/node_modules/@types/node": {
+			"version": "18.19.76",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.76.tgz",
+			"integrity": "sha512-yvR7Q9LdPz2vGpmpJX5LolrgRdWvB67MJKDPSgIIzpFbaf9a1j/f5DnLp5VDyHGMR0QZHlTr1afsD87QCXFHKw==",
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~5.26.4"
+			}
+		},
 		"node_modules/@aws-crypto/crc32": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-5.2.0.tgz",
@@ -11047,6 +11076,27 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/open-graph-scraper": {
+			"version": "6.9.0",
+			"resolved": "https://registry.npmjs.org/open-graph-scraper/-/open-graph-scraper-6.9.0.tgz",
+			"integrity": "sha512-1KoV5v6GT0/MqlryrVGQROhEAD4u8wC3VjYOxsnhj3mWeGJ6N6nF/rbrcZREFr+kiYm9I5LMrzdK9t9hBMbL2Q==",
+			"license": "MIT",
+			"dependencies": {
+				"chardet": "^2.0.0",
+				"cheerio": "^1.0.0-rc.12",
+				"iconv-lite": "^0.6.3",
+				"undici": "^6.21.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/open-graph-scraper/node_modules/chardet": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.0.tgz",
+			"integrity": "sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==",
+			"license": "MIT"
+		},
 		"node_modules/openai": {
 			"version": "4.83.0",
 			"resolved": "https://registry.npmjs.org/openai/-/openai-4.83.0.tgz",
@@ -11606,6 +11656,18 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/posthog-node": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-4.8.1.tgz",
+			"integrity": "sha512-ApMEC1+DbctP/88+VhaCl8SRKpIoReibMf7Mb3rxw3yMthr1rKaM4opbHdZJ0buLhwS5zX8B2ckqLjpwpSjRPg==",
+			"license": "MIT",
+			"dependencies": {
+				"axios": "^1.7.4"
+			},
+			"engines": {
+				"node": ">=15.0.0"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

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.4.8",
+	"version": "3.5.0",
 	"icon": "assets/icons/icon.png",
 	"galleryBanner": {
 		"color": "#617A91",
@@ -182,6 +182,31 @@
 					"default": null,
 					"description": "Path to Chrome executable for browser use functionality. If not set, the extension will attempt to find or download it automatically."
 				},
+				"cline.preferredLanguage": {
+					"type": "string",
+					"enum": [
+						"English",
+						"Arabic - العربية",
+						"Portuguese - Português (Brasil)",
+						"Czech - Čeština",
+						"French - Français",
+						"German - Deutsch",
+						"Hindi - हिन्दी",
+						"Hungarian - Magyar",
+						"Italian - Italiano",
+						"Japanese - 日本語",
+						"Korean - 한국어",
+						"Polish - Polski",
+						"Portuguese - Português (Portugal)",
+						"Russian - Русский",
+						"Simplified Chinese - 简体中文",
+						"Spanish - Español",
+						"Traditional Chinese - 繁體中文",
+						"Turkish - Türkçe"
+					],
+					"default": "English",
+					"description": "The language that Cline should use for communication."
+				},
 				"cline.mcpMarketplace.enabled": {
 					"type": "boolean",
 					"default": true,
@@ -206,7 +231,7 @@
 		"format:fix": "prettier . --write",
 		"test": "vscode-test",
 		"install:all": "npm install && cd webview-ui && npm install",
-		"start:webview": "cd webview-ui && npm run start",
+		"dev:webview": "cd webview-ui && npm run dev",
 		"build:webview": "cd webview-ui && npm run build",
 		"test:webview": "cd webview-ui && npm run test",
 		"publish:marketplace": "vsce publish && ovsx publish",
@@ -237,9 +262,9 @@
 		"typescript": "^5.4.5"
 	},
 	"dependencies": {
-		"@anthropic-ai/bedrock-sdk": "^0.10.2",
-		"@anthropic-ai/sdk": "^0.26.0",
-		"@anthropic-ai/vertex-sdk": "^0.4.1",
+		"@anthropic-ai/bedrock-sdk": "^0.12.4",
+		"@anthropic-ai/sdk": "^0.37.0",
+		"@anthropic-ai/vertex-sdk": "^0.6.4",
 		"@google/generative-ai": "^0.18.0",
 		"@mistralai/mistralai": "^1.5.0",
 		"@modelcontextprotocol/sdk": "^1.0.1",
@@ -264,10 +289,12 @@
 		"isbinaryfile": "^5.0.2",
 		"mammoth": "^1.8.0",
 		"monaco-vscode-textmate-theme-converter": "^0.1.7",
+		"open-graph-scraper": "^6.9.0",
 		"openai": "^4.83.0",
 		"os-name": "^6.0.0",
 		"p-wait-for": "^5.0.2",
 		"pdf-parse": "^1.1.1",
+		"posthog-node": "^4.8.1",
 		"puppeteer-chromium-resolver": "^23.0.0",
 		"puppeteer-core": "^23.4.0",
 		"serialize-error": "^11.0.3",

src/api/index.ts

@@ -17,6 +17,7 @@ import { QwenHandler } from "./providers/qwen"
 import { MistralHandler } from "./providers/mistral"
 import { VsCodeLmHandler } from "./providers/vscode-lm"
 import { LiteLlmHandler } from "./providers/litellm"
+import { XAIHandler } from "./providers/xai"
 
 export interface ApiHandler {
 	createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream
@@ -62,6 +63,8 @@ export function buildApiHandler(configuration: ApiConfiguration): ApiHandler {
 			return new VsCodeLmHandler(options)
 		case "litellm":
 			return new LiteLlmHandler(options)
+		case "xai":
+			return new XAIHandler(options)
 		default:
 			return new AnthropicHandler(options)
 	}

src/api/providers/anthropic.ts

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

src/api/providers/bedrock.ts

@@ -14,6 +14,8 @@ export class AwsBedrockHandler implements ApiHandler {
 	}
 
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+		let budget_tokens = this.options.thinkingBudgetTokens || 0
+		const reasoningOn = budget_tokens !== 0 ? true : false
 		// cross region inference requires prefixing the model id with the region
 		let modelId = await this.getModelId()
 
@@ -24,7 +26,8 @@ export class AwsBedrockHandler implements ApiHandler {
 		const stream = await client.messages.create({
 			model: modelId,
 			max_tokens: this.getModel().info.maxTokens || 8192,
-			temperature: 0,
+			thinking: reasoningOn ? { type: "enabled", budget_tokens: budget_tokens } : undefined,
+			temperature: reasoningOn ? undefined : 0,
 			system: systemPrompt,
 			messages,
 			stream: true,

src/api/providers/deepseek.ts

@@ -3,6 +3,7 @@ import OpenAI from "openai"
 import { withRetry } from "../retry"
 import { ApiHandler } from "../"
 import { ApiHandlerOptions, DeepSeekModelId, ModelInfo, deepSeekDefaultModelId, deepSeekModels } from "../../shared/api"
+import { calculateApiCostOpenAI } from "../../utils/cost"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream } from "../transform/stream"
 import { convertToR1Format } from "../transform/r1-format"
@@ -19,6 +20,37 @@ export class DeepSeekHandler implements ApiHandler {
 		})
 	}
 
+	private async *yieldUsage(info: ModelInfo, usage: OpenAI.Completions.CompletionUsage | undefined): ApiStream {
+		// Deepseek reports total input AND cache reads/writes,
+		// see context caching: https://api-docs.deepseek.com/guides/kv_cache)
+		// where the input tokens is the sum of the cache hits/misses, just like OpenAI.
+		// This affects:
+		// 1) context management truncation algorithm, and
+		// 2) cost calculation
+
+		// Deepseek usage includes extra fields.
+		// Safely cast the prompt token details section to the appropriate structure.
+		interface DeepSeekUsage extends OpenAI.CompletionUsage {
+			prompt_cache_hit_tokens?: number
+			prompt_cache_miss_tokens?: number
+		}
+		const deepUsage = usage as DeepSeekUsage
+
+		const inputTokens = deepUsage?.prompt_tokens || 0
+		const outputTokens = deepUsage?.completion_tokens || 0
+		const cacheReadTokens = deepUsage?.prompt_cache_hit_tokens || 0
+		const cacheWriteTokens = deepUsage?.prompt_cache_miss_tokens || 0
+		const totalCost = calculateApiCostOpenAI(info, inputTokens, outputTokens, cacheWriteTokens, cacheReadTokens)
+		yield {
+			type: "usage",
+			inputTokens: inputTokens,
+			outputTokens: outputTokens,
+			cacheWriteTokens: cacheWriteTokens,
+			cacheReadTokens: cacheReadTokens,
+			totalCost: totalCost,
+		}
+	}
+
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const model = this.getModel()
@@ -61,15 +93,7 @@ export class DeepSeekHandler implements ApiHandler {
 			}
 
 			if (chunk.usage) {
-				yield {
-					type: "usage",
-					inputTokens: chunk.usage.prompt_tokens || 0, // (deepseek reports total input AND cache reads/writes, see context caching: https://api-docs.deepseek.com/guides/kv_cache) where the input tokens is the sum of the cache hits/misses, while anthropic reports them as separate tokens. This is important to know for 1) context management truncation algorithm, and 2) cost calculation (NOTE: we report both input and cache stats but for now set input price to 0 since all the cost calculation will be done using cache hits/misses)
-					outputTokens: chunk.usage.completion_tokens || 0,
-					// @ts-ignore-next-line
-					cacheReadTokens: chunk.usage.prompt_cache_hit_tokens || 0,
-					// @ts-ignore-next-line
-					cacheWriteTokens: chunk.usage.prompt_cache_miss_tokens || 0,
-				}
+				yield* this.yieldUsage(model.info, chunk.usage)
 			}
 		}
 	}

src/api/providers/openai-native.ts

@@ -10,6 +10,7 @@ import {
 	openAiNativeModels,
 } from "../../shared/api"
 import { convertToOpenAiMessages } from "../transform/openai-format"
+import { calculateApiCostOpenAI } from "../../utils/cost"
 import { ApiStream } from "../transform/stream"
 import { ChatCompletionReasoningEffort } from "openai/resources/chat/completions.mjs"
 
@@ -24,31 +25,47 @@ export class OpenAiNativeHandler implements ApiHandler {
 		})
 	}
 
+	private async *yieldUsage(info: ModelInfo, usage: OpenAI.Completions.CompletionUsage | undefined): ApiStream {
+		const inputTokens = usage?.prompt_tokens || 0
+		const outputTokens = usage?.completion_tokens || 0
+		const cacheReadTokens = usage?.prompt_tokens_details?.cached_tokens || 0
+		const cacheWriteTokens = 0
+		const totalCost = calculateApiCostOpenAI(info, inputTokens, outputTokens, cacheWriteTokens, cacheReadTokens)
+		yield {
+			type: "usage",
+			inputTokens: inputTokens,
+			outputTokens: outputTokens,
+			cacheWriteTokens: cacheWriteTokens,
+			cacheReadTokens: cacheReadTokens,
+			totalCost: totalCost,
+		}
+	}
+
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
-		switch (this.getModel().id) {
+		const model = this.getModel()
+
+		switch (model.id) {
 			case "o1":
 			case "o1-preview":
 			case "o1-mini": {
 				// o1 doesnt support streaming, non-1 temp, or system prompt
 				const response = await this.client.chat.completions.create({
-					model: this.getModel().id,
+					model: model.id,
 					messages: [{ role: "user", content: systemPrompt }, ...convertToOpenAiMessages(messages)],
 				})
 				yield {
 					type: "text",
 					text: response.choices[0]?.message.content || "",
 				}
-				yield {
-					type: "usage",
-					inputTokens: response.usage?.prompt_tokens || 0,
-					outputTokens: response.usage?.completion_tokens || 0,
-				}
+
+				yield* this.yieldUsage(model.info, response.usage)
+
 				break
 			}
 			case "o3-mini": {
 				const stream = await this.client.chat.completions.create({
-					model: this.getModel().id,
+					model: model.id,
 					messages: [{ role: "developer", content: systemPrompt }, ...convertToOpenAiMessages(messages)],
 					stream: true,
 					stream_options: { include_usage: true },
@@ -63,18 +80,15 @@ export class OpenAiNativeHandler implements ApiHandler {
 						}
 					}
 					if (chunk.usage) {
-						yield {
-							type: "usage",
-							inputTokens: chunk.usage.prompt_tokens || 0,
-							outputTokens: chunk.usage.completion_tokens || 0,
-						}
+						// Only last chunk contains usage
+						yield* this.yieldUsage(model.info, chunk.usage)
 					}
 				}
 				break
 			}
 			default: {
 				const stream = await this.client.chat.completions.create({
-					model: this.getModel().id,
+					model: model.id,
 					// max_completion_tokens: this.getModel().info.maxTokens,
 					temperature: 0,
 					messages: [{ role: "system", content: systemPrompt }, ...convertToOpenAiMessages(messages)],
@@ -90,14 +104,9 @@ export class OpenAiNativeHandler implements ApiHandler {
 							text: delta.content,
 						}
 					}
-
-					// contains a null value except for the last chunk which contains the token usage statistics for the entire request
 					if (chunk.usage) {
-						yield {
-							type: "usage",
-							inputTokens: chunk.usage.prompt_tokens || 0,
-							outputTokens: chunk.usage.completion_tokens || 0,
-						}
+						// Only last chunk contains usage
+						yield* this.yieldUsage(model.info, chunk.usage)
 					}
 				}
 			}

src/api/providers/openrouter.ts

@@ -40,6 +40,7 @@ export class OpenRouterHandler implements ApiHandler {
 		switch (model.id) {
 			case "anthropic/claude-3.7-sonnet":
 			case "anthropic/claude-3.7-sonnet:beta":
+			case "anthropic/claude-3.7-sonnet:thinking":
 			case "anthropic/claude-3-7-sonnet":
 			case "anthropic/claude-3-7-sonnet:beta":
 			case "anthropic/claude-3.5-sonnet":
@@ -95,6 +96,7 @@ export class OpenRouterHandler implements ApiHandler {
 		switch (model.id) {
 			case "anthropic/claude-3.7-sonnet":
 			case "anthropic/claude-3.7-sonnet:beta":
+			case "anthropic/claude-3.7-sonnet:thinking":
 			case "anthropic/claude-3-7-sonnet":
 			case "anthropic/claude-3-7-sonnet:beta":
 			case "anthropic/claude-3.5-sonnet":
@@ -109,7 +111,7 @@ export class OpenRouterHandler implements ApiHandler {
 				break
 		}
 
-		let temperature = 0
+		let temperature: number | undefined = 0
 		let topP: number | undefined = undefined
 		if (this.getModel().id.startsWith("deepseek/deepseek-r1") || this.getModel().id === "perplexity/sonar-reasoning") {
 			// Recommended values from DeepSeek
@@ -118,6 +120,22 @@ export class OpenRouterHandler implements ApiHandler {
 			openAiMessages = convertToR1Format([{ role: "user", content: systemPrompt }, ...messages])
 		}
 
+		let reasoning: { max_tokens: number } | undefined = undefined
+		switch (model.id) {
+			case "anthropic/claude-3.7-sonnet":
+			case "anthropic/claude-3.7-sonnet:beta":
+			case "anthropic/claude-3.7-sonnet:thinking":
+			case "anthropic/claude-3-7-sonnet":
+			case "anthropic/claude-3-7-sonnet:beta":
+				let budget_tokens = this.options.thinkingBudgetTokens || 0
+				const reasoningOn = budget_tokens !== 0 ? true : false
+				if (reasoningOn) {
+					temperature = undefined // extended thinking does not support non-1 temperature
+					reasoning = { max_tokens: budget_tokens }
+				}
+				break
+		}
+
 		// Removes messages in the middle when close to context window limit. Should not be applied to models that support prompt caching since it would continuously break the cache.
 		let shouldApplyMiddleOutTransform = !model.info.supportsPromptCache
 		// except for deepseek (which we set supportsPromptCache to true for), where because the context window is so small our truncation algo might miss and we should use openrouter's middle-out transform as a fallback to ensure we don't exceed the context window (FIXME: once we have a more robust token estimator we should not rely on this)
@@ -136,6 +154,7 @@ export class OpenRouterHandler implements ApiHandler {
 			transforms: shouldApplyMiddleOutTransform ? ["middle-out"] : undefined,
 			include_reasoning: true,
 			...(model.id === "openai/o3-mini" ? { reasoning_effort: this.options.o3MiniReasoningEffort || "medium" } : {}),
+			...(reasoning ? { reasoning } : {}),
 		})
 
 		let genId: string | undefined

src/api/providers/requesty.ts

@@ -1,8 +1,8 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import OpenAI from "openai"
-import { withRetry } from "../retry"
 import { ApiHandlerOptions, ModelInfo, openAiModelInfoSaneDefaults } from "../../shared/api"
 import { ApiHandler } from "../index"
+import { withRetry } from "../retry"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream } from "../transform/stream"
 
@@ -69,13 +69,19 @@ export class RequestyHandler implements ApiHandler {
 
 			if (chunk.usage) {
 				const usage = chunk.usage as RequestyUsage
+				const inputTokens = usage.prompt_tokens || 0
+				const outputTokens = usage.completion_tokens || 0
+				const cacheWriteTokens = usage.prompt_tokens_details?.caching_tokens || undefined
+				const cacheReadTokens = usage.prompt_tokens_details?.cached_tokens || undefined
+				const totalCost = 0 // TODO: Replace with calculateApiCostOpenAI(model.info, inputTokens, outputTokens, cacheWriteTokens, cacheReadTokens)
+
 				yield {
 					type: "usage",
-					inputTokens: usage.prompt_tokens || 0,
-					outputTokens: usage.completion_tokens || 0,
-					cacheWriteTokens: usage.prompt_tokens_details?.caching_tokens || undefined,
-					cacheReadTokens: usage.prompt_tokens_details?.cached_tokens || undefined,
-					totalCost: usage.total_cost || undefined,
+					inputTokens: inputTokens,
+					outputTokens: outputTokens,
+					cacheWriteTokens: cacheWriteTokens,
+					cacheReadTokens: cacheReadTokens,
+					totalCost: totalCost,
 				}
 			}
 		}

src/api/providers/vertex.ts

@@ -21,14 +21,117 @@ export class VertexHandler implements ApiHandler {
 
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
-		const stream = await this.client.messages.create({
-			model: this.getModel().id,
-			max_tokens: this.getModel().info.maxTokens || 8192,
-			temperature: 0,
-			system: systemPrompt,
-			messages,
-			stream: true,
-		})
+		const model = this.getModel()
+		const modelId = model.id
+
+		let budget_tokens = this.options.thinkingBudgetTokens || 0
+		const reasoningOn = budget_tokens !== 0 ? true : false
+
+		let stream
+		switch (modelId) {
+			case "claude-3-7-sonnet@20250219":
+			case "claude-3-5-sonnet-v2@20241022":
+			case "claude-3-5-sonnet@20240620":
+			case "claude-3-5-haiku@20241022":
+			case "claude-3-opus@20240229":
+			case "claude-3-haiku@20240307": {
+				// Find indices of user messages for cache control
+				const userMsgIndices = messages.reduce(
+					(acc, msg, index) => (msg.role === "user" ? [...acc, index] : acc),
+					[] as number[],
+				)
+				const lastUserMsgIndex = userMsgIndices[userMsgIndices.length - 1] ?? -1
+				const secondLastMsgUserIndex = userMsgIndices[userMsgIndices.length - 2] ?? -1
+
+				stream = await this.client.beta.messages.create(
+					{
+						model: modelId,
+						max_tokens: model.info.maxTokens || 8192,
+						thinking: reasoningOn ? { type: "enabled", budget_tokens: budget_tokens } : undefined,
+						temperature: reasoningOn ? undefined : 0,
+						system: [
+							{
+								text: systemPrompt,
+								type: "text",
+								cache_control: { type: "ephemeral" },
+							},
+						],
+						messages: messages.map((message, index) => {
+							if (index === lastUserMsgIndex || index === secondLastMsgUserIndex) {
+								return {
+									...message,
+									content:
+										typeof message.content === "string"
+											? [
+													{
+														type: "text",
+														text: message.content,
+														cache_control: {
+															type: "ephemeral",
+														},
+													},
+												]
+											: message.content.map((content, contentIndex) =>
+													contentIndex === message.content.length - 1
+														? {
+																...content,
+																cache_control: {
+																	type: "ephemeral",
+																},
+															}
+														: content,
+												),
+								}
+							}
+							return {
+								...message,
+								content:
+									typeof message.content === "string"
+										? [
+												{
+													type: "text",
+													text: message.content,
+												},
+											]
+										: message.content,
+							}
+						}),
+						stream: true,
+					},
+					{
+						headers: {},
+					},
+				)
+				break
+			}
+			default: {
+				stream = await this.client.beta.messages.create({
+					model: modelId,
+					max_tokens: model.info.maxTokens || 8192,
+					temperature: 0,
+					system: [
+						{
+							text: systemPrompt,
+							type: "text",
+						},
+					],
+					messages: messages.map((message) => ({
+						...message,
+						content:
+							typeof message.content === "string"
+								? [
+										{
+											type: "text",
+											text: message.content,
+										},
+									]
+								: message.content,
+					})),
+					stream: true,
+				})
+				break
+			}
+		}
 		for await (const chunk of stream) {
 			switch (chunk.type) {
 				case "message_start":
@@ -37,6 +140,8 @@ export class VertexHandler implements ApiHandler {
 						type: "usage",
 						inputTokens: usage.input_tokens || 0,
 						outputTokens: usage.output_tokens || 0,
+						cacheWriteTokens: usage.cache_creation_input_tokens || undefined,
+						cacheReadTokens: usage.cache_read_input_tokens || undefined,
 					}
 					break
 				case "message_delta":
@@ -46,7 +151,8 @@ export class VertexHandler implements ApiHandler {
 						outputTokens: chunk.usage.output_tokens || 0,
 					}
 					break
-
+				case "message_stop":
+					break
 				case "content_block_start":
 					switch (chunk.content_block.type) {
 						case "text":
@@ -73,6 +179,8 @@ export class VertexHandler implements ApiHandler {
 							break
 					}
 					break
+				case "content_block_stop":
+					break
 			}
 		}
 	}

src/api/providers/vscode-lm.ts

@@ -1,7 +1,7 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import * as vscode from "vscode"
 import { ApiHandler, SingleCompletionHandler } from "../"
-import { calculateApiCost } from "../../utils/cost"
+import { calculateApiCostAnthropic } from "../../utils/cost"
 import { ApiStream } from "../transform/stream"
 import { convertToVsCodeLmMessages } from "../transform/vscode-lm-format"
 import { SELECTOR_SEPARATOR, stringifyVsCodeLmModelSelector } from "../../shared/vsCodeSelectorUtils"
@@ -525,7 +525,7 @@ export class VsCodeLmHandler implements ApiHandler, SingleCompletionHandler {
 				type: "usage",
 				inputTokens: totalInputTokens,
 				outputTokens: totalOutputTokens,
-				totalCost: calculateApiCost(this.getModel().info, totalInputTokens, totalOutputTokens),
+				totalCost: calculateApiCostAnthropic(this.getModel().info, totalInputTokens, totalOutputTokens),
 			}
 		} catch (error: unknown) {
 			this.ensureCleanState()

src/api/providers/xai.ts

@@ -0,0 +1,64 @@
+import { Anthropic } from "@anthropic-ai/sdk"
+import OpenAI from "openai"
+import { ApiHandler } from "../"
+import { ApiHandlerOptions, XAIModelId, ModelInfo, xaiDefaultModelId, xaiModels } from "../../shared/api"
+import { convertToOpenAiMessages } from "../transform/openai-format"
+import { ApiStream } from "../transform/stream"
+
+export class XAIHandler implements ApiHandler {
+	private options: ApiHandlerOptions
+	private client: OpenAI
+
+	constructor(options: ApiHandlerOptions) {
+		this.options = options
+		this.client = new OpenAI({
+			baseURL: "https://api.x.ai/v1",
+			apiKey: this.options.xaiApiKey,
+		})
+	}
+
+	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+		const stream = await this.client.chat.completions.create({
+			model: this.getModel().id,
+			max_completion_tokens: this.getModel().info.maxTokens,
+			temperature: 0,
+			messages: [{ role: "system", content: systemPrompt }, ...convertToOpenAiMessages(messages)],
+			stream: true,
+			stream_options: { include_usage: true },
+		})
+
+		for await (const chunk of stream) {
+			const delta = chunk.choices[0]?.delta
+			if (delta?.content) {
+				yield {
+					type: "text",
+					text: delta.content,
+				}
+			}
+
+			if (chunk.usage) {
+				yield {
+					type: "usage",
+					inputTokens: 0,
+					outputTokens: chunk.usage.completion_tokens || 0,
+					// @ts-ignore-next-line
+					cacheReadTokens: chunk.usage.prompt_cache_hit_tokens || 0,
+					// @ts-ignore-next-line
+					cacheWriteTokens: chunk.usage.prompt_cache_miss_tokens || 0,
+				}
+			}
+		}
+	}
+
+	getModel(): { id: XAIModelId; info: ModelInfo } {
+		const modelId = this.options.apiModelId
+		if (modelId && modelId in xaiModels) {
+			const id = modelId as XAIModelId
+			return { id, info: xaiModels[id] }
+		}
+		return {
+			id: xaiDefaultModelId,
+			info: xaiModels[xaiDefaultModelId],
+		}
+	}
+}

src/api/transform/gemini-format.ts

@@ -11,16 +11,7 @@ import {
 	TextPart,
 } from "@google/generative-ai"
 
-export function convertAnthropicContentToGemini(
-	content:
-		| string
-		| Array<
-				| Anthropic.Messages.TextBlockParam
-				| Anthropic.Messages.ImageBlockParam
-				| Anthropic.Messages.ToolUseBlockParam
-				| Anthropic.Messages.ToolResultBlockParam
-		  >,
-): Part[] {
+export function convertAnthropicContentToGemini(content: string | Anthropic.ContentBlockParam[]): Part[] {
 	if (typeof content === "string") {
 		return [{ text: content } as TextPart]
 	}
@@ -133,7 +124,7 @@ export function convertGeminiResponseToAnthropic(response: EnhancedGenerateConte
 	// Add the main text response
 	const text = response.text()
 	if (text) {
-		content.push({ type: "text", text })
+		content.push({ type: "text", text, citations: null })
 	}
 
 	// Add function calls as tool_use blocks
@@ -183,6 +174,8 @@ export function convertGeminiResponseToAnthropic(response: EnhancedGenerateConte
 		usage: {
 			input_tokens: response.usageMetadata?.promptTokenCount ?? 0,
 			output_tokens: response.usageMetadata?.candidatesTokenCount ?? 0,
+			cache_creation_input_tokens: null,
+			cache_read_input_tokens: null,
 		},
 	}
 }

src/api/transform/o1-format.ts

@@ -376,6 +376,7 @@ export function convertO1ResponseToAnthropicMessage(
 			{
 				type: "text",
 				text: normalText,
+				citations: null,
 			},
 		],
 		model: completion.model,
@@ -396,6 +397,8 @@ export function convertO1ResponseToAnthropicMessage(
 		usage: {
 			input_tokens: completion.usage?.prompt_tokens || 0,
 			output_tokens: completion.usage?.completion_tokens || 0,
+			cache_creation_input_tokens: null,
+			cache_read_input_tokens: null,
 		},
 	}
 

src/api/transform/openai-format.ts

@@ -161,6 +161,7 @@ export function convertToAnthropicMessage(completion: OpenAI.Chat.Completions.Ch
 			{
 				type: "text",
 				text: openAiMessage.content || "",
+				citations: null,
 			},
 		],
 		model: completion.model,
@@ -181,6 +182,8 @@ export function convertToAnthropicMessage(completion: OpenAI.Chat.Completions.Ch
 		usage: {
 			input_tokens: completion.usage?.prompt_tokens || 0,
 			output_tokens: completion.usage?.completion_tokens || 0,
+			cache_creation_input_tokens: null,
+			cache_read_input_tokens: null,
 		},
 	}
 

src/api/transform/vscode-lm-format.ts

@@ -175,6 +175,7 @@ export async function convertToAnthropicMessage(
 					return {
 						type: "text",
 						text: part.value,
+						citations: null,
 					}
 				}
 
@@ -195,6 +196,8 @@ export async function convertToAnthropicMessage(
 		usage: {
 			input_tokens: 0,
 			output_tokens: 0,
+			cache_creation_input_tokens: null,
+			cache_read_input_tokens: null,
 		},
 	}
 }

src/core/Cline.ts

@@ -47,7 +47,7 @@ import {
 import { getApiMetrics } from "../shared/getApiMetrics"
 import { HistoryItem } from "../shared/HistoryItem"
 import { ClineAskResponse, ClineCheckpointRestore } from "../shared/WebviewMessage"
-import { calculateApiCost } from "../utils/cost"
+import { calculateApiCostAnthropic } from "../utils/cost"
 import { fileExistsAtPath } from "../utils/fs"
 import { arePathsEqual, getReadablePath } from "../utils/path"
 import { fixModelHtmlEscaping, removeInvalidChars } from "../utils/string"
@@ -59,13 +59,13 @@ import { formatResponse } from "./prompts/responses"
 import { addUserInstructions, SYSTEM_PROMPT } from "./prompts/system"
 import { getNextTruncationRange, getTruncatedMessages } from "./sliding-window"
 import { ClineProvider, GlobalFileNames } from "./webview/ClineProvider"
+import { DEFAULT_LANGUAGE_SETTINGS, getLanguageKey, LanguageDisplay, LanguageKey } from "../shared/Languages"
+import { telemetryService } from "../services/telemetry/TelemetryService"
 
 const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) ?? path.join(os.homedir(), "Desktop") // may or may not exist but fs checking existence would immediately ask for permission which would be bad UX, need to come up with a better solution
 
 type ToolResponse = string | Array<Anthropic.TextBlockParam | Anthropic.ImageBlockParam>
-type UserContent = Array<
-	Anthropic.TextBlockParam | Anthropic.ImageBlockParam | Anthropic.ToolUseBlockParam | Anthropic.ToolResultBlockParam
->
+type UserContent = Array<Anthropic.ContentBlockParam>
 
 export class Cline {
 	readonly taskId: string
@@ -1077,67 +1077,74 @@ export class Cline {
 	// Checkpoints
 
 	async saveCheckpoint(isAttemptCompletionMessage: boolean = false) {
-		const commitHash = await this.checkpointTracker?.commit() // silently fails for now
 		// Set isCheckpointCheckedOut to false for all checkpoint_created messages
 		this.clineMessages.forEach((message) => {
 			if (message.say === "checkpoint_created") {
 				message.isCheckpointCheckedOut = false
 			}
 		})
-		if (commitHash) {
-			if (!isAttemptCompletionMessage) {
-				// For non-attempt completion we just say checkpoints
-				await this.say("checkpoint_created", commitHash)
+
+		if (!isAttemptCompletionMessage) {
+			// For non-attempt completion we just say checkpoints
+			await this.say("checkpoint_created")
+			this.checkpointTracker?.commit().then(async (commitHash) => {
 				const lastCheckpointMessage = findLast(this.clineMessages, (m) => m.say === "checkpoint_created")
 				if (lastCheckpointMessage) {
 					lastCheckpointMessage.lastCheckpointHash = commitHash
 					await this.saveClineMessages()
 				}
-			} else {
-				// For attempt_completion, find the last completion_result message and set its checkpoint hash. This will be used to present the 'see new changes' button
-				const lastCompletionResultMessage = findLast(
-					this.clineMessages,
-					(m) => m.say === "completion_result" || m.ask === "completion_result",
-				)
-				if (lastCompletionResultMessage) {
-					lastCompletionResultMessage.lastCheckpointHash = commitHash
-					await this.saveClineMessages()
-				}
+			}) // silently fails for now
+
+			//
+		} else {
+			// attempt completion requires checkpoint to be sync so that we can present button after attempt_completion
+			const commitHash = await this.checkpointTracker?.commit()
+			// For attempt_completion, find the last completion_result message and set its checkpoint hash. This will be used to present the 'see new changes' button
+			const lastCompletionResultMessage = findLast(
+				this.clineMessages,
+				(m) => m.say === "completion_result" || m.ask === "completion_result",
+			)
+			if (lastCompletionResultMessage) {
+				lastCompletionResultMessage.lastCheckpointHash = commitHash
+				await this.saveClineMessages()
 			}
-
-			// Previously we checkpointed every message, but this is excessive and unnecessary.
-			// // Start from the end and work backwards until we find a tool use or another message with a hash
-			// for (let i = this.clineMessages.length - 1; i >= 0; i--) {
-			// 	const message = this.clineMessages[i]
-			// 	if (message.lastCheckpointHash) {
-			// 		// Found a message with a hash, so we can stop
-			// 		break
-			// 	}
-			// 	// Update this message with a hash
-			// 	message.lastCheckpointHash = commitHash
-
-			// 	// We only care about adding the hash to the last tool use (we don't want to add this hash to every prior message ie for tasks pre-checkpoint)
-			// 	const isToolUse =
-			// 		message.say === "tool" ||
-			// 		message.ask === "tool" ||
-			// 		message.say === "command" ||
-			// 		message.ask === "command" ||
-			// 		message.say === "completion_result" ||
-			// 		message.ask === "completion_result" ||
-			// 		message.ask === "followup" ||
-			// 		message.say === "use_mcp_server" ||
-			// 		message.ask === "use_mcp_server" ||
-			// 		message.say === "browser_action" ||
-			// 		message.say === "browser_action_launch" ||
-			// 		message.ask === "browser_action_launch"
-
-			// 	if (isToolUse) {
-			// 		break
-			// 	}
-			// }
-			// // Save the updated messages
-			// await this.saveClineMessages()
 		}
+
+		// if (commitHash) {
+
+		// Previously we checkpointed every message, but this is excessive and unnecessary.
+		// // Start from the end and work backwards until we find a tool use or another message with a hash
+		// for (let i = this.clineMessages.length - 1; i >= 0; i--) {
+		// 	const message = this.clineMessages[i]
+		// 	if (message.lastCheckpointHash) {
+		// 		// Found a message with a hash, so we can stop
+		// 		break
+		// 	}
+		// 	// Update this message with a hash
+		// 	message.lastCheckpointHash = commitHash
+
+		// 	// We only care about adding the hash to the last tool use (we don't want to add this hash to every prior message ie for tasks pre-checkpoint)
+		// 	const isToolUse =
+		// 		message.say === "tool" ||
+		// 		message.ask === "tool" ||
+		// 		message.say === "command" ||
+		// 		message.ask === "command" ||
+		// 		message.say === "completion_result" ||
+		// 		message.ask === "completion_result" ||
+		// 		message.ask === "followup" ||
+		// 		message.say === "use_mcp_server" ||
+		// 		message.ask === "use_mcp_server" ||
+		// 		message.say === "browser_action" ||
+		// 		message.say === "browser_action_launch" ||
+		// 		message.ask === "browser_action_launch"
+
+		// 	if (isToolUse) {
+		// 		break
+		// 	}
+		// }
+		// // Save the updated messages
+		// await this.saveClineMessages()
+		// }
 	}
 
 	// Tools
@@ -1269,6 +1276,13 @@ export class Cline {
 		let systemPrompt = await SYSTEM_PROMPT(cwd, supportsComputerUse, mcpHub, this.browserSettings)
 
 		let settingsCustomInstructions = this.customInstructions?.trim()
+		const preferredLanguage = getLanguageKey(
+			vscode.workspace.getConfiguration("cline").get<LanguageDisplay>("preferredLanguage"),
+		)
+		const preferredLanguageInstructions =
+			preferredLanguage && preferredLanguage !== DEFAULT_LANGUAGE_SETTINGS
+				? `# Preferred Language\n\nSpeak in ${preferredLanguage}.`
+				: ""
 		const clineRulesFilePath = path.resolve(cwd, GlobalFileNames.clineRules)
 		let clineRulesFileInstructions: string | undefined
 		if (await fileExistsAtPath(clineRulesFilePath)) {
@@ -1288,9 +1302,19 @@ export class Cline {
 			clineIgnoreInstructions = `# .clineignore\n\n(The following is provided by a root-level .clineignore file where the user has specified files and directories that should not be accessed. When using list_files, you'll notice a ${LOCK_TEXT_SYMBOL} next to files that are blocked. Attempting to access the file's contents e.g. through read_file will result in an error.)\n\n${clineIgnoreContent}\n.clineignore`
 		}
 
-		if (settingsCustomInstructions || clineRulesFileInstructions) {
+		if (
+			settingsCustomInstructions ||
+			clineRulesFileInstructions ||
+			clineIgnoreInstructions ||
+			preferredLanguageInstructions
+		) {
 			// altering the system prompt mid-task will break the prompt cache, but in the grand scheme this will not change often so it's better to not pollute user messages with it the way we have to with <potentially relevant details>
-			systemPrompt += addUserInstructions(settingsCustomInstructions, clineRulesFileInstructions, clineIgnoreInstructions)
+			systemPrompt += addUserInstructions(
+				settingsCustomInstructions,
+				clineRulesFileInstructions,
+				clineIgnoreInstructions,
+				preferredLanguageInstructions,
+			)
 		}
 
 		// If the previous API request's total token usage is close to the context window, truncate the conversation history to free up space for the new request
@@ -3073,7 +3097,13 @@ export class Cline {
 					cacheReads: cacheReadTokens,
 					cost:
 						totalCost ??
-						calculateApiCost(this.api.getModel().info, inputTokens, outputTokens, cacheWriteTokens, cacheReadTokens),
+						calculateApiCostAnthropic(
+							this.api.getModel().info,
+							inputTokens,
+							outputTokens,
+							cacheWriteTokens,
+							cacheReadTokens,
+						),
 					cancelReason,
 					streamingFailedMessage,
 				} satisfies ClineApiReqInfo)

src/core/prompts/system.ts

@@ -979,8 +979,12 @@ export function addUserInstructions(
 	settingsCustomInstructions?: string,
 	clineRulesFileInstructions?: string,
 	clineIgnoreInstructions?: string,
+	preferredLanguageInstructions?: string,
 ) {
 	let customInstructions = ""
+	if (preferredLanguageInstructions) {
+		customInstructions += preferredLanguageInstructions + "\n\n"
+	}
 	if (settingsCustomInstructions) {
 		customInstructions += settingsCustomInstructions + "\n\n"
 	}

src/core/webview/ClineProvider.ts

@@ -1,38 +1,40 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import axios from "axios"
-import fs from "fs/promises"
-import os from "os"
 import crypto from "crypto"
 import { execa } from "execa"
+import fs from "fs/promises"
+import os from "os"
 import pWaitFor from "p-wait-for"
 import * as path from "path"
 import * as vscode from "vscode"
 import { buildApiHandler } from "../../api"
 import { downloadTask } from "../../integrations/misc/export-markdown"
 import { openFile, openImage } from "../../integrations/misc/open-file"
+import { fetchOpenGraphData, isImageUrl } from "../../integrations/misc/link-preview"
 import { selectImages } from "../../integrations/misc/process-images"
 import { getTheme } from "../../integrations/theme/getTheme"
 import WorkspaceTracker from "../../integrations/workspace/WorkspaceTracker"
-import { McpHub } from "../../services/mcp/McpHub"
-import { McpDownloadResponse, McpMarketplaceCatalog, McpMarketplaceItem, McpServer } from "../../shared/mcp"
 import { FirebaseAuthManager, UserInfo } from "../../services/auth/FirebaseAuthManager"
+import { McpHub } from "../../services/mcp/McpHub"
 import { ApiProvider, ModelInfo } from "../../shared/api"
 import { findLast } from "../../shared/array"
+import { AutoApprovalSettings, DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../shared/AutoApprovalSettings"
+import { BrowserSettings, DEFAULT_BROWSER_SETTINGS } from "../../shared/BrowserSettings"
+import { ChatContent } from "../../shared/ChatContent"
+import { ChatSettings, DEFAULT_CHAT_SETTINGS } from "../../shared/ChatSettings"
 import { ExtensionMessage, ExtensionState, Platform } from "../../shared/ExtensionMessage"
 import { HistoryItem } from "../../shared/HistoryItem"
+import { McpDownloadResponse, McpMarketplaceCatalog, McpServer } from "../../shared/mcp"
 import { ClineCheckpointRestore, WebviewMessage } from "../../shared/WebviewMessage"
 import { fileExistsAtPath } from "../../utils/fs"
+import { searchCommits } from "../../utils/git"
 import { Cline } from "../Cline"
 import { openMention } from "../mentions"
 import { getNonce } from "./getNonce"
 import { getUri } from "./getUri"
-import { AutoApprovalSettings, DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../shared/AutoApprovalSettings"
-import { BrowserSettings, DEFAULT_BROWSER_SETTINGS } from "../../shared/BrowserSettings"
-import { ChatSettings, DEFAULT_CHAT_SETTINGS } from "../../shared/ChatSettings"
-import { DIFF_VIEW_URI_SCHEME } from "../../integrations/editor/DiffViewProvider"
-import { searchCommits } from "../../utils/git"
-import { ChatContent } from "../../shared/ChatContent"
-import { getShell } from "../../utils/shell"
+import { telemetryService } from "../../services/telemetry/TelemetryService"
+import { TelemetrySetting } from "../../shared/TelemetrySetting"
+import { validateThinkingBudget } from "../../utils/validation"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -57,6 +59,7 @@ type SecretKey =
 	| "liteLlmApiKey"
 	| "authToken"
 	| "authNonce"
+	| "xaiApiKey"
 type GlobalStateKey =
 	| "apiProvider"
 	| "apiModelId"
@@ -87,6 +90,7 @@ type GlobalStateKey =
 	| "userInfo"
 	| "previousModeApiProvider"
 	| "previousModeModelId"
+	| "previousModeThinkingBudgetTokens"
 	| "previousModeModelInfo"
 	| "liteLlmBaseUrl"
 	| "liteLlmModelId"
@@ -94,7 +98,8 @@ type GlobalStateKey =
 	| "requestyModelId"
 	| "togetherModelId"
 	| "mcpMarketplaceCatalog"
-
+	| "telemetrySetting"
+	| "thinkingBudgetTokens"
 export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
 	uiMessages: "ui_messages.json",
@@ -176,11 +181,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		return findLast(Array.from(this.activeInstances), (instance) => instance.view?.visible === true)
 	}
 
-	resolveWebviewView(
-		webviewView: vscode.WebviewView | vscode.WebviewPanel,
-		//context: vscode.WebviewViewResolveContext<unknown>, used to recreate a deallocated webview, but we don't need this since we use retainContextWhenHidden
-		//token: vscode.CancellationToken
-	): void | Thenable<void> {
+	async resolveWebviewView(webviewView: vscode.WebviewView | vscode.WebviewPanel) {
 		this.outputChannel.appendLine("Resolving webview view")
 		this.view = webviewView
 
@@ -189,7 +190,11 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			enableScripts: true,
 			localResourceRoots: [this.context.extensionUri],
 		}
-		webviewView.webview.html = this.getHtmlContent(webviewView.webview)
+
+		webviewView.webview.html =
+			this.context.extensionMode === vscode.ExtensionMode.Development
+				? await this.getHMRHtmlContent(webviewView.webview)
+				: this.getHtmlContent(webviewView.webview)
 
 		// Sets up an event listener to listen for messages passed from the webview view context
 		// and executes code based on the message that is received
@@ -280,6 +285,16 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			task,
 			images,
 		)
+
+		// New task started
+		if (telemetryService.isTelemetryEnabled()) {
+			telemetryService.capture({
+				event: "New task started",
+				properties: {
+					apiProvider: apiConfiguration.apiProvider,
+				},
+			})
+		}
 	}
 
 	async initClineWithHistoryItem(historyItem: HistoryItem) {
@@ -297,6 +312,16 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			undefined,
 			historyItem,
 		)
+
+		// Open task from history
+		if (telemetryService.isTelemetryEnabled()) {
+			telemetryService.capture({
+				event: "Open task from history",
+				properties: {
+					apiProvider: apiConfiguration.apiProvider,
+				},
+			})
+		}
 	}
 
 	// Send any JSON serializable data to the react app
@@ -320,9 +345,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		// then convert it to a uri we can use in the webview.
 
 		// The CSS file from the React build output
-		const stylesUri = getUri(webview, this.context.extensionUri, ["webview-ui", "build", "static", "css", "main.css"])
+		const stylesUri = getUri(webview, this.context.extensionUri, ["webview-ui", "build", "assets", "index.css"])
 		// The JS file from the React build output
-		const scriptUri = getUri(webview, this.context.extensionUri, ["webview-ui", "build", "static", "js", "main.js"])
+		const scriptUri = getUri(webview, this.context.extensionUri, ["webview-ui", "build", "assets", "index.js"])
 
 		// The codicon font from the React build output
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-codicons-sample/src/extension.ts
@@ -365,20 +390,94 @@ export class ClineProvider implements vscode.WebviewViewProvider {
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
             <meta name="theme-color" content="#000000">
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https: data:; script-src 'nonce-${nonce}';">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
-			<link href="${codiconsUri}" rel="stylesheet" />
+            <link href="${codiconsUri}" rel="stylesheet" />
+						<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src https://*.posthog.com; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https: data:; script-src 'nonce-${nonce}' https://*.posthog.com;">
             <title>Cline</title>
           </head>
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
             <div id="root"></div>
-            <script nonce="${nonce}" src="${scriptUri}"></script>
+            <script type="module" nonce="${nonce}" src="${scriptUri}"></script>
           </body>
         </html>
       `
 	}
 
+	/**
+	 * Connects to the local Vite dev server to allow HMR, with fallback to the bundled assets
+	 *
+	 * @param webview A reference to the extension webview
+	 * @returns A template string literal containing the HTML that should be
+	 * rendered within the webview panel
+	 */
+	private async getHMRHtmlContent(webview: vscode.Webview): Promise<string> {
+		const localPort = 25463
+		const localServerUrl = `localhost:${localPort}`
+
+		// Check if local dev server is running.
+		try {
+			await axios.get(`http://${localServerUrl}`)
+		} catch (error) {
+			vscode.window.showErrorMessage(
+				"Cline: Local webview dev server is not running, HMR will not work. Please run 'npm run dev:webview' before launching the extension to enable HMR. Using bundled assets.",
+			)
+
+			return this.getHtmlContent(webview)
+		}
+
+		const nonce = getNonce()
+		const stylesUri = getUri(webview, this.context.extensionUri, ["webview-ui", "build", "assets", "index.css"])
+		const codiconsUri = getUri(webview, this.context.extensionUri, [
+			"node_modules",
+			"@vscode",
+			"codicons",
+			"dist",
+			"codicon.css",
+		])
+
+		const scriptEntrypoint = "src/main.tsx"
+		const scriptUri = `http://${localServerUrl}/${scriptEntrypoint}`
+
+		const reactRefresh = /*html*/ `
+			<script nonce="${nonce}" type="module">
+				import RefreshRuntime from "http://${localServerUrl}/@react-refresh"
+				RefreshRuntime.injectIntoGlobalHook(window)
+				window.$RefreshReg$ = () => {}
+				window.$RefreshSig$ = () => (type) => type
+				window.__vite_plugin_react_preamble_installed__ = true
+			</script>
+		`
+
+		const csp = [
+			"default-src 'none'",
+			`font-src ${webview.cspSource}`,
+			`style-src ${webview.cspSource} 'unsafe-inline' https://* http://${localServerUrl} http://0.0.0.0:${localPort}`,
+			`img-src ${webview.cspSource} https: data:`,
+			`script-src 'unsafe-eval' https://* http://${localServerUrl} http://0.0.0.0:${localPort} 'nonce-${nonce}'`,
+			`connect-src https://* ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`,
+		]
+
+		return /*html*/ `
+			<!DOCTYPE html>
+			<html lang="en">
+				<head>
+					<meta charset="utf-8">
+					<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+					<meta http-equiv="Content-Security-Policy" content="${csp.join("; ")}">
+					<link rel="stylesheet" type="text/css" href="${stylesUri}">
+					<link href="${codiconsUri}" rel="stylesheet" />
+					<title>Cline</title>
+				</head>
+				<body>
+					<div id="root"></div>
+					${reactRefresh}
+					<script type="module" src="${scriptUri}"></script>
+				</body>
+			</html>
+		`
+	}
+
 	/**
 	 * Sets up an event listener to listen for messages passed from the webview context and
 	 * executes code based on the message that is received.
@@ -435,6 +534,13 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							}
 						})
 
+						// If user already opted in to telemetry, enable telemetry service
+						this.getStateToPostToWebview().then((state) => {
+							const { telemetrySetting } = state
+							const isOptedIn = telemetrySetting === "enabled"
+							telemetryService.updateTelemetryState(isOptedIn)
+						})
+
 						break
 					case "newTask":
 						// Code that should run in response to the hello message command
@@ -489,6 +595,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 								liteLlmModelId,
 								liteLlmApiKey,
 								qwenApiLine,
+								xaiApiKey,
+								thinkingBudgetTokens,
 							} = message.apiConfiguration
 							await this.updateGlobalState("apiProvider", apiProvider)
 							await this.updateGlobalState("apiModelId", apiModelId)
@@ -520,6 +628,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							await this.storeSecret("qwenApiKey", qwenApiKey)
 							await this.storeSecret("mistralApiKey", mistralApiKey)
 							await this.storeSecret("liteLlmApiKey", liteLlmApiKey)
+							await this.storeSecret("xaiApiKey", xaiApiKey)
 							await this.updateGlobalState("azureApiVersion", azureApiVersion)
 							await this.updateGlobalState("openRouterModelId", openRouterModelId)
 							await this.updateGlobalState("openRouterModelInfo", openRouterModelInfo)
@@ -529,6 +638,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							await this.updateGlobalState("qwenApiLine", qwenApiLine)
 							await this.updateGlobalState("requestyModelId", requestyModelId)
 							await this.updateGlobalState("togetherModelId", togetherModelId)
+							await this.updateGlobalState("thinkingBudgetTokens", thinkingBudgetTokens)
 							if (this.cline) {
 								this.cline.api = buildApiHandler(message.apiConfiguration)
 							}
@@ -635,6 +745,17 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					case "openImage":
 						openImage(message.text!)
 						break
+					case "openInBrowser":
+						if (message.url) {
+							vscode.env.openExternal(vscode.Uri.parse(message.url))
+						}
+						break
+					case "fetchOpenGraphData":
+						this.fetchOpenGraphData(message.text!)
+						break
+					case "checkIsImageUrl":
+						this.checkIsImageUrl(message.text!)
+						break
 					case "openFile":
 						openFile(message.text!)
 						break
@@ -829,6 +950,22 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						)
 						break
 					}
+					// telemetry
+					case "openSettings": {
+						await this.postMessageToWebview({
+							type: "action",
+							action: "settingsButtonClicked",
+						})
+						break
+					}
+					case "telemetrySetting": {
+						const telemetrySetting = message.text as TelemetrySetting
+						await this.updateGlobalState("telemetrySetting", telemetrySetting)
+						const isOptedIn = telemetrySetting === "enabled"
+						telemetryService.updateTelemetryState(isOptedIn)
+						await this.postStateToWebview()
+						break
+					}
 					// Add more switch case statements here as more webview message commands
 					// are created within the webview context (i.e. inside media/main.js)
 				}
@@ -847,10 +984,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			previousModeApiProvider: newApiProvider,
 			previousModeModelId: newModelId,
 			previousModeModelInfo: newModelInfo,
+			previousModeThinkingBudgetTokens: newThinkingBudgetTokens,
 		} = await this.getState()
 
 		// Save the last model used in this mode
 		await this.updateGlobalState("previousModeApiProvider", apiConfiguration.apiProvider)
+		await this.updateGlobalState("previousModeThinkingBudgetTokens", apiConfiguration.thinkingBudgetTokens)
 		switch (apiConfiguration.apiProvider) {
 			case "anthropic":
 			case "bedrock":
@@ -878,11 +1017,15 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			case "litellm":
 				await this.updateGlobalState("previousModeModelId", apiConfiguration.liteLlmModelId)
 				break
+			case "requesty":
+				await this.updateGlobalState("previousModeModelId", apiConfiguration.requestyModelId)
+				break
 		}
 
 		// Restore the model used in previous mode
 		if (newApiProvider && newModelId) {
 			await this.updateGlobalState("apiProvider", newApiProvider)
+			await this.updateGlobalState("thinkingBudgetTokens", newThinkingBudgetTokens)
 			switch (newApiProvider) {
 				case "anthropic":
 				case "bedrock":
@@ -910,6 +1053,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				case "litellm":
 					await this.updateGlobalState("liteLlmModelId", newModelId)
 					break
+				case "requesty":
+					await this.updateGlobalState("requestyModelId", newModelId)
+					break
 			}
 
 			if (this.cline) {
@@ -1010,21 +1156,38 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 	async getDocumentsPath(): Promise<string> {
 		if (process.platform === "win32") {
-			// If the user is running Win 7/Win Server 2008 r2+, we want to get the correct path to their Documents directory.
 			try {
 				const { stdout: docsPath } = await execa("powershell", [
 					"-NoProfile", // Ignore user's PowerShell profile(s)
 					"-Command",
 					"[System.Environment]::GetFolderPath([System.Environment+SpecialFolder]::MyDocuments)",
 				])
-				return docsPath.trim()
+				const trimmedPath = docsPath.trim()
+				if (trimmedPath) {
+					return trimmedPath
+				}
 			} catch (err) {
 				console.error("Failed to retrieve Windows Documents path. Falling back to homedir/Documents.")
-				return path.join(os.homedir(), "Documents")
 			}
-		} else {
-			return path.join(os.homedir(), "Documents") // On POSIX (macOS, Linux, etc.), assume ~/Documents by default (existing behavior, but may want to implement similar logic here)
+		} else if (process.platform === "linux") {
+			try {
+				// First check if xdg-user-dir exists
+				await execa("which", ["xdg-user-dir"])
+
+				// If it exists, try to get XDG documents path
+				const { stdout } = await execa("xdg-user-dir", ["DOCUMENTS"])
+				const trimmedPath = stdout.trim()
+				if (trimmedPath) {
+					return trimmedPath
+				}
+			} catch {
+				// Log error but continue to fallback
+				console.error("Failed to retrieve XDG Documents path. Falling back to homedir/Documents.")
+			}
 		}
+
+		// Default fallback for all platforms
+		return path.join(os.homedir(), "Documents")
 	}
 
 	async ensureMcpServersDirectoryExists(): Promise<string> {
@@ -1415,6 +1578,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 						case "anthropic/claude-3-7-sonnet:beta":
 						case "anthropic/claude-3.7-sonnet":
 						case "anthropic/claude-3.7-sonnet:beta":
+						case "anthropic/claude-3.7-sonnet:thinking":
 						case "anthropic/claude-3.5-sonnet":
 						case "anthropic/claude-3.5-sonnet:beta":
 							// NOTE: this needs to be synced with api.ts/openrouter default model info
@@ -1531,8 +1695,11 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 	}
 
 	async deleteTaskWithId(id: string) {
+		console.info("deleteTaskWithId: ", id)
+
 		if (id === this.cline?.taskId) {
 			await this.clearTask()
+			console.debug("cleared task")
 		}
 
 		const { taskDirPath, apiConversationHistoryFilePath, uiMessagesFilePath } = await this.getTaskWithId(id)
@@ -1594,6 +1761,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			userInfo,
 			authToken,
 			mcpMarketplaceEnabled,
+			telemetrySetting,
 		} = await this.getState()
 
 		return {
@@ -1613,6 +1781,8 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			isLoggedIn: !!authToken,
 			userInfo,
 			mcpMarketplaceEnabled,
+			telemetrySetting,
+			vscMachineId: vscode.env.machineId,
 		}
 	}
 
@@ -1717,8 +1887,12 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			previousModeApiProvider,
 			previousModeModelId,
 			previousModeModelInfo,
+			previousModeThinkingBudgetTokens,
 			qwenApiLine,
 			liteLlmApiKey,
+			telemetrySetting,
+			xaiApiKey,
+			thinkingBudgetTokens,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1768,8 +1942,12 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			this.getGlobalState("previousModeApiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("previousModeModelId") as Promise<string | undefined>,
 			this.getGlobalState("previousModeModelInfo") as Promise<ModelInfo | undefined>,
+			this.getGlobalState("previousModeThinkingBudgetTokens") as Promise<number | undefined>,
 			this.getGlobalState("qwenApiLine") as Promise<string | undefined>,
 			this.getSecret("liteLlmApiKey") as Promise<string | undefined>,
+			this.getGlobalState("telemetrySetting") as Promise<TelemetrySetting | undefined>,
+			this.getSecret("xaiApiKey") as Promise<string | undefined>,
+			this.getGlobalState("thinkingBudgetTokens") as Promise<number | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -1831,9 +2009,11 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 				openRouterModelInfo,
 				vsCodeLmModelSelector,
 				o3MiniReasoningEffort,
+				thinkingBudgetTokens,
 				liteLlmBaseUrl,
 				liteLlmModelId,
 				liteLlmApiKey,
+				xaiApiKey,
 			},
 			lastShownAnnouncementId,
 			customInstructions,
@@ -1846,7 +2026,9 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			previousModeApiProvider,
 			previousModeModelId,
 			previousModeModelInfo,
+			previousModeThinkingBudgetTokens,
 			mcpMarketplaceEnabled,
+			telemetrySetting: telemetrySetting || "unset",
 		}
 	}
 
@@ -1906,6 +2088,53 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 		return await this.context.secrets.get(key)
 	}
 
+	// Open Graph Data
+
+	async fetchOpenGraphData(url: string) {
+		try {
+			// Use the fetchOpenGraphData function from link-preview.ts
+			const ogData = await fetchOpenGraphData(url)
+
+			// Send the data back to the webview
+			await this.postMessageToWebview({
+				type: "openGraphData",
+				openGraphData: ogData,
+				url: url,
+			})
+		} catch (error) {
+			console.error(`Error fetching Open Graph data for ${url}:`, error)
+			// Send an error response
+			await this.postMessageToWebview({
+				type: "openGraphData",
+				error: `Failed to fetch Open Graph data: ${error}`,
+				url: url,
+			})
+		}
+	}
+
+	// Check if a URL is an image
+	async checkIsImageUrl(url: string) {
+		try {
+			// Check if the URL is an image
+			const isImage = await isImageUrl(url)
+
+			// Send the result back to the webview
+			await this.postMessageToWebview({
+				type: "isImageUrlResult",
+				isImage,
+				url,
+			})
+		} catch (error) {
+			console.error(`Error checking if URL is an image: ${url}`, error)
+			// Send an error response
+			await this.postMessageToWebview({
+				type: "isImageUrlResult",
+				isImage: false,
+				url,
+			})
+		}
+	}
+
 	// dev
 
 	async resetState() {
@@ -1929,6 +2158,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			"mistralApiKey",
 			"liteLlmApiKey",
 			"authToken",
+			"xaiApiKey",
 		]
 		for (const key of secretKeys) {
 			await this.storeSecret(key, undefined)

src/extension.ts

@@ -8,6 +8,7 @@ import { createClineAPI } from "./exports"
 import "./utils/path" // necessary to have access to String.prototype.toPosix
 import { DIFF_VIEW_URI_SCHEME } from "./integrations/editor/DiffViewProvider"
 import assert from "node:assert"
+import { telemetryService } from "./services/telemetry/TelemetryService"
 
 /*
 Built using https://github.com/microsoft/vscode-webview-ui-toolkit
@@ -189,6 +190,7 @@ export function activate(context: vscode.ExtensionContext) {
 
 // This method is called when your extension is deactivated
 export function deactivate() {
+	telemetryService.shutdown()
 	Logger.log("Cline extension deactivated")
 }
 

src/integrations/checkpoints/Checkpoint-test-utils.ts.bak

@@ -0,0 +1,73 @@
+import * as vscode from "vscode"
+import fs from "fs/promises"
+import path from "path"
+import os from "os"
+import CheckpointTracker from "./CheckpointTracker"
+
+export async function createTestEnvironment() {
+    // Create temp directory structure
+    const tempDir = path.join(os.tmpdir(), `checkpoint-test-${Date.now()}`)
+    await fs.mkdir(tempDir, { recursive: true })
+
+    // Create storage path outside of working directory to avoid submodule issues
+    const globalStoragePath = path.join(os.tmpdir(), `storage-${Date.now()}`)
+    await fs.mkdir(globalStoragePath, { recursive: true })
+
+    // Create test file in a subdirectory
+    const testDir = path.join(tempDir, "src")
+    await fs.mkdir(testDir, { recursive: true })
+    const testFilePath = path.join(testDir, "test.txt")
+
+    // Create .gitignore to prevent git from treating directories as submodules
+    await fs.writeFile(path.join(tempDir, ".gitignore"), "storage/\n")
+
+    // Mock VS Code workspace
+    const mockWorkspaceFolders = [
+        {
+            uri: { fsPath: tempDir },
+            name: "test",
+            index: 0,
+        },
+    ]
+
+    const originalDescriptor = Object.getOwnPropertyDescriptor(vscode.workspace, "workspaceFolders")
+    Object.defineProperty(vscode.workspace, "workspaceFolders", {
+        get: () => mockWorkspaceFolders,
+    })
+
+    // Mock findFiles to return no nested git repos
+    const originalFindFiles = vscode.workspace.findFiles
+    vscode.workspace.findFiles = async () => []
+
+    // Mock VS Code configuration
+    const originalGetConfiguration = vscode.workspace.getConfiguration
+    vscode.workspace.getConfiguration = () =>
+        ({
+            get: (key: string) => (key === "enableCheckpoints" ? true : undefined),
+        }) as any
+
+    return {
+        tempDir,
+        globalStoragePath,
+        testFilePath,
+        originalDescriptor,
+        originalFindFiles,
+        originalGetConfiguration,
+        cleanup: async () => {
+            // Restore VS Code mocks
+            if (originalDescriptor) {
+                Object.defineProperty(vscode.workspace, "workspaceFolders", originalDescriptor)
+            }
+            vscode.workspace.getConfiguration = originalGetConfiguration
+            vscode.workspace.findFiles = originalFindFiles
+
+            // Clean up temp directories
+            await fs.rm(tempDir, { recursive: true, force: true })
+            await fs.rm(globalStoragePath, { recursive: true, force: true })
+        }
+    }
+}
+
+export async function createTestTracker(globalStoragePath?: string, taskId = "test-task-1") {
+    return await CheckpointTracker.create(taskId, globalStoragePath)
+}

src/integrations/checkpoints/CheckpointCommit.test.ts.bak

@@ -0,0 +1,153 @@
+import { expect } from "chai"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import fs from "fs/promises"
+import path from "path"
+import { createTestEnvironment, createTestTracker } from "./Checkpoint-test-utils"
+
+describe("Checkpoint Commit Operations", () => {
+    let env: Awaited<ReturnType<typeof createTestEnvironment>>
+
+    beforeEach(async () => {
+        env = await createTestEnvironment()
+    })
+
+    afterEach(async () => {
+        await env.cleanup()
+    })
+
+    it("should create commit with single file changes", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create initial file
+        await fs.writeFile(env.testFilePath, "initial content")
+
+        // Create first commit
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.be.a("string").and.not.empty
+
+        // Modify file
+        await fs.writeFile(env.testFilePath, "modified content")
+
+        // Create second commit
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.be.a("string").and.not.empty
+        expect(secondCommit).to.not.equal(firstCommit)
+
+        // Verify commits are different
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+        expect(diffSet).to.have.lengthOf(1)
+        expect(diffSet[0].before).to.equal("initial content")
+        expect(diffSet[0].after).to.equal("modified content")
+    })
+
+    it("should create commit with multiple file changes", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create initial files with newlines
+        const testFile2Path = path.join(env.tempDir, "src", "test2.txt")
+        await fs.writeFile(env.testFilePath, "file1 initial\n")
+        await fs.writeFile(testFile2Path, "file2 initial\n")
+
+        // Create first commit
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.be.a("string").and.not.empty
+
+        // Modify both files with newlines
+        await fs.writeFile(env.testFilePath, "file1 modified\n")
+        await fs.writeFile(testFile2Path, "file2 modified\n")
+
+        // Create second commit
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.be.a("string").and.not.empty
+        expect(secondCommit).to.not.equal(firstCommit)
+
+        // Get diff between commits
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+        expect(diffSet).to.have.lengthOf(2)
+
+        // Sort diffSet by path for consistent ordering
+        const sortedDiffs = diffSet.sort((a, b) => a.relativePath.localeCompare(b.relativePath))
+
+        // Verify file paths
+        expect(sortedDiffs[0].relativePath).to.equal("src/test.txt")
+        expect(sortedDiffs[1].relativePath).to.equal("src/test2.txt")
+
+        // Verify file contents
+        expect(sortedDiffs[0].before).to.equal("file1 initial\nfile2 initial\n")
+        expect(sortedDiffs[0].after).to.equal("file1 modified\nfile2 modified\n")
+    })
+
+    it("should create commit when files are deleted", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create and commit initial file
+        await fs.writeFile(env.testFilePath, "initial content")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.be.a("string").and.not.empty
+
+        // Delete file
+        await fs.unlink(env.testFilePath)
+
+        // Create second commit
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.be.a("string").and.not.empty
+        expect(secondCommit).to.not.equal(firstCommit)
+
+        // Verify file deletion was committed
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+        expect(diffSet).to.have.lengthOf(1)
+        expect(diffSet[0].before).to.equal("initial content")
+        expect(diffSet[0].after).to.equal("")
+    })
+
+    it("should create empty commit when no changes", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create and commit initial file
+        await fs.writeFile(env.testFilePath, "test content")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.be.a("string").and.not.empty
+
+        // Create commit without changes
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.be.a("string").and.not.empty
+        expect(secondCommit).to.not.equal(firstCommit)
+
+        // Verify no changes between commits
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+        expect(diffSet).to.have.lengthOf(0)
+    })
+
+    it("should handle files in nested directories", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create nested directory structure
+        const nestedDir = path.join(env.tempDir, "src", "deep", "nested")
+        await fs.mkdir(nestedDir, { recursive: true })
+        const nestedFilePath = path.join(nestedDir, "nested.txt")
+
+        // Create and commit file in nested directory
+        await fs.writeFile(nestedFilePath, "nested content")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.be.a("string").and.not.empty
+
+        // Modify nested file
+        await fs.writeFile(nestedFilePath, "modified nested content")
+
+        // Create second commit
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.be.a("string").and.not.empty
+
+        // Verify changes were committed
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+        expect(diffSet).to.have.lengthOf(1)
+        expect(diffSet[0].relativePath).to.equal("src/deep/nested/nested.txt")
+        expect(diffSet[0].before).to.equal("nested content")
+        expect(diffSet[0].after).to.equal("modified nested content")
+    })
+})

src/integrations/checkpoints/CheckpointCreation.test.ts.bak

@@ -0,0 +1,35 @@
+import { expect } from "chai"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import { createTestEnvironment, createTestTracker } from "./Checkpoint-test-utils"
+import CheckpointTracker from "./CheckpointTracker"
+
+describe("Checkpoint Creation", () => {
+    let env: Awaited<ReturnType<typeof createTestEnvironment>>
+
+    beforeEach(async () => {
+        env = await createTestEnvironment()
+    })
+
+    afterEach(async () => {
+        await env.cleanup()
+    })
+
+    it("should create a new checkpoint tracker", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        expect(tracker).to.not.be.undefined
+        expect(tracker).to.be.instanceOf(CheckpointTracker)
+
+        // Verify shadow git config
+        const configWorkTree = await tracker?.getShadowGitConfigWorkTree()
+        expect(configWorkTree).to.not.be.undefined
+    })
+
+    it("should throw error when globalStoragePath is missing", async () => {
+        try {
+            await createTestTracker(undefined)
+            expect.fail("Expected error was not thrown")
+        } catch (error: any) {
+            expect(error.message).to.equal("Global storage path is required to create a checkpoint tracker")
+        }
+    })
+})

src/integrations/checkpoints/CheckpointDiff.test.ts.bak

@@ -0,0 +1,68 @@
+import { expect } from "chai"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import fs from "fs/promises"
+import { createTestEnvironment, createTestTracker } from "./Checkpoint-test-utils"
+
+describe("Checkpoint Diff Operations", () => {
+    let env: Awaited<ReturnType<typeof createTestEnvironment>>
+
+    beforeEach(async () => {
+        env = await createTestEnvironment()
+    })
+
+    afterEach(async () => {
+        await env.cleanup()
+    })
+
+    it("should detect file changes between commits", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create initial file
+        await fs.writeFile(env.testFilePath, "initial content")
+
+        // Create first checkpoint
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.not.be.undefined
+
+        // Modify file
+        await fs.writeFile(env.testFilePath, "modified content")
+
+        // Create second checkpoint
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.not.be.undefined
+
+        // Get diff between commits
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+
+        // Verify diff results
+        expect(diffSet).to.have.lengthOf(1)
+        expect(diffSet[0].relativePath).to.equal("src/test.txt")
+        expect(diffSet[0].before).to.equal("initial content")
+        expect(diffSet[0].after).to.equal("modified content")
+    })
+
+    it("should detect changes between commit and working directory", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create initial file
+        await fs.writeFile(env.testFilePath, "initial content")
+
+        // Create checkpoint
+        const commit = await tracker.commit()
+        expect(commit).to.not.be.undefined
+
+        // Modify file without committing
+        await fs.writeFile(env.testFilePath, "working directory changes")
+
+        // Get diff between commit and working directory
+        const diffSet = await tracker.getDiffSet(commit)
+
+        // Verify diff results
+        expect(diffSet).to.have.lengthOf(1)
+        expect(diffSet[0].relativePath).to.equal("src/test.txt")
+        expect(diffSet[0].before).to.equal("initial content")
+        expect(diffSet[0].after).to.equal("working directory changes")
+    })
+})

src/integrations/checkpoints/CheckpointDisabled.test.ts.bak

@@ -0,0 +1,94 @@
+import { expect } from "chai"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import fs from "fs/promises"
+import * as vscode from "vscode"
+import { createTestEnvironment, createTestTracker } from "./Checkpoint-test-utils"
+
+describe("Checkpoint Disabled State", () => {
+    let env: Awaited<ReturnType<typeof createTestEnvironment>>
+    let originalGetConfiguration: typeof vscode.workspace.getConfiguration
+
+    beforeEach(async () => {
+        env = await createTestEnvironment()
+        originalGetConfiguration = vscode.workspace.getConfiguration
+
+        // Mock VS Code configuration to disable checkpoints
+        vscode.workspace.getConfiguration = () =>
+            ({
+                get: (key: string) => (key === "enableCheckpoints" ? false : undefined),
+            }) as any
+    })
+
+    afterEach(async () => {
+        await env.cleanup()
+        // Restore original configuration
+        vscode.workspace.getConfiguration = originalGetConfiguration
+    })
+
+    it("should return undefined when creating tracker", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        expect(tracker).to.be.undefined
+    })
+
+    it("should allow re-enabling checkpoints", async () => {
+        // First verify disabled state
+        const disabledTracker = await createTestTracker(env.globalStoragePath)
+        expect(disabledTracker).to.be.undefined
+
+        // Mock configuration to enable checkpoints
+        vscode.workspace.getConfiguration = () =>
+            ({
+                get: (key: string) => (key === "enableCheckpoints" ? true : undefined),
+            }) as any
+
+        // Verify tracker can be created when enabled
+        const enabledTracker = await createTestTracker(env.globalStoragePath)
+        expect(enabledTracker).to.not.be.undefined
+
+        // Verify operations work
+        if (!enabledTracker) {throw new Error("Failed to create tracker")}
+        await fs.writeFile(env.testFilePath, "test content")
+        const commit = await enabledTracker.commit()
+        expect(commit).to.be.a("string").and.not.empty
+    })
+
+    it("should prevent operations when disabled mid-session", async () => {
+        // Start with checkpoints enabled
+        vscode.workspace.getConfiguration = () =>
+            ({
+                get: (key: string) => (key === "enableCheckpoints" ? true : undefined),
+            }) as any
+
+        // Create tracker and initial commit
+        const tracker = await createTestTracker(env.globalStoragePath)
+        expect(tracker).to.not.be.undefined
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        await fs.writeFile(env.testFilePath, "initial content")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.be.a("string").and.not.empty
+
+        // Disable checkpoints
+        vscode.workspace.getConfiguration = () =>
+            ({
+                get: (key: string) => (key === "enableCheckpoints" ? false : undefined),
+            }) as any
+
+        // Verify new tracker cannot be created
+        const disabledTracker = await createTestTracker(env.globalStoragePath)
+        expect(disabledTracker).to.be.undefined
+
+        // Verify existing tracker still works
+        // This is expected behavior since the tracker was created when enabled
+        await fs.writeFile(env.testFilePath, "modified content")
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.be.a("string").and.not.empty
+        expect(secondCommit).to.not.equal(firstCommit)
+
+        // Verify diffs still work on existing tracker
+        const diffSet = await tracker.getDiffSet(firstCommit, secondCommit)
+        expect(diffSet).to.have.lengthOf(1)
+        expect(diffSet[0].before).to.equal("initial content")
+        expect(diffSet[0].after).to.equal("modified content")
+    })
+})

src/integrations/checkpoints/CheckpointExclusions.ts

@@ -0,0 +1,335 @@
+import fs from "fs/promises"
+import { join } from "path"
+import { fileExistsAtPath } from "../../utils/fs"
+import { GIT_DISABLED_SUFFIX } from "./CheckpointGitOperations"
+
+/**
+ * CheckpointExclusions Module
+ *
+ * A specialized module within Cline's Checkpoints system that manages file exclusion rules
+ * for the checkpoint tracking process. It provides:
+ *
+ * File Filtering:
+ * - File types (build artifacts, media, cache files, etc.)
+ * - Git LFS patterns from workspace
+ * - Environment and configuration files
+ * - Temporary and cache files
+ *
+ * Pattern Management:
+ * - Extensible category-based pattern system
+ * - Comprehensive file type coverage
+ * - Easy pattern updates and maintenance
+ *
+ * Git Integration:
+ * - Seamless integration with Git's exclude mechanism
+ * - Support for workspace-specific LFS patterns
+ * - Automatic pattern updates during checkpoints
+ *
+ * The module ensures efficient checkpoint creation by preventing unnecessary tracking
+ * of large files, binary files, and temporary artifacts while maintaining a clean
+ * and organized checkpoint history.
+ */
+
+/**
+ * Interface representing the result of a file exclusion check
+ */
+interface ExclusionResult {
+	/** Whether the file should be excluded */
+	excluded: boolean
+	/** Optional reason for exclusion */
+	reason?: string
+}
+
+/**
+ * Returns the default list of file and directory patterns to exclude from checkpoints.
+ * Combines built-in patterns with workspace-specific LFS patterns.
+ *
+ * @param lfsPatterns - Optional array of Git LFS patterns from workspace
+ * @returns Array of glob patterns to exclude
+ * @todo Make this configurable by the user
+ */
+export const getDefaultExclusions = (lfsPatterns: string[] = []): string[] => [
+	// Build and Development Artifacts
+	".git/",
+	`.git${GIT_DISABLED_SUFFIX}/`,
+	...getBuildArtifactPatterns(),
+
+	// Media Files
+	...getMediaFilePatterns(),
+
+	// Cache and Temporary Files
+	...getCacheFilePatterns(),
+
+	// Environment and Config Files
+	...getConfigFilePatterns(),
+
+	// Large Data Files
+	...getLargeDataFilePatterns(),
+
+	// Database Files
+	...getDatabaseFilePatterns(),
+
+	// Geospatial Datasets
+	...getGeospatialPatterns(),
+
+	// Log Files
+	...getLogFilePatterns(),
+
+	...lfsPatterns,
+]
+
+/**
+ * Returns patterns for common build and development artifact directories
+ * @returns Array of glob patterns for build artifacts
+ */
+function getBuildArtifactPatterns(): string[] {
+	return [
+		".gradle/",
+		".idea/",
+		".parcel-cache/",
+		".pytest_cache/",
+		".next/",
+		".nuxt/",
+		".sass-cache/",
+		".vs/",
+		".vscode/",
+		"Pods/",
+		"__pycache__/",
+		"bin/",
+		"build/",
+		"bundle/",
+		"coverage/",
+		"deps/",
+		"dist/",
+		"env/",
+		"node_modules/",
+		"obj/",
+		"out/",
+		"pkg/",
+		"pycache/",
+		"target/dependency/",
+		"temp/",
+		"vendor/",
+		"venv/",
+	]
+}
+
+/**
+ * Returns patterns for common media and image file types
+ * @returns Array of glob patterns for media files
+ */
+function getMediaFilePatterns(): string[] {
+	return [
+		"*.jpg",
+		"*.jpeg",
+		"*.png",
+		"*.gif",
+		"*.bmp",
+		"*.ico",
+		"*.webp",
+		"*.tiff",
+		"*.tif",
+		"*.svg",
+		"*.raw",
+		"*.heic",
+		"*.avif",
+		"*.eps",
+		"*.psd",
+		"*.3gp",
+		"*.aac",
+		"*.aiff",
+		"*.asf",
+		"*.avi",
+		"*.divx",
+		"*.flac",
+		"*.m4a",
+		"*.m4v",
+		"*.mkv",
+		"*.mov",
+		"*.mp3",
+		"*.mp4",
+		"*.mpeg",
+		"*.mpg",
+		"*.ogg",
+		"*.opus",
+		"*.rm",
+		"*.rmvb",
+		"*.vob",
+		"*.wav",
+		"*.webm",
+		"*.wma",
+		"*.wmv",
+	]
+}
+
+/**
+ * Returns patterns for cache, temporary, and system files
+ * @returns Array of glob patterns for cache files
+ */
+function getCacheFilePatterns(): string[] {
+	return [
+		"*.DS_Store",
+		"*.bak",
+		"*.cache",
+		"*.crdownload",
+		"*.dmp",
+		"*.dump",
+		"*.eslintcache",
+		"*.lock",
+		"*.log",
+		"*.old",
+		"*.part",
+		"*.partial",
+		"*.pyc",
+		"*.pyo",
+		"*.stackdump",
+		"*.swo",
+		"*.swp",
+		"*.temp",
+		"*.tmp",
+		"*.Thumbs.db",
+	]
+}
+
+/**
+ * Returns patterns for environment and configuration files
+ * @returns Array of glob patterns for config files
+ */
+function getConfigFilePatterns(): string[] {
+	return ["*.env*", "*.local", "*.development", "*.production"]
+}
+
+/**
+ * Returns patterns for common large binary and archive files
+ * @returns Array of glob patterns for large data files
+ */
+function getLargeDataFilePatterns(): string[] {
+	return [
+		"*.zip",
+		"*.tar",
+		"*.gz",
+		"*.rar",
+		"*.7z",
+		"*.iso",
+		"*.bin",
+		"*.exe",
+		"*.dll",
+		"*.so",
+		"*.dylib",
+		"*.dat",
+		"*.dmg",
+		"*.msi",
+	]
+}
+
+/**
+ * Returns patterns for database and data storage files
+ * @returns Array of glob patterns for database files
+ */
+function getDatabaseFilePatterns(): string[] {
+	return [
+		"*.arrow",
+		"*.accdb",
+		"*.aof",
+		"*.avro",
+		"*.bak",
+		"*.bson",
+		"*.csv",
+		"*.db",
+		"*.dbf",
+		"*.dmp",
+		"*.frm",
+		"*.ibd",
+		"*.mdb",
+		"*.myd",
+		"*.myi",
+		"*.orc",
+		"*.parquet",
+		"*.pdb",
+		"*.rdb",
+		"*.sql",
+		"*.sqlite",
+	]
+}
+
+/**
+ * Returns patterns for geospatial and mapping data files
+ * @returns Array of glob patterns for geospatial files
+ */
+function getGeospatialPatterns(): string[] {
+	return [
+		"*.shp",
+		"*.shx",
+		"*.dbf",
+		"*.prj",
+		"*.sbn",
+		"*.sbx",
+		"*.shp.xml",
+		"*.cpg",
+		"*.gdb",
+		"*.mdb",
+		"*.gpkg",
+		"*.kml",
+		"*.kmz",
+		"*.gml",
+		"*.geojson",
+		"*.dem",
+		"*.asc",
+		"*.img",
+		"*.ecw",
+		"*.las",
+		"*.laz",
+		"*.mxd",
+		"*.qgs",
+		"*.grd",
+		"*.csv",
+		"*.dwg",
+		"*.dxf",
+	]
+}
+
+/**
+ * Returns patterns for log and debug output files
+ * @returns Array of glob patterns for log files
+ */
+function getLogFilePatterns(): string[] {
+	return ["*.error", "*.log", "*.logs", "*.npm-debug.log*", "*.out", "*.stdout", "yarn-debug.log*", "yarn-error.log*"]
+}
+
+/**
+ * Writes the combined exclusion patterns to Git's exclude file.
+ * Creates the info directory if it doesn't exist.
+ *
+ * @param gitPath - Path to the .git directory
+ * @param lfsPatterns - Optional array of Git LFS patterns to include
+ */
+export const writeExcludesFile = async (gitPath: string, lfsPatterns: string[] = []): Promise<void> => {
+	const excludesPath = join(gitPath, "info", "exclude")
+	await fs.mkdir(join(gitPath, "info"), { recursive: true })
+
+	const patterns = getDefaultExclusions(lfsPatterns)
+	await fs.writeFile(excludesPath, patterns.join("\n"))
+}
+
+/**
+ * Retrieves Git LFS patterns from the workspace's .gitattributes file.
+ * Returns an empty array if no patterns found or file doesn't exist.
+ *
+ * @param workspacePath - Path to the workspace root
+ * @returns Array of Git LFS patterns found in .gitattributes
+ */
+export const getLfsPatterns = async (workspacePath: string): Promise<string[]> => {
+	try {
+		const attributesPath = join(workspacePath, ".gitattributes")
+		if (await fileExistsAtPath(attributesPath)) {
+			const attributesContent = await fs.readFile(attributesPath, "utf8")
+			return attributesContent
+				.split("\n")
+				.filter((line) => line.includes("filter=lfs"))
+				.map((line) => line.split(" ")[0].trim())
+		}
+	} catch (error) {
+		console.warn("Failed to read .gitattributes:", error)
+	}
+	return []
+}

src/integrations/checkpoints/CheckpointGitOperations.ts

@@ -0,0 +1,482 @@
+import simpleGit, { SimpleGit } from "simple-git"
+import { getLfsPatterns, writeExcludesFile } from "./CheckpointExclusions"
+import fs from "fs/promises"
+import * as path from "path"
+import { fileExistsAtPath } from "../../utils/fs"
+import * as vscode from "vscode"
+import { getWorkingDirectory, hashWorkingDir } from "./CheckpointUtils"
+import { HistoryItem } from "../../shared/HistoryItem"
+
+interface StorageProvider {
+	context: {
+		globalStorageUri: { fsPath: string }
+	}
+}
+
+interface CheckpointAddResult {
+	success: boolean
+	fileCount: number
+}
+
+/**
+ * GitOperations Class
+ *
+ * Handles git-specific operations for Cline's Checkpoints system.
+ *
+ * Key responsibilities:
+ * - Git repository initialization and configuration
+ * - Git settings management (user, LFS, etc.)
+ * - Worktree configuration and management
+ * - Task-specific branch management (creation, switching, deletion)
+ * - Handling of both legacy and branch-per-task checkpoint structures
+ * - Managing nested git repositories during checkpoint operations
+ * - File staging and checkpoint creation
+ * - Shadow git repository maintenance and cleanup
+ */
+export class GitOperations {
+	private cwd: string
+	private isLegacyCheckpoint: boolean
+
+	/**
+	 * Creates a new GitOperations instance.
+	 *
+	 * @param cwd - The current working directory for git operations
+	 * @param isLegacyCheckpoint - Whether this is operating in legacy checkpoint mode
+	 */
+	constructor(cwd: string, isLegacyCheckpoint: boolean) {
+		this.cwd = cwd
+		this.isLegacyCheckpoint = isLegacyCheckpoint
+	}
+
+	/**
+	 * Initializes or verifies a shadow Git repository for checkpoint tracking.
+	 * Creates a new repository if one doesn't exist, or verifies the worktree
+	 * configuration if it does.
+	 *
+	 * Key operations:
+	 * - Creates/verifies shadow git repository
+	 * - Configures git settings (user, LFS, etc.)
+	 * - Sets up worktree to point to workspace
+	 * - Creates initial empty commit
+	 * - Handles both legacy and branch-per-task checkpoint structures
+	 *
+	 * @param gitPath - Path to the .git directory
+	 * @param cwd - The current working directory for git operations
+	 * @param isLegacyCheckpoint - Whether this is operating in legacy checkpoint mode
+	 * @returns Promise<string> Path to the initialized .git directory
+	 * @throws Error if:
+	 * - Worktree verification fails for existing repository
+	 * - Git initialization or configuration fails
+	 * - Unable to create initial commit
+	 * - LFS pattern setup fails
+	 */
+	public static async initShadowGit(gitPath: string, cwd: string, isLegacyCheckpoint: boolean): Promise<string> {
+		console.info(`Initializing ${isLegacyCheckpoint ? "legacy" : "branch-per-task"} shadow git`)
+
+		// If repo exists, just verify worktree
+		if (await fileExistsAtPath(gitPath)) {
+			const git = simpleGit(path.dirname(gitPath))
+			const worktree = await git.getConfig("core.worktree")
+			if (worktree.value !== cwd) {
+				throw new Error("Checkpoints can only be used in the original workspace: " + worktree.value)
+			}
+			console.warn(`Using existing ${isLegacyCheckpoint ? "legacy" : "branch-per-task"} shadow git at ${gitPath}`)
+			return gitPath
+		}
+
+		// Initialize new repo
+		const checkpointsDir = path.dirname(gitPath)
+		console.warn(`Creating new ${isLegacyCheckpoint ? "legacy" : "branch-per-task"} shadow git in ${checkpointsDir}`)
+
+		const git = simpleGit(checkpointsDir)
+		await git.init()
+
+		// Configure repo
+		await git.addConfig("core.worktree", cwd)
+		await git.addConfig("commit.gpgSign", "false")
+		await git.addConfig("user.name", "Cline Checkpoint")
+		await git.addConfig("user.email", "checkpoint@cline.bot")
+		await git.addConfig("core.quotePath", "false")
+		await git.addConfig("core.precomposeunicode", "true")
+
+		// Set up LFS patterns
+		const lfsPatterns = await getLfsPatterns(cwd)
+		await writeExcludesFile(gitPath, lfsPatterns)
+
+		// Initial commit only on first repo creation
+		await git.commit("initial commit", { "--allow-empty": null })
+
+		console.warn(`${isLegacyCheckpoint ? "Legacy" : "New"} shadow git initialization completed`)
+
+		return gitPath
+	}
+
+	/**
+	 * Retrieves the worktree path from the shadow git configuration.
+	 * The worktree path indicates where the shadow git repository is tracking files,
+	 * which should match the current workspace directory.
+	 *
+	 * @param gitPath - Path to the .git directory
+	 * @returns Promise<string | undefined> The worktree path or undefined if not found
+	 * @throws Error if unable to get worktree path
+	 */
+	public async getShadowGitConfigWorkTree(gitPath: string): Promise<string | undefined> {
+		try {
+			const git = simpleGit(path.dirname(gitPath))
+			const worktree = await git.getConfig("core.worktree")
+			return worktree.value || undefined
+		} catch (error) {
+			console.error("Failed to get shadow git config worktree:", error)
+			return undefined
+		}
+	}
+
+	/**
+	 * Checks if a shadow Git repository exists for the given task and workspace.
+	 * Checks both legacy checkpoint paths (tasks/{taskId}/checkpoints/.git) and
+	 * branch-per-task paths (checkpoints/{workspaceHash}/.git).
+	 *
+	 * @param taskId - The ID of the task whose shadow git to check
+	 * @param provider - The ClineProvider instance for accessing VS Code functionality
+	 * @returns Promise<boolean> True if either a legacy or branch-per-task shadow git exists, false otherwise
+	 */
+	public static async doesShadowGitExist(taskId: string, provider?: StorageProvider): Promise<boolean> {
+		const globalStoragePath = provider?.context.globalStorageUri.fsPath
+		if (!globalStoragePath) {
+			return false
+		}
+
+		// Check legacy checkpoint path to see if this is a legacy task
+		const legacyGitPath = path.join(globalStoragePath, "tasks", taskId, "checkpoints", ".git")
+		if (await fileExistsAtPath(legacyGitPath)) {
+			console.info("Found legacy shadow git")
+			return true
+		}
+
+		// Check branch-per-task path for newer tasks
+		const workingDir = await getWorkingDirectory()
+		const cwdHash = hashWorkingDir(workingDir)
+		const gitPath = path.join(globalStoragePath, "checkpoints", cwdHash, ".git")
+		const exists = await fileExistsAtPath(gitPath)
+		if (exists) {
+			console.info("Found branch-per-task shadow git")
+		}
+		return exists
+	}
+
+	/**
+	 * Deletes a branch in the git repository, handling cases where the branch is currently checked out.
+	 * If the branch to be deleted is currently checked out, the method will:
+	 * 1. Save the current worktree configuration
+	 * 2. Temporarily unset the worktree to prevent workspace modifications
+	 * 3. Force switch to master/main branch
+	 * 4. Delete the target branch
+	 * 5. Restore the worktree configuration
+	 *
+	 * @param git - SimpleGit instance to use for operations
+	 * @param branchName - Name of the branch to delete
+	 * @param checkpointsDir - Directory containing the git repository
+	 * @throws Error if:
+	 *  - Branch deletion fails
+	 *  - Unable to switch to master/main branch after 3 retries
+	 *  - Git operations fail during the process
+	 */
+	public static async deleteBranchForGit(git: SimpleGit, branchName: string, checkpointsDir: string): Promise<void> {
+		// Check if branch exists
+		const branches = await git.branchLocal()
+		if (!branches.all.includes(branchName)) {
+			console.error(`Task branch ${branchName} does not exist, nothing to delete`)
+			return // Branch doesn't exist, nothing to delete
+		}
+
+		// First, if we're on the branch to be deleted, switch to master/main
+		const currentBranch = await git.revparse(["--abbrev-ref", "HEAD"])
+		console.info(`Current branch: ${currentBranch}, target branch to delete: ${branchName}`)
+
+		if (currentBranch === branchName) {
+			console.debug("Currently on branch to be deleted, switching to master/main first")
+			// Save the current worktree config
+			const worktree = await git.getConfig("core.worktree")
+			console.debug(`Saved current worktree config: ${worktree.value}`)
+
+			try {
+				// Temporarily unset worktree to prevent workspace modifications
+				console.debug("Temporarily unsetting worktree config")
+				await git.raw(["config", "--unset", "core.worktree"])
+
+				// Force discard all changes
+				console.debug("Discarding all changes")
+				await git.reset(["--hard"])
+				await git.clean("f", ["-d"]) // Clean mode 'f' for force, -d for directories
+
+				// Determine default branch (master or main)
+				const defaultBranch = branches.all.includes("main") ? "main" : "master"
+				console.debug(`Using ${defaultBranch} as default branch`)
+
+				// Switch to default branch and delete branch
+				console.debug(`Attempting to force switch to ${defaultBranch} branch`)
+				await git.checkout([defaultBranch, "--force"])
+
+				// Verify the switch completed
+				let retries = 3
+				while (retries > 0) {
+					const newBranch = await git.revparse(["--abbrev-ref", "HEAD"])
+					console.debug(`Verifying branch switch - current branch: ${newBranch}, attempts left: ${retries}`)
+					if (newBranch === defaultBranch) {
+						console.debug(`Successfully switched to ${defaultBranch} branch`)
+						break
+					}
+					retries--
+					if (retries === 0) {
+						throw new Error(`Failed to switch to ${defaultBranch} branch`)
+					}
+				}
+
+				console.info(`Deleting branch: ${branchName}`)
+				await git.raw(["branch", "-D", branchName])
+				console.debug(`Successfully deleted branch: ${branchName}`)
+			} finally {
+				// Restore the worktree config
+				if (worktree.value) {
+					console.debug(`Restoring worktree config to: ${worktree.value}`)
+					await git.addConfig("core.worktree", worktree.value)
+				}
+			}
+		} else {
+			// If we're not on the branch, we can safely delete it
+			console.info(`Directly deleting branch ${branchName} since we're not on it`)
+			await git.raw(["branch", "-D", branchName])
+			console.debug(`Successfully deleted branch: ${branchName}`)
+		}
+	}
+
+	/**
+	 * Static method to delete a task's branch using stored workspace path.
+	 * Handles both branch-per-task and legacy checkpoint formats:
+	 * 1. First attempts to delete branch-per-task checkpoint if it exists
+	 * 2. Falls back to deleting legacy checkpoint directory if found
+	 *
+	 * @param taskId - The ID of the task whose branch should be deleted
+	 * @param historyItem - The history item containing the shadow git config
+	 * @param globalStoragePath - Path to VS Code's global storage
+	 * @throws Error if:
+	 *  - Global storage path is invalid
+	 *  - Branch deletion fails
+	 *  - Legacy checkpoint directory deletion fails
+	 */
+	public static async deleteTaskBranchStatic(
+		taskId: string,
+		historyItem: HistoryItem,
+		globalStoragePath: string,
+	): Promise<void> {
+		try {
+			console.debug("Starting static task branch deletion process...")
+
+			if (!globalStoragePath) {
+				throw new Error("Global storage uri is invalid")
+			}
+
+			// First try to handle branch-per-task checkpoint
+			let workingDir: string
+			if (historyItem.shadowGitConfigWorkTree) {
+				workingDir = historyItem.shadowGitConfigWorkTree
+			} else {
+				// Try to determine working directory from current state
+				workingDir = await getWorkingDirectory()
+			}
+
+			const cwdHash = hashWorkingDir(workingDir)
+			const checkpointsDir = path.join(globalStoragePath, "checkpoints", cwdHash)
+			const gitPath = path.join(checkpointsDir, ".git")
+
+			if (await fileExistsAtPath(gitPath)) {
+				console.debug(`Found branch-per-task git repository at ${gitPath}`)
+				const git = simpleGit(path.dirname(gitPath))
+				const branchName = `task-${taskId}`
+
+				// Check if the branch exists
+				const branches = await git.branchLocal()
+				if (branches.all.includes(branchName)) {
+					console.info(`Found branch ${branchName} to delete`)
+					await GitOperations.deleteBranchForGit(git, branchName, checkpointsDir)
+					return
+				}
+				console.warn(`Branch ${branchName} not found in branch-per-task repository`)
+			}
+
+			// Only check legacy checkpoint if we didn't find/delete a branch-per-task branch
+			const legacyCheckpointsDir = path.join(globalStoragePath, "tasks", taskId, "checkpoints")
+			const legacyGitPath = path.join(legacyCheckpointsDir, ".git")
+
+			if (await fileExistsAtPath(legacyGitPath)) {
+				console.info("Found legacy checkpoint, deleting directory")
+				try {
+					await fs.rm(legacyCheckpointsDir, { recursive: true, force: true })
+					console.debug("Successfully deleted legacy checkpoint directory")
+					return
+				} catch (error) {
+					console.error("Failed to delete legacy checkpoint directory:", error)
+					throw error
+				}
+			}
+
+			console.info("No checkpoints found to delete")
+		} catch (error) {
+			console.error("Failed to delete task branch:", error)
+			throw new Error(`Failed to delete task branch: ${error instanceof Error ? error.message : String(error)}`)
+		}
+	}
+
+	/**
+	 * Since we use git to track checkpoints, we need to temporarily disable nested git repos to work around git's
+	 * requirement of using submodules for nested repos.
+	 *
+	 * This method renames nested .git directories by adding/removing a suffix to temporarily disable/enable them.
+	 * The root .git directory is preserved. Uses VS Code's workspace API to find nested .git directories and
+	 * only processes actual directories (not files named .git).
+	 *
+	 * @param disable - If true, adds suffix to disable nested git repos. If false, removes suffix to re-enable them.
+	 * @throws Error if renaming any .git directory fails
+	 */
+	public async renameNestedGitRepos(disable: boolean): Promise<void> {
+		// Find all .git directories that are not at the root level using VS Code API
+		const gitFiles = await vscode.workspace.findFiles(
+			new vscode.RelativePattern(this.cwd, "**/.git" + (disable ? "" : GIT_DISABLED_SUFFIX)),
+			new vscode.RelativePattern(this.cwd, ".git/**"), // Exclude root .git
+		)
+
+		// Filter to only include directories
+		const gitPaths: string[] = []
+		for (const file of gitFiles) {
+			const relativePath = path.relative(this.cwd, file.fsPath)
+			try {
+				const stats = await fs.stat(path.join(this.cwd, relativePath))
+				if (stats.isDirectory()) {
+					gitPaths.push(relativePath)
+				}
+			} catch {
+				// Skip if stat fails
+				continue
+			}
+		}
+
+		// For each nested .git directory, rename it based on the disable flag
+		for (const gitPath of gitPaths) {
+			const fullPath = path.join(this.cwd, gitPath)
+			let newPath: string
+			if (disable) {
+				newPath = fullPath + GIT_DISABLED_SUFFIX
+			} else {
+				newPath = fullPath.endsWith(GIT_DISABLED_SUFFIX) ? fullPath.slice(0, -GIT_DISABLED_SUFFIX.length) : fullPath
+			}
+
+			try {
+				await fs.rename(fullPath, newPath)
+				console.info(`${disable ? "Disabled" : "Enabled"} nested git repo ${gitPath}`)
+			} catch (error) {
+				console.error(`Failed to ${disable ? "disable" : "enable"} nested git repo ${gitPath}:`, error)
+			}
+		}
+	}
+
+	/**
+	 * Switches to or creates a task-specific branch in the shadow Git repository.
+	 * For legacy checkpoints, this is a no-op since they use separate repositories.
+	 * For branch-per-task checkpoints, this ensures we're on the correct task branch before operations.
+	 *
+	 * The method performs the following:
+	 * 1. Gets the shadow git path and initializes simple-git
+	 * 2. Constructs the branch name using the task ID
+	 * 3. Checks if the branch exists:
+	 *    - If not, creates a new branch
+	 *    - If yes, switches to the existing branch
+	 * 4. Verifies the branch switch completed successfully
+	 *
+	 * Branch naming convention:
+	 * task-{taskId}
+	 *
+	 * @param taskId - The ID of the task whose branch to switch to
+	 * @param gitPath - Path to the .git directory
+	 * @returns Promise<void>
+	 * @throws Error if branch operations fail or git commands error
+	 */
+	public async switchToTaskBranch(taskId: string, gitPath: string): Promise<void> {
+		const git = simpleGit(path.dirname(gitPath))
+		const branchName = `task-${taskId}`
+
+		// Create new task-specific branch, or switch to one if it already exists.
+		const branches = await git.branchLocal()
+		if (!branches.all.includes(branchName)) {
+			console.info(`Creating new task branch: ${branchName}`)
+			await git.checkoutLocalBranch(branchName)
+		} else {
+			console.info(`Switching to existing task branch: ${branchName}`)
+			await git.checkout(branchName)
+		}
+
+		const currentBranch = await git.revparse(["--abbrev-ref", "HEAD"])
+		console.info(`Current Checkpoint branch after switch: ${currentBranch}`)
+	}
+
+	/**
+	 * Adds files to the shadow git repository while handling nested git repos.
+	 * Uses git commands to list files and stages them for commit.
+	 * Respects .gitignore and handles LFS patterns.
+	 *
+	 * Process:
+	 * 1. Updates exclude patterns from LFS config
+	 * 2. Temporarily disables nested git repos
+	 * 3. Gets list of tracked and untracked files from git (respecting .gitignore)
+	 * 4. Adds all files to git staging
+	 * 5. Re-enables nested git repos
+	 *
+	 * @param git - SimpleGit instance configured for the shadow git repo
+	 * @param gitPath - Path to the .git directory
+	 * @returns Promise<CheckpointAddResult> Object containing success status, message, and file count
+	 * @throws Error if:
+	 *  - File operations fail
+	 *  - Git commands error
+	 *  - LFS pattern updates fail
+	 *  - Nested git repo handling fails
+	 */
+	public async addCheckpointFiles(git: SimpleGit, gitPath: string): Promise<CheckpointAddResult> {
+		try {
+			// Update exclude patterns before each commit
+			await writeExcludesFile(gitPath, await getLfsPatterns(this.cwd))
+			await this.renameNestedGitRepos(true)
+			//console.info("Starting checkpoint add operation...")
+
+			// Get list of all files git would track (respects .gitignore)
+			await git.addConfig("core.quotePath", "false")
+			await git.addConfig("core.precomposeunicode", "true")
+			const gitFiles = (await git.raw(["ls-files", "--others", "--exclude-standard", "--cached"]))
+				.split("\n")
+				.filter(Boolean)
+
+			// Add filtered files
+			if (gitFiles.length === 0) {
+				console.info("No files to add to checkpoint")
+				return { success: true, fileCount: 0 }
+			}
+
+			try {
+				console.info(`Adding ${gitFiles.length} files to checkpoint`)
+				await git.addConfig("core.quotePath", "false")
+				await git.addConfig("core.precomposeunicode", "true")
+				await git.add(gitFiles)
+				console.info("Checkpoint add operation completed successfully")
+				return { success: true, fileCount: gitFiles.length }
+			} catch (error) {
+				console.error("Checkpoint add operation failed:", error)
+				throw error
+			}
+		} catch (error) {
+			console.error("Failed to add files to checkpoint", error)
+			throw error
+		} finally {
+			await this.renameNestedGitRepos(false)
+		}
+	}
+}
+
+export const GIT_DISABLED_SUFFIX = "_disabled"

src/integrations/checkpoints/CheckpointRevert.test.ts.bak

@@ -0,0 +1,95 @@
+import { expect } from "chai"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import fs from "fs/promises"
+import path from "path"
+import { createTestEnvironment, createTestTracker } from "./Checkpoint-test-utils"
+
+describe("Checkpoint Revert Operations", () => {
+    let env: Awaited<ReturnType<typeof createTestEnvironment>>
+
+    beforeEach(async () => {
+        env = await createTestEnvironment()
+    })
+
+    afterEach(async () => {
+        await env.cleanup()
+    })
+
+    it("should revert working directory to a previous checkpoint state", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create and commit initial state
+        await fs.writeFile(env.testFilePath, "initial content")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.not.be.undefined
+
+        // Create and commit changes
+        await fs.writeFile(env.testFilePath, "modified content")
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.not.be.undefined
+
+        // Make more changes without committing
+        await fs.writeFile(env.testFilePath, "uncommitted changes")
+
+        // Revert to first commit
+        await tracker.resetHead(firstCommit!)
+
+        // Verify file content matches initial state
+        const resetContent = await fs.readFile(env.testFilePath, "utf8")
+        expect(resetContent).to.equal("initial content")
+    })
+
+    it("should handle reverting with multiple files", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create and commit initial state with multiple files
+        const testFile2Path = path.join(env.tempDir, "src", "test2.txt")
+        await fs.writeFile(env.testFilePath, "file1 initial")
+        await fs.writeFile(testFile2Path, "file2 initial")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.not.be.undefined
+
+        // Modify both files and commit
+        await fs.writeFile(env.testFilePath, "file1 modified")
+        await fs.writeFile(testFile2Path, "file2 modified")
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.not.be.undefined
+
+        // Make more changes
+        await fs.writeFile(env.testFilePath, "file1 uncommitted")
+        await fs.writeFile(testFile2Path, "file2 uncommitted")
+
+        // Reset to first commit
+        await tracker.resetHead(firstCommit!)
+
+        // Verify both files match initial state
+        const file1Content = await fs.readFile(env.testFilePath, "utf8")
+        const file2Content = await fs.readFile(testFile2Path, "utf8")
+        expect(file1Content).to.equal("file1 initial")
+        expect(file2Content).to.equal("file2 initial")
+    })
+
+    it("should handle reverting when files are deleted", async () => {
+        const tracker = await createTestTracker(env.globalStoragePath)
+        if (!tracker) {throw new Error("Failed to create tracker")}
+
+        // Create and commit initial state
+        await fs.writeFile(env.testFilePath, "initial content")
+        const firstCommit = await tracker.commit()
+        expect(firstCommit).to.not.be.undefined
+
+        // Delete file and commit
+        await fs.unlink(env.testFilePath)
+        const secondCommit = await tracker.commit()
+        expect(secondCommit).to.not.be.undefined
+
+        // Revert to first commit
+        await tracker.resetHead(firstCommit!)
+
+        // Verify file is restored with original content
+        const resetContent = await fs.readFile(env.testFilePath, "utf8")
+        expect(resetContent).to.equal("initial content")
+    })
+})

src/integrations/checkpoints/CheckpointTaskSwitch.test.ts.bak

@@ -0,0 +1,120 @@
+import { expect } from "chai"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import fs from "fs/promises"
+import { createTestEnvironment, createTestTracker } from "./Checkpoint-test-utils"
+import { HistoryItem } from "../../shared/HistoryItem"
+import CheckpointTracker from "./CheckpointTracker"
+
+describe("Checkpoint Task Switching", () => {
+    let env: Awaited<ReturnType<typeof createTestEnvironment>>
+    let taskId1: string
+    let taskId2: string
+    let tracker1: CheckpointTracker | undefined
+    let tracker2: CheckpointTracker | undefined
+
+    beforeEach(async () => {
+        env = await createTestEnvironment()
+        taskId1 = "task-1"
+        taskId2 = "task-2"
+        tracker1 = await createTestTracker(env.globalStoragePath, taskId1)
+        if (!tracker1) {throw new Error("Failed to create tracker1")}
+    })
+
+    afterEach(async () => {
+        await env.cleanup()
+    })
+
+    it("should maintain separate history for each task", async () => {
+        if (!tracker1) {throw new Error("Failed to create tracker1")}
+        
+        // Create and commit file in first task
+        await fs.writeFile(env.testFilePath, "task1 initial")
+        const task1Commit1 = await tracker1.commit()
+        expect(task1Commit1).to.be.a("string").and.not.empty
+
+        // Modify and commit again in first task
+        await fs.writeFile(env.testFilePath, "task1 modified")
+        const task1Commit2 = await tracker1.commit()
+        expect(task1Commit2).to.be.a("string").and.not.empty
+
+        // Create second task tracker
+        tracker2 = await createTestTracker(env.globalStoragePath, taskId2)
+        if (!tracker2) {throw new Error("Failed to create tracker2")}
+
+        // Create and commit file in second task
+        await fs.writeFile(env.testFilePath, "task2 initial")
+        const task2Commit1 = await tracker2.commit()
+        expect(task2Commit1).to.be.a("string").and.not.empty
+
+        // Create another commit to establish history
+        await fs.writeFile(env.testFilePath, "task2 modified")
+        const task2Commit2 = await tracker2.commit()
+        expect(task2Commit2).to.be.a("string").and.not.empty
+
+        // Verify second task's history
+        const task2Diff = await tracker2.getDiffSet(task2Commit1, task2Commit2)
+        expect(task2Diff).to.have.lengthOf(1)
+        expect(task2Diff[0].before).to.equal("task2 initial")
+        expect(task2Diff[0].after).to.equal("task2 modified")
+
+        // Switch back to first task by creating new tracker
+        const tracker1Again = await createTestTracker(env.globalStoragePath, taskId1)
+        if (!tracker1Again) {throw new Error("Failed to create tracker1Again")}
+
+        // Verify first task's history is preserved
+        const task1Diff = await tracker1Again.getDiffSet(task1Commit1, task1Commit2)
+        expect(task1Diff[0].before).to.equal("task1 initial")
+        expect(task1Diff[0].after).to.equal("task1 modified")
+
+        // Reset first task to initial state
+        if (!task1Commit1) {throw new Error("Failed to create initial commit")}
+        await tracker1Again.resetHead(task1Commit1)
+        const resetContent = await fs.readFile(env.testFilePath, "utf8")
+        expect(resetContent).to.equal("task1 initial")
+    })
+
+    it("should handle task deletion and recreation", async () => {
+        if (!tracker1) {throw new Error("Failed to create tracker1")}
+
+        // Create and commit file in first task
+        await fs.writeFile(env.testFilePath, "task1 content")
+        const task1Commit = await tracker1.commit()
+        expect(task1Commit).to.be.a("string").and.not.empty
+
+        // Create second task
+        tracker2 = await createTestTracker(env.globalStoragePath, taskId2)
+        if (!tracker2) {throw new Error("Failed to create tracker2")}
+        await fs.writeFile(env.testFilePath, "task2 content")
+        const task2Commit = await tracker2.commit()
+        expect(task2Commit).to.be.a("string").and.not.empty
+
+        // Delete second task's checkpoints
+        const historyItem: HistoryItem = {
+            id: `test-${Date.now()}`,
+            ts: Date.now(),
+            task: taskId2,
+            shadowGitConfigWorkTree: env.tempDir,
+            tokensIn: 0,
+            tokensOut: 0,
+            totalCost: 0,
+        }
+        await CheckpointTracker.deleteCheckpoints(taskId2, historyItem, env.globalStoragePath)
+
+        // Recreate second task
+        const tracker2Again = await createTestTracker(env.globalStoragePath, taskId2)
+        if (!tracker2Again) {throw new Error("Failed to create tracker2Again")}
+
+        // Create new commit in recreated task
+        await fs.writeFile(env.testFilePath, "task2 new content")
+        const newCommit = await tracker2Again.commit()
+        expect(newCommit).to.be.a("string").and.not.empty
+
+        // Switch back to first task and verify its history is intact
+        const tracker1Again = await createTestTracker(env.globalStoragePath, taskId1)
+        if (!tracker1Again) {throw new Error("Failed to create tracker1Again")}
+        if (!task1Commit) {throw new Error("Failed to create initial commit")}
+        await tracker1Again.resetHead(task1Commit)
+        const resetContent = await fs.readFile(env.testFilePath, "utf8")
+        expect(resetContent).to.equal("task1 content")
+    })
+})

src/integrations/checkpoints/CheckpointTracker-new.ts

@@ -0,0 +1,453 @@
+import fs from "fs/promises"
+import * as path from "path"
+import simpleGit, { SimpleGit } from "simple-git"
+import * as vscode from "vscode"
+import { HistoryItem } from "../../shared/HistoryItem"
+import { GitOperations } from "./CheckpointGitOperations"
+import { getShadowGitPath, hashWorkingDir, getWorkingDirectory, detectLegacyCheckpoint } from "./CheckpointUtils"
+
+/**
+ * CheckpointTracker Module
+ *
+ * Core implementation of Cline's Checkpoints system that provides version control
+ * capabilities without interfering with the user's main Git repository. Key features:
+ *
+ * Shadow Git Repository:
+ * - Creates and manages an isolated Git repository for tracking checkpoints
+ * - Handles nested Git repositories by temporarily disabling them
+ * - Configures Git settings automatically (identity, LFS, etc.)
+ *
+ * File Management:
+ * - Integrates with CheckpointExclusions for file filtering
+ * - Handles workspace validation and path resolution
+ * - Manages Git worktree configuration
+ *
+ * Checkpoint Operations:
+ * - Creates checkpoints (commits) of the current state
+ * - Provides diff capabilities between checkpoints
+ * - Supports resetting to previous checkpoints
+ *
+ * Safety Features:
+ * - Prevents usage in sensitive directories (home, desktop, etc.)
+ * - Validates workspace configuration
+ * - Handles cleanup and resource disposal
+ *
+ * Checkpoint Architecture:
+ * - Uses a branch-per-task model to consolidate shadow git repositories
+ * - Each task gets its own branch within a single shadow git per workspace
+ * - Maintains backward compatibility with legacy checkpoint structure
+ * - Automatically cleans up by deleting task branches when tasks are removed
+ */
+
+class CheckpointTracker {
+	private globalStoragePath: string
+	private taskId: string
+	private cwd: string
+	private cwdHash: string
+	private lastRetrievedShadowGitConfigWorkTree?: string
+	private lastCheckpointHash?: string
+	private isLegacyCheckpoint: boolean = false
+	private gitOperations: GitOperations
+
+	/**
+	 * Creates a new CheckpointTracker instance to manage checkpoints for a specific task.
+	 * The constructor is private - use the static create() method to instantiate.
+	 *
+	 * @param taskId - Unique identifier for the task being tracked
+	 * @param cwd - The current working directory to track files in
+	 * @param cwdHash - Hash of the working directory path for shadow git organization
+	 */
+	private constructor(globalStoragePath: string, taskId: string, cwd: string, cwdHash: string) {
+		this.globalStoragePath = globalStoragePath
+		this.taskId = taskId
+		this.cwd = cwd
+		this.cwdHash = cwdHash
+		this.gitOperations = new GitOperations(cwd, false) // Initialize with non-legacy mode
+	}
+
+	/**
+	 * Creates a new CheckpointTracker instance for tracking changes in a task.
+	 * Handles initialization of the shadow git repository and branch setup.
+	 *
+	 * @param taskId - Unique identifier for the task to track
+	 * @param globalStoragePath - the globalStorage path
+	 * @returns Promise resolving to new CheckpointTracker instance, or undefined if checkpoints are disabled
+	 * @throws Error if:
+	 * - globalStoragePath is not supplied
+	 * - Git is not installed
+	 * - Working directory is invalid or in a protected location
+	 * - Shadow git initialization fails
+	 *
+	 * Key operations:
+	 * - Validates git installation and settings
+	 * - Creates/initializes shadow git repository
+	 * - Detects and handles legacy checkpoint structure
+	 * - Sets up task-specific branch for new checkpoints
+	 *
+	 * Configuration:
+	 * - Respects 'cline.enableCheckpoints' VS Code setting
+	 * - Uses branch-per-task architecture for new checkpoints
+	 * - Maintains backwards compatibility with legacy structure
+	 */
+	public static async create(taskId: string, globalStoragePath: string | undefined): Promise<CheckpointTracker | undefined> {
+		if (!globalStoragePath) {
+			throw new Error("Global storage path is required to create a checkpoint tracker")
+		}
+		try {
+			console.info(`Creating new CheckpointTracker for task ${taskId}`)
+
+			// Check if checkpoints are disabled in VS Code settings
+			const enableCheckpoints = vscode.workspace.getConfiguration("cline").get<boolean>("enableCheckpoints") ?? true
+			if (!enableCheckpoints) {
+				return undefined // Don't create tracker when disabled
+			}
+
+			// Check if git is installed by attempting to get version
+			try {
+				await simpleGit().version()
+			} catch (error) {
+				throw new Error("Git must be installed to use checkpoints.") // FIXME: must match what we check for in TaskHeader to show link
+			}
+
+			const workingDir = await getWorkingDirectory()
+			const cwdHash = hashWorkingDir(workingDir)
+			console.debug(`Repository ID (cwdHash): ${cwdHash}`)
+
+			const newTracker = new CheckpointTracker(globalStoragePath, taskId, workingDir, cwdHash)
+
+			// Check if this is a legacy task
+			newTracker.isLegacyCheckpoint = await detectLegacyCheckpoint(newTracker.globalStoragePath, newTracker.taskId)
+			if (newTracker.isLegacyCheckpoint) {
+				console.debug("Using legacy checkpoint path structure")
+				const gitPath = await getShadowGitPath(
+					newTracker.globalStoragePath,
+					newTracker.taskId,
+					newTracker.cwdHash,
+					newTracker.isLegacyCheckpoint,
+				)
+				await GitOperations.initShadowGit(gitPath, workingDir, newTracker.isLegacyCheckpoint)
+				await newTracker.gitOperations.switchToTaskBranch(newTracker.taskId, gitPath)
+				return newTracker
+			}
+
+			// Branch-per-task structure
+			const gitPath = await getShadowGitPath(
+				newTracker.globalStoragePath,
+				newTracker.taskId,
+				newTracker.cwdHash,
+				newTracker.isLegacyCheckpoint,
+			)
+			await GitOperations.initShadowGit(gitPath, workingDir, newTracker.isLegacyCheckpoint)
+			await newTracker.gitOperations.switchToTaskBranch(newTracker.taskId, gitPath)
+			return newTracker
+		} catch (error) {
+			console.error("Failed to create CheckpointTracker:", error)
+			throw error
+		}
+	}
+
+	/**
+	 * Creates a new checkpoint commit in the shadow git repository.
+	 *
+	 * Key behaviors:
+	 * - Creates commit with checkpoint files in shadow git repo
+	 * - Handles both legacy and branch-per-task checkpoint structures
+	 * - For new tasks, switches to task-specific branch first
+	 * - Caches the created commit hash
+	 *
+	 * Commit structure:
+	 * - Legacy: Simple "checkpoint" message
+	 * - Branch-per-task: "checkpoint-{cwdHash}-{taskId}"
+	 * - Always allows empty commits
+	 *
+	 * Dependencies:
+	 * - Requires initialized shadow git (getShadowGitPath)
+	 * - For new checkpoints, requires task branch setup
+	 * - Uses addCheckpointFiles to stage changes
+	 *
+	 * @returns Promise<string | undefined> The created commit hash, or undefined if:
+	 * - Shadow git access fails
+	 * - Branch switch fails
+	 * - Staging files fails
+	 * - Commit creation fails
+	 * @throws Error if unable to:
+	 * - Access shadow git path
+	 * - Initialize simple-git
+	 * - Switch branches
+	 * - Stage or commit files
+	 */
+	public async commit(): Promise<string | undefined> {
+		try {
+			console.info(`Creating new checkpoint commit for task ${this.taskId}`)
+			const gitPath = await getShadowGitPath(this.globalStoragePath, this.taskId, this.cwdHash, this.isLegacyCheckpoint)
+			const git = simpleGit(path.dirname(gitPath))
+
+			console.info(`Using shadow git at: ${gitPath}`)
+
+			// Disable nested git repos before any operations
+			await this.gitOperations.renameNestedGitRepos(true)
+
+			try {
+				if (!this.isLegacyCheckpoint) {
+					await this.gitOperations.switchToTaskBranch(this.taskId, gitPath)
+				}
+				await this.gitOperations.addCheckpointFiles(git, gitPath)
+
+				const commitMessage = this.isLegacyCheckpoint ? "checkpoint" : "checkpoint-" + this.cwdHash + "-" + this.taskId
+
+				console.info(
+					`Creating ${this.isLegacyCheckpoint ? "legacy" : "new"} checkpoint commit with message: ${commitMessage}`,
+				)
+				const result = await git.commit(commitMessage, {
+					"--allow-empty": null,
+				})
+				const commitHash = result.commit || ""
+				this.lastCheckpointHash = commitHash
+				console.warn(`Checkpoint commit created.`)
+				return commitHash
+			} finally {
+				// Always re-enable nested git repos
+				await this.gitOperations.renameNestedGitRepos(false)
+			}
+		} catch (error) {
+			console.error("Failed to create checkpoint:", {
+				taskId: this.taskId,
+				error,
+				isLegacyCheckpoint: this.isLegacyCheckpoint,
+			})
+			throw new Error(`Failed to create checkpoint: ${error instanceof Error ? error.message : String(error)}`)
+		}
+	}
+
+	/**
+	 * Retrieves the worktree path from the shadow git configuration.
+	 * The worktree path indicates where the shadow git repository is tracking files,
+	 * which should match the current workspace directory.
+	 *
+	 * Key behaviors:
+	 * - Caches result in lastRetrievedShadowGitConfigWorkTree to avoid repeated reads
+	 * - Returns cached value if available
+	 * - Reads git config if no cached value exists
+	 * - Handles both legacy and new checkpoint structures
+	 *
+	 * Configuration read:
+	 * - Uses simple-git to read core.worktree config
+	 * - Operates on shadow git at path from getShadowGitPath()
+	 *
+	 * @returns Promise<string | undefined> The configured worktree path, or undefined if:
+	 * - Shadow git repository doesn't exist
+	 * - Config read fails
+	 * - No worktree is configured
+	 * @throws Error if unable to:
+	 * - Access shadow git path
+	 * - Initialize simple-git
+	 * - Read git configuration
+	 */
+	public async getShadowGitConfigWorkTree(): Promise<string | undefined> {
+		if (this.lastRetrievedShadowGitConfigWorkTree) {
+			return this.lastRetrievedShadowGitConfigWorkTree
+		}
+		try {
+			const gitPath = await getShadowGitPath(this.globalStoragePath, this.taskId, this.cwdHash, this.isLegacyCheckpoint)
+			this.lastRetrievedShadowGitConfigWorkTree = await this.gitOperations.getShadowGitConfigWorkTree(gitPath)
+			return this.lastRetrievedShadowGitConfigWorkTree
+		} catch (error) {
+			console.error("Failed to get shadow git config worktree:", error)
+			return undefined
+		}
+	}
+
+	/**
+	 * Resets the shadow git repository's HEAD to a specific checkpoint commit.
+	 * This will discard all changes after the target commit and restore the
+	 * working directory to that checkpoint's state.
+	 *
+	 * Dependencies:
+	 * - Requires initialized shadow git (getShadowGitPath)
+	 * - For new checkpoints, requires task branch setup
+	 * - Must be called with a valid commit hash from this task's history
+	 *
+	 * @param commitHash - The hash of the checkpoint commit to reset to
+	 * @returns Promise<void> Resolves when reset is complete
+	 * @throws Error if unable to:
+	 * - Access shadow git path
+	 * - Initialize simple-git
+	 * - Switch to task branch
+	 * - Reset to target commit
+	 */
+	public async resetHead(commitHash: string): Promise<void> {
+		console.info(`Resetting to checkpoint: ${commitHash}`)
+		const gitPath = await getShadowGitPath(this.globalStoragePath, this.taskId, this.cwdHash, this.isLegacyCheckpoint)
+		const git = simpleGit(path.dirname(gitPath))
+		console.debug(`Using shadow git at: ${gitPath}`)
+		await this.gitOperations.switchToTaskBranch(this.taskId, gitPath)
+		await git.reset(["--hard", commitHash]) // Hard reset to target commit
+		console.debug(`Successfully reset to checkpoint: ${commitHash}`)
+	}
+
+	/**
+	 * Return an array describing changed files between one commit and either:
+	 *   - another commit, or
+	 *   - the current working directory (including uncommitted changes).
+	 *
+	 * If `rhsHash` is omitted, compares `lhsHash` to the working directory.
+	 * If you want truly untracked files to appear, `git add` them first.
+	 *
+	 * @param lhsHash - The commit to compare from (older commit)
+	 * @param rhsHash - The commit to compare to (newer commit).
+	 *                  If omitted, we compare to the working directory.
+	 * @returns Array of file changes with before/after content
+	 */
+	public async getDiffSet(
+		lhsHash?: string,
+		rhsHash?: string,
+	): Promise<
+		Array<{
+			relativePath: string
+			absolutePath: string
+			before: string
+			after: string
+		}>
+	> {
+		const gitPath = await getShadowGitPath(this.globalStoragePath, this.taskId, this.cwdHash, this.isLegacyCheckpoint)
+		const git = simpleGit(path.dirname(gitPath))
+
+		if (!this.isLegacyCheckpoint) {
+			await this.gitOperations.switchToTaskBranch(this.taskId, gitPath)
+		}
+
+		console.info(`Getting diff between commits: ${lhsHash || "initial"} -> ${rhsHash || "working directory"}`)
+
+		// If lhsHash is missing, use the initial commit of the repo
+		let baseHash = lhsHash
+		if (!baseHash) {
+			const rootCommit = await git.raw(["rev-list", "--max-parents=0", "HEAD"])
+			baseHash = rootCommit.trim()
+			console.debug(`Using root commit as base: ${baseHash}`)
+		}
+
+		// Stage all changes so that untracked files appear in diff summary
+		await this.gitOperations.addCheckpointFiles(git, gitPath)
+
+		const diffSummary = rhsHash ? await git.diffSummary([`${baseHash}..${rhsHash}`]) : await git.diffSummary([baseHash])
+		console.info(`Found ${diffSummary.files.length} changed files`)
+
+		// For each changed file, gather before/after content
+		const result = []
+		const cwdPath = (await this.getShadowGitConfigWorkTree()) || this.cwd || ""
+		const files = diffSummary.files.map((f) => f.file)
+		const batchSize = 50
+
+		// Get list of files that exist in base commit
+		const existingFiles = await this.getExistingFiles(git, baseHash, files)
+
+		// Process files in batches
+		for (let i = 0; i < files.length; i += batchSize) {
+			const batch = files.slice(i, i + batchSize)
+
+			// Split batch into existing and new files
+			const existingBatch = batch.filter((file) => existingFiles.has(file))
+			const newBatch = batch.filter((file) => !existingFiles.has(file))
+
+			// Get before contents for existing files
+			let beforeContents: string[] = new Array(batch.length).fill("")
+			if (existingBatch.length > 0) {
+				await git.addConfig("core.quotePath", "false")
+				await git.addConfig("core.precomposeunicode", "true")
+				const args = ["show", "--format="]
+				existingBatch.forEach((file) => {
+					args.push(`${baseHash}:${file}`)
+				})
+				const beforeResult = await git.raw(args)
+				const existingContents = beforeResult.split("\n\0\n")
+				// Map contents back to original batch positions
+				existingBatch.forEach((file, index) => {
+					const batchIndex = batch.indexOf(file)
+					if (batchIndex !== -1) {
+						beforeContents[batchIndex] = existingContents[index] || ""
+					}
+				})
+			}
+
+			// Get after contents
+			let afterContents: string[] = []
+			if (rhsHash) {
+				// Split after files into existing and new in target commit
+				const afterExistingFiles = await this.getExistingFiles(git, rhsHash, batch)
+				const afterExistingBatch = batch.filter((file) => afterExistingFiles.has(file))
+
+				if (afterExistingBatch.length > 0) {
+					const args = ["show", "--format="]
+					afterExistingBatch.forEach((file) => {
+						args.push(`${rhsHash}:${file}`)
+					})
+					const afterResult = await git.raw(args)
+					const existingContents = afterResult.split("\n\0\n")
+					afterContents = new Array(batch.length).fill("")
+					afterExistingBatch.forEach((file, index) => {
+						const batchIndex = batch.indexOf(file)
+						if (batchIndex !== -1) {
+							afterContents[batchIndex] = existingContents[index] || ""
+						}
+					})
+				}
+			} else {
+				// Read from disk for working directory changes
+				afterContents = await Promise.all(
+					batch.map(async (filePath) => {
+						try {
+							return await fs.readFile(path.join(cwdPath, filePath), "utf8")
+						} catch (_) {
+							return ""
+						}
+					}),
+				)
+			}
+
+			// Add results for this batch
+			for (let j = 0; j < batch.length; j++) {
+				const filePath = batch[j]
+				const absolutePath = path.join(cwdPath, filePath)
+				result.push({
+					relativePath: filePath,
+					absolutePath,
+					before: beforeContents[j] || "",
+					after: afterContents[j] || "",
+				})
+			}
+		}
+		return result
+	}
+
+	/**
+	 * Deletes all checkpoint data for a given task.
+	 * Handles both legacy checkpoints and branch-per-task checkpoints.
+	 *
+	 * @param taskId - The ID of the task whose checkpoints should be deleted
+	 * @param historyItem - The history item containing the shadow git config for this task
+	 * @param globalStoragePath - the globalStorage path
+	 * @throws Error if deletion fails
+	 */
+	public static async deleteCheckpoints(taskId: string, historyItem: HistoryItem, globalStoragePath: string): Promise<void> {
+		if (!globalStoragePath) {
+			throw new Error("Global storage uri is invalid")
+		}
+		await GitOperations.deleteTaskBranchStatic(taskId, historyItem, globalStoragePath)
+	}
+
+	/**
+	 * Helper function to get a set of files that exist in a given commit
+	 */
+	private async getExistingFiles(git: SimpleGit, commitHash: string, files: string[]): Promise<Set<string>> {
+		try {
+			const result = await git.raw(["ls-tree", "-r", "--name-only", commitHash])
+			const existingFiles = new Set<string>(result.split("\n"))
+			return existingFiles
+		} catch (error) {
+			console.error("Error getting existing files:", error)
+			return new Set()
+		}
+	}
+}
+
+export default CheckpointTracker

src/integrations/checkpoints/CheckpointUtils.ts

@@ -0,0 +1,159 @@
+import { mkdir } from "fs/promises"
+import * as path from "path"
+import * as vscode from "vscode"
+import os from "os"
+import { fileExistsAtPath } from "../../utils/fs"
+
+/**
+ * Gets the path to the legacy shadow Git repository in globalStorage.
+ * Legacy checkpoints stored each task's checkpoints in a separate git repository
+ * under the tasks/{taskId}/checkpoints directory.
+ *
+ * Legacy path structure:
+ * globalStorage/
+ *   tasks/
+ *     {taskId}/
+ *       checkpoints/
+ *         .git/
+ *
+ * @param globalStoragePath - The VS Code global storage path
+ * @param taskId - The ID of the task
+ * @returns Promise<string> The absolute path to the legacy shadow git directory
+ * @throws Error if global storage path is invalid
+ */
+export async function getLegacyShadowGitPath(globalStoragePath: string, taskId: string): Promise<string> {
+	if (!globalStoragePath) {
+		throw new Error("Global storage uri is invalid")
+	}
+	const checkpointsDir = path.join(globalStoragePath, "tasks", taskId, "checkpoints")
+	await mkdir(checkpointsDir, { recursive: true })
+	const gitPath = path.join(checkpointsDir, ".git")
+	console.info(`Legacy shadow git path: ${gitPath}`)
+	return gitPath
+}
+
+/**
+ * Gets the path to the shadow Git repository in globalStorage.
+ * For legacy checkpoints, delegates to getLegacyShadowGitPath().
+ * For new checkpoints, uses the consolidated branch-per-task structure.
+ *
+ * Branch-per-task path structure:
+ * globalStorage/
+ *   checkpoints/
+ *     {cwdHash}/
+ *       .git/
+ *
+ * @param globalStoragePath - The VS Code global storage path
+ * @param taskId - The ID of the task
+ * @param cwdHash - Hash of the working directory path
+ * @param isLegacyCheckpoint - Whether this is a legacy checkpoint
+ * @returns Promise<string> The absolute path to the shadow git directory
+ * @throws Error if global storage path is invalid
+ */
+export async function getShadowGitPath(
+	globalStoragePath: string,
+	taskId: string,
+	cwdHash: string,
+	isLegacyCheckpoint: boolean,
+): Promise<string> {
+	if (isLegacyCheckpoint) {
+		return getLegacyShadowGitPath(globalStoragePath, taskId)
+	}
+	if (!globalStoragePath) {
+		throw new Error("Global storage uri is invalid")
+	}
+	const checkpointsDir = path.join(globalStoragePath, "checkpoints", cwdHash)
+	await mkdir(checkpointsDir, { recursive: true })
+	const gitPath = path.join(checkpointsDir, ".git")
+	return gitPath
+}
+
+/**
+ * Gets the current working directory from the VS Code workspace.
+ * Validates that checkpoints are not being used in protected directories
+ * like home, Desktop, Documents, or Downloads.
+ *
+ * Protected directories:
+ * - User's home directory
+ * - Desktop
+ * - Documents
+ * - Downloads
+ *
+ * @returns Promise<string> The absolute path to the current working directory
+ * @throws Error if no workspace is detected or if in a protected directory
+ */
+export async function getWorkingDirectory(): Promise<string> {
+	const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0)
+	if (!cwd) {
+		throw new Error("No workspace detected. Please open Cline in a workspace to use checkpoints.")
+	}
+	const homedir = os.homedir()
+	const desktopPath = path.join(homedir, "Desktop")
+	const documentsPath = path.join(homedir, "Documents")
+	const downloadsPath = path.join(homedir, "Downloads")
+
+	switch (cwd) {
+		case homedir:
+			throw new Error("Cannot use checkpoints in home directory")
+		case desktopPath:
+			throw new Error("Cannot use checkpoints in Desktop directory")
+		case documentsPath:
+			throw new Error("Cannot use checkpoints in Documents directory")
+		case downloadsPath:
+			throw new Error("Cannot use checkpoints in Downloads directory")
+		default:
+			return cwd
+	}
+}
+
+/**
+ * Hashes the current working directory to a 13-character numeric hash.
+ * @param workingDir - The absolute path to the working directory
+ * @returns A 13-character numeric hash string used to identify the workspace
+ * @throws {Error} If the working directory path is empty or invalid
+ */
+export function hashWorkingDir(workingDir: string): string {
+	if (!workingDir) {
+		throw new Error("Working directory path cannot be empty")
+	}
+	let hash = 0
+	for (let i = 0; i < workingDir.length; i++) {
+		hash = (hash * 31 + workingDir.charCodeAt(i)) >>> 0
+	}
+	const bigHash = BigInt(hash)
+	const numericHash = bigHash.toString().slice(0, 13)
+	return numericHash
+}
+
+/**
+ * Detects if a task uses the legacy checkpoint structure.
+ * Legacy checkpoints stored each task's checkpoints in a separate git repository
+ * under the tasks/{taskId}/checkpoints directory. New checkpoints use a single
+ * repository with branches per task.
+ *
+ * @param globalStoragePath - The VS Code global storage path
+ * @param taskId - The ID of the task to check
+ * @returns Promise<boolean> True if task uses legacy checkpoint structure, false otherwise
+ *
+ * Legacy path structure:
+ * globalStorage/
+ *   tasks/
+ *     {taskId}/
+ *       checkpoints/
+ *         .git/
+ *
+ * Branch-per-task structure:
+ * globalStorage/
+ *   checkpoints/
+ *     {cwdHash}/
+ *       .git/
+ */
+export async function detectLegacyCheckpoint(globalStoragePath: string | undefined, taskId: string): Promise<boolean> {
+	if (!globalStoragePath) {
+		return false
+	}
+	const legacyGitPath = path.join(globalStoragePath, "tasks", taskId, "checkpoints", ".git")
+	const isLegacy = await fileExistsAtPath(legacyGitPath)
+	console.info(`Legacy checkpoint detection result: ${isLegacy}`)
+	return isLegacy
+}

src/integrations/misc/export-markdown.ts

@@ -35,14 +35,20 @@ export async function downloadTask(dateTs: number, conversationHistory: Anthropi
 	})
 
 	if (saveUri) {
-		// Write content to the selected location
-		await vscode.workspace.fs.writeFile(saveUri, Buffer.from(markdownContent))
-		vscode.window.showTextDocument(saveUri, { preview: true })
+		try {
+			// Write content to the selected location
+			await vscode.workspace.fs.writeFile(saveUri, new TextEncoder().encode(markdownContent))
+			vscode.window.showTextDocument(saveUri, { preview: true })
+		} catch (error) {
+			vscode.window.showErrorMessage(
+				`Failed to save markdown file: ${error instanceof Error ? error.message : String(error)}`,
+			)
+		}
 	}
 }
 
 export function formatContentBlockToMarkdown(
-	block: Anthropic.TextBlockParam | Anthropic.ImageBlockParam | Anthropic.ToolUseBlockParam | Anthropic.ToolResultBlockParam,
+	block: Anthropic.ContentBlockParam,
 	// messages: Anthropic.MessageParam[]
 ): string {
 	switch (block.type) {
@@ -50,6 +56,8 @@ export function formatContentBlockToMarkdown(
 			return block.text
 		case "image":
 			return `[Image]`
+		case "document":
+			return `[Document]`
 		case "tool_use":
 			let input: string
 			if (typeof block.input === "object" && block.input !== null) {

src/integrations/misc/link-preview.ts

@@ -0,0 +1,107 @@
+import axios from "axios"
+import ogs from "open-graph-scraper"
+
+export interface OpenGraphData {
+	title?: string
+	description?: string
+	image?: string
+	url?: string
+	siteName?: string
+	type?: string
+}
+
+/**
+ * Fetches Open Graph metadata from a URL
+ * @param url The URL to fetch metadata from
+ * @returns Promise resolving to OpenGraphData
+ */
+export async function fetchOpenGraphData(url: string): Promise<OpenGraphData> {
+	try {
+		const options = {
+			url: url,
+			timeout: 5000,
+			headers: {
+				"user-agent": "Mozilla/5.0 (compatible; VSCodeExtension/1.0; +https://cline.bot)",
+			},
+			onlyGetOpenGraphInfo: false, // Get all metadata, not just Open Graph
+			fetchOptions: {
+				redirect: "follow", // Follow redirects
+			} as any,
+		}
+
+		const { result } = await ogs(options)
+
+		// Use type assertion to avoid TypeScript errors
+		const data = result as any
+
+		// Handle image URLs
+		let imageUrl = data.ogImage?.[0]?.url || data.twitterImage?.[0]?.url
+
+		// If the image URL is relative, make it absolute
+		if (imageUrl && (imageUrl.startsWith("/") || imageUrl.startsWith("./"))) {
+			try {
+				// Extract the base URL and make the relative URL absolute
+				const urlObj = new URL(url)
+				const baseUrl = `${urlObj.protocol}//${urlObj.hostname}`
+				imageUrl = new URL(imageUrl, baseUrl).href
+			} catch (error) {
+				console.error(`Error converting relative URL to absolute: ${imageUrl}`, error)
+			}
+		}
+
+		return {
+			title: data.ogTitle || data.twitterTitle || data.dcTitle || data.title || new URL(url).hostname,
+			description:
+				data.ogDescription ||
+				data.twitterDescription ||
+				data.dcDescription ||
+				data.description ||
+				"No description available",
+			image: imageUrl,
+			url: data.ogUrl || url,
+			siteName: data.ogSiteName || new URL(url).hostname,
+			type: data.ogType,
+		}
+	} catch (error) {
+		console.error(`Error fetching Open Graph data for ${url}:`, error)
+		// Return basic information based on the URL
+		try {
+			const urlObj = new URL(url)
+			return {
+				title: urlObj.hostname,
+				description: url,
+				url: url,
+				siteName: urlObj.hostname,
+			}
+		} catch {
+			return {
+				title: url,
+				description: url,
+				url: url,
+			}
+		}
+	}
+}
+
+/**
+ * Checks if a URL is an image by making a HEAD request and checking the content type
+ * @param url The URL to check
+ * @returns Promise resolving to boolean indicating if the URL is an image
+ */
+export async function isImageUrl(url: string): Promise<boolean> {
+	try {
+		const response = await axios.head(url, {
+			headers: {
+				"User-Agent": "Mozilla/5.0 (compatible; VSCodeExtension/1.0; +https://cline.bot)",
+			},
+			timeout: 3000,
+		})
+
+		const contentType = response.headers["content-type"]
+		return contentType && contentType.startsWith("image/")
+	} catch (error) {
+		console.error(`Error checking if URL is an image: ${url}`, error)
+		// If we can't determine, fall back to checking the file extension
+		return /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url)
+	}
+}

src/services/telemetry/TelemetryService.ts

@@ -0,0 +1,65 @@
+import { PostHog } from "posthog-node"
+import * as vscode from "vscode"
+
+class PostHogClient {
+	private static instance: PostHogClient
+	private client: PostHog
+	private distinctId: string = vscode.env.machineId
+	private telemetryEnabled: boolean = false
+
+	private constructor() {
+		this.client = new PostHog("phc_qfOAGxZw2TL5O8p9KYd9ak3bPBFzfjC8fy5L6jNWY7K", {
+			host: "https://us.i.posthog.com",
+			enableExceptionAutocapture: false,
+		})
+	}
+
+	public updateTelemetryState(didUserOptIn: boolean): void {
+		this.telemetryEnabled = false
+
+		// First check global telemetry level - telemetry should only be enabled when level is "all"
+		const telemetryLevel = vscode.workspace.getConfiguration("telemetry").get<string>("telemetryLevel", "all")
+		const globalTelemetryEnabled = telemetryLevel === "all"
+
+		// We only enable telemetry if global vscode telemetry is enabled
+		if (globalTelemetryEnabled) {
+			this.telemetryEnabled = didUserOptIn
+		}
+
+		// Update PostHog client state based on telemetry preference and use machineId to tie it to the webview
+		if (this.telemetryEnabled) {
+			this.client.optIn()
+			this.client.identify({ distinctId: this.distinctId })
+			// console.log("Telemetry enabled")
+		} else {
+			this.client.optOut()
+			// console.log("Telemetry disabled")
+		}
+	}
+
+	public static getInstance(): PostHogClient {
+		if (!PostHogClient.instance) {
+			PostHogClient.instance = new PostHogClient()
+		}
+		return PostHogClient.instance
+	}
+
+	public capture(event: { event: string; properties?: any }): void {
+		// Only send events if telemetry is enabled
+		if (this.telemetryEnabled) {
+			this.client.capture({ distinctId: this.distinctId, event: event.event, properties: event.properties })
+			// console.log("Captured event", { distinctId: this.distinctId, event: event.event, properties: event.properties })
+		}
+	}
+
+	public isTelemetryEnabled(): boolean {
+		return this.telemetryEnabled
+	}
+
+	public async shutdown(): Promise<void> {
+		await this.client.shutdown()
+	}
+}
+
+// Export a single instance
+export const telemetryService = PostHogClient.getInstance()

src/shared/ExtensionMessage.ts

@@ -7,6 +7,7 @@ import { BrowserSettings } from "./BrowserSettings"
 import { ChatSettings } from "./ChatSettings"
 import { HistoryItem } from "./HistoryItem"
 import { McpServer, McpMarketplaceCatalog, McpMarketplaceItem, McpDownloadResponse } from "./mcp"
+import { TelemetrySetting } from "./TelemetrySetting"
 
 // webview will hold state
 export interface ExtensionMessage {
@@ -30,6 +31,8 @@ export interface ExtensionMessage {
 		| "mcpMarketplaceCatalog"
 		| "mcpDownloadDetails"
 		| "commitSearchResults"
+		| "openGraphData"
+		| "isImageUrlResult"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -54,6 +57,16 @@ export interface ExtensionMessage {
 	error?: string
 	mcpDownloadDetails?: McpDownloadResponse
 	commits?: GitCommit[]
+	openGraphData?: {
+		title?: string
+		description?: string
+		image?: string
+		url?: string
+		siteName?: string
+		type?: string
+	}
+	url?: string
+	isImage?: boolean
 }
 
 export type Platform = "aix" | "darwin" | "freebsd" | "linux" | "openbsd" | "sunos" | "win32" | "unknown"
@@ -81,6 +94,8 @@ export interface ExtensionState {
 		photoURL: string | null
 	}
 	mcpMarketplaceEnabled?: boolean
+	telemetrySetting: TelemetrySetting
+	vscMachineId: string
 }
 
 export interface ClineMessage {

src/shared/Languages.ts

@@ -0,0 +1,73 @@
+export type LanguageKey =
+	| "en"
+	| "ar"
+	| "pt-BR"
+	| "cs"
+	| "fr"
+	| "de"
+	| "hi"
+	| "hu"
+	| "it"
+	| "ja"
+	| "ko"
+	| "pl"
+	| "pt-PT"
+	| "ru"
+	| "zh-CN"
+	| "es"
+	| "zh-TW"
+	| "tr"
+
+export type LanguageDisplay =
+	| "English"
+	| "Arabic - العربية"
+	| "Portuguese - Português (Brasil)"
+	| "Czech - Čeština"
+	| "French - Français"
+	| "German - Deutsch"
+	| "Hindi - हिन्दी"
+	| "Hungarian - Magyar"
+	| "Italian - Italiano"
+	| "Japanese - 日本語"
+	| "Korean - 한국어"
+	| "Polish - Polski"
+	| "Portuguese - Português (Portugal)"
+	| "Russian - Русский"
+	| "Simplified Chinese - 简体中文"
+	| "Spanish - Español"
+	| "Traditional Chinese - 繁體中文"
+	| "Turkish - Türkçe"
+
+export const DEFAULT_LANGUAGE_SETTINGS: LanguageKey = "en"
+
+export const languageOptions: { key: LanguageKey; display: LanguageDisplay }[] = [
+	{ key: "en", display: "English" },
+	{ key: "ar", display: "Arabic - العربية" },
+	{ key: "pt-BR", display: "Portuguese - Português (Brasil)" },
+	{ key: "cs", display: "Czech - Čeština" },
+	{ key: "fr", display: "French - Français" },
+	{ key: "de", display: "German - Deutsch" },
+	{ key: "hi", display: "Hindi - हिन्दी" },
+	{ key: "hu", display: "Hungarian - Magyar" },
+	{ key: "it", display: "Italian - Italiano" },
+	{ key: "ja", display: "Japanese - 日本語" },
+	{ key: "ko", display: "Korean - 한국어" },
+	{ key: "pl", display: "Polish - Polski" },
+	{ key: "pt-PT", display: "Portuguese - Português (Portugal)" },
+	{ key: "ru", display: "Russian - Русский" },
+	{ key: "zh-CN", display: "Simplified Chinese - 简体中文" },
+	{ key: "es", display: "Spanish - Español" },
+	{ key: "zh-TW", display: "Traditional Chinese - 繁體中文" },
+	{ key: "tr", display: "Turkish - Türkçe" },
+]
+
+export function getLanguageKey(display: LanguageDisplay | undefined): LanguageKey {
+	if (!display) {
+		return DEFAULT_LANGUAGE_SETTINGS
+	}
+	const languageOption = languageOptions.find((option) => option.display === display)
+	if (languageOption) {
+		return languageOption.key
+	}
+	return DEFAULT_LANGUAGE_SETTINGS
+}

src/shared/TelemetrySetting.ts

@@ -0,0 +1 @@
+export type TelemetrySetting = "unset" | "enabled" | "disabled"

src/shared/WebviewMessage.ts

@@ -22,6 +22,7 @@ export interface WebviewMessage {
 		| "requestOllamaModels"
 		| "requestLmStudioModels"
 		| "openImage"
+		| "openInBrowser"
 		| "openFile"
 		| "openMention"
 		| "cancelTask"
@@ -50,6 +51,11 @@ export interface WebviewMessage {
 		| "searchCommits"
 		| "showMcpView"
 		| "fetchLatestMcpServersFromHub"
+		| "telemetrySetting"
+		| "openSettings"
+		| "updateMcpTimeout"
+		| "fetchOpenGraphData"
+		| "checkIsImageUrl"
 	// | "relaunchChromeDebugMode"
 	text?: string
 	disabled?: boolean
@@ -68,6 +74,9 @@ export interface WebviewMessage {
 	serverName?: string
 	toolName?: string
 	autoApprove?: boolean
+
+	// For openInBrowser
+	url?: string
 }
 
 export type ClineAskResponse = "yesButtonClicked" | "noButtonClicked" | "messageResponse"

src/shared/api.ts

@@ -15,6 +15,7 @@ export type ApiProvider =
 	| "mistral"
 	| "vscode-lm"
 	| "litellm"
+	| "xai"
 
 export interface ApiHandlerOptions {
 	apiModelId?: string
@@ -56,6 +57,8 @@ export interface ApiHandlerOptions {
 	vsCodeLmModelSelector?: any
 	o3MiniReasoningEffort?: string
 	qwenApiLine?: string
+	xaiApiKey?: string
+	thinkingBudgetTokens?: number
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {
@@ -139,7 +142,7 @@ export const anthropicModels = {
 // AWS Bedrock
 // https://docs.aws.amazon.com/bedrock/latest/userguide/conversation-inference.html
 export type BedrockModelId = keyof typeof bedrockModels
-export const bedrockDefaultModelId: BedrockModelId = "anthropic.claude-3-5-sonnet-20241022-v2:0"
+export const bedrockDefaultModelId: BedrockModelId = "anthropic.claude-3-7-sonnet-20250219-v1:0"
 export const bedrockModels = {
 	"anthropic.claude-3-7-sonnet-20250219-v1:0": {
 		maxTokens: 8192,
@@ -219,18 +222,18 @@ export const openRouterDefaultModelInfo: ModelInfo = {
 	description:
 		"Claude 3.7 Sonnet is an advanced large language model with improved reasoning, coding, and problem-solving capabilities. It introduces a hybrid reasoning approach, allowing users to choose between rapid responses and extended, step-by-step processing for complex tasks. The model demonstrates notable improvements in coding, particularly in front-end development and full-stack updates, and excels in agentic workflows, where it can autonomously navigate multi-step processes. \n\nClaude 3.7 Sonnet maintains performance parity with its predecessor in standard mode while offering an extended reasoning mode for enhanced accuracy in math, coding, and instruction-following tasks.\n\nRead more at the [blog post here](https://www.anthropic.com/news/claude-3-7-sonnet)",
 }
-
 // Vertex AI
 // https://cloud.google.com/vertex-ai/generative-ai/docs/partner-models/use-claude
+// https://cloud.google.com/vertex-ai/generative-ai/pricing#partner-models
 export type VertexModelId = keyof typeof vertexModels
-export const vertexDefaultModelId: VertexModelId = "claude-3-5-sonnet-v2@20241022"
+export const vertexDefaultModelId: VertexModelId = "claude-3-7-sonnet@20250219"
 export const vertexModels = {
 	"claude-3-7-sonnet@20250219": {
 		maxTokens: 8192,
 		contextWindow: 200_000,
 		supportsImages: true,
 		supportsComputerUse: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 3.0,
 		outputPrice: 15.0,
 	},
@@ -239,41 +242,51 @@ export const vertexModels = {
 		contextWindow: 200_000,
 		supportsImages: true,
 		supportsComputerUse: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 3.0,
 		outputPrice: 15.0,
+		cacheWritesPrice: 3.75,
+		cacheReadsPrice: 0.3,
 	},
 	"claude-3-5-sonnet@20240620": {
 		maxTokens: 8192,
 		contextWindow: 200_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 3.0,
 		outputPrice: 15.0,
+		cacheWritesPrice: 3.75,
+		cacheReadsPrice: 0.3,
 	},
 	"claude-3-5-haiku@20241022": {
 		maxTokens: 8192,
 		contextWindow: 200_000,
 		supportsImages: false,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 1.0,
 		outputPrice: 5.0,
+		cacheWritesPrice: 1.25,
+		cacheReadsPrice: 0.1,
 	},
 	"claude-3-opus@20240229": {
 		maxTokens: 4096,
 		contextWindow: 200_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 15.0,
 		outputPrice: 75.0,
+		cacheWritesPrice: 18.75,
+		cacheReadsPrice: 1.5,
 	},
 	"claude-3-haiku@20240307": {
 		maxTokens: 4096,
 		contextWindow: 200_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 0.25,
 		outputPrice: 1.25,
+		cacheWritesPrice: 0.3,
+		cacheReadsPrice: 0.03,
 	},
 } as const satisfies Record<string, ModelInfo>
 
@@ -398,9 +411,10 @@ export const openAiNativeModels = {
 		maxTokens: 100_000,
 		contextWindow: 200_000,
 		supportsImages: false,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 1.1,
 		outputPrice: 4.4,
+		cacheReadsPrice: 0.55,
 	},
 	// don't support tool use yet
 	o1: {
@@ -410,38 +424,51 @@ export const openAiNativeModels = {
 		supportsPromptCache: false,
 		inputPrice: 15,
 		outputPrice: 60,
+		cacheReadsPrice: 7.5,
 	},
 	"o1-preview": {
 		maxTokens: 32_768,
 		contextWindow: 128_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 15,
 		outputPrice: 60,
+		cacheReadsPrice: 7.5,
 	},
 	"o1-mini": {
 		maxTokens: 65_536,
 		contextWindow: 128_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 1.1,
 		outputPrice: 4.4,
+		cacheReadsPrice: 0.55,
 	},
 	"gpt-4o": {
 		maxTokens: 4_096,
 		contextWindow: 128_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 2.5,
 		outputPrice: 10,
+		cacheReadsPrice: 1.25,
 	},
 	"gpt-4o-mini": {
 		maxTokens: 16_384,
 		contextWindow: 128_000,
 		supportsImages: true,
-		supportsPromptCache: false,
+		supportsPromptCache: true,
 		inputPrice: 0.15,
 		outputPrice: 0.6,
+		cacheReadsPrice: 0.075,
+	},
+	"gpt-4.5-preview": {
+		maxTokens: 16_384,
+		contextWindow: 128_000,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 75,
+		outputPrice: 150,
 	},
 } as const satisfies Record<string, ModelInfo>
 
@@ -459,18 +486,18 @@ export const deepSeekModels = {
 		maxTokens: 8_000,
 		contextWindow: 64_000,
 		supportsImages: false,
-		supportsPromptCache: true, // supports context caching, but not in the way anthropic does it (deepseek reports input tokens and reads/writes in the same usage report) FIXME: we need to show users cache stats how deepseek does it
-		inputPrice: 0, // technically there is no input price, it's all either a cache hit or miss (ApiOptions will not show this)
-		outputPrice: 0.28,
-		cacheWritesPrice: 0.14,
-		cacheReadsPrice: 0.014,
+		supportsPromptCache: true,
+		inputPrice: 0.27,
+		outputPrice: 1.1,
+		cacheWritesPrice: 0.27,
+		cacheReadsPrice: 0.07,
 	},
 	"deepseek-reasoner": {
 		maxTokens: 8_000,
 		contextWindow: 64_000,
 		supportsImages: false,
-		supportsPromptCache: true, // supports context caching, but not in the way anthropic does it (deepseek reports input tokens and reads/writes in the same usage report) FIXME: we need to show users cache stats how deepseek does it
-		inputPrice: 0, // technically there is no input price, it's all either a cache hit or miss (ApiOptions will not show this)
+		supportsPromptCache: true,
+		inputPrice: 0.55,
 		outputPrice: 2.19,
 		cacheWritesPrice: 0.55,
 		cacheReadsPrice: 0.14,
@@ -775,3 +802,82 @@ export const liteLlmModelInfoSaneDefaults: ModelInfo = {
 	inputPrice: 0,
 	outputPrice: 0,
 }
+
+// X AI
+// https://docs.x.ai/docs/api-reference
+export type XAIModelId = keyof typeof xaiModels
+export const xaiDefaultModelId: XAIModelId = "grok-2-latest"
+export const xaiModels = {
+	"grok-2-latest": {
+		maxTokens: 8192,
+		contextWindow: 131072,
+		supportsImages: false,
+		supportsPromptCache: false,
+		inputPrice: 2.0,
+		outputPrice: 10.0,
+		description: "X AI's Grok-2 model - latest version with 131K context window",
+	},
+	"grok-2": {
+		maxTokens: 8192,
+		contextWindow: 131072,
+		supportsImages: false,
+		supportsPromptCache: false,
+		inputPrice: 2.0,
+		outputPrice: 10.0,
+		description: "X AI's Grok-2 model with 131K context window",
+	},
+	"grok-2-1212": {
+		maxTokens: 8192,
+		contextWindow: 131072,
+		supportsImages: false,
+		supportsPromptCache: false,
+		inputPrice: 2.0,
+		outputPrice: 10.0,
+		description: "X AI's Grok-2 model (version 1212) with 131K context window",
+	},
+	"grok-2-vision-latest": {
+		maxTokens: 8192,
+		contextWindow: 32768,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 2.0,
+		outputPrice: 10.0,
+		description: "X AI's Grok-2 Vision model - latest version with image support and 32K context window",
+	},
+	"grok-2-vision": {
+		maxTokens: 8192,
+		contextWindow: 32768,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 2.0,
+		outputPrice: 10.0,
+		description: "X AI's Grok-2 Vision model with image support and 32K context window",
+	},
+	"grok-2-vision-1212": {
+		maxTokens: 8192,
+		contextWindow: 32768,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 2.0,
+		outputPrice: 10.0,
+		description: "X AI's Grok-2 Vision model (version 1212) with image support and 32K context window",
+	},
+	"grok-vision-beta": {
+		maxTokens: 8192,
+		contextWindow: 8192,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 5.0,
+		outputPrice: 15.0,
+		description: "X AI's Grok Vision Beta model with image support and 8K context window",
+	},
+	"grok-beta": {
+		maxTokens: 8192,
+		contextWindow: 131072,
+		supportsImages: false,
+		supportsPromptCache: false,
+		inputPrice: 5.0,
+		outputPrice: 15.0,
+		description: "X AI's Grok Beta model (legacy) with 131K context window",
+	},
+} as const satisfies Record<string, ModelInfo>

src/test/suite/extension.test.js

@@ -4,6 +4,25 @@ const vscode = require("vscode")
 describe("Extension Tests", function () {
 	this.timeout(60000) // Increased timeout for extension operations
 
+	let originalGetConfiguration
+
+	beforeEach(() => {
+		// Save original configuration
+		originalGetConfiguration = vscode.workspace.getConfiguration
+		// Setup mock configuration
+		const mockUpdate = async () => Promise.resolve()
+		const mockConfig = {
+			get: () => true,
+			update: mockUpdate,
+		}
+		vscode.workspace.getConfiguration = () => mockConfig
+	})
+
+	afterEach(() => {
+		// Restore original configuration
+		vscode.workspace.getConfiguration = originalGetConfiguration
+	})
+
 	it("should activate extension successfully", async () => {
 		// Get the extension
 		const extension = vscode.extensions.getExtension("saoudrizwan.claude-dev")

src/utils/cost.test.ts

@@ -1,10 +1,10 @@
 import { describe, it } from "mocha"
 import "should"
-import { calculateApiCost } from "./cost"
+import { calculateApiCostAnthropic, calculateApiCostOpenAI } from "./cost"
 import { ModelInfo } from "../shared/api"
 
 describe("Cost Utilities", () => {
-	describe("calculateApiCost", () => {
+	describe("calculateApiCostAnthropic", () => {
 		it("should calculate basic input/output costs", () => {
 			const modelInfo: ModelInfo = {
 				supportsPromptCache: false,
@@ -12,7 +12,7 @@ describe("Cost Utilities", () => {
 				outputPrice: 15.0, // $15 per million tokens
 			}
 
-			const cost = calculateApiCost(modelInfo, 1000, 500)
+			const cost = calculateApiCostAnthropic(modelInfo, 1000, 500)
 			// Input: (3.0 / 1_000_000) * 1000 = 0.003
 			// Output: (15.0 / 1_000_000) * 500 = 0.0075
 			// Total: 0.003 + 0.0075 = 0.0105
@@ -25,7 +25,7 @@ describe("Cost Utilities", () => {
 				// No prices specified
 			}
 
-			const cost = calculateApiCost(modelInfo, 1000, 500)
+			const cost = calculateApiCostAnthropic(modelInfo, 1000, 500)
 			cost.should.equal(0)
 		})
 
@@ -42,7 +42,7 @@ describe("Cost Utilities", () => {
 				cacheReadsPrice: 0.3,
 			}
 
-			const cost = calculateApiCost(modelInfo, 2000, 1000, 1500, 500)
+			const cost = calculateApiCostAnthropic(modelInfo, 2000, 1000, 1500, 500)
 			// Cache writes: (3.75 / 1_000_000) * 1500 = 0.005625
 			// Cache reads: (0.3 / 1_000_000) * 500 = 0.00015
 			// Input: (3.0 / 1_000_000) * 2000 = 0.006
@@ -60,7 +60,68 @@ describe("Cost Utilities", () => {
 				cacheReadsPrice: 0.3,
 			}
 
-			const cost = calculateApiCost(modelInfo, 0, 0, 0, 0)
+			const cost = calculateApiCostAnthropic(modelInfo, 0, 0, 0, 0)
+			cost.should.equal(0)
+		})
+	})
+
+	describe("calculateApiCostOpenAI", () => {
+		it("should calculate basic input/output costs", () => {
+			const modelInfo: ModelInfo = {
+				supportsPromptCache: false,
+				inputPrice: 3.0, // $3 per million tokens
+				outputPrice: 15.0, // $15 per million tokens
+			}
+
+			const cost = calculateApiCostOpenAI(modelInfo, 1000, 500)
+			// Input: (3.0 / 1_000_000) * 1000 = 0.003
+			// Output: (15.0 / 1_000_000) * 500 = 0.0075
+			// Total: 0.003 + 0.0075 = 0.0105
+			cost.should.equal(0.0105)
+		})
+
+		it("should handle missing prices", () => {
+			const modelInfo: ModelInfo = {
+				supportsPromptCache: true,
+				// No prices specified
+			}
+
+			const cost = calculateApiCostOpenAI(modelInfo, 1000, 500)
+			cost.should.equal(0)
+		})
+
+		it("should use real model configuration (Claude 3.5 Sonnet)", () => {
+			const modelInfo: ModelInfo = {
+				maxTokens: 8192,
+				contextWindow: 200_000,
+				supportsImages: true,
+				supportsComputerUse: true,
+				supportsPromptCache: true,
+				inputPrice: 3.0,
+				outputPrice: 15.0,
+				cacheWritesPrice: 3.75,
+				cacheReadsPrice: 0.3,
+			}
+
+			const cost = calculateApiCostOpenAI(modelInfo, 2100, 1000, 1500, 500)
+			// Cache writes: (3.75 / 1_000_000) * 1500 = 0.005625
+			// Cache reads: (0.3 / 1_000_000) * 500 = 0.00015
+			// Input: (3.0 / 1_000_000) * (2100 - 1500 - 500) = 0.0003
+			// Output: (15.0 / 1_000_000) * 1000 = 0.015
+			// Total: 0.005625 + 0.00015 + 0.0003 + 0.015 = 0.021075
+			cost.should.equal(0.021075)
+		})
+
+		it("should handle zero token counts", () => {
+			const modelInfo: ModelInfo = {
+				supportsPromptCache: true,
+				inputPrice: 3.0,
+				outputPrice: 15.0,
+				cacheWritesPrice: 3.75,
+				cacheReadsPrice: 0.3,
+			}
+
+			const cost = calculateApiCostOpenAI(modelInfo, 0, 0, 0, 0)
 			cost.should.equal(0)
 		})
 	})

src/utils/cost.ts

@@ -1,24 +1,49 @@
 import { ModelInfo } from "../shared/api"
 
-export function calculateApiCost(
+function calculateApiCostInternal(
+	modelInfo: ModelInfo,
+	inputTokens: number,
+	outputTokens: number,
+	cacheCreationInputTokens: number,
+	cacheReadInputTokens: number,
+): number {
+	const cacheWritesCost = ((modelInfo.cacheWritesPrice || 0) / 1_000_000) * cacheCreationInputTokens
+	const cacheReadsCost = ((modelInfo.cacheReadsPrice || 0) / 1_000_000) * cacheReadInputTokens
+	const baseInputCost = ((modelInfo.inputPrice || 0) / 1_000_000) * inputTokens
+	const outputCost = ((modelInfo.outputPrice || 0) / 1_000_000) * outputTokens
+	const totalCost = cacheWritesCost + cacheReadsCost + baseInputCost + outputCost
+	return totalCost
+}
+
+// For Anthropic compliant usage, the input tokens count does NOT include the cached tokens
+export function calculateApiCostAnthropic(
 	modelInfo: ModelInfo,
 	inputTokens: number,
 	outputTokens: number,
 	cacheCreationInputTokens?: number,
 	cacheReadInputTokens?: number,
 ): number {
-	const modelCacheWritesPrice = modelInfo.cacheWritesPrice
-	let cacheWritesCost = 0
-	if (cacheCreationInputTokens && modelCacheWritesPrice) {
-		cacheWritesCost = (modelCacheWritesPrice / 1_000_000) * cacheCreationInputTokens
-	}
-	const modelCacheReadsPrice = modelInfo.cacheReadsPrice
-	let cacheReadsCost = 0
-	if (cacheReadInputTokens && modelCacheReadsPrice) {
-		cacheReadsCost = (modelCacheReadsPrice / 1_000_000) * cacheReadInputTokens
-	}
-	const baseInputCost = ((modelInfo.inputPrice || 0) / 1_000_000) * inputTokens
-	const outputCost = ((modelInfo.outputPrice || 0) / 1_000_000) * outputTokens
-	const totalCost = cacheWritesCost + cacheReadsCost + baseInputCost + outputCost
-	return totalCost
+	const cacheCreationInputTokensNum = cacheCreationInputTokens || 0
+	const cacheReadInputTokensNum = cacheReadInputTokens || 0
+	return calculateApiCostInternal(modelInfo, inputTokens, outputTokens, cacheCreationInputTokensNum, cacheReadInputTokensNum)
+}
+
+// For OpenAI compliant usage, the input tokens count INCLUDES the cached tokens
+export function calculateApiCostOpenAI(
+	modelInfo: ModelInfo,
+	inputTokens: number,
+	outputTokens: number,
+	cacheCreationInputTokens?: number,
+	cacheReadInputTokens?: number,
+): number {
+	const cacheCreationInputTokensNum = cacheCreationInputTokens || 0
+	const cacheReadInputTokensNum = cacheReadInputTokens || 0
+	const nonCachedInputTokens = Math.max(0, inputTokens - cacheCreationInputTokensNum - cacheReadInputTokensNum)
+	return calculateApiCostInternal(
+		modelInfo,
+		nonCachedInputTokens,
+		outputTokens,
+		cacheCreationInputTokensNum,
+		cacheReadInputTokensNum,
+	)
 }

src/utils/validation.ts

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

webview-ui/.gitignore

@@ -1,23 +1,32 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+build
+*.local
+coverage
+
+# Environment
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

webview-ui/eslint.config.js

@@ -0,0 +1,31 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+	{ ignores: ["build"] },
+	{
+		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+		files: ["**/*.{ts,tsx}"],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+		},
+		plugins: {
+			"react-hooks": reactHooks,
+			"react-refresh": reactRefresh,
+		},
+		rules: {
+			...reactHooks.configs.recommended.rules,
+			// "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+			"@typescript-eslint/no-unused-vars": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-empty-object-type": "off",
+			"no-case-declarations": "off",
+			"react-hooks/exhaustive-deps": "off",
+			"prefer-const": "off",
+		},
+	},
+)

webview-ui/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Cline Webview</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

webview-ui/matchMedia.js

@@ -1,16 +0,0 @@
-// "Official" jest workaround for mocking window.matchMedia()
-// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-
-Object.defineProperty(window, "matchMedia", {
-	writable: true,
-	value: vi.fn().mockImplementation((query) => ({
-		matches: false,
-		media: query,
-		onchange: null,
-		addListener: vi.fn(), // Deprecated
-		removeListener: vi.fn(), // Deprecated
-		addEventListener: vi.fn(),
-		removeEventListener: vi.fn(),
-		dispatchEvent: vi.fn(),
-	})),
-})

webview-ui/package.json

@@ -1,67 +1,56 @@
 {
 	"name": "webview-ui",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"preview": "vite preview",
+		"lint": "eslint .",
+		"test": "vitest run",
+		"test:watch": "vitest dev"
+	},
 	"dependencies": {
 		"@floating-ui/react": "^0.27.4",
+		"@types/dompurify": "^3.0.5",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"debounce": "^2.1.1",
+		"dompurify": "^3.2.4",
 		"fast-deep-equal": "^3.1.3",
 		"fuse.js": "^7.0.0",
 		"fzf": "^0.5.2",
 		"mermaid": "^11.4.1",
+		"posthog-js": "^1.224.0",
 		"pretty-bytes": "^6.1.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-remark": "^2.1.0",
-		"react-scripts": "^5.0.1",
-		"react-textarea-autosize": "^8.5.3",
-		"react-use": "^17.5.1",
-		"react-virtuoso": "^4.7.13",
-		"rehype-highlight": "^7.0.0",
-		"rewire": "^7.0.0",
-		"styled-components": "^6.1.13",
-		"typescript": "^5.7.3",
-		"web-vitals": "^2.1.4"
-	},
-	"overrides": {
-		"typescript": "^5.7.3"
-	},
-	"scripts": {
-		"start": "react-scripts start",
-		"build": "node ./scripts/build-react-no-split.js",
-		"test": "vitest run",
-		"test:watch": "vitest dev",
-		"eject": "react-scripts eject"
-	},
-	"eslintConfig": {
-		"extends": [
-			"react-app",
-			"react-app/jest"
-		]
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
+		"react-textarea-autosize": "^8.5.7",
+		"react-use": "^17.6.0",
+		"react-virtuoso": "^4.12.3",
+		"rehype-highlight": "^7.0.1",
+		"styled-components": "^6.1.15"
 	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "^5.17.0",
-		"@testing-library/react": "^15.0.6",
-		"@testing-library/user-event": "^13.5.0",
-		"@types/jest": "^27.5.2",
-		"@types/node": "^20.x",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
+		"@eslint/js": "^9.17.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.2.0",
+		"@testing-library/user-event": "^14.6.1",
+		"@types/jest": "^29.5.14",
+		"@types/node": "^22.13.4",
+		"@types/react": "^18.3.18",
+		"@types/react-dom": "^18.3.5",
 		"@types/vscode-webview": "^1.57.5",
-		"jsdom": "^25.0.1",
-		"vitest": "^2.1.9"
+		"@vitejs/plugin-react-swc": "^3.5.0",
+		"eslint": "^9.17.0",
+		"eslint-plugin-react-hooks": "^5.0.0",
+		"eslint-plugin-react-refresh": "^0.4.16",
+		"globals": "^15.14.0",
+		"jsdom": "^26.0.0",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.18.2",
+		"vite": "^6.1.1",
+		"vitest": "^3.0.5"
 	}
 }

webview-ui/public/index.html

@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="theme-color" content="#000000" />
-		<meta name="description" content="Web site created using create-react-app" />
-		<!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-		<!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-		<title>React App</title>
-	</head>
-	<body>
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-		<!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    --></body>
-</html>

webview-ui/public/manifest.json

@@ -1,25 +0,0 @@
-{
-	"short_name": "React App",
-	"name": "Create React App Sample",
-	"icons": [
-		{
-			"src": "",
-			"sizes": "64x64 32x32 24x24 16x16",
-			"type": "image/x-icon"
-		},
-		{
-			"src": "",
-			"type": "image/png",
-			"sizes": "192x192"
-		},
-		{
-			"src": "",
-			"type": "image/png",
-			"sizes": "512x512"
-		}
-	],
-	"start_url": ".",
-	"display": "standalone",
-	"theme_color": "#000000",
-	"background_color": "#ffffff"
-}

webview-ui/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

webview-ui/scripts/build-react-no-split.js

@@ -1,134 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * A script that overrides some of the create-react-app build script configurations
- * in order to disable code splitting/chunking and rename the output build files so
- * they have no hash. (Reference: https://mtm.dev/disable-code-splitting-create-react-app).
- *
- * This is crucial for getting React webview code to run because VS Code expects a
- * single (consistently named) JavaScript and CSS file when configuring webviews.
- */
-
-const rewire = require("rewire")
-const defaults = rewire("react-scripts/scripts/build.js")
-const config = defaults.__get__("config")
-const webpack = require("webpack")
-
-/* Modifying Webpack Configuration for 'shared' dir
-This section uses Rewire to modify Create React App's webpack configuration without ejecting. Rewire allows us to inject and alter the internal build scripts of CRA at runtime. This allows us to maintain a flexible project structure that keeps shared code outside the webview-ui/src directory, while still adhering to CRA's security model that typically restricts imports to within src/. 
-1. Uses the ModuleScopePlugin to whitelist files from the shared directory, allowing them to be imported despite being outside src/. (see: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory/58321458#58321458)
-2. Modifies the TypeScript rule to include the shared directory in compilation. This essentially transpiles and includes the ts files in shared dir in the output main.js file.
-Before, we would just import types from shared dir and specifying include (and alias to have cleaner paths) in tsconfig.json was enough. But now that we are creating values (i.e. models in api.ts) to import into the react app, we must also include these files in the webpack resolution.
-- Imports from the shared directory must use full paths relative to the src directory, without file extensions.
-- Example: import { someFunction } from '../../src/shared/utils/helpers'
-*/
-const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin")
-const path = require("path")
-const fs = require("fs")
-// Get all files in the shared directory
-const sharedDir = path.resolve(__dirname, "..", "..", "src", "shared")
-
-function getAllFiles(dir) {
-	let files = []
-	fs.readdirSync(dir).forEach((file) => {
-		const filePath = path.join(dir, file)
-		if (fs.statSync(filePath).isDirectory()) {
-			files = files.concat(getAllFiles(filePath))
-		} else {
-			// Skip test files
-			if (!file.endsWith(".test.ts")) {
-				const withoutExtension = path.join(dir, path.parse(file).name)
-				files.push(withoutExtension)
-			}
-		}
-	})
-	return files
-}
-const sharedFiles = getAllFiles(sharedDir)
-// config.resolve.plugins = config.resolve.plugins.filter((plugin) => !(plugin instanceof ModuleScopePlugin))
-// Instead of excluding the whole ModuleScopePlugin, we just whitelist specific files that can be imported from outside src.
-config.resolve.plugins.forEach((plugin) => {
-	if (plugin instanceof ModuleScopePlugin) {
-		console.log("Whitelisting shared files: ", sharedFiles)
-		sharedFiles.forEach((file) => plugin.allowedFiles.add(file))
-	}
-})
-/* 
-Webpack configuration
-
-Webpack is a module bundler for JavaScript applications. It processes your project files, resolving dependencies and generating a deployable production build.
-The webpack config is an object that tells webpack how to process and bundle your code. It defines entry points, output settings, and how to handle different file types.
-This config.module section of the webpack config deals with how different file types (modules) should be treated.
-config.module.rules:
-Rules define how module files should be processed. Each rule can:
-- Specify which files to process (test)
-	When webpack "processes" a file, it performs several operations:
-	1. Reads the file
-	2. Parses its content and analyzes dependencies
-	3. Applies transformations (e.g., converting TypeScript to JavaScript)
-	4. Potentially modifies the code (e.g., applying polyfills)
-	5. Includes the processed file in the final bundle
-	By specifying which files to process, we're telling webpack which files should go through this pipeline and be included in our application bundle. Files that aren't processed are ignored by webpack.
-	In our case, we're ensuring that TypeScript files in our shared directory are processed, allowing us to use them in our application.
-- Define which folders to include or exclude
-- Set which loaders to use for transformation
-A loader transforms certain types of files into valid modules that webpack can process. For example, the TypeScript loader converts .ts files into JavaScript that webpack can understand.
-By modifying these rules, we can change how webpack processes different files in our project, allowing us to include files from outside the standard src directory.
-
-Why we need to modify the webpack config
-
-Create React App (CRA) is designed to only process files within the src directory for security reasons. (CRA limits processing to the src directory to prevent accidental inclusion of sensitive files, reduce the attack surface, and ensure predictable builds, enhancing overall project security and consistency. Therefore it's essential that if you do include files outside src, you do so explicitly.)
-To use files from the shared directory, we need to:
-1. Modify ModuleScopePlugin to allow imports from the shared directory.
-2. Update the TypeScript loader rule to process TypeScript files from the shared directory.
-These changes tell webpack it's okay to import from the shared directory and ensure that TypeScript files in this directory are properly converted to JavaScript.
-
-Modify webpack configuration to process TypeScript files from shared directory
-
-This code modifies the webpack configuration to allow processing of TypeScript files from our shared directory, which is outside the standard src folder.
-1. config.module.rules[1]: In Create React App's webpack config, the second rule (index 1) typically contains the rules for processing JavaScript and TypeScript files.
-2. .oneOf: This array contains a list of loaders, and webpack will use the first matching loader for each file. We iterate through these to find the TypeScript loader.
-3. We check each rule to see if it applies to TypeScript files by looking for 'ts|tsx' in the test regex.
-4. When we find the TypeScript rule, we add our shared directory to its 'include' array. This tells webpack to also process TypeScript files from the shared directory.
-Note: This code assumes a specific structure in the CRA webpack config. If CRA updates its config structure in future versions, this code might need to be adjusted.
-*/
-config.module.rules[1].oneOf.forEach((rule) => {
-	if (rule.test && rule.test.toString().includes("ts|tsx")) {
-		// rule.include is path to src by default, but we can update rule.include to be an array as it matches an expected schema by react-scripts
-		rule.include = [rule.include, sharedDir].filter(Boolean)
-	}
-})
-
-// Force all code into a single bundle for VS Code webview compatibility.
-// This is necessary for:
-// 1. Mermaid.js to work properly (prevents async chunk loading)
-// 2. Consistent CSP nonce handling (single bundle = single nonce)
-config.optimization = {
-	...config.optimization,
-	splitChunks: {
-		cacheGroups: {
-			default: false,
-		},
-		name: "main", // Forces all chunks (dynamic import() calls, for example those used by Mermaid) into one bundle - this is what actually prevents code splitting
-	},
-	runtimeChunk: false,
-}
-
-// Ensure all chunks are named 'main' to match our CSP nonce setup
-config.output = {
-	...config.output,
-	filename: "static/js/[name].js",
-}
-
-// Adjust build environment variables for dev/debug builds.
-config.plugins[4] = new webpack.DefinePlugin({
-	"process.env": {
-		...config.plugins[4].definitions["process.env"],
-		NODE_ENV: JSON.stringify(process.env.IS_DEV ? "development" : "production"),
-		IS_DEV: JSON.stringify(process.env.IS_DEV),
-	},
-})
-
-// Rename main.{hash}.css to main.css
-config.plugins[5].options.filename = "static/css/[name].css"
-config.plugins[5].options.moduleFilename = () => "static/css/main.css"

webview-ui/setupTests.js

@@ -1,2 +0,0 @@
-import "@testing-library/jest-dom"
-import "./matchMedia"

webview-ui/src/App.tsx

@@ -11,7 +11,7 @@ import { vscode } from "./utils/vscode"
 import McpView from "./components/mcp/McpView"
 
 const AppContent = () => {
-	const { didHydrateState, showWelcome, shouldShowAnnouncement } = useExtensionState()
+	const { didHydrateState, showWelcome, shouldShowAnnouncement, telemetrySetting, vscMachineId } = useExtensionState()
 	const [showSettings, setShowSettings] = useState(false)
 	const [showHistory, setShowHistory] = useState(false)
 	const [showMcp, setShowMcp] = useState(false)
@@ -60,6 +60,15 @@ const AppContent = () => {
 
 	useEvent("message", handleMessage)
 
+	// useEffect(() => {
+	// 	if (telemetrySetting === "enabled") {
+	// 		posthog.identify(vscMachineId)
+	// 		posthog.opt_in_capturing()
+	// 	} else {
+	// 		posthog.opt_out_capturing()
+	// 	}
+	// }, [telemetrySetting, vscMachineId])
+
 	useEffect(() => {
 		if (shouldShowAnnouncement) {
 			setShowAnnouncement(true)

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

@@ -25,6 +25,7 @@ import McpResourceRow from "../mcp/McpResourceRow"
 import McpToolRow from "../mcp/McpToolRow"
 import { highlightMentions } from "./TaskHeader"
 import { CheckmarkControl } from "../common/CheckmarkControl"
+import McpResponseDisplay from "../mcp/McpResponseDisplay"
 
 const ChatRowContainer = styled.div`
 	padding: 10px 6px 10px 15px;
@@ -46,6 +47,35 @@ interface ChatRowProps {
 
 interface ChatRowContentProps extends Omit<ChatRowProps, "onHeightChange"> {}
 
+export const ProgressIndicator = () => (
+	<div
+		style={{
+			width: "16px",
+			height: "16px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+		}}>
+		<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
+			<VSCodeProgressRing />
+		</div>
+	</div>
+)
+
+const Markdown = memo(({ markdown }: { markdown?: string }) => {
+	return (
+		<div
+			style={{
+				wordBreak: "break-word",
+				overflowWrap: "anywhere",
+				marginBottom: -15,
+				marginTop: -15,
+			}}>
+			<MarkdownBlock markdown={markdown} />
+		</div>
+	)
+})
+
 const ChatRow = memo(
 	(props: ChatRowProps) => {
 		const { isLast, onHeightChange, message, lastModifiedMessage } = props
@@ -53,7 +83,7 @@ const ChatRow = memo(
 		// This allows us to detect changes without causing re-renders
 		const prevHeightRef = useRef(0)
 
-		// NOTE: for tools that are interrupted and not responded to (approved or rejected), there won't be a checkpoint hash
+		// NOTE: for tools that are interrupted and not responded to (approved or rejected) there won't be a checkpoint hash
 		let shouldShowCheckpoints =
 			message.lastCheckpointHash != null &&
 			(message.say === "tool" ||
@@ -78,7 +108,7 @@ const ChatRow = memo(
 		)
 
 		useEffect(() => {
-			// used for partials, command output, etc.
+			// used for partials command output etc.
 			// NOTE: it's important we don't distinguish between partial or complete here since our scroll effects in chatview need to handle height change during partial -> complete
 			const isInitialRender = prevHeightRef.current === 0 // prevents scrolling when new element is added since we already scroll for that
 			// height starts off at Infinity
@@ -90,7 +120,7 @@ const ChatRow = memo(
 			}
 		}, [height, isLast, onHeightChange, message])
 
-		// we cannot return null as virtuoso does not support it, so we use a separate visibleMessages array to filter out messages that should not be rendered
+		// we cannot return null as virtuoso does not support it so we use a separate visibleMessages array to filter out messages that should not be rendered
 		return chatrow
 	},
 	// memo does shallow comparison of props, so we need to do deep comparison of arrays/objects whose properties might change
@@ -101,7 +131,6 @@ export default ChatRow
 
 export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessage, isLast }: ChatRowContentProps) => {
 	const { mcpServers, mcpMarketplaceCatalog } = useExtensionState()
-
 	const [seeNewChangesDisabled, setSeeNewChangesDisabled] = useState(false)
 
 	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
@@ -111,11 +140,13 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 		}
 		return [undefined, undefined, undefined]
 	}, [message.text, message.say])
-	// when resuming task, last wont be api_req_failed but a resume_task message, so api_req_started will show loading spinner. that's why we just remove the last api_req_started that failed without streaming anything
+
+	// when resuming task last won't be api_req_failed but a resume_task message so api_req_started will show loading spinner. that's why we just remove the last api_req_started that failed without streaming anything
 	const apiRequestFailedMessage =
 		isLast && lastModifiedMessage?.ask === "api_req_failed" // if request is retried then the latest message is a api_req_retried
 			? lastModifiedMessage?.text
 			: undefined
+
 	const isCommandExecuting =
 		isLast &&
 		(lastModifiedMessage?.ask === "command" || lastModifiedMessage?.say === "command") &&
@@ -367,12 +398,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 								Cline wants to read this file:
 							</span>
 						</div>
-						{/* <CodeAccordian
-							code={tool.content!}
-							path={tool.path!}
-							isExpanded={isExpanded}
-							onToggleExpand={onToggleExpand}
-						/> */}
 						<div
 							style={{
 								borderRadius: 3,
@@ -498,32 +523,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 						/>
 					</>
 				)
-			// case "inspectSite":
-			// 	const isInspecting =
-			// 		isLast && lastModifiedMessage?.say === "inspect_site_result" && !lastModifiedMessage?.images
-			// 	return (
-			// 		<>
-			// 			<div style={headerStyle}>
-			// 				{isInspecting ? <ProgressIndicator /> : toolIcon("inspect")}
-			// 				<span style={{ fontWeight: "bold" }}>
-			// 					{message.type === "ask" ? (
-			// 						<>Cline wants to inspect this website:</>
-			// 					) : (
-			// 						<>Cline is inspecting this website:</>
-			// 					)}
-			// 				</span>
-			// 			</div>
-			// 			<div
-			// 				style={{
-			// 					borderRadius: 3,
-			// 					border: "1px solid var(--vscode-editorGroup-border)",
-			// 					overflow: "hidden",
-			// 					backgroundColor: CODE_BLOCK_BG_COLOR,
-			// 				}}>
-			// 				<CodeBlock source={`${"```"}shell\n${tool.path}\n${"```"}`} forceWrap={true} />
-			// 			</div>
-			// 		</>
-			// 	)
 			default:
 				return null
 		}
@@ -570,10 +569,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 					{icon}
 					{title}
 				</div>
-				{/* <Terminal
-					rawOutput={command + (output ? "\n" + output : "")}
-					shouldAllowInput={!!isCommandExecuting && output.length > 0}
-				/> */}
 				<div
 					style={{
 						borderRadius: 3,
@@ -640,7 +635,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 					{useMcpServer.type === "access_mcp_resource" && (
 						<McpResourceRow
 							item={{
-								// Use the matched resource/template details, with fallbacks
 								...(findMatchingResourceOrTemplate(
 									useMcpServer.uri || "",
 									server?.resources,
@@ -650,7 +644,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 									mimeType: "",
 									description: "",
 								}),
-								// Always use the actual URI from the request
 								uri: useMcpServer.uri || "",
 							}}
 						/>
@@ -742,6 +735,39 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 											color: "var(--vscode-errorForeground)",
 										}}>
 										{apiRequestFailedMessage || apiReqStreamingFailedMessage}
+
+										{/* {apiProvider === "" && (
+												<div
+													style={{
+														display: "flex",
+														alignItems: "center",
+														backgroundColor:
+															"color-mix(in srgb, var(--vscode-errorForeground) 20%, transparent)",
+														color: "var(--vscode-editor-foreground)",
+														padding: "6px 8px",
+														borderRadius: "3px",
+														margin: "10px 0 0 0",
+														fontSize: "12px",
+													}}>
+													<i
+														className="codicon codicon-warning"
+														style={{
+															marginRight: 6,
+															fontSize: 16,
+															color: "var(--vscode-errorForeground)",
+														}}></i>
+													<span>
+														Uh-oh this could be a problem on end. We've been alerted and
+														will resolve this ASAP. You can also{" "}
+														<a
+															href=""
+															style={{ color: "inherit", textDecoration: "underline" }}>
+															contact us
+														</a>
+														.
+													</span>
+												</div>
+											)} */}
 										{apiRequestFailedMessage?.toLowerCase().includes("powershell") && (
 											<>
 												<br />
@@ -759,39 +785,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 											</>
 										)}
 									</p>
-
-									{/* {apiProvider === "" && (
-											<div
-												style={{
-													display: "flex",
-													alignItems: "center",
-													backgroundColor:
-														"color-mix(in srgb, var(--vscode-errorForeground) 20%, transparent)",
-													color: "var(--vscode-editor-foreground)",
-													padding: "6px 8px",
-													borderRadius: "3px",
-													margin: "10px 0 0 0",
-													fontSize: "12px",
-												}}>
-												<i
-													className="codicon codicon-warning"
-													style={{
-														marginRight: 6,
-														fontSize: 16,
-														color: "var(--vscode-errorForeground)",
-													}}></i>
-												<span>
-													Uh-oh, this could be a problem on end. We've been alerted and
-													will resolve this ASAP. You can also{" "}
-													<a
-														href=""
-														style={{ color: "inherit", textDecoration: "underline" }}>
-														contact us
-													</a>
-													.
-												</span>
-											</div>
-										)} */}
 								</>
 							)}
 
@@ -809,6 +802,8 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 					)
 				case "api_req_finished":
 					return null // we should never see this message type
+				case "mcp_server_response":
+					return <McpResponseDisplay responseText={message.text || ""} />
 				case "text":
 					return (
 						<div>
@@ -1101,28 +1096,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 							</div>
 						</>
 					)
-				case "mcp_server_response":
-					return (
-						<>
-							<div style={{ paddingTop: 0 }}>
-								<div
-									style={{
-										marginBottom: "4px",
-										opacity: 0.8,
-										fontSize: "12px",
-										textTransform: "uppercase",
-									}}>
-									Response
-								</div>
-								<CodeAccordian
-									code={message.text}
-									language="json"
-									isExpanded={true}
-									onToggleExpand={onToggleExpand}
-								/>
-							</div>
-						</>
-					)
 				default:
 					return (
 						<>
@@ -1174,7 +1147,6 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 					)
 				case "completion_result":
 					if (message.text) {
-						// FIXME: is this ever even used?
 						const hasChanges = message.text.endsWith(COMPLETION_RESULT_CHANGES_FLAG) ?? false
 						const text = hasChanges ? message.text.slice(0, -COMPLETION_RESULT_CHANGES_FLAG.length) : message.text
 						return (
@@ -1247,32 +1219,3 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 			}
 	}
 }
-
-export const ProgressIndicator = () => (
-	<div
-		style={{
-			width: "16px",
-			height: "16px",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-		}}>
-		<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
-			<VSCodeProgressRing />
-		</div>
-	</div>
-)
-
-const Markdown = memo(({ markdown }: { markdown?: string }) => {
-	return (
-		<div
-			style={{
-				wordBreak: "break-word",
-				overflowWrap: "anywhere",
-				marginBottom: -15,
-				marginTop: -15,
-			}}>
-			<MarkdownBlock markdown={markdown} />
-		</div>
-	)
-})

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

@@ -742,9 +742,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			const unknownModel = "unknown"
 			if (!apiConfiguration) return unknownModel
 			switch (selectedProvider) {
-				case "anthropic":
-				case "openrouter":
-					return `${selectedProvider}:${selectedModelId}`
 				case "openai":
 					return `openai-compat:${selectedModelId}`
 				case "vscode-lm":
@@ -758,7 +755,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				case "litellm":
 					return `${selectedProvider}:${apiConfiguration.liteLlmModelId}`
 				case "requesty":
-					return `${selectedProvider}:${apiConfiguration.requestyModelId}`
+				case "anthropic":
+				case "openrouter":
 				default:
 					return `${selectedProvider}:${selectedModelId}`
 			}

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

@@ -1,4 +1,4 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton } 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"
@@ -26,6 +26,7 @@ import BrowserSessionRow from "./BrowserSessionRow"
 import ChatRow from "./ChatRow"
 import ChatTextArea from "./ChatTextArea"
 import TaskHeader from "./TaskHeader"
+import TelemetryBanner from "../common/TelemetryBanner"
 
 interface ChatViewProps {
 	isHidden: boolean
@@ -37,7 +38,7 @@ interface ChatViewProps {
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
 const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryView }: ChatViewProps) => {
-	const { version, clineMessages: messages, taskHistory, apiConfiguration } = useExtensionState()
+	const { version, clineMessages: messages, taskHistory, apiConfiguration, telemetrySetting } = useExtensionState()
 
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
 	const task = useMemo(() => messages.at(0), [messages]) // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see Cline.abort)
@@ -789,7 +790,10 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						flexDirection: "column",
 						paddingBottom: "10px",
 					}}>
+					{telemetrySetting === "unset" && <TelemetryBanner />}
+
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
+
 					<div style={{ padding: "0 20px", flexShrink: 0 }}>
 						<h2>What can I do for you?</h2>
 						<p>

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

@@ -0,0 +1,72 @@
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { memo, useState } from "react"
+import styled from "styled-components"
+import { vscode } from "../../utils/vscode"
+import { TelemetrySetting } from "../../../../src/shared/TelemetrySetting"
+
+const BannerContainer = styled.div`
+	background-color: var(--vscode-banner-background);
+	padding: 12px 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	flex-shrink: 0;
+	margin-bottom: 6px;
+`
+
+const ButtonContainer = styled.div`
+	display: flex;
+	gap: 8px;
+	width: 100%;
+
+	& > vscode-button {
+		flex: 1;
+	}
+`
+
+const TelemetryBanner = () => {
+	const [hasChosen, setHasChosen] = useState(false)
+
+	const handleAllow = () => {
+		setHasChosen(true)
+		vscode.postMessage({ type: "telemetrySetting", text: "enabled" satisfies TelemetrySetting })
+	}
+
+	const handleDeny = () => {
+		setHasChosen(true)
+		vscode.postMessage({ type: "telemetrySetting", text: "disabled" satisfies TelemetrySetting })
+	}
+
+	const handleOpenSettings = () => {
+		vscode.postMessage({ type: "openSettings" })
+	}
+
+	return (
+		<BannerContainer>
+			<div>
+				<strong>Help Improve Cline</strong>
+				<div style={{ marginTop: 4 }}>
+					Send anonymous error and usage data to help us fix bugs and improve the extension. No code, prompts, or
+					personal information is ever sent.
+					<div style={{ marginTop: 4 }}>
+						You can always change this in{" "}
+						<VSCodeLink href="#" onClick={handleOpenSettings}>
+							settings
+						</VSCodeLink>
+						.
+					</div>
+				</div>
+			</div>
+			<ButtonContainer>
+				<VSCodeButton appearance="primary" onClick={handleAllow} disabled={hasChosen}>
+					Allow
+				</VSCodeButton>
+				<VSCodeButton appearance="secondary" onClick={handleDeny} disabled={hasChosen}>
+					Deny
+				</VSCodeButton>
+			</ButtonContainer>
+		</BannerContainer>
+	)
+}
+
+export default memo(TelemetryBanner)

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

@@ -0,0 +1,188 @@
+import React, { useEffect, useState } from "react"
+import { vscode } from "../../utils/vscode"
+import DOMPurify from "dompurify"
+
+interface OpenGraphData {
+	title?: string
+	description?: string
+	image?: string
+	url?: string
+	siteName?: string
+	type?: string
+}
+
+interface LinkPreviewProps {
+	url: string
+}
+
+const LinkPreview: React.FC<LinkPreviewProps> = ({ url }) => {
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+	const [ogData, setOgData] = useState<OpenGraphData | null>(null)
+
+	useEffect(() => {
+		const fetchOpenGraphData = async () => {
+			try {
+				setLoading(true)
+
+				// Send a message to the extension to fetch Open Graph data
+				vscode.postMessage({
+					type: "fetchOpenGraphData",
+					text: url,
+				})
+
+				// Set up a listener for the response
+				const messageListener = (event: MessageEvent) => {
+					const message = event.data
+					if (message.type === "openGraphData" && message.url === url) {
+						setOgData(message.openGraphData)
+						setLoading(false)
+						window.removeEventListener("message", messageListener)
+					}
+				}
+
+				window.addEventListener("message", messageListener)
+
+				// Clean up the listener if the component unmounts
+				return () => {
+					window.removeEventListener("message", messageListener)
+				}
+			} catch (err) {
+				setError("Failed to fetch preview data")
+				setLoading(false)
+			}
+		}
+
+		// Fetch Open Graph data immediately when component mounts
+		fetchOpenGraphData()
+	}, [url])
+
+	// Fallback display while loading
+	if (loading) {
+		return (
+			<div
+				className="link-preview-loading"
+				style={{
+					padding: "12px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					border: "1px solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.3))",
+					borderRadius: "4px",
+				}}>
+				<div
+					className="loading-spinner"
+					style={{
+						marginRight: "8px",
+						width: "16px",
+						height: "16px",
+						border: "2px solid rgba(127, 127, 127, 0.3)",
+						borderTopColor: "var(--vscode-textLink-foreground, #3794ff)",
+						borderRadius: "50%",
+						animation: "spin 1s linear infinite",
+					}}
+				/>
+				<style>
+					{`
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          `}
+				</style>
+				Loading preview for {new URL(url).hostname}...
+			</div>
+		)
+	}
+
+	// Create a fallback object if ogData is null
+	const data = ogData || {
+		title: new URL(url).hostname,
+		description: "No description available",
+		siteName: new URL(url).hostname,
+		url: url,
+	}
+
+	// Render the Open Graph preview
+	return (
+		<div
+			className="link-preview"
+			style={{
+				display: "flex",
+				border: "1px solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.3))",
+				borderRadius: "4px",
+				overflow: "hidden",
+				cursor: "pointer",
+			}}
+			onClick={() => {
+				vscode.postMessage({
+					type: "openInBrowser",
+					url: DOMPurify.sanitize(url),
+				})
+			}}>
+			{data.image && (
+				<div className="link-preview-image" style={{ width: "128px", height: "128px", flexShrink: 0 }}>
+					<img
+						src={DOMPurify.sanitize(data.image)}
+						alt=""
+						style={{
+							width: "100%",
+							height: "100%",
+							objectFit: "cover",
+						}}
+					/>
+				</div>
+			)}
+
+			<div
+				className="link-preview-content"
+				style={{
+					flex: 1,
+					padding: "12px",
+					display: "flex",
+					flexDirection: "column",
+					overflow: "hidden",
+				}}>
+				<div
+					className="link-preview-title"
+					style={{
+						fontWeight: "bold",
+						marginBottom: "4px",
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+					}}>
+					{data.title || "No title"}
+				</div>
+
+				<div
+					className="link-preview-url"
+					style={{
+						fontSize: "12px",
+						color: "var(--vscode-textLink-foreground, #3794ff)",
+						marginBottom: "8px",
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+					}}>
+					{data.siteName || new URL(url).hostname}
+				</div>
+
+				<div
+					className="link-preview-description"
+					style={{
+						fontSize: "12px",
+						color: "var(--vscode-descriptionForeground, rgba(204, 204, 204, 0.7))",
+						overflow: "hidden",
+						display: "-webkit-box",
+						WebkitLineClamp: 3,
+						WebkitBoxOrient: "vertical",
+						textOverflow: "ellipsis",
+					}}>
+					{data.description || "No description available"}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default LinkPreview

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

@@ -0,0 +1,460 @@
+import React, { useEffect, useState, useCallback } from "react"
+import { vscode } from "../../utils/vscode"
+import LinkPreview from "./LinkPreview"
+import styled from "styled-components"
+import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import DOMPurify from "dompurify"
+
+// We'll use the backend isImageUrl function for HEAD requests
+// This is a client-side fallback for data URLs and obvious image extensions
+const isImageUrlSync = (str: string): boolean => {
+	// Check for data URLs which are definitely images
+	if (str.startsWith("data:image/")) {
+		return true
+	}
+
+	// Check for common image file extensions
+	return str.match(/\.(jpg|jpeg|png|gif|webp)$/i) !== null
+}
+
+export const isUrl = (str: string): boolean => {
+	// Basic URL validation
+	const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[^\s]*)?$/
+	return urlPattern.test(str)
+}
+
+// Function to check if a URL is an image using HEAD request
+export const checkIfImageUrl = async (url: string): Promise<boolean> => {
+	// For data URLs, we can check synchronously
+	if (url.startsWith("data:image/")) {
+		return true
+	}
+
+	// For http/https URLs, we need to send a message to the extension
+	if (url.startsWith("http")) {
+		try {
+			// Create a promise that will resolve when we get a response
+			return new Promise((resolve) => {
+				// Set up a one-time listener for the response
+				const messageListener = (event: MessageEvent) => {
+					const message = event.data
+					if (message.type === "isImageUrlResult" && message.url === url) {
+						window.removeEventListener("message", messageListener)
+						resolve(message.isImage)
+					}
+				}
+
+				window.addEventListener("message", messageListener)
+
+				// Send the request to the extension
+				vscode.postMessage({
+					type: "checkIsImageUrl",
+					text: url,
+				})
+
+				// Set a timeout to avoid hanging indefinitely
+				setTimeout(() => {
+					window.removeEventListener("message", messageListener)
+					// Fall back to extension check
+					resolve(isImageUrlSync(url))
+				}, 3000)
+			})
+		} catch (error) {
+			console.error("Error checking if URL is an image:", error)
+			return isImageUrlSync(url)
+		}
+	}
+
+	// Fall back to extension check for other URLs
+	return isImageUrlSync(url)
+}
+
+// No longer needed as our regex directly extracts the URL part
+
+// Helper to ensure URL is in a format that can be opened
+export const formatUrlForOpening = (url: string): string => {
+	// If it's a data URI, return as is
+	if (url.startsWith("data:image/")) {
+		return url
+	}
+
+	// If it's a regular URL but doesn't have a protocol, add https://
+	if (!url.startsWith("http://") && !url.startsWith("https://")) {
+		return `https://${url}`
+	}
+
+	return url
+}
+
+// Find all URLs (both image and regular) in an object
+export const findUrls = async (obj: any): Promise<{ imageUrls: string[]; regularUrls: string[] }> => {
+	const imageUrls: string[] = []
+	const regularUrls: string[] = []
+	const pendingChecks: Promise<void>[] = []
+
+	if (typeof obj === "object" && obj !== null) {
+		for (const value of Object.values(obj)) {
+			if (typeof value === "string") {
+				// First check with synchronous method
+				if (isImageUrlSync(value)) {
+					imageUrls.push(value)
+				} else if (isUrl(value)) {
+					// For URLs that don't obviously look like images, we'll check asynchronously
+					const checkPromise = checkIfImageUrl(value).then((isImage) => {
+						if (isImage) {
+							imageUrls.push(value)
+						} else {
+							regularUrls.push(value)
+						}
+					})
+					pendingChecks.push(checkPromise)
+				}
+			} else if (typeof value === "object") {
+				const nestedUrlsPromise = findUrls(value).then((nestedUrls) => {
+					imageUrls.push(...nestedUrls.imageUrls)
+					regularUrls.push(...nestedUrls.regularUrls)
+				})
+				pendingChecks.push(nestedUrlsPromise)
+			}
+		}
+	}
+
+	// Wait for all async checks to complete
+	await Promise.all(pendingChecks)
+
+	return { imageUrls, regularUrls }
+}
+
+// Extract URLs from text using regex
+export const extractUrlsFromText = async (text: string): Promise<{ imageUrls: string[]; regularUrls: string[] }> => {
+	const imageUrls: string[] = []
+	const regularUrls: string[] = []
+	const pendingChecks: Promise<void>[] = []
+
+	// Match URLs with image: prefix and extract just the URL part
+	const imageMatches = text.match(/image:\s*(https?:\/\/[^\s]+)/g)
+	if (imageMatches) {
+		// Extract just the URL part from matches with image: prefix
+		const extractedUrls = imageMatches
+			.map((match) => {
+				const urlMatch = /image:\s*(https?:\/\/[^\s]+)/.exec(match)
+				return urlMatch ? urlMatch[1] : null
+			})
+			.filter(Boolean) as string[]
+
+		imageUrls.push(...extractedUrls)
+	}
+
+	// Match all URLs (including those that might be in the middle of paragraphs)
+	const urlMatches = text.match(/https?:\/\/[^\s]+/g)
+	if (urlMatches) {
+		// Filter out URLs that are already in imageUrls
+		const filteredUrls = urlMatches.filter((url) => !imageUrls.includes(url))
+
+		// Check each URL to see if it's an image
+		for (const url of filteredUrls) {
+			// First check with synchronous method
+			if (isImageUrlSync(url)) {
+				imageUrls.push(url)
+			} else {
+				// For URLs that don't obviously look like images, we'll check asynchronously
+				const checkPromise = checkIfImageUrl(url).then((isImage) => {
+					if (isImage) {
+						imageUrls.push(url)
+					} else {
+						regularUrls.push(url)
+					}
+				})
+				pendingChecks.push(checkPromise)
+			}
+		}
+	}
+
+	// Wait for all async checks to complete
+	await Promise.all(pendingChecks)
+
+	return { imageUrls, regularUrls }
+}
+
+const ResponseHeader = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 9px 10px;
+	color: var(--vscode-descriptionForeground);
+	cursor: pointer;
+	user-select: none;
+	border-bottom: 1px dashed var(--vscode-editorGroup-border);
+	margin-bottom: 8px;
+
+	.header-title {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-right: 8px;
+	}
+`
+
+const ToggleSwitch = styled.div`
+	display: flex;
+	align-items: center;
+	font-size: 12px;
+	color: var(--vscode-descriptionForeground);
+
+	.toggle-label {
+		margin-right: 8px;
+	}
+
+	.toggle-container {
+		position: relative;
+		width: 40px;
+		height: 20px;
+		background-color: var(--vscode-button-secondaryBackground);
+		border-radius: 10px;
+		cursor: pointer;
+		transition: background-color 0.3s;
+	}
+
+	.toggle-container.active {
+		background-color: var(--vscode-button-background);
+	}
+
+	.toggle-handle {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: 16px;
+		height: 16px;
+		background-color: var(--vscode-button-foreground);
+		border-radius: 50%;
+		transition: transform 0.3s;
+	}
+
+	.toggle-container.active .toggle-handle {
+		transform: translateX(20px);
+	}
+`
+
+const ResponseContainer = styled.div`
+	position: relative;
+	font-family: var(--vscode-editor-font-family, monospace);
+	font-size: var(--vscode-editor-font-size, 12px);
+	background-color: ${CODE_BLOCK_BG_COLOR};
+	color: var(--vscode-editor-foreground, #d4d4d4);
+	border-radius: 3px;
+	border: 1px solid var(--vscode-editorGroup-border);
+	overflow: hidden;
+
+	.response-content {
+		overflow-x: auto;
+		overflow-y: hidden;
+		max-width: 100%;
+		padding: 10px;
+	}
+`
+
+// Style for URL text to ensure proper wrapping
+const UrlText = styled.div`
+	white-space: pre-wrap;
+	word-break: break-all;
+	overflow-wrap: break-word;
+	font-family: var(--vscode-editor-font-family, monospace);
+	font-size: var(--vscode-editor-font-size, 12px);
+`
+
+interface McpResponseDisplayProps {
+	responseText: string
+}
+
+// Represents a URL found in the text with its position and metadata
+interface UrlMatch {
+	url: string // The actual URL
+	fullMatch: string // The full matched text (including any prefix like "image:")
+	index: number // Position in the text
+	isImage: boolean // Whether this URL is an image
+	isProcessed: boolean // Whether we've already processed this URL (to avoid duplicates)
+}
+
+const McpResponseDisplay: React.FC<McpResponseDisplayProps> = ({ responseText }) => {
+	const [isLoading, setIsLoading] = useState(true)
+	const [displayMode, setDisplayMode] = useState<"rich" | "plain">(() => {
+		// Get saved preference from localStorage, default to 'rich'
+		const savedMode = localStorage.getItem("mcpDisplayMode")
+		return (savedMode === "plain" ? "plain" : "rich") as "rich" | "plain"
+	})
+	const [urlMatches, setUrlMatches] = useState<UrlMatch[]>([])
+
+	const toggleDisplayMode = useCallback(() => {
+		const newMode = displayMode === "rich" ? "plain" : "rich"
+		setDisplayMode(newMode)
+		localStorage.setItem("mcpDisplayMode", newMode)
+	}, [displayMode])
+
+	// Find all URLs in the text and determine if they're images
+	useEffect(() => {
+		const processResponse = async () => {
+			setIsLoading(true)
+
+			try {
+				const text = responseText || ""
+				const matches: UrlMatch[] = []
+
+				const urlRegex = /https?:\/\/[^\s]+/g
+				let urlMatch: RegExpExecArray | null
+
+				while ((urlMatch = urlRegex.exec(text)) !== null) {
+					const url = urlMatch[0]
+					const fullMatch = url
+
+					matches.push({
+						url,
+						fullMatch,
+						index: urlMatch.index,
+						isImage: false, // Will check later
+						isProcessed: false,
+					})
+				}
+
+				// Check if URLs are images
+				for (const match of matches) {
+					match.isImage = await checkIfImageUrl(match.url)
+				}
+
+				// Sort by position in the text
+				matches.sort((a, b) => a.index - b.index)
+
+				setUrlMatches(matches)
+			} catch (error) {
+				console.error("Error processing MCP response:", error)
+			} finally {
+				setIsLoading(false)
+			}
+		}
+
+		processResponse()
+	}, [responseText])
+
+	// Function to render content based on display mode
+	const renderContent = () => {
+		// For plain text mode, just show the text
+		if (displayMode === "plain" || isLoading) {
+			return <UrlText>{responseText}</UrlText>
+		}
+
+		// For rich display mode, show the text with embedded content
+		if (displayMode === "rich" && !isLoading) {
+			// Create an array of text segments and embedded content
+			const segments: JSX.Element[] = []
+			let lastIndex = 0
+			let segmentIndex = 0
+
+			// Reset the processed flag for all URLs
+			const processedUrls = new Set<string>()
+
+			// Add the text before the first URL
+			if (urlMatches.length === 0) {
+				segments.push(<UrlText key={`segment-${segmentIndex}`}>{responseText}</UrlText>)
+			} else {
+				for (let i = 0; i < urlMatches.length; i++) {
+					const match = urlMatches[i]
+					const { url, fullMatch, index } = match
+
+					// Add text segment before this URL
+					if (index > lastIndex) {
+						segments.push(
+							<UrlText key={`segment-${segmentIndex++}`}>{responseText.substring(lastIndex, index)}</UrlText>,
+						)
+					}
+
+					// Add the URL text itself
+					segments.push(<UrlText key={`url-${segmentIndex++}`}>{fullMatch}</UrlText>)
+
+					// Calculate the end position of this URL in the text
+					const urlEndIndex = index + fullMatch.length
+
+					// Add embedded content after the URL
+					if (match.isImage) {
+						segments.push(
+							<div key={`embed-${segmentIndex++}`} style={{ margin: "10px 0" }}>
+								<img
+									src={DOMPurify.sanitize(url)}
+									alt={`Image for ${url}`}
+									style={{
+										width: "85%",
+										height: "auto",
+										borderRadius: "4px",
+										cursor: "pointer",
+									}}
+									onClick={() => {
+										const formattedUrl = formatUrlForOpening(url)
+										vscode.postMessage({
+											type: "openInBrowser",
+											url: DOMPurify.sanitize(formattedUrl),
+										})
+									}}
+								/>
+							</div>,
+						)
+					} else if (!processedUrls.has(url)) {
+						// For non-image URLs, only show the preview once
+						segments.push(
+							<div key={`embed-${segmentIndex++}`} style={{ margin: "10px 0" }}>
+								<LinkPreview url={formatUrlForOpening(url)} />
+							</div>,
+						)
+
+						// Mark this URL as processed
+						processedUrls.add(url)
+					}
+
+					// Update lastIndex for next segment
+					lastIndex = urlEndIndex
+				}
+
+				// Add any remaining text after the last URL
+				if (lastIndex < responseText.length) {
+					segments.push(<UrlText key={`segment-${segmentIndex++}`}>{responseText.substring(lastIndex)}</UrlText>)
+				}
+			}
+
+			return <>{segments}</>
+		}
+
+		return null
+	}
+
+	try {
+		return (
+			<ResponseContainer>
+				<ResponseHeader>
+					<span className="header-title">Response</span>
+					<ToggleSwitch>
+						<span className="toggle-label">{displayMode === "rich" ? "Rich Display" : "Plain Text"}</span>
+						<div className={`toggle-container ${displayMode === "rich" ? "active" : ""}`} onClick={toggleDisplayMode}>
+							<div className="toggle-handle"></div>
+						</div>
+					</ToggleSwitch>
+				</ResponseHeader>
+
+				<div className="response-content">{renderContent()}</div>
+			</ResponseContainer>
+		)
+	} catch (error) {
+		console.error("Error parsing MCP response:", error)
+		return (
+			<ResponseContainer>
+				<ResponseHeader>
+					<span className="header-title">Response</span>
+				</ResponseHeader>
+				<div className="response-content">
+					<div>Error parsing response:</div>
+					<UrlText>{responseText}</UrlText>
+				</div>
+			</ResponseContainer>
+		)
+	}
+}
+
+export default McpResponseDisplay

webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx

@@ -223,8 +223,16 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 							display: "flex",
 							gap: "6px",
 							flexWrap: "nowrap",
-							overflow: "hidden",
+							overflowX: "auto",
+							scrollbarWidth: "none",
 							position: "relative",
+						}}
+						onScroll={(e) => {
+							const target = e.currentTarget
+							const gradient = target.querySelector(".tags-gradient") as HTMLElement
+							if (gradient) {
+								gradient.style.visibility = target.scrollLeft > 0 ? "hidden" : "visible"
+							}
 						}}>
 						<span
 							style={{
@@ -254,6 +262,7 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 							</span>
 						))}
 						<div
+							className="tags-gradient"
 							style={{
 								position: "absolute",
 								right: 0,

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

@@ -8,40 +8,43 @@ import {
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react"
+import ThinkingBudgetSlider from "./ThinkingBudgetSlider"
 import { useEvent, useInterval } from "react-use"
+import styled from "styled-components"
+import * as vscodemodels from "vscode"
 import {
-	ApiConfiguration,
-	ApiProvider,
-	ModelInfo,
 	anthropicDefaultModelId,
 	anthropicModels,
+	ApiConfiguration,
+	ApiProvider,
 	azureOpenAiDefaultApiVersion,
 	bedrockDefaultModelId,
 	bedrockModels,
 	deepSeekDefaultModelId,
 	deepSeekModels,
-	qwenDefaultModelId,
-	qwenModels,
 	geminiDefaultModelId,
 	geminiModels,
 	mistralDefaultModelId,
 	mistralModels,
+	ModelInfo,
 	openAiModelInfoSaneDefaults,
 	openAiNativeDefaultModelId,
 	openAiNativeModels,
 	openRouterDefaultModelId,
 	openRouterDefaultModelInfo,
+	qwenDefaultModelId,
+	qwenModels,
 	vertexDefaultModelId,
 	vertexModels,
+	xaiDefaultModelId,
+	xaiModels,
 } from "../../../../src/shared/api"
 import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
+import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
 import VSCodeButtonLink from "../common/VSCodeButtonLink"
 import OpenRouterModelPicker, { ModelDescriptionMarkdown } from "./OpenRouterModelPicker"
-import styled from "styled-components"
-import * as vscodemodels from "vscode"
-import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
 
 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -195,6 +198,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 					<VSCodeOption value="lmstudio">LM Studio</VSCodeOption>
 					<VSCodeOption value="ollama">Ollama</VSCodeOption>
 					<VSCodeOption value="litellm">LiteLLM</VSCodeOption>
+					<VSCodeOption value="xai">X AI</VSCodeOption>
 				</VSCodeDropdown>
 			</DropdownContainer>
 
@@ -721,7 +725,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 					{modelConfigurationSelected && (
 						<>
 							<VSCodeCheckbox
-								checked={apiConfiguration?.openAiModelInfo?.supportsImages}
+								checked={!!apiConfiguration?.openAiModelInfo?.supportsImages}
 								onChange={(e: any) => {
 									const isChecked = e.target.checked === true
 									let modelInfo = apiConfiguration?.openAiModelInfo
@@ -1122,6 +1126,46 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 				</div>
 			)}
 
+			{selectedProvider === "xai" && (
+				<div>
+					<VSCodeTextField
+						value={apiConfiguration?.xaiApiKey || ""}
+						style={{ width: "100%" }}
+						type="password"
+						onInput={handleInputChange("xaiApiKey")}
+						placeholder="Enter API Key...">
+						<span style={{ fontWeight: 500 }}>X AI API Key</span>
+					</VSCodeTextField>
+					<p
+						style={{
+							fontSize: "12px",
+							marginTop: 3,
+							color: "var(--vscode-descriptionForeground)",
+						}}>
+						This key is stored locally and only used to make API requests from this extension.
+						{!apiConfiguration?.xaiApiKey && (
+							<VSCodeLink href="https://x.ai" style={{ display: "inline", fontSize: "inherit" }}>
+								You can get an X AI API key by signing up here.
+							</VSCodeLink>
+						)}
+					</p>
+					{/* Note: To fully implement this, you would need to add a handler in ClineProvider.ts */}
+					{/* {apiConfiguration?.xaiApiKey && (
+						<button
+							onClick={() => {
+								vscode.postMessage({
+									type: "requestXAIModels",
+									text: apiConfiguration?.xaiApiKey,
+								})
+							}}
+							style={{ margin: "5px 0 0 0" }}
+							className="vscode-button">
+							Fetch Available Models
+						</button>
+					)} */}
+				</div>
+			)}
+
 			{apiErrorMessage && (
 				<p
 					style={{
@@ -1138,6 +1182,8 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 				selectedProvider !== "ollama" &&
 				selectedProvider !== "lmstudio" &&
 				selectedProvider !== "vscode-lm" &&
+				selectedProvider !== "litellm" &&
+				selectedProvider !== "requesty" &&
 				showModelOptions && (
 					<>
 						<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
@@ -1152,8 +1198,15 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							{selectedProvider === "deepseek" && createDropdown(deepSeekModels)}
 							{selectedProvider === "qwen" && createDropdown(qwenModels)}
 							{selectedProvider === "mistral" && createDropdown(mistralModels)}
+							{selectedProvider === "xai" && createDropdown(xaiModels)}
 						</DropdownContainer>
 
+						{((selectedProvider === "anthropic" && selectedModelId === "claude-3-7-sonnet-20250219") ||
+							(selectedProvider === "bedrock" && selectedModelId === "anthropic.claude-3-7-sonnet-20250219-v1:0") ||
+							(selectedProvider === "vertex" && selectedModelId === "claude-3-7-sonnet@20250219")) && (
+							<ThinkingBudgetSlider apiConfiguration={apiConfiguration} setApiConfiguration={setApiConfiguration} />
+						)}
+
 						<ModelInfoView
 							selectedModelId={selectedModelId}
 							modelInfo={selectedModelInfo}
@@ -1403,6 +1456,8 @@ export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration):
 				selectedModelId: apiConfiguration?.liteLlmModelId || "",
 				selectedModelInfo: openAiModelInfoSaneDefaults,
 			}
+		case "xai":
+			return getProviderData(xaiModels, xaiDefaultModelId)
 		default:
 			return getProviderData(anthropicModels, anthropicDefaultModelId)
 	}

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

@@ -0,0 +1,138 @@
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { memo, useEffect, useRef, useState } from "react"
+import { useRemark } from "react-remark"
+import styled from "styled-components"
+import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+
+const StyledMarkdown = styled.div`
+	font-family:
+		var(--vscode-font-family),
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		"Open Sans",
+		"Helvetica Neue",
+		sans-serif;
+	font-size: 12px;
+	color: var(--vscode-descriptionForeground);
+
+	p,
+	li,
+	ol,
+	ul {
+		line-height: 1.25;
+		margin: 0;
+	}
+
+	ol,
+	ul {
+		padding-left: 1.5em;
+		margin-left: 0;
+	}
+
+	p {
+		white-space: pre-wrap;
+	}
+
+	a {
+		text-decoration: none;
+	}
+	a {
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+`
+
+export const ModelDescriptionMarkdown = memo(
+	({
+		markdown,
+		key,
+		isExpanded,
+		setIsExpanded,
+		isPopup,
+	}: {
+		markdown?: string
+		key: string
+		isExpanded: boolean
+		setIsExpanded: (isExpanded: boolean) => void
+		isPopup?: boolean
+	}) => {
+		const [reactContent, setMarkdown] = useRemark()
+		const [showSeeMore, setShowSeeMore] = useState(false)
+		const textContainerRef = useRef<HTMLDivElement>(null)
+		const textRef = useRef<HTMLDivElement>(null)
+
+		useEffect(() => {
+			setMarkdown(markdown || "")
+		}, [markdown, setMarkdown])
+
+		useEffect(() => {
+			if (textRef.current && textContainerRef.current) {
+				const { scrollHeight } = textRef.current
+				const { clientHeight } = textContainerRef.current
+				const isOverflowing = scrollHeight > clientHeight
+				setShowSeeMore(isOverflowing)
+			}
+		}, [reactContent, setIsExpanded])
+
+		return (
+			<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 0 }}>
+				<div
+					ref={textContainerRef}
+					style={{
+						overflowY: isExpanded ? "auto" : "hidden",
+						position: "relative",
+						wordBreak: "break-word",
+						overflowWrap: "anywhere",
+					}}>
+					<div
+						ref={textRef}
+						style={{
+							display: "-webkit-box",
+							WebkitLineClamp: isExpanded ? "unset" : 3,
+							WebkitBoxOrient: "vertical",
+							overflow: "hidden",
+						}}>
+						{reactContent}
+					</div>
+					{!isExpanded && showSeeMore && (
+						<div
+							style={{
+								position: "absolute",
+								right: 0,
+								bottom: 0,
+								display: "flex",
+								alignItems: "center",
+							}}>
+							<div
+								style={{
+									width: 30,
+									height: "1.2em",
+									background: "linear-gradient(to right, transparent, var(--vscode-sideBar-background))",
+								}}
+							/>
+							<VSCodeLink
+								style={{
+									fontSize: "inherit",
+									paddingRight: 0,
+									paddingLeft: 3,
+									backgroundColor: isPopup ? CODE_BLOCK_BG_COLOR : "var(--vscode-sideBar-background)",
+								}}
+								onClick={() => setIsExpanded(true)}>
+								See more
+							</VSCodeLink>
+						</div>
+					)}
+				</div>
+			</StyledMarkdown>
+		)
+	},
+)
+
+export default ModelDescriptionMarkdown

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

@@ -10,6 +10,7 @@ import { vscode } from "../../utils/vscode"
 import { highlight } from "../history/HistoryView"
 import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import ThinkingBudgetSlider from "./ThinkingBudgetSlider"
 
 export interface OpenRouterModelPickerProps {
 	isPopup?: boolean
@@ -135,6 +136,13 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 		}
 	}, [selectedIndex])
 
+	const showBudgetSlider = useMemo(() => {
+		return (
+			selectedModelId?.toLowerCase().includes("claude-3-7-sonnet") ||
+			selectedModelId?.toLowerCase().includes("claude-3.7-sonnet")
+		)
+	}, [selectedModelId])
+
 	return (
 		<div style={{ width: "100%" }}>
 			<style>
@@ -206,13 +214,18 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = ({ isPopup }
 			</div>
 
 			{hasInfo ? (
-				<ModelInfoView
-					selectedModelId={selectedModelId}
-					modelInfo={selectedModelInfo}
-					isDescriptionExpanded={isDescriptionExpanded}
-					setIsDescriptionExpanded={setIsDescriptionExpanded}
-					isPopup={isPopup}
-				/>
+				<>
+					{showBudgetSlider && (
+						<ThinkingBudgetSlider apiConfiguration={apiConfiguration} setApiConfiguration={setApiConfiguration} />
+					)}
+					<ModelInfoView
+						selectedModelId={selectedModelId}
+						modelInfo={selectedModelInfo}
+						isDescriptionExpanded={isDescriptionExpanded}
+						setIsDescriptionExpanded={setIsDescriptionExpanded}
+						isPopup={isPopup}
+					/>
+				</>
 			) : (
 				<p
 					style={{

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

@@ -1,10 +1,10 @@
-import { VSCodeButton, VSCodeLink, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeCheckbox, VSCodeLink, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
 import { memo, useEffect, useState } from "react"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
-import ApiOptions from "./ApiOptions"
 import SettingsButton from "../common/SettingsButton"
+import ApiOptions from "./ApiOptions"
 const { IS_DEV } = process.env
 
 type SettingsViewProps = {
@@ -12,7 +12,15 @@ type SettingsViewProps = {
 }
 
 const SettingsView = ({ onDone }: SettingsViewProps) => {
-	const { apiConfiguration, version, customInstructions, setCustomInstructions, openRouterModels } = useExtensionState()
+	const {
+		apiConfiguration,
+		version,
+		customInstructions,
+		setCustomInstructions,
+		openRouterModels,
+		telemetrySetting,
+		setTelemetrySetting,
+	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
 
@@ -29,6 +37,10 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				type: "customInstructions",
 				text: customInstructions,
 			})
+			vscode.postMessage({
+				type: "telemetrySetting",
+				text: telemetrySetting,
+			})
 			onDone()
 		}
 	}
@@ -114,6 +126,33 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					</p>
 				</div>
 
+				<div style={{ marginBottom: 5 }}>
+					<VSCodeCheckbox
+						style={{ marginBottom: "5px" }}
+						checked={telemetrySetting === "enabled"}
+						onChange={(e: any) => {
+							const checked = e.target.checked === true
+							setTelemetrySetting(checked ? "enabled" : "disabled")
+						}}>
+						Allow anonymous error and usage reporting
+					</VSCodeCheckbox>
+					<p
+						style={{
+							fontSize: "12px",
+							marginTop: "5px",
+							color: "var(--vscode-descriptionForeground)",
+						}}>
+						Help improve Cline by sending anonymous usage data and error reports. No code, prompts, or personal
+						information is ever sent. See our{" "}
+						<VSCodeLink
+							href="https://github.com/cline/cline/blob/main/docs/PRIVACY.md"
+							style={{ fontSize: "inherit" }}>
+							privacy policy
+						</VSCodeLink>{" "}
+						for more details.
+					</p>
+				</div>
+
 				{IS_DEV && (
 					<>
 						<div style={{ marginTop: "10px", marginBottom: "4px" }}>Debug</div>

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

@@ -0,0 +1,151 @@
+import { memo, useState } from "react"
+import { anthropicModels, ApiConfiguration } from "../../../../src/shared/api"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import styled from "styled-components"
+
+// Constants
+const MIN_VALID_TOKENS = 1024
+const MAX_PERCENTAGE = 0.8
+const THUMB_SIZE = 16
+
+// Styled Components
+const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+`
+
+const LabelContainer = styled.div`
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 12px;
+`
+
+const Label = styled.label`
+	font-weight: 500;
+	display: block;
+	margin-right: auto;
+`
+const Description = styled.p`
+	font-size: 12px;
+	margin-top: 0px;
+	margin-bottom: 0px;
+	color: var(--vscode-descriptionForeground);
+`
+
+const RangeInput = styled.input<{ $value: number; $min: number; $max: number }>`
+	width: 100%;
+	height: 8px;
+	appearance: none;
+	border-radius: 4px;
+	outline: none;
+	cursor: pointer;
+	margin: 5px 0 0;
+	padding: 0;
+	background: ${(props) => {
+		const percentage = ((props.$value - props.$min) / (props.$max - props.$min)) * 100
+		return `linear-gradient(to right, 
+			var(--vscode-progressBar-background) 0%,
+			var(--vscode-progressBar-background) ${percentage}%,
+			var(--vscode-scrollbarSlider-background) ${percentage}%,
+			var(--vscode-scrollbarSlider-background) 100%)`
+	}};
+
+	&::-webkit-slider-thumb {
+		appearance: none;
+		width: ${THUMB_SIZE}px;
+		height: ${THUMB_SIZE}px;
+		border-radius: 50%;
+		background: var(--vscode-foreground);
+		cursor: pointer;
+		border: 2px solid var(--vscode-progressBar-background);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus::-webkit-slider-thumb,
+	&:hover::-webkit-slider-thumb {
+		border-color: var(--vscode-progressBar-background);
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+	}
+
+	&:active::-webkit-slider-thumb {
+		outline: none;
+		border-color: var(--vscode-progressBar-background);
+	}
+`
+
+interface ThinkingBudgetSliderProps {
+	apiConfiguration: ApiConfiguration | undefined
+	setApiConfiguration: (apiConfiguration: ApiConfiguration) => void
+}
+
+const ThinkingBudgetSlider = ({ apiConfiguration, setApiConfiguration }: ThinkingBudgetSliderProps) => {
+	const maxTokens = anthropicModels["claude-3-7-sonnet-20250219"].maxTokens
+	const maxSliderValue = Math.floor(maxTokens * MAX_PERCENTAGE)
+	const isEnabled = (apiConfiguration?.thinkingBudgetTokens || 0) > 0
+
+	// Add local state for the slider value
+	const [localValue, setLocalValue] = useState(apiConfiguration?.thinkingBudgetTokens || 0)
+
+	const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const value = parseInt(event.target.value, 10)
+		setLocalValue(value)
+	}
+
+	const handleSliderComplete = () => {
+		setApiConfiguration({
+			...apiConfiguration,
+			thinkingBudgetTokens: localValue,
+		})
+	}
+
+	const handleToggleChange = (event: any) => {
+		const isChecked = (event.target as HTMLInputElement).checked
+		const newValue = isChecked ? MIN_VALID_TOKENS : 0
+		setLocalValue(newValue)
+		setApiConfiguration({
+			...apiConfiguration,
+			thinkingBudgetTokens: newValue,
+		})
+	}
+
+	return (
+		<Container>
+			<VSCodeCheckbox checked={isEnabled} onChange={handleToggleChange}>
+				Enable extended thinking
+			</VSCodeCheckbox>
+
+			{isEnabled && (
+				<>
+					<LabelContainer>
+						<Label>
+							<strong>Budget:</strong> {localValue.toLocaleString()} tokens
+						</Label>
+					</LabelContainer>
+					<RangeInput
+						type="range"
+						min={MIN_VALID_TOKENS}
+						max={maxSliderValue}
+						step={100}
+						value={localValue}
+						onChange={handleSliderChange}
+						onMouseUp={handleSliderComplete}
+						onTouchEnd={handleSliderComplete}
+						$value={localValue}
+						$min={MIN_VALID_TOKENS}
+						$max={maxSliderValue}
+					/>
+
+					<Description>Higher budgets may allow you to achieve more comprehensive and nuanced reasoning</Description>
+				</>
+			)}
+		</Container>
+	)
+}
+
+export default memo(ThinkingBudgetSlider)

webview-ui/src/components/settings/__tests__/APIOptions.spec.tsx

@@ -126,6 +126,7 @@ describe("OpenApiInfoOptions", () => {
 				<ApiOptions showModelOptions={true} />
 			</ExtensionStateContextProvider>,
 		)
+		fireEvent.click(screen.getByText("Model Configuration"))
 		const apiKeyInput = screen.getByText("Supports Images")
 		expect(apiKeyInput).toBeInTheDocument()
 	})
@@ -136,6 +137,7 @@ describe("OpenApiInfoOptions", () => {
 				<ApiOptions showModelOptions={true} />
 			</ExtensionStateContextProvider>,
 		)
+		fireEvent.click(screen.getByText("Model Configuration"))
 		const orgIdInput = screen.getByText("Context Window Size")
 		expect(orgIdInput).toBeInTheDocument()
 	})
@@ -146,6 +148,7 @@ describe("OpenApiInfoOptions", () => {
 				<ApiOptions showModelOptions={true} />
 			</ExtensionStateContextProvider>,
 		)
+		fireEvent.click(screen.getByText("Model Configuration"))
 		const modelInput = screen.getByText("Max Output Tokens")
 		expect(modelInput).toBeInTheDocument()
 	})

webview-ui/src/context/ExtensionStateContext.tsx

@@ -9,6 +9,7 @@ import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { vscode } from "../utils/vscode"
 import { DEFAULT_BROWSER_SETTINGS } from "../../../src/shared/BrowserSettings"
 import { DEFAULT_CHAT_SETTINGS } from "../../../src/shared/ChatSettings"
+import { TelemetrySetting } from "../../../src/shared/TelemetrySetting"
 
 interface ExtensionStateContextType extends ExtensionState {
 	didHydrateState: boolean
@@ -21,6 +22,7 @@ interface ExtensionStateContextType extends ExtensionState {
 	filePaths: string[]
 	setApiConfiguration: (config: ApiConfiguration) => void
 	setCustomInstructions: (value?: string) => void
+	setTelemetrySetting: (value: TelemetrySetting) => void
 	setShowAnnouncement: (value: boolean) => void
 }
 
@@ -39,6 +41,8 @@ export const ExtensionStateContextProvider: React.FC<{
 		chatSettings: DEFAULT_CHAT_SETTINGS,
 		isLoggedIn: false,
 		platform: DEFAULT_PLATFORM,
+		telemetrySetting: "unset",
+		vscMachineId: "",
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
@@ -75,6 +79,7 @@ export const ExtensionStateContextProvider: React.FC<{
 							config.qwenApiKey,
 							config.mistralApiKey,
 							config.vsCodeLmModelSelector,
+							config.xaiApiKey,
 						].some((key) => key !== undefined)
 					: false
 				setShowWelcome(!hasKey)
@@ -157,6 +162,11 @@ export const ExtensionStateContextProvider: React.FC<{
 				...prevState,
 				customInstructions: value,
 			})),
+		setTelemetrySetting: (value) =>
+			setState((prevState) => ({
+				...prevState,
+				telemetrySetting: value,
+			})),
 		setShowAnnouncement: (value) =>
 			setState((prevState) => ({
 				...prevState,

webview-ui/src/index.tsx

@@ -1,18 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import "./index.css"
-import App from "./App"
-import reportWebVitals from "./reportWebVitals"
-import "../../node_modules/@vscode/codicons/dist/codicon.css"
-
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
-root.render(
-	<React.StrictMode>
-		<App />
-	</React.StrictMode>,
-)
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()

webview-ui/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { PostHogProvider } from "posthog-js/react"
+import "./index.css"
+import App from "./App.tsx"
+import "../../node_modules/@vscode/codicons/dist/codicon.css"
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+)

webview-ui/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

webview-ui/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from "web-vitals"
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-	if (onPerfEntry && onPerfEntry instanceof Function) {
-		import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-			getCLS(onPerfEntry)
-			getFID(onPerfEntry)
-			getFCP(onPerfEntry)
-			getLCP(onPerfEntry)
-			getTTFB(onPerfEntry)
-		})
-	}
-}
-
-export default reportWebVitals

webview-ui/src/setupTests.ts

@@ -1,5 +1,19 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom"
+import { vi } from "vitest"
+
+// "Official" jest workaround for mocking window.matchMedia()
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+
+Object.defineProperty(window, "matchMedia", {
+	writable: true,
+	value: vi.fn().mockImplementation((query) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: vi.fn(), // Deprecated
+		removeListener: vi.fn(), // Deprecated
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+		dispatchEvent: vi.fn(),
+	})),
+})

webview-ui/src/utils/validate.ts

@@ -38,6 +38,11 @@ export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): s
 					return "You must provide a valid API key or choose a different provider."
 				}
 				break
+			case "xai":
+				if (!apiConfiguration.xaiApiKey) {
+					return "You must provide a valid API key or choose a different provider."
+				}
+				break
 			case "qwen":
 				if (!apiConfiguration.qwenApiKey) {
 					return "You must provide a valid API key or choose a different provider."

webview-ui/src/utils/vscStyles.ts

@@ -1,4 +1,5 @@
 export const VSC_INPUT_BACKGROUND = "--vscode-input-background"
+export const VSC_INPUT_FOREGROUND = "--vscode-input-foreground"
 export const VSC_SIDEBAR_BACKGROUND = "--vscode-sideBar-background"
 export const VSC_FOREGROUND = "--vscode-foreground"
 export const VSC_EDITOR_FOREGROUND = "--vscode-editor-foreground"

webview-ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

webview-ui/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["src"],
+	"exclude": ["src/**/__tests__/**"]
+}