Merge pull request #2019 from cline/dev

Merge dev into main

.changeset/bright-horses-double.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Add correct cost and tokens info to Native OpenAI and DeepSeek providers

.changeset/calm-laws-camp.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Update Claude Sonnet 35. -> 3.7 in README(s)

.changeset/clean-crabs-do.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Added X AI as a new provider with support for all current models including Grok-2 and Grok Vision. This integration enables users to connect to X AI's API using their API key and access models with context windows up to 131K tokens. The implementation includes proper handling for vision models and accurate pricing information.

.changeset/eighty-bugs-sin.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Make tags section in marketplace scrollable

.changeset/forty-timers-kick.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+opt: Enhance OpenAiHandler to diagnose request issues and handle empty streams

.changeset/hot-boxes-applaud.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+.clineignore should be included in .gitignore

.changeset/lazy-insects-report.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Migrate webview from CRA to Vite

.changeset/mighty-hounds-watch.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Change how Cline finds the path to the user's Documents folder by querying xdg-user-dir on Linux systems.

.changeset/old-dancers-smell.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Add rich MCP responses with images and link previews

.changeset/proud-camels-brake.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Add preferred language option to settings

.changeset/rare-cougars-look.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+GPT 4.5 Preview added

.changeset/red-cars-cry.md

@@ -0,0 +1,11 @@
+---
+"claude-dev": patch
+---
+
+Add dynamic model fetching for the Requesty provider.
+
+Instead of manually typing the model name, the extension dynamically fetches
+all the supported model names from Requesty's /v1/models API.
+
+This allows users to use a fuzzy search logic when choosing the models and
+also guarantees the information for each model is up to date.

.changeset/silly-coats-switch.md

@@ -0,0 +1,11 @@
+---
+"claude-dev": minor
+---
+
+-   **Branch-Per-Task:** Each repo now has a single Shadow Git repo, with separate branches per task (instead of one Shadow Git repo per task).
+-   **Legacy Support:** Existing Checkpoints remain functional, while all new Checkpoints use branch-per-task.
+
+-   **Commits:** Legacy tasks commit to legacy Checkpoints; new tasks commit using branch-per-task.
+-   **Diffing & Deletions:** Both legacy and branch-per-task Checkpoints support diffing and deletion.
+
+No migration needed—existing tasks stay as-is, and new tasks adopt **branch-per-task** automatically.

.changeset/silver-hotels-reflect.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Update anthropic SDK to the latest version

.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

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

@@ -1,116 +1,3 @@
-# Cline Privacy Policy
+View our Privacy Policy on our website.
 
-Cline Bot Inc. ("Cline," "we," "our," and/or "us") values the privacy of individuals who use our VS Code extension and related services (collectively, our "Services"). This privacy policy explains how we collect, use, and disclose information from users of our Services.
-
-## Key Points
-
--   Cline operates entirely client-side as a VS Code extension
--   No code or data is collected, stored, or transmitted to Cline's servers
--   Your data is only sent to your chosen AI provider (e.g., Anthropic, OpenAI) when you explicitly request assistance
--   All processing happens locally on your machine
--   API keys are stored securely in VS Code's built-in settings storage
-
-## Information We Process
-
-### A. Information You Provide
-
--   **API Keys**: When you choose to use certain AI model providers (OpenRouter, Anthropic, OpenAI, etc.), you provide API keys. These are stored securely and locally in your VS Code settings.
--   **Communications**: If you contact us directly (e.g., via Discord or email), we may receive information like your name, email address, and message contents.
-
-### B. Information Processing
-
-Cline functions solely as a client-side VS Code extension that facilitates communication between your editor and your chosen AI model provider:
-
-1. **File Contents**:
-
-    - Only sent to your chosen AI provider when you explicitly request assistance
-    - Never stored or transmitted to Cline's servers
-    - Only the specific files/content you select are included
-
-2. **Terminal Commands**:
-
-    - Processed entirely locally on your machine
-    - Require explicit user confirmation before execution
-    - No command history is transmitted to Cline
-
-3. **Browser Integration**:
-    - Screenshots and console logs are processed locally
-    - Temporary data is cleared after task completion
-
-## Data Security
-
-1. **Local-Only Processing**:
-
-    - All operations happen on your local machine
-    - 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**:
-
-    - Stored using VS Code's secure settings storage system
-    - Never transmitted to Cline's servers
-    - You can remove/modify keys at any time
-
-3. **User Control**:
-    - Explicit approval required for file changes
-    - Terminal commands require confirmation
-    - Browser actions need explicit permission
-    - You control which AI provider to use
-
-## Communication with AI Providers
-
-When you request assistance:
-
-1. Selected content is sent directly to your chosen AI provider
-2. No data passes through Cline's servers
-3. Provider's own privacy policy applies to this communication:
-    - [Anthropic Privacy Policy](https://www.anthropic.com/privacy)
-    - [OpenAI Privacy Policy](https://openai.com/privacy)
-    - [OpenRouter Privacy Policy](https://openrouter.ai/privacy)
-
-## Error Handling & Debugging
-
--   Error logs are processed locally
--   No automatic error reporting to Cline
-    - 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
-
-We do not knowingly collect, maintain, or use personal information from children under 18 years of age, and no part of our Service(s) is directed to children. If you learn that a child has provided us with personal information in violation of this Privacy Policy, then you may alert us at support@cline.bot.
-
-## Changes to Privacy Policy
-
-We will post any changes to this policy on our GitHub repository. Significant changes will be announced in our Discord community.
-
-## Security Concerns & Auditing
-
--   Cline is open source and available for security audit
--   Our client-side architecture ensures no central point of data collection
--   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:
-
--   Open an issue on our [GitHub repository](https://github.com/cline/cline)
--   Join our [Discord community](https://discord.gg/cline)
--   Email: support@cline.bot
+[Privacy Policy](https://cline.bot/privacy)

docs/TERMS_OF_SERVICE.md

@@ -0,0 +1,3 @@
+View our Terms of Service on our website.
+
+[Terms of Service](https://cline.bot/tos)

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,16 +1,16 @@
 {
 	"name": "claude-dev",
-	"version": "3.4.9",
+	"version": "3.4.10",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "claude-dev",
-			"version": "3.4.9",
+			"version": "3.4.10",
 			"license": "Apache-2.0",
 			"dependencies": {
-				"@anthropic-ai/bedrock-sdk": "^0.10.2",
-				"@anthropic-ai/sdk": "^0.26.0",
+				"@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",
@@ -36,11 +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.7.0",
+				"posthog-node": "^4.8.1",
 				"puppeteer-chromium-resolver": "^23.0.0",
 				"puppeteer-core": "^23.4.0",
 				"serialize-error": "^11.0.3",
@@ -77,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",
@@ -95,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",
@@ -109,9 +112,9 @@
 			}
 		},
 		"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.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"
@@ -3788,7 +3791,6 @@
 			"version": "0.18.0",
 			"resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.18.0.tgz",
 			"integrity": "sha512-AhaIWSpk2tuhYHrBhUqC0xrWWznmYEja1/TRDIb+5kruBU5kUzMlFsXCQNO9PzyTZ4clUJ3CX/Rvy+Xm9x+w3g==",
-			"license": "Apache-2.0",
 			"engines": {
 				"node": ">=18.0.0"
 			}
@@ -11073,6 +11075,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.0.0",
+			"resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz",
+			"integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ==",
+			"license": "MIT"
+		},
 		"node_modules/openai": {
 			"version": "4.83.0",
 			"resolved": "https://registry.npmjs.org/openai/-/openai-4.83.0.tgz",
@@ -11633,9 +11656,9 @@
 			}
 		},
 		"node_modules/posthog-node": {
-			"version": "4.7.0",
-			"resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-4.7.0.tgz",
-			"integrity": "sha512-RgdUKSW8MfMOkjUa8cYVqWndNjPePNuuxlGbrZC6z1WRBsVc6TdGl8caidmC10RW8mu/BOfmrGbP4cRTo2jARg==",
+			"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"

package.json

@@ -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,8 +262,8 @@
 		"typescript": "^5.4.5"
 	},
 	"dependencies": {
-		"@anthropic-ai/bedrock-sdk": "^0.10.2",
-		"@anthropic-ai/sdk": "^0.26.0",
+		"@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",
@@ -264,11 +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.7.0",
+		"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

@@ -20,7 +20,7 @@ export class AnthropicHandler implements ApiHandler {
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		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,7 +38,7 @@ 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,
 						max_tokens: model.info.maxTokens || 8192,

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/openai.ts

@@ -28,6 +28,65 @@ export class OpenAiHandler implements ApiHandler {
 		}
 	}
 
+	private async diagnoseRequestProblem(
+		modelId: string,
+		messages: OpenAI.Chat.ChatCompletionMessageParam[],
+		apiKey: string,
+		baseURL: string,
+	) {
+		const url = `${baseURL}/chat/completions`
+
+		try {
+			const response = await fetch(url, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					Authorization: `Bearer ${apiKey}`,
+				},
+				body: JSON.stringify({
+					model: modelId,
+					messages: messages,
+					temperature: 0,
+					stream: true,
+				}),
+			})
+
+			if (!response.ok) {
+				return `HTTP error! status: ${response.status}, statusText: ${response.statusText}`
+			}
+
+			const responseData = await response.json()
+			return responseData
+		} catch (error) {
+			return error instanceof Error ? error.message : String(error)
+		}
+	}
+
+	private async *handleChunk(chunk: OpenAI.Chat.Completions.ChatCompletionChunk): ApiStream {
+		const delta = chunk.choices[0]?.delta
+		if (delta?.content) {
+			yield {
+				type: "text",
+				text: delta.content,
+			}
+		}
+
+		if (delta && "reasoning_content" in delta && delta.reasoning_content) {
+			yield {
+				type: "reasoning",
+				reasoning: (delta.reasoning_content as string | undefined) || "",
+			}
+		}
+
+		if (chunk.usage) {
+			yield {
+				type: "usage",
+				inputTokens: chunk.usage.prompt_tokens || 0,
+				outputTokens: chunk.usage.completion_tokens || 0,
+			}
+		}
+	}
+
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
 		const modelId = this.options.openAiModelId ?? ""
@@ -49,29 +108,30 @@ export class OpenAiHandler implements ApiHandler {
 			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 (delta && "reasoning_content" in delta && delta.reasoning_content) {
-				yield {
-					type: "reasoning",
-					reasoning: (delta.reasoning_content as string | undefined) || "",
-				}
-			}
+		const [validationStream, contentStream] = stream.tee()
 
-			if (chunk.usage) {
-				yield {
-					type: "usage",
-					inputTokens: chunk.usage.prompt_tokens || 0,
-					outputTokens: chunk.usage.completion_tokens || 0,
-				}
-			}
+		// Check the first chunk to detect potential stream issues early
+		// This helps to provide better error messages for cases like:
+		// https://github.com/cline/cline/issues/1662
+		// where the stream appears valid but contains no actual data
+		const firstChunk = await validationStream[Symbol.asyncIterator]().next()
+		if (firstChunk.done || !firstChunk.value) {
+			// Make an additional request to get detailed error information
+			// This gives us more context about what went wrong with the API call
+			const errorResponse = await this.diagnoseRequestProblem(
+				modelId,
+				openAiMessages,
+				this.client.apiKey,
+				this.client.baseURL,
+			)
+			throw new Error(`Stream empty. Error details: ${JSON.stringify(errorResponse)}`)
+		}
+
+		yield* this.handleChunk(firstChunk.value)
+
+		for await (const chunk of contentStream) {
+			yield* this.handleChunk(chunk)
 		}
 	}
 

src/api/providers/requesty.ts

@@ -1,7 +1,14 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import OpenAI from "openai"
 import { withRetry } from "../retry"
-import { ApiHandlerOptions, ModelInfo, openAiModelInfoSaneDefaults } from "../../shared/api"
+import { calculateApiCostOpenAI } from "../../utils/cost"
+import {
+	ApiHandlerOptions,
+	ModelInfo,
+	openAiModelInfoSaneDefaults,
+	requestyDefaultModelId,
+	requestyDefaultModelInfo,
+} from "../../shared/api"
 import { ApiHandler } from "../index"
 import { convertToOpenAiMessages } from "../transform/openai-format"
 import { ApiStream } from "../transform/stream"
@@ -24,7 +31,7 @@ export class RequestyHandler implements ApiHandler {
 
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
-		const modelId = this.options.requestyModelId ?? ""
+		const model = this.getModel()
 
 		let openAiMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [
 			{ role: "system", content: systemPrompt },
@@ -33,12 +40,13 @@ export class RequestyHandler implements ApiHandler {
 
 		// @ts-ignore-next-line
 		const stream = await this.client.chat.completions.create({
-			model: modelId,
+			model: model.id,
+			max_tokens: model.info.maxTokens || undefined,
 			messages: openAiMessages,
 			temperature: 0,
 			stream: true,
 			stream_options: { include_usage: true },
-			...(modelId === "openai/o3-mini" ? { reasoning_effort: this.options.o3MiniReasoningEffort || "medium" } : {}),
+			...(model.id === "openai/o3-mini" ? { reasoning_effort: this.options.o3MiniReasoningEffort || "medium" } : {}),
 		})
 
 		for await (const chunk of stream) {
@@ -69,22 +77,30 @@ 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,
 				}
 			}
 		}
 	}
 
 	getModel(): { id: string; info: ModelInfo } {
-		return {
-			id: this.options.requestyModelId ?? "",
-			info: openAiModelInfoSaneDefaults,
+		const modelId = this.options.requestyModelId
+		const modelInfo = this.options.requestyModelInfo
+		if (modelId && modelInfo) {
+			return { id: modelId, info: modelInfo }
 		}
+		return { id: requestyDefaultModelId, info: requestyDefaultModelInfo }
 	}
 }

src/api/providers/vertex.ts

@@ -21,113 +21,14 @@ export class VertexHandler implements ApiHandler {
 
 	@withRetry()
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
-		const model = this.getModel()
-		const modelId = model.id
-
-		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,
-						temperature: 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
-			}
-		}
+		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,
+		})
 		for await (const chunk of stream) {
 			switch (chunk.type) {
 				case "message_start":
@@ -136,8 +37,6 @@ 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":
@@ -147,8 +46,7 @@ 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":
@@ -175,8 +73,6 @@ 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
@@ -75,6 +75,7 @@ export class Cline {
 	browserSession: BrowserSession
 	private didEditFile: boolean = false
 	customInstructions?: string
+	preferredLanguage?: LanguageKey
 	autoApprovalSettings: AutoApprovalSettings
 	private browserSettings: BrowserSettings
 	private chatSettings: ChatSettings
@@ -135,6 +136,9 @@ export class Cline {
 		this.browserSession = new BrowserSession(provider.context, browserSettings)
 		this.diffViewProvider = new DiffViewProvider(cwd)
 		this.customInstructions = customInstructions
+		this.preferredLanguage = getLanguageKey(
+			vscode.workspace.getConfiguration("cline").get<LanguageDisplay>("preferredLanguage"),
+		)
 		this.autoApprovalSettings = autoApprovalSettings
 		this.browserSettings = browserSettings
 		this.chatSettings = chatSettings
@@ -148,6 +152,16 @@ export class Cline {
 		} else {
 			throw new Error("Either historyItem or task/images must be provided")
 		}
+		// capture start of thread with the state at the beginning
+		telemetryService.capture({
+			event: "cline created",
+			properties: {
+				taskId: this.taskId,
+				isHistory: !!historyItem,
+				chatMode: this.chatSettings.mode,
+				hasImages: !!images,
+			},
+		})
 	}
 
 	updateBrowserSettings(browserSettings: BrowserSettings) {
@@ -285,7 +299,10 @@ export class Cline {
 			case "workspace":
 				if (!this.checkpointTracker) {
 					try {
-						this.checkpointTracker = await CheckpointTracker.create(this.taskId, this.providerRef.deref())
+						this.checkpointTracker = await CheckpointTracker.create(
+							this.taskId,
+							this.providerRef.deref()?.context.globalStorageUri.fsPath,
+						)
 						this.checkpointTrackerErrorMessage = undefined
 					} catch (error) {
 						const errorMessage = error instanceof Error ? error.message : "Unknown error"
@@ -398,7 +415,10 @@ export class Cline {
 		// TODO: handle if this is called from outside original workspace, in which case we need to show user error message we cant show diff outside of workspace?
 		if (!this.checkpointTracker) {
 			try {
-				this.checkpointTracker = await CheckpointTracker.create(this.taskId, this.providerRef.deref())
+				this.checkpointTracker = await CheckpointTracker.create(
+					this.taskId,
+					this.providerRef.deref()?.context.globalStorageUri.fsPath,
+				)
 				this.checkpointTrackerErrorMessage = undefined
 			} catch (error) {
 				const errorMessage = error instanceof Error ? error.message : "Unknown error"
@@ -502,7 +522,10 @@ export class Cline {
 
 		if (!this.checkpointTracker) {
 			try {
-				this.checkpointTracker = await CheckpointTracker.create(this.taskId, this.providerRef.deref())
+				this.checkpointTracker = await CheckpointTracker.create(
+					this.taskId,
+					this.providerRef.deref()?.context.globalStorageUri.fsPath,
+				)
 				this.checkpointTrackerErrorMessage = undefined
 			} catch (error) {
 				const errorMessage = error instanceof Error ? error.message : "Unknown error"
@@ -1269,6 +1292,10 @@ export class Cline {
 		let systemPrompt = await SYSTEM_PROMPT(cwd, supportsComputerUse, mcpHub, this.browserSettings)
 
 		let settingsCustomInstructions = this.customInstructions?.trim()
+		const preferredLanguageInstructions =
+			this.preferredLanguage && this.preferredLanguage !== DEFAULT_LANGUAGE_SETTINGS
+				? `# Preferred Language\n\nSpeak in ${this.preferredLanguage}.`
+				: ""
 		const clineRulesFilePath = path.resolve(cwd, GlobalFileNames.clineRules)
 		let clineRulesFileInstructions: string | undefined
 		if (await fileExistsAtPath(clineRulesFilePath)) {
@@ -1288,9 +1315,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 ||
+			preferredLanguageInstructions ||
+			clineIgnoreInstructions
+		) {
 			// 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
@@ -2910,7 +2947,7 @@ export class Cline {
 		}
 
 		/*
-		Seeing out of bounds is fine, it means that the next too call is being built up and ready to add to assistantMessageContent to present. 
+		Seeing out of bounds is fine, it means that the next too call is being built up and ready to add to assistantMessageContent to present.
 		When you see the UI inactive during this, it means that a tool is breaking without presenting any UI. For example the write_to_file tool was breaking when relpath was undefined, and for invalid relpath it never presented UI.
 		*/
 		this.presentAssistantMessageLocked = false // this needs to be placed here, if not then calling this.presentAssistantMessage below would fail (sometimes) since it's locked
@@ -3017,7 +3054,10 @@ export class Cline {
 		// isNewTask &&
 		if (!this.checkpointTracker) {
 			try {
-				this.checkpointTracker = await CheckpointTracker.create(this.taskId, this.providerRef.deref())
+				this.checkpointTracker = await CheckpointTracker.create(
+					this.taskId,
+					this.providerRef.deref()?.context.globalStorageUri.fsPath,
+				)
 				this.checkpointTrackerErrorMessage = undefined
 			} catch (error) {
 				const errorMessage = error instanceof Error ? error.message : "Unknown error"
@@ -3073,7 +3113,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)
@@ -3265,6 +3311,14 @@ export class Cline {
 					this.consecutiveMistakeCount++
 				}
 
+				telemetryService.capture({
+					event: "message sent",
+					properties: {
+						taskId: this.taskId,
+						chatMode: this.chatSettings.mode,
+					},
+				})
+
 				const recDidEndLoop = await this.recursivelyMakeClineRequests(this.userMessageContent)
 				didEndLoop = recDidEndLoop
 			} else {

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

@@ -8,8 +8,10 @@ import pWaitFor from "p-wait-for"
 import * as path from "path"
 import * as vscode from "vscode"
 import { buildApiHandler } from "../../api"
+import CheckpointTracker from "../../integrations/checkpoints/CheckpointTracker"
 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"
@@ -57,6 +59,7 @@ type SecretKey =
 	| "liteLlmApiKey"
 	| "authToken"
 	| "authNonce"
+	| "xaiApiKey"
 type GlobalStateKey =
 	| "apiProvider"
 	| "apiModelId"
@@ -92,6 +95,7 @@ type GlobalStateKey =
 	| "liteLlmModelId"
 	| "qwenApiLine"
 	| "requestyModelId"
+	| "requestyModelInfo"
 	| "togetherModelId"
 	| "mcpMarketplaceCatalog"
 	| "telemetrySetting"
@@ -100,6 +104,7 @@ export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
 	uiMessages: "ui_messages.json",
 	openRouterModels: "openrouter_models.json",
+	requestyModels: "requesty_models.json",
 	mcpSettings: "cline_mcp_settings.json",
 	clineRules: ".clinerules",
 }
@@ -177,11 +182,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
 
@@ -190,7 +191,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
@@ -341,9 +346,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
@@ -386,20 +391,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.
@@ -420,7 +499,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							}),
 						)
 						// post last cached models in case the call to endpoint fails
-						this.readOpenRouterModels().then((openRouterModels) => {
+						this.readDynamicProviderModels(GlobalFileNames.openRouterModels).then((openRouterModels) => {
 							if (openRouterModels) {
 								this.postMessageToWebview({
 									type: "openRouterModels",
@@ -463,6 +542,33 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							telemetryService.updateTelemetryState(isOptedIn)
 						})
 
+						// post last cached models in case the call to endpoint fails
+						this.readDynamicProviderModels(GlobalFileNames.requestyModels).then((requestyModels) => {
+							if (requestyModels) {
+								this.postMessageToWebview({
+									type: "requestyModels",
+									requestyModels,
+								})
+							}
+						})
+
+						// gui relies on model info to be up-to-date to provide the most accurate pricing, so we need to fetch the latest details on launch.
+						// we do this for all users since many users switch between api providers and if they were to switch back to openrouter it would be showing outdated model info if we hadn't retrieved the latest at this point
+						// (see normalizeApiConfiguration > openrouter)
+						this.refreshRequestyModels().then(async (requestyModels) => {
+							if (requestyModels) {
+								// update model info in state (this needs to be done here since we don't want to update state while settings is open, and we may refresh models there)
+								const { apiConfiguration } = await this.getState()
+								if (apiConfiguration.requestyModelId) {
+									await this.updateGlobalState(
+										"requestyModelInfo",
+										requestyModels[apiConfiguration.requestyModelId],
+									)
+									await this.postStateToWebview()
+								}
+							}
+						})
+
 						break
 					case "newTask":
 						// Code that should run in response to the hello message command
@@ -505,6 +611,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 								deepSeekApiKey,
 								requestyApiKey,
 								requestyModelId,
+								requestyModelInfo,
 								togetherApiKey,
 								togetherModelId,
 								qwenApiKey,
@@ -517,6 +624,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 								liteLlmModelId,
 								liteLlmApiKey,
 								qwenApiLine,
+								xaiApiKey,
 							} = message.apiConfiguration
 							await this.updateGlobalState("apiProvider", apiProvider)
 							await this.updateGlobalState("apiModelId", apiModelId)
@@ -548,6 +656,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)
@@ -556,6 +665,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							await this.updateGlobalState("liteLlmModelId", liteLlmModelId)
 							await this.updateGlobalState("qwenApiLine", qwenApiLine)
 							await this.updateGlobalState("requestyModelId", requestyModelId)
+							await this.updateGlobalState("requestyModelInfo", requestyModelInfo)
 							await this.updateGlobalState("togetherModelId", togetherModelId)
 							if (this.cline) {
 								this.cline.api = buildApiHandler(message.apiConfiguration)
@@ -652,6 +762,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					case "refreshOpenRouterModels":
 						await this.refreshOpenRouterModels()
 						break
+					case "refreshRequestyModels":
+						await this.refreshRequestyModels()
+						break
 					case "refreshOpenAiModels":
 						const { apiConfiguration } = await this.getState()
 						const openAiModels = await this.getOpenAiModels(
@@ -663,6 +776,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
@@ -906,6 +1030,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				await this.updateGlobalState("previousModeModelId", apiConfiguration.openRouterModelId)
 				await this.updateGlobalState("previousModeModelInfo", apiConfiguration.openRouterModelInfo)
 				break
+			case "requesty":
+				await this.updateGlobalState("previousModeModelId", apiConfiguration.requestyModelId)
+				await this.updateGlobalState("previousModeModelInfo", apiConfiguration.requestyModelInfo)
+				break
 			case "vscode-lm":
 				await this.updateGlobalState("previousModeModelId", apiConfiguration.vsCodeLmModelSelector)
 				break
@@ -938,6 +1066,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					await this.updateGlobalState("openRouterModelId", newModelId)
 					await this.updateGlobalState("openRouterModelInfo", newModelInfo)
 					break
+				case "requesty":
+					await this.updateGlobalState("requestyModelId", newModelId)
+					await this.updateGlobalState("requestyModelInfo", newModelInfo)
+					break
 				case "vscode-lm":
 					await this.updateGlobalState("vsCodeLmModelSelector", newModelId)
 					break
@@ -1054,21 +1186,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> {
@@ -1393,16 +1542,61 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 		return cacheDir
 	}
 
-	async readOpenRouterModels(): Promise<Record<string, ModelInfo> | undefined> {
-		const openRouterModelsFilePath = path.join(await this.ensureCacheDirectoryExists(), GlobalFileNames.openRouterModels)
-		const fileExists = await fileExistsAtPath(openRouterModelsFilePath)
+	async readDynamicProviderModels(filename: string): Promise<Record<string, ModelInfo> | undefined> {
+		const filePath = path.join(await this.ensureCacheDirectoryExists(), filename)
+		const fileExists = await fileExistsAtPath(filePath)
 		if (fileExists) {
-			const fileContents = await fs.readFile(openRouterModelsFilePath, "utf8")
+			const fileContents = await fs.readFile(filePath, "utf8")
 			return JSON.parse(fileContents)
 		}
 		return undefined
 	}
 
+	adjustPriceToMillionTokens(price: any) {
+		if (price) {
+			return parseFloat(price) * 1_000_000
+		}
+		return undefined
+	}
+
+	async refreshRequestyModels() {
+		const requestyModelsFilePath = path.join(await this.ensureCacheDirectoryExists(), GlobalFileNames.requestyModels)
+
+		let models: Record<string, ModelInfo> = {}
+		try {
+			const response = await axios.get("https://router.requesty.ai/v1/models")
+			if (response.data?.data) {
+				for (const model of response.data.data) {
+					const modelInfo: ModelInfo = {
+						maxTokens: model.max_output_tokens,
+						contextWindow: model.context_window,
+						supportsImages: model.supports_images || undefined,
+						supportsComputerUse: model.supports_computer_use || undefined,
+						supportsPromptCache: model.supports_caching || undefined,
+						inputPrice: this.adjustPriceToMillionTokens(model.input_price),
+						outputPrice: this.adjustPriceToMillionTokens(model.output_price),
+						cacheWritesPrice: this.adjustPriceToMillionTokens(model.caching_price),
+						cacheReadsPrice: this.adjustPriceToMillionTokens(model.cached_price),
+						description: model.description,
+					}
+					models[model.id] = modelInfo
+				}
+				await fs.writeFile(requestyModelsFilePath, JSON.stringify(models))
+				console.log("Requesty models fetched and saved", models)
+			} else {
+				console.error("Invalid response from Requesty API")
+			}
+		} catch (error) {
+			console.error("Error fetching Requesty models:", error)
+		}
+
+		await this.postMessageToWebview({
+			type: "requestyModels",
+			requestyModels: models,
+		})
+		return models
+	}
+
 	async refreshOpenRouterModels() {
 		const openRouterModelsFilePath = path.join(await this.ensureCacheDirectoryExists(), GlobalFileNames.openRouterModels)
 
@@ -1437,20 +1631,14 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			*/
 			if (response.data?.data) {
 				const rawModels = response.data.data
-				const parsePrice = (price: any) => {
-					if (price) {
-						return parseFloat(price) * 1_000_000
-					}
-					return undefined
-				}
 				for (const rawModel of rawModels) {
 					const modelInfo: ModelInfo = {
 						maxTokens: rawModel.top_provider?.max_completion_tokens,
 						contextWindow: rawModel.context_length,
 						supportsImages: rawModel.architecture?.modality?.includes("image"),
 						supportsPromptCache: false,
-						inputPrice: parsePrice(rawModel.pricing?.prompt),
-						outputPrice: parsePrice(rawModel.pricing?.completion),
+						inputPrice: this.adjustPriceToMillionTokens(rawModel.pricing?.prompt),
+						outputPrice: this.adjustPriceToMillionTokens(rawModel.pricing?.completion),
 						description: rawModel.description,
 					}
 
@@ -1575,12 +1763,29 @@ 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)
 
+		// Delete checkpoints
+		// deleteCheckpoints will determine if the task has legacy checkpoints or not and handle it accordingly
+		console.info("deleting checkpoints")
+		const taskHistory = ((await this.getGlobalState("taskHistory")) as HistoryItem[] | undefined) || []
+		const historyItem = taskHistory.find((item) => item.id === id)
+		//console.log("historyItem: ", historyItem)
+		if (historyItem) {
+			try {
+				await CheckpointTracker.deleteCheckpoints(id, historyItem, this.context.globalStorageUri.fsPath)
+			} catch (error) {
+				console.error(`Failed to delete checkpoints for task ${id}:`, error)
+			}
+		}
+
 		await this.deleteTaskFromState(id)
 
 		// Delete the task files
@@ -1597,21 +1802,12 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			await fs.unlink(legacyMessagesFilePath)
 		}
 
-		// Delete the checkpoints directory if it exists
-		const checkpointsDir = path.join(taskDirPath, "checkpoints")
-		if (await fileExistsAtPath(checkpointsDir)) {
-			try {
-				await fs.rm(checkpointsDir, { recursive: true, force: true })
-			} catch (error) {
-				console.error(`Failed to delete checkpoints directory for task ${id}:`, error)
-				// Continue with deletion of task directory - don't throw since this is a cleanup operation
-			}
-		}
-
 		await fs.rmdir(taskDirPath) // succeeds if the dir is empty
 	}
 
 	async deleteTaskFromState(id: string) {
+		console.log("deleteTaskFromState: ", id)
+
 		// Remove the task from history
 		const taskHistory = ((await this.getGlobalState("taskHistory")) as HistoryItem[] | undefined) || []
 		const updatedTaskHistory = taskHistory.filter((task) => task.id !== id)
@@ -1659,6 +1855,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			userInfo,
 			mcpMarketplaceEnabled,
 			telemetrySetting,
+			vscMachineId: vscode.env.machineId,
 		}
 	}
 
@@ -1681,7 +1878,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 
 	/*
 	It seems that some API messages do not comply with vscode state requirements. Either the Anthropic library is manipulating these values somehow in the backend in a way thats creating cyclic references, or the API returns a function or a Symbol as part of the message content.
-	VSCode docs about state: "The value must be JSON-stringifyable ... value — A value. MUST not contain cyclic references."
+	VSCode docs about state: "The value must be JSON-stringifyable ... value  A value. MUST not contain cyclic references."
 	For now we'll store the conversation history in memory, and if we need to store in state directly we'd need to do a manual conversion to ensure proper json stringification.
 	*/
 
@@ -1742,6 +1939,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			deepSeekApiKey,
 			requestyApiKey,
 			requestyModelId,
+			requestyModelInfo,
 			togetherApiKey,
 			togetherModelId,
 			qwenApiKey,
@@ -1766,6 +1964,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			qwenApiLine,
 			liteLlmApiKey,
 			telemetrySetting,
+			xaiApiKey,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1794,6 +1993,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			this.getSecret("deepSeekApiKey") as Promise<string | undefined>,
 			this.getSecret("requestyApiKey") as Promise<string | undefined>,
 			this.getGlobalState("requestyModelId") as Promise<string | undefined>,
+			this.getGlobalState("requestyModelInfo") as Promise<ModelInfo | undefined>,
 			this.getSecret("togetherApiKey") as Promise<string | undefined>,
 			this.getGlobalState("togetherModelId") as Promise<string | undefined>,
 			this.getSecret("qwenApiKey") as Promise<string | undefined>,
@@ -1818,6 +2018,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 			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>,
 		])
 
 		let apiProvider: ApiProvider
@@ -1869,6 +2070,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 				deepSeekApiKey,
 				requestyApiKey,
 				requestyModelId,
+				requestyModelInfo,
 				togetherApiKey,
 				togetherModelId,
 				qwenApiKey,
@@ -1882,6 +2084,7 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 				liteLlmBaseUrl,
 				liteLlmModelId,
 				liteLlmApiKey,
+				xaiApiKey,
 			},
 			lastShownAnnouncementId,
 			customInstructions,
@@ -1955,6 +2158,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() {
@@ -1978,6 +2228,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/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.ts

@@ -1,31 +1,100 @@
 import fs from "fs/promises"
-import os from "os"
 import * as path from "path"
 import simpleGit, { SimpleGit } from "simple-git"
 import * as vscode from "vscode"
-import { ClineProvider } from "../../core/webview/ClineProvider"
-import { fileExistsAtPath } from "../../utils/fs"
-import { globby } from "globby"
+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 providerRef: WeakRef<ClineProvider>
+	private globalStoragePath: string
 	private taskId: string
-	private disposables: vscode.Disposable[] = []
 	private cwd: string
+	private cwdHash: string
 	private lastRetrievedShadowGitConfigWorkTree?: string
-	lastCheckpointHash?: string
+	private lastCheckpointHash?: string
+	private isLegacyCheckpoint: boolean = false
+	private gitOperations: GitOperations
 
-	private constructor(provider: ClineProvider, taskId: string, cwd: string) {
-		this.providerRef = new WeakRef(provider)
+	/**
+	 * 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
 	}
 
-	public static async create(taskId: string, provider?: ClineProvider): Promise<CheckpointTracker | undefined> {
+	/**
+	 * 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 {
-			if (!provider) {
-				throw new Error("Provider is required to create a checkpoint tracker")
-			}
+			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
@@ -40,9 +109,36 @@ class CheckpointTracker {
 				throw new Error("Git must be installed to use checkpoints.") // FIXME: must match what we check for in TaskHeader to show link
 			}
 
-			const cwd = await CheckpointTracker.getWorkingDirectory()
-			const newTracker = new CheckpointTracker(provider, taskId, cwd)
-			await newTracker.initShadowGit()
+			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)
@@ -50,203 +146,110 @@ class CheckpointTracker {
 		}
 	}
 
-	private static async 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")
+	/**
+	 * 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))
 
-		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
-		}
-	}
+			console.info(`Using shadow git at: ${gitPath}`)
 
-	private async getShadowGitPath(): Promise<string> {
-		const globalStoragePath = this.providerRef.deref()?.context.globalStorageUri.fsPath
-		if (!globalStoragePath) {
-			throw new Error("Global storage uri is invalid")
-		}
-		const checkpointsDir = path.join(globalStoragePath, "tasks", this.taskId, "checkpoints")
-		await fs.mkdir(checkpointsDir, { recursive: true })
-		const gitPath = path.join(checkpointsDir, ".git")
-		return gitPath
-	}
+			// Disable nested git repos before any operations
+			await this.gitOperations.renameNestedGitRepos(true)
 
-	public static async doesShadowGitExist(taskId: string, provider?: ClineProvider): Promise<boolean> {
-		const globalStoragePath = provider?.context.globalStorageUri.fsPath
-		if (!globalStoragePath) {
-			return false
-		}
-		const gitPath = path.join(globalStoragePath, "tasks", taskId, "checkpoints", ".git")
-		return await fileExistsAtPath(gitPath)
-	}
-
-	public async initShadowGit(): Promise<string> {
-		const gitPath = await this.getShadowGitPath()
-		if (await fileExistsAtPath(gitPath)) {
-			// Make sure it's the same cwd as the configured worktree
-			const worktree = await this.getShadowGitConfigWorkTree()
-			if (worktree !== this.cwd) {
-				throw new Error("Checkpoints can only be used in the original workspace: " + worktree)
-			}
-
-			return gitPath
-		} else {
-			const checkpointsDir = path.dirname(gitPath)
-			const git = simpleGit(checkpointsDir)
-			await git.init()
-
-			await git.addConfig("core.worktree", this.cwd) // sets the working tree to the current workspace
-
-			// Disable commit signing for shadow repo
-			await git.addConfig("commit.gpgSign", "false")
-
-			// Get LFS patterns from workspace if they exist
-			let lfsPatterns: string[] = []
 			try {
-				const attributesPath = path.join(this.cwd, ".gitattributes")
-				if (await fileExistsAtPath(attributesPath)) {
-					const attributesContent = await fs.readFile(attributesPath, "utf8")
-					lfsPatterns = attributesContent
-						.split("\n")
-						.filter((line) => line.includes("filter=lfs"))
-						.map((line) => line.split(" ")[0].trim())
+				if (!this.isLegacyCheckpoint) {
+					await this.gitOperations.switchToTaskBranch(this.taskId, gitPath)
 				}
-			} catch (error) {
-				console.warn("Failed to read .gitattributes:", error)
+				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)
 			}
-
-			// Add basic excludes directly in git config, while respecting any .gitignore in the workspace
-			// .git/info/exclude is local to the shadow git repo, so it's not shared with the main repo - and won't conflict with user's .gitignore
-			// TODO: let user customize these
-			const excludesPath = path.join(gitPath, "info", "exclude")
-			await fs.mkdir(path.join(gitPath, "info"), { recursive: true })
-			await fs.writeFile(
-				excludesPath,
-				[
-					".git/", // ignore the user's .git
-					`.git${GIT_DISABLED_SUFFIX}/`, // ignore the disabled nested git repos
-					".DS_Store",
-					"*.log",
-					"node_modules/",
-					"__pycache__/",
-					"env/",
-					"venv/",
-					"target/dependency/",
-					"build/dependencies/",
-					"dist/",
-					"out/",
-					"bundle/",
-					"vendor/",
-					"tmp/",
-					"temp/",
-					"deps/",
-					"pkg/",
-					"Pods/",
-					// Media files
-					"*.jpg",
-					"*.jpeg",
-					"*.png",
-					"*.gif",
-					"*.bmp",
-					"*.ico",
-					// "*.svg",
-					"*.mp3",
-					"*.mp4",
-					"*.wav",
-					"*.avi",
-					"*.mov",
-					"*.wmv",
-					"*.webm",
-					"*.webp",
-					"*.m4a",
-					"*.flac",
-					// Build and dependency directories
-					"build/",
-					"bin/",
-					"obj/",
-					".gradle/",
-					".idea/",
-					".vscode/",
-					".vs/",
-					"coverage/",
-					".next/",
-					".nuxt/",
-					// Cache and temporary files
-					"*.cache",
-					"*.tmp",
-					"*.temp",
-					"*.swp",
-					"*.swo",
-					"*.pyc",
-					"*.pyo",
-					".pytest_cache/",
-					".eslintcache",
-					// Environment and config files
-					".env*",
-					"*.local",
-					"*.development",
-					"*.production",
-					// Large data files
-					"*.zip",
-					"*.tar",
-					"*.gz",
-					"*.rar",
-					"*.7z",
-					"*.iso",
-					"*.bin",
-					"*.exe",
-					"*.dll",
-					"*.so",
-					"*.dylib",
-					// Database files
-					"*.sqlite",
-					"*.db",
-					"*.sql",
-					// Log files
-					"*.logs",
-					"*.error",
-					"npm-debug.log*",
-					"yarn-debug.log*",
-					"yarn-error.log*",
-					...lfsPatterns,
-				].join("\n"),
-			)
-
-			// Set up git identity (git throws an error if user.name or user.email is not set)
-			await git.addConfig("user.name", "Cline Checkpoint")
-			await git.addConfig("user.email", "noreply@example.com")
-
-			await this.addAllFiles(git)
-			// Initial commit (--allow-empty ensures it works even with no files)
-			await git.commit("initial commit", { "--allow-empty": null })
-
-			return gitPath
+		} 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 this.getShadowGitPath()
-			const git = simpleGit(path.dirname(gitPath))
-			const worktree = await git.getConfig("core.worktree")
-			this.lastRetrievedShadowGitConfigWorkTree = worktree.value || undefined
+			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)
@@ -254,36 +257,32 @@ class CheckpointTracker {
 		}
 	}
 
-	public async commit(): Promise<string | undefined> {
-		try {
-			const gitPath = await this.getShadowGitPath()
-			const git = simpleGit(path.dirname(gitPath))
-			await this.addAllFiles(git)
-			const result = await git.commit("checkpoint", {
-				"--allow-empty": null,
-			})
-			const commitHash = result.commit || ""
-			this.lastCheckpointHash = commitHash
-			return commitHash
-		} catch (error) {
-			console.error("Failed to create checkpoint:", 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> {
-		const gitPath = await this.getShadowGitPath()
+		console.info(`Resetting to checkpoint: ${commitHash}`)
+		const gitPath = await getShadowGitPath(this.globalStoragePath, this.taskId, this.cwdHash, this.isLegacyCheckpoint)
 		const git = simpleGit(path.dirname(gitPath))
-
-		// Clean working directory and force reset
-		// This ensures that the operation will succeed regardless of:
-		// - Untracked files in the workspace
-		// - Staged changes
-		// - Unstaged changes
-		// - Partial commits
-		// - Merge conflicts
-		await git.clean("f", ["-d", "-f"]) // Remove untracked files and directories
+		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}`)
 	}
 
 	/**
@@ -310,111 +309,145 @@ class CheckpointTracker {
 			after: string
 		}>
 	> {
-		const gitPath = await this.getShadowGitPath()
+		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.addAllFiles(git)
+		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
 
-		for (const file of diffSummary.files) {
-			const filePath = file.file
-			const absolutePath = path.join(cwdPath, filePath)
+		// Get list of files that exist in base commit
+		const existingFiles = await this.getExistingFiles(git, baseHash, files)
 
-			let beforeContent = ""
-			try {
-				beforeContent = await git.show([`${baseHash}:${filePath}`])
-			} catch (_) {
-				// file didn't exist in older commit => remains empty
+		// 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] || ""
+					}
+				})
 			}
 
-			let afterContent = ""
+			// Get after contents
+			let afterContents: string[] = []
 			if (rhsHash) {
-				// if user provided a newer commit, use git.show at that commit
-				try {
-					afterContent = await git.show([`${rhsHash}:${filePath}`])
-				} catch (_) {
-					// file didn't exist in newer commit => remains empty
+				// 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 {
-				// otherwise, read from disk (includes uncommitted changes)
-				try {
-					afterContent = await fs.readFile(absolutePath, "utf8")
-				} catch (_) {
-					// file might be deleted => remains empty
-				}
+				// 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 ""
+						}
+					}),
+				)
 			}
 
-			result.push({
-				relativePath: filePath,
-				absolutePath,
-				before: beforeContent,
-				after: afterContent,
-			})
+			// 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
 	}
 
-	private async addAllFiles(git: SimpleGit) {
-		await this.renameNestedGitRepos(true)
+	/**
+	 * 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 {
-			await git.add(".")
+			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("Failed to add files to git:", error)
-		} finally {
-			await this.renameNestedGitRepos(false)
+			console.error("Error getting existing files:", error)
+			return new Set()
 		}
 	}
-
-	// 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.
-	private async renameNestedGitRepos(disable: boolean) {
-		// Find all .git directories that are not at the root level
-		const gitPaths = await globby("**/.git" + (disable ? "" : GIT_DISABLED_SUFFIX), {
-			cwd: this.cwd,
-			onlyDirectories: true,
-			ignore: [".git"], // Ignore root level .git
-			dot: true,
-			markDirectories: false,
-		})
-
-		// For each nested .git directory, rename it based on operation
-		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.log(`CheckpointTracker ${disable ? "disabled" : "enabled"} nested git repo ${gitPath}`)
-			} catch (error) {
-				console.error(`CheckpointTracker failed to ${disable ? "disable" : "enable"} nested git repo ${gitPath}:`, error)
-			}
-		}
-	}
-
-	public dispose() {
-		this.disposables.forEach((d) => d.dispose())
-		this.disposables = []
-	}
 }
 
-const GIT_DISABLED_SUFFIX = "_disabled"
-
 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

@@ -26,9 +26,10 @@ class PostHogClient {
 			this.telemetryEnabled = didUserOptIn
 		}
 
-		// Update PostHog client state based on telemetry preference
+		// 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()

src/shared/ExtensionMessage.ts

@@ -22,6 +22,7 @@ export interface ExtensionMessage {
 		| "invoke"
 		| "partialMessage"
 		| "openRouterModels"
+		| "requestyModels"
 		| "openAiModels"
 		| "mcpServers"
 		| "relinquishControl"
@@ -31,6 +32,8 @@ export interface ExtensionMessage {
 		| "mcpMarketplaceCatalog"
 		| "mcpDownloadDetails"
 		| "commitSearchResults"
+		| "openGraphData"
+		| "isImageUrlResult"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -49,12 +52,23 @@ export interface ExtensionMessage {
 	filePaths?: string[]
 	partialMessage?: ClineMessage
 	openRouterModels?: Record<string, ModelInfo>
+	requestyModels?: Record<string, ModelInfo>
 	openAiModels?: string[]
 	mcpServers?: McpServer[]
 	mcpMarketplaceCatalog?: McpMarketplaceCatalog
 	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"
@@ -83,6 +97,7 @@ export interface ExtensionState {
 	}
 	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/WebviewMessage.ts

@@ -22,10 +22,12 @@ export interface WebviewMessage {
 		| "requestOllamaModels"
 		| "requestLmStudioModels"
 		| "openImage"
+		| "openInBrowser"
 		| "openFile"
 		| "openMention"
 		| "cancelTask"
 		| "refreshOpenRouterModels"
+		| "refreshRequestyModels"
 		| "refreshOpenAiModels"
 		| "openMcpSettings"
 		| "restartMcpServer"
@@ -52,6 +54,9 @@ export interface WebviewMessage {
 		| "fetchLatestMcpServersFromHub"
 		| "telemetrySetting"
 		| "openSettings"
+		| "updateMcpTimeout"
+		| "fetchOpenGraphData"
+		| "checkIsImageUrl"
 	// | "relaunchChromeDebugMode"
 	text?: string
 	disabled?: boolean
@@ -70,6 +75,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
@@ -48,6 +49,7 @@ export interface ApiHandlerOptions {
 	deepSeekApiKey?: string
 	requestyApiKey?: string
 	requestyModelId?: string
+	requestyModelInfo?: ModelInfo
 	togetherApiKey?: string
 	togetherModelId?: string
 	qwenApiKey?: string
@@ -56,6 +58,7 @@ export interface ApiHandlerOptions {
 	vsCodeLmModelSelector?: any
 	o3MiniReasoningEffort?: string
 	qwenApiLine?: string
+	xaiApiKey?: string
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {
@@ -404,21 +407,14 @@ export const geminiModels = {
 export type OpenAiNativeModelId = keyof typeof openAiNativeModels
 export const openAiNativeDefaultModelId: OpenAiNativeModelId = "gpt-4o"
 export const openAiNativeModels = {
-	"gpt-4.5-preview": {
-		maxTokens: 16_384,
-		contextWindow: 128_000,
-		supportsImages: true,
-		supportsPromptCache: false,
-		inputPrice: 75,
-		outputPrice: 150,
-	},
 	"o3-mini": {
 		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: {
@@ -428,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>
 
@@ -477,8 +486,8 @@ 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)
+		supportsPromptCache: true,
+		inputPrice: 0.27,
 		outputPrice: 1.1,
 		cacheWritesPrice: 0.27,
 		cacheReadsPrice: 0.07,
@@ -487,8 +496,8 @@ 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)
+		supportsPromptCache: true,
+		inputPrice: 0.55,
 		outputPrice: 2.19,
 		cacheWritesPrice: 0.55,
 		cacheReadsPrice: 0.14,
@@ -793,3 +802,98 @@ export const liteLlmModelInfoSaneDefaults: ModelInfo = {
 	inputPrice: 0,
 	outputPrice: 0,
 }
+
+// Requesty
+// https://requesty.ai/models
+export const requestyDefaultModelId = "anthropic/claude-3-5-sonnet-latest"
+export const requestyDefaultModelInfo: ModelInfo = {
+	maxTokens: 8192,
+	contextWindow: 200_000,
+	supportsImages: true,
+	supportsComputerUse: false,
+	supportsPromptCache: true,
+	inputPrice: 3.0,
+	outputPrice: 15.0,
+	cacheWritesPrice: 3.75,
+	cacheReadsPrice: 0.3,
+	description: "Anthropic's most intelligent model. Highest level of intelligence and capability.",
+}
+
+// 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,
+	)
 }

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,26 @@
+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",
+		},
+	},
+)

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

@@ -9,9 +9,10 @@ import AccountView from "./components/account/AccountView"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
 import { vscode } from "./utils/vscode"
 import McpView from "./components/mcp/McpView"
+import posthog from "posthog-js"
 
 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 +61,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

@@ -214,7 +214,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		},
 		ref,
 	) => {
-		const { filePaths, chatSettings, apiConfiguration, openRouterModels, platform } = useExtensionState()
+		const { filePaths, chatSettings, apiConfiguration, openRouterModels, requestyModels, platform } = useExtensionState()
 		const [isTextAreaFocused, setIsTextAreaFocused] = useState(false)
 		const [gitCommits, setGitCommits] = useState<any[]>([])
 
@@ -635,14 +635,14 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		// Separate the API config submission logic
 		const submitApiConfig = useCallback(() => {
 			const apiValidationResult = validateApiConfiguration(apiConfiguration)
-			const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels)
+			const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels, requestyModels)
 
 			if (!apiValidationResult && !modelIdValidationResult) {
 				vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
 			} else {
 				vscode.postMessage({ type: "getLatestState" })
 			}
-		}, [apiConfiguration, openRouterModels])
+		}, [apiConfiguration, openRouterModels, requestyModels])
 
 		const onModeToggle = useCallback(() => {
 			// if (textAreaDisabled) return
@@ -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"
@@ -793,6 +793,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					{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/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

@@ -31,14 +31,20 @@ import {
 	openAiNativeModels,
 	openRouterDefaultModelId,
 	openRouterDefaultModelInfo,
+	requestyDefaultModelId,
+	requestyDefaultModelInfo,
 	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 VSCodeButtonLink from "../common/VSCodeButtonLink"
-import OpenRouterModelPicker, { ModelDescriptionMarkdown } from "./OpenRouterModelPicker"
+import OpenRouterModelPicker from "./OpenRouterModelPicker"
+import RequestyModelPicker from "./RequestyModelPicker"
+import ModelDescriptionMarkdown from "./ModelDescriptionMarkdown"
 import styled from "styled-components"
 import * as vscodemodels from "vscode"
 import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
@@ -51,7 +57,7 @@ interface ApiOptionsProps {
 }
 
 // This is necessary to ensure dropdown opens downward, important for when this is used in popup
-const DROPDOWN_Z_INDEX = 1001 // Higher than the OpenRouterModelPicker's and ModelSelectorTooltip's z-index
+const DROPDOWN_Z_INDEX = 1001 // Higher than the Requesty/OpenRouterModelPicker's and ModelSelectorTooltip's z-index
 
 const DropdownContainer = styled.div<{ zIndex?: number }>`
 	position: relative;
@@ -195,6 +201,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>
 
@@ -841,24 +848,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>API Key</span>
 					</VSCodeTextField>
-					<VSCodeTextField
-						value={apiConfiguration?.requestyModelId || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("requestyModelId")}
-						placeholder={"Enter Model ID..."}>
-						<span style={{ fontWeight: 500 }}>Model ID</span>
-					</VSCodeTextField>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: 3,
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
-							models. Less capable models may not work as expected.)
-						</span>
-					</p>
+					{!apiConfiguration?.requestyApiKey && <a href="https://app.requesty.ai/manage-api">Get API Key</a>}
 				</div>
 			)}
 
@@ -1122,6 +1112,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={{
@@ -1134,6 +1164,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 			)}
 
 			{selectedProvider !== "openrouter" &&
+				selectedProvider !== "requesty" &&
 				selectedProvider !== "openai" &&
 				selectedProvider !== "ollama" &&
 				selectedProvider !== "lmstudio" &&
@@ -1152,6 +1183,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							{selectedProvider === "deepseek" && createDropdown(deepSeekModels)}
 							{selectedProvider === "qwen" && createDropdown(qwenModels)}
 							{selectedProvider === "mistral" && createDropdown(mistralModels)}
+							{selectedProvider === "xai" && createDropdown(xaiModels)}
 						</DropdownContainer>
 
 						<ModelInfoView
@@ -1165,6 +1197,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 				)}
 
 			{selectedProvider === "openrouter" && showModelOptions && <OpenRouterModelPicker isPopup={isPopup} />}
+			{selectedProvider === "requesty" && showModelOptions && <RequestyModelPicker isPopup={isPopup} />}
 
 			{modelIdErrorMessage && (
 				<p
@@ -1368,6 +1401,12 @@ export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration):
 				selectedModelId: apiConfiguration?.openRouterModelId || openRouterDefaultModelId,
 				selectedModelInfo: apiConfiguration?.openRouterModelInfo || openRouterDefaultModelInfo,
 			}
+		case "requesty":
+			return {
+				selectedProvider: provider,
+				selectedModelId: apiConfiguration?.requestyModelId || requestyDefaultModelId,
+				selectedModelInfo: apiConfiguration?.requestyModelInfo || requestyDefaultModelInfo,
+			}
 		case "openai":
 			return {
 				selectedProvider: provider,
@@ -1403,6 +1442,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

@@ -1,7 +1,6 @@
 import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import Fuse from "fuse.js"
-import React, { KeyboardEvent, memo, useEffect, useMemo, useRef, useState } from "react"
-import { useRemark } from "react-remark"
+import React, { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"
 import { useMount } from "react-use"
 import styled from "styled-components"
 import { openRouterDefaultModelId } from "../../../../src/shared/api"
@@ -9,7 +8,6 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import { highlight } from "../history/HistoryView"
 import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 
 export interface OpenRouterModelPickerProps {
 	isPopup?: boolean
@@ -276,158 +274,3 @@ const DropdownItem = styled.div<{ isSelected: boolean }>`
 		background-color: var(--vscode-list-activeSelectionBackground);
 	}
 `
-
-// Markdown
-
-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 [isExpanded, setIsExpanded] = useState(false)
-		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)
-				// if (!isOverflowing) {
-				// 	setIsExpanded(false)
-				// }
-			}
-		}, [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",
-							// whiteSpace: "pre-wrap",
-							// wordBreak: "break-word",
-							// overflowWrap: "anywhere",
-						}}>
-						{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={{
-									// cursor: "pointer",
-									// color: "var(--vscode-textLink-foreground)",
-									fontSize: "inherit",
-									paddingRight: 0,
-									paddingLeft: 3,
-									backgroundColor: isPopup ? CODE_BLOCK_BG_COLOR : "var(--vscode-sideBar-background)",
-								}}
-								onClick={() => setIsExpanded(true)}>
-								See more
-							</VSCodeLink>
-						</div>
-					)}
-				</div>
-				{/* {isExpanded && showSeeMore && (
-				<div
-					style={{
-						cursor: "pointer",
-						color: "var(--vscode-textLink-foreground)",
-						marginLeft: "auto",
-						textAlign: "right",
-						paddingRight: 2,
-					}}
-					onClick={() => setIsExpanded(false)}>
-					See less
-				</div>
-			)} */}
-			</StyledMarkdown>
-		)
-	},
-)

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

@@ -0,0 +1,274 @@
+import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import Fuse from "fuse.js"
+import React, { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"
+import { useMount } from "react-use"
+import styled from "styled-components"
+import { requestyDefaultModelId } from "../../../../src/shared/api"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+import { highlight } from "../history/HistoryView"
+import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
+
+export interface RequestyModelPickerProps {
+	isPopup?: boolean
+}
+
+const RequestyModelPicker: React.FC<RequestyModelPickerProps> = ({ isPopup }) => {
+	const { apiConfiguration, setApiConfiguration, requestyModels } = useExtensionState()
+	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.requestyModelId || requestyDefaultModelId)
+	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
+	const [selectedIndex, setSelectedIndex] = useState(-1)
+	const dropdownRef = useRef<HTMLDivElement>(null)
+	const itemRefs = useRef<(HTMLDivElement | null)[]>([])
+	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
+	const dropdownListRef = useRef<HTMLDivElement>(null)
+
+	const handleModelChange = (newModelId: string) => {
+		// could be setting invalid model id/undefined info but validation will catch it
+		setApiConfiguration({
+			...apiConfiguration,
+			...{
+				requestyModelId: newModelId,
+				requestyModelInfo: requestyModels[newModelId],
+			},
+		})
+		setSearchTerm(newModelId)
+	}
+
+	const { selectedModelId, selectedModelInfo } = useMemo(() => {
+		return normalizeApiConfiguration(apiConfiguration)
+	}, [apiConfiguration])
+
+	useMount(() => {
+		vscode.postMessage({ type: "refreshRequestyModels" })
+	})
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+				setIsDropdownVisible(false)
+			}
+		}
+
+		document.addEventListener("mousedown", handleClickOutside)
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside)
+		}
+	}, [])
+
+	const modelIds = useMemo(() => {
+		return Object.keys(requestyModels).sort((a, b) => a.localeCompare(b))
+	}, [requestyModels])
+
+	const searchableItems = useMemo(() => {
+		return modelIds.map((id) => ({
+			id,
+			html: id,
+		}))
+	}, [modelIds])
+
+	const fuse = useMemo(() => {
+		return new Fuse(searchableItems, {
+			keys: ["html"], // highlight function will update this
+			threshold: 0.6,
+			shouldSort: true,
+			isCaseSensitive: false,
+			ignoreLocation: false,
+			includeMatches: true,
+			minMatchCharLength: 1,
+		})
+	}, [searchableItems])
+
+	const modelSearchResults = useMemo(() => {
+		let results: { id: string; html: string }[] = searchTerm
+			? highlight(fuse.search(searchTerm), "model-item-highlight")
+			: searchableItems
+		return results
+	}, [searchableItems, searchTerm, fuse])
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+		if (!isDropdownVisible) return
+
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault()
+				setSelectedIndex((prev) => (prev < modelSearchResults.length - 1 ? prev + 1 : prev))
+				break
+			case "ArrowUp":
+				event.preventDefault()
+				setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev))
+				break
+			case "Enter":
+				event.preventDefault()
+				if (selectedIndex >= 0 && selectedIndex < modelSearchResults.length) {
+					handleModelChange(modelSearchResults[selectedIndex].id)
+					setIsDropdownVisible(false)
+				}
+				break
+			case "Escape":
+				setIsDropdownVisible(false)
+				setSelectedIndex(-1)
+				break
+		}
+	}
+
+	const hasInfo = useMemo(() => {
+		return modelIds.some((id) => id.toLowerCase() === searchTerm.toLowerCase())
+	}, [modelIds, searchTerm])
+
+	useEffect(() => {
+		setSelectedIndex(-1)
+		if (dropdownListRef.current) {
+			dropdownListRef.current.scrollTop = 0
+		}
+	}, [searchTerm])
+
+	useEffect(() => {
+		if (selectedIndex >= 0 && itemRefs.current[selectedIndex]) {
+			itemRefs.current[selectedIndex]?.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth",
+			})
+		}
+	}, [selectedIndex])
+
+	return (
+		<div style={{ width: "100%" }}>
+			<style>
+				{`
+				.model-item-highlight {
+					background-color: var(--vscode-editor-findMatchHighlightBackground);
+					color: inherit;
+				}
+				`}
+			</style>
+			<div style={{ display: "flex", flexDirection: "column" }}>
+				<label htmlFor="model-search">
+					<span style={{ fontWeight: 500 }}>Model</span>
+				</label>
+				<DropdownWrapper ref={dropdownRef}>
+					<VSCodeTextField
+						id="model-search"
+						placeholder="Search and select a model..."
+						value={searchTerm}
+						onInput={(e) => {
+							handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
+							setIsDropdownVisible(true)
+						}}
+						onFocus={() => setIsDropdownVisible(true)}
+						onKeyDown={handleKeyDown}
+						style={{
+							width: "100%",
+							zIndex: REQUESTY_MODEL_PICKER_Z_INDEX,
+							position: "relative",
+						}}>
+						{searchTerm && (
+							<div
+								className="input-icon-button codicon codicon-close"
+								aria-label="Clear search"
+								onClick={() => {
+									handleModelChange("")
+									setIsDropdownVisible(true)
+								}}
+								slot="end"
+								style={{
+									display: "flex",
+									justifyContent: "center",
+									alignItems: "center",
+									height: "100%",
+								}}
+							/>
+						)}
+					</VSCodeTextField>
+					{isDropdownVisible && (
+						<DropdownList ref={dropdownListRef}>
+							{modelSearchResults.map((item, index) => (
+								<DropdownItem
+									key={item.id}
+									ref={(el) => (itemRefs.current[index] = el)}
+									isSelected={index === selectedIndex}
+									onMouseEnter={() => setSelectedIndex(index)}
+									onClick={() => {
+										handleModelChange(item.id)
+										setIsDropdownVisible(false)
+									}}
+									dangerouslySetInnerHTML={{
+										__html: item.html,
+									}}
+								/>
+							))}
+						</DropdownList>
+					)}
+				</DropdownWrapper>
+			</div>
+
+			{hasInfo ? (
+				<ModelInfoView
+					selectedModelId={selectedModelId}
+					modelInfo={selectedModelInfo}
+					isDescriptionExpanded={isDescriptionExpanded}
+					setIsDescriptionExpanded={setIsDescriptionExpanded}
+					isPopup={isPopup}
+				/>
+			) : (
+				<p
+					style={{
+						fontSize: "12px",
+						marginTop: 0,
+						color: "var(--vscode-descriptionForeground)",
+					}}>
+					<>
+						The extension automatically fetches the latest list of models available on{" "}
+						<VSCodeLink style={{ display: "inline", fontSize: "inherit" }} href="https://app.requesty.ai/router/list">
+							Requesty.
+						</VSCodeLink>
+						If you're unsure which model to choose, Cline works best with{" "}
+						<VSCodeLink
+							style={{ display: "inline", fontSize: "inherit" }}
+							onClick={() => handleModelChange("anthropic/claude-3-5-sonnet-latest")}>
+							anthropic/claude-3-5-sonnet-latest.
+						</VSCodeLink>
+					</>
+				</p>
+			)}
+		</div>
+	)
+}
+
+export default RequestyModelPicker
+
+// Dropdown
+
+const DropdownWrapper = styled.div`
+	position: relative;
+	width: 100%;
+`
+
+export const REQUESTY_MODEL_PICKER_Z_INDEX = 1_000
+
+const DropdownList = styled.div`
+	position: absolute;
+	top: calc(100% - 3px);
+	left: 0;
+	width: calc(100% - 2px);
+	max-height: 200px;
+	overflow-y: auto;
+	background-color: var(--vscode-dropdown-background);
+	border: 1px solid var(--vscode-list-activeSelectionBackground);
+	z-index: ${REQUESTY_MODEL_PICKER_Z_INDEX - 1};
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+`
+
+const DropdownItem = styled.div<{ isSelected: boolean }>`
+	padding: 5px 10px;
+	cursor: pointer;
+	word-break: break-all;
+	white-space: normal;
+
+	background-color: ${({ isSelected }) => (isSelected ? "var(--vscode-list-activeSelectionBackground)" : "inherit")};
+
+	&:hover {
+		background-color: var(--vscode-list-activeSelectionBackground);
+	}
+`

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

@@ -18,6 +18,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		customInstructions,
 		setCustomInstructions,
 		openRouterModels,
+		requestyModels,
 		telemetrySetting,
 		setTelemetrySetting,
 	} = useExtensionState()
@@ -26,7 +27,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 
 	const handleSubmit = () => {
 		const apiValidationResult = validateApiConfiguration(apiConfiguration)
-		const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels)
+		const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels, requestyModels)
 
 		setApiErrorMessage(apiValidationResult)
 		setModelIdErrorMessage(modelIdValidationResult)

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

@@ -2,7 +2,14 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr
 import { useEvent } from "react-use"
 import { DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../../src/shared/AutoApprovalSettings"
 import { ExtensionMessage, ExtensionState, DEFAULT_PLATFORM } from "../../../src/shared/ExtensionMessage"
-import { ApiConfiguration, ModelInfo, openRouterDefaultModelId, openRouterDefaultModelInfo } from "../../../src/shared/api"
+import {
+	ApiConfiguration,
+	ModelInfo,
+	openRouterDefaultModelId,
+	openRouterDefaultModelInfo,
+	requestyDefaultModelId,
+	requestyDefaultModelInfo,
+} from "../../../src/shared/api"
 import { findLastIndex } from "../../../src/shared/array"
 import { McpMarketplaceCatalog, McpServer } from "../../../src/shared/mcp"
 import { convertTextMateToHljs } from "../utils/textMateToHljs"
@@ -16,6 +23,7 @@ interface ExtensionStateContextType extends ExtensionState {
 	showWelcome: boolean
 	theme: any
 	openRouterModels: Record<string, ModelInfo>
+	requestyModels: Record<string, ModelInfo>
 	openAiModels: string[]
 	mcpServers: McpServer[]
 	mcpMarketplaceCatalog: McpMarketplaceCatalog
@@ -42,6 +50,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		isLoggedIn: false,
 		platform: DEFAULT_PLATFORM,
 		telemetrySetting: "unset",
+		vscMachineId: "",
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
@@ -50,6 +59,9 @@ export const ExtensionStateContextProvider: React.FC<{
 	const [openRouterModels, setOpenRouterModels] = useState<Record<string, ModelInfo>>({
 		[openRouterDefaultModelId]: openRouterDefaultModelInfo,
 	})
+	const [requestyModels, setRequestyModels] = useState<Record<string, ModelInfo>>({
+		[requestyDefaultModelId]: requestyDefaultModelInfo,
+	})
 
 	const [openAiModels, setOpenAiModels] = useState<string[]>([])
 	const [mcpServers, setMcpServers] = useState<McpServer[]>([])
@@ -64,6 +76,7 @@ export const ExtensionStateContextProvider: React.FC<{
 					? [
 							config.apiKey,
 							config.openRouterApiKey,
+							config.requestyApiKey,
 							config.awsRegion,
 							config.vertexProjectId,
 							config.openAiApiKey,
@@ -78,6 +91,7 @@ export const ExtensionStateContextProvider: React.FC<{
 							config.qwenApiKey,
 							config.mistralApiKey,
 							config.vsCodeLmModelSelector,
+							config.xaiApiKey,
 						].some((key) => key !== undefined)
 					: false
 				setShowWelcome(!hasKey)
@@ -108,6 +122,14 @@ export const ExtensionStateContextProvider: React.FC<{
 				})
 				break
 			}
+			case "requestyModels": {
+				const updatedModels = message.requestyModels ?? {}
+				setRequestyModels({
+					[requestyDefaultModelId]: requestyDefaultModelInfo, // in case the extension sent a model list without the default model
+					...updatedModels,
+				})
+				break
+			}
 			case "openRouterModels": {
 				const updatedModels = message.openRouterModels ?? {}
 				setOpenRouterModels({
@@ -146,6 +168,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		showWelcome,
 		theme,
 		openRouterModels,
+		requestyModels,
 		openAiModels,
 		mcpServers,
 		mcpMarketplaceCatalog,

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,17 @@
+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"
+
+const apiKey = "phc_5WnLHpYyC30Bsb7VSJ6DzcPXZ34JSF08DJLyM7svZ15"
+const apiHost = "https://us.i.posthog.com"
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<PostHogProvider apiKey={apiKey} options={{ api_host: apiHost }}>
+			<App />
+		</PostHogProvider>
+	</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

@@ -1,4 +1,4 @@
-import { ApiConfiguration, openRouterDefaultModelId } from "../../../src/shared/api"
+import { ApiConfiguration, openRouterDefaultModelId, requestyDefaultModelId } from "../../../src/shared/api"
 import { ModelInfo } from "../../../src/shared/api"
 export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): string | undefined {
 	if (apiConfiguration) {
@@ -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."
@@ -86,15 +91,26 @@ export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): s
 export function validateModelId(
 	apiConfiguration?: ApiConfiguration,
 	openRouterModels?: Record<string, ModelInfo>,
+	requestyModels?: Record<string, ModelInfo>,
 ): string | undefined {
 	if (apiConfiguration) {
 		switch (apiConfiguration.apiProvider) {
 			case "openrouter":
-				const modelId = apiConfiguration.openRouterModelId || openRouterDefaultModelId // in case the user hasn't changed the model id, it will be undefined by default
-				if (!modelId) {
+				const openRouterModelId = apiConfiguration.openRouterModelId || openRouterDefaultModelId // in case the user hasn't changed the model id, it will be undefined by default
+				if (!openRouterModelId) {
 					return "You must provide a model ID."
 				}
-				if (openRouterModels && !Object.keys(openRouterModels).includes(modelId)) {
+				if (openRouterModels && !Object.keys(openRouterModels).includes(openRouterModelId)) {
+					// even if the model list endpoint failed, extensionstatecontext will always have the default model info
+					return "The model ID you provided is not available. Please choose a different model."
+				}
+				break
+			case "requesty":
+				const requestyModelId = apiConfiguration.requestyModelId || requestyDefaultModelId // in case the user hasn't changed the model id, it will be undefined by default
+				if (!requestyModelId) {
+					return "You must provide a model ID."
+				}
+				if (requestyModels && !Object.keys(requestyModels).includes(requestyModelId)) {
 					// even if the model list endpoint failed, extensionstatecontext will always have the default model info
 					return "The model ID you provided is not available. Please choose a different model."
 				}

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" />