find all test files (#1559)

fix: Diff Edit Failed

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://unpkg.com/@changesets/config@3.0.5/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "restricted",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.changie.yaml

@@ -0,0 +1,26 @@
+changesDir: .changes
+unreleasedDir: unreleased
+headerPath: header.tpl.md
+changelogPath: CHANGELOG.md
+versionExt: md
+versionFormat: '## {{.Version}} - {{.Time.Format "2006-01-02"}}'
+kindFormat: "### {{.Kind}}"
+changeFormat: "* {{.Body}}"
+kinds:
+    - label: Added
+      auto: minor
+    - label: Changed
+      auto: major
+    - label: Deprecated
+      auto: minor
+    - label: Removed
+      auto: major
+    - label: Fixed
+      auto: patch
+    - label: Security
+      auto: patch
+newlines:
+    afterChangelogHeader: 1
+    beforeChangelogVersion: 1
+    endOfVersion: 1
+envPrefix: CHANGIE_

.github/CODEOWNERS

@@ -0,0 +1 @@
+*       @saoudrizwan @ocasta181 @NightTrek @pashpashpash

.github/pull_request_template.md

@@ -2,6 +2,10 @@
 
 <!-- Describe your changes in detail. What problem does this PR solve? -->
 
+### Test Procedure
+
+<!-- How did you test this? Are you confident that it will not introduce bugs? If so, why? -->
+
 ### Type of Change
 
 <!-- Put an 'x' in all boxes that apply -->

.github/workflows/publish.yml

@@ -0,0 +1,112 @@
+name: "Publish Release"
+
+on:
+    workflow_dispatch:
+        inputs:
+            release-type:
+                description: "Choose release type (release or pre-release)"
+                required: true
+                default: "release"
+                type: choice
+                options:
+                    - pre-release
+                    - release
+
+permissions:
+    contents: write
+    packages: write
+    checks: write
+    pull-requests: write
+
+jobs:
+    test:
+        uses: ./.github/workflows/test.yml
+
+    publish:
+        needs: test
+        name: Publish Extension
+        runs-on: ubuntu-latest
+        environment: publish
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20.15.1
+
+            # Cache root dependencies - only reuse if package-lock.json exactly matches
+            - name: Cache root dependencies
+              uses: actions/cache@v4
+              id: root-cache
+              with:
+                  path: node_modules
+                  key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+
+            # Cache webview-ui dependencies - only reuse if package-lock.json exactly matches
+            - name: Cache webview-ui dependencies
+              uses: actions/cache@v4
+              id: webview-cache
+              with:
+                  path: webview-ui/node_modules
+                  key: ${{ runner.os }}-npm-webview-${{ hashFiles('webview-ui/package-lock.json') }}
+
+            - name: Install root dependencies
+              if: steps.root-cache.outputs.cache-hit != 'true'
+              run: npm ci
+
+            - name: Install webview-ui dependencies
+              if: steps.webview-cache.outputs.cache-hit != 'true'
+              run: cd webview-ui && npm ci
+
+            - name: Install Publishing Tools
+              run: npm install -g vsce ovsx
+
+            - name: Get Version
+              id: get_version
+              run: |
+                  VERSION=$(node -p "require('./package.json').version")
+                  echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+            - name: Create Git Tag
+              run: |
+                  VERSION=v${{ steps.get_version.outputs.version }}
+                  echo "Tagging with $VERSION"
+                  git tag "$VERSION"
+                  git push origin "$VERSION"
+
+            - name: Package and Publish Extension
+              env:
+                  VSCE_PAT: ${{ secrets.VSCE_PAT }}
+                  OVSX_PAT: ${{ secrets.OVSX_PAT }}
+              run: |
+                  # Required to generate the .vsix
+                  vsce package --out "cline-${{ steps.get_version.outputs.version }}.vsix"
+
+                  if [ "${{ github.event.inputs.release-type }}" = "pre-release" ]; then
+                    npm run publish:marketplace:prerelease
+                    echo "Successfully published pre-release version ${{ steps.get_version.outputs.version }} to VS Code Marketplace and Open VSX Registry"
+                  else
+                    npm run publish:marketplace
+                    echo "Successfully published release version ${{ steps.get_version.outputs.version }} to VS Code Marketplace and Open VSX Registry"
+                  fi
+
+            # - name: Get Changelog Entry
+            #   id: changelog
+            #   uses: mindsers/changelog-reader-action@v2
+            #   with:
+            #       # This expects a standard Keep a Changelog format
+            #       # "latest" means it will read whichever is the most recent version
+            #       # set in "## [1.2.3] - 2025-01-28" style
+            #       version: latest
+
+            - name: Create GitHub Release
+              uses: softprops/action-gh-release@v1
+              with:
+                  files: "*.vsix"
+                  # body: ${{ steps.changelog.outputs.content }}
+                  generate_release_notes: true
+                  prerelease: ${{ github.event.inputs.release-type == 'pre-release' }}
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -5,6 +5,13 @@ on:
     pull_request:
         branches:
             - main
+    workflow_call:
+
+# Set default permissions for all jobs
+permissions:
+    contents: read # Needed to check out code
+    checks: write # Needed to report test results
+    pull-requests: write # Needed to add comments/annotations to PRs
 
 jobs:
     test:
@@ -51,6 +58,5 @@ jobs:
             - name: Prettier / Format Check
               run: npm run format
 
-            - name: Tests
+            - name: Extension Tests
               run: xvfb-run -a npm run test
-              if: runner.os == 'Linux'

.gitignore

@@ -1,7 +1,10 @@
 out
 dist
 node_modules
+tmp
 .vscode-test/
 *.vsix
 
 .DS_Store
+
+pnpm-lock.yaml

.husky/pre-commit

@@ -0,0 +1,17 @@
+echo "Running pre-commit checks..."
+
+# Run ESLint
+echo "Running ESLint..."
+npm run lint || {
+    echo "❌ ESLint check failed. Please fix the errors and try committing again."
+    exit 1
+}
+
+# Run Prettier
+echo "Running Prettier..."
+npm run format || {
+    echo "❌ Prettier check failed. Run 'npm run format:fix' to automatically fix formatting issues."
+    exit 1
+}
+
+echo "✅ All checks passed!"

.prettierignore

@@ -1,5 +1,5 @@
 dist/
 node_modules
 webview-ui/build/
-CHANGELOG.md
-package-lock.json
+*.md
+package-lock.json

.vscode-test.mjs

@@ -1,8 +1,14 @@
 import { defineConfig } from "@vscode/test-cli"
+import path from "path"
 
 export default defineConfig({
-	files: "out/**/*.test.js",
+	files: "{out/**/*.test.js,src/**/*.test.js}",
 	mocha: {
+		ui: "bdd",
 		timeout: 20000, // Maximum time (in ms) that a test can run before failing
 	},
+	workspaceFolder: "test-workspace",
+	version: "stable",
+	extensionDevelopmentPath: path.resolve("./"),
+	launchArgs: ["--disable-extensions"],
 })

CHANGELOG.md

@@ -1,4 +1,21 @@
-# Change Log
+# Changelog
+
+## [3.2.6]
+
+- Save last used API/model when switching between Plan and Act, for users that like to use different models for each mode
+- New Context Window progress bar in the task header to understand increased cost/generation degradation as the context increases
+- Localize READMEs and add language selector for English, Spanish, German, Chinese, and Japanese
+- Add Advanced Settings to remove MCP prompts from requests to save tokens, enable/disable checkpoints for users that don't use git (more coming soon!)
+- Add Gemini 2.0 Flash Thinking experimental model
+- Allow new users to subscribe to mailing list to get notified when new Accounts option is available
+
+## [3.2.5]
+
+- Use yellow textfield outline in Plan mode to better distinguish from Act mode
+
+## [3.2.3]
+
+- Add DeepSeek-R1 (deepseek-reasoner) model support with proper parameter handling (thanks @slavakurilyak!)
 
 ## [3.2.0]
 

README.md

@@ -1,3 +1,7 @@
+<div align="center"><sub>
+English | <a href="https://github.com/cline/cline/blob/main/locales/es/README.md" target="_blank">Español</a> | <a href="https://github.com/cline/cline/blob/main/locales/de/README.md" target="_blank">Deutsch</a> | <a href="https://github.com/cline/cline/blob/main/locales/ja/README.md" target="_blank">日本語</a> | <a href="https://github.com/cline/cline/blob/main/locales/zh-cn/README.md" target="_blank">简体中文</a> | <a href="https://github.com/cline/cline/blob/main/locales/zh-tw/README.md" target="_blank">繁體中文</a>
+</sub></div>
+
 # Cline – \#1 on OpenRouter
 
 <p align="center">
@@ -156,6 +160,31 @@ To contribute to the project, start with our [Contributing Guide](CONTRIBUTING.m
 
 </details>
 
+<details>
+<summary>Creating a Pull Request</summary>
+
+1. Before creating a PR, generate a changeset entry:
+    ```bash
+    npm run changeset
+    ```
+   This will prompt you for:
+   - Type of change (major, minor, patch)
+     - `major` → breaking changes (1.0.0 → 2.0.0)
+     - `minor` → new features (1.0.0 → 1.1.0)
+     - `patch` → bug fixes (1.0.0 → 1.0.1)
+   - Description of your changes
+
+2. Commit your changes and the generated `.changeset` file
+
+3. Push your branch and create a PR on GitHub. Our CI will:
+   - Run tests and checks
+   - Changesetbot will create a comment showing the version impact
+   - When merged to main, changesetbot will create a Version Packages PR
+   - When the Version Packages PR is merged, a new release will be published
+
+</details>
+
+
 ## License
 
 [Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)

locales/de/CODE_OF_CONDUCT.md

@@ -0,0 +1,37 @@
+# Verhaltenskodex für Mitwirkende
+
+## Unser Versprechen
+
+Im Interesse der Förderung einer offenen und einladenden Umgebung verpflichten wir uns als
+Mitwirkende und Betreuer, die Teilnahme an unserem Projekt und unserer
+Gemeinschaft zu einer belästigungsfreien Erfahrung für alle zu machen, unabhängig von Alter, Körpergröße,
+Behinderung, ethnischer Zugehörigkeit, sexuellen Merkmalen, Geschlechtsidentität und -ausdruck,
+Erfahrungsniveau, Bildung, sozioökonomischem Status, Nationalität, persönlichem Erscheinungsbild,
+Rasse, Religion oder sexueller Identität und Orientierung.
+
+## Unsere Standards
+
+Beispiele für Verhaltensweisen, die dazu beitragen, eine positive Umgebung zu schaffen, sind:
+
+-   Verwendung einer einladenden und inklusiven Sprache
+-   Respekt gegenüber unterschiedlichen Standpunkten und Erfahrungen
+-   Konstruktive Annahme von Kritik
+-   Fokussierung auf das, was das Beste für die Gemeinschaft ist
+-   Empathie gegenüber anderen Mitgliedern der Gemeinschaft zeigen
+
+Beispiele für inakzeptables Verhalten von Teilnehmern sind:
+
+-   Die Verwendung von sexualisierter Sprache oder Bildern und unerwünschte sexuelle Aufmerksamkeit oder Annäherungen
+-   Trollen, beleidigende/abwertende Kommentare und persönliche oder politische Angriffe
+-   Öffentliche oder private Belästigung
+-   Veröffentlichen von privaten Informationen anderer, wie eine physische oder elektronische Adresse,
+    ohne ausdrückliche Erlaubnis
+-   Andere Verhaltensweisen, die in einem professionellen Umfeld als unangemessen angesehen werden könnten
+
+## Unsere Verantwortlichkeiten
+
+Die Projektbetreuer sind dafür verantwortlich, die Standards für akzeptables Verhalten zu klären
+und es wird erwartet, dass sie angemessene und faire Korrekturmaßnahmen als Reaktion auf
+jedes Beispiel für inakzeptables Verhalten ergreifen.
+
+Die Projektbetreuer haben das Recht und die Verantwortung, Kommentare, Commits, Code, Wiki-Änderungen, Issues und andere Beiträge zu entfernen, zu bearbeiten oder abzulehnen, die nicht mit diesem Verhaltenskodex übereinstimmen, oder jeden Mitwirkenden vorübergehend oder dauerhaft zu

locales/de/CONTRIBUTING.md

@@ -0,0 +1,82 @@
+# Beitrag zu Cline
+
+Wir freuen uns, dass du daran interessiert bist, zu Cline beizutragen. Ob du einen Fehler behebst, eine Funktion hinzufügst oder unsere Dokumentation verbesserst – jeder Beitrag macht Cline intelligenter! Um unsere Community lebendig und einladend zu halten, müssen alle Mitglieder unseren [Verhaltenskodex](CODE_OF_CONDUCT.md) einhalten.
+
+## Fehler oder Probleme melden
+
+Fehlermeldungen helfen, Cline für alle zu verbessern! Bevor du ein neues Problem erstellst, überprüfe bitte die [bestehenden Probleme](https://github.com/cline/cline/issues), um Duplikate zu vermeiden. Wenn du bereit bist, einen Fehler zu melden, gehe zu unserer [Issues-Seite](https://github.com/cline/cline/issues/new/choose), wo du eine Vorlage findest, die dir hilft, die relevanten Informationen auszufüllen.
+
+<blockquote class='warning-note'>
+    🔐 <b>Wichtig:</b> Wenn du eine Sicherheitslücke entdeckst, verwende das <a href="https://github.com/cline/cline/security/advisories/new">GitHub-Sicherheitstool, um sie privat zu melden</a>.
+</blockquote>
+
+## Entscheiden, woran man arbeiten möchte
+
+Suchst du nach einem guten ersten Beitrag? Schau dir die mit ["good first issue"](https://github.com/cline/cline/labels/good%20first%20issue) oder ["help wanted"](https://github.com/cline/cline/labels/help%20wanted) gekennzeichneten Issues an. Diese sind speziell für neue Mitwirkende ausgewählt und Bereiche, in denen wir gerne Hilfe erhalten würden!
+
+Wir begrüßen auch Beiträge zu unserer [Dokumentation](https://github.com/cline/cline/tree/main/docs). Ob du Tippfehler korrigierst, bestehende Anleitungen verbesserst oder neue Bildungsinhalte erstellst – wir möchten ein von der Community verwaltetes Ressourcen-Repository aufbauen, das allen hilft, das Beste aus Cline herauszuholen. Du kannst beginnen, indem du `/docs` erkundest und nach Bereichen suchst, die verbessert werden müssen.
+
+Wenn du planst, an einer größeren Funktion zu arbeiten, erstelle bitte zuerst eine [Funktionsanfrage](https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop), damit wir besprechen können, ob sie mit der Vision von Cline übereinstimmt.
+
+## Entwicklungsumgebung einrichten
+
+1. **VS Code Erweiterungen**
+
+    - Beim Öffnen des Projekts wird VS Code dich auffordern, die empfohlenen Erweiterungen zu installieren
+    - Diese Erweiterungen sind für die Entwicklung erforderlich, bitte akzeptiere alle Installationsanfragen
+    - Wenn du die Anfragen abgelehnt hast, kannst du sie manuell im Erweiterungsbereich installieren
+
+2. **Lokale Entwicklung**
+    - Führe `npm run install:all` aus, um die Abhängigkeiten zu installieren
+    - Führe `npm run test` aus, um die Tests lokal auszuführen
+    - Bevor du einen PR einreichst, führe `npm run format:fix` aus, um deinen Code zu formatieren
+
+## Code schreiben und einreichen
+
+Jeder kann Code zu Cline beitragen, aber wir bitten dich, diese Richtlinien zu befolgen, um sicherzustellen, dass deine Beiträge reibungslos integriert werden:
+
+1. **Pull Requests fokussiert halten**
+
+    - Begrenze PRs auf eine einzelne Funktion oder Fehlerbehebung
+    - Teile größere Änderungen in kleinere, kohärente PRs auf
+    - Teile Änderungen in logische Commits auf, die unabhängig überprüft werden können
+
+2. **Codequalität**
+
+    - Führe `npm run lint` aus, um den Code-Stil zu überprüfen
+    - Führe `npm run format` aus, um den Code automatisch zu formatieren
+    - Alle PRs müssen die CI-Prüfungen bestehen, die Linting und Formatierung umfassen
+    - Behebe alle ESLint-Warnungen oder -Fehler, bevor du einreichst
+    - Befolge die Best Practices für TypeScript und halte die Typensicherheit ein
+
+3. **Tests**
+
+    - Füge Tests für neue Funktionen hinzu
+    - Führe `npm test` aus, um sicherzustellen, dass alle Tests bestehen
+    - Aktualisiere bestehende Tests, wenn deine Änderungen sie beeinflussen
+    - Füge sowohl Unit- als auch Integrationstests hinzu, wo es angebracht ist
+
+4. **Commit-Richtlinien**
+
+    - Schreibe klare und beschreibende Commit-Nachrichten
+    - Verwende das konventionelle Commit-Format (z.B. "feat:", "fix:", "docs:")
+    - Verweise auf relevante Issues in den Commits mit #Issue-Nummer
+
+5. **Vor dem Einreichen**
+
+    - Rebase deinen Branch mit dem neuesten Main
+    - Stelle sicher, dass dein Branch korrekt gebaut wird
+    - Überprüfe, dass alle Tests bestehen
+    - Überprüfe deine Änderungen, um jeglichen Debug-Code oder Konsolenprotokolle zu entfernen
+
+6. **Beschreibung des Pull Requests**
+    - Beschreibe klar, was deine Änderungen bewirken
+    - Füge Schritte hinzu, um die Änderungen zu testen
+    - Liste alle wichtigen Änderungen auf
+    - Füge Screenshots für Änderungen an der Benutzeroberfläche hinzu
+
+## Beitragsvereinbarung
+
+Durch das Einreichen eines Pull Requests erklärst du dich damit einverstanden, dass deine Beiträge unter derselben Lizenz wie das Projekt ([Apache 2.0](LICENSE)) lizenziert werden.
+
+Denke daran: Zu Cline beizutragen bedeutet nicht nur, Code zu schreiben, sondern Teil einer Community zu sein, die die Zukunft der KI-gestützten Entwicklung gestaltet. Lass uns gemeinsam etwas Großartiges schaffen! 🚀

locales/de/README.md

@@ -0,0 +1,162 @@
+# Cline – \#1 auf OpenRouter
+
+<p align="center">
+        <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
+</p>
+
+<div align="center">
+<table>
+<tbody>
+<td align="center">
+<a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank"><strong>Im VS Marketplace herunterladen</strong></a>
+</td>
+<td align="center">
+<a href="https://discord.gg/cline" target="_blank"><strong>Discord</strong></a>
+</td>
+<td align="center">
+<a href="https://www.reddit.com/r/cline/" target="_blank"><strong>r/cline</strong></a>
+</td>
+<td align="center">
+<a href="https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop" target="_blank"><strong>Feature Requests</strong></a>
+</td>
+<td align="center">
+<a href="https://cline.bot/join-us" target="_blank"><strong>Wir stellen ein!</strong></a>
+</td>
+</tbody>
+</table>
+</div>
+
+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.
+
+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.
+3. Sobald Cline die benötigten Informationen hat, kann er:
+                - Dateien erstellen und bearbeiten sowie Linter-/Compiler-Fehler überwachen, um proaktiv Probleme wie fehlende Importe und Syntaxfehler selbst zu beheben.
+                - Befehle direkt in Ihrem Terminal ausführen und deren Ausgabe überwachen, sodass er z.B. auf Dev-Server-Probleme reagieren kann, nachdem er eine Datei bearbeitet hat.
+                - Für Webentwicklungsaufgaben kann Cline die Website in einem Headless-Browser starten, klicken, tippen, scrollen und Screenshots sowie Konsolenprotokolle erfassen, sodass er Laufzeitfehler und visuelle Fehler beheben kann.
+4. Wenn eine Aufgabe abgeschlossen ist, präsentiert Cline das Ergebnis mit einem Terminalbefehl wie `open -a "Google Chrome" index.html`, den Sie mit einem Klick ausführen können.
+
+> [!TIPP]
+> Verwenden Sie die Tastenkombination `CMD/CTRL + Shift + P`, um die Befehls-Palette zu öffnen und geben Sie "Cline: Open In New Tab" ein, um die Erweiterung als Tab in Ihrem Editor zu öffnen. So können Sie Cline neben Ihrem Dateiexplorer verwenden und sehen, wie er Ihren Arbeitsbereich verändert.
+
+---
+
+<img align="right" width="340" src="https://github.com/user-attachments/assets/3cf21e04-7ce9-4d22-a7b9-ba2c595e88a4">
+
+### Verwenden Sie jede API und jedes Modell
+
+Cline unterstützt API-Anbieter wie OpenRouter, Anthropic, OpenAI, Google Gemini, AWS Bedrock, Azure und GCP Vertex. Sie können auch jede OpenAI-kompatible API konfigurieren oder ein lokales Modell über LM Studio/Ollama verwenden. Wenn Sie OpenRouter verwenden, ruft die Erweiterung deren neueste Modellliste ab, sodass Sie die neuesten Modelle sofort verwenden können, sobald sie verfügbar sind.
+
+Die Erweiterung verfolgt auch die gesamten Token- und API-Nutzungskosten für den gesamten Aufgabenzyklus und einzelne Anfragen, sodass Sie bei jedem Schritt über die Ausgaben informiert sind.
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/81be79a8-1fdb-4028-9129-5fe055e01e76">
+
+### Befehle im Terminal ausführen
+
+Dank der neuen [Shell-Integrations-Updates in VSCode v1.93](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api) kann Cline Befehle direkt in Ihrem Terminal ausführen und die Ausgabe empfangen. Dies ermöglicht ihm eine Vielzahl von Aufgaben, von der Installation von Paketen und dem Ausführen von Build-Skripten bis hin zur Bereitstellung von Anwendungen, Verwaltung von Datenbanken und Ausführung von Tests, während er sich an Ihre Entwicklungsumgebung und Toolchain anpasst, um die Aufgabe richtig zu erledigen.
+
+Für lang laufende Prozesse wie Dev-Server verwenden Sie die Schaltfläche "Während des Laufens fortfahren", um Cline die Fortsetzung der Aufgabe zu ermöglichen, während der Befehl im Hintergrund läuft. Während Cline arbeitet, wird er über neue Terminalausgaben benachrichtigt, sodass er auf auftretende Probleme reagieren kann, wie z.B. Kompilierungsfehler beim Bearbeiten von Dateien.
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="400" src="https://github.com/user-attachments/assets/c5977833-d9b8-491e-90f9-05f9cd38c588">
+
+### Dateien erstellen und bearbeiten
+
+Cline kann Dateien direkt in Ihrem Editor erstellen und bearbeiten und Ihnen eine Diff-Ansicht der Änderungen präsentieren. Sie können die Änderungen von Cline direkt im Diff-Ansichts-Editor bearbeiten oder rückgängig machen oder Feedback im Chat geben, bis Sie mit dem Ergebnis zufrieden sind. Cline überwacht auch Linter-/Compiler-Fehler (fehlende Importe, Syntaxfehler usw.), sodass er auftretende Probleme selbst beheben kann.
+
+Alle von Cline vorgenommenen Änderungen werden in der Timeline Ihrer Datei aufgezeichnet, was eine einfache Möglichkeit bietet, Änderungen nachzuverfolgen und bei Bedarf rückgängig zu machen.
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/bc2e85ba-dfeb-4fe6-9942-7cfc4703cbe5">
+
+### Den Browser verwenden
+
+Mit der neuen [Computer Use](https://www.anthropic.com/news/3-5-models-and-computer-use) Fähigkeit von Claude 3.5 Sonnet kann Cline einen Browser starten, Elemente anklicken, Text eingeben und scrollen, dabei Screenshots und Konsolenprotokolle bei jedem Schritt erfassen. Dies ermöglicht interaktives Debugging, End-to-End-Tests und sogar allgemeine Webnutzung! Dies gibt ihm die Autonomie, visuelle Fehler und Laufzeitprobleme zu beheben, ohne dass Sie selbst Fehlerprotokolle kopieren und einfügen müssen.
+
+Versuchen Sie, Cline zu bitten, "die App zu testen", und sehen Sie zu, wie er einen Befehl wie `npm run dev` ausführt, Ihren lokal laufenden Dev-Server in einem Browser startet und eine Reihe von Tests durchführt, um zu bestätigen, dass alles funktioniert. [Sehen Sie sich hier eine Demo an.](https://x.com/sdrzn/status/1850880547825823989)
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/ac0efa14-5c1f-4c26-a42d-9d7c56f5fadd">
+
+### "ein Werkzeug hinzufügen, das..."
+
+Dank des [Model Context Protocol](https://github.com/modelcontextprotocol) kann Cline seine Fähigkeiten durch benutzerdefinierte Werkzeuge erweitern. Während Sie [community-made servers](https://github.com/modelcontextprotocol/servers) verwenden können, kann Cline stattdessen Werkzeuge erstellen und installieren, die speziell auf Ihren Workflow zugeschnitten sind. Bitten Sie Cline einfach, "ein Werkzeug hinzuzufügen", und er erledigt alles, von der Erstellung eines neuen MCP-Servers bis zur Installation in der Erweiterung. Diese benutzerdefinierten Werkzeuge werden dann Teil von Clines Toolkit und sind bereit, in zukünftigen Aufgaben verwendet zu werden.
+
+-   "ein Werkzeug hinzufügen, das Jira-Tickets abruft": Abrufen von Ticket-ACs und Cline zur Arbeit bringen
+-   "ein Werkzeug hinzufügen, das AWS EC2s verwaltet": Überprüfen von Servermetriken und Skalieren von Instanzen
+-   "ein Werkzeug hinzufügen, das die neuesten PagerDuty-Vorfälle abruft": Abrufen von Details und Cline bitten, Fehler zu beheben
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="360" src="https://github.com/user-attachments/assets/7fdf41e6-281a-4b4b-ac19-020b838b6970">
+
+### Kontext hinzufügen
+
+**`@url`:** Fügen Sie eine URL ein, damit die Erweiterung sie abruft und in Markdown konvertiert, nützlich, wenn Sie Cline die neuesten Dokumente geben möchten
+
+**`@problems`:** Fügen Sie Arbeitsbereichsfehler und -warnungen (Panel 'Probleme') hinzu, die Cline beheben soll
+
+**`@file`:** Fügt den Inhalt einer Datei hinzu, sodass Sie keine API-Anfragen verschwenden müssen, um das Lesen der Datei zu genehmigen (+ zum Suchen von Dateien tippen)
+
+**`@folder`:** Fügt die Dateien eines Ordners auf einmal hinzu, um Ihren Workflow noch weiter zu beschleunigen
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/140c8606-d3bf-41b9-9a1f-4dbf0d4c90cb">
+
+### Checkpoints: Vergleichen und Wiederherstellen
+
+Während Cline eine Aufgabe bearbeitet, erstellt die Erweiterung bei jedem Schritt einen Schnappschuss Ihres Arbeitsbereichs. Sie können die Schaltfläche 'Vergleichen' verwenden, um einen Diff zwischen dem Schnappschuss und Ihrem aktuellen Arbeitsbereich zu sehen, und die Schaltfläche 'Wiederherstellen', um zu diesem Punkt zurückzukehren.
+
+Wenn Sie beispielsweise mit einem lokalen Webserver arbeiten, können Sie 'Nur Arbeitsbereich wiederherstellen' verwenden, um schnell verschiedene Versionen Ihrer App zu testen, und 'Aufgabe und Arbeitsbereich wiederherstellen', wenn Sie die Version gefunden haben, von der aus Sie weiterentwickeln möchten. Dies ermöglicht es Ihnen, sicher verschiedene Ansätze zu erkunden, ohne Fortschritte zu verlieren.
+
+<!-- Transparenter Pixel, um einen Zeilenumbruch nach dem schwebenden Bild zu erzeugen -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+## Beitrag leisten
+
+Um zum Projekt beizutragen, beginnen Sie mit unserem [Beitragsleitfaden](CONTRIBUTING.md), um die Grundlagen zu lernen. Sie können auch unserem [Discord](https://discord.gg/cline) beitreten, um im Kanal `#contributors` mit anderen Mitwirkenden zu chatten. Wenn Sie auf der Suche nach einer Vollzeitstelle sind, schauen Sie sich unsere offenen Stellen auf unserer [Karriereseite](https://cline.bot/join-us) an!
+
+<details>
+<summary>Lokale Entwicklungsanweisungen</summary>
+
+1. Klonen Sie das Repository _(Erfordert [git-lfs](https://git-lfs.com/))_:
+                ```bash
+                git clone https://github.com/cline/cline.git
+                ```
+2. Öffnen Sie das Projekt in VSCode:
+                ```bash
+                code cline
+                ```
+3. Installieren Sie die notwendigen Abhängigkeiten für die Erweiterung und das Webview-GUI:
+                ```bash
+                npm run install:all
+                ```
+4. Starten Sie durch Drücken von `F5` (oder `Run`->`Start Debugging`), um ein neues VSCode-Fenster mit der geladenen Erweiterung zu öffnen. (Möglicherweise müssen Sie die [esbuild problem matchers extension](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers) installieren, wenn Sie auf Probleme beim Erstellen des Projekts stoßen.)
+
+</details>
+
+## Lizenz
+
+[Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)
+

locales/es/CODE_OF_CONDUCT.md

@@ -0,0 +1,71 @@
+# Código de Conducta para Contribuyentes
+
+## Nuestro Compromiso
+
+En el interés de fomentar un entorno abierto y acogedor, nosotros como
+contribuyentes y mantenedores nos comprometemos a hacer de la participación en nuestro proyecto y
+nuestra comunidad una experiencia libre de acoso para todos, independientemente de la edad, tamaño corporal,
+discapacidad, etnia, características sexuales, identidad y expresión de género,
+nivel de experiencia, educación, estatus socioeconómico, nacionalidad, apariencia personal,
+raza, religión o identidad y orientación sexual.
+
+## Nuestros Estándares
+
+Ejemplos de comportamientos que contribuyen a crear un entorno positivo incluyen:
+
+-   Uso de un lenguaje acogedor e inclusivo
+-   Respeto a diferentes puntos de vista y experiencias
+-   Aceptar de manera constructiva las críticas
+-   Centrarse en lo que es mejor para la comunidad
+-   Mostrar empatía hacia otros miembros de la comunidad
+
+Ejemplos de comportamientos inaceptables por parte de los participantes incluyen:
+
+-   El uso de lenguaje o imágenes sexualizadas y la atención o avances sexuales no deseados
+-   Trollear, comentarios insultantes/despectivos y ataques personales o políticos
+-   Acoso público o privado
+-   Publicar información privada de otros, como una dirección física o electrónica,
+    sin permiso explícito
+-   Otras conductas que podrían considerarse inapropiadas en un entorno profesional
+
+## Nuestras Responsabilidades
+
+Los mantenedores del proyecto son responsables de aclarar los estándares de comportamiento aceptable
+y se espera que tomen medidas correctivas apropiadas y justas en respuesta a cualquier
+caso de comportamiento inaceptable.
+
+Los mantenedores del proyecto tienen el derecho y la responsabilidad de eliminar, editar o rechazar
+comentarios, commits, código, ediciones de wiki, issues y otras contribuciones que no estén alineadas con este Código de Conducta, o de prohibir temporal o permanentemente a cualquier contribuyente cuyo comportamiento sea inapropiado,
+amenazante, ofensivo o dañino.
+
+## Alcance
+
+Este Código de Conducta se aplica tanto dentro de los espacios del proyecto como en espacios públicos
+cuando una persona representa el proyecto o su comunidad. Ejemplos de
+representación de un proyecto o comunidad incluyen el uso de una dirección de correo electrónico oficial del proyecto,
+publicar en una cuenta oficial de redes sociales o actuar como un representante designado
+en un evento en línea o fuera de línea. La representación de un proyecto puede
+ser definida y clarificada más específicamente por los mantenedores del proyecto.
+
+## Aplicación
+
+Los casos de comportamiento abusivo, acosador o inaceptable de otra manera pueden
+ser reportados contactando al equipo del proyecto en hi@cline.bot. Todas las quejas
+serán revisadas e investigadas y resultarán en una respuesta que
+se considere necesaria y apropiada a las circunstancias. El equipo del proyecto está
+obligado a mantener la confidencialidad con respecto al informante de un incidente.
+Más detalles sobre políticas específicas de aplicación pueden ser publicados por separado.
+
+Los mantenedores del proyecto que no sigan o hagan cumplir el Código de Conducta de buena
+fe pueden enfrentar repercusiones temporales o permanentes según lo determinen otros
+miembros de la dirección del proyecto.
+
+## Atribución
+
+Este Código de Conducta está adaptado del [Contributor Covenant][homepage], versión 1.4,
+disponible en https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+Respuestas a preguntas frecuentes sobre este Código de Conducta se pueden encontrar en
+https://www.contributor-covenant.org/faq

locales/es/CONTRIBUTING.md

@@ -0,0 +1,82 @@
+# Contribuir a Cline
+
+Nos alegra que estés interesado en contribuir a Cline. Ya sea que corrijas un error, añadas una función o mejores nuestra documentación, ¡cada contribución hace que Cline sea más inteligente! Para mantener nuestra comunidad viva y acogedora, todos los miembros deben cumplir con nuestro [Código de Conducta](CODE_OF_CONDUCT.md).
+
+## Informar de errores o problemas
+
+¡Los informes de errores ayudan a mejorar Cline para todos! Antes de crear un nuevo problema, por favor revisa los [problemas existentes](https://github.com/cline/cline/issues) para evitar duplicados. Cuando estés listo para informar un error, dirígete a nuestra [página de Issues](https://github.com/cline/cline/issues/new/choose), donde encontrarás una plantilla que te ayudará a completar la información relevante.
+
+<blockquote class='warning-note'>
+    🔐 <b>Importante:</b> Si descubres una vulnerabilidad de seguridad, utiliza la <a href="https://github.com/cline/cline/security/advisories/new">herramienta de seguridad de GitHub para informarla de manera privada</a>.
+</blockquote>
+
+## Decidir en qué trabajar
+
+¿Buscas una buena primera contribución? Revisa los issues etiquetados con ["good first issue"](https://github.com/cline/cline/labels/good%20first%20issue) o ["help wanted"](https://github.com/cline/cline/labels/help%20wanted). ¡Estos están especialmente seleccionados para nuevos colaboradores y son áreas donde nos encantaría recibir ayuda!
+
+También damos la bienvenida a contribuciones a nuestra [documentación](https://github.com/cline/cline/tree/main/docs). Ya sea corrigiendo errores tipográficos, mejorando guías existentes o creando nuevos contenidos educativos, queremos construir un repositorio de recursos gestionado por la comunidad que ayude a todos a sacar el máximo provecho de Cline. Puedes comenzar explorando `/docs` y buscando áreas que necesiten mejoras.
+
+Si planeas trabajar en una función más grande, por favor crea primero una [solicitud de función](https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop) para que podamos discutir si se alinea con la visión de Cline.
+
+## Configurar el entorno de desarrollo
+
+1. **Extensiones de VS Code**
+
+    - Al abrir el proyecto, VS Code te pedirá que instales las extensiones recomendadas
+    - Estas extensiones son necesarias para el desarrollo, por favor acepta todas las solicitudes de instalación
+    - Si rechazaste las solicitudes, puedes instalarlas manualmente en la sección de extensiones
+
+2. **Desarrollo local**
+    - Ejecuta `npm run install:all` para instalar las dependencias
+    - Ejecuta `npm run test` para ejecutar las pruebas localmente
+    - Antes de enviar un PR, ejecuta `npm run format:fix` para formatear tu código
+
+## Escribir y enviar código
+
+Cualquiera puede contribuir código a Cline, pero te pedimos que sigas estas pautas para asegurar que tus contribuciones se integren sin problemas:
+
+1. **Mantén los Pull Requests enfocados**
+
+    - Limita los PRs a una sola función o corrección de errores
+    - Divide los cambios más grandes en PRs más pequeños y coherentes
+    - Divide los cambios en commits lógicos que puedan ser revisados independientemente
+
+2. **Calidad del código**
+
+    - Ejecuta `npm run lint` para verificar el estilo del código
+    - Ejecuta `npm run format` para formatear el código automáticamente
+    - Todos los PRs deben pasar las verificaciones de CI, que incluyen linting y formateo
+    - Corrige todas las advertencias o errores de ESLint antes de enviar
+    - Sigue las mejores prácticas para TypeScript y mantén la seguridad de tipos
+
+3. **Pruebas**
+
+    - Añade pruebas para nuevas funciones
+    - Ejecuta `npm test` para asegurarte de que todas las pruebas pasen
+    - Actualiza las pruebas existentes si tus cambios las afectan
+    - Añade tanto pruebas unitarias como de integración donde sea apropiado
+
+4. **Pautas de commits**
+
+    - Escribe mensajes de commit claros y descriptivos
+    - Usa el formato de commit convencional (por ejemplo, "feat:", "fix:", "docs:")
+    - Haz referencia a los issues relevantes en los commits con #número-del-issue
+
+5. **Antes de enviar**
+
+    - Rebasea tu rama con el último Main
+    - Asegúrate de que tu rama se construya correctamente
+    - Verifica que todas las pruebas pasen
+    - Revisa tus cambios para eliminar cualquier código de depuración o registros de consola
+
+6. **Descripción del Pull Request**
+    - Describe claramente lo que hacen tus cambios
+    - Añade pasos para probar los cambios
+    - Enumera cualquier cambio importante
+    - Añade capturas de pantalla para cambios en la interfaz de usuario
+
+## Acuerdo de contribución
+
+Al enviar un Pull Request, aceptas que tus contribuciones se licencien bajo la misma licencia que el proyecto ([Apache 2.0](LICENSE)).
+
+Recuerda: Contribuir a Cline no solo significa escribir código, sino ser parte de una comunidad que está dando forma al futuro del desarrollo asistido por IA. ¡Hagamos algo grandioso juntos! 🚀

locales/es/README.md

@@ -0,0 +1,161 @@
+# Cline – #1 en OpenRouter
+
+<p align="center">
+        <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
+</p>
+
+<div align="center">
+<table>
+<tbody>
+<td align="center">
+<a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank"><strong>Descargar en VS Marketplace</strong></a>
+</td>
+<td align="center">
+<a href="https://discord.gg/cline" target="_blank"><strong>Discord</strong></a>
+</td>
+<td align="center">
+<a href="https://www.reddit.com/r/cline/" target="_blank"><strong>r/cline</strong></a>
+</td>
+<td align="center">
+<a href="https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop" target="_blank"><strong>Solicitudes de Funciones</strong></a>
+</td>
+<td align="center">
+<a href="https://cline.bot/join-us" target="_blank"><strong>Estamos Contratando!</strong></a>
+</td>
+</tbody>
+</table>
+</div>
+
+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.
+
+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.
+3. Una vez que Cline tenga la información necesaria, puede:
+                - Crear y editar archivos + monitorear errores de Linter/Compilador, para que pueda solucionar proactivamente problemas como importaciones faltantes y errores de sintaxis.
+                - Ejecutar comandos directamente en su terminal y monitorear su salida, para que pueda responder a problemas del servidor de desarrollo después de editar un archivo.
+                - Para tareas de desarrollo web, Cline puede iniciar el sitio web en un navegador sin cabeza, hacer clic, escribir, desplazarse y capturar capturas de pantalla + registros de consola, para que pueda solucionar errores de tiempo de ejecución y errores visuales.
+4. Cuando una tarea esté completa, Cline le presentará el resultado con un comando de terminal como `open -a "Google Chrome" index.html`, que puede ejecutar con un clic en un botón.
+
+> [!TIP]
+> Use el atajo de teclado `CMD/CTRL + Shift + P` para abrir la paleta de comandos y escriba "Cline: Open In New Tab" para abrir la extensión como una pestaña en su editor. De esta manera, puede usar Cline junto a su explorador de archivos y ver más claramente cómo cambia su espacio de trabajo.
+
+---
+
+<img align="right" width="340" src="https://github.com/user-attachments/assets/3cf21e04-7ce9-4d22-a7b9-ba2c595e88a4">
+
+### Use cualquier API y modelo
+
+Cline admite proveedores de API como OpenRouter, Anthropic, OpenAI, Google Gemini, AWS Bedrock, Azure y GCP Vertex. También puede configurar cualquier API compatible con OpenAI o usar un modelo local a través de LM Studio/Ollama. Si usa OpenRouter, la extensión recupera su lista de modelos más reciente, para que pueda usar los modelos más nuevos tan pronto como estén disponibles.
+
+La extensión también rastrea el uso total de tokens y costos de API para todo el ciclo de tareas y solicitudes individuales, para que esté informado sobre los gastos en cada paso.
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/81be79a8-1fdb-4028-9129-5fe055e01e76">
+
+### Ejecutar comandos en el terminal
+
+Gracias a las nuevas [actualizaciones de integración de Shell en VSCode v1.93](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api), Cline puede ejecutar comandos directamente en su terminal y recibir la salida. Esto le permite realizar una variedad de tareas, desde la instalación de paquetes y la ejecución de scripts de compilación hasta la implementación de aplicaciones, la gestión de bases de datos y la ejecución de pruebas, adaptándose a su entorno de desarrollo y cadena de herramientas para hacer el trabajo correctamente.
+
+Para procesos de larga duración como servidores de desarrollo, use el botón "Continuar mientras se ejecuta" para permitir que Cline continúe con la tarea mientras el comando se ejecuta en segundo plano. Mientras Cline trabaja, será notificado sobre nuevas salidas del terminal, para que pueda responder a problemas que puedan surgir, como errores de compilación al editar archivos.
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="400" src="https://github.com/user-attachments/assets/c5977833-d9b8-491e-90f9-05f9cd38c588">
+
+### Crear y editar archivos
+
+Cline puede crear y editar archivos directamente en su editor y presentarle una vista de diferencias de los cambios. Puede editar o deshacer los cambios de Cline directamente en el editor de vista de diferencias o proporcionar comentarios en el chat hasta que esté satisfecho con el resultado. Cline también monitorea errores de Linter/Compilador (importaciones faltantes, errores de sintaxis, etc.), para que pueda solucionar problemas que surjan en el camino.
+
+Todos los cambios realizados por Cline se registran en la línea de tiempo de su archivo, proporcionando una forma sencilla de rastrear cambios y deshacerlos si es necesario.
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/bc2e85ba-dfeb-4fe6-9942-7cfc4703cbe5">
+
+### Usar el navegador
+
+Con la nueva [habilidad de uso de computadora](https://www.anthropic.com/news/3-5-models-and-computer-use) de Claude 3.5 Sonnet, Cline puede iniciar un navegador, hacer clic en elementos, escribir texto y desplazarse, capturando capturas de pantalla y registros de consola. Esto permite la depuración interactiva, pruebas de extremo a extremo e incluso el uso general de la web. Esto le da la autonomía para solucionar errores visuales y problemas de tiempo de ejecución sin que tenga que copiar y pegar registros de errores.
+
+Intente pedirle a Cline que "pruebe la aplicación" y observe cómo ejecuta un comando como `npm run dev`, inicia su servidor de desarrollo local en un navegador y realiza una serie de pruebas para confirmar que todo funciona. [Vea una demostración aquí.](https://x.com/sdrzn/status/1850880547825823989)
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/ac0efa14-5c1f-4c26-a42d-9d7c56f5fadd">
+
+### "agregar una herramienta que..."
+
+Gracias al [Model Context Protocol](https://github.com/modelcontextprotocol), Cline puede expandir sus habilidades mediante herramientas personalizadas. Mientras que puede usar [servidores creados por la comunidad](https://github.com/modelcontextprotocol/servers), Cline puede en su lugar crear e instalar herramientas adaptadas a su flujo de trabajo específico. Simplemente pida a Cline que "agregue una herramienta" y él se encargará de todo, desde la creación de un nuevo servidor MCP hasta la instalación en la extensión. Estas herramientas personalizadas se convierten en parte del conjunto de herramientas de Cline y están listas para ser utilizadas en tareas futuras.
+
+-   "agregar una herramienta que recupere tickets de Jira": Recuperar ACs de tickets y poner a Cline a trabajar
+-   "agregar una herramienta que gestione AWS EC2s": Verificar métricas del servidor y escalar instancias hacia arriba o hacia abajo
+-   "agregar una herramienta que recupere los últimos incidentes de PagerDuty": Recuperar detalles y pedir a Cline que solucione errores
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="360" src="https://github.com/user-attachments/assets/7fdf41e6-281a-4b4b-ac19-020b838b6970">
+
+### Agregar contexto
+
+**`@url`:** Inserte una URL para que la extensión la recupere y convierta en Markdown, útil cuando desee proporcionar a Cline los documentos más recientes
+
+**`@problems`:** Agregue errores y advertencias del espacio de trabajo (panel 'Problemas') que Cline debe solucionar
+
+**`@file`:** Agregue el contenido de un archivo para que no tenga que desperdiciar solicitudes de API para aprobar la lectura del archivo (+ para buscar archivos)
+
+**`@folder`:** Agregue los archivos de una carpeta a la vez para acelerar aún más su flujo de trabajo
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/140c8606-d3bf-41b9-9a1f-4dbf0d4c90cb">
+
+### Puntos de control: Comparar y Restaurar
+
+Mientras Cline trabaja en una tarea, la extensión crea una instantánea de su espacio de trabajo en cada paso. Puede usar el botón 'Comparar' para ver una diferencia entre la instantánea y su espacio de trabajo actual, y el botón 'Restaurar' para volver a ese punto.
+
+Por ejemplo, si está trabajando con un servidor web local, puede usar 'Restaurar solo espacio de trabajo' para probar rápidamente diferentes versiones de su aplicación, y luego 'Restaurar tarea y espacio de trabajo' cuando encuentre la versión desde la que desea continuar trabajando. Esto le permite explorar diferentes enfoques de manera segura sin perder progreso.
+
+<!-- Pixel transparente para crear un salto de línea después de la imagen flotante -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+## Contribuir
+
+Para contribuir al proyecto, comience con nuestra [guía de contribución](CONTRIBUTING.md) para aprender los conceptos básicos. También puede unirse a nuestro [Discord](https://discord.gg/cline) para chatear con otros colaboradores en el canal `#contributors`. Si está buscando un trabajo a tiempo completo, consulte nuestras vacantes en nuestra [página de carreras](https://cline.bot/join-us).
+
+<details>
+<summary>Instrucciones de desarrollo local</summary>
+
+1. Clone el repositorio _(Requiere [git-lfs](https://git-lfs.com/))_:
+                ```bash
+                git clone https://github.com/cline/cline.git
+                ```
+2. Abra el proyecto en VSCode:
+                ```bash
+                code cline
+                ```
+3. Instale las dependencias necesarias para la extensión y la GUI de Webview:
+                ```bash
+                npm run install:all
+                ```
+4. Inicie presionando `F5` (o `Run`->`Start Debugging`) para abrir una nueva ventana de VSCode con la extensión cargada. (Es posible que deba instalar la [extensión de emparejadores de problemas de esbuild](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers) si encuentra problemas al compilar el proyecto.)
+
+</details>
+
+## Licencia
+
+[Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)

locales/ja/CODE_OF_CONDUCT.md

@@ -0,0 +1,47 @@
+# コントリビューター規約行動規範
+
+## 我々の誓い
+
+オープンで歓迎される環境を育むために、我々はコントリビューターおよびメンテナーとして、年齢、体型、障害、民族、性の特徴、性別のアイデンティティおよび表現、経験のレベル、教育、社会経済的地位、国籍、個人の外見、人種、宗教、または性的アイデンティティおよび指向に関係なく、プロジェクトおよびコミュニティへの参加がハラスメントのない体験となるよう誓います。
+
+## 我々の基準
+
+ポジティブな環境を作り出す行動の例としては、以下のものがあります：
+
+- 歓迎的で包括的な言葉を使うこと
+- 異なる視点や経験を尊重すること
+- 建設的な批判を優雅に受け入れること
+- コミュニティのために最善を尽くすことに集中すること
+- 他のコミュニティメンバーに対して共感を示すこと
+
+参加者による許容できない行動の例としては、以下のものがあります：
+
+- 性的な言葉や画像の使用、望まれない性的関心やアプローチ
+- 荒らし、侮辱的/軽蔑的なコメント、個人的または政治的な攻撃
+- 公的または私的なハラスメント
+- 明示的な許可なしに他人の個人情報（物理的または電子的な住所など）を公開すること
+- プロフェッショナルな環境で不適切と合理的に見なされるその他の行動
+
+## 我々の責任
+
+プロジェクトのメンテナーは、許容される行動の基準を明確にする責任があり、不適切な行動の事例に対して適切かつ公平な是正措置を講じることが期待されています。
+
+プロジェクトのメンテナーは、この行動規範に沿わないコメント、コミット、コード、ウィキの編集、問題、およびその他の貢献を削除、編集、または拒否する権利と責任を持ち、また、不適切、脅迫的、攻撃的、または有害と見なされるその他の行動を行ったコントリビューターを一時的または永久に禁止する権利と責任を持ちます。
+
+## 範囲
+
+この行動規範は、プロジェクトスペース内およびプロジェクトやコミュニティを代表する個人が公の場で行動する場合に適用されます。プロジェクトやコミュニティを代表する例としては、公式のプロジェクトメールアドレスを使用すること、公式のソーシャルメディアアカウントを通じて投稿すること、またはオンラインまたはオフラインのイベントで任命された代表として行動することが含まれます。プロジェクトの代表としての行動は、プロジェクトのメンテナーによってさらに定義および明確化される場合があります。
+
+## 執行
+
+虐待的、嫌がらせ、またはその他の許容できない行動の事例は、プロジェクトチームに hi@cline.bot まで報告することができます。すべての苦情はレビューおよび調査され、状況に応じて必要かつ適切な対応が行われます。プロジェクトチームは、事件の報告者に関する機密性を保持する義務があります。具体的な執行ポリシーの詳細は別途掲載される場合があります。
+
+行動規範を誠実に遵守または執行しないプロジェクトのメンテナーは、プロジェクトのリーダーシップの他のメンバーによって一時的または永久的な影響を受ける可能性があります。
+
+## 帰属
+
+この行動規範は、[Contributor Covenant][homepage] バージョン 1.4 から適応されており、https://www.contributor-covenant.org/version/1/4/code-of-conduct.html で入手できます。
+
+[homepage]: https://www.contributor-covenant.org
+
+この行動規範に関する一般的な質問への回答については、https://www.contributor-covenant.org/faq を参照してください。

locales/ja/CONTRIBUTING.md

@@ -0,0 +1,82 @@
+# Clineへの貢献
+
+Clineへの貢献に興味をお持ちいただきありがとうございます。
+
+## バグや問題の報告
+
+バグ報告は、Clineを皆さんにとってより良いものにするために役立ちます！新しい問題を作成する前に、重複を避けるために[既存の問題を検索](https://github.com/cline/cline/issues)してください。バグを報告する準備ができたら、[問題ページ](https://github.com/cline/cline/issues/new/choose)に移動し、関連情報を記入するためのテンプレートをご利用ください。
+
+<blockquote class='warning-note'>
+    🔐 <b>重要:</b> セキュリティ脆弱性を発見した場合は、<a href="https://github.com/cline/cline/security/advisories/new">Githubセキュリティツールを使用して非公開で報告</a>してください。
+</blockquote>
+
+## 作業内容の決定
+
+最初の貢献をお探しですか？["good first issue"](https://github.com/cline/cline/labels/good%20first%20issue)や["help wanted"](https://github.com/cline/cline/labels/help%20wanted)のラベルが付いた問題をチェックしてください。これらは新しい貢献者向けに特に選ばれたもので、私たちが助けを求めている分野です！
+
+また、[ドキュメント](https://github.com/cline/cline/tree/main/docs)への貢献も歓迎します！誤字の修正、既存のガイドの改善、新しい教育コンテンツの作成など、コミュニティ主導のリソースリポジトリを構築するために皆さんの力をお借りしたいと考えています。`/docs`に飛び込んで、改善が必要な箇所を探してみてください。
+
+大きな機能に取り組む予定がある場合は、まず[機能リクエスト](https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop)を作成し、それがClineのビジョンに合致するかどうかを議論しましょう。
+
+## 開発環境のセットアップ
+
+1. **VS Code拡張機能**
+
+    - プロジェクトを開くと、VS Codeは推奨される拡張機能のインストールを促します
+    - これらの拡張機能は開発に必要です - すべてのインストールプロンプトを受け入れてください
+    - プロンプトを閉じた場合は、拡張機能パネルから手動でインストールできます
+
+2. **ローカル開発**
+    - `npm run install:all`を実行して依存関係をインストールします
+    - `npm run test`を実行してローカルでテストを実行します
+    - PRを提出する前に、`npm run format:fix`を実行してコードをフォーマットします
+
+## コードの作成と提出
+
+誰でもClineにコードを貢献できますが、貢献がスムーズに統合されるように以下のガイドラインに従ってください：
+
+1. **プルリクエストを集中させる**
+
+    - PRは単一の機能またはバグ修正に限定してください
+    - 大きな変更は小さな関連PRに分割してください
+    - 論理的なコミットに分けて、独立してレビューできるようにしてください
+
+2. **コード品質**
+
+    - `npm run lint`を実行してコードスタイルをチェックします
+    - `npm run format`を実行してコードを自動的にフォーマットします
+    - すべてのPRは、リンティングとフォーマットを含むCIチェックに合格する必要があります
+    - 提出前にESLintの警告やエラーをすべて解決してください
+    - TypeScriptのベストプラクティスに従い、型の安全性を維持してください
+
+3. **テスト**
+
+    - 新しい機能にはテストを追加してください
+    - `npm test`を実行してすべてのテストが合格することを確認してください
+    - 変更が既存のテストに影響を与える場合は、それらを更新してください
+    - 適切な場合には、ユニットテストと統合テストの両方を含めてください
+
+4. **コミットガイドライン**
+
+    - 明確で説明的なコミットメッセージを書いてください
+    - 従来のコミット形式（例："feat:", "fix:", "docs:"）を使用してください
+    - コミットで関連する問題を#issue-numberを使用して参照してください
+
+5. **提出前に**
+
+    - 最新のmainにブランチをリベースしてください
+    - ブランチが正常にビルドされることを確認してください
+    - すべてのテストが合格していることを再確認してください
+    - デバッグコードやコンソールログがないか変更を確認してください
+
+6. **プルリクエストの説明**
+    - 変更内容を明確に説明してください
+    - 変更をテストする手順を含めてください
+    - 破壊的な変更がある場合はリストしてください
+    - UIの変更にはスクリーンショットを追加してください
+
+## 貢献契約
+
+プルリクエストを提出することで、あなたの貢献がプロジェクトと同じライセンス（[Apache 2.0](LICENSE)）の下でライセンスされることに同意したことになります。
+
+覚えておいてください：Clineへの貢献はコードを書くことだけではなく、AI支援開発の未来を形作るコミュニティの一員になることです。一緒に素晴らしいものを作りましょう！🚀

locales/ja/README.md

@@ -0,0 +1,161 @@
+# Cline – OpenRouterでのナンバーワン
+
+<p align="center">
+    <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
+</p>
+
+<div align="center">
+<table>
+<tbody>
+<td align="center">
+<a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank"><strong>VS Marketplaceでダウンロード</strong></a>
+</td>
+<td align="center">
+<a href="https://discord.gg/cline" target="_blank"><strong>Discord</strong></a>
+</td>
+<td align="center">
+<a href="https://www.reddit.com/r/cline/" target="_blank"><strong>r/cline</strong></a>
+</td>
+<td align="center">
+<a href="https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop" target="_blank"><strong>機能リクエスト</strong></a>
+</td>
+<td align="center">
+<a href="https://cline.bot/join-us" target="_blank"><strong>採用情報</strong></a>
+</td>
+</tbody>
+</table>
+</div>
+
+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の可能性を安全かつアクセスしやすい方法で探求できます。
+
+1. タスクを入力し、モックアップを機能するアプリに変換したり、スクリーンショットでバグを修正したりします。
+2. Clineは、ファイル構造とソースコードASTの分析、正規表現検索の実行、関連ファイルの読み取りから始め、既存プロジェクトに精通します。コンテキストに追加される情報を慎重に管理することで、大規模で複雑なプロジェクトでもコンテキストウィンドウを圧倒することなく貴重な支援を提供できます。
+3. Clineが必要な情報を取得すると、次のことができます：
+        - ファイルの作成と編集 + リンター/コンパイラーエラーの監視を行い、欠落したインポートや構文エラーなどの問題を自動的に修正します。
+        - ターミナルでコマンドを直接実行し、作業中に出力を監視します。これにより、ファイル編集後の開発サーバーの問題に対応できます。
+        - ウェブ開発タスクでは、ヘッドレスブラウザでサイトを起動し、クリック、入力、スクロール、スクリーンショットとコンソールログのキャプチャを行い、ランタイムエラーや視覚的なバグを修正します。
+4. タスクが完了すると、Clineは`open -a "Google Chrome" index.html`のようなターミナルコマンドを提示し、ボタンをクリックして実行できます。
+
+> [!TIP]
+> `CMD/CTRL + Shift + P`ショートカットを使用してコマンドパレットを開き、「Cline: Open In New Tab」と入力して、エディターのタブとして拡張機能を開きます。これにより、ファイルエクスプローラーと並行してClineを使用し、ワークスペースの変更をより明確に確認できます。
+
+---
+
+<img align="right" width="340" src="https://github.com/user-attachments/assets/3cf21e04-7ce9-4d22-a7b9-ba2c595e88a4">
+
+### どのAPIやモデルでも使用可能
+
+Clineは、OpenRouter、Anthropic、OpenAI、Google Gemini、AWS Bedrock、Azure、GCP VertexなどのAPIプロバイダーをサポートしています。また、OpenAI互換のAPIを設定したり、LM Studio/Ollamaを通じてローカルモデルを使用することもできます。OpenRouterを使用している場合、拡張機能は最新のモデルリストを取得し、最新のモデルをすぐに使用できるようにします。
+
+拡張機能は、タスクループ全体と個々のリクエストのトークン総数とAPI使用コストを追跡し、各ステップで支出を把握できます。
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/81be79a8-1fdb-4028-9129-5fe055e01e76">
+
+### ターミナルでコマンドを実行
+
+VSCode v1.93の新しい[シェル統合アップデート](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api)のおかげで、Clineはターミナルでコマンドを直接実行し、出力を受け取ることができます。これにより、パッケージのインストールやビルドスクリプトの実行からアプリケーションのデプロイ、データベースの管理、テストの実行まで、幅広いタスクを実行できます。Clineは、開発環境とツールチェーンに適応して、タスクを正確に実行します。
+
+開発サーバーのような長時間実行されるプロセスの場合、「実行中に続行」ボタンを使用して、コマンドがバックグラウンドで実行されている間にClineがタスクを続行できるようにします。Clineが作業を進める中で、新しいターミナル出力が通知され、ファイル編集時のコンパイルエラーなどの問題に対応できます。
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="400" src="https://github.com/user-attachments/assets/c5977833-d9b8-491e-90f9-05f9cd38c588">
+
+### ファイルの作成と編集
+
+Clineはエディター内でファイルを作成および編集し、変更の差分ビューを提示します。差分ビューエディターでClineの変更を直接編集または元に戻すことができ、チャットでフィードバックを提供して満足するまで調整できます。Clineはリンター/コンパイラーエラー（欠落したインポート、構文エラーなど）も監視し、発生した問題を自動的に修正します。
+
+Clineによるすべての変更はファイルのタイムラインに記録され、必要に応じて変更を追跡および元に戻す簡単な方法を提供します。
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/bc2e85ba-dfeb-4fe6-9942-7cfc4703cbe5">
+
+### ブラウザの使用
+
+Claude 3.5 Sonnetの新しい[コンピュータ使用](https://www.anthropic.com/news/3-5-models-and-computer-use)機能により、Clineはブラウザを起動し、要素をクリック、テキストを入力、スクロールし、各ステップでスクリーンショットとコンソールログをキャプチャできます。これにより、インタラクティブなデバッグ、エンドツーエンドテスト、さらには一般的なウェブ使用が可能になります。これにより、エラーログを手動でコピー＆ペーストすることなく、視覚的なバグやランタイムの問題を自律的に修正できます。
+
+Clineに「アプリをテストして」と頼んでみてください。彼は`npm run dev`のようなコマンドを実行し、ローカルで実行中の開発サーバーをブラウザで起動し、一連のテストを実行してすべてが正常に動作することを確認します。[デモはこちら。](https://x.com/sdrzn/status/1850880547825823989)
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/ac0efa14-5c1f-4c26-a42d-9d7c56f5fadd">
+
+### 「ツールを追加して...」
+
+[Model Context Protocol](https://github.com/modelcontextprotocol)のおかげで、Clineはカスタムツールを通じて機能を拡張できます。[コミュニティ製サーバー](https://github.com/modelcontextprotocol/servers)を使用することもできますが、Clineは代わりに特定のワークフローに合わせたツールを作成してインストールできます。「ツールを追加して」と頼むだけで、Clineは新しいMCPサーバーの作成から拡張機能へのインストールまでをすべて処理します。これらのカスタムツールはClineのツールキットの一部となり、将来のタスクで使用できるようになります。
+
+- 「Jiraチケットを取得するツールを追加して」：チケットACを取得し、Clineに作業を依頼
+- 「AWS EC2を管理するツールを追加して」：サーバーメトリクスを確認し、インスタンスをスケールアップまたはダウン
+- 「最新のPagerDutyインシデントを取得するツールを追加して」：詳細を取得し、Clineにバグ修正を依頼
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="360" src="https://github.com/user-attachments/assets/7fdf41e6-281a-4b4b-ac19-020b838b6970">
+
+### コンテキストを追加
+
+**`@url`：** 最新のドキュメントをClineに提供したい場合に、URLを貼り付けて拡張機能が取得し、Markdownに変換します。
+
+**`@problems`：** Clineが修正するためのワークスペースエラーと警告（「問題」パネル）を追加します。
+
+**`@file`：** ファイルの内容を追加し、読み取りファイルを承認するAPIリクエストを節約します（+ファイルを検索して入力）。
+
+**`@folder`：** フォルダーのファイルを一度に追加して、ワークフローをさらにスピードアップします。
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/140c8606-d3bf-41b9-9a1f-4dbf0d4c90cb">
+
+### チェックポイント：比較と復元
+
+Clineがタスクを進める中で、拡張機能は各ステップでワークスペースのスナップショットを撮ります。「比較」ボタンを使用してスナップショットと現在のワークスペースの差分を確認し、「復元」ボタンを使用してそのポイントにロールバックできます。
+
+たとえば、ローカルウェブサーバーで作業している場合、「ワークスペースのみを復元」を使用して異なるバージョンのアプリを迅速にテストし、「タスクとワークスペースを復元」を使用して続行したいバージョンを見つけたときに使用します。これにより、進行状況を失うことなく異なるアプローチを安全に探求できます。
+
+<!-- 透明なピクセルで浮動画像の後に改行を作成 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+## 貢献
+
+プロジェクトに貢献するには、[貢献ガイド](CONTRIBUTING.md)から基本を学び始めてください。また、[Discord](https://discord.gg/cline)に参加して、`#contributors`チャンネルで他の貢献者とチャットすることもできます。フルタイムの仕事を探している場合は、[採用ページ](https://cline.bot/join-us)でオープンポジションを確認してください。
+
+<details>
+<summary>ローカル開発の手順</summary>
+
+1. リポジトリをクローンします _(Requires [git-lfs](https://git-lfs.com/))_：
+        ```bash
+        git clone https://github.com/cline/cline.git
+        ```
+2. プロジェクトをVSCodeで開きます：
+        ```bash
+        code cline
+        ```
+3. 拡張機能とwebview-guiの必要な依存関係をインストールします：
+        ```bash
+        npm run install:all
+        ```
+4. `F5`を押して（または`Run`->`Start Debugging`）、拡張機能が読み込まれた新しいVSCodeウィンドウを開きます。（プロジェクトのビルドに問題がある場合は、[esbuild problem matchers extension](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers)をインストールする必要があるかもしれません。）
+
+</details>
+
+## ライセンス
+
+[Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)

locales/zh-cn/CODE_OF_CONDUCT.md

@@ -0,0 +1,47 @@
+# 贡献者公约行为准则
+
+## 我们的承诺
+
+为了营造一个开放和欢迎的环境，我们作为贡献者和维护者承诺让我们的项目和社区的参与体验对每个人都无骚扰，无论年龄、体型、残疾、种族、性别特征、性别认同和表达、经验水平、教育程度、社会经济地位、国籍、个人外貌、种族、宗教或性取向。
+
+## 我们的标准
+
+有助于创造积极环境的行为示例包括：
+
+- 使用欢迎和包容的语言
+- 尊重不同的观点和经验
+- 优雅地接受建设性的批评
+- 专注于对社区最有利的事情
+- 对其他社区成员表现出同理心
+
+参与者不可接受的行为示例包括：
+
+- 使用性化语言或图像以及不受欢迎的性关注或挑逗
+- 故意挑衅、侮辱/贬低性评论和个人或政治攻击
+- 公开或私下骚扰
+- 未经明确许可发布他人的私人信息，如物理或电子地址
+- 其他在专业环境中合理认为不适当的行为
+
+## 我们的责任
+
+项目维护者有责任澄清可接受行为的标准，并期望对任何不可接受行为采取适当和公平的纠正措施。
+
+项目维护者有权利和责任删除、编辑或拒绝与本行为准则不一致的评论、提交、代码、维基编辑、问题和其他贡献，或暂时或永久禁止任何贡献者进行他们认为不适当、威胁、冒犯或有害的其他行为。
+
+## 适用范围
+
+本行为准则适用于项目空间内和公共空间中代表项目或其社区的个人。代表项目或社区的示例包括使用官方项目电子邮件地址，通过官方社交媒体账户发布，或在在线或离线活动中作为指定代表。项目的代表性可能由项目维护者进一步定义和澄清。
+
+## 执行
+
+滥用、骚扰或其他不可接受行为的实例可以通过联系项目团队 hi@cline.bot 报告。所有投诉将被审查和调查，并将导致根据情况认为必要和适当的回应。项目团队有义务对事件报告者保密。具体执行政策的详细信息可能会单独发布。
+
+未能善意遵守或执行行为准则的项目维护者可能会面临由项目领导的其他成员决定的临时或永久后果。
+
+## 归属
+
+本行为准则改编自 [贡献者公约][主页]，版本 1.4，可在 https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 获取。
+
+[主页]: https://www.contributor-covenant.org
+
+有关此行为准则的常见问题的答案，请参见 https://www.contributor-covenant.org/faq

locales/zh-cn/CONTRIBUTING.md

@@ -0,0 +1,82 @@
+# 贡献到 Cline
+
+我们很高兴您有兴趣为 Cline 做出贡献。无论您是修复错误、添加功能还是改进我们的文档，每一份贡献都让 Cline 更加智能！为了保持我们的社区充满活力和欢迎，所有成员必须遵守我们的[行为准则](CODE_OF_CONDUCT.md)。
+
+## 报告错误或问题
+
+错误报告有助于让 Cline 对每个人都更好！在创建新问题之前，请先[搜索现有问题](https://github.com/cline/cline/issues)以避免重复。当您准备好报告错误时，请前往我们的[问题页面](https://github.com/cline/cline/issues/new/choose)，在那里您会找到一个模板来帮助您填写相关信息。
+
+<blockquote class='warning-note'>
+    🔐 <b>重要：</b>如果您发现安全漏洞，请使用<a href="https://github.com/cline/cline/security/advisories/new">Github 安全工具私下报告</a>。
+</blockquote>
+
+## 决定要做什么
+
+寻找一个好的首次贡献？查看标记为["good first issue"](https://github.com/cline/cline/labels/good%20first%20issue)或["help wanted"](https://github.com/cline/cline/labels/help%20wanted)的问题。这些是专门为新贡献者策划的领域，我们非常欢迎您的帮助！
+
+我们也欢迎对我们的[文档](https://github.com/cline/cline/tree/main/docs)做出贡献！无论是修正错别字、改进现有指南，还是创建新的教育内容 - 我们希望建立一个社区驱动的资源库，帮助每个人充分利用 Cline。您可以从深入研究 `/docs` 并寻找需要改进的地方开始。
+
+如果您计划开发一个更大的功能，请先创建一个[功能请求](https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop)，以便我们讨论它是否符合 Cline 的愿景。
+
+## 开发设置
+
+1. **VS Code 扩展**
+
+    - 打开项目时，VS Code 会提示您安装推荐的扩展
+    - 这些扩展是开发所必需的 - 请接受所有安装提示
+    - 如果您忽略了提示，可以从扩展面板手动安装它们
+
+2. **本地开发**
+    - 运行 `npm run install:all` 安装依赖项
+    - 运行 `npm run test` 本地运行测试
+    - 提交 PR 之前，运行 `npm run format:fix` 格式化您的代码
+
+## 编写和提交代码
+
+任何人都可以为 Cline 贡献代码，但我们要求您遵循以下指南，以确保您的贡献能够顺利集成：
+
+1. **保持 Pull Request 集中**
+
+    - 将 PR 限制为单个功能或错误修复
+    - 将较大的更改拆分为较小的相关 PR
+    - 将更改分为逻辑提交，以便独立审查
+
+2. **代码质量**
+
+    - 运行 `npm run lint` 检查代码风格
+    - 运行 `npm run format` 自动格式化代码
+    - 所有 PR 必须通过 CI 检查，包括 lint 和格式化
+    - 提交前解决所有 ESLint 警告或错误
+    - 遵循 TypeScript 最佳实践并保持类型安全
+
+3. **测试**
+
+    - 为新功能添加测试
+    - 运行 `npm test` 确保所有测试通过
+    - 如果您的更改影响现有测试，请更新它们
+    - 在适当的情况下包括单元测试和集成测试
+
+4. **提交指南**
+
+    - 编写清晰、描述性的提交消息
+    - 使用常规提交格式（例如，“feat:”，“fix:”，“docs:”）
+    - 在提交中引用相关问题，使用 #issue-number
+
+5. **提交前**
+
+    - 将您的分支重新基于最新的 main
+    - 确保您的分支成功构建
+    - 仔细检查所有测试是否通过
+    - 检查您的更改是否有任何调试代码或控制台日志
+
+6. **Pull Request 描述**
+    - 清楚描述您的更改内容
+    - 包括测试更改的步骤
+    - 列出任何重大更改
+    - 对于 UI 更改，添加截图
+
+## 贡献协议
+
+通过提交 pull request，您同意您的贡献将根据与项目相同的许可证（[Apache 2.0](LICENSE)）进行许可。
+
+记住：为 Cline 做贡献不仅仅是编写代码 - 这是成为一个社区的一部分，共同塑造 AI 辅助开发的未来。让我们一起构建一些令人惊叹的东西！🚀

locales/zh-cn/README.md

@@ -0,0 +1,162 @@
+# Cline – OpenRouter 排名第一
+
+<p align="center">
+    <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
+</p>
+
+<div align="center">
+<table>
+<tbody>
+<td align="center">
+<a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank"><strong>在 VS Marketplace 下载</strong></a>
+</td>
+<td align="center">
+<a href="https://discord.gg/cline" target="_blank"><strong>Discord</strong></a>
+</td>
+<td align="center">
+<a href="https://www.reddit.com/r/cline/" target="_blank"><strong>r/cline</strong></a>
+</td>
+<td align="center">
+<a href="https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop" target="_blank"><strong>功能请求</strong></a>
+</td>
+<td align="center">
+<a href="https://cline.bot/join-us" target="_blank"><strong>我们正在招聘！</strong></a>
+</td>
+</tbody>
+</table>
+</div>
+
+认识 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 的潜力。
+
+1. 输入你的任务并添加图像，将模型转换为功能应用程序或通过截图修复错误。
+2. Cline 首先分析你的文件结构和源代码 AST，运行正则表达式搜索，并阅读相关文件以了解现有项目。通过仔细管理添加到上下文中的信息，Cline 即使在大型复杂项目中也能提供有价值的帮助，而不会使上下文窗口过载。
+3. 一旦 Cline 获得所需信息，他可以：
+        - 创建和编辑文件 + 监控 linter/编译器错误，从而主动修复诸如缺少导入和语法错误等问题。
+        - 直接在你的终端中执行命令并监控其输出，从而在编辑文件后对开发服务器问题做出反应。
+        - 对于 Web 开发任务，Cline 可以在无头浏览器中启动网站，点击、输入、滚动并捕获截图和控制台日志，从而修复运行时错误和视觉错误。
+4. 当任务完成时，Cline 将通过终端命令如 `open -a "Google Chrome" index.html` 向你展示结果，你可以通过点击按钮运行该命令。
+
+> [!提示]
+> 使用 `CMD/CTRL + Shift + P` 快捷键打开命令面板并输入 "Cline: Open In New Tab" 将扩展作为标签在编辑器中打开。这让你可以与文件资源管理器并排使用 Cline，更清楚地看到他如何改变你的工作空间。
+
+---
+
+<img align="right" width="340" src="https://github.com/user-attachments/assets/3cf21e04-7ce9-4d22-a7b9-ba2c595e88a4">
+
+### 使用任何 API 和模型
+
+Cline 支持 OpenRouter、Anthropic、OpenAI、Google Gemini、AWS Bedrock、Azure 和 GCP Vertex 等 API 提供商。你还可以配置任何兼容 OpenAI 的 API，或通过 LM Studio/Ollama 使用本地模型。如果你使用 OpenRouter，扩展会获取他们的最新模型列表，让你在新模型可用时立即使用。
+
+扩展还会跟踪整个任务循环和单个请求的总令牌和 API 使用成本，让你在每一步都了解支出情况。
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/81be79a8-1fdb-4028-9129-5fe055e01e76">
+
+### 在终端中运行命令
+
+感谢 VSCode v1.93 中的新 [终端 shell 集成更新](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api)，Cline 可以直接在你的终端中执行命令并接收输出。这使他能够执行广泛的任务，从安装包和运行构建脚本到部署应用程序、管理数据库和执行测试，同时适应你的开发环境和工具链以正确完成工作。
+
+对于长时间运行的进程如开发服务器，使用“在运行时继续”按钮让 Cline 在命令后台运行时继续任务。当 Cline 工作时，他会在过程中收到任何新的终端输出通知，让他对可能出现的问题做出反应，例如编辑文件时的编译时错误。
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="400" src="https://github.com/user-attachments/assets/c5977833-d9b8-491e-90f9-05f9cd38c588">
+
+### 创建和编辑文件
+
+Cline 可以直接在你的编辑器中创建和编辑文件，向你展示更改的差异视图。你可以直接在差异视图编辑器中编辑或恢复 Cline 的更改，或在聊天中提供反馈，直到你对结果满意。Cline 还会监控 linter/编译器错误（缺少导入、语法错误等），以便他在过程中自行修复出现的问题。
+
+Cline 所做的所有更改都会记录在你的文件时间轴中，提供了一种简单的方法来跟踪和恢复修改（如果需要）。
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/bc2e85ba-dfeb-4fe6-9942-7cfc4703cbe5">
+
+### 使用浏览器
+
+借助 Claude 3.5 Sonnet 的新 [计算机使用](https://www.anthropic.com/news/3-5-models-and-computer-use) 功能，Cline 可以启动浏览器，点击元素，输入文本和滚动，在每一步捕获截图和控制台日志。这允许进行交互式调试、端到端测试，甚至是一般的网页使用！这使他能够自主修复视觉错误和运行时问题，而无需你亲自操作和复制粘贴错误日志。
+
+试试让 Cline “测试应用程序”，看看他如何运行 `npm run dev` 命令，在浏览器中启动你本地运行的开发服务器，并执行一系列测试以确认一切正常。[在这里查看演示。](https://x.com/sdrzn/status/1850880547825823989)
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/ac0efa14-5c1f-4c26-a42d-9d7c56f5fadd">
+
+### “添加一个工具……”
+
+感谢 [Model Context Protocol](https://github.com/modelcontextprotocol)，Cline 可以通过自定义工具扩展他的能力。虽然你可以使用 [社区制作的服务器](https://github.com/modelcontextprotocol/servers)，但 Cline 可以创建和安装适合你特定工作流程的工具。只需让 Cline “添加一个工具”，他将处理所有事情，从创建新的 MCP 服务器到将其安装到扩展中。这些自定义工具将成为 Cline 工具包的一部分，准备在未来的任务中使用。
+
+- “添加一个获取 Jira 工单的工具”：检索工单 AC 并让 Cline 开始工作
+- “添加一个管理 AWS EC2 的工具”：检查服务器指标并上下扩展实例
+- “添加一个获取最新 PagerDuty 事件的工具”：获取详细信息并让 Cline 修复错误
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="360" src="https://github.com/user-attachments/assets/7fdf41e6-281a-4b4b-ac19-020b838b6970">
+
+### 添加上下文
+
+**`@url`：** 粘贴一个 URL 以供扩展获取并转换为 markdown，当你想给 Cline 提供最新文档时非常有用
+
+**`@problems`：** 添加工作区错误和警告（“问题”面板）以供 Cline 修复
+
+**`@file`：** 添加文件内容，这样你就不必浪费 API 请求批准读取文件（+ 输入以搜索文件）
+
+**`@folder`：** 一次添加文件夹的文件，以进一步加快你的工作流程
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/140c8606-d3bf-41b9-9a1f-4dbf0d4c90cb">
+
+### 检查点：比较和恢复
+
+当 Cline 完成任务时，扩展会在每一步拍摄你的工作区快照。你可以使用“比较”按钮查看快照和当前工作区之间的差异，并使用“恢复”按钮回滚到该点。
+
+例如，当使用本地 Web 服务器时，你可以使用“仅恢复工作区”快速测试应用程序的不同版本，然后在找到要继续构建的版本时使用“恢复任务和工作区”。这让你可以安全地探索不同的方法而不会丢失进度。
+
+<!-- 透明像素以在浮动图像后创建换行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+## 贡献
+
+要为项目做出贡献，请从我们的 [贡献指南](CONTRIBUTING.md) 开始，了解基础知识。你还可以加入我们的 [Discord](https://discord.gg/cline) 在 `#contributors` 频道与其他贡献者聊天。如果你正在寻找全职工作，请查看我们在 [招聘页面](https://cline.bot/join-us) 上的开放职位！
+
+<details>
+<summary>本地开发说明</summary>
+
+1. 克隆仓库 _(需要 [git-lfs](https://git-lfs.com/))_：
+        ```bash
+        git clone https://github.com/cline/cline.git
+        ```
+2. 在 VSCode 中打开项目：
+        ```bash
+        code cline
+        ```
+3. 安装扩展和 webview-gui 的必要依赖：
+        ```bash
+        npm run install:all
+        ```
+4. 按 `F5`（或 `运行`->`开始调试`）启动以打开一个加载了扩展的新 VSCode 窗口。（如果你在构建项目时遇到问题，可能需要安装 [esbuild problem matchers 扩展](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers)）
+
+</details>
+
+## 许可证
+
+[Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)
+

locales/zh-tw/CODE_OF_CONDUCT.md

@@ -0,0 +1,47 @@
+# 貢獻者公約行為準則
+
+## 我們的承諾
+
+為了促進一個開放和歡迎的環境，我們作為貢獻者和維護者承諾，使我們的項目和社區的參與對每個人來說都是一個無騷擾的體驗，不論年齡、體型、殘疾、種族、性別特徵、性別認同和表達、經驗水平、教育程度、社會經濟地位、國籍、個人外貌、種族、宗教或性取向。
+
+## 我們的標準
+
+有助於創造積極環境的行為示例包括：
+
+- 使用歡迎和包容的語言
+- 尊重不同的觀點和經驗
+- 優雅地接受建設性的批評
+- 專注於對社區最有利的事情
+- 對其他社區成員表示同情
+
+參與者不可接受的行為示例包括：
+
+- 使用性化語言或圖像以及不受歡迎的性注意或挑逗
+- 騷擾、侮辱/貶低性評論和個人或政治攻擊
+- 公開或私下騷擾
+- 未經明確許可發布他人的私人信息，例如物理或電子地址
+- 其他在專業環境中合理認為不適當的行為
+
+## 我們的責任
+
+項目維護者有責任澄清可接受行為的標準，並預期對任何不可接受行為的實例採取適當和公平的糾正行動。
+
+項目維護者有權利和責任刪除、編輯或拒絕與本行為準則不符的評論、提交、代碼、維基編輯、問題和其他貢獻，或暫時或永久禁止任何他們認為不適當、威脅、冒犯或有害的貢獻者。
+
+## 範圍
+
+此行為準則適用於項目空間內以及當個人代表項目或其社區時的公共空間。代表項目或社區的示例包括使用官方項目電子郵件地址、通過官方社交媒體帳戶發布或作為在線或離線活動的指定代表。項目的代表可能由項目維護者進一步定義和澄清。
+
+## 執行
+
+濫用、騷擾或其他不可接受行為的實例可以通過聯繫項目團隊 hi@cline.bot 來報告。所有投訴將被審查和調查，並將根據情況作出必要和適當的回應。項目團隊有義務對事件的報告者保密。具體執行政策的詳細信息可能會單獨發布。
+
+未能善意遵循或執行行為準則的項目維護者可能會面臨由項目領導層其他成員決定的暫時或永久後果。
+
+## 歸屬
+
+此行為準則改編自 [Contributor Covenant][homepage]，版本 1.4，可在 https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 獲得。
+
+[homepage]: https://www.contributor-covenant.org
+
+有關此行為準則的常見問題的答案，請參見 https://www.contributor-covenant.org/faq

locales/zh-tw/CONTRIBUTING.md

@@ -0,0 +1,82 @@
+# 貢獻於 Cline
+
+我們很高興您有興趣為 Cline 做出貢獻。無論您是修復錯誤、添加功能還是改進我們的文檔，每一個貢獻都讓 Cline 更加智能！為了保持我們的社區充滿活力和歡迎，所有成員必須遵守我們的[行為準則](CODE_OF_CONDUCT.md)。
+
+## 報告錯誤或問題
+
+錯誤報告有助於讓 Cline 對每個人都更好！在創建新問題之前，請[搜索現有問題](https://github.com/cline/cline/issues)以避免重複。當您準備報告錯誤時，請前往我們的[問題頁面](https://github.com/cline/cline/issues/new/choose)，您會找到一個模板來幫助您填寫相關信息。
+
+<blockquote class='warning-note'>
+    🔐 <b>重要：</b> 如果您發現安全漏洞，請使用<a href="https://github.com/cline/cline/security/advisories/new">Github 安全工具私下報告</a>。
+</blockquote>
+
+## 決定要做什麼
+
+尋找一個好的首次貢獻？查看標有["good first issue"](https://github.com/cline/cline/labels/good%20first%20issue)或["help wanted"](https://github.com/cline/cline/labels/help%20wanted)的問題。這些是專門為新貢獻者和我們希望得到幫助的領域策劃的！
+
+我們也歡迎對我們[文檔](https://github.com/cline/cline/tree/main/docs)的貢獻！無論是修正錯別字、改進現有指南還是創建新的教育內容 - 我們希望建立一個由社區驅動的資源庫，幫助每個人充分利用 Cline。您可以從深入研究 `/docs` 並尋找需要改進的領域開始。
+
+如果您計劃開發一個更大的功能，請先創建一個[功能請求](https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop)，以便我們討論它是否符合 Cline 的願景。
+
+## 開發設置
+
+1. **VS Code 擴展**
+
+    - 打開項目時，VS Code 會提示您安裝推薦的擴展
+    - 這些擴展是開發所需的 - 請接受所有安裝提示
+    - 如果您忽略了提示，可以從擴展面板手動安裝它們
+
+2. **本地開發**
+    - 運行 `npm run install:all` 安裝依賴項
+    - 運行 `npm run test` 本地運行測試
+    - 提交 PR 之前，運行 `npm run format:fix` 格式化您的代碼
+
+## 編寫和提交代碼
+
+任何人都可以為 Cline 貢獻代碼，但我們要求您遵循以下指南，以確保您的貢獻能夠順利集成：
+
+1. **保持 Pull Requests 集中**
+
+    - 將 PR 限制在單個功能或錯誤修復
+    - 將較大的更改拆分為較小的相關 PR
+    - 將更改分為邏輯提交，可以獨立審查
+
+2. **代碼質量**
+
+    - 運行 `npm run lint` 檢查代碼風格
+    - 運行 `npm run format` 自動格式化代碼
+    - 所有 PR 必須通過包括 lint 和格式化在內的 CI 檢查
+    - 提交前解決所有 ESLint 警告或錯誤
+    - 遵循 TypeScript 最佳實踐並保持類型安全
+
+3. **測試**
+
+    - 為新功能添加測試
+    - 運行 `npm test` 確保所有測試通過
+    - 如果您的更改影響現有測試，請更新它們
+    - 在適當的地方包括單元測試和集成測試
+
+4. **提交指南**
+
+    - 撰寫清晰、描述性的提交消息
+    - 使用常規提交格式（例如 "feat:"、"fix:"、"docs:"）
+    - 在提交中引用相關問題，使用 #issue-number
+
+5. **提交前**
+
+    - 將您的分支重新基於最新的 main
+    - 確保您的分支成功構建
+    - 仔細檢查所有測試是否通過
+    - 檢查您的更改是否有任何調試代碼或控制台日誌
+
+6. **Pull Request 描述**
+    - 清楚地描述您的更改內容
+    - 包括測試更改的步驟
+    - 列出任何重大更改
+    - 為 UI 更改添加截圖
+
+## 貢獻協議
+
+通過提交 pull request，您同意您的貢獻將根據與項目相同的許可證（[Apache 2.0](LICENSE)）進行許可。
+
+記住：貢獻於 Cline 不僅僅是編寫代碼 - 這是關於成為一個塑造 AI 輔助開發未來的社區的一部分。讓我們一起創造一些驚人的東西！🚀

locales/zh-tw/README.md

@@ -0,0 +1,161 @@
+# Cline – OpenRouter 上的 \#1
+
+<p align="center">
+    <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
+</p>
+
+<div align="center">
+<table>
+<tbody>
+<td align="center">
+<a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank"><strong>在 VS Marketplace 下載</strong></a>
+</td>
+<td align="center">
+<a href="https://discord.gg/cline" target="_blank"><strong>Discord</strong></a>
+</td>
+<td align="center">
+<a href="https://www.reddit.com/r/cline/" target="_blank"><strong>r/cline</strong></a>
+</td>
+<td align="center">
+<a href="https://github.com/cline/cline/discussions/categories/feature-requests?discussions_q=is%3Aopen+category%3A%22Feature+Requests%22+sort%3Atop" target="_blank"><strong>功能請求</strong></a>
+</td>
+<td align="center">
+<a href="https://cline.bot/join-us" target="_blank"><strong>我們正在招聘！</strong></a>
+</td>
+</tbody>
+</table>
+</div>
+
+認識 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 的潛力。
+
+1. 輸入你的任務並添加圖像，將模型轉換為功能應用程序或通過截圖修復錯誤。
+2. Cline 首先分析你的文件結構和源代碼 AST，運行正則表達式搜索，並閱讀相關文件以了解現有項目。通過仔細管理添加到上下文中的信息，Cline 即使在大型複雜項目中也能提供有價值的幫助，而不會使上下文窗口過載。
+3. 一旦 Cline 獲得所需信息，他可以：
+        - 創建和編輯文件 + 監控 linter/編譯器錯誤，從而主動修復諸如缺少導入和語法錯誤等問題。
+        - 直接在你的終端中執行命令並監控其輸出，從而在編輯文件後對開發服務器問題做出反應。
+        - 對於 Web 開發任務，Cline 可以在無頭瀏覽器中啟動網站，點擊、輸入、滾動並捕獲截圖和控制台日誌，從而修復運行時錯誤和視覺錯誤。
+4. 當任務完成時，Cline 將通過終端命令如 `open -a "Google Chrome" index.html` 向你展示結果，你可以通過點擊按鈕運行該命令。
+
+> [!提示]
+> 使用 `CMD/CTRL + Shift + P` 快捷鍵打開命令面板並輸入 "Cline: Open In New Tab" 將擴展作為標籤在編輯器中打開。這讓你可以與文件資源管理器並排使用 Cline，更清楚地看到他如何改變你的工作空間。
+
+---
+
+<img align="right" width="340" src="https://github.com/user-attachments/assets/3cf21e04-7ce9-4d22-a7b9-ba2c595e88a4">
+
+### 使用任何 API 和模型
+
+Cline 支持 OpenRouter、Anthropic、OpenAI、Google Gemini、AWS Bedrock、Azure 和 GCP Vertex 等 API 提供商。你還可以配置任何兼容 OpenAI 的 API，或通過 LM Studio/Ollama 使用本地模型。如果你使用 OpenRouter，擴展會獲取他們的最新模型列表，讓你在新模型可用時立即使用。
+
+擴展還會跟蹤整個任務循環和單個請求的總令牌和 API 使用成本，讓你在每一步都了解支出情況。
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/81be79a8-1fdb-4028-9129-5fe055e01e76">
+
+### 在終端中運行命令
+
+感謝 VSCode v1.93 中的新 [終端 shell 集成更新](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api)，Cline 可以直接在你的終端中執行命令並接收輸出。這使他能夠執行廣泛的任務，從安裝包和運行構建腳本到部署應用程序、管理數據庫和執行測試，同時適應你的開發環境和工具鏈以正確完成工作。
+
+對於長時間運行的進程如開發服務器，使用“在運行時繼續”按鈕讓 Cline 在命令後台運行時繼續任務。當 Cline 工作時，他會在過程中收到任何新的終端輸出通知，讓他對可能出現的問題做出反應，例如編輯文件時的編譯時錯誤。
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="400" src="https://github.com/user-attachments/assets/c5977833-d9b8-491e-90f9-05f9cd38c588">
+
+### 創建和編輯文件
+
+Cline 可以直接在你的編輯器中創建和編輯文件，向你展示更改的差異視圖。你可以直接在差異視圖編輯器中編輯或恢復 Cline 的更改，或在聊天中提供反饋，直到你對結果滿意。Cline 還會監控 linter/編譯器錯誤（缺少導入、語法錯誤等），以便他在過程中自行修復出現的問題。
+
+Cline 所做的所有更改都會記錄在你的文件時間軸中，提供了一種簡單的方法來跟蹤和恢復修改（如果需要）。
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="370" src="https://github.com/user-attachments/assets/bc2e85ba-dfeb-4fe6-9942-7cfc4703cbe5">
+
+### 使用瀏覽器
+
+借助 Claude 3.5 Sonnet 的新 [計算機使用](https://www.anthropic.com/news/3-5-models-and-computer-use) 功能，Cline 可以啟動瀏覽器，點擊元素，輸入文本和滾動，在每一步捕獲截圖和控制台日誌。這允許進行交互式調試、端到端測試，甚至是一般的網頁使用！這使他能夠自主修復視覺錯誤和運行時問題，而無需你親自操作和複製粘貼錯誤日誌。
+
+試試讓 Cline “測試應用程序”，看看他如何運行 `npm run dev` 命令，在瀏覽器中啟動你本地運行的開發服務器，並執行一系列測試以確認一切正常。[在這裡查看演示。](https://x.com/sdrzn/status/1850880547825823989)
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/ac0efa14-5c1f-4c26-a42d-9d7c56f5fadd">
+
+### “添加一個工具……”
+
+感謝 [Model Context Protocol](https://github.com/modelcontextprotocol)，Cline 可以通過自定義工具擴展他的能力。雖然你可以使用 [社區製作的服務器](https://github.com/modelcontextprotocol/servers)，但 Cline 可以創建和安裝適合你特定工作流程的工具。只需讓 Cline “添加一個工具”，他將處理所有事情，從創建新的 MCP 服務器到將其安裝到擴展中。這些自定義工具將成為 Cline 工具包的一部分，準備在未來的任務中使用。
+
+- “添加一個獲取 Jira 工單的工具”：檢索工單 AC 並讓 Cline 開始工作
+- “添加一個管理 AWS EC2 的工具”：檢查服務器指標並上下擴展實例
+- “添加一個獲取最新 PagerDuty 事件的工具”：獲取詳細信息並讓 Cline 修復錯誤
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="left" width="360" src="https://github.com/user-attachments/assets/7fdf41e6-281a-4b4b-ac19-020b838b6970">
+
+### 添加上下文
+
+**`@url`：** 粘貼一個 URL 以供擴展獲取並轉換為 markdown，當你想給 Cline 提供最新文檔時非常有用
+
+**`@problems`：** 添加工作區錯誤和警告（“問題”面板）以供 Cline 修復
+
+**`@file`：** 添加文件內容，這樣你就不必浪費 API 請求批准讀取文件（+ 輸入以搜索文件）
+
+**`@folder`：** 一次添加文件夾的文件，以進一步加快你的工作流程
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+<img align="right" width="350" src="https://github.com/user-attachments/assets/140c8606-d3bf-41b9-9a1f-4dbf0d4c90cb">
+
+### 檢查點：比較和恢復
+
+當 Cline 完成任務時，擴展會在每一步拍攝你的工作區快照。你可以使用“比較”按鈕查看快照和當前工作區之間的差異，並使用“恢復”按鈕回滾到該點。
+
+例如，當使用本地 Web 服務器時，你可以使用“僅恢復工作區”快速測試應用程序的不同版本，然後在找到要繼續構建的版本時使用“恢復任務和工作區”。這讓你可以安全地探索不同的方法而不會丟失進度。
+
+<!-- 透明像素以在浮動圖像後創建換行 -->
+
+<img width="2000" height="0" src="https://github.com/user-attachments/assets/ee14e6f7-20b8-4391-9091-8e8e25561929"><br>
+
+## 貢獻
+
+要為項目做出貢獻，請從我們的 [貢獻指南](CONTRIBUTING.md) 開始，了解基礎知識。你還可以加入我們的 [Discord](https://discord.gg/cline) 在 `#contributors` 頻道與其他貢獻者聊天。如果你正在尋找全職工作，請查看我們在 [招聘頁面](https://cline.bot/join-us) 上的開放職位！
+
+<details>
+<summary>本地開發說明</summary>
+
+1. 克隆倉庫 _(需要 [git-lfs](https://git-lfs.com/))_：
+        ```bash
+        git clone https://github.com/cline/cline.git
+        ```
+2. 在 VSCode 中打開項目：
+        ```bash
+        code cline
+        ```
+3. 安裝擴展和 webview-gui 的必要依賴：
+        ```bash
+        npm run install:all
+        ```
+4. 按 `F5`（或 `運行`->`開始調試`）啟動以打開一個加載了擴展的新 VSCode 窗口。（如果你在構建項目時遇到問題，可能需要安裝 [esbuild problem matchers 擴展](https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers)）
+
+</details>
+
+## 許可證
+
+[Apache 2.0 © 2024 Cline Bot Inc.](./LICENSE)

package.json

@@ -2,7 +2,7 @@
 	"name": "claude-dev",
 	"displayName": "Cline",
 	"description": "Autonomous coding agent right in your IDE, capable of creating/editing files, running commands, using the browser, and more with your permission every step of the way.",
-	"version": "3.2.2",
+	"version": "3.2.7",
 	"icon": "assets/icons/icon.png",
 	"galleryBanner": {
 		"color": "#617A91",
@@ -141,6 +141,26 @@
 						}
 					},
 					"description": "Settings for VSCode Language Model API"
+				},
+				"cline.mcp.mode": {
+					"type": "string",
+					"enum": [
+						"full",
+						"server-use-only",
+						"off"
+					],
+					"enumDescriptions": [
+						"Enable all MCP functionality (server use and build instructions)",
+						"Enable MCP server use only (excludes instructions about building MCP servers)",
+						"Disable all MCP functionality"
+					],
+					"default": "full",
+					"description": "Controls MCP inclusion in prompts, reduces token usage if you only need access to certain functionality."
+				},
+				"cline.enableCheckpoints": {
+					"type": "boolean",
+					"default": true,
+					"description": "Enables extension to save checkpoints of workspace throughout the task."
 				}
 			}
 		}
@@ -164,9 +184,14 @@
 		"start:webview": "cd webview-ui && npm run start",
 		"build:webview": "cd webview-ui && npm run build",
 		"test:webview": "cd webview-ui && npm run test",
-		"publish:marketplace": "vsce publish && ovsx publish"
+		"publish:marketplace": "vsce publish && ovsx publish",
+		"publish:marketplace:prerelease": "vsce publish --pre-release && ovsx publish --pre-release",
+		"prepare": "husky",
+		"changeset": "changeset"
 	},
 	"devDependencies": {
+		"@changesets/cli": "^2.27.12",
+		"@types/chai": "^5.0.1",
 		"@types/diff": "^5.2.1",
 		"@types/mocha": "^10.0.7",
 		"@types/node": "20.x",
@@ -176,8 +201,10 @@
 		"@typescript-eslint/parser": "^7.11.0",
 		"@vscode/test-cli": "^0.0.9",
 		"@vscode/test-electron": "^2.4.0",
+		"chai": "^4.3.10",
 		"esbuild": "^0.21.5",
 		"eslint": "^8.57.0",
+		"husky": "^9.1.7",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^3.3.3",
 		"should": "^13.2.3",
@@ -204,6 +231,7 @@
 		"diff": "^5.2.0",
 		"execa": "^9.5.2",
 		"fast-deep-equal": "^3.1.3",
+		"firebase": "^11.2.0",
 		"get-folder-size": "^5.0.0",
 		"globby": "^14.0.2",
 		"isbinaryfile": "^5.0.2",

src/api/providers/deepseek.ts

@@ -18,13 +18,15 @@ export class DeepSeekHandler implements ApiHandler {
 	}
 
 	async *createMessage(systemPrompt: string, messages: Anthropic.Messages.MessageParam[]): ApiStream {
+		const model = this.getModel()
 		const stream = await this.client.chat.completions.create({
-			model: this.getModel().id,
-			max_completion_tokens: this.getModel().info.maxTokens,
-			temperature: 0,
+			model: model.id,
+			max_completion_tokens: model.info.maxTokens,
 			messages: [{ role: "system", content: systemPrompt }, ...convertToOpenAiMessages(messages)],
 			stream: true,
 			stream_options: { include_usage: true },
+			// Only set temperature for non-reasoner models
+			...(model.id === "deepseek-reasoner" ? {} : { temperature: 0 }),
 		})
 
 		for await (const chunk of stream) {

src/core/Cline.ts

@@ -1259,10 +1259,16 @@ export class Cline {
 
 				// This is the most reliable way to know when we're close to hitting the context window.
 				if (totalTokens >= maxAllowedSize) {
+					// Since the user may switch between models with different context windows, truncating half may not be enough (ie if switching from claude 200k to deepseek 64k, half truncation will only remove 100k tokens, but we need to remove much more)
+					// So if totalTokens/2 is greater than maxAllowedSize, we truncate 3/4 instead of 1/2
+					// FIXME: truncating the conversation in a way that is optimal for prompt caching AND takes into account multi-context window complexity is something we need to improve
+					const keep = totalTokens / 2 > maxAllowedSize ? "quarter" : "half"
+
 					// NOTE: it's okay that we overwriteConversationHistory in resume task since we're only ever removing the last user message and not anything in the middle which would affect this range
 					this.conversationHistoryDeletedRange = getNextTruncationRange(
 						this.apiConversationHistory,
 						this.conversationHistoryDeletedRange,
+						keep,
 					)
 					await this.saveClineMessages() // saves task history item which we use to keep track of conversation history deleted range
 					// await this.overwriteApiConversationHistory(truncatedMessages)
@@ -1589,6 +1595,13 @@ export class Cline {
 									diff = fixModelHtmlEscaping(diff)
 									diff = removeInvalidChars(diff)
 								}
+
+								// open the editor if not done already.  This is to fix diff error when model provides correct search-replace text but Cline throws error
+								// because file is not open.
+								if (!this.diffViewProvider.isEditing) {
+									await this.diffViewProvider.open(relPath)
+								}
+
 								try {
 									newContent = await constructNewFileContent(
 										diff,

src/core/prompts/system.ts

@@ -177,6 +177,9 @@ Usage:
 		: ""
 }
 
+${
+	mcpHub.getMode() !== "off"
+		? `
 ## use_mcp_tool
 Description: Request to use a tool provided by a connected MCP server. Each MCP server can provide multiple tools with different capabilities. Tools have defined input schemas that specify required and optional parameters.
 Parameters:
@@ -205,6 +208,9 @@ Usage:
 <server_name>server name here</server_name>
 <uri>resource URI here</uri>
 </access_mcp_resource>
+`
+		: ""
+}
 
 ## ask_followup_question
 Description: Ask the user a question to gather additional information needed to complete the task. This tool should be used when you encounter ambiguities, need clarification, or require more details to proceed effectively. It allows for interactive problem-solving by enabling direct communication with the user. Use this tool judiciously to maintain a balance between gathering necessary information and avoiding excessive back-and-forth.
@@ -247,27 +253,7 @@ Usage:
 <requires_approval>false</requires_approval>
 </execute_command>
 
-## Example 2: Requesting to use an MCP tool
-
-<use_mcp_tool>
-<server_name>weather-server</server_name>
-<tool_name>get_forecast</tool_name>
-<arguments>
-{
-  "city": "San Francisco",
-  "days": 5
-}
-</arguments>
-</use_mcp_tool>
-
-## Example 3: Requesting to access an MCP resource
-
-<access_mcp_resource>
-<server_name>weather-server</server_name>
-<uri>weather://san-francisco/current</uri>
-</access_mcp_resource>
-
-## Example 4: Requesting to create a new file
+## Example 2: Requesting to create a new file
 
 <write_to_file>
 <path>src/frontend-config.json</path>
@@ -289,7 +275,7 @@ Usage:
 </content>
 </write_to_file>
 
-## Example 6: Requesting to make targeted edits to a file
+## Example 3: Requesting to make targeted edits to a file
 
 <replace_in_file>
 <path>src/components/App.tsx</path>
@@ -323,6 +309,31 @@ return (
 >>>>>>> REPLACE
 </diff>
 </replace_in_file>
+${
+	mcpHub.getMode() !== "off"
+		? `
+
+## Example 4: Requesting to use an MCP tool
+
+<use_mcp_tool>
+<server_name>weather-server</server_name>
+<tool_name>get_forecast</tool_name>
+<arguments>
+{
+  "city": "San Francisco",
+  "days": 5
+}
+</arguments>
+</use_mcp_tool>
+
+## Example 5: Requesting to access an MCP resource
+
+<access_mcp_resource>
+<server_name>weather-server</server_name>
+<uri>weather://san-francisco/current</uri>
+</access_mcp_resource>`
+		: ""
+}
 
 # Tool Use Guidelines
 
@@ -345,6 +356,9 @@ It is crucial to proceed step-by-step, waiting for the user's message after each
 
 By waiting for and carefully considering the user's response after each tool use, you can react accordingly and make informed decisions about how to proceed with the task. This iterative process helps ensure the overall success and accuracy of your work.
 
+${
+	mcpHub.getMode() !== "off"
+		? `
 ====
 
 MCP SERVERS
@@ -391,8 +405,13 @@ ${
 				})
 				.join("\n\n")}`
 		: "(No MCP servers currently connected)"
+}`
+		: ""
 }
 
+${
+	mcpHub.getMode() === "full"
+		? `
 ## Creating an MCP Server
 
 The user may ask you something along the lines of "add a tool" that does some function, in other words to create an MCP server that provides tools and resources that may connect to external APIs for example. You have the ability to create an MCP server and add it to a configuration file that will then expose the tools and resources for you to use with \`use_mcp_tool\` and \`access_mcp_resource\`.
@@ -737,12 +756,13 @@ IMPORTANT: Regardless of what else you see in the MCP settings file, you must de
 
 ## Editing MCP Servers
 
-The user may ask to add tools or resources that may make sense to add to an existing MCP server (listed under 'Connected MCP Servers' above: ${
-	mcpHub
-		.getServers()
-		.map((server) => server.name)
-		.join(", ") || "(None running currently)"
-}, e.g. if it would use the same API. This would be possible if you can locate the MCP server repository on the user's system by looking at the server arguments for a filepath. You might then use list_files and read_file to explore the files in the repository, and use replace_in_file to make changes to the files.
+The user may ask to add tools or resources that may make sense to add to an existing MCP server (listed under 'Connected MCP Servers' below: ${
+				mcpHub
+					.getServers()
+					.filter((server) => server.status === "connected")
+					.map((server) => server.name)
+					.join(", ") || "(None running currently)"
+			}, e.g. if it would use the same API. This would be possible if you can locate the MCP server repository on the user's system by looking at the server arguments for a filepath. You might then use list_files and read_file to explore the files in the repository, and use replace_in_file to make changes to the files.
 
 However some MCP servers may be running from installed packages rather than a local repository, in which case it may make more sense to create a new MCP server.
 
@@ -751,6 +771,9 @@ However some MCP servers may be running from installed packages rather than a lo
 The user may not always request the use or creation of MCP servers. Instead, they might provide tasks that can be completed with existing tools. While using the MCP SDK to extend your capabilities can be useful, it's important to understand that this is just one specialized type of task you can accomplish. You should only implement MCP servers when the user explicitly requests it (e.g., "add a tool that...").
 
 Remember: The MCP documentation and example provided above are to help you understand and work with existing MCP servers or create new ones when requested by the user. You already have access to tools and capabilities that can be used to accomplish a wide range of tasks.
+`
+		: ""
+}
 
 ====
 
@@ -863,7 +886,13 @@ CAPABILITIES
 		? "\n- You can use the browser_action tool to interact with websites (including html files and locally running development servers) through a Puppeteer-controlled browser when you feel it is necessary in accomplishing the user's task. This tool is particularly useful for web development tasks as it allows you to launch a browser, navigate to pages, interact with elements through clicks and keyboard input, and capture the results through screenshots and console logs. This tool may be useful at key stages of web development tasks-such as after implementing new features, making substantial changes, when troubleshooting issues, or to verify the result of your work. You can analyze the provided screenshots to ensure correct rendering or identify errors, and review console logs for runtime issues.\n	- For example, if asked to add a component to a react website, you might create the necessary files, use execute_command to run the site locally, then use browser_action to launch the browser, navigate to the local server, and verify the component renders & functions correctly before closing the browser."
 		: ""
 }
+${
+	mcpHub.getMode() !== "off"
+		? `
 - You have access to MCP servers that may provide additional tools and resources. Each server may provide different capabilities that you can use to accomplish tasks more effectively.
+`
+		: ""
+}
 
 ====
 
@@ -884,7 +913,7 @@ RULES
 - The user may provide a file's contents directly in their message, in which case you shouldn't use the read_file tool to get the file contents again since you already have it.
 - Your goal is to try to accomplish the user's task, NOT engage in a back and forth conversation.${
 	supportsComputerUse
-		? '\n- The user may ask generic non-development tasks, such as "what\'s the latest news" or "look up the weather in San Diego", in which case you might use the browser_action tool to complete the task if it makes sense to do so, rather than trying to create a website or using curl to answer the question. However, if an available MCP server tool or resource can be used instead, you should prefer to use it over browser_action.'
+		? `\n- The user may ask generic non-development tasks, such as "what\'s the latest news" or "look up the weather in San Diego", in which case you might use the browser_action tool to complete the task if it makes sense to do so, rather than trying to create a website or using curl to answer the question.${mcpHub.getMode() !== "off" ? "However, if an available MCP server tool or resource can be used instead, you should prefer to use it over browser_action." : ""}`
 		: ""
 }
 - NEVER end attempt_completion result with a question or request to engage in further conversation! Formulate the end of your result in a way that is final and does not require further input from the user.
@@ -892,7 +921,6 @@ RULES
 - When presented with images, utilize your vision capabilities to thoroughly examine them and extract meaningful information. Incorporate these insights into your thought process as you accomplish the user's task.
 - At the end of each user message, you will automatically receive environment_details. This information is not written by the user themselves, but is auto-generated to provide potentially relevant context about the project structure and environment. While this information can be valuable for understanding the project context, do not treat it as a direct part of the user's request or response. Use it to inform your actions and decisions, but don't assume the user is explicitly asking about or referring to this information unless they clearly do so in their message. When using environment_details, explain your actions clearly to ensure the user understands, as they may not be aware of these details.
 - Before executing commands, check the "Actively Running Terminals" section in environment_details. If present, consider how these active processes might impact your task. For example, if a local development server is already running, you wouldn't need to start it again. If no active terminals are listed, proceed with command execution as normal.
-- MCP operations should be used one at a time, similar to other tool usage. Wait for confirmation of success before proceeding with additional operations.
 - When using the replace_in_file tool, you must include complete lines in your SEARCH blocks, not partial lines. The system requires exact line matches and cannot match partial lines. For example, if you want to match a line containing "const x = 5;", your SEARCH block must include the entire line, not just "x = 5" or other fragments.
 - When using the replace_in_file tool, if you use multiple SEARCH/REPLACE blocks, list them in the order they appear in the file. For example if you need to make changes to both line 10 and line 50, first include the SEARCH/REPLACE block for line 10, followed by the SEARCH/REPLACE block for line 50.
 - It is critical you wait for the user's response after each tool use, in order to confirm the success of the tool use. For example, if asked to make a todo app, you would create a file, wait for the user's response it was created successfully, then create another file if needed, wait for the user's response it was created successfully, etc.${
@@ -900,6 +928,13 @@ RULES
 		? " Then if you want to test your work, you might use browser_action to launch the site, wait for the user's response confirming the site was launched along with a screenshot, then perhaps e.g., click a button to test functionality if needed, wait for the user's response confirming the button was clicked along with a screenshot of the new state, before finally closing the browser."
 		: ""
 }
+${
+	mcpHub.getMode() !== "off"
+		? `
+- MCP operations should be used one at a time, similar to other tool usage. Wait for confirmation of success before proceeding with additional operations.
+`
+		: ""
+}
 
 ====
 

src/core/sliding-window/index.ts

@@ -55,13 +55,21 @@ truncated = getTruncatedMessages(messages, deletedRange);
 export function getNextTruncationRange(
 	messages: Anthropic.Messages.MessageParam[],
 	currentDeletedRange: [number, number] | undefined = undefined,
+	keep: "half" | "quarter" = "half",
 ): [number, number] {
 	// Since we always keep the first message, currentDeletedRange[0] will always be 1 (for now until we have a smarter truncation algorithm)
 	const rangeStartIndex = 1
 	const startOfRest = currentDeletedRange ? currentDeletedRange[1] + 1 : 1
 
-	// Remove half of user-assistant pairs
-	const messagesToRemove = Math.floor((messages.length - startOfRest) / 4) * 2 // Keep even number
+	let messagesToRemove: number
+	if (keep === "half") {
+		// Remove half of user-assistant pairs
+		messagesToRemove = Math.floor((messages.length - startOfRest) / 4) * 2 // Keep even number
+	} else {
+		// Remove 3/4 of user-assistant pairs
+		messagesToRemove = Math.floor((messages.length - startOfRest) / 8) * 3 * 2
+	}
+
 	let rangeEndIndex = startOfRest + messagesToRemove - 1
 
 	// Make sure the last message being removed is a user message, so that the next message after the initial task message is an assistant message. This preservers the user-assistant-user-assistant structure.

src/core/webview/ClineProvider.ts

@@ -2,6 +2,8 @@ import { Anthropic } from "@anthropic-ai/sdk"
 import axios from "axios"
 import fs from "fs/promises"
 import os from "os"
+import crypto from "crypto"
+import { execa } from "execa"
 import pWaitFor from "p-wait-for"
 import * as path from "path"
 import * as vscode from "vscode"
@@ -12,6 +14,7 @@ import { selectImages } from "../../integrations/misc/process-images"
 import { getTheme } from "../../integrations/theme/getTheme"
 import WorkspaceTracker from "../../integrations/workspace/WorkspaceTracker"
 import { McpHub } from "../../services/mcp/McpHub"
+import { FirebaseAuthManager, UserInfo } from "../../services/auth/FirebaseAuthManager"
 import { ApiProvider, ModelInfo } from "../../shared/api"
 import { findLast } from "../../shared/array"
 import { ExtensionMessage, ExtensionState } from "../../shared/ExtensionMessage"
@@ -43,6 +46,8 @@ type SecretKey =
 	| "openAiNativeApiKey"
 	| "deepSeekApiKey"
 	| "mistralApiKey"
+	| "authToken"
+	| "authNonce"
 type GlobalStateKey =
 	| "apiProvider"
 	| "apiModelId"
@@ -67,6 +72,10 @@ type GlobalStateKey =
 	| "browserSettings"
 	| "chatSettings"
 	| "vsCodeLmModelSelector"
+	| "userInfo"
+	| "previousModeApiProvider"
+	| "previousModeModelId"
+	| "previousModeModelInfo"
 
 export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
@@ -85,6 +94,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	private cline?: Cline
 	private workspaceTracker?: WorkspaceTracker
 	mcpHub?: McpHub
+	private authManager: FirebaseAuthManager
 	private latestAnnouncementId = "jan-20-2025" // update to some unique identifier when we add a new announcement
 
 	constructor(
@@ -95,6 +105,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		ClineProvider.activeInstances.add(this)
 		this.workspaceTracker = new WorkspaceTracker(this)
 		this.mcpHub = new McpHub(this)
+		this.authManager = new FirebaseAuthManager(this)
 	}
 
 	/*
@@ -120,10 +131,29 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		this.workspaceTracker = undefined
 		this.mcpHub?.dispose()
 		this.mcpHub = undefined
+		this.authManager.dispose()
 		this.outputChannel.appendLine("Disposed all disposables")
 		ClineProvider.activeInstances.delete(this)
 	}
 
+	// Auth methods
+	async handleSignOut() {
+		try {
+			await this.authManager.signOut()
+			vscode.window.showInformationMessage("Successfully logged out of Cline")
+		} catch (error) {
+			vscode.window.showErrorMessage("Logout failed")
+		}
+	}
+
+	async setAuthToken(token?: string) {
+		await this.storeSecret("authToken", token)
+	}
+
+	async setUserInfo(info?: { displayName: string | null; email: string | null; photoURL: string | null }) {
+		await this.updateGlobalState("userInfo", info)
+	}
+
 	public static getVisibleInstance(): ClineProvider | undefined {
 		return findLast(Array.from(this.activeInstances), (instance) => instance.view?.visible === true)
 	}
@@ -313,7 +343,7 @@ 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} data:; script-src 'nonce-${nonce}';">
+            <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" />
             <title>Cline</title>
@@ -471,6 +501,71 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					case "chatSettings":
 						if (message.chatSettings) {
 							const didSwitchToActMode = message.chatSettings.mode === "act"
+
+							// Get previous model info that we will revert to after saving current mode api info
+							const {
+								apiConfiguration,
+								previousModeApiProvider: newApiProvider,
+								previousModeModelId: newModelId,
+								previousModeModelInfo: newModelInfo,
+							} = await this.getState()
+
+							// Save the last model used in this mode
+							await this.updateGlobalState("previousModeApiProvider", apiConfiguration.apiProvider)
+							switch (apiConfiguration.apiProvider) {
+								case "anthropic":
+								case "bedrock":
+								case "vertex":
+								case "gemini":
+									await this.updateGlobalState("previousModeModelId", apiConfiguration.apiModelId)
+									break
+								case "openrouter":
+									await this.updateGlobalState("previousModeModelId", apiConfiguration.openRouterModelId)
+									await this.updateGlobalState("previousModeModelInfo", apiConfiguration.openRouterModelInfo)
+									break
+								case "vscode-lm":
+									await this.updateGlobalState("previousModeModelId", apiConfiguration.vsCodeLmModelSelector)
+									break
+								case "openai":
+									await this.updateGlobalState("previousModeModelId", apiConfiguration.openAiModelId)
+									break
+								case "ollama":
+									await this.updateGlobalState("previousModeModelId", apiConfiguration.ollamaModelId)
+									break
+								case "lmstudio":
+									await this.updateGlobalState("previousModeModelId", apiConfiguration.lmStudioModelId)
+									break
+							}
+
+							// Restore the model used in previous mode
+							if (newApiProvider && newModelId) {
+								await this.updateGlobalState("apiProvider", newApiProvider)
+								switch (newApiProvider) {
+									case "anthropic":
+									case "bedrock":
+									case "vertex":
+									case "gemini":
+										await this.updateGlobalState("apiModelId", newModelId)
+										break
+									case "openrouter":
+										await this.updateGlobalState("openRouterModelId", newModelId)
+										await this.updateGlobalState("openRouterModelInfo", newModelInfo)
+										break
+									case "vscode-lm":
+										await this.updateGlobalState("vsCodeLmModelSelector", newModelId)
+										break
+									case "openai":
+										await this.updateGlobalState("openAiModelId", newModelId)
+										break
+									case "ollama":
+										await this.updateGlobalState("ollamaModelId", newModelId)
+										break
+									case "lmstudio":
+										await this.updateGlobalState("lmStudioModelId", newModelId)
+										break
+								}
+							}
+
 							await this.updateGlobalState("chatSettings", message.chatSettings)
 							await this.postStateToWebview()
 							if (this.cline) {
@@ -552,6 +647,14 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					case "refreshOpenRouterModels":
 						await this.refreshOpenRouterModels()
 						break
+					case "refreshOpenAiModels":
+						const { apiConfiguration } = await this.getState()
+						const openAiModels = await this.getOpenAiModels(
+							apiConfiguration.openAiBaseUrl,
+							apiConfiguration.openAiApiKey,
+						)
+						this.postMessageToWebview({ type: "openAiModels", openAiModels })
+						break
 					case "openImage":
 						openImage(message.text!)
 						break
@@ -594,6 +697,30 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					case "getLatestState":
 						await this.postStateToWebview()
 						break
+					case "subscribeEmail":
+						this.subscribeEmail(message.text)
+						break
+					case "accountLoginClicked": {
+						// Generate nonce for state validation
+						const nonce = crypto.randomBytes(32).toString("hex")
+						await this.storeSecret("authNonce", nonce)
+
+						// Open browser for authentication with state param
+						console.log("Login button clicked in account page")
+						console.log("Opening auth page with state param")
+
+						const uriScheme = vscode.env.uriScheme
+
+						const authUrl = vscode.Uri.parse(
+							`https://app.cline.bot/auth?state=${encodeURIComponent(nonce)}&callback_url=${encodeURIComponent(`${uriScheme || "vscode"}://saoudrizwan.claude-dev/auth`)}`,
+						)
+						vscode.env.openExternal(authUrl)
+						break
+					}
+					case "accountLogoutClicked": {
+						await this.handleSignOut()
+						break
+					}
 					case "openMcpSettings": {
 						const mcpSettingsFilePath = await this.mcpHub?.getMcpSettingsFilePath()
 						if (mcpSettingsFilePath) {
@@ -625,6 +752,14 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						}
 						break
 					}
+					case "openExtensionSettings": {
+						const settingsFilter = message.text || ""
+						await vscode.commands.executeCommand(
+							"workbench.action.openSettings",
+							`@ext:saoudrizwan.claude-dev ${settingsFilter}`.trim(), // trim whitespace if no settings filter
+						)
+						break
+					}
 					// Add more switch case statements here as more webview message commands
 					// are created within the webview context (i.e. inside media/main.js)
 				}
@@ -634,6 +769,36 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		)
 	}
 
+	async subscribeEmail(email?: string) {
+		if (!email) {
+			return
+		}
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+		if (!emailRegex.test(email)) {
+			vscode.window.showErrorMessage("Please enter a valid email address")
+			return
+		}
+		console.log("Subscribing email:", email)
+		this.postMessageToWebview({ type: "emailSubscribed" })
+		// Currently ignoring errors to this endpoint, but after accounts we'll remove this anyways
+		try {
+			const response = await axios.post(
+				"https://app.cline.bot/api/mailing-list",
+				{
+					email: email,
+				},
+				{
+					headers: {
+						"Content-Type": "application/json",
+					},
+				},
+			)
+			console.log("Email subscribed successfully. Response:", response.data)
+		} catch (error) {
+			console.error("Failed to subscribe email:", error)
+		}
+	}
+
 	async cancelTask() {
 		if (this.cline) {
 			const { historyItem } = await this.getTaskWithId(this.cline.taskId)
@@ -674,8 +839,28 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 	// MCP
 
+	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()
+			} 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)
+		}
+	}
+
 	async ensureMcpServersDirectoryExists(): Promise<string> {
-		const mcpServersDir = path.join(os.homedir(), "Documents", "Cline", "MCP")
+		const userDocumentsPath = await this.getDocumentsPath()
+		const mcpServersDir = path.join(userDocumentsPath, "Cline", "MCP")
 		try {
 			await fs.mkdir(mcpServersDir, { recursive: true })
 		} catch (error) {
@@ -740,6 +925,58 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		}
 	}
 
+	// Auth
+
+	public async validateAuthState(state: string | null): Promise<boolean> {
+		const storedNonce = await this.getSecret("authNonce")
+		if (!state || state !== storedNonce) {
+			return false
+		}
+		await this.storeSecret("authNonce", undefined) // Clear after use
+		return true
+	}
+
+	async handleAuthCallback(token: string) {
+		try {
+			// First sign in with Firebase to trigger auth state change
+			await this.authManager.signInWithCustomToken(token)
+
+			// Then store the token securely
+			await this.storeSecret("authToken", token)
+			await this.postStateToWebview()
+			vscode.window.showInformationMessage("Successfully logged in to Cline")
+		} catch (error) {
+			console.error("Failed to handle auth callback:", error)
+			vscode.window.showErrorMessage("Failed to log in to Cline")
+		}
+	}
+
+	// OpenAi
+
+	async getOpenAiModels(baseUrl?: string, apiKey?: string) {
+		try {
+			if (!baseUrl) {
+				return []
+			}
+
+			if (!URL.canParse(baseUrl)) {
+				return []
+			}
+
+			const config: Record<string, any> = {}
+			if (apiKey) {
+				config["headers"] = { Authorization: `Bearer ${apiKey}` }
+			}
+
+			const response = await axios.get(`${baseUrl}/models`, config)
+			const modelsArray = response.data?.data?.map((model: any) => model.id) || []
+			const models = [...new Set<string>(modelsArray)]
+			return models
+		} catch (error) {
+			return []
+		}
+	}
+
 	// OpenRouter
 
 	async handleOpenRouterCallback(code: string) {
@@ -1013,7 +1250,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			autoApprovalSettings,
 			browserSettings,
 			chatSettings,
+			userInfo,
+			authToken,
 		} = await this.getState()
+
 		return {
 			version: this.context.extension?.packageJSON?.version ?? "",
 			apiConfiguration,
@@ -1027,6 +1267,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			autoApprovalSettings,
 			browserSettings,
 			chatSettings,
+			isLoggedIn: !!authToken,
+			userInfo,
 		}
 	}
 
@@ -1116,6 +1358,11 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			browserSettings,
 			chatSettings,
 			vsCodeLmModelSelector,
+			userInfo,
+			authToken,
+			previousModeApiProvider,
+			previousModeModelId,
+			previousModeModelInfo,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1150,6 +1397,11 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("browserSettings") as Promise<BrowserSettings | undefined>,
 			this.getGlobalState("chatSettings") as Promise<ChatSettings | undefined>,
 			this.getGlobalState("vsCodeLmModelSelector") as Promise<vscode.LanguageModelChatSelector | undefined>,
+			this.getGlobalState("userInfo") as Promise<UserInfo | undefined>,
+			this.getSecret("authToken") as Promise<string | undefined>,
+			this.getGlobalState("previousModeApiProvider") as Promise<ApiProvider | undefined>,
+			this.getGlobalState("previousModeModelId") as Promise<string | undefined>,
+			this.getGlobalState("previousModeModelInfo") as Promise<ModelInfo | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -1202,6 +1454,11 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			autoApprovalSettings: autoApprovalSettings || DEFAULT_AUTO_APPROVAL_SETTINGS, // default value can be 0 or empty string
 			browserSettings: browserSettings || DEFAULT_BROWSER_SETTINGS,
 			chatSettings: chatSettings || DEFAULT_CHAT_SETTINGS,
+			userInfo,
+			authToken,
+			previousModeApiProvider,
+			previousModeModelId,
+			previousModeModelInfo,
 		}
 	}
 
@@ -1257,7 +1514,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		}
 	}
 
-	private async getSecret(key: SecretKey) {
+	async getSecret(key: SecretKey) {
 		return await this.context.secrets.get(key)
 	}
 
@@ -1279,6 +1536,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			"openAiNativeApiKey",
 			"deepSeekApiKey",
 			"mistralApiKey",
+			"authToken",
 		]
 		for (const key of secretKeys) {
 			await this.storeSecret(key, undefined)

src/extension.ts

@@ -3,6 +3,7 @@
 import delay from "delay"
 import * as vscode from "vscode"
 import { ClineProvider } from "./core/webview/ClineProvider"
+import { Logger } from "./services/logging/Logger"
 import { createClineAPI } from "./exports"
 import "./utils/path" // necessary to have access to String.prototype.toPosix
 import { DIFF_VIEW_URI_SCHEME } from "./integrations/editor/DiffViewProvider"
@@ -24,7 +25,8 @@ export function activate(context: vscode.ExtensionContext) {
 	outputChannel = vscode.window.createOutputChannel("Cline")
 	context.subscriptions.push(outputChannel)
 
-	outputChannel.appendLine("Cline extension activated")
+	Logger.initialize(outputChannel)
+	Logger.log("Cline extension activated")
 
 	const sidebarProvider = new ClineProvider(context, outputChannel)
 
@@ -36,7 +38,7 @@ export function activate(context: vscode.ExtensionContext) {
 
 	context.subscriptions.push(
 		vscode.commands.registerCommand("cline.plusButtonClicked", async () => {
-			outputChannel.appendLine("Plus button Clicked")
+			Logger.log("Plus button Clicked")
 			await sidebarProvider.clearTask()
 			await sidebarProvider.postStateToWebview()
 			await sidebarProvider.postMessageToWebview({
@@ -56,7 +58,7 @@ export function activate(context: vscode.ExtensionContext) {
 	)
 
 	const openClineInNewTab = async () => {
-		outputChannel.appendLine("Opening Cline in new tab")
+		Logger.log("Opening Cline in new tab")
 		// (this example uses webviewProvider activation event which is necessary to deserialize cached webview, but since we use retainContextWhenHidden, we don't need to use that event)
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
 		const tabProvider = new ClineProvider(context, outputChannel)
@@ -110,6 +112,15 @@ export function activate(context: vscode.ExtensionContext) {
 		}),
 	)
 
+	context.subscriptions.push(
+		vscode.commands.registerCommand("cline.accountLoginClicked", () => {
+			sidebarProvider.postMessageToWebview({
+				type: "action",
+				action: "accountLoginClicked",
+			})
+		}),
+	)
+
 	/*
 	We use the text document content provider API to show the left side for diff view by creating a virtual document for the original content. This makes it readonly so users know to edit the right side if they want to keep their changes.
 
@@ -126,6 +137,12 @@ export function activate(context: vscode.ExtensionContext) {
 
 	// URI Handler
 	const handleUri = async (uri: vscode.Uri) => {
+		console.log("URI Handler called with:", {
+			path: uri.path,
+			query: uri.query,
+			scheme: uri.scheme,
+		})
+
 		const path = uri.path
 		const query = new URLSearchParams(uri.query.replace(/\+/g, "%2B"))
 		const visibleProvider = ClineProvider.getVisibleInstance()
@@ -140,6 +157,26 @@ export function activate(context: vscode.ExtensionContext) {
 				}
 				break
 			}
+			case "/auth": {
+				const token = query.get("token")
+				const state = query.get("state")
+
+				console.log("Auth callback received:", {
+					token: token,
+					state: state,
+				})
+
+				// Validate state parameter
+				if (!(await visibleProvider.validateAuthState(state))) {
+					vscode.window.showErrorMessage("Invalid auth state")
+					return
+				}
+
+				if (token) {
+					await visibleProvider.handleAuthCallback(token)
+				}
+				break
+			}
 			default:
 				break
 		}
@@ -151,5 +188,5 @@ export function activate(context: vscode.ExtensionContext) {
 
 // This method is called when your extension is deactivated
 export function deactivate() {
-	outputChannel.appendLine("Cline extension deactivated")
+	Logger.log("Cline extension deactivated")
 }

src/integrations/checkpoints/CheckpointTracker.ts

@@ -21,12 +21,18 @@ class CheckpointTracker {
 		this.cwd = cwd
 	}
 
-	public static async create(taskId: string, provider?: ClineProvider): Promise<CheckpointTracker> {
+	public static async create(taskId: string, provider?: ClineProvider): Promise<CheckpointTracker | undefined> {
 		try {
 			if (!provider) {
 				throw new Error("Provider is required to create a checkpoint tracker")
 			}
 
+			// Check if checkpoints are disabled in VS Code settings
+			const enableCheckpoints = vscode.workspace.getConfiguration("cline").get<boolean>("enableCheckpoints") ?? true
+			if (!enableCheckpoints) {
+				return undefined // Don't create tracker when disabled
+			}
+
 			// Check if git is installed by attempting to get version
 			try {
 				await simpleGit().version()

src/integrations/debug/DebugConsoleManager.ts

@@ -0,0 +1,75 @@
+import * as vscode from "vscode"
+
+interface DebugSession {
+	id: string
+	name: string
+	output: string[]
+	lastRetrievedIndex: number
+}
+
+export class DebugConsoleManager {
+	private sessions: Map<string, DebugSession> = new Map()
+	private disposables: vscode.Disposable[] = []
+
+	constructor() {
+		// Listen for debug session start events
+		this.disposables.push(
+			vscode.debug.onDidStartDebugSession((session) => {
+				this.sessions.set(session.id, {
+					id: session.id,
+					name: session.name,
+					output: [],
+					lastRetrievedIndex: -1,
+				})
+			}),
+		)
+
+		// Listen for debug session end events
+		this.disposables.push(
+			vscode.debug.onDidTerminateDebugSession((session) => {
+				this.sessions.delete(session.id)
+			}),
+		)
+
+		// Listen for debug console output
+		this.disposables.push(
+			vscode.debug.onDidReceiveDebugSessionCustomEvent((e: vscode.DebugSessionCustomEvent) => {
+				if (e.event === "output" && e.body?.output) {
+					const session = this.sessions.get(e.session.id)
+					if (session) {
+						session.output.push(e.body.output)
+					}
+				}
+			}),
+		)
+	}
+
+	/**
+	 * Get all active debug sessions
+	 */
+	getActiveSessions(): { id: string; name: string }[] {
+		return Array.from(this.sessions.values()).map(({ id, name }) => ({ id, name }))
+	}
+
+	/**
+	 * Get any new output since the last retrieval for a specific debug session
+	 */
+	getUnretrievedOutput(sessionId: string): string | undefined {
+		const session = this.sessions.get(sessionId)
+		if (!session) {
+			return undefined
+		}
+
+		const newOutput = session.output.slice(session.lastRetrievedIndex + 1).join("")
+		session.lastRetrievedIndex = session.output.length - 1
+		return newOutput || undefined
+	}
+
+	/**
+	 * Clean up resources
+	 */
+	dispose() {
+		this.disposables.forEach((d) => d.dispose())
+		this.sessions.clear()
+	}
+}

src/integrations/terminal/TerminalManager.ts

@@ -157,8 +157,10 @@ export class TerminalManager {
 	}
 
 	async getOrCreateTerminal(cwd: string): Promise<TerminalInfo> {
+		const terminals = TerminalRegistry.getAllTerminals()
+
 		// Find available terminal from our pool first (created for this task)
-		const availableTerminal = TerminalRegistry.getAllTerminals().find((t) => {
+		const matchingTerminal = terminals.find((t) => {
 			if (t.busy) {
 				return false
 			}
@@ -168,11 +170,21 @@ export class TerminalManager {
 			}
 			return arePathsEqual(vscode.Uri.file(cwd).fsPath, terminalCwd.fsPath)
 		})
+		if (matchingTerminal) {
+			this.terminalIds.add(matchingTerminal.id)
+			return matchingTerminal
+		}
+
+		// If no matching terminal exists, try to find any non-busy terminal
+		const availableTerminal = terminals.find((t) => !t.busy)
 		if (availableTerminal) {
+			// Navigate back to the desired directory
+			await this.runCommand(availableTerminal, `cd "${cwd}"`)
 			this.terminalIds.add(availableTerminal.id)
 			return availableTerminal
 		}
 
+		// If all terminals are busy, create a new one
 		const newTerminalInfo = TerminalRegistry.createTerminal(cwd)
 		this.terminalIds.add(newTerminalInfo.id)
 		return newTerminalInfo

src/services/auth/FirebaseAuthManager.ts

@@ -0,0 +1,99 @@
+import { initializeApp } from "firebase/app"
+import { Auth, User, getAuth, onAuthStateChanged, signInWithCustomToken, signOut } from "firebase/auth"
+import * as vscode from "vscode"
+import { ClineProvider } from "../../core/webview/ClineProvider"
+import { firebaseConfig } from "./config"
+
+export interface UserInfo {
+	displayName: string | null
+	email: string | null
+	photoURL: string | null
+}
+
+export class FirebaseAuthManager {
+	private providerRef: WeakRef<ClineProvider>
+	private auth: Auth
+	private disposables: vscode.Disposable[] = []
+
+	constructor(provider: ClineProvider) {
+		console.log("Initializing FirebaseAuthManager", { provider })
+		this.providerRef = new WeakRef(provider)
+		const app = initializeApp(firebaseConfig)
+		this.auth = getAuth(app)
+		console.log("Firebase app initialized", { appConfig: firebaseConfig })
+
+		// Auth state listener
+		onAuthStateChanged(this.auth, this.handleAuthStateChange.bind(this))
+		console.log("Auth state change listener added")
+
+		// Try to restore session
+		this.restoreSession()
+	}
+
+	private async restoreSession() {
+		console.log("Attempting to restore session")
+		const provider = this.providerRef.deref()
+		if (!provider) {
+			console.log("Provider reference lost during session restore")
+			return
+		}
+
+		const storedToken = await provider.getSecret("authToken")
+		if (storedToken) {
+			console.log("Found stored auth token, attempting to restore session")
+			try {
+				await this.signInWithCustomToken(storedToken)
+				console.log("Session restored successfully")
+			} catch (error) {
+				console.error("Failed to restore session, clearing token:", error)
+				await provider.setAuthToken(undefined)
+				await provider.setUserInfo(undefined)
+			}
+		} else {
+			console.log("No stored auth token found")
+		}
+	}
+
+	private async handleAuthStateChange(user: User | null) {
+		console.log("Auth state changed", { user })
+		const provider = this.providerRef.deref()
+		if (!provider) {
+			console.log("Provider reference lost")
+			return
+		}
+
+		if (user) {
+			console.log("User signed in", { userId: user.uid })
+			const idToken = await user.getIdToken()
+			await provider.setAuthToken(idToken)
+			// Store public user info in state
+			await provider.setUserInfo({
+				displayName: user.displayName,
+				email: user.email,
+				photoURL: user.photoURL,
+			})
+			console.log("User info set in provider", { user })
+		} else {
+			console.log("User signed out")
+			await provider.setAuthToken(undefined)
+			await provider.setUserInfo(undefined)
+		}
+		await provider.postStateToWebview()
+		console.log("Webview state updated")
+	}
+
+	async signInWithCustomToken(token: string) {
+		console.log("Signing in with custom token", { token })
+		await signInWithCustomToken(this.auth, token)
+	}
+
+	async signOut() {
+		console.log("Signing out")
+		await signOut(this.auth)
+	}
+
+	dispose() {
+		this.disposables.forEach((d) => d.dispose())
+		console.log("Disposables disposed", { count: this.disposables.length })
+	}
+}

src/services/auth/config.ts

@@ -0,0 +1,10 @@
+// Public Firebase config (safe for open source)
+export const firebaseConfig = {
+	apiKey: "AIzaSyDcXAaanNgR2_T0dq2oOl5XyKPksYHppVo",
+	authDomain: "cline-bot.firebaseapp.com",
+	projectId: "cline-bot",
+	storageBucket: "cline-bot.firebasestorage.app",
+	messagingSenderId: "364369702101",
+	appId: "1:364369702101:web:0013885dcf20b43799c65c",
+	measurementId: "G-MDPRELSCD1",
+}

src/services/logging/Logger.ts

@@ -0,0 +1,18 @@
+import type { OutputChannel } from "vscode"
+
+/**
+ * Simple logging utility for the extension's backend code.
+ * Uses VS Code's OutputChannel which must be initialized from extension.ts
+ * to ensure proper registration with the extension context.
+ */
+export class Logger {
+	private static outputChannel: OutputChannel
+
+	static initialize(outputChannel: OutputChannel) {
+		Logger.outputChannel = outputChannel
+	}
+
+	static log(message: string) {
+		Logger.outputChannel.appendLine(message)
+	}
+}

src/services/mcp/McpHub.ts

@@ -15,7 +15,15 @@ import * as path from "path"
 import * as vscode from "vscode"
 import { z } from "zod"
 import { ClineProvider, GlobalFileNames } from "../../core/webview/ClineProvider"
-import { McpResource, McpResourceResponse, McpResourceTemplate, McpServer, McpTool, McpToolCallResponse } from "../../shared/mcp"
+import {
+	McpMode,
+	McpResource,
+	McpResourceResponse,
+	McpResourceTemplate,
+	McpServer,
+	McpTool,
+	McpToolCallResponse,
+} from "../../shared/mcp"
 import { fileExistsAtPath } from "../../utils/fs"
 import { arePathsEqual } from "../../utils/path"
 
@@ -59,6 +67,10 @@ export class McpHub {
 		return this.connections.filter((conn) => !conn.server.disabled).map((conn) => conn.server)
 	}
 
+	getMode(): McpMode {
+		return vscode.workspace.getConfiguration("cline.mcp").get<McpMode>("mode", "full")
+	}
+
 	async getMcpServersPath(): Promise<string> {
 		const provider = this.providerRef.deref()
 		if (!provider) {

src/shared/ExtensionMessage.ts

@@ -20,12 +20,21 @@ export interface ExtensionMessage {
 		| "invoke"
 		| "partialMessage"
 		| "openRouterModels"
+		| "openAiModels"
 		| "mcpServers"
 		| "relinquishControl"
 		| "vsCodeLmModels"
 		| "requestVsCodeLmModels"
+		| "emailSubscribed"
 	text?: string
-	action?: "chatButtonClicked" | "mcpButtonClicked" | "settingsButtonClicked" | "historyButtonClicked" | "didBecomeVisible"
+	action?:
+		| "chatButtonClicked"
+		| "mcpButtonClicked"
+		| "settingsButtonClicked"
+		| "historyButtonClicked"
+		| "didBecomeVisible"
+		| "accountLoginClicked"
+		| "accountLogoutClicked"
 	invoke?: "sendMessage" | "primaryButtonClick" | "secondaryButtonClick"
 	state?: ExtensionState
 	images?: string[]
@@ -35,6 +44,7 @@ export interface ExtensionMessage {
 	filePaths?: string[]
 	partialMessage?: ClineMessage
 	openRouterModels?: Record<string, ModelInfo>
+	openAiModels?: string[]
 	mcpServers?: McpServer[]
 }
 
@@ -51,6 +61,12 @@ export interface ExtensionState {
 	autoApprovalSettings: AutoApprovalSettings
 	browserSettings: BrowserSettings
 	chatSettings: ChatSettings
+	isLoggedIn: boolean
+	userInfo?: {
+		displayName: string | null
+		email: string | null
+		photoURL: string | null
+	}
 }
 
 export interface ClineMessage {

src/shared/WebviewMessage.ts

@@ -25,6 +25,7 @@ export interface WebviewMessage {
 		| "openMention"
 		| "cancelTask"
 		| "refreshOpenRouterModels"
+		| "refreshOpenAiModels"
 		| "openMcpSettings"
 		| "restartMcpServer"
 		| "autoApprovalSettings"
@@ -33,10 +34,14 @@ export interface WebviewMessage {
 		| "checkpointDiff"
 		| "checkpointRestore"
 		| "taskCompletionViewChanges"
+		| "openExtensionSettings"
 		| "requestVsCodeLmModels"
 		| "toggleToolAutoApprove"
 		| "toggleMcpServer"
 		| "getLatestState"
+		| "accountLoginClicked"
+		| "accountLogoutClicked"
+		| "subscribeEmail"
 	// | "relaunchChromeDebugMode"
 	text?: string
 	disabled?: boolean

src/shared/api.ts

@@ -243,6 +243,14 @@ export const openAiModelInfoSaneDefaults: ModelInfo = {
 export type GeminiModelId = keyof typeof geminiModels
 export const geminiDefaultModelId: GeminiModelId = "gemini-2.0-flash-thinking-exp-1219"
 export const geminiModels = {
+	"gemini-2.0-flash-thinking-exp-01-21": {
+		maxTokens: 65536,
+		contextWindow: 1_048_576,
+		supportsImages: true,
+		supportsPromptCache: false,
+		inputPrice: 0,
+		outputPrice: 0,
+	},
 	"gemini-2.0-flash-thinking-exp-1219": {
 		maxTokens: 8192,
 		contextWindow: 32_767,
@@ -377,6 +385,16 @@ export const deepSeekModels = {
 		cacheWritesPrice: 0.14,
 		cacheReadsPrice: 0.014,
 	},
+	"deepseek-reasoner": {
+		maxTokens: 8_000,
+		contextWindow: 64_000,
+		supportsImages: false,
+		supportsPromptCache: true, // supports context caching, but not in the way anthropic does it (deepseek reports input tokens and reads/writes in the same usage report) FIXME: we need to show users cache stats how deepseek does it
+		inputPrice: 0, // technically there is no input price, it's all either a cache hit or miss (ApiOptions will not show this)
+		outputPrice: 2.19,
+		cacheWritesPrice: 0.55,
+		cacheReadsPrice: 0.14,
+	},
 } as const satisfies Record<string, ModelInfo>
 
 // Mistral

src/shared/combineCommandSequences.ts

@@ -25,13 +25,13 @@ export function combineCommandSequences(messages: ClineMessage[]): ClineMessage[
 
 	// First pass: combine commands with their outputs
 	for (let i = 0; i < messages.length; i++) {
-		if (messages[i].type === "ask" && (messages[i].ask === "command" || messages[i].say === "command")) {
+		if (messages[i].ask === "command" || messages[i].say === "command") {
 			let combinedText = messages[i].text || ""
 			let didAddOutput = false
 			let j = i + 1
 
 			while (j < messages.length) {
-				if (messages[j].type === "ask" && (messages[j].ask === "command" || messages[j].say === "command")) {
+				if (messages[j].ask === "command" || messages[j].say === "command") {
 					// Stop if we encounter the next command
 					break
 				}
@@ -63,7 +63,7 @@ export function combineCommandSequences(messages: ClineMessage[]): ClineMessage[
 	return messages
 		.filter((msg) => !(msg.ask === "command_output" || msg.say === "command_output"))
 		.map((msg) => {
-			if (msg.type === "ask" && (msg.ask === "command" || msg.say === "command")) {
+			if (msg.ask === "command" || msg.say === "command") {
 				const combinedCommand = combinedCommands.find((cmd) => cmd.ts === msg.ts)
 				return combinedCommand || msg
 			}

src/shared/mcp.ts

@@ -1,3 +1,5 @@
+export type McpMode = "full" | "server-use-only" | "off"
+
 export type McpServer = {
 	name: string
 	config: string

src/test/extension.test.ts

@@ -4,7 +4,7 @@ import path from "path"
 import "should"
 import * as vscode from "vscode"
 
-const packagePath = path.join(__dirname, "..", "..", "..", "package.json")
+const packagePath = path.join(__dirname, "..", "..", "package.json")
 
 describe("Cline Extension", () => {
 	after(() => {
@@ -23,4 +23,69 @@ describe("Cline Extension", () => {
 		await new Promise((resolve) => setTimeout(resolve, 400))
 		await vscode.commands.executeCommand("cline.plusButtonClicked")
 	})
+
+	// New test to verify xvfb and webview functionality
+	it("should create and display a webview panel", async () => {
+		// Create a webview panel
+		const panel = vscode.window.createWebviewPanel("testWebview", "CI/CD Test", vscode.ViewColumn.One, {
+			enableScripts: true,
+		})
+
+		// Set some HTML content
+		panel.webview.html = `
+			<!DOCTYPE html>
+			<html>
+				<head>
+					<meta charset="UTF-8">
+					<title>xvfb Test</title>
+				</head>
+				<body>
+					<div id="test">Testing xvfb display server</div>
+				</body>
+			</html>
+		`
+
+		// Verify panel exists
+		should.exist(panel)
+		panel.visible.should.be.true()
+
+		// Clean up
+		panel.dispose()
+	})
+
+	// Test webview message passing
+	it("should handle webview messages", async () => {
+		const panel = vscode.window.createWebviewPanel("testWebview", "Message Test", vscode.ViewColumn.One, {
+			enableScripts: true,
+		})
+
+		// Set up message handling
+		const messagePromise = new Promise<string>((resolve) => {
+			panel.webview.onDidReceiveMessage((message) => resolve(message.text), undefined)
+		})
+
+		// Add message sending script
+		panel.webview.html = `
+			<!DOCTYPE html>
+			<html>
+				<head>
+					<meta charset="UTF-8">
+					<title>Message Test</title>
+				</head>
+				<body>
+					<script>
+						const vscode = acquireVsCodeApi();
+						vscode.postMessage({ text: 'test-message' });
+					</script>
+				</body>
+			</html>
+		`
+
+		// Wait for message
+		const message = await messagePromise
+		message.should.equal("test-message")
+
+		// Clean up
+		panel.dispose()
+	})
 })

src/test/suite/extension.test.js

@@ -0,0 +1,37 @@
+const { expect } = require("chai")
+const vscode = require("vscode")
+
+describe("Extension Tests", function () {
+	this.timeout(60000) // Increased timeout for extension operations
+
+	it("should activate extension successfully", async () => {
+		// Get the extension
+		const extension = vscode.extensions.getExtension("saoudrizwan.claude-dev")
+		expect(extension).to.not.be.undefined
+
+		// Activate the extension if not already activated
+		if (!extension.isActive) {
+			await extension.activate()
+		}
+		expect(extension.isActive).to.be.true
+	})
+
+	it("should open sidebar view", async () => {
+		// Execute the command to open sidebar
+		await vscode.commands.executeCommand("cline.plusButtonClicked")
+
+		// Wait for sidebar to be visible
+		await new Promise((resolve) => setTimeout(resolve, 1000))
+
+		// Get all views
+		const views = vscode.window.visibleTextEditors
+		// Just verify the command executed without error
+		// The actual view verification is handled in the TypeScript tests
+	})
+
+	it("should handle basic commands", async () => {
+		// Test basic command execution
+		await vscode.commands.executeCommand("cline.historyButtonClicked")
+		// Success if no error thrown
+	})
+})

src/test/suite/index.js

@@ -0,0 +1,43 @@
+const path = require("path")
+const Mocha = require("mocha")
+const glob = require("glob")
+
+async function run() {
+	// Create the mocha test
+	const mocha = new Mocha({
+		ui: "bdd",
+		color: true,
+		timeout: 60000, // Increased timeout for extension operations
+	})
+
+	const testsRoot = path.resolve(__dirname, ".")
+
+	try {
+		// Find all test files
+		const files = await glob("*.test.js", { cwd: testsRoot })
+
+		// Add files to the test suite
+		files.forEach((f) => mocha.addFile(path.resolve(testsRoot, f)))
+
+		// Run the mocha test
+		return new Promise((resolve, reject) => {
+			try {
+				// Run the tests
+				mocha.run((failures) => {
+					if (failures > 0) {
+						reject(new Error(`${failures} tests failed.`))
+					} else {
+						resolve()
+					}
+				})
+			} catch (err) {
+				reject(err)
+			}
+		})
+	} catch (err) {
+		console.error("Failed to run tests:", err)
+		throw err
+	}
+}
+
+module.exports = { run }

src/test/webview/chat-native.test.ts

@@ -0,0 +1,116 @@
+import * as vscode from "vscode"
+import { describe, it, beforeEach, afterEach } from "mocha"
+import { strict as assert } from "assert"
+import { join } from "path"
+describe("Chat Integration Tests", () => {
+	let panel: vscode.WebviewPanel
+	let disposables: vscode.Disposable[] = []
+
+	beforeEach(async () => {
+		// Create VSCode webview panel
+		panel = vscode.window.createWebviewPanel("testWebview", "Chat Test", vscode.ViewColumn.One, {
+			enableScripts: true,
+			retainContextWhenHidden: true,
+		})
+
+		// Set up minimal test webview
+		panel.webview.html = `
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <script>
+                        const vscode = acquireVsCodeApi();
+                        window.addEventListener('message', event => {
+                            const message = event.data;
+                            switch (message.type) {
+                                case 'sendMessage':
+                                    vscode.postMessage({ type: 'newTask', text: message.text });
+                                    break;
+                                case 'toggleMode':
+                                    vscode.postMessage({ type: 'chatSettings', chatSettings: { mode: 'act' } });
+                                    break;
+                                case 'invoke':
+                                    if (message.invoke === 'primaryButtonClick') {
+                                        vscode.postMessage({ type: 'askResponse', askResponse: 'yesButtonClicked' });
+                                    }
+                                    break;
+                            }
+                        });
+                    </script>
+                </head>
+                <body>
+                    <div id="test-webview"></div>
+                </body>
+            </html>
+        `
+	})
+
+	afterEach(() => {
+		panel.dispose()
+		disposables.forEach((d) => d.dispose())
+		disposables = []
+	})
+
+	it("should send chat messages", async () => {
+		// Set up message listener
+		const messagePromise = new Promise<any>((resolve) => {
+			panel.webview.onDidReceiveMessage((message) => {
+				if (message.type === "newTask") {
+					resolve(message)
+				}
+			})
+		})
+
+		// Trigger send message
+		await panel.webview.postMessage({
+			type: "sendMessage",
+			text: "Create a hello world app",
+		})
+
+		// Verify message was sent
+		const message = await messagePromise
+		assert.equal(message.type, "newTask")
+		assert.equal(message.text, "Create a hello world app")
+	})
+
+	it("should toggle between plan and act modes", async () => {
+		// Set up state change listener
+		const stateChangePromise = new Promise<any>((resolve) => {
+			panel.webview.onDidReceiveMessage((message) => {
+				if (message.type === "chatSettings") {
+					resolve(message)
+				}
+			})
+		})
+
+		// Trigger mode toggle
+		await panel.webview.postMessage({ type: "toggleMode" })
+
+		// Verify mode changed
+		const stateChange = await stateChangePromise
+		assert.equal(stateChange.chatSettings.mode, "act")
+	})
+
+	it("should handle tool approval flow", async () => {
+		// Set up approval listener
+		const approvalPromise = new Promise<any>((resolve) => {
+			panel.webview.onDidReceiveMessage((message) => {
+				if (message.type === "askResponse") {
+					resolve(message)
+				}
+			})
+		})
+
+		// Trigger tool approval
+		await panel.webview.postMessage({
+			type: "invoke",
+			invoke: "primaryButtonClick",
+		})
+
+		// Verify approval was sent
+		const response = await approvalPromise
+		assert.equal(response.type, "askResponse")
+		assert.equal(response.askResponse, "yesButtonClicked")
+	})
+})

tsconfig.test.json

@@ -8,7 +8,11 @@
 	"compilerOptions": {
 		"module": "commonjs",
 		"moduleResolution": "node",
-		"types": ["node", "mocha", "should", "vscode"]
+		"types": ["node", "mocha", "should", "vscode", "chai"],
+		"typeRoots": ["./node_modules/@types", "./src/test/types"],
+		"outDir": "out",
+		"rootDir": "src"
 	},
-	"include": ["src/**/*.test.ts"]
+	"include": ["src/**/*.test.ts"],
+	"exclude": ["src/test/**/*.js"]
 }

webview-ui/package.json

@@ -18,16 +18,19 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-remark": "^2.1.0",
-		"react-scripts": "5.0.1",
+		"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": "^4.9.5",
+		"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",

webview-ui/src/App.tsx

@@ -5,6 +5,7 @@ import ChatView from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
 import SettingsView from "./components/settings/SettingsView"
 import WelcomeView from "./components/welcome/WelcomeView"
+import AccountView from "./components/account/AccountView"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
 import { vscode } from "./utils/vscode"
 import McpView from "./components/mcp/McpView"
@@ -14,6 +15,7 @@ const AppContent = () => {
 	const [showSettings, setShowSettings] = useState(false)
 	const [showHistory, setShowHistory] = useState(false)
 	const [showMcp, setShowMcp] = useState(false)
+	const [showAccount, setShowAccount] = useState(false)
 	const [showAnnouncement, setShowAnnouncement] = useState(false)
 
 	const handleMessage = useCallback((e: MessageEvent) => {
@@ -25,21 +27,31 @@ const AppContent = () => {
 						setShowSettings(true)
 						setShowHistory(false)
 						setShowMcp(false)
+						setShowAccount(false)
 						break
 					case "historyButtonClicked":
 						setShowSettings(false)
 						setShowHistory(true)
 						setShowMcp(false)
+						setShowAccount(false)
 						break
 					case "mcpButtonClicked":
 						setShowSettings(false)
 						setShowHistory(false)
 						setShowMcp(true)
+						setShowAccount(false)
+						break
+					case "accountLoginClicked":
+						setShowSettings(false)
+						setShowHistory(false)
+						setShowMcp(false)
+						setShowAccount(true)
 						break
 					case "chatButtonClicked":
 						setShowSettings(false)
 						setShowHistory(false)
 						setShowMcp(false)
+						setShowAccount(false)
 						break
 				}
 				break
@@ -68,6 +80,7 @@ const AppContent = () => {
 					{showSettings && <SettingsView onDone={() => setShowSettings(false)} />}
 					{showHistory && <HistoryView onDone={() => setShowHistory(false)} />}
 					{showMcp && <McpView onDone={() => setShowMcp(false)} />}
+					{showAccount && <AccountView onDone={() => setShowAccount(false)} />}
 					{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
 					<ChatView
 						showHistoryView={() => {
@@ -75,7 +88,7 @@ const AppContent = () => {
 							setShowMcp(false)
 							setShowHistory(true)
 						}}
-						isHidden={showSettings || showHistory || showMcp}
+						isHidden={showSettings || showHistory || showMcp || showAccount}
 						showAnnouncement={showAnnouncement}
 						hideAnnouncement={() => {
 							setShowAnnouncement(false)

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

@@ -0,0 +1,15 @@
+import { memo } from "react"
+import { vscode } from "../../utils/vscode"
+
+const AccountOptions = () => {
+	const handleAccountClick = () => {
+		vscode.postMessage({ type: "accountLoginClicked" })
+	}
+
+	// Call handleAccountClick immediately when component mounts
+	handleAccountClick()
+
+	return null // This component doesn't render anything
+}
+
+export default memo(AccountOptions)

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

@@ -0,0 +1,83 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { memo } from "react"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+
+type AccountViewProps = {
+	onDone: () => void
+}
+
+const AccountView = ({ onDone }: AccountViewProps) => {
+	const { isLoggedIn, userInfo } = useExtensionState()
+
+	const handleLogin = () => {
+		vscode.postMessage({ type: "accountLoginClicked" })
+	}
+
+	const handleLogout = () => {
+		vscode.postMessage({ type: "accountLogoutClicked" })
+	}
+
+	return (
+		<div
+			style={{
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				padding: "10px 0px 0px 20px",
+				display: "flex",
+				flexDirection: "column",
+				overflow: "hidden",
+			}}>
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: "17px",
+					paddingRight: 17,
+				}}>
+				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Account</h3>
+				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
+			</div>
+			<div
+				style={{
+					flexGrow: 1,
+					overflowY: "scroll",
+					paddingRight: 8,
+					display: "flex",
+					flexDirection: "column",
+				}}>
+				<div style={{ marginBottom: 5 }}>
+					{isLoggedIn ? (
+						<>
+							{userInfo?.photoURL && (
+								<img
+									src={userInfo.photoURL}
+									alt="Profile"
+									style={{
+										width: 48,
+										height: 48,
+										borderRadius: "50%",
+										marginBottom: 10,
+									}}
+								/>
+							)}
+							<div style={{ fontSize: "14px", marginBottom: 10 }}>
+								{userInfo?.displayName && <div>Name: {userInfo.displayName}</div>}
+								{userInfo?.email && <div>Email: {userInfo.email}</div>}
+							</div>
+							<VSCodeButton onClick={handleLogout}>Log out</VSCodeButton>
+						</>
+					) : (
+						<VSCodeButton onClick={handleLogin}>Log in to Cline</VSCodeButton>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default memo(AccountView)

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

@@ -1,13 +1,12 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { memo } from "react"
-// import VSCodeButtonLink from "./VSCodeButtonLink"
-// import { getOpenRouterAuthUrl } from "./ApiOptions"
-// import { vscode } from "../utils/vscode"
+import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_INACTIVE_SELECTION_BACKGROUND } from "../../utils/vscStyles"
 
 interface AnnouncementProps {
 	version: string
 	hideAnnouncement: () => void
 }
+
 /*
 You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
 */
@@ -16,7 +15,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 	return (
 		<div
 			style={{
-				backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+				backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
 				borderRadius: "3px",
 				padding: "12px 16px",
 				margin: "5px 15px 5px 15px",
@@ -86,7 +85,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 							Switch to OpenRouter
 						</VSCodeButton>
 					)}
-				</li> 
+				</li>
 				<li>
 					<b>Edit Cline's changes before accepting!</b> When he creates or edits a file, you can modify his
 					changes directly in the right side of the diff view (+ hover over the 'Revert Block' arrow button in
@@ -104,7 +103,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 			<div
 				style={{
 					height: "1px",
-					background: "var(--vscode-foreground)",
+					background: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 					opacity: 0.1,
 					margin: "8px 0",
 				}}

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

@@ -4,6 +4,7 @@ import styled from "styled-components"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { AutoApprovalSettings } from "../../../../src/shared/AutoApprovalSettings"
 import { vscode } from "../../utils/vscode"
+import { getAsVar, VSC_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties
@@ -128,7 +129,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 				padding: "0 15px",
 				userSelect: "none",
 				borderTop: isExpanded
-					? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
+					? `0.5px solid color-mix(in srgb, ${getAsVar(VSC_TITLEBAR_INACTIVE_FOREGROUND)} 20%, transparent)`
 					: "none",
 				overflowY: "auto",
 				...style,
@@ -186,7 +187,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					}}>
 					<span
 						style={{
-							color: "var(--vscode-foreground)",
+							color: getAsVar(VSC_FOREGROUND),
 							whiteSpace: "nowrap",
 						}}>
 						Auto-approve:
@@ -213,7 +214,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					<div
 						style={{
 							marginBottom: "10px",
-							color: "var(--vscode-descriptionForeground)",
+							color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 							fontSize: "12px",
 						}}>
 						Auto-approve allows Cline to perform the following actions without asking for permission. Please use with
@@ -232,7 +233,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							<div
 								style={{
 									marginLeft: "28px",
-									color: "var(--vscode-descriptionForeground)",
+									color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 									fontSize: "12px",
 								}}>
 								{action.description}
@@ -242,7 +243,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					<div
 						style={{
 							height: "0.5px",
-							background: "var(--vscode-titleBar-inactiveForeground)",
+							background: getAsVar(VSC_TITLEBAR_INACTIVE_FOREGROUND),
 							margin: "15px 0",
 							opacity: 0.2,
 						}}
@@ -254,7 +255,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							gap: "8px",
 							marginTop: "10px",
 							marginBottom: "8px",
-							color: "var(--vscode-foreground)",
+							color: getAsVar(VSC_FOREGROUND),
 						}}>
 						<span style={{ flexShrink: 1, minWidth: 0 }}>Max Requests:</span>
 						<VSCodeTextField
@@ -280,7 +281,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					</div>
 					<div
 						style={{
-							color: "var(--vscode-descriptionForeground)",
+							color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 							fontSize: "12px",
 							marginBottom: "10px",
 						}}>
@@ -298,7 +299,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						<div
 							style={{
 								marginLeft: "28px",
-								color: "var(--vscode-descriptionForeground)",
+								color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 								fontSize: "12px",
 							}}>
 							Receive system notifications when Cline requires approval to proceed or when a task is completed.
@@ -314,12 +315,12 @@ const CollapsibleSection = styled.div<{ isHovered?: boolean }>`
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	color: ${(props) => (props.isHovered ? "var(--vscode-foreground)" : "var(--vscode-descriptionForeground)")};
+	color: ${(props) => (props.isHovered ? getAsVar(VSC_FOREGROUND) : getAsVar(VSC_DESCRIPTION_FOREGROUND))};
 	flex: 1;
 	min-width: 0;
 
 	&:hover {
-		color: var(--vscode-foreground);
+		color: ${getAsVar(VSC_FOREGROUND)};
 	}
 `
 

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

@@ -3,16 +3,6 @@ import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, us
 import DynamicTextArea from "react-textarea-autosize"
 import { useClickAway, useWindowSize } from "react-use"
 import styled from "styled-components"
-import {
-	anthropicDefaultModelId,
-	bedrockDefaultModelId,
-	deepSeekDefaultModelId,
-	geminiDefaultModelId,
-	mistralDefaultModelId,
-	openAiNativeDefaultModelId,
-	openRouterDefaultModelId,
-	vertexDefaultModelId,
-} from "../../../../src/shared/api"
 import { mentionRegex, mentionRegexGlobal } from "../../../../src/shared/context-mentions"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import {
@@ -26,7 +16,7 @@ import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import Thumbnails from "../common/Thumbnails"
-import ApiOptions from "../settings/ApiOptions"
+import ApiOptions, { normalizeApiConfiguration } from "../settings/ApiOptions"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
 
@@ -43,6 +33,8 @@ interface ChatTextAreaProps {
 	onHeightChange?: (height: number) => void
 }
 
+const PLAN_MODE_COLOR = "var(--vscode-inputValidation-warningBorder)"
+
 const SwitchOption = styled.div<{ isActive: boolean }>`
 	padding: 2px 8px;
 	color: ${(props) => (props.isActive ? "white" : "var(--vscode-input-foreground)")};
@@ -69,13 +61,14 @@ const SwitchContainer = styled.div<{ disabled: boolean }>`
 	transform: scale(0.85);
 	transform-origin: right center;
 	margin-left: -10px; // compensate for the transform so flex spacing works
+	user-select: none; // Prevent text selection
 `
 
-const Slider = styled.div<{ isAct: boolean }>`
+const Slider = styled.div<{ isAct: boolean; isPlan?: boolean }>`
 	position: absolute;
 	height: 100%;
 	width: 50%;
-	background-color: var(--vscode-focusBorder);
+	background-color: ${(props) => (props.isPlan ? PLAN_MODE_COLOR : "var(--vscode-focusBorder)")};
 	transition: transform 0.2s ease;
 	transform: translateX(${(props) => (props.isAct ? "100%" : "0%")});
 `
@@ -372,6 +365,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				const isComposing = event.nativeEvent?.isComposing ?? false
 				if (event.key === "Enter" && !event.shiftKey && !isComposing) {
 					event.preventDefault()
+					setIsTextAreaFocused(false)
 					onSend()
 				}
 
@@ -590,20 +584,40 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			[updateCursorPosition],
 		)
 
+		// Separate the API config submission logic
+		const submitApiConfig = useCallback(() => {
+			const apiValidationResult = validateApiConfiguration(apiConfiguration)
+			const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels)
+
+			if (!apiValidationResult && !modelIdValidationResult) {
+				vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
+			} else {
+				vscode.postMessage({ type: "getLatestState" })
+			}
+		}, [apiConfiguration, openRouterModels])
+
 		const onModeToggle = useCallback(() => {
 			if (textAreaDisabled) return
-			const newMode = chatSettings.mode === "plan" ? "act" : "plan"
-			vscode.postMessage({
-				type: "chatSettings",
-				chatSettings: {
-					mode: newMode,
-				},
-			})
-			// Focus the textarea after mode toggle with slight delay
+			let changeModeDelay = 0
+			if (showModelSelector) {
+				// user has model selector open, so we should save it before switching modes
+				submitApiConfig()
+				changeModeDelay = 250 // necessary to let the api config update (we send message and wait for it to be saved) FIXME: this is a hack and we ideally should check for api config changes, then wait for it to be saved, before switching modes
+			}
 			setTimeout(() => {
-				textAreaRef.current?.focus()
-			}, 100)
-		}, [chatSettings.mode, textAreaDisabled])
+				const newMode = chatSettings.mode === "plan" ? "act" : "plan"
+				vscode.postMessage({
+					type: "chatSettings",
+					chatSettings: {
+						mode: newMode,
+					},
+				})
+				// Focus the textarea after mode toggle with slight delay
+				setTimeout(() => {
+					textAreaRef.current?.focus()
+				}, 100)
+			}, changeModeDelay)
+		}, [chatSettings.mode, textAreaDisabled, showModelSelector, submitApiConfig])
 
 		const handleContextButtonClick = useCallback(() => {
 			if (textAreaDisabled) return
@@ -648,18 +662,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			updateHighlights()
 		}, [inputValue, textAreaDisabled, handleInputChange, updateHighlights])
 
-		// Separate the API config submission logic
-		const submitApiConfig = useCallback(() => {
-			const apiValidationResult = validateApiConfiguration(apiConfiguration)
-			const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels)
-
-			if (!apiValidationResult && !modelIdValidationResult) {
-				vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
-			} else {
-				vscode.postMessage({ type: "getLatestState" })
-			}
-		}, [apiConfiguration, openRouterModels])
-
 		// Use an effect to detect menu close
 		useEffect(() => {
 			if (prevShowModelSelector.current && !showModelSelector) {
@@ -682,35 +684,19 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 		// Get model display name
 		const modelDisplayName = useMemo(() => {
+			const { selectedProvider, selectedModelId } = normalizeApiConfiguration(apiConfiguration)
 			const unknownModel = "unknown"
 			if (!apiConfiguration) return unknownModel
-			switch (apiConfiguration.apiProvider) {
+			switch (selectedProvider) {
 				case "anthropic":
-					return `anthropic:${apiConfiguration.apiModelId || anthropicDefaultModelId}`
-				case "openai":
-					return `openai:${apiConfiguration.openAiModelId || unknownModel}`
 				case "openrouter":
-					return `openrouter:${apiConfiguration.openRouterModelId || openRouterDefaultModelId}`
-				case "bedrock":
-					return `bedrock:${apiConfiguration.apiModelId || bedrockDefaultModelId}`
-				case "vertex":
-					return `vertex:${apiConfiguration.apiModelId || vertexDefaultModelId}`
-				case "ollama":
-					return `ollama:${apiConfiguration.ollamaModelId || unknownModel}`
-				case "lmstudio":
-					return `lmstudio:${apiConfiguration.lmStudioModelId || unknownModel}`
-				case "gemini":
-					return `gemini:${apiConfiguration.apiModelId || geminiDefaultModelId}`
-				case "openai-native":
-					return `openai-native:${apiConfiguration.apiModelId || openAiNativeDefaultModelId}`
-				case "deepseek":
-					return `deepseek:${apiConfiguration.apiModelId || deepSeekDefaultModelId}`
-				case "mistral":
-					return `mistral:${apiConfiguration.apiModelId || mistralDefaultModelId}`
+					return `${selectedProvider}:${selectedModelId}`
+				case "openai":
+					return `openai-compat:${selectedModelId}`
 				case "vscode-lm":
 					return `vscode-lm:${apiConfiguration.vsCodeLmModelSelector ? `${apiConfiguration.vsCodeLmModelSelector.vendor ?? ""}/${apiConfiguration.vsCodeLmModelSelector.family ?? ""}` : unknownModel}`
 				default:
-					return unknownModel
+					return `${selectedProvider}:${selectedModelId}`
 			}
 		}, [apiConfiguration])
 
@@ -742,6 +728,93 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [showModelSelector])
 
+		/**
+		 * Handles the drag over event to allow dropping.
+		 * Prevents the default behavior to enable drop.
+		 *
+		 * @param {React.DragEvent} e - The drag event.
+		 */
+		const onDragOver = (e: React.DragEvent) => {
+			e.preventDefault()
+		}
+
+		/**
+		 * Handles the drop event for files and text.
+		 * Processes dropped images and text, updating the state accordingly.
+		 *
+		 * @param {React.DragEvent} e - The drop event.
+		 */
+		const onDrop = async (e: React.DragEvent) => {
+			e.preventDefault()
+
+			const files = Array.from(e.dataTransfer.files)
+			const text = e.dataTransfer.getData("text")
+
+			if (text) {
+				handleTextDrop(text)
+				return
+			}
+
+			const acceptedTypes = ["png", "jpeg", "webp"]
+			const imageFiles = files.filter((file) => {
+				const [type, subtype] = file.type.split("/")
+				return type === "image" && acceptedTypes.includes(subtype)
+			})
+
+			if (shouldDisableImages || imageFiles.length === 0) return
+
+			const imageDataArray = await readImageFiles(imageFiles)
+			const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
+
+			if (dataUrls.length > 0) {
+				setSelectedImages((prevImages) => [...prevImages, ...dataUrls].slice(0, MAX_IMAGES_PER_MESSAGE))
+			} else {
+				console.warn("No valid images were processed")
+			}
+		}
+
+		/**
+		 * Handles the drop event for text.
+		 * Inserts the dropped text at the current cursor position.
+		 *
+		 * @param {string} text - The dropped text.
+		 */
+		const handleTextDrop = (text: string) => {
+			const newValue = inputValue.slice(0, cursorPosition) + text + inputValue.slice(cursorPosition)
+			setInputValue(newValue)
+			const newCursorPosition = cursorPosition + text.length
+			setCursorPosition(newCursorPosition)
+			setIntendedCursorPosition(newCursorPosition)
+		}
+
+		/**
+		 * Reads image files and returns their data URLs.
+		 * Uses FileReader to read the files as data URLs.
+		 *
+		 * @param {File[]} imageFiles - The image files to read.
+		 * @returns {Promise<(string | null)[]>} - A promise that resolves to an array of data URLs or null values.
+		 */
+		const readImageFiles = (imageFiles: File[]): Promise<(string | null)[]> => {
+			return Promise.all(
+				imageFiles.map(
+					(file) =>
+						new Promise<string | null>((resolve) => {
+							const reader = new FileReader()
+							reader.onloadend = () => {
+								if (reader.error) {
+									console.error("Error reading file:", reader.error)
+									resolve(null)
+								} else {
+									const result = reader.result
+									resolve(typeof result === "string" ? result : null)
+								}
+							}
+							reader.readAsDataURL(file)
+						}),
+				),
+			)
+		}
+
 		return (
 			<div>
 				<div
@@ -750,7 +823,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						opacity: textAreaDisabled ? 0.5 : 1,
 						position: "relative",
 						display: "flex",
-					}}>
+					}}
+					onDrop={onDrop}
+					onDragOver={onDragOver}>
 					{showContextMenu && (
 						<div ref={contextMenuContainerRef}>
 							<ContextMenu
@@ -803,6 +878,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						}}
 					/>
 					<DynamicTextArea
+						data-testid="chat-input"
 						ref={(el) => {
 							if (typeof ref === "function") {
 								ref(el)
@@ -862,6 +938,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							cursor: textAreaDisabled ? "not-allowed" : undefined,
 							flex: 1,
 							zIndex: 1,
+							outline: isTextAreaFocused
+								? `1px solid ${chatSettings.mode === "plan" ? PLAN_MODE_COLOR : "var(--vscode-focusBorder)"}`
+								: "none",
 						}}
 						onScroll={() => updateHighlights()}
 					/>
@@ -909,9 +988,11 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								}}
 							/> */}
 							<div
+								data-testid="send-button"
 								className={`input-icon-button ${textAreaDisabled ? "disabled" : ""} codicon codicon-send`}
 								onClick={() => {
 									if (!textAreaDisabled) {
+										setIsTextAreaFocused(false)
 										onSend()
 									}
 								}}
@@ -923,6 +1004,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				<ControlsContainer>
 					<ButtonGroup>
 						<VSCodeButton
+							data-testid="context-button"
 							appearance="icon"
 							aria-label="Add Context"
 							disabled={textAreaDisabled}
@@ -935,6 +1017,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						</VSCodeButton>
 
 						<VSCodeButton
+							data-testid="images-button"
 							appearance="icon"
 							aria-label="Add Images"
 							disabled={shouldDisableImages}
@@ -985,8 +1068,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						</ModelContainer>
 					</ButtonGroup>
 
-					<SwitchContainer disabled={textAreaDisabled} onClick={onModeToggle}>
-						<Slider isAct={chatSettings.mode === "act"} />
+					<SwitchContainer data-testid="mode-switch" disabled={textAreaDisabled} onClick={onModeToggle}>
+						<Slider isAct={chatSettings.mode === "act"} isPlan={chatSettings.mode === "plan"} />
 						<SwitchOption isActive={chatSettings.mode === "plan"}>Plan</SwitchOption>
 						<SwitchOption isActive={chatSettings.mode === "act"}>Act</SwitchOption>
 					</SwitchContainer>

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

@@ -5,6 +5,7 @@ import { useDeepCompareEffect, useEvent, useMount } from "react-use"
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
 import styled from "styled-components"
 import {
+	ClineApiReqInfo,
 	ClineAsk,
 	ClineMessage,
 	ClineSayBrowserAction,
@@ -44,6 +45,20 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 	// has to be after api_req_finished are all reduced into api_req_started messages
 	const apiMetrics = useMemo(() => getApiMetrics(modifiedMessages), [modifiedMessages])
 
+	const lastApiReqTotalTokens = useMemo(() => {
+		const getTotalTokensFromApiReqMessage = (msg: ClineMessage) => {
+			if (!msg.text) return 0
+			const { tokensIn, tokensOut, cacheWrites, cacheReads }: ClineApiReqInfo = JSON.parse(msg.text)
+			return (tokensIn || 0) + (tokensOut || 0) + (cacheWrites || 0) + (cacheReads || 0)
+		}
+		const lastApiReqMessage = findLast(modifiedMessages, (msg) => {
+			if (msg.say !== "api_req_started") return false
+			return getTotalTokensFromApiReqMessage(msg) > 0
+		})
+		if (!lastApiReqMessage) return undefined
+		return getTotalTokensFromApiReqMessage(lastApiReqMessage)
+	}, [modifiedMessages])
+
 	const [inputValue, setInputValue] = useState("")
 	const textAreaRef = useRef<HTMLTextAreaElement>(null)
 	const [textAreaDisabled, setTextAreaDisabled] = useState(false)
@@ -729,6 +744,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					cacheWrites={apiMetrics.totalCacheWrites}
 					cacheReads={apiMetrics.totalCacheReads}
 					totalCost={apiMetrics.totalCost}
+					lastApiReqTotalTokens={lastApiReqTotalTokens}
 					onClose={handleTaskCloseButtonClick}
 				/>
 			) : (

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

@@ -8,6 +8,7 @@ import { formatLargeNumber } from "../../utils/format"
 import { formatSize } from "../../utils/size"
 import { vscode } from "../../utils/vscode"
 import Thumbnails from "../common/Thumbnails"
+import { normalizeApiConfiguration } from "../settings/ApiOptions"
 
 interface TaskHeaderProps {
 	task: ClineMessage
@@ -17,6 +18,7 @@ interface TaskHeaderProps {
 	cacheWrites?: number
 	cacheReads?: number
 	totalCost: number
+	lastApiReqTotalTokens?: number
 	onClose: () => void
 }
 
@@ -28,6 +30,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	cacheWrites,
 	cacheReads,
 	totalCost,
+	lastApiReqTotalTokens,
 	onClose,
 }) => {
 	const { apiConfiguration, currentTaskItem, checkpointTrackerErrorMessage } = useExtensionState()
@@ -37,6 +40,9 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	const textContainerRef = useRef<HTMLDivElement>(null)
 	const textRef = useRef<HTMLDivElement>(null)
 
+	const { selectedModelInfo } = useMemo(() => normalizeApiConfiguration(apiConfiguration), [apiConfiguration])
+	const contextWindow = selectedModelInfo?.contextWindow
+
 	/*
 	When dealing with event listeners in React components that depend on state variables, we face a challenge. We want our listener to always use the most up-to-date version of a callback function that relies on current state, but we don't want to constantly add and remove event listeners as that function updates. This scenario often arises with resize listeners or other window events. Simply adding the listener in a useEffect with an empty dependency array risks using stale state, while including the callback in the dependencies can lead to unnecessary re-registrations of the listener. There are react hook libraries that provide a elegant solution to this problem by utilizing the useRef hook to maintain a reference to the latest callback function without triggering re-renders or effect re-runs. This approach ensures that our event listener always has access to the most current state while minimizing performance overhead and potential memory leaks from multiple listener registrations. 
 	Sources
@@ -105,6 +111,68 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 
 	const shouldShowPromptCacheInfo = doesModelSupportPromptCache && apiConfiguration?.apiProvider !== "openrouter"
 
+	const ContextWindowComponent = (
+		<>
+			{isTaskExpanded && contextWindow && lastApiReqTotalTokens && (
+				<div
+					style={{
+						display: "flex",
+						flexDirection: windowWidth < 270 ? "column" : "row",
+						gap: "4px",
+					}}>
+					<div
+						style={{
+							display: "flex",
+							alignItems: "center",
+							gap: "4px",
+							flexShrink: 0, // Prevents shrinking
+						}}>
+						<span style={{ fontWeight: "bold" }}>
+							{/* {windowWidth > 280 && windowWidth < 310 ? "Context:" : "Context Window:"} */}
+							Context Window:
+						</span>
+					</div>
+					<div
+						style={{
+							display: "flex",
+							alignItems: "center",
+							gap: "3px",
+							flex: 1,
+							whiteSpace: "nowrap",
+						}}>
+						<span>{formatLargeNumber(lastApiReqTotalTokens)}</span>
+						<div
+							style={{
+								display: "flex",
+								alignItems: "center",
+								gap: "3px",
+								flex: 1,
+							}}>
+							<div
+								style={{
+									flex: 1,
+									height: "4px",
+									backgroundColor: "color-mix(in srgb, var(--vscode-badge-foreground) 20%, transparent)",
+									borderRadius: "2px",
+									overflow: "hidden",
+								}}>
+								<div
+									style={{
+										width: `${(lastApiReqTotalTokens / contextWindow) * 100}%`,
+										height: "100%",
+										backgroundColor: "var(--vscode-badge-foreground)",
+										borderRadius: "2px",
+									}}
+								/>
+							</div>
+							<span>{formatLargeNumber(contextWindow)}</span>
+						</div>
+					</div>
+				</div>
+			)}
+		</>
+	)
+
 	return (
 		<div style={{ padding: "10px 13px 10px 13px" }}>
 			<div
@@ -354,6 +422,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 									</span>
 								</div>
 							)}
+							{ContextWindowComponent}
 							{isCostAvailable && (
 								<div
 									style={{

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

@@ -0,0 +1,36 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import styled from "styled-components"
+
+const StyledButton = styled(VSCodeButton)`
+	--settings-button-bg: var(--vscode-button-secondaryBackground);
+	--settings-button-hover: var(--vscode-button-secondaryHoverBackground);
+	--settings-button-active: var(--vscode-button-secondaryBackground);
+
+	background-color: var(--settings-button-bg) !important;
+	border-color: var(--settings-button-bg) !important;
+	width: 100% !important;
+
+	&:hover {
+		background-color: var(--settings-button-hover) !important;
+		border-color: var(--settings-button-hover) !important;
+	}
+
+	&:active {
+		background-color: var(--settings-button-active) !important;
+		border-color: var(--settings-button-active) !important;
+	}
+
+	i.codicon {
+		margin-right: 6px;
+		flex-shrink: 0;
+		font-size: 16px !important;
+	}
+`
+
+interface SettingsButtonProps extends React.ComponentProps<typeof VSCodeButton> {}
+
+const SettingsButton: React.FC<SettingsButtonProps> = (props) => {
+	return <StyledButton appearance="secondary" {...props} />
+}
+
+export default SettingsButton

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

@@ -12,6 +12,7 @@ type McpViewProps = {
 
 const McpView = ({ onDone }: McpViewProps) => {
 	const { mcpServers: servers } = useExtensionState()
+
 	// const [servers, setServers] = useState<McpServer[]>([
 	// 	// Add some mock servers for testing
 	// 	{
@@ -100,7 +101,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 					style={{
 						color: "var(--vscode-foreground)",
 						fontSize: "13px",
-						marginBottom: "20px",
+						marginBottom: "16px",
 						marginTop: "5px",
 					}}>
 					The{" "}
@@ -118,7 +119,6 @@ const McpView = ({ onDone }: McpViewProps) => {
 					</VSCodeLink>
 				</div>
 
-				{/* Server List */}
 				{servers.length > 0 && (
 					<div
 						style={{
@@ -132,7 +132,8 @@ const McpView = ({ onDone }: McpViewProps) => {
 					</div>
 				)}
 
-				{/* Edit Settings Button */}
+				{/* Server Configuration Button */}
+
 				<div style={{ marginTop: "10px", width: "100%" }}>
 					<VSCodeButton
 						appearance="secondary"
@@ -140,11 +141,25 @@ const McpView = ({ onDone }: McpViewProps) => {
 						onClick={() => {
 							vscode.postMessage({ type: "openMcpSettings" })
 						}}>
-						<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
-						Edit MCP Settings
+						<span className="codicon codicon-server" style={{ marginRight: "6px" }}></span>
+						Configure MCP Servers
 					</VSCodeButton>
 				</div>
 
+				{/* Advanced Settings Link */}
+				<div style={{ textAlign: "center", marginTop: "5px" }}>
+					<VSCodeLink
+						onClick={() => {
+							vscode.postMessage({
+								type: "openExtensionSettings",
+								text: "cline.mcp",
+							})
+						}}
+						style={{ fontSize: "12px" }}>
+						Advanced MCP Settings
+					</VSCodeLink>
+				</div>
+
 				{/* Bottom padding */}
 				<div style={{ height: "20px" }} />
 			</div>

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

@@ -50,9 +50,9 @@ 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 DropdownContainer = styled.div`
+const DropdownContainer = styled.div<{ zIndex?: number }>`
 	position: relative;
-	z-index: ${DROPDOWN_Z_INDEX};
+	z-index: ${(props) => props.zIndex || DROPDOWN_Z_INDEX};
 
 	// Force dropdowns to open downward
 	& vscode-dropdown::part(listbox) {
@@ -406,7 +406,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 						placeholder="Enter Session Token...">
 						<span style={{ fontWeight: 500 }}>AWS Session Token</span>
 					</VSCodeTextField>
-					<div className="dropdown-container">
+					<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 1} className="dropdown-container">
 						<label htmlFor="aws-region-dropdown">
 							<span style={{ fontWeight: 500 }}>AWS Region</span>
 						</label>
@@ -442,7 +442,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							<VSCodeOption value="us-gov-west-1">us-gov-west-1</VSCodeOption>
 							{/* <VSCodeOption value="us-gov-east-1">us-gov-east-1</VSCodeOption> */}
 						</VSCodeDropdown>
-					</div>
+					</DropdownContainer>
 					<VSCodeCheckbox
 						checked={apiConfiguration?.awsUseCrossRegionInference || false}
 						onChange={(e: any) => {
@@ -481,7 +481,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 						placeholder="Enter Project ID...">
 						<span style={{ fontWeight: 500 }}>Google Cloud Project ID</span>
 					</VSCodeTextField>
-					<div className="dropdown-container">
+					<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
 						<label htmlFor="vertex-region-dropdown">
 							<span style={{ fontWeight: 500 }}>Google Cloud Region</span>
 						</label>
@@ -497,7 +497,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							<VSCodeOption value="europe-west4">europe-west4</VSCodeOption>
 							<VSCodeOption value="asia-southeast1">asia-southeast1</VSCodeOption>
 						</VSCodeDropdown>
-					</div>
+					</DropdownContainer>
 					<p
 						style={{
 							fontSize: "12px",
@@ -613,7 +613,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 
 			{selectedProvider === "vscode-lm" && (
 				<div>
-					<div className="dropdown-container">
+					<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
 						<label htmlFor="vscode-lm-model">
 							<span style={{ fontWeight: 500 }}>Language Model</span>
 						</label>
@@ -669,7 +669,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							}}>
 							Note: This is a very experimental integration and may not work as expected.
 						</p>
-					</div>
+					</DropdownContainer>
 				</div>
 			)}
 
@@ -818,7 +818,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 				selectedProvider !== "vscode-lm" &&
 				showModelOptions && (
 					<>
-						<div className="dropdown-container">
+						<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
 							<label htmlFor="model-id">
 								<span style={{ fontWeight: 500 }}>Model</span>
 							</label>
@@ -829,7 +829,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							{selectedProvider === "openai-native" && createDropdown(openAiNativeModels)}
 							{selectedProvider === "deepseek" && createDropdown(deepSeekModels)}
 							{selectedProvider === "mistral" && createDropdown(mistralModels)}
-						</div>
+						</DropdownContainer>
 
 						<ModelInfoView
 							selectedModelId={selectedModelId}

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

@@ -0,0 +1,360 @@
+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 styled from "styled-components"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+import { highlight } from "../history/HistoryView"
+
+const OpenAiModelPicker: React.FC = () => {
+	const { apiConfiguration, setApiConfiguration, openAiModels } = useExtensionState()
+	const [searchTerm, setSearchTerm] = useState(apiConfiguration?.openAiModelId || "")
+	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
+	const [selectedIndex, setSelectedIndex] = useState(-1)
+	const dropdownRef = useRef<HTMLDivElement>(null)
+	const itemRefs = useRef<(HTMLDivElement | null)[]>([])
+	const dropdownListRef = useRef<HTMLDivElement>(null)
+
+	const handleModelChange = (newModelId: string) => {
+		// could be setting invalid model id/undefined info but validation will catch it
+		setApiConfiguration({
+			...apiConfiguration,
+			openAiModelId: newModelId,
+		})
+		setSearchTerm(newModelId)
+	}
+
+	useEffect(() => {
+		vscode.postMessage({ type: "refreshOpenAiModels" })
+	}, [apiConfiguration?.openAiBaseUrl, apiConfiguration?.openAiApiKey])
+
+	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 openAiModels.sort((a, b) => a.localeCompare(b))
+	}, [openAiModels])
+
+	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
+		// results.sort((a, b) => a.id.localeCompare(b.id)) NOTE: sorting like this causes ids in objects to be reordered and mismatched
+		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
+		}
+	}
+
+	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 (
+		<>
+			<style>
+				{`
+				.model-item-highlight {
+					background-color: var(--vscode-editor-findMatchHighlightBackground);
+					color: inherit;
+				}
+				`}
+			</style>
+			<div>
+				<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: OPENAI_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>
+		</>
+	)
+}
+
+export default OpenAiModelPicker
+
+// Dropdown
+
+const DropdownWrapper = styled.div`
+	position: relative;
+	width: 100%;
+`
+
+export const OPENAI_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: ${OPENAI_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);
+	}
+`
+
+// 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,
+	}: {
+		markdown?: string
+		key: string
+		isExpanded: boolean
+		setIsExpanded: (isExpanded: boolean) => void
+	}) => {
+		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: "var(--vscode-sideBar-background)",
+								}}
+								onClick={() => setIsExpanded(true)}>
+								See more
+							</VSCodeLink>
+						</div>
+					)}
+				</div>
+			</StyledMarkdown>
+		)
+	},
+)

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

@@ -4,7 +4,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
-
+import SettingsButton from "../common/SettingsButton"
 const IS_DEV = false // FIXME: use flags when packaging
 
 type SettingsViewProps = {
@@ -98,6 +98,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					<VSCodeTextArea
 						value={customInstructions ?? ""}
 						style={{ width: "100%" }}
+						resize="vertical"
 						rows={4}
 						placeholder={'e.g. "Run unit tests at the end", "Use TypeScript with async/await", "Speak in Spanish"'}
 						onInput={(e: any) => setCustomInstructions(e.target?.value ?? "")}>
@@ -130,14 +131,29 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					</>
 				)}
 
+				<div
+					style={{
+						marginTop: "auto",
+						paddingRight: 8,
+						display: "flex",
+						justifyContent: "center",
+					}}>
+					<SettingsButton
+						onClick={() => vscode.postMessage({ type: "openExtensionSettings" })}
+						style={{
+							margin: "0 0 16px 0",
+						}}>
+						<i className="codicon codicon-settings-gear" />
+						Advanced Settings
+					</SettingsButton>
+				</div>
 				<div
 					style={{
 						textAlign: "center",
 						color: "var(--vscode-descriptionForeground)",
 						fontSize: "12px",
 						lineHeight: "1.2",
-						marginTop: "auto",
-						padding: "10px 8px 15px 0px",
+						padding: "0 8px 15px 0",
 					}}>
 					<p
 						style={{

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

@@ -1,14 +1,18 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { useEffect, useState } from "react"
+import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { useEffect, useState, useCallback } from "react"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "../settings/ApiOptions"
+import { useEvent } from "react-use"
+import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 
 const WelcomeView = () => {
 	const { apiConfiguration } = useExtensionState()
 
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
+	const [email, setEmail] = useState("")
+	const [isSubscribed, setIsSubscribed] = useState(false)
 
 	const disableLetsGoButton = apiErrorMessage != null
 
@@ -16,10 +20,27 @@ const WelcomeView = () => {
 		vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
 	}
 
+	const handleSubscribe = () => {
+		if (email) {
+			vscode.postMessage({ type: "subscribeEmail", text: email })
+		}
+	}
+
 	useEffect(() => {
 		setApiErrorMessage(validateApiConfiguration(apiConfiguration))
 	}, [apiConfiguration])
 
+	// Add message handler for subscription confirmation
+	const handleMessage = useCallback((e: MessageEvent) => {
+		const message: ExtensionMessage = e.data
+		if (message.type === "emailSubscribed") {
+			setIsSubscribed(true)
+			setEmail("")
+		}
+	}, [])
+
+	useEvent("message", handleMessage)
+
 	return (
 		<div
 			style={{
@@ -28,28 +49,69 @@ const WelcomeView = () => {
 				left: 0,
 				right: 0,
 				bottom: 0,
-				padding: "0 20px",
 			}}>
-			<h2>Hi, I'm Cline</h2>
-			<p>
-				I can do all kinds of tasks thanks to the latest breakthroughs in{" "}
-				<VSCodeLink
-					href="https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf"
-					style={{ display: "inline" }}>
-					Claude 3.5 Sonnet's agentic coding capabilities
-				</VSCodeLink>{" "}
-				and access to tools that let me create & edit files, explore complex projects, use the browser, and execute
-				terminal commands (with your permission, of course). I can even use MCP to create new tools and extend my own
-				capabilities.
-			</p>
+			<div
+				style={{
+					height: "100%",
+					padding: "0 20px",
+					overflow: "auto",
+				}}>
+				<h2>Hi, I'm Cline</h2>
+				<p>
+					I can do all kinds of tasks thanks to the latest breakthroughs in{" "}
+					<VSCodeLink
+						href="https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf"
+						style={{ display: "inline" }}>
+						Claude 3.5 Sonnet's agentic coding capabilities
+					</VSCodeLink>{" "}
+					and access to tools that let me create & edit files, explore complex projects, use the browser, and execute
+					terminal commands (with your permission, of course). I can even use MCP to create new tools and extend my own
+					capabilities.
+				</p>
 
-			<b>To get started, this extension needs an API provider for Claude 3.5 Sonnet.</b>
+				<b>To get started, this extension needs an API provider for Claude 3.5 Sonnet.</b>
 
-			<div style={{ marginTop: "10px" }}>
-				<ApiOptions showModelOptions={false} />
-				<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton} style={{ marginTop: "3px" }}>
-					Let's go!
-				</VSCodeButton>
+				<div
+					style={{
+						marginTop: "15px",
+						padding: isSubscribed ? "5px 15px 5px 15px" : "12px",
+						background: "var(--vscode-textBlockQuote-background)",
+						borderRadius: "6px",
+						fontSize: "0.9em",
+					}}>
+					{isSubscribed ? (
+						<p style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+							<span style={{ color: "var(--vscode-testing-iconPassed)", fontSize: "1.5em" }}>✓</span>
+							Thanks for subscribing! We'll keep you updated on new features.
+						</p>
+					) : (
+						<>
+							<p style={{ margin: 0, marginBottom: "8px" }}>
+								While Cline currently requires you bring your own API key, we are working on an official accounts
+								system with additional capabilities. Subscribe to our mailing list to get updates!
+							</p>
+							<div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+								<VSCodeTextField
+									type="email"
+									value={email}
+									onInput={(e: any) => setEmail(e.target.value)}
+									placeholder="Enter your email"
+									style={{ flex: 1 }}
+								/>
+								<VSCodeButton appearance="secondary" onClick={handleSubscribe} disabled={!email}>
+									Subscribe
+								</VSCodeButton>
+							</div>
+						</>
+					)}
+				</div>
+
+				<div style={{ marginTop: "15px" }}>
+					<ApiOptions showModelOptions={false} />
+					<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton} style={{ marginTop: "3px" }}>
+						Let's go!
+					</VSCodeButton>
+				</div>
 			</div>
 		</div>
 	)

webview-ui/src/context/ExtensionStateContext.tsx

@@ -15,6 +15,7 @@ interface ExtensionStateContextType extends ExtensionState {
 	showWelcome: boolean
 	theme: any
 	openRouterModels: Record<string, ModelInfo>
+	openAiModels: string[]
 	mcpServers: McpServer[]
 	filePaths: string[]
 	setApiConfiguration: (config: ApiConfiguration) => void
@@ -35,6 +36,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		autoApprovalSettings: DEFAULT_AUTO_APPROVAL_SETTINGS,
 		browserSettings: DEFAULT_BROWSER_SETTINGS,
 		chatSettings: DEFAULT_CHAT_SETTINGS,
+		isLoggedIn: false,
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
@@ -43,6 +45,8 @@ export const ExtensionStateContextProvider: React.FC<{
 	const [openRouterModels, setOpenRouterModels] = useState<Record<string, ModelInfo>>({
 		[openRouterDefaultModelId]: openRouterDefaultModelInfo,
 	})
+
+	const [openAiModels, setOpenAiModels] = useState<string[]>([])
 	const [mcpServers, setMcpServers] = useState<McpServer[]>([])
 
 	const handleMessage = useCallback((event: MessageEvent) => {
@@ -103,6 +107,11 @@ export const ExtensionStateContextProvider: React.FC<{
 				})
 				break
 			}
+			case "openAiModels": {
+				const updatedModels = message.openAiModels ?? []
+				setOpenAiModels(updatedModels)
+				break
+			}
 			case "mcpServers": {
 				setMcpServers(message.mcpServers ?? [])
 				break
@@ -122,6 +131,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		showWelcome,
 		theme,
 		openRouterModels,
+		openAiModels,
 		mcpServers,
 		filePaths,
 		setApiConfiguration: (value) =>

webview-ui/src/utils/vscStyles.ts

@@ -0,0 +1,41 @@
+export const VSC_INPUT_BACKGROUND = "--vscode-input-background"
+export const VSC_SIDEBAR_BACKGROUND = "--vscode-sideBar-background"
+export const VSC_FOREGROUND = "--vscode-foreground"
+export const VSC_EDITOR_FOREGROUND = "--vscode-editor-foreground"
+export const VSC_FOREGROUND_MUTED = "--vscode-foreground-muted"
+export const VSC_DESCRIPTION_FOREGROUND = "--vscode-descriptionForeground"
+export const VSC_INPUT_PLACEHOLDER_FOREGROUND = "--vscode-input-placeholderForeground"
+export const VSC_BUTTON_BACKGROUND = "--vscode-button-background"
+export const VSC_BUTTON_FOREGROUND = "--vscode-button-foreground"
+export const VSC_EDITOR_BACKGROUND = "--vscode-editor-background"
+export const VSC_LIST_SELECTION_BACKGROUND = "--vscode-list-activeSelectionBackground"
+export const VSC_FOCUS_BORDER = "--vscode-focus-border"
+export const VSC_LIST_ACTIVE_FOREGROUND = "--vscode-quickInputList-focusForeground"
+export const VSC_QUICK_INPUT_BACKGROUND = "--vscode-quickInput-background"
+export const VSC_INPUT_BORDER = "--vscode-input-border"
+export const VSC_INPUT_BORDER_FOCUS = "--vscode-focusBorder"
+export const VSC_BADGE_BACKGROUND = "--vscode-badge-background"
+export const VSC_BADGE_FOREGROUND = "--vscode-badge-foreground"
+export const VSC_SIDEBAR_BORDER = "--vscode-sideBar-border"
+export const VSC_DIFF_REMOVED_LINE_BACKGROUND = "--vscode-diffEditor-removedLineBackground"
+export const VSC_DIFF_INSERTED_LINE_BACKGROUND = "--vscode-diffEditor-insertedLineBackground"
+export const VSC_INACTIVE_SELECTION_BACKGROUND = "--vscode-editor-inactiveSelectionBackground"
+export const VSC_TITLEBAR_INACTIVE_FOREGROUND = "--vscode-titleBar-inactiveForeground"
+
+export function getAsVar(varName: string): string {
+	return `var(${varName})`
+}
+
+export function hexToRGB(hexColor: string): { r: number; g: number; b: number } {
+	const hex = hexColor.replace(/^#/, "").slice(0, 6)
+	const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16))
+	return { r, g, b }
+}
+
+export function colorToHex(colorVar: string): string {
+	const value = getComputedStyle(document.documentElement).getPropertyValue(colorVar).trim()
+	if (value.startsWith("#")) return value.slice(0, 7)
+
+	const rgbValues = value.match(/\d+/g)?.slice(0, 3).map(Number) || []
+	return `#${rgbValues.map((x) => x.toString(16).padStart(2, "0")).join("")}`
+}