fix(bru-2035): form-urlencoded logic updates (#5820)

* fix: enhance URL parameter parsing and interpolation logic

.github/CODEOWNERS

@@ -1 +1 @@
-* @helloanoop @maintainer-bruno @lohit-bruno @naman-bruno
+* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno

.github/actions/common/setup-node-deps/action.yml

@@ -0,0 +1,26 @@
+name: 'Setup Node Dependencies'
+description: 'Install Node.js and npm dependencies'
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: v22.17.0
+        cache: 'npm'
+        cache-dependency-path: './package-lock.json'
+    
+    - name: Install node dependencies
+      shell: bash
+      run: npm ci --legacy-peer-deps
+    
+    - name: Build libraries
+      shell: bash
+      run: |
+        npm run build:graphql-docs
+        npm run build:bruno-query
+        npm run build:bruno-common
+        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
+        npm run build:bruno-converters
+        npm run build:bruno-requests
+        npm run build:bruno-filestore

.github/actions/ssl/linux/run-basic-ssl-cli-tests/action.yml

@@ -0,0 +1,36 @@
+name: 'Run Basic SSL CLI Tests - Linux'
+description: 'Run basic SSL CLI tests on Linux'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run CLI tests
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        # navigate to basic SSL test collection directory
+        cd tests/ssl/basic-ssl/collections/badssl
+
+        echo "basic ssl success"
+        # should pass
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --insecure --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
+
+        echo "with default/system ca certs"
+        # should pass
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
+
+        # navigate to self-signed SSL test collection directory
+        cd ../self-signed-badssl
+
+        echo "self-signed ssl with validation disabled"
+        # should pass
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --insecure --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit3.xml | grep -q "^1$" || exit 1
+
+        echo "self-signed ssl with default/system ca certs"
+        echo "request will error"
+        # should fail
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --format junit 2>/dev/null || true
+        xmllint --xpath 'count(//testsuite[@errors="1"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/linux/run-custom-ca-certs-cli-tests/action.yml

@@ -0,0 +1,33 @@
+name: 'Run Custom CA Certs CLI Tests - Linux'
+description: 'Run custom CA certs CLI tests on Linux'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run CLI tests
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        # navigate to CA certificates test collection directory
+        cd tests/ssl/custom-ca-certs/collection
+
+        echo "custom valid ca cert"
+        # should pass
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --cacert ../server/certs/ca-cert.pem --ignore-truststore --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
+
+        echo "custom valid ca cert with defaults"
+        # should pass
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --cacert ../server/certs/ca-cert.pem --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
+
+        echo "custom invalid ca cert"
+        echo "request will error"
+        # should fail
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --cacert ../server/certs/ca-key.pem --ignore-truststore --format junit 2>/dev/null || true
+        xmllint --xpath 'count(//testsuite[@errors="1"])' junit3.xml | grep -q "^1$" || exit 1
+
+        echo "custom invalid ca cert with defaults"
+        # should pass
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --cacert ../server/certs/ca-key.pem --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/linux/run-ssl-e2e-tests/action.yml

@@ -0,0 +1,19 @@
+name: 'Run SSL E2E Tests - Linux'
+description: 'Run SSL E2E tests on Linux'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run E2E tests
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        xvfb-run npm run test:e2e:ssl
+
+    - name: Upload Playwright Report
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report-linux
+        path: playwright-report/
+        retention-days: 30

.github/actions/ssl/linux/setup-ca-certs/action.yml

@@ -0,0 +1,26 @@
+name: 'Setup CA Certificates - Linux'
+description: 'Setup CA certificates and start test server for custom CA certs tests on Linux'
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup CA certificates
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        cd tests/ssl/custom-ca-certs/server
+        
+        echo "running certificate setup"
+        node scripts/generate-certs.js
+
+    - name: Start test server
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        cd tests/ssl/custom-ca-certs/server
+        
+        echo "starting server in background"
+        node index.js &
+        
+        echo "server started with PID: $!"

.github/actions/ssl/linux/setup-feature-specific-deps/action.yml

@@ -0,0 +1,15 @@
+name: 'Setup Custom CA Certs Feature Dependencies - Linux'
+description: 'Setup feature-specific dependencies for custom CA certs tests on Linux'
+runs:
+  using: 'composite'
+  steps:
+    - name: Install additional OS dependencies for custom CA certs
+      shell: bash
+      run: |
+        sudo apt-get update
+        sudo apt-get --no-install-recommends install -y \
+          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
+          xvfb libxml2-utils
+
+        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox

.github/actions/ssl/macos/run-basic-ssl-cli-tests/action.yml

@@ -0,0 +1,36 @@
+name: 'Run Basic SSL CLI Tests - macOS'
+description: 'Run basic SSL CLI tests on macOS'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run CLI tests
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        # navigate to basic SSL test collection directory
+        cd tests/ssl/basic-ssl/collections/badssl
+
+        echo "basic ssl success"
+        # should pass
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --insecure --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
+
+        echo "with default/system ca certs"
+        # should pass
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
+
+        # navigate to self-signed SSL test collection directory
+        cd ../self-signed-badssl
+
+        echo "self-signed ssl with validation disabled"
+        # should pass
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --insecure --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit3.xml | grep -q "^1$" || exit 1
+
+        echo "self-signed ssl with default/system ca certs"
+        echo "request will error"
+        # should fail
+        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --format junit 2>/dev/null || true
+        xmllint --xpath 'count(//testsuite[@errors="1"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/macos/run-custom-ca-certs-cli-tests/action.yml

@@ -0,0 +1,33 @@
+name: 'Run Custom CA Certs CLI Tests - macOS'
+description: 'Run custom CA certs CLI tests on macOS'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run CLI tests
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        # navigate to CA certificates test collection directory
+        cd tests/ssl/custom-ca-certs/collection
+
+        echo "custom valid ca cert"
+        # should pass
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --cacert ../server/certs/ca-cert.pem --ignore-truststore --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
+
+        echo "custom valid ca cert with defaults"
+        # should pass
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --cacert ../server/certs/ca-cert.pem --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
+
+        echo "custom invalid ca cert"
+        echo "request will error"
+        # should fail
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --cacert ../server/certs/ca-key.pem --ignore-truststore --format junit 2>/dev/null || true
+        xmllint --xpath 'count(//testsuite[@errors="1"])' junit3.xml | grep -q "^1$" || exit 1
+
+        echo "custom invalid ca cert with defaults"
+        # should pass
+        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --cacert ../server/certs/ca-key.pem --format junit
+        xmllint --xpath 'count(//testsuite[@errors="0"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/macos/run-ssl-e2e-tests/action.yml

@@ -0,0 +1,17 @@
+name: 'Run SSL E2E Tests - macOS'
+description: 'Run SSL E2E tests on macOS'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run E2E tests
+      shell: bash
+      run: |
+        npm run test:e2e:ssl
+
+    - name: Upload Playwright Report
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report-macos
+        path: playwright-report/
+        retention-days: 30

.github/actions/ssl/macos/setup-ca-certs/action.yml

@@ -0,0 +1,26 @@
+name: 'Setup CA Certificates - macOS'
+description: 'Setup CA certificates and start test server for custom CA certs tests on macOS'
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup CA certificates
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        cd tests/ssl/custom-ca-certs/server
+        
+        echo "running certificate setup"
+        node scripts/generate-certs.js
+
+    - name: Start test server
+      shell: bash
+      run: |
+        set -euo pipefail
+        
+        cd tests/ssl/custom-ca-certs/server
+        
+        echo "starting server in background"
+        node index.js &
+        
+        echo "server started with PID: $!"

.github/actions/ssl/macos/setup-feature-specific-deps/action.yml

@@ -0,0 +1,9 @@
+name: 'Setup Custom CA Certs Feature Dependencies - macOS'
+description: 'Setup feature-specific dependencies for custom CA certs tests on macOS'
+runs:
+  using: 'composite'
+  steps:
+    - name: Install additional OS dependencies for custom CA certs
+      shell: bash
+      run: |
+        brew install libxml2

.github/actions/ssl/windows/run-basic-ssl-cli-tests/action.yml

@@ -0,0 +1,50 @@
+name: 'Run Basic SSL CLI Tests - Windows'
+description: 'Run basic SSL CLI tests on Windows'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run CLI tests
+      shell: pwsh
+      run: |
+        Set-StrictMode -Version Latest
+        $ErrorActionPreference = "Stop"
+        
+        # navigate to basic SSL test collection directory
+        Set-Location tests\ssl\basic-ssl\collections\badssl
+
+        Write-Host "basic ssl success"
+        # should pass
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit1.xml --insecure --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        [xml]$xml1 = Get-Content junit1.xml
+        $testsuites1 = if ($xml1.testsuites) { $xml1.testsuites.testsuite } else { $xml1.testsuite }
+        $errorCount1 = ($testsuites1 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
+        if ($errorCount1 -ne 1) { exit 1 }
+
+        Write-Host "with default/system ca certs"
+        # should pass
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit2.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        [xml]$xml2 = Get-Content junit2.xml
+        $testsuites2 = if ($xml2.testsuites) { $xml2.testsuites.testsuite } else { $xml2.testsuite }
+        $errorCount2 = ($testsuites2 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
+        if ($errorCount2 -ne 1) { exit 1 }
+
+        # navigate to self-signed SSL test collection directory
+        Set-Location ..\self-signed-badssl
+
+        Write-Host "self-signed ssl with validation disabled"
+        # should pass
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit3.xml --insecure --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        [xml]$xml3 = Get-Content junit3.xml
+        $testsuites3 = if ($xml3.testsuites) { $xml3.testsuites.testsuite } else { $xml3.testsuite }
+        $errorCount3 = ($testsuites3 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
+        if ($errorCount3 -ne 1) { exit 1 }
+
+        Write-Host "self-signed ssl with default/system ca certs"
+        Write-Host "request will error"
+        # should fail
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit4.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        # Ignore the exit code - we expect this to fail
+        [xml]$xml4 = Get-Content junit4.xml
+        $testsuites4 = if ($xml4.testsuites) { $xml4.testsuites.testsuite } else { $xml4.testsuite }
+        $errorCount4 = ($testsuites4 | Where-Object { $_.errors -eq "1" } | Measure-Object).Count
+        if ($errorCount4 -ne 1) { exit 1 }

.github/actions/ssl/windows/run-custom-ca-certs-cli-tests/action.yml

@@ -0,0 +1,47 @@
+name: 'Run Custom CA Certs CLI Tests - Windows'
+description: 'Run custom CA certs CLI tests on Windows'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run CLI tests
+      shell: pwsh
+      run: |
+        Set-StrictMode -Version Latest
+        $ErrorActionPreference = "Stop"
+        
+        # navigate to CA certificates test collection directory
+        Set-Location tests\ssl\custom-ca-certs\collection
+
+        Write-Host "custom valid ca cert"
+        # should pass
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit1.xml --cacert ..\server\certs\ca-cert.pem --ignore-truststore --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        [xml]$xml1 = Get-Content junit1.xml
+        $testsuites1 = if ($xml1.testsuites) { $xml1.testsuites.testsuite } else { $xml1.testsuite }
+        $errorCount1 = ($testsuites1 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
+        if ($errorCount1 -ne 1) { exit 1 }
+
+        Write-Host "custom valid ca cert with defaults"
+        # should pass
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit2.xml --cacert ..\server\certs\ca-cert.pem --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        [xml]$xml2 = Get-Content junit2.xml
+        $testsuites2 = if ($xml2.testsuites) { $xml2.testsuites.testsuite } else { $xml2.testsuite }
+        $errorCount2 = ($testsuites2 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
+        if ($errorCount2 -ne 1) { exit 1 }
+
+        Write-Host "custom invalid ca cert"
+        Write-Host "request will error"
+        # should fail
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit3.xml --cacert ..\server\certs\ca-key.pem --ignore-truststore --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        # Ignore the exit code - we expect this to fail
+        [xml]$xml3 = Get-Content junit3.xml
+        $testsuites3 = if ($xml3.testsuites) { $xml3.testsuites.testsuite } else { $xml3.testsuite }
+        $errorCount3 = ($testsuites3 | Where-Object { $_.errors -eq "1" } | Measure-Object).Count
+        if ($errorCount3 -ne 1) { exit 1 }
+
+        Write-Host "custom invalid ca cert with defaults"
+        # should pass
+        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit4.xml --cacert ..\server\certs\ca-key.pem --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
+        [xml]$xml4 = Get-Content junit4.xml
+        $testsuites4 = if ($xml4.testsuites) { $xml4.testsuites.testsuite } else { $xml4.testsuite }
+        $errorCount4 = ($testsuites4 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
+        if ($errorCount4 -ne 1) { exit 1 }

.github/actions/ssl/windows/run-ssl-e2e-tests/action.yml

@@ -0,0 +1,17 @@
+name: 'Run SSL E2E Tests - Windows'
+description: 'Run SSL E2E tests on Windows'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run E2E tests
+      shell: pwsh
+      run: |
+        npm run test:e2e:ssl
+
+    - name: Upload Playwright Report
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report-windows
+        path: playwright-report/
+        retention-days: 30

.github/actions/ssl/windows/setup-ca-certs/action.yml

@@ -0,0 +1,25 @@
+name: 'Setup CA Certificates - Windows'
+description: 'Setup CA certificates and start test server for custom CA certs tests on Windows'
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup CA certificates
+      shell: pwsh
+      run: |
+        Set-StrictMode -Version Latest
+        $ErrorActionPreference = "Stop"
+        
+        Set-Location tests\ssl\custom-ca-certs\server
+        
+        Write-Host "running certificate setup"
+        node scripts/generate-certs.js
+
+    - name: Start test server
+      shell: pwsh
+      run: |
+        Set-StrictMode -Version Latest
+        
+        Set-Location tests\ssl\custom-ca-certs\server
+        
+        Write-Host "starting server in background"
+        Start-Process -FilePath "node" -ArgumentList "index.js" -PassThru -WindowStyle Hidden

.github/workflows/npm-bru-cli.yml

@@ -26,7 +26,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
 

.github/workflows/ssl-tests.yml

@@ -0,0 +1,91 @@
+name: SSL Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  tests-for-linux:
+    name: SSL Tests - Linux
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+
+      - name: Setup Feature Dependencies
+        uses: ./.github/actions/ssl/linux/setup-feature-specific-deps
+
+      - name: Setup CA Certificates
+        uses: ./.github/actions/ssl/linux/setup-ca-certs
+
+      - name: Run Basic SSL CLI Tests
+        uses: ./.github/actions/ssl/linux/run-basic-ssl-cli-tests
+
+      - name: Run Custom CA Certs CLI Tests
+        uses: ./.github/actions/ssl/linux/run-custom-ca-certs-cli-tests
+
+      - name: Run Custom CA Certs E2E Tests
+        uses: ./.github/actions/ssl/linux/run-ssl-e2e-tests
+
+  tests-for-macos:
+    name: SSL Tests - macOS
+    timeout-minutes: 60
+    runs-on: macos-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+
+      - name: Setup Feature Dependencies
+        uses: ./.github/actions/ssl/macos/setup-feature-specific-deps
+
+      - name: Setup CA Certificates
+        uses: ./.github/actions/ssl/macos/setup-ca-certs
+
+      - name: Run Basic SSL CLI Tests
+        uses: ./.github/actions/ssl/macos/run-basic-ssl-cli-tests
+
+      - name: Run Custom CA Certs CLI Tests
+        uses: ./.github/actions/ssl/macos/run-custom-ca-certs-cli-tests
+
+      - name: Run Custom CA Certs E2E Tests
+        uses: ./.github/actions/ssl/macos/run-ssl-e2e-tests
+
+  tests-for-windows:
+    name: SSL Tests - Windows
+    timeout-minutes: 60
+    runs-on: windows-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+
+      - name: Setup CA Certificates
+        uses: ./.github/actions/ssl/windows/setup-ca-certs
+
+      - name: Run Basic SSL CLI Tests
+        uses: ./.github/actions/ssl/windows/run-basic-ssl-cli-tests
+
+      - name: Run Custom CA Certs CLI Tests
+        uses: ./.github/actions/ssl/windows/run-custom-ca-certs-cli-tests
+
+      - name: Run Custom CA Certs E2E Tests
+        uses: ./.github/actions/ssl/windows/run-ssl-e2e-tests

.github/workflows/tests.yml

@@ -14,7 +14,7 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -34,6 +34,8 @@ jobs:
 
       - name: Lint Check
         run: npm run lint
+        env:
+          ESLINT_PLUGIN_DIFF_COMMIT: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}
 
       # tests
       - name: Test Package bruno-js
@@ -65,7 +67,7 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -83,6 +85,11 @@ jobs:
           npm run build --workspace=packages/bruno-requests
           npm run build --workspace=packages/bruno-filestore
 
+      - name: Run Local Testbench
+        run: |
+          npm start --workspace=packages/bruno-tests &
+          sleep 5
+
       - name: Run tests
         run: |
           cd packages/bruno-tests/collection
@@ -102,7 +109,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: v22.11.x
     - name: Install dependencies

.husky/pre-commit

@@ -0,0 +1 @@
+npx nano-staged

contributing.md

@@ -69,6 +69,7 @@ npm run build:bruno-query
 npm run build:bruno-common
 npm run build:bruno-converters
 npm run build:bruno-requests
+npm run build:bruno-filestore
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js

docs/playwright-testing-guide.md

@@ -0,0 +1,470 @@
+# Playwright Testing Guide for Bruno
+
+This guide explains how to create and run Playwright test cases for the Bruno application using the UI.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Prerequisites](#prerequisites)
+- [Creating Tests Using Codegen](#creating-tests-using-codegen)
+- [Manual Test Creation](#manual-test-creation)
+- [Test Structure and Organization](#test-structure-and-organization)
+- [Available Test Fixtures](#available-test-fixtures)
+- [Running Tests](#running-tests)
+- [Best Practices](#best-practices)
+- [Examples](#examples)
+- [Troubleshooting](#troubleshooting)
+
+## Overview
+
+Bruno uses Playwright for end-to-end testing of its Electron application. The testing setup includes custom fixtures for Electron app testing and utilities for managing test data.
+
+## Prerequisites
+
+- Node.js installed
+- All dependencies installed (`npm install`)
+- Electron app can be built and run
+
+## Creating Tests Using Codegen
+
+The easiest way to create tests is using Playwright's codegen feature, which records your UI interactions and generates test code.
+
+### Using the Built-in Codegen Script
+
+```bash
+# Generate a test with a specific name
+npm run test:codegen my-new-test
+
+# Generate a test without specifying a name (will prompt for input)
+npm run test:codegen
+```
+
+### What Happens During Codegen
+
+1. The Electron app launches automatically
+2. Playwright Inspector opens in a separate window
+3. You interact with the Bruno UI
+4. Actions are recorded and converted to test code
+5. The generated test file is saved in `e2e-tests/`
+
+### Codegen Workflow
+
+1. **Start Recording**: Run the codegen command
+2. **Interact with UI**: Perform the actions you want to test
+3. **Add Assertions**: Use the inspector to add assertions
+4. **Save Test**: The test file is automatically generated
+5. **Review and Refine**: Edit the generated test as needed
+
+## Manual Test Creation
+
+You can also create tests manually by following the established patterns.
+
+### Basic Test Structure
+
+```typescript
+import { test, expect } from '../../playwright';
+
+test('Test description', async ({ page }) => {
+  // Test steps here
+  await page.getByLabel('Some Label').click();
+
+  // Assertions
+  await expect(page.getByText('Expected Text')).toBeVisible();
+});
+```
+
+### Test with Temporary Data
+
+```typescript
+import { test, expect } from '../../playwright';
+
+test('Test with temporary data', async ({ page, createTmpDir }) => {
+  // Create temporary directory for test data
+  const testDir = await createTmpDir('test-collection');
+
+  // Test steps
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('test-collection');
+  await page.getByLabel('Location').fill(testDir);
+
+  // Assertions
+  await expect(page.getByText('test-collection')).toBeVisible();
+});
+```
+
+## Test Structure and Organization
+
+### Directory Structure
+
+```
+e2e-tests/
+├── 001-sanity-tests/          # Basic functionality tests
+│   ├── 001-home-screen.spec.ts
+│   └── 002-create-new-collection-and-new-request.spec.ts
+├── 002-feature-tests/         # Specific feature tests
+├── 003-integration-tests/     # Complex workflow tests
+└── bruno-testbench/           # Test utilities and helpers
+```
+
+### Naming Conventions
+
+- **Files**: Use descriptive names with `.spec.ts` extension
+- **Tests**: Use clear, descriptive test names
+- **Folders**: Use numbered prefixes for ordering
+
+### Test File Template
+
+```typescript
+import { test, expect } from '../../playwright';
+
+test.describe('Feature Name', () => {
+  test('should perform specific action', async ({ page }) => {
+    // Arrange
+    // Act
+    // Assert
+  });
+
+  test('should handle error case', async ({ page }) => {
+    // Test error scenarios
+  });
+});
+```
+
+## Available Test Fixtures
+
+The Bruno Playwright setup provides several custom fixtures:
+
+### Core Fixtures
+
+- `page`: Main page for testing
+- `context`: Browser context
+- `electronApp`: Electron application instance
+
+### Utility Fixtures
+
+- `createTmpDir`: Creates temporary directories for test data
+- `newPage`: Creates a new page instance
+- `pageWithUserData`: Page with custom user data
+- `launchElectronApp`: Launches a new Electron app instance
+- `reuseOrLaunchElectronApp`: Reuses existing app or launches new one
+
+### Using Fixtures
+
+```typescript
+test('Test with multiple fixtures', async ({ page, createTmpDir, electronApp }) => {
+  const testDir = await createTmpDir('test-data');
+
+  // Your test logic here
+});
+```
+
+## Running Tests
+
+### Basic Commands
+
+```bash
+# Run all tests
+npm run test:e2e
+
+# Run specific test file
+npx playwright test e2e-tests/001-sanity-tests/001-home-screen.spec.ts
+
+# Run tests in a specific folder
+npx playwright test e2e-tests/001-sanity-tests/
+```
+
+### Advanced Options
+
+```bash
+# Run with UI mode (for debugging)
+npx playwright test --ui
+
+# Run in headed mode (see browser)
+npx playwright test --headed
+
+# Run with specific browser
+npx playwright test --project="Bruno Electron App"
+
+# Run with debugging
+npx playwright test --debug
+
+# Run with trace recording
+npx playwright test --trace on
+```
+
+### CI/CD Integration
+
+```bash
+# Install browsers for CI
+npx playwright install
+
+# Run tests in CI mode
+npm run test:e2e
+```
+
+## Best Practices
+
+### 1. Use Semantic Selectors
+
+**Preferred:**
+
+```typescript
+await page.getByRole('button', { name: 'Create' }).click();
+await page.getByLabel('Collection Name').fill('test');
+await page.getByText('Success message').toBeVisible();
+```
+
+**Avoid:**
+
+```typescript
+await page.locator('.btn-primary').click();
+await page.locator('#collection-name').fill('test');
+```
+
+### 2. Create Isolated Tests
+
+Each test should be independent and not rely on other tests:
+
+```typescript
+test('should create collection', async ({ page, createTmpDir }) => {
+  const testDir = await createTmpDir('collection-test');
+
+  // Test creates its own data
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('test-collection');
+  await page.getByLabel('Location').fill(testDir);
+
+  // Clean up happens automatically via createTmpDir
+});
+```
+
+### 3. Add Meaningful Assertions
+
+Always verify the expected outcomes:
+
+```typescript
+test('should save request successfully', async ({ page }) => {
+  // Arrange
+  await page.getByLabel('Create Collection').click();
+
+  // Act
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  // Assert
+  await expect(page.getByText('Request saved successfully')).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'GET request' })).toBeVisible();
+});
+```
+
+### 4. Handle Async Operations
+
+```typescript
+test('should wait for network requests', async ({ page }) => {
+  // Wait for specific network request
+  await page.waitForResponse((response) => response.url().includes('/api/endpoint'));
+
+  // Or wait for element to be stable
+  await page.waitForSelector('[data-testid="loading"]', { state: 'hidden' });
+});
+```
+
+### 5. Use Test Data Management
+
+```typescript
+test('should work with test data', async ({ page, createTmpDir }) => {
+  const testDir = await createTmpDir('test-data');
+
+  // Create test files
+  await fs.writeFile(path.join(testDir, 'test.bru'), testContent);
+
+  // Use in test
+  await page.getByLabel('Open Collection').click();
+  await page.getByText(testDir).click();
+});
+```
+
+## Examples
+
+### Example 1: Basic Collection Creation
+
+```typescript
+import { test, expect } from '../../playwright';
+
+test('should create a new collection', async ({ page, createTmpDir }) => {
+  const testDir = await createTmpDir('new-collection');
+
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('My Test Collection');
+  await page.getByLabel('Location').fill(testDir);
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  await expect(page.getByText('My Test Collection')).toBeVisible();
+});
+```
+
+### Example 2: Request Creation and Execution
+
+```typescript
+import { test, expect } from '../../playwright';
+
+test('should create and execute HTTP request', async ({ page, createTmpDir }) => {
+  const testDir = await createTmpDir('request-test');
+
+  // Create collection
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('Request Test');
+  await page.getByLabel('Location').fill(testDir);
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Create request
+  await page.locator('#create-new-tab').getByRole('img').click();
+  await page.getByPlaceholder('Request Name').fill('Test Request');
+  await page.locator('#new-request-url .CodeMirror').click();
+  await page.locator('textarea').fill('http://localhost:8081/ping');
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Execute request
+  await page.locator('#send-request').getByRole('img').nth(2).click();
+
+  // Verify response
+  await expect(page.getByRole('main')).toContainText('200 OK');
+});
+```
+
+### Example 3: Environment Management
+
+```typescript
+import { test, expect } from '../../playwright';
+
+test('should create and use environment variables', async ({ page, createTmpDir }) => {
+  const testDir = await createTmpDir('env-test');
+
+  // Setup collection
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('Environment Test');
+  await page.getByLabel('Location').fill(testDir);
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Create environment
+  await page.getByRole('button', { name: 'Environments' }).click();
+  await page.getByRole('button', { name: 'Add Environment' }).click();
+  await page.getByLabel('Environment Name').fill('Development');
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Add variable
+  await page.getByRole('button', { name: 'Add Variable' }).click();
+  await page.getByLabel('Variable Name').fill('API_URL');
+  await page.getByLabel('Variable Value').fill('http://localhost:3000');
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  await expect(page.getByText('API_URL')).toBeVisible();
+});
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Electron App Not Starting**
+
+   ```bash
+   # Ensure dependencies are installed
+   npm install
+
+   # Try running the app manually first
+   npm run dev:electron
+   ```
+
+2. **Tests Timing Out**
+
+   ```typescript
+   // Increase timeout for specific test
+   test('slow test', async ({ page }) => {
+     test.setTimeout(60000); // 60 seconds
+     // Test steps
+   });
+   ```
+
+3. **Element Not Found**
+
+   ```typescript
+   // Wait for element to be present
+   await page.waitForSelector('[data-testid="element"]');
+
+   // Or use more specific selectors
+   await page.getByRole('button', { name: 'Exact Button Text' }).click();
+   ```
+
+4. **Flaky Tests**
+
+   ```typescript
+   // Use stable selectors
+   await page.getByTestId('stable-id').click();
+
+   // Wait for state changes
+   await page.waitForLoadState('networkidle');
+   ```
+
+### Debug Mode
+
+```bash
+# Run with debug mode
+npx playwright test --debug
+
+# Run specific test in debug mode
+npx playwright test --debug e2e-tests/001-sanity-tests/001-home-screen.spec.ts
+```
+
+### Trace Analysis
+
+```bash
+# Run with trace recording
+npx playwright test --trace on
+
+# View trace in browser
+npx playwright show-trace test-results/trace-*.zip
+```
+
+## Configuration
+
+The Playwright configuration is in `playwright.config.ts`:
+
+```typescript
+export default defineConfig({
+  testDir: './e2e-tests',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? undefined : 1,
+
+  projects: [
+    {
+      name: 'Bruno Electron App'
+    }
+  ],
+
+  webServer: [
+    {
+      command: 'npm run dev:web',
+      url: 'http://localhost:3000',
+      reuseExistingServer: !process.env.CI
+    },
+    {
+      command: 'npm start --workspace=packages/bruno-tests',
+      url: 'http://localhost:8081/ping',
+      reuseExistingServer: !process.env.CI
+    }
+  ]
+});
+```
+
+## Additional Resources
+
+- [Playwright Documentation](https://playwright.dev/)
+- [Playwright Test API](https://playwright.dev/docs/api/class-test)
+- [Electron Testing with Playwright](https://playwright.dev/docs/api/class-electronapplication)
+- [Bruno Project Structure](../readme.md)
+
+---
+
+For questions or issues with testing, please refer to the project's contributing guidelines or create an issue in the repository.

docs/readme/readme_ar.md

@@ -74,10 +74,13 @@ flatpak install com.usebruno.Bruno
 
 # على نظام Linux عبر Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_bn.md

@@ -59,10 +59,13 @@ snap install bruno
 
 # Apt এর মাধ্যমে লিনাক্সে
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_cn.md

@@ -63,10 +63,13 @@ snap install bruno
 
 # 在 Linux 上用 Apt 安装
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_de.md

@@ -78,10 +78,13 @@ flatpak install com.usebruno.Bruno
 
 # Auf Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_es.md

@@ -75,10 +75,13 @@ flatpak install com.usebruno.Bruno
 
 # En Linux con Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_fr.md

@@ -63,10 +63,13 @@ snap install bruno
 
 # Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_hi.md

@@ -75,12 +75,14 @@ flatpak install com.usebruno.Bruno
 
 # Linux पर Apt के माध्यम से
 sudo mkdir -p /etc/apt/keyrings
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 
 कई प्लेटफार्मों पर चलाएं 🖥️
 <br /><br />
@@ -148,4 +150,3 @@ Scriptmania
 
 लाइसेंस 📄
 MIT
-

docs/readme/readme_it.md

@@ -59,10 +59,13 @@ snap install bruno
 
 # Su Linux tramite Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ja.md

@@ -78,10 +78,13 @@ flatpak install com.usebruno.Bruno
 
 # LinuxでAptを使ってインストール
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ka.md

@@ -77,12 +77,14 @@ flatpak install com.usebruno.Bruno
 
 # Linux-ზე Apt-ის საშუალებით
 sudo mkdir -p /etc/apt/keyrings
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### პლატფორმებს შორის მუშაობა 🖥️

docs/readme/readme_kr.md

@@ -59,10 +59,13 @@ snap install bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_nl.md

@@ -61,12 +61,14 @@ flatpak install com.usebruno.Bruno
 
 # Op Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Draai op meerdere platformen 🖥️

docs/readme/readme_pl.md

@@ -69,10 +69,13 @@ flatpak install com.usebruno.Bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_pt_br.md

@@ -76,10 +76,13 @@ flatpak install com.usebruno.Bruno
 
 # No Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ro.md

@@ -59,10 +59,13 @@ snap install bruno
 
 # Pe Linux cu Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_tr.md

@@ -63,10 +63,13 @@ snap install bruno
 
 # Apt aracılığıyla Linux'ta
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_zhtw.md

@@ -63,10 +63,13 @@ snap install bruno
 
 # 在 Linux 上使用 Apt 安裝
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

e2e-tests/001-sanity-tests/002-create-new-collection-and-new-request.spec.ts

@@ -1,31 +0,0 @@
-import { test, expect } from '../../playwright';
-
-test('Create new collection and add a simple HTTP request', async ({ page, createTmpDir }) => {
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').click();
-  await page.getByLabel('Name').fill('test-collection');
-  await page.getByLabel('Name').press('Tab');
-  await page.getByLabel('Location').fill(await createTmpDir('test-collection'));
-  await page.getByRole('button', { name: 'Create', exact: true }).click();
-  await page.getByText('test-collection').click();
-  await page.getByLabel('Safe Mode').check();
-  await page.getByRole('button', { name: 'Save' }).click();
-  await page.locator('#create-new-tab').getByRole('img').click();
-  await page.getByPlaceholder('Request Name').fill('r1');
-  await page.locator('#new-request-url .CodeMirror').click();
-  await page.locator('textarea').fill('http://localhost:8081');
-  await page.getByRole('button', { name: 'Create' }).click();
-  await page.locator('#request-url .CodeMirror').click();
-  await page.locator('textarea').fill('/ping');
-  await page.locator('#send-request').getByRole('img').nth(2).click();
-
-  await expect(page.getByRole('main')).toContainText('200 OK');
-
-  await page.getByRole('tab', { name: 'GET r1' }).locator('circle').click();
-  await page.getByRole('button', { name: 'Save', exact: true }).click();
-  await page.getByText('GETr1').click();
-  await page.getByRole('button', { name: 'Clear response' }).click();
-  await page.locator('body').press('ControlOrMeta+Enter');
-
-  await expect(page.getByRole('main')).toContainText('200 OK');
-});

eslint.config.js

@@ -1,11 +1,73 @@
 // eslint.config.js
 const { defineConfig } = require("eslint/config");
 const globals = require("globals");
+const { fixupPluginRules } = require('@eslint/compat');
+const eslintPluginDiff = require('eslint-plugin-diff');
 
-module.exports = defineConfig([
+let stylistic;
+
+const runESMImports = async () => {
+  stylistic = await import('@stylistic/eslint-plugin').then(d => d.default);
+};
+
+module.exports = runESMImports().then(() => defineConfig([
+  {
+    plugins: {
+      'diff': fixupPluginRules(eslintPluginDiff),
+      '@stylistic': stylistic,
+    },
+    languageOptions: {
+      parser: require('@typescript-eslint/parser'),
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      }
+    },
+    files: [
+      './eslint.config.js',
+      'tests/**/*.{ts,js}',
+      'packages/bruno-app/**/*.{js,jsx,ts}',
+      'packages/bruno-app/src/test-utils/mocks/codemirror.js',
+      'packages/bruno-cli/**/*.js',
+      'packages/bruno-common/**/*.ts',
+      'packages/bruno-converters/**/*.js',
+      'packages/bruno-electron/**/*.js',
+      'packages/bruno-filestore/**/*.ts',
+      'packages/bruno-js/**/*.js',
+      'packages/bruno-lang/**/*.js',
+      'packages/bruno-requests/**/*.ts',
+      'packages/bruno-requests/**/*.js',
+    ],
+    processor: 'diff/diff',
+    rules: {
+      ...stylistic.configs.customize({
+        indent: 2,
+        quotes: 'single',
+        semi: true,
+        jsx: true,
+      }).rules,
+      '@stylistic/comma-dangle': ['error', 'never'],
+      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
+      '@stylistic/arrow-parens': ['error', 'always'],
+      '@stylistic/curly-newline': ['error', {
+        multiline: true,
+        minElements: 2,
+        consistent: true,
+      }],
+      '@stylistic/function-paren-newline': ['error', 'never'],
+      '@stylistic/array-bracket-spacing': ['error', 'never'],
+      '@stylistic/arrow-spacing': ['error', { before: true, after: true }],
+      '@stylistic/function-call-spacing': ['error', 'never'],
+      '@stylistic/multiline-ternary': ['off'],
+      '@stylistic/padding-line-between-statements': ['off'],
+      '@stylistic/semi-style': ['error', 'last'],
+      '@stylistic/max-len': ['off'],
+      '@stylistic/jsx-one-expression-per-line': ['off']
+    },
+  },
   {
     files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
-    ignores: ["**/*.config.js"],
+    ignores: ["**/*.config.js", "**/public/**/*"],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -13,7 +75,8 @@ module.exports = defineConfig([
         global: false,
         require: false,
         Buffer: false,
-        process: false
+        process: false,
+        ipcRenderer: false
       },
       parserOptions: {
         ecmaFeatures: {
@@ -39,8 +102,60 @@ module.exports = defineConfig([
     },
   },
   {
-    files: ["packages/bruno-electron/**/*.{js}"],
+    files: ["packages/bruno-cli/**/*.js"],
     ignores: ["**/*.config.js"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest"
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-common/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-common/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-converters/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-electron/**/*.js"],
+    ignores: ["**/*.config.js", "**/web/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -50,5 +165,98 @@ module.exports = defineConfig([
     rules: {
       "no-undef": "error",
     },
-  }
-]);
+  },
+  {
+    files: ["packages/bruno-filestore/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-filestore/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-js/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+        window: false,
+        self: false,
+        HTMLElement: false,
+        typeDetectGlobalObject: false
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-lang/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-requests/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-requests/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-requests/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+]));

package.json

@@ -19,18 +19,25 @@
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
+    "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.51.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@stylistic/eslint-plugin": "^5.3.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
+    "@typescript-eslint/parser": "^8.39.0",
     "concurrently": "^8.2.2",
     "eslint": "^9.26.0",
+    "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
     "globals": "^16.1.0",
+    "husky": "^9.1.7",
     "jest": "^29.2.0",
     "lodash-es": "^4.17.21",
+    "nano-staged": "^0.8.0",
     "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
@@ -63,9 +70,17 @@
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "watch:common": "npm run watch --workspace=packages/bruno-common",
     "test:codegen": "node playwright/codegen.ts",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --project=default",
+    "test:e2e:ssl": "playwright test --project=ssl",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)"
+    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
+    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
+    "prepare": "husky"
+  },
+  "nano-staged": {
+    "*.{js,ts,jsx}": [
+      "npm run lint:fix"
+    ]
   },
   "overrides": {
     "rollup": "3.29.5",
@@ -75,4 +90,4 @@
       }
     }
   }
-}
+}

packages/bruno-app/package.json

@@ -16,6 +16,7 @@
     "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
+    "@testing-library/user-event": "^14.6.1",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
@@ -92,7 +93,7 @@
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "autoprefixer": "10.4.20",
@@ -111,5 +112,10 @@
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
+  },
+  "overrides": {
+    "httpsnippet": {
+      "form-data": "4.0.4"
+    }
   }
 }

packages/bruno-app/src/components/CodeEditor/CustomSearch/StyledWrapper.js

@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .bruno-search-bar {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 0 2px;
+    min-height: 36px;
+    background: ${(props) => props.theme.sidebar.search.bg} !important;
+    border-radius: 4px;
+    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    width: auto;
+    min-width: 180px;
+    max-width: 320px;
+  }
+
+  .bruno-search-bar input {
+    min-width: 80px;
+    background: transparent;
+    color: inherit;
+    border: none;
+    outline: none;
+    padding: 1px 2px;
+    font-size: 13px;
+    margin: 0 1px;
+    height: 28px;
+  }
+
+  .searchbar-icon-btn {
+    background: none;
+    border: none;
+    padding: 0 1px;
+    margin: 0 1px;
+    cursor: pointer;
+    color: #aaa;
+    border-radius: 3px;
+    height: 18px;
+    width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .searchbar-result-count {
+    min-width: 28px;
+    text-align: center;
+    font-size: 11px;
+    color: #aaa;
+    margin: 0 8px 0 1px; 
+    white-space: nowrap;
+  }
+
+  .bruno-search-bar.compact {
+    background: ${(props) => props.theme.codemirror.bg};
+    color: ${(props) => props.theme.codemirror.text || props.theme.text};
+    border: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    border-radius: 4px;
+    padding: 1px 3px;
+    min-height: 22px;
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  .bruno-search-bar input {
+    background: transparent;
+    color: inherit;
+    border: none;
+    outline: none;
+    font-size: 13px;
+    padding: 1px 2px;
+    min-width: 80px;
+  }
+
+  .searchbar-icon-btn:focus {
+    outline: 1px solid ${(props) => props.theme.codemirror.border};
+  }
+
+  .bruno-search-bar, .bruno-search-bar input {
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  }
+
+  .cm-search-line-highlight {
+    background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
+  }
+
+  .searchbar-icon-btn.active {
+    color: #f39c12 !important;
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/CodeEditor/CustomSearch/index.js

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { IconRegex, IconArrowUp, IconArrowDown, IconX, IconLetterCase, IconLetterW } from '@tabler/icons';
+import ToolHint from 'components/ToolHint';
+import StyledWrapper from './StyledWrapper';
+import useDebounce from 'hooks/useDebounce';
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
+}
+
+const CustomSearch = ({ visible, editor, onClose }) => {
+  const [searchText, setSearchText] = useState('');
+  const [regex, setRegex] = useState(false);
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [wholeWord, setWholeWord] = useState(false);
+  const [matchIndex, setMatchIndex] = useState(0);
+  const [matchCount, setMatchCount] = useState(0);
+
+  const searchMarks = useRef([]);
+  const searchLineHighlight = useRef(null);
+  const searchMatches = useRef([]);
+
+  const debouncedSearchText = useDebounce(searchText, 150);
+
+  const memoizedMatches = useMemo(() => {
+    if (!editor || !visible) return [];
+    if (!debouncedSearchText) return [];
+
+    try {
+      let query, options = {};
+      if (regex) {
+        try {
+          query = new RegExp(debouncedSearchText, caseSensitive ? 'g' : 'gi');
+        } catch {
+          return [];
+        }
+      } else if (wholeWord) {
+        const escaped = escapeRegExp(debouncedSearchText);
+        query = new RegExp(`\\b${escaped}\\b`, caseSensitive ? 'g' : 'gi');
+      } else {
+        query = debouncedSearchText;
+        options = { caseFold: !caseSensitive };
+      }
+
+      const cursor = editor.getSearchCursor(query, { line: 0, ch: 0 }, options);
+      const out = [];
+      while (cursor.findNext()) {
+        out.push({ from: cursor.from(), to: cursor.to() });
+      }
+      return out;
+    } catch (e) {
+      console.error('Search error:', e);
+      return [];
+    }
+  }, [editor, visible, debouncedSearchText, regex, caseSensitive, wholeWord]);
+
+  const doSearch = useCallback((newIndex = 0) => {
+    if (!editor) return;
+
+    // Clear previous marks
+    searchMarks.current.forEach((mark) => mark.clear());
+    searchMarks.current = [];
+    // Clear previous line highlight
+    if (searchLineHighlight.current !== null) {
+      editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
+      searchLineHighlight.current = null;
+    }
+
+    if (!debouncedSearchText) {
+      setMatchCount(0);
+      setMatchIndex(0);
+      searchMatches.current = [];
+      return;
+    }
+
+    try {
+      const matches = memoizedMatches;
+      let matchIndex = matches.length ? Math.max(0, Math.min(newIndex, matches.length - 1)) : 0;
+      matches.forEach((m, i) => {
+        const mark = editor.markText(m.from, m.to, {
+          className: i === matchIndex ? 'cm-search-current' : 'cm-search-match',
+          clearOnEnter: true
+        });
+        searchMarks.current.push(mark);
+      });
+
+      if (matches.length) {
+        const currentLine = matches[matchIndex].from.line;
+        editor.addLineClass(currentLine, 'wrap', 'cm-search-line-highlight');
+        searchLineHighlight.current = currentLine;
+
+        editor.scrollIntoView(matches[matchIndex].from, 100);
+        editor.setSelection(matches[matchIndex].from, matches[matchIndex].to);
+      } else {
+        searchLineHighlight.current = null;
+      }
+
+      setMatchCount(matches.length);
+      setMatchIndex(matchIndex);
+      searchMatches.current = matches;
+    } catch (e) {
+      console.error('Search error:', e);
+      setMatchCount(0);
+      setMatchIndex(0);
+      searchMatches.current = [];
+    }
+  }, [debouncedSearchText, regex, caseSensitive, wholeWord, editor, memoizedMatches]);
+
+  useEffect(() => {
+    doSearch(0, debouncedSearchText);
+  }, [debouncedSearchText, doSearch]);
+
+  const handleSearchBarClose = useCallback(() => {
+    searchMarks.current.forEach((mark) => mark.clear());
+    searchMarks.current = [];
+    if (searchLineHighlight.current !== null && editor) {
+      editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
+      searchLineHighlight.current = null;
+    }
+    searchMatches.current = [];
+    if (onClose) onClose();
+    // Focus the editor after closing the search bar
+    if (editor) {
+      setTimeout(() => editor.focus(), 0);
+    }
+  }, [editor, onClose]);
+
+  const handleSearchTextChange = (text) => {
+    setSearchText(text);
+    setMatchIndex(0);
+  };
+
+  const handleToggleRegex = () => {
+    setRegex((prev) => !prev);
+    setMatchIndex(0);
+    doSearch(0);
+  };
+
+  const handleToggleCase = () => {
+    setCaseSensitive((prev) => !prev);
+    setMatchIndex(0);
+    doSearch(0);
+  };
+
+  const handleToggleWholeWord = () => {
+    setWholeWord((prev) => !prev);
+    setMatchIndex(0);
+    doSearch(0);
+  };
+
+  const handleNext = () => {
+    if (!searchMatches.current || !searchMatches.current.length) return;
+    let next = (matchIndex + 1) % searchMatches.current.length;
+    setMatchIndex(next);
+    doSearch(next);
+  };
+
+  const handlePrev = () => {
+    if (!searchMatches.current || !searchMatches.current.length) return;
+    let prev = (matchIndex - 1 + searchMatches.current.length) % searchMatches.current.length;
+    setMatchIndex(prev);
+    doSearch(prev);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <StyledWrapper>
+      <div className="bruno-search-bar compact">
+        <input
+          autoFocus
+          type="text"
+          value={searchText}
+          onChange={(e) => handleSearchTextChange(e.target.value)}
+          placeholder="Search..."
+          spellCheck={false}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) handleNext();
+            if (e.key === 'Enter' && e.shiftKey) handlePrev();
+            if (e.key === 'Escape') handleSearchBarClose();
+          }}
+        />
+        <span className="searchbar-result-count">{matchCount > 0 ? `${matchIndex + 1} / ${matchCount}` : '0 results'}</span>
+        <ToolHint text="Regex search" toolhintId="searchbar-regex-toolhint" place="top">
+          <button className={`searchbar-icon-btn ${regex ? 'active' : ''}`} onClick={handleToggleRegex}><IconRegex size={16} /></button>
+        </ToolHint>
+        <ToolHint text="Case sensitive" toolhintId="searchbar-case-toolhint" place="top">
+          <button className={`searchbar-icon-btn ${caseSensitive ? 'active' : ''}`} onClick={handleToggleCase}><IconLetterCase size={14} /></button>
+        </ToolHint>
+        <ToolHint text="Whole word" toolhintId="searchbar-wholeword-toolhint" place="top">
+          <button className={`searchbar-icon-btn ${wholeWord ? 'active' : ''}`} onClick={handleToggleWholeWord}><IconLetterW size={14} /></button>
+        </ToolHint>
+        <button className="searchbar-icon-btn" title="Previous" onClick={handlePrev}><IconArrowUp size={14} /></button>
+        <button className="searchbar-icon-btn" title="Next" onClick={handleNext}><IconArrowDown size={14} /></button>
+        <button className="searchbar-icon-btn" title="Close" onClick={handleSearchBarClose}><IconX size={14} /></button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default CustomSearch;

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -109,6 +109,17 @@ const StyledWrapper = styled.div`
     text-decoration:unset;
   }
 
+  .cm-search-line-highlight {
+    background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
+  }
+
+  .cm-search-match {
+    background: rgba(255, 193, 7, 0.25);
+  }
+
+  .cm-search-current {
+    background: rgba(255, 193, 7, 0.4);
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/CodeEditor/index.js

@@ -14,6 +14,7 @@ import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
+import CustomSearch from './CustomSearch';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -37,6 +38,10 @@ export default class CodeEditor extends React.Component {
       expr: true,
       asi: true
     };
+
+    this.state = {
+      searchBarVisible: false
+    };
   }
 
   componentDidMount() {
@@ -45,7 +50,7 @@ export default class CodeEditor extends React.Component {
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
-      lineWrapping: true,
+      lineWrapping: this.props.enableLineWrapping ?? true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
       brunoVarInfo: {
@@ -83,24 +88,14 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
-          if (this._isSearchOpen()) {
-            // replace the older search component with the new one
-            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-            search && search.remove();
+          if (!this.state.searchBarVisible) {
+            this.setState({ searchBarVisible: true });
           }
-          cm.execCommand('findPersistent');
-          this._bindSearchHandler();
-          this._appendSearchResultsCount();
         },
         'Ctrl-F': (cm) => {
-          if (this._isSearchOpen()) {
-            // replace the older search component with the new one
-            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-            search && search.remove();
+          if (!this.state.searchBarVisible) {
+            this.setState({ searchBarVisible: true });
           }
-          cm.execCommand('findPersistent');
-          this._bindSearchHandler();
-          this._appendSearchResultsCount();
         },
         'Cmd-H': 'replace',
         'Ctrl-H': 'replace',
@@ -129,6 +124,11 @@ export default class CodeEditor extends React.Component {
           } else {
             this.editor.toggleComment();
           }
+        },
+        'Esc': () => {
+          if (this.state.searchBarVisible) {
+            this.setState({ searchBarVisible: false });
+          }
         }
       },
       foldOptions: {
@@ -186,6 +186,8 @@ export default class CodeEditor extends React.Component {
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
+      editor.on('scroll', this.onScroll);
+      editor.scrollTo(null, this.props.initialScroll);
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
@@ -230,19 +232,28 @@ export default class CodeEditor extends React.Component {
     if (this.props.theme !== prevProps.theme && this.editor) {
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
+
+    if (this.props.initialScroll !== prevProps.initialScroll) {
+      this.editor.scrollTo(null, this.props.initialScroll);
+    }
+
+    if (this.props.enableLineWrapping !== prevProps.enableLineWrapping) {
+      this.editor.setOption('lineWrapping', this.props.enableLineWrapping);
+    }
+
+    if (this.props.mode !== prevProps.mode) {
+      this.editor.setOption('mode', this.props.mode);
+    }
+
     this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {
     if (this.editor) {
       this.editor.off('change', this._onEdit);
+      this.editor.off('scroll', this.onScroll);
       this.editor = null;
     }
-
-    this._unbindSearchHandler();
-    if (this.brunoAutoCompleteCleanup) {
-      this.brunoAutoCompleteCleanup();
-    }
   }
 
   render() {
@@ -255,10 +266,18 @@ export default class CodeEditor extends React.Component {
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
-        ref={(node) => {
-          this._node = node;
-        }}
-      />
+      >
+        <CustomSearch
+          visible={this.state.searchBarVisible}
+          editor={this.editor}
+          onClose={() => this.setState({ searchBarVisible: false })}
+        />
+        <div
+          className={`editor-container${this.state.searchBarVisible ? ' search-bar-visible' : ''}`}
+          ref={(node) => { this._node = node; }}
+          style={{ height: '100%', width: '100%' }}
+        />
+      </StyledWrapper>
     );
   }
 
@@ -271,6 +290,8 @@ export default class CodeEditor extends React.Component {
     this.editor.setOption('mode', 'brunovariables');
   };
 
+  onScroll = (event) => this.props.onScroll?.(event);
+
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);
@@ -280,67 +301,4 @@ export default class CodeEditor extends React.Component {
       }
     }
   };
-
-  _isSearchOpen = () => {
-    return document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-  };
-
-  /**
-   * Bind handler to search input to count number of search results
-   */
-  _bindSearchHandler = () => {
-    const searchInput = document.querySelector('.CodeMirror-search-field');
-
-    if (searchInput) {
-      searchInput.addEventListener('input', this._countSearchResults);
-    }
-  };
-
-  /**
-   * Unbind handler to search input to count number of search results
-   */
-  _unbindSearchHandler = () => {
-    const searchInput = document.querySelector('.CodeMirror-search-field');
-
-    if (searchInput) {
-      searchInput.removeEventListener('input', this._countSearchResults);
-    }
-  };
-
-  /**
-   * Append search results count to search dialog
-   */
-  _appendSearchResultsCount = () => {
-    const dialog = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-
-    if (dialog) {
-      const searchResultsCount = document.createElement('span');
-      searchResultsCount.id = this.searchResultsCountElementId;
-      dialog.appendChild(searchResultsCount);
-
-      this._countSearchResults();
-    }
-  };
-
-  /**
-   * Count search results and update state
-   */
-  _countSearchResults = () => {
-    let count = 0;
-
-    const searchInput = document.querySelector('.CodeMirror-search-field');
-
-    if (searchInput && searchInput.value.length > 0) {
-      // Escape special characters in search input to prevent RegExp crashes. Fixes #3051
-      const text = new RegExp(escapeRegExp(searchInput.value), 'gi');
-      const matches = this.editor.getValue().match(text);
-      count = matches ? matches.length : 0;
-    }
-
-    const searchResultsCountElement = document.querySelector(`#${this.searchResultsCountElementId}`);
-
-    if (searchResultsCountElement) {
-      searchResultsCountElement.innerText = `${count} results`;
-    }
-  };
 }

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js

@@ -38,6 +38,48 @@ const StyledWrapper = styled.div`
       outline: none !important;
     }
   }
+
+  .protocol-placeholder {
+    height: 100%;
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    overflow: hidden;
+  }
+
+  .protocol-https,
+  .protocol-grpcs {
+    position: absolute;
+    right: 8px;
+    top: 0;
+    bottom: 0;
+    transition: transform 0.3s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .protocol-https {
+    animation: slideUpDown 6s infinite;
+    transform: translateY(0);
+  }
+
+  .protocol-grpcs {
+    animation: slideUpDown 6s infinite 3s;
+    transform: translateY(100%);
+  }
+
+  @keyframes slideUpDown {
+    0%, 45% {
+      transform: translateY(0);
+    }
+    50%, 95% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js

@@ -132,7 +132,10 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
           </label>
           <div className="relative flex items-center">
             <div className="absolute left-0 pl-2 text-gray-400 pointer-events-none flex items-center h-full">
-              https://
+              <span className="protocol-placeholder">
+                <span className="protocol-https">https://</span>
+                <span className="protocol-grpcs">grpcs://</span>
+              </span>
             </div>
             <input
               id="domain"

packages/bruno-app/src/components/CollectionSettings/Headers/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -7,19 +7,30 @@ import { useTheme } from 'providers/Theme';
 import {
   addCollectionHeader,
   updateCollectionHeader,
-  deleteCollectionHeader
+  deleteCollectionHeader,
+  setCollectionHeaders
 } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import BulkEditor from 'components/BulkEditor/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = get(collection, 'root.request.headers', []);
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: newHeaders }));
+  };
 
   const addHeader = () => {
     dispatch(
@@ -63,6 +74,22 @@ const Headers = ({ collection }) => {
     );
   };
 
+  if (isBulkEditMode) {
+    return (
+      <StyledWrapper className="h-full w-full">
+        <div className="text-xs mb-4 text-muted">
+          Add request headers that will be sent with every request in this collection.
+        </div>
+        <BulkEditor
+          params={headers}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+          onSave={handleSave}
+        />
+      </StyledWrapper>
+    );
+  }
+
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">
@@ -141,9 +168,14 @@ const Headers = ({ collection }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
+      <div className="flex justify-between mt-2">
+        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
+          + Add Header
+        </button>
+        <button className="text-link select-none" onClick={toggleBulkEditMode}>
+          Bulk Edit
+        </button>
+      </div>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

packages/bruno-app/src/components/CollectionSettings/Presets/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
@@ -62,6 +62,19 @@ const PresetsSettings = ({ collection }) => {
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
             </label>
+
+            <input
+              id="grpc"
+              className="ml-4 cursor-pointer"
+              type="radio"
+              name="requestType"
+              onChange={formik.handleChange}
+              value="grpc"
+              checked={formik.values.requestType === 'grpc'}
+            />
+            <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
+              gRPC
+            </label>
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -74,7 +87,7 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder='Request URL'
+                placeholder="Request URL"
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
@@ -87,6 +100,7 @@ const PresetsSettings = ({ collection }) => {
             </div>
           </div>
         </div>
+
         <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save

packages/bruno-app/src/components/CollectionSettings/Protobuf/StyledWrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .available-certificates {
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+
+    button.remove-certificate {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js

@@ -0,0 +1,336 @@
+import React, { useRef } from 'react';
+import StyledWrapper from './StyledWrapper';
+import {
+  IconTrash,
+  IconFile,
+  IconFileImport,
+  IconAlertCircle,
+  IconFolder
+} from '@tabler/icons';
+import { getBasename } from 'utils/common/path';
+import { Tooltip } from 'react-tooltip';
+import useProtoFileManagement from '../../../hooks/useProtoFileManagement';
+
+const ProtobufSettings = ({ collection }) => {
+  const {
+    protoFiles,
+    importPaths,
+    addProtoFileToCollection,
+    addImportPathToCollection,
+    toggleImportPath,
+    browseForProtoFile,
+    browseForImportDirectory,
+    removeProtoFileFromCollection,
+    removeImportPathFromCollection,
+    replaceImportPathInCollection,
+    replaceProtoFileInCollection
+  } = useProtoFileManagement(collection);
+  const fileInputRef = useRef(null);
+
+  // Get file path using the ipcRenderer
+  const getProtoFile = async (event) => {
+    const files = event?.files;
+    if (files && files.length > 0) {
+      for (let i = 0; i < files.length; i++) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[i]);
+        if (filePath) {
+          await addProtoFileToCollection(filePath);
+        }
+      }
+      // Reset the file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleRemoveProtoFile = async (index) => {
+    await removeProtoFileFromCollection(index);
+  };
+
+  const handleBrowseClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleReplaceProtoFile = async (index) => {
+    const result = await browseForProtoFile();
+    if (result.success) {
+      await replaceProtoFileInCollection(index, result.filePath);
+    }
+  };
+
+  const handleReplaceImportPath = async (index) => {
+    const result = await browseForImportDirectory();
+    if (result.success) {
+      await replaceImportPathInCollection(index, result.directoryPath);
+    }
+  };
+
+  const handleFileInputChange = (e) => {
+    getProtoFile(e.target);
+  };
+
+  const getImportPath = async () => {
+    const result = await browseForImportDirectory();
+    if (result.success) {
+      await addImportPathToCollection(result.directoryPath);
+    }
+  };
+
+  const handleRemoveImportPath = async (index) => {
+    await removeImportPathFromCollection(index);
+  };
+
+  const handleToggleImportPath = async (index) => {
+    await toggleImportPath(index);
+  };
+
+  const handleBrowseImportPathClick = () => {
+    getImportPath();
+  };
+
+  return (
+    <StyledWrapper className="h-full w-full">
+      {/* Hidden file input for file selection */}
+      <input
+        type="file"
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        accept=".proto"
+        multiple
+        onChange={handleFileInputChange}
+      />
+
+      {/* Proto Files Section */}
+      <div className="mb-6" data-testid="protobuf-proto-files-section">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center">
+            <label className="font-semibold text-sm flex items-center" htmlFor="protoFiles">
+              Proto Files (
+              {protoFiles.length}
+              )
+              <span id="proto-files-tooltip" className="ml-2">
+                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
+              </span>
+              <Tooltip
+                anchorId="proto-files-tooltip"
+                className="tooltip-mod font-normal"
+                html="Keep your proto files within the collection folder or the corresponding git repository to ensure paths remain valid when sharing the collection."
+              />
+            </label>
+          </div>
+        </div>
+
+        <div>
+          {protoFiles.some((file) => !file.exists) && (
+            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-files-message">
+              <IconAlertCircle size={14} className="mr-1" />
+              Some proto files cannot be found. Use the replace option to update their locations.
+            </div>
+          )}
+
+          <table className="w-full border-collapse" data-testid="protobuf-proto-files-table">
+            <thead>
+              <tr>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                  File
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                  Path
+                </th>
+                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {protoFiles.length === 0 ? (
+                <tr>
+                  <td colSpan="3" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
+                    <div className="flex flex-col items-center">
+                      <IconFile size={24} className="text-gray-400 mb-2" />
+                      <span className="text-sm text-gray-500 dark:text-gray-400">No proto files added</span>
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                protoFiles.map((file, index) => {
+                  const isValid = file.exists;
+
+                  return (
+                    <tr key={index}>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <div className="flex items-center">
+                          <IconFile size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
+                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                            {getBasename(collection.pathname, file.path)}
+                          </span>
+                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
+                        </div>
+                      </td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
+                          {file.path}
+                        </div>
+                      </td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
+                        <div className="flex items-center justify-end space-x-1">
+                          {!isValid && (
+                            <button
+                              type="button"
+                              onClick={() => handleReplaceProtoFile(index)}
+                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
+                              title="Replace file"
+                            >
+                              <IconFileImport size={14} />
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveProtoFile(index)}
+                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
+                            title="Remove file"
+                            data-testid="protobuf-remove-file-button"
+                          >
+                            <IconTrash size={14} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+          <button type="button" className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleBrowseClick} data-testid="protobuf-add-file-button">
+            + Add Proto File
+          </button>
+        </div>
+      </div>
+
+      {/* Import Paths Section */}
+      <div className="mb-6" data-testid="protobuf-import-paths-section">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center">
+            <label className="font-semibold text-sm flex items-center" htmlFor="importPaths">
+              Import Paths (
+              {importPaths.length}
+              )
+              <span id="import-paths-tooltip" className="ml-2">
+                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
+              </span>
+              <Tooltip
+                anchorId="import-paths-tooltip"
+                className="tooltip-mod font-normal"
+                html="Add directories that contain proto files to be imported. These paths help resolve import statements in your proto files."
+              />
+            </label>
+          </div>
+        </div>
+
+        <div>
+          {importPaths.some((path) => !path.exists) && (
+            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-import-paths-message">
+              <IconAlertCircle size={14} className="mr-1" />
+              Some import paths cannot be found at their specified locations.
+            </div>
+          )}
+
+          <table className="w-full border-collapse" data-testid="protobuf-import-paths-table">
+            <thead>
+              <tr>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                  Directory
+                </th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                  Path
+                </th>
+                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {importPaths.length === 0 ? (
+                <tr>
+                  <td colSpan="4" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
+                    <div className="flex flex-col items-center">
+                      <IconFolder size={24} className="text-gray-400 mb-2" />
+                      <span className="text-sm text-gray-500 dark:text-gray-400">No import paths added</span>
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                importPaths.map((importPath, index) => {
+                  const isValid = importPath.exists;
+
+                  return (
+                    <tr key={index}>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <input
+                          type="checkbox"
+                          checked={importPath.enabled}
+                          onChange={() => handleToggleImportPath(index)}
+                          className="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300 dark:border-gray-600 rounded"
+                          title={importPath.enabled ? 'Disable this import path' : 'Enable this import path'}
+                          data-testid="protobuf-import-path-checkbox"
+                        />
+                      </td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <div className="flex items-center">
+                          <IconFolder size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
+                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                            {getBasename(collection.pathname, importPath.path)}
+                          </span>
+                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
+                        </div>
+                      </td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
+                          {importPath.path}
+                        </div>
+                      </td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
+                        <div className="flex items-center justify-end space-x-1">
+                          {!isValid && (
+                            <button
+                              type="button"
+                              onClick={() => handleReplaceImportPath(index)}
+                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
+                              title="Replace directory"
+                            >
+                              <IconFileImport size={14} />
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveImportPath(index)}
+                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
+                            title="Remove import path"
+                            data-testid="protobuf-remove-import-path-button"
+                          >
+                            <IconTrash size={14} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+          <button type="button" className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleBrowseImportPathClick} data-testid="protobuf-add-import-path-button">
+            + Add Import Path
+          </button>
+        </div>
+      </div>
+
+    </StyledWrapper>
+  );
+};
+
+export default ProtobufSettings;

packages/bruno-app/src/components/CollectionSettings/index.js

@@ -13,6 +13,7 @@ import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
 import Presets from './Presets';
+import Protobuf from './Protobuf';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import StatusDot from 'components/StatusDot';
@@ -45,7 +46,7 @@ const CollectionSettings = ({ collection }) => {
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-
+  const protobufConfig = get(collection, 'brunoConfig.protobuf', {});
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -122,6 +123,9 @@ const CollectionSettings = ({ collection }) => {
           />
         );
       }
+      case 'protobuf': {
+        return <Protobuf collection={collection} />;
+      }
     }
   };
 
@@ -134,7 +138,7 @@ const CollectionSettings = ({ collection }) => {
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-hidden">
       <div className="flex flex-wrap items-center tabs" role="tablist">
-      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+        <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
           Overview
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
@@ -162,12 +166,16 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0  && <StatusDot />}
+          {Object.keys(proxyConfig).length > 0 && <StatusDot />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
           {clientCertConfig.length > 0 && <StatusDot />}
         </div>
+        <div className={getTabClassname('protobuf')} role="tab" onClick={() => setTab('protobuf')}>
+          Protobuf
+          {protobufConfig.protoFiles && protobufConfig.protoFiles.length > 0 && <StatusDot />}
+        </div>
       </div>
       <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
     </StyledWrapper>

packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js

@@ -67,10 +67,10 @@ const RequestTab = ({ request, response }) => {
         )}
       </div>
 
-      {request?.body && (
+      {request?.data && (
         <div className="section">
           <h4>Request Body</h4>
-          <pre className="code-block">{formatBody(request.body)}</pre>
+          <pre className="code-block">{formatBody(request.data)}</pre>
         </div>
       )}
     </div>
@@ -239,4 +239,4 @@ const RequestDetailsPanel = () => {
   );
 };
 
-export default RequestDetailsPanel; 
+export default RequestDetailsPanel; 

packages/bruno-app/src/components/Devtools/Console/index.js

@@ -12,7 +12,8 @@ import {
   IconCode,
   IconChevronDown,
   IconTerminal2,
-  IconNetwork
+  IconNetwork,
+  IconDashboard,
 } from '@tabler/icons';
 import { 
   closeConsole, 
@@ -24,10 +25,12 @@ import {
   updateNetworkFilter,
   toggleAllNetworkFilters
 } from 'providers/ReduxStore/slices/logs';
+
 import NetworkTab from './NetworkTab';
 import RequestDetailsPanel from './RequestDetailsPanel';
 // import DebugTab from './DebugTab';
 import ErrorDetailsPanel from './ErrorDetailsPanel';
+import Performance from '../Performance';
 import StyledWrapper from './StyledWrapper';
 
 const LogIcon = ({ type }) => {
@@ -384,6 +387,8 @@ const Console = () => {
         );
       case 'network':
         return <NetworkTab />;
+      case 'performance':
+        return <Performance />;
       // case 'debug':
       //   return <DebugTab />;
       default:
@@ -484,6 +489,14 @@ const Console = () => {
             <span>Network</span>
           </button>
           
+          <button
+            className={`console-tab ${activeTab === 'performance' ? 'active' : ''}`}
+            onClick={() => handleTabChange('performance')}
+          >
+            <IconDashboard size={16} strokeWidth={1.5} />
+            <span>Performance</span>
+          </button>
+
           {/* <button 
             className={`console-tab ${activeTab === 'debug' ? 'active' : ''}`}
             onClick={() => handleTabChange('debug')}

packages/bruno-app/src/components/Devtools/Performance/StyledWrapper.js

@@ -0,0 +1,120 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tab-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: ${props => props.theme.console.bg};
+  }
+
+  .tab-content-area {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  .overview-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .overview-section {
+    margin-bottom: 32px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .section-header {
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid ${props => props.theme.console.border};
+
+    h3 {
+      margin: 0 0 4px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: ${props => props.theme.console.titleColor};
+    }
+
+    p {
+      margin: 0;
+      font-size: 13px;
+      color: ${props => props.theme.console.textMuted};
+    }
+  }
+
+    .system-resources {
+    margin-bottom: 16px;
+
+    h2 {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: ${props => props.theme.console.titleColor};
+    }
+  }
+
+  .resource-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .resource-card {
+    background: ${props => props.theme.console.headerBg};
+    border: 1px solid ${props => props.theme.console.border};
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .resource-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 6px;
+    color: ${props => props.theme.console.titleColor};
+  }
+
+  .resource-title {
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .resource-value {
+    font-size: 18px;
+    font-weight: 600;
+    color: ${props => props.theme.console.titleColor};
+    margin-bottom: 2px;
+  }
+
+  .resource-subtitle {
+    font-size: 11px;
+    color: ${props => props.theme.console.buttonColor};
+  }
+
+  .resource-trend {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    margin-top: 8px;
+
+    &.up {
+      color: #10b981;
+    }
+
+    &.down {
+      color: #e81123;
+    }
+
+    &.stable {
+      color: ${props => props.theme.console.buttonColor};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Devtools/Performance/index.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import {
+  IconCpu,
+  IconDatabase,
+  IconClock,
+  IconServer,
+  IconChartLine,
+} from '@tabler/icons';
+
+const Performance = () => {
+  const { systemResources } = useSelector(state => state.performance);
+
+  const formatBytes = bytes => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatUptime = seconds => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+
+    if (hours > 0) return `${hours}h ${minutes}m ${secs}s`;
+    if (minutes > 0) return `${minutes}m ${secs}s`;
+    return `${secs}s`;
+  };
+
+  const SystemResourceCard = ({ icon: Icon, title, value, subtitle, color = 'default', trend }) => (
+    <div className={`resource-card ${color}`}>
+      <div className="resource-header">
+        <Icon size={20} strokeWidth={1.5} />
+        <span className="resource-title">{title}</span>
+      </div>
+      <div className="resource-value">{value}</div>
+      {subtitle && <div className="resource-subtitle">{subtitle}</div>}
+      {trend && (
+        <div className={`resource-trend ${trend > 0 ? 'up' : trend < 0 ? 'down' : 'stable'}`}>
+          <IconChartLine size={12} strokeWidth={1.5} />
+          <span>
+            {trend > 0 ? '+' : ''}
+            {trend.toFixed(1)}
+            %
+          </span>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <StyledWrapper>
+      <div className="tab-content">
+        <div className="tab-content-area">
+          <div className="system-resources">
+            <h2>System Resources</h2>
+            <div className="resource-cards">
+              <SystemResourceCard
+                icon={IconCpu}
+                title="CPU Usage"
+                value={`${systemResources.cpu.toFixed(1)}%`}
+                subtitle="Current process"
+                color={systemResources.cpu > 80 ? 'danger' : systemResources.cpu > 60 ? 'warning' : 'success'}
+              />
+
+              <SystemResourceCard
+                icon={IconDatabase}
+                title="Memory Usage"
+                value={formatBytes(systemResources.memory)}
+                subtitle="Current process"
+                color={systemResources.memory > 500 * 1024 * 1024 ? 'danger' : 'default'}
+              />
+
+              <SystemResourceCard
+                icon={IconClock}
+                title="Uptime"
+                value={formatUptime(systemResources.uptime)}
+                subtitle="Process runtime"
+                color="info"
+              />
+
+              <SystemResourceCard
+                icon={IconServer}
+                title="Process ID"
+                value={systemResources.pid || 'N/A'}
+                subtitle="Current PID"
+                color="default"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Performance;

packages/bruno-app/src/components/Dropdown/StyledWrapper.js

@@ -16,6 +16,7 @@ const Wrapper = styled.div`
     border-radius: 3px;
     max-height: 90vh;
     overflow-y: auto;
+    max-width: unset !important;
 
     .tippy-content {
       padding-left: 0;

packages/bruno-app/src/components/Dropdown/index.js

@@ -2,7 +2,12 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, ...props }) => {
+  // When in controlled mode (visible prop is provided), don't use trigger prop
+  const tippyProps = visible !== undefined
+    ? { ...props, visible, interactive: true, appendTo: 'parent' }
+    : { ...props, trigger: 'click', interactive: true, appendTo: 'parent' };
+
   return (
     <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
@@ -11,9 +16,7 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
         animation={false}
         arrow={false}
         onCreate={onCreate}
-        interactive={true}
-        trigger="click"
-        appendTo="parent"
+        {...tippyProps}
       >
         {icon}
       </Tippy>

packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { IconPlus, IconDownload, IconSettings } from '@tabler/icons';
+import ToolHint from 'components/ToolHint';
+
+const EnvironmentListContent = ({
+  environments,
+  activeEnvironmentUid,
+  description,
+  onEnvironmentSelect,
+  onSettingsClick,
+  onCreateClick,
+  onImportClick
+}) => {
+  return (
+    <div>
+      {environments && environments.length > 0 ? (
+        <>
+          <div className="environment-list">
+            <div className="dropdown-item no-environment" onClick={() => onEnvironmentSelect(null)}>
+              <span>No Environment</span>
+            </div>
+            <ToolHint
+              anchorSelect="[data-tooltip-content]"
+              place="right"
+              positionStrategy="fixed"
+              tooltipStyle={{
+                maxWidth: '200px',
+                wordWrap: 'break-word'
+              }}
+              delayShow={1000}
+            >
+              <div>
+                {environments.map((env) => (
+                  <div
+                    key={env.uid}
+                    className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
+                    onClick={() => onEnvironmentSelect(env)}
+                    data-tooltip-content={env.name}
+                    data-tooltip-hidden={env.name?.length < 90}
+                  >
+                    <span className="max-w-100% truncate no-wrap">{env.name}</span>
+                  </div>
+                ))}
+              </div>
+            </ToolHint>
+            <div className="dropdown-item configure-button">
+              <button onClick={onSettingsClick} id="configure-env">
+                <IconSettings size={16} strokeWidth={1.5} />
+                <span>Configure</span>
+              </button>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="empty-state">
+          <h3>Ready to get started?</h3>
+          <p>{description}</p>
+          <div className="space-y-2">
+            <button onClick={onCreateClick} id="create-env">
+              <IconPlus size={16} strokeWidth={1.5} />
+              Create
+            </button>
+            <button onClick={onImportClick} id="import-env">
+              <IconDownload size={16} strokeWidth={1.5} />
+              Import
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EnvironmentListContent;

packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js

@@ -2,14 +2,230 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-environment {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
-    border-radius: 15px;
+    border-radius: 0.9375rem;
+    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid ${(props) => props.theme.dropdown.selectedColor};
+    line-height: 1rem;
 
     .caret {
       margin-left: 0.25rem;
       color: rgb(140, 140, 140);
       fill: rgb(140, 140, 140);
     }
+
+    .env-icon {
+      margin-right: 0.25rem;
+      color: ${(props) => props.theme.dropdown.selectedColor};
+    }
+
+    .env-text {
+      color: ${(props) => props.theme.dropdown.selectedColor};
+      font-size: 0.875rem;
+      display: block;
+    }
+
+    .env-separator {
+      color: #8c8c8c;
+      margin: 0 0.25rem;
+      opacity: 0.7;
+    }
+
+    .env-text-inactive {
+      color: ${(props) => props.theme.dropdown.color};
+      font-size: 0.875rem;
+      opacity: 0.7;
+    }
+
+    &.no-environments {
+      background-color: ${(props) => props.theme.sidebar.badge.bg};
+      border: 1px solid transparent;
+      color: ${(props) => props.theme.dropdown.secondaryText};
+    }
+  }
+
+  .tippy-box {
+    width: ${(props) => props.width}px;
+    min-width: 12rem;
+    max-width: 650px !important;
+    min-height: 15.5rem;
+    max-height: 75vh;
+    font-size: 0.8125rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tippy-box .tippy-content {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      padding: 0.35rem 0.6rem;
+      cursor: pointer;
+      font-size: 0.8125rem;
+      color: ${(props) => props.theme.dropdown.primaryText};
+
+      &:hover:not(:disabled) {
+        background-color: ${(props) => props.theme.dropdown.hoverBg};
+      }
+
+      &.active {
+        background-color: ${(props) => props.theme.dropdown.selectedBg};
+        color: ${(props) => props.theme.dropdown.selectedColor};
+      }
+
+      &.no-environment {
+        color: ${(props) => props.theme.dropdown.mutedText};
+      }
+    }
+  }
+
+  .configure-button {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: ${(props) => props.theme.dropdown.bg};
+    border-top: 0.0625rem solid ${(props) => props.theme.dropdown.separator};
+    z-index: 10;
+    margin: 0;
+    
+    &:hover {
+      background-color: ${(props) => props.theme.dropdown.bg + ' !important'};
+    }
+
+    button {
+      color: ${(props) => props.theme.dropdown.primaryText};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      gap: 0.5rem;
+    }
+  }
+
+  .tab-button {
+    color: var(--color-tab-inactive);
+    font-size: 0.8125rem;
+
+    .tab-content-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.125rem;
+    }
+
+    &.active {
+      color: ${(props) => props.theme.tabs.active.color};
+      border-bottom-color: ${(props) => props.theme.tabs.active.border};
+    }
+
+    &.inactive {
+      border-bottom-color: transparent;
+    }
+  }
+
+  .tab-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .environment-list {
+    flex: 1;
+    overflow-y: auto;
+    max-height: calc(75vh - 8rem); 
+    padding-bottom: 2.625rem;
+  }
+
+  .dropdown-item-list {
+    max-height: 75vh;
+    overflow-y: scroll;
+  }
+
+  .empty-state {
+    max-width: 20rem;
+    margin: 0 auto;
+    padding: 0.35rem 0.6rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 12.5rem;
+
+    h3 {
+      color: ${(props) => props.theme.dropdown.primaryText};
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      line-height: 1.4;
+    }
+
+    p {
+      color: ${(props) => props.theme.dropdown.primaryText};
+      opacity: 0.75;
+      font-size: 0.6875rem;
+      line-height: 1.5;
+      margin-bottom: 1rem;
+      max-width: 11.875rem;
+      margin: 0 auto;
+      margin-bottom: 1rem;
+    }
+
+    .space-y-2 {
+      width: 100%;
+      align-self: stretch;
+    }
+
+    .space-y-2 > button {
+      border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText};
+      background: transparent;
+      color: ${(props) => props.theme.dropdown.primaryText};
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      width: 100%;
+      margin-bottom: 0.5rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+
+      &:hover {
+        background-color: ${(props) => props.theme.dropdown.hoverBg};
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .no-collection-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 1rem;
+    color: ${(props) => props.theme.dropdown.primaryText};
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-align: center;
+    opacity: 0.75;
+
+    svg {
+      margin: 0 auto 1rem auto;
+      color: ${(props) => props.theme.dropdown.primaryText};
+      opacity: 0.5;
+    }
   }
 `;
 

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -1,95 +1,274 @@
-import React, { useRef, forwardRef, useState } from 'react';
+import React, { useMemo, useState, useRef, forwardRef } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
-import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
+import { useSelector, useDispatch } from 'react-redux';
 import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
-import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
-import EnvironmentSettings from '../EnvironmentSettings';
+import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
+import EnvironmentListContent from './EnvironmentListContent/index';
+import EnvironmentSettings from '../EnvironmentSettings';
+import GlobalEnvironmentSettings from 'components/GlobalEnvironments/EnvironmentSettings';
+import CreateEnvironment from '../EnvironmentSettings/CreateEnvironment';
+import ImportEnvironment from '../EnvironmentSettings/ImportEnvironment';
+import CreateGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment';
+import ImportGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment';
+import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
 
 const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
-  const [openSettingsModal, setOpenSettingsModal] = useState(false);
-  const { environments, activeEnvironmentUid } = collection;
-  const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
+  const [activeTab, setActiveTab] = useState('collection');
+  const [showGlobalSettings, setShowGlobalSettings] = useState(false);
+  const [showCollectionSettings, setShowCollectionSettings] = useState(false);
+  const [showCreateGlobalModal, setShowCreateGlobalModal] = useState(false);
+  const [showImportGlobalModal, setShowImportGlobalModal] = useState(false);
+  const [showCreateCollectionModal, setShowCreateCollectionModal] = useState(false);
+  const [showImportCollectionModal, setShowImportCollectionModal] = useState(false);
 
+  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+  const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
+  const activeGlobalEnvironment = activeGlobalEnvironmentUid
+    ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid)
+    : null;
+
+  const environments = collection?.environments || [];
+  const activeEnvironmentUid = collection?.activeEnvironmentUid;
+  const activeCollectionEnvironment = activeEnvironmentUid
+    ? find(environments, (e) => e.uid === activeEnvironmentUid)
+    : null;
+
+  const tabs = [
+    { id: 'collection', label: 'Collection', icon: <IconDatabase size={16} strokeWidth={1.5} /> },
+    { id: 'global', label: 'Global', icon: <IconWorld size={16} strokeWidth={1.5} /> }
+  ];
+
+  const onDropdownCreate = (ref) => {
+    dropdownTippyRef.current = ref;
+  };
+
+  // Get description based on active tab
+  const description =
+    activeTab === 'collection'
+      ? 'Create your first environment to begin working with your collection.'
+      : 'Create your first global environment to begin working across collections.';
+
+  // Environment selection handler
+  const handleEnvironmentSelect = (environment) => {
+    const action =
+      activeTab === 'collection'
+        ? selectEnvironment(environment ? environment.uid : null, collection.uid)
+        : selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null });
+
+    dispatch(action)
+      .then(() => {
+        if (environment) {
+          toast.success(`Environment changed to ${environment.name}`);
+        } else {
+          toast.success('No Environments are active now');
+        }
+        dropdownTippyRef.current.hide();
+      })
+      .catch((err) => {
+        toast.error('An error occurred while selecting the environment');
+      });
+  };
+
+  // Settings handler
+  const handleSettingsClick = () => {
+    if (activeTab === 'collection') {
+      dispatch(updateEnvironmentSettingsModalVisibility(true));
+      setShowCollectionSettings(true);
+    } else {
+      setShowGlobalSettings(true);
+    }
+    dropdownTippyRef.current.hide();
+  };
+
+  // Create handler
+  const handleCreateClick = () => {
+    if (activeTab === 'collection') {
+      setShowCreateCollectionModal(true);
+    } else {
+      setShowCreateGlobalModal(true);
+    }
+    dropdownTippyRef.current.hide();
+  };
+
+  // Import handler
+  const handleImportClick = () => {
+    if (activeTab === 'collection') {
+      setShowImportCollectionModal(true);
+    } else {
+      setShowImportGlobalModal(true);
+    }
+    dropdownTippyRef.current.hide();
+  };
+
+  // Modal handlers
+  const handleCloseSettings = () => {
+    setShowGlobalSettings(false);
+    setShowCollectionSettings(false);
+    dispatch(updateEnvironmentSettingsModalVisibility(false));
+  };
+
+  // Calculate dropdown width based on the longest environment name.
+  // To prevent resizing while switching between collection and global environments.
+  const dropdownWidth = useMemo(() => {
+    const allEnvironments = [...environments, ...globalEnvironments];
+    if (allEnvironments.length === 0) return 0;
+
+    const maxCharLength = Math.max(...allEnvironments.map((env) => env.name?.length || 0));
+    // 8 pixels per character: This is a rough estimate for the average character width in most fonts
+    // (monospace fonts are typically 8-10px, proportional fonts vary but 8px is a safe average)
+    return maxCharLength * 8;
+  }, [environments, globalEnvironments]);
+
+  // Create icon component for dropdown trigger
   const Icon = forwardRef((props, ref) => {
+    const hasAnyEnv = activeGlobalEnvironment || activeCollectionEnvironment;
+
+    const displayContent = hasAnyEnv ? (
+      <>
+        {activeCollectionEnvironment && (
+          <>
+            <div className="flex items-center">
+              <IconDatabase size={14} strokeWidth={1.5} className="env-icon" />
+              <ToolHint
+                text={activeCollectionEnvironment.name}
+                toolhintId={`collection-env-${activeCollectionEnvironment.uid}`}
+                place="bottom-start"
+                delayShow={1000}
+                hidden={activeCollectionEnvironment.name?.length < 7}
+              >
+                <span className="env-text max-w-24 truncate overflow-hidden">{activeCollectionEnvironment.name}</span>
+              </ToolHint>
+            </div>
+            {activeGlobalEnvironment && <span className="env-separator">|</span>}
+          </>
+        )}
+        {activeGlobalEnvironment && (
+          <div className="flex items-center">
+            <IconWorld size={14} strokeWidth={1.5} className="env-icon" />
+            <ToolHint
+              text={activeGlobalEnvironment.name}
+              toolhintId={`global-env-${activeGlobalEnvironment.uid}`}
+              place="bottom-start"
+              delayShow={1000}
+              hidden={activeGlobalEnvironment.name?.length < 7}
+            >
+              <span className="env-text max-w-24 truncate overflow-hidden">{activeGlobalEnvironment.name}</span>
+            </ToolHint>
+          </div>
+        )}
+      </>
+    ) : (
+      <span className="env-text-inactive max-w-36 truncate no-wrap">No environments</span>
+    );
+
     return (
-      <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
-        <p className="text-nowrap truncate max-w-32">{activeEnvironment ? activeEnvironment.name : 'No Environment'}</p>
+      <div
+        ref={ref}
+        className={`current-environment flex align-center justify-center cursor-pointer bg-transparent ${
+          !hasAnyEnv ? 'no-environments' : ''
+        }`}
+        data-testid="environment-selector-trigger"
+      >
+        {displayContent}
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
     );
   });
 
-  const handleSettingsIconClick = () => {
-    setOpenSettingsModal(true);
-    dispatch(updateEnvironmentSettingsModalVisibility(true));
-  };
-
-  const handleModalClose = () => {
-    setOpenSettingsModal(false);
-    dispatch(updateEnvironmentSettingsModalVisibility(false));
-  };
-
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const onSelect = (environment) => {
-    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
-  };
-
   return (
-    <StyledWrapper>
-      <div className="flex items-center cursor-pointer environment-selector">
+    <StyledWrapper width={dropdownWidth}>
+      <div className="environment-selector flex align-center cursor-pointer">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div className="label-item font-medium">Collection Environments</div>
-          {environments && environments.length
-            ? environments.map((e) => (
-                <div
-                  className={`dropdown-item ${e?.uid === activeEnvironmentUid ? 'active' : ''}`}
-                  key={e.uid}
-                  onClick={() => {
-                    onSelect(e);
-                    dropdownTippyRef.current.hide();
-                  }}
-                >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
-                </div>
-              ))
-            : null}
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onSelect(null);
-            }}
-          >
-            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className="ml-2">No Environment</span>
+          {/* Tab Headers */}
+          <div className="tab-header flex p-[0.75rem]">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                className={`tab-button whitespace-nowrap pb-[0.375rem] border-b-[0.125rem] bg-transparent flex align-center cursor-pointer transition-all duration-200 mr-[1.25rem] ${
+                  activeTab === tab.id ? 'active' : 'inactive'
+                }`}
+                onClick={() => setActiveTab(tab.id)}
+                data-testid={`env-tab-${tab.id}`}
+              >
+                <span className="tab-content-wrapper">
+                  {tab.icon}
+                  {tab.label}
+                </span>
+              </button>
+            ))}
           </div>
-          <div className="dropdown-item border-top" onClick={() => {
-            handleSettingsIconClick();
-            dropdownTippyRef.current.hide();
-          }}>
-            <div className="pr-2 text-gray-600">
-              <IconSettings size={18} strokeWidth={1.5} />
-            </div>
-            <span>Configure</span>
+
+          {/* Tab Content */}
+          <div className="tab-content">
+            <EnvironmentListContent
+              environments={activeTab === 'collection' ? environments : globalEnvironments}
+              activeEnvironmentUid={activeTab === 'collection' ? activeEnvironmentUid : activeGlobalEnvironmentUid}
+              description={description}
+              onEnvironmentSelect={handleEnvironmentSelect}
+              onSettingsClick={handleSettingsClick}
+              onCreateClick={handleCreateClick}
+              onImportClick={handleImportClick}
+            />
           </div>
         </Dropdown>
       </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={handleModalClose} />}
+
+      {/* Modals - Rendered outside dropdown to avoid conflicts */}
+      {showGlobalSettings && (
+        <GlobalEnvironmentSettings
+          globalEnvironments={globalEnvironments}
+          collection={collection}
+          activeGlobalEnvironmentUid={activeGlobalEnvironmentUid}
+          onClose={handleCloseSettings}
+        />
+      )}
+
+      {showCollectionSettings && <EnvironmentSettings collection={collection} onClose={handleCloseSettings} />}
+
+      {showCreateGlobalModal && (
+        <CreateGlobalEnvironment
+          onClose={() => setShowCreateGlobalModal(false)}
+          onEnvironmentCreated={() => {
+            setShowGlobalSettings(true);
+          }}
+        />
+      )}
+
+      {showImportGlobalModal && (
+        <ImportGlobalEnvironment
+          onClose={() => setShowImportGlobalModal(false)}
+          onEnvironmentCreated={() => {
+            setShowGlobalSettings(true);
+          }}
+        />
+      )}
+
+      {showCreateCollectionModal && (
+        <CreateEnvironment
+          collection={collection}
+          onClose={() => setShowCreateCollectionModal(false)}
+          onEnvironmentCreated={() => {
+            setShowCollectionSettings(true);
+          }}
+        />
+      )}
+
+      {showImportCollectionModal && (
+        <ImportEnvironment
+          collection={collection}
+          onClose={() => setShowImportCollectionModal(false)}
+          onEnvironmentCreated={() => {
+            setShowCollectionSettings(true);
+          }}
+        />
+      )}
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js

@@ -8,7 +8,7 @@ import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { validateName, validateNameError } from 'utils/common/regex';
 
-const CreateEnvironment = ({ collection, onClose }) => {
+const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
 
@@ -37,6 +37,10 @@ const CreateEnvironment = ({ collection, onClose }) => {
         .then(() => {
           toast.success('Environment created in collection');
           onClose();
+          // Call the callback if provided
+          if (onEnvironmentCreated) {
+            onEnvironmentCreated();
+          }
         })
         .catch(() => toast.error('An error occurred while creating the environment'));
     }

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -5,7 +5,7 @@ import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCh
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
+import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -173,7 +173,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
   return (
     <StyledWrapper className="w-full mt-6 mb-6">
       <div className="h-[50vh] overflow-y-auto w-full">
-        <table>
+        <table className="environment-variables">
           <thead>
             <tr>
               <td className="text-center">Enabled</td>
@@ -214,7 +214,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                 </td>
                 <td className="flex flex-row flex-nowrap items-center">
                   <div className="overflow-hidden grow w-full relative">
-                    <SingleLineEditor
+                    <MultiLineEditor
                       theme={storedTheme}
                       collection={_collection}
                       name={`${index}.value`}
@@ -253,6 +253,8 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
             ref={addButtonRef}
             className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
             onClick={addVariable}
+            id="add-variable"
+            data-testid="add-variable"
           >
             + Add Variable
           </button>
@@ -260,15 +262,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
       </div>
 
       <div className="flex items-center">
-        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit}>
+        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit} data-testid="save-env">
           <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset} data-testid="reset-env">
           <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
           Reset
         </button>
-        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate}>
+        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate} data-testid="activate-env">
           <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
           Activate
         </button>

packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js

@@ -8,7 +8,7 @@ import { importEnvironment } from 'providers/ReduxStore/slices/collections/actio
 import { toastError } from 'utils/common/error';
 import { IconDatabaseImport } from '@tabler/icons';
 
-const ImportEnvironment = ({ collection, onClose }) => {
+const ImportEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
   const dispatch = useDispatch();
 
   const handleImportPostmanEnvironment = () => {
@@ -36,17 +36,22 @@ const ImportEnvironment = ({ collection, onClose }) => {
       })
       .then(() => {
         onClose();
+        // Call the callback if provided
+        if (onEnvironmentCreated) {
+          onEnvironmentCreated();
+        }
       })
       .catch((err) => toastError(err, 'Postman Import environment failed'));
   };
 
   return (
     <Portal>
-      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-environment-modal">
         <button
           type="button"
           onClick={handleImportPostmanEnvironment}
           className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+          data-testid="import-postman-environment"
         >
           <IconDatabaseImport size={64} />
           <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>

packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js

@@ -56,9 +56,8 @@ const EnvironmentSettings = ({ collection, onClose }) => {
           ) : tab === 'import' ? (
             <ImportEnvironment collection={collection} onClose={() => setTab('default')} />
           ) : (
-            <></>
+            <DefaultTab setTab={setTab} />
           )}
-          <DefaultTab setTab={setTab} />
         </Modal>
       </StyledWrapper>
     );

packages/bruno-app/src/components/FolderSettings/Headers/index.js

@@ -1,21 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addFolderHeader, updateFolderHeader, deleteFolderHeader } from 'providers/ReduxStore/slices/collections';
+import { addFolderHeader, updateFolderHeader, deleteFolderHeader, setFolderHeaders } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import BulkEditor from 'components/BulkEditor/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = get(folder, 'root.request.headers', []);
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    dispatch(setFolderHeaders({ collectionUid: collection.uid, folderUid: folder.uid, headers: newHeaders }));
+  };
 
   const addHeader = () => {
     dispatch(
@@ -62,6 +72,22 @@ const Headers = ({ collection, folder }) => {
     );
   };
 
+  if (isBulkEditMode) {
+    return (
+      <StyledWrapper className="w-full">
+        <div className="text-xs mb-4 text-muted">
+          Request headers that will be sent with every request inside this folder.
+        </div>
+        <BulkEditor
+          params={headers}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+          onSave={handleSave}
+        />
+      </StyledWrapper>
+    );
+  }
+
   return (
     <StyledWrapper className="w-full">
       <div className="text-xs mb-4 text-muted">
@@ -141,9 +167,14 @@ const Headers = ({ collection, folder }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
+      <div className="flex justify-between mt-2">
+        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
+          + Add Header
+        </button>
+        <button className="text-link select-none" onClick={toggleBulkEditMode}>
+          Bulk Edit
+        </button>
+      </div>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/StyledWrapper.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  .current-environment {
-  }
-  .environment-active {
-    padding: 0.3rem 0.4rem;
-    color: ${(props) => props.theme.colors.text.yellow};
-    border: solid 1px ${(props) => props.theme.colors.text.yellow} !important;
-  }
-  .environment-selector {
-    .active: {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-  }
-`;
-
-export default Wrapper;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js

@@ -1,100 +0,0 @@
-import React, { useRef, forwardRef, useState } from 'react';
-import find from 'lodash/find';
-import Dropdown from 'components/Dropdown';
-import { IconSettings, IconWorld, IconDatabase, IconDatabaseOff, IconCheck } from '@tabler/icons';
-import EnvironmentSettings from '../EnvironmentSettings';
-import toast from 'react-hot-toast';
-import { useDispatch, useSelector } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import ToolHint from 'components/ToolHint/index';
-
-const EnvironmentSelector = () => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
-  const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
-  const [openSettingsModal, setOpenSettingsModal] = useState(false);
-  const activeEnvironment = activeGlobalEnvironmentUid ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid) : null;
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-        <div ref={ref} className={`current-environment flex flex-row gap-1 rounded-xl text-xs cursor-pointer items-center justify-center select-none ${activeGlobalEnvironmentUid? 'environment-active': ''}`}>
-          <ToolHint text="Global Environments" toolhintId="GlobalEnvironmentsToolhintId" className='flex flex-row'>
-            <IconWorld className="globe" size={16} strokeWidth={1.5} />
-            {
-              activeEnvironment ? <div className='text-nowrap truncate max-w-32'>{activeEnvironment?.name}</div> : null
-            }
-          </ToolHint>
-        </div>
-    );
-  });
-
-  const handleSettingsIconClick = () => {
-    setOpenSettingsModal(true);
-  };
-
-  const handleModalClose = () => {
-    setOpenSettingsModal(false);
-  };
-
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const onSelect = (environment) => {
-    dispatch(selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null }))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center cursor-pointer environment-selector mr-3">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end" transparent={true}>
-          <div className="label-item font-medium">Global Environments</div>
-          {globalEnvironments && globalEnvironments.length
-            ? globalEnvironments.map((e) => (
-                <div
-                  className={`dropdown-item ${e?.uid === activeGlobalEnvironmentUid ? 'active' : ''}`}
-                  key={e.uid}
-                  onClick={() => {
-                    onSelect(e);
-                    dropdownTippyRef.current.hide();
-                  }}
-                >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
-                </div>
-              ))
-            : null}
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onSelect(null);
-            }}
-          >
-            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className="ml-2">No Environment</span>
-          </div>
-          <div className="dropdown-item border-top" onClick={() => {
-            handleSettingsIconClick();
-            dropdownTippyRef.current.hide();
-          }}>
-            <div className="pr-2 text-gray-600">
-              <IconSettings size={18} strokeWidth={1.5} />
-            </div>
-            <span>Configure</span>
-          </div>
-        </Dropdown>
-      </div>
-      {openSettingsModal && <EnvironmentSettings globalEnvironments={globalEnvironments} activeGlobalEnvironmentUid={activeGlobalEnvironmentUid} onClose={handleModalClose} />}
-    </StyledWrapper>
-  );
-};
-
-export default EnvironmentSelector;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js

@@ -8,7 +8,7 @@ import Modal from 'components/Modal';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { validateName, validateNameError } from 'utils/common/regex';
 
-const CreateEnvironment = ({ onClose }) => {
+const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
   const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
 
   const validateEnvironmentName = (name) => {
@@ -39,6 +39,10 @@ const CreateEnvironment = ({ onClose }) => {
         .then(() => {
           toast.success('Global environment created!');
           onClose();
+          // Call the callback if provided
+          if (onEnvironmentCreated) {
+            onEnvironmentCreated();
+          }
         })
         .catch(() => toast.error('An error occurred while creating the environment'));
     }

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -1,9 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconAlertCircle } from '@tabler/icons';
+import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
+import { useDispatch, useSelector } from 'react-redux';
+import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -12,11 +12,18 @@ import { variableNameRegex } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { Tooltip } from 'react-tooltip';
+import { getGlobalEnvironmentVariables } from 'utils/collections';
 
-const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables }) => {
+const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const addButtonRef = useRef(null);
+  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector(state => state.globalEnvironments);
+
+  let _collection = cloneDeep(collection);
+
+  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
+  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -34,7 +41,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
         secret: Yup.boolean(),
         type: Yup.string(),
         uid: Yup.string(),
-        value: Yup.string().trim().nullable()
+        value: Yup.mixed().nullable()
       })
     ),
     onSubmit: (values) => {
@@ -93,7 +100,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
 
   useEffect(() => {
     if (formik.dirty) {
-      // Smooth scrolling to the changed parameter is temporarily disabled 
+      // Smooth scrolling to the changed parameter is temporarily disabled
       // due to UX issues when editing the first row in a long list of environment variables.
       // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
@@ -145,16 +152,32 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                     <ErrorMessage name={`${index}.name`} />
                   </div>
                 </td>
-                <td className="flex flex-row flex-nowrap">
+                <td className="flex flex-row flex-nowrap items-center">
                   <div className="overflow-hidden grow w-full relative">
-                    <SingleLineEditor
+                    <MultiLineEditor
                       theme={storedTheme}
+                      collection={_collection}
                       name={`${index}.value`}
                       value={variable.value}
                       isSecret={variable.secret}
+                      readOnly={typeof variable.value !== 'string'}
                       onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
                     />
                   </div>
+                  {typeof variable.value !== 'string' && (
+                    <span className="ml-2 flex items-center">
+                      <IconInfoCircle
+                        id={`${variable.name}-disabled-info-icon`}
+                        className="text-muted"
+                        size={16}
+                      />
+                      <Tooltip
+                        anchorId={`${variable.name}-disabled-info-icon`}
+                        content="Non-string values set via scripts are read-only and can only be updated through scripts."
+                        place="top"
+                      />
+                    </span>
+                  )}
                 </td>
                 <td className="text-center">
                   <input
@@ -179,6 +202,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
             ref={addButtonRef}
             className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
             onClick={addVariable}
+            data-testid="add-variable"
           >
             + Add Variable
           </button>
@@ -186,10 +210,10 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
       </div>
 
       <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit} data-testid="save-env">
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset} data-testid="reset-env">
           Reset
         </button>
       </div>

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js

@@ -5,7 +5,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
 
-const EnvironmentDetails = ({ environment, setIsModified }) => {
+const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -37,7 +37,7 @@ const EnvironmentDetails = ({ environment, setIsModified }) => {
       </div>
 
       <div>
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} />
+        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
       </div>
     </div>
   );

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js

@@ -10,7 +10,7 @@ import ImportEnvironment from '../ImportEnvironment';
 import { isEqual } from 'lodash';
 import ToolHint from 'components/ToolHint/index';
 
-const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified }) => {
+const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
   const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
@@ -143,6 +143,7 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
           environment={selectedEnvironment}
           setIsModified={setIsModified}
           originalEnvironmentVariables={originalEnvironmentVariables}
+          collection={collection}
         />
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment/index.js

@@ -9,7 +9,7 @@ import { IconDatabaseImport } from '@tabler/icons';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { uuid } from 'utils/common/index';
 
-const ImportEnvironment = ({ onClose }) => {
+const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
   const dispatch = useDispatch();
 
   const handleImportPostmanEnvironment = () => {
@@ -25,12 +25,7 @@ const ImportEnvironment = ({ onClose }) => {
                 }
           )
           .map((environment) => {
-            let variables = environment?.variables?.map(v => ({
-              ...v,
-              uid: uuid(),
-              type: 'text'
-            }));
-            dispatch(addGlobalEnvironment({ name: environment.name, variables }))
+            dispatch(addGlobalEnvironment({ name: environment.name, variables: environment.variables }))
               .then(() => {
                 toast.success('Global Environment imported successfully');
               })
@@ -42,17 +37,22 @@ const ImportEnvironment = ({ onClose }) => {
       })
       .then(() => {
         onClose();
+        // Call the callback if provided
+        if (onEnvironmentCreated) {
+          onEnvironmentCreated();
+        }
       })
       .catch((err) => toastError(err, 'Postman Import environment failed'));
   };
 
   return (
     <Portal>
-      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-global-environment-modal">
         <button
           type="button"
           onClick={handleImportPostmanEnvironment}
           className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+          data-testid="import-postman-global-environment"
         >
           <IconDatabaseImport size={64} />
           <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js

@@ -39,7 +39,7 @@ const DefaultTab = ({ setTab }) => {
   );
 };
 
-const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, onClose }) => {
+const EnvironmentSettings = ({ globalEnvironments, collection, activeGlobalEnvironmentUid, onClose }) => {
   const [isModified, setIsModified] = useState(false);
   const environments = globalEnvironments;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
@@ -53,9 +53,8 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
           ) : tab === 'import' ? (
             <ImportEnvironment onClose={() => setTab('default')} />
           ) : (
-            <></>
+            <DefaultTab setTab={setTab} />
           )}
-          <DefaultTab setTab={setTab} />
         </Modal>
       </StyledWrapper>
     );
@@ -70,6 +69,7 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
         setSelectedEnvironment={setSelectedEnvironment}
         isModified={isModified}
         setIsModified={setIsModified}
+        collection={collection}
       />
     </Modal>
   );

packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js

@@ -0,0 +1,361 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  /* Screen reader only content */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .command-k-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    overflow-y: auto;
+    z-index: 20;
+    background-color: transparent;
+    &:before {
+      content: '';
+      height: 100%;
+      width: 100%;
+      left: 0;
+      opacity: ${(props) => props.theme.modal.backdrop.opacity};
+      top: 0;
+      background: black;
+      position: fixed;
+    }
+    animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .command-k-modal {
+    background: ${(props) => props.theme.modal.body.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 600px;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    margin: 80px auto;
+    animation: fade-and-slide-in-from-top 0.3s forwards cubic-bezier(0.19, 1, 0.22, 1);
+    will-change: opacity, transform;
+  }
+  .command-k-header {
+    padding: 12px;
+    border-bottom: 1px solid ${(props) => props.theme.modal.input.border};
+    background: ${(props) => props.theme.modal.title.bg};
+  }
+  .search-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border-radius: 6px;
+    background: ${(props) => props.theme.modal.input.bg};
+    transition: all 0.2s ease;
+    &:focus-within {
+      border-color: ${(props) => props.theme.colors.text.muted};
+      box-shadow: 0 0 0 1px ${(props) => props.theme.colors.text.muted}40;
+    }
+    .search-icon {
+      color: ${(props) => props.theme.colors.text.muted};
+      opacity: 0.8;
+      margin-right: 8px;
+      flex-shrink: 0;
+    }
+    .clear-button {
+      background: transparent;
+      border: none;
+      padding: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${(props) => props.theme.colors.text.muted};
+      opacity: 0.8;
+      margin-left: 8px;
+      border-radius: 4px;
+      flex-shrink: 0;
+      &:hover {
+        background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
+      }
+    }
+  }
+  .search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: ${(props) => props.theme.text};
+    font-size: 13px;
+    width: 100%;
+    padding: 0;
+    &::placeholder {
+      color: ${(props) => props.theme.colors.text.muted};
+      opacity: 0.7;
+    }
+  }
+  .command-k-results {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 400px;
+    background: ${(props) => props.theme.modal.body.bg};
+    scrollbar-width: thin;
+    padding: 4px;
+    scroll-behavior: smooth;
+    /* Webkit scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'};
+      border-radius: 4px;
+      &:hover {
+        background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)'};
+      }
+    }
+  }
+  .result-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    gap: 8px;
+    cursor: pointer;
+    border-left: 2px solid transparent;
+    &:hover {
+      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
+    }
+    &.selected {
+      background: ${(props) => `${props.theme.colors.text.yellow}15`};
+      border-left: 2px solid ${(props) => props.theme.colors.text.yellow};
+    }
+  }
+  .result-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    color: ${(props) => props.theme.colors.text.muted};
+    opacity: 0.8;
+  }
+  .result-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+  .result-info {
+    flex: 1;
+    min-width: 0;
+    margin-right: 8px;
+  }
+  .result-badges {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+  .result-name {
+    font-size: 13px;
+    margin-bottom: 3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${(props) => props.theme.text};
+    letter-spacing: 0.2px;
+  }
+  .result-path {
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.text.muted};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    letter-spacing: 0.1px;
+  }
+  .method-badge {
+    font-size: 11px;
+    font-weight: 500;
+    padding: 3px 8px;
+    border-radius: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    flex-shrink: 0;
+    min-width: 55px;
+    text-align: center;
+    &.get {
+      color: #2ecc71;
+      background: rgba(46, 204, 113, 0.1);
+    }
+    &.post {
+      color: #3498db;
+      background: rgba(52, 152, 219, 0.1);
+    }
+    &.put {
+      color: #e67e22;
+      background: rgba(230, 126, 34, 0.1);
+    }
+    &.delete {
+      color: #e74c3c;
+      background: rgba(231, 76, 60, 0.1);
+    }
+    &.patch {
+      color: #9b59b6;
+      background: rgba(155, 89, 182, 0.1);
+    }
+    &.head {
+      color: #2980b9;
+      background: rgba(41, 128, 185, 0.1);
+    }
+    &.options {
+      color: #f1c40f;
+      background: rgba(241, 196, 15, 0.1);
+    }
+    &.unary {
+      color: #27ae60;
+      background: rgba(39, 174, 96, 0.12);
+      font-weight: 600;
+    }
+    &.client-streaming {
+      color: #2980b9;
+      background: rgba(41, 128, 185, 0.12);
+      font-weight: 600;
+    }
+    &.server-streaming {
+      color: #f39c12;
+      background: rgba(243, 156, 18, 0.12);
+      font-weight: 600;
+    }
+    &.bidirectional-streaming,
+    &.bidi-streaming {
+      color: #8e44ad;
+      background: rgba(142, 68, 173, 0.12);
+      font-weight: 600;
+    }
+  }
+  .result-type {
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.text.muted};
+    padding: 2px 6px;
+    border-radius: 3px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)'};
+    opacity: 0.8;
+    flex-shrink: 0;
+  }
+  .result-item[data-type="documentation"] {
+    .result-icon {
+      color: ${(props) => props.theme.colors.text.muted};
+      opacity: 0.8;
+    }
+    .result-path {
+      font-size: 12px;
+      color: ${(props) => props.theme.colors.text.muted};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 0.1px;
+      opacity: 0.8;
+    }
+    &:hover:not(.selected) {
+      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
+    }
+  }
+  .no-results,
+  .empty-state {
+    padding: 24px 16px;
+    text-align: center;
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: 13px;
+  }
+  .command-k-footer {
+    padding: 8px 12px;
+    border-top: 1px solid ${(props) => props.theme.modal.input.border};
+    background: ${(props) => props.theme.colors.surface};
+  }
+  .keyboard-hints {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: 12px;
+    letter-spacing: 0.2px;
+    span {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      .hint-icon {
+        color: ${(props) => props.theme.colors.text.muted};
+        opacity: 0.8;
+      }
+      .hint-icon + .hint-icon {
+        margin-left: -8px;
+      }
+      .keycap {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 6px;
+        border: 1px solid ${(props) => props.theme.modal.input.border};
+        border-radius: 4px;
+        background: ${(props) =>
+          props.theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
+        font-size: 11px;
+        font-weight: 500;
+        font-family: inherit;
+        line-height: 1;
+        color: ${(props) => props.theme.text};
+      }
+    }
+  }
+  .highlight {
+    background: ${(props) => `${props.theme.colors.text.yellow}30`};
+    border-radius: 2px;
+    padding: 0 2px;
+    margin: 0 -1px;
+    font-weight: 500;
+  }
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-and-slide-in-from-top {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/GlobalSearchModal/constants/index.js

@@ -0,0 +1,32 @@
+export const SEARCH_TYPES = {
+  DOCUMENTATION: 'documentation',
+  COLLECTION: 'collection',
+  FOLDER: 'folder',
+  REQUEST: 'request'
+};
+
+export const MATCH_TYPES = {
+  COLLECTION: 'collection',
+  FOLDER: 'folder',
+  REQUEST: 'request',
+  URL: 'url',
+  PATH: 'path',
+  DOCUMENTATION: 'documentation'
+};
+
+export const SEARCH_CONFIG = {
+  MAX_DEPTH: 20,
+  FOCUS_DELAY: 100,
+  SCROLL_BEHAVIOR: 'smooth',
+  SCROLL_BLOCK: 'nearest',
+  DEBOUNCE_DELAY: 300
+};
+
+export const DOCUMENTATION_RESULT = {
+  type: SEARCH_TYPES.DOCUMENTATION,
+  item: { id: 'docs', name: 'Bruno Documentation' },
+  name: 'Bruno Documentation',
+  path: '/',
+  description: 'Browse the official Bruno documentation',
+  matchType: MATCH_TYPES.DOCUMENTATION
+};

packages/bruno-app/src/components/GlobalSearchModal/index.js

@@ -0,0 +1,516 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  IconSearch,
+  IconX,
+  IconFolder,
+  IconBox,
+  IconFileText,
+  IconBook
+} from '@tabler/icons';
+import { flattenItems, isItemARequest, isItemAFolder, findParentItemInCollection } from 'utils/collections';
+import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
+import { hideHomePage } from 'providers/ReduxStore/slices/app';
+import { toggleCollectionItem, toggleCollection } from 'providers/ReduxStore/slices/collections';
+import { mountCollection } from 'providers/ReduxStore/slices/collections/actions';
+import { getDefaultRequestPaneTab } from 'utils/collections';
+import { normalizeQuery, isValidQuery, highlightText, sortResults, getTypeLabel, getItemPath } from './utils/searchUtils';
+import { SEARCH_TYPES, MATCH_TYPES, SEARCH_CONFIG, DOCUMENTATION_RESULT } from './constants';
+import StyledWrapper from './StyledWrapper';
+
+const GlobalSearchModal = ({ isOpen, onClose }) => {
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [results, setResults] = useState([]);
+  const inputRef = useRef(null);
+  const resultsRef = useRef(null);
+  const debounceTimeoutRef = useRef(null);
+  const dispatch = useDispatch();
+
+  const collections = useSelector((state) => state.collections.collections);
+  const tabs = useSelector((state) => state.tabs.tabs);
+
+  const createCollectionResults = () => {
+    const collectionResults = collections.map(collection => ({
+      type: SEARCH_TYPES.COLLECTION,
+      item: collection,
+      name: collection.name,
+      path: collection.name,
+      matchType: MATCH_TYPES.COLLECTION,
+      collectionUid: collection.uid
+    }));
+
+    collectionResults.sort((a, b) => a.name.localeCompare(b.name));
+    return [DOCUMENTATION_RESULT, ...collectionResults];
+  };
+
+  const searchInCollections = (searchTerms, enablePathMatch) => {
+    const results = [];
+
+    // Check for documentation match
+    const queryLower = searchTerms.join(' ');
+    if (['documentation', 'docs', 'bruno docs'].some(term => term.includes(queryLower))) {
+      results.push(DOCUMENTATION_RESULT);
+    }
+
+    collections.forEach(collection => {
+      // Search collection name
+      if (searchTerms.every(term => collection.name.toLowerCase().includes(term))) {
+        results.push({
+          type: SEARCH_TYPES.COLLECTION,
+          item: collection,
+          name: collection.name,
+          path: collection.name,
+          matchType: MATCH_TYPES.COLLECTION,
+          collectionUid: collection.uid
+        });
+      }
+
+      // Search collection items
+      const flattenedItems = flattenItems(collection.items);
+      flattenedItems.forEach(item => {
+        const itemPath = getItemPath(item, collection, findParentItemInCollection);
+        const itemPathLower = itemPath.toLowerCase();
+
+        if (isItemARequest(item)) {
+          // add an optional check for the item name to prevent a crash if it doesn’t exist.
+          const nameMatch = searchTerms.every(term => (item.name || '').toLowerCase().includes(term));
+          const urlMatch = searchTerms.every(term => (item.request?.url || '').toLowerCase().includes(term));
+          const pathMatch = enablePathMatch && searchTerms.every(term => itemPathLower.includes(term));
+
+          if (nameMatch || urlMatch || pathMatch) {
+            // Check if this is a gRPC request and get the method type
+            const isGrpcRequest = item.request?.type === 'grpc';
+            
+            let method = item.request?.method || '';
+            
+            if (isGrpcRequest) {
+              // For gRPC requests, use the methodType
+              const methodType = item.request?.methodType || 'UNARY';
+              method = methodType.toLowerCase().replace(/[_]/g, '-');
+            }
+            
+            results.push({
+              type: SEARCH_TYPES.REQUEST,
+              item,
+              name: item.name,
+              path: itemPath,
+              matchType: nameMatch ? MATCH_TYPES.REQUEST : urlMatch ? MATCH_TYPES.URL : MATCH_TYPES.PATH,
+              method,
+              collectionUid: collection.uid
+            });
+          }
+        } else if (isItemAFolder(item)) {
+          const nameMatch = searchTerms.every(term => item.name.toLowerCase().includes(term));
+          const pathMatch = enablePathMatch && searchTerms.every(term => itemPathLower.includes(term));
+
+          if (nameMatch || pathMatch) {
+            results.push({
+              type: SEARCH_TYPES.FOLDER,
+              item,
+              name: item.name,
+              path: itemPath,
+              matchType: nameMatch ? MATCH_TYPES.FOLDER : MATCH_TYPES.PATH,
+              collectionUid: collection.uid
+            });
+          }
+        }
+      });
+    });
+
+    return results;
+  };
+
+  const performSearch = (searchQuery) => {
+    const normalizedQuery = normalizeQuery(searchQuery);
+
+    if (!normalizedQuery) {
+      setResults(createCollectionResults());
+      return;
+    }
+
+    if (!isValidQuery(normalizedQuery)) {
+      setResults([]);
+      return;
+    }
+
+    const searchTerms = normalizedQuery.toLowerCase().split(/[\s\/]+/).filter(Boolean);
+    if (!searchTerms.length) {
+      setResults([]);
+      return;
+    }
+
+    const enablePathMatch = normalizedQuery.includes('/');
+    const searchResults = searchInCollections(searchTerms, enablePathMatch);
+    const sortedResults = sortResults(searchResults);
+
+    setResults(sortedResults);
+    setSelectedIndex(0);
+  };
+
+  const debouncedSearch = useCallback((searchQuery) => {
+    // Clear existing timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Set new timeout
+    debounceTimeoutRef.current = setTimeout(() => {
+      performSearch(searchQuery);
+    }, SEARCH_CONFIG.DEBOUNCE_DELAY);
+  }, [collections]); // Depend on collections to recreate when they change
+
+  const expandItemPath = (result) => {
+    const collection = collections.find(c => c.uid === result.collectionUid);
+    if (!collection) return;
+
+    ensureCollectionIsMounted(collection);
+
+    if (collection.collapsed) {
+      dispatch(toggleCollection(collection.uid));
+    }
+
+    let currentItem = result.type === SEARCH_TYPES.FOLDER 
+      ? result.item 
+      : findParentItemInCollection(collection, result.item.uid);
+
+    while (currentItem?.type === 'folder') {
+      if (currentItem.collapsed) {
+        dispatch(toggleCollectionItem({ collectionUid: collection.uid, itemUid: currentItem.uid }));
+      }
+      currentItem = findParentItemInCollection(collection, currentItem.uid);
+    }
+  };
+
+  const ensureCollectionIsMounted = (collection) => {
+    if (!collection || collection.mountStatus === 'mounted') return;
+    dispatch(mountCollection({
+      collectionUid: collection.uid,
+      collectionPathname: collection.pathname,
+      brunoConfig: collection.brunoConfig
+    }));
+  };
+
+  const handleKeyNavigation = (e) => {
+    const handlers = {
+      ArrowDown: () => {
+        e.preventDefault();
+        setSelectedIndex(prev => prev < results.length - 1 ? prev + 1 : 0);
+      },
+      ArrowUp: () => {
+        e.preventDefault();
+        setSelectedIndex(prev => prev > 0 ? prev - 1 : results.length - 1);
+      },
+      Enter: () => {
+        e.preventDefault();
+        if (results[selectedIndex]) {
+          handleResultSelection(results[selectedIndex]);
+        }
+      },
+      Escape: () => {
+        e.preventDefault();
+        onClose();
+      },
+      PageDown: () => {
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 5, results.length - 1));
+      },
+      PageUp: () => {
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 5, 0));
+      },
+      Home: () => {
+        e.preventDefault();
+        setSelectedIndex(0);
+      },
+      End: () => {
+        e.preventDefault();
+        setSelectedIndex(results.length - 1);
+      }
+    };
+
+    const handler = handlers[e.key];
+    if (handler) handler();
+  };
+
+  const handleResultSelection = (result) => {
+    const targetCollection = collections.find(c => c.uid === result.collectionUid);
+    ensureCollectionIsMounted(targetCollection);
+
+    if (result.type === SEARCH_TYPES.DOCUMENTATION) {
+      window.open('https://docs.usebruno.com/', '_blank');
+      onClose();
+      return;
+    }
+
+    expandItemPath(result);
+
+    if (result.type === SEARCH_TYPES.REQUEST) {
+      dispatch(hideHomePage());
+
+      const existingTab = tabs.find(tab => tab.uid === result.item.uid);
+
+      if (existingTab) {
+        dispatch(focusTab({ uid: result.item.uid }));
+      } else {
+        dispatch(addTab({
+          uid: result.item.uid,
+          collectionUid: result.collectionUid,
+          requestPaneTab: getDefaultRequestPaneTab(result.item),
+          type: 'request',
+        }));
+      }
+    } else if (result.type === SEARCH_TYPES.FOLDER) {
+      dispatch(addTab({
+        uid: result.item.uid,
+        collectionUid: result.collectionUid,
+        type: 'folder-settings',
+      }));
+    } else if (result.type === SEARCH_TYPES.COLLECTION) {
+      dispatch(addTab({
+        uid: result.item.uid,
+        collectionUid: result.collectionUid,
+        type: 'collection-settings',
+      }));
+    }
+
+    onClose();
+  };
+
+  const handleQueryChange = (e) => {
+    const newQuery = e.target.value;
+    setQuery(newQuery);
+    
+    if (newQuery.trim()) {
+      debouncedSearch(newQuery);
+    } else {
+      // For empty queries, search immediately to show collections
+      performSearch(newQuery);
+    }
+  };
+
+  const clearSearch = () => {
+    // Clear any pending debounced search
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    
+    setQuery('');
+    setResults([]);
+  };
+
+  // Initialize modal when opened
+  useEffect(() => {
+    if (isOpen) {
+      const timeoutId = setTimeout(() => inputRef.current?.focus(), SEARCH_CONFIG.FOCUS_DELAY);
+      setQuery('');
+      performSearch('');
+      setSelectedIndex(0);
+      
+      return () => clearTimeout(timeoutId);
+    } else {
+      // Clear any pending debounced search when modal closes
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    }
+  }, [isOpen]);
+
+  // Auto-scroll selected item into view
+  useEffect(() => {
+    if (resultsRef.current && results.length > 0) {
+      const selectedElement = resultsRef.current.children[selectedIndex];
+      selectedElement?.scrollIntoView({
+        behavior: SEARCH_CONFIG.SCROLL_BEHAVIOR,
+        block: SEARCH_CONFIG.SCROLL_BLOCK
+      });
+    }
+  }, [selectedIndex, results]);
+
+  // Cleanup debounce timeout on unmount or modal close
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const getResultIcon = (type) => {
+    const iconMap = {
+      [SEARCH_TYPES.DOCUMENTATION]: IconBook,
+      [SEARCH_TYPES.COLLECTION]: IconBox,
+      [SEARCH_TYPES.FOLDER]: IconFolder,
+      [SEARCH_TYPES.REQUEST]: IconFileText
+    };
+    const IconComponent = iconMap[type] || IconFileText;
+    return <IconComponent size={18} stroke={1.5} />;
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <StyledWrapper>
+      <div 
+        className="command-k-overlay" 
+        onClick={onClose}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="search-modal-title"
+        aria-describedby="search-modal-description"
+      >
+        <div className="command-k-modal" onClick={(e) => e.stopPropagation()}>
+          <h1 id="search-modal-title" className="sr-only">Global Search</h1>
+          <p id="search-modal-description" className="sr-only">
+            Search through collections, requests, folders, and documentation. Use arrow keys to navigate results and Enter to select.
+          </p>
+          <div aria-live="polite" aria-atomic="true" className="sr-only">
+            {results.length > 0 && query 
+              ? `${results.length} result${results.length === 1 ? '' : 's'} found`
+              : query && results.length === 0 
+                ? 'No results found'
+                : ''
+            }
+          </div>
+          <div className="command-k-header">
+            <div className="search-input-container">
+              <IconSearch size={20} className="search-icon" aria-hidden="true" />
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder="Search collections, requests, or documentation..."
+                value={query}
+                onChange={handleQueryChange}
+                onKeyDown={handleKeyNavigation}
+                className="search-input"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                aria-label="Search collections, requests, or documentation"
+                aria-expanded={results.length > 0}
+                aria-controls="search-results"
+                aria-activedescendant={results.length > 0 ? `search-result-${selectedIndex}` : undefined}
+                role="combobox"
+                aria-autocomplete="list"
+              />
+              {query && (
+                <button 
+                  onClick={clearSearch} 
+                  className="clear-button"
+                  aria-label="Clear search query"
+                  type="button"
+                >
+                  <IconX size={16} aria-hidden="true" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div 
+            className="command-k-results" 
+            ref={resultsRef}
+            id="search-results"
+            role="listbox"
+            aria-label="Search results"
+          >
+            {results.length === 0 && query ? (
+              <div className="no-results">
+                <p>
+                  No results found for "{query}".
+                  <br />
+                  <span className="block mt-2">
+                    The item might not exist yet, or its collection isn’t mounted. Press <strong>Enter</strong> here (or open it from the sidebar) to mount the collection automatically.
+                  </span>
+                </p>
+              </div>
+            ) : results.length === 0 ? (
+              <div className="empty-state">
+                <p>
+                  No collections are currently mounted or visible.
+                  <br />
+                  <span className="block mt-2">
+                    Mount a collection via the sidebar or this search modal, then try again.
+                  </span>
+                </p>
+              </div>
+            ) : (
+              results.map((result, index) => {
+                const isSelected = index === selectedIndex;
+                const typeLabel = getTypeLabel(result.type);
+
+                return (
+                  <div
+                    key={`${result.type}-${result.item.id || result.item.uid}-${index}`}
+                    id={`search-result-${index}`}
+                    className={`result-item ${isSelected ? 'selected' : ''}`}
+                    onClick={() => handleResultSelection(result)}
+                    data-selected={isSelected}
+                    data-type={result.type}
+                    role="option"
+                    aria-selected={isSelected}
+                    aria-label={`${result.name}, ${typeLabel || result.type}${result.method ? `, ${result.method}` : ''}`}
+                    tabIndex={-1}
+                  >
+                    <div className="result-icon">
+                      {getResultIcon(result.type)}
+                    </div>
+                    <div className="result-content">
+                      <div className="result-info">
+                        <div className="result-name">
+                          {highlightText(result.name, query)}
+                        </div>
+                        <div className="result-path">
+                          {result.type === SEARCH_TYPES.DOCUMENTATION
+                            ? result.description
+                            : result.type === SEARCH_TYPES.REQUEST
+                              ? highlightText(result.item.request?.url || '', query)
+                              : highlightText(result.path, query)}
+                        </div>
+                      </div>
+                      <div className="result-badges">
+                        {result.type === SEARCH_TYPES.REQUEST && result.method && (
+                          <span 
+                            className={`method-badge ${result.method.toLowerCase()}`}
+                            aria-label={`HTTP method ${result.method.toUpperCase().replace(/-/g, ' ')}`}
+                          >
+                            {result.method.toUpperCase().replace(/-/g, ' ')}
+                          </span>
+                        )}
+                        {typeLabel && (
+                          <div className="result-type" aria-label={`Item type ${typeLabel}`}>
+                            {typeLabel}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+
+          <div className="command-k-footer">
+            <div className="keyboard-hints" role="region" aria-label="Keyboard shortcuts">
+              <span aria-label="Use up and down arrows to navigate">
+                <span className="keycap" aria-hidden="true">↑</span>
+                <span className="keycap" aria-hidden="true">↓</span>
+                <span className="hint-label">to navigate</span>
+              </span>
+              <span aria-label="Press Enter to select">
+                <span className="keycap" aria-hidden="true">↵</span>
+                <span className="hint-label">to select</span>
+              </span>
+              <span aria-label="Press Escape to close">
+                <span className="keycap" aria-hidden="true">esc</span>
+                <span className="hint-label">to close</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default GlobalSearchModal;

packages/bruno-app/src/components/GlobalSearchModal/utils/searchUtils.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { SEARCH_TYPES, MATCH_TYPES, SEARCH_CONFIG } from '../constants';
+
+export const normalizeQuery = (searchQuery) => {
+  return searchQuery.trim().replace(/\/+/g, '/');
+};
+
+export const isValidQuery = (normalizedQuery) => {
+  return normalizedQuery && 
+         normalizedQuery !== '/' && 
+         !(normalizedQuery.length === 1 && !normalizedQuery.match(/[a-zA-Z0-9]/));
+};
+
+export const highlightText = (text, searchQuery) => {
+  if (!searchQuery) return text;
+
+  try {
+    const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    return text.split(regex).map((part, i) =>
+      regex.test(part) ? (
+        <span key={i} className="highlight">{part}</span>
+      ) : part
+    );
+  } catch {
+    return text;
+  }
+};
+
+export const sortResults = (results) => {
+  return results.sort((a, b) => {
+    // Documentation always first
+    if (a.type === SEARCH_TYPES.DOCUMENTATION) return -1;
+    if (b.type === SEARCH_TYPES.DOCUMENTATION) return 1;
+
+    // Sort by match type priority
+    const matchTypeOrder = { 
+      [MATCH_TYPES.COLLECTION]: 0, 
+      [MATCH_TYPES.FOLDER]: 1, 
+      [MATCH_TYPES.REQUEST]: 2, 
+      [MATCH_TYPES.URL]: 3, 
+      [MATCH_TYPES.PATH]: 4 
+    };
+    const aMatchType = matchTypeOrder[a.matchType] ?? 5;
+    const bMatchType = matchTypeOrder[b.matchType] ?? 5;
+
+    if (aMatchType !== bMatchType) return aMatchType - bMatchType;
+
+    // Sort by type priority
+    const typeOrder = { 
+      [SEARCH_TYPES.COLLECTION]: 0, 
+      [SEARCH_TYPES.FOLDER]: 1, 
+      [SEARCH_TYPES.REQUEST]: 2 
+    };
+    const aType = typeOrder[a.type] ?? 3;
+    const bType = typeOrder[b.type] ?? 3;
+
+    if (aType !== bType) return aType - bType;
+
+    // Finally sort alphabetically
+    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+  });
+};
+
+export const getTypeLabel = (type) => {
+  const baseLabels = {
+    [SEARCH_TYPES.DOCUMENTATION]: 'Documentation',
+    [SEARCH_TYPES.COLLECTION]: 'Collection',
+    [SEARCH_TYPES.FOLDER]: 'Folder'
+  };
+
+  return baseLabels[type] || '';
+};
+
+export const getItemPath = (item, collection, findParentItemInCollection) => {
+  const pathParts = [];
+  let currentItem = item;
+  let depth = 0;
+  const maxDepth = SEARCH_CONFIG.MAX_DEPTH;
+
+  while (currentItem && depth < maxDepth) {
+    pathParts.unshift(currentItem.name);
+    const parent = findParentItemInCollection(collection, currentItem.uid);
+    if (parent) {
+      currentItem = parent;
+      depth++;
+    } else {
+      break;
+    }
+  }
+
+  pathParts.unshift(collection.name);
+  return pathParts.join('/');
+};

packages/bruno-app/src/components/Icons/Grpc/index.js

@@ -0,0 +1,93 @@
+import React from 'react';
+
+// UNARY - Single request, single response (Blue)
+export const IconGrpcUnary = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right */}
+    <path d="M3 8h18" stroke="#3B82F6" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#3B82F6" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left */}
+    <path d="M21 16h-18" stroke="#3B82F6" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#3B82F6" strokeWidth={strokeWidth} />
+  </svg>
+);
+
+// CLIENT_STREAMING - Streaming request, single response (Purple)
+export const IconGrpcClientStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right with double heads */}
+    <path d="M3 8h18" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    <path d="M14 5l3 3l-3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left */}
+    <path d="M21 16h-18" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+  </svg>
+);
+
+// SERVER_STREAMING - Single request, streaming response (Green)
+export const IconGrpcServerStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right */}
+    <path d="M3 8h18" stroke="#10B981" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#10B981" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left with double heads */}
+    <path d="M21 16h-18" stroke="#10B981" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#10B981" strokeWidth={strokeWidth} />
+    <path d="M10 13l-3 3l3 3" stroke="#10B981" strokeWidth={strokeWidth} />
+  </svg>
+);
+
+// BIDI_STREAMING - Streaming request, streaming response (Orange)
+export const IconGrpcBidiStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right with double heads */}
+    <path d="M3 8h18" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M14 5l3 3l-3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left with double heads */}
+    <path d="M21 16h-18" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M10 13l-3 3l3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+  </svg>
+);

packages/bruno-app/src/components/Icons/IconSidebarToggle/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const IconSidebarToggle = ({ collapsed = false, size = 16, strokeWidth = 1.5, className = '', ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      strokeWidth={strokeWidth}
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={`icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar ${className}`}
+      {...rest}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+      <path d="M9 4l0 16" />
+      {!collapsed && (
+        <rect x="4.6" y="4.6" width="4.8" height="14.8" rx="0.8" fill="currentColor" />
+      )}
+    </svg>
+  );
+};
+
+export default IconSidebarToggle;

packages/bruno-app/src/components/InheritableSettingsInput/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { IconChevronDown, IconX } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
+import Dropdown from 'components/Dropdown';
+
+const InheritableSettingsInput = ({
+  id,
+  label,
+  value,
+  description,
+  onKeyDown,
+  isInherited,
+  onDropdownSelect,
+  onValueChange,
+  onCustomValueReset
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-col">
+        <label className="text-xs font-medium text-gray-900 dark:text-gray-100" htmlFor={id}>
+          {label}
+        </label>
+        {description && (
+          <p className="text-xs text-gray-700 dark:text-gray-400">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center justify-end">
+        {isInherited ? (
+          <Dropdown
+            icon={(
+              <button
+                type="button"
+                className="px-2 py-1 text-xs rounded-sm outline-none transition-colors duration-100 w-24 h-8 flex items-center justify-between"
+                style={{
+                  backgroundColor: theme.modal.input.bg,
+                  border: `1px solid ${theme.modal.input.border}`,
+                  color: theme.modal.input.text
+                }}
+              >
+                <span>Inherit</span>
+                <IconChevronDown size={12} />
+              </button>
+            )}
+          >
+            <div className="dropdown-item" onClick={() => onDropdownSelect('inherit')}>
+              Inherit
+            </div>
+            <div className="dropdown-item" onClick={() => onDropdownSelect('custom')}>
+              Custom
+            </div>
+          </Dropdown>
+        ) : (
+          <div className="relative">
+            <input
+              id={id}
+              type="text"
+              className="block px-2 py-1 pr-6 rounded-sm outline-none transition-colors duration-100 w-24 h-8"
+              style={{
+                backgroundColor: theme.modal.input.bg,
+                border: `1px solid ${theme.modal.input.border}`,
+                color: theme.modal.input.text
+              }}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              value={value}
+              onChange={onValueChange}
+              onKeyDown={onKeyDown}
+            />
+            <button
+              type="button"
+              onClick={onCustomValueReset}
+              className="absolute right-1 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
+              title="Reset to inherit"
+            >
+              <IconX size={14} />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InheritableSettingsInput;

packages/bruno-app/src/components/MarkDown/StyledWrapper.js

@@ -78,6 +78,14 @@ const StyledMarkdownBodyWrapper = styled.div`
         background-color: ${(props) => props.theme.bg};
       }
     }
+
+    p {
+      white-space: pre-wrap;
+    }
+
+    div {
+      white-space: pre-wrap;
+    }
   }
 `;
 

packages/bruno-app/src/components/MarkDown/index.jsx

@@ -6,6 +6,9 @@ import { isValidUrl } from 'utils/url/index';
 
 const Markdown = ({ collectionPath, onDoubleClick, content }) => {
   const markdownItOptions = {
+    html: true,
+    breaks: true,
+    linkify: true,
     replaceLink: function (link, env) {
       return link.replace(/^\./, collectionPath);
     }

packages/bruno-app/src/components/Modal/index.js

@@ -9,7 +9,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
   <div className="bruno-modal-header">
     {customHeader ? customHeader : <>{title ? <div className="bruno-modal-header-title">{title}</div> : null}</>}
     {handleCancel && !hideClose ? (
-      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
+      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-test-id="modal-close-button">
         ×
       </div>
     ) : null}
@@ -71,7 +71,8 @@ const Modal = ({
   disableCloseOnOutsideClick,
   disableEscapeKey,
   onClick,
-  closeModalFadeTimeout = 500
+  closeModalFadeTimeout = 500,
+  dataTestId
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
@@ -120,6 +121,7 @@ const Modal = ({
         role="dialog"
         aria-labelledby="modal-title"
         aria-describedby="modal-description"
+        data-testid={dataTestId}
       >
         <ModalHeader
           title={title}

packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js

@@ -6,12 +6,27 @@ const StyledWrapper = styled.div`
   max-height: 200px;
   overflow: auto;
 
+  &.read-only {
+    .CodeMirror .CodeMirror-lines {
+      cursor: not-allowed !important;
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      -ms-user-select: none !important;
+    }
+
+    .CodeMirror-line {
+      color: ${(props) => props.theme.colors.text.muted} !important;
+    }
+  }
+
   .CodeMirror {
     background: transparent;
     height: fit-content;
     font-size: 14px;
     line-height: 30px;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: 200px;
 
     pre.CodeMirror-placeholder {
       color: ${(props) => props.theme.text};
@@ -19,18 +34,10 @@ const StyledWrapper = styled.div`
       opacity: 0.5;
     }
 
-  .CodeMirror-scroll {
-      overflow: visible !important;
-      position: relative;
-      display: block;
-      margin: 0px;
-      padding: 0px;
-    }
-
     .CodeMirror-vscrollbar,
     .CodeMirror-hscrollbar,
     .CodeMirror-scrollbar-filler {
-      display: none;
+      display: none !important;
     }
 
     .CodeMirror-lines {

packages/bruno-app/src/components/MultiLineEditor/index.js

@@ -3,7 +3,9 @@ import isEqual from 'lodash/isEqual';
 import { getAllVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import { setupAutoComplete } from 'utils/codemirror/autocomplete';
+import { MaskedEditor } from 'utils/common/masked-editor';
 import StyledWrapper from './StyledWrapper';
+import { IconEye, IconEyeOff } from '@tabler/icons';
 
 const CodeMirror = require('codemirror');
 
@@ -16,6 +18,10 @@ class MultiLineEditor extends Component {
     this.cachedValue = props.value || '';
     this.editorRef = React.createRef();
     this.variables = {};
+
+    this.state = {
+      maskInput: props.isSecret || false // Always mask the input by default (if it's a secret)
+    };
   }
   componentDidMount() {
     // Initialize CodeMirror as a single line editor
@@ -23,22 +29,15 @@ class MultiLineEditor extends Component {
     const variables = getAllVariables(this.props.collection, this.props.item);
 
     this.editor = CodeMirror(this.editorRef.current, {
-      lineWrapping: false,
-      lineNumbers: false,
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       placeholder: this.props.placeholder,
       mode: 'brunovariables',
       brunoVarInfo: {
         variables
       },
-      scrollbarStyle: null,
+      readOnly: this.props.readOnly ? 'nocursor' : false,
       tabindex: 0,
       extraKeys: {
-        Enter: () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
         'Ctrl-Enter': () => {
           if (this.props.onRun) {
             this.props.onRun();
@@ -49,14 +48,6 @@ class MultiLineEditor extends Component {
             this.props.onRun();
           }
         },
-        'Alt-Enter': () => {
-          this.editor.setValue(this.editor.getValue() + '\n');
-          this.editor.setCursor({ line: this.editor.lineCount(), ch: 0 });
-        },
-        'Shift-Enter': () => {
-          this.editor.setValue(this.editor.getValue() + '\n');
-          this.editor.setCursor({ line: this.editor.lineCount(), ch: 0 });
-        },
         'Cmd-S': () => {
           if (this.props.onSave) {
             this.props.onSave();
@@ -94,6 +85,10 @@ class MultiLineEditor extends Component {
     this.editor.setValue(String(this.props.value) || '');
     this.editor.on('change', this._onEdit);
     this.addOverlay(variables);
+
+    // Initialize masking if this is a secret field
+    this.setState({ maskInput: this.props.isSecret });
+    this._enableMaskedEditor(this.props.isSecret);
   }
 
   _onEdit = () => {
@@ -105,6 +100,19 @@ class MultiLineEditor extends Component {
     }
   };
 
+  /** Enable or disable masking the rendered content of the editor */
+  _enableMaskedEditor = (enabled) => {
+    if (typeof enabled !== 'boolean') return;
+
+    if (enabled == true) {
+      if (!this.maskedEditor) this.maskedEditor = new MaskedEditor(this.editor, '*');
+      this.maskedEditor.enable();
+    } else {
+      this.maskedEditor?.disable();
+      this.maskedEditor = null;
+    }
+  };
+
   componentDidUpdate(prevProps) {
     // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
@@ -119,12 +127,18 @@ class MultiLineEditor extends Component {
     if (this.props.theme !== prevProps.theme && this.editor) {
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly ? 'nocursor' : false);
+    }
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
       this.cachedValue = String(this.props.value);
       this.editor.setValue(String(this.props.value) || '');
     }
-    if (this.editorRef?.current) {
-      this.editorRef.current.scrollTo(0, 10000);
+    if (!isEqual(this.props.isSecret, prevProps.isSecret)) {
+      // If the secret flag has changed, update the editor to reflect the change
+      this._enableMaskedEditor(this.props.isSecret);
+      // also set the maskInput flag to the new value
+      this.setState({ maskInput: this.props.isSecret });
     }
     this.ignoreChangeEvent = false;
   }
@@ -133,6 +147,10 @@ class MultiLineEditor extends Component {
     if (this.brunoAutoCompleteCleanup) {
       this.brunoAutoCompleteCleanup();
     }
+    if (this.maskedEditor) {
+      this.maskedEditor.destroy();
+      this.maskedEditor = null;
+    }
     this.editor.getWrapperElement().remove();
   }
 
@@ -142,8 +160,39 @@ class MultiLineEditor extends Component {
     this.editor.setOption('mode', 'brunovariables');
   };
 
+  /**
+   * @brief Toggle the visibility of the secret value
+   */
+  toggleVisibleSecret = () => {
+    const isVisible = !this.state.maskInput;
+    this.setState({ maskInput: isVisible });
+    this._enableMaskedEditor(isVisible);
+  };
+
+  /**
+   * @brief Eye icon to show/hide the secret value
+   * @returns ReactComponent The eye icon
+   */
+  secretEye = (isSecret) => {
+    return isSecret === true ? (
+      <button className="mx-2" onClick={() => this.toggleVisibleSecret()}>
+        {this.state.maskInput === true ? (
+          <IconEyeOff size={18} strokeWidth={2} />
+        ) : (
+          <IconEye size={18} strokeWidth={2} />
+        )}
+      </button>
+    ) : null;
+  };
+
   render() {
-    return <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>;
+    const wrapperClass = `multi-line-editor grow ${this.props.readOnly ? 'read-only' : ''}`;
+    return (
+      <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
+        <StyledWrapper ref={this.editorRef} className={wrapperClass} />
+        {this.secretEye(this.props.isSecret)}
+      </div>
+    );
   }
 }
 export default MultiLineEditor;

packages/bruno-app/src/components/Notifications/index.js

@@ -79,7 +79,7 @@ const Notifications = () => {
 
   const modalCustomHeader = (
     <div className="flex flex-row gap-8">
-      <div>NOTIFICATIONS</div>
+      <div className="bruno-modal-header-title">NOTIFICATIONS</div>
       {unreadNotifications.length > 0 && (
         <>
           <div className="normal-case font-normal">

packages/bruno-app/src/components/Preferences/Beta/StyledWrapper.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .bruno-form {
+    padding: 1rem;
+  }
+
+  .submit {
+    margin-top: 1rem;
+  }
+
+  .beta-feature-item {
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-gray-200);
+    background-color: var(--color-gray-50);
+    margin-bottom: 1rem;
+  }
+
+  .beta-feature-item:hover {
+    background-color: var(--color-gray-100);
+  }
+
+  .beta-feature-description {
+    margin-top: 0.25rem;
+  }
+
+  .no-features-message {
+    text-align: center;
+    padding: 2rem;
+    color: var(--color-gray-500);
+    font-style: italic;
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Beta/index.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import { useSelector, useDispatch } from 'react-redux';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
+import { IconFlask } from '@tabler/icons';
+import get from 'lodash/get';
+
+// Beta features configuration
+const BETA_FEATURES = [
+  {
+    id: 'nodevm',
+    label: 'Node VM Runtime',
+    description: 'Enable Node VM runtime for JavaScript execution in Developer Mode'
+  }
+];
+
+const Beta = ({ close }) => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const dispatch = useDispatch();
+
+  // Generate validation schema dynamically from beta features
+  const generateValidationSchema = () => {
+    const schemaShape = {};
+    BETA_FEATURES.forEach((feature) => {
+      schemaShape[feature.id] = Yup.boolean();
+    });
+    return Yup.object().shape(schemaShape);
+  };
+
+  // Generate initial values dynamically from beta features
+  const generateInitialValues = () => {
+    const initialValues = {};
+    BETA_FEATURES.forEach((feature) => {
+      initialValues[feature.id] = get(preferences, `beta.${feature.id}`, false);
+    });
+    return initialValues;
+  };
+
+  const betaSchema = generateValidationSchema();
+
+  const formik = useFormik({
+    initialValues: generateInitialValues(),
+    validationSchema: betaSchema,
+    onSubmit: async (values) => {
+      try {
+        const newPreferences = await betaSchema.validate(values, { abortEarly: true });
+        handleSave(newPreferences);
+      } catch (error) {
+        console.error('Beta preferences validation error:', error.message);
+      }
+    }
+  });
+
+  const handleSave = (newBetaPreferences) => {
+    dispatch(
+      savePreferences({
+        ...preferences,
+        beta: newBetaPreferences
+      })
+    )
+      .then(() => {
+        toast.success('Beta preferences saved successfully');
+        close();
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update beta preferences'));
+  };
+
+  const hasAnyBetaFeatures = BETA_FEATURES.length > 0;
+
+  return (
+    <StyledWrapper>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-6">
+          <div className="flex items-center mb-2">
+            <IconFlask size={20} className="mr-2 text-orange-500" />
+            <h2 className="text-lg font-semibold">Beta Features</h2>
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 text-wrap">
+            Beta features are experimental previews that may change before full release. Try them and share feedback.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          {BETA_FEATURES.map((feature) => (
+            <div key={feature.id} className="beta-feature-item">
+              <div className="flex items-center">
+                <input
+                  id={feature.id}
+                  type="checkbox"
+                  name={feature.id}
+                  checked={formik.values[feature.id]}
+                  onChange={formik.handleChange}
+                  className="mousetrap mr-0"
+                />
+                <label className="block ml-2 select-none font-medium" htmlFor={feature.id}>
+                  {feature.label}
+                </label>
+              </div>
+              <div className="beta-feature-description ml-6 text-xs text-gray-500 dark:text-gray-400">
+                {feature.description}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {!hasAnyBetaFeatures && (
+          <div className="no-features-message">
+            <p>No beta features are currently available</p>
+          </div>
+        )}
+
+        <div className="mt-10">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default Beta;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import { useFormik } from 'formik';
 import { useSelector, useDispatch } from 'react-redux';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
+import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
@@ -35,7 +36,8 @@ const General = ({ close }) => {
       })
       .test('isValidTimeout', 'Request Timeout must be equal or greater than 0', (value) => {
         return value === undefined || Number(value) >= 0;
-      })
+      }),
+    defaultCollectionLocation: Yup.string().max(1024)
   });
 
   const formik = useFormik({
@@ -50,7 +52,8 @@ const General = ({ close }) => {
       },
       timeout: preferences.request.timeout,
       storeCookies: get(preferences, 'request.storeCookies', true),
-      sendCookies: get(preferences, 'request.sendCookies', true)
+      sendCookies: get(preferences, 'request.sendCookies', true),
+      defaultCollectionLocation: get(preferences, 'general.defaultCollectionLocation', '')
     },
     validationSchema: preferencesSchema,
     onSubmit: async (values) => {
@@ -79,6 +82,9 @@ const General = ({ close }) => {
           timeout: newPreferences.timeout,
           storeCookies: newPreferences.storeCookies,
           sendCookies: newPreferences.sendCookies
+        },
+        general: {
+          defaultCollectionLocation: newPreferences.defaultCollectionLocation
         }
       }))
       .then(() => {
@@ -99,6 +105,19 @@ const General = ({ close }) => {
     formik.setFieldValue('customCaCertificate.filePath', null);
   };
 
+  const browseDefaultLocation = () => {
+    dispatch(browseDirectory())
+      .then((dirPath) => {
+        if (typeof dirPath === 'string') {
+          formik.setFieldValue('defaultCollectionLocation', dirPath);
+        }
+      })
+      .catch((error) => {
+        formik.setFieldValue('defaultCollectionLocation', '');
+        console.error(error);
+      });
+  };
+
   return (
     <StyledWrapper>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
@@ -176,11 +195,11 @@ const General = ({ close }) => {
             name="keepDefaultCaCertificates.enabled"
             checked={formik.values.keepDefaultCaCertificates.enabled}
             onChange={formik.handleChange}
-            className={`mousetrap mr-0 ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
-            disabled={formik.values.customCaCertificate.enabled ? false : true}
+            className={`mousetrap mr-0 ${formik.values.customCaCertificate.enabled && formik.values.customCaCertificate.filePath ? '' : 'opacity-25'}`}
+            disabled={formik.values.customCaCertificate.enabled && formik.values.customCaCertificate.filePath ? false : true}
           />
           <label
-            className={`block ml-2 select-none ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
+            className={`block ml-2 select-none ${formik.values.customCaCertificate.enabled && formik.values.customCaCertificate.filePath ? '' : 'opacity-25'}`}
             htmlFor="keepDefaultCaCertificatesEnabled"
           >
             Keep Default CA Certificates
@@ -231,6 +250,35 @@ const General = ({ close }) => {
         {formik.touched.timeout && formik.errors.timeout ? (
           <div className="text-red-500">{formik.errors.timeout}</div>
         ) : null}
+        <div className="flex flex-col mt-6">
+          <label className="block select-none default-collection-location-label" htmlFor="defaultCollectionLocation">
+            Default Collection Location
+          </label>
+          <input
+            type="text"
+            name="defaultCollectionLocation"
+            className="block textbox mt-2 w-full cursor-pointer default-collection-location-input"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.defaultCollectionLocation || ''}
+            onClick={browseDefaultLocation}
+            placeholder="Click to browse for default location"
+          />
+          <div className="mt-1">
+            <span
+              className="text-link cursor-pointer hover:underline default-collection-location-browse"
+              onClick={browseDefaultLocation}
+            >
+              Browse
+            </span>
+          </div>
+        </div>
+        {formik.touched.defaultCollectionLocation && formik.errors.defaultCollectionLocation ? (
+          <div className="text-red-500">{formik.errors.defaultCollectionLocation}</div>
+        ) : null}
         <div className="mt-10">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save

packages/bruno-app/src/components/Preferences/index.js

@@ -7,6 +7,7 @@ import General from './General';
 import Proxy from './ProxySettings';
 import Display from './Display';
 import Keybindings from './Keybindings';
+import Beta from './Beta';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -37,6 +38,10 @@ const Preferences = ({ onClose }) => {
         return <Keybindings close={onClose} />;
       }
 
+      case 'beta': {
+        return <Beta close={onClose} />;
+      }
+
       case 'support': {
         return <Support />;
       }
@@ -46,7 +51,7 @@ const Preferences = ({ onClose }) => {
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2'>
+        <div className="flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2">
           <div className="flex flex-col items-center tabs" role="tablist">
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General
@@ -63,6 +68,9 @@ const Preferences = ({ onClose }) => {
             <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
               Support
             </div>
+            <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
+              Beta
+            </div>
           </div>
           <section className="flex flex-grow px-2 pt-2 pb-6 tab-panel">{getTabPanel(tab)}</section>
         </div>

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs {
+    .tab {
+      cursor: pointer;
+      padding: 4px 8px !important;
+      font-size: 12px;
+      border-radius: 4px;
+      
+      &:hover {
+        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.1)' : 'rgba(99, 102, 241, 0.1)'};
+      }
+      
+      &.active {
+        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(99, 102, 241, 0.1)'};
+        color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+        font-weight: 500;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+    }
+  }
+  
+  .additional-parameter-sends-in-selector {
+    select {
+      height: 32px;
+      width: 100%;
+      border: 1px solid ${(props) => props.theme.input.border};
+      border-radius: 4px;
+      padding: 0 8px;
+      
+      &:focus {
+        outline: none;
+        border-color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+      }
+    }
+  }
+  
+  .add-additional-param-actions {
+    &:hover {
+      color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+    }
+  }
+`
+
+export default StyledWrapper;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js

@@ -0,0 +1,306 @@
+import { useDispatch } from "react-redux";
+import React, { useState } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { IconPlus, IconTrash, IconAdjustmentsHorizontal } from '@tabler/icons';
+import { cloneDeep } from "lodash";
+import SingleLineEditor from "components/SingleLineEditor/index";
+import StyledWrapper from "./StyledWrapper";
+import Table from "components/Table/index";
+
+const AdditionalParams  = ({ item = {}, request, updateAuth, collection, handleSave }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(request, 'auth.oauth2', {});
+  const {
+    grantType,
+    additionalParameters = {}
+  } = oAuth;
+
+  const [activeTab, setActiveTab] = useState(
+    (grantType == 'authorization_code' || grantType == 'implicit') ? 'authorization' : 'token'
+  );
+
+  const isEmptyParam = (param) => {
+    return !param.name.trim() && !param.value.trim();
+  };
+
+  const hasEmptyRow = () => {
+    const tabParams = additionalParameters[activeTab] || [];
+    return tabParams.some(isEmptyParam);
+  };
+
+  const updateAdditionalParameters = ({ updatedAdditionalParameters }) => {
+    const filteredParams = cloneDeep(updatedAdditionalParameters);
+    
+    Object.keys(filteredParams).forEach(paramType => {
+      if (filteredParams[paramType]?.length) {
+        filteredParams[paramType] = filteredParams[paramType].filter(param => 
+          param.name.trim() || param.value.trim()
+        );
+        
+        if (filteredParams[paramType].length === 0) {
+          delete filteredParams[paramType];
+        }
+      } else if (Array.isArray(filteredParams[paramType]) && filteredParams[paramType].length === 0) {
+        // Remove empty arrays
+        delete filteredParams[paramType];
+      }
+    });
+
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          ...oAuth,
+          additionalParameters: Object.keys(filteredParams).length > 0 ? filteredParams : undefined
+        }
+      })
+    );
+  }
+
+  const handleUpdateAdditionalParam = ({ paramType, key, paramIndex, value }) => {
+    const updatedAdditionalParameters = cloneDeep(additionalParameters);
+    
+    if (!updatedAdditionalParameters[paramType]) {
+      updatedAdditionalParameters[paramType] = [];
+    }
+    
+    if (!updatedAdditionalParameters[paramType][paramIndex]) {
+      updatedAdditionalParameters[paramType][paramIndex] = {
+        name: '',
+        value: '',
+        sendIn: 'headers',
+        enabled: true
+      };
+    }
+    
+    updatedAdditionalParameters[paramType][paramIndex][key] = value;
+    
+    // Only filter when updating a parameter
+    updateAdditionalParameters({ updatedAdditionalParameters });
+  }
+
+  const handleDeleteAdditionalParam = ({ paramType, paramIndex }) => {
+    const updatedAdditionalParameters = cloneDeep(additionalParameters);
+    
+    if (updatedAdditionalParameters[paramType]?.length) {
+      updatedAdditionalParameters[paramType] = updatedAdditionalParameters[paramType].filter((_, index) => index !== paramIndex);
+      
+      // If the array is now empty, ensure we're not sending empty arrays
+      if (updatedAdditionalParameters[paramType].length === 0) {
+        delete updatedAdditionalParameters[paramType];
+      }
+    }
+    
+    updateAdditionalParameters({ updatedAdditionalParameters });
+  }
+
+  const handleAddNewAdditionalParam = () => {
+    // Prevent adding multiple empty rows
+    if (hasEmptyRow()) {
+      return;
+    }
+
+    const paramType = activeTab;
+    const localAdditionalParameters = cloneDeep(additionalParameters);
+    
+    if (!localAdditionalParameters[paramType]) {
+      localAdditionalParameters[paramType] = [];
+    }
+    
+    localAdditionalParameters[paramType] = [
+      ...localAdditionalParameters[paramType],
+      {
+        name: '',
+        value: '',
+        sendIn: 'headers',
+        enabled: true
+      }
+    ];
+    
+    // Don't filter here to allow the empty row to display in UI
+    // But don't permanently store it in state until it has values
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          ...oAuth,
+          additionalParameters: localAdditionalParameters,
+        }
+      })
+    );
+  }
+
+  // Add a class to the Add Parameter button if it's disabled
+  const addButtonDisabled = hasEmptyRow();
+
+  // Define available tabs for each grant type
+  const getAvailableTabs = (grantType) => {
+    const tabConfig = {
+      'authorization_code': ['authorization', 'token', 'refresh'],
+      'implicit': ['authorization'],
+      'password': ['token', 'refresh'],
+      'client_credentials': ['token', 'refresh']
+    };
+    return tabConfig[grantType] || ['token', 'refresh'];
+  };
+
+  const availableTabs = getAvailableTabs(grantType);
+
+  const renderTab = (tabKey, tabLabel) => (
+    <div 
+      key={tabKey}
+      className={`tab ${activeTab === tabKey ? 'active' : ''}`} 
+      onClick={() => setActiveTab(tabKey)}
+    >
+      {tabLabel}
+    </div>
+  );
+
+  return (
+    <StyledWrapper className="mt-4">
+      <div className="flex items-center gap-2.5 mb-3">
+        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        </div>
+        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+          Additional Parameters
+        </span>
+      </div>
+      
+      <div className="tabs flex w-full gap-2 my-2">
+        {availableTabs.includes('authorization') && renderTab('authorization', 'Authorization')}
+        {availableTabs.includes('token') && renderTab('token', 'Token')}
+        {availableTabs.includes('refresh') && renderTab('refresh', 'Refresh')}
+      </div>
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'name', width: '30%' },
+          { name: 'Value', accessor: 'value', width: '30%' },
+          { name: 'Send In', accessor: 'sendIn', width: '150px' },
+          { name: '', accessor: '', width: '15%' }
+        ]}
+      >
+        <tbody>
+          {(additionalParameters?.[activeTab] || []).map((param, index) => 
+            <tr key={index}>
+              <td className='flex relative'>
+                <SingleLineEditor
+                  value={param?.name || ''}
+                  theme={storedTheme}
+                  onChange={(value) => handleUpdateAdditionalParam({ 
+                    paramType: activeTab,
+                    key: 'name',
+                    paramIndex: index,
+                    value
+                  })}
+                  collection={collection}
+                  onSave={handleSave}
+                />
+              </td>
+              <td>
+                <SingleLineEditor
+                  value={param?.value || ''}
+                  theme={storedTheme}
+                  onChange={(value) => handleUpdateAdditionalParam({ 
+                    paramType: activeTab,
+                    key: 'value',
+                    paramIndex: index,
+                    value
+                  })}
+                  collection={collection}
+                  onSave={handleSave}
+                />
+              </td>
+              <td>
+                <div className="w-full additional-parameter-sends-in-selector">
+                  <select 
+                    value={param?.sendIn || 'headers'} 
+                    onChange={e => {
+                      handleUpdateAdditionalParam({ 
+                        paramType: activeTab,
+                        key: 'sendIn',
+                        paramIndex: index,
+                        value: e.target.value
+                      })
+                    }} 
+                    className="mousetrap bg-transparent"
+                  >
+                    {sendInOptionsMap[grantType || 'authorization_code'][activeTab].map((optionValue) => (
+                      <option key={optionValue} value={optionValue}>
+                        {optionValue}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </td>
+              <td>
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    checked={param?.enabled ?? true}
+                    tabIndex="-1"
+                    className="mr-3 mousetrap"
+                    onChange={(e) => {
+                      handleUpdateAdditionalParam({ 
+                        paramType: activeTab,
+                        key: 'enabled',
+                        paramIndex: index,
+                        value: e.target.checked
+                      })
+                    }}
+                  />
+                  <button 
+                    tabIndex="-1" 
+                    onClick={() => {
+                      handleDeleteAdditionalParam({
+                        paramType: activeTab,
+                        paramIndex: index
+                      })
+                    }}
+                  >
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </Table>
+      <div 
+        className={`add-additional-param-actions w-fit flex items-center mt-2 ${addButtonDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} 
+        onClick={addButtonDisabled ? null : handleAddNewAdditionalParam}
+      >
+        <IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
+        <span className="ml-1 text-sm text-gray-500">Add Parameter</span>
+      </div>
+    </StyledWrapper>
+  )
+}
+
+export default AdditionalParams;
+
+const sendInOptionsMap = {
+  'authorization_code': {
+    'authorization': ['headers', 'queryparams'],
+    'token': ['headers', 'queryparams', 'body'],
+    'refresh': ['headers', 'queryparams', 'body']
+  },
+  'password': {
+    'token': ['headers', 'queryparams', 'body'],
+    'refresh': ['headers', 'queryparams', 'body']
+  },
+  'client_credentials': {
+    'token': ['headers', 'queryparams', 'body'],
+    'refresh': ['headers', 'queryparams', 'body']
+  },
+  'implicit': {
+    'authorization': ['headers', 'queryparams']
+  }
+}

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js

@@ -10,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 
 const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
@@ -35,7 +36,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
     tokenQueryKey,
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken
+    autoFetchToken,
+    additionalParameters
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -85,6 +87,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
+          additionalParameters,
           [key]: value,
         }
       })
@@ -112,6 +115,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           tokenHeaderPrefix,
           tokenQueryKey,
           autoFetchToken,
+          additionalParameters,
           pkce: !Boolean(oAuth?.['pkce'])
         }
       })
@@ -332,6 +336,13 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
+      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>
   );

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js

@@ -10,6 +10,7 @@ import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 
 const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
@@ -32,7 +33,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
     tokenQueryKey, 
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken
+    autoFetchToken,
+    additionalParameters
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -79,6 +81,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
+          additionalParameters,
           [key]: value
         }
       })
@@ -290,7 +293,13 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
-
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
+      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
 
     </StyledWrapper>