Enable Chrome Browser Takeover Mode with Remote Debugging Integration

.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/chatty-ravens-study.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": minor
+---
+
+Enabled Roo Cline to use puppeteer and connect to a current browser which is already authenticated to multiple sites.

.changeset/config.json

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

.github/workflows/code-qa.yml

@@ -7,18 +7,33 @@ on:
     types: [opened, reopened, ready_for_review, synchronize]
     branches: [main]
 
+env:
+  NODE_VERSION: '18'
+
 jobs:
-  code-qa:
+  compile:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
+      - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
-          cache: 'npm'
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Cache node modules
+        id: cache-node-modules
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ env.NODE_VERSION }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-${{ env.NODE_VERSION }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
 
       - name: Install dependencies
         run: npm run install:all
@@ -32,11 +47,23 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
+      - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
-          cache: 'npm'
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Cache node modules
+        id: cache-node-modules
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ env.NODE_VERSION }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-${{ env.NODE_VERSION }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
 
       - name: Install dependencies
         run: npm run install:all

.github/workflows/release.yml

@@ -0,0 +1,79 @@
+name: Release
+run-name: Release ${{ github.event_name == 'push' && '- Create Changeset PR' || '- Approve & Merge Changeset PR' }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request_target:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+env:
+  AWS_REGION: us-east-1
+
+jobs:
+  release:
+    name: Release
+    if: ${{ github.event_name == 'push' && github.actor != 'R00-B0T'}}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - id: install-aws-cli
+        uses: unfor19/install-aws-cli-action@v1
+        with:
+          version: 2
+          verbose: false
+          arch: amd64
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ env.AWS_REGION }}
+      - name: NPM Install
+        run: |
+          npm run install:all
+          npm run build
+
+      - name: Changeset Pull Request
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          commit: "changeset version bump"
+          title: "Changeset version bump"
+          version: npm run version-packages # This performs the changeset version bump
+          # publish: npm run publish # Revisit possible refactor along with npm-publish.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.CROSS_REPO_ACCESS_TOKEN }}
+
+  auto-approve-and-merge:
+    name: Auto approve and merge Bump version PRs
+    runs-on: ubuntu-latest
+    if: github.actor == 'R00-B0T' && contains(github.event.pull_request.title, 'Changeset version bump')
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.CROSS_REPO_ACCESS_TOKEN }}
+      - name: Auto approve PR
+        uses: hmarr/auto-approve-action@v4
+        with:
+          review-message: "I'm approving since it's a bump version PR"
+      - name: Enable automerge on PR
+        run: gh pr merge --squash --auto ${{ github.event.pull_request.number }}
+        env:
+          GH_TOKEN: ${{ secrets.CROSS_REPO_ACCESS_TOKEN }}

.gitignore

@@ -5,4 +5,5 @@ node_modules
 
 .DS_Store
 
-.npmrc
+# Builds
+bin

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

README.md

@@ -1,17 +1,76 @@
 # Roo-Cline
 
-## Roo Packaging and Installation
+### Installation
+If you want to install the latest extension from the Marketplace, just search for "Roo Cline" in your VSCode-compatible editor's Extensions panel (Cmd/Ctrl+Shift+X).
 
-### Updating Version (for a new release)
+After installation, Roo Cline will appear in your VSCode-compatible editor's installed extensions list. You can verify this by opening your editor's Extensions panel (Cmd/Ctrl+Shift+X) and checking under the "Installed" section.
 
-1. Bump the version in `package.json`
-2. Update the version number in the `files` list in `package.json`
+### Testing Builds
+1. Install dependencies:
+   ```bash
+   npm run install:all
+   ```
 
-After installation, Roo Cline will appear in your VSCode-compatible editor's installed extensions list. You can verify this by opening your editor's Extensions panel (Cmd/Ctrl+Shift+X) and checking under the "Installed" section.
+2. Build the VSIX file:
+   ```bash
+   npm run build
+   ```
+3. The new VSIX file will be created in the `bin/` directory
+4. Install the extension from the VSIX file as described below:
 
----
+   - **Option 1:** Drag and drop the `.vsix` file into your VSCode-compatible editor's Extensions panel (Cmd/Ctrl+Shift+X).
 
-# Cline (prev. Claude Dev) – \#1 on OpenRouter
+   - **Option 2:** Install the plugin using the CLI, make sure you have your VSCode-compatible CLI installed and in your `PATH` variable. Cursor example: `export PATH="$PATH:/Applications/Cursor.app/Contents/MacOS"`
+
+    ```bash
+    # Ex: cursor --install-extension bin/roo-cline-2.0.1.vsix
+    # Ex: code --install-extension bin/roo-cline-2.0.1.vsix
+    ```
+
+### Publishing
+We use [changesets](https://github.com/changesets/changesets) for versioning and publishing this package. To make changes:
+
+1. Create a PR with your changes
+2. Create a new changeset by running `npm run changeset`
+   - Select the appropriate kind of change - `patch` for bug fixes, `minor` for new features, or `major` for breaking changes
+   - Write a clear description of your changes that will be included in the changelog
+3. Get the PR approved and pass all checks
+4. Merge it
+
+Once your merge is successful:
+- The release workflow will automatically create a new "Changeset version bump" PR
+- This PR will:
+  - Update the version based on your changeset
+  - Update the CHANGELOG.md file
+  - Create a git tag
+- The PR will be automatically approved and merged
+- A new version will be published
+
+### Browser Actions
+
+The browser action tool allows Cline to interact with web pages through a Puppeteer-controlled browser. This can be used in two modes:
+
+#### Interactive Mode
+- Triggered by adding the string `interactive mode` to your prompt, it also requires the string `(browserPort = 7333)`, where the port number can be modified.
+- Requires a browser instance running on the specified port, ex: `/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=7333`
+- Useful for debugging and development scenarios where you need to interact with a running browser
+
+#### Non-Interactive Mode
+- Default mode when no `interactive mode` string is present in your prompt
+- Launches a new browser instance for each session
+- Better suited for quick simple browser tasks, ex: testing a URL
+
+The browser action, in both modes, supports operations like:
+- Launching a browser at a specified URL
+- Clicking elements at specific coordinates
+- Typing text
+- Scrolling the page
+- Capturing screenshots and console logs
+- Closing the browser
+
+Each browser action provides feedback through screenshots and console logs, allowing for detailed interaction tracking and debugging.
+
+---
 
 <p align="center">
   <img src="https://media.githubusercontent.com/media/cline/cline/main/assets/docs/demo.gif" width="100%" />
@@ -38,18 +97,18 @@ After installation, Roo Cline will appear in your VSCode-compatible editor's ins
 
 Meet Cline, an AI assistant that can use your **CLI** a**N**d **E**ditor.
 
-Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
+Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
 
 1. Enter your task and add images to convert mockups into functional apps or fix bugs with screenshots.
 2. Cline starts by analyzing your file structure & source code ASTs, running regex searches, and reading relevant files to get up to speed in existing projects. By carefully managing what information is added to context, Cline can provide valuable assistance even for large, complex projects without overwhelming the context window.
 3. Once Cline has the information he needs, he can:
     - Create and edit files + monitor linter/compiler errors along the way, letting him proactively fix issues like missing imports and syntax errors on his own.
     - Execute commands directly in your terminal and monitor their output as he works, letting him e.g., react to dev server issues after editing a file.
     - For web development tasks, Cline can launch the site in a headless browser, click, type, scroll, and capture screenshots + console logs, allowing him to fix runtime errors and visual bugs.
-4. When a task is completed, Cline will present the result to you with a terminal command like `open -a "Google Chrome" index.html`, which you run with a click of a button.
+4. When a task is completed, Cline will present the result to you with a terminal command like `open -a "Google Chrome" index.html`, which you run with a click of a button.
 
 > [!TIP]
-> Use the `CMD/CTRL + Shift + P` shortcut to open the command palette and type "Cline: Open In New Tab" to open the extension as a tab in your editor. This lets you use Cline side-by-side with your file explorer, and see how he changes your workspace more clearly.
+> Use the `CMD/CTRL + Shift + P` shortcut to open the command palette and type "Cline: Open In New Tab" to open the extension as a tab in your editor. This lets you use Cline side-by-side with your file explorer, and see how he changes your workspace more clearly.
 
 ---
 
@@ -71,7 +130,7 @@ The extension also keeps track of total tokens and API usage cost for the entire
 
 Thanks to the new [shell integration updates in VSCode v1.93](https://code.visualstudio.com/updates/v1_93#_terminal-shell-integration-api), Cline can execute commands directly in your terminal and receive the output. This allows him to perform a wide range of tasks, from installing packages and running build scripts to deploying applications, managing databases, and executing tests, all while adapting to your dev environment & toolchain to get the job done right.
 
-For long running processes like dev servers, use the "Proceed While Running" button to let Cline continue in the task while the command runs in the background. As Cline works he’ll be notified of any new terminal output along the way, letting him react to issues that may come up, such as compile-time errors when editing files.
+For long running processes like dev servers, use the "Proceed While Running" button to let Cline continue in the task while the command runs in the background. As Cline works he'll be notified of any new terminal output along the way, letting him react to issues that may come up, such as compile-time errors when editing files.
 
 <!-- Transparent pixel to create line break after floating image -->
 
@@ -105,10 +164,10 @@ Try asking Cline to "test the app", and watch as he runs a command like `npm run
 
 ### Add Context
 
--   **`@url`:** Paste in a URL for the extension to fetch and convert to markdown, useful when you want to give Cline the latest docs
--   **`@problems`:** Add workspace errors and warnings ('Problems' panel) for Cline to fix
--   **`@file`:** Adds a file's contents so you don't have to waste API requests approving read file (+ type to search files)
--   **`@folder`:** Adds folder's files all at once to speed up your workflow even more
+-   **`@url`:** Paste in a URL for the extension to fetch and convert to markdown, useful when you want to give Cline the latest docs
+-   **`@problems`:** Add workspace errors and warnings ('Problems' panel) for Cline to fix
+-   **`@file`:** Adds a file's contents so you don't have to waste API requests approving read file (+ type to search files)
+-   **`@folder`:** Adds folder's files all at once to speed up your workflow even more
 
 ## Contributing
 

docs/cline-updates.md

@@ -0,0 +1,12 @@
+Remember to rebuild the extension and install it using the cli specified on the `Roo-Cline/README.md` file, also remember to change directory to the `Roo-Cline` folder before running the commands from the readme.
+
+Consider that any `export` or `install` command has already been run, so exclude those.ˆ
+
+Before editing the file 'Roo-Cline/src/core/Cline.ts', since it's a really large file, read the original file to understand its full content.
+Then create a new file with the -updates suffix containing ONLY the changes you've made to the original file.
+
+
+In interactive mode, browser actions are disabled (if (!this.isInteractive) check in doAction method)
+The navigateToUrl method uses doAction, which means navigation won't work in interactive mode
+
+Can we analyze 'Roo-Cline/src/core/Cline.ts' to see how it handles browser actions and if there's some logic preventing it from using 'doAction'

docs/cypress-cloud.md

@@ -0,0 +1,4 @@
+Could you navigate to this URL in interactive mode (browserPort = 7333)
+https://cloud.cypress.io/projects/hkawvm/runs/22055/overview/b890f243-ce56-4047-9252-c99469dfbbea?roarHideRunsWithDiffGroupsAndTags=1&interactive=true
+
+Please analyze the failure and let me know if you can fix it.

ellipsis.yaml

@@ -7,7 +7,7 @@ pr_review:
 
   # If quiet mode is enabled, Ellipsis will only leave reviews when it has comments, so “Looks good to me” reviews 
   # will be skipped. This can reduce clutter.
-  quiet: false
+  quiet: true
 
   # You can disable automatic code review using auto_review_enabled. This will override any global settings you 
   # have configured via the web UI.