Merge pull request #5030 from stupidly-logical/fix/gen_code_auth_header

fix: Add null check for collection root in snippet generator #5029

.github/CODEOWNERS

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

.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@v5
+      - 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@v5
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -30,12 +30,9 @@ jobs:
           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
@@ -66,8 +63,8 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -83,12 +80,6 @@ jobs:
           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: |
@@ -108,8 +99,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v5
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: v22.11.x
     - name: Install dependencies
@@ -134,7 +125,6 @@ jobs:
         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: |

.husky/pre-commit

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

contributing.md

@@ -16,7 +16,6 @@
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
 | [Dutch](docs/contributing/contributing_nl.md)
-| [فارسی](docs/contributing/contributing_fa.md)
 
 ## Let's make Bruno better, together!!
 
@@ -70,12 +69,10 @@ 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
@@ -96,22 +93,18 @@ 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

docs/contributing/contributing_fa.md

@@ -1,92 +0,0 @@
-[English](../../contributing.md)
-
-## با هم، Bruno را بهتر می‌کنیم!
-
-خوشحالم که قصد دارید Bruno را بهبود ببخشید. در ادامه قوانین و راهنماها برای راه‌اندازی Bruno روی سیستم شما آورده شده است.
-
-### فناوری‌های استفاده‌شده
-
-به فارسی برونو Bruno با استفاده از Next.js و React ساخته شده است. همچنین از Electron برای بسته‌بندی نسخه دسکتاپ (که امکان مجموعه‌های محلی را فراهم می‌کند) استفاده می‌کنیم.
-
-کتابخانه‌هایی که استفاده می‌کنیم:
-
-- CSS - Tailwind استایل
-- Codemirror - ویرایشگر کد
-- Redux - مدیریت وضعیت
-- Tabler Icons - آیکون‌ها
-- formik - فرم‌ها
-- Yup اعتبارسنجی اسکیمـا
-- axios - کلاینت درخواست
-- chokidar - پایش‌گر سیستم فایل
-
-### پیش‌نیازها
-
-شما به [نود v20.x یا اخرین نسخه پایدار](https://nodejs.org/en/) و npm 8.x نیاز دارید. در این پروژه از فضای کاری npm (npm workspaces) استفاده می‌کنیم.
-
-### شروع به کدنویسی
-
-برای راه‌اندازی محیط توسعه محلی به فایل [مستندات توسعه](docs/development_fa.md) مراجعه کنید:
-
-### ارسال Pull Request
-
-1 - لطفاً Pull Requestها (PR) را کوتاه و متمرکز نگه دارید و تنها یک هدف مشخص را دنبال کنند. </br>
-2 - لطفاً از فرمت نام‌گذاری شاخه‌ها استفاده کنید:
-
-- feature/[name]: این شاخه باید شامل یک قابلیت مشخص باشد.
-  - feature/dark-mode : مثال
-- bugfix/[name]: این شاخه باید تنها شامل رفع یک باگ مشخص باشد.
-  - bugfix/bug-1 : مثال
-
-## توسعه
-
-به فارسی برونو یا Bruno به‌صورت یک اپلیکیشن «سنگین» توسعه داده می‌شود. برای اجرا باید ابتدا Next.js را در یک پنجره ترمینال اجرا کنید و سپس اپلیکیشن Electron را در پنجره ترمینال دیگری راه‌اندازی نمایید.
-
-### نیازمندی توسعه
-
-- NodeJS v18
-
-### اجرای محلی
-
-```bash
-# از ورژن NodeJS 18 استفاده کنید
-nvm use
-
-# نصب وابستگی‌ها
-npm i --legacy-peer-deps
-
-# ساخت مستندات GraphQL
-npm run build:graphql-docs
-
-# ساخت bruno-query
-npm run build:bruno-query
-
-# اجرای اپ Next (ترمینال 1)
-npm run dev:web
-
-# اجرای اپ Electron (ترمینال 2)
-npm run dev:electron
-```
-
-### عیب‌یابی
-
-ممکن است هنگام اجرای `npm install` خطای `Unsupported platform` ببینید. برای رفع این مشکل، پوشه `node_modules` و فایل `package-lock.json` را حذف کرده و سپس دوباره `npm install` را اجرا کنید. این کار معمولاً همه پکیج‌های لازم را نصب می‌کند.
-
-```shell
-# حذف پوشه node_modules در زیردایرکتوری‌ها
-find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
-  rm -rf "$dir"
-done
-
-# حذف فایل package-lock.json در زیردایرکتوری‌ها
-find . -type f -name "package-lock.json" -delete
-```
-
-### تست‌ها
-
-```bash
-# اجرای تست‌های schema مربوط به bruno
-npm test --workspace=packages/bruno-schema
-
-# اجرای تست‌ها در همه فضاهای کاری (در صورت وجود)
-npm test --workspaces --if-present
-```

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/publishing/publishing_fa.md

@@ -1,8 +0,0 @@
-[English](../../publishing.md)
-
-### انتشار Bruno در یک پکیج منیجر جدید
-
-اگرچه کد ما متن‌باز است و همه می‌توانند از آن استفاده کنند، لطفاً قبل از انتشار Bruno در مدیر بسته‌های جدید با ما تماس بگیرید. به عنوان سازنده Bruno، علامت تجاری `Bruno` را برای این پروژه دارم و مایلم توزیع آن را مدیریت کنم. اگر دوست دارید Bruno را در یک مدیر بسته جدید ببینید، لطفاً یک issue در گیت‌هاب ثبت کنید.
-
-اگرچه بیشتر قابلیت‌های ما رایگان و متن‌باز هستند (شامل REST و GraphQL Apis)،
-ما تلاش می‌کنیم بین اصول متن‌باز و توسعه پایدار تعادل مناسبی برقرار کنیم - https://github.com/usebruno/bruno/discussions/269

docs/readme/readme_ar.md

@@ -41,6 +41,13 @@
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### الطبعة الذهبية ✨
+
+غالبية ميزاتنا مجانية ومفتوحة المصدر.
+نحن نسعى لتحقيق توازن متناغم بين [مبادئ الشفافية والاستدامة](https://github.com/usebruno/bruno/discussions/269)
+
+طلبات الشراء لـ [الطبعة الذهبية](https://www.usebruno.com/pricing) ستطلق قريبًا بسعر ~~$19~~ **$9** ! <br/>
+[اشترك هنا](https://usebruno.ck.page/4c65576bd4) لتصلك إشعارات عند الإطلاق.
 
 ### التثبيت
 
@@ -67,13 +74,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_bn.md

@@ -59,13 +59,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install 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,79 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install 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 +140,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

@@ -43,6 +43,13 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+Die meisten unserer Funktionen sind kostenlos und quelloffen.
+Wir bemühen uns um ein Gleichgewicht zwischen [Open-Source-Prinzipien und Nachhaltigkeit](https://github.com/usebruno/bruno/discussions/269)
+
+Du kannst die [Golden Edition](https://www.usebruno.com/pricing) bestellen **$19**! <br/>
+
 ### Installation
 
 Bruno ist als Download [auf unserer Website](https://www.usebruno.com/downloads) für Mac, Windows und Linux verfügbar.
@@ -71,13 +78,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_es.md

@@ -43,6 +43,13 @@ Bruno funciona sin conexión a internet. No tenemos intenciones de añadir sincr
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+La mayoría de nuestras funcionalidades son gratis y de código abierto.
+Queremos alcanzar un equilibrio en armonía entre los [principios open-source y la sostenibilidad](https://github.com/usebruno/bruno/discussions/269).
+
+¡Puedes reservar la [Golden Edition](https://www.usebruno.com/pricing) por ~~$19~~ **$9**! <br/>
+
 ### Instalación
 
 Bruno está disponible para su descarga [en nuestro sitio web](https://www.usebruno.com/downloads) para Mac, Windows y Linux.
@@ -68,13 +75,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_fa.md

@@ -1,143 +0,0 @@
-<br />
-<img src="../../assets/images/logo-transparent.png" width="80"/>
-
-### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها
-
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
-[![Commit Activity](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)
-[![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
-[![Download](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)
-| **فارسی**
-| [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 و سایر ابزارهای مشابه است.
-
-برونو مجموعه‌های شما را مستقیماً در یک پوشه روی فایل‌سیستم شما ذخیره می‌کند. ما از یک زبان نشانه‌گذاری ساده به نام Bru برای ذخیره اطلاعات درخواست‌های API استفاده می‌کنیم.
-
-شما می‌توانید برای همکاری روی مجموعه‌های 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://www.usebruno.com/downloads) برای مک لینکوس و ویندوز.
-
-همچنین می‌توانید برونو را از طریق مدیر بسته‌هایی مانند Homebrew، Chocolatey، Snap و Apt نصب کنید.
-
-```sh
-# بر روی مک از طریق brew
-brew install bruno
-
-# بر روی ویندوز از طریق Chocolatey
-choco install bruno
-
-# بر روی لینوکس از طریق Snap
-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
-```
-
-### روی پلتفرم‌های مختلف کار می‌کند 🖥️
-
-![bruno](/assets/images/run-anywhere.png) <br /><br />
-
-### همکاری از طریق گیت 👩‍💻🧑‍💻
-
-یا هر سیستم کنترل نسخه‌ای که ترجیح می‌دهید
-
-![bruno](/assets/images/version-control.png) <br /><br />
-
-### لینک‌های مهم 📌
-
-- [آخرین نسخه پایدار ما](https://github.com/usebruno/bruno/discussions/269)
-- [نقشه راه](https://github.com/usebruno/bruno/discussions/384)
-- [مستندات](https://docs.usebruno.com)
-- [وبسایت](https://www.usebruno.com)
-- [اشتراک ها](https://www.usebruno.com/pricing)
-- [دانلود](https://www.usebruno.com/downloads)
-
-### ویدیوها 🎥
-
-- [تجربه ها](https://github.com/usebruno/bruno/discussions/343)
-- [مرکز دانش](https://github.com/usebruno/bruno/discussions/386)
-- [اسکریپ مانیا](https://github.com/usebruno/bruno/discussions/385)
-
-### حمایت ❤️
-
-جوون! اگر این پروژه را دوست دارید، روی دکمه ⭐ کلیک کنید!
-
-### تجربه‌های به اشتراک گذاشته‌شده 📣
-
-اگر برونو به شما یا تیمتان کمک کرده است، لطفاً فراموش نکنید تجربه‌های خود را به اشتراک بگذارید. [تجربه‌های خود را در بحث گیت‌هاب ما به اشتراک بگذارید](https://github.com/usebruno/bruno/discussions/343).
-
-### انتشار برونو در یک پکیچ منیجر جدید
-
-لطفا چک بکنید [اینجارو](../../publishing.md) برای اطلاعات بیشتر.
-
-### مشارکت 👩‍💻🧑‍💻
-
-خوشحالم که می‌خواهید برونو را بهتر کنید. لطفا [راهنمای مشارکت را بررسی کنید](../contributing/contributing_fa.md).
-
-حتی اگر نمی‌توانید از طریق کدنویسی مشارکت کنید، در گزارش باگ‌ها و درخواست قابلیت‌های جدید که به حل نیازهای شما کمک می‌کند تردید نکنید.
-
-### نویسنده ها
-
-<div align="center">
-    <a href="https://github.com/usebruno/bruno/graphs/contributors">
-        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
-    </a>
-</div>
-
-### در ارتباط باشید 🌐
-
-[𝕏 (تویتر)](https://twitter.com/use_bruno) <br />
-[وبسایت](https://www.usebruno.com) <br />
-[دیسکورد](https://discord.com/invite/KgcZUncpjq) <br />
-[لینکدین](https://www.linkedin.com/company/usebruno)
-
-### برند
-
-**نام**
-
-به فارسی برونو - `Bruno` یک علامت تجاری ثبت‌شده متعلق به [Anoop M D](https://www.helloanoop.com/)
-
-**لوگو**
-
-لوگو توسط [OpenMoji](https://openmoji.org/library/emoji-1F436/) ساخته شده است. مجوز: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
-
-### مجوز 📄
-
-[MIT](../../license.md)

docs/readme/readme_fr.md

@@ -63,13 +63,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_hi.md

@@ -75,14 +75,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
 
 कई प्लेटफार्मों पर चलाएं 🖥️
 <br /><br />
@@ -150,3 +148,4 @@ Scriptmania
 
 लाइसेंस 📄
 MIT
+

docs/readme/readme_it.md

@@ -59,13 +59,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ja.md

@@ -43,6 +43,13 @@ Bruno はオフラインのみで利用できます。Bruno にクラウド同
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### ゴールデンエディション ✨
+
+機能のほとんどが無料で使用でき、オープンソースとなっています。
+私たちは[オープンソースの原則と長期的な維持](https://github.com/usebruno/bruno/discussions/269)の間でうまくバランスを取ろうと努力しています。
+
+[ゴールデンエディション](https://www.usebruno.com/pricing)を **19 ドル** (買い切り)で購入できます！
+
 ### インストール方法
 
 Bruno は[私たちのウェブサイト](https://www.usebruno.com/downloads)からバイナリをダウンロードできます。Mac, Windows, Linux に対応しています。
@@ -71,13 +78,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ka.md

@@ -43,6 +43,12 @@
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
+### ოქროს გამოცემა ✨
+
+მთავარი ფუნქციების უმეტესობა უფასოა და ღია წყაროა. ჩვენ ვცდილობთ ჰარმონიული ბალანსის დაცვას [ღია წყაროების პრინციპებსა და მდგრადობას შორის](https://github.com/usebruno/bruno/discussions/269)
+
+თქვენ შეგიძლიათ შეიძინოთ [ოქროს გამოცემა](https://www.usebruno.com/pricing) ერთჯერადი გადახდით **19 დოლარად**! <br/>
+
 ### ინსტალაცია
 
 ბრუნო ხელმისაწვდომია როგორც ბინარული ჩამოტვირთვა [ჩვენ的网站上](https://www.usebruno.com/downloads) Mac-ის, Windows-ისა და Linux-ისთვის.
@@ -71,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,13 +59,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_nl.md

@@ -26,6 +26,13 @@ Bruno is uitsluitend offline. Er zijn geen plannen om ooit cloud-synchronisatie
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+De meeste van onze functies zijn gratis en open source.
+We streven naar een harmonieuze balans tussen [open-source principes en duurzaamheid](https://github.com/usebruno/bruno/discussions/269).
+
+Je kunt de [Golden Edition](https://www.usebruno.com/pricing) kopen voor een eenmalige betaling van **$19**! <br/>
+
 ### Installatie
 
 Bruno is beschikbaar als binaire download [op onze website](https://www.usebruno.com/downloads) voor Mac, Windows en Linux.
@@ -54,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,13 +69,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_pt_br.md

@@ -41,6 +41,13 @@ Bruno é totalmente offline. Não há planos de adicionar sincronização em nuv
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+A grande maioria dos nossos recursos são gratuitos e de código aberto.
+Nós nos esforçamos para encontrar um equilíbrio harmônico entre [princípios de código aberto e sustentabilidade](https://github.com/usebruno/bruno/discussions/269)
+
+Você pode pré encomendar o plano [Golden Edition](https://www.usebruno.com/pricing) por ~~USD $19~~ **USD $9**! <br/>
+
 ### Instalação
 
 Bruno está disponível para download como binário [em nosso site](https://www.usebruno.com/downloads) para Mac, Windows e Linux.
@@ -69,13 +76,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ro.md

@@ -59,13 +59,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_tr.md

@@ -63,13 +63,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_zhtw.md

@@ -63,13 +63,10 @@ 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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

e2e-tests/001-sanity-tests/001-home-screen.spec.ts

@@ -2,4 +2,4 @@ import { test, expect } from '../../playwright';
 
 test('Check if the logo on top left is visible', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
-});
+});

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

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

e2e-tests/bruno-testbench/run-testbench-requests.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '../../playwright';
+
+test.describe.parallel('Run Testbench Requests', () => {
+  test('Run bruno-testbench in Developer Mode', async ({ pageWithUserData: page }) => {
+    test.setTimeout(2 * 60 * 1000);
+
+    await page.getByText('bruno-testbench').click();
+    await page.getByLabel('Developer Mode(use only if').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.locator('.environment-selector').nth(1).click();
+    await page.locator('.dropdown-item').getByText('Prod').click();
+    await page.locator('.collection-actions').hover();
+    await page.locator('.collection-actions .icon').click();
+    await page.getByText('Run', { exact: true }).click();
+    await page.getByRole('button', { name: 'Run Collection' }).click();
+    await page.getByRole('button', { name: 'Run Again' }).waitFor({ timeout: 2 * 60 * 1000 });
+
+    const result = await page.getByText('Total Requests: ').innerText();
+    const [totalRequests, passed, failed, skipped] = result
+      .match(/Total Requests: (\d+), Passed: (\d+), Failed: (\d+), Skipped: (\d+)/)
+      .slice(1);
+
+    await expect(parseInt(failed)).toBe(0);
+    await expect(parseInt(passed)).toBe(parseInt(totalRequests) - parseInt(skipped) - parseInt(failed));
+  });
+
+  test.fixme('Run bruno-testbench in Safe Mode', async ({ pageWithUserData: page }) => {
+    test.setTimeout(2 * 60 * 1000);
+
+    await page.getByText('bruno-testbench').click();
+    await page.getByLabel('Safe Mode').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.locator('.environment-selector').nth(1).click();
+    await page.locator('.dropdown-item').getByText('Prod').click();
+    await page.locator('.collection-actions').hover();
+    await page.locator('.collection-actions .icon').click();
+    await page.getByText('Run', { exact: true }).click();
+    await page.getByRole('button', { name: 'Run Collection' }).click();
+    await page.getByRole('button', { name: 'Run Again' }).waitFor({ timeout: 2 * 60 * 1000 });
+
+    const result = await page.getByText('Total Requests: ').innerText();
+    const [totalRequests, passed, failed, skipped] = result
+      .match(/Total Requests: (\d+), Passed: (\d+), Failed: (\d+), Skipped: (\d+)/)
+      .slice(1);
+
+    await expect(parseInt(failed)).toBe(0);
+    await expect(parseInt(passed)).toBe(parseInt(totalRequests) - parseInt(skipped) - parseInt(failed));
+  });
+});

e2e-tests/preferences/verify-support-links-in-preferences.spec.js

@@ -1,13 +1,13 @@
 import { test, expect } from '../../playwright';
 
 test('Should verify all support links with correct URL in preference > Support tab', async ({ page }) => {
+
    // Open Preferences
    await page.getByLabel('Open Preferences').click();
    
-   // Go to Support tab
+   // Verify Support tab
    await page.getByRole('tab', { name: 'Support' }).click();
 
-   // Verify all support links with correct URL
    const locator_twitter = page.getByRole('link', { name: 'Twitter' });
    expect(await locator_twitter.getAttribute('href')).toEqual('https://twitter.com/use_bruno');
 
@@ -23,5 +23,5 @@ test('Should verify all support links with correct URL in preference > Support t
    const locator_documentation = page.getByRole('link', { name: 'Documentation', exact: true });
    expect(await locator_documentation.getAttribute('href')).toEqual('https://docs.usebruno.com');
 
-  await page.locator('[data-test-id="modal-close-button"]').click();
-});
+  
+});

eslint.config.js

@@ -1,75 +1,11 @@
 // 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}',
-      'playwright/**/*.{js,ts}',
-      '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',
-      'packages/bruno-tests/**/*.{js,ts}'
-    ],
-    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']
-    }
-  },
+module.exports = defineConfig([
   {
     files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
-    ignores: ["**/*.config.js", "**/public/**/*"],
+    ignores: ["**/*.config.js"],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -77,8 +13,7 @@ module.exports = runESMImports().then(() => defineConfig([
         global: false,
         require: false,
         Buffer: false,
-        process: false,
-        ipcRenderer: false
+        process: false
       },
       parserOptions: {
         ecmaFeatures: {
@@ -104,161 +39,16 @@ module.exports = runESMImports().then(() => defineConfig([
     },
   },
   {
-    files: ["packages/bruno-cli/**/*.js"],
+    files: ["packages/bruno-electron/**/*.{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

@@ -14,30 +14,22 @@
     "packages/bruno-tests",
     "packages/bruno-toml",
     "packages/bruno-graphql-docs",
-    "packages/bruno-requests",
-    "packages/bruno-filestore"
+    "packages/bruno-requests"
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.51.1",
-    "@rollup/plugin-json": "^6.1.0",
-    "@stylistic/eslint-plugin": "^5.3.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
-    "@typescript-eslint/parser": "^8.39.0",
     "concurrently": "^8.2.2",
     "eslint": "^9.26.0",
-    "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
     "globals": "^16.1.0",
-    "husky": "^9.1.7",
     "jest": "^29.2.0",
     "lodash-es": "^4.17.21",
-    "nano-staged": "^0.8.0",
     "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
@@ -48,7 +40,6 @@
     "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",
@@ -57,7 +48,6 @@
     "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",
@@ -70,17 +60,9 @@
     "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:e2e": "playwright test",
     "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"
-    ]
+    "lint": "node --max_old_space_size=4096 $(npx which eslint)"
   },
   "overrides": {
     "rollup": "3.29.5",
@@ -90,4 +72,4 @@
       }
     }
   }
-}
+}

packages/bruno-app/package.json

@@ -16,7 +16,6 @@
     "@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",
@@ -27,8 +26,6 @@
     "cookie": "0.7.1",
     "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
-    "fast-fuzzy": "^1.12.0",
-    "fast-json-format": "~0.4.0",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
@@ -37,9 +34,9 @@
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "hexy": "^0.3.5",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
+    "iconv-lite": "^0.6.3",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",
@@ -70,7 +67,6 @@
     "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",
@@ -95,7 +91,7 @@
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "autoprefixer": "10.4.20",
@@ -114,10 +110,5 @@
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
-  },
-  "overrides": {
-    "httpsnippet": {
-      "form-data": "4.0.4"
-    }
   }
 }

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

@@ -4,7 +4,7 @@ import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrappe
 
 const AccordionContext = createContext();
 
-const Accordion = ({ children, defaultIndex, dataTestId }) => {
+const Accordion = ({ children, defaultIndex }) => {
   const [openIndex, setOpenIndex] = useState(defaultIndex);
 
   const toggleItem = (index) => {
@@ -13,7 +13,7 @@ const Accordion = ({ children, defaultIndex, dataTestId }) => {
 
   return (
     <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div data-testid={dataTestId}>{children}</div>
+      <div>{children}</div>
     </AccordionContext.Provider>
   );
 };

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

@@ -1,83 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { humanizeRequestBodyMode } from 'utils/collections';
-
-const DEFAULT_MODES = [
-  { key: 'multipartForm', label: 'Multipart Form', category: 'Form' },
-  { key: 'formUrlEncoded', label: 'Form URL Encoded', category: 'Form' },
-  { key: 'json', label: 'JSON', category: 'Raw' },
-  { key: 'xml', label: 'XML', category: 'Raw' },
-  { key: 'text', label: 'TEXT', category: 'Raw' },
-  { key: 'sparql', label: 'SPARQL', category: 'Raw' },
-  { key: 'file', label: 'File / Binary', category: 'Other' },
-  { key: 'none', label: 'None', category: 'Other' }
-];
-
-const BodyModeSelector = ({
-  currentMode,
-  onModeChange,
-  modes = DEFAULT_MODES,
-  disabled = false,
-  className = '',
-  wrapperClassName = '',
-  showCategories = true,
-  placement = 'bottom-end'
-}) => {
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-        {humanizeRequestBodyMode(currentMode)}
-        {' '}
-        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeSelect = (mode) => {
-    dropdownTippyRef.current.hide();
-    onModeChange(mode);
-  };
-
-  // Group modes by category for rendering
-  const groupedModes = modes.reduce((acc, mode) => {
-    const category = mode.category || 'Other';
-    if (!acc[category]) {
-      acc[category] = [];
-    }
-    acc[category].push(mode);
-    return acc;
-  }, {});
-
-  return (
-    <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'} ${wrapperClassName}`}>
-      <Dropdown
-        onCreate={onDropdownCreate}
-        icon={<Icon />}
-        placement={placement}
-        disabled={disabled}
-        className={className}
-      >
-        {Object.entries(groupedModes).map(([category, categoryModes]) => (
-          <React.Fragment key={category}>
-            {showCategories && <div className="label-item font-medium">{category}</div>}
-            {categoryModes.map((mode) => (
-              <div
-                key={mode.key}
-                className="dropdown-item"
-                onClick={() => onModeSelect(mode.key)}
-              >
-                {mode.label}
-              </div>
-            ))}
-          </React.Fragment>
-        ))}
-      </Dropdown>
-    </div>
-  );
-};
-
-export default BodyModeSelector;

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

@@ -1,79 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .checkbox-container {
-    width: 1rem;
-    height: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-
-  .checkbox-checkmark {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    visibility: ${(props) => props.checked ? 'visible' : 'hidden'};
-    pointer-events: none;
-  }
-
-  .checkbox-input {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 1rem;
-    height: 1rem;
-    border: 2px solid ${(props) => {
-      if (props.checked && props.disabled) {
-        return props.theme.colors.text.muted;
-      }
-
-      if (props.checked && !props.disabled) {
-        return props.theme.colors.text.yellow;
-      }
-
-      return props.theme.colors.text.muted;
-    }};
-    border-radius: 4px;
-    background-color: ${(props) => {
-      if (props.checked && !props.disabled) {
-        return props.theme.colors.text.yellow;
-      }
-
-      if (props.checked && props.disabled) {
-        return props.theme.colors.text.muted;
-      }
-
-      return 'transparent';
-    }};
-    cursor: pointer;
-    position: relative;
-    transition: all 0.2s ease;
-    outline: none;
-    box-shadow: none;
-    
-    &:hover:not(:disabled) {
-      opacity: 0.8;
-    }
-    
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-    
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px ${(props) => props.theme.colors.text.yellow}40;
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-import IconCheckMark from 'components/Icons/IconCheckMark';
-import { useTheme } from 'providers/Theme';
-
-const Checkbox = ({
-  checked = false,
-  disabled = false,
-  onChange,
-  className = '',
-  id,
-  name,
-  value,
-  dataTestId = 'checkbox'
-}) => {
-  const { theme } = useTheme();
-
-  const handleChange = (e) => {
-    if (!disabled && onChange) {
-      onChange(e);
-    }
-  };
-
-  return (
-    <StyledWrapper checked={checked} disabled={disabled} className={className}>
-      <div className="checkbox-container">
-        <input
-          type="checkbox"
-          id={id}
-          name={name}
-          value={value}
-          checked={checked}
-          disabled={disabled}
-          onChange={handleChange}
-          className="checkbox-input"
-          data-testid={dataTestId}
-        />
-        <IconCheckMark className="checkbox-checkmark" color={theme.examples.checkbox.color} size={14} />
-      </div>
-
-    </StyledWrapper>
-  );
-};
-
-export default Checkbox;

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

@@ -1,12 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  &.read-only {
-    div.CodeMirror .CodeMirror-cursor {
-      display: none !important;
-    }
-  }
-
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
@@ -115,17 +109,6 @@ const StyledWrapper = styled.div`
     text-decoration:unset;
   }
 
-  .cm-search-line-highlight {
-    background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
-  }
-
-  .cm-search-match {
-    background: rgba(255, 193, 7, 0.25);
-  }
-
-  .cm-search-current {
-    background: rgba(255, 193, 7, 0.4);
-  }
 `;
 
 export default StyledWrapper;

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

@@ -14,7 +14,6 @@ import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
-import CodeMirrorSearch from 'components/CodeMirrorSearch';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -38,10 +37,6 @@ export default class CodeEditor extends React.Component {
       expr: true,
       asi: true
     };
-
-    this.state = {
-      searchBarVisible: false
-    };
   }
 
   componentDidMount() {
@@ -50,7 +45,7 @@ export default class CodeEditor extends React.Component {
     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: {
@@ -88,14 +83,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 +129,6 @@ export default class CodeEditor extends React.Component {
           } else {
             this.editor.toggleComment();
           }
-        },
-        'Esc': () => {
-          if (this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: false });
-          }
         }
       },
       foldOptions: {
@@ -186,20 +186,18 @@ export default class CodeEditor extends React.Component {
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
-      editor.on('scroll', this.onScroll);
-      editor.scrollTo(null, this.props.initialScroll);
       this.addOverlay();
-
-      const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
       
       // Setup AutoComplete Helper for all modes
       const autoCompleteOptions = {
-        showHintsFor: this.props.showHintsFor,
-        getAllVariables: getAllVariablesHandler
+        showHintsFor: this.props.showHintsFor
       };
 
+      const getVariables = () => getAllVariables(this.props.collection, this.props.item);
+
       this.brunoAutoCompleteCleanup = setupAutoComplete(
         editor,
+        getVariables,
         autoCompleteOptions
       );
     }
@@ -232,32 +230,19 @@ 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);
-    }
-
-    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
-      this.editor.setOption('readOnly', this.props.readOnly);
-    }
-
     this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {
     if (this.editor) {
       this.editor.off('change', this._onEdit);
-      this.editor.off('scroll', this.onScroll);
       this.editor = null;
     }
+
+    this._unbindSearchHandler();
+    if (this.brunoAutoCompleteCleanup) {
+      this.brunoAutoCompleteCleanup();
+    }
   }
 
   render() {
@@ -266,22 +251,14 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className={`h-full w-full flex flex-col relative graphiql-container ${this.props.readOnly ? 'read-only' : ''}`}
+        className="h-full w-full flex flex-col relative graphiql-container"
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
-      >
-        <CodeMirrorSearch
-          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;
+        }}
+      />
     );
   }
 
@@ -294,8 +271,6 @@ export default class CodeEditor extends React.Component {
     this.editor.setOption('mode', 'brunovariables');
   };
 
-  onScroll = (event) => this.props.onScroll?.(event);
-
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);
@@ -305,4 +280,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/CodeMirrorSearch/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/CodeMirrorSearch/index.js

@@ -1,201 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-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 CodeMirrorSearch = ({ 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 CodeMirrorSearch;

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

@@ -6,7 +6,7 @@ import Dropdown from 'components/Dropdown';
 import { useTheme } from 'providers/Theme';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
 
@@ -16,9 +16,9 @@ const ApiKeyAuth = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const apikeyAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.apikey', {}) : get(collection, 'root.request.auth.apikey', {});
+  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const Icon = forwardRef((props, ref) => {
     return (

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

@@ -11,7 +11,7 @@ const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
+  const authMode = get(collection, 'root.request.auth.mode');
 
   const Icon = forwardRef((props, ref) => {
     return (

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

@@ -1,23 +1,19 @@
 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';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const AwsV4Auth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = collection.draft?.root ? get(collection, 'draft.root.request.auth.awsv4', {}) : get(collection, 'root.request.auth.awsv4', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
+  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleAccessKeyIdChange = (accessKeyId) => {
     dispatch(
@@ -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,23 +1,19 @@
 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';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BasicAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.basic', {}) : get(collection, 'root.request.auth.basic', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
+  const basicAuth = get(collection, 'root.request.auth.basic', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -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,23 +1,19 @@
 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';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = collection.draft?.root ? get(collection, 'draft.root.request.auth.bearer.token', '') : get(collection, 'root.request.auth.bearer.token', '');
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(bearerToken);
+  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleTokenChange = (token) => {
     dispatch(
@@ -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,23 +1,19 @@
 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';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const DigestAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.digest', {}) : get(collection, 'root.request.auth.digest', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
+  const digestAuth = get(collection, 'root.request.auth.digest', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -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,12 +1,10 @@
 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';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 
@@ -19,11 +17,9 @@ const NTLMAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const ntlmAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.ntlm', {}) : get(collection, 'root.request.auth.ntlm', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
+  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
 
   const handleUsernameChange = (username) => {
@@ -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

@@ -1,23 +1,22 @@
 import React from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
 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 }) => {
   const dispatch = useDispatch();
 
   const save = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
   };
 
-  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
   const grantType = get(request, 'auth.oauth2.grantType', {});
 
   switch (grantType) {
@@ -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;
@@ -40,7 +36,7 @@ const GrantTypeComponentMap = ({collection }) => {
 };
 
 const OAuth2 = ({ collection }) => {
-  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">

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

@@ -1,23 +1,19 @@
 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';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const WsseAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.wsse', {}) : get(collection, 'root.request.auth.wsse', {});
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
+  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUserChange = (username) => {
     dispatch(
@@ -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/Auth/index.js

@@ -8,17 +8,17 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
 
 
 const Auth = ({ collection }) => {
-  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
+  const authMode = get(collection, 'root.request.auth.mode');
   const dispatch = useDispatch();
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const getAuthView = () => {
     switch (authMode) {

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

@@ -1,30 +1,19 @@
 import React from 'react';
 import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
 import { useFormik } from 'formik';
+import { uuid } from 'utils/common';
 import * as Yup from 'yup';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
+
 import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
 import path from 'utils/common/path';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
-import SingleLineEditor from 'components/SingleLineEditor/index';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField/index';
-import { useTheme } from 'styled-components';
-import { useDispatch } from 'react-redux';
-import { updateCollectionClientCertificates } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import get from 'lodash/get';
 
-const ClientCertSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-
-  // Get client certs from draft if exists, otherwise from brunoConfig
-  const clientCertConfig = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.clientCertificates.certs', [])
-    : get(collection, 'brunoConfig.clientCertificates.certs', []);
+const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
-  const { storedTheme } = useTheme();
 
   const formik = useFormik({
     initialValues: {
@@ -73,47 +62,28 @@ const ClientCertSettings = ({ collection }) => {
           passphrase: values.passphrase
         };
       }
-
-      // Add the new cert to the existing certs in draft
-      const updatedCerts = [...clientCertConfig, relevantValues];
-      const clientCertificates = {
-        enabled: true,
-        certs: updatedCerts
-      };
-
-      dispatch(updateCollectionClientCertificates({
-        collectionUid: collection.uid,
-        clientCertificates
-      }));
-
+      onUpdate(relevantValues);
       formik.resetForm();
       resetFileInputFields();
     }
   });
 
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning, warningMessage } = isSensitive(formik.values.passphrase);
-
   const getFile = (e) => {
     const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
     if (filePath) {
-      let relativePath = path.relative(collection.pathname, filePath);
+      let relativePath = path.relative(root, filePath);
       formik.setFieldValue(e.name, relativePath);
     }
   };
 
   const resetFileInputFields = () => {
-    if (certFilePathInputRef.current) {
-      certFilePathInputRef.current.value = '';
-    }
-    if (keyFilePathInputRef.current) {
-      keyFilePathInputRef.current.value = '';
-    }
-    if (pfxFilePathInputRef.current) {
-      pfxFilePathInputRef.current.value = '';
-    }
+    certFilePathInputRef.current.value = '';
+    keyFilePathInputRef.current.value = '';
+    pfxFilePathInputRef.current.value = '';
   };
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
   const handleTypeChange = (e) => {
     formik.setFieldValue('type', e.target.value);
     if (e.target.value === 'cert') {
@@ -127,21 +97,6 @@ const ClientCertSettings = ({ collection }) => {
     }
   };
 
-  const handleRemove = (indexToRemove) => {
-    const updatedCerts = clientCertConfig.filter((cert, index) => index !== indexToRemove);
-    const clientCertificates = {
-      enabled: true,
-      certs: updatedCerts
-    };
-
-    dispatch(updateCollectionClientCertificates({
-      collectionUid: collection.uid,
-      clientCertificates
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
   return (
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
@@ -161,9 +116,9 @@ const ClientCertSettings = ({ collection }) => {
                   <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
                   {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
                 </div>
-                  <button onClick={() => handleRemove(index)} className="remove-certificate ml-2">
+                <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
                   <IconTrash size={18} strokeWidth={1.5} />
-                  </button>
+                </button>
               </div>
             </li>
           ))}
@@ -177,10 +132,7 @@ const ClientCertSettings = ({ collection }) => {
           </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"
@@ -359,27 +311,30 @@ const ClientCertSettings = ({ collection }) => {
             Passphrase
           </label>
           <div className="textbox flex flex-row items-center w-[300px] h-[1.70rem] relative">
-            <SingleLineEditor
+            <input
+              id="passphrase"
+              type={passwordVisible ? 'text' : 'password'}
+              name="passphrase"
+              className="outline-none w-64 bg-transparent"
+              onChange={formik.handleChange}
               value={formik.values.passphrase || ''}
-              theme={storedTheme}
-              onChange={(val) => formik.setFieldValue('passphrase', val)}
-              collection={collection}
-              isSecret={true}
             />
-            {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
+            <button
+              type="button"
+              className="btn btn-sm absolute right-0 l"
+              onClick={() => setPasswordVisible(!passwordVisible)}
+            >
+              {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+            </button>
           </div>
           {formik.touched.passphrase && formik.errors.passphrase ? (
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}
         </div>
-        <div className="mt-6 flex flex-row gap-2 items-center">
+        <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Add
           </button>
-          <div className="h-4 border-l border-gray-600"></div>
-          <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-            Save
-          </button>
         </div>
       </form>
     </StyledWrapper>

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

@@ -1,10 +1,10 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
-import { updateCollectionDocs, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
@@ -14,7 +14,7 @@ const Docs = ({ collection }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
-  const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
+  const docs = get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
 
   const toggleViewMode = () => {
@@ -31,22 +31,22 @@ const Docs = ({ collection }) => {
   };
 
   const handleDiscardChanges = () => {
-    dispatch((
+    dispatch(
       updateCollectionDocs({
         collectionUid: collection.uid,
         docs: docs
-      }))
+      })
     );
     toggleViewMode();
   }
 
   const onSave = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
     toggleViewMode();
   }
 
   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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+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 = collection.draft?.root ? get(collection, 'draft.root.request.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 headers = get(collection, 'root.request.headers', []);
 
   const addHeader = () => {
     dispatch(
@@ -40,7 +29,7 @@ const Headers = ({ collection }) => {
     );
   };
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {
@@ -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`
                 }

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

@@ -1,44 +1,37 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
-import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { get } from 'lodash';
+import toast from 'react-hot-toast';
+import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
-  const initialPresets = { requestType: 'http', requestUrl: '' };
+  const {
+    brunoConfig: { presets: presets = {} }
+  } = collection;
 
-  // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
-  const currentPresets = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.presets', initialPresets)
-    : get(collection, 'brunoConfig.presets', initialPresets);
-
-  // Helper to update presets config
-  const updatePresets = (updates) => {
-    const updatedPresets = { ...currentPresets, ...updates };
-    dispatch(updateCollectionPresets({
-      collectionUid: collection.uid,
-      presets: updatedPresets
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
-  const handleRequestTypeChange = (e) => {
-    updatePresets({ requestType: e.target.value });
-  };
-
-  const handleRequestUrlChange = (e) => {
-    updatePresets({ requestUrl: e.target.value });
-  };
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      requestType: presets.requestType || 'http',
+      requestUrl: presets.requestUrl || ''
+    },
+    onSubmit: (newPresets) => {
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.presets = newPresets;
+      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
+      toast.success('Collection presets updated');
+    }
+  });
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">
         These presets will be used as the default values for new requests in this collection.
       </div>
-      <div className="bruno-form">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label flex  items-center" htmlFor="enabled">
             Request Type
@@ -49,9 +42,9 @@ const PresetsSettings = ({ collection }) => {
               className="cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={handleRequestTypeChange}
+              onChange={formik.handleChange}
               value="http"
-              checked={(currentPresets.requestType || 'http') === 'http'}
+              checked={formik.values.requestType === 'http'}
             />
             <label htmlFor="http" className="ml-1 cursor-pointer select-none">
               HTTP
@@ -62,26 +55,13 @@ const PresetsSettings = ({ collection }) => {
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={handleRequestTypeChange}
+              onChange={formik.handleChange}
               value="graphql"
-              checked={(currentPresets.requestType || 'http') === 'graphql'}
+              checked={formik.values.requestType === 'graphql'}
             />
             <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={handleRequestTypeChange}
-              value="grpc"
-              checked={(currentPresets.requestType || 'http') === 'grpc'}
-            />
-            <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
-              gRPC
-            </label>
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -94,26 +74,25 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder="Request URL"
+                placeholder='Request URL'
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                onChange={handleRequestUrlChange}
-                value={currentPresets.requestUrl || ''}
+                onChange={formik.handleChange}
+                value={formik.values.requestUrl || ''}
                 style={{ width: '100%' }}
               />
             </div>
           </div>
         </div>
-
         <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <button type="submit" className="submit btn btn-sm btn-secondary">
             Save
           </button>
         </div>
-      </div>
+      </form>
     </StyledWrapper>
   );
 };

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,347 +0,0 @@
-import React, { useRef } from 'react';
-import { useDispatch } from 'react-redux';
-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';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-
-const ProtobufSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-  const {
-    protoFiles,
-    importPaths,
-    addProtoFileToCollection,
-    addImportPathToCollection,
-    toggleImportPath,
-    browseForProtoFile,
-    browseForImportDirectory,
-    removeProtoFileFromCollection,
-    removeImportPathFromCollection,
-    replaceImportPathInCollection,
-    replaceProtoFileInCollection
-  } = useProtoFileManagement(collection);
-  const fileInputRef = useRef(null);
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
-  // 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" data-testid="protobuf-proto-file-name">
-                            {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>
-
-      <div className="mt-6">
-        <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-
-    </StyledWrapper>
-  );
-};
-
-export default ProtobufSettings;

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

@@ -1,155 +1,106 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useFormik } from 'formik';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { updateCollectionProxy } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { get } from 'lodash';
-import toast from 'react-hot-toast';
 
-const ProxySettings = ({ collection }) => {
-  const dispatch = useDispatch();
-  const initialProxyConfig = { enabled: 'global', protocol: 'http', hostname: '', port: '', auth: { enabled: false, username: '', password: '' }, bypassProxy: '' };
+const ProxySettings = ({ proxyConfig, onUpdate }) => {
+  const proxySchema = Yup.object({
+    enabled: Yup.string().oneOf(['global', 'true', 'false']),
+    protocol: Yup.string().oneOf(['http', 'https', 'socks4', 'socks5']),
+    hostname: Yup.string()
+      .when('enabled', {
+        is: 'true',
+        then: (hostname) => hostname.required('Specify the hostname for your proxy.'),
+        otherwise: (hostname) => hostname.nullable()
+      })
+      .max(1024),
+    port: Yup.number()
+      .min(1)
+      .max(65535)
+      .typeError('Specify port between 1 and 65535')
+      .nullable()
+      .transform((_, val) => (val ? Number(val) : null)),
+    auth: Yup.object()
+      .when('enabled', {
+        is: 'true',
+        then: Yup.object({
+          enabled: Yup.boolean(),
+          username: Yup.string()
+            .when('enabled', {
+              is: true,
+              then: (username) => username.required('Specify username for proxy authentication.')
+            })
+            .max(1024),
+          password: Yup.string()
+            .when('enabled', {
+              is: true,
+              then: (password) => password.required('Specify password for proxy authentication.')
+            })
+            .max(1024)
+        })
+      })
+      .optional(),
+    bypassProxy: Yup.string().optional().max(1024)
+  });
 
-  // Get proxy from draft.brunoConfig if it exists, otherwise from brunoConfig
-  const currentProxyConfig = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.proxy', initialProxyConfig)
-    : get(collection, 'brunoConfig.proxy', initialProxyConfig);
+  const formik = useFormik({
+    initialValues: {
+      enabled: proxyConfig.enabled || 'global',
+      protocol: proxyConfig.protocol || 'http',
+      hostname: proxyConfig.hostname || '',
+      port: proxyConfig.port || '',
+      auth: {
+        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
+        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
+        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
+      },
+      bypassProxy: proxyConfig.bypassProxy || ''
+    },
+    validationSchema: proxySchema,
+    onSubmit: (values) => {
+      proxySchema
+        .validate(values, { abortEarly: true })
+        .then((validatedProxy) => {
+          // serialize 'enabled' to boolean
+          if (validatedProxy.enabled === 'true') {
+            validatedProxy.enabled = true;
+          } else if (validatedProxy.enabled === 'false') {
+            validatedProxy.enabled = false;
+          }
 
+          onUpdate(validatedProxy);
+        })
+        .catch((error) => {
+          let errMsg = error.message || 'Preferences validation error';
+          toast.error(errMsg);
+        });
+    }
+  });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
-  const validateHostnameOnChange = (hostname) => {
-    if (hostname && hostname.length > 1024) {
-      toast.error('Hostname must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  const validatePortOnChange = (port) => {
-    if (!port || port === '') {
-      return true; // Allow empty port during typing
-    }
-    const portNum = Number(port);
-    if (isNaN(portNum)) {
-      toast.error('Port must be a valid number');
-      return false;
-    }
-    if (portNum < 1 || portNum > 65535) {
-      toast.error('Port must be between 1 and 65535');
-      return false;
-    }
-    return true;
-  };
-
-  const validateAuthUsernameOnChange = (username) => {
-    if (username && username.length > 1024) {
-      toast.error('Username must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  const validateAuthPasswordOnChange = (password) => {
-    if (password && password.length > 1024) {
-      toast.error('Password must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  const validateBypassProxyOnChange = (bypassProxy) => {
-    if (bypassProxy && bypassProxy.length > 1024) {
-      toast.error('Bypass proxy must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  // Helper to update proxy config
-  const updateProxy = (updates) => {
-    const updatedProxy = { ...currentProxyConfig, ...updates };
-    dispatch(updateCollectionProxy({
-      collectionUid: collection.uid,
-      proxy: updatedProxy
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
-  const handleEnabledChange = (e) => {
-    const value = e.target.value;
-    // Convert string to boolean or keep as 'global'
-    const enabled = value === 'true' ? true : value === 'false' ? false : 'global';
-    updateProxy({ enabled });
-  };
-
-  const handleProtocolChange = (e) => {
-    updateProxy({ protocol: e.target.value });
-  };
-
-  const handleHostnameChange = (e) => {
-    const hostname = e.target.value;
-    if (validateHostnameOnChange(hostname)) {
-      updateProxy({ hostname });
-    }
-  };
-
-  const handlePortChange = (e) => {
-    const port = e.target.value ? Number(e.target.value) : '';
-    if (validatePortOnChange(port)) {
-      updateProxy({ port });
-    }
-  };
-
-  const handleAuthEnabledChange = (e) => {
-    updateProxy({
+  useEffect(() => {
+    formik.setValues({
+      enabled: proxyConfig.enabled === true ? 'true' : proxyConfig.enabled === false ? 'false' : 'global',
+      protocol: proxyConfig.protocol || 'http',
+      hostname: proxyConfig.hostname || '',
+      port: proxyConfig.port || '',
       auth: {
-        ...currentProxyConfig.auth,
-        enabled: e.target.checked
-      }
+        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
+        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
+        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
+      },
+      bypassProxy: proxyConfig.bypassProxy || ''
     });
-  };
-
-  const handleAuthUsernameChange = (e) => {
-    const username = e.target.value;
-    if (validateAuthUsernameOnChange(username)) {
-      updateProxy({
-        auth: {
-          ...currentProxyConfig.auth,
-          username
-        }
-      });
-    }
-  };
-
-  const handleAuthPasswordChange = (e) => {
-    const password = e.target.value;
-    if (validateAuthPasswordOnChange(password)) {
-      updateProxy({
-        auth: {
-          ...currentProxyConfig.auth,
-          password
-        }
-      });
-    }
-  };
-
-  const handleBypassProxyChange = (e) => {
-    const bypassProxy = e.target.value;
-    if (validateBypassProxyOnChange(bypassProxy)) {
-      updateProxy({ bypassProxy });
-    }
-  };
-
-  const enabledValue = currentProxyConfig.enabled === true ? 'true' : currentProxyConfig.enabled === false ? 'false' : 'global';
+  }, [proxyConfig]);
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">Configure proxy settings for this collection.</div>
-      <div className="bruno-form">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
             Config
@@ -169,8 +120,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="enabled"
                 value="global"
-                checked={enabledValue === 'global'}
-                onChange={handleEnabledChange}
+                checked={formik.values.enabled === 'global'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               global
@@ -179,9 +130,9 @@ const ProxySettings = ({ collection }) => {
               <input
                 type="radio"
                 name="enabled"
-                value="true"
-                checked={enabledValue === 'true'}
-                onChange={handleEnabledChange}
+                value={'true'}
+                checked={formik.values.enabled === 'true'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               enabled
@@ -190,9 +141,9 @@ const ProxySettings = ({ collection }) => {
               <input
                 type="radio"
                 name="enabled"
-                value="false"
-                checked={enabledValue === 'false'}
-                onChange={handleEnabledChange}
+                value={'false'}
+                checked={formik.values.enabled === 'false'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               disabled
@@ -209,8 +160,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="http"
-                checked={(currentProxyConfig.protocol || 'http') === 'http'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'http'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               HTTP
@@ -220,8 +171,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="https"
-                checked={(currentProxyConfig.protocol || 'http') === 'https'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'https'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               HTTPS
@@ -231,8 +182,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="socks4"
-                checked={(currentProxyConfig.protocol || 'http') === 'socks4'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'socks4'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               SOCKS4
@@ -242,8 +193,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="socks5"
-                checked={(currentProxyConfig.protocol || 'http') === 'socks5'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'socks5'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               SOCKS5
@@ -263,9 +214,12 @@ const ProxySettings = ({ collection }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={handleHostnameChange}
-            value={currentProxyConfig.hostname || ''}
+            onChange={formik.handleChange}
+            value={formik.values.hostname || ''}
           />
+          {formik.touched.hostname && formik.errors.hostname ? (
+            <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
+          ) : null}
         </div>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="port">
@@ -280,9 +234,12 @@ const ProxySettings = ({ collection }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={handlePortChange}
-            value={currentProxyConfig.port || ''}
+            onChange={formik.handleChange}
+            value={formik.values.port}
           />
+          {formik.touched.port && formik.errors.port ? (
+            <div className="ml-3 text-red-500">{formik.errors.port}</div>
+          ) : null}
         </div>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="auth.enabled">
@@ -291,8 +248,8 @@ const ProxySettings = ({ collection }) => {
           <input
             type="checkbox"
             name="auth.enabled"
-            checked={currentProxyConfig.auth?.enabled || false}
-            onChange={handleAuthEnabledChange}
+            checked={formik.values.auth.enabled}
+            onChange={formik.handleChange}
           />
         </div>
         <div>
@@ -309,9 +266,12 @@ const ProxySettings = ({ collection }) => {
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck="false"
-              value={currentProxyConfig.auth?.username || ''}
-              onChange={handleAuthUsernameChange}
+              value={formik.values.auth.username}
+              onChange={formik.handleChange}
             />
+            {formik.touched.auth?.username && formik.errors.auth?.username ? (
+              <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
+            ) : null}
           </div>
           <div className="mb-3 flex items-center">
             <label className="settings-label" htmlFor="auth.password">
@@ -327,8 +287,8 @@ const ProxySettings = ({ collection }) => {
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                value={currentProxyConfig.auth?.password || ''}
-                onChange={handleAuthPasswordChange}
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
               />
               <button
                 type="button"
@@ -338,6 +298,9 @@ const ProxySettings = ({ collection }) => {
                 {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
               </button>
             </div>
+            {formik.touched.auth?.password && formik.errors.auth?.password ? (
+              <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
+            ) : null}
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -353,16 +316,19 @@ const ProxySettings = ({ collection }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={handleBypassProxyChange}
-            value={currentProxyConfig.bypassProxy || ''}
+            onChange={formik.handleChange}
+            value={formik.values.bypassProxy || ''}
           />
+          {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
+            <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
+          ) : null}
         </div>
         <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <button type="submit" className="submit btn btn-sm btn-secondary">
             Save
           </button>
         </div>
-      </div>
+      </form>
     </StyledWrapper>
   );
 };

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

@@ -1,37 +1,20 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StyledWrapper from './StyledWrapper';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
-  const preRequestEditorRef = useRef(null);
-  const postResponseEditorRef = useRef(null);
-  const requestScript = collection.draft?.root ? get(collection, 'draft.root.request.script.req', '') : get(collection, 'root.request.script.req', '');
-  const responseScript = collection.draft?.root ? get(collection, 'draft.root.request.script.res', '') : get(collection, 'root.request.script.res', '');
+  const requestScript = get(collection, 'root.request.script.req', '');
+  const responseScript = get(collection, 'root.request.script.res', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
-  // Refresh CodeMirror when tab becomes visible
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
-        preRequestEditorRef.current.editor.refresh();
-      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
-        postResponseEditorRef.current.editor.refresh();
-      }
-    }, 0);
-
-    return () => clearTimeout(timer);
-  }, [activeTab]);
-
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateCollectionRequestScript({
@@ -51,51 +34,42 @@ const Script = ({ collection }) => {
   };
 
   const handleSave = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
   };
 
   return (
-    <StyledWrapper className="w-full flex flex-col h-full pt-4">
+    <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">
         Write pre and post-request scripts that will run before and after any request in this collection is sent.
       </div>
-
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="pre-request" className="mt-2">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-          />
-        </TabsContent>
-
-        <TabsContent value="post-response" className="mt-2">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-          />
-        </TabsContent>
-      </Tabs>
+      <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
+        <CodeEditor
+          collection={collection}
+          value={requestScript || ''}
+          theme={displayedTheme}
+          onEdit={onRequestScriptEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'bru']}
+        />
+      </div>
+      <div className="flex-1 mt-6">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <CodeEditor
+          collection={collection}
+          value={responseScript || ''}
+          theme={displayedTheme}
+          onEdit={onResponseScriptEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
+        />
+      </div>
 
       <div className="mt-12">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -3,13 +3,13 @@ import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
-  const tests = collection.draft?.root ? get(collection, 'draft.root.request.tests', '') : get(collection, 'root.request.tests', '');
+  const tests = get(collection, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
@@ -23,7 +23,7 @@ const Tests = ({ collection }) => {
     );
   };
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col h-full">

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

@@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
@@ -28,7 +28,7 @@ const VarsTable = ({ collection, vars, varType }) => {
     );
   };
 
-  const onSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
   const handleVarChange = (e, v, type) => {
     const _var = cloneDeep(v);
     switch (type) {

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

@@ -2,14 +2,14 @@ import React from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
-  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
-  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const requestVars = get(collection, 'root.request.vars.req', []);
+  const responseVars = get(collection, 'root.request.vars.res', []);
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
 import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import toast from 'react-hot-toast';
+import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
 import { updateSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
 import ProxySettings from './ProxySettings';
@@ -10,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;
@@ -28,26 +38,61 @@ const CollectionSettings = ({ collection }) => {
     );
   };
 
-  const root = collection?.draft?.root || collection?.root;
+  const root = collection?.root;
   const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 
-  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
+  const headers = get(collection, 'root.request.headers', []);
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
-  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
-  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
+  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 = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {})).mode || 'none';
+  const authMode = get(collection, 'root.request.auth', {}).mode || 'none';
 
-  const presets = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.presets', []) : get(collection, 'brunoConfig.presets', []);
-  const hasPresets = presets && presets.requestUrl !== '';
+  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
+  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
 
-  const proxyConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.proxy', {}) : get(collection, 'brunoConfig.proxy', {});
-  const proxyEnabled = proxyConfig.hostname ? true : false;
-  const clientCertConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.clientCertificates.certs', []) : get(collection, 'brunoConfig.clientCertificates.certs', []);
-  const protobufConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.protobuf', {}) : get(collection, 'brunoConfig.protobuf', {});
+
+  const onProxySettingsUpdate = (config) => {
+    const brunoConfig = cloneDeep(collection.brunoConfig);
+    brunoConfig.proxy = config;
+    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
+      .then(() => {
+        toast.success('Collection settings updated successfully.');
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
+  };
+
+  const onClientCertSettingsUpdate = (config) => {
+    const brunoConfig = cloneDeep(collection.brunoConfig);
+    if (!brunoConfig.clientCertificates) {
+      brunoConfig.clientCertificates = {
+        enabled: true,
+        certs: [config]
+      };
+    } else {
+      brunoConfig.clientCertificates.certs.push(config);
+    }
+    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
+      .then(() => {
+        toast.success('Collection settings updated successfully');
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
+  };
+
+  const onClientCertSettingsRemove = (config) => {
+    const brunoConfig = cloneDeep(collection.brunoConfig);
+    brunoConfig.clientCertificates.certs = brunoConfig.clientCertificates.certs.filter(
+      (item) => item.domain != config.domain
+    );
+    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
+      .then(() => {
+        toast.success('Collection settings updated successfully');
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
+  };
 
   const getTabPanel = (tab) => {
     switch (tab) {
@@ -73,18 +118,18 @@ const CollectionSettings = ({ collection }) => {
         return <Presets collection={collection} />;
       }
       case 'proxy': {
-        return <ProxySettings collection={collection} />;
+        return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
       }
       case 'clientCert': {
         return (
           <ClientCertSettings
-            collection={collection}
+            root={collection.pathname}
+            clientCertConfig={clientCertConfig}
+            onUpdate={onClientCertSettingsUpdate}
+            onRemove={onClientCertSettingsRemove}
           />
         );
       }
-      case 'protobuf': {
-        return <Protobuf collection={collection} />;
-      }
     }
   };
 
@@ -95,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')}>
@@ -110,34 +155,29 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {authMode !== 'none' && <StatusDot />}
+          {authMode !== '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,131 +0,0 @@
-import React, { useEffect } 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);
-
-  useEffect(() => {
-    const { ipcRenderer } = window;
-
-    if (!ipcRenderer) {
-      console.warn('IPC Renderer not available');
-      return;
-    }
-
-    const startMonitoring = async () => {
-      try {
-        await ipcRenderer.invoke('renderer:start-system-monitoring', 2000);
-      } catch (error) {
-        console.error('Failed to start system monitoring:', error);
-      }
-    };
-
-    const stopMonitoring = async () => {
-      try {
-        await ipcRenderer.invoke('renderer:stop-system-monitoring');
-      } catch (error) {
-        console.error('Failed to stop system monitoring:', error);
-      }
-    };
-
-    startMonitoring();
-
-    return () => {
-      stopMonitoring();
-    };
-  }, []);
-
-  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>