Added Playwright-codegen setup

.github/CODEOWNERS

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

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -27,9 +27,7 @@ body:
           required: false
         - label: annoying
           required: false
-        - label: this feature was working in a previous version but is broken in the current release.
-          required: false
-
+          
   - type: input
     attributes:
       label: Bruno version

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

@@ -1,26 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -25,8 +25,8 @@ jobs:
         os: [ubuntu-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
 

.github/workflows/ssl-tests.yml

@@ -1,91 +0,0 @@
-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@v5
-
-      - 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@v5
-
-      - 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@v5
-      
-      - 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

@@ -13,8 +13,8 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -28,14 +28,6 @@ jobs:
           npm run build --workspace=packages/bruno-common
           npm run build --workspace=packages/bruno-query
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-          npm run build --workspace=packages/bruno-converters
-          npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-filestore
-
-      - 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
@@ -53,8 +45,6 @@ jobs:
         run: npm run test --workspace=packages/bruno-app
       - name: Test Package bruno-common
         run: npm run test --workspace=packages/bruno-common
-      - name: Test Package bruno-converters
-        run: npm run test --workspace=packages/bruno-converters
       - name: Test Package bruno-electron
         run: npm run test --workspace=packages/bruno-electron
 
@@ -66,8 +56,8 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -81,14 +71,6 @@ jobs:
           npm run build --workspace=packages/bruno-query
           npm run build --workspace=packages/bruno-common
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-          npm run build --workspace=packages/bruno-converters
-          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: |
@@ -100,48 +82,5 @@ jobs:
         uses: EnricoMi/publish-unit-test-result-action@v2
         if: always()
         with:
-          check_name: CLI Test Results
           files: packages/bruno-tests/collection/junit.xml
           comment_mode: always
-  e2e-test:
-    name: Playwright E2E Tests
-    timeout-minutes: 60
-    runs-on: ubuntu-24.04
-    steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v6
-      with:
-        node-version: v22.11.x
-    - name: Install dependencies
-      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
-        npm ci --legacy-peer-deps
-        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
-
-    - name: Install dependencies for test collection environment
-      run: |
-        npm ci --prefix packages/bruno-tests/collection
-
-    - name: Build libraries
-      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
-
-    - name: Run Playwright tests
-      run: |
-        xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.gitignore

@@ -46,8 +46,4 @@ yarn-error.log*
 
 #dev editor
 bruno.iml
-.idea
-.vscode
-
-# Playwright
-/blob-report/
+.idea

.husky/pre-commit

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

contributing.md

@@ -15,15 +15,15 @@
 | [正體中文](docs/contributing/contributing_zhtw.md)
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
-| [Dutch](docs/contributing/contributing_nl.md)
+| [Nederlands](docs/contributing/contributing_nl.md)
 
 ## Let's make Bruno better, together!!
 
-We are happy that you are looking to improve Bruno. Below are the guidelines to run Bruno on your computer.
+We are happy that you are looking to improve Bruno. Below are the guidelines to get started bringing up Bruno on your computer.
 
 ### Technology Stack
 
-Bruno is built using React and Electron.
+Bruno is built using Next.js and React. We also use electron to ship a desktop version (that supports local collections)
 
 Libraries we use
 
@@ -37,77 +37,38 @@ Libraries we use
 - Filesystem Watcher - chokidar
 - i18n - i18next
 
-> [!IMPORTANT]
-> You would need [Node v22.x or the latest LTS version](https://nodejs.org/en/). We use npm workspaces in the project
+### Dependencies
+
+You would need [Node v20.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
 
 ## Development
 
-Bruno is a desktop app. Below are the instructions to run Bruno.
+Bruno is being developed as a desktop app. You need to load the app by running the Next.js app in one terminal and then run the electron app in another terminal.
 
-> Note: We use React for the frontend and rsbuild for build and dev server.
-
-## Install Dependencies
+### Local Development
 
 ```bash
-# use nodejs 22 version
+# use nodejs 20 version
 nvm use
 
 # install deps
 npm i --legacy-peer-deps
-```
 
-### Local Development
-
-#### Build packages
-
-##### Option 1
-
-```bash
 # build packages
 npm run build:graphql-docs
 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
-```
-##### Option 2
 
-```bash
-# install dependencies and setup
-npm run setup
-```
-
-#### Run the app
-
-##### Option 1
-
-```bash
-# run react app (terminal 1)
+# run next app (terminal 1)
 npm run dev:web
 
 # run electron app (terminal 2)
 npm run dev:electron
 ```
 
-##### Option 2
-```bash
-# run electron and react app concurrently
-npm run dev
-```
-
-#### Customize Electron `userData` path
-If `ELECTRON_USER_DATA_PATH` env-variable is present and its development mode, then `userData` path is modified accordingly.
-
-e.g.
-```sh
-ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
-```
-This will create a `bruno-test` folder on your Desktop and use it as the `userData` path.
-
 ### Troubleshooting
 
 You might encounter a `Unsupported platform` error when you run `npm install`. To fix this, you will need to delete `node_modules` and `package-lock.json` and run `npm install`. This should install all the necessary packages needed to run the app.
@@ -126,28 +87,7 @@ find . -type f -name "package-lock.json" -delete
 
 ```bash
 # run bruno-schema tests
-npm run test --workspace=packages/bruno-schema
-
-# run bruno-query tests
-npm run test --workspace=packages/bruno-query
-
-# run bruno-common tests
-npm run test --workspace=packages/bruno-common
-
-# run bruno-converters tests
-npm run test --workspace=packages/bruno-converters
-
-# run bruno-app tests
-npm run test --workspace=packages/bruno-app
-
-# run bruno-electron tests
-npm run test --workspace=packages/bruno-electron
-
-# run bruno-lang tests
-npm run test --workspace=packages/bruno-lang
-
-# run bruno-toml tests
-npm run test --workspace=packages/bruno-toml
+npm test --workspace=packages/bruno-schema
 
 # run tests over all workspaces
 npm test --workspaces --if-present

docs/contributing/contributing_de.md

@@ -21,7 +21,7 @@ Bibliotheken die wir benutzen
 
 ### Abhängigkeiten
 
-Du benötigst [Node v22.x oder die neuste LTS Version](https://nodejs.org/en/) und npm 8.x. Wir benutzen npm workspaces in dem Projekt.
+Du benötigst [Node v20.x oder die neuste LTS Version](https://nodejs.org/en/) und npm 8.x. Wir benutzen npm workspaces in dem Projekt.
 
 ### Lass uns coden
 
@@ -42,12 +42,12 @@ Bruno wird als Desktop-Anwendung entwickelt. Um die App zu starten, musst Du zue
 
 ### Abhängigkeiten
 
-- NodeJS v22
+- NodeJS v18
 
 ### Lokales Entwickeln
 
 ```bash
-# use nodejs 22 version
+# use nodejs 18 version
 nvm use
 
 # install deps

docs/contributing/contributing_es.md

@@ -1,4 +1,4 @@
-[Inglés](../../contributing.md)
+[English](../../contributing.md)
 
 ## ¡Juntos, hagamos a Bruno mejor!
 
@@ -6,111 +6,58 @@ Estamos encantados de que quieras ayudar a mejorar Bruno. A continuación encont
 
 ### Tecnologías utilizadas
 
-Bruno está construido con React y Electron
+Bruno está construido con NextJs y React. También usamos electron para distribuir una versión de escritorio (que soporta colecciones locales).
 
 Librerías que utilizamos:
 
-- CSS - Tailwind CSS
-- Editores de código - CodeMirror
+- CSS - Tailwind
+- Editores de código - Codemirror
 - Manejo del estado - Redux
 - Íconos - Tabler Icons
 - Formularios - formik
 - Validación de esquemas - Yup
 - Cliente de peticiones - axios
 - Monitor del sistema de archivos - chokidar
-- i18n (internacionalización) - i18next
 
 ### Dependencias
 
-> [!IMPORTANT]
-> Necesitarás [Node v22.x o la última versión LTS](https://nodejs.org/es/). Ten en cuenta que Bruno usa los espacios de trabajo de npm
+Necesitarás [Node v20.x o la última versión LTS](https://nodejs.org/es) y npm 8.x. Ten en cuenta que utilizamos espacios de trabajo de npm en el proyecto.
 
 ## Desarrollo
 
-Bruno es una aplicación de escritorio. A continuación se detallan las instrucciones paso a paso para ejecutar Bruno.
+Bruno está siendo desarrollado como una aplicación de escritorio. Para ejecutarlo, primero debes ejecutar la aplicación de nextjs en una terminal y luego ejecutar la aplicación de electron en otra terminal.
 
-> Nota: Utilizamos React para el frontend y rsbuild para el servidor de desarrollo.
+### Dependencias
 
-### Instalar dependencias
-
-```bash
-# Use la versión 22.x o LTS (Soporte a Largo Plazo) de Node.js
-nvm use 22.11.0
-
-# instalar las dependencias
-npm i --legacy-peer-deps
-```
-
-> ¿Por qué `--legacy-peer-deps`?: Fuerza la instalación ignorando conflictos en dependencias “peer”, evitando errores de árbol de dependencias.
+- NodeJS v18
 
 ### Desarrollo local
 
-#### Construir paquetes
-
-##### Opción 1
-
 ```bash
-# construir paquetes
+# Utiliza la versión 18 de nodejs
+nvm use
+
+# Instala las dependencias
+npm i --legacy-peer-deps
+
+# Construye la documentación de graphql
 npm run build:graphql-docs
+
+# Construye bruno-query
 npm run build:bruno-query
-npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
-# empaquetar bibliotecas JavaScript del entorno de pruebas aislado
-npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-```
-
-##### Opción 2
-
-```bash
-# instalar dependencias y configurar el entorno
-npm run setup
-```
-
-#### Ejecutar la aplicación
-
-```bash
-# ejecutar aplicación react (terminal 1)
+# Ejecuta la aplicación de nextjs (terminal 1)
 npm run dev:web
 
-# ejecutar aplicación electron (terminal 2)
+# Ejecuta la aplicación de electron (terminal 2)
 npm run dev:electron
 ```
 
-##### Opción 1
-
-```bash
-# ejecutar aplicación react (terminal 1)
-npm run dev:web
-
-# ejecutar aplicación electron (terminal 2)
-npm run dev:electron
-```
-
-##### Opción 2
-
-```bash
-# ejecutar aplicación electron y react de forma concurrente
-npm run dev
-```
-
-#### Personalizar la ruta `userData` de Electron
-
-Si la variable de entorno `ELECTRON_USER_DATA_PATH` está presente y se encuentra en modo de desarrollo, entonces la ruta `userData` se modifica en consecuencia.
-ejemplo:
-
-```sh
-ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
-```
-
-Esto creará una carpeta llamada `bruno-test` en tu escritorio y la usará como la ruta userData.
-
 ### Solución de problemas
 
-Es posible que te encuentres con un error `Unsupported platform` cuando ejecutes `npm install`. Para solucionarlo, tendrás que eliminar las carpetas `node_modules` y el archivo `package-lock.json`, y luego volver a ejecutar `npm install`. Esto debería instalar todos los paquetes necesarios para que la aplicación funcione.
+Es posible que encuentres un error de `Unsupported platform` cuando ejecutes `npm install`. Para solucionarlo, debes eliminar la carpeta `node_modules` y el archivo `package-lock.json`, luego, ejecuta `npm install`. Lo anterior debería instalar todos los paquetes necesarios para ejecutar la aplicación.
 
-```sh
+```shell
 # Elimina la carpeta node_modules en los subdirectorios
 find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
   rm -rf "$dir"
@@ -122,42 +69,10 @@ find . -type f -name "package-lock.json" -delete
 
 ### Pruebas
 
-#### Pruebas individuales
-
 ```bash
-# ejecutar pruebas de bruno-app
-npm run test --workspace=packages/bruno-app
+# ejecutar pruebas de esquema bruno
+npm test --workspace=packages/bruno-schema
 
-# ejecutar pruebas de bruno-electron
-npm run test --workspace=packages/bruno-electron
-
-# ejecutar pruebas de bruno-cli
-npm run test --workspace=packages/bruno-cli
-
-# ejecutar pruebas de bruno-common
-npm run test --workspace=packages/bruno-common
-
-# ejecutar pruebas de bruno-converters
-npm run test --workspace=packages/bruno-converters
-
-# ejecutar pruebas de bruno-schema
-npm run test --workspace=packages/bruno-schema
-
-# ejecutar pruebas de bruno-query
-npm run test --workspace=packages/bruno-query
-
-# ejecutar pruebas de bruno-js
-npm run test --workspace=packages/bruno-js
-
-# ejecutar pruebas de bruno-lang
-npm run test --workspace=packages/bruno-lang
-
-# ejecutar pruebas de bruno-toml
-npm run test --workspace=packages/bruno-toml
-```
-#### Pruebas en conjunto
-
-```bash
 # ejecutar pruebas en todos los espacios de trabajo
 npm test --workspaces --if-present
 ```

docs/contributing/contributing_hi.md

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # Next.js ऐप चलाएँ (टर्मिनल 1 पर)
 npm run dev:web

docs/contributing/contributing_ja.md

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # run next app (terminal 1)
 npm run dev:web

docs/contributing/contributing_kr.md

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # next 앱 실행 (1번 터미널)
 npm run dev:web

docs/contributing/contributing_nl.md

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # draai next app (terminal 1)
 npm run dev:web

docs/contributing/contributing_sk.md

@@ -42,8 +42,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # spustite ďalšiu aplikáciu (terminál 1)
 npm run dev:web

docs/playwright-testing-guide.md

@@ -1,470 +0,0 @@
-# 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,14 +74,12 @@ flatpak install com.usebruno.Bruno
 
 # على نظام Linux عبر Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### التشغيل عبر منصات متعددة 🖥️

docs/readme/readme_bn.md

@@ -59,14 +59,12 @@ snap install bruno
 
 # Apt এর মাধ্যমে লিনাক্সে
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### একাধিক প্ল্যাটফর্মে চালান 🖥️

docs/readme/readme_cn.md

@@ -37,37 +37,13 @@ Bruno 直接在您的电脑文件夹中存储您的 API 信息。我们使用纯
 
 Bruno 仅限离线使用。我们计划永不向 Bruno 添加云同步功能。我们重视您的数据隐私，并认为它应该留在您的设备上。阅读我们的长期愿景 [点击查看](https://github.com/usebruno/bruno/discussions/269)
 
-[下载 Bruno](https://www.usebruno.com/downloads)
-
 📢 观看我们在印度 FOSS 3.0 会议上的最新演讲 [点击查看](https://www.youtube.com/watch?v=7bSMFpbcPiY)
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
-## 商业版本 ✨
+### 安装
 
-我们的大多数功能都是免费且开源的。
-我们致力于在 [开源与可持续性发展](https://github.com/usebruno/bruno/discussions/269) 之间取得和谐的平衡
-
-欢迎使用我们的 [付费版本](https://www.usebruno.com/pricing) ，看看附加的功能是否对您或团队有所帮助！ <br/>
-
-## 目录
-- [安装](#安装)
-- [特性](#特性)
-    - [跨平台使用 🖥️](#跨平台使用-)
-    - [通过Git协作 👩‍💻🧑‍💻](#通过git协作-)
-- [重要链接 📌](#重要链接-)
-- [展示 🎥](#展示-)
-- [分享评价 📣](#分享评价-)
-- [发布到新的包管理器](#发布到新的包管理器)
-- [联系方式 🌐](#联系方式-)
-- [商标](#商标)
-- [贡献 👩‍💻🧑‍💻](#贡献-)
-- [作者](#作者)
-- [许可证 📄](#许可证-)
-
-## 安装
-
-Bruno 可以在我们的 [网站上下载](https://www.usebruno.com/downloads) 适用于Mac、Windows 和 Linux 的可执行文件。
+Bruno 可以在我们的 [网站上下载](https://www.usebruno.com/downloads) Mac、Windows 和 Linux 的可执行文件。
 
 您也可以通过包管理器如 Homebrew、Chocolatey、Scoop、Snap 和 Apt 安装 Bruno。
 
@@ -82,71 +58,80 @@ choco install bruno
 scoop bucket add extras
 scoop install bruno
 
-# 在 Windows 上用 winget 安装
-winget install Bruno.Bruno
-
 # 在 Linux 上用 Snap 安装
 snap install bruno
 
-# 在 Linux 上用 Flatpak 安装
-flatpak install com.usebruno.Bruno
-
 # 在 Linux 上用 Apt 安装
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
-## 特性
-
-### 跨平台使用 🖥️
+### 在 Mac 上通过 Homebrew 安装 🖥️
 
 ![bruno](../../assets/images/run-anywhere.png) <br /><br />
 
-### 通过Git协作 👩‍💻🧑‍💻
+### Collaborate 安装 👩‍💻🧑‍💻
 
 或者任何您选择的版本控制系统
 
 ![bruno](../../assets/images/version-control.png) <br /><br />
 
-## 重要链接 📌
+### 重要链接 📌
 
 - [我们的愿景](https://github.com/usebruno/bruno/discussions/269)
-- [路线图](https://www.usebruno.com/roadmap)
+- [路线图](https://github.com/usebruno/bruno/discussions/384)
 - [文档](https://docs.usebruno.com)
 - [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
 - [网站](https://www.usebruno.com)
 - [价格](https://www.usebruno.com/pricing)
 - [下载](https://www.usebruno.com/downloads)
+- [GitHub 赞助](https://github.com/sponsors/helloanoop).
 
-## 展示 🎥
+### 展示 🎥
 
 - [Testimonials](https://github.com/usebruno/bruno/discussions/343)
 - [Knowledge Hub](https://github.com/usebruno/bruno/discussions/386)
 - [Scriptmania](https://github.com/usebruno/bruno/discussions/385)
 
-## 分享评价 📣
+### 支持 ❤️
+
+如果您喜欢 Bruno 并想支持我们的开源工作，请考虑通过 [GitHub Sponsors](https://github.com/sponsors/helloanoop) 来赞助我们。
+
+### 分享评价 📣
 
 如果 Bruno 在您的工作和团队中帮助了您，请不要忘记在我们的 GitHub 讨论上分享您的 [评价](https://github.com/usebruno/bruno/discussions/343)
 
-## 发布到新的包管理器
+### 发布到新的包管理器
 
-如需了解更多信息，请参见 [此处](../publishing/publishing_cn.md) 。
+有关更多信息，请参见 [此处](../publishing/publishing_cn.md) 。
 
-## 联系方式 🌐
+### 贡献 👩‍💻🧑‍💻
+
+我很高兴您希望改进 bruno。请查看 [贡献指南](../contributing/contributing_cn.md)。
+
+即使您无法通过代码做出贡献，我们仍然欢迎您提出 BUG 和新的功能需求。
+
+### 作者
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+### 联系方式 🌐
 
 [𝕏 (Twitter)](https://twitter.com/use_bruno) <br />
 [Website](https://www.usebruno.com) <br />
 [Discord](https://discord.com/invite/KgcZUncpjq) <br />
 [LinkedIn](https://www.linkedin.com/company/usebruno)
 
-## 商标
+### 商标
 
 **名称**
 
@@ -156,20 +141,6 @@ sudo apt update && sudo apt install bruno
 
 Logo 源自 [OpenMoji](https://openmoji.org/library/emoji-1F436/). License: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
 
-## 贡献 👩‍💻🧑‍💻
-
-很高兴您希望改进 bruno。请查看 [贡献指南](../contributing/contributing_cn.md)。
-
-即使您无法通过代码做出贡献，我们仍然欢迎您提出 BUG 和新的功能需求。
-
-## 作者
-
-<div align="center">
-    <a href="https://github.com/usebruno/bruno/graphs/contributors">
-        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
-    </a>
-</div>
-
-## 许可证 📄
+### 许可证 📄
 
 [MIT](../../license.md)

docs/readme/readme_de.md

@@ -78,14 +78,12 @@ flatpak install com.usebruno.Bruno
 
 # Auf Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Einsatz auf verschiedensten Plattformen 🖥️

docs/readme/readme_es.md

@@ -75,14 +75,12 @@ flatpak install com.usebruno.Bruno
 
 # En Linux con Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Ejecútalo en múltiples plataformas 🖥️

docs/readme/readme_fr.md

@@ -63,14 +63,12 @@ snap install bruno
 
 # Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Fonctionne sur de multiples plateformes 🖥️

docs/readme/readme_hi.md

@@ -1,152 +0,0 @@
-<br />
-<img src="../../assets/images/logo-transparent.png" width="80"/>
-
-### ब्रूनो - API इंटरफेस (API) का अन्वेषण और परीक्षण करने के लिए एक ओपन-सोर्स विकास वातावरण।
-
-[![GitHub संस्करण](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
-[![कमिट गतिविधि](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
-[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
-[![वेबसाइट](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
-[![डाउनलोड](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
-
-[English](../../readme.md)
-| [Українська](./readme_ua.md)
-| [Русский](./readme_ru.md)
-| [Türkçe](./readme_tr.md)
-| [Deutsch](./readme_de.md)
-| [Français](./readme_fr.md)
-| [Português (BR)](./readme_pt_br.md)
-| [한국어](./readme_kr.md)
-| [বাংলা](./readme_bn.md)
-| [Español](./readme_es.md)
-| [Italiano](./readme_it.md)
-| [Română](./readme_ro.md)
-| [Polski](./readme_pl.md)
-| [简体中文](./readme_cn.md)
-| [正體中文](./readme_zhtw.md)
-| [العربية](./readme_ar.md)
-| [日本語](./readme_ja.md)
-| [ქართული](./readme_ka.md)
-| **हिन्दी**
-
-ब्रूनो एक नया और अभिनव API क्लाइंट है, जिसका उद्देश्य Postman और अन्य समान उपकरणों द्वारा प्रस्तुत स्थिति को बदलना है।
-
-ब्रूनो आपकी कलेक्शनों को सीधे आपकी फाइल सिस्टम के एक फ़ोल्डर में संग्रहीत करता है। हम API अनुरोधों के बारे में जानकारी सहेजने के लिए एक सामान्य टेक्स्ट मार्कअप भाषा, Bru, का उपयोग करते हैं।
-
-आप अपनी API कलेक्शनों पर सहयोग करने के लिए Git या अपनी पसंद के किसी भी संस्करण नियंत्रण प्रणाली का उपयोग कर सकते हैं।
-
-ब्रूनो केवल ऑफ़लाइन उपयोग के लिए है। ब्रूनो में कभी भी क्लाउड-सिंक जोड़ने की कोई योजना नहीं है। हम आपके डेटा की गोपनीयता को महत्व देते हैं और मानते हैं कि इसे आपके डिवाइस पर ही रहना चाहिए। हमारी दीर्घकालिक दृष्टि [यहाँ](https://github.com/usebruno/bruno/discussions/269) पढ़ें।
-
-📢 हमारे हालिया India FOSS 3.0 सम्मेलन में हमारे वार्तालाप को [यहाँ](https://www.youtube.com/watch?v=7bSMFpbcPiY) देखें।
-
-![bruno](/assets/images/landing-2.png) <br /><br />
-
-### गोल्डन संस्करण ✨
-
-हमारी अधिकांश सुविधाएँ मुफ्त और ओपन-सोर्स हैं।
-हम [पारदर्शिता और स्थिरता के सिद्धांतों](https://github.com/usebruno/bruno/discussions/269) के बीच एक सामंजस्यपूर्ण संतुलन प्राप्त करने का प्रयास करते हैं।
-
-[गोल्डन संस्करण](https://www.usebruno.com/pricing) के लिए खरीदारी जल्द ही $9 की कीमत पर उपलब्ध होगी! <br/>
-[यहाँ सदस्यता लें](https://usebruno.ck.page/4c65576bd4) ताकि आपको लॉन्च पर सूचनाएं मिलें।
-
-### स्थापना
-
-ब्रूनो Mac, Windows और Linux के लिए हमारे [वेबसाइट](https://www.usebruno.com/downloads) पर एक बाइनरी डाउनलोड के रूप में उपलब्ध है।
-
-आप ब्रूनो को Homebrew, Chocolatey, Scoop, Snap, Flatpak और Apt जैसे पैकेज प्रबंधकों के माध्यम से भी स्थापित कर सकते हैं।
-
-```sh
-# Mac पर Homebrew के माध्यम से
-brew install bruno
-
-# Windows पर Chocolatey के माध्यम से
-choco install bruno
-
-# Windows पर Scoop के माध्यम से
-scoop bucket add extras
-scoop install bruno
-
-# Linux पर Snap के माध्यम से
-snap install bruno
-
-# Linux पर Flatpak के माध्यम से
-flatpak install com.usebruno.Bruno
-
-# Linux पर Apt के माध्यम से
-sudo mkdir -p /etc/apt/keyrings
-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 />
-
-Git के माध्यम से सहयोग करें 👩‍💻🧑‍💻
-या अपनी पसंद के किसी भी संस्करण नियंत्रण प्रणाली का उपयोग करें
-
-<br /><br />
-
-महत्वपूर्ण लिंक 📌
-हमारी दीर्घकालिक दृष्टि
-
-रोडमैप
-
-प्रलेखन
-
-Stack Overflow
-
-वेबसाइट
-
-मूल्य निर्धारण
-
-डाउनलोड
-
-GitHub प्रायोजक
-
-प्रस्तुतियाँ 🎥
-प्रशंसापत्र
-
-ज्ञान केंद्र
-
-Scriptmania
-
-समर्थन ❤️
-यदि आप ब्रूनो को पसंद करते हैं और हमारे ओपन-सोर्स कार्य का समर्थन करना चाहते हैं, तो कृपया GitHub प्रायोजक के माध्यम से हमें प्रायोजित करने पर विचार करें।
-
-प्रशंसापत्र साझा करें 📣
-यदि ब्रूनो ने आपके और आपकी टीमों के लिए काम में मदद की है, तो कृपया हमारे GitHub चर्चा में अपने प्रशंसापत्र साझा करना न भूलें
-
-नए पैकेज प्रबंधकों में प्रकाशित करना
-अधिक जानकारी के लिए कृपया यहाँ देखें।
-
-हमसे संपर्क करें 🌐
-𝕏 (ट्विटर) <br />
-वेबसाइट <br />
-डिस्कॉर्ड <br />
-लिंक्डइन
-
-ट्रेडमार्क
-नाम
-
-ब्रूनो एक ट्रेडमार्क है जो अनूप एम डी के स्वामित्व में है।
-
-लोगो
-
-लोगो OpenMoji से लिया गया है। लाइसेंस: CC BY-SA 4.0
-
-योगदान 👩‍💻🧑‍💻
-हमें खुशी है कि आप ब्रूनो को बेहतर बनाने में रुचि रखते हैं। कृपया योगदान गाइड देखें।
-
-यदि आप सीधे कोड के माध्यम से योगदान नहीं कर सकते, तो भी कृपया बग्स की रिपोर्ट करने और उन सुविधाओं का अनुरोध करने में संकोच न करें जिन्हें आपकी स्थिति को हल करने के लिए लागू किया जाना चाहिए।
-
-लेखक
-<div align="center"> <a href="https://github.com/usebruno/bruno/graphs/contributors"> <img src="https://contrib.rocks/image?repo=usebruno/bruno" /> </a> </div>
-
-लाइसेंस 📄
-MIT

docs/readme/readme_it.md

@@ -59,14 +59,12 @@ snap install bruno
 
 # Su Linux tramite Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Funziona su diverse piattaforme 🖥️

docs/readme/readme_ja.md

@@ -78,14 +78,12 @@ flatpak install com.usebruno.Bruno
 
 # LinuxでAptを使ってインストール
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### マルチプラットフォームでの実行に対応 🖥️

docs/readme/readme_ka.md

@@ -77,14 +77,12 @@ flatpak install com.usebruno.Bruno
 
 # Linux-ზე Apt-ის საშუალებით
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### პლატფორმებს შორის მუშაობა 🖥️

docs/readme/readme_kr.md

@@ -59,14 +59,12 @@ snap install bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### 여러 플랫폼에서 실행하세요. 🖥️

docs/readme/readme_nl.md

@@ -61,14 +61,12 @@ flatpak install com.usebruno.Bruno
 
 # Op Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Draai op meerdere platformen 🖥️

docs/readme/readme_pl.md

@@ -69,14 +69,12 @@ flatpak install com.usebruno.Bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Uruchom na wielu platformach 🖥️

docs/readme/readme_pt_br.md

@@ -76,14 +76,12 @@ flatpak install com.usebruno.Bruno
 
 # No Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Execute em várias plataformas 🖥️

docs/readme/readme_ro.md

@@ -59,14 +59,12 @@ snap install bruno
 
 # Pe Linux cu Apt
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Utilizați pe mai multe platforme 🖥️

docs/readme/readme_tr.md

@@ -63,14 +63,12 @@ snap install bruno
 
 # Apt aracılığıyla Linux'ta
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### Birden fazla platformda çalıştırın 🖥️

docs/readme/readme_zhtw.md

@@ -63,14 +63,12 @@ snap install bruno
 
 # 在 Linux 上使用 Apt 安裝
 sudo mkdir -p /etc/apt/keyrings
-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
+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
 ```
 
 ### 跨多個平台運行 🖥️

eslint.config.js

@@ -1,262 +0,0 @@
-// eslint.config.js
-const { defineConfig } = require("eslint/config");
-const globals = require("globals");
-const { fixupPluginRules } = require('@eslint/compat');
-const eslintPluginDiff = require('eslint-plugin-diff');
-
-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", "**/public/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.jest,
-        global: false,
-        require: false,
-        Buffer: false,
-        process: false,
-        ipcRenderer: false
-      },
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
-    files: ["packages/bruno-app/src/test-utils/mocks/codemirror.js"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    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,
-        ...globals.jest,
-      },
-    },
-    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

@@ -6,39 +6,24 @@
     "packages/bruno-electron",
     "packages/bruno-cli",
     "packages/bruno-common",
-    "packages/bruno-converters",
     "packages/bruno-schema",
     "packages/bruno-query",
     "packages/bruno-js",
     "packages/bruno-lang",
     "packages/bruno-tests",
     "packages/bruno-toml",
-    "packages/bruno-graphql-docs",
-    "packages/bruno-requests",
-    "packages/bruno-filestore"
+    "packages/bruno-graphql-docs"
   ],
   "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",
+    "@playwright/test": "^1.27.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",
+    "husky": "^8.0.3",
     "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",
     "rimraf": "^6.0.1",
@@ -46,19 +31,13 @@
   },
   "scripts": {
     "setup": "node ./scripts/setup.js",
-    "watch:converters": "npm run watch --workspace=packages/bruno-converters",
     "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
-    "watch": "npm run dev:watch",
-    "dev:watch": "node ./scripts/dev-hot-reload.js",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
     "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
-    "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
-    "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore",
-    "build:bruno-converters": "npm run build --workspace=packages/bruno-converters",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
     "build:electron": "node ./scripts/build-electron.js",
@@ -68,26 +47,13 @@
     "build:electron:deb": "./scripts/build-electron.sh deb",
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "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 --project=default",
-    "test:e2e:ssl": "playwright test --project=ssl",
+    "test:codegen": "npm run dev:web & node ./scripts/playwright-codegen.js",
+    "test:e2e": "npx playwright test",
+    "test:report": "npx playwright show-report",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "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"
-    ]
+    "prepare": "husky install"
   },
   "overrides": {
-    "rollup": "3.29.5",
-    "electron-store": {
-      "conf": {
-        "json-schema-typed": "8.0.1"
-      }
-    }
+    "rollup": "3.29.5"
   }
 }

packages/bruno-app/.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env"],
   "plugins": [["styled-components", { "ssr": true }]]
 }

packages/bruno-app/babel.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    ['@babel/preset-react', {
-      runtime: 'automatic'
-    }]
-  ],
-  plugins: ['babel-plugin-styled-components']
-};

packages/bruno-app/jest.config.js

@@ -1,11 +1,5 @@
 module.exports = {
   rootDir: '.',
-  transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest',
-  },
-  transformIgnorePatterns: [
-    "/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/",
-  ],
   moduleNameMapper: {
     '^assets/(.*)$': '<rootDir>/src/assets/$1',
     '^components/(.*)$': '<rootDir>/src/components/$1',
@@ -14,17 +8,9 @@ module.exports = {
     '^api/(.*)$': '<rootDir>/src/api/$1',
     '^pageComponents/(.*)$': '<rootDir>/src/pageComponents/$1',
     '^providers/(.*)$': '<rootDir>/src/providers/$1',
-    '^utils/(.*)$': '<rootDir>/src/utils/$1',
-    '^test-utils/(.*)$': '<rootDir>/src/test-utils/$1'
+    '^utils/(.*)$': '<rootDir>/src/utils/$1'
   },
   clearMocks: true,
   moduleDirectories: ['node_modules', 'src'],
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['@testing-library/jest-dom'],
-  setupFiles: [
-    '<rootDir>/jest.setup.js',
-  ],
-  testMatch: [
-    '<rootDir>/src/**/*.spec.[jt]s?(x)'
-  ]
-};
+  testEnvironment: 'node'
+};

packages/bruno-app/jest.setup.js

@@ -1,11 +0,0 @@
-jest.mock('nanoid', () => {
-  return {
-    nanoid: () => {}
-  };
-});
-
-jest.mock('strip-json-comments', () => {
-  return {
-    stripJsonComments: (str) => str
-  };
-});

packages/bruno-app/jsconfig.json

@@ -6,7 +6,6 @@
     "baseUrl": "./",
     "paths": {
       "assets/*": ["src/assets/*"],
-      "ui/*": ["src/ui/*"],
       "components/*": ["src/components/*"],
       "hooks/*": ["src/hooks/*"],
       "themes/*": ["src/themes/*"],

packages/bruno-app/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@usebruno/app",
   "version": "2.0.0",
-  "license": "MIT",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -12,11 +11,11 @@
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
+    "@babel/preset-env": "^7.26.0",
     "@fontsource/inter": "^5.0.15",
     "@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",
@@ -68,54 +67,39 @@
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
-    "react-json-view": "^1.21.3",
     "react-pdf": "9.1.1",
     "react-player": "^2.16.0",
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
-    "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
+    "yargs-parser": "^21.1.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
     "@rsbuild/core": "^1.1.2",
     "@rsbuild/plugin-babel": "^1.0.3",
     "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
     "autoprefixer": "10.4.20",
-    "babel-jest": "^29.7.0",
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
-    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
     "css-loader": "7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
-    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "8.4.47",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
-  },
-  "overrides": {
-    "httpsnippet": {
-      "form-data": "4.0.4"
-    }
   }
 }

packages/bruno-app/rsbuild.config.mjs

@@ -19,12 +19,7 @@ export default defineConfig({
     })
   ],
   source: {
-    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file,
-    exclude: [
-      '**/test-utils/**',
-      '**/*.test.*',
-      '**/*.spec.*'
-    ]
+    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file
   },
   html: {
     title: 'Bruno'
@@ -39,16 +34,6 @@ export default defineConfig({
           },
         },
       },
-      ignoreWarnings: [
-        (warning) =>  warning.message.includes('Critical dependency: the request of a dependency is an expression') && warning?.moduleDescriptor?.name?.includes('flow-parser')
-      ],
-      // Add externals configuration to exclude Node.js libraries
-      externals: {
-        // List specific Node.js modules you want to exclude
-        // Format: 'module-name': 'commonjs module-name'
-        'worker_threads': 'commonjs worker_threads',
-        // 'path': 'commonjs path'
-      }
     },
   }
 });

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

@@ -1,40 +0,0 @@
-import React, { useMemo } from 'react';
-import CodeEditor from 'components/CodeEditor';
-import { useTheme } from 'providers/Theme';
-import { useSelector } from 'react-redux';
-import { parseBulkKeyValue, serializeBulkKeyValue } from 'utils/common/bulkKeyValueUtils';
-
-const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const { displayedTheme } = useTheme();
-
-  const parsedParams = useMemo(() => serializeBulkKeyValue(params), [params]);
-
-  const handleEdit = (value) => {
-    const parsed = parseBulkKeyValue(value);
-    onChange(parsed);
-  };
-
-  return (
-    <>
-      <div className="h-[200px]">
-        <CodeEditor
-          mode="text/plain"
-          theme={displayedTheme}
-          font={preferences.codeFont || 'default'}
-          value={parsedParams}
-          onEdit={handleEdit}
-          onSave={onSave}
-          onRun={onRun}
-        />
-      </div>
-      <div className="flex btn-action justify-between items-center mt-3">
-        <button className="text-link select-none ml-auto" onClick={onToggle}>
-          Key/Value Edit
-        </button>
-      </div>
-    </>
-  );
-};
-
-export default BulkEditor;

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

@@ -1,99 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -102,24 +102,6 @@ const StyledWrapper = styled.div`
   .cm-s-default span.cm-variable {
     color: #397d13 !important;
   }
-  
-  //matching bracket fix
-  .CodeMirror-matchingbracket {
-    background: #5cc0b48c !important;
-    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

@@ -8,20 +8,116 @@
 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 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;
-window.JSHINT = JSHINT;
 
+let CodeMirror;
+const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const TAB_SIZE = 2;
 
+if (!SERVER_RENDERED) {
+  CodeMirror = require('codemirror');
+  window.jsonlint = jsonlint;
+  window.JSHINT = JSHINT;
+  //This should be done dynamically if possible
+  const hintWords = [
+    'res',
+    'res.status',
+    'res.statusText',
+    'res.headers',
+    'res.body',
+    'res.responseTime',
+    'res.getStatus()',
+    'res.getStatusText()',
+    'res.getHeader(name)',
+    'res.getHeaders()',
+    'res.getBody()',
+    'res.getResponseTime()',
+    'req',
+    'req.url',
+    'req.method',
+    'req.headers',
+    'req.body',
+    'req.timeout',
+    'req.getUrl()',
+    'req.setUrl(url)',
+    'req.getMethod()',
+    'req.getAuthMode()',
+    'req.setMethod(method)',
+    'req.getHeader(name)',
+    'req.getHeaders()',
+    'req.setHeader(name, value)',
+    'req.setHeaders(data)',
+    'req.getBody()',
+    'req.setBody(data)',
+    'req.setMaxRedirects(maxRedirects)',
+    'req.getTimeout()',
+    'req.setTimeout(timeout)',
+    'req.getExecutionMode()',
+    'bru',
+    'bru.cwd()',
+    'bru.getEnvName()',
+    'bru.getProcessEnv(key)',
+    'bru.hasEnvVar(key)',
+    'bru.getEnvVar(key)',
+    'bru.getFolderVar(key)',
+    'bru.getCollectionVar(key)',
+    'bru.setEnvVar(key,value)',
+    'bru.deleteEnvVar(key)',
+    'bru.hasVar(key)',
+    'bru.getVar(key)',
+    'bru.setVar(key,value)',
+    'bru.deleteVar(key)',
+    'bru.deleteAllVars()',
+    'bru.setNextRequest(requestName)',
+    'req.disableParsingResponseJson()',
+    'bru.getRequestVar(key)',
+    'bru.runRequest(requestPathName)',
+    'bru.getAssertionResults()',
+    'bru.getTestResults()',
+    'bru.sleep(ms)',
+    'bru.getGlobalEnvVar(key)',
+    'bru.setGlobalEnvVar(key, value)',
+    'bru.runner',
+    'bru.runner.setNextRequest(requestName)',
+    'bru.runner.skipRequest()',
+    'bru.runner.stopExecution()'
+  ];
+  CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
+    const cursor = editor.getCursor();
+    const currentLine = editor.getLine(cursor.line);
+    let startBru = cursor.ch;
+    let endBru = startBru;
+    while (endBru < currentLine.length && /[\w.]/.test(currentLine.charAt(endBru))) ++endBru;
+    while (startBru && /[\w.]/.test(currentLine.charAt(startBru - 1))) --startBru;
+    let curWordBru = startBru != endBru && currentLine.slice(startBru, endBru);
+
+    let start = cursor.ch;
+    let end = start;
+    while (end < currentLine.length && /[\w]/.test(currentLine.charAt(end))) ++end;
+    while (start && /[\w]/.test(currentLine.charAt(start - 1))) --start;
+    const jsHinter = CodeMirror.hint.javascript;
+    let result = jsHinter(editor) || { list: [] };
+    result.to = CodeMirror.Pos(cursor.line, end);
+    result.from = CodeMirror.Pos(cursor.line, start);
+    if (curWordBru) {
+      hintWords.forEach((h) => {
+        if (h.includes('.') == curWordBru.includes('.') && h.startsWith(curWordBru)) {
+          result.list.push(curWordBru.includes('.') ? h.split('.')?.at(-1) : h);
+        }
+      });
+      result.list?.sort();
+    }
+    return result;
+  });
+  CodeMirror.commands.autocomplete = (cm, hint, options) => {
+    cm.showHint({ hint, ...options });
+  };
+}
+
 export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -38,24 +134,15 @@ export default class CodeEditor extends React.Component {
       expr: true,
       asi: true
     };
-
-    this.state = {
-      searchBarVisible: false
-    };
   }
 
   componentDidMount() {
-    const variables = getAllVariables(this.props.collection, this.props.item);
-
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
-      lineWrapping: this.props.enableLineWrapping ?? true,
+      lineWrapping: true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
-      brunoVarInfo: {
-        variables
-      },
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
@@ -88,14 +175,24 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
+          if (this._isSearchOpen()) {
+            // replace the older search component with the new one
+            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+            search && search.remove();
           }
+          cm.execCommand('findPersistent');
+          this._bindSearchHandler();
+          this._appendSearchResultsCount();
         },
         'Ctrl-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
+          if (this._isSearchOpen()) {
+            // replace the older search component with the new one
+            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+            search && search.remove();
           }
+          cm.execCommand('findPersistent');
+          this._bindSearchHandler();
+          this._appendSearchResultsCount();
         },
         'Cmd-H': 'replace',
         'Ctrl-H': 'replace',
@@ -124,11 +221,6 @@ export default class CodeEditor extends React.Component {
           } else {
             this.editor.toggleComment();
           }
-        },
-        'Esc': () => {
-          if (this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: false });
-          }
         }
       },
       foldOptions: {
@@ -182,26 +274,30 @@ export default class CodeEditor extends React.Component {
       }
       return found;
     });
-    
     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);
-      
-      // Setup AutoComplete Helper for all modes
-      const autoCompleteOptions = {
-        showHintsFor: this.props.showHintsFor,
-        getAllVariables: getAllVariablesHandler
-      };
-
-      this.brunoAutoCompleteCleanup = setupAutoComplete(
-        editor,
-        autoCompleteOptions
-      );
+    }
+    if (this.props.mode == 'javascript') {
+      editor.on('keyup', function (cm, event) {
+        const cursor = editor.getCursor();
+        const currentLine = editor.getLine(cursor.line);
+        let start = cursor.ch;
+        let end = start;
+        while (end < currentLine.length && /[^{}();\s\[\]\,]/.test(currentLine.charAt(end))) ++end;
+        while (start && /[^{}();\s\[\]\,]/.test(currentLine.charAt(start - 1))) --start;
+        let curWord = start != end && currentLine.slice(start, end);
+        // Qualify if autocomplete will be shown
+        if (
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Meta|Alt|Home|End\s)\w*/.test(event.key) &&
+          curWord.length > 0 &&
+          !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
+          /(?<!\d)[a-zA-Z\._]$/.test(curWord)
+        ) {
+          CodeMirror.commands.autocomplete(cm, CodeMirror.hint.brunoJS, { completeSingle: false });
+        }
+      });
     }
   }
 
@@ -232,28 +328,16 @@ 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();
   }
 
   render() {
@@ -266,18 +350,10 @@ export default class CodeEditor extends React.Component {
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
-      >
-        <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>
+        ref={(node) => {
+          this._node = node;
+        }}
+      />
     );
   }
 
@@ -286,12 +362,10 @@ export default class CodeEditor extends React.Component {
     let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
-    defineCodeMirrorBrunoVariablesMode(variables, mode, false, this.props.enableVariableHighlighting);
+    defineCodeMirrorBrunoVariablesMode(variables, mode);
     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);
@@ -301,4 +375,67 @@ 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/CodeEditor/index.spec.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { render, act } from '@testing-library/react';
-import CodeEditor from './index';
-import { ThemeProvider } from 'styled-components';
-
-jest.mock('codemirror', () => {
-  const codemirror = require('test-utils/mocks/codemirror');
-  return codemirror;
-});
-
-const MOCK_THEME = {
-  codemirror: {
-    bg: "#1e1e1e",
-    border: "#333",
-  },
-  textLink: "#007acc",
-};
-
-const setupEditorState = (editor, { value, cursorPosition }) => {
-  editor._currentValue = value;
-  editor.getCursor.mockReturnValue({ line: 0, ch: cursorPosition });
-  editor.getRange.mockImplementation((from, to) => {
-    if (from.line === 0 && from.ch === 0 && to.line === 0 && to.ch === cursorPosition) {
-      return value;
-    }
-    return editor._currentValue.slice(from.ch, to.ch);
-  });
-
-  editor.state = {
-    completionActive: null,
-  }
-};
-
-const setupEditorWithRef = () => {
-  const ref = React.createRef();
-  const { rerender } = render(
-    <ThemeProvider theme={MOCK_THEME}>
-      <CodeEditor ref={ref} />
-    </ThemeProvider>
-  );
-  return { ref, rerender };
-};
-
-describe('CodeEditor', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.resetModules();
-  });
-
-  it("add CodeEditor related tests here", () => {});
-});

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -14,8 +12,6 @@ const AwsV4Auth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -25,12 +21,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -42,12 +38,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -59,12 +55,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -76,12 +72,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -93,12 +89,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -110,12 +106,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: profileName
         }
       })
     );
@@ -135,7 +131,7 @@ const AwsV4Auth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2 flex items-center">
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -144,7 +140,6 @@ const AwsV4Auth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
-        {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Session Token</label>

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -14,8 +12,6 @@ const BasicAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const basicAuth = get(collection, 'root.request.auth.basic', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -25,8 +21,8 @@ const BasicAuth = ({ collection }) => {
         mode: 'basic',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: basicAuth.password || ''
+          username: username,
+          password: basicAuth.password
         }
       })
     );
@@ -38,8 +34,8 @@ const BasicAuth = ({ collection }) => {
         mode: 'basic',
         collectionUid: collection.uid,
         content: {
-          username: basicAuth.username || '',
-          password: password || ''
+          username: basicAuth.username,
+          password: password
         }
       })
     );
@@ -59,7 +55,7 @@ const BasicAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={basicAuth.password || ''}
           theme={storedTheme}
@@ -68,7 +64,6 @@ const BasicAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
-        {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -14,8 +12,6 @@ const BearerAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(bearerToken);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -34,7 +30,7 @@ const BearerAuth = ({ collection }) => {
   return (
     <StyledWrapper className="mt-2 w-full">
       <label className="block font-medium mb-2">Token</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={bearerToken}
           theme={storedTheme}
@@ -43,7 +39,6 @@ const BearerAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
-        {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -14,8 +12,6 @@ const DigestAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const digestAuth = get(collection, 'root.request.auth.digest', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -25,8 +21,8 @@ const DigestAuth = ({ collection }) => {
         mode: 'digest',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: digestAuth.password || ''
+          username: username,
+          password: digestAuth.password
         }
       })
     );
@@ -38,8 +34,8 @@ const DigestAuth = ({ collection }) => {
         mode: 'digest',
         collectionUid: collection.uid,
         content: {
-          username: digestAuth.username || '',
-          password: password || ''
+          username: digestAuth.username,
+          password: password
         }
       })
     );
@@ -59,7 +55,7 @@ const DigestAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={digestAuth.password || ''}
           theme={storedTheme}
@@ -68,7 +64,6 @@ const DigestAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
-        {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -20,8 +18,6 @@ const NTLMAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -32,9 +28,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: ntlmAuth.password || '',
-          domain: ntlmAuth.domain || ''
+          username: username,
+          password: ntlmAuth.password,
+          domain: ntlmAuth.domain
 
         }
       })
@@ -47,9 +43,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: ntlmAuth.username || '',
-          password: password || '',
-          domain: ntlmAuth.domain || ''
+          username: ntlmAuth.username,
+          password: password,
+          domain: ntlmAuth.domain
         }
       })
     );
@@ -61,9 +57,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: ntlmAuth.username || '',
-          password: ntlmAuth.password || '',
-          domain: domain || ''
+          username: ntlmAuth.username,
+          password: ntlmAuth.password,
+          domain: domain
         }
       })
     );
@@ -86,7 +82,7 @@ const NTLMAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -95,7 +91,6 @@ const NTLMAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
-        {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Domain</label>

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

@@ -7,7 +7,6 @@ import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/in
 import { useDispatch } from 'react-redux';
 import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
 import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
-import OAuth2Implicit from 'components/RequestPane/Auth/OAuth2/Implicit/index';
 import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
 
 const GrantTypeComponentMap = ({collection }) => {
@@ -30,9 +29,6 @@ const GrantTypeComponentMap = ({collection }) => {
     case 'client_credentials':
       return <OAuth2ClientCredentials save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
       break;
-    case 'implicit':
-      return <OAuth2Implicit save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
-      break;
     default:
       return <div>TBD</div>;
       break;

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -14,8 +12,6 @@ const WsseAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const wsseAuth = get(collection, 'root.request.auth.wsse', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -25,8 +21,8 @@ const WsseAuth = ({ collection }) => {
         mode: 'wsse',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: wsseAuth.password || ''
+          username,
+          password: wsseAuth.password
         }
       })
     );
@@ -38,8 +34,8 @@ const WsseAuth = ({ collection }) => {
         mode: 'wsse',
         collectionUid: collection.uid,
         content: {
-          username: wsseAuth.username || '',
-          password: password || ''
+          username: wsseAuth.username,
+          password
         }
       })
     );
@@ -59,16 +55,14 @@ const WsseAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={wsseAuth.password || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
-          isSecret={true}
         />
-        {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -38,48 +38,6 @@ 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,10 +132,7 @@ 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">
-              <span className="protocol-placeholder">
-                <span className="protocol-https">https://</span>
-                <span className="protocol-grpcs">grpcs://</span>
-              </span>
+              https://
             </div>
             <input
               id="domain"

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

@@ -46,7 +46,7 @@ const Docs = ({ collection }) => {
   }
 
   return (
-    <StyledWrapper className="h-full w-full relative flex flex-col">
+    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
       <div className='flex flex-row w-full justify-between items-center mb-4'>
         <div className='text-lg font-medium flex items-center gap-2'>
           <IconFileText size={20} strokeWidth={1.5} />

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -7,30 +7,19 @@ import { useTheme } from 'providers/Theme';
 import {
   addCollectionHeader,
   updateCollectionHeader,
-  deleteCollectionHeader,
-  setCollectionHeaders
+  deleteCollectionHeader
 } 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(
@@ -74,22 +63,6 @@ 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">
@@ -168,14 +141,9 @@ const Headers = ({ collection }) => {
             : null}
         </tbody>
       </table>
-      <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>
+      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+        + Add Header
+      </button>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -53,7 +53,7 @@ const Info = ({ collection }) => {
             </div>
             <div className="ml-4">
               <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted">
+              <div className="mt-1 text-sm text-muted font-mono">
                 {
                   isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
                 }
@@ -72,7 +72,7 @@ const Info = ({ collection }) => {
               </div>
             </div>
           </div>
-          {showShareCollectionModal && <ShareCollection collectionUid={collection.uid} onClose={handleToggleShowShareCollectionModal(false)} />}
+          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
@@ -62,19 +62,6 @@ 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">
@@ -87,7 +74,7 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder="Request URL"
+                placeholder='Request URL'
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
@@ -100,7 +87,6 @@ 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

@@ -1,13 +0,0 @@
-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

@@ -1,336 +0,0 @@
-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/Script/index.js

@@ -53,7 +53,6 @@ const Script = ({ collection }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'bru']}
         />
       </div>
       <div className="flex-1 mt-6">
@@ -67,7 +66,6 @@ const Script = ({ collection }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'res', 'bru']}
         />
       </div>
 

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

@@ -37,7 +37,6 @@ const Tests = ({ collection }) => {
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
         fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
       />
 
       <div className="mt-6">

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

@@ -13,12 +13,19 @@ 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';
+import DotIcon from 'components/Icons/Dot';
 import Overview from './Overview/index';
 
+const ContentIndicator = () => {
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium">
+      <DotIcon width="10"></DotIcon>
+    </sup>
+  );
+};
+
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
   const tab = collection.settingsSelectedTab;
@@ -42,15 +49,11 @@ const CollectionSettings = ({ collection }) => {
   const requestVars = get(collection, 'root.request.vars.req', []);
   const responseVars = get(collection, 'root.request.vars.res', []);
   const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
-  const authMode = get(collection, 'root.request.auth', {}).mode || 'none';
-
-  const presets = get(collection, 'brunoConfig.presets', []);
-  const hasPresets = presets && presets.requestUrl !== "";
+  const auth = get(collection, 'root.request.auth', {}).mode;
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
-  const proxyEnabled = proxyConfig.hostname ? true : false;
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-  const protobufConfig = get(collection, 'brunoConfig.protobuf', {});
+
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -127,9 +130,6 @@ const CollectionSettings = ({ collection }) => {
           />
         );
       }
-      case 'protobuf': {
-        return <Protobuf collection={collection} />;
-      }
     }
   };
 
@@ -140,9 +140,9 @@ const CollectionSettings = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-hidden">
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
       <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')}>
@@ -155,34 +155,29 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {authMode !== 'none' && <StatusDot />}
+          {auth !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
-          {hasScripts && <StatusDot />}
+          {hasScripts && <ContentIndicator />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
-          {hasTests && <StatusDot />}
+          {hasTests && <ContentIndicator />}
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
-          {hasPresets  && <StatusDot />}
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0 && proxyEnabled && <StatusDot />}
+          {Object.keys(proxyConfig).length > 0  && <ContentIndicator />}
         </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 />}
+          {clientCertConfig.length > 0 && <ContentIndicator />}
         </div>
       </div>
-      <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
+      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js

@@ -1,163 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: ${(props) => props.theme.console.contentBg};
-  overflow: hidden;
-
-  .debug-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .debug-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
-    font-weight: 500;
-
-    .error-count {
-      color: ${(props) => props.theme.console.countColor};
-      font-size: 12px;
-      font-weight: 400;
-    }
-  }
-
-  .debug-controls {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .control-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    background: transparent;
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .debug-content {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .debug-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: ${(props) => props.theme.console.emptyColor};
-    text-align: center;
-    gap: 8px;
-    padding: 40px 20px;
-
-    p {
-      margin: 0;
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    span {
-      font-size: 12px;
-      opacity: 0.7;
-    }
-  }
-
-  .errors-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    min-height: 0;
-  }
-
-  .errors-header {
-    display: grid;
-    grid-template-columns: 1fr 200px 120px;
-    gap: 12px;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 11px;
-    font-weight: 600;
-    color: ${(props) => props.theme.console.titleColor};
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    flex-shrink: 0;
-  }
-
-  .errors-list {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    min-height: 0;
-  }
-
-  .error-row {
-    display: grid;
-    grid-template-columns: 1fr 200px 120px;
-    gap: 12px;
-    padding: 8px 16px;
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    cursor: pointer;
-    transition: background-color 0.1s ease;
-    font-size: 12px;
-    align-items: center;
-
-    &:hover {
-      background: ${(props) => props.theme.console.logHoverBg};
-    }
-
-    &.selected {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
-    }
-  }
-
-  .error-message {
-    color: ${(props) => props.theme.console.messageColor};
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  }
-
-  .error-location {
-    color: ${(props) => props.theme.console.messageColor};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
-  }
-
-  .error-time {
-    color: ${(props) => props.theme.console.timestampColor};
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
-    text-align: right;
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,106 +0,0 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { IconBug } from '@tabler/icons';
-import { 
-  setSelectedError,
-  clearDebugErrors
-} from 'providers/ReduxStore/slices/logs';
-import StyledWrapper from './StyledWrapper';
-
-const ErrorRow = ({ error, isSelected, onClick }) => {
-  const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString('en-US', { 
-      hour12: false, 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      second: '2-digit',
-      fractionalSecondDigits: 3
-    });
-  };
-
-  const getShortMessage = (message, maxLength = 80) => {
-    if (!message) return 'Unknown error';
-    return message.length > maxLength ? message.substring(0, maxLength) + '...' : message;
-  };
-
-  const getLocation = (error) => {
-    if (error.filename) {
-      const filename = error.filename.split('/').pop(); // Get just the filename
-      if (error.lineno && error.colno) {
-        return `${filename}:${error.lineno}:${error.colno}`;
-      } else if (error.lineno) {
-        return `${filename}:${error.lineno}`;
-      }
-      return filename;
-    }
-    return '-';
-  };
-
-  return (
-    <div 
-      className={`error-row ${isSelected ? 'selected' : ''}`}
-      onClick={onClick}
-    >
-      <div className="error-message" title={error.message}>
-        {getShortMessage(error.message)}
-      </div>
-      
-      <div className="error-location" title={error.filename}>
-        {getLocation(error)}
-      </div>
-      
-      <div className="error-time">
-        {formatTime(error.timestamp)}
-      </div>
-    </div>
-  );
-};
-
-const DebugTab = () => {
-  const dispatch = useDispatch();
-  const { debugErrors, selectedError } = useSelector(state => state.logs);
-
-  const handleErrorClick = (error) => {
-    dispatch(setSelectedError(error));
-  };
-
-  const handleClearErrors = () => {
-    dispatch(clearDebugErrors());
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="debug-content">
-        {debugErrors.length === 0 ? (
-          <div className="debug-empty">
-            <IconBug size={48} strokeWidth={1} />
-            <p>No errors</p>
-            <span>console.error() calls will appear here</span>
-          </div>
-        ) : (
-          <div className="errors-container">
-            <div className="errors-header">
-              <div>Message</div>
-              <div>Location</div>
-              <div className="text-right">Time</div>
-            </div>
-            
-            <div className="errors-list">
-              {debugErrors.map((error, index) => (
-                <ErrorRow
-                  key={error.id}
-                  error={error}
-                  isSelected={selectedError?.id === error.id}
-                  onClick={() => handleErrorClick(error)}
-                />
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default DebugTab; 

packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/StyledWrapper.js

@@ -1,228 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: ${(props) => props.theme.console.contentBg};
-  border-left: 1px solid ${(props) => props.theme.console.border};
-  min-width: 400px;
-  max-width: 600px;
-  width: 40%;
-  overflow: hidden;
-
-  .panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .panel-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
-    font-weight: 500;
-
-    .error-time {
-      color: ${(props) => props.theme.console.countColor};
-      font-size: 11px;
-      font-weight: 400;
-    }
-  }
-
-  .close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-  }
-
-  .panel-tabs {
-    display: flex;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .tab-button {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 16px;
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 12px;
-    font-weight: 500;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-
-    &.active {
-      color: ${(props) => props.theme.console.checkboxColor};
-      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
-      background: ${(props) => props.theme.console.contentBg};
-    }
-  }
-
-  .panel-content {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background: ${(props) => props.theme.console.contentBg};
-    min-height: 0;
-  }
-
-  .tab-content {
-    padding: 16px;
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  .section {
-    margin-bottom: 24px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    h4 {
-      margin: 0 0 12px 0;
-      font-size: 13px;
-      font-weight: 600;
-      color: ${(props) => props.theme.console.titleColor};
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-  }
-
-  .info-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .info-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    label {
-      font-size: 11px;
-      font-weight: 600;
-      color: ${(props) => props.theme.console.titleColor};
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    span {
-      font-size: 12px;
-      color: ${(props) => props.theme.console.messageColor};
-      font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-      word-break: break-all;
-      line-height: 1.4;
-    }
-  }
-
-  .error-message-full {
-    color: ${(props) => props.theme.console.messageColor} !important;
-    background: ${(props) => props.theme.console.headerBg};
-    padding: 8px 12px;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.console.border};
-  }
-
-  .file-path {
-    color: ${(props) => props.theme.console.checkboxColor} !important;
-    font-weight: 500 !important;
-  }
-
-  .report-section {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    p {
-      margin: 0;
-      font-size: 12px;
-      color: ${(props) => props.theme.console.messageColor};
-      line-height: 1.4;
-    }
-  }
-
-  .report-button {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.buttonHoverBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 6px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 12px;
-    font-weight: 500;
-    text-decoration: none;
-    align-self: flex-start;
-
-    &:hover {
-      background: ${(props) => props.theme.console.checkboxColor};
-      color: white;
-      border-color: ${(props) => props.theme.console.checkboxColor};
-    }
-
-    span {
-      font-family: inherit;
-    }
-  }
-
-  .stack-trace-container,
-  .arguments-container {
-    background: ${(props) => props.theme.console.headerBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 6px;
-    overflow: hidden;
-  }
-
-  .stack-trace,
-  .arguments {
-    margin: 0;
-    padding: 16px;
-    font-size: 11px;
-    line-height: 1.5;
-    color: ${(props) => props.theme.console.messageColor};
-    background: transparent;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-x: auto;
-    max-height: 400px;
-    overflow-y: auto;
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,268 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { 
-  IconX,
-  IconBug,
-  IconFileText,
-  IconCode,
-  IconStack,
-  IconBrandGithub
-} from '@tabler/icons';
-import { clearSelectedError } from 'providers/ReduxStore/slices/logs';
-import { useApp } from 'providers/App';
-import platformLib from 'platform';
-import StyledWrapper from './StyledWrapper';
-
-const ErrorInfoTab = ({ error }) => {
-  const { version } = useApp();
-  
-  const formatTimestamp = (timestamp) => {
-    const date = new Date(timestamp);
-    return date.toLocaleString();
-  };
-
-  const generateGitHubIssueUrl = () => {
-    const title = `Bug: ${error.message.substring(0, 50)}${error.message.length > 50 ? '...' : ''}`;
-    
-    const body = `## Bug Report
-
-### Error Details
-- **Message**: ${error.message}
-- **File**: ${error.filename || 'Unknown'}
-- **Line**: ${error.lineno || 'Unknown'}:${error.colno || 'Unknown'}
-- **Timestamp**: ${formatTimestamp(error.timestamp)}
-
-### Environment
-- **Bruno Version**: ${version}
-- **OS**: ${platformLib.os.family} ${platformLib.os.version || ''}
-- **Browser**: ${platformLib.name} ${platformLib.version || ''}
-
-### Stack Trace
-\`\`\`
-${error.stack || 'No stack trace available'}
-\`\`\`
-
-### Arguments
-\`\`\`
-${error.args ? error.args.map((arg, index) => {
-  if (arg && typeof arg === 'object' && arg.__type === 'Error') {
-    return `[${index}]: Error: ${arg.message}`;
-  }
-  return `[${index}]: ${typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)}`;
-}).join('\n') : 'No arguments'}
-\`\`\`
-
-### Steps to Reproduce
-1. 
-2. 
-3. 
-
-### Expected Behavior
-
-
-### Additional Context
-
-`;
-
-    const encodedTitle = encodeURIComponent(title);
-    const encodedBody = encodeURIComponent(body);
-    
-    return `https://github.com/usebruno/bruno/issues/new?template=BLANK_ISSUE&title=${encodedTitle}&body=${encodedBody}`;
-  };
-
-  const handleReportIssue = () => {
-    const url = generateGitHubIssueUrl();
-    window.open(url, '_blank');
-  };
-
-  return (
-    <div className="tab-content">
-      <div className="section">
-        <h4>Error Information</h4>
-        <div className="info-grid">
-          <div className="info-item">
-            <label>Message:</label>
-            <span className="error-message-full">{error.message || 'No message available'}</span>
-          </div>
-          
-          {error.filename && (
-            <div className="info-item">
-              <label>File:</label>
-              <span className="file-path">{error.filename}</span>
-            </div>
-          )}
-          
-          {error.lineno && (
-            <div className="info-item">
-              <label>Line:</label>
-              <span>{error.lineno}{error.colno ? `:${error.colno}` : ''}</span>
-            </div>
-          )}
-          
-          <div className="info-item">
-            <label>Timestamp:</label>
-            <span>{formatTimestamp(error.timestamp)}</span>
-          </div>
-        </div>
-      </div>
-      
-      <div className="section">
-        <h4>Report Issue</h4>
-        <div className="report-section">
-          <p>Found a bug? Help us improve Bruno by reporting this error on GitHub.</p>
-          <button 
-            className="report-button"
-            onClick={handleReportIssue}
-            title="Report this error on GitHub"
-          >
-            <IconBrandGithub size={16} strokeWidth={1.5} />
-            <span>Report Issue on GitHub</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const StackTraceTab = ({ error }) => {
-  const formatStackTrace = (stack) => {
-    if (!stack) return 'Stack trace not available';
-    
-    return stack
-      .split('\n')
-      .map(line => line.trim())
-      .filter(line => line.length > 0)
-      .join('\n');
-  };
-
-  return (
-    <div className="tab-content">
-      <div className="section">
-        <h4>Stack Trace</h4>
-        <div className="stack-trace-container">
-          <pre className="stack-trace">
-            {formatStackTrace(error.stack)}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const ArgumentsTab = ({ error }) => {
-  const formatArguments = (args) => {
-    if (!args || args.length === 0) return 'No arguments available';
-    
-    try {
-      return args.map((arg, index) => {
-        // Handle special Error object format
-        if (arg && typeof arg === 'object' && arg.__type === 'Error') {
-          return `[${index}]: Error: ${arg.message}\n  Name: ${arg.name}\n  Stack: ${arg.stack || 'No stack trace'}`;
-        }
-        
-        if (typeof arg === 'object' && arg !== null) {
-          return `[${index}]: ${JSON.stringify(arg, null, 2)}`;
-        }
-        
-        return `[${index}]: ${String(arg)}`;
-      }).join('\n\n');
-    } catch (e) {
-      return 'Arguments could not be formatted';
-    }
-  };
-
-  return (
-    <div className="tab-content">
-      <div className="section">
-        <h4>Arguments</h4>
-        <div className="arguments-container">
-          <pre className="arguments">
-            {formatArguments(error.args)}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const ErrorDetailsPanel = () => {
-  const dispatch = useDispatch();
-  const { selectedError } = useSelector(state => state.logs);
-  const [activeTab, setActiveTab] = useState('info');
-
-  if (!selectedError) return null;
-
-  const handleClose = () => {
-    dispatch(clearSelectedError());
-  };
-
-  const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    return date.toLocaleString();
-  };
-
-  const getTabContent = () => {
-    switch (activeTab) {
-      case 'info':
-        return <ErrorInfoTab error={selectedError} />;
-      case 'stack':
-        return <StackTraceTab error={selectedError} />;
-      case 'args':
-        return <ArgumentsTab error={selectedError} />;
-      default:
-        return <ErrorInfoTab error={selectedError} />;
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="panel-header">
-        <div className="panel-title">
-          <IconBug size={16} strokeWidth={1.5} />
-          <span>Error Details</span>
-          <span className="error-time">({formatTime(selectedError.timestamp)})</span>
-        </div>
-        
-        <button 
-          className="close-button"
-          onClick={handleClose}
-          title="Close details panel"
-        >
-          <IconX size={16} strokeWidth={1.5} />
-        </button>
-      </div>
-
-      <div className="panel-tabs">
-        <button 
-          className={`tab-button ${activeTab === 'info' ? 'active' : ''}`}
-          onClick={() => setActiveTab('info')}
-        >
-          <IconFileText size={14} strokeWidth={1.5} />
-          Info
-        </button>
-        
-        <button 
-          className={`tab-button ${activeTab === 'stack' ? 'active' : ''}`}
-          onClick={() => setActiveTab('stack')}
-        >
-          <IconStack size={14} strokeWidth={1.5} />
-          Stack
-        </button>
-        
-        <button 
-          className={`tab-button ${activeTab === 'args' ? 'active' : ''}`}
-          onClick={() => setActiveTab('args')}
-        >
-          <IconCode size={14} strokeWidth={1.5} />
-          Args
-        </button>
-      </div>
-
-      <div className="panel-content">
-        {getTabContent()}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ErrorDetailsPanel; 

packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js

@@ -1,293 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: ${(props) => props.theme.console.contentBg};
-  overflow: hidden;
-
-  .network-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .network-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
-    font-weight: 500;
-
-    .request-count {
-      color: ${(props) => props.theme.console.countColor};
-      font-size: 12px;
-      font-weight: 400;
-    }
-  }
-
-  .network-controls {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .network-content {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0; /* Important for proper flex behavior */
-  }
-
-  .network-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: ${(props) => props.theme.console.emptyColor};
-    text-align: center;
-    gap: 8px;
-    padding: 40px 20px;
-
-    p {
-      margin: 0;
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    span {
-      font-size: 12px;
-      opacity: 0.7;
-    }
-  }
-
-  .requests-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    min-height: 0; /* Important for proper flex behavior */
-  }
-
-  .requests-header {
-    display: grid;
-    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
-    gap: 12px;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 11px;
-    font-weight: 600;
-    color: ${(props) => props.theme.console.titleColor};
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    flex-shrink: 0;
-  }
-
-  .requests-list {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    min-height: 0; /* Important for proper scrolling */
-  }
-
-  .request-row {
-    display: grid;
-    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
-    gap: 12px;
-    padding: 6px 16px;
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    cursor: pointer;
-    transition: background-color 0.1s ease;
-    font-size: 12px;
-    align-items: center;
-
-    &:hover {
-      background: ${(props) => props.theme.console.logHoverBg};
-    }
-
-    &.selected {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
-    }
-  }
-
-  .method-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 600;
-    color: white;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 45px;
-  }
-
-  .status-badge {
-    font-weight: 600;
-    font-size: 12px;
-  }
-
-  .request-domain {
-    color: ${(props) => props.theme.console.messageColor};
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .request-path {
-    color: ${(props) => props.theme.console.messageColor};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  }
-
-  .request-time {
-    color: ${(props) => props.theme.console.timestampColor};
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
-  }
-
-  .request-duration {
-    color: ${(props) => props.theme.console.messageColor};
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
-    text-align: right;
-  }
-
-  .request-size {
-    color: ${(props) => props.theme.console.messageColor};
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
-    text-align: right;
-  }
-
-  .filter-dropdown {
-    position: relative;
-  }
-
-  .filter-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
-    background: transparent;
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 12px;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-
-    .filter-summary {
-      font-weight: 500;
-      min-width: 24px;
-      text-align: center;
-    }
-  }
-
-  .filter-dropdown-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    right: 0;
-    min-width: 200px;
-    max-width: 250px;
-    background: ${(props) => props.theme.console.dropdownBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    overflow: hidden;
-  }
-
-  .filter-dropdown-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    background: ${(props) => props.theme.console.dropdownHeaderBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 12px;
-    font-weight: 500;
-    color: ${(props) => props.theme.console.titleColor};
-  }
-
-  .filter-toggle-all {
-    background: transparent;
-    border: none;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 2px 4px;
-    border-radius: 2px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-    }
-  }
-
-  .filter-dropdown-options {
-    padding: 4px 0;
-  }
-
-  .filter-option {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.optionHoverBg};
-    }
-
-    input[type="checkbox"] {
-      margin: 0 8px 0 0;
-      width: 14px;
-      height: 14px;
-      accent-color: ${(props) => props.theme.console.checkboxColor};
-    }
-  }
-
-  .filter-option-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: 1;
-  }
-
-  .filter-option-label {
-    color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: 12px;
-    font-weight: 400;
-  }
-
-  .filter-option-count {
-    color: ${(props) => props.theme.console.optionCountColor};
-    font-size: 11px;
-    font-weight: 400;
-    margin-left: auto;
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,302 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { 
-  IconFilter,
-  IconChevronDown,
-  IconNetwork,
-} from '@tabler/icons';
-import { 
-  updateNetworkFilter, 
-  toggleAllNetworkFilters, 
-  setSelectedRequest
-} from 'providers/ReduxStore/slices/logs';
-import StyledWrapper from './StyledWrapper';
-
-const MethodBadge = ({ method }) => {
-  const getMethodColor = (method) => {
-    switch (method?.toUpperCase()) {
-      case 'GET': return '#10b981';
-      case 'POST': return '#8b5cf6';
-      case 'PUT': return '#f59e0b';
-      case 'DELETE': return '#ef4444';
-      case 'PATCH': return '#06b6d4';
-      case 'HEAD': return '#6b7280';
-      case 'OPTIONS': return '#84cc16';
-      default: return '#6b7280';
-    }
-  };
-
-  return (
-    <span 
-      className="method-badge" 
-      style={{ backgroundColor: getMethodColor(method) }}
-    >
-      {method?.toUpperCase() || 'GET'}
-    </span>
-  );
-};
-
-const StatusBadge = ({ status, statusCode }) => {
-  const getStatusColor = (code) => {
-    if (code >= 200 && code < 300) return '#10b981';
-    if (code >= 300 && code < 400) return '#f59e0b';
-    if (code >= 400 && code < 500) return '#ef4444';
-    if (code >= 500) return '#dc2626';
-    return '#6b7280';
-  };
-
-  const displayStatus = statusCode || status;
-  
-  return (
-    <span 
-      className="status-badge" 
-      style={{ color: getStatusColor(statusCode) }}
-    >
-      {displayStatus}
-    </span>
-  );
-};
-
-const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggleAll }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-
-  const allFiltersEnabled = Object.values(filters).every(f => f);
-  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div className="filter-dropdown" ref={dropdownRef}>
-      <button 
-        className="filter-dropdown-trigger"
-        onClick={() => setIsOpen(!isOpen)}
-        title="Filter requests by method"
-      >
-        <IconFilter size={16} strokeWidth={1.5} />
-        <span className="filter-summary">
-          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
-        </span>
-        <IconChevronDown size={14} strokeWidth={1.5} />
-      </button>
-      
-      {isOpen && (
-        <div className={`filter-dropdown-menu right`}>
-          <div className="filter-dropdown-header">
-            <span>Filter by Method</span>
-            <button 
-              className="filter-toggle-all"
-              onClick={() => onToggleAll(!allFiltersEnabled)}
-            >
-              {allFiltersEnabled ? 'Hide All' : 'Show All'}
-            </button>
-          </div>
-          
-          <div className="filter-dropdown-options">
-            {Object.keys(filters).map(method => (
-              <label key={method} className="filter-option">
-                <input
-                  type="checkbox"
-                  checked={filters[method]}
-                  onChange={(e) => onFilterToggle(method, e.target.checked)}
-                />
-                <div className="filter-option-content">
-                  <MethodBadge method={method} />
-                  <span className="filter-option-label">{method}</span>
-                  <span className="filter-option-count">({requestCounts[method] || 0})</span>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const RequestRow = ({ request, isSelected, onClick }) => {
-  const { data } = request;
-  const { request: req, response: res, timestamp } = data;
-  
-  const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString('en-US', { 
-      hour12: false, 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      second: '2-digit',
-      fractionalSecondDigits: 3
-    });
-  };
-
-  const formatDuration = (duration) => {
-    if (!duration) return '-';
-    if (duration < 1000) return `${Math.round(duration)}ms`;
-    return `${(duration / 1000).toFixed(2)}s`;
-  };
-
-  const formatSize = (size) => {
-    if (!size) return '-';
-    if (size < 1024) return `${size}B`;
-    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
-    return `${(size / (1024 * 1024)).toFixed(1)}MB`;
-  };
-
-  const getUrl = () => {
-    return req?.url || 'Unknown URL';
-  };
-
-  const getDomain = () => {
-    try {
-      const url = new URL(getUrl());
-      return url.hostname;
-    } catch {
-      return getUrl();
-    }
-  };
-
-  const getPath = () => {
-    try {
-      const url = new URL(getUrl());
-      return url.pathname + url.search;
-    } catch {
-      return getUrl();
-    }
-  };
-
-  return (
-    <div 
-      className={`request-row ${isSelected ? 'selected' : ''}`}
-      onClick={onClick}
-    >
-      <div className="request-method">
-        <MethodBadge method={req?.method} />
-      </div>
-      
-      <div className="request-status">
-        <StatusBadge status={res?.status} statusCode={res?.statusCode} />
-      </div>
-      
-      <div className="request-domain" title={getDomain()}>
-        {getDomain()}
-      </div>
-      
-      <div className="request-path" title={getPath()}>
-        {getPath()}
-      </div>
-      
-      <div className="request-time">
-        {formatTime(timestamp)}
-      </div>
-      
-      <div className="request-duration">
-        {formatDuration(res?.duration)}
-      </div>
-      
-      <div className="request-size">
-        {formatSize(res?.size)}
-      </div>
-    </div>
-  );
-};
-
-const NetworkTab = () => {
-  const dispatch = useDispatch();
-  const { networkFilters, selectedRequest } = useSelector(state => state.logs);
-  const collections = useSelector(state => state.collections.collections);
-
-  const allRequests = useMemo(() => {
-    const requests = [];
-    
-    collections.forEach(collection => {
-      if (collection.timeline) {
-        collection.timeline
-          .filter(entry => entry.type === 'request')
-          .forEach(entry => {
-            requests.push({
-              ...entry,
-              collectionName: collection.name,
-              collectionUid: collection.uid
-            });
-          });
-      }
-    });
-    
-    return requests.sort((a, b) => a.timestamp - b.timestamp);
-  }, [collections]);
-
-  const filteredRequests = useMemo(() => {
-    return allRequests.filter(request => {
-      const method = request.data?.request?.method?.toUpperCase() || 'GET';
-      return networkFilters[method];
-    });
-  }, [allRequests, networkFilters]);
-
-  const requestCounts = useMemo(() => {
-    return allRequests.reduce((counts, request) => {
-      const method = request.data?.request?.method?.toUpperCase() || 'GET';
-      counts[method] = (counts[method] || 0) + 1;
-      return counts;
-    }, {});
-  }, [allRequests]);
-
-  const handleFilterToggle = (method, enabled) => {
-    dispatch(updateNetworkFilter({ method, enabled }));
-  };
-
-  const handleToggleAllFilters = (enabled) => {
-    dispatch(toggleAllNetworkFilters(enabled));
-  };
-
-  const handleRequestClick = (request) => {
-    dispatch(setSelectedRequest(request));
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="network-content">
-        {filteredRequests.length === 0 ? (
-          <div className="network-empty">
-            <IconNetwork size={48} strokeWidth={1} />
-            <p>No network requests</p>
-            <span>Requests will appear here as you make API calls</span>
-          </div>
-        ) : (
-          <div className="requests-container">
-            <div className="requests-header">
-              <div>Method</div>
-              <div>Status</div>
-              <div>Domain</div>
-              <div>Path</div>
-              <div>Time</div>
-              <div className="text-right">Duration</div>
-              <div className="text-right">Size</div>
-            </div>
-            
-            <div className="requests-list">
-              {filteredRequests.map((request, index) => (
-                <RequestRow
-                  key={`${request.collectionUid}-${request.itemUid}-${request.timestamp}-${index}`}
-                  request={request}
-                  isSelected={selectedRequest?.timestamp === request.timestamp && selectedRequest?.itemUid === request.itemUid}
-                  onClick={() => handleRequestClick(request)}
-                />
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default NetworkTab; 

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

@@ -1,347 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: ${(props) => props.theme.console.contentBg};
-  border-left: 1px solid ${(props) => props.theme.console.border};
-  min-width: 400px;
-  max-width: 600px;
-  width: 40%;
-  overflow: hidden;
-
-  .panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .panel-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
-    font-weight: 500;
-
-    .request-time {
-      color: ${(props) => props.theme.console.countColor};
-      font-size: 11px;
-      font-weight: 400;
-    }
-  }
-
-  .close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-  }
-
-  .panel-tabs {
-    display: flex;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .tab-button {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 16px;
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 12px;
-    font-weight: 500;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-
-    &.active {
-      color: ${(props) => props.theme.console.checkboxColor};
-      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
-      background: ${(props) => props.theme.console.contentBg};
-    }
-  }
-
-  .panel-content {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 16px;
-    min-height: 0;
-    height: 0;
-  }
-
-  .tab-content {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    min-height: min-content;
-  }
-
-  .section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    h4 {
-      margin: 0;
-      font-size: 13px;
-      font-weight: 600;
-      color: ${(props) => props.theme.console.titleColor};
-      padding-bottom: 4px;
-      border-bottom: 1px solid ${(props) => props.theme.console.border};
-    }
-  }
-
-  .info-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .info-item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    .label {
-      font-size: 11px;
-      font-weight: 600;
-      color: ${(props) => props.theme.console.countColor};
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .value {
-      font-size: 12px;
-      color: ${(props) => props.theme.console.messageColor};
-      font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-      word-break: break-all;
-      padding: 4px 8px;
-      background: ${(props) => props.theme.console.headerBg};
-      border-radius: 4px;
-      border: 1px solid ${(props) => props.theme.console.border};
-    }
-  }
-
-  .headers-table,
-  .timeline-table {
-    overflow: auto;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.console.border};
-    max-height: 300px;
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 12px;
-      background: ${(props) => props.theme.console.headerBg};
-
-      thead {
-        background: ${(props) => props.theme.console.dropdownHeaderBg};
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        
-        td {
-          padding: 8px 12px;
-          font-weight: 600;
-          color: ${(props) => props.theme.console.titleColor};
-          text-transform: uppercase;
-          font-size: 11px;
-          letter-spacing: 0.5px;
-          border-bottom: 1px solid ${(props) => props.theme.console.border};
-        }
-      }
-
-      tbody {
-        tr {
-          border-bottom: 1px solid ${(props) => props.theme.console.border};
-
-          &:last-child {
-            border-bottom: none;
-          }
-
-          &:nth-child(odd) {
-            background: ${(props) => props.theme.console.contentBg};
-          }
-
-          &:hover {
-            background: ${(props) => props.theme.console.logHoverBg};
-          }
-        }
-
-        td {
-          padding: 8px 12px;
-          vertical-align: top;
-          word-break: break-word;
-        }
-      }
-    }
-  }
-
-  .header-name,
-  .timeline-phase {
-    color: ${(props) => props.theme.console.countColor};
-    font-weight: 600;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    min-width: 120px;
-  }
-
-  .header-value,
-  .timeline-message {
-    color: ${(props) => props.theme.console.messageColor};
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    word-break: break-all;
-  }
-
-  .timeline-duration {
-    color: ${(props) => props.theme.console.timestampColor};
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    text-align: right;
-    min-width: 80px;
-  }
-
-  .code-block {
-    background: ${(props) => props.theme.console.headerBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    padding: 12px;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
-    line-height: 1.4;
-    color: ${(props) => props.theme.console.messageColor};
-    overflow: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
-    max-height: 400px;
-    margin: 0;
-  }
-
-  .empty-state {
-    padding: 12px;
-    text-align: center;
-    color: ${(props) => props.theme.console.emptyColor};
-    font-style: italic;
-    font-size: 12px;
-    background: ${(props) => props.theme.console.headerBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-  }
-
-  .response-body-container {
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    overflow: hidden;
-    background: ${(props) => props.theme.console.headerBg};
-    height: 400px;
-    display: flex;
-    flex-direction: column;
-
-    .w-full.h-full.relative.flex {
-      height: 100% !important;
-      width: 100% !important;
-      background: ${(props) => props.theme.console.headerBg} !important;
-      display: flex !important;
-      flex-direction: column !important;
-    }
-
-    div[role="tablist"] {
-      background: ${(props) => props.theme.console.dropdownHeaderBg};
-      padding: 8px 12px;
-      border-bottom: 1px solid ${(props) => props.theme.console.border};
-      display: flex !important;
-      gap: 8px !important;
-      flex-wrap: wrap !important;
-      align-items: center !important;
-      min-height: 40px !important;
-      flex-shrink: 0 !important;
-      
-      > div {
-        color: ${(props) => props.theme.console.buttonColor};
-        font-size: 12px !important;
-        padding: 6px 12px !important;
-        border-radius: 4px;
-        transition: all 0.2s ease;
-        cursor: pointer;
-        border: 1px solid ${(props) => props.theme.console.border};
-        background: ${(props) => props.theme.console.contentBg};
-        white-space: nowrap !important;
-        min-width: auto !important;
-        height: auto !important;
-        line-height: 1.2 !important;
-        font-weight: 500 !important;
-
-        &:hover {
-          background: ${(props) => props.theme.console.buttonHoverBg};
-          color: ${(props) => props.theme.console.buttonHoverColor};
-          border-color: ${(props) => props.theme.console.buttonHoverBg};
-        }
-
-        &.active {
-          background: ${(props) => props.theme.console.checkboxColor};
-          color: white;
-          border-color: ${(props) => props.theme.console.checkboxColor};
-        }
-      }
-    }
-    .response-filter {
-      position: absolute !important;
-      bottom: 8px !important;
-      right: 8px !important;
-      left: 8px !important;
-      z-index: 10 !important;
-    }
-  }
-
-  .network-logs-container {
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    overflow: hidden;
-    background: ${(props) => props.theme.console.headerBg};
-    min-height: 200px;
-    max-height: 400px;
-
-    .network-logs {
-      background: ${(props) => props.theme.console.contentBg} !important;
-      color: ${(props) => props.theme.console.messageColor} !important;
-      height: 100% !important;
-      max-height: 400px !important;
-      
-      pre {
-        color: ${(props) => props.theme.console.messageColor} !important;
-        font-size: 11px !important;
-        line-height: 1.4 !important;
-        padding: 12px !important;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,242 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { 
-  IconX,
-  IconFileText,
-  IconArrowRight,
-  IconNetwork
-} from '@tabler/icons';
-import { clearSelectedRequest } from 'providers/ReduxStore/slices/logs';
-import QueryResult from 'components/ResponsePane/QueryResult';
-import Network from 'components/ResponsePane/Timeline/TimelineItem/Network';
-import StyledWrapper from './StyledWrapper';
-import { uuid } from 'utils/common/index';
-
-const RequestTab = ({ request, response }) => {
-  const formatHeaders = (headers) => {
-    if (!headers) return [];
-    if (Array.isArray(headers)) return headers;
-    return Object.entries(headers).map(([key, value]) => ({ name: key, value }));
-  };
-
-  const formatBody = (body) => {
-    if (!body) return 'No body';
-    if (typeof body === 'string') return body;
-    return JSON.stringify(body, null, 2);
-  };
-
-  return (
-    <div className="tab-content">
-      <div className="section">
-        <h4>General</h4>
-        <div className="info-grid">
-          <div className="info-item">
-            <span className="label">Request URL:</span>
-            <span className="value">{request?.url || 'N/A'}</span>
-          </div>
-          <div className="info-item">
-            <span className="label">Request Method:</span>
-            <span className="value">{request?.method || 'GET'}</span>
-          </div>
-        </div>
-      </div>
-
-      <div className="section">
-        <h4>Request Headers</h4>
-        {formatHeaders(request?.headers).length > 0 ? (
-          <div className="headers-table">
-            <table>
-              <thead>
-                <tr>
-                  <td>Name</td>
-                  <td>Value</td>
-                </tr>
-              </thead>
-              <tbody>
-                {formatHeaders(request.headers).map((header, index) => (
-                  <tr key={index}>
-                    <td className="header-name">{header.name}</td>
-                    <td className="header-value">{header.value}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        ) : (
-          <div className="empty-state">No headers</div>
-        )}
-      </div>
-
-      {request?.data && (
-        <div className="section">
-          <h4>Request Body</h4>
-          <pre className="code-block">{formatBody(request.data)}</pre>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const ResponseTab = ({ response, request, collection }) => {
-  const formatHeaders = (headers) => {
-    if (!headers) return [];
-    if (Array.isArray(headers)) return headers;
-    return Object.entries(headers).map(([key, value]) => ({ name: key, value }));
-  };
-
-  return (
-    <div className="tab-content">
-      <div className="section">
-        <h4>Response Headers</h4>
-        {formatHeaders(response?.headers).length > 0 ? (
-          <div className="headers-table">
-            <table>
-              <thead>
-                <tr>
-                  <td>Name</td>
-                  <td>Value</td>
-                </tr>
-              </thead>
-              <tbody>
-                {formatHeaders(response.headers).map((header, index) => (
-                  <tr key={index}>
-                    <td className="header-name">{header.name}</td>
-                    <td className="header-value">{header.value}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        ) : (
-          <div className="empty-state">No headers</div>
-        )}
-      </div>
-
-      <div className="section">
-        <h4>Response Body</h4>
-        <div className="response-body-container">
-          {response?.data || response?.dataBuffer ? (
-            <QueryResult
-              item={{ uid:  uuid()}}
-              collection={collection}
-              data={response.data}
-              dataBuffer={response.dataBuffer}
-              headers={response.headers}
-              error={response.error}
-              disableRunEventListener={true}
-            />
-          ) : (
-            <div className="empty-state">No response data</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const NetworkTab = ({ response }) => {
-  const timeline = response?.timeline || [];
-
-  return (
-    <div className="tab-content">
-      <div className="section">
-        <h4>Network Logs</h4>
-        <div className="network-logs-container">
-          {timeline.length > 0 ? (
-            <Network logs={timeline} />
-          ) : (
-            <div className="empty-state">No network logs available</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const RequestDetailsPanel = () => {
-  const dispatch = useDispatch();
-  const { selectedRequest } = useSelector(state => state.logs);
-  const collections = useSelector(state => state.collections.collections);
-  const [activeTab, setActiveTab] = useState('request');
-
-  if (!selectedRequest) return null;
-
-  const { data } = selectedRequest;
-  const { request, response } = data;
-
-  const collection = collections.find(c => c.uid === selectedRequest.collectionUid);
-
-  const handleClose = () => {
-    dispatch(clearSelectedRequest());
-  };
-
-  const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    return date.toLocaleString();
-  };
-
-  const getTabContent = () => {
-    switch (activeTab) {
-      case 'request':
-        return <RequestTab request={request} response={response} />;
-      case 'response':
-        return <ResponseTab response={response} request={request} collection={collection} />;
-      case 'network':
-        return <NetworkTab response={response} />;
-      default:
-        return <RequestTab request={request} response={response} />;
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="panel-header">
-        <div className="panel-title">
-          <IconFileText size={16} strokeWidth={1.5} />
-          <span>Request Details</span>
-          <span className="request-time">({formatTime(selectedRequest.timestamp)})</span>
-        </div>
-        
-        <button 
-          className="close-button"
-          onClick={handleClose}
-          title="Close details panel"
-        >
-          <IconX size={16} strokeWidth={1.5} />
-        </button>
-      </div>
-
-      <div className="panel-tabs">
-        <button 
-          className={`tab-button ${activeTab === 'request' ? 'active' : ''}`}
-          onClick={() => setActiveTab('request')}
-        >
-          <IconArrowRight size={14} strokeWidth={1.5} />
-          Request
-        </button>
-        
-        <button 
-          className={`tab-button ${activeTab === 'response' ? 'active' : ''}`}
-          onClick={() => setActiveTab('response')}
-        >
-          <IconFileText size={14} strokeWidth={1.5} />
-          Response
-        </button>
-        
-        <button 
-          className={`tab-button ${activeTab === 'network' ? 'active' : ''}`}
-          onClick={() => setActiveTab('network')}
-        >
-          <IconNetwork size={14} strokeWidth={1.5} />
-          Network
-        </button>
-      </div>
-
-      <div className="panel-content">
-        {getTabContent()}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default RequestDetailsPanel; 

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

@@ -1,520 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  background: ${(props) => props.theme.console.bg};
-  border-top: 1px solid ${(props) => props.theme.console.border};
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .console-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-    position: relative;
-  }
-
-  .console-tabs {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .console-tab {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 4px 4px 0 0;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-
-    &.active {
-      color: ${(props) => props.theme.console.checkboxColor};
-      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
-      background: ${(props) => props.theme.console.contentBg};
-    }
-  }
-
-  .console-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .console-content {
-    flex: 1;
-    overflow: hidden;
-    background: ${(props) => props.theme.console.contentBg};
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .tab-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .tab-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    flex-shrink: 0;
-  }
-
-  .tab-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
-    font-weight: 500;
-
-    .log-count {
-      color: ${(props) => props.theme.console.countColor};
-      font-size: 12px;
-      font-weight: 400;
-    }
-  }
-
-  .tab-controls {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .tab-content-area {
-    flex: 1;
-    overflow-y: auto;
-    background: ${(props) => props.theme.console.contentBg};
-    min-height: 0;
-  }
-
-  .network-with-details {
-    display: flex;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .network-main {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .debug-with-details {
-    display: flex;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .debug-main {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .filter-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-right: 8px;
-    padding-right: 8px;
-    border-right: 1px solid ${(props) => props.theme.console.border};
-  }
-
-  .action-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .control-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-
-    &.close-button:hover {
-      background: #e81123;
-      color: white;
-    }
-  }
-
-  .filter-dropdown {
-    position: relative;
-  }
-
-  .filter-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
-    background: transparent;
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 12px;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-      border-color: ${(props) => props.theme.console.border};
-    }
-
-    .filter-summary {
-      font-weight: 500;
-      min-width: 24px;
-      text-align: center;
-    }
-  }
-
-  .filter-dropdown-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    min-width: 200px;
-    max-width: 250px;
-    background: ${(props) => props.theme.console.dropdownBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    overflow: hidden;
-    
-    &.right {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  .filter-dropdown-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    background: ${(props) => props.theme.console.dropdownHeaderBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 12px;
-    font-weight: 500;
-    color: ${(props) => props.theme.console.titleColor};
-  }
-
-  .filter-toggle-all {
-    background: transparent;
-    border: none;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 2px 4px;
-    border-radius: 2px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-    }
-  }
-
-  .filter-dropdown-options {
-    padding: 4px 0;
-  }
-
-  .filter-option {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.optionHoverBg};
-    }
-
-    input[type="checkbox"] {
-      margin: 0 8px 0 0;
-      width: 14px;
-      height: 14px;
-      accent-color: ${(props) => props.theme.console.checkboxColor};
-    }
-  }
-
-  .filter-option-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: 1;
-  }
-
-  .filter-option-label {
-    color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: 12px;
-    font-weight: 400;
-  }
-
-  .filter-option-count {
-    color: ${(props) => props.theme.console.optionCountColor};
-    font-size: 11px;
-    font-weight: 400;
-    margin-left: auto;
-  }
-
-  .console-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: ${(props) => props.theme.console.emptyColor};
-    text-align: center;
-    gap: 8px;
-    padding: 40px 20px;
-
-    p {
-      margin: 0;
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    span {
-      font-size: 12px;
-      opacity: 0.7;
-    }
-  }
-
-  .logs-container {
-    padding: 8px 0;
-  }
-    
-  .method-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 600;
-    color: white;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 45px;
-  }
-
-  .log-entry {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 4px 16px;
-    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 12px;
-    line-height: 1.4;
-    border-left: 2px solid transparent;
-    transition: background-color 0.1s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.logHoverBg};
-    }
-
-    &.error {
-      border-left-color: #f14c4c;
-      
-      .log-level {
-        background: #f14c4c;
-        color: white;
-      }
-      
-      .log-icon {
-        color: #f14c4c;
-      }
-    }
-
-    &.warn {
-      border-left-color: #ffcc02;
-      
-      .log-level {
-        background: #ffcc02;
-        color: #000;
-      }
-      
-      .log-icon {
-        color: #ffcc02;
-      }
-    }
-
-    &.info {
-      border-left-color: #0078d4;
-      
-      .log-level {
-        background: #0078d4;
-        color: white;
-      }
-      
-      .log-icon {
-        color: #0078d4;
-      }
-    }
-
-    &.debug {
-      border-left-color: #9b59b6;
-      
-      .log-level {
-        background: #9b59b6;
-        color: white;
-      }
-      
-      .log-icon {
-        color: #9b59b6;
-      }
-    }
-
-    &.log {
-      border-left-color: #6a6a6a;
-      
-      .log-level {
-        background: #6a6a6a;
-        color: white;
-      }
-      
-      .log-icon {
-        color: #6a6a6a;
-      }
-    }
-  }
-
-  .log-meta {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-    min-width: 120px;
-  }
-
-  .log-timestamp {
-    color: ${(props) => props.theme.console.timestampColor};
-    font-size: 11px;
-    font-weight: 400;
-  }
-
-  .log-level {
-    font-size: 9px;
-    font-weight: 600;
-    padding: 2px 4px;
-    border-radius: 2px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .log-icon {
-    flex-shrink: 0;
-  }
-
-  .log-message {
-    color: ${(props) => props.theme.console.messageColor};
-    white-space: pre-wrap;
-    word-break: break-word;
-    flex: 1;
-    
-    .log-object {
-      margin: 4px 0;
-      padding: 8px;
-      background: ${(props) => props.theme.console.headerBg};
-      border-radius: 4px;
-      border: 1px solid ${(props) => props.theme.console.border};
-      
-      .react-json-view {
-        background: transparent !important;
-        
-        .object-key-val {
-          font-size: 12px !important;
-        }
-        
-        .object-key {
-          color: ${(props) => props.theme.console.messageColor} !important;
-          font-weight: 500 !important;
-        }
-        
-        .object-value {
-          color: ${(props) => props.theme.console.messageColor} !important;
-        }
-        
-        .string-value {
-          color: ${(props) => props.theme.colors?.text?.green || (props.theme.console.messageColor)} !important;
-        }
-        
-        .number-value {
-          color: ${(props) => props.theme.colors?.text?.purple || (props.theme.console.messageColor)} !important;
-        }
-        
-        .boolean-value {
-          color: ${(props) => props.theme.colors?.text?.yellow || (props.theme.console.messageColor)} !important;
-        }
-        
-        .null-value {
-          color: ${(props) => props.theme.colors?.text?.danger || (props.theme.console.messageColor)} !important;
-        }
-        
-        .object-size {
-          color: ${(props) => props.theme.console.timestampColor} !important;
-        }
-        
-        .brace, .bracket {
-          color: ${(props) => props.theme.console.messageColor} !important;
-        }
-        
-        .collapsed-icon, .expanded-icon {
-          color: ${(props) => props.theme.console.checkboxColor} !important;
-        }
-        
-        .icon-container {
-          color: ${(props) => props.theme.console.checkboxColor} !important;
-        }
-        
-        .click-to-expand, .click-to-collapse {
-          color: ${(props) => props.theme.console.checkboxColor} !important;
-        }
-      }
-    }
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,544 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import ReactJson from 'react-json-view';
-import { useTheme } from 'providers/Theme';
-import { 
-  IconX, 
-  IconTrash, 
-  IconFilter,
-  IconAlertTriangle, 
-  IconAlertCircle, 
-  IconBug,
-  IconCode,
-  IconChevronDown,
-  IconTerminal2,
-  IconNetwork,
-  IconDashboard,
-} from '@tabler/icons';
-import { 
-  closeConsole, 
-  clearLogs, 
-  updateFilter, 
-  toggleAllFilters,
-  setActiveTab,
-  clearDebugErrors,
-  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 }) => {
-  const iconProps = { size: 16, strokeWidth: 1.5 };
-  
-  switch (type) {
-    case 'error':
-      return <IconAlertCircle className="log-icon error" {...iconProps} />;
-    case 'warn':
-      return <IconAlertTriangle className="log-icon warn" {...iconProps} />;
-    case 'info':
-      return <IconAlertTriangle className="log-icon info" {...iconProps} />;
-    // case 'debug':
-    //   return <IconBug className="log-icon debug" {...iconProps} />;
-    default:
-      return <IconCode className="log-icon log" {...iconProps} />;
-  }
-};
-
-const LogTimestamp = ({ timestamp }) => {
-  const date = new Date(timestamp);
-  const time = date.toLocaleTimeString('en-US', { 
-    hour12: false, 
-    hour: '2-digit', 
-    minute: '2-digit', 
-    second: '2-digit',
-    fractionalSecondDigits: 3
-  });
-  
-  return <span className="log-timestamp">{time}</span>;
-};
-
-const LogMessage = ({ message, args }) => {
-  const { displayedTheme } = useTheme();
-  
-  const formatMessage = (msg, originalArgs) => {
-    if (originalArgs && originalArgs.length > 0) {
-      return originalArgs.map((arg, index) => {
-        if (typeof arg === 'object' && arg !== null) {
-          return (
-            <div key={index} className="log-object">
-              <ReactJson
-                src={arg}
-                theme={displayedTheme === 'light' ? 'rjv-default' : 'monokai'}
-                iconStyle="triangle"
-                indentWidth={2}
-                collapsed={1}
-                displayDataTypes={false}
-                displayObjectSize={false}
-                enableClipboard={false}
-                name={false}
-                style={{
-                  backgroundColor: 'transparent',
-                  fontSize: '12px',
-                  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
-                }}
-              />
-            </div>
-          );
-        }
-        return String(arg);
-      });
-    }
-    return msg;
-  };
-
-  const formattedMessage = formatMessage(message, args);
-  
-  return (
-    <span className="log-message">
-      {Array.isArray(formattedMessage) ? formattedMessage.map((item, index) => (
-        <span key={index}>{item} </span>
-      )) : formattedMessage}
-    </span>
-  );
-};
-
-const FilterDropdown = ({ filters, logCounts, onFilterToggle, onToggleAll }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-
-  const allFiltersEnabled = Object.values(filters).every(f => f);
-  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div className="filter-dropdown" ref={dropdownRef}>
-      <button 
-        className="filter-dropdown-trigger"
-        onClick={() => setIsOpen(!isOpen)}
-        title="Filter logs by type"
-      >
-        <IconFilter size={16} strokeWidth={1.5} />
-        <span className="filter-summary">
-          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
-        </span>
-        <IconChevronDown size={14} strokeWidth={1.5} />
-      </button>
-      
-      {isOpen && (
-        <div className={`filter-dropdown-menu right`}>
-          <div className="filter-dropdown-header">
-            <span>Filter by Type</span>
-            <button 
-              className="filter-toggle-all"
-              onClick={() => onToggleAll(!allFiltersEnabled)}
-            >
-              {allFiltersEnabled ? 'Hide All' : 'Show All'}
-            </button>
-          </div>
-          
-          <div className="filter-dropdown-options">
-            {Object.entries(filters).map(([filterType, enabled]) => (
-              <label key={filterType} className="filter-option">
-                <input
-                  type="checkbox"
-                  checked={enabled}
-                  onChange={(e) => onFilterToggle(filterType, e.target.checked)}
-                />
-                <div className="filter-option-content">
-                  <LogIcon type={filterType} />
-                  <span className="filter-option-label">{filterType}</span>
-                  <span className="filter-option-count">({logCounts[filterType] || 0})</span>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggleAll }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-
-  const allFiltersEnabled = Object.values(filters).every(f => f);
-  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
-
-  const getMethodColor = (method) => {
-    switch (method?.toUpperCase()) {
-      case 'GET': return '#10b981';
-      case 'POST': return '#8b5cf6';
-      case 'PUT': return '#f59e0b';
-      case 'DELETE': return '#ef4444';
-      case 'PATCH': return '#06b6d4';
-      case 'HEAD': return '#6b7280';
-      case 'OPTIONS': return '#84cc16';
-      default: return '#6b7280';
-    }
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div className="filter-dropdown" ref={dropdownRef}>
-      <button 
-        className="filter-dropdown-trigger"
-        onClick={() => setIsOpen(!isOpen)}
-        title="Filter requests by method"
-      >
-        <IconFilter size={16} strokeWidth={1.5} />
-        <span className="filter-summary">
-          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
-        </span>
-        <IconChevronDown size={14} strokeWidth={1.5} />
-      </button>
-      
-      {isOpen && (
-        <div className={`filter-dropdown-menu right`}>
-          <div className="filter-dropdown-header">
-            <span>Filter by Method</span>
-            <button 
-              className="filter-toggle-all"
-              onClick={() => onToggleAll(!allFiltersEnabled)}
-            >
-              {allFiltersEnabled ? 'Hide All' : 'Show All'}
-            </button>
-          </div>
-          
-          <div className="filter-dropdown-options">
-            {Object.entries(filters).map(([method, enabled]) => (
-              <label key={method} className="filter-option">
-                <input
-                  type="checkbox"
-                  checked={enabled}
-                  onChange={(e) => onFilterToggle(method, e.target.checked)}
-                />
-                <div className="filter-option-content">
-                  <span className="method-badge" style={{ backgroundColor: getMethodColor(method) }}>
-                    {method}
-                  </span>
-                  <span className="filter-option-label">{method}</span>
-                  <span className="filter-option-count">({requestCounts[method] || 0})</span>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const ConsoleTab = ({ logs, filters, logCounts, onFilterToggle, onToggleAll, onClearLogs }) => {
-  const logsEndRef = useRef(null);
-  const prevLogsCountRef = useRef(0);
-  
-  useEffect(() => {
-    // Only scroll when new logs are added, not when switching tabs
-    if (logsEndRef.current && logs.length > prevLogsCountRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: 'auto' });
-    }
-    prevLogsCountRef.current = logs.length;
-  }, [logs]);
-
-  const filteredLogs = logs.filter(log => filters[log.type]);
-
-  return (
-    <div className="tab-content">
-      <div className="tab-content-area">
-        {filteredLogs.length === 0 ? (
-          <div className="console-empty">
-            <IconTerminal2 size={48} strokeWidth={1} />
-            <p>No logs to display</p>
-            <span>Logs will appear here as your application runs</span>
-          </div>
-        ) : (
-          <div className="logs-container">
-            {filteredLogs.map((log) => (
-              <div key={log.id} className={`log-entry ${log.type}`}>
-                <div className="log-meta">
-                  <LogTimestamp timestamp={log.timestamp} />
-                  <LogIcon type={log.type} />
-                </div>
-                <LogMessage message={log.message} args={log.args} />
-              </div>
-            ))}
-            <div ref={logsEndRef} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const Console = () => {
-  const dispatch = useDispatch();
-  const { logs, filters, activeTab, selectedRequest, selectedError, networkFilters, debugErrors } = useSelector(state => state.logs);
-  const collections = useSelector(state => state.collections.collections);
-  const consoleRef = useRef(null);
-
-  const logCounts = logs.reduce((counts, log) => {
-    counts[log.type] = (counts[log.type] || 0) + 1;
-    return counts;
-  }, {});
-
-  const allRequests = React.useMemo(() => {
-    const requests = [];
-    
-    collections.forEach(collection => {
-      if (collection.timeline) {
-        collection.timeline
-          .filter(entry => entry.type === 'request')
-          .forEach(entry => {
-            requests.push({
-              ...entry,
-              collectionName: collection.name,
-              collectionUid: collection.uid
-            });
-          });
-      }
-    });
-    
-    return requests.sort((a, b) => a.timestamp - b.timestamp);
-  }, [collections]);
-
-  const filteredLogs = logs.filter(log => filters[log.type]);
-  const filteredRequests = allRequests.filter(request => {
-    const method = request.data?.request?.method?.toUpperCase() || 'GET';
-    return networkFilters[method];
-  });
-
-  const requestCounts = allRequests.reduce((counts, request) => {
-    const method = request.data?.request?.method?.toUpperCase() || 'GET';
-    counts[method] = (counts[method] || 0) + 1;
-    return counts;
-  }, {});
-
-  const handleFilterToggle = (filterType, enabled) => {
-    dispatch(updateFilter({ filterType, enabled }));
-  };
-
-  const handleNetworkFilterToggle = (method, enabled) => {
-    dispatch(updateNetworkFilter({ method, enabled }));
-  };
-
-  const handleClearLogs = () => {
-    dispatch(clearLogs());
-  };
-
-  const handleClearDebugErrors = () => {
-    dispatch(clearDebugErrors());
-  };
-
-  const handlecloseConsole = () => {
-    dispatch(closeConsole());
-  };
-
-  const handleToggleAllFilters = (enabled) => {
-    dispatch(toggleAllFilters(enabled));
-  };
-
-  const handleToggleAllNetworkFilters = (enabled) => {
-    dispatch(toggleAllNetworkFilters(enabled));
-  };
-
-  const handleTabChange = (tab) => {
-    dispatch(setActiveTab(tab));
-  };
-
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 'console':
-        return (
-          <ConsoleTab
-            logs={logs}
-            filters={filters}
-            logCounts={logCounts}
-            onFilterToggle={handleFilterToggle}
-            onToggleAll={handleToggleAllFilters}
-            onClearLogs={handleClearLogs}
-          />
-        );
-      case 'network':
-        return <NetworkTab />;
-      case 'performance':
-        return <Performance />;
-      // case 'debug':
-      //   return <DebugTab />;
-      default:
-        return (
-          <ConsoleTab
-            logs={logs}
-            filters={filters}
-            logCounts={logCounts}
-            onFilterToggle={handleFilterToggle}
-            onToggleAll={handleToggleAllFilters}
-            onClearLogs={handleClearLogs}
-          />
-        );
-    }
-  };
-
-  const renderTabControls = () => {
-    switch (activeTab) {
-      case 'console':
-        return (
-          <div className="tab-controls">
-            <div className="filter-controls">
-              <FilterDropdown
-                filters={filters}
-                logCounts={logCounts}
-                onFilterToggle={handleFilterToggle}
-                onToggleAll={handleToggleAllFilters}
-              />
-            </div>
-            <div className="action-controls">
-              <button 
-                className="control-button"
-                onClick={handleClearLogs}
-                title="Clear all logs"
-              >
-                <IconTrash size={16} strokeWidth={1.5} />
-              </button>
-            </div>
-          </div>
-        );
-      case 'network':
-        return (
-          <div className="tab-controls">
-            <div className="filter-controls">
-              <NetworkFilterDropdown
-                filters={networkFilters}
-                requestCounts={requestCounts}
-                onFilterToggle={handleNetworkFilterToggle}
-                onToggleAll={handleToggleAllNetworkFilters}
-              />
-            </div>
-          </div>
-        );
-      // case 'debug':
-      //   return (
-      //     <div className="tab-controls">
-      //       <div className="action-controls">
-      //         {debugErrors.length > 0 && (
-      //           <button 
-      //             className="control-button"
-      //             onClick={handleClearDebugErrors}
-      //             title="Clear all errors"
-      //           >
-      //             <IconTrash size={16} strokeWidth={1.5} />
-      //           </button>
-      //         )}
-      //       </div>
-      //     </div>
-      //   );
-      default:
-        return null;
-    }
-  };
-
-
-
-  return (
-    <StyledWrapper ref={consoleRef}>
-      <div 
-        className="console-resize-handle"
-      />
-      
-      <div className="console-header">
-        <div className="console-tabs">
-          <button 
-            className={`console-tab ${activeTab === 'console' ? 'active' : ''}`}
-            onClick={() => handleTabChange('console')}
-          >
-            <IconTerminal2 size={16} strokeWidth={1.5} />
-            <span>Console</span>
-          </button>
-          
-          <button 
-            className={`console-tab ${activeTab === 'network' ? 'active' : ''}`}
-            onClick={() => handleTabChange('network')}
-          >
-            <IconNetwork size={16} strokeWidth={1.5} />
-            <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')}
-          >
-            <IconBug size={16} strokeWidth={1.5} />
-            <span>Debug</span>
-          </button> */}
-        </div>
-
-        <div className="console-controls">
-          {renderTabControls()}
-          <button 
-            className="control-button close-button"
-            onClick={handlecloseConsole}
-            title="Close console"
-          >
-            <IconX size={16} strokeWidth={1.5} />
-          </button>
-        </div>
-      </div>
-
-      <div className="console-content">
-        {activeTab === 'network' && selectedRequest ? (
-          <div className="network-with-details">
-            <div className="network-main">
-              {renderTabContent()}
-            </div>
-            <RequestDetailsPanel />
-          </div>
-        ) : activeTab === 'debug' && selectedError ? (
-          <div className="debug-with-details">
-            <div className="debug-main">
-              {renderTabContent()}
-            </div>
-            <ErrorDetailsPanel />
-          </div>
-        ) : (
-          renderTabContent()
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Console; 

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

@@ -1,120 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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/Devtools/index.js

@@ -1,88 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import Console from './Console';
-
-const MIN_DEVTOOLS_HEIGHT = 150;
-const MAX_DEVTOOLS_HEIGHT = window.innerHeight * 0.7;
-const DEFAULT_DEVTOOLS_HEIGHT = 300;
-
-const Devtools = ({ mainSectionRef }) => {
-  const isDevtoolsOpen = useSelector((state) => state.logs.isConsoleOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
-  const [isResizingDevtools, setIsResizingDevtools] = useState(false);
-
-  const handleDevtoolsResizeStart = useCallback((e) => {
-    e.preventDefault();
-    setIsResizingDevtools(true);
-  }, []);
-
-  const handleDevtoolsResize = useCallback((e) => {
-    if (!isResizingDevtools || !mainSectionRef.current) return;
-    
-    const windowHeight = window.innerHeight;
-    const statusBarHeight = 22;
-    const mouseY = e.clientY;
-    
-    // Calculate new devtools height - expanding upward from bottom
-    const newHeight = windowHeight - mouseY - statusBarHeight;
-    const clampedHeight = Math.min(MAX_DEVTOOLS_HEIGHT, Math.max(MIN_DEVTOOLS_HEIGHT, newHeight));
-    setDevtoolsHeight(clampedHeight);
-
-    // Update main section height
-    if (mainSectionRef.current) {
-      mainSectionRef.current.style.height = `calc(100vh - 22px - ${clampedHeight}px)`;
-    }
-  }, [isResizingDevtools, mainSectionRef]);
-
-  const handleDevtoolsResizeEnd = useCallback(() => {
-    setIsResizingDevtools(false);
-  }, []);
-
-  useEffect(() => {
-    if (isResizingDevtools) {
-      document.addEventListener('mousemove', handleDevtoolsResize);
-      document.addEventListener('mouseup', handleDevtoolsResizeEnd);
-      document.body.style.userSelect = 'none';
-      
-      return () => {
-        document.removeEventListener('mousemove', handleDevtoolsResize);
-        document.removeEventListener('mouseup', handleDevtoolsResizeEnd);
-        document.body.style.userSelect = '';
-      };
-    }
-  }, [isResizingDevtools, handleDevtoolsResize, handleDevtoolsResizeEnd]);
-
-  // Set initial height
-  useEffect(() => {
-    if (mainSectionRef.current && isDevtoolsOpen) {
-      mainSectionRef.current.style.height = `calc(100vh - 22px - ${devtoolsHeight}px)`;
-    }
-  }, [isDevtoolsOpen, devtoolsHeight, mainSectionRef]);
-
-  if (!isDevtoolsOpen) {
-    return null;
-  }
-
-  return (
-    <>
-      <div 
-        onMouseDown={handleDevtoolsResizeStart}
-        style={{
-          height: '4px',
-          cursor: 'row-resize',
-          backgroundColor: isResizingDevtools ? '#0078d4' : 'transparent',
-          transition: 'background-color 0.2s ease',
-          zIndex: 20,
-          position: 'relative'
-        }}
-        onMouseEnter={(e) => e.target.style.backgroundColor = '#0078d4'}
-        onMouseLeave={(e) => e.target.style.backgroundColor = isResizingDevtools ? '#0078d4' : 'transparent'}
-      />
-      <div style={{ height: `${devtoolsHeight}px`, overflow: 'hidden', position: 'relative' }}>
-        <Console />
-      </div>
-    </>
-  );
-};
-
-export default Devtools; 

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

@@ -16,7 +16,6 @@ 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,12 +2,7 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-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' };
-
+const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
   return (
     <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
@@ -16,7 +11,9 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, .
         animation={false}
         arrow={false}
         onCreate={onCreate}
-        {...tippyProps}
+        interactive={true}
+        trigger="click"
+        appendTo="parent"
       >
         {icon}
       </Tippy>

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

@@ -1,74 +0,0 @@
-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;