fix: update preferences saving method in preferences utility (#5617)

* fix: update preferences saving method in preferences utility

* fix: make markAsLaunched asynchronous and improve error handling in onboarding process

* fix: lint errors

---------

Co-authored-by: Bijin Bruno <bijin@usebruno.com>

.github/CODEOWNERS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.github/workflows/ssl-tests.yml

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

.github/workflows/tests.yml

@@ -14,7 +14,7 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -30,6 +30,7 @@ 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
@@ -64,7 +65,7 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -80,6 +81,12 @@ 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: |
@@ -100,7 +107,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: v22.11.x
     - name: Install dependencies
@@ -125,6 +132,7 @@ 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: |

contributing.md

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

docs/playwright-testing-guide.md

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

docs/readme/readme_ar.md

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

docs/readme/readme_bn.md

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

docs/readme/readme_cn.md

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

docs/readme/readme_de.md

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

docs/readme/readme_es.md

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

docs/readme/readme_fr.md

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

docs/readme/readme_hi.md

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

docs/readme/readme_it.md

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

docs/readme/readme_ja.md

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

docs/readme/readme_ka.md

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

docs/readme/readme_kr.md

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

docs/readme/readme_nl.md

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

docs/readme/readme_pl.md

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

docs/readme/readme_pt_br.md

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

docs/readme/readme_ro.md

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

docs/readme/readme_tr.md

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

docs/readme/readme_zhtw.md

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

eslint.config.js

@@ -5,7 +5,7 @@ const globals = require("globals");
 module.exports = defineConfig([
   {
     files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
-    ignores: ["**/*.config.js"],
+    ignores: ["**/*.config.js", "**/public/**/*"],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -13,7 +13,8 @@ module.exports = defineConfig([
         global: false,
         require: false,
         Buffer: false,
-        process: false
+        process: false,
+        ipcRenderer: false
       },
       parserOptions: {
         ecmaFeatures: {
@@ -39,8 +40,60 @@ module.exports = defineConfig([
     },
   },
   {
-    files: ["packages/bruno-electron/**/*.{js}"],
+    files: ["packages/bruno-cli/**/*.js"],
     ignores: ["**/*.config.js"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest"
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-common/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-common/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-converters/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-electron/**/*.js"],
+    ignores: ["**/*.config.js", "**/web/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -50,5 +103,98 @@ module.exports = defineConfig([
     rules: {
       "no-undef": "error",
     },
-  }
+  },
+  {
+    files: ["packages/bruno-filestore/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-filestore/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-js/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+        window: false,
+        self: false,
+        HTMLElement: false,
+        typeDetectGlobalObject: false
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-lang/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-requests/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-requests/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-requests/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
 ]);

package.json

@@ -14,16 +14,19 @@
     "packages/bruno-tests",
     "packages/bruno-toml",
     "packages/bruno-graphql-docs",
-    "packages/bruno-requests"
+    "packages/bruno-requests",
+    "packages/bruno-filestore"
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.51.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@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",
     "fs-extra": "^11.1.1",
@@ -40,6 +43,7 @@
     "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",
@@ -48,6 +52,7 @@
     "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",
@@ -60,7 +65,8 @@
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "watch:common": "npm run watch --workspace=packages/bruno-common",
     "test:codegen": "node playwright/codegen.ts",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --project=default",
+    "test:e2e:ssl": "playwright test --project=ssl",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
     "lint": "node --max_old_space_size=4096 $(npx which eslint)"
   },
@@ -72,4 +78,4 @@
       }
     }
   }
-}
+}

packages/bruno-app/package.json

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

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

@@ -186,18 +186,20 @@ 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
+        showHintsFor: this.props.showHintsFor,
+        getAllVariables: getAllVariablesHandler
       };
 
-      const getVariables = () => getAllVariables(this.props.collection, this.props.item);
-
       this.brunoAutoCompleteCleanup = setupAutoComplete(
         editor,
-        getVariables,
         autoCompleteOptions
       );
     }
@@ -230,12 +232,18 @@ 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);
+    }
+
     this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {
     if (this.editor) {
       this.editor.off('change', this._onEdit);
+      this.editor.off('scroll', this.onScroll);
       this.editor = null;
     }
 
@@ -271,6 +279,8 @@ export default class CodeEditor extends React.Component {
     this.editor.setOption('mode', 'brunovariables');
   };
 
+  onScroll = (event) => this.props.onScroll?.(event);
+
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);

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

@@ -1,4 +1,6 @@
 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';
@@ -12,6 +14,8 @@ const AwsV4Auth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -131,7 +135,7 @@ const AwsV4Auth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <div className="single-line-editor-wrapper mb-2 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -140,6 +144,7 @@ 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,4 +1,6 @@
 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';
@@ -12,6 +14,8 @@ const BasicAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const basicAuth = get(collection, 'root.request.auth.basic', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -55,7 +59,7 @@ const BasicAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
           theme={storedTheme}
@@ -64,6 +68,7 @@ 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,4 +1,6 @@
 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';
@@ -12,6 +14,8 @@ const BearerAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(bearerToken);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -30,7 +34,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">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
           theme={storedTheme}
@@ -39,6 +43,7 @@ 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,4 +1,6 @@
 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';
@@ -12,6 +14,8 @@ const DigestAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const digestAuth = get(collection, 'root.request.auth.digest', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -55,7 +59,7 @@ const DigestAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
           theme={storedTheme}
@@ -64,6 +68,7 @@ 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,4 +1,6 @@
 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';
@@ -18,6 +20,8 @@ const NTLMAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -82,7 +86,7 @@ const NTLMAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -91,6 +95,7 @@ const NTLMAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Domain</label>

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

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

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

@@ -1,4 +1,6 @@
 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';
@@ -12,6 +14,8 @@ const WsseAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const wsseAuth = get(collection, 'root.request.auth.wsse', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -55,14 +59,16 @@ const WsseAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
+          isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

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

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

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

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

@@ -46,7 +46,7 @@ const Docs = ({ collection }) => {
   }
 
   return (
-    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
+    <StyledWrapper className="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/Grpc/StyledWrapper.js

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

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

@@ -0,0 +1,263 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useFormik } from 'formik';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import toast from 'react-hot-toast';
+import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash, IconFile, IconFileImport, IconAlertCircle } from '@tabler/icons';
+import { getRelativePath, getBasename, getDirPath } from 'utils/common/path';
+import { Tooltip } from 'react-tooltip';
+import { existsSync, resolvePath } from '../../../utils/filesystem';
+
+const GrpcSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const {
+    brunoConfig: { grpc: grpcConfig = {} }
+  } = collection;
+
+  const fileInputRef = useRef(null);
+  const [protoFileValidity, setProtoFileValidity] = useState({});
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      protoFiles: grpcConfig.protoFiles || []
+    },
+    onSubmit: (newGrpcConfig) => {
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.grpc = newGrpcConfig;
+      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
+      toast.success('gRPC settings updated');
+    }
+  });
+
+  // Get file path using the ipcRenderer
+  const getProtoFile = (event) => {
+    const files = event?.files;
+    if (files && files.length > 0) {
+      const newProtoFiles = [...formik.values.protoFiles];
+      
+      for (let i = 0; i < files.length; i++) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[i]);
+        if (filePath) {
+          const relativePath = getRelativePath(filePath, collection.pathname);
+          const protoFileObj = {
+            path: relativePath,
+            type: 'file'
+          };
+          
+          // Check if this path already exists
+          const exists = newProtoFiles.some(pf => pf.path === protoFileObj.path);
+          if (!exists) {
+            newProtoFiles.push(protoFileObj);
+          }
+        }
+      }
+      
+      formik.setFieldValue('protoFiles', newProtoFiles);
+      // Reset the file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  // Handler for removing a proto file
+  const handleRemoveProtoFile = (index) => {
+    const updatedProtoFiles = [...formik.values.protoFiles];
+    updatedProtoFiles.splice(index, 1);
+    formik.setFieldValue('protoFiles', updatedProtoFiles);
+  };
+
+  // Handle the browse button click
+  const handleBrowseClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // Check if a proto file path is valid
+  const isProtoFileValid = async (protoFile) => {
+    try {
+      const absolutePath = await resolvePath(protoFile.path, collection.pathname);
+      return await existsSync(absolutePath);
+    } catch (error) {
+      return false;
+    }
+  };
+
+  // Validate all proto files and update state
+  useEffect(() => {
+    const validateProtoFiles = async () => {
+      const validityMap = {};
+      for (const file of formik.values.protoFiles) {
+        validityMap[file.path] = await isProtoFileValid(file);
+      }
+      setProtoFileValidity(validityMap);
+    };
+
+    validateProtoFiles();
+  }, [formik.values.protoFiles, collection.pathname]);
+
+  // Handle replacing an invalid proto file
+  const handleReplaceProtoFile = (index) => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+      // Store the index to replace after file selection
+      fileInputRef.current.dataset.replaceIndex = index;
+    }
+  };
+
+  // Handle file input change
+  const handleFileInputChange = (e) => {
+    const replaceIndex = e.target.dataset.replaceIndex;
+    if (replaceIndex !== undefined) {
+      // Handle replacement
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[0]);
+        if (filePath) {
+          const relativePath = getRelativePath(filePath, collection.pathname);
+          const updatedProtoFiles = [...formik.values.protoFiles];
+          updatedProtoFiles[replaceIndex] = {
+            path: relativePath,
+            type: 'file'
+          };
+          formik.setFieldValue('protoFiles', updatedProtoFiles);
+        }
+      }
+      delete e.target.dataset.replaceIndex;
+    } else {
+      getProtoFile(e.target);
+    }
+  };
+
+  return (
+    <StyledWrapper className="h-full w-full">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-3">
+          <label className="font-semibold text-sm mb-3 flex items-center" htmlFor="protoFiles">
+            Add Proto Files
+            <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 className="flex flex-col">
+            {/* Hidden file input for file selection */}
+            <input
+              type="file"
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              accept=".proto"
+              multiple
+              onChange={handleFileInputChange}
+            />
+            
+            <div className="flex flex-col gap-3">
+              {/* File selection options */}
+              <div className="flex flex-col space-y-3">
+                <div className="flex items-center">
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-secondary flex items-center"
+                    onClick={handleBrowseClick}
+                  >
+                    <IconFileImport size={16} strokeWidth={1.5} className="mr-1" />
+                    Browse for proto files
+                  </button>
+                </div>
+              </div>
+              
+              {/* Divider */}
+              <div className="border-t border-neutral-600 my-2"></div>
+              
+              {/* List of added proto files */}
+              <div>
+                <div className="text-sm font-semibold mb-2 flex items-center">
+                  <IconFile size={16} strokeWidth={1.5} className="mr-1" />
+                  Added Proto Files ({formik.values.protoFiles.length})
+                </div>
+                
+                {formik.values.protoFiles.length === 0 ? (
+                  <div className="text-neutral-500 text-sm italic">No proto files added yet</div>
+                ) : (
+                  <>
+                    {formik.values.protoFiles.some(file => !protoFileValidity[file.path]) && (
+                      <div className="text-xs text-red-500 mb-2 flex items-center bg-red-50 dark:bg-red-900/20 p-2 rounded">
+                        <IconAlertCircle size={14} className="mr-1" />
+                        Some proto files cannot be found at their specified paths. Use the "Replace" option to update their locations.
+                      </div>
+                    )}
+                    <ul className="mt-4">
+                      {formik.values.protoFiles.map((file, index) => {
+                        const isValid = protoFileValidity[file.path];
+                        return (
+                          <li key={index} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                            <div className="flex items-center w-full justify-between">
+                              <div className="flex w-full items-center">
+                                <IconFile className="mr-2" size={18} strokeWidth={1.5} />
+                                <div
+                                  className="overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px] text-sm"
+                                  title={file.path}
+                                >
+                                  {getBasename(file.path)}
+                                  <span className="text-xs text-neutral-500 ml-2">
+                                    {getDirPath(file.path)}
+                                  </span>
+                                </div>
+                              </div>
+                              <div className="flex w-full items-center justify-end">
+                                {!isValid && (
+                                  <div className="flex items-center mr-2">
+                                    <IconAlertCircle
+                                      size={16}
+                                      className="text-red-500"
+                                      title="Proto file not found. Click to replace."
+                                    />
+                                    <button
+                                      type="button"
+                                      className="text-xs text-red-500 ml-1 hover:underline"
+                                      onClick={() => handleReplaceProtoFile(index)}
+                                    >
+                                      Replace
+                                    </button>
+                                  </div>
+                                )}
+                                <button
+                                  type="button"
+                                  className="remove-certificate ml-2"
+                                  onClick={() => handleRemoveProtoFile(index)}
+                                  title="Remove file"
+                                >
+                                  <IconTrash size={18} strokeWidth={1.5} />
+                                </button>
+                              </div>
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default GrpcSettings; 

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

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

packages/bruno-app/src/components/CollectionSettings/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 font-mono">
+              <div className="mt-1 text-sm text-muted">
                 {
                   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,13 +1,15 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
 import cloneDeep from 'lodash/cloneDeep';
+import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
+  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const {
     brunoConfig: { presets: presets = {} }
   } = collection;
@@ -15,10 +17,15 @@ const PresetsSettings = ({ collection }) => {
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      requestType: presets.requestType || 'http',
+      requestType: presets.requestType === 'grpc' && !isGrpcEnabled ? 'http' : presets.requestType || 'http',
       requestUrl: presets.requestUrl || ''
     },
     onSubmit: (newPresets) => {
+      // If gRPC is disabled but the preset is set to grpc, change it to http
+      if (!isGrpcEnabled && newPresets.requestType === 'grpc') {
+        newPresets.requestType = 'http';
+      }
+
       const brunoConfig = cloneDeep(collection.brunoConfig);
       brunoConfig.presets = newPresets;
       dispatch(updateBrunoConfig(brunoConfig, collection.uid));
@@ -62,6 +69,23 @@ const PresetsSettings = ({ collection }) => {
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
             </label>
+
+            {isGrpcEnabled && (
+              <>
+                <input
+                  id="grpc"
+                  className="ml-4 cursor-pointer"
+                  type="radio"
+                  name="requestType"
+                  onChange={formik.handleChange}
+                  value="grpc"
+                  checked={formik.values.requestType === 'grpc'}
+                />
+                <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
+                  gRPC
+                </label>
+              </>
+            )}
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -74,7 +98,7 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder='Request URL'
+                placeholder="Request URL"
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
@@ -87,6 +111,7 @@ const PresetsSettings = ({ collection }) => {
             </div>
           </div>
         </div>
+
         <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save

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

@@ -13,21 +13,16 @@ import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
 import Presets from './Presets';
+import Grpc from './Grpc';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
-import DotIcon from 'components/Icons/Dot';
+import StatusDot from 'components/StatusDot';
 import Overview from './Overview/index';
-
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
+import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
+  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const tab = collection.settingsSelectedTab;
   const setTab = (tab) => {
     dispatch(
@@ -53,7 +48,7 @@ const CollectionSettings = ({ collection }) => {
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-
+  const grpcConfig = get(collection, 'brunoConfig.grpc', {});
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -130,6 +125,9 @@ const CollectionSettings = ({ collection }) => {
           />
         );
       }
+      case 'grpc': {
+        return <Grpc collection={collection} />;
+      }
     }
   };
 
@@ -140,9 +138,9 @@ const CollectionSettings = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-hidden">
       <div className="flex flex-wrap items-center tabs" role="tablist">
-      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+        <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
           Overview
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
@@ -155,29 +153,35 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {authMode !== 'none' && <ContentIndicator />}
+          {authMode !== 'none' && <StatusDot />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
-          {hasScripts && <ContentIndicator />}
+          {hasScripts && <StatusDot />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
-          {hasTests && <ContentIndicator />}
+          {hasTests && <StatusDot />}
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0  && <ContentIndicator />}
+          {Object.keys(proxyConfig).length > 0 && <StatusDot />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
-          {clientCertConfig.length > 0 && <ContentIndicator />}
+          {clientCertConfig.length > 0 && <StatusDot />}
         </div>
+        {isGrpcEnabled && (
+          <div className={getTabClassname('grpc')} role="tab" onClick={() => setTab('grpc')}>
+            gRPC
+            {grpcConfig.protoFiles && grpcConfig.protoFiles.length > 0 && <StatusDot />}
+          </div>
+        )}
       </div>
-      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
+      <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,531 @@
+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
+} 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 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 '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 === '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/index.js

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

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent, ...props }) => {
   return (
     <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
@@ -14,6 +14,7 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
         interactive={true}
         trigger="click"
         appendTo="parent"
+        {...props}
       >
         {icon}
       </Tippy>

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { IconPlus, IconDownload, IconSettings } from '@tabler/icons';
+
+const EnvironmentListContent = ({
+  environments,
+  activeEnvironmentUid,
+  description,
+  onEnvironmentSelect,
+  onSettingsClick,
+  onCreateClick,
+  onImportClick
+}) => {
+  return (
+    <div>
+      {environments && environments.length > 0 ? (
+        <>
+          <div className="environment-list">
+            <div className="dropdown-item no-environment" onClick={() => onEnvironmentSelect(null)}>
+              <span>No Environment</span>
+            </div>
+            <div>
+              {environments.map((env) => (
+                <div
+                  key={env.uid}
+                  className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
+                  onClick={() => onEnvironmentSelect(env)}
+                >
+                  <span className="max-w-32 truncate no-wrap">{env.name}</span>
+                </div>
+              ))}
+            </div>
+            <div className="dropdown-item configure-button">
+              <button onClick={onSettingsClick} id="configure-env">
+                <IconSettings size={16} strokeWidth={1.5} />
+                <span>Configure</span>
+              </button>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="empty-state">
+          <h3>Ready to get started?</h3>
+          <p>{description}</p>
+          <div className="space-y-2">
+            <button onClick={onCreateClick} id="create-env">
+              <IconPlus size={16} strokeWidth={1.5} />
+              Create
+            </button>
+            <button onClick={onImportClick} id="import-env">
+              <IconDownload size={16} strokeWidth={1.5} />
+              Import
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EnvironmentListContent;

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+const sensitiveFields = [
+  'request.auth.oauth2.clientSecret',
+  'request.auth.basic.password',
+  'request.auth.digest.password',
+  'request.auth.wsse.password',
+  'request.auth.ntlm.password',
+  'request.auth.awsv4.secretAccessKey',
+  'request.auth.bearer.token'
+];
+
+export { sensitiveFields };

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

@@ -1,10 +1,11 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
+import { get } from 'lodash';
 import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
+import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -13,7 +14,9 @@ import { variableNameRegex } from 'utils/common/regex';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables } from 'utils/collections';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'utils/collections';
+import { sensitiveFields } from './constants';
 
 const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
   const dispatch = useDispatch();
@@ -26,6 +29,50 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
   const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
   _collection.globalEnvironmentVariables = globalEnvironmentVariables;
 
+  const nonSecretSensitiveVarUsageMap = useMemo(() => {
+    const result = {};
+    if (!collection || !environment?.variables) {
+      return result;
+    }
+    const nonSecretVars = environment.variables.filter((v) => v.enabled && !v.secret && v.name);
+    if (!nonSecretVars.length) {
+      return result;
+    }
+    const varNames = new Set(nonSecretVars.map((v) => v.name));
+    
+    const checkSensitiveField = (obj, fieldPath) => {
+      const value = get(obj, fieldPath);
+      if (typeof value === 'string') {
+        varNames.forEach((varName) => {
+          if (new RegExp(`\{\{\s*${varName}\s*\}\}`).test(value)) {
+            result[varName] = true;
+          }
+        });
+      }
+    };
+
+    const getObjectToProcess = (item) => {
+      if (isItemARequest(item)) {
+        return item.draft || item;
+      }
+      return item.root;
+    };
+
+    const collectionObj = getObjectToProcess(collection);
+    sensitiveFields.forEach((fieldPath) => {
+      checkSensitiveField(collectionObj, fieldPath);
+    });
+    
+    const items = flattenItems(collection.items || []);
+    items.forEach((item) => {
+      const objToProcess = getObjectToProcess(item);
+      sensitiveFields.forEach((fieldPath) => {
+        checkSensitiveField(objToProcess, fieldPath);
+      });
+    });
+    return result;
+  }, [collection, environment]);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: environment.variables || [],
@@ -61,6 +108,8 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
     }
   });
 
+  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
+
   // Effect to track modifications.
   React.useEffect(() => {
     setIsModified(formik.dirty);
@@ -124,7 +173,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
   return (
     <StyledWrapper className="w-full mt-6 mb-6">
       <div className="h-[50vh] overflow-y-auto w-full">
-        <table>
+        <table className="environment-variables">
           <thead>
             <tr>
               <td className="text-center">Enabled</td>
@@ -163,9 +212,9 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                     <ErrorMessage name={`${index}.name`} />
                   </div>
                 </td>
-                <td className="flex flex-row flex-nowrap">
+                <td className="flex flex-row flex-nowrap items-center">
                   <div className="overflow-hidden grow w-full relative">
-                    <SingleLineEditor
+                    <MultiLineEditor
                       theme={storedTheme}
                       collection={_collection}
                       name={`${index}.value`}
@@ -174,6 +223,12 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                       onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
                     />
                   </div>
+                  {!variable.secret && hasSensitiveUsage(variable.name) && (
+                    <SensitiveFieldWarning
+                      fieldName={variable.name}
+                      warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
+                    />
+                  )}
                 </td>
                 <td className="text-center">
                   <input
@@ -198,6 +253,8 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
             ref={addButtonRef}
             className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
             onClick={addVariable}
+            id="add-variable"
+            data-testid="add-variable"
           >
             + Add Variable
           </button>
@@ -205,15 +262,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
       </div>
 
       <div className="flex items-center">
-        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit}>
+        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit} data-testid="save-env">
           <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset} data-testid="reset-env">
           <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
           Reset
         </button>
-        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate}>
+        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate} data-testid="activate-env">
           <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
           Activate
         </button>

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

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

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

@@ -9,7 +9,7 @@ const ManageSecrets = ({ onClose }) => {
         <div>
           <p>In any collection, there are secrets that need to be managed.</p>
           <p className="mt-2">These secrets can be anything such as API keys, passwords, or tokens.</p>
-          <p className="mt-4">Bruno offers two approaches to manage secrets in collections.</p>
+          <p className="mt-4">Bruno offers three approaches to manage secrets in collections.</p>
           <p className="mt-2">
             Read more about it in our{' '}
             <a

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

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

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

@@ -0,0 +1,147 @@
+import React, { Component, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addDebugError } from 'providers/ReduxStore/slices/logs';
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    if (this.props.onError) {
+      this.props.onError({
+        message: error.message,
+        stack: error.stack,
+        error: error,
+        timestamp: new Date().toISOString()
+      });
+    }
+
+    setTimeout(() => {
+      this.setState({ hasError: false });
+    }, 100);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+const serializeArgs = (args) => {
+  return args.map(arg => {
+    try {
+      if (arg === null) return 'null';
+      if (arg === undefined) return 'undefined';
+      if (typeof arg === 'string' || typeof arg === 'number' || typeof arg === 'boolean') {
+        return arg;
+      }
+      if (arg instanceof Error) {
+        return {
+          __type: 'Error',
+          name: arg.name,
+          message: arg.message,
+          stack: arg.stack
+        };
+      }
+      if (typeof arg === 'object') {
+        try {
+          return JSON.parse(JSON.stringify(arg));
+        } catch {
+          return String(arg);
+        }
+      }
+      return String(arg);
+    } catch (e) {
+      return '[Unserializable]';
+    }
+  });
+};
+
+// Helper function to extract file and line info from stack trace
+const extractFileInfo = (stack) => {
+  if (!stack) return { filename: null, lineno: null, colno: null };
+  
+  try {
+    const lines = stack.split('\n');
+    for (let line of lines) {
+      if (line.includes('ErrorCapture') || line.trim() === 'Error') continue;
+      
+      const match = line.match(/(?:at\s+.*?\s+)?\(?([^)]+):(\d+):(\d+)\)?/);
+      if (match) {
+        return {
+          filename: match[1],
+          lineno: parseInt(match[2]),
+          colno: parseInt(match[3])
+        };
+      }
+    }
+  } catch (e) {
+    // Ignore parsing errors
+  }
+  
+  return { filename: null, lineno: null, colno: null };
+};
+
+const useGlobalErrorCapture = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const originalConsoleError = console.error;
+
+    console.error = (...args) => {
+      const currentStack = new Error().stack;
+      
+      originalConsoleError.apply(console, args);
+
+      if (currentStack && currentStack.includes('useIpcEvents.js')) {
+        return;
+      }
+
+      const errorMessage = args.join(' ');
+      if (errorMessage.includes('removeConsoleLogListener')) {
+        return;
+      }
+
+      const { filename, lineno, colno } = extractFileInfo(currentStack);
+
+      const serializedArgs = serializeArgs(args);
+
+      dispatch(addDebugError({
+        message: errorMessage,
+        stack: currentStack,
+        filename: filename,
+        lineno: lineno,
+        colno: colno,
+        args: serializedArgs,
+        timestamp: new Date().toISOString()
+      }));
+    };
+
+    return () => {
+      console.error = originalConsoleError;
+    };
+  }, [dispatch]);
+};
+
+const ErrorCapture = ({ children }) => {
+  const dispatch = useDispatch();
+  
+  useGlobalErrorCapture();
+
+  const handleReactError = (errorData) => {
+    dispatch(addDebugError(errorData));
+  };
+
+  return (
+    <ErrorBoundary onError={handleReactError}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default ErrorCapture; 

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

@@ -7,6 +7,7 @@ import { updateFolderAuth } from 'providers/ReduxStore/slices/collections';
 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';
 import AuthMode from '../AuthMode';
 import BasicAuth from 'components/RequestPane/Auth/BasicAuth';
@@ -35,6 +36,8 @@ const GrantTypeComponentMap = ({ collection, folder }) => {
       return <OAuth2AuthorizationCode save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
     case 'client_credentials':
       return <OAuth2ClientCredentials save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
+    case 'implicit':
+      return <OAuth2Implicit save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
     default:
       return <div>TBD</div>;
   }
@@ -74,7 +77,7 @@ const Auth = ({ collection, folder }) => {
       const parentFolder = folderTreePath[i];
       if (parentFolder.type === 'folder') {
         const folderAuth = get(parentFolder, 'root.request.auth');
-        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
+        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'inherit') {
           effectiveSource = {
             type: 'folder',
             name: parentFolder.name,

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

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

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

@@ -9,17 +9,9 @@ import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
 import Documentation from './Documentation';
 import Auth from './Auth';
-import DotIcon from 'components/Icons/Dot';
+import StatusDot from 'components/StatusDot';
 import get from 'lodash/get';
 
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
-
 const FolderSettings = ({ collection, folder }) => {
   const dispatch = useDispatch();
   let tab = 'headers';
@@ -82,7 +74,7 @@ const FolderSettings = ({ collection, folder }) => {
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full">
+    <StyledWrapper className="flex flex-col h-full overflow-auto">
       <div className="flex flex-col h-full relative px-4 py-4">
         <div className="flex flex-wrap items-center tabs" role="tablist">
           <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
@@ -91,11 +83,11 @@ const FolderSettings = ({ collection, folder }) => {
           </div>
           <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
             Script
-            {hasScripts && <ContentIndicator />}
+            {hasScripts && <StatusDot />}
           </div>
           <div className={getTabClassname('test')} role="tab" onClick={() => setTab('test')}>
             Test
-            {hasTests && <ContentIndicator />}
+            {hasTests && <StatusDot />}
           </div>
           <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
             Vars
@@ -103,13 +95,13 @@ const FolderSettings = ({ collection, folder }) => {
           </div>
           <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
             Auth
-            {hasAuth && <ContentIndicator />}
+            {hasAuth && <StatusDot />}
           </div>
           <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
             Docs
           </div>
         </div>
-        <section className={`flex mt-4 h-full`}>{getTabPanel(tab)}</section>
+        <section className={`flex mt-4 h-full overflow-auto`}>{getTabPanel(tab)}</section>
       </div>
     </StyledWrapper>
   );

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

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

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

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

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

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

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

@@ -2,8 +2,8 @@ import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash, IconAlertCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
+import { useDispatch, useSelector } from 'react-redux';
+import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -12,11 +12,18 @@ import { variableNameRegex } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { Tooltip } from 'react-tooltip';
+import { getGlobalEnvironmentVariables } from 'utils/collections';
 
-const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables }) => {
+const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const addButtonRef = useRef(null);
+  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector(state => state.globalEnvironments);
+
+  let _collection = cloneDeep(collection);
+
+  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
+  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -93,7 +100,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
 
   useEffect(() => {
     if (formik.dirty) {
-      // Smooth scrolling to the changed parameter is temporarily disabled 
+      // Smooth scrolling to the changed parameter is temporarily disabled
       // due to UX issues when editing the first row in a long list of environment variables.
       // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
@@ -145,10 +152,11 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                     <ErrorMessage name={`${index}.name`} />
                   </div>
                 </td>
-                <td className="flex flex-row flex-nowrap">
+                <td className="flex flex-row flex-nowrap items-center">
                   <div className="overflow-hidden grow w-full relative">
-                    <SingleLineEditor
+                    <MultiLineEditor
                       theme={storedTheme}
+                      collection={_collection}
                       name={`${index}.value`}
                       value={variable.value}
                       isSecret={variable.secret}
@@ -179,6 +187,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
             ref={addButtonRef}
             className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
             onClick={addVariable}
+            data-testid="add-variable"
           >
             + Add Variable
           </button>
@@ -186,10 +195,10 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
       </div>
 
       <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit} data-testid="save-env">
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset} data-testid="reset-env">
           Reset
         </button>
       </div>

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

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

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

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

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

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

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

@@ -39,7 +39,7 @@ const DefaultTab = ({ setTab }) => {
   );
 };
 
-const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, onClose }) => {
+const EnvironmentSettings = ({ globalEnvironments, collection, onClose }) => {
   const [isModified, setIsModified] = useState(false);
   const environments = globalEnvironments;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
@@ -53,9 +53,8 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
           ) : tab === 'import' ? (
             <ImportEnvironment onClose={() => setTab('default')} />
           ) : (
-            <></>
+            <DefaultTab setTab={setTab} />
           )}
-          <DefaultTab setTab={setTab} />
         </Modal>
       </StyledWrapper>
     );
@@ -65,11 +64,11 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
     <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
       <EnvironmentList
         environments={globalEnvironments}
-        activeEnvironmentUid={activeGlobalEnvironmentUid}
         selectedEnvironment={selectedEnvironment}
         setSelectedEnvironment={setSelectedEnvironment}
         isModified={isModified}
         setIsModified={setIsModified}
+        collection={collection}
       />
     </Modal>
   );

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

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

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

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

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

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

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

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

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

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